/* Typography Theme: Luxury Modern Architecture (Outfit, Plus Jakarta Sans, Montserrat & Cinzel) */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700&family=Outfit:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');


:root {
  --font-heading: 'Outfit', 'Montserrat', sans-serif;
  --font-body: 'Montserrat', sans-serif;
  --font-outfit: 'Outfit', sans-serif;
  --font-cinzel: 'Cinzel', serif;

  --color-charcoal-900: #090a0d;
  --color-charcoal-800: #101217;
  --color-charcoal-700: #171a21;
  --color-charcoal-600: #21252f;

  --color-gold-light: #f5e4bd;
  --color-gold-base: #c59b4b;
  --color-gold-dark: #96702e;
  --color-gold-glow: rgba(197, 155, 75, 0.25);

  --color-cream-100: #000000;
  --color-cream-200: #0a0a0a;
  --color-cream-300: #1a1a1a;

  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
}

html {
  font-size: 15px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-x: clip;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  max-width: 100vw;
}

body {
  overflow-x: hidden;
  overflow-x: clip;
  width: 100%;
  max-width: 100vw;
  font-size: 15px;
  line-height: 1.7;
  margin: 0 !important;
  padding: 0 !important;
}

/* Responsive Fullscreen Hero: Fills 100% of visible browser tab across all laptops, desktops, tablets, and phones */
.hero-fullscreen {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-fullscreen img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Root canvas background: Pure Black (#000000, Matches --color-cream-100) */
html,
body,
html.page-home,
body.page-home {
  background-color: var(--color-cream-100) !important;
}

/* =========================================================================
   Mobile Navigation & Background Content Transparency Rules
   (Preserves exact scroll position without snapping/jumping to top)
   ========================================================================= */

/* Background Content Lock: Sticky Fixed Freeze when Mobile Menu is Active */
body.mobile-menu-active {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
}

/* 75% Right-Side Mobile Drawer Menu */
#mobileMenuDrawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 100vh !important;
  height: 100dvh !important;
  width: 75vw !important;
  max-width: 85vw !important;
  background-color: #07080a !important;
  background: #07080a !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y !important;
  box-shadow: none !important;
  z-index: 100 !important;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out !important;
}

/* Shadow only appears when the drawer is actually opened (Prevents right-side shadow bleed when closed) */
#mobileMenuDrawer.translate-x-0 {
  box-shadow: -15px 0 35px rgba(0, 0, 0, 0.8) !important;
}

/* Backdrop Overlay: Blurred backdrop over background content */
#mobileMenuBackdrop {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  height: 100dvh !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 95 !important;
  touch-action: none !important;
  overscroll-behavior: none !important;
  cursor: pointer;
}

/* Background content & Banner: Blurred & frozen sticky fixed when mobile drawer is open */
header#mainHeader,
main,
footer {
  transition: filter 0.3s ease, opacity 0.3s ease;
}

body.mobile-menu-active header#mainHeader,
body.mobile-menu-active main,
body.mobile-menu-active footer {
  filter: blur(6px) !important;
  -webkit-filter: blur(6px) !important;
  pointer-events: none !important;
  user-select: none !important;
}

body.mobile-menu-active header#mainHeader {
  opacity: 0.65 !important;
}

body.mobile-menu-active #whatsappWidget {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease !important;
}

/* Drawer Exit / Close Button:
   - Default: Red outline with red X icon
   - Touching / Active / Hover: Solid red button with pure white X icon
*/
#mobileMenuCloseBtn {
  border: 2px solid #ef4444 !important;
  color: #ef4444 !important;
  background-color: transparent !important;
  transition: all 0.15s ease-in-out !important;
  cursor: pointer;
}

#mobileMenuCloseBtn svg {
  stroke: #ef4444 !important;
  transition: stroke 0.15s ease-in-out !important;
}

#mobileMenuCloseBtn:hover,
#mobileMenuCloseBtn:active,
#mobileMenuCloseBtn:focus,
#mobileMenuCloseBtn.btn-touch-active {
  background-color: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
}

