/* ==========================================================================
   Brandroot Motion — homepage sections
   --------------------------------------------------------------------------
   Every section has a complete, readable baseline layout (no JavaScript, the
   Elementor editor, reduced motion, small screens). Motion "modes" such as
   .is-pinned-mode are added by the engine on capable devices only.

   Elementor note: a container set to "Boxed" wraps its children in .e-con-inner.
   Structural rules below target both shapes, but "Full Width" is recommended for
   the containers named in ELEMENTOR-HOMEPAGE-STRUCTURE.md.
   ========================================================================== */

/* Shared: images that should fill their frame */
.br-fill-img img,
.br-hero-media img,
.br-service-card .br-service-media img,
.br-story-image img,
.br-project-media img,
.br-expand-media img,
.br-testimonial-bg img,
.br-final-cta-bg img,
.br-360-poster img,
.br-parallax-img img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.br-service-media :is(.elementor-widget-container),
.br-service-media > img,
.br-hero-media :is(.elementor-widget-image, .elementor-widget-container, .e-con-inner),
.br-expand-media :is(.elementor-widget-image, .elementor-widget-container, .e-con-inner),
.br-project-media :is(.elementor-widget-image, .elementor-widget-container, .e-con-inner),
.br-testimonial-bg :is(.elementor-widget-image, .elementor-widget-container, .e-con-inner),
.br-final-cta-bg :is(.elementor-widget-image, .elementor-widget-container, .e-con-inner),
.br-story-image :is(.elementor-widget-image, .elementor-widget-container),
.br-360-poster :is(.elementor-widget-image, .elementor-widget-container),
.br-parallax-img :is(.elementor-widget-image, .elementor-widget-container) {
	width: 100%;
	height: 100%;
	max-width: none;
}

/* ==========================================================================
   02 · Hero
   ========================================================================== */
.br-hero {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	overflow: clip;
	isolation: isolate;
	justify-content: flex-end !important;
	color: var(--br-on-dark);
	background-color: var(--br-dark);
}

/* Oversized media layer: gives room for scroll drift and mouse displacement without exposing edges. */
.br-hero-media {
	position: absolute !important;
	inset: -6% -2.5% -3% -2.5%;
	z-index: -1;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	transform-origin: 50% 60%;
	background-size: cover;
	background-position: center;
}

.br-hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(to top, rgba(21, 24, 22, 0.78) 0%, rgba(21, 24, 22, 0.28) 42%, rgba(21, 24, 22, 0) 62%),
		linear-gradient(to bottom, rgba(21, 24, 22, 0.45) 0%, rgba(21, 24, 22, 0) 22%);
}

:where(.br-hero-title) .elementor-heading-title {
	font-family: var(--br-font-display);
	font-size: var(--br-fs-display);
	font-weight: 400;
	line-height: 0.94;
	letter-spacing: -0.025em;
	color: var(--br-on-dark);
}

:where(.br-hero-eyebrow, .br-hero-copy) {
	color: var(--br-on-dark);
}

:where(.br-hero-copy) {
	max-width: 44ch;
}

.br-hero-cue {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.br-hero-cue .elementor-button-icon,
.br-hero-cue .elementor-icon {
	animation: br-cue 2.4s var(--br-ease-in-out) infinite;
}

@keyframes br-cue {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(6px); }
}

/* ==========================================================================
   03 · Editorial statement
   ========================================================================== */
:where(.br-statement-title) .elementor-heading-title {
	font-family: var(--br-font-display);
	font-size: clamp(2.25rem, 1.2rem + 4.2vw, 6rem);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.02em;
	max-width: 18ch;
}

.br-statement-media {
	overflow: hidden;
	border-radius: var(--br-radius);
}

/* ==========================================================================
   04 · Services
   Baseline: native horizontal scroller with snap (keyboard focusable via JS).
   Desktop + JS: .is-pinned-mode → pinned, scrubbed horizontal travel.
   Mobile: vertical stack (responsive.css).
   ========================================================================== */
.br-services {
	position: relative;
	overflow-x: clip;
}

.br-services-track,
.br-services-track > .e-con-inner {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	gap: clamp(16px, 2vw, 32px);
}

.br-services-track {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: var(--br-border) transparent;
	padding-bottom: 14px;
}

.br-services-track > .e-con-inner {
	max-width: none !important;
	margin: 0 !important;
}

.br-service-card {
	position: relative;
	flex: 0 0 clamp(290px, 32vw, 480px) !important;
	width: auto !important;
	max-width: none !important;
	scroll-snap-align: start;
	gap: 18px;
}

.br-service-media {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--br-radius);
	width: 100% !important;
}

.br-service-media img {
	transform-origin: 50% 60%;
	transition: scale 1.1s var(--br-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.br-service-card:hover .br-service-media img {
		scale: 1.05;
	}
}

:where(.br-service-number) .elementor-heading-title {
	font-family: var(--br-font-body);
	font-size: var(--br-fs-small);
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--br-muted);
	font-variant-numeric: tabular-nums;
}

:where(.br-service-title) .elementor-heading-title {
	font-family: var(--br-font-display);
	font-size: var(--br-fs-h3);
	font-weight: 400;
	line-height: 1.1;
}

.br-service-card .br-arrow-link .elementor-button {
	transition: transform 0.6s var(--br-ease-out), color 0.3s;
}

@media (hover: hover) and (pointer: fine) {
	.br-service-card:hover .br-arrow-link .elementor-button-icon {
		transform: translate(4px, -4px);
	}
}

/* Pinned mode (desktop, motion allowed) */
.br-services.is-pinned-mode {
	padding-top: calc(var(--br-header-h) + 24px) !important;
	min-height: 100vh;
	min-height: 100svh;
	justify-content: center !important;
}

.br-services.is-pinned-mode .br-services-track {
	overflow: visible;
	scroll-snap-type: none;
	padding-bottom: 0;
	will-change: transform;
}

.br-services.is-pinned-mode .br-service-card {
	flex-basis: clamp(320px, 30vw, 460px) !important;
}

.br-services.is-pinned-mode .br-service-card .br-service-title .elementor-heading-title {
	transition: color 0.5s var(--br-ease-out);
}

.br-services.is-pinned-mode .br-service-card.is-active .br-service-number .elementor-heading-title {
	color: var(--br-accent);
}

.br-services-progress {
	position: absolute;
	left: var(--br-gutter);
	right: var(--br-gutter);
	bottom: clamp(24px, 4vh, 48px);
	height: 1px;
	background: var(--br-border);
	pointer-events: none;
}

.br-services-progress span {
	display: block;
	height: 100%;
	background: var(--br-text);
	transform: scaleX(0);
	transform-origin: 0 50%;
}

/* ==========================================================================
   05 · Statistics
   ========================================================================== */
.br-stat {
	border-top: 1px solid var(--br-border);
	padding-top: 20px !important;
}

:where(.br-stat-number, .br-counter) .elementor-heading-title {
	font-family: var(--br-font-display);
	font-size: clamp(2.75rem, 1.6rem + 3.5vw, 5.5rem);
	font-weight: 400;
	line-height: 1;
	font-variant-numeric: lining-nums tabular-nums;
}

/* ==========================================================================
   06 · How we work — story
   Baseline: alternating text | image rows (numbered by CSS for up to 12 steps,
   and by components.js for any count).
   ========================================================================== */
.br-story-stage,
.br-story-stage > .e-con-inner {
	display: grid !important;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	column-gap: var(--br-gutter);
	row-gap: clamp(56px, 8vw, 120px);
	align-items: center;
	position: relative;
}

.br-story-stage:has(> .e-con-inner) {
	display: block !important;
}

.br-story-copy-area,
.br-story-copy-area > .e-con-inner,
.br-story-media-area,
.br-story-media-area > .e-con-inner {
	display: contents !important;
}

.br-story-copy {
	grid-column: 1;
	grid-row: var(--br-step, auto);
	max-width: 520px;
}

.br-story-image {
	grid-column: 2;
	grid-row: var(--br-step, auto);
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--br-radius);
	width: 100% !important;
}

.br-story-copy:nth-child(1), .br-story-image:nth-child(1) { --br-step: 1; }
.br-story-copy:nth-child(2), .br-story-image:nth-child(2) { --br-step: 2; }
.br-story-copy:nth-child(3), .br-story-image:nth-child(3) { --br-step: 3; }
.br-story-copy:nth-child(4), .br-story-image:nth-child(4) { --br-step: 4; }
.br-story-copy:nth-child(5), .br-story-image:nth-child(5) { --br-step: 5; }
.br-story-copy:nth-child(6), .br-story-image:nth-child(6) { --br-step: 6; }
.br-story-copy:nth-child(7), .br-story-image:nth-child(7) { --br-step: 7; }
.br-story-copy:nth-child(8), .br-story-image:nth-child(8) { --br-step: 8; }
.br-story-copy:nth-child(9), .br-story-image:nth-child(9) { --br-step: 9; }
.br-story-copy:nth-child(10), .br-story-image:nth-child(10) { --br-step: 10; }
.br-story-copy:nth-child(11), .br-story-image:nth-child(11) { --br-step: 11; }
.br-story-copy:nth-child(12), .br-story-image:nth-child(12) { --br-step: 12; }

:where(.br-story-number) .elementor-heading-title {
	font-family: var(--br-font-display);
	font-size: clamp(3.5rem, 2rem + 5vw, 8rem);
	font-weight: 400;
	line-height: 1;
	color: var(--br-accent);
	font-variant-numeric: lining-nums;
}

/* Pinned mode (desktop, motion allowed): one stage, stacked steps */
.br-story-stage.is-pinned,
.br-story-stage.is-pinned > .e-con-inner {
	height: 100vh;
	height: 100svh;
	grid-template-rows: minmax(0, 1fr);
	row-gap: 0;
	padding-top: calc(var(--br-header-h) * 0.6);
	box-sizing: border-box;
}

.br-story-stage.is-pinned .br-story-copy-area,
.br-story-stage.is-pinned .br-story-copy-area > .e-con-inner,
.br-story-stage.is-pinned .br-story-media-area,
.br-story-stage.is-pinned .br-story-media-area > .e-con-inner {
	display: grid !important;
	grid-template-areas: "stack";
	grid-row: 1;
	align-items: center;
	width: 100%;
	height: 100%;
	max-width: none;
}

.br-story-stage.is-pinned .br-story-copy-area:has(> .e-con-inner),
.br-story-stage.is-pinned .br-story-media-area:has(> .e-con-inner) {
	display: block !important;
}

.br-story-stage.is-pinned .br-story-copy-area {
	grid-column: 1;
}

.br-story-stage.is-pinned .br-story-media-area {
	grid-column: 2;
	height: min(76vh, 780px);
	align-self: center;
	position: relative;
}

.br-story-stage.is-pinned .br-story-copy,
.br-story-stage.is-pinned .br-story-image {
	grid-area: stack !important;
	grid-column: auto;
	grid-row: auto;
}

.br-story-stage.is-pinned .br-story-image {
	height: 100%;
	aspect-ratio: auto;
}

.br-story-stage.is-pinned .br-story-copy:not(.is-current) {
	pointer-events: none;
}

.br-story-indicator {
	position: absolute;
	left: 0;
	bottom: clamp(24px, 6vh, 64px);
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: var(--br-fs-small);
	font-variant-numeric: tabular-nums;
	color: var(--br-muted);
	pointer-events: none;
}

.br-story-indicator__rail {
	position: relative;
	width: 56px;
	height: 1px;
	background: var(--br-border);
	overflow: hidden;
}

