
:root{
  --bg:#090909; --panel:#131313; --text:#f5f6f7; --muted:#b8bcc0;
  --gold:#d7b362; --gold-soft:#f3dda8; --radius:22px; --max:1220px;
  --shadow:0 24px 70px rgba(0,0,0,.42);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:Inter,Segoe UI,Arial,sans-serif; color:var(--text); line-height:1.6;
  background:
    radial-gradient(circle at top right, rgba(215,179,98,.09), transparent 18%),
    radial-gradient(circle at left center, rgba(215,179,98,.05), transparent 20%),
    var(--bg);
}
img{display:block;max-width:100%}
a{color:inherit}
.container{width:min(var(--max), calc(100% - 2rem)); margin:0 auto}
.site-header{
  position:sticky; top:0; z-index:50; background:rgba(8,8,8,.86); backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.06)
}
.header-inner{min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:1rem}
.brand{display:flex; align-items:center; gap:1rem; text-decoration:none}
.brand img{width:56px; height:56px; object-fit:contain}
.brand-name{font-weight:800}
.brand-sub{font-size:.88rem; color:var(--muted)}
.nav{display:flex; gap:1rem; align-items:center; flex-wrap:wrap}
.nav a{text-decoration:none; color:#eef0f2; font-weight:600; opacity:.9}
.nav a:hover{color:var(--gold-soft)}
.nav .cta-mini{padding:.78rem 1rem; border-radius:999px; border:1px solid rgba(215,179,98,.24)}
.mobile-toggle{display:none}
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem; color:var(--gold-soft);
  text-transform:uppercase; letter-spacing:.16em; font-size:.74rem; font-weight:700
}
.eyebrow:before{content:""; width:34px; height:1px; background:linear-gradient(90deg,var(--gold),transparent)}
.hero{
  position:relative; min-height:84vh; display:grid; align-items:center; overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.05)
}
.hero:before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.62) 100%),
    url('../images/gallery-1.jpg') center/cover no-repeat;
  transform:scale(1.04)
}
.hero:after{
  content:""; position:absolute; inset:auto 0 0 0; height:34%;
  background:linear-gradient(180deg, transparent, var(--bg))
}
.hero-grid{
  position:relative; z-index:1; display:grid; grid-template-columns:1.08fr .92fr; gap:2rem; padding:7rem 0 4rem
}
.hero h1{margin:.85rem 0 1rem; font-size:clamp(2.85rem,5.1vw,5.25rem); line-height:1.01; letter-spacing:-.03em}
.hero p{max-width:700px; color:#d8dcdf; font-size:1.08rem}
.hero-actions{display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.7rem}
.btn{
  min-height:52px; display:inline-flex; align-items:center; justify-content:center;
  padding:0 1.25rem; border-radius:999px; text-decoration:none; font-weight:800; transition:.22s ease
}
.btn-primary{background:linear-gradient(135deg,var(--gold-soft),var(--gold)); color:#111; box-shadow:0 14px 34px rgba(215,179,98,.22)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-secondary{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); color:#fff}
.panel{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); box-shadow:var(--shadow)
}
.hero-card{padding:1.35rem; width:min(100%, 440px); justify-self:end}
.stat-row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.metric{padding:1rem; border-radius:16px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06)}
.metric strong{display:block; font-size:1.48rem}
.metric span{display:block; margin-top:.18rem; color:var(--muted); font-size:.92rem}
.card-list{display:grid; gap:.8rem; margin-top:1rem}
.card-chip{display:flex; justify-content:space-between; gap:.75rem; align-items:flex-start; padding:.95rem 1rem; border-radius:15px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06)}
.card-chip > div{flex:1; min-width:0}
.card-chip small{display:block; margin-top:.22rem; line-height:1.45; color:var(--muted)}
.section{padding:5.3rem 0}
.section-heading{display:flex; justify-content:space-between; align-items:end; gap:1rem; flex-wrap:wrap; margin-bottom:2rem}
.section-heading h2{margin:.6rem 0 0; font-size:clamp(2rem,3vw,3.1rem); line-height:1.04}
.section-heading p{margin:0; color:var(--muted); max-width:760px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem}
.service-card{padding:1.4rem}
.service-card h3{margin:.25rem 0 .5rem; font-size:1.18rem}
.service-card p{margin:0; color:var(--muted)}
.price{display:inline-flex; margin-top:1rem; font-weight:800; color:var(--gold-soft)}
.kicker{color:var(--gold-soft); text-transform:uppercase; letter-spacing:.16em; font-size:.8rem}
.note-band{padding:1rem 1.2rem; border-radius:16px; background:rgba(215,179,98,.09); border:1px solid rgba(215,179,98,.18); color:#efdfb7}
.slider-shell,.seo-columns,.review-showcase,.form-shell,.cta-band{display:grid; grid-template-columns:1.06fr .94fr; gap:1.5rem; align-items:center}
.ba-wrap{position:relative; overflow:hidden; border-radius:var(--radius); border:1px solid rgba(255,255,255,.08); background:#111; box-shadow:var(--shadow)}
.ba-wrap img{width:100%; height:auto}
.ba-wrap .after{position:absolute; inset:0 auto 0 0; width:50%; overflow:hidden}
.ba-wrap .after img{width:200%; max-width:none; height:100%; object-fit:cover; object-position:right center}
.ba-handle{position:absolute; top:0; bottom:0; left:50%; width:2px; background:#fff}
.ba-knob{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:56px; height:56px; border-radius:50%; display:grid; place-items:center; color:#111; font-weight:900; background:linear-gradient(135deg,var(--gold-soft),var(--gold))}
.ba-range{position:absolute; inset:0; width:100%; height:100%; appearance:none; background:transparent; cursor:ew-resize}
.ba-range::-webkit-slider-thumb{appearance:none; width:56px; height:56px; opacity:0}
.ba-labels{position:absolute; inset:1rem 1rem auto 1rem; display:flex; justify-content:space-between; pointer-events:none}
.ba-pill{background:rgba(5,5,5,.72); border:1px solid rgba(255,255,255,.1); border-radius:999px; padding:.45rem .8rem; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase}
.review-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
.highlight,.review-card,.form-card,.info-card{padding:1.5rem}
.review-card .stars{color:var(--gold-soft); letter-spacing:.14em}
.review-card p{margin:.7rem 0 0}
.review-card small{display:block; color:var(--muted); margin-top:.75rem}
.gallery-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:1rem}
.gallery-card{grid-column:span 4; overflow:hidden; border-radius:18px; border:1px solid rgba(255,255,255,.08); background:#111; box-shadow:var(--shadow)}
.gallery-card img{width:100%; height:260px; object-fit:cover}
.gallery-card .copy{padding:1rem 1rem 1.1rem}
.gallery-card strong{display:block; font-size:1rem; margin-bottom:.2rem}
.gallery-card span{color:var(--muted); font-size:.92rem}
.gallery-card.feature{grid-column:span 6}
.form-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
label{display:block; font-size:.9rem; color:#e1e4e7; margin-bottom:.4rem}
input,select,textarea{
  width:100%; background:#0f0f10; color:#fff; border:1px solid rgba(255,255,255,.10);
  border-radius:14px; padding:.95rem 1rem; font:inherit
}
textarea{min-height:145px; resize:vertical}
.field-full{grid-column:1 / -1}
.submit-row{display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; margin-top:1rem}
.info-stack{display:grid; gap:1rem}
.info-row{display:flex; gap:1rem; align-items:flex-start; padding:1rem; border-radius:16px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06)}
.info-row strong{display:block}
.info-row span,.info-row a{color:var(--muted); text-decoration:none}
.map-embed{overflow:hidden; border-radius:18px; border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow)}
.map-embed iframe{width:100%; height:360px; border:0}
.page-hero{padding:4rem 0 2rem}
.page-hero h1{margin:.7rem 0 .6rem; font-size:clamp(2.4rem,4vw,4.05rem); line-height:1.02}
.page-hero p{color:var(--muted); max-width:760px}
.checklist{display:grid; gap:.8rem}
.check{display:flex; gap:.75rem; padding:.9rem 1rem; border-radius:14px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06)}
.check b{color:var(--gold-soft)}
.site-footer{padding:2.2rem 0 3rem; border-top:1px solid rgba(255,255,255,.06)}
.footer-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:1rem}
.footer-links{display:flex; gap:1rem; flex-wrap:wrap}
.footer-links a{text-decoration:none; color:var(--muted)}
.footer-links a:hover{color:var(--gold-soft)}
.micro{font-size:.86rem; color:var(--muted)}
.reveal{opacity:0; transform:translateY(24px); transition:opacity .65s ease, transform .65s ease}
.reveal.visible{opacity:1; transform:none}
@media (max-width:1024px){
  .hero-grid,.slider-shell,.seo-columns,.review-showcase,.form-shell,.cta-band,.footer-grid{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .mobile-toggle{display:inline-flex; width:46px; height:46px; border-radius:999px; align-items:center; justify-content:center; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); color:#fff}
  .nav{display:none; position:fixed; inset:78px 1rem auto 1rem; flex-direction:column; align-items:flex-start; background:rgba(10,10,10,.98); padding:1rem; border:1px solid rgba(255,255,255,.08); border-radius:18px; box-shadow:var(--shadow)}
  .nav.open{display:flex}
  .brand-sub{display:none}
  .grid-3,.grid-4,.review-grid,.form-grid{grid-template-columns:1fr}
  .gallery-card,.gallery-card.feature{grid-column:span 12}
}
