@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap");

:root { --ink:#152924; --ink-soft:#41564e; --sand:#f3eee3; --paper:#fdfcf8; --sea:#96bbb0; --deep-sea:#276157; --coral:#d86d53; --line:rgba(21,41,36,.16); --display:"Playfair Display",Georgia,serif; --body:"DM Sans",Arial,sans-serif; --mono:"DM Mono",monospace; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.55; } a { color:inherit; text-decoration:none; }
.site-header,.site-footer { display:flex; align-items:center; justify-content:space-between; padding:24px clamp(24px,5vw,84px); } .site-header { border-bottom:1px solid var(--line); } .site-header nav { display:flex; gap:28px; font-size:14px; } .site-header nav a { border-bottom:1px solid transparent; } .site-header nav a:hover { border-color:var(--coral); } .wordmark { font-size:20px; font-weight:600; letter-spacing:-.06em; } .wordmark span { color:var(--coral); }
.hero { min-height:650px; padding:clamp(80px,12vw,156px) clamp(24px,12vw,195px) 100px; background:linear-gradient(125deg,var(--sand) 0%,#e8f0e9 58%,#c5dbd2 100%); } .eyebrow,.section-label { color:var(--deep-sea); font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.11em; text-transform:uppercase; } .hero h1 { max-width:850px; margin:18px 0 25px; font-family:var(--display); font-size:clamp(58px,9vw,132px); font-weight:500; letter-spacing:-.07em; line-height:.88; } .hero h1 em { color:var(--coral); } .hero-copy { max-width:590px; color:var(--ink-soft); font-size:clamp(19px,2vw,24px); } .hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:26px; margin-top:42px; }
.button { display:inline-flex; align-items:center; min-height:50px; padding:0 22px; font-size:14px; font-weight:600; transition:transform .2s ease,background .2s ease; } .button:hover { transform:translateY(-2px); } .button-primary { background:var(--ink); color:var(--paper); } .button-light { background:var(--paper); color:var(--ink); } .text-link { font-size:14px; font-weight:600; } .text-link span { color:var(--coral); margin-left:5px; }
.statement,.framework,.included,.audience,.truth { padding:clamp(72px,10vw,138px) clamp(24px,10vw,160px); } .statement { display:grid; grid-template-columns:minmax(130px,.55fr) 2fr; gap:48px; } h2 { margin:0 0 24px; font-family:var(--display); font-size:clamp(39px,5vw,70px); font-weight:500; letter-spacing:-.055em; line-height:.98; } .statement > div:last-child { max-width:800px; } .statement p { max-width:680px; color:var(--ink-soft); font-size:19px; }
.framework { background:var(--ink); color:var(--paper); } .framework .section-label { color:var(--sea); } .framework h2 { max-width:750px; margin-top:22px; } .steps { display:grid; grid-template-columns:repeat(4,1fr); gap:0; max-width:1200px; margin:65px 0 0; padding:0; list-style:none; } .steps li { min-height:210px; padding:20px 28px 16px 0; border-top:1px solid rgba(253,252,248,.36); } .steps li:not(:last-child) { margin-right:24px; } .steps span,.card-number { display:block; color:var(--coral); font-family:var(--mono); font-size:12px; } .steps strong { display:block; margin-top:25px; font-size:17px; } .steps p { margin-top:10px; color:rgba(253,252,248,.72); font-size:14px; }
.included { background:var(--sand); } .included h2 { max-width:670px; margin-top:22px; } .card-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:58px; } .card { min-height:275px; padding:26px; background:var(--paper); } .card h3 { margin:50px 0 12px; font-family:var(--display); font-size:25px; font-weight:500; letter-spacing:-.04em; line-height:1; } .card p:last-child { color:var(--ink-soft); font-size:14px; }
.audience { display:grid; grid-template-columns:minmax(150px,.65fr) 2fr; gap:40px; } .audience h2 { max-width:690px; } .audience-list { grid-column:2; display:grid; grid-template-columns:repeat(2,1fr); gap:0 40px; margin-top:34px; } .audience-list p { margin:0; padding:18px 0; border-top:1px solid var(--line); font-size:18px; }
.truth { display:grid; grid-template-columns:1.4fr .8fr; align-items:end; gap:60px; background:var(--sea); } .truth h2 { margin-top:18px; } .truth > p { max-width:380px; margin:0; font-size:18px; } .partnership { padding:clamp(80px,11vw,150px) clamp(24px,10vw,160px); background:var(--coral); color:var(--paper); } .partnership .eyebrow { color:var(--paper); } .partnership h2 { max-width:850px; margin-top:20px; } .partnership > p:not(.eyebrow) { max-width:600px; font-size:18px; } .partnership .button { margin-top:24px; } .site-footer { gap:20px; background:var(--ink); color:var(--paper); font-size:12px; } .site-footer p { margin:0; color:rgba(253,252,248,.65); }
@media (max-width:800px) { .site-header nav { display:none; } .hero { min-height:560px; } .statement,.audience,.truth { grid-template-columns:1fr; gap:24px; } .steps,.card-grid { grid-template-columns:repeat(2,1fr); } .audience-list { grid-column:auto; } } @media (max-width:520px) { .steps,.card-grid,.audience-list { grid-template-columns:1fr; } .steps li { min-height:auto; } .site-footer { align-items:flex-start; flex-direction:column; } }