/* ═══════════════════════════════════════════════════════════════ Highpoint Line Striping Palette: Asphalt Gray #2E2E2E · Safety Yellow #FFC107 Bright Blue #1976D2 · White Yellow is used for buttons and accents only — never for body text, where it would fail contrast against white. ═══════════════════════════════════════════════════════════════ */ /* Tokens are declared in the inlined critical CSS in index.html . */ /* ── Base ─────────────────────────────────────────────────────── */ body{padding-bottom:0} h2{font-size:clamp(1.65rem,3.4vw,2.5rem)} h3{font-size:1.06rem} p{margin:0} a{color:var(--blue)} ::selection{background:var(--safety);color:var(--asphalt)} :where(a,button,input,select,summary):focus-visible{ outline:3px solid var(--blue);outline-offset:3px;border-radius:6px; } .hero :where(a):focus-visible,.sec--dark :where(a):focus-visible, .finale :where(a):focus-visible,.foot :where(a):focus-visible{outline-color:var(--safety)} .skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--safety); color:var(--asphalt);padding:12px 20px;font-weight:800;text-decoration:none} .skip:focus{left:0} .wrap--narrow{max-width:820px} /* ── Top bar ──────────────────────────────────────────────────── */ /* Two lines of small print is a poor use of the space above the fold. */ @media (max-width:620px){ .topbar__tag{display:none} .topbar__in{justify-content:center} } /* ── Header ───────────────────────────────────────────────────── */ .hdr{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94); backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} .hdr__in{display:flex;align-items:center;gap:24px;min-height:68px} .logo{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)} .logo__mark{flex:none;border-radius:8px} .logo__txt{font-weight:800;letter-spacing:-.02em;font-size:1.06rem;line-height:1.1} .logo__txt em{display:block;font-style:normal;font-weight:600;font-size:.72rem; letter-spacing:.11em;text-transform:uppercase;color:var(--muted)} .nav{display:flex;gap:26px;margin-left:auto} .nav a{color:var(--muted);text-decoration:none;font-weight:600;font-size:.94rem} .nav a:hover{color:var(--ink)} .btn--sm{padding:11px 18px;font-size:.92rem;box-shadow:0 4px 0 #d59e00} .btn--sm:active{transform:translateY(2px);box-shadow:0 2px 0 #d59e00} .hdr__cta{white-space:nowrap} .hdr__cta-short{display:none} @media (max-width:900px){ .nav{display:none} .hdr__cta{margin-left:auto} } /* Phones: swap to the short label and a more compact button so it doesn't wrap or crowd the logo. */ @media (max-width:560px){ .hdr__cta{padding:9px 15px;font-size:.86rem;box-shadow:0 3px 0 #d59e00} .hdr__cta:active{box-shadow:0 1px 0 #d59e00} .hdr__cta-full{display:none} .hdr__cta-short{display:inline} } @media (max-width:420px){ .hdr__cta{padding:8px 13px;font-size:.82rem} .logo__txt{font-size:.95rem} } /* ── Hero ─────────────────────────────────────────────────────── */ /* Asphalt + painted lines, drawn entirely in CSS/SVG. No photo request, no layout shift, ~0 bytes over the wire. */ .hero__art{position:absolute;inset:0;z-index:1;pointer-events:none} /* Evenly spaced stall lines — the rhythm is what makes it read as a striped lot rather than random diagonals. Full-opacity yellow: at partial opacity it muddies to olive against the asphalt. */ .hero__lines{ position:absolute;inset:-25% -12% -25% 34%; background: repeating-linear-gradient(76deg, transparent 0 84px, #FFC107 84px 93px, transparent 93px 177px); transform:skewY(-2deg); mask-image:linear-gradient(102deg,transparent 16%,#000 48%,#000 86%,transparent 100%); -webkit-mask-image:linear-gradient(102deg,transparent 16%,#000 48%,#000 86%,transparent 100%); } /* Asphalt grain */ .hero__grain{ position:absolute;inset:0;opacity:.34;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Keep text legible over the art */ .hero::before{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(96deg,var(--asphalt) 44%,rgba(46,46,46,.74) 62%,rgba(46,46,46,.16) 100%)} /* On narrow screens there is no empty canvas to the right of the copy — the stall lines land on top of the headline. Legibility wins: drop the lines and keep the asphalt grain, which still carries the material. */ @media (max-width:900px){ .hero__lines{display:none} .hero::before{background:var(--asphalt)} .hero__grain{opacity:.4} } .eyebrow{margin:0 0 18px;font-size:.76rem;font-weight:800;letter-spacing:.15em; text-transform:uppercase;color:var(--safety)} .eyebrow--dark{color:#8a7415} .ticks{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;margin:26px 0 0;padding:0} .ticks li{display:flex;align-items:center;gap:9px;font-weight:600;font-size:.97rem;color:#efefef} .ticks li::before{ content:"";width:19px;height:19px;flex:none;border-radius:50%; background:var(--safety) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E2E2E' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat; } .hero__cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:34px} .btn--ghost{background:transparent;color:var(--white);border:2px solid rgba(255,255,255,.34)} .btn--ghost:hover{border-color:var(--safety);color:var(--safety)} .hero__note{margin:22px 0 0;font-size:.88rem;color:#a9a9a9} /* ── Trust bar ────────────────────────────────────────────────── */ .trustbar{background:var(--asphalt-800);color:#e8e8e8;border-top:3px solid var(--safety)} .trustbar__in{display:flex;align-items:center;justify-content:space-between; gap:14px 30px;flex-wrap:wrap;padding-block:16px} .trustbar__stars{display:inline-flex;align-items:center;gap:10px;font-size:.9rem} .trustbar__list{list-style:none;display:flex;flex-wrap:wrap;gap:8px 24px;margin:0;padding:0; font-size:.88rem;color:#c6c6c6} .trustbar__list li{display:flex;align-items:center;gap:7px} .trustbar__list li::before{content:"✔";color:var(--safety);font-weight:800} /* ── Sections ─────────────────────────────────────────────────── */ .sec{padding-block:clamp(56px,7vw,88px)} .sec--soft{background:var(--bg-soft)} .sec--dark{background:var(--asphalt);color:var(--white)} .sec__h{max-width:20ch} .sec__lede{color:var(--muted);margin-top:14px;max-width:58ch} .sec--dark .sec__lede{color:#bdbdbd} .grid{display:grid;gap:20px;margin-top:38px} .grid--4{grid-template-columns:repeat(4,1fr)} .grid--3{grid-template-columns:repeat(3,1fr)} @media (max-width:900px){.grid--4{grid-template-columns:repeat(2,1fr)}} @media (max-width:760px){.grid--3{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){ .grid--4,.grid--3{grid-template-columns:1fr} .grid--svc{grid-template-columns:repeat(2,1fr)} } /* ── Quote section ────────────────────────────────────────────── */ .quote{padding-block:clamp(48px,6vw,76px);background: linear-gradient(var(--bg-soft),var(--bg-soft)) padding-box} .quote__grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center} @media (max-width:940px){.quote__grid{grid-template-columns:1fr;gap:30px}} .quote__pitch h2{max-width:15ch} .quote__pitch>p{margin-top:16px;color:var(--muted);max-width:50ch} .quote__pts{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:11px} .quote__pts li{display:flex;align-items:center;gap:11px;font-weight:600;font-size:.97rem} .dot{width:9px;height:9px;border-radius:50%;background:var(--safety);flex:none; box-shadow:0 0 0 4px rgba(255,193,7,.24)} .quote__alt{margin-top:24px;font-size:.93rem;color:var(--muted)} .quote__alt a{font-weight:700} .card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius); padding:26px;box-shadow:0 18px 44px -22px rgba(0,0,0,.28)} .card--form{border-top:4px solid var(--safety)} .card__title{font-size:1.3rem;margin-bottom:18px} .field{display:grid;gap:6px;margin-bottom:14px} .field label{font-size:.86rem;font-weight:700;color:#333} .req{color:#c0392b} .opt{font-weight:500;color:var(--muted)} .field input,.field select{ font:inherit;font-size:1rem;padding:12px 13px;border:1.5px solid #d6d6d6; border-radius:9px;background:var(--white);color:var(--ink);width:100%; } .field input:hover,.field select:hover{border-color:#b4b4b4} .field input:focus,.field select:focus{border-color:var(--blue);outline:none; box-shadow:0 0 0 3px rgba(25,118,210,.18)} .field input.bad,.field select.bad{border-color:#c0392b;box-shadow:0 0 0 3px rgba(192,57,43,.13)} /* Per-field error message — hidden until it has text */ .fielderror{margin:0;font-size:.8rem;font-weight:600;color:#b3271b;display:none; align-items:center;gap:6px;line-height:1.35} .fielderror:not(:empty){display:flex} .fielderror::before{content:"";width:14px;height:14px;flex:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3271b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v5M12 16.5v.5'/%3E%3C/svg%3E") center/contain no-repeat} .row .field{margin-bottom:14px} .row{display:grid;grid-template-columns:1fr 1fr;gap:0 12px} @media (max-width:420px){.row{grid-template-columns:1fr}} .hp{position:absolute;left:-9999px;opacity:0;pointer-events:none} .btn--block{width:100%;margin-top:8px} .btn[disabled]{opacity:.62;cursor:progress} .formnote{margin-top:12px;font-size:.79rem;color:var(--muted);text-align:center} .formstatus{margin-top:14px;font-size:.92rem;font-weight:600;border-radius:9px; padding:0;line-height:1.5} .formstatus:not(:empty){padding:13px 15px} .formstatus.ok{background:#e8f5e9;color:#1b5e20;border:1px solid #a5d6a7} .formstatus.err{background:#fdecea;color:#8e2f24;border:1px solid #f5b7b1} .formstatus a{color:inherit;font-weight:800} /* ── Feature cards ────────────────────────────────────────────── */ .feat{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:24px} .feat__ic{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;margin-bottom:14px} .feat__ic svg{width:22px;height:22px} .feat__ic--green{background:#e7f4ea;color:#2e7d32} .feat__ic--yellow{background:#fff5d6;color:#8a6d00} .feat__ic--red{background:#fdeceb;color:#c0392b} .feat__ic--blue{background:#e6f0fb;color:var(--blue)} .feat h3{margin-bottom:7px} .feat p{color:var(--muted);font-size:.94rem} /* ── Photo slots (awaiting Ed's real job photos) ──────────────── */ .slot{ position:relative;display:grid;place-content:center;gap:7px;text-align:center; aspect-ratio:4/3;border-radius:11px;border:2px dashed #c8c8c8; background: repeating-linear-gradient(45deg,#efefef 0 11px,#e7e7e7 11px 22px); color:#7a7a7a;padding:14px; } .slot--sm{aspect-ratio:16/10;margin-bottom:14px} .slot__tag{font-weight:800;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase} .slot__hint{font-size:.79rem;line-height:1.4} .slot--sm .slot__hint{display:none} .shot figcaption{margin-top:10px;font-size:.88rem;font-weight:600;color:var(--muted)} /* Work-gallery images — cropped to a consistent box via object-fit */ .ba__art{width:100%;height:auto;aspect-ratio:8/5;border-radius:11px;display:block; object-fit:cover;background:var(--asphalt);box-shadow:0 1px 0 rgba(0,0,0,.04)} .slot__note{margin-top:22px;font-size:.85rem;color:var(--muted);font-style:italic} .svc{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:16px} .svc h3{margin-bottom:5px} .svc p{color:var(--muted);font-size:.92rem} /* Drawn, not photographed — see the note in index.html */ .svc__art{width:100%;height:auto;aspect-ratio:16/10;border-radius:9px;margin-bottom:14px; background:var(--asphalt)} /* ── Process steps ────────────────────────────────────────────── */ .steps{list-style:none;margin:38px 0 0;padding:0;display:grid; grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s} @media (max-width:860px){.steps{grid-template-columns:repeat(2,1fr)}} @media (max-width:500px){.steps{grid-template-columns:1fr}} .step{position:relative;background:var(--asphalt-700);border-radius:var(--radius);padding:22px; border:1px solid #4a4a4a} .step__n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%; background:var(--safety);color:var(--asphalt);font-weight:800;margin-bottom:13px} .step h3{margin-bottom:6px} .step p{color:#b9b9b9;font-size:.92rem} /* ── Reviews ──────────────────────────────────────────────────── */ .rev{margin:0;background:var(--white);border:1px solid var(--line); border-radius:var(--radius);padding:24px} .rev__stars{color:var(--safety);letter-spacing:2px} .rev p{margin:11px 0 14px;font-size:1rem} .rev cite{font-style:normal;font-size:.86rem;color:var(--muted);font-weight:600} /* Placeholder state — deliberately reads as unfinished so it can't be mistaken for a real customer's words, or shipped by accident. */ .rev--empty{background:transparent;border:2px dashed #c8c8c8} .rev--empty .rev__stars--empty{color:#b0b0b0} .rev--empty p,.rev--empty cite{color:#9a9a9a} .rev--empty p{font-style:italic} .rev__flag{display:block;margin-top:14px;font-size:.7rem;font-weight:800; letter-spacing:.08em;text-transform:uppercase;color:#8a7415} /* ── FAQ ──────────────────────────────────────────────────────── */ .faq{margin-top:34px;border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{cursor:pointer;list-style:none;padding:19px 44px 19px 0;position:relative; font-weight:700;font-size:1.02rem} .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"";position:absolute;right:8px;top:50%;width:11px;height:11px; border-right:2.5px solid var(--muted);border-bottom:2.5px solid var(--muted); transform:translateY(-70%) rotate(45deg);transition:transform .18s ease; } .faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)} .faq summary:hover{color:var(--blue)} .faq__a{padding:0 44px 19px 0;color:var(--muted)} /* ── Service area ─────────────────────────────────────────────── */ .area{padding-block:clamp(44px,5vw,64px);background:var(--white);border-top:1px solid var(--line)} .area__h{font-size:clamp(1.2rem,2.2vw,1.5rem)} .area__lede{margin-top:10px;color:var(--muted);font-size:.95rem;max-width:70ch} .area__list{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0} .area__list li{font-size:.84rem;font-weight:600;color:#4a4a4a;background:var(--bg-soft); border:1px solid var(--line);border-radius:999px;padding:6px 13px} .area__note{margin-top:18px;font-size:.88rem;color:var(--muted)} .area__note a{font-weight:700} /* ── Final CTA ────────────────────────────────────────────────── */ .finale{background:var(--asphalt-800);color:var(--white);text-align:center; padding-block:clamp(56px,7vw,84px);border-top:3px solid var(--safety)} .finale__in{display:grid;justify-items:center;gap:14px} .finale h2{max-width:18ch} .finale p{color:#bcbcbc} .finale__cta{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:12px} /* ── Footer ───────────────────────────────────────────────────── */ .foot{background:var(--asphalt);color:#c9c9c9;padding-block:48px 0;font-size:.92rem} .foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px} @media (max-width:860px){.foot__grid{grid-template-columns:1fr 1fr}} @media (max-width:520px){.foot__grid{grid-template-columns:1fr;gap:26px}} .logo--foot .logo__txt{color:var(--white)} .logo--foot .logo__txt em{color:#9a9a9a} .foot__tag{margin-top:12px;color:var(--safety);font-weight:700;font-size:.88rem} .foot__h{font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--white); margin-bottom:12px} .foot p{margin-bottom:7px} .foot a{color:#e0e0e0;text-decoration:none} .foot a:hover{color:var(--safety)} .foot__base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px; margin-top:40px;padding-block:20px;border-top:1px solid #454545;font-size:.83rem;color:#8f8f8f} .foot__base p{margin:0} /* ── Sticky mobile bar ────────────────────────────────────────── */ .stickybar{display:none} @media (max-width:760px){ .stickybar{ display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:8px; position:fixed;left:0;right:0;bottom:0;z-index:50; padding:9px 10px calc(9px + env(safe-area-inset-bottom)); background:rgba(36,36,36,.97);backdrop-filter:blur(8px); border-top:1px solid #4a4a4a; } .stickybar__b{display:flex;align-items:center;justify-content:center;gap:7px; padding:13px 8px;border-radius:10px;text-decoration:none;font-weight:800;font-size:.93rem} .stickybar__b--call{background:#3d3d3d;color:var(--white)} .stickybar__b--text{background:#3d3d3d;color:var(--white)} .stickybar__b--quote{background:var(--safety);color:var(--asphalt)} /* Keep the sticky bar from covering the end of the page */ body{padding-bottom:76px} .foot__base{margin-top:28px} } /* ── Floating desktop quote button ────────────────────────────── */ .floater{ position:fixed;right:22px;bottom:22px;z-index:45; background:var(--safety);color:var(--asphalt);font-weight:800; padding:15px 22px;border-radius:999px;text-decoration:none; box-shadow:0 12px 28px -8px rgba(0,0,0,.45); opacity:0;visibility:hidden;transform:translateY(14px); transition:opacity .22s ease,transform .22s ease,visibility .22s; } .floater.show{opacity:1;visibility:visible;transform:none} .floater:hover{background:#ffcd2e} @media (max-width:760px){.floater{display:none}} /* ── Motion ───────────────────────────────────────────────────── */ html{scroll-behavior:smooth;scroll-padding-top:80px} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} } /* ── Print ────────────────────────────────────────────────────── */ @media print{ .stickybar,.floater,.hdr__cta,.topbar{display:none} .hero{background:#fff;color:#000} .hero__art,.hero::before{display:none} }