/*
  Bahra | بهرة — Premium contact-lens brand UI.
  Self-contained stylesheet; loaded after FontAwesome only.
  Designed for Arabic RTL with editorial dark-luxury aesthetic.
*/

/* Google Font loaded via <link> in HTML for better performance */

/* ---------- Tokens ---------- */
:root {
	/* palette */
	--ink:        #1b130d;
	--ink-2:      #2a1d12;
	--ink-3:      #3a2a1c;
	--cream:      #f7efe1;
	--cream-2:    #f1e6d2;
	--sand:       #e6d4b3;
	--gold:       #c8a364;
	--gold-2:     #e1c089;
	--gold-soft:  #efd9ad;
	--accent:     #a87242;
	--line:       rgba(60, 40, 25, 0.14);
	--line-strong:rgba(60, 40, 25, 0.32);
	--shadow-sm:  0 6px 18px rgba(35, 20, 10, 0.10);
	--shadow-md:  0 18px 40px rgba(35, 20, 10, 0.16);
	--shadow-lg:  0 32px 80px rgba(35, 20, 10, 0.22);

	/* spacing */
	--space-3xs: clamp(0.25rem, 0.2rem + 0.2vw, 0.4rem);
	--space-2xs: clamp(0.5rem, 0.45rem + 0.25vw, 0.7rem);
	--space-xs:  clamp(0.75rem, 0.65rem + 0.45vw, 1rem);
	--space-sm:  clamp(1rem, 0.9rem + 0.5vw, 1.35rem);
	--space-md:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
	--space-lg:  clamp(2.2rem, 1.8rem + 1.6vw, 3.4rem);
	--space-xl:  clamp(3.4rem, 2.8rem + 2.6vw, 5.2rem);
	--space-2xl: clamp(4.8rem, 3.8rem + 4vw, 7rem);

	/* type */
	--font-kufi: 'Noto Kufi Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;
	--font-body: var(--font-kufi);
	--font-display: var(--font-kufi);
	--step--1: clamp(0.85rem, 0.8rem + 0.2vw, 0.95rem);
	--step-0:  clamp(1rem, 0.94rem + 0.3vw, 1.1rem);
	--step-1:  clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem);
	--step-2:  clamp(1.4rem, 1.2rem + 0.7vw, 1.7rem);
	--step-3:  clamp(1.85rem, 1.5rem + 1.3vw, 2.4rem);
	--step-4:  clamp(2.4rem, 1.85rem + 2.2vw, 3.4rem);
	--step-5:  clamp(3rem, 2.2rem + 3.4vw, 4.8rem);

	/* motion */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--dur-1: 180ms;
	--dur-2: 320ms;
	--dur-3: 600ms;

	/* layout */
	--page-pad: clamp(1.1rem, 0.6rem + 4vw, 5rem);
	--max-w: 1280px;
	--radius: 22px;
	--radius-sm: 12px;
	--radius-pill: 999px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { direction: rtl; scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
	font-family: var(--font-body);
	font-size: var(--step-0);
	color: var(--ink);
	background: var(--cream);
	line-height: 1.7;
	text-align: right;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
body *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad) {
	font-family: var(--font-kufi);
}
img, video { max-width: 100%; height: auto; display: block; }

/* ---------- Performance: image fade-in (only for marked images) ---------- */
img.lazy-fade {
	opacity: 0;
	transition: opacity .4s ease;
}
img.lazy-fade.is-loaded {
	opacity: 1;
}

/* ---------- Performance: video lazy placeholder ---------- */
[data-lazy-video]:not([data-loaded]) {
	background: #111;
	position: relative;
}
[data-lazy-video]:not([data-loaded])::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #1a1208 25%, #2a1d12 50%, #1a1208 75%);
	background-size: 200% 200%;
	animation: shimmer 1.6s infinite linear;
}
@keyframes shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* ---------- Performance: content-visibility (text-only sections only) ---------- */
/* NOTE: sections with lazy images must NOT use content-visibility
   because it prevents the browser from triggering lazy image loading */
.color-story,
.feature-row {
	content-visibility: auto;
	contain-intrinsic-size: 0 500px;
}
button, input, select, textarea { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }
a { color: var(--accent); text-decoration: none; transition: color var(--dur-1) var(--ease-out); }
a:hover { color: var(--gold); }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 800;
	color: var(--ink);
	line-height: 1.35;
	margin: 0 0 var(--space-sm);
	text-wrap: balance;
	letter-spacing: 0;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p  { margin: 0 0 var(--space-sm); }
.latin,
.eyebrow,
[lang="en"] {
	direction: ltr;
	unicode-bidi: isolate;
}

/* selection */
::selection { background: var(--gold); color: var(--ink); }

/* skip link */
.skip-link {
	position: absolute; top: -100px; right: 1rem; z-index: 200;
	background: var(--ink); color: #fff; padding: .6rem 1rem; border-radius: 0 0 12px 12px;
	transition: top var(--dur-1) var(--ease-out);
}
.skip-link:focus { top: 0; color: #fff; }

/* reduce motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Promo bar ---------- */
.bahra-promo {
	background: linear-gradient(90deg, var(--gold-2), var(--gold) 50%, var(--gold-2));
	color: var(--ink);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: .9rem;
	text-align: center;
	padding: .6rem 1rem;
	letter-spacing: 0.01em;
}
.bahra-promo .check { color: #2c7a45; margin-inline-start: .3em; }
.bahra-promo .sep { color: rgba(0,0,0,.35); margin: 0 .6em; }

/* ---------- Header ---------- */
.bahra-header {
	position: sticky; top: 0; z-index: 95;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--space-sm);
	padding: .85rem var(--page-pad);
	background: rgba(247, 239, 225, 0.85);
	backdrop-filter: saturate(140%) blur(14px);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	border-bottom: 1px solid var(--line);
}
.bahra-brand { display: inline-flex; align-items: center; gap: .6rem; }
.bahra-brand img { height: 56px; width: auto; object-fit: contain; }
.bahra-brand .word {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.05rem;
	letter-spacing: 0.02em;
	color: var(--ink);
}
.bahra-nav {
	display: flex; flex-wrap: wrap;
	gap: var(--space-2xs) var(--space-md);
	align-items: center;
	justify-content: center;
}
.bahra-nav a {
	color: var(--ink); font-weight: 600; font-size: .96rem;
	padding: .3rem .15rem;
	position: relative;
	transition: color var(--dur-1) var(--ease-out);
}
.bahra-nav a::after {
	content: ""; position: absolute; right: 0; left: 0; bottom: -.45rem;
	height: 2px; background: var(--gold);
	transform: scaleX(0); transform-origin: 50% 50%;
	transition: transform var(--dur-2) var(--ease-out);
}
.bahra-nav a:hover, .bahra-nav a.active { color: var(--accent); }
.bahra-nav a:hover::after, .bahra-nav a.active::after { transform: scaleX(1); }

.bahra-cta {
	display: inline-flex; align-items: center; gap: .5rem;
	background: var(--ink) !important;
	color: var(--cream) !important;
	padding: .65rem 1.15rem !important;
	border-radius: var(--radius-pill);
	font-weight: 700;
	box-shadow: 0 8px 22px rgba(35,20,10,.25);
	transition: transform var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.bahra-cta::after { display: none !important; }
.bahra-cta:hover {
	background: var(--gold) !important;
	color: var(--ink) !important;
	transform: translateY(-2px);
}
.bahra-cta i { color: inherit; }

.bahra-menu-toggle {
	display: none;
	background: transparent; border: 1px solid var(--line-strong);
	border-radius: 12px;
	padding: .5rem .8rem;
	font-size: 1.1rem;
	color: var(--ink);
	cursor: pointer;
}

@media (max-width: 980px) {
	.bahra-header {
		grid-template-columns: auto auto;
		justify-content: space-between;
	}
	.bahra-menu-toggle { display: inline-flex; align-items: center; gap: .4rem; }
	.bahra-nav {
		grid-column: 1 / -1;
		flex-direction: column; align-items: stretch;
		gap: 0;
		padding: var(--space-sm) 0 var(--space-2xs);
		max-height: 0;
		overflow: hidden;
		transition: max-height var(--dur-3) var(--ease-out);
	}
	.bahra-nav.is-open { max-height: 700px; }
	.bahra-nav a { padding: .8rem .2rem; border-bottom: 1px solid var(--line); }
	.bahra-nav a::after { display: none; }
	.bahra-cta { justify-content: center; margin-top: var(--space-2xs); }
}

/* ---------- Generic section helpers ---------- */
.section {
	padding: var(--space-2xl) var(--page-pad);
}
.section-narrow { padding-block: var(--space-xl); }
.inner { max-width: var(--max-w); margin: 0 auto; }
.inner.medium { max-width: 880px; }
.inner.tight  { max-width: 720px; }
.center { text-align: center; }
.eyebrow {
	display: inline-block;
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: .18em;
	font-size: .78rem;
	color: var(--accent);
	margin-bottom: .8rem;
}
.lead { color: var(--ink-2); font-size: var(--step-1); max-width: 60ch; line-height: 1.7; }
.section-title {
	display: flex; flex-direction: column; align-items: center; text-align: center;
	margin-bottom: var(--space-lg);
}
.section-title h2 { margin-bottom: .4rem; }
.section-title p { color: var(--ink-3); max-width: 60ch; margin: 0; }

/* divider with mark */
.bahra-mark {
	display: grid; place-items: center; margin: var(--space-md) auto;
	width: 64px; height: 1px; background: var(--gold);
	position: relative;
}
.bahra-mark::before, .bahra-mark::after {
	content: ""; position: absolute; top: 50%;
	width: 6px; height: 6px; border-radius: 999px;
	background: var(--gold);
	transform: translateY(-50%);
}
.bahra-mark::before { right: -10px; }
.bahra-mark::after  { left: -10px; }

/* ---------- Buttons ---------- */
.btn,
input[type="submit"],
input[type="reset"],
input[type="button"],
button.btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: .55rem;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1rem;
	padding: .85rem 1.6rem;
	border: 0;
	border-radius: var(--radius-pill);
	cursor: pointer;
	background: var(--ink);
	color: var(--cream);
	box-shadow: 0 12px 28px rgba(35,20,10,.22);
	transition: transform var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
	text-decoration: none;
	white-space: nowrap;
}
.btn:hover, button.btn:hover, input[type="submit"]:hover {
	transform: translateY(-2px);
	background: var(--gold);
	color: var(--ink);
	box-shadow: 0 16px 36px rgba(200,163,100,.3);
}
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--ink); color: var(--cream); }
.btn-ghost {
	background: transparent;
	color: var(--ink);
	box-shadow: inset 0 0 0 2px var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--cream); box-shadow: inset 0 0 0 2px var(--ink); }
