:root{ --bg:#0B0D10; --bg-alt:#14181D; --surface:#1B2027; --divider:#242A32; --text:#EDEFF2; --text-dim:#A7B0BA; --heading:#FFFFFF; --accent:#28A9E2; --accent-deep:#1E74D4; --accent-glow:#8FD8F5; --on-accent:#04121C; --paper:#F4F6F8; --ink:#0B0D10; --maxw:1300px; --grad:linear-gradient(120deg,#8FD8F5 0%,#1E74D4 55%,#0A3E8C 100%); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--text);font-family:"Barlow",system-ui,sans-serif;font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased} h1,h2,h3,h4,.cond{font-family:"Barlow Condensed",Impact,sans-serif;color:var(--heading);line-height:1.05;letter-spacing:.01em;margin:0} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} .accent{color:var(--accent)} .eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:"Barlow";font-weight:600;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-glow);background:rgba(40,169,226,.1);border:1px solid rgba(40,169,226,.35);padding:7px 14px;border-radius:4px} .eyebrow::before{content:"";width:7px;height:7px;background:var(--accent);border-radius:50%;box-shadow:0 0 10px var(--accent)} /* Buttons */ .btn{display:inline-flex;align-items:center;gap:10px;font-family:"Barlow";font-weight:600;font-size:.98rem;letter-spacing:.04em;text-transform:uppercase;padding:15px 26px;border-radius:4px;cursor:pointer;border:1px solid transparent;transition:transform .18s ease,box-shadow .18s ease,background .18s ease} .btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:0 8px 24px rgba(40,169,226,.28)} .btn-primary:hover{background:var(--accent-deep);transform:translateY(-2px);box-shadow:0 12px 30px rgba(40,169,226,.45)} .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)} .btn-ghost:hover{border-color:var(--accent);color:var(--accent-glow);transform:translateY(-2px)} .btn-lg{padding:17px 32px;font-size:1.05rem} /* Header */ .site-header{position:sticky;top:0;z-index:60;background:rgba(11,13,16,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--divider);overflow:visible} .hdr{display:flex;align-items:center;justify-content:space-between;height:84px} .brand{display:flex;align-items:center;gap:11px;font-family:"Barlow Condensed";font-weight:700;font-size:1.5rem;color:#fff;letter-spacing:.02em;text-transform:uppercase} .brand .mark{width:38px;height:38px;border-radius:8px;background:var(--grad);display:grid;place-items:center;font-family:"Barlow Condensed";font-weight:700;color:#04121C;font-size:1.15rem;box-shadow:0 0 18px rgba(40,169,226,.5)} .brand small{display:block;font-family:"Barlow";font-weight:500;font-size:.58rem;letter-spacing:.22em;color:var(--accent-glow);text-transform:uppercase;margin-top:2px} .nav{display:flex;gap:28px;font-weight:500;font-size:.95rem} .nav a{color:var(--text-dim);transition:color .15s} .nav a:hover{color:#fff} .nav-has{position:relative} .nav-has>a{cursor:pointer} .nav-drop{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);min-width:190px;background:rgba(16,22,28,.98);backdrop-filter:blur(12px);border:1px solid var(--divider);border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transition:.16s;box-shadow:0 20px 50px rgba(0,0,0,.5);z-index:70} .nav-has:hover .nav-drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(2px)} .nav-drop:before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px} .nav-drop a{color:var(--text-dim);font-size:.9rem;padding:9px 13px;border-radius:7px;white-space:nowrap} .nav-drop a:hover{background:rgba(40,169,226,.12);color:#fff} .hdr-cta{display:flex;align-items:center;gap:14px} .hdr-phone{font-family:"Barlow Condensed";font-weight:700;font-size:1.35rem;color:#fff;display:flex;align-items:center;gap:8px} .hdr-phone .ph-ic{color:var(--accent)} @media(max-width:960px){.nav,.hdr-phone span.lbl{display:none}} /* Hero — full-bleed video background */ .hero{position:relative;overflow:hidden;background:#06080a} .hero-media{position:absolute;inset:0;z-index:0;overflow:hidden} .hero-media video,.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .hero-overlay{position:absolute;inset:0;z-index:1;background: linear-gradient(90deg,rgba(6,8,10,.95) 0%,rgba(6,8,10,.82) 38%,rgba(6,8,10,.45) 70%,rgba(6,8,10,.7) 100%), radial-gradient(1100px 600px at 80% -10%,rgba(30,116,212,.34),transparent 60%), linear-gradient(to top,rgba(6,8,10,.9),transparent 30%)} .hero .wrap{position:relative;z-index:2} .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:70px 0 56px;min-height:560px} .hero h1{font-size:clamp(2.7rem,6vw,4.7rem);font-weight:700;text-transform:uppercase;margin:18px 0} .hero .sub{color:var(--text);font-size:1.12rem;max-width:38ch;margin:0 0 26px} .usps{display:flex;gap:22px;flex-wrap:wrap;margin:0 0 28px;padding:0;list-style:none} .usps li{display:flex;align-items:center;gap:9px;font-weight:600;font-size:.95rem} .usps svg{width:20px;height:20px;color:var(--accent);flex:none} .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px} .hero-badges{display:flex;gap:12px;flex-wrap:wrap} .tbadge{display:flex;align-items:center;gap:8px;font-size:.82rem;font-weight:600;color:var(--text-dim);background:var(--surface);border:1px solid var(--divider);padding:9px 13px;border-radius:6px} .tbadge b{color:#fff} .tbadge .dot{color:var(--accent)} /* Hero side — floating review card over the video */ .hero-visual{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:14px;min-height:340px} .hero-play{display:flex;align-items:center;gap:12px;color:var(--text);font-weight:600;font-size:.9rem;text-transform:uppercase;letter-spacing:.08em;align-self:flex-end;opacity:.85} .hero-play .pp{width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.4);display:grid;place-items:center;color:#fff;background:rgba(40,169,226,.18);backdrop-filter:blur(6px)} .review-show{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:14px; background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04)); backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%); border:1px solid rgba(40,169,226,.6); box-shadow:0 10px 34px rgba(0,0,0,.38),0 0 0 1px rgba(40,169,226,.15),inset 0 1px 0 rgba(143,216,245,.25)} .review-show .g{width:34px;height:34px;border-radius:8px;background:#fff;display:grid;place-items:center} .review-show .g svg{width:22px;height:22px;display:block} .review-show .stars{color:#FFC53D;font-size:.8rem;letter-spacing:2px} .review-show b{display:block;color:#fff;font-family:"Barlow Condensed";font-size:1.15rem;font-weight:700;line-height:1.1} .review-show small{display:block;color:var(--text-dim);font-size:.72rem} /* Hero form band */ .hero-form{margin-top:8px;background:var(--surface);border:1px solid var(--divider);border-radius:14px;padding:20px 22px;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;box-shadow:0 20px 50px rgba(0,0,0,.4)} .hero-form .hf-head{display:flex;align-items:center;gap:14px;padding-right:20px;border-right:1px solid var(--divider)} .hero-form .hf-head .ic{width:44px;height:44px;border-radius:10px;background:var(--grad);display:grid;place-items:center;color:#04121C;flex:none} .hero-form .hf-head b{font-family:"Barlow Condensed";font-size:1.35rem;color:#fff;font-weight:700;display:block;line-height:1} .hero-form .hf-head span{font-size:.78rem;color:var(--text-dim)} .hf-fields{display:grid;grid-template-columns:1fr 1fr 1.1fr auto;gap:12px} .hf-fields input,.hf-fields select{background:var(--bg);border:1px solid var(--divider);border-radius:6px;color:#fff;padding:13px 14px;font-family:"Barlow";font-size:.95rem} .hf-fields input::placeholder{color:#6b7580} @media(max-width:1040px){.hero-grid{grid-template-columns:1fr;gap:28px;align-items:start;padding:40px 0 44px;min-height:0}.hero-visual{min-height:0}.hf-fields{grid-template-columns:1fr 1fr}.hero-form{grid-template-columns:1fr}.hero-form .hf-head{border-right:none;border-bottom:1px solid var(--divider);padding:0 0 14px}} /* Hero rating pill + trust line */ .hero-rating{display:flex;width:fit-content;align-items:center;gap:9px;font-family:"Barlow";font-weight:600;font-size:.92rem;color:#fff;margin-bottom:14px} .hero-rating .stars{color:#FFC53D;letter-spacing:2px} .hero-rating b{color:#fff;font-weight:700} .hero-trust{color:var(--text-dim);font-size:.82rem;margin:2px 0 0;letter-spacing:.01em} .hero-copy .eyebrow{margin-bottom:2px} .hero-copy .hero-usps{margin:4px 0 24px} /* Hero quote card (conversion) */ .quote-card{width:100%;max-width:432px;margin-left:auto;position:relative; background:linear-gradient(162deg,rgba(20,29,38,.97),rgba(9,14,19,.98)); border:1px solid rgba(40,169,226,.38);border-radius:20px;padding:22px 24px 24px; box-shadow:0 34px 80px rgba(0,0,0,.55),0 0 0 1px rgba(40,169,226,.08),inset 0 1px 0 rgba(143,216,245,.14)} .quote-card:before{content:"";position:absolute;inset:0;border-radius:20px;padding:1px;pointer-events:none; background:linear-gradient(160deg,rgba(143,216,245,.5),transparent 40%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.6} .quote-card .review-show{width:100%;margin-bottom:18px} .qc-title{font-family:"Barlow Condensed";font-size:1.75rem;color:#fff;text-transform:uppercase;line-height:1;margin:0 0 5px;letter-spacing:.01em} .qc-sub{color:var(--text-dim);font-size:.85rem;margin:0 0 16px} .qc-error{color:#ffc2c2;font-size:.83rem;margin:0 0 12px;background:rgba(220,70,70,.12);border:1px solid rgba(220,70,70,.42);padding:9px 12px;border-radius:8px} .quote-form{display:grid;gap:10px} .quote-form input,.quote-form select{background:rgba(6,8,10,.72);border:1px solid var(--divider);border-radius:9px;color:#fff;padding:13px 14px;font-family:"Barlow";font-size:.95rem;width:100%;transition:border-color .15s,box-shadow .15s} .quote-form input::placeholder{color:#6b7580} .quote-form select{color:#aeb7c0} .quote-form input:focus,.quote-form select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(40,169,226,.22)} .qf-hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0} .qf-submit{width:100%;justify-content:center;margin-top:4px;font-size:1.02rem} .qc-foot{text-align:center;color:var(--text-dim);font-size:.85rem;margin-top:13px} .qc-foot a{color:var(--accent-glow);font-weight:700} .quote-thanks{text-align:center;padding:16px 6px 8px} .quote-thanks .qt-ic{width:58px;height:58px;border-radius:50%;background:var(--grad);color:#04121C;display:grid;place-items:center;margin:0 auto 14px} .quote-thanks .qt-ic svg{width:30px;height:30px} .quote-thanks h3{font-family:"Barlow Condensed";font-size:1.65rem;color:#fff;text-transform:uppercase;margin:0 0 6px} .quote-thanks p{color:var(--text-dim);font-size:.92rem;margin:0 0 16px} /* Trust strip */ .trust-strip{background:var(--bg-alt);border-top:1px solid var(--divider);border-bottom:1px solid var(--divider)} .trust-strip .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:22px 24px} .trust-strip .ti{display:flex;align-items:center;gap:11px;font-weight:600;color:var(--text)} .trust-strip .ti svg{width:40px;height:40px;color:var(--accent);flex:none} .trust-strip .wrap{padding:26px 24px} .trust-strip .ti small{display:block;color:var(--text-dim);font-weight:500;font-size:.76rem} /* Sections */ section{padding:96px 0} .sec-head{text-align:center;max-width:680px;margin:0 auto 54px} .sec-head h2{font-size:clamp(2rem,4vw,3.1rem);font-weight:700;text-transform:uppercase} .sec-head p{color:var(--text-dim);margin-top:14px} /* Services grid */ .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .svc{background:var(--surface);border:1px solid var(--divider);border-radius:10px;padding:28px 24px;position:relative;overflow:hidden;transition:transform .2s,border-color .2s} .svc::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .25s} .svc:hover{transform:translateY(-4px);border-color:rgba(40,169,226,.4)} .svc:hover::before{transform:scaleX(1)} .svc.has-img{padding:0} .svc.has-img .svc-img{height:180px;overflow:hidden;position:relative} .svc.has-img .svc-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s} .svc.has-img:hover .svc-img img{transform:scale(1.06)} .svc.has-img .svc-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--surface),transparent 55%)} .svc.has-img .svc-body{padding:22px 24px 28px} .svc .ic{width:52px;height:52px;border-radius:12px;background:rgba(40,169,226,.12);border:1px solid rgba(40,169,226,.3);display:grid;place-items:center;color:var(--accent);margin-bottom:16px} .svc .ic svg{width:26px;height:26px} .svc h3{font-size:1.5rem;font-weight:600;text-transform:uppercase;margin-bottom:8px} .svc p{color:var(--text-dim);font-size:.95rem;margin:0 0 14px} .svc .more{display:inline-flex;align-items:center;gap:5px;font-family:"Barlow";font-weight:700;font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);transition:gap .18s} a.svc{display:block;color:inherit;text-decoration:none} a.svc:hover .more{gap:11px} .svc-pop{position:absolute;top:14px;left:14px;z-index:3;background:var(--grad);color:#04121C;font-family:"Barlow Condensed";font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:20px;box-shadow:0 4px 14px rgba(40,169,226,.4)} .svc-chips{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 16px} .svc-chips span{font-size:.72rem;font-weight:600;color:var(--text-dim);background:rgba(255,255,255,.04);border:1px solid var(--divider);padding:5px 10px;border-radius:20px} .svc-cta{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:38px;color:var(--text-dim);font-weight:600;font-size:.95rem} .svc-cta a[href^="tel"]{color:var(--accent-glow);font-weight:700} @media(max-width:900px){.svc-grid{grid-template-columns:1fr 1fr}} @media(max-width:600px){.svc-grid{grid-template-columns:1fr}.trust-strip .wrap{gap:16px}} /* Why / split */ .split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:stretch} .split .visual{min-height:100%;border-radius:14px;background:#0C0F13;position:relative;overflow:hidden;border:1px solid var(--divider)} .split .visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .split .visual .cap{position:absolute;left:16px;bottom:16px;z-index:2;background:rgba(11,13,16,.72);backdrop-filter:blur(8px);border:1px solid var(--divider);border-radius:8px;padding:9px 14px;font-family:"Barlow Condensed";font-weight:600;text-transform:uppercase;color:#fff;letter-spacing:.03em} .split .visual .cap b{color:var(--accent)} .why-list{list-style:none;margin:22px 0 30px;padding:0;display:grid;gap:16px} .why-list li{display:flex;gap:14px;align-items:flex-start} .why-list .n{align-self:center;width:42px;height:42px;border-radius:10px;background:transparent;border:1.6px solid var(--accent);color:var(--accent);display:grid;place-items:center;font-family:"Barlow Condensed";font-weight:700;font-size:1.2rem;flex:none} .why-list b{color:#fff;display:block;font-family:"Barlow Condensed";font-size:1.25rem;text-transform:uppercase} .why-list span{color:var(--text-dim);font-size:.95rem} .why-proof{display:flex;gap:16px;flex-wrap:wrap;margin:0 0 26px} .why-proof div{flex:1;min-width:110px;background:var(--surface);border:1px solid var(--divider);border-radius:10px;padding:14px 16px} .why-proof b{display:block;font-family:"Barlow Condensed";font-size:1.9rem;font-weight:700;color:var(--accent);line-height:1} .why-proof span{color:var(--text-dim);font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em} @media(max-width:860px){.split{grid-template-columns:1fr;gap:30px}.split .visual{aspect-ratio:16/10;min-height:0}} /* Stats — big ghosted number with label overlaid (DetailX style) */ .stats{background:var(--bg-alt);border-top:1px solid var(--divider);border-bottom:1px solid var(--divider)} .stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:64px 24px;text-align:center} .stat{position:relative;padding:26px 10px;display:flex;align-items:center;justify-content:center} .stat + .stat{border-left:1px solid var(--divider)} .stat .num{font-family:"Barlow Condensed";font-weight:700;font-size:clamp(4.2rem,8.5vw,7rem);line-height:.85;color:rgba(255,255,255,.07)} .stat small{position:absolute;left:0;right:0;top:50%;transform:translateY(-45%);color:#fff;text-transform:uppercase;letter-spacing:.16em;font-size:.86rem;font-weight:600} @media(max-width:640px){.stats .wrap{grid-template-columns:1fr 1fr;gap:0}.stat:nth-child(3){border-left:none}.stat:nth-child(n+3){border-top:1px solid var(--divider)}} /* Marquee — rolling brand/service text */ .marquee{overflow:hidden;white-space:nowrap;background:var(--bg);border-top:1px solid var(--divider);border-bottom:1px solid var(--divider);padding:24px 0} .marquee-track{display:inline-flex;align-items:center;animation:marquee 32s linear infinite;will-change:transform} .marquee-track .m{font-family:"Barlow Condensed";font-weight:700;font-size:clamp(2.8rem,7vw,5.5rem);line-height:1;text-transform:uppercase;color:rgba(255,255,255,.06);padding:0 .3em;letter-spacing:.01em} .marquee-track .m.on{color:transparent;-webkit-text-stroke:1px rgba(40,169,226,.35)} .marquee-track .d{color:var(--accent);font-size:1.4rem;padding:0 .15em} .marquee.rev .marquee-track{animation-direction:reverse} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.marquee-track{animation:none}} /* Process */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .step{text-align:center;padding:10px} .step .circ{width:70px;height:70px;margin:0 auto 16px;border-radius:50%;border:1px solid rgba(40,169,226,.4);display:grid;place-items:center;color:var(--accent);position:relative;background:var(--surface)} .step .circ svg{width:32px;height:32px} .step .circ b{position:absolute;top:-8px;right:-8px;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#04121C;font-family:"Barlow Condensed";font-weight:700;display:grid;place-items:center;font-size:.85rem} .step h4{font-size:1.3rem;text-transform:uppercase;margin-bottom:6px} .step p{color:var(--text-dim);font-size:.9rem;margin:0} @media(max-width:820px){.steps{grid-template-columns:1fr 1fr}} /* About / Showcase */ .showcase{position:relative;overflow:hidden;background:var(--bg)} .ghost-word{position:absolute;left:0;right:0;bottom:4%;text-align:center;font-family:"Barlow Condensed";font-weight:700;font-size:clamp(5rem,15vw,14rem);line-height:.8;color:rgba(255,255,255,.03);letter-spacing:.22em;pointer-events:none;z-index:0;white-space:nowrap} .showcase-grid{position:relative;z-index:1;display:grid;grid-template-columns:.82fr 1.18fr;gap:52px;align-items:start} .sc-intro{color:var(--text-dim);text-align:right;max-width:34ch;margin:6px 0 0 auto;font-size:1rem} .sc-list{list-style:none;margin:34px 0 0;padding:0;text-align:right} .sc-list li{font-family:"Barlow Condensed";font-weight:700;font-size:clamp(1.6rem,3vw,2.4rem);text-transform:uppercase;color:var(--text-dim);padding:9px 0;transition:color .2s,transform .2s;cursor:pointer;user-select:none} .sc-list li.active,.sc-list li:hover{color:var(--accent);transform:translateX(-6px)} .sc-right .eyebrow{margin-bottom:16px} .sc-right .eyebrow svg{width:18px;height:18px} .sc-right h2{font-size:clamp(2rem,4vw,3.3rem);text-transform:uppercase;margin-bottom:26px} .sc-card{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--divider);aspect-ratio:16/9.3;box-shadow:0 30px 70px rgba(0,0,0,.5)} .sc-card img{width:100%;height:100%;object-fit:cover;transition:opacity .18s ease} .sc-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,8,10,.92),transparent 55%)} .sc-tags{position:absolute;left:22px;bottom:70px;z-index:2;display:flex;gap:10px} .sc-tags span{border:1px solid rgba(40,169,226,.6);color:#fff;border-radius:20px;padding:6px 15px;font-size:.82rem;font-weight:600;background:rgba(11,13,16,.45);backdrop-filter:blur(4px)} .sc-cta{position:absolute;left:22px;bottom:22px;z-index:2;font-family:"Barlow Condensed";font-weight:700;font-size:clamp(1.4rem,2.4vw,2rem);text-transform:uppercase;color:#fff} @media(max-width:860px){.showcase-grid{grid-template-columns:1fr;gap:30px}.sc-intro,.sc-list{text-align:left;margin-left:0}.sc-list li.active,.sc-list li:hover{transform:none}} /* Area */ .area{background:radial-gradient(900px 500px at 100% 0%,rgba(30,116,212,.16),transparent 55%),var(--bg)} .counties{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px} .counties span{min-width:150px;text-align:center;background:var(--surface);border:1px solid var(--divider);border-radius:8px;padding:13px 22px;font-family:"Barlow Condensed";font-weight:600;font-size:1.15rem;letter-spacing:.03em;text-transform:uppercase;color:#fff;cursor:default;transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease} .counties span:hover{background:var(--accent);border-color:var(--accent);color:#04121C;transform:translateY(-3px);box-shadow:0 10px 24px rgba(40,169,226,.38)} .counties span .accent{color:var(--accent)} /* Reviews */ .rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .rev{background:var(--surface);border:1px solid var(--divider);border-radius:10px;padding:26px} .rev .stars{color:#FFC53D;letter-spacing:3px;margin-bottom:12px} .rev p{color:var(--text);font-size:.98rem;margin:0 0 16px} .rev .who{display:flex;align-items:center;gap:11px} .rev .av{width:40px;height:40px;border-radius:50%;background:var(--grad);color:#04121C;display:grid;place-items:center;font-family:"Barlow Condensed";font-weight:700} .rev .who b{color:#fff;display:block;font-size:.95rem} .rev .who small{color:var(--text-dim)} @media(max-width:900px){.rev-grid{grid-template-columns:1fr}} /* CTA band */ .cta-band{background:var(--grad);color:#04121C;text-align:center} .cta-band h2{color:#04121C;font-size:clamp(2rem,4vw,3rem);text-transform:uppercase} .cta-band p{color:#06263b;max-width:50ch;margin:12px auto 26px;font-weight:500} .cta-band .btn-primary{background:#04121C;color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.3)} .cta-band .btn-primary:hover{background:#0B0D10} .cta-band .btn-ghost{border-color:rgba(4,18,28,.4);color:#04121C} /* Footer */ .site-footer{background:#080A0D;border-top:1px solid var(--divider);padding:64px 0 28px} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px} .site-footer h5{font-family:"Barlow Condensed";text-transform:uppercase;color:#fff;font-size:1.15rem;letter-spacing:.05em;margin:0 0 16px} .site-footer a{color:var(--text-dim);display:block;padding:5px 0;font-size:.93rem} .site-footer a:hover{color:var(--accent)} .foot-brand p{color:var(--text-dim);font-size:.93rem;max-width:34ch} .socials{display:flex;gap:10px;margin-top:16px} .socials a{width:38px;height:38px;border-radius:8px;background:var(--surface);border:1px solid var(--divider);display:grid;place-items:center;color:var(--text-dim);padding:0} .socials a:hover{color:var(--accent);border-color:var(--accent)} .foot-bottom{border-top:1px solid var(--divider);margin-top:40px;padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#6b7580;font-size:.82rem} .foot-bottom a{display:inline;padding:0;color:var(--text-dim)} .foot-bottom a:hover{color:var(--accent)} @media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}} @media(max-width:520px){.foot-grid{grid-template-columns:1fr}} /* Mobile sticky call bar */ .mobile-call{display:none} @media(max-width:760px){ .mobile-call{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:80;background:rgba(11,13,16,.95);backdrop-filter:blur(10px);border-top:1px solid var(--divider);padding:10px 14px} .mobile-call .btn{justify-content:center;padding:13px} body{padding-bottom:70px} } /* Reveal animation */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease} .reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}} /* ===== Real logo + header social + Recent Work gallery (2026-07-14) ===== */ .brand-logo{display:block;height:100px;width:auto;margin-bottom:-55px;position:relative;z-index:2} .site-footer .brand-logo{height:64px;margin-bottom:14px} .hdr-social{margin-top:0} .hdr-social a{width:34px;height:34px} @media(max-width:1040px){.hdr-social{display:none}} .work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:38px} .work-item{position:relative;display:block;border-radius:10px;overflow:hidden;border:1px solid var(--divider);aspect-ratio:1;background:#0C0F13} .work-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease} .work-item::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,8,10,.55),transparent 45%);opacity:0;transition:opacity .3s} .work-item:hover img{transform:scale(1.06)} .work-item:hover::after{opacity:1} @media(max-width:720px){.work-grid{grid-template-columns:repeat(2,1fr);gap:10px}} /* ===== Full-width Recent Work mosaic (2026-07-14 v2) ===== */ .work-section{overflow:hidden} .work-grid-full{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;width:100%;margin-top:36px;grid-auto-flow:row dense} .work-grid-full .work-item{aspect-ratio:1;border-radius:0;border:none;overflow:hidden} .work-grid-full .work-item:first-child{grid-column:span 2;grid-row:span 2} .work-grid-full .work-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease} .work-grid-full .work-item:hover img{transform:scale(1.05)} @media(max-width:1100px){.work-grid-full{grid-template-columns:repeat(4,1fr)}} @media(max-width:700px){.work-grid-full{grid-template-columns:repeat(2,1fr)}.work-grid-full .work-item:first-child{grid-column:auto;grid-row:auto}} /* ===== Recent Work lightbox (2026-07-14) ===== */ .work-item{cursor:zoom-in} .tad-lb{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;background:rgba(6,8,10,.93);backdrop-filter:blur(6px);padding:40px} .tad-lb.on{display:flex} .tad-lb__fig{margin:0;max-width:92vw;max-height:88vh;display:flex;flex-direction:column;align-items:center;gap:12px} .tad-lb__img{max-width:92vw;max-height:80vh;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.6);object-fit:contain;background:#0c0f13} .tad-lb__cap{color:#cfd6dd;font-family:"Barlow";font-size:.95rem;text-align:center;max-width:60ch} .tad-lb__x{position:absolute;top:22px;right:26px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#fff;font-size:1.9rem;line-height:1;cursor:pointer;transition:all .15s} .tad-lb__x:hover{background:var(--accent);color:#04121c;border-color:var(--accent)} .tad-lb__nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#fff;font-size:2rem;line-height:1;cursor:pointer;transition:all .15s} .tad-lb__nav:hover{background:var(--accent);color:#04121c;border-color:var(--accent)} .tad-lb__prev{left:24px} .tad-lb__next{right:24px} @media(max-width:600px){.tad-lb{padding:14px}.tad-lb__nav{width:42px;height:42px;font-size:1.6rem}.tad-lb__prev{left:10px}.tad-lb__next{right:10px}} .trust-strip .ti img.ti-ic{width:40px;height:40px;flex:none;object-fit:contain} /* ===== Service page template ===== */ .svc-hero{position:relative;min-height:500px;display:flex;align-items:center;padding:90px 0 60px} .svc-hero-in{max-width:640px;position:relative;z-index:2} .svc-hero h1{font-size:clamp(2.4rem,5.5vw,4rem);font-weight:700;text-transform:uppercase;margin:16px 0} .svc-hero .sub{color:var(--text);font-size:1.12rem;max-width:44ch;margin:0 0 26px} .incl-grid{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px} .incl-grid li{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--divider);border-radius:10px;padding:16px 18px;font-weight:600;color:#fff} .incl-grid .ic{width:26px;height:26px;flex:none;color:var(--accent);display:grid;place-items:center} .incl-grid .ic svg{width:20px;height:20px} @media(max-width:640px){.incl-grid{grid-template-columns:1fr}} /* ===== Service page v2 (AutoZen-style two-column) ===== */ .svc-banner{position:relative;padding:104px 0 74px;text-align:center;background-size:cover;background-position:center} .svc-banner::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(6,8,10,.7),rgba(6,8,10,.88))} .svc-banner .wrap{position:relative;z-index:2} .svc-banner h1{font-size:clamp(2.6rem,6vw,4.4rem);text-transform:uppercase;letter-spacing:.01em} .svc-crumb{margin-top:14px;color:var(--text-dim);font-weight:600;letter-spacing:.03em} .svc-crumb a{color:var(--accent)} .svc-layout{display:grid;grid-template-columns:340px 1fr;gap:40px;align-items:start} @media(max-width:960px){.svc-layout{grid-template-columns:1fr}} .svc-aside{display:flex;flex-direction:column;gap:22px;position:sticky;top:140px} @media(max-width:960px){.svc-aside{position:static}} .svc-book{background:var(--surface);border:1px solid var(--divider);border-radius:14px;padding:26px 24px} .svc-book h3{font-size:1.4rem;text-transform:uppercase} .svc-book .rule{display:block;height:3px;width:56px;background:var(--accent);margin:14px 0 20px;border-radius:2px} .svc-book .price{display:flex;flex-direction:column;gap:2px;margin-bottom:14px} .svc-book .price .lbl{color:var(--text-dim);font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.1em} .svc-book .price .amt{font-family:"Barlow Condensed";font-size:2.2rem;font-weight:700;color:var(--accent);line-height:1} .svc-book .meta{color:var(--text-dim);margin:8px 0 0;font-weight:600} .svc-book .meta b{color:#fff;font-weight:700} .svc-book .btn{width:100%;justify-content:center;margin-top:20px} .svc-promo{position:relative;border-radius:14px;overflow:hidden;padding:30px 24px;text-align:center;border:1px solid var(--divider)} .svc-promo::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(6,8,10,.8),rgba(6,8,10,.92)),var(--promo-bg) center/cover;z-index:0} .svc-promo>*{position:relative;z-index:1} .svc-promo h3{font-size:1.35rem;text-transform:uppercase;margin-bottom:16px;color:#fff} .svc-promo ul{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:10px} .svc-promo li{display:flex;align-items:center;justify-content:center;gap:9px;font-weight:600;color:#fff} .svc-promo li svg{width:18px;height:18px;color:var(--accent);flex:none} .svc-promo .btn{width:100%;justify-content:center} .svc-main .sd-gallery{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:32px} .svc-main .sd-gallery img{width:100%;border-radius:12px;border:1px solid var(--divider);aspect-ratio:4/3;object-fit:cover;display:block} .svc-main .sd-mid{margin:34px 0 24px} .svc-main .sd-mid img{width:100%;border-radius:12px;border:1px solid var(--divider);aspect-ratio:16/8;object-fit:cover;display:block} @media(max-width:560px){.svc-main .sd-gallery{grid-template-columns:1fr}} .svc-main h2{font-size:1.7rem;text-transform:uppercase;margin:0 0 14px} .svc-main h2+p,.svc-main p{color:var(--text-dim);margin:0 0 14px} .svc-main h2:not(:first-of-type){margin-top:40px} .sd-incl{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:12px 26px} @media(max-width:560px){.sd-incl{grid-template-columns:1fr}} .sd-incl li{display:flex;align-items:flex-start;gap:11px;color:#fff;font-weight:600} .sd-incl li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:9px;flex:none;box-shadow:0 0 8px var(--accent)} .sd-benes{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:20px} @media(max-width:560px){.sd-benes{grid-template-columns:1fr}} .sd-benes li{display:flex;gap:12px} .sd-benes .ic{width:32px;height:32px;flex:none;color:var(--accent);border:1px solid rgba(40,169,226,.4);border-radius:8px;display:grid;place-items:center} .sd-benes .ic svg{width:18px;height:18px} .sd-benes b{color:#fff;display:block;margin-bottom:2px} .sd-benes span span{color:var(--text-dim);font-size:.92rem;font-weight:400} .sd-quote{margin-top:56px;background:linear-gradient(120deg,var(--accent-deep),var(--accent));border-radius:14px;padding:38px 32px 30px;position:relative} .sd-qbadge{position:absolute;top:-28px;left:28px;width:58px;height:58px;border-radius:50%;background:#0B0D10;border:2px solid var(--accent);display:grid;place-items:center;color:#fff;box-shadow:0 10px 22px rgba(0,0,0,.45)} .sd-qbadge svg{width:26px;height:26px} .sd-quote p{color:#04121C !important;font-size:1.15rem;font-weight:600;margin:0 0 14px !important;line-height:1.45} .sd-quote .who{color:#04121C;font-weight:700} .sd-quote .who b{display:block;font-family:"Barlow Condensed";font-size:1.15rem} /* Service sidebar nav */ .svc-nav{background:var(--surface);border:1px solid var(--divider);border-radius:14px;padding:22px 20px} .svc-nav h3{font-size:1.25rem;text-transform:uppercase} .svc-nav .rule{display:block;height:3px;width:50px;background:var(--accent);margin:12px 0 6px;border-radius:2px} .svc-nav ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:2px} .svc-nav li a{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:8px;color:var(--text-dim);font-weight:600;font-family:"Barlow Condensed";font-size:1.12rem;text-transform:uppercase;letter-spacing:.02em;transition:background .15s,color .15s} .svc-nav li a:hover{background:var(--bg);color:#fff} .svc-nav li.active a{background:var(--accent);color:#04121C} .svc-nav li a .arw{opacity:.55;font-size:1.2rem} /* ===== Client Feedback / reviews section (AutoZen-style) ===== */ .feedback{background:var(--bg);padding:100px 0;overflow:hidden} .fb-top{display:grid;grid-template-columns:1.55fr 1fr;gap:40px;align-items:start} @media(max-width:900px){.fb-top{grid-template-columns:1fr;gap:24px}} .fb-head h2{font-size:clamp(1.9rem,3.7vw,3rem);text-transform:uppercase;margin-top:14px;max-width:600px} .fb-badge .fb-brow{display:flex;align-items:center;gap:14px;margin-bottom:14px} .fb-avatars{display:flex;align-items:center} .fb-avatars img,.fb-avatars span{width:40px;height:40px;border-radius:50%;border:2px solid var(--bg);margin-left:-12px} .fb-avatars img{object-fit:cover} .fb-avatars img:first-child{margin-left:0} .fb-avatars span{background:var(--grad);color:#04121C;display:grid;place-items:center;font-family:"Barlow Condensed";font-weight:700;font-size:.95rem} .fb-avatars .more{background:var(--accent)} .fb-count b{display:block;color:#fff;font-family:"Barlow Condensed";font-size:1.2rem;font-weight:700;line-height:1.1} .fb-count small{color:var(--text-dim);font-size:.8rem} .fb-badge p{color:var(--text-dim);font-size:.95rem;margin:0;max-width:42ch} .fb-car{margin:-150px 0 -112px;text-align:center;position:relative;z-index:0;pointer-events:none} .fb-car img{max-width:min(1060px,100%);height:auto;display:inline-block;transform:rotate(-6deg);transform-origin:center} @media(max-width:900px){.fb-car{margin:10px 0 6px}.fb-car img{transform:rotate(-3deg);max-width:100%}} .fb-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative;z-index:1} @media(max-width:860px){.fb-cards{grid-template-columns:1fr}} .fbcard{position:relative;background:var(--surface);border:1px solid var(--divider);border-radius:12px;padding:26px 24px} .fbcard .stars{color:var(--accent);letter-spacing:3px;font-size:.9rem} .fbcard .fbq{position:absolute;top:24px;right:22px;width:22px;height:22px;color:var(--accent);opacity:.35} .fbcard .fbwho{display:flex;align-items:center;gap:12px;margin:16px 0 14px} .fbcard .av{width:46px;height:46px;border-radius:50%;overflow:hidden;flex:none;background:var(--surface)} .fbcard .av img{width:100%;height:100%;object-fit:cover;display:block} .fbcard .fbwho b{color:#fff;display:block;font-family:"Barlow Condensed";font-size:1.05rem} .fbcard .fbwho small{color:var(--text-dim);font-size:.82rem} .fbcard p{color:var(--text-dim);margin:0;font-size:.96rem;line-height:1.55} /* =================================================================== NAV ACTIVE STATE (2026-07-15) Shows the visitor where they are: real pages are marked server-side, homepage/county section links light up on scroll via the spy in main.js. =================================================================== */ .nav a.active, .nav-has.is-active > a { color: var(--accent); } /* underline bar under the current top-level item */ .nav > a, .nav-has > a { position: relative; } .nav > a.active::after, .nav-has.is-active > a::after, .nav-has > a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 10px rgba(40, 169, 226, .65); } /* the dropdown carets sit inside the label, keep the bar off the arrow */ .nav-has > a.active::after, .nav-has.is-active > a::after { right: 14px; } /* current item inside a dropdown */ .nav-drop a.active { color: var(--accent); background: rgba(40, 169, 226, .12); border-radius: 6px; } @media (max-width: 980px) { /* no underline bar in the stacked mobile menu, just the colour */ .nav > a.active::after, .nav-has > a.active::after, .nav-has.is-active > a::after { display: none; } } /* =================================================================== ABOUT + CONTACT PAGE STYLES (2026-07-15) =================================================================== */ /* --- shared compact page hero --- */ .page-hero { position: relative; min-height: 460px; display: flex; align-items: center; overflow: hidden; } .page-hero-sm { min-height: 400px; } .page-hero-media { position: absolute; inset: 0; z-index: 0; } .page-hero-media img { width: 100%; height: 100%; object-fit: cover; } .page-hero-ov { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(6,8,10,.82), rgba(6,8,10,.62) 45%, rgba(6,8,10,.9)); } .page-hero-in { position: relative; z-index: 2; width: 100%; padding-top: 90px; text-align: center; } .page-hero-in h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); text-transform: uppercase; line-height: 1.04; margin: 14px 0 0; } .page-hero-in .sub { color: var(--text-dim); font-size: 1.08rem; max-width: 60ch; margin: 16px auto 0; line-height: 1.65; } /* --- About: values list --- */ .about-values { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 40px; } /* --- About: how it works --- */ .how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .how-step { background: var(--bg-alt, #101820); border: 1px solid var(--divider, #1e2a35); border-radius: 14px; padding: 30px 26px; text-align: center; } .how-step .hn { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 50%; background: rgba(40,169,226,.12); color: var(--accent); font-weight: 800; font-size: 1.35rem; } .how-step b { display: block; font-size: 1.15rem; margin-bottom: 8px; } .how-step p { color: var(--text-dim); font-size: .95rem; line-height: 1.6; } /* --- Contact: two-column --- */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: start; } .contact-row { display: flex; align-items: flex-start; gap: 15px; padding: 17px 0; border-top: 1px solid var(--divider, #1e2a35); color: inherit; text-decoration: none; } .contact-row:first-of-type { border-top: none; } .contact-row .cr-ic { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; background: rgba(40,169,226,.12); color: var(--accent); } .contact-row .cr-ic svg { width: 20px; height: 20px; } .contact-row .cr-txt b { display: block; font-size: 1.02rem; margin-bottom: 3px; } .contact-row .cr-txt small { color: var(--text-dim); font-size: .9rem; line-height: 1.5; display: block; } .contact-row-lg .cr-txt b { font-size: 1.45rem; letter-spacing: .01em; } a.contact-row:hover .cr-txt b { color: var(--accent); } .contact-socials { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--divider, #1e2a35); } .contact-socials .cs-label { display: block; color: var(--text-dim); font-size: .82rem; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 12px; } /* --- Contact: service-area chips --- */ .area-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .area-chip { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: #fff; padding: 9px 18px; border-radius: 22px; font-weight: 500; font-size: .92rem; transition: .15s; } .area-chip:hover { background: rgba(40,169,226,.18); border-color: var(--accent); color: #fff; } @media (max-width: 900px) { .page-hero { min-height: 360px; } .page-hero-sm { min-height: 320px; } .page-hero-in { padding-top: 76px; } .about-values { grid-template-columns: 1fr; gap: 18px; } .how-grid { grid-template-columns: 1fr; gap: 16px; } .contact-grid { grid-template-columns: 1fr; gap: 36px; } } /* =================================================================== Contact page: let the quote form fill its column (2026-07-15) .quote-card carries max-width:432px from the hero, where it sits beside hero copy. On the Contact page its column is 599px, so the cap left a 167px dead gap (and pushed the card right). Override here only, so the hero keeps its original proportions. =================================================================== */ .contact-right .quote-card { max-width: none; width: 100%; margin-left: 0; margin-right: 0; } /* Give the form a little more of the row than the contact list, and tighten the gutter - the left column is short text and does not need 599px. */ @media (min-width: 901px) { .contact-grid { grid-template-columns: 0.85fr 1.15fr; gap: 40px; } } /* Name + phone side by side now there's room. The form has no row wrappers, so target the fields directly. Hidden inputs and the .qf-hp honeypot are display:none, so they never take a grid cell. */ @media (min-width: 901px) { .contact-right .quote-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .contact-right .quote-form > *:not(input[name="q_name"]):not(input[name="q_phone"]) { grid-column: 1 / -1; } .contact-right .quote-form .qf-hp { display: none; } } /* =================================================================== TOUCH TARGETS (2026-07-15) Audit at real device widths found nav/phone/footer links rendering 17-20px tall. Apple's guideline is a 44px minimum; under ~28px people miss them. No horizontal-scroll issues were found on any device, so this is the only real responsive defect. Uses pointer:coarse so it applies to touch devices (incl. iPad at 1024px wide, which the width-only breakpoints were missing). =================================================================== */ @media (pointer: coarse) { /* header phone */ .hdr-phone { min-height: 44px; display: inline-flex; align-items: center; padding: 6px 4px; } /* top nav items */ .nav > a, .nav-has > a { min-height: 44px; display: inline-flex; align-items: center; } /* dropdown items */ .nav-drop a { min-height: 42px; display: flex; align-items: center; padding: 8px 12px; } /* footer link columns */ .site-footer .foot-grid a { min-height: 40px; display: inline-flex; align-items: center; } /* social icons */ .socials a { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; } /* contact page rows */ a.contact-row { min-height: 44px; } /* service-area chips */ .area-chip { min-height: 40px; display: inline-flex; align-items: center; } /* Phone links that sit INSIDE a sentence ("Prefer to talk? Call ..."). These are display:inline, and min-height does nothing on inline elements, so they need padding on an inline-block to grow the tap area. Kept modest so the sentence still reads as a sentence. */ .quote-card .qc-foot a, .svc-cta a, .hero-cta + span a, p a[href^="tel:"] { display: inline-block; padding: 11px 3px; line-height: 1.2; } } /* iPad portrait sits above the 980px mobile breakpoint but is still touch and still narrow-ish: keep the desktop nav, just make sure it has room. */ @media (min-width: 981px) and (max-width: 1120px) { .nav { gap: 18px; font-size: .9rem; } .hdr-cta { gap: 8px; } .hdr-phone .lbl { font-size: .92rem; } } /* Breadcrumb links on service pages are display:inline (min-height is ignored on inline elements), so pad an inline-block instead. */ @media (pointer: coarse) { .svc-crumb a { display: inline-block; padding: 10px 3px; line-height: 1.2; } } /* =================================================================== MOBILE NAV + COMPACT HEADER (2026-07-15) Below 981px the desktop .nav was display:none with NO hamburger, so the ENTIRE navigation was unreachable on phones and iPads - no way to reach any service page, county page, About, Gallery or Contact from the header. Pure-CSS checkbox toggle: no JS for the CDN or minifier to break. =================================================================== */ .tad-burger { display: none; } .tad-mpanel { display: none; } @media (max-width: 980px) { /* ---- compact the header bar ---- */ .hdr { gap: 8px; } .brand-logo { width: 104px; height: auto; } .hdr-cta { gap: 6px; margin: 0; } .hdr-social { display: none; } /* socials live in the panel + footer */ .hdr-cta .btn, .hdr-cta .btn-primary { padding: 9px 13px; font-size: .8rem; margin: 0; white-space: nowrap; } .hdr-phone { padding: 4px; margin: 0; } .hdr-phone .lbl { display: none; } /* icon-only: the number is huge on a small bar */ .hdr-phone .ph-ic { margin: 0; } /* ---- burger ---- */ .tad-burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 11px 9px; margin-left: 2px; flex: none; cursor: pointer; border-radius: 9px; border: 1px solid rgba(255,255,255,.18); } .tad-burger span { display: block; height: 2px; width: 100%; background: #fff; border-radius: 2px; transition: transform .2s, opacity .2s; } .tad-navchk:checked ~ .hdr .tad-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .tad-navchk:checked ~ .hdr .tad-burger span:nth-child(2) { opacity: 0; } .tad-navchk:checked ~ .hdr .tad-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---- panel ---- */ .tad-navchk:checked ~ .tad-mpanel { display: block; } .tad-mpanel { background: #0d1319; border-top: 1px solid rgba(255,255,255,.1); padding: 10px 20px 22px; max-height: 78vh; overflow-y: auto; } .tad-mpanel a { display: block; padding: 13px 2px; color: #e9eef3; font-weight: 600; font-size: 1rem; border-bottom: 1px solid rgba(255,255,255,.07); } .tad-mpanel a.active { color: var(--accent); } .tad-mhead { display: block; margin: 16px 0 2px; color: #7b8794; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } .tad-mpanel a.tad-msub { padding-left: 12px; font-weight: 500; font-size: .95rem; color: #b9c4cf; } .tad-mpanel .tad-mbook { margin-top: 18px; width: 100%; justify-content: center; border-bottom: none; padding: 14px; } } @media (max-width: 380px) { .brand-logo { width: 88px; } .hdr-cta .btn { padding: 8px 10px; font-size: .74rem; } } /* =================================================================== Mobile header cleanup (2026-07-15, Kris) - .brand-logo has margin-bottom:-55px so it overhangs the hero on desktop. On mobile that drags it off-centre, so zero it out there. - Header phone + Book Now are removed on mobile: the sticky bottom bar already has Call Now + Book, so they were duplicates. NOTE: the sticky bar only showed below 760px while the nav collapses at 980px. Stripping the header CTAs at 980 would have left 761-980px (iPad portrait) with NO call and NO book button at all. So the sticky bar now starts at 980 too, and the two breakpoints line up. =================================================================== */ @media (max-width: 980px) { .brand-logo { margin-bottom: 0; height: 62px; width: auto; } .hdr { height: 64px; } .hdr-cta { display: none; } /* duplicated by the sticky bar below */ .mobile-call { display: grid; } /* was 760px; align with the nav breakpoint */ } @media (max-width: 380px) { .brand-logo { height: 54px; } } /* =================================================================== Kris fixes, 2026-07-15 1. gallery CTA buttons were touching on mobile (no gap) 2. mobile gallery capped at 8 photos 3. About section on mobile: heading was appearing BELOW the intro and the service list, because .sc-right (which holds the eyebrow + h2) stacks after .sc-left. Also the list was oversized and single column. =================================================================== */ /* ── 1. gallery buttons need a gap ── */ .gallery-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; } /* ── 2. mobile gallery: first 8 photos only ── Verified against the real markup: #work .work-grid > .work-item */ @media(max-width:760px){ .work-grid .work-item:nth-child(n+9){ display:none; } } /* ── 3. About section, mobile ── */ @media(max-width:900px){ .showcase-grid{ grid-template-columns:1fr; gap:20px; } /* Let the children of both columns become grid items directly, so the eyebrow + heading can be ordered above the intro and the list. (display:contents removes the wrapper box; .reveal on those wrappers then has nothing to fade, so the content simply shows.) */ .sc-left, .sc-right{ display:contents; } .sc-right .eyebrow{ order:1; margin-bottom:10px; } .sc-right h2 { order:2; margin-bottom:14px; font-size:clamp(1.7rem,6.4vw,2.2rem); } .sc-intro { order:3; text-align:left; margin:0; max-width:none; font-size:.96rem; } .sc-list { order:4; } .sc-card { order:5; margin-top:6px; } /* scaled down + two columns */ .sc-list{ display:grid; grid-template-columns:1fr 1fr; gap:2px 16px; margin:14px 0 0; text-align:left; } .sc-list li{ font-size:1rem; padding:9px 0; line-height:1.25; } .sc-list li.active, .sc-list li:hover{ transform:none; } /* the -6px nudge reads as a glitch in a grid */ } @media(max-width:380px){ .sc-list li{ font-size:.92rem; } } /* Correction: the live gallery grid is .work-grid-full, NOT .work-grid. main.css carries a stale .work-grid rule that no markup uses, so the earlier cap silently matched nothing. Verified against the DOM: 9 items. */ @media(max-width:760px){ .work-grid-full .work-item:nth-child(n+9){ display:none; } } /* =================================================================== Mobile buttons: centred + one consistent width (2026-07-15, Kris) Audited live: content buttons were rendering at 170, 217, 229, 257, 262 and 292px across .hero-cta / .gallery-cta / .svc-cta / .svc-book / .svc-promo / .quote-form. Now all 100% up to a 300px cap, centred. .mobile-call is EXCLUDED on purpose: it is the sticky bottom bar and is a deliberate 2-up grid (Call Now | Book). =================================================================== */ @media (max-width: 760px) { .hero-cta, .gallery-cta, .svc-cta, .svc-book, .svc-promo { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; } .hero-cta .btn, .gallery-cta .btn, .svc-cta .btn, .svc-book .btn, .svc-promo .btn, .quote-form .btn, .quote-form button[type=submit] { width: 100%; max-width: 292px; /* matches the narrowest container, so every button caps identically */ justify-content: center; } /* sticky bottom bar keeps its two-across layout */ .mobile-call .btn { width: auto; max-width: none; } } /* =================================================================== Mobile buttons: tighter padding (2026-07-15, Kris) Measured before changing: content buttons were 65 / 59 / 56px tall. Scaled to ~48-50px. Deliberately NOT smaller: Apple's tap-target minimum is 44px, and calls are this business's #1 conversion, so a button people mis-tap costs real money. 48 is tight but safe. =================================================================== */ @media (max-width: 760px) { .hero-cta .btn, .gallery-cta .btn, .svc-cta .btn, .svc-book .btn, .svc-promo .btn, .quote-form .btn, .quote-form button[type=submit], .cta-band .btn { padding: 13px 18px; font-size: .88rem; line-height: 1.35; min-height: 46px; } /* the big hero/CTA variants were the chunkiest */ .btn-lg { padding: 14px 20px; font-size: .92rem; } /* sticky bottom bar: trim a little but keep it the most tappable thing */ .mobile-call .btn { padding: 12px 10px; font-size: .86rem; min-height: 46px; } .mobile-call { padding: 8px 12px; } } /* ---- 2026-07-15 Kris: mobile trust strip 2x2 + service sidebar below body ---- */ /* Trust strip: 4 badges stacked 1-per-row on mobile wasted a lot of height. Grid beats flex-wrap here - flex-wrap would break 2/2 only by luck of text width, grid guarantees 2 cols x 2 rows. Icon shrinks so the longest label ("Secure Online Payments") still gets a usable text column. */ @media(max-width:600px){ .trust-strip .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:20px 12px; padding:22px 18px; } .trust-strip .ti{align-items:flex-start;gap:9px;font-size:.92rem;line-height:1.25} .trust-strip .ti svg, .trust-strip .ti img.ti-ic{width:30px;height:30px} .trust-strip .ti small{font-size:.72rem;margin-top:2px} } /* Service pages: