/* BP Comment Utiliser Hero widget styles
 *
 * Full-width hero for the "Comment utiliser" page.
 * The agricultural photograph spans the entire viewport width
 * as one continuous background (no boxed image, no weird mask
 * shape). A single cream → transparent gradient fade sits on
 * the inline-start side so the left editorial block (eyebrow /
 * two-tone serif title / description / dual CTAs / trust row /
 * "naturellement plus forts" mark) stays perfectly readable
 * while the photo keeps its full-bleed presence on the
 * inline-end. A small vertical "UNE SOLUTION NATURELLE" label
 * sits in the photo area as a subtle brand mark, mirroring
 * the rest of the site language.
 *
 * Visual stack (lowest to highest):
 *   0. Section background (cream fallback for no-image case)
 *   1. Background photograph (full-bleed, cover)
 *   2. Cream fade layer (cream → transparent, inline-start)
 *   3. Vertical label (subtle, inline-end)
 *   4. Inner content (eyebrow / title / description / CTAs /
 *      trust row / bottom mark) + empty media slot
 *
 * No Bootstrap, no jQuery, no GSAP. The fade is a pure CSS
 * linear gradient on a dedicated layer so the photograph is
 * never clipped or masked — it always reads as one continuous
 * hero background regardless of the source asset. The widget
 * reuses the shared `data-bp-reveal` observer for the entrance
 * animation; no JS is required for layout.
 *
 * Desktop: full-bleed photograph, left content + right photo
 * emphasis, smooth cream fade, buttons side-by-side, horizontal
 * trust row + bottom mark under the CTAs.
 *
 * Tablet: keep image + fade, allow the trust row to wrap.
 * Mobile: stack buttons, stack trust items cleanly, keep text
 * readable; the photograph remains visible behind the cream
 * fade so the hero never feels empty. The vertical label is
 * hidden on small screens to avoid overlap with the CTAs.
 *
 * All visual rules use logical CSS properties (padding-inline,
 * inset-inline, border-inline-start) so the same stylesheet
 * covers /ar/ without a separate RTL file.
 */

.bp-cu-hero {
	/* Theme tokens. Editable from the Elementor sidebar. */
	--bp-cu-bg:         #FBF6EC;
	--bp-cu-fade:       62%;

	--bp-cu-inner-max:  1140px;
	--bp-cu-pad-x:      clamp(24px, 5vw, 64px);
	--bp-cu-pad-y-top:  clamp(56px, 6vw, 92px);
	--bp-cu-pad-y-bot:  clamp(28px, 3vw, 44px);

	--bp-cu-font-body:    var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	--bp-cu-font-display: var(--bp-font-display, 'DM Serif Display', Georgia, serif);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	inline-size: 100%;
	max-inline-size: none;
	min-block-size: 620px;
	background: transparent;
	color: #1F2A1F;
	font-family: var(--bp-cu-font-body);
}

/* ---------------- Full-bleed breakout ----------------
 * Force the surrounding Elementor wrappers to 100% width, then
 * break out of any boxed container via the `100vw +
 * calc(50%-50vw)` negative margin trick so the hero truly spans
 * the full viewport regardless of the parent Elementor section
 * content width. Mirrors the BP Resultats Hero / BP Hero pattern.
 *
 * Every override is anchored to a parent that actually contains
 * the `.elementor-widget-bp-comment-utiliser-hero` widget using
 * `:has()` / descendant selectors — no global Elementor overrides
 * leak onto other pages. */
