/* 1. Global Type Scale & Desktop Base */
@media (max-width: 767px) {
    :root { font-size: 14px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    :root { font-size: 15px; }
}
@media (min-width: 1024px) and (max-width: 1439px) {
    :root { font-size: 16px; }
}
@media (min-width: 1440px) and (max-width: 1650px) {
    :root { font-size: 18px; }
    .voice-play-btn .play-icon,
    .voice-play-btn .pause-icon,
    .map-icon {
        width: 24px !important;
        height: 24px !important;
    }
}
@media (min-width: 1651px) and (max-width: 1920px) {
    :root { font-size: 22px; }
    .hero-image-wrapper {
        --img-size: 300px;
    }
    .voice-play-btn .play-icon,
    .voice-play-btn .pause-icon,
    .map-icon {
        width: 24px !important;
        height: 24px !important;
    }
}
@media (min-width: 1921px) {
    :root { font-size: 24px; }
    .hero-image-wrapper {
        --img-size: 350px;
    }
    .linkedin-btn img {
        width: 36px !important;
        height: 36px !important;
    }
    .contact-btn svg {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        max-width: 28px !important;
    }
    .voice-play-btn .play-icon,
    .voice-play-btn .pause-icon,
    .map-icon {
        width: 28px !important;
        height: 28px !important;
    }
}

/* 2. Hero Structural Shift & Breakout (1100px) */
@media (max-width: 1150px) {
    .hero { 
        padding-top: 128px !important; 
        padding-bottom: 0 !important;
        margin: 0 !important; 
        width: 100% !important;
    }
    



    /* Allow the subtitle to wrap word-by-word with the name */
    .hero-content-stacked {
        flex-wrap: wrap !important;
        gap: 4px 8px !important;
    }

    
    /* 2.1 Mobile Structure & Scaling (768px and below) */

    
    .hero-content-stacked {
        display: flex !important;
        flex-flow: row wrap !important;
        align-items: baseline !important;
        justify-content: flex-start !important;
        gap: 0 !important;
    }
    
    
    

    .hero-subtitle-inline {
        font-size: clamp(0.7rem, 2.2vw, 1.15rem) !important; 
        white-space: normal !important; 
        max-width: 100% !important;
        line-height: 85% !important;
        width: auto !important;
        display: inline !important;
    }
    
    


    @media (max-width: 768px) {
        .hero-row { 
            flex-direction: row !important; 
            flex-wrap: nowrap !important;
            align-items: center !important; 
            gap: 6px !important; /* Tighter gap for horizontal fit */
        }

        .hero-bg-text { font-size: 25vw !important; opacity: 0.1 !important; }
        
        /* Fluid scaling for subtitle (no longer stops at static 0.95rem) */
        .hero-subtitle-inline {
            width: auto !important;
            margin-top: 0 !important; 
            font-size: clamp(0.8rem, 3.2vw, 1.1rem) !important; /* Proportional fluid scaling reduced from 3.5vw/1.3rem */
            display: inline !important;
        }
        .design-who-fragment { width: auto !important; }
    }
}

/* 2.15 Mid-Mobile Fix: prevent text from orphaning to a 3rd line (585px–700px) */
@media (max-width: 700px) and (min-width: 585px) {
    .hero-heading-bold {
        max-width: none !important;
    }
}

/* 2.2 Extreme Tiny Mobile Rescue (584px and below) */
@media (max-width: 584px) {
    /* Perfectly balanced fluid multipliers from Step 857 baseline
       ensuring it shrinks gracefully without being too small,
       while maintaining the 'scaling allowed' requested by the user. */
    
    .hero-heading-bold {
        font-size: clamp(0.9rem, 4.8vw, 2rem) !important; 
        max-width: none !important; /* Spans full width on small phones to avoid 3rd line wrap */
    }
}

/* Custom Laptop Adjustments for Testimonials (1300px below) */
@media (max-width: 1300px) {
    /* Expand the wrapper to exactly match the page margins instead of artificially clamping to 80vw */
    .testimonials-content {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Reduce the gap between the two cards to give them more horizontal breathing room */
    .testimonials-row {
        gap: 24px !important;
    }
    
    /* Reclaim horizontal space in Testimonial cards */
    .testimonial-card {
        padding: 1.5rem !important;
        gap: 16px !important;
    }
    .avatar {
        width: 48px !important;
        height: 48px !important;
    }
    .voice-play-btn {
        padding: 8px 12px !important;
        gap: 6px !important;
    }
}

/* 3. Global Tablet Transition (1024px) */
@media (max-width: 1024px) {
    :root { font-size: 15px; }
    body { --site-pad: 24px; padding: 64px var(--site-pad) !important; }
    
    .hero { 
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding-top: 128px !important;
        padding-bottom: 0 !important;
    }
    
    .testimonials-grid, .about-grid { gap: 32px !important; grid-template-columns: 1fr !important; }
    
    @media (min-width: 901px) {
        .stat-grid-stack .card-cream {
            padding-left: 68px !important;
        }
    }

    @media (max-width: 900px) and (min-width: 601px) {
        .stat-grid-stack .card-cream {
            padding-left: 84px !important;
        }
    }
    
    @media (max-width: 850px) {
        .projects-grid { 
            display: flex;
            flex-direction: column !important;
            width: 100% !important;
            gap: 16px !important;
        }
        .ui-gallery-grid { grid-template-columns: repeat(2, 1fr) !important; }
        .card-content h3 {
            font-size: clamp(1.1rem, 3.5vw, 1.6rem) !important;
        }
        .ui-card-title {
            font-size: clamp(1rem, 2.8vw, 1.35rem) !important; 
        }
        .project-card { 
            width: 100% !important;
            margin: 0 !important;
        }
    }

    @media (max-width: 600px) {
        .ui-gallery-grid { grid-template-columns: 1fr !important; }
        /* Avoid scaling down Case Study headers on mobile */
        .card-content h3 { font-size: 1.55rem !important; }
        .ui-card-title { font-size: clamp(1.1rem, 4.5vw, 1.5rem) !important; }
        
        .stat-grid-stack,
        .stat-kpi-pair {
            flex-direction: column !important;
            width: 100% !important;
        }

        .stat-grid-stack .card-cream {
            margin-left: 0 !important;
            margin-top: -80px !important;
            padding: 72px 24px 24px 24px !important;
        }
        
        .stat-grid-stack .card-cream .stat-arrow {
            top: 80px !important;
        }

        .stat-card {
            width: 100% !important;
            padding: 24px !important;
            min-height: auto !important;
            max-height: none !important;
        }
    }
    
    .stat-card { padding: 24px !important; }

    /* Optimize space utilization for mobile */
    @media (max-width: 768px) {
        body { --site-pad: 16px !important; }
    }
    @media (max-width: 480px) {
        body { --site-pad: 12px !important; }
    }
    
    .hero-rows-wrapper { 
        align-items: flex-start !important; /* Align "Crafting" and "Precision" */
    }
    .hero-row { 
        align-items: center !important; /* Restores vertical centering for the badges in Content-First-Row */
    }
    .Content-Second-Row {
        align-items: flex-start !important; /* Prevents "Precision" from centering above the wider h2, keeping it flush-left */
    }
}

@media (max-width: 1000px) {
    .project-card { gap: 8px !important; }
}

/* 4. Stepped Multiple-of-4 Badge Scaling (16px - 64px) */
.badge, .tool-icon {
    --icon-size: 44px; /* Default Desktop */
}

.badge {
    --badge-size: calc(var(--icon-size) * 1.727);
    width: var(--badge-size) !important;
    height: var(--badge-size) !important;
}
.badge img, .tool-icon img { 
    width: var(--icon-size) !important; 
    height: var(--icon-size) !important; 
    object-fit: contain !important; 
    transition: none !important;
}
.badge-text { font-size: calc(var(--badge-size) * 0.36) !important; }

/* Desktop Upscale */
@media (min-width: 2501px) { .badge, .tool-icon { --icon-size: 64px !important; } }
@media (min-width: 2201px) and (max-width: 2500px) { .badge, .tool-icon { --icon-size: 60px !important; } }
@media (min-width: 1901px) and (max-width: 2200px) { .badge, .tool-icon { --icon-size: 56px !important; } }
@media (min-width: 1601px) and (max-width: 1900px) { .badge, .tool-icon { --icon-size: 52px !important; } }
@media (min-width: 1351px) and (max-width: 1600px) { .badge, .tool-icon { --icon-size: 44px !important; } }

/* TABLET/MOBILE DOWNSCALE (Multiples of 4) */
@media (max-width: 1150px) { .badge, .tool-icon { --icon-size: 40px !important; } }
@media (max-width: 950px) { .badge, .tool-icon { --icon-size: 36px !important; } }
@media (max-width: 800px) { .badge, .tool-icon { --icon-size: 32px !important; } }
@media (max-width: 650px) { .badge, .tool-icon { --icon-size: 28px !important; } }
@media (max-width: 520px) { .badge, .tool-icon { --icon-size: 24px !important; } }

/* 5. Navigation & UI Refinement (Mid-Range) */
@media (max-width: 966px) {
    .navbar { display: flex !important; justify-content: space-between !important; gap: 24px !important; }
    .nav-spacer { display: block !important; flex: 1 !important; visibility: hidden !important; }
    .nav-actions { flex: 1 !important; display: flex !important; justify-content: flex-start !important; gap: 12px !important; }
    .nav-item { padding: 12px 16px !important; font-size: 1rem !important; }
    
    .linkedin-btn {
        width: auto !important; min-width: 70px !important;
        display: flex !important; align-items: center !important;
        justify-content: center !important; border-radius: 40px !important;
    }
    .contact-btn {
        width: auto !important; min-width: 140px !important;
        display: flex !important; align-items: center !important;
    }
}

/* 6. Mobile Refinements (600px below) */
@media (max-width: 600px) {
    .card-cream { padding: 28px 24px !important; }
    .card-icon { width: 80px !important; }
    .card-content { padding-right: 44px !important; }
}

@media (max-width: 850px) {
    /* Testimonial Form & Structure Fluid Scaling */
    .user-info h4 {
        font-size: clamp(0.85rem, 3.2vw, 1.25rem) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .user-info .project-tag {
        font-size: clamp(0.65rem, 2.5vw, 1rem) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .testimonial-text {
        font-size: clamp(0.85rem, 3vw, 1rem) !important;
    }
    .voice-play-btn .btn-text {
        font-size: clamp(0.7rem, 2.5vw, 0.95rem) !important;
    }
    .avatar {
        width: clamp(40px, 10vw, 64px) !important;
        height: clamp(40px, 10vw, 64px) !important;
    }
}

@media (max-width: 425px) {
    /* Cards fill the width within standard body padding — symmetrically balanced */
    .projects-grid {
        display: flex;
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 12px !important;
    }

    .project-card { 
        flex-direction: row !important; 
        align-items: center !important;
        padding: 24px 16px !important;
        border-radius: 32px !important;
        gap: 16px !important;
        width: 100% !important;
        min-height: auto !important;
    }

    .card-icon {
        width: 64px !important;
        height: 64px !important;
        flex-shrink: 0 !important;
    }

    .card-content {
        flex: 1 !important;
        min-width: 0 !important;
        padding-right: 44px !important;
        gap: 4px !important;
    }

    /* Reduced title and body text for small mobile */
    .card-content h3 {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
    }
    .card-content p {
        font-size: 0.88rem !important;
        line-height: 1.5 !important;
    }

    /* Restore default arrow positioning (absolute top right) */
    .card-arrow {
        position: absolute !important;
        top: 16px !important;
        right: 16px !important;
        width: 40px !important;
        height: 40px !important;
        margin-left: 0 !important;
        flex-shrink: 0 !important;
    }
    .card-arrow svg {
        width: 32px !important;
        height: 32px !important;
    }
}

@media (max-width: 380px) {
    .card-content h3 { 
        font-size: 1rem !important; 
        line-height: 1.3 !important;
    }
    .card-content p { 
        font-size: 0.76rem !important; 
        line-height: 1.5 !important;
    }
    .project-card {
        padding: 16px 10px !important;
        gap: 10px !important;
    }
}

/* 7. Extra Small Mobile Adjustments (320px - 422px) */
@media (max-width: 422px) {
    .hero-rows-wrapper { gap: 8px !important; }
    .badge { margin-left: -12px !important; }
    .badge:first-child { margin-left: 0 !important; }
    .Content-Second-Row { gap: 12px !important; }
}

/* 8. Tech Modal (Rooted in Technology) — Small Screen Fix (549px and below) */
@media (max-width: 549px) {
    /* Allow the modal content box to scroll if needed */
    .tech-modal-content {
        max-height: 92vh !important;
        overflow-y: auto !important;
        width: min(90vw, 460px) !important;
    }

    /* Scale down logo frame */
    .mresult-logo-frame {
        width: 80px !important;
        height: 80px !important;
    }
    .mresult-logo-frame img {
        width: 64px !important;
    }

    /* Reduce container padding */
    .tech-experience-container {
        padding: 0 16px 32px 16px !important;
        margin-top: -48px !important;
    }

    /* Make timeline-wrapper relative so SVG can be absolutely positioned */
    .timeline-wrapper {
        position: relative !important;
        margin-left: 39px !important; /* perfectly center under the 80px logo */
        padding-left: 32px !important; /* room for the absolute SVG */
    }

    /* SVG: stretch to match content height dynamically */
    .timeline-wrapper .timeline-tree-svg {
        position: absolute !important;
        left: 0 !important;
        top: -36px !important;
        width: 28px !important;
        height: calc(100% + 48px) !important;
        flex-shrink: 0 !important;
        overflow: visible !important;
    }

    /* Experience list: fills the space next to SVG */
    .experience-list {
        gap: 32px !important;
        padding-left: 0 !important;
        padding-top: 8px !important;
        width: 100% !important;
    }

    /* Scale down title text (managed smoothly by styles.css fluid typography) */
    .exp-date {
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
    }
}

/* 9. Tools Modal (Rooted in Tools) — Small Screen Fix (520px and below) */
@media (max-width: 520px) {
    #toolsModal .modal-content {
        width: calc(100vw - 32px) !important; 
    }

    .tools-grid {
        grid-template-columns: repeat(3, auto) !important; /* Items take only their needed width */
        justify-content: space-evenly !important; /* Re-distribute the wide modal space around tracks natively */
        row-gap: 32px !important;
        column-gap: 0px !important; 
        padding: 24px 12px !important;
    }
    
    .tool-icon {
        padding: 12px !important; 
    }
    
    .tool-item span {
        padding: 8px 16px !important; 
        font-size: 0.85rem !important;
    }
}

@media (max-width: 420px) {
    #toolsModal .modal-content {
        width: calc(100vw - 24px) !important; 
    }

    .tools-grid {
        grid-template-columns: repeat(3, auto) !important; /* Keeping 3 in a row */
        justify-content: space-evenly !important;
        row-gap: 24px !important;
        column-gap: 0px !important;
        padding: 24px 4px !important; 
    }
    
    .tool-icon {
        padding: 8px !important;
    }

    .tool-item span {
        padding: 4px 8px !important; /* Minimizes item width securely */
        font-size: 0.75rem !important;
    }
}

/* 10. Decrease visual-box height for small screens (500px to 320px) */
@media (max-width: 500px) {
    .visual-box,
    .card-visuals.writing-layout,
    .card-visuals.lens-layout {
        height: 120px !important;
    }

    .card-visuals.lens-layout {
        grid-template-columns: 1fr 1.3fr 1.5fr !important;
    }

    .user-info h4,
    .about-text h4 {
        font-weight: 600 !important;
    }
}

/* --- Nav Bar Responsive Overrides --- */
@media (max-width: 769px) {
    /* Prevent the navbar from wrapping invisible spacers or items to a second row, which creates that false "top padding" effect */
    .navbar {
        flex-wrap: nowrap !important;
    }
    
    /* Reduce the physical 32px padding on small screens so it doesn't look like an oversized empty top block */
    .nav-container {
        padding-top: 16px !important;
    }
}

@media (max-width: 765px) {
    /* Shift nav-links steadily to the left side and decrease btn padding to prevent layout breaking */
    .nav-spacer {
        display: none !important; /* Removes the flex spacer so nav-links align left */
    }
    .nav-actions {
        flex: unset !important; /* Fix overlapping: let it size naturally instead of taking 100% flex space */
        justify-content: flex-end !important;
        gap: 8px !important;
    }
    .nav-item {
        padding: 12px 14px !important;
    }

    .navbar {
        gap: 12px !important;
    }
}

@media (max-width: 769px) {
    /* Securely force text onto a single line so it doesn't wrap and stretch the height */
    .nav-item {
        white-space: nowrap !important;
    }
}

@media (max-width: 700px) {
    /* Hide top nav buttons */
    .nav-actions {
        display: none !important;
    }
    .navbar {
        justify-content: center !important;
    }
    .nav-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .hero {
        height: auto !important;
        overflow: visible !important;
        justify-content: flex-start !important;
        padding-top: 128px !important;
        padding-bottom: 0 !important;
    }

    /* Hero Structural Reordering */
    .hero-rows-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 32px !important;
    }
    
    .Content-Second-Row {
        display: contents !important; /* Explode the second row container so we can reorder Meet vs Precision */
    }

    /* 1. Meet Dhanush Block */
    .hero-content-stacked {
        order: 1 !important;
        text-align: center !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }
    .hero-heading-bold {
        text-align: center !important;
        margin: 0 auto !important;
        font-size: 34px !important;
        line-height: var(--lh-h2) !important;
    }
    .hero-subtitle-inline {
        display: block !important;
        font-size: var(--fs-h4) !important;
        font-weight: var(--fw-regular) !important;
        color: var(--text-captions) !important; /* Muted aesthetic matching the mockup */
        margin-top: 8px !important;
        line-height: 1.4 !important;
    }

    /* 2. Mobile Actions Container */
    .hero-mobile-actions {
        display: flex !important;
        justify-content: center !important;
        gap: 16px !important;
        order: 2 !important;
    }

    /* 3. Crafting + Precision — flex row that wraps, small gap between major segments */
    .Content-First-Row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        column-gap: 0 !important;
        row-gap: 0 !important;
        order: 3 !important;
        width: 100% !important;
        margin-top: 0 !important;
    }
    .Content-First-Row .hero-heading-light {
        display: block !important;
        white-space: normal !important;
        font-size: 2.8rem !important;
        line-height: 1.3 !important;
    }
    /* "with" + badges group: NEVER split these two */
    .hero-badges-group {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
        margin-right: 10px !important; /* Forces a gap before the Precision text */
    }
    .hero-badges-group .with-text {
        font-size: 2.8rem !important;
        line-height: 1.3 !important;
    }
    /* Show mobile Precision clone, hide original */
    .Precision-mobile {
        display: block !important;
        font-size: 2.8rem !important;
        line-height: 1.3 !important;
    }
    .Precision {
        display: none !important;
    }
    .hero-badges {
        display: inline-flex !important;
        vertical-align: middle !important;
    }
    .hero-badges .badge {
        margin-left: -16px !important;
    }
    .hero-badges .badge:first-child {
        margin-left: 0 !important;
    }


}

