:root{
  --bg:#0A0A0B; --bg2:#0F0E0C; --panel:#15140F; --panel2:#1B1914;
  --gold:#EAB93B; --gold-bright:#FFD96A; --gold-deep:#C2962B;
  --text:#EFEAE0; --muted:#9C9688; --line:#262420; --line2:#3A372E;
  --maxw:1240px;
  --r-sm:12px; --r:18px; --r-lg:26px; --r-pill:100px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(85% 55% at 50% -12%, rgba(255,209,90,.16), transparent 60%) fixed,
    var(--bg);
  color:var(--text);
  font-family:'Manrope',system-ui,sans-serif; font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3{font-family:'Cinzel',serif; font-weight:600; line-height:1.16; letter-spacing:.01em}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px}
.eyebrow{font-family:'Manrope'; font-weight:700; font-size:11.5px; letter-spacing:.36em; text-transform:uppercase; color:var(--gold); display:inline-block}
.btn{display:inline-flex; align-items:center; gap:.5em; font-weight:700; font-size:14.5px; letter-spacing:.04em; padding:16px 32px; border-radius:var(--r-pill); border:1px solid transparent; cursor:pointer; transition:.28s ease; font-family:'Manrope'}
.btn-gold{background:linear-gradient(180deg,#FFE067,#F5C518); color:#1a1404; border-color:#FFE067; box-shadow:0 10px 36px -12px rgba(245,197,24,.75)}
.btn-gold:hover{filter:brightness(1.06); transform:translateY(-2px); box-shadow:0 18px 44px -10px rgba(245,197,24,.85)}
.btn-ghost{background:rgba(0,0,0,.25); color:var(--text); border-color:rgba(228,197,114,.45)}
.btn-ghost:hover{border-color:var(--gold-bright); color:var(--gold-bright)}
:focus-visible{outline:2px solid var(--gold-bright); outline-offset:3px; border-radius:1px}

/* ---------- Header ---------- */
header{position:sticky; top:0; z-index:50; background:rgba(10,10,11,.82); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; height:78px}
.brand{display:flex; align-items:center; gap:14px}
.brand img{height:40px; width:auto}
.brand .name{font-family:'Cinzel'; font-weight:600; font-size:15px; letter-spacing:.08em; color:var(--gold); line-height:1.14; max-width:300px}
.brand .name span{display:block; font-size:9px; letter-spacing:.36em; color:var(--muted); margin-top:4px}
.nav-links{display:flex; gap:36px; align-items:center}
.nav-links a{font-size:13.5px; font-weight:600; letter-spacing:.06em; color:var(--muted); transition:.2s; text-transform:uppercase}
.nav-links a:hover{color:var(--gold-bright)}
.nav .btn{padding:12px 22px; text-transform:none; letter-spacing:.02em}
.burger{display:none; background:none; border:0; color:var(--gold); font-size:26px; cursor:pointer}

/* ---------- Hero ---------- */
.hero{position:relative; min-height:88vh; display:flex; align-items:center; overflow:hidden; border-bottom:1px solid var(--line)}
.hero-bg{position:absolute; inset:0; z-index:0; background-image:url("/assets/hero.jpg"); background-size:cover; background-position:center 38%; transform:scale(1.06); animation:slowzoom 22s ease-out forwards}
@keyframes slowzoom{to{transform:scale(1.0)}}
.hero-bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(7,7,8,.92) 0%, rgba(7,7,8,.74) 42%, rgba(7,7,8,.30) 100%),
             linear-gradient(0deg, rgba(7,7,8,.85), transparent 45%)}
