/* ============ FERNHOLLOW — Forest Apothecary ============ */
:root {
	--cream: #f4f1e9;
	--surface: #e8e5d8;
	--ink: #1e2a22;
	--forest: #28392e;
	--clay: #c0623c;
	--moss: #7c8a5a;
	--muted: #5c5f52;
	--hair: #d6d2c4;
	--on-dark: #a8b0a0;
	--r-lg: 40px;
	--r-md: 24px;
	--maxw: 1440px;
	--pad: 80px;
	--serif: "Fraunces", Georgia, serif;
	--sans: "Inter Tight", system-ui, sans-serif;
}
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html {
	scroll-behavior: smooth;
}
body {
	font-family: var(--sans);
	background: var(--cream);
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
	line-height: 1.5;
	overflow-x: hidden;
}
img {
	display: block;
	max-width: 100%;
}
a {
	color: inherit;
	text-decoration: none;
}
em {
	font-style: italic;
}

.container {
	max-width: var(--maxw);
	margin: 0 auto;
	padding-left: var(--pad);
	padding-right: var(--pad);
}

/* ---- shared bits ---- */
.eyebrow {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--muted);
}
.eyebrow-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	background: var(--surface);
	border: 1px solid var(--hair);
	padding: 0.55rem 1.1rem;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ink);
}
.eyebrow-tag__ico {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: rgba(192, 98, 60, 0.14);
	color: var(--clay);
}
.eyebrow-tag__ico { background: none; color: inherit; }
.eyebrow-tag__ico svg { width: 18px; height: 18px; }
.pill-tag {
	display: inline-block;
	background: #fff;
	border: 1px solid var(--hair);
	padding: 0.5rem 1.3rem;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--ink);
}
.pill-tag--surface {
	background: var(--surface);
	border-color: transparent;
}
.pill-tag--clay {
	background: var(--clay);
	color: #fff;
}
.pill-tag--ink { background: var(--forest); border-color: var(--forest); color: var(--cream); }

.rule {
	height: 1px;
	background: var(--hair);
	width: 100%;
}

.section {
	padding-top: 120px;
	padding-bottom: 0;
}
.section__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 2rem;
	margin-bottom: 2.4rem;
	flex-wrap: wrap;
}
.section__title {
	font-family: var(--serif);
	font-weight: 500;
	font-size: clamp(2rem, 4vw, 3.1rem);
	letter-spacing: -0.03em;
	line-height: 1.05;
	margin-top: 1.1rem;
}
.section__title--light {
	color: var(--cream);
}

/* ---- buttons ---- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	height: 54px;
	padding: 0 0.65rem 0 1.7rem;
	border-radius: 999px;
	font-family: var(--sans);
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	cursor: pointer;
	border: none;
	transition:
		background 0.35s,
		color 0.35s,
		border-color 0.35s;
	white-space: nowrap;
}
.btn--solid {
	background: var(--ink);
	color: var(--cream);
}
.btn--solid:hover {
	background: var(--forest);
}
.btn--outline {
	background: transparent;
	color: var(--ink);
	border: 1.5px solid var(--ink);
	padding-right: 0.6rem;
}
.btn--outline:hover {
	background: var(--ink);
	color: var(--cream);
}
.btn--sm {
	height: 46px;
	font-size: 11px;
	padding: 0 1.5rem;
	justify-content: center;
}
.btn--lg {
	height: 62px;
}
.btn--block {
	width: 100%;
	justify-content: center;
}
.btn__label {
	position: relative;
	display: inline-grid;
	align-items: center;
	overflow: hidden;
	height: 1.1em;
	line-height: 1;
}
.btn__t {
	grid-area: 1 / 1;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn__t--hover {
	transform: translateY(120%);
}
.btn:hover .btn__t {
	transform: translateY(-120%);
}
.btn:hover .btn__t--hover {
	transform: translateY(0);
}
.btn__chip {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	background: var(--cream);
	color: var(--ink);
	transition:
		background 0.35s,
		color 0.35s;
}
.btn--outline .btn__chip--dark {
	background: var(--ink);
	color: var(--cream);
}
.btn--outline:hover .btn__chip--dark {
	background: var(--cream);
	color: var(--ink);
}
.btn--sm .btn__chip {
	display: none;
}

/* ---- navbar ---- */
.nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: rgba(244, 241, 233, 0.82);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--hair);
	transition: background .25s ease, border-color .25s ease;
}
.nav--hero.is-over-hero { background: rgba(15,23,18,.22); border-bottom-color: rgba(244,241,233,.15); backdrop-filter: blur(8px); color: var(--cream); }
.nav--hero.is-over-hero .wordmark__hollow,
.nav--hero.is-over-hero .nav__burger { color: var(--cream); }
.nav--hero.is-over-hero .wordmark__fern { color: #e3a069; }
.nav--hero.is-over-hero .wordmark__icon { background: #e3a069; }
.nav--hero.is-over-hero .nav__pills { background: rgba(244,241,233,.05); border-color: rgba(244,241,233,.2); }
.nav--hero.is-over-hero .pill { color: var(--cream); }
.nav--hero.is-over-hero .pill:hover,
.nav--hero.is-over-hero .pill.is-active { background: rgba(244,241,233,.14); box-shadow: none; }
.nav--hero.is-over-hero .nav__phone-badge { background: rgba(244,241,233,.1); color: #e3a069; }
.nav--hero.is-over-hero .btn--solid { background: var(--cream); color: var(--ink); }
.nav--hero.is-over-hero .btn--solid:hover { background: #fff; }
.nav__inner {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 var(--pad);
	height: 84px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.wordmark {
	display: inline-flex;
	align-items: center;
	font-family: var(--serif);
	font-weight: 500;
	font-size: 1.55rem;
	letter-spacing: -0.02em;
}
.wordmark__fern {
	color: var(--clay);
}
.wordmark__icon { display: inline-block; width: .625em; height: .78125em; margin: 0 .075em 0 .02em; flex: 0 0 auto; background: var(--clay); -webkit-mask: url('/assets/img/omf-pointing-mark.png') left center / contain no-repeat; mask: url('/assets/img/omf-pointing-mark.png') left center / contain no-repeat; }
.wordmark__hollow {
	color: var(--ink);
}
.wordmark__hollow--light {
	color: var(--cream);
}
.wordmark__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--clay);
	margin-left: 5px;
	align-self: flex-end;
	margin-bottom: 0.35rem;
}
.wordmark--lg {
	font-size: 2rem;
}
.nav__pills {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	background: rgba(232, 229, 216, 0.7);
	border: 1px solid var(--hair);
	padding: 0.35rem;
	border-radius: 999px;
}
.pill {
	padding: 0.5rem 1.1rem;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink);
	transition: 0.25s;
}
.pill:hover {
	color: var(--clay);
}
.pill.is-active {
	background: #fff;
	box-shadow: 0 2px 8px rgba(30, 42, 34, 0.08);
}
.nav__right {
	display: flex;
	align-items: center;
	gap: 1.3rem;
}
.nav__phone {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}
.nav__phone-badge {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: rgba(192, 98, 60, 0.12);
	color: var(--clay);
	transition: 0.3s;
}
.nav__phone:hover .nav__phone-badge {
	background: var(--clay);
	color: #fff;
}
.nav__phone-num {
	font-weight: 700;
	font-size: 0.92rem;
	letter-spacing: -0.01em;
}
.nav__burger {
	display: none;
	background: none;
	border: none;
	color: var(--ink);
	cursor: pointer;
}

/* ---- mobile menu ---- */
.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 2000;
	background: var(--cream);
	transform: translateX(100%);
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	display: flex;
	flex-direction: column;
	padding: 1.4rem var(--pad);
}
.mobile-menu.is-open {
	transform: translateX(0);
}
.mobile-menu__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 62px;
}
.mobile-menu__close {
	background: none;
	border: none;
	color: var(--ink);
	cursor: pointer;
}
.mobile-menu__nav {
	display: flex;
	flex-direction: column;
	gap: 1.3rem;
	margin-top: 2.5rem;
}
.mobile-menu__nav a {
	font-family: var(--serif);
	font-size: 2.2rem;
	font-weight: 500;
	letter-spacing: -0.02em;
	transition: 0.2s;
}
.mobile-menu__nav a:hover {
	color: var(--clay);
}
.mobile-menu__foot {
	margin-top: auto;
	padding-top: 2rem;
	border-top: 1px solid var(--hair);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.mobile-menu__phone {
	font-family: var(--serif);
	font-size: 1.6rem;
	margin-bottom: 1rem;
}

/* ---- hero ---- */
.hero {
	position: relative;
	isolation: isolate;
	background: var(--ink);
	color: var(--cream);
	padding: 120px 0 72px;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 23, 18, .35), rgba(15, 23, 18, .72) 45%, rgba(15, 23, 18, .6)); }
