/**
 * FireScape Partners — Premium redesign override layer
 *
 * Loaded after main.css. Engineering-grade B2B aesthetic:
 * datum-line callouts, instrument panels, sharp geometry.
 *
 * @package FireScape
 */

/* ==========================================================================
   1. Design token overrides
   ========================================================================== */

:root {
	/* Colors */
	--color-primary: #0C0F14;
	--color-dark: #07090D;
	--color-steel: #1A2332;
	--color-accent: #D84315;
	--color-accent-hover: #BF360C;
	--color-accent-soft: rgba(216, 67, 21, 0.12);
	--color-light: #F2F0EC;
	--color-white: #FFFFFF;
	--color-text: #1C2128;
	--color-muted: #5C6370;
	--color-border: #D8D4CC;

	/* Logo flame — yellow → amber → ember (sampled from mark) */
	--flame-yellow: #FCCE1B;
	--flame-amber: #F8AF25;
	--flame-orange: #ED663E;
	--flame-ember: #E73832;
	--gradient-flame: linear-gradient(
		155deg,
		var(--flame-yellow) 0%,
		var(--flame-amber) 38%,
		var(--flame-orange) 72%,
		var(--flame-ember) 100%
	);
	--gradient-flame-hot: linear-gradient(
		180deg,
		var(--flame-amber) 0%,
		var(--color-accent) 55%,
		var(--flame-ember) 100%
	);
	--gradient-flame-soft: linear-gradient(
		135deg,
		rgba(252, 206, 27, 0.16) 0%,
		rgba(237, 102, 62, 0.12) 55%,
		rgba(216, 67, 21, 0.08) 100%
	);
	--shadow-flame: 0 8px 24px rgba(231, 56, 50, 0.22);

	/* Layout */
	--container-width: 1240px;
	--header-height: 4.75rem;
	--header-height-scrolled: 4rem;

	/* Typography */
	--font-sans: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-heading: "Archivo", "IBM Plex Sans", sans-serif;
	--font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", "Source Code Pro", monospace;

	--tracking-tight: -0.025em;
	--tracking-wide: 0.1em;

	/* Radii — soft rounded surfaces */
	--radius-sm: 8px;
	--radius-md: 14px;
	--radius-lg: 20px;
	--radius-xl: 28px;

	/* Shadows */
	--shadow-sm: 0 1px 0 rgba(12, 15, 20, 0.06);
	--shadow-md: 0 8px 32px rgba(12, 15, 20, 0.08);
	--shadow-lg: 0 24px 64px rgba(12, 15, 20, 0.12);

	/* Transitions */
	--transition-fast: 180ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-normal: 320ms cubic-bezier(0.4, 0, 0.2, 1);

	/* Premium-specific */
	--datum-width: 3px;
	--datum-color: var(--color-accent);
	--focus-ring: 2px solid var(--color-accent);
	--focus-offset: 2px;
}

/* ==========================================================================
   2. Base typography refinements
   ========================================================================== */

body {
	color: var(--color-text);
	background-color: var(--color-white);
	font-feature-settings: "kern" 1, "liga" 1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-heading);
	font-weight: 600;
	letter-spacing: var(--tracking-tight);
}

h1 {
	letter-spacing: -0.03em;
}

h2 {
	letter-spacing: -0.028em;
}

h3 {
	letter-spacing: -0.02em;
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
	color: var(--color-white);
}

.section--dark .section-heading__description,
.section--dark .section-label {
	color: rgba(242, 240, 236, 0.68);
}

/* Global focus states */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-offset);
}

/* Interactive cursor */
a,
button,
.btn,
.service-card,
.service-card__link,
.project-card,
.project-card__link,
.testimonial-card,
.trust-grid__item,
.header-cart,
.site-nav__list a,
.site-footer__menu a,
.site-footer__social-link,
.page-numbers {
	cursor: pointer;
}

/* ==========================================================================
   3. Site header — signal bar & authoritative shell
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	height: var(--header-height);
	background-color: rgba(255, 255, 255, 0.98);
	border-bottom: 1px solid transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	transition:
		height var(--transition-normal),
		background-color var(--transition-normal),
		border-color var(--transition-normal),
		box-shadow var(--transition-normal);
}

.site-header.is-scrolled {
	height: var(--header-height-scrolled);
	border-bottom-color: var(--color-border);
	box-shadow: var(--shadow-sm);
}

.site-header__signal {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--datum-width);
	background: var(--gradient-flame);
	z-index: 1;
}

.site-header__inner {
	position: relative;
	z-index: 2;
}

.site-logo__text {
	font-family: var(--font-heading);
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--color-primary);
}

.site-header .custom-logo {
	max-height: 2.75rem;
}

.site-header.is-scrolled .custom-logo {
	max-height: 2.25rem;
}

/* Header CTA — compact, desktop only */
.header-cta.btn--sm {
	display: none;
	white-space: nowrap;
}

@media (min-width: 1024px) {
	.header-cta.btn--sm {
		display: inline-flex;
	}
}

.site-header__actions {
	gap: var(--space-2);
}

.header-phone {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--color-muted);
}

.header-phone:hover {
	color: var(--color-accent);
}

.header-cart {
	border-radius: var(--radius-sm);
	border-color: var(--color-border);
}

.header-cart:hover {
	border-color: var(--color-accent);
	background-color: var(--color-accent-soft);
}

.header-cart__count {
	border-radius: var(--radius-sm);
	font-family: var(--font-mono);
	font-size: 0.625rem;
	background: var(--gradient-flame-hot);
	border: none;
}

.site-header__toggle {
	border-radius: var(--radius-sm);
	border-color: var(--color-border);
}

.site-header__toggle:hover {
	border-color: var(--color-steel);
	background-color: var(--color-light);
}

/* ==========================================================================
   4. Primary navigation — underline animation
   ========================================================================== */

.site-nav__list > li > a {
	position: relative;
	display: inline-block;
	padding: var(--space-2) var(--space-3);
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-text);
	text-decoration: none;
	border-radius: var(--radius-sm);
	background-color: transparent;
	white-space: nowrap;
}

.site-nav__list > li > a::after {
	content: "";
	position: absolute;
	left: var(--space-3);
	right: var(--space-3);
	bottom: 0;
	height: 2px;
	background: var(--gradient-flame);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--transition-fast);
}

@media (min-width: 1280px) {
	.site-nav__list > li > a {
		padding: var(--space-2) var(--space-4);
	}

	.site-nav__list > li > a::after {
		left: var(--space-4);
		right: var(--space-4);
	}
}

.site-nav__list > li > a:hover,
.site-nav__list > li > a:focus-visible {
	color: var(--color-primary);
	background-color: transparent;
}

.site-nav__list > li > a:hover::after,
.site-nav__list > li > a:focus-visible::after,
.site-nav__list > li.current-menu-item > a::after,
.site-nav__list > li.current-menu-ancestor > a::after {
	transform: scaleX(1);
}

.site-nav__list > li.current-menu-item > a,
.site-nav__list > li.current-menu-ancestor > a {
	color: var(--color-accent);
	font-weight: 600;
}

.site-nav__list .sub-menu {
	border-radius: var(--radius-md);
	border-color: var(--color-border);
	box-shadow: var(--shadow-md);
}

.site-nav__list .sub-menu a {
	border-radius: var(--radius-sm);
}

.site-nav__list .sub-menu a:hover {
	background-color: var(--color-accent-soft);
	color: var(--color-accent);
}

/* Mobile nav refinements */
.mobile-nav {
	inset: var(--header-height) 0 0 0;
	background-color: var(--color-dark);
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.mobile-nav__list > li > a {
	font-family: var(--font-heading);
	letter-spacing: -0.01em;
}

body.nav-open .site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 1000;
	overflow: visible;
}

/* ==========================================================================
   5. Datum line system — section labels & marks
   ========================================================================== */

.section-label {
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.section-label--datum {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding-left: calc(var(--space-3) + var(--datum-width));
	background: linear-gradient(90deg, var(--flame-amber), var(--color-accent));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.section-label--datum::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: var(--datum-width);
	height: 1.125rem;
	background: var(--gradient-flame-hot);
	border-radius: 1px;
}

.datum-mark {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--datum-width);
	height: 100%;
	background-color: var(--datum-color);
	opacity: 0;
	transition: opacity var(--transition-fast);
}

.service-card:hover .datum-mark,
.service-card:focus-within .datum-mark {
	opacity: 1;
}

/* ==========================================================================
   6. Section headings
   ========================================================================== */

.section-heading {
	margin-bottom: var(--space-12);
}

.section-heading__title {
	font-family: var(--font-heading);
	font-size: clamp(var(--text-2xl), 3.8vw, var(--text-4xl));
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 1.15;
	color: var(--color-primary);
}

.section-heading__description {
	font-size: var(--text-lg);
	line-height: 1.65;
	color: var(--color-muted);
}

.section-heading--center .section-label--datum::before {
	height: 1rem;
}

/* ==========================================================================
   7. Buttons — sharp, tall, no layout-shift hover
   ========================================================================== */

.btn {
	padding: 0.9375rem 1.625rem;
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: 0.01em;
	border-radius: var(--radius-sm);
	transform: none;
	transition:
		color var(--transition-fast),
		background-color var(--transition-fast),
		border-color var(--transition-fast),
		box-shadow var(--transition-fast);
}

.btn--sm {
	padding: 0.5625rem 1rem;
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.btn--primary {
	color: var(--color-white);
	background: var(--gradient-flame);
	background-color: var(--color-accent);
	border-color: transparent;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
	background-size: 100% 100%;
	transition:
		filter var(--transition-fast),
		box-shadow var(--transition-fast),
		transform var(--transition-fast);
}

.btn--primary:hover {
	color: var(--color-white);
	background: var(--gradient-flame);
	background-color: var(--color-accent-hover);
	border-color: transparent;
	filter: brightness(1.05) saturate(1.05);
	box-shadow: var(--shadow-flame);
}

.btn--primary:active {
	filter: brightness(0.96);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}

.btn--outline {
	border-color: var(--color-border);
	color: var(--color-primary);
}

.btn--outline:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
	background-color: var(--color-accent-soft);
}

.btn--outline-light {
	border-color: rgba(255, 255, 255, 0.25);
}

.btn--outline-light:hover {
	border-color: var(--color-white);
	background-color: rgba(255, 255, 255, 0.08);
}

