@import url('https://fonts.googleapis.com/css2?family=Anton&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700&family=Inter+Tight:wght@300;400;500;600;700;800;900&family=Amiri:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  --bone: #f3e8d6;            /* warm cream / paper (flyer bg) */
  --bone-2: #ebdcc4;          /* deeper cream */
  --bone-3: #f9f2e5;          /* almost-white cream (cards) */
  --ink: #241318;             /* deep warm near-black */
  --ink-2: #2f1a1e;
  --ink-soft: #43272c;
  --mute: #8a6a62;            /* muted mauve-taupe */
  --line: rgba(36, 19, 24, 0.14);
  --line-strong: rgba(36, 19, 24, 0.30);
  --maroon: #6d1a24;      /* PRIMARY maroon / oxblood (Hajj) */
  --maroon-deep: #3f1216; /* darkest maroon (Mid-Year title) */
  --maroon-soft: #9a2430; /* bright maroon (hover) */
  --navy: #16295a;            /* SECONDARY navy (Men Talk + logo) */
  --navy-deep: #0d1a3d;       /* deepest navy */
  --clay: #d4a95f;            /* light gold tint */
  --ochre: #bd8a35;           /* gold accent (flyer sepia/gold) */
  --gold: #bd8a35;
  --display: 'Anton', 'Arial Narrow', sans-serif;   /* ultra-bold condensed caps */
  --serif: 'Playfair Display', Georgia, serif;       /* elegant italic accents */
  --sans: 'Inter Tight', system-ui, sans-serif;
  --arabic: 'Amiri', serif;
  --pad-x: clamp(20px, 4vw, 72px);
  --max: 1480px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  background: var(--bone);
}

body {
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  /* paper texture overlay */
  position: relative;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(109, 26, 36, 0.04), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(63, 18, 22, 0.03), transparent 50%);
  background-size: 100% 100%;
  mix-blend-mode: multiply;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.4;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.06 0 0 0 0 0.03 0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--maroon); color: var(--bone); }

main { position: relative; z-index: 3; }

/* ============ UTILITY BAR ============ */
.utility {
  background: var(--ink);
  color: var(--bone);
  padding: 12px var(--pad-x);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 50;
  overflow: hidden;
}
.utility::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  background: var(--maroon);
}
.utility__left { display: flex; gap: 24px; align-items: center; opacity: .92; }
.utility__arabic {
  font-family: var(--arabic);
  font-size: 16px;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--clay);
  font-weight: 400;
}
.utility__right { display: flex; gap: 22px; }
.utility__right a {
  opacity: .8;
  transition: all .3s;
  position: relative;
}
.utility__right a:hover {
  opacity: 1;
  color: var(--clay);
}
@media (max-width: 760px) {
  .utility__left .hide-sm { display: none; }
  .utility { font-size: 11px; }
  .utility__right { gap: 14px; }
}

/* ============ NAV ============ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 20px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(245, 237, 224, 0.85);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: all .3s ease;
}
.nav.is-scrolled {
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom-color: var(--line);
  background: rgba(245, 237, 224, 0.95);
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
}
.nav__logo-mark {
  width: 48px; height: 48px;
  background: var(--ink);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  position: relative;
  overflow: hidden;
  transition: transform .4s ease;
}
.nav__logo-mark::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(109, 26, 36, 0.4) 100%);
  opacity: 0;
  transition: opacity .4s;
}
.nav__logo:hover .nav__logo-mark { transform: rotate(-4deg) scale(1.05); }
.nav__logo:hover .nav__logo-mark::after { opacity: 1; }
.nav__logo-mark img { width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 2; }
.nav__logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.nav__logo-text strong {
  font-family: var(--sans);
  font-weight: 900;
  font-size: 19px;
  letter-spacing: 0.1em;
}
.nav__logo-text span {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 12px;
  color: var(--mute);
  margin-top: 4px;
  letter-spacing: 0.04em;
}

.nav__links {
  display: flex;
  gap: 36px;
  list-style: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.nav__links a {
  position: relative;
  padding: 6px 0;
  opacity: 0.75;
  transition: opacity .25s ease;
}
.nav__links a::before {
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  width: 0; height: 2px;
  background: var(--maroon);
  transition: all .35s ease;
  transform: translateX(-50%);
}
.nav__links a:hover { opacity: 1; }
.nav__links a:hover::before { width: 100%; }
.nav__links a.is-active { opacity: 1; }
.nav__links a.is-active::before { width: 100%; }

.nav__cta {
  padding: 14px 26px;
  background: var(--ink);
  color: var(--bone);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: all .3s ease;
  position: relative;
  overflow: hidden;
}
.nav__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--maroon);
  transform: translateY(101%);
  transition: transform .4s cubic-bezier(.7,0,.3,1);
}
.nav__cta span { position: relative; z-index: 2; }
.nav__cta:hover::before { transform: translateY(0); }

.nav__burger {
  display: none;
  width: 32px; height: 22px;
  position: relative;
  cursor: pointer;
}
.nav__burger span {
  position: absolute; left: 0; right: 0;
  height: 2px;
  background: var(--ink);
  transition: all .3s;
}
.nav__burger span:nth-child(1) { top: 0; }
.nav__burger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav__burger span:nth-child(3) { bottom: 0; }

@media (max-width: 1100px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: block; }
}

.drawer {
  position: fixed; inset: 0;
  background: var(--bone);
  z-index: 99;
  padding: 120px var(--pad-x) 40px;
  transform: translateY(-100%);
  transition: transform .6s cubic-bezier(.7,0,.3,1);
  overflow-y: auto;
}
.drawer.is-open { transform: translateY(0); }
.drawer ul { list-style: none; }
.drawer li {
  border-bottom: 1px solid var(--line);
  padding: 24px 0;
  overflow: hidden;
}
.drawer a {
  font-family: var(--display);
  font-size: 38px;
  font-weight: 400;
  letter-spacing: -0.02em;
  display: block;
  transition: transform .3s ease, color .3s;
}
.drawer a:hover { transform: translateX(20px); color: var(--maroon); }

/* ============ TYPOGRAPHY ============ */
.eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--maroon);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::before {
  content: '';
  width: 28px; height: 1px;
  background: var(--maroon);
}
.eyebrow--centered::before { display: none; }
.eyebrow--centered { display: block; }

.h-display {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(60px, 13vw, 220px);
  line-height: 0.86;
  letter-spacing: -0.04em;
}
.h-display em {
  font-style: italic;
  font-weight: 300;
  color: var(--maroon);
}

.h-1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(44px, 7vw, 104px);
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.h-1 em { font-style: italic; color: var(--maroon); font-weight: 300; }

