:root{--navy:#071B33;--deep:#0B2447;--ink:#101828;--muted:#667085;--soft:#F4F7FA;--white:#fff;--orange:#FF8A00;--orange2:#f47f00;--line:#e6edf5;--shadow:0 18px 50px rgba(7,27,51,.12);--radius:22px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.55}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}.container{width:min(1180px,calc(100% - 40px));margin-inline:auto}.skip{position:absolute;left:-999px;top:10px;background:var(--orange);color:#fff;padding:10px;z-index:9999}.skip:focus{left:10px}.topbar{background:var(--navy);color:#fff;font-size:13px}.topbar-inner{min-height:36px;display:flex;align-items:center;justify-content:center;gap:24px;white-space:nowrap}.topbar a{color:#fff}.site-header{position:sticky;top:0;z-index:1000;background:#fff;box-shadow:0 2px 20px rgba(7,27,51,.08)}.mainnav{background:#fff}.nav-inner{min-height:78px;display:flex;align-items:center;gap:20px}.brand{display:flex;align-items:center;gap:13px;flex:0 0 265px;min-width:0}.brand img{width:56px;height:56px;border-radius:15px}.brand b{display:block;font-size:23px;font-weight:900;letter-spacing:-.02em;line-height:1.1;color:var(--ink);white-space:nowrap}.brand em{display:block;font-style:normal;font-size:13px;color:#344054;white-space:nowrap}.nav-links{display:flex;align-items:center;justify-content:flex-end;gap:18px;flex:1;min-width:0}.nav-links>a,.drop-link{font-size:14px;font-weight:800;white-space:nowrap;padding:28px 0;color:#0f1f35}.nav-links .active,.drop-link.active,.nav-links a:hover,.drop-link:hover{color:var(--orange)}.nav-drop{position:relative}.drop-link span{font-size:11px;margin-left:5px}.mega{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(12px);width:780px;background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);padding:18px;opacity:0;visibility:hidden;transition:.2s;z-index:20}.nav-drop:hover .mega,.nav-drop:focus-within .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mega a{display:flex;gap:12px;padding:12px;border-radius:16px}.mega a:hover{background:var(--soft)}.mega a span{color:var(--orange);font-size:18px}.mega a strong{display:block;font-size:14px}.mega a small{display:block;color:var(--muted);font-size:12px}.mega-cta{margin-top:12px;background:linear-gradient(135deg,var(--navy),var(--deep));border-radius:18px;padding:18px;color:#fff;display:flex;align-items:center;gap:16px;justify-content:space-between}.mega-cta p{margin:4px 0 0;color:#cbd5e1;font-size:13px}.btn{border:0;border-radius:14px;padding:13px 18px;font-weight:900;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.2s;white-space:nowrap}.btn:hover{transform:translateY(-2px)}.primary{background:linear-gradient(135deg,var(--orange),var(--orange2));color:#fff;box-shadow:0 14px 25px rgba(255,138,0,.25)}.nav-cta{flex:0 0 auto;padding:15px 24px}.ghost-light{border:1px solid rgba(255,255,255,.35);color:#fff;background:rgba(255,255,255,.08)}.ghost-dark{border:1px solid #cfd8e3;color:var(--navy);background:#fff}.whatsapp{background:#14B866;color:#fff}.mini{font-size:13px;padding:10px 12px}.small{font-size:13px;padding:10px 14px}.menu-toggle{display:none;background:transparent;border:0;width:44px;height:44px;margin-left:auto}.menu-toggle span{display:block;height:3px;background:var(--navy);margin:6px;border-radius:2px}.home-hero{background:linear-gradient(135deg,#06182e,#0b2447);padding:34px 0}.hero-slider{position:relative;border-radius:28px;min-height:520px;overflow:hidden;background:#06182e;box-shadow:0 22px 70px rgba(7,27,51,.25)}.hero-slide{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) 48%;opacity:0;visibility:hidden;transition:opacity .6s ease}.hero-slide.active{opacity:1;visibility:visible}.hero-copy{padding:62px 64px;color:#fff;position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center}.hero-copy h1,.page-hero h1{font-size:clamp(38px,5vw,68px);line-height:.98;margin:18px 0;font-weight:900;letter-spacing:-.05em}.hero-copy p,.page-hero p{font-size:18px;color:#dbe7f5;max-width:660px}.hero-slide figure{margin:0;height:100%;position:relative}.hero-slide figure:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#06182e 0%,rgba(6,24,46,.25) 35%,rgba(6,24,46,.03) 100%)}.hero-slide img{width:100%;height:100%;object-fit:cover}.eyebrow{display:inline-flex;color:var(--orange);font-weight:900;letter-spacing:.08em;text-transform:uppercase;font-size:12px}.eyebrow.light{color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);padding:8px 12px;border-radius:999px;text-transform:none;letter-spacing:0}.hero-trust{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 26px}.hero-trust span{font-size:13px;font-weight:800;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);padding:8px 10px;border-radius:999px}.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.25);color:#fff;font-size:38px;cursor:pointer}.hero-arrow.prev{left:18px}.hero-arrow.next{right:18px}.pause{position:absolute;right:20px;bottom:18px;z-index:5;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.25);color:#fff;border-radius:999px;padding:8px 12px}.dots{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:5;display:flex;gap:10px}.dots button{width:11px;height:11px;border-radius:50%;border:0;background:rgba(255,255,255,.75);cursor:pointer}.dots .active{background:var(--orange)}.trust-row{background:#fff;border-bottom:1px solid var(--line)}.trust-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding:18px 0}.trust-grid span{text-align:center;font-weight:900;color:var(--navy);background:var(--soft);border-radius:14px;padding:12px}.section{padding:78px 0}.section.alt,.split-section{background:var(--soft)}.section-head{text-align:center;max-width:760px;margin:0 auto 34px}.section-head h2,.split-grid h2,.closing-inner h2,.brand-strip h2{font-size:clamp(30px,3vw,46px);line-height:1.08;margin:8px 0 12px;letter-spacing:-.04em}.section-head p,.split-grid p,.brand-strip p{color:var(--muted);font-size:17px}.services-showcase{background:radial-gradient(circle at top right,rgba(255,138,0,.14),transparent 24%),linear-gradient(135deg,#051427 0%,#071b33 45%,#081f3d 100%);color:#fff}.services-showcase .section-head p{color:#cfdae8}.services-showcase .section-head h2{color:#fff}.services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}.service-card{background:linear-gradient(180deg,#0a1830 0%,#0b2243 100%);border:1px solid rgba(255,255,255,.1);border-radius:24px;overflow:hidden;box-shadow:0 18px 42px rgba(0,0,0,.22);transition:.25s;position:relative;display:flex;flex-direction:column;min-height:100%;color:#fff}.service-card:hover{transform:translateY(-6px);box-shadow:0 26px 58px rgba(0,0,0,.28)}.service-image{height:220px;overflow:hidden;background:#0b2447;position:relative}.service-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(5,20,39,.18) 100%)}.service-image img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}.service-card:hover img{transform:scale(1.06)}.service-body{padding:22px;display:flex;flex-direction:column;flex:1}.service-symbol{width:34px;height:34px;display:grid;place-items:center;background:linear-gradient(135deg,#ff8a00,#ff5f3a);color:#fff;border-radius:50%;font-weight:900;font-size:13px;box-shadow:0 10px 22px rgba(255,138,0,.34)}.service-body h3{font-size:22px;line-height:1.15;margin:16px 0 10px;color:#fff;letter-spacing:-.02em}.service-body p{color:#cfdae8;min-height:78px;margin:0 0 18px}.card-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto}.text-link{font-weight:900;color:#ff9a20}.service-quote{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#fff}.service-quote:hover{background:rgba(255,255,255,.16)}.services-grid>.service-card:last-child:nth-child(7){grid-column:2}.split-grid,.page-hero-grid,.two-col,.brand-strip-inner,.closing-inner,.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}.split-section{padding:78px 0}.split-grid figure,.page-hero figure{margin:0;border-radius:28px;overflow:hidden;box-shadow:var(--shadow)}.split-grid img,.page-hero img{width:100%;height:420px;object-fit:cover}.brand-strip{padding:68px 0;background:#fff}.brand-cloud{display:flex;flex-wrap:wrap;gap:12px}.brand-cloud span,.logo-tiles span{display:inline-flex;align-items:center;justify-content:center;border:1px solid #d8e1ec;background:#fff;border-radius:999px;padding:10px 14px;font-weight:900;color:#0f213a;box-shadow:0 8px 18px rgba(7,27,51,.05)}.closing-cta{background:linear-gradient(135deg,var(--navy),var(--deep));padding:60px 0;color:#fff}.closing-inner p{color:#d3deea}.footer{background:#06182e;color:#fff;padding:62px 0 30px}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:34px}.footer .brand b{color:#fff}.footer .brand em,.footer p,.footer li{color:#bdc8d6}.footer ul{list-style:none;margin:0;padding:0}.footer li{margin:9px 0}.footer a:hover{color:var(--orange)}.foot-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding-top:20px;display:flex;justify-content:space-between;color:#bdc8d6;font-size:14px}.page-hero{background:linear-gradient(135deg,var(--navy),var(--deep));padding:78px 0;color:#fff}.page-hero-grid{min-height:430px}.page-hero figure{border:1px solid rgba(255,255,255,.14)}.snapshot{background:#fff;border-bottom:1px solid var(--line)}.snapshot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:24px 0}.snapshot-grid div{background:var(--soft);border-radius:18px;padding:18px}.snapshot-grid strong{display:block;font-size:18px}.snapshot-grid span{color:var(--muted);font-size:14px}.install-grid,.mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.install-card,.mini-card,.detail-card,.brand-board-card,.region-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:0 12px 30px rgba(7,27,51,.06)}.install-card span{width:36px;height:36px;background:var(--orange);color:#fff;border-radius:12px;display:grid;place-items:center}.install-card h3,.mini-card h3{margin:14px 0 8px}.install-card p,.mini-card p,.detail-card p{color:var(--muted)}.pill-grid{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.pill-grid span,.city-grid button{background:#fff;border:1px solid var(--line);border-radius:999px;padding:11px 16px;font-weight:900;box-shadow:0 8px 18px rgba(7,27,51,.05)}.pill-grid.compact{justify-content:flex-start}.brands-section{background:#071B33;color:#fff}.brands-section .section-head p{color:#cad6e4}.brand-board{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}.brand-board-card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}.brand-board-card h3{color:#fff;margin-top:0}.logo-tiles{display:flex;flex-wrap:wrap;gap:10px}.logo-tiles span{background:#fff;color:var(--navy);border:0}.faq-list{display:grid;gap:12px}.faq-list details{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px}.faq-list summary{font-weight:900;cursor:pointer}.faq-list p{color:var(--muted)}.gallery-note{background:#fff7ed;border:1px solid #fed7aa;border-radius:18px;padding:18px;margin-bottom:20px}.filter-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:28px}.gallery-filter{border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 16px;font-weight:900;cursor:pointer}.gallery-filter.active{background:var(--orange);color:#fff;border-color:var(--orange)}.gallery-grid{columns:3 260px;column-gap:18px}.gallery-item{display:inline-block;width:100%;margin:0 0 18px;border:0;padding:0;border-radius:20px;overflow:hidden;position:relative;cursor:pointer;background:#000;box-shadow:0 12px 28px rgba(7,27,51,.1)}.gallery-item img{width:100%;height:auto}.gallery-item span{position:absolute;left:12px;bottom:12px;background:rgba(7,27,51,.86);color:#fff;border-radius:999px;padding:7px 11px;font-weight:900;font-size:12px}.gallery-item.hide{display:none}.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.86);z-index:2000;display:none;align-items:center;justify-content:center;padding:30px}.lightbox.open{display:flex}.lightbox img{max-height:82vh;border-radius:18px}.lightbox-close{position:absolute;right:24px;top:20px;width:44px;height:44px;border-radius:50%;border:0;font-size:30px}.regions-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.city-grid{display:flex;flex-wrap:wrap;gap:10px}.city-grid button{cursor:pointer}.contact-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}.contact-cards a{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:0 10px 25px rgba(7,27,51,.06)}.contact-cards strong{display:block;font-size:18px}.contact-cards span{color:var(--muted)}.form-wrap{max-width:920px}.form,.card-form{background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px;box-shadow:var(--shadow)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form label{display:grid;gap:7px;font-weight:800;margin-bottom:14px}.form input,.form select,.form textarea{width:100%;border:1px solid #d0d9e5;border-radius:12px;padding:12px;font:inherit}.form input:focus,.form select:focus,.form textarea:focus{outline:3px solid rgba(255,138,0,.18);border-color:var(--orange)}.form .check{display:flex;align-items:flex-start;gap:10px;font-weight:600}.form .check input{width:auto;margin-top:4px}.hp{position:absolute;left:-9999px}.legal{background:var(--soft);padding:70px 0}.legal-card{max-width:900px;background:#fff;border-radius:24px;padding:44px;box-shadow:var(--shadow)}.legal-card h1{font-size:44px}.legal-card h2{margin-top:30px}.thank-you{min-height:70vh;background:linear-gradient(135deg,var(--navy),var(--deep));display:grid;place-items:center;color:#fff;padding:80px 0}.thank-card{background:#fff;color:var(--ink);border-radius:28px;padding:46px;text-align:center;box-shadow:var(--shadow)}.checkmark{width:70px;height:70px;background:#16a34a;color:#fff;border-radius:50%;display:inline-grid;place-items:center;font-size:40px;font-weight:900}.center{justify-content:center}.quote-modal{position:fixed;inset:0;background:rgba(7,27,51,.72);display:none;z-index:3000;align-items:center;justify-content:center;padding:20px}.quote-modal.open{display:flex}.quote-panel{background:#fff;border-radius:28px;max-width:900px;max-height:92vh;overflow:auto;padding:34px;position:relative;box-shadow:0 24px 80px rgba(0,0,0,.25)}.quote-close{position:absolute;right:18px;top:16px;border:0;background:var(--soft);border-radius:50%;width:40px;height:40px;font-size:26px}.mobile-sticky{display:none} @media(max-width:1240px){.container{width:min(1120px,calc(100% - 36px))}.brand{flex-basis:245px}.brand b{font-size:20px}.brand em{font-size:12px}.nav-links{gap:13px}.nav-links>a,.drop-link{font-size:13px}.nav-cta{padding:13px 18px}} @media(max-width:1080px){.topbar-inner{justify-content:flex-start;overflow:auto}.menu-toggle{display:block}.nav-inner{min-height:72px}.brand{flex:1}.nav-links,.nav-cta{display:none}.nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;padding:18px 22px;border-top:1px solid var(--line);box-shadow:var(--shadow);gap:0}.nav-links.open>a,.nav-links.open .drop-link{padding:13px 0}.nav-links.open .nav-drop .mega{position:static;transform:none;width:auto;opacity:1;visibility:visible;box-shadow:none;border-radius:16px;margin:8px 0}.nav-links.open .mega-grid{grid-template-columns:1fr}.nav-links.open .mega-cta{display:none}.hero-slide{grid-template-columns:1fr}.hero-slide figure{position:absolute;inset:0;opacity:.28}.hero-slide figure:after{display:none}.hero-copy{padding:50px 38px}.services-grid,.install-grid{grid-template-columns:1fr 1fr}.services-grid>.service-card:last-child:nth-child(7){grid-column:auto}.footer-grid{grid-template-columns:1fr 1fr}.split-grid,.page-hero-grid,.two-col,.brand-strip-inner,.closing-inner,.contact-layout{grid-template-columns:1fr}.brand-board{grid-template-columns:1fr}.snapshot-grid{grid-template-columns:1fr 1fr}.mini-grid{grid-template-columns:1fr 1fr}.regions-grid{grid-template-columns:1fr}} @media(max-width:700px){.container{width:calc(100% - 28px)}.topbar{display:none}.brand img{width:48px;height:48px}.brand b{font-size:18px}.brand em{font-size:11px}.home-hero{padding:14px 0}.hero-slider{min-height:620px;border-radius:20px}.hero-copy{padding:70px 22px 86px}.hero-copy h1,.page-hero h1{font-size:38px}.hero-copy p,.page-hero p{font-size:16px}.hero-arrow{width:40px;height:40px;font-size:30px}.hero-arrow.prev{left:10px}.hero-arrow.next{right:10px}.trust-grid{grid-template-columns:1fr 1fr}.services-grid,.install-grid,.mini-grid,.footer-grid,.form-grid,.contact-cards{grid-template-columns:1fr}.service-body p{min-height:auto}.section,.split-section{padding:54px 0}.page-hero{padding:54px 0}.page-hero-grid{min-height:auto}.page-hero img,.split-grid img{height:260px}.snapshot-grid{grid-template-columns:1fr}.mobile-sticky{display:grid;grid-template-columns:1fr 1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:1500}.mobile-sticky a,.mobile-sticky button{border:0;background:var(--navy);color:#fff;padding:14px 8px;font-weight:900;text-align:center}.mobile-sticky a:nth-child(2){background:#14B866}.mobile-sticky button{background:var(--orange)}body{padding-bottom:52px}.foot-bottom{display:grid;gap:10px}.quote-panel{padding:24px}.brand-cloud span,.logo-tiles span{font-size:12px}.mega{display:none}} @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}} /* v10 spacing + homepage hero cleanup */ body{letter-spacing:.01em} .hero-copy{padding:72px 70px 82px;gap:8px} .hero-copy h1,.page-hero h1{letter-spacing:-.035em;line-height:1.06;margin:24px 0 22px} .hero-copy p,.page-hero p{line-height:1.75;letter-spacing:.01em;margin:0 0 20px} .hero-trust{gap:16px 14px;margin:26px 0 0;max-width:720px} .hero-trust span{padding:12px 16px;line-height:1.35;letter-spacing:.005em} .home-hero .hero-copy>.cta-row{display:none!important} .hero-slider{min-height:560px} .hero-slide figure:after{background:linear-gradient(90deg,#06182e 0%,rgba(6,24,46,.35) 42%,rgba(6,24,46,.03) 100%)} .section{padding:92px 0}.split-section{padding:92px 0}.section-head{margin-bottom:46px}.section-head h2{margin-bottom:18px}.section-head p{line-height:1.75}.services-grid{gap:28px}.service-body{padding:26px}.service-body h3{margin:18px 0 13px;line-height:1.24}.service-body p{line-height:1.72;min-height:96px}.card-actions{padding-top:8px}.trust-grid{gap:18px;padding:24px 0}.trust-grid span{padding:18px 16px;line-height:1.35}.install-grid,.mini-grid,.snapshot-grid,.regions-grid,.brand-board{gap:24px}.install-card,.mini-card,.detail-card,.brand-board-card,.region-card{padding:28px}.brand-cloud,.logo-tiles,.pill-grid{gap:14px}.page-hero{padding:92px 0}.page-hero-grid{gap:58px}.closing-cta{padding:76px 0}.footer{padding-top:76px}.form,.card-form{padding:34px}.form-grid{gap:22px}.gallery-grid{column-gap:24px}.gallery-item{margin-bottom:24px} @media(max-width:1080px){.hero-copy{padding:64px 42px 80px}.hero-slider{min-height:600px}.hero-trust{gap:12px}.section,.split-section{padding:76px 0}.page-hero{padding:76px 0}.service-body p{min-height:auto}} @media(max-width:700px){.hero-copy{padding:64px 24px 72px}.hero-slider{min-height:620px}.hero-copy h1,.page-hero h1{line-height:1.08;margin:20px 0}.hero-trust span{font-size:12px;padding:10px 12px}.section,.split-section{padding:62px 0}.page-hero{padding:62px 0}.services-grid{gap:22px}.service-body{padding:22px}.trust-grid{gap:12px}.form,.card-form{padding:24px}} /* V11 service cards layout fix: make homepage/service cards wide horizontal rectangles */ .services-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px} .service-card{display:grid;grid-template-columns:minmax(230px,42%) 1fr;align-items:stretch;min-height:260px} .service-image{height:100%;min-height:100%} .service-body{padding:24px 26px} .service-body h3{font-size:24px;line-height:1.18} .service-body p{min-height:auto;margin-bottom:16px} .card-actions{margin-top:auto;padding-top:12px} .services-grid>.service-card:last-child:nth-child(7){grid-column:1 / -1;max-width:calc(50% - 14px);width:100%;justify-self:center} @media(max-width:1080px){ .services-grid{grid-template-columns:1fr} .service-card{grid-template-columns:minmax(200px,38%) 1fr} .services-grid>.service-card:last-child:nth-child(7){grid-column:auto;max-width:none} } @media(max-width:700px){ .service-card{grid-template-columns:1fr} .service-image{height:220px;min-height:220px} .service-body{padding:22px} } /* V12 compact 3-up service cards */ .services-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch} .service-card{display:flex;flex-direction:column;min-height:0} .service-image{height:180px;min-height:180px} .service-body{padding:18px 18px 16px} .service-symbol{width:30px;height:30px;font-size:12px} .service-body h3{font-size:18px;line-height:1.22;margin:12px 0 8px} .service-body p{font-size:13px;line-height:1.6;margin:0 0 14px} .card-actions{padding-top:6px} .services-grid>.service-card:last-child:nth-child(7){grid-column:2;max-width:none;width:100%;justify-self:stretch} @media(max-width:1080px){ .services-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .service-card{display:flex;flex-direction:column} .service-image{height:190px;min-height:190px} .services-grid>.service-card:last-child:nth-child(7){grid-column:1 / -1;max-width:340px;justify-self:center} } @media(max-width:700px){ .services-grid{grid-template-columns:1fr} .service-image{height:210px;min-height:210px} .services-grid>.service-card:last-child:nth-child(7){grid-column:auto;max-width:none} } /* V13 brand-board redesign + darker theme background */ body{ background: radial-gradient(circle at top left, rgba(18, 54, 104, 0.38), transparent 28%), radial-gradient(circle at top right, rgba(255, 138, 0, 0.10), transparent 22%), linear-gradient(180deg, #03101f 0%, #06172d 42%, #071b33 100%); } .brands-section{ position:relative; overflow:hidden; background: radial-gradient(circle at 15% 18%, rgba(20, 63, 123, 0.28), transparent 24%), radial-gradient(circle at 88% 18%, rgba(255, 138, 0, 0.08), transparent 18%), linear-gradient(135deg, #06182f 0%, #071b33 52%, #0a2344 100%); } .brands-section::before{ content:""; position:absolute; inset:-120px auto auto -80px; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,0.06), transparent 65%); pointer-events:none; } .brands-section::after{ content:""; position:absolute; right:-120px; bottom:-120px; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle, rgba(30,89,170,0.18), transparent 65%); pointer-events:none; } .brands-section .container{position:relative;z-index:1} .brand-board{ gap:28px; grid-template-columns:repeat(2,minmax(0,1fr)); perspective:1200px; } .brand-board-card{ position:relative; isolation:isolate; padding:26px 24px 24px; border-radius:24px; background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02) 18%, rgba(5,17,34,0.16) 100%), linear-gradient(145deg, rgba(18,40,69,0.96) 0%, rgba(8,23,45,0.98) 62%, rgba(5,16,33,1) 100%); border:1px solid rgba(148, 181, 223, 0.22); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.30), 0 6px 16px rgba(5, 13, 28, 0.22), inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -18px 24px rgba(2,8,18,0.18); transform:translateY(0) rotateX(0deg); transition:transform .32s ease, box-shadow .32s ease, border-color .32s ease; } .brand-board-card::before{ content:""; position:absolute; inset:1px 1px auto 1px; height:42%; border-radius:23px 23px 80px 80px; background:linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02)); pointer-events:none; z-index:-1; } .brand-board-card::after{ content:""; position:absolute; top:0; left:22px; right:22px; height:3px; border-radius:999px; background:linear-gradient(90deg, rgba(255,138,0,0.0), rgba(255,138,0,0.95), rgba(255,138,0,0.0)); opacity:.95; } .brand-board-card:hover{ transform:translateY(-6px) rotateX(1deg); border-color:rgba(255, 170, 68, 0.34); box-shadow: 0 26px 50px rgba(0, 0, 0, 0.34), 0 10px 20px rgba(255,138,0,0.10), inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -18px 24px rgba(2,8,18,0.20); } .brand-board-card h3{ margin:0 0 18px; color:#ffffff; font-size:20px; line-height:1.25; letter-spacing:-0.02em; } .logo-tiles{gap:12px} .logo-tiles span{ display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:9px 14px; border-radius:999px; border:1px solid rgba(255,255,255,0.18); background: linear-gradient(180deg, #ffffff 0%, #eef3f9 48%, #dde7f2 100%); color:#0b1b31; box-shadow: 0 8px 18px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.85); font-weight:800; letter-spacing:.01em; } .legal-note{ color:#c7d4e5; margin-top:18px; } @media(max-width:700px){ .brand-board{grid-template-columns:1fr;gap:18px} .brand-board-card{padding:22px 18px 20px;border-radius:20px} .brand-board-card h3{font-size:18px} .logo-tiles span{min-height:34px;padding:8px 12px;font-size:12px} } /* V14 full dark rebuild: 3D buttons, 3D cards, darker global theme */ :root{ --page-bg:#040f1f; --page-bg-2:#07172e; --glass:#0b1f3b; --glass-2:#0f2a4f; --glass-line:rgba(165,190,220,.18); --text-soft:#d0dcec; } html,body{background:var(--page-bg)} body{ color:#e8eef7; background: radial-gradient(circle at 10% 12%, rgba(22,67,132,.28), transparent 24%), radial-gradient(circle at 90% 16%, rgba(255,138,0,.08), transparent 18%), linear-gradient(180deg, #03101f 0%, #051426 44%, #071c34 100%); } a{transition:all .25s ease} .site-header,.mainnav{ background:rgba(5, 17, 34, 0.86); backdrop-filter:blur(14px); box-shadow:0 10px 30px rgba(0,0,0,.24); } .brand b,.nav-links>a,.drop-link{color:#f7fbff} .brand em{color:#cbd8e6} .nav-links .active,.drop-link.active,.nav-links a:hover,.drop-link:hover{color:var(--orange)} .menu-toggle span{background:#fff} .mega,.quote-panel{ background:linear-gradient(180deg, rgba(17,37,66,.98), rgba(8,21,40,.98)); border-color:rgba(255,255,255,.10); color:#fff; } .mega a:hover{background:rgba(255,255,255,.05)} .mega a small,.mega-cta p{color:#c5d2e1} /* global dark sections */ .section, .split-section, .brand-strip, .snapshot, .legal, .trust-row, .page-wrap, main, section{ background-color:transparent; } .section.alt,.split-section,.brand-strip,.snapshot,.legal{ background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)), transparent; } .section-head h2,.split-grid h2,.brand-strip h2,.closing-inner h2,.page-hero h1,.hero-copy h1, .legal-card h1,.legal-card h2,.install-card h3,.mini-card h3,.detail-card h3,.region-card h3, .contact-cards strong,.faq-list summary,.snapshot-grid strong,.service-body h3,.brand-board-card h3, .form h2,.card-form h2,.thank-card h1,.thank-card h2,.section-head,.split-grid,.brand-strip, .footer .brand b,.page-hero .eyebrow,.hero-copy .eyebrow,.thank-card strong{color:#fff} .section-head p,.split-grid p,.brand-strip p,.legal-card p,.install-card p,.mini-card p,.detail-card p, .region-card p,.contact-cards span,.faq-list p,.snapshot-grid span,.legal-note,.service-body p,.hero-copy p, .page-hero p,.thank-card p,.footer p,.footer li,.foot-bottom,.form .help,.gallery-note,.form label, .form input,.form select,.form textarea{color:var(--text-soft)} /* 3D buttons */ .btn, .gallery-filter, .pill-grid span, .city-grid button, .hero-arrow, .pause, .lightbox-close, .quote-close, button, input[type="submit"]{ position:relative; border-radius:16px; border:1px solid rgba(255,255,255,.14); box-shadow: 0 12px 24px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -8px 14px rgba(0,0,0,.16); transform:translateY(0); transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease; } .btn:hover, .gallery-filter:hover, .pill-grid span:hover, .city-grid button:hover, .hero-arrow:hover, .pause:hover, .lightbox-close:hover, .quote-close:hover, button:hover, input[type="submit"]:hover{ transform:translateY(-3px); box-shadow: 0 18px 30px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -10px 16px rgba(0,0,0,.18); } .primary{ background:linear-gradient(180deg, #ffae41 0%, #ff8a00 54%, #e96c00 100%); border-color:rgba(255,173,80,.65); color:#fff; } .ghost-light{ background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06)); border-color:rgba(255,255,255,.24); } .ghost-dark, .gallery-filter, .pill-grid span, .city-grid button, .pause, .quote-close, .lightbox-close{ background:linear-gradient(180deg, rgba(18,39,70,.96), rgba(8,22,43,.98)); color:#fff; border-color:rgba(161,186,220,.18); } .whatsapp{ background:linear-gradient(180deg, #2bd87e 0%, #14b866 55%, #0ea95b 100%); border-color:rgba(61,226,132,.44); } .service-quote{ background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)); color:#fff;border-color:rgba(255,255,255,.16) } .gallery-filter.active{background:linear-gradient(180deg, #ffae41 0%, #ff8a00 56%, #eb7000 100%); color:#fff; border-color:rgba(255,173,80,.6)} .hero-arrow{ width:52px;height:52px;background:linear-gradient(180deg, rgba(16,37,66,.92), rgba(5,16,31,.95)); border-radius:50%;font-size:36px } /* 3D cards */ .service-card, .install-card, .mini-card, .detail-card, .brand-board-card, .region-card, .snapshot-grid div, .contact-cards a, .form, .card-form, .faq-list details, .gallery-note, .legal-card, .thank-card, .quote-panel, .mega, .gallery-item{ background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02) 18%, rgba(5,17,34,.14) 100%), linear-gradient(145deg, rgba(16,36,64,.96) 0%, rgba(8,21,40,.98) 62%, rgba(5,16,33,1) 100%); border:1px solid var(--glass-line); box-shadow: 0 18px 42px rgba(0,0,0,.28), 0 6px 16px rgba(5, 13, 28, 0.22), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -16px 22px rgba(2,8,18,.16); } .service-card:hover, .install-card:hover, .mini-card:hover, .detail-card:hover, .brand-board-card:hover, .region-card:hover, .snapshot-grid div:hover, .contact-cards a:hover, .gallery-item:hover{ transform:translateY(-5px); border-color:rgba(255,173,80,.28); box-shadow: 0 24px 48px rgba(0,0,0,.32), 0 10px 20px rgba(255,138,0,.08), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -18px 24px rgba(2,8,18,.18); } .service-image,.split-grid figure,.page-hero figure,.gallery-item, .service-card,.install-card,.mini-card,.detail-card,.brand-board-card,.region-card, .contact-cards a,.form,.card-form,.legal-card,.thank-card{border-radius:24px} .snapshot-grid div,.faq-list details,.gallery-note{border-radius:22px} .trust-grid span{ background:linear-gradient(180deg, rgba(18,39,70,.95), rgba(8,21,40,.98)); color:#fff; border:1px solid rgba(161,186,220,.14); box-shadow:0 10px 22px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08); } .brand-cloud span,.logo-tiles span{ border:1px solid rgba(255,255,255,.16); background:linear-gradient(180deg,#ffffff 0%, #eef3f9 48%, #dde7f2 100%); color:#0b1b31; box-shadow:0 8px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.88); } .form input,.form select,.form textarea{ background:rgba(255,255,255,.04); border-color:rgba(177,201,232,.18); } .form input:focus,.form select:focus,.form textarea:focus{outline:3px solid rgba(255,138,0,.14);border-color:#ff980f} .lightbox-close,.quote-close{color:#fff} .footer{background:linear-gradient(180deg, #061427 0%, #04111f 100%)} .foot-bottom{border-top-color:rgba(255,255,255,.10)} /* stronger page background framing */ .home-hero,.page-hero,.services-showcase,.closing-cta,.brands-section{ background: radial-gradient(circle at top right, rgba(255,138,0,.10), transparent 18%), radial-gradient(circle at top left, rgba(26,74,145,.18), transparent 22%), linear-gradient(135deg,#041325 0%,#071b33 45%,#0a2344 100%); } .trust-row{border-bottom-color:rgba(255,255,255,.08)} .gallery-item span{background:rgba(5,16,33,.88)} .legal-card,.thank-card{color:#fff} /* V15 brand name pills dark background with white text */ .logo-tiles span, .brand-cloud span, .brand-board-card .logo-tiles span, .brand-board-card .brand-cloud span{ background:linear-gradient(180deg, rgba(21,44,78,.96) 0%, rgba(10,25,48,.98) 100%) !important; color:#ffffff !important; border:1px solid rgba(170,195,228,.22) !important; box-shadow:0 10px 22px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.10), inset 0 -10px 16px rgba(0,0,0,.18) !important; } .logo-tiles span:hover, .brand-cloud span:hover, .brand-board-card .logo-tiles span:hover, .brand-board-card .brand-cloud span:hover{ background:linear-gradient(180deg, rgba(33,63,108,.98) 0%, rgba(13,31,60,1) 100%) !important; color:#ffffff !important; border-color:rgba(255,173,80,.34) !important; } /* V16 total 3D rebuild */ :root{ --glass-deep-1: rgba(10,25,49,.98); --glass-deep-2: rgba(4,14,28,.99); --glass-mid-1: rgba(17,42,78,.96); --glass-line-2: rgba(188,210,239,.18); --glow-orange: rgba(255,138,0,.18); --glow-blue: rgba(52,120,220,.16); } body{ background: radial-gradient(circle at 12% 10%, rgba(34,92,174,.20), transparent 22%), radial-gradient(circle at 87% 8%, rgba(255,138,0,.10), transparent 18%), radial-gradient(circle at 50% 110%, rgba(60,120,210,.10), transparent 24%), linear-gradient(180deg,#020b15 0%, #041120 22%, #06182e 60%, #04111f 100%) !important; } .topbar{ background:linear-gradient(180deg, rgba(9,26,48,.97), rgba(4,14,27,.98)); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 -10px 18px rgba(0,0,0,.18); } .site-header,.mainnav{ background:linear-gradient(180deg, rgba(8,23,42,.92), rgba(4,14,27,.94)) !important; border-bottom:1px solid rgba(178,201,232,.10); box-shadow: 0 18px 38px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.08), inset 0 -12px 20px rgba(0,0,0,.18); } .nav-links>a,.drop-link,.brand b,.brand em,.topbar, .topbar a{ text-shadow:0 1px 0 rgba(0,0,0,.25); } .nav-links>a,.drop-link{ padding:12px 14px; border-radius:14px; transition:all .22s ease; } .nav-links>a:hover,.drop-link:hover,.nav-links .active,.drop-link.active{ background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 8px 16px rgba(0,0,0,.10); } .btn, .gallery-filter, .pill-grid span, .city-grid button, .trust-grid span, .brand-cloud span, .logo-tiles span, .hero-trust span, .hero-arrow, .pause, .lightbox-close, .quote-close, button, input[type="submit"]{ overflow:hidden; isolation:isolate; } .btn::before, .gallery-filter::before, .pill-grid span::before, .city-grid button::before, .trust-grid span::before, .brand-cloud span::before, .logo-tiles span::before, .hero-trust span::before, .hero-arrow::before, .pause::before, .lightbox-close::before, .quote-close::before, button::before, input[type="submit"]::before, .service-card::before, .install-card::before, .mini-card::before, .detail-card::before, .brand-board-card::before, .region-card::before, .snapshot-grid div::before, .contact-cards a::before, .form::before, .card-form::before, .faq-list details::before, .gallery-item::before, .legal-card::before, .thank-card::before, .quote-panel::before{ content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,0) 24%, rgba(255,255,255,0) 72%, rgba(255,255,255,.05) 100%); pointer-events:none; z-index:0; } .btn > *, .gallery-filter > *, .pill-grid span > *, .city-grid button > *, .hero-arrow > *, .pause > *, .lightbox-close > *, .quote-close > *{ position:relative; z-index:1; } .service-card, .install-card, .mini-card, .detail-card, .brand-board-card, .region-card, .snapshot-grid div, .contact-cards a, .form, .card-form, .faq-list details, .gallery-note, .legal-card, .thank-card, .quote-panel, .gallery-item, .trust-grid span{ position:relative; overflow:hidden; border:1px solid var(--glass-line-2) !important; box-shadow: 0 22px 50px rgba(0,0,0,.30), 0 10px 22px rgba(4,14,27,.25), 0 0 0 1px rgba(255,255,255,.02), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -18px 24px rgba(0,0,0,.20), inset 18px 18px 28px rgba(255,255,255,.015), inset -18px -18px 28px rgba(0,0,0,.08) !important; } .service-card:hover, .install-card:hover, .mini-card:hover, .detail-card:hover, .brand-board-card:hover, .region-card:hover, .snapshot-grid div:hover, .contact-cards a:hover, .gallery-item:hover, .faq-list details:hover{ transform:translateY(-7px) scale(1.008); border-color:rgba(255,173,80,.30) !important; box-shadow: 0 28px 60px rgba(0,0,0,.34), 0 12px 28px rgba(255,138,0,.09), 0 0 0 1px rgba(255,255,255,.03), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -20px 26px rgba(0,0,0,.22), inset 18px 18px 28px rgba(255,255,255,.02), inset -18px -18px 28px rgba(0,0,0,.10) !important; } .service-card .service-image, .page-hero figure, .split-grid figure, .gallery-item, .hero-slider{ box-shadow: 0 24px 52px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08), inset 0 -16px 22px rgba(0,0,0,.18); } .hero-slider, .page-hero figure, .split-grid figure, .gallery-item, .brand-board-card, .service-card, .install-card, .mini-card, .detail-card, .region-card, .contact-cards a, .form, .card-form, .legal-card, .thank-card{ border-radius:26px !important; } .primary{ box-shadow: 0 16px 28px rgba(255,138,0,.28), 0 5px 12px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,236,205,.40), inset 0 -12px 16px rgba(190,84,0,.20) !important; } .whatsapp{ box-shadow: 0 16px 28px rgba(20,184,102,.24), 0 5px 12px rgba(0,0,0,.22), inset 0 1px 0 rgba(214,255,229,.25), inset 0 -12px 16px rgba(0,90,50,.16) !important; } .ghost-dark,.ghost-light,.service-quote,.gallery-filter,.pill-grid span,.city-grid button, .hero-trust span,.brand-cloud span,.logo-tiles span,.trust-grid span{ box-shadow: 0 12px 24px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -10px 14px rgba(0,0,0,.15) !important; } .hero-trust span, .trust-grid span, .brand-cloud span, .logo-tiles span{ background:linear-gradient(180deg, rgba(20,45,78,.94), rgba(8,22,43,.98)) !important; color:#fff !important; border-color:rgba(180,203,235,.18) !important; } .section, .split-section, .brand-strip, .snapshot, .legal, .trust-row, .page-wrap, main, section, .footer{ position:relative; } .section::before, .split-section::before, .brand-strip::before, .snapshot::before, .legal::before, .trust-row::before, .page-wrap::before, main::before, section::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0) 16%, rgba(255,255,255,0) 82%, rgba(255,255,255,.015) 100%); pointer-events:none; } .footer{ background: radial-gradient(circle at top left, rgba(255,138,0,.06), transparent 18%), linear-gradient(180deg, #05101d 0%, #030b15 100%) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.06); } .form input,.form select,.form textarea{ background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025)); border:1px solid rgba(185,207,236,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 -10px 14px rgba(0,0,0,.08); } .page-hero,.home-hero,.services-showcase,.closing-cta,.brands-section{ box-shadow:inset 0 1px 0 rgba(255,255,255,.04), inset 0 -18px 30px rgba(0,0,0,.12); } .brand-board-card h3, .install-card h3, .mini-card h3, .detail-card h3, .region-card h3, .service-body h3, .faq-list summary, .contact-cards strong{ text-shadow:0 1px 0 rgba(0,0,0,.30); } /* V17 header + hero controls cleanup */ .nav-inner{ display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap; } .brand{ flex:0 0 auto; min-width:auto; margin-right:18px; } .nav-links{ flex:1 1 auto; min-width:0; display:flex; align-items:center; justify-content:flex-start; flex-wrap:nowrap; gap:10px; margin-left:6px; } .nav-links>a, .drop-link{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; line-height:1.1; padding:12px 10px; } .nav-drop{flex:0 0 auto;} .nav-cta{margin-left:12px;} .hero-arrow, .pause{ display:inline-flex; align-items:center; justify-content:center; } .hero-arrow{ padding:0; line-height:1; } .hero-arrow::before, .pause::before{ display:none !important; } .hero-arrow.prev{left:18px !important; right:auto !important;} .hero-arrow.next{right:18px !important; left:auto !important;} @media (max-width: 1080px){ .brand{margin-right:0;} .nav-links{margin-left:0;} } /* V18 soften brand board card background whiteness */ .brand-board-card{ background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012) 18%, rgba(5,17,34,0.18) 100%), linear-gradient(145deg, rgba(18,40,69,0.96) 0%, rgba(8,23,45,0.985) 62%, rgba(5,16,33,1) 100%) !important; } .brand-board-card::before{ content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,0) 22%, rgba(255,255,255,0) 78%, rgba(255,255,255,.02) 100%) !important; opacity:.42; pointer-events:none; z-index:0; } .brand-board-card h3, .brand-board-card .logo-tiles, .brand-board-card p, .brand-board-card small{ position:relative; z-index:1; } /* V19 remove remaining whiteness from brand board while keeping 3D pills */ .brand-board-card{ background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.006) 12%, rgba(4,12,24,0.14) 100%), linear-gradient(145deg, rgba(10,27,51,0.985) 0%, rgba(7,20,39,0.992) 58%, rgba(4,14,30,1) 100%) !important; box-shadow: 0 18px 42px rgba(0, 0, 0, 0.30), 0 6px 16px rgba(5, 13, 28, 0.22), inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -16px 24px rgba(2,8,18,0.22) !important; } .brand-board-card::before{ background:none !important; opacity:0 !important; } .logo-tiles span{ border:1px solid rgba(255,255,255,0.14) !important; background:linear-gradient(180deg, #1f3557 0%, #132746 46%, #0b1c35 100%) !important; color:#ffffff !important; box-shadow: 0 8px 18px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -6px 10px rgba(0,0,0,0.12) !important; } /* V20 make brand buttons match dark 3D support-card style */ .brand-board-card .logo-tiles span, .brand-board-card .brand-cloud span{ background:linear-gradient(180deg, rgba(18,36,64,.98) 0%, rgba(10,23,43,.995) 52%, rgba(6,16,31,1) 100%) !important; color:#ffffff !important; border:1px solid rgba(184,205,232,.16) !important; border-radius:14px !important; padding:9px 14px !important; min-height:34px; box-shadow: 0 12px 24px rgba(0,0,0,.24), 0 4px 10px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.08), inset 0 -10px 14px rgba(0,0,0,.22) !important; } .brand-board-card .logo-tiles span::before, .brand-board-card .brand-cloud span::before{ display:none !important; background:none !important; } .brand-board-card .logo-tiles span:hover, .brand-board-card .brand-cloud span:hover{ background:linear-gradient(180deg, rgba(24,45,78,.99) 0%, rgba(11,26,48,1) 100%) !important; border-color:rgba(255,173,80,.28) !important; color:#ffffff !important; } /* V21 header contact nav spacing fix */ .nav-links{gap:8px !important;} .nav-links>a, .drop-link{ padding:12px 8px !important; font-size:13px !important; } .nav-links>a:last-child{margin-right:10px;} .nav-cta{margin-left:18px !important;} /* V22 FINAL FORM + LINK/BUTTON POLISH */ /* Cleaner quote/contact modal so form is readable and all buttons remain accessible */ .quote-modal{ padding:18px !important; align-items:center !important; justify-content:center !important; overflow:auto !important; } .quote-panel{ width:min(860px, calc(100vw - 36px)) !important; max-width:860px !important; max-height:88vh !important; overflow:auto !important; padding:30px !important; border-radius:28px !important; } .quote-close{ top:22px !important; left:22px !important; right:auto !important; width:44px !important; height:44px !important; z-index:20 !important; } .quote-panel > .eyebrow, .quote-panel > h2, .quote-panel > p{ margin-left:50px !important; } .quote-panel > h2{ margin-top:10px !important; margin-bottom:10px !important; } .quote-panel > p{ max-width:720px !important; margin-bottom:22px !important; } .quote-panel .form{ margin-top:18px !important; padding:26px !important; border-radius:24px !important; background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)), linear-gradient(145deg, rgba(13,31,58,.98), rgba(6,18,35,.99)) !important; } .quote-panel .form-grid{ grid-template-columns:1fr 1fr !important; gap:18px 20px !important; } .quote-panel .form label{ margin-bottom:0 !important; gap:8px !important; color:#dbe7f5 !important; } .quote-panel .form input, .quote-panel .form select, .quote-panel .form textarea{ height:48px !important; min-height:48px !important; border-radius:14px !important; background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)) !important; color:#fff !important; } .quote-panel .form textarea{ height:110px !important; resize:vertical !important; } .quote-panel .form > label:not(.check){ margin-top:18px !important; } .quote-panel .form .check{ margin-top:16px !important; padding:14px 16px !important; border-radius:16px !important; background:rgba(255,255,255,.035) !important; border:1px solid rgba(255,255,255,.10) !important; } .quote-panel .form .check input{ height:auto !important; min-height:auto !important; } .quote-panel .form button[type="submit"]{ margin-top:18px !important; width:100% !important; min-height:52px !important; } /* Contact/support/work forms: readable premium 3D layout */ .contact-layout .form, .form-wrap .form, .card-form{ width:100% !important; } .form input::placeholder, .form textarea::placeholder{ color:rgba(219,231,245,.58) !important; } .form select option{ background:#071b33 !important; color:#fff !important; } /* Keep desktop header from clipping Contact/CTA */ .nav-inner{gap:16px !important;} .nav-links{gap:7px !important; justify-content:flex-start !important;} .nav-links > a, .drop-link{font-size:13px !important; padding:11px 8px !important;} .nav-links > a:last-child{margin-right:12px !important;} .nav-cta{padding:14px 22px !important; min-width:148px !important; margin-left:14px !important;} /* Buttons and links click area consistent */ .text-link{display:inline-flex; align-items:center; min-height:30px;} .card-actions{gap:14px !important;} .service-quote{min-width:88px !important;} @media(max-width:1080px){ .quote-panel{ width:min(760px, calc(100vw - 28px)) !important; padding:24px !important; } .quote-panel > .eyebrow, .quote-panel > h2, .quote-panel > p{ margin-left:48px !important; } .quote-panel .form-grid{ grid-template-columns:1fr 1fr !important; } } @media(max-width:700px){ .quote-modal{align-items:flex-start !important; padding:12px !important;} .quote-panel{ width:calc(100vw - 24px) !important; max-height:calc(100vh - 24px) !important; padding:20px !important; border-radius:22px !important; } .quote-close{ top:14px !important; left:14px !important; width:40px !important; height:40px !important; } .quote-panel > .eyebrow, .quote-panel > h2, .quote-panel > p{ margin-left:0 !important; padding-left:48px !important; } .quote-panel .form{ padding:18px !important; } .quote-panel .form-grid{ grid-template-columns:1fr !important; gap:14px !important; } .quote-panel .form textarea{ height:100px !important; } } /* Visual final polish: avoid accidental invisible/clipped active nav items */ .nav-links a{ position:relative; z-index:1; } .nav-links a:focus, .drop-link:focus, .btn:focus, button:focus, input:focus, select:focus, textarea:focus{ outline:3px solid rgba(255,138,0,.35) !important; outline-offset:2px !important; } /* V28 FORCE MOBILE VIEW FIX — original colors preserved, desktop unchanged */ /* Uses both media queries and JS-added html.is-mobile class to prevent desktop layout on phones. */ @media (max-width: 1300px), (hover: none) and (pointer: coarse){ html, body{ max-width:100% !important; overflow-x:hidden !important; } .site-header, .topbar, .mainnav, main, section, footer{ max-width:100% !important; overflow-x:hidden !important; } } html.is-mobile, html.is-mobile body{ width:100% !important; max-width:100% !important; overflow-x:hidden !important; } /* Header/mobile nav: force hamburger and hide desktop menu on phones */ @media (max-width: 1300px), (hover: none) and (pointer: coarse){ .topbar{display:none !important;} .site-header{ position:sticky !important; top:0 !important; z-index:3000 !important; width:100% !important; } .mainnav{position:relative !important;} .nav-inner{ width:100% !important; min-height:72px !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:10px !important; flex-wrap:nowrap !important; } .brand{ flex:1 1 auto !important; width:auto !important; max-width:calc(100% - 58px) !important; min-width:0 !important; margin-right:0 !important; gap:10px !important; } .brand img{ width:46px !important; height:46px !important; flex:0 0 46px !important; border-radius:13px !important; } .brand span{ min-width:0 !important; overflow:hidden !important; } .brand b{ font-size:18px !important; line-height:1.05 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } .brand em{ font-size:10px !important; line-height:1.2 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } .menu-toggle{ display:grid !important; place-items:center !important; width:46px !important; height:46px !important; min-width:46px !important; margin-left:auto !important; flex:0 0 46px !important; border-radius:16px !important; padding:0 !important; background:linear-gradient(180deg, rgba(18,39,70,.96), rgba(8,21,40,.98)) !important; border:1px solid rgba(161,186,220,.18) !important; box-shadow:0 12px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -10px 14px rgba(0,0,0,.15) !important; } .menu-toggle span{ display:block !important; width:20px !important; height:2px !important; margin:2px auto !important; background:#fff !important; border-radius:3px !important; } .nav-cta{display:none !important;} .nav-links{ display:none !important; } .nav-links.open{ display:flex !important; position:absolute !important; top:calc(100% + 8px) !important; left:12px !important; right:12px !important; width:auto !important; max-width:calc(100vw - 24px) !important; flex-direction:column !important; align-items:stretch !important; justify-content:flex-start !important; gap:8px !important; padding:14px !important; border-radius:24px !important; max-height:calc(100vh - 105px) !important; overflow:auto !important; overscroll-behavior:contain !important; z-index:3100 !important; background:linear-gradient(180deg, rgba(17,37,66,.98), rgba(8,21,40,.98)) !important; border:1px solid rgba(255,255,255,.12) !important; box-shadow:0 24px 60px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -18px 24px rgba(0,0,0,.18) !important; } .nav-links.open > a, .nav-links.open .drop-link{ width:100% !important; padding:13px 14px !important; margin:0 !important; border-radius:16px !important; justify-content:flex-start !important; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)) !important; border:1px solid rgba(255,255,255,.10) !important; color:#fff !important; } .nav-links.open .active, .nav-links.open a:hover, .nav-links.open .drop-link:hover{ color:var(--orange) !important; } .nav-links.open .nav-drop{ width:100% !important; display:flex !important; flex-direction:column !important; gap:8px !important; } .nav-links.open .mega{ position:static !important; transform:none !important; width:100% !important; opacity:1 !important; visibility:visible !important; padding:8px !important; margin:0 !important; border:0 !important; box-shadow:none !important; background:transparent !important; } .nav-links.open .mega-grid{ grid-template-columns:1fr !important; gap:8px !important; } .nav-links.open .mega a{ padding:12px !important; border-radius:16px !important; border:1px solid rgba(255,255,255,.10) !important; background:rgba(255,255,255,.045) !important; } .nav-links.open .mega a strong{ color:#fff !important; font-size:14px !important; } .nav-links.open .mega a small{ color:#c5d2e1 !important; font-size:11px !important; line-height:1.35 !important; } .nav-links.open .mega-cta{display:none !important;} } /* Same rules using JS-added class so phones in unusual viewport/desktop-mode still get mobile layout. */ html.is-mobile .topbar{display:none !important;} html.is-mobile .site-header{position:sticky !important;top:0 !important;z-index:3000 !important;width:100% !important;} html.is-mobile .mainnav{position:relative !important;} html.is-mobile .nav-inner{width:100% !important;min-height:72px !important;display:flex !important;align-items:center !important;justify-content:space-between !important;gap:10px !important;flex-wrap:nowrap !important;} html.is-mobile .brand{flex:1 1 auto !important;width:auto !important;max-width:calc(100% - 58px) !important;min-width:0 !important;margin-right:0 !important;gap:10px !important;} html.is-mobile .brand img{width:46px !important;height:46px !important;flex:0 0 46px !important;border-radius:13px !important;} html.is-mobile .brand span{min-width:0 !important;overflow:hidden !important;} html.is-mobile .brand b{font-size:18px !important;line-height:1.05 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;} html.is-mobile .brand em{font-size:10px !important;line-height:1.2 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;} html.is-mobile .menu-toggle{display:grid !important;place-items:center !important;width:46px !important;height:46px !important;min-width:46px !important;margin-left:auto !important;flex:0 0 46px !important;border-radius:16px !important;padding:0 !important;} html.is-mobile .nav-cta{display:none !important;} html.is-mobile .nav-links{display:none !important;} html.is-mobile .nav-links.open{display:flex !important;position:absolute !important;top:calc(100% + 8px) !important;left:12px !important;right:12px !important;width:auto !important;max-width:calc(100vw - 24px) !important;flex-direction:column !important;align-items:stretch !important;gap:8px !important;padding:14px !important;border-radius:24px !important;max-height:calc(100vh - 105px) !important;overflow:auto !important;z-index:3100 !important;} /* Layout fixes for actual phone width */ @media (max-width: 767px), (hover: none) and (pointer: coarse){ .container{width:calc(100% - 24px) !important; max-width:100% !important;} .home-hero{padding:14px 0 !important;} .hero-slider{ min-height:560px !important; max-width:100% !important; border-radius:24px !important; } .hero-slide{grid-template-columns:1fr !important;} .hero-slide figure{position:absolute !important; inset:0 !important; opacity:.22 !important;} .hero-slide figure:after{display:none !important;} .hero-slide img{height:100% !important; object-fit:cover !important;} .hero-copy{padding:30px 18px 92px !important; max-width:100% !important;} .hero-copy h1,.page-hero h1{font-size:31px !important; line-height:1.05 !important; letter-spacing:-.03em !important; margin:16px 0 !important;} .hero-copy p,.page-hero p{font-size:15px !important; line-height:1.6 !important;} .hero-trust{display:grid !important; grid-template-columns:1fr 1fr !important; gap:10px !important; margin:18px 0 0 !important;} .hero-trust span{justify-content:center !important; text-align:center !important; font-size:12px !important; padding:10px 12px !important;} .home-hero .hero-copy>.cta-row{display:none !important;} .hero-arrow{width:42px !important;height:42px !important;bottom:14px !important;top:auto !important;transform:none !important;font-size:30px !important;} .hero-arrow.prev{left:12px !important;} .hero-arrow.next{left:60px !important;right:auto !important;} .pause{right:12px !important;bottom:14px !important;top:auto !important;} .dots{bottom:28px !important;} .trust-grid{grid-template-columns:1fr 1fr !important;gap:10px !important;padding:14px 0 !important;} .trust-grid span{font-size:13px !important;padding:10px 8px !important;} .section,.split-section,.page-hero,.brand-strip,.closing-cta,.legal{padding:52px 0 !important;} .services-grid,.install-grid,.mini-grid,.regions-grid,.contact-cards,.footer-grid,.form-grid,.two-col,.page-hero-grid,.brand-strip-inner,.closing-inner,.contact-layout,.snapshot-grid,.split-grid{grid-template-columns:1fr !important;} .services-grid,.install-grid,.mini-grid,.regions-grid,.contact-cards,.footer-grid,.snapshot-grid{gap:16px !important;} .services-grid > .service-card:last-child:nth-child(7){grid-column:auto !important;max-width:none !important;} .service-image{height:190px !important;min-height:190px !important;} .service-body,.install-card,.mini-card,.detail-card,.brand-board-card,.region-card,.contact-cards a,.faq-list details{padding:18px !important;} .card-actions{flex-wrap:wrap !important;} .card-actions .text-link{flex:1 1 100% !important;} .page-hero-grid,.contact-layout,.closing-inner,.brand-strip-inner,.split-grid{gap:20px !important;} .page-hero img,.split-grid img,.page-hero figure img{height:220px !important;border-radius:20px !important;} .brand-board{grid-template-columns:1fr !important;gap:16px !important;} .logo-tiles,.brand-cloud,.pill-grid,.city-grid{gap:8px !important;} .logo-tiles span,.brand-cloud span,.gallery-filter,.pill-grid span,.city-grid button{font-size:12px !important;padding:10px 12px !important;} .filter-row{justify-content:flex-start !important; flex-wrap:nowrap !important; overflow:auto !important; gap:8px !important; padding-bottom:4px !important; -webkit-overflow-scrolling:touch !important;} .filter-row::-webkit-scrollbar{display:none !important;} .gallery-grid{columns:2 150px !important;column-gap:12px !important;} .gallery-item{margin:0 0 12px !important;border-radius:18px !important;} .form,.card-form,.quote-panel{padding:20px !important;} .form input,.form select,.form textarea,.card-form input,.card-form select,.card-form textarea{padding:12px !important;font-size:16px !important;} .quote-modal{align-items:flex-start !important;padding:12px !important;} .quote-panel{width:min(100%,640px) !important;max-height:calc(100vh - 24px) !important;} .quote-close{top:12px !important;right:12px !important;left:auto !important;} .quote-panel > .eyebrow,.quote-panel > h2,.quote-panel > p{margin-left:0 !important;padding-left:0 !important;padding-right:46px !important;} .footer{padding:48px 0 78px !important;} .footer-grid{gap:22px !important;} .footer .brand{max-width:100% !important;} .foot-bottom{display:grid !important;grid-template-columns:1fr !important;gap:8px !important;text-align:left !important;} .mobile-sticky{display:grid !important;grid-template-columns:repeat(3,1fr) !important;position:fixed !important;left:0 !important;right:0 !important;bottom:0 !important;z-index:1500 !important;} .mobile-sticky a,.mobile-sticky button{min-height:50px !important;font-size:14px !important;padding:12px 8px !important;} body{padding-bottom:58px !important;} } @media (max-width: 480px), (hover: none) and (pointer: coarse){ .hero-slider{min-height:540px !important;} .hero-copy{padding:24px 16px 88px !important;} .hero-copy h1,.page-hero h1{font-size:28px !important;} .hero-trust{grid-template-columns:1fr !important;} .trust-grid{grid-template-columns:1fr 1fr !important;} .gallery-grid{columns:1 100% !important;} } /* V29 mobile performance helpers — no visual/color changes */ @supports (content-visibility: auto){ main > section:not(:first-child), .closing-cta, .footer{ content-visibility:auto; contain-intrinsic-size: 700px; } } @media (max-width: 767px){ .service-card:hover, .install-card:hover, .mini-card:hover, .detail-card:hover, .region-card:hover, .gallery-item:hover, .brand-board-card:hover{ transform:none !important; } } /* V30 MOBILE HERO CTA + DUPLICATE TRUST FIX — desktop unchanged */ /* Mobile issue: hero trust pills duplicated with trust badges below slider. Fix: keep the clean trust badges below slider, hide hero trust pills on mobile, and bring back the homepage CTA buttons in the hero. */ @media (max-width: 767px), (hover: none) and (pointer: coarse){ .home-hero .hero-trust{ display:none !important; } .home-hero .hero-copy>.cta-row{ display:grid !important; grid-template-columns:1fr !important; gap:10px !important; width:100% !important; margin-top:20px !important; } .home-hero .hero-copy>.cta-row .btn, .home-hero .hero-copy>.cta-row a, .home-hero .hero-copy>.cta-row button{ width:100% !important; justify-content:center !important; min-height:48px !important; font-size:15px !important; } .home-hero .hero-copy{ padding-bottom:96px !important; } .trust-row{ margin-top:0 !important; } } /* JS-added class version for phones using desktop-mode browser width */ html.is-mobile .home-hero .hero-trust{ display:none !important; } html.is-mobile .home-hero .hero-copy>.cta-row{ display:grid !important; grid-template-columns:1fr !important; gap:10px !important; width:100% !important; margin-top:20px !important; } html.is-mobile .home-hero .hero-copy>.cta-row .btn, html.is-mobile .home-hero .hero-copy>.cta-row a, html.is-mobile .home-hero .hero-copy>.cta-row button{ width:100% !important; justify-content:center !important; min-height:48px !important; font-size:15px !important; } html.is-mobile .home-hero .hero-copy{ padding-bottom:96px !important; } /* V31 MOBILE-ONLY HOME BUTTON — desktop design untouched */ .mobile-home-link{ display:none; } @media (max-width: 1300px), (hover: none) and (pointer: coarse){ .mobile-home-link{ display:inline-flex !important; align-items:center !important; justify-content:center !important; flex:0 0 auto !important; min-width:68px !important; min-height:44px !important; padding:11px 16px !important; margin-left:auto !important; border-radius:16px !important; font-size:14px !important; font-weight:900 !important; color:var(--orange) !important; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)) !important; border:1px solid rgba(255,255,255,.10) !important; box-shadow: 0 12px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -10px 14px rgba(0,0,0,.15) !important; text-decoration:none !important; white-space:nowrap !important; } /* Keep logo + Home + hamburger on one clean row */ .nav-inner{ gap:10px !important; } .brand{ max-width:calc(100% - 130px) !important; margin-right:0 !important; } .menu-toggle{ margin-left:0 !important; } /* Since Home is now visible on mobile, hide duplicate Home inside mobile dropdown only */ .nav-links.open > a[href="index.html"]{ display:none !important; } } html.is-mobile .mobile-home-link{ display:inline-flex !important; align-items:center !important; justify-content:center !important; flex:0 0 auto !important; min-width:68px !important; min-height:44px !important; padding:11px 16px !important; margin-left:auto !important; border-radius:16px !important; font-size:14px !important; font-weight:900 !important; color:var(--orange) !important; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)) !important; border:1px solid rgba(255,255,255,.10) !important; box-shadow: 0 12px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -10px 14px rgba(0,0,0,.15) !important; text-decoration:none !important; white-space:nowrap !important; } html.is-mobile .brand{ max-width:calc(100% - 130px) !important; } html.is-mobile .menu-toggle{ margin-left:0 !important; } html.is-mobile .nav-links.open > a[href="index.html"]{ display:none !important; } @media (max-width: 390px), (hover: none) and (pointer: coarse){ .mobile-home-link{ min-width:60px !important; padding:10px 12px !important; font-size:13px !important; } .brand{ max-width:calc(100% - 116px) !important; } html.is-mobile .brand{ max-width:calc(100% - 116px) !important; } } /* V32 MOBILE-ONLY: single Home dropdown button */ /* Desktop/computer view untouched. On mobile, hamburger becomes a Home button and opens the dropdown. */ .mobile-home-link{ display:none !important; } @media (max-width: 1300px), (hover: none) and (pointer: coarse){ .mobile-home-link{ display:none !important; } .nav-inner{ gap:10px !important; } .brand{ max-width:calc(100% - 100px) !important; margin-right:0 !important; } .menu-toggle{ display:inline-flex !important; align-items:center !important; justify-content:center !important; width:88px !important; min-width:88px !important; height:46px !important; flex:0 0 88px !important; margin-left:0 !important; padding:0 14px !important; border-radius:16px !important; font-size:14px !important; font-weight:900 !important; line-height:1 !important; color:var(--orange) !important; text-align:center !important; white-space:nowrap !important; } .menu-toggle span{ display:none !important; } .menu-toggle::before{ content:"Home"; display:inline-block; color:var(--orange); font-weight:900; line-height:1; } .menu-toggle::after{ content:"▾"; display:inline-block; margin-left:6px; color:var(--orange); font-size:12px; line-height:1; } /* Keep dropdown as the rest of menu only */ .nav-links.open > a[href="index.html"]{ display:none !important; } } html.is-mobile .mobile-home-link{ display:none !important; } html.is-mobile .brand{ max-width:calc(100% - 100px) !important; margin-right:0 !important; } html.is-mobile .menu-toggle{ display:inline-flex !important; align-items:center !important; justify-content:center !important; width:88px !important; min-width:88px !important; height:46px !important; flex:0 0 88px !important; margin-left:0 !important; padding:0 14px !important; border-radius:16px !important; font-size:14px !important; font-weight:900 !important; color:var(--orange) !important; white-space:nowrap !important; } html.is-mobile .menu-toggle span{ display:none !important; } html.is-mobile .menu-toggle::before{ content:"Home"; display:inline-block; color:var(--orange); font-weight:900; } html.is-mobile .menu-toggle::after{ content:"▾"; display:inline-block; margin-left:6px; color:var(--orange); font-size:12px; } html.is-mobile .nav-links.open > a[href="index.html"]{ display:none !important; } @media (max-width: 390px), (hover: none) and (pointer: coarse){ .brand, html.is-mobile .brand{ max-width:calc(100% - 88px) !important; } .menu-toggle, html.is-mobile .menu-toggle{ width:76px !important; min-width:76px !important; flex-basis:76px !important; padding:0 10px !important; font-size:13px !important; } } /* V33 MOBILE-ONLY HOME DROPDOWN WITH SERVICES ACCORDION — desktop untouched */ .mobile-home-dropdown{ display:none; } @media (max-width: 1300px), (hover: none) and (pointer: coarse){ .mobile-home-link{ display:none !important; } /* Home is the only visible mobile menu button */ .menu-toggle{ display:inline-flex !important; align-items:center !important; justify-content:center !important; width:88px !important; min-width:88px !important; height:46px !important; flex:0 0 88px !important; margin-left:0 !important; padding:0 14px !important; border-radius:16px !important; font-size:14px !important; font-weight:900 !important; line-height:1 !important; color:var(--orange) !important; text-align:center !important; white-space:nowrap !important; } .menu-toggle span{ display:none !important; } .menu-toggle::before{ content:"Home"; display:inline-block; color:var(--orange); font-weight:900; } .menu-toggle::after{ content:"▾"; display:inline-block; margin-left:6px; color:var(--orange); font-size:12px; } .brand{ max-width:calc(100% - 100px) !important; } /* Hide original mobile nav menu and use our clean dropdown */ .nav-links, .nav-links.open{ display:none !important; } .mobile-home-dropdown{ display:none !important; } .mobile-home-dropdown.open{ display:flex !important; position:absolute !important; top:calc(100% + 8px) !important; left:12px !important; right:12px !important; width:auto !important; max-width:calc(100vw - 24px) !important; flex-direction:column !important; align-items:stretch !important; justify-content:flex-start !important; gap:8px !important; padding:14px !important; border-radius:24px !important; max-height:calc(100vh - 105px) !important; overflow:auto !important; overscroll-behavior:contain !important; z-index:3200 !important; background:linear-gradient(180deg, rgba(17,37,66,.98), rgba(8,21,40,.98)) !important; border:1px solid rgba(255,255,255,.12) !important; box-shadow:0 24px 60px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -18px 24px rgba(0,0,0,.18) !important; } .mobile-home-dropdown > a, .mobile-service-toggle, .mobile-dropdown-quote{ width:100% !important; min-height:46px !important; padding:13px 14px !important; margin:0 !important; border-radius:16px !important; display:flex !important; align-items:center !important; justify-content:space-between !important; text-align:left !important; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)) !important; border:1px solid rgba(255,255,255,.10) !important; color:#fff !important; font-size:14px !important; font-weight:900 !important; text-decoration:none !important; box-shadow:0 10px 22px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.10), inset 0 -10px 14px rgba(0,0,0,.15) !important; } .mobile-service-toggle{ cursor:pointer !important; } .mobile-service-toggle span{ margin-left:8px !important; color:var(--orange) !important; } .mobile-service-toggle[aria-expanded="true"] span{ transform:rotate(180deg); } .mobile-service-panel{ display:none !important; padding:8px !important; border-radius:18px !important; background:rgba(255,255,255,.04) !important; border:1px solid rgba(255,255,255,.08) !important; } .mobile-service-panel.open{ display:grid !important; grid-template-columns:1fr !important; gap:7px !important; } .mobile-service-panel a{ display:flex !important; align-items:center !important; min-height:40px !important; padding:10px 12px !important; border-radius:14px !important; color:#dce8f8 !important; background:rgba(255,255,255,.045) !important; border:1px solid rgba(255,255,255,.075) !important; font-size:13px !important; font-weight:800 !important; text-decoration:none !important; } .mobile-dropdown-quote{ justify-content:center !important; background:linear-gradient(180deg,#ffae41 0%, #ff8a00 54%, #e96c00 100%) !important; color:#fff !important; } } html.is-mobile .mobile-home-link{ display:none !important; } html.is-mobile .nav-links, html.is-mobile .nav-links.open{ display:none !important; } html.is-mobile .mobile-home-dropdown{ display:none !important; } html.is-mobile .mobile-home-dropdown.open{ display:flex !important; position:absolute !important; top:calc(100% + 8px) !important; left:12px !important; right:12px !important; width:auto !important; max-width:calc(100vw - 24px) !important; flex-direction:column !important; align-items:stretch !important; gap:8px !important; padding:14px !important; border-radius:24px !important; max-height:calc(100vh - 105px) !important; overflow:auto !important; z-index:3200 !important; } html.is-mobile .mobile-service-panel{ display:none !important; } html.is-mobile .mobile-service-panel.open{ display:grid !important; grid-template-columns:1fr !important; gap:7px !important; } @media (max-width: 390px), (hover: none) and (pointer: coarse){ .brand{ max-width:calc(100% - 88px) !important; } .menu-toggle{ width:76px !important; min-width:76px !important; flex-basis:76px !important; padding:0 10px !important; font-size:13px !important; } } /* V34 MOBILE-ONLY NATIVE HOME DROPDOWN — no JS dependency, desktop untouched */ .mobile-home-details{ display:none !important; } @media (max-width: 1300px), (hover: none) and (pointer: coarse){ .site-header, .mainnav, .nav-inner{ overflow:visible !important; } .mobile-home-link, .mobile-home-dropdown{ display:none !important; } /* Hide old hamburger on mobile; use native Home details button instead */ .menu-toggle{ display:none !important; } .nav-links, .nav-links.open{ display:none !important; } .nav-inner{ position:relative !important; gap:10px !important; } .brand{ max-width:calc(100% - 96px) !important; margin-right:0 !important; } .mobile-home-details{ display:block !important; position:relative !important; flex:0 0 auto !important; margin-left:auto !important; z-index:3300 !important; } .mobile-home-details > summary{ list-style:none !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; width:88px !important; min-width:88px !important; height:46px !important; border-radius:16px !important; padding:0 14px !important; cursor:pointer !important; font-size:14px !important; font-weight:900 !important; line-height:1 !important; color:var(--orange) !important; white-space:nowrap !important; background:linear-gradient(180deg, rgba(18,39,70,.96), rgba(8,21,40,.98)) !important; border:1px solid rgba(161,186,220,.18) !important; box-shadow: 0 12px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -10px 14px rgba(0,0,0,.15) !important; } .mobile-home-details > summary::-webkit-details-marker{ display:none !important; } .mobile-home-details > summary span{ margin-left:6px !important; color:var(--orange) !important; font-size:12px !important; transition:transform .2s ease !important; } .mobile-home-details[open] > summary span{ transform:rotate(180deg) !important; } .mobile-home-menu-panel{ display:none !important; } .mobile-home-details[open] .mobile-home-menu-panel{ display:flex !important; position:absolute !important; top:calc(100% + 10px) !important; right:0 !important; width:min(330px, calc(100vw - 24px)) !important; max-height:calc(100vh - 110px) !important; overflow:auto !important; overscroll-behavior:contain !important; flex-direction:column !important; gap:8px !important; padding:14px !important; border-radius:24px !important; z-index:3400 !important; background:linear-gradient(180deg, rgba(17,37,66,.98), rgba(8,21,40,.98)) !important; border:1px solid rgba(255,255,255,.12) !important; box-shadow: 0 24px 60px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -18px 24px rgba(0,0,0,.18) !important; } .mobile-home-menu-panel > a, .mobile-service-details > summary, .mobile-dropdown-quote{ width:100% !important; min-height:46px !important; padding:13px 14px !important; margin:0 !important; border-radius:16px !important; display:flex !important; align-items:center !important; justify-content:space-between !important; text-align:left !important; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)) !important; border:1px solid rgba(255,255,255,.10) !important; color:#fff !important; font-size:14px !important; font-weight:900 !important; text-decoration:none !important; box-shadow: 0 10px 22px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.10), inset 0 -10px 14px rgba(0,0,0,.15) !important; } .mobile-service-details{ display:block !important; } .mobile-service-details > summary{ cursor:pointer !important; list-style:none !important; } .mobile-service-details > summary::-webkit-details-marker{ display:none !important; } .mobile-service-details > summary span{ margin-left:8px !important; color:var(--orange) !important; transition:transform .2s ease !important; } .mobile-service-details[open] > summary span{ transform:rotate(180deg) !important; } .mobile-service-list{ display:none !important; } .mobile-service-details[open] .mobile-service-list{ display:grid !important; grid-template-columns:1fr !important; gap:7px !important; margin-top:8px !important; padding:8px !important; border-radius:18px !important; background:rgba(255,255,255,.04) !important; border:1px solid rgba(255,255,255,.08) !important; } .mobile-service-list a{ display:flex !important; align-items:center !important; min-height:40px !important; padding:10px 12px !important; border-radius:14px !important; color:#dce8f8 !important; background:rgba(255,255,255,.045) !important; border:1px solid rgba(255,255,255,.075) !important; font-size:13px !important; font-weight:800 !important; text-decoration:none !important; } .mobile-dropdown-quote{ justify-content:center !important; background:linear-gradient(180deg,#ffae41 0%, #ff8a00 54%, #e96c00 100%) !important; color:#fff !important; } } /* Same native dropdown for phones where browser reports desktop-width but touch/mobile user-agent exists */ html.is-mobile .site-header, html.is-mobile .mainnav, html.is-mobile .nav-inner{ overflow:visible !important; } html.is-mobile .mobile-home-link, html.is-mobile .mobile-home-dropdown, html.is-mobile .menu-toggle, html.is-mobile .nav-links, html.is-mobile .nav-links.open{ display:none !important; } html.is-mobile .brand{ max-width:calc(100% - 96px) !important; margin-right:0 !important; } html.is-mobile .mobile-home-details{ display:block !important; position:relative !important; flex:0 0 auto !important; margin-left:auto !important; z-index:3300 !important; } html.is-mobile .mobile-home-menu-panel{ display:none !important; } html.is-mobile .mobile-home-details[open] .mobile-home-menu-panel{ display:flex !important; position:absolute !important; top:calc(100% + 10px) !important; right:0 !important; width:min(330px, calc(100vw - 24px)) !important; max-height:calc(100vh - 110px) !important; overflow:auto !important; flex-direction:column !important; gap:8px !important; padding:14px !important; border-radius:24px !important; z-index:3400 !important; } @media (max-width: 390px), (hover: none) and (pointer: coarse){ .brand, html.is-mobile .brand{ max-width:calc(100% - 84px) !important; } .mobile-home-details > summary{ width:76px !important; min-width:76px !important; padding:0 10px !important; font-size:13px !important; } .mobile-home-details[open] .mobile-home-menu-panel, html.is-mobile .mobile-home-details[open] .mobile-home-menu-panel{ width:min(310px, calc(100vw - 18px)) !important; } } /* V35 MOBILE-ONLY CSS CHECKBOX HOME DROPDOWN — NO JS NEEDED, DESKTOP UNTOUCHED */ .mobile-checkbox-menu{ display:none; } @media (max-width: 1300px), (hover: none) and (pointer: coarse){ .site-header, .mainnav, .nav-inner{ overflow:visible !important; } /* Hide all old mobile menu attempts */ .mobile-home-link, .mobile-home-dropdown, .mobile-home-details, .menu-toggle{ display:none !important; } /* Hide desktop nav on mobile */ .nav-links, .nav-links.open{ display:none !important; } .nav-inner{ position:relative !important; gap:10px !important; } .brand{ max-width:calc(100% - 96px) !important; margin-right:0 !important; } .mobile-checkbox-menu{ display:block !important; position:relative !important; flex:0 0 auto !important; margin-left:auto !important; z-index:3500 !important; } .mobile-menu-check, .mobile-services-check{ position:absolute !important; opacity:0 !important; pointer-events:none !important; width:1px !important; height:1px !important; } .mobile-home-control{ list-style:none !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; width:88px !important; min-width:88px !important; height:46px !important; border-radius:16px !important; padding:0 14px !important; cursor:pointer !important; font-size:14px !important; font-weight:900 !important; line-height:1 !important; color:var(--orange) !important; white-space:nowrap !important; background:linear-gradient(180deg, rgba(18,39,70,.96), rgba(8,21,40,.98)) !important; border:1px solid rgba(161,186,220,.18) !important; box-shadow: 0 12px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -10px 14px rgba(0,0,0,.15) !important; } .mobile-home-control span, .mobile-services-control span{ margin-left:6px !important; color:var(--orange) !important; font-size:12px !important; transition:transform .2s ease !important; } .mobile-menu-check:checked + .mobile-home-control span, .mobile-services-check:checked + .mobile-services-control span{ transform:rotate(180deg) !important; } .mobile-checkbox-panel{ display:none !important; } .mobile-menu-check:checked ~ .mobile-checkbox-panel{ display:flex !important; position:absolute !important; top:calc(100% + 10px) !important; right:0 !important; width:min(330px, calc(100vw - 24px)) !important; max-height:calc(100vh - 110px) !important; overflow:auto !important; overscroll-behavior:contain !important; flex-direction:column !important; gap:8px !important; padding:14px !important; border-radius:24px !important; z-index:3600 !important; background:linear-gradient(180deg, rgba(17,37,66,.98), rgba(8,21,40,.98)) !important; border:1px solid rgba(255,255,255,.12) !important; box-shadow: 0 24px 60px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -18px 24px rgba(0,0,0,.18) !important; } .mobile-checkbox-panel > a, .mobile-services-control, .mobile-dropdown-quote{ width:100% !important; min-height:46px !important; padding:13px 14px !important; margin:0 !important; border-radius:16px !important; display:flex !important; align-items:center !important; justify-content:space-between !important; text-align:left !important; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)) !important; border:1px solid rgba(255,255,255,.10) !important; color:#fff !important; font-size:14px !important; font-weight:900 !important; text-decoration:none !important; box-shadow: 0 10px 22px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.10), inset 0 -10px 14px rgba(0,0,0,.15) !important; } .mobile-services-checkbox{ width:100% !important; } .mobile-services-control{ cursor:pointer !important; } .mobile-services-panel{ display:none !important; } .mobile-services-check:checked ~ .mobile-services-panel{ display:grid !important; grid-template-columns:1fr !important; gap:7px !important; margin-top:8px !important; padding:8px !important; border-radius:18px !important; background:rgba(255,255,255,.04) !important; border:1px solid rgba(255,255,255,.08) !important; } .mobile-services-panel a{ display:flex !important; align-items:center !important; min-height:40px !important; padding:10px 12px !important; border-radius:14px !important; color:#dce8f8 !important; background:rgba(255,255,255,.045) !important; border:1px solid rgba(255,255,255,.075) !important; font-size:13px !important; font-weight:800 !important; text-decoration:none !important; } .mobile-dropdown-quote{ justify-content:center !important; background:linear-gradient(180deg,#ffae41 0%, #ff8a00 54%, #e96c00 100%) !important; color:#fff !important; } } /* JS-added class fallback for phones using desktop-mode browser width */ html.is-mobile .site-header, html.is-mobile .mainnav, html.is-mobile .nav-inner{ overflow:visible !important; } html.is-mobile .mobile-home-link, html.is-mobile .mobile-home-dropdown, html.is-mobile .mobile-home-details, html.is-mobile .menu-toggle, html.is-mobile .nav-links, html.is-mobile .nav-links.open{ display:none !important; } html.is-mobile .brand{ max-width:calc(100% - 96px) !important; margin-right:0 !important; } html.is-mobile .mobile-checkbox-menu{ display:block !important; position:relative !important; flex:0 0 auto !important; margin-left:auto !important; z-index:3500 !important; } html.is-mobile .mobile-checkbox-panel{ display:none !important; } html.is-mobile .mobile-menu-check:checked ~ .mobile-checkbox-panel{ display:flex !important; position:absolute !important; top:calc(100% + 10px) !important; right:0 !important; width:min(330px, calc(100vw - 24px)) !important; max-height:calc(100vh - 110px) !important; overflow:auto !important; flex-direction:column !important; gap:8px !important; padding:14px !important; border-radius:24px !important; z-index:3600 !important; } html.is-mobile .mobile-services-panel{ display:none !important; } html.is-mobile .mobile-services-check:checked ~ .mobile-services-panel{ display:grid !important; grid-template-columns:1fr !important; gap:7px !important; margin-top:8px !important; padding:8px !important; border-radius:18px !important; } @media (max-width: 390px), (hover: none) and (pointer: coarse){ .brand, html.is-mobile .brand{ max-width:calc(100% - 84px) !important; } .mobile-home-control{ width:76px !important; min-width:76px !important; padding:0 10px !important; font-size:13px !important; } .mobile-menu-check:checked ~ .mobile-checkbox-panel, html.is-mobile .mobile-menu-check:checked ~ .mobile-checkbox-panel{ width:min(310px, calc(100vw - 18px)) !important; } }