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; }
.testimonial-card { position: relative; overflow: hidden; transition: transform .35s ease, box-shadow .35s ease; }
.testimonial-card::before { content: "“"; position: absolute; right: 18px; top: -18px; color: rgba(212,160,23,.09); font: 110px/1 Georgia,serif; }
.testimonial-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -25px rgba(15,23,42,.35); }
.client-logo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:52px; }
.client-logo-card { min-height:210px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; padding:28px; border:1px solid #e5e7eb; background:#fff; text-align:center; transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease; }
.client-logo-card:hover { transform:translateY(-6px); border-color:var(--gold); box-shadow:0 22px 45px -24px rgba(15,23,42,.35); }
.client-logo-media { height:92px; width:100%; display:grid; place-items:center; }
.client-logo-media img { max-height:88px; max-width:220px; width:auto; object-fit:contain; }
.client-logo-card p { color:#111827; font-weight:700; line-height:1.45; max-width:280px; }
.client-fallback { display:none; width:84px; height:84px; place-items:center; border-radius:50%; background:#0f172a; color:#d4a017; font:700 23px Georgia,serif; }
@media(max-width:800px){.client-logo-grid{grid-template-columns:1fr}.client-logo-card{min-height:180px}}

/* 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; }

/* 2026 visual refinement: editorial spacing and premium construction details */
:root { --gold: var(--cms-gold, #D4A017); --navy: var(--cms-dark, #0F172A); }
body { overflow-x: hidden; }
.brand-logo-crop { position:relative; display:inline-block; flex:0 0 auto; width:58px; height:58px; overflow:hidden; border-radius:5px; background:#53616a; box-shadow:0 0 0 1px rgba(255,255,255,.16); }
.brand-logo-crop img { position:absolute; width:94px; height:63px; max-width:none; object-fit:cover; left:-18px; top:-1px; }
footer .brand-logo-crop { width:48px; height:48px; }
footer .brand-logo-crop img { width:78px; height:52px; left:-15px; }
#navbar { backdrop-filter: blur(12px); }
.page-hero { position: relative; isolation: isolate; }
.page-hero::after { content:""; position:absolute; inset:auto 0 0; height:4px; background:linear-gradient(90deg,var(--gold) 0 18%,transparent 18%); z-index:2; }
.service-card { position:relative; overflow:hidden; }
.service-card::after { content:""; position:absolute; inset:auto 0 0; height:3px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .35s ease; }
.service-card:hover::after { transform:scaleX(1); }
.project-card { background:var(--navy); }
section { position:relative; }
@media (min-width:1024px) { section:not(.page-hero) > div { position:relative; } }
@media (max-width:640px) { .brand-logo-crop { width:50px; height:50px; } .brand-logo-crop img { width:82px; height:55px; left:-16px; } }