.h-2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(32px, 4.5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.h-2 em { font-style: italic; color: var(--maroon); font-weight: 300; }

.h-3 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lede {
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 60ch;
}

.italic-tag {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  color: var(--maroon);
}

/* dropcap for editorial sections */
.dropcap::first-letter {
  font-family: var(--display);
  font-weight: 300;
  font-style: italic;
  font-size: 5em;
  line-height: 0.85;
  float: left;
  margin: 0.05em 0.12em -0.05em 0;
  color: var(--maroon);
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 34px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: all .35s cubic-bezier(.7,0,.3,1);
  cursor: pointer;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
}
.btn span { position: relative; z-index: 2; transition: color .3s; }
.btn .arrow {
  width: 14px; height: 14px;
  transition: transform .3s ease;
  position: relative;
  z-index: 2;
}
.btn:hover .arrow { transform: translateX(6px); }

.btn--solid { background: var(--ink); color: var(--bone); }
.btn--solid::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--maroon);
  transform: translateY(101%);
  transition: transform .4s cubic-bezier(.7,0,.3,1);
}
.btn--solid:hover::before { transform: translateY(0); }

.btn--terra { background: var(--maroon); color: var(--bone); }
.btn--terra::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform .4s cubic-bezier(.7,0,.3,1);
}
.btn--terra:hover::before { transform: translateY(0); }

.btn--ghost {
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn--ghost:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bone);
}

/* ============ LAYOUT ============ */
.section {
  padding: clamp(80px, 10vw, 160px) var(--pad-x);
  position: relative;
}
.section--tight { padding: clamp(60px, 7vw, 100px) var(--pad-x); }
.section--cream { background: var(--bone-2); }
.section--ink { background: var(--ink); color: var(--bone); }
.section--ink .lede { color: rgba(245, 237, 224, 0.78); }
.section--terra {
  background: var(--maroon);
  color: var(--bone);
}
.section--terra .lede { color: rgba(245, 237, 224, 0.88); }

.container { max-width: var(--max); margin: 0 auto; position: relative; }

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

/* ============ ISLAMIC GEOMETRY UTILITIES ============ */
.ornament {
  display: block;
  margin: 0 auto;
  color: var(--maroon);
  opacity: 0.85;
}



/* corner ornament for sections */
.section--ornament::before,
.section--ornament::after {
  content: '';
  position: absolute;
  width: 120px; height: 120px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%236d1a24' stroke-width='0.5' opacity='0.4'><path d='M50 10 L60 40 L90 50 L60 60 L50 90 L40 60 L10 50 L40 40 Z'/><circle cx='50' cy='50' r='30'/><circle cx='50' cy='50' r='20'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  opacity: 0.5;
}
.section--ornament::before { top: 40px; left: 40px; }
.section--ornament::after { bottom: 40px; right: 40px; transform: rotate(180deg); }

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: calc(100vh - 60px);
  padding: 0 var(--pad-x);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--bone);
}

/* huge background geometry, Islamic 8-point star pattern */


@keyframes slow-rotate {
  from { transform: translateY(-50%) rotate(0deg); }
  to { transform: translateY(-50%) rotate(360deg); }
}

.hero__bg-grad {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 90% 50%, rgba(109, 26, 36, 0.12), transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgba(63, 18, 22, 0.08), transparent 55%);
}

.hero__content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 80px 0 60px;
}

.hero__meta {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 36px;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mute);
  padding: 10px 20px;
  background: rgba(250, 245, 236, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.hero__meta-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--maroon);
  animation: pulse 2s infinite;
  box-shadow: 0 0 0 0 var(--maroon);
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(109, 26, 36, 0.6); }
  50% { box-shadow: 0 0 0 8px rgba(109, 26, 36, 0); }
}

.hero__title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(64px, 14vw, 240px);
  line-height: 0.84;
  letter-spacing: -0.045em;
  position: relative;
}
.hero__title em {
  font-style: italic;
  color: var(--maroon);
  position: relative;
}
/* underline brushstroke under italic word */
.hero__title em::after {
  content: '';
  position: absolute;
  left: 4%;
  bottom: -2%;
  width: 92%;
  height: 12px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' fill='none' stroke='%236d1a24' stroke-width='2' stroke-linecap='round'><path d='M2 6 Q 50 2, 100 5 T 198 4'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0.7;
}

.hero__sub {
  margin-top: 44px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: end;
}
@media (max-width: 960px) { .hero__sub { grid-template-columns: 1fr; } }

.hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

/* prayer card on hero, glass + dark */
.prayer-card {
  background: var(--ink);
  color: var(--bone);
  border-radius: 16px;
  padding: 32px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 30px 60px -20px rgba(26, 15, 8, 0.4),
    0 0 0 1px rgba(245, 237, 224, 0.06) inset;
}
.prayer-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(109, 26, 36, 0.30), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(189, 138, 53, 0.16), transparent 55%);
}
/* small geometry decoration */

.prayer-card__head {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(245, 237, 224, 0.15);
}
.prayer-card__date {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: .7;
  font-weight: 600;
}
.prayer-card__hijri {
  font-family: var(--arabic);
  font-style: italic;
  font-size: 18px;
  color: var(--clay);
}
.prayer-card__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.prayer-time {
  text-align: center;
  padding: 8px 4px;
  border-radius: 8px;
  transition: background .3s;
}
.prayer-time:hover { background: rgba(245, 237, 224, 0.06); }
.prayer-time__name {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: .65;
  margin-bottom: 8px;
  font-weight: 600;
}
.prayer-time__t {
  font-family: var(--display);
  font-size: 20px;
  font-style: italic;
  font-weight: 400;
}
.prayer-time__t small {
  font-family: var(--sans);
  font-size: 11px;
  font-style: normal;
  opacity: .65;
  display: block;
  margin-top: 4px;
}
.prayer-time--next .prayer-time__t { color: var(--clay); }
.prayer-time--next {
  background: rgba(189, 138, 53, 0.08);
  position: relative;
}
.prayer-time--next::after {
  content: 'Next';
  position: absolute;
  top: -8px; left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  letter-spacing: 0.2em;
  background: var(--clay);
  color: var(--ink);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
}

/* ============ MARQUEE ============ */
.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: 24px 0;
  background: var(--bone-2);
  position: relative;
}
.marquee::before, .marquee::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
}
.marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--bone-2), transparent);
}
.marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--bone-2), transparent);
}
.marquee__track {
  display: flex;
  gap: 60px;
  white-space: nowrap;
  animation: scroll 34s linear infinite;
  font-family: var(--display);
  font-style: italic;
  font-size: 28px;
  color: var(--ink-2);
  font-weight: 300;
}
.marquee__track span { display: inline-flex; gap: 60px; align-items: center; }
.marquee__track span::after {
  content: '◈';
  color: var(--maroon);
  font-size: 18px;
  font-style: normal;
}
@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============ PROGRAM CARDS ============ */
.program-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
.program-grid::before, .program-grid::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--line);
}
.program-grid::before { top: 0; }
.program-grid::after { bottom: 0; }
@media (max-width: 880px) { .program-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .program-grid { grid-template-columns: 1fr; } }

.program-card {
  padding: 56px 32px;
  border-right: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  background: var(--bone);
  transition: all .5s cubic-bezier(.7,0,.3,1);
  display: block;
}
.program-card:last-child { border-right: 0; }
@media (max-width: 880px) {
  .program-card:nth-child(2) { border-right: 0; }
  .program-card:nth-child(1), .program-card:nth-child(2) { border-bottom: 1px solid var(--line); }
}

