/* ─── Reset & Base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* ─── Selection ─── */
::selection { background: #ff6b57; color: #1a1a1a; }

/* ─── Hero ─── */
.hero-tag { opacity: 0; transform: translateY(20px); animation: fadeUp 0.8s 0.3s forwards; }
.hero-title { opacity: 0; transform: translateY(30px); animation: fadeUp 0.8s 0.5s forwards; }
.hero-subtitle { opacity: 0; transform: translateY(20px); animation: fadeUp 0.8s 0.7s forwards; }
.hero-ctas { opacity: 0; transform: translateY(20px); animation: fadeUp 0.8s 0.9s forwards; }

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ─── CTA Buttons ─── */
.cta-primary {
  border-radius: 0;
  font-weight: 500;
  letter-spacing: 0.08em;
  box-shadow: 0 4px 20px rgba(255, 107, 87, 0.3);
  position: relative;
  overflow: hidden;
}
.cta-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.3s;
}
.cta-primary:hover::after { opacity: 1; }
.cta-primary:hover { box-shadow: 0 8px 32px rgba(255, 107, 87, 0.4); transform: translateY(-2px); }

.cta-secondary {
  border-radius: 0;
  font-weight: 400;
  letter-spacing: 0.08em;
}
.cta-secondary:hover { border-color: #ff6b57; background: rgba(255, 107, 87, 0.05); }

/* ─── Section Headers ─── */
.section-header { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.section-header.visible { opacity: 1; transform: translateY(0); }

/* ─── Services Grid ─── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.04);
}

.service-card {
  background: #1a1a1a;
  padding: 2.5rem;
  transition: background 0.4s ease;
  cursor: default;
}
.service-card:hover { background: #222222; }

.service-icon-wrap {
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 107, 87, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s, background 0.3s;
}
.service-card:hover .service-icon-wrap {
  border-color: rgba(255, 107, 87, 0.5);
  background: rgba(255, 107, 87, 0.05);
}

/* ─── About ─── */
.about-image-wrap { opacity: 0; transform: translateX(-30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.about-image-wrap.visible { opacity: 1; transform: translateX(0); }

.about-image-main { opacity: 0; transform: translateX(-20px); transition: all 0.8s 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.about-image-main.visible { opacity: 1; transform: translateX(0); }

/* ─── Process ─── */
.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  position: relative;
}
.process-steps::before {
  content: '';
  position: absolute;
  top: 2.25rem;
  left: 12.5%;
  right: 12.5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,107,87,0.3), rgba(255,107,87,0.3), transparent);
}
.process-step { opacity: 0; transform: translateY(20px); transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.process-step.visible { opacity: 1; transform: translateY(0); }

/* ─── Gallery ─── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.04);
}
.gallery-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 5/4;
  cursor: pointer;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s;
  filter: grayscale(0.3);
}
.gallery-item:hover img {
  transform: scale(1.05);
  filter: grayscale(0);
}
.gallery-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26,26,26,0.8) 0%, transparent 60%);
  display: flex;
  align-items: flex-end;
  padding: 1.5rem;
  opacity: 0;
  transition: opacity 0.4s;
}
.gallery-item:hover .gallery-item-overlay { opacity: 1; }

/* ─── Reviews ─── */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.04);
}
.review-card {
  background: #1a1a1a;
  padding: 2.5rem;
  transition: background 0.4s;
}
.review-card:hover { background: #222222; }
.review-text { min-height: 120px; }

/* ─── Contact ─── */
.contact-item { cursor: default; }
.contact-item:hover .border { border-color: rgba(255, 107, 87, 0.5); }

/* ─── Scroll Animations ─── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Mobile Menu ─── */
#mobile-menu.open { opacity: 1; pointer-events: all; }

/* ─── Responsive ─── */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .process-steps { grid-template-columns: repeat(2, 1fr); gap: 3rem; }
  .process-steps::before { display: none; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .services-grid { grid-template-columns: 1fr; }
  .reviews-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .process-steps { grid-template-columns: 1fr; gap: 2.5rem; }

  .hero-title { font-size: 2.75rem; }
  .section-title { font-size: 2.25rem; }

  .about-image-main { height: 350px; }
  .about-image-main .absolute { position: relative; bottom: auto; right: auto; width: 100%; height: auto; margin-top: 1rem; }
}

@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: 2.25rem; }
}

/* ─── Navbar Scroll State ─── */
.nav-scrolled {
  background: rgba(26, 26, 26, 0.95) !important;
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* ─── Focus styles ─── */
input:focus, textarea:focus { outline: none; }
input::placeholder, textarea::placeholder { color: rgba(255,255,255,0.2); }