#mobileMenuCloseBtn:hover svg,
#mobileMenuCloseBtn:active svg,
#mobileMenuCloseBtn:focus svg,
#mobileMenuCloseBtn.btn-touch-active svg {
  stroke: #ffffff !important;
}

/* Modals elevation above header and backdrop */
.consultation-modal,
.lightbox-modal,
#consultationModal,
#imageLightbox {
  z-index: 200 !important;
}

/* Sticky Header on Admin & All Public Pages */
#adminHeader,
header.site-header {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background-color: rgba(14, 16, 20, 0.95);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}


body {
  font-family: var(--font-body), 'Montserrat', sans-serif;
  color: #E2E8F0;
  background-color: var(--color-cream-100);
  scroll-behavior: smooth;
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0.015em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Pure Black Luxury Canvas (#000000): Contrast for Text Directly on Dark Canvas
   (Strictly Preserves Cards, Forms, Inputs, Placeholders & Admin Panel Intact)
   ========================================================================== */

/* 1. Category & Section Headings Directly on Dark Canvas */
body .service-category-heading,
body h1:not(.bg-white *):not(.service-card *):not(.uc-service-card *):not(.gallery-card *):not(form *):not(.lightbox-modal *):not(#imageLightbox *):not(#consultationModal *),
body h2:not(.bg-white *):not(.service-card *):not(.uc-service-card *):not(.gallery-card *):not(form *):not(.lightbox-modal *):not(#imageLightbox *):not(#consultationModal *),
body h3:not(.bg-white *):not(.service-card *):not(.uc-service-card *):not(.gallery-card *):not(form *):not(.lightbox-modal *):not(#imageLightbox *):not(#consultationModal *),
body h4:not(.bg-white *):not(.service-card *):not(.uc-service-card *):not(.gallery-card *):not(form *):not(.lightbox-modal *):not(#imageLightbox *):not(#consultationModal *) {
  color: #FFFFFF !important;
}

/* 2. Story Text, Intros & Labels Directly on Dark Canvas */
body p.story-paragraph {
  color: #CBD5E1 !important;
}
body .story-paragraph strong {
  color: #F8FAFC !important;
}
body .text-charcoal-900:not(.bg-white):not(.bg-white *):not(.service-card *):not(.uc-service-card *):not(.gallery-card *):not(form *):not(.lightbox-modal *):not(#imageLightbox *):not(#consultationModal *),
body .text-charcoal-950:not(.bg-white):not(.bg-white *):not(.service-card *):not(.uc-service-card *):not(.gallery-card *):not(form *):not(.lightbox-modal *):not(#imageLightbox *):not(#consultationModal *),
body .text-charcoal-800:not(.bg-white):not(.bg-white *):not(.service-card *):not(.uc-service-card *):not(.gallery-card *):not(form *):not(.lightbox-modal *):not(#imageLightbox *):not(#consultationModal *) {
  color: #F1F5F9 !important;
}
body .text-slatecustom-600:not(.bg-white):not(.bg-white *):not(.service-card *):not(.uc-service-card *):not(.gallery-card *):not(form *):not(.lightbox-modal *):not(#imageLightbox *):not(#consultationModal *),
body .text-slatecustom-700:not(.bg-white):not(.bg-white *):not(.service-card *):not(.uc-service-card *):not(.gallery-card *):not(form *):not(.lightbox-modal *):not(#imageLightbox *):not(#consultationModal *) {
  color: #94A3B8 !important;
}

/* Ensure any element with .bg-white (including buttons and tabs) has crisp dark text */
.bg-white,
a.bg-white,
button.bg-white,
.bg-white.text-charcoal-950,
.bg-white.text-charcoal-900,
.bg-white .text-charcoal-950,
.bg-white .text-charcoal-900 {
  color: #07080a !important;
}

/* 3. Hero Header Intro Gradient Banners (Services, Gallery, About, Contact) */
section.bg-gradient-to-b.from-cream-200 {
  background: linear-gradient(to bottom, #0a0a0a, #000000) !important;
  color: #F8FAFC !important;
  border-bottom: 1px solid rgba(197, 155, 75, 0.25) !important;
}
section.bg-gradient-to-b.from-cream-200 h1,
section.bg-gradient-to-b.from-cream-200 h2 {
  color: #FFFFFF !important;
}
section.bg-gradient-to-b.from-cream-200 p {
  color: #CBD5E1 !important;
}

/* 4. White Cards: Delicate Clean Contrast Borders */
.service-card,
.uc-service-card,
.gallery-card {
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 12px 32px -6px rgba(0, 0, 0, 0.35) !important;
}

/* 5. Slider Navigation Arrow Buttons & Testimonial Arrows */
.slider-nav-btn,
#prevTestimonialBtn,
#nextTestimonialBtn {
  background-color: #ffffff !important;
  color: #0e1014 !important;
  border: 1px solid rgba(197, 155, 75, 0.45) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}
.slider-nav-btn svg,
#prevTestimonialBtn svg,
#nextTestimonialBtn svg {
  stroke: #0e1014 !important;
  color: #0e1014 !important;
}
.slider-nav-btn:hover:not([disabled]),
#prevTestimonialBtn:hover,
#nextTestimonialBtn:hover {
  background-color: #C59B4B !important;
  color: #07080A !important;
  border-color: #C59B4B !important;
}
.slider-nav-btn:hover:not([disabled]) svg,
#prevTestimonialBtn:hover svg,
#nextTestimonialBtn:hover svg {
  stroke: #07080A !important;
  color: #07080A !important;
}

/* 6. Header Navigation Buttons & Links - Highly Visible on Dark Header */
#mainHeader nav a {
  color: rgba(255, 255, 255, 0.9) !important;
}
#mainHeader nav a:hover,
#mainHeader nav a .text-gold-400 {
  color: #dfb76c !important;
}

/* 7. Gallery & Services Category Filter Buttons (Neat & Coordinated) */
.gallery-filter-btn,
.category-jump-pill {
  background-color: #ffffff !important;
  color: #0e1014 !important;
  border: 1px solid #cbd5e1 !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}
.gallery-filter-btn span,
.category-jump-pill span {
  color: #0e1014 !important;
  font-weight: 700 !important;
}
.gallery-filter-btn:hover,
.category-jump-pill:hover {
  background-color: #f8fafc !important;
  color: #c59b4b !important;
  border-color: #c59b4b !important;
}
.gallery-filter-btn:hover span,
.category-jump-pill:hover span {
  color: #c59b4b !important;
}
.gallery-filter-btn.active,
.category-jump-pill.active {
  background-color: #c59b4b !important;
  color: #07080a !important;
  border-color: #d4af37 !important;
  box-shadow: 0 4px 14px rgba(197, 155, 75, 0.4) !important;
}
.gallery-filter-btn.active span,
.category-jump-pill.active span {
  color: #07080a !important;
}

/* 8. All Form Inputs, Textarea, Select Dropdowns & Placeholders across ALL forms */
form input[type="text"],
form input[type="tel"],
form input[type="email"],
form input[type="number"],
form select,
form textarea,
#homeConsultForm input,
#homeConsultForm select,
#homeConsultForm textarea,
#contactForm input,
#contactForm select,
#contactForm textarea {
  background-color: #ffffff !important;
  color: #0e1014 !important;
  border: 1px solid #cbd5e1 !important;
}
form input::placeholder,
form textarea::placeholder,
#homeConsultForm input::placeholder,
#homeConsultForm textarea::placeholder,
#contactForm input::placeholder,
#contactForm textarea::placeholder {
  color: #64748b !important;
  opacity: 1 !important;
}
form input:focus,
form select:focus,
form textarea:focus {
  background-color: #ffffff !important;
  color: #0e1014 !important;
  border-color: #c59b4b !important;
  box-shadow: 0 0 0 3px rgba(197, 155, 75, 0.25) !important;
}

input,
textarea,
select,
button {
  font-family: var(--font-body), 'Montserrat', sans-serif;
}

/* Base Paragraph Typography - Identical to primavelon.com (15px, line-height: 1.7) */
p {
  font-size: 15px;
  line-height: 1.7;
}

p.leading-relaxed,
.prose p,
section p.leading-relaxed {
  font-size: 15px;
  line-height: 1.75;
}

/* Service Card Short Descriptions - Matching primavelon.com 0.88rem (~13.2px) */
p.service-card-desc,
.service-card-desc {
  font-size: 0.88rem;
  line-height: 1.55;
  color: #475569;
  letter-spacing: 0.01em;
}

/* Prevent unwanted iOS Safari zoom on input focus */
@media (max-width: 768px) {

  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Smooth momentum scrolling for mobile horizontal containers */
.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
}

.font-heading,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading), 'Cinzel', serif;
  letter-spacing: 0.03em;
}

