/* ============================================================
   Sri Krishna Decoration — editorial / luxury design system
   Fraunces (display) + Hanken Grotesk (body) · bone + ember
   ============================================================ */

html { scroll-padding-top: 90px; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ---------- Grain overlay ---------- */
.grain {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.dark .grain { opacity: .07; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: #e8e1d3; }
::-webkit-scrollbar-thumb { background: #c8bfab; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #c9531f; }
.dark ::-webkit-scrollbar-track { background: #15110c; }
.dark ::-webkit-scrollbar-thumb { background: #3a342b; }
.dark ::-webkit-scrollbar-thumb:hover { background: #c9531f; }

/* ---------- Navbar ---------- */
#nav { background: rgba(243,239,230,.72); backdrop-filter: blur(14px) saturate(1.2); }
.dark #nav { background: rgba(21,17,12,.72); }
#nav.scrolled { box-shadow: 0 1px 0 rgba(24,20,16,.08), 0 14px 40px -28px rgba(24,20,16,.4); }
.dark #nav.scrolled { box-shadow: 0 1px 0 rgba(243,239,230,.08); }

/* underline links */
.link-underline { position: relative; }
.link-underline::after {
  content: ''; position: absolute; left: 0; bottom: -4px; height: 1.5px; width: 0;
  background: #c9531f; transition: width .3s cubic-bezier(.16,1,.3,1);
}
.link-underline:hover { color: #c9531f; }
.link-underline:hover::after { width: 100%; }

/* ---------- Eyebrow label ---------- */
.eyebrow {
  font-size: .72rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase;
  color: #c9531f;
}

/* ---------- Hero load animation ---------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-rise { opacity: 0; animation: rise .9s cubic-bezier(.16,1,.3,1) forwards; }

/* ---------- Brand marquee ---------- */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee { width: max-content; animation: marquee 28s linear infinite; }
.marquee:hover { animation-play-state: paused; }

/* ---------- Service cards ---------- */
.svc { position: relative; padding: 2.25rem 1.9rem 2rem; transition: background .35s, transform .35s; }
.svc:hover { background: #f6ede2; }
.dark .svc:hover { background: #271f15; }
.svc-num {
  position: absolute; top: 1.6rem; right: 1.7rem; font-family: 'Fraunces', serif;
  font-size: .95rem; color: #c9531f; letter-spacing: .05em;
}
.svc-ic { width: 2.9rem; height: 2.9rem; color: #c9531f; }
.svc-ic svg { width: 100%; height: 100%; }
.svc-h { margin-top: 1.4rem; font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.35rem; letter-spacing: -.01em; }
.svc-p { margin-top: .6rem; font-size: .92rem; line-height: 1.6; color: #4a4338; }
.dark .svc-p { color: rgba(243,239,230,.6); }

/* ---------- Feature list (why us) ---------- */
.feat { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1.15rem 0; align-items: baseline; }
.feat dt { font-family: 'Fraunces', serif; font-size: 1.08rem; font-weight: 600; letter-spacing: -.01em; }
.feat dd { font-size: .9rem; color: #4a4338; line-height: 1.5; }
.dark .feat dd { color: rgba(243,239,230,.6); }
@media (max-width: 480px) { .feat { grid-template-columns: 1fr; gap: .35rem; } }

/* ---------- Gallery tiles ---------- */
.tile { position: relative; overflow: hidden; border-radius: 1.4rem; }
.tile img { height: 100%; width: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.16,1,.3,1); }
.tile:hover img { transform: scale(1.08); }
.tile figcaption {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.25rem; color: #fff; font-family: 'Fraunces', serif; font-size: 1.05rem; font-weight: 600;
  background: linear-gradient(to top, rgba(20,16,12,.78), rgba(20,16,12,.05) 55%, transparent);
  opacity: 0; transition: opacity .4s;
}
.tile:hover figcaption { opacity: 1; }
.tile .t-k {
  font-family: 'Hanken Grotesk', sans-serif; font-size: .62rem; font-weight: 600;
  letter-spacing: .25em; text-transform: uppercase; color: #e07a48; margin-bottom: .25rem;
}

/* ---------- Contact icons & form ---------- */
.ci {
  display: grid; place-items: center; height: 2.9rem; width: 2.9rem; flex-shrink: 0;
  border-radius: 999px; background: rgba(201,83,31,.1); color: #c9531f;
}
.ci svg { height: 1.2rem; width: 1.2rem; }
.lbl { display: block; font-size: .8rem; margin-bottom: .4rem; color: #4a4338; }
.dark .lbl { color: rgba(243,239,230,.6); }
.inp {
  width: 100%; border-radius: .9rem; padding: .85rem 1rem; font-size: .95rem;
  background: #fbf8f1; border: 1px solid rgba(24,20,16,.14); color: #181410;
  transition: border-color .2s, box-shadow .2s;
}
.inp::placeholder { color: #9c948a; }
.inp:focus { outline: none; border-color: #c9531f; box-shadow: 0 0 0 3px rgba(201,83,31,.15); }
.dark .inp { background: #1f1810; border-color: rgba(243,239,230,.14); color: #f3efe6; }

/* ---------- Reveal on scroll ---------- */
[data-reveal] {
  opacity: 0; transform: translateY(30px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Floating WhatsApp ---------- */
@keyframes bounce-slow { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.animate-bounce-slow { animation: bounce-slow 2.6s ease-in-out infinite; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], .hero-rise { opacity: 1 !important; transform: none !important; transition: none; animation: none; }
  .marquee, .animate-bounce-slow { animation: none; }
}