/* =====================================================================
   polish.css
   Shared motion + mobile-native layer for the main pages.
   Loaded AFTER styles.css and BEFORE each page's own inline <style>,
   so a page can still override anything here.
   ===================================================================== */

:root { --ease-lux: cubic-bezier(0.22,1,0.36,1); }
html { scroll-behavior: smooth; }

/* ---------- motion ---------- */
.btn, .media-card, .creds-strip .env, .contact-btn-new {
    transition: transform .5s var(--ease-lux),
                box-shadow .5s var(--ease-lux),
                border-color .4s ease,
                background-color .35s ease;
}
.btn:hover, .contact-btn-new:hover { transform: translateY(-2px); }
.media-card:hover { transform: translateY(-4px); }
.creds-strip .env:hover { transform: translateY(-2px); border-color: var(--border-gold); }
.btn i, .media-card .media-arrow i { transition: transform .5s var(--ease-lux); }
.btn:hover i, .media-card:hover .media-arrow i { transform: translateX(4px); }

/* headings: no orphaned single-word last lines */
.section-title { text-wrap: balance; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ---------- mobile native ---------- */
@media (max-width: 768px) {
    .section-header { margin-bottom: 20px; }
    .section-title { font-size: 28px; line-height: 1.14; margin-bottom: 0; }

    .media-section { padding: 26px 0; }
    .media-grid { gap: 12px; }
    .media-card { padding: 20px 18px; gap: 15px; }

    .contact-section { padding: 30px 0 40px; }
    .contact-desc { font-size: 14.6px; line-height: 1.62; margin-bottom: 20px; }
    .contact-buttons { gap: 10px; margin-bottom: 20px; }

    /* footer link lists were spaced like a desktop column */
    .footer-top { padding: 28px 0 20px; }
    .footer-grid { gap: 22px; }
    .footer-links ul { display: grid; gap: 9px; }
    .footer-links ul li { margin-bottom: 0; }
    .footer-links h4, .footer-newsletter h4 { margin-bottom: 11px; }
    .footer-brand p { font-size: 13.4px; line-height: 1.6; }
    .footer-bottom { padding: 14px 0; }
}

/* ---------- mobile bottom bar ---------- */
body { padding-bottom: 74px; }
@media (min-width: 992px) { body { padding-bottom: 0; } }

/* ---------- fallback if the AOS script never loads ---------- */
html.no-aos [data-aos] { opacity: 1 !important; transform: none !important; }