/* ==========================================================================
   TMSPro — Responsive Stylesheet
   --------------------------------------------------------------------------
   Breakpoints (mobile-first overrides applied from largest first since base
   styles are desktop-oriented):
     - 1440px  (Laptop / Desktop)
     - 1280px  (Small Desktop / Large Laptop)
     - 1024px  (Tablet Landscape)
     -  768px  (Tablet Portrait)
     -  600px  (Large Phone)
     -  480px  (Small Phone)
     -  360px  (Extra Small)
   ========================================================================== */


/* ==========================================================================
   Ultra-wide / Desktop ≥ 1920px
   ========================================================================== */
@media (min-width: 1920px) {
    :root {
        --container-max: 1600px;
        --header-h: 96px;
    }
    .hero-heading { font-size: 6rem; }
}


/* ==========================================================================
   Small Desktop / Laptop  ≤ 1280px
   ========================================================================== */
@media (max-width: 1280px) {
    :root {
        --section-pad-y: clamp(3.5rem, 7vw, 6rem);
    }
    .nav-list { gap: 1.5rem; }
    .why-grid { grid-template-columns: repeat(2, 1fr); }
    .engagement-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-top { grid-template-columns: 1.5fr 1fr 1fr; }
    .footer-col-contact { grid-column: 1 / -1; padding-top: var(--space-5); border-top: 1px solid rgba(255, 255, 255, 0.10); }
}


/* ==========================================================================
   Tablet Landscape  ≤ 1024px
   ========================================================================== */
@media (max-width: 1024px) {
    :root { --header-h: 72px; --header-h-scrolled: 60px; }

    /* Header: switch to mobile nav */
    .primary-nav,
    .header-cta { display: none; }
    .mobile-menu-toggle { display: flex; }

    /* Section spacing & headings */
    .section-header-row { flex-direction: column; align-items: flex-start; }
    .section-header-row .btn { align-self: flex-start; }

    /* Hero */
    .hero { min-height: 90vh; }
    .hero-heading { font-size: clamp(2.4rem, 7vw, 4rem); }

    /* About */
    .about-grid { grid-template-columns: 1fr; }
    .about-media { max-width: 560px; }

    /* Stats */
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }

    /* Tower */
    .tower-layout { grid-template-columns: 1fr; gap: var(--space-7); }
    .tower-visual { display: none; }
    .tower-block-list { grid-template-columns: repeat(2, 1fr); }

    /* Services */
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .service-detail-grid { grid-template-columns: 1fr; }
    .service-detail-reverse .service-detail-media { order: 0; }

    /* Industries */
    .industries-grid { grid-template-columns: repeat(2, 1fr); }
    .industry-detail-grid { grid-template-columns: 1fr; }
    .industry-detail-reverse .industry-detail-media { order: 0; }

    /* Coaching */
    .coaching-grid { grid-template-columns: repeat(2, 1fr); }
    .programmes-grid { grid-template-columns: repeat(2, 1fr); }
    .coaching-intro-grid { grid-template-columns: 1fr; gap: var(--space-5); }
    .services-intro-grid { grid-template-columns: 1fr; gap: var(--space-5); }

    /* Projects */
    .projects-gallery { grid-template-columns: repeat(2, 1fr); }
    .project-card-featured { grid-column: span 2; grid-row: span 1; }

    /* Testimonials */
    .testimonials-grid { grid-template-columns: 1fr; max-width: 720px; margin-inline: auto; }

    /* CTA */
    .cta-card { grid-template-columns: 1fr; }
    .cta-actions { justify-content: flex-start; }

    /* About-related */
    .mission-grid { grid-template-columns: 1fr; }
    .values-grid { grid-template-columns: repeat(2, 1fr); }
    .value-grid { grid-template-columns: 1fr; max-width: 720px; margin-inline: auto; }
    .expertise-grid { grid-template-columns: repeat(2, 1fr); }
    .leadership-grid { grid-template-columns: 1fr; max-width: 720px; margin-inline: auto; }
    .story-grid { grid-template-columns: 1fr; }

    /* Process */
    .process-steps { grid-template-columns: repeat(2, 1fr); }

    /* Contact */
    .contact-grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   Tablet Portrait  ≤ 768px
   ========================================================================== */
