@charset "UTF-8";
/* =========================================================================
   Mr. Spell — design system
   -------------------------------------------------------------------------
   Two shapes carry the identity, both lifted from the brand book rather than
   invented: the ARCH (a circle with a flat bottom — the logo badge, and also a
   bottle silhouette) and the MARK (a yellow highlight block behind text, the
   way the guidelines label their font sections).

   Everything is written with logical properties so a single stylesheet serves
   the Arabic (RTL) and English (LTR) sides of the site.
   ====================================================================== */

:root {
	--navy:        #272661;
	--navy-deep:   #17163a;
	--navy-soft:   #3a3880;
	--yellow:      #fbdd2d;
	--yellow-deep: #e8c40f;
	--maroon:      #7d1614;
	--paper:       #fbfbfb;
	--paper-warm:  #f2eee3;
	--ink:         #14132e;
	--muted:       #6b6a8c;
	--line:        rgba(39, 38, 97, 0.14);

	--accent: var(--navy);

	--font-display: "Anton", "Cairo", system-ui, sans-serif;
	--font-body:    "Inter", "Cairo", system-ui, sans-serif;
	--font-brand:   "Cabin Sketch", "Cairo", cursive;
	--font-quote:   "Playfair Display", "Cairo", serif;

	--step--1: clamp(0.82rem, 0.78rem + 0.2vw, 0.94rem);
	--step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.14rem);
	--step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
	--step-2:  clamp(1.6rem, 1.35rem + 1.2vw, 2.4rem);
	--step-3:  clamp(2.1rem, 1.6rem + 2.4vw, 3.6rem);
	--step-4:  clamp(2.6rem, 1.7rem + 3.8vw, 4.6rem);
	--step-5:  clamp(3rem, 2rem + 4.6vw, 6.2rem);

	--gutter:  clamp(1.25rem, 4vw, 4rem);
	--section: clamp(5rem, 10vw, 9rem);
	--wrap:    1360px;

	--arch: 999px 999px 14px 14px;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);

	/* Fine paper grain, so light sections read as printed stock, not flat #fff. */
	--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

/* Arabic needs its own display face and a little more line-height. */
.lang-ar {
	--font-display: "Cairo", system-ui, sans-serif;
	--font-body: "Cairo", system-ui, sans-serif;
	--font-brand: "Cairo", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--step-0);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--yellow); color: var(--navy); }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 0.95;
	margin: 0;
	letter-spacing: 0;
	text-wrap: balance;
}
.lang-ar h1, .lang-ar h2, .lang-ar h3, .lang-ar h4 {
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: 0;
}
.lang-en h1, .lang-en h2, .lang-en h3 { text-transform: uppercase; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

:focus-visible {
	outline: 3px solid var(--yellow);
	outline-offset: 3px;
	border-radius: 4px;
}

.skip-link {
	position: absolute;
	inset-inline-start: 1rem;
	top: -100px;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--yellow);
	color: var(--navy);
	font-weight: 700;
	border-radius: 6px;
	transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }

.sr-only {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Layout primitives
   ---------------------------------------------------------------------- */

.wrap {
	width: min(100% - var(--gutter) * 2, var(--wrap));
	margin-inline: auto;
}
.wrap--narrow { width: min(100% - var(--gutter) * 2, 900px); }

.section { padding-block: var(--section); position: relative; }

.section--paper { background: #fff; }
.section--paper::before,
.section--grain::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--grain);
	opacity: 0.35;
	mix-blend-mode: multiply;
	pointer-events: none;
}

.section--navy {
	background: var(--navy);
	color: var(--paper);
	--line: rgba(251, 251, 251, 0.16);
	--muted: rgba(251, 251, 251, 0.62);
}
.section--navy-deep { background: var(--navy-deep); color: var(--paper); }

/* -------------------------------------------------------------------------
   Brand components
   ---------------------------------------------------------------------- */

/* The yellow highlight block from the guidelines' section labels. */
.mark {
	display: inline-block;
	position: relative;
	padding: 0.18em 0.55em;
	z-index: 0;
	color: var(--navy);
}
.mark::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--yellow);
	transform: skewX(-6deg);
	z-index: -1;
}

/* Inline highlight inside a headline (the *word* syntax in the ACF field).
   Navy by default on light surfaces; yellow wherever the ground is dark. */
.hl { color: var(--navy); }
.hero .hl,
.section--navy .hl,
.section--navy-deep .hl,
.page-head .hl,
.site-footer .hl { color: var(--yellow); }
.band .hl {
	color: var(--navy);
	background: transparent;
	padding: 0;
	text-decoration-line: underline;
	text-decoration-color: rgba(39, 38, 97, 0.32);
	text-decoration-thickness: 0.16em;
	text-underline-offset: 0.08em;
}
.section--gallery .hl { color: var(--maroon); }

.eyebrow {
	font-family: var(--font-body);
	font-size: var(--step--1);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--muted);
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.5rem;
}
.lang-ar .eyebrow { letter-spacing: 0.06em; }
.eyebrow::before {
	content: "";
	width: 2.5rem;
	height: 2px;
	background: var(--yellow);
	flex: none;
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	padding: 1rem 1.9rem;
	background: var(--yellow);
	color: var(--navy);
	font-weight: 700;
	font-size: var(--step--1);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: 999px;
	transition: transform 0.4s var(--ease), background 0.3s, box-shadow 0.4s var(--ease);
	will-change: transform;
}
.lang-ar .btn { text-transform: none; letter-spacing: 0; font-size: var(--step-0); }
.btn:hover {
	transform: translateY(-3px);
	background: #fff;
	box-shadow: 0 14px 30px -12px rgba(39, 38, 97, 0.5);
}
.btn__arrow { transition: transform 0.4s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }
[dir="rtl"] .btn__arrow { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .btn__arrow { transform: scaleX(-1) translateX(4px); }

.btn--ghost {
	background: transparent;
	color: currentColor;
	border: 1.5px solid currentColor;
}
.btn--ghost:hover { background: var(--yellow); color: var(--navy); border-color: var(--yellow); }
.btn--amazon {
	background: #fff;
	color: var(--navy);
}
.btn--amazon svg { inline-size: 18px; block-size: 18px; flex: none; }
.btn--amazon:hover { background: var(--yellow); }

/* -------------------------------------------------------------------------
   Header
   ---------------------------------------------------------------------- */

.site-header {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 100;
	transition: transform 0.5s var(--ease), background 0.4s, box-shadow 0.4s;
}
.site-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 3rem);
	padding-block: 1rem;
}
.site-header.is-stuck {
	background: rgba(251, 251, 251, 0.88);
	backdrop-filter: blur(14px) saturate(150%);
	box-shadow: 0 1px 0 var(--line);
}
.site-header.is-hidden { transform: translateY(-105%); }
.site-header.is-over-dark:not(.is-stuck) { color: var(--paper); }

.brand { display: flex; align-items: center; gap: 0.75rem; flex: none; }
.brand img { width: auto; height: clamp(50px, 5.2vw, 74px); }
.brand__logo--light { display: none; }
.site-header.is-over-dark:not(.is-stuck) .brand__logo--dark { display: none; }
.site-header.is-over-dark:not(.is-stuck) .brand__logo--light { display: block; }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.4rem); margin-inline-start: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.2rem); list-style: none; margin: 0; padding: 0; }
.nav__list a {
	position: relative;
	font-size: var(--step--1);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding-block: 0.4rem;
}
.lang-ar .nav__list a { text-transform: none; letter-spacing: 0; font-size: var(--step-0); }
.nav__list a::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--yellow);
	transform: scaleX(0);
	transform-origin: inline-start;
	transition: transform 0.4s var(--ease);
}
.nav__list a:hover::after,
.nav__list .current-menu-item > a::after { transform: scaleX(1); }

.lang-switch {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: var(--step--1);
	font-weight: 700;
	border: 1.5px solid currentColor;
	border-radius: 999px;
	padding: 0.35rem 0.85rem;
	opacity: 0.9;
	transition: background 0.3s, color 0.3s, opacity 0.3s;
}
.lang-switch:hover { background: var(--yellow); border-color: var(--yellow); color: var(--navy); opacity: 1; }

/* Filled, unlike the outlined lang-switch beside it — this is a purchase
   channel, not a wayfinding link, and it should read as one at a glance. */
.amazon-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--step--1);
	font-weight: 700;
	letter-spacing: 0.02em;
	background: var(--yellow);
	color: var(--navy);
	border-radius: 999px;
	padding: 0.5rem 1.1rem;
	white-space: nowrap;
	transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.amazon-link svg { width: 16px; height: 16px; flex: none; }
.amazon-link:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(39, 38, 97, 0.5); }

.nav-toggle { display: none; width: 46px; height: 46px; position: relative; flex: none; }
.nav-toggle span {
	position: absolute;
	inset-inline: 11px;
	height: 2px;
	background: currentColor;
	transition: transform 0.35s var(--ease), opacity 0.2s;
}
.nav-toggle span:nth-child(1) { top: 17px; }
.nav-toggle span:nth-child(2) { top: 23px; }
.nav-toggle span:nth-child(3) { top: 29px; }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
	.nav-toggle { display: block; margin-inline-start: auto; }
	.nav {
		position: fixed;
		inset: 0;
		background: var(--navy);
		color: var(--paper);
		flex-direction: column;
		justify-content: center;
		gap: 2rem;
		margin: 0;
		clip-path: circle(0% at 90% 5%);
		transition: clip-path 0.7s var(--ease);
		pointer-events: none;
	}
	[dir="rtl"] .nav { clip-path: circle(0% at 10% 5%); }
	body.nav-open .nav { clip-path: circle(150% at 90% 5%); pointer-events: auto; }
	[dir="rtl"] body.nav-open .nav { clip-path: circle(150% at 10% 5%); }
	.nav__list { flex-direction: column; gap: 1.5rem; }
	.nav__list a { font-size: var(--step-2); font-family: var(--font-display); }
	body.nav-open { overflow: hidden; }
	body.nav-open .nav-toggle { position: relative; z-index: 101; color: var(--paper); }
}

/* -------------------------------------------------------------------------
   Hero
   ---------------------------------------------------------------------- */

.hero {
	position: relative;
	min-height: 90svh;
	display: grid;
	align-items: center;
	/* Ground is drawn, not photographed: a flat backdrop image would fight the
	   cut-out layers for focus and cost 1.3 MB to say what three gradients say. */
	background:
		radial-gradient(120% 90% at 26% 42%, #4a3a91 0%, #2b2560 42%, transparent 72%),
		radial-gradient(90% 70% at 88% 8%, #37326f 0%, transparent 64%),
		linear-gradient(160deg, #241f52 0%, #191441 46%, #120e2f 100%);
	color: var(--paper);
	overflow: hidden;
	padding-block: clamp(6.12rem, 10.8vh, 7.92rem) clamp(2.7rem, 5.4vh, 4.05rem);
	isolation: isolate;
}
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(70% 85% at 24% 57%, rgba(98, 72, 187, 0.62), transparent 56%),
		radial-gradient(55% 80% at 80% 0%, rgba(67, 65, 145, 0.34), transparent 66%),
		radial-gradient(80% 70% at 50% 110%, rgba(6, 5, 24, 0.72), transparent 60%);
	z-index: -2;
}
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--grain);
	opacity: 0.16;
	z-index: -1;
	pointer-events: none;
}

.hero__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1rem, 4vw, 4.5rem);
	align-items: center;
}
@media (max-width: 900px) {
	.hero__grid { grid-template-columns: 1fr; text-align: center; }
	.hero .eyebrow { justify-content: center; }
}

