/* =========================================
   GLOBAL RESPONSIVE ALIGNMENT UTILITY
   Enforces left alignment across mobile devices
   ========================================= */

@media (max-width: 992px) {

    /* --- 1. Typography Forces --- */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    .section-title,
    .section-heading-premium,
    .heading-title-large,
    .heading-subtitle,
    .hero-title,
    .hero-desc,
    .about-title-giant,
    .service-text h5,
    .service-text p,
    .cert-title-dynamic,
    .cert-desc-dynamic,
    .text-center,
    .text-lg-start,
    .c-title {
        text-align: left !important;
    }

    /* --- 2. Flex Container Re-alignment --- */
    /* Forces flex containers that justify-center to start */
    .d-flex.justify-content-center,
    .hero-actions,
    .hero-stats,
    .hero-tagline,
    .hero-designation,
    .heading-footer,
    .cert-slide-actions,
    .cert-nav-controls,
    .about-status-row,
    .section-heading-premium.text-center,
    .row.justify-content-center {
        justify-content: flex-start !important;
        text-align: left !important;
    }

    /* Align items to start for column flex layouts */
    .d-flex.flex-column.align-items-center,
    .hero-services-right,
    .about-content-left {
        align-items: flex-start !important;
    }

    /* --- 3. Decorative Elements --- */
    /* Underlines */
    .section-title::after {
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    /* --- 4. Container Padding --- */
    /* Ensure breathing room on the left since we are left-aligning */
    .container,
    .container-hero,
    .container-wide {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    /* --- 5. Component Specifics --- */

    /* Hero Section */
    .home-hero-redesign {
        text-align: left !important;
        align-items: flex-start !important;
        /* Top align */
    }

    .hero-image-center {
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    /* Cert Slider */
    .cert-slide-grid {
        text-align: left !important;
        justify-items: start !important;
    }

    .cert-visual-col {
        justify-content: flex-start !important;
    }

    /* Services */
    .service-item {
        text-align: left !important;
    }
}

@media (max-width: 768px) {

    /* Mobile Extra Tweaks */
    .hero-stats {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        /* Grid is better than flex-start wrap sometimes */
        gap: 20px !important;
    }

    .hero-actions {
        flex-direction: column !important;
        width: 100%;
    }

    .hero-actions .btn {
        width: 100%;
        /* Keep button text centered for aesthetics even if page is left aligned */
        justify-content: center !important;
    }

    .cert-slide-actions {
        align-items: flex-start !important;
    }

    .cert-nav-controls {
        justify-content: flex-start !important;
    }

    /* Ensure images don't overflow layout when left aligned */
    img {
        max-width: 100%;
        height: auto;
    }
}

/* =========================================
   EXTRACTED FROM CERT-SLIDER.CSS
   ========================================= */
@media (min-width: 1024px) {
    .cert-slide-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
        padding: 50px;
        min-height: 550px;
        background: var(--liquid-glass);
        background-color: var(--secondary-bg);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: var(--border-radius-lg);
        box-shadow: var(--box-shadow), inset 0 0 100px rgba(0, 0, 0, 0.5);
        position: relative;
        overflow: hidden;
    }

    .cert-slide-grid::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -20%;
        width: 60%;
        height: 150%;
        background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
        opacity: 0.15;
        z-index: -1;
        transform: rotate(15deg);
        pointer-events: none;
    }
}

@media (max-width: 1023px) {
    .cert-slide-grid {
        display: flex;
        flex-direction: column;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        min-height: auto;
    }

    .cert-slide-grid::before {
        display: none;
    }

    .cert-visual-col {
        order: 1;
        margin-bottom: 30px;
        perspective: none;
    }

    .cert-img-wrapper {
        transform: none !important;
        aspect-ratio: 16/9;
    }

    .cert-details-col {
        order: 2;
        padding: 0;
    }

    .cert-title-dynamic {
        font-size: 2.2rem;
        margin-bottom: 20px;
    }

    .cert-desc-dynamic {
        font-size: 1rem;
        margin-bottom: 25px;
    }

    .cert-slide-actions {
        flex-direction: column;
        gap: 20px;
        align-items: stretch;
    }

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

    .cert-nav-controls {
        width: 100%;
        justify-content: center;
    }

    .nav-arrow {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 480px) {
    .featured-badge-overlay {
        right: 15px;
        bottom: 15px;
        padding: 10px;
    }

    .featured-badge-overlay img {
        width: 50px;
        height: 50px;
    }

    .badge-verify-label {
        font-size: 0.6rem;
    }

    .cert-title-dynamic {
        font-size: 2rem;
    }

    .cert-provider-tag {
        margin-bottom: 15px;
    }
}

/* =========================================
   EXTRACTED FROM FOOTER.CSS
   ========================================= */
@media (min-width: 992px) {
    .footer-hero-new {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    .hero-details-left {
        flex: 0 0 450px;
    }

    .hero-cta-right {
        flex: 1;
        text-align: right;
    }

    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
    }
}

@media (min-width: 576px) {
    .stats-cards-mini-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 768px) {
    .footer-grid-main {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .footer-grid-main {
        grid-template-columns: 300px 1fr 1fr 1fr 1fr;
        gap: 50px;
    }
}

@media (max-width: 768px) {
    .hero-cta-right {
        text-align: left;
    }

    .hero-heading-right {
        text-align: left;
        font-size: 3rem;
    }

    .container-premium {
        padding: 0 20px;
    }

    .footer-center-actions {
        flex-direction: column;
        gap: 40px;
    }

    .action-divider {
        display: none;
    }

    .footer-grid-main {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 20px;
    }

    .brand-col {
        grid-column: 1 / -1;
    }
}

/* =========================================
   EXTRACTED FROM NAV.CSS
   ========================================= */
@media (min-width: 992px) {
    .mega-menu {
        position: absolute;
        /* Anchored to .navbar .container as positioning parent */
        top: calc(100% + 14px);
        left: 0;
        right: 0;
        width: auto;
        /* Use solid background, remove costly backdrop-filter blur */
        background: rgba(20, 20, 23, 0.98);
        border: 1px solid var(--mega-border);
        border-radius: var(--mega-radius);
        display: block;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.2s ease, visibility 0.2s;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
        z-index: 1100;
        overflow: hidden;
        /* Remove the transform scale/translate for opening, just fade in/out for better performance */
        will-change: opacity, visibility;
    }

    /* Multi-layer Animated Glow Effect */
    .mega-menu-glow {
        position: absolute;
        top: -60%;
        left: -25%;
        width: 70%;
        height: 220%;
        background: radial-gradient(ellipse at center, rgba(255, 87, 87, 0.12) 0%, transparent 65%);
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.6s ease;
        animation: glowPulse 4s ease-in-out infinite;
        will-change: transform;
    }

    .mega-menu::before {
        content: '';
        position: absolute;
        top: 0;
        right: -30%;
        width: 50%;
        height: 100%;
        background: radial-gradient(ellipse at center, rgba(255, 138, 138, 0.06) 0%, transparent 70%);
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.6s ease 0.1s;
    }

    .has-mega-menu:hover .mega-menu-glow,
    .has-mega-menu:hover .mega-menu::before {
        opacity: 1;
    }

    @keyframes glowPulse {

        0%,
        100% {
            transform: scale(1) translateX(0);
        }

        50% {
            transform: scale(1.05) translateX(10px);
        }
    }

    .mega-menu-inner {
        position: relative;
        z-index: 1;
        padding: 1.75rem 2rem;
    }

    .has-mega-menu:hover .mega-menu,
    .has-mega-menu.locked .mega-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .has-mega-menu.locked .fa-chevron-down {
        transform: rotate(180deg) translateY(2px);
        color: #ff5757;
    }

    .has-mega-menu>.nav-link {
        position: relative;
    }

    .has-mega-menu>.nav-link::after {
        content: '';
        position: absolute;
        bottom: -25px;
        /* Bridge the gap between navbar and mega menu */
        left: 0;
        right: 0;
        height: 30px;
        background: transparent;
        z-index: 10;
        pointer-events: auto;
    }

    .has-mega-menu:hover .fa-chevron-down {
        transform: rotate(180deg) translateY(2px);
        color: #ff5757;
    }

    .has-mega-menu .fa-chevron-down {
        display: inline-block;
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        pointer-events: none;
    }
}

@media (max-width: 991px) {
    .navbar-collapse {
        background: rgba(12, 12, 15, 0.98);
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px);
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        padding: 1.75rem;
        max-height: 85vh;
        overflow-y: auto;
        overflow-x: hidden;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6);
        border-radius: 0 0 28px 28px;
        margin-top: 10px;
    }

    .navbar-nav {
        padding-bottom: 0.5rem;
    }

    .mobile-nav-contact-wrap {
        position: sticky;
        bottom: -1.75rem;
        margin-left: -1.75rem;
        margin-right: -1.75rem;
        margin-bottom: -1.75rem;
        padding: 1.25rem 1.75rem 1.75rem 1.75rem;
        background: rgba(12, 12, 15, 0.98);
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px);
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        z-index: 100;
        box-shadow: 0 -15px 30px -10px rgba(0, 0, 0, 0.6);
        border-radius: 0 0 28px 28px;
    }

    .mobile-nav-contact-wrap .btn-cyber {
        width: 100%;
        display: block;
        text-align: center;
    }

    .nav-item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        padding: 0.85rem 0;
    }

    .nav-item:last-child {
        border-bottom: none;
    }

    .mega-menu {
        position: static;
        visibility: visible;
        opacity: 1;
        transform: none;
        width: 100%;
        background: transparent;
        border: none;
        padding: 0;
        box-shadow: none;
        display: none;
        margin-top: 1.15rem;
        padding-left: 0;
    }

    .mega-menu.mega-menu-blogs,
    .mega-menu.mega-menu-projects {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .mega-menu-glow {
        display: none;
    }

    .mega-menu-inner {
        padding: 0;
    }

    .mega-menu.active {
        display: block;
        animation: mobileSlideDown 0.4s ease-out;
    }

    @keyframes mobileSlideDown {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }

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

    .mega-menu-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.15rem;
        padding-bottom: 1.15rem;
        margin-bottom: 1.15rem;
    }

    .mega-menu-header::after {
        display: none;
    }

    .mega-view-all-btn {
        width: 100%;
        justify-content: center;
    }

    .mega-projects-grid {
        grid-template-columns: 1fr;
        gap: 1.15rem;
    }

    .mega-card-image {
        height: 150px;
    }

    .mega-stats-card {
        margin-top: 1.15rem;
    }

    .mega-stats-grid {
        flex-direction: row;
        justify-content: space-around;
        flex-wrap: wrap;
    }

    .mega-stat-item {
        flex-direction: column;
        text-align: center;
        gap: 0.3rem;
        border-bottom: none;
        padding: 0.5rem 1rem;
    }

    .mega-stat-number {
        min-width: auto;
    }

    .mega-blogs-layout {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .mega-categories-panel {
        background: transparent;
        border-right: none;
        border-bottom: 1px solid var(--mega-border);
        padding: 1.15rem 0;
        margin-bottom: 1.15rem;
    }

    .mega-categories-panel::before {
        display: none;
    }

    .mega-category-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.6rem;
    }

    .mega-category-item {
        flex: 0 0 calc(50% - 0.3rem);
        padding: 0.85rem;
        justify-content: center;
    }

    .mega-category-item::before,
    .mega-category-item::after {
        display: none;
    }

    .mega-category-info {
        display: none;
    }

    .mega-category-icon {
        margin: 0;
    }

    .mega-category-arrow {
        display: none;
    }

    .mega-panel-cta {
        margin-top: 1rem;
    }

    .mega-posts-panel {
        padding: 0;
    }

    .mega-posts-grid {
        grid-template-columns: 1fr;
        gap: 1.15rem;
    }

    .mega-blog-image {
        height: 140px;
    }

    .mega-blog-card.mega-blog-featured .mega-blog-image {
        height: 140px;
    }

    .nav-link[aria-expanded="true"] .fa-chevron-down {
        transform: rotate(180deg);
    }
}

@media (max-width: 576px) {
    .navbar .container {
        padding: 12px 24px;
        width: 100%;
        border-radius: 90px;
    }

    .mega-category-item {
        flex: 0 0 calc(50% - 0.3rem);
    }
}

