/* ==========================================================================
   Alqima Urban — Closing sequence (homepage, Stage 06)
   #featured (Deep Navy, full-bleed case study) · #why (Off White, layered
   material planes) · #cta (Burgundy — the closing statement).
   Motion: assets/js/closing.js. Reduced motion / no JS: static, complete.
   ========================================================================== */

/* =========================================================== Featured */
.fpr {
	position: relative;
	z-index: 1;
	overflow: clip;
}

.fpr__stage {
	position: relative;
}

.fpr__media {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--c-surface-1);
}

.fpr__img {
	position: absolute;
	inset: -4%;
	will-change: transform;
}

.fpr__pic,
.fpr__img picture {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fpr__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(var(--rgb-ink) / 0.55) 0%, rgb(var(--rgb-ink) / 0) 45%);
	pointer-events: none;
}

.fpr__content {
	position: relative;
	padding-block: var(--s-7) clamp(4rem, 9vw, 8rem);
}

.fpr__eyebrow {
	display: flex;
	align-items: baseline;
	gap: var(--s-5);
	margin-block-end: var(--s-5);
	font-size: var(--fs-label);
	font-weight: var(--fw-medium);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
	color: var(--c-text-2);
}

.fpr__index {
	font-family: var(--f-latin);
	font-size: var(--fs-micro);
	letter-spacing: 0.2em;
	color: var(--c-text-3);
}

.fpr__title {
	max-width: 16ch;
	font-size: clamp(2.5rem, 1.2rem + 5vw, 6.5rem);
	font-weight: var(--fw-semibold);
	letter-spacing: -0.045em;
	line-height: 0.98;
}

.fpr__title .w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-block: 0.06em 0.14em;
	margin-block: -0.06em -0.14em;
}

.fpr__title .w > span {
	display: inline-block;
	will-change: transform;
}

.fpr__meta {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-4) var(--gutter);
	margin: var(--s-6) 0 0;
	max-width: 44rem;
}

.fpr__meta-row {
	padding-block-start: var(--s-3);
	border-block-start: 1px solid var(--c-hairline);
}

.fpr__meta dt {
	font-size: var(--fs-micro);
	font-weight: var(--fw-medium);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-text-3);
}

.fpr__meta dd {
	margin: 0.35rem 0 0;
	color: var(--c-text);
}

.fpr__excerpt {
	max-width: 42ch;
	margin-block-start: var(--s-6);
	font-size: var(--fs-lead);
	line-height: 1.5;
	color: var(--c-text-2);
}

.fpr__cta {
	margin-block-start: var(--s-6);
}

@media (min-width: 48em) {
	.fpr__media {
		aspect-ratio: 16 / 9;
	}

	.fpr__meta {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Desktop: full-bleed image with the case study laid over it (static
   without JS; closing.js pins it and plays the sequence). */
@media (min-width: 64em) {
	.fpr__stage {
		display: flex;
		align-items: flex-end;
		min-height: 100svh;
	}

	.fpr__media {
		position: absolute;
		inset: 0;
		aspect-ratio: auto;
	}

	.fpr__shade {
		background:
			linear-gradient(to top, rgb(var(--rgb-navy) / 1) 0%, rgb(var(--rgb-ink) / 0.86) 9%, rgb(var(--rgb-ink) / 0.35) 45%, rgb(var(--rgb-ink) / 0.1) 75%),
			linear-gradient(to right, rgb(var(--rgb-ink) / 0.55) 0%, rgb(var(--rgb-ink) / 0) 60%);
	}

	[dir="rtl"] .fpr__shade {
		background:
			linear-gradient(to top, rgb(var(--rgb-navy) / 1) 0%, rgb(var(--rgb-ink) / 0.86) 9%, rgb(var(--rgb-ink) / 0.35) 45%, rgb(var(--rgb-ink) / 0.1) 75%),
			linear-gradient(to left, rgb(var(--rgb-ink) / 0.55) 0%, rgb(var(--rgb-ink) / 0) 60%);
	}

	.fpr__content {
		padding-block: calc(var(--header-h) + var(--s-8)) clamp(4rem, 8vh, 7rem);
	}

	/* Stage 07 — foreground glass layer: the project metadata sits on a
	   translucent navy-tinted plane (hairline, inner highlight, light blur)
	   in front of the title and the image. */
	.fpr__meta {
		padding: var(--s-5) var(--s-6);
		border: 1px solid var(--glass-line);
		border-radius: var(--r-md);
		background: var(--glass-navy-quiet);     /* Glass UI system: navy glass over imagery */
		box-shadow: var(--glass-inner);
		-webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate));
		backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate));
	}

	.fpr__meta-row:nth-child(-n + 3) {
		border-block-start: 0;
		padding-block-start: 0;
	}

	@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
		.fpr__meta {
			background: rgb(var(--rgb-navy) / 0.72);
		}
	}
}

/* ================================================================ Why */
.why {
	position: relative;
	z-index: 1;
	padding-block: clamp(2rem, 5vw, 4rem) var(--s-section);
	overflow: clip;
}

