/**
 * uxneuron — responsive.css
 *
 * Desktop-first breakpoints, ordered largest → smallest so later rules
 * naturally win the cascade at small viewports without needing
 * `!important` anywhere (a deliberate improvement over the original
 * static design, which relied on `!important` to override its own inline
 * styles — this theme has no competing inline styles to fight).
 *
 * Enqueued last (see inc/enqueue.php) so it always has the final say.
 *
 * @package uxneuron
 */

/* ========================================================================
   1920px — extra breathing room on very large displays.
   ===================================================================== */
@media (max-width: 1920px) {
	:root {
		--section-x: 64px;
	}
}

/* ========================================================================
   1600px — back to the design's default horizontal rhythm.
   ===================================================================== */
@media (max-width: 1600px) {
	:root {
		--section-x: 56px;
	}
}

/* ========================================================================
   1440px — slightly tighten display type on laptop-class screens.
   ===================================================================== */
@media (max-width: 1440px) {
	.home-hero__title { font-size: 76px; }
	.page-hero__title { font-size: 62px; }
	.contact-hero__title { font-size: 54px; }
}

/* ========================================================================
   1366px
   ===================================================================== */
@media (max-width: 1366px) {
	:root {
		--section-x: 48px;
	}
	.home-hero__title { font-size: 72px; }
	.page-hero__title { font-size: 58px; }
	.contact-hero__title { font-size: 52px; }
}

/* ========================================================================
   1280px
   ===================================================================== */
@media (max-width: 1280px) {
	.home-hero__title { font-size: 68px; }
	.page-hero__title { font-size: 54px; }
	.contact-hero__title { font-size: 48px; }
	.section-head__heading,
	.values-section__heading { font-size: 44px; }
	.cta-band__heading { font-size: 46px; }
}

/* ========================================================================
   1024px — tablet landscape: start collapsing 4-column grids to 2,
   two-column split layouts begin to stack.
   ===================================================================== */
@media (max-width: 1024px) {
	:root {
		--section-x: 40px;
	}
	.grid--4,
	.team-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.home-hero__title { font-size: 58px; }
	.page-hero__title { font-size: 48px; }
	.contact-hero__title { font-size: 44px; }
	.service-row,
	.work-feature-grid,
	.story-grid,
	.contact-hero__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.service-row__desc {
		max-width: none;
	}
	.story-visual {
		height: 280px;
	}
}

/* ========================================================================
   992px — show the mobile nav toggle, hide the desktop link row, drop
   remaining 3-column grids to 2.
   ===================================================================== */
@media (max-width: 992px) {
	.site-header__nav .navlink {
		display: none;
	}
	.nav-toggle {
		display: flex;
	}
	.grid--3,
	.industries-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.stats-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}
	.work-feature-grid--small {
		grid-template-columns: 1fr 1fr;
	}
	.home-hero__title { font-size: 52px; }
	.page-hero__title { font-size: 46px; }
	.contact-hero__title { font-size: 42px; }
	.section-head__heading,
	.values-section__heading { font-size: 38px; }
	.content-body-wrap--with-sidebar {
		grid-template-columns: 1fr;
	}
	.detail-gallery {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ========================================================================
   768px — the original design's primary "mobile" breakpoint: tighter
   section padding, every remaining multi-column grid goes to 2 (or fewer),
   nav top bar gets shorter.
   ===================================================================== */
@media (max-width: 768px) {
	:root {
		--section-x: 30px;
	}
	.site-header {
		padding-top: 14px;
		padding-bottom: 14px;
	}
	.home-hero__title { font-size: 48px; line-height: 1.06; }
	.page-hero__title { font-size: 42px; line-height: 1.08; }
	.contact-hero__title { font-size: 38px; }
	.work-feature-grid--small {
		margin-top: 16px;
		gap: 16px;
	}
	#workgrid {
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}
	.team-grid {
		grid-template-columns: 1fr 1fr;
		gap: 18px;
	}
	.cta-band {
		padding: 56px 30px;
	}
	.cta-band__heading { font-size: 38px; }
	.cta-band__description { font-size: 17px; }
	.footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}
	.work-feature-card__media { height: 300px; }
	.work-feature-card__media--small { height: 200px; }
}

