:root{--serif:"HJ Reading",serif;--sans:"HJ Sans","Microsoft JhengHei",sans-serif}
body{font-family:var(--sans);font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility}
h1,h2,.lead,.intro-tagline{font-family:var(--serif);font-weight:400}
h1,h2{letter-spacing:.035em}
h3{font-family:var(--sans);font-weight:500;letter-spacing:.045em}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.brand-type{gap:4px}
.brand-type .brand-written{display:block;width:94px;height:43px;line-height:0;font-size:0;letter-spacing:0}
.brand-written svg{display:block;width:100%;height:100%;fill:currentColor}
.brand-type small{font-size:8px;letter-spacing:3.4px}
.intro-name{display:block;width:clamp(340px,49vw,650px);max-width:100%;line-height:0;margin:18px auto 20px;letter-spacing:0}
.intro-wordmark{width:100%;height:auto;overflow:visible;fill:currentColor;opacity:0}
.intro-company{font-size:12px;letter-spacing:.2em;font-weight:400}
.intro-tagline{font-size:16px;letter-spacing:.09em}
.intro:focus{outline:none}
.intro-footer .intro-skip{appearance:none;background:transparent;border:0;border-radius:0;box-shadow:none;padding:12px 0 12px 16px;font-family:var(--sans);font-size:11px;font-weight:400;letter-spacing:.14em;text-transform:lowercase;opacity:.42;transition:opacity .5s;outline:none;color:inherit}
.intro-footer .intro-skip:hover{opacity:.8}
.intro-footer .intro-skip:focus-visible{opacity:1;text-decoration:underline;text-underline-offset:5px;outline:none}
.ui-icon{display:inline-block;vertical-align:middle;width:17px;height:17px;flex-shrink:0}
.circle-arrow .ui-icon{width:18px;height:18px}
.contact-circle>span:first-child .ui-icon{width:34px;height:34px}
.scroll-hint .ui-icon{width:14px;height:22px}
.replay-button .ui-icon{width:14px;height:14px}
.image-expand .ui-icon{width:16px;height:16px}
.lightbox-close .ui-icon{width:21px;height:21px}
.lightbox-prev .ui-icon,.lightbox-next .ui-icon{width:16px;height:16px}
.faq-list summary .ui-icon{width:15px;height:15px}
.reference-links .ui-icon,.hero-credit .ui-icon{width:10px;height:10px}
.hero h1{font-size:clamp(64px,7.1vw,108px);letter-spacing:.045em;line-height:1.3}
.hero-description{font-size:15px;line-height:2;letter-spacing:.07em}
.hero .text-link{font-size:13px}
.section-heading h2,.philosophy-heading h2,.contact h2{font-size:clamp(34px,3.4vw,52px)}
.philosophy-copy{font-size:14px;line-height:2.15;letter-spacing:.045em}
.philosophy-copy .lead{font-size:27px;line-height:1.75;letter-spacing:.05em}
.services-heading>p,.section-heading>p,.process-intro>p:not(.eyebrow),.contact-description{font-size:14px;line-height:2.1;letter-spacing:.04em}
.service-row p,.process-list p,.faq-list details p{font-size:14px;line-height:2.05;letter-spacing:.035em}
.service-row h3,.process-list h3{font-size:20px;line-height:1.65}
.faq-list summary{font-size:14px;line-height:1.9}
.gallery-card h3{font-size:13px;font-weight:400;line-height:1.8}
.gallery-meta{font-size:10px;letter-spacing:.025em}
.contact-details{font-size:13px;letter-spacing:.03em}
.site-header nav{font-size:12px;letter-spacing:.025em}
.archive-heading>p:last-child{font-size:14px;line-height:2.1}
.archive-heading h1{letter-spacing:.035em}
@media(max-width:1050px) and (min-width:701px){
 .site-header nav{gap:22px;font-size:11px}
 .brand-type .brand-written{width:83px;height:39px}
}
@media(max-width:700px){
 .brand{gap:8px}
 .brand-type .brand-written{width:79px;height:35px}
 .brand-type small{font-size:7px;letter-spacing:2.6px}
 .intro-name{width:86vw;max-width:340px;margin:23px auto 24px}
 .intro-company{font-size:10px;letter-spacing:.12em}
 .intro-tagline{font-size:14px;letter-spacing:.025em}
 .intro-footer .intro-skip{font-size:10px;opacity:.38;padding-right:1px}
 .hero h1{font-size:clamp(43px,12.3vw,62px);line-height:1.43;letter-spacing:.035em;margin:23px 0 25px}
 .hero-description{font-size:14px;line-height:2;letter-spacing:.05em}
 .hero .text-link{font-size:12px;margin-top:27px}
 .hero-copy{top:49%;transform:translateY(-38%)}
 .hero .eyebrow{font-size:7px;letter-spacing:.19em}
 h2,.section-heading h2,.philosophy-heading h2,.services-heading h2,.process-intro h2{font-size:31px;line-height:1.6;letter-spacing:.035em}
 .contact-body h2{font-size:28px;line-height:1.7}
 .philosophy-copy{font-size:14px;line-height:2.05}
 .philosophy-copy .lead{font-size:25px;line-height:1.7;letter-spacing:.035em}
 .services-heading>p,.section-heading>p,.process-intro>p:not(.eyebrow),.contact-description{font-size:13px;line-height:2.05;letter-spacing:.025em}
 .service-row h3,.process-list h3{font-size:19px;line-height:1.7;margin-bottom:12px}
 .service-row p,.process-list p,.faq-list details p{font-size:14px;line-height:2.05;letter-spacing:.025em}
 .service-row{padding-bottom:29px;margin-bottom:29px}
 .gallery-card h3{font-size:12px;line-height:1.85;letter-spacing:.015em}
 .gallery-meta{font-size:9px;line-height:1.9;letter-spacing:0}
 .faq-list summary{font-size:14px;line-height:1.9;letter-spacing:0}
 .contact-details{font-size:13px;letter-spacing:.02em}
 .archive-heading h1{font-size:38px;line-height:1.55;letter-spacing:.015em}
 .archive-heading>p:last-child{font-size:13px;line-height:2.05}
 .filter-bar button{font-size:11px}
 .archive-options select,.archive-options input{font-size:13px}
 .lightbox-meta h3{font-size:15px;letter-spacing:.035em}
 .lightbox-meta p{font-size:12px;line-height:1.95}
}
@media(prefers-reduced-motion:reduce){.intro-wordmark{opacity:1}}