:root { --ink:#102326; --muted:#5a676b; --teal:#0f8b8d; --teal-dark:#075f66; --coral:#e85d4a; --gold:#f2bc57; --mint:#e7f6f1; --sky:#eaf3fb; --line:#d8e4e2; font-family: Arial, Helvetica, sans-serif; color: var(--ink); background:#fff; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:#fff; color:var(--ink); line-height:1.55; } img { max-width:100%; display:block; } a { color:inherit; }
.site-header { position:fixed; z-index:30; top:18px; left:0; right:0; display:flex; justify-content:center; padding:0 16px; pointer-events:none; }
.nav-pill { pointer-events:auto; display:inline-flex; align-items:center; gap:28px; width:fit-content; max-width:calc(100vw - 32px); margin:0 auto; padding:10px 12px 10px 18px; border:1px solid rgba(255,255,255,.72); background:rgba(255,255,255,.9); backdrop-filter:blur(18px); box-shadow:0 16px 60px rgba(16,35,38,.16); border-radius:999px; }
.brand { display:inline-flex; align-items:center; text-decoration:none; font-weight:900; white-space:nowrap; } .brand img { width:180px; height:auto; } .nav-links { display:flex; align-items:center; gap:22px; margin:0; } .nav-links a { text-decoration:none; font-size:14px; font-weight:900; color:var(--ink); } .nav-links .quote-link { background:var(--ink); color:#fff; padding:11px 16px; border-radius:999px; }
.mobile-menu-toggle { display:inline-flex; width:42px; height:42px; border:0; border-radius:50%; background:var(--ink); color:#fff; align-items:center; justify-content:center; position:relative; } .mobile-menu-toggle span,.mobile-menu-toggle:before,.mobile-menu-toggle:after { content:""; width:18px; height:2px; background:currentColor; position:absolute; } .mobile-menu-toggle:before { transform:translateY(-6px); } .mobile-menu-toggle:after { transform:translateY(6px); }
.mobile-panel { position:fixed; inset:0; background:rgba(16,35,38,.96); color:#fff; z-index:29; display:none; padding:96px 24px 24px; } .mobile-panel.is-open { display:block; } .mobile-panel a { display:block; padding:15px 0; color:#fff; text-decoration:none; font-size:24px; font-weight:900; border-bottom:1px solid rgba(255,255,255,.16); }
.hero { min-height:clamp(560px,82vh,780px); position:relative; display:grid; align-items:end; overflow:hidden; color:#fff; background:var(--ink); } .hero picture,.hero-media { position:absolute; inset:0; width:100%; height:100%; } .hero-media { object-fit:cover; } .hero:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,22,24,.86),rgba(5,22,24,.56) 48%,rgba(5,22,24,.12)),linear-gradient(0deg,rgba(5,22,24,.82),transparent 44%); }
.hero-inner { position:relative; z-index:1; width:min(1160px,calc(100% - 40px)); margin:0 auto; padding:140px 0 56px; } .eyebrow { display:inline-flex; align-items:center; gap:9px; font-weight:900; font-size:13px; text-transform:uppercase; color:#bffffc; letter-spacing:.08em; margin-bottom:16px; } .eyebrow:before { content:""; width:28px; height:3px; background:var(--gold); }
h1 { font-size:clamp(42px,7vw,88px); line-height:.96; margin:0; max-width:900px; letter-spacing:0; } h2 { font-size:clamp(32px,4.1vw,56px); line-height:1.04; letter-spacing:0; margin:0; } h3 { line-height:1.16; } .hero-copy { max-width:690px; font-size:clamp(18px,2.1vw,23px); margin:22px 0 0; color:#edf9f7; }
.hero-actions,.actions { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:28px; } .btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:46px; padding:12px 18px; border-radius:999px; text-decoration:none; font-weight:900; border:1px solid transparent; } .btn-primary { background:var(--coral); color:#fff; } .btn-secondary { background:#fff; color:var(--ink); } .btn-outline { background:transparent; border-color:var(--line); color:var(--ink); }
.hero-proof { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; max-width:780px; margin-top:36px; } .proof-item { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24); padding:16px; border-radius:8px; backdrop-filter:blur(12px); } .proof-item strong { display:block; font-size:24px; line-height:1.1; } .proof-item span { color:#d8efeb; font-size:13px; }
main section { padding:76px 0; } .band-mint { background:var(--mint); } .band-sky { background:var(--sky); } .wrap { width:min(1160px,calc(100% - 40px)); margin:0 auto; } .section-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,430px); gap:34px; align-items:end; margin-bottom:34px; } .section-head p,.page-title p { margin:0; color:var(--muted); font-size:18px; }
.service-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; } .service-card { background:#fff; border:1px solid var(--line); border-radius:8px; overflow:hidden; display:flex; flex-direction:column; min-height:100%; } .service-card img { aspect-ratio:1.45/1; object-fit:cover; width:100%; } .service-card .pad { padding:18px; display:flex; flex-direction:column; gap:10px; flex:1; } .service-card h3 { font-size:20px; margin:0; } .service-card p { margin:0; color:var(--muted); } .service-card a { margin-top:auto; font-weight:900; color:var(--teal-dark); text-decoration:none; }
.split { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr); gap:44px; align-items:center; } .panel { background:#fff; border:1px solid var(--line); border-radius:8px; padding:28px; } .detail-list { margin:0; padding-left:20px; color:var(--muted); }
.process-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; counter-reset:step; } .process-item { counter-increment:step; background:#fff; border:1px solid var(--line); border-radius:8px; padding:18px; } .process-item:before { content:counter(step,decimal-leading-zero); display:inline-flex; width:38px; height:38px; align-items:center; justify-content:center; background:var(--teal); color:#fff; border-radius:50%; font-weight:900; margin-bottom:18px; } .process-item h3 { margin:0 0 7px; font-size:18px; } .process-item p { margin:0; color:var(--muted); font-size:14px; }
.reviews { display:grid; gap:18px; justify-items:center; text-align:center; } .gr-summary { width:min(760px,100%); background:#fff; border:1px solid var(--line); border-radius:8px; padding:28px; box-shadow:0 14px 40px rgba(16,35,38,.08); } .google-g { width:42px; height:42px; margin:0 auto 12px; } .stars { color:#f6b500; font-size:25px; letter-spacing:2px; } .rating-line { font-size:48px; font-weight:900; line-height:1; }
.areas { display:flex; flex-wrap:wrap; gap:10px; } .areas span { background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 13px; font-weight:900; font-size:14px; } .faq-list { display:grid; gap:10px; max-width:900px; } details { background:#fff; border:1px solid var(--line); border-radius:8px; padding:18px 20px; } summary { cursor:pointer; font-weight:900; } details p { color:var(--muted); margin-bottom:0; }
.contact-grid { display:grid; grid-template-columns:minmax(0,.95fr) minmax(320px,1.05fr); gap:24px; align-items:start; } .contact-form { display:grid; gap:12px; } .field { display:grid; gap:6px; } label { font-weight:900; font-size:14px; } input,textarea,select { width:100%; border:1px solid #cbd8d6; border-radius:8px; padding:12px 13px; font:inherit; background:#fff; color:var(--ink); } textarea { min-height:126px; resize:vertical; } button.btn { cursor:pointer; font:inherit; }
.page-hero { padding:150px 0 64px; background:linear-gradient(135deg,var(--mint),#fff 56%,#fff4e3); } .page-title { width:min(980px,calc(100% - 40px)); margin:0 auto; } .breadcrumbs { display:flex; gap:7px; flex-wrap:wrap; font-size:13px; font-weight:900; color:var(--teal-dark); margin-bottom:16px; } .breadcrumbs a { text-decoration:none; } .content-grid { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:28px; align-items:start; } .aside-list { display:grid; gap:8px; } .aside-list a { display:block; padding:10px 12px; background:#fff; border:1px solid var(--line); border-radius:8px; text-decoration:none; font-weight:900; }
.site-footer { background:var(--ink); color:#d8e5e3; padding:54px 0 96px; } .footer-grid { display:grid; grid-template-columns:1.3fr repeat(3,minmax(0,.7fr)); gap:28px; } .site-footer a { color:#fff; text-decoration:none; } .footer-credit { display:block; margin-top:22px; color:#aec2be; } .mobile-sticky-cta { position:fixed; left:0; right:0; bottom:0; z-index:40; display:none; grid-template-columns:1fr 1fr; } .mobile-sticky-cta a { min-height:56px; display:flex; align-items:center; justify-content:center; color:#fff; text-decoration:none; font-weight:900; } .mobile-sticky-cta a:first-child { background:var(--teal); } .mobile-sticky-cta a:last-child { background:#0a0a0a; }
@media (min-width:1024px) { .mobile-menu-toggle { display:none !important; } }
@media (max-width:1023px) { .nav-links { display:none; } .nav-pill { width:calc(100vw - 28px); justify-content:space-between; } .brand img { width:min(166px,55vw); } .hero-proof,.service-grid,.process-grid,.footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .section-head,.split,.contact-grid,.content-grid { grid-template-columns:1fr; } .mobile-sticky-cta { display:grid; } }
@media (max-width:620px) { .hero { min-height:82vh; } .hero-inner { width:min(100% - 28px,1160px); padding-bottom:44px; } h1 { font-size:clamp(41px,14vw,62px); } .hero-proof,.service-grid,.process-grid,.footer-grid { grid-template-columns:1fr; } main section { padding:56px 0; } .wrap,.page-title { width:min(100% - 28px,1160px); } .btn { width:100%; } .hero-actions .btn { width:auto; } }