:root { --ink:#11202a; --ink-2:#1c303a; --canvas:#f8f6f1; --paper:#fffefa; --stone:#e9e6df; --mist:#dce6e1; --sage:#aabcae; --accent:#d8f05a; --accent-ink:#173027; --white:#fff; --muted:#627078; --line:rgba(17,32,42,.15); --serif:Georgia,'Times New Roman',serif; --sans:Arial,Helvetica,sans-serif; --mono:'Courier New',monospace; --container:1200px; --narrow:820px; --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2rem; --space-5:3rem; --space-6:5rem; --radius-sm:4px; --radius:12px; --radius-lg:22px; --shadow:0 18px 55px rgba(17,32,42,.12); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--canvas); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.65; } body:has(.mobile-nav:not([hidden])) { overflow:hidden; } a { color:inherit; text-decoration:none; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline:3px solid var(--accent); outline-offset:3px; } button,input,select,textarea { font:inherit; } .container { width:min(calc(100% - 2.5rem),var(--container)); margin-inline:auto; } .narrow { width:min(calc(100% - 2.5rem),var(--narrow)); } .sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .skip-link { position:fixed; z-index:100; left:1rem; top:-5rem; background:var(--accent); color:var(--ink); padding:.6rem 1rem; font-weight:800; } .skip-link:focus { top:1rem; }
h1,h2,h3,p { margin-top:0; } h1,h2 { letter-spacing:-.055em; line-height:1.04; } h1 { font-size:clamp(3.1rem,9vw,7rem); margin-bottom:1.35rem; font-weight:700; } h1 em,h2 em { font-family:var(--serif); font-weight:600; } h2 { font-size:clamp(2.25rem,5vw,4.35rem); margin-bottom:1.2rem; max-width:15ch; } h3 { letter-spacing:-.035em; font-size:1.35rem; line-height:1.2; margin-bottom:.7rem; } .eyebrow { text-transform:uppercase; letter-spacing:.12em; font:500 .68rem/1.3 var(--mono); color:var(--muted); margin-bottom:1.25rem; } .eyebrow span { display:inline-block; width:1.4rem; height:1px; background:currentColor; vertical-align:middle; margin:0 .5rem; } .section { padding:var(--space-6) 0; } .section-surface { background:var(--stone); } .section-heading { max-width:620px; margin-bottom:2.75rem; } .section-heading > p:last-child { color:var(--muted); max-width:52ch; } .centered { text-align:center; margin-inline:auto; } .centered h2 { margin-inline:auto; } .text-link { font-weight:800; display:inline-flex; gap:.55rem; align-items:center; border-bottom:1px solid currentColor; padding-bottom:.2rem; } .text-link span { transition:transform .2s ease; } .text-link:hover span { transform:translateX(4px); } .text-link.light { color:var(--white); } .button-row { display:flex; align-items:center; flex-wrap:wrap; gap:1.15rem; } .button { min-height:52px; display:inline-flex; align-items:center; justify-content:center; gap:1rem; padding:.75rem 1.2rem; border:1px solid transparent; font-weight:800; cursor:pointer; transition:transform .2s,background .2s; } .button:hover { transform:translateY(-2px); } .button-primary { background:var(--accent); color:var(--accent-ink); } .button-primary:hover { background:#e4fa69; } .button-dark { background:var(--ink); color:var(--white); } .button-small { min-height:42px; padding:.5rem .85rem; font-size:.78rem; }
.site-header { position:relative; z-index:20; background:var(--canvas); border-bottom:1px solid var(--line); } .header-inner { min-height:74px; display:flex; align-items:center; justify-content:space-between; gap:1rem; } .brand { display:inline-flex; align-items:center; gap:.62rem; line-height:1; flex-shrink:0; } .brand strong,.brand small { display:block; } .brand strong { font-size:.92rem; letter-spacing:-.04em; } .brand small { color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font:500 .5rem var(--mono); margin-top:.32rem; } .brand-mark { display:flex; gap:2px; transform:skew(-22deg); align-items:flex-end; height:23px; } .brand-mark i { display:block; background:var(--ink); width:5px; } .brand-mark i:nth-child(1){height:11px}.brand-mark i:nth-child(2){height:18px;background:var(--sage)}.brand-mark i:nth-child(3){height:23px;background:var(--accent)} .desktop-nav { display:none; align-items:center; gap:1.4rem; font-size:.73rem; font-weight:800; } .desktop-nav a { padding:.35rem 0; border-bottom:2px solid transparent; } .desktop-nav a:hover,.desktop-nav .active { border-color:var(--accent); } .header-actions { display:none; align-items:center; gap:1rem; } .phone-placeholder { font:500 .62rem var(--mono); color:var(--muted); } .phone-placeholder span { color:var(--ink); } .menu-toggle { width:42px; height:42px; background:transparent; border:1px solid var(--line); display:grid; place-content:center; gap:5px; cursor:pointer; } .menu-toggle i { display:block; width:16px; height:2px; background:var(--ink); transition:transform .2s; } .menu-toggle[aria-expanded="true"] i:first-of-type { transform:translateY(3.5px) rotate(45deg); } .menu-toggle[aria-expanded="true"] i:last-of-type { transform:translateY(-3.5px) rotate(-45deg); } .mobile-nav { position:absolute; top:100%; left:0; right:0; background:var(--canvas); padding:1.2rem; border-bottom:1px solid var(--line); box-shadow:var(--shadow); } .mobile-nav a:not(.button) { display:block; padding:.85rem .3rem; border-bottom:1px solid var(--line); font-weight:800; } .mobile-nav .button { width:100%; margin-top:1rem; }
.hero { position:relative; overflow:hidden; color:var(--white); background:var(--ink); } .hero-home { min-height:calc(100svh - 74px); display:flex; align-items:center; padding:4rem 0 7rem; } .hero-content { position:relative; z-index:2; } .hero-copy { max-width:50ch; font-size:1rem; color:#d8e0e0; margin-bottom:2rem; } .hero .eyebrow { color:#bdd2cb; } .hero-points { display:flex; flex-wrap:wrap; padding:0; margin:3rem 0 0; gap:.75rem 1.25rem; list-style:none; color:#d8e0e0; font-size:.73rem; } .hero-points li::before { content:'●'; color:var(--accent); font-size:.55rem; margin-right:.45rem; vertical-align:middle; } .hero-grid { position:absolute; inset:0; opacity:.12; background-image:linear-gradient(90deg,transparent 0,transparent 24.8%,#cbe6db 25%,transparent 25.2%,transparent 49.8%,#cbe6db 50%,transparent 50.2%,transparent 74.8%,#cbe6db 75%,transparent 75.2%),linear-gradient(0deg,transparent 0,transparent 24.8%,#cbe6db 25%,transparent 25.2%,transparent 49.8%,#cbe6db 50%,transparent 50.2%,transparent 74.8%,#cbe6db 75%,transparent 75.2%); background-size:100% 100%; } .hero-art { position:absolute; display:none; right:0; top:0; bottom:0; width:39%; background:linear-gradient(145deg,transparent 18%,rgba(216,240,90,.83) 18.3%,transparent 18.7%),linear-gradient(20deg,#788f88 0%,#304a51 45%,#152932 46%,#558179 100%); clip-path:polygon(23% 0,100% 0,100% 100%,0 100%); } .hero-art::before { content:''; position:absolute; inset:23% 0 0 30%; background:repeating-linear-gradient(130deg,rgba(255,255,255,.1) 0 1px,transparent 1px 19px); } .hero-art-label { position:absolute; bottom:2rem; right:2rem; left:35%; display:flex; justify-content:space-between; gap:1rem; font:500 .61rem var(--mono); text-transform:uppercase; letter-spacing:.1em; }
.intro-grid,.contact-grid,.proof-grid,.split-feature { display:grid; gap:2rem; } .intro-copy { color:var(--muted); font-size:1.05rem; } .intro-copy .text-link { color:var(--ink); margin-top:.4rem; } .service-grid { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; } .service-card { position:relative; min-height:215px; padding:1.1rem; background:var(--paper); display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; transition:transform .25s,background .25s; } .service-card:hover { transform:translateY(-4px); background:var(--mist); } .service-card.featured { grid-column:span 2; min-height:260px; color:var(--white); background:var(--ink); } .service-card.featured::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,transparent 48%,rgba(216,240,90,.65) 48.3%,transparent 48.7%),repeating-linear-gradient(140deg,transparent 0 17px,rgba(255,255,255,.05) 18px 19px); } .service-card h3,.service-card p,.service-card .card-arrow { position:relative; z-index:1; } .service-card h3 { font-size:1.25rem; max-width:10ch; margin:0; } .service-card p { color:var(--muted); font-size:.68rem; margin:.35rem 0 0; } .featured p { color:#d6e1dd; } .card-number { position:absolute; top:1rem; left:1.1rem; color:var(--muted); font:500 .65rem var(--mono); } .card-arrow { position:absolute; right:1rem; top:1rem; font-size:1.15rem; } .process { background:var(--mist); } .process-list { padding:0; margin:2.5rem 0 0; list-style:none; display:grid; gap:1.5rem; } .process-list li { border-top:1px solid var(--line); padding-top:1rem; } .process-list span,.benefit-card > span { font:500 .68rem var(--mono); color:var(--muted); } .process-list p,.benefit-card p { color:var(--muted); font-size:.9rem; margin:0; } .media-frame { margin:0; } .media-placeholder,.service-hero-art { background:linear-gradient(150deg,#45655f,#1b3b45 50%,#95a59b); position:relative; overflow:hidden; min-height:310px; display:grid; place-items:center; } .media-placeholder::after,.service-hero-art::after { content:''; position:absolute; inset:0; background:linear-gradient(36deg,transparent 42%,rgba(216,240,90,.85) 42.5%,transparent 43%),repeating-linear-gradient(125deg,rgba(255,255,255,.09) 0 1px,transparent 1px 24px); } .media-placeholder span { z-index:1; text-align:center; color:#fff; text-transform:uppercase; letter-spacing:.14em; font:500 .68rem/1.8 var(--mono); } figcaption { color:var(--muted); font:400 .66rem var(--mono); margin-top:.65rem; } .proof-section { background:var(--paper); } .proof-grid p:not(.eyebrow),.split-feature p:not(.eyebrow) { color:var(--muted); } .check-list { padding:0; margin:1.75rem 0 0; list-style:none; font-weight:700; font-size:.9rem; } .check-list li { padding:.65rem 0; border-top:1px solid var(--line); } .check-list li::before { content:'✓'; margin-right:.75rem; color:#45655f; } .quote-band { padding:4rem 0; background:var(--accent); color:var(--accent-ink); text-align:center; } .quote-band p { font:600 clamp(1.7rem,4vw,3.2rem)/1.2 var(--serif); max-width:19ch; margin:0 auto 1rem; } .quote-band span { font:500 .66rem var(--mono); text-transform:uppercase; letter-spacing:.11em; }
.contact-section { background:var(--ink); color:var(--white); } .contact-section .eyebrow,.contact-section p { color:#cedad7; } .contact-note { font:500 .7rem var(--mono); } .estimate-form { background:var(--paper); color:var(--ink); padding:1.25rem; box-shadow:var(--shadow); } .estimate-form label { display:block; margin-bottom:.35rem; font-size:.71rem; font-weight:800; } .estimate-form input,.estimate-form select,.estimate-form textarea { width:100%; background:var(--white); border:1px solid #c6cfcc; border-radius:0; padding:.8rem; margin-bottom:1rem; color:var(--ink); } .estimate-form textarea { resize:vertical; } .form-row { display:grid; gap:0 .8rem; } .form-footer { display:flex; align-items:center; flex-wrap:wrap; gap:.8rem; justify-content:space-between; } .form-footer small { color:var(--muted); font-size:.61rem; max-width:21ch; } .faq details { border-top:1px solid var(--line); } .faq details:last-child { border-bottom:1px solid var(--line); } .faq summary { cursor:pointer; padding:1.15rem 2rem 1.15rem 0; list-style:none; font-weight:800; position:relative; } .faq summary::-webkit-details-marker { display:none; } .faq summary span { position:absolute; right:.2rem; font-size:1.4rem; line-height:1; font-weight:400; } .faq details[open] summary span { transform:rotate(45deg); } .faq details p { color:var(--muted); max-width:60ch; padding-bottom:1rem; }
.site-footer { background:#0a151c; color:var(--white); padding:3.5rem 0 5.7rem; } .footer-top { display:grid; grid-template-columns:1fr 1fr; gap:2rem 1.25rem; } .footer-brand { color:var(--white); margin-bottom:1rem; } .footer-brand .brand-mark i:first-child { background:var(--white); } .site-footer h2 { color:#aabcb6; font:500 .61rem var(--mono); letter-spacing:.12em; text-transform:uppercase; margin:0 0 .9rem; } .site-footer p { color:#bdc9c7; font-size:.77rem; } .site-footer p span { color:#84918e; font-size:.7rem; } .site-footer div > a:not(.brand):not(.text-link):not(.footer-contact) { display:block; color:#dce4e2; font-size:.75rem; padding:.2rem 0; } .footer-contact { display:inline-flex; margin-top:.7rem; font:500 .64rem var(--mono); color:var(--accent); border-bottom:1px solid var(--accent); padding-bottom:.2rem; } .footer-bottom { border-top:1px solid rgba(255,255,255,.13); margin-top:2.5rem; padding-top:1.2rem; display:flex; justify-content:space-between; gap:1rem; color:#90a09d; font:400 .62rem var(--mono); } .footer-bottom a { color:#dce4e2; }.mobile-cta { position:fixed; bottom:0; left:0; right:0; z-index:25; display:grid; grid-template-columns:1fr 1.2fr; box-shadow:0 -5px 20px rgba(0,0,0,.16); } .mobile-cta a { min-height:58px; display:flex; align-items:center; justify-content:center; gap:.5rem; background:var(--accent); color:var(--accent-ink); font-size:.74rem; font-weight:800; } .mobile-cta .mobile-call { background:var(--white); color:var(--ink); }
.hero-service { padding:1rem 0 4rem; } .breadcrumbs { display:flex; gap:.55rem; color:#b7c7c2; font:400 .63rem var(--mono); margin-bottom:3.5rem; } .breadcrumbs a { color:var(--white); } .service-hero-grid { display:grid; gap:2.5rem; } .service-hero-art { min-height:260px; margin:0; } .benefit-grid { display:grid; gap:.8rem; } .benefit-card { background:var(--paper); padding:1.3rem; min-height:190px; } .benefit-card h3 { margin-top:3rem; } .split-feature { align-items:center; } .split-feature .button { margin-top:1.2rem; }
@media (min-width:640px) { .form-row { grid-template-columns:1fr 1fr; } .service-grid { grid-template-columns:repeat(4,1fr); } .service-card.featured { grid-column:span 2; } .service-card { min-height:270px; } .service-card.featured { min-height:270px; } .process-list { grid-template-columns:repeat(3,1fr); gap:2rem; } .footer-top { grid-template-columns:1.7fr 1fr 1fr; } .footer-top > div:first-child { grid-row:span 2; } .benefit-grid { grid-template-columns:repeat(3,1fr); } }
@media (min-width:900px) { .section { padding:7rem 0; } .desktop-nav,.header-actions { display:flex; } .menu-toggle { display:none; } .hero-home { min-height:660px; padding:7.5rem 0; } .hero-content { width:63%; margin-left:4vw; } .hero-art { display:block; } .intro-grid { grid-template-columns:1fr 1fr; gap:9rem; } .intro-copy { padding-top:2rem; } .proof-grid,.split-feature { grid-template-columns:1.02fr .98fr; gap:7rem; } .media-placeholder { min-height:475px; } .contact-grid { grid-template-columns:.78fr 1.22fr; gap:6rem; } .estimate-form { padding:2rem; } .site-footer { padding-bottom:3rem; } .footer-top { grid-template-columns:1.55fr 1fr 1fr 1.1fr; } .footer-top > div:first-child { grid-row:auto; } .mobile-cta { display:none; } .hero-service { padding:1rem 0 6rem; } .service-hero-grid { grid-template-columns:1fr .8fr; align-items:end; } .service-hero-art { min-height:440px; } }
.content-section { padding:clamp(3rem,7vw,6rem) 0; } .content-section:nth-child(even) { background:var(--stone); } .content-section .narrow { max-width:850px; } .content-section h2 { max-width:22ch; } .content-section p,.content-section li { line-height:1.78; } .content-section ul,.content-section ol { padding-left:1.3rem; } .inline-cta { margin:2.2rem 0; padding:1.6rem; border-left:6px solid var(--accent); background:var(--paper); box-shadow:var(--shadow); } .inline-cta h2,.inline-cta h3 { margin-top:0; } .cta-actions { display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; } .related-services { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1rem; } .related-services a { display:block; padding:1rem; border:1px solid var(--line); background:var(--paper); font-weight:800; } .footer-map { width:100%; min-height:220px; border:0; } .form-status[role="status"] { color:#b8f58a; font-weight:800; } button:disabled { opacity:.65; cursor:wait; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }