:root { --ink:#102529; --forest:#153a37; --cream:#f3f0e9; --lime:#d9ff70; --muted:#6e7b78; --line:rgba(16,37,41,.16); --sans:"DM Sans",Arial,sans-serif; --display:"Manrope",Arial,sans-serif; --mono:"DM Mono",monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:var(--sans); font-size:16px; }
a { color:inherit; text-decoration:none; }
.skip-link { position:fixed; top:-100px; left:18px; z-index:10; padding:10px 16px; background:var(--lime); color:var(--ink); }
.skip-link:focus { top:18px; }
.site-header { height:92px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(24px,5vw,80px); border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:8px; font-family:var(--display); font-weight:800; font-size:19px; letter-spacing:-.07em; white-space:nowrap; }
.brand b { color:#e5573e; font-weight:800; }.brand-mark { width:25px; height:25px; fill:var(--ink); }
nav { display:flex; gap:34px; font-size:14px; font-weight:600; } nav a { transition:color .2s; } nav a:hover { color:#e5573e; }
.header-cta { padding:10px 0; font-size:14px; font-weight:700; }.header-cta span { margin-left:5px; color:#e5573e; font-size:17px; }
.hero { position:relative; min-height:calc(100vh - 92px); padding:clamp(54px,10vw,145px) clamp(24px,9.4vw,150px) 84px; display:grid; grid-template-columns:minmax(380px,1fr) minmax(400px,.85fr); gap:35px; overflow:hidden; }
.hero-copy { position:relative; z-index:2; }.eyebrow,.section-label { margin:0; color:#54706a; font:500 11px var(--mono); letter-spacing:.06em; text-transform:uppercase; }.eyebrow span { display:inline-block; width:18px; height:2px; margin:0 8px 3px 0; background:#e5573e; }
h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:var(--display); letter-spacing:-.07em; }
h1 { margin:24px 0 27px; font-size:clamp(65px,8.4vw,142px); line-height:.87; font-weight:800; } h1 em,h2 em { color:#e5573e; font-style:normal; }
.hero-intro { max-width:455px; color:#38514d; line-height:1.6; font-size:18px; }.hero-actions { display:flex; gap:27px; align-items:center; margin-top:36px; }.button { display:inline-flex; align-items:center; gap:23px; padding:15px 18px 15px 21px; border:1px solid var(--ink); font-weight:700; font-size:14px; transition:transform .2s,background .2s; }.button:hover { transform:translateY(-3px); }.button-primary { background:var(--ink); color:var(--cream); }.button-primary span,.button-dark span { color:var(--lime); font-size:21px; }.text-link { border-bottom:1px solid var(--ink); padding-bottom:4px; font-size:14px; font-weight:700; }.text-link span { margin-left:7px; color:#e5573e; }
.hero-art { position:relative; min-height:440px; align-self:center; color:var(--forest); }.hero-seven { position:absolute; z-index:1; top:3%; left:15%; font:800 clamp(255px,31vw,505px)/.75 var(--display); letter-spacing:-.16em; color:var(--lime); }.hero-seven span { color:#e5573e; }.art-orbit { position:absolute; border:1px solid rgba(16,37,41,.22); border-radius:50%; }.orbit-one { width:89%; aspect-ratio:1; top:3%; left:8%; }.orbit-two { width:65%; aspect-ratio:1; top:25%; left:25%; border-color:#e5573e; }.art-line { position:absolute; top:49%; right:0; width:65%; height:1px; background:var(--ink); transform:rotate(-33deg); transform-origin:right; }.hero-art p { position:absolute; z-index:2; bottom:6%; left:3%; margin:0; font:500 11px/1.55 var(--mono); text-transform:uppercase; letter-spacing:.05em; }.art-caption { position:absolute; z-index:2; top:14%; right:1%; font:500 10px/1.55 var(--mono); }.art-caption span { color:#e5573e; }.scroll-note { position:absolute; bottom:34px; left:clamp(24px,5vw,80px); color:#7c8b87; font:500 10px var(--mono); letter-spacing:.1em; text-transform:uppercase; }.scroll-note span { display:inline-block; width:35px; height:1px; vertical-align:middle; margin-right:9px; background:#7c8b87; }
.proof-strip { padding:26px clamp(24px,5vw,80px); display:flex; align-items:center; justify-content:space-between; gap:30px; color:var(--cream); background:var(--forest); }.proof-strip p { margin:0; font:600 13px/1.25 var(--display); letter-spacing:-.03em; }.proof-list { display:flex; align-items:center; gap:24px; font:500 11px var(--mono); letter-spacing:.04em; text-transform:uppercase; }.proof-list i { width:5px; height:5px; background:var(--lime); border-radius:50%; }
.section { padding:clamp(70px,10vw,150px) clamp(24px,9.4vw,150px); }.section-label { padding-bottom:24px; border-bottom:1px solid var(--line); }.section-heading { display:grid; grid-template-columns:1.3fr .7fr; gap:70px; padding:42px 0 58px; }.section h2 { margin-bottom:0; font-size:clamp(48px,5.6vw,88px); line-height:.95; font-weight:800; }.section-heading p { max-width:370px; margin:auto 0 0; color:#526562; font-size:17px; line-height:1.6; }.service-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--ink); }.service-grid article { min-height:343px; padding:26px 34px 25px 0; border-right:1px solid var(--line); }.service-grid article+article { padding-left:34px; }.service-grid article:last-child { border:0; }.service-number { color:#e5573e; font:500 11px var(--mono); }.service-grid h3 { margin:82px 0 13px; font-size:25px; line-height:1; }.service-grid p { max-width:270px; margin-bottom:22px; color:#61726f; font-size:14px; line-height:1.55; }.service-grid ul { padding:0; margin:0; list-style:none; color:#35514c; font:500 10px/2 var(--mono); text-transform:uppercase; }.service-grid li:before { content:"— "; color:#e5573e; }
.feature { display:grid; grid-template-columns:1fr 1fr; gap:7vw; color:var(--cream); background:#e5573e; }.feature .section-label { color:rgba(255,255,255,.72); border-color:rgba(255,255,255,.35); }.feature-kicker { margin:42px 0 13px; color:var(--lime); font:500 11px var(--mono); letter-spacing:.05em; text-transform:uppercase; }.feature h2 { color:var(--cream); }.feature-copy > p:not(.section-label):not(.feature-kicker) { max-width:445px; margin:24px 0 30px; color:#fff3e5; line-height:1.6; }.button-dark { background:var(--ink); border-color:var(--ink); color:var(--cream); }.feature-visual { position:relative; min-height:500px; display:grid; place-items:center; background:var(--ink); overflow:hidden; }.feature-visual:before,.feature-visual:after { content:""; position:absolute; border:1px solid rgba(217,255,112,.22); border-radius:50%; }.feature-visual:before { width:580px; height:580px; }.feature-visual:after { width:380px; height:380px; }.phone { position:relative; z-index:1; width:245px; height:485px; padding:13px 11px; border:5px solid #203f3d; border-radius:31px; background:var(--cream); color:var(--ink); box-shadow:18px 18px 0 rgba(0,0,0,.19); transform:rotate(6deg); }.phone-notch { position:absolute; top:9px; left:calc(50% - 42px); width:84px; height:16px; border-radius:12px; background:#203f3d; }.app-top { display:flex; justify-content:space-between; padding:8px 3px 18px; font:500 7px var(--mono); }.app-top b { font:800 10px var(--display); letter-spacing:-.06em; }.app-body { padding:13px 7px; }.app-body>p { margin-bottom:9px; color:#758581; font:500 7px var(--mono); }.app-body h3 { margin-bottom:21px; font-size:21px; line-height:.94; }.timer-card { position:relative; padding:14px; border-radius:10px; color:var(--cream); background:#1a4842; }.timer-card span,.timer-card small { display:block; font:500 7px var(--mono); }.timer-card span { color:var(--lime); }.timer-card strong { display:block; margin:11px 0 4px; font:600 19px var(--mono); letter-spacing:-.1em; }.timer-card i { position:absolute; right:13px; bottom:14px; font-style:normal; color:var(--lime); }.app-row { display:flex; justify-content:space-between; margin-top:28px; font-size:10px; }.app-row b { color:#e5573e; }.chart { height:52px; display:flex; align-items:end; gap:5px; padding-top:11px; border-bottom:1px solid #c7d0cb; }.chart span { flex:1; background:#d4ded4; }.chart span:nth-child(1){height:22%}.chart span:nth-child(2){height:52%}.chart span:nth-child(3){height:35%}.chart span:nth-child(4){height:82%;background:#e5573e}.chart span:nth-child(5){height:58%}.chart span:nth-child(6){height:91%;background:#1a4842}.chart span:nth-child(7){height:40%}.visual-label { position:absolute; z-index:2; right:23px; bottom:20px; color:var(--lime); font:500 11px/1.3 var(--mono); }.visual-label span { color:rgba(255,255,255,.6); font-size:8px; }
.about { background:#e5e2d9; }.about-main { display:grid; grid-template-columns:1fr 1fr; gap:8vw; padding:43px 0 86px; }.about-main div { padding-top:8px; }.about-main p { max-width:465px; color:#425651; line-height:1.65; }.about-main p+p { margin-top:22px; }.experience-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--ink); }.experience-grid div { display:flex; gap:21px; align-items:center; padding:25px 30px 25px 0; border-right:1px solid var(--line); }.experience-grid div+div { padding-left:30px; }.experience-grid div:last-child { border:0; }.experience-grid strong { color:#e5573e; font:800 clamp(42px,4vw,66px)/1 var(--display); letter-spacing:-.08em; }.experience-grid strong span { color:var(--ink); }.experience-grid p { margin:0; color:#5d706b; font:500 10px/1.4 var(--mono); text-transform:uppercase; }
.contact { position:relative; display:grid; grid-template-columns:1fr 2fr; gap:7vw; padding:clamp(80px,11vw,165px) clamp(24px,9.4vw,150px); overflow:hidden; color:var(--cream); background:var(--ink); }.contact-mark { position:absolute; right:-2%; top:-12%; color:rgba(217,255,112,.055); font:800 380px/.8 var(--display); letter-spacing:-.15em; }.contact .eyebrow { color:#9aaea8; }.contact h2 { position:relative; margin:24px 0 42px; font-size:clamp(48px,5.5vw,84px); line-height:.95; }.contact-email { position:relative; display:inline-block; padding-bottom:7px; border-bottom:1px solid var(--lime); color:var(--lime); font:600 clamp(20px,2.2vw,30px) var(--display); letter-spacing:-.05em; }.contact-email span { margin-left:9px; }.contact-note { position:relative; align-self:end; justify-self:end; max-width:180px; margin:0; color:#a5b6b0; font:500 10px/1.55 var(--mono); text-transform:uppercase; }
footer { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:31px clamp(24px,5vw,80px); color:#59716b; font-size:11px; } footer .brand { color:var(--ink); } footer p { margin:0; font:500 10px/1.5 var(--mono); } footer>a:last-child { padding-bottom:3px; border-bottom:1px solid #94a49f; font-weight:700; }
@media (max-width:800px) { .site-header { height:74px; }.site-header nav { display:none; }.header-cta { font-size:12px; }.hero { min-height:auto; grid-template-columns:1fr; padding-top:70px; }.hero-art { min-height:330px; margin-top:15px; }.hero-seven { font-size:320px; }.proof-strip { display:block; }.proof-list { flex-wrap:wrap; gap:11px; margin-top:18px; font-size:9px; }.proof-list i { margin:0 3px; }.section-heading,.feature,.about-main { grid-template-columns:1fr; gap:30px; }.section-heading { padding-bottom:43px; }.service-grid { grid-template-columns:1fr; }.service-grid article,.service-grid article+article { min-height:0; padding:24px 0 30px; border-right:0; border-bottom:1px solid var(--line); }.service-grid h3 { margin-top:37px; }.feature-visual { min-height:440px; margin:0 -24px -70px; }.experience-grid { grid-template-columns:1fr; }.experience-grid div,.experience-grid div+div { padding:20px 0; border-right:0; border-bottom:1px solid var(--line); }.contact { grid-template-columns:1fr; gap:65px; }.contact-note { justify-self:start; }.contact-mark { font-size:260px; top:-4%; }.scroll-note { display:none; } }
@media (max-width:430px) { .header-cta { display:none; }.hero { padding-top:58px; }.hero-actions { gap:18px; }.hero-seven { left:5%; font-size:280px; }.hero-art p { left:0; }.orbit-one { left:0; }.feature-visual { margin-inline:-24px; }.phone { transform:scale(.86) rotate(6deg); }.contact-email { font-size:20px; } footer { align-items:flex-start; flex-direction:column; gap:17px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.button { transition:none; } }