.hero__copy { position: relative; z-index: 3; padding-block: 1rem; }
.hero__made-in-egypt {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin: 0 0 1.65rem;
	color: rgba(255, 255, 255, 0.88);
	font-size: var(--step--1);
	font-weight: 600;
}
.hero__made-in-egypt::before {
	content: "";
	width: 3.1rem;
	height: 3px;
	flex: none;
	background: var(--yellow);
}
.hero__title { font-size: clamp(3.735rem, 7.38vw, 7.74rem); line-height: 0.98; margin-bottom: 1.25rem; }
.lang-ar .hero__title { font-weight: 900; line-height: 1.08; }
.hero__lede {
	max-width: 40ch;
	color: rgba(251, 251, 251, 0.86);
	font-size: clamp(1rem, 1.38vw, 1.34rem);
	line-height: 1.8;
	margin-bottom: 2.2rem;
}
@media (max-width: 900px) { .hero__lede { margin-inline: auto; } }

.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
@media (max-width: 900px) { .hero__actions { justify-content: center; } }

/* -------------------------------------------------------------------------
   Hero art — six cut-out layers stacked in depth

   Positions use physical left/right, not logical properties: this is a composed
   photograph, and mirroring it between Arabic and English would put the light
   on the wrong side of the bottle. Nothing here sets `transform` — that channel
   belongs to GSAP, which drives the parallax and the idle drift.
   ---------------------------------------------------------------------- */

.hero__art {
	position: relative;
	aspect-ratio: 1 / 1.06;
	min-height: min(59.4svh, 576px);
	isolation: isolate;
}

/* Thin arc echoing the logo badge, sitting behind the whole stack. Sized on
   its own now — smaller than the stage on purpose, so the product breaks
   past the frame instead of being scaled to fit inside it. */
.hero__arch {
	position: absolute;
	left: 14%;
	right: 14%;
	top: 19%;
	bottom: 8%;
	border: 2px solid rgba(251, 221, 45, 0.42);
	border-block-end: 0;
	border-radius: 999px 999px 0 0;
	z-index: 0;
	pointer-events: none;
}

/* The product composite floats free — no plinth underneath — sized past the
   art column's own bounds so it reads as the hero's centrepiece rather than
   an inset, independent of the (smaller) frame behind it. */
.hero__stage {
	position: absolute;
	left: 2%;
	right: 2%;
	bottom: -0.8%;
	aspect-ratio: 1 / 1;
	z-index: 2;
	will-change: transform;
}

.hero__slide {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	opacity: 0;
	pointer-events: none;
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img {
	max-height: 100%;
	width: auto;
	object-fit: contain;
	filter: drop-shadow(0 30px 30px rgba(0, 0, 0, 0.5));
}

.hero__dots {
	position: absolute;
	inset-inline: 0;
	bottom: -2%;
	z-index: 7;
	display: flex;
	justify-content: center;
	gap: 0.6rem;
}
.hero__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.32);
	transition: background 0.35s, transform 0.35s var(--ease), width 0.35s var(--ease);
}
.hero__dot:hover { background: rgba(255, 255, 255, 0.6); }
.hero__dot.is-active { background: var(--yellow); width: 26px; border-radius: 999px; }

/* Quality seal — SVG so the wording translates and the ring stays crisp. */
.hero__badge {
	position: absolute;
	right: 2%;
	top: 22%;
	width: 25%;
	height: auto;
	z-index: 6;
	overflow: visible;
	filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.35));
}
.hero__badge-disc {
	fill: var(--yellow);
	stroke: var(--yellow-deep);
	stroke-width: 3;
}
.hero__badge-ring--inner { fill: none; stroke: var(--navy); stroke-width: 1; stroke-dasharray: 2 6; opacity: 0.3; }
.hero__badge-star { fill: var(--navy); opacity: 0.9; }
.hero__badge-value {
	fill: var(--navy);
	font-family: var(--font-display);
	font-size: 44px;
	font-weight: 900;
}
.hero__badge-rule { stroke: rgba(39, 38, 97, 0.35); stroke-width: 1.4; }
.hero__badge-label {
	fill: var(--navy);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 800;
}
.hero__badge-label--sub { fill: rgba(39, 38, 97, 0.7); font-size: 12px; font-weight: 600; }

/* Barn fence closing the hero, in the same yellow as the ticker below it so the
   two meet as one strip instead of as two stacked bands. */
.hero__fence {
	position: absolute;
	inset-inline: 0;
	bottom: -1px; /* hairline overlap; kills the sub-pixel seam against the ticker */
	width: 100%;
	height: clamp(34px, 3.8vw, 56px);
	z-index: 5;
	fill: var(--yellow);
	pointer-events: none;
}


@media (max-width: 900px) {
	.hero { min-height: auto; padding-block: 6.7rem 3rem; }
	.hero__grid { gap: 0.25rem; }
	.hero__copy { padding-block: 0; }
	.hero__made-in-egypt { justify-content: center; margin-bottom: 0.8rem; }
	.hero__title { font-size: clamp(3.25rem, 16vw, 5rem); margin-bottom: 0.75rem; }
	.hero__lede { margin-bottom: 1.45rem; font-size: 0.98rem; max-width: 34ch; }
	.hero__actions .btn { padding: 0.82rem 1.22rem; }
	.hero__art { min-height: min(96vw, 420px); width: min(100%, 420px); margin-inline: auto; }
	.hero__badge { width: 30%; top: 18%; right: -4%; }
	.hero__arch { left: 8%; right: 10%; }
}

/* -------------------------------------------------------------------------
   Marquee
   ---------------------------------------------------------------------- */

.marquee {
	position: relative;
	overflow: hidden;
	background: var(--yellow);
	color: var(--navy);
	padding-block: 0.85rem;
	border-block: 2px solid var(--navy);
	/* LTR on the clipping box, not just on the track. The track is wider than
	   the strip, and an over-wide child of an RTL block is laid out from the
	   right edge — so its left edge starts at a large negative offset and the
	   loop's own translation carried it right off the screen. Each label still
	   isolates its own bidi run, so Arabic shapes correctly inside. */
	direction: ltr;
}
/* The fence hands straight over to the ticker, so the rule between them would
   read as a seam cutting the posts off at the ankle. */
.hero + .marquee { border-block-start: 0; }
/* Pure-CSS loop: two identical groups, translated by exactly one group width.
   No JS needed, so the ticker still runs if the GSAP CDN is unreachable.

   The track is forced to LTR: under RTL the flex origin is the right edge, so
   translating by -50% would carry the whole strip off-screen. Each label
   isolates its own bidi run, so Arabic still shapes correctly. */
.marquee__track {
	display: flex;
	width: max-content;
	direction: ltr;
	will-change: transform;
	animation: mrs-marquee 38s linear infinite;
}
.marquee__group span,
.marquee__group i { unicode-bidi: isolate; }
[dir="rtl"] .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }

@keyframes mrs-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
.marquee__group {
	display: flex;
	align-items: center;
	gap: 2.5rem;
	padding-inline-end: 2.5rem;
	font-family: var(--font-brand);
	font-weight: 700;
	font-size: clamp(1.05rem, 1.8vw, 1.5rem);
	white-space: nowrap;
}
.lang-ar .marquee__group { font-family: var(--font-body); font-weight: 800; }
.marquee__group i { font-style: normal; opacity: 0.45; }

/* -------------------------------------------------------------------------
   Story
   ---------------------------------------------------------------------- */

.story {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: #fff;
	padding-block: 5rem 5.5rem;
}
.story::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: var(--grain);
	opacity: 0.16;
	pointer-events: none;
}
.story__grid {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: center;
}
@media (max-width: 860px) { .story__grid { grid-template-columns: 1fr; } }

.story__layout {
	display: grid;
	grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
	grid-template-areas: "media copy";
	align-items: center;
	gap: 3.5rem;
	width: min(100% - var(--gutter) * 2, 1480px);
	direction: ltr;
}

/* ---- copy column ---- */

.story__copy {
	grid-area: copy;
	position: relative;
	z-index: 2;
	text-align: center;
	direction: rtl;
}
.lang-en .story__copy { direction: ltr; }

/* The rule trails the label here rather than leading it, so on the Arabic
   side it runs away from the text into the margin instead of pinching it
   against the column edge. */
.story__eyebrow {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.85rem;
	width: fit-content;
	margin: 0 0 clamp(2.75rem, 6vw, 5rem);
	margin-left: auto;
	margin-right: 0;
	font-size: var(--step--1);
	font-weight: 700;
	letter-spacing: 0;
	color: var(--navy);
}
.story__eyebrow::before {
	content: "";
	inline-size: clamp(28px, 4vw, 46px);
	block-size: 2px;
	background: var(--yellow-deep);
	flex: none;
}

/* Headline flanked by its ticks; the flicks are pushed into the gutter so the
   words keep the column's full measure. */
.story__headline {
	position: relative;
	display: grid;
	grid-template-columns: 0 1fr 0;
	align-items: center;
}

.story__title {
	grid-column: 2;
	position: relative;
	z-index: 0;
	font-size: 5rem;
	line-height: 1.3;
	margin: 0;
}
.lang-ar .story__title { font-weight: 900; }

/* One continuous marker swipe beneath the complete second line, matching the
   brand composition even when the editable highlight only wraps one word. */
.story .story__title::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset-inline-start: 6%;
	inset-block-end: 0.08em;
	inline-size: 84%;
	block-size: 0.22em;
	background: var(--yellow);
	clip-path: polygon(1% 18%, 98% 5%, 100% 44%, 96% 76%, 2% 91%, 0 58%);
}

/* Marker dragged behind the highlighted words. A background rather than a
   pseudo-element so it survives the headline wrapping onto two lines. */
.story .hl {
	color: var(--navy);
	padding-inline: 0.14em;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

@media (max-width: 620px) {
	.story .story__title::after { inset-inline-start: 8%; inline-size: 84%; }
}

.story__flick {
	inline-size: clamp(22px, 2.6vw, 34px);
	overflow: visible;
	fill: none;
	stroke: var(--navy);
	stroke-width: 5;
	stroke-linecap: round;
}
.story__flick--start { grid-column: 1; justify-self: end; translate: -60% 0; }
.story__flick--end { grid-column: 3; justify-self: start; translate: 60% 0; }
@media (max-width: 620px) { .story__flick--start, .story__flick--end { display: none; } }

.story__rule {
	display: block;
	inline-size: min(72%, 340px);
	block-size: auto;
	margin: clamp(1.5rem, 3.5vw, 2.5rem) auto clamp(1.25rem, 3vw, 2rem);
}
.story__rule-line { fill: none; stroke: var(--navy); stroke-width: 1.6; stroke-linecap: round; opacity: 0.6; }
.story__rule-star { fill: var(--navy); }

.story__body {
	font-size: clamp(1rem, 1.8vw, 1.35rem);
	color: #46456b;
	max-width: 58ch;
	margin-inline: auto;
}
.lang-ar .story__body { font-size: clamp(1rem, 1.8vw, 1.3rem); line-height: 2; }

/* ---- feature row ---- */

.story__features {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(0.75rem, 2vw, 1.5rem);
	margin: clamp(3rem, 6vw, 5rem) 0 0;
	padding: 0;
	list-style: none;
}
@media (max-width: 760px) { .story__features { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; } }

.story__feature {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	padding-inline: clamp(0.4rem, 1.4vw, 1rem);
}
/* Dotted divider between marks, never after the last one in a row. */
.story__feature + .story__feature::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block: 12%;
	inline-size: 2px;
	background: linear-gradient(var(--yellow-deep) 40%, transparent 0) 0 0 / 2px 7px repeat-y;
	opacity: 0.6;
}
@media (max-width: 760px) {
	.story__feature:nth-child(odd)::before { display: none; }
}

.story__feature-icon { color: var(--navy); }
.story__feature-icon svg { inline-size: clamp(42px, 4.2vw, 58px); block-size: auto; }

.story__feature-title {
	font-size: clamp(0.9rem, 1.15vw, 1.05rem);
	font-weight: 800;
	line-height: 1.3;
	color: var(--navy);
	margin-block-start: 0.45rem;
}
.story__feature-body {
	font-size: clamp(0.82rem, 1.15vw, 1rem);
	color: var(--muted);
	line-height: 1.4;
}

/* ---- product composition ---- */

