:root { --ink:#101c2d; --paper:#f3f5f0; --electric:#bfff00; --line:rgba(16,28,45,.18); --muted:#5f6a74; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
main { width:min(100%, 1600px); margin:0 auto; overflow:hidden; background:var(--paper); }
.hero { min-height:100vh; padding:1.4rem clamp(1.25rem,4vw,5rem) 2.5rem; background:var(--ink); color:var(--paper); }
.topbar { max-width:1500px; margin:auto; display:grid; grid-template-columns:1fr 1fr auto; align-items:start; gap:1rem; border-bottom:1px solid rgba(243,245,240,.25); padding-bottom:1rem; }
.wordmark { color:var(--electric); font-size:1.75rem; font-weight:800; letter-spacing:-.11em; text-decoration:none; }.wordmark span { color:var(--paper); }.topbar p { margin:0; text-transform:uppercase; letter-spacing:.08em; font-size:.66rem; line-height:1.55; }.topbar p span { color:#98a3ad; }.contact-link { color:var(--paper); text-decoration:none; font-size:.88rem; }.contact-link span,.button span,.email span { color:var(--electric); }
.hero-grid { max-width:1500px; min-height:calc(100vh - 5rem); margin:auto; display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(2rem,7vw,9rem); align-items:center; }.eyebrow { color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-weight:700; font-size:.68rem; margin:0; }.hero .eyebrow { color:#96a1ad; }.hero h1,.section-heading h2,.services h2,.about h2,.contact h2 { margin:.7rem 0 1.7rem; font-size:clamp(3.1rem,7vw,7rem); font-weight:600; letter-spacing:-.075em; line-height:.87; }.hero h1 em,.contact h2 em { color:var(--electric); font-family:Georgia, serif; font-weight:400; }.lede { max-width:29rem; color:#c1c9cf; font-size:clamp(1rem,1.5vw,1.25rem); line-height:1.55; margin:0 0 2rem; }.button { display:inline-flex; gap:.9rem; align-items:center; background:var(--electric); color:var(--ink); padding:.9rem 1.05rem; text-decoration:none; font-weight:700; font-size:.9rem; }.button span { color:var(--ink); font-size:1.3rem; }.hero-image { margin:0; position:relative; min-height:29rem; display:grid; place-items:center; background:#101c2d; }.hero-image img { width:min(84%,34rem); max-height:75vh; object-fit:contain; z-index:1; }
.proof { padding:2.75rem clamp(1.25rem,4vw,5rem); border-bottom:1px solid var(--line); }.proof .eyebrow { margin-bottom:1.7rem; }.client-list { display:grid; grid-template-columns:repeat(6,1fr); align-items:center; gap:1.6rem 2rem; color:#a5aaab; }.logo { display:block; text-align:center; font-weight:700; font-size:clamp(.85rem,1.6vw,1.45rem); letter-spacing:-.06em; line-height:.9; filter:grayscale(1); }.logo.fellow { font-family:Georgia,serif; font-style:italic; font-weight:700; }.logo.pax { font-weight:900; letter-spacing:-.13em; }.logo.heinz { font-family:Georgia,serif; font-style:italic; font-size:clamp(.85rem,1.45vw,1.25rem); }.logo.nike { letter-spacing:-.1em; font-style:italic; }.logo.lyft { font-weight:900; }.logo.intel { font-family:Georgia,serif; border-bottom:2px solid currentColor; width:max-content; justify-self:center; padding:0 .3rem .1rem; }.logo.google { font-family:Georgia,serif; font-weight:600; }.logo.square { font-weight:500; }.logo.bose { font-weight:900; font-style:italic; letter-spacing:-.11em; }.logo.elemind { font-weight:500; letter-spacing:.08em; font-size:clamp(.68rem,1.1vw,1rem); }.logo.humane { font-weight:500; letter-spacing:.02em; }.logo.amazon { font-family:Georgia,serif; font-weight:700; }.logo.amazon::after { content:"⌣"; display:block; font-family:Arial,sans-serif; margin-top:-.5rem; font-size:1.2em; transform:rotate(-8deg); }
.work { padding:clamp(5rem,11vw,10rem) clamp(1.25rem,4vw,5rem); }.section-heading { display:grid; grid-template-columns:1fr 1.2fr .7fr; gap:2rem; align-items:end; margin-bottom:3rem; }.section-heading h2 { margin:0; font-size:clamp(2.8rem,5vw,5.6rem); }.section-heading > p:last-child { margin:0; color:var(--muted); line-height:1.55; }.work-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }.work-card { min-height:25rem; position:relative; background:#d7ddd9; overflow:hidden; }.work-card img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; transition:transform .5s ease; }.work-card--fellow { background:#e4d9c8; }.work-card--fellow img { object-fit:contain; padding:1.8rem; }.work-card:hover img { transform:scale(1.025); }.work-card--fellow:hover img { transform:scale(1.015); }.work-card div { position:absolute; z-index:1; left:0; right:0; bottom:0; padding:1.5rem; color:white; background:linear-gradient(transparent,rgba(7,15,25,.78)); }.work-card h3 { margin:0; font-size:clamp(1.4rem,2vw,2.15rem); letter-spacing:-.06em; }
.services { padding:clamp(5rem,11vw,10rem) clamp(1.25rem,4vw,5rem); color:var(--paper); background:var(--ink); display:grid; grid-template-columns:.85fr 1.15fr; gap:5rem; }.services h2 { font-size:clamp(2.9rem,5vw,5.4rem); }.services .eyebrow { color:#96a1ad; }.services ol { list-style:none; margin:0; padding:0; }.services li { border-top:1px solid rgba(243,245,240,.25); padding:1.4rem 0 2.2rem; }.services h3 { margin:0 0 .6rem; font-size:clamp(1.4rem,2vw,2.1rem); letter-spacing:-.05em; }.services li p { color:#aab5bd; max-width:33rem; line-height:1.55; margin:0; }
.about { padding:clamp(5rem,11vw,10rem) clamp(1.25rem,10vw,12rem); display:grid; grid-template-columns:minmax(11rem,.55fr) 1.45fr; align-items:center; gap:clamp(2rem,8vw,10rem); }.portrait { aspect-ratio:1; border-radius:50%; overflow:hidden; background:#d8dad4; }.portrait img { width:100%; height:100%; object-fit:cover; }.about h2 { font-size:clamp(2.3rem,4.5vw,4.8rem); margin-bottom:1.5rem; }.about-copy > p:last-child { color:var(--muted); max-width:40rem; line-height:1.65; font-size:1.05rem; }
.contact { padding:clamp(5rem,10vw,9rem) clamp(1.25rem,4vw,5rem) 1.7rem; background:var(--electric); min-height:72vh; display:flex; flex-direction:column; }.contact .eyebrow { color:#274216; }.contact h2 { margin-bottom:auto; font-size:clamp(4.5rem,11vw,11rem); }.contact h2 em { color:var(--ink); }.email { color:var(--ink); font-size:clamp(1.15rem,2.4vw,2.6rem); font-weight:650; letter-spacing:-.05em; text-decoration:none; border-bottom:1px solid rgba(16,28,45,.38); padding-bottom:.45rem; align-self:flex-start; }.email span { color:var(--ink); } footer { display:flex; justify-content:space-between; gap:1rem; margin-top:3rem; font-size:.73rem; font-weight:650; }
@media (max-width:760px) { .hero { min-height:auto; }.topbar { grid-template-columns:1fr auto; }.topbar p { display:none; }.hero-grid,.services,.about { grid-template-columns:1fr; }.hero-grid { min-height:auto; padding:5rem 0 1rem; }.hero-image { min-height:25rem; }.section-heading { grid-template-columns:1fr; gap:1.25rem; }.client-list { grid-template-columns:repeat(3,1fr); gap:1.5rem .8rem; }.work-grid { grid-template-columns:1fr; }.work-card { min-height:24rem; }.services { gap:2.5rem; }.about { padding-left:clamp(1.25rem,4vw,5rem); padding-right:clamp(1.25rem,4vw,5rem); }.portrait { width:min(14rem,65vw); }.contact { min-height:60vh; } }