:root { color-scheme: light; --paper: #f7f5f1; --navy: #17324d; --muted: #536477; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
body { margin: 0; background: var(--paper); color: var(--navy); font-family: "Segoe UI", system-ui, sans-serif; line-height: 1.65; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: .25em; }
a:focus-visible { outline: 3px solid var(--navy); outline-offset: 6px; }
.wrap { width: min(1120px, calc(100% - 64px)); margin-inline: auto; }
.skip-link { position: absolute; top: -100px; left: 24px; padding: 12px; background: white; z-index: 2; }
.skip-link:focus { top: 12px; }
.header { min-height: 112px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 14px; font-size: 1.15rem; font-weight: 650; text-decoration: none; letter-spacing: -.035em; }
.brand-light { font-weight: 400; }
.brand-mark { display: inline-flex; font-size: 2.2rem; font-weight: 750; letter-spacing: -.2em; padding-right: .2em; line-height: 1; }
.brand-mark span:first-child { color: #ef7472; }
.brand-mark span:last-child { color: #6db7e8; mix-blend-mode: multiply; }
nav a { font-size: .9rem; text-decoration: none; }
nav a:hover { text-decoration: underline; }
.hero { position: relative; padding-block: clamp(72px, 10vw, 144px) 100px; }
.hero::before { content: ""; position: absolute; z-index: -1; pointer-events: none; inset: 0 -2% 0 25%; background: radial-gradient(ellipse at 75% 40%, #6db7e824, transparent 60%), radial-gradient(ellipse at 45% 60%, #a99ad820, transparent 65%); }
.eyebrow { display: flex; align-items: center; gap: 12px; font-size: .75rem; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 24px; }
.eyebrow > span { height: 8px; width: 8px; border-radius: 50%; background: #ef7472; }
h1 { font-size: clamp(2.6rem, 5.7vw, 4.8rem); font-weight: 550; line-height: 1.12; letter-spacing: -.055em; margin: 0 0 30px; }
h1 > span { color: #68618b; }
.intro { max-width: 560px; color: var(--muted); font-size: 1.15rem; margin: 0 0 32px; }
.button { display: inline-flex; gap: 32px; align-items: center; padding: 14px 22px; border-radius: 6px; background: var(--navy); color: white; text-decoration: none; font-size: .9rem; }
.button:hover { background: #284963; }
.hero-note { color: var(--muted); font-size: .8rem; margin-top: 20px; }
.about { border-top: 1px solid #17324d26; display: grid; grid-template-columns: 1fr 2fr; gap: 40px; padding-block: 64px 88px; }
.about .eyebrow { padding-top: 10px; }
h2 { font-size: clamp(2rem, 3.5vw, 2.8rem); line-height: 1.2; letter-spacing: -.04em; font-weight: 550; margin: 0 0 24px; }
.about p:not(.eyebrow) { max-width: 620px; color: var(--muted); }
.footer { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid #17324d26; padding-block: 24px; color: var(--muted); font-size: .75rem; }
@media (max-width: 600px) {
.wrap { width: calc(100% - 40px); }
.header { min-height: 88px; gap: 12px; }
.brand { gap: 10px; font-size: 1rem; }
.brand-mark { font-size: 1.9rem; }
nav a { font-size: .8rem; }
.hero { padding-block: 64px 72px; }
.intro { font-size: 1rem; }
.about { grid-template-columns: 1fr; gap: 8px; padding-block: 40px 56px; }
.footer { flex-direction: column; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }