/* =====================================================================
   JMNR & ASSOCIATES — MASTER RESPONSIVE FIX
   Load this file AFTER custom.css (see instructions given in chat).
   Breakpoints used everywhere (consistent, no more mismatched values):
   1440 → 1200 → 1024 → 900 → 768 → 600 → 480 → 380
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. GLOBAL SAFETY NET (applies to every page, every device)
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

img, video, iframe, svg, canvas, picture {
    max-width: 100%;
    height: auto;
}

table { max-width: 100%; }

/* Long emails / addresses / names should wrap instead of pushing layout */
.jmnr-info-text a,
.jmnr-brand-text,
.jmnr-office-address,
.jmnr-also-locations,
.jmnr-card-desc,
.jmnr-value-desc {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* One single source of truth for the containers — ends the 4-way
   .jmnr-container width conflict (1240px vs 1200px vs 1200px vs 1200px
   found across the services/about/industries/contact blocks). */
.container,
.jmnr-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    padding-left: 60px ;
    padding-right: 60px;
}

.jmnr-header-container,
.jmnr-footer-container {
    width: 100% !important;
    max-width: 1280px !important;
    box-sizing: border-box !important;
}

/* ---------------------------------------------------------------------
   1. FLUID TYPOGRAPHY (removes the abrupt jump between breakpoints —
      headings now scale smoothly on every screen width, not just at
      the fixed 992/768/600 stops)
   --------------------------------------------------------------------- */
.hero-title            { font-size: clamp(1.9rem, 1rem + 4.2vw, 3.2rem) !important; }
.section-title          { font-size: clamp(1.6rem, 1rem + 2.6vw, 2.8rem) !important; }
.jmnr-page-title        { font-size: clamp(1.8rem, 1rem + 3.4vw, 3rem)   !important; }
.jmnr-section-title      { font-size: clamp(1.5rem, 1rem + 2.2vw, 2.3rem) !important; }
.jmnr-intro-heading      { font-size: clamp(1.8rem, 1rem + 3vw, 2.6rem)   !important; }
.jmnr-cta-heading        { font-size: clamp(1.5rem, 1rem + 2vw, 2.2rem)   !important; }
.jmnr-col-title          { font-size: clamp(1.4rem, 1rem + 1.8vw, 2rem)   !important; }

/* ---------------------------------------------------------------------
   2. HEADER & NAVIGATION
      Fixes the crowded 869–1024px "tablet gap" where the full desktop
      nav + gold CTA button + logo used to fight for space before the
      hamburger appeared.
   --------------------------------------------------------------------- */
@media screen and (max-width: 1200px) {
    .jmnr-navigation ul.jmnr-nav-menu { gap: 22px !important; }
}

@media screen and (max-width: 1024px) {
    .jmnr-top-left { display: none !important; }
    .jmnr-navigation ul.jmnr-nav-menu { gap: 16px !important; }
    .jmnr-btn-consultation { padding: 8px 14px !important; font-size: 13px !important; }
}

/* Hamburger now takes over earlier (900px instead of 868px) so the nav
   never has to squeeze into a too-narrow row on real tablets. */
@media screen and (max-width: 900px) {
    .jmnr-top-bar { display: none !important; }
    .jmnr-mobile-toggle { display: block !important; }

    .jmnr-navigation {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 100% !important;
        background: #ffffff !important;
        box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
        display: none !important;
        padding: 20px 24px !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
        z-index: 99999 !important;
    }

    .jmnr-navigation.is-active { display: block !important; }

    .jmnr-navigation ul.jmnr-nav-menu {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
        width: 100% !important;
    }

    .jmnr-navigation ul.jmnr-nav-menu > li,
    .jmnr-navigation ul.jmnr-nav-menu > li > a {
        width: 100% !important;
        display: block !important;
    }

    .jmnr-navigation ul.jmnr-nav-menu > li > a::after { display: none !important; }
}

@media screen and (max-width: 480px) {
    .jmnr-logo img { height: 32px !important; }
    .jmnr-header-container,
    .jmnr-footer-container,
    .jmnr-container,
    .container { padding-left: 16px; padding-right: 16px ; }
}

@media screen and (max-width: 380px) {
    .jmnr-header-right .jmnr-btn-consultation { display: none !important; }
}

/* ---------------------------------------------------------------------
   3. HERO SLIDER (fluid image + stacking, no more abrupt 590→380→260px
      jump — the image now scales continuously with viewport width)
   --------------------------------------------------------------------- */
.hero-img img {
    height: 100% !important;
}

@media screen and (max-width: 1024px) {
    /*.hero-flex { flex-direction: column !important; gap: 35px !important; }*/
    .hero-content { padding-left: 0 !important; }
    .hero-img { width: 100% !important; }
    .hero-img img { mask-image: none !important; -webkit-mask-image: none !important; }
    .hero-controls { margin-top: 15px !important; padding-left: 0 !important; }
}

@media screen and (max-width: 600px) {
    .hero-actions { flex-direction: column !important; width: 100% !important; gap: 10px !important; }
    .hero-actions .btn { width: 100% !important; text-align: center !important; }
}

/* ---------------------------------------------------------------------
   4. MARQUEE / TICKER BAR
   --------------------------------------------------------------------- */
@media screen and (max-width: 600px) {
    .marquee-content { gap: 20px !important; padding-right: 20px !important; }
    .marquee-content span { font-size: 12px !important; }
}
@media screen and (max-width: 380px) {
    .marquee-content { gap: 14px !important; padding-right: 14px !important; }
    .marquee-content span { font-size: 11px !important; }
}

/* ---------------------------------------------------------------------
   5. HOME PAGE — stats / services / why-choose-us / testimonials / CTA
      One consistent set of grid breakpoints replaces the old
      992px-in-one-place / 768px-in-another duplication.
   --------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
    .grid-4 {  gap: 20px !important; }
    .flex-split { flex-direction: column !important; gap: 35px !important; }
}

@media screen and (max-width: 768px) {
    .grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
    .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .section-header { flex-direction: column !important; align-items: flex-start !important; gap: 15px !important; }
}

@media screen and (max-width: 600px) {
    .grid-4, .grid-3 { grid-template-columns: 1fr !important; gap: 16px !important; }
    .bullet-list { flex-direction: column !important; gap: 10px !important; }
    .cta-section { padding: 60px 0 !important; }
}

/* ---------------------------------------------------------------------
   6. FOOTER
   --------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
    .jmnr-footer-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 30px !important; }
}
@media screen and (max-width: 600px) {
    .jmnr-footer-grid { grid-template-columns: 1fr !important; }
    .jmnr-bottom-flex { flex-direction: column !important; gap: 8px !important; text-align: center !important; }
    .jmnr-brand-text { max-width: 100% !important; }
}

/* ---------------------------------------------------------------------
   7. SERVICES PAGE (8 practice-area cards + methodology table)
   --------------------------------------------------------------------- */
@media screen and (max-width: 900px) {
    .jmnr-services-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
}

@media screen and (max-width: 600px) {
    .jmnr-practice-section,
    .jmnr-methodology-section { padding: 50px 0 !important; }
    .jmnr-card-header { gap: 12px !important; }
    .jmnr-card-icon { width: 40px !important; height: 40px !important; }
    .jmnr-card-title { font-size: 14px !important; }
}

/* Comparison table: always scrolls horizontally instead of squashing
   or breaking out of the page on small screens. */
.jmnr-table-wrapper {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}
@media screen and (max-width: 700px) {
    .jmnr-approach-table { min-width: 560px !important; }
    .jmnr-approach-table th,
    .jmnr-approach-table td { padding: 14px 14px !important; font-size: 12px !important; }
}

