/* =====================================================================
   Top Grade Movers — media.css
   Responsive / breakpoint overrides, aligned to the theme's standard
   breakpoint set (1200 / 992 / 768 / 576) wherever the content allows it:
     1200px+   xl   (default / no override needed)
     992–1199  lg
     768–991   md
     576–767   sm
     0–575     xs
   The header nav is the one exception: the primary nav (7 links, including
   the long "Terms & Conditions" label) plus search + CTA button measure
   ~1344px wide and cannot wrap or shrink below that (nowrap link text), so
   it is collapsed to a hamburger through 1399.98px instead of the standard
   991.98px — collapsing only at the standard lg breakpoint left the nav
   overflowing the viewport between 992px and ~1350px. See header.css.
   SCOPE — read before adding a rule here.
   This file is enqueued after the globally-loaded stylesheets (global.css,
   components/sections.css, layout/header.css, layout/footer.css) but BEFORE
   any pages/*.css, because page stylesheets are registered later in
   AssetsService. So it can only override selectors whose base rule lives in
   one of those global files.

   A breakpoint rule added here for a selector whose base rule lives in a
   pages/*.css file is DEAD ON ARRIVAL: the page stylesheet loads afterwards
   and, at equal specificity, wins at every width. Put page-specific
   breakpoints in that page's own stylesheet instead.
   ===================================================================== */

/* ---- lg and down (≤ 1199.98px) — tighten gutters ---- */
@media (max-width: 1199.98px) {
	:root {
		--container-spacing: 40px;
	}

	.site-footer__grid {
		gap: 40px;
	}

	/* Mission/vision: the divider's fixed 60px side margin plus each
	   column's own text leaves no room at the lg tier (992-1199px) —
	   the heading clips against the viewport edge. Tighten it here;
	   full 60px margin is restored above 1200px. */
	.mv-divider { margin-inline: 24px; }
}