/* gradient sweep on hover */
.program-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--maroon) 0%, var(--maroon-deep) 100%);
  transform: translateY(101%);
  transition: transform .5s cubic-bezier(.7,0,.3,1);
  z-index: 0;
}
.program-card:hover::before { transform: translateY(0); }

.program-card > * { position: relative; z-index: 2; transition: color .4s ease; }
.program-card:hover > * { color: var(--bone); }
.program-card:hover .program-card__num { color: rgba(245, 237, 224, 0.6); }
.program-card:hover .program-card__icon {
  background: rgba(245, 237, 224, 0.12);
  border-color: rgba(245, 237, 224, 0.3);
  color: var(--bone);
}
.program-card:hover .program-card__desc { color: rgba(245, 237, 224, 0.85); }
.program-card:hover .program-card__link { color: var(--bone); }

.program-card__num {
  font-family: var(--display);
  font-style: italic;
  font-size: 14px;
  color: var(--maroon);
  margin-bottom: 18px;
  font-weight: 400;
}
.program-card__icon {
  width: 64px; height: 64px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  transition: all .4s;
}
.program-card__title {
  font-family: var(--display);
  font-size: 42px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.program-card__desc {
  font-size: 14px;
  color: var(--mute);
  margin-bottom: 28px;
  line-height: 1.55;
}
.program-card__link {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--maroon);
  display: inline-flex;
  gap: 10px;
  align-items: center;
}

/* ============ MISSION BLOCK (ink, dramatic) ============ */
.mission-section {
  position: relative;
  overflow: hidden;
  padding: clamp(120px, 16vw, 220px) var(--pad-x);
  background: var(--ink);
  color: var(--bone);
}



.mission-block {
  position: relative;
  text-align: center;
  z-index: 2;
}
.mission-block__quote {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(40px, 7vw, 96px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  max-width: 18ch;
  margin: 0 auto;
}
.mission-block__quote em {
  font-style: italic;
  color: var(--clay);
}

.mission-block__quote-mark {
  font-family: var(--display);
  font-style: italic;
  font-size: 120px;
  line-height: 0.5;
  color: var(--maroon);
  display: block;
  margin-bottom: 24px;
}

.mission-block__vision {
  margin-top: 80px;
  display: inline-block;
  text-align: left;
  max-width: 40ch;
  padding: 32px 40px;
  border-left: 2px solid var(--maroon);
  background: rgba(245, 237, 224, 0.04);
}

/* ============ STATS ============ */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--bone);
  position: relative;
}
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat {
  padding: 56px 32px;
  border-right: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.stat:last-child { border-right: 0; }
@media (max-width: 760px) {
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--line); }
}
.stat__num {
  font-family: var(--display);
  font-size: clamp(56px, 7vw, 100px);
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.02em;
  color: var(--maroon);
  line-height: 1;
}
.stat__label {
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 600;
}

/* ============ CARDS ============ */
.card {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: var(--bone-3);
  border: 1px solid var(--line);
  transition: all .5s cubic-bezier(.2,.7,.2,1);
}
.card:hover {
  transform: translateY(-6px);
  border-color: var(--line-strong);
  box-shadow: 0 40px 80px -30px rgba(26, 15, 8, 0.25);
}
.card__media {
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
}
.card__media-fallback {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(109, 26, 36, 0.18) 0%, transparent 60%),
    radial-gradient(circle at 70% 80%, rgba(189, 138, 53, 0.22) 0%, transparent 60%),
    linear-gradient(135deg, var(--bone-2) 0%, var(--bone) 100%);
  transition: transform .8s ease;
}
.card:hover .card__media-fallback { transform: scale(1.08); }

.card__tag {
  position: absolute;
  top: 14px; left: 14px;
  padding: 7px 14px;
  background: var(--ink);
  color: var(--bone);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  border-radius: 999px;
  z-index: 2;
  font-weight: 700;
}
.card__body { padding: 28px; }
.card__meta {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 14px;
  font-weight: 600;
}
.card__title {
  font-family: var(--display);
  font-size: 28px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.card__excerpt {
  font-size: 14px;
  color: var(--mute);
  line-height: 1.55;
}

/* ============ COMMUNITY WAYS ============ */
.ways-row {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 960px) { .ways-row { grid-template-columns: 1fr; gap: 40px; } }

.ways-list { display: grid; gap: 0; }
.ways-item {
  display: block;
  border-top: 1px solid var(--line);
  padding: 28px 0;
  position: relative;
  transition: padding .35s ease;
}
.ways-item:hover { padding-left: 14px; }
.ways-item:last-child { border-bottom: 1px solid var(--line); }
.ways-item__title {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  transition: color .3s;
}
.ways-item:hover .ways-item__title { color: var(--maroon); }
.ways-item__title::after {
  content: '→';
  color: var(--maroon);
  font-size: 22px;
  transition: transform .3s;
  display: inline-block;
}
.ways-item:hover .ways-item__title::after { transform: translateX(8px); }
.ways-item__desc {
  font-size: 15px;
  color: var(--mute);
  max-width: 56ch;
  line-height: 1.55;
}

/* ============ VALUES (terracotta section, dramatic) ============ */
.values-section {
  position: relative;
  background: var(--maroon);
  color: var(--bone);
  overflow: hidden;
  padding: clamp(100px, 12vw, 180px) var(--pad-x);
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(245, 237, 224, 0.12);
  margin-top: 80px;
  position: relative;
  z-index: 2;
}
@media (max-width: 880px) { .values-grid { grid-template-columns: 1fr; } }

.value {
  background: var(--maroon);
  padding: 48px 36px;
  position: relative;
  overflow: hidden;
  transition: background .4s;
}
.value:hover { background: var(--maroon-deep); }

.value__num {
  font-family: var(--display);
  font-size: 100px;
  font-weight: 300;
  font-style: italic;
  line-height: 1;
  color: var(--clay);
  margin-bottom: 24px;
  display: block;
  opacity: 0.85;
}
.value__title {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 16px;
  line-height: 1.3;
}
.value__title em {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0;
  color: var(--clay);
  margin: 0 4px;
}
.value__desc {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(245, 237, 224, 0.88);
}

/* ============ EVENT ROW ============ */
.event-row {
  display: grid;
  grid-template-columns: 100px 1fr 200px 160px 60px;
  gap: 28px;
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
  transition: all .35s ease;
  position: relative;
}
.event-row::before {
  content: '';
  position: absolute;
  left: -12px; top: 0; bottom: 0;
  width: 3px;
  background: var(--maroon);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .4s ease;
}
.event-row:hover { padding-left: 16px; background: rgba(109, 26, 36, 0.04); }
.event-row:hover::before { transform: scaleY(1); }
.event-row__date {
  font-family: var(--display);
  font-size: 56px;
  font-style: italic;
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--maroon);
}
.event-row__date small {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mute);
  margin-top: 6px;
  font-weight: 600;
}
.event-row__title {
  font-family: var(--display);
  font-size: 28px;
  letter-spacing: -0.01em;
}
.event-row__loc, .event-row__time {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 600;
}
.event-row__arrow {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .35s;
}
.event-row:hover .event-row__arrow {
  background: var(--maroon);
  border-color: var(--maroon);
  color: var(--bone);
  transform: rotate(-45deg);
}
@media (max-width: 760px) {
  .event-row { grid-template-columns: 1fr; gap: 8px; }
  .event-row__loc, .event-row__time, .event-row__arrow { display: none; }
}

