/* Milan's Roofing V13 — cohesive typography + rhythm
   One family, one hierarchy, one spacing system. Loaded LAST. */
:root{
  --v13-ink:#111315;
  --v13-muted:#686b66;
  --v13-paper:#f5f3ee;
  --v13-line:#d8d4cb;
  --v13-accent:#f36d21;
  --v13-section:104px;
  --v13-section-mobile:68px;
  --v13-wrap:1460px;
}

html,body,button,input,select,textarea{
  font-family:Manrope,Arial,sans-serif!important;
}
body{
  font-size:16px!important;
  line-height:1.65!important;
  color:var(--v13-ink);
  text-rendering:optimizeLegibility;
}
.wrap{width:min(var(--v13-wrap),calc(100% - 64px))!important}

/* ROLE-BASED TYPE SYSTEM
   Labels/actions = uppercase.
   Page titles = uppercase.
   Section and card headings = natural case. */
.eyebrow,.hero-kicker,.premium-page-hero__eyebrow,.section-no,.kicker,
nav>a,.navdrop>a,.btn,.nav-cta,.header-phone small,.footer-col small,
.project-label small,.gallery-item span,.area-action,.form-control label,
.estimate-card-head small,.estimate-card-head>span{
  font-family:Manrope,Arial,sans-serif!important;
  text-transform:uppercase!important;
  font-weight:800!important;
  letter-spacing:.12em!important;
}
.eyebrow,.hero-kicker,.premium-page-hero__eyebrow,.section-no,.kicker{
  font-size:10px!important;
  line-height:1.3!important;
}

h1,.hero h1,.inner-hero h1,.premium-page-hero h1,.content-page h1,.system-detail-page .hero h1{
  font-family:Manrope,Arial,sans-serif!important;
  font-weight:800!important;
  font-style:normal!important;
  text-transform:uppercase!important;
  font-size:clamp(58px,5.9vw,92px)!important;
  line-height:.9!important;
  letter-spacing:-.045em!important;
  text-wrap:balance;
}

h2,.display,.section-head h2,.center-head h2,.split-copy .display,
.contact-premium-aside h2,.content h2,.system-detail-page h2,
.premium-page-hero~section h2{
  font-family:Manrope,Arial,sans-serif!important;
  font-weight:800!important;
  font-style:normal!important;
  text-transform:none!important;
  font-size:clamp(40px,4.2vw,64px)!important;
  line-height:.98!important;
  letter-spacing:-.038em!important;
  text-wrap:balance;
}

h3,.row h3,.card h3,.system-link h3,.system-index-copy h3,.service-tab h3,
.note-card h3,.blog-row h3,.related-link strong,.content h3{
  font-family:Manrope,Arial,sans-serif!important;
  font-weight:750!important;
  font-style:normal!important;
  text-transform:none!important;
  font-size:clamp(21px,2vw,28px)!important;
  line-height:1.12!important;
  letter-spacing:-.025em!important;
}

/* Never let old page-specific uppercase rules leak into section/card headings. */
.display,.section-head h2,.center-head h2,.row h3,.card h3,.system-link h3,
.system-index-copy h3,.service-tab h3,.note-card h3,.blog-row h3,
.related-link strong,.step h3,.owner-points strong{
  text-transform:none!important;
}

/* CONSISTENT RHYTHM */
.section{padding:var(--v13-section) 0!important}
.work,.real-projects,.systems,.notes,.related,.overview,.gallery-section{
  padding-top:var(--v13-section)!important;
  padding-bottom:var(--v13-section)!important;
}
.final{padding:92px 0!important}

.eyebrow,.hero-kicker,.premium-page-hero__eyebrow{margin-bottom:18px!important}
.display{margin-top:16px!important;margin-bottom:0!important}
.section-head,.work-head,.service-explorer-head,.gallery-head,.notes-head,.related-head{
  margin-bottom:44px!important;
}
.copy,.intro-copy p,.owner-copy>p,.split-copy p,.work-head p,.area-copy>p{
  font-size:16px!important;
  line-height:1.72!important;
}
p{max-width:72ch}