@media (max-width: 485px) {
    /* Restore natural heights while scaling text gracefully to fit. */
    .nav-item {
        font-size: 0.9rem !important;
        padding: 12px 12px !important; /* Strictly using multiples of 4 for paddings */
    }
    .nav-links {
        padding: 8px !important;
    }
    
    .nav-container {
        padding: 12px var(--site-pad) !important;
    }
}



@media (max-width: 500px) {
    /* var(--fs-h2) drops below var(--fs-h3)=30px around 667px — switch to h3 token to keep hierarchy */
    .hero-heading-bold {
        font-size: var(--fs-h3) !important;
    }
}

@media (max-width: 375px) {
    /* Gentle squeeze only for minimum width phones to prevent text wrap */
    .nav-item {
        font-size: 0.85rem !important;
        padding: 12px 8px !important; /* Strictly using multiples of 4 */
    }
    .nav-links {
        padding: 4px !important;
    }
    .hero-heading-bold {
        font-size: var(--fs-h3) !important; /* 2rem × 15px root = 30px — type scale aligned */
    }
}

@media (max-width: 422px) {
    /* Crafting Journeys line gets bigger on smallest screens for visual impact */
    .Content-First-Row .hero-heading-light,
    .hero-badges-group .with-text,
    .Precision-mobile {
        font-size: 3.2rem !important; /* 3.2 × 15px = 48px */
    }
}