/* ============ TEAM CARDS ============ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
}
@media (max-width: 880px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
.team-card { transition: transform .4s ease; }
.team-card:hover { transform: translateY(-6px); }
.team-card__photo {
  aspect-ratio: 4/5;
  background:
    radial-gradient(circle at 40% 30%, rgba(109, 26, 36, 0.25), transparent 60%),
    radial-gradient(circle at 70% 80%, rgba(189, 138, 53, 0.20), transparent 60%),
    linear-gradient(180deg, var(--bone-2) 0%, var(--bone) 100%);
  border-radius: 8px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}

.team-card__name {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.team-card__role {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 600;
}
.team-card__email {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--maroon);
  transition: color .2s;
}
.team-card__email:hover { color: var(--maroon-deep); }

/* ============ SPLITS / MEDIA ============ */
.split-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
@media (max-width: 860px) { .split-2 { grid-template-columns: 1fr; } }

.media-block {
  aspect-ratio: 4 / 5;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 40% 30%, rgba(109, 26, 36, 0.20), transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(189, 138, 53, 0.18), transparent 60%),
    linear-gradient(180deg, var(--bone-2) 0%, var(--bone) 100%);
  box-shadow: 0 30px 60px -30px rgba(26, 15, 8, 0.2);
}


/* ============ PAGE HEAD ============ */
.page-head {
  padding: 120px var(--pad-x) 100px;
  background: var(--bone);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.page-head::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 80% 30%, rgba(109, 26, 36, 0.10), transparent 60%),
    radial-gradient(ellipse at 10% 90%, rgba(189, 138, 53, 0.12), transparent 50%);
  z-index: 0;
}

.page-head__inner {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
}
.page-head__crumb {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--maroon);
  margin-bottom: 28px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-weight: 700;
}
.page-head__crumb::before {
  content: '';
  width: 32px; height: 1px;
  background: var(--maroon);
}

/* ============ FORM ============ */
.form { display: grid; gap: 20px; max-width: 560px; }
.form__row { display: grid; gap: 8px; }
.form label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 600;
}
.form input, .form textarea, .form select {
  width: 100%;
  padding: 18px 20px;
  background: var(--bone-3);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  border-radius: 4px;
  transition: all .3s;
}
.form input:focus, .form textarea:focus, .form select:focus {
  outline: none;
  border-color: var(--maroon);
  background: var(--bone);
  box-shadow: 0 0 0 4px rgba(109, 26, 36, 0.08);
}
.form textarea { min-height: 140px; resize: vertical; }

/* ============ FOOTER ============ */
.footer {
  background: var(--ink);
  color: var(--bone);
  padding: 120px var(--pad-x) 40px;
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 800px; height: 800px;
  background:
    radial-gradient(circle, rgba(109, 26, 36, 0.18), transparent 60%);
  pointer-events: none;
}

.footer__giant {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(80px, 18vw, 300px);
  line-height: 0.84;
  letter-spacing: -0.045em;
  margin-bottom: 100px;
  position: relative;
}
.footer__giant em { color: var(--maroon); }

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(245, 237, 224, 0.12);
  position: relative;
}
@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr 1fr; } }

.footer__col h4 {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 22px;
  font-weight: 700;
}
.footer__col ul { list-style: none; }
.footer__col li { margin-bottom: 12px; font-size: 14px; }
.footer__col a {
  opacity: 0.85;
  transition: all .25s;
  display: inline-block;
}
.footer__col a:hover {
  opacity: 1;
  color: var(--clay);
  transform: translateX(4px);
}
.footer__col p { font-size: 14px; opacity: .82; line-height: 1.65; }
.footer__col p strong { color: var(--clay); font-weight: 500; }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
  font-size: 12px;
  opacity: .65;
  letter-spacing: 0.12em;
  flex-wrap: wrap;
  gap: 16px;
  position: relative;
}

/* ============ AMOUNT GRID ============ */
.amount-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 24px 0;
}
@media (max-width: 540px) { .amount-grid { grid-template-columns: repeat(2, 1fr); } }
.amount-btn {
  padding: 22px;
  background: var(--bone-3);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--display);
  font-size: 24px;
  font-style: italic;
  cursor: pointer;
  border-radius: 6px;
  transition: all .3s;
}
.amount-btn:hover {
  border-color: var(--maroon);
  color: var(--maroon);
  transform: translateY(-2px);
}
.amount-btn.is-active {
  border-color: var(--maroon);
  background: var(--maroon);
  color: var(--bone);
}

/* ============ SCROLL REVEAL ============ */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal.d1 { transition-delay: .12s; }
.reveal.d2 { transition-delay: .24s; }
.reveal.d3 { transition-delay: .36s; }
.reveal.d4 { transition-delay: .48s; }