.story .story__media {
	grid-area: media;
	position: relative;
	min-block-size: 660px;
	direction: ltr;
}
.story__disc {
	position: absolute;
	inset-inline-start: 50%;
	inset-block-start: 50%;
	inline-size: min(78%, 500px);
	aspect-ratio: 1;
	z-index: 1;
	overflow: visible;
	filter: drop-shadow(0 34px 34px rgba(39, 38, 97, 0.08));
	transform: translate(-50%, -50%);
}
.story__disc-fill {
	fill: var(--yellow);
	opacity: 0.72;
}
.story__disc-brush {
	fill: none;
	stroke: var(--yellow);
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	mix-blend-mode: multiply;
}
.story__disc-brush--a {
	stroke-width: 34;
	opacity: 0.34;
}
.story__disc-brush--b {
	stroke-width: 42;
	opacity: 0.28;
}
.story__disc-brush--c {
	stroke-width: 28;
	opacity: 0.24;
}
.story__disc-brush--d {
	stroke-width: 30;
	opacity: 0.22;
}
.story__disc-stroke {
	fill: none;
	stroke: var(--yellow-deep);
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}
.story__disc-stroke--a {
	stroke-width: 10;
	opacity: 0.82;
}
.story__disc-stroke--b {
	stroke-width: 6;
	opacity: 0.58;
	stroke-dasharray: 520 34 240 22;
}
.story__disc-stroke--c {
	stroke-width: 5;
	opacity: 0.42;
	stroke-dasharray: 280 24 460 36;
}
.story__product-img {
	position: absolute;
	inset-inline-start: 50%;
	inset-block-start: 50%;
	z-index: 3;
	inline-size: clamp(250px, 20vw, 315px);
	max-inline-size: 58%;
	max-block-size: 84%;
	object-fit: contain;
	filter: drop-shadow(0 30px 26px rgba(20, 19, 46, 0.18));
	transform: translate(-50%, -50%);
}

@media (max-width: 1180px) {
	.story__title { font-size: 4.15rem; }
	.story .story__media { min-block-size: 570px; }
	.story__product-img { inline-size: clamp(230px, 24vw, 285px); }
}

@media (max-width: 900px) {
	.story {
		padding-block: 3.75rem 4.5rem;
	}
	.story__layout {
		grid-template-columns: 1fr;
		grid-template-areas:
			"media"
			"copy";
		gap: 2.25rem;
	}
	.story .story__media {
		min-block-size: min(98vw, 560px);
	}
	.story__product-img {
		inline-size: min(48vw, 270px);
		max-inline-size: 62%;
	}
	.story__title { font-size: 3.45rem; }
	.story__eyebrow { margin-bottom: 2.1rem; }
}

@media (max-width: 620px) {
	.story__title { font-size: 2.7rem; }
	.story .story__media { min-block-size: 420px; }
	.story__disc { inline-size: min(78%, 330px); }
	.story__product-img {
		inline-size: min(54vw, 220px);
		max-inline-size: 64%;
	}
}

/* The same grid primitive is used on the inner About page. */
.section--paper .story__media {
	position: relative;
	display: grid;
	place-items: center;
	padding-block: clamp(1rem, 3vw, 2rem);
}
.section--paper .story__media img {
	max-block-size: clamp(280px, 42vw, 520px);
	inline-size: auto;
	filter: drop-shadow(0 24px 32px rgba(39, 38, 97, 0.18));
}
/* The framed card this badge used to corner-pin is gone on this layout, so it
   reads as a chip captioning the free-standing product instead. Without a rule
   here it falls back to bare text, since the badge styling now scopes to the
   redesigned .story band. */
.section--paper .story__badge {
	display: inline-block;
	margin-block-start: 1.25rem;
	padding: 0.55rem 1.15rem;
	border-radius: 999px;
	background: var(--navy);
	color: var(--paper);
	font-family: var(--font-body);
	font-size: var(--step--1);
	font-weight: 800;
	line-height: 1.2;
	box-shadow: 0 12px 22px -14px rgba(39, 38, 97, 0.7);
}

/* -------------------------------------------------------------------------
   Stat cards — front page "trust strip"

   Three marker-drawn cards on the sketched paper stock, the middle one inked
   solid navy so the headline claim carries. Everything is an inline path
   rather than a flattened comp: the frames can then be drawn on by GSAP and
   the whole strip stays sharp at any width.

   The numerals run in Cabin Sketch — the same hatched hand the brand uses on
   packaging. `--font-brand` cannot be used for them because `.lang-ar`
   reassigns it to Cairo for Arabic body copy, and these are Latin digits in
   both languages, so they get their own token below.
   ---------------------------------------------------------------------- */

:root { --font-sketch: "Cabin Sketch", "Anton", system-ui, sans-serif; }

/* Everything a client may recolour or resize from Elementor is funnelled
   through these four tokens. The card internals only ever read the tokens, so
   an override on the widget wrapper restyles the whole strip without touching
   a single component rule — and the theme's own render keeps the brand values
   as the defaults. */
.stat-strip {
	--stat-ink: var(--navy);
	--stat-accent: var(--yellow);
	--stat-paper: #f7f3ec;
	--stat-num-scale: 1;
	--stat-label-scale: 1;

	background: var(--stat-paper) var(--stats-bg, url("../img/stats-bg.webp")) center / cover no-repeat;
	/* Asymmetric on purpose: the badges hang above the cards while nothing
	   overhangs the foot, so equal padding leaves the strip sitting high in
	   its own band. The extra head room puts the drawn shapes back on centre. */
	padding-block: clamp(7rem, 11vw, 10rem) clamp(4rem, 6.5vw, 5.75rem);
	overflow: clip;
}

/* -------------------------------------------------------------------------
   Elementor integration

   The section widgets in inc/elementor/ render the same full-bleed bands the
   templates do, so they need the two things a page builder assumes away: no
   gutter between stacked sections, and no boxed width around them.
   ---------------------------------------------------------------------- */

/* Elementor containers are flex with a default 20px gap. These bands each
   carry their own background and are meant to butt together, so a gutter
   shows up as a strip of page colour between them. */
.e-con:has(> .elementor-widget[data-widget_type^="mrs-"]) { row-gap: 0; }

/* A widget sits inside a boxed container; the strip is a full-bleed band, so
   break it back out to the viewport however the client nests it. */
.elementor-widget-mrs-stats .stat-strip {
	inline-size: 100vw;
	margin-inline: calc(50% - 50vw);
}

.stat-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.5rem, 3vw, 2.75rem);
	align-items: center;
	/* Narrower than the page wrap on purpose. Everything inside the card is
	   sized in cqi, so pulling the row in is the single lever that scales the
	   numerals, badges, captions and marker strokes down together. */
	max-inline-size: 1050px;
	margin-inline: auto;
}
@media (max-width: 820px) {
	.stat-cards { grid-template-columns: 1fr; max-width: 380px; margin-inline: auto; gap: clamp(3rem, 9vw, 4rem); }
}

.stat-card {
	position: relative;
	text-align: center;
	padding: 0.5rem clamp(1.25rem, 2.5vw, 2rem) clamp(2rem, 3.2vw, 2.8rem);
	transition: transform 0.55s var(--ease);
	/* Everything inside is sized in cqi, so the card keeps the comp's
	   proportions at any column width — including the single-column phone
	   layout, where a viewport-based scale would leave the numerals tiny
	   inside a near-full-width card. */
	container-type: inline-size;
}
/* The far card mirrors the near one, so the flicked ticks do not read as a
   repeated stamp across the row. */
.stat-card--flip .stat-card__sparks { scale: -1 1; }

.stat-card__frame,
.stat-card__blob {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	pointer-events: none;
}

.stat-card__frame path {
	fill: none;
	stroke: var(--stat-ink);
	stroke-width: 4.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	/* Keeps the line an even weight however the box stretches. */
	vector-effect: non-scaling-stroke;
}
.stat-card__frame .stat-card__frame-tick { stroke-width: 3; }

.stat-card__blob path {
	fill: var(--stat-ink);
}

/* The middle card sits proud of the other two, as on the comp. */
@media (min-width: 821px) {
	.stat-card--navy { transform: translateY(-1.5rem); }
	.stat-card--navy:hover { transform: translateY(-2.25rem); }
	.stat-card:not(.stat-card--navy):hover { transform: translateY(-0.75rem); }
}

/* ---- badge ---- */

/* Centred with auto margins rather than `inset-inline-start: 50%`: on the
   Arabic side that logical offset resolves to `right`, which walked the badge
   a full width off centre. Auto margins are direction-agnostic.

   The lift onto the drawn line is an inset, deliberately not a `translate`:
   GSAP pops this badge in, and it folds any `translate` into `transform` as
   the pixel value current when it ran. That number never recomputes, so a
   resize or a phone rotation afterwards left the badge floating off the line. */
.stat-card__badge {
	--badge: clamp(62px, 37cqi, 152px);
	position: absolute;
	inset-inline: 0;
	inset-block-start: calc(var(--badge) * -0.32);
	margin-inline: auto;
	inline-size: var(--badge);
	aspect-ratio: 1;
}
.stat-card__disc {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	filter: drop-shadow(0 6px 10px rgba(23, 22, 58, 0.2));
}
.stat-card__disc-face { fill: var(--stat-accent); stroke: var(--stat-ink); stroke-width: 3.6; }
/* On navy the ring would only muddy the disc's edge — the ground already
   separates them. */
.stat-card--navy .stat-card__disc-face { stroke: none; }

.stat-card__glyph {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--stat-ink);
}
.stat-card__glyph svg { inline-size: 46%; block-size: auto; }

/* Physical `left` here, not a logical inset: the ticks are centred on the
   disc in both directions, and the RTL flip is done with `scale` instead. */
.stat-card__sparks {
	position: absolute;
	inset-block-start: -14%;
	left: 50%;
	translate: -50% 0;
	inline-size: 168%;
	overflow: visible;
}
.stat-card__sparks path {
	fill: none;
	stroke: var(--stat-ink);
	stroke-width: 7;
	stroke-linecap: round;
}

/* ---- numeral ---- */

/* Full-width block, so the highlighter behind it can be measured against the
   card rather than shrink-wrapping to the digits — "4" and "43" have to carry
   the same swipe. */
.stat-card__value {
	position: relative;
	display: block;
	margin: 0;
	/* Also the badge's clearance: the disc hangs 0.68 of its own width below
	   the card's top edge, and both are container-relative, so the numeral
	   clears it identically at every column width. The card itself cannot use
	   cqi for this — it *is* the container. */
	padding-block-start: 26cqi;
	line-height: 1;
}
.stat-card--navy .stat-card__value { padding-block-start: 28cqi; }
.stat-card__num {
	position: relative;
	display: block;
	font-family: var(--font-sketch);
	font-weight: 700;
	--num-max: calc(57cqi * var(--stat-num-scale));
	font-size: clamp(3.6rem, 7.5vw, 6rem);
	font-size: var(--num-max);
	/* Box hugs the glyph so the highlighter and the caption below can be
	   spaced off the numeral itself rather than off its leading. */
	line-height: 0.82;
	letter-spacing: 0;
	color: var(--stat-ink);
	/* Cabin Sketch Bold is drawn as an outline with a scribbled fill, which
	   reads hollow at this size. Thickening the glyph edge closes it up into
	   the solid marker numeral of the comp, keeping only the flecks. */
	-webkit-text-stroke: 0.017em currentColor;
	/* Latin digits in both languages — the packaging and pack sizes use them,
	   so ٤٣ beside "270 جم" would read as two different systems. */
	direction: ltr;
	unicode-bidi: isolate;
}
/* "100%" is 2.6em wide against a digit's 0.6em, so the middle card is sized
   to fill its box rather than to match the others' cap height. */
.stat-card--navy .stat-card__num {
	color: var(--stat-accent);
	--num-max: calc(33cqi * var(--stat-num-scale));
	font-size: clamp(3.8rem, 8.5vw, 6.6rem);
	font-size: var(--num-max);
	-webkit-text-stroke: 0.012em currentColor;
}