.btn:hover .btn__icon {
	transform: translateX(4px);
}

.btn:active .btn__icon {
	transform: translateX(2px);
}

/* ==========================================================================
   8. Hero — cinematic asymmetric layout
   ========================================================================== */

.hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(32rem, 92vh, 48rem);
	padding-block: var(--space-20) var(--space-16);
	background-color: var(--color-dark);
}

.hero__overlay {
	background: linear-gradient(
		155deg,
		rgba(7, 9, 13, 0.45) 0%,
		rgba(7, 9, 13, 0.78) 45%,
		rgba(7, 9, 13, 0.94) 100%
	);
}

.hero__grid-pattern {
	opacity: 0.22;
	background-size: 40px 40px;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
	mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 85%, transparent 100%);
}

.hero__datum-line {
	position: absolute;
	top: 0;
	left: clamp(var(--space-4), 4vw, var(--space-8));
	width: var(--datum-width);
	height: 100%;
	background: var(--gradient-flame-hot);
	opacity: 0.9;
	z-index: 1;
	pointer-events: none;
}

.hero__content {
	position: relative;
	z-index: 2;
	display: grid;
	gap: var(--space-12);
	align-items: end;
}

@media (min-width: 1024px) {
	.hero__content {
		grid-template-columns: 1.15fr minmax(18rem, 22rem);
		gap: var(--space-16);
		align-items: end;
	}
}

.hero__text {
	max-width: 44rem;
	padding-left: calc(var(--space-6) + var(--datum-width));
}

@media (min-width: 1024px) {
	.hero__text {
		padding-left: calc(var(--space-8) + var(--datum-width));
	}
}

.hero .section-label {
	background: var(--gradient-flame);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hero__title {
	margin: var(--space-4) 0 var(--space-5);
	max-width: 14ch;
	font-family: var(--font-heading);
	font-size: clamp(2.25rem, 5.2vw, 3.5rem);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.035em;
	color: var(--color-white);
}

.hero__subtitle {
	max-width: 38rem;
	font-size: var(--text-lg);
	line-height: 1.7;
	color: rgba(242, 240, 236, 0.72);
}

.hero__actions {
	margin-top: var(--space-10);
	gap: var(--space-4);
}

/* ==========================================================================
   9. Hero instrument panel
   ========================================================================== */

.hero__instrument {
	position: relative;
	padding: var(--space-5);
	background: rgba(12, 15, 20, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-left: var(--datum-width) solid var(--datum-color);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
}

.hero__instrument-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hero__instrument-label {
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(242, 240, 236, 0.55);
}

.hero__instrument-status {
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background-color: #2E7D32;
	box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.25);
	animation: instrument-pulse 2.4s ease-in-out infinite;
}

@keyframes instrument-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.6; }
}

.hero__stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-3);
	min-width: 0;
}

@media (min-width: 480px) {
	.hero__stats {
		min-width: 16rem;
	}
}

/* ==========================================================================
   10. Stat cards — instrument readout style
   ========================================================================== */

.stat-card {
	position: relative;
	padding: var(--space-4) var(--space-5);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-sm);
	transition:
		border-color var(--transition-fast),
		background-color var(--transition-fast);
}

.stat-card:hover {
	border-color: rgba(216, 67, 21, 0.35);
	background: rgba(255, 255, 255, 0.05);
}

.stat-card__number {
	display: block;
	font-family: var(--font-mono);
	font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	color: var(--color-white);
	letter-spacing: -0.02em;
}

.stat-card__suffix {
	font-family: var(--font-mono);
	color: var(--color-accent);
}

.stat-card__label {
	display: block;
	margin-top: var(--space-2);
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(242, 240, 236, 0.5);
}

/* ==========================================================================
   11. Services section — dark gradient band
   ========================================================================== */

.services-section.section--dark {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin: 0 0.75rem;
	border-radius: clamp(1.35rem, 2.4vw, 2.5rem);
	background-color: var(--color-dark);
	background-image: linear-gradient(
		168deg,
		var(--color-dark) 0%,
		var(--color-primary) 38%,
		#141820 100%
	);
	box-shadow: 0 18px 48px rgba(7, 9, 13, 0.14);
}

@media (min-width: 768px) {
	.services-section.section--dark {
		margin-inline: 1rem;
	}
}

@media (min-width: 1280px) {
	.services-section.section--dark {
		margin-inline: 1.25rem;
		border-radius: 2.5rem;
	}
}

.services-section.section--dark::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
	background-size: 56px 56px;
	opacity: 0.55;
	mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
	pointer-events: none;
	z-index: 0;
}

.services-section.section--dark::after {
	display: none;
}

.services-section.section--dark > .container {
	position: relative;
	z-index: 1;
}

/* Light home services — breathing room before dark shop promo */
.services-section--light {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin: 0 0.75rem;
	border-radius: clamp(1.35rem, 2.4vw, 2.5rem);
	background-color: var(--color-light, #f3f1ec);
	background-image: linear-gradient(
		168deg,
		#f7f5f1 0%,
		#efece6 48%,
		#e8e4dc 100%
	);
	border: 1px solid rgba(20, 24, 32, 0.06);
	box-shadow: 0 10px 28px rgba(7, 9, 13, 0.04);
}

@media (min-width: 768px) {
	.services-section--light {
		margin-inline: 1rem;
	}
}

@media (min-width: 1280px) {
	.services-section--light {
		margin-inline: 1.25rem;
		border-radius: 2.5rem;
	}
}

.services-section--light .section-heading__title {
	color: var(--color-primary);
}

.services-section--light .section-heading__description {
	color: var(--color-muted);
}

.services-section.section--dark .section-heading__title {
	color: var(--color-white);
}

/* ==========================================================================
   12. Service cards — bordered panels with datum mark
   ========================================================================== */

.service-card {
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-md);
	background-color: rgba(255, 255, 255, 0.02);
	transform: none;
	transition:
		border-color var(--transition-normal),
		background-color var(--transition-normal),
		box-shadow var(--transition-normal);
}

.service-card:hover,
.service-card:focus-within {
	border-color: rgba(216, 67, 21, 0.5);
	background-color: rgba(255, 255, 255, 0.05);
	box-shadow: var(--shadow-md);
	transform: none;
}

.service-card__link {
	padding: var(--space-6) var(--space-6) var(--space-6) calc(var(--space-6) + var(--datum-width));
}

.service-card__icon {
	font-family: var(--font-mono);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--color-accent);
	background-color: var(--color-accent-soft);
	border-radius: var(--radius-sm);
}

.service-card__title {
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--color-white);
}

.service-card__excerpt {
	font-size: var(--text-sm);
	line-height: 1.65;
	color: rgba(242, 240, 236, 0.62);
}

