/* ==========================================================================
   Blueshore Technologies — Global Responsive Overrides
   Breakpoints: Mobile (<768), Tablet (768-1023), Desktop (1024+)
   
   IMPORTANT: Tailwind CDN injects styles at runtime AFTER this stylesheet.
   All responsive overrides MUST use !important to win the specificity war.
   ========================================================================== */

/* ==========================================================================
   Global Typography — Ensures consistent Inter font across all pages
   ========================================================================== */
html {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 16px !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.6;
}

/* ===== GLOBAL: Stats Strip — always a slim horizontal ribbon ===== */
#stats-strip {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

#stats-strip-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-around !important;
    width: 100% !important;
    gap: 0 !important;
}

#stats-strip-inner>div {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}

#stats-strip .stat-number,
#stats-strip .font-headline-lg {
    font-size: 32px !important;
    line-height: 1.15 !important;
}

#stats-strip .font-label-md,
#stats-strip .text-label-md {
    font-size: 12px !important;
    line-height: 16px !important;
}

/* ===== Featured Case Studies Carousel ===== */
.case-studies-carousel-shell {
    width: 100vw !important;
    max-width: none !important;
}

.caseStudiesSwiper .swiper-wrapper {
    align-items: stretch !important;
}

.caseStudiesSwiper .swiper-slide {
    height: auto !important;
    display: flex !important;
    min-width: 0 !important;
}