.br-story-indicator__rail i {
	position: absolute;
	inset: 0;
	background: var(--br-text);
	/* Horizontal rail: JS scales the fill along X with scroll progress. */
	transform: scaleX(0);
	transform-origin: 0 50%;
}

/* ==========================================================================
   07 · Selected projects — card stack
   ========================================================================== */
.br-project-card {
	position: relative;
	min-height: min(82vh, 860px);
	overflow: hidden;
	isolation: isolate;
	border-radius: var(--br-radius-lg);
	color: var(--br-on-dark);
	justify-content: flex-end !important;
	transform-origin: 50% 0%;
}

.br-project-media {
	position: absolute !important;
	inset: 0;
	z-index: -1;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.br-project-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(21, 24, 22, 0.75), rgba(21, 24, 22, 0) 55%);
	pointer-events: none;
}

/* Dimming layer driven by --br-dim (0 → ~0.45) as the next card covers this one */
.br-project-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	background: var(--br-dark);
	opacity: var(--br-dim, 0);
	pointer-events: none;
}

:where(.br-project-title) .elementor-heading-title {
	font-family: var(--br-font-display);
	font-size: clamp(2rem, 1.2rem + 3vw, 4.5rem);
	font-weight: 400;
	line-height: 1.02;
	color: var(--br-on-dark);
}

:where(.br-project-meta) {
	color: var(--br-on-dark-muted);
}

.br-projects.is-stack-mode .br-project-card {
	position: sticky !important;
	top: calc(var(--br-header-h) + 16px + var(--br-stack-i, 0) * 12px);
}

/* ==========================================================================
   08 · Full-bleed reveal
   ========================================================================== */
.br-expand {
	position: relative;
	display: grid !important;
	overflow: clip;
	min-height: 100vh;
	min-height: 100svh;
	padding: 0 !important;
	color: var(--br-on-dark);
}

.br-expand > .e-con-inner {
	display: grid !important;
	max-width: none !important;
}

.br-expand-media,
.br-expand-content {
	grid-area: 1 / 1 !important;
}

.br-expand-media {
	width: 100% !important;
	max-width: none !important;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	padding: 0 !important;
	position: relative;
}

.br-expand-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(21, 24, 22, 0.72), rgba(21, 24, 22, 0) 55%);
	pointer-events: none;
}

.br-expand-content {
	z-index: 1;
	align-self: end;
	padding: var(--br-gutter) !important;
	max-width: 900px;
}

:where(.br-expand-title) .elementor-heading-title {
	font-family: var(--br-font-display);
	font-size: clamp(2.5rem, 1.4rem + 4.5vw, 7rem);
	font-weight: 400;
	line-height: 0.98;
	color: var(--br-on-dark);
}

/* ==========================================================================
   09 · Project category list (hover preview)
   ========================================================================== */
.br-project-list {
	position: relative;
}

.br-project-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	border-top: 1px solid var(--br-border);
	padding-block: clamp(18px, 2.6vw, 36px) !important;
	color: inherit;
	text-decoration: none;
	transition: opacity 0.5s var(--br-ease-out);
}

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

.br-project-link:last-child {
	border-bottom: 1px solid var(--br-border);
}

.br-project-link .elementor-heading-title {
	font-family: var(--br-font-display);
	font-size: clamp(1.75rem, 1rem + 3vw, 4.25rem);
	font-weight: 400;
	line-height: 1.05;
	transition: transform 0.7s var(--br-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.br-project-list.has-preview:hover .br-project-link:not(:hover) {
		opacity: 0.32;
	}

	.br-project-link:hover .elementor-heading-title {
		transform: translateX(14px);
	}
}

.br-project-link:focus-visible .elementor-heading-title {
	transform: translateX(14px);
}

/* ==========================================================================
   10 · Before / After
   ========================================================================== */
.br-compare,
.br-compare > .e-con-inner {
	position: relative;
}

.br-compare {
	overflow: hidden;
	border-radius: var(--br-radius-lg);
}

.br-compare.is-ready {
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
	cursor: ew-resize;
	--br-compare: 50%;
}

.br-compare.is-ready img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-user-drag: none;
	pointer-events: none;
}

