/* ==========================================================
   VISUAL GO — RESPONSIVE SYSTEM
   Breakpoints:
     Desktop       : ≥ 1280px  (baseline — no media query needed)
     Small Laptop  : ≤ 1279px  (max-width: 1279px)
     Tablet        : ≤ 1024px  (max-width: 1024px)
     Mobile        : ≤ 768px   (max-width: 768px)
     Small Mobile  : ≤ 480px   (max-width: 480px)
   ========================================================== */

/* ── 0. GLOBAL OVERFLOW GUARD ─────────────────────────────── */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

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

/* ── 1. FLUID CONTAINER ───────────────────────────────────── */
.container {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 2rem);
    box-sizing: border-box;
}

/* ── 2. FLUID TYPOGRAPHY SCALE ────────────────────────────── */
/* Already clamp()-based in index.css; reinforce for sub-pages */
h1 { font-size: clamp(1.75rem, 4.5vw, 3.25rem); }
h2 { font-size: clamp(1.45rem, 3.5vw, 2.5rem);  }
h3 { font-size: clamp(1.1rem,  2vw,  1.5rem);   }
h4 { font-size: clamp(0.95rem, 1.5vw, 1.15rem); }

/* ── 3. SECTION SPACING — fluid via clamp() ─────────────────*/
section {
    padding-block: clamp(2.5rem, 8vw, 6rem);
}

/* ── 4. SMALL LAPTOP  (≤ 1279px) ─────────────────────────── */
@media (max-width: 1279px) {

    /* Navigation */
    .nav-links {
        gap: 1.25rem;
    }

    .nav-links a {
        font-size: 0.825rem;
    }

    /* Hero */
    .hero-text {
        max-width: 60%;
    }

    .hero-text h1 {
        font-size: clamp(2rem, 4vw, 3rem);
    }

    /* Services bento grid — loosen the 8/4 split */
    .service-card:nth-child(1) { grid-column: span 7; }
    .service-card:nth-child(2) { grid-column: span 5; }
    .service-card:nth-child(3) { grid-column: span 5; }
    .service-card:nth-child(4) { grid-column: span 7; }

    /* About grid — slightly tighter gap */
    .about-grid {
        gap: 2.5rem;
    }

    /* Footer grid — tighter */
    .footer-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem 1.5rem;
    }

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

    /* Section header */
    .section-header {
        margin-bottom: 5rem;
        max-width: 700px;
    }
}

/* ── 5. TABLET  (≤ 1024px) ───────────────────────────────── */
@media (max-width: 1024px) {

    /* Container side padding tightens slightly */
    .container {
        padding-inline: 1.5rem;
    }

    /* Hero */
    .hero {
        background-attachment: scroll; /* prevents mobile flicker */
        padding-block: clamp(3rem, 8vw, 5rem);
        min-height: 90vh;
    }

    .hero-text {
        max-width: 75%;
    }

    .hero-text h1 {
        font-size: clamp(1.9rem, 4vw, 2.8rem);
    }

    .hero-text p {
        font-size: 1rem;
    }

    /* Services bento → 2-column on tablet */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .service-card:nth-child(n) {
        grid-column: span 1 !important;
    }

    /* About — single column */
    .about-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .collage-container {
        max-width: 640px;
        margin-inline: auto;
    }

    /* Stats sidebar — horizontal */
    .hero-stats-sidebar {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1.5rem 2rem;
        padding-left: 0;
        border-left: none;
        border-top: 1px solid rgba(255,255,255,0.1);
        padding-top: 1.5rem;
        min-width: 100%;
    }

    /* Footer grid */
    .footer-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem 1.5rem;
    }

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

    /* Section header */
    .section-header {
        margin-bottom: 4rem;
        max-width: 640px;
    }

    /* Service page inner grids */
    .svc-features-grid,
    .capability-grid,
    .process-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Quote / Contact modal */
    .quote-modal-container {
        max-height: 100dvh;
        border-radius: 0;
        height: 100%;
        width: 100%;
    }

    .quote-modal-content {
        padding: 3.5rem 1.5rem 2rem;
        width: 100%;
        box-sizing: border-box;
    }

    .quote-form-row {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    /* CTA banners */
    .cta-banner,
    .cta-section {
        border-radius: 20px;
        padding: 3rem 2rem;
    }

    /* About / Service hero containers */
    .about-hero .container,
    .svc-hero .container {
        flex-direction: column;
        align-items: flex-start;
        gap: 2.5rem;
    }

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

    /* Contact page grid */
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 3rem !important;
    }
}

