@media (max-width: 1100px){
  :root{ --container: 1040px; }
}

@media (max-width: 980px){
  .grid-4{grid-template-columns:repeat(2, 1fr)}
  .stats__grid{grid-template-columns:repeat(2, 1fr)}
  .footer__grid{grid-template-columns:repeat(2, 1fr)}
  .modal__grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:repeat(2, 1fr)}
  .product-detail{grid-template-columns:1fr; gap:24px}
  .product-detail--reverse .product-detail__media{order:0}
}

@media (max-width: 820px){
  .nav__links{display:none}
  .hamburger{display:inline-flex}
  .mobile-drawer{display:block}
  .nav__actions .btn--primary{display:none}
  .brand::before{display:none !important}
  .hero.hero--split{padding:36px 0 28px}
  .hero__grid{grid-template-columns:1fr; gap:18px}
  .hero__figure{max-width:560px; margin-inline:auto}
  .hero__img{height:280px}
  .grid-3{grid-template-columns:1fr}
  .section-head{flex-direction:column; align-items:flex-start; gap:8px}
  .section{padding:48px 0}
  body.is-rtl .hero .hero__title{ font-size:clamp(28px, 7vw, 40px); line-height:1.4 }
  .hero .hero__title{ font-size:clamp(28px, 7vw, 42px) }
  .layout-contact{grid-template-columns:1fr; gap:24px}
  .map-embed iframe{height:280px}
}

@media (max-width: 600px){
  .container{padding-left:18px; padding-right:18px}
  .header .container{padding-left:14px; padding-right:14px}
  .brand__name{font-size:15px}
  .brand__tag{font-size:11px}
  .brand__mark{width:38px; height:38px}
  .nav__actions{gap:6px}
  .btn{padding:10px 16px; font-size:14px}
  .btn--small{padding:8px 12px; font-size:13px}
  .hero__img{
    height:auto;
    min-height:200px;
    max-height:min(50vh, 340px);
  }
  .form{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr; gap:24px}
  .footer{padding:32px 0 24px}
  .cta__panel{padding:18px}
  .gallery{grid-template-columns:1fr}
  .hero__line-art{display:none}
  .product__quick{grid-template-columns:1fr 1fr}
  .product__cta-row{flex-direction:column; align-items:stretch}
  .product__cta-row .btn{width:100%; text-align:center; justify-content:center}
  .table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .section{padding:40px 0}
  .section-head h2, h2{ font-size:clamp(22px, 5vw, 28px); line-height:1.3 }
  .hero .hero__title{ font-size:clamp(26px, 6.5vw, 36px) }
  body.is-rtl .hero .hero__title{ font-size:clamp(26px, 6.5vw, 34px); line-height:1.45 }
  .hero p{ font-size:15px; line-height:1.7 }
  .footer__socials a{ width:44px; height:44px; min-width:44px; min-height:44px }
  .form .field input, .form .field select, .form .field textarea{ font-size:16px }
  .timeline__item{ padding-left:24px }
  [dir="rtl"] .timeline__item{ padding-left:0; padding-right:24px }
}

@media (max-width: 380px){
  .hero__img{
    min-height:180px;
    max-height:min(45vh, 280px);
  }
  .brand__name{font-size:14px}
  .brand__tag{display:none}
  .hero .hero__title{ font-size:24px }
  body.is-rtl .hero .hero__title{ font-size:24px; line-height:1.5 }
}

/* Touch-friendly tap targets */
@media (hover: none) and (pointer: coarse){
  .btn, .nav__links a, .footer__socials a, a.tag, a.pill, .hamburger,
  .fab-menu__toggle, .fab-menu__icon, .carousel__btn{
    min-height:44px;
  }
  .carousel__dot{
    min-height:0;
    min-width:0;
  }
}

/* Container uses full width on phones */
@media (max-width: 600px){
  .container{
    width:min(var(--max), calc(100% - 28px));
  }
  .nav{
    padding:10px 0;
    gap:8px;
  }
  .dl-grid{
    grid-template-columns:1fr;
  }
  .tag-row{
    gap:8px;
  }
  .tag{
    font-size:12px;
    padding:6px 10px;
  }
}