.elementor-section:has(> .elementor-container .elementor-widget-bp-comment-utiliser-hero) > .elementor-container,
.elementor-section:has(> .elementor-container .elementor-widget-bp-comment-utiliser-hero) > .elementor-row,
.elementor-section:has(> .elementor-container .elementor-widget-bp-comment-utiliser-hero) > .e-con,
.elementor-section:has(> .elementor-container .elementor-widget-bp-comment-utiliser-hero) > .e-con > .e-con-inner,
.elementor-section:has(> .elementor-container .elementor-widget-bp-comment-utiliser-hero) > .elementor-container > .elementor-column,
.elementor-section:has(> .elementor-container .elementor-widget-bp-comment-utiliser-hero) > .elementor-container > .elementor-column > .elementor-widget-wrap,
.elementor-section:has(> .elementor-container .elementor-widget-bp-comment-utiliser-hero) > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget,
.elementor-section:has(> .elementor-container .elementor-widget-bp-comment-utiliser-hero) > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget > .bp-cu-hero {
	inline-size: 100% !important;
	max-inline-size: 100% !important;
}

.elementor-element.bp-cu-hero,
.elementor .bp-cu-hero,
.e-con.bp-cu-hero,
.bp-cu-hero {
	padding: 0;
	margin: 0;
	inline-size: 100%;
	max-inline-size: 100%;
}

/* Legacy `.elementor-inner` row layout: only override when the
 * section actually hosts this widget. */
.elementor-inner section.elementor-section:has(.elementor-widget-bp-comment-utiliser-hero) > .elementor-container,
.elementor-inner section.elementor-section:has(.elementor-widget-bp-comment-utiliser-hero) > .elementor-row,
.elementor-inner section.elementor-section:has(.elementor-widget-bp-comment-utiliser-hero) > .elementor-row > .elementor-column,
.elementor-inner section.elementor-section:has(.elementor-widget-bp-comment-utiliser-hero) > .elementor-row > .elementor-column > .elementor-widget-wrap {
	inline-size: 100% !important;
	max-inline-size: 100% !important;
	padding-inline: 0 !important;
}

.elementor .elementor-widget.elementor-widget-bp-comment-utiliser-hero,
.elementor-widget.elementor-widget-bp-comment-utiliser-hero {
	inline-size: 100vw !important;
	max-inline-size: 100vw !important;
	margin-inline-start: calc(50% - 50vw) !important;
	margin-inline-end:   calc(50% - 50vw) !important;
	position: relative;
	z-index: 1;
}

/* Zero default Elementor container padding + inter-widget spacing
 * so the hero sits flush with the page header. */
.e-con:has(> .elementor-widget-bp-comment-utiliser-hero),
.e-con:has(> .e-con-inner > .elementor-widget-bp-comment-utiliser-hero),
.e-con-inner:has(> .elementor-widget-bp-comment-utiliser-hero) {
	--container-default-padding-top:    0px !important;
	--container-default-padding-bottom: 0px !important;
	padding-top:    0 !important;
	padding-bottom: 0 !important;
}
.elementor-widget.elementor-widget-bp-comment-utiliser-hero {
	margin-block-end: 0 !important;
	--kit-widget-spacing: 0px !important;
}

/* ---------------- Background photograph ----------------
 * Absolute-positioned layer that fills the entire hero. Uses
 * the image URL as a CSS background so the file is never
 * cropped by an HTML <img> rule. Position / size / opacity
 * are controlled from the Elementor sidebar via responsive
 * slider controls. */
.bp-cu-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position-x: 55%;
	background-position-y: 55%;
	background-size: cover;
	pointer-events: none;
	transition: opacity 200ms ease;
}

/* ---------------- Cream fade layer ----------------
 * Smooth cream → transparent linear gradient anchored to the
 * inline-start edge. `var(--bp-cu-fade)` (0–100%) controls how
 * far the cream extends across the hero: 62% (default) means
 * the cream covers the left ~62% and fades to fully transparent
 * by the right edge, leaving the photograph dominant on the
 * right. The fade is a pure gradient — no mask, no clip-path —
 * so the photograph is never cut and the hero always reads as
 * one continuous background. */
.bp-cu-hero__fade {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		to right,
		var(--bp-cu-bg) 0%,
		var(--bp-cu-bg) calc( var(--bp-cu-fade) - 28% ),
		color-mix( in srgb, var(--bp-cu-bg) 65%, transparent ) calc( var(--bp-cu-fade) - 6% ),
		color-mix( in srgb, var(--bp-cu-bg) 28%, transparent ) calc( var(--bp-cu-fade) + 8% ),
		transparent calc( var(--bp-cu-fade) + 30% )
	);
}

