/* Readable metadata and stable typography on narrow screens. */
.logo{font-family:Arial,Helvetica,sans-serif;font-weight:900}
.hero-footer,.eyebrow,.secondary-note,.trusted>span,.project-tag,.project-tag.below,.project-number,.service-no,.pills span,.studio-label,.process article>span,.contact-location,footer,.header-caption{font-size:12px}
.hero-overline{font-size:12px}
.services-intro>p,.service-detail p,.studio-copy p,.process p,.contact-bottom p,.hero-bottom p{font-size:16px}
.project-info p,.round-link,.contact-link{font-size:14px}
.project-tag.below{line-height:1.6;letter-spacing:.5px}
.contact-bottom{flex-wrap:wrap}
.hero-footer{letter-spacing:.6px}
@media(max-width:1100px){.hero-index{display:none}.hero-footer{gap:16px}.section-heading .text-link{white-space:normal}}
@media(max-width:700px){
  .header{gap:12px;padding-left:5%;padding-right:5%}
  .header-contact{font-size:12px;padding:10px 12px;gap:8px}
  .header-contact span{font-size:18px}
  .menu-toggle{flex-shrink:0}
  h1{font-size:clamp(36px,10.6vw,74px)}
  .hero-overline{font-size:12px;letter-spacing:.5px;gap:8px}
  .hero-footer{align-items:center;gap:0;flex-wrap:wrap}
  .hero-footer>span:first-child{font-size:12px;letter-spacing:0}
  .motion-toggle{font-size:12px}
  .hero-bottom p br{display:none}
  .hero-bottom p{max-width:360px}
  .hero{min-height:800px}
  .eyebrow{font-size:12px;letter-spacing:.5px}
  .project-tag.below,.trusted>span,.studio-label,.process article>span,footer{font-size:12px}
  .services-intro>p,.service-detail p,.studio-copy p,.process p,.contact-bottom p{font-size:16px}
  .contact h2{font-size:clamp(36px,9.4vw,64px)}
  .contact-circle{width:55px;height:55px;font-size:35px}
  .studio-statement h2{font-size:clamp(40px,11.5vw,60px)}
  .trusted>span{line-height:1.7}
  .section-heading .text-link{font-size:14px}
}