:root{--bg:#0f0f11;--paper:#121317;--surface:#14161a;--text:#f3f4f6;--sub:#cbd5e1;--muted:#94a3b8;--border:#22262c;--shadow:0 10px 30px rgba(0,0,0,0.35);--radius:14px;--accent:#c9a227;--gold:#c9a227;--silver:#cbd5e1}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
.noise{position:fixed;inset:0;pointer-events:none;z-index:1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.05}
.container{max-width:1100px;margin:0 auto;padding:0 24px}
.section{padding:80px 0}
h1{font-size:48px;line-height:1.1;margin:0 0 16px;font-weight:700;letter-spacing:-0.02em}
h2{font-size:28px;line-height:1.2;margin:0 0 24px;font-weight:700}
h3{font-size:18px;margin:0 0 10px;font-weight:600}
p{color:var(--sub);font-size:16px;line-height:1.6;margin:0}
a{color:var(--accent);text-decoration:none}

.navbar{position:sticky;top:0;z-index:50;background:rgba(17,17,17,0.8);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--border)}
.scrolled .navbar{background:rgba(17,17,17,0.9);backdrop-filter:saturate(180%) blur(14px)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:12px}
.brand-logo{height:44px;width:auto;border:none;border-radius:0;background:transparent;display:block;padding:0}
.brand-logo img{height:100%;width:auto;object-fit:contain;display:block}
.brand-name{font-weight:700;letter-spacing:-0.01em}
.brand-meta{display:flex;flex-direction:column}
.brand-name{font-weight:600}
.brand-sub{font-size:12px;color:var(--muted)}
.nav-links{display:flex;gap:18px;align-items:center}
.nav-links a{font-weight:500;color:var(--text)}
.nav-links .cta-link{padding:10px 14px;background:var(--gold);color:#111;border-radius:10px;border:1px solid var(--gold)}

.hero{padding-top:60px}
.hero-inner{display:grid;grid-template-columns:1.2fr 1fr;gap:36px;align-items:center}
.hero-content .sub{font-size:18px}
.hero-actions{margin:20px 0 8px;display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;border-radius:12px;padding:0 18px;font-weight:600}
.btn-primary{background:var(--gold);color:#111;border:1px solid var(--gold)}
.btn-secondary{background:var(--surface);color:var(--text);border:1px solid var(--silver)}
.trust{font-size:13px;color:var(--muted)}
.hero-visual img{width:100%;height:auto;border-radius:20px;box-shadow:var(--shadow);filter:brightness(.9) contrast(1.05) saturate(1.05)}

.section{position:relative}
.section::before{content:"";position:absolute;inset:-60px 0 auto;height:200px;background:radial-gradient(800px 200px at 20% 0, rgba(201,162,39,0.06), transparent);pointer-events:none}
.divider{height:1px;background:linear-gradient(to right, transparent, rgba(2,6,23,0.08), transparent);margin:32px 0}

.service-list{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.service-item{padding:8px 12px;background:var(--paper);border:1px solid var(--border);border-radius:999px;color:var(--text);font-weight:500}
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--paper);border:1px solid var(--border);border-radius:18px;padding:18px;box-shadow:var(--shadow)}
.icon{width:44px;height:44px;border-radius:12px;background:var(--surface);display:grid;place-items:center;margin-bottom:10px}
.icon svg{width:28px;height:28px;stroke:var(--text);fill:none;stroke-width:1.5}

.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gallery-grid figure{margin:0;background:var(--paper);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.gallery-grid img{width:100%;height:180px;object-fit:cover;display:block}
.gallery-grid figcaption{padding:10px 12px;font-size:14px;color:var(--muted)}
.gallery-cta{margin-top:18px}

.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.why-card{background:var(--paper);border:1px solid var(--border);border-radius:14px;padding:16px;box-shadow:var(--shadow)}

.faq-list details{background:var(--paper);border:1px solid var(--border);border-radius:14px;padding:12px;margin-bottom:10px}
.faq-list summary{cursor:pointer;font-weight:600;color:var(--text)}
.faq-list p{margin-top:10px}

.contact-inner{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.contact-info{background:var(--paper);border:1px solid var(--border);border-radius:18px;padding:20px;box-shadow:var(--shadow)}
.contact-meta{display:grid;gap:10px;margin-top:10px}
.meta-row{display:flex;justify-content:space-between}
.meta-label{color:var(--muted)}
.meta-value{font-weight:600}
.contact-actions{margin-top:14px}
.contact-form{background:var(--paper);border:1px solid var(--border);border-radius:18px;padding:20px;box-shadow:var(--shadow)}
.form-row{margin-bottom:12px}
.form-row label{display:block;margin-bottom:6px;font-weight:600}
.form-row input,.form-row select,.form-row textarea{width:100%;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);font-size:16px;font-family:inherit;}
.form-row input::placeholder,.form-row textarea::placeholder{color:var(--muted)}
.form-row select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='%23cbd5e1'%3E%3Cpath d='M6 8L2 4h8z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.form-row select option { background-color: var(--surface); color: var(--text); }
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-actions{display:flex;gap:12px;flex-wrap:wrap}

/* Testimonials */
.reviews-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.review-card {background:var(--paper);border:1px solid var(--border);border-radius:18px;padding:20px;box-shadow:var(--shadow)}
.stars {color:var(--gold);margin-bottom:10px}
.review-text {font-style:italic;margin-bottom:14px;color:var(--sub)}
.reviewer {font-weight:600;font-size:14px}
@media(max-width:768px){.reviews-grid{grid-template-columns:1fr}}

/* Cleaning Packages */
.packages-grid {display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:30px}
.package-card {background:var(--paper);border:1px solid var(--border);border-radius:20px;padding:30px;position:relative;overflow:hidden}
.package-card.premium {border-color:var(--gold);background:linear-gradient(to bottom right, var(--paper), #1a1810)}
.package-header {text-align:center;margin-bottom:24px;border-bottom:1px solid var(--border);padding-bottom:16px}
.package-title {font-size:24px;font-weight:700;margin-bottom:8px}
.package-price {font-size:32px;color:var(--gold);font-weight:700}
.package-features {list-style:none;padding:0;margin:0}
.package-features li {display:flex;gap:10px;margin-bottom:12px;color:var(--sub)}
.package-features li::before {content:"✓";color:var(--gold);font-weight:bold}
@media(max-width:768px){.packages-grid{grid-template-columns:1fr}}

.mobile-call{position:fixed;bottom:12px;left:0;right:0;display:none;justify-content:center;z-index:60}
.mobile-call .btn{min-width:60%;box-shadow:var(--shadow)}

.footer{background:var(--surface);border-top:1px solid var(--border);margin-top:40px}
.footer-inner{padding:30px 24px}
.footer-brand{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.footer-title{font-weight:700}
.footer-sub{color:var(--muted)}
.footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px}
.footer-heading{font-weight:700;margin-bottom:8px}
.footer-bottom{color:var(--muted);font-size:14px}

.reveal{opacity:0;transform:translateY(24px);transition:opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* Showcase Section - Photo Scrollytelling */
.showcase-section {
  padding: 0;
  position: relative;
  background: var(--bg);
}

.showcase-container {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Visual - Sticky Image */
.showcase-visual {
  position: sticky;
  top: 64px; /* Navbar height */
  height: 45vh; /* Mobile height increased slightly */
  width: 100%;
  z-index: 10; /* Image on top */
  background: #000;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.visual-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.showcase-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
  filter: brightness(0.8);
}

.showcase-img.active {
  opacity: 1;
}

.visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.4));
  pointer-events: none;
}

/* Content - Scrolling Text */
.showcase-content {
  position: relative;
  z-index: 5; /* Content goes BEHIND the image */
  margin-top: 0; 
  padding-bottom: 80px;
}

.content-spacer {
  height: 45vh; /* Push content down to start below image */
}

.showcase-block {
  min-height: 60vh; /* Reduced height to keep flow tighter */
  display: flex;
  align-items: flex-start; /* Align to top of its space */
  justify-content: center;
  padding: 20px;
  padding-top: 40px; 
}

.block-card {
  background: rgba(18, 19, 23, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  padding: 24px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  max-width: 500px;
  width: 100%;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.6s ease;
}

.showcase-block.visible .block-card {
  transform: translateY(0);
  opacity: 1;
}

.block-card h2 {
  font-size: 24px;
  margin-bottom: 12px;
  color: var(--text);
}

.block-card p {
  font-size: 16px;
  color: var(--sub);
  margin-bottom: 20px;
}

.block-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.block-card li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 500;
}

.block-card li::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a227' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Desktop Styles */
@media (min-width: 1024px) {
  .showcase-container {
    flex-direction: row;
  }
  
  .showcase-visual {
    height: calc(100vh - 64px);
    flex: 1;
    order: 2; /* Image on right */
  }

  .showcase-content {
    flex: 1;
    margin-top: 0;
    padding-bottom: 0;
  }

  .showcase-block {
    min-height: 100vh;
  }
  
  .content-spacer {
    display: none;
  }
}

@media (max-width:1024px){
  .gallery-grid{grid-template-columns:repeat(3,1fr)}
}


@media (max-width:1024px){
  .hero-inner{grid-template-columns:1fr}
  .cards-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:repeat(3,1fr)}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .contact-inner{grid-template-columns:1fr}
}

@media (max-width:1023px){
  /* Removed old showcase styles */
}

@media (max-width:640px){
  h1{font-size:34px}
  .nav-links{display:none}
  .section{padding:64px 0}
  .cards-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .mobile-call{display:flex}
}
.trust-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:var(--paper);border:1px solid var(--border);color:var(--text);font-weight:600}
.badge-dot{width:8px;height:8px;border-radius:50%;background:var(--gold)}

.stats{padding:60px 0}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stat{background:var(--paper);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(201,162,39,0.15),transparent);transform:translateX(-100%);animation:shimmer 6s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.stat-title{font-weight:700;margin-bottom:6px}
n.stat-sub{color:var(--muted)}

.card:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(2,6,23,0.12)}
.stagger-parent .stagger-item{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
.stagger-parent .stagger-item.in{opacity:1;transform:translateY(0)}
.gallery-grid figure{transition:transform .3s ease}
.gallery-grid figure:hover{transform:translateY(-3px)}
.gallery-grid figure img{transition:transform .3s ease}
.gallery-grid figure:hover img{transform:scale(1.03)}
@keyframes sceneIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes liIn{to{opacity:1;transform:translateY(0)}}