@media (max-width: 1400px) {
    .nav-links {
        gap: 16px;
    }
    
    .nav-links li a {
        font-size: 12px;
    }
    
    .btn-nav span {
        display: none;
    }
    
    .btn-nav {
        padding: 10px 14px;
    }
}

/* Hero goes single-column at 1240px (before the headline would be forced to
   wrap mid-line in a narrow two-column layout). */
@media (max-width: 1240px) {
    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 48px;
        /* the banner above already clears the fixed nav, so no 100px top pad here */
        padding: 44px 0 60px;
    }

    .hero-text {
        align-items: center;
        height: auto;
    }
}

/* Two-column hero is narrowest between 1241px and ~1440px.
   Nudge the headline down there so each line still sits on one line. */
@media (max-width: 1440px) and (min-width: 1241px) {
    .hero-headline h1 {
        font-size: clamp(26px, 10.6cqw, 42px);
    }
}

/* Hero sub-elements: tighten rhythm on tablets and below. */
@media (max-width: 1240px) {
    .hero-headline {
        align-items: center;
    }

    .hero-subtext {
        max-width: 680px;
    }

    .hero-images {
        height: clamp(380px, 48vh, 560px);
        order: -1;
        margin-top: 20px;
    }

    .hero-headline h1 {
        font-size: clamp(30px, 5.4vw, 46px);
    }
}

@media (max-width: 1200px) {
    .nav-links {
        display: none;
    }
    
    .hamburger {
        display: flex;
    }
    
    .hero-text {
        align-items: center;
        height: auto;
    }
}

@media (max-width: 768px) {
    section {
        padding: 80px 0;
    }
    
    .container,
    .nav-container,
    .hero-container {
        padding: 0 24px;
    }
    
    .hero {
        min-height: auto;
    }
    
    .hero-content {
        padding: 90px 0 40px;
        gap: 40px;
    }
    
    .hero-images {
        height: 380px;
    }
    
    .img-1 {
        width: 160px;
        height: 220px;
        top: 0;
        left: 5%;
    }
    
    .img-2 {
        width: 140px;
        height: 200px;
        top: 10%;
        right: 5%;
    }
    
    .img-3 {
        width: 150px;
        height: 210px;
        bottom: 5%;
        left: 15%;
    }
    
    .img-4 {
        width: 130px;
        height: 190px;
        bottom: 10%;
        right: 10%;
    }
    
    .hero-buttons {
        flex-direction: column;
        width: 100%;
        max-width: 320px;
    }
    
    .btn-primary,
    .btn-secondary {
        width: 100%;
        justify-content: center;
    }
    
    .hero-label {
        flex-direction: column;
        gap: 4px;
    }
    
    .hero-label .divider {
        display: none;
    }
    
    .hero-scroll {
        bottom: 20px;
    }
}

@media (max-width: 480px) {
    .hero-images {
        height: 320px;
    }
    
    .img-1, .img-2, .img-3, .img-4 {
        border-radius: 12px;
    }
}

/* Tablet: snapshot + editorial + visit + trust collapse */
@media (max-width: 1024px) {
    .snapshot-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .editorial {
        grid-template-columns: 1fr;
    }
    
    .editorial-media {
        height: clamp(420px, 62vh, 620px);
    }
    
    .editorial-body {
        padding-top: clamp(44px, 6vw, 72px);
    }
    
    .trust-inner,
    .visit {
        grid-template-columns: 1fr;
    }
    
    .visit-map {
        min-height: 420px;
    }
    
    .uniform-cards {
        grid-template-columns: 1fr;
    }
    
    .footer-top {
        grid-template-columns: 1fr 1fr;
    }
    
    .footer-brand {
        grid-column: 1 / -1;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .snapshot-grid {
        grid-template-columns: 1fr;
    }

    /* Banner: drop the flanking tags so the Telugu logo owns the ribbon */
    .brand-banner-tag {
        display: none;
    }

    .brand-banner-inner {
        padding: 0 24px;
    }
    
    .world-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .tile-a, .tile-b, .tile-c, .tile-d {
        grid-column: 1 / -1;
        margin-top: 0;
        min-height: 440px;
    }
    
    .tile-a {
        min-height: 520px;
    }
    
    .split-screen {
        grid-template-columns: 1fr;
    }
    
    .split-panel {
        min-height: 520px;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .final-cta {
        min-height: 82vh;
        padding: 100px 0;
    }
    
    .final-actions {
        flex-direction: column;
        width: 100%;
        max-width: 320px;
    }
    
    .final-actions .btn-ghost-light,
    .final-actions .btn-outline-light {
        width: 100%;
        justify-content: center;
    }
    
    .visit-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .visit-actions .btn-primary,
    .visit-actions .btn-secondary {
        width: 100%;
        justify-content: center;
    }
    
    .footer-top {
        grid-template-columns: 1fr;
    }
    
    .footer-bottom {
        justify-content: center;
        text-align: center;
    }
    
    .lightbox-nav {
        width: 44px;
        height: 44px;
    }
    
    /* Sticky CTA bar on mobile */
    .sticky-bar {
        display: grid;
    }
    
    body {
        padding-bottom: 0;
    }
}

@media (min-width: 769px) {
    .sticky-bar {
        display: none;
    }
}

/* ---------- Store experience slider ---------- */
@media (max-width: 1200px) {
    .store-slider {
        --slide-w: clamp(190px, 24vw, 240px);
        --slide-h: clamp(280px, 36vw, 400px);
    }

    .slide-wide {
        flex-basis: calc(var(--slide-w) * 2.1);
        width: calc(var(--slide-w) * 2.1);
    }
}

@media (max-width: 900px) {
    /* The chevrons eat too much of a narrow track; the slides themselves and
       native swipe carry the interaction instead. */
    .store-slider {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .slider-nav {
        display: none;
    }

    .store-slider {
        --slide-w: clamp(180px, 44vw, 240px);
        --slide-h: clamp(280px, 66vw, 400px);
        --slider-pad: clamp(16px, 5vw, 28px);
    }
}

@media (max-width: 480px) {
    .store-slider {
        --slide-w: min(74vw, 240px);
        --slide-h: min(115vw, 380px);
        --slide-gap: 8px;
        --slider-pad: clamp(10px, 4vw, 20px);
    }

    .slide-wide {
        flex-basis: min(92vw, 320px);
        width: min(92vw, 320px);
    }

    .slide::after {
        padding: 40px 14px 13px;
        font-size: 9px;
        letter-spacing: 0.14em;
    }

    .slider-status {
        padding: 0 16px;
        font-size: 9px;
        letter-spacing: 0.16em;
    }
}

/* Short viewports (e.g. 1366x768, 1280x800 laptops): compress the banner ribbon and
   the hero image column so nav + banner + hero still fit inside one screen. */
@media (min-width: 1241px) and (max-height: 820px) {
    :root {
        --banner-ribbon: clamp(56px, 6vw, 76px);
        --banner-gap: clamp(8px, 1vw, 12px);
    }

    .hero-content {
        padding: 32px 0 44px;
    }

    .hero-images {
        height: clamp(320px, 44vh, 520px);
    }
}

@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;
    }
}