.caseStudiesSwiper .swiper-slide>div {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.caseStudiesSwiper .swiper-slide .p-8 {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
}

.caseStudiesSwiper .swiper-slide .p-8 p {
    flex: none !important;
}

.caseStudiesSwiper .swiper-slide a {
    margin-top: auto !important;
}

/* ===== GLOBAL: Expertise Cards — centre all content ===== */
.expertise-card {
    align-items: center !important;
    text-align: center !important;
}

/* Centre the icon box */
.expertise-card .expertise-icon {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Centre list items (Custom Software card) */
.expertise-card ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.expertise-card ul li {
    justify-content: center !important;
}

/* Centre the Growth card's inner text wrapper */
.expertise-card .relative.z-10.flex.flex-col.flex-1 {
    align-items: center !important;
    text-align: center !important;
}

/* Centre the "Explore Strategy" inline link */
.expertise-card .inline-flex {
    justify-content: center !important;
}

/* ===== GLOBAL: Global Presence Cards — centre all content ===== */
.global-presence-card {
    text-align: center !important;
    align-items: center !important;
}

.global-presence-card .material-symbols-outlined {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ===== FOOTER: Always dark for brand contrast ===== */
/* Footer background and text behavior is now handled by light-theme.css 
   and the base HTML classes to ensure high-contrast brand visibility. */


/* --- FOOTER: Global Dark Theme (Both light and dark modes) --- */

footer,
html.dark footer {
    background-color: #020813 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

footer>div[style*="radial-gradient"],
html.dark footer>div[style*="radial-gradient"] {
    opacity: 0.04 !important;
    background-image: radial-gradient(circle, #ffffff 1px, transparent 1px) !important;
}

footer .border-b,
html.dark footer .border-b {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

footer .text-white,
footer h2,
footer h4,
html.dark footer .text-white,
html.dark footer h2,
html.dark footer h4 {
    color: #ffffff !important;
}

footer .text-xl,
html.dark footer .text-xl {
    color: #ffffff !important;
}

footer .text-slate-400,
html.dark footer .text-slate-400 {
    color: #94a3b8 !important;
}

footer .text-slate-500,
html.dark footer .text-slate-500 {
    color: #64748b !important;
}

footer span:not(.material-symbols-outlined):not(.w-1) {
    color: #94a3b8;
}

footer ul li a,
html.dark footer ul li a {
    color: #94a3b8 !important;
}

/* ===== Mobile Menu Drawer ===== */
.mobile-menu-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 300px;
    max-width: 85vw;
    height: 100vh;
    height: 100dvh;
    background: #0a0f1e;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: -6px 0 40px rgba(0, 0, 0, 0.5);
    z-index: 70;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Curtain effect: reveal from right to left */
    clip-path: inset(0 0 0 100%);
    opacity: 0;
    transition: clip-path 0.45s cubic-bezier(0.77, 0, 0.175, 1),
        opacity 0.3s ease;
    display: flex;
    flex-direction: column;
}

.mobile-menu-drawer.active {
    clip-path: inset(0 0 0 0);
    opacity: 1;
}

.mobile-menu-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.mobile-menu-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu-close .material-symbols-outlined {
    font-size: 16px;
    line-height: 1;
    font-variation-settings: 'wght' 300;
}

.mobile-menu-close:hover {
    background: rgba(55,144,255, 0.08);
    border-color: rgba(55,144,255, 0.5);
    color: #3790ff;
    transform: rotate(90deg) scale(1.05);
    box-shadow: 0 0 10px rgba(55,144,255, 0.2);
}

/* Staggered fade-in for menu links when curtain reveals right→left */
.mobile-menu-drawer.active .mobile-menu-links a,
.mobile-menu-drawer.active .mobile-menu-links button {
    animation: curtainItemIn 0.35s ease both;
}

.mobile-menu-drawer.active .mobile-menu-links a:nth-child(1),
.mobile-menu-drawer.active .mobile-menu-links button:nth-child(1) {
    animation-delay: 0.18s;
}

.mobile-menu-drawer.active .mobile-menu-links a:nth-child(2),
.mobile-menu-drawer.active .mobile-menu-links button:nth-child(2) {
    animation-delay: 0.23s;
}

.mobile-menu-drawer.active .mobile-menu-links a:nth-child(3),
.mobile-menu-drawer.active .mobile-menu-links button:nth-child(3) {
    animation-delay: 0.28s;
}

.mobile-menu-drawer.active .mobile-menu-links a:nth-child(4),
.mobile-menu-drawer.active .mobile-menu-links button:nth-child(4) {
    animation-delay: 0.33s;
}

.mobile-menu-drawer.active .mobile-menu-links a:nth-child(5),
.mobile-menu-drawer.active .mobile-menu-links button:nth-child(5) {
    animation-delay: 0.38s;
}

.mobile-menu-drawer.active .mobile-menu-links a:nth-child(6),
.mobile-menu-drawer.active .mobile-menu-links button:nth-child(6) {
    animation-delay: 0.43s;
}

.mobile-menu-drawer.active .mobile-menu-links a:nth-child(7),
.mobile-menu-drawer.active .mobile-menu-links button:nth-child(7) {
    animation-delay: 0.48s;
}

.mobile-menu-drawer.active .mobile-menu-links a:nth-child(8),
.mobile-menu-drawer.active .mobile-menu-links button:nth-child(8) {
    animation-delay: 0.53s;
}

.mobile-menu-drawer.active .mobile-menu-links a:nth-child(9),
.mobile-menu-drawer.active .mobile-menu-links button:nth-child(9) {
    animation-delay: 0.58s;
}

@keyframes curtainItemIn {
    from {
        opacity: 0;
        transform: translateX(16px);
    }

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

.mobile-menu-links {
    padding: 16px 24px;
}

.mobile-menu-links a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 14px 0;
    color: #cbd5e1;
    font-size: 15px;
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s;
    text-align: left;
}

.mobile-menu-links button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 0;
    color: #cbd5e1;
    font-size: 15px;
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s;
    text-align: left;
}

.mobile-menu-links a:hover,
.mobile-menu-links button:hover {
    color: #3790ff;
}

/* Custom Row for Link + Chevron Button in Hamburger Menu */
.mobile-menu-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

html:not(.dark) .mobile-menu-row {
    border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

.mobile-menu-row a {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding: 14px 0 !important;
    color: #cbd5e1 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    border-bottom: none !important;
}

html:not(.dark) .mobile-menu-row a {
    color: #374151 !important;
}

.mobile-menu-row a:hover {
    color: #3790ff !important;
}

html:not(.dark) .mobile-menu-row a:hover {
    color: #3790ff !important;
}

.mobile-menu-row button {
    padding: 14px 0 14px 20px !important;
    color: #cbd5e1 !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-bottom: none !important;
}

html:not(.dark) .mobile-menu-row button {
    color: #374151 !important;
}

.mobile-menu-row button:hover {
    color: #3790ff !important;
}

html:not(.dark) .mobile-menu-row button:hover {
    color: #3790ff !important;
}

.mobile-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding-left: 16px;
}

.mobile-submenu.open {
    max-height: 500px;
}

.mobile-submenu a {
    padding: 10px 0;
    font-size: 14px;
    color: #94a3b8;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.mobile-submenu a:hover {
    color: #3790ff;
}

.mobile-menu-cta {
    padding: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: auto;
}

.mobile-menu-cta a {
    display: block;
    text-align: center;
    background: #3790ff;
    color: #030816;
    padding: 14px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0 0 15px rgba(55,144,255, 0.3);
}

.mobile-menu-cta a:hover {
    background: #5da2ff;
    transform: translateY(-1px);
}

.mobile-menu-cta .phone-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px;
    color: #cbd5e1;
    background: none;
    font-size: 14px;
    font-weight: 500;
}

/* Hamburger Button */
.hamburger-btn {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.hamburger-btn:hover {
    background: rgba(55,144,255, 0.1);
    border-color: #3790ff;
    color: #3790ff;
}

@media (max-width: 1023px) {
    .hamburger-btn {
        display: flex !important;
    }
}

/* ===== Hide desktop nav dropdowns on tablet/mobile ===== */
@media (max-width: 1023px) {
    nav .relative.group>div[class*="absolute"] {
        display: none !important;
    }
}

/* ===== Smooth scroll ===== */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}


/* ==========================================================================
   MOBILE STYLES (max-width: 767px)
   ========================================================================== */
@media (max-width: 767px) {

    /* --- Typography Scaling --- */
    .text-headline-display,
    .font-headline-display,
    [class*="text-headline-display"],
    [class*="font-headline-display"] {
        font-size: 30px !important;
        line-height: 38px !important;
    }

    .text-headline-lg,
    .font-headline-lg,
    [class*="text-headline-lg"],
    [class*="font-headline-lg"] {
        font-size: 26px !important;
        line-height: 34px !important;
    }

    .text-headline-md,
    .font-headline-md {
        font-size: 22px !important;
        line-height: 30px !important;
    }

    .text-headline-sm,
    .font-headline-sm {
        font-size: 18px !important;
        line-height: 26px !important;
    }

    .text-body-lg,
    .font-body-lg {
        font-size: 15px !important;
        line-height: 23px !important;
    }

    .text-5xl {
        font-size: 28px !important;
        line-height: 36px !important;
    }

    .text-4xl {
        font-size: 24px !important;
        line-height: 32px !important;
    }

    .text-3xl {
        font-size: 22px !important;
        line-height: 30px !important;
    }

    /* Hero title with hardcoded size */
    h1[class*="text-[60px]"],
    .text-\[60px\] {
        font-size: 24px !important;
        line-height: 30px !important;
    }

    .text-\[20px\] {
        font-size: 13.5px !important;
        line-height: 19px !important;
    }

    h1 br {
        display: none !important;
    }

    /* --- Outcome Cards Mobile Styles (Centered and Reduced Size) --- */
    .outcome-card {
        padding: 16px !important;
        border-radius: 12px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .outcome-card span {
        margin-bottom: 8px !important;
        font-size: 24px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .outcome-card h4 {
        font-size: 14px !important;
        line-height: 20px !important;
        margin-bottom: 4px !important;
    }

    .outcome-card p {
        font-size: 11px !important;
        line-height: 16px !important;
    }


    /* --- Section Spacing --- */
    section[class*="py-[120px]"],
    .py-\[120px\] {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    .py-24,
    .py-20 {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    .py-16 {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }

    .pt-20 {
        padding-top: 40px !important;
    }


    /* --- Container Padding: Kill px-8 (32px) on mobile → 16px --- */
    .px-8 {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    [class*="max-w-"][class*="px-8"],
    div[class*="max-w-[1280px]"],
    div[class*="max-w-7xl"],
    div[class*="max-w-[1400px]"],
    div[class*="max-w-[800px]"] {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }


    /* --- Navbar --- */
    nav[class*="fixed"]>div {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    nav .text-xl {
        font-size: 15px !important;
    }

    .theme-toggle-btn {
        width: 44px !important;
        height: 44px !important;
    }

    /* Hide "Let's Talk" and phone on mobile - hamburger handles it */
    nav .hidden.sm\:inline-block,
    nav .hidden.md\:flex {
        display: none !important;
    }


    /* --- Gap Overrides --- */
    .gap-20 {
        gap: 24px !important;
    }

    .gap-16 {
        gap: 24px !important;
    }

    .gap-12 {
        gap: 20px !important;
    }

    .gap-8 {
        gap: 16px !important;
    }

    .mb-20 {
        margin-bottom: 32px !important;
    }

    .mb-16 {
        margin-bottom: 28px !important;
    }

    .mb-12 {
        margin-bottom: 24px !important;
    }


    .ai-hero-full {
        height: 80dvh !important;
        min-height: 80dvh !important;
        max-height: 80dvh !important;
        padding-top: 80px !important;
        padding-bottom: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
    }
    .hero-enter-4 {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        gap: 8px !important;
    }

    .hero-enter-4 a {
        flex: 1 1 0% !important;
        width: auto !important;
        min-height: 42px !important;
        max-height: 46px !important;
        padding: 10px 4px !important;
        font-size: 10.5px !important;
        margin: 0 !important;
        border-radius: 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        letter-spacing: -0.02em !important;
    }


    /* --- Stats Strip: always a slim single-row ribbon --- */
    #stats-strip {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        height: 20dvh !important;
        min-height: 20dvh !important;
        max-height: 20dvh !important;
        display: flex !important;
        align-items: center !important;
        overflow: hidden !important;
    }

    /* Force all 4 stats into ONE horizontal row, never wrap */
    #stats-strip-inner {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-around !important;
        width: 100% !important;
        gap: 0 !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    #stats-strip-inner>div {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }

    /* Compact number & label sizes for slim strip */
    #stats-strip .stat-number,
    #stats-strip .font-headline-lg {
        font-size: 20px !important;
        line-height: 1.1 !important;
    }

    #stats-strip .font-label-md,
    #stats-strip .text-label-md {
        font-size: 9px !important;
        line-height: 13px !important;
        letter-spacing: 0.01em !important;
    }

    .robot-box {
        display: none !important;
    }

    .-mt-24 {
        margin-top: 0 !important;
    }

    section[class*="h-[600px]"],
    section.h-\[600px\] {
        height: auto !important;
        min-height: 350px !important;
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }

    section[class*="h-[400px]"],
    section.h-\[400px\] {
        height: auto !important;
        min-height: 250px !important;
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }

    .h-96 {
        height: 250px !important;
    }


    /* --- ALL GRIDS: Force single column on mobile --- */
    .grid[class*="md:grid-cols-2"],
    .grid[class*="md:grid-cols-3"],
    .grid[class*="md:grid-cols-4"],
    .grid[class*="lg:grid-cols-4"],
    .grid[class*="lg:grid-cols-5"],
    .grid[class*="lg:grid-cols-6"] {
        grid-template-columns: 1fr !important;
    }

    /* Stats grid: keep 2 columns */
    .grid.grid-cols-2[class*="md:grid-cols-4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Industries 6-col grid: 2 columns on mobile */
    .grid.grid-cols-2[class*="md:grid-cols-3"][class*="lg:grid-cols-6"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

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

    /* Force any col-span to span full width */
    [class*="md:col-span-2"],
    [class*="md:col-span-3"],
    [class*="md:col-span-4"],
    [class*="lg:col-span-2"] {
        grid-column: span 1 !important;
    }

    /* Bento grid: single column */
    .grid.grid-cols-1[class*="md:grid-cols-4"] {
        grid-template-columns: 1fr !important;
    }

    .grid.grid-cols-1[class*="md:grid-cols-4"]>[class*="md:col-span-2"] {
        grid-column: span 1 !important;
    }

    /* Inline form grid: stack vertically */
    form .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    /* 3-col stats (about page) */
    .grid.grid-cols-3 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
    }

    /* Flex layout for header sections (centered on mobile) */
    .flex.justify-between.items-end {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 12px !important;
    }

    .flex.justify-between.items-end .max-w-2xl {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* --- CTA / Process Section Centering on Mobile --- */
    .cta-process-content {
        text-align: center !important;
    }

    .cta-process-step {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 12px !important;
    }

    /* --- CTA Impact Card Sizing and Layout on Mobile --- */
    .cta-impact-card {
        padding: 24px 16px !important;
        border-radius: 16px !important;
    }

    .cta-impact-card .grid.grid-cols-3 {
        gap: 8px !important;
        margin-bottom: 24px !important;
    }

    .cta-impact-card .grid.grid-cols-3 > div {
        padding: 10px 4px !important;
        border-radius: 10px !important;
    }

    .cta-impact-card .grid.grid-cols-3 .text-3xl {
        font-size: 20px !important;
        line-height: 1.2 !important;
    }

    .cta-impact-card .grid.grid-cols-3 .text-xs {
        font-size: 9px !important;
        line-height: 12px !important;
        margin-top: 2px !important;
    }

    .cta-impact-card h3 {
        font-size: 16px !important;
        margin-bottom: 16px !important;
    }

    .cta-impact-card ul {
        margin-bottom: 24px !important;
        gap: 12px !important;
    }

    .cta-impact-card ul li span.text-sm {
        font-size: 12.5px !important;
        line-height: 18px !important;
    }

    .cta-impact-card a {
        padding: 12px 16px !important;
        font-size: 13.5px !important;
        border-radius: 10px !important;
    }

    .cta-impact-card .flex.items-center.justify-center.gap-6 {
        gap: 12px !important;
        margin-top: 16px !important;
        padding-top: 16px !important;
    }

    .cta-impact-card .flex.items-center.justify-center.gap-6 > div {
        gap: 4px !important;
    }

    .cta-impact-card .flex.items-center.justify-center.gap-6 span.text-xs {
        font-size: 10px !important;
    }


    /* Footer grid */
    footer .grid {
        grid-template-columns: 1fr !important;
    }

    footer [class*="lg:col-span-2"] {
        grid-column: span 1 !important;
    }

    footer .mb-16 {
        margin-bottom: 32px !important;
    }


    /* --- Padding Overrides --- */
    .p-10 {
        padding: 20px !important;
    }

    .p-12 {
        padding: 20px !important;
    }

    .p-16 {
        padding: 20px !important;
    }

    .p-8 {
        padding: 20px !important;
    }


    /* --- Featured Case Studies: uniform card sizing on mobile --- */
    .caseStudiesSwiper .swiper-slide {
        height: auto !important;
        min-width: 0 !important;
    }

    /* Every card inner wrapper fills 88vw of the slide and is centered */
    .caseStudiesSwiper .swiper-slide>div {
        width: 88vw !important;
        max-width: 310px !important;
        height: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Uniform image height */
    .caseStudiesSwiper .swiper-slide .h-64 {
        height: 150px !important;
    }

    /* Consistent card padding */
    .caseStudiesSwiper .swiper-slide .p-8 {
        padding: 16px !important;
    }

    /* Adjust font sizing & spacing for card body */
    .caseStudiesSwiper .swiper-slide h3 {
        font-size: 15px !important;
        line-height: 20px !important;
        margin-bottom: 6px !important;
    }

    .caseStudiesSwiper .swiper-slide .p-8 p {
        min-height: 48px !important;
        font-size: 11px !important;
        line-height: 15px !important;
        margin-bottom: 10px !important;
    }

    /* Stats grid */
    .caseStudiesSwiper .swiper-slide .grid.grid-cols-3 {
        padding: 8px !important;
        margin-bottom: 10px !important;
        gap: 4px !important;
    }

    .caseStudiesSwiper .swiper-slide .grid.grid-cols-3 .text-base {
        font-size: 13px !important;
    }

    .caseStudiesSwiper .swiper-slide .grid.grid-cols-3 .text-\[9px\] {
        font-size: 8px !important;
    }

    /* Strategy section list */
    .caseStudiesSwiper .swiper-slide .space-y-1 {
        margin-bottom: 14px !important;
    }

    .caseStudiesSwiper .swiper-slide .space-y-1 div {
        font-size: 10.5px !important;
        line-height: 14px !important;
    }

    .caseStudiesSwiper .swiper-slide .space-y-1 .font-semibold {
        font-size: 10px !important;
        margin-bottom: 4px !important;
    }

    /* Other swiper slides (non case-study) */
    .swiper-slide:not(.caseStudiesSwiper .swiper-slide) {
        width: 85vw !important;
        max-width: 320px !important;
    }


    /* --- Awards & Recognition: Grid Card Layout on Mobile --- */
    .awards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
        opacity: 1 !important;
    }

    .awards-grid > div {
        background: #131B2F !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 16px !important;
        padding: 24px 16px !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
    }

    :root:not(.dark) .awards-grid > div {
        background: #f8fafc !important;
        border: 1px solid rgba(0, 0, 0, 0.05) !important;
        box-shadow: 0 4px 20px rgba(0, 51, 102, 0.05) !important;
    }

    .awards-grid > div span {
        color: #3790ff !important;
        font-size: 40px !important;
        margin-bottom: 8px !important;
        text-shadow: 0 0 10px rgba(55,144,255, 0.2) !important;
    }

    .awards-grid > div div {
        font-size: 13px !important;
        line-height: 1.4 !important;
        font-weight: 600 !important;
        color: #f8fafc !important;
    }

    :root:not(.dark) .awards-grid > div div {
        color: #0f172a !important;
    }


    /* --- FAQ --- */
    details summary {
        font-size: 15px !important;
        padding: 14px !important;
    }

    details .px-6 {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /* --- Form Option Chips --- */
    .chip-item label {
        padding: 8px 16px !important;
        font-size: 13px !important;
    }


    /* --- WhatsApp Button --- */
    a[href*="wa.me"] {
        width: 48px !important;
        height: 48px !important;
        bottom: 80px !important;
        right: 16px !important;
    }

    a[href*="wa.me"] svg {
        width: 24px !important;
        height: 24px !important;
    }

    /* Hide tooltip on mobile */
    a[href*="wa.me"] span {
        display: none !important;
    }

    /* --- AI Agent Toggle Button --- */
    #ai-agent-toggle-btn {
        width: 48px !important;
        height: 48px !important;
        bottom: 16px !important;
        right: 16px !important;
    }

    #ai-agent-toggle-btn span.material-symbols-outlined {
        font-size: 20px !important;
    }

    /* --- AI Chat Window --- */
    .ai-chat-window {
        bottom: 80px !important;
        right: 16px !important;
        max-width: calc(100vw - 32px) !important;
        max-height: calc(100vh - 110px) !important;
        border-radius: 16px !important;
    }


    /* --- Aspect Ratio Images --- */
    .aspect-square {
        aspect-ratio: 4/3 !important;
    }

    .aspect-\[4\/5\] {
        aspect-ratio: 1/1 !important;
    }


    /* --- About page quote overlay --- */
    .absolute.-bottom-10.-left-10 {
        display: none !important;
    }

    /* Mission section blockquote */
    blockquote[class*="font-headline-md"] {
        font-size: 20px !important;
        line-height: 30px !important;
    }


    /* --- Hero CTA buttons: perfectly centred on mobile --- */
    .flex.flex-nowrap.items-stretch.gap-3 a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 0 10px !important;
        font-size: 11px !important;
        min-height: 40px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .flex.flex-wrap.gap-4 a {
        width: auto !important;
        padding: 8px 18px !important;
        font-size: 13px !important;
        min-height: 38px !important;
        line-height: 1.2 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .flex.flex-col.sm\:flex-row a,
    .flex.flex-col.sm\:flex-row button {
        width: 100% !important;
        text-align: center !important;
    }

    /* Bottom footer bar */
    footer .flex.flex-col.md\:flex-row {
        text-align: center !important;
    }

    footer .flex-wrap {
        gap: 12px !important;
        justify-content: center !important;
    }

    /* Careers page hero image */
    .relative.h-96 {
        height: 200px !important;
    }

    /* Contact page */
    .grid[class*="md:grid-cols-2"][class*="gap-16"] {
        gap: 24px !important;
    }

    /* --- Section overflow containment --- */
    section {
        overflow-x: hidden !important;
    }

    .overflow-visible {
        overflow: hidden !important;
    }

    .swiper {
        overflow: hidden !important;
    }

    /* --- Contain max-width elements --- */
    .max-w-2xl,
    .max-w-3xl,
    .max-w-4xl,
    .max-w-md {
        max-width: 100% !important;
    }

    .w-\[600px\] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Footer bottom bar direction */
    footer .flex.flex-col.md\:flex-row {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 20px !important;
    }

    footer .flex-wrap {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
    }

    footer .grid {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }

    footer .flex.gap-4 {
        justify-content: center !important;
        margin: 0 auto 24px !important;
        width: fit-content !important;
    }

    footer .max-w-md {
        margin: 0 auto 24px !important;
        text-align: center !important;
    }

    /* Industry & Awards Grids: Force single column on mobile */
    .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-6,
    .grid.grid-cols-2.md\:grid-cols-4.items-center {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}


/* ==========================================================================
   TABLET STYLES (768px - 1023px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {

    /* --- Typography --- */
    .text-headline-display,
    .font-headline-display {
        font-size: 42px !important;
        line-height: 50px !important;
    }

    .text-headline-lg,
    .font-headline-lg {
        font-size: 34px !important;
        line-height: 42px !important;
    }

    h1[class*="text-[60px]"],
    .text-\[60px\] {
        font-size: 42px !important;
        line-height: 50px !important;
    }


    /* --- Section Spacing --- */
    section[class*="py-[120px]"],
    .py-\[120px\] {
        padding-top: 64px !important;
        padding-bottom: 64px !important;
    }


    /* --- Hero --- */
    .ai-hero-full {
        min-height: auto !important;
        padding: 100px 0 80px !important;
    }

    section[class*="h-[600px]"],
    section.h-\[600px\] {
        height: auto !important;
        min-height: 450px !important;
    }

    section[class*="h-[400px]"],
    section.h-\[400px\] {
        height: auto !important;
        min-height: 300px !important;
    }


    /* --- Grids: 2-column on tablet --- */
    .grid[class*="md:grid-cols-4"],
    .grid[class*="lg:grid-cols-5"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .grid[class*="lg:grid-cols-6"] {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Force col-spans to behave */
    [class*="md:col-span-2"] {
        grid-column: span 2 !important;
    }

    /* Bento grid on tablet */
    .grid.grid-cols-1[class*="md:grid-cols-4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}


/* ==========================================================================
   TOUCH-FRIENDLY TAP TARGETS
   ========================================================================== */
@media (max-width: 1023px) {

    a,
    button {
        min-height: 44px;
        min-width: 44px;
    }

    /* Exceptions for inline links */
    p a,
    li a,
    span a,
    .mobile-submenu a,
    .mobile-menu-links a,
    footer a,
    footer .flex-wrap a {
        min-height: auto;
        min-width: auto;
    }
}


/* ==========================================================================
   PRINT STYLES
   ========================================================================== */
@media print {

    nav,
    footer,
    .hamburger-btn,
    a[href*="wa.me"] {
        display: none !important;
    }

    body {
        background: white !important;
        color: black !important;
    }
}

/* ==========================================================================
   GLOBAL MOBILE RESPONSIVENESS (FALLBACK & OVERRIDES)
   ========================================================================== */
@media (max-width: 767px) {
    .hero-enter-4 {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        gap: 8px !important;
    }
    .hero-enter-4::-webkit-scrollbar {
        display: none !important;
    }
    .hero-enter-4 a {
        flex: 1 1 0% !important;
        width: auto !important;
        min-height: 42px !important;
        max-height: 46px !important;
        padding: 10px 4px !important;
        font-size: 10.5px !important;
        margin: 0 !important;
        border-radius: 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        letter-spacing: -0.02em !important;
    }

    /* Prevent horizontal scrolling globally */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* Ensure responsive images and media */
    img, video, canvas, svg {
        max-width: 100%;
        height: auto;
    }

    /* Override large fixed widths that break mobile view */
    .w-\[600px\], .w-\[500px\], .w-\[450px\], .w-\[400px\], .w-\[800px\] {
        max-width: 100% !important;
    }

    /* Force generic grids to stack if they don't have md: prefix */
    .grid-cols-4, .grid-cols-5, .grid-cols-6 {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    /* Text wrapping to prevent overflow */
    p, h1, h2, h3, h4, h5, h6, a, span, div {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Reduce huge paddings on mobile */
    .py-\[120px\] {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }
    .py-24 {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    /* Reduce display text sizes for smaller screens */
    .text-headline-display, .font-headline-display {
        font-size: 36px !important;
        line-height: 44px !important;
    }
    .text-headline-lg, .font-headline-lg {
        font-size: 28px !important;
        line-height: 36px !important;
    }
    .text-5xl {
        font-size: 32px !important;
        line-height: 40px !important;
    }

    /* ---- Case Studies Carousel: center cards on mobile ---- */
    .case-studies-carousel-shell {
        width: 100% !important;
        max-width: 100% !important;
        left: auto !important;
        transform: none !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .caseStudiesSwiper {
        overflow: hidden !important;
        padding: 0 !important;
    }
    .caseStudiesSwiper .swiper-slide {
        height: auto !important;
        min-width: 0 !important;
        display: flex !important;
    }
    .caseStudiesSwiper .swiper-slide>div {
        width: 95% !important;
        max-width: 450px !important;
        height: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .case-studies-prev,
    .case-studies-next {
        display: none !important;
    }

    /* ---- Contact Page: center steps & info on mobile ---- */

    /* "What happens after you reach out" steps */
    .step-num {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Contact split section — stack and center on mobile */
    [class*="lg:grid-cols-"][class*="items-start"] > .space-y-6 {
        text-align: center !important;
    }
    [class*="lg:grid-cols-"][class*="items-start"] > .space-y-6 .mb-2 {
        text-align: center !important;
    }
    [class*="lg:grid-cols-"][class*="items-start"] > .space-y-6 .mb-2 p,
    [class*="lg:grid-cols-"][class*="items-start"] > .space-y-6 .mb-2 h2 {
        text-align: center !important;
    }

    /* Info cards (Global Offices / Office Hours) — stack and center */
    .gb-card {
        text-align: center !important;
    }
    .gb-card .gb-card-inner {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* Contact methods list — center content */
    .contact-list-row {
        justify-content: center !important;
    }

    /* Response badge (Online Now) — center */

    /* ---- Contact Page: center steps & info on mobile ---- */

    /* "What happens after you reach out" steps */
    .step-num {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Contact split section — stack and center on mobile */
    [class*="lg:grid-cols-"][class*="items-start"] > .space-y-6 {
        text-align: center !important;
    }
    [class*="lg:grid-cols-"][class*="items-start"] > .space-y-6 .mb-2 {
        text-align: center !important;
    }
    [class*="lg:grid-cols-"][class*="items-start"] > .space-y-6 .mb-2 p,
    [class*="lg:grid-cols-"][class*="items-start"] > .space-y-6 .mb-2 h2 {
        text-align: center !important;
    }

    /* Info cards (Global Offices / Office Hours) — stack and center */
    .gb-card {
        text-align: center !important;
    }
    .gb-card .gb-card-inner {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* Contact methods list — center content */
    .contact-list-row {
        justify-content: center !important;
    }

    /* Response badge (Online Now) — center */
    .response-badge {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* ---- Contact Page Hero: let banner grow to fit content ---- */
    .ai-hero-full {
        min-height: auto !important;
        height: auto !important;
        padding-top: 100px !important;
        padding-bottom: 60px !important;
    }
    .ai-hero-full h1 {
        font-size: 36px !important;
        line-height: 1.12 !important;
    }

    /* Core Expertise Card styling on mobile */
    .expertise-card {
        padding: 24px !important;
        min-height: 200px !important;
        border-radius: 12px !important;
    }
    .expertise-card .expertise-icon {
        margin-bottom: 12px !important;
        font-size: 28px !important;
    }
    .expertise-card h3 {
        font-size: 20px !important;
        line-height: 26px !important;
        margin-bottom: 8px !important;
    }
    .expertise-card p {
        font-size: 14px !important;
        line-height: 20px !important;
    }
}

/* ==========================================================================
   EXTRA RESPONSIVE OPTIMIZATIONS (ALL DEVICES & OSs)
   ========================================================================== */

/* --- 1. Global Reset & Zero-Overflow Assurance --- */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    position: relative !important;
}

/* Prevent text overflow breaking */
p, h1, h2, h3, h4, h5, h6, a, span, li, button, blockquote {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* Ensure absolute glows, overlays, or images do not bleed outside viewport */
.absolute, .img-glow, [class*="glow"], [class*="bg-radial"] {
    max-width: 100vw !important;
}

/* --- 2. Ultra-Narrow Devices & Foldables (<360px down to 280px, e.g. Galaxy Fold) --- */
@media (max-width: 360px) {
    .px-8, .px-6, .px-4,
    [class*="px-8"], [class*="px-6"], [class*="px-4"] {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    .py-24, .py-20, .py-16, .py-12,
    [class*="py-24"], [class*="py-20"], [class*="py-16"], [class*="py-12"] {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }
    
    .gap-8, .gap-6, .gap-4,
    [class*="gap-8"], [class*="gap-6"], [class*="gap-4"] {
        gap: 12px !important;
    }
    
    /* Typographic Down-scaling */
    h1, .text-headline-display, .text-5xl, .text-\[60px\],
    [class*="text-headline-display"], [class*="text-5xl"], [class*="text-\[60px\]"] {
        font-size: 22px !important;
        line-height: 28px !important;
    }
    
    h2, .text-headline-lg, .text-4xl,
    [class*="text-headline-lg"], [class*="text-4xl"] {
        font-size: 19px !important;
        line-height: 25px !important;
    }

    h3, .text-headline-md, .text-3xl,
    [class*="text-headline-md"], [class*="text-3xl"] {
        font-size: 17px !important;
        line-height: 23px !important;
    }
    
    p, .text-body-lg, [class*="text-body-lg"] {
        font-size: 13.5px !important;
        line-height: 19px !important;
    }
    
    /* Foldable stats stack */
    #stats-strip {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        padding: 16px 0 !important;
    }
    
    #stats-strip-inner {
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    #stats-strip .stat-number {
        font-size: 26px !important;
    }
    
    #stats-strip .font-label-md {
        font-size: 11px !important;
        line-height: 14px !important;
    }

    /* Primary CTAs button adjustments */
    .flex.flex-nowrap.items-stretch.gap-3 a {
        font-size: 10px !important;
        padding: 0 8px !important;
        min-height: 36px !important;
    }
}

/* --- 3. Ultra-Wide Screens & 4K Monitors (>= 1440px - 4K Displays) --- */
@media (min-width: 1440px) {
    .max-w-\[1280px\], .max-w-7xl, [class*="max-w-\[1280px\]"], [class*="max-w-7xl"] {
        max-width: 1320px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .max-w-\[1400px\], [class*="max-w-\[1400px\]"] {
        max-width: 1440px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* Keep all large grids beautifully aligned */
    section > div {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* --- 4. Custom Why Blueshore Section Centering (<1024px) --- */
@media (max-width: 1023px) {
    .why-blueshore-copy {
        text-align: center !important;
    }
    .why-blueshore-copy h2,
    .why-blueshore-copy p {
        text-align: center !important;
    }
    .why-blueshore-copy p.italic {
        border-left: none !important;
        padding-left: 0 !important;
    }
}

/* --- 5. Mobile heading sizing to prevent text clipping --- */
@media (max-width: 767px) {
    .why-blueshore-copy h2 {
        font-size: 26px !important;
        line-height: 1.3 !important;
        letter-spacing: -0.02em !important;
    }
}
@media (max-width: 480px) {
    .why-blueshore-copy h2 {
        font-size: 21px !important;
        line-height: 1.3 !important;
        letter-spacing: -0.03em !important;
    }
}