/* Reference homepage visual system, isolated from service pages */
body.ref-layout{font-family:Arial,Helvetica,sans-serif;color:#061635;padding-bottom:106px}
.ref-layout main{display:flex;flex-direction:column}
.ref-layout main>.ref-hero{order:1}
.ref-layout main>.ref-trust{order:2}
.ref-layout main>.ref-services{order:3}
.ref-layout main>.portfolio-slider{order:4}
.ref-layout main>.wrap,.ref-layout main>.band,.ref-layout main>.faq{order:5}
.ref-layout main>.trust-showcase{order:6}
.ref-layout .top,.ref-layout .nav{display:none}
.ref-header{background:#001c35;color:white}
.ref-top{height:78px;max-width:1380px;padding:0 16px;margin:auto;display:flex;align-items:center;gap:38px}
.ref-logo{width:250px;height:67px;background:white;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.ref-logo img{display:block;width:96%;height:100%;object-fit:contain}
.ref-service{border-left:1px solid #9ba9b5;padding-left:42px;font-size:17px;line-height:1.32;flex:1}
.ref-service strong{font-size:16px}
.ref-emergency{display:flex;align-items:center;gap:14px;font-size:18px;line-height:1.2}
.ref-emergency>span{font-size:43px}
.ref-phone{background:#ffc400;color:#001c35;border-radius:13px;padding:12px 22px;font-size:25px;font-weight:900;white-space:nowrap}
.ref-whatsapp{border:3px solid white;border-radius:50%;background:#0ba74b;color:white;font-size:34px;width:54px;height:54px;display:grid;place-items:center}
.ref-nav{height:52px;background:#00172c;border-top:1px solid #173b55;display:flex;align-items:center;justify-content:space-between;padding:0 max(5%,calc((100vw - 1360px)/2));gap:15px;font-weight:800}
.ref-nav a{white-space:nowrap;font-size:16px}
.ref-nav a.active{color:#ffc400;position:relative}
.ref-nav a.active:after{content:'';position:absolute;bottom:-15px;height:5px;border-radius:5px;background:#ffc400;left:0;right:0}
.ref-nav .ref-nav-quote{border:2px solid #ffc400;border-radius:12px;padding:8px 22px;color:#ffc400}
.ref-hero{position:relative;min-height:417px;background:linear-gradient(90deg,#001d37 0%,#001d37 23%,#001d37eb 35%,#001d37a6 47%,transparent 63%),url('/m25-patio-doors.webp') center 54%/cover no-repeat;color:white;padding:12px max(7.5%,calc((100vw - 1300px)/2)) 43px}
.ref-hero-inner{max-width:615px;position:relative;z-index:1}
.ref-kicker{color:#ffc400;letter-spacing:1.5px;font-weight:900;font-size:21px}
.ref-hero h1{font-size:clamp(44px,4vw,58px);line-height:.98;margin:6px 0 8px;letter-spacing:-1px;font-weight:900}
.ref-hero h1 span{color:#ffc400}
.ref-hero p{font-size:19px;line-height:1.22;margin:0 0 10px;font-weight:600}
.ref-benefits{display:flex;gap:32px;margin:10px 0 15px}
.ref-benefits>div{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:700;line-height:1.15}
.ref-benefits b{font-size:41px;color:#ffc400}
.ref-actions{display:flex;gap:24px}
.ref-actions a{font-size:20px;font-weight:900;padding:12px 22px;border-radius:11px;white-space:nowrap}
.ref-call{background:#ffc400;color:#00172c}
.ref-book{border:2px solid #fff;color:#fff;background:#00172caa}
.ref-roundel{position:absolute;right:4.5%;bottom:38px;width:150px;height:150px;border:5px solid #ffc400;border-radius:50%;background:#001c35;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;font-size:19px;font-weight:900;line-height:1.15}
.ref-trust{position:relative;z-index:2;margin:-30px auto 0;width:min(89%,1365px);min-height:72px;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;background:white;border-radius:16px;box-shadow:0 12px 25px #061d3440;padding:13px 12px}
.ref-trust>div{display:flex;align-items:center;justify-content:center;gap:13px;padding:0 10px;border-right:1px solid #b5bdc9}
.ref-trust>div:last-child{border:0}
.ref-trust b{font-size:36px;color:#071f43}
.ref-trust .ref-google{font-weight:900;color:#4285f4}
.ref-trust span{display:flex;flex-direction:column;line-height:1.2}
.ref-trust strong{font-size:17px}
.ref-trust small{font-size:14px;margin-top:3px}
.ref-services{padding:12px 5% 26px;text-align:center;background:#fff}
.ref-section-label{color:#b87916;font-weight:900;font-size:18px}
.ref-services h2{font-size:39px;letter-spacing:-1px;margin:0;line-height:1.1;color:#06133b}
.ref-services>p{font-size:16px;line-height:1.3;margin:3px auto 13px}
.ref-service-grid{max-width:1365px;margin:auto;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:13px}
.ref-service-grid a{background:#001c35;color:white;border-radius:12px;overflow:hidden;text-align:left;position:relative}
.ref-service-grid img{width:100%;height:126px;object-fit:cover;display:block}
.ref-service-grid strong{display:block;min-height:55px;padding:7px 35px 9px 13px;font-size:16px;line-height:1.14}
.ref-service-grid b{position:absolute;right:11px;bottom:11px;font-size:25px;color:#ffc400}
.ref-bottom{position:fixed;bottom:0;left:0;right:0;z-index:100;background:#001c35;color:white;border-radius:18px 18px 0 0;display:grid;grid-template-columns:repeat(3,1fr) 1.05fr;align-items:center;min-height:100px;padding:12px max(4%,calc((100vw - 1380px)/2));box-shadow:0 -5px 20px #0002}
.ref-bottom>a{display:flex;align-items:center;justify-content:center;gap:19px;border-right:1px solid #aeb9c6;padding:5px 10px;min-width:0}
.ref-bottom>a:nth-child(3){border-right:0}
.ref-bottom span{font-size:17px;font-weight:700;display:flex;flex-direction:column}
.ref-bottom span strong{font-size:22px}
.ref-icon{font-size:47px;color:#ffc400}
.ref-icon.ref-green{color:#1fd05e}
.ref-bottom .ref-bottom-quote{background:#ffc400;color:#001c35;border-radius:12px;gap:15px;font-size:20px;font-weight:900;padding:14px}
.ref-bottom-quote b{font-size:30px}
.ref-layout .floating-call,.ref-layout .floating-whatsapp{display:none!important}
.ref-layout .cookie-notice{bottom:110px}
@media(max-width:1200px){.ref-top{gap:15px}.ref-logo{width:190px}.ref-service{padding-left:15px;font-size:13px}.ref-service strong{font-size:13px}.ref-emergency{font-size:14px}.ref-phone{font-size:17px;padding:10px}.ref-nav a{font-size:13px}.ref-trust strong{font-size:14px}.ref-trust small{font-size:12px}.ref-service-grid strong{font-size:13px}.ref-bottom span strong{font-size:16px}}
@media(max-width:800px){body.ref-layout{padding-bottom:77px}.ref-top{height:auto;min-height:73px;flex-wrap:wrap;padding:10px 4%;gap:8px}.ref-logo{width:145px;height:47px;margin-right:auto}.ref-service{display:none}.ref-emergency{font-size:12px}.ref-emergency>span{font-size:23px}.ref-phone{font-size:12px;padding:10px}.ref-whatsapp{width:32px;height:32px;font-size:19px}.ref-nav{height:auto;overflow-x:auto;padding:10px 4%;justify-content:flex-start;gap:18px}.ref-nav a{font-size:12px}.ref-nav a.active:after{bottom:-10px}.ref-nav .ref-nav-quote{padding:5px 9px}.ref-hero{min-height:550px;padding:38px 6% 40px;background:linear-gradient(90deg,#001d37f5,#001d37bc 60%,#001d3755),url('/m25-patio-doors.webp') center/cover}.ref-kicker{font-size:13px}.ref-hero h1{font-size:clamp(39px,9vw,57px)}.ref-hero p{font-size:16px;line-height:1.4}.ref-benefits{gap:12px;flex-wrap:wrap;margin:25px 0}.ref-benefits>div{font-size:12px;gap:5px}.ref-benefits b{font-size:26px}.ref-actions{gap:8px;flex-wrap:wrap}.ref-actions a{font-size:14px;padding:12px}.ref-roundel{display:none}.ref-trust{margin:-12px auto 0;width:94%;grid-template-columns:repeat(2,1fr);gap:8px;padding:12px}.ref-trust>div{border:0;justify-content:flex-start}.ref-trust b{font-size:26px}.ref-trust strong{font-size:12px}.ref-trust small{font-size:10px}.ref-services{padding:22px 4%}.ref-section-label{font-size:13px}.ref-services h2{font-size:28px}.ref-services>p{font-size:13px}.ref-desktop{display:none}.ref-service-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.ref-service-grid img{height:130px}.ref-service-grid strong{font-size:13px}.ref-bottom{min-height:72px;border-radius:10px 10px 0 0;padding:5px;grid-template-columns:repeat(4,1fr)}.ref-bottom>a{flex-direction:column;gap:2px;padding:5px 2px}.ref-icon{font-size:24px}.ref-bottom span{font-size:10px}.ref-bottom span strong{display:none}.ref-bottom .ref-bottom-quote{font-size:10px;gap:2px;padding:6px 3px;flex-direction:column}.ref-bottom-quote b{font-size:20px}.ref-layout .cookie-notice{bottom:80px}}
@media(max-width:420px){.ref-top .ref-emergency{display:none}.ref-hero{min-height:550px}.ref-hero h1{font-size:39px}.ref-benefits>div{font-size:11px}.ref-actions a{font-size:12px}}

/* Clear WhatsApp affordance */
.ref-whatsapp{width:auto;min-width:55px;padding:0 12px;gap:7px;display:flex;align-items:center;justify-content:center;border-radius:28px;font-weight:900;font-size:14px;white-space:nowrap}
.ref-whatsapp .wa-symbol{font-size:26px;line-height:1}
.ref-whatsapp .wa-word{font-size:14px;color:#fff}
.ref-bottom .ref-green{background:#12a852;color:#fff;border:2px solid #fff;border-radius:50%;font-size:27px;width:44px;height:44px;display:grid;place-items:center}
@media(max-width:800px){.ref-whatsapp{min-width:42px;padding:4px 7px;gap:4px}.ref-whatsapp .wa-symbol{font-size:19px}.ref-whatsapp .wa-word{font-size:10px}.ref-bottom .ref-green{width:28px;height:28px;font-size:18px}}

/* Mobile viewport containment: prevent sideways page shift */
html{max-width:100%;overflow-x:clip}
body.ref-layout{width:100%;max-width:100%;overflow-x:clip}
.ref-layout *{box-sizing:border-box}
.ref-header,.ref-top,.ref-nav,.ref-hero,.ref-trust,.ref-services,.ref-bottom{max-width:100%}
.ref-nav{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.ref-nav::-webkit-scrollbar{display:none}
@media(max-width:800px){
.ref-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding:9px 12px}
.ref-top .ref-logo{width:140px;max-width:100%;height:52px;margin:0}
.ref-top .ref-phone{font-size:12px;padding:10px 9px;white-space:nowrap}
.ref-top .ref-emergency,.ref-top .ref-service,.ref-top .ref-whatsapp{display:none}
.ref-nav{width:100%;min-width:0}
.ref-hero{width:100%;overflow:hidden}
.ref-hero-inner{width:100%;min-width:0}
.ref-hero h1{overflow-wrap:normal;max-width:100%}
.ref-actions{max-width:100%}
.ref-trust{max-width:94%}
.ref-bottom{width:100%;left:0;right:0}
}
@media(max-width:360px){.ref-top .ref-logo{width:120px}.ref-top .ref-phone{font-size:11px}}

/* Mobile-first compact navigation and hero refinement */
@media(max-width:800px){
.ref-header{position:relative}
.ref-top{min-height:70px}
.ref-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:0 8px;overflow:visible;height:auto;min-height:48px}
.ref-nav a{display:none!important}
.ref-nav a:nth-child(1),.ref-nav a:nth-child(2),.ref-nav a:nth-child(3),.ref-nav a:last-child{display:flex!important;justify-content:center;align-items:center;min-width:0;font-size:11px;line-height:1.15;text-align:center;white-space:normal;padding:10px 3px}
.ref-nav a.active:after{bottom:0;left:10%;right:10%;height:3px}
.ref-nav .ref-nav-quote{border:0;border-radius:0;color:#ffc400}
.ref-hero{min-height:0;padding:28px 5% 36px;background:linear-gradient(90deg,#001d37f5,#001d37cf 70%,#001d3770),url('/m25-patio-doors.webp') center/cover}
.ref-kicker{font-size:11px;letter-spacing:1.2px}
.ref-hero h1{font-size:clamp(33px,8.5vw,42px);line-height:1.04;margin:10px 0 14px;letter-spacing:-.6px}
.ref-hero p{font-size:14px;line-height:1.4;margin-bottom:10px}
.ref-benefits{margin:18px 0;gap:12px;justify-content:space-between}
.ref-benefits>div{font-size:10px}
.ref-benefits b{font-size:23px}
.ref-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.ref-actions a{display:flex;justify-content:center;align-items:center;text-align:center;font-size:12px;padding:13px 6px;white-space:normal}
.ref-trust{margin:0 auto;box-shadow:0 4px 14px #061d3420}
.ref-services{padding-top:26px}
}
@media(max-width:380px){.ref-nav a:nth-child(3){font-size:10px}.ref-hero h1{font-size:32px}.ref-benefits{gap:6px}}

.ref-inner main{display:block}.ref-inner .floating-call,.ref-inner .floating-whatsapp{display:none!important}.ref-inner main>.pagehead{margin-top:0}
@media(max-width:800px){.ref-inner .ref-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible}.ref-inner .ref-nav a{display:none!important}.ref-inner .ref-nav a:nth-child(1),.ref-inner .ref-nav a:nth-child(2),.ref-inner .ref-nav a:nth-child(3),.ref-inner .ref-nav a:last-child{display:flex!important;justify-content:center;align-items:center;font-size:11px;text-align:center;white-space:normal;padding:10px 2px}}

/* Approved blue 3D logo on dark header */
.ref-logo{background:transparent;border-radius:0;overflow:visible;height:78px;width:178px;flex-shrink:0}
.ref-logo img{width:100%;height:100%;object-fit:contain}
@media(max-width:800px){
.ref-top .ref-logo{background:transparent;width:115px;height:68px}
.ref-top{grid-template-columns:minmax(0,1fr) auto;gap:10px;min-height:76px}
.ref-top .ref-phone{font-size:12px}
.ref-nav{grid-template-columns:repeat(4,minmax(0,1fr))}
.ref-nav a:nth-child(3){font-size:10px}
}

/* Mobile navigation: desktop reference unchanged */
.m25-menu-toggle{display:none}
@media(max-width:800px){
.ref-header{position:relative;z-index:80}
.ref-top{display:flex!important;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:8px;padding:9px 12px}
.ref-top .ref-logo{width:105px;min-width:95px;height:69px;flex:0 1 105px}
.ref-top .ref-phone{margin-left:auto;flex:0 0 auto;font-size:11px;padding:11px 9px;border-radius:9px}
.m25-menu-toggle{display:flex;flex:0 0 auto;align-items:center;justify-content:center;flex-direction:column;gap:0;background:#0c3354;color:#fff;border:1px solid #9ab2c7;border-radius:9px;padding:3px 9px;min-width:49px;height:46px;font-size:10px;font-weight:800;cursor:pointer}
.m25-menu-bars{font-size:25px;line-height:26px}
.ref-header .ref-nav{display:none!important;position:absolute;top:100%;left:0;right:0;width:100%;background:#00172c;box-shadow:0 12px 18px #0005;padding:9px 15px 17px;z-index:90;grid-template-columns:1fr;max-height:70vh;overflow-y:auto}
.ref-header.m25-menu-open .ref-nav{display:grid!important}
.ref-header .ref-nav a,.ref-inner .ref-header .ref-nav a{display:block!important;text-align:left;white-space:normal;font-size:14px;padding:12px 15px;border-bottom:1px solid #25445e;min-width:0}
.ref-header .ref-nav a.active:after{display:none}
.ref-header .ref-nav .ref-nav-quote{border:1px solid #ffc400;border-radius:8px;text-align:center;color:#ffc400;margin-top:7px}
.ref-hero{padding-top:26px}
.ref-trust{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ref-trust>div{min-width:0;padding:0 4px}
.ref-trust span{min-width:0}
.ref-trust strong{font-size:12px}
.ref-trust small{font-size:10px;overflow-wrap:anywhere}
.ref-layout .cookie-notice{bottom:84px;max-width:calc(100vw - 24px)}
}
@media(max-width:380px){.ref-top .ref-logo{width:92px;min-width:86px}.ref-top .ref-phone{font-size:10px;padding:10px 6px}.m25-menu-toggle{min-width:43px;padding:2px 6px}}

/* Fit the square 3D logo inside footer brand area, without overlapping Services */
.ref-layout footer.footer .footergrid>div:first-child{min-width:0;overflow:hidden}
.ref-layout footer.footer .footergrid>div:first-child>a.brand{display:flex!important;align-items:center;justify-content:flex-start;width:100%;max-width:100%;height:auto;min-height:0;margin:0;padding:0;overflow:hidden}
.ref-layout footer.footer img.brand-logo-v2{display:block!important;width:180px!important;max-width:100%!important;height:150px!important;max-height:150px!important;object-fit:contain!important;object-position:left center!important;margin:0!important;position:static!important;transform:none!important}
@media(max-width:800px){
.ref-layout footer.footer .footergrid>div:first-child{width:100%;max-width:100%;padding-bottom:14px}
.ref-layout footer.footer .footergrid>div:first-child>a.brand{height:145px;max-height:145px;align-items:center}
.ref-layout footer.footer img.brand-logo-v2{width:160px!important;height:140px!important;max-height:140px!important;object-fit:contain!important}
}

/* Complete mobile service menu, tidy footer */
.ref-header .m25-submenu{display:none}
.ref-layout footer.footer .footergrid>div:first-child{overflow:visible!important;min-height:175px}
.ref-layout footer.footer .footergrid>div:first-child>a.brand{height:165px!important;min-height:165px!important;overflow:visible!important;align-items:center!important}
.ref-layout footer.footer img.brand-logo-v2{width:145px!important;height:145px!important;max-width:145px!important;max-height:145px!important;object-fit:contain!important;object-position:center center!important}
@media(max-width:800px){
.ref-header.m25-menu-open .ref-nav{display:flex!important;flex-direction:column!important;gap:0!important}
.ref-header .ref-nav>a{display:block!important;flex:none!important;width:100%;text-align:left!important}
.ref-header .m25-submenu:not([hidden]){display:grid!important;grid-template-columns:1fr;gap:0;background:#0b304d;padding:2px 0 8px 16px}
.ref-header .m25-submenu[hidden]{display:none!important}
.ref-header .m25-submenu a{display:block!important;color:#f1f6fb;text-decoration:none;font-size:13px;line-height:1.3;padding:11px 12px;border-bottom:1px solid #29445b}
.ref-header .ref-nav{max-height:calc(100dvh - 175px)!important;overflow-y:auto!important;overscroll-behavior:contain}
.ref-layout footer.footer .footergrid>div:first-child{height:auto!important;min-height:175px!important;padding:12px 0 20px!important}
.ref-layout footer.footer .footergrid>div:first-child>a.brand{height:155px!important;min-height:155px!important}
.ref-layout footer.footer img.brand-logo-v2{width:140px!important;height:140px!important;max-height:140px!important}
}

/* Red 24/7 emergency roundel on desktop */
@media(min-width:801px){.ref-roundel{background:#b81420!important;border-color:#ff5560!important;color:#fff!important;font-size:20px!important;box-shadow:0 6px 22px #0006}}

/* Show the emergency roundel on mobile too, matching desktop */
@media(max-width:800px){
.ref-hero{padding-bottom:110px!important;min-height:0!important}
.ref-roundel{display:flex!important;visibility:visible!important;position:relative!important;right:auto!important;bottom:auto!important;margin:22px 0 0 auto!important;width:124px!important;height:124px!important;min-width:124px!important;min-height:124px!important;border:5px solid #ff5560!important;border-radius:50%!important;background:#b81420!important;color:#fff!important;font-size:17px!important;font-weight:900!important;line-height:1.12!important;text-align:center!important;align-items:center!important;justify-content:center!important;flex-direction:column!important;box-shadow:0 6px 22px #0006!important;z-index:3!important}
}
@media(max-width:380px){.ref-roundel{width:110px!important;height:110px!important;min-width:110px!important;min-height:110px!important;font-size:15px!important}}

/* Mobile: float the emergency badge over the hero image without adding page height */
@media(max-width:800px){
.ref-hero{position:relative!important;padding-bottom:28px!important;min-height:0!important}
.ref-roundel{position:absolute!important;right:16px!important;bottom:14px!important;margin:0!important;width:96px!important;height:96px!important;min-width:96px!important;min-height:96px!important;font-size:13px!important;border-width:4px!important;line-height:1.08!important;box-shadow:0 4px 15px #0008!important;z-index:4!important}
.ref-hero .ref-actions{padding-right:0!important}
}
@media(max-width:380px){.ref-roundel{width:84px!important;height:84px!important;min-width:84px!important;min-height:84px!important;font-size:11px!important}}

@media(max-width:800px){.ref-roundel{top:14px!important;bottom:auto!important;right:12px!important;width:86px!important;height:86px!important;min-width:86px!important;min-height:86px!important;font-size:11px!important}.ref-hero .ref-kicker{padding-right:100px!important}}

/* Desktop dropdowns available on every page */
@media(min-width:801px){
.ref-header{position:relative;z-index:90}
.ref-header .ref-nav{position:relative}
.ref-header .ref-nav .m25-submenu:not([hidden]){display:grid!important;position:absolute;top:100%;left:11%;width:min(570px,85vw);grid-template-columns:repeat(2,minmax(0,1fr));gap:0;background:#061f36;border:1px solid #b58b35;border-radius:0 0 12px 12px;box-shadow:0 15px 30px #0006;padding:12px;z-index:200;max-height:65vh;overflow-y:auto}
.ref-header .ref-nav .m25-submenu:nth-of-type(2):not([hidden]){left:24%;width:min(440px,80vw)}
.ref-header .ref-nav .m25-submenu a{display:block!important;padding:11px 12px!important;color:#fff!important;text-decoration:none;font-size:13px;white-space:normal;border-bottom:1px solid #23435c}
.ref-header .ref-nav .m25-submenu a:hover{background:#153c59;color:#ffca44!important}
.ref-header .ref-nav .m25-group-link{cursor:pointer}
}

/* Fix desktop dropdown clipping by the nav's old horizontal scroller */
@media(min-width:801px){
.ref-header,.ref-header .ref-nav{overflow:visible!important}
.ref-header .ref-nav .m25-submenu:not([hidden]){top:calc(100% - 1px)!important;z-index:9999!important;visibility:visible!important;opacity:1!important}
.ref-header .ref-nav>a.m25-group-link{position:relative;z-index:1}
}

.m25-instagram-link{display:inline-flex!important;align-items:center;gap:7px;color:#fff!important;font-weight:700;text-decoration:none;padding:9px 0}.m25-instagram-link:hover{color:#ffcb45!important}.m25-instagram-row{padding:12px 5% 18px}