:root { --ink:#12211d; --paper:#f4f1e9; --lime:#c8f149; --orange:#ea5d37; --muted:#66716b; --line:rgba(18,33,29,.18); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:Manrope,Arial,sans-serif; } a { color:inherit; } .skip-link { position:absolute; left:-999px; } .skip-link:focus { left:1rem; top:1rem; background:var(--lime); padding:.6rem; z-index:10; }
.site-header { height:82px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(1.3rem,4vw,4.5rem); border-bottom:1px solid var(--line); } .wordmark { font-size:1.65rem; font-weight:800; letter-spacing:-.1em; text-decoration:none; } .wordmark span { color:var(--orange); } nav { display:flex; align-items:center; gap:2rem; font-size:.82rem; font-weight:700; } nav a { text-decoration:none; } .nav-contact { border-bottom:2px solid var(--orange); padding-bottom:.25rem; } .nav-toggle { display:none; border:0; background:transparent; font:700 .8rem Manrope; }
.hero { min-height:calc(100vh - 82px); padding:clamp(2rem,7vw,7rem) clamp(1.3rem,8vw,9rem) 2.5rem; display:flex; flex-direction:column; position:relative; overflow:hidden; } .eyebrow,.section-label,.kicker { text-transform:uppercase; letter-spacing:.12em; font:500 .66rem "DM Mono",monospace; } .eyebrow { color:var(--muted); } h1,h2,h3,p { margin-top:0; } h1 { max-width:900px; margin:clamp(2.5rem,7vw,7rem) 0 0; font-size:clamp(3.9rem,8.9vw,9.5rem); font-weight:700; letter-spacing:-.082em; line-height:.9; } h1 em { font-family:"Playfair Display",serif; font-weight:600; letter-spacing:-.065em; color:var(--orange); } .hero-lower { display:flex; justify-content:space-between; align-items:end; gap:2rem; margin-top:auto; padding-top:5rem; max-width:980px; } .intro { font-size:clamp(1.1rem,1.6vw,1.45rem); line-height:1.48; max-width:500px; } .text-link { font-weight:700; white-space:nowrap; text-decoration-thickness:2px; text-underline-offset:.3em; } .text-link span,.contact-email span { color:var(--orange); font-size:1.25em; } .hero-credibility { display:flex; align-items:baseline; gap:.8rem; margin-top:2rem; padding-top:.8rem; border-top:1px solid var(--line); max-width:560px; } .hero-credibility strong { font:600 1.15rem/1 "Playfair Display",serif; letter-spacing:-.04em; } .hero-credibility span { font:500 .59rem/1.4 "DM Mono",monospace; text-transform:uppercase; color:var(--muted); } .hero-credibility i { color:var(--orange); font-style:normal; }
.proof-band { background:var(--ink); color:var(--paper); display:grid; grid-template-columns:repeat(4,1fr); padding:clamp(1.5rem,4vw,4rem) clamp(1.3rem,8vw,9rem); gap:1rem; } .proof-band div { border-left:1px solid rgba(244,241,233,.25); padding-left:1.1rem; } .proof-band strong { display:block; font:600 clamp(1.8rem,3.4vw,3.5rem)/1 "Playfair Display",serif; color:var(--lime); letter-spacing:-.05em; } .proof-band span { display:block; margin-top:.6rem; max-width:135px; font-size:.72rem; line-height:1.4; color:#c8cec8; }
.section { padding:clamp(4.8rem,10vw,10rem) clamp(1.3rem,8vw,9rem); display:grid; grid-template-columns:minmax(115px,20%) 1fr; gap:2rem; border-bottom:1px solid var(--line); } .section-label { color:var(--orange); } .work-content { max-width:800px; } h2 { font-size:clamp(2.15rem,4.5vw,4.8rem); letter-spacing:-.07em; line-height:.98; } .work-content > p,.case-grid > div > p { max-width:650px; font-size:1.05rem; line-height:1.7; color:#3d4a44; } .focus-list { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2.5rem; } .focus-list span { padding:.55rem .75rem; border:1px solid var(--ink); border-radius:999px; font:500 .68rem "DM Mono",monospace; }
.impact { background:#dbe4d7; border-bottom:0; } .impact-content { max-width:960px; } .impact-content h2 { margin-bottom:3rem; } .impact-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; } .impact-cards article { min-height:270px; display:flex; flex-direction:column; justify-content:flex-end; padding:1.2rem; border:1px solid rgba(18,33,29,.42); } .impact-cards strong { display:block; margin-bottom:auto; font:600 clamp(2.4rem,4vw,4rem)/1 "Playfair Display",serif; letter-spacing:-.06em; color:var(--orange); } .impact-cards h3 { margin:0 0 .6rem; font-size:1rem; } .impact-cards p { margin:0; font-size:.8rem; line-height:1.55; color:#3d4a44; }
.timeline { max-width:900px; } .timeline article { display:grid; grid-template-columns:120px minmax(180px,1fr) 1.1fr; gap:1.5rem; padding:1.5rem 0; border-top:1px solid var(--line); } .timeline article:last-child { border-bottom:1px solid var(--line); } .timeline-date { font:500 .66rem "DM Mono",monospace; color:var(--orange); } h3 { margin-bottom:.35rem; font-size:1rem; } .timeline article p { margin-bottom:0; font-size:.82rem; line-height:1.5; color:var(--muted); } .timeline-detail { max-width:280px; }
.known-for-content { max-width:800px; } .known-for-content h2 { margin-bottom:2.5rem; } .known-for-list { border-top:1px solid var(--line); } .known-for-list p { margin:0; padding:1.15rem 0; border-bottom:1px solid var(--line); font:600 clamp(1.1rem,2vw,1.7rem)/1.3 "Playfair Display",serif; letter-spacing:-.035em; }
.perspective { background:var(--lime); } .perspective-copy { max-width:900px; } .perspective h2 { margin-bottom:2.4rem; } .point-of-view-statement { max-width:710px; font-size:clamp(1.22rem,2vw,1.72rem); line-height:1.46; letter-spacing:-.03em; } .point-of-view-statement p { margin-bottom:1rem; } .point-of-view-statement p:nth-child(3) { margin-top:2rem; } .point-of-view-statement p:nth-child(4) { font-weight:800; } .insight-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:3.5rem; } .insight-cards article { min-height:150px; display:flex; align-items:flex-end; padding:1.1rem; border:1px solid rgba(18,33,29,.55); font:600 clamp(1rem,1.5vw,1.28rem)/1.23 "Playfair Display",serif; letter-spacing:-.03em; } .signature-statement { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:3.5rem; padding-top:1rem; border-top:1px solid rgba(18,33,29,.55); } .signature-statement span { font:500 .65rem/1.45 "DM Mono",monospace; letter-spacing:.02em; text-transform:uppercase; }
.contact { display:grid; grid-template-columns:minmax(115px,20%) 1fr; gap:2rem; padding:clamp(4.8rem,10vw,10rem) clamp(1.3rem,8vw,9rem); background:var(--orange); } .contact .section-label { color:var(--ink); } .contact h2 { max-width:620px; } .contact-email { display:inline-block; font:600 clamp(1.35rem,3.2vw,3rem)/1.2 "Playfair Display",serif; text-decoration-thickness:1px; text-underline-offset:.18em; } .contact-email span { color:var(--ink); } .profile-download { display:table; margin-top:1.8rem; padding:.8rem 1rem; background:var(--ink); color:var(--paper); font:500 .68rem "DM Mono",monospace; text-decoration:none; text-transform:uppercase; letter-spacing:.06em; } .profile-download span { color:var(--lime); font-size:1.1em; } .contact-links { display:flex; gap:1rem; margin:2.4rem 0 0; font:500 .7rem "DM Mono",monospace; } .contact-links a { text-underline-offset:.25em; } footer { display:flex; justify-content:space-between; padding:1.25rem clamp(1.3rem,4vw,4.5rem); background:var(--ink); color:#b8c0ba; font:500 .65rem "DM Mono",monospace; } footer a { color:var(--paper); text-decoration:none; }
@media (max-width:720px) { .site-header { height:68px; } .nav-toggle { display:block; } nav { display:none; position:absolute; top:68px; left:0; right:0; z-index:4; padding:1.2rem 1.3rem 1.8rem; background:var(--paper); border-bottom:1px solid var(--line); flex-direction:column; align-items:flex-start; gap:1.1rem; } nav.open { display:flex; } .hero { min-height:620px; } h1 { margin-top:4.5rem; font-size:clamp(3rem,15.2vw,6rem); } .hero-lower { align-items:flex-start; flex-direction:column; margin-top:auto; padding-top:3rem; gap:1.2rem; } .hero-credibility { align-items:flex-start; flex-direction:column; gap:.45rem; margin-top:1.5rem; } .proof-band { grid-template-columns:repeat(2,1fr); row-gap:2rem; } .section,.contact { grid-template-columns:1fr; gap:2.2rem; } .impact-cards,.insight-cards { grid-template-columns:1fr; margin-top:2.5rem; gap:.75rem; } .impact-cards article { min-height:185px; } .timeline article { grid-template-columns:1fr; gap:.5rem; } .timeline-detail { margin-top:.5rem; } .insight-cards article { min-height:115px; } .signature-statement { grid-template-columns:repeat(2,1fr); gap:.9rem; margin-top:2.5rem; } }