/* ========================================================================
   576px — single-column everything; matches the original's ~600px
   breakpoint where the whole layout switches to a single track.
   ===================================================================== */
@media (max-width: 576px) {
	:root {
		--section-x: 20px;
	}
	.grid--3, .grid--4, .grid--2,
	.industries-grid,
	.stats-grid,
	.work-feature-grid--small,
	.form-row--two,
	.detail-gallery {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.home-hero__title { font-size: 38px; }
	.page-hero__title { font-size: 36px; }
	.contact-hero__title { font-size: 34px; }
	.section-head__heading,
	.values-section__heading { font-size: 30px; line-height: 1.16; }
	.home-hero__description,
	.page-hero__description,
	.contact-hero__description { font-size: 17px; }
	.cta-band { padding: 46px 24px; border-radius: var( --radius-2xl ); }
	.testimonial-panel { padding: 40px 28px; }
	.testimonial-panel__quote { font-size: 22px; }
	.service-row__subitems { grid-template-columns: 1fr 1fr; }
	.brand__logo--desktop { display: none; }
	.brand__logo--mobile { display: block; }
	.post-card {
		grid-template-columns: 1fr;
	}
	.post-card__media {
		height: 180px;
	}
	.content-header__title {
		font-size: 32px;
	}
	#workgrid { grid-template-columns: 1fr; }
	.footer-grid { grid-template-columns: 1fr; }
	.service-row__title { font-size: 28px; }
	.story-copy__heading { font-size: 28px; }
	.work-feature-card__media { height: 240px; }
	.work-feature-card__media--small { height: 170px; }
	.contact-form-card { padding: 28px 22px; }
	.site-header .btn-pill { display: none; }
}

/* ========================================================================
   480px — original's smallest tested width; the bulk of "phone" tuning.
   ===================================================================== */
@media (max-width: 480px) {
	:root {
		--section-x: 18px;
	}
	.home-hero__title { font-size: 33px; }
	.page-hero__title { font-size: 33px; }
	.contact-hero__title { font-size: 30px; }
	.home-hero { padding: 64px var( --section-x ) 52px; }
	.page-hero, .contact-hero { padding-top: 52px; }
	.cta-band__heading { font-size: 30px; }
	.service-row__subitems { grid-template-columns: 1fr; }
	.mobile-nav__panel { width: 88vw; }
	.story-visual { height: 240px; }
	.testimonial-panel__quote { font-size: 20px; }
}

/* ========================================================================
   390px
   ===================================================================== */
@media (max-width: 390px) {
	:root {
		--section-x: 16px;
	}
	.home-hero__title { font-size: 30px; }
	.page-hero__title { font-size: 31px; }
	.contact-hero__title { font-size: 28px; }
	.team-grid { grid-template-columns: 1fr; }
	.stats-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
	.stat__number { font-size: 38px; }
}

/* ========================================================================
   375px
   ===================================================================== */
@media (max-width: 375px) {
	.home-hero__title { font-size: 29px; }
	.page-hero__title { font-size: 30px; }
	.contact-hero__title { font-size: 27px; }
	.hero-badge { font-size: 12px; padding: 8px 14px; }
}

/* ========================================================================
   320px — smallest supported width.
   ===================================================================== */
@media (max-width: 320px) {
	:root {
		--section-x: 14px;
	}
	.home-hero__title { font-size: 26px; }
	.page-hero__title { font-size: 27px; }
	.contact-hero__title { font-size: 25px; }
	#workgrid { grid-template-columns: 1fr; }
	.work-feature-grid--small { grid-template-columns: 1fr; }
	.btn, .btn-primary, .btn-white { padding: 14px 22px; font-size: 15px; }
}