:root { --ink:#202426; --muted:#687174; --canvas:#f9faf8; --line:#e1e5e2; --red:#e42e3c; --pink:#ee3c65; --teal:#45b7b4; --aqua:#81d4cf; --white:#fff; --gutter:clamp(24px,6vw,112px); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; overflow-x:hidden; color:var(--ink); background:var(--canvas); font-family:Manrope,Arial,sans-serif; } a { color:inherit; }
.site-header { position:relative; z-index:10; min-height:86px; padding:25px var(--gutter); display:flex; align-items:center; justify-content:space-between; background:var(--canvas); }.brand-text { display:flex; align-items:baseline; gap:10px; line-height:1; white-space:nowrap; }.brand-text strong { font-size:14px; letter-spacing:.15em; }.brand-text span,.header-note { font:500 9px/1 "DM Mono",monospace; letter-spacing:.16em; }.header-note { color:var(--muted); }
.hero { position:relative; min-height:calc(100svh - 86px); padding:clamp(78px,10vw,142px) var(--gutter) 58px; display:grid; grid-template-columns:minmax(0,620px) 1fr; align-items:center; overflow:hidden; background:linear-gradient(126deg,#fff 0%,#fafbf9 52%,#f2f5f3 100%); }.hero::before { content:""; position:absolute; width:42vw; height:42vw; min-width:490px; min-height:490px; right:-12vw; top:-11vw; border-radius:50%; background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.9),rgba(255,255,255,0) 64%); border:1px solid rgba(32,36,38,.06); }.hero-copy { position:relative; z-index:2; }.kicker,.eyebrow { margin:0 0 22px; color:var(--teal); font:600 10px/1.4 "DM Mono",monospace; letter-spacing:.17em; }.kicker::before { content:""; display:inline-block; width:28px; height:1px; margin:0 11px 3px 0; background:var(--red); } h1,h2 { margin:0; letter-spacing:-.085em; font-weight:800; line-height:.84; } h1 { max-width:560px; font-size:clamp(58px,7.3vw,112px); } h1 em,h2 em { color:var(--red); font-style:normal; font-weight:400; }.intro { max-width:360px; margin:32px 0 0; color:var(--muted); font-size:14px; line-height:1.85; }.hero-rule { display:block; width:76px; height:2px; margin-top:42px; background:linear-gradient(90deg,var(--red) 0 50%,var(--teal) 50%); }.button { display:inline-flex; align-items:center; gap:27px; margin-top:31px; padding:15px 18px 15px 20px; color:var(--white); background:var(--ink); border:1px solid var(--ink); text-decoration:none; font-size:11px; font-weight:800; letter-spacing:.04em; transition:.25s ease; }.button:hover { background:var(--red); border-color:var(--red); transform:translateY(-3px); }.button span { color:var(--aqua); font-size:18px; }.hero-art { position:absolute; z-index:1; width:min(48vw,700px); aspect-ratio:1; right:1vw; top:51%; transform:translateY(-49%); }.hero-art > span { position:absolute; border-radius:50%; }.halo { inset:5%; border:1px solid rgba(32,36,38,.09); }.halo::before,.halo::after { content:""; position:absolute; border-radius:50%; }.halo::before { inset:13%; border:1px dashed rgba(69,183,180,.25); }.halo::after { inset:31%; background:rgba(255,255,255,.72); box-shadow:0 30px 60px rgba(30,48,47,.08); }.arc { inset:15%; border:clamp(24px,3.5vw,52px) solid var(--red); border-left-color:transparent; border-bottom-color:var(--pink); transform:rotate(38deg); }.arc-teal { inset:29%; border:clamp(19px,2.7vw,38px) solid var(--teal); border-top-color:transparent; border-left-color:var(--aqua); transform:rotate(-62deg); }.arc-silver { inset:43%; border:clamp(12px,2vw,25px) solid #dfe5e3; border-right-color:transparent; transform:rotate(82deg); }.spark { width:10px; height:10px; left:18%; top:25%; background:var(--red); box-shadow:47px 380px 0 var(--teal),360px 290px 0 var(--pink); }.hero-bottom { position:absolute; z-index:3; bottom:30px; left:var(--gutter); right:var(--gutter); display:flex; justify-content:space-between; gap:24px; color:var(--muted); font:10px "DM Mono",monospace; letter-spacing:.1em; }
.statement { position:relative; min-height:680px; padding:clamp(82px,11vw,145px) var(--gutter); overflow:hidden; background:var(--ink); color:var(--white); }.section-index { position:absolute; top:34px; left:var(--gutter); color:var(--aqua); font:10px "DM Mono",monospace; }.statement-copy { position:relative; z-index:2; max-width:750px; }.statement h2,.contact h2 { font-size:clamp(54px,8vw,116px); }.statement h2 em { color:var(--aqua); }.statement-copy > p:last-child { max-width:360px; margin:34px 0 0; color:#c4cbca; font-size:15px; line-height:1.8; }.statement-orbit { position:absolute; right:-10vw; bottom:-17vw; width:54vw; min-width:520px; aspect-ratio:1; border:1px solid rgba(255,255,255,.14); border-radius:50%; }.statement-orbit::before,.statement-orbit::after { content:""; position:absolute; border-radius:50%; }.statement-orbit::before { inset:15%; border:37px solid var(--red); border-right-color:transparent; border-bottom-color:transparent; transform:rotate(40deg); }.statement-orbit::after { inset:34%; border:24px solid var(--teal); border-left-color:transparent; transform:rotate(-35deg); }
.contact { position:relative; display:grid; grid-template-columns:minmax(0,.85fr) minmax(330px,.72fr); gap:clamp(48px,12vw,200px); padding:clamp(82px,11vw,140px) var(--gutter); background:#fff; overflow:hidden; }.contact-heading { position:relative; z-index:2; }.contact-heading > p:last-child { max-width:300px; color:var(--muted); font-size:14px; line-height:1.8; }.contact-form { position:relative; z-index:2; align-self:end; }.contact-form label { display:block; padding:15px 0 12px; border-bottom:1px solid var(--line); }.contact-form label span { display:block; margin-bottom:7px; color:var(--muted); font:10px "DM Mono",monospace; letter-spacing:.11em; text-transform:uppercase; }.contact-form input:not(.honeypot),.contact-form textarea { width:100%; padding:0; border:0; outline:0; color:var(--ink); background:transparent; font:500 16px Manrope,Arial,sans-serif; resize:vertical; }.contact-form input::placeholder,.contact-form textarea::placeholder { color:#b4bbb9; }.honeypot { position:absolute; left:-9999px; }.contact-form .button { border:0; }.form-status { min-height:21px; margin:16px 0 0; font-size:12px; font-weight:700; }.contact-shape { position:absolute; width:420px; height:420px; left:-150px; bottom:-220px; border:43px solid var(--teal); border-radius:50%; opacity:.22; }.contact-shape::after { content:""; position:absolute; inset:58px; border:28px solid var(--red); border-left-color:transparent; border-radius:50%; }
footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px clamp(20px,5vw,82px); color:#fff; background:var(--red); font-size:10px; letter-spacing:.08em; } footer p { margin:0; }.footer-logo { font-weight:800; letter-spacing:.18em; }.footer-logo span { color:var(--ink); } footer a { color:white; font-weight:800; text-decoration:none; }
@media (max-width:760px) { .site-header { padding:21px 20px; }.brand-text strong { font-size:13px; }.brand-text span,.header-note { font-size:8px; }.hero { display:block; min-height:760px; padding:145px 20px 78px; }.hero-copy { width:100%; }.intro { max-width:310px; }.hero-art { width:116vw; right:-44vw; top:auto; bottom:-18vw; transform:none; opacity:.92; }.hero-bottom { bottom:25px; left:20px; right:20px; }.statement { min-height:590px; padding:95px 20px; }.statement-orbit { right:-280px; bottom:-225px; }.contact { display:block; padding:88px 20px; }.contact-form { margin-top:58px; }.contact-shape { left:-250px; bottom:-270px; }.contact h2 { font-size:73px; } footer { flex-wrap:wrap; padding:20px; }.footer-logo { width:100%; } }