/* RTL: mirror the fade so the cream anchors to the inline-end. */
[dir="rtl"] .bp-cu-hero__fade,
[lang="ar"] .bp-cu-hero__fade {
	background: linear-gradient(
		to left,
		var(--bp-cu-bg) 0%,
		var(--bp-cu-bg) calc( var(--bp-cu-fade) - 28% ),
		color-mix( in srgb, var(--bp-cu-bg) 65%, transparent ) calc( var(--bp-cu-fade) - 6% ),
		color-mix( in srgb, var(--bp-cu-bg) 28%, transparent ) calc( var(--bp-cu-fade) + 8% ),
		transparent calc( var(--bp-cu-fade) + 30% )
	);
}

/* ---------------- Vertical label (brand mark) ----------------
 * Small uppercase text rotated -90° sitting in the photo area,
 * inline-end side, with a soft underline. Anchored via
 * `inset-inline-end` so it mirrors automatically in RTL. */
.bp-cu-hero__vertical {
	position: absolute;
	inset-inline-end: clamp(20px, 3vw, 40px);
	top: 50%;
	transform: translateY(-50%) rotate(180deg);
	writing-mode: vertical-rl;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	font-family: var(--bp-cu-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: #374F37;
	line-height: 1.55;
	pointer-events: none;
}
.bp-cu-hero__vertical-line {
	display: block;
}

/* In RTL the vertical text reads the other way naturally, but
 * we still keep writing-mode vertical-rl so the layout stays
 * vertical. The text content is translated by TranslatePress. */

/* ---------------- Inner layout ----------------
 * Centered 1140px container. Two columns: content (left ~58%)
 * and an empty media slot (right ~42%) — the background
 * photograph already shows in the right slot. The content sits
 * in the cream area of the fade and is vertically centered.
 * The 58/42 split gives the left block enough room for the
 * dual CTAs + trust row + bottom mark without crowding the
 * title or the paragraph line length. */
.bp-cu-hero__inner {
	position: relative;
	z-index: 4;
	inline-size: 100%;
	max-inline-size: var(--bp-cu-inner-max);
	margin-inline: auto;
	padding-inline: var(--bp-cu-pad-x);
	padding-block:  var(--bp-cu-pad-y-top) var(--bp-cu-pad-y-bot);
	display: grid;
	grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
	gap: clamp(20px, 3vw, 48px);
	align-items: center;
	min-block-size: inherit;
}

.bp-cu-hero__content {
	display: flex;
	flex-direction: column;
	gap: 22px;
	max-inline-size: 560px;
	justify-self: start;
	inline-size: 100%;
	padding-block: 0;
	padding-inline: 0;
	position: relative;
	z-index: 5;
}

.bp-cu-hero__media-slot {
	align-self: stretch;
	pointer-events: none;
}

/* ---------------- Eyebrow ----------------
 * Gold uppercase text with a small horizontal line on the
 * inline-start side. No icon — keeps the eyebrow quiet and
 * elegant. */
.bp-cu-hero__eyebrow {
	margin: 0;
	font-family: var(--bp-cu-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: #B8B25A;
	line-height: 1.3;
}

/* ---------------- Title ----------------
 * Two-line serif display. Line 1 (dark green) and line 2
 * (sage / accent green) are separate spans so each can carry
 * its own color. Default 72px desktop matches the reference
 * image proportion. */
.bp-cu-hero__title {
	margin: 0;
	font-family: var(--bp-cu-font-display);
	font-weight: 400;
	color: #374F37;
	line-height: 1.02;
	letter-spacing: -0.008em;
	font-size: 72px;
}
.bp-cu-hero__title-1,
.bp-cu-hero__title-2 {
	display: block;
}
.bp-cu-hero__title-2 {
	color: #7A9268;
}

/* ---------------- Description ---------------- */
.bp-cu-hero__description {
	margin: 0;
	font-family: var(--bp-cu-font-body);
	font-size: 17px;
	line-height: 1.6;
	color: #1F2A1F;
	max-inline-size: 520px;
}

/* ---------------- CTA buttons ----------------
 * Two buttons side-by-side: primary (dark green pill, arrow
 * icon) and secondary (text + circular play icon). The primary
 * is a fully rounded pill; the secondary stays text-only with
 * a circular play badge on the inline-start side. Both share
 * the same height so the row looks balanced. Icons inherit
 * color via `currentColor`. `flex-wrap: nowrap` keeps them on
 * a single horizontal row on desktop; they stack only on the
 * mobile breakpoint where the container is genuinely too
 * narrow. */
.bp-cu-hero__ctas {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 18px;
	margin-block-start: 4px;
	min-inline-size: 0;
}

.bp-cu-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-block-size: 50px;
	padding: 13px 24px;
	font-family: var(--bp-cu-font-body);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.01em;
	text-decoration: none;
	line-height: 1.1;
	transition: transform 200ms ease, background-color 200ms ease, box-shadow 200ms ease, border-color 200ms ease, color 200ms ease;
	border: 1.5px solid transparent;
	flex: 0 1 auto;
	min-inline-size: 0;
	white-space: nowrap;
}

.bp-cu-hero__cta--primary {
	background: #374F37;
	color: #FBF6EC;
	border-color: #374F37;
	border-radius: 999px;
}
.bp-cu-hero__cta--primary:hover,
.bp-cu-hero__cta--primary:focus-visible {
	background: #2E422E;
	border-color: #2E422E;
	color: #FBF6EC;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(55, 79, 55, 0.28);
}

.bp-cu-hero__cta--secondary {
	background: transparent;
	color: #374F37;
	border: 0;
	padding: 13px 12px;
}
.bp-cu-hero__cta--secondary:hover,
.bp-cu-hero__cta--secondary:focus-visible {
	color: #2E422E;
}

.bp-cu-hero__cta-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	inline-size: 16px;
	block-size: 16px;
	color: currentColor;
}
.bp-cu-hero__cta-arrow svg {
	inline-size: 16px;
	block-size: 16px;
}