/* hero entrance */
@keyframes rise {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
.rise { animation: rise 1.1s cubic-bezier(.2,.7,.2,1) both; }
.rise.d1 { animation-delay: .15s; }
.rise.d2 { animation-delay: .3s; }
.rise.d3 { animation-delay: .45s; }
.rise.d4 { animation-delay: .6s; }


/* === Logo-as-ornament (mask-image approach) === */
.logo-ornament {
  display: block;
  background-color: var(--maroon);
  -webkit-mask-image: url("img/75615667ac.png");
  mask-image: url("img/75615667ac.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  pointer-events: none;
}

/* HERO ornament, large rotating motif on right */
.hero__geo {
  position: absolute;
  right: -8%;
  top: 50%;
  width: 90vh;
  height: 90vh;
  max-width: 95%;
  transform: translateY(-50%);
  z-index: 1;
  opacity: 0.32;
  animation: slow-rotate 180s linear infinite;
}
@keyframes slow-rotate {
  from { transform: translateY(-50%) rotate(0deg); }
  to { transform: translateY(-50%) rotate(360deg); }
}

/* MISSION ornament, large centered motif behind text */
.mission-section { position: relative; overflow: hidden; }
.mission-section__geo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(80vw, 900px);
  height: min(80vw, 900px);
  opacity: 0.10;
  animation: slow-rotate-center 240s linear infinite;
  z-index: 1;
  background-color: var(--maroon);
}
@keyframes slow-rotate-center {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
.mission-block { position: relative; z-index: 2; }

/* VALUES ornaments, two flanking motifs */
.values-section { position: relative; overflow: hidden; }
.values-section__pattern {
  position: absolute;
  right: -10%;
  top: 50%;
  transform: translateY(-50%);
  width: 70vh;
  height: 70vh;
  opacity: 0.10;
  z-index: 1;
  background-color: var(--bone);
  animation: slow-rotate 240s linear infinite reverse;
}
.values-section__pattern-2 {
  position: absolute;
  left: -15%;
  top: 8%;
  width: 50vh;
  height: 50vh;
  opacity: 0.07;
  z-index: 1;
  background-color: var(--bone);
  animation: slow-rotate-fixed 200s linear infinite;
}
@keyframes slow-rotate-fixed {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.values-section .container { position: relative; z-index: 2; }

/* PAGE HEAD ornament */
.page-head { position: relative; overflow: hidden; }
.page-head__geo {
  position: absolute;
  right: -120px;
  top: 50%;
  transform: translateY(-50%);
  width: 600px;
  height: 600px;
  opacity: 0.18;
  z-index: 1;
  animation: slow-rotate-page 240s linear infinite;
}
@keyframes slow-rotate-page {
  from { transform: translateY(-50%) rotate(0deg); }
  to { transform: translateY(-50%) rotate(360deg); }
}
.page-head__inner { position: relative; z-index: 2; }

/* FOOTER ornament */
.footer__geo {
  position: absolute;
  bottom: -200px;
  left: -200px;
  width: 600px;
  height: 600px;
  opacity: 0.10;
  animation: slow-rotate-fixed 300s linear infinite reverse;
}

/* ORNAMENT DIVIDER */
.ornament-divider {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 60px auto;
  max-width: 240px;
}
.ornament-divider::before, .ornament-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line-strong);
}
.ornament-divider__mark {
  width: 36px;
  height: 36px;
}

/* Prayer card corner mark */
.prayer-card { position: relative; }
.prayer-card__corner-mark {
  position: absolute;
  top: -30px;
  right: -30px;
  width: 200px;
  height: 200px;
  background-color: var(--ochre);
  opacity: 0.4;
  z-index: 1;
}
.prayer-card__head, .prayer-card__grid { position: relative; z-index: 2; }

/* Watermarks inside cards / media blocks / team photos */
.media-block, .team-card__photo, .card__media-fallback {
  position: relative;
  display: block !important;
}
.media-block__mark {
  position: absolute;
  inset: 15%;
  background-color: var(--maroon);
  opacity: 0.18;
  z-index: 1;
}
.team-card__photo-mark {
  position: absolute;
  inset: 22%;
  background-color: var(--maroon);
  opacity: 0.22;
  z-index: 1;
}
.card__media-fallback-mark {
  position: absolute;
  inset: 18%;
  background-color: var(--maroon);
  opacity: 0.20;
  z-index: 1;
}

/* ============ SPA mode ============ */
.page { display: none; }
.page.is-active { display: block; animation: pageIn .6s cubic-bezier(.2,.7,.2,1); }
@keyframes pageIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}


/* ============================================================
   MAS BRAND OVERRIDES, Anton caps + Playfair italic, maroon/navy/gold
   ============================================================ */

/* --- Display headlines: Anton, uppercase, condensed --- */
.h-display, .h-1, .h-2, .hero__title, .footer__giant,
.program-card__title, .card__title, .event-row__title,
.team-card__name, .mission-block__quote, .drawer a {
  font-family: var(--display) !important;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 0.005em;
}
.h-display { line-height: 0.92; letter-spacing: 0; }
.h-1 { line-height: 0.94; }
.h-2 { line-height: 0.96; }
.hero__title { line-height: 0.9; letter-spacing: 0; }
.footer__giant { line-height: 0.9; }

/* Anton is condensed, so bump the giant sizes a touch for presence */
.hero__title { font-size: clamp(70px, 15vw, 260px); }
.h-display { font-size: clamp(64px, 13.5vw, 230px); }

/* --- em emphasis inside headlines -> Playfair gold italic, mixed case --- */
.h-display em, .h-1 em, .h-2 em, .hero__title em,
.footer__giant em, .mission-block__quote em, .value__title em {
  font-family: var(--serif) !important;
  font-style: italic !important;
  text-transform: none !important;
  font-weight: 500 !important;
  color: var(--gold) !important;
  letter-spacing: 0;
}
/* On maroon/navy sections the gold em stays gold; on cream keep gold too */

/* --- Elegant serif-italic elements -> Playfair (Anton has no italic) --- */
.italic-tag,
.prayer-time__t, .prayer-card__hijri,
.stat__num, .event-row__date,
.mission-block__quote-mark,
.amount-btn,
.utility__arabic {
  font-family: var(--serif) !important;
}
.stat__num, .event-row__date, .prayer-time__t, .amount-btn {
  font-style: italic;
  font-weight: 600;
}
.mission-block__quote-mark { font-style: italic; }

/* Worship table big times -> Playfair italic */
.page[data-page-id="worship"] td[style*="italic"] {
  font-family: var(--serif) !important;
}

/* --- Eyebrows / labels: keep sans, recolor gold --- */
.eyebrow { color: var(--gold); }
.eyebrow::before { background: var(--gold); }
.page-head__crumb { color: var(--gold); }
.page-head__crumb::before { background: var(--gold); }

/* --- Dropcap -> Playfair --- */
.dropcap::first-letter { font-family: var(--serif); color: var(--maroon); }

/* --- Program card numerals / card meta accents -> Playfair --- */
.program-card__num, .card__title + *, .value__num {
  font-family: var(--serif) !important;
}
.program-card__num, .value__num { font-style: italic; }

/* ============ SECTION RECOLORS ============ */

/* MISSION section -> deep NAVY (Men Talk vibe) with gold */
.mission-section {
  background: var(--navy-deep) !important;
}
.mission-section::before {
  background:
    radial-gradient(circle at 100% 0%, rgba(189, 138, 53, 0.22), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(22, 41, 90, 0.5), transparent 55%) !important;
}
.mission-block__quote-mark { color: var(--gold) !important; }
.mission-block__quote em { color: var(--gold) !important; }
.mission-block__vision { border-left-color: var(--gold) !important; }
.mission-section .eyebrow { color: var(--gold) !important; }
.mission-section .eyebrow::before { background: var(--gold) !important; }
.mission-section__geo { background-color: var(--gold) !important; opacity: 0.09 !important; }

/* VALUES section -> deep MAROON (Hajj vibe) with cream + gold */
.values-section {
  background: var(--maroon) !important;
}
.value { background: var(--maroon) !important; }
.value:hover { background: var(--maroon-deep) !important; }
.value__num { color: var(--gold) !important; }
.value__title em { color: var(--clay) !important; }
.values-section .eyebrow { color: var(--clay) !important; }
.values-section .eyebrow::before { background: var(--clay) !important; }
.values-section__pattern, .values-section__pattern-2 {
  background-color: var(--bone) !important;
}
.h-1 em, .h-2 em { /* keep gold on cream sections */ }
.values-section .h-1 em { color: var(--clay) !important; }

/* NAV cta + buttons: maroon primary */
.nav__cta { background: var(--maroon); }
.nav__cta::before { background: var(--navy); }
.btn--solid { background: var(--maroon); }
.btn--solid::before { background: var(--navy); }
.btn--terra { background: var(--gold); color: var(--ink); }
.btn--terra::before { background: var(--maroon); }
.btn--terra:hover span, .btn--terra:hover .arrow { color: var(--bone); }

/* Marquee diamond -> gold */
.marquee__track span::after { color: var(--gold) !important; }

/* Prayer card corner mark stays gold */
.prayer-card__corner-mark { background-color: var(--gold) !important; }

