/* Shared responsive layouts. Component styling lives in its own stylesheet. */
@media (max-width: 1100px) {
    .clients-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}

@media (max-width: 900px) {
    .intro-container { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .oasis-overview-grid, .orbit-overview-grid,
    .contact-container { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .oasis-capability-grid, .orbit-capability-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .product-feature-content { padding: 32px; }
    .product-feature-name { font-size: clamp(48px, 8vw, 100px); letter-spacing: -3px; }
    .contact-action { max-width: 560px; }
}

@media (max-width: 768px) {
    /* Phone carousel: full-width image followed by readable text. */
    .solution-slide {
        height: auto;
        min-height: 0;
        background: var(--navy);
    }
    .solution-slide img {
        position: static;
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
    }
    .solution-slide::after { display: none; }
    .solution-slide-content {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        max-width: none;
        padding: 28px 24px 76px;
        overflow-wrap: break-word;
    }
    .solution-slide-content h2 {
        font-size: clamp(28px, 7vw, 40px);
        margin-bottom: 16px;
    }
    .solution-slide-content p {
        max-width: none;
        font-size: 17px;
        margin-bottom: 22px;
    }
    .solution-slide-content .solution-slide-button {
        max-width: 100%;
        white-space: normal;
        text-align: center;
    }
    /* Center arrows over the landscape image rather than the text. */
    .solutions-carousel .carousel-button {
        top: 27.37vw;
        width: 44px;
        height: 44px;
        opacity: 1;
        border-radius: 50%;
        background: rgba(7, 21, 47, 0.65);
        transform: translateY(-50%);
    }
    .carousel-button-prev { left: 8px; }
    .carousel-button-next { right: 8px; }
    .carousel-dot { width: 32px; height: 44px; }
    .carousel-dots { bottom: 10px; }
    .product-feature { flex-direction: column; min-height: 0; }
    .product-feature-content, .product-feature-name { width: 100%; }
    .product-feature-name { min-height: 150px; font-size: 64px; }
    .orbit-feature .product-feature-content { order: -1; }
    .trust-section, .clients-section, .products-section,
    .testimonials-section, .about-section, .contact-section { padding: 48px 20px; }
    .highlights-section { padding: 36px 20px; }
    .highlights-container { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .contact-content h2 { font-size: clamp(28px, 6vw, 38px); }
    .oasis-hero-container, .orbit-hero-container { padding: 64px 0; }
}

@media (max-width: 600px) {
    .brainsharp-intro { padding: 40px 0; }
    .intro-container { width: calc(100% - 32px); }
    .intro-products, .trust-grid, .clients-grid, .testimonials-grid,
    .oasis-capability-grid, .orbit-capability-grid,
    .integration-grid, .orbit-integration-grid,
    .contact-details, .footer-main { grid-template-columns: minmax(0, 1fr); }
    .intro-products { gap: 14px; }
    .intro-product-card { padding: 22px; }
    .trust-card, .client-card, .testimonial-card { padding: 24px; }
    .client-card { min-height: 0; }
    .product-feature-content, .contact-action { padding: 24px; }
    .product-feature-content h3 { font-size: 40px; }
    .section-heading { margin-bottom: 28px; }
    .contact-details { gap: 16px; }
    .contact-button { max-width: 100%; text-align: center; }
    .contact-action, .footer-column, .footer-brand { min-width: 0; }
    .footer-column a { overflow-wrap: anywhere; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
    .oasis-overview, .orbit-overview, .oasis-capabilities, .orbit-capabilities,
    .oasis-integrations, .orbit-integrations { padding: 48px 0; }
    .oasis-highlight-box, .orbit-highlight-box { padding: 28px; min-height: 190px; }
}