/* ==========================================================================
   Brandroot Motion — responsive layer
   --------------------------------------------------------------------------
   Four tiers, each with its own layout (not a scaled-down desktop):
     Desktop  ≥1440px   full cinematic system
     Laptop   1024–1439 same interactions, tighter rhythm
     Tablet   768–1023  no pinning; native swipe for services; stacked story
     Mobile   ≤767      native scroll, vertical stacks, subtle reveals only
   Matching JavaScript tiers live in motion-engine.js (gsap.matchMedia).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Desktop ≥1440
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
	:root {
		--br-section-y: clamp(150px, 10.5vw, 180px);
	}
}

/* --------------------------------------------------------------------------
   Laptop 1024–1439
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1439.98px) {
	:root {
		--br-section-y: clamp(120px, 10vw, 144px);
		--br-fs-display: clamp(3rem, 0.8rem + 7.4vw, 7.5rem);
	}

	.br-service-card {
		flex-basis: clamp(300px, 36vw, 440px) !important;
	}

	.br-story-stage.is-pinned .br-story-copy {
		max-width: 440px;
	}
}

/* --------------------------------------------------------------------------
   Tablet 768–1023
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023.98px) {
	:root {
		--br-section-y: clamp(80px, 10.5vw, 110px);
		--br-fs-display: clamp(3rem, 1rem + 7vw, 5.75rem);
		--br-header-h: 76px;
	}

	/* Services: native horizontal swipe with snap (no pin, no scroll-jacking). */
	.br-service-card {
		flex-basis: min(70vw, 460px) !important;
	}

	/* Story: single column, copy above its image. */
	.br-story-stage,
	.br-story-stage > .e-con-inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 28px;
	}

	.br-story-copy,
	.br-story-image {
		grid-column: 1;
	}

	.br-story-copy {
		grid-row: calc(var(--br-step, 1) * 2 - 1);
		max-width: 600px;
		margin-top: clamp(32px, 6vw, 56px);
	}

	.br-story-image {
		grid-row: calc(var(--br-step, 1) * 2);
		aspect-ratio: 16 / 10;
	}

	/* Projects: shorter cards, still sticky-stacked only on desktop. */
	.br-project-card {
		min-height: min(68vh, 640px);
	}

	/* Gallery: simpler 2-column rhythm. */
	.br-gallery,
	.br-gallery > .e-con-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.br-gallery .br-parallax-img:nth-child(n) {
		grid-column: auto;
		margin-top: 0;
		aspect-ratio: 4 / 5;
	}

	.br-gallery .br-parallax-img:nth-child(2n) {
		margin-top: clamp(48px, 9vw, 96px);
	}

	.br-gallery .br-parallax-img:nth-child(5n) {
		grid-column: 1 / -1;
		aspect-ratio: 16 / 9;
		margin-top: 0;
	}

	/* Full-bleed reveal: static, slightly shorter. */
	.br-expand-media {
		height: 80vh;
		height: 80svh;
	}

	.br-expand {
		min-height: 80vh;
		min-height: 80svh;
	}
}