.bp-cu-hero__play {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	inline-size: 32px;
	block-size: 32px;
	border-radius: 999px;
	background: rgba(55, 79, 55, 0.08);
	border: 1.5px solid #374F37;
	color: #374F37;
}
.bp-cu-hero__play svg {
	inline-size: 12px;
	block-size: 12px;
	color: #374F37;
	fill: #374F37;
}

/* ---------------- Icon colors (forced, scoped) ----------------
 * Elementor's icon manager + global stylesheets sometimes apply
 * `fill: #000` / `color: #000` to SVG children or <i> tags, so
 * we force the correct brand colors here with high-specificity
 * selectors. Everything is fully scoped under `.bp-cu-hero` —
 * no global `svg {}` / `i {}` / `path {}` rules are introduced.
 *
 *   Eyebrow mark → B8B25A (gold)
 *   Trust icons  → 374F37 (dark green)
 *   Primary CTA  → FBF6EC (cream) on the dark green pill
 *   Secondary    → 374F37 (dark green) text + play icon */

/* Play icon: dark green ring + dark green triangle. */
.bp-cu-hero .bp-cu-hero__play,
.bp-cu-hero .bp-cu-hero__play svg,
.bp-cu-hero .bp-cu-hero__play i,
.bp-cu-hero .bp-cu-hero__play svg * {
	color: #374F37;
	fill: #374F37;
	stroke: #374F37;
}

/* Primary CTA arrow on the dark green pill → cream. */
.bp-cu-hero .bp-cu-hero__cta--primary .bp-cu-hero__cta-arrow,
.bp-cu-hero .bp-cu-hero__cta--primary .bp-cu-hero__cta-arrow svg,
.bp-cu-hero .bp-cu-hero__cta--primary .bp-cu-hero__cta-arrow svg * {
	color: #FBF6EC;
	fill: #FBF6EC;
	stroke: #FBF6EC;
}

