/* ==========================================================================
   AMATYAS ENTERPRISE ASSESSMENT INFRASTRUCTURE - MASTER RESPONSIVE STYLESHEET
   File: assets/css/responsive.css
   
   Scope:
   - Full Mobile Responsiveness (320px - 575px)
   - Full Tablet Portrait & Phablet Responsiveness (576px - 768px)
   - Full Tablet Landscape & Small Laptop Responsiveness (769px - 1024px)
   - Medium Screen Adaptations (1025px - 1199px)
   - Laptop & Desktop View (>1024px / 1200px+) remains 100% untouched as designed!
   - Covers all 30 PHP pages and every individual section
   ========================================================================== */

/* ==========================================================================
   0. UNIVERSAL RESET & OVERFLOW DEFENSE
   ========================================================================== */
html {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
    -webkit-font-smoothing: antialiased;
}

/* Hidden by default on desktop */
.mobile-submenu,
.mobile-only-cta {
    display: none;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

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

/* ==========================================================================
   1. TABLET LANDSCAPE & TABLET VIEW (max-width: 1024px)
   ========================================================================== */
@media (max-width: 1024px) {

    /* --- Constrain wrappers for tablet & mobile only --- */
    .container,
    .exp-container,
    .gin-container,
    .gri-container,
    .ind-container,
    .ia-container,
    .il-container,
    .proj-container,
    .csd-container,
    .rc-container,
    .rde-container,
    .car-container,
    .ts-container,
    .cbtp-container,
    .ct-page-container,
    .cfg-container,
    .footer-container,
    .navbar-wrapper,
    .timeline-container {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* --- Header & Navigation Bar --- */
    .site-header {
        pointer-events: auto !important;
        padding: 12px 18px !important;
    }

    .navbar {
        padding: 10px 20px !important;
        border-radius: 16px !important;
        position: relative;
    }

    .mobile-toggle {
        display: flex !important;
        z-index: 1010;
    }

    .header-action {
        display: none !important;
    }

    /* --- Mobile Navigation Drawer --- */
    .nav-links {
        position: fixed !important;
        top: 76px !important;
        left: 16px !important;
        right: 16px !important;
        max-height: calc(100vh - 96px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        background: #FFFFFF !important;
        border-radius: 20px !important;
        box-shadow: 0 20px 60px rgba(15, 23, 42, 0.2) !important;
        border: 1px solid rgba(226, 232, 240, 0.95) !important;
        padding: 24px 20px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        display: none !important;
        z-index: 1005 !important;
    }

    .nav-links.mobile-open {
        display: flex !important;
        animation: mobileMenuFadeIn 0.25s ease-out forwards;
    }

    @keyframes mobileMenuFadeIn {
        from {
            opacity: 0;
            transform: translateY(-8px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .nav-item {
        width: 100% !important;
        border-bottom: 1px solid #F1F5F9;
        padding-bottom: 6px;
    }

    .nav-item:last-child {
        border-bottom: none;
    }

    .nav-link {
        font-size: 1rem !important;
        font-weight: 600 !important;
        color: #0F172A !important;
        padding: 10px 8px !important;
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    /* --- Mobile Menu & Dropdown Accordion --- */
    #megaMenuPanel,
    .mega-menu-panel,
    .nav-dropdown-menu {
        display: none !important;
    }

    .mobile-submenu {
        display: none;
        list-style: none;
        padding: 8px 12px 10px 14px !important;
        margin: 6px 0 10px 0 !important;
        background: #F1F5F9 !important;
        border-left: 3px solid #0284c7 !important;
        border-radius: 0 12px 12px 0 !important;
        flex-direction: column !important;
        gap: 4px !important;
    }

    .has-megamenu.mobile-expanded .mobile-submenu,
    .has-dropdown.mobile-expanded .mobile-submenu {
        display: flex !important;
        animation: mobileSubmenuSlide 0.2s ease-out forwards;
    }

    .has-megamenu.mobile-expanded .chevron-icon,
    .has-dropdown.mobile-expanded .chevron-icon {
        transform: rotate(180deg) !important;
        transition: transform 0.2s ease;
    }

    .chevron-icon {
        transition: transform 0.2s ease;
    }

    .mobile-submenu li {
        width: 100% !important;
        list-style: none !important;
    }

    .mobile-submenu li a {
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #1e293b !important;
        padding: 8px 10px !important;
        border-radius: 8px !important;
        display: block !important;
        transition: all 0.15s ease;
    }

    .mobile-submenu li a:hover,
    .mobile-submenu li a:active {
        color: #0284c7 !important;
        background: #E0F2FE !important;
    }

    .mobile-submenu li a.view-all-link {
        font-weight: 700 !important;
        color: #0284c7 !important;
        margin-top: 4px !important;
        border-top: 1px solid #E2E8F0 !important;
        padding-top: 10px !important;
    }

    .mobile-only-cta {
        display: block !important;
        margin-top: 12px !important;
        border-bottom: none !important;
    }

    .btn-mobile-cta {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        background: linear-gradient(135deg, #0F4C81 0%, #0284c7 100%) !important;
        color: #FFFFFF !important;
        font-weight: 700 !important;
        font-size: 15px !important;
        padding: 13px 20px !important;
        border-radius: 12px !important;
        text-align: center !important;
        box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3) !important;
    }

    @keyframes mobileSubmenuSlide {
        from {
            opacity: 0;
            transform: translateY(-4px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* --- Universal Hero Banners --- */
    .hero-section,
    .about-hero-section,
    .exam-hero-section,
    .tab-hero-section,
    .ta-hero-section,
    .reg-hero-section,
    .ed-hero-section,
    .cbt-hero-section,
    .ppt-hero-section,
    .ibt-hero-section,
    .rp-hero-section,
    .osm-hero,
    .rp2-hero,
    .ea-hero,
    .ap-hero,
    .cbtp-hero,
    .ind-hero,
    .gri-hero,
    .gin-hero,
    .ts-hero,
    .exp-hero,
    .proj-hero,
    .csd-hero,
    .rc-hero,
    .il-hero,
    .ia-header,
    .car-hero,
    .ct-hero,
    .ct-hero-section,
    .cfg-hero-section,
    .cfg-hero-wrap {
        min-height: auto !important;
        height: auto !important;
        padding-top: 135px !important;
        padding-bottom: 60px !important;
    }

    .hero-title {
        font-size: 38px !important;
        line-height: 1.18 !important;
    }

    .section-title {
        font-size: 34px !important;
        line-height: 1.22 !important;
    }

    .section-subtitle {
        font-size: 1rem !important;
        margin-bottom: 32px !important;
    }

    .section-padding {
        padding: 70px 0 !important;
    }

    /* --- Release Fixed Height Constraints on Cards --- */
    .capability-card,
    .services-grid-row-1,
    .services-grid-row-2,
    .services-grid-row-3,
    .services-grid-row-4,
    .services-grid-row-5,
    .services-visual-row,
    .resource-card,
    .blueprint-card,
    .cbt-journey-step-card,
    .deliv-card,
    .exp-sector-featured,
    .exp-sectors-stack,
    .gin-sector-card,
    .gri-req-card,
    .grid-cell {
        height: auto !important;
        min-height: auto !important;
    }

    /* --- Media Frame & Image Heights --- */
    .car-hero-img,
    .car-testimonial-img-wrap,
    .cbtp-hero-img,
    .csd-carousel-img,
    .csd-hero-img,
    .ea-automation-img-card,
    .ea-featured-img,
    .gin-hero-img,
    .gri-hero-img,
    .ia-hero-img,
    .story-media-frame img,
    .product-media-frame {
        height: auto !important;
        max-height: 380px !important;
        width: 100% !important;
        object-fit: cover !important;
    }

    /* --- Homepage Components --- */
    .services-top-showcase,
    .services-grid-row-1,
    .services-grid-row-2,
    .services-grid-row-3,
    .services-grid-row-4,
    .services-grid-row-5,
    .pipeline-layout-grid,
    .comparison-card {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .services-grid-row-3 .capability-viz-card,
    .services-grid-row-3 .service-card.card-featured-dark {
        grid-column: span 1 !important;
    }

    /* --- Pipeline: Micro-grid with fixed pixel cols → fluid --- */
    .capabilities-micro-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: auto !important;
    }

    .micro-card {
        width: 100% !important;
        height: auto !important;
        min-height: 64px !important;
    }

    .pipeline-cap-panel {
        width: 100% !important;
    }

    .capabilities-header-row {
        width: 100% !important;
    }

    .compare-divider {
        width: 100% !important;
        height: 1px !important;
    }

    .product-showcase-row,
    .product-showcase-row.reverse {
        grid-template-columns: 1fr !important;
        direction: ltr !important;
        gap: 32px !important;
    }

    .product-info-col,
    .product-image-col {
        width: 100% !important;
        max-width: 100% !important;
    }

    .case-study-layout,
    .case-study-layout.reverse {
        grid-template-columns: 1fr !important;
        direction: ltr !important;
        gap: 28px !important;
    }

    .case-study-layout .cs-media-card,
    .case-study-layout.reverse .cs-media-card {
        min-height: 280px !important;
        height: auto !important;
    }

    .examination-starts-card {
        padding: 48px 36px !important;
    }

    .card-title-dark {
        font-size: 2.25rem !important;
    }

    .card-stats-four-row {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* --- About Us --- */
    .story-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    .pillars-grid,
    .leadership-grid,
    .scale-cards-grid,
    .capability-cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .compliance-cards-grid,
    .confidence-card {
        grid-template-columns: 1fr !important;
    }

    /* --- Examination Services --- */
    .lifecycle-cards-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 16px !important;
    }

    .blueprint-grid {
        grid-template-columns: 1fr !important;
    }

    .tactical-cards-grid,
    .tactical-nodes-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 14px !important;
    }

    .precision-pillars-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* --- Test Authoring & Banking --- */
    .tab-hero-grid,
    .tab-repo-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    .tab-cards-3col,
    .tab-blueprint-grid,
    .tab-taxonomy-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .tab-uc-card {
        overflow: hidden !important;
    }

    /* --- Test Administration --- */
    .adm-lifecycle-grid,
    .adm-pillars-grid,
    .adm-telem-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* --- Online Registration --- */
    .reg-cards-grid,
    .reg-metrics-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .reg-journey-flow,
    .reg-journey-track {
        flex-direction: column !important;
        gap: 18px !important;
        align-items: stretch !important;
        width: 100% !important;
    }

    .reg-journey-flow .reg-step-card,
    .reg-journey-track .reg-step-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    .reg-flow-arrow {
        transform: rotate(90deg) !important;
        margin: 8px auto !important;
    }

    /* --- Examination Delivery --- */
    .deliv-pillars-grid {
        grid-template-columns: 1fr !important;
    }

    /* --- CBT, PPT & IBT --- */
    .cbt-hero-grid,
    .cbt-journey-grid,
    .ppt-hero-grid,
    .ppt-split-grid,
    .ppt-stage8-grid,
    .ibt-hero-grid,
    .ibt-split-grid,
    .ibt-pm-body {
        grid-template-columns: 1fr !important;
    }

    .cbt-analytics-grid,
    .cbt-cards-grid,
    .ppt-venues-grid,
    .ppt-cards-grid-3,
    .ibt-resilience-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* --- Remote Proctoring --- */
    .rp-hero-grid,
    .rp-split-grid,
    .rp-banner-grid {
        grid-template-columns: 1fr !important;
    }

    .rp-gold-stats-grid,
    .rp-tiered-box,
    .rp-fortified-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .rp-esc-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    /* --- On-Screen Marking --- */
    .osm-split-row,
    .osm-flow-row {
        grid-template-columns: 1fr !important;
    }

    .osm-cards-grid-3,
    .osm-cards-grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* --- Result Processing & Analysis --- */
    .rp2-cards-grid-3,
    .rp2-stats-grid,
    .ea-cards-grid-3,
    .ea-cards-grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .rp2-split-row,
    .rp2-funnel-header-row,
    .ea-split-row,
    .ea-grid-split {
        grid-template-columns: 1fr !important;
    }

    .ea-hero-text {
        max-width: 100% !important;
    }

    /* --- Assessment Products & CBT Product --- */
    .ap-products-grid-2,
    .ap-products-grid-3,
    .ap-questions-row,
    .ap-proven-grid,
    .cbtp-hero-grid,
    .cbtp-life-body {
        grid-template-columns: 1fr !important;
    }

    .cbtp-overview-grid,
    .cbtp-problem-grid,
    .cbtp-tech-grid,
    .cbtp-stakeholder-grid,
    .cbtp-compliance-grid,
    .cbtp-bench-grid,
    .cbtp-resources-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .cbtp-sectors-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    /* --- Industries & Government --- */
    .ind-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .gri-hero-grid,
    .gri-infra-grid,
    .gri-ops-bento,
    .gin-hero-grid {
        grid-template-columns: 1fr !important;
    }

    .gri-req-grid,
    .gri-services-grid,
    .gri-case-grid,
    .gin-modes-grid,
    .gin-cred-top-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .gin-sectors-top-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .gin-sectors-bottom-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
        justify-content: stretch !important;
    }

    .gin-sectors-bottom-grid .gin-sector-card {
        width: 100% !important;
        flex-shrink: 1 !important;
    }

    .gin-timeline-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .gin-timeline-grid .gin-time-card,
    .gin-timeline-grid .gin-time-card:nth-child(7),
    .gin-timeline-grid .gin-time-card:nth-child(8) {
        grid-column: span 1 !important;
        width: 100% !important;
    }

    .gin-cred-bottom-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
        justify-content: stretch !important;
    }

    .gin-cred-bottom-grid .gin-cred-card {
        width: 100% !important;
        flex-shrink: 1 !important;
    }

    /* --- Technology & Security --- */
    .ts-hero-grid,
    .ts-interface-grid,
    .ts-delivery-grid,
    .ts-result-grid,
    .ts-grading-grid {
        grid-template-columns: 1fr !important;
    }

    .ts-hero-title {
        white-space: normal !important;
    }

    /* --- Experience & Case Studies --- */
    .exp-hero-grid,
    .exp-coverage-grid,
    .proj-hero,
    .proj-featured-card,
    .proj-blueprint-grid,
    .csd-two-col,
    .csd-detail-grid,
    .csd-spec-grid,
    .csd-ops-grid,
    .csd-carousel-grid {
        grid-template-columns: 1fr !important;
    }

    .exp-gold-stats-grid,
    .exp-channels-grid,
    .exp-audit-grid,
    .proj-dual-grid,
    .proj-stats-row,
    .proj-related-grid,
    .csd-stats-grid,
    .csd-caps-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* --- Resources & Insights --- */
    .rc-col-2,
    .rc-col-3,
    .rde-layout,
    .rde-related-grid,
    .il-featured-card,
    .ia-body-layout {
        grid-template-columns: 1fr !important;
    }

    .il-cards-grid,
    .ia-service-grid,
    .ia-products-grid,
    .ia-more-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* --- Careers, Contact & Configurator --- */
    .car-hero-grid,
    .car-org-grid,
    .car-roles-layout,
    .car-testimonial-card,
    .ct-fields-grid,
    .ct-doc-boxes-grid,
    .cfg-2-col-split {
        grid-template-columns: 1fr !important;
    }

    .car-squads-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .ct-hero-stats {
        gap: 30px !important;
    }

    .cfg-block-head {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    /* --- Homepage: Fixed-width Use-Case cards & Tab Use-cases grid --- */
    .tab-usecases-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        max-width: 100% !important;
    }

    .tab-uc-card {
        width: 100% !important;
        height: auto !important;
    }

    /* --- Homepage: Capabilities strip (3-col) → 2-col on tablet --- */
    .capabilities-strip {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* --- CBT Infra grid --- */
    .cbt-infra-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* --- EA stats grids --- */
    .ea-profile-stats-grid,
    .ea-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* --- CBT Scenarios grid --- */
    .cbtp-scenarios-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* --- GRI track grid --- */
    .gri-track-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* --- Tab selection grid --- */
    .tab-selection-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* --- Tech Transformation Row (FROM → TO section) --- */
    .tech-transformation-row {
        flex-direction: column !important;
        gap: 28px !important;
        align-items: flex-start !important;
    }

    .tech-transform-col {
        width: 100% !important;
        max-width: 100% !important;
    }

    .tech-transform-divider {
        display: none !important;
    }

    .from-col,
    .to-col {
        width: 100% !important;
        max-width: 100% !important;
    }

    .from-col .transform-desc,
    .to-col .transform-desc {
        max-width: 100% !important;
    }

    .from-title {
        width: 100% !important;
        font-size: 32px !important;
    }

    .to-title {
        font-size: 32px !important;
    }

    .transform-title {
        font-size: 32px !important;
    }

    .btn-tech-explore {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* --- Viz Services List (3-col grid in Capability Viz card) --- */
    .viz-services-list {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px 14px !important;
    }

    /* --- Services Visual Row (Capability Viz + Explore panel) --- */
    .services-visual-row {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* --- Services Composition wrapper --- */
    .services-composition {
        gap: 20px !important;
    }

    /* --- Explore All Examination Services Panel & Full Pill Button --- */
    .services-explore-panel {
        padding: 30px 24px !important;
        border-radius: 20px !important;
    }

    .btn-cyan-full-pill {
        width: 100% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 8px !important;
        padding: 14px 18px !important;
        font-size: 12px !important;
        letter-spacing: 0.03em !important;
        box-sizing: border-box !important;
    }

    .btn-cyan-full-pill span {
        text-align: center !important;
        display: inline-block !important;
    }

    .btn-cyan-full-pill svg {
        flex-shrink: 0 !important;
    }

    /* --- Computer-Based Testing (CBT) Layouts --- */
    .cbt-journey-banner {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        padding: 32px 24px !important;
    }

    .cbt-journey-cards-grid {
        grid-template-columns: 1fr !important;
        padding: 24px 20px !important;
        gap: 20px !important;
    }

    .cbt-journey-cards-grid>* {
        grid-column: span 1 !important;
        width: 100% !important;
    }

    .cbt-rules-grid,
    .cbt-transition-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .cbt-split-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    /* --- Technology & Security Layouts --- */
    .ts-life-steps-row,
    .ts-integrations-grid,
    .ts-layer-row-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .ts-security-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .ts-psycho-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    .ts-hero-media,
    .ts-hero-media-wrap {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* --- Experience & Projects --- */
    .exp-sectors-top-grid {
        grid-template-columns: 1fr !important;
        height: auto !important;
        gap: 20px !important;
    }

    .exp-sector-featured {
        height: auto !important;
        min-height: auto !important;
    }

    .exp-sectors-stack {
        height: auto !important;
        gap: 20px !important;
    }

    .exp-sectors-stack .exp-sector-card {
        height: auto !important;
    }

    .exp-sectors-bottom-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .proj-interfaces-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .proj-hero,
    .proj-cta-section,
    .csd-cta-section {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* --- Test Authoring & Banking --- */
    .tab-isolation-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .tab-usecases-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .tab-uc-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* --- Remote Proctoring --- */
    .rp-tab-content-wrap {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    /* --- Internet-Based Testing --- */
    .ibt-matrix-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .ibt-hero-img-wrap,
    .ibt-hero-img {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* --- On-Screen Marking --- */
    .osm-flow-vertical-wrap {
        display: none !important;
    }
}

/* ==========================================================================
   3. TABLET PORTRAIT & PHABLETS (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {

    /* --- Base Layout & Spacing --- */
    .container,
    .exp-container,
    .gin-container,
    .gri-container,
    .ind-container,
    .ia-container,
    .il-container,
    .proj-container,
    .csd-container,
    .rc-container,
    .rde-container,
    .car-container,
    .ts-container,
    .cbtp-container,
    .ct-page-container,
    .cfg-container,
    .footer-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .section-padding {
        padding: 56px 0 !important;
    }

    /* --- Hero Headers Padding & Titles --- */
    .hero-section,
    .about-hero-section,
    .exam-hero-section,
    .tab-hero-section,
    .ta-hero-section,
    .reg-hero-section,
    .ed-hero-section,
    .cbt-hero-section,
    .ppt-hero-section,
    .ibt-hero-section,
    .rp-hero-section,
    .osm-hero,
    .rp2-hero,
    .ea-hero,
    .ap-hero,
    .cbtp-hero,
    .ind-hero,
    .gri-hero,
    .gin-hero,
    .ts-hero,
    .exp-hero,
    .proj-hero,
    .csd-hero,
    .rc-hero,
    .il-hero,
    .ia-header,
    .car-hero,
    .ct-hero,
    .ct-hero-section,
    .cfg-hero-section,
    .cfg-hero-wrap {
        padding-top: 135px !important;
        padding-bottom: 50px !important;
    }

    /* Universal Title Clamping & Word-Wrap Defense across ALL Pages */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .hero-title,
    .section-title,
    .ct-hero-heading,
    .cfg-hero-title,
    .gin-sec-title,
    .gin-time-title,
    .gin-cred-title,
    .exp-latest-h3,
    .ts-res-title,
    .ibt-pm-title,
    .from-title,
    .to-title,
    .transform-title {
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    .hero-title,
    .about-hero-title,
    .ct-hero-heading,
    .cfg-hero-title,
    .tab-hero-title,
    .reg-hero-title,
    .deliv-hero-title,
    .cbt-hero-title,
    .ppt-hero-title,
    .ibt-hero-title,
    .rp-hero-title,
    .osm-hero-title,
    .rp2-hero-title,
    .ea-hero-title,
    .ap-hero-title,
    .cbtp-hero-title,
    .ind-hero-title,
    .gri-hero-title,
    .gin-hero-title,
    .ts-hero-title,
    .exp-hero-title,
    .proj-hero-title,
    .csd-hero-title,
    .rc-hero-title,
    .il-hero-title,
    .ia-header-title,
    .car-hero-title {
        font-size: clamp(1.65rem, 5.5vw, 2.15rem) !important;
        line-height: 1.2 !important;
        letter-spacing: -0.02em !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    .section-title,
    .about-section-title,
    .service-section-title,
    .exp-section-title,
    .gin-section-title,
    .gri-section-title,
    .ind-section-title,
    .ts-section-title,
    .deliv-section-title,
    .tab-section-title,
    .adm-section-title,
    .cbt-section-title,
    .ppt-section-title,
    .ibt-section-title,
    .rp-section-title,
    .osm-section-title,
    .rp2-section-title,
    .ea-section-title,
    .ap-section-title,
    .cbtp-section-title,
    .car-section-title,
    .proj-section-title,
    .rp2-heading,
    .ea-heading {
        font-size: clamp(1.35rem, 4.5vw, 1.75rem) !important;
        line-height: 1.25 !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    /* --- Action Button Wrappers on Mobile --- */
    .hero-actions,
    .tab-hero-actions,
    .deliv-hero-actions,
    .cbt-hero-actions,
    .ppt-hero-actions,
    .ibt-hero-actions,
    .ts-hero-actions,
    .gin-hero-actions,
    .gri-hero-actions,
    .cbtp-hero-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 12px !important;
    }

    .hero-section .btn,
    .hero-actions .btn,
    .btn-primary-gradient,
    .btn-outline-dark,
    .btn-outline-light,
    .btn-tab-hero-cta,
    .btn-tab-navy,
    .btn-reg-hero-cta,
    .btn-reg-navy,
    .cbtp-btn,
    .gin-btn,
    .ts-btn,
    .gri-btn,
    .btn-header-cta {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* --- Hide / Neutralize Overflowing Decorative Ellipses & Ambient Spheres --- */
    .deliv-hero-ellipse,
    .rp-cta-ellipse-1,
    .osm-cta-ellipse,
    .rp2-ellipse1-cta,
    .rp2-ellipse2-cta,
    .tech-ambient-sphere-left,
    .tech-ambient-sphere-right,
    .transform-ellipse-left,
    .transform-ellipse-right,
    .suite-center-ellipse,
    .car-ellipse-left,
    .car-ellipse-right,
    .cfg-bg-ellipse-left,
    .cfg-bg-ellipse-right,
    .cfg-bg-ellipse {
        display: none !important;
    }

    /* Fix potential negative margin blowouts */
    .gri-hero-content {
        margin-left: 0 !important;
    }

    .gri-hero-actions {
        flex-wrap: wrap !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .gri-hero-actions .gri-btn,
    .gri-hero-actions a {
        white-space: normal !important;
        width: 100% !important;
    }

    /* --- Collapse All 2-Column Grids to Single Column on Mobile --- */
    .stats-grid-wrapper,
    .stats-bottom-row,
    .capabilities-strip,
    .security-phases-grid,
    .industries-grid,
    .cs-four-grid,
    .credentials-stats-grid,
    .certifications-cards-grid,
    .planning-steps-grid,
    .card-stats-four-row,
    .milestones-grid,
    .pillars-grid,
    .leadership-grid,
    .scale-cards-grid,
    .capability-cards-grid,
    .lifecycle-cards-grid,
    .tactical-cards-grid,
    .tactical-nodes-grid,
    .precision-pillars-grid,
    .tab-cards-3col,
    .tab-blueprint-grid,
    .tab-taxonomy-grid,
    .adm-lifecycle-grid,
    .adm-pillars-grid,
    .adm-telem-grid,
    .reg-cards-grid,
    .reg-metrics-grid,
    .deliv-metrics-row,
    .deliv-hero-grid,
    .deliv-getstarted-grid,
    .cbt-analytics-grid,
    .cbt-cards-grid,
    .ppt-venues-grid,
    .ppt-cards-grid-3,
    .ibt-player-features-grid,
    .ibt-resilience-grid,
    .rp-gold-stats-grid,
    .rp-tiered-box,
    .rp-fortified-grid,
    .osm-cards-grid-3,
    .osm-cards-grid-4,
    .osm-cards-grid-2,
    .rp2-cards-grid-3,
    .rp2-stats-grid,
    .ea-cards-grid-3,
    .ea-cards-grid-4,
    .cbtp-overview-grid,
    .cbtp-problem-grid,
    .cbtp-tech-grid,
    .cbtp-stakeholder-grid,
    .cbtp-compliance-grid,
    .cbtp-bench-grid,
    .cbtp-resources-grid,
    .ind-grid,
    .gri-req-grid,
    .gri-services-grid,
    .gri-case-grid,
    .gin-sectors-top-grid,
    .gin-modes-grid,
    .gin-timeline-grid,
    .gin-cred-top-grid,
    .gin-cred-bottom-grid,
    .exp-metrics-grid,
    .exp-gold-stats-grid,
    .exp-channels-grid,
    .exp-audit-grid,
    .proj-dual-grid,
    .proj-stats-row,
    .proj-related-grid,
    .csd-stats-grid,
    .csd-caps-grid,
    .il-cards-grid,
    .ia-service-grid,
    .ia-products-grid,
    .ia-more-grid,
    .car-squads-grid,
    .ct-delivery-grid,
    .cfg-tiles-grid,
    .cfg-step-options-rect {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* --- Timeline Flow Adaptation --- */
    .timeline-spine {
        left: 20px !important;
    }

    .stage-node-badge {
        position: static !important;
        transform: none !important;
        margin-bottom: 12px !important;
    }

    .stage-node-badge::after {
        display: none !important;
    }

    .stage-card-dark {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 20px !important;
    }

    /* --- Responsive Data Tables (Horizontal Scroll) --- */
    .ap-table-wrapper,
    .ind-table-wrapper,
    .table-responsive {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 12px !important;
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }

    .ap-compare-table,
    .ind-table {
        min-width: 640px !important;
    }

    /* --- Examination Starts Card (Homepage Pre-Footer) --- */
    .examination-starts-card {
        padding: 40px 24px !important;
        border-radius: 20px !important;
    }

    .card-title-dark {
        font-size: 1.85rem !important;
        line-height: 1.25 !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }

    .card-desc-dark {
        font-size: 0.92rem !important;
        line-height: 1.6 !important;
        margin: 0 auto 28px !important;
    }

    .card-buttons-row {
        flex-direction: column !important;
        width: 100% !important;
        gap: 12px !important;
    }

    .card-buttons-row .btn {
        width: 100% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 13px 18px !important;
        font-size: 11.5px !important;
        letter-spacing: 0.04em !important;
        box-sizing: border-box !important;
    }

    .card-buttons-row .btn span {
        text-align: center !important;
        display: inline-block !important;
    }

    .card-buttons-row .btn svg {
        flex-shrink: 0 !important;
    }

    /* --- Footer --- */
    .footer-columns-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px 16px !important;
        padding-bottom: 36px !important;
    }

    .footer-bottom-bar {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 14px !important;
    }

    /* --- Form Controls & Stepper --- */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="password"],
    select,
    textarea {
        width: 100% !important;
        font-size: 16px !important;
        /* Prevents auto-zoom on iOS */
    }

    .cfg-stepper-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 12px !important;
    }

    /* --- Contact Page Hero Stats --- */
    .ct-hero-stats {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
        width: 100% !important;
    }

    /* ========== ADDITIONAL MOBILE GRID FIXES (768px) ========== */

    /* --- Viz Services List → single column on phones --- */
    .viz-services-list {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px 12px !important;
    }

    /* --- Viz List Item → wrap text properly --- */
    .viz-list-item {
        font-size: 13px !important;
        gap: 8px !important;
        line-height: 1.35 !important;
    }

    /* --- Viz Stats Bar → stack vertically --- */
    .viz-stats-bar {
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* --- Tech Transformation: Full width, stacked --- */
    .tech-transformation-row {
        flex-direction: column !important;
        gap: 24px !important;
        align-items: flex-start !important;
        padding: 12px 0 !important;
    }

    .tech-transform-col,
    .from-col,
    .to-col {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }

    .from-col .transform-desc,
    .to-col .transform-desc {
        max-width: 100% !important;
    }

    .from-title,
    .to-title {
        font-size: 28px !important;
        width: 100% !important;
    }

    .transform-title {
        font-size: 28px !important;
    }

    .tech-transform-divider {
        display: none !important;
    }

    .btn-tech-explore {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 52px !important;
        padding: 14px 18px !important;
        font-size: 11.5px !important;
        letter-spacing: 0.03em !important;
        gap: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .btn-tech-explore span {
        text-align: center !important;
        display: inline-block !important;
    }

    .btn-tech-explore svg {
        flex-shrink: 0 !important;
        width: 18px !important;
        height: 18px !important;
    }

    /* --- Stage Cards in Lifecycle Section → stack image below text --- */
    .lifecycle-stage-row {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .stage-card-dark {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 20px !important;
        gap: 16px !important;
    }

    .stage-card-info {
        width: 100% !important;
        max-width: 100% !important;
    }

    .stage-image-preview {
        width: 100% !important;
        height: 200px !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    .stage-image-preview img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* --- Tab Use-Case Cards → single column --- */
    .tab-usecases-grid {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .tab-uc-card {
        width: 100% !important;
        height: auto !important;
        min-height: 260px !important;
    }

    /* --- Tab Selection Grid → single column --- */
    .tab-selection-grid {
        grid-template-columns: 1fr !important;
    }

    /* --- CBT Infra Grid --- */
    .cbt-infra-grid {
        grid-template-columns: 1fr !important;
    }

    /* --- EA Additional Grids --- */
    .ea-profile-stats-grid,
    .ea-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* --- CBT Scenarios Grid --- */
    .cbtp-scenarios-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* --- GRI Track Grid --- */
    .gri-track-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* --- Services Composition Rows → stack single column --- */
    .services-grid-row-1,
    .services-grid-row-2,
    .services-grid-row-3,
    .services-grid-row-4,
    .services-grid-row-5,
    .services-visual-row {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }

    /* --- Capabilities Strip → single column on phones --- */
    .capabilities-strip {
        grid-template-columns: 1fr !important;
    }

    .capability-card {
        min-height: 240px !important;
        padding: 32px 24px 28px !important;
    }

    /* ==========================================================================
       COMPREHENSIVE MULTI-PAGE MOBILE GRID & LAYOUT REFINEMENTS
       ========================================================================== */
    .cbt-rules-grid,
    .cbt-transition-grid,
    .cbt-success-grid,
    .cbt-jsc-pills-row,
    .cbt-jsc-dark-stats,
    .cbt-journey-metrics-row,
    .cbt-jsc-dark {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .ts-life-steps-row,
    .ts-integrations-grid,
    .ts-security-grid,
    .ts-layer-row-3,
    .ts-layer-row-2 {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Card and Component Sub-Headings */
    .gin-sec-title,
    .gin-time-title,
    .gin-cred-title,
    .exp-latest-h3,
    .exp-sector-title,
    .exp-origin-h3,
    .ts-res-title,
    .ibt-pm-title,
    .rp2-card-title,
    .ea-col-title,
    .ea-calib-heading {
        font-size: clamp(1.05rem, 3.8vw, 1.3rem) !important;
        line-height: 1.3 !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    /* 1. Government Institutions (.gin-) */
    .gin-sectors-top-grid,
    .gin-sectors-bottom-grid,
    .gin-modes-grid,
    .gin-timeline-grid,
    .gin-cred-top-grid,
    .gin-cred-bottom-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        width: 100% !important;
    }

    .gin-sectors-bottom-grid .gin-sector-card,
    .gin-cred-bottom-grid .gin-cred-card {
        width: 100% !important;
        max-width: 100% !important;
        flex-shrink: 1 !important;
    }

    .gin-timeline-grid .gin-time-card,
    .gin-timeline-grid .gin-time-card:nth-child(7),
    .gin-timeline-grid .gin-time-card:nth-child(8) {
        grid-column: span 1 !important;
        width: 100% !important;
    }

    .gin-sector-card,
    .gin-time-card,
    .gin-cred-card {
        padding: 22px 18px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. Technology & Security (.ts-) */
    .ts-container {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .ts-hero-media-wrap {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 240px !important;
    }

    .ts-result-grid,
    .ts-result-left,
    .ts-result-right {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        gap: 20px !important;
    }

    .ts-res-box {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 22px 16px !important;
        overflow: hidden !important;
    }

    .ts-res-box-header {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 10px !important;
        margin-bottom: 14px !important;
    }

    .ts-res-status-tag {
        white-space: normal !important;
        max-width: 100% !important;
        font-size: 10.5px !important;
    }

    .ts-hash-pill {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        gap: 8px !important;
        padding: 8px 10px !important;
    }

    .ts-hash-val {
        white-space: normal !important;
        word-break: break-all !important;
        overflow-wrap: anywhere !important;
        min-width: 0 !important;
        flex: 1 1 100% !important;
        display: block !important;
        font-size: 11px !important;
    }

    .ts-res-metrics {
        flex-wrap: wrap !important;
        gap: 16px 24px !important;
    }

    .ts-sim-window {
        padding: 18px 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .ts-terminal-box {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .ts-term-logs {
        white-space: pre-wrap !important;
        word-break: break-all !important;
        overflow-x: auto !important;
        max-width: 100% !important;
        font-size: 11px !important;
    }

    /* 3. Result Processing (.rp2-) */
    .rp2-split-row {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        gap: 28px !important;
    }

    .rp2-split-media,
    .rp2-split-info {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .rp2-anomaly-card {
        padding: 20px 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .rp2-chart-container {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        gap: 6px !important;
        padding-bottom: 24px !important;
        height: 170px !important;
    }

    .rp2-anom-bar-group {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }

    .rp2-anom-bar {
        width: 100% !important;
        max-width: 44px !important;
    }

    .rp2-anom-alert {
        white-space: normal !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 8px !important;
        padding: 10px 12px !important;
    }

    .rp2-alert-msg {
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        line-height: 1.4 !important;
    }

    .rp2-anom-header {
        margin-bottom: 20px !important;
    }

    .rp2-anom-legend-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .rp2-anom-bar-group span {
        font-size: 11px !important;
    }

    /* 4. Examination Analysis (.ea-) */
    .ea-dark-grid-card {
        padding: 24px 16px !important;
        margin-top: 30px !important;
        border-radius: 18px !important;
    }

    .ea-grid-split {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    .ea-leaderboard-col {
        padding: 20px 16px !important;
    }

    .ea-calib-stats {
        flex-wrap: wrap !important;
        gap: 20px !important;
    }

    .ea-cstat-num {
        font-size: 1.85rem !important;
    }

    .ea-evaluations-section {
        padding: 60px 0 !important;
    }

    .ea-stats-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .ea-stat-box {
        padding: 24px 18px !important;
    }

    .ea-stat-number {
        font-size: 2.2rem !important;
    }

    /* 5. Internet-Based Test Player (.ibt-) */
    .ibt-pm-topbar {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .ibt-pm-editor {
        padding: 16px 14px !important;
        max-width: 100% !important;
        overflow-x: auto !important;
    }

    .ibt-editor-code pre,
    .ibt-editor-code {
        max-width: 100% !important;
        overflow-x: auto !important;
    }

    .ibt-pm-specs {
        gap: 10px !important;
    }

    .ibt-spec-val {
        word-break: break-all !important;
    }

    /* 6. Experience Page (.exp-) */
    .exp-card-header-flex {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .exp-origin-titles {
        width: 100% !important;
        flex: 1 1 100% !important;
        order: 3 !important;
    }

    .exp-latest-circle,
    .exp-origin-circle {
        order: 1 !important;
    }

    .exp-scale-tag,
    .exp-pill-tag {
        order: 2 !important;
        margin-left: auto !important;
    }

    .exp-sectors-top-grid {
        grid-template-columns: 1fr !important;
        height: auto !important;
        gap: 16px !important;
    }

    .exp-sector-featured {
        height: auto !important;
        min-height: auto !important;
        padding: 24px 18px !important;
    }

    .exp-sectors-stack {
        height: auto !important;
        gap: 16px !important;
    }

    .exp-sectors-stack .exp-sector-card {
        height: auto !important;
        padding: 18px 16px !important;
    }

    .exp-sectors-bottom-grid,
    .exp-projects-grid,
    .exp-sectors-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .exp-sector-card {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        grid-template-rows: auto auto auto !important;
        column-gap: 12px !important;
        row-gap: 8px !important;
        height: auto !important;
        min-height: auto !important;
        padding: 20px 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .exp-sector-card .exp-sector-icon {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 32px !important;
        height: 32px !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    .exp-sector-card .exp-sector-title {
        grid-column: 2 !important;
        grid-row: 1 !important;
        margin: 0 !important;
        align-self: center !important;
        font-size: 16px !important;
        line-height: 1.25 !important;
        width: 100% !important;
    }

    .exp-sector-card .exp-sector-desc {
        grid-column: 1 / 3 !important;
        grid-row: 2 !important;
        width: 100% !important;
        margin: 0 !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .exp-sector-card .exp-sector-idx {
        grid-column: 1 / 3 !important;
        grid-row: 3 !important;
        margin-top: 6px !important;
        align-self: end !important;
        line-height: 1 !important;
    }

    /* 7. Online Registration (.reg-) */
    .reg-card {
        padding: 20px 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .reg-card-header {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        gap: 10px !important;
        align-items: center !important;
        margin-bottom: 14px !important;
    }

    .reg-card-left {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        align-items: center !important;
        min-width: 0 !important;
    }

    .reg-card-label {
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    .reg-card-tag {
        white-space: normal !important;
        word-break: normal !important;
        max-width: 100% !important;
    }

    /* 8. Resource Centre Hero Section (.rc-) */
    .rc-hero {
        display: block !important;
        min-height: auto !important;
        height: auto !important;
        padding-top: 140px !important;
        padding-bottom: 45px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .rc-hero .rc-container,
    .rc-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    .rc-hero-center {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 20px !important;
        padding: 0 !important;
        text-align: center !important;
    }

    .rc-hero-tag-row {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        margin-bottom: 10px !important;
    }

    .rc-hero-tag {
        font-size: 11px !important;
        letter-spacing: 0.08em !important;
        white-space: normal !important;
        display: inline-block !important;
    }

    .rc-hero-title {
        font-size: clamp(1.75rem, 6.5vw, 2.3rem) !important;
        line-height: 1.18 !important;
        margin: 0 0 12px !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        text-align: center !important;
    }

    .rc-hero-desc {
        font-size: 14.5px !important;
        line-height: 1.55 !important;
        margin: 0 auto !important;
        max-width: 100% !important;
        text-align: center !important;
        padding: 0 4px !important;
    }

    .rc-search-wrap {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 20px !important;
    }

    .rc-search-box {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 5px !important;
        gap: 6px !important;
        border-radius: 12px !important;
    }

    .rc-search-icon {
        margin-left: 10px !important;
        flex-shrink: 0 !important;
    }

    .rc-search-input {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        font-size: 13px !important;
        padding: 8px 10px !important;
    }

    .rc-search-btn {
        padding: 9px 18px !important;
        font-size: 13px !important;
        flex-shrink: 0 !important;
        border-radius: 9px !important;
    }

    .rc-tabs-outer {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        display: flex !important;
        justify-content: flex-start !important;
        padding: 4px 0 10px !important;
        margin-top: 10px !important;
        box-sizing: border-box !important;
    }

    .rc-tabs-outer::-webkit-scrollbar {
        display: none !important;
    }

    .rc-tabs-wrap {
        display: inline-flex !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        background: #E0EBF5 !important;
        padding: 5px !important;
        border-radius: 9999px !important;
        gap: 4px !important;
        margin: 0 auto !important;
        flex-shrink: 0 !important;
    }

    .rc-tab-btn {
        padding: 7px 16px !important;
        font-size: 12.5px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        border-radius: 9999px !important;
    }

    .cfg-form-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .cs-stats-row,
    .resource-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .ea-item-indices,
    .gri-ops-stats-row,
    .proj-screen-stats-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .proj-interfaces-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .tab-usecases-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .tab-uc-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    .capabilities-micro-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .micro-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 14px 12px !important;
    }

    .pipeline-status-box {
        width: 100% !important;
        max-width: 100% !important;
    }

    .deliv-hero-blob,
    .deliv-getstarted-circle {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
    }

    /* Wrap filter buttons and header actions so they don't clip */
    .proj-filters-wrap {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    .gri-hero-actions {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    /* ==========================================================================
       TEXT VISIBILITY & OPACITY ENHANCEMENTS (MOBILE VIEW)
       ========================================================================== */
    /* Ensure all text descriptions, subtitles, and labels are 100% opaque and sharp */
    p,
    .section-subtitle,
    .hero-subtitle,
    .card-desc,
    .service-card-desc,
    .tactical-meta-text,
    .transform-desc,
    .case-study-desc,
    .case-study-placeholder-desc,
    .cbtp-life-kicker,
    .proj-banner-label,
    .proj-banner-sub,
    .cap-num-label,
    .cap-card-desc,
    .exp-cta-desc,
    .cred-pack-desc,
    .card-desc-dark,
    .exam-hero-desc,
    .tactical-subtitle,
    .engage-desc,
    .tab-hero-desc,
    .adm-hero-desc,
    .reg-hero-desc,
    .deliv-getstarted-desc,
    .osm-hero-desc,
    .osm-lead,
    .rp2-hero-desc,
    .ea-hero-desc,
    .ap-hero-desc,
    .cbtp-hero-desc,
    .gri-hero-desc,
    .gin-hero-desc,
    .exp-hero-desc,
    .proj-hero-desc,
    .csd-hero-desc,
    .ct-hero-desc,
    .cfg-hero-desc {
        opacity: 1 !important;
    }

    /* Enhance readability of paragraphs on dark backgrounds */
    .card-featured-dark p,
    .card-featured-dark .service-card-desc,
    .capability-viz-card p,
    .pipeline-section p,
    .pipeline-section .pipeline-subtitle,
    .pipeline-section .transform-desc,
    .tech-transformation-row .transform-desc,
    .tech-transform-section p,
    .dark-section p,
    [class*="-dark"] p,
    .hero-section p,
    .proj-hero-desc,
    .ct-hero-desc,
    .osm-hero-desc,
    .rp2-hero-desc,
    .ea-hero-desc,
    .adm-hero-desc,
    .reg-hero-desc,
    .tab-hero-desc,
    .cbtp-life-kicker,
    .proj-banner-label,
    .proj-banner-sub {
        color: #e2e8f0 !important;
        opacity: 1 !important;
    }

    /* Enhance readability of paragraphs on light backgrounds */
    .service-card:not(.card-featured-dark) p,
    .service-card:not(.card-featured-dark) .service-card-desc,
    .blueprint-card p,
    .tactical-card p,
    .white-card p,
    .cbt-journey-step-card:not(.cbt-jsc-dark) p,
    .cbt-step-desc,
    .tab-iso-card p {
        color: #334155 !important;
        opacity: 1 !important;
    }

    /* Badges, tags, and small meta items */
    .section-kicker,
    .kicker-tag,
    .cap-tag-pill,
    .cs-badge,
    .tag,
    .badge,
    .exp-badge-idx {
        opacity: 1 !important;
    }
}

/* ==========================================================================
   4. STANDARD SMARTPHONES (max-width: 575.98px)
   ========================================================================== */
@media (max-width: 575.98px) {

    /* --- Base Layout --- */
    .container,
    .exp-container,
    .gin-container,
    .gri-container,
    .ind-container,
    .ia-container,
    .il-container,
    .proj-container,
    .csd-container,
    .rc-container,
    .rde-container,
    .car-container,
    .ts-container,
    .cbtp-container,
    .ct-page-container,
    .cfg-container,
    .footer-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .section-padding {
        padding: 44px 0 !important;
    }

    /* --- Navigation Bar --- */
    .site-header {
        padding: 8px 12px !important;
    }

    .navbar {
        padding: 8px 14px !important;
        border-radius: 14px !important;
    }

    .brand-logo .logo-img {
        height: 40px !important;
    }

    .nav-links {
        top: 66px !important;
        left: 12px !important;
        right: 12px !important;
        padding: 18px 14px !important;
    }

    /* --- Typography Scaling --- */
    .hero-title,
    .about-hero-title,
    .ct-hero-heading,
    .cfg-hero-title,
    .tab-hero-title,
    .reg-hero-title,
    .deliv-hero-title,
    .cbt-hero-title,
    .ppt-hero-title,
    .ibt-hero-title,
    .rp-hero-title,
    .osm-hero-title,
    .rp2-hero-title,
    .ea-hero-title,
    .ap-hero-title,
    .cbtp-hero-title,
    .ind-hero-title,
    .gri-hero-title,
    .gin-hero-title,
    .ts-hero-title,
    .exp-hero-title,
    .proj-hero-title,
    .csd-hero-title,
    .rc-hero-title,
    .il-hero-title,
    .ia-header-title,
    .car-hero-title {
        font-size: 24px !important;
        line-height: 1.22 !important;
        letter-spacing: -0.02em !important;
    }

    .section-title,
    .about-section-title,
    .service-section-title,
    .exp-section-title,
    .gin-section-title,
    .gri-section-title,
    .ind-section-title,
    .ts-section-title,
    .deliv-section-title,
    .tab-section-title,
    .adm-section-title,
    .cbt-section-title,
    .ppt-section-title,
    .ibt-section-title,
    .rp-section-title,
    .osm-section-title,
    .rp2-section-title,
    .ea-section-title,
    .ap-section-title,
    .cbtp-section-title,
    .car-section-title,
    .proj-section-title,
    .rp2-heading,
    .ea-heading {
        font-size: 21px !important;
        line-height: 1.25 !important;
    }

    .section-tag,
    .ct-badge-orange,
    .cfg-hero-tag {
        font-size: 0.72rem !important;
    }

    .section-subtitle,
    .hero-description,
    .ct-hero-subheading,
    .cfg-hero-desc {
        font-size: 0.925rem !important;
        margin-bottom: 24px !important;
        line-height: 1.55 !important;
    }

    /* --- Card Paddings for Screen Real Estate --- */
    .stat-card-legacy,
    .stat-card-elevated,
    .capability-card,
    .service-card,
    .industry-card,
    .milestone-card,
    .pillar-card,
    .leader-card,
    .tab-card,
    .adm-phase-card,
    .reg-card,
    .cbt-feature-card,
    .cbt-two-tone-card,
    .ppt-intel-card,
    .osm-card,
    .rp2-card,
    .cbtp-card,
    .gri-case-card,
    .gin-cred-card,
    .exp-cluster-card,
    .proj-dual-card,
    .rc-doc-card,
    .rc-asset-card,
    .il-art-card,
    .car-role-card,
    .ct-delivery-card,
    .cfg-tile-card {
        padding: 18px 14px !important;
        border-radius: 14px !important;
    }

    /* --- Numbers & Stat Badges --- */
    .stat-card-number,
    .hero-stat-val,
    .c-stat-val,
    .ct-stat-serif,
    .cfg-num {
        font-size: 1.85rem !important;
    }

    /* --- Sectors Grid in CBT Product --- */
    .cbtp-sectors-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* --- Footer Single Column on Phones --- */
    .footer-columns-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .footer-col-title {
        margin-bottom: 10px !important;
    }

    .footer-brand-section {
        margin-bottom: 24px !important;
        padding-bottom: 16px !important;
    }

    .footer-logo-img {
        height: 50px !important;
    }

    .ct-hero-stats {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Single-column for viz-services-list to avoid any clipping */
    .viz-services-list {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .capabilities-micro-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .cs-stats-row,
    .proj-screen-stats-grid,
    .ea-item-indices,
    .gri-ops-stats-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Resource Centre Hero Mobile Refinements */
    .rc-hero {
        padding-top: 135px !important;
        padding-bottom: 35px !important;
    }

    .rc-hero-title {
        font-size: 26px !important;
        line-height: 1.2 !important;
        margin-bottom: 10px !important;
    }

    .rc-hero-desc {
        font-size: 13.5px !important;
        line-height: 1.5 !important;
        margin-bottom: 16px !important;
    }

    .rc-search-box {
        padding: 4px !important;
        border-radius: 10px !important;
    }

    .rc-search-input {
        font-size: 12.5px !important;
        padding: 7px 8px !important;
    }

    .rc-search-input::placeholder {
        font-size: 12px !important;
    }

    .rc-search-btn {
        padding: 8px 14px !important;
        font-size: 12px !important;
    }

    .rc-tab-btn {
        padding: 6px 13px !important;
        font-size: 12px !important;
    }
}

/* ==========================================================================
   5. COMPACT / NARROW SMARTPHONES (max-width: 400px)
   ========================================================================== */
@media (max-width: 400px) {

    .hero-title,
    .about-hero-title,
    .ct-hero-heading,
    .cfg-hero-title,
    .tab-hero-title,
    .reg-hero-title,
    .deliv-hero-title,
    .cbt-hero-title,
    .ppt-hero-title,
    .ibt-hero-title,
    .rp-hero-title,
    .osm-hero-title,
    .rp2-hero-title,
    .ea-hero-title,
    .ap-hero-title,
    .cbtp-hero-title,
    .ind-hero-title,
    .gri-hero-title,
    .gin-hero-title,
    .ts-hero-title,
    .exp-hero-title,
    .proj-hero-title,
    .csd-hero-title,
    .rc-hero-title,
    .il-hero-title,
    .ia-header-title,
    .car-hero-title {
        font-size: 21px !important;
        line-height: 1.22 !important;
    }

    .section-title,
    .about-section-title,
    .service-section-title,
    .exp-section-title,
    .gin-section-title,
    .gri-section-title,
    .ind-section-title,
    .ts-section-title,
    .deliv-section-title,
    .tab-section-title,
    .adm-section-title,
    .cbt-section-title,
    .ppt-section-title,
    .ibt-section-title,
    .rp-section-title,
    .osm-section-title,
    .rp2-section-title,
    .ea-section-title,
    .ap-section-title,
    .cbtp-section-title,
    .car-section-title,
    .proj-section-title,
    .rp2-heading,
    .ea-heading {
        font-size: 19px !important;
        line-height: 1.25 !important;
    }

    .btn {
        padding: 10px 16px !important;
        font-size: 0.825rem !important;
    }

    /* Commitment section on iPhone SE / compact screens */
    .wf-commitment-section,
    .wf-commitment-banner {
        padding: 44px 16px !important;
    }

    .wf-commit-title {
        font-size: 20px !important;
        line-height: 1.32 !important;
    }

    .btn-wf-white,
    .btn-wf-outline-light {
        padding: 12px 10px !important;
        font-size: 10.5px !important;
        letter-spacing: 0.02em !important;
    }

    /* Services Explore Panel & Button on compact screens */
    .services-explore-panel {
        padding: 22px 14px !important;
        border-radius: 16px !important;
    }

    .explore-panel-title {
        font-size: 22px !important;
        line-height: 1.25 !important;
    }

    .btn-cyan-full-pill,
    .btn-tech-explore {
        padding: 12px 10px !important;
        font-size: 10.5px !important;
        letter-spacing: 0.02em !important;
        min-height: 48px !important;
    }

    /* Examination Starts Card on compact screens */
    .examination-starts-card {
        padding: 32px 16px !important;
        border-radius: 16px !important;
    }

    .card-title-dark {
        font-size: 1.55rem !important;
        line-height: 1.25 !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }

    .card-desc-dark {
        font-size: 0.85rem !important;
        line-height: 1.55 !important;
        margin: 0 auto 22px !important;
    }

    .card-stat-box .c-stat-val {
        font-size: 1.85rem !important;
    }

    .card-buttons-row .btn {
        padding: 12px 10px !important;
        font-size: 10.5px !important;
        letter-spacing: 0.02em !important;
    }

    .stat-card-number,
    .hero-stat-val,
    .ct-stat-serif {
        font-size: 1.6rem !important;
    }

    /* Prevent any heading or button overflow on smallest screens */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .from-title,
    .to-title,
    .transform-title {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    .from-title,
    .to-title,
    .transform-title {
        font-size: 22px !important;
    }

    .rc-hero {
        padding-top: 130px !important;
        padding-bottom: 30px !important;
    }

    .rc-hero-title {
        font-size: 23px !important;
        line-height: 1.2 !important;
    }

    .rc-hero-desc {
        font-size: 13px !important;
    }

    .rc-search-btn {
        padding: 7px 12px !important;
        font-size: 11.5px !important;
    }

    .rc-tab-btn {
        padding: 6px 11px !important;
        font-size: 11px !important;
    }
}

/* ==========================================================================
   MANPOWER SOURCING RESPONSIVE STYLES
   ========================================================================== */
@media (max-width: 1024px) {
    .mpr-hero-container {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    .mpr-hero-visual {
        display: none !important;
    }

    .mpr-verticals-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .mpr-process-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    .mpr-precision-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px !important;
    }

    .mpr-sectors-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 16px !important;
    }
}

@media (max-width: 768px) {
    .mpr-hero-section {
        padding: 140px 0 70px 0 !important;
    }

    .mpr-hero-title {
        font-size: 34px !important;
        line-height: 1.2 !important;
    }

    .mpr-title-line {
        white-space: normal !important;
        display: inline !important;
    }

    .mpr-title-dark,
    .mpr-title-light,
    .mpr-cta-title {
        font-size: 28px !important;
        line-height: 1.25 !important;
    }

    .mpr-process-grid {
        grid-template-columns: 1fr !important;
    }

    .mpr-precision-grid {
        grid-template-columns: 1fr !important;
    }

    .mpr-influence-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .mpr-sectors-grid {
        grid-template-columns: 1fr !important;
    }

    .mpr-verticals-section,
    .mpr-process-section,
    .mpr-precision-section,
    .mpr-sectors-section,
    .mpr-cta-section {
        padding: 70px 0 !important;
    }
}

@media (max-width: 480px) {
    .mpr-hero-title {
        font-size: 28px !important;
    }

    .mpr-title-dark,
    .mpr-title-light,
    .mpr-cta-title {
        font-size: 24px !important;
    }

    .mpr-vcard {
        padding: 28px 20px !important;
    }

    .mpr-icard-val {
        font-size: 40px !important;
    }

    .mpr-hero-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .mpr-btn-partner,
    .mpr-btn-cyan-gradient,
    .mpr-btn-cyan-outline {
        justify-content: center !important;
        width: 100% !important;
        text-align: center !important;
    }
}

/* ==========================================================================
   HOMEPAGE NEW SECTIONS RESPONSIVE (Suite Stats & Human Capital)
   ========================================================================== */
@media (max-width: 991px) {
    .suite-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
        margin-top: 40px !important;
    }

    .hc-operations-section,
    .security-section {
        padding: 70px 0 !important;
    }

    .hc-title {
        font-size: 32px !important;
    }

    .hc-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        margin-top: 36px !important;
    }

    .hc-tree-connector {
        display: none !important;
    }

    .hc-hub-wrap {
        margin-top: 24px !important;
    }

    .hc-pipeline-bar {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 16px !important;
        max-width: 100% !important;
    }

    .hc-pipe-step {
        width: 100% !important;
        justify-content: center !important;
    }

    .hc-pipe-arrow {
        transform: rotate(90deg) !important;
        margin: 2px 0 !important;
    }
}

@media (max-width: 640px) {
    .suite-stats-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .suite-stat-card {
        padding: 24px 20px !important;
    }

    .security-section {
        padding: 50px 0 !important;
    }

    .suite-stat-val {
        font-size: 38px !important;
    }

    .hc-title {
        font-size: 26px !important;
    }

    .hc-card {
        padding: 20px 22px !important;
    }

    .hc-hub-box {
        width: 100% !important;
        max-width: 280px !important;
    }

    .btn-hc-cyan {
        width: 100% !important;
        justify-content: center !important;
        padding: 14px 24px !important;
        font-size: 12px !important;
    }
}

/* ==========================================================================
   WORKFORCE SECTIONS RESPONSIVE
   ========================================================================== */
@media (max-width: 991px) {
    .wf-domains-layout {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .wf-hub-col {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .wf-hub-connector-left,
    .wf-hub-connector-right {
        display: none !important;
    }

    .wf-pipe-dashed-line {
        display: none !important;
    }

    .wf-pipe-steps-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px 20px !important;
    }

    .wf-engine-trio {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .wf-engine-arrow-divider {
        display: flex !important;
        justify-content: center !important;
        transform: rotate(90deg) !important;
        margin: 4px 0 !important;
    }

    .wf-bc-layout {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    .wf-integrated-cards-grid,
    .wf-hl-cards-grid,
    .wf-sla-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .wf-delivery-banner {
        flex-direction: column !important;
        text-align: center !important;
        padding: 32px 24px !important;
    }

    .wf-delivery-desc {
        max-width: 100% !important;
    }

    .wf-stream-row,
    .wf-stream-row.reverse {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .wf-stream-row.reverse .wf-srow-media {
        order: 1 !important;
    }

    .wf-stream-row.reverse .wf-srow-content {
        order: 2 !important;
    }

    .wf-stats-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

@media (max-width: 640px) {

    .wf-experts-title,
    .wf-dark-title,
    .wf-hl-title,
    .wf-light-title,
    .wf-ready-title,
    .wf-commit-title {
        font-size: 28px !important;
        line-height: 1.25 !important;
    }

    .wf-pipe-steps-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .wf-stats-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .wf-commitment-section,
    .wf-commitment-banner {
        padding: 56px 20px !important;
    }

    .wf-commit-title br {
        display: none !important;
    }

    .wf-commit-title {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }

    .wf-commit-tag {
        max-width: 100% !important;
        white-space: normal !important;
        font-size: 10px !important;
        letter-spacing: 0.08em !important;
        padding: 6px 14px !important;
        line-height: 1.35 !important;
        margin-bottom: 18px !important;
    }

    .wf-commit-desc {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin-bottom: 28px !important;
    }

    .wf-srow-media {
        height: 240px !important;
    }

    .btn-wf-cyan,
    .btn-wf-primary,
    .btn-wf-outline-dark,
    .btn-wf-white,
    .btn-wf-outline-light {
        width: 100% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 13px 18px !important;
        font-size: 11.5px !important;
        letter-spacing: 0.03em !important;
        gap: 8px !important;
        box-sizing: border-box !important;
    }

    .btn-wf-white span,
    .btn-wf-outline-light span {
        text-align: center !important;
        display: inline-block !important;
    }

    .btn-wf-white svg,
    .btn-wf-outline-light svg {
        flex-shrink: 0 !important;
    }
}

/* ==========================================================================
   CBT 12 SECURITY SECTIONS RESPONSIVE RULES (TABLET & MOBILE)
   Laptop & Desktop View (>1024px) remains 100% untouched as designed!
   ========================================================================== */
@media (max-width: 1024px) {

    .cbt-sec-overview-grid,
    .cbt-sec-split-2col,
    .cbt-sec-server-split,
    .cbt-sec-deck-split,
    .cbt-sec-cockpit-grid,
    .cbt-sec-auditcta-grid {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }

    .cbt-sec-telemetry-grid-6 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
    }

    .cbt-sec-regional-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .cbt-sec-topology-body {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .cbt-sec-server-ring {
        margin: 20px auto !important;
    }

    .cbt-sec-coldstart-steps {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
    }

    .cbt-sec-compare-grid,
    .cbt-sec-cards-3-row,
    .cbt-sec-steps-grid-3,
    .cbt-sec-gold-row {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .cbt-sec-timeline-row {
        grid-template-columns: 1fr 50px 1fr !important;
        gap: 14px !important;
    }
}

@media (max-width: 768px) {

    /* Section padding */
    .cbt-sec-dark-section,
    .cbt-sec-light-section {
        padding: 56px 0 !important;
        overflow: hidden !important;
        max-width: 100vw !important;
    }

    /* Headings and descriptions */
    .cbt-sec-main-title,
    .cbt-sec-section-title,
    .cbt-sec-cta-title {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    .cbt-sec-h3-title,
    .cbt-sec-cockpit-h3 {
        font-size: 1.45rem !important;
        line-height: 1.32 !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    .cbt-sec-section-subtitle,
    .cbt-sec-main-desc,
    .cbt-sec-p-desc,
    .cbt-sec-cockpit-desc,
    .cbt-sec-cta-desc {
        font-size: 0.88rem !important;
        line-height: 1.65 !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    /* Common Card Padding & Overflow Safety */
    .cbt-sec-card,
    .cbt-sec-flowchain-card,
    .cbt-sec-topology-card,
    .cbt-sec-controls-card,
    .cbt-sec-enforce-card,
    .cbt-sec-verif-box {
        padding: 20px 16px !important;
        border-radius: 12px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .cbt-sec-card-header,
    .cbt-sec-bridge-header,
    .cbt-sec-verif-top,
    .cbt-sec-regional-top {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        font-size: 0.68rem !important;
    }

    /* --- SECTION 01: Flow Chain List & Flow Items --- */
    .cbt-sec-meta-row {
        gap: 20px !important;
        margin-top: 24px !important;
        padding-top: 18px !important;
        flex-wrap: wrap !important;
    }

    .cbt-sec-flow-item {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 10px 12px !important;
        box-sizing: border-box !important;
    }

    .cbt-sec-node-tag {
        font-size: 0.62rem !important;
        padding: 3px 6px !important;
        flex-shrink: 0 !important;
    }

    .cbt-sec-flow-name {
        font-size: 0.78rem !important;
        line-height: 1.25 !important;
    }

    .cbt-sec-flow-sub {
        font-size: 0.68rem !important;
        line-height: 1.35 !important;
    }

    .cbt-sec-status-pill {
        font-size: 0.6rem !important;
        padding: 3px 7px !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    /* --- SECTION 02: Spine Timeline --- */
    .cbt-sec-timeline-spine-wrapper::before {
        display: none !important;
    }

    .cbt-sec-timeline-row {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .cbt-sec-spine-node {
        display: none !important;
    }

    .cbt-sec-layer-card {
        padding: 18px 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .cbt-sec-attest-box {
        padding: 14px 16px !important;
        font-size: 0.7rem !important;
        word-break: break-all !important;
        overflow-wrap: break-word !important;
    }

    /* --- SECTION 04: Ciphertext & Key Separation Flow Console --- */
    .cbt-sec-flow-console {
        padding: 22px 14px !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .cbt-sec-flow-track-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 14px 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    }

    .cbt-sec-flow-track-row:last-child {
        border-bottom: none !important;
    }

    .cbt-sec-track-label {
        width: 100% !important;
        flex-shrink: 0 !important;
        margin-bottom: 2px !important;
    }

    .cbt-sec-steps-track {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 6px 2px 12px 2px !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
        scrollbar-width: thin !important;
        scrollbar-color: #38bdf8 rgba(15, 23, 42, 0.6) !important;
    }

    .cbt-sec-steps-track::-webkit-scrollbar {
        height: 4px !important;
        display: block !important;
    }

    .cbt-sec-steps-track::-webkit-scrollbar-track {
        background: rgba(15, 23, 42, 0.8) !important;
        border-radius: 4px !important;
    }

    .cbt-sec-steps-track::-webkit-scrollbar-thumb {
        background: #38bdf8 !important;
        border-radius: 4px !important;
    }

    .cbt-sec-step-pill {
        flex: 0 0 115px !important;
        min-width: 115px !important;
        max-width: 125px !important;
        padding: 10px 8px !important;
        box-sizing: border-box !important;
    }

    .cbt-sec-pipe-line,
    .cbt-sec-pipe-arrow {
        flex: 0 0 12px !important;
        width: 12px !important;
    }

    /* --- SECTION 05: Infrastructure Fortification & Topology --- */
    .cbt-sec-server-split {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    .cbt-sec-admin-content {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .cbt-sec-bridge-card {
        padding: 16px 14px !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }

    .cbt-sec-topology-card {
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .cbt-sec-topology-body {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        margin: 14px 0 !important;
    }

    .cbt-sec-topo-center {
        order: -1 !important;
        margin: 8px auto 14px auto !important;
    }

    .cbt-sec-server-ring {
        width: 148px !important;
        height: 148px !important;
        padding: 8px !important;
    }

    .cbt-sec-server-name {
        font-size: 0.78rem !important;
    }

    .cbt-sec-server-enclave {
        font-size: 0.54rem !important;
    }

    .cbt-sec-server-pill {
        font-size: 0.48rem !important;
        padding: 2px 5px !important;
    }

    .cbt-sec-topo-col.left,
    .cbt-sec-topo-col.right {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .cbt-sec-topo-item {
        margin-bottom: 0 !important;
        padding: 10px 12px !important;
        box-sizing: border-box !important;
    }

    .cbt-sec-topo-footer {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        padding: 10px 14px !important;
    }

    /* --- SECTION 06: Candidate Hardware & Coldstart --- */
    .cbt-sec-coldstart-bar {
        padding: 18px 14px !important;
    }

    .cbt-sec-coldstart-steps {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .cbt-sec-endpoint-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* --- SECTION 08: Access Control & Event Logs --- */
    .cbt-sec-auth-row,
    .cbt-sec-stage-row {
        padding: 10px 12px !important;
    }

    .cbt-sec-chain-item,
    .cbt-sec-reg-item {
        padding: 10px 12px !important;
        gap: 10px !important;
    }

    /* --- SECTION 09: Command Centre & Telemetry --- */
    .cbt-sec-telemetry-grid-6 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .cbt-sec-regional-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* --- SECTION 12: CTA & Gold Stats --- */
    .cbt-sec-cta-btns {
        flex-direction: column !important;
        width: 100% !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .btn-cbt-cyan-btn,
    .btn-cbt-dark-pill {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 13px 18px !important;
        box-sizing: border-box !important;
    }

    .cbt-sec-gold-val {
        font-size: 2.5rem !important;
    }

    .cbt-sec-gold-row .cbt-sec-gold-statcard {
        padding: 24px 18px !important;
    }
}

@media (max-width: 480px) {

    /* Flow chain item on compact smartphones (320px - 480px) */
    .cbt-sec-flow-item {
        padding: 8px 10px !important;
        gap: 8px !important;
    }

    .cbt-sec-flow-name {
        font-size: 0.74rem !important;
    }

    .cbt-sec-flow-sub {
        font-size: 0.64rem !important;
    }

    .cbt-sec-status-pill {
        font-size: 0.54rem !important;
        padding: 2px 5px !important;
    }

    .cbt-sec-node-tag {
        font-size: 0.58rem !important;
        padding: 2px 5px !important;
    }

    /* Topology items stack in 1 column on <= 480px */
    .cbt-sec-topo-col.left,
    .cbt-sec-topo-col.right {
        grid-template-columns: 1fr !important;
    }

    .cbt-sec-coldstart-steps {
        grid-template-columns: 1fr !important;
    }

    .cbt-sec-telemetry-grid-6 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .cbt-sec-telem-card {
        padding: 12px 10px !important;
    }

    .cbt-sec-telem-val {
        font-size: 0.95rem !important;
    }

    .cbt-sec-telem-label {
        font-size: 0.58rem !important;
    }
}

/* ==========================================================================
   TARGETED RESPONSIVE FIXES FOR SCREENSHOT SECTIONS (Mobile <= 768px)
   Scope: 
   1. System Reliability Map / Stats Section (#reliability-map)
   2. Who is Amatyas / Capabilities Strip (#who-we-are)
   3. Manpower Sourcing CTA Block (#manpower)
   * Laptop & Desktop view (>1024px) remains 100% untouched! *
   ========================================================================== */
@media (max-width: 768px) {

    /* --- 1. System Reliability Map / Stats Section --- */
    .stats-section {
        padding: 56px 0 45px !important;
    }

    .stats-section .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }

    .system-meta-bar {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px 14px !important;
        font-size: 11px !important;
        margin-top: 10px !important;
        margin-bottom: 24px !important;
    }

    .system-meta-bar .meta-divider {
        width: 28px !important;
        height: 1.5px !important;
        background: #CBD5E1 !important;
        flex-shrink: 0 !important;
    }

    .system-meta-bar .meta-sys-loc,
    .system-meta-bar .meta-status {
        white-space: nowrap !important;
        font-size: 11px !important;
    }

    .stats-top-row {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .stat-card-legacy {
        padding: 0 !important;
    }

    .stat-card-legacy .stat-card-value {
        font-size: 38px !important;
        line-height: 1.1 !important;
        margin-bottom: 12px !important;
    }

    .stat-card-elevated {
        padding: 24px 20px !important;
        border-radius: 18px !important;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important;
    }

    .stat-card-elevated .stat-card-header {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        margin-bottom: 14px !important;
    }

    .stat-card-badge-cyan {
        font-size: 11px !important;
        letter-spacing: 0.04em !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        margin-bottom: 0 !important;
    }

    .stat-sub-tag {
        font-size: 9.5px !important;
        padding: 3px 8px !important;
        border-radius: 4px !important;
        background: rgba(2, 132, 199, 0.08) !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    .stat-card-elevated .stat-card-value {
        font-size: 38px !important;
        line-height: 1.1 !important;
        margin-bottom: 12px !important;
    }

    .stats-bottom-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .grid-cell {
        padding: 20px 16px !important;
        min-height: auto !important;
        background: #FFFFFF !important;
        border: 1px solid #E2E8F0 !important;
        border-radius: 14px !important;
        border-right: 1px solid #E2E8F0 !important;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
    }

    .grid-cell .stat-card-value-sm {
        font-size: 22px !important;
        font-weight: 700 !important;
    }

    /* --- 2. Who is Amatyas / Capabilities Strip --- */
    .who-is-amatyas-section {
        padding-top: 50px !important;
        padding-bottom: 0 !important;
    }

    .who-is-amatyas-section .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }

    .who-header-tag {
        font-size: 0.75rem !important;
        margin-bottom: 14px !important;
        letter-spacing: 0.08em !important;
    }

    .who-title {
        font-size: 28px !important;
        line-height: 1.2 !important;
        letter-spacing: -0.02em !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
        margin-bottom: 16px !important;
    }

    .who-title br {
        display: inline !important;
    }

    .accent-rule {
        width: 44px !important;
        height: 3px !important;
        margin-bottom: 18px !important;
    }

    .who-desc {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin-bottom: 24px !important;
    }

    .btn-explore-more {
        padding: 11px 22px !important;
        font-size: 0.825rem !important;
        margin-bottom: 32px !important;
        display: inline-flex !important;
    }

    .capabilities-strip {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        margin-top: 24px !important;
        padding: 0 20px 40px 20px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .capability-card {
        min-height: auto !important;
        padding: 72px 20px 24px 20px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        position: relative !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
    }

    .capability-card .cap-icon-circle {
        position: absolute !important;
        top: 20px !important;
        left: 20px !important;
        width: 40px !important;
        height: 40px !important;
        z-index: 2 !important;
    }

    .capability-card .cap-icon-circle svg {
        width: 20px !important;
        height: 20px !important;
    }

    .capability-card .cap-tag-pill {
        position: absolute !important;
        top: 20px !important;
        right: 20px !important;
        font-size: 0.65rem !important;
        padding: 3px 9px !important;
        z-index: 2 !important;
    }

    .capability-card .cap-watermark-num {
        display: none !important;
    }

    .capability-card .cap-num-label {
        font-size: 1.4rem !important;
        margin-bottom: 4px !important;
        line-height: 1 !important;
    }

    .capability-card .cap-card-title {
        font-size: 1.35rem !important;
        margin-bottom: 8px !important;
        line-height: 1.25 !important;
    }

    .capability-card .cap-card-desc {
        font-size: 0.9rem !important;
        line-height: 1.55 !important;
    }

    /* --- 3. Manpower Sourcing CTA Block & Spacing --- */
    .manpower-section {
        padding: 60px 0 35px !important;
    }

    .manpower-section .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }

    .manpower-cta-block {
        padding: 24px 12px 10px 12px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    .manpower-cta-title {
        font-size: 22px !important;
        line-height: 1.25 !important;
        margin-bottom: 14px !important;
    }

    .manpower-cta-desc {
        font-size: 13.5px !important;
        line-height: 1.55 !important;
        margin-bottom: 22px !important;
    }

    .manpower-cta-actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 12px !important;
    }

    .manpower-cta-actions .btn,
    .manpower-cta-actions a,
    .btn-manpower-primary,
    .btn-manpower-outline {
        width: 100% !important;
        max-width: 100% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 13px 18px !important;
        font-size: 12px !important;
        letter-spacing: 0.04em !important;
        box-sizing: border-box !important;
    }
}

/* Micro-screen fine tuning for narrow devices (320px - 480px, e.g. iPhone SE 375px, 353px) */
@media (max-width: 480px) {
    /* Responsive side paddings for narrow screens */
    .stats-section .container,
    .who-is-amatyas-section .container,
    .manpower-section .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .who-title {
        font-size: 24px !important;
        line-height: 1.25 !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
        margin-bottom: 14px !important;
    }

    .who-desc {
        font-size: 13.5px !important;
        line-height: 1.55 !important;
        margin-bottom: 20px !important;
    }

    /* Capabilities Strip with clean 16px edge padding */
    .capabilities-strip {
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 36px !important;
        gap: 14px !important;
    }

    .system-meta-bar {
        gap: 6px 10px !important;
        font-size: 10px !important;
    }

    .system-meta-bar .meta-divider {
        width: 22px !important;
    }

    .system-meta-bar .meta-sys-loc,
    .system-meta-bar .meta-status {
        font-size: 10px !important;
    }

    .stat-card-badge-cyan {
        font-size: 10px !important;
    }

    .stat-sub-tag {
        font-size: 8.5px !important;
        padding: 2px 6px !important;
    }

    .stat-card-legacy .stat-card-value,
    .stat-card-elevated .stat-card-value {
        font-size: 32px !important;
    }

    .capability-card {
        padding: 66px 16px 20px 16px !important;
        border-radius: 16px !important;
    }

    .capability-card .cap-icon-circle {
        top: 18px !important;
        left: 18px !important;
        width: 38px !important;
        height: 38px !important;
    }

    .capability-card .cap-tag-pill {
        top: 18px !important;
        right: 18px !important;
    }

    .capability-card .cap-card-title {
        font-size: 1.2rem !important;
    }

    .manpower-cta-title {
        font-size: 19px !important;
    }

    .manpower-cta-actions .btn,
    .manpower-cta-actions a,
    .btn-manpower-primary,
    .btn-manpower-outline {
        padding: 11px 12px !important;
        font-size: 11px !important;
        letter-spacing: 0.02em !important;
    }
}