/* Longer values are capped rather than scaled from a base, so `min()` keeps
   the middle card's already-tuned "100%" at its own size while a four-digit
   range count on the outer cards comes down to fit inside the frame. */
.stat-card--n4 .stat-card__num { font-size: min(var(--num-max), calc(43cqi * var(--stat-num-scale))); }
.stat-card--n5 .stat-card__num { font-size: min(var(--num-max), calc(34cqi * var(--stat-num-scale))); }

/* Highlighter dragged across behind the numeral.
   Both axes are given explicitly rather than left to a pair of insets: an SVG
   is a replaced element, so an auto size falls back to its own viewBox ratio
   instead of filling the insets. */
.stat-card__swipe {
	position: absolute;
	inset-inline: 0;
	margin-inline: auto;
	/* Measured off the container, not off the value box: that box carries the
	   badge clearance as padding, so a percentage of it would track the badge
	   rather than the digits. Anchoring to the foot works because Cabin Sketch
	   has essentially no descender — the ink bottom sits a hair above it. */
	inset-block-end: 9.3cqi;
	inline-size: 64%;
	block-size: 26cqi;
	fill: var(--stat-accent);
	transform-origin: 0% 50%;
}
[dir="rtl"] .stat-card__swipe { transform-origin: 100% 50%; }

.stat-card__rule {
	display: block;
	inline-size: 74%;
	block-size: 3.2cqi;
	margin: 0.9rem auto 0;
	fill: var(--stat-accent);
}

/* ---- captions ---- */

.stat-card__label {
	margin: 0;
	font-size: clamp(1.05rem, 1.7vw, 1.45rem);
	font-size: calc(9.5cqi * var(--stat-label-scale));
	font-weight: 800;
	line-height: 1.3;
	color: var(--stat-ink);
}
.stat-card--navy { padding-block-end: clamp(2.8rem, 4.6vw, 4rem); }
.stat-card--navy .stat-card__label { color: var(--paper); margin-block-start: clamp(0.4rem, 0.8vw, 0.7rem); }

.stat-card__underline {
	display: block;
	inline-size: 50%;
	block-size: 2.6cqi;
	margin: 0.55rem auto 0;
	fill: var(--stat-accent);
	transform-origin: 50% 50%;
}

/* Sub-line flanked by rules, as on the comp. */
.stat-card__sub {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0.9rem auto 0;
	inline-size: fit-content;
	max-inline-size: 100%;
	color: var(--stat-accent);
	font-size: var(--step--1);
	font-weight: 500;
}
.stat-card__sub::before,
.stat-card__sub::after {
	content: "";
	inline-size: clamp(20px, 3vw, 34px);
	block-size: 2px;
	background: currentColor;
	flex: none;
	border-radius: 2px;
}

/* -------------------------------------------------------------------------
   Gallery section — background, header, seal
   ---------------------------------------------------------------------- */

.section--gallery {
	background: var(--paper-warm) url("../img/gallery/section-bg.webp") center top / cover no-repeat;
	/* Smaller than the default .section rhythm: at the full clamp(5rem,10vw,9rem)
	   this section alone ran taller than the viewport before a visitor reached
	   the cards. */
	padding-block: clamp(3rem, 6vw, 5rem);
}

.gallery__title { font-size: var(--step-2); }

.gallery__head { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.gallery__head > div { max-width: 46ch; }

.eyebrow--maroon::before { background: var(--maroon); }

.gallery__lede { color: var(--muted); font-size: var(--step--1); max-width: 42ch; }

/* -------------------------------------------------------------------------
   Category rail

   A horizontal strip at every width, never a stacked column: on a phone the
   four cards are the same shape as on a desktop, just scrolled sideways
   instead of shrunk into an unreadable grid or piled up the whole height of
   the screen.
   ---------------------------------------------------------------------- */

.cat-grid {
	display: flex;
	/* Centred rather than packed to the reading-start edge: four cards rarely
	   fill the row, and centring reads as a deliberate layout instead of a
	   short row that ran out of content. Once the cards overflow (see the
	   media query below) the browser still scrolls to both true ends. */
	justify-content: center;
	gap: clamp(1rem, 1.8vw, 1.5rem);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	padding-bottom: 0.5rem;
	margin-bottom: -0.5rem;
	/* Keep the native scrollbar out of a design that otherwise has none. */
	scrollbar-width: thin;
}
.cat-grid::-webkit-scrollbar { height: 6px; }
.cat-grid::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }

.cat-card {
	--accent: #c4272b;
	position: relative;
	display: block;
	flex: 0 0 clamp(193px, 22vw, 275px);
	aspect-ratio: 0.72 / 1;
	scroll-snap-align: start;
	border-radius: var(--arch);
	overflow: hidden;
	background: #fff;
	isolation: isolate;
	box-shadow: 0 16px 30px -22px rgba(20, 19, 46, 0.4);
	transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.cat-card:hover { transform: translateY(-6px); box-shadow: 0 24px 40px -22px rgba(20, 19, 46, 0.55); }

.cat-card__photo {
	position: absolute;
	inset: 0;
	bottom: 24%;
	z-index: 0;
}
.cat-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.7s var(--ease);
}
.cat-card:hover .cat-card__photo img { transform: scale(1.06); }

/* Icon badge, straddling the photo/label seam. */
.cat-card__icon {
	position: absolute;
	inset-inline-start: clamp(0.7rem, 1.4vw, 1rem);
	top: calc(76% - 19px);
	z-index: 2;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--accent);
	color: #fff;
	box-shadow: 0 8px 16px -6px rgba(0, 0, 0, 0.45);
}
.cat-card__icon svg { width: 18px; height: 18px; }

.cat-card__bar {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 24%;
	z-index: 1;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding-inline: clamp(0.6rem, 1.4vw, 0.9rem);
	border-block-end: 3px solid var(--accent);
}

.cat-card__text { min-width: 0; }
.cat-card__name {
	display: block;
	font-family: var(--font-display);
	font-size: var(--step-0);
	line-height: 1.15;
	color: var(--ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.lang-ar .cat-card__name { font-weight: 800; }

.cat-card__count { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 0.2rem; }
.cat-card__count b { color: var(--accent); font-weight: 800; }

.cat-card__arrow {
	flex: none;
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--accent);
	color: #fff;
	transition: transform 0.4s var(--ease);
}
.cat-card__arrow svg { width: 14px; height: 14px; }
.cat-card:hover .cat-card__arrow { transform: translateX(3px); }
[dir="rtl"] .cat-card:hover .cat-card__arrow { transform: translateX(-3px); }

/* -------------------------------------------------------------------------
   Product grid
   ---------------------------------------------------------------------- */

.filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.filter {
	padding: 0.6rem 1.3rem;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	font-size: var(--step--1);
	font-weight: 600;
	color: var(--muted);
	transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s var(--ease);
}
.filter:hover { transform: translateY(-2px); border-color: var(--navy); color: var(--navy); }
.filter[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--paper); }

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: clamp(1rem, 2vw, 1.75rem);
}

.card {
	--accent: var(--navy);
	position: relative;
	display: grid;
	grid-template-rows: 1fr auto;
	background: #fff;
	border: 1.5px solid var(--line);
	border-radius: var(--arch);
	padding: clamp(1.25rem, 2vw, 1.75rem);
	overflow: hidden;
	isolation: isolate;
	transition: transform 0.55s var(--ease), border-color 0.4s, box-shadow 0.55s var(--ease);
}
/* `display` above is an author declaration, so it beats the browser's built-in
   `[hidden] { display: none }` — without this the category filter sets the
   attribute on every non-matching card and none of them actually go away. */
.card[hidden] { display: none; }
.card::before {
	/* accent wash, tinted by the product's own label colour */
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 62%;
	background: radial-gradient(85% 100% at 50% 0%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 72%);
	opacity: 0;
	transition: opacity 0.5s var(--ease);
	z-index: -1;
}
.card:hover {
	transform: translateY(-6px);
	border-color: color-mix(in srgb, var(--accent) 45%, transparent);
	box-shadow: 0 26px 50px -30px color-mix(in srgb, var(--accent) 70%, transparent);
}
.card:hover::before { opacity: 1; }

.card__media {
	display: grid;
	place-items: center;
	padding-block: clamp(1rem, 2vw, 1.75rem) clamp(0.75rem, 1.5vw, 1.25rem);
	min-height: 200px;
}
.card__media img {
	max-height: clamp(170px, 22vw, 250px);
	width: auto;
	object-fit: contain;
	filter: drop-shadow(0 18px 22px rgba(39, 38, 97, 0.18));
	transition: transform 0.6s var(--ease);
}
.card:hover .card__media img { transform: translateY(-8px) scale(1.04); }

.card__name { font-size: var(--step-1); line-height: 1.15; }
.lang-en .card__name { text-transform: uppercase; }
.card__alt {
	font-family: var(--font-quote);
	font-style: italic;
	font-size: var(--step--1);
	color: var(--muted);
	margin-top: 0.2rem;
}
.lang-ar .card__alt { font-family: var(--font-body); font-style: normal; }

.chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.9rem; }
.chip {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 0.28rem 0.6rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--accent) 12%, transparent);
	color: color-mix(in srgb, var(--accent) 78%, #000);
	white-space: nowrap;
}

.card__link { position: absolute; inset: 0; z-index: 2; }
.card__link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.grid__empty { grid-column: 1 / -1; padding: 4rem 0; text-align: center; color: var(--muted); }

/* -------------------------------------------------------------------------
   Wholesale band
   ---------------------------------------------------------------------- */

.band {
	position: relative;
	background: var(--yellow);
	color: var(--navy);
	overflow: hidden;
	padding-block: clamp(2.75rem, 5.5vw, 4.25rem);
}
.band::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--grain);
	opacity: 0.3;
	mix-blend-mode: multiply;
	pointer-events: none;
}
.band::after {
	content: "";
	position: absolute;
	inset-inline: clamp(1rem, 4vw, 4rem);
	inset-block: clamp(1rem, 3vw, 2rem);
	border: 2px solid rgba(39, 38, 97, 0.18);
	border-radius: 24px;
	pointer-events: none;
}
.band__grid {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
	text-align: center;
}
.band__grid > div {
	width: min(100%, 900px);
	display: grid;
	justify-items: center;
}
.band__title {
	max-width: 24ch;
	font-size: clamp(2rem, 3.7vw, 3.45rem);
	line-height: 1.14;
	margin-bottom: 1.25rem;
}
.band .btn {
	min-height: 58px;
	padding-inline: clamp(1.6rem, 4vw, 2.5rem);
	background: var(--navy);
	color: var(--yellow);
	border: 2px solid var(--navy);
	box-shadow: 0 14px 26px rgba(39, 38, 97, 0.18);
}
.band .btn:hover { background: #fff; color: var(--navy); }
/* Selected through the parent so it outweighs `.band__grid > div`, which sets
   `display: grid` for the copy column and otherwise stacks these two packs
   into a single column instead of standing them side by side. */
.band__grid > .band__art {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: center;
	gap: clamp(0.75rem, 2vw, 1.75rem);
}
.band__art img {
	max-height: clamp(180px, 24vw, 300px);
	width: auto;
	filter: drop-shadow(0 24px 28px rgba(39, 38, 97, 0.3));
}

/* -------------------------------------------------------------------------
   Page header (inner pages)
   ---------------------------------------------------------------------- */

.page-head {
	background: var(--navy);
	color: var(--paper);
	padding-block: clamp(9rem, 18vh, 13rem) clamp(3.5rem, 7vw, 6rem);
	position: relative;
	overflow: hidden;
}
.page-head::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--grain);
	opacity: 0.14;
	pointer-events: none;
}
.page-head__title { font-size: var(--step-4); }
.page-head__lede { max-width: 56ch; margin-top: 1.25rem; color: rgba(251, 251, 251, 0.75); font-size: var(--step-1); }

