/* 'Plus Jakarta Sans' (body) and 'Quicksand' (display — logo wordmark and hero headline) are loaded via the Google Fonts stylesheet link in the base layout (fonts.googleapis.com/css2), not hardcoded @font-face blocks here — the per-file hashes Google serves change over time, so linking their CSS API is the stable approach. */ *{box-sizing:border-box;margin:0;padding:0} /* The header is sticky and 120-144px tall depending on the fluid logo, so a fragment jump (#policies, #wash-fold, #contact…) would land the target underneath it. Offset every anchor destination by the header's own height. */ html{scroll-behavior:smooth} :target{scroll-margin-top:150px} body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:#063a52;background:#fff;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} a:hover{color:#0078ad} img{display:block;max-width:100%} /* ========================================================== UTILITIES ========================================================== */ .ld-cover-img{width:100%;height:100%;object-fit:cover} .ld-contain-img{width:100%;height:100%;object-fit:contain} .ld-wrap{max-width:1200px;margin:0 auto;padding:0 32px} .ld-sec{max-width:1200px;margin:0 auto;padding:88px 32px} .ld-h2{font-size:40px;line-height:1.12;font-weight:600;letter-spacing:-0.5px} .ld-h2--white{line-height:1.1;color:#fff} .ld-head{display:flex;justify-content:space-between;align-items:flex-end} .ld-head-right{display:flex;align-items:flex-end} .ld-head-desc{font-size:13px;line-height:1.6;color:#758c97;max-width:280px;text-align:right} .ld-head-cta{background:#063a52;color:#fff;padding:13px 24px;border-radius:100px;font-weight:600;font-size:13px;white-space:nowrap} .ld-page{width:100%;overflow-x:hidden;background:#fff} /* Marks copy the source document left unfilled ("[Phone Number]" etc.). Deliberately visible — these are meant to be noticed and replaced, not to blend in and ship as-is. Delete the class once the value is real. */ .ld-todo{font-style:italic;opacity:.75} /* Page header band for the interior pages (/about/, /services/). */ .ld-pagehead{background:#f3f9fc;padding:56px 0 64px} .ld-pagehead-eyebrow{font-size:11px;letter-spacing:2px;color:#0078ad;font-weight:700;margin-bottom:16px} .ld-pagehead-h1{font-family:"Quicksand",sans-serif;font-size:52px;line-height:1.08;font-weight:600;letter-spacing:-1px;color:#063a52;max-width:820px} .ld-pagehead-quote{margin-top:18px;font-family:"Quicksand",sans-serif;font-size:19px;font-weight:600;color:#0078ad;max-width:680px} .ld-pagehead-desc{margin-top:16px;font-size:15px;line-height:1.7;color:#66747a;max-width:680px} /* ========================================================== INTERACTION Shared focus and hover feedback so every clickable surface across sections responds consistently, instead of each partial inventing its own (or no) affordance. ========================================================== */ a,button{cursor:pointer} a:focus-visible, button:focus-visible, /* input:focus-visible{outline:2px solid #0078ad;outline-offset:2px;border-radius:4px} */ .ld-nav-cta,.ld-hero-btn,.ld-about-explore,.ld-how-cta, .ld-head-cta,.ld-cta-btn,.ld-nav-toggle,.ld-mobile-menu-close{ transition:transform .18s ease,box-shadow .18s ease,filter .18s ease } .ld-nav-cta:hover,.ld-hero-btn:hover,.ld-about-explore:hover,.ld-how-cta:hover, .ld-head-cta:hover,.ld-cta-btn:hover{transform:translateY(-2px);filter:brightness(1.06); color: #fff} .ld-nav-toggle:hover,.ld-mobile-menu-close:hover{filter:brightness(1.15)} .ld-svc-card{transition:transform .18s ease,box-shadow .18s ease} .ld-svc-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(16,31,77,.12)} .ld-svc-link,.ld-foot-link,.ld-hero-link{transition:color .18s ease,opacity .18s ease,border-color .18s ease} .ld-svc-link:hover{color:#063a52} .ld-foot-link:hover{color:#bbdbf2} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} a,button,.ld-svc-card,.ld-svcd{transition:none!important} .ld-nav-cta:hover,.ld-hero-btn:hover,.ld-about-explore:hover,.ld-how-cta:hover, .ld-head-cta:hover,.ld-cta-btn:hover,.ld-svc-card:hover{transform:none} } /* ========================================================== RESPONSIVE Additive only: every rule lives inside a media query, so above 1160px the desktop design renders byte-identically. Now that markup uses classes instead of inline styles, the cascade alone lets these overrides win (same specificity, later in the file) — no needed. Only shared utility classes (.ld-h2, .ld-head*, .ld-wrap, .ld-sec) remain here — every component's own responsive rules live alongside its base rules in its own CSS file. Stops: 900 / 620 ========================================================== */ @media (max-width:900px){ .ld-h2{font-size:32px} .ld-head{flex-direction:column;align-items:flex-start;gap:20px} .ld-head-desc{text-align:left} .ld-head-right{flex-direction:column;align-items:flex-start;gap:18px} .ld-pagehead-h1{font-size:40px;letter-spacing:-.6px} .ld-pagehead-quote{font-size:17px} } @media (max-width:620px){ /* One page gutter, arbitrated across every band: 20px. */ .ld-wrap{padding-left:20px;padding-right:20px} .ld-sec{padding:64px 20px} .ld-h2{font-size:29px} .ld-pagehead{padding:40px 0 48px} .ld-pagehead-h1{font-size:32px} .ld-pagehead-quote{font-size:16px} /* Header shrinks to ~120px once the logo hits its clamp floor. */ :target{scroll-margin-top:130px} }