/* Milan's Roofing V17 — unified inner-page title + spacing system.
   Premium consistency: one content grid, one hero rhythm, one inner-page H1 treatment. */
:root{
  --v17-max:1320px;
  --v17-gutter:48px;
  --v17-hero-min:590px;
  --v17-accent:#F67725;
}

/* One editorial shell throughout the site. */
.wrap,
.inner-hero-content,
.premium-page-hero__grid,
.system-detail-page .hero-grid{
  width:min(var(--v17-max),calc(100% - 96px))!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* HOME keeps its distinct branded hero. Every INNER page uses the same H1 language. */
.inner-page .inner-hero h1,
.inner-page .premium-page-hero h1,
.inner-page main > .hero h1,
.system-detail-page main > .hero h1,
.content-page h1{
  font-family:Manrope,Arial,sans-serif!important;
  font-size:clamp(56px,5.2vw,82px)!important;
  line-height:.94!important;
  font-weight:800!important;
  letter-spacing:-.045em!important;
  text-transform:none!important;
  max-width:900px!important;
  margin-top:20px!important;
  margin-bottom:24px!important;
  text-wrap:balance;
}

/* Same vertical rhythm at the top of every main page. */
.inner-page .inner-hero{
  min-height:var(--v17-hero-min)!important;
}
.inner-page .inner-hero-content{
  min-height:var(--v17-hero-min)!important;
  padding:72px 0!important;
  display:flex!important;
  align-items:center!important;
}
.inner-page .premium-page-hero{
  min-height:var(--v17-hero-min)!important;
  padding:64px 0!important;
  display:flex!important;
  align-items:center!important;
}
.inner-page .premium-page-hero__grid{
  gap:clamp(54px,6vw,88px)!important;
  align-items:center!important;
}
.inner-page .premium-page-hero__image,
.inner-page .premium-page-hero__tiles{
  height:460px!important;
  min-height:0!important;
}
.about-page .premium-page-hero__image{
  height:400px!important;
}

/* Custom gallery hero now follows the same system rather than behaving like a separate site. */
.inner-page main > .hero{
  min-height:var(--v17-hero-min)!important;
  padding:64px 0!important;
  display:flex!important;
  align-items:center!important;
}
.inner-page main > .hero .hero-grid{
  width:min(var(--v17-max),calc(100% - 96px))!important;
  min-height:0!important;
  padding:0!important;
  margin:0 auto!important;
  gap:clamp(56px,6vw,92px)!important;
  align-items:center!important;
}
.inner-page main > .hero p,
.inner-page .inner-hero p,
.inner-page .premium-page-hero__copy>p{
  max-width:680px!important;
  margin-top:0!important;
}

/* Individual roofing-system pages use the same page-top scale and spacing. */
.system-detail-page main > .hero{
  min-height:var(--v17-hero-min)!important;
}
.system-detail-page .hero-grid{
  min-height:var(--v17-hero-min)!important;
  padding:72px 0!important;
  align-items:center!important;
}
.system-detail-page .hero-side{
  max-width:390px!important;
}

/* Section spacing — enough air to feel designed without floating content apart. */
.inner-page .section,
.system-detail-page .overview,
.system-detail-page .gallery-section,
.system-detail-page .notes{
  padding-top:112px!important;
  padding-bottom:112px!important;
}
.system-detail-page .related,
.system-detail-page .final{
  padding-top:96px!important;
  padding-bottom:96px!important;
}
.system-detail-page .gallery-head,
.system-detail-page .notes-head,
.system-detail-page .related-head{
  margin-bottom:48px!important;
}
.system-detail-page .overview-grid{
  row-gap:34px!important;
  column-gap:64px!important;
}
.system-detail-page .gallery-note{
  margin-top:34px!important;
}

/* Projects: stop sections from colliding and make the 2-photo Standing Seam row intentional. */
.projects-page .project-group,
.inner-page .project-group{
  padding-top:72px!important;
  padding-bottom:92px!important;
}
.inner-page .project-head{
  margin-bottom:36px!important;
  row-gap:18px!important;
}
.inner-page .metal-head{
  margin-bottom:58px!important;
}
.inner-page .project-media.is-two{
  grid-template-columns:1.55fr .85fr!important;
  gap:12px!important;
}
.inner-page .project-media.is-two figure{
  height:500px!important;
}

/* Consistent space after hero buttons and between text roles. */
.inner-page .hero-actions,
.inner-page .premium-page-hero__actions,
.system-detail-page .hero-actions{
  margin-top:32px!important;
}
.inner-page .hero-kicker,
.inner-page .premium-page-hero__eyebrow,
.system-detail-page .eyebrow{
  margin-bottom:18px!important;
}

/* Keep the accents restrained and consistent. */
.inner-page .hero-kicker:before,
.inner-page .premium-page-hero__eyebrow span,
.system-detail-page .eyebrow:before{
  background:var(--v17-accent)!important;
}

@media(max-width:1100px){
  .wrap,
  .inner-hero-content,
  .premium-page-hero__grid,
  .system-detail-page .hero-grid,
  .inner-page main > .hero .hero-grid{
    width:calc(100% - 56px)!important;
  }
  .inner-page .premium-page-hero{padding:72px 0!important}
  .inner-page .premium-page-hero__grid{grid-template-columns:1fr!important;gap:44px!important}
  .inner-page .premium-page-hero__image,.inner-page .premium-page-hero__tiles{height:430px!important;max-width:760px!important}
  .system-detail-page .hero-side{display:none!important}
}

@media(max-width:760px){
  :root{--v17-hero-min:500px}
  .wrap,
  .inner-hero-content,
  .premium-page-hero__grid,
  .system-detail-page .hero-grid,
  .inner-page main > .hero .hero-grid{
    width:calc(100% - 36px)!important;
  }
  .inner-page .inner-hero-content,
  .system-detail-page .hero-grid{
    padding:54px 0!important;
  }
  .inner-page .premium-page-hero,
  .inner-page main > .hero{
    padding:54px 0!important;
  }
  .inner-page .inner-hero h1,
  .inner-page .premium-page-hero h1,
  .inner-page main > .hero h1,
  .system-detail-page main > .hero h1,
  .content-page h1{
    font-size:clamp(42px,11.2vw,56px)!important;
    line-height:.96!important;
    margin-top:16px!important;
    margin-bottom:20px!important;
  }
  .inner-page .premium-page-hero__image,.inner-page .premium-page-hero__tiles{height:auto!important;min-height:330px!important}
  .about-page .premium-page-hero__image{height:auto!important;aspect-ratio:1/1!important}
  .inner-page .section,
  .system-detail-page .overview,
  .system-detail-page .gallery-section,
  .system-detail-page .notes{
    padding-top:76px!important;
    padding-bottom:76px!important;
  }
  .system-detail-page .related,.system-detail-page .final{padding-top:72px!important;padding-bottom:72px!important}
  .inner-page .project-group{padding-top:54px!important;padding-bottom:68px!important}
  .inner-page .project-media.is-two{display:block!important}
  .inner-page .project-media.is-two figure{height:330px!important;margin-bottom:10px!important}
}