@media (max-width: 991px) {
    .blog-mega-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }

    .blog-mega-header::after {
        display: none;
    }

    .blog-stats-mini {
        width: 100%;
        justify-content: flex-start;
    }

    .blog-mega-layout {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .blog-featured-hero {
        height: 280px;
    }

    .blog-hero-content {
        padding: 1.25rem;
    }

    .blog-hero-title {
        font-size: 1.15rem;
    }

    .blog-hero-excerpt,
    .blog-featured-hero {
        display: none;
        /* Simplify mobile view by hiding the large hero card */
    }

    .blog-category-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem;
        padding-bottom: 0.5rem;
    }

    .category-pill {
        flex-shrink: 0;
        padding: 0.6rem 1rem;
        font-size: 0.8rem;
        border-radius: 8px;
        /* Boxier feel for better tapping */
        background: rgba(255, 255, 255, 0.05);
        /* Slight contrast background */
    }

    .category-pill span {
        display: inline;
        /* Re-enable text to be shown */
        margin-left: 0.4rem;
    }

    .blog-list-item {
        padding: 0.85rem;
    }

    .blog-item-number {
        display: none;
        /* Hide large numbers on mobile for a cleaner list */
    }

    .blog-item-content h5 {
        font-size: 0.95rem;
        /* Slightly larger text for mobile readability */
        margin-bottom: 0.2rem;
        white-space: normal;
        /* Allow text to wrap on small screens instead of truncating */
    }

    .blog-item-meta {
        font-size: 0.75rem;
    }

    .blog-item-arrow {
        display: none;
    }

    .blog-view-all-cta {
        padding: 0.85rem 1rem;
    }
}

/* =========================================
   EXTRACTED FROM INDEX.CSS
   ========================================= */

@media (max-width: 1200px) {
    .container-hero {
        max-width: 95%;
    }

    .hero-title {
        font-size: clamp(3rem, 6vw, 4.5rem);
    }
}

@media (max-width: 992px) {
    .home-hero-redesign {
        padding: 120px 0 80px;
        text-align: center;
    }

    .hero-tagline,
    .hero-designation,
    .hero-actions,
    .hero-stats {
        justify-content: center;
    }

    .hero-title,
    .hero-desc {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .hero-image-center {
        margin: 60px 0;
        order: -1;
    }

    .hero-services-right {
        margin-top: 60px;
        gap: 30px;
    }

    .service-item {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding: 30px 15px;
        background: rgba(255, 255, 255, 0.02);
        border-radius: 20px;
    }

    .service-item:hover {
        transform: translateY(-5px);
        border-top-color: var(--accent-color);
    }

    .service-text h5,
    .service-text p {
        text-align: center;
    }

    /* Fix letter-spacing for About section headings */
    .about-title-giant {
        letter-spacing: -2px;
    }

    .section-title-premium {
        letter-spacing: -2px;
    }
}

@media (max-width: 768px) {
    .home-hero-redesign {
        padding-top: 40px;
        align-items: flex-start !important;
    }

    .hero-title {
        font-size: 3.2rem;
        letter-spacing: -0.5px;
        word-spacing: 5px;
        line-height: 1.1;
    }

    .hero-stats {
        gap: 40px;
    }

    /* Fix letter-spacing for About section headings on mobile */
    .about-title-giant {
        letter-spacing: -1px;
    }

    .section-title-premium {
        letter-spacing: -1px;
    }

    .hero-services-right {
        display: none !important;
    }

    .stat-num {
        font-size: 3rem;
    }

    .floating-ui {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }

    .ui-1 {
        left: 10%;
        top: 10%;
    }

    .hero-image-center {
        margin: 30px 0;
        /* Reduced from 60px */
        order: -1;
    }

    .hero-image-pod {
        width: 280px;
        height: 360px;
        margin: 0 auto;
    }

    .ui-2 {
        right: 10%;
        bottom: 20%;
    }
}

@media (max-width: 576px) {
    .hero-title {
        font-size: 2.6rem;
        line-height: 1.1;
        margin-bottom: 25px;
        letter-spacing: -0.5px;
        word-spacing: 5px;
    }

    .hero-desc {
        font-size: 1rem;
        padding: 0 10px;
        margin-bottom: 40px;
    }

    .hero-actions {
        flex-direction: column;
        gap: 15px;
        width: 100%;
    }

    .hero-actions .btn {
        width: 100%;
        justify-content: center;
        padding: 18px 30px;
    }

    .hero-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        width: 100%;
        padding: 0 20px;
    }

    .stat-num {
        font-size: 2.2rem;
    }

    .stat-label {
        font-size: 0.65rem;
    }

    .hero-designation {
        gap: 8px;
    }

    .designation-box {
        padding: 8px 14px;
    }

    .d-text {
        font-size: 0.7rem;
    }

    .image-wrapper {
        max-width: 320px;
        margin: 0 auto;
    }
}

@media (max-width: 380px) {
    .hero-title {
        font-size: 2.2rem;
    }

    .hero-stats {
        gap: 15px;
    }

    .stat-num {
        font-size: 1.8rem;
    }

    .btn {
        font-size: 0.8rem;
        padding: 15px 20px !important;
    }

    .floating-ui {
        display: none;
    }
}

/* About V2 Specifics */
@media (max-width: 1200px) {
    .about-content-left {
        padding-right: 0;
    }

    .about-title-giant {
        font-size: clamp(3rem, 6vw, 4.5rem);
    }

    .about-trust-row {
        gap: 20px;
    }

    .trust-pod {
        padding: 25px;
    }
}

@media (max-width: 991px) {
    .about-title-giant {
        text-align: center;
        margin-bottom: 30px;
    }

    .about-status-row {
        flex-direction: column;
        gap: 15px;
        align-items: center;
        margin-bottom: 25px;
    }

    .about-tags-wrapper,
    .about-actions-v2,
    .about-trust-row {
        justify-content: center;
    }

    .about-narrative-box {
        margin: 0 auto 40px;
        text-align: center;
    }

    .about-narrative-box p {
        text-align: center;
        font-size: 1.1rem;
    }

    .about-visual-v2 {
        margin-top: 60px;
    }

    .shape-inner {
        max-width: 550px;
        margin: 0 auto;
    }

    .about-status-footer {
        margin-top: 40px;
    }
}

@media (max-width: 768px) {
    .about-trust-row {
        flex-direction: column;
        align-items: center;
    }

    .trust-pod {
        width: 100%;
        max-width: 450px;
        text-align: center;
    }

    .review-top {
        justify-content: center;
    }

    .review-bottom {
        flex-direction: column;
        gap: 10px;
    }

    .avatar-stack {
        justify-content: center;
    }

    .about-title-giant {
        font-size: 3.5rem;
        letter-spacing: -2px;
    }
}

@media (max-width: 576px) {
    .home-about-section {
        padding: 100px 0;
    }

    .about-title-giant {
        font-size: 2.5rem;
        line-height: 1.1;
        margin-bottom: 25px;
        letter-spacing: normal;
    }

    .about-actions-v2 {
        flex-direction: column;
        gap: 15px;
        width: 100%;
    }

    .about-actions-v2 .btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .btn-link-premium {
        justify-content: center;
        width: 100%;
    }

    .shape-overlay-text {
        bottom: 25px;
        left: 25px;
    }

    .shape-overlay-text strong {
        font-size: 1.8rem;
        letter-spacing: 2px;
    }

    .shape-floating-btn {
        width: 65px;
        height: 65px;
        font-size: 1.4rem;
        bottom: 10px;
        right: -10px;
    }

    .q-mark {
        font-size: 5rem;
    }

    .live-status-pill-v2 {
        padding: 10px 20px;
        font-size: 0.8rem;
    }
}

/* --- High-Fidelity Responsive --- */
@media (max-width: 1400px) {
    .identity-visual-pod {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 1200px) {
    .section-title-premium {
        font-size: 4.5rem;
    }
}

@media (max-width: 991px) {
    .home-about-section {
        padding: 120px 0;
        text-align: center;
    }

    .about-narrative-container {
        padding-right: 0;
        margin-bottom: 100px;
    }

    .section-eyebrow {
        justify-content: center;
    }

    .section-title-premium {
        text-align: center;
    }

    .about-narrative-lead p {
        margin: 0 auto 60px;
        text-align: center;
    }

    .about-pillars-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto 80px;
    }

    .pillar-card {
        text-align: left;
    }

    .identity-stats-bar {
        flex-direction: column;
        gap: 40px;
        padding: 40px 20px;
    }

    .id-stat:not(:last-child)::after {
        display: none;
    }
}

@media (max-width: 576px) {
    .section-title-premium {
        font-size: 3.2rem;
        letter-spacing: -3px;
    }

    .experience-counter {
        padding: 25px;
        top: -30px;
        right: -20px;
    }

    .counter-num {
        font-size: 3rem;
    }

    .tag-top {
        left: -10px;
    }

    .tag-bottom {
        right: -10px;
    }

    .cv-premium-card {
        flex-direction: column;
        text-align: center;
        padding: 40px 25px;
    }

    .cv-card-text h6,
    .cv-card-text p {
        text-align: center;
    }

    .cv-card-btn {
        margin: 25px 0 0;
        width: 100%;
        border-radius: 20px;
    }
}

/* =========================================
   EXTRACTED FROM HERO-REDESIGN.CSS
   ========================================= */
@media (max-width: 991px) {
    .hero {
        padding: 140px 0 80px;
        min-height: auto;
    }

    .hero-title {
        font-size: clamp(2.5rem, 10vw, 4rem);
    }

    .hero-meta-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 576px) {
    .hero-meta-grid {
        grid-template-columns: 1fr;
    }

    .hero-actions {
        flex-direction: column;
    }

    .container-hero {
        padding: 0 20px;
    }
}

/* =========================================
   EXTRACTED FROM EXPERIENCE.CSS
   ========================================= */
