/* ===== Reset & Base ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{min-height:100vh;overflow-x:hidden}
img,video{max-width:100%;height:auto;display:block}
button{cursor:pointer;font:inherit;border:none;background:none}
select,input,textarea{font:inherit}

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

/* ===== Navbar ===== */
.nav-link{position:relative}
.nav-link::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:currentColor;border-radius:1px;transition:width .3s ease}
.nav-link:hover::after{width:100%}

#navbar.scrolled{background:rgba(6,14,26,.95);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.05);box-shadow:0 4px 30px rgba(0,0,0,.3)}

/* Mobile menu */
.menu-line{transition:all .3s cubic-bezier(.4,0,.2,1)}
#menu-btn[aria-expanded="true"] .menu-line:nth-child(1){transform:translateY(5px) rotate(45deg)}
#menu-btn[aria-expanded="true"] .menu-line:nth-child(2){opacity:0;transform:translateX(-8px)}
#menu-btn[aria-expanded="true"] .menu-line:nth-child(3){transform:translateY(-5px) rotate(-45deg) scaleX(.7)}

.mobile-nav-link{display:block}

/* ===== Hero ===== */
.hero-bg{will-change:transform}
.hero-img{will-change:transform}
.hero-content{will-change:transform,opacity}

@supports(animation-timeline:view()){
  .hero-content{animation:hero-in linear both;animation-timeline:view();animation-range:cover 0% cover 30%}
  @keyframes hero-in{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
}
@supports not(animation-timeline:view()){
  .hero-content{animation:hero-in-fallback 1s cubic-bezier(.16,1,.3,1) both}
  @keyframes hero-in-fallback{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
}

.hero-scroll{animation:scroll-pulse 2s ease-in-out infinite}
@keyframes scroll-pulse{0%,100%{opacity:.4;transform:translateX(-50%) translateY(0)}50%{opacity:.8;transform:translateX(-50%) translateY(6px)}}

/* ===== Section Labels ===== */
.section-label{display:inline-flex;align-items:center;gap:10px;font-size:.75rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(200,164,85,.8);margin-bottom:16px}
.section-label::before{content:'';display:block;width:32px;height:1px;background:linear-gradient(90deg,rgba(200,164,85,.8),transparent)}

.section-title{font-family:'Playfair Display',Georgia,serif;font-size:clamp(2rem,5vw,3.5rem);font-weight:600;line-height:1.15;color:rgba(255,255,255,.95);margin-bottom:20px}

.section-subtitle{font-size:1.05rem;line-height:1.75;color:rgba(255,255,255,.45);max-width:560px}

/* ===== Services ===== */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.service-card{position:relative;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:20px;padding:32px 28px;transition:all .4s cubic-bezier(.16,1,.3,1);overflow:hidden}
.service-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(200,164,85,.5),transparent);opacity:0;transition:opacity .4s ease}
.service-card:hover{transform:translateY(-6px);border-color:rgba(200,164,85,.15);background:rgba(255,255,255,.04);box-shadow:0 20px 60px rgba(0,0,0,.3)}
.service-card:hover::before{opacity:1}

.service-icon-wrap{width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,rgba(200,164,85,.15),rgba(200,164,85,.05));border:1px solid rgba(200,164,85,.2);display:flex;align-items:center;justify-content:center;color:rgba(200,164,85,.9);margin-bottom:20px;transition:all .4s ease}
.service-card:hover .service-icon-wrap{background:linear-gradient(135deg,rgba(200,164,85,.25),rgba(200,164,85,.1));transform:scale(1.05)}

.service-tag{display:inline-block;font-size:.65rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(200,164,85,.8);background:rgba(200,164,85,.08);border:1px solid rgba(200,164,85,.15);padding:4px 10px;border-radius:20px;margin-top:4px}

/* ===== Gallery ===== */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gallery-item{border-radius:16px;overflow:hidden;position:relative}
.gallery-img-wrap{position:relative;overflow:hidden;border-radius:16px;aspect-ratio:inherit}
.gallery-img-wrap:nth-child(1),.gallery-item:nth-child(1) .gallery-img-wrap{aspect-ratio:5/6}
.gallery-img-wrap:nth-child(2),.gallery-item:nth-child(2) .gallery-img-wrap{aspect-ratio:5/4}
.gallery-img-wrap:nth-child(3),.gallery-item:nth-child(3) .gallery-img-wrap{aspect-ratio:5/4}
.gallery-img-wrap:nth-child(4),.gallery-item:nth-child(4) .gallery-img-wrap{aspect-ratio:5/6}
.gallery-img-wrap:nth-child(5),.gallery-item:nth-child(5) .gallery-img-wrap{aspect-ratio:5/4}
.gallery-img-wrap:nth-child(6),.gallery-item:nth-child(6) .gallery-img-wrap{aspect-ratio:5/6}

.gallery-img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.gallery-item:hover .gallery-img{transform:scale(1.08)}

.gallery-overlay{position:absolute;inset:0;background:rgba(6,14,26,.6);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .4s ease}
.gallery-item:hover .gallery-overlay{opacity:1}
.gallery-overlay svg{color:rgba(255,255,255,.9);transform:scale(.8);transition:transform .4s cubic-bezier(.16,1,.3,1)}
.gallery-item:hover .gallery-overlay svg{transform:scale(1)}

.gallery-caption{padding:14px 4px;font-size:.9rem;font-weight:500;color:rgba(255,255,255,.7)}

/* ===== Testimonials ===== */
.testimonial-card{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:20px;padding:32px;transition:all .4s cubic-bezier(.16,1,.3,1)}
.testimonial-card:hover{border-color:rgba(200,164,85,.15);transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,.2)}

/* ===== CTA ===== */
.cta-bg{will-change:transform}
.cta-img{will-change:transform}
.cta-overlay{will-change:opacity}

@supports(animation-timeline:view()){
  .cta-bg{animation:cta-zoom linear both;animation-timeline:view();animation-range:cover 5% cover 40%}
  @keyframes cta-zoom{from{transform:scale(1.15)}to{transform:scale(1)}}
}
@supports not(animation-timeline:view()){
  .cta-bg{animation:cta-zoom-fallback 1.5s cubic-bezier(.16,1,.3,1) both}
  @keyframes cta-zoom-fallback{from{transform:scale(1.15)}to{transform:scale(1)}}
}

/* ===== Scroll Reveal ===== */
.reveal{opacity:0;transform:translateY(32px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.revealed{opacity:1;transform:translateY(0)}
.reveal[data-delay="100"]{transition-delay:.1s}
.reveal[data-delay="200"]{transition-delay:.2s}
.reveal[data-delay="300"]{transition-delay:.3s}
.reveal[data-delay="400"]{transition-delay:.4s}
.reveal[data-delay="500"]{transition-delay:.5s}

/* ===== Responsive ===== */
@media(max-width:1023px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:639px){
  .services-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr}
  .gallery-img-wrap{aspect-ratio:4/3!important}
  .section-title{font-size:clamp(1.75rem,8vw,2.5rem)}
  #hero h1{font-size:clamp(2rem,10vw,3.5rem)}
  .hero-decoration{display:none}
  .testimonial-card{padding:24px}
}

/* ===== Reduced Motion ===== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .hero-content,.cta-bg{animation:none}
}