:root { --ink:#16211b; --cream:#f3efe6; --paper:#faf8f3; --warm:#d89b5b; --copper:#9a5a2c; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:Arial, Helvetica, sans-serif; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; }
.site-header { height:84px; padding:0 5vw; display:flex; align-items:center; justify-content:space-between; background:#f8f5ee; position:relative; z-index:10; }
.brand { display:flex; align-items:center; gap:12px; font-size:23px; font-weight:800; letter-spacing:-1px; }
.brand > span:last-child > span { color:var(--copper); }
.brand-mark { width:39px; height:39px; border-radius:50% 50% 50% 12%; background:var(--ink); color:#fff; display:grid; place-items:center; font-family:Georgia,serif; font-style:italic; }
nav { display:flex; gap:34px; font-size:14px; font-weight:700; }
nav a:hover { color:var(--copper); }
.button { border:0; cursor:pointer; display:inline-flex; justify-content:center; align-items:center; min-height:52px; padding:0 24px; background:var(--warm); color:#172019; font-weight:800; border-radius:3px; transition:.2s ease; }
.button:hover { background:#e9ac6b; transform:translateY(-1px); }
.button-small { min-height:42px; padding:0 18px; font-size:13px; }
.hero { min-height:calc(100vh - 84px); position:relative; display:flex; align-items:center; overflow:hidden; }
.hero > img { object-fit:cover; object-position:center; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(8,16,12,.9) 0%,rgba(8,16,12,.66) 42%,rgba(8,16,12,.05) 78%); }
.hero-content { position:relative; z-index:2; width:min(680px,88vw); margin-left:8vw; color:#fff; padding:80px 0 120px; }
.eyebrow { text-transform:uppercase; letter-spacing:.2em; font-size:12px; font-weight:800; color:#edb474; }
h1 { font-family:Georgia,serif; font-size:clamp(52px,6.7vw,100px); line-height:.93; margin:22px 0 28px; font-weight:500; letter-spacing:-.045em; }
h1 em { color:#e9ae6b; font-weight:500; }
.hero-copy { max-width:580px; font-size:19px; line-height:1.65; color:rgba(255,255,255,.82); }
.hero-actions { margin-top:36px; display:flex; gap:28px; align-items:center; flex-wrap:wrap; }
.text-link { font-weight:700; border-bottom:1px solid rgba(255,255,255,.45); padding:12px 0; }
.text-link span { margin-left:10px; }
.hero-proof { position:absolute; z-index:2; right:5vw; bottom:34px; color:#fff; display:flex; flex-direction:column; border-left:2px solid #e9ae6b; padding-left:14px; font-size:13px; }
.hero-proof strong { font-size:15px; }
.hero-proof span { color:rgba(255,255,255,.66); margin-top:4px; }
.services-intro,.section-heading { padding:100px 8vw 65px; display:grid; grid-template-columns:1.1fr .9fr; gap:8vw; align-items:end; }
.eyebrow.dark { color:var(--copper); }
h2 { font:500 clamp(42px,5vw,72px)/.98 Georgia,serif; letter-spacing:-.04em; margin:16px 0 0; }
.services-intro > p,.section-heading > p { font-size:19px; line-height:1.7; max-width:560px; margin:0; color:#4b554f; }
.services-grid { padding:0 5vw 110px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.service-card { background:var(--paper); }
.service-image { height:310px; position:relative; overflow:hidden; }
.service-image img { object-fit:cover; transition:transform .55s ease; }
.service-card:hover img { transform:scale(1.03); }
.service-body { padding:30px 28px 34px; position:relative; }
.service-body > span { position:absolute; right:28px; top:28px; color:#af9b84; font:italic 20px Georgia,serif; }
h3 { font:500 30px/1.15 Georgia,serif; margin:0 0 16px; }
.service-body p { color:#56605a; line-height:1.65; margin:0; }
.process { background:var(--ink); color:#fff; padding:110px 8vw; display:grid; grid-template-columns:1fr 1fr; gap:10vw; }
.process-copy { align-self:center; }
.process-copy > p:last-child { max-width:520px; color:rgba(255,255,255,.67); line-height:1.75; font-size:18px; }
.process ol { list-style:none; margin:0; padding:0; border-top:1px solid rgba(255,255,255,.18); }
.process li { display:grid; grid-template-columns:55px 1fr; gap:20px; padding:28px 0; border-bottom:1px solid rgba(255,255,255,.18); }
.process li > span { width:36px; height:36px; border:1px solid #d8a46a; color:#edb474; border-radius:50%; display:grid; place-items:center; font:italic 17px Georgia,serif; }
.process li strong { font:500 23px Georgia,serif; }
.process li p { margin:7px 0 0; color:rgba(255,255,255,.6); line-height:1.5; }
.projects { padding-bottom:110px; }
.gallery { padding:0 5vw; display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:370px; gap:16px; }
.gallery figure { margin:0; position:relative; overflow:hidden; background:#ddd; }
.gallery figure.wide { grid-column:span 2; }
.gallery img { object-fit:cover; transition:transform .55s ease; }
.gallery figure:hover img { transform:scale(1.025); }
.gallery figcaption { position:absolute; left:20px; bottom:18px; background:rgba(250,248,243,.9); padding:9px 13px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; }
.about { display:grid; grid-template-columns:1fr 1fr; min-height:760px; background:#d8cbb9; }
.about-image { position:relative; min-height:650px; }
.about-image img { object-fit:cover; object-position:center 30%; }
.about-copy { padding:100px 8vw 90px; align-self:center; }
.about-copy > p { font-size:18px; line-height:1.75; color:#49534d; }
.values { margin-top:42px; border-top:1px solid rgba(22,33,27,.2); }
.values > div { padding:19px 0; border-bottom:1px solid rgba(22,33,27,.2); display:grid; grid-template-columns:150px 1fr; gap:20px; }
.values strong { font-size:14px; text-transform:uppercase; letter-spacing:.08em; }
.values span { color:#59625c; line-height:1.5; }
.contact { background:#101b15; color:#fff; padding:110px 8vw; display:grid; grid-template-columns:.9fr 1.1fr; gap:10vw; }
.contact > div > p:not(.eyebrow) { max-width:520px; color:rgba(255,255,255,.67); line-height:1.7; font-size:18px; }
.contact-details { margin-top:45px; display:flex; flex-direction:column; align-items:flex-start; gap:9px; font:italic 24px Georgia,serif; color:#e2ad70; }
.contact-details a { color:inherit; text-decoration:none; }
.contact-details a:hover { text-decoration:underline; }
.contact form { display:grid; gap:17px; background:#f4efe5; padding:38px; color:var(--ink); }
label { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }
input,select,textarea { display:block; width:100%; margin-top:8px; border:0; border-bottom:1px solid #b7afa1; background:transparent; padding:12px 2px; color:var(--ink); font:16px Arial,sans-serif; border-radius:0; }
textarea { resize:vertical; }
input:focus,select:focus,textarea:focus { outline:2px solid #c48246; outline-offset:3px; }
.contact form .button { margin-top:4px; width:100%; }
.contact small { color:#6c736e; line-height:1.5; }
footer { background:#0b130f; color:#fff; min-height:130px; padding:35px 5vw; display:flex; align-items:center; justify-content:space-between; gap:24px; font-size:13px; }
.footer-brand .brand-mark { background:#f2eee5; color:var(--ink); }
footer p { color:rgba(255,255,255,.55); }
footer p a { color:inherit; text-decoration:none; }
footer p a:hover { color:#fff; text-decoration:underline; }
@media (max-width:900px) { .services-grid{grid-template-columns:1fr;} .service-card{display:grid;grid-template-columns:.9fr 1.1fr;} .service-image{height:auto;min-height:280px;} .process,.about,.contact{grid-template-columns:1fr;} .about-image{min-height:70vw;} }
@media (max-width:760px) { nav,.button-small{display:none;} .site-header{height:70px;padding:0 6vw;} .hero{min-height:calc(100svh - 70px);} .hero-content{margin-left:6vw;padding:70px 0 130px;} .hero-copy{font-size:17px;} .hero-proof{left:6vw;right:auto;} .services-intro,.section-heading{grid-template-columns:1fr;padding:75px 6vw 45px;gap:28px;} .services-grid{padding:0 6vw 75px;} .service-card{display:block;} .service-image{height:260px;} .process{padding:80px 6vw;gap:55px;} .gallery{padding:0 6vw;grid-template-columns:1fr;grid-auto-rows:290px;} .gallery figure.wide{grid-column:auto;} .projects{padding-bottom:75px;} .about-copy,.contact{padding:75px 6vw;} .values > div{grid-template-columns:1fr;gap:6px;} .contact form{padding:26px 20px;} footer{align-items:flex-start;flex-direction:column;padding:35px 6vw;} }