/* Program card hover -> maroon gradient */
.program-card::before {
  background: linear-gradient(180deg, var(--maroon) 0%, var(--maroon-deep) 100%) !important;
}

/* Footer -> deep navy with gold ornament */
.footer { background: var(--navy-deep) !important; }
.footer::before {
  background: radial-gradient(circle, rgba(189, 138, 53, 0.18), transparent 60%) !important;
}
.footer__giant em { color: var(--gold) !important; }
.footer__col h4 { color: var(--gold) !important; }
.footer__col a:hover { color: var(--clay) !important; }
.footer__col p strong { color: var(--clay) !important; }
.footer__geo { background-color: var(--gold) !important; opacity: 0.08 !important; }

/* Utility bar accent -> gold, arabic -> clay */
.utility::before { background: var(--gold) !important; }
.utility__arabic { color: var(--clay) !important; }
.utility__right a:hover { color: var(--clay) !important; }

/* Hero meta dot -> maroon pulse already via var; ensure pulse color */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(109, 26, 36, 0.55); }
  50% { box-shadow: 0 0 0 8px rgba(109, 26, 36, 0); }
}

/* Prayer card / dark cards: keep dark but tie to navy */
.prayer-card { background: var(--navy-deep) !important; }
.prayer-card::before {
  background:
    radial-gradient(circle at 100% 0%, rgba(189, 138, 53, 0.28), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(109, 26, 36, 0.35), transparent 55%) !important;
}
.prayer-time--next .prayer-time__t { color: var(--gold) !important; }
.prayer-time--next::after { background: var(--gold) !important; color: var(--ink) !important; }
.prayer-card__hijri { color: var(--clay) !important; }

/* Worship hero dark table -> navy */
.page[data-page-id="worship"] div[style*="background: var(--ink)"] {
  background: var(--navy-deep) !important;
}

/* Section tag on cards -> maroon */
.card__tag { background: var(--maroon) !important; }

/* Ornament divider mark + hero geo stay maroon on cream (default) */
.page-head__geo { background-color: var(--maroon) !important; opacity: 0.16 !important; }
.hero__geo { background-color: var(--maroon) !important; }

/* Selection */
::selection { background: var(--maroon); color: var(--bone); }


/* --- Nav logo: actual tree-octagram mark, no dark box --- */
.nav__logo-mark {
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  width: 50px !important;
  height: 50px !important;
}
.nav__logo-mark::after { display: none !important; }
.nav__logo-glyph {
  width: 100% !important;
  height: 100% !important;
  background-color: var(--navy) !important;
  -webkit-mask-image: url("img/f68cd0121a.png") !important;
  mask-image: url("img/f68cd0121a.png") !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
}


/* ===== v6: new logo mark + RSA button + nav layout ===== */
.nav__logo-glyph {
  -webkit-mask-image: url("img/130f524685.png") !important;
  mask-image: url("img/130f524685.png") !important;
  background-color: var(--navy) !important;
}
.nav__logo-mark { width: 52px !important; height: 52px !important; }

.nav__right { display: flex; align-items: center; gap: 12px; }
.nav__rsa {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 13px 20px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink);
  transition: all .3s ease;
}
.nav__rsa:hover { background: var(--navy); border-color: var(--navy); color: var(--bone); }
.nav__rsa svg { transition: transform .3s ease; }
.nav__rsa:hover svg { transform: translate(2px,-2px); }

/* tighten the (now 8) main links */
.nav__links { gap: 22px; }

/* use the drawer earlier so the fuller nav never overflows */
@media (max-width: 1340px) {
  .nav__links, .nav__right { display: none; }
  .nav__burger { display: block; }
}


/* ===== v8: real photography ===== */
.media-block, .card__media-fallback, .team-card__photo { position: relative; overflow: hidden; }
.media-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 2;
  display: block;
}
/* keep the brand ornament visible only as a fallback behind the photo */
.media-block__mark, .card__media-fallback-mark, .team-card__photo-mark { z-index: 1; }

/* gentle warm treatment so photos sit inside the brand */
.card__media-fallback .media-photo { transition: transform .8s ease; }
.card:hover .card__media-fallback .media-photo { transform: scale(1.06); }

/* Gallery grid */
.gal {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.gal__item {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 6px;
  background: var(--bone-2);
}
.gal__item:first-child { grid-column: span 2; grid-row: span 2; }
.gal__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .4s ease;
}
.gal__item::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--maroon);
  opacity: 0;
  transition: opacity .4s ease;
  mix-blend-mode: multiply;
}
.gal__item:hover img { transform: scale(1.08); }
.gal__item:hover::after { opacity: .22; }
@media (max-width: 900px) { .gal { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .gal { grid-template-columns: repeat(3, 1fr); } }


/* ===== v9: program categories + detail pages ===== */
.prog-filters { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:56px; }
.prog-filter {
  padding:12px 20px; border-radius:999px; border:1px solid var(--line-strong);
  background:transparent; color:var(--ink); cursor:pointer;
  font-family:var(--sans); font-size:11px; font-weight:700;
  letter-spacing:0.14em; text-transform:uppercase; transition:all .3s ease;
}
.prog-filter:hover { border-color:var(--maroon); color:var(--maroon); }
.prog-filter.is-active { background:var(--maroon); border-color:var(--maroon); color:var(--bone); }

.prog-facts {
  display:grid; grid-template-columns:repeat(5,1fr); gap:0;
  border:1px solid var(--line); border-radius:10px; overflow:hidden;
}
.prog-fact { padding:28px 24px; border-right:1px solid var(--line); }
.prog-fact:last-child { border-right:0; }
.prog-fact__k { display:block; font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:12px; }
.prog-fact__v { display:block; font-family:var(--serif); font-style:italic; font-size:22px; line-height:1.15; color:var(--ink); }
@media (max-width:900px){ .prog-facts{ grid-template-columns:repeat(2,1fr); } .prog-fact:nth-child(2n){border-right:0;} .prog-fact{border-bottom:1px solid var(--line);} }

.prog-flyer {
  position:relative; aspect-ratio:4/5; border-radius:10px; overflow:hidden;
  background:radial-gradient(circle at 40% 30%, rgba(109,26,36,0.14), transparent 60%),
            radial-gradient(circle at 80% 80%, rgba(22,41,90,0.12), transparent 60%),
            linear-gradient(180deg, var(--bone-2), var(--bone));
  border:1px dashed var(--line-strong);
  display:flex; align-items:center; justify-content:center;
}
.prog-flyer__mark { position:absolute; inset:22%; background-color:var(--maroon); opacity:0.14; }
.prog-flyer__label {
  position:relative; z-index:2; font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--mute); font-weight:700;
}