.hero-inner{position:relative; z-index:2; max-width:760px; padding:120px 0}
.hero h1{font-size:clamp(2.6rem,6.2vw,5rem); font-weight:700; margin:24px 0 0; text-shadow:0 2px 30px rgba(0,0,0,.5)}
.hero h1 em{font-style:normal; background:linear-gradient(180deg,#FFEFC0,var(--gold-bright)); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 28px rgba(255,217,106,.6))}
.hero p.lead{font-family:'Cormorant Garamond'; font-size:clamp(1.3rem,2.4vw,1.7rem); color:#E4DED2; max-width:560px; margin:26px 0 38px; line-height:1.5}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap}
.hero-fade{animation:fadeUp 1.1s ease .25s both}
@keyframes fadeUp{from{opacity:0; transform:translateY(22px)}to{opacity:1; transform:none}}
.scrollhint{position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2; color:var(--gold); opacity:.7; animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* ---------- Trust strip ---------- */
.trust{background:var(--panel); border-bottom:1px solid var(--line)}
.trust .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding-top:24px; padding-bottom:24px}
.trust .item{padding:26px 20px; text-align:center; background:var(--bg2); border:1px solid var(--line); border-radius:var(--r)}
.trust .num{font-family:'Cinzel'; font-size:1.35rem; color:var(--gold-bright); font-weight:600; letter-spacing:.02em}
.trust .lbl{font-size:12px; letter-spacing:.08em; color:var(--muted); margin-top:6px; text-transform:uppercase}

/* ---------- Section base ---------- */
section.block{padding:108px 0}
.head{max-width:700px; margin-bottom:60px}
.head h2{font-size:clamp(2rem,4.2vw,3.1rem); margin:18px 0 0}
.head p{color:var(--muted); margin-top:20px; font-size:1.08rem; max-width:600px}
.rule{display:flex; align-items:center; gap:14px; color:var(--gold)}
.rule::after{content:""; height:1px; width:64px; background:linear-gradient(90deg,var(--gold),transparent)}

/* ---------- Services ---------- */
.services{display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:18px}
.svc{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:44px 34px; transition:.35s ease; position:relative}
.svc:hover{background:var(--panel2); border-color:var(--line2); transform:translateY(-5px); box-shadow:0 18px 40px -22px rgba(0,0,0,.8)}
.svc .ico{width:44px; height:44px; color:var(--gold); margin-bottom:26px}
.svc h3{font-size:1.4rem; font-weight:600}
.svc p{color:var(--muted); margin-top:16px; font-size:.98rem}
.svc ul{list-style:none; margin-top:20px; display:flex; flex-direction:column; gap:10px}
.svc li{font-size:.92rem; color:var(--text); padding-left:20px; position:relative}
.svc li::before{content:""; position:absolute; left:0; top:9px; width:7px; height:7px; background:var(--gold); transform:rotate(45deg)}

/* ---------- Gallery ---------- */
.gallery{background:linear-gradient(180deg,var(--bg2),var(--bg))}
.grid{display:grid; grid-template-columns:1.4fr 1fr; grid-template-rows:1fr 1fr; gap:14px; height:600px}
.shot{position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--r-lg)}
.shot img{width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.6,.2,1)}
.shot:hover img{transform:scale(1.06)}
.shot.big{grid-row:1 / span 2}
.shot .cap{position:absolute; left:0; right:0; bottom:0; padding:22px 20px 16px; font-size:.86rem; letter-spacing:.04em; color:#F2ECDF;
  background:linear-gradient(0deg, rgba(6,6,7,.82), transparent); opacity:0; transform:translateY(8px); transition:.35s}
.shot:hover .cap{opacity:1; transform:none}
.shot .cap b{font-family:'Cinzel'; font-weight:500; display:block; font-size:.95rem; color:var(--gold-bright)}

/* ---------- Process ---------- */
.process{background:var(--bg)}
.steps{display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--line)}
.step{padding:44px 32px; border-right:1px solid var(--line)}
.step:first-child{padding-left:0}
.step:last-child{border-right:0; padding-right:0}
.step .n{font-family:'Cinzel'; font-size:1.05rem; color:var(--gold-deep); font-weight:700; letter-spacing:.12em}
.step .bar{height:2px; background:var(--line2); margin:20px 0; position:relative}
.step .bar::after{content:""; position:absolute; left:0; top:0; height:2px; width:28px; background:var(--gold)}
.step h3{font-size:1.05rem; font-weight:600}
.step p{color:var(--muted); font-size:.9rem; margin-top:10px}

