:root { --ink:#212822; --muted:#5c625b; --cream:#f4f0e8; --paper:#fffcf6; --moss:#43513d; --clay:#d76545; --line:rgba(33,40,34,.22); --sans:system-ui,-apple-system,'Segoe UI',sans-serif; --serif:Georgia,'Times New Roman',serif; --mono:'Cascadia Mono','SFMono-Regular',Consolas,monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.5; }
img { max-width:100%; display:block; }
a { color:inherit; }
.skip-link { position:absolute; left:1rem; top:-4rem; background:var(--ink); color:white; padding:.7rem 1rem; z-index:5; }
.skip-link:focus { top:1rem; }
.site-header { height:91px; max-width:1440px; margin:auto; padding:20px clamp(1.25rem,4vw,4.5rem); display:flex; align-items:center; justify-content:space-between; }
.brand { display:block; width:116px; }
.brand img { width:100%; height:52px; object-fit:contain; object-position:left center; }
nav { display:flex; align-items:center; gap:clamp(1rem,2.5vw,2.5rem); font-size:.91rem; font-weight:500; }
nav a { text-decoration:none; } nav a:not(.nav-contact):hover { text-decoration:underline; text-underline-offset:4px; }
.nav-contact { border-bottom:1px solid var(--ink); padding-bottom:3px; }
.hero, .intro, .services, .approach, .about, .contact { max-width:1440px; margin:auto; padding-left:clamp(1.25rem,8vw,9rem); padding-right:clamp(1.25rem,8vw,9rem); }
.hero { min-height:620px; padding-top:clamp(3rem,8vw,8.5rem); padding-bottom:3rem; position:relative; }
.eyebrow, .section-label { font-family:var(--mono); font-size:.69rem; letter-spacing:.03em; text-transform:uppercase; }
.eyebrow { display:flex; gap:9px; align-items:center; color:var(--moss); }.eyebrow span { width:7px; height:7px; border-radius:50%; background:var(--clay); }
h1,h2,h3,p { margin-top:0; } h1,h2 { font-family:var(--serif); font-weight:500; line-height:.99; letter-spacing:-.045em; }
h1 { font-size:clamp(3.6rem,9vw,8.9rem); max-width:1050px; margin:clamp(2.3rem,5vw,4.5rem) 0 2.5rem; } h1 em { color:var(--clay); font-style:italic; }
.hero-bottom { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; max-width:950px; }.lede { max-width:570px; font-size:clamp(1.1rem,1.6vw,1.4rem); line-height:1.42; }
.button { display:inline-flex; justify-content:space-between; align-items:center; gap:2.4rem; padding:.9rem 1rem 1rem 1.2rem; text-decoration:none; border:1px solid transparent; font-weight:600; font-size:.92rem; white-space:nowrap; cursor:pointer; }.button span { font-size:1.25rem; line-height:.7; }.button-dark { background:var(--ink); color:var(--paper); }.button-dark:hover { background:var(--moss); }.hero-mark { position:absolute; right:clamp(1.25rem,8vw,9rem); bottom:4rem; font-size:2rem; color:var(--clay); }
.section-rule { border-top:1px solid var(--line); }.intro { padding-top:clamp(4rem,9vw,8rem); padding-bottom:clamp(4rem,8vw,7rem); display:grid; grid-template-columns:minmax(160px,.72fr) 2fr; gap:2rem; }.intro h2 { font-size:clamp(2.2rem,4.4vw,4.7rem); max-width:900px; margin-bottom:1.5rem; }.intro div > p { max-width:600px; color:var(--muted); font-size:1.12rem; }
.services { padding-top:clamp(4rem,8vw,7.5rem); padding-bottom:clamp(4rem,8vw,7.5rem); }.section-heading { display:flex; justify-content:space-between; gap:2rem; align-items:baseline; margin-bottom:3rem; }.section-heading h2 { font-size:clamp(2.3rem,4vw,4.5rem); margin:0; }.service-list { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--ink); }.service-list article { min-height:280px; padding:1.3rem 1.4rem 1rem 0; border-right:1px solid var(--line); }.service-list article:not(:first-child) { padding-left:1.4rem; }.service-list article:last-child { border-right:0; }.service-number { font: .7rem var(--mono); color:var(--clay); }.service-list h3 { font:500 1.45rem var(--serif); letter-spacing:-.02em; margin:4.3rem 0 .7rem; }.service-list p { color:var(--muted); font-size:.94rem; }
.approach { background:var(--moss); color:var(--paper); max-width:none; padding-top:clamp(4rem,8vw,7.5rem); padding-bottom:clamp(4rem,8vw,7.5rem); display:grid; grid-template-columns:1fr 1.08fr; gap:clamp(2.5rem,9vw,10rem); }.approach > * { max-width:590px; }.approach .section-label { color:#c9d1bc; }.approach h2 { font-size:clamp(2.4rem,4.5vw,4.8rem); margin:2rem 0; }.approach-intro > p:last-child { color:#dbe0d5; font-size:1.08rem; }.approach ol { margin:0; padding:0; list-style:none; border-top:1px solid rgba(255,255,255,.38); }.approach li { padding:1.35rem 0; border-bottom:1px solid rgba(255,255,255,.38); display:grid; grid-template-columns:1fr 1.35fr; gap:1rem; }.approach strong { font:500 1.35rem var(--serif); }.approach li span { color:#dbe0d5; font-size:.93rem; }
.about { display:grid; grid-template-columns:minmax(210px,.75fr) 1.4fr; gap:clamp(2rem,9vw,10rem); align-items:center; padding-top:clamp(4rem,8vw,7.5rem); padding-bottom:clamp(4rem,8vw,7.5rem); }.about-image-wrap { aspect-ratio:1; background:#ded8cc; overflow:hidden; }.about-image-wrap img { width:100%; height:100%; object-fit:cover; }.about h2 { font-size:clamp(2.7rem,5vw,5.2rem); margin:1.6rem 0; }.about-copy > p:not(.section-label) { max-width:570px; color:var(--muted); font-size:1.08rem; }
.contact { background:var(--clay); color:#2c201a; max-width:none; display:grid; grid-template-columns:1fr 1fr; gap:clamp(3rem,12vw,12rem); padding-top:clamp(4rem,8vw,7.5rem); padding-bottom:clamp(4rem,8vw,7.5rem); }.contact h2 { font-size:clamp(3rem,5.5vw,5.8rem); margin:1.6rem 0; }.contact > div > p:not(.section-label) { font-size:1.1rem; max-width:400px; }.email-image { width:min(275px,100%); margin-top:2.1rem; }.form-row { margin-bottom:1.45rem; }.form-row label { display:block; margin-bottom:.42rem; font: .7rem var(--mono); letter-spacing:.03em; text-transform:uppercase; }.form-row input,.form-row textarea { width:100%; background:transparent; border:0; border-bottom:1px solid rgba(44,32,26,.7); border-radius:0; color:inherit; font:1rem var(--sans); padding:.45rem 0; }.form-row textarea { border:1px solid rgba(44,32,26,.7); padding:.7rem; resize:vertical; }.form-row input:focus,.form-row textarea:focus { outline:2px solid #fff7e8; outline-offset:3px; }.button-light { background:var(--ink); color:var(--paper); border:0; margin-top:.4rem; }.button-light:hover { background:#fff7e8; color:var(--ink); }.form-note { margin:1rem 0 0; font-size:.8rem; }
footer { max-width:1440px; margin:auto; padding:2rem clamp(1.25rem,8vw,9rem); display:flex; gap:2rem; align-items:center; justify-content:space-between; color:var(--muted); font-size:.78rem; } footer img { width:76px; height:34px; object-fit:contain; object-position:left; filter:grayscale(1); } footer p { margin:0; }
@media (max-width:760px) { .site-header { height:76px; } .brand { width:95px; }.brand img { height:42px; } nav a:not(.nav-contact) { display:none; }.hero { min-height:590px; }.hero-bottom,.section-heading { align-items:flex-start; flex-direction:column; }.hero-mark { display:none; }.intro,.about,.contact,.approach { grid-template-columns:1fr; }.intro { gap:1.7rem; }.service-list { grid-template-columns:1fr 1fr; }.service-list article { min-height:220px; padding:1rem 1rem 1.3rem 0; }.service-list article:nth-child(2) { border-right:0; }.service-list article:nth-child(3) { border-top:1px solid var(--line); }.service-list article:nth-child(4) { border-top:1px solid var(--line); border-right:0; }.service-list h3 { margin-top:2.6rem; }.about-image-wrap { max-width:260px; }.contact { gap:3rem; } footer { flex-wrap:wrap; gap:1rem; } }
@media (max-width:380px) { .service-list { grid-template-columns:1fr; }.service-list article,.service-list article:nth-child(2),.service-list article:nth-child(4) { border-right:0; border-top:1px solid var(--line); padding-left:0; }.service-list article:first-child { border-top:0; }.service-list article { min-height:0; }.service-list h3 { margin-top:1.8rem; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }