:root { --ink:#142225; --muted:#5d6a6b; --paper:#f7f6f1; --white:#fff; --line:#d7ddda; --sea:#0d5f65; --sky:#d9e9e6; --accent:#e05c3b; --display:Georgia,"Times New Roman",serif; --body:Arial,Helvetica,sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { background:var(--paper); color:var(--ink); font-family:var(--body); line-height:1.5; margin:0; }
.site-header,.hero,.section,.policy-page,.article-page,.simple-page { margin:0 auto; max-width:1200px; } .site-header { align-items:center; display:flex; justify-content:space-between; min-height:82px; padding:20px 32px; } .brand { color:var(--ink); font-size:14px; font-weight:800; letter-spacing:.1em; text-decoration:none; } .brand span { color:var(--accent); }
nav,.site-footer div { display:flex; flex-wrap:wrap; gap:22px; } nav a,.site-footer a { color:var(--muted); font-size:14px; text-decoration:none; } nav a:hover,.site-footer a:hover,.text-link:hover { text-decoration:underline; text-underline-offset:4px; }
.hero { align-items:center; display:grid; gap:52px; grid-template-columns:.95fr 1.05fr; padding:42px 32px 84px; } .eyebrow { color:var(--sea); font-size:12px; font-weight:800; letter-spacing:.13em; margin:0 0 15px; text-transform:uppercase; } h1,h2,h3 { letter-spacing:0; line-height:1.04; } h1,h2 { font-family:var(--display); font-weight:600; margin:0; } h1 { font-size:clamp(48px,6vw,78px); max-width:640px; } h2 { font-size:clamp(34px,4vw,54px); } h3 { font-size:20px; margin:14px 0 8px; } .lede { color:var(--muted); font-size:19px; margin:26px 0; max-width:590px; } .hero-actions { align-items:center; display:flex; flex-wrap:wrap; gap:22px; } .hero-note { color:var(--muted); font-size:13px; margin:24px 0 0; max-width:500px; }
.button { border:1px solid var(--ink); border-radius:3px; cursor:pointer; display:inline-flex; font:700 15px var(--body); justify-content:center; min-height:50px; padding:13px 19px; text-decoration:none; } .button-primary { background:var(--ink); color:var(--white); } .button-primary:hover { background:var(--sea); border-color:var(--sea); } .button-secondary { background:transparent; color:var(--ink); } .button-secondary:hover { background:var(--ink); color:var(--white); } .text-link { color:var(--ink); font-weight:700; text-underline-offset:5px; }
.hero-image-wrap { position:relative; } .hero-image { aspect-ratio:1/1.06; display:block; object-fit:cover; width:100%; } .hero-image-wrap p { background:var(--sea); bottom:18px; color:var(--white); font-size:14px; left:-18px; margin:0; max-width:250px; padding:15px; position:absolute; }
.section { padding:82px 32px; } .services { border-top:1px solid var(--line); } .section-heading { max-width:760px; } .service-grid { display:grid; gap:32px; grid-template-columns:repeat(3,1fr); margin-top:48px; } .service-grid article { border-top:2px solid var(--ink); } .service-grid span { color:var(--accent); display:block; font-family:var(--display); font-size:20px; margin-top:14px; } .service-grid p { color:var(--muted); margin:0; }
.resource-band { background:var(--ink); color:var(--white); padding:82px max(32px,calc((100vw - 1136px)/2)); } .resource-band .eyebrow { color:#8ed0c8; } .article-grid { display:grid; gap:22px; grid-template-columns:repeat(3,1fr); margin-top:44px; } .article-grid a { border:1px solid #486064; color:var(--white); display:flex; flex-direction:column; gap:24px; min-height:280px; padding:26px; text-decoration:none; } .article-grid a:hover { background:#20363a; } .article-grid span { color:#9ed1cb; font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; } .article-grid strong { font:600 27px/1.12 var(--display); } .article-grid small { margin-top:auto; }
.newsletter,.contact { display:grid; gap:64px; grid-template-columns:1fr .9fr; } .newsletter-copy > p,.contact-copy > p { color:var(--muted); font-size:18px; } .fine-print { font-size:14px !important; } .form-card { background:var(--white); box-shadow:10px 10px 0 var(--sky); display:grid; gap:12px; padding:30px; } label { font-weight:700; } label span { color:var(--muted); font-weight:400; } input,select,textarea { background:#fbfcfb; border:1px solid var(--line); border-radius:2px; color:var(--ink); font:inherit; min-height:50px; padding:12px; width:100%; } textarea { min-height:130px; resize:vertical; } .consent { align-items:flex-start; color:var(--muted); display:flex; font-size:14px; font-weight:400; gap:11px; margin:10px 0 5px; } .consent input { flex:none; height:17px; margin:3px 0 0; width:17px; } .form-card .button { justify-self:start; margin-top:3px; } .form-status { color:var(--sea); font-size:14px; font-weight:700; margin:0; min-height:1.5em; } .form-help { color:var(--muted); font-size:13px; margin:0; } .form-help a,.policy-page a { color:var(--sea); }
.site-footer { border-top:1px solid var(--line); display:grid; gap:12px; margin:32px auto 0; max-width:1200px; padding:38px 32px; } .site-footer p { color:var(--muted); font-size:14px; margin:0; } .policy-page,.article-page,.simple-page { max-width:860px; padding:72px 32px 96px; } .policy-page section,.article-page section { border-top:1px solid var(--line); margin-top:36px; padding-top:23px; } .policy-page h2,.article-page h2 { font-family:var(--body); font-size:22px; margin:0 0 10px; } .policy-page section p,.article-page section p { color:var(--muted); margin:0; } .article-lede { color:var(--muted); font-size:20px; margin:24px 0 42px; }
@media (max-width:760px) { .site-header { align-items:flex-start; flex-direction:column; gap:14px; min-height:0; padding:21px 20px; } .hero,.service-grid,.article-grid,.newsletter,.contact { grid-template-columns:1fr; } .hero { gap:34px; padding:28px 20px 60px; } .hero-image-wrap p { bottom:12px; left:0; } .section,.policy-page,.article-page,.simple-page { padding-left:20px; padding-right:20px; } .section { padding-top:58px; padding-bottom:58px; } .service-grid { gap:26px; margin-top:34px; } .resource-band { padding:58px 20px; } .article-grid { margin-top:32px; } .article-grid a { min-height:220px; } .newsletter,.contact { gap:32px; } .form-card { box-shadow:6px 6px 0 var(--sky); padding:22px; } .site-footer { padding-left:20px; padding-right:20px; } }