:root { --ink:#071c2d; --blue:#0871e8; --mist:#e8f1f6; --paper:#f6f2ea; --coral:#ef6d58; --line:rgba(7,28,45,.18); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Manrope, sans-serif; }
.grain { position:fixed; inset:0; pointer-events:none; opacity:.18; z-index:10; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"); }
.site-header { display:flex; justify-content:space-between; align-items:center; padding:26px 5vw; position:absolute; top:0; width:100%; z-index:2; color:#fff; }
.wordmark { color:inherit; font:700 25px/1 Manrope,sans-serif; letter-spacing:-1.8px; text-decoration:none; } .wordmark span { color:#6dd0ff; } .wordmark i { display:inline-block; width:7px; height:7px; background:var(--coral); border-radius:50%; margin:0 0 12px 3px; }
nav { display:flex; align-items:center; gap:28px; font-size:12px; font-weight:700; } nav a { color:inherit; text-decoration:none; } .nav-linkedin { border:1px solid rgba(255,255,255,.55); padding:10px 13px; }
.hero { min-height:790px; overflow:hidden; position:relative; display:grid; grid-template-columns:1.04fr .96fr; background:var(--ink); color:white; padding:150px 10vw 74px; }
.hero-copy { position:relative; z-index:1; align-self:center; } .eyebrow,.section-tag { margin:0 0 22px; text-transform:uppercase; letter-spacing:1.65px; font:500 10px/1.4 'DM Mono',monospace; } .eyebrow { color:#91c8f9; } .eyebrow span { display:inline-block; width:27px; height:1px; background:currentColor; vertical-align:middle; margin-right:8px; }
h1 { margin:0; max-width:630px; font-size:clamp(56px,7.5vw,108px); line-height:.94; letter-spacing:-.075em; font-weight:800; } h1 em,h2 em,.capability h3 em { font-family:'Playfair Display',serif; font-weight:600; letter-spacing:-.07em; }
.intro { max-width:410px; color:#c0d5e4; font-size:16px; line-height:1.7; margin:36px 0 31px; }.text-link { color:white; text-decoration:none; font:500 12px 'DM Mono',monospace; border-bottom:1px solid #70c8fa; padding-bottom:8px; }.text-link b { color:#70c8fa; margin-left:8px; font-size:16px; }
.hero-portrait { position:relative; min-height:530px; align-self:end; display:flex; justify-content:center; align-items:center; } .sun-disc { position:absolute; width:min(37vw,515px); aspect-ratio:1; background:var(--blue); border-radius:50%; right:-5%; top:2%; box-shadow:0 0 0 30px rgba(8,113,232,.08); }.portrait-frame { position:relative; width:min(25vw,340px); aspect-ratio:.76; overflow:hidden; border:1px solid rgba(255,255,255,.5); z-index:1; }.portrait-frame img { width:100%; height:100%; object-fit:cover; object-position:center top; filter:grayscale(1) contrast(1.08); mix-blend-mode:screen; opacity:.95; }.portrait-note { position:absolute; z-index:2; bottom:18px; left:3%; margin:0; background:var(--coral); color:var(--ink); padding:12px 15px; font:500 10px/1.55 'DM Mono',monospace; transform:rotate(-2deg); }.portrait-note span { color:#fff; margin-right:7px; }.hero-index { position:absolute; right:5vw; bottom:37px; color:#85b7e5; font:10px 'DM Mono',monospace; }
.manifesto { padding:135px max(7vw,42px) 125px; display:grid; grid-template-columns:.76fr 1.45fr; gap:7vw; border-bottom:1px solid var(--line); }.section-tag { color:var(--blue); }.manifesto h2,.capabilities h2 { font-size:clamp(36px,4.5vw,68px); line-height:1.02; letter-spacing:-.063em; margin:0; }.manifesto h2 em { color:var(--blue); }.manifesto-body { grid-column:2; max-width:600px; margin:0; color:#405466; font-size:16px; line-height:1.85; }
.capabilities { padding:110px max(7vw,42px) 130px; background:var(--mist); }.capabilities-heading { display:flex; justify-content:space-between; align-items:start; margin-bottom:55px; }.capabilities h2 { max-width:620px; }.capability-grid { display:grid; grid-template-columns:repeat(2,1fr); border-left:1px solid var(--line); border-top:1px solid var(--line); }.capability { position:relative; min-height:345px; padding:27px 28px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.18); }.capability--wide { background:var(--ink); color:white; }.capability--closing { background:var(--coral); color:var(--ink); }.cap-number { font:10px 'DM Mono',monospace; color:#658294; }.capability--wide .cap-number { color:#91c8f9; }.capability--closing .cap-number { color:#70403a; }.capability h3 { margin:49px 0 16px; font-size:clamp(28px,3vw,44px); line-height:.98; letter-spacing:-.065em; }.capability p { max-width:290px; color:#587080; font-size:13px; line-height:1.65; }.capability--wide p { color:#bed4e4; }.capability--closing p { color:#5e3834; }.symbol { position:absolute; right:28px; bottom:24px; color:#76c5f5; font-size:56px; line-height:1; }.cloud-symbol,.lock-symbol { color:var(--blue); }.capability--closing a { position:absolute; right:28px; bottom:28px; color:inherit; text-decoration:none; font:500 11px 'DM Mono',monospace; border-bottom:1px solid currentColor; padding-bottom:7px; }
footer { min-height:126px; padding:31px 5vw; display:flex; align-items:center; justify-content:space-between; gap:25px; background:#050e16; color:#8aa2b1; font:10px 'DM Mono',monospace; letter-spacing:.55px; } footer p { margin:0; } footer p span { color:var(--coral); padding:0 6px; } footer a { color:#d8eaf5; text-decoration:none; }
@media (max-width:700px) { .site-header { padding:21px 24px; } nav { gap:16px; } nav a:not(.nav-linkedin) { display:none; }.hero { min-height:730px; display:block; padding:127px 26px 50px; }.hero-copy { position:relative; z-index:2; }.intro { font-size:14px; max-width:330px; margin:28px 0 23px; }.hero-portrait { position:absolute; right:-45px; bottom:-34px; width:70%; min-height:410px; }.sun-disc { width:330px; top:0; right:-30px; }.portrait-frame { width:215px; }.portrait-note { left:-32px; bottom:24px; }.hero-index { right:25px; bottom:25px; }.manifesto { padding:78px 26px; display:block; }.manifesto h2 { font-size:40px; }.manifesto-body { margin-top:32px; font-size:14px; }.capabilities { padding:72px 26px 82px; }.capabilities-heading { display:block; }.capabilities-heading h2 { font-size:39px; }.capability-grid { display:block; }.capability { min-height:280px; }.capability h3 { font-size:36px; margin-top:43px; } footer { padding:27px 25px; flex-wrap:wrap; }.capability--closing a { right:25px; } }