:root { --ink:#172748; --purple:#6c54ae; --blue:#2e78b7; --pale-blue:#edf6fb; --mist:#f7f7fb; --line:#dbe1eb; --white:#fff; --max:1160px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--white); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height:1.6; } a { color:inherit; text-decoration-thickness:1px; text-underline-offset:3px; } .skip-link { position:absolute; left:-999px; } .skip-link:focus { left:1rem; top:1rem; z-index:10; background:#fff; padding:.5rem 1rem; }
.site-header { width:min(calc(100% - 3rem),var(--max)); min-height:94px; margin:auto; display:flex; justify-content:space-between; align-items:center; gap:1.5rem; border-bottom:1px solid var(--line); } .brand { display:inline-flex; align-items:center; gap:.65rem; font-weight:750; text-decoration:none; letter-spacing:-.02em; white-space:nowrap; } .brand em { color:var(--purple); font-weight:500; } .brand-mark { width:2.45rem; height:2.45rem; display:grid; place-items:center; border-radius:50% 50% 50% 9%; background:var(--purple); color:#fff; transform:rotate(-6deg); box-shadow:3px 3px 0 #b8e0f2; } .brand-mark svg { width:2rem; height:2rem; overflow:visible; } .site-nav { display:flex; align-items:center; gap:1.35rem; margin:0; padding:0; list-style:none; font-size:.92rem; } .site-nav a { text-decoration:none; } .site-nav a:hover,.site-nav a.active { color:var(--purple); } .menu-button { display:none; }
.hero { width:min(calc(100% - 3rem),var(--max)); margin:0 auto; min-height:510px; display:grid; grid-template-columns:1.07fr .93fr; align-items:center; gap:4rem; padding:4rem 0; } .eyebrow { color:var(--purple); text-transform:uppercase; letter-spacing:.12em; font-weight:750; font-size:.73rem; margin:0 0 1rem; } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { line-height:1.1; letter-spacing:-.04em; } h1 { max-width:660px; margin-bottom:1.4rem; font-size:clamp(2.6rem,5vw,4.8rem); } h2 { font-size:clamp(2rem,3.4vw,3.35rem); margin-bottom:1.25rem; } h3 { font-size:1.4rem; margin:1.6rem 0 .6rem; } .lead { max-width:570px; font-size:1.17rem; color:#485775; } .button-row { display:flex; gap:1.4rem; align-items:center; flex-wrap:wrap; margin-top:2rem; } .button { display:inline-block; padding:.82rem 1.22rem; border-radius:4px; background:var(--purple); color:#fff; text-decoration:none; font-weight:700; transition:background .2s; } .button:hover { background:var(--ink); } .text-link,.card a { color:var(--blue); font-weight:700; text-decoration:none; } .text-link span,.card a span { display:inline-block; transition:transform .2s; } .text-link:hover span,.card a:hover span { transform:translateX(4px); }
.hero-art { position:relative; min-height:365px; overflow:hidden; border-radius:120px 22px 120px 22px; background:var(--pale-blue); } .sun { position:absolute; width:92px; height:92px; border-radius:50%; background:#f5c969; right:22%; top:17%; } .hill { position:absolute; border-radius:50% 50% 0 0; bottom:-15%; } .hill-one { width:130%; height:62%; left:-36%; background:#a8c9ba; transform:rotate(-5deg); } .hill-two { width:100%; height:47%; right:-32%; background:#6e9cae; transform:rotate(8deg); } .path { position:absolute; width:38%; height:75%; background:#f0d5af; bottom:-36%; left:37%; border-radius:50% 50% 0 0; transform:rotate(-17deg); } .plant { position:absolute; bottom:25%; width:80px; height:140px; border-left:5px solid var(--ink); transform-origin:bottom; } .plant-one { left:18%; transform:rotate(-6deg); } .plant-two { right:12%; transform:scale(.7) rotate(7deg); } .plant i { position:absolute; display:block; width:50px; height:25px; background:var(--purple); border-radius:50px 0 50px 0; } .plant i:nth-child(1){ left:0; top:25px; transform:rotate(-32deg); } .plant i:nth-child(2){ left:-38px; top:60px; transform:rotate(25deg); background:var(--blue); } .plant i:nth-child(3){ left:9px; top:92px; transform:rotate(-30deg); }
.section { width:min(calc(100% - 3rem),var(--max)); margin:0 auto; padding:5.5rem 0; } .intro { max-width:780px; text-align:center; } .intro p:last-child { color:#485775; font-size:1.1rem; } .cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; } .card { min-height:270px; padding:1.8rem; border:1px solid var(--line); border-top:4px solid var(--blue); } .card:nth-child(2) { border-top-color:var(--purple); } .card:nth-child(3) { border-top-color:#79a98e; } .card p { color:#53617a; } .number { color:var(--blue); font-size:.8rem; letter-spacing:.12em; font-weight:800; } .callout { width:min(calc(100% - 3rem),var(--max)); max-width:none; padding:5rem max(1.5rem,calc((100vw - var(--max))/2)); text-align:center; background:var(--ink); color:#fff; } .callout h2 { max-width:650px; margin-left:auto; margin-right:auto; } .callout p:not(.eyebrow) { max-width:620px; margin:0 auto 1.8rem; color:#d6e1f2; } .button-light { color:var(--ink); background:#fff; } .button-light:hover { background:#dcecff; }
.section { width:min(calc(100% - 3rem),var(--max)); margin:0 auto; padding:5.5rem 0; } .intro { max-width:780px; text-align:center; } .intro p:last-child { color:#485775; font-size:1.1rem; } .cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; } .card { min-height:270px; padding:1.8rem; border:1px solid var(--line); border-top:4px solid var(--blue); } .card:nth-child(2) { border-top-color:var(--purple); } .card:nth-child(3) { border-top-color:#79a98e; } .card p { color:#53617a; } .number { color:var(--blue); font-size:.8rem; letter-spacing:.12em; font-weight:800; } .story-gallery { padding-top:1rem; } .gallery-intro { max-width:650px; margin-bottom:2rem; } .gallery-intro p:last-child { color:#53617a; } .photo-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; } .photo-card { margin:0; overflow:hidden; background:var(--mist); } .photo-card img { width:100%; aspect-ratio:1 / 1; object-fit:cover; display:block; transition:transform .35s ease; } .photo-card:hover img { transform:scale(1.035); } .photo-card figcaption { padding:.8rem .9rem; color:#485775; font-size:.85rem; font-weight:650; } .callout { width:min(calc(100% - 3rem),var(--max)); max-width:none; padding:5rem max(1.5rem,calc((100vw - var(--max))/2)); text-align:center; background:var(--ink); color:#fff; } .callout h2 { max-width:650px; margin-left:auto; margin-right:auto; } .callout p:not(.eyebrow) { max-width:620px; margin:0 auto 1.8rem; color:#d6e1f2; } .button-light { color:var(--ink); background:#fff; } .button-light:hover { background:#dcecff; }
.site-footer { width:min(calc(100% - 3rem),var(--max)); padding:3.3rem 0 2rem; margin:auto; display:grid; grid-template-columns:1fr 1fr auto; align-items:center; gap:2rem; font-size:.9rem; } .site-footer p { margin:0; color:#62708a; } .copyright { text-align:right; }
.page-hero { width:min(calc(100% - 3rem),var(--max)); margin:auto; padding:5.5rem 0 3.7rem; max-width:950px; } .page-hero h1 { font-size:clamp(2.7rem,5vw,4.5rem); } .page-hero .lead { max-width:700px; } .content { width:min(calc(100% - 3rem),900px); margin:auto; padding:1rem 0 6rem; } .content h2 { font-size:2rem; margin-top:3.5rem; } .content p { color:#43526f; font-size:1.05rem; } .feature-list { list-style:none; padding:0; margin:2rem 0; display:grid; gap:1rem; } .feature-list li { position:relative; padding:1.1rem 1.2rem 1.1rem 4rem; background:var(--mist); } .feature-list li::before { content:""; position:absolute; left:1.3rem; top:1.25rem; width:1.2rem; height:1.2rem; border-radius:50% 50% 50% 4px; background:var(--purple); transform:rotate(-30deg); } .book-panel { margin:2rem 0; padding:2.5rem; background:var(--pale-blue); border-left:5px solid var(--blue); } .book-panel h2 { margin-top:0; } .placeholder-note { display:inline-block; margin-top:1rem; color:#5d497e; font-size:.86rem; font-style:italic; } .network-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-top:2rem; } .network-card { padding:2rem; border:1px solid var(--line); } .network-card h3 { margin-top:0; } .contact-box { padding:2.5rem; background:var(--mist); text-align:center; } .founder-photo { float:right; width:min(42%,330px); margin:.3rem 0 1rem 1.8rem; } .founder-photo img { display:block; width:100%; aspect-ratio:1 / 1.08; object-fit:cover; object-position:center top; border-radius:100px 18px 100px 18px; } .founder-photo figcaption { margin-top:.7rem; color:#62708a; font-size:.86rem; } .intake-form { display:grid; gap:1.25rem; max-width:700px; margin-top:2rem; } .direct-email { margin-top:1.5rem; } .direct-email a { color:var(--blue); font-weight:700; } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; } .field { display:grid; gap:.45rem; } .field label,.fieldset-title { font-weight:700; } .field input,.field select,.field textarea { width:100%; padding:.75rem; border:1px solid #bcc7d8; border-radius:3px; color:var(--ink); font:inherit; background:#fff; } .field textarea { min-height:140px; resize:vertical; } fieldset { border:0; margin:0; padding:0; } .choice-list { display:grid; gap:.55rem; margin-top:.6rem; } .choice-list label { color:#43526f; } .consent { display:flex; gap:.7rem; align-items:flex-start; color:#43526f; font-size:.92rem; } .consent input { margin-top:.35rem; } @media (max-width:760px) { .form-row,.photo-grid { grid-template-columns:1fr; } .photo-card img { aspect-ratio:1.25 / 1; } .founder-photo { float:none; width:min(100%,330px); margin:1.3rem 0; } }
@media (max-width:760px) { .site-header { min-height:78px; position:relative; } .menu-button { display:block; border:0; background:transparent; color:var(--ink); font:inherit; font-weight:700; cursor:pointer; } .site-nav { display:none; position:absolute; z-index:3; top:77px; left:0; right:0; padding:1rem; background:#fff; border:1px solid var(--line); flex-direction:column; align-items:flex-start; gap:.9rem; } .site-nav.open { display:flex; } .hero { grid-template-columns:1fr; gap:2rem; padding:3rem 0; } .hero-art { min-height:280px; } .cards,.network-grid { grid-template-columns:1fr; } .section { padding:3.8rem 0; } .site-footer { grid-template-columns:1fr; gap:1rem; } .copyright { text-align:left; } .page-hero { padding:3.5rem 0 2.5rem; } .book-panel,.contact-box { padding:1.5rem; } }