/* HEADER: compact and consistent across every desktop page. */
.header-shell,.header-shell.scrolled,header.header{
  min-height:92px!important;
  height:92px!important;
}
.header,.header-shell.scrolled .header,header.header>.wrap{
  min-height:92px!important;
  height:92px!important;
}
.header .brand img,.header-shell .brand img,header.header .brand img{
  width:205px!important;
  height:58px!important;
  object-fit:contain!important;
}
.header nav{gap:clamp(16px,1.25vw,25px)!important}
.header nav>a,.header .navdrop>a,header.header nav>a{
  font-size:11px!important;
  letter-spacing:.065em!important;
  font-weight:800!important;
}
.header .nav-cta,header.header .nav-cta{
  min-height:52px!important;
  padding:0 20px!important;
  font-size:11px!important;
}
.header-phone small{font-size:9px!important}
.header-phone a{font-size:16px!important;font-weight:800!important}
.header .drop{top:92px!important}

/* INNER PAGE HERO: same vertical rhythm and scale everywhere. */
.inner-page .inner-hero{
  min-height:560px!important;
  height:auto!important;
}
.inner-page .inner-hero-content{
  min-height:560px!important;
  padding:116px 0 68px!important;
  align-items:flex-end!important;
}
.inner-page .inner-hero h1{
  max-width:1040px!important;
  margin:16px 0 22px!important;
}
.inner-page .inner-hero p{
  max-width:700px!important;
  margin:0!important;
  font-size:17px!important;
  line-height:1.62!important;
}
.inner-page .inner-hero .hero-actions{margin-top:28px!important}

/* HOME HERO stays more dramatic, but uses the exact same type language. */
.home-page .hero{
  height:calc(100svh - 92px)!important;
  min-height:680px!important;
  max-height:840px!important;
}
.home-page .hero-content{min-height:680px!important;padding-top:0!important}
.home-page .hero h1{
  font-size:clamp(68px,6.5vw,108px)!important;
  line-height:.86!important;
  margin:20px 0 26px!important;
}
.home-page .hero-copy{font-size:18px!important;line-height:1.62!important}

/* PageHero component — About and future premium split heroes. */
.premium-page-hero{
  padding:132px 0 86px!important;
}
.premium-page-hero__grid{
  width:min(var(--v13-wrap),calc(100% - 64px))!important;
  gap:64px!important;
}
.premium-page-hero h1{
  margin:0!important;
  max-width:780px!important;
}
.premium-page-hero__copy>p{
  margin:24px 0 0!important;
  font-size:17px!important;
  line-height:1.65!important;
}
.premium-page-hero__actions{margin-top:30px!important}

/* Authentic About photo: real source, restrained size so it remains crisp. */
.about-page .premium-page-hero__grid{
  grid-template-columns:minmax(0,1.08fr) 420px!important;
}
.about-page .premium-page-hero__visual{
  width:420px!important;
  max-width:420px!important;
  justify-self:end!important;
}
.about-page .premium-page-hero__image{
  width:420px!important;
  height:420px!important;
  aspect-ratio:1/1!important;
  margin:0!important;
  background:#ddd!important;
}
.about-page .premium-page-hero__image img{
  object-fit:cover!important;
  object-position:center!important;
}

/* Service/system/card rows share one density. */
.row,.system-row,.service-tab,.system-link,.related-link{
  min-height:94px!important;
}
.row h3,.system-row h3,.service-tab h3,.system-link h3{margin:0!important}
.step{padding:28px!important}
.step h3{margin:0 0 10px!important}

/* Form/card spacing aligns to the same rhythm. */
.contact-premium-aside{padding:46px 42px!important}
.estimate-card{padding:44px 46px 46px!important}
.estimate-card-head{margin-bottom:26px!important;padding-bottom:20px!important}
.estimate-card-head h3{font-size:34px!important;line-height:1.05!important;text-transform:none!important}

/* ContentPage / legal / article pages. */
.content-page .hero-inner{padding:76px 0 68px!important}
.content-page h1{margin:18px 0 24px!important;max-width:960px!important}
.content-page .lead{font-size:17px!important;line-height:1.68!important;max-width:760px!important}
.content-page .content{padding:86px 0 104px!important}
.content-page .content h2{margin:54px 0 18px!important}
.content-page .content h3{margin:30px 0 10px!important}