.service-card__cta {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.service-card:hover .service-card__cta svg {
	transform: translateX(4px);
}

.section:not(.section--dark) .service-card {
	background-color: var(--color-white);
	border-color: var(--color-border);
}

.section:not(.section--dark) .service-card:hover {
	border-color: var(--color-accent);
	box-shadow: var(--shadow-md);
	transform: none;
}

.section:not(.section--dark) .service-card__title {
	color: var(--color-primary);
}

.section:not(.section--dark) .service-card__excerpt {
	color: var(--color-muted);
}

/* ==========================================================================
   13. Project / recommendation letter cards
   ========================================================================== */

/* Homepage portfolio showcase (image + copy rows) */
.projects-section--showcase {
	background: var(--color-light);
}

.projects-showcase__header {
	margin-bottom: var(--space-12);
	text-align: center;
}

.projects-showcase__headline {
	margin: 0;
	font-family: var(--font-heading);
	font-size: clamp(1.65rem, 3.2vw, 2.5rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.03em;
	color: var(--color-primary);
}

.projects-showcase__accent {
	color: var(--color-accent);
}

.projects-showcase {
	display: grid;
	gap: var(--space-8);
}

.project-feature {
	--project-feature-gap: 0.85rem;
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--project-feature-gap);
	isolation: isolate;
	overflow: visible;
	background: transparent;
	box-shadow: none;
}

@media (min-width: 900px) {
	.project-feature {
		--project-feature-gap: 0.65rem;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: stretch;
	}

	.project-feature--flip .project-feature__media {
		order: 2;
	}

	.project-feature--flip .project-feature__body {
		order: 1;
	}
}

.project-feature__media {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 14rem;
	padding: 1.25rem;
	overflow: visible;
	background:
		radial-gradient(ellipse 70% 60% at 50% 40%, rgba(224, 78, 42, 0.14), transparent 62%),
		linear-gradient(165deg, #171a20 0%, #0e1116 100%);
	border: 1px solid rgba(26, 26, 31, 0.18);
	border-radius: var(--radius-lg);
	box-shadow: 0 12px 34px rgba(26, 26, 31, 0.08);
}

.project-feature__image {
	display: block;
	width: 100%;
	height: auto;
	max-height: 20rem;
	object-fit: contain;
	object-position: center;
	border-radius: calc(var(--radius-lg) - 0.65rem);
}

@media (min-width: 900px) {
	.project-feature__media {
		min-height: 100%;
		padding: 1.65rem;
	}

	.project-feature__image {
		width: 100%;
		height: 100%;
		max-height: none;
		object-fit: contain;
	}
}

.project-feature__placeholder {
	width: 100%;
	min-height: 12rem;
	border-radius: calc(var(--radius-lg) - 0.65rem);
	background:
		radial-gradient(ellipse 60% 50% at 70% 30%, rgba(224, 78, 42, 0.22), transparent 60%),
		linear-gradient(160deg, #1a1a1f, #2a2a30);
}

/* Logo bridge — straddles both cards across the gap */
.project-feature__bridge {
	position: absolute;
	z-index: 5;
	left: 50%;
	bottom: 0;
	display: grid;
	place-items: center;
	width: 3.75rem;
	height: 3.75rem;
	pointer-events: none;
	border-radius: 1.05rem;
	background: var(--color-white);
	border: 1px solid rgba(26, 26, 31, 0.08);
	box-shadow:
		0 14px 32px rgba(12, 15, 20, 0.18),
		0 1px 0 rgba(255, 255, 255, 0.95) inset;
	transform: translate(-50%, 50%);
}

.project-feature__bridge-mark {
	display: block;
	width: 1.85rem;
	height: auto;
	object-fit: contain;
}

.project-feature__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 1.5rem 1.35rem;
	gap: var(--space-3);
	overflow: visible;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: 0 12px 34px rgba(26, 26, 31, 0.06);
}

@media (min-width: 900px) {
	.project-feature__body {
		padding: 2rem 1.85rem;
	}

	.project-feature__bridge {
		top: 50%;
		right: 0;
		bottom: auto;
		left: auto;
		width: 4rem;
		height: 5.75rem;
		border-radius: 1.2rem;
		transform: translate(50%, -50%);
	}

	.project-feature--flip .project-feature__bridge {
		right: auto;
		left: 0;
		transform: translate(-50%, -50%);
	}

	.project-feature__bridge-mark {
		width: 2.25rem;
	}
}

.project-feature__location {
	margin: 0;
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.project-feature__title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: clamp(1.35rem, 2.2vw, 1.85rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.025em;
	color: var(--color-primary);
}

.project-feature__title a {
	color: inherit;
	text-decoration: none;
}

.project-feature__title a:hover,
.project-feature__title a:focus-visible {
	color: var(--color-accent);
}

.project-feature__excerpt {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--color-muted);
}

.project-feature__excerpt p {
	margin: 0;
}

.project-feature__area {
	margin: 0.25rem 0 0;
	font-size: 1rem;
	color: var(--color-primary);
}

.project-feature__client {
	margin: 0.15rem 0 0;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--color-primary);
	opacity: 0.78;
}

.project-feature__actions {
	margin-top: var(--space-4);
}

.project-feature__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.project-feature__cta svg {
	width: 1rem;
	height: 1rem;
}

.project-card {
	position: relative;
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
	background-color: var(--color-white);
	overflow: hidden;
	transition:
		border-color var(--transition-normal),
		box-shadow var(--transition-normal);
}

.project-card:hover {
	border-color: rgba(216, 67, 21, 0.35);
	box-shadow: var(--shadow-md);
	transform: none;
}

.project-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.project-card__media {
	aspect-ratio: 4 / 3;
	background-color: var(--color-steel);
}

.project-card__image {
	transition: opacity var(--transition-normal);
	transform: none;
}

.project-card:hover .project-card__image {
	opacity: 0.92;
	transform: none;
}

.project-card__overlay {
	background: linear-gradient(
		to top,
		rgba(7, 9, 13, 0.65) 0%,
		rgba(7, 9, 13, 0.15) 50%,
		transparent 100%
	);
	opacity: 0;
	transition: opacity var(--transition-normal);
}

.project-card:hover .project-card__overlay {
	opacity: 1;
}

.project-card__dossier {
	position: relative;
	aspect-ratio: 16 / 11;
	padding: 1.35rem 1.35rem 0.85rem;
	background:
		radial-gradient(ellipse 70% 60% at 100% 0%, rgba(216, 67, 21, 0.12), transparent 55%),
		linear-gradient(165deg, #121820 0%, #07090d 55%, #0c1218 100%);
	overflow: hidden;
}

.project-card__dossier::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0.28;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
	background-size: 28px 28px;
	mask-image: linear-gradient(180deg, #000 20%, transparent 100%);
	pointer-events: none;
}

.project-card__sheet {
	display: block;
	border-radius: 4px 10px 4px 4px;
}

.project-card__sheet--back,
.project-card__sheet--mid {
	position: absolute;
	left: 1.55rem;
	right: 1.15rem;
	height: 72%;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.project-card__sheet--back {
	top: 1.05rem;
	transform: rotate(-2.5deg);
}

.project-card__sheet--mid {
	top: 1.35rem;
	transform: rotate(1.4deg);
	background: rgba(255, 255, 255, 0.09);
}

.project-card__sheet--front {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 100%;
	padding: 1rem 1.1rem 1.05rem;
	background: linear-gradient(180deg, #f8f6f1 0%, #efebe3 100%);
	border: 1px solid rgba(255, 255, 255, 0.35);
	box-shadow:
		0 10px 28px rgba(0, 0, 0, 0.28),
		inset 3px 0 0 var(--datum-color, #d84315);
	color: var(--color-primary);
}

.project-card__badge {
	align-self: flex-end;
	padding: 0.2rem 0.45rem;
	font-family: var(--font-mono);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	color: var(--color-white);
	background: var(--color-primary);
	border-radius: 3px;
}

.project-card__kind {
	margin-top: 0.85rem;
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.project-card__seal {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	margin-top: auto;
	color: var(--color-primary);
	border: 1px solid rgba(12, 15, 20, 0.14);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.65);
}

.project-card__content {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--space-5) var(--space-6);
	border-top: 1px solid var(--color-border);
}

.project-card__client,
.project-card__location {
	display: block;
	margin-bottom: var(--space-2);
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.project-card__title {
	margin: 0 0 var(--space-2);
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.25;
	color: var(--color-primary);
	transition: color var(--transition-fast);
}

.project-card:hover .project-card__title {
	color: var(--color-accent);
}

.project-card__meta {
	font-size: var(--text-sm);
	color: var(--color-muted);
}

.project-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: auto;
	padding-top: var(--space-4);
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.project-card__cta svg {
	width: 1rem;
	height: 1rem;
	transition: transform var(--transition-fast);
}

.project-card:hover .project-card__cta {
	color: var(--color-accent);
}

.project-card:hover .project-card__cta svg {
	transform: translateX(3px);
}

.page-header__eyebrow {
	margin: 0 0 var(--space-3);
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.page-header__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	margin-top: var(--space-4);
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.72);
}

.page-header__meta span {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.page-header__meta svg {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	opacity: 0.85;
}

.project-single__layout--letter {
	align-items: start;
}

.letter-viewer {
	margin-bottom: var(--space-8);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-white);
	box-shadow: var(--shadow-sm);
}

.letter-viewer__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.85rem 1rem;
	padding: 0.9rem 1.1rem;
	background: var(--color-dark);
	color: rgba(255, 255, 255, 0.88);
}

.letter-viewer__label {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	font-size: 0.875rem;
}

.letter-viewer__badge {
	padding: 0.2rem 0.45rem;
	font-family: var(--font-mono);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	color: var(--color-dark);
	background: #f2f0ec;
	border-radius: 3px;
}

.letter-viewer__download {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.letter-viewer__download svg {
	width: 1rem;
	height: 1rem;
}

.letter-viewer__frame {
	position: relative;
	min-height: min(72vh, 52rem);
	background: #2a3038;
}

.letter-viewer__frame iframe {
	display: block;
	width: 100%;
	height: min(72vh, 52rem);
	border: 0;
	background: #2a3038;
}

.letter-viewer__fallback {
	margin: 0;
	padding: 0.85rem 1.1rem;
	font-size: 0.8125rem;
	color: var(--color-muted);
	border-top: 1px solid var(--color-border);
	background: #f7f5f1;
}

.letter-viewer__fallback a {
	color: var(--color-accent);
}

@media (max-width: 767px) {
	.letter-viewer__frame,
	.letter-viewer__frame iframe {
		min-height: 28rem;
		height: 28rem;
	}
}

/* ==========================================================================
   14. Testimonial cards — refined quote styling
   ========================================================================== */

.testimonial-card {
	position: relative;
	padding: var(--space-6) var(--space-6) var(--space-6) calc(var(--space-6) + var(--datum-width));
	border-radius: var(--radius-md);
	border-color: var(--color-border);
	background-color: var(--color-white);
	transition:
		border-color var(--transition-normal),
		box-shadow var(--transition-normal);
}

.testimonial-card::before {
	content: "";
	position: absolute;
	top: var(--space-6);
	left: 0;
	width: var(--datum-width);
	height: 2.5rem;
	background-color: var(--datum-color);
}

.testimonial-card:hover {
	border-color: rgba(216, 67, 21, 0.3);
	box-shadow: var(--shadow-sm);
}

.testimonial-card__quote-mark {
	font-family: var(--font-heading);
	font-size: var(--text-3xl);
	font-weight: 700;
	line-height: 1;
	color: var(--color-accent);
	opacity: 0.35;
}

.testimonial-card__quote {
	font-size: var(--text-base);
	font-style: normal;
	line-height: 1.7;
	color: var(--color-text);
}

.testimonial-card__footer {
	border-top-color: var(--color-border);
}

.testimonial-card__avatar {
	border-radius: var(--radius-sm);
}

.testimonial-card__author {
	font-family: var(--font-heading);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--color-primary);
}

.testimonial-card__role {
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	color: var(--color-muted);
}

/* ==========================================================================
   15. CTA section — full-width dark band with datum accent
   ========================================================================== */

.cta-section {
	--cta-radius: clamp(1.35rem, 2.4vw, 2.5rem);
	--cta-inset: 0.75rem;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin: 0 var(--cta-inset) 1.5rem;
	padding-block: var(--space-16);
	border-radius: var(--cta-radius);
	/* Steel surface — flame strip + heat wash from logo gradient */
	background-color: #161a22;
	background-image:
		linear-gradient(
			90deg,
			var(--flame-yellow) 0%,
			var(--flame-amber) 35%,
			var(--flame-orange) 70%,
			var(--flame-ember) 100%
		),
		radial-gradient(ellipse 52% 72% at 90% 38%, rgba(252, 206, 27, 0.16), transparent 58%),
		radial-gradient(ellipse 48% 70% at 82% 48%, rgba(237, 102, 62, 0.22), transparent 62%),
		radial-gradient(ellipse 42% 55% at 8% 100%, rgba(255, 255, 255, 0.04), transparent 55%),
		linear-gradient(168deg, #1c222c 0%, #141820 52%, #10141b 100%);
	background-size:
		100% var(--datum-width),
		auto,
		auto,
		auto,
		auto;
	background-repeat: no-repeat;
	background-position: top left, center, center, center, center;
	border-top: none;
	border-bottom: none;
	box-shadow: 0 14px 40px rgba(7, 9, 13, 0.12);
}

.cta-section > .container {
	position: relative;
	z-index: 1;
}

@media (min-width: 768px) {
	.cta-section {
		--cta-inset: 1rem;
	}
}

@media (min-width: 1280px) {
	.cta-section {
		--cta-inset: 1.25rem;
		--cta-radius: 2.5rem;
	}
}

/* Pressure-gauge arcs + heat wash — no square grid */
.cta-section::before {
	content: "";
	position: absolute;
	inset: -20%;
	pointer-events: none;
	z-index: 0;
	opacity: 0.55;
	background:
		repeating-radial-gradient(
			circle at 82% 48%,
			transparent 0,
			transparent 38px,
			rgba(255, 255, 255, 0.035) 39px,
			rgba(255, 255, 255, 0.035) 40px
		),
		repeating-linear-gradient(
			-28deg,
			transparent 0,
			transparent 11px,
			rgba(255, 255, 255, 0.028) 11px,
			rgba(255, 255, 255, 0.028) 12px
		);
	mask-image: radial-gradient(ellipse 70% 80% at 78% 45%, black 10%, transparent 72%);
}

/* Soft film grain only */
.cta-section::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	opacity: 0.28;
	mix-blend-mode: soft-light;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
	background-size: 180px 180px;
}

/* Extinguisher prop — contained, lightly tilted */
.cta-section__prop {
	position: absolute;
	right: clamp(1rem, 3vw, 2.5rem);
	bottom: clamp(1.25rem, 3.5vw, 2.25rem);
	top: clamp(1.25rem, 3.5vw, 2.25rem);
	z-index: 0;
	width: clamp(9rem, 22vw, 17rem);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	user-select: none;
	filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.4));
}

.cta-section__prop-stage {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	transform: rotate(-12deg);
	transform-origin: 55% 75%;
}

.cta-section__prop-figure {
	position: relative;
	height: 100%;
	width: auto;
	max-width: 100%;
}

.cta-section__prop-img {
	display: block;
	width: auto;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
	object-position: center;
	opacity: 0.95;
}

/* Spray from hose nozzle (lower-left of the unit) */
.cta-section__spray {
	position: absolute;
	left: 4%;
	bottom: 20%;
	width: 0;
	height: 0;
	z-index: 2;
}

.cta-section__spray-plume,
.cta-section__spray-mist {
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 999px;
	opacity: 0;
	transform-origin: right center;
	pointer-events: none;
}

.cta-section__spray-plume {
	width: 5.25rem;
	height: 1.35rem;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(255, 255, 255, 0.15) 18%,
		rgba(255, 255, 255, 0.75) 55%,
		rgba(255, 255, 255, 0.95) 100%
	);
	filter: blur(1.5px);
	border-radius: 60% 40% 40% 60% / 50% 50% 50% 50%;
}

