/* =========================================================
   MAIJIDDA TAILORING SERVICES — RESPONSIVE STYLESHEET
   Mobile-first overrides. Base styles in style.css already
   target small screens where reasonable; this file refines
   spacing/columns as viewport grows, then locks the desktop
   editorial layout at larger breakpoints.
   ========================================================= */

/* ---------- BASE / MOBILE (<576px) ---------- */
.nav__links{
  position:fixed; top:0; right:0; height:100vh; width:min(78vw,320px);
  background:#fff; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:var(--space-3); padding:var(--space-6) var(--space-4);
  transform:translateX(100%); transition:transform .45s var(--ease); box-shadow:-10px 0 40px rgba(0,0,0,.15);
}
.nav__links.is-open{ transform:translateX(0); }
.nav__link{ color:var(--ink) !important; font-size:1rem; width:100%; }
.nav__link--cta{ text-align:center; }
.nav__burger{ display:flex; }
.nav__burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2){ opacity:0; }
.nav__burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.nav__burger.is-open span{ background:var(--ink); }

.hero__vertical{ display:none; }
.hero__stat-float{ position:static; margin:var(--space-3) var(--space-4) 0; text-align:left; display:inline-block; }
.hero__content{ padding:0 var(--space-3) var(--space-5); }
.hero__scroll-cue{ display:none; }

.about__inner{ grid-template-columns:1fr; gap:var(--space-6); padding:0 var(--space-3); }
.about__frame{ display:none; }
.about__badge{ left:12px; bottom:-16px; padding:12px 16px; min-width:120px; }
.about__grid{ grid-template-columns:1fr; }

.services__row{ grid-template-columns:1fr; padding:0 var(--space-3); }
.service-card--offset{ transform:none; }
.service-card--offset:hover{ transform:translateY(-8px); }

.products__layout{ grid-template-columns:1fr; padding:0 var(--space-3); }
.product-feature{ min-height:380px; }
.product-card{ flex-direction:column; }
.product-card__img{ width:100%; height:180px; }

.gallery__masonry{ columns:1; padding:0 var(--space-3); }
.gallery__item:nth-child(2){ margin-top:0; }

.stats__grid{ grid-template-columns:1fr 1fr; row-gap:var(--space-4); padding:0 var(--space-3); }

.why__list{ padding:0 var(--space-3); }
.why__list::before{ left:24px; }
.why__row, .why__row--reverse{ width:100%; margin-left:0; flex-direction:row; text-align:left; }
.why__icon{ width:48px; height:48px; font-size:1.05rem; }

.team__row{ grid-template-columns:1fr; padding:0 var(--space-3); gap:var(--space-5); }
.team-card--offset{ transform:none; }
.team-card__img{ width:160px; height:160px; }

.faq__layout{ grid-template-columns:1fr; padding:0 var(--space-3); gap:var(--space-4); }

.contact__layout{ grid-template-columns:1fr; padding:0 var(--space-3); }
.contact__form{ padding:var(--space-4); }

.footer__grid{ grid-template-columns:1fr 1fr; padding:var(--space-5) var(--space-3); }
.footer__col--brand{ grid-column:1 / -1; }
.footer__bottom{ flex-direction:column; text-align:center; padding:var(--space-3); }

.section-head{ padding:0 var(--space-3); }
.section-head--split{ flex-direction:column; align-items:flex-start; }

.back-to-top{ width:44px; height:44px; }
.btn{ min-height:48px; }

/* ---------- ≥360px ---------- */
@media (min-width:360px){
  .stats__number, .stats__plus{ font-size:2.4rem; }
}

/* ---------- ≥480px ---------- */
@media (min-width:480px){
  .team-card__img{ width:180px; height:180px; }
  .product-card{ flex-direction:row; }
  .product-card__img{ width:42%; height:auto; }
}

/* ---------- ≥576px (small tablets) ---------- */
@media (min-width:576px){
  .about__grid{ grid-template-columns:1fr 1fr; }
  .gallery__masonry{ columns:2; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
}

/* ---------- ≥768px (tablets) ---------- */
@media (min-width:768px){
  :root{ --nav-h:92px; }
  .nav__burger{ display:none; }
  .nav__links{
    position:static; height:auto; width:auto; background:transparent; flex-direction:row;
    align-items:center; padding:0; gap:var(--space-3); transform:none; box-shadow:none;
  }
  .nav__link{ color:#fff !important; width:auto; font-size:.85rem; }
  .nav.is-scrolled .nav__link{ color:var(--ink) !important; }

  .hero__vertical{ display:block; }
  .hero__stat-float{ position:absolute; right:var(--space-4); bottom:var(--space-5); text-align:right; margin:0; }
  .hero__scroll-cue{ display:block; }

  .about__inner{ grid-template-columns:.85fr 1.15fr; padding:0 var(--space-4); }
  .about__frame{ display:block; }

  .services__row{ grid-template-columns:repeat(2,1fr); padding:0 var(--space-4); }
  .service-card--offset{ transform:translateY(30px); }
  .service-card--offset:hover{ transform:translateY(22px); }

  .products__layout{ grid-template-columns:1.3fr 1fr; padding:0 var(--space-4); }

  .gallery__masonry{ columns:3 180px; padding:0 var(--space-4); }
  .gallery__item:nth-child(2){ margin-top:var(--space-6); }

  .stats__grid{ grid-template-columns:repeat(4,1fr); padding:0 var(--space-4); }

  .team__row{ grid-template-columns:repeat(3,1fr); padding:0 var(--space-4); }
  .team-card--offset{ transform:translateY(40px); }

  .faq__layout{ grid-template-columns:.8fr 1.2fr; padding:0 var(--space-4); }
  .contact__layout{ grid-template-columns:1fr 1fr; padding:0 var(--space-4); }

  .footer__grid{ grid-template-columns:1.4fr 1fr 1fr; padding:var(--space-6) var(--space-4) var(--space-5); }
  .footer__col--brand{ grid-column:auto; }

  .section-head, .section-head--split{ padding:0 var(--space-4); flex-direction:row; align-items:flex-end; }
}

/* ---------- ≥992px ---------- */
@media (min-width:992px){
  .services__row{ grid-template-columns:repeat(4,1fr); }
  .footer__grid{ grid-template-columns:1.6fr 1fr 1fr 1fr 1fr; }
}

/* ---------- ≥1024px ---------- */
@media (min-width:1024px){
  .nav__links{ gap:var(--space-4); }
  .nav__link{ font-size:.88rem; }
}

/* ---------- ≥1200px ---------- */
@media (min-width:1200px){
  .hero__title{ font-size:5.2rem; }
}

/* ---------- ≥1600px ---------- */
@media (min-width:1600px){
  .about__inner, .products__layout, .team__row, .faq__layout, .contact__layout,
  .section-head, .stats__grid, .services__row, .gallery__masonry, .footer__grid,
  .why__list{ max-width:1440px; }
}

/* ---------- Guard against horizontal scroll ---------- */
html, body{ max-width:100%; }