@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Outfit:wght@400;500;600;700&display=swap');

body {
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', sans-serif;
}

/* Custom styles */
.text-balance {
  text-wrap: balance;
}

.gsap-reveal, .gsap-stagger-item, .gsap-img-reveal {
  visibility: hidden;
}

/* Logo constraints */
.brand-logo {
  max-height: 58px;
  height: 52px;
  width: auto;
  object-fit: contain;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 768px) {
  .brand-logo {
    max-height: 74px;
    height: 68px;
  }
}

#header.bg-white\/95 .brand-logo {
  max-height: 50px;
  height: 48px;
}

@media (min-width: 768px) {
  #header.bg-white\/95 .brand-logo {
    max-height: 62px;
    height: 58px;
  }
}

.brand-logo.hero-logo,
.brand-logo.footer-logo {
  filter: brightness(0) invert(1);
}

/* Testimonial slider */
.testimonial-fade {
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Base custom focus */
*:focus-visible {
  outline: 2px solid #B58D3D;
  outline-offset: 2px;
}

/* Hide scrollbar */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Marquee animation */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-marquee {
  display: flex;
  width: fit-content;
  animation: marquee 35s linear infinite;
}
.animate-marquee:hover {
  animation-play-state: paused;
}

/* ============================================================
   INTERACTIVE MOUSE SYSTEM (Spotlight, 3D Tilt, Magnet, Pan)
   ============================================================ */

/* 3D Tilt Card Base */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* Spotlight Card (Dynamic radial gradient following mouse) */
.spotlight-card {
  position: relative;
  overflow: hidden;
  --mouse-x: 50%;
  --mouse-y: 50%;
  --spotlight-color: rgba(181, 141, 61, 0.12);
}

.spotlight-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(450px circle at var(--mouse-x) var(--mouse-y), var(--spotlight-color), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 1;
}

.spotlight-card:hover::before {
  opacity: 1;
}

/* Card inner content layer above spotlight */
.spotlight-card > * {
  position: relative;
  z-index: 2;
}

/* Magnetic Button base */
.btn-magnetic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, background-color 0.25s ease;
  will-change: transform;
}