/* ---- collapsed header nav (≤ 1399.98px) — see note above ---- */
@media (max-width: 1399.98px) {
	.site-header__inner {
		flex-wrap: wrap;
		min-height: 0;
		padding-block: 14px;
	}

	.site-header__brand .brand-logo,
	.site-header__brand img {
		width: 160px;
		height: 70px;
	}

	.site-nav-toggle {
		display: inline-flex;
		margin-left: auto;
	}

	/* Mobile drawer. Bootstrap's Collapse JS owns the open/close motion, and
	   its own `.collapse:not(.show){display:none}` outranks any single-class
	   rule here — so the drawer is driven by JS swapping `.collapse` for
	   `.collapsing` (height:0 + overflow:hidden), animating an inline height
	   up to scrollHeight, and only then landing `.show`.
	   `.show` therefore arrives AFTER the animation has already finished, so
	   anything the open state needs in order to be *visible* (width here)
	   must sit on the base class — gating it behind `.show` ran the whole
	   slide at zero width and made the menu appear to pop in with no motion.
	   The gap above the drawer is `margin-top`, not `padding-top`: padding
	   sits inside the border box Bootstrap animates down to height:0, which
	   would leave an 18px sliver that snaps away at the end of the close. */
	/* `order` drops the drawer onto its own row *below* the complete header
	   row instead of splitting it. The panel sits between the toggler and
	   .site-header__actions in DOM order, so without this, opening it pushed
	   search + quote off the navbar onto a third row. Search stays pinned
	   beside the logo and toggler at every width, including while the drawer
	   is open — it must never end up below the menu. */
	.site-nav-panel {
		flex-basis: 100%;
		margin-top: 18px;
		order: 1;
	}

	/* `.collapsing` is Bootstrap's own transient state class — qualified with
	   our class (never redefined bare) purely to soften its flat `ease` into a
	   symmetric in-out curve. The global prefers-reduced-motion block in
	   global.css still overrides this, via `!important`. */
	.site-nav-panel.collapsing {
		transition: height .36s cubic-bezier(.65, 0, .35, 1);
	}

	.site-nav,
	.site-nav .tg-navbar-nav {
		width: 100%;
	}

	.site-nav .tg-navbar-nav {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.site-nav .tg-nav-link {
		padding: 10px 0;
	}

	.site-nav .tg-nav-link::after {
		bottom: 4px;
	}

	.site-nav .sub-menu {
		position: static;
		min-width: 0;
		padding: 0 0 0 16px;
		border: 0;
		background: transparent;
		opacity: 0;
		visibility: hidden;
		max-height: 0;
		overflow: hidden;
		transform: none;
		transition: max-height .24s ease, opacity .2s ease, visibility 0s linear .24s;
	}

	/* `.is-open` is the class global.js toggles on the parent <li> (matching
	   the desktop rule in header.css). This previously read `..show` — an
	   invalid selector, so the whole rule was dropped by the CSS parser and
	   tapping a parent item like "Services" in the drawer expanded nothing. */
	.site-nav .tg-nav-item.is-open > .sub-menu {
		opacity: 1;
		visibility: visible;
		max-height: 260px;
		transition: max-height .24s ease, opacity .2s ease, visibility 0s;
	}

	.site-nav .sub-menu .tg-nav-link {
		padding: 8px 0;
	}
}

/* ---- md and down (≤ 991.98px) — 2-col footer, hero/about tweaks ---- */
@media (max-width: 991.98px) {
	:root {
		--container-spacing: 24px;
	}

	.hero__actions .tg-btn { flex: 1 1 auto; text-align: center; }
	.quote-card { margin-top: 2.5rem; }

	.mv-divider { display: none; }
	.mv-col + .mv-col { margin-top: 3rem; }

	.process-connector { display: none; }
	.process-step { flex: 1 1 45%; margin-bottom: 2.5rem; }
	.stats-bar .stat-item__num { font-size: 2.5rem; }
	.page-hero__overlay {
		background: linear-gradient(90deg, rgba(var(--dark-rgb), .97) 0%, rgba(var(--dark-rgb), .88) 100%);
	}
	.about-story__media { margin-bottom: 3rem; }
	.about-wcu__heading { margin-bottom: 1rem; }

	.site-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px;
		padding-top: 60px;
		padding-bottom: 40px;
	}

	.footer-col--brand,
	.footer-col--support,
	.footer-col--services,
	.footer-col--contact {
		padding-bottom: 0;
	}
	.footer-brand .brand-logo,
	.footer-brand img {
		width: 180px;
		height: 80px;
	}
	.cta-band { text-align: center; }
	.cta-band__actions { margin-top: 1.5rem; text-align: center; }
	.cta-band .tg-btn { width: 35%; white-space: normal; }
	.split-intro {
		padding: 5rem 1rem 0;
	}
}

/* ---- sm and down (≤ 767.98px) ---- */
@media (max-width: 767.98px) {
	.services__intro { margin-top: 1rem; }
	.services__actions .tg-btn { flex: 1 1 100%; }
	.process-step { flex: 1 1 100%; max-width: 100%; }
	.stats-bar .stat-item__num { font-size: 2rem; }
	.stats-bar .stat-item__label { font-size: .8rem; }
	.cta-band .tg-btn { width: 50%; white-space: normal; }
}

/* ---- xs and down (≤ 575.98px) ---- */
@media (max-width: 575.98px) {
	.site-header__brand .brand-logo,
	.site-header__brand img {
		width: 140px;
		height: 61px;
	}

	.site-header__actions {
		flex-wrap: wrap;
	}

	.btn-quote {
		flex: 1 1 auto;
		padding: 14px 24px;
	}

	.svc-list { padding-inline: 1.25rem; }

	.site-footer__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}

	.site-footer__bottom-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
	.cta-band .tg-btn { width: 100%; white-space: normal; }
	.about-story__signature {
		flex-direction: column;
		align-items: flex-start;
	}
}