.cta-section__spray-mist {
	width: 7.5rem;
	height: 2.8rem;
	left: -1.25rem;
	top: -0.7rem;
	background: radial-gradient(
		ellipse at 90% 50%,
		rgba(255, 255, 255, 0.55) 0%,
		rgba(255, 255, 255, 0.18) 45%,
		transparent 72%
	);
	filter: blur(5px);
}

.cta-section__spray-dot {
	position: absolute;
	left: 0;
	top: 0;
	width: 0.28rem;
	height: 0.28rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	opacity: 0;
	box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}

@media (min-width: 1024px) {
	.cta-section__prop {
		right: clamp(1.5rem, 3.5vw, 3rem);
		width: clamp(12rem, 20vw, 18rem);
	}

	.cta-section__spray-plume {
		width: 6.25rem;
		height: 1.55rem;
	}

	.cta-section__spray-mist {
		width: 9rem;
		height: 3.4rem;
	}
}

@media (max-width: 767px) {
	.cta-section__prop {
		right: 0.75rem;
		top: 1rem;
		bottom: 1rem;
		width: 6.5rem;
		opacity: 0.55;
	}

	.cta-section__spray {
		display: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.cta-section__prop-stage {
		animation: cta-prop-float 7s ease-in-out infinite;
	}

	.cta-section__spray-plume {
		animation: cta-spray-plume 4.8s ease-out infinite;
	}

	.cta-section__spray-mist {
		animation: cta-spray-mist 4.8s ease-out infinite;
	}

	.cta-section__spray-dot--1 {
		animation: cta-spray-dot-1 4.8s ease-out infinite;
	}

	.cta-section__spray-dot--2 {
		animation: cta-spray-dot-2 4.8s ease-out infinite;
	}

	.cta-section__spray-dot--3 {
		animation: cta-spray-dot-3 4.8s ease-out infinite;
	}

	.cta-section__spray-dot--4 {
		animation: cta-spray-dot-4 4.8s ease-out infinite;
	}
}

@keyframes cta-prop-float {
	0%,
	100% {
		transform: rotate(-12deg) translateY(0);
	}
	50% {
		transform: rotate(-9deg) translateY(-0.35rem);
	}
}

/* One short burst leftward from the nozzle, then rest */
@keyframes cta-spray-plume {
	0%,
	8% {
		opacity: 0;
		transform: translate(0, -40%) scaleX(0.15) scaleY(0.5);
	}
	14% {
		opacity: 1;
		transform: translate(-70%, -55%) scaleX(1) scaleY(1);
	}
	26% {
		opacity: 0;
		transform: translate(-125%, -70%) scaleX(1.25) scaleY(1.15);
	}
	100% {
		opacity: 0;
		transform: translate(-125%, -70%) scaleX(1.25) scaleY(1.15);
	}
}

@keyframes cta-spray-mist {
	0%,
	10% {
		opacity: 0;
		transform: translate(0, -30%) scale(0.2);
	}
	18% {
		opacity: 0.75;
		transform: translate(-85%, -50%) scale(1.05);
	}
	34% {
		opacity: 0;
		transform: translate(-150%, -60%) scale(1.45);
	}
	100% {
		opacity: 0;
		transform: translate(-150%, -60%) scale(1.45);
	}
}

@keyframes cta-spray-dot-1 {
	0%,
	12% {
		opacity: 0;
		transform: translate(0, 0) scale(0.6);
	}
	16% {
		opacity: 1;
	}
	30% {
		opacity: 0;
		transform: translate(-4.6rem, -1.8rem) scale(0.2);
	}
	100% {
		opacity: 0;
		transform: translate(-4.6rem, -1.8rem) scale(0.2);
	}
}

@keyframes cta-spray-dot-2 {
	0%,
	13% {
		opacity: 0;
		transform: translate(0, 0) scale(0.5);
	}
	17% {
		opacity: 0.95;
	}
	32% {
		opacity: 0;
		transform: translate(-5.4rem, -0.7rem) scale(0.15);
	}
	100% {
		opacity: 0;
		transform: translate(-5.4rem, -0.7rem) scale(0.15);
	}
}

@keyframes cta-spray-dot-3 {
	0%,
	14% {
		opacity: 0;
		transform: translate(0, 0) scale(0.55);
	}
	18% {
		opacity: 0.9;
	}
	33% {
		opacity: 0;
		transform: translate(-3.9rem, -2.6rem) scale(0.2);
	}
	100% {
		opacity: 0;
		transform: translate(-3.9rem, -2.6rem) scale(0.2);
	}
}

@keyframes cta-spray-dot-4 {
	0%,
	15% {
		opacity: 0;
		transform: translate(0, 0) scale(0.45);
	}
	19% {
		opacity: 0.85;
	}
	34% {
		opacity: 0;
		transform: translate(-5rem, 0.15rem) scale(0.1);
	}
	100% {
		opacity: 0;
		transform: translate(-5rem, 0.15rem) scale(0.1);
	}
}

.cta-section__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-6);
	width: 100%;
	max-width: min(44rem, 100%);
	margin-left: 0;
	margin-right: auto;
	padding: var(--space-8) var(--space-6);
	background-color: rgba(12, 15, 20, 0.62);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-left: var(--datum-width) solid var(--datum-color);
	border-radius: var(--radius-lg);
	box-sizing: border-box;
}

@media (min-width: 768px) {
	.cta-section__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-10);
		padding: var(--space-10) var(--space-12);
		max-width: min(46rem, calc(100% - 12rem));
	}
}

@media (min-width: 1024px) {
	.cta-section__inner {
		padding: var(--space-12) var(--space-16);
		max-width: min(48rem, calc(100% - 14rem));
	}
}

/* Home: no extinguisher prop when shop promo already owns that visual */
.cta-section--plain .cta-section__inner {
	max-width: min(52rem, 100%);
	margin-inline: auto;
}

@media (min-width: 768px) {
	.cta-section--plain .cta-section__inner {
		max-width: min(56rem, 100%);
	}
}

@media (min-width: 1024px) {
	.cta-section--plain .cta-section__inner {
		max-width: min(58rem, 100%);
	}
}

.cta-section__content {
	flex: 1;
	min-width: 0;
	padding-right: var(--space-4);
}

.cta-section__title {
	margin: 0 0 var(--space-3);
	font-family: var(--font-heading);
	font-size: clamp(var(--text-xl), 3.2vw, var(--text-2xl));
	font-weight: 600;
	letter-spacing: -0.03em;
	color: var(--color-white);
}

.cta-section__text {
	margin: 0;
	max-width: 36rem;
	font-size: var(--text-base);
	line-height: 1.7;
	color: rgba(242, 240, 236, 0.65);
}

/* ==========================================================================
   16. About section & trust grid
   ========================================================================== */

.about-section__frame {
	padding: var(--space-8);
	background-color: var(--color-light);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

.about-section__accent {
	left: var(--space-8);
	width: 2.5rem;
	height: var(--datum-width);
	background-color: var(--datum-color);
}

.trust-grid {
	gap: var(--space-3);
}

.trust-grid__item {
	padding: var(--space-4) var(--space-5);
	font-size: var(--text-sm);
	font-weight: 500;
	line-height: 1.45;
	color: var(--color-text);
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	transition:
		border-color var(--transition-fast),
		background-color var(--transition-fast);
}

.trust-grid__item:hover {
	border-color: rgba(216, 67, 21, 0.35);
	background-color: var(--color-accent-soft);
}

.trust-grid__icon {
	width: 1.375rem;
	height: 1.375rem;
	color: var(--color-accent);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background-color: var(--color-white);
}

/* ==========================================================================
   17. Page header — premium inner pages
   ========================================================================== */

.page-crumb {
	padding-block: 1rem 1.05rem;
	background: var(--color-white);
	border-bottom: 0;
}

.page-crumb .breadcrumbs {
	margin: 0;
}

.page-crumb .breadcrumbs__list {
	gap: 0.35rem;
}

.page-crumb .breadcrumbs__item {
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--color-muted);
}

.page-crumb .breadcrumbs__item a {
	color: var(--color-muted);
	text-decoration: none;
	transition: color var(--transition);
}