.font-body {
  font-family: var(--font-body), 'Montserrat', sans-serif;
}

.font-serif-display {
  font-family: var(--font-heading), 'Cinzel', serif;
}

/* Mobile Typography Optimization (max-width: 768px) - Identical to primavelon.com */
@media (max-width: 768px) {

  h1,
  .display-font,
  .hero-title {
    font-size: 1.7rem !important;
    letter-spacing: 0.08em !important;
    line-height: 1.25 !important;
  }

  h2,
  .section-title {
    font-size: 1.35rem !important;
    letter-spacing: 0.08em !important;
  }

  h3,
  .service-title {
    font-size: 1.05rem !important;
  }

  h4 {
    font-size: 0.95rem !important;
    letter-spacing: 0.08em !important;
  }

  h5 {
    font-size: 0.85rem !important;
    letter-spacing: 0.08em !important;
  }

  h6 {
    font-size: 0.75rem !important;
    letter-spacing: 0.08em !important;
  }
}

/* Hide scrollbars for clean mobile horizontal scroll tracks */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Luxury Metallic Gold Gradients */
.gold-gradient-text {
  background: linear-gradient(135deg, #f5e4bd 0%, #d4af37 25%, #c59b4b 60%, #9a7432 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gold-gradient-bg {
  background: linear-gradient(135deg, #dfb76c 0%, #c59b4b 50%, #9a7432 100%);
}

.gold-gradient-bg-subtle {
  background: linear-gradient(135deg, rgba(223, 183, 108, 0.15) 0%, rgba(197, 155, 75, 0.08) 100%);
}

.gold-border {
  border-color: rgba(197, 155, 75, 0.4);
}

.gold-border-glow:hover {
  border-color: rgba(223, 183, 108, 0.85);
  box-shadow: 0 0 25px rgba(197, 155, 75, 0.25);
}

/* Gold Button Hover Shimmer */
.btn-gold {
  background: linear-gradient(135deg, #dfb76c 0%, #c59b4b 50%, #9a7432 100%);
  color: #090a0d;
  font-weight: 600;
  letter-spacing: 0.05em;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.btn-gold::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.7s;
  z-index: -1;
}

.btn-gold:hover::before {
  left: 100%;
}

.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(197, 155, 75, 0.4);
}

/* Flagship Services Explore Button - Cross-Device Mobile & Tablet Optimization */
.explore-services-btn {
  font-size: 0.825rem !important;
  letter-spacing: 0.05em !important;
  line-height: 1.35 !important;
}

@media (min-width: 640px) {
  .explore-services-btn {
    font-size: 0.875rem !important;
    letter-spacing: 0.07em !important;
    line-height: 1.45 !important;
  }
}

@media (min-width: 1024px) {
  .explore-services-btn {
    font-size: 0.925rem !important;
    letter-spacing: 0.08em !important;
  }
}

.btn-outline-gold {
  border: 1.5px solid #c59b4b;
  color: #dfb76c;
  background: transparent;
  transition: all 0.3s ease;
}

.btn-outline-gold:hover {
  background-color: #c59b4b;
  color: #090a0d;
  box-shadow: 0 10px 20px -5px rgba(197, 155, 75, 0.3);
  transform: translateY(-2px);
}

/* Dark Section Glassmorphism */
.glass-dark {
  background: rgba(16, 18, 23, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(197, 155, 75, 0.15);
}

.hero-dark-plinth {
  background: rgba(7, 8, 10, 0.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1.5px solid rgba(197, 155, 75, 0.45) !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.85) !important;
  border-radius: 1.5rem !important;
}

.hero-dark-microcard {
  background: rgba(18, 20, 26, 0.88) !important;
  border: 1px solid rgba(197, 155, 75, 0.35) !important;
  border-radius: 0.75rem !important;
}

.glass-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(197, 155, 75, 0.2);
}

/* WhatsApp Floating Pulse */
.pulse-ring {
  position: absolute;
  inset: -4px;
  border-radius: 9999px;
  background-color: rgba(37, 211, 102, 0.3);
  animation: pulse-ring 2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
  z-index: -1;
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.35);
    opacity: 0;
  }

  100% {
    transform: scale(0.95);
    opacity: 0;
  }
}