/* ---------------------------------------------------------------------
   8. ABOUT PAGE (intro block, values grid, partners grid + bio drawer)
   --------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
    .jmnr-intro-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
    .jmnr-intro-image-wrap { max-width: 550px !important; margin: 0 auto !important; }
    .jmnr-values-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .jmnr-partners-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media screen and (max-width: 640px) {
    .jmnr-values-grid,
    .jmnr-partners-grid { grid-template-columns: 1fr !important; }
    .jmnr-badge-bottom-left { padding: 12px 18px !important; left: 0 !important; bottom: 0 !important; }
}

/* IMPORTANT FIX: the bio drawer used a fixed max-height:500px, which can
   clip longer bios once the card narrows on mobile and the text wraps
   onto more lines. Give it generous headroom on small screens instead. */
@media screen and (max-width: 640px) {
    .jmnr-partner-card.is-active .jmnr-partner-bio-drawer {
        max-height: 1200px !important;
    }
}

/* ---------------------------------------------------------------------
   9. INDUSTRIES PAGE (8-sector grid + pill tags)
   --------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
    .jmnr-ind-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
    .jmnr-ind-card { height: 200px !important; }
}

@media screen and (max-width: 600px) {
    .jmnr-ind-grid { grid-template-columns: 1fr !important; }
    .jmnr-ind-card { height: 200px !important; } /* was 180px — kept image from feeling cramped */
    .jmnr-pills-grid { gap: 8px !important; }
    .jmnr-pill { font-size: 11px !important; padding: 6px 14px !important; }
}

/* ---------------------------------------------------------------------
   10. CONTACT PAGE (quick-info cards, form + office split, form grid)
   --------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
    .jmnr-contact-split-grid { grid-template-columns: 1fr !important; gap: 50px !important; }
}

@media screen and (max-width: 768px) {
    .jmnr-quick-info-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
    .jmnr-form-row { grid-template-columns: 1fr !important; gap: 0 !important; }
}

@media screen and (max-width: 480px) {
    .jmnr-info-card { padding: 18px 16px !important; }
    .jmnr-submit-btn { width: 100% !important; justify-content: center !important; }
}

/* ---------------------------------------------------------------------
   11. SMALL PHONE FINE-TUNING (360–480px devices: most Android + iPhone)
   --------------------------------------------------------------------- */
@media screen and (max-width: 480px) {
    .section,
    .jmnr-practice-section,
    .jmnr-methodology-section,
    .jmnr-values-section,
    .jmnr-partners-section,
    .jmnr-ind-main-section,
    .jmnr-contact-main-section {
        padding: 40px 0px ;
    }
    .jmnr-partner-img-box { height: 210px !important; }
}

/* ---------------------------------------------------------------------
   12. ULTRA-WIDE / 4K SCREENS (2560px+)
   --------------------------------------------------------------------- */
@media screen and (min-width: 2560px) {
    .container, .jmnr-container { max-width: 1400px !important; }
    .jmnr-header-container, .jmnr-footer-container { max-width: 1800px !important; }
    body { font-size: 18px; }
}

/*--------------------------------*/
/* 1. Ensure Main Header is Positioned for Absolute Dropdown */
.jmnr-main-header {
    position: relative !important;
}

/* 2. Mobile Header Spacing Fix (320px to 600px) */
@media screen and (max-width: 600px) {
    .jmnr-header-container {
        padding: 0 12px !important;
        gap: 8px !important;
    }

    .jmnr-logo img {
        height: 32px !important;
    }

    /* Consultation Button Size Adjustment */
    .jmnr-btn-consultation {
        font-size: 10px !important;
        padding: 6px 8px !important;
        gap: 4px !important;
    }

    .jmnr-btn-consultation i {
        display: none !important; /* Hide icon inside button on small mobile to save space */
    }

    /* Mobile Toggle Icon Adjustment */
    .jmnr-mobile-toggle {
        display: block !important;
        font-size: 22px !important;
        padding: 4px !important;
        color: #142a55 !important;
        background: transparent !important;
        border: none !important;
    }

    /* Dropdown Navigation Menu Full-Width Fix */
    .jmnr-navigation {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 100% !important;
        background: #ffffff !important;
        box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
        z-index: 99999 !important;
    }
}