.page-crumb .breadcrumbs__item a:hover,
.page-crumb .breadcrumbs__item a:focus-visible {
	color: var(--color-accent);
}

.page-crumb .breadcrumbs__item:not(:last-child)::after {
	margin-left: 0.45rem;
	color: #c8c4bc;
}

.page-crumb .breadcrumbs__item[aria-current="page"] {
	color: var(--color-primary);
	font-weight: 600;
}

.page-header--dark,
.page-header--service {
	--page-header-radius: clamp(1.35rem, 2.4vw, 2.5rem);
	--page-header-inset: 0.75rem;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin: 0 var(--page-header-inset) 1.25rem;
	padding-block: var(--space-12) var(--space-12);
	border-radius: var(--page-header-radius);
	background-color: var(--color-primary);
	background-image: linear-gradient(
		175deg,
		var(--color-dark) 0%,
		var(--color-primary) 60%,
		var(--color-steel) 100%
	);
	border-bottom: 0;
	box-shadow: 0 14px 40px rgba(7, 9, 13, 0.12);
}

@media (min-width: 768px) {
	.page-header--dark,
	.page-header--service {
		--page-header-inset: 1rem;
	}
}

@media (min-width: 1280px) {
	.page-header--dark,
	.page-header--service {
		--page-header-inset: 1.25rem;
		--page-header-radius: 2.5rem;
	}
}

.page-header--dark::before,
.page-header--service::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--datum-width);
	background: var(--gradient-flame);
	z-index: 1;
}

.page-header--dark .page-header__title,
.page-header--service .page-header__title {
	font-family: var(--font-heading);
	font-size: clamp(var(--text-2xl), 4.5vw, var(--text-4xl));
	font-weight: 600;
	letter-spacing: -0.035em;
	color: var(--color-white);
}

.page-header--dark .page-header__description,
.page-header--service .page-header__description {
	color: rgba(242, 240, 236, 0.68);
}

.page-header--dark .section-label,
.page-header--service .section-label {
	font-family: var(--font-mono);
}

.page-header--dark .breadcrumbs a,
.page-header--service .breadcrumbs a {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: rgba(242, 240, 236, 0.78);
}

.page-header--dark .breadcrumbs a:hover,
.page-header--service .breadcrumbs a:hover {
	color: var(--color-white);
}

.page-header--dark .breadcrumbs__item,
.page-header--service .breadcrumbs__item {
	color: rgba(242, 240, 236, 0.78);
}

.page-header--dark .breadcrumbs__item:not(:last-child)::after,
.page-header--service .breadcrumbs__item:not(:last-child)::after {
	color: rgba(242, 240, 236, 0.35);
}

.page-header--dark .breadcrumbs__item[aria-current="page"],
.page-header--service .breadcrumbs__item[aria-current="page"] {
	color: var(--color-white);
	font-weight: 600;
}

.page-header__title {
	letter-spacing: -0.03em;
}

/* ==========================================================================
   18. Site footer — full-width rounded border (no panel fill)
   ========================================================================== */

.site-footer {
	--footer-radius: clamp(1.35rem, 2.4vw, 2.5rem);
	--footer-inset: 0.75rem;
	position: relative;
	background-color: var(--color-dark);
	color: rgba(242, 240, 236, 0.72);
	border-top: none;
	margin: 0;
	padding: var(--footer-inset) var(--footer-inset) 0;
}

.site-footer::before {
	display: none;
}

@media (min-width: 768px) {
	.site-footer {
		--footer-inset: 1rem;
	}
}

@media (min-width: 1280px) {
	.site-footer {
		--footer-inset: 1.25rem;
		--footer-radius: 2.5rem;
	}
}

.site-footer__main {
	padding-block: 0;
	padding-bottom: var(--space-4);
}

.site-footer__panel {
	position: relative;
	isolation: isolate;
	width: 100%;
	padding: var(--space-12) 0 var(--space-10);
	border-radius: var(--footer-radius);
	border: 1px solid rgba(252, 206, 27, 0.28);
	background: transparent;
	box-shadow: none;
}

@media (min-width: 768px) {
	.site-footer__panel {
		padding: var(--space-12) 0 var(--space-10);
	}
}

@media (min-width: 1024px) {
	.site-footer__panel {
		padding: var(--space-16) 0 var(--space-12);
	}
}

.site-footer__grid {
	gap: var(--space-10);
}

@media (min-width: 1024px) {
	.site-footer__grid {
		grid-template-columns: 1.5fr repeat(4, 1fr);
		gap: var(--space-10);
	}
}

.site-footer__name {
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--color-white);
}

.site-footer__tagline {
	font-size: var(--text-sm);
	line-height: 1.65;
	color: rgba(242, 240, 236, 0.55);
}

.site-footer__title {
	position: relative;
	padding-left: calc(var(--space-3) + var(--datum-width));
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-white);
}

.site-footer__title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: var(--datum-width);
	height: 0.875rem;
	background: var(--gradient-flame-hot);
}

.site-footer__menu a {
	font-size: var(--text-sm);
	color: rgba(242, 240, 236, 0.6);
	transition: color var(--transition-fast);
}

.site-footer__menu a:hover {
	color: var(--color-accent);
}

.site-footer__social-link {
	border-radius: var(--radius-sm);
	border-color: rgba(255, 255, 255, 0.1);
	font-family: var(--font-mono);
	font-size: 0.625rem;
	letter-spacing: 0.06em;
}

.site-footer__social-link:hover {
	border-color: var(--color-accent);
	background-color: var(--color-accent-soft);
	color: var(--color-white);
}

.site-footer__contact-list li {
	font-size: var(--text-sm);
}

.site-footer__contact-list a {
	color: rgba(242, 240, 236, 0.6);
}

.site-footer__contact-list a:hover {
	color: var(--color-accent);
}