/* ===== v10: CYP feature ===== */
.cyp-feature { background: var(--bone); }
.cyp-areas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin: 64px 0 56px; border-top: 1px solid var(--line); }
.cyp-area { padding: 40px 24px; border-right: 1px solid var(--line); position: relative; }
.cyp-area:first-child { padding-left: 0; }
.cyp-area:last-child { border-right: 0; padding-right: 0; }
.cyp-area__num { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--gold); display: block; margin-bottom: 16px; }
.cyp-area__t { font-family: var(--sans); font-weight: 800; font-size: 15px; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 12px; line-height: 1.2; }
.cyp-area__d { font-size: 13.5px; color: var(--mute); line-height: 1.6; }
@media (max-width: 1000px) { .cyp-areas { grid-template-columns: repeat(2, 1fr); }
  .cyp-area { border-bottom: 1px solid var(--line); padding: 32px 20px; border-right: 1px solid var(--line); }
  .cyp-area:nth-child(2n) { border-right: 0; }
  .cyp-area:first-child { padding-left: 20px; } }
@media (max-width: 560px) { .cyp-areas { grid-template-columns: 1fr; }
  .cyp-area, .cyp-area:nth-child(2n) { border-right: 0; } }
.cyp-foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.cyp-facts { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); font-weight: 600; max-width: 60ch; }
.prog-facts--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .prog-facts--3 { grid-template-columns: 1fr; } }


/* ===== v11: CYP landing page ===== */
.cyp-vision { background: var(--navy-deep); color: var(--bone); }
.cyp-vision .eyebrow { color: var(--gold); }
.cyp-vision .eyebrow::before { background: var(--gold); }
.cyp-vision__list { list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:0 48px; margin-top:44px; }
.cyp-vision__list li { display:flex; gap:14px; font-size:16px; line-height:1.5; color:rgba(245,232,214,0.86); padding:20px 0; border-bottom:1px solid rgba(245,232,214,0.12); }
.cyp-vision__list li::before { content:''; flex:none; width:9px; height:9px; margin-top:7px; background:var(--gold); border-radius:2px; transform:rotate(45deg); }
@media (max-width:760px){ .cyp-vision__list { grid-template-columns:1fr; } }

.cyp-seek { list-style:none; display:grid; gap:0; }
.cyp-seek li { font-size:16px; padding:14px 0; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:14px; }
.cyp-seek li::before { content:''; width:8px; height:8px; background:var(--maroon); border-radius:50%; flex:none; }

.cyp-dev { display:grid; gap:0; margin-top:56px; border-top:1px solid var(--line); }
.cyp-dev__row { display:grid; grid-template-columns:80px 1fr; gap:28px; padding:36px 0; border-bottom:1px solid var(--line); align-items:start; }
.cyp-dev__num { font-family:var(--serif); font-style:italic; font-size:36px; color:var(--gold); line-height:1; }
.cyp-dev__t { font-family:var(--sans); font-weight:800; font-size:16px; letter-spacing:0.03em; text-transform:uppercase; margin-bottom:12px; }
.cyp-dev__d { font-size:15px; color:var(--ink-2); line-height:1.6; max-width:72ch; margin-bottom:12px; }
.cyp-dev__eg { font-size:14px; color:var(--mute); line-height:1.6; }
.cyp-dev__eg b { color:var(--maroon); font-weight:700; letter-spacing:0.1em; text-transform:uppercase; font-size:10px; margin-right:4px; }
@media (max-width:640px){ .cyp-dev__row { grid-template-columns:1fr; gap:10px; } }

.cyp-join { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; }
@media (max-width:760px){ .cyp-join { grid-template-columns:1fr; } }
.cyp-join__card { display:block; padding:32px; border:1px solid var(--line); border-radius:10px; background:var(--bone-3); transition:all .35s ease; }
.cyp-join__card:hover { border-color:var(--maroon); transform:translateY(-4px); box-shadow:0 30px 60px -30px rgba(26,15,8,0.2); }
.cyp-join__t { font-family:var(--serif); font-style:italic; font-size:24px; margin-bottom:10px; }
.cyp-join__d { font-size:14px; color:var(--mute); line-height:1.55; margin-bottom:16px; }
.cyp-join__link { font-size:11px; letter-spacing:0.2em; text-transform:uppercase; font-weight:700; color:var(--maroon); }


/* ===== v12: real flyers ===== */
.prog-flyer--filled { border: 1px solid var(--line) !important; padding: 0 !important; cursor: zoom-in; display: block; }
.prog-flyer--filled img { width: 100%; height: 100%; object-fit: cover; display: block; }
#lightbox {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(20,10,12,0.92); align-items: center; justify-content: center;
  padding: 24px; cursor: zoom-out; backdrop-filter: blur(6px);
}
#lightbox img { max-width: min(92vw, 620px); max-height: 92vh; border-radius: 8px; box-shadow: 0 40px 100px -20px rgba(0,0,0,0.6); }


/* ===== v14: flyers on program cards (shared via bg classes) ===== */
.pfly-program-sunday-school{background-image:url("img/69ed5b1e5a.jpg");}
.pfly-program-quran-little-hearts{background-image:url("img/a1fccf5524.jpg");}
.pfly-program-family-quranic-arabic{background-image:url("img/c89a0b6051.jpg");}
.pfly-program-kids-arabic-fusha{background-image:url("img/473fa8536b.jpg");}
.pfly-program-quran-institute-junior{background-image:url("img/6f2e1143d3.jpg");}
.pfly-program-companion-of-quran{background-image:url("img/1f903aedd8.jpg");}
.pfly-cyp-men-talk{background-image:url("img/8dba77f26f.jpg");}
.pfly-cyp-her-space{background-image:url("img/55afc00cb6.jpg");}
.card-flyer{ position:absolute !important; inset:0 !important; background-size:cover !important; background-position:center top !important; background-repeat:no-repeat !important; }
.card:hover .card-flyer{ transform:scale(1.05); }
.prog-flyer--filled{ background-size:cover; background-position:center; background-repeat:no-repeat; border:1px solid var(--line) !important; padding:0 !important; cursor:zoom-in; }


/* ===== v16: photoless staff/board directory ===== */
.team-card--nophoto { padding-top: 22px; border-top: 2px solid var(--maroon); }
.team-card--nophoto .team-card__name { margin-top: 0; }


