:root { --dark-green:#143d2a; --green:#347a4d; --light-green:#dbeccf; --paper:#e5d3ad; --sand:#c9aa76; --line:rgba(20,61,42,.24); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--dark-green); font-family:Futura,"Futura PT","Trebuchet MS",sans-serif; }
.grain { position:fixed; inset:0; z-index:5; pointer-events:none; opacity:.18; mix-blend-mode:multiply; 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='.72' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); }
.site-header { height:82px; padding:0 5vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); position:relative; z-index:6; }
.brand { color:var(--dark-green); text-decoration:none; font-size:21px; font-weight:700; letter-spacing:-.1em; }.brand span,.header-contact span,.text-link span { color:var(--green); }
nav { display:flex; gap:30px; margin-left:70px; } nav a,.header-contact { color:var(--dark-green); font-size:12px; font-weight:700; letter-spacing:.08em; text-decoration:none; text-transform:uppercase; } nav a:hover,.text-link:hover,.contact-footer a:hover { color:var(--green); }
.hero { min-height:calc(70vh - 82px); padding:7.7vw 5vw 2.3vw; display:flex; flex-direction:column; justify-content:space-between; }
.eyebrow { align-items:center; display:flex; gap:9px; margin:0; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }.eyebrow span { width:7px; height:7px; background:var(--green); border-radius:50%; display:inline-block; }
.hero-grid { display:flex; justify-content:flex-end; margin:11vh 0 6vh; }.contact h2 em,.about-statement em { font-family:Papyrus,"Papyrus Condensed",cursive; font-weight:400; letter-spacing:-.06em; }
.hero-aside { max-width:390px; }.hero-aside p,.about-copy p { font-size:15px; line-height:1.65; margin:0 0 30px; }.hero-aside p { font-size:18px; line-height:1.55; }.circle-link { width:57px; height:57px; border:1px solid var(--dark-green); border-radius:50%; display:grid; place-items:center; color:var(--dark-green); font-size:22px; text-decoration:none; transition:.25s; }.circle-link:hover { background:var(--dark-green); color:var(--light-green); transform:translateY(4px); }.hero-footer { border-top:1px solid var(--line); display:flex; justify-content:space-between; padding-top:15px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.marquee { overflow:hidden; white-space:nowrap; background:var(--green); color:var(--light-green); padding:17px 0 14px; font-size:27px; font-weight:700; letter-spacing:-.07em; }.marquee div { width:max-content; animation:scroll 22s linear infinite; }.marquee i { color:var(--light-green); font-style:normal; padding:0 20px; } @keyframes scroll { to { transform:translateX(-50%); } }
.section { padding:130px 5vw; }.section-heading { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:64px; }.muted { color:var(--green); font-size:14px; margin:0; }.projects { display:grid; grid-template-columns:1fr 1fr; gap:80px 28px; }.project-large { grid-column:span 2; }.project-image { display:block; height:31vw; min-height:340px; position:relative; overflow:hidden; background:var(--green); text-decoration:none; }.project-large .project-image { height:43vw; }.project-image img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .55s ease; }.image-one img { object-position:center 57%; }.project-image::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 52%,rgba(20,61,42,.72)); }.image-label { position:absolute; z-index:1; bottom:18px; left:18px; color:var(--light-green); font-size:10px; font-weight:700; letter-spacing:.09em; }.project-info { display:flex; justify-content:space-between; padding-top:17px; border-top:1px solid var(--line); }.project-info h2 { font-size:20px; margin:0 0 4px; letter-spacing:-.045em; }.project-info p,.project-info>span { color:var(--green); font-size:11px; font-weight:700; letter-spacing:.04em; margin:0; }.project:hover .project-image img { transform:scale(1.045); filter:saturate(1.08); }
.about { background:var(--dark-green); color:var(--light-green); }.about-grid { display:grid; grid-template-columns:1.35fr .65fr; gap:8vw; padding-top:55px; }.about-statement { font-size:clamp(32px,4.3vw,68px); letter-spacing:-.065em; line-height:1.05; margin:0; }.about-copy { padding-top:6px; max-width:390px; }.text-link { color:inherit; display:inline-block; font-size:12px; font-weight:700; letter-spacing:.08em; text-decoration:none; text-transform:uppercase; border-bottom:1px solid currentColor; padding-bottom:5px; }.text-link span { font-size:17px; margin-left:8px; }.credentials { margin-top:95px; padding-top:22px; border-top:1px solid rgba(219,236,207,.35); display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }.credentials div { display:grid; gap:7px; }.credentials strong { font-size:clamp(24px,2.7vw,44px); line-height:1; letter-spacing:-.075em; }.credentials span { color:var(--light-green); font-size:10px; font-weight:700; letter-spacing:.08em; line-height:1.45; text-transform:uppercase; }
.gallery { background:var(--sand); }.gallery-grid { columns:4 220px; column-gap:15px; }.gallery-grid img { width:100%; display:block; break-inside:avoid; margin:0 0 15px; border:1px solid var(--green); filter:saturate(.92); transition:filter .25s, transform .25s; }.gallery-grid img:hover { filter:saturate(1.15); transform:scale(.985); }
.experience { padding-bottom:150px; }.roles { border-top:1px solid var(--line); }.role { display:grid; grid-template-columns:1fr 2fr 1fr auto; align-items:center; gap:18px; border-bottom:1px solid var(--line); padding:25px 0; transition:.25s; }.role:hover { padding-left:14px; background:rgba(52,122,77,.1); }.role p { color:var(--green); font-size:11px; font-weight:700; letter-spacing:.04em; margin:0; }.role h3 { margin:0; font-size:18px; letter-spacing:-.04em; }.role span { color:var(--green); font-size:20px; }
.details { background:var(--green); color:var(--light-green); }.details .muted,.qualification p,.qualification span { color:var(--light-green); }.details-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(219,236,207,.35); }.qualification { min-height:235px; padding:24px 28px 24px 0; display:flex; flex-direction:column; border-right:1px solid rgba(219,236,207,.35); }.qualification:not(:first-child) { padding-left:28px; }.qualification:last-child { border:0; }.qualification p,.qualification span { font-size:11px; font-weight:700; letter-spacing:.04em; margin:0; }.qualification h3 { margin:45px 0 auto; font-size:19px; letter-spacing:-.045em; line-height:1.15; }
.contact { background:var(--paper); padding:110px 5vw 24px; min-height:470px; display:flex; flex-direction:column; }.email { align-self:flex-start; margin-top:110px; font-size:clamp(18px,2.2vw,32px); color:var(--dark-green); text-decoration:none; border-bottom:2px solid var(--dark-green); padding-bottom:7px; letter-spacing:-.04em; }.email span { color:var(--green); }.contact-links { display:flex; gap:28px; margin-top:30px; }.contact-footer { margin-top:auto; border-top:1px solid var(--line); padding-top:17px; display:flex; justify-content:space-between; align-items:center; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }.contact-footer p { margin:0; }.contact-footer div { display:flex; gap:22px; }.contact-footer a { color:var(--dark-green); text-decoration:none; }
@media (max-width:700px) { .site-header { height:65px; padding:0 20px; } nav { display:none; }.header-contact { font-size:10px; }.hero { min-height:calc(65vh - 65px); padding:42px 20px 20px; }.hero-grid { margin:75px 0 35px; }.hero-aside { max-width:100%; }.hero-aside p { font-size:16px; }.hero-footer { font-size:9px; }.marquee { font-size:21px; }.section { padding:75px 20px; }.section-heading { margin-bottom:40px; }.muted { display:none; }.projects { grid-template-columns:1fr; gap:52px; }.project-large { grid-column:auto; }.project-image,.project-large .project-image { height:77vw; min-height:0; }.about-grid { grid-template-columns:1fr; gap:35px; padding-top:37px; }.about-statement { font-size:38px; }.about-copy { max-width:100%; }.credentials { margin-top:58px; grid-template-columns:1fr 1fr; gap:29px 20px; }.credentials strong { font-size:34px; }.gallery-grid { columns:2 150px; column-gap:10px; }.gallery-grid img { margin-bottom:10px; }.role { grid-template-columns:1fr auto; gap:8px; padding:20px 0; }.role h3 { grid-row:2; font-size:16px; }.role p:nth-of-type(2) { grid-row:2; text-align:right; }.role span { display:none; }.details-grid { grid-template-columns:1fr; }.qualification,.qualification:not(:first-child) { min-height:0; padding:22px 0; border-right:0; border-bottom:1px solid rgba(219,236,207,.35); }.qualification:last-child { border-bottom:0; }.qualification h3 { margin:25px 0 17px; }.contact { min-height:410px; padding:70px 20px 18px; }.email { margin-top:72px; }.contact-links { gap:18px; }.contact-footer { font-size:9px; }.contact-footer div { gap:12px; }.contact-footer p:last-child { display:none; } }