.hero__poster, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__video { opacity: 0; }
.hero__video.is-playing { opacity: 1; }
.hero__motion { position: absolute; right: var(--pad); bottom: 1.5rem; padding: .65rem 1rem; border: 1px solid rgba(244,241,233,.5); border-radius: 999px; color: var(--cream); background: rgba(15,23,18,.6); font: inherit; font-size: .75rem; cursor: pointer; }
.hero__motion[hidden] { display: none; }
.hero__motion:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; }
.hero .btn--solid { background: var(--cream); color: var(--ink); }
.hero .btn--solid:hover { background: #fff; }
.hero .btn--solid .btn__chip { background: var(--clay); color: var(--cream); }
.hero .btn--outline { border-color: rgba(244,241,233,.65); color: var(--cream); background: rgba(15,23,18,.12); }
.hero .btn--outline:hover { background: rgba(244,241,233,.15); }
.hero .btn--outline .btn__chip--dark { background: rgba(244,241,233,.15); color: var(--cream); }
.hero .eyebrow-tag { background: rgba(15,23,18,.18); border: 1px solid rgba(244,241,233,.35); color: var(--cream); backdrop-filter: blur(8px); }
@media (prefers-reduced-motion: reduce) {
	.hero__video, .hero__motion { display: none; }
}
@media (max-width: 900px) {
	.hero__poster, .hero__video { object-position: 25% center; }
}
.hero__content {
	max-width: 960px;
	margin: 0 auto;
	padding: 0 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.6rem;
}
.hero__title {
	font-family: var(--serif);
	font-weight: 500;
	font-size: clamp(2.8rem, 7vw, 5.5rem);
	line-height: 1.04;
	letter-spacing: -0.035em;
	text-shadow: 0 2px 24px rgba(0,0,0,.2);
}
.hero__title em {
	color: var(--cream);
}
.hero__sub {
	max-width: 570px;
	color: rgba(244,241,233,.9);
	font-size: 1.1rem;
	line-height: 1.65;
}
.hero__cta {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 0.5rem;
}

/* ---- prophets timeline ---- */
.prophets-timeline {
	padding: 120px 0;
	background: var(--surface);
}
.prophets-timeline__intro {
	max-width: 700px;
	margin: 0 auto 4.5rem;
	text-align: center;
}
.prophets-timeline__intro h2 {
	font-family: var(--serif);
	font-size: clamp(2.3rem, 5vw, 4.3rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.045em;
	margin: 1.2rem 0;
}
.prophets-timeline__intro p {
	max-width: 590px;
	margin: 0 auto;
	color: var(--muted);
}
/* A single rail keeps names, dates, and supporting content in reading order. */
.prophets-timeline__track { --rail: var(--moss); --rail-red: #b4514f; --milestone: #974340; position: relative; max-width: 760px; margin: 0 auto; padding: 0; list-style: none; }
.prophets-timeline__track > li { position: relative; padding: 0 0 48px 64px; }
.prophets-timeline__track > li:not(:last-child)::before { content: ""; position: absolute; top: 16px; bottom: -16px; left: 8px; width: 3px; background: var(--rail); }
.prophets-timeline__track > li.prophet--jesus:not(:last-child)::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='12' viewBox='0 0 3 12'%3E%3Cpath d='M1.5 2v6' stroke='%237c8a5a' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center top / 3px 12px repeat-y; }
.prophets-timeline__track > li:last-child { padding-bottom: 0; }
.prophet__marker { position: absolute; top: 7px; left: 0; width: 19px; height: 19px; border: 3px solid var(--surface); border-radius: 50%; background: var(--clay); z-index: 1; }
.prophets-timeline__track h3 { font-family: var(--serif); font-size: 1.65rem; font-weight: 500; line-height: 32px; letter-spacing: -.025em; }
.prophet__heading { display: flex; align-items: center; flex-wrap: nowrap; gap: .75rem; }
.prophet__heading h3, .prophet__date { white-space: nowrap; }
.prophet__date { flex-shrink: 0; }
.prophet__date, .timeline-milestone__heading > span { color: var(--clay); font-size: .78rem; font-weight: 700; letter-spacing: .06em; }
.prophets-timeline__track .prophet__call { margin-top: .4rem; color: var(--muted); font-family: var(--serif); font-size: 1rem; font-style: italic; line-height: 1.5; }
.prophets-timeline__track .prophet__call--second { margin-top: 1rem; }
.prophets-timeline__track strong { font-weight: 700; }
.prophets-timeline__track > li:nth-child(-n+4) .prophet__call strong,
.prophet--jesus > .prophet__call:first-of-type strong,
.prophet__verse strong, .prophets-timeline__track .prophet__keyword { color: var(--clay); }
.prophets-timeline__track .timeline-deviation { color: var(--rail-red); }
.timeline-emperor { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.timeline-emperor:hover { color: var(--ink); }
.timeline-emperor:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }
.prophet__verse { margin-top: 1.5rem; padding: 1.25rem 1.4rem; background: rgba(244, 241, 233, .65); border-left: 2px solid var(--moss); border-radius: 0 14px 14px 0; }
.prophet__verse blockquote { color: var(--muted); font-family: var(--serif); font-size: 1rem; line-height: 1.65; }
.prophet__verse figcaption { margin-top: .75rem; color: var(--clay); font-size: .7rem; font-weight: 700; }
.prophet__verse a { text-decoration: underline; text-underline-offset: 3px; }
.prophets-timeline__blessing { margin: 2.5rem auto 0; max-width: 760px; padding-left: 64px; color: var(--muted); font-family: var(--serif); font-style: italic; }
.prophets-timeline__track small { display: block; margin-top: .4rem; color: var(--clay); font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.prophet__comment { margin-top: 1.5rem; padding: 1.25rem 1.4rem; background: rgba(244, 241, 233, .65); border-left: 2px solid var(--moss); border-radius: 0 14px 14px 0; }
.prophet__comment img { float: right; width: 72px; height: 72px; object-fit: contain; margin: 0 0 .5rem 1rem; }
.prophet__comment h4 { font-family: var(--serif); font-size: 1.15rem; font-weight: 500; }
.prophet__comment p, .timeline-milestone p { margin-top: .65rem; color: var(--muted); font-size: .88rem; line-height: 1.65; }
.prophet__comment::after { content: ""; display: block; clear: both; }
.timeline-councils { position: relative; margin-top: 2rem; }
.timeline-milestone { position: relative; }
.timeline-milestone + .timeline-milestone { margin-top: 1.75rem; }
.timeline-councils::before { content: ""; position: absolute; top: 14px; bottom: -64px; left: -56px; width: 3px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='12' viewBox='0 0 3 12'%3E%3Cpath d='M1.5 2v6' stroke='%23b4514f' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center top / 3px 12px repeat-y; background-color: var(--surface); }
.timeline-milestone__marker { position: absolute; top: 9px; left: -60px; width: 11px; height: 11px; background: var(--milestone); transform: rotate(45deg); box-shadow: 0 0 0 3px var(--surface); z-index: 1; }
.timeline-milestone__heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .8rem; }
.timeline-milestone h4 { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; line-height: 30px; }
.prophet__sources { margin-top: .8rem; color: var(--muted); font-size: .75rem; }
.prophet__sources summary { cursor: pointer; width: fit-content; text-decoration: underline; text-underline-offset: 3px; }
.prophet__sources ul { padding-left: 1rem; margin-top: .6rem; }
.prophet__sources li { margin-top: .4rem; }
.prophet__sources a { text-decoration: underline; text-underline-offset: 3px; }
.prophet__sources a:hover { color: var(--ink); }
.prophet__sources summary:focus-visible, .prophet__sources a:focus-visible { outline: 2px solid var(--forest); outline-offset: 4px; }
@media (max-width: 600px) {
	.prophets-timeline__track > li { padding-left: 40px; }
	.prophet__heading { gap: .5rem; }
	.prophet__heading h3 { font-size: clamp(1.2rem, 5.6vw, 1.4rem); }
	.prophet__comment { padding: 1rem; }
	.prophet__verse { padding: 1rem; }
	.prophets-timeline__blessing { padding-left: 40px; }
	.prophet__comment img { width: 56px; height: 56px; margin-left: .6rem; }
	.timeline-councils::before { left: -32px; }
	.timeline-milestone__marker { left: -36px; }
}

/* ---- essential questions ---- */
.explore-islam { padding: 120px 0; }
.explore-islam__head { max-width: 720px; margin-bottom: 3.5rem; }
.explore-islam__head h2, .quran-carousel__head h2 { margin-top: 1rem; font-family: var(--serif); font-size: clamp(2.3rem, 5vw, 4.3rem); font-weight: 500; letter-spacing: -0.045em; line-height: 1; }
.explore-islam__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
.explore-islam__grid > article { grid-column: span 2; }
.explore-islam__grid > article:nth-last-child(-n+2) { grid-column: span 3; }
.explore-islam__grid article { min-height: 250px; padding: 1.75rem; background: var(--surface); border-radius: var(--r-md); display: flex; flex-direction: column; }
.explore-islam__grid span { color: var(--clay); font-size: .74rem; font-weight: 700; letter-spacing: .12em; }
.explore-islam__grid h3 { margin: auto 0 1rem; font-family: var(--serif); font-size: 1.65rem; font-weight: 500; letter-spacing: -.03em; }
.explore-islam__grid p { color: var(--muted); font-size: .92rem; }
.explore-islam__grid article { justify-content: flex-start; }
.explore-islam__grid h3 { margin: 2rem 0 1rem; }
.essential-funfact { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--hair); }
.essential-funfact h4 { color: var(--clay); font-size: .9rem; font-weight: 700; }
.explore-islam__grid .essential-funfact p { margin-top: .6rem; font-size: .88rem; line-height: 1.5; }
.essential-funfact a { text-decoration: underline; text-underline-offset: 3px; }
.essential-funfact a:focus-visible { outline: 2px solid var(--forest); outline-offset: 4px; }

/* ---- Quran verses ---- */
.quran-carousel { padding: 0 var(--pad) 120px; }
.quran-carousel .container { background: #e6dfcc; border-radius: var(--r-lg); padding-top: clamp(1.5rem, 4vw, 3rem); padding-bottom: clamp(2.5rem, 6vw, 4rem); color: var(--ink); }
.quran-carousel__head { display: flex; justify-content: space-between; gap: 2rem; align-items: center; margin-bottom: 1.5rem; }
.quran-carousel__head span { color: var(--clay); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.quran-carousel__head h2 { max-width: 720px; margin-top: .65rem; font-size: clamp(2rem, 4vw, 3.4rem); }
.quran-carousel__controls { display: flex; gap: .6rem; flex: 0 0 auto; }
.verse-control { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid rgba(30,42,34,.28); border-radius: 50%; background: transparent; color: var(--ink); font-size: 1.35rem; line-height: 1; cursor: pointer; transition: background .2s ease, color .2s ease, transform .2s ease; }
.verse-control:hover { background: var(--ink); color: var(--cream); transform: translateY(-2px); }
.quran-carousel__body { display: grid; grid-template-columns: minmax(0, 1fr); }
.quran-carousel__stage { position: relative; min-height: 270px; padding: clamp(2rem, 5vw, 4rem); overflow: hidden; border-radius: var(--r-md); background: var(--ink); color: var(--cream); }
.verse-slide { position: relative; z-index: 1; max-width: 760px; animation: verse-arrival .52s cubic-bezier(.2,.8,.2,1) both; }
.verse-slide__reference { display: block; margin-bottom: 1.2rem; color: #e3a069; font-size: .76rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.verse-slide blockquote { font-family: var(--serif); font-size: clamp(1.8rem, 4vw, 3.65rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.08; }
.verse-slide.verse-slide--medium blockquote { font-size: clamp(1.55rem, 3.4vw, 2.8rem); letter-spacing: -.025em; line-height: 1.2; }
.verse-slide.verse-slide--long blockquote { font-size: clamp(1.3rem, 2.6vw, 2.2rem); letter-spacing: -.015em; line-height: 1.35; }
.verse-slide__reference:hover { text-decoration: underline; text-underline-offset: 4px; }
@keyframes verse-arrival { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
.quran-carousel__foot { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 1.5rem; }
.verse-dots { display: flex; flex-wrap: wrap; max-width: 420px; gap: .55rem; }
.verse-dots button { width: 9px; height: 9px; border: 0; border-radius: 50%; background: rgba(30,42,34,.25); cursor: pointer; transition: width .2s ease, background .2s ease; }
.verse-dots button.is-active { width: 28px; border-radius: 999px; background: var(--clay); }

/* ---- Quran recitations ---- */
.quran-listen { padding-bottom: 100px; }
.quran-listen__head { max-width: 680px; margin-bottom: 2.5rem; }
.quran-listen__head h2 { margin: 1rem 0; font-family: var(--serif); font-size: clamp(2.3rem, 5vw, 4.3rem); font-weight: 500; letter-spacing: -.045em; line-height: 1; }
.quran-listen__head p { color: var(--muted); }
.quran-listen__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.quran-listen__frame { position: relative; overflow: hidden; border-radius: var(--r-md); aspect-ratio: 16 / 9; min-height: 220px; background: var(--ink); }
.quran-listen__frame.is-short { min-height: 380px; }
.quran-listen__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.quran-listen__frame.is-short iframe { width: auto; min-width: 200px; aspect-ratio: 9 / 16; margin-inline: auto; }
.quran-listen__preview { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; background: var(--ink); color: var(--cream); cursor: pointer; }
.quran-listen__preview[hidden] { display: none; }
.quran-listen__preview img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.quran-listen__frame.is-short .quran-listen__preview img { object-fit: contain; }
.quran-listen__play-icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 68px; height: 68px; padding-left: 3px; border-radius: 50%; background: var(--cream); color: var(--ink); font-size: 1.3rem; transition: background .2s, transform .2s; }
.quran-listen__preview:hover .quran-listen__play-icon { background: #fff; transform: translate(-50%, -50%) scale(1.06); }
.quran-listen__play-label { position: absolute; top: calc(50% + 48px); left: 0; right: 0; font: 700 .75rem var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.quran-listen__caption { margin-top: 1.5rem; }
.quran-listen__caption > span { color: var(--clay); font-size: .8rem; font-weight: 700; }
.quran-listen__caption h3 { margin: .35rem 0; font-family: var(--serif); font-size: 1.8rem; font-weight: 500; letter-spacing: -.025em; }
.quran-listen__caption p { color: var(--muted); font-size: .88rem; }
.quran-listen__external { display: inline-block; margin-top: .8rem; color: var(--muted); font-size: .8rem; text-decoration: underline; text-underline-offset: 3px; }
.quran-listen__filters { display: flex; gap: .4rem; margin-bottom: 1.15rem; padding: .3rem; border: 1px solid var(--hair); border-radius: 999px; }
.quran-listen__filters button { flex: 1; border: 0; border-radius: 999px; padding: .75rem .6rem; background: transparent; color: var(--muted); font: 600 .8rem var(--sans); cursor: pointer; }
.quran-listen__filters button[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.quran-listen__filters span { margin-left: .35rem; opacity: .6; }
.quran-listen__choices { display: grid; gap: .65rem; max-height: 460px; overflow-y: auto; padding-right: .35rem; scrollbar-width: thin; scrollbar-color: #bbb6a8 transparent; }
.quran-listen__choice { display: flex; align-items: center; gap: .85rem; width: 100%; padding: .8rem; border: 1px solid var(--hair); border-radius: 14px; background: transparent; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.quran-listen__choice[hidden] { display: none; }
.quran-listen__choice:hover, .quran-listen__choice[aria-pressed="true"] { background: var(--surface); border-color: var(--moss); }
.quran-listen__choice img { width: 76px; height: 58px; flex-shrink: 0; border-radius: 7px; object-fit: cover; }
.quran-listen__choice > span { min-width: 0; }
.quran-listen__choice strong, .quran-listen__choice span span, .quran-listen__choice small { display: block; }
.quran-listen__choice strong { font-size: .85rem; line-height: 1.3; }
.quran-listen__choice span span { margin: .25rem 0; font-size: .8rem; line-height: 1.3; }
.quran-listen__choice small { color: var(--muted); font-size: .7rem; line-height: 1.3; }
.quran-listen__choice .quran-listen__choice-play { margin-left: auto; color: var(--clay); font-size: .75rem; }
.quran-listen button:focus-visible, .quran-listen a:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }
@media (max-width: 900px) {
	.quran-listen__grid { grid-template-columns: 1fr; }
	.quran-listen__frame.is-short { aspect-ratio: 9 / 16; max-width: 320px; margin-inline: auto; }
	.quran-listen__choices { max-height: 340px; }
	.quran-listen { padding-bottom: 80px; }
}

/* ---- free Quran request ---- */
.quran-request-hero { padding: 10rem 0 5rem; background: var(--surface); }
.quran-request-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .75fr); gap: clamp(2rem, 7vw, 8rem); align-items: center; }
.quran-request-hero__copy { max-width: 760px; }
.quran-request-hero h1, .quran-request h2, .quran-request-info h2 { margin-top: 1.15rem; font-family: var(--serif); font-size: clamp(3.1rem, 7vw, 6.4rem); font-weight: 500; letter-spacing: -.06em; line-height: .92; }
.quran-request-hero h1 em { color: var(--clay); font-weight: 400; }
.quran-request-hero__copy > p { max-width: 580px; margin-top: 1.6rem; color: var(--muted); font-size: 1.08rem; }
.quran-request-hero__details { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 2rem; }
.quran-request-hero__details span { padding: .62rem .8rem; border: 1px solid var(--hair); border-radius: 999px; color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.quran-request-hero__product { display: grid; min-height: 390px; place-items: end center; }
.quran-request-hero__product img { width: min(100%, 470px); max-height: 510px; object-fit: contain; }
.quran-request { padding: 2.5rem 0 7rem; }
.quran-request__grid { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); gap: clamp(2rem, 7vw, 8rem); align-items: start; }
.quran-request__product-side { position: sticky; top: 7rem; }
.quran-request__product-image { overflow: hidden; padding: .75rem; border: 1px solid rgba(30,42,34,.18); border-radius: var(--r-lg); background: #f2eee5; box-shadow: 0 18px 35px rgba(30,42,34,.08); }
.quran-request__product-side > .quran-request__product-image img { display: block; width: 100%; height: auto; border-radius: calc(var(--r-lg) - .75rem); object-fit: contain; }
.quran-request__product-copy { margin: 1.25rem 0 0; max-width: 390px; text-align: left; }
.quran-request__product-copy h1 { font-family: var(--serif); font-size: clamp(2.5rem, 4vw, 4rem); font-weight: 500; letter-spacing: -.05em; }
.quran-request__product-copy p { margin-top: .65rem; color: var(--muted); font-size: .92rem; }
.quran-request__product-copy .quran-request-hero__details { justify-content: flex-start; margin-top: 1.25rem; }
.quran-request__product-copy .quran-request-hero__details span:nth-child(1) { border-color: rgba(192,98,60,.35); background: #f6e0d3; color: #9c4c2f; }
.quran-request__product-copy .quran-request-hero__details span:nth-child(2) { border-color: rgba(88,109,69,.28); background: #e1e6d5; color: #4d623b; }
.quran-request__product-copy .quran-request-hero__details span:nth-child(3) { border-color: rgba(30,42,34,.2); background: #f4f1e9; color: var(--ink); }
.quran-request__form-side { min-width: 0; }
.quran-request__guide { max-width: 560px; margin: 0 0 2.25rem; }
.quran-request__guide h2 { margin-top: .7rem; font-family: var(--serif); font-size: clamp(2.1rem, 3vw, 3.2rem); font-weight: 500; letter-spacing: -.045em; line-height: .95; }
.quran-request__guide > p { margin-top: .7rem; color: var(--muted); }
.quran-request__intro { position: sticky; top: 8rem; }
.quran-request h2 { max-width: 460px; font-size: clamp(2.6rem, 5vw, 4.5rem); }
.quran-request__intro > p { max-width: 380px; margin-top: 1.25rem; color: var(--muted); }
.quran-request__steps { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; margin-top: 2rem; padding: 0 0 1.5rem; border-bottom: 1px solid rgba(30,42,34,.14); list-style: none; }
.quran-request__steps li { display: flex; align-items: center; gap: .8rem; color: var(--muted); font-size: .82rem; }
.quran-request__steps span { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--hair); border-radius: 50%; font-size: .65rem; }
.quran-request__steps .is-current { color: var(--ink); }
.quran-request__steps .is-current span { border-color: var(--clay); background: var(--clay); color: #fff; }
.quran-request__panel { padding: clamp(1.4rem, 4vw, 3rem); border-radius: var(--r-lg); background: #e6dfcc; }
.quran-request__panel-head { display: flex; justify-content: space-between; padding-bottom: 1.4rem; border-bottom: 1px solid rgba(30,42,34,.14); }
.quran-request__panel-head span, .quran-request__field > span { color: var(--clay); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.quran-request__panel-head p { font-family: var(--serif); font-size: 1.25rem; }
.quran-request__form { margin-top: 0; }
.quran-request__form [data-request-step] { display: grid; gap: 1.25rem; }
.quran-request__form [data-request-step][hidden] { display: none; }
.quran-request__error { margin-bottom: 1rem; padding: .75rem 1rem; border-radius: 10px; background: #f5ddd1; color: #8a3d34; font-size: .85rem; }
.quran-request__field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.quran-request__field { display: grid; gap: .6rem; }
.quran-request__field--full { grid-column: 1 / -1; }
.quran-request__field em { color: var(--muted); font-style: normal; }
.quran-request__field input, .quran-request__field textarea { width: 100%; padding: 1rem 0; border: 0; border-bottom: 1px solid rgba(30,42,34,.32); border-radius: 0; background: transparent; color: var(--ink); font: inherit; }
.quran-request__field textarea { resize: vertical; }
.quran-request__field input:focus, .quran-request__field textarea:focus { outline: 0; border-color: var(--clay); }
.quran-request__field input.is-invalid { border-color: #b4514f; }
.quran-request__choices { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.quran-request__choices label { display: flex; gap: .65rem; align-items: flex-start; min-height: 68px; padding: 1rem; border: 1px solid rgba(30,42,34,.22); border-radius: 12px; background: rgba(244,241,233,.52); cursor: pointer; }
.quran-request__choices input { width: 16px; margin-top: .15rem; accent-color: var(--clay); }
.quran-request__choices strong, .quran-request__choices small { display: block; }
.quran-request__choices small { margin-top: .25rem; color: var(--muted); font-size: .72rem; }
.quran-request__continue { justify-self: start; margin-top: .25rem; }
.quran-request__actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .25rem; }
.quran-request__back { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .82rem; cursor: pointer; text-decoration: underline; text-underline-offset: .25rem; }
.quran-request__review { padding: 1.25rem; border-radius: 12px; background: rgba(244,241,233,.5); }
.quran-request__review > span { color: var(--clay); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.quran-request__review h3 { margin: .8rem 0 .55rem; font-family: var(--serif); font-size: 2rem; font-weight: 500; }
.quran-request__review p { color: var(--muted); }
.quran-request-info { padding: 6rem 0 8rem; background: var(--surface); }
.quran-request-info__head { max-width: 650px; }
.quran-request-info h2 { font-size: clamp(2.6rem, 5vw, 4.5rem); }
.quran-request-info__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 3rem; }
.quran-request-info article { min-height: 220px; padding: 1.6rem; border-radius: var(--r-md); background: var(--cream); }
.quran-request-info article > span { color: var(--clay); font-size: .72rem; font-weight: 700; letter-spacing: .11em; }
.quran-request-info h3 { margin: 3rem 0 .75rem; font-family: var(--serif); font-size: 1.55rem; font-weight: 500; }
.quran-request-info article p { color: var(--muted); font-size: .88rem; }

/* ---- free Quran FAQ and support ---- */
.omf-faq { padding: 120px 0; background: var(--surface); }
.omf-faq__grid { display: grid; grid-template-columns: 4fr 8fr; gap: 5rem; align-items: start; }
.omf-faq h2, .support-cta h2 { margin: 1rem 0; font-family: var(--serif); font-size: clamp(2.3rem, 4vw, 3.7rem); font-weight: 500; line-height: 1; letter-spacing: -.04em; }
.omf-faq__grid > div > p { color: var(--muted); }
.omf-faq__items { display: grid; gap: .8rem; }
.omf-faq details { padding: 1.25rem 1.4rem; border: 1px solid var(--hair); border-radius: 16px; background: var(--cream); }
.omf-faq summary { cursor: pointer; font-size: 1.03rem; font-weight: 700; }
.omf-faq details p { padding-top: .9rem; color: var(--muted); }
.support-cta { padding: 0 var(--pad) 88px; background: var(--surface); }
.support-cta__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.5rem; width: min(100%, 920px); margin: 0 auto; padding: clamp(1.35rem, 3vw, 2rem); border-radius: var(--r-md); background: var(--clay); color: var(--cream); }
.support-cta__inner > div { max-width: 620px; }
.support-cta h2 { margin: 0; font-size: clamp(2rem, 3.6vw, 3.1rem); }
.support-cta p { margin-top: .35rem; max-width: 520px; color: rgba(244,241,233,.88); font-size: clamp(.95rem, 1.45vw, 1.1rem); line-height: 1.35; }
.support-cta .btn--solid { background: var(--cream); color: var(--ink); }
.support-cta .btn { justify-self: end; }
.support-cta .btn--solid:hover { background: var(--ink); color: var(--cream); }
.donation-alternative { padding: 0; }
.donation-alternative .donation-alternative__panel { max-width: 1100px; margin: 0 auto; padding: clamp(1.75rem, 5vw, 4.5rem); }
.donation-alternative .donation-alternative__grid { grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.donation-alternative .cta__copy { max-width: 560px; }
.donation-alternative .cta__copy p { max-width: 440px; }
.donation-alternative__deco { position: absolute; right: -35px; bottom: -40px; width: 250px; color: var(--moss); opacity: .12; transform: rotate(-15deg); pointer-events: none; }
.donation-alternative__action { display: flex; align-items: center; justify-content: center; }
.donation-alternative__action .btn { min-width: 170px; justify-content: space-between; }
.donation-alternative .btn { background: var(--clay); color: var(--cream); }
.donation-alternative .btn:hover { background: var(--cream); color: var(--ink); }
@media (max-width: 700px) {
	.donation-alternative .donation-alternative__grid { grid-template-columns: 1fr; gap: 1.75rem; }
	.donation-alternative__action { justify-content: flex-start; }
	.donation-alternative__deco { width: 190px; }
}

/* ---- marquee ---- */
.marquee {
	margin-top: 3.5rem;
	width: 100%;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(
		90deg,
		transparent,
		#000 6%,
		#000 94%,
		transparent
	);
	mask-image: linear-gradient(
		90deg,
		transparent,
		#000 6%,
		#000 94%,
		transparent
	);
}
.marquee__track {
	display: flex;
	width: max-content;
	animation: marquee 45s linear infinite;
}
.marquee:hover .marquee__track {
	animation-play-state: paused;
}
.marquee__group {
	display: flex;
	gap: 1.1rem;
	padding-right: 1.1rem;
}
.marquee__card {
	width: 330px;
	height: 230px;
	border-radius: var(--r-md);
	overflow: hidden;
	flex: 0 0 auto;
	box-shadow: 0 14px 34px rgba(30, 42, 34, 0.08);
}
.marquee__card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@keyframes marquee {
	to {
		transform: translateX(-50%);
	}
}

/* ---- panels ---- */
.panel {
	border-radius: var(--r-lg);
	margin: 120px 20px 0;
}
.panel--surface {
	background: var(--surface);
}
.panel--dark {
	background: var(--forest);
	color: var(--cream);
}
.panel .container {
	padding-top: 96px;
	padding-bottom: 96px;
}

/* ---- story / stats ---- */
.story__top {
	display: grid;
	grid-template-columns: 2fr 10fr;
	gap: 3rem;
	align-items: start;
}
.story__statement h2 {
	font-family: var(--serif);
	font-weight: 500;
	font-size: clamp(1.5rem, 2.6vw, 2.3rem);
	line-height: 1.25;
	letter-spacing: -0.02em;
	margin-bottom: 2.2rem;
}
.stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2.5rem;
	margin-top: 5rem;
}
.stat__num {
	display: flex;
	align-items: flex-end;
	gap: 0.15rem;
	font-family: var(--serif);
	font-weight: 500;
	letter-spacing: -0.04em;
}
.stat__num .counter {
	font-size: clamp(3rem, 5vw, 4.2rem);
	color: var(--ink);
}
.stat__suffix {
	font-size: 2.4rem;
	color: var(--clay);
}
.stat__rule {
	height: 1px;
	background: var(--hair);
	margin: 1rem 0 1.1rem;
}
.stat h4 {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.13em;
	margin-bottom: 0.5rem;
}
.stat p {
	font-size: 0.88rem;
	color: var(--muted);
}

/* ---- showreel ---- */
.reel-wrap {
	margin-top: 40px;
}
.reel {
	position: relative;
	height: min(76vh, 720px);
	border-radius: var(--r-lg);
	overflow: hidden;
}
.reel__bg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.05);
	animation: kenburns 22s ease-in-out infinite alternate;
}
@keyframes kenburns {
	to {
		transform: scale(1.16) translateY(-2%);
	}
}
.reel__overlay {
	position: absolute;
	inset: 0;
	background: rgba(30, 42, 34, 0.18);
	display: grid;
	place-items: center;
}
.reel__play {
	width: 128px;
	height: 128px;
	border-radius: 50%;
	background: rgba(244, 241, 233, 0.2);
	border: 1px solid rgba(244, 241, 233, 0.4);
	backdrop-filter: blur(6px);
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: transform 0.35s;
}
.reel__play:hover {
	transform: scale(1.08);
}
.reel__core {
	width: 86px;
	height: 86px;
	border-radius: 50%;
	background: var(--clay);
	color: #fff;
	display: grid;
	place-items: center;
	box-shadow: 0 16px 40px rgba(192, 98, 60, 0.5);
	padding-left: 5px;
}
.reel__tag {
	position: absolute;
	left: 28px;
	bottom: 24px;
	background: rgba(244, 241, 233, 0.92);
	padding: 0.5rem 1.1rem;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

/* ---- services ---- */
.services {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	margin-top: 2.5rem;
}
.svc {
	display: flex;
}
.svc__left {
	flex: 1;
	background: var(--cream);
	border: 1px solid var(--hair);
	border-radius: var(--r-md);
	padding: 2.6rem;
	margin-right: -18px;
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
}
.svc__num {
	display: inline-flex;
	width: 54px;
	height: 32px;
	align-items: center;
	justify-content: center;
	background: var(--ink);
	color: var(--cream);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	margin-bottom: 1.4rem;
}
.svc__left h3 {
	font-family: var(--serif);
	font-weight: 500;
	font-size: 1.7rem;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin-bottom: 1rem;
}
.svc__left p {
	color: var(--muted);
	margin-bottom: 1.8rem;
	flex: 1;
}
.svc__right {
	flex: 1;
	background: var(--surface);
	border: 1px solid var(--hair);
	border-radius: var(--r-md);
	padding: 2.6rem 2.6rem 2.6rem 2.9rem;
	padding-top: 4rem;
}
.svc__badge {
	width: 78px;
	height: 78px;
	border-radius: 50%;
	background: var(--clay);
	color: #fff;
	display: grid;
	place-items: center;
	margin-bottom: 1.4rem;
}
.svc__right h4 {
	font-size: 1.35rem;
	font-weight: 700;
	margin-bottom: 0.7rem;
}
.svc__right p {
	font-size: 0.9rem;
	color: var(--muted);
	margin-bottom: 1.4rem;
}
.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.tag {
	background: #fff;
	border: 1px solid var(--hair);
	padding: 0.4rem 1rem;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* ---- process ---- */
.process {
}
.process__head {
	text-align: center;
	margin-bottom: 3.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.1rem;
}
.process__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}
.step__num {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--clay);
	color: var(--ink);
	font-weight: 700;
	margin-bottom: 1.6rem;
}
.step h3 {
	font-family: var(--serif);
	font-weight: 500;
	text-transform: uppercase;
	font-size: 1.4rem;
	letter-spacing: 0.01em;
	margin-bottom: 0.7rem;
}
.step p {
	color: var(--on-dark);
	margin-bottom: 1.6rem;
	font-size: 0.95rem;
}
.step img {
	width: 100%;
	height: 240px;
	object-fit: cover;
	border-radius: var(--r-md);
	filter: grayscale(1);
	transition: filter 0.55s;
}
.step:hover img {
	filter: grayscale(0);
}

/* ---- products ---- */
.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.6rem;
	margin-top: 2.5rem;
}
.product__img {
	aspect-ratio: 1;
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--surface);
	margin-bottom: 1.2rem;
}
.product__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.product:hover .product__img img {
	transform: scale(1.08);
}
.product h3 {
	font-family: var(--serif);
	font-weight: 500;
	text-transform: uppercase;
	font-size: 1.5rem;
	letter-spacing: -0.01em;
	margin-bottom: 0.5rem;
	transition: 0.25s;
}
.product:hover h3 {
	color: var(--clay);
}
.product__price {
	display: flex;
	align-items: baseline;
	gap: 0.9rem;
}
.product__price .now {
	font-family: var(--serif);
	font-size: 1.7rem;
	color: var(--clay);
}
.product__price .was {
	color: var(--muted);
	text-decoration: line-through;
	font-size: 1.1rem;
}

/* ---- faq ---- */
.faq {
	display: grid;
	grid-template-columns: 4fr 8fr;
	gap: 4rem;
	align-items: start;
}
.faq__intro {
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
}
.faq__intro .btn {
	align-self: flex-start;
	margin-top: 0.5rem;
}
.faq__list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.acc {
	background: var(--surface);
	border: 1px solid var(--hair);
	border-radius: 20px;
	overflow: hidden;
}
.acc__q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.4rem 1.6rem;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	font-family: var(--sans);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--ink);
}
.acc__chip {
	width: 42px;
	height: 42px;
	flex: 0 0 auto;
	border: 1px solid var(--hair);
	background: #fff;
	border-radius: 12px;
	display: grid;
	place-items: center;
	transition:
		transform 0.35s,
		background 0.3s,
		color 0.3s;
}
.acc.is-open .acc__chip {
	transform: rotate(180deg);
	background: var(--clay);
	color: #fff;
	border-color: var(--clay);
}
.acc__a {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.acc__a p {
	padding: 0 1.6rem 1.5rem;
	color: var(--muted);
	line-height: 1.6;
}

/* ---- cta ---- */
.cta {
	position: relative;
	background: var(--ink);
	color: var(--cream);
	border-radius: var(--r-lg);
	padding: clamp(2.5rem, 6vw, 5.5rem);
	overflow: hidden;
}
.cta__deco {
	position: absolute;
	inset: 0;
	color: var(--moss);
	opacity: 0.16;
	pointer-events: none;
}
.cta__deco svg:first-child {
	position: absolute;
	top: 8%;
	left: 6%;
	transform: rotate(-15deg);
}
.cta__deco svg:last-child {
	position: absolute;
	bottom: 6%;
	right: 7%;
	transform: rotate(160deg);
	width: 160px;
	height: 160px;
}
.cta__grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
}
.cta__copy h2 {
	font-family: var(--serif);
	font-weight: 500;
	font-size: clamp(2rem, 3.5vw, 2.9rem);
	letter-spacing: -0.03em;
	line-height: 1.08;
	margin: 1.2rem 0 1rem;
}
.cta__copy p {
	color: var(--on-dark);
	max-width: 420px;
}
.cta__form {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
	align-items: center;
}
.cta__form input {
	flex: 1;
	min-width: 200px;
	height: 58px;
	border-radius: 999px;
	border: none;
	padding: 0 1.6rem;
	font-family: var(--sans);
	font-size: 1rem;
	background: var(--cream);
	color: var(--ink);
}
.cta__form input:focus {
	outline: 2px solid var(--clay);
	outline-offset: 2px;
}
.cta__submit {
	height: 58px;
	padding: 0 2.2rem;
	border: none;
	border-radius: 999px;
	background: var(--clay);
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 11.5px;
	cursor: pointer;
	transition: background 0.3s;
}
.cta__submit:hover {
	background: #fff;
	color: var(--clay);
}
.cta__success {
	flex-basis: 100%;
	color: var(--moss);
	font-weight: 600;
	margin-top: 0.4rem;
}

/* ---- journal ---- */
.journal {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.8rem;
	margin-top: 2.5rem;
}
.post {
	cursor: pointer;
}
.post__img {
	aspect-ratio: 16 / 10;
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--surface);
	margin-bottom: 1.3rem;
}
.post__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.post:hover .post__img img {
	transform: scale(1.06);
}
.post__meta {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--muted);
	margin-bottom: 0.9rem;
}
.post__meta .dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--clay);
}
.post h3 {
	font-family: var(--serif);
	font-weight: 500;
	text-transform: uppercase;
	font-size: 1.4rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin-bottom: 1.1rem;
	transition: 0.25s;
}
.post:hover h3 {
	color: var(--clay);
}
.post__more {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.13em;
	transition: gap 0.3s;
}
.post:hover .post__more {
	gap: 1rem;
	color: var(--clay);
}

/* ---- footer ---- */
.footer {
	background: var(--ink);
	color: var(--cream);
	border-radius: var(--r-lg) var(--r-lg) 0 0;
	margin-top: 120px;
}
.footer--home { margin-top: 56px; }
.footer__inner {
	padding-top: 90px;
	padding-bottom: 32px;
}
.footer__grid {
	display: grid;
	grid-template-columns: 4fr 8fr;
	gap: 3rem;
}
.footer__brand p {
	color: var(--on-dark);
	max-width: 360px;
	margin: 1.6rem 0;
	line-height: 1.6;
}
.footer__social {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}
.footer__social .eyebrow {
	color: var(--on-dark);
}
.footer__icons {
	display: flex;
	gap: 0.7rem;
}
.footer__icons a {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid rgba(244, 241, 233, 0.2);
	display: grid;
	place-items: center;
	transition: 0.3s;
}
.footer__icons a:hover {
	background: var(--clay);
	border-color: var(--clay);
}
.footer__cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}
.footer__cols h4 {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	margin-bottom: 1.3rem;
}
.footer__cols ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}
.footer__cols a {
	color: var(--on-dark);
	transition: 0.25s;
}
.footer__cols a:hover {
	color: var(--clay);
}
.footer__bar {
	margin-top: 4rem;
	padding-top: 2rem;
	border-top: 1px solid rgba(244, 241, 233, 0.12);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
	font-size: 0.85rem;
	color: var(--on-dark);
}
.footer__legal {
	display: flex;
	gap: 2rem;
}
.footer__legal a:hover {
	color: var(--cream);
}

/* ---- reveal ---- */
.reveal {
	opacity: 1;
	transform: none;
}
.reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* ---- responsive ---- */
@media (max-width: 1100px) {
	:root {
		--pad: 48px;
	}
	.nav__pills,
	.nav__phone {
		display: none;
	}
	.nav__burger {
		display: block;
	}
	.nav__inner .btn--sm {
		display: none;
	}
}
@media (max-width: 900px) {
	.story__top {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	.stats {
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
	}
	.services {
		grid-template-columns: 1fr;
	}
	.svc {
		flex-direction: column;
	}
	.svc__left {
		margin-right: 0;
		margin-bottom: -18px;
	}
	.svc__right {
		padding-top: 3rem;
	}
	.process__grid,
	.products,
	.journal,
	.footer__cols {
		grid-template-columns: 1fr 1fr;
	}
	.faq {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.cta__grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	.footer__grid {
		grid-template-columns: 1fr;
	}
	.omf-faq__grid { grid-template-columns: 1fr; gap: 2.5rem; }
	.support-cta__inner { align-items: flex-start; }
	.explore-islam__grid { grid-template-columns: 1fr 1fr; }
	.explore-islam__grid > article, .explore-islam__grid > article:nth-last-child(-n+2) { grid-column: auto; }
	.explore-islam__grid > article:last-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
	:root {
		--pad: 24px;
		--r-lg: 28px;
	}
	.panel {
		margin: 80px 12px 0;
	}
	.panel .container {
		padding-top: 64px;
		padding-bottom: 64px;
	}
	.marquee__card {
		width: 230px;
		height: 160px;
	}
	.process__grid,
	.products,
	.journal,
	.footer__cols {
		grid-template-columns: 1fr;
	}
	.prophets-timeline {
		padding: 80px 0;
	}
	.prophets-timeline__intro {
		margin-bottom: 3rem;
	}
	.explore-islam, .quran-carousel { padding-bottom: 80px; }
	.explore-islam { padding-top: 80px; }
	.quran-carousel__head { align-items: flex-end; flex-direction: row; }
	.quran-carousel__foot { align-items: flex-start; flex-direction: column; }
	.quran-carousel__stage { min-height: 250px; padding: 2rem; }
	.quran-carousel__body { grid-template-columns: 1fr; }
	.quran-carousel__head h2 { font-size: 2rem; }
	.verse-control { width: 42px; height: 42px; font-size: 1.15rem; }
	.verse-slide blockquote { font-size: clamp(1.7rem, 9vw, 2.35rem); }
	.verse-slide { max-width: none; }
	.support-cta { padding-bottom: 56px; }
	.support-cta__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: 1.25rem; }
	.support-cta h2 { font-size: 1.9rem; }
	.support-cta p { font-size: .88rem; }
	.support-cta .btn { justify-self: end; }
	.explore-islam__grid { grid-template-columns: 1fr; }
	.quran-request-hero { padding: 7rem 0 4rem; }
	.quran-request { padding: 1.5rem 0 5rem; }
	.quran-request-hero__grid, .quran-request__grid { grid-template-columns: 1fr; }
	.quran-request-hero__product { min-height: 280px; }
	.quran-request__product-side { position: static; max-width: 420px; margin: 0 auto; }
	.quran-request__product-image { height: auto; }
	.quran-request__intro { position: static; }
	.quran-request__steps { display: flex; flex-wrap: wrap; gap: .7rem 1rem; margin-top: 2rem; }
	.quran-request__steps li { font-size: .74rem; }
	.quran-request-info__grid { grid-template-columns: 1fr; }
	.quran-request__field-grid, .quran-request__choices { grid-template-columns: 1fr; }
	.footer__bar {
		flex-direction: column;
		text-align: center;
	}
	.reel {
		height: 60vh;
	}
	.reel__play {
		width: 96px;
		height: 96px;
	}
	.reel__core {
		width: 64px;
		height: 64px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.marquee__track,
	.reel__bg {
		animation: none;
	}
	.reel__bg {
		transform: none;
	}
	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
	html {
		scroll-behavior: auto;
	}
}