/* ── 6. MOBILE  (≤ 768px) ────────────────────────────────── */
@media (max-width: 768px) {

    /* Container */
    .container {
        padding-inline: 1.25rem;
    }

    /* ── Typography scale-down ──────────────────────────── */
    h1 { font-size: clamp(1.6rem, 7vw, 2.4rem);  }
    h2 { font-size: clamp(1.3rem, 6vw, 2rem);    }
    h3 { font-size: clamp(1rem,   5vw, 1.35rem); }
    p  { font-size: clamp(0.85rem, 3.5vw, 1rem); line-height: 1.5; }

    /* ── Section spacing ─────────────────────────────────── */
    section {
        padding-block: 2.5rem;
    }

    .services  { padding-block: 2.5rem; }
    .about     { padding-block: 2.5rem; }

    /* ── Hero ────────────────────────────────────────────── */
    .hero {
        min-height: 100svh;
        background-attachment: scroll;
        padding-block: 4rem 3rem;
        text-align: left;
    }

    .hero .container {
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: space-between;
        align-items: flex-start;
    }

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

    .hero-text h1 {
        font-size: clamp(1.7rem, 7vw, 2.4rem);
        margin-bottom: 0.75rem;
    }

    .hero-text p {
        font-size: 0.9rem;
        margin-bottom: 1.5rem;
        opacity: 0.88;
    }

    .hero-actions {
        flex-direction: row !important;
        gap: 0.5rem;
        width: 100%;
        flex-wrap: wrap;
        margin-top: 1.5rem;
    }

    .hero-actions .btn {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0.75rem 0.85rem;
        font-size: 0.8rem;
        white-space: nowrap;
        text-align: center;
    }

    /* ── Services grid → single column ──────────────────── */
    .services-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    .service-card {
        grid-column: span 1 !important;
        border-radius: 20px !important;
        min-height: 380px;
    }

    .service-card-content {
        padding: 2.5rem 1.25rem 1.25rem !important;
        background: linear-gradient(to bottom, transparent 0%, #ffffff 22%) !important;
    }

    .service-card p {
        max-width: 100% !important;
        margin-bottom: 1.25rem !important;
    }

    /* ── Section header ──────────────────────────────────── */
    .section-header {
        margin-bottom: 2.5rem !important;
        max-width: 100%;
    }

    .section-header p {
        font-size: 0.9rem;
    }

    /* ── About section → vertical stack ─────────────────── */
    .about-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .collage-container {
        grid-template-columns: 1fr 0.75fr;
        gap: 0.75rem;
    }

    .collage-main img {
        height: 240px;
    }

    .collage-sub img {
        height: 114px;
    }

    /* ── Feature list ─────────────────────────────────────── */
    .feature-list-modern {
        gap: 1.25rem;
    }

    /* ── Stat bars ────────────────────────────────────────── */
    .hero-stats-sidebar {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        gap: 0 !important;
        flex-wrap: nowrap;
        padding-left: 0;
        border-left: none;
        border-top: none;
        padding-top: 0;
    }

    .hero-stats-sidebar .stat-item,
    .hero-stats-sidebar .stat-sidebar-item {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        border-right: 1px solid rgba(255,255,255,0.15) !important;
        padding: 0 0.5rem !important;
    }

    .hero-stats-sidebar .stat-item:last-child,
    .hero-stats-sidebar .stat-sidebar-item:last-child {
        border-right: none !important;
    }

    .stat-number,
    .stat-sidebar-number {
        font-size: 1.5rem !important;
        font-weight: 800 !important;
    }

    .stat-label,
    .stat-sidebar-label {
        font-size: 0.6rem !important;
        text-align: center !important;
        margin-top: 0.2rem !important;
    }

    /* ── Footer ──────────────────────────────────────────── */
    .footer {
        padding-block: 2.5rem 2rem;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem 1.25rem;
    }

    .footer-links-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.25rem;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
    }

    .footer-policies {
        justify-content: center;
        gap: 1rem 1.5rem;
    }

    /* ── Generic inner service-page grids ────────────────── */
    .svc-features-grid,
    .capability-grid,
    .process-grid,
    .pillars-grid,
    .team-grid,
    .pricing-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    /* ── CTA banners ─────────────────────────────────────── */
    .cta-banner,
    .cta-section,
    [class*="cta-"] {
        border-radius: 16px !important;
        padding: 2.5rem 1.25rem !important;
        flex-direction: column !important;
        text-align: center !important;
        gap: 1.5rem !important;
    }

    /* ── Forms ───────────────────────────────────────────── */
    form,
    .form-row,
    .quote-form-row,
    .contact-form,
    .modal-form {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 1rem !important;
    }

    .form-group,
    .quote-form-group {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    input,
    select,
    textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ── Modals ──────────────────────────────────────────── */
    .modal-overlay,
    .pkg-modal-overlay {
        align-items: flex-start !important;
        padding: 0 !important;
    }

    .modal-content,
    .pkg-modal-content {
        max-height: 100dvh !important;
        height: 100dvh !important;
        border-radius: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: flex;
        flex-direction: column;
    }

    /* ── Glass panels / cards ────────────────────────────── */
    .glass-panel {
        padding: 1.5rem;
        border-radius: 16px;
    }

    /* ── Two-column inline grids → stack ─────────────────── */
    [class*="-row"],
    [class*="-cols"],
    [class*="two-col"],
    [class*="split-"] {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    /* ── Tables — allow horizontal scroll in a wrapper ────── */
    .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 12px;
    }

    /* ── Button block on mobile ──────────────────────────── */
    .btn-block-mobile {
        display: block;
        width: 100%;
        text-align: center;
    }

    /* ── Visibility helpers ──────────────────────────────── */
    .hide-mobile  { display: none !important; }
    .show-mobile  { display: block !important; }
}

/* ── 7. SMALL MOBILE  (≤ 480px) ──────────────────────────── */
@media (max-width: 480px) {

    .container {
        padding-inline: 1rem;
    }

    h1 { font-size: clamp(1.5rem, 8vw, 2.2rem); }
    h2 { font-size: clamp(1.2rem, 7vw, 1.8rem); }

    /* Hero CTA buttons — allow wrap but keep tap targets */
    .hero-actions .btn {
        padding: 0.7rem 0.75rem;
        font-size: 0.75rem;
    }

    /* Service cards compact */
    .service-card {
        min-height: 320px;
    }

    .service-card h3 {
        font-size: 1.05rem;
    }

    /* Footer single column */
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem;
    }

    .footer-col {
        text-align: center;
    }

    .footer-contact-item {
        justify-content: center;
    }

    .footer-col h4::after {
        left: 50%;
        transform: translateX(-50%);
    }

    /* Excellence badge */
    .excellence-badge {
        height: 60px;
        margin-bottom: 0.75rem;
    }

    /* Section header */
    .section-header {
        margin-bottom: 2rem !important;
    }

    /* Stat bar numbers tighter */
    .stat-number,
    .stat-sidebar-number {
        font-size: 1.25rem !important;
    }

    /* Collage on very small screens → single column */
    .collage-container {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .collage-main {
        grid-row: auto;
    }

    .collage-main img {
        height: 200px;
    }

    .collage-sub img {
        height: 150px;
    }

    /* Drawer width on tiny phones */
    .mobile-nav-drawer {
        width: 100% !important;
    }

    /* Visibility helpers */
    .hide-xs  { display: none !important; }
    .show-xs  { display: block !important; }
}

/* ── 8. SAFE PRINT ────────────────────────────────────────── */
@media print {
    .mobile-nav-overlay,
    .mobile-nav-drawer,
    .mobile-menu-btn,
    .top-bar-cta-mobile,
    .cta-banner,
    footer { display: none !important; }

    body   { background: #fff; color: #000; }
    .container { max-width: 100%; padding: 0; }
}