/* -------------------------------------------------------------------------
   Single product
   ---------------------------------------------------------------------- */

.product {
	--accent: var(--navy);
	position: relative;
	padding-block: clamp(8rem, 16vh, 12rem) var(--section);
	overflow: hidden;
}
.product::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 68%;
	background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, var(--paper)), var(--paper));
	z-index: -1;
}
.product__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}
@media (max-width: 860px) { .product__grid { grid-template-columns: 1fr; } }

.product__stage {
	position: relative;
	display: grid;
	place-items: center;
	padding: clamp(1.5rem, 4vw, 3rem);
	background: #fff;
	border: 1.5px solid var(--line);
	border-radius: var(--arch);
}
.product__stage img {
	max-height: min(56svh, 520px);
	width: auto;
	filter: drop-shadow(0 30px 40px color-mix(in srgb, var(--accent) 35%, transparent));
}

.product__thumbs { display: flex; gap: 0.75rem; margin-top: 1rem; justify-content: center; flex-wrap: wrap; }
.product__thumb {
	width: 74px;
	height: 74px;
	display: grid;
	place-items: center;
	padding: 0.4rem;
	background: #fff;
	border: 1.5px solid var(--line);
	border-radius: 12px;
	transition: border-color 0.3s, transform 0.3s var(--ease);
}
.product__thumb img { max-height: 100%; width: auto; object-fit: contain; }
.product__thumb:hover { transform: translateY(-3px); }
.product__thumb[aria-pressed="true"] { border-color: var(--accent); }

.product__title { font-size: var(--step-4); margin-block: 0.5rem 0.75rem; }
.product__alt {
	font-family: var(--font-quote);
	font-style: italic;
	font-size: var(--step-1);
	color: var(--muted);
	margin-bottom: 1.5rem;
}
.lang-ar .product__alt { font-family: var(--font-body); font-style: normal; }

.product__desc { font-size: var(--step-1); color: #46456b; max-width: 48ch; margin-bottom: 2rem; }
.lang-ar .product__desc { font-size: var(--step-0); line-height: 1.9; }

.spec { border-top: 1.5px solid var(--line); padding-top: 1.25rem; margin-top: 1.75rem; }
.spec__label {
	font-size: var(--step--1);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 0.85rem;
}
.lang-ar .spec__label { letter-spacing: 0; }
.size-list { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; margin: 0; padding: 0; }
.size-list li {
	padding: 0.55rem 1.1rem;
	border: 1.5px solid color-mix(in srgb, var(--accent) 35%, transparent);
	border-radius: 999px;
	font-weight: 600;
	font-size: var(--step--1);
	background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.back-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--step--1);
	font-weight: 600;
	color: var(--muted);
	transition: color 0.3s, gap 0.3s;
}
.back-link:hover { color: var(--navy); gap: 0.8rem; }
[dir="rtl"] .back-link svg { transform: scaleX(-1); }

/* -------------------------------------------------------------------------
   Contact
   ---------------------------------------------------------------------- */

.contact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(1rem, 2.5vw, 2rem);
}
.contact-card {
	background: #fff;
	border: 1.5px solid var(--line);
	border-radius: 20px;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	transition: transform 0.5s var(--ease), border-color 0.4s;
}
.contact-card:hover { transform: translateY(-5px); border-color: var(--navy); }
.contact-card__label {
	font-size: var(--step--1);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 0.6rem;
}
.lang-ar .contact-card__label { letter-spacing: 0; }
.contact-card__value { font-family: var(--font-display); font-size: var(--step-1); word-break: break-word; }
.lang-ar .contact-card__value { font-weight: 800; }
.lang-en .contact-card__value { text-transform: uppercase; }

/* -------------------------------------------------------------------------
   Footer
   ---------------------------------------------------------------------- */

.site-footer {
	background: var(--navy-deep);
	color: var(--paper);
	padding-block: clamp(3.5rem, 8vw, 6rem) 2rem;
	position: relative;
	overflow: hidden;
}
.site-footer::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--grain);
	opacity: 0.12;
	pointer-events: none;
}
.footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
	border-bottom: 1px solid rgba(251, 251, 251, 0.14);
}
@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr; } }

.footer__blurb { color: rgba(251, 251, 251, 0.66); max-width: 40ch; margin-top: 1.25rem; }
.footer__heading {
	font-size: var(--step--1);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--yellow);
	margin-bottom: 1.1rem;
}
.lang-ar .footer__heading { letter-spacing: 0; }
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.footer__list a { color: rgba(251, 251, 251, 0.75); transition: color 0.3s; }
.footer__list a:hover { color: var(--yellow); }

.socials { display: flex; gap: 0.6rem; margin-top: 1.5rem; }
.socials a {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border: 1.5px solid rgba(251, 251, 251, 0.24);
	border-radius: 50%;
	transition: background 0.3s, color 0.3s, transform 0.4s var(--ease), border-color 0.3s;
}
.socials a:hover { background: var(--yellow); color: var(--navy); border-color: var(--yellow); transform: translateY(-3px); }
.socials svg { width: 18px; height: 18px; }

.footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	align-items: center;
	padding-top: 1.75rem;
	font-size: var(--step--1);
	color: rgba(251, 251, 251, 0.5);
}

.wa-float {
	position: fixed;
	inset-inline-end: clamp(1rem, 3vw, 2rem);
	inset-block-end: clamp(1rem, 3vw, 2rem);
	z-index: 90;
	width: 56px;
	height: 56px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.45);
	transition: transform 0.4s var(--ease);
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 28px; height: 28px; }

/* -------------------------------------------------------------------------
   Contact page
   ---------------------------------------------------------------------- */

.contact-page {
	overflow: hidden;
	color: var(--navy);
}

.contact-page__layout {
	display: grid;
	grid-template-columns: minmax(290px, 0.94fr) minmax(0, 1.06fr);
	grid-template-areas: "panel copy";
	gap: clamp(1.5rem, 5vw, 5rem);
	align-items: center;
	margin-bottom: clamp(1.8rem, 4vw, 3rem);
	direction: ltr;
}

.contact-page__copy {
	grid-area: copy;
	justify-self: end;
	max-width: 620px;
}
[dir="rtl"] .contact-page__copy,
[dir="rtl"] .contact-panel {
	direction: rtl;
}
[dir="ltr"] .contact-page__copy,
[dir="ltr"] .contact-panel {
	direction: ltr;
}
.contact-page__title {
	font-size: var(--step-3);
	letter-spacing: 0;
	max-width: 13ch;
}
.contact-page__lead {
	margin-top: 1rem;
	max-width: 58ch;
	color: #4b4a72;
	font-size: var(--step-1);
	line-height: 1.7;
}
.lang-ar .contact-page__lead { line-height: 1.95; }

.contact-page__actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.85rem;
	margin-top: 1.7rem;
	max-width: 560px;
}
.contact-page__actions .btn {
	justify-content: center;
	min-height: 58px;
}
.contact-page__actions .btn svg,
.contact-panel .btn svg {
	width: 1.2em;
	height: 1.2em;
	flex: none;
}
.contact-page__actions .btn--ghost {
	color: var(--navy);
	border-color: var(--navy);
	background: transparent;
}
.contact-page__actions .btn--ghost:hover {
	background: var(--navy);
	color: var(--yellow);
}
.contact-page__trust {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-top: 0.9rem;
	color: var(--muted);
	font-size: var(--step--1);
	font-weight: 700;
}
.contact-page__trust svg {
	width: 18px;
	height: 18px;
	color: var(--navy);
}

.contact-panel {
	grid-area: panel;
	position: relative;
	min-height: 100%;
	padding: clamp(1.4rem, 3vw, 2rem);
	border-radius: 24px;
	background: var(--navy);
	color: var(--paper);
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}
.contact-panel::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 0.65rem;
	background: var(--yellow);
}
.contact-panel__icon {
	width: 54px;
	height: 54px;
	display: grid;
	place-items: center;
	margin-bottom: 1.2rem;
	border-radius: 16px;
	background: var(--yellow);
	color: var(--navy);
}
.contact-panel__icon svg { width: 30px; height: 30px; }
.contact-panel__label {
	margin-bottom: 0.6rem;
	color: rgba(251, 251, 251, 0.68);
	font-size: var(--step--1);
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.lang-ar .contact-panel__label { letter-spacing: 0; text-transform: none; }
.contact-panel__title {
	margin-bottom: 0.85rem;
	color: var(--yellow);
	font-size: var(--step-2);
	letter-spacing: 0;
}
.contact-panel__body {
	max-width: 34ch;
	margin-bottom: 1.5rem;
	color: rgba(251, 251, 251, 0.78);
	line-height: 1.8;
}
.contact-panel .btn:hover {
	background: #fff;
	color: var(--navy);
}
.contact-panel__phone {
	display: block;
	width: max-content;
	max-width: 100%;
	margin-top: 0.4rem;
	font-family: var(--font-display);
	font-size: var(--step-2);
	color: var(--yellow);
	word-break: break-word;
}
.lang-ar .contact-panel__phone { font-weight: 900; }
.contact-panel__hours {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1.45rem;
	padding: 0.75rem 1rem;
	border: 1.5px dashed rgba(251, 251, 251, 0.32);
	border-radius: 999px;
	color: rgba(251, 251, 251, 0.78);
	font-size: var(--step--1);
	font-weight: 800;
}
.contact-panel__hours svg {
	width: 18px;
	height: 18px;
	color: var(--yellow);
}

.contact-social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: clamp(1rem, 3vw, 2rem);
	padding-block: 1.25rem 0;
	border-top: 1.5px solid var(--line);
}
.contact-social__label {
	margin: 0;
	color: var(--muted);
	font-weight: 900;
}
.contact-social__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
}
.contact-social__links a {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 44px;
	padding: 0.55rem 0.9rem;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	background: #fff;
	color: var(--navy);
	font-weight: 800;
	transition: background 0.3s, border-color 0.3s, transform 0.35s var(--ease);
}
.contact-social__links a:hover {
	background: var(--yellow);
	border-color: var(--yellow);
	transform: translateY(-3px);
}
.contact-social__links svg {
	width: 19px;
	height: 19px;
	flex: none;
}

@media (max-width: 980px) {
	.contact-page__layout {
		grid-template-columns: 1fr;
		grid-template-areas:
			"copy"
			"panel";
		align-items: stretch;
	}
	.contact-page__copy {
		justify-self: stretch;
		max-width: none;
	}
	.contact-page__title {
		max-width: 18ch;
	}
}

@media (max-width: 680px) {
	.contact-page__actions {
		grid-template-columns: 1fr;
	}
	.contact-page__actions .btn {
		width: 100%;
	}
	.contact-panel {
		border-radius: 18px;
	}
	.contact-panel__hours {
		border-radius: 16px;
	}
}

/* -------------------------------------------------------------------------
   About page
   ---------------------------------------------------------------------- */

.page-template-template-about {
	background: #f8f4ea;
}

.about-redesign {
	--about-paper: #fbf8ef;
	--about-card: #fffdf7;
	--about-ink: var(--navy);
	position: relative;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.54), transparent 18rem),
		var(--about-paper);
	color: var(--about-ink);
	overflow: hidden;
}

.about-redesign::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--grain);
	opacity: 0.18;
	mix-blend-mode: multiply;
	pointer-events: none;
}

.about-redesign > section {
	position: relative;
	z-index: 1;
}

.about-hero {
	min-block-size: min(860px, 92svh);
	display: grid;
	align-items: end;
	padding-block: clamp(7rem, 13vw, 10.5rem) 0;
}

.about-hero::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 15px;
	background: var(--navy);
	clip-path: polygon(0 25%, 10% 30%, 18% 18%, 29% 35%, 42% 22%, 55% 35%, 66% 18%, 80% 32%, 92% 22%, 100% 30%, 100% 100%, 0 100%);
}

.about-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.9fr);
	align-items: center;
	gap: clamp(2rem, 6vw, 5.5rem);
	direction: ltr;
}