.btn-whatsapp { background: #25d366; color: #fff; }
.btn-whatsapp:hover { background: #128c7e; color: #fff; }
.btn-sm { padding: .55rem 1rem; font-size: .9rem; }
.btn-lg { padding: 1rem 2rem; font-size: 1.05rem; }

.actions { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.actions.center { justify-content: center; }

/* ---------- HERO ---------- */
.hero {
	position: relative;
	overflow: hidden;
	min-height: clamp(560px, 90vh, 880px);
	display: grid;
	align-items: center;
	background: radial-gradient(120% 80% at 80% 20%, var(--cream-2) 0%, var(--cream) 60%);
	padding: var(--space-2xl) var(--page-pad) var(--space-xl);
}
.hero::before {
	content: "";
	position: absolute; inset: 0;
	background:
		radial-gradient(60% 60% at 12% 90%, rgba(200,163,100,.18), transparent 70%),
		radial-gradient(40% 40% at 90% 80%, rgba(168,114,66,.12), transparent 70%);
	pointer-events: none;
}
.hero-grid {
	position: relative; z-index: 1;
	display: grid;
	gap: var(--space-lg);
	grid-template-columns: 1fr;
	max-width: var(--max-w);
	margin: 0 auto;
	width: 100%;
}
@media (min-width: 920px) {
	.hero-grid { grid-template-columns: 1.1fr 1fr; align-items: center; gap: var(--space-xl); }
}
.hero-copy h1 {
	font-size: clamp(2.4rem, 1.8rem + 3.6vw, 4.6rem);
	line-height: 1.22;
	margin-bottom: var(--space-sm);
}
.hero-copy h1 .accent {
	background: linear-gradient(90deg, var(--accent), var(--gold) 60%, var(--accent));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.hero-copy h1 .serif { font-family: var(--font-display); font-weight: 800; font-style: normal; }
.hero-copy .lead { font-size: var(--step-1); color: var(--ink-2); max-width: 52ch; }
.hero-meta {
	display: flex; flex-wrap: wrap; gap: var(--space-md);
	margin-top: var(--space-md);
	color: var(--ink-3);
}
.hero-meta div { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.hero-meta i { color: var(--gold); }

.hero-visual {
	position: relative;
	aspect-ratio: 4/5;
	border-radius: 26px;
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	transform: translateZ(0);
}
.hero-visual img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 1.6s var(--ease-out);
}
.hero-visual:hover img { transform: scale(1.04); }
.hero-visual video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 1.6s var(--ease-out);
}
.hero-visual:hover video { transform: scale(1.04); }
.hero-visual::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 60%, rgba(27,19,13,.35));
	pointer-events: none;
}
.hero-badge {
	position: absolute; bottom: 1.4rem; right: 1.4rem;
	display: flex; align-items: center; gap: .8rem;
	background: rgba(247,239,225,.94);
	backdrop-filter: blur(10px);
	border-radius: 16px;
	padding: .7rem .9rem;
	box-shadow: var(--shadow-md);
}
.hero-badge .swatch {
	width: 38px; height: 38px; border-radius: 999px;
	background:
		radial-gradient(circle at 50% 50%, #1b130d 0 22%, var(--accent) 22% 38%, var(--gold-2) 38% 60%, var(--cream) 60% 100%);
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
}
.hero-badge strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: .95rem; }
.hero-badge small { color: var(--ink-3); font-size: .78rem; }

.video-pill {
	position: absolute;
	top: 1.2rem;
	left: 1.2rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .45rem .75rem;
	border-radius: var(--radius-pill);
	background: rgba(27, 19, 13, .68);
	color: #fff;
	backdrop-filter: blur(10px);
	font-size: .78rem;
	font-weight: 700;
	box-shadow: 0 12px 28px rgba(0,0,0,.22);
}
.video-pill i { color: var(--gold-2); }

/* hero color rail */
.hero-rail {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-2xs);
	margin-top: var(--space-md);
}
@media (min-width: 560px) { .hero-rail { grid-template-columns: repeat(4, 1fr); } }
.hero-rail-card {
	background: rgba(255,255,255,.7);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255,255,255,.6);
	border-radius: 14px;
	padding: .65rem .55rem .8rem;
	text-align: center;
	box-shadow: 0 8px 22px rgba(35,20,10,.08);
	transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.hero-rail-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.hero-rail-card .lens-disc {
	width: 46px; height: 46px; border-radius: 999px;
	margin: 0 auto .35rem;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
}
.hero-rail-card strong { display: block; font-family: var(--font-display); font-size: .85rem; letter-spacing: .04em; }
.hero-rail-card small { color: var(--ink-3); font-size: .72rem; }

/* ---------- Marquee strip ---------- */
.bahra-strip {
	background: var(--ink);
	color: var(--cream);
	overflow: hidden;
	padding: 1rem 0;
	border-block: 1px solid rgba(255,255,255,.06);
}
.bahra-strip-track {
	display: flex; gap: 2.5rem;
	animation: scroll 36s linear infinite;
	white-space: nowrap;
}
.bahra-strip span {
	display: inline-flex; align-items: center; gap: .55rem;
	font-family: var(--font-display); font-weight: 600; font-size: .95rem;
}
.bahra-strip span i { color: var(--gold-2); }
.bahra-strip .dot { width: 4px; height: 4px; background: var(--gold); border-radius: 999px; align-self: center; }
@keyframes scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ---------- Color cards (HAZEL / BROWN / GRAY ...) ---------- */
.color-grid {
	display: grid;
	gap: var(--space-md);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
}
.color-card {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--ink);
	color: #fff;
	box-shadow: var(--shadow-md);
	aspect-ratio: 3/4;
	transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.color-card img {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 1.2s var(--ease-out), filter var(--dur-2) var(--ease-out);
}
.color-card::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 35%, rgba(15,10,7,.85) 100%);
}
.color-card .overlay {
	position: absolute; inset: auto 0 0 0;
	z-index: 2;
	padding: 1rem 1.1rem 1.2rem;
	display: flex; align-items: end; justify-content: space-between; gap: .7rem;
}
.color-card .overlay .meta strong {
	display: block; font-family: var(--font-display); font-size: 1.15rem;
	letter-spacing: .06em;
	text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.color-card .overlay .meta small {
	display: block; color: rgba(255,255,255,.85); font-size: .85rem;
	margin-top: .15rem;
}
.color-card .lens-disc {
	width: 44px; height: 44px; border-radius: 999px;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), 0 6px 18px rgba(0,0,0,.4);
	flex: 0 0 auto;
}
.color-card .corner-badge {
	position: absolute; top: 1rem; right: 1rem; z-index: 2;
	background: var(--gold);
	color: var(--ink);
	font-family: var(--font-display); font-weight: 700;
	font-size: .72rem;
	padding: .25rem .55rem;
	border-radius: var(--radius-pill);
	letter-spacing: .04em;
}
.color-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.color-card:hover img { transform: scale(1.08); filter: saturate(1.05); }
.color-card a.cover { position: absolute; inset: 0; z-index: 3; }