.br-compare.is-ready .br-compare__after {
	position: absolute !important;
	inset: 0;
	margin: 0 !important;
	clip-path: inset(0 0 0 var(--br-compare));
}

.br-compare.is-ready .br-compare__after :is(.elementor-widget-container) {
	height: 100%;
}

.br-compare__ui {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}

.br-compare__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--br-compare);
	width: 2px;
	margin-left: -1px;
	background: var(--br-on-dark);
	box-shadow: 0 0 0 1px rgba(21, 24, 22, 0.12);
}

.br-compare__knob {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	background: rgba(236, 235, 230, 0.9);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: 0 6px 24px rgba(21, 24, 22, 0.18);
	transition: transform 0.4s var(--br-ease-out);
}

.br-compare__knob::before,
.br-compare__knob::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 8px;
	height: 8px;
	border-left: 1.5px solid var(--br-text);
	border-bottom: 1.5px solid var(--br-text);
}

.br-compare__knob::before {
	left: 15px;
	transform: translateY(-50%) rotate(45deg);
}

.br-compare__knob::after {
	right: 15px;
	transform: translateY(-50%) rotate(-135deg);
}

.br-compare.is-dragging .br-compare__knob {
	transform: translate(-50%, -50%) scale(0.9);
}

.br-compare:has(.br-compare__range:focus-visible) .br-compare__knob {
	outline: 2px solid var(--br-on-dark);
	outline-offset: 4px;
}

.br-compare__tag {
	position: absolute;
	top: 18px;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 0.8125rem;
	background: rgba(21, 24, 22, 0.55);
	color: var(--br-on-dark);
}

.br-compare__tag--before {
	left: 18px;
}

.br-compare__tag--after {
	right: 18px;
}

.br-compare__range {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
	opacity: 0;
}

/* ==========================================================================
   11 · Asymmetric parallax gallery (pattern repeats every 5 images)
   ========================================================================== */
.br-gallery,
.br-gallery > .e-con-inner {
	display: grid !important;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--br-gutter);
	row-gap: clamp(40px, 7vw, 120px);
	align-items: start;
}

.br-gallery:has(> .e-con-inner) {
	display: block !important;
}

.br-gallery .br-parallax-img {
	overflow: hidden;
	border-radius: var(--br-radius);
	width: 100% !important;
	max-width: none !important;
}

.br-gallery .br-parallax-img:nth-child(5n + 1) { grid-column: 1 / span 5; aspect-ratio: 4 / 5; }
.br-gallery .br-parallax-img:nth-child(5n + 2) { grid-column: 8 / span 5; aspect-ratio: 3 / 4; margin-top: clamp(60px, 14vw, 220px); }
.br-gallery .br-parallax-img:nth-child(5n + 3) { grid-column: 3 / span 4; aspect-ratio: 1 / 1; }
.br-gallery .br-parallax-img:nth-child(5n + 4) { grid-column: 7 / span 6; aspect-ratio: 16 / 10; margin-top: clamp(40px, 8vw, 140px); }
.br-gallery .br-parallax-img:nth-child(5n + 5) { grid-column: 2 / span 5; aspect-ratio: 4 / 5; }

/* Oversize the image inside its frame so drift never reveals an edge. Uses the individual
   `scale` property, which composes with GSAP's transform instead of being overwritten. */
.br-parallax-img img {
	scale: 1.16;
}

/* ==========================================================================
   13 · Testimonial story
   ========================================================================== */
.br-testimonial {
	position: relative;
	overflow: clip;
	isolation: isolate;
	color: var(--br-on-dark);
	background-color: var(--br-dark);
}