/* ---------- Why ---------- */
.why{display:grid; grid-template-columns:1.05fr .95fr; gap:70px; align-items:center}
.why-list{display:grid; gap:28px; margin-top:10px}
.why-item{display:flex; gap:18px; align-items:flex-start}
.why-item .k{flex:0 0 auto; width:44px; height:44px; border:1px solid var(--line2); border-radius:50%; display:grid; place-items:center; color:var(--gold)}
.why-item h3{font-size:1.12rem; font-weight:600}
.why-item p{color:var(--muted); font-size:.95rem; margin-top:6px}
.why-card{background:var(--panel); border:1px solid var(--line); padding:52px 44px; border-radius:var(--r-lg); position:relative; overflow:hidden}
.why-card::before{content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 22px, rgba(194,160,78,.045) 22px 23px); pointer-events:none}
.why-card img{height:92px; margin:0 auto 28px; position:relative}
.why-card .q{font-family:'Cormorant Garamond'; font-style:italic; font-size:1.85rem; text-align:center; color:var(--text); line-height:1.4; position:relative}
.why-card .qs{display:block; color:var(--muted); font-family:'Manrope'; font-size:.82rem; letter-spacing:.24em; text-transform:uppercase; margin-top:24px; text-align:center}

/* ---------- Contact ---------- */
.contact{background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:70px}
.contact-info h2{font-size:clamp(2rem,4.2vw,2.9rem); margin-top:18px}
.contact-info p.sub{color:var(--muted); margin-top:20px; font-size:1.05rem}
.cdetail{margin-top:38px; display:grid; gap:22px}
.cdetail a, .cdetail div{display:flex; gap:15px; align-items:center; color:var(--text); font-size:1.04rem}
.cdetail a:hover{color:var(--gold-bright)}
.cdetail .ico{width:22px; height:22px; color:var(--gold); flex:0 0 auto}
.cdetail small{display:block; color:var(--muted); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:2px}
form{background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg); padding:40px}
.field{margin-bottom:18px}
.field label{display:block; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; font-weight:600}
.field input,.field select,.field textarea{width:100%; background:var(--panel2); border:1px solid var(--line2); color:var(--text); padding:14px 16px; border-radius:var(--r-sm); font-family:'Manrope'; font-size:15px; transition:.2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--gold); background:#201d16}
.field textarea{resize:vertical; min-height:112px}
form .btn{width:100%; justify-content:center; margin-top:6px}
.note{font-size:.8rem; color:var(--muted); margin-top:16px; text-align:center}
.formok{display:none; text-align:center; padding:36px 12px}
.formok.show{display:block}
.formok .ico{width:50px; height:50px; color:var(--gold-bright); margin:0 auto 18px}
.formok h3{font-size:1.45rem}
.formok p{color:var(--muted); margin-top:10px}

/* ---------- Footer ---------- */
footer{padding:58px 0 42px}
.foot{display:flex; justify-content:space-between; align-items:flex-start; gap:44px; flex-wrap:wrap}
.foot .brand img{height:36px}
.foot-brand img{height:88px; width:auto}
.foot p{color:var(--muted); font-size:.92rem; max-width:340px; margin-top:18px}
.foot nav{display:flex; gap:32px; flex-wrap:wrap}
.foot nav a{color:var(--muted); font-size:.9rem; transition:.2s; text-transform:uppercase; letter-spacing:.05em}
.foot nav a:hover{color:var(--gold-bright)}
.copy{margin-top:44px; padding-top:26px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--muted); font-size:.82rem}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal-in{opacity:1; transform:none}

/* ---------- Reviews ---------- */
.reviews{background:linear-gradient(180deg,var(--bg),var(--bg2))}
.rev-head{text-align:center; max-width:640px; margin:0 auto 56px}
.rev-head .eyebrow{margin-bottom:16px}
.rev-head h2{font-size:clamp(2rem,4.2vw,3rem)}
.tgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.tcard{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:36px 32px; transition:.35s ease}
.tcard:hover{border-color:var(--line2); transform:translateY(-5px); box-shadow:0 18px 40px -22px rgba(0,0,0,.8)}
.tcard .stars{color:var(--gold-bright); letter-spacing:.2em; font-size:1.05rem}
.tcard blockquote{font-family:'Cormorant Garamond'; font-style:italic; font-size:1.4rem; line-height:1.45; color:var(--text); margin:18px 0 22px}
.tcard figcaption{color:var(--muted); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase}

