/* ═══════════════════════════════════════════
   RESPONSIVE STYLES
═══════════════════════════════════════════ */

/* Tablet & below */
@media (max-width: 991px) {

    /* Navigation */
    .navbar-collapse {
        background: var(--dark);
        padding: 1.5rem;
        margin-top: 1rem;
        border: 1px solid rgba(255, 255, 255, 0.06);
    }

    /* About */
    .about-img-wrap img {
        height: 400px;
    }

    .about-img-wrap::before {
        display: none;
    }

    .about-img-wrap::after {
        display: none;
    }

    /* Portfolio slider */
    .ps-counter-wrap {
        display: none;
    }

    .ps-grid-lines {
        display: none;
    }

    /* ESG */
    .esg-visual img {
        height: 350px;
    }

    .esg-badge {
        bottom: -1rem;
        right: 1rem;
    }

    /* Central Circuit Timeline */
    .timeline-line {
        left: 20px;
    }

    .timeline-row {
        display: block;
        min-height: auto;
        padding: 2rem 0;
        position: relative;
    }

    .timeline-content {
        position: relative;
        top: auto;
        width: 100%;
        padding-left: 3.5rem !important;
        padding-right: 0 !important;
        text-align: left !important;
    }

    .timeline-content::before {
        left: -28px !important;
        right: auto !important;
    }

    .timeline-content::after {
        display: none;
    }

    /* DEI Cinematic */
    .dei-container {
        flex-direction: column;
        height: auto;
    }

    .dei-card {
        height: 350px;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .dei-desc {
        opacity: 1;
        transform: translateY(0);
        height: auto;
        margin-top: 1rem;
    }

    .dei-card:hover {
        flex: 1;
    }

    /* IT Strategic Focus Cinematic */
    .stf-container {
        flex-direction: column;
        height: auto;
    }

    .stf-card {
        height: 350px;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .stf-desc {
        opacity: 1;
        transform: translateY(0);
        height: auto;
        margin-top: 1rem;
    }

    .stf-card:hover {
        flex: 1;
    }

    /* ESG Commitment Slider */
    .esg-commit-container {
        flex-direction: column;
        height: auto;
    }

    .esg-commit-card {
        height: 350px;
        border-right: none;
        border-bottom: 1px solid rgba(138, 173, 94, 0.1);
    }

    .esg-commit-desc {
        opacity: 1;
        transform: translateY(0);
        height: auto;
        margin-top: 1rem;
    }

    .esg-commit-card:hover {
        flex: 1;
    }

    /* Mosaic Bento Grid */
    .mosaic-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .tile-large,
    .tile-tall,
    .tile-wide,
    .tile-std {
        grid-column: span 1;
        grid-row: span 1;
        min-height: 300px;
    }

    .m-desc {
        opacity: 1;
        transform: translateY(0);
        -webkit-line-clamp: unset;
    }

    .m-icon {
        margin-bottom: 2rem;
    }

    /* Global Presence — Cinematic */
    .gp-container {
        flex-direction: column;
        height: auto;
    }

    .gp-card {
        height: 350px;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .gp-desc {
        opacity: 1;
        transform: translateY(0);
        height: auto;
        margin-top: 1rem;
    }

    .gp-card:hover {
        flex: 1;
    }

    /* Project Showcase */
    .project-row,
    .project-row:nth-child(even) {
        flex-direction: column;
        margin-bottom: 4rem;
    }

    .project-visual {
        width: 100%;
        height: 350px;
        margin-bottom: 2rem;
    }

    .project-info {
        padding: 0;
    }

    .project-title {
        font-size: 2.2rem;
    }

    /* Toolkit — Tactical Selector */
    .toolkit-container {
        flex-direction: column;
    }

    .toolkit-menu {
        flex: auto;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .toolkit-btn {
        padding: 1.5rem 2rem;
    }

    .toolkit-btn:hover,
    .toolkit-btn.active {
        padding-left: 2.5rem;
    }

    .toolkit-display {
        min-height: 350px;
        padding: 2.5rem;
    }

    .tk-content-panel {
        padding: 2.5rem;
    }

    .tk-display-title {
        font-size: 2rem;
    }

    .tk-bg-icon {
        font-size: 10rem;
    }

    .tk-btn-title {
        font-size: 1.2rem;
    }

    /* Risk Command Center */
    .risk-interface {
        flex-direction: column;
    }

    .risk-menu {
        flex: auto;
    }

    .risk-btn {
        padding: 1.5rem;
    }

    .risk-screen {
        min-height: 350px;
        padding: 2rem;
    }

    .risk-big-title {
        font-size: 1.6rem;
    }

    .risk-content-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .risk-radar {
        width: 60px;
        height: 60px;
        bottom: 1rem;
        right: 1rem;
    }
}

/* Mobile */
@media (max-width: 767px) {

    /* Values - Editorial Ledger */
    .value-row {
        flex-direction: column;
        gap: 0.6rem;
    }

    .value-row-left {
        width: 100%;
        min-width: auto;
        gap: 1rem;
    }

    .value-num {
        font-size: 2.5rem;
        min-width: 45px;
    }

    .value-title {
        font-size: 1.25rem;
    }

    .value-row:hover {
        padding-left: 0.5rem;
    }


    /* Strategic Crosshair - stack on mobile */
    .crosshair-grid {
        grid-template-columns: 1fr;
    }

    .crosshair-center {
        display: none;
    }

    .crosshair-item {
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        padding: 3rem 1.5rem;
    }

    /* Toolkit — mobile: hide menu, show all panels stacked */
    .toolkit-container {
        border: none;
    }

    .toolkit-menu {
        display: none;
    }

    .toolkit-display {
        flex-direction: column;
        padding: 0;
    }

    .tk-content-panel {
        position: relative;
        inset: auto;
        opacity: 1;
        visibility: visible;
        transform: none;
        padding: 2rem 1.5rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .tk-display-title {
        font-size: 1.5rem;
    }

    .tk-display-desc {
        font-size: 0.95rem;
    }

    .tk-main-icon {
        font-size: 1.8rem;
        margin-bottom: 1rem;
    }

    .tk-bg-icon {
        display: none;
    }

    /* Risk Command Center — mobile: hide menu, show all panels stacked */
    .risk-menu {
        display: none;
    }

    .risk-screen {
        padding: 0;
        border: none;
        backdrop-filter: none;
        background: transparent;
    }

    .risk-screen::after {
        display: none;
    }

    .risk-radar {
        display: none;
    }

    .risk-content-item {
        display: block !important;
        animation: none;
        padding: 2rem 1.5rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .risk-big-title {
        font-size: 1.4rem;
    }

    .risk-desc {
        font-size: 0.9rem;
    }

    .risk-content-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}


/* min 992px */
@media (min-width: 992px) {
    .hero {
        min-height: 850px;
    }
}