/* Mohsin Traders - shared website layout, responsive & motion.
 Linked by every page in this UI kit. Tokens come from /styles.css. */

body { margin: 0; background: var(--surface-page); color: var(--text-body); }

/* offset anchor jumps so sticky header doesn't cover the target */
section { scroll-margin-top: 120px; }

/* header nav: mobile controls hidden until the breakpoint */
.mt-mobile-toggle,
.mt-mobile-menu { display: none; }

/* ---------------------------------------------------------------
 Header - collapse the desktop nav + CTAs to a hamburger early
 enough that the utility bar, links and buttons never overflow.
----------------------------------------------------------------*/
@media (max-width: 1024px) {
 .mt-desktop-nav { display: none !important; }
 .mt-mobile-toggle { display: inline-flex !important; }
}
@media (max-width: 600px) {
 .mt-util-right { display: none !important; }
}

/* ---------------------------------------------------------------
 Responsive grids
----------------------------------------------------------------*/
@media (max-width: 980px) {
 .mt-hero-grid,
 .mt-rfq-grid,
 .mt-faq-grid,
 .mt-explore-row,
 .mt-pd-grid,
 .mt-cat-grid { grid-template-columns: 1fr !important; }
 /* hero visual drops below the copy on narrow screens */
 .mt-hero-visual { display: none !important; }
}
@media (max-width: 860px) {
 .mt-why-grid,
 .mt-reasons,
 .mt-stats-band,
 .mt-form-row,
 .mt-ind-grid,
 .mt-footer-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 1100px) and (min-width: 861px) {
 .mt-footer-grid { grid-template-columns: 1fr 1fr !important; }
 .mt-stats-band { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---------------------------------------------------------------
 Scroll reveal - subtle fade-up as sections enter the viewport.
 Off by default for reduced-motion and print so screenshots,
 PDF export and accessibility always show the final state.
----------------------------------------------------------------*/
@media (prefers-reduced-motion: no-preference) {
 .mt-reveal {
 opacity: 0;
 transform: translateY(18px);
 transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
 will-change: opacity, transform;
 }
 .mt-reveal.is-in { opacity: 1; transform: none; }
}
@media print {
 .mt-reveal { opacity: 1 !important; transform: none !important; }
}