/* ---------- Statement CTA band ---------- */
.cta-band{position:relative; overflow:hidden; text-align:center; padding:128px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.cta-bg{position:absolute; inset:0; z-index:0; background-size:cover; background-position:center 42%; transform:scale(1.06); transition:transform 1.4s ease}
.cta-band:hover .cta-bg{transform:scale(1)}
.cta-bg::after{content:""; position:absolute; inset:0; background:radial-gradient(120% 110% at 50% 50%, rgba(8,8,9,.58), rgba(7,7,8,.9)), linear-gradient(0deg, rgba(7,7,8,.6), transparent 60%)}
.cta-band .bandtext{position:relative; z-index:2; max-width:700px; margin:0 auto}
.cta-band h2{font-size:clamp(2.2rem,4.8vw,3.6rem); margin:18px 0 0; text-shadow:0 2px 30px rgba(0,0,0,.5)}
.cta-band p{color:#E7E1D5; margin:20px auto 34px; font-family:'Cormorant Garamond'; font-size:clamp(1.25rem,2.2vw,1.55rem); max-width:540px; line-height:1.5}

/* ---------- About ---------- */
.about-inner{max-width:780px}
.about-inner h2{font-size:clamp(2rem,4.4vw,3rem); margin:18px 0 0}
.about-inner p{color:var(--muted); margin-top:20px; font-size:1.08rem}
.about-inner .btn{margin-top:34px}

/* ---------- Standards ---------- */
.cred-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.cred{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:36px 30px; transition:.35s ease}
.cred:hover{border-color:var(--line2); transform:translateY(-5px); box-shadow:0 18px 40px -22px rgba(0,0,0,.8)}
.cred .ico{width:40px; height:40px; color:var(--gold); margin-bottom:22px}
.cred h3{font-size:1.12rem; font-weight:600}
.cred p{color:var(--muted); font-size:.94rem; margin-top:12px}

/* ---------- FAQ ---------- */
.faq-list{display:grid; gap:12px; max-width:880px}
.faq-list details{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:border-color .3s}
.faq-list details[open]{border-color:var(--line2)}
.faq-list summary{list-style:none; cursor:pointer; padding:22px 26px; font-family:'Cinzel'; font-weight:500; font-size:1.06rem; color:var(--text); display:flex; justify-content:space-between; align-items:center; gap:16px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+"; color:var(--gold-bright); font-family:'Manrope'; font-weight:700; font-size:1.5rem; line-height:1; transition:transform .3s ease; flex:0 0 auto}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list .ans{padding:0 26px 24px}
.faq-list .ans p{color:var(--muted); font-size:1rem; margin:0; line-height:1.65}

/* ---------- WhatsApp float + mobile bar ---------- */
.wafloat{position:fixed; right:22px; bottom:22px; z-index:60}
.wafloat a{display:grid; place-items:center; width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff; box-shadow:0 12px 30px -8px rgba(37,211,102,.6); transition:.25s ease}
.wafloat a:hover{transform:translateY(-3px) scale(1.05)}
.wafloat svg{width:30px; height:30px}
.mobilebar{display:none}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .why{grid-template-columns:1fr; gap:46px}
  .contact-grid{grid-template-columns:1fr; gap:44px}
  .tgrid{grid-template-columns:1fr}
  .cred-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr; gap:16px; border-top:0}
  .step{border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); padding:32px 28px}
  .step:first-child{padding-left:28px}
  .step:last-child{padding-right:28px}
  .grid{grid-template-columns:1fr 1fr; height:auto; grid-template-rows:none}
  .shot.big{grid-row:auto; grid-column:1 / span 2}
  .shot{height:260px}
  .shot .cap{opacity:1; transform:none}
}
@media(max-width:900px){
  .nav-links{display:none}
  .burger{display:block}
  .nav-links.open{display:flex; position:absolute; top:78px; left:0; right:0; flex-direction:column; background:var(--bg2); border-bottom:1px solid var(--line); padding:20px 32px; gap:18px}
  .nav-links.open .btn{width:100%; justify-content:center}
}
@media(max-width:680px){
  .nav-links{display:none}
  .burger{display:block}
  .steps{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .shot.big{grid-column:auto}
  section.block{padding:72px 0}
  .cta-band{padding:84px 0}
  .hero-inner{padding:96px 0}
  .cred-grid{grid-template-columns:1fr}
  body{padding-bottom:64px}
  .wafloat{display:none}
  .mobilebar{display:grid; grid-template-columns:1fr 1fr 1fr; position:fixed; left:0; right:0; bottom:0; z-index:60; background:rgba(10,10,11,.97); backdrop-filter:blur(12px); border-top:1px solid var(--line2)}
  .mobilebar a{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:11px 6px; font-size:10.5px; font-weight:700; letter-spacing:.05em; color:var(--text); text-transform:uppercase}
  .mobilebar a svg{width:20px; height:20px}
  .mobilebar a:first-child{color:var(--gold-bright)}
  .mobilebar a + a{border-left:1px solid var(--line)}
  .trust .wrap{grid-template-columns:1fr 1fr}
  .brand img{height:34px}
  .brand .name{font-size:11.5px; letter-spacing:.04em; max-width:200px; line-height:1.2}
  .brand .name span{font-size:8px; letter-spacing:.2em; margin-top:3px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important; scroll-behavior:auto!important}
  .hero-bg{transform:none}
  .reveal{opacity:1!important; transform:none!important}
}

/* ===== Multi-page additions ===== */
.cta-bg{background-image:url('/assets/gate-estate.jpg')}
.page-hero{position:relative; padding:124px 0 62px; border-bottom:1px solid var(--line); overflow:hidden}
.page-hero::before{content:""; position:absolute; inset:0; background:radial-gradient(80% 120% at 50% -20%, rgba(255,209,90,.10), transparent 62%); pointer-events:none}
.page-hero .wrap{position:relative; z-index:2}
.page-hero h1{font-size:clamp(2.1rem,5vw,3.4rem); margin:14px 0 0}
.page-hero p.sub{color:#CFC8B8; font-family:'Cormorant Garamond'; font-size:clamp(1.2rem,2.2vw,1.55rem); margin-top:18px; max-width:660px; line-height:1.5}
.breadcrumb{font-size:12.5px; letter-spacing:.03em; color:var(--muted)}
.breadcrumb a{color:var(--muted)} .breadcrumb a:hover{color:var(--gold-bright)}
.prose{max-width:770px}
.prose>p{color:var(--muted); margin-top:18px; font-size:1.06rem}
.prose h2{font-size:clamp(1.6rem,3.4vw,2.2rem)}
.prose h3{font-size:1.22rem; margin-top:38px; color:var(--text)}
.checklist{list-style:none; margin:24px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:12px}
.checklist li{position:relative; padding-left:26px; color:var(--text); font-size:.98rem}
.checklist li::before{content:""; position:absolute; left:0; top:9px; width:9px; height:9px; background:var(--gold); transform:rotate(45deg)}
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px}
.chips a,.chips span{border:1px solid var(--line2); border-radius:var(--r-pill); padding:9px 18px; font-size:.9rem; color:var(--text); background:var(--panel); transition:.25s}
.chips a:hover{border-color:var(--gold); color:var(--gold-bright)}
.svc.link h3{display:flex; justify-content:space-between; align-items:center; gap:10px}
.svc.link h3::after{content:"\2192"; color:var(--gold); transition:transform .25s}
.svc.link:hover h3::after{transform:translateX(4px)}
.foot-cols{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:36px; align-items:start}
.foot-col h4{font-family:'Cinzel'; font-size:.92rem; color:var(--gold); font-weight:600; margin-bottom:15px; letter-spacing:.06em}
.foot-col nav{display:flex; flex-direction:column; gap:9px}
.foot-col nav a{color:var(--muted); font-size:.9rem}
.foot-col nav a:hover{color:var(--gold-bright)}
.foot-contact{font-size:.92rem; margin-top:14px; color:var(--muted)}
.foot-contact a{color:var(--muted)} .foot-contact a:hover{color:var(--gold-bright)}
@media(max-width:900px){ .foot-cols{grid-template-columns:1fr 1fr} }
@media(max-width:680px){ .checklist{grid-template-columns:1fr} .foot-cols{grid-template-columns:1fr} .page-hero{padding:104px 0 48px} }