/* ======================================================
   LUMA RAY — Responsive / Mobile-First CSS
   Breakpoints:
     xl  = 1280px
     lg  = 1100px
     md  = 1024px
     sm  = 768px
     xs  = 480px
   ====================================================== */

/* Mobile CTA helper */
.mobile-menu-cta {
    display: none !important;
}

/* ─── Container ─────────────────────────────────────── */
@media(max-width:1024px){
    .container{padding:0 24px}
}
@media(max-width:768px){
    .container{padding:0 18px}
}
@media(max-width:480px){
    .container{padding:0 14px}
}

/* ─── Header / Nav ──────────────────────────────────── */
@media(max-width:1024px){
    .nav{gap:18px}
    .nav-link{font-size:.82rem}
    .header-cta{font-size:.78rem;padding:9px 18px}
}
@media(max-width:768px){
    /* Hide desktop nav & CTA */
    .nav,.header-cta{display:none}
    .mobile-toggle{display:flex}
    .header:has(.nav.active),.header.menu-active{
        backdrop-filter:none !important;
        background:transparent !important;
        border-bottom:none !important
    }

    /* Mobile fullscreen overlay nav */
    .nav.active{
        display:flex;flex-direction:column;
        position:fixed;inset:0;z-index:998;
        background:rgba(13,13,31,.97);
        backdrop-filter:blur(28px) saturate(1.3);
        align-items:center;justify-content:center;
        gap:28px;padding:0 24px
    }
    .nav.active .nav-link{
        font-size:1.6rem;font-weight:700;
        letter-spacing:1px;color:#f0f2ff;
        text-transform:uppercase;font-family:var(--ff)
    }
    .nav.active .nav-link.active{
        background:var(--gd);-webkit-background-clip:text;
        background-clip:text;color:transparent
    }
    /* Show a CTA button inside mobile menu */
    .nav.active::after{
        display:none !important;
        content:none !important
    }
    .nav.active .mobile-menu-cta {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-top: 12px;
        padding: 14px 36px;
        background: var(--gd);
        color: #fff !important;
        border-radius: 50px;
        font-weight: 700;
        font-size: .9rem !important;
        box-shadow: 0 6px 32px rgba(0,212,255,.35);
        font-family: var(--ff);
        letter-spacing: 1px;
        text-transform: uppercase;
        -webkit-background-clip: initial;
        background-clip: initial;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .nav.active .mobile-menu-cta::after {
        display: none !important;
        content: none !important;
    }
    .nav.active .mobile-menu-cta:active {
        transform: scale(0.95);
    }
}
@media(max-width:480px){
    .nav.active .nav-link{font-size:1.3rem;gap:22px}
    .header{padding:14px 0}
    .header.scrolled{padding:10px 0}
    .logo-icon-svg{width:28px;height:28px}
    .logo-text{font-size:1.1rem;letter-spacing:1px}
    .logo{gap:8px}
}

/* ─── Hero ──────────────────────────────────────────── */
@media(max-width:1280px){
    .hero-geo{width:400px;height:400px;right:3%}
}
@media(max-width:1100px){
    .hero-geo{width:320px;height:320px;right:2%}
    .hero-content{max-width:600px}
}
@media(max-width:1024px){
    .hero-content{padding:150px 0 90px;max-width:580px}
    .hero-geo{width:280px;height:280px;opacity:.6}
    .hero-social{display:none}
}
@media(max-width:768px){
    .hero-content{padding:120px 0 64px;max-width:100%}
    .hero-geo{display:none}
    .hero-ambient{opacity:.3}
    .hero-title{font-size:clamp(1.9rem,7vw,2.8rem);letter-spacing:-0.5px}
    .hero-desc{font-size:.95rem}
    .hero-social{display:none}
    .hero-actions{gap:12px}
    .hero-actions .btn{padding:13px 24px;font-size:.85rem}
    /* Scroll down hint gradient at bottom */
    .hero::after{
        content:'';position:absolute;bottom:0;left:0;right:0;
        height:100px;pointer-events:none;z-index:3;
        background:linear-gradient(to bottom,transparent,var(--bg))
    }
}
@media(max-width:480px){
    .hero-content{padding:100px 0 56px}
    .hero-title{font-size:clamp(1.6rem,8vw,2.2rem)}
    .hero-eyebrow{font-size:.62rem;letter-spacing:2px;padding:5px 14px}
    .hero-desc{font-size:.88rem;line-height:1.75}
    .hero-features{gap:8px;margin-bottom:32px}
    .hero-feature{font-size:.82rem}
    .hero-actions{flex-direction:column;align-items:flex-start}
    .hero-actions .btn{width:100%;justify-content:center}
}

/* ─── Ticker ────────────────────────────────────────── */
@media(max-width:480px){
    .ticker-chip{padding:7px 14px;font-size:.72rem}
    .ticker-wrap{padding:14px 0}
}

/* ─── Stats Strip ───────────────────────────────────── */
@media(max-width:1100px){
    .stats-grid{grid-template-columns:repeat(2,1fr);gap:16px}
}
@media(max-width:768px){
    .stats-strip{padding:48px 0}
    .stats-grid{grid-template-columns:repeat(2,1fr);gap:14px}
    .stat-num{font-size:2rem}
    .stat-block{padding:22px 14px}
}
@media(max-width:480px){
    .stats-grid{grid-template-columns:repeat(2,1fr);gap:10px}
    .stat-block{padding:18px 12px}
    .stat-num{font-size:1.8rem}
    .stat-label{font-size:.65rem;letter-spacing:1px}
}

/* ─── About ─────────────────────────────────────────── */
@media(max-width:1100px){
    .about{padding:80px 0}
    .about-top{grid-template-columns:1fr;gap:48px}
    .about-portrait{justify-content:flex-start}
    .portrait-frame{max-width:420px}
    .portrait-img img{height:460px}
    /* Credentials row */
    .edu-cert-row{grid-template-columns:1fr;gap:20px}
    .exp-cards-row{grid-template-columns:1fr 1fr;gap:16px}
    .exp-track{display:none}
}
@media(max-width:768px){
    .about{padding:64px 0}
    .about-top{gap:36px}
    .portrait-frame{max-width:100%}
    .portrait-img img{height:380px}
    .about-stats-row{gap:10px}
    .astat{padding:12px 16px}
    .astat-num{font-size:1.4rem}
    .creds-wrap{margin-top:48px}
    .creds-eyebrow{margin-bottom:32px}
    /* Experience cards — 2 col on tablet */
    .exp-cards-row{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px}
    /* Edu/Cert stacked */
    .edu-cert-row{grid-template-columns:1fr;gap:16px}
    .edu-block,.cert-block{padding:22px}
    /* Credentials grid if present */
    .credentials-grid{grid-template-columns:1fr;gap:16px;margin-top:32px}
}
@media(max-width:480px){
    .about{padding:52px 0}
    .portrait-img img{height:300px}
    .about-heading{font-size:clamp(1.8rem,7vw,2.4rem)}
    .about-stats-row{flex-direction:column;gap:8px}
    .astat{width:100%}
    /* Experience cards — single column */
    .exp-cards-row{grid-template-columns:1fr;gap:10px}
    .exp-step{padding:0}
    .exp-step-body{padding:14px 16px}
    .exp-step-num{font-size:2rem}
    /* Creds eyebrow labels hide lines */
    .creds-line{display:none}
    .creds-eyebrow{justify-content:center}
}

/* ─── Services ──────────────────────────────────────── */
@media(max-width:1100px){
    .services{padding:80px 0}
    .services-header{flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:44px}
    .services-header-right{text-align:left;max-width:100%}
    .services-grid{flex-direction:column;gap:20px}
    .svc-col-right{margin-top:0}
}
@media(max-width:768px){
    .services{padding:64px 0}
    .services-grid{gap:16px}
    .svc-img-wrap{height:160px}
}
@media(max-width:480px){
    .services{padding:52px 0}
    .svc-body{padding:18px}
    .svc-img-wrap{height:140px}
    .svc-body h4{font-size:.85rem}
}

/* ─── Video Reel ────────────────────────────────────── */
@media(max-width:1100px){
    .vreel-mosaic{
        grid-template-columns:1fr 1fr;
        grid-template-rows:220px 220px 220px
    }
    .vr-c{grid-column:auto;grid-row:auto}
    .vreel-head{padding:32px 24px 20px}
}
@media(max-width:768px){
    .vreel-mosaic{
        grid-template-columns:1fr 1fr;
        grid-template-rows:180px 180px 180px
    }
    .vreel-head{padding:28px 18px 16px}
    .vreel-cta{padding:24px 0 36px}
}
@media(max-width:480px){
    .vreel-mosaic{
        grid-template-columns:1fr;
        grid-template-rows:180px 180px 180px 180px 180px
    }
    .vr-label{transform:translateY(0);opacity:1}/* always visible on mobile */
}

/* ─── Why Section ───────────────────────────────────── */
@media(max-width:1100px){
    .why{padding:80px 0}
    .why-grid{grid-template-columns:1fr;gap:48px}
    .collage-front{width:160px}
    .collage-mini{display:none}
}
@media(max-width:768px){
    .why{padding:64px 0}
    .why-collage{height:240px}
    .collage-back{right:0}
    .collage-front{display:none}
    .why-cards{gap:14px}
    .why-card{padding:18px 20px}
    .why-card-icon{width:40px;height:40px}
    .why-card-icon i{width:20px;height:20px}
}
@media(max-width:480px){
    .why{padding:52px 0}
    .why-collage{height:200px}
    .why-card{gap:14px}
    .why-card-text h4{font-size:.75rem}
    .why-card-text p{font-size:.8rem}
}

/* ─── Process ───────────────────────────────────────── */
@media(max-width:1100px){
    .process{padding:80px 0}
    .process-grid{
        grid-template-columns:1fr 1fr;
        gap:20px;margin-top:44px
    }
    .process-brand{grid-row:auto;grid-column:1/3}
}
@media(max-width:768px){
    .process{padding:64px 0}
    .process-grid{grid-template-columns:1fr;gap:16px}
    .process-brand{grid-column:auto}
    .step-img{height:110px}
}
@media(max-width:480px){
    .process{padding:52px 0}
    .process-step{padding:22px 18px}
    .process-brand{padding:28px 22px}
    .process-brand h3{font-size:1.15rem}
    .brand-tags{gap:8px}
    .brand-tag{padding:5px 12px;font-size:.68rem}
}

/* ─── Portfolio / Showcase List ─────────────────────── */
@media(max-width:1100px){
    .portfolio{padding:72px 0}
    .portfolio-bento{grid-template-columns:repeat(4,1fr);gap:10px;margin-top:44px}
    .pb-large{grid-column:span 2;height:260px}
    .pb-medium{grid-column:span 2;height:150px}
    .pb-small{grid-column:span 2;height:150px}
}
@media(max-width:768px){
    .portfolio{padding:56px 0}
    .portfolio-bento{grid-template-columns:1fr 1fr;gap:8px}
    .pb-large{grid-column:span 2;height:220px}
    .pb-medium{grid-column:span 2;height:160px}
    .pb-small{grid-column:span 1;height:140px}
    .pb-overlay{opacity:1;transform:translateY(0)} /* always show labels */
}
@media(max-width:480px){
    .portfolio{padding:48px 0}
    .portfolio-bento{grid-template-columns:1fr;gap:8px}
    .pb-large,.pb-medium,.pb-small{grid-column:auto;height:200px}
}

/* ─── Blog section (homepage) ───────────────────────── */
@media(max-width:1100px){
    .blog{padding:80px 0}
    .blog-grid{grid-template-columns:1fr;gap:36px;margin-top:44px}
}
@media(max-width:768px){
    .blog{padding:64px 0}
    .blog-card{flex-direction:column;gap:0;padding:0}
    .blog-card-img{width:100%;height:180px;border-radius:var(--r) var(--r) 0 0}
    .blog-card-body{padding:16px}
}
@media(max-width:480px){
    .blog{padding:52px 0}
    .blog-card-img{height:140px}
}

/* ─── Contact ───────────────────────────────────────── */
@media(max-width:1100px){
    .contact{padding:80px 0}
    .contact-grid{grid-template-columns:1fr;gap:48px}
    .contact-visual{height:180px}
    .contact-visual-main{right:40px;height:150px}
    .contact-visual-accent{width:130px}
    .contact-visual-accent img{height:100px}
}
@media(max-width:768px){
    .contact{padding:64px 0}
    .contact-form-card{padding:28px 22px}
    .form-row{grid-template-columns:1fr}
    .contact-visual{height:160px}
    .contact-visual-main{right:30px;height:130px}
    .contact-visual-accent{width:110px}
    .contact-visual-accent img{height:90px}
}
@media(max-width:480px){
    .contact{padding:52px 0}
    .contact-form-card{padding:22px 16px}
    .contact-visual{display:none} /* hide visual on small phones */
}

/* ─── Footer ────────────────────────────────────────── */
@media(max-width:1100px){
    .footer-top{grid-template-columns:1fr 1fr;gap:36px}
}
@media(max-width:768px){
    .footer{padding:56px 0 20px}
    .footer-top{grid-template-columns:1fr;gap:28px}
    .footer-bottom{flex-direction:column;text-align:center;gap:10px}
    .footer-brand p{max-width:100%}
}
@media(max-width:480px){
    .footer{padding:44px 0 16px}
    .footer-col h4{margin-bottom:14px}
    .footer-col a,.footer-col span{font-size:.8rem;margin-bottom:9px}
}

/* ─── Section commons ───────────────────────────────── */
@media(max-width:768px){
    .section-title{font-size:clamp(1.4rem,5vw,2rem);margin-bottom:12px}
    .section-desc{font-size:.88rem;margin-bottom:44px}
    .section-eyebrow{margin-bottom:18px}
}
@media(max-width:480px){
    .section-title{font-size:clamp(1.25rem,6vw,1.8rem)}
    .section-desc{font-size:.85rem;margin-bottom:32px}
    .glow-line{margin-bottom:32px}
}

/* ─── Buttons ───────────────────────────────────────── */
@media(max-width:480px){
    .btn{padding:12px 22px;font-size:.85rem}
    .btn-full{width:100%}
}

/* ─── Scroll-to-top ─────────────────────────────────── */
@media(max-width:768px){
    .scroll-top{bottom:20px;right:16px;width:40px;height:40px}
    .scroll-top i{width:18px;height:18px}
}

/* ─── Toast ─────────────────────────────────────────── */
@media(max-width:480px){
    .toast{bottom:64px;right:14px;left:14px;text-align:center}
}

/* ─── Cursor glow — disable on touch devices ─────────── */
@media(hover:none){
    .cursor-glow{display:none}
}

/* ─── Local SEO cities grid ─────────────────────────── */
@media(max-width:1100px){
    .local-cities-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:768px){
    .local-seo-section{padding:56px 0}
    .local-cities-grid{grid-template-columns:repeat(2,1fr);gap:10px;margin:28px 0 20px}
}
@media(max-width:480px){
    .local-cities-grid{gap:8px}
    .local-city-card{padding:16px 10px}
}

/* ─── Hero social sidebar — always hide on mobile ─────── */
@media(max-width:1024px){
    .hero-social{display:none}
}

/* ─── Preloader ─────────────────────────────────────── */
@media(max-width:480px){
    .preloader-track{width:160px}
    .preloader-logo .logo-icon-svg{width:36px;height:36px}
    .preloader-logo .logo-text{font-size:1.5rem}
}

/* ─── Blog card body (homepage) ─────────────────────── */
.blog-card-body{
    /* create a flex container for blog card text on mobile */
    display:flex;flex-direction:column;flex:1;padding:16px 0 0
}
@media(min-width:769px){
    .blog-card-body{padding:0}
}

/* ─── Why — show collage on all but smallest screens ─── */
@media(max-width:360px){
    .why-collage{display:none}
}

/* ─── Exp-step — prevent text overflow ─────────────── */
@media(max-width:480px){
    .exp-step-body h4{font-size:.84rem}
    .exp-step-body p{font-size:.72rem}
    .exp-step-tag{font-size:.56rem;letter-spacing:1px}
}

/* ─── Process brand card ────────────────────────────── */
@media(max-width:480px){
    .process-brand{padding:24px 18px}
    .process-brand h3{font-size:1.05rem;margin-bottom:10px}
    .process-brand p{font-size:.84rem;margin-bottom:18px}
}

/* ─── Image lazy load — ensure visible after load ────── */
img[loading="lazy"]{opacity:0;transition:opacity .5s ease}
img.loaded{opacity:1}

/* ─── Fine-tune: medium breakpoint 1024px ──────────── */
@media(max-width:1024px){
    .about-top{grid-template-columns:1fr;gap:44px}
    .why-grid{gap:56px}
    .process-grid{grid-template-columns:1fr 1fr}
    .process-brand{grid-column:1/3;grid-row:auto}
}

/* ─── Retina / high-dpi sharpness ────────────────────── */
@media(-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){
    .hero-grid{opacity:.6} /* soften grid lines on retina */
}

/* ─── Landscape phone (short viewport) ──────────────── */
@media(max-width:768px) and (orientation:landscape) and (max-height:500px){
    .hero{min-height:auto}
    .hero-content{padding:90px 0 48px}
    .hero-title{font-size:clamp(1.4rem,4vw,2rem)}
}

/* ─── Extra-small wristwatch / embed (< 320px) ──────── */
@media(max-width:320px){
    .container{padding:0 12px}
    .hero-title{font-size:1.45rem}
    .btn{padding:11px 18px}
    .stats-grid{grid-template-columns:1fr}
}