/* Milan's Roofing — V10 responsive correction layer
   Loaded last on every real page. Desktop visual direction stays intact;
   this layer standardizes tablet/mobile behavior and removes overflow traps. */

*,*::before,*::after{box-sizing:border-box}
html,body{max-width:100%;overflow-x:clip}
img,video,svg{max-width:100%}
button,input,select,textarea{font:inherit}
.form-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}
.form-error{display:none;grid-column:1/-1;background:#fff1ee;border:1px solid #efc2b8;color:#7f2e20;padding:13px 14px;font-size:12px;line-height:1.5}
.form-error.show{display:block}

/* Keep the header breakpoint identical everywhere. */
@media(max-width:1240px){
  .header-shell .header,header.header>.wrap{width:min(var(--max,1640px),calc(100% - 42px))!important}
  .brand{display:flex!important;align-items:center!important;min-width:0!important;flex:0 1 auto!important}
  .brand img{width:190px!important;max-width:190px!important;height:auto!important;max-height:54px!important;object-fit:contain!important;object-position:left center!important}
  .header-phone::before,header.header .phone::before{
    content:"☎"!important;width:auto!important;height:auto!important;background:none!important;
    -webkit-mask:none!important;mask:none!important;color:var(--nav-orange,#f36d21)!important;
    font:700 20px/1 Arial,sans-serif!important;bottom:auto!important;
  }
  .header-phone::after,header.header .phone::after{display:none!important}
  .mobile-menu-btn,.mobile-menu,.menu,.header-phone,header.header .phone{flex:0 0 auto!important}
}

/* Landscape phones + tablets: prevent desktop grids from becoming squeezed. */
@media(max-width:980px){
  .wrap{width:calc(100% - 42px)!important}
  .section{padding-top:82px!important;padding-bottom:82px!important}

  .intro-grid,.owner-grid,.split,.systems-layout,.work-head,.services-head,
  .service-explorer-head,.system-showcase .section-head,.contact-grid,.contact-premium,
  .cta-grid,.final-grid,.end-grid,.finance-panel,.map-grid,.bridge-grid,
  .gallery-intro-grid,.gallery-head,.project-head,.install-grid,.install-head,
  .overview-grid,.notes-head,.selector .wrap{
    grid-template-columns:1fr!important;
  }

  .service-grid,.system-grid,.system-showcase-grid,.real-project-grid,.process,
  .notes-grid,.area-grid,.blog-row,.fact-line{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .hero-content{gap:30px!important}
  .inner-hero,.inner-hero-content{min-height:540px!important}
  .inner-hero-content{padding-top:118px!important;padding-bottom:54px!important}
  .inner-hero h1{font-size:clamp(50px,9vw,78px)!important;max-width:900px!important}

  .project-mosaic{grid-template-columns:1fr 1fr!important;grid-template-rows:auto!important}
  .project-mosaic .project{min-height:340px!important;height:340px!important;grid-row:auto!important;grid-column:auto!important}
  .project-media,.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  .final-grid>*,.end-grid>*{min-width:0!important}
  .final-grid .btn,.end-grid .btn{max-width:360px!important}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .footer-brand{grid-column:1/-1!important}
  .footer-col:last-child{grid-column:auto!important}

  .compare-head,.compare-row{grid-template-columns:minmax(110px,150px) minmax(0,1fr)!important}
  .row{grid-template-columns:minmax(0,1fr)!important}

  .hero-bottom .wrap{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .hero-bottom span{border-right:0!important;min-width:0!important;padding-left:10px!important;padding-right:10px!important}

  .service-stage,.system-preview{min-height:430px!important}
  .systems-copy{position:static!important;top:auto!important}
}

@media(max-width:680px){
  html{scroll-padding-top:76px}
  body{font-size:16px!important}
  .wrap{width:calc(100% - 36px)!important}
  .header-shell .header,header.header>.wrap{width:calc(100% - 26px)!important;gap:10px!important}
  .brand img{width:154px!important;max-width:154px!important;height:auto!important;max-height:46px!important}
  .header-phone,header.header .phone{width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important}
  .mobile-menu-btn,.mobile-menu,.menu{width:44px!important;min-width:44px!important;height:44px!important}

  .section{padding-top:66px!important;padding-bottom:66px!important}
  .eyebrow,.hero-kicker,.section-no{font-size:10px!important;letter-spacing:.13em!important}
  .display,.section-head h2{font-size:clamp(42px,13vw,62px)!important;line-height:.92!important;overflow-wrap:anywhere}

  .hero{height:auto!important;min-height:620px!important;max-height:none!important}
  .hero-content{min-height:620px!important;padding-top:72px!important;padding-bottom:138px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:stretch!important}
  .hero-content>div:first-child{max-width:100%!important}
  .hero h1{font-size:clamp(49px,15vw,70px)!important;line-height:.88!important;letter-spacing:-.055em!important;overflow-wrap:normal!important}
  .hero-copy{font-size:16px!important;line-height:1.55!important}
  .hero-actions{display:flex!important;flex-direction:column!important;gap:10px!important;width:100%!important}
  .hero-actions .btn{width:100%!important;justify-content:center!important}
  .hero-side,.hero-proof,.hero-caption{display:none!important}
  .hero-bottom{height:118px!important}
  .hero-bottom .wrap{grid-template-columns:1fr 1fr!important;gap:12px!important;align-content:center!important}
  .hero-bottom span{font-size:9px!important;line-height:1.35!important;min-height:auto!important;padding:0!important}

  .inner-hero,.inner-hero-content{min-height:500px!important}
  .inner-hero-content{padding-top:104px!important;padding-bottom:44px!important}
  .inner-hero h1{font-size:clamp(46px,13vw,62px)!important;line-height:.9!important;margin:18px 0 20px!important}
  .inner-hero p{font-size:15px!important;line-height:1.55!important}

  .intro-grid,.owner-grid,.split,.systems-layout,.work-head,.services-head,
  .service-explorer-head,.system-showcase .section-head,.contact-grid,.contact-premium,
  .cta-grid,.final-grid,.end-grid,.finance-panel,.map-grid,.bridge-grid,
  .gallery-intro-grid,.gallery-head,.project-head,.install-grid,.install-head,
  .overview-grid,.notes-head,.selector .wrap,.service-grid,.system-grid,
  .system-showcase-grid,.real-project-grid,.process,.notes-grid,.area-grid,
  .blog-row,.fact-line,.project-media,.gallery-grid,.project-mosaic{
    grid-template-columns:1fr!important;
  }

  .project-mosaic{display:grid!important;gap:12px!important}
  .project-mosaic .project,.project-mosaic .project.small,.project{height:300px!important;min-height:300px!important;margin:0!important}
  .project-label{left:16px!important;right:16px!important;bottom:16px!important;max-width:calc(100% - 32px)!important}
  .project-media>*{min-height:0!important;height:auto!important}
  .project-media img,.gallery-grid img{min-height:0!important;height:auto!important;aspect-ratio:4/3!important;object-fit:cover!important}
  .real-project-grid{grid-auto-rows:auto!important}
  .real-project-grid figure,.real-project-grid figure:first-child{grid-row:auto!important;min-height:0!important;aspect-ratio:4/3!important}

  .service-stage,.system-preview{min-height:340px!important}
  .service-tab,.system-link{min-height:72px!important}
  .service-media{min-height:300px!important}

  .premium-form{grid-template-columns:1fr!important;gap:17px!important}
  .form-control.full,.form-submit,.form-success,.form-error{grid-column:auto!important}
  .form-control input,.form-control select,.form-control textarea{font-size:16px!important;min-height:54px!important;padding:14px!important}
  .form-control textarea{min-height:132px!important}
  .estimate-card{padding:28px 18px 30px!important}
  .estimate-card-head{display:block!important;margin-bottom:24px!important}
  .estimate-card-head h3{font-size:34px!important}
  .estimate-card-head>span{display:block!important;margin-top:9px!important}
  .contact-premium-aside{padding:34px 22px!important}
  .contact-premium-aside h2{font-size:clamp(44px,14vw,58px)!important}
  .form-submit{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:16px!important}
  .form-submit .btn{width:100%!important;min-width:0!important}

  .estimate-focus-grid{grid-template-columns:1fr!important}
  .estimate-focus-grid>div,.estimate-focus-grid>a{min-height:112px!important;padding:22px 20px!important;border-right:0!important;border-bottom:1px solid #d6d1c7!important}
  .estimate-focus-grid>a{grid-column:auto!important;border-bottom:0!important}

  .compare-head,.compare-row,.row{grid-template-columns:1fr!important}
  .compare-head>*:first-child,.compare-row>*:first-child{margin-bottom:6px!important}

  .footer-grid{grid-template-columns:1fr!important;gap:30px!important}
  .footer-brand{grid-column:auto!important}
  .footer-bottom{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:10px!important}

  .jump-links,.selector-links,.system-jump,.gallery-jump{
    display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;overscroll-behavior-inline:contain!important;
    scrollbar-width:none;padding-bottom:4px!important;-webkit-overflow-scrolling:touch;
  }
  .jump-links::-webkit-scrollbar,.selector-links::-webkit-scrollbar,.system-jump::-webkit-scrollbar,.gallery-jump::-webkit-scrollbar{display:none}
  .jump-links a,.selector-links a,.system-jump a,.gallery-jump a{flex:0 0 auto!important;white-space:nowrap!important}

  .btn{min-height:52px!important}
  a,button{touch-action:manipulation}
}

@media(max-width:430px){
  .wrap{width:calc(100% - 30px)!important}
  .brand img{width:142px!important;max-width:142px!important}
  .header-phone,header.header .phone,.mobile-menu-btn,.mobile-menu,.menu{width:42px!important;min-width:42px!important;height:42px!important;min-height:42px!important}
  .hero h1{font-size:clamp(46px,14.5vw,60px)!important}
  .inner-hero h1{font-size:clamp(43px,13vw,56px)!important}
  .project-mosaic .project,.project-mosaic .project.small,.project{height:280px!important;min-height:280px!important}
}

@media(hover:none){
  .project:hover .project-img,.gallery-item:hover img,.real-project-grid figure:hover img{transform:none!important}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* Component-specific span resets that generic column collapse cannot infer. */
@media(max-width:980px){
  .install-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:auto!important}
  .install-card,.install-card:first-child,.install-card:nth-child(4){grid-column:auto!important;grid-row:auto!important;min-height:300px!important}

  .compare-row{grid-template-columns:52px minmax(0,1fr)!important;gap:9px 16px!important;min-height:0!important;padding:18px 10px!important;align-items:start!important}
  .compare-row .num{grid-column:1;grid-row:1/-1;padding-top:5px!important}
  .compare-row .name,.compare-row .cell,.compare-row .go{grid-column:2!important}
  .compare-row .go{margin-top:4px!important}
  .compare-row:hover{padding-left:10px!important}

  .row{min-height:0!important;padding:22px 0!important;gap:9px!important;align-items:start!important}
  .gallery-grid figure,.gallery-grid figure:nth-child(1),.gallery-grid figure:nth-child(4n+4){grid-column:auto!important;grid-row:auto!important}
}

@media(max-width:680px){
  .install-grid{grid-template-columns:1fr!important}
  .install-card,.install-card:first-child,.install-card:nth-child(4){min-height:280px!important}
  .logic{grid-template-columns:1fr!important}
  .logic-item,.logic-item:first-child,.logic-item:last-child{padding:18px 0!important;border-right:0!important;border-bottom:1px solid var(--line,#d7d3c9)!important}
  .logic-item:last-child{border-bottom:0!important}
  .compare-row{grid-template-columns:42px minmax(0,1fr)!important;padding:17px 0!important}
  .gallery-grid figure,.gallery-grid figure:nth-child(1),.gallery-grid figure:nth-child(4n+4){height:auto!important;aspect-ratio:4/3!important}
  .gallery-footer{justify-content:flex-start!important}
  .gallery-footer a{width:100%!important;justify-content:space-between!important}
}

/* Final mobile hardening */
@media(max-width:680px){
  main,section,header,footer{max-width:100vw;overflow-x:clip}
  h1,h2,h3,p,a,span{overflow-wrap:break-word}
  input,select,textarea,button{max-width:100%}
  .hero h1,.inner-hero h1{word-break:normal!important;hyphens:none!important}
}