.site-footer__newsletter {
	margin-top: var(--space-10);
	padding-top: var(--space-8);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.funding-ack {
	border: none;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}

.site-footer__col--brand .funding-ack {
	border-top-color: rgba(252, 206, 27, 0.14);
}

.funding-ack__logo {
	background: rgba(242, 240, 236, 0.88);
	border: 1px solid rgba(255, 255, 255, 0.06);
}

.funding-ack__copy {
	font-family: var(--font-body);
	font-size: 0.625rem;
	letter-spacing: 0.01em;
	line-height: 1.55;
	color: rgba(242, 240, 236, 0.4);
}

.funding-ack__project {
	color: rgba(242, 240, 236, 0.52);
}

.site-footer__bottom {
	border-top: none;
	background-color: transparent;
	padding-block: var(--space-5) var(--space-6);
}

.site-footer__legal,
.site-footer__credit {
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.03em;
	color: rgba(242, 240, 236, 0.38);
}

.site-footer__credit a {
	color: rgba(242, 240, 236, 0.62);
	text-decoration: none;
	transition: color var(--transition);
}

.site-footer__credit a:hover,
.site-footer__credit a:focus-visible {
	color: var(--color-accent);
}

/* ==========================================================================
   19. Reveal animations — subtle translateY
   ========================================================================== */

.reveal {
	opacity: 0;
	transform: translateY(0.75rem);
	transition:
		opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
		transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

[data-stagger] .reveal:nth-child(1) { transition-delay: 0ms; }
[data-stagger] .reveal:nth-child(2) { transition-delay: 60ms; }
[data-stagger] .reveal:nth-child(3) { transition-delay: 120ms; }
[data-stagger] .reveal:nth-child(4) { transition-delay: 180ms; }
[data-stagger] .reveal:nth-child(5) { transition-delay: 240ms; }
[data-stagger] .reveal:nth-child(6) { transition-delay: 300ms; }

/* ==========================================================================
   20. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.hero__instrument-status {
		animation: none;
	}

	.btn:hover .btn__icon,
	.service-card:hover .service-card__cta svg {
		transform: none;
	}

	.site-nav__list > li > a::after {
		transition: none;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   21. Responsive — mobile header, hero stack, instrument full width
   ========================================================================== */

@media (max-width: 1023px) {
	.header-cta.btn--sm {
		display: none !important;
	}

	/* Keep hamburger + cart reachable: lang lives in the mobile drawer */
	.site-header__inner {
		gap: var(--space-2);
	}

	.site-header__brand {
		flex: 1 1 auto;
		min-width: 0;
	}

	.site-header .custom-logo-link {
		display: block;
		max-width: min(11.5rem, 48vw);
	}

	.site-header .custom-logo {
		max-height: 2.35rem;
		max-width: 100%;
	}

	.site-header__actions {
		gap: 0.4rem;
	}

	.site-header__actions > .language-switcher {
		display: none;
	}

	.header-phone {
		display: none !important;
	}

	.hero {
		min-height: clamp(28rem, 88vh, 40rem);
		padding-block: var(--space-16) var(--space-12);
		align-items: flex-end;
		overflow: hidden;
	}

	.hero__datum-line {
		left: var(--space-4);
		height: 60%;
		top: auto;
		bottom: 0;
	}

	.hero__text {
		padding-left: calc(var(--space-4) + var(--datum-width));
	}

	.hero__content {
		grid-template-columns: 1fr;
		gap: var(--space-10);
	}

	.hero__instrument {
		width: 100%;
		margin-top: var(--space-2);
	}

	.hero__stats {
		min-width: 0;
		width: 100%;
	}

	.hero__title {
		font-size: clamp(var(--text-2xl), 7vw, var(--text-4xl));
	}

	.cta-section__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.page-header--dark,
	.page-header--service {
		padding-block: var(--space-12) var(--space-10);
	}

	.site-footer__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 639px) {
	.hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.hero__actions .btn {
		width: 100%;
		justify-content: center;
	}

	.stat-card {
		padding: var(--space-3) var(--space-4);
	}

	.stat-card__number {
		font-size: var(--text-2xl);
	}

	.trust-grid {
		grid-template-columns: 1fr;
	}

	.testimonials-grid {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 640px) and (max-width: 1023px) {
	.site-footer__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==========================================================================
   Hero blueprint visualization (fire safety engineering schematic)
   ========================================================================== */

.hero--blueprint {
	--hero-offset: calc(var(--header-height, 4.75rem) + 0.75rem);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	box-sizing: border-box;
	min-height: calc(100svh - var(--hero-offset));
	height: auto;
	max-height: none;
	padding-block: 0;
	overflow: hidden;
	margin: 0.75rem 0.75rem 0;
	border-radius: clamp(1.35rem, 2.4vw, 2.5rem);
	isolation: isolate;
	background:
		radial-gradient(ellipse 55% 48% at 78% 42%, rgba(216, 67, 21, 0.1) 0%, transparent 58%),
		radial-gradient(ellipse 70% 60% at 18% 90%, rgba(26, 35, 50, 0.55) 0%, transparent 55%),
		var(--color-dark);
}

@media (min-width: 768px) {
	.hero--blueprint {
		--hero-offset: calc(var(--header-height, 4.75rem) + 1rem);
		margin: 1rem 1rem 0;
	}
}

@media (min-width: 1280px) {
	.hero--blueprint {
		--hero-offset: calc(var(--header-height, 4.75rem) + 1.25rem);
		margin: 1.25rem 1.25rem 0;
		border-radius: 2.5rem;
	}
}

/* Fit the first screen under the sticky header (and WP admin bar when present). */
@media (min-width: 1024px) {
	.hero--blueprint {
		height: calc(100svh - var(--hero-offset));
		max-height: calc(100svh - var(--hero-offset));
		min-height: 0;
	}
}

body.admin-bar .hero--blueprint {
	--hero-offset: calc(var(--header-height, 4.75rem) + 0.75rem + 32px);
}

@media (min-width: 768px) {
	body.admin-bar .hero--blueprint {
		--hero-offset: calc(var(--header-height, 4.75rem) + 1rem + 32px);
	}
}

@media (min-width: 1280px) {
	body.admin-bar .hero--blueprint {
		--hero-offset: calc(var(--header-height, 4.75rem) + 1.25rem + 32px);
	}
}

@media screen and (max-width: 782px) {
	body.admin-bar .hero--blueprint {
		--hero-offset: calc(var(--header-height, 4.75rem) + 0.75rem + 46px);
	}
}

.hero--blueprint .hero__overlay {
	background: linear-gradient(
		115deg,
		rgba(7, 9, 13, 0.94) 0%,
		rgba(7, 9, 13, 0.78) 42%,
		rgba(7, 9, 13, 0.35) 100%
	);
}

/* One-shot fire beam on load */
.hero__fire-beam {
	position: absolute;
	inset: 0;
	z-index: 4;
	overflow: hidden;
	pointer-events: none;
	opacity: 0;
}

.hero__fire-beam-core,
.hero__fire-beam-glow {
	position: absolute;
	top: -25%;
	left: 0;
	height: 150%;
	transform: skewX(-24deg) translate3d(-130%, 0, 0);
	will-change: transform;
	opacity: 1;
}

.hero__fire-beam-glow {
	width: min(42vw, 28rem);
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(252, 206, 27, 0.05) 28%,
		rgba(248, 175, 37, 0.22) 46%,
		rgba(237, 102, 62, 0.38) 52%,
		rgba(231, 56, 50, 0.16) 62%,
		transparent 100%
	);
	filter: blur(10px);
	mix-blend-mode: screen;
}

.hero__fire-beam-core {
	width: min(18vw, 11rem);
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(252, 206, 27, 0.15) 30%,
		rgba(252, 206, 27, 0.85) 48%,
		rgba(255, 255, 255, 0.9) 50%,
		rgba(237, 102, 62, 0.9) 54%,
		rgba(231, 56, 50, 0.35) 68%,
		transparent 100%
	);
	filter: blur(0.4px);
	mix-blend-mode: screen;
}

.hero--blueprint.is-beam .hero__fire-beam {
	opacity: 1;
}

.hero--blueprint.is-beam .hero__fire-beam-glow,
.hero--blueprint.is-beam .hero__fire-beam-core {
	animation: hero-fire-beam 1.05s linear forwards;
}

@keyframes hero-fire-beam {
	from {
		transform: skewX(-24deg) translate3d(-130%, 0, 0);
	}
	to {
		/* Fully clear the right edge — no fade/shrink, just exit */
		transform: skewX(-24deg) translate3d(calc(100vw + 100%), 0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero__fire-beam {
		display: none !important;
	}
}

.hero--blueprint .hero__content {
	flex: 1 1 auto;
	align-items: center;
	align-content: center;
	min-height: 0;
	width: 100%;
	padding-block: clamp(1.25rem, 3.5vh, 3.5rem);
}

@media (min-width: 1024px) {
	.hero--blueprint .hero__content {
		grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
		gap: clamp(var(--space-6), 3vw, var(--space-16));
		align-items: center;
		height: 100%;
	}
}

.hero__visual {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 36rem;
	margin-inline: auto;
	gap: 0;
	min-height: 0;
}

@media (min-width: 1024px) {
	.hero__visual {
		max-width: none;
		margin-inline: 0;
		max-height: 100%;
	}
}

/* Blueprint panel */
.hero-blueprint {
	position: relative;
	width: 100%;
	z-index: 1;
	min-height: 0;
}

.hero-blueprint__frame {
	position: relative;
	overflow: hidden;
	padding: var(--space-4) var(--space-4) 0;
	background:
		linear-gradient(160deg, rgba(26, 35, 50, 0.55) 0%, rgba(12, 15, 20, 0.85) 100%);
	border: 1px solid rgba(242, 240, 236, 0.1);
	border-bottom: none;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	box-shadow: var(--shadow-lg);
}

.hero-blueprint__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-4);
	margin-bottom: var(--space-3);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid rgba(242, 240, 236, 0.08);
}

.hero-blueprint__meta-item {
	font-family: var(--font-mono);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(242, 240, 236, 0.42);
}

.hero-blueprint__meta-item--accent {
	color: var(--color-accent);
}

.hero-blueprint__svg {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 520 / 420;
	max-height: clamp(11rem, 34vh, 24rem);
	object-fit: contain;
}

.hero-blueprint__scan {
	position: absolute;
	inset: 18% 0 auto;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(216, 67, 21, 0.55) 45%,
		transparent 100%
	);
	opacity: 0;
	pointer-events: none;
	animation: bp-scanline 7s ease-in-out infinite;
}

/* Draw-on reveal */
.bp-draw {
	stroke-dasharray: 1200;
	stroke-dashoffset: 1200;
	animation: bp-draw 2.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.bp-building { animation-delay: 0.15s; }
.bp-zone { animation-delay: 0.55s; }
.bp-dims { animation-delay: 0.85s; }
.bp-exits { animation-delay: 1.1s; }

.bp-node {
	opacity: 0;
	animation: bp-node-in 0.6s ease forwards, bp-node-pulse 3.2s ease-in-out infinite;
	animation-delay: 1.35s, 2s;
	transform-origin: center;
	transform-box: fill-box;
}

.bp-node--delay-1 { animation-delay: 1.5s, 2.2s; }
.bp-node--delay-2 { animation-delay: 1.65s, 2.4s; }
.bp-node--delay-3 { animation-delay: 1.8s, 2.6s; }

.bp-signal-travel {
	animation: bp-signal 4.5s linear infinite;
	animation-delay: 2.2s;
}

@keyframes bp-draw {
	to { stroke-dashoffset: 0; }
}

@keyframes bp-node-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes bp-node-pulse {
	0%, 100% { opacity: 0.75; }
	50% { opacity: 1; }
}

@keyframes bp-signal {
	0% { stroke-dashoffset: 440; }
	100% { stroke-dashoffset: 0; }
}

@keyframes bp-scanline {
	0%, 12% { opacity: 0; transform: translateY(0); }
	18% { opacity: 0.7; }
	55% { opacity: 0.35; transform: translateY(12rem); }
	70%, 100% { opacity: 0; transform: translateY(16rem); }
}

.hero--blueprint .hero__actions {
	margin-top: clamp(1.25rem, 3vh, 2.5rem);
}

/* Instrument integrated under blueprint */
.hero--blueprint .hero__instrument {
	width: 100%;
	max-width: none;
	margin-top: -1px;
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	border-top: 1px solid rgba(242, 240, 236, 0.06);
	background: rgba(7, 9, 13, 0.94);
	box-shadow: var(--shadow-lg);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.hero--blueprint .hero__instrument-header {
	margin-bottom: var(--space-3);
}

.hero--blueprint .stat-card {
	background: rgba(255, 255, 255, 0.025);
}

/* Short viewports: compress type, gaps, and blueprint so CTAs stay on-screen */
@media (min-width: 1024px) and (max-height: 900px) {
	.hero--blueprint .hero__title {
		font-size: clamp(1.85rem, 3.4vh + 0.6rem, 2.85rem);
		margin-block: var(--space-3) var(--space-4);
	}

	.hero--blueprint .hero__subtitle {
		font-size: var(--text-base);
		line-height: 1.55;
	}

	.hero--blueprint .hero__content {
		padding-block: clamp(1rem, 2.5vh, 2rem);
		gap: clamp(var(--space-5), 2.5vw, var(--space-10));
	}

	.hero-blueprint__frame {
		padding-top: var(--space-3);
	}

	.hero-blueprint__meta {
		margin-bottom: var(--space-2);
		padding-bottom: var(--space-2);
	}

	.hero-blueprint__svg {
		max-height: clamp(9.5rem, 28vh, 18rem);
	}

	.hero--blueprint .hero__instrument-header {
		margin-bottom: var(--space-2);
	}
}

@media (min-width: 1024px) and (max-height: 760px) {
	.hero-blueprint__meta {
		display: none;
	}

	.hero-blueprint__svg {
		max-height: clamp(8rem, 24vh, 14rem);
	}

	.hero--blueprint .hero__actions {
		margin-top: var(--space-4);
	}
}

@media (max-width: 1023px) {
	.hero--blueprint {
		height: auto;
		max-height: none;
		min-height: 0;
		overflow: visible;
	}

	.hero--blueprint .hero__content {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-8);
		height: auto;
		padding-block: var(--space-10) var(--space-8);
	}

	.hero__visual {
		order: 2;
		max-width: 28rem;
	}

	.hero__text {
		order: 1;
		max-width: none;
		padding-left: calc(var(--space-5) + var(--datum-width));
	}

	.hero__title {
		max-width: none;
	}
}

@media (max-width: 639px) {
	.hero-blueprint__meta-item:nth-child(2) {
		display: none;
	}

	.hero-blueprint__frame {
		padding-inline: var(--space-3);
	}

	.bp-legend {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bp-draw,
	.bp-node,
	.bp-signal-travel,
	.hero-blueprint__scan,
	.hero__instrument-status {
		animation: none !important;
	}

	.bp-draw {
		stroke-dashoffset: 0;
	}

	.bp-node {
		opacity: 1;
	}
}

/* Freeze continuous animations while hero is scrolled away */
.hero--blueprint.is-offscreen .bp-node,
.hero--blueprint.is-offscreen .bp-signal-travel,
.hero--blueprint.is-offscreen .hero-blueprint__scan,
.hero--blueprint.is-offscreen .hero__instrument-status {
	animation-play-state: paused;
}

/* ==========================================================================
   Contact form + language flags
   ========================================================================== */

.contact-form-wrapper {
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: linear-gradient(180deg, #ffffff 0%, #f7f5f1 100%);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}

.firescape-cf7 {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.85rem 1rem;
}

@media (min-width: 640px) {
	.firescape-cf7 {
		grid-template-columns: 1fr 1fr;
	}

	.firescape-cf7__row {
		grid-column: span 2;
	}

	.firescape-cf7__row--half {
		grid-column: span 1;
	}
}

.firescape-cf7__row {
	margin: 0;
}

.firescape-cf7__row label {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.firescape-cf7 .wpcf7-form-control-wrap {
	display: block;
}

.firescape-cf7 input[type="text"],
.firescape-cf7 input[type="email"],
.firescape-cf7 input[type="tel"],
.firescape-cf7 textarea {
	width: 100%;
	padding: 0.85rem 1rem;
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--color-primary);
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.firescape-cf7 input:focus,
.firescape-cf7 textarea:focus {
	outline: none;
	border-color: rgba(216, 67, 21, 0.55);
	box-shadow: 0 0 0 3px rgba(216, 67, 21, 0.12);
}

.firescape-cf7__row--submit {
	margin-top: 0.35rem;
}

.firescape-cf7 input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0.85rem 1.5rem;
	font-family: var(--font-heading);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: #fff;
	background: var(--color-accent);
	border: 1px solid var(--color-accent);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.firescape-cf7 input[type="submit"]:hover {
	background: var(--color-accent-hover);
	border-color: var(--color-accent-hover);
	transform: translateY(-1px);
}

.language-switcher--flags .language-switcher__item {
	border-radius: var(--radius-sm);
}

/* Hide TranslatePress default floater if it still appears */
.trp-language-switcher-container,
#trp-floater-ls,
.trp-floater-ls {
	display: none !important;
}

/* ==========================================================================
   About page
   ========================================================================== */

.about-page {
	padding-block: var(--space-8) var(--space-4);
}

.about-page__story {
	margin: 0 var(--space-3) var(--space-10);
}

@media (min-width: 768px) {
	.about-page__story {
		margin-inline: var(--space-4);
	}
}

@media (min-width: 1280px) {
	.about-page__story {
		margin-inline: 1.25rem;
	}
}

.about-page__story-grid {
	display: grid;
	gap: var(--space-8);
	align-items: stretch;
	padding: var(--space-8) var(--space-5);
	border: 1px solid rgba(252, 206, 27, 0.22);
	border-radius: clamp(1.35rem, 2.4vw, 2.5rem);
	background:
		radial-gradient(ellipse 45% 60% at 100% 0%, rgba(252, 206, 27, 0.06), transparent 55%),
		var(--color-white);
}

@media (min-width: 768px) {
	.about-page__story-grid {
		grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 0.85fr);
		gap: var(--space-10);
		padding: var(--space-10) var(--space-8);
	}
}

@media (min-width: 1024px) {
	.about-page__story-grid {
		padding: var(--space-12) var(--space-10);
		gap: var(--space-12);
	}
}

.about-page__story-main {
	min-width: 0;
	max-width: 40rem;
}

.about-page__eyebrow {
	margin-bottom: var(--space-4);
}

.about-page__lead {
	margin: 0 0 var(--space-5);
	font-family: var(--font-heading);
	font-size: clamp(1.35rem, 2.6vw, 1.85rem);
	font-weight: 650;
	letter-spacing: -0.025em;
	line-height: 1.3;
	color: var(--color-primary);
}

.about-page__body {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--color-muted);
	max-width: 36rem;
}

.about-page__mission-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--space-4);
	padding: var(--space-6);
	border-radius: var(--radius-lg);
	background:
		linear-gradient(
			165deg,
			#161a22 0%,
			#10141b 55%,
			#0c0f14 100%
		);
	color: rgba(246, 245, 242, 0.78);
	overflow: hidden;
	min-height: 14rem;
}

.about-page__mission-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--datum-width, 3px);
	background: var(--gradient-flame);
}

