:root { --ink:#1f2933; --muted:#5f6b73; --accent:#0f766e; --accent-2:#c65f2c; --soft:#eef8f6; --line:#dce7e3; --paper:#ffffff; --dark:#111827; --shadow:0 18px 48px rgba(24, 41, 45, .16); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); background:#fff; line-height:1.55; }
a { color:inherit; text-decoration:none; } img { max-width:100%; display:block; } .container { width:min(1160px, calc(100% - 40px)); margin:0 auto; } .skip-link { position:absolute; left:-999px; top:10px; background:#fff; padding:10px 14px; z-index:50; } .skip-link:focus { left:10px; }
.site-header { position:fixed; inset:18px 0 auto; z-index:20; pointer-events:none; } .nav-wrap { display:flex; justify-content:center; width:100%; } .nav-pill { pointer-events:auto; display:inline-flex; align-items:center; gap:26px; width:fit-content; max-width:calc(100vw - 28px); min-height:66px; padding:9px 12px; border:1px solid rgba(255,255,255,.72); background:rgba(255,255,255,.82); backdrop-filter:blur(18px); border-radius:999px; box-shadow:0 12px 34px rgba(20,43,49,.15); } .brand { display:flex; align-items:center; gap:10px; min-width:0; } .brand-mark { width:44px; height:44px; flex:0 0 44px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:#fff; font-weight:900; letter-spacing:0; } .brand strong { display:block; font-size:15px; line-height:1.1; white-space:nowrap; } .brand small { display:block; color:var(--muted); font-size:12px; line-height:1.2; } .nav-links { display:flex; align-items:center; gap:20px; margin:0; } .nav-links a { font-size:14px; color:#2d3b40; } .nav-cta { background:var(--dark); color:#fff; padding:12px 18px; border-radius:999px; font-weight:800; font-size:14px; box-shadow:0 8px 18px rgba(0,0,0,.14); } .mobile-menu-toggle { display:none; width:44px; height:44px; border:0; border-radius:50%; background:var(--accent); padding:11px; } .mobile-menu-toggle span { display:block; height:2px; background:#fff; margin:5px 0; } .mobile-panel { pointer-events:auto; width:min(360px, calc(100% - 32px)); margin:10px auto 0; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); padding:12px; } .mobile-panel a { display:block; padding:12px 14px; border-radius:6px; } .mobile-panel a:hover { background:var(--soft); }
.hero { position:relative; min-height:86svh; display:grid; align-items:end; overflow:hidden; padding:148px 0 72px; } .hero-media { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .hero-scrim { position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.74) 43%, rgba(255,255,255,.08) 78%); } .hero-content { position:relative; max-width:690px; margin-left:calc((100% - min(1160px, calc(100% - 40px)))/2); padding-right:24px; } .eyebrow { margin:0 0 12px; text-transform:uppercase; font-size:12px; font-weight:900; letter-spacing:.12em; color:var(--accent); } h1,h2,h3,p { overflow-wrap:anywhere; } h1 { margin:0; font-size:clamp(42px, 7vw, 86px); line-height:.93; letter-spacing:0; max-width:780px; } h2 { margin:0; font-size:clamp(30px, 4vw, 54px); line-height:1; letter-spacing:0; } h3 { margin:0; font-size:23px; line-height:1.12; } p { color:var(--muted); font-size:17px; } .hero p:not(.eyebrow) { max-width:590px; font-size:20px; color:#304047; } .hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; } .button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:12px 18px; border-radius:999px; font-weight:900; border:1px solid transparent; transition:transform .2s ease, box-shadow .2s ease; } .button:hover { transform:translateY(-1px); } .button.primary { background:var(--accent); color:#fff; box-shadow:0 12px 24px rgba(15,118,110,.24); } .button.ghost { background:rgba(255,255,255,.76); border-color:rgba(15,118,110,.3); color:var(--ink); } .button.ghost.solid { background:#fff; } .button.dark { background:#111827; color:#fff; } .button.light { background:#fff; color:var(--dark); } .hero-proof { display:flex; flex-wrap:wrap; gap:10px; margin-top:32px; } .hero-proof span { min-width:130px; padding:12px 14px; border:1px solid rgba(15,118,110,.18); background:rgba(255,255,255,.82); border-radius:8px; color:#405159; font-size:13px; } .hero-proof strong { display:block; color:var(--dark); font-size:22px; line-height:1; }
.intro-overlap { margin-top:-38px; position:relative; z-index:3; } .overlap-grid { display:grid; grid-template-columns:minmax(280px, 420px) 1fr; gap:34px; align-items:stretch; } .quote-card { background:#fff; border:1px solid var(--line); border-radius:8px; padding:28px; box-shadow:var(--shadow); } .quote-card h2 { font-size:32px; } .chip-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:22px 0; } .chip-grid span { background:var(--soft); padding:10px; border-radius:6px; font-size:13px; font-weight:800; } .why-copy { padding:34px 0 0; } .section { padding:86px 0; } .section-head { display:flex; justify-content:space-between; gap:28px; align-items:end; margin-bottom:34px; } .section-head > p { max-width:410px; } .section-head.compact { display:block; } .service-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; } .service-card { border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#fff; transition:transform .2s ease, box-shadow .2s ease; } .service-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); } .service-card img { width:100%; aspect-ratio:4/3; object-fit:cover; } .service-card-body { padding:22px; } .service-card-body span { color:var(--accent); text-transform:uppercase; letter-spacing:.12em; font-size:11px; font-weight:900; } .service-card-body strong { color:var(--accent); } .proof-band { background:#f6faf9; } .proof-layout { display:grid; grid-template-columns:1fr minmax(320px, 520px); gap:36px; align-items:center; } .gr-summary { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:26px; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); } .gr-sum-left { display:flex; gap:16px; align-items:center; } .gr-logo { width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:#fff; border:1px solid #e5e7eb; color:#4285f4; font-size:28px; font-weight:900; } .gr-meta-top { display:flex; align-items:center; gap:12px; } .gr-score { font-size:42px; font-weight:900; color:var(--dark); line-height:1; } .gr-stars { color:#f6b51d; letter-spacing:0; } .gr-summary p { margin:6px 0 0; } .gr-cta { white-space:nowrap; background:var(--dark); color:#fff; border-radius:999px; padding:12px 16px; font-weight:900; } .areas-section { background:#fff; } .area-panel { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center; padding:30px; border:1px solid var(--line); border-radius:8px; background:#fff; box-shadow:0 16px 44px rgba(28,45,48,.08); } .area-panel img { border-radius:8px; border:1px solid var(--line); } .contact-section { background:linear-gradient(180deg,#fff 0%,#f4faf8 100%); } .contact-grid { display:grid; grid-template-columns:1fr minmax(320px, 480px); gap:42px; align-items:start; } .lead-form { display:grid; gap:14px; background:#fff; border:1px solid var(--line); border-radius:8px; padding:24px; box-shadow:var(--shadow); } label span { display:block; font-weight:900; font-size:13px; margin-bottom:6px; } input, textarea, select { width:100%; border:1px solid #cfdad6; border-radius:6px; min-height:46px; padding:11px 12px; font:inherit; } textarea { resize:vertical; } .page-hero { padding:168px 0 74px; background:linear-gradient(135deg,#eff8f6,#fff 48%,#f8eee8); border-bottom:1px solid var(--line); } .page-hero h1 { max-width:930px; } .page-hero p:not(.eyebrow) { max-width:720px; font-size:19px; } .two-col, .about-grid, .service-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center; } .feature-card { border:1px solid var(--line); border-radius:8px; padding:24px; background:#fff; } .feature-card img { border-radius:8px; margin-bottom:20px; } .feature-card.muted { background:var(--soft); } .check-list { padding-left:20px; color:var(--muted); } .check-list li { margin:8px 0; } .faq-strip details { border:1px solid var(--line); border-radius:8px; padding:0; background:#fff; margin:10px 0; } .faq-strip summary { cursor:pointer; font-weight:900; padding:18px; } .faq-strip details p { padding:0 18px 18px; margin:0; } .phone-link { display:inline-block; font-size:34px; font-weight:900; color:var(--accent); margin:10px 0 22px; } .site-map-list { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; padding:0; list-style:none; } .site-map-list a { display:block; padding:14px; border:1px solid var(--line); border-radius:8px; } .site-footer { background:#0f1f22; color:#fff; } .footer-cta { background:var(--accent); } .footer-cta-grid { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:34px 0; } .footer-cta h2 { font-size:34px; } .footer-cta .eyebrow, .footer-cta p { color:#e9fffb; } .footer-body { padding:54px 0 30px; } .footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1.1fr; gap:30px; } .footer-grid h3 { font-size:16px; margin-bottom:12px; } .footer-grid a, .footer-grid span, .footer-grid p { display:block; color:#c8d6d4; margin:8px 0; font-size:14px; } .footer-brand { display:flex; align-items:center; gap:10px; margin-bottom:12px; color:#fff !important; } .footer-credit a { display:inline; color:#fff; text-decoration:underline; } .footer-bottom { border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; gap:20px; padding-top:22px; color:#c8d6d4; font-size:13px; } .mobile-sticky { display:none; }
@media (min-width:1024px) { .mobile-menu-toggle { display:none !important; } }
@media (max-width:980px) { .site-header { inset:12px 0 auto; } .nav-pill { width:calc(100vw - 24px); justify-content:space-between; border-radius:8px; } .nav-links, .nav-cta { display:none; } .mobile-menu-toggle { display:block; } .brand strong { max-width:190px; overflow:hidden; text-overflow:ellipsis; } .hero { min-height:86svh; padding:122px 0 74px; } .hero-scrim { background:linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.82) 52%, rgba(255,255,255,.44) 100%); } .hero-content { margin:0 auto; width:min(100% - 40px, 760px); } h1 { font-size:42px; line-height:.98; } .hero p:not(.eyebrow) { font-size:17px; } .overlap-grid, .service-grid, .proof-layout, .area-panel, .contact-grid, .two-col, .about-grid, .service-detail-grid, .footer-grid { grid-template-columns:1fr; } .section-head { display:block; } .footer-cta-grid, .footer-bottom { display:block; } .mobile-sticky { position:fixed; left:0; right:0; bottom:0; z-index:40; display:grid; grid-template-columns:1fr 1fr; box-shadow:0 -10px 24px rgba(0,0,0,.18); } .mobile-sticky a { min-height:56px; display:grid; place-items:center; color:#fff; font-weight:900; } .mobile-sticky a:first-child { background:var(--accent); } .mobile-sticky a:last-child { background:#0a0a0a; } body { padding-bottom:56px; } .gr-summary { display:block; } .gr-cta { display:inline-flex; margin-top:16px; } .site-map-list { grid-template-columns:1fr; } }
@media (max-width:520px) { .container { width:calc(100% - 28px); } .brand small { display:none; } .brand strong { font-size:13px; max-width:168px; } .hero { padding-top:106px; } .hero-actions .button { width:100%; } .chip-grid { grid-template-columns:1fr; } .quote-card, .lead-form, .area-panel { padding:18px; } .phone-link { font-size:28px; } }