@media (max-width: 768px) {
    :root {
        --container-pad: 1.25rem;
        --section-pad-y: 4rem;
    }

    /* Hero */
    .hero { min-height: 86vh; }
    .hero-container { padding-top: calc(var(--header-h) + 1rem); }
    .hero-cta-group .btn { flex: 1 0 auto; }
    .hero-scroll-indicator { display: none; }

    /* Page hero */
    .page-hero { min-height: 50vh; padding-top: calc(var(--header-h) + 3rem); padding-bottom: 3rem; }

    /* Services */
    .services-grid { grid-template-columns: 1fr; }
    .service-detail-list { grid-template-columns: 1fr; }

    /* Industries */
    .industries-grid { grid-template-columns: 1fr; }
    .industry-detail-list { grid-template-columns: 1fr; }

    /* Coaching */
    .coaching-grid { grid-template-columns: 1fr; }
    .programmes-grid { grid-template-columns: 1fr; }

    /* Projects */
    .projects-gallery { grid-template-columns: 1fr; }
    .project-card-featured { grid-column: span 1; }

    /* Tower */
    .tower-block-list { grid-template-columns: 1fr; }
    .tower-block-header { gap: var(--space-3); }
    .tower-block-number { font-size: 1.2rem; min-width: 36px; }

    /* About-related */
    .values-grid { grid-template-columns: 1fr; }
    .expertise-grid { grid-template-columns: 1fr; }

    /* Stats */
    .stats-grid { grid-template-columns: repeat(2, 1fr); }

    /* Why */
    .why-grid { grid-template-columns: 1fr; }
    .engagement-grid { grid-template-columns: 1fr; }

    /* Process */
    .process-steps { grid-template-columns: 1fr; }

    /* Form */
    .form-row { grid-template-columns: 1fr; }

    /* Footer */
    .footer-top { grid-template-columns: 1fr; }
    .footer-col-contact { border-top: 0; padding-top: 0; }
    .footer-bottom-row { flex-direction: column; align-items: flex-start; }
    .footer-legal { flex-wrap: wrap; }

    /* Timeline */
    .timeline-item { grid-template-columns: 1fr; gap: var(--space-2); }

    /* Mobile menu typography */
    .mobile-nav-link { font-size: 1.5rem; }
}


/* ==========================================================================
   Large phone ≤ 600px
   ========================================================================== */
@media (max-width: 600px) {
    .btn { padding: 0.85rem 1.35rem; font-size: 0.78rem; }
    .btn-large { padding: 1rem 1.6rem; font-size: 0.82rem; }

    .hero-heading { font-size: clamp(2rem, 9vw, 3rem); }
    .stat-number { font-size: 2rem; }
    .stat-label { font-size: 0.7rem; }

    .cta-card { padding: var(--space-6) var(--space-5); }

    /* Stats single column */
    .stats-grid { grid-template-columns: 1fr 1fr; }
}


/* ==========================================================================
   Small phone ≤ 480px
   ========================================================================== */
@media (max-width: 480px) {
    :root { --container-pad: 1rem; }
    .header-container { gap: var(--space-3); }
    .logo-image { height: 32px; }

    .testimonial-card { padding: var(--space-5); }
    .testimonial-quote p { font-size: 1rem; }

    .contact-info-item { grid-template-columns: 44px 1fr; gap: 0.75rem; }
}


/* ==========================================================================
   Extra Small ≤ 360px
   ========================================================================== */
@media (max-width: 360px) {
    .hero-cta-group { flex-direction: column; }
    .hero-cta-group .btn { width: 100%; justify-content: center; }
}


/* ==========================================================================
   Print
   ========================================================================== */
@media print {
    .site-header,
    .mobile-menu,
    .hero-scroll-indicator,
    .scroll-progress,
    .cta-section,
    .brands-carousel { display: none !important; }

    body { background: #fff; color: #000; }
    .section { padding-block: 1rem; }
}


/* ==========================================================================
   Reduced motion
   ========================================================================== */
@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;
    }
    .brands-track { animation: none !important; }
}