.about-page__mission-card-label {
	margin: 0;
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	background: linear-gradient(90deg, var(--flame-amber), var(--color-accent));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.about-page__mission-quote {
	margin: 0;
	padding: 0;
	border: 0;
}

.about-page__mission-quote p {
	margin: 0;
	font-family: var(--font-heading);
	font-size: clamp(1.15rem, 2vw, 1.35rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.35;
	color: var(--color-white);
}

.about-page__title {
	margin: 0 0 var(--space-4);
	font-family: var(--font-heading);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--color-primary);
}

.about-page__block {
	padding-block: var(--space-10) var(--space-12);
}

.about-page__header {
	max-width: 40rem;
	margin-bottom: var(--space-8);
}

.about-page__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--color-border);
}

.about-page__item {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-5);
	align-items: start;
	padding-block: var(--space-6);
	border-bottom: 1px solid var(--color-border);
}

.about-page__index {
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--color-accent);
	line-height: 1.6;
}

.about-page__item-title,
.about-page__reason-title {
	margin: 0 0 var(--space-2);
	font-family: var(--font-heading);
	font-size: 1.125rem;
	font-weight: 650;
	letter-spacing: -0.01em;
	color: var(--color-primary);
}

.about-page__item-text,
.about-page__reason-text {
	margin: 0;
	font-size: 0.9875rem;
	line-height: 1.6;
	color: var(--color-muted);
}

.about-page__block--why {
	padding-bottom: var(--space-16);
	background: linear-gradient(180deg, transparent 0%, #faf9f6 100%);
}

.about-page__reasons {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 768px) {
	.about-page__reasons {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-5);
	}
}

.about-page__reason {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-4);
	align-items: start;
	padding: var(--space-5) var(--space-6);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

.about-page__reason-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	color: #fff;
	background: var(--gradient-flame-hot);
	border-radius: var(--radius-sm);
	flex-shrink: 0;
}

.about-page__reason-icon svg {
	width: 1rem;
	height: 1rem;
}

@media (max-width: 639px) {
	.about-page__story-grid {
		padding: var(--space-6) var(--space-4);
	}

	.about-page__mission-card {
		min-height: 0;
		padding: var(--space-5);
	}

	.about-page__item {
		gap: var(--space-3);
		padding-block: var(--space-5);
	}

	.about-page__reason {
		padding: var(--space-4) var(--space-5);
	}
}

/* ==========================================================================
   First-visit boot splash (session only)
   ========================================================================== */

.fs-boot-splash {
	display: none;
}

html.fs-boot {
	overflow: hidden;
}

