:root { --navy:#031a2c; --stone:#e1dfd9; --ink:#10100e; --white:#fbfaf6; --line:rgba(3,26,44,.24); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--navy); background:var(--white); font-family:Georgia, 'Times New Roman', serif; }
.site-header { min-height:104px; padding:0 5vw; display:flex; gap:35px; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:var(--white); position:fixed; inset:0 0 auto; z-index:10; }
.brand { display:block; flex:0 0 auto; padding:0; background:transparent; text-decoration:none; }
.brand-logo { display:block; width:112px; height:84px; object-fit:contain; }
nav { display:flex; gap:28px; font:13px Arial,sans-serif; } nav a { color:var(--navy); text-decoration:none; }
.button { display:inline-flex; justify-content:center; padding:16px 22px; border:1px solid var(--navy); background:var(--navy); color:var(--white); font:700 11px Arial,sans-serif; letter-spacing:.08em; text-decoration:none; text-transform:uppercase; }
.button-small { padding:13px 16px; background:var(--navy); color:var(--white); border-color:var(--navy); }
.hero { min-height:680px; display:flex; background:var(--stone); position:relative; overflow:hidden; }
.hero-kitchen { background:linear-gradient(90deg,rgba(6,19,30,.92) 0%,rgba(6,19,30,.63) 43%,rgba(6,19,30,.12) 100%),url('assets/qandr-kitchen-project-wide.png') center/cover no-repeat; }
.hero-copy { max-width:640px; padding:185px 7vw 100px; align-self:center; position:relative; z-index:1; color:var(--white); }
.eyebrow { margin:0 0 18px; font:700 10px Arial,sans-serif; letter-spacing:.16em; }
h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:28px; font-size:clamp(55px,7.1vw,105px); line-height:.9; letter-spacing:-.075em; font-weight:400; }
h2 { font-size:clamp(40px,5vw,73px); line-height:.95; letter-spacing:-.065em; font-weight:400; } h3 { font-size:37px; font-weight:400; letter-spacing:-.05em; }
.hero-text { max-width:505px; font-size:20px; line-height:1.45; } .actions { display:flex; gap:25px; align-items:center; margin-top:35px; }.hero-kitchen .text-link { color:var(--white); }.hero-kitchen .button { background:var(--white); color:var(--navy); border-color:var(--white); }
.text-link { color:var(--navy); font:700 11px Arial,sans-serif; letter-spacing:.08em; text-decoration:none; text-transform:uppercase; } .text-link span { margin-left:7px; font-size:17px; }
.asset-slot { min-height:350px; display:grid; place-items:center; padding:25px; background:linear-gradient(135deg,#b6b5ad,#697683); color:var(--white); text-align:center; font:700 10px Arial,sans-serif; letter-spacing:.14em; }
.asset-slot:before { content:''; width:76%; height:72%; border:1px solid rgba(255,255,255,.52); position:absolute; } .asset-slot { position:relative; } .asset-slot span { z-index:1; max-width:150px; }
.hero-media { min-height:100%; background:linear-gradient(135deg,#172d40,#7d8a83); }.hero-media:after { content:'ENRIQUE / CREW / ACTUAL WORK'; position:absolute; right:30px; bottom:30px; font:700 9px Arial,sans-serif; letter-spacing:.14em; }
.vision { display:grid; grid-template-columns:1.05fr .95fr; gap:90px; padding:150px 7vw; background:var(--white); align-items:end; } .vision h2 { margin-bottom:34px; } .vision-copy { max-width:660px; margin:0; font-size:20px; line-height:1.55; } .vision-media { min-height:560px; margin:0; position:relative; overflow:hidden; background:var(--stone); } .vision-media img { width:100%; height:100%; min-height:560px; object-fit:cover; object-position:center 24%; display:block; } .vision-media figcaption { position:absolute; left:0; right:0; bottom:0; margin:0; padding:15px 18px; background:linear-gradient(transparent,rgba(0,0,0,.78)); color:var(--white); font:700 9px Arial,sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.services { padding:100px 7vw 140px; background:var(--navy); color:var(--white); }.service-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:50px; margin-top:65px; }.service-card { max-width:550px; }.service-image { display:block; width:100%; min-height:440px; object-fit:cover; }.tall { min-height:440px; }.dark { background:linear-gradient(135deg,#122d42,#4e504e); }.service-number { margin:24px 0 9px; font:700 10px Arial,sans-serif; letter-spacing:.15em; }.service-card p { font-size:17px; line-height:1.5; }.service-card .text-link { color:var(--white); }
.projects { padding:150px 7vw; }.split { display:grid; grid-template-columns:1.3fr .7fr; gap:60px; align-items:end; }.split > p { font-size:18px; line-height:1.5; }.project-grid { display:grid; grid-template-columns:1.1fr .7fr .7fr; gap:18px; margin-top:60px; }.project-grid .asset-slot { min-height:400px; }.project-card { margin:0; min-height:400px; position:relative; overflow:hidden; background:var(--navy); }.project-card img { width:100%; height:100%; min-height:400px; object-fit:cover; display:block; }.project-card figcaption { position:absolute; left:0; right:0; bottom:0; padding:15px 18px; background:linear-gradient(transparent,rgba(0,0,0,.78)); color:var(--white); font:700 9px Arial,sans-serif; letter-spacing:.12em; text-transform:uppercase; }.project-one { background:linear-gradient(125deg,#8f947e,#172b3c); }.project-two { background:linear-gradient(125deg,#455b5a,#cabd9e); }.project-three { background:linear-gradient(125deg,#a79075,#18304b); }
.process { padding:135px 7vw; background:var(--stone); }.process h2 { max-width:850px; }.process ol { margin:60px 0 0; padding:0; list-style:none; border-top:1px solid var(--line); }.process li { display:grid; grid-template-columns:110px 1fr; padding:23px 0; border-bottom:1px solid var(--line); font-size:21px; }.process strong { font:700 11px Arial,sans-serif; letter-spacing:.15em; }
.reviews { padding:135px 7vw; background:var(--white); }.reviews p:last-child { max-width:600px; font-size:19px; line-height:1.5; }.faq { padding:130px 7vw; background:var(--stone); }.faq-list { margin:60px 0 0; border-top:1px solid var(--line); }.faq details { border-bottom:1px solid var(--line); }.faq summary { cursor:pointer; list-style:none; padding:25px 48px 25px 0; position:relative; font-size:clamp(21px,2.2vw,31px); letter-spacing:-.03em; }.faq summary::-webkit-details-marker { display:none; }.faq summary:after { content:'+'; position:absolute; right:0; top:20px; font:400 34px/1 Arial,sans-serif; }.faq details[open] summary:after { content:'−'; }.faq details p { max-width:720px; padding:0 0 25px; margin:0; font-size:18px; line-height:1.5; }.contact { display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; padding:130px 7vw; background:var(--navy); color:var(--white); }.contact h2 { max-width:510px; }.contact p { font-size:18px; line-height:1.5; }.estimate-form { display:grid; gap:18px; }.estimate-form label,.estimate-form legend { display:grid; gap:8px; padding:0; font:700 10px Arial,sans-serif; letter-spacing:.1em; text-transform:uppercase; }.estimate-form fieldset { min-width:0; margin:0; padding:0; border:0; }.estimate-form legend { margin-bottom:8px; }.estimate-form label span,.estimate-form legend span { color:rgba(255,255,255,.64); }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }.estimate-form input,.estimate-form textarea { box-sizing:border-box; width:100%; min-height:48px; padding:14px; border:1px solid rgba(255,255,255,.5); border-radius:0; background:transparent; color:var(--white); font:16px Georgia,serif; }.estimate-form textarea { min-height:120px; resize:vertical; }.estimate-form .newsletter-option { display:flex; align-items:center; gap:12px; font-size:10px; }.estimate-form .newsletter-option input { width:18px; min-height:18px; height:18px; margin:0; accent-color:var(--white); }.contact .button { align-self:start; background:var(--white); color:var(--navy); }
footer { padding:25px 5vw; display:flex; justify-content:space-between; background:var(--ink); color:var(--white); font:700 10px Arial,sans-serif; letter-spacing:.15em; }
.mobile-menu { display:none; }
.construction-page { padding-top:104px; background:var(--white); }
.construction-hero { display:grid; grid-template-columns:.82fr 1.18fr; min-height:calc(100vh - 104px); background:var(--stone); }
.construction-copy { align-self:center; max-width:520px; padding:90px 7vw; }
.construction-copy h1 { margin-bottom:25px; }
.construction-copy > p:not(.eyebrow) { max-width:370px; margin-bottom:34px; font-size:20px; line-height:1.5; }
.construction-photo { min-height:calc(100vh - 104px); margin:0; position:relative; overflow:hidden; background:var(--ink); }
.construction-photo img { display:block; width:100%; height:100%; min-height:calc(100vh - 104px); object-fit:cover; object-position:72% 68%; }
.construction-photo figcaption { position:absolute; right:0; bottom:0; left:0; margin:0; padding:40px 28px 20px; color:var(--white); background:linear-gradient(transparent,rgba(0,0,0,.76)); font:700 9px Arial,sans-serif; letter-spacing:.12em; text-transform:uppercase; }
@media (max-width:780px) { .site-header{min-height:96px;padding:0 6vw;flex-wrap:nowrap}.site-header > nav,.site-header > .button-small{display:none}.brand{padding:0}.brand-logo{width:96px;height:72px}.mobile-menu{display:block;position:relative;margin-left:auto}.mobile-menu summary{width:48px;height:48px;display:grid;align-content:center;gap:6px;cursor:pointer;list-style:none}.mobile-menu summary::-webkit-details-marker{display:none}.mobile-menu summary span{display:block;width:28px;height:1px;background:var(--navy);margin-left:auto}.mobile-menu[open] summary span{background:var(--navy)}.mobile-menu nav{position:absolute;top:calc(100% + 12px);right:0;display:grid;width:min(270px,88vw);padding:12px 18px;background:var(--navy);box-shadow:0 14px 30px rgba(0,0,0,.28)}.mobile-menu nav a{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.22);color:var(--white);font:700 11px Arial,sans-serif;letter-spacing:.1em;text-decoration:none;text-transform:uppercase}.mobile-menu nav a:last-child{border:0}.hero,.vision,.contact,.split,.construction-hero{grid-template-columns:1fr}.hero-copy{padding:175px 7vw 70px}.hero-media{min-height:410px}.service-grid,.project-grid{grid-template-columns:1fr;gap:45px}.vision,.projects,.services,.process,.reviews,.faq,.contact{padding:90px 7vw}.vision{gap:38px}.vision-copy{font-size:19px}.vision-media,.vision-media img{min-height:470px}.tall,.service-image{min-height:360px}.process li{grid-template-columns:70px 1fr;font-size:18px}.contact{gap:35px}.form-grid{grid-template-columns:1fr;gap:18px}.construction-page{padding-top:96px}.construction-copy{padding:80px 7vw}.construction-photo,.construction-photo img{min-height:640px}footer{gap:14px;flex-direction:column} }