/* Trust-row icons → dark green. */
.bp-cu-hero .bp-cu-hero__trust-icon,
.bp-cu-hero .bp-cu-hero__trust-icon svg,
.bp-cu-hero .bp-cu-hero__trust-icon i,
.bp-cu-hero .bp-cu-hero__trust-icon svg * {
	color: #374F37;
	fill: #374F37;
	stroke: #374F37;
}

/* ---------------- Trust row ----------------
 * Horizontal list of 3 items on desktop, separated by a soft
 * `border-inline-start` on items 2+. On mobile the row stacks
 * to a single column with a `border-block-start` between
 * vertically stacked items. No separator elements are added
 * as extra grid children — borders live on the actual items. */
.bp-cu-hero__trust {
	list-style: none;
	margin: 8px 0 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	max-inline-size: 560px;
	width: 100%;
}

.bp-cu-hero__trust-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-inline: 16px;
	padding-block: 6px;
	min-inline-size: 0;
}
.bp-cu-hero__trust-item:first-child {
	padding-inline-start: 0;
}
.bp-cu-hero__trust-item + .bp-cu-hero__trust-item {
	border-inline-start: 1px solid rgba(55, 79, 55, 0.22);
}

.bp-cu-hero__trust-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	color: #374F37;
	font-size: 22px;
}
.bp-cu-hero__trust-icon svg,
.bp-cu-hero__trust-icon i {
	inline-size: 22px;
	block-size: 22px;
	font-size: 22px;
}

.bp-cu-hero__trust-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	font-family: var(--bp-cu-font-body);
	font-size: 13px;
	line-height: 1.35;
	color: #1F2A1F;
	min-inline-size: 0;
}
.bp-cu-hero__trust-line-1 {
	font-weight: 600;
	color: #1F2A1F;
}
.bp-cu-hero__trust-line-2 {
	font-weight: 500;
	color: #5C6A5C;
}

/* ---------------- Bottom mark ----------------
 * Small uppercase label "NATURELLEMENT PLUS FORTS" with a
 * short horizontal line on the inline-end side, sitting at
 * the bottom of the content column. Sits at the block-end of
 * the content flex column so it always lands last regardless
 * of the content height. */
