html,body{max-width:100%;overflow-x:clip}
img{max-width:100%}
h1,h2,h3,p,a{overflow-wrap:break-word}
.comparison:focus-within{outline:3px solid #fff;outline-offset:3px}
@media(max-width:800px){
 .site-header{align-items:flex-start;gap:1rem;padding:1rem 1.15rem}
 .site-header .brand{flex:0 0 auto}
 .site-header .brand>span:last-child{display:none}
 .site-header nav{display:grid;grid-template-columns:repeat(2,minmax(0,auto));justify-content:end;gap:.35rem 1rem;max-width:calc(100vw - 6rem);margin-left:auto}
 .site-header nav a{display:block!important;font-size:.68rem;line-height:1.25;text-align:right;white-space:normal}
 .site-header nav a:last-child{grid-column:1/-1}
 .hero-content-fixed{left:1.25rem;right:1.25rem;bottom:8rem}
 .hero-content h1,.services-hero h1,.service-detail-hero h1,.about-hero h1,.category-index-hero h1,.category-detail-hero h1,.portfolio-hero h1,.project-story-hero h1{font-size:clamp(2.65rem,13vw,4.4rem);line-height:.98;max-width:100%;text-wrap:balance}
 .section-intro h2,.about-story h2,.category-story h2,.project-intro h2{font-size:clamp(2.3rem,10vw,3.7rem);line-height:1.02}
 .portfolio-filters{max-width:100%;overscroll-behavior-inline:contain}
 .portfolio-grid>a>div{left:1.5rem;right:1.5rem;bottom:2rem}
 .category-grid a>div{left:1.5rem;right:1.5rem}
 .home-quote-visual>div{min-width:0;padding:3.5rem 1.5rem}
 .home-quote-visual blockquote{overflow-wrap:anywhere}
}
@media(max-width:380px){
 .site-header nav{gap:.3rem .65rem}
 .site-header nav a{font-size:.64rem}
}