/* A fluid canvas, with narrow gutters rather than a centered page-width cap. */
:root{--gutter:clamp(24px,2.5vw,48px);--hero-space:clamp(38px,5.5vh,76px)}
.wrap{width:100%;max-width:none}
.hero{display:flex;align-items:center;min-height:calc(100vh - var(--header));min-height:calc(100svh - var(--header));padding:var(--hero-space) 0}
.hero>.wrap{display:flex;flex-direction:column;justify-content:center}
.hero h1{max-width:none;width:92%;font-size:clamp(40px,4.65vw,100px)}
.hero-context{max-width:850px}
.hero-bottom{width:100%;margin-top:clamp(32px,5vh,64px)}
.signature{height:clamp(175px,32vw,900px)}
.about-content>h2{max-width:1100px;font-size:clamp(32px,3.2vw,64px)}
.about-copy p{max-width:760px}
.case-hero h1{max-width:1500px;font-size:clamp(38px,4.3vw,88px)}
@media(min-width:1500px){
  .project-row,.strategy-row,.about-grid,.case-layout{grid-template-columns:clamp(230px,16vw,340px) minmax(0,1fr);gap:clamp(48px,4vw,90px)}
}
@media(max-width:1050px){.hero h1{font-size:clamp(40px,5.15vw,54px);width:100%}}
@media(max-width:760px){
  :root{--gutter:24px;--hero-space:42px}
  .hero h1{font-size:clamp(37px,6.5vw,50px)}
  .hero-context{max-width:550px}
  .about-content>h2{font-size:36px;max-width:650px}
  .case-hero h1{font-size:44px}
}
@media(max-width:480px){
  :root{--gutter:20px;--hero-space:38px}
  .hero h1{font-size:38px}
  .hero-bottom{margin-top:35px}
  .about-content>h2{font-size:32px}
  .case-hero h1{font-size:36px}
}
@media print{.hero{min-height:0;padding:35px 0}.hero h1{font-size:48px}.signature{height:250px}}