:root { --ink:#182225; --muted:#607074; --paper:#f7f6f1; --sand:#e7dfcf; --accent:#c75a36; --line:#d7d5cd; --dark:#142529; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans",sans-serif; line-height:1.5; } a { color:inherit; text-decoration:none; }
.site-header { min-height:82px; display:flex; align-items:center; justify-content:space-between; max-width:1200px; margin:auto; padding:0 28px; } .brand { font-weight:700; letter-spacing:-.05em; font-size:1.35rem; } .brand span { color:var(--accent); } .main-nav { display:flex; align-items:center; gap:28px; font-size:.91rem; font-weight:600; } .main-nav a:not(.nav-cta):hover { color:var(--accent); } .nav-cta,.button { border-radius:99px; padding:12px 18px; display:inline-flex; align-items:center; justify-content:center; gap:9px; font-weight:700; } .nav-cta { background:var(--ink); color:white; } .menu-toggle { display:none; }
.hero { max-width:1200px; min-height:620px; margin:auto; padding:78px 28px 72px; display:grid; grid-template-columns:1.25fr .75fr; align-items:center; gap:70px; } .eyebrow { color:var(--accent); letter-spacing:.13em; font-size:.72rem; font-weight:700; margin:0 0 16px; } h1,h2,h3,p { margin-top:0; } h1,h2 { font-family:Fraunces,serif; letter-spacing:-.055em; line-height:1.04; } h1 { font-size:clamp(3.3rem,7vw,6.4rem); max-width:710px; margin-bottom:25px; } h1 em { color:var(--accent); font-style:normal; } .hero-lead { max-width:530px; font-size:1.16rem; color:var(--muted); } .hero-actions { display:flex; gap:12px; margin-top:32px; flex-wrap:wrap; } .button-primary { border:0; background:var(--accent); color:white; cursor:pointer; } .button-primary:hover { background:#ab492b; } .button-secondary { border:1px solid var(--line); } .hero-meta { display:flex; gap:35px; margin-top:58px; } .hero-meta div { display:grid; gap:2px; font-size:.82rem; color:var(--muted); } .hero-meta strong { color:var(--ink); font-size:.9rem; }
.hero-card { background:var(--dark); color:#f6f2e9; padding:38px 34px 30px; min-height:390px; position:relative; border-radius:3px; overflow:hidden; box-shadow:20px 24px 0 var(--sand); } .hero-card:before { content:""; position:absolute; width:300px; height:300px; border:1px solid #607072; border-radius:50%; right:-130px; top:-125px; } .card-kicker { color:#b9c3b4; letter-spacing:.12em; font-size:.68rem; font-weight:700; } .card-day { font-family:Fraunces,serif; color:#e9b57c; font-size:3.4rem; line-height:1; margin:40px 0 15px; } .card-title { font-family:Fraunces,serif; font-size:1.65rem; line-height:1.12; max-width:270px; } .hero-card ul { list-style:none; padding:14px 0 0; margin:0; border-top:1px solid #425256; font-size:.85rem; display:grid; gap:10px; } .hero-card li span { color:#e9b57c; margin-right:9px; } .card-corner { position:absolute; right:22px; bottom:14px; font-family:Fraunces,serif; font-size:4rem; color:#d8e0d1; opacity:.16; }
.trust-strip { display:flex; justify-content:center; gap:25px; align-items:center; padding:22px; background:#e9e4d9; font-size:.84rem; color:#526164; } .trust-strip p { margin:0 15px 0 0; font-weight:700; color:var(--ink); } .trust-strip i { width:4px; height:4px; border-radius:50%; background:var(--accent); }
.section { padding:115px 28px; max-width:1200px; margin:auto; } .section-intro { display:grid; grid-template-columns:200px 1fr; margin-bottom:58px; } h2 { font-size:clamp(2.5rem,4.2vw,4.3rem); margin-bottom:0; max-width:750px; } .service-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); } .service-grid article { padding:31px 32px 10px 0; border-right:1px solid var(--line); min-height:250px; } .service-grid article+article { padding-left:31px; } .service-grid article:last-child { border-right:0; } .service-number { color:var(--accent); font-size:.8rem; font-weight:700; } h3 { font-family:Fraunces,serif; font-size:1.7rem; letter-spacing:-.04em; margin:48px 0 12px; } .service-grid p,.process-heading>p,.coverage>div>p,.contact-copy>p { color:var(--muted); }
.process { max-width:none; background:var(--dark); color:#f6f2e9; display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; padding-left:max(28px,calc((100% - 1144px)/2)); padding-right:max(28px,calc((100% - 1144px)/2)); } .process .eyebrow { color:#e9b57c; } .process-heading h2 { max-width:450px; } .process-heading>p { color:#b7c4c0; max-width:370px; margin-top:24px; } .steps { list-style:none; padding:0; margin:0; border-top:1px solid #435358; } .steps li { display:grid; grid-template-columns:70px 1fr; padding:25px 0; border-bottom:1px solid #435358; } .steps span { color:#e9b57c; font-family:Fraunces,serif; font-size:1.35rem; } .steps h3 { margin:0 0 8px; font-size:1.45rem; } .steps p { margin:0; color:#b7c4c0; }
.coverage { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:80px; } .coverage h2 { max-width:570px; } .coverage>div>p { max-width:470px; margin:25px 0; } .text-link { border-bottom:1px solid var(--ink); padding-bottom:4px; font-weight:700; } .text-link span { color:var(--accent); padding-left:8px; } .coverage-list { border-top:1px solid var(--line); } .coverage-list p { display:flex; justify-content:space-between; padding:16px 0; margin:0; border-bottom:1px solid var(--line); color:var(--muted); } .coverage-list b { color:var(--ink); }
.contact { background:#e9e4d9; max-width:none; display:grid; grid-template-columns:1fr 1fr; gap:100px; padding-left:max(28px,calc((100% - 1144px)/2)); padding-right:max(28px,calc((100% - 1144px)/2)); } .contact h2 { max-width:500px; } .contact-note { font-size:.82rem; margin-top:45px; } .contact-form { display:grid; gap:17px; } label { display:grid; gap:7px; font-size:.78rem; font-weight:700; } input,textarea { font:inherit; font-size:.95rem; border:1px solid #c9c5bb; border-radius:0; padding:13px; background:#f9f8f4; resize:vertical; } input:focus,textarea:focus { outline:2px solid #d99d8d; border-color:var(--accent); } .contact-form .button { justify-self:start; margin-top:5px; } .form-message { min-height:1.2em; margin:0; color:#315a47; font-size:.85rem; font-weight:600; }
footer { max-width:1200px; margin:auto; padding:30px 28px; display:flex; gap:20px; justify-content:space-between; align-items:center; font-size:.78rem; color:var(--muted); } footer p { margin:0; }
@media (max-width:760px) { .site-header { min-height:70px; padding:0 20px; } .menu-toggle { display:block; border:0; padding:8px; background:transparent; font:inherit; font-weight:700; } .main-nav { display:none; position:absolute; top:70px; left:0; right:0; padding:20px; background:var(--paper); border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch; z-index:3; } .main-nav.open { display:flex; } .hero { min-height:auto; padding:55px 20px 80px; display:block; } h1 { font-size:3.55rem; } .hero-card { margin-top:60px; min-height:350px; } .hero-meta { gap:20px; flex-direction:column; margin-top:40px; } .trust-strip { overflow:hidden; justify-content:flex-start; white-space:nowrap; gap:15px; } .trust-strip p { display:none; } .section { padding:75px 20px; } .section-intro,.coverage,.contact,.process { display:block; } .section-intro .eyebrow { margin-bottom:16px; } .service-grid { display:block; } .service-grid article,.service-grid article+article { border-right:0; border-bottom:1px solid var(--line); padding:25px 0; min-height:0; } .service-grid article:last-child { border-bottom:0; } .service-grid h3 { margin-top:30px; } .process { padding:75px 20px; } .steps { margin-top:45px; } .coverage-list { margin-top:45px; } .contact { padding:75px 20px; } .contact-form { margin-top:45px; } footer { padding:25px 20px; flex-wrap:wrap; } }