/* Wider layout; original modules and responsive card structures are preserved. */
:root{--max:2160px}.wrap{width:calc(100% - clamp(32px,5vw,112px));max-width:2160px}.ref-slide .wrap{width:calc(100% - clamp(40px,7vw,144px));max-width:2100px}.header-inner{gap:30px}.header .brand{flex-shrink:0}.header .brand strong{font-size:30px;letter-spacing:2px}.header .brand small{font-size:10px;letter-spacing:1.7px}.nav{gap:clamp(18px,1.6vw,34px);margin-left:auto;margin-right:auto}.nav>a{white-space:nowrap}.header-actions{flex-shrink:0}.header .nav>a,.header .nav summary{font-size:14px}.header .nav-group{position:relative}.header .nav-group summary{list-style:none;display:flex;align-items:center;gap:9px;min-height:90px;padding:26px 0;cursor:pointer;transition:color .2s}.header .nav-group summary::-webkit-details-marker{display:none}.header .nav-group summary:after{display:none}.nav-group summary svg{transition:transform .2s}.nav-group[open] summary svg{transform:rotate(180deg)}.nav-group[open]>summary{color:var(--orange)}.header .nav-group:not([open])>.dropdown{display:none!important}.header .nav-group[open]>.dropdown{display:grid!important}.header .mega-panel{position:absolute;top:100%;left:-30px;width:540px;min-width:0;grid-template-columns:170px 1fr;border:1px solid #e5e8ec;border-top:3px solid var(--orange);padding:0;border-radius:0 0 14px 14px;box-shadow:0 22px 55px #16213926;overflow:hidden;animation:menuIn .18s ease-out}.nav-group:last-child .mega-panel,.nav-group:nth-last-child(2) .mega-panel{left:auto;right:-20px}.menu-intro{padding:28px 22px;background:#f5f7fa;border-right:1px solid #e7ebef}.menu-intro>small{font-size:10px;letter-spacing:1px;color:var(--orange);font-weight:800}.menu-intro>strong{display:block;font-size:21px;margin:10px 0}.menu-intro>p{font-size:13px;line-height:1.65;font-weight:400}.menu-links{padding:12px}.header .menu-links>a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:8px;transition:background .2s,transform .2s;border:1px solid transparent}.header .menu-links>a:hover,.header .menu-links>a:focus-visible{background:#fff4e8;border-color:#ffe0bf;color:var(--ink);transform:translateX(2px)}.menu-icon{flex:0 0 37px;height:37px;display:grid;place-items:center;border-radius:9px;background:#f0f3f7;color:var(--orange);font-size:21px;font-weight:500}.menu-links strong{font-size:14px;display:block;line-height:1.5}.menu-links small{font-size:12px;color:#7a818c;display:block;font-weight:400;margin-top:2px}.nav .active{color:var(--orange)}.roof-service img{height:clamp(240px,18vw,350px)}.ref-project>a>img{height:clamp(320px,23vw,460px)}.roof-project img{height:clamp(250px,19vw,370px)}.metal-service img{height:clamp(210px,18vw,325px)}.ref-about .about-grid{grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,90px)}.ref-about-image>img{height:clamp(420px,30vw,590px)}.ref-about p{max-width:760px}.about-copy p{max-width:800px}.ref-contact-box{padding:clamp(28px,3vw,55px);gap:clamp(32px,4vw,75px)}.ref-contact-box>div:first-child>img{max-height:730px;min-height:620px}.real-reference-rail img{height:170px;object-fit:cover;filter:none;border-radius:7px}.real-reference-rail>a{padding:7px;background:#fff}.reference-photos .photo-only img{height:350px}.gallery-button{width:100%}.gallery-button img{height:300px}.company-video{max-width:1150px;display:block;margin:auto}.company-video img{height:auto;max-height:650px;width:100%;object-fit:contain;background:#14202c}.contact-demo{font-size:13px!important;margin-top:15px!important}.contact-demo small{color:#f5a443}.contact-grid{grid-template-columns:.7fr 1.3fr;gap:clamp(40px,6vw,110px)}.detail-main p{max-width:1000px}.detail-layout{grid-template-columns:minmax(0,1fr) 330px;gap:45px}.detail-main>img{height:clamp(340px,31vw,600px)}.page-hero .wrap{max-width:1450px}.ref-slide h1,.ref-slide h2{max-width:950px}.ref-slide .wrap>p{max-width:950px}.ref-slide img{object-position:center 45%}.ref-slide.centered img{object-position:center 50%}.reference-hero,.ref-slide{min-height:660px}.ref-faq img{height:510px;object-position:center}.footer-grid{gap:clamp(30px,4vw,75px)}.ref-team img{height:clamp(255px,20vw,360px);object-position:center 25%}.ref-blog img{height:clamp(230px,18vw,330px)}.blog-date{top:clamp(200px,calc(18vw - 30px),300px)}.ref-slide h1,.ref-slide h2{animation:none}.topbar .wrap>span:last-child{display:flex;gap:18px}.topbar a{white-space:nowrap}@keyframes menuIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1800px){.header-inner{min-height:96px}.header .nav-group summary{min-height:96px}.header .nav>a,.header .nav summary{font-size:15px}.ref-title h2{font-size:38px}.section{padding:70px 0}.ref-contact-box .ref-title h2{font-size:34px}.ref-slide h1,.ref-slide h2{font-size:54px;line-height:1.3}}
@media(max-width:1200px){.nav{gap:15px}.header-inner{gap:18px}.header .nav>a,.header .nav summary{font-size:13px}.header .brand strong{font-size:27px}.header-actions>.btn{display:none}.header .mega-panel{width:490px;grid-template-columns:145px 1fr}.menu-intro{padding:25px 17px}.header .nav-group summary{min-height:90px}.detail-layout{grid-template-columns:minmax(0,1fr) 280px;gap:28px}}
@media(max-width:980px){.header-inner{min-height:80px}.header .mobile-toggle{display:grid}.header .ref-drawer-button{display:none}.header .nav{display:none;position:absolute;top:80px;left:0;right:0;margin:0;max-height:calc(100dvh - 90px);overflow:auto;padding:18px 24px;background:white;box-shadow:0 20px 35px #1112}.header .nav.open{display:block}.header .nav>a{display:block;padding:13px 8px;border-bottom:1px solid #edf0f3;font-size:15px}.header .nav-group summary{min-height:0;padding:14px 8px;font-size:15px;justify-content:space-between;border-bottom:1px solid #edf0f3}.header .nav-group>.mega-panel{position:static;width:100%;grid-template-columns:1fr;border:0;border-radius:8px;box-shadow:none;margin:4px 0 12px;background:#f6f8fb}.menu-intro{display:none}.menu-links{padding:6px}.header .menu-links>a{padding:12px 9px}.menu-links strong{font-size:14px}.menu-links small{font-size:12px}.menu-icon{background:white}.ref-about .about-grid{gap:35px}.ref-contact-box{grid-template-columns:1fr 1.25fr;gap:25px;padding:25px}.ref-contact-box>div:first-child>img{min-height:620px}.detail-layout{grid-template-columns:1fr}.reference-photos .photo-only img{height:300px}.contact-grid{grid-template-columns:1fr;gap:35px}.topbar .wrap>span:last-child{display:none}.footer-grid{gap:30px}}
@media(max-width:600px){.wrap{width:calc(100% - 32px)}.ref-slide .wrap{width:calc(100% - 40px)}.header .brand strong{font-size:26px}.header .brand small{font-size:9px}.header .brand{gap:7px}.header-actions{gap:8px}.header-inner{gap:10px}.header .icon-button{width:39px;height:39px}.ref-about .about-grid{grid-template-columns:1fr}.ref-about-image>img{height:380px}.ref-contact-box{display:block;padding:20px}.ref-contact-box>div:first-child>img{min-height:0;height:290px}.reference-hero,.ref-slide{min-height:580px}.ref-slide h1,.ref-slide h2{font-size:31px}.ref-slide .wrap>p{font-size:12px}.roof-service img{height:235px}.metal-service img{height:155px}.ref-project>a>img{height:310px}.roof-project img{height:270px}.ref-faq img{height:300px}.ref-team img{height:330px}.real-reference-rail img{height:135px}.reference-photos .photo-only img{height:330px}.gallery-button img{height:300px}.detail-main>img{height:300px}.page-hero h1{font-size:30px}.section{padding:45px 0}.ref-title h2{font-size:28px}.blog-date{top:200px}.ref-blog img{height:230px}.counter-box h3{font-size:14px}.counter-box strong{font-size:29px}}