.btn-magnetic-inner {
  display: inline-flex;
  align-items: center;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* Interactive Image Pan */
.img-mouse-pan-wrapper {
  overflow: hidden;
}
.img-mouse-pan {
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

/* Interactive Discipline Card */
.discipline-card {
  position: relative;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.discipline-card:hover {
  transform: translateY(-6px);
  border-color: rgba(181, 141, 61, 0.4);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.08);
}
.discipline-card:hover .discipline-icon {
  background-color: #B58D3D;
  color: #ffffff;
  transform: scale(1.08) rotate(3deg);
}
.discipline-card:hover .discipline-number {
  color: #B58D3D;
  opacity: 0.9;
}
.discipline-icon {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.discipline-number {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   BRAND THEME CORE STYLES & UTILITY DEFINITIONS
   Guarantees 100% visual consistency independent of Tailwind CDN
   ============================================================ */

:root {
  --brand-dark: #2A2E33;
  --brand-gold: #B58D3D;
  --brand-light: #FAFAFA;
  --brand-gray: #6B7280;
  --tw-gradient-from: #B58D3D;
  --tw-gradient-to: #ffffff;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

/* Font Families */
.font-heading {
  font-family: 'Outfit', sans-serif !important;
}
.font-sans {
  font-family: 'Inter', sans-serif !important;
}

/* Brand Text Colors */
.text-brand-dark {
  color: #2A2E33 !important;
}
.text-brand-gold {
  color: #B58D3D !important;
}
.text-brand-light {
  color: #FAFAFA !important;
}
.text-brand-gray {
  color: #6B7280 !important;
}

/* Brand Background Colors */
.bg-brand-dark {
  background-color: #2A2E33 !important;
}
.bg-brand-gold {
  background-color: #B58D3D !important;
}
.bg-brand-light {
  background-color: #FAFAFA !important;
}
.bg-brand-gray {
  background-color: #6B7280 !important;
}

/* Opacity Background Variants */
.bg-brand-gold\/10 {
  background-color: rgba(181, 141, 61, 0.1) !important;
}
.bg-brand-gold\/20 {
  background-color: rgba(181, 141, 61, 0.2) !important;
}
.bg-brand-gold\/90 {
  background-color: rgba(181, 141, 61, 0.9) !important;
}
.bg-brand-dark\/10 {
  background-color: rgba(42, 46, 51, 0.1) !important;
}
.bg-brand-dark\/20 {
  background-color: rgba(42, 46, 51, 0.2) !important;
}
.bg-brand-dark\/70 {
  background-color: rgba(42, 46, 51, 0.7) !important;
}
.bg-brand-dark\/80 {
  background-color: rgba(42, 46, 51, 0.8) !important;
}
.bg-brand-dark\/90 {
  background-color: rgba(42, 46, 51, 0.9) !important;
}

/* Brand Border Colors */
.border-brand-dark {
  border-color: #2A2E33 !important;
}
.border-brand-gold {
  border-color: #B58D3D !important;
}

/* Brand Gradient Utilities & Hero Text Gradient */
.from-brand-gold {
  --tw-gradient-from: #B58D3D !important;
  --tw-gradient-to: rgb(181 141 61 / 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-brand-gold {
  --tw-gradient-to: #B58D3D !important;
}
.to-white {
  --tw-gradient-to: #ffffff !important;
}

.bg-clip-text.from-brand-gold,
.hero-gradient-text {
  background-image: linear-gradient(135deg, #B58D3D 0%, #D4AF37 40%, #FFFFFF 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
  display: inline-block;
}

/* Brand Hover States */
.hover\:bg-brand-gold:hover {
  background-color: #B58D3D !important;
}
.hover\:bg-brand-dark:hover {
  background-color: #2A2E33 !important;
}
.hover\:text-brand-gold:hover {
  color: #B58D3D !important;
}
.hover\:text-brand-dark:hover {
  color: #2A2E33 !important;
}
.hover\:border-brand-dark:hover {
  border-color: #2A2E33 !important;
}
.hover\:border-brand-gold:hover {
  border-color: #B58D3D !important;
}
.group:hover .group-hover\:text-brand-gold {
  color: #B58D3D !important;
}

/* Form Focus States */
.focus\:ring-brand-gold:focus {
  --tw-ring-color: #B58D3D !important;
  outline-color: #B58D3D !important;
}
.focus\:border-brand-gold:focus {
  border-color: #B58D3D !important;
}

/* Explicit styling for Bento Dark Card */
.bg-brand-dark.text-white {
  background-color: #2A2E33 !important;
  color: #ffffff !important;
}
.bg-brand-dark.text-white h4 {
  color: #ffffff !important;
}
.bg-brand-dark.text-white p {
  color: #D1D5DB !important;
}

/* Active Navigation Link Styling */
.nav-link.active,
#header .nav-link.active,
header .nav-link.active,
.mobile-nav-link.active {
  color: #B58D3D !important;
  font-weight: 600 !important;
}

/* Pagination Number Styling */
.page-numbers.current {
  background-color: #2A2E33 !important;
  color: #ffffff !important;
}

/* ============================================================
   REAL ESTATE PROJECT GALLERY & LIGHTBOX
   ============================================================ */
.gallery-slide-img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-thumb-item {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-thumb-item.active {
  box-shadow: 0 0 0 2px #B58D3D, 0 8px 20px -4px rgba(181, 141, 61, 0.4);
  transform: scale(1.05);
  opacity: 1 !important;
}

.gallery-thumb-item:not(.active):hover {
  opacity: 0.95 !important;
  transform: translateY(-2px);
}

/* Lightbox Modal */
#gallery-lightbox {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#gallery-lightbox.active {
  opacity: 1;
  pointer-events: auto;
}