.bp-cu-hero__bottom-mark {
	margin: 12px 0 0 0;
	font-family: var(--bp-cu-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: #374F37;
	line-height: 1.3;
	display: inline-flex;
	align-items: center;
	gap: 14px;
}
.bp-cu-hero__bottom-mark-text {
	display: inline-block;
}
.bp-cu-hero__bottom-mark::after {
	content: "";
	display: inline-block;
	inline-size: 56px;
	block-size: 1px;
	background-color: #374F37;
}

/* ---------------- Tablet (769–1024) ---------------- */
@media ( min-width: 769px ) and ( max-width: 1024px ) {
	.bp-cu-hero { min-block-size: 560px; }
	.bp-cu-hero__title { font-size: 58px; }
	.bp-cu-hero__inner {
		grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
		gap: 20px;
		padding-block: 56px 28px;
	}
	.bp-cu-hero__description { font-size: 15px; max-inline-size: 100%; }
	.bp-cu-hero__content { max-inline-size: 100%; gap: 18px; }
	.bp-cu-hero__vertical { font-size: 10px; }
}

/* ---------------- Mobile (<= 768px) ---------------- */
@media ( max-width: 768px ) {
	.bp-cu-hero {
		min-block-size: auto;
	}

	.bp-cu-hero__bg {
		/* Reposition the photograph so the agricultural subject
		 * stays visible behind the cream content. */
		background-position-x: 60% !important;
		background-position-y: 30% !important;
	}

	/* On mobile the cream fade covers a larger portion of the
	 * screen so the text remains readable without a strong photo
	 * dominating the viewport. */
	.bp-cu-hero__fade {
		background: linear-gradient(
			to bottom,
			var(--bp-cu-bg) 0%,
			var(--bp-cu-bg) 28%,
			color-mix( in srgb, var(--bp-cu-bg) 70%, transparent ) 55%,
			color-mix( in srgb, var(--bp-cu-bg) 30%, transparent ) 80%,
			transparent 100%
		);
	}
	[dir="rtl"] .bp-cu-hero__fade,
	[lang="ar"] .bp-cu-hero__fade {
		background: linear-gradient(
			to bottom,
			var(--bp-cu-bg) 0%,
			var(--bp-cu-bg) 28%,
			color-mix( in srgb, var(--bp-cu-bg) 70%, transparent ) 55%,
			color-mix( in srgb, var(--bp-cu-bg) 30%, transparent ) 80%,
			transparent 100%
		);
	}

	/* Hide the vertical label on mobile so it never overlaps
	 * the content area. The brand mark only ships on the
	 * desktop / tablet photo zone. */
	.bp-cu-hero__vertical { display: none; }

	.bp-cu-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		padding-block: 48px 28px;
		padding-inline: 24px;
		gap: 24px;
		align-items: stretch;
	}

	.bp-cu-hero__content {
		max-inline-size: 100%;
		min-inline-size: 0;
		gap: 18px;
		align-items: flex-start;
	}

	.bp-cu-hero__title {
		font-size: 44px;
		line-height: 1.04;
	}

	.bp-cu-hero__description {
		max-inline-size: 100%;
		min-inline-size: 0;
		font-size: 16px;
		line-height: 1.6;
	}

	.bp-cu-hero__ctas {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 12px;
		inline-size: 100%;
	}

	.bp-cu-hero__cta--primary {
		inline-size: auto;
	}

	.bp-cu-hero__cta--secondary {
		padding: 13px 8px;
	}

	.bp-cu-hero__trust {
		grid-template-columns: 1fr;
		max-inline-size: 100%;
		gap: 0;
		margin-block-start: 6px;
	}
	.bp-cu-hero__trust-item {
		padding-block: 14px;
		padding-inline: 0;
	}
	.bp-cu-hero__trust-item:first-child {
		padding-block-start: 8px;
	}
	.bp-cu-hero__trust-item + .bp-cu-hero__trust-item {
		border-inline-start: 0;
		border-block-start: 1px solid rgba(55, 79, 55, 0.22);
	}

	.bp-cu-hero__bottom-mark { font-size: 10px; }

	.bp-cu-hero__media-slot { display: none; }
}

/* ---------------- ≤ 480px ---------------- */
@media ( max-width: 480px ) {
	.bp-cu-hero__inner { padding-inline: 20px; padding-block: 40px 24px; }
	.bp-cu-hero__title { font-size: 40px; }
	.bp-cu-hero__content { gap: 16px; }
	.bp-cu-hero__cta--primary { font-size: 13px; min-block-size: 48px; padding-inline: 20px; }
	.bp-cu-hero__cta--secondary { font-size: 13px; }
	.bp-cu-hero__trust-text { font-size: 12px; }
	.bp-cu-hero__bottom-mark { font-size: 9px; letter-spacing: 0.26em; }
	.bp-cu-hero__bottom-mark::after { inline-size: 40px; }
}

/* ---------------- ≤ 430px ---------------- */
@media ( max-width: 430px ) {
	.bp-cu-hero__inner { padding-inline: 20px; padding-block: 36px 22px; }
	.bp-cu-hero__title { font-size: 37px; line-height: 1.04; }
	.bp-cu-hero__eyebrow { font-size: 11px; letter-spacing: 0.22em; }
	.bp-cu-hero__description { font-size: 15px; line-height: 1.6; max-inline-size: 100%; }
	.bp-cu-hero__content { gap: 14px; }
	.bp-cu-hero__ctas { gap: 10px; }
}

