/* Front-page mobile adjustments. Desktop composition uses the existing styles. */
@media (max-width: 920px) {
	body.home .slb-page--front > .slb-hero-v5 {
		/* Match the closed header before JS measures custom logos or resized text. */
		padding-top: calc(var(--slb-mobile-header-height, clamp(64px, 10vw, 80px) + 22px) + 30px);
	}

	body.home .slb-page--front > .slb-hero-v5 > .slb-container.slb-hero-grid {
		padding-top: 0;
		align-items: start;
	}

	body.home .slb-page--front .slb-hero-copy {
		padding-top: 0;
	}

	html.slb-mobile-nav-open,
	body.home.slb-mobile-nav-open {
		overflow: hidden;
		overscroll-behavior: none;
	}

	/* Keep composited page layers from flashing below the fullscreen menu. */
	body.home.slb-mobile-nav-open .slb-page--front,
	body.home.slb-mobile-nav-open .slb-footer {
		opacity: 0;
		transition: none;
	}

	body.home .slb-header {
		overflow: visible;
	}
	body.home .slb-header__inner {
		width: 100%;
		max-width: none;
		margin-inline: 0;
	}
	body.home .slb-header__nav {
		width: 100%;
		margin-inline: 0;
		padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
		border-radius: 0;
		border-inline: 0;
	}

	body.home .slb-header.is-scrolled .slb-header__nav {
		background: var(--slb-surface);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	body.home .slb-work-process-section__steps {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		width: 100%;
	}

	body.home .slb-work-process-section__steps .slb-service-card {
		width: 100%;
		max-width: none;
		min-height: auto;
	}

	/* Keep the same backgrounds without repainting large gradients on every frame. */
	body.home .slb-page--front .slb-hero-v5,
	body.home .slb-page--front .slb-hero-v5::before,
	body.home .slb-page--front .slb-hero-v5::after,
	body.home .slb-page--front .slb-hero-grid::after,
	body.home .slb-page--front .slb-hero-atmosphere::before,
	body.home .slb-page--front .slb-hero-atmosphere::after,
	body.home .slb-page--front .slb-consultation-card,
	body.home .slb-page--front .slb-final-cta__card {
		animation: none;
	}

	body.home .slb-page--front .slb-motion-paused,
	body.home .slb-page--front .slb-motion-paused::before,
	body.home .slb-page--front .slb-motion-paused::after,
	body.home .slb-page--front .slb-motion-paused *,
	body.home .slb-page--front .slb-motion-paused *::before,
	body.home .slb-page--front .slb-motion-paused *::after {
		animation-play-state: paused !important;
	}

	body.home .slb-header__nav > .slb-header__brand .slb-header__brand-logo {
		height: clamp(64px, 10vw, 80px);
		max-width: min(180px, 56vw);
	}

	body.home .slb-header__panel[hidden] {
		display: none;
	}

	body.home.slb-mobile-nav-open .slb-header {
		inset: 0;
		height: 100vh;
		height: 100dvh;
		z-index: 100010;
		background: linear-gradient(100deg, rgba(255,255,255,0.94), rgba(255,255,255,0.64)), url('../images/brand/mobile-menu-bg.webp') right bottom / auto 85% no-repeat, #f5f1ff;
	}

	body.home.slb-mobile-nav-open .slb-header__inner {
		width: 100%;
		height: 100%;
	}
	body.home .slb-header :is(.slb-header__menu-toggle, .slb-header__menu-toggle:hover, .slb-header__menu-toggle:focus-visible, .slb-header__menu-toggle:active),
	body.home .slb-header.is-scrolled :is(.slb-header__menu-toggle, .slb-header__menu-toggle:hover, .slb-header__menu-toggle:focus-visible, .slb-header__menu-toggle:active) {
		background: linear-gradient(135deg, var(--slb-violet), var(--slb-pink));
		color: var(--slb-surface, #fff);
		border-color: transparent;
	}
	body.home .slb-header.is-scrolled :is(.slb-header__menu-toggle, .slb-header__menu-toggle:hover, .slb-header__menu-toggle:focus-visible, .slb-header__menu-toggle:active) {
		background: linear-gradient(135deg, var(--slb-cyan), var(--slb-blue));
	}

	body.home.slb-mobile-nav-open .slb-header .slb-header__nav {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-rows: auto minmax(0, 1fr);
		align-self: stretch;
		width: 100%;
		height: 100%;
		gap: 1rem;
		padding: max(12px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		transform: none;
	}

	body.home.slb-mobile-nav-open .slb-header .slb-header__panel {
		position: static;
		grid-column: 1 / -1;
		align-self: stretch;
		min-height: 0;
		max-height: none;
		padding: 0;
		gap: 1.5rem;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		overflow: hidden auto;
		overscroll-behavior: contain;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
	}

	body.home.slb-mobile-nav-open .slb-header__nav-links {
		flex: 0 0 auto;
		gap: 0;
	}

	body.home.slb-mobile-nav-open .slb-header__nav-links a {
		min-height: 48px;
		padding: 0.75rem 0.35rem;
		font-size: clamp(1.2rem, 3vw, 1.5rem);
		line-height: 1.3;
		color: var(--slb-text);
	}

	body.home.slb-mobile-nav-open .slb-header__nav-actions {
		margin-top: auto;
		padding-top: 1rem;
	}

	body.home.slb-mobile-nav-open .slb-header__contact {
		display: none;
	}
}

@media (max-width: 920px) {
	body.home .slb-page--front .slb-container { width: calc(100% - 32px); }
	body.home .slb-page--front :is(.slb-pricing-support, .slb-pricing-extras, .slb-faq-accordion) {
		width: 100%;
		padding-inline: 0;
		border: 0;
		background: none;
		box-shadow: none;
	}
	body.home .slb-page--front .slb-faq-accordion { display: grid; gap: 0.75rem; }
	body.home .slb-page--front #faq .slb-faq-accordion { padding: 0; }
	body.home .slb-page--front #faq > .slb-container { padding-inline: 0; }
	body.home .slb-page--front .slb-faq-item {
		border: 1px solid var(--slb-card-border);
		border-radius: var(--slb-card-radius);
		background: var(--slb-surface);
	}
	body.home .slb-page--front :is(.slb-hero-stats--wide, .slb-pricing-support-grid, .slb-pricing-support__grid, .slb-pricing-extras__grid, .slb-consultation-grid) {
		grid-template-columns: minmax(0, 1fr);
	}
	body.home .slb-page--front :is(.slb-stat-card, .slb-service-card, .slb-pricing-card, .slb-pricing-support-card, .slb-studio-about__column, .slb-consultation-card, .slb-faq-item) {
		width: 100%;
		max-width: none;
		min-width: 0;
		margin-inline: 0;
	}
	body.home .slb-page--front #builder-preview > .slb-container.slb-portfolio-showcase {
		width: calc(100% - 32px);
		margin-inline: auto;
		padding-inline: 0;
	}
	body.home .slb-page--front #builder-preview .slb-portfolio-wall__track {
		width: max-content;
		gap: 1rem;
		padding-inline-end: 1rem;
		animation: none;
		transform: none;
	}
	body.home .slb-page--front #builder-preview .slb-portfolio-card {
		flex: 0 0 var(--slb-portfolio-card-width, calc(100vw - 32px));
		width: var(--slb-portfolio-card-width, calc(100vw - 32px));
		height: auto;
		min-height: 24rem;
	}
	body.home .slb-page--front #builder-preview .slb-portfolio-card[aria-hidden="true"] { display: none; }
	body.home .slb-page--front #builder-preview .slb-portfolio-wall__rail { scroll-snap-type: x mandatory; }
	body.home .slb-demo-toggle {
		top: auto;
		bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
		left: 1rem;
		width: 3rem;
		height: 3rem;
		min-height: 0;
		padding: 0.5rem;
		border-radius: var(--slb-control-radius);
		transform: none;
	}
	body.home .slb-demo-toggle-text { display: none; }
	body.home.slb-mobile-footer-visible .slb-demo-toggle { bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
	body.home .slb-demo-toggle:hover,
	body.home .slb-demo-toggle:focus-visible { transform: none; }
	body.home .slb-page--front .wp-block-buttons,
	body.home .slb-page--front #pricing .slb-pricing-actions,
	body.home .slb-page--front .slb-studio-about__actions {
		display: flex;
		justify-content: center;
		align-self: center;
		flex-wrap: wrap;
		width: 100%;
	}
	body.home .slb-page--front .slb-hero-actions {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
	}
	body.home .slb-page--front :is(.slb-button, .wp-block-button, .wp-block-button__link),
	body.home .slb-page--front .slb-hero-actions :is(.wp-block-button, .wp-block-button__link),
	body.home .slb-page--front #pricing .slb-pricing-actions :is(.wp-block-button, .wp-block-button__link),
	body.home .slb-page--front #consultation :is(.wp-block-button, .wp-block-button__link) {
		width: fit-content;
		inline-size: fit-content;
		max-width: 100%;
		min-width: 0;
	}
	body.home .slb-page--front :is(.wp-block-button__link, a.slb-button),
	body.home .slb-page--front .slb-hero-actions .wp-block-button__link,
	body.home .slb-page--front #pricing .slb-pricing-actions .wp-block-button__link,
	body.home .slb-page--front #consultation .wp-block-button__link {
		min-height: 48px;
		padding: 0.8rem 1.35rem;
		text-align: center;
	}
	body.home.slb-mobile-nav-open .slb-header__nav-actions .slb-header__nav-button {
		width: fit-content;
		max-width: 100%;
		margin-inline: auto;
	}
}