.why__grid {
	display: grid;
	grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
	column-gap: var(--gutter);
	row-gap: var(--s-8);
	margin-block-start: clamp(3rem, 8vw, 8rem);
}

.why__lead,
.why__list {
	grid-column: 1 / -1;
}

.why__title {
	max-width: 12ch;
	font-size: clamp(2.5rem, 1.2rem + 5.2vw, 6.5rem);
	font-weight: var(--fw-semibold);
	letter-spacing: -0.05em;
	line-height: 0.96;
}

.why__title .w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-block: 0.06em 0.14em;
	margin-block: -0.06em -0.14em;
}

.why__title .w > span {
	display: inline-block;
	will-change: transform;
}

.why__intro {
	max-width: 38ch;
	margin-block-start: var(--s-6);
	font-size: var(--fs-lead);
	line-height: 1.5;
	color: var(--c-text-2);
}

/* Two material planes at different depths (2.5D). */
.why__planes {
	position: relative;
	height: clamp(18rem, 52vw, 30rem);
	margin-block-start: clamp(3rem, 6vw, 5rem);
}

.why__plane {
	position: absolute;
	margin: 0;
	overflow: hidden;
	background: var(--c-surface-1);
	will-change: transform;
}

.why__plane--back {
	inset-block-start: 0;
	inset-inline-start: 0;
	width: 64%;
	aspect-ratio: 1;
}

.why__plane--front {
	inset-block-end: 0;
	inset-inline-end: 4%;
	width: 40%;
	aspect-ratio: 4 / 5;
	box-shadow: 0 0 0 1px var(--c-canvas);
}

.why__img,
.why__plane picture {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.why .why__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.why-item {
	display: grid;
	grid-template-columns: 4rem minmax(0, 1fr);
	gap: var(--s-4);
	padding-block: clamp(1.5rem, 3vw, 2.5rem);
	border-block-start: 1px solid var(--c-hairline);
}

.why-item:last-child {
	border-block-end: 1px solid var(--c-hairline);
}

.why-item__num {
	font-family: var(--f-latin);
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem);
	font-weight: var(--fw-medium);
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--c-accent);
	font-variant-numeric: tabular-nums;
}

.why-item__title {
	font-size: clamp(1.375rem, 1rem + 1.2vw, 2.125rem);
	font-weight: var(--fw-medium);
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.why-item__text {
	max-width: 40ch;
	margin-block-start: var(--s-3);
	color: var(--c-text-2);
}

@media (min-width: 64em) {
	.why__lead {
		grid-column: 1 / span 6;
	}

	.why__list {
		grid-column: 8 / span 5;
		align-self: center;
	}
}

/* ================================================================ CTA */
.ctaf {
	position: relative;
	z-index: 1;
	overflow: clip;
	padding-block: clamp(6rem, 4rem + 9vw, 13rem);
}

/* Stage 09 — background: an architectural / material image, very quiet over
   the burgundy field (16 % opacity), edges dissolving into the surface
   so the room transition and the footer meet clean colour. Behind the
   Stage 07 room bands (z -3 < -2). */
.ctaf.has-image {
	isolation: isolate;
}

.ctaf__bg {
	position: absolute;
	inset: 0;
	z-index: -3;
	overflow: hidden;
	pointer-events: none;
}

.ctaf__bg-img {
	position: absolute;
	inset: -10% 0;
	opacity: 0.16;            /* plain opacity: a blend mode on a moving layer re-blends every frame */
	will-change: transform;
}

.ctaf__pic,
.ctaf__bg-img picture,
.ctaf__bg-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ctaf__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, var(--c-canvas) 0%, rgb(var(--rgb-burgundy) / 0) 28%, rgb(var(--rgb-burgundy) / 0) 72%, var(--c-canvas) 100%);
}

/* The statement breaks after its ellipsis (two display lines). */
.ctaf__line {
	display: block;
}

.ctaf__brand {
	font-size: var(--fs-label);
	font-weight: var(--fw-medium);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
	color: var(--c-text-3);
}

.ctaf__title {
	max-width: 18ch;
	margin-block-start: var(--s-6);
	font-size: clamp(2.75rem, 1rem + 7vw, 8.5rem);
	font-weight: var(--fw-semibold);
	letter-spacing: -0.05em;
	line-height: 0.98;
}

.ctaf__title .w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-block: 0.06em 0.14em;
	margin-block: -0.06em -0.14em;
}

.ctaf__title .w > span {
	display: inline-block;
	will-change: transform;
}

/* The authoritative Arabic slogan, as a signature on English pages. */
.ctaf__original {
	margin-block-start: var(--s-5);
	font-family: var(--f-arabic);
	font-size: clamp(1.25rem, 1rem + 1.3vw, 2.125rem);
	font-weight: var(--fw-medium);
	line-height: 1.5;
	color: var(--c-accent);
}

[dir="ltr"] .ctaf__original {
	text-align: left;
}

.ctaf__rule {
	height: 1px;
	margin-block: clamp(3rem, 6vw, 5rem) var(--s-6);
	background: var(--c-hairline-strong);
	transform-origin: left center;
}

[dir="rtl"] .ctaf__rule {
	transform-origin: right center;
}