/* Lightbox & Consultation Modals */
.lightbox-modal,
.consultation-modal {
  opacity: 0;
  visibility: hidden;
  z-index: 99999 !important;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox-modal.active,
.consultation-modal.active {
  opacity: 1;
  visibility: visible;
}

/* Dedicated Full Screen Immersive Image Viewer (100% CSS Grid System) */
#fullScreenViewer {
  display: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  inset: 0 !important;
  width: 100vw !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  background-color: #05070a !important;
  z-index: 100000 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#fullScreenViewer.active {
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  grid-template-columns: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#fsHeader {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  width: 100% !important;
  min-height: 68px !important;
  height: 68px !important;
  padding: 0 1.25rem !important;
  background-color: #0b0e14 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-sizing: border-box !important;
  z-index: 50 !important;
}

@media (min-width: 640px) {
  #fsHeader {
    min-height: 72px !important;
    height: 72px !important;
    padding: 0 1.5rem !important;
    gap: 1rem !important;
  }
}

#fsHeaderTitleBox {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  justify-self: center !important;
  align-self: center !important;
  margin: 0 auto !important;
  padding: 0 0.5rem !important;
  max-width: 650px !important;
  min-width: 0 !important;
  width: 100% !important;
}

#fsTitle {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#fsSubtitle {
  margin: 0.2rem 0 0 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#fsStage {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  min-width: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  background-color: #05070a !important;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  padding: 1rem !important;
  box-sizing: border-box !important;
}