/* ===== v17: events calendar + upcoming ===== */
.efly-chatgpt-image-jul-13-2026-02-55-41-pm-pn{background-image:url("img/72197eab7b.jpg");}
.efly-whatsapp-image-2026-07-15-at-13-57-58-jp{background-image:url("img/99095b1564.jpg");}
.efly-whatsapp-image-2026-07-12-at-20-20-32-jp{background-image:url("img/0cef5411a4.jpg");}
.efly-whatsapp-image-2026-07-12-at-19-52-41-jp{background-image:url("img/db78fd57a2.jpg");}
.efly-whatsapp-image-2026-07-15-at-10-17-32-jp{background-image:url("img/420b9b7cd8.jpg");}
.efly-chatgpt-image-jul-15-2026-12-43-41-pm-pn{background-image:url("img/ed1e69a9c2.jpg");}
.efly-whatsapp-image-2026-07-12-at-20-20-13-jp{background-image:url("img/cfd86ac3f7.jpg");}
.efly-chatgpt-image-jul-10-2026-01-37-29-pm-pn{background-image:url("img/992241f49b.jpg");}
.efly-whatsapp-image-2026-07-15-at-09-57-37-jp{background-image:url("img/715a4ba680.jpg");}
.efly-1784667471933-image-png{background-image:url("img/2807ae6cfe.jpg");}
.efly-1784667517558-image-png{background-image:url("img/243cc02786.jpg");}
.efly-1784667992456-image-png{background-image:url("img/13bb37be2b.jpg");}
.efly-1784667735500-image-png{background-image:url("img/d702ac149b.jpg");}
.efly-1784667728378-image-png{background-image:url("img/5676a56cb1.jpg");}
.ev-filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:56px;}
.ev-filter{padding:12px 22px;border-radius:999px;border:1px solid var(--line-strong);background:transparent;color:var(--ink);cursor:pointer;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;transition:all .3s ease;}
.ev-filter:hover{border-color:var(--maroon);color:var(--maroon);}
.ev-filter.is-active{background:var(--maroon);border-color:var(--maroon);color:var(--bone);}
.ev-month{margin-bottom:64px;}
.ev-month__label{margin-bottom:28px;border-bottom:1px solid var(--line);padding-bottom:14px;}
.ev-month__label span{font-family:var(--display);text-transform:uppercase;font-size:clamp(28px,4vw,44px);color:var(--maroon);letter-spacing:0.01em;}
.ev-list{display:grid;gap:22px;}
.ev-card{display:grid;grid-template-columns:200px 1fr;gap:0;background:var(--bone-3);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:box-shadow .35s ease,transform .35s ease;}
.ev-card:hover{transform:translateY(-3px);box-shadow:0 30px 60px -34px rgba(36,19,24,0.28);}
.ev-card__media{background-size:cover;background-position:center top;background-repeat:no-repeat;cursor:zoom-in;min-height:230px;}
.ev-card__media--tbd{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 40% 30%,rgba(109,26,36,0.14),transparent 60%),linear-gradient(180deg,var(--bone-2),var(--bone));cursor:default;}
.ev-card__media--tbd .logo-ornament{width:56%;height:56%;background-color:var(--maroon);opacity:0.16;}
.ev-card__body{padding:26px 30px;}
.ev-card__top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.ev-card__date{font-size:11px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--gold);}
.ev-badge{font-size:9px;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;padding:4px 10px;border-radius:999px;}
.ev-badge--event{background:rgba(109,26,36,0.10);color:var(--maroon);}
.ev-badge--program{background:rgba(22,41,90,0.12);color:var(--navy);}
.ev-card__note{font-size:11px;color:var(--mute);font-style:italic;font-family:var(--serif);}
.ev-card__title{font-family:var(--display);text-transform:uppercase;font-size:clamp(22px,2.4vw,30px);line-height:1.02;margin-bottom:10px;}
.ev-card__when{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--ink-2);margin-bottom:8px;}
.ev-card__tags{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--mute);font-weight:600;margin-bottom:14px;}
.ev-card__desc{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin-bottom:18px;}
.ev-card__cta{padding:12px 22px;font-size:11px;}
@media(max-width:720px){.ev-card{grid-template-columns:1fr;}.ev-card__media{min-height:280px;background-position:center top;}}

/* home upcoming */
.upc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media(max-width:900px){.upc-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.upc-grid{grid-template-columns:1fr;}}
.upc-card{display:block;background:var(--bone-3);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:transform .35s ease,box-shadow .35s ease;}
.upc-card:hover{transform:translateY(-4px);box-shadow:0 34px 64px -34px rgba(36,19,24,0.3);}
.upc-card__media{aspect-ratio:4/5;background-size:cover;background-position:center top;background-repeat:no-repeat;}
.upc-card__body{padding:22px 24px;}
.upc-card__date{font-size:11px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;}
.upc-card__title{font-family:var(--display);text-transform:uppercase;font-size:22px;line-height:1.05;margin-bottom:8px;}
.upc-card__when{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--mute);}

.prog-facts--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width:760px){ .prog-facts--4 { grid-template-columns: 1fr; } }

/* responsive prayer schedule (replaces cramped table on all sizes) */
.psched{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-top:8px; }
.psched__card{ border:1px solid rgba(245,237,224,0.14); border-radius:16px; padding:20px 12px; text-align:center; background:rgba(255,255,255,0.02); }
.psched__card--jumuah{ background:rgba(189,138,53,0.06); border-color:rgba(189,138,53,0.28); }
.psched__name{ font-family:var(--sans); font-size:11px; letter-spacing:0.24em; text-transform:uppercase; color:var(--clay); font-weight:700; margin-bottom:16px; }
.psched__line{ display:flex; flex-direction:column; gap:3px; margin-bottom:14px; }
.psched__line:last-child{ margin-bottom:0; }
.psched__line span{ font-family:var(--sans); font-size:10px; letter-spacing:0.16em; text-transform:uppercase; opacity:0.5; }
.psched__line b{ font-family:var(--display); font-style:italic; font-weight:400; font-size:27px; line-height:1; }
.psched__line b small{ font-family:var(--sans); font-style:normal; font-size:12px; opacity:0.6; margin-left:2px; }
.psched__line--iq b{ color:var(--clay); }
.psched__line--iq b.psched__wk{ font-size:16px; color:var(--clay); opacity:0.8; }
@media (max-width:900px){ .psched{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .psched{ grid-template-columns:repeat(2,1fr); gap:10px; } .psched__card{ padding:16px 8px; border-radius:13px; } .psched__line b{ font-size:24px; } .psched__name{ margin-bottom:12px; } }
/* mobile safety: break long emails/links so nothing overflows the viewport */
.page p, .page li, .page a, .page strong, .page span, .card, .team-card{ overflow-wrap:break-word; }


/* ===== mobile grid responsiveness (v21) ===== */
/* .grid-12 children use inline grid-column: span N — override for tablet/phone */
@media (max-width:900px){
  .grid-12 > *{ grid-column: span 6 !important; }      /* 2-up */
  .team-grid{ grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width:560px){
  .grid-12{ grid-template-columns: 1fr !important; }
  .grid-12 > *{ grid-column: 1 / -1 !important; }        /* full width */
  .team-grid{ grid-template-columns: 1fr !important; }
}


/* JS-driven: hide events whose date has passed */
.ev-card.ev-past{ display:none !important; }
/* current/next prayer highlight on worship schedule */
.psched__card--next{ border-color:rgba(189,138,53,0.55); background:rgba(189,138,53,0.10); box-shadow:0 0 0 1px rgba(189,138,53,0.25) inset; }
.psched__card--next .psched__name::after{ content:"NEXT"; display:block; margin-top:4px; font-size:8px; letter-spacing:0.18em; color:var(--gold); opacity:0.9; }
/* hero next-prayer marker */
.prayer-time--next{ background: rgba(189,138,53,0.12) !important; }
.prayer-time--next .prayer-time__name::after{ content:"• NEXT"; margin-left:4px; font-size:7px; letter-spacing:0.12em; color:var(--gold); vertical-align:middle; }

.efly-sleepers{background-image:url("img/cee290d910.jpg")}.efly-art-of-dawah{background-image:url("img/f38087ab98.jpg")}.pfly-sisters-tafsir{background-image:url("img/de9c4f9ca5.jpg")}