.ctaf__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--s-6);
}

.ctaf__text {
	max-width: 32ch;
	font-size: var(--fs-lead);
	line-height: 1.5;
	color: var(--c-text-2);
}

.ctaf__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-4) var(--s-6);
}

.ctaf__button {
	display: inline-flex;
	align-items: center;
	gap: 0.875rem;
	min-height: 3.25rem;
	padding: 0.95rem 1.5rem;
	border-radius: var(--r-pill);
	background: var(--color-off-white);
	color: var(--color-burgundy);
	font-size: 0.8125rem;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: background-color var(--dur-3) var(--ease-soft), transform 0.8s var(--ease-out);
}

.ctaf__button-icon {
	display: inline-grid;
	transition: transform 0.8s var(--ease-out);
}

/* WhatsApp (final stage): a ghost / hairline pill beside the primary
   action — same height, the brand's Off White on burgundy, the WhatsApp
   glyph monochrome. No green fill, no shadow. */
.ctaf__whatsapp {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 3.25rem;
	padding: 0.95rem 1.4rem;
	border: 1px solid rgb(var(--rgb-off-white) / 0.42);
	border-radius: var(--r-pill);
	color: var(--c-text);
	font-size: 0.8125rem;
	font-weight: var(--fw-medium);
	letter-spacing: 0.06em;
	transition: border-color var(--dur-3) var(--ease-soft), background-color var(--dur-3) var(--ease-soft);
}

.ctaf__whatsapp-icon {
	display: inline-grid;
	width: 1.125rem;
	height: 1.125rem;
	transition: translate 0.5s var(--ease-out);
}

.ctaf__whatsapp-icon .icon {
	width: 100%;
	height: 100%;
}

[dir="rtl"] .ctaf__whatsapp {
	font-size: 0.9375rem;
	letter-spacing: 0;
}

@media (hover: hover) {
	.ctaf__whatsapp:hover {
		border-color: var(--c-text);
		background: rgb(var(--rgb-off-white) / 0.08);
	}

	.ctaf__whatsapp:hover .ctaf__whatsapp-icon {
		translate: 0 -2px;
	}
}

.ctaf__whatsapp:focus-visible {
	border-color: var(--c-text);
}

@media (prefers-reduced-motion: reduce) {
	.ctaf__whatsapp,
	.ctaf__whatsapp-icon {
		transition: none;
		translate: none !important;
	}
}

.ctaf__phone {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	color: var(--c-text-2);
	transition: color var(--dur-2) var(--ease-soft);
}

@media (hover: hover) {
	.ctaf__button:hover {
		background: var(--color-beige);
	}

	/* Arrow movement: interactions.css (arrow swap). */

	.ctaf__phone:hover {
		color: var(--c-text);
	}
}

.ctaf__button:focus-visible {
	outline-color: var(--color-off-white);
	outline-offset: 4px;
}

/* ================================================== Pre-reveal states */
@media (prefers-reduced-motion: no-preference) {
	html.js [data-fpr].is-motion [data-fpr-step]:not(.is-in),
	html.js [data-why] [data-why-reveal]:not(.is-in),
	html.js [data-ctaf] [data-ctaf-reveal]:not(.is-in) {
		opacity: 0;
		transform: translateY(var(--reveal-y));
	}

	html.js [data-fpr] [data-fpr-step],
	html.js [data-why] [data-why-reveal],
	html.js [data-ctaf] [data-ctaf-reveal] {
		transition: opacity var(--reveal-fade) var(--ease-soft), transform var(--reveal-move) var(--ease-out);
		transition-delay: calc(var(--d, 0) * var(--reveal-stagger));
	}

	html.js [data-ctaf]:not(.is-drawn) [data-ctaf-rule] {
		transform: scaleX(0);
	}

	html.js [data-ctaf] [data-ctaf-rule] {
		transition: transform 1.6s var(--ease-out);
	}
}

/* ================================================================ Arabic */
[dir="rtl"] .fpr__eyebrow,
[dir="rtl"] .fpr__meta dt,
[dir="rtl"] .ctaf__brand {
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.875rem;
}

[dir="rtl"] .fpr__title,
[dir="rtl"] .why__title,
[dir="rtl"] .ctaf__title {
	letter-spacing: 0;
	line-height: 1.3;
}

[dir="rtl"] .fpr__title .w,
[dir="rtl"] .why__title .w,
[dir="rtl"] .ctaf__title .w {
	padding-block: 0.12em 0.2em;
	margin-block: -0.12em -0.2em;
}

[dir="rtl"] .fpr__title[lang="en"] {
	font-family: var(--f-latin);
	letter-spacing: -0.045em;
	line-height: 0.98;
}

[dir="rtl"] .why__intro,
[dir="rtl"] .why-item__text,
[dir="rtl"] .fpr__excerpt,
[dir="rtl"] .ctaf__text {
	line-height: 1.8;
}

[dir="rtl"] .why-item__title {
	letter-spacing: 0;
	line-height: 1.4;
}

[dir="rtl"] .ctaf__button {
	letter-spacing: 0;
	text-transform: none;
	font-size: 0.9375rem;
}