/* =============================================================================
   RESPONSIVE STYLES — mobile-first breakpoints
   Loaded after style.css so these rules take precedence.
   ============================================================================= */

/* ---------- Large desktops / down from XL nav ---------- */
@media (max-width:1199.98px){
    .site-header{top:0;position:fixed;background:transparent;}
    .site-header .navbar{padding:14px 0;}
    .navbar-brand{color:#fff;}
    .site-header.scrolled{background:#fff;}
    .timeline-content h3{font-size:1.05rem;}
}

/* ---------- Tablets ---------- */
@media (max-width:991.98px){
    .section{padding:74px 0;}
    .section-head{margin-bottom:44px;}

    /* Timeline collapses to a single left rail */
    .timeline::before{left:22px;}
    .timeline-item,
    .timeline-item:nth-child(odd),
    .timeline-item:nth-child(even){width:100%;left:0;text-align:left;padding:16px 0 16px 60px;}
    .timeline-item:nth-child(odd) .timeline-marker,
    .timeline-item:nth-child(even) .timeline-marker{left:0;right:auto;}
    .timeline-item:nth-child(odd) .timeline-icon{margin-left:0;}

    /* Portfolio → 2 columns, reset spans */
    .portfolio-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px;}
    .portfolio-item.item-1,.portfolio-item.item-4,.portfolio-item.item-6{grid-column:span 1;grid-row:span 1;}
    .portfolio-item.item-1{grid-column:span 2;}

    .contact-card{padding:30px;}
    .hero-stats{gap:18px 34px;}
    .hero-stat-num{font-size:2.1rem;}
}

/* ---------- Landscape phones / small tablets ---------- */
@media (max-width:767.98px){
    body{font-size:15px;}
    .section{padding:60px 0;}
    .brand-logo{height:42px;padding:6px 10px;}
    .hero{padding:130px 0 80px;min-height:auto;}
    .hero-title{font-size:2rem;}
    .hero-subtitle{font-size:1.02rem;}
    .hero-buttons .btn{flex:1 1 100%;}
    .hero-stats{gap:24px;justify-content:space-between;margin-top:44px;}
    .hero-stat{flex:1 1 40%;}

    .section-head h2{font-size:1.65rem;}
    .footer-cta{text-align:center;padding:44px 0;}
    .footer-cta .text-lg-end{text-align:center!important;}

    /* Give room above mobile bottom CTA bar */
    body{padding-bottom:64px;}
    .floating-actions{bottom:78px;right:16px;}
    .fab{width:48px;height:48px;font-size:1.15rem;}

    .creative-grid{grid-template-columns:1fr;}
    .lead-modal-main{padding:34px 24px;}
    .lead-modal-main h2{font-size:1.4rem;}
    .contact-card{padding:24px;}
    .contact-card h3{font-size:1.3rem;}
    .stat-num{font-size:2.4rem;}
}

/* ---------- Portrait phones ---------- */
@media (max-width:575.98px){
    .container{padding-left:18px;padding-right:18px;}
    .hero-badge{font-size:.78rem;}
    .hero-stat{flex:1 1 45%;}
    .hero-stat-num{font-size:1.9rem;}
    .portfolio-grid{grid-template-columns:1fr;grid-auto-rows:190px;}
    .portfolio-item.item-1{grid-column:span 1;}
    .service-card,.why-card,.comm-card{padding:24px 20px;}
    .testimonial-card{padding:28px 22px;}
    .thankyou-actions .btn{width:100%;}
    .footer-newsletter{max-width:100%;}
    .btn-lg{padding:.85rem 1.5rem;font-size:.95rem;}
}

/* ---------- Very small devices ---------- */
@media (max-width:359.98px){
    .hero-title{font-size:1.7rem;}
    .brand-text{font-size:1.05rem;}
    .mobile-bottom-cta a{font-size:.68rem;}
}

/* ---------- Reduced motion accessibility ---------- */
@media (prefers-reduced-motion:reduce){
    *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
    .fab-whatsapp::before{display:none;}
}