html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; color: #4B5563; background:#ffffff; }
h1, h2, h3, .font-display { font-family: 'Playfair Display', serif; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Navbar transition */
#navbar { transition: background-color .4s ease, box-shadow .4s ease, padding .4s ease; }

/* Top bar collapses upward, navbar takes its place */
.topbar { max-height: 40px; opacity: 1; overflow: hidden; transition: max-height .4s ease, opacity .3s ease, border-color .3s ease; }
.topbar.collapsed { max-height: 0; opacity: 0; border-color: transparent; }

/* Hero text fade in */
.hero-fade-1 { opacity:0; transform: translateY(20px); animation: fadeUp .9s ease .15s forwards; }
.hero-fade-2 { opacity:0; transform: translateY(20px); animation: fadeUp .9s ease .4s forwards; }
.hero-fade-3 { opacity:0; transform: translateY(20px); animation: fadeUp .9s ease .65s forwards; }
.hero-fade-4 { opacity:0; transform: translateY(20px); animation: fadeUp .9s ease .9s forwards; }
@keyframes fadeUp { to { opacity:1; transform: translateY(0); } }

/* Button ripple */
.btn-ripple { position: relative; overflow: hidden; }
.btn-ripple span.ripple {
  position: absolute; border-radius: 50%; background: rgba(255,255,255,0.35);
  transform: scale(0); animation: ripple .6s linear; pointer-events: none;
}
@keyframes ripple { to { transform: scale(3.5); opacity: 0; } }

/* Service card top border + lift */
.service-card { transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.service-card:hover { transform: translateY(-8px); box-shadow: 0 22px 45px -20px rgba(15,23,42,0.25); }

/* Project card image zoom */
.project-img { transition: transform .7s ease; }
.project-card:hover .project-img { transform: scale(1.08); }
.project-overlay { opacity: 0; transition: opacity .4s ease; }
.project-card:hover .project-overlay { opacity: 1; }
.project-card .view-details { transform: translateY(12px); opacity:0; transition: all .4s ease .05s; }
.project-card:hover .view-details { transform: translateY(0); opacity:1; }

/* mobile menu */
#mobile-menu { max-height: 0; overflow: hidden; transition: max-height .45s ease; }
#mobile-menu.open { max-height: 560px; }

/* process line */
.process-line { background: linear-gradient(90deg, #E5E7EB, #D4A017, #E5E7EB); }

/* gold underline accent */
.gold-underline::after {
  content: ''; display: block; width: 56px; height: 3px; background: #D4A017; margin-top: 14px;
}
.gold-underline.center::after { margin-left: auto; margin-right: auto; }

/* inner-page hero banner */
.page-hero { background-size: cover; background-position: center; }

::selection { background: #D4A017; color: #fff; }