/* ============================================
   SEC — responsive breakpoints
   Tablet < 1024, mobile < 720, narrow mobile < 480
   ============================================ */

@media (max-width: 1100px) {
    .container { padding: 0 1.6rem; }
    :root { --section-pad: 90px; }

    .stats-grid { grid-template-columns: repeat(3, 1fr); }
    .stats-grid .stat:nth-child(n+4) { border-top: 1px solid var(--border); }

    .automation-inner { grid-template-columns: 1fr; gap: 3rem; }
    .automation-badge { order: -1; }

    /* Stack the SDG section; visual goes back to in-flow positioning so it
       can stack above the text.  Background vignette stays the same — it
       adapts to the taller stacked layout naturally. */
    .design-group-visual {
        position: relative;
        top: auto; bottom: auto; left: auto;
        width: 100%;
        max-width: 420px;
        margin: 0 auto 3rem;
        aspect-ratio: 1 / 1;
    }
    .design-group-bim {
        height: auto;
        width: 100%;
        max-width: none;
    }
    .design-group-inner {
        display: block;
    }
    .design-group-text {
        width: 100%;
        max-width: 100%;
    }

    .about-inner { grid-template-columns: 1fr; gap: 2.5rem; }

    .footer-inner { grid-template-columns: 1fr; gap: 3rem; }
}

@media (max-width: 880px) {
    .service-grid { grid-template-columns: repeat(2, 1fr); }
    .project-grid { grid-template-columns: repeat(2, 1fr); }
    .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .contact-header { margin-bottom: 2.5rem; }
    .contact-form-wrapper { padding: 1.75rem; }
    .company-grid { grid-template-columns: 1fr; gap: 1.4rem; }

    /* Stack hero vertically — banner stays full-width on top (at its
       scaled aspect-ratio height), text falls into normal flow below.
       The text slide-in animation still triggers via `.is-revealed`. */
    .hero {
        padding-top: var(--header-h);
    }
    .hero-strip {
        /* keeps aspect-ratio 1920/500; scales with viewport width */
    }
    .hero-content {
        position: relative;
        top: auto;
        left: auto;
        bottom: auto;
        width: 100%;
        max-width: 100%;
        padding: 2rem 1.6rem 3rem;
    }
    /* On mobile the logo doesn't slide right (text is below it, not beside) */
    .hero.is-revealed .hero-logo-wrap {
        transform: translate(-50%, -50%);
    }
    /* Larger / readable typography on mobile since vertical space is unlimited */
    .hero-eyebrow { font-size: 0.75rem; margin-bottom: 1rem; }
    .hero-title   { font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.15; margin-bottom: 1rem; }
    .hero-lead    { font-size: 1rem; margin-bottom: 1.5rem; }
    .hero-cta .btn { font-size: 0.95rem; padding: 0.7rem 1.2rem; }
    .scroll-cue { display: none; }
}

@media (max-width: 720px) {
    :root {
        --header-h: 72px;
        --section-pad: 70px;
    }

    /* Hide desktop nav, show hamburger */
    .nav { display: none; }
    .menu-toggle { display: flex; }

    /* Mobile nav overlay */
    .nav-overlay {
        display: block;
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.7);
        backdrop-filter: blur(6px);
        z-index: 998;
        opacity: 0; visibility: hidden;
        transition: opacity var(--t-smooth), visibility var(--t-smooth);
    }
    .nav-overlay.is-open { opacity: 1; visibility: visible; }

    .mobile-nav {
        display: block;
        position: fixed;
        top: 0; right: 0;
        width: min(82%, 320px);
        height: 100vh;
        background: var(--bg-darker);
        border-left: 1px solid var(--border);
        padding: calc(var(--header-h) + 1rem) 2rem 2rem;
        z-index: 999;
        transform: translateX(100%);
        transition: transform var(--t-smooth);
    }
    .mobile-nav.is-open { transform: translateX(0); }
    .mobile-nav ul { list-style: none; }
    .mobile-nav li { border-bottom: 1px solid var(--border); }
    .mobile-nav a {
        display: block;
        padding: 1.1rem 0;
        font-size: 1.05rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--text);
    }
    .mobile-nav a:hover { color: var(--sec-red-soft); }

    /* Hamburger animate-to-X when open */
    .menu-toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .menu-toggle.is-open span:nth-child(2) { opacity: 0; }
    .menu-toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    .hero-content { padding: 3rem 0 4rem; }
    .hero-cta { flex-direction: column; align-items: flex-start; }
    .hero-cta .btn { width: 100%; justify-content: center; }

    .service-grid { grid-template-columns: 1fr; }
    .project-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }

    .footer-right { grid-template-columns: 1fr; gap: 1.5rem; }
}

