@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');

:root { --ink:#252522; --muted:#686861; --paper:#f2f0eb; --sand:#dfdbd1; --terracotta:#a55f4c; --line:rgba(37,37,34,.18); --serif:'Playfair Display', Georgia, serif; --sans:'DM Sans', Arial, sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); font-size:15px; line-height:1.55; }
a { color:inherit; text-decoration:none; }
button, input, textarea { font:inherit; }
button { cursor:pointer; }
.container { width:min(1200px, calc(100% - 96px)); margin:0 auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:1rem; left:1rem; z-index:20; padding:.6rem 1rem; background:var(--ink); color:var(--paper); transform:translateY(-150%); transition:transform .2s; }
.skip-link:focus { transform:translateY(0); }
.site-header { position:absolute; z-index:10; width:100%; color:#fff; transition:background .3s,color .3s; }
.site-header.is-scrolled { position:fixed; background:rgba(242,240,235,.95); color:var(--ink); box-shadow:0 1px 0 var(--line); backdrop-filter:blur(12px); }
.header-inner { height:88px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:10px; font-size:15px; font-weight:600; letter-spacing:.02em; }
.brand-mark { display:grid; place-items:center; width:27px; height:27px; border:1px solid currentColor; border-radius:50%; font-family:var(--serif); font-size:16px; font-weight:500; }
.site-nav { display:flex; align-items:center; gap:34px; font-size:13px; }
.site-nav a { opacity:.86; transition:opacity .2s; }
.site-nav a:hover { opacity:1; }
.nav-contact { padding:10px 0; border-bottom:1px solid currentColor; }
.menu-toggle { display:none; border:0; background:transparent; color:inherit; padding:8px; }
.hero { min-height:760px; height:100vh; max-height:960px; position:relative; color:#fff; display:flex; align-items:flex-end; }
.hero-image { position:absolute; inset:0; background:url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=2200&q=85') center/cover; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(18,20,18,.6),rgba(18,20,18,.05) 75%),linear-gradient(0deg,rgba(15,17,15,.58),transparent 48%); }
.hero-content { position:relative; padding-bottom:78px; }
.eyebrow { margin:0 0 20px; color:var(--terracotta); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; }
.hero-eyebrow { color:#e2d9cc; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-family:var(--serif); font-weight:500; line-height:.98; letter-spacing:-.03em; }
h1 { margin-bottom:55px; font-size:clamp(4rem,8vw,8.5rem); }
h1 em,h2 em { color:var(--terracotta); font-style:italic; }
.hero-bottom { display:flex; align-items:flex-end; justify-content:space-between; max-width:610px; }
.hero-bottom p { max-width:310px; margin:0; color:#e8e4db; font-size:14px; line-height:1.6; }
.round-link { display:grid; place-items:center; width:55px; height:55px; border:1px solid rgba(255,255,255,.55); border-radius:50%; font-size:22px; transition:background .2s,color .2s; }
.round-link:hover { background:#fff; color:var(--ink); }
.section { padding:145px 0; }
.intro { background:var(--paper); }
.intro-grid { display:grid; grid-template-columns:1fr 2.1fr 1fr; gap:40px; }
.section-index { font-size:11px; color:var(--muted); letter-spacing:.08em; }
.section-index span { color:var(--terracotta); padding:0 5px; }
h2 { margin-bottom:32px; font-size:clamp(3rem,5.3vw,6rem); }
.intro-copy { max-width:585px; }
.lead { font-family:var(--serif); font-size:24px; line-height:1.3; margin-bottom:24px; }
.intro-copy > p:not(.eyebrow):not(.lead) { max-width:430px; color:var(--muted); }
.text-link { display:inline-flex; gap:12px; margin-top:28px; padding-bottom:8px; border-bottom:1px solid var(--ink); font-size:13px; }
.intro-aside { align-self:end; padding-left:32px; border-left:1px solid var(--line); }
.stat { display:flex; flex-direction:column; margin-bottom:34px; }
.stat strong { color:var(--terracotta); font-family:var(--serif); font-size:48px; font-weight:500; line-height:1; }
.stat span { max-width:130px; margin-top:8px; color:var(--muted); font-size:12px; line-height:1.35; }
.projects { background:#e5e1d9; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:60px; margin-bottom:72px; }
.section-heading h2 { margin-bottom:0; }
.section-note { max-width:255px; margin-bottom:8px; color:var(--muted); font-size:13px; }
.filter-bar { display:flex; gap:28px; margin-bottom:32px; border-bottom:1px solid var(--line); }
.filter-button { padding:0 0 13px; color:var(--muted); background:transparent; border:0; border-bottom:2px solid transparent; font-size:12px; }
.filter-button span { margin-left:4px; color:var(--terracotta); font-size:10px; }
.filter-button.is-active { color:var(--ink); border-color:var(--ink); }
.project-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:62px 30px; }
.project-card-large { grid-row:span 2; }
.project-card-wide { grid-column:span 2; }
.project-image { display:block; aspect-ratio:1.08/1; background-position:center; background-size:cover; filter:saturate(.7); transition:filter .5s,transform .5s; }
.project-card-large .project-image { aspect-ratio:1/1.38; }
.project-card-wide .project-image { aspect-ratio:2.3/1; }
.project-image:hover { filter:saturate(1); transform:scale(.99); }
.image-one { background-image:url('https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?auto=format&fit=crop&w=1300&q=82'); }
.image-two { background-image:url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1100&q=82'); }
.image-three { background-image:url('https://images.unsplash.com/photo-1511818966892-d7d671e672a2?auto=format&fit=crop&w=1100&q=82'); }
.image-four { background-image:url('https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?auto=format&fit=crop&w=1600&q=82'); }
.image-five { background-image:url('https://images.unsplash.com/photo-1600047509807-ba8f99d2cdde?auto=format&fit=crop&w=1100&q=82'); }
.image-six { background-image:url('https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?auto=format&fit=crop&w=1100&q=82'); }
.project-meta { display:flex; justify-content:space-between; gap:20px; padding-top:15px; }
.project-meta > div { display:flex; align-items:baseline; gap:14px; }
.project-number { color:var(--terracotta); font-size:11px; }
.project-meta h3 { margin:0; font-family:var(--serif); font-size:25px; font-weight:500; }
.project-meta p { margin:0; color:var(--muted); font-size:11px; line-height:1.35; text-align:right; }
.project-card.is-hidden { display:none; }
.services { background:var(--ink); color:var(--paper); }
.services-layout { display:grid; grid-template-columns:1fr 1.45fr; gap:110px; }
.services .eyebrow { color:#d08b73; }
.services h2 { margin-bottom:25px; }
.services-intro > p:last-child { max-width:230px; color:#aaa9a2; font-size:13px; }
.service-list { border-top:1px solid rgba(242,240,235,.3); }
.service-item { display:grid; grid-template-columns:35px 1fr 20px; gap:18px; align-items:start; padding:27px 0; border-bottom:1px solid rgba(242,240,235,.3); }
.service-item > span:first-child { color:#c47b65; font-size:11px; }
.service-item h3 { margin:0 0 8px; font-family:var(--serif); font-size:24px; font-weight:500; }
.service-item p { max-width:430px; margin:0; color:#aaa9a2; font-size:13px; }
.service-arrow { opacity:.7; font-size:20px; }
.quote { background:var(--terracotta); color:#f5eee4; padding:130px 0; }
.quote-inner { max-width:790px; text-align:center; }
.quote-mark { display:block; margin-bottom:-8px; font-family:var(--serif); font-size:76px; line-height:1; }
blockquote { margin:0; font-family:var(--serif); font-size:clamp(2rem,4.3vw,4.4rem); line-height:1.08; letter-spacing:-.03em; }
.quote p { margin-top:30px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.contact { background:var(--paper); }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:120px; }
.contact-copy { max-width:440px; }
.contact-copy h2 { margin-bottom:28px; }
.contact-copy > p:not(.eyebrow) { color:var(--muted); }
.contact-details { display:flex; flex-direction:column; gap:4px; margin-top:42px; font-size:13px; }
.contact-details a { color:var(--terracotta); font-size:19px; }
.contact-form { padding-top:20px; }
.contact-form label { display:block; margin-top:21px; margin-bottom:7px; color:var(--muted); font-size:11px; }
.contact-form input,.contact-form textarea { display:block; width:100%; padding:10px 0; color:var(--ink); background:transparent; border:0; border-bottom:1px solid var(--line); outline:0; resize:vertical; }
.contact-form input:focus,.contact-form textarea:focus { border-color:var(--terracotta); }
.submit-button { display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:35px; padding:16px 0; color:var(--paper); background:var(--ink); border:1px solid var(--ink); font-size:13px; transition:background .2s,color .2s; }
.submit-button span { margin-right:17px; font-size:20px; }
.submit-button { padding-left:20px; }
.submit-button:hover { color:var(--ink); background:transparent; }
.form-note { margin-top:12px; color:var(--muted); font-size:10px; }
.site-footer { padding:50px 0 25px; color:var(--paper); background:var(--ink); }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:30px; padding-bottom:52px; }
.footer-inner p { margin:0; color:#aaa9a2; font-family:var(--serif); font-size:19px; }
.footer-links { display:flex; gap:22px; color:#aaa9a2; font-size:11px; }
.footer-bottom { display:flex; justify-content:space-between; padding-top:17px; border-top:1px solid rgba(242,240,235,.25); color:#777770; font-size:10px; }
.reveal { opacity:0; transform:translateY(22px); transition:opacity .8s ease,transform .8s ease; }
.reveal.is-visible { opacity:1; transform:none; }
@media (max-width: 800px) { .container { width:min(100% - 42px, 600px); } .header-inner { height:72px; } .menu-toggle { display:flex; flex-direction:column; gap:5px; } .menu-toggle span:not(.sr-only) { display:block; width:24px; height:1px; background:currentColor; } .site-nav { display:none; position:absolute; top:72px; right:21px; left:21px; flex-direction:column; align-items:stretch; gap:0; padding:12px 20px 20px; background:var(--paper); color:var(--ink); box-shadow:0 10px 25px rgba(0,0,0,.1); } .site-nav.is-open { display:flex; } .site-nav a { padding:11px 0; border-bottom:1px solid var(--line); } .site-nav .nav-contact { border-bottom:0; } .hero { min-height:670px; } .hero-content { padding-bottom:45px; } h1 { font-size:clamp(3.7rem,17vw,6rem); margin-bottom:40px; } .hero-bottom { align-items:flex-start; } .hero-bottom p { max-width:240px; } .section { padding:92px 0; } .intro-grid,.services-layout,.contact-grid { grid-template-columns:1fr; gap:48px; } .section-index { order:0; } .intro-copy { order:1; } .intro-aside { order:2; display:flex; gap:32px; padding-left:0; border-left:0; border-top:1px solid var(--line); padding-top:25px; } .section-heading { display:block; margin-bottom:48px; } .section-note { margin-top:25px; } .project-grid { gap:42px 15px; } .project-card-large { grid-row:auto; } .project-card-large .project-image { aspect-ratio:1.08/1; } .project-card-wide { grid-column:span 2; } .project-meta { display:block; } .project-meta p { margin-top:5px; text-align:left; } .project-meta h3 { font-size:21px; } .filter-bar { gap:16px; overflow-x:auto; } .filter-button { flex:0 0 auto; } .services-layout { gap:55px; } .contact-grid { gap:20px; } .contact-form { padding-top:0; } .footer-inner { align-items:flex-start; flex-direction:column; padding-bottom:35px; } .footer-links { flex-wrap:wrap; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } .reveal { opacity:1; transform:none; } }
