/* ==========================================================================
   Responsive overrides - loaded last
   ========================================================================== */

@media (max-width: 1024px) {
    .hero {
        /* Stacked hero content (title + buttons + SOC panel) can run taller
           than one mobile screen - don't clip it, just let the page scroll. */
        min-height: auto;
        padding: 8rem 0 3rem;
        overflow: visible;
    }

    .hero-container {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .hero-left {
        text-align: center;
    }

    .hero-left .hero-subtitle {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-soc-panel {
        max-width: 480px;
        margin: 0 auto;
    }

    .threat-map-canvas-wrap {
        height: 380px;
    }

    .split-container,
    .careers-content,
    .cto-container,
    .leadership-grid {
        grid-template-columns: 1fr;
    }

    .cto-container {
        text-align: center;
    }

    .cto-avatar {
        margin: 0 auto;
    }

    .cto-content blockquote {
        text-align: left;
    }

    .why-choose-grid,
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .products-grid,
    .case-studies-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }

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

    .footer-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .journey-track {
        grid-template-columns: repeat(3, 1fr);
    }

    /* A single horizontal rail stops making sense once steps wrap onto
       multiple rows - the per-card reveal still animates without it. */
    .journey-connector {
        display: none;
    }

    .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stack-builder-grid {
        grid-template-columns: 1fr;
    }

    .hiring-stage {
        grid-template-columns: minmax(0, 1fr) minmax(6rem, 9rem) minmax(0, 1fr);
    }

    .tx-flow-panel {
        grid-template-columns: 1fr;
    }

    .tx-flow-feed {
        max-height: 320px;
    }

    .tx-flow-feed-list {
        max-height: 260px;
    }
}

@media (max-width: 768px) {
    section {
        padding: 4rem 0;
    }

    .page-hero {
        padding: 7rem 0 3rem;
    }

    .hero-soc-panel {
        padding: 1.25rem;
    }

    .timeline::before {
        left: 27px;
    }

    .timeline-item,
    .timeline-item:nth-child(even) {
        grid-template-columns: auto 1fr;
        gap: 1.25rem;
    }

    .timeline-node {
        grid-column: 1;
        width: 48px;
        height: 48px;
        font-size: 1.1rem;
    }

    .timeline-content,
    .timeline-item:nth-child(even) .timeline-content {
        grid-column: 2;
        text-align: left;
    }

    .nav-left {
        width: 100%;
        justify-content: space-between;
    }

    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        background: rgba(0, 8, 12, 0.95);
        backdrop-filter: blur(20px);
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--transition-med);
    }

    .nav-links.show-menu {
        max-height: 480px;
        padding: 1rem 0;
    }

    .nav-links li {
        width: 100%;
        padding: 0 1.5rem;
    }

    .nav-links a {
        display: block;
        padding: 0.85rem 0;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-cta {
        display: none;
    }

    .why-choose-grid,
    .services-grid,
    .products-grid,
    .case-studies-grid {
        grid-template-columns: 1fr;
    }

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

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }

    .hero-buttons .btn {
        width: 100%;
        justify-content: center;
    }

    .soc-grid {
        grid-template-columns: 1fr 1fr;
    }

    .threat-map-canvas-wrap {
        height: 320px;
    }

    .journey-track,
    .category-grid {
        grid-template-columns: 1fr;
    }

    .category-controls {
        flex-direction: column;
    }

    .category-search,
    .category-jump-wrap {
        flex: 1 1 auto;
    }

    .form-row-2 {
        grid-template-columns: 1fr;
    }

    .application-card {
        padding: 1.75rem 1.25rem;
    }

    .hiring-stage {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 0.75rem;
        max-width: 320px;
        margin: 0 auto;
    }

    .hiring-pin,
    .hiring-stage:nth-child(even) .hiring-pin {
        grid-column: 1;
        justify-self: center;
    }

    .hiring-stage-copy,
    .hiring-stage:nth-child(even) .hiring-stage-copy {
        grid-column: 1;
        text-align: center;
        width: 100%;
    }

    .hiring-road-base {
        stroke-width: 10;
    }

    /* On the desktop zigzag layout this badge sticks in the side gutter
       beside the road, tracking the current stage as you scroll. Once
       stages stack into a single centered column on mobile there's no
       gutter left, so a sticky badge just parks on top of whichever
       stage card has scrolled underneath it. Each pin already carries
       its own numbered badge in this layout, so drop the sticky pin
       here instead of fighting for space with the stacked cards. */
    .hiring-progress-badge {
        position: static;
        margin: 0 auto 2.5rem;
    }

    /* Below ~768px the tx-flow panel is already a single column (see the
       1024px rule above) - at this width its fixed 440px canvas height
       stops matching the shrunken width, stretching the circular node
       layout into a tall oval and colliding labels. Let it stay square
       instead, and stop cramming 4 stat labels into columns too narrow
       to hold them. */
    .tx-flow-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    #txFlowCanvas {
        height: auto;
        aspect-ratio: 1 / 1;
    }
}

@media (max-width: 480px) {
    .stats-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .industries-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    #backToTop {
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
    }

    .footer-social a {
        width: 30px;
        height: 30px;
        font-size: 0.85rem;
    }

    .soc-grid {
        grid-template-columns: 1fr;
    }

    .threat-map-canvas-wrap {
        height: 420px;
    }
}

/* Small phones (e.g. iPhone SE / narrow Android widths) */
@media (max-width: 400px) {
    .page-hero {
        padding: 6.5rem 0 2.5rem;
    }

    .hero {
        padding: 7rem 0 2.5rem;
    }

    section {
        padding: 3rem 0;
    }

    .industries-grid {
        grid-template-columns: 1fr;
    }

    .why-card,
    .service-card {
        padding: 1.5rem 1.25rem;
    }

    .product-card,
    .testimonial-card,
    .leader-card {
        padding: 1.75rem 1.25rem;
    }

    .case-study-card {
        padding: 1.5rem;
    }

    .cto-avatar {
        width: 96px;
        height: 96px;
    }

    .leader-card .cto-avatar {
        width: 88px;
        height: 88px;
    }
}