:root {
  --color-primary: #0F172A; /* Slate 900 - Dark Blue/Black */
  --color-accent: #EAB308; /* Amber 500 - Gold/Yellow */
  --color-text: #1E293B;   /* Slate 800 */
  --color-background: #F9FAFB; /* Gray 50 */
}

html { scroll-behavior: smooth; }
body { background-color: var(--color-background); color: var(--color-text); }

/* Buttons and brand utilities */
.btn-primary { background-color: var(--color-accent); color: var(--color-primary); transition: all 0.3s ease-in-out; font-weight: 700; }
.btn-primary:hover { background-color: #D99A06; transform: translateY(-1px); box-shadow: 0 6px 15px -3px rgba(0, 0, 0, 0.25); }
.bg-primary-dark { background-color: var(--color-primary); }
.text-accent-gold { color: var(--color-accent); }

/* Scroll animation */
.fade-in-on-scroll { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.is-visible { opacity: 1; transform: translateY(0); }

/* Transition delay helpers for staggered fades */
.fade-delay-100 { transition-delay: .1s; }
.fade-delay-200 { transition-delay: .2s; }
.fade-delay-300 { transition-delay: .3s; }
.fade-delay-400 { transition-delay: .4s; }
.fade-delay-500 { transition-delay: .5s; }

/* Cards */
.card-tilt { transition: all 0.5s ease-in-out; }
.card-tilt:hover { transform: perspective(1000px) rotateX(1deg) rotateY(1deg) scale(1.02); box-shadow: 0 20px 35px -5px rgba(0, 0, 0, 0.25); }
.quote-card { border-left: 5px solid var(--color-accent); }
.service-card { border-top: 5px solid var(--color-accent); }

/* Sticky mobile CTA (visible on small screens) */
@media (max-width: 768px) {
  .mobile-sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; box-shadow: 0 -4px 10px 0px rgba(0, 0, 0, 0.2); }
}

/* Skip link for accessibility */
.skip-link { position: absolute; left: -999px; top: -999px; background: #fff; color: #000; padding: 8px 12px; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
.skip-link:focus { left: 8px; top: 8px; z-index: 60; }

/* Hero background helper */
.hero-bg { position: relative; background-size: cover; background-position: center; }
.hero-bg::before { content: ""; position: absolute; inset: 0; background: rgba(15, 23, 42, 0.75); } /* overlay */
.hero-bg > * { position: relative; }

/* Account for sticky header when anchoring */
[id] { scroll-margin-top: 90px; }

/* Header/logo defaults */
.site-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .5px; }
.site-logo img { width: 40px; height: 40px; object-fit: contain; border-radius: 6px; }

/* Mobile nav panel */
#mobile-menu { display: none; }
.mobile-menu-open #mobile-menu { display: block; }