html.fs-boot .fs-boot-splash {
	position: fixed;
	inset: 0;
	z-index: 100100;
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		radial-gradient(ellipse 55% 50% at 50% 42%, rgba(252, 206, 27, 0.1), transparent 58%),
		linear-gradient(165deg, #12161e 0%, #07090d 55%, #0c0f14 100%);
	opacity: 1;
	visibility: visible;
	transition:
		opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0.45s linear;
}

html.fs-boot.fs-boot-done .fs-boot-splash {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.fs-boot-splash__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	padding: 1.5rem;
	text-align: center;
}

.fs-boot-splash__mark {
	width: 4.25rem;
	height: 4.25rem;
	object-fit: contain;
	filter: drop-shadow(0 10px 28px rgba(231, 56, 50, 0.28));
	animation: fs-boot-mark 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.fs-boot-splash__wordmark {
	font-family: var(--font-heading, "Archivo", system-ui, sans-serif);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(246, 245, 242, 0.82);
	animation: fs-boot-fade 0.55s ease 0.12s both;
}

.fs-boot-splash__bar {
	display: block;
	width: 7.5rem;
	height: 2px;
	margin-top: 0.35rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	overflow: hidden;
}

.fs-boot-splash__bar-fill {
	display: block;
	height: 100%;
	width: 100%;
	transform-origin: left center;
	transform: scaleX(0);
	border-radius: inherit;
	background: var(--gradient-flame, linear-gradient(90deg, #fcce1b, #ed663e, #e73832));
	animation: fs-boot-bar 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}

@keyframes fs-boot-mark {
	from {
		opacity: 0;
		transform: translateY(8px) scale(0.92);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes fs-boot-fade {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fs-boot-bar {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.fs-boot-splash__mark,
	.fs-boot-splash__wordmark,
	.fs-boot-splash__bar-fill {
		animation: none !important;
		opacity: 1;
		transform: none;
	}

	html.fs-boot .fs-boot-splash {
		transition: none;
	}
}

/* ==========================================================================
   Shop promo — reusable extinguisher panel
   ========================================================================== */

.shop-promo-section {
	padding-block: var(--space-10, 3rem);
}

.shop-promo {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--radius-md, 1rem);
	border: 1px solid rgba(255, 255, 255, 0.08);
	background:
		radial-gradient(ellipse 80% 70% at 88% 70%, rgba(255, 84, 24, 0.22), transparent 55%),
		linear-gradient(160deg, #151922 0%, #0c0f15 55%, #18120f 100%);
	color: #f4f1ea;
	box-shadow: 0 16px 40px rgba(7, 9, 13, 0.12);
}

.shop-promo--stack {
	flex: 1 1 auto;
}

.contact-page__info > .shop-promo--stack {
	margin-top: 0;
}

@media (max-width: 1023px) {
	.contact-page__info > .shop-promo--stack {
		margin-top: var(--space-6);
	}
}

.shop-promo__body {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(7.5rem, 42%);
	gap: 0.5rem;
	align-items: end;
	flex: 1 1 auto;
	min-height: 16rem;
	padding: 1.25rem 1.15rem 1rem;
}

.shop-promo__copy {
	position: relative;
	z-index: 2;
	display: grid;
	gap: 0.55rem;
	align-content: end;
	padding-bottom: 0.25rem;
}

.shop-promo__eyebrow {
	margin: 0;
	color: rgba(255, 186, 120, 0.92);
}

.shop-promo__title {
	margin: 0;
	font-family: var(--font-heading, "Archivo", system-ui, sans-serif);
	font-size: clamp(1.15rem, 2.4vw, 1.45rem);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.2;
	color: #f7f5f0;
}

.shop-promo__text {
	margin: 0 0 0.35rem;
	max-width: 18rem;
	font-size: 0.9rem;
	line-height: 1.45;
	color: rgba(242, 240, 236, 0.68);
}

.shop-promo__copy .btn {
	justify-self: start;
}

.shop-promo__prop {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 100%;
	min-height: 14rem;
	pointer-events: none;
	user-select: none;
	filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.45));
}

.shop-promo__prop-stage {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	height: 100%;
	transform: rotate(-10deg);
	transform-origin: 55% 90%;
}

.shop-promo__prop-figure {
	position: relative;
	height: min(100%, 17rem);
	width: auto;
}

.shop-promo__prop-img {
	display: block;
	width: auto;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
}

.shop-promo__spray {
	position: absolute;
	left: 6%;
	bottom: 22%;
	width: 0;
	height: 0;
	z-index: 2;
}

.shop-promo__spray-plume,
.shop-promo__spray-mist {
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 999px;
	opacity: 0;
	transform-origin: right center;
	pointer-events: none;
}

.shop-promo__spray-plume {
	width: 4.5rem;
	height: 1.15rem;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(255, 255, 255, 0.15) 18%,
		rgba(255, 255, 255, 0.75) 55%,
		rgba(255, 255, 255, 0.95) 100%
	);
	filter: blur(1.4px);
	border-radius: 60% 40% 40% 60% / 50% 50% 50% 50%;
}

.shop-promo__spray-mist {
	width: 6.5rem;
	height: 2.4rem;
	left: -1rem;
	top: -0.55rem;
	background: radial-gradient(
		ellipse at 90% 50%,
		rgba(255, 255, 255, 0.5) 0%,
		rgba(255, 255, 255, 0.16) 45%,
		transparent 72%
	);
	filter: blur(4px);
}

.shop-promo__spray-dot {
	position: absolute;
	left: 0;
	top: 0;
	width: 0.24rem;
	height: 0.24rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	opacity: 0;
	box-shadow: 0 0 6px rgba(255, 255, 255, 0.45);
}

.shop-promo__products {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.55rem;
	margin: 0;
	padding: 0.85rem 1rem 1rem;
	list-style: none;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(0, 0, 0, 0.18);
}

.shop-promo__product {
	display: grid;
	gap: 0.4rem;
	justify-items: center;
	padding: 0.55rem 0.35rem 0.65rem;
	text-decoration: none;
	color: inherit;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0.75rem;
	background: rgba(255, 255, 255, 0.04);
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		transform 0.2s ease;
}

.shop-promo__product:hover,
.shop-promo__product:focus-visible {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 150, 80, 0.45);
	transform: translateY(-2px);
}

.shop-promo__product-img {
	width: 3.25rem;
	height: 3.25rem;
	object-fit: contain;
}

.shop-promo__product-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-width: 100%;
	font-size: 0.68rem;
	line-height: 1.3;
	text-align: center;
	color: rgba(242, 240, 236, 0.78);
}

/* Full-width band variant */
.shop-promo--band .shop-promo__body {
	min-height: 17.5rem;
	padding: 1.5rem 1.35rem 1.15rem;
	grid-template-columns: minmax(0, 1.15fr) minmax(9rem, 36%);
	align-items: center;
}

.shop-promo--band .shop-promo__copy {
	align-content: center;
	gap: 0.7rem;
	min-width: 0;
}

.shop-promo--band .shop-promo__title {
	font-size: clamp(1.35rem, 3vw, 1.85rem);
	max-width: 18ch;
}

.shop-promo--band .shop-promo__text {
	max-width: 28rem;
	font-size: 0.95rem;
}

.shop-promo--band .shop-promo__prop {
	min-height: 15rem;
}

.shop-promo--band .shop-promo__prop-figure {
	height: min(100%, 18.5rem);
}

.shop-promo--band .shop-promo__products {
	padding: 1rem 1.25rem 1.15rem;
	gap: 0.75rem;
}

.shop-promo--band .shop-promo__product {
	padding: 0.7rem 0.5rem 0.8rem;
}

.shop-promo--band .shop-promo__product-img {
	width: 3.75rem;
	height: 3.75rem;
}

.shop-promo--band .shop-promo__product-name {
	font-size: 0.72rem;
}

@media (min-width: 1024px) {
	.shop-promo--stack {
		min-height: 0;
	}

	.shop-promo--stack .shop-promo__body {
		min-height: 18rem;
		padding: 1.5rem 1.25rem 1.1rem;
	}

	.shop-promo--stack .shop-promo__prop {
		min-height: 16rem;
	}

	.shop-promo--stack .shop-promo__prop-figure {
		height: min(100%, 19rem);
	}

	.shop-promo--band .shop-promo__body {
		min-height: 19rem;
		padding: 1.75rem 1.75rem 1.25rem;
	}

	.shop-promo--band .shop-promo__prop-figure {
		height: min(100%, 20rem);
	}
}

/* Tablet + phone: stack copy, float prop as accent */
@media (max-width: 900px) {
	.shop-promo__body {
		position: relative;
		display: block;
		min-height: 0;
		padding: 1.25rem 1.15rem 1.1rem;
	}

	.shop-promo__copy {
		position: relative;
		z-index: 2;
		align-content: start;
		max-width: 100%;
		padding-right: 6.5rem;
	}

	.shop-promo__title,
	.shop-promo--band .shop-promo__title {
		max-width: none;
		font-size: clamp(1.2rem, 5.5vw, 1.55rem);
	}

	.shop-promo__text,
	.shop-promo--band .shop-promo__text {
		max-width: 22rem;
	}

	.shop-promo__copy .btn {
		width: auto;
		max-width: 100%;
	}

	.shop-promo__prop {
		position: absolute;
		right: -0.35rem;
		bottom: 0.35rem;
		z-index: 1;
		width: 7.25rem;
		min-height: 0;
		height: 11rem;
		opacity: 0.95;
		justify-content: flex-end;
		pointer-events: none;
	}

	.shop-promo__prop-stage {
		transform: rotate(-8deg);
	}

	.shop-promo__prop-figure {
		height: 100%;
	}

	.shop-promo__spray {
		display: none;
	}

	.shop-promo__products {
		display: flex;
		flex-direction: column;
		gap: 0.45rem;
		padding: 0.85rem 1rem 1rem;
	}

	.shop-promo__product {
		grid-template-columns: 2.75rem minmax(0, 1fr);
		align-items: center;
		justify-items: start;
		gap: 0.75rem;
		padding: 0.55rem 0.75rem;
		text-align: left;
	}

	.shop-promo__product-img,
	.shop-promo--band .shop-promo__product-img {
		width: 2.75rem;
		height: 2.75rem;
	}

	.shop-promo__product-name {
		display: block;
		-webkit-line-clamp: unset;
		overflow: visible;
		font-size: 0.8125rem;
		line-height: 1.35;
		text-align: left;
		color: rgba(242, 240, 236, 0.88);
	}

	.shop-promo--band .shop-promo__body {
		min-height: 0;
		padding: 1.35rem 1.2rem 1.15rem;
	}

	.shop-promo--band .shop-promo__copy {
		padding-right: 7rem;
	}

	.shop-promo--band .shop-promo__prop {
		width: 8rem;
		height: 12rem;
	}

	.shop-promo--band .shop-promo__products {
		grid-template-columns: none;
		padding: 0.9rem 1.1rem 1.1rem;
	}
}

@media (max-width: 480px) {
	.shop-promo__body,
	.shop-promo--band .shop-promo__body {
		padding: 1.15rem 1rem 1rem;
	}

	.shop-promo__copy,
	.shop-promo--band .shop-promo__copy {
		padding-right: 5.25rem;
		gap: 0.45rem;
	}

	.shop-promo__title,
	.shop-promo--band .shop-promo__title {
		font-size: 1.2rem;
	}

	.shop-promo__text {
		font-size: 0.875rem;
	}

	.shop-promo__prop,
	.shop-promo--band .shop-promo__prop {
		position: absolute;
		right: -0.5rem;
		bottom: -0.15rem;
		width: 5.75rem;
		height: 9rem;
		margin: 0;
		opacity: 0.92;
		justify-content: flex-end;
	}

	.shop-promo__prop-stage {
		transform: rotate(-8deg);
	}

	.shop-promo__prop-figure {
		height: 100%;
	}

	.shop-promo__copy .btn {
		width: auto;
		min-height: 2.75rem;
		padding-inline: 1.1rem;
	}

	.shop-promo__products {
		gap: 0.4rem;
		padding: 0.75rem 0.85rem 0.9rem;
	}

	.shop-promo__product {
		padding: 0.5rem 0.65rem;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.shop-promo.is-live .shop-promo__prop-stage {
		animation: shop-promo-float 7s ease-in-out infinite;
	}

	.shop-promo.is-live .shop-promo__spray-plume {
		animation: cta-spray-plume 4.8s ease-out infinite;
	}

	.shop-promo.is-live .shop-promo__spray-mist {
		animation: cta-spray-mist 4.8s ease-out infinite;
	}

	.shop-promo.is-live .shop-promo__spray-dot--1 {
		animation: cta-spray-dot-1 4.8s ease-out infinite;
	}

	.shop-promo.is-live .shop-promo__spray-dot--2 {
		animation: cta-spray-dot-2 4.8s ease-out infinite;
	}

	.shop-promo.is-live .shop-promo__spray-dot--3 {
		animation: cta-spray-dot-3 4.8s ease-out infinite;
	}
}

@keyframes shop-promo-float {
	0%,
	100% {
		transform: rotate(-10deg) translateY(0);
	}
	50% {
		transform: rotate(-7deg) translateY(-0.3rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.shop-promo__prop-stage,
	.shop-promo__spray-plume,
	.shop-promo__spray-mist,
	.shop-promo__spray-dot {
		animation: none !important;
	}

	.shop-promo__spray {
		display: none;
	}
}