/* Milan's Roofing V14 — restrained premium layout system.
   Backgrounds may remain full bleed; customer-facing content sits on a consistent centered grid. */
:root{
  --layout-max:1320px;
  --layout-header-max:1400px;
  --layout-gutter:48px;
}

/* Core page grid */
.wrap{
  width:min(var(--layout-max),calc(100% - 96px))!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Header can breathe slightly wider than editorial content, but never hug viewport edges. */
.header-shell .wrap.header,
.header > .wrap{
  width:min(var(--layout-header-max),calc(100% - 96px))!important;
}

/* Home / large hero: keep image full bleed, constrain the interface inside it. */
.hero-content{
  grid-template-columns:minmax(0,1fr) minmax(280px,320px)!important;
  gap:clamp(48px,5.5vw,88px)!important;
}
.hero-content>div:first-child{max-width:800px!important}
.hero h1{max-width:800px!important}
.hero-copy{max-width:650px!important}
.hero-side{width:100%!important;align-items:stretch!important}
.hero-proof,.hero-caption{width:100%!important;max-width:320px!important;margin-left:auto!important}
.hero-bottom .wrap{width:min(var(--layout-max),calc(100% - 96px))!important}

/* Inner heroes and editorial content should share exactly the same left edge. */
.inner-hero-content{width:min(var(--layout-max),calc(100% - 96px))!important;margin-inline:auto!important}
.inner-hero h1{max-width:900px!important}
.inner-hero p{max-width:680px!important}

/* More intentional section rhythm without changing the approved typography. */
.section{padding-top:116px!important;padding-bottom:116px!important}
.work{padding-top:128px!important;padding-bottom:136px!important}
.testimonial{padding-top:104px!important;padding-bottom:104px!important}
.final{padding-top:112px!important;padding-bottom:112px!important}

/* Keep long headings from sprawling across the entire viewport. */
.display{max-width:880px}
.section-head>div,.service-explorer-head>div,.work-head>div{max-width:820px}
.section-head>p,.service-explorer-head>p,.work-head>p{max-width:460px}

/* Rows/cards get internal air instead of visually colliding with the page shell. */
.row,.system-row,.area-list a,.area-list div{padding-left:6px;padding-right:6px}
.project-label{left:30px!important;right:30px!important;bottom:28px!important}
.service-tab{padding-left:30px!important;padding-right:30px!important}

/* Footer follows the same content grid. */
footer .wrap,.footer .wrap{width:min(var(--layout-max),calc(100% - 96px))!important}

/* Components/pages with their own hero/grid vocabulary. */
.hero-grid,.overview-grid,.notes-grid,.gallery-section>.wrap,.related>.wrap,
.content>.wrap,.hero-inner,.project-head,.project-actions{
  max-width:var(--layout-max);
}

@media (max-width:1440px){
  .wrap,
  .header-shell .wrap.header,
  .header > .wrap,
  .inner-hero-content,
  .hero-bottom .wrap,
  footer .wrap,.footer .wrap{
    width:min(var(--layout-max),calc(100% - 72px))!important;
  }
  .hero-content{gap:52px!important}
}

@media (max-width:1100px){
  .wrap,
  .header-shell .wrap.header,
  .header > .wrap,
  .inner-hero-content,
  .hero-bottom .wrap,
  footer .wrap,.footer .wrap{
    width:calc(100% - 48px)!important;
  }
  .hero-content{grid-template-columns:1fr!important;gap:28px!important}
  .hero-content>div:first-child,.hero h1{max-width:860px!important}
  .hero-side{display:none!important}
  .section{padding-top:96px!important;padding-bottom:96px!important}
}

@media (max-width:760px){
  .wrap,
  .header-shell .wrap.header,
  .header > .wrap,
  .inner-hero-content,
  .hero-bottom .wrap,
  footer .wrap,.footer .wrap{
    width:calc(100% - 36px)!important;
  }
  .section{padding-top:76px!important;padding-bottom:76px!important}
  .work{padding-top:84px!important;padding-bottom:90px!important}
  .testimonial,.final{padding-top:76px!important;padding-bottom:76px!important}
  .project-label{left:20px!important;right:20px!important;bottom:20px!important}
  .service-tab{padding-left:20px!important;padding-right:20px!important}
}