:root { --ink:#111111; --paper:#f5f4ef; --muted:#73736d; --line:#d8d7d0; --coral:#ff5b45; --blue:#9dc4d8; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'Manrope',sans-serif; line-height:1.5; }
a { color:inherit; text-decoration:none; }
.site-shell { max-width:1440px; margin:auto; padding:0 5vw; overflow:hidden; }
.nav { height:92px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:9px; font-size:20px; font-weight:800; letter-spacing:-.06em; }
.brand-mark { color:var(--coral); font-size:19px; line-height:1; }
.nav-links { display:flex; gap:36px; font-family:'DM Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.nav-links a:hover,.text-link:hover { color:var(--coral); }
.nav-cta,.button { display:inline-flex; align-items:center; gap:18px; padding:13px 17px; font-size:12px; font-weight:700; border:1px solid var(--ink); transition:.2s ease; }
.nav-cta:hover { background:var(--ink); color:var(--paper); }
.hero { min-height:650px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:5vw; padding:76px 0 84px; }
.eyebrow,.mono { font-family:'DM Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); }
.eyebrow { display:flex; align-items:center; gap:9px; }
.live-dot { width:7px; height:7px; background:var(--coral); border-radius:50%; display:inline-block; box-shadow:0 0 0 4px rgba(255,91,69,.12); }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(58px,8vw,120px); line-height:.91; letter-spacing:-.09em; font-weight:600; margin:30px 0; }
h1 em,h2 em { color:var(--coral); font-style:normal; }
.hero-description { color:var(--muted); font-size:16px; max-width:420px; line-height:1.65; }
.hero-actions { display:flex; align-items:center; gap:28px; margin-top:34px; }
.button-primary { background:var(--ink); color:var(--paper); }
.button-primary:hover { background:var(--coral); border-color:var(--coral); color:var(--ink); }
.text-link { font-size:12px; font-weight:700; border-bottom:1px solid var(--ink); padding-bottom:4px; }
.hero-art { position:relative; width:min(100%,520px); aspect-ratio:1; margin:auto; background:var(--ink); border-radius:50%; overflow:hidden; }
.hero-art:before,.hero-art:after { content:''; position:absolute; inset:12%; border:1px solid rgba(245,244,239,.14); border-radius:50%; }
.hero-art:after { inset:28%; border-color:rgba(255,91,69,.4); }
.orbit { position:absolute; width:90%; height:30%; left:5%; top:35%; border:1px solid var(--blue); border-radius:50%; transform:rotate(-32deg); opacity:.8; }
.orbit-two { transform:rotate(32deg); border-color:var(--coral); opacity:.7; }.orbit-three { width:55%; height:90%; left:22.5%; top:5%; transform:none; border-color:rgba(245,244,239,.22); }
.core { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:112px; height:112px; display:grid; place-items:center; background:var(--coral); border-radius:50%; font-size:52px; font-weight:800; letter-spacing:-.15em; padding-right:8px; box-shadow:0 0 0 12px rgba(255,91,69,.1); }
.node { position:absolute; font-family:'DM Mono',monospace; color:var(--paper); font-size:10px; display:flex; flex-direction:column; gap:4px; }.node small { color:var(--coral); }.node-top { top:15%; left:45%; }.node-right { right:11%; top:48%; }.node-bottom { bottom:15%; left:42%; }.signal { position:absolute; bottom:9%; left:9%; color:var(--muted); font:10px 'DM Mono',monospace; }
.proof-strip { display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 0; color:var(--muted); font-size:12px; }.proof-strip p { margin:0; }.proof-items { display:flex; gap:clamp(18px,4vw,60px); font:10px 'DM Mono',monospace; letter-spacing:.08em; }
.section { padding:140px 0; }.section-heading { display:grid; grid-template-columns:1fr 1.5fr 1fr; align-items:end; gap:32px; margin-bottom:70px; }.section-heading h2,.approach h2 { font-size:clamp(45px,6vw,82px); line-height:.98; letter-spacing:-.08em; font-weight:600; margin:0; }.section-heading h2 span,.approach h2 span { color:var(--coral); }.section-intro { color:var(--muted); font-size:14px; line-height:1.7; max-width:270px; margin:0; }
.service-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.service-card { padding:28px 24px 34px; min-height:330px; border-right:1px solid var(--line); display:flex; flex-direction:column; }.service-card:last-child { border-right:0; }.service-card.featured { background:var(--ink); color:var(--paper); }.service-number { font:10px 'DM Mono',monospace; color:var(--coral); }.service-icon { font-size:32px; font-weight:300; margin:32px 0 18px; }.service-card h3 { font-size:25px; line-height:1.03; letter-spacing:-.06em; margin-bottom:16px; }.service-card p { color:var(--muted); font-size:12px; line-height:1.7; max-width:220px; }.service-card a { margin-top:auto; font:11px 'DM Mono',monospace; color:var(--coral); }.service-card a span { margin-left:8px; }
.approach { display:grid; grid-template-columns:1fr 2.5fr; gap:10vw; background:var(--blue); margin:0 -5vw; padding-left:5vw; padding-right:5vw; }.approach .eyebrow { color:var(--ink); }.approach-label { display:flex; flex-direction:column; }.vertical-line { height:100px; border-left:1px solid rgba(17,17,17,.35); margin:35px 0 22px; }.approach-content { display:flex; justify-content:space-between; align-items:flex-end; gap:60px; }.steps { width:43%; }.step { display:grid; grid-template-columns:42px 1fr; gap:16px; border-top:1px solid rgba(17,17,17,.3); padding:20px 0; }.step > span { font:10px 'DM Mono',monospace; }.step h3 { font-size:17px; letter-spacing:-.04em; margin-bottom:5px; }.step p { font-size:12px; color:#454e4f; margin:0; }
.contact { padding:140px 0; display:flex; justify-content:space-between; align-items:end; gap:8vw; }.contact-intro { flex:1; }.contact h2 { font-size:clamp(66px,10vw,140px); line-height:.85; letter-spacing:-.1em; font-weight:600; margin:28px 0 0; }.contact-note { color:var(--muted); font-size:13px; line-height:1.7; max-width:300px; margin:38px 0 0; }.contact-form { width:min(100%,430px); display:grid; gap:18px; }.contact-form label { display:grid; gap:8px; }.contact-form label span { font:10px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }.contact-form input,.contact-form select,.contact-form textarea { width:100%; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); padding:10px 0; border-radius:0; font:14px 'Manrope',sans-serif; outline:none; }.contact-form textarea { resize:vertical; min-height:90px; }.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus { border-color:var(--coral); }.contact-form select { appearance:none; }.contact-form option { background:var(--paper); }.form-submit { justify-content:space-between; width:100%; margin-top:8px; cursor:pointer; }.form-status { min-height:20px; color:var(--coral); font:10px 'DM Mono',monospace; margin:0; }
footer { border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:26px 0 40px; } footer p { margin:0; }
@media (max-width:800px) { .site-shell { padding:0 6vw; }.nav { height:76px; }.nav-links { display:none; }.hero { grid-template-columns:1fr; padding:60px 0; }.hero-art { width:min(100%,430px); }.proof-strip,.proof-items { align-items:flex-start; flex-direction:column; gap:16px; }.proof-items { flex-direction:row; flex-wrap:wrap; }.section { padding:90px 0; }.section-heading { grid-template-columns:1fr; gap:20px; margin-bottom:40px; }.service-grid { grid-template-columns:1fr 1fr; }.service-card:nth-child(2) { border-right:0; }.service-card:nth-child(3),.service-card:nth-child(4) { border-top:1px solid var(--line); }.approach { display:block; margin:0 -6vw; padding-left:6vw; padding-right:6vw; }.approach-content { display:block; }.steps { width:100%; margin-top:50px; }.contact { display:block; padding:100px 0; }.contact-form { width:100%; margin-top:60px; }.contact-button { display:inline-block; margin-top:55px; } }
@media (max-width:480px) { h1 { font-size:58px; }.hero-actions { align-items:flex-start; flex-direction:column; gap:20px; }.service-grid { grid-template-columns:1fr; }.service-card,.service-card:nth-child(2),.service-card:nth-child(3) { border-right:0; border-top:1px solid var(--line); }.service-card:first-child { border-top:0; }.service-card { min-height:280px; }.contact h2 { font-size:76px; } footer { align-items:flex-start; flex-direction:column; gap:18px; } }