:root { --ink:#172f37; --cream:#f3f0e8; --paper:#faf9f5; --line:#cfd4ce; --green:#c7d8af; --accent:#dd714c; --mono:'DM Mono', monospace; --sans:'DM Sans', sans-serif; --serif:'Instrument Serif', Georgia, serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.55; }
a { color:inherit; text-decoration:none; }
.site-header { max-width:1440px; margin:auto; padding:28px 5.6vw; display:flex; align-items:flex-start; justify-content:space-between; }
.brand { font-size:14px; font-weight:700; line-height:1.04; letter-spacing:-.03em; display:flex; gap:10px; }
.brand-mark { display:flex; align-items:flex-end; gap:2px; height:27px; padding-top:7px; }
.brand-mark i { display:block; width:5px; background:var(--accent); } .brand-mark i:nth-child(1){height:8px}.brand-mark i:nth-child(2){height:15px}.brand-mark i:nth-child(3){height:23px}
.contact-link, .text-link { font:500 12px var(--mono); text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid currentColor; padding-bottom:3px; }
.contact-link span,.text-link span { color:var(--accent); font-size:16px; }
main { overflow:hidden; }
.hero { max-width:1440px; margin:auto; min-height:595px; padding:8vh 5.6vw 55px; display:flex; flex-direction:column; justify-content:space-between; }
.eyebrow,.section-label { margin:0; font:500 11px var(--mono); letter-spacing:.07em; text-transform:uppercase; color:#52636a; }
h1,h2,h3,p { margin-top:0; } h1,h2 { letter-spacing:-.055em; font-weight:500; line-height:.94; }
h1 { max-width:1020px; margin:58px 0 40px; font-size:clamp(58px, 9.15vw, 132px); } h1 em,h2 em { font-family:var(--serif); font-weight:400; }
.hero-bottom { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; }
.intro { max-width:500px; font-size:19px; line-height:1.42; letter-spacing:-.025em; margin:0; }
.button { flex:none; background:var(--ink); color:white; padding:15px 20px; font:500 12px var(--mono); text-transform:uppercase; letter-spacing:.04em; transition:background .2s; } .button:hover { background:var(--accent); }.button span { margin-left:20px; font-size:17px; }
.section-grid { display:grid; grid-template-columns:25% minmax(0, 1fr); column-gap:6%; padding:100px 5.6vw; max-width:1440px; margin:auto; }
h2 { font-size:clamp(42px,5vw,72px); margin-bottom:35px; max-width:900px; }.statement h2 { max-width:760px; }.large-copy { font-size:24px; letter-spacing:-.028em; line-height:1.35; max-width:700px; }.statement div > p:last-child,.way-of-working div > p,.project-detail p,.focus p { max-width:690px; font-size:17px; color:#3d5158; }
.way-of-working { background:var(--cream); padding:0 0 95px; }.way-of-working .section-grid { padding-bottom:55px; }.way-of-working h2 { max-width:850px; }.principles { max-width:1280px; margin:0 auto; padding:0 5.6vw; display:grid; grid-template-columns:repeat(3,1fr); gap:0; }.principles article { border-top:1px solid var(--ink); padding:18px 30px 0 0; margin-right:25px; }.principles article + article { padding-left:25px; border-left:1px solid var(--line); }.principles span,.service-list span { font:11px var(--mono); color:var(--accent); }.principles h3 { margin:45px 0 8px; font-size:19px; letter-spacing:-.03em; }.principles p { color:#52636a; max-width:290px; }
.selected-work { border-bottom:1px solid var(--line); }.project-list { display:flex; flex-direction:column; gap:55px; }.project { border-top:2px solid var(--ink); padding-top:17px; }.project-heading { display:grid; grid-template-columns:38% 1fr; gap:30px; }.project-client { font:500 12px var(--mono); text-transform:uppercase; line-height:1.4; letter-spacing:.04em; }.project h2 { font-size:clamp(33px,4.4vw,60px); margin-bottom:55px; }.project-detail { display:grid; grid-template-columns:1fr 1fr; gap:45px; }.project-detail p { font-size:16px; }.project-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; }.project-tags span { font:11px var(--mono); text-transform:uppercase; border:1px solid #91a09a; padding:5px 8px; }
.services { padding:100px 5.6vw; max-width:1440px; margin:auto; }.services .section-grid { padding:0 0 40px; }.services h2 { max-width:700px; }.service-list { list-style:none; margin:0 0 0 31%; padding:0; border-top:1px solid var(--line); }.service-list li { border-bottom:1px solid var(--line); padding:17px 0; display:grid; grid-template-columns:90px 1fr; font-size:20px; letter-spacing:-.025em; line-height:1.3; }
.references { padding:100px 5.6vw; max-width:1440px; margin:auto; border-top:1px solid var(--line); }
.references .section-grid { padding:0 0 40px; }
.references h2 { max-width:700px; }
.reference-grid { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--ink); }
.reference { padding:28px 40px 28px 0; border-bottom:1px solid var(--line); }
.reference:nth-child(odd) { border-right:1px solid var(--line); }
.reference:nth-child(even) { padding-left:40px; }
.reference-quote { font-size:17px; letter-spacing:-.015em; line-height:1.4; color:#3d5158; margin-bottom:18px; }
.reference-name a { font-weight:700; font-size:15px; letter-spacing:-.02em; border-bottom:1px solid var(--line); }
.reference-name a:hover { border-color:var(--accent); color:var(--accent); }
.reference-role { font:11px var(--mono); text-transform:uppercase; letter-spacing:.04em; color:#52636a; margin-top:3px; }
.reference-role a { text-decoration:underline; text-underline-offset:2px; }
.references-more { margin-top:40px; display:inline-flex; align-items:center; gap:6px; }
.linkedin-icon { width:15px; height:15px; flex:none; }
.focus { background:var(--green); padding:100px 5.6vw 110px; display:grid; grid-template-columns:25% minmax(0,1fr); gap:6%; }.focus-label { font:500 11px var(--mono); letter-spacing:.07em; text-transform:uppercase; }.focus h2 { max-width:790px; font-size:clamp(43px,5.5vw,78px); }.focus p { font-size:18px; color:#30464b; }.text-link { display:inline-block; margin-top:17px; font-size:12px; }
.stack { border-top:1px solid var(--line); padding:50px 5.6vw; max-width:1440px; margin:auto; display:flex; align-items:center; flex-wrap:wrap; gap:24px 40px; }
.stack-label { font:11px var(--mono); text-transform:uppercase; letter-spacing:.07em; color:#52636a; margin:0; }
.stack-items { display:flex; gap:32px; flex-wrap:wrap; align-items:center; }
.stack-item { display:flex; align-items:center; gap:8px; color:#7c8a84; transition:color .2s; }
.stack-item svg { width:20px; height:20px; flex:none; }
.stack-item span { font:11px var(--mono); text-transform:uppercase; letter-spacing:.04em; }
.stack-item:hover { color:var(--accent); }
footer { background:var(--ink); color:#f4f0e7; padding:48px 5.6vw 28px; display:grid; grid-template-columns:1.4fr 1fr 1.6fr; gap:20px; font-size:13px; }footer p { margin:0; } footer > a:not(.brand) { text-decoration:underline; text-underline-offset:4px; } .footer-brand .brand-mark i { background:var(--green); }.copyright { grid-column:1/-1; margin-top:75px; border-top:1px solid #40545a; padding-top:15px; color:#aeb8ae; font:11px var(--mono); text-transform:uppercase; }
@media (max-width:700px) { .site-header{padding:22px 6vw}.contact-link{font-size:10px}.hero{min-height:570px;padding:70px 6vw 38px}h1{font-size:clamp(55px,17vw,86px);margin:45px 0}.hero-bottom{align-items:flex-start;flex-direction:column}.intro{font-size:17px}.section-grid,.focus{grid-template-columns:1fr;gap:28px;padding:74px 6vw}.section-label{margin-bottom:0}.statement h2,.way-of-working h2,.services h2,.focus h2{font-size:clamp(40px,12vw,58px)}.large-copy{font-size:21px}.way-of-working{padding-bottom:68px}.way-of-working .section-grid{padding-bottom:38px}.principles{grid-template-columns:1fr;padding:0 6vw}.principles article,.principles article+article{margin:0;padding:18px 0;border-left:0}.principles h3{margin-top:28px}.project-heading,.project-detail{grid-template-columns:1fr;gap:10px}.project h2{margin:18px 0 35px}.project-detail{gap:0}.services{padding:74px 6vw}.services .section-grid{padding:0 0 35px}.service-list{margin:0}.service-list li{grid-template-columns:48px 1fr;font-size:17px;padding:15px 0}.references{padding:74px 6vw}.references .section-grid{padding:0 0 35px}.reference-grid{grid-template-columns:1fr}.reference,.reference:nth-child(odd),.reference:nth-child(even){border-right:0;padding:24px 0}.focus{padding-bottom:80px}.focus p{font-size:17px}footer{grid-template-columns:1fr;padding:42px 6vw 25px;gap:14px}.copyright{margin-top:42px} }