@media (max-width: 992px) {
    .bio-phase {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .phase-sidebar {
        position: relative;
        top: 0;
    }
}

/* =========================================
   EXTRACTED FROM PROJECT-CO.CSS
   ========================================= */
@media (max-width: 1200px) {
    .project-content-layer {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        padding: 50px;
    }

    .title-line {
        font-size: clamp(2.5rem, 5vw, 4rem);
    }
}

@media (max-width: 992px) {
    .project-content-layer {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 40px;
    }

    .project-preview-col {
        order: -1;
    }

    .preview-frame-3d {
        transform: none;
        max-width: 100%;
    }

    .preview-frame-3d:hover {
        transform: scale(1.02);
    }

    .immersive-project-card {
        min-height: auto;
    }

    .immersive-nav-controls {
        position: relative;
        bottom: auto;
        right: auto;
        justify-content: center;
        margin-top: 30px;
    }

    .carousel-progress-wrapper {
        flex-direction: column;
        gap: 20px;
        align-items: stretch;
    }

    .progress-counter {
        margin-left: 0;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .immersive-projects-section {
        padding: 60px 0;
    }

    .premium-section-header {
        text-align: left;
        margin-bottom: 40px;
    }

    .heading-eyebrow {
        justify-content: flex-start;
    }

    .heading-title-large {
        font-size: 2.8rem;
        text-align: left;
    }

    .heading-footer {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: 20px;
    }

    .project-content-layer {
        padding: 30px 20px;
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: left;
    }

    .project-info-col {
        align-items: flex-start;
    }

    .project-title-immersive {
        align-items: flex-start;
        text-align: left;
    }

    .title-line {
        font-size: 2.5rem;
        letter-spacing: -1px;
    }

    .project-description-immersive {
        font-size: 1rem;
        max-width: 100%;
        text-align: left;
    }

    .project-tech-stack {
        justify-content: flex-start;
    }

    .btn-project-primary {
        width: 100%;
        justify-content: center;
    }

    .carousel-progress-track button {
        max-width: none;
    }

    .preview-frame-3d {
        transform: none !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    }

    .immersive-nav-controls {
        position: relative;
        bottom: auto;
        right: auto;
        width: 100%;
        justify-content: flex-start;
        margin-top: 20px;
        padding-bottom: 30px;
    }
}

@media (max-width: 480px) {
    .immersive-projects-section {
        padding: 40px 0;
    }

    .title-line {
        font-size: 2rem;
    }

    .project-category-chip {
        padding: 8px 16px;
        font-size: 0.7rem;
    }

    .nav-btn-immersive {
        width: 48px;
        height: 48px;
    }

    .carousel-progress-wrapper {
        display: none;
    }
}

/* =========================================
   EXTRACTED FROM BUTTONS.CSS
   ========================================= */
@media (max-width: 768px) {
    .btn {
        padding: 12px 28px !important;
        font-size: 0.85rem !important;
    }

    .btn-cyber,
    .btn-primary {
        padding: 14px 32px !important;
    }

    .filter-btn {
        padding: 10px 20px !important;
        font-size: 0.85rem !important;
    }
}

/* =========================================
   EXTRACTED FROM TESTIMONIALS.CSS
   ========================================= */
@media (min-width: 1024px) {
    .testimonial-slider-layout {
        flex-direction: row !important;
        gap: 40px !important;
    }

    .testimonial-preview {
        display: flex !important;
        flex: 0 0 220px !important;
        opacity: 0.3;
        transition: 0.5s;
    }

    .testimonial-preview:hover {
        opacity: 0.7;
    }

    .preview-img-container {
        width: 100%;
        height: 320px;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .preview-img-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(100%);
    }

    .testimonial-main-card {
        flex-direction: row !important;
        max-width: 1200px !important;
        border-radius: 4px !important;
    }

    .main-card-image {
        flex: 0 0 42% !important;
        height: auto !important;
    }

    .main-card-image::before {
        width: 6px !important;
        height: 100% !important;
        left: 0 !important;
        bottom: auto !important;
        top: 0 !important;
    }

    .mobile-testimonial-nav {
        display: none !important;
    }

    .desktop-testimonial-nav {
        display: flex !important;
        justify-content: center;
        gap: 30px;
        margin-top: 50px;
    }
}

/* =========================================
   EXTRACTED FROM PROJECT.CSS (ACCORDION PANELS V2)
   ========================================= */
@media (max-width: 1200px) {
    .projects-grid {
        height: 500px !important;
        gap: 10px !important;
    }

    .project-card.active {
        min-width: 300px !important;
    }

    .project-card.active .project-card-info h3 {
        font-size: 1.5rem !important;
    }

    .project-card-desc {
        font-size: 0.85rem !important;
    }
}

@media (max-width: 1024px) {
    .projects-grid {
        height: 450px !important;
        gap: 8px !important;
    }

    .project-card.active {
        min-width: 260px !important;
        flex: 4 !important;
    }

    .project-card:not(.active) .project-card-number {
        font-size: clamp(2.5rem, 5vw, 4rem) !important;
    }

    .project-card.active .project-card-info h3 {
        font-size: 1.3rem !important;
    }

    .project-card-desc {
        display: none !important;
    }

    .project-card-arrow {
        width: 42px !important;
        height: 42px !important;
    }
}

@media (max-width: 768px) {
    .projects-grid {
        flex-direction: column !important;
        height: auto !important;
        gap: 8px !important;
        border-radius: 16px !important;
    }

    .project-card {
        flex: none !important;
        height: 70px !important;
        border-radius: 14px !important;
        min-width: 0 !important;
        transition: height 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
    }

    .project-card.active {
        height: 340px !important;
        flex: none !important;
        min-width: 0 !important;
    }

    /* Collapsed: horizontal layout with number + title side by side */
    .project-card:not(.active) .project-card-number {
        writing-mode: horizontal-tb !important;
        text-orientation: initial !important;
        top: 50% !important;
        left: 20px !important;
        transform: translateY(-50%) !important;
        font-size: 1.5rem !important;
        letter-spacing: -1px !important;
    }

    .project-card:not(.active) .project-card-info {
        padding: 0 !important;
        position: absolute !important;
        bottom: auto !important;
        top: 50% !important;
        left: 60px !important;
        right: 20px !important;
        transform: translateY(-50%) !important;
    }

    .project-card:not(.active) .project-card-info h3 {
        writing-mode: horizontal-tb !important;
        text-orientation: initial !important;
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        font-size: 0.85rem !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        color: rgba(255, 255, 255, 0.6) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Active: normal expanded layout */
    .project-card.active .project-card-number {
        top: 16px !important;
        left: 16px !important;
        font-size: 0.75rem !important;
        padding: 5px 12px !important;
    }

    .project-card.active .project-card-info {
        padding: 0 20px 20px !important;
    }

    .project-card.active .project-card-info h3 {
        font-size: 1.4rem !important;
    }

    .project-card-desc {
        display: none !important;
    }

    .project-card-arrow {
        width: 40px !important;
        height: 40px !important;
        bottom: 20px !important;
        right: 20px !important;
    }

    .accordion-nav {
        justify-content: center !important;
        margin-top: 20px !important;
    }

    .accordion-nav-btn {
        width: 44px !important;
        height: 44px !important;
    }

    .filter-container {
        padding: 5px !important;
        gap: 6px !important;
        width: 100% !important;
        border-radius: 14px !important;
    }

    .filter-btn {
        padding: 10px 14px !important;
        font-size: 0.72rem !important;
        flex: 1 !important;
        min-width: auto !important;
    }
}

@media (max-width: 480px) {
    .project-card {
        height: 62px !important;
    }

    .project-card.active {
        height: 300px !important;
    }

    .project-card:not(.active) .project-card-number {
        font-size: 1.2rem !important;
        left: 16px !important;
    }

    .project-card:not(.active) .project-card-info {
        left: 48px !important;
    }

    .project-card:not(.active) .project-card-info h3 {
        font-size: 0.8rem !important;
    }

    .project-card.active .project-card-info h3 {
        font-size: 1.2rem !important;
    }

    .project-card-arrow {
        width: 36px !important;
        height: 36px !important;
        bottom: 16px !important;
        right: 16px !important;
    }

    .accordion-nav-btn {
        width: 40px !important;
        height: 40px !important;
    }

    .accordion-counter {
        font-size: 0.8rem !important;
    }
}

/* =========================================
   EXTRACTED FROM BLOG.CSS
   ========================================= */
@media (max-width: 1200px) {
    .premium-blog-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

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

    .container-fluid {
        max-width: 100% !important;
    }
}

@media (max-width: 992px) {
    .spotlight-slide {
        height: auto !important;
        min-height: auto !important;
        flex: 0 0 90% !important;
        flex-direction: column-reverse !important;
    }

    .spotlight-content {
        padding: 40px 30px !important;
        flex: none !important;
        width: 100% !important;
        border-right: none !important;
    }

    .spotlight-title {
        font-size: 2rem !important;
    }

    .spotlight-nav {
        display: none !important;
    }

    .spotlight-image-wrapper {
        height: 350px !important;
        flex: none !important;
    }

    .spotlight-image-wrapper img {
        mask-image: linear-gradient(to bottom, transparent, black 15%) !important;
        -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%) !important;
    }

    .spotlight-actions {
        flex-wrap: wrap !important;
        gap: 20px !important;
    }

    .controls-inner {
        flex-direction: column !important;
        gap: 20px !important;
        align-items: stretch !important;
    }

    .search-compact {
        width: 100% !important;
    }

    .blog-controls-sticky {
        top: 60px !important;
    }
}

@media (max-width: 768px) {
    .premium-blog-grid {
        grid-template-columns: 1fr !important;
    }

    .discovery-grid {
        grid-template-columns: 1fr !important;
    }

    .container-fluid {
        padding: 0 20px !important;
    }

    .section-header-simple h2 {
        font-size: 1.2rem !important;
    }

    .ticker-label {
        min-width: 50px !important;
        width: 50px !important;
        padding: 0 !important;
        justify-content: center !important;
        clip-path: none !important;
    }

    .ticker-label span {
        display: none !important;
    }

    .ticker-thumb {
        width: 40px !important;
        height: 30px !important;
    }

    .ticker-text {
        font-size: 0.85rem !important;
    }
}

/* =========================================
   EXTRACTED FROM CASE-STUDY.CSS
   ========================================= */
@media (max-width: 1200px) {

    /* Hero */
    .hero-container {
        gap: 3rem !important;
    }

    .hero-image {
        height: 550px !important;
    }
}

@media (max-width: 1024px) {

    .premium-gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
        gap: 1.5rem !important;
    }
}

@media (max-width: 992px) {

    /* Hero */
    .hero-container {
        flex-direction: column !important;
        gap: 3rem !important;
    }

    .hero-content,
    .hero-image {
        flex: 0 0 100% !important;
        width: 100% !important;
    }

    .hero-image {
        transform: none !important;
        height: 450px !important;
    }

    .hero-image:hover {
        transform: none !important;
    }

    .floating-ui-1 {
        top: -15px !important;
        right: -15px !important;
        width: 180px !important;
        height: 100px !important;
    }

    .floating-ui-2 {
        width: 140px !important;
        height: 140px !important;
        left: -20px !important;
    }

    .floating-ui-3 {
        width: 160px !important;
        height: 90px !important;
        right: 25% !important;
    }

    /* Footer & Process */
    .footer-links-container {
        flex-direction: column !important;
        gap: 30px !important;
    }

    .footer-column {
        text-align: left !important;
    }

    .footer-column h5::after {
        left: 0 !important;
        transform: none !important;
    }

    .process-wrapper {
        padding-top: 40px !important;
    }

    .step-number {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.4rem !important;
    }

    .process-card {
        padding: 2.5rem 2rem !important;
    }
}

@media (max-width: 768px) {

    /* Hero */
    .hero {
        padding: 100px 0 60px !important;
    }

    .hero-meta {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
        padding: 1.5rem !important;
    }

    .hero-image {
        height: 400px !important;
    }

    .floating-ui {
        display: none !important;
    }

    .hero-title {
        font-size: 2.5rem !important;
    }

    .hero-subtitle {
        font-size: 1.1rem !important;
    }

    /* Section & Content */
    .section {
        padding: 80px 0 !important;
    }

    .content-card {
        padding: 1.5rem !important;
    }

    .video-placeholder {
        height: 300px !important;
    }

    .slideshow-container {
        padding: 1rem !important;
    }

    .screens-grid {
        grid-template-columns: 1fr !important;
    }

    .cta-banner {
        padding: 60px 0 !important;
    }

    .cta-title {
        font-size: 2rem !important;
    }

    body {
        padding-top: 66px !important;
    }

    .introduction-section .display-5 {
        font-size: clamp(1.8rem, 5vw, 2.5rem) !important;
    }

    .introduction-section .lead {
        font-size: 1.05rem !important;
    }

    .process-wrapper {
        padding-top: 35px !important;
    }

    /* Gallery */

    .premium-gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
        gap: 1rem !important;
    }

    .gallery-meta {
        flex-direction: column !important;
        gap: 0.5rem !important;
        align-items: flex-start !important;
    }

    /* Lightbox */
    .lightbox-close {
        top: 1rem !important;
        right: 1rem !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 1.5rem !important;
    }

    .lightbox-prev,
    .lightbox-next {
        width: 40px !important;
        height: 40px !important;
        font-size: 1rem !important;
    }

    .lightbox-prev {
        left: 1rem !important;
    }

    .lightbox-next {
        right: 1rem !important;
    }

    .zoom-hint {
        bottom: 1rem !important;
        font-size: 0.8rem !important;
        padding: 0.5rem 1rem !important;
    }

    .lightbox-thumbnails-container {
        display: none !important;
    }

    /* Load Btn */
    .btn-load-all {
        padding: 0.875rem 2rem !important;
        font-size: 0.9rem !important;
    }

    /* Conclusion */
    .conclusion-wrapper {
        padding: 2.5rem !important;
    }

    .conclusion-title {
        font-size: 2.5rem !important;
    }

    .conclusion-lead {
        font-size: 1.25rem !important;
    }
}

@media (max-width: 576px) {
    .hero {
        padding: 80px 0 40px !important;
    }

    .hero-image {
        height: 350px !important;
    }

    .hero-title {
        font-size: 2.2rem !important;
    }

    .hero-subtitle {
        font-size: 1rem !important;
    }

    .hero .btn-primary {
        width: 100% !important;
        text-align: center !important;
    }
}

