/* ─── Reset & Base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { font-family: 'Lato', sans-serif; background: #09101d; color: #fff; }

/* ─── Typography ─── */
.font-playfair { font-family: 'Playfair Display', Georgia, serif; }
.font-lato { font-family: 'Lato', sans-serif; }

/* ─── Loader ─── */
#loader { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: #09101d; transition: opacity 0.7s ease; pointer-events: none; }
#loader.fade-out { opacity: 0; }

/* ─── Header ─── */
#header { position: fixed; top: 0; left: 0; right: 0; z-index: 40; transition: background 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease; }
#header.scrolled { background: rgba(9, 16, 29, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(255,255,255,0.05); }

/* ─── Mobile Menu ─── */
#mobile-menu { position: fixed; inset: 0; z-index: 30; background: rgba(9, 16, 29, 0.98); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; }
#mobile-menu.open { opacity: 1; pointer-events: all; }
.mobile-link { font-family: 'Playfair Display', serif; font-size: 1.875rem; color: rgba(255,255,255,0.8); transition: color 0.3s ease; }
.mobile-link:hover { color: #c9a84c; }

/* ─── Menu Toggle ─── */
.menu-line { transition: all 0.3s ease; }
#menu-toggle.active .menu-line:nth-child(1) { transform: rotate(45deg) translate(3px, 3px); }
#menu-toggle.active .menu-line:nth-child(2) { opacity: 0; }
#menu-toggle.active .menu-line:nth-child(3) { width: 1.25rem; transform: rotate(-45deg) translate(3px, -3px); }

/* ─── Hero ─── */
#hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding-top: 5rem; overflow: hidden; }

/* ─── Service Cards ─── */
.service-card { position: relative; overflow: hidden; }
.service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #c9a84c, transparent); opacity: 0; transition: opacity 0.5s ease; }
.service-card:hover::before { opacity: 1; }

/* ─── Process Steps ─── */
.process-step { position: relative; }
.process-step::after { content: ''; position: absolute; top: 2.5rem; left: calc(50% + 1.5rem); width: calc(100% - 3rem); height: 1px; background: linear-gradient(90deg, rgba(201,168,76,0.3), transparent); display: none; }
@media (min-width: 1024px) { .process-step::after { display: block; } }

/* ─── Gallery ─── */
.gallery-item { position: relative; }
.gallery-item img { transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

/* ─── Select Styling ─── */
select option { background: #1a2744; color: #fff; }

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #09101d; }
::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(201,168,76,0.5); }

/* ─── Selection ─── */
::selection { background: rgba(201,168,76,0.3); color: #fff; }

/* ─── Animations ─── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.animate-on-scroll { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; }
.animate-on-scroll.visible { opacity: 1; transform: translateY(0); }
.animate-on-scroll.delay-1 { transition-delay: 0.1s; }
.animate-on-scroll.delay-2 { transition-delay: 0.2s; }
.animate-on-scroll.delay-3 { transition-delay: 0.3s; }
.animate-on-scroll.delay-4 { transition-delay: 0.4s; }
.animate-on-scroll.delay-5 { transition-delay: 0.5s; }
.animate-on-scroll.delay-6 { transition-delay: 0.6s; }

/* ─── Responsive ─── */
@media (max-width: 767px) {
    #hero { padding-top: 4rem; }
    #hero h1 { font-size: 2.25rem; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    #hero h1 { font-size: 2.75rem; }
}