/* ================= black & gold theme (loaded after style.css) ================= */
:root{
  --navy:#1d1710; --navy-deep:#0d0b08; --ink:#2a231a; --ink-soft:#6b6052;
  --gold:#b98a36; --gold-deep:#9a6f22; --gold-soft:#f1e3c6; --gold-lite:#e3bd72;
  --paper:#fbf7f0; --paper-alt:#f4ecdf; --line:rgba(60,45,20,.16); --line-gold:rgba(185,138,54,.55);
  --black:#0f0d0a; --shadow:0 18px 44px -24px rgba(0,0,0,.55);
}
body{background:var(--paper)}
.btn-gold{background:linear-gradient(180deg,#d2a652,#b0822e); color:#1a1408; font-weight:600}
.btn-gold:hover{background:linear-gradient(180deg,#dcb466,#b98a36)}
.btn-ghost{border-color:rgba(227,189,114,.7); color:#f3e6cb; background:rgba(0,0,0,.25)}
.btn-ghost:hover{background:rgba(227,189,114,.14)}
.btn-line{background:transparent}

/* header */
header.site{background:rgba(13,11,8,.96); border-bottom:1px solid rgba(227,189,114,.22)}
.brand img{height:38px}
nav.main > a, .dd > a{color:#e9e2d4}
nav.main > a:hover, .dd > a:hover{color:var(--gold-lite)}
nav.main > a::after, .dd > a::after{background:var(--gold-lite)}
.dd-menu{background:#17130d; border-color:rgba(227,189,114,.25); border-top-color:var(--gold)}
.dd-menu a{color:#e9e2d4}
.dd-menu a:hover{background:rgba(227,189,114,.14); color:var(--gold-lite)}
.menu-btn{color:var(--gold-lite); border-color:rgba(227,189,114,.4)}
@media (max-width:980px){
  nav.main{background:#12100c; border-bottom-color:rgba(227,189,114,.22)}
  nav.main > a, .dd > a, .dd-menu a{border-bottom-color:rgba(227,189,114,.14)}
}

/* dark sections */
.dark{background:var(--black) radial-gradient(900px 260px at 85% 0%,rgba(185,138,54,.16),transparent 70%); color:#d9d0bf}
.title h2{color:#7a561a}
.dark h2,.dark h4{color:var(--gold-lite)}
.dark .title p{color:#b9ae9a}
.dark .title h2::before,.dark .title h2::after{background:rgba(227,189,114,.5)}
.gold-h{color:#7a561a; font-size:clamp(26px,3.2vw,34px); margin-bottom:16px}

/* hero */
.hero{background:var(--black)}
.hero-media{width:62%}
.hero-media::after{background:linear-gradient(90deg,var(--black) 0%,rgba(15,13,10,.86) 18%,rgba(15,13,10,.25) 60%,rgba(15,13,10,.35) 100%)}
.hero h1{color:var(--gold-lite); font-size:clamp(30px,4vw,46px); line-height:1.35}
.hero .lead{color:#d6cdbc}
.hero-text{max-width:520px}
.hero .wrap{padding-top:92px; padding-bottom:92px}
@media (max-width:860px){
  .hero-media{width:100%}
  .hero-media::after{background:linear-gradient(0deg,var(--black) 0%,rgba(15,13,10,.2) 55%)}
  .hero .wrap{padding-top:24px; padding-bottom:52px}
}

/* feature strip */
.strip{border-top:1px solid rgba(227,189,114,.25); padding:34px 0}
.strip .wrap{display:grid; grid-template-columns:repeat(5,1fr)}
.strip-item{text-align:center; padding:0 16px; border-left:1px solid rgba(227,189,114,.22)}
.strip-item:first-child{border-left:none}
.strip-item svg,.col-item svg{width:36px; height:36px; color:var(--gold-lite); margin:0 auto 10px; display:block}
.strip-item h4{font-size:17px}
.strip-item p{font-size:12.5px; color:#b9ae9a; line-height:1.65; margin-top:4px}
@media (max-width:900px){
  .strip .wrap{grid-template-columns:1fr 1fr; row-gap:26px}
  .strip-item:nth-child(odd){border-left:none}
  .strip-item:last-child{grid-column:1/-1}
}

/* about */
.about{display:grid; grid-template-columns:1fr 1.25fr; gap:52px; align-items:center}
.about-img{border-radius:5px; overflow:hidden; box-shadow:var(--shadow)}
.about-img img{width:100%; height:360px; object-fit:cover}
.about .body{color:var(--ink-soft); font-size:14.5px; line-height:1.95}
.about-feats{display:grid; grid-template-columns:1fr 1fr; gap:22px 26px; margin-top:26px}
@media (max-width:900px){ .about{grid-template-columns:1fr; gap:28px} .about-img img{height:250px} }
@media (max-width:520px){ .about-feats{grid-template-columns:1fr} }

/* service cards */
.svc-cards{display:grid; grid-template-columns:repeat(5,1fr); gap:12px}
.svc-card{display:flex; flex-direction:column; background:#17130d; border-radius:5px; overflow:hidden; text-decoration:none; border:1px solid rgba(227,189,114,.25); transition:transform .25s, box-shadow .25s}
.svc-card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.svc-card img{width:100%; height:200px; object-fit:cover; object-position:bottom}
.svc-card div{padding:18px 16px 16px; display:flex; flex-direction:column; flex:1}
.svc-card h3{color:var(--gold-lite); font-size:18px}
.svc-card p{color:#cfc5b2; font-size:13px; line-height:1.7; margin-top:8px; flex:1}
.svc-card span{color:var(--gold-lite); margin-top:12px; font-size:18px}
@media (max-width:1000px){ .svc-cards{grid-template-columns:repeat(3,1fr)} }
@media (max-width:620px){ .svc-cards{grid-template-columns:1fr 1fr} .svc-card img{height:120px} }

/* featured projects intro */
.feature-intro{background:linear-gradient(180deg,#19140e 0%, #120f0b 100%); border:1px solid rgba(227,189,114,.22); border-radius:18px; padding:34px 38px; box-shadow:var(--shadow)}
.feature-copy{max-width:860px; text-align: center; margin: 0 auto;}
.feature-copy h3{color:var(--gold-lite); font-size:34px; line-height:1.22; margin:0 0 16px}
.feature-copy p{color:#d4cab9; line-height:1.9; font-size:15px; margin:0}
.feature-points{list-style:none; display:inline-grid; text-align: left;  grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 18px; padding:22px 0 0; margin:22px 0 0; border-top:1px solid rgba(227,189,114,.18)}
.feature-points li{position:relative; padding-left:16px; color:#cbbb9d; font-size:14px; line-height:1.7}
.feature-points li:before{content:''; position:absolute; left:0; top:.72em; width:6px; height:6px; border-radius:50%; background:var(--gold-lite)}
.feature-intro .more{margin-top:26px}
@media (max-width:900px){ .feature-copy h3{font-size:28px} .feature-points{grid-template-columns:1fr} }
@media (max-width:620px){ .feature-intro{padding:24px 20px} .feature-copy h3{font-size:24px} .feature-copy p{font-size:14px; line-height:1.8} }

/* icon columns */
.cols4,.cols5{display:grid; grid-template-columns:repeat(4,1fr)}
.cols5{grid-template-columns:repeat(5,1fr)}
.col-item{text-align:center; padding:0 18px; border-left:1px solid rgba(227,189,114,.22)}
.col-item:first-child{border-left:none}
.col-item h4{font-size:17px}
.col-item p{font-size:13px; color:#b9ae9a; line-height:1.7; margin-top:6px}
@media (max-width:900px){
  .cols4,.cols5{grid-template-columns:1fr 1fr; row-gap:30px}
  .col-item:nth-child(odd){border-left:none}
  .cols5 .col-item:last-child{grid-column:1/-1}
}

/* process / items on light */
.step .num{background:var(--gold-soft); color:#7a561a}
.why-item svg{color:var(--gold)}

/* faq */
.faq-wrap{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
.faq-img{border-radius:5px; overflow:hidden; box-shadow:var(--shadow)}
.faq-img img{width:100%; height:340px; object-fit:cover}
.faq-item{background:#fffdf9}
@media (max-width:900px){ .faq-wrap{grid-template-columns:1fr} .faq-img{display:none} }

/* contact + footer */
.contact{background:var(--black) radial-gradient(800px 300px at 90% 10%,rgba(185,138,54,.2),transparent 70%)}
.contact h2{color:var(--gold-lite)}
.contact .lead{color:#cfc5b2}
.info{border-left-color:rgba(227,189,114,.3)}
.info small{color:#a39780}
.info a:hover{color:var(--gold-lite)}
footer{background:#070605; color:#8f8573; border-top:1px solid rgba(227,189,114,.2)}
footer a{color:#cfc5b2}

/* inner pages */
.page-head{background:var(--black) radial-gradient(900px 260px at 85% 0%,rgba(185,138,54,.22),transparent 70%)}
.page-head h1{color:var(--gold-lite)}
.page-head p{color:#cfc5b2}
.crumbs{color:#a39780}
.crumbs a{color:var(--gold-lite)}
.pblock,.nda-box{background:#fffdf9}
.pblock h3,.dtext h2{color:#3a2a10}
.intro strong{color:#3a2a10}
.intro a,.prose a{color:var(--gold-deep)}
.pnav a{color:#3a2a10}
.lightbox{background:rgba(8,6,4,.94)}
body.gated .nda{background:rgba(8,6,4,.78)}
.nda-check{color:#3a2a10}
.hero-text{max-width:600px}
.hero h1{font-size:clamp(28px,3.6vw,42px)}
.hero .lead{max-width:500px}
@media (min-width:861px){ .hero-media::after{background:linear-gradient(90deg,var(--black) 0%,var(--black) 8%,rgba(15,13,10,.8) 26%,rgba(15,13,10,.2) 62%,rgba(15,13,10,.35) 100%)} }
.hero-media::after{left:-3px}

/* ---- round 2 tweaks ---- */
.nav-inner{max-width:1280px; gap:40px}
nav.main{gap:44px; font-size:15.5px; margin:0 auto}
.brand{flex-shrink:0}
.nav-cta{flex-shrink:0}
@media (max-width:1100px){ nav.main{gap:28px} }
.hero-media img{object-position:center top}
@media (min-width:861px){ .hero .wrap{padding-top:120px; padding-bottom:120px} .hero-media{width:60%} }
@media (max-width:860px){ .hero-media{height:auto; aspect-ratio:16/9} }
.about-img.sq img{height:auto; aspect-ratio:1/1}
.about{grid-template-columns:.9fr 1.25fr}
.dev-intro{max-width:780px; margin:0 auto 38px; text-align:center; color:#d6cdbc; font-size:15.5px; line-height:2}
.dev-list{display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
.dev-item{border:1px solid rgba(227,189,114,.28); border-radius:5px; padding:22px 18px; background:rgba(255,255,255,.03)}
.dev-item .num{font-size:26px; color:var(--gold-lite); display:block; line-height:1}
.dev-item h4{font-size:17px; margin-top:10px}
.dev-item p{font-size:13px; color:#b9ae9a; line-height:1.75; margin-top:8px}
.dev-note{color:#b9ae9a; font-size:14px; margin-bottom:16px}
@media (max-width:1000px){ .dev-list{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .dev-list{grid-template-columns:1fr} }
.dev-list{grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){ .dev-list{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .dev-list{grid-template-columns:1fr} }

/* ---- hero: whole house, centred in the free area ---- */
.hero-media::after{display:none}
.hero-media img{object-fit:contain; object-position:center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(180deg,transparent 0,#000 6%,#000 93%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(180deg,transparent 0,#000 6%,#000 93%,transparent 100%);
  mask-composite:intersect}
@media (min-width:861px){
  .hero-media{width:auto; left:calc(50% + 10px); right:24px; top:22px; bottom:22px}
  .hero .wrap{padding-top:130px; padding-bottom:130px}
  .hero-text{max-width:46%}
  .hero h1{font-size:clamp(26px,3vw,40px)}
}
@media (max-width:860px){ .hero-media{aspect-ratio:1495/785; height:auto} }

/* ---- hero v3: image fades in from the left, whole house always visible ---- */
.hero-media img{object-fit:cover; object-position:center; -webkit-mask-image:none; mask-image:none}
.hero-media::after{display:block; left:-3px; background:linear-gradient(90deg,var(--black) 0%,rgba(15,13,10,.82) 9%,rgba(15,13,10,.35) 22%,rgba(15,13,10,0) 38%)}
@media (min-width:861px){
  .hero{min-height:clamp(400px,30vw,640px); display:flex; align-items:center}
  .hero .wrap{width:100%; padding-top:40px; padding-bottom:40px}
  .hero-media{left:auto; right:0; top:0; bottom:0; width:auto; height:100%; aspect-ratio:1672/785; max-width:72%}
  .hero-text{max-width:44%}
}
@media (max-width:860px){
  .hero-media{aspect-ratio:1672/785; height:auto}
  .hero-media::after{left:0; background:linear-gradient(0deg,var(--black) 0%,rgba(15,13,10,0) 30%)}
}
@media (min-width:861px){ .hero-text{max-width:min(44%,470px)} }

/* ---- hero v4: wide image, text on solid black, fading into the picture ---- */
.hero-media img{object-fit:cover; object-position:center; -webkit-mask-image:none; mask-image:none}
@media (min-width:861px){
  .hero{aspect-ratio:3/1; min-height:300px; display:flex; align-items:center}
  .hero .wrap{width:100%; padding-top:24px; padding-bottom:24px}
  .hero-media{left:0; right:0; top:0; bottom:0; width:100%; height:100%; max-width:none; aspect-ratio:auto}
  .hero-media::after{display:block; left:0; background:linear-gradient(90deg,var(--black) 0%,var(--black) 39%,rgba(15,13,10,.82) 45%,rgba(15,13,10,.35) 51%,rgba(15,13,10,0) 59%)}
  .hero-text{max-width:min(40%,450px)}
  .hero h1{font-size:clamp(22px,2.7vw,40px)}
  .hero .lead{font-size:clamp(12.5px,1.05vw,15px); margin-top:14px}
  .hero .actions{margin-top:20px}
}
@media (max-width:860px){
  .hero-media{aspect-ratio:16/9; height:auto}
  .hero-media img{object-position:78% center}
  .hero-media::after{display:block; left:0; background:linear-gradient(0deg,var(--black) 0%,rgba(15,13,10,0) 28%)}
}
@media (min-width:861px){
  .hero-text{max-width:min(41%,490px)}
  .hero h1{font-size:clamp(22px,2.45vw,36px)}
  .hero .lead{max-width:440px}
}

/* ---- hero v5: fades to black on both sides, house centred in the picture area ---- */
@media (min-width:861px){
  .hero{aspect-ratio:auto; height:min(33.34vw,534px); min-height:300px}
  .hero-media{left:50%; right:auto; top:0; bottom:0; width:min(100%,1600px); height:100%; transform:translateX(-52%)}
  .hero-media::after{left:0; background:
    linear-gradient(90deg,var(--black) 0%,var(--black) 43%,rgba(15,13,10,.78) 47%,rgba(15,13,10,.28) 52%,rgba(15,13,10,0) 58%,rgba(15,13,10,0) 88%,rgba(15,13,10,.35) 92%,rgba(15,13,10,.8) 96%,var(--black) 99.5%)}
  .hero-text{max-width:min(39%,460px)}
  .hero h1{font-size:clamp(21px,2.3vw,34px)}
}
@media (max-width:860px){ .hero-media img{object-position:97% center} }


/* ---- Bilingual Language Switcher ---- */
.nav-actions{display:flex; align-items:center; gap:12px; flex-shrink:0}
.lang-btn{background:rgba(227,189,114,.10); border:1px solid rgba(227,189,114,.45); color:var(--gold-lite); padding:8px 13px; border-radius:4px; font-size:13px; font-weight:600; cursor:pointer; letter-spacing:.04em; transition:all .2s; white-space:nowrap; font-family:'Noto Sans SC',sans-serif}
.lang-btn:hover{background:rgba(227,189,114,.24); border-color:var(--gold-lite)}
.lang-btn .active-lang{color:#fff; font-weight:700}
.lang-btn .inactive-lang{opacity:.65; font-weight:400}
@media (max-width:980px){
  .nav-inner{gap:12px}
  .nav-actions{margin-left:auto; margin-right:6px}
}