@media (min-width: 640px) {
  #fsStage {
    padding: 1.5rem !important;
  }
}

@media (min-width: 1024px) {
  #fsStage {
    padding: 1.75rem 2.5rem !important;
  }
}

#fsImg {
  max-width: 88vw !important;
  max-height: 74vh !important;
  max-height: 74dvh !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  will-change: transform;
  margin: auto !important;
  border-radius: 0.875rem;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Prevent background page scrolling when modal is open without collapsing document height */
body.overflow-hidden {
  overflow: hidden !important;
}

/* Consultation Modal Grid Centering & Smooth Screen Bounds */
.consultation-modal {
  display: grid !important;
  place-items: center !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

.consultation-modal .consultation-modal-box {
  transform: scale(0.96) translateY(12px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  opacity: 0;
  margin: auto;
}

.consultation-modal.active .consultation-modal-box {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Consultation Modal Grid & Mobile Smooth Touch Scrolling */
.consultation-modal-box {
  -webkit-overflow-scrolling: touch;
  max-height: 92vh;
  max-height: 92dvh;
}
#consultModalForm {
  width: 100% !important;
  max-width: 100% !important;
}
@media (min-width: 768px) {
  .consultation-modal-box {
    height: min(710px, 92vh);
    max-height: 92vh;
    max-height: 92dvh;
  }
}
@media (min-width: 1024px) {
  .consultation-modal-box {
    height: min(730px, 92vh);
    max-height: 92vh;
    max-height: 92dvh;
  }
}
@media (max-width: 767px) {
  .consultation-modal-box {
    max-height: 92vh;
    max-height: 92dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #101217;
}

::-webkit-scrollbar-thumb {
  background: #9a7432;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #c59b4b;
}

/* Suppress scrollbars on textareas and form fields to prevent dark bar glitches */
textarea::-webkit-scrollbar,
input::-webkit-scrollbar,
select::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

textarea,
input,
select {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

/* Hide scrollbar utility */
.no-scrollbar::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.no-scrollbar {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

/* Image Hover Zoom (Desktop only with genuine mouse hover) */
.zoom-container {
  overflow: hidden;
}

.zoom-container img {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@media (min-width: 1025px) and (hover: hover) {
  .zoom-container:hover img {
    transform: scale(1.08);
  }
}

/* Hero Micro Highlights Cards - Luxury Interactive Hover Effect */
.hero-highlight-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s ease,
    background-color 0.3s ease;
  cursor: pointer;
}

.hero-highlight-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #dfb76c, #c59b4b, #96702e);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}

.hero-highlight-card:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: rgba(197, 155, 75, 0.8) !important;
  box-shadow: 0 16px 32px -8px rgba(197, 155, 75, 0.28), 0 6px 16px -4px rgba(9, 10, 13, 0.08) !important;
  background-color: #ffffff !important;
}

.hero-highlight-card:hover::before {
  opacity: 1;
  transform: scaleX(1);
}

.hero-highlight-card:hover .text-gold-600 {
  color: #9a7432 !important;
  transform: translateX(2px);
  transition: all 0.3s ease;
}

.hero-highlight-card:hover .text-slatecustom-700 {
  color: #0e1014 !important;
  transition: color 0.3s ease;
}

/* ==========================================================================
   DISABLE HOVER EFFECTS FOR ALL MOBILE DEVICES & TABLETS (<= 1024px / Touch)
   Prevents sticky touch hovers, faded text, and awkward tap-hover states
   ========================================================================== */
@media (max-width: 1024px),
(hover: none),
(pointer: coarse) {

  /* Inactive filter buttons: Always crisp white background with dark readable charcoal text */
  .gallery-filter-btn:not(.active),
  .service-filter-btn:not(.active) {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #101217 !important;
    border-color: #ede7d8 !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    transform: none !important;
  }

  .gallery-filter-btn:not(.active) span,
  .service-filter-btn:not(.active) span {
    color: #101217 !important;
  }

  /* Active filter buttons: Solid rich gold gradient with dark charcoal text */
  .gallery-filter-btn.active,
  .service-filter-btn.active {
    background: linear-gradient(135deg, #dfb76c 0%, #c59b4b 50%, #9a7432 100%) !important;
    color: #090a0d !important;
    border-color: #c59b4b !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
    transform: none !important;
  }

  .gallery-filter-btn.active span,
  .service-filter-btn.active span {
    color: #090a0d !important;
  }

  /* Disable hover zoom on touch devices */
  .zoom-container img,
  .zoom-container:hover img {
    transform: none !important;
  }

  /* Disable sticky hover animations and transforms on mobile and tablets */
  .btn-gold:hover,
  .btn-outline-gold:hover,
  .service-card:hover,
  .gallery-item:hover,
  .discipline-item:hover,
  .hero-highlight-card:hover {
    transform: none !important;
  }

  .btn-gold::before {
    display: none !important;
  }
}

/* ==========================================================================
   SERVICE CARDS PIXEL-PERFECT HORIZONTAL ALIGNMENT LOCK
   Strictly locks 2-line title and 2-line description across all card columns
   ========================================================================== */
.service-card-title,
h3.service-card-title,
h2.service-card-title {
  font-family: var(--font-sans), 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-height: 2.85rem !important;
  max-height: 3rem !important;
  line-height: 1.45rem !important;
}

.service-card-desc,
p.service-card-desc {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  height: 2.75rem !important;
  min-height: 2.75rem !important;
  max-height: 2.75rem !important;
  line-height: 1.375rem !important;
  margin-top: 0.25rem !important;
  margin-bottom: 0.5rem !important;
}

/* ==========================================================================
   LUXURY SCROLL REVEAL ANIMATIONS (Global for All Pages)
   Silky smooth, hardware-accelerated scroll-triggered entrance animations
   ========================================================================== */

/* Base Scroll Reveal - Fluid Fade Up */
.scroll-reveal {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.scroll-reveal.is-revealed {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}

/* Directional Variant: Slide from Left */
.scroll-reveal-left {
  opacity: 0;
  transform: translate3d(-36px, 0, 0);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.scroll-reveal-left.is-revealed {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}

/* Directional Variant: Slide from Right */
.scroll-reveal-right {
  opacity: 0;
  transform: translate3d(36px, 0, 0);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.scroll-reveal-right.is-revealed {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}

/* Scale & Zoom Variant for Architectural Images and Hero CTA */
.scroll-reveal-zoom {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.scroll-reveal-zoom.is-revealed {
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* Gentle Pure Fade Variant */
.scroll-reveal-fade {
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity;
}

.scroll-reveal-fade.is-revealed {
  opacity: 1 !important;
}

/* Stagger Delay Classes */
.delay-75 {
  transition-delay: 75ms !important;
}

.delay-100 {
  transition-delay: 100ms !important;
}

.delay-150 {
  transition-delay: 150ms !important;
}

.delay-200 {
  transition-delay: 200ms !important;
}

.delay-250 {
  transition-delay: 250ms !important;
}

.delay-300 {
  transition-delay: 300ms !important;
}

.delay-350 {
  transition-delay: 350ms !important;
}

.delay-400 {
  transition-delay: 400ms !important;
}

.delay-500 {
  transition-delay: 500ms !important;
}

/* Global Gold Scroll Reading Progress Bar */
#scrollProgressBar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #dfb76c 0%, #c59b4b 50%, #f6e4bd 100%);
  z-index: 99999;
  transition: width 0.08s linear;
  box-shadow: 0 0 10px rgba(223, 183, 108, 0.85);
  pointer-events: none;
}

/* Accessibility - Honor Reduced Motion Preferences */
@media (prefers-reduced-motion: reduce) {

  .scroll-reveal,
  .scroll-reveal-left,
  .scroll-reveal-right,
  .scroll-reveal-zoom,
  .scroll-reveal-fade {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  #scrollProgressBar {
    display: none !important;
  }
}

/* ==========================================================================
   PARTNER BRANDS INFINITE MARQUEE ANIMATION (Moving Right to Left)
   ========================================================================== */
@keyframes brand-marquee-scroll {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

.brand-marquee-container {
  display: flex;
  overflow: hidden;
  user-select: none;
  width: 100%;
}

.brand-marquee-track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  animation: brand-marquee-scroll 38s linear infinite;
  will-change: transform;
}

/* Continuous Non-Stop Animation: Keeps scrolling seamlessly even when pointer/cursor hovers */
.brand-marquee-container:hover .brand-marquee-track,
.brand-marquee-track:hover,
.brand-marquee-track:focus {
  animation-play-state: running !important;
}

@media (max-width: 640px) {
  .brand-marquee-track {
    animation-duration: 26s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-marquee-track {
    animation: none !important;
  }
}

/* ==========================================================================
   BRAND LOGO CLEAN DISPLAY
   Pure transparent logo without any background shape or background color
   ========================================================================== */
.brand-logo-bright {
  transition: opacity 0.3s ease;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.brand-logo-bright:hover {
  transform: none !important;
  opacity: 0.95;
}

/* Header and Footer logo balanced sizing - identical dimensions across navbar and footer */
#mainHeader .brand-logo-bright,
footer .brand-logo-bright {
  max-height: 63px !important;
  width: auto !important;
}

#mainHeader.scrolled-nav .brand-logo-bright {
  max-height: 58px !important;
}

@media (max-width: 639px) {
  #mainHeader .brand-logo-bright,
  footer .brand-logo-bright {
    max-height: 48px !important;
  }

  #mainHeader.scrolled-nav .brand-logo-bright {
    max-height: 44px !important;
  }
}

/* ==========================================================================
   URBAN COMPANY STYLE SERVICE CAROUSEL & CARDS (Photo 3 Match)
   Fully responsive across all iPhone, Mobile, Tablet, Laptop & Desktop screens
   ========================================================================== */

.no-scrollbar::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
.no-scrollbar {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

.service-slider-track {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 1rem;
  padding: 0.5rem 0.25rem 1.5rem 0.25rem;
}
@media (min-width: 640px) {
  .service-slider-track {
    gap: 1.25rem;
    padding: 0.5rem 0.25rem 1.5rem 0.25rem;
  }
}
@media (min-width: 1024px) {
  .service-slider-track {
    gap: 1.5rem;
    padding: 0.5rem 0 1.5rem 0;
  }
}
.service-slider-track > * {
  scroll-snap-align: start;
  flex-shrink: 0;
}

.slider-nav-btn {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background-color: #ffffff;
  color: #090a0d;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(226, 232, 240, 0.95);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
  flex-shrink: 0;
  user-select: none;
}
@media (min-width: 640px) {
  .slider-nav-btn {
    width: 2.5rem;
    height: 2.5rem;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  }
}
.slider-nav-btn:hover:not([disabled]) {
  background-color: #c59b4b;
  color: #090a0d;
  border-color: #c59b4b;
  box-shadow: 0 4px 14px rgba(197, 155, 75, 0.25);
}
.slider-nav-btn:disabled,
.slider-nav-btn.opacity-30,
.slider-nav-btn.hidden-btn {
  opacity: 0.25;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

/* Elegant Big-Medium Service Cards (Decent & Professional - No Animations):
   - Mobile (< 640px): 1 prominent medium card per slide
   - Tablet (640px - 1023px): exactly 2 cards per view
   - Desktop (>= 1024px): exactly 4 cards per view with zero cut-off
*/
.uc-service-card {
  width: calc(100% - 0.75rem);
  flex: 0 0 calc(100% - 0.75rem);
  border-radius: 1.25rem;
  background: #ffffff;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}
@media (min-width: 480px) and (max-width: 639px) {
  .uc-service-card {
    width: calc(100% - 1.5rem);
    flex: 0 0 calc(100% - 1.5rem);
  }
}
@media (min-width: 640px) {
  .uc-service-card {
    width: calc((100% - 1.25rem) / 2);
    flex: 0 0 calc((100% - 1.25rem) / 2);
    border-radius: 1.375rem;
  }
}
@media (min-width: 1024px) {
  .uc-service-card {
    width: calc((100% - (3 * 1.5rem)) / 4);
    flex: 0 0 calc((100% - (3 * 1.5rem)) / 4);
    max-width: calc((100% - (3 * 1.5rem)) / 4);
    border-radius: 1.5rem;
  }
  .uc-service-card:hover {
    box-shadow: 0 14px 30px -8px rgba(0, 0, 0, 0.1);
    border-color: rgba(197, 155, 75, 0.45);
  }
}

/* Image Box in Big-Medium Card: Generous Height / Length to show Full Rooms & Ceilings */
.uc-card-image-box {
  width: 100%;
  aspect-ratio: 1 / 0.94;
  min-height: 270px;
  border-radius: 1.25rem 1.25rem 0 0;
  overflow: hidden;
  position: relative;
  background-color: #f1f5f9;
}
@media (min-width: 640px) {
  .uc-card-image-box {
    border-radius: 1.375rem 1.375rem 0 0;
    min-height: 295px;
    aspect-ratio: 1 / 0.94;
  }
}
@media (min-width: 1024px) {
  .uc-card-image-box {
    border-radius: 1.5rem 1.5rem 0 0;
    min-height: 320px;
    aspect-ratio: 1 / 0.94;
  }
}
.uc-card-image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

/* Service Section Heading: Elegant, Modern & High-End */
.service-category-heading {
  font-family: 'Outfit', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

/* Service Card Title: Clear 2-Line Heading (Professional, Modern & Elegant) */
.uc-service-title {
  font-family: 'Outfit', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  line-height: 1.45rem !important;
  height: 2.9rem;
  max-height: 2.9rem;
}

/* Service Card Description: Clear 2-Line Subtitle */
.uc-service-desc {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  line-height: 1.35rem !important;
  height: 2.7rem;
  max-height: 2.7rem;
}