@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root { --ink:#08090a; --paper:#fff; --wash:#f0f1f2; --line:#b8b9bb; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--wash); color:var(--ink); font-family:'DM Sans',Arial,sans-serif; }
.page-shell { max-width:1440px; margin:auto; padding:16px; }
.panel { position:relative; overflow:hidden; background:var(--paper); }
.hero { min-height:735px; }
.site-header { position:relative; z-index:5; display:flex; align-items:flex-start; justify-content:space-between; padding:30px 43px; }
.site-header nav { display:flex; align-items:center; gap:42px; padding-top:8px; }
.site-header nav a { color:var(--ink); text-decoration:none; text-transform:uppercase; font-family:Manrope,sans-serif; font-size:11px; letter-spacing:-.35px; position:relative; white-space:nowrap; }
.site-header nav a.active::after { content:''; position:absolute; height:2px; width:33px; background:var(--ink); left:0; bottom:-11px; }
.mark { display:block; width:84px; height:61px; overflow:hidden; color:var(--ink); text-decoration:none; }
.mark img { display:block; width:84px; height:61px; object-fit:contain; }
.hero-copy { position:relative; z-index:3; margin:85px 0 0 43px; }
.eyebrow { margin:0 0 32px; font:500 12px/1.1 Manrope,sans-serif; letter-spacing:5px; text-transform:uppercase; }
.eyebrow b { display:inline-block; width:43px; height:1px; background:var(--ink); margin:0 0 4px 19px; }
h1,h2 { margin:0; font-family:Manrope,Arial,sans-serif; font-weight:700; letter-spacing:-2.2px; line-height:.98; }
h1 { font-size:59px; }
h2 { font-size:43px; }
.lead { margin:25px 0 30px; font-size:20px; line-height:1.5; letter-spacing:-.5px; }
.button { display:flex; align-items:center; justify-content:space-between; width:245px; padding:20px 21px; color:white; background:#08090a; text-transform:uppercase; font:700 11px Manrope,sans-serif; letter-spacing:1.6px; text-decoration:none; transition:transform .2s,background .2s; }
.button:hover { transform:translateY(-3px); background:#303238; }.button span { color:#fff; font:28px/10px Arial; letter-spacing:0; }
.hero .button { justify-content:center; width:255px; border-radius:999px; color:var(--ink); background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(244,245,247,.48)); border:1px solid rgba(8,9,10,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 9px 20px rgba(8,9,10,.12); backdrop-filter:blur(8px); }
.hero .button:hover { background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(245,246,248,.72)); border-color:rgba(8,9,10,.28); box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 12px 24px rgba(8,9,10,.16); }
.hero .button span { color:var(--ink); }
.contact .button { justify-content:center; width:230px; border-radius:999px; background:linear-gradient(145deg,#24262b,#060708 68%); border:1px solid rgba(255,255,255,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 9px 20px rgba(8,9,10,.22); }
.contact .button:hover { background:linear-gradient(145deg,#34373e,#101216 68%); box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 24px rgba(8,9,10,.28); }
.portrait { position:absolute; z-index:2; overflow:hidden; filter:grayscale(1) contrast(1.04); }
.portrait img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; mix-blend-mode:multiply; }
.portrait-hero { width:600px; height:655px; left:30%; bottom:0; background:transparent; overflow:visible; }
.portrait-hero img { object-fit:contain; object-position:center bottom; transform:none; mix-blend-mode:normal; }
.glow { pointer-events:none; position:absolute; background:radial-gradient(circle at center,rgba(239,69,238,.9) 0,rgba(147,129,255,.65) 25%,rgba(57,152,255,.65) 45%,rgba(255,255,255,0) 70%); filter:blur(10px); }
.glow-hero { z-index:0; right:-130px; top:-100px; width:620px; height:820px; opacity:.85; }
.diagonal { pointer-events:none; position:absolute; z-index:1; width:3px; background:white; transform:rotate(45deg); transform-origin:center; box-shadow:0 0 5px rgba(255,255,255,.8); }
.diagonal-hero { height:800px; right:181px; top:-67px; }
.side-slogan { position:absolute; z-index:2; right:45px; bottom:76px; font:500 20px/1.65 Manrope,sans-serif; letter-spacing:5px; text-transform:uppercase; }.side-slogan b { display:block; width:44px; height:1px; background:var(--ink); margin-top:22px; }
.grid-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }.grid-row>.panel { min-height:620px; }.contact-row { grid-template-columns:1fr; }
.compact { padding:30px 43px; }.compact nav { gap:36px; padding-top:7px; }.compact nav a { font-size:10px; }.compact .mark { transform:scale(.86); transform-origin:left top; }
.about-copy,.services-copy,.contact-copy { position:relative; z-index:3; margin-left:43px; }.about-copy { width:70%; margin-top:64px; }.about-copy .eyebrow,.services-copy .eyebrow,.contact-copy .eyebrow { margin-bottom:27px; }.about-copy p:not(.eyebrow),.services-copy>p:not(.eyebrow),.contact-copy>p:not(.eyebrow) { font-size:17px; line-height:1.43; letter-spacing:-.45px; }
.about-copy p:not(.eyebrow) { margin-top:26px; }.text-link { display:flex; gap:26px; align-items:center; margin-top:58px; font:500 11px Manrope,sans-serif; letter-spacing:1px; text-transform:uppercase; color:var(--ink); text-decoration:none; }.text-link b { display:block; width:29px; height:1px; background:var(--ink); }
.services-copy { width:54%; margin-top:38px; }.services-copy>p:not(.eyebrow) { margin:26px 0 25px; }.services ul { list-style:none; margin:0; padding:0; font-size:16px; line-height:2.2; }.services li:before { content:''; display:inline-block; vertical-align:middle; width:31px; height:1px; margin-right:28px; background:var(--ink); }.service-visual { position:absolute; right:0; top:99px; height:521px; width:37%; background:linear-gradient(125deg,#e2e4e8 0%,#868b95 40%,#111722 73%); overflow:hidden; }.service-visual:before { content:''; position:absolute; width:100%; height:100%; background:repeating-linear-gradient(145deg,transparent 0 45px,rgba(0,0,0,.32) 46px 47px); }.service-visual span { position:absolute; width:2px; height:120%; top:-10%; left:58%; background:#ff68f5; box-shadow:0 0 16px 5px #fd46ef; }.service-visual i { position:absolute; width:130%; height:2px; bottom:70px; left:-25%; background:#9b8aff; box-shadow:0 0 16px 5px #69a7ff; }.service-visual em { position:absolute; width:24px; height:85px; bottom:45px; left:48%; background:#111; border-radius:50% 50% 6px 6px; box-shadow:-9px 72px 0 -7px #111,9px 72px 0 -7px #111; transform:skew(-12deg); }
.contact-copy { margin-top:67px; }.contact-copy h2 { margin-bottom:18px; }.contact-detail { display:block; width:max-content; color:var(--ink); text-decoration:none; font-size:17px; line-height:1.45; }.contact-detail:first-of-type { margin-top:34px; }.linkedin { display:block; width:max-content; color:var(--ink); margin:15px 0 26px; font:800 31px/1 Arial; text-decoration:none; letter-spacing:-3px; }.glow-contact { z-index:0; width:520px; height:650px; right:-100px; bottom:-100px; }.diagonal-contact { height:760px; right:180px; bottom:-161px; }
footer { min-height:127px; background:white; margin-top:16px; padding:0 43px; display:flex; align-items:center; gap:26px; text-transform:uppercase; font:500 12px/1.25 Manrope,sans-serif; letter-spacing:2px; } footer i { flex:1; height:1px; background:var(--ink); } footer span:last-child { width:175px; }
@media (max-width:950px) { .page-shell{padding:9px}.grid-row{gap:9px;margin-top:9px}.site-header{padding:25px}.site-header nav{gap:18px}.portrait-hero{left:22%;opacity:.82}.side-slogan{right:25px}.compact{padding:25px}.compact nav{gap:16px}.about-copy,.services-copy,.contact-copy{margin-left:25px}.service-visual{opacity:.75}.about-copy{width:70%}h1{font-size:52px}h2{font-size:38px} }
@media (max-width:700px) { .page-shell{padding:0}.hero{min-height:750px}.site-header{padding:25px 22px}.site-header nav{gap:15px; flex-wrap:wrap; justify-content:flex-end}.site-header nav a{font-size:9px}.site-header nav a.active:after{bottom:-7px}.hero-copy{margin:73px 22px 0}.eyebrow{font-size:10px;letter-spacing:3px}h1{font-size:47px;letter-spacing:-1.8px}.lead{font-size:16px}.portrait-hero{width:420px;height:505px;right:-95px;left:auto;opacity:.55}.side-slogan{display:none}.glow-hero{right:-285px}.diagonal-hero{right:71px}.grid-row{grid-template-columns:1fr;margin-top:8px;gap:8px}.grid-row>.panel{min-height:590px}.compact{padding:22px}.compact nav{display:none}.about-copy,.services-copy,.contact-copy{margin-left:22px}.about-copy{width:70%;margin-top:55px}.about-copy p:not(.eyebrow),.services-copy>p:not(.eyebrow),.contact-copy>p:not(.eyebrow){font-size:15px}.services-copy{width:59%;margin-top:65px}.service-visual{width:40%;opacity:.56}.contact-copy{margin-top:82px}.diagonal-contact{right:58px}footer{margin-top:8px;min-height:90px;padding:0 22px;font-size:9px;letter-spacing:1.2px}footer span:last-child{width:120px}.button{width:231px} }