/* NextClimate Media — FULL-WIDTH layout variant
   Loaded after style.css. Content spans the viewport; only side gutters remain.
   Change --gut to match the reference gutter exactly. */

:root{
  --wrap:none;
  --gut:clamp(20px,4.2vw,80px);
}

/* Readable measure: text never runs the full width, even when its column does */
main p,main li,.facts dd{max-width:72ch}
.cta p,.clients p{margin-left:auto;margin-right:auto}
.quote blockquote,.quote p{max-width:none}

/* Type scales up on wide screens */
.h-display{font-size:clamp(2.5rem,5.6vw,6.4rem)}
.h-1{font-size:clamp(2.2rem,4.2vw,4.6rem)}
.h-2{font-size:clamp(1.8rem,2.8vw,3.2rem)}
.intro-statement{font-size:clamp(1.5rem,2.4vw,2.8rem);max-width:28ch}
.lede{max-width:62ch}

/* Hero: give the headline more room, image follows */

.page-head h1{max-width:24ch}
.l2-hero{max-width:min(1100px,100%)}

/* Home intro: bigger N on wide screens */


/* Cards: four across on very wide screens */
@media (min-width:1600px){
  .cards{grid-template-columns:repeat(4,1fr)}
  .cards--2{grid-template-columns:repeat(3,1fr)}
  .logo-grid{grid-template-columns:repeat(6,1fr)}
  .quote{width:480px}
}

/* Clients band: logo board grows with the page */
.clients-board{max-width:1400px}

/* Long-form pages: wider sidebar, prose stays at a readable width */

.prose{max-width:820px}

/* Footer columns spread across the full width */
.f-sub{max-width:640px}
.f-sub h2{font-size:clamp(1.5rem,2.4vw,2.6rem)}
.sub-form{max-width:520px}

/* Desktop-only column layouts (mobile keeps the single-column rules from style.css) */
@media (min-width:881px){
  .hero-grid{grid-template-columns:1.1fr 1fr}
  .intro-grid{grid-template-columns:minmax(160px,min(24vw,400px)) 1fr}
  .doc{grid-template-columns:minmax(220px,280px) minmax(0,1fr)}
}