/* ============================================================
   RESPONSIVE — global media-query tweaks that don't belong
   to a specific component file. Component-level breakpoints
   live alongside their CSS (cases.css, team.css, etc).
   ============================================================ */


/* === <= 1024px =============================================== */
@media (max-width: 1024px) {
    .nav { padding: 24px 36px; }
    .hero { padding: 130px 36px 80px; }
    .hero__line-top { left: 36px; right: 36px; }
    .footer { padding: 90px 36px 50px; }
}


/* === <= 768px (tablet / mobile) ============================= */
@media (max-width: 768px) {
    .nav { padding: 20px 24px; }
    .nav.is-scrolled { padding-top: 16px; padding-bottom: 16px; }
    .nav__right { display: none; }
    .nav__logo img { height: 22px; }

    .hero { padding: 120px 24px 80px; min-height: 100svh; }
    .hero__line-top { top: 72px; left: 24px; right: 24px; }
    .hero__est { margin-bottom: 36px; }
    .hero__est img { height: 56px; }
    .hero__headline { font-size: clamp(2rem, 8vw, 2.8rem); margin-bottom: 32px; }
    .hero__divider { margin-bottom: 32px; }
    .hero__subtitle { font-size: 0.875rem; line-height: 1.7; }
    .hero__scroll { bottom: 24px; }

    /* Performance: kill blur filters on mobile */
    .reveal-blur { filter: none; }
    .reveal-stagger .stagger-line { filter: none; }
    .cases__statement .word {
        filter: none;
        transform: translateY(30px);
    }

    .footer { padding: 80px 24px 40px; }
}


/* === <= 480px (small phone) ================================ */
@media (max-width: 480px) {
    .nav { padding: 16px 20px; }
    .hero__headline { font-size: clamp(1.75rem, 7.5vw, 2.2rem); }
    .hero__subtitle { font-size: 0.8125rem; }
}


/* === >= 1400px (wide desktop) ============================== */
@media (min-width: 1400px) {
    .nav { padding: 36px 80px; }
    .hero { padding: 160px 80px 100px; }
    .hero__line-top { left: 80px; right: 80px; top: 100px; }
    .hero__content { max-width: 1080px; }
    .footer { padding: 120px 80px 60px; }
}