@media (max-width: 480px) {
    .logo-name { display: none; }
    .logo-divider { display: none; }
    .stats-grid { grid-template-columns: 1fr; }
    .badge-ring { width: 220px; height: 220px; }
    .badge-num { font-size: 1.8rem; }
    h1 { font-size: 2rem; }
    .hero-lead { font-size: 1rem; }
}

/* ── Phone hero: 4:5 video. Logo starts full-size then shrinks & rises; the
   eyebrow + title + lead OVERLAY the lower video, and the buttons fall just
   below it. Placed last so it wins over the 720/480 hero rules above. */
@media (max-width: 600px) {
    /* The area below the video (the button band) starts BLACK during the intro
       and fades to WHITE together with the intro's fade-to-white, so it ends as
       a clean white CTA band. The red page gradient is hidden either way. */
    .hero { position: relative; background: #000; transition: background 0.9s ease; }
    .hero.is-revealed { background: #fff; }
    .hero-bg { display: none; }
    .hero-strip { aspect-ratio: 1080 / 1350; }

    /* The lower video fades to WHITE so the black paragraph reads and the area
       blends seamlessly into the white button band below.  Hidden during the
       intro (so the truck isn't washed) — fades in with the reveal. */
    .hero-strip::after {
        content: '';
        position: absolute; inset: 0;
        z-index: 3; pointer-events: none;
        background: linear-gradient(to bottom,
            transparent 44%, rgba(255,255,255,0.55) 62%,
            rgba(255,255,255,0.92) 82%, #fff 100%);
        opacity: 0;
        transition: opacity 0.6s ease 0.35s;
    }
    .hero.is-revealed .hero-strip::after { opacity: 1; }

    /* Bigger logo — only shrinks a little and rises, since just the paragraph
       sits inside the video now (the buttons moved below it). */
    .hero-logo-wrap {
        width: 76%;
        top: 50%;
        transition: top 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s,
                    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
    }
    .hero.is-revealed .hero-logo-wrap {
        top: 27%;
        transform: translate(-50%, -50%) scale(0.8);
    }

    /* .hero-content flows BELOW the video and holds the buttons; the paragraph
       (.hero-text) is anchored to the video's bottom edge, inside the video. */
    .hero-content {
        position: relative;
        left: auto; right: auto; top: auto; bottom: auto;
        width: 100%; max-width: 100%;
        padding: 0;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.8s ease 0.4s,
                    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
    }
    .hero.is-revealed .hero-content { opacity: 1; transform: translateY(0); }

    /* Paragraph: sits inside the video, anchored to its bottom edge */
    .hero-text {
        position: absolute;
        left: 0; right: 0; bottom: 100%;
        padding: 0 1.4rem 0.7rem;
        text-align: center;
        z-index: 4;
    }
    /* Black paragraph text on the white fade */
    .hero-eyebrow { justify-content: center; margin-bottom: 0.5rem; font-size: 0.7rem; color: #555; }
    .hero-title {
        font-size: clamp(1.35rem, 6vw, 2rem); margin-bottom: 0.5rem;
        color: #111; text-shadow: none;
    }
    .hero-title .accent { color: var(--sec-red); }
    .hero-lead {
        font-size: 0.92rem; line-height: 1.5;
        margin: 0 auto; max-width: 42ch;
        color: #333; text-shadow: none;
    }

    /* Buttons sit on the hero background (black during intro → white at rest);
       black outlines/text read on the final white. */
    .hero-cta {
        flex-direction: column; align-items: stretch; gap: 0.6rem;
        padding: 1.4rem 1.4rem 2.4rem;
        background: transparent;
    }
    .hero-cta .btn { width: 100%; justify-content: center; }
    .hero-cta .btn--ghost { border-color: #1a1a1a; color: #111; }
    .hero-cta .btn--ghost:hover { border-color: var(--sec-red); color: var(--sec-red); }
}

/* Honor reduce-motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
}