@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Jost:wght@300;400;500;600&display=swap');

:root {
  --purple-deep: #2B0A30;
  --plum: #4A1440;
  --amethyst: #6B3FA0;
  --gold: #C6A15B;
  --rose: #B5657A;
  --lilac-soft: #F1E7F3;
  --lilac-mid: #C9A8D1;
  --olive: #767C4F;
  --wine: #7A0F52;
  --forest: #3F5C34;
  --ivory: #FAF6FA;
  --charcoal: #2A2230;
  --text-muted: #6E6274;
}

body { margin: 0; font-family: 'Jost', sans-serif; background: var(--ivory); color: var(--charcoal); }
h1, h2, h3, .brand-font { font-family: 'Fraunces', serif; }
a { text-decoration: none; color: inherit; }

.nav-link { transition: color 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.nav-link:hover { color: var(--gold); }
.nav-link.is-active { color: var(--gold); }

.btn-primary { transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.btn-primary:hover { opacity: 0.92; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(43,10,48,0.22); }
.btn-outline { transition: background 0.9s cubic-bezier(0.16, 1, 0.3, 1), color 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.btn-outline:hover { background: rgba(255,255,255,0.08); transform: translateY(-2px); }

.service-card, .gallery-item, .testimonial-card { transition: box-shadow 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); }
.service-card:hover, .gallery-item:hover, .testimonial-card:hover { box-shadow: 0 22px 44px rgba(43,10,48,0.18); transform: translateY(-6px) scale(1.015) rotate(0deg) !important; z-index: 2; }

@keyframes card-rise {
  from { opacity: 0; transform: translateY(38px) scale(0.96); }
  to { opacity: 1; transform: var(--tilt, translateY(0)); }
}
.service-card, .gallery-item, .testimonial-card {
  animation: card-rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.cols-3 > *:nth-child(1), .cols-4 > *:nth-child(1) { animation-delay: 0s; }
.cols-3 > *:nth-child(2), .cols-4 > *:nth-child(2) { animation-delay: 0.12s; }
.cols-3 > *:nth-child(3), .cols-4 > *:nth-child(3) { animation-delay: 0.24s; }
.cols-3 > *:nth-child(4), .cols-4 > *:nth-child(4) { animation-delay: 0.36s; }
.cols-3 > *:nth-child(5) { animation-delay: 0.48s; }
.cols-3 > *:nth-child(6) { animation-delay: 0.6s; }
.cols-3 > *:nth-child(7) { animation-delay: 0.72s; }

.stagger-1 { --tilt: translateY(0); }
.stagger-2 { --tilt: translateY(30px); }
.stagger-3 { --tilt: translateY(12px); }
.stagger-4 { --tilt: translateY(-8px); }
.stagger-5 { --tilt: translateY(24px); }
.stagger-6 { --tilt: translateY(4px); }
.stagger-7 { --tilt: translateY(16px); }
@media (max-width: 920px) {
  .stagger-1, .stagger-2, .stagger-3, .stagger-4, .stagger-5, .stagger-6, .stagger-7 { --tilt: translateY(0); }
}

.social-btn { transition: background 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.social-btn:hover { background: var(--gold); transform: translateY(-2px); }

.service-row img { transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
.service-row:hover img { transform: scale(1.05); }
@media (max-width: 820px) {
  .service-row { flex-direction: column !important; gap: 28px !important; padding: 32px 0 !important; }
}

.form-input { font-family: 'Jost', sans-serif; }

.nav-hamburger { display: none; }

.wave-cut { display: block; width: 100%; height: 56px; position: relative; margin-bottom: -1px; }

.stagger-offset { margin-top: 28px; }
@media (max-width: 920px) { .stagger-offset { margin-top: 0; } }

.mobile-panel { display: none; }
.mobile-panel.open { display: flex; }

@media (max-width: 920px) {
  .nav-links-desktop { display: none !important; }
  .nav-hamburger { display: flex !important; }
  .hero-grid { flex-direction: column !important; }
  .hero-copy { max-width: 100% !important; }
  .about-grid { flex-direction: column !important; }
  .cols-3 { grid-template-columns: repeat(1, minmax(0,1fr)) !important; }
  .cols-2 { grid-template-columns: repeat(1, minmax(0,1fr)) !important; }
  .cols-4 { grid-template-columns: repeat(1, minmax(0,1fr)) !important; }
  .section-pad { padding-left: 28px !important; padding-right: 28px !important; }
  .contact-grid { flex-direction: column !important; }
}

@media (min-width: 921px) and (max-width: 1180px) {
  .cols-3 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}