@media (max-width: 920px) and (prefers-reduced-motion: no-preference) {
	body.home .slb-page--front #builder-preview .slb-portfolio-wall__rail {
		overflow: hidden;
		scroll-snap-type: none;
	}
	body.home .slb-page--front #builder-preview .slb-portfolio-wall__track {
		animation: slb-portfolio-marquee-left var(--slb-portfolio-loop-duration, 84s) linear infinite;
	}
	body.home .slb-page--front #builder-preview .slb-portfolio-card[aria-hidden="true"] { display: grid; }
	body.home .slb-page--front #builder-preview .slb-portfolio-wall:is(.is-user-paused, .is-offscreen, .is-document-hidden, :active, :has(:focus-visible)) .slb-portfolio-wall__track {
		animation-play-state: paused;
	}
}

@media (max-width: 767px) {
	body.home .slb-page--front > .slb-hero-v5 > .slb-hero-grid { grid-template-columns: minmax(0, 1fr); }
	body.home .slb-page--front .slb-hero-copy > * { min-width: 0; max-width: 100%; }
	/* The artwork's left half is transparent: enlarge it and move the head beside the phone. */
	body.home .slb-page--front .slb-hero-showcase__mid-layer {
		top: 0;
		bottom: auto;
		left: 50%;
		width: min(43rem, 180vw);
		transform: translateX(-58%);
	}

	body.home .slb-page--front .slb-hero-showcase__device {
		transform: translateX(-0.8rem) rotate(0deg);
	}

	body.home .slb-page--front .slb-consultation-field input,
	body.home .slb-page--front .slb-consultation-field textarea,
	body.home .slb-page--front .slb-consultation-field select {
		font-size: 1rem;
	}
}