:root {
  --primary-color: #17221F;
  --secondary-color: #C6A77B;
  --bg-color: #F7F5F0;
  --dark-color: #111513;
  --text-color: #252525;
  --white-color: #FFFFFF;
  --accent-color: #A67C52;
  --border-color: #E2E0D8;
  --light-gray: #EAE8E1;
  --muted-text: #6B6B6B;

  --font-heading: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 32px;
  --spacing-xl: 64px;
  --spacing-xxl: 120px;

  --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-soft: 0 10px 30px rgba(0,0,0,0.06);
  --shadow-hover: 0 20px 50px rgba(0,0,0,0.12);
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;scroll-behavior:smooth;}
body{font-family:var(--font-body);color:var(--text-color);background-color:var(--bg-color);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);color:var(--dark-color);line-height:1.18;font-weight:600;margin-bottom:var(--spacing-md);}
h1{font-size:clamp(2.6rem,5.5vw,5rem);}
h2{font-size:clamp(2rem,4vw,3.5rem);}
h3{font-size:clamp(1.4rem,2.5vw,2.2rem);}
h4{font-size:clamp(1.1rem,1.8vw,1.5rem);}
p{margin-bottom:var(--spacing-md);color:var(--muted-text);font-size:1.05rem;}
a{color:inherit;text-decoration:none;transition:var(--transition-smooth);}
img,video{max-width:100%;height:auto;display:block;}
ul,ol{list-style:none;}
button{font-family:var(--font-body);}

/* Utilities */
.container{width:100%;max-width:1440px;margin:0 auto;padding:0 clamp(20px,4vw,60px);}
.text-center{text-align:center;}
.text-accent{color:var(--accent-color);}
.text-light{color:rgba(255,255,255,0.85);}
.bg-dark{background-color:var(--primary-color);}
.bg-dark h1,.bg-dark h2,.bg-dark h3,.bg-dark h4,.bg-dark p{color:var(--white-color);}
.bg-cream{background-color:#EFEDE6;}
.section-padding{padding:var(--spacing-xxl) 0;}
.section-padding-sm{padding:var(--spacing-xl) 0;}
.mb-xs{margin-bottom:var(--spacing-xs);}
.mb-sm{margin-bottom:var(--spacing-sm);}
.mb-md{margin-bottom:var(--spacing-md);}
.mb-lg{margin-bottom:var(--spacing-lg);}
.mb-xl{margin-bottom:var(--spacing-xl);}
.mt-md{margin-top:var(--spacing-md);}
.mt-lg{margin-top:var(--spacing-lg);}
.mt-xl{margin-top:var(--spacing-xl);}

/* Section title style */
.section-label{display:inline-block;font-size:0.8rem;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--accent-color);margin-bottom:var(--spacing-sm);}
.section-title{font-size:clamp(2rem,4vw,3.2rem);margin-bottom:var(--spacing-md);}
.section-subtitle{font-size:1.1rem;color:var(--muted-text);max-width:650px;margin:0 auto var(--spacing-xl);}

/* Divider */
.divider{width:60px;height:2px;background:var(--accent-color);margin:var(--spacing-md) auto;}
.divider.left{margin-left:0;}

/* Horizontal rule */
hr{border:none;border-top:1px solid var(--border-color);margin:var(--spacing-lg) 0;}

/* SR-only */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}

/* Breadcrumb */
.breadcrumb{display:flex;align-items:center;gap:var(--spacing-sm);font-size:0.875rem;margin-bottom:var(--spacing-lg);}
.breadcrumb a{color:var(--muted-text);}
.breadcrumb a:hover{color:var(--accent-color);}
.breadcrumb span{color:var(--muted-text);}

/* Page Hero (inner pages) */
.page-hero{padding:160px 0 80px;background:var(--primary-color);text-align:center;position:relative;overflow:hidden;}
.page-hero::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(198,167,123,0.15) 0%,transparent 60%);}
.page-hero h1{color:var(--white-color);margin-bottom:var(--spacing-md);}
.page-hero p{color:rgba(255,255,255,0.75);font-size:1.15rem;max-width:600px;margin:0 auto;}
.page-hero .breadcrumb{justify-content:center;color:rgba(255,255,255,0.6);}
.page-hero .breadcrumb a{color:rgba(255,255,255,0.6);}
.page-hero .breadcrumb a:hover{color:var(--secondary-color);}

@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}}

/* WhatsApp Float Button */
.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 20px;
  right: 20px;
  background-color: #25d366;
  color: #FFF;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  box-shadow: 2px 2px 3px #999;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  color: #FFF;
}

/* Instagram Float Button */
.instagram-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 90px;
  right: 20px;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #FFF;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  box-shadow: 2px 2px 3px #999;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.instagram-float:hover {
  transform: scale(1.1);
  color: #FFF;
}

@media (max-width: 768px) {
  .project-budget-grid {
    grid-template-columns: 1fr !important;
  }
}

/* -- PREMIUM GALLERY PREVIEW -- */
.gallery-preview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 250px;
  gap: 16px;
  margin-bottom: 40px;
}
.gallery-preview-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
}
.gallery-preview-item.featured {
  grid-column: span 2;
  grid-row: span 2;
}
.gallery-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.gallery-preview-item:hover img {
  transform: scale(1.05);
}
.gallery-preview-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.1);
  transition: background 0.3s ease;
}
.gallery-preview-item:hover::after {
  background: rgba(0,0,0,0.2);
}

@media (max-width: 992px) {
  .gallery-preview-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 200px;
  }
}
@media (max-width: 576px) {
  .gallery-preview-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 250px;
  }
  .gallery-preview-item.featured {
    grid-column: span 1;
    grid-row: span 1;
  }
}

/* -- LIGHTBOX -- */
.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.95);
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease;
  align-items: center;
  justify-content: center;
}
.lightbox-overlay.active {
  display: flex;
  opacity: 1;
}
.lightbox-content-wrapper {
  position: relative;
  width: 90%;
  height: 85%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-content {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.lightbox-content.loaded {
  opacity: 1;
  transform: scale(1);
}
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #fff;
  font-size: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 10000;
  transition: color 0.2s;
}
.lightbox-close:hover {
  color: var(--accent-color, #f4cca4);
}
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: none;
  font-size: 30px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10000;
  transition: background 0.2s;
}
.lightbox-nav:hover {
  background: rgba(255,255,255,0.2);
}
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
.lightbox-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 14px;
  letter-spacing: 2px;
  background: rgba(0,0,0,0.5);
  padding: 8px 16px;
  border-radius: 20px;
}
@media (max-width: 768px) {
  .lightbox-nav {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  .lightbox-prev { left: 10px; }
  .lightbox-next { right: 10px; }
  .lightbox-close { right: 15px; top: 15px; }
}