@media (max-width: 480px) {
    .premium-gallery-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================
   EXTRACTED FROM LEGAL.CSS
   ========================================= */
@media (max-width: 768px) {
    .legal-content-card {
        padding: 2.5rem 1.5rem !important;
        border-radius: 20px !important;
    }

    .legal-section h2 {
        font-size: 1.75rem !important;
    }

    .legal-section p {
        font-size: 1.05rem !important;
    }
}

/* =========================================
   EXTRACTED FROM CONTACT.CSS
   ========================================= */
@media (max-width: 1024px) {
    .contact-wrapper {
        flex-direction: column !important;
        gap: 60px !important;
    }

    .contact-info {
        position: static !important;
        width: 100% !important;
        text-align: left !important;
    }

    .contact-info .lead-text {
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    .contact-methods-list {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    .contact-card-glass {
        padding: 2.5rem 1.5rem !important;
        border-radius: 25px !important;
    }

    .contact-info h2 {
        font-size: 2.5rem !important;
    }
}

/* =========================================
   EXTRACTED FROM PRELOADER.CSS
   ========================================= */
@media (max-width: 480px) {

    /* Preloader */
    .counter-display {
        font-size: 4rem !important;
    }

    .orb.one,
    .orb.two {
        width: 80vw !important;
        height: 80vw !important;
    }
}

/* =========================================
   EXTRACTED FROM BLOGS-COMMON.CSS
   ========================================= */
@media (max-width: 768px) {
    .posts-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================
   EXTRACTED FROM BLOG-POST-COMMON.CSS
   ========================================= */
@media (max-width: 1200px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .blog-layout-wrapper {
        max-width: 100% !important;
    }
}

@media (max-width: 991px) {
    .hero {
        min-height: auto !important;
        padding: 120px 0 60px !important;
    }

    .hero-title {
        font-size: 4rem !important;
    }

    .hero-meta-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 768px) {
    .blog-grid {
        grid-template-columns: 1fr !important;
        padding: 0 1.5rem !important;
    }

    .blog-card.featured,
    .blog-card.wide {
        grid-column: span 1 !important;
        min-height: 500px !important;
    }

    .blog-card.featured .blog-card-content {
        width: 100% !important;
        padding: 2rem !important;
    }

    .blog-card.featured .blog-title {
        font-size: 2.2rem !important;
    }

    .hero-title {
        font-size: 2.5rem !important;
    }

    .hero-meta-grid {
        grid-template-columns: 1fr !important;
    }

    .hero-actions {
        flex-direction: column !important;
    }

    .comparison-grid {
        grid-template-columns: 1fr !important;
    }

    .blog-content {
        padding: 4rem 1.5rem !important;
    }

    .heading-title-large {
        font-size: 2.2rem !important;
    }

    .my-take-section {
        padding: 2.5rem !important;
    }

    .pull-quote {
        font-size: 1.6rem !important;
    }
}

@media (max-width: 480px) {

    .blog-card-bg,
    .blog-card.featured .blog-card-bg {
        height: 240px !important;
    }

    .blog-card.featured,
    .blog-card.wide,
    .blog-card.small {
        min-height: 420px !important;
    }

    .blog-badge {
        top: 15px !important;
        left: 15px !important;
    }

    .corner-icon {
        top: 15px !important;
        right: 15px !important;
    }
}

/* =========================================
   PRELOADER ACCORDION — RESPONSIVE
   ========================================= */
@media (max-width: 768px) {
    .counter-display {
        font-size: 4rem !important;
    }

    .preloader-logo-wrap {
        width: 70px;
        height: 70px;
    }

    .preloader-logo {
        width: 40px;
    }

    .progress-track {
        width: 140px;
    }

    .terminal-status {
        font-size: 0.6rem;
    }
}

@media (max-width: 480px) {
    .counter-display {
        font-size: 3.2rem !important;
    }

    .preloader-logo-wrap {
        width: 60px;
        height: 60px;
    }

    .preloader-logo {
        width: 35px;
    }

    .progress-track {
        width: 120px;
    }
}

/* =========================================
   HERO SECTION REDESIGN (CENTERED V3) — RESPONSIVE
   ========================================= */

/* Large Layout Adjustments (≤1200px) */
@media (max-width: 1200px) {
    .hero-center-container {
        padding: 0 30px;
    }

    .hero-title-v3 {
        font-size: clamp(3rem, 7vw, 6rem);
    }

    .hero-visual-orb-center {
        width: 600px;
        height: 600px;
    }

    /* Pull cards closer */
    .card-ui {
        top: 0;
        left: 0;
    }

    .card-code {
        top: 10%;
        right: 0;
    }

    .card-brand {
        bottom: 10%;
        left: -2%;
    }

    .card-tech {
        bottom: 5%;
        right: 0;
    }
}

/* Tablet Layout (≤992px) */
@media (max-width: 992px) {
    .home-hero-redesign {
        padding: 110px 0 60px;
    }

    .hero-split-row {
        flex-direction: column-reverse;
        text-align: center;
        gap: 40px !important;
    }

    .hero-content-wrapper {
        align-items: center;
        text-align: center;
    }

    .hero-title-designer {
        align-items: center;
        text-align: center;
        margin-bottom: 18px;
    }

    .hero-title-lead,
    .hero-title-highlight {
        font-size: clamp(2.3rem, 6vw, 3.4rem);
    }

    .hero-title-sub {
        font-size: clamp(1.6rem, 4.2vw, 2.4rem);
    }

    .hero-specialization-strip {
        justify-content: center;
    }

    .hero-description-designer {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions-designer {
        justify-content: center;
    }

    .hero-metrics-bar {
        margin: 0 auto;
    }

    .hero-visual-stage {
        max-width: 380px;
        padding: 20px 0;
    }

    .hero-photo-card {
        max-width: 330px;
    }

    .widget-figma {
        left: -15px;
        top: -15px;
    }

    .widget-verified {
        right: -15px;
        top: 15px;
    }

    .widget-impact {
        left: -15px;
        bottom: 20px;
    }

    .widget-tech {
        right: -10px;
        bottom: -15px;
    }
}

/* Mobile Layout (≤768px) */
@media (max-width: 768px) {
    .home-hero-redesign {
        padding: 100px 0 45px;
    }

    .container-hero {
        padding: 0 20px;
    }

    .hero-split-row {
        gap: 30px !important;
    }

    .hero-status-pill {
        padding: 6px 14px;
        font-size: 0.75rem;
        margin-bottom: 18px;
    }

    .status-pill-text {
        font-size: 0.76rem;
    }

    .hero-title-eyebrow {
        font-size: 0.85rem;
        letter-spacing: 3px;
    }

    .hero-title-lead,
    .hero-title-highlight {
        font-size: clamp(2rem, 7.5vw, 2.8rem);
        letter-spacing: -1px;
    }

    .hero-title-sub {
        font-size: clamp(1.4rem, 5vw, 1.9rem);
        letter-spacing: -0.8px;
    }

    .hero-specialization-strip {
        gap: 6px;
        margin-bottom: 18px;
    }

    .spec-tag {
        font-size: 0.75rem;
        padding: 5px 11px;
    }

    .hero-description-designer {
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 26px;
    }

    .hero-actions-designer {
        flex-direction: column;
        width: 100%;
        gap: 12px;
        margin-bottom: 30px;
    }

    .hero-actions-designer .btn,
    .btn-cv-outline {
        width: 100%;
        justify-content: center;
    }

    /* 2x2 Grid for Metrics Bar on Mobile */
    .hero-metrics-bar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px 10px;
        padding: 16px 12px;
        border-radius: 18px;
    }

    .metric-sep {
        display: none;
    }

    .metric-item {
        padding: 0 4px;
    }

    .metric-val {
        font-size: 1.5rem;
    }

    .metric-lbl {
        font-size: 0.65rem;
        letter-spacing: 0.3px;
    }

    /* Mobile Visual Stage */
    .hero-visual-stage {
        max-width: 320px;
        padding: 15px 0;
    }

    .hero-photo-glow {
        width: 300px;
        height: 300px;
    }

    .hero-ambient-ring {
        display: none;
    }

    .hero-photo-card {
        max-width: 290px;
        border-radius: 26px;
    }

    /* Floating Widgets on Mobile: Condensed & Fitted */
    .designer-widget {
        padding: 7px 12px;
        border-radius: 14px;
        gap: 8px;
    }

    .widget-icon-box {
        width: 30px;
        height: 30px;
        font-size: 0.95rem;
        border-radius: 8px;
    }

    .widget-title {
        font-size: 0.75rem;
    }

    .widget-sub {
        font-size: 0.62rem;
    }

    .widget-figma {
        top: -12px;
        left: -10px;
    }

    .figma-cursor-tag {
        display: none;
    }

    .widget-verified {
        top: 8px;
        right: -10px;
    }

    .widget-impact {
        display: none;
    }

    .widget-tech {
        bottom: -14px;
        right: 0;
    }
}

/* Small Mobile (≤480px) */
@media (max-width: 480px) {
    .hero-tagline-wrapper {
        margin-bottom: 20px;
    }

    .hero-subtitle-v3 {
        font-size: 1rem;
        margin-bottom: 35px;
    }

    .hero-visual-orb-center {
        width: 350px;
        height: 350px;
        opacity: 0.4;
    }
}

/* =========================================
   ABOUT SECTION — IPHONE SE FIRST RESPONSIVE SYSTEM
   ========================================= */
@media (max-width: 1024px) {
    .about-premium {
        padding: 55px 0 45px;
    }

    .about-bento-grid {
        gap: 14px;
    }

    .bento-story-card {
        grid-column: span 12;
    }

    .bento-status-card {
        grid-column: span 12;
    }

    .bento-pillar-card {
        grid-column: span 4;
    }
}

@media (max-width: 768px) {
    .about-premium {
        padding: 42px 0 32px;
    }

    .about-premium-v3 {
        padding: 0 16px;
    }

    .about-shapes .a-shape {
        filter: blur(70px);
        opacity: 0.10;
        width: 260px;
        height: 260px;
    }

    .about-section-header {
        margin-bottom: 20px;
        text-align: center;
    }

    .about-eyebrow-pill {
        font-size: 0.7rem;
        padding: 4px 12px;
        margin-bottom: 10px;
        gap: 6px;
    }

    .about-main-title {
        font-size: clamp(1.45rem, 5.5vw, 1.95rem);
        line-height: 1.22;
        letter-spacing: -0.5px;
        margin-bottom: 8px;
    }

    .about-main-subtitle {
        font-size: 0.88rem;
        line-height: 1.55;
        max-width: 100%;
    }

    /* Bento Grid: Single Column Stack */
    .about-bento-grid {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .bento-card {
        padding: 18px 16px;
        border-radius: 18px;
        grid-column: auto;
        width: 100%;
    }

    .bento-story-card,
    .bento-status-card,
    .bento-pillar-card {
        grid-column: auto;
        width: 100%;
    }

    /* Story Card */
    .story-tag-wrap {
        gap: 6px;
        margin-bottom: 12px;
    }

    .bento-chip {
        font-size: 0.7rem;
        padding: 4px 10px;
        gap: 5px;
    }

    .story-heading {
        font-size: clamp(1.12rem, 4.4vw, 1.35rem);
        line-height: 1.35;
        margin-bottom: 10px;
    }

    .story-text {
        font-size: 0.88rem;
        line-height: 1.6;
        margin-bottom: 14px;
    }

    .story-skills-matrix {
        gap: 6px;
        margin-bottom: 16px;
    }

    .skill-tag {
        font-size: 0.74rem;
        padding: 4px 10px;
        gap: 5px;
    }

    .story-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding-top: 14px;
        margin-top: auto;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .story-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
    }

    .story-actions .btn {
        width: 100%;
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 9px 12px !important;
        font-size: 0.8rem !important;
        font-weight: 700 !important;
        gap: 6px;
        white-space: nowrap;
    }

    .signature-card-block {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        width: 100%;
        padding-top: 8px;
        border-top: 1px dashed rgba(255, 255, 255, 0.07);
        text-align: left;
    }

    .sig-title {
        font-size: 0.62rem;
        margin-bottom: 0;
    }

    .signature-font {
        font-size: 1.55rem;
    }

    /* Live Status Card */
    .status-live-banner {
        padding: 8px 12px;
        border-radius: 12px;
        margin-bottom: 12px;
        gap: 8px;
    }

    .status-live-indicator {
        gap: 6px;
        min-width: 0;
        flex: 1;
    }

    .live-pulse {
        width: 7px;
        height: 7px;
        flex-shrink: 0;
    }

    .live-status-text {
        font-size: 0.68rem;
        letter-spacing: 0.3px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .status-badge-year {
        font-size: 0.68rem;
        padding: 2px 6px;
        flex-shrink: 0;
    }

    .status-meta-box {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 8px;
        padding: 10px 12px;
        border-radius: 14px;
        margin-bottom: 12px;
    }

    .meta-item {
        gap: 8px;
        min-width: 0;
    }

    .meta-icon {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        font-size: 0.85rem;
        flex-shrink: 0;
    }

    .meta-lbl {
        font-size: 0.58rem;
        margin-bottom: 1px;
    }

    .meta-val {
        font-size: 0.78rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .meta-divider {
        height: 22px;
    }

    .philosophy-quote-box {
        padding: 12px 14px;
        border-radius: 14px;
        margin-bottom: 12px;
    }

    .quote-icon {
        font-size: 1.15rem;
        margin-bottom: 2px;
    }

    .quote-text {
        font-size: 0.82rem;
        line-height: 1.48;
    }

    .bento-metrics-row {
        display: grid;
        grid-template-columns: 1fr auto 1fr auto 1fr;
        align-items: center;
        padding: 10px 8px;
        border-radius: 14px;
        gap: 4px;
        margin-top: auto;
    }

    .metric-block {
        text-align: center;
    }

    .metric-num {
        font-size: 1.25rem;
        margin-bottom: 2px;
    }

    .metric-title {
        font-size: 0.58rem;
        letter-spacing: 0.4px;
    }

    .metric-sep {
        height: 22px;
    }

    /* Pillars */
    .bento-pillar-card {
        padding: 15px 16px;
        border-radius: 16px;
    }

    .pillar-compact-layout {
        gap: 12px;
    }

    .pillar-icon {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        font-size: 1.05rem;
        flex-shrink: 0;
    }

    .pillar-info {
        min-width: 0;
    }

    .pillar-title {
        font-size: 0.94rem;
    }

    .pillar-num {
        font-size: 1rem;
    }

    .pillar-desc {
        font-size: 0.8rem;
        line-height: 1.45;
    }
}

/* --- iPhone SE (375px) & Compact Mobile Viewports (<= 480px) --- */
@media (max-width: 480px) {
    .about-premium {
        padding: 36px 0 26px;
    }

    .about-premium-v3 {
        padding: 0 12px;
    }

    .about-shapes .a-shape {
        filter: blur(60px);
        opacity: 0.08;
        width: 220px;
        height: 220px;
    }

    .about-section-header {
        margin-bottom: 18px;
    }

    .about-eyebrow-pill {
        font-size: 0.68rem;
        padding: 4px 10px;
        margin-bottom: 8px;
        letter-spacing: 0.8px;
    }

    .about-main-title {
        font-size: clamp(1.35rem, 6.2vw, 1.6rem);
        letter-spacing: -0.4px;
        line-height: 1.2;
        margin-bottom: 6px;
    }

    .about-main-subtitle {
        font-size: 0.82rem;
        line-height: 1.5;
    }

    .bento-card {
        padding: 16px 14px;
        border-radius: 16px;
    }

    .story-tag-wrap {
        gap: 5px;
        margin-bottom: 10px;
    }

    .bento-chip {
        font-size: 0.66rem;
        padding: 3px 8px;
    }

    .story-heading {
        font-size: 1.12rem;
        line-height: 1.32;
        margin-bottom: 8px;
    }

    .story-text {
        font-size: 0.84rem;
        line-height: 1.52;
        margin-bottom: 12px;
    }

    .story-skills-matrix {
        gap: 5px;
        margin-bottom: 14px;
    }

    .skill-tag {
        font-size: 0.7rem;
        padding: 3px 8px;
        gap: 4px;
    }

    .story-footer {
        gap: 10px;
        padding-top: 12px;
    }

    .story-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .story-actions .btn {
        min-height: 40px;
        padding: 8px 8px !important;
        font-size: 0.76rem !important;
        letter-spacing: 0.3px;
        gap: 5px;
    }

    .signature-card-block {
        padding-top: 8px;
    }

    .sig-title {
        font-size: 0.6rem;
    }

    .signature-font {
        font-size: 1.45rem;
    }

    .status-live-banner {
        padding: 7px 10px;
        margin-bottom: 10px;
        gap: 6px;
    }

    .live-pulse {
        width: 6px;
        height: 6px;
    }

    .live-status-text {
        font-size: 0.65rem;
        letter-spacing: 0.2px;
    }

    .status-badge-year {
        font-size: 0.65rem;
        padding: 2px 5px;
    }

    .status-meta-box {
        padding: 8px 10px;
        gap: 6px;
        margin-bottom: 10px;
    }

    .meta-icon {
        width: 26px;
        height: 26px;
        font-size: 0.78rem;
        border-radius: 7px;
    }

    .meta-lbl {
        font-size: 0.54rem;
    }

    .meta-val {
        font-size: 0.74rem;
    }

    .philosophy-quote-box {
        padding: 10px 12px;
        margin-bottom: 10px;
        border-radius: 12px;
    }

    .quote-icon {
        font-size: 1.05rem;
    }

    .quote-text {
        font-size: 0.79rem;
        line-height: 1.42;
    }

    .bento-metrics-row {
        padding: 8px 6px;
        border-radius: 12px;
    }

    .metric-num {
        font-size: 1.15rem;
    }

    .metric-title {
        font-size: 0.53rem;
        letter-spacing: 0.3px;
    }

    .metric-sep {
        height: 18px;
    }

    .bento-pillar-card {
        padding: 14px 14px;
        border-radius: 14px;
    }

    .pillar-compact-layout {
        gap: 10px;
    }

    .pillar-icon {
        width: 36px;
        height: 36px;
        font-size: 0.95rem;
        border-radius: 9px;
    }

    .pillar-title {
        font-size: 0.88rem;
    }

    .pillar-num {
        font-size: 0.92rem;
    }

    .pillar-desc {
        font-size: 0.76rem;
        line-height: 1.42;
    }
}

/* --- iPhone SE 1st Gen & Ultra-Narrow Devices (<= 340px) --- */
@media (max-width: 340px) {
    .about-premium-v3 {
        padding: 0 8px;
    }

    .bento-card {
        padding: 13px 10px;
    }

    .story-actions {
        grid-template-columns: 1fr;
    }

    .status-meta-box {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .meta-divider {
        display: none;
    }

    .signature-card-block {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
}

/* =========================================
   EXTRACTED FROM COMMON.CSS
   ========================================= */
/* Laptops & Small Desktops */
@media (max-width: 992px) {
    .section {
        padding: 80px 0;
    }

    .text-lg-start {
        text-align: center;
    }

    .c-slide-inner {
        grid-template-columns: 1fr;
        grid-template-rows: 250px 1fr;
    }

    .c-slide-content {
        padding: 40px;
    }

    .exp-card {
        width: 100%;
        margin-bottom: 20px;
    }

    .certification-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

/* Tablets & Large Phones */
@media (max-width: 768px) {
    .section {
        padding: 60px 0;
    }

    .heading-footer {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
    }

    .heading-title-large {
        text-align: center;
    }

    .btn {
        width: 100%;
        min-width: 180px;
    }
}

/* Small Phones */
@media (max-width: 480px) {
    .heading-title-large {
        font-size: 2.5rem;
    }

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

    .hero-title-main {
        font-size: 2.8rem;
    }
}

/* =========================================
   EXTRACTED FROM CASE-STUDY.CSS
   ========================================= */
@media (max-width: 768px) {
    .section {
        padding: 80px 0;
    }

    .hero {
        padding: 100px 0 60px;
    }

    .hero-meta {
        flex-direction: column;
        gap: 1.5rem;
    }

    .content-card {
        padding: 1.5rem;
    }

    .video-placeholder {
        height: 300px;
    }

    .slideshow-container {
        padding: 1rem;
    }

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

    .cta-banner {
        padding: 60px 0;
    }

    .cta-title {
        font-size: 2rem;
    }

    body {
        padding-top: 66px;
    }

    /* Introduction Section Mobile */
    .introduction-section .display-5 {
        font-size: clamp(1.8rem, 5vw, 2.5rem);
    }

    .introduction-section .lead {
        font-size: 1.05rem;
    }

    /* Problem/Solution Mobile */
    .process-wrapper {
        padding-top: 35px;
    }

    .step-number {
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
    }

    .step-line {
        height: 35px;
    }

    .process-card {
        padding: 2rem 1.5rem;
    }

    .process-card h3 {
        font-size: 1.2rem;
    }

    .card-icon-header {
        width: 70px;
        height: 70px;
    }

    .process-card li {
        padding: 14px;
        font-size: 0.95rem;
    }

    /* Visual Identity Mobile */
    .visual-identity-section .section-title h2 {
        font-size: clamp(2rem, 5vw, 3rem);
    }

    .typo-display {
        padding: 25px;
    }

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

    .palette-item {
        height: 90px;
    }

    /* Gallery Mobile */
    .gallery-section .section-title h2 {
        font-size: clamp(2rem, 5vw, 3rem);
    }

    .gallery-filter-container {
        padding: 20px 10px;
        gap: 8px;
    }

    .gallery-btn {
        padding: 10px 20px;
        font-size: 0.8rem;
    }

    .gallery-card-long {
        max-height: 350px;
    }

    /* Conclusion Mobile */
    .conclusion-section h2 {
        font-size: clamp(2rem, 5vw, 2.8rem);
    }

    .conclusion-section .lead {
        font-size: 1.05rem;
    }
}

@media (max-width: 576px) {
    .section {
        padding: 60px 0;
    }

    .section-title {
        margin-bottom: 2rem;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

    .slideshow-controls {
        flex-wrap: wrap;
    }

    .video-section {
        padding: 2rem 1rem;
    }

    .social-links {
        gap: 15px;
        margin-bottom: 30px;
    }

    .social-icon {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }

    /* Introduction Section Small Mobile */
    .introduction-section .section-label {
        font-size: 0.75rem;
        padding: 6px 16px;
        letter-spacing: 2px;
    }

    .introduction-section .display-5 {
        font-size: 1.75rem;
    }

    .introduction-section .lead {
        font-size: 1rem;
    }

    /* Problem/Solution Small Mobile */
    .process-card {
        padding: 1.75rem 1.25rem;
    }

    .card-icon-header {
        width: 60px;
        height: 60px;
    }

    .process-card h3 {
        font-size: 1.1rem;
        margin-bottom: 1.5rem;
    }

    .process-card li {
        padding: 12px;
        font-size: 0.9rem;
    }

    .process-card li i {
        width: 22px;
        height: 22px;
        font-size: 0.7rem;
    }

    /* Visual Identity Small Mobile */
    .typo-display {
        padding: 20px;
    }

    /* Gallery Small Mobile */
    .gallery-btn {
        padding: 8px 16px;
        font-size: 0.75rem;
    }

    .gallery-card-long {
        max-height: 300px;
    }

    /* Conclusion Small Mobile */
    .conclusion-section h2 {
        font-size: 1.75rem;
    }
}

@media (max-width: 1200px) {
    .flow-diagram-wrapper {
        flex-direction: column;
        gap: 4rem;
    }

    .flow-system {
        gap: 2rem;
        width: 100%;
        justify-content: center;
    }

    /* On stacked layout, re-orient satellites */
    .system-left {
        flex-direction: column-reverse;
        text-align: center;
    }

    .system-right {
        flex-direction: column;
        text-align: center;
    }

    .satellites-container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }

    .satellite {
        max-width: 250px;
        text-align: center;
        padding: 1rem;
    }

    /* Lines need adjustment for vertical/stacked */
    .satellite::before {
        top: -20px;
        left: 50% !important;
        width: 1px;
        height: 20px;
        transform: translateX(-50%);
    }

    .flow-bridge {
        width: 100%;
        height: 100px;
        transform: rotate(90deg);
        margin: 2rem 0;
    }

    .central-core {
        transform: rotate(-90deg);
    }
}

@media (max-width: 768px) {
    .main-orb {
        width: 140px;
        height: 140px;
    }

    .orb-glow {
        width: 180px;
        height: 180px;
    }

    .satellites-container {
        flex-direction: column;
        width: 100%;
    }

    .satellite {
        max-width: 100%;
        margin: 0 auto;
        width: 90%;
    }

    .satellite::before {
        display: none;
    }

    /* Hide connection lines on mobile */

    .flow-bridge {
        transform: rotate(0);
        height: auto;
        margin: 3rem 0;
        flex-direction: column;
        width: 100%;
    }

    .liquid-path {
        width: 4px;
        height: 100px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: linear-gradient(180deg, rgba(255, 94, 94, 0.4), rgba(3, 218, 197, 0.4));
    }

    .liquid-path::after {
        animation: flowStreamVert 3s infinite linear;
        top: -100%;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    }

    @keyframes flowStreamVert {
        0% {
            top: -100%;
        }

        100% {
            top: 100%;
        }
    }

    .central-core {
        transform: rotate(0);
    }
}

@media (max-width: 1024px) {
    .identity-grid {
        grid-template-columns: 1fr;
    }

    .typo-showcase {
        flex-direction: column;
        text-align: center;
    }

    .giant-letter {
        font-size: 8rem;
    }
}

@media (max-width: 768px) {
    .module-inner {
        padding: 2rem;
    }

    .giant-letter {
        font-size: 6rem;
    }

    .specimen-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .specimen-label {
        min-width: auto;
    }

    .specimen-display {
        font-size: 2rem;
    }

    .specimen-heading {
        font-size: 1.5rem;
    }

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

    .identity-grid {
        gap: 1.5rem;
    }
}

/* =========================================
   EXTRACTED FROM ABOUT.CSS
   ========================================= */
@media (max-width: 992px) {
  .about-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .about-image {
    order: -1;
    margin-bottom: 40px;
  }
}
@media (max-width: 576px) {
  .skills-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .skill-card {
    height: 180px;
  }

  .floating-icons {
    gap: 8px;
  }

  .f-icon {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
  }
}
@media (max-width: 992px) {
  .about-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

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

  .timeline-item {
    padding-left: 70px;
  }
}
@media (max-width: 768px) {
  .cta-buttons {
    flex-direction: column;
  }

  .testimonial-card {
    padding: 1.5rem;
  }

  .timeline-panel::before {
    display: none;
  }
}
@media (max-width: 991px) {
  .experience-badge {
    right: 10px;
    bottom: 20px;
  }

  .about-text-content {
    margin-top: 40px;
  }
}
@media (max-width: 768px) {
  .edu-modal-header-img {
    height: 380px;
    /* significantly larger matches desktop-ish feel on mobile */
  }

  /* Reset Overlay for Mobile - Card does the work now */
  .edu-modal-overlay {
    background: transparent;
  }

  .edu-header-content {
    padding: 0;
    width: 100%;
    height: 100%;
    position: relative;
  }

  /* The Mobile Info Card */
  .edu-content-wrapper {
    position: absolute;
    bottom: 15px;
    left: 15px;
    right: 15px;
    width: auto;

    background: rgba(10, 10, 10, 0.85);
    /* Deep dark bg */
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  /* 1. Title First */
  .edu-title-large {
    order: 1;
    font-size: 1.6rem;
    line-height: 1.2;
    margin-bottom: 12px;
    color: #fff;
    text-shadow: none;
    /* Card bg provides contrast */
  }

  /* 2. Badges Middle */
  .edu-badge-container {
    order: 2;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
    width: 100%;
  }

  .edu-badge {
    font-size: 0.75rem;
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* 3. Institution Last */
  .edu-institution-wrapper {
    order: 3;
    margin-top: 0;
    font-size: 0.95rem;
    padding: 0;
    background: transparent;
    border: none;
    backdrop-filter: none;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .edu-institution-wrapper i {
    color: var(--accent-color);
  }

  .edu-arrow {
    display: block;
    /* Show arrow on mobile now that space is managed */
    color: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
    /* Down arrow for vertical stack? No, keep sideways or hide. Hide is safer */
    display: none;
  }

  .edu-modal-body {
    padding: 25px 20px;
  }

  .edu-modal-body .row>.col-md-6 {
    width: 100%;
    margin-bottom: 25px;
  }
}
@media (max-width: 576px) {
  .modal-content.glass-card-modal {
    width: 95%;
  }

  .modal-header-content,
  .education-timeline-scroll {
    padding-left: 25px;
    padding-right: 25px;
  }
}
@media (max-width: 768px) {
  .edu-modal-header-img {
    height: 350px;
  }

  .edu-header-content {
    padding: 25px;
  }

  .edu-badge-container {
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
  }

  .edu-arrow {
    display: block;
    transform: rotate(90deg);
    display: none;
  }

  /* Hide on mobile */
  .edu-modal-body {
    padding: 25px;
  }

  .edu-title-large {
    font-size: 2rem;
    margin-bottom: 10px;
  }
}

/* =========================================
   EXTRACTED FROM BLOG.CSS
   ========================================= */
@media (max-width: 1024px) {
    .premium-blog-grid {
        gap: 20px;
    }
    .masonry-column {
        gap: 20px;
    }
}
@media (max-width: 640px) {
    /* Flatten all columns into a horizontal scroll row */
    .premium-blog-grid {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        gap: 16px;
        padding: 10px 20px 30px 20px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        mask-image: linear-gradient(to right, transparent, black 20px, black 95%, transparent);
        -webkit-mask-image: linear-gradient(to right, transparent, black 20px, black 95%, transparent);
        align-items: flex-start;
    }

    .premium-blog-grid::-webkit-scrollbar {
        display: none;
    }

    /* Dissolve column wrappers so cards flow directly into the row */
    .masonry-column {
        display: contents;
    }

    /* Each card = one snap slide */
    .unified-blog-card {
        flex: 0 0 82vw;
        max-width: 340px;
        scroll-snap-align: center;
        height: auto;
    }

    /* Control bar */
    .blog-controls-sticky {
        margin: 20px 20px 40px 20px;
    }

    .controls-inner {
        flex-direction: column;
        gap: 10px;
        padding: 10px 12px;
    }

    .search-compact {
        width: 100%;
    }

    .filter-pills {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
    }
}

/* =========================================
   EXTRACTED FROM BLOGS-COMMON.CSS
   ========================================= */
@media (max-width: 768px) {

    /* Responsive Premium Table Slider */
    .premium-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 16px;
        margin: 2rem 0;
    }

    .premium-table {
        min-width: 600px;
        /* Force scrolling if content is too wide */
    }

    .premium-table th,
    .premium-table td {
        padding: 1rem;
        white-space: nowrap;
        /* Prevent wrapping so it scrolls safely */
    }

    /* Responsive Comparison Grid Slider */
    .comparison-grid {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 1.5rem;
        margin: 2rem 0;
        padding-bottom: 1rem;
        /* For scrollbar */
        scroll-snap-type: x mandatory;
    }

    .comparison-item {
        flex: 0 0 85%;
        /* Cards take up 85% of screen width */
        scroll-snap-align: center;
        padding: 1.5rem;
    }

    .comparison-item h4 {
        margin-bottom: 1.5rem;
        font-size: 1.25rem;
    }

    /* Responsive Pro List Slider */
    .pro-list {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 1.5rem;
        margin: 2rem 0;
        padding-bottom: 1rem;
        /* For scrollbar */
        scroll-snap-type: x mandatory;
    }

    .pro-list li {
        flex: 0 0 85%;
        scroll-snap-align: center;
        flex-direction: column;
        /* Stack icon and text */
        padding: 1.5rem;
        gap: 1.5rem;
    }

    /* Hide scrollbars for cleaner look on mobile but allow scrolling */
    .premium-table-wrapper::-webkit-scrollbar,
    .comparison-grid::-webkit-scrollbar,
    .pro-list::-webkit-scrollbar {
        height: 6px;
    }

    .premium-table-wrapper::-webkit-scrollbar-track,
    .comparison-grid::-webkit-scrollbar-track,
    .pro-list::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 10px;
    }

    .premium-table-wrapper::-webkit-scrollbar-thumb,
    .comparison-grid::-webkit-scrollbar-thumb,
    .pro-list::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 10px;
    }
}

/* =========================================
   EXTRACTED FROM CASE-STUDY.CSS
   ========================================= */
@media (max-width: 768px) {
    .section {
        padding: 80px 0;
    }

    .hero {
        padding: 100px 0 60px;
    }

    .hero-meta {
        flex-direction: column;
        gap: 1.5rem;
    }

    .content-card {
        padding: 1.5rem;
    }

    .video-placeholder {
        height: 300px;
    }

    .slideshow-container {
        padding: 1rem;
    }

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

    .cta-banner {
        padding: 60px 0;
    }

    .cta-title {
        font-size: 2rem;
    }

    body {
        padding-top: 66px;
    }

    /* Introduction Section Mobile */
    .introduction-section .display-5 {
        font-size: clamp(1.8rem, 5vw, 2.5rem);
    }

    .introduction-section .lead {
        font-size: 1.05rem;
    }

    /* Problem/Solution Mobile */
    .process-wrapper {
        padding-top: 35px;
    }

    .step-number {
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
    }

    .step-line {
        height: 35px;
    }

    .process-card {
        padding: 2rem 1.5rem;
    }

    .process-card h3 {
        font-size: 1.2rem;
    }

    .card-icon-header {
        width: 70px;
        height: 70px;
    }

    .process-card li {
        padding: 14px;
        font-size: 0.95rem;
    }

    /* Visual Identity Mobile */
    .visual-identity-section .section-title h2 {
        font-size: clamp(2rem, 5vw, 3rem);
    }

    .typo-display {
        padding: 25px;
    }

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

    .palette-item {
        height: 90px;
    }

    /* Gallery Mobile */
    .gallery-section .section-title h2 {
        font-size: clamp(2rem, 5vw, 3rem);
    }

    .gallery-filter-container {
        padding: 20px 10px;
        gap: 8px;
    }

    .gallery-btn {
        padding: 10px 20px;
        font-size: 0.8rem;
    }

    .gallery-card-long {
        max-height: 350px;
    }

    /* Conclusion Mobile */
    .conclusion-section h2 {
        font-size: clamp(2rem, 5vw, 2.8rem);
    }

    .conclusion-section .lead {
        font-size: 1.05rem;
    }
}
@media (max-width: 576px) {
    .section {
        padding: 60px 0;
    }

    .section-title {
        margin-bottom: 2rem;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

    .slideshow-controls {
        flex-wrap: wrap;
    }

    .video-section {
        padding: 2rem 1rem;
    }

    .social-links {
        gap: 15px;
        margin-bottom: 30px;
    }

    .social-icon {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }

    /* Introduction Section Small Mobile */
    .introduction-section .section-label {
        font-size: 0.75rem;
        padding: 6px 16px;
        letter-spacing: 2px;
    }

    .introduction-section .display-5 {
        font-size: 1.75rem;
    }

    .introduction-section .lead {
        font-size: 1rem;
    }

    /* Problem/Solution Small Mobile */
    .process-card {
        padding: 1.75rem 1.25rem;
    }

    .card-icon-header {
        width: 60px;
        height: 60px;
    }

    .process-card h3 {
        font-size: 1.1rem;
        margin-bottom: 1.5rem;
    }

    .process-card li {
        padding: 12px;
        font-size: 0.9rem;
    }

    .process-card li i {
        width: 22px;
        height: 22px;
        font-size: 0.7rem;
    }

    /* Visual Identity Small Mobile */
    .typo-display {
        padding: 20px;
    }

    /* Gallery Small Mobile */
    .gallery-btn {
        padding: 8px 16px;
        font-size: 0.75rem;
    }

    .gallery-card-long {
        max-height: 300px;
    }

    /* Conclusion Small Mobile */
    .conclusion-section h2 {
        font-size: 1.75rem;
    }
}
@media (max-width: 1200px) {
    .flow-diagram-wrapper {
        flex-direction: column;
        gap: 4rem;
    }

    .flow-system {
        gap: 2rem;
        width: 100%;
        justify-content: center;
    }

    /* On stacked layout, re-orient satellites */
    .system-left {
        flex-direction: column-reverse;
        text-align: center;
    }

    .system-right {
        flex-direction: column;
        text-align: center;
    }

    .satellites-container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }

    .satellite {
        max-width: 250px;
        text-align: center;
        padding: 1rem;
    }

    /* Lines need adjustment for vertical/stacked */
    .satellite::before {
        top: -20px;
        left: 50% !important;
        width: 1px;
        height: 20px;
        transform: translateX(-50%);
    }

    .flow-bridge {
        width: 100%;
        height: 100px;
        transform: rotate(90deg);
        margin: 2rem 0;
    }

    .central-core {
        transform: rotate(-90deg);
    }
}
@media (max-width: 768px) {
    .main-orb {
        width: 140px;
        height: 140px;
    }

    .orb-glow {
        width: 180px;
        height: 180px;
    }

    .satellites-container {
        flex-direction: column;
        width: 100%;
    }

    .satellite {
        max-width: 100%;
        margin: 0 auto;
        width: 90%;
    }

    .satellite::before {
        display: none;
    }

    /* Hide connection lines on mobile */

    .flow-bridge {
        transform: rotate(0);
        height: auto;
        margin: 3rem 0;
        flex-direction: column;
        width: 100%;
    }

    .liquid-path {
        width: 4px;
        height: 100px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: linear-gradient(180deg, rgba(255, 94, 94, 0.4), rgba(3, 218, 197, 0.4));
    }

    .liquid-path::after {
        animation: flowStreamVert 3s infinite linear;
        top: -100%;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    }

    @keyframes flowStreamVert {
        0% {
            top: -100%;
        }

        100% {
            top: 100%;
        }
    }

    .central-core {
        transform: rotate(0);
    }
}
@media (max-width: 1024px) {
    .identity-grid {
        grid-template-columns: 1fr;
    }

    .typo-showcase {
        flex-direction: column;
        text-align: center;
    }

    .giant-letter {
        font-size: 8rem;
    }
}
@media (max-width: 768px) {
    .module-inner {
        padding: 2rem;
    }

    .giant-letter {
        font-size: 6rem;
    }

    .specimen-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .specimen-label {
        min-width: auto;
    }

    .specimen-display {
        font-size: 2rem;
    }

    .specimen-heading {
        font-size: 1.5rem;
    }

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

    .identity-grid {
        gap: 1.5rem;
    }
}

/* =========================================
   EXTRACTED FROM CERTIFICATIONS.CSS
   ========================================= */
@media (max-width: 768px) {
    .hero-stats-row {
        gap: 30px;
    }

    .hero-stat-divider {
        display: none;
    }
}



/* =========================================
   EXTRACTED FROM NAV.CSS
   ========================================= */
@media (max-width: 991px) {

  .navbar-collapse {
    background: rgba(12, 12, 15, 0.98);
    backdrop-filter: blur(30px);
    border-radius: 0 0 25px 25px;
    padding: 1.5rem;
  }

  .mega-menu {
    position: static;
    transform: none !important;
    width: 100% !important;
    max-width: 100%;
    background: transparent;
    padding: 0;
    box-shadow: none;
    display: none;
    opacity: 1;
    visibility: visible;
  }

  .mega-menu .mega-menu-inner {
    padding: 0;
  }

  .mega-menu.active {
    display: block;
  }

  .mega-projects-grid {
    grid-template-columns: 1fr;
  }

}

/* =========================================
   EXTRACTED FROM PREMIUM-SLIDER.CSS
   ========================================= */
@media (min-width: 1024px) {
    .premium-slide-grid {
        display: grid;
        grid-template-columns: 0.8fr 1.2fr;
        /* 40/60 split */
        gap: 80px;
        align-items: center;
        min-height: 500px;
    }
}

/* =========================================
   EXTRACTED FROM PROJECT.CSS
   ========================================= */
@media (max-width: 1024px) {
    .premium-project-grid {
        gap: 20px;
    }

    .masonry-column {
        gap: 20px;
    }

    /* Hide 3rd column and redistribute to 2 columns via flex */
    .premium-project-grid {
        flex-wrap: wrap;
    }

    .masonry-column {
        flex: 1 1 45%;
        min-width: 300px;
    }

    #col-3 {
        flex: 1 1 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
    }

    #col-3 .unified-project-card {
        flex: 1 1 calc(50% - 10px);
        min-width: 280px;
    }
}
@media (max-width: 640px) {
    /* Hide the column wrappers — flatten all cards into a single row */
    .premium-project-grid {
        display: flex;
        flex-direction: row;           /* Horizontal */
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        gap: 16px;
        padding: 10px 20px 30px 20px;
        -webkit-overflow-scrolling: touch;
        /* Hide scrollbar */
        scrollbar-width: none;
        -ms-overflow-style: none;
        /* Fade edges for depth */
        mask-image: linear-gradient(to right, transparent, black 20px, black 95%, transparent);
        -webkit-mask-image: linear-gradient(to right, transparent, black 20px, black 95%, transparent);
        align-items: flex-start;
    }

    .premium-project-grid::-webkit-scrollbar {
        display: none;
    }

    /* Collapse all masonry columns into flat flex items */
    .masonry-column {
        display: contents; /* Children bubble up directly into the grid row */
    }

    /* Each card becomes a snap-target slide */
    .unified-project-card {
        flex: 0 0 82vw;              /* Show ~82% width, next card peeks */
        max-width: 340px;
        scroll-snap-align: center;
        height: auto;
    }

    /* Sticky control bar adjustments */
    .controls-inner {
        flex-direction: column;
        gap: 10px;
        padding: 10px 12px;
    }

    .filter-pills {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
    }

    .project-count-label {
        display: none;
    }

    .projects-section .container-fluid {
        padding: 0; /* Let the slider bleed to edges */
    }

    .project-controls-sticky {
        margin: 20px 20px 40px 20px;
    }
}

/* =========================================
   EXTRACTED FROM RECOMMENDED-CASES.CSS
   ========================================= */
@media (max-width: 991px) {
  .recommended-carousel .carousel-item {
    height: 500px;
  }

  .recommended-carousel .carousel-control-prev,
  .recommended-carousel .carousel-control-next {
    display: none;
  }
}
@media (max-width: 767px) {
  .recommended-carousel .carousel-item {
    height: 450px;
  }

  .recommended-carousel .carousel-caption {
    padding: 30px 20px;
  }

  .recommended-carousel .carousel-indicators {
    padding-left: 20px;
    margin-bottom: 20px;
  }

  .recommended-carousel h2 {
    font-size: 1.8rem;
  }
}
@media (max-width: 480px) {
  .recommended-carousel .carousel-item {
    height: 500px;
    /* Taller on mobile to fit vertical text/content if needed */
  }

  .recommended-carousel h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
  }

  .recommended-carousel p {
    font-size: 0.9rem;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }


}

/* =========================================
   EXTRACTED FROM ROOT.CSS
   ========================================= */
@media (max-width: 992px) {
  .section {
    padding: 80px 0;
  }

  .text-lg-start {
    text-align: center;
  }


  .exp-card {
    flex: none;
    width: 100%;
    margin-bottom: 20px;
  }

  .exp-card:hover,
  .exp-card.active {
    flex: none;
  }

  .exp-details-full {
    max-height: 1000px;
    opacity: 1;
  }

  .certification-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}
@media (max-width: 768px) {
  .section {
    padding: 60px 0;
  }

  .cv-cta-content {
    padding: 30px 20px;
  }

  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }

  .btn {
    width: 100%;
    min-width: 180px;
  }


  .testimonials-container {
    grid-template-columns: 1fr;
  }

  .contact-wrapper {
    flex-direction: column;
  }

  .footer-links-container {
    flex-direction: column;
    text-align: center;
  }

  .footer-column h5::after {
    left: 50%;
    transform: translateX(-50%);
  }
}
@media (max-width: 480px) {
  .hero-title-main {
    font-size: 2.8rem;
  }

  .cta-stats {
    grid-template-columns: 1fr;
  }

  .stat-item h3 {
    font-size: 2rem;
  }
}

/* =========================================
   EXTRACTED FROM SPECIALITY.CSS
   ========================================= */
@media (max-width: 768px) {
    .speciality-filter-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 8px;
        gap: 10px;
        margin-bottom: 20px;
    }

    .speciality-filter-row::-webkit-scrollbar {
        display: none;
    }

    .speciality-filter-row .filter-btn {
        flex: 0 0 auto;
        /* prevent buttons from shrinking */
        white-space: nowrap;
    }
}
@media (max-width: 768px) {
    .speciality-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 16px;
        padding-bottom: 16px;
        /* Hide scrollbar on all browsers */
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE/Edge */
    }

    .speciality-grid::-webkit-scrollbar {
        display: none;
        /* Chrome/Safari */
    }

    .spec-card {
        flex: 0 0 80vw;
        max-width: 320px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
}
@media (max-width: 480px) {
    .spec-card {
        flex: 0 0 85vw;
    }
}
@media (max-width: 768px) {
    .swipe-hint {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.35);
        margin-bottom: 16px;
        font-weight: 500;
        letter-spacing: 0.5px;
    }

    .swipe-hint i {
        color: var(--accent-color);
        font-size: 0.8rem;
        animation: swipeAnim 1.8s ease-in-out infinite;
    }
}
@media (max-width: 768px) {
    .deepdive-content {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 16px;
        padding-bottom: 16px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .deepdive-content::-webkit-scrollbar {
        display: none;
    }

    .learn-card {
        flex: 0 0 85vw;
        max-width: 360px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        /* Disable the translateX hover on mobile to not fight scroll */
        transform: none !important;
    }

    .learn-card:hover {
        transform: none !important;
    }
}
@media (max-width: 1100px) {
    .deepdive-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .deepdive-sidebar {
        position: static;
    }
}
@media (max-width: 768px) {

    .speciality-overview-section,
    .deepdive-section,
    .speciality-cta-section {
        padding: 70px 0;
    }

    /* NOTE: .speciality-grid mobile slider is handled above — do NOT set grid-template-columns here */

    .deepdive-stat-row {
        gap: 16px;
    }

    .speciality-filter-row {
        gap: 8px;
    }
}
@media (max-width: 576px) {
    .spec-card {
        padding: 22px;
    }

    .learn-card {
        padding: 20px 20px;
    }
}

/* =========================================
   CASE STUDY PAGES — COMPREHENSIVE RESPONSIVE
   Covers: Hero, Flow Diagram, Design Identity,
   Premium Gallery, Conclusion, Lightbox
   ========================================= */

/* ── Large Tablets (≤1024px) ── */
@media (max-width: 1024px) {

    /* Hero */
    .hero-title {
        font-size: clamp(2.8rem, 8vw, 5rem);
        letter-spacing: -2px;
    }

    .hero-meta-grid {
        gap: 20px 30px;
    }

    /* Section padding */
    .section {
        padding: 80px 0;
    }

    /* Design Identity — stack columns early */
    .identity-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Gallery pills — horizontal scroll at ≤1024px */
    .gallery-nav-wrapper {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 0 0 6px;
        /* Fade edges to hint scrollability */
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 92%, transparent 100%);
        mask-image: linear-gradient(to right, transparent 0%, black 5%, black 92%, transparent 100%);
    }

    .gallery-nav-wrapper::-webkit-scrollbar {
        display: none;
    }

    .gallery-filter-pills {
        display: inline-flex;
        flex-wrap: nowrap;
        gap: 0.6rem;
        padding: 0.5rem 1.5rem;
        border-radius: 50px;
        width: max-content;
        min-width: 100%;
    }

    .filter-pill {
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    /* Filter pills dots (injected by JS) */
    .filter-dots {
        display: flex;
        justify-content: center;
        gap: 6px;
        margin-top: 1rem;
        padding: 0 1rem;
    }

    .filter-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        border: none;
        cursor: pointer;
        padding: 0;
        transition: all 0.3s ease;
        flex-shrink: 0;
    }

    .filter-dot.active {
        background: var(--accent-color, #ff5757);
        width: 20px;
        border-radius: 4px;
    }

    /* Premium gallery — 2 columns at this width */
    .premium-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    /* Conclusion wrapper */
    .conclusion-wrapper {
        padding: 3rem 2.5rem;
    }

    .conclusion-title {
        font-size: clamp(2.5rem, 5vw, 3.5rem);
    }
}

/* ── Tablets / Large Phones (≤768px) ── */
@media (max-width: 768px) {

    /* Hero */
    .hero {
        padding: 110px 0 60px;
        min-height: auto;
    }

    .hero-title {
        font-size: clamp(2.2rem, 9vw, 3.5rem);
        letter-spacing: -1.5px;
        margin-bottom: 20px;
    }

    .hero-tagline {
        margin-bottom: 18px;
        gap: 10px;
    }

    .tag-line {
        width: 30px;
    }

    .tag-text {
        font-size: 0.7rem;
        letter-spacing: 2px;
    }

    .hero-desc {
        font-size: 1rem;
        margin-bottom: 28px;
    }

    .hero-meta-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px 20px;
        margin-bottom: 28px;
    }

    .meta-box {
        padding-left: 10px;
    }

    .meta-value {
        font-size: 0.9rem;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .hero-actions .btn {
        width: 100%;
        justify-content: center;
        padding: 14px 24px !important;
    }

    /* Social strip in hero (study-10) */
    .hero-social-strip {
        margin-top: 1rem !important;
        gap: 0.6rem !important;
    }

    /* Section padding */
    .section {
        padding: 60px 0;
    }

    /* Flow section */
    .flow-section {
        padding: 60px 0;
    }

    /* Typography module typo showcase — stack */
    .typo-showcase {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
        padding: 1.5rem;
    }

    .giant-letter {
        font-size: 7rem;
        line-height: 1;
    }

    .typo-description p {
        font-size: 0.9rem;
    }

    /* Specimen items */
    .specimen-item {
        flex-direction: column;
        gap: 0.4rem;
    }

    .specimen-label {
        min-width: auto;
    }

    .specimen-display {
        font-size: 1.8rem;
    }

    .specimen-heading {
        font-size: 1.4rem;
    }

    /* Color swatches — 2 cols */
    .color-swatches {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .swatch-circle {
        width: 60px;
        height: 60px;
    }

    /* Module inner padding */
    .module-inner {
        padding: 1.75rem;
    }

    .module-title {
        font-size: 1.6rem;
    }

    /* Gallery filter pills — tighter scroll on phone */
    .gallery-nav-wrapper {
        margin-bottom: 2rem;
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 90%, transparent 100%);
        mask-image: linear-gradient(to right, transparent 0%, black 6%, black 90%, transparent 100%);
    }

    .gallery-filter-pills {
        gap: 0.5rem;
        padding: 0.4rem 1.5rem;
    }

    .filter-pill {
        flex: 0 0 auto;
        padding: 0.55rem 0.9rem;
        font-size: 0.78rem;
        gap: 0.4rem;
        white-space: nowrap;
    }

    /* Swipe hint label shown below pills on mobile */
    .pills-swipe-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        font-size: 0.7rem;
        color: rgba(255,255,255,0.3);
        margin-top: 6px;
        letter-spacing: 0.05em;
        font-weight: 500;
        animation: swipeHintAnim 2s ease-in-out 1s 2;
    }

    .pills-swipe-hint i {
        font-size: 0.75rem;
        color: var(--accent-color, #ff5757);
    }

    @keyframes swipeHintAnim {
        0%, 100% { opacity: 0.3; transform: translateX(0); }
        50%       { opacity: 0.8; transform: translateX(4px); }
    }

    .pill-text {
        font-size: 0.8rem;
    }

    .pill-count {
        width: 20px;
        height: 20px;
        font-size: 0.65rem;
    }

    /* Gallery grid — 2 cols */
    .premium-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    /* Gallery expand button */
    .gallery-expand-btn {
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }

    /* Conclusion */
    .conclusion-section {
        padding: 60px 0;
    }

    .conclusion-wrapper {
        padding: 2rem 1.5rem;
        border-radius: 20px;
    }

    .conclusion-title {
        font-size: clamp(2rem, 7vw, 2.8rem);
    }

    .conclusion-lead {
        font-size: 1.1rem;
    }

    .conclusion-desc {
        font-size: 1rem;
    }

    .conclusion-header {
        margin-bottom: 2rem;
    }

    /* Lightbox */
    .lightbox-close {
        top: 1rem;
        right: 1rem;
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }

    .lightbox-prev {
        left: 0.75rem;
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .lightbox-next {
        right: 0.75rem;
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .lightbox-content-wrapper {
        width: 95%;
        height: 80vh;
    }

    .lightbox-thumb {
        width: 55px;
        height: 55px;
    }

    .zoom-hint {
        font-size: 0.75rem;
        padding: 0.5rem 1rem;
        bottom: 5.5rem;
    }

    /* Premium section header alignment */
    .premium-section-header {
        padding-bottom: 24px;
        margin-bottom: 30px;
    }

    .heading-title-large {
        font-size: clamp(2rem, 6vw, 3rem);
        letter-spacing: -1px;
    }

    .heading-subtitle {
        font-size: 1rem;
    }
}

/* ── Small Phones (≤576px) ── */
@media (max-width: 576px) {

    /* Hero */
    .hero {
        padding: 100px 0 50px;
    }

    .hero-title {
        font-size: clamp(2rem, 10vw, 3rem);
        letter-spacing: -1px;
    }

    .hero-meta-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .meta-box {
        border-left-width: 2px;
        padding-left: 10px;
    }

    .hero-desc {
        font-size: 0.95rem;
        margin-bottom: 22px;
    }

    /* Section */
    .section {
        padding: 50px 0;
    }

    .flow-section {
        padding: 50px 0;
    }

    .design-identity-section {
        padding: 50px 0;
    }

    .premium-gallery-section {
        padding: 50px 0;
    }

    /* Gallery — single column */
    .premium-gallery-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Gallery image aspect ratio — landscape on mobile */
    .gallery-image-container {
        aspect-ratio: 16/10;
    }

    /* Identity module */
    .identity-module {
        border-radius: 16px;
    }

    .module-inner {
        padding: 1.25rem;
    }

    .module-title {
        font-size: 1.4rem;
    }

    /* Giant letter */
    .giant-letter {
        font-size: 5.5rem;
    }

    .typo-showcase {
        padding: 1.25rem;
        gap: 1rem;
    }

    .specimen-display {
        font-size: 1.5rem;
    }

    .specimen-heading {
        font-size: 1.2rem;
    }

    /* Color swatches — 2 cols small */
    .color-swatches {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .swatch-item {
        padding: 1rem;
    }

    .swatch-circle {
        width: 50px;
        height: 50px;
    }

    .swatch-name {
        font-size: 0.8rem;
    }

    .swatch-hex {
        font-size: 0.7rem;
    }

    /* Palette note */
    .palette-note {
        padding: 1rem;
    }

    .palette-note p {
        font-size: 0.85rem;
    }

    /* Conclusion */
    .conclusion-wrapper {
        padding: 1.75rem 1.25rem;
    }

    .conclusion-title {
        font-size: clamp(1.8rem, 8vw, 2.5rem);
    }

    .conclusion-lead {
        font-size: 1rem;
        line-height: 1.6;
    }

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

    /* Filter pill icon — hide on very small */
    .pill-icon {
        display: none;
    }

    /* Load more section */
    .gallery-load-more {
        padding-top: 2rem;
    }

    /* Orb flow — extra small adjustments */
    .main-orb {
        width: 120px;
        height: 120px;
    }

    .orb-icon {
        font-size: 2rem;
    }

    .main-orb h3 {
        font-size: 0.85rem;
    }

    .sat-title {
        font-size: 0.85rem;
    }

    .sat-desc {
        font-size: 0.75rem;
    }

    .satellite {
        padding: 0.75rem 1rem;
    }

    .central-core {
        width: 90px;
        height: 90px;
    }

    .core-label {
        font-size: 0.85rem;
    }

    /* Section header */
    .heading-title-large {
        font-size: clamp(1.8rem, 8vw, 2.5rem);
        letter-spacing: -0.5px;
    }

    .heading-eyebrow {
        font-size: 0.7rem;
        padding: 6px 12px;
        letter-spacing: 1.5px;
    }

    .heading-subtitle {
        font-size: 0.95rem;
    }

    /* Premium section header spacing */
    .premium-section-header {
        margin-bottom: 24px;
        padding-bottom: 20px;
    }
}

/* ── Extra Small Phones (≤400px) ── */
@media (max-width: 400px) {

    .hero-title {
        font-size: clamp(1.8rem, 10vw, 2.5rem);
        letter-spacing: -0.5px;
    }

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

    .hero-actions .btn {
        font-size: 0.8rem !important;
        padding: 12px 16px !important;
    }

    /* ── Global CTA Buttons & Banner Tuning (iPhone SE ≤400px) ── */
    .btn-cyber,
    .btn-primary {
        padding: 11px 18px !important;
        font-size: 0.82rem !important;
        clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px) !important;
    }

    .btn-pill,
    .btn-secondary,
    .btn-outline {
        padding: 10px 16px !important;
        font-size: 0.8rem !important;
    }

    .btn-cv-outline {
        padding: 10px 14px !important;
        font-size: 0.8rem !important;
    }

    .cta-banner,
    .cta-section,
    .cv-cta-section,
    .speciality-cta-section {
        padding: 40px 14px !important;
    }

    .cta-title,
    .speciality-cta-title {
        font-size: 1.6rem !important;
        line-height: 1.25 !important;
    }

    .cta-subtitle,
    .speciality-cta-desc {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
    }

    .cta-buttons,
    .speciality-cta-buttons {
        flex-direction: column !important;
        width: 100% !important;
        gap: 8px !important;
    }

    .cta-buttons .btn,
    .speciality-cta-buttons .btn {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: center !important;
        font-size: 0.82rem !important;
        padding: 11px 16px !important;
    }

    .cta-stats {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .conclusion-title {
        font-size: 1.7rem;
    }

    .conclusion-lead {
        font-size: 0.95rem;
    }

    .giant-letter {
        font-size: 4.5rem;
    }

    .main-orb {
        width: 100px;
        height: 100px;
    }

    .orb-glow {
        width: 140px;
        height: 140px;
    }

    .filter-pill {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
    }

    .lightbox-thumb {
        width: 45px;
        height: 45px;
    }

    .premium-gallery-grid {
        gap: 0.75rem;
    }
}

/* =========================================
   COLOR SWATCHES — MOBILE HORIZONTAL SLIDER
   ========================================= */

@media (max-width: 768px) {

    /* Turn the swatches grid into a horizontal snap-scroll slider */
    .color-swatches {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 1rem;
        padding: 0.5rem 0.25rem 1.5rem;
        scrollbar-width: none;
        -ms-overflow-style: none;
        grid-template-columns: unset !important;
    }

    .color-swatches::-webkit-scrollbar {
        display: none;
    }

    .swatch-item {
        flex: 0 0 72vw;
        max-width: 280px;
        min-width: 180px;
        scroll-snap-align: center;
        scroll-snap-stop: always;
        border-radius: 18px;
        padding: 1.5rem 1rem;
    }

    .swatch-circle {
        width: 80px;
        height: 80px;
    }

    /* Dot indicators container (injected by JS) */
    .swatch-dots {
        display: flex;
        justify-content: center;
        gap: 6px;
        margin-top: 0.5rem;
    }

    .swatch-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        border: none;
        cursor: pointer;
        padding: 0;
        transition: all 0.3s ease;
        flex-shrink: 0;
    }

    .swatch-dot.active {
        background: var(--accent-color, #ff5757);
        width: 20px;
        border-radius: 4px;
    }
}

/* =========================================
   GALLERY GRID — MOBILE HORIZONTAL SLIDER
   ========================================= */

@media (max-width: 576px) {

    /* Re-override into horizontal snap-scroll */
    .premium-gallery-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 1rem;
        padding: 0.5rem 0.25rem 1.5rem;
        margin: 0;
        scrollbar-width: none;
        -ms-overflow-style: none;
        grid-template-columns: unset !important;
    }

    .premium-gallery-grid::-webkit-scrollbar {
        display: none;
    }

    .gallery-item-wrapper {
        flex: 0 0 80vw;
        max-width: 320px;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    .gallery-image-container {
        aspect-ratio: 3/4;
    }

    /* Gallery dots (injected by JS) */
    .gallery-dots {
        display: flex;
        justify-content: center;
        gap: 6px;
        margin-top: 0.75rem;
    }

    .gallery-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        border: none;
        cursor: pointer;
        padding: 0;
        transition: all 0.3s ease;
        flex-shrink: 0;
    }

    .gallery-dot.active {
        background: var(--accent-color, #ff5757);
        width: 20px;
        border-radius: 4px;
    }
}

/* =========================================
   MODERN CASE STUDY SCROLLYTELLING (case-study-modern.css)
   Responsive breakpoints for the editorial scrollytelling
   architecture: TOC rail, mobile HUD, bento grid,
   before/after slider, swatches, gallery, KPI grid,
   next-project card.
   ========================================= */

/* ── Large Tablets / Small Desktops (≤ 1024px) ── */
@media (max-width: 1024px) {

    /* Switch to single-column layout — no side rail */
    .cs-layout-container {
        grid-template-columns: 1fr;
        gap: 40px;
        width: 94%;
    }

    /* Hide desktop sticky TOC rail */
    .cs-toc-sidebar {
        display: none;
    }

    /* Show compact mobile sticky HUD */
    .cs-mobile-hud {
        display: block;
    }

    .cs-hero-card {
        padding: 36px 24px;
    }

    /* Meta grid: 2 cols on tablet */
    .cs-meta-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Stack bento grid, design-system grid, impact grid vertically */
    .cs-bento-split,
    .cs-ds-grid,
    .cs-impact-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Phones / Tablets (≤ 768px) ── */
@media (max-width: 768px) {

    /* Reduce top padding so mobile HUD clears navbar */
    .cs-viewport {
        padding-top: 95px;
        padding-bottom: 50px;
    }

    .cs-hero-card {
        padding: 28px 18px;
    }

    /* Meta grid: 2 cols, tighter gap */
    .cs-meta-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .cs-meta-item {
        padding: 10px 14px;
    }

    /* Gallery, KPI cards, swatches: single column */
    .cs-gallery-grid,
    .cs-metrics-kpi,
    .cs-swatches-grid {
        grid-template-columns: 1fr;
    }

    /* Next-project card stacks vertically */
    .cs-next-project-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px;
    }

    .cs-next-action-pill {
        width: 100%;
        justify-content: center;
    }

    /* Before/After slider: wider aspect ratio for portrait phones */
    .before-after-box {
        aspect-ratio: 16 / 11;
    }
}

/* ── Small Phones (≤ 480px) ── */
@media (max-width: 480px) {

    /* Hero title: clamp already handles scaling, cap at 2rem floor */
    .cs-hero-title {
        font-size: 2rem;
    }

    .cs-hero-desc {
        font-size: 0.92rem;
    }

    /* Stack CTA buttons full-width */
    .cs-hero-actions {
        flex-direction: column;
        width: 100%;
    }

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