:root { --ink:#111215; --paper:#f3f3ef; --soft:#e6e7e0; --acid:#d5ff36; --muted:#72736e; --line:rgba(17,18,21,.16); --mono:"DM Mono",monospace; --sans:"Manrope",sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); } a { color:inherit; text-decoration:none; } ::selection { color:var(--ink); background:var(--acid); }
.site-header { width:100%; height:82px; padding:0 4vw; position:absolute; z-index:10; display:flex; align-items:center; justify-content:space-between; } .brand { font-size:1.5rem; font-weight:800; letter-spacing:-.09em; } .brand span { margin-left:4px; font:500 .5rem var(--mono); vertical-align:top; letter-spacing:0; } .main-nav { display:flex; gap:2.25rem; font:500 .64rem var(--mono); text-transform:uppercase; letter-spacing:.02em; } .main-nav a { padding:8px 0; transition:opacity .2s; } .main-nav a:hover { opacity:.45; } .header-cta { padding:10px 0 7px; border-bottom:1px solid currentColor; font:500 .64rem var(--mono); text-transform:uppercase; }
.section { padding-left:4vw; padding-right:4vw; }.hero { min-height:100svh; padding-top:max(170px,23vh); position:relative; overflow:hidden; background:var(--paper); }.hero::before { content:""; position:absolute; inset:0; opacity:.42; pointer-events:none; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(to bottom,black,transparent 78%); }.eyebrow,.section-label,.section-heading { font:500 .62rem var(--mono); letter-spacing:.03em; }.eyebrow { position:relative; display:inline-flex; align-items:center; gap:.5rem; padding:7px 10px; border:1px solid var(--line); border-radius:99px; background:rgba(243,243,239,.72); }.eyebrow span { color:#85a300; }.hero-title { position:relative; z-index:1; max-width:940px; margin:2.2rem 0 0; font-size:clamp(3.4rem,8.1vw,8.4rem); line-height:.88; letter-spacing:-.095em; font-weight:700; }.hero-title em,h2 em { font-style:normal; font-weight:400; color:var(--muted); }.hero-bottom { width:min(470px,52%); position:absolute; z-index:2; left:4vw; bottom:3.5rem; display:flex; align-items:end; justify-content:space-between; gap:2rem; }.hero-bottom p { max-width:280px; margin:0; font-size:.84rem; line-height:1.65; }.round-link { width:52px; height:52px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--ink); font-size:1.3rem; transition:background .2s,color .2s,transform .2s; }.round-link:hover { color:var(--ink); background:var(--acid); transform:rotate(-35deg); }.hero-index { position:absolute; right:4vw; bottom:1.8rem; z-index:2; color:var(--muted); font:500 .57rem var(--mono); }
.hero-visual { width:min(34vw,480px); min-width:370px; aspect-ratio:.86; position:absolute; z-index:1; right:8vw; top:18%; padding:1rem; display:flex; flex-direction:column; color:#eff0eb; background:var(--ink); box-shadow:18px 22px 0 var(--acid); transform:rotate(3deg); }.visual-top,.visual-bottom { display:flex; justify-content:space-between; font:500 .56rem var(--mono); }.visual-top span:last-child { color:var(--acid); }.visual-screen { flex:1; display:flex; flex-direction:column; justify-content:space-between; padding:clamp(2rem,4vw,4rem) .5rem 1.3rem; }.screen-title { font-size:clamp(2.2rem,4vw,4rem); line-height:.88; letter-spacing:-.09em; }.screen-title b { color:var(--acid); font-weight:400; }.screen-card { min-height:150px; padding:1rem; position:relative; display:flex; flex-direction:column; color:var(--ink); background:#eef0e6; }.screen-card span { font:500 .58rem var(--mono); }.screen-card strong { margin-top:auto; font-size:1.3rem; line-height:.95; letter-spacing:-.06em; }.screen-card i { position:absolute; top:1rem; right:1rem; font-style:normal; font-size:1.2rem; }
.intro { padding-top:10rem; padding-bottom:10rem; color:#f2f3ed; background:var(--ink); }.intro-content { display:grid; grid-template-columns:1.4fr .6fr; gap:7vw; margin-top:7rem; }.intro h2,.services h2,.contact h2 { margin:0; font-size:clamp(2.7rem,5.6vw,6rem); line-height:.92; letter-spacing:-.08em; }.intro h2 em { color:var(--acid); }.intro-copy { padding-top:.4rem; }.intro-copy p { max-width:290px; margin:0 0 2rem; font-size:.92rem; line-height:1.75; color:#c4c5c0; }.text-link { display:inline-block; padding-bottom:7px; border-bottom:1px solid currentColor; font:500 .65rem var(--mono); text-transform:uppercase; }.text-link span,.contact-email span { margin-left:.25rem; font-size:1.15em; }
.projects { padding-top:9rem; padding-bottom:9rem; }.section-heading { display:flex; justify-content:space-between; margin-bottom:3.2rem; }.section-heading p { margin:0; }.project { margin-bottom:4rem; }.project-art { height:clamp(320px,51vw,720px); position:relative; overflow:hidden; }.project-meta { display:flex; justify-content:space-between; padding-top:1.15rem; font:.6rem var(--mono); text-transform:uppercase; }.project-meta h3 { margin:0 0 .4rem; font:700 .95rem var(--sans); text-transform:none; letter-spacing:-.04em; }.project-meta p { margin:0; opacity:.6; }.project-meta > span { color:var(--muted); }.project-description { max-width:570px; margin:2.2rem 0 0; font-size:.92rem; line-height:1.75; }.art-riftwhere { padding:1.3rem; display:flex; flex-direction:column; color:#eff1ec; background:#171a1b; }.rift-topbar,.rift-footer { display:flex; justify-content:space-between; font:500 .58rem var(--mono); }.rift-topbar span:first-child { font:700 1rem var(--sans); letter-spacing:-.07em; }.rift-content { flex:1; display:grid; grid-template-columns:1.25fr .75fr; align-items:end; gap:2rem; padding:clamp(2rem,8vw,7rem) 9% 4%; }.rift-content > p { margin:0; font-size:clamp(3rem,7vw,7rem); line-height:.83; letter-spacing:-.1em; }.rift-content > p b { font-weight:400; color:var(--acid); }.rift-card { min-height:240px; padding:1.2rem; position:relative; display:flex; flex-direction:column; color:var(--ink); background:var(--acid); }.rift-card span { font:500 .58rem var(--mono); }.rift-card strong { margin-top:auto; font-size:clamp(1.15rem,2vw,1.8rem); line-height:.95; letter-spacing:-.07em; }.rift-card i { position:absolute; top:1rem; right:1rem; font-style:normal; font-size:1.4rem; }.project-grid { display:grid; grid-template-columns:1fr 1fr; gap:2vw; }.project-grid .project-art { height:clamp(270px,34vw,500px); }.art-ui-system { padding:1.3rem; background:#daddd5; }.ui-label { font:500 .58rem var(--mono); }.ui-window { position:absolute; inset:14% 12%; padding:1.3rem; display:flex; flex-direction:column; background:#f8f9f5; border:1px solid #c5c8c0; box-shadow:12px 12px 0 var(--ink); }.ui-window i { width:7px; height:7px; display:inline-block; margin:0 3px 1rem 0; border-radius:50%; background:var(--ink); }.ui-window b { margin:auto 0; font-size:clamp(1.4rem,3vw,3rem); line-height:.92; letter-spacing:-.08em; font-weight:500; }.ui-window em { padding:.6rem .8rem; align-self:flex-start; color:var(--ink); background:var(--acid); font:500 .58rem var(--mono); font-style:normal; }.project-note { min-height:clamp(270px,34vw,500px); padding:1.3rem; display:flex; flex-direction:column; color:#edf0e8; background:var(--ink); }.project-note span { font:500 .58rem var(--mono); color:var(--acid); }.project-note p { margin:auto 0; font-size:clamp(1.6rem,3.5vw,3.5rem); line-height:.93; letter-spacing:-.08em; }.all-work { margin-top:1rem; }
.services { padding-top:9rem; padding-bottom:9rem; background:var(--soft); }.services-head { display:grid; grid-template-columns:.8fr 1.2fr; }.services h2 em { color:var(--muted); }.service-list { margin:6rem 0 0; padding:0; list-style:none; border-top:1px solid var(--line); }.service-list li { min-height:120px; display:grid; grid-template-columns:.25fr 1fr 1fr auto; align-items:center; gap:1.5rem; border-bottom:1px solid var(--line); transition:padding .25s,background .25s; }.service-list li:hover { padding-left:1rem; background:var(--acid); }.service-list span,.service-list p { font:.62rem var(--mono); }.service-list h3 { margin:0; font-size:1.3rem; letter-spacing:-.05em; }.service-list p { max-width:260px; margin:0; line-height:1.5; }.service-list b { font-size:1.3rem; font-weight:400; }
.contact { min-height:88svh; padding-top:9rem; display:flex; flex-direction:column; color:#f0f2eb; background:var(--ink); }.contact .section-label { color:var(--acid); }.contact h2 { margin:4rem 0; }.contact h2 em { color:var(--acid); }.contact-email { width:max-content; max-width:100%; padding-bottom:8px; border-bottom:2px solid var(--acid); color:var(--acid); font-size:clamp(1.5rem,3.5vw,3.8rem); letter-spacing:-.07em; font-weight:700; }.contact-footer { margin-top:auto; padding:2.2rem 0; display:flex; justify-content:space-between; border-top:1px solid rgba(240,242,235,.25); font:500 .6rem var(--mono); text-transform:uppercase; }.contact-footer p { margin:0; }.contact-footer div { display:flex; gap:1.4rem; }.contact-footer a:hover { color:var(--acid); }
.menu-toggle { display:none; }.reveal { opacity:0; transform:translateY(18px); transition:opacity .7s ease,transform .7s ease; }.reveal.visible { opacity:1; transform:none; }
.art-riftwise { padding:1.3rem; display:flex; flex-direction:column; color:#161817; background:var(--acid); }.riftwise-top { display:flex; justify-content:space-between; font:500 .58rem var(--mono); }.riftwise-mark { flex:1; display:flex; align-items:center; justify-content:center; font-size:clamp(8rem,20vw,18rem); line-height:.7; font-weight:800; letter-spacing:-.19em; }.riftwise-mark span { color:#f6f6f1; }.riftwise-copy { display:flex; align-items:end; justify-content:space-between; }.riftwise-copy p { margin:0; font-size:clamp(1.1rem,2.2vw,2rem); line-height:.92; letter-spacing:-.07em; }.riftwise-copy b { color:#616d11; font-weight:400; }.riftwise-copy i { width:35px; height:35px; display:grid; place-items:center; border:1px solid currentColor; border-radius:50%; font-style:normal; }.project-description-compact { font-size:.82rem; }
@media (max-width:760px) { .site-header { height:70px; }.header-cta { display:none; }.menu-toggle { width:38px; height:30px; padding:7px 0; display:flex; flex-direction:column; justify-content:space-between; border:0; background:none; cursor:pointer; }.menu-toggle span { width:100%; height:1px; background:var(--ink); }.main-nav { display:none; position:absolute; top:70px; left:0; right:0; padding:1.5rem 4vw; flex-direction:column; gap:.5rem; background:var(--paper); border-bottom:1px solid var(--line); }.main-nav.open { display:flex; }.hero { min-height:790px; padding-top:140px; }.hero::before { background-size:42px 42px; }.hero-title { max-width:100%; font-size:clamp(3.1rem,14vw,5.4rem); }.hero-visual { width:64vw; min-width:0; right:8vw; top:48%; box-shadow:11px 13px 0 var(--acid); }.visual-screen { padding:2rem .25rem .8rem; }.screen-card { min-height:92px; padding:.7rem; }.screen-card strong { font-size:.85rem; }.hero-bottom { width:92vw; bottom:2.6rem; }.hero-index { display:none; }.intro,.projects,.services { padding-top:6rem; padding-bottom:6rem; }.intro-content,.services-head { grid-template-columns:1fr; margin-top:3.5rem; }.intro-copy { margin-top:1.6rem; }.rift-content { padding:2.3rem 8% 2rem; grid-template-columns:1fr .8fr; }.rift-card { min-height:125px; padding:.75rem; }.project-grid { grid-template-columns:1fr; gap:0; }.project-grid .project-art,.project-note { min-height:66vw; height:66vw; }.project { margin-bottom:3rem; }.service-list { margin-top:3.5rem; }.service-list li { min-height:0; padding:1.5rem 0; grid-template-columns:35px 1fr auto; gap:.8rem; }.service-list p { display:none; }.contact { min-height:74svh; padding-top:6rem; }.contact-footer { flex-wrap:wrap; gap:1.3rem; }.contact-footer > a { width:100%; order:3; } }