*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f5f3ed;color:#1d2922;font-family:"DM Sans",sans-serif;line-height:1.6}.header{height:82px;padding:0 5.5vw;display:flex;align-items:center;justify-content:space-between;position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(245,243,237,.96);border-bottom:1px solid #dedbd2}.logo{position:relative;text-decoration:none;color:#1d2922;letter-spacing:.13em;display:flex;gap:5px;align-items:baseline}.logo i,.footer-logo i{font-family:"Playfair Display";font-style:italic;letter-spacing:0}.logo small{position:absolute;top:23px;left:0;font-size:6.5px;letter-spacing:.14em;white-space:nowrap}.header nav{display:flex;gap:28px;align-items:center}.header nav a{color:#1d2922;text-decoration:none;font-size:13px}.navbtn{border:1px solid #1d2922;padding:10px 16px}.hamburger{display:none;border:0;background:none;font-size:24px}.hero{display:grid;grid-template-columns:.95fr 1.05fr;min-height:100vh;padding-top:82px}.hero-content{padding:10vw 7vw;display:flex;flex-direction:column;justify-content:center}.eyebrow{font-size:10px;letter-spacing:.21em;font-weight:600;color:#748078;margin:0 0 23px}.hero h1,.contact h2,.dark-band h2{font:500 clamp(56px,7.3vw,105px)/.93 "Playfair Display";margin:0}.hero h1 em,.section h2 em,.dark-band h2 em,.contact h2 em,.testimonials h2 em{font-style:italic}.hero-description{font-size:18px;line-height:1.6;max-width:510px;margin:30px 0;color:#4e5952}.buttons{display:flex;gap:12px;flex-wrap:wrap}.btn{padding:14px 22px;text-decoration:none;font-size:13px;font-weight:600;display:inline-block}.dark{background:#1d2922;color:white}.pale{background:#dfe7dc;color:#1d2922}.outline{border:1px solid #dfe7dc;color:white}.photo{position:relative;overflow:hidden;min-height:250px;display:flex;align-items:flex-end}.photo{background-size:cover;background-position:center}.photo:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,31,23,.04),rgba(17,31,23,.18))}.photo:after{display:none}.hero-photo{background-image:url("assets/hero.jpg");background-position:center}.hero-photo:before{background:linear-gradient(90deg,rgba(17,31,23,.08),rgba(17,31,23,.02))}.photo span,.photo p,.concept{position:relative;z-index:2;color:white;text-shadow:0 1px 5px #17291f}.concept,.photo>span{margin:20px;font-size:9px;letter-spacing:.18em}.hero-photo p{position:absolute;bottom:14px;left:20px;font-size:10px;max-width:260px}.quick-services{display:grid;grid-template-columns:repeat(7,1fr);background:white;border-bottom:1px solid #dedbd2}.quick-services div{padding:22px 18px;border-right:1px solid #dedbd2}.quick-services span{display:block;font-size:9px;color:#7d877f;margin-bottom:18px}.quick-services b{display:block;font-family:"Playfair Display";font-weight:500}.quick-services small{font-size:10px;color:#747c76}.section{padding:115px 7vw}.about{display:grid;grid-template-columns:.55fr 1fr;gap:9vw;background:#ebe9e1}.label{font-size:10px;letter-spacing:.2em;font-weight:600;color:#748078}.section h2{font:500 clamp(43px,5.2vw,75px)/1.02 "Playfair Display";margin:0 0 26px}.large{font-size:21px;max-width:780px}.about p:not(.large){max-width:720px;color:#5f6861}.line-link{display:inline-block;color:#1d2922;text-decoration:none;border-bottom:1px solid #1d2922;margin-top:22px}.heading{display:flex;justify-content:space-between;gap:40px;margin:35px 0 58px}.heading p{max-width:390px}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #d0ccc3}.service-grid article{padding:22px 20px 35px;border-right:1px solid #d0ccc3;border-bottom:1px solid #d0ccc3}.service-grid article:nth-child(3n){border-right:0}.service-photo{height:260px;margin-bottom:25px}.service-grid article>span{font-size:10px;color:#788078}.service-grid h3{font:500 27px "Playfair Display";margin:12px 0 8px}.service-grid p{font-size:14px;color:#626b64}.dark-band{background:#24382c;color:#f2f1e9;text-align:center;padding:155px 7vw}.dark-band .eyebrow{color:#aebaae}.portfolio{background:#e9e8e0}.filters{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:32px}.filters button{background:transparent;border:1px solid #c6c4bb;padding:9px 14px;font:12px "DM Sans";cursor:pointer}.filters button.active{background:#1d2922;color:#fff;border-color:#1d2922}.portfolio-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:26px}.project{min-width:0}.project.feature{grid-row:span 2}.project .photo{height:350px}.project.feature .photo{height:720px}.project-meta{display:flex;justify-content:space-between;gap:20px;padding:17px 2px}.project-meta h3{font:500 24px "Playfair Display";margin:0}.project-meta small{font-size:10px;color:#727a73}.project-meta button{background:none;border:0;white-space:nowrap;text-decoration:underline;cursor:pointer}.approach{background:#f5f3ed}.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #d0ccc3}.steps>div{padding:30px 22px;border-right:1px solid #d0ccc3}.steps>div:last-child{border-right:0}.steps b{font-size:10px;color:#7c857e}.steps h3{font:500 27px "Playfair Display";margin:55px 0 8px}.steps p{color:#626a64;font-size:14px}.transformation{background:#ebe9e1}.before-after{display:grid;grid-template-columns:1fr 1fr;gap:20px}.ba-image{height:530px;position:relative;overflow:hidden;display:flex;align-items:flex-end;background-size:cover;background-position:center}.ba-image.before{background-image:url("assets/before.jpg")}.ba-image:before{content:"";position:absolute;inset:0;background-size:cover;background-position:center}.ba-image.after:before{background-image:url("assets/after.jpg")}.ba-image span{position:relative;z-index:1;color:white;margin:22px;font-size:10px;letter-spacing:.17em}.why{background:#f5f3ed}.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:10vw}.why-grid p{border-bottom:1px solid #d0ccc3;padding:15px 0;margin:0}.why-grid b{font-size:10px;color:#7a837c;margin-right:25px}.testimonials{text-align:center;background:#dfe5dc;padding:115px 7vw}.testimonials h2{font:500 clamp(45px,5vw,72px)/1.02 "Playfair Display";margin:0}.quote{max-width:720px;margin:50px auto 0}.quote span{letter-spacing:.15em}.quote blockquote{font:500 25px/1.4 "Playfair Display";margin:22px 0}.quote small{color:#687169}.contact{background:#24382c;color:#fff;text-align:center;padding:125px 7vw}.contact .eyebrow{color:#aebaae}.contact>p:not(.eyebrow){max-width:480px;margin:28px auto}.contact .buttons{justify-content:center}.contact form{max-width:760px;margin:50px auto 0;text-align:left}.contact form>div{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}.contact input,.contact select,.contact textarea{width:100%;padding:15px;border:1px solid #53665a;background:#1d3026;color:white;font:14px "DM Sans"}.contact textarea{min-height:130px;resize:vertical}.submit{margin-top:12px;background:#dfe7dc;color:#1d2922;border:0;padding:14px 22px;font-weight:600;cursor:pointer}.contact form small{display:block;margin-top:10px;color:#aebaae;font-size:10px}footer{background:#18261e;color:#cbd2ca;padding:55px 6vw;display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px}.footer-logo{color:white;text-decoration:none;letter-spacing:.12em}.footer-nav{display:flex;gap:20px;flex-wrap:wrap}.footer-nav a{color:#cbd2ca;text-decoration:none;font-size:13px}.legal{text-align:right;font-size:10px;color:#9da69f}.modal{display:none;position:fixed;inset:0;background:rgba(10,18,13,.72);z-index:50;padding:6vh 6vw;overflow:auto}.modal-box{background:#f5f3ed;max-width:1000px;margin:auto;padding:55px;position:relative}.close{position:absolute;right:20px;top:15px;border:0;background:none;font-size:30px;cursor:pointer}.modal-box h2{font:500 52px/1 "Playfair Display";margin:0 0 8px}.modal-box>p:not(.eyebrow){max-width:700px}.modal-gallery{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:30px 0}.modal-a,.modal-b{height:300px}.modal-a:before{background-image:url("assets/before.jpg")}.modal-b:before{background-image:url("assets/after.jpg")}@media(max-width:900px){.header nav{display:none}.hamburger{display:block}.hero{grid-template-columns:1fr}.hero-photo{min-height:500px}.quick-services{grid-template-columns:repeat(2,1fr)}.quick-services div{border-bottom:1px solid #dedbd2}.about,.why-grid{grid-template-columns:1fr;gap:45px}.service-grid{grid-template-columns:1fr 1fr}.service-grid article:nth-child(3n){border-right:1px solid #d0ccc3}.service-grid article:nth-child(2n){border-right:0}.portfolio-grid{grid-template-columns:1fr}.project.feature{grid-row:auto}.project.feature .photo,.project .photo{height:470px}.steps{grid-template-columns:1fr 1fr}.steps>div:nth-child(2){border-right:0}.before-after{grid-template-columns:1fr}.contact form>div{grid-template-columns:1fr}footer{grid-template-columns:1fr}.legal{text-align:left}.modal-box{padding:35px 22px}.modal-gallery{grid-template-columns:1fr}}@media(max-width:560px){.section{padding:80px 6vw}.hero-content{padding:105px 6vw 80px}.service-grid{grid-template-columns:1fr}.service-grid article,.service-grid article:nth-child(3n){border-right:0}.steps{grid-template-columns:1fr}.steps>div{border-right:0}.project.feature .photo,.project .photo{height:360px}.dark-band,.contact,.testimonials{padding:95px 6vw}.hero h1{font-size:54px}.contact h2,.dark-band h2{font-size:54px}}
.sp1{background-image:url("assets/service-residential.jpg");background-position:center;background-size:cover}
.sp2{background-image:url("assets/service-balcony.jpg");background-position:center;background-size:cover}
.sp3{background-image:url("assets/service-indoor.jpg");background-position:center;background-size:cover}
.sp4{background-image:url("assets/service-commercial.jpg");background-position:center;background-size:cover}
.sp5{background-image:url("assets/service-hospitality.jpg");background-position:center;background-size:cover}
.sp6{background-image:url("assets/service-renovation.jpg");background-position:center;background-size:cover}
.p-terrace{background-image:url("assets/project-terrace.jpg");background-position:center;background-size:cover}
.p-residential{background-image:url("assets/project-residential.jpg");background-position:center;background-size:cover}
.p-balcony{background-image:url("assets/project-balcony.jpg");background-position:center;background-size:cover}
.p-indoor{background-image:url("assets/project-indoor.jpg");background-position:center;background-size:cover}
.p-commercial{background-image:url("assets/project-commercial.jpg");background-position:center;background-size:cover}
.p-hospitality{background-image:url("assets/project-hospitality.jpg");background-position:center;background-size:cover}
.p-renovation{background-image:url("assets/project-renovation.jpg");background-position:center;background-size:cover}
/* Updated site structure */
.header nav{gap:0}.header nav a{display:inline-block}.hamburger{cursor:pointer}.header nav.mobile-open{display:flex;position:absolute;top:82px;left:0;right:0;padding:22px 7vw;background:#f5f3ed;flex-direction:column;align-items:flex-start;border-bottom:1px solid #dedbd2}
.quick-services a{padding:22px 18px;border-right:1px solid #dedbd2;text-decoration:none;color:#1d2922}.quick-services a:last-child{border-right:0}.quick-services a span{display:none}.quick-services b{font-size:17px}.quick-services a:hover b{text-decoration:underline}.quick-services small{display:block}
.space-details{display:flex;flex-direction:column;border-top:1px solid #d0ccc3}.space-detail{display:grid;grid-template-columns:1fr 1fr;min-height:520px;border-bottom:1px solid #d0ccc3}.space-detail:nth-child(even){background:#ebe9e1}.space-detail .service-photo{height:auto;min-height:520px;margin:0}.space-copy{padding:65px 6vw;display:flex;flex-direction:column;justify-content:center}.space-kicker{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#748078;margin:0 0 15px;font-weight:600}.space-copy h3{font:500 clamp(32px,3.3vw,50px)/1.08 "Playfair Display";margin:0 0 20px}.space-copy h4{font:600 11px/1 "DM Sans";letter-spacing:.15em;text-transform:uppercase;margin:22px 0 8px}.space-copy p:not(.space-kicker){color:#5f6861;max-width:600px}.space-copy .line-link{align-self:flex-start}.sp-residential{background-image:url("assets/service-residential.jpg")}.sp-balcony{background-image:url("assets/service-balcony.jpg")}.sp-terrace{background-image:url("assets/project-terrace.jpg")}.sp-indoor{background-image:url("assets/service-indoor.jpg")}.sp-commercial{background-image:url("assets/service-commercial.jpg")}.sp-hospitality{background-image:url("assets/service-hospitality.jpg")}.sp-renovation{background-image:url("assets/service-renovation.jpg")}
.case-area{background:#f8f7f2;border-top:1px solid #d0ccc3;padding:25px 2px 30px}.case-area h4{font:500 24px "Playfair Display";margin:0 0 5px}.case-area>p{font-size:12px;color:#687169;margin:0 0 18px}.upload-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}.upload-slot{min-height:210px;border:1px dashed #aeb5ae;background:#eeede7;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;position:relative;cursor:pointer;overflow:hidden}.upload-slot input{position:absolute;inset:0;opacity:0;cursor:pointer}.upload-slot strong{font:500 21px "Playfair Display"}.upload-slot small{font-size:11px;color:#727a73;margin-top:4px}.upload-icon{font-size:28px;line-height:1;margin-bottom:10px;color:#617064}.upload-slot img{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:3}.upload-slot img.show{display:block}.upload-slot.has-image strong,.upload-slot.has-image small,.upload-slot.has-image .upload-icon{opacity:0}
.portfolio-grid{grid-template-columns:1fr 1fr;gap:34px 24px}.project.feature{grid-row:auto}.project .photo,.project.feature .photo{height:390px}.project-meta{padding:17px 2px}.project-meta a{color:#1d2922;text-decoration:underline;white-space:nowrap;font-size:13px}.portfolio .project{background:transparent}.portfolio .project[data-category="residential"]{grid-column:1/-1}.portfolio .project[data-category="residential"] .photo{height:500px}
.steps h3{margin:55px 0 8px}.steps b{display:none}.testimonials h2{margin-bottom:20px}.trust-line{max-width:720px;margin:0 auto;color:#59635c;font-size:16px}.review-grid{max-width:1150px;margin:55px auto 0;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:#c5cdc3;text-align:left}.review-grid article{background:#dfe5dc;padding:35px}.review-grid span{letter-spacing:.15em;font-size:13px}.review-grid blockquote{font:500 21px/1.45 "Playfair Display";margin:18px 0}.review-grid small{color:#687169}.review-note{font-size:10px;color:#7a837c;margin:28px auto 0}
@media(max-width:900px){.space-detail{grid-template-columns:1fr}.space-detail .service-photo{min-height:400px}.portfolio-grid{grid-template-columns:1fr}.portfolio .project[data-category="residential"]{grid-column:auto}.portfolio .project[data-category="residential"] .photo,.project.feature .photo,.project .photo{height:420px}.review-grid{grid-template-columns:1fr}.upload-pair{grid-template-columns:1fr}}
@media(max-width:560px){.quick-services{grid-template-columns:repeat(2,1fr)}.quick-services a{border-bottom:1px solid #dedbd2}.space-detail .service-photo{min-height:300px}.space-copy{padding:45px 6vw}.case-area{padding:22px 0}.portfolio .project[data-category="residential"] .photo,.project.feature .photo,.project .photo{height:330px}.review-grid article{padding:28px}.review-grid blockquote{font-size:19px}}
/* Full-image display for What We Create photos: preserve the complete uploaded image without cropping. */
.space-detail .service-photo{height:auto;min-height:0;margin:0;display:flex;align-items:flex-start;justify-content:center;overflow:hidden;background:#ebe9e1;}
.space-detail .service-photo img{display:block;width:100%;height:auto;max-width:100%;object-fit:contain;}
@media(max-width:900px){.space-detail .service-photo{min-height:0;}
.space-detail .service-photo img{width:100%;height:auto;}}
/* Final image treatment: show the complete image inside each What We Create slot. */
.space-detail .service-photo {
height: 520px;
min-height: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: #ebe9e1;
}
.space-detail .service-photo img {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
object-position: center;
}
@media(max-width:900px){
.space-detail .service-photo { height: 400px; }
}
@media(max-width:560px){
.space-detail .service-photo { height: 300px; }
}