*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;color:#111827;background:#f7f8fa}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}.site-header{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);position:sticky;top:0;z-index:20;border-bottom:1px solid #e5e7eb}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#dc2626,#7f1d1d);color:#fff;display:grid;place-items:center;font-weight:900;letter-spacing:-1px;box-shadow:0 8px 22px rgba(220,38,38,.25)}.brand strong,.brand small{display:block}.brand strong{font-size:16px}.brand small{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#6b7280;margin-top:3px}.site-header nav{display:flex;align-items:center;gap:24px;font-size:14px;font-weight:700}.site-header nav a:hover{color:#dc2626}.nav-cta,.portal-link{padding:11px 16px;border-radius:10px}.nav-cta{background:#111827;color:white}.portal-link{border:1px solid #d1d5db;background:white;font-weight:700;cursor:pointer}.menu-btn{display:none;background:none;border:0;font-size:25px}.hero{min-height:760px;padding:95px 5vw 70px;display:grid;grid-template-columns:1fr 1.15fr;align-items:center;gap:50px;overflow:hidden;background:radial-gradient(circle at 80% 20%,#fee2e2 0,transparent 35%),linear-gradient(180deg,#fff,#f4f5f7)}.hero-copy{max-width:650px}.eyebrow{display:inline-flex;color:#dc2626;font-weight:900;letter-spacing:1.6px;text-transform:uppercase;font-size:12px;margin-bottom:16px}.hero h1{font-size:clamp(45px,5.2vw,78px);line-height:.98;letter-spacing:-4px;margin:0 0 24px}.hero h1 span{color:#dc2626}.hero-copy>p{font-size:18px;line-height:1.7;color:#4b5563}.hero-actions{display:flex;gap:14px;margin:32px 0}.btn{display:inline-flex;justify-content:center;align-items:center;border-radius:11px;padding:14px 21px;font-weight:800;border:0;cursor:pointer}.primary{background:#dc2626;color:white;box-shadow:0 12px 26px rgba(220,38,38,.2)}.secondary{background:white;border:1px solid #d1d5db}.full{width:100%}.trust-row{display:flex;gap:30px;border-top:1px solid #e5e7eb;padding-top:24px;margin-top:25px}.trust-row strong,.trust-row span{display:block}.trust-row strong{font-size:15px}.trust-row span{font-size:12px;color:#6b7280;margin-top:4px}.station-stage{position:relative;min-height:520px;background:linear-gradient(#bfdbfe,#e0f2fe 46%,#d1d5db 47%,#9ca3af 100%);border-radius:28px;overflow:hidden;box-shadow:0 30px 80px rgba(17,24,39,.22);perspective:1000px}.sky-glow{position:absolute;width:250px;height:250px;border-radius:50%;background:rgba(255,255,255,.8);filter:blur(10px);right:-50px;top:-80px}.station{position:absolute;left:7%;right:7%;bottom:12%;height:62%;transform:rotateY(-7deg)}.canopy{position:absolute;left:0;right:23%;top:2%;height:78px;background:#b91c1c;border-bottom:18px solid #fff;box-shadow:0 12px 24px rgba(0,0,0,.18);z-index:3}.canopy-brand{color:#fff;font-size:18px;font-weight:900;letter-spacing:1px;padding:17px 25px}.canopy-lights{position:absolute;left:5%;right:5%;bottom:-14px;display:flex;justify-content:space-around}.canopy-lights i{width:28px;height:8px;background:#fff;border-radius:50%;box-shadow:0 0 18px #fff}.columns{position:absolute;top:70px;left:5%;right:30%;display:flex;justify-content:space-around}.columns span{width:17px;height:170px;background:linear-gradient(90deg,#d1d5db,#fff,#9ca3af)}.pumps{position:absolute;top:130px;left:7%;right:31%;display:flex;justify-content:space-around;z-index:2}.pump{height:98px;width:53px;background:#f9fafb;border:5px solid #374151;border-radius:4px;position:relative;box-shadow:0 7px 12px rgba(0,0,0,.22)}.pump b{display:block;background:#dc2626;color:#fff;text-align:center;padding:5px;font-size:11px}.pump i{display:block;width:30px;height:17px;background:#111827;margin:7px auto;border-radius:2px}.store{position:absolute;right:0;top:78px;width:31%;height:150px;background:#ede9e3;border-top:16px solid #374151;box-shadow:0 12px 20px rgba(0,0,0,.2)}.store-sign{text-align:center;font-size:9px;font-weight:900;padding:10px 2px}.windows{position:absolute;left:7%;right:32%;bottom:0;height:82px;background:repeating-linear-gradient(90deg,#1f2937 0 35px,#d1d5db 35px 39px)}.door{position:absolute;right:7%;bottom:0;width:20%;height:82px;background:#111827}.price-sign{position:absolute;right:2%;bottom:-20px;width:100px;background:#111827;color:#fff;padding:10px;text-align:center;border:5px solid #d1d5db;box-shadow:0 9px 20px rgba(0,0,0,.25)}.price-sign small,.price-sign span{display:block;font-size:7px;letter-spacing:1px}.price-sign strong{display:block;color:#fbbf24;font-size:22px;margin:2px}.brand-cycle{position:absolute;left:20px;bottom:18px;background:rgba(17,24,39,.9);color:#fff;border-radius:12px;padding:12px 16px;display:flex;gap:8px;font-size:12px}.brand-cycle strong{color:#fca5a5}.logo-strip{background:#111827;color:#fff;padding:22px 4vw;text-align:center;display:flex;flex-wrap:wrap;justify-content:center;gap:28px;font-weight:900;letter-spacing:.5px}.logo-strip span{opacity:.75}.trademark-note{width:100%;font-size:9px;font-weight:400;color:#9ca3af;margin:2px 0 0}.section{padding:110px 5vw}.section-heading{max-width:740px;margin-bottom:45px}.section-heading h2,.quote-copy h2,.career-copy h2{font-size:clamp(34px,4vw,55px);line-height:1.05;letter-spacing:-2px;margin:0 0 17px}.section-heading p,.quote-copy p,.career-copy p{color:#6b7280;line-height:1.7}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.service-grid article{background:white;border:1px solid #e5e7eb;border-radius:18px;padding:29px;transition:.25s}.service-grid article:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(17,24,39,.08)}.service-grid article span{color:#dc2626;font-size:12px;font-weight:900}.service-grid h3{font-size:20px;margin:18px 0 10px}.service-grid p{color:#6b7280;line-height:1.6;font-size:14px}.work-section{padding:110px 5vw;background:#111827}.light{color:white}.light p{color:#9ca3af}.project-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:20px}.project-card{height:450px;border-radius:22px;overflow:hidden;position:relative;background-size:cover;background-position:center;box-shadow:inset 0 -170px 100px rgba(0,0,0,.78)}.p1{background-image:linear-gradient(135deg,#ef4444,#111827)}.p2{background-image:linear-gradient(135deg,#f59e0b,#7c2d12)}.p3{background-image:linear-gradient(135deg,#3b82f6,#172554)}.project-card:before{content:"";position:absolute;inset:12% 8% 27%;border:20px solid rgba(255,255,255,.9);border-bottom-width:8px;transform:perspective(500px) rotateX(9deg)}.project-card div{position:absolute;left:25px;right:25px;bottom:24px;color:white}.project-card span{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:#fecaca}.project-card h3{font-size:24px;margin:8px 0}.project-card p{font-size:13px;line-height:1.5;color:#d1d5db}.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.timeline div{position:relative}.timeline b{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#dc2626;color:#fff;margin-bottom:22px}.timeline div:not(:last-child):after{content:"";position:absolute;top:21px;left:50px;right:-10px;height:2px;background:#e5e7eb}.timeline h3{font-size:18px}.timeline p{font-size:14px;line-height:1.6;color:#6b7280}.split-section,.quote-section{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;padding:110px 5vw;align-items:start}.split-section{background:#fff}.career-copy ul{padding-left:20px;line-height:2;color:#374151}.form-card{background:#fff;border:1px solid #e5e7eb;border-radius:22px;padding:30px;box-shadow:0 20px 50px rgba(17,24,39,.08)}.form-card h3{margin:0 0 25px;font-size:24px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-card label{display:block;font-size:12px;font-weight:800;color:#374151;margin-bottom:14px}.form-card input,.form-card select,.form-card textarea{width:100%;margin-top:8px;border:1px solid #d1d5db;border-radius:10px;padding:13px;background:#fff;outline:none}.form-card input:focus,.form-card select:focus,.form-card textarea:focus{border-color:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.08)}.check{display:flex!important;gap:8px;align-items:center}.check input{width:auto;margin:0}.form-message{font-size:12px;color:#15803d;text-align:center}.quote-section{background:#20242c;color:white}.quote-copy p{color:#cbd5e1}.contact-placeholder{display:flex;flex-direction:column;gap:8px;margin-top:30px;color:#cbd5e1}.contact-placeholder strong{color:white}.dark-form{color:#111827}footer{display:flex;justify-content:space-between;align-items:center;padding:32px 5vw;background:#0b0e14;color:#9ca3af;font-size:12px}.footer-brand strong{color:white}.footer-brand .brand-mark{width:36px;height:36px}.footer-brand small{color:#6b7280}.modal{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:100;display:none;place-items:center;padding:20px}.modal.open{display:grid}.modal-shell{width:min(1180px,96vw);height:min(780px,92vh);background:#f7f8fa;border-radius:24px;position:relative;overflow:hidden}.close-modal{position:absolute;right:18px;top:14px;border:0;background:white;width:38px;height:38px;border-radius:50%;font-size:25px;z-index:5;cursor:pointer;box-shadow:0 5px 15px rgba(0,0,0,.1)}.login-view{max-width:430px;margin:90px auto;text-align:center;padding:30px}.large{width:65px;height:65px;margin:auto;font-size:23px}.login-view h2{font-size:30px;margin-bottom:10px}.login-view p{color:#6b7280;font-size:14px;line-height:1.6}.login-view label{text-align:left;display:block;font-size:12px;font-weight:800;margin:15px 0}.login-view input{width:100%;padding:13px;margin-top:7px;border:1px solid #d1d5db;border-radius:10px}.login-view small{display:block;margin-top:15px;color:#6b7280}.login-error{color:#dc2626!important}.hidden{display:none!important}.dashboard-view{display:grid;grid-template-columns:235px 1fr;height:100%}.dashboard-view aside{background:#111827;color:white;padding:28px 17px;display:flex;flex-direction:column}.portal-brand{margin:0 8px 34px}.portal-brand small{color:#9ca3af}.dash-tab,.logout{border:0;background:transparent;color:#cbd5e1;text-align:left;padding:13px 15px;border-radius:9px;margin:2px 0;cursor:pointer;font-size:13px;font-weight:700}.dash-tab.active,.dash-tab:hover{background:#dc2626;color:white}.logout{margin-top:auto;border-top:1px solid #374151;border-radius:0}.dashboard-content{padding:36px;overflow:auto}.dash-panel{display:none}.dash-panel.active{display:block}.dash-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.dash-heading small{font-size:10px;letter-spacing:1.6px;color:#dc2626;font-weight:900}.dash-heading h2{font-size:31px;margin:5px 0 0}.status-pill,.mini-btn{background:#fff;border:1px solid #e5e7eb;border-radius:9px;padding:9px 12px;font-size:11px;font-weight:800}.mini-btn{cursor:pointer}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}.metric-grid>div{background:white;border:1px solid #e5e7eb;border-radius:14px;padding:19px}.metric-grid span,.metric-grid small,.metric-grid strong{display:block}.metric-grid span{font-size:11px;color:#6b7280;font-weight:700}.metric-grid strong{font-size:25px;margin:10px 0 6px}.metric-grid small{font-size:10px;color:#6b7280}.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.dash-card{background:white;border:1px solid #e5e7eb;border-radius:14px;padding:20px;margin-top:18px}.card-title{display:flex;justify-content:space-between;align-items:center}.card-title h3,.dash-card h3{font-size:16px;margin:0 0 14px}.card-title span{font-size:10px;color:#6b7280}.alert-row{padding:13px;border-left:4px solid #3b82f6;background:#f8fafc;margin:8px 0;border-radius:7px}.alert-row b,.alert-row span{display:block;font-size:11px}.alert-row span{color:#6b7280;margin-top:4px}.alert-row.urgent{border-color:#dc2626}.alert-row.warning{border-color:#f59e0b}.bars{height:190px;display:flex;align-items:end;gap:16px;padding:20px 10px 25px}.bars i{flex:1;background:linear-gradient(#ef4444,#991b1b);border-radius:5px 5px 0 0;position:relative;min-height:20px}.bars i span{position:absolute;bottom:-19px;left:50%;transform:translateX(-50%);font-style:normal;font-size:9px;color:#6b7280}.table-wrap{overflow:auto;background:white;border:1px solid #e5e7eb;border-radius:14px}table{width:100%;border-collapse:collapse;min-width:650px}th,td{text-align:left;padding:15px;border-bottom:1px solid #e5e7eb;font-size:12px}th{font-size:10px;text-transform:uppercase;color:#6b7280;background:#f9fafb}.tag{font-size:9px;padding:6px 8px;border-radius:20px;font-weight:900}.install,.new{background:#fee2e2;color:#b91c1c}.approval,.pending{background:#fef3c7;color:#92400e}.scheduled,.contacted{background:#dbeafe;color:#1d4ed8}.paid,.quoted{background:#dcfce7;color:#15803d}.folder-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.folder-grid div{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:22px;font-size:25px}.folder-grid strong,.folder-grid span{display:block}.folder-grid strong{font-size:13px;margin-top:18px}.folder-grid span{font-size:10px;color:#6b7280;margin-top:5px}.upload input{display:none}.file-list{list-style:none;padding:0;margin:0}.file-list li{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #e5e7eb;font-size:12px}.file-list small{color:#6b7280}@media(max-width:950px){.site-header nav{display:none;position:absolute;top:82px;left:0;right:0;background:white;padding:20px;flex-direction:column;border-bottom:1px solid #e5e7eb}.site-header nav.open{display:flex}.menu-btn{display:block}.hero,.split-section,.quote-section{grid-template-columns:1fr}.hero{padding-top:60px}.station-stage{min-height:450px}.service-grid{grid-template-columns:1fr 1fr}.project-grid{grid-template-columns:1fr}.project-card{height:350px}.timeline{grid-template-columns:1fr 1fr}.timeline div:after{display:none}.dashboard-view{grid-template-columns:180px 1fr}.metric-grid{grid-template-columns:1fr 1fr}.folder-grid{grid-template-columns:1fr 1fr}}@media(max-width:650px){.brand small{display:none}.hero h1{letter-spacing:-2px}.trust-row{flex-wrap:wrap}.service-grid,.timeline,.form-grid{grid-template-columns:1fr}.station-stage{min-height:340px}.station{transform:scale(.82);transform-origin:center bottom;left:-5%;right:-5%}.project-card{height:310px}.split-section,.quote-section,.section,.work-section{padding:75px 20px}.dashboard-view{display:block}.dashboard-view aside{height:auto;flex-direction:row;overflow:auto;padding:12px}.portal-brand,.logout{display:none}.dash-tab{white-space:nowrap}.dashboard-content{padding:20px}.metric-grid,.dash-grid,.folder-grid{grid-template-columns:1fr}.modal-shell{height:95vh}footer{flex-direction:column;gap:18px;text-align:center}}\n.brand-logo-section{background:#0f131a;padding:24px 3vw 18px;overflow:hidden}.brand-logo-track{display:flex;gap:16px;justify-content:center;align-items:stretch;flex-wrap:wrap}.brand-logo-card{width:112px;height:82px;background:#fff;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px;box-shadow:0 8px 20px rgba(0,0,0,.18)}.brand-logo-card img{width:54px;height:42px;object-fit:contain}.brand-logo-card span{font-size:10px;color:#374151;font-weight:800}.brand-logo-card.custom-logo b{width:44px;height:44px;border-radius:12px;background:#dc2626;color:#fff;display:grid;place-items:center}.brand-logo-section .trademark-note{text-align:center;color:#8b95a5;margin-top:14px}.live-build-section{padding:100px 5vw;background:#111827}.build-scene{height:610px;border-radius:26px;overflow:hidden;position:relative;background:#222;box-shadow:0 35px 70px rgba(0,0,0,.38)}.photo-layer{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1s}.photo-layer.active{opacity:1}.photo-one{background-image:linear-gradient(180deg,rgba(12,30,58,.15),rgba(12,30,58,.45)),radial-gradient(circle at 75% 18%,#fef3c7 0 7%,transparent 8%),linear-gradient(#8ec5e8 0 47%,#59636e 48% 63%,#30343b 64%)}.photo-two{background-image:linear-gradient(180deg,rgba(15,23,42,.1),rgba(15,23,42,.5)),radial-gradient(circle at 20% 15%,#fdba74 0 7%,transparent 8%),linear-gradient(#6b8fb1 0 47%,#4b5563 48% 63%,#20242b 64%)}.scene-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,7,18,.18),rgba(3,7,18,.35) 55%,rgba(3,7,18,.75))}.animated-canopy{position:absolute;left:9%;right:9%;top:22%;height:100px;background:#f8fafc;border-bottom:20px solid #d1d5db;box-shadow:0 15px 30px rgba(0,0,0,.35);overflow:hidden}.panel-track{position:absolute;inset:0;display:flex}.panel-track span{flex:1;background:linear-gradient(90deg,#991b1b,#dc2626,#b91c1c);transform:translateY(-100%);animation:installPanel 8s infinite}.panel-track span:nth-child(2){animation-delay:.6s}.panel-track span:nth-child(3){animation-delay:1.2s}.panel-track span:nth-child(4){animation-delay:1.8s}.panel-track span:nth-child(5){animation-delay:2.4s}@keyframes installPanel{0%,12%{transform:translateY(-100%)}35%,82%{transform:translateY(0)}100%{transform:translateY(-100%)}}.finished-brand{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:14px;color:#fff;z-index:2;opacity:0;animation:brandReveal 8s infinite}.finished-brand img{width:54px;height:54px;object-fit:contain;background:white;border-radius:50%;padding:5px}.finished-brand strong{font-size:23px;letter-spacing:1px}@keyframes brandReveal{0%,42%{opacity:0;transform:scale(.9)}55%,88%{opacity:1;transform:scale(1)}100%{opacity:0}}.lift{position:absolute;bottom:95px;width:110px;height:280px;animation:liftMove 8s ease-in-out infinite}.lift-one{left:15%}.lift-two{right:16%;animation-delay:1.2s}.lift .base{position:absolute;bottom:0;left:10px;width:90px;height:35px;background:#f59e0b;border-radius:8px}.lift .arm{position:absolute;bottom:25px;left:47px;width:15px;height:180px;background:#fbbf24;transform-origin:bottom;transform:rotate(8deg)}.lift .basket{position:absolute;left:18px;top:35px;width:72px;height:45px;border:7px solid #fbbf24;background:rgba(245,158,11,.25)}.worker{position:absolute;width:20px;height:38px;left:20px;bottom:0;background:#f97316;border-radius:7px 7px 2px 2px}.worker:before{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:#f5c7a9;left:2px;top:-13px;border-top:5px solid #facc15}@keyframes liftMove{0%,100%{transform:translateY(75px)}30%,75%{transform:translateY(0)}}.ground-worker{position:absolute;bottom:75px;width:24px;height:55px;background:#f97316;border-radius:8px}.ground-worker:before{content:'';position:absolute;width:19px;height:19px;border-radius:50%;background:#f5c7a9;left:2px;top:-16px;border-top:6px solid #facc15}.worker-a{left:43%;animation:walkWorker 8s linear infinite}.worker-b{left:58%;animation:walkWorker2 8s linear infinite}@keyframes walkWorker{0%{transform:translateX(-120px)}50%{transform:translateX(80px)}100%{transform:translateX(-120px)}}@keyframes walkWorker2{0%{transform:translateX(100px)}50%{transform:translateX(-100px)}100%{transform:translateX(100px)}}.spark{position:absolute;color:#fff59d;font-size:28px;opacity:0;animation:spark 1.2s infinite}.spark-a{left:27%;top:25%}.spark-b{right:28%;top:27%;animation-delay:.45s}@keyframes spark{0%,65%,100%{opacity:0;transform:scale(.4)}75%{opacity:1;transform:scale(1.2)}}.build-caption{position:absolute;left:25px;right:25px;bottom:22px;background:rgba(15,23,42,.9);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:16px 20px;color:#fff;display:flex;justify-content:space-between;align-items:center}.build-caption span{font-weight:800}.build-caption strong{color:#fca5a5;font-size:21px}@media(max-width:650px){.build-scene{height:430px}.animated-canopy{left:4%;right:4%;top:23%;height:78px}.finished-brand strong{font-size:14px}.lift{transform:scale(.72);transform-origin:bottom}.lift-one{left:2%}.lift-two{right:2%}.brand-logo-card{width:92px}}
/* Local uploaded-logo upgrade */
.brand-logo-card img{max-width:82px;max-height:50px;width:auto;height:auto}.finished-brand img{object-fit:contain;border-radius:10px}.build-scene:before{content:'';position:absolute;left:4%;right:4%;bottom:62px;height:145px;background:linear-gradient(90deg,transparent 0 5%,#d6d3d1 5% 22%,transparent 22% 29%,#e7e5e4 29% 48%,transparent 48% 57%,#d6d3d1 57% 78%,transparent 78%);clip-path:polygon(0 30%,12% 30%,12% 0,38% 0,38% 30%,54% 30%,54% 7%,83% 7%,83% 30%,100% 30%,100% 100%,0 100%);opacity:.92}.build-scene:after{content:'';position:absolute;left:0;right:0;bottom:0;height:110px;background:repeating-linear-gradient(90deg,#252a31 0 110px,#292f36 110px 220px);border-top:4px solid #9ca3af}.animated-canopy,.lift,.ground-worker,.spark,.build-caption{z-index:3}.build-caption{z-index:5}.brand-logo-card{transition:transform .25s,box-shadow .25s}.brand-logo-card:hover{transform:translateY(-6px) scale(1.04);box-shadow:0 18px 32px rgba(0,0,0,.3)}
/* Realistic construction animation v2 */
.real-build-scene{height:660px;border-radius:28px;overflow:hidden;position:relative;background:#8897a4;box-shadow:0 38px 90px rgba(0,0,0,.42);isolation:isolate;perspective:1100px}.real-build-scene:after{content:"";position:absolute;left:0;right:0;bottom:0;height:185px;background:linear-gradient(180deg,#5d6267,#34393e 65%,#282c30);border-top:3px solid #aeb4b9;z-index:0}.real-sky{position:absolute;inset:0 0 39%;background:linear-gradient(180deg,#6d92b7 0%,#a9c6dc 62%,#d8d6cc 100%)}.real-sky:after{content:"";position:absolute;width:130px;height:130px;border-radius:50%;right:9%;top:8%;background:radial-gradient(circle,#fff9d9 0 22%,#ffd46b 25%,rgba(255,218,111,.2) 57%,transparent 70%);filter:blur(.2px)}.cloud{position:absolute;width:150px;height:26px;border-radius:50%;background:rgba(255,255,255,.48);filter:blur(7px);animation:cloudDrift 28s linear infinite}.cloud:before,.cloud:after{content:"";position:absolute;border-radius:50%;background:inherit}.cloud:before{width:70px;height:48px;left:26px;bottom:0}.cloud:after{width:82px;height:54px;right:20px;bottom:-2px}.cloud-one{left:-180px;top:16%}.cloud-two{left:-250px;top:31%;transform:scale(.72);animation-delay:-13s}@keyframes cloudDrift{to{transform:translateX(1250px)}}.distant-line{position:absolute;left:0;right:0;bottom:39%;height:75px;background:linear-gradient(165deg,transparent 0 12%,#5a665c 12% 16%,transparent 16% 21%,#45534c 21% 29%,transparent 29% 37%,#657064 37% 45%,transparent 45% 52%,#4c5a51 52% 62%,transparent 62% 68%,#59665d 68% 76%,transparent 76%);opacity:.7}.site-store{position:absolute;right:5%;bottom:162px;width:34%;height:205px;background:linear-gradient(90deg,#dad7cf,#f4f0e7 45%,#c8c4bc);border-top:20px solid #383d42;box-shadow:0 19px 30px rgba(0,0,0,.33);z-index:1;transform:skewY(-1deg)}.store-roof{position:absolute;left:-3%;right:-3%;top:-33px;height:16px;background:#22272b;box-shadow:0 8px 12px rgba(0,0,0,.25)}.store-copy{height:43px;padding:13px 20px;text-align:center;font-size:12px;letter-spacing:2px;font-weight:900;color:#262b2f}.glass{position:absolute;bottom:0;height:119px;background:linear-gradient(150deg,#243849,#18242d 60%,#31495a);border:6px solid #b8bec2;box-shadow:inset 18px 0 30px rgba(255,255,255,.06)}.glass:after{content:"";position:absolute;left:9%;right:9%;top:14%;height:5px;background:rgba(255,255,255,.45);transform:skewY(-17deg)}.glass-a{left:5%;width:34%}.glass-b{left:41%;width:31%}.store-door{position:absolute;right:5%;bottom:0;width:20%;height:128px;background:linear-gradient(140deg,#1b2c38,#101920);border:6px solid #aeb5ba}.real-canopy{position:absolute;left:5%;right:28%;top:20%;height:116px;z-index:5;transform:rotateY(-3deg) rotateX(1deg);filter:drop-shadow(0 20px 16px rgba(0,0,0,.38))}.canopy-top{position:absolute;inset:0;background:linear-gradient(180deg,#f7f7f3,#c8cac9 52%,#a3a8aa);clip-path:polygon(1% 0,99% 0,100% 18%,98% 28%,2% 28%,0 17%)}.old-fascia{position:absolute;left:1%;right:1%;top:27%;height:66px;background:repeating-linear-gradient(90deg,#5f6466 0 75px,#4c5153 75px 79px);box-shadow:inset 0 -10px 18px rgba(0,0,0,.3);animation:oldFascia 12s infinite}.old-fascia:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 0 15%,rgba(255,255,255,.14) 16%,transparent 18% 46%,rgba(0,0,0,.2) 48%,transparent 52%)}@keyframes oldFascia{0%,16%{opacity:1;clip-path:inset(0)}28%,100%{opacity:0;clip-path:inset(0 0 0 100%)}}.new-fascia{position:absolute;left:1%;right:1%;top:27%;height:66px;display:flex;overflow:hidden;background:#7b1014}.new-fascia span{flex:1;background:linear-gradient(100deg,#88171a,#c7252b 45%,#92171b);border-right:2px solid rgba(255,255,255,.15);transform:translateY(-115%);animation:realPanelInstall 12s cubic-bezier(.36,.05,.25,1) infinite}.new-fascia span:nth-child(2){animation-delay:.35s}.new-fascia span:nth-child(3){animation-delay:.7s}.new-fascia span:nth-child(4){animation-delay:1.05s}.new-fascia span:nth-child(5){animation-delay:1.4s}.new-fascia span:nth-child(6){animation-delay:1.75s}@keyframes realPanelInstall{0%,20%{transform:translateY(-115%)}42%,91%{transform:translateY(0)}100%{transform:translateY(-115%)}}.canopy-logo{position:absolute;inset:30% 0 auto;height:58px;display:flex;align-items:center;justify-content:center;gap:16px;z-index:4;opacity:0;animation:realLogoReveal 12s infinite}.canopy-logo img{max-width:56px;max-height:50px;object-fit:contain;background:#fff;border-radius:9px;padding:4px;filter:drop-shadow(0 4px 4px rgba(0,0,0,.25))}.canopy-logo strong{font-size:23px;letter-spacing:2.4px;color:#fff;text-shadow:0 2px 5px rgba(0,0,0,.5)}@keyframes realLogoReveal{0%,50%{opacity:0;transform:scale(.93)}59%,91%{opacity:1;transform:scale(1)}100%{opacity:0}}.real-lights{position:absolute;left:4%;right:4%;top:91%;display:flex;justify-content:space-around}.real-lights i{width:30px;height:8px;border-radius:50%;background:#f8fafc;box-shadow:0 0 14px 4px rgba(255,255,235,.75);animation:lightOn 12s infinite}@keyframes lightOn{0%,64%{opacity:.15;box-shadow:none}72%,94%{opacity:1}100%{opacity:.15}}.real-columns{position:absolute;left:9%;right:34%;top:31%;bottom:152px;display:flex;justify-content:space-around;z-index:2}.real-columns i{width:23px;background:linear-gradient(90deg,#949a9e,#f0f1ee 42%,#b8bec1 70%,#777d80);box-shadow:8px 8px 10px rgba(0,0,0,.2);transform:skewY(-1deg)}.real-pumps{position:absolute;left:10%;right:35%;bottom:145px;height:145px;display:flex;justify-content:space-around;z-index:4}.real-pump{width:68px;height:126px;background:linear-gradient(90deg,#eceeed,#fff 50%,#c4c8ca);border:5px solid #343a3e;border-radius:7px 7px 3px 3px;box-shadow:9px 12px 13px rgba(0,0,0,.3);position:relative}.real-pump b{position:absolute;top:-23px;left:19px;width:28px;height:23px;padding:5px;text-align:center;background:#252a2f;color:#fff;font-size:11px;border-radius:4px 4px 0 0}.real-pump span{position:absolute;left:12px;right:12px;top:18px;height:30px;background:linear-gradient(#0c1720,#263744);border:3px solid #5d676e}.real-pump small{position:absolute;left:7px;right:7px;top:60px;text-align:center;background:#b91c1c;color:#fff;padding:5px 2px;font-size:7px;font-weight:900}.real-pump em{position:absolute;width:13px;height:44px;right:-16px;top:26px;border:5px solid #171a1d;border-left:0;border-radius:0 15px 15px 0}.service-truck{position:absolute;right:3%;bottom:66px;width:220px;height:108px;z-index:6;animation:truckArrive 12s ease-in-out infinite}.truck-cab{position:absolute;left:0;bottom:18px;width:78px;height:64px;background:linear-gradient(110deg,#f5f5f4,#bfc4c7);clip-path:polygon(0 26%,20% 0,76% 0,100% 34%,100% 100%,0 100%);border-bottom:7px solid #9b1c20}.truck-cab:after{content:"";position:absolute;left:21px;top:10px;width:37px;height:26px;background:#2c4658;clip-path:polygon(18% 0,80% 0,100% 100%,0 100%)}.truck-box{position:absolute;right:0;bottom:18px;width:145px;height:85px;background:linear-gradient(90deg,#f5f5f4,#d7dbdc);border-bottom:8px solid #a61f24;color:#991b1b;font-size:13px;line-height:1.1;letter-spacing:1.3px;font-weight:900;text-align:center;padding-top:24px;box-shadow:8px 8px 16px rgba(0,0,0,.22)}.service-truck>i{position:absolute;bottom:0;width:34px;height:34px;border-radius:50%;background:#111;border:8px solid #343434}.service-truck>i:nth-last-child(2){left:35px}.service-truck>i:last-child{right:25px}@keyframes truckArrive{0%,7%{transform:translateX(330px)}19%,92%{transform:translateX(0)}100%{transform:translateX(330px)}}.boom-lift{position:absolute;width:190px;height:350px;bottom:74px;z-index:7;filter:drop-shadow(8px 12px 8px rgba(0,0,0,.3));animation:boomLift 12s ease-in-out infinite}.boom-left{left:2%}.boom-right{left:48%;transform:scaleX(-1);animation-delay:.7s}.lift-wheel{position:absolute;bottom:0;width:34px;height:34px;border-radius:50%;background:#171717;border:8px solid #3d4144;z-index:5}.w1{left:27px}.w2{left:102px}.lift-chassis{position:absolute;left:18px;bottom:22px;width:135px;height:43px;border-radius:9px;background:linear-gradient(#f6bc1a,#c88800);border-bottom:6px solid #976600}.boom-arm{position:absolute;left:78px;bottom:49px;width:17px;background:linear-gradient(90deg,#d99900,#ffd43d 45%,#b77900);transform-origin:bottom center}.arm-one{height:170px;transform:rotate(15deg)}.arm-two{height:146px;bottom:203px;left:120px;transform:rotate(-19deg)}.lift-basket{position:absolute;left:118px;top:5px;width:76px;height:48px;border:8px solid #e6a500;background:rgba(255,191,0,.12)}.real-worker,.ground-installer{position:relative;width:25px;height:55px}.real-worker{position:absolute;left:20px;bottom:0}.real-worker i,.ground-installer i{position:absolute;width:18px;height:20px;left:3px;top:-18px;border-radius:50% 50% 43% 43%;background:#aa7656;border-top:7px solid #f5c516}.real-worker b,.ground-installer b{position:absolute;inset:0;background:linear-gradient(90deg,#ff7a16,#ff9a2d);border-radius:7px 7px 3px 3px}.real-worker b:after,.ground-installer b:after{content:"";position:absolute;left:0;right:0;top:15px;height:7px;background:#f5f5dc;box-shadow:0 10px 0 #f5f5dc}.real-worker span,.ground-installer span{position:absolute;left:3px;right:3px;bottom:-20px;height:25px;border-left:7px solid #27313a;border-right:7px solid #27313a}@keyframes boomLift{0%,14%,100%{transform:translateY(115px)}35%,88%{transform:translateY(0)}}.boom-right{animation-name:boomLiftRight}@keyframes boomLiftRight{0%,14%,100%{transform:scaleX(-1) translateY(115px)}35%,88%{transform:scaleX(-1) translateY(0)}}.ground-installer{position:absolute;bottom:96px;z-index:8;filter:drop-shadow(3px 5px 3px rgba(0,0,0,.35))}.installer-one{left:35%;animation:installerWalkOne 12s ease-in-out infinite}.installer-two{left:62%;animation:installerWalkTwo 12s ease-in-out infinite}@keyframes installerWalkOne{0%,15%{transform:translateX(-130px)}43%,66%{transform:translateX(40px)}88%,100%{transform:translateX(-20px)}}@keyframes installerWalkTwo{0%,18%{transform:translateX(145px)}47%,70%{transform:translateX(-35px)}100%{transform:translateX(20px)}}.panel-cart{position:absolute;left:39%;bottom:78px;width:130px;height:52px;background:#60676b;border:5px solid #2d3337;z-index:6;animation:cartMove 12s infinite}.panel-cart:before,.panel-cart:after{content:"";position:absolute;bottom:-15px;width:22px;height:22px;border-radius:50%;background:#151719;border:5px solid #464c50}.panel-cart:before{left:12px}.panel-cart:after{right:12px}.panel-cart span{position:absolute;bottom:44px;width:16px;height:112px;background:linear-gradient(90deg,#8d1519,#d22c31,#8a1116);border:2px solid rgba(255,255,255,.3);transform:skewX(-7deg)}.panel-cart span:nth-child(1){left:28px}.panel-cart span:nth-child(2){left:52px}.panel-cart span:nth-child(3){left:76px}@keyframes cartMove{0%,12%{transform:translateX(-180px)}36%,82%{transform:translateX(0)}100%{transform:translateX(110px)}}.cones{position:absolute;left:4%;right:3%;bottom:49px;display:flex;justify-content:space-between;z-index:8}.cones i{width:22px;height:39px;background:linear-gradient(75deg,transparent 0 25%,#f97316 26% 74%,transparent 75%);border-bottom:7px solid #e5e7eb;clip-path:polygon(50% 0,76% 78%,100% 78%,100% 100%,0 100%,0 78%,24% 78%)}.work-sparks{position:absolute;width:8px;height:8px;border-radius:50%;background:#fff7b2;z-index:9;opacity:0;box-shadow:0 -18px 0 #ffd849,15px -7px 0 #fff,-13px -10px 0 #ffb000,8px 13px 0 #fff;animation:weldSpark 1.3s infinite}.spark-one{left:24%;top:28%}.spark-two{left:67%;top:31%;animation-delay:.55s}@keyframes weldSpark{0%,62%,100%{opacity:0;transform:scale(.2)}68%{opacity:1;transform:scale(1.2)}82%{opacity:.5;transform:scale(.55)}}.site-shadow{position:absolute;left:4%;right:19%;bottom:123px;height:38px;background:rgba(0,0,0,.33);filter:blur(12px);border-radius:50%;z-index:1}.real-build-scene .build-caption{z-index:20;bottom:18px;left:22px;right:22px;background:rgba(11,15,19,.92);backdrop-filter:blur(10px);display:grid;grid-template-columns:minmax(180px,1fr) minmax(160px,2fr) 58px;gap:20px}.progress-rail{height:8px;border-radius:20px;background:#363c42;overflow:hidden}.progress-rail i{display:block;height:100%;width:15%;background:linear-gradient(90deg,#dc2626,#fb7185);border-radius:inherit;transition:width .65s ease}.real-build-scene .build-caption strong{text-align:right}@media(max-width:800px){.real-build-scene{height:520px}.real-canopy{left:3%;right:11%;top:19%;transform:scale(.83);transform-origin:left top}.site-store{right:-7%;width:42%;height:175px}.real-columns{right:25%;top:30%}.real-pumps{right:27%;transform:scale(.75);transform-origin:center bottom}.boom-lift{transform:scale(.62);transform-origin:bottom left}.boom-left{left:-3%}.boom-right{left:44%}.service-truck{transform:scale(.7);transform-origin:right bottom}.ground-installer{transform:scale(.75)}.panel-cart{transform:scale(.7)}.real-build-scene .build-caption{grid-template-columns:1fr 50px}.progress-rail{grid-column:1/-1;grid-row:2}.real-build-scene .build-caption{gap:8px 14px}.cones{bottom:50px}}@media(max-width:520px){.real-build-scene{height:430px}.real-canopy{right:-20%;transform:scale(.66)}.site-store{right:-18%;width:50%;height:145px;bottom:126px}.real-columns{top:28%;bottom:120px}.real-pumps{bottom:112px;left:4%;right:18%;transform:scale(.56)}.boom-lift{transform:scale(.47)}.boom-right{left:40%}.service-truck{transform:scale(.48);bottom:50px}.ground-installer,.panel-cart{display:none}.real-build-scene .build-caption{font-size:11px}.real-build-scene .build-caption strong{font-size:16px}}
/* Premium homepage recreated from the approved visual */
.legacy-header,.legacy-hero,.legacy-brand-strip{display:none!important}
.premium-cover{position:relative;width:100%;background:#05080b;overflow:hidden;line-height:0}
.premium-cover>img{display:block;width:100%;height:auto;max-width:none;user-select:none;-webkit-user-drag:none}
.cover-hotspot{position:absolute;display:block;z-index:3;cursor:pointer;border:1px solid transparent;transition:.2s ease}
.cover-hotspot:hover{border-color:rgba(239,34,42,.72);background:rgba(239,34,42,.06);box-shadow:0 0 20px rgba(239,34,42,.22)}
.cover-home{left:19.8%;top:2.7%;width:3.5%;height:3.9%}
.cover-about{left:24.7%;top:2.7%;width:5.4%;height:3.9%}
.cover-services{left:31.2%;top:2.7%;width:5%;height:3.9%}
.cover-work{left:37.4%;top:2.7%;width:5.6%;height:3.9%}
.cover-brands{left:43.5%;top:2.7%;width:9.6%;height:3.9%}
.cover-custom{left:54.2%;top:2.7%;width:9.7%;height:3.9%}
.cover-careers{left:65%;top:2.7%;width:5.5%;height:3.9%}
.cover-contact{left:71.2%;top:2.7%;width:5.6%;height:3.9%}
.cover-quote-top{right:1.55%;top:2.4%;width:11.2%;height:4.2%}
.cover-quote-main{left:1.8%;top:45.7%;width:12.8%;height:5.2%}
.cover-view-work{left:15.0%;top:45.1%;width:13.4%;height:6.3%}
.cover-about-company-button{left:83.7%;top:91.0%;width:13.9%;height:5.2%}
@media(max-width:900px){
.premium-cover{overflow-x:auto;background:#05080b}
.premium-cover>img{width:1100px;max-width:none}
.cover-hotspot{display:block}
}
/* Project showcase matched to the supplied reference */
.reference-projects{
padding:92px 3.2vw 78px;
background:
radial-gradient(circle at 14% 22%,rgba(43,61,88,.23),transparent 30%),
radial-gradient(circle at 88% 10%,rgba(19,40,68,.2),transparent 28%),
linear-gradient(135deg,#101827 0%,#111a2b 48%,#0d1726 100%);
}
.project-heading{max-width:720px;margin-bottom:36px}
.project-heading .eyebrow{font-size:11px;letter-spacing:1.5px;margin-bottom:13px}
.project-heading h2{
font-size:clamp(38px,4.2vw,62px);
line-height:1.02;
letter-spacing:-2.7px;
margin:0 0 18px;
}
.project-heading p{font-size:15px;color:#d2d8e1;max-width:700px}
.reference-grid{
grid-template-columns:1.4fr 1fr 1fr;
gap:14px;
align-items:stretch;
}
.reference-card{
height:auto;
min-height:395px;
border-radius:17px;
overflow:hidden;
background:linear-gradient(180deg,#202631,#191f29);
border:1px solid rgba(255,255,255,.035);
box-shadow:0 18px 42px rgba(0,0,0,.24);
display:flex;
flex-direction:column;
transition:transform .25s ease,box-shadow .25s ease;
}
.reference-card:hover{
transform:translateY(-5px);
box-shadow:0 25px 56px rgba(0,0,0,.34);
}
.reference-card:before{display:none}
.reference-card img{
width:100%;
height:270px;
display:block;
object-fit:cover;
object-position:center;
}
.reference-card .project-copy{
position:static;
padding:17px 20px 22px;
color:#fff;
flex:1;
}
.reference-card .project-copy span{
display:block;
color:#fff;
font-size:10px;
font-weight:900;
letter-spacing:1.35px;
text-transform:uppercase;
margin-bottom:7px;
}
.reference-card .project-copy h3{
font-size:21px;
line-height:1.1;
margin:0 0 9px;
letter-spacing:-.5px;
}
.reference-card .project-copy p{
margin:0;
color:#eef1f5;
font-size:12px;
line-height:1.55;
}
@media(max-width:950px){
.reference-grid{grid-template-columns:1fr}
.reference-card{min-height:0}
.reference-card img{height:330px}
}
@media(max-width:650px){
.reference-projects{padding:70px 20px 62px}
.project-heading h2{font-size:40px}
.reference-card img{height:230px}
}
/* Full About Company section */
.about-company-section{
padding:110px 5vw;
background:
radial-gradient(circle at 85% 10%,rgba(220,38,38,.12),transparent 28%),
linear-gradient(180deg,#ffffff 0%,#f4f5f7 100%);
color:#111827;
}
.about-hero-panel{
position:relative;
min-height:400px;
border-radius:28px;
overflow:hidden;
display:flex;
align-items:flex-end;
padding:56px;
background:
linear-gradient(90deg,rgba(6,10,17,.95) 0%,rgba(12,18,28,.82) 48%,rgba(12,18,28,.28) 100%),
radial-gradient(circle at 72% 36%,rgba(220,38,38,.42),transparent 20%),
linear-gradient(135deg,#111827,#293241);
box-shadow:0 30px 70px rgba(17,24,39,.18);
}
.about-hero-panel:after{
content:"";
position:absolute;
right:-5%;
bottom:-35%;
width:55%;
height:90%;
border:28px solid rgba(255,255,255,.12);
transform:skewX(-18deg) rotate(-4deg);
}
.about-year{
position:absolute;
top:28px;
right:32px;
z-index:2;
color:#fff;
border:1px solid rgba(255,255,255,.25);
padding:10px 14px;
border-radius:999px;
font-size:11px;
font-weight:900;
letter-spacing:1.6px;
}
.about-hero-copy{position:relative;z-index:2;max-width:800px}
.about-hero-copy h2{
color:#fff;
font-size:clamp(40px,5vw,72px);
line-height:.98;
letter-spacing:-3.4px;
margin:0 0 20px;
}
.about-hero-copy p{
color:#d1d5db;
max-width:700px;
font-size:17px;
line-height:1.7;
}
.about-content-grid{
display:grid;
grid-template-columns:1.45fr .75fr;
gap:55px;
padding:85px 0 70px;
}
.about-story h3{
font-size:clamp(32px,3.5vw,52px);
line-height:1.08;
letter-spacing:-2px;
margin:0 0 28px;
}
.about-story p{
font-size:16px;
line-height:1.85;
color:#4b5563;
margin:0 0 22px;
}
.about-story strong{color:#111827}
.about-side{display:flex;flex-direction:column;gap:20px}
.about-quote{
background:#111827;
color:#fff;
border-radius:22px;
padding:32px;
box-shadow:0 20px 45px rgba(17,24,39,.16);
}
.about-quote span{
display:block;
color:#f87171;
font-size:10px;
font-weight:900;
letter-spacing:1.6px;
margin-bottom:18px;
}
.about-quote blockquote{
margin:0;
font-size:21px;
line-height:1.55;
font-weight:700;
}
.about-values{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}
.about-values>div{
background:#fff;
border:1px solid #e5e7eb;
border-radius:16px;
padding:20px;
}
.about-values b{
color:#dc2626;
font-size:11px;
}
.about-values h4{
margin:12px 0 7px;
font-size:16px;
}
.about-values p{
margin:0;
font-size:12px;
line-height:1.55;
color:#6b7280;
}
.about-timeline{
position:relative;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:28px;
padding:42px 0 70px;
}
.timeline-line{
position:absolute;
left:0;
right:0;
top:52px;
height:2px;
background:#d1d5db;
}
.about-timeline article{
position:relative;
padding-top:44px;
}
.about-timeline article:before{
content:"";
position:absolute;
top:4px;
left:0;
width:16px;
height:16px;
border-radius:50%;
background:#dc2626;
box-shadow:0 0 0 7px #fee2e2;
}
.about-timeline span{
display:block;
color:#dc2626;
font-size:12px;
font-weight:900;
letter-spacing:1px;
}
.about-timeline h4{
margin:9px 0;
font-size:18px;
}
.about-timeline p{
margin:0;
color:#6b7280;
font-size:13px;
line-height:1.6;
}
.about-cta{
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
background:#111827;
color:#fff;
border-radius:22px;
padding:34px 38px;
}
.about-cta h3{
margin:0;
font-size:30px;
letter-spacing:-1px;
}
@media(max-width:950px){
.about-content-grid{grid-template-columns:1fr}
.about-timeline{grid-template-columns:1fr 1fr}
.timeline-line{display:none}
}
@media(max-width:650px){
.about-company-section{padding:75px 20px}
.about-hero-panel{padding:34px 24px;min-height:390px}
.about-hero-copy h2{font-size:42px;letter-spacing:-2px}
.about-content-grid{padding:60px 0 45px}
.about-values,.about-timeline{grid-template-columns:1fr}
.about-cta{align-items:flex-start;flex-direction:column}
.about-year{top:18px;right:18px}
}
/* Updated business contact information */
.contact-placeholder a,
.footer-contact a,
.quick-contact-bar a{
color:inherit;
text-decoration:none;
}
.contact-placeholder a:hover,
.footer-contact a:hover,
.quick-contact-bar a:hover{
text-decoration:underline;
}
.quick-contact-bar{
display:flex;
align-items:center;
justify-content:center;
gap:22px;
flex-wrap:wrap;
padding:11px 5vw;
background:#dc2626;
color:#fff;
font-size:12px;
font-weight:800;
}
.quick-contact-bar span{opacity:.9}
.quick-contact-bar a{
border-left:1px solid rgba(255,255,255,.35);
padding-left:22px;
}
.footer-contact{
display:flex;
flex-direction:column;
gap:5px;
text-align:left;
}
.footer-contact a{color:#fff;font-weight:700}
.footer-contact span{color:#9ca3af}
@media(max-width:850px){
footer{align-items:flex-start}
.quick-contact-bar{gap:10px}
.quick-contact-bar a{border-left:0;padding-left:0}
}
@media(max-width:650px){
.footer-contact{text-align:center;align-items:center}
}
/* Clickable Marathon project area on the approved premium homepage image */
.cover-marathon-projects{
left:50.6%;
top:82.2%;
width:8.2%;
height:4.1%;
}
.brand-logo-link{color:inherit;text-decoration:none}
/* Marathon project portfolio */
.marathon-projects-section{
padding:100px 5vw;
color:#fff;
background:
radial-gradient(circle at 88% 8%,rgba(220,38,38,.17),transparent 28%),
linear-gradient(135deg,#070b11 0%,#101827 55%,#080c12 100%);
}
.marathon-heading{
display:flex;
justify-content:space-between;
align-items:center;
gap:35px;
margin-bottom:42px;
}
.marathon-heading>div{max-width:780px}
.marathon-heading h2{
margin:0 0 17px;
font-size:clamp(40px,5vw,70px);
line-height:1;
letter-spacing:-3px;
}
.marathon-heading p{
margin:0;
max-width:720px;
color:#b8c0cc;
font-size:16px;
line-height:1.7;
}
.marathon-heading>img{
width:min(210px,22vw);
max-height:145px;
object-fit:contain;
padding:20px;
border-radius:20px;
background:#fff;
box-shadow:0 20px 45px rgba(0,0,0,.3);
}
.marathon-feature{
display:grid;
grid-template-columns:1.45fr .75fr;
min-height:440px;
overflow:hidden;
border:1px solid rgba(255,255,255,.1);
border-radius:24px;
background:#151c27;
box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.marathon-feature>img{
width:100%;
height:100%;
min-height:440px;
object-fit:cover;
}
.marathon-feature-copy{
padding:45px 38px;
display:flex;
flex-direction:column;
justify-content:center;
}
.marathon-feature-copy>span,
.marathon-bottom-cta span{
color:#f87171;
font-size:11px;
font-weight:900;
letter-spacing:1.5px;
text-transform:uppercase;
}
.marathon-feature-copy h3{
margin:13px 0 17px;
font-size:34px;
line-height:1.08;
letter-spacing:-1.3px;
}
.marathon-feature-copy p{
color:#c8ced7;
line-height:1.75;
margin:0 0 28px;
}
.marathon-feature-copy .btn{align-self:flex-start}
.marathon-gallery{
display:grid;
grid-template-columns:1.2fr 1fr 1fr;
grid-auto-rows:300px;
gap:15px;
margin-top:18px;
}
.marathon-photo{
position:relative;
overflow:hidden;
padding:0;
border:0;
border-radius:18px;
background:#111827;
cursor:pointer;
}
.marathon-photo img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .45s ease,filter .45s ease;
}
.marathon-photo:after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(transparent 52%,rgba(0,0,0,.76));
}
.marathon-photo span{
position:absolute;
left:20px;
bottom:18px;
z-index:2;
color:#fff;
font-weight:900;
font-size:13px;
letter-spacing:.5px;
}
.marathon-photo:hover img{transform:scale(1.045);filter:brightness(1.08)}
.large-photo{grid-row:span 2}
.wide-photo{grid-column:span 2}
.marathon-bottom-cta{
display:flex;
align-items:center;
justify-content:space-between;
gap:25px;
margin-top:18px;
padding:30px 34px;
border-radius:18px;
background:#151c27;
border:1px solid rgba(255,255,255,.09);
}
.marathon-bottom-cta h3{
margin:8px 0 0;
font-size:25px;
}
.project-lightbox{
position:fixed;
inset:0;
z-index:300;
display:none;
align-items:center;
justify-content:center;
padding:30px;
background:rgba(0,0,0,.91);
}
.project-lightbox.open{display:flex}
.project-lightbox img{
max-width:min(1200px,94vw);
max-height:88vh;
object-fit:contain;
border-radius:12px;
box-shadow:0 25px 80px rgba(0,0,0,.55);
}
.lightbox-close{
position:absolute;
top:20px;
right:25px;
width:48px;
height:48px;
border:1px solid rgba(255,255,255,.3);
border-radius:50%;
background:#111827;
color:#fff;
font-size:30px;
cursor:pointer;
}
@media(max-width:900px){
.cover-marathon-projects{
left:50.6%;
top:82.2%;
width:8.2%;
height:4.1%;
}
.marathon-feature{grid-template-columns:1fr}
.marathon-feature>img{height:390px;min-height:0}
.marathon-gallery{grid-template-columns:1fr 1fr;grid-auto-rows:260px}
.large-photo{grid-row:span 1}
.wide-photo{grid-column:span 1}
}
@media(max-width:650px){
.marathon-projects-section{padding:72px 20px}
.marathon-heading{align-items:flex-start}
.marathon-heading>img{width:105px;padding:12px}
.marathon-heading h2{font-size:42px;letter-spacing:-2px}
.marathon-feature>img{height:260px}
.marathon-feature-copy{padding:30px 23px}
.marathon-feature-copy h3{font-size:28px}
.marathon-gallery{grid-template-columns:1fr;grid-auto-rows:235px}
.marathon-bottom-cta{align-items:flex-start;flex-direction:column}
}
/* Mobil project badges on the premium first page */
.mobil-project-badges{
position:absolute;
left:11.4%;
top:62.8%;
z-index:6;
display:flex;
flex-direction:column;
align-items:flex-start;
gap:6px;
pointer-events:none;
line-height:1;
}
.mobil-badge{
display:inline-flex;
align-items:center;
min-height:25px;
padding:7px 11px;
border-radius:999px;
color:#fff;
font-size:10px;
font-weight:900;
letter-spacing:.7px;
text-transform:uppercase;
box-shadow:0 8px 20px rgba(0,0,0,.38);
backdrop-filter:blur(7px);
}
.trending-badge{
background:linear-gradient(135deg,#ff4d00,#d91414);
border:1px solid rgba(255,186,129,.65);
animation:mobilBadgePulse 2s ease-in-out infinite;
}
.popular-badge{
background:linear-gradient(135deg,#d89a00,#ffca28);
color:#171006;
border:1px solid rgba(255,239,164,.85);
}
.mobil-brand-card{position:relative}
.mobil-brand-card small{
display:block;
margin-top:7px;
color:#dc2626;
font-size:9px;
font-weight:900;
letter-spacing:.35px;
}
@keyframes mobilBadgePulse{
0%,100%{transform:scale(1);box-shadow:0 8px 20px rgba(0,0,0,.38)}
50%{transform:scale(1.045);box-shadow:0 8px 25px rgba(239,34,42,.45)}
}
@media(max-width:900px){
.mobil-project-badges{
left:11.4%;
top:62.8%;
}
.mobil-badge{
font-size:9px;
padding:6px 9px;
}
}
/* Brand-matched canopy animation colors */
.station-stage{
--brand-primary:#b91c1c;
--brand-secondary:#7f1d1d;
--brand-text:#ffffff;
}
.station-stage .canopy{
background:linear-gradient(100deg,var(--brand-secondary),var(--brand-primary) 45%,var(--brand-secondary)) !important;
transition:background .65s ease,border-color .65s ease;
border-bottom-color:var(--brand-secondary) !important;
}
.station-stage .canopy-brand{color:var(--brand-text) !important}
.station-stage .pump b{
background:var(--brand-primary) !important;
color:var(--brand-text) !important;
border-bottom:3px solid var(--brand-secondary);
transition:background .65s ease,border-color .65s ease;
}
.station-stage .price-sign{
border-color:var(--brand-secondary) !important;
box-shadow:0 9px 20px rgba(0,0,0,.25),inset 0 -5px 0 var(--brand-primary);
transition:border-color .65s ease,box-shadow .65s ease;
}
.station-stage .price-sign span{color:var(--brand-secondary) !important}
.station-stage .brand-cycle strong{color:var(--brand-secondary) !important}
/* Realistic construction scene brand colors */
.real-build-scene{
--scene-primary:#ed1c24;
--scene-secondary:#ffd500;
--scene-text:#ffffff;
}
.real-build-scene .new-fascia span{
background:linear-gradient(100deg,var(--scene-secondary),var(--scene-primary) 38%,var(--scene-primary) 68%,var(--scene-secondary)) !important;
transition:background .8s ease;
}
.real-build-scene .canopy-logo strong{
color:var(--scene-text) !important;
text-shadow:0 2px 5px rgba(0,0,0,.65);
}
.real-build-scene .real-canopy{
border-bottom-color:var(--scene-secondary) !important;
transition:border-color .8s ease;
}
.real-build-scene .real-pump small{
background:var(--scene-primary) !important;
color:var(--scene-text) !important;
border-bottom:4px solid var(--scene-secondary);
transition:background .8s ease,border-color .8s ease;
}
.real-build-scene .real-pump b{
background:var(--scene-secondary) !important;
color:#111827 !important;
transition:background .8s ease;
}
.real-build-scene .progress-rail i{
background:linear-gradient(90deg,var(--scene-primary),var(--scene-secondary)) !important;
}
.real-build-scene .canopy-logo img{
border:4px solid var(--scene-secondary);
transition:border-color .8s ease;
}
/* Exact solid primary canopy colors requested */
.station-stage .canopy,
.real-build-scene .new-fascia span{
background:var(--brand-primary) !important;
}
.real-build-scene .new-fascia span{
background:var(--scene-primary) !important;
}
.station-stage .canopy{
border-bottom-color:#ffffff !important;
}
.real-build-scene .real-canopy{
border-bottom-color:#ffffff !important;
}
.station-stage .pump b{
background:var(--brand-primary) !important;
border-bottom-color:var(--brand-primary) !important;
}
.real-build-scene .real-pump small{
background:var(--scene-primary) !important;
border-bottom-color:var(--scene-primary) !important;
}
.real-build-scene .canopy-logo img{
border-color:#ffffff !important;
}
/* Homepage project buttons enabled */
.cover-view-work{display:block!important;z-index:20!important;pointer-events:auto!important;}
.cover-marathon-projects{display:block!important;}
/* =========================================================
MOBILE & TABLET OPTIMIZATION
========================================================= */
:root{
--mobile-side-padding:18px;
}
html,body{
max-width:100%;
overflow-x:hidden;
}
img,video,canvas,svg{
max-width:100%;
height:auto;
}
button,a,input,select,textarea{
-webkit-tap-highlight-color:transparent;
}
.mobile-menu-toggle{
display:none;
width:44px;
height:44px;
align-items:center;
justify-content:center;
border:1px solid rgba(255,255,255,.18);
border-radius:10px;
background:rgba(15,23,42,.92);
color:#fff;
font-size:24px;
line-height:1;
cursor:pointer;
}
/* Tablet */
@media (max-width: 1024px){
.site-header{
padding-left:24px !important;
padding-right:24px !important;
}
.hero,
.split-section,
.quote-section,
.about-content-grid,
.marathon-feature{
grid-template-columns:1fr !important;
}
.hero{
min-height:auto !important;
gap:34px !important;
padding:64px 24px 48px !important;
}
.hero-copy{
max-width:780px !important;
}
.hero h1{
font-size:clamp(42px,8vw,68px) !important;
line-height:1 !important;
}
.station-stage,
.real-build-scene{
min-height:470px !important;
}
.service-grid{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
.project-grid,
.reference-grid{
grid-template-columns:1fr 1fr !important;
}
.timeline{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
.metric-grid{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
.folder-grid{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
.dashboard-view{
grid-template-columns:190px 1fr !important;
}
.marathon-gallery{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
}
/* Mobile */
@media (max-width: 768px){
body{
font-size:15px;
}
.site-header{
min-height:70px !important;
height:auto !important;
padding:12px var(--mobile-side-padding) !important;
gap:12px;
}
.brand{
min-width:0;
}
.brand strong{
font-size:14px !important;
}
.brand small{
display:none !important;
}
.brand-mark{
width:38px !important;
height:38px !important;
border-radius:10px !important;
}
.mobile-menu-toggle{
display:inline-flex;
margin-left:auto;
}
.site-header nav{
display:none !important;
position:absolute !important;
top:100% !important;
left:0 !important;
right:0 !important;
z-index:1000 !important;
flex-direction:column !important;
align-items:stretch !important;
gap:6px !important;
padding:14px 18px 18px !important;
background:rgba(8,12,18,.98) !important;
border-top:1px solid rgba(255,255,255,.08);
box-shadow:0 18px 40px rgba(0,0,0,.35);
}
.site-header nav.mobile-open{
display:flex !important;
}
.site-header nav a,
.site-header nav button{
width:100%;
text-align:left;
padding:12px 14px !important;
border-radius:9px;
}
.nav-cta,
.portal-link{
text-align:center !important;
}
.quick-contact-bar{
flex-direction:column !important;
align-items:center !important;
gap:5px !important;
padding:9px 14px !important;
text-align:center;
font-size:11px !important;
}
.quick-contact-bar a{
border-left:0 !important;
padding-left:0 !important;
word-break:break-word;
}
.hero{
min-height:auto !important;
padding:46px var(--mobile-side-padding) 36px !important;
gap:28px !important;
}
.hero h1{
font-size:clamp(37px,12vw,52px) !important;
letter-spacing:-2px !important;
line-height:1.02 !important;
}
.hero-copy>p{
font-size:16px !important;
line-height:1.6 !important;
}
.hero-actions{
flex-direction:column !important;
gap:10px !important;
margin:24px 0 !important;
}
.hero-actions .btn,
.btn{
width:100%;
min-height:48px;
text-align:center;
}
.trust-row{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:18px !important;
}
.trust-row>div:last-child{
grid-column:1/-1;
}
.station-stage{
min-height:330px !important;
border-radius:18px !important;
}
.station{
transform:scale(.78) !important;
transform-origin:center bottom !important;
left:-10% !important;
right:-10% !important;
}
.brand-cycle{
left:12px !important;
right:12px !important;
bottom:12px !important;
justify-content:center;
flex-wrap:wrap;
text-align:center;
font-size:10px !important;
}
.logo-strip{
gap:14px !important;
padding:18px 14px !important;
font-size:12px !important;
}
.section,
.work-section,
.split-section,
.quote-section,
.about-company-section,
.marathon-projects-section{
padding:68px var(--mobile-side-padding) !important;
}
.section-heading{
margin-bottom:30px !important;
}
.section-heading h2,
.quote-copy h2,
.career-copy h2,
.about-story h3,
.marathon-heading h2{
font-size:clamp(34px,10vw,46px) !important;
line-height:1.05 !important;
letter-spacing:-1.8px !important;
}
.service-grid,
.project-grid,
.reference-grid,
.timeline,
.form-grid,
.metric-grid,
.dash-grid,
.folder-grid,
.about-values,
.about-timeline,
.marathon-gallery{
grid-template-columns:1fr !important;
}
.service-grid article{
padding:24px !important;
}
.reference-card,
.project-card{
min-height:0 !important;
height:auto !important;
}
.reference-card img,
.project-card img{
height:230px !important;
object-fit:cover !important;
}
.project-card div,
.reference-card .project-copy{
padding:20px !important;
}
.about-hero-panel{
min-height:420px !important;
padding:34px 24px !important;
align-items:flex-end !important;
}
.about-hero-copy h2{
font-size:clamp(38px,11vw,50px) !important;
letter-spacing:-2px !important;
}
.about-content-grid{
gap:34px !important;
padding:55px 0 40px !important;
}
.about-cta,
.marathon-bottom-cta{
flex-direction:column !important;
align-items:flex-start !important;
padding:26px 22px !important;
}
.marathon-heading{
align-items:flex-start !important;
gap:18px !important;
}
.marathon-heading>img{
width:92px !important;
padding:10px !important;
}
.marathon-feature>img{
min-height:0 !important;
height:250px !important;
}
.marathon-feature-copy{
padding:28px 22px !important;
}
.marathon-photo{
min-height:220px !important;
}
.form-card{
padding:22px !important;
border-radius:16px !important;
}
.form-card input,
.form-card select,
.form-card textarea{
font-size:16px !important;
min-height:46px;
}
footer{
flex-direction:column !important;
align-items:center !important;
gap:18px !important;
text-align:center !important;
padding:30px 20px !important;
}
.footer-contact{
text-align:center !important;
align-items:center !important;
word-break:break-word;
}
.modal{
padding:8px !important;
}
.modal-shell{
width:100% !important;
height:96vh !important;
border-radius:16px !important;
}
.dashboard-view{
display:block !important;
}
.dashboard-view aside{
display:flex !important;
flex-direction:row !important;
overflow-x:auto !important;
gap:6px !important;
padding:10px !important;
position:sticky;
top:0;
z-index:3;
}
.portal-brand,
.logout{
display:none !important;
}
.dash-tab{
white-space:nowrap !important;
flex:0 0 auto;
}
.dashboard-content{
padding:18px !important;
}
.dash-heading{
align-items:flex-start !important;
gap:14px;
}
.dash-heading h2{
font-size:27px !important;
}
.table-wrap{
overflow-x:auto !important;
-webkit-overflow-scrolling:touch;
}
table{
min-width:640px !important;
}
.login-view{
margin:45px auto !important;
padding:24px !important;
}
}
/* Small phones */
@media (max-width: 430px){
:root{
--mobile-side-padding:14px;
}
.site-header{
padding-left:14px !important;
padding-right:14px !important;
}
.hero h1{
font-size:38px !important;
}
.trust-row{
grid-template-columns:1fr !important;
}
.trust-row>div:last-child{
grid-column:auto;
}
.station-stage{
min-height:285px !important;
}
.station{
transform:scale(.68) !important;
left:-18% !important;
right:-18% !important;
}
.section-heading h2,
.quote-copy h2,
.career-copy h2,
.about-story h3,
.marathon-heading h2{
font-size:36px !important;
}
.reference-card img,
.project-card img{
height:205px !important;
}
.marathon-feature>img{
height:215px !important;
}
.marathon-heading{
flex-direction:column !important;
}
.marathon-heading>img{
width:120px !important;
}
.about-year{
top:14px !important;
right:14px !important;
}
}
/* =========================================================
EDITABLE MANAGEMENT PORTAL
========================================================= */
.portal-edit-toolbar{
position:sticky;
top:0;
z-index:8;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
margin:-12px -8px 24px;
padding:14px 16px;
border:1px solid #e5e7eb;
border-radius:14px;
background:rgba(255,255,255,.96);
backdrop-filter:blur(14px);
box-shadow:0 12px 28px rgba(15,23,42,.08);
}
.portal-edit-toolbar strong,
.portal-edit-toolbar span{display:block}
.portal-edit-toolbar strong{font-size:13px}
.portal-edit-toolbar span{
margin-top:3px;
color:#6b7280;
font-size:10px;
}
.portal-edit-actions{
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
}
.portal-edit-btn,
.portal-save-btn,
.portal-reset-btn{
min-height:38px;
padding:9px 13px;
border-radius:9px;
font-size:11px;
font-weight:900;
cursor:pointer;
}
.portal-edit-btn{
border:1px solid #cbd5e1;
background:#fff;
color:#111827;
}
.portal-edit-btn.active{
border-color:#fca5a5;
background:#fee2e2;
color:#991b1b;
}
.portal-save-btn{
border:1px solid #b91c1c;
background:#dc2626;
color:#fff;
}
.portal-reset-btn{
border:1px solid #d1d5db;
background:#f9fafb;
color:#6b7280;
}
.portal-editing [data-portal-editable="true"],
.portal-editing .metric-grid strong,
.portal-editing .metric-grid small,
.portal-editing .metric-grid span,
.portal-editing .alert-row b,
.portal-editing .alert-row span,
.portal-editing td:not(:last-child),
.portal-editing .folder-grid strong,
.portal-editing .folder-grid span,
.portal-editing .file-list span,
.portal-editing .file-list small,
.portal-editing .portal-editable-text{
outline:1px dashed #f87171;
outline-offset:2px;
border-radius:4px;
background:#fff7f7;
cursor:text;
}
.portal-editing td{
min-width:80px;
}
.portal-delete-row{
display:none;
width:28px;
height:28px;
align-items:center;
justify-content:center;
border:0;
border-radius:7px;
background:#fee2e2;
color:#b91c1c;
font-size:15px;
font-weight:900;
cursor:pointer;
}
.portal-editing .portal-delete-row{display:inline-flex}
.portal-add-row{display:none}
.portal-editing .portal-add-row{display:inline-flex}
.portal-notes-card{
margin-bottom:18px;
padding:20px;
border:1px solid #e5e7eb;
border-radius:14px;
background:#fff;
}
.portal-editable-text{
min-height:76px;
padding:12px;
border-radius:9px;
background:#f8fafc;
color:#475569;
font-size:13px;
line-height:1.65;
}
.portal-editing .portal-editable-text{
min-height:110px;
}
.portal-row-action{
width:48px;
text-align:center;
}
.portal-toast{
position:fixed;
right:22px;
bottom:22px;
z-index:500;
padding:13px 17px;
border-radius:11px;
background:#111827;
color:#fff;
font-size:12px;
font-weight:800;
box-shadow:0 16px 35px rgba(0,0,0,.25);
opacity:0;
transform:translateY(14px);
pointer-events:none;
transition:.25s ease;
}
.portal-toast.show{
opacity:1;
transform:translateY(0);
}
@media(max-width:768px){
.portal-edit-toolbar{
position:relative;
flex-direction:column;
align-items:stretch;
margin:0 0 18px;
}
.portal-edit-actions{
display:grid;
grid-template-columns:1fr;
}
.portal-edit-btn,
.portal-save-btn,
.portal-reset-btn{
width:100%;
}
}
/* =========================================================
ADVANCED PROJECT + EXPENSE + RECEIPT TRACKER
========================================================= */
.apt-modal{
position:fixed;
inset:0;
z-index:1000;
display:none;
padding:18px;
background:rgba(2,6,12,.84);
backdrop-filter:blur(12px);
}
.apt-modal.open{display:block}
.apt-shell{
width:min(1500px,100%);
height:calc(100vh - 36px);
margin:auto;
overflow:hidden;
border:1px solid rgba(255,255,255,.1);
border-radius:22px;
background:#f4f6f9;
box-shadow:0 30px 100px rgba(0,0,0,.48);
}
.apt-header{
min-height:92px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:18px 22px;
color:#fff;
background:linear-gradient(110deg,#0b111b,#151f2e);
border-bottom:1px solid rgba(255,255,255,.08);
}
.apt-kicker{
display:block;
margin-bottom:5px;
color:#f87171;
font-size:10px;
font-weight:900;
letter-spacing:1.7px;
text-transform:uppercase;
}
.apt-header h2{margin:0;font-size:28px;letter-spacing:-1px}
.apt-header p{margin:5px 0 0;color:#aeb7c5;font-size:12px}
.apt-header-actions,.apt-header-inline{
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
}
.apt-close-btn{
width:42px;height:42px;border:1px solid rgba(255,255,255,.16);border-radius:50%;
background:rgba(255,255,255,.06);color:#fff;font-size:27px;cursor:pointer
}
.apt-primary-btn,.apt-secondary-btn,.apt-save-btn{
min-height:40px;
padding:10px 14px;
border-radius:9px;
font-size:11px;
font-weight:900;
cursor:pointer;
}
.apt-primary-btn,.apt-save-btn{border:1px solid #b91c1c;background:#dc2626;color:#fff}
.apt-secondary-btn{border:1px solid #cbd5e1;background:#fff;color:#111827}
.apt-header .apt-secondary-btn{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff}
.apt-layout{display:grid;grid-template-columns:190px 1fr;height:calc(100% - 92px)}
.apt-tabs{
padding:18px 12px;
overflow:auto;
background:#111827;
border-right:1px solid #263244;
}
.apt-tab{
width:100%;
display:block;
margin:3px 0;
padding:13px 14px;
border:0;
border-radius:9px;
background:transparent;
color:#aeb8c7;
text-align:left;
font-size:12px;
font-weight:800;
cursor:pointer;
}
.apt-tab.active,.apt-tab:hover{background:#dc2626;color:#fff}
.apt-content{overflow:auto;padding:26px}
.apt-panel{display:none}.apt-panel.active{display:block}
.apt-section-head{
display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:20px
}
.apt-section-head span{display:block;color:#dc2626;font-size:10px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase}
.apt-section-head h3{margin:5px 0 0;font-size:27px;letter-spacing:-1px}
.apt-section-head p{margin:5px 0 0;color:#6b7280;font-size:12px}
.apt-status-wrap label{min-width:180px}
.apt-form-grid,.apt-financial-inputs,.apt-receipt-form{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px
}
.apt-financial-inputs{grid-template-columns:repeat(4,minmax(0,1fr))}
.apt-form-grid label,.apt-financial-inputs label,.apt-status-wrap label,.apt-receipt-form label,.apt-expense-tools label{
display:block;color:#374151;font-size:11px;font-weight:800
}
.apt-form-grid input,.apt-form-grid select,.apt-form-grid textarea,
.apt-financial-inputs input,.apt-status-wrap select,.apt-receipt-form input,.apt-receipt-form select,
.apt-expense-tools input,.apt-expense-tools select{
width:100%;margin-top:7px;padding:12px;border:1px solid #d7dce3;border-radius:9px;background:#fff;outline:none
}
.apt-form-grid input:focus,.apt-form-grid select:focus,.apt-form-grid textarea:focus,
.apt-financial-inputs input:focus,.apt-status-wrap select:focus,.apt-receipt-form input:focus,.apt-receipt-form select:focus,
.apt-expense-tools input:focus,.apt-expense-tools select:focus{
border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.09)
}
.apt-span-2{grid-column:span 2}
.apt-metric-grid{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-top:20px
}
.apt-metric-grid article{
padding:19px;border:1px solid #e2e6ec;border-radius:14px;background:#fff;box-shadow:0 10px 25px rgba(15,23,42,.05)
}
.apt-metric-grid span,.apt-metric-grid small,.apt-metric-grid strong{display:block}
.apt-metric-grid span{color:#6b7280;font-size:10px;font-weight:800}
.apt-metric-grid strong{margin:9px 0 6px;font-size:25px;letter-spacing:-.7px}
.apt-metric-grid small{color:#8a94a3;font-size:9px}
.apt-progress-card{
margin-top:15px;padding:18px;border:1px solid #e1e5eb;border-radius:14px;background:#fff
}
.apt-progress-card>div:first-child{display:flex;justify-content:space-between;font-size:11px;font-weight:800}
.apt-progress-track{height:10px;margin-top:12px;overflow:hidden;border-radius:999px;background:#e5e7eb}
.apt-progress-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,#dc2626,#f97316);transition:width .35s ease}
.apt-expense-tools{display:grid;grid-template-columns:250px 1fr;gap:12px;margin-bottom:14px}
.apt-table-wrap{overflow:auto;border:1px solid #e0e5eb;border-radius:13px;background:#fff}
.apt-table{width:100%;min-width:900px;border-collapse:collapse}
.apt-table th,.apt-table td{padding:11px;border-bottom:1px solid #e8ebef;text-align:left;font-size:11px}
.apt-table th{position:sticky;top:0;z-index:1;background:#f8fafc;color:#667085;font-size:9px;text-transform:uppercase}
.apt-table input,.apt-table select{
width:100%;min-width:95px;padding:8px;border:1px solid #d8dde5;border-radius:7px;background:#fff;font-size:11px
}
.apt-table .apt-money-input{min-width:105px;text-align:right}
.apt-remove-row{
width:30px;height:30px;border:0;border-radius:7px;background:#fee2e2;color:#b91c1c;font-weight:900;cursor:pointer
}
.apt-ledger-footer{
display:flex;justify-content:space-between;align-items:center;padding:15px 5px;color:#6b7280;font-size:11px
}
.apt-ledger-footer strong{color:#111827;font-size:15px}
.apt-upload-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.apt-upload-card{
padding:20px;border:1px solid #dfe4eb;border-radius:16px;background:#fff
}
.apt-upload-card>div:first-child span{color:#dc2626;font-size:9px;font-weight:900;letter-spacing:1.4px}
.apt-upload-card h4{margin:7px 0;font-size:18px}
.apt-upload-card p{margin:0 0 14px;color:#6b7280;font-size:11px;line-height:1.55}
.apt-upload-btn,.apt-camera-btn,.apt-file-label{
display:flex;align-items:center;justify-content:center;min-height:40px;margin:7px 0;padding:9px 12px;border-radius:9px;font-size:10px;font-weight:900;cursor:pointer
}
.apt-upload-btn{background:#111827;color:#fff}
.apt-camera-btn{border:1px solid #d7dce3;background:#fff;color:#111827}
.apt-upload-btn input,.apt-camera-btn input,.apt-file-label input{display:none}
.apt-media-grid{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:13px
}
.apt-media-item{position:relative;aspect-ratio:1.2;overflow:hidden;border-radius:9px;background:#e5e7eb}
.apt-media-item img{width:100%;height:100%;object-fit:cover;cursor:pointer}
.apt-media-item button,.apt-receipt-delete{
position:absolute;right:6px;top:6px;width:27px;height:27px;border:0;border-radius:50%;background:rgba(17,24,39,.86);color:#fff;cursor:pointer
}
.apt-receipt-form{margin-bottom:14px}
.apt-receipt-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.apt-receipt-card{
position:relative;padding:12px;border:1px solid #dfe4ea;border-radius:13px;background:#fff
}
.apt-receipt-preview{
height:150px;display:grid;place-items:center;overflow:hidden;border-radius:9px;background:#edf0f4;cursor:pointer
}
.apt-receipt-preview img{width:100%;height:100%;object-fit:cover}
.apt-pdf-icon{font-size:38px}
.apt-receipt-card input,.apt-receipt-card select{
width:100%;margin-top:8px;padding:8px;border:1px solid #d9dee6;border-radius:7px;font-size:10px
}
.apt-receipt-card small{display:block;margin-top:8px;color:#6b7280;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apt-report-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:15px}
.apt-chart-card,.apt-tax-card,.apt-summary-table-card{
padding:20px;border:1px solid #dfe4ea;border-radius:15px;background:#fff
}
.apt-chart-card>div:first-child{display:flex;justify-content:space-between}
.apt-chart-card>div:first-child span,.apt-tax-card>span{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:1.2px;color:#dc2626}
.apt-chart-card canvas{width:100%;height:330px;margin-top:14px}
.apt-chart-legend{display:flex;flex-wrap:wrap;gap:9px;margin-top:10px}
.apt-chart-legend span{font-size:9px;color:#6b7280}
.apt-chart-legend i{display:inline-block;width:8px;height:8px;margin-right:4px;border-radius:2px}
.apt-tax-card h4{font-size:19px;margin:10px 0}
.apt-tax-card>strong{display:block;font-size:32px;margin:15px 0}
.apt-tax-card>p{color:#6b7280;font-size:10px;line-height:1.55}
.apt-tax-line{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #eceff3;font-size:10px}
.apt-summary-table-card{margin-top:15px}
.apt-summary-table-card h4{margin:0 0 12px}
.apt-lightbox{
position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;padding:25px;background:rgba(0,0,0,.92)
}
.apt-lightbox.open{display:flex}
.apt-lightbox img{max-width:94vw;max-height:90vh;border-radius:10px}
.apt-lightbox button{
position:absolute;right:22px;top:20px;width:45px;height:45px;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:#111827;color:#fff;font-size:27px
}
.apt-project-open{
padding:7px 10px;border:0;border-radius:7px;background:#111827;color:#fff;font-size:9px;font-weight:900;cursor:pointer
}
.apt-project-summary{
display:block;margin-top:3px;color:#6b7280;font-size:9px
}
.apt-saved-badge{color:#15803d!important}
@media(max-width:1050px){
.apt-financial-inputs{grid-template-columns:repeat(2,minmax(0,1fr))}
.apt-upload-grid{grid-template-columns:1fr}
.apt-receipt-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.apt-report-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
.apt-modal{padding:0}
.apt-shell{height:100vh;border-radius:0}
.apt-header{align-items:flex-start;padding:14px}
.apt-header h2{font-size:22px}
.apt-header-actions{justify-content:flex-end}
.apt-header-actions .apt-secondary-btn{display:none}
.apt-layout{display:block;height:calc(100% - 92px)}
.apt-tabs{display:flex;gap:5px;padding:8px;overflow-x:auto;border-right:0}
.apt-tab{width:auto;white-space:nowrap;padding:10px 12px}
.apt-content{height:calc(100% - 56px);padding:15px}
.apt-section-head{align-items:flex-start;flex-direction:column}
.apt-form-grid,.apt-financial-inputs,.apt-receipt-form,.apt-metric-grid,.apt-expense-tools,.apt-receipt-list{
grid-template-columns:1fr
}
.apt-span-2{grid-column:auto}
.apt-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.apt-chart-card canvas{height:260px}
}
@media(max-width:430px){
.apt-metric-grid{grid-template-columns:1fr}
.apt-header-actions{gap:4px}
.apt-save-btn{padding:9px}
}
@media print{
body *{visibility:hidden!important}
#aptModal,#aptModal *{visibility:visible!important}
#aptModal{position:absolute!important;inset:0!important;background:#fff!important;padding:0!important}
.apt-shell{height:auto!important;box-shadow:none!important;border:0!important}
.apt-header,.apt-tabs,.apt-header-actions,.apt-panel:not([data-apt-panel="reports"]){display:none!important}
.apt-layout{display:block!important;height:auto!important}
.apt-content{overflow:visible!important;padding:0!important}
.apt-panel[data-apt-panel="reports"]{display:block!important}
}
/* Fixed portal panel IDs: prevent collision with public #projects section */
#portal-projects.active,#portal-overview.active,#portal-revenue.active,#portal-files.active,#portal-leads.active,#portal-workers.active{display:block!important}
#portal-projects .table-wrap{display:block!important;min-height:180px}
#portal-projects .dash-heading{display:flex!important}
/* =========================================================
FOUR-STATE PROJECT STATUS BUBBLES
========================================================= */
.apt-status-wrap{
min-width:470px;
}
.apt-status-label{
display:block;
margin-bottom:8px;
color:#374151!important;
font-size:10px!important;
font-weight:900!important;
letter-spacing:.8px!important;
text-transform:uppercase;
}
.apt-status-options{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:7px;
}
.apt-status-option{
display:flex;
align-items:center;
justify-content:center;
gap:7px;
min-height:38px;
padding:8px 9px;
border:1px solid #d7dce3;
border-radius:999px;
background:#fff;
color:#475569;
font-size:9px;
font-weight:900;
white-space:nowrap;
cursor:pointer;
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.apt-status-option:hover{
transform:translateY(-1px);
box-shadow:0 6px 16px rgba(15,23,42,.08);
}
.apt-status-option i{
width:9px;
height:9px;
flex:0 0 auto;
border-radius:50%;
background:#94a3b8;
box-shadow:0 0 0 4px rgba(148,163,184,.15);
}
.apt-status-option.status-not-started i{background:#94a3b8;box-shadow:0 0 0 4px rgba(148,163,184,.16)}
.apt-status-option.status-starting i{background:#eab308;box-shadow:0 0 0 4px rgba(234,179,8,.16)}
.apt-status-option.status-working i{background:#2563eb;box-shadow:0 0 0 4px rgba(37,99,235,.16)}
.apt-status-option.status-completed i{background:#16a34a;box-shadow:0 0 0 4px rgba(22,163,74,.16)}
.apt-status-option.status-not-started.active{
border-color:#94a3b8;background:#f1f5f9;color:#475569;
}
.apt-status-option.status-starting.active{
border-color:#eab308;background:#fef9c3;color:#854d0e;
}
.apt-status-option.status-working.active{
border-color:#2563eb;background:#dbeafe;color:#1d4ed8;
}
.apt-status-option.status-completed.active{
border-color:#16a34a;background:#dcfce7;color:#15803d;
}
.apt-status-option.active{
box-shadow:0 7px 18px rgba(15,23,42,.1);
}
/* Status bubbles inside the project table */
.project-status-bubble{
display:inline-flex;
align-items:center;
gap:7px;
padding:7px 10px;
border-radius:999px;
font-size:9px;
font-weight:900;
white-space:nowrap;
}
.project-status-bubble:before{
content:"";
width:8px;
height:8px;
border-radius:50%;
}
.project-status-not-started{background:#f1f5f9;color:#475569}
.project-status-not-started:before{background:#94a3b8}
.project-status-starting{background:#fef9c3;color:#854d0e}
.project-status-starting:before{background:#eab308}
.project-status-working{background:#dbeafe;color:#1d4ed8}
.project-status-working:before{background:#2563eb}
.project-status-completed{background:#dcfce7;color:#15803d}
.project-status-completed:before{background:#16a34a}
@media(max-width:980px){
.apt-status-wrap{min-width:100%}
.apt-status-options{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
.apt-status-options{grid-template-columns:1fr}
.apt-status-option{justify-content:flex-start;padding-left:16px}
}
/* Direct project status selector — no edit mode required */
.project-status-cell{
position:relative;
min-width:155px;
}
.project-status-trigger{
border:0;
cursor:pointer;
font-family:inherit;
}
.project-status-menu{
position:absolute;
z-index:100;
top:calc(100% + 6px);
left:8px;
width:175px;
display:none;
padding:7px;
border:1px solid #dfe4ea;
border-radius:12px;
background:#fff;
box-shadow:0 16px 38px rgba(15,23,42,.18);
}
.project-status-menu.open{display:grid;gap:5px}
.project-status-choice{
display:flex;
align-items:center;
gap:8px;
width:100%;
padding:9px 10px;
border:0;
border-radius:8px;
background:#fff;
color:#334155;
font-size:10px;
font-weight:800;
text-align:left;
cursor:pointer;
}
.project-status-choice:hover{background:#f8fafc}
.project-status-choice i{
width:9px;
height:9px;
border-radius:50%;
}
.project-status-choice[data-status="Not Yet Started"] i{background:#94a3b8}
.project-status-choice[data-status="Starting"] i{background:#eab308}
.project-status-choice[data-status="Working On"] i{background:#2563eb}
.project-status-choice[data-status="Completed"] i{background:#16a34a}
.project-status-autosave{
display:block;
margin-top:4px;
color:#64748b;
font-size:8px;
}
/* Final direct status selector for the existing Project Tracker rows */
.inline-status-pill{
display:inline-flex;
align-items:center;
gap:7px;
padding:7px 11px;
border:0;
border-radius:999px;
font-size:9px;
font-weight:900;
cursor:pointer;
white-space:nowrap;
}
.inline-status-pill:before{
content:"";
width:8px;
height:8px;
border-radius:50%;
}
.inline-status-pill.status-not-started{background:#f1f5f9;color:#475569}
.inline-status-pill.status-not-started:before{background:#94a3b8}
.inline-status-pill.status-starting{background:#fef9c3;color:#854d0e}
.inline-status-pill.status-starting:before{background:#eab308}
.inline-status-pill.status-working{background:#dbeafe;color:#1d4ed8}
.inline-status-pill.status-working:before{background:#2563eb}
.inline-status-pill.status-completed{background:#dcfce7;color:#15803d}
.inline-status-pill.status-completed:before{background:#16a34a}
.inline-status-popover{
position:fixed;
z-index:2000;
display:none;
width:190px;
padding:8px;
border:1px solid #dfe4ea;
border-radius:12px;
background:#fff;
box-shadow:0 18px 45px rgba(15,23,42,.2);
}
.inline-status-popover.open{display:grid;gap:5px}
.inline-status-popover button{
display:flex;
align-items:center;
gap:9px;
width:100%;
padding:10px 11px;
border:0;
border-radius:8px;
background:#fff;
color:#334155;
font-size:10px;
font-weight:800;
text-align:left;
cursor:pointer;
}
.inline-status-popover button:hover{background:#f8fafc}
.inline-status-popover .dot{
width:9px;
height:9px;
border-radius:50%;
}
.inline-status-popover .gray{background:#94a3b8}
.inline-status-popover .yellow{background:#eab308}
.inline-status-popover .blue{background:#2563eb}
.inline-status-popover .green{background:#16a34a}
/* Status column is never text-editable */
#projectTable td:nth-child(3),
#projectTable td:nth-child(3) *,
.project-status-cell,
.project-status-cell *,
.inline-status-pill{
user-select:none;
-webkit-user-select:none;
}
.portal-editing #projectTable td:nth-child(3),
.portal-editing #projectTable td:nth-child(3) *,
.portal-editing .project-status-cell,
.portal-editing .project-status-cell *{
outline:none !important;
background:transparent !important;
cursor:default !important;
}
.portal-editing .inline-status-pill{
cursor:pointer !important;
}
/* REAL CLICKABLE STATUS DROPDOWNS */
#projectTable td:nth-child(3){
position:relative;
min-width:170px;
outline:none !important;
background:transparent !important;
}
.project-status-select{
appearance:none;
-webkit-appearance:none;
width:auto;
min-width:145px;
padding:8px 32px 8px 28px;
border:0;
border-radius:999px;
font:900 10px/1.2 inherit;
cursor:pointer;
outline:none;
background-repeat:no-repeat;
background-position:12px center, calc(100% - 12px) center;
background-size:8px 8px, 10px 6px;
box-shadow:none;
}
.project-status-select.status-not-started{
color:#475569;
background-color:#f1f5f9;
background-image:radial-gradient(circle,#94a3b8 0 4px,transparent 4.5px),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23475569' stroke-width='1.5'/%3E%3C/svg%3E");
}
.project-status-select.status-starting{
color:#854d0e;
background-color:#fef9c3;
background-image:radial-gradient(circle,#eab308 0 4px,transparent 4.5px),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23854d0e' stroke-width='1.5'/%3E%3C/svg%3E");
}
.project-status-select.status-working{
color:#1d4ed8;
background-color:#dbeafe;
background-image:radial-gradient(circle,#2563eb 0 4px,transparent 4.5px),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231d4ed8' stroke-width='1.5'/%3E%3C/svg%3E");
}
.project-status-select.status-completed{
color:#15803d;
background-color:#dcfce7;
background-image:radial-gradient(circle,#16a34a 0 4px,transparent 4.5px),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2315803d' stroke-width='1.5'/%3E%3C/svg%3E");
}
.portal-editing #projectTable td:nth-child(3),
.portal-editing #projectTable td:nth-child(3) *{
outline:none !important;
background-origin:border-box;
}
.portal-editing .project-status-select{cursor:pointer !important}
/* Permanent project actions — available without Edit Information */
.project-actions-head{
min-width:190px;
text-align:center!important;
}
.project-row-actions{
min-width:190px;
display:flex;
align-items:center;
justify-content:center;
gap:7px;
white-space:nowrap;
outline:none!important;
background:#fff!important;
}
.project-edit-button,
.project-delete-button{
min-height:34px;
padding:8px 11px;
border-radius:8px;
font-size:9px;
font-weight:900;
cursor:pointer;
}
.project-edit-button{
border:1px solid #cbd5e1;
background:#111827;
color:#fff;
}
.project-edit-button:hover{background:#263244}
.project-delete-button{
border:1px solid #fecaca;
background:#fee2e2;
color:#b91c1c;
}
.project-delete-button:hover{background:#fecaca}
.portal-editing .project-row-actions,
.portal-editing .project-row-actions *{
outline:none!important;
cursor:pointer!important;
user-select:none!important;
-webkit-user-select:none!important;
}
@media(max-width:760px){
.project-row-actions{min-width:155px;flex-direction:column}
.project-edit-button,.project-delete-button{width:100%}
}
/* Project tracker: rows open project details, no Actions column */
#projectTable tr[data-advanced-project-id]{
cursor:pointer;
}
#projectTable tr[data-advanced-project-id]:hover td{
background:#f8fafc;
}
#projectTable th:last-child.actions-column,
#projectTable td:last-child.actions-column{
display:none !important;
}
.project-row-hint{
display:block;
margin-top:3px;
color:#64748b;
font-size:8px;
}
.apt-delete-project-btn{
border-color:#fecaca !important;
background:#fff !important;
color:#b91c1c !important;
}
/* Clean final Project Tracker behavior */
#projectTable tr{cursor:pointer}
#projectTable tr:hover td{background:#f8fafc}
.apt-delete-project-clean{border-color:#fecaca!important;color:#b91c1c!important;background:#fff!important}
/* Verified clean project tracker */
#projectTable tr[data-clean-id]{cursor:pointer}
#projectTable tr[data-clean-id]:hover td{background:#f8fafc}
.clean-row-sub{display:block;margin-top:3px;color:#94a3b8;font-size:8px}
.clean-status-select{appearance:auto!important;-webkit-appearance:menulist!important;min-width:135px;padding:7px 24px 7px 10px!important;border:0!important;border-radius:999px!important;font-size:9px!important;font-weight:900!important;cursor:pointer!important;outline:none!important}
.clean-status-select.status-not-started{background:#f1f5f9!important;color:#475569!important}
.clean-status-select.status-starting{background:#fef9c3!important;color:#854d0e!important}
.clean-status-select.status-working{background:#dbeafe!important;color:#1d4ed8!important}
.clean-status-select.status-completed{background:#dcfce7!important;color:#15803d!important}
.portal-editing .clean-status-select{outline:none!important;cursor:pointer!important}
.clean-delete-project{border-color:#fecaca!important;background:#fff!important;color:#b91c1c!important}
/* Organized receipt vault */
.apt-receipt-controls{
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}
.apt-receipt-summary{
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:10px;
margin:16px 0;
}
.apt-receipt-summary article{
padding:14px;
border:1px solid #dfe4ea;
border-radius:12px;
background:#fff;
}
.apt-receipt-summary span,
.apt-receipt-summary strong{
display:block;
}
.apt-receipt-summary span{
color:#64748b;
font-size:9px;
font-weight:800;
}
.apt-receipt-summary strong{
margin-top:7px;
color:#111827;
font-size:18px;
}
.apt-receipt-groups{
display:grid;
gap:16px;
}
.apt-receipt-group{
overflow:hidden;
border:1px solid #dfe4ea;
border-radius:15px;
background:#fff;
}
.apt-receipt-group-head{
display:flex;
align-items:center;
justify-content:space-between;
padding:15px 17px;
border-bottom:1px solid #e8ecf1;
background:#f8fafc;
}
.apt-receipt-group-head span,
.apt-receipt-group-head small{
display:block;
}
.apt-receipt-group-head span{
color:#111827;
font-size:13px;
font-weight:900;
}
.apt-receipt-group-head small{
margin-top:3px;
color:#64748b;
font-size:9px;
}
.apt-receipt-group-head strong{
color:#dc2626;
font-size:17px;
}
.apt-receipt-list-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
padding:14px;
}
.apt-receipt-card label{
display:block;
margin-top:8px;
color:#475569;
font-size:9px;
font-weight:800;
}
.apt-receipt-card label input,
.apt-receipt-card label select{
margin-top:5px;
}
.apt-empty-receipts{
padding:60px 20px;
border:1px dashed #cbd5e1;
border-radius:14px;
text-align:center;
background:#f8fafc;
}
.apt-empty-receipts strong{
display:block;
color:#111827;
font-size:18px;
}
.apt-empty-receipts p{
margin:8px auto 0;
max-width:520px;
color:#64748b;
font-size:11px;
line-height:1.6;
}
@media(max-width:1100px){
.apt-receipt-controls{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
.apt-receipt-summary{grid-template-columns:repeat(3,minmax(0,1fr))}
.apt-receipt-list-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
.apt-receipt-controls,
.apt-receipt-summary,
.apt-receipt-list-grid{
grid-template-columns:1fr !important;
}
}
/* =========================================================
PRODUCTION BACKEND CONNECTION UI
========================================================= */
.backend-control-panel{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
margin-bottom:22px;
padding:18px 20px;
border:1px solid #dce2e9;
border-radius:15px;
background:linear-gradient(135deg,#ffffff,#f8fafc);
box-shadow:0 10px 28px rgba(15,23,42,.06);
}
.backend-eyebrow{
display:block;
color:#dc2626;
font-size:9px;
font-weight:900;
letter-spacing:1.5px;
}
.backend-control-copy h3{margin:6px 0 5px;font-size:18px}
.backend-control-copy p{margin:0;color:#64748b;font-size:10px;line-height:1.5}
.backend-control-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.backend-control-actions button{
min-height:38px;padding:9px 13px;border:1px solid #cbd5e1;border-radius:9px;background:#fff;color:#111827;font-size:10px;font-weight:900;cursor:pointer
}
.backend-connection-pill{
display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;font-size:9px
}
.backend-connection-pill i{width:9px;height:9px;border-radius:50%}
.backend-connection-pill.checking{background:#f1f5f9;color:#475569}
.backend-connection-pill.checking i{background:#94a3b8}
.backend-connection-pill.connected{background:#dcfce7;color:#15803d}
.backend-connection-pill.connected i{background:#16a34a}
.backend-connection-pill.not-connected{background:#fef3c7;color:#92400e}
.backend-connection-pill.not-connected i{background:#f59e0b}
.backend-setup-modal{
position:fixed;inset:0;z-index:3000;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(2,6,12,.82);backdrop-filter:blur(10px)
}
.backend-setup-modal.open{display:flex}
.backend-setup-shell{width:min(820px,100%);max-height:90vh;overflow:auto;border-radius:20px;background:#fff;box-shadow:0 30px 100px rgba(0,0,0,.45)}
.backend-setup-shell header{
display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:24px;color:#fff;background:#111827
}
.backend-setup-shell header span{color:#f87171;font-size:9px;font-weight:900;letter-spacing:1.5px}
.backend-setup-shell header h2{margin:7px 0;font-size:30px}
.backend-setup-shell header p{margin:0;max-width:650px;color:#cbd5e1;font-size:11px;line-height:1.6}
.backend-setup-shell header button{width:40px;height:40px;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:25px;cursor:pointer}
.backend-setup-body{display:grid;gap:12px;padding:22px}
.backend-setup-body article{display:grid;grid-template-columns:42px 1fr;gap:14px;padding:16px;border:1px solid #e2e8f0;border-radius:12px}
.backend-setup-body article>b{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fee2e2;color:#b91c1c}
.backend-setup-body h3{margin:0 0 5px;font-size:15px}
.backend-setup-body p{margin:0;color:#64748b;font-size:10px;line-height:1.55}
.backend-setup-body pre{margin:10px 0 0;padding:12px;overflow:auto;border-radius:9px;background:#0f172a;color:#e2e8f0;font-size:10px}
.backend-setup-note{padding:14px;border-radius:10px;background:#fff7ed;color:#9a3412;font-size:10px;line-height:1.55}
.backend-status{
position:fixed;right:18px;bottom:18px;z-index:4000;padding:12px 15px;border-radius:10px;background:#111827;color:#fff;font-size:10px;font-weight:800;box-shadow:0 15px 35px rgba(0,0,0,.25)
}
.backend-status.ok{background:#15803d}
.backend-status.error{background:#b45309}
.ai-badge{display:inline-block;margin-left:6px;padding:3px 6px;border-radius:999px;background:#ede9fe;color:#6d28d9;font-size:8px;font-style:normal;font-weight:800}
@media(max-width:760px){
.backend-control-panel{align-items:flex-start;flex-direction:column}
.backend-control-actions{width:100%;justify-content:space-between}
}
/* Permanent cloud upload feedback */
.cloud-project-status{
display:inline-flex;
align-items:center;
gap:7px;
margin-top:8px;
color:#94a3b8;
font-size:9px;
font-weight:800;
}
.cloud-project-status i{
width:8px;height:8px;border-radius:50%;background:#94a3b8
}
.cloud-project-status.connected{color:#86efac}
.cloud-project-status.connected i{background:#22c55e}
.cloud-upload-progress{
position:sticky;
top:0;
z-index:20;
margin:-10px 0 15px;
padding:11px 13px;
border:1px solid #bfdbfe;
border-radius:10px;
background:#eff6ff;
color:#1d4ed8;
font-size:10px;
font-weight:800;
}
.cloud-upload-progress>div{
height:7px;
margin-top:8px;
overflow:hidden;
border-radius:999px;
background:#dbeafe;
}
.cloud-upload-progress i{
display:block;
width:0;
height:100%;
background:#2563eb;
transition:width .25s ease;
}
.cloud-media-item .cloud-ai-done{
position:absolute;
left:6px;
bottom:6px;
padding:4px 6px;
border-radius:999px;
background:rgba(22,163,74,.9);
color:#fff;
font-size:7px;
font-weight:900;
}
.cloud-receipt-analysis{
margin-top:10px;
padding:9px;
border-radius:8px;
background:#f8fafc;
}
.cloud-receipt-analysis b,
.cloud-receipt-analysis span{
display:block;
}
.cloud-receipt-analysis b{
color:#6d28d9;
font-size:8px;
text-transform:uppercase;
}
.cloud-receipt-analysis span{
margin-top:4px;
color:#64748b;
font-size:9px;
line-height:1.45;
}
/* Functional controls added without redesigning the existing portal */
.file-toolbar-actions,.company-file-controls,.company-file-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.company-file-controls{margin:0 0 14px}
.company-file-controls input,.company-file-controls select,.live-record-select{
min-height:38px;padding:8px 10px;border:1px solid #d8dde5;border-radius:8px;background:#fff;color:#111827
}
.company-file-controls input{flex:1;min-width:220px}
.folder-card-live{
display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:18px;border:1px solid #e1e5eb;border-radius:13px;background:#fff;text-align:left;cursor:pointer
}
.folder-card-live strong{font-size:12px}.folder-card-live span{color:#64748b;font-size:9px}
.company-file-list{display:grid;gap:8px}
.company-file-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px;border:1px solid #e6e9ee;border-radius:10px;background:#fff}
.company-file-main{display:flex;align-items:center;gap:11px;min-width:0}.company-file-main>span{font-size:22px}
.company-file-main div{min-width:0}.company-file-main strong,.company-file-main small{display:block}
.company-file-main strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}.company-file-main small{margin-top:4px;color:#64748b;font-size:8px}
.company-file-actions button{padding:7px 9px;border:1px solid #d8dde5;border-radius:7px;background:#fff;font-size:8px;font-weight:800;cursor:pointer}
.empty-live-state{padding:28px;text-align:center;color:#64748b;font-size:11px}
@media(max-width:700px){.company-file-row{align-items:flex-start;flex-direction:column}.company-file-actions{width:100%}.company-file-actions button{flex:1}}
/* Functional receipt controls — preserves the existing visual system */
.apt-receipt-ai-status{font-size:11px;line-height:1.4;color:#667085;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:8px 10px}
.apt-receipt-actions{display:flex;gap:8px;align-items:center;margin-top:2px}
.apt-receipt-actions button,.apt-receipt-actions label{border:1px solid #d0d5dd;background:#fff;color:#101828;border-radius:8px;padding:8px 10px;font-size:11px;font-weight:700;cursor:pointer;text-align:center;flex:1}
.apt-receipt-actions input{display:none}
/* Invoice Center — preserves the existing project-control design */
.apt-invoice-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:18px;align-items:start}.apt-invoice-sidebar,.apt-invoice-editor{background:#fff;border:1px solid #dfe5ed;border-radius:16px;padding:16px}.apt-invoice-summary-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}.apt-invoice-summary-cards article{border:1px solid #e2e7ef;border-radius:12px;padding:12px}.apt-invoice-summary-cards span{display:block;font-size:11px;color:#657084;font-weight:700;margin-bottom:5px}.apt-invoice-summary-cards strong{font-size:18px;color:#111827}.apt-invoice-sidebar>label{display:block;font-weight:700;font-size:12px}.apt-invoice-sidebar input,.apt-invoice-editor input,.apt-invoice-editor select,.apt-invoice-editor textarea{width:100%;box-sizing:border-box;margin-top:6px;border:1px solid #d7dee8;border-radius:9px;padding:10px 11px;font:inherit;background:#fff;color:#111827}.apt-invoice-list{display:grid;gap:8px;margin-top:14px;max-height:520px;overflow:auto}.apt-invoice-list-item{width:100%;text-align:left;border:1px solid #e0e6ee;background:#fff;border-radius:11px;padding:12px;cursor:pointer}.apt-invoice-list-item:hover,.apt-invoice-list-item.active{border-color:#ef2b2d;box-shadow:0 0 0 2px rgba(239,43,45,.08)}.apt-invoice-list-item strong,.apt-invoice-list-item span,.apt-invoice-list-item small{display:block}.apt-invoice-list-item strong{color:#111827}.apt-invoice-list-item span{font-size:12px;color:#586477;margin:3px 0}.apt-invoice-list-item small{display:flex;justify-content:space-between;color:#788398}.apt-invoice-empty{text-align:center;padding:80px 20px;color:#667085}.apt-invoice-empty strong{display:block;color:#172033;font-size:20px;margin-bottom:8px}.apt-invoice-top-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.apt-invoice-top-grid label,.apt-invoice-bottom label{font-size:12px;font-weight:700;color:#263247}.apt-invoice-items-wrap{margin-top:18px}.apt-invoice-items-table input,.apt-invoice-items-table select{margin:0;min-width:80px}.apt-invoice-items-table td:first-child input{min-width:220px}.apt-add-line{margin-top:10px}.apt-invoice-bottom{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;margin-top:20px;align-items:start}.apt-invoice-totals{border:1px solid #e1e6ee;border-radius:13px;padding:15px;display:grid;gap:11px}.apt-invoice-totals>div,.apt-invoice-totals>label{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0}.apt-invoice-totals>label input{width:120px;margin:0;text-align:right}.apt-invoice-grand{border-top:1px solid #dfe4eb;padding-top:12px;font-size:18px}.apt-invoice-actions{display:flex;align-items:center;justify-content:space-between;margin-top:18px}.apt-danger-outline{color:#c31e22;border-color:#f0b7b8}.apt-invoice-status{display:inline-block;border-radius:999px;padding:3px 8px;font-weight:700}.apt-invoice-status.paid{background:#dcfce7;color:#16713c}.apt-invoice-status.overdue{background:#fee2e2;color:#a7191d}.apt-invoice-status.draft{background:#eef2f7;color:#596579}.apt-invoice-status.sent,.apt-invoice-status.partially-paid{background:#dbeafe;color:#1d4ed8}@media(max-width:900px){.apt-invoice-layout{grid-template-columns:1fr}.apt-invoice-bottom{grid-template-columns:1fr}.apt-invoice-top-grid{grid-template-columns:1fr}}
@media print{body.apt-printing-invoice *{visibility:hidden!important}body.apt-printing-invoice #aptModal,body.apt-printing-invoice #aptModal *,body.apt-printing-invoice [data-apt-panel="invoices"],body.apt-printing-invoice [data-apt-panel="invoices"] *{visibility:visible!important}body.apt-printing-invoice .apt-tabs,body.apt-printing-invoice .apt-header-actions,body.apt-printing-invoice .apt-invoice-sidebar,body.apt-printing-invoice .apt-section-head .apt-header-inline,body.apt-printing-invoice .apt-add-line,body.apt-printing-invoice .apt-remove-row,body.apt-printing-invoice .apt-invoice-actions{display:none!important}body.apt-printing-invoice #aptModal{position:static!important;background:#fff!important}body.apt-printing-invoice .apt-shell{position:static!important;width:100%!important;max-width:none!important;height:auto!important;box-shadow:none!important;border:none!important}body.apt-printing-invoice .apt-layout{display:block!important}body.apt-printing-invoice .apt-invoice-editor{border:none!important;padding:0!important}}
/* Functional save confirmation; preserves the existing button design. */
.apt-save-btn.apt-save-confirmed { filter: brightness(.92); }
.portfolio-page-cta{display:flex;justify-content:center;margin-top:34px}.portfolio-page-cta .primary-btn{display:inline-flex;text-decoration:none;align-items:center;justify-content:center}
/* Worker application live-management upgrade */
.worker-contact{display:block;margin-top:4px;color:#718096;font-weight:500;white-space:normal}
.worker-status-select{min-width:138px;border:1px solid #d7deea;border-radius:999px;background:#fff;padding:9px 34px 9px 12px;font-weight:800;text-transform:none;cursor:pointer}
.worker-view-btn{white-space:nowrap}
.empty-worker-row{text-align:center;padding:34px!important;color:#718096}
.worker-detail-modal{position:fixed;inset:0;background:rgba(3,9,18,.74);display:none;align-items:center;justify-content:center;padding:24px;z-index:10050}
.worker-detail-modal.open{display:flex}
.worker-detail-card{position:relative;width:min(760px,96vw);max-height:88vh;overflow:auto;background:#fff;border-radius:24px;padding:34px;box-shadow:0 30px 90px rgba(0,0,0,.38)}
.worker-detail-close{position:absolute;right:18px;top:16px;width:40px;height:40px;border:0;border-radius:50%;background:#f1f4f8;font-size:28px;line-height:1;cursor:pointer}
.worker-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:22px}
.worker-detail-grid>div{border:1px solid #e2e7ef;border-radius:14px;padding:14px;background:#f9fafc}
.worker-detail-grid small{display:block;color:#6c7687;font-weight:800;margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em;font-size:11px}
.worker-detail-grid strong,.worker-detail-grid p{color:#111827;margin:0;white-space:pre-wrap}
.worker-detail-grid .worker-notes{grid-column:1/-1}
.form-message.error{color:#b91c1c}
@media(max-width:700px){.worker-detail-grid{grid-template-columns:1fr}.worker-detail-card{padding:26px 18px}.table-wrap{overflow-x:auto}}
/* Temporary module notice */
.construction-banner{display:flex;align-items:center;gap:14px;margin:0 0 18px;padding:15px 18px;border:1px solid #fecaca;border-left:5px solid #dc2626;border-radius:12px;background:linear-gradient(90deg,#fff1f2,#ffffff);box-shadow:0 8px 22px rgba(127,29,29,.08)}
.construction-banner strong{color:#991b1b;font-size:13px;letter-spacing:.7px;white-space:nowrap}
.construction-banner span{color:#4b5563;font-size:12px;line-height:1.5}
@media(max-width:650px){.construction-banner{align-items:flex-start;flex-direction:column;gap:6px}}
/* Worker application management actions */
.worker-action-group{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.worker-email-btn{white-space:nowrap}
.worker-delete-btn{white-space:nowrap;border-color:#fecaca!important;color:#b91c1c!important;background:#fff7f7!important}
.worker-delete-btn:hover{background:#fee2e2!important}
/* Customer quote manager */
.lead-customer-meta{display:block;margin-top:4px;color:#718096;font-weight:500;white-space:normal}
.lead-action-group{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.lead-detail-card{width:min(920px,96vw);max-height:92vh;overflow:auto}
.lead-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}
.lead-detail-grid>div{background:#f7f9fc;border:1px solid #e5e9f0;border-radius:12px;padding:12px}
.lead-detail-grid small{display:block;color:#697386;margin-bottom:4px;text-transform:uppercase;font-size:11px;font-weight:800;letter-spacing:.05em}
.lead-detail-grid strong,.lead-detail-grid p{display:block;margin:0;white-space:pre-wrap}
.lead-quote-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.lead-quote-form label{display:grid;gap:6px;font-weight:800;color:#1a2333}
.lead-quote-form label.wide{grid-column:1/-1}
.lead-quote-form input,.lead-quote-form textarea{width:100%;border:1px solid #d8dee9;border-radius:10px;padding:11px 12px;font:inherit;background:#fff;color:#111827;box-sizing:border-box}
.lead-modal-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.lead-email-result{min-height:22px;margin:12px 0 0;color:#334155;font-weight:700}
@media(max-width:700px){.lead-detail-grid,.lead-quote-form{grid-template-columns:1fr}.lead-quote-form label.wide{grid-column:auto}}
/* Branded worker application delete confirmation */
.worker-confirm-modal{position:fixed;inset:0;z-index:9999;display:none;place-items:center;padding:20px;background:rgba(7,12,22,.72);backdrop-filter:blur(5px)}
.worker-confirm-modal.open{display:grid}
.worker-confirm-card{width:min(440px,94vw);background:#fff;border:1px solid #e5e7eb;border-radius:22px;padding:30px;box-shadow:0 30px 90px rgba(15,23,42,.35);text-align:center}
.worker-confirm-icon{width:52px;height:52px;border-radius:16px;margin:0 auto 16px;display:grid;place-items:center;background:#fee2e2;color:#b91c1c;font-size:28px;font-weight:900}
.worker-confirm-card h2{margin:4px 0 10px;color:#111827;font-size:25px;letter-spacing:-.5px}
.worker-confirm-card p{margin:0 auto 22px;color:#64748b;line-height:1.6;max-width:350px}
.worker-confirm-actions{display:flex;justify-content:center;gap:10px}
.worker-confirm-actions .mini-btn{min-width:140px;padding:11px 15px}
.worker-confirm-delete{background:#dc2626!important;color:#fff!important;border-color:#dc2626!important}
.worker-confirm-delete:hover{background:#b91c1c!important}
.worker-confirm-delete:disabled{opacity:.65;cursor:wait}
@media(max-width:520px){.worker-confirm-actions{flex-direction:column}.worker-confirm-actions .mini-btn{width:100%}}
/* Worker application status colors */
.worker-status-select{font-weight:800;border-width:1px!important;transition:background-color .2s,border-color .2s,color .2s,box-shadow .2s}
.worker-status-select.status-new{background:#eef2f7!important;border-color:#cbd5e1!important;color:#475569!important}
.worker-status-select.status-under_review{background:#fff5d6!important;border-color:#f3cf67!important;color:#8a5a00!important}
.worker-status-select.status-accepted{background:#dcfce7!important;border-color:#86efac!important;color:#166534!important}
.worker-status-select.status-rejected{background:#fee2e2!important;border-color:#fca5a5!important;color:#991b1b!important}
.worker-status-select:focus{box-shadow:0 0 0 3px rgba(15,23,42,.10)!important}
/* =========================================================
MOBILE MANAGEMENT PORTAL PRIVACY FIX
Keeps every dashboard element completely hidden until a
verified Supabase administrator session is active.
========================================================= */
body.portal-modal-open{
overflow:hidden !important;
touch-action:none;
}
/* The mobile dashboard rule previously overrode .hidden. */
#loginView.hidden,
#dashboardView.hidden{
display:none !important;
}
@media (max-width:650px){
#portalModal{
padding:0 !important;
background:#f7f8fa !important;
align-items:stretch !important;
justify-items:stretch !important;
}
#portalModal .modal-shell{
width:100vw !important;
max-width:none !important;
height:100dvh !important;
min-height:100dvh !important;
max-height:none !important;
border-radius:0 !important;
overflow:auto !important;
-webkit-overflow-scrolling:touch;
}
#portalModal #loginView{
width:min(100%,520px) !important;
min-height:100dvh !important;
margin:0 auto !important;
padding:110px 28px 48px !important;
display:flex;
flex-direction:column;
justify-content:flex-start;
background:#f7f8fa;
}
#portalModal #loginView.hidden,
#portalModal #dashboardView.hidden{
display:none !important;
}
#portalModal .close-modal{
position:fixed !important;
top:max(18px,env(safe-area-inset-top)) !important;
right:18px !important;
z-index:1000001 !important;
}
}
/* =========================================================
STRICT PORTAL AUTH VISIBILITY
The management dashboard must never render behind the login.
It becomes visible only after backend-app.js verifies an admin.
========================================================= */
body:not(.portal-admin-authenticated) #portalModal #dashboardView {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
body.portal-admin-authenticated #portalModal #loginView {
display: none !important;
}
@media (max-width:650px) {
body:not(.portal-admin-authenticated) #portalModal .modal-shell {
overflow: hidden !important;
background: #f7f8fa !important;
}
body:not(.portal-admin-authenticated) #portalModal #loginView {
display: flex !important;
position: absolute !important;
inset: 0 !important;
z-index: 20 !important;
overflow-y: auto !important;
}
body:not(.portal-admin-authenticated) #portalModal #dashboardView,
body:not(.portal-admin-authenticated) #portalModal aside,
body:not(.portal-admin-authenticated) #portalModal .dashboard-content,
body:not(.portal-admin-authenticated) #portalModal .backend-control-panel,
body:not(.portal-admin-authenticated) #portalModal .portal-edit-toolbar,
body:not(.portal-admin-authenticated) #portalModal .dash-panel {
display: none !important;
}
}
/* =========================================================
NATIONAL IMAGING — COMPLETE MOBILE EXPERIENCE (2026-07)
This block intentionally comes last so it wins over legacy
desktop-first rules without changing desktop behavior.
========================================================= */
@media (max-width: 768px) {
html, body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
-webkit-text-size-adjust: 100%;
}
body {
background: #f7f8fa;
}
img, video, canvas, svg {
max-width: 100%;
}
button, a, input, select, textarea {
-webkit-tap-highlight-color: transparent;
}
button, .btn, .nav-cta, .portal-link {
min-height: 44px;
}
/* The desktop artwork is a single wide image and is not usable on phones.
Mobile uses the real responsive header and hero directly below it. */
.premium-cover {
display: none !important;
}
.legacy-header {
position: sticky !important;
top: 0;
z-index: 900;
min-height: 68px !important;
height: auto !important;
padding: 10px 16px !important;
gap: 12px;
background: rgba(255,255,255,.97) !important;
box-shadow: 0 8px 28px rgba(15,23,42,.08);
}
.legacy-header .brand {
min-width: 0;
flex: 1;
}
.legacy-header .brand-mark {
width: 40px;
height: 40px;
border-radius: 11px;
flex: 0 0 40px;
}
.legacy-header .brand strong {
font-size: 15px;
line-height: 1.1;
}
.legacy-header .brand small {
display: block !important;
max-width: 180px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 8px;
}
#menuBtn {
display: none !important;
}
.mobile-menu-toggle {
display: grid !important;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid #e5e7eb;
border-radius: 12px;
background: #fff;
color: #111827;
font-size: 24px;
line-height: 1;
flex: 0 0 44px;
}
.site-header nav {
position: fixed !important;
top: 68px;
left: 12px;
right: 12px;
z-index: 899;
display: none !important;
max-height: calc(100dvh - 86px);
overflow-y: auto;
padding: 14px;
border: 1px solid #e5e7eb;
border-radius: 18px;
background: rgba(255,255,255,.99);
box-shadow: 0 24px 60px rgba(15,23,42,.2);
}
.site-header nav.mobile-open {
display: grid !important;
grid-template-columns: 1fr;
gap: 6px;
}
.site-header nav a,
.site-header nav button {
width: 100%;
min-height: 48px;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 12px 14px !important;
border-radius: 11px;
font-size: 15px;
}
.site-header nav .nav-cta,
.site-header nav .portal-link {
justify-content: center;
margin-top: 4px;
}
.quick-contact-bar {
display: grid !important;
grid-template-columns: 1fr;
gap: 4px;
padding: 10px 16px !important;
text-align: center;
font-size: 11px;
line-height: 1.4;
}
.quick-contact-bar span {
display: none;
}
.quick-contact-bar a {
padding: 3px 0;
overflow-wrap: anywhere;
}
.legacy-hero {
min-height: auto !important;
display: block !important;
padding: 58px 18px 48px !important;
background: radial-gradient(circle at 92% 0,#fee2e2 0,transparent 34%),linear-gradient(180deg,#fff,#f4f5f7) !important;
}
.legacy-hero .hero-copy {
max-width: none;
}
.legacy-hero .hero-copy > .eyebrow {
margin-bottom: 12px;
}
.legacy-hero h1 {
max-width: 580px;
margin-bottom: 20px;
font-size: clamp(39px, 11vw, 58px) !important;
line-height: 1.01 !important;
letter-spacing: -2.4px !important;
}
.legacy-hero .hero-copy > p {
font-size: 16px !important;
line-height: 1.65;
}
.hero-actions {
display: grid !important;
grid-template-columns: 1fr;
gap: 10px;
margin: 26px 0;
}
.hero-actions .btn {
width: 100%;
min-height: 52px;
}
.trust-row {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 18px 14px;
}
.station-stage {
min-height: 320px !important;
margin-top: 34px;
border-radius: 20px;
}
.section,
.work-section,
.live-build-section,
.split-section,
.quote-section,
.marathon-projects-section {
padding: 64px 18px !important;
}
.section-heading,
.marathon-heading {
margin-bottom: 30px;
}
.section-heading h2,
.quote-copy h2,
.career-copy h2,
.marathon-heading h2 {
font-size: clamp(34px, 9vw, 46px) !important;
line-height: 1.05 !important;
letter-spacing: -1.8px !important;
}
.section-heading p,
.quote-copy p,
.career-copy p,
.marathon-heading p {
font-size: 15px;
line-height: 1.7;
}
.service-grid,
.project-grid,
.timeline,
.split-section,
.quote-section,
.form-grid,
.marathon-gallery,
.marathon-feature {
grid-template-columns: 1fr !important;
}
.service-grid {
gap: 13px;
}
.service-grid article {
padding: 23px;
border-radius: 16px;
}
.project-grid {
gap: 14px;
}
.project-card {
height: 330px !important;
border-radius: 18px;
}
.timeline {
gap: 8px;
}
.timeline > div {
padding: 18px 18px 18px 68px;
border: 1px solid #e5e7eb;
border-radius: 15px;
background: #fff;
}
.timeline b {
position: absolute;
left: 16px;
top: 16px;
margin: 0;
}
.timeline div:not(:last-child):after {
display: none;
}
.form-card {
padding: 22px 17px;
border-radius: 18px;
}
.form-card input,
.form-card select,
.form-card textarea {
min-height: 48px;
font-size: 16px;
}
.form-card textarea {
min-height: 120px;
}
.marathon-heading {
display: grid !important;
grid-template-columns: 1fr auto !important;
gap: 15px;
}
.marathon-heading > img {
width: 72px !important;
height: 72px;
padding: 9px !important;
}
.marathon-feature {
border-radius: 18px;
overflow: hidden;
}
.marathon-feature > img {
width: 100%;
height: 245px !important;
object-fit: cover;
}
.marathon-feature-copy {
padding: 26px 20px !important;
}
.marathon-photo,
.marathon-photo.large-photo,
.marathon-photo.wide-photo {
min-height: 230px;
grid-column: auto !important;
grid-row: auto !important;
}
.marathon-bottom-cta {
padding: 24px 20px;
border-radius: 18px;
}
.marathon-bottom-cta .btn {
width: 100%;
}
.build-scene,
.real-build-scene {
border-radius: 18px;
}
footer {
align-items: flex-start !important;
padding: 34px 18px calc(34px + env(safe-area-inset-bottom)) !important;
text-align: left !important;
}
/* Management portal — phone-native layout after sign-in */
#portalModal {
padding: 0 !important;
}
#portalModal .modal-shell {
width: 100vw !important;
height: 100dvh !important;
max-height: none !important;
border-radius: 0 !important;
}
#portalModal #loginView {
width: 100% !important;
max-width: 500px;
min-height: 100dvh;
padding: calc(88px + env(safe-area-inset-top)) 22px calc(34px + env(safe-area-inset-bottom)) !important;
}
#portalModal #loginView h2 {
font-size: clamp(34px, 9vw, 46px);
line-height: 1.08;
letter-spacing: -1.8px;
}
#portalModal #loginView input {
min-height: 54px;
font-size: 16px;
}
#portalModal #loginView .btn {
min-height: 54px;
font-size: 17px;
}
body.portal-admin-authenticated #portalModal .modal-shell {
overflow: hidden !important;
}
body.portal-admin-authenticated #portalModal #dashboardView.dashboard-view {
height: 100dvh;
display: flex !important;
flex-direction: column;
overflow: hidden;
}
body.portal-admin-authenticated #portalModal #dashboardView > aside {
order: 0;
flex: 0 0 auto;
display: flex !important;
width: 100%;
min-height: 62px;
height: auto !important;
padding: 8px 10px !important;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-inline: contain;
scrollbar-width: none;
border-right: 0;
border-bottom: 1px solid #263244;
}
body.portal-admin-authenticated #portalModal #dashboardView > aside::-webkit-scrollbar {
display: none;
}
body.portal-admin-authenticated #portalModal .dash-tab {
flex: 0 0 auto;
min-height: 44px;
padding: 11px 14px;
white-space: nowrap;
border-radius: 10px;
}
body.portal-admin-authenticated #portalModal .dashboard-content {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: 18px 14px calc(32px + env(safe-area-inset-bottom)) !important;
}
body.portal-admin-authenticated #portalModal .dash-heading {
align-items: flex-start !important;
flex-direction: column;
gap: 12px;
}
body.portal-admin-authenticated #portalModal .dash-heading h2 {
font-size: 27px;
}
body.portal-admin-authenticated #portalModal .dash-heading button,
body.portal-admin-authenticated #portalModal .dash-heading .btn {
width: 100%;
}
body.portal-admin-authenticated #portalModal .metric-grid,
body.portal-admin-authenticated #portalModal .dash-grid,
body.portal-admin-authenticated #portalModal .folder-grid {
grid-template-columns: 1fr !important;
}
body.portal-admin-authenticated #portalModal .metric-card,
body.portal-admin-authenticated #portalModal .dash-card {
border-radius: 15px;
}
body.portal-admin-authenticated #portalModal .table-wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: 12px;
}
/* Project control modal — designed as a real mobile app screen */
.apt-modal {
padding: 0 !important;
background: #f4f6f9 !important;
}
.apt-shell {
width: 100vw !important;
height: 100dvh !important;
max-height: none !important;
border: 0 !important;
border-radius: 0 !important;
}
.apt-header {
position: relative;
min-height: auto !important;
display: grid !important;
grid-template-columns: minmax(0,1fr) auto;
align-items: start !important;
gap: 10px;
padding: calc(14px + env(safe-area-inset-top)) 14px 12px !important;
}
.apt-header > div:first-child {
min-width: 0;
}
.apt-header h2 {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 21px !important;
}
.apt-header p {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.apt-header-actions {
display: grid !important;
grid-template-columns: auto auto;
gap: 7px !important;
}
.apt-header-actions #aptExportProject {
display: none !important;
}
.apt-save-btn {
min-height: 42px;
padding: 9px 12px !important;
font-size: 11px;
}
.apt-close-btn {
width: 42px;
height: 42px;
}
.apt-layout {
height: calc(100dvh - 83px) !important;
display: flex !important;
flex-direction: column;
}
.apt-tabs {
position: sticky;
top: 0;
z-index: 10;
flex: 0 0 auto;
display: flex !important;
gap: 6px;
padding: 8px 10px !important;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
box-shadow: 0 4px 14px rgba(15,23,42,.15);
}
.apt-tabs::-webkit-scrollbar {
display: none;
}
.apt-tab {
flex: 0 0 auto;
width: auto !important;
min-height: 42px;
margin: 0 !important;
padding: 10px 13px !important;
border-radius: 10px;
white-space: nowrap;
}
.apt-content {
flex: 1 1 auto;
min-height: 0;
height: auto !important;
padding: 18px 14px calc(38px + env(safe-area-inset-bottom)) !important;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
.apt-section-head {
margin-bottom: 16px;
}
.apt-section-head h3 {
font-size: 25px;
}
.apt-section-head > button,
.apt-section-head .apt-header-inline {
width: 100%;
}
.apt-section-head > button,
.apt-section-head .apt-header-inline button {
width: 100%;
min-height: 46px;
}
.apt-form-grid,
.apt-financial-inputs,
.apt-receipt-form,
.apt-expense-tools,
.apt-upload-grid,
.apt-receipt-list,
.apt-report-grid,
.apt-invoice-layout,
.apt-invoice-top-grid,
.apt-invoice-bottom {
grid-template-columns: 1fr !important;
}
.apt-form-grid input,
.apt-form-grid select,
.apt-form-grid textarea,
.apt-financial-inputs input,
.apt-status-wrap select,
.apt-receipt-form input,
.apt-receipt-form select,
.apt-expense-tools input,
.apt-expense-tools select,
.apt-invoice-sidebar input,
.apt-invoice-editor input,
.apt-invoice-editor select,
.apt-invoice-editor textarea {
min-height: 48px;
font-size: 16px !important;
}
.apt-form-grid textarea,
.apt-invoice-editor textarea {
min-height: 110px;
}
.apt-status-options {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
}
.apt-status-option {
width: 100%;
min-height: 44px;
justify-content: flex-start;
}
.apt-metric-grid {
grid-template-columns: 1fr 1fr !important;
gap: 10px;
}
.apt-metric-grid article {
padding: 15px;
min-width: 0;
}
.apt-metric-grid strong {
font-size: 21px;
overflow-wrap: anywhere;
}
.apt-table-wrap {
margin-left: -14px;
margin-right: -14px;
border-left: 0;
border-right: 0;
border-radius: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.apt-table {
min-width: 780px;
}
.apt-ledger-footer {
align-items: flex-start;
flex-direction: column;
gap: 6px;
}
.apt-upload-card,
.apt-chart-card,
.apt-tax-card,
.apt-summary-table-card,
.apt-invoice-sidebar,
.apt-invoice-editor {
padding: 16px;
border-radius: 14px;
}
.apt-media-grid {
grid-template-columns: 1fr 1fr !important;
}
.apt-receipt-preview {
height: 210px;
}
.apt-chart-card canvas {
height: 230px !important;
}
.apt-invoice-actions {
align-items: stretch;
flex-direction: column;
gap: 9px;
}
.apt-invoice-actions button {
width: 100%;
min-height: 46px;
}
.apt-invoice-items-table td:first-child input {
min-width: 180px;
}
/* Detail dialogs */
.worker-detail-modal,
.lead-detail-modal,
.worker-confirm-modal {
padding: 0 !important;
}
.worker-detail-card,
.lead-detail-card,
.worker-confirm-card {
width: 100vw !important;
max-width: none !important;
min-height: 100dvh;
max-height: 100dvh !important;
border-radius: 0 !important;
padding: calc(64px + env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom)) !important;
overflow-y: auto;
}
}
@media (max-width: 430px) {
.legacy-header {
padding-inline: 12px !important;
}
.legacy-header .brand small {
max-width: 145px;
}
.legacy-hero,
.section,
.work-section,
.live-build-section,
.split-section,
.quote-section,
.marathon-projects-section {
padding-left: 14px !important;
padding-right: 14px !important;
}
.legacy-hero h1 {
font-size: 40px !important;
}
.trust-row {
grid-template-columns: 1fr;
}
.marathon-heading {
grid-template-columns: 1fr !important;
}
.marathon-heading > img {
width: 68px !important;
height: 68px;
}
.apt-metric-grid,
.apt-status-options,
.apt-media-grid {
grid-template-columns: 1fr !important;
}
.apt-header-actions {
grid-template-columns: auto auto;
}
.apt-save-btn {
font-size: 10px;
}
}
/* Manager login interaction reliability */
#managerLoginForm{width:100%;position:relative;z-index:30;pointer-events:auto!important}
#managerLoginForm label,#managerLoginForm input,#managerLoginForm button{pointer-events:auto!important}
#loginBtn:disabled{opacity:.7;cursor:wait}
#loginError{min-height:22px;margin-top:12px;font-weight:700}
/* NATIONAL IMAGING — TRUE MOBILE MANAGER MODE */
.mobile-manager-header{display:none}
@media (max-width: 700px){
body.portal-admin-authenticated{overflow:hidden}
body.portal-admin-authenticated #portalModal{padding:0!important;place-items:stretch!important;background:#eef1f5!important}
body.portal-admin-authenticated #portalModal .modal-shell{
width:100%!important;height:100dvh!important;max-width:none!important;max-height:none!important;
border-radius:0!important;overflow:hidden!important;background:#f4f6f9!important;
}
body.portal-admin-authenticated #portalModal .close-modal{display:none!important}
body.portal-admin-authenticated #portalModal #dashboardView.dashboard-view{
display:grid!important;grid-template-columns:1fr!important;grid-template-rows:auto 1fr auto!important;
height:100dvh!important;min-height:100dvh!important;width:100%!important;overflow:hidden!important;
}
body.portal-admin-authenticated #portalModal .mobile-manager-header{
display:flex!important;align-items:center;justify-content:space-between;gap:12px;
min-height:68px;padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
background:#111827;color:#fff;border-bottom:1px solid rgba(255,255,255,.1);z-index:40;
}
.mobile-manager-brand{display:flex;align-items:center;gap:10px;min-width:0}
.mobile-manager-brand .brand-mark{width:38px;height:38px;flex:0 0 38px;border-radius:10px}
.mobile-manager-brand strong,.mobile-manager-brand small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mobile-manager-brand strong{font-size:15px}.mobile-manager-brand small{font-size:11px;color:#cbd5e1;margin-top:2px}
.mobile-logout-btn{
display:inline-flex!important;align-items:center;justify-content:center;min-width:84px;min-height:44px;
border:1px solid rgba(255,255,255,.25);border-radius:11px;background:#fff;color:#991b1b;
font-weight:900;font-size:13px;padding:10px 13px;cursor:pointer;
}
body.portal-admin-authenticated #portalModal .dashboard-content{
grid-row:2!important;min-height:0!important;height:auto!important;overflow-y:auto!important;overflow-x:hidden!important;
-webkit-overflow-scrolling:touch;padding:16px 14px calc(28px + env(safe-area-inset-bottom))!important;
}
body.portal-admin-authenticated #portalModal #dashboardView>aside{
grid-row:3!important;position:relative!important;inset:auto!important;width:100%!important;height:auto!important;
display:flex!important;align-items:center!important;gap:5px!important;overflow-x:auto!important;overflow-y:hidden!important;
padding:8px 8px calc(8px + env(safe-area-inset-bottom))!important;background:#111827!important;
border-top:1px solid rgba(255,255,255,.12)!important;z-index:45!important;scrollbar-width:none;
}
body.portal-admin-authenticated #portalModal #dashboardView>aside::-webkit-scrollbar{display:none}
body.portal-admin-authenticated #portalModal .portal-brand,
body.portal-admin-authenticated #portalModal #logoutBtn{display:none!important}
body.portal-admin-authenticated #portalModal .dash-tab{
display:flex!important;flex:0 0 auto!important;align-items:center!important;justify-content:center!important;
min-width:104px!important;min-height:48px!important;margin:0!important;padding:9px 12px!important;
border-radius:11px!important;background:transparent!important;color:#cbd5e1!important;border:1px solid transparent!important;
font-size:11px!important;font-weight:800!important;white-space:nowrap!important;
}
body.portal-admin-authenticated #portalModal .dash-tab.active{background:#fff!important;color:#b91c1c!important;border-color:#fff!important}
body.portal-admin-authenticated #portalModal .backend-control-panel,
body.portal-admin-authenticated #portalModal .portal-edit-toolbar{border-radius:14px!important;padding:15px!important;gap:12px!important}
body.portal-admin-authenticated #portalModal .backend-control-actions,
body.portal-admin-authenticated #portalModal .portal-edit-actions{width:100%!important;display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
body.portal-admin-authenticated #portalModal .backend-control-actions button,
body.portal-admin-authenticated #portalModal .portal-edit-actions button{width:100%!important;min-height:44px!important}
body.portal-admin-authenticated #portalModal .dash-heading{display:flex!important;align-items:flex-start!important;flex-wrap:wrap!important;gap:10px!important;margin-bottom:14px!important}
body.portal-admin-authenticated #portalModal .dash-heading>div{width:100%!important}
body.portal-admin-authenticated #portalModal .dash-heading h2{font-size:25px!important;line-height:1.1!important;margin:3px 0!important}
body.portal-admin-authenticated #portalModal .dash-heading button{flex:1 1 145px!important;min-height:44px!important}
body.portal-admin-authenticated #portalModal .metric-grid,
body.portal-admin-authenticated #portalModal .dash-grid,
body.portal-admin-authenticated #portalModal .folder-grid{display:grid!important;grid-template-columns:1fr!important;gap:11px!important}
body.portal-admin-authenticated #portalModal .metric-grid>div,
body.portal-admin-authenticated #portalModal .dash-card,
body.portal-admin-authenticated #portalModal .portal-notes-card{border-radius:14px!important;padding:16px!important;min-width:0!important}
body.portal-admin-authenticated #portalModal .table-wrap{width:calc(100% + 28px)!important;margin-left:-14px!important;margin-right:-14px!important;overflow-x:auto!important;border-radius:0!important;-webkit-overflow-scrolling:touch}
body.portal-admin-authenticated #portalModal table{min-width:680px!important}
body.portal-admin-authenticated #portalModal input,
body.portal-admin-authenticated #portalModal select,
body.portal-admin-authenticated #portalModal textarea,
body.portal-admin-authenticated #portalModal button{font-size:16px}
body.portal-admin-authenticated #portalModal input,
body.portal-admin-authenticated #portalModal select{min-height:46px}
body.portal-admin-authenticated #portalModal .apt-overlay{inset:0!important;padding:0!important}
body.portal-admin-authenticated #portalModal .apt-modal{width:100%!important;height:100dvh!important;max-height:none!important;border-radius:0!important}
}
/* =========================================================
NATIONAL IMAGING — PHONE-ONLY MAIN LANDING PAGE
Desktop remains exactly as before. This page appears first
on phones before any portfolio content.
========================================================= */
.mobile-front-page { display: none; }
@media (max-width: 768px) {
.mobile-front-page {
display: flex !important;
min-height: 100svh;
align-items: center;
justify-content: center;
position: relative;
isolation: isolate;
padding: max(30px, env(safe-area-inset-top)) 18px max(34px, env(safe-area-inset-bottom));
overflow: hidden;
background:
radial-gradient(circle at 90% 6%, rgba(220,38,38,.22), transparent 34%),
radial-gradient(circle at 5% 92%, rgba(127,29,29,.18), transparent 35%),
linear-gradient(155deg, #0b1018 0%, #151b26 55%, #090d14 100%);
color: #fff;
}
.mobile-front-page::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
opacity: .16;
background-image:
linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
background-size: 34px 34px;
mask-image: linear-gradient(to bottom, #000, transparent 80%);
}
.mobile-front-inner {
width: min(100%, 480px);
margin: auto;
text-align: center;
}
.mobile-front-logo {
width: 68px;
height: 68px;
display: grid;
place-items: center;
margin: 0 auto 18px;
border: 1px solid rgba(255,255,255,.2);
border-radius: 20px;
background: linear-gradient(145deg, #ef4444, #991b1b);
box-shadow: 0 20px 45px rgba(220,38,38,.32);
font-size: 25px;
font-weight: 900;
letter-spacing: -1.5px;
}
.mobile-front-kicker {
margin: 0 0 10px;
color: #fca5a5;
font-size: 11px;
font-weight: 900;
letter-spacing: 1.7px;
text-transform: uppercase;
}
.mobile-front-page h1 {
margin: 0;
color: #fff;
font-size: clamp(38px, 11vw, 54px);
line-height: .98;
letter-spacing: -2.6px;
}
.mobile-front-intro {
max-width: 420px;
margin: 18px auto 27px;
color: #cbd5e1;
font-size: 14px;
line-height: 1.6;
}
.mobile-front-options {
display: grid;
gap: 12px;
text-align: left;
}
.mobile-front-option {
width: 100%;
min-height: 84px;
display: grid;
grid-template-columns: 48px minmax(0,1fr) 24px;
align-items: center;
gap: 13px;
padding: 14px 15px;
border: 1px solid rgba(255,255,255,.13);
border-radius: 18px;
background: rgba(255,255,255,.075);
box-shadow: 0 15px 35px rgba(0,0,0,.18);
color: #fff;
backdrop-filter: blur(13px);
-webkit-backdrop-filter: blur(13px);
transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.mobile-front-option:active {
transform: scale(.985);
background: rgba(255,255,255,.13);
border-color: rgba(255,255,255,.27);
}
.mobile-option-icon {
width: 48px;
height: 48px;
display: grid;
place-items: center;
border-radius: 14px;
background: #dc2626;
color: #fff;
font-size: 20px;
font-weight: 900;
}
.worker-option .mobile-option-icon { background: #fff; color: #111827; }
.work-option .mobile-option-icon { background: #334155; color: #fff; }
.mobile-option-copy {
min-width: 0;
}
.mobile-option-copy strong,
.mobile-option-copy small {
display: block;
}
.mobile-option-copy strong {
margin-bottom: 5px;
font-size: 16px;
font-weight: 850;
letter-spacing: -.25px;
}
.mobile-option-copy small {
color: #aeb9c8;
font-size: 11px;
line-height: 1.35;
}
.mobile-option-arrow {
color: #fff;
font-size: 31px;
font-weight: 300;
line-height: 1;
opacity: .8;
}
.mobile-front-contact {
display: flex;
flex-direction: column;
gap: 7px;
margin-top: 25px;
color: #94a3b8;
font-size: 11px;
}
.mobile-front-contact a {
color: #fff;
font-size: 13px;
font-weight: 800;
}
/* The new phone landing page is the first screen. The existing mobile
header and responsive content remain available immediately below it. */
.mobile-front-page + .marathon-projects-section {
margin-top: 0;
}
}
/* =========================================================
RESPONSIVE SECTION ACCORDIONS
Shortens the page on desktop, tablet, and mobile while keeping
the existing desktop and phone landing-page designs intact.
========================================================= */
@media (min-width: 0px) {
.desktop-accordion-section {
position: relative;
}
.desktop-accordion-toggle {
width: min(1180px, calc(100% - 48px));
margin: 0 auto;
padding: 20px 24px;
border: 1px solid rgba(15, 23, 42, 0.14);
border-radius: 16px;
background: rgba(255,255,255,0.92);
color: #111827;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
font: inherit;
cursor: pointer;
text-align: left;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
z-index: 2;
}
.desktop-accordion-toggle:hover {
transform: translateY(-2px);
border-color: rgba(190, 30, 45, 0.38);
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
}
.desktop-accordion-toggle:focus-visible {
outline: 3px solid rgba(190, 30, 45, 0.28);
outline-offset: 3px;
}
.desktop-accordion-title {
display: flex;
flex-direction: column;
gap: 4px;
}
.desktop-accordion-title strong {
font-size: clamp(1.2rem, 1.7vw, 1.65rem);
line-height: 1.15;
letter-spacing: -0.02em;
}
.desktop-accordion-title small {
font-size: .78rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
opacity: .62;
}
.desktop-accordion-arrow {
width: 42px;
height: 42px;
flex: 0 0 42px;
border-radius: 50%;
display: grid;
place-items: center;
background: #b91c2b;
color: #fff;
font-size: 1.15rem;
line-height: 1;
transition: transform .28s ease, background .22s ease;
}
.desktop-accordion-toggle[aria-expanded="true"] .desktop-accordion-arrow {
transform: rotate(180deg);
background: #111827;
}
.desktop-accordion-content {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
visibility: hidden;
transition: grid-template-rows .38s ease, opacity .28s ease, visibility 0s linear .38s;
}
.desktop-accordion-content.is-open {
grid-template-rows: 1fr;
opacity: 1;
visibility: visible;
transition: grid-template-rows .42s ease, opacity .32s ease, visibility 0s;
}
.desktop-accordion-inner {
min-height: 0;
overflow: hidden;
}
.desktop-accordion-content.is-open .desktop-accordion-inner {
overflow: visible;
}
.desktop-accordion-section:not(.accordion-open) {
padding-top: 32px !important;
padding-bottom: 32px !important;
}
.desktop-accordion-section.accordion-open .desktop-accordion-toggle {
margin-bottom: 26px;
}
.work-section .desktop-accordion-toggle,
.live-build-section .desktop-accordion-toggle,
.quote-section .desktop-accordion-toggle {
background: rgba(13, 20, 32, 0.92);
border-color: rgba(255,255,255,0.16);
color: #fff;
box-shadow: 0 10px 32px rgba(0,0,0,.24);
}
.work-section .desktop-accordion-toggle:hover,
.live-build-section .desktop-accordion-toggle:hover,
.quote-section .desktop-accordion-toggle:hover {
border-color: rgba(255,255,255,0.35);
}
}
@media (max-width: 900px) {
.desktop-accordion-section:not(.accordion-open) {
padding-top: 14px !important;
padding-bottom: 14px !important;
}
.desktop-accordion-toggle {
width: calc(100% - 28px);
padding: 16px 16px;
border-radius: 14px;
gap: 14px;
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.09);
}
.desktop-accordion-toggle:hover {
transform: none;
}
.desktop-accordion-title strong {
font-size: 1.12rem;
}
.desktop-accordion-title small {
font-size: .68rem;
letter-spacing: .1em;
}
.desktop-accordion-arrow {
width: 40px;
height: 40px;
flex-basis: 40px;
font-size: 1.1rem;
}
.desktop-accordion-section.accordion-open .desktop-accordion-toggle {
margin-bottom: 16px;
}
}
/* Mobile cleanup: keep only the primary rotating gas-station animation.
The larger field-build animation remains available on desktop. */
@media (max-width: 900px) {
.live-build-section {
display: none !important;
}
/* Make the portfolio accordion read as the general company work section. */
.marathon-projects-section .desktop-accordion-toggle {
background: rgba(13, 20, 32, 0.96);
border-color: rgba(255,255,255,0.16);
color: #fff;
}
.marathon-projects-section .desktop-accordion-arrow {
background: #b91c2b;
}
.marathon-projects-section.accordion-open .desktop-accordion-toggle {
margin-bottom: 14px;
}
.marathon-heading > img {
display: none;
}
}
/* Mobile Our Work composition: the capabilities hero and the one retained
station animation live inside the Our Work dropdown. Desktop is untouched. */
@media (max-width: 900px) {
.marathon-projects-section .mobile-work-hero {
margin: 0 !important;
padding: 28px 18px 34px !important;
border-radius: 0;
}
.marathon-projects-section .mobile-work-hero .hero-copy {
margin-bottom: 24px;
}
.marathon-projects-section .mobile-work-hero .hero-actions {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
.marathon-projects-section .mobile-work-hero .hero-actions .btn {
width: 100%;
min-height: 52px;
}
.marathon-projects-section .mobile-work-hero .trust-row {
margin-bottom: 22px;
}
.marathon-projects-section .mobile-work-hero .station-stage {
margin-top: 18px;
}
}
/* =========================================================
ALTERNATING ACCORDION COLOR PATTERN
Blue, white, blue, white across the existing sections.
Applies on desktop and mobile without changing section content.
========================================================= */
.desktop-accordion-toggle.accordion-theme-blue,
.work-section .desktop-accordion-toggle.accordion-theme-blue,
.live-build-section .desktop-accordion-toggle.accordion-theme-blue,
.quote-section .desktop-accordion-toggle.accordion-theme-blue,
.marathon-projects-section .desktop-accordion-toggle.accordion-theme-blue {
background: #123a66 !important;
color: #ffffff !important;
border-color: rgba(255,255,255,.22) !important;
box-shadow: 0 10px 28px rgba(18,58,102,.22) !important;
}
.desktop-accordion-toggle.accordion-theme-white,
.work-section .desktop-accordion-toggle.accordion-theme-white,
.live-build-section .desktop-accordion-toggle.accordion-theme-white,
.quote-section .desktop-accordion-toggle.accordion-theme-white,
.marathon-projects-section .desktop-accordion-toggle.accordion-theme-white {
background: #ffffff !important;
color: #111827 !important;
border-color: rgba(15,23,42,.15) !important;
box-shadow: 0 8px 24px rgba(15,23,42,.09) !important;
}
.desktop-accordion-toggle.accordion-theme-blue .desktop-accordion-arrow {
background: #ffffff !important;
color: #123a66 !important;
}
.desktop-accordion-toggle.accordion-theme-white .desktop-accordion-arrow {
background: #123a66 !important;
color: #ffffff !important;
}
.desktop-accordion-toggle.accordion-theme-blue[aria-expanded="true"] .desktop-accordion-arrow {
background: #e3262e !important;
color: #ffffff !important;
}
.desktop-accordion-toggle.accordion-theme-white[aria-expanded="true"] .desktop-accordion-arrow {
background: #e3262e !important;
color: #ffffff !important;
}
.desktop-accordion-toggle.accordion-theme-blue:hover {
border-color: rgba(255,255,255,.46) !important;
}
.desktop-accordion-toggle.accordion-theme-white:hover {
border-color: rgba(18,58,102,.35) !important;
}
/* FINAL ACCORDION BOX PATTERN
Alternate the actual accordion boxes only: blue, white, blue, white. */
.desktop-accordion-toggle.accordion-theme-blue {
background: #123a66 !important;
color: #ffffff !important;
border-color: rgba(255,255,255,.22) !important;
}
.desktop-accordion-toggle.accordion-theme-white {
background: #ffffff !important;
color: #111827 !important;
border-color: rgba(18,58,102,.18) !important;
}
.desktop-accordion-toggle.accordion-theme-blue .desktop-accordion-title small,
.desktop-accordion-toggle.accordion-theme-blue .desktop-accordion-title strong {
color: #ffffff !important;
}
.desktop-accordion-toggle.accordion-theme-white .desktop-accordion-title small {
color: #6b7280 !important;
}
.desktop-accordion-toggle.accordion-theme-white .desktop-accordion-title strong {
color: #111827 !important;
}
/* Requested correction: make the How It Works accordion match the blue card above it. */
#process > .desktop-accordion-toggle {
background: #123a66 !important;
color: #ffffff !important;
border-color: rgba(255,255,255,.22) !important;
box-shadow: 0 10px 28px rgba(18,58,102,.22) !important;
}
#process > .desktop-accordion-toggle .desktop-accordion-title small,
#process > .desktop-accordion-toggle .desktop-accordion-title strong {
color: #ffffff !important;
}
#process > .desktop-accordion-toggle .desktop-accordion-arrow {
background: #ffffff !important;
color: #123a66 !important;
}
#process > .desktop-accordion-toggle[aria-expanded="true"] .desktop-accordion-arrow {
background: #e3262e !important;
color: #ffffff !important;
}
/* FINAL: How It Works accordion must match the dark-blue accordion above. */
html body #process > button.desktop-accordion-toggle,
html body #process > .desktop-accordion-toggle,
html body section#process > button.desktop-accordion-toggle {
background: #123a66 !important;
background-image: none !important;
color: #ffffff !important;
border: 1px solid rgba(255,255,255,.22) !important;
box-shadow: 0 10px 28px rgba(18,58,102,.22) !important;
}
html body #process > .desktop-accordion-toggle .desktop-accordion-title,
html body #process > .desktop-accordion-toggle .desktop-accordion-title small,
html body #process > .desktop-accordion-toggle .desktop-accordion-title strong {
color: #ffffff !important;
}
html body #process > .desktop-accordion-toggle .desktop-accordion-arrow {
background: #ffffff !important;
color: #123a66 !important;
border-color: #ffffff !important;
}
html body #process > .desktop-accordion-toggle[aria-expanded="true"] .desktop-accordion-arrow {
background: #ffffff !important;
color: #123a66 !important;
}
/* =========================================================
FINAL SECTION + ACCORDION CONTRAST PATTERN
White section / blue card, then blue section / white card.
The background and card are never the same color.
========================================================= */
html body .desktop-accordion-section.accordion-section-bg-white {
background: #ffffff !important;
background-image: none !important;
}
html body .desktop-accordion-section.accordion-section-bg-blue {
background: #0d1a2d !important;
background-image: none !important;
}
html body .desktop-accordion-section.accordion-section-bg-white > .desktop-accordion-toggle {
background: #123a66 !important;
background-image: none !important;
color: #ffffff !important;
border: 1px solid rgba(255,255,255,.22) !important;
}
html body .desktop-accordion-section.accordion-section-bg-blue > .desktop-accordion-toggle {
background: #ffffff !important;
background-image: none !important;
color: #111827 !important;
border: 1px solid rgba(18,58,102,.18) !important;
}
html body .desktop-accordion-section.accordion-section-bg-white > .desktop-accordion-toggle .desktop-accordion-title,
html body .desktop-accordion-section.accordion-section-bg-white > .desktop-accordion-toggle .desktop-accordion-title small,
html body .desktop-accordion-section.accordion-section-bg-white > .desktop-accordion-toggle .desktop-accordion-title strong {
color: #ffffff !important;
}
html body .desktop-accordion-section.accordion-section-bg-blue > .desktop-accordion-toggle .desktop-accordion-title small {
color: #6b7280 !important;
}
html body .desktop-accordion-section.accordion-section-bg-blue > .desktop-accordion-toggle .desktop-accordion-title strong {
color: #111827 !important;
}
html body .desktop-accordion-section.accordion-section-bg-white > .desktop-accordion-toggle .desktop-accordion-arrow {
background: #ffffff !important;
color: #123a66 !important;
border-color: #ffffff !important;
}
html body .desktop-accordion-section.accordion-section-bg-blue > .desktop-accordion-toggle .desktop-accordion-arrow {
background: #123a66 !important;
color: #ffffff !important;
border-color: #123a66 !important;
}
/* Keep the contrast pattern on mobile too. */
@media (max-width: 900px) {
html body .desktop-accordion-section.accordion-section-bg-white,
html body .desktop-accordion-section.accordion-section-bg-blue {
padding-left: 16px !important;
padding-right: 16px !important;
}
}
/* =========================================================
FINAL WIDTH FIX — LAST TWO ACCORDION HEADERS
Make Become a Worker and Get a Quote match the full-width
accordion headers used by the other desktop sections.
========================================================= */
@media (min-width: 901px) {
html body #careers > .desktop-accordion-toggle,
html body #quote > .desktop-accordion-toggle {
grid-column: 1 / -1 !important;
width: calc(100% - 48px) !important;
max-width: 1180px !important;
justify-self: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
@media (max-width: 900px) {
html body #careers > .desktop-accordion-toggle,
html body #quote > .desktop-accordion-toggle {
width: calc(100% - 28px) !important;
max-width: none !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
/* =========================================================
MOBILE ACCORDION DESIGN — mobile only; desktop unchanged.
Every section background is dark blue, every accordion card is white,
and the existing circular blue arrow buttons remain intact.
========================================================= */
@media (max-width: 900px) {
html body .desktop-accordion-section,
html body .desktop-accordion-section.accordion-section-bg-white,
html body .desktop-accordion-section.accordion-section-bg-blue {
background: #0d1a2d !important;
background-image: none !important;
}
html body .desktop-accordion-section > .desktop-accordion-toggle,
html body .desktop-accordion-section.accordion-section-bg-white > .desktop-accordion-toggle,
html body .desktop-accordion-section.accordion-section-bg-blue > .desktop-accordion-toggle,
html body #process > .desktop-accordion-toggle {
background: #ffffff !important;
background-image: none !important;
color: #111827 !important;
border: 1px solid rgba(18,58,102,.16) !important;
box-shadow: 0 10px 28px rgba(0,0,0,.18) !important;
}
html body .desktop-accordion-section > .desktop-accordion-toggle .desktop-accordion-title,
html body .desktop-accordion-section > .desktop-accordion-toggle .desktop-accordion-title strong,
html body #process > .desktop-accordion-toggle .desktop-accordion-title,
html body #process > .desktop-accordion-toggle .desktop-accordion-title strong {
color: #111827 !important;
}
html body .desktop-accordion-section > .desktop-accordion-toggle .desktop-accordion-title small,
html body #process > .desktop-accordion-toggle .desktop-accordion-title small {
color: #6b7280 !important;
}
html body .desktop-accordion-section > .desktop-accordion-toggle .desktop-accordion-arrow,
html body #process > .desktop-accordion-toggle .desktop-accordion-arrow,
html body .desktop-accordion-section > .desktop-accordion-toggle[aria-expanded="true"] .desktop-accordion-arrow,
html body #process > .desktop-accordion-toggle[aria-expanded="true"] .desktop-accordion-arrow {
background: #123a66 !important;
color: #ffffff !important;
border-color: #123a66 !important;
}
}
/* =========================================================
APPROVED ACCORDION DESIGN — desktop and mobile
Continuous dark-blue section backgrounds with white accordion cards.
========================================================= */
html body .desktop-accordion-section,
html body .desktop-accordion-section.accordion-section-bg-white,
html body .desktop-accordion-section.accordion-section-bg-blue {
background: #0d1a2d !important;
background-image: none !important;
}
html body .desktop-accordion-section > .desktop-accordion-toggle,
html body .desktop-accordion-section.accordion-section-bg-white > .desktop-accordion-toggle,
html body .desktop-accordion-section.accordion-section-bg-blue > .desktop-accordion-toggle,
html body #process > .desktop-accordion-toggle,
html body #careers > .desktop-accordion-toggle,
html body #quote > .desktop-accordion-toggle {
background: #ffffff !important;
background-image: none !important;
color: #111827 !important;
border: 1px solid rgba(18, 58, 102, 0.16) !important;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18) !important;
}
html body .desktop-accordion-section > .desktop-accordion-toggle .desktop-accordion-title,
html body .desktop-accordion-section > .desktop-accordion-toggle .desktop-accordion-title strong,
html body #process > .desktop-accordion-toggle .desktop-accordion-title,
html body #process > .desktop-accordion-toggle .desktop-accordion-title strong {
color: #111827 !important;
}
html body .desktop-accordion-section > .desktop-accordion-toggle .desktop-accordion-title small,
html body #process > .desktop-accordion-toggle .desktop-accordion-title small {
color: #64748b !important;
opacity: 1 !important;
}
html body .desktop-accordion-section > .desktop-accordion-toggle .desktop-accordion-arrow,
html body #process > .desktop-accordion-toggle .desktop-accordion-arrow,
html body .desktop-accordion-section > .desktop-accordion-toggle[aria-expanded="true"] .desktop-accordion-arrow,
html body #process > .desktop-accordion-toggle[aria-expanded="true"] .desktop-accordion-arrow {
background: #1266c5 !important;
color: #ffffff !important;
border-color: #1266c5 !important;
}
html body .desktop-accordion-section > .desktop-accordion-toggle:hover {
border-color: rgba(18, 102, 197, 0.38) !important;
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22) !important;
}
/* =========================================================
FINAL ACCORDION CONTRAST FIX
Force every approved accordion header to remain a white card
with visible dark text and a blue circular arrow.
This intentionally overrides legacy alternating theme rules.
========================================================= */
html body main .desktop-accordion-section > button.desktop-accordion-toggle,
html body main .desktop-accordion-section > button.desktop-accordion-toggle.accordion-theme-blue,
html body main .desktop-accordion-section > button.desktop-accordion-toggle.accordion-theme-white,
html body main section#process > button.desktop-accordion-toggle,
html body main section#careers > button.desktop-accordion-toggle,
html body main section#quote > button.desktop-accordion-toggle {
background: #ffffff !important;
background-image: none !important;
color: #111827 !important;
border: 1px solid rgba(18, 58, 102, 0.16) !important;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18) !important;
}
html body main .desktop-accordion-section > button.desktop-accordion-toggle .desktop-accordion-title,
html body main .desktop-accordion-section > button.desktop-accordion-toggle .desktop-accordion-title strong,
html body main .desktop-accordion-section > button.desktop-accordion-toggle.accordion-theme-blue .desktop-accordion-title,
html body main .desktop-accordion-section > button.desktop-accordion-toggle.accordion-theme-blue .desktop-accordion-title strong,
html body main .desktop-accordion-section > button.desktop-accordion-toggle.accordion-theme-white .desktop-accordion-title,
html body main .desktop-accordion-section > button.desktop-accordion-toggle.accordion-theme-white .desktop-accordion-title strong {
color: #111827 !important;
opacity: 1 !important;
visibility: visible !important;
}
html body main .desktop-accordion-section > button.desktop-accordion-toggle .desktop-accordion-title small,
html body main .desktop-accordion-section > button.desktop-accordion-toggle.accordion-theme-blue .desktop-accordion-title small,
html body main .desktop-accordion-section > button.desktop-accordion-toggle.accordion-theme-white .desktop-accordion-title small {
color: #64748b !important;
opacity: 1 !important;
visibility: visible !important;
}
html body main .desktop-accordion-section > button.desktop-accordion-toggle .desktop-accordion-arrow,
html body main .desktop-accordion-section > button.desktop-accordion-toggle.accordion-theme-blue .desktop-accordion-arrow,
html body main .desktop-accordion-section > button.desktop-accordion-toggle.accordion-theme-white .desktop-accordion-arrow,
html body main .desktop-accordion-section > button.desktop-accordion-toggle[aria-expanded="true"] .desktop-accordion-arrow {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
border-radius: 999px !important;
background: #1266c5 !important;
color: #ffffff !important;
border: 1px solid #1266c5 !important;
opacity: 1 !important;
}
/* Keep the full accordion region continuously dark blue. */
html body main .desktop-accordion-section,
html body main .desktop-accordion-section.accordion-section-bg-white,
html body main .desktop-accordion-section.accordion-section-bg-blue {
background: #0d1a2d !important;
background-image: none !important;
}
/* =========================================================
FIRST ACCORDION CARD VISIBILITY FIX
The Marathon / Our Work section sits before , so the final
main-scoped contrast rules did not reach it. Keep it identical to
every other approved white accordion card.
========================================================= */
html body section.marathon-projects-section.desktop-accordion-section > button.desktop-accordion-toggle,
html body section.marathon-projects-section.desktop-accordion-section > button.desktop-accordion-toggle.accordion-theme-blue,
html body section.marathon-projects-section.desktop-accordion-section > button.desktop-accordion-toggle.accordion-theme-white {
background: #ffffff !important;
background-image: none !important;
color: #111827 !important;
border: 1px solid rgba(18, 58, 102, 0.16) !important;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18) !important;
}
html body section.marathon-projects-section.desktop-accordion-section > button.desktop-accordion-toggle .desktop-accordion-title,
html body section.marathon-projects-section.desktop-accordion-section > button.desktop-accordion-toggle .desktop-accordion-title strong {
display: block !important;
color: #111827 !important;
opacity: 1 !important;
visibility: visible !important;
}
html body section.marathon-projects-section.desktop-accordion-section > button.desktop-accordion-toggle .desktop-accordion-title small {
display: block !important;
color: #64748b !important;
opacity: 1 !important;
visibility: visible !important;
}
html body section.marathon-projects-section.desktop-accordion-section > button.desktop-accordion-toggle .desktop-accordion-arrow,
html body section.marathon-projects-section.desktop-accordion-section > button.desktop-accordion-toggle[aria-expanded="true"] .desktop-accordion-arrow {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
border-radius: 999px !important;
background: #1266c5 !important;
color: #ffffff !important;
border: 1px solid #1266c5 !important;
opacity: 1 !important;
visibility: visible !important;
}
/* =========================================================
FINAL ACCORDION ALIGNMENT FIX
Give every closed white accordion header identical dimensions,
alignment, spacing, and corner radius across all sections.
========================================================= */
html body .desktop-accordion-section:not(.accordion-open) {
padding-top: 32px !important;
padding-bottom: 32px !important;
}
html body .desktop-accordion-section > button.desktop-accordion-toggle,
html body main .desktop-accordion-section > button.desktop-accordion-toggle,
html body section.marathon-projects-section.desktop-accordion-section > button.desktop-accordion-toggle,
html body #process > button.desktop-accordion-toggle,
html body #careers > button.desktop-accordion-toggle,
html body #quote > button.desktop-accordion-toggle {
box-sizing: border-box !important;
width: min(1180px, calc(100% - 48px)) !important;
max-width: 1180px !important;
min-height: 92px !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 20px 24px !important;
border-radius: 16px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 20px !important;
}
html body .desktop-accordion-section > button.desktop-accordion-toggle .desktop-accordion-title {
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
justify-content: center !important;
}
html body .desktop-accordion-section > button.desktop-accordion-toggle .desktop-accordion-arrow {
margin: 0 !important;
flex: 0 0 42px !important;
}
@media (max-width: 900px) {
html body .desktop-accordion-section:not(.accordion-open) {
padding-top: 16px !important;
padding-bottom: 16px !important;
}
html body .desktop-accordion-section > button.desktop-accordion-toggle,
html body main .desktop-accordion-section > button.desktop-accordion-toggle,
html body section.marathon-projects-section.desktop-accordion-section > button.desktop-accordion-toggle,
html body #process > button.desktop-accordion-toggle,
html body #careers > button.desktop-accordion-toggle,
html body #quote > button.desktop-accordion-toggle {
width: calc(100% - 28px) !important;
max-width: none !important;
min-height: 78px !important;
padding: 16px !important;
border-radius: 14px !important;
gap: 14px !important;
}
html body .desktop-accordion-section > button.desktop-accordion-toggle .desktop-accordion-arrow {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
flex-basis: 40px !important;
}
}
/* =========================================================
BRANDS WE SERVICE FINAL ALIGNMENT
Match the Projects/Brands accordion header pixel-for-pixel with
the surrounding white accordion cards.
========================================================= */
html body main section#projects.desktop-accordion-section:not(.accordion-open) {
padding-top: 32px !important;
padding-bottom: 32px !important;
}
html body main section#projects.desktop-accordion-section > button.desktop-accordion-toggle {
box-sizing: border-box !important;
width: min(1180px, calc(100% - 48px)) !important;
max-width: 1180px !important;
height: 92px !important;
min-height: 92px !important;
margin: 0 auto !important;
padding: 20px 24px !important;
border-radius: 16px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 20px !important;
}
html body main section#projects.desktop-accordion-section > button.desktop-accordion-toggle .desktop-accordion-title {
margin: 0 !important;
padding: 0 !important;
line-height: 1.15 !important;
align-self: center !important;
}
html body main section#projects.desktop-accordion-section > button.desktop-accordion-toggle .desktop-accordion-arrow {
margin: 0 !important;
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
flex: 0 0 42px !important;
align-self: center !important;
}
@media (max-width: 900px) {
html body main section#projects.desktop-accordion-section:not(.accordion-open) {
padding-top: 16px !important;
padding-bottom: 16px !important;
}
html body main section#projects.desktop-accordion-section > button.desktop-accordion-toggle {
width: calc(100% - 28px) !important;
max-width: none !important;
height: 78px !important;
min-height: 78px !important;
padding: 16px !important;
border-radius: 14px !important;
gap: 14px !important;
}
html body main section#projects.desktop-accordion-section > button.desktop-accordion-toggle .desktop-accordion-arrow {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
flex-basis: 40px !important;
}
}
/* =========================================================
EXPANDED ACCORDION CONTENT CONTRAST FIX
Keep headings and supporting copy readable on the continuous
dark-blue accordion background without changing card styling.
========================================================= */
html body main .desktop-accordion-section.accordion-open > .section-heading h2,
html body main .desktop-accordion-section.accordion-open > .section-heading h1,
html body main .desktop-accordion-section.accordion-open > .section-heading h3,
html body .desktop-accordion-section.accordion-open > .section-heading h2,
html body .desktop-accordion-section.accordion-open > .section-heading h1,
html body .desktop-accordion-section.accordion-open > .section-heading h3 {
color: #ffffff !important;
opacity: 1 !important;
visibility: visible !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18) !important;
}
html body main .desktop-accordion-section.accordion-open > .section-heading p,
html body .desktop-accordion-section.accordion-open > .section-heading p {
color: #d7e1ee !important;
opacity: 1 !important;
visibility: visible !important;
}
html body main .desktop-accordion-section.accordion-open > .section-heading .eyebrow,
html body .desktop-accordion-section.accordion-open > .section-heading .eyebrow {
color: #ff3b3b !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Keep the descriptions inside the white service cards strong and readable. */
html body #services.desktop-accordion-section.accordion-open .service-grid article h3 {
color: #111827 !important;
opacity: 1 !important;
}
html body #services.desktop-accordion-section.accordion-open .service-grid article p {
color: #4b5563 !important;
opacity: 1 !important;
}
/* =========================================================
FINAL DARK-BACKGROUND TEXT VISIBILITY FIX
Remove inherited dark colors/opacity from all expanded accordion
content while preserving dark text inside white cards.
========================================================= */
html body main .desktop-accordion-section.accordion-open,
html body main .desktop-accordion-section.accordion-open > * {
opacity: 1 !important;
visibility: visible !important;
}
/* Process section: large heading, step headings, and descriptions. */
html body main #process.desktop-accordion-section.accordion-open > .section-heading h2 {
color: #ffffff !important;
opacity: 1 !important;
-webkit-text-fill-color: #ffffff !important;
}
html body main #process.desktop-accordion-section.accordion-open > .timeline h3 {
color: #ffffff !important;
opacity: 1 !important;
-webkit-text-fill-color: #ffffff !important;
}
html body main #process.desktop-accordion-section.accordion-open > .timeline p {
color: #d7e1ee !important;
opacity: 1 !important;
-webkit-text-fill-color: #d7e1ee !important;
}
html body main #process.desktop-accordion-section.accordion-open > .timeline b {
color: #ffffff !important;
opacity: 1 !important;
-webkit-text-fill-color: #ffffff !important;
}
html body main #process.desktop-accordion-section.accordion-open > .timeline div:not(:last-child)::after {
background: #d7e1ee !important;
opacity: .9 !important;
}
/* Any normal content displayed directly on the navy accordion background. */
html body main .desktop-accordion-section.accordion-open > .section-heading h2,
html body main .desktop-accordion-section.accordion-open > .section-heading h3,
html body main .desktop-accordion-section.accordion-open > .career-copy h2,
html body main .desktop-accordion-section.accordion-open > .quote-copy h2,
html body main .desktop-accordion-section.accordion-open > .about-intro h2,
html body main .desktop-accordion-section.accordion-open > .about-intro h3 {
color: #ffffff !important;
opacity: 1 !important;
-webkit-text-fill-color: #ffffff !important;
}
html body main .desktop-accordion-section.accordion-open > .section-heading p,
html body main .desktop-accordion-section.accordion-open > .career-copy p,
html body main .desktop-accordion-section.accordion-open > .quote-copy p,
html body main .desktop-accordion-section.accordion-open > .career-copy li,
html body main .desktop-accordion-section.accordion-open > .about-intro p {
color: #d7e1ee !important;
opacity: 1 !important;
-webkit-text-fill-color: #d7e1ee !important;
}
/* White cards must keep dark readable text. */
html body main .desktop-accordion-section.accordion-open .service-grid article,
html body main .desktop-accordion-section.accordion-open .form-card,
html body main .desktop-accordion-section.accordion-open .about-card,
html body main .desktop-accordion-section.accordion-open .project-card-copy {
opacity: 1 !important;
}
html body main .desktop-accordion-section.accordion-open .service-grid article h3,
html body main .desktop-accordion-section.accordion-open .form-card h3,
html body main .desktop-accordion-section.accordion-open .about-card h3 {
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
}
html body main .desktop-accordion-section.accordion-open .service-grid article p,
html body main .desktop-accordion-section.accordion-open .form-card p,
html body main .desktop-accordion-section.accordion-open .about-card p {
color: #4b5563 !important;
-webkit-text-fill-color: #4b5563 !important;
opacity: 1 !important;
}