:root { --ink:#1b1b19; --paper:#f3f1ec; --muted:#4e4c46; --line:rgba(27,27,25,.27); --lime:#c7f166; --violet:#6655cf; --serif:Georgia,'Times New Roman',serif; --sans:'Manrope',sans-serif; --mono:'DM Mono',monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; }
.noise { position:fixed; inset:0; z-index:10; pointer-events:none; opacity:.025; 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)'/%3E%3C/svg%3E"); }
.site-header { max-width:1360px; height:92px; margin:auto; padding:0 42px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }.wordmark { color:var(--ink); font-size:1.65rem; font-weight:800; letter-spacing:-.1em; text-decoration:none; }.wordmark span { color:var(--violet); }nav { display:flex; gap:28px; margin-left:108px; }nav a,.header-contact,.text-link { color:var(--ink); font:500 .78rem var(--mono); letter-spacing:.01em; text-decoration:none; }.header-contact { padding-bottom:3px; border-bottom:1px solid var(--ink); }.header-contact span,.text-link span { color:var(--violet); font-size:1rem; }
.section-shell { max-width:1360px; margin:0 auto; padding-left:42px; padding-right:42px; }.hero { position:relative; min-height:calc(100vh - 92px); padding-top:75px; padding-bottom:115px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; }.eyebrow,.section-kicker,.project-type,.art-label { font:500 .74rem/1.4 var(--mono); letter-spacing:.055em; text-transform:uppercase; }.eyebrow { display:flex; align-items:center; gap:9px; margin:0 0 28px; }.live-dot { width:8px; height:8px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 4px rgba(199,241,102,.26); animation:pulse 2.4s infinite; }h1 { max-width:730px; margin:0; font-size:clamp(3.4rem,6.6vw,6.6rem); font-weight:700; line-height:.99; letter-spacing:-.08em; }h1 em { font-family:var(--serif); font-weight:400; letter-spacing:-.1em; }.hero-intro { max-width:550px; margin:34px 0 30px; color:var(--muted); font-size:1.08rem; line-height:1.75; }.hero-actions { display:flex; align-items:center; gap:28px; }.button { display:inline-flex; align-items:center; gap:25px; padding:16px 18px; font:500 .78rem var(--mono); text-decoration:none; transition:transform .25s ease,background .25s ease; }.button-dark { background:var(--ink); color:white; }.button:hover { background:var(--violet); transform:translateY(-3px); }.text-link { display:inline-block; padding-bottom:4px; border-bottom:1px solid var(--line); transition:border .2s; }.text-link:hover { border-color:var(--ink); }
.hero-art { position:relative; min-height:450px; height:min(42vw,570px); max-height:570px; margin-left:8%; overflow:hidden; background:var(--violet); }.art-core { position:absolute; top:32.5%; left:32.5%; width:35%; aspect-ratio:1; border-radius:50%; display:grid; place-content:center; background:var(--lime); font-size:clamp(3rem,5vw,5rem); font-weight:800; letter-spacing:-.17em; transform:rotate(-12deg); }.art-core span { color:var(--violet); }.orbit { position:absolute; top:50%; left:50%; border:1px solid rgba(255,255,255,.56); border-radius:50%; transform:translate(-50%,-50%) rotate(-23deg); }.orbit-one { width:76%; height:31%; }.orbit-two { width:34%; height:88%; }.art-label { position:absolute; margin:0; color:white; }.art-label-top { top:27px; left:28px; }.art-label-bottom { right:28px; bottom:27px; }.data-point { position:absolute; width:9px; height:9px; border-radius:50%; background:var(--lime); }.data-point-one { top:19%; left:29%; }.data-point-two { top:69%; left:24%; background:white; }.data-point-three { top:38%; right:17%; background:white; }.scroll-note { position:absolute; bottom:35px; left:42px; color:var(--muted); font:500 .71rem var(--mono); letter-spacing:.05em; text-decoration:none; text-transform:uppercase; }.scroll-note span { margin-left:8px; color:var(--ink); }
.intro-band { background:var(--ink); color:white; }.intro-grid { display:grid; grid-template-columns:25% 1fr; gap:40px; padding-top:124px; padding-bottom:130px; }.section-kicker { margin:0; color:var(--violet); }.intro-band .section-kicker,.contact-wrap .section-kicker { color:var(--lime); }.large-copy { max-width:930px; margin:0; font-size:clamp(1.75rem,3.1vw,3.15rem); line-height:1.2; letter-spacing:-.065em; }.body-copy { max-width:650px; margin:29px 0 0; color:#e2e0d8; font-size:1rem; line-height:1.8; }
.work-section { padding-top:138px; padding-bottom:140px; }.section-heading { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:47px; }.section-note { margin:0; color:var(--muted); font:500 .76rem var(--mono); }.project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }.project { min-width:0; color:inherit; border:1px solid var(--line); text-decoration:none; transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s; }.project:hover { box-shadow:0 18px 35px rgba(27,27,25,.1); transform:translateY(-7px); }.project-visual { position:relative; height:245px; padding:18px; overflow:hidden; font:500 .75rem var(--mono); }.project-content { padding:23px 24px 21px; }.project-type { margin:0 0 19px; color:var(--muted); }.project h2 { margin:0; font-size:clamp(1.55rem,2.4vw,2.55rem); line-height:1.04; letter-spacing:-.065em; }.project-content > p:not(.project-type) { min-height:91px; margin:20px 0 25px; color:var(--muted); font-size:.9rem; line-height:1.65; }.project-meta { display:flex; justify-content:space-between; gap:12px; padding-top:13px; border-top:1px solid var(--line); font:500 .69rem var(--mono); letter-spacing:.025em; text-transform:uppercase; }.project-meta b { color:var(--violet); font-size:.95rem; }.visual-mitosis { background:#1d1b28; color:white; }.scan-grid { position:absolute; inset:36px 15% 25px; background-image:linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px); background-size:27px 27px; transform:rotate(-8deg); }.scan-cell { position:absolute; width:35px; height:35px; border:1px solid var(--lime); }.cell-a { top:31%; left:34%; }.cell-b { top:47%; right:29%; background:rgba(199,241,102,.3); }.cell-c { bottom:24%; left:47%; }.visual-fluency { background:var(--lime); }.prompt-line { position:absolute; left:13%; height:8px; background:var(--ink); opacity:.85; }.line-one { top:42%; width:49%; }.line-two { top:49%; width:29%; }.score-badge { position:absolute; right:12%; bottom:18%; width:104px; height:104px; border-radius:50%; display:grid; place-content:center; background:var(--violet); color:white; font:700 2.15rem var(--sans); letter-spacing:-.1em; transform:rotate(10deg); }.score-badge span { font:400 .58rem var(--mono); letter-spacing:0; text-align:center; }.visual-archive { background:#d2cee7; }.archive-circle { position:absolute; top:18%; left:24%; width:270px; height:270px; border:1px solid var(--ink); border-radius:50%; }.archive-card { position:absolute; top:22%; right:17%; padding:17px; background:var(--paper); font:400 .65rem var(--mono); line-height:1.1; transform:rotate(9deg); }.archive-card strong { font:700 3.3rem var(--sans); letter-spacing:-.12em; }.visual-price { background:#f2a86e; }.visual-price svg { position:absolute; right:9%; bottom:17%; width:77%; height:auto; color:var(--ink); }.visual-house { background:#9ac9c4; }.house-roof { position:absolute; left:29%; bottom:46%; width:0; height:0; border-left:112px solid transparent; border-right:112px solid transparent; border-bottom:94px solid #1b3936; }.house-body { position:absolute; bottom:14%; left:35%; width:150px; height:106px; padding:20px; display:grid; grid-template-columns:1fr 1fr; gap:15px; background:#f3f1ec; }.house-body i { background:var(--violet); }.visual-portfolio { background:#24231f; color:white; }.browser-frame { position:absolute; inset:52px 14% 27px; padding:34px 19px 18px; border:1px solid rgba(255,255,255,.7); background:#f3f1ec; color:#1b1b19; }.browser-frame i { position:absolute; top:13px; width:6px; height:6px; border-radius:50%; background:var(--violet); }.browser-frame i:nth-child(1) { left:14px; }.browser-frame i:nth-child(2) { left:25px; }.browser-frame i:nth-child(3) { left:36px; }.browser-frame b { font:500 .65rem var(--mono); }.browser-lines { width:68%; height:48px; margin-top:17px; border-top:5px solid var(--violet); border-bottom:5px solid var(--lime); }.all-work { margin-top:45px; }
.tools-section { border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.tools-grid { display:grid; grid-template-columns:25% 1fr; gap:40px; padding-top:75px; padding-bottom:78px; }.tools-grid .section-note { max-width:190px; margin-top:17px; line-height:1.6; }.tool-list { display:flex; flex-wrap:wrap; align-content:start; gap:9px; }.tool-list span { padding:11px 14px; border:1px solid var(--line); font:500 .78rem var(--mono); transition:background .2s,color .2s; }.tool-list span:hover { background:var(--ink); color:white; }
.credentials { padding-top:135px; padding-bottom:142px; }.credential-list { border-top:1px solid var(--line); }.credential-list > * { min-height:110px; display:grid; grid-template-columns:21% 27% 1fr 24px; align-items:center; gap:25px; padding:21px 0; border-bottom:1px solid var(--line); color:inherit; text-decoration:none; }.credential-list a { transition:padding .25s,background .25s; }.credential-list a:hover { padding-left:15px; background:rgba(102,85,207,.07); }.credential-list span { color:#36342f; font:500 .8rem var(--mono); }.credential-list strong { font-size:1rem; line-height:1.4; letter-spacing:-.02em; }.credential-list small { color:var(--muted); font-size:.82rem; line-height:1.55; }.credential-list b { color:var(--violet); font-size:1rem; }.credential-list > div { grid-template-columns:21% 27% 1fr; }
.contact-section { background:var(--violet); color:white; }.contact-wrap { min-height:480px; display:grid; grid-template-columns:25% 1fr auto; gap:40px; align-items:center; }.contact-wrap .section-kicker { align-self:start; margin-top:83px; }.contact-wrap h2 { margin:0 0 14px; font-size:clamp(2.35rem,4.3vw,4.7rem); line-height:1.03; letter-spacing:-.075em; }.contact-wrap p:not(.section-kicker) { max-width:450px; margin:0 0 27px; color:#f4f2ff; font-size:.95rem; line-height:1.65; }.contact-email { padding-bottom:6px; border-bottom:1px solid rgba(255,255,255,.65); color:white; font:500 .84rem var(--mono); text-decoration:none; }.contact-email span { color:var(--lime); }.contact-social { display:flex; flex-direction:column; gap:14px; }.contact-social a { color:white; font:500 .76rem var(--mono); text-decoration:none; }.contact-social a:hover { color:var(--lime); }footer { max-width:1360px; margin:auto; padding:25px 42px; display:flex; justify-content:space-between; color:var(--muted); font:500 .68rem var(--mono); }
.reveal { opacity:1; transform:none; transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1); }.reveal.ready { opacity:0; transform:translateY(22px); }.reveal.visible { opacity:1; transform:translateY(0); }.reveal-delay { transition-delay:.12s; }@keyframes pulse { 50% { box-shadow:0 0 0 8px rgba(199,241,102,0); } }
@media (max-width:760px) { .site-header { height:72px; padding:0 19px; }.site-header nav { display:none; }.header-contact { font-size:.69rem; }.section-shell { padding-right:19px; padding-left:19px; }.hero { display:flex; min-height:auto; padding-top:77px; padding-bottom:90px; }.hero-art,.scroll-note { display:none; }h1 { font-size:clamp(3.2rem,15.4vw,5rem); }.hero-intro { margin:27px 0; font-size:1rem; }.intro-grid,.tools-grid { display:block; padding-top:77px; padding-bottom:79px; }.intro-grid .section-kicker { margin-bottom:29px; }.large-copy { font-size:1.78rem; }.work-section { padding-top:77px; padding-bottom:80px; }.section-heading { display:block; margin-bottom:28px; }.section-heading .section-note { margin-top:13px; }.project-grid { grid-template-columns:1fr; gap:14px; }.project-visual { height:220px; }.project-content > p:not(.project-type) { min-height:0; }.tools-grid .section-note { max-width:290px; margin:14px 0 27px; }.credentials { padding-top:77px; padding-bottom:81px; }.credential-list > *, .credential-list > div { min-height:0; grid-template-columns:1fr 22px; gap:7px; padding:20px 0; }.credential-list span { grid-column:1; font-size:.77rem; }.credential-list strong { grid-column:1; grid-row:2; font-size:.93rem; }.credential-list small { grid-column:1; grid-row:3; margin-top:5px; font-size:.8rem; }.credential-list b { grid-column:2; grid-row:1 / span 3; }.contact-wrap { min-height:460px; display:block; padding-top:68px; padding-bottom:64px; }.contact-wrap .section-kicker { margin:0 0 50px; }.contact-wrap h2 { font-size:2.55rem; }.contact-social { flex-direction:row; flex-wrap:wrap; margin-top:48px; gap:16px 22px; }footer { padding:22px 19px; font-size:.61rem; }.reveal { transform:translateY(15px); } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.reveal { opacity:1; transform:none; transition:none; }.live-dot { animation:none; }.project,.button { transition:none; } }