/* ---------- Featured collection panel ---------- */
.feature-panel {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
	background: linear-gradient(135deg, var(--cream-2), var(--cream));
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: var(--space-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	position: relative;
}
.feature-panel::before {
	content: "";
	position: absolute; top: -120px; left: -100px;
	width: 320px; height: 320px;
	background: radial-gradient(circle, rgba(200,163,100,.35), transparent 70%);
}
@media (min-width: 800px) {
	.feature-panel { grid-template-columns: 1fr 1fr; align-items: center; padding: var(--space-xl); }
}
.feature-panel .visual {
	aspect-ratio: 4/5; border-radius: var(--radius); overflow: hidden;
	box-shadow: var(--shadow-md);
}
.feature-panel .visual img { width: 100%; height: 100%; object-fit: cover; }
.feature-panel .copy h2 { margin-bottom: .6rem; }
.feature-panel .copy .price { font-family: var(--font-display); color: var(--accent); font-weight: 800; font-size: 1.25rem; }

/* ---------- Card grid (lens products) ---------- */
.lens-grid {
	display: grid;
	gap: var(--space-md);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.lens-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	display: flex; flex-direction: column;
	box-shadow: var(--shadow-sm);
	transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.lens-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.lens-card .media {
	aspect-ratio: 4/5;
	position: relative;
	overflow: hidden;
	background: var(--cream-2);
}
.lens-card .media img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 1.4s var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.lens-card .media .alt { position: absolute; inset: 0; opacity: 0; }
.lens-card:hover .media .alt { opacity: 1; }
.lens-card:hover .media img.primary { transform: scale(1.05); }
.lens-card .badge {
	position: absolute; top: .8rem; right: .8rem;
	background: rgba(247,239,225,.92);
	backdrop-filter: blur(8px);
	color: var(--ink);
	font-family: var(--font-display); font-weight: 700; font-size: .72rem;
	padding: .25rem .55rem; border-radius: var(--radius-pill);
	letter-spacing: .03em;
}
.lens-card .body {
	padding: 1rem 1.1rem 1.2rem;
	display: flex; flex-direction: column; gap: .35rem;
}
.lens-card .body h3 {
	margin: 0; font-size: 1.1rem;
	display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.lens-card .body .latin { color: var(--ink-3); font-family: var(--font-display); font-size: .8rem; letter-spacing: .12em; }
.lens-card .body p { margin: 0; color: var(--ink-3); font-size: .92rem; }
.lens-card .body .meta-row {
	display: flex; align-items: center; justify-content: space-between;
	margin-top: .5rem;
}
.lens-card .swatch-row { display: flex; gap: .35rem; }
.lens-card .swatch-row span {
	width: 14px; height: 14px; border-radius: 999px;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
}
.lens-card .price { font-family: var(--font-display); font-weight: 800; color: var(--accent); }
.lens-card .actions {
	display: flex; gap: .5rem; margin-top: .8rem;
}
.lens-card .actions .btn { flex: 1; padding: .55rem 1rem; font-size: .85rem; }

/* ---------- Collections cards ---------- */
.collection-grid {
	display: grid;
	gap: var(--space-md);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
.collection-card {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	aspect-ratio: 4/5;
	color: #fff;
	box-shadow: var(--shadow-md);
	background: var(--ink);
	transition: transform var(--dur-2) var(--ease-out);
}
.collection-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.collection-card::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(15,10,7,.78) 90%);
}
.collection-card:hover { transform: translateY(-4px); }
.collection-card:hover img { transform: scale(1.07); }
.collection-card .body {
	position: absolute; inset: auto 0 0 0; z-index: 2;
	padding: 1.2rem 1.4rem 1.6rem;
}
.collection-card .body small { color: var(--gold-2); letter-spacing: .2em; text-transform: uppercase; font-size: .7rem; font-family: var(--font-display); }
.collection-card .body h3 { color: #fff; margin: .35rem 0 .25rem; font-size: 1.5rem; }
.collection-card .body p { color: rgba(255,255,255,.8); font-size: .9rem; margin: 0 0 .9rem; }
.collection-card .body .more {
	display: inline-flex; align-items: center; gap: .35rem;
	color: var(--gold-2);
	font-family: var(--font-display); font-weight: 700; font-size: .9rem;
}
.collection-card .body .more i { transition: transform var(--dur-2) var(--ease-out); }
.collection-card:hover .body .more i { transform: translateX(-4px); }
.collection-card a.cover { position: absolute; inset: 0; z-index: 3; }

/* ---------- Behind the scenes / lifestyle gallery ---------- */
.bts-section {
	background: var(--ink);
	color: var(--cream);
	padding: var(--space-2xl) var(--page-pad);
}
.bts-section h2 { color: #fff; }
.bts-section .lead { color: rgba(255,255,255,.75); }
.bts-grid {
	display: grid;
	gap: var(--space-2xs);
	grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 760px) { .bts-grid { grid-template-columns: repeat(4, 1fr); } }
.bts-tile {
	position: relative; overflow: hidden; border-radius: 16px;
	aspect-ratio: 3/4;
	box-shadow: var(--shadow-md);
}
.bts-tile.tall  { aspect-ratio: 3/5; }
.bts-tile.wide  { aspect-ratio: 4/3; grid-column: span 2; }
.bts-tile img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 1.6s var(--ease-out), filter var(--dur-2) var(--ease-out);
	filter: brightness(0.94);
}
.bts-tile:hover img { transform: scale(1.06); filter: brightness(1); }

/* ---------- Cinematic video blocks ---------- */
.cinema-section {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(60% 80% at 85% 10%, rgba(200,163,100,.18), transparent 70%),
		linear-gradient(135deg, #140e09, var(--ink));
	color: var(--cream);
	padding: var(--space-2xl) var(--page-pad);
}
.cinema-section h2 { color: #fff; }
.cinema-section .lead { color: rgba(255,255,255,.76); }
.cinema-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
	align-items: center;
	max-width: var(--max-w);
	margin: 0 auto;
}
@media (min-width: 900px) {
	.cinema-grid { grid-template-columns: 1fr 1.05fr; gap: var(--space-xl); }
}
.cinema-video {
	position: relative;
	overflow: hidden;
	border-radius: 30px;
	background: #000;
	box-shadow: 0 40px 100px rgba(0,0,0,.42);
	border: 1px solid rgba(255,255,255,.12);
}
.cinema-video::before {
	content: "";
	position: absolute;
	inset: 1rem;
	border: 1px solid rgba(255,255,255,.18);
	border-radius: 22px;
	pointer-events: none;
	z-index: 2;
}
.cinema-video video {
	width: 100%;
	aspect-ratio: 16/9;
	object-fit: cover;
	display: block;
}
.cinema-video.portrait video { aspect-ratio: 4/5; }
.cinema-caption {
	position: absolute;
	right: 1.4rem;
	bottom: 1.4rem;
	left: 1.4rem;
	z-index: 3;
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 1rem;
	color: #fff;
}
.cinema-caption strong {
	display: block;
	font-size: 1rem;
	text-shadow: 0 3px 16px rgba(0,0,0,.65);
}
.cinema-caption span {
	color: rgba(255,255,255,.78);
	font-size: .82rem;
}
.video-mini-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-2xs);
	margin-top: var(--space-md);
}
.video-mini {
	position: relative;
	overflow: hidden;
	border-radius: 18px;
	background: #000;
	box-shadow: var(--shadow-md);
}
.video-mini video {
	width: 100%;
	aspect-ratio: 3/4;
	object-fit: cover;
	display: block;
	filter: saturate(1.05);
}
.video-mini::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.45));
	pointer-events: none;
}