.br-testimonial-bg {
	position: absolute !important;
	inset: -10% 0;
	z-index: -1;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.br-testimonial-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(21, 24, 22, 0.62);
	pointer-events: none;
}

:where(.br-testimonial-quote) .elementor-heading-title,
:where(.br-testimonial-quote) p {
	font-family: var(--br-font-display);
	font-size: clamp(1.75rem, 1rem + 2.8vw, 3.75rem);
	font-weight: 400;
	line-height: 1.16;
	letter-spacing: -0.01em;
	color: var(--br-on-dark);
	max-width: 24ch;
}

:where(.br-testimonial-meta) {
	color: var(--br-on-dark-muted);
}

:where(.br-review-card) {
	border-top: 1px solid var(--br-border);
	padding-top: 24px;
}

/* ==========================================================================
   14 · 360° experience
   ========================================================================== */
.br-360 {
	position: relative;
}

.br-360-stage {
	position: relative;
	overflow: hidden;
	border-radius: var(--br-radius-lg);
	isolation: isolate;
}

.br-360-poster {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	width: 100% !important;
}

.br-360-frame {
	position: absolute;
	inset: 0;
	z-index: 5;
	background: var(--br-dark);
}

.br-360-frame iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.br-360-close {
	position: absolute;
	top: 16px;
	right: 16px;
	padding: 10px 16px;
	border: 0;
	border-radius: 999px;
	background: rgba(236, 235, 230, 0.92);
	color: var(--br-text);
	font: 500 0.875rem/1 var(--br-font-body);
	cursor: pointer;
}

.br-360.is-live .br-360-trigger {
	visibility: hidden;
}

/* ==========================================================================
   15 · Blog (Posts / Loop Grid) — restrained
   ========================================================================== */
.br-blog .elementor-post__thumbnail,
.br-blog .e-loop-item .elementor-widget-image {
	overflow: hidden;
	border-radius: var(--br-radius);
}

.br-blog .elementor-post__thumbnail img,
.br-blog .e-loop-item img {
	transition: transform 1s var(--br-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.br-blog .elementor-post:hover .elementor-post__thumbnail img,
	.br-blog .e-loop-item:hover img {
		transform: scale(1.04);
	}
}

:where(.br-blog) .elementor-post__title,
:where(.br-blog) .elementor-post__title a {
	font-family: var(--br-font-display);
	font-weight: 400;
	line-height: 1.2;
}

/* ==========================================================================
   FAQ (Elementor Accordion) — content stays in the HTML, fully indexable
   ========================================================================== */
.br-faq .elementor-accordion-item,
.br-faq .e-n-accordion-item {
	border: 0 !important;
	border-top: 1px solid var(--br-border) !important;
}

.br-faq .elementor-accordion-item:last-child,
.br-faq .e-n-accordion-item:last-child {
	border-bottom: 1px solid var(--br-border) !important;
}

.br-faq .elementor-tab-title,
.br-faq .e-n-accordion-item-title {
	padding-block: 22px !important;
	padding-inline: 0 !important;
}

/* ==========================================================================
   16 · Final CTA
   ========================================================================== */
.br-final-cta {
	position: relative;
	overflow: clip;
	isolation: isolate;
	min-height: 90vh;
	min-height: 90svh;
	justify-content: center !important;
	color: var(--br-on-dark);
	background-color: var(--br-dark);
}

.br-final-cta-bg {
	position: absolute !important;
	inset: -12% 0;
	z-index: -1;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.br-final-cta-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(21, 24, 22, 0.58);
	pointer-events: none;
}

:where(.br-final-cta-title) .elementor-heading-title {
	font-family: var(--br-font-display);
	font-size: clamp(2.75rem, 1.2rem + 6vw, 8.5rem);
	font-weight: 400;
	line-height: 0.96;
	letter-spacing: -0.025em;
	color: var(--br-on-dark);
}