body {
  scroll-behavior: smooth;
}

.font-body { font-family: 'Inter', system-ui, sans-serif; }
.font-display { font-family: 'Oswald', sans-serif; }
.text-charcoal { color: #1c1f26; }

.section-heading {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.heading-accent {
  width: 60px;
  height: 3px;
  background: #c9a227;
  margin: 12px auto 0;
}
@media (min-width: 768px) {
  #about .heading-accent { margin-left: 0; }
}

/* Hero background: blueprint grid, no clip-path (handled separately now) */
.hero-pattern {
  background-color: #0a1f44;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(160deg, #0a1f44, #050f24);
  background-size: 40px 40px, 40px 40px, 100% 100%;
}

/* Fixed-height diagonal strip — independent of hero's variable content height */
.diagonal-cut {
  height: 50px;
  background-color: #0a1f44;
  clip-path: polygon(0 0, 100% 0, 100% 40%, 0 100%);
}

/* Rising spark particles in hero */
.spark {
  position: absolute;
  bottom: 40px;
  width: 4px;
  height: 4px;
  background: #c9a227;
  border-radius: 50%;
  animation: spark-rise 4s ease-in infinite;
  opacity: 0;
}
@keyframes spark-rise {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  15% { opacity: 0.9; }
  100% { transform: translateY(-160px) scale(0.3); opacity: 0; }
}

/* Hero text entrance */
.hero-fade-1, .hero-fade-2, .hero-fade-3 {
  opacity: 0;
  transform: translateY(16px);
  animation: fadeInUp 0.8s ease forwards;
}
.hero-fade-1 { animation-delay: 0.1s; }
.hero-fade-2 { animation-delay: 0.35s; }
.hero-fade-3 { animation-delay: 0.6s; }
@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(0); }
}

/* Scroll-reveal for sections */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Rivet-style divider between sections */
.rivet-divider {
  height: 20px;
  background-image: radial-gradient(circle, #c9a227 2.5px, transparent 3px);
  background-size: 26px 26px;
  background-position: center;
  opacity: 0.55;
}

/* Service cards */
.service-card {
  border-left: 4px solid #c9a227;
  background: white;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(10,31,68,0.15);
}
.service-icon {
  width: 26px;
  height: 26px;
  margin: 0 auto 8px;
  color: #c9a227;
}

/* Gallery image hover */
.gallery-img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gallery-img:hover {
  transform: scale(1.04);
  box-shadow: 0 8px 20px rgba(10,31,68,0.2);
}

html[dir="rtl"] body {
  font-family: 'Noto Nastaliq Urdu', 'Inter', sans-serif;
}

img { -webkit-user-drag: none; }

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .spark, .hero-fade-1, .hero-fade-2, .hero-fade-3, .reveal {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}