/* ---------- Story / spotlight blocks ---------- */
.spotlight-block {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
	align-items: center;
	max-width: var(--max-w);
	margin: 0 auto;
}
@media (min-width: 880px) {
	.spotlight-block { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
	.spotlight-block.reverse > .visual { order: 2; }
}
.spotlight-block .visual {
	aspect-ratio: 4/5; border-radius: var(--radius); overflow: hidden;
	box-shadow: var(--shadow-md);
}
.spotlight-block .visual img { width: 100%; height: 100%; object-fit: cover; }
.spotlight-block h2 { margin-bottom: var(--space-2xs); }
.spotlight-block .copy p { color: var(--ink-2); font-size: var(--step-0); line-height: 1.85; }

/* ---------- Why bahra (icons) ---------- */
.feature-row {
	display: grid;
	gap: var(--space-md);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.feature-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: var(--space-md);
	box-shadow: var(--shadow-sm);
	transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.feature-card .icon {
	width: 56px; height: 56px; border-radius: 16px;
	display: grid; place-items: center;
	background: linear-gradient(135deg, var(--gold-soft), var(--gold-2));
	color: var(--ink); font-size: 1.4rem;
	margin-bottom: .9rem;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
.feature-card h3 { margin: 0 0 .4rem; font-size: 1.15rem; }
.feature-card p { margin: 0; color: var(--ink-3); font-size: .95rem; }

/* ---------- Forms ---------- */
.bahra-form {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: var(--space-md);
	box-shadow: var(--shadow-sm);
	max-width: 700px; margin: 0 auto;
}
.bahra-form .fields {
	display: grid; gap: 1rem;
	grid-template-columns: 1fr 1fr;
}
.bahra-form .field.full { grid-column: 1 / -1; }
@media (max-width: 640px) { .bahra-form .fields { grid-template-columns: 1fr; } }
.bahra-form label {
	display: block; font-weight: 700; margin-bottom: .35rem; color: var(--ink-2);
	font-size: .92rem;
}
.bahra-form input, .bahra-form textarea, .bahra-form select {
	width: 100%; padding: .8rem .9rem;
	background: var(--cream);
	border: 1px solid var(--line);
	border-radius: 12px;
	font-size: 1rem;
	color: var(--ink);
	transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.bahra-form input:focus, .bahra-form textarea:focus, .bahra-form select:focus {
	outline: none;
	border-color: var(--gold);
	box-shadow: 0 0 0 4px rgba(200,163,100,.18);
}
.bahra-form textarea { resize: vertical; min-height: 110px; }
.bahra-form .submit-row { margin-top: 1.2rem; display: flex; justify-content: center; }
.bahra-form input[type="submit"] {
	width: auto;
	background: var(--ink);
	color: var(--cream);
	border-radius: var(--radius-pill);
	padding: .9rem 2rem;
	font-family: var(--font-display); font-weight: 700;
	cursor: pointer;
}

/* ---------- Steps ---------- */
.steps {
	display: grid;
	gap: var(--space-md);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	counter-reset: bahra-step;
}
.step {
	counter-increment: bahra-step;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 2rem 1.4rem 1.4rem;
	position: relative;
	box-shadow: var(--shadow-sm);
}
.step::before {
	content: counter(bahra-step);
	position: absolute; top: -22px; right: 22px;
	width: 46px; height: 46px;
	border-radius: 999px;
	background: var(--ink);
	color: var(--gold);
	display: grid; place-items: center;
	font-family: var(--font-display); font-weight: 800; font-size: 1.15rem;
	box-shadow: var(--shadow-md);
}
.step h3 { margin: .25rem 0 .4rem; font-size: 1.1rem; }
.step p { margin: 0; color: var(--ink-3); font-size: .95rem; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 880px; margin: 0 auto; }
.faq-item {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1.1rem 1.4rem;
	margin-bottom: .9rem;
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--dur-2) var(--ease-out);
}
.faq-item[open] { box-shadow: var(--shadow-md); }
.faq-item summary {
	cursor: pointer;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.05rem;
	display: flex; justify-content: space-between; align-items: center;
	gap: 1rem;
	list-style: none;
	padding: .35rem 0;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
	content: "+";
	width: 32px; height: 32px;
	border-radius: 999px;
	background: var(--cream);
	color: var(--accent);
	display: grid; place-items: center;
	font-weight: 700; font-size: 1.1rem;
	transition: transform var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
	flex: 0 0 auto;
}
.faq-item[open] summary::after { transform: rotate(45deg); background: var(--gold); color: var(--ink); }
.faq-item p { margin: .6rem 0 0; color: var(--ink-3); }

/* ---------- Page hero ---------- */
.page-hero {
	background:
		radial-gradient(60% 80% at 80% 0%, var(--cream-2), transparent 70%),
		linear-gradient(135deg, var(--cream-2), var(--cream));
	padding: var(--space-2xl) var(--page-pad) var(--space-lg);
	text-align: center;
}
.page-hero .crumb {
	display: inline-flex; align-items: center; gap: .5rem;
	color: var(--ink-3); font-size: .9rem; margin-bottom: .8rem;
}
.page-hero .crumb a { color: var(--ink-3); }
.page-hero .crumb a:hover { color: var(--accent); }
.page-hero h1 { margin: 0; font-size: clamp(2.2rem, 1.5rem + 3vw, 3.6rem); }
.page-hero p { color: var(--ink-2); max-width: 60ch; margin: 1rem auto 0; font-size: var(--step-1); }

/* ---------- Color swatches page ---------- */
.swatch-grid {
	display: grid;
	gap: var(--space-md);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}
.swatch-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1rem;
	text-align: center;
	box-shadow: var(--shadow-sm);
	transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.swatch-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.swatch-card .lens-disc {
	width: 100%;
	aspect-ratio: 1/1;
	border-radius: 999px;
	margin-bottom: .8rem;
	box-shadow: inset 0 0 0 2px rgba(0,0,0,.1), 0 6px 18px rgba(0,0,0,.1);
}
.swatch-card h3 { margin: 0 0 .15rem; font-size: 1.05rem; }
.swatch-card small { color: var(--ink-3); font-size: .85rem; letter-spacing: .04em; }

/* lens-disc — realistic iris built from layered gradients.
   Each color sets four custom properties; structure is reusable. */
.lens-disc {
	position: relative;
	background-color: var(--c-mid, #5e3f23);
	background-image:
		/* glossy catchlight (upper-left) */
		radial-gradient(ellipse 28% 22% at 28% 20%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
		/* limbal ring */
		radial-gradient(circle, transparent 0 78%, rgba(0,0,0,.55) 86% 96%, rgba(0,0,0,.35) 100%),
		/* iris body — uses CSS vars per color */
		radial-gradient(circle at 50% 50%,
			#08050300 0 12%,
			var(--c-deep,  #1a1108) 14% 24%,
			var(--c-mid,   #5e3f23) 24% 46%,
			var(--c-light, #a8784a) 46% 70%,
			var(--c-glow,  #e2c290) 86% 100%
		),
		/* pupil center */
		radial-gradient(circle at 50% 50%, #0a0604 0 14%, transparent 14.5%);
	background-blend-mode: screen, normal, normal, normal;
	box-shadow:
		inset 0 0 0 1px rgba(0,0,0,.18),
		inset 0 -2px 6px rgba(0,0,0,.12),
		inset 0 2px 4px rgba(255,255,255,.08);
}
.lens-disc[data-color="shafaq"]  { --c-deep: #1a120a; --c-mid: #553d28; --c-light: #946a3e; --c-glow: #d2b283; }
.lens-disc[data-color="ghasaq"]  { --c-deep: #131517; --c-mid: #3a4d5b; --c-light: #6a8a9a; --c-glow: #c2cfd6; }
.lens-disc[data-color="bahra"]   { --c-deep: #1d2110; --c-mid: #525724; --c-light: #94994a; --c-glow: #dadc94; }
.lens-disc[data-color="sahara"]  { --c-deep: #1a1108; --c-mid: #553a1f; --c-light: #98774e; --c-glow: #d3b88c; }

/* ---------- Product detail ---------- */
.product-layout {
	display: grid; gap: var(--space-lg);
	grid-template-columns: 1fr;
	max-width: var(--max-w); margin: 0 auto;
}
@media (min-width: 880px) {
	.product-layout { grid-template-columns: 1.05fr 1fr; gap: var(--space-xl); }
}
.product-gallery {
	display: grid;
	gap: var(--space-2xs);
	grid-template-columns: 1fr 1fr;
}
.product-gallery img {
	width: 100%; aspect-ratio: 1/1; object-fit: cover;
	border-radius: var(--radius);
	background: var(--cream-2);
	box-shadow: var(--shadow-sm);
}
.product-gallery img:first-child { grid-column: 1 / -1; aspect-ratio: 4/3; }
.product-info h1 { margin-top: 0; }
.product-info .latin {
	font-family: var(--font-display);
	letter-spacing: .25em;
	color: var(--accent);
	margin: 0 0 .4rem;
}
.product-info .price-large {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.65rem;
	color: var(--accent);
	margin: .4rem 0 1rem;
}
.product-info .features { list-style: none; padding: 0; margin: 1.2rem 0; display: grid; gap: .5rem; }
.product-info .features li { display: flex; gap: .5rem; align-items: flex-start; color: var(--ink-2); }
.product-info .features li::before {
	content: "\f00c";
	font-family: 'Font Awesome 5 Free'; font-weight: 900;
	color: #1f8b4e; flex: 0 0 auto;
}
.product-info .options { margin: 1.2rem 0; }
.product-info .options label { display: block; font-weight: 700; margin-bottom: .5rem; }
.swatch-row { display: flex; gap: .55rem; flex-wrap: wrap; }
.swatch-row button {
	width: 42px; height: 42px; border-radius: 999px;
	border: 2px solid transparent;
	cursor: pointer;
	background-clip: padding-box;
	transition: transform var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.swatch-row button.active { border-color: var(--ink); transform: scale(1.06); }

/* ---------- Policies ---------- */
.policies article {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1.6rem 1.6rem 1.4rem;
	margin-bottom: 1.2rem;
	box-shadow: var(--shadow-sm);
}
.policies article h3 { margin-top: 0; }
.policies article ul { padding-inline-start: 1.2rem; list-style: disc; color: var(--ink-2); }
.policies article ul li { margin-bottom: .4rem; }

/* ---------- WhatsApp floating button ---------- */
.bahra-whatsapp {
	position: fixed;
	bottom: clamp(1rem, 2vw, 1.6rem);
	left: clamp(1rem, 2vw, 1.6rem);
	z-index: 60;
	width: 58px; height: 58px;
	border-radius: 999px;
	background: #25d366;
	color: #fff !important;
	display: grid; place-items: center;
	font-size: 1.6rem;
	box-shadow: 0 18px 40px rgba(37,211,102,.4), 0 6px 14px rgba(0,0,0,.18);
	transition: transform var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.bahra-whatsapp::before {
	content: "";
	position: absolute; inset: -4px;
	border-radius: 999px;
	background: rgba(37,211,102,.45);
	animation: pulse 1.8s ease-out infinite;
	z-index: -1;
}
@keyframes pulse {
	0%   { transform: scale(0.95); opacity: .8; }
	100% { transform: scale(1.5); opacity: 0; }
}
.bahra-whatsapp:hover { transform: translateY(-3px) scale(1.05); background: #128c7e; }

/* ---------- Footer ---------- */
.bahra-footer {
	background: var(--ink);
	color: var(--cream);
	padding: var(--space-2xl) var(--page-pad) var(--space-md);
	margin-top: var(--space-xl);
}
.bahra-footer-grid {
	display: grid; gap: var(--space-lg);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	max-width: var(--max-w); margin: 0 auto;
}
.bahra-footer h4 {
	color: #fff;
	font-family: var(--font-display);
	margin: 0 0 1rem;
	font-size: 1.05rem;
	letter-spacing: .04em;
}
.bahra-footer .brand-block img { height: 60px; margin-bottom: .8rem; filter: brightness(0) invert(1) sepia(.4); }
.bahra-footer p { color: rgba(255,255,255,.75); margin: 0 0 .8rem; font-size: .95rem; }
.bahra-footer ul li { margin-bottom: .5rem; }
.bahra-footer a { color: rgba(255,255,255,.85); }
.bahra-footer a:hover { color: var(--gold-2); }

.bahra-socials { display: flex; gap: .7rem; }
.bahra-socials a {
	width: 42px; height: 42px;
	border-radius: 999px;
	background: rgba(255,255,255,.07);
	border: 1px solid rgba(255,255,255,.15);
	display: grid; place-items: center;
	transition: background var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.bahra-socials a:hover { background: var(--gold); color: var(--ink); transform: translateY(-2px); }

.bahra-footer-bottom {
	max-width: var(--max-w); margin: var(--space-lg) auto 0;
	border-top: 1px solid rgba(255,255,255,.1);
	padding-top: 1.2rem;
	display: flex; flex-wrap: wrap; gap: 1rem;
	justify-content: space-between; align-items: center;
	color: rgba(255,255,255,.5); font-size: .88rem;
}

/* ---------- Reveal animations ---------- */
[data-reveal] {
	opacity: 0;
	transform: translateY(1.4rem);
	transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
	transition-delay: calc(var(--reveal-delay, 0) * 1ms);
}
[data-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ---------- Print ---------- */
@media print {
	.bahra-header, .bahra-footer, .bahra-strip, .bahra-whatsapp, .bahra-promo { display: none; }
}

/* ============================================================
   BAHRA · PREMIUM ENHANCEMENT LAYER
   Adds cinematic hero, lookbook, stats, and refined mobile UX.
   ============================================================ */

/* ---------- Scroll progress indicator ---------- */
.bahra-progress {
	position: fixed;
	top: 0; right: 0; left: 0;
	height: 3px;
	z-index: 100;
	background: transparent;
	pointer-events: none;
}
.bahra-progress > span {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--accent), var(--gold), var(--gold-2));
	box-shadow: 0 0 12px rgba(200,163,100,.55);
	transition: width 80ms linear;
	transform-origin: 0 50%;
}

/* ---------- Header: shrink on scroll ---------- */
.bahra-header { transition: padding var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.bahra-header.is-scrolled {
	padding-block: .5rem;
	background: rgba(247, 239, 225, 0.94);
	box-shadow: 0 8px 28px rgba(35,20,10,.08);
}
.bahra-header.is-scrolled .bahra-brand img { height: 44px; transition: height var(--dur-2) var(--ease-out); }
.bahra-brand img { transition: height var(--dur-2) var(--ease-out); }

/* ---------- Mobile menu (drawer style) ---------- */
.bahra-menu-toggle .lines {
	width: 22px; height: 14px;
	display: inline-grid;
	grid-template-rows: repeat(3, 2px);
	gap: 4px;
}
.bahra-menu-toggle .lines i {
	display: block;
	height: 2px;
	background: var(--ink);
	border-radius: 2px;
	transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.bahra-menu-toggle[aria-expanded="true"] .lines i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.bahra-menu-toggle[aria-expanded="true"] .lines i:nth-child(2) { opacity: 0; }
.bahra-menu-toggle[aria-expanded="true"] .lines i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 980px) {
	body.menu-open { overflow: hidden; }
	.bahra-menu-toggle {
		min-height: 44px; min-width: 44px;
		justify-content: center;
	}
	.bahra-nav {
		position: fixed;
		inset: 0 0 0 0;
		top: 0;
		max-height: none;
		height: 100dvh;
		background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
		z-index: 90;
		padding: clamp(4.5rem, 14vw, 6rem) clamp(1.5rem, 6vw, 3rem) 2rem !important;
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform var(--dur-3) var(--ease-out);
	}
	.bahra-nav.is-open {
		transform: translateX(0);
		max-height: none;
	}
	.bahra-nav a {
		font-size: 1.25rem;
		padding: 1rem .25rem !important;
		border-bottom: 1px solid var(--line) !important;
		opacity: 0;
		transform: translateX(20px);
		transition: opacity .35s var(--ease-out), transform .35s var(--ease-out), color var(--dur-1) var(--ease-out);
	}
	.bahra-nav.is-open a {
		opacity: 1;
		transform: translateX(0);
	}
	.bahra-nav.is-open a:nth-child(1) { transition-delay: .08s; }
	.bahra-nav.is-open a:nth-child(2) { transition-delay: .14s; }
	.bahra-nav.is-open a:nth-child(3) { transition-delay: .20s; }
	.bahra-nav.is-open a:nth-child(4) { transition-delay: .26s; }
	.bahra-nav.is-open a:nth-child(5) { transition-delay: .32s; }
	.bahra-nav.is-open a:nth-child(6) { transition-delay: .38s; }
	.bahra-nav.is-open a:nth-child(7) { transition-delay: .44s; }
	.bahra-nav.is-open a:nth-child(8) { transition-delay: .50s; }
	.bahra-nav .menu-foot {
		display: flex;
		flex-direction: column;
		gap: .8rem;
		margin-top: 1.5rem;
		opacity: 0;
		transform: translateY(8px);
		transition: opacity .4s .55s var(--ease-out), transform .4s .55s var(--ease-out);
	}
	.bahra-nav.is-open .menu-foot {
		opacity: 1;
		transform: translateY(0);
	}
	.bahra-nav .menu-foot .btn { justify-content: center; }
	.bahra-nav .menu-socials { display: flex; gap: .6rem; justify-content: center; padding-top: .4rem; }
	.bahra-nav .menu-socials a {
		width: 44px; height: 44px;
		border-radius: 999px;
		display: grid; place-items: center;
		background: var(--ink);
		color: var(--cream);
		border: 0;
		transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
	}
	.bahra-nav .menu-socials a:hover { background: var(--gold); color: var(--ink); transform: translateY(-2px); }
	.bahra-cta { display: none; }
}
.bahra-nav .menu-foot { display: none; }
@media (max-width: 980px) { .bahra-nav .menu-foot { display: flex; } }

/* ============================================================
   HERO · CINEMA MODE — full-bleed background image with
   layered text overlay, ken-burns motion, gold particles.
   ============================================================ */
.hero {
	position: relative;
	min-height: 100dvh;
	overflow: hidden;
	isolation: isolate;
	color: #fff;
	background: #0d0905;
	display: grid;
	padding: 0;
}

/* full-bleed image background */
.hero .hero-bg {
	position: absolute;
	inset: 0;
	z-index: -3;
	overflow: hidden;
}
.hero .hero-bg picture { display: block; height: 100%; }
.hero .hero-bg img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center 28%;
	transform-origin: 60% 32%;
	animation: ken-burns 22s ease-in-out infinite alternate;
	will-change: transform;
}
@media (max-width: 720px) {
	.hero .hero-bg img { object-position: center 24%; animation-duration: 16s; }
}
@keyframes ken-burns {
	0%   { transform: scale(1.04) translate(0, 0); }
	100% { transform: scale(1.14) translate(-1.5%, 1%); }
}

/* legibility veil */
.hero .hero-veil {
	position: absolute; inset: 0; z-index: -2;
	background:
		linear-gradient(110deg, rgba(10,6,3,.78) 0%, rgba(10,6,3,.45) 35%, rgba(10,6,3,0) 60%),
		linear-gradient(0deg,   rgba(10,6,3,.55) 0%, rgba(10,6,3,0) 45%);
}
@media (max-width: 880px) {
	.hero .hero-veil {
		background:
			linear-gradient(0deg, rgba(10,6,3,.92) 0%, rgba(10,6,3,.55) 35%, rgba(10,6,3,.05) 70%, rgba(10,6,3,0) 100%);
	}
}

/* gold particle field */
.hero .hero-particles {
	position: absolute; inset: 0; z-index: -1;
	pointer-events: none;
	overflow: hidden;
}
.hero .hero-particles span {
	position: absolute;
	bottom: -4vh;
	width: 4px; height: 4px;
	border-radius: 999px;
	background: rgba(255,213,154,.95);
	box-shadow: 0 0 10px rgba(255,213,154,.7);
	opacity: 0;
	animation: particle-rise linear infinite;
	will-change: transform, opacity;
}
@keyframes particle-rise {
	0%   { transform: translate3d(0, 0, 0) scale(0); opacity: 0; }
	8%   { opacity: 1; }
	92%  { opacity: 1; }
	100% { transform: translate3d(8vw, -110vh, 0) scale(1); opacity: 0; }
}
.hero .hero-particles span:nth-child(1)  { left:  4%; animation-duration: 14s; animation-delay: -1s; }
.hero .hero-particles span:nth-child(2)  { left: 11%; animation-duration: 19s; animation-delay: -3s; width:3px; height:3px; }
.hero .hero-particles span:nth-child(3)  { left: 18%; animation-duration: 16s; animation-delay: -7s; }
.hero .hero-particles span:nth-child(4)  { left: 25%; animation-duration: 22s; animation-delay: -2s; width:5px; height:5px; }
.hero .hero-particles span:nth-child(5)  { left: 33%; animation-duration: 17s; animation-delay: -5s; width:3px; height:3px; }
.hero .hero-particles span:nth-child(6)  { left: 41%; animation-duration: 21s; animation-delay: -8s; }
.hero .hero-particles span:nth-child(7)  { left: 49%; animation-duration: 15s; animation-delay: -11s; width:6px; height:6px; }
.hero .hero-particles span:nth-child(8)  { left: 57%; animation-duration: 19s; animation-delay: -4s; width:3px; height:3px; }
.hero .hero-particles span:nth-child(9)  { left: 65%; animation-duration: 23s; animation-delay: -10s; }
.hero .hero-particles span:nth-child(10) { left: 73%; animation-duration: 18s; animation-delay: -6s; width:4px; height:4px; }
.hero .hero-particles span:nth-child(11) { left: 81%; animation-duration: 14s; animation-delay: -9s; width:3px; height:3px; }
.hero .hero-particles span:nth-child(12) { left: 89%; animation-duration: 24s; animation-delay: -14s; width:5px; height:5px; }
.hero .hero-particles span:nth-child(13) { left: 95%; animation-duration: 20s; animation-delay: -12s; }
.hero .hero-particles span:nth-child(14) { left: 14%; animation-duration: 17s; animation-delay: -15s; width:3px; height:3px; }
.hero .hero-particles span:nth-child(15) { left: 38%; animation-duration: 26s; animation-delay: -18s; width:5px; height:5px; }

/* content container */
.hero .hero-content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--max-w);
	margin: 0 auto;
	padding: clamp(6rem, 14vh, 9rem) var(--page-pad) clamp(3.5rem, 8vh, 5rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-md);
}

.hero-card {
	max-width: 620px;
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}
.hero-card .eyebrow {
	color: var(--gold-2);
	letter-spacing: .26em;
	font-size: .78rem;
	font-weight: 700;
	margin-bottom: 0;
	opacity: 0;
	transform: translateY(8px);
	animation: card-fade .7s var(--ease-out) .15s forwards;
}
.hero-card h1.hero-title {
	font-size: clamp(2.6rem, 1.4rem + 5.5vw, 5.4rem);
	line-height: 1.08;
	letter-spacing: -.015em;
	color: #fff;
	text-shadow: 0 6px 36px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.04);
	margin: 0;
	font-weight: 800;
}
.hero-title .line {
	display: block;
	overflow: hidden;
	padding-block: .04em;
}
.hero-title .word {
	display: inline-block;
	transform: translateY(110%);
	opacity: 0;
	animation: word-rise .9s var(--ease-out) forwards;
}
.hero-title .line:nth-child(1) .word:nth-child(1) { animation-delay: .35s; }
.hero-title .line:nth-child(1) .word:nth-child(2) { animation-delay: .50s; }
.hero-title .line:nth-child(2) .word:nth-child(1) { animation-delay: .70s; }
.hero-title .line:nth-child(2) .word:nth-child(2) { animation-delay: .85s; }
@keyframes word-rise {
	to { transform: translateY(0); opacity: 1; }
}

.hero-card .accent {
	background: linear-gradient(90deg, var(--gold-soft) 0%, var(--gold) 35%, var(--gold-2) 60%, var(--gold) 100%);
	background-size: 250% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	animation: gold-shine 6s ease-in-out infinite;
	filter: drop-shadow(0 0 18px rgba(225,192,137,.35));
}
@keyframes gold-shine {
	0%, 100% { background-position: 0% 50%; }
	50%      { background-position: 100% 50%; }
}

.hero-card .gold-rule {
	display: block;
	width: 96px; height: 2px;
	background: linear-gradient(90deg, var(--gold-2), rgba(225,192,137,0));
	margin: .25rem 0 .5rem;
	transform: scaleX(0);
	transform-origin: 0 50%;
	animation: rule-grow 1s 1.05s var(--ease-out) forwards;
}
@keyframes rule-grow { to { transform: scaleX(1); } }

.hero-card .lead {
	color: rgba(255,255,255,.92);
	font-size: clamp(1rem, .92rem + .35vw, 1.15rem);
	max-width: 50ch;
	text-shadow: 0 2px 16px rgba(0,0,0,.55);
	margin: 0;
	opacity: 0;
	transform: translateY(10px);
	animation: card-fade .8s var(--ease-out) 1s forwards;
}

.hero-card .actions {
	display: flex; gap: var(--space-2xs); flex-wrap: wrap;
	opacity: 0;
	transform: translateY(10px);
	animation: card-fade .8s var(--ease-out) 1.2s forwards;
}

@keyframes card-fade { to { opacity: 1; transform: translateY(0); } }

/* Trust strip below CTAs (over-image) */
.hero-trust {
	margin-top: .5rem;
	padding-top: var(--space-sm);
	border-top: 1px solid rgba(255,255,255,.18);
	display: flex; flex-wrap: wrap;
	gap: var(--space-sm) var(--space-md);
	color: rgba(255,255,255,.88);
	opacity: 0;
	transform: translateY(10px);
	animation: card-fade .8s var(--ease-out) 1.35s forwards;
}
.hero-trust span {
	display: inline-flex; align-items: center; gap: .5rem;
	font-size: .92rem;
}
.hero-trust i { color: var(--gold-2); }

/* hero rail (color cards) over the image */
.hero-rail {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-2xs);
	margin: 0;
	max-width: 620px;
	padding: 0;
	border: 0;
	opacity: 0;
	transform: translateY(10px);
	animation: card-fade .8s var(--ease-out) 1.55s forwards;
}
@media (min-width: 560px) { .hero-rail { grid-template-columns: repeat(4, 1fr); } }
.hero-rail-card {
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.18);
	color: #fff;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 14px;
	padding: .65rem .55rem .8rem;
	text-align: center;
	transition: background var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.hero-rail-card:hover {
	background: rgba(255,255,255,.16);
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(0,0,0,.32);
}
.hero-rail-card .lens-disc {
	width: 42px; height: 42px;
	border-radius: 999px;
	margin: 0 auto .35rem;
	transition: transform var(--dur-2) var(--ease-out);
	animation: subtle-breath 5s ease-in-out infinite;
}
.hero-rail-card:hover .lens-disc { transform: scale(1.1); }
.hero-rail-card strong {
	display: block;
	font-family: var(--font-display);
	font-size: .82rem;
	letter-spacing: .04em;
	color: #fff;
}
.hero-rail-card small {
	display: block;
	color: rgba(255,255,255,.7);
	font-size: .72rem;
}

/* breathing animation reused */
@keyframes subtle-breath {
	0%, 100% { transform: scale(1); filter: brightness(1); }
	50%      { transform: scale(1.06); filter: brightness(1.05); }
}

/* scroll indicator */
.hero-scroll {
	position: absolute;
	bottom: 1.4rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	width: 26px; height: 42px;
	border: 2px solid rgba(255,255,255,.5);
	border-radius: 999px;
	display: grid;
	place-items: start center;
	padding-top: 6px;
	opacity: 0;
	animation: card-fade .8s var(--ease-out) 1.8s forwards;
	transition: border-color var(--dur-2) var(--ease-out);
}
.hero-scroll:hover { border-color: var(--gold-2); }
.hero-scroll::after {
	content: "";
	display: block;
	width: 4px; height: 8px;
	background: var(--gold-2);
	border-radius: 999px;
	animation: scroll-dot 1.6s ease-in-out infinite;
}
@keyframes scroll-dot {
	0%   { transform: translateY(0); opacity: 1; }
	60%  { transform: translateY(14px); opacity: 0; }
	61%  { transform: translateY(0);   opacity: 0; }
	100% { transform: translateY(0);   opacity: 1; }
}

/* mouse parallax (desktop only — subtle text shift) */
.hero { --mx: 0; --my: 0; }
@media (hover: hover) and (pointer: fine) {
	.hero .hero-card {
		transform: translate3d(calc(var(--mx) * 5px), calc(var(--my) * 5px), 0);
		transition: transform .35s var(--ease-out);
	}
	.hero .hero-rail {
		transform: translate3d(calc(var(--mx) * 3px), calc(var(--my) * 3px), 0);
		transition: transform .35s var(--ease-out);
	}
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
	.hero .hero-bg img { animation: none; transform: none; }
	.hero .hero-particles { display: none; }
	.hero-card .eyebrow,
	.hero-card .lead,
	.hero-card .actions,
	.hero-trust,
	.hero-rail,
	.hero-scroll,
	.hero-title .word { animation: none !important; opacity: 1 !important; transform: none !important; }
	.hero-card .gold-rule { animation: none; transform: scaleX(1); }
}

/* Mobile fine-tune */
@media (max-width: 880px) {
	.hero .hero-content {
		padding: clamp(4rem, 11vh, 6rem) var(--page-pad) clamp(2rem, 6vh, 3rem);
		justify-content: flex-end;
	}
	.hero-card { gap: .55rem; }
	.hero-card h1.hero-title {
		font-size: clamp(2.4rem, 1.5rem + 7vw, 3.4rem);
		line-height: 1.12;
	}
	.hero-card .eyebrow { font-size: .68rem; letter-spacing: .22em; }
	.hero-card .lead { font-size: 1rem; max-width: 46ch; }
	.hero-card .actions { gap: .5rem; }
	.hero-card .actions .btn { flex: 1 1 auto; min-height: 48px; padding-block: .8rem; }
	.hero-trust {
		gap: .5rem .9rem;
		font-size: .8rem;
		padding-top: .8rem;
		margin-top: .25rem;
	}
	.hero-trust span { font-size: .8rem; }
	.hero-trust i { font-size: .85rem; }
	.hero-rail-card { padding: .5rem .35rem .65rem; }
	.hero-rail-card .lens-disc { width: 34px; height: 34px; }
	.hero-rail-card strong { font-size: .72rem; }
	.hero-rail-card small { font-size: .66rem; }
	.hero-scroll { display: none; }
}

/* ---------- Trust ribbon (mobile-friendly) ---------- */
.trust-ribbon {
	background: #fff;
	border-block: 1px solid var(--line);
	padding: clamp(1rem, 3vw, 1.4rem) var(--page-pad);
}
.trust-grid {
	max-width: var(--max-w);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(.6rem, 2vw, 1rem);
}
@media (min-width: 720px) {
	.trust-grid { grid-template-columns: repeat(4, 1fr); }
}
.trust-item {
	display: flex;
	align-items: center;
	gap: .65rem;
	padding: .5rem .2rem;
}
.trust-item .ti-icon {
	width: 40px; height: 40px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--gold-soft), var(--gold-2));
	color: var(--ink);
	display: grid; place-items: center;
	flex: 0 0 auto;
	font-size: 1rem;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
.trust-item strong {
	display: block;
	font-family: var(--font-display);
	font-size: .92rem;
	color: var(--ink);
}
.trust-item small {
	display: block;
	color: var(--ink-3);
	font-size: .78rem;
}

/* ---------- Color showcase: mobile-friendly horizontal scroll ---------- */
@media (max-width: 720px) {
	.color-grid {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 78%;
		grid-template-columns: none;
		gap: var(--space-sm);
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-padding: var(--page-pad);
		padding: var(--space-2xs) var(--page-pad) var(--space-md);
		margin: 0 calc(var(--page-pad) * -1) 0;
		scrollbar-width: none;
	}
	.color-grid::-webkit-scrollbar { display: none; }
	.color-grid > .color-card { scroll-snap-align: start; }
}

.color-card {
	transform: translateZ(0);
}
.color-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(60% 50% at 70% 35%, rgba(255,255,255,.18), transparent 65%);
	z-index: 1;
	mix-blend-mode: soft-light;
	pointer-events: none;
}
.color-card .lens-disc {
	animation: subtle-breath 5s ease-in-out infinite;
}
.color-card:hover .lens-disc { animation-duration: 2s; }

/* ---------- Lookbook (editorial gallery) ---------- */
.lookbook-section {
	padding: var(--space-2xl) 0;
	background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
	overflow: hidden;
}
.lookbook-section .lookbook-header {
	max-width: var(--max-w);
	margin: 0 auto var(--space-lg);
	padding: 0 var(--page-pad);
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: var(--space-md);
	flex-wrap: wrap;
}
.lookbook-section .lookbook-header h2 { margin: 0; }
.lookbook-section .lookbook-header p { color: var(--ink-3); margin: .4rem 0 0; max-width: 50ch; }

.lookbook-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: clamp(220px, 30vw, 320px);
	gap: var(--space-sm);
	padding: 0 var(--page-pad) var(--space-md);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--page-pad);
	scrollbar-width: thin;
	scrollbar-color: var(--gold) transparent;
}
.lookbook-track::-webkit-scrollbar { height: 6px; }
.lookbook-track::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 999px; }
.lookbook-track::-webkit-scrollbar-track { background: transparent; }

.lookbook-card {
	position: relative;
	scroll-snap-align: start;
	border-radius: var(--radius);
	overflow: hidden;
	aspect-ratio: 3/4;
	box-shadow: var(--shadow-md);
	color: #fff;
	background: var(--ink);
	transform: translateZ(0);
	transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.lookbook-card img {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 1.6s var(--ease-out), filter var(--dur-2) var(--ease-out);
}
.lookbook-card::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.0) 35%, rgba(15,10,7,.78) 100%);
	pointer-events: none;
}
.lookbook-card .caption {
	position: absolute; inset: auto 0 0 0;
	z-index: 2;
	padding: 1rem 1.2rem 1.2rem;
	display: flex; align-items: end; justify-content: space-between; gap: .5rem;
}
.lookbook-card .caption strong {
	display: block;
	font-family: var(--font-display);
	font-size: 1.05rem;
	letter-spacing: .04em;
}
.lookbook-card .caption small {
	display: block;
	color: rgba(255,255,255,.78);
	font-size: .78rem;
	margin-top: .15rem;
}
.lookbook-card .caption .lens-disc {
	width: 36px; height: 36px;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 6px 18px rgba(0,0,0,.4);
}
.lookbook-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.lookbook-card:hover img { transform: scale(1.06); }
.lookbook-card a.cover { position: absolute; inset: 0; z-index: 3; }

/* ---------- Numbers / stats panel ---------- */
.stats-panel {
	display: grid;
	gap: var(--space-md);
	grid-template-columns: repeat(2, 1fr);
	background: linear-gradient(135deg, var(--ink) 0%, #2a1d12 100%);
	color: var(--cream);
	border-radius: var(--radius);
	padding: var(--space-lg);
	box-shadow: var(--shadow-lg);
	position: relative;
	overflow: hidden;
}
.stats-panel::before {
	content: "";
	position: absolute;
	width: 460px; height: 460px;
	right: -160px; top: -160px;
	background: radial-gradient(circle, rgba(200,163,100,.32), transparent 70%);
	border-radius: 50%;
	pointer-events: none;
}
@media (min-width: 720px) {
	.stats-panel { grid-template-columns: repeat(4, 1fr); padding: var(--space-xl); }
}
.stat-item { position: relative; z-index: 1; text-align: center; }
.stat-item .num {
	display: block;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
	color: var(--gold-2);
	line-height: 1.1;
	letter-spacing: -.01em;
}
.stat-item .label {
	display: block;
	color: rgba(255,255,255,.78);
	font-size: .92rem;
	margin-top: .35rem;
}

/* ---------- Step-by-step (used as how-to teaser) ---------- */
.howto-row {
	display: grid;
	gap: var(--space-md);
	grid-template-columns: 1fr;
}
@media (min-width: 720px) { .howto-row { grid-template-columns: repeat(3, 1fr); } }
.howto-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: var(--space-md);
	box-shadow: var(--shadow-sm);
	position: relative;
	overflow: hidden;
	transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.howto-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.howto-card .num {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 3.4rem;
	color: rgba(200,163,100,.22);
	line-height: 1;
	margin-bottom: .4rem;
	letter-spacing: -.02em;
}
.howto-card h3 { margin: 0 0 .4rem; font-size: 1.1rem; }
.howto-card p { margin: 0; color: var(--ink-3); }
.howto-card .ico {
	position: absolute;
	top: 1rem; left: 1rem;
	color: var(--gold);
	opacity: .85;
	font-size: 1.3rem;
}

/* ---------- Testimonial / quote ---------- */
.quote-block {
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
	padding: var(--space-md);
	position: relative;
}
.quote-block::before {
	content: "\201C";
	font-family: 'Georgia', serif;
	font-size: 6rem;
	color: var(--gold);
	line-height: .8;
	display: block;
	margin-bottom: -.5rem;
}
.quote-block blockquote {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.15rem, .95rem + .9vw, 1.6rem);
	line-height: 1.6;
	color: var(--ink);
	margin: 0 0 .8rem;
}
.quote-block cite {
	font-style: normal;
	color: var(--ink-3);
	font-size: .92rem;
	letter-spacing: .04em;
}

/* drifting orbs animation reused by page-hero */
@keyframes drift-a {
	0%   { transform: translate(0,0) scale(1); }
	100% { transform: translate(60px, 50px) scale(1.08); }
}
@keyframes drift-b {
	0%   { transform: translate(0,0) scale(1); }
	100% { transform: translate(-50px, -40px) scale(1.06); }
}

/* ---------- Page hero polish ---------- */
.page-hero {
	position: relative;
	overflow: hidden;
}
.page-hero::before {
	content: "";
	position: absolute;
	width: 380px; height: 380px;
	right: -120px; top: -150px;
	background: radial-gradient(circle, rgba(200,163,100,.4), transparent 65%);
	filter: blur(24px);
	pointer-events: none;
	animation: drift-a 14s ease-in-out infinite alternate;
}
.page-hero::after {
	content: "";
	position: absolute;
	width: 320px; height: 320px;
	left: -100px; bottom: -120px;
	background: radial-gradient(circle, rgba(168,114,66,.25), transparent 65%);
	filter: blur(24px);
	pointer-events: none;
	animation: drift-b 18s ease-in-out infinite alternate;
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero .crumb a { transition: color var(--dur-1) var(--ease-out); }
.page-hero h1 { background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* ---------- Section dividers (subtle waves) ---------- */
.section-divider {
	height: 64px;
	background:
		radial-gradient(circle at 50% 0, var(--gold) 1px, transparent 2px) 0 0/24px 24px;
	opacity: .35;
	pointer-events: none;
}

/* ---------- Lazy/loaded images: gentle reveal ---------- */
.bts-tile img,
.lookbook-card img,
.lens-card .media img,
.color-card img,
.collection-card img {
	will-change: transform;
}
img[loading="lazy"] {
	opacity: 0;
	transform: scale(1.02);
	transition: opacity .8s var(--ease-out), transform 1.2s var(--ease-out);
}
img[loading="lazy"].is-loaded {
	opacity: 1;
	transform: scale(1);
}

/* ---------- BTS gallery: refined tiling ---------- */
.bts-tile { transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.bts-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* ---------- Cinema video frame: refinements ---------- */
.cinema-video {
	transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.cinema-video:hover {
	transform: translateY(-4px);
	box-shadow: 0 50px 120px rgba(0,0,0,.55);
}

/* ---------- CTA dark band: shimmering border ---------- */
.cta-band {
	position: relative;
	overflow: hidden;
	background: var(--ink);
	color: var(--cream);
	padding: var(--space-2xl) var(--page-pad);
	text-align: center;
}
.cta-band::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(50% 70% at 20% 100%, rgba(200,163,100,.22), transparent 70%),
		radial-gradient(40% 60% at 90% 0%, rgba(168,114,66,.18), transparent 70%);
	pointer-events: none;
}
.cta-band > .inner { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.78); max-width: 60ch; margin: 0 auto var(--space-md); }
.cta-band .actions.center { justify-content: center; }

/* ---------- WhatsApp floating: hide on mobile if bottom CTA visible ---------- */
@media (max-width: 720px) {
	.bahra-whatsapp {
		bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
	}
}

/* ---------- Buttons: subtle inner gleam ---------- */
.btn-gold {
	background: linear-gradient(135deg, var(--gold-soft) 0%, var(--gold) 50%, var(--gold-2) 100%);
	background-size: 200% 200%;
	transition: transform var(--dur-1) var(--ease-out), background-position var(--dur-3) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.btn-gold:hover { background-position: 100% 100%; }

/* CTA button gleam sweep */
.btn-lg::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.32) 50%, transparent 70%);
	transform: translateX(-120%);
	transition: transform .9s var(--ease-out);
	pointer-events: none;
	border-radius: inherit;
}
.btn-lg { position: relative; overflow: hidden; }
.btn-lg:hover::before { transform: translateX(120%); }

/* ---------- Reveal: extra variants (only apply before visible) ---------- */
[data-reveal="fade"]:not(.is-visible)  { transform: translateY(0); }
[data-reveal="left"]:not(.is-visible)  { transform: translateX(-1.5rem); }
[data-reveal="right"]:not(.is-visible) { transform: translateX(1.5rem); }
[data-reveal="zoom"]:not(.is-visible)  { transform: scale(.96); }

/* ---------- General mobile typography & spacing tweaks ---------- */
@media (max-width: 640px) {
	.section { padding-block: var(--space-xl); }
	.bts-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
	.feature-row { gap: var(--space-sm); }
	.feature-card { padding: var(--space-sm); }
	.bahra-strip-track { gap: 1.5rem; animation-duration: 28s; }
	.bahra-promo { font-size: .82rem; padding: .5rem .8rem; }
	.video-mini-grid { grid-template-columns: 1fr 1fr; }
	.cinema-section { padding-block: var(--space-xl); }
	.cinema-video::before { inset: .6rem; border-radius: 16px; }
	.bahra-cta { display: none; }
	.bahra-header { grid-template-columns: 1fr auto; padding-inline: clamp(1rem, 4vw, 1.5rem); }
}

/* ---------- Touch targets ---------- */
@media (hover: none) {
	.btn:hover { transform: none; }
	.lens-card:hover { transform: none; }
	.color-card:hover { transform: none; }
	.color-card:hover img { transform: none; filter: none; }
	.bts-tile:hover img { transform: none; filter: brightness(.94); }
	.lookbook-card:hover { transform: none; }
	.lookbook-card:hover img { transform: none; }
}

/* ---------- Smooth focus state (a11y) ---------- */
:where(a, button, .btn, summary, input, select, textarea):focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
	border-radius: 8px;
}

/* ---------- Color story (texture backdrop section) ---------- */
.color-story {
	position: relative;
	overflow: hidden;
	padding: var(--space-2xl) var(--page-pad);
	color: var(--ink);
	isolation: isolate;
}
.color-story .bg {
	position: absolute; inset: 0;
	z-index: -1;
	background-size: cover;
	background-position: center;
}
.color-story .bg::after {
	content: "";
	position: absolute; inset: 0;
	background:
		linear-gradient(180deg, rgba(247,239,225,.6) 0%, rgba(247,239,225,.9) 100%),
		radial-gradient(70% 60% at 30% 30%, rgba(200,163,100,.18), transparent 60%);
}
.color-story .inner {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
	max-width: 720px;
}
@media (min-width: 760px) {
	.color-story .inner { max-width: var(--max-w); }
}
.color-story h2 { margin: 0 0 var(--space-sm); }
.color-story .pill-row {
	display: flex; flex-wrap: wrap; gap: .6rem;
	margin-top: var(--space-md);
}
.color-story .pill-row a {
	display: inline-flex; align-items: center; gap: .45rem;
	padding: .5rem .85rem;
	background: rgba(255,255,255,.75);
	border: 1px solid var(--line);
	border-radius: 999px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: .82rem;
	color: var(--ink);
	transition: transform var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.color-story .pill-row a:hover {
	transform: translateY(-2px);
	background: #fff;
	box-shadow: var(--shadow-sm);
}
.color-story .pill-row a .lens-disc {
	width: 22px; height: 22px;
	border-radius: 999px;
}

/* ---------- Editorial split (image + copy) ---------- */
.editorial-split {
	display: grid;
	gap: var(--space-lg);
	grid-template-columns: 1fr;
	align-items: center;
	max-width: var(--max-w);
	margin: 0 auto;
}
@media (min-width: 880px) {
	.editorial-split { grid-template-columns: 1.1fr 1fr; gap: var(--space-xl); }
	.editorial-split.reverse > .visual { order: 2; }
}
.editorial-split .visual {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	aspect-ratio: 4/5;
	box-shadow: var(--shadow-md);
}
.editorial-split .visual img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 1.6s var(--ease-out);
}
.editorial-split .visual:hover img { transform: scale(1.04); }
.editorial-split .visual .frame-tag {
	position: absolute;
	top: 1rem; right: 1rem;
	padding: .35rem .8rem;
	background: rgba(255,255,255,.92);
	color: var(--ink);
	font-family: var(--font-display);
	font-weight: 700; font-size: .75rem;
	border-radius: 999px;
	letter-spacing: .04em;
}
.editorial-split .copy h2 { margin-bottom: .6rem; }
.editorial-split .copy .meta-list {
	display: grid;
	gap: .6rem;
	padding: 0;
	margin: var(--space-sm) 0;
}
.editorial-split .copy .meta-list li {
	display: flex; align-items: center; gap: .65rem;
	color: var(--ink-2);
	font-size: .95rem;
}
.editorial-split .copy .meta-list li::before {
	content: "";
	width: 22px; height: 22px;
	flex: 0 0 auto;
	border-radius: 999px;
	background:
		radial-gradient(circle at 28% 22%, rgba(255,255,255,.6), transparent 60%),
		linear-gradient(135deg, var(--gold-soft), var(--gold));
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}

/* ---------- Section connector (subtle gold rule) ---------- */
.gold-rule {
	display: block;
	width: 64px;
	height: 2px;
	margin: var(--space-sm) 0;
	background: linear-gradient(90deg, var(--accent), var(--gold), var(--gold-2));
	border-radius: 999px;
}
.gold-rule.center { margin-inline: auto; }

/* ---------- Better disabled / pressed feedback ---------- */
.btn:active { transform: translateY(0); }

/* ---------- Refined badges on lens-cards ---------- */
.lens-card .badge {
	background: linear-gradient(135deg, rgba(247,239,225,.96), rgba(255,255,255,.9));
	box-shadow: 0 6px 16px rgba(35,20,10,.12);
}
.lens-card .body h3 { font-size: 1.05rem; }
.lens-card .body .latin { color: var(--accent); font-weight: 700; }
.lens-card .body .price { font-size: 1.05rem; }

/* ---------- Refine collection cards ---------- */
.collection-card .body h3 { letter-spacing: -.005em; }
.collection-card::before {
	content: "";
	position: absolute; inset: 0;
	z-index: 1;
	background: radial-gradient(60% 50% at 70% 30%, rgba(255,255,255,.18), transparent 65%);
	mix-blend-mode: soft-light;
	pointer-events: none;
}

/* ---------- Our Collection 3-cards ---------- */
.our-collection-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	margin-top: var(--space-lg);
}
.our-col-card {
	display: flex;
	flex-direction: column;
	border-radius: 1.25rem;
	overflow: hidden;
	background: var(--cream-1);
	border: 1px solid rgba(0,0,0,.07);
	text-decoration: none;
	color: var(--ink);
	transition: transform .25s, box-shadow .25s;
	box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.our-col-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.12); }
.our-col-img {
	display: grid;
	grid-template-columns: 1fr 1fr;
	height: 180px;
	overflow: hidden;
}
.our-col-img img { width: 100%; height: 100%; object-fit: cover; }
.our-col-body { padding: 1.25rem 1.25rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.our-col-tag {
	display: inline-block;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-light);
	background: var(--cream-2);
	padding: .25rem .65rem;
	border-radius: 99px;
	width: fit-content;
}
.our-col-tag-gold { background: var(--gold-1); color: var(--dark); }
.our-col-body h3 { font-size: 1.05rem; font-weight: 800; margin: 0; }
.our-col-body p { font-size: .85rem; color: var(--ink-light); margin: 0; flex: 1; }
.our-col-link { font-size: .82rem; font-weight: 700; color: var(--accent); display: flex; align-items: center; gap: .4rem; margin-top: .25rem; }
@media (max-width: 900px) {
	.our-collection-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
	.our-collection-grid { grid-template-columns: 1fr; }
	.our-col-img { height: 200px; }
	.our-col-body h3 { font-size: 1.1rem; }
}

/* ---------- Our Color 4-column grid ---------- */
.color-cats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	margin-top: var(--space-lg);
}
.color-cat {
	display: flex;
	flex-direction: column;
	border-radius: 1rem;
	overflow: hidden;
	background: var(--cream-1);
	border: 1px solid rgba(0,0,0,.07);
	text-decoration: none;
	color: var(--ink);
	transition: transform .2s, box-shadow .2s;
	box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.color-cat:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.12); }
.color-cat-top {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: 1rem;
}
.color-cat-swatch {
	width: 42px; height: 42px;
	border-radius: 50%;
	flex-shrink: 0;
	box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.color-cat-top div { flex: 1; }
.color-cat-top strong { display: block; font-size: .88rem; font-weight: 800; }
.color-cat-top small { font-size: .75rem; color: var(--ink-light); }
.color-cat-top .fa { font-size: .75rem; color: var(--ink-light); }
.color-cat-imgs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px;
	padding: 0 2px 2px;
}
.color-cat-imgs img { width: 100%; aspect-ratio: 1; object-fit: cover; }
@media (max-width: 900px) {
	.color-cats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.color-cats-grid { grid-template-columns: 1fr 1fr; gap: .5rem; }
	.color-cat-top { padding: .75rem; gap: .5rem; }
	.color-cat-swatch { width: 34px; height: 34px; }
	.color-cat-top strong { font-size: .8rem; }
	.color-cat-top small { font-size: .7rem; }
	.color-cat-imgs img { min-height: 70px; }
}

/* ---------- ALHASAL Collection 2026 ---------- */
.alhasal-section {
	position: relative;
	background: var(--dark);
	padding: var(--space-xl) 0;
	overflow: hidden;
}
.alhasal-bg {
	position: absolute; inset: 0;
	background: radial-gradient(ellipse at 20% 50%, rgba(196,154,60,.12) 0%, transparent 60%),
	            radial-gradient(ellipse at 80% 50%, rgba(139,105,20,.1) 0%, transparent 60%);
	pointer-events: none;
}
.alhasal-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
	align-items: center;
}
.alhasal-copy { color: #fff; }
.alhasal-copy h2 { color: #fff; font-size: clamp(1.6rem, 4vw, 2.4rem); }
.alhasal-copy p { color: rgba(255,255,255,.78); }
.alhasal-video video {
	width: 100%;
	border-radius: 1rem;
	max-height: 420px;
	object-fit: cover;
}
.alhasal-video-imgs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .6rem;
	margin-top: .75rem;
}
.alhasal-video-imgs img {
	width: 100%; aspect-ratio: 1;
	object-fit: cover;
	border-radius: .6rem;
	border: 1px solid rgba(255,255,255,.1);
}
@media (max-width: 768px) {
	.alhasal-content { grid-template-columns: 1fr; gap: var(--space-lg); }
	.alhasal-video { order: -1; }
	.alhasal-video video { max-height: 300px; border-radius: .75rem; }
	.alhasal-copy h2 { font-size: clamp(1.4rem, 6vw, 2rem); }
}

/* ---------- Contact channels ---------- */
.contact-channels {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--space-md);
	margin-top: var(--space-lg);
}
.contact-channel {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	border-radius: 1rem;
	background: var(--cream-1);
	border: 1px solid rgba(0,0,0,.07);
	text-decoration: none;
	color: var(--ink);
	transition: transform .2s, box-shadow .2s;
	box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.contact-channel:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.channel-icon {
	width: 52px; height: 52px;
	border-radius: 14px;
	display: flex; align-items: center; justify-content: center;
	font-size: 1.35rem;
	color: #fff;
	flex-shrink: 0;
}
.channel-info { flex: 1; }
.channel-info strong { display: block; font-size: .95rem; font-weight: 700; }
.channel-info span { font-size: .82rem; color: var(--ink-light); direction: ltr; }
.channel-arrow { font-size: .8rem; color: var(--ink-light); }

/* ---------- Reels video+lens grid ---------- */
.reels-section {
	background: var(--dark);
	padding: var(--space-xl) 0;
}
.reels-header {
	text-align: center;
	margin-bottom: var(--space-lg);
}
.reels-header .eyebrow { color: var(--gold-2); }
.reels-header h2 { color: #fff; }
.reels-header p { color: rgba(255,255,255,.72); max-width: 52ch; margin: .75rem auto 0; }
.reels-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 var(--space-md);
}
.reel-card {
	position: relative;
	border-radius: 1rem;
	overflow: hidden;
	background: #111;
	aspect-ratio: 9/16;
}
.reel-card video {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
.reel-card .reel-badge {
	position: absolute;
	bottom: 1rem; right: 1rem;
	z-index: 4;
	background: rgba(0,0,0,.55);
	backdrop-filter: blur(6px);
	border-radius: .6rem;
	padding: .35rem .75rem;
	display: flex; align-items: center; gap: .4rem;
	color: #fff;
	font-size: .78rem;
}
.reel-card .reel-badge .lens-disc { width: 22px; height: 22px; }
a.reel-card { text-decoration: none; color: inherit; cursor: pointer; }
a.reel-card:hover .reel-badge { background: rgba(0,0,0,.75); }
.reel-card .reel-poster {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	z-index: 1;
	transition: opacity .35s ease;
}
.reel-card.is-playing .reel-poster { opacity: 0; pointer-events: none; }
.reel-card .reel-play {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
	width: 64px; height: 64px;
	border-radius: 999px;
	border: 0;
	background: rgba(255,255,255,.92);
	color: #1a1108;
	font-size: 1.4rem;
	display: grid; place-items: center;
	cursor: pointer;
	box-shadow: 0 10px 30px rgba(0,0,0,.45);
	transition: transform .2s ease, opacity .25s ease, background .2s ease;
}
.reel-card .reel-play:hover { transform: translate(-50%, -50%) scale(1.08); background: #fff; }
.reel-card .reel-play i { padding-left: 4px; }
.reel-card.is-playing .reel-play { opacity: 0; pointer-events: none; }
.reel-card .reel-overlay-name {
	position: absolute;
	top: 1rem; left: 1rem; right: 1rem;
	z-index: 4;
	display: inline-block;
	width: max-content;
	max-width: calc(100% - 2rem);
	padding: .35rem .85rem;
	background: linear-gradient(135deg, rgba(190,148,56,.92), rgba(108,71,22,.92));
	color: #fff;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: .9rem;
	border-radius: .5rem;
	letter-spacing: .02em;
	box-shadow: 0 4px 14px rgba(0,0,0,.35);
	pointer-events: none;
	opacity: 0;
	animation: bahra-reel-name 8s ease-in-out infinite;
}
@keyframes bahra-reel-name {
	0%   { opacity: 0; transform: translateY(-6px); }
	6%   { opacity: 1; transform: translateY(0); }
	28%  { opacity: 1; transform: translateY(0); }
	36%  { opacity: 0; transform: translateY(-6px); }
	100% { opacity: 0; transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
	.reel-card .reel-overlay-name { animation: none; opacity: 1; }
}
.reels-lens-strip {
	display: flex;
	gap: .75rem;
	overflow-x: auto;
	padding: var(--space-md) var(--space-md) 0;
	max-width: 1100px;
	margin: 0 auto;
	scrollbar-width: none;
}
.reels-lens-strip::-webkit-scrollbar { display: none; }
.reels-lens-img {
	flex: 0 0 auto;
	width: 130px; height: 130px;
	border-radius: .85rem;
	overflow: hidden;
	border: 2px solid rgba(255,255,255,.1);
	transition: transform .2s, border-color .2s;
}
.reels-lens-img:hover { transform: scale(1.04); border-color: var(--gold-2); }
.reels-lens-img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
	.reels-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.reels-grid { grid-template-columns: 1fr 1fr; gap: .5rem; padding: 0 .75rem; }
	.reel-card { aspect-ratio: 9/16; border-radius: .75rem; }
	.reel-card .reel-badge { bottom: .6rem; right: .6rem; padding: .25rem .5rem; font-size: .72rem; }
	.contact-channels { grid-template-columns: 1fr; }
	.reels-lens-img { width: 80px; height: 80px; border-radius: .6rem; }
	.reels-section .inner { padding: 0; }
	.reels-header { padding: 0 var(--page-pad); margin-bottom: var(--space-md); }
}

/* ---------- Print refinements ---------- */
@media print {
	.bahra-progress, .hero-decor, .lookbook-section, .stats-panel, .cta-band, .color-story { display: none; }
}