header{position:sticky;top:0;z-index:20;border-bottom:0;background:#fff}.site-nav{gap:30px;white-space:nowrap}.site-nav>a,.services-toggle,.nav-inquiry{font-size:17px;font-weight:600}.site-nav>a{padding:15px 0}.nav-inquiry{background:none;color:inherit;padding:15px 0}.site-nav>a:hover,.site-nav>a[aria-current="page"]{text-decoration:none}.nav-services{position:relative}.services-toggle{display:flex;align-items:center;gap:10px;background:none;color:inherit;padding:15px 0}.services-toggle span{transition:transform .2s}.services-toggle[aria-expanded="true"] span{transform:rotate(180deg)}.services-menu{position:absolute;top:100%;left:-22px;min-width:226px;padding:10px;background:#fff;border:1px solid #f7620040;box-shadow:0 14px 35px #17181512}.services-menu[hidden]{display:none}.services-menu a{display:block;padding:14px 12px;font-size:14px}.services-menu a:hover,.services-menu a:focus-visible,.services-menu a[aria-current="page"]{background:#fff2e9;color:#c74d00}.page-intro{padding:65px 4% 45px;border-bottom:1px solid #f7620040;color:#f76200}.page-back{font-size:12px}.page-intro>p{margin-top:55px;font-size:12px;letter-spacing:2px}.page-intro h1{font-size:clamp(42px,7vw,100px);line-height:1.2;margin:22px 0;overflow-wrap:anywhere}.page-copy{padding:65px 4% 90px;max-width:1000px}.page-copy h2{font-size:clamp(24px,3vw,40px)}.page-copy p{font-size:17px;line-height:2;color:#555;max-width:680px}.page-cta{display:inline-block;background:#f76200;color:white;padding:16px 24px;margin-top:20px}.related-services{margin-top:70px;border-top:1px solid #ddd;padding-top:25px}.related-services a{display:inline-block;margin:12px 28px 12px 0}.empty-note{border-top:1px solid #ddd;margin-top:40px;padding-top:28px}@media(max-width:1000px){header .header-note{display:none}.site-nav{gap:22px}}@media(max-width:600px){header{height:auto;min-height:112px;flex-wrap:wrap;gap:12px;padding-top:18px;padding-bottom:8px}.site-nav{width:100%;justify-content:space-between;gap:8px}.site-nav>a,.services-toggle,.nav-inquiry{font-size:16px;padding:12px 0}.services-toggle{gap:5px}.services-menu{left:0;min-width:210px}.page-intro{padding-top:35px}.page-intro>p{margin-top:35px}.page-copy{padding-top:35px}}

/* Supplied brand mark with divider and Chinese name. */
header .brand-lockup{display:inline-flex;align-items:center;gap:20px;flex-shrink:0;color:#f76200;margin-right:auto;text-decoration:none}
header .brand-wordmark{display:block;width:210px;height:auto;object-fit:contain}
header .brand-divider{display:block;width:1px;height:38px;background:#f7620060;flex-shrink:0}
header .brand-name{font-family:'Noto Sans TC',sans-serif;font-size:25px;font-weight:600;letter-spacing:2px;white-space:nowrap}
@media(min-width:601px) and (max-width:1100px){header .brand-wordmark{width:165px}header .brand-lockup{gap:12px}header .brand-name{font-size:21px;letter-spacing:1px}.site-nav{gap:16px}}
@media(max-width:800px) and (min-width:601px){header .brand-wordmark{width:135px}header .brand-name{font-size:19px}.site-nav{gap:10px}.site-nav>a,.services-toggle,.nav-inquiry{font-size:15px}}
@media(max-width:600px){header .brand-wordmark{width:165px}header .brand-lockup{gap:16px}header .brand-name{font-size:23px;letter-spacing:1px}header .brand-divider{height:32px}}
/* Keep the logo fixed while its artwork appears from left to right. */
header .brand-wordmark{transform:none;transition:none}
@media(max-width:360px){.site-nav{gap:2px}}



header .brand-name-letter{display:inline-block}
/* Navigation changes from brand orange to charcoal after leaving the page top. */
body>header{--header-ink:#f76200;color:var(--header-ink);background:transparent;box-shadow:none;transition:color .25s ease,background-color .25s ease,box-shadow .25s ease}
body>header.is-scrolled{--header-ink:#383838;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.045)}
body>header .brand-lockup{color:var(--header-ink);transition:color .25s ease}
body>header .brand-wordmark path{fill:currentColor;transition:fill .25s ease}
body>header .brand-divider{background:currentColor;opacity:.38;transition:background-color .25s ease}
@media(prefers-reduced-motion:reduce){body>header,body>header .brand-lockup,body>header .brand-wordmark path,body>header .brand-divider{transition:none}}

.header-phone{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:16px;font-weight:600;line-height:1.4;white-space:nowrap;color:#fff;background:#f76200;border:1px solid #f76200;border-radius:999px;padding:10px 16px}
@media(min-width:601px) and (max-width:1200px){header{height:auto;min-height:96px;flex-wrap:wrap;gap:10px;padding-top:16px;padding-bottom:12px}.site-nav{margin-left:auto;flex-wrap:wrap;justify-content:flex-end}}
@media(max-width:600px){.site-nav{flex-wrap:wrap}.header-phone{flex:0 0 auto;margin-left:auto;font-size:14px;padding:8px 14px}}
/* Trim the navigation height by 10px at each responsive layout. */
@media(min-width:1201px){body>header{height:86px}}
@media(min-width:601px) and (max-width:1200px){body>header{min-height:86px;padding-top:11px;padding-bottom:7px}}
@media(max-width:600px){body>header{min-height:102px;padding-top:13px;padding-bottom:3px}}

/* Full-width service panel beneath the navigation. */
.services-backdrop{position:fixed;inset:0;z-index:39;background:rgba(0,0,0,.2)}
.services-backdrop[hidden]{display:none}
body>header.has-open-services{z-index:40;background:#fff}
body>header .nav-services{position:static}
body>header .services-menu{position:absolute;top:100%;left:0;right:0;width:100%;min-width:0;height:500px;max-height:calc(100dvh - 86px);overflow-y:auto;display:grid;grid-template-columns:1fr 1.05fr 1.25fr;gap:5%;align-items:center;padding:28px 6%;background:#fff;color:#f76200;border:0;border-top:1px solid #f7620026;box-shadow:0 18px 30px #0000000d;white-space:normal}
body>header .services-menu[hidden]{display:none}
.services-menu-intro{align-self:start;padding-top:8px;color:#3c3c3c}
.services-menu-intro p{font-size:11px;letter-spacing:2px;margin:0 0 22px}
.services-menu-intro h2{font-family:'Noto Serif TC',serif;font-size:clamp(38px,4vw,68px);font-weight:600;line-height:1.3;margin:0;white-space:nowrap}
body>header .services-menu-list a{display:flex;align-items:center;gap:20px;padding:20px 0;font-size:20px;font-weight:500;border-bottom:1px solid #f7620026;line-height:1.5;background:transparent;color:#555;transition:color .2s,transform .2s}
body>header .services-menu-list a.is-previewed,body>header .services-menu-list a:hover,body>header .services-menu-list a:focus-visible{color:#f76200;background:transparent;font-weight:600;transform:translateX(6px)}
.service-menu-number{font-family:Arial,sans-serif;font-size:11px;letter-spacing:1px;color:#f76200}
body>header .services-menu-list a:focus-visible{outline:2px solid #f76200;outline-offset:4px}
.services-menu-preview{margin:0;min-width:0}
.services-menu-preview img{display:block;width:100%;height:400px;object-fit:cover;background:#fff7f0}
.services-menu-preview figcaption{font-size:13px;letter-spacing:1px;margin-top:16px}
@media(max-width:1000px){body>header .services-menu{gap:4%;padding:30px 5%;grid-template-columns:.8fr 1fr 1fr}.services-menu-intro h2{font-size:36px}.services-menu-preview img{height:320px}body>header .services-menu-list a{font-size:17px;gap:10px}}
@media(max-width:600px){body>header .services-menu{height:600px;max-height:calc(100dvh - 125px);grid-template-columns:1fr 1fr;align-content:start;align-items:start;gap:20px;padding:24px 5%}.services-menu-intro{grid-column:1/-1;padding:0}.services-menu-intro p{margin-bottom:8px}.services-menu-intro h2{font-size:34px}body>header .services-menu-list a{font-size:15px;padding:14px 0;gap:8px}.services-menu-preview img{height:230px}.services-menu-preview figcaption{font-size:12px}}

/* Floating navigation after scrolling. */
body>header.is-scrolled{top:10px;width:calc(100% - 62px);margin-inline:31px;border-radius:5px;box-shadow:0 6px 22px #0000000d}
body>header.is-scrolled .services-menu{border-radius:0 0 5px 5px;max-height:calc(100dvh - 96px)}
@media(max-width:600px){body>header.is-scrolled{padding-inline:12px}body>header.is-scrolled .services-menu{max-height:calc(100dvh - 145px)}}

body>header{width:100%;margin-inline:0;border-radius:0;transition:top .45s cubic-bezier(.22,1,.36,1),width .45s cubic-bezier(.22,1,.36,1),margin .45s cubic-bezier(.22,1,.36,1),border-radius .45s ease,background-color .35s ease,box-shadow .45s ease,color .25s ease}
@media(max-width:600px){body>header.is-scrolled .brand-wordmark{width:125px}body>header.is-scrolled .brand-name{font-size:19px}body>header.is-scrolled .brand-lockup{gap:10px}body>header .brand-wordmark{transition:width .45s cubic-bezier(.22,1,.36,1)}body>header .brand-name{transition:font-size .45s ease}body>header .brand-lockup{transition:gap .45s ease,color .25s ease}}
@media(prefers-reduced-motion:reduce){body>header,body>header .brand-wordmark,body>header .brand-name,body>header .brand-lockup{transition:none}}

/* Six services in two rows, aligned with a shorter preview. */
body>header .services-menu{height:auto;min-height:280px;grid-template-columns:.9fr 2.2fr 1.2fr;gap:4%;align-items:start;padding-block:36px}
body>header .services-menu-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,100px);column-gap:22px}
body>header .services-menu-list a{font-size:17px;padding:16px 0;min-width:0;overflow-wrap:anywhere}
.services-menu-preview img{height:200px}
@media(max-width:1000px){body>header .services-menu{grid-template-columns:2fr 1fr}.services-menu-intro{grid-column:1/-1}.services-menu-intro h2{font-size:32px}.services-menu-intro p{margin-bottom:8px}body>header .services-menu-list a{font-size:15px}}
@media(max-width:600px){body>header .services-menu{grid-template-columns:1fr;gap:20px;padding:24px 5%}.services-menu-intro{grid-column:auto}body>header .services-menu-list{grid-template-rows:repeat(2,76px);column-gap:12px}body>header .services-menu-list a{font-size:13px}.services-menu-preview img{height:152px}}