.about-hero__art {
	position: relative;
	min-block-size: clamp(420px, 49vw, 620px);
	align-self: end;
}

.about-hero__art > img {
	position: absolute;
	inset-inline-start: -11%;
	inset-block-end: -1%;
	inline-size: min(70vw, 820px);
	max-inline-size: none;
	mix-blend-mode: multiply;
}

.about-hero__copy {
	position: relative;
	padding-block: 3rem clamp(4rem, 8vw, 7rem);
	direction: rtl;
	text-align: center;
}

.about-sparks {
	position: absolute;
	inset-inline-end: 0;
	inset-block-start: 2.5rem;
	display: grid;
	gap: 0.38rem;
	margin: 0;
}

.about-sparks span {
	display: block;
	inline-size: 28px;
	block-size: 5px;
	border-radius: 99px;
	background: var(--yellow);
	transform-origin: center;
}

.about-sparks span:nth-child(1) { transform: rotate(-56deg); }
.about-sparks span:nth-child(2) { transform: rotate(-18deg); inline-size: 22px; }
.about-sparks span:nth-child(3) { transform: rotate(20deg); inline-size: 16px; }

.about-hero__title {
	position: relative;
	display: inline-block;
	font-size: clamp(4.4rem, 9vw, 9.3rem);
	line-height: 1;
	color: var(--navy);
	text-shadow: 0 2px 0 rgba(39, 38, 97, 0.08);
}

.about-hero__title::after {
	content: "";
	position: absolute;
	inset-inline: 4%;
	inset-block-end: 0.04em;
	block-size: 0.1em;
	background: var(--yellow);
	z-index: -1;
	transform: rotate(-1.5deg);
}

.about-hero__copy h2 {
	margin-block: 1rem 1.1rem;
	font-family: var(--font-body);
	font-size: clamp(1.65rem, 2.4vw, 2.65rem);
	font-weight: 900;
	line-height: 1.25;
	color: var(--navy);
}

.about-hero__copy p {
	max-inline-size: 58ch;
	margin-inline: auto;
	color: #37365f;
	font-size: clamp(1.02rem, 1.35vw, 1.32rem);
	font-weight: 700;
	line-height: 2;
}

.about-rule {
	display: block;
	inline-size: min(260px, 58%);
	margin: 1.8rem auto 0;
	color: var(--navy);
	overflow: visible;
}

.about-rule path:first-child {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

.about-rule path:last-child {
	fill: currentColor;
}

.about-values {
	padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(3rem, 6vw, 4.75rem);
}

.about-section-title {
	position: relative;
	width: fit-content;
	margin-inline: auto;
	margin-bottom: clamp(2rem, 4vw, 3rem);
	color: var(--navy);
	font-family: var(--font-body);
	font-size: clamp(2.2rem, 4vw, 4rem);
	font-weight: 900;
	line-height: 1.15;
}

.about-section-title::after {
	content: "";
	position: absolute;
	inset-inline: 28%;
	inset-block-end: -0.24rem;
	block-size: 5px;
	border-radius: 99px;
	background: var(--yellow);
}

.about-values__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1rem, 2vw, 1.6rem);
}

.about-value {
	min-block-size: 290px;
	display: grid;
	justify-items: center;
	align-content: start;
	text-align: center;
	padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 2vw, 1.45rem);
	border: 1.5px solid rgba(39, 38, 97, 0.09);
	border-radius: 16px;
	background: rgba(255, 253, 247, 0.82);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.about-value__ring {
	position: relative;
	display: grid;
	place-items: center;
	inline-size: 96px;
	aspect-ratio: 1;
	margin-bottom: 1.2rem;
	color: var(--navy);
}

.about-value__ring::before {
	content: "";
	position: absolute;
	inset: 10px;
	border: 4px solid var(--yellow);
	border-radius: 50%;
	clip-path: polygon(12% 0, 100% 8%, 88% 100%, 0 86%);
	transform: rotate(-18deg);
	opacity: 0.9;
}

.about-value__ring svg {
	position: relative;
	inline-size: 56px;
	block-size: 56px;
}

.about-value h3 {
	margin-bottom: 0.75rem;
	color: var(--navy);
	font-family: var(--font-body);
	font-size: clamp(1.05rem, 1.45vw, 1.35rem);
	font-weight: 900;
	line-height: 1.35;
}

.about-value p {
	color: #4c4b78;
	font-size: clamp(0.92rem, 1.05vw, 1.03rem);
	font-weight: 700;
	line-height: 1.85;
}

.about-story-band {
	position: relative;
	padding-block: clamp(4rem, 7vw, 6rem);
	background:
		radial-gradient(85% 120% at 78% 36%, rgba(43, 41, 119, 0.75), transparent 58%),
		linear-gradient(180deg, var(--navy) 0%, #10143f 100%);
	color: var(--paper);
	overflow: hidden;
}

.about-story-band::before,
.about-story-band::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	block-size: 18px;
	background: var(--paper);
	clip-path: polygon(0 0, 9% 38%, 21% 8%, 34% 48%, 48% 16%, 63% 45%, 80% 10%, 100% 42%, 100% 100%, 0 100%);
}

.about-story-band::before { inset-block-start: 0; transform: scaleY(-1); }
.about-story-band::after { inset-block-end: 0; }

.about-story-band__grid {
	display: grid;
	grid-template-columns: minmax(330px, 0.85fr) minmax(0, 1fr);
	gap: clamp(2rem, 6vw, 5rem);
	align-items: center;
	direction: ltr;
}

.about-story-band__photo {
	position: relative;
	max-inline-size: 520px;
	justify-self: start;
	transform: rotate(-3deg);
}

.about-tape {
	position: absolute;
	inset-inline-start: -1.7rem;
	inset-block-start: -1.2rem;
	z-index: 3;
	inline-size: 112px;
	block-size: 36px;
	background: var(--yellow);
	transform: rotate(-36deg);
}

.about-product-scene {
	position: relative;
	display: grid;
	place-items: center;
	min-block-size: 430px;
	border: 10px solid #fff;
	background: #211a16;
	box-shadow: 0 24px 44px rgba(0, 0, 0, 0.28);
	overflow: hidden;
}

.about-product-scene::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 28%),
		var(--grain);
	opacity: 0.35;
	mix-blend-mode: screen;
}

.about-product-scene img {
	position: relative;
	z-index: 1;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.about-story-band__copy {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	direction: rtl;
	text-align: right;
}

.about-story-band__copy section {
	max-inline-size: 66ch;
}

.about-story-band__copy h2 {
	position: relative;
	width: fit-content;
	margin-bottom: 1rem;
	color: var(--yellow);
	font-family: var(--font-body);
	font-size: clamp(2rem, 3.2vw, 3.2rem);
	font-weight: 900;
	line-height: 1.15;
}

.about-story-band__copy h2::after {
	content: "";
	position: absolute;
	inset-inline: 18%;
	inset-block-end: -0.25rem;
	block-size: 4px;
	background: currentColor;
	border-radius: 99px;
}

.about-story-band__copy p {
	color: rgba(251, 251, 251, 0.84);
	font-size: clamp(1rem, 1.25vw, 1.18rem);
	font-weight: 700;
	line-height: 2;
}

.about-stats {
	padding-block: clamp(2.5rem, 5vw, 4rem);
	background: var(--about-paper);
}

.about-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
}

.about-stat {
	position: relative;
	display: grid;
	justify-items: center;
	text-align: center;
	padding: 0.9rem clamp(0.7rem, 2vw, 1.6rem);
	color: var(--navy);
}

.about-stat + .about-stat::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block: 14%;
	inline-size: 2px;
	background: linear-gradient(var(--yellow) 45%, transparent 0) 0 0 / 2px 10px repeat-y;
}

.about-stat span {
	display: grid;
	place-items: center;
	inline-size: 58px;
	aspect-ratio: 1;
	margin-bottom: 0.55rem;
	color: var(--navy);
}

.about-stat svg {
	inline-size: 48px;
	block-size: 48px;
}

.about-stat strong {
	font-family: var(--font-body);
	font-size: clamp(2rem, 4vw, 3.15rem);
	font-weight: 900;
	line-height: 1;
}

.about-stat p {
	margin-top: 0.3rem;
	font-size: clamp(0.95rem, 1.2vw, 1.12rem);
	font-weight: 900;
}

.about-final {
	padding-block: 0 clamp(2.25rem, 5vw, 4rem);
	background: var(--about-paper);
}

.about-final__box {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	align-items: center;
	gap: clamp(1.2rem, 4vw, 3.5rem);
	direction: ltr;
	padding: clamp(1.35rem, 3vw, 2.2rem) clamp(1.5rem, 4vw, 3rem);
	border: 1.5px solid rgba(39, 38, 97, 0.14);
	border-radius: 16px;
	background: rgba(255, 253, 247, 0.84);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.about-final__headline h2 {
	max-inline-size: 10ch;
	direction: rtl;
	text-align: right;
	color: var(--navy);
	font-family: var(--font-body);
	font-size: clamp(1.8rem, 3vw, 3rem);
	font-weight: 900;
	line-height: 1.25;
}

.about-final__headline .about-rule {
	inline-size: 180px;
	margin-inline: 0;
}

.about-final__cta {
	display: grid;
	justify-items: end;
	gap: 1.25rem;
	direction: rtl;
	text-align: right;
}

.about-final__cta p {
	color: #3d3c68;
	font-size: clamp(1rem, 1.25vw, 1.16rem);
	font-weight: 800;
	line-height: 1.8;
}

@media (max-width: 1080px) {
	.about-hero__grid {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.about-hero__art {
		order: 2;
		min-block-size: clamp(340px, 72vw, 540px);
	}
	.about-hero__copy {
		order: 1;
		padding-block-end: 0;
	}
	.about-hero__art > img {
		inset-inline-start: 50%;
		transform: translateX(-50%);
		inline-size: min(100vw, 720px);
	}
	.about-values__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.about-story-band__grid {
		grid-template-columns: 1fr;
	}
	.about-story-band__copy {
		text-align: center;
	}
	.about-story-band__copy section,
	.about-story-band__copy h2 {
		margin-inline: auto;
	}
	.about-final__box {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.about-final__headline h2,
	.about-final__headline .about-rule {
		margin-inline: auto;
	}
	.about-final__cta {
		justify-items: center;
	}
}

@media (max-width: 760px) {
	.about-hero {
		padding-block-start: 6.4rem;
	}
	.about-hero__title {
		font-size: clamp(3.4rem, 18vw, 5.4rem);
	}
	.about-values__grid,
	.about-stats__grid {
		grid-template-columns: 1fr;
	}
	.about-value {
		min-block-size: auto;
	}
	.about-stat + .about-stat::before {
		inset-inline: 15%;
		inset-block-start: 0;
		inset-block-end: auto;
		inline-size: auto;
		block-size: 2px;
		background: linear-gradient(90deg, var(--yellow) 45%, transparent 0) 0 0 / 10px 2px repeat-x;
	}
	.about-product-scene {
		min-block-size: 350px;
	}
	.about-product-scene img {
		max-block-size: 290px;
	}
}

.about__statement {
	font-size: var(--step-3);
	line-height: 1.08;
	margin-bottom: 1.75rem;
	max-width: 18ch;
	color: var(--navy);
}
.lang-ar .about__statement { line-height: 1.25; max-width: 20ch; }

.about-story {
	background: var(--paper);
	isolation: isolate;
	overflow: hidden;
}
.about-story::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--grain);
	opacity: 0.22;
	mix-blend-mode: multiply;
	pointer-events: none;
	z-index: -1;
}
.about-story .story__grid {
	grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.78fr);
}
.about-story__copy .eyebrow {
	color: var(--muted);
	margin-bottom: 1.35rem;
}
.about-story .prose {
	max-width: 62ch;
	color: #46456b;
	font-size: clamp(1rem, 1.5vw, 1.18rem);
	line-height: 1.9;
}
.about-proof {
	position: relative;
	display: grid;
	grid-template-columns: 0.78fr 1fr;
	grid-template-areas:
		"stamp product"
		"copy copy";
	gap: clamp(1rem, 2vw, 1.35rem);
	padding: clamp(1.2rem, 2.8vw, 1.8rem);
	border: 2px solid var(--line);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	overflow: hidden;
}
.about-proof::before {
	content: "";
	position: absolute;
	inset-inline: 8%;
	inset-block-start: 26%;
	block-size: 7.5rem;
	background: var(--yellow);
	border-radius: 999px;
	transform: rotate(-2deg);
	opacity: 0.72;
}
.about-proof__stamp,
.about-proof__product,
.about-proof__copy {
	position: relative;
	z-index: 1;
}
.about-proof__stamp {
	grid-area: stamp;
	display: grid;
	place-items: center;
	align-self: center;
	aspect-ratio: 1;
	padding: clamp(0.7rem, 2vw, 1rem);
	border: 2px dashed var(--navy);
	border-radius: 50%;
	background: var(--paper);
}
.about-proof__stamp img {
	inline-size: min(100%, 170px);
	block-size: auto;
}
.about-proof__product {
	grid-area: product;
	display: grid;
	place-items: center;
	min-block-size: 220px;
}
.about-proof__product img {
	max-block-size: clamp(220px, 28vw, 360px);
	inline-size: auto;
	filter: drop-shadow(0 24px 28px rgba(39, 38, 97, 0.18));
}
.about-proof--no-product {
	grid-template-columns: 1fr;
	grid-template-areas:
		"stamp"
		"copy";
}
.about-proof--no-product .about-proof__stamp {
	inline-size: min(220px, 70%);
	justify-self: center;
}
.about-proof__copy {
	grid-area: copy;
	padding-block-start: 0.8rem;
	border-block-start: 1.5px solid var(--line);
}
.about-proof__kicker {
	margin-bottom: 0.45rem;
	color: var(--yellow-deep);
	font-size: var(--step--1);
	font-weight: 900;
}
.about-proof__copy h3 {
	font-size: clamp(1.35rem, 2vw, 1.9rem);
	line-height: 1.15;
	color: var(--navy);
}
.about-proof__copy ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.75rem;
	margin: 1.15rem 0 0;
	padding: 0;
	list-style: none;
}
.about-proof__copy li {
	display: grid;
	gap: 0.4rem;
	place-items: center;
	text-align: center;
	color: var(--navy);
	font-size: 0.78rem;
	font-weight: 800;
	line-height: 1.25;
}
.about-proof__copy svg {
	inline-size: 28px;
	block-size: 28px;
	color: var(--navy);
}