/* System detail pages. */
.system-detail-page .hero{
  min-height:620px!important;
  height:auto!important;
  max-height:none!important;
}
.system-detail-page .hero-grid{min-height:620px!important;padding:104px 0 68px!important}
.system-detail-page .hero h1{margin:18px 0 22px!important}
.system-detail-page .overview,.system-detail-page .gallery-section,
.system-detail-page .notes,.system-detail-page .related{padding:96px 0!important}
.system-detail-page .display{font-size:clamp(40px,4.2vw,64px)!important}
.system-detail-page .note-card h3{text-transform:none!important}
.system-detail-page .related-link strong{text-transform:none!important}
.system-detail-page .final h2{text-transform:none!important;font-size:clamp(44px,4.8vw,70px)!important}

/* Favicon/image cache bust has no visual effect; this layer is intentionally layout/type only. */

@media(max-width:1080px){
  .wrap,.premium-page-hero__grid{width:min(100% - 44px,900px)!important}
  .header-shell,.header-shell.scrolled,header.header,.header,.header-shell.scrolled .header,header.header>.wrap{
    min-height:82px!important;height:82px!important;
  }
  .header .brand img,.header-shell .brand img,header.header .brand img{width:190px!important;height:52px!important}
  .inner-page .inner-hero,.inner-page .inner-hero-content{min-height:520px!important}
  .inner-page .inner-hero-content{padding:108px 0 58px!important}
  .about-page .premium-page-hero__grid{grid-template-columns:1fr!important}
  .about-page .premium-page-hero__visual{justify-self:start!important;width:420px!important;max-width:100%!important}
}

@media(max-width:680px){
  :root{--v13-section:var(--v13-section-mobile)}
  .wrap,.premium-page-hero__grid{width:calc(100% - 32px)!important}
  h1,.hero h1,.inner-hero h1,.premium-page-hero h1,.content-page h1,.system-detail-page .hero h1{
    font-size:clamp(44px,12.5vw,58px)!important;
    line-height:.92!important;
    letter-spacing:-.04em!important;
  }
  h2,.display,.section-head h2,.center-head h2,.split-copy .display,.contact-premium-aside h2,.system-detail-page h2{
    font-size:clamp(34px,9.8vw,46px)!important;
    line-height:1!important;
  }
  h3,.row h3,.card h3,.system-link h3,.system-index-copy h3,.service-tab h3,.note-card h3,.blog-row h3{
    font-size:21px!important;
  }
  .section,.work,.real-projects,.systems,.notes,.related,.overview,.gallery-section{padding:68px 0!important}
  .final{padding:70px 0!important}
  .section-head,.work-head,.service-explorer-head,.gallery-head,.notes-head,.related-head{margin-bottom:30px!important}
  .inner-page .inner-hero,.inner-page .inner-hero-content{min-height:470px!important}
  .inner-page .inner-hero-content{padding:92px 0 44px!important}
  .inner-page .inner-hero p{font-size:15px!important}
  .home-page .hero{height:auto!important;min-height:620px!important;max-height:none!important}
  .home-page .hero-content{min-height:620px!important;padding:72px 0 130px!important}
  .home-page .hero h1{font-size:clamp(48px,13vw,62px)!important}
  .premium-page-hero{padding:104px 0 58px!important}
  .premium-page-hero__copy>p{font-size:15px!important;margin-top:20px!important}
  .about-page .premium-page-hero__visual,.about-page .premium-page-hero__image{
    width:100%!important;max-width:420px!important;height:auto!important;aspect-ratio:1/1!important;
  }
  .row,.system-row,.service-tab,.system-link,.related-link{min-height:78px!important}
  .contact-premium-aside{padding:34px 24px!important}
  .estimate-card{padding:30px 20px!important}
  .content-page .content{padding:64px 0 76px!important}
  .system-detail-page .hero,.system-detail-page .hero-grid{min-height:540px!important}
  .system-detail-page .hero-grid{padding:92px 0 52px!important}
}