/* ================================================================ Apex Power Washing AZ — Master Design System (apex.css) Single source of truth. Mirrors the blog design system. Fonts loaded via in each page's (Archivo + Inter). ================================================================ */ :root{ --ink:#0c0c0c; --ink-2:#171717; --ink-3:#222222; --white:#ffffff; --cream:#f4f3f0; --cream-2:#e9e8e3; --line:#e2e1db; --line-dark:#2c2c2c; --muted:#6f6f6b; --muted-2:#9b9b95; --muted-dark:#a3a3a0; --maxw:1240px; --r:14px; --ease:cubic-bezier(.22,.61,.36,1); } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;} body{ font-family:'Inter',system-ui,-apple-system,sans-serif; color:var(--ink); background:var(--white); line-height:1.6; font-size:17px; overflow-x:hidden; } img{display:block;max-width:100%;} a{color:inherit;text-decoration:none;} h1,h2,h3,h4{font-family:'Archivo',sans-serif;font-weight:800;line-height:1.04;letter-spacing:-.02em;} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;} section{position:relative;} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:.55em; font-family:'Archivo',sans-serif;font-weight:700;font-size:.95rem; letter-spacing:.01em; padding:1.05em 1.9em;border-radius:100px; cursor:pointer;border:1.5px solid transparent; transition:transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease); white-space:nowrap; } .btn svg{width:1.05em;height:1.05em;} .btn-primary{background:var(--ink);color:var(--white);border-color:var(--ink);} .btn-primary:hover{background:var(--ink-3);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.18);} .btn-light{background:var(--white);color:var(--ink);border-color:var(--white);} .btn-light:hover{transform:translateY(-2px);box-shadow:0 14px 34px -10px rgba(0,0,0,.6);} .btn-outline{background:transparent;color:var(--ink);border-color:var(--ink);} .btn-outline:hover{background:var(--ink);color:var(--white);transform:translateY(-2px);} .btn-ghost-light{background:rgba(255,255,255,.08);color:var(--white);border-color:rgba(255,255,255,.5);backdrop-filter:blur(6px);} .btn-ghost-light:hover{background:var(--white);color:var(--ink);transform:translateY(-2px);} .btn-block{width:100%;justify-content:center;} /* ---------- eyebrow + headings ---------- */ .eyebrow{ display:inline-flex;align-items:center;gap:.6em; font-family:'Archivo',sans-serif;font-weight:700; font-size:.78rem;letter-spacing:.22em;text-transform:uppercase; color:var(--muted); } .eyebrow::before{content:"";width:26px;height:1.5px;background:currentColor;display:inline-block;} .eyebrow.center::before{display:none;} .eyebrow.light{color:var(--muted-dark);} .sec-head{max-width:760px;} .sec-head h2{font-size:clamp(2.1rem,4.6vw,3.5rem);margin:.5em 0 .35em;} .sec-head p{color:var(--muted);font-size:1.06rem;} .center{text-align:center;} .center .sec-head{margin:0 auto;} .center .eyebrow::before{display:none;} /* ---------- header ---------- */ .header{ position:fixed;top:0;left:0;right:0;z-index:100; transition:background .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease); border-bottom:1px solid transparent; } .header-inner{display:flex;align-items:center;justify-content:space-between;height:72px;gap:32px;} .brand{display:flex;align-items:center;gap:11px;color:var(--white);transition:color .35s var(--ease);} .brand .logo-mark{width:42px;height:42px;flex:none;} .brand .logo-mark svg{width:100%;height:100%;} .brand .logo-text{font-family:'Archivo',sans-serif;font-weight:900;font-size:1.42rem;letter-spacing:.04em;line-height:1;} .brand .logo-sub{font-family:'Archivo',sans-serif;font-weight:600;font-size:.52rem;letter-spacing:.34em;display:block;margin-top:3px;opacity:.72;} .nav{display:flex;align-items:center;gap:34px;} .nav-links{display:flex;gap:28px;} .nav-links a{ font-family:'Archivo',sans-serif;font-weight:600;font-size:.92rem; color:var(--white);opacity:.82;transition:opacity .2s,color .35s var(--ease); } .nav-links a:hover{opacity:1;} .nav-cta{display:flex;align-items:center;gap:16px;} .nav-phone{ display:flex;align-items:center;gap:.5em;color:var(--white); font-family:'Archivo',sans-serif;font-weight:700;font-size:.95rem; transition:color .35s var(--ease); } .nav-phone svg{width:1em;height:1em;} /* scrolled state */ .header.scrolled{background:var(--white);box-shadow:0 1px 0 var(--line),0 10px 30px -18px rgba(0,0,0,.25);border-color:var(--line);} .header.scrolled .brand,.header.scrolled .nav-links a,.header.scrolled .nav-phone{color:var(--ink);} .header.scrolled .nav-links a{opacity:.7;} .header.scrolled .nav-links a:hover{opacity:1;} .header.scrolled .btn-ghost-light{background:var(--ink);color:var(--white);border-color:var(--ink);} .header.scrolled .btn-ghost-light:hover{background:var(--ink-3);} .menu-toggle{display:none;width:46px;height:46px;border:1.5px solid currentColor;border-radius:50%;background:transparent;color:var(--white);cursor:pointer;align-items:center;justify-content:center;transition:color .35s var(--ease);} .header.scrolled .menu-toggle{color:var(--ink);} .menu-toggle svg{width:20px;height:20px;} /* mobile menu */ .mobile-menu{ position:fixed;inset:0;z-index:200;background:var(--ink); display:flex;flex-direction:column;padding:30px 28px 40px; transform:translateY(-100%);transition:transform .5s var(--ease); visibility:hidden; } .mobile-menu.open{transform:translateY(0);visibility:visible;} .mm-top{display:flex;align-items:center;justify-content:space-between;} .mm-top .brand{color:var(--white);} .mm-close{width:46px;height:46px;border:1.5px solid rgba(255,255,255,.4);border-radius:50%;background:transparent;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;} .mm-close svg{width:20px;height:20px;} .mm-links{display:flex;flex-direction:column;gap:6px;margin-top:46px;} .mm-links a{ font-family:'Archivo',sans-serif;font-weight:800;font-size:2rem;color:#fff; padding:10px 0;border-bottom:1px solid var(--line-dark);letter-spacing:-.02em; } .mm-foot{margin-top:auto;display:flex;flex-direction:column;gap:14px;padding-top:30px;} .mm-foot .btn{width:100%;justify-content:center;} .mm-foot .nav-phone{color:#fff;font-size:1.15rem;justify-content:center;} /* ---------- hero ---------- */ .hero{ min-height:100svh;display:flex;align-items:flex-end; background:#000;position:relative;overflow:hidden; padding:140px 0 64px; } .hero-bg{position:absolute;inset:0;z-index:0;} .hero-bg img{width:100%;height:100%;object-fit:cover;} .hero-bg::after{ content:"";position:absolute;inset:0; background: linear-gradient(180deg,rgba(8,8,8,.55) 0%,rgba(8,8,8,.15) 32%,rgba(8,8,8,.55) 70%,rgba(8,8,8,.94) 100%), linear-gradient(90deg,rgba(8,8,8,.78) 0%,rgba(8,8,8,.30) 55%,rgba(8,8,8,.12) 100%); } .hero-inner{position:relative;z-index:2;width:100%;} .hero-badge{ display:inline-flex;align-items:center;gap:.55em; background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(8px); padding:.55em 1.1em;border-radius:100px; font-family:'Archivo',sans-serif;font-weight:600;font-size:.86rem; color:rgba(255,255,255,.85);margin-bottom:30px; } .hero-badge .stars{color:#fff;letter-spacing:.1em;font-size:.85rem;} .hero h1{ color:#fff;font-size:clamp(2.9rem,7.4vw,6.4rem);font-weight:900; margin:.34em 0 .28em;text-transform:uppercase;letter-spacing:-.03em; } .hero h1 .line2{ display:block;color:transparent; -webkit-text-stroke:1.6px rgba(255,255,255,.92); } .hero p.lead{ color:rgba(255,255,255,.86);font-size:clamp(1.02rem,1.5vw,1.22rem); max-width:620px;line-height:1.62; } .hero-actions{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;} .hero-trust{ display:flex;gap:30px;flex-wrap:wrap;margin-top:36px; padding-top:26px;border-top:1px solid rgba(255,255,255,.16); } .hero-trust div{ display:flex;align-items:center;gap:.6em;color:rgba(255,255,255,.84); font-family:'Archivo',sans-serif;font-weight:600;font-size:.86rem;letter-spacing:.02em; } .hero-trust svg{width:18px;height:18px;flex:none;} /* ---------- marquee ---------- */ .marquee{background:var(--ink);color:#fff;padding:22px 0;overflow:hidden;border-bottom:1px solid var(--line-dark);} .marquee-track{display:flex;gap:0;width:max-content;animation:slide 34s linear infinite;} .marquee-track span{ font-family:'Archivo',sans-serif;font-weight:800;font-size:1.05rem; letter-spacing:.04em;text-transform:uppercase;padding:0 30px;display:flex;align-items:center;gap:34px; color:rgba(255,255,255,.92); } .marquee-track span::after{content:"✦";color:var(--muted-2);font-size:.8rem;} @keyframes slide{to{transform:translateX(-50%);}} /* ---------- stats ---------- */ .stats{background:var(--cream);padding:72px 0;border-bottom:1px solid var(--line);} .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;} .stat{text-align:center;padding:0 10px;} .stat .num{font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(2.6rem,5vw,3.7rem);line-height:1;letter-spacing:-.03em;} .stat .label{font-family:'Archivo',sans-serif;font-weight:600;font-size:.76rem;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);margin-top:12px;} .stat+.stat{border-left:1px solid var(--line);} /* ---------- generic section padding ---------- */ .section{padding:108px 0;} .section.tight{padding:84px 0;} /* ---------- services ---------- */ .services{background:var(--white);} .svc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-bottom:54px;} .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} .svc-card{ border:1px solid var(--line);border-radius:var(--r);overflow:hidden; background:var(--white);display:flex;flex-direction:column; transition:transform .4s var(--ease),box-shadow .4s var(--ease); } .svc-card:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,.1);} .svc-img{aspect-ratio:16/10;overflow:hidden;background:var(--cream-2);} .svc-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);} .svc-card:hover .svc-img img{transform:scale(1.04);} .svc-body{padding:32px;display:flex;flex-direction:column;flex:1;} .svc-tag{font-family:'Archivo',sans-serif;font-weight:700;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);} .svc-body h3{font-size:1.6rem;margin:.5em 0 .45em;} .svc-body p{color:var(--muted);font-size:.97rem;margin-bottom:20px;} .svc-feat{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:24px;} .svc-feat li{display:flex;gap:.6em;align-items:flex-start;font-size:.92rem;color:var(--ink-2);} .svc-feat li svg{width:16px;height:16px;flex:none;margin-top:4px;} .svc-link{ margin-top:auto;font-family:'Archivo',sans-serif;font-weight:700;font-size:.9rem; display:inline-flex;align-items:center;gap:.5em; } .svc-link svg{width:1em;height:1em;transition:transform .25s var(--ease);} .svc-card:hover .svc-link svg{transform:translateX(4px);} /* also-clean band */ .also{margin-top:26px;border:1px solid var(--line);border-radius:var(--r);padding:34px 36px;background:var(--cream);} .also h4{font-family:'Archivo',sans-serif;font-weight:800;font-size:1.05rem;letter-spacing:-.01em;margin-bottom:18px;} .also-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 30px;} .also-grid div{display:flex;align-items:center;gap:.6em;font-size:.95rem;font-weight:500;} .also-grid svg{width:16px;height:16px;flex:none;} /* ---------- we clean (split) ---------- */ .split{display:grid;grid-template-columns:1.05fr .95fr;} .split-media{position:relative;min-height:520px;background:var(--ink);} .split-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .split-body{background:var(--ink);color:#fff;padding:96px 70px;display:flex;flex-direction:column;justify-content:center;} .split-body .eyebrow{color:var(--muted-dark);} .split-body h2{color:#fff;font-size:clamp(2rem,3.6vw,3rem);margin:.5em 0 .5em;} .split-body .lead{color:var(--muted-dark);margin-bottom:30px;} .clean-cols{display:grid;grid-template-columns:1fr 1fr;gap:32px;} .clean-cols h5{font-family:'Archivo',sans-serif;font-weight:700;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);margin-bottom:14px;} .clean-cols ul{list-style:none;display:flex;flex-direction:column;gap:10px;} .clean-cols li{display:flex;gap:.55em;align-items:center;font-size:.95rem;color:rgba(255,255,255,.9);} .clean-cols li svg{width:14px;height:14px;flex:none;color:#fff;} /* ---------- specialized ---------- */ .spec{background:var(--cream);} .spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:50px;} .spec-card{ background:var(--white);border:1px solid var(--line);border-radius:var(--r); padding:44px 42px;display:flex;flex-direction:column; transition:transform .4s var(--ease),box-shadow .4s var(--ease); } .spec-card:hover{transform:translateY(-5px);box-shadow:0 30px 60px -30px rgba(0,0,0,.3);} .spec-icon{width:54px;height:54px;border-radius:13px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:24px;} .spec-icon svg{width:26px;height:26px;} .spec-card h3{font-size:1.5rem;margin-bottom:.5em;} .spec-card p{color:var(--muted);font-size:.98rem;margin-bottom:24px;} .spec-card .btn{align-self:flex-start;margin-top:auto;} /* ---------- process ---------- */ .process{background:var(--white);} .steps{display:grid;grid-template-columns:repeat(3,1fr);margin-top:56px;} .step{padding:44px 40px;position:relative;} .step+.step{border-left:1px solid var(--line);} .step .snum{font-family:'Archivo',sans-serif;font-weight:900;font-size:3.4rem;line-height:1;letter-spacing:-.04em;color:var(--cream-2);} .step h3{font-size:1.3rem;margin-bottom:.5em;} .step p{color:var(--muted);font-size:.96rem;} .process-cta{text-align:center;margin-top:46px;} /* ---------- why choose ---------- */ .why{background:var(--ink);color:#fff;} .why-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center;} .why-media{border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;} .why-media img{width:100%;height:100%;object-fit:cover;} .why-body .eyebrow{color:var(--muted-dark);} .why-body h2{color:#fff;font-size:clamp(2rem,3.8vw,3.1rem);margin:.5em 0 .7em;} .why-list{display:grid;grid-template-columns:1fr 1fr;gap:14px 26px;} .why-list div{display:flex;gap:.7em;align-items:flex-start;font-family:'Archivo',sans-serif;font-weight:600;font-size:1rem;} .why-list svg{width:20px;height:20px;flex:none;margin-top:2px;} .why-body .btn{margin-top:36px;} /* ---------- gallery ---------- */ .gallery{background:var(--cream);} .gal-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:230px;gap:14px;margin-top:50px;} .gal-item{position:relative;overflow:hidden;border-radius:10px;background:var(--cream-2);} .gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);} .gal-item:hover img{transform:scale(1.07);} .gal-item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.78));opacity:0;transition:opacity .35s var(--ease);} .gal-item:hover::after{opacity:1;} .gal-cap{ position:absolute;left:0;right:0;bottom:0;padding:18px 20px;z-index:2; color:#fff;font-family:'Archivo',sans-serif;font-weight:700;font-size:.9rem; transform:translateY(8px);opacity:0;transition:transform .35s var(--ease),opacity .35s var(--ease); } .gal-item:hover .gal-cap{transform:translateY(0);opacity:1;} .gal-tall{grid-row:span 2;} .gal-wide{grid-column:span 2;} /* ---------- plans ---------- */ .plans{background:var(--white);} .plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:54px;align-items:stretch;} .plan{ border:1px solid var(--line);border-radius:var(--r);padding:40px 36px; display:flex;flex-direction:column;background:var(--white);position:relative; transition:transform .35s var(--ease),box-shadow .35s var(--ease); } .plan:hover{transform:translateY(-5px);box-shadow:0 30px 60px -32px rgba(0,0,0,.3);} .plan.featured{background:var(--ink);color:#fff;border-color:var(--ink);transform:scale(1.03);} .plan.featured:hover{transform:scale(1.03) translateY(-5px);} .plan-pop{ position:absolute;top:-13px;left:50%;transform:translateX(-50%); background:#fff;color:var(--ink);border:1.5px solid var(--ink); font-family:'Archivo',sans-serif;font-weight:800;font-size:.66rem;letter-spacing:.16em; text-transform:uppercase;padding:.5em 1.1em;border-radius:100px; } .plan-freq{font-family:'Archivo',sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.17em;text-transform:uppercase;color:var(--muted-2);} .plan.featured .plan-freq{color:var(--muted-dark);} .plan-name{font-family:'Archivo',sans-serif;font-weight:900;font-size:1.7rem;margin:.35em 0 .55em;letter-spacing:-.02em;} .plan-disc{display:flex;align-items:baseline;gap:.2em;margin-bottom:6px;} .plan-disc .pct{font-family:'Archivo',sans-serif;font-weight:900;font-size:3.7rem;line-height:1;letter-spacing:-.04em;} .plan-disc .off{font-family:'Archivo',sans-serif;font-weight:800;font-size:1.05rem;} .plan-sub{font-size:.88rem;color:var(--muted);margin-bottom:26px;} .plan.featured .plan-sub{color:var(--muted-dark);} .plan-feat{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:30px;} .plan-feat li{display:flex;gap:.6em;align-items:flex-start;font-size:.93rem;} .plan-feat li svg{width:16px;height:16px;flex:none;margin-top:4px;} .plan.featured .plan-feat li svg{color:#fff;} .plan .btn{margin-top:auto;} .plans-note{ margin-top:26px;border:1px dashed var(--line);border-radius:var(--r); padding:24px 30px;display:flex;align-items:center;justify-content:space-between; gap:24px;flex-wrap:wrap;background:var(--cream); } .plans-note p{font-size:.96rem;color:var(--muted);} .plans-note strong{color:var(--ink);font-family:'Archivo',sans-serif;} /* ---------- approach ---------- */ .approach{background:var(--ink);color:#fff;} .appr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:52px;} .appr-card{border:1px solid var(--line-dark);border-radius:var(--r);padding:34px 30px;background:var(--ink-2);} .appr-card .ai{width:46px;height:46px;border-radius:11px;background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;margin-bottom:22px;} .appr-card .ai svg{width:23px;height:23px;} .appr-card h3{color:#fff;font-size:1.18rem;margin-bottom:.5em;} .appr-card p{color:var(--muted-dark);font-size:.92rem;} /* ---------- testimonials ---------- */ .testi{background:var(--cream);} .testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:50px;} .testi-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:36px 34px;display:flex;flex-direction:column;} .testi-stars{color:var(--ink);font-size:1.05rem;letter-spacing:.12em;margin-bottom:18px;} .testi-card p{font-size:1rem;color:var(--ink-2);margin-bottom:24px;flex:1;} .testi-meta{display:flex;align-items:center;gap:13px;border-top:1px solid var(--line);padding-top:20px;} .testi-avatar{width:42px;height:42px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Archivo',sans-serif;font-weight:800;font-size:1rem;flex:none;} .testi-meta .tn{font-family:'Archivo',sans-serif;font-weight:700;font-size:.95rem;} .testi-meta .td{font-size:.8rem;color:var(--muted);} .testi-summary{display:flex;align-items:center;gap:16px;justify-content:center;margin-top:40px;flex-wrap:wrap;} .testi-summary .big{font-family:'Archivo',sans-serif;font-weight:900;font-size:2rem;} .testi-summary span{color:var(--muted);font-size:.95rem;} /* ---------- promise ---------- */ .promise{background:var(--white);} .promise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px;} .prom-card{padding:40px 36px;border:1px solid var(--line);border-radius:var(--r);} .prom-card .pi{width:50px;height:50px;border-radius:12px;border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;margin-bottom:22px;} .prom-card .pi svg{width:24px;height:24px;} .prom-card h3{font-size:1.3rem;margin-bottom:.5em;} .prom-card p{color:var(--muted);font-size:.95rem;} /* ---------- faq ---------- */ .faq{background:var(--cream);} .faq-wrap{max-width:840px;margin:50px auto 0;} .faq-item{border-bottom:1px solid var(--line);} .faq-q{ width:100%;background:none;border:none;cursor:pointer;text-align:left; display:flex;align-items:center;justify-content:space-between;gap:24px; padding:28px 6px;font-family:'Archivo',sans-serif;font-weight:700;font-size:1.12rem;color:var(--ink); } .faq-icon{width:28px;height:28px;flex:none;border-radius:50%;border:1.5px solid var(--ink);position:relative;transition:background .3s var(--ease);} .faq-icon::before,.faq-icon::after{content:"";position:absolute;background:var(--ink);transition:.3s var(--ease);} .faq-icon::before{width:11px;height:1.6px;top:50%;left:50%;transform:translate(-50%,-50%);} .faq-icon::after{width:1.6px;height:11px;top:50%;left:50%;transform:translate(-50%,-50%);} .faq-item.open .faq-icon{background:var(--ink);} .faq-item.open .faq-icon::before,.faq-item.open .faq-icon::after{background:#fff;} .faq-item.open .faq-icon::after{transform:translate(-50%,-50%) scaleY(0);} .faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease);} .faq-a p{padding:0 6px 28px;color:var(--muted);font-size:1rem;} /* ---------- areas ---------- */ .areas{background:var(--white);} .areas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:50px;} .area-card{ border:1px solid var(--line);border-radius:var(--r);padding:30px 32px; display:flex;align-items:center;justify-content:space-between;gap:16px; transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease); } .area-card:hover{background:var(--ink);color:#fff;transform:translateY(-3px);} .area-card h3{font-size:1.32rem;} .area-card span{font-size:.82rem;color:var(--muted);} .area-card:hover span{color:var(--muted-dark);} .area-card svg{width:22px;height:22px;flex:none;opacity:.3;transition:opacity .3s var(--ease),transform .3s var(--ease);} .area-card:hover svg{opacity:1;transform:translateX(3px);} .areas-note{text-align:center;margin-top:30px;color:var(--muted);font-size:.96rem;} /* ---------- quote ---------- */ .quote{background:var(--ink);color:#fff;} .quote-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start;} .quote-info .eyebrow{color:var(--muted-dark);} .quote-info h2{color:#fff;font-size:clamp(2.1rem,4vw,3.3rem);margin:.5em 0 .55em;} .quote-info p{color:var(--muted-dark);margin-bottom:30px;} .quote-contacts{display:flex;flex-direction:column;gap:14px;} .qc{display:flex;align-items:center;gap:14px;} .qc-ic{width:44px;height:44px;border-radius:11px;border:1px solid var(--line-dark);display:flex;align-items:center;justify-content:center;flex:none;} .qc-ic svg{width:20px;height:20px;} .qc .ql{font-family:'Archivo',sans-serif;font-weight:700;font-size:1.02rem;} .qc .qs{font-size:.85rem;color:var(--muted-dark);} .quote-form-wrap{background:#fff;border-radius:var(--r);padding:10px;overflow:hidden;} .quote-form-wrap iframe{width:100%;min-height:760px;border:0;border-radius:8px;display:block;} /* ---------- final cta ---------- */ .final{background:var(--cream);text-align:center;padding:120px 0;} .final h2{font-size:clamp(2.4rem,5.4vw,4.4rem);text-transform:uppercase;letter-spacing:-.03em;} .final p{color:var(--muted);font-size:1.1rem;max-width:560px;margin:.7em auto 0;} .final-actions{display:flex;gap:14px;justify-content:center;margin-top:36px;flex-wrap:wrap;} .peaks{display:flex;justify-content:center;margin-bottom:30px;color:var(--ink);} .peaks svg{width:120px;height:auto;} /* ---------- footer ---------- */ .footer{background:var(--ink);color:#fff;padding:80px 0 36px;} .foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px;padding-bottom:54px;border-bottom:1px solid var(--line-dark);} .foot-brand .brand{color:#fff;margin-bottom:20px;} .foot-brand p{color:var(--muted-dark);font-size:.95rem;max-width:300px;} .foot-social{display:flex;gap:12px;margin-top:22px;} .foot-social a{width:42px;height:42px;border:1px solid var(--line-dark);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .25s var(--ease),color .25s var(--ease);} .foot-social a:hover{background:#fff;color:var(--ink);} .foot-social svg{width:18px;height:18px;} .foot-col h4{font-family:'Archivo',sans-serif;font-weight:700;font-size:.76rem;letter-spacing:.17em;text-transform:uppercase;color:var(--muted-2);margin-bottom:18px;} .foot-col ul{list-style:none;display:flex;flex-direction:column;gap:11px;} .foot-col a{color:var(--muted-dark);font-size:.93rem;transition:color .2s;} .foot-col a:hover{color:#fff;} .foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:30px;flex-wrap:wrap;} .foot-bottom p{color:var(--muted-2);font-size:.87rem;} .foot-bottom .fb-links{display:flex;gap:22px;} .foot-bottom .fb-links a{color:var(--muted-2);font-size:.84rem;} .foot-bottom .fb-links a:hover{color:#fff;} /* ---------- reveal animation ---------- */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease);} .reveal.in{opacity:1;transform:none;} /* ---------- responsive ---------- */ @media(max-width:1080px){ .nav-links{display:none;} .why-grid{gap:40px;} .quote-grid{grid-template-columns:1fr;gap:40px;} .gal-grid{grid-template-columns:repeat(2,1fr);} } @media(max-width:900px){ .menu-toggle{display:flex;} .nav-phone{display:none;} .nav-cta .btn{display:none;} .stats-grid{grid-template-columns:1fr 1fr;gap:40px 24px;} .stat:nth-child(3){border-left:none;} .stat:nth-child(odd){border-left:none;} .stat:nth-child(even){border-left:1px solid var(--line);} .svc-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto;} .also-grid{grid-template-columns:1fr 1fr;} .split{grid-template-columns:1fr;} .split-media{min-height:340px;} .split-body{padding:64px 32px;} .spec-grid{grid-template-columns:1fr;} .steps{grid-template-columns:1fr;} .step+.step{border-left:none;border-top:1px solid var(--line);} .why-grid{grid-template-columns:1fr;} .why-media{aspect-ratio:16/11;max-height:420px;} .why-list{grid-template-columns:1fr;} .plans-grid{grid-template-columns:1fr;max-width:420px;margin:54px auto 0;} .plan.featured{transform:none;} .plan.featured:hover{transform:translateY(-5px);} .appr-grid{grid-template-columns:1fr 1fr;} .testi-grid{grid-template-columns:1fr;max-width:440px;margin:50px auto 0;} .promise-grid{grid-template-columns:1fr;max-width:440px;margin:52px auto 0;} .areas-grid{grid-template-columns:1fr 1fr;} .foot-top{grid-template-columns:1fr 1fr;gap:40px;} } @media(max-width:560px){ body{font-size:16px;} .wrap{padding:0 20px;} .section{padding:74px 0;} .header-inner{height:72px;} .hero{padding:120px 0 48px;} .hero-trust{gap:14px 24px;} .also-grid{grid-template-columns:1fr;} .clean-cols{grid-template-columns:1fr;gap:26px;} .gal-grid{grid-template-columns:1fr;grid-auto-rows:240px;} .gal-wide{grid-column:span 1;} .gal-tall{grid-row:span 1;} .appr-grid{grid-template-columns:1fr;} .areas-grid{grid-template-columns:1fr;} .stats-grid{grid-template-columns:1fr 1fr;} .svc-head,.plans-note,.foot-bottom{text-align:left;} .split-body{padding:54px 22px;} .spec-card,.prom-card{padding:34px 26px;} .final{padding:84px 0;} } .brand{ background: url('logo-white.png') center center / contain no-repeat; width: 200px; height: 54px; border-radius: 6px; color: transparent; font-size: 0; display: block; } .brand>*{display:none!important;}.header.scrolled .brand{background-image:url('logo-black.png');} .ba-section{background:var(--cream);padding:90px 0;} .ba-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;margin-top:50px;} .ba-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;} .ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:3px;background:var(--ink);} .ba-fig{position:relative;margin:0;aspect-ratio:1/1;overflow:hidden;background:#000;} .ba-fig img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease);} .ba-card:hover .ba-fig img{transform:scale(1.04);} .ba-fig figcaption{position:absolute;top:12px;left:12px;background:rgba(0,0,0,.78);color:#fff;padding:5px 11px;border-radius:6px;font-family:Archivo,sans-serif;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;} .ba-card h3{padding:20px 24px 4px;font-size:1.2rem;font-family:Archivo,sans-serif;} .ba-card p{padding:0 24px 24px;color:var(--muted);font-size:.96rem;} /* Before/After comparison slider (reuses .ba-fig figure + figcaption styling) */ .ba-compare{position:relative;aspect-ratio:1/1;overflow:hidden;background:#000;} .ba-compare .ba-fig{position:absolute;inset:0;aspect-ratio:auto;} .ba-compare .ba-before{clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0);z-index:2;} .ba-compare .ba-after{z-index:1;} .ba-compare .ba-after figcaption{left:auto;right:12px;} .ba-compare .ba-fig img{transition:none;} .ba-card:hover .ba-compare img{transform:none;} .ba-divider{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:3px;background:#fff;transform:translateX(-50%);z-index:3;box-shadow:0 0 12px rgba(0,0,0,.35);} .ba-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.3);color:var(--ink);} .ba-handle svg{width:22px;height:22px;} .ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:4;margin:0;-webkit-appearance:none;appearance:none;background:transparent;} .ba-compare:focus-within .ba-handle{outline:3px solid var(--ink);outline-offset:2px;} @media(max-width:760px){.ba-grid{grid-template-columns:1fr;}} /* ---------- service area map ---------- */ .sa{padding:108px 0;background:var(--white);} .sa-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;} .sa-copy .eyebrow{margin-bottom:18px;} .sa-copy h2{font-size:clamp(2rem,4vw,3.2rem);margin-bottom:.55em;} .sa-copy .sa-lead{color:var(--muted);font-size:1.06rem;line-height:1.7;margin-bottom:2em;} .sa-cities{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;margin-bottom:2.2em;} .sa-cities li{display:flex;align-items:center;gap:.55em;font-family:'Archivo',sans-serif;font-weight:700;font-size:.96rem;} .sa-cities li svg{width:18px;height:18px;flex:none;color:var(--ink);} .sa-map-wrap{border-radius:20px;overflow:hidden;box-shadow:0 2px 0 var(--line),0 24px 60px -16px rgba(0,0,0,.13);border:1px solid var(--line);} .sa-map-svg{display:block;width:100%;height:auto;} .sa-map-iframe{display:block;width:100%;aspect-ratio:620/440;border:0;filter:grayscale(1) contrast(1.05);transition:filter .5s var(--ease);} .sa-map-wrap:hover .sa-map-iframe{filter:none;} @media(max-width:900px){ .sa-grid{grid-template-columns:1fr;gap:44px;} .sa{padding:74px 0;} } /* ---------- accessibility: skip link + focus ---------- */ .skip-link{ position:absolute;left:-9999px;top:0;z-index:300; background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 10px 0; font-family:'Archivo',sans-serif;font-weight:700;font-size:.9rem; } .skip-link:focus{left:0;} :focus-visible{outline:3px solid #4c8bf5;outline-offset:3px;border-radius:4px;} /* ---------- breadcrumb ---------- */ .crumbs{background:var(--cream);border-bottom:1px solid var(--line);} .crumbs ol{ max-width:var(--maxw);margin:0 auto;padding:16px 28px; list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.55em; font-family:'Archivo',sans-serif;font-weight:600;font-size:.82rem;color:var(--ink-2); } .crumbs li{display:flex;align-items:center;gap:.55em;} .crumbs li+li::before{content:"";width:5px;height:5px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(-45deg);display:inline-block;} .crumbs a{color:#4f4e49;transition:color .2s;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;} .crumbs a:hover{color:var(--ink);text-decoration-color:var(--ink);} .crumbs [aria-current="page"]{color:var(--ink);font-weight:700;} .svc-body h3 a{color:inherit;text-decoration:none;} .svc-body h3 a:hover{text-decoration:underline;text-underline-offset:3px;} /* ---------- related services (reuses .svc-grid / .svc-card) ---------- */ .related{background:var(--white);} /* ---------- sticky mobile CTA ---------- */ .mobile-cta{ position:fixed;left:0;right:0;bottom:0;z-index:120; display:none;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.94);backdrop-filter:blur(10px); border-top:1px solid var(--line);box-shadow:0 -8px 24px -16px rgba(0,0,0,.4); } .mobile-cta .btn{flex:1;justify-content:center;padding:.95em 1em;font-size:.92rem;} @media(max-width:760px){ .mobile-cta{display:flex;} body{padding-bottom:74px;} .crumbs ol{padding:13px 20px;font-size:.78rem;} } /* ---------- timed quote popup ---------- */ .apx-pop{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(12,12,12,.55);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s ease;} .apx-pop.on{opacity:1;pointer-events:auto;} .apx-pop-card{position:relative;background:#fff;border-radius:20px;max-width:430px;width:100%;padding:38px 34px 32px;text-align:center;box-shadow:0 30px 80px -20px rgba(0,0,0,.45);transform:translateY(14px);transition:transform .3s ease;} .apx-pop.on .apx-pop-card{transform:none;} .apx-pop-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink);} .apx-pop-close:hover{background:var(--cream);} .apx-pop-stars{color:var(--ink);letter-spacing:3px;font-size:1.05rem;margin-bottom:10px;} .apx-pop-card h3{font-family:Archivo,sans-serif;font-weight:800;font-size:1.7rem;line-height:1.1;margin:0 0 10px;} .apx-pop-card p{color:var(--muted);font-size:.98rem;margin:0 0 22px;} .apx-pop-cta{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:999px;background:var(--ink);color:#fff;font-weight:700;font-size:15px;text-decoration:none;} .apx-pop-cta:hover{transform:translateY(-2px);} .apx-pop-tel{display:block;margin-top:14px;color:var(--ink);font-weight:700;text-decoration:none;font-size:.95rem;} .apx-pop-no{display:block;margin:16px auto 0;background:none;border:none;color:var(--muted);font-size:.85rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px;} @media(max-width:760px){.apx-pop{align-items:flex-end;padding:0;}.apx-pop-card{border-radius:20px 20px 0 0;max-width:none;padding:32px 24px 28px;}}