.pillars {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.5rem, 3.5vw, 3rem);
	margin-top: clamp(2rem, 5vw, 3.5rem);
}

.pillars-section {
	background: #fff;
}
.pillars-section::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--grain);
	opacity: 0.14;
	pointer-events: none;
}

.pillar {
	position: relative;
	display: grid;
	align-content: start;
	min-block-size: 100%;
	padding: clamp(1.25rem, 2.6vw, 1.75rem);
	border: 2px solid var(--navy);
	border-radius: 16px;
	background: var(--paper);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.pillar:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}
.pillar::before {
	content: "";
	position: absolute;
	inset-inline: 1.25rem;
	inset-block-start: -0.55rem;
	block-size: 0.85rem;
	background: var(--yellow);
	border-radius: 999px;
	transform: rotate(-1.5deg);
	transform-origin: 50% 50%;
}

.pillar__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.1rem;
}

.pillar__num {
	display: block;
	font-family: var(--font-sketch);
	font-size: clamp(2.1rem, 4vw, 3.8rem);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: 0;
	color: var(--yellow);
	-webkit-text-stroke: 0.015em var(--navy);
	direction: ltr;
}

.pillar__icon {
	display: grid;
	place-items: center;
	inline-size: 56px;
	aspect-ratio: 1;
	border: 2px solid var(--navy);
	border-radius: 50%;
	background: var(--yellow);
	color: var(--navy);
	flex: none;
}
.pillar__icon svg {
	inline-size: 58%;
	block-size: auto;
}

.pillar__title { font-size: var(--step-2); line-height: 1.16; margin-bottom: 0.85rem; color: var(--navy); }
.pillar__body { color: var(--muted); max-width: 34ch; }
.lang-ar .pillar__body { line-height: 1.9; }

.audiences {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1.25rem, 3vw, 2.25rem);
	margin-top: clamp(2rem, 5vw, 3.5rem);
}

.audience {
	position: relative;
	background: #fff;
	border: 2px solid var(--line);
	border-radius: 16px;
	padding: clamp(1.75rem, 3.5vw, 2.75rem);
	overflow: hidden;
	transition: transform 0.5s var(--ease), border-color 0.4s, box-shadow 0.4s;
}
.audience::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	block-size: 0.5rem;
	background: var(--yellow);
}
.audience:hover {
	transform: translateY(-5px);
	border-color: var(--navy);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.audience__icon {
	display: grid;
	place-items: center;
	inline-size: 58px;
	aspect-ratio: 1;
	margin-bottom: 1.15rem;
	border-radius: 16px;
	background: var(--navy);
	color: var(--yellow);
}
.audience__icon svg {
	inline-size: 56%;
	block-size: auto;
}

.audience__title { font-size: var(--step-2); line-height: 1.16; margin-bottom: 0.9rem; color: var(--navy); }
.audience__body { color: var(--muted); }
.lang-ar .audience__body { line-height: 1.9; }

@media (max-width: 860px) {
	.about-story .story__grid,
	.pillars,
	.audiences {
		grid-template-columns: 1fr;
	}
	.about-proof {
		grid-template-columns: 0.85fr 1fr;
		max-width: 560px;
		margin-inline: auto;
	}
}

/* -------------------------------------------------------------------------
   Phone refinement
   ---------------------------------------------------------------------- */

@media (max-width: 640px) {
	:root {
		--gutter: 1rem;
		--section: 3.6rem;
	}

	h1, h2, h3, h4 { letter-spacing: 0; }

	.site-header__inner {
		padding-block: 0.7rem;
	}
	.brand img {
		height: clamp(48px, 14vw, 56px);
	}
	.nav-toggle {
		width: 44px;
		height: 44px;
	}
	.nav-toggle span { inset-inline: 10px; }
	.nav {
		z-index: 100;
		min-block-size: 100svh;
		padding-inline: var(--gutter);
	}
	body.nav-open .site-header {
		transform: none;
	}
	.nav__list {
		width: min(100%, 320px);
		align-items: stretch;
		gap: 1rem;
		text-align: center;
	}
	.nav__list li {
		display: block;
	}
	.nav__list a {
		display: block;
		inline-size: 100%;
		font-size: 1.85rem;
		line-height: 1.15;
		overflow-wrap: anywhere;
	}
	.lang-switch {
		justify-content: center;
	}
	.amazon-link {
		justify-content: center;
		inline-size: 100%;
		padding-block: 0.85rem;
	}

	.hero {
		min-height: 100svh;
		align-items: start;
		padding-block: 5.35rem 2.25rem;
	}
	.hero__grid {
		gap: 0.55rem;
	}
	.hero__made-in-egypt {
		gap: 0.55rem;
		justify-content: center;
		margin-bottom: 0.55rem;
		font-size: 0.82rem;
		line-height: 1.25;
	}
	.hero__made-in-egypt::before {
		width: 2.15rem;
		height: 2px;
	}
	.hero__title {
		margin-bottom: 0.6rem;
		font-size: 3.35rem;
		line-height: 1.04;
	}
	.lang-ar .hero__title {
		line-height: 1.12;
	}
	.hero__lede {
		max-width: 31ch;
		margin-bottom: 1rem;
		font-size: 0.94rem;
		line-height: 1.65;
	}
	.hero__actions {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: min(100%, 342px);
		margin-inline: auto;
		gap: 0.65rem;
	}
	.hero__actions .btn {
		justify-content: center;
		min-height: 48px;
		padding: 0.7rem 0.75rem;
		font-size: 0.9rem;
		line-height: 1.2;
		white-space: normal;
	}
	.hero__art {
		width: min(92%, 330px);
		min-height: min(74vw, 322px);
		margin-block-start: 0.15rem;
	}
	.hero__arch {
		left: 9%;
		right: 9%;
		top: 16%;
		bottom: 9%;
	}
	.hero__stage {
		left: 0;
		right: 0;
		bottom: 0;
	}
	.hero__badge {
		width: 27%;
		top: 17%;
		right: -1%;
	}
	.hero__dots { bottom: 0; }
	.hero__fence { height: 28px; }

	.marquee {
		padding-block: 0.65rem;
	}
	.marquee__group {
		gap: 1.4rem;
		padding-inline-end: 1.4rem;
		font-size: 1rem;
	}

	.story {
		padding-block: 3.25rem 3.5rem;
	}
	.story__layout {
		gap: 1.35rem;
	}
	.story .story__media {
		min-block-size: 330px;
	}
	.story__disc {
		inline-size: min(78%, 285px);
	}
	.story__product-img {
		inline-size: min(50vw, 190px);
		max-inline-size: 62%;
	}
	.story__eyebrow {
		justify-content: flex-start;
		margin-bottom: 1.25rem;
		margin-left: auto;
		margin-right: 0;
	}
	.story__title {
		font-size: 2.35rem;
		line-height: 1.2;
	}
	.story__rule {
		inline-size: min(68%, 260px);
		margin-block: 1.1rem 0.9rem;
	}
	.story__body,
	.lang-ar .story__body {
		font-size: 0.98rem;
		line-height: 1.75;
	}
	.story__features {
		margin-top: 2rem;
		gap: 1.35rem 0.75rem;
	}
	.story__feature-icon svg {
		inline-size: 38px;
	}
	.story__feature-title {
		font-size: 0.88rem;
	}
	.story__feature-body {
		font-size: 0.78rem;
	}

	.stat-strip {
		padding-block: 4.5rem 3rem;
	}
	.stat-cards {
		max-width: 320px;
		gap: 2.35rem;
	}
	.stat-card {
		padding-inline: 1rem;
	}

	.gallery__head {
		margin-bottom: 1.35rem;
	}
	.cat-grid {
		justify-content: flex-start;
		gap: 0.75rem;
		scroll-padding-inline: var(--gutter);
	}
	.cat-card {
		flex-basis: 168px;
	}
	.cat-card__icon {
		width: 34px;
		height: 34px;
		top: calc(76% - 17px);
	}
	.cat-card__bar {
		padding-inline: 0.62rem;
	}
	.cat-card__arrow {
		width: 28px;
		height: 28px;
	}
	.cat-card__name {
		font-size: 0.95rem;
	}

	.filters {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 0.25rem;
		margin-bottom: 1.4rem;
		scrollbar-width: none;
	}
	.filters::-webkit-scrollbar { display: none; }
	.filter {
		flex: 0 0 auto;
		padding: 0.55rem 1rem;
	}
	.grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem;
	}
	.card {
		border-radius: 42px 42px 10px 10px;
		padding: 0.85rem;
	}
	.card__media {
		min-height: 124px;
		padding-block: 0.6rem 0.45rem;
	}
	.card__media img {
		max-height: 120px;
	}
	.card__name {
		font-size: 1rem;
		line-height: 1.2;
		text-align: center;
	}
	.card__alt {
		font-size: 0.78rem;
		line-height: 1.35;
	}
	.chips {
		gap: 0.25rem;
		margin-top: 0.55rem;
	}
	.chip {
		padding: 0.22rem 0.42rem;
		font-size: 0.62rem;
	}

	.band {
		text-align: center;
	}
	.band__grid {
		gap: 1.4rem;
	}
	.band__title {
		margin-bottom: 0.85rem;
		font-size: 2.15rem;
		line-height: 1.15;
	}
	.band__art {
		gap: 0.5rem;
	}
	.band__art img {
		max-height: 145px;
	}

	.page-head {
		padding-block: 6.6rem 3.4rem;
	}
	.page-head__title,
	.product__title {
		font-size: 2.45rem;
	}
	.page-head__lede,
	.product__desc,
	.prose {
		font-size: 1rem;
		line-height: 1.75;
	}
	.about-proof {
		grid-template-columns: 1fr;
		grid-template-areas:
			"stamp"
			"product"
			"copy";
		gap: 0.85rem;
	}
	.about-proof::before {
		inset-block-start: 9rem;
		block-size: 5.5rem;
	}
	.about-proof__stamp {
		inline-size: 150px;
		justify-self: center;
	}
	.about-proof__product {
		min-block-size: 180px;
	}
	.about-proof__product img {
		max-block-size: 230px;
	}
	.about-proof__copy ul {
		grid-template-columns: 1fr;
	}

	.product {
		padding-block: 6.2rem 3.8rem;
	}
		.product__grid {
			gap: 1.4rem;
			text-align: center;
		}
		.product__desc {
			margin-inline: auto;
		}
		.spec {
			text-align: center;
		}
		.size-list {
			justify-content: center;
		}
	.product__stage {
		padding: 1rem;
		border-radius: 72px 72px 12px 12px;
	}
	.product__stage img {
		max-height: 330px;
	}
	.product__thumb {
		width: 58px;
		height: 58px;
		border-radius: 8px;
	}

	.footer__grid {
		gap: 1.6rem;
	}
	.footer__bottom {
		display: grid;
		gap: 0.75rem;
	}
	.wa-float {
		width: 52px;
		height: 52px;
	}
}

