:root { --ink:#173432; --paper:#fbfaf6; --mist:#e4eee8; --coral:#e88468; --sky:#a9d4df; --gold:#f1c65b; --moss:#a9bf8a; --line:rgba(23,52,50,.16); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans",Arial,sans-serif; font-size:16px; line-height:1.55; }
a { color:inherit; text-decoration:none; }
.skip-link { position:absolute; left:-10000px; }
.skip-link:focus { left:20px; top:20px; z-index:20; padding:10px; background:#fff; }
.site-header { max-width:1200px; min-height:88px; padding:18px 32px; margin:auto; display:flex; justify-content:space-between; align-items:center; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; line-height:1.05; letter-spacing:-.03em; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; color:white; background:var(--ink); font-family:Fraunces,serif; font-size:22px; }
nav { display:flex; align-items:center; gap:28px; font-size:14px; font-weight:600; }
nav a { border-bottom:1px solid transparent; }
nav a:hover { border-color:var(--ink); }
.nav-contact { padding:9px 15px; border:1px solid var(--ink); border-radius:999px; }
.menu-button { display:none; border:0; background:none; color:var(--ink); font:600 15px inherit; }
.hero { max-width:1200px; min-height:600px; padding:75px 32px 66px; margin:auto; display:grid; grid-template-columns:1.08fr .92fr; gap:40px; align-items:center; }
.eyebrow { margin:0 0 15px; color:#627d74; font-size:12px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:Fraunces,Georgia,serif; letter-spacing:-.045em; line-height:1.04; }
h1 { max-width:650px; margin-bottom:24px; font-size:clamp(3.5rem,7vw,6.75rem); font-weight:600; }
h2 { margin-bottom:25px; font-size:clamp(2.2rem,4vw,4rem); font-weight:600; }
h3 { font-size:1.65rem; }
.lead { max-width:530px; margin-bottom:32px; color:#4e6660; font-size:20px; }
.button { display:inline-flex; gap:14px; align-items:center; padding:14px 20px; background:var(--ink); color:#fff; border-radius:999px; font-weight:700; }
.button:hover { background:#315752; }
.hero-art { position:relative; min-height:420px; overflow:hidden; border-radius:49% 51% 42% 44% / 35% 34% 61% 62%; background:var(--mist); }
.sun { position:absolute; top:76px; left:50%; width:136px; height:136px; border-radius:50%; background:var(--gold); transform:translateX(-50%); }
.arc { position:absolute; width:370px; height:370px; border:2px solid rgba(23,52,50,.2); border-radius:50%; }
.arc-one { top:42px; right:-175px; }.arc-two { top:165px; left:-220px; }
.orb { position:absolute; border-radius:50%; }.orb-one { width:56px; height:56px; top:53px; left:80px; background:var(--coral); }.orb-two { width:38px; height:38px; top:173px; right:86px; background:#7aa9a3; }.orb-three { width:18px; height:18px; top:263px; left:130px; background:var(--gold); }
.horizon { position:absolute; bottom:-75px; left:-5%; width:110%; height:210px; border-radius:50% 50% 0 0; background:#75a38d; transform:rotate(-5deg); }
.section { padding:110px 32px; }.mission { background:var(--ink); color:#f8f5e9; }.mission .eyebrow { color:#b9d3c5; }.mission-grid { max-width:1136px; margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:95px; }.mission-grid h2 { margin:0; }.mission-grid p { font-size:19px; color:#d6e2d8; }
.focus { max-width:1200px; margin:auto; }.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:36px; }.section-heading h2 { margin:0; }.cards { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }.card { min-height:300px; padding:25px; display:flex; flex-direction:column; border-radius:4px; }.card-number { font-size:13px; font-weight:700; }.card h3 { margin:auto 0 14px; }.card p { margin:0; font-size:15px; }.coral { background:#f1b2a0; }.sky { background:var(--sky); }.gold { background:#f3d788; }.moss { background:#bfd0a8; }
.approach { max-width:1200px; margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center; border-top:1px solid var(--line); }.approach p { font-size:18px; color:#536a63; }.approach ul { padding:0; margin:28px 0 0; list-style:none; }.approach li { padding:14px 0; border-top:1px solid var(--line); font-weight:600; }.approach-art { height:400px; position:relative; border-radius:50% 50% 8px 8px; overflow:hidden; background:var(--gold); }.approach-art span { position:absolute; bottom:-80px; width:290px; height:350px; border-radius:50% 50% 0 0; }.approach-art span:nth-child(1) { left:-100px; background:var(--coral); }.approach-art span:nth-child(2) { left:105px; height:280px; background:#729e91; }.approach-art span:nth-child(3) { right:-105px; background:var(--sky); }
.contact { padding:100px 32px; text-align:center; background:#dce9df; }.contact h2 { margin-bottom:15px; }.contact p { color:#536a63; }.email { display:inline-block; padding-bottom:3px; border-bottom:2px solid var(--ink); font-family:Fraunces,Georgia,serif; font-size:clamp(1.5rem,3vw,2.5rem); }
footer { max-width:1200px; margin:auto; padding:26px 32px; display:flex; justify-content:space-between; color:#5a706a; font-size:13px; } footer a:hover { color:var(--ink); }
@media (max-width:800px) { .site-header { padding:18px 20px; }.menu-button { display:block; } nav { display:none; position:absolute; top:72px; right:20px; left:20px; padding:20px; background:#fff; box-shadow:0 8px 28px rgba(23,52,50,.12); flex-direction:column; align-items:flex-start; z-index:5; } nav.open { display:flex; }.hero { min-height:auto; padding:48px 20px 65px; grid-template-columns:1fr; }.hero-art { min-height:330px; }.section { padding:72px 20px; }.mission-grid,.approach { grid-template-columns:1fr; gap:38px; }.cards { grid-template-columns:1fr 1fr; }.approach-art { height:300px; }.section-heading { display:block; } footer { padding:24px 20px; } }
@media (max-width:480px) { .cards { grid-template-columns:1fr; }.card { min-height:220px; } h1 { font-size:3.35rem; } }