/* --------------------------------------------------------------------------
   Mobile ≤767
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	:root {
		--br-section-y: clamp(60px, 16vw, 80px);
		--br-fs-display: clamp(2.75rem, 1.2rem + 9vw, 4.25rem);
		--br-fs-h2: clamp(2rem, 1.4rem + 3.5vw, 2.75rem);
		--br-header-h: 64px;
		--br-radius-lg: 10px;
	}

	/* Hero: slightly shorter so the next section is hinted; mobile address bars handled by svh. */
	.br-hero {
		min-height: 92vh;
		min-height: 92svh;
	}

	.br-hero-media {
		inset: 0;
	}

	:where(.br-hero-title) .elementor-heading-title {
		line-height: 0.98;
	}

	/* Services: vertical stack, full-width cards, no horizontal scroller. */
	.br-services-track,
	.br-services-track > .e-con-inner {
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		gap: 20px;
	}

	.br-services-track {
		overflow: visible;
		scroll-snap-type: none;
		padding-bottom: 0;
	}

	.br-service-card {
		flex: 0 0 auto !important;
		width: 100% !important;
	}

	.br-services-progress {
		display: none !important;
	}

	/* Stats: two per row. */
	.br-stats,
	.br-stats > .e-con-inner {
		flex-wrap: wrap !important;
	}

	.br-stat {
		flex: 1 1 calc(50% - 12px) !important;
		min-width: 0;
	}

	/* Story: one column, copy then image, for every step. */
	.br-story-stage,
	.br-story-stage > .e-con-inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 20px;
	}

	.br-story-copy,
	.br-story-image {
		grid-column: 1;
	}

	.br-story-copy {
		grid-row: calc(var(--br-step, 1) * 2 - 1);
		margin-top: 40px;
	}

	.br-story-copy:nth-child(1) {
		margin-top: 0;
	}

	.br-story-image {
		grid-row: calc(var(--br-step, 1) * 2);
		aspect-ratio: 4 / 3;
	}

	/* Projects: plain vertical list of cards. */
	.br-project-card {
		min-height: 72vh;
		min-height: 72svh;
		border-radius: var(--br-radius-lg);
	}

	/* Full-bleed reveal: image on top, text below on the dark ground (no overlay crowding). */
	.br-expand,
	.br-expand > .e-con-inner {
		min-height: 0;
		background-color: var(--br-dark);
	}

	.br-expand-media {
		grid-area: 1 / 1 !important;
		height: 62vh;
		height: 62svh;
	}

	.br-expand-media::after {
		display: none;
	}

	.br-expand-content {
		grid-area: 2 / 1 !important;
		align-self: start;
		padding: 32px var(--br-gutter) 56px !important;
	}

	/* Category list: tighter rows; hover preview is disabled on touch anyway. */
	.br-project-link .elementor-heading-title {
		font-size: clamp(1.5rem, 1.1rem + 3vw, 2.25rem);
	}

	/* Before/after: smaller knob, still a 44px touch target via the range input. */
	.br-compare__knob {
		width: 44px;
		height: 44px;
	}

	.br-compare__tag {
		font-size: 11px;
	}

	/* Gallery: single column with a gentle alternating inset. */
	.br-gallery,
	.br-gallery > .e-con-inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 24px;
	}

	.br-gallery .br-parallax-img:nth-child(n) {
		grid-column: 1;
		margin-top: 0;
		aspect-ratio: 4 / 5;
	}

	.br-gallery .br-parallax-img:nth-child(3n + 2) {
		width: 82% !important;
		justify-self: end;
		aspect-ratio: 1 / 1;
	}

	.br-gallery .br-parallax-img img {
		scale: 1.06;
	}

	/* Final CTA: allow content height on short screens. */
	.br-final-cta {
		min-height: 86vh;
		min-height: 86svh;
	}
}

/* --------------------------------------------------------------------------
   Short landscape screens (phones turned sideways): no tall fixed heights.
   -------------------------------------------------------------------------- */
@media (max-height: 500px) and (orientation: landscape) {
	.br-hero,
	.br-expand,
	.br-final-cta {
		min-height: 100vh;
	}

	.br-expand-media {
		height: 100vh;
	}

	.br-project-card {
		min-height: 90vh;
	}
}

/* --------------------------------------------------------------------------
   Header safety below laptop: the secondary CTA steps aside so the logo and
   the Nav Menu toggle always fit; nothing can push the page sideways.
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
	.br-header .br-header-cta {
		display: none !important;
	}

	.br-header {
		flex-wrap: nowrap;
		min-width: 0;
	}

	.br-header > *,
	.br-header > .e-con-inner > * {
		min-width: 0;
	}
}

@media (max-width: 767.98px) {
	/* Tighter header gutters on phones so logo + menu toggle never exceed the viewport. */
	.br-header {
		padding-inline: var(--br-gutter) !important;
	}

	.br-header .elementor-widget-theme-site-logo img,
	.br-header .br-logo img {
		max-width: 132px;
	}
}

@media (max-width: 767.98px) {
	/* Hero actions: two tidy buttons, never one word per line. */
	.br-hero .elementor-button {
		white-space: nowrap;
	}

	.br-hero-actions,
	.br-hero-actions > .e-con-inner {
		flex-wrap: wrap !important;
	}

	/* Stats: exact two-up grid regardless of the gap set in Elementor. */
	.br-stats,
	.br-stats > .e-con-inner {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 20px !important;
	}

	.br-stat {
		width: auto !important;
	}
}