/* Prevent awkward one- or two-character headline wraps on desktop. */
.hero{grid-template-columns:48% 52%}
.hero h1{font-size:clamp(58px,6.6vw,108px)}
.hero h1 span,.hero h1 em{display:block;white-space:nowrap}
.brief{grid-template-columns:14% 50% 36%}
.brief h2{font-size:clamp(40px,4.65vw,70px)}
.research{grid-template-columns:42% 58%;gap:4vw}
.research h2{font-size:clamp(40px,4.35vw,66px)}
.campaign-head{grid-template-columns:42% 58%}
.campaign-head h2{font-size:clamp(40px,4.5vw,68px)}
.recipe{grid-template-columns:42% 58%;gap:4vw}
.recipe h2{font-size:clamp(42px,4.8vw,72px)}
.brief h2 span,
.research h2 span,
.campaign h2 span,
.recipe h2 span{display:block;white-space:nowrap}

@media(max-width:850px){
  .hero{grid-template-columns:1fr}
  .hero h1 span,.hero h1 em{white-space:normal}
  .brief,.research,.recipe{grid-template-columns:1fr}
  .campaign-head{grid-template-columns:1fr}
  .brief h2 span,
  .research h2 span,
  .campaign h2 span,
  .recipe h2 span{white-space:normal}
}