/* ---------------- ≤ 390px ---------------- */
@media ( max-width: 390px ) {
	.bp-cu-hero__inner { padding-inline: 18px; padding-block: 32px 20px; }
	.bp-cu-hero__title { font-size: 34px; line-height: 1.04; }
	.bp-cu-hero__eyebrow { font-size: 10px; letter-spacing: 0.18em; }
	.bp-cu-hero__description { font-size: 14px; line-height: 1.58; max-inline-size: 100%; }
	.bp-cu-hero__content { gap: 12px; }
	.bp-cu-hero__cta--primary { font-size: 12px; padding-inline: 18px; min-block-size: 46px; }
	.bp-cu-hero__cta--secondary { font-size: 12px; }
	.bp-cu-hero__play { inline-size: 28px; block-size: 28px; }
	.bp-cu-hero__bottom-mark { font-size: 8px; letter-spacing: 0.22em; }
	.bp-cu-hero__bottom-mark::after { inline-size: 32px; }
}

/* ---------------- ≤ 375px ---------------- */
@media ( max-width: 375px ) {
	.bp-cu-hero__inner { padding-inline: 18px; padding-block: 30px 18px; }
	.bp-cu-hero__title { font-size: 32px; line-height: 1.05; }
	.bp-cu-hero__description { font-size: 13.5px; }
	.bp-cu-hero__content { gap: 12px; }
	.bp-cu-hero__eyebrow { letter-spacing: 0.16em; }
}

/* ---------------- ≤ 360px ---------------- */
@media ( max-width: 360px ) {
	.bp-cu-hero__inner { padding-inline: 16px; gap: 10px; padding-block: 28px 16px; }
	.bp-cu-hero__title { font-size: 30px; line-height: 1.06; }
	.bp-cu-hero__eyebrow { font-size: 9px; letter-spacing: 0.14em; }
	.bp-cu-hero__description { font-size: 13px; line-height: 1.55; }
	.bp-cu-hero__cta--primary { font-size: 12px; padding-inline: 16px; min-block-size: 44px; }
	.bp-cu-hero__cta--secondary { font-size: 12px; }
	.bp-cu-hero__play { inline-size: 26px; block-size: 26px; }
	.bp-cu-hero__play svg { inline-size: 10px; block-size: 10px; }
	.bp-cu-hero__bottom-mark { font-size: 8px; letter-spacing: 0.18em; }
	.bp-cu-hero__bottom-mark::after { inline-size: 24px; }
}

/* ---------------- Arabic / RTL ----------------
 * The display headline falls back to the Arabic family instead
 * of inheriting the Latin display family. The layout already
 * mirrors via logical properties + the mirrored fade gradient
 * + the mirrored vertical label anchoring. */
[lang="ar"] .bp-cu-hero__title,
[dir="rtl"] .bp-cu-hero__title {
	font-family: var(--bp-font-arabic, 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: 0;
}
[lang="ar"] .bp-cu-hero__title-1,
[lang="ar"] .bp-cu-hero__title-2,
[dir="rtl"] .bp-cu-hero__title-1,
[dir="rtl"] .bp-cu-hero__title-2 {
	color: inherit;
}
[lang="ar"] .bp-cu-hero__title-1,
[dir="rtl"] .bp-cu-hero__title-1 {
	color: #374F37;
}
[lang="ar"] .bp-cu-hero__title-2,
[dir="rtl"] .bp-cu-hero__title-2 {
	color: #7A9268;
}
[dir="rtl"] .bp-cu-hero__content { justify-self: end; }

/* In RTL the vertical label still reads vertically but its
 * inline-end anchor keeps it on the photo side (now the left
 * side of the page). */
[dir="rtl"] .bp-cu-hero__vertical,
[lang="ar"] .bp-cu-hero__vertical {
	transform: translateY(-50%) rotate(180deg);
}

/* ---------------- Reduced motion ---------------- */
@media ( prefers-reduced-motion: reduce ) {
	.bp-cu-hero [data-bp-stagger],
	.bp-cu-hero__cta,
	.bp-cu-hero__bg {
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}
}