:root {
  --walnut: #4b3326;
  --walnut-dark: #2e211c;
  --ivory: #f4f0e8;
  --sand: #d7c7ae;
  --clay: #a9664a;
  --olive: #66705a;
  --stone: #d9d8d1;
  --graphite: #242522;
  --line: rgba(36,37,34,.2);
  --serif: Georgia, 'Times New Roman', serif;
  --sans: Arial, Helvetica, sans-serif;
  --technical: 'Arial Narrow', Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--ivory); color:var(--graphite); font-family:var(--sans); line-height:1.55; overflow-x:hidden; }
body.menu-open { overflow:hidden; }
a { color:inherit; text-decoration:none; }
button, input, textarea, select { font:inherit; }
button { cursor:pointer; }
img { max-width:100%; display:block; }
h1,h2,h3,p,a,button,label,span,li,input,textarea,select { overflow-wrap:anywhere; word-break:break-word; hyphens:auto; }
.container { width:min(1240px, calc(100% - 48px)); margin:auto; }
.narrow { width:min(810px, calc(100% - 48px)); margin:auto; }
.site-header { position:relative; z-index:10; border-bottom:1px solid var(--line); background:rgba(244,240,232,.94); }
.header-inner { min-height:88px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand-lockup { display:flex; align-items:center; gap:18px; min-width:0; }
.logo-placeholder { width:55px; height:55px; border:1px solid var(--walnut); display:grid; place-items:center; color:var(--walnut); font:700 11px var(--technical); letter-spacing:.18em; overflow:hidden; flex:0 0 auto; }.logo-placeholder img { width:100%; height:100%; object-fit:contain; padding:5px; }
.brand-copy { font:12px var(--technical); letter-spacing:.12em; text-transform:uppercase; color:var(--walnut); }
.brand-copy strong { display:block; font:700 25px var(--serif); letter-spacing:-.03em; text-transform:none; color:var(--graphite); }
.main-nav { display:flex; gap:25px; align-items:center; font:11px var(--technical); text-transform:uppercase; letter-spacing:.12em; }
.main-nav a { padding:10px 0; border-bottom:1px solid transparent; }
.main-nav a:hover,.main-nav a[aria-current=page] { border-color:var(--clay); }
.menu-toggle { display:none; background:none; border:0; width:45px; height:45px; color:var(--graphite); }
.menu-toggle span,.menu-toggle span:before,.menu-toggle span:after { display:block; content:''; width:22px; height:1px; background:currentColor; margin:auto; position:relative; }
.menu-toggle span:before { position:absolute; top:-7px; }.menu-toggle span:after { position:absolute; top:7px; }
.eyebrow,.technical { font:11px var(--technical); text-transform:uppercase; letter-spacing:.16em; color:var(--clay); }
.hero { min-height:680px; padding:88px 0 110px; position:relative; }
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:70px; align-items:center; }
.hero h1 { font:clamp(50px,7vw,105px)/.91 var(--serif); letter-spacing:-.065em; margin:22px 0 35px; max-width:720px; }
.hero-intro { max-width:440px; font-size:17px; color:#55564f; }
.actions { display:flex; gap:14px; flex-wrap:wrap; margin-top:33px; }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:50px; padding:13px 22px; border:1px solid var(--walnut); font:11px var(--technical); letter-spacing:.13em; text-transform:uppercase; transition:.2s; }
.button.primary { color:var(--ivory); background:var(--walnut); }.button.primary:hover { background:var(--clay); border-color:var(--clay); }.button.secondary:hover { background:var(--sand); }
.hero-visual { position:relative; min-height:470px; background:var(--walnut); transform:translateY(18px); }
.image-placeholder { display:flex; flex-direction:column; justify-content:flex-end; padding:25px; min-height:100%; position:relative; overflow:hidden; color:var(--ivory); background:linear-gradient(145deg,#80614a 0%,#4a3023 43%,#aa835e 44%,#5a3b29 65%,#2e211c 66%); }
.image-placeholder:before { content:''; position:absolute; inset:0; opacity:.32; background:repeating-linear-gradient(77deg,transparent 0 24px,rgba(237,214,181,.5) 25px 26px,transparent 27px 61px); mix-blend-mode:screen; }
.image-placeholder > * { position:relative; z-index:1; }.image-placeholder > img { inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:.82; }.image-placeholder:after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(36,37,34,.04) 30%,rgba(36,37,34,.7) 100%); z-index:0; }.photo-label { font:11px var(--technical); letter-spacing:.12em; text-transform:uppercase; }.photo-caption { font:30px/1 var(--serif); max-width:260px; margin-top:10px; }
.arch-line { position:absolute; border:1px solid var(--clay); pointer-events:none; }.hero-visual .arch-line.one { inset:-19px 19px 19px -19px; }.hero-visual .arch-line.two { inset:32px -32px -32px 32px; border-color:var(--olive); }
.annotation { position:absolute; font:10px var(--technical); text-transform:uppercase; letter-spacing:.16em; color:var(--clay); writing-mode:vertical-rl; }.hero .annotation { right:-39px; top:85px; }
.section { padding:125px 0; }.section-head { display:flex; justify-content:space-between; gap:40px; align-items:flex-end; margin-bottom:55px; }.section-head h2,.page-intro h1 { font:clamp(40px,5.5vw,78px)/.95 var(--serif); letter-spacing:-.055em; margin:14px 0 0; max-width:680px; }.section-head p { max-width:310px; color:#5e5e56; }
.philosophy { background:var(--stone); }.philosophy-grid { display:grid; grid-template-columns:1fr 1fr; gap:90px; }.large-copy { font:clamp(27px,3.2vw,48px)/1.08 var(--serif); letter-spacing:-.035em; margin:0; }.body-copy { color:#55564f; max-width:590px; }
.editorial-list { border-top:1px solid var(--line); }.editorial-row { display:grid; grid-template-columns:85px 1fr 1fr; gap:30px; padding:22px 0; border-bottom:1px solid var(--line); align-items:baseline; }.editorial-row strong { font:26px var(--serif); }.editorial-row p { margin:0; color:#606159; }
.categories { display:grid; grid-template-columns:1.25fr .75fr; gap:80px; align-items:start; }.category-stage { min-height:520px; background:var(--olive); padding:40px; color:var(--ivory); position:relative; }.category-stage .image-placeholder { min-height:440px; background:linear-gradient(130deg,#b7a085,#52604a 51%,#30382f); }.category-list { margin-top:20px; border-top:1px solid var(--line); }.category-list div { display:flex; justify-content:space-between; gap:20px; padding:17px 0; border-bottom:1px solid var(--line); font:22px var(--serif); }
.process { background:var(--walnut-dark); color:var(--ivory); }.process .eyebrow { color:var(--sand); }.process .section-head p { color:#c8bfb4; }.process-line { display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid rgba(244,240,232,.45); }.process-step { min-height:210px; padding:22px 20px 22px 0; border-right:1px solid rgba(244,240,232,.3); margin-right:20px; position:relative; }.process-step:last-child { border-right:0; }.process-step b { font:12px var(--technical); color:var(--sand); letter-spacing:.15em; }.process-step h3 { font:29px var(--serif); margin:30px 0 10px; }.process-step p { color:#c8bfb4; font-size:14px; margin:0; }
.material-board { display:grid; grid-template-columns:.8fr 1.2fr .65fr; grid-template-rows:240px 320px; gap:14px; }.sample { padding:22px; position:relative; overflow:hidden; }.sample h3 { font:28px var(--serif); margin:0; position:relative; }.sample p { position:relative; max-width:200px; font-size:13px; }.sample.wood { grid-row:span 2; background:linear-gradient(110deg,#553628,#ae7f59,#4b2e24); color:var(--ivory); }.sample.texture { background:var(--sand); }.sample.finish { background:var(--clay); color:var(--ivory); }.sample.detail { background:var(--olive); color:var(--ivory); }.sample.color { background:#9b998d; }.sample:after { content:''; position:absolute; inset:40% -20% -30%; border-top:1px solid currentColor; transform:rotate(-14deg); opacity:.4; }
.location { background:var(--sand); }.location-grid { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }.address { font:clamp(28px,3.5vw,48px)/1.05 var(--serif); letter-spacing:-.04em; }.map-placeholder { min-height:310px; background:#b5b4a6; position:relative; padding:25px; background-image:linear-gradient(25deg,transparent 49%,rgba(36,37,34,.2) 50%,transparent 51%),linear-gradient(155deg,transparent 49%,rgba(36,37,34,.15) 50%,transparent 51%); }.map-placeholder img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.7); }.map-placeholder:before,.map-placeholder:after { content:''; position:absolute; border:1px solid var(--olive); inset:28px; transform:rotate(10deg); }.map-placeholder:after { inset:80px 45px; transform:rotate(-8deg); border-color:var(--clay); }.map-placeholder .technical { position:relative; z-index:2; display:inline-block; padding:8px 10px; background:rgba(244,240,232,.82); color:var(--graphite); }
.final-cta { background:var(--clay); color:var(--ivory); padding:115px 0; }.final-cta h2 { font:clamp(45px,7vw,100px)/.9 var(--serif); letter-spacing:-.06em; max-width:880px; margin:15px 0 35px; }.final-cta .button { border-color:var(--ivory); }.final-cta .button:hover { background:var(--ivory); color:var(--clay); }
.page-intro { padding:110px 0 75px; border-bottom:1px solid var(--line); }.page-intro p { font-size:18px; max-width:630px; color:#5e5e56; margin:30px 0 0; }.article { padding:78px 0 120px; }.article h2 { font:38px/1.05 var(--serif); margin:64px 0 18px; }.article p { color:#55564f; max-width:760px; font-size:16px; }.article .lead { font:28px/1.18 var(--serif); color:var(--graphite); max-width:850px; }.article-photo { width:calc(100% + 160px); margin:0 0 58px -80px; }.article-photo img { width:100%; height:min(56vw,480px); object-fit:cover; }.article-photo figcaption { font:10px var(--technical); letter-spacing:.13em; text-transform:uppercase; color:var(--clay); margin-top:10px; }
.quote { border-left:3px solid var(--clay); padding:8px 0 8px 28px; font:26px/1.2 var(--serif); max-width:700px; margin:55px 0; }.page-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin:55px 0; }.page-grid .panel { padding:35px; background:var(--stone); }.page-grid .panel:nth-child(2) { background:var(--sand); }.panel h3 { font:28px var(--serif); margin:0 0 12px; }.contact-layout { display:grid; grid-template-columns:.7fr 1.3fr; gap:85px; padding:80px 0 120px; }.contact-details p { color:#5e5e56; }.contact-details strong { display:block; color:var(--graphite); font:28px var(--serif); margin:23px 0 6px; }.contact-form { background:var(--stone); padding:38px; }.form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }.field { margin-bottom:21px; }.field label { display:block; font:11px var(--technical); text-transform:uppercase; letter-spacing:.12em; margin-bottom:7px; }.field input,.field textarea,.field select { width:100%; border:1px solid #a9aaa1; background:rgba(244,240,232,.65); padding:13px; color:var(--graphite); border-radius:0; }.field textarea { min-height:135px; resize:vertical; }.field input[aria-invalid=true],.field textarea[aria-invalid=true],.field select[aria-invalid=true] { border-color:var(--clay); }.error { display:block; color:#8e4734; font-size:12px; min-height:18px; margin-top:4px; }.submit[disabled] { opacity:.45; cursor:not-allowed; }.site-footer { padding:60px 0 30px; background:var(--graphite); color:var(--ivory); }.footer-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:45px; }.site-footer h3 { font:25px var(--serif); margin:0 0 16px; }.site-footer p,.site-footer a { color:#c9c5bc; font-size:13px; }.site-footer nav { display:grid; gap:8px; }.site-footer .social-links { display:flex; flex-wrap:wrap; gap:10px 16px; margin:0 0 18px; }.site-footer .social-links a { border-bottom:1px solid rgba(201,197,188,.35); padding-bottom:2px; }.site-footer .social-links a:hover { color:var(--ivory); border-color:var(--clay); }.footer-bottom { border-top:1px solid rgba(244,240,232,.2); margin-top:45px; padding-top:18px; color:#aaa9a2; font:10px var(--technical); text-transform:uppercase; letter-spacing:.1em; }
.modal-backdrop { position:fixed; inset:0; display:none; place-items:center; padding:22px; background:rgba(36,37,34,.72); z-index:40; }.modal-backdrop.is-open { display:grid; }.modal { width:min(520px,100%); max-height:calc(100vh - 44px); overflow:auto; background:var(--ivory); padding:40px; position:relative; }.modal h2 { font:42px var(--serif); line-height:.95; margin:0 35px 18px 0; }.modal p { color:#5e5e56; }.modal-close { position:absolute; top:16px; right:16px; border:1px solid var(--line); background:none; width:38px; height:38px; font-size:22px; }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:800px) { .container,.narrow { width:min(100% - 32px, 600px); }.header-inner{min-height:74px}.main-nav{position:fixed; inset:74px 0 0; background:var(--ivory); flex-direction:column; align-items:flex-start; padding:55px 24px; gap:15px; transform:translateX(100%); transition:transform .25s; font-size:14px}.main-nav.is-open{transform:translateX(0)}.menu-toggle{display:block}.hero{padding:70px 0 90px}.hero-grid,.philosophy-grid,.categories,.location-grid,.contact-layout{grid-template-columns:1fr;gap:45px}.hero h1{font-size:clamp(48px,15vw,80px)}.hero-visual{min-height:390px}.hero .annotation{display:none}.section{padding:85px 0}.section-head{display:block;margin-bottom:35px}.section-head p{margin-top:25px}.editorial-row{grid-template-columns:45px 1fr;gap:15px}.editorial-row p{grid-column:2}.process-line{grid-template-columns:1fr 1fr}.process-step{border-right:0;border-bottom:1px solid rgba(244,240,232,.3);margin:0;padding:22px 15px 25px 0}.material-board{grid-template-columns:1fr 1fr;grid-template-rows:240px 210px 210px}.sample.wood{grid-row:span 2}.sample h3{font-size:23px}.page-intro{padding:75px 0 55px}.page-intro h1{font-size:clamp(45px,13vw,75px)}.article{padding:52px 0 85px}.article-photo{width:100%;margin:0 0 42px}.article-photo img{height:58vw;min-height:220px}.page-grid{grid-template-columns:1fr}.form-row,.footer-grid{grid-template-columns:1fr}.contact-form{padding:24px}.modal{padding:30px 24px}.modal h2{font-size:36px} }
@media (max-width:390px){.brand-copy{font-size:9px}.brand-copy strong{font-size:20px}.logo-placeholder{width:45px;height:45px}.hero-visual{min-height:330px}.material-board{display:block}.sample{min-height:190px;margin-bottom:12px}.process-line{grid-template-columns:1fr}.button{width:100%}.actions{display:grid}.section-head h2{font-size:42px}}
