/* ============================================================================ LOCAL SERVICE DESIGN SYSTEM v1 One stylesheet, themed per niche. Drop in assets/site.css and set a theme class on . Mobile-first. Every rule here earns its place. THEMES — set on so 25 sites don't look identical: t-water cool blue-teal + warm amber water treatment, plumbing t-earth clay + deep green crawl space, foundation, radon t-slate graphite + safety orange egress, structural, concrete t-clean deep teal + coral mold, biohazard, restoration ========================================================================= */ *,*::before,*::after{box-sizing:border-box} :root{ /* type scale — fluid, no media queries needed */ --f-xs:clamp(.78rem,.76rem + .1vw,.84rem); --f-sm:clamp(.88rem,.85rem + .15vw,.95rem); --f-base:clamp(1rem,.97rem + .18vw,1.09rem); --f-lg:clamp(1.13rem,1.06rem + .32vw,1.3rem); --f-xl:clamp(1.35rem,1.2rem + .7vw,1.75rem); --f-2xl:clamp(1.7rem,1.4rem + 1.4vw,2.5rem); --f-3xl:clamp(2.1rem,1.6rem + 2.4vw,3.4rem); /* spacing rhythm */ --s1:.35rem; --s2:.7rem; --s3:1.1rem; --s4:1.6rem; --s5:2.4rem; --s6:3.4rem; --s7:5rem; --s8:7rem; --wrap:1120px; --read:68ch; --r-sm:5px; --r:9px; --r-lg:15px; --shadow:0 1px 2px rgba(16,24,32,.05),0 4px 14px rgba(16,24,32,.07); --shadow-lg:0 4px 10px rgba(16,24,32,.07),0 18px 44px rgba(16,24,32,.13); --disp:'Archivo',system-ui,sans-serif; --body:'Public Sans',system-ui,sans-serif; --mono:'DM Mono',ui-monospace,monospace; } /* ---------- THEMES ---------- */ .t-water{ --ink:#0E1C28; --ink-soft:#33465A; --muted:#5E7183; --ground:#F7F9FB; --surface:#FFFFFF; --line:#DCE4EC; --brand:#0B5F8A; --brand-d:#073F5C; --brand-l:#E7F1F7; --accent:#C2610C; --accent-d:#9A4C08; --deep:#0B2233; } .t-earth{ --ink:#1D1A14; --ink-soft:#453F33; --muted:#6B6353; --ground:#FAF8F4; --surface:#FFFFFF; --line:#E5DFD3; --brand:#2E5E44; --brand-d:#1E4130; --brand-l:#E9F0EB; --accent:#B4531F; --accent-d:#8C3F16; --deep:#1B2A21; } .t-slate{ --ink:#14181D; --ink-soft:#3B434C; --muted:#646E79; --ground:#F6F7F9; --surface:#FFFFFF; --line:#DDE1E6; --brand:#2F3A45; --brand-d:#1C242C; --brand-l:#ECEEF1; --accent:#D2600F; --accent-d:#A64A09; --deep:#171D23; } .t-clean{ --ink:#0F1E1E; --ink-soft:#2E4747; --muted:#5A7373; --ground:#F6FAFA; --surface:#FFFFFF; --line:#D8E5E5; --brand:#0C5C55; --brand-d:#073E39; --brand-l:#E5F1F0; --accent:#C24A3C; --accent-d:#99372C; --deep:#0A2320; } html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0;background:var(--ground);color:var(--ink); font-family:var(--body);font-size:var(--f-base);line-height:1.68; -webkit-font-smoothing:antialiased; /* room for the mobile call bar */ padding-bottom:env(safe-area-inset-bottom); } img{max-width:100%;height:auto;display:block} a{color:var(--brand)} :focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:2px} .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s4)} .read{max-width:var(--read)} /* ---------- TYPE ---------- */ h1,h2,h3,h4{font-family:var(--disp);font-weight:800;line-height:1.12; letter-spacing:-.021em;margin:0;color:var(--ink);text-wrap:balance} h1{font-size:var(--f-3xl)} h2{font-size:var(--f-2xl);margin-block:var(--s6) var(--s3)} h3{font-size:var(--f-xl);font-weight:700;margin-block:var(--s5) var(--s2)} h4{font-size:var(--f-lg);font-weight:700} p{margin:0 0 var(--s3);max-width:var(--read)} .lede{font-size:var(--f-lg);color:var(--ink-soft);line-height:1.6} .eyebrow{font-family:var(--mono);font-size:var(--f-xs);letter-spacing:.16em; text-transform:uppercase;color:var(--accent);display:block;margin-bottom:var(--s2)} .sm{font-size:var(--f-sm)} .muted{color:var(--muted)} ul,ol{margin:0 0 var(--s3);padding-left:0;max-width:var(--read)} ul{list-style:none} ul li{position:relative;padding-left:1.6rem;margin-bottom:var(--s2)} ul li::before{content:"";position:absolute;left:.15rem;top:.62em;width:7px;height:7px; background:var(--accent);border-radius:1px;transform:rotate(45deg)} ol{list-style:none;counter-reset:o} ol li{counter-increment:o;position:relative;padding-left:2.3rem;margin-bottom:var(--s3)} ol li::before{content:counter(o);position:absolute;left:0;top:-.1em; width:1.6rem;height:1.6rem;border-radius:50%;background:var(--brand-l);color:var(--brand-d); font-family:var(--mono);font-size:var(--f-xs);font-weight:500; display:grid;place-items:center} /* ---------- HEADER ---------- */ .site-head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.93); backdrop-filter:blur(9px);border-bottom:1px solid var(--line)} .site-head .wrap{display:flex;align-items:center;justify-content:space-between; gap:var(--s3);min-height:64px} .brand{font-family:var(--disp);font-weight:800;font-size:1.06rem;color:var(--ink); text-decoration:none;letter-spacing:-.02em;line-height:1.2} .brand span{display:block;font-family:var(--mono);font-size:.62rem;font-weight:400; letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:2px} .nav{display:none;gap:var(--s4);align-items:center} .nav a{color:var(--ink-soft);text-decoration:none;font-size:var(--f-sm);font-weight:600} .nav a:hover{color:var(--brand)} .head-cta{display:inline-flex;align-items:center;gap:.45rem;background:var(--brand); color:#fff;text-decoration:none;font-weight:700;font-size:var(--f-sm); padding:.7rem 1.05rem;border-radius:var(--r-sm);min-height:44px;white-space:nowrap} .head-cta:hover{background:var(--brand-d)} /* ---------- HERO ---------- */ .hero{position:relative;background:var(--deep);color:#fff;overflow:hidden; padding-block:var(--s6) var(--s7)} .hero::before{content:"";position:absolute;inset:0; background: radial-gradient(120% 90% at 78% -12%,rgba(255,255,255,.13),transparent 58%), linear-gradient(163deg,transparent 48%,rgba(0,0,0,.34) 100%); pointer-events:none} .hero-media{position:absolute;inset:0;z-index:0} .hero-media img{width:100%;height:100%;object-fit:cover;opacity:.26; filter:saturate(.7) contrast(1.05)} .hero .wrap{position:relative;z-index:2} .hero h1{color:#fff;max-width:19ch} .hero .lede{color:rgba(255,255,255,.86);max-width:56ch;margin-top:var(--s3)} .hero .eyebrow{color:#fff;opacity:.72} /* ---------- BUTTONS ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem; min-height:54px;padding:.9rem 1.7rem;border-radius:var(--r-sm);border:2px solid transparent; font-family:var(--disp);font-weight:700;font-size:var(--f-base);letter-spacing:-.01em; text-decoration:none;cursor:pointer;transition:transform .12s ease,background .15s ease} .btn:active{transform:translateY(1px)} .btn-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow)} .btn-primary:hover{background:var(--accent-d)} .btn-outline{border-color:rgba(255,255,255,.42);color:#fff} .btn-outline:hover{background:rgba(255,255,255,.12)} .btn-solid{background:var(--brand);color:#fff} .btn-solid:hover{background:var(--brand-d)} .btn-row{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)} /* ---------- TRUST STRIP ---------- */ .trust{background:var(--surface);border-bottom:1px solid var(--line)} .trust ul{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin:0; padding-block:var(--s3);max-width:none} .trust li{padding-left:1.45rem;margin:0;font-size:var(--f-sm); font-weight:600;color:var(--ink-soft)} .trust li::before{width:0;height:0;background:none;transform:none;left:0;top:.42em; content:"";border-left:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent); width:11px;height:6px;rotate:-45deg;border-radius:0} /* ---------- SECTIONS ---------- */ main{display:block} .sec{padding-block:var(--s6)} .sec-alt{background:var(--surface);border-block:1px solid var(--line)} .sec-deep{background:var(--deep);color:rgba(255,255,255,.84)} .sec-deep h2,.sec-deep h3{color:#fff} .sec-deep .lede{color:rgba(255,255,255,.75)} .sec > .wrap > h2:first-child,.sec > .wrap > .eyebrow:first-child{margin-top:0} /* ---------- ANSWER BLOCK ---------- */ .answer{background:var(--brand-l);border-left:4px solid var(--brand); border-radius:0 var(--r) var(--r) 0;padding:var(--s4);margin-bottom:var(--s3); font-size:var(--f-lg);line-height:1.58;max-width:var(--read)} .answer strong{color:var(--brand-d)} .readon{color:var(--muted);font-size:var(--f-sm);font-style:italic;margin-bottom:var(--s5)} /* ---------- CARDS ---------- */ .grid{display:grid;gap:var(--s3)} .g2{grid-template-columns:1fr} .g3{grid-template-columns:1fr} .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:var(--s4);box-shadow:var(--shadow);transition:box-shadow .18s ease,transform .18s ease} .card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)} .card h3{margin-top:0} .card p:last-child{margin-bottom:0} .card-link{text-decoration:none;color:inherit;display:block} .card-link h3{color:var(--brand-d)} /* ---------- FIGURES ---------- */ figure{margin:var(--s5) 0} figure img{border-radius:var(--r);box-shadow:var(--shadow)} figcaption{font-size:var(--f-sm);color:var(--muted);margin-top:var(--s2);font-style:italic} /* ---------- TABLES ---------- */ .tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:var(--s4) 0; border:1px solid var(--line);border-radius:var(--r);background:var(--surface)} table{width:100%;border-collapse:collapse;font-size:var(--f-sm);min-width:min(100%,540px)} th,td{padding:.85rem 1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)} th{background:var(--brand-l);color:var(--brand-d);font-family:var(--disp); font-weight:700;font-size:var(--f-sm);white-space:nowrap} tbody tr:last-child td{border-bottom:0} tbody tr:hover td{background:var(--ground)} td strong{color:var(--ink)} /* ---------- FAQ ---------- */ details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r); margin-bottom:var(--s2);overflow:hidden} details[open]{box-shadow:var(--shadow)} summary{padding:var(--s3) var(--s4);cursor:pointer;font-family:var(--disp); font-weight:700;font-size:var(--f-base);list-style:none;position:relative; padding-right:3rem;min-height:52px;display:flex;align-items:center} summary::-webkit-details-marker{display:none} summary::after{content:"";position:absolute;right:var(--s4);top:50%; width:9px;height:9px;border-right:2.5px solid var(--brand);border-bottom:2.5px solid var(--brand); transform:translateY(-70%) rotate(45deg);transition:transform .2s ease} details[open] summary::after{transform:translateY(-30%) rotate(225deg)} details p{padding:0 var(--s4) var(--s3);margin:0;color:var(--ink-soft)} /* ---------- QUOTE FORM ---------- */ .quote{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); padding:var(--s5) var(--s4);box-shadow:var(--shadow-lg);margin:var(--s6) 0} .quote h2{margin-top:0} .field{margin-bottom:var(--s3)} .field label{display:block;font-weight:600;font-size:var(--f-sm);margin-bottom:.3rem; color:var(--ink-soft)} .field input,.field select,.field textarea{width:100%;padding:.85rem .95rem; border:1.5px solid var(--line);border-radius:var(--r-sm);font-family:inherit; font-size:16px;min-height:50px;background:var(--ground);color:var(--ink)} .field input:focus,.field select:focus{background:var(--surface);border-color:var(--brand)} .quote .btn{width:100%} /* ---------- E-E-A-T ---------- */ .eeat{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent); border-radius:0 var(--r) var(--r) 0;padding:var(--s4);margin:var(--s6) 0;font-size:var(--f-sm)} .eeat p:last-child{margin-bottom:0} /* ---------- AREA LINKS ---------- */ .areas{display:flex;flex-wrap:wrap;gap:var(--s2);max-width:none;margin-bottom:var(--s4)} .areas a{display:inline-flex;align-items:center;min-height:44px;padding:.55rem 1rem; background:var(--surface);border:1px solid var(--line);border-radius:99px; text-decoration:none;font-size:var(--f-sm);font-weight:600;color:var(--ink-soft)} .areas a:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-l)} /* ---------- CTA BAND ---------- */ .band{background:var(--brand-d);color:#fff;padding-block:var(--s6)} .band h2{color:#fff;margin-top:0} .band p{color:rgba(255,255,255,.85)} /* ---------- FOOTER ---------- */ .site-foot{background:var(--deep);color:rgba(255,255,255,.62); padding-block:var(--s5) calc(var(--s5) + 68px);font-size:var(--f-sm)} .site-foot a{color:rgba(255,255,255,.86);text-decoration:none} .site-foot a:hover{color:#fff;text-decoration:underline} .foot-grid{display:grid;gap:var(--s4);margin-bottom:var(--s4)} .foot-grid p.h{font-family:var(--disp);font-weight:700;color:#fff;font-size:var(--f-sm); letter-spacing:.07em;text-transform:uppercase;margin-bottom:var(--s2)} .foot-grid ul{margin:0} .foot-grid li{padding-left:0;margin-bottom:.45rem} .foot-grid li::before{display:none} .foot-bot{border-top:1px solid rgba(255,255,255,.13);padding-top:var(--s3); font-size:var(--f-xs);color:rgba(255,255,255,.46)} /* ---------- MOBILE STICKY CALL BAR — the biggest conversion win ---------- */ .callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex; border-top:1px solid rgba(255,255,255,.16); padding-bottom:env(safe-area-inset-bottom);background:var(--brand-d)} .callbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:.45rem; min-height:60px;color:#fff;text-decoration:none;font-family:var(--disp); font-weight:700;font-size:1rem} .callbar a.alt{background:var(--accent)} .callbar svg{width:18px;height:18px;flex:none} .crumb{font-family:var(--mono);font-size:var(--f-xs);color:var(--muted); padding-block:var(--s3);margin:0} .crumb a{color:var(--muted)} /* ---------- RESPONSIVE ---------- */ @media (min-width:640px){ .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(2,1fr)} .foot-grid{grid-template-columns:repeat(2,1fr)} } @media (min-width:900px){ .g3{grid-template-columns:repeat(3,1fr)} .foot-grid{grid-template-columns:2fr 1fr 1fr} .nav{display:flex} .callbar{display:none} /* desktop has the header CTA */ .site-foot{padding-bottom:var(--s5)} .hero{padding-block:var(--s7) var(--s8)} .sec{padding-block:var(--s7)} } @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important} } @media print{ .site-head,.callbar,.band,.quote{display:none} body{background:#fff;color:#000} }