/* inline <style> blocks */
body { font-family: 'Inter', -apple-system, sans-serif; }
        h1, h2, h3, h4, h5, h6, .font-heading { font-family: 'Commissioner', sans-serif; }
        .line-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
        .hero-overlay { background: linear-gradient(135deg, rgba(15,23,42,0.85) 0%, rgba(30,64,175,0.6) 100%); }
        .service-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
        .service-card { transition: all 0.3s ease; }
        .nav-link { position: relative; }
        .nav-link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: #e09900; transition: width 0.3s ease; }
        .nav-link:hover::after { width: 100%; }
        @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        .animate-fade-in-up { animation: fadeInUp 0.6s ease forwards; }
/* Breakdance Image element puts custom classes on the wrapper div, but the
   original site had these utilities on the <img> itself — cascade them in. */
.breakdance .bde-image.h-12 img { height: 3rem !important; width: auto !important; }
.breakdance .bde-image.h-20 img { height: 5rem !important; width: auto !important; }
.breakdance .bde-image.h-24 img { height: 6rem !important; width: auto !important; }
.breakdance .bde-image.w-full img { width: 100% !important; }
.breakdance .bde-image.h-64 img { height: 16rem !important; }
.breakdance .bde-image.object-cover img { object-fit: cover !important; }
.breakdance .bde-image.rounded-2xl img { border-radius: 1rem; }
.breakdance .bde-image.rounded-lg img { border-radius: 0.5rem; }
.breakdance .bde-image.rounded img { border-radius: 0.25rem; }
.breakdance .bde-image.brightness-0.invert img { filter: brightness(0) invert(1); }

/* Breakdance's .bde-div CSS (max-width:100%) loads after Tailwind and
   flattens .container — restore Tailwind container semantics */
.breakdance .container { margin-left: auto !important; margin-right: auto !important; width: 100% !important; }
@media (min-width: 640px)  { .breakdance .container { max-width: 640px !important; } }
@media (min-width: 768px)  { .breakdance .container { max-width: 768px !important; } }
@media (min-width: 1024px) { .breakdance .container { max-width: 1024px !important; } }
@media (min-width: 1280px) { .breakdance .container { max-width: 1280px !important; } }
@media (min-width: 1536px) { .breakdance .container { max-width: 1536px !important; } }