@media (max-width: 370px) {
	.hero__title { font-size: 3rem; }
	.hero__actions {
		grid-template-columns: 1fr;
		width: min(100%, 270px);
	}
	.hero__art {
		min-height: 280px;
	}
}

@media (max-width: 330px) {
	.grid {
		grid-template-columns: 1fr;
	}
	.card__media {
		min-height: 150px;
	}
	.card__media img {
		max-height: 145px;
	}
}

/* -------------------------------------------------------------------------
   Editor content (About / generic pages)
   ---------------------------------------------------------------------- */

.prose { font-size: var(--step-1); color: #46456b; max-width: 68ch; }
.lang-ar .prose { font-size: var(--step-0); line-height: 1.95; }
.prose h2 { font-size: var(--step-2); margin-block: 2.5rem 1rem; color: var(--ink); }
.prose h3 { font-size: var(--step-1); margin-block: 2rem 0.75rem; color: var(--ink); }
.prose img { border-radius: 18px; margin-block: 2rem; }
.prose blockquote {
	font-family: var(--font-quote);
	font-style: italic;
	font-size: var(--step-2);
	color: var(--navy);
	border-inline-start: 3px solid var(--yellow);
	padding-inline-start: 1.5rem;
	margin: 2.5rem 0;
}
.lang-ar .prose blockquote { font-family: var(--font-body); font-style: normal; }
.prose ul, .prose ol { padding-inline-start: 1.4rem; }
.prose li { margin-bottom: 0.5rem; }
.prose a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* -------------------------------------------------------------------------
   Motion

   Reveal elements are deliberately NOT hidden here. main.js hides only what is
   still below the fold when it runs, so a blocked or failed script can never
   leave a section permanently invisible.
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.reveal, .reveal-line > * { opacity: 1 !important; transform: none !important; }
	.marquee__track { animation: none !important; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* -------------------------------------------------------------------------
   Recipes

   The cards reuse .card wholesale — same arch, same hover, same filter script
   — and only swap the packshot stage for a full-bleed cover photo. Everything
   below is written with logical properties, so the Arabic side needs no
   overrides of its own.
   ---------------------------------------------------------------------- */

.grid--recipes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }

.card--recipe {
	padding: 0;
	grid-template-rows: auto 1fr;
	text-align: start;
}
.card--recipe .card__cover {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--paper-warm);
	overflow: hidden;
}
.card--recipe .card__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--ease);
}
.card--recipe:hover .card__cover img { transform: scale(1.06); }

/* A recipe with no cover yet still reads as a card rather than a hole. */
.card--recipe .card__cover::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, color-mix(in srgb, var(--navy) 14%, transparent), transparent 60%);
	pointer-events: none;
}

/* Sits at the foot of the cover, not the head: the card's arch curves the top
   corners away to nothing, and a badge placed up there is sliced in half. */
.card__time {
	position: absolute;
	inset-block-end: 0.85rem;
	inset-inline-start: 0.85rem;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--navy);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	backdrop-filter: blur(6px);
}
.card__time svg { inline-size: 14px; block-size: 14px; flex: none; }

.card--recipe .card__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: clamp(1.25rem, 2vw, 1.6rem);
}
.card__kicker {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--maroon);
}
.lang-ar .card__kicker { letter-spacing: 0.04em; }
.card--recipe .card__name { font-size: var(--step-1); }
.card__excerpt {
	margin: 0;
	font-size: var(--step--1);
	line-height: 1.7;
	color: var(--muted);
}
.card__cta {
	margin-block-start: auto;
	padding-block-start: 0.6rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--step--1);
	font-weight: 700;
	color: var(--navy);
}
.card--recipe:hover .card__cta .btn__arrow { transform: translateX(4px); }
[dir="rtl"] .card--recipe:hover .card__cta .btn__arrow { transform: scaleX(-1) translateX(4px); }

/* -------------------------------------------------------------------------
   Single recipe — cover header
   ---------------------------------------------------------------------- */

.recipe-hero {
	position: relative;
	isolation: isolate;
	background: var(--navy);
	color: var(--paper);
	padding-block: clamp(9rem, 18vh, 13rem) clamp(3rem, 6vw, 5rem);
	overflow: hidden;
}
.recipe-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--grain);
	opacity: 0.14;
	pointer-events: none;
	z-index: -1;
}
.recipe-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.recipe-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Dark enough for white text at AA over any photograph the client uploads. */
.recipe-hero--cover .recipe-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(23, 22, 58, 0.86), rgba(23, 22, 58, 0.72) 45%, rgba(23, 22, 58, 0.92));
}
.recipe-hero__inner { position: relative; }
.recipe-hero__back { margin-bottom: 1.5rem; }
.recipe-hero .eyebrow { color: rgba(251, 251, 251, 0.7); }
.recipe-hero__title { font-size: var(--step-4); max-width: 20ch; }
.recipe-hero__lede {
	max-width: 58ch;
	margin-top: 1.25rem;
	color: rgba(251, 251, 251, 0.8);
	font-size: var(--step-1);
}

.back-link--light { color: rgba(251, 251, 251, 0.75); }
.back-link--light:hover { color: var(--yellow); }

.recipe-facts {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(0.6rem, 1.5vw, 1rem);
	list-style: none;
	margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
	padding: 0;
}
.recipe-fact {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.7rem 1.1rem;
	border: 1.5px solid rgba(251, 251, 251, 0.22);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(4px);
}
.recipe-fact svg { inline-size: 20px; block-size: 20px; flex: none; color: var(--yellow); }
.recipe-fact__label {
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(251, 251, 251, 0.6);
}
.lang-ar .recipe-fact__label { letter-spacing: 0.02em; }
.recipe-fact__value { font-weight: 700; }

/* -------------------------------------------------------------------------
   Single recipe — ingredients beside the method
   ---------------------------------------------------------------------- */

.recipe-body__grid {
	display: grid;
	grid-template-columns: minmax(260px, 340px) 1fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

.recipe-panel {
	position: sticky;
	/* Clears the fixed header when someone scrolls the method with the
	   quantities still in view. */
	top: clamp(6rem, 12vh, 7.5rem);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: #fff;
	border: 1.5px solid var(--line);
	border-radius: 22px;
	box-shadow: 0 26px 50px -38px rgba(39, 38, 97, 0.55);
}
.recipe-panel__title {
	font-size: var(--step-2);
	margin-bottom: 1.25rem;
	color: var(--navy);
}
.ingredient-list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--step-0);
}
.ingredient-list li {
	position: relative;
	padding-block: 0.7rem;
	padding-inline-start: 1.6rem;
	border-bottom: 1px dashed var(--line);
	line-height: 1.6;
}
.ingredient-list li:last-child { border-bottom: 0; }
.ingredient-list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 1.35em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--yellow);
	box-shadow: 0 0 0 3px rgba(251, 221, 45, 0.25);
}
.recipe-panel__print {
	margin-top: 1.75rem;
	width: 100%;
	justify-content: center;
	color: var(--navy);
	border-color: var(--line);
}
.recipe-panel__print:hover { border-color: var(--yellow); }

.recipe-main__title {
	font-size: var(--step-2);
	color: var(--navy);
	margin-bottom: clamp(1.5rem, 3vw, 2rem);
}
.recipe-notes, .recipe-video { margin-top: clamp(3rem, 6vw, 4.5rem); }

.step-list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: step;
}
.step {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: clamp(1rem, 2vw, 1.5rem);
	padding-block: clamp(1.25rem, 2.5vw, 1.75rem);
	border-bottom: 1.5px solid var(--line);
}
.step:last-child { border-bottom: 0; }
.step__num {
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: 50%;
	background: var(--navy);
	color: var(--yellow);
	font-family: var(--font-display);
	font-size: var(--step-1);
	line-height: 1;
}
.lang-ar .step__num { font-weight: 900; }
.step__text {
	margin: 0;
	font-size: var(--step-1);
	line-height: 1.75;
	color: #46456b;
	align-self: center;
}
.lang-ar .step__text { font-size: var(--step-0); line-height: 1.95; }

.recipe-video__frame {
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	background: var(--navy-deep);
	aspect-ratio: 16 / 9;
}
.recipe-video__frame iframe,
.recipe-video__frame video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 900px) {
	.recipe-body__grid { grid-template-columns: 1fr; }
	.recipe-panel { position: static; }
}

/* -------------------------------------------------------------------------
   Recipe, on paper

   Someone cooking prints the page or saves it as a PDF, so the print sheet
   keeps the ingredients and the method and drops everything that only makes
   sense on screen — the fixed header, the WhatsApp button, the related grid.
   ---------------------------------------------------------------------- */

@media print {
	.site-header, .site-footer, .wa-float, .skip-link,
	.recipe-panel__print, .recipe-hero__back, .recipe-video,
	.is-recipe .section--paper, .is-recipe .section--grain { display: none !important; }

	body { background: #fff; color: #000; }

	.recipe-hero {
		padding-block: 0 1.5rem;
		color: #000;
		background: none;
		border-bottom: 2px solid #000;
	}
	.recipe-hero__media, .recipe-hero::after { display: none; }
	.recipe-hero__title { font-size: 24pt; }
	.recipe-hero__lede, .recipe-fact__label { color: #333; }
	.recipe-fact { border-color: #999; background: none; }
	.recipe-fact svg { color: #000; }

	.recipe-body { padding-block: 1.5rem; }
	.recipe-body__grid { grid-template-columns: 1fr; gap: 1.5rem; }
	.recipe-panel { box-shadow: none; border-color: #999; break-inside: avoid; }
	.step { break-inside: avoid; }
	.step__num { background: none; color: #000; border: 1.5px solid #000; }
	.step__text { color: #000; }
	.reveal, .reveal-line > * { opacity: 1 !important; transform: none !important; }
}

/* A recipe still waiting on its photo: brand panel, not a grey hole.
   Selectors match the specificity of the .card--recipe .card__cover rules
   above, which would otherwise keep painting the empty panel warm paper. */
.card--recipe .card__cover--empty {
	display: grid;
	place-items: center;
	background:
		radial-gradient(120% 90% at 20% 0%, color-mix(in srgb, var(--yellow) 55%, transparent), transparent 60%),
		linear-gradient(150deg, var(--navy), var(--navy-deep));
}
.card--recipe .card__cover--empty::after { display: none; }
.card__cover-mark { color: rgba(251, 251, 251, 0.28); }
.card__cover-mark svg { inline-size: 64px; block-size: 64px; }