/* =====================================================================
   UMMA Centre — Design System
   Brand: deep teal-green anchor · antique gold hairline accent · ivory base
   Signature motif: the pointed mosque arch (from the logo)
   ===================================================================== */

@font-face {
  font-family: 'Goudy UMMA';
  src: url('../fonts/GoudyOldStyleBT.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Goudy UMMA';
  src: url('../fonts/GoudyOldStyleBoldBT.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Goudy UMMA';
  src: url('../fonts/GoudyOldStyleItalicBT.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Switzer UMMA';
  src: url('../fonts/Switzer-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Switzer UMMA';
  src: url('../fonts/Switzer-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Switzer UMMA';
  src: url('../fonts/Switzer-Semibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Switzer UMMA';
  src: url('../fonts/Switzer-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Brand colours (exact, from the live site) */
  --green:        #094949;
  --green-deep:   #063535;
  --green-700:    #0c5a5a;
  --gold:         #c2a14b;
  --gold-soft:    #d9c188;
  --ivory:        #fbf8f1;
  --ivory-2:      #f4eee1;
  --sage:         #eaf0ed;
  --ink:          #14201e;
  --muted:        #4c5b58;
  --line:         #dfe6e2;

  /* Type */
  --font-display: 'Goudy UMMA', 'Goudy Old Style', Georgia, serif;
  --font-body:    'Switzer UMMA', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-arabic:  'Goudy UMMA', Georgia, serif;

  --fs-hero: clamp(2.75rem, 6.2vw, 5.25rem);
  --fs-h1:   clamp(2.15rem, 4.6vw, 3.4rem);
  --fs-h2:   clamp(1.7rem, 3.2vw, 2.5rem);
  --fs-h3:   clamp(1.25rem, 2vw, 1.55rem);
  --fs-lead: clamp(1.08rem, 1.5vw, 1.28rem);

  /* Space */
  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4rem, 9vw, 7.5rem);

  /* Radii / shadow / motion */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --shadow-sm: 0 2px 10px rgba(9, 73, 73, .06);
  --shadow-md: 0 14px 40px -18px rgba(9, 73, 73, .28);
  --shadow-lg: 0 30px 70px -28px rgba(6, 53, 53, .45);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-fast: 180ms var(--ease);
  --t: 280ms var(--ease);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--ivory);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
ul { list-style: none; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.06; letter-spacing: 0; color: var(--green-deep); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: 0; }

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

::selection { background: var(--gold-soft); color: var(--green-deep); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 880px; }
.section { padding-block: var(--section-y); }
.section--tint { background: var(--sage); }
.section--green { background: var(--green); color: var(--ivory); }
.section--green h1, .section--green h2, .section--green h3 { color: var(--ivory); }

.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } }

.center { text-align: center; }
.measure { max-width: 62ch; }
.measure--mx { margin-inline: auto; }

/* ---------- Eyebrow / section heads ---------- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: none;
  letter-spacing: .01em;
  line-height: 1.35;
  font-size: .88rem;
  color: var(--gold);
}
.eyebrow--center { text-align: center; }

.section-head { max-width: 64ch; }
.section-head .lead { margin-top: 1rem; color: var(--muted); font-size: var(--fs-lead); }
.lead { font-size: var(--fs-lead); color: var(--muted); }

/* ---------- Arch motif ---------- */
.arch-rule { display: block; margin-inline: auto; color: var(--gold); }
.arch-rule path { fill: none; stroke: currentColor; stroke-width: 1.25; }

/* Mihrab-topped frame for imagery */
.archframe {
  position: relative;
  border-radius: 50% 50% var(--r-md) var(--r-md) / 28% 28% var(--r-md) var(--r-md);
  overflow: hidden;
  background: var(--green-deep);
  box-shadow: var(--shadow-md);
}
.archframe::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(194, 161, 75, .55);
  pointer-events: none;
}
.archframe img { width: 100%; height: 100%; object-fit: cover; }

.instagram-reel-frame {
  min-height: 620px;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 2vw, 1.5rem);
  border-radius: var(--r-lg);
  border: 1px solid rgba(194, 161, 75, .28);
  background:
    radial-gradient(circle at 85% 12%, rgba(217, 193, 136, .16), transparent 38%),
    linear-gradient(145deg, rgba(6, 53, 53, .98), rgba(9, 73, 73, .92));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.instagram-reel-frame .instagram-media {
  width: min(100%, 420px) !important;
  min-width: 0 !important;
  max-width: 420px !important;
  margin: 0 auto !important;
}

@media (max-width: 620px) {
  .instagram-reel-frame {
    min-height: 520px;
    padding: .75rem;
  }
}

/* ---------- Buttons ---------- */
.btn {
  --b-pad-y: .85rem; --b-pad-x: 1.6rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: var(--b-pad-y) var(--b-pad-x);
  font-weight: 600; font-size: .95rem; letter-spacing: .01em;
  border-radius: 999px;
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t), transform var(--t-fast), border-color var(--t-fast);
  will-change: transform;
}
.btn svg { width: 1.05em; height: 1.05em; }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--green); color: var(--ivory); box-shadow: inset 0 0 0 1px transparent; }
.btn-primary:hover { background: var(--green-deep); box-shadow: inset 0 0 0 1px var(--gold), var(--shadow-md); }

.btn-gold { background: var(--gold); color: var(--green-deep); }
.btn-gold:hover { background: var(--gold-soft); box-shadow: var(--shadow-md); }

.btn-ivory {
  background: var(--ivory);
  color: var(--green-deep);
  box-shadow: inset 0 0 0 1px rgba(194, 161, 75, .62), var(--shadow-sm);
}
.btn-ivory:hover {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--gold), var(--shadow-md);
}

.btn-outline { background: transparent; color: var(--green); box-shadow: inset 0 0 0 1px var(--line); }
.btn-outline:hover { box-shadow: inset 0 0 0 1px var(--green); background: rgba(9, 73, 73, .04); }

.btn-ghost-light { color: var(--ivory); box-shadow: inset 0 0 0 1px rgba(251, 248, 241, .35); }
.btn-ghost-light:hover { box-shadow: inset 0 0 0 1px var(--gold-soft); background: rgba(251, 248, 241, .08); }

.btn-lg { --b-pad-y: 1.05rem; --b-pad-x: 2rem; font-size: 1rem; }
.btn-block { width: 100%; }

/* Animated gold underline link */
.ulink { position: relative; color: var(--green); font-weight: 600; }
.ulink::after {
  content: ""; position: absolute; left: 0; bottom: -3px; height: 1.5px; width: 100%;
  background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform var(--t);
}
.ulink:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Navbar ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transition: background var(--t), box-shadow var(--t), padding var(--t);
  padding-block: 1.1rem;
}
.nav.is-stuck {
  background: rgba(4, 35, 30, .72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(217, 193, 136, .16), 0 18px 55px rgba(6, 53, 53, .22);
  padding-block: .65rem;
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.nav__logo img { height: 46px; transition: height var(--t); }
.nav.is-stuck .nav__logo img { height: 38px; }
.nav__links { display: flex; align-items: center; gap: 1.9rem; }
/* Donate button inside the menu list is for mobile only; desktop uses .nav__cta */
.nav__links .btn-gold { display: none; }
/* The CTA cluster's quick-link duplicates a primary nav item — hide it */
.nav__cta .nav__link { display: none; }
.nav__link {
  position: relative; font-weight: 500; font-size: .95rem; color: var(--green-deep);
  padding-block: .4rem;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px;
  background: var(--gold); transform: scaleX(0); transform-origin: center; transition: transform var(--t);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--green); }
.nav__cta { display: flex; align-items: center; gap: .75rem; }

/* When the hero sits behind a transparent nav, lighten links until stuck */
.nav:not(.is-stuck).nav--on-dark .nav__link { color: var(--ivory); }
.nav:not(.is-stuck).nav--on-dark .nav__logo img { filter: none; }
.nav:not(.is-stuck).nav--on-dark .nav__toggle span { background: var(--ivory); }

.nav__toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content: ""; display: block; width: 24px; height: 2px; background: var(--green-deep); border-radius: 2px;
  transition: transform var(--t), opacity var(--t-fast);
}
.nav__toggle span { position: relative; }
.nav__toggle span::before { position: absolute; top: -7px; left: 0; }
.nav__toggle span::after { position: absolute; top: 7px; left: 0; }
body.menu-open .nav__toggle span { background: transparent; }
body.menu-open .nav__toggle span::before { transform: translateY(7px) rotate(45deg); }
body.menu-open .nav__toggle span::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav__toggle { display: inline-flex; }
  .nav__links {
    position: fixed; inset: 0 0 0 auto; width: min(86vw, 360px);
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.4rem;
    background: var(--ivory); padding: 2rem var(--gutter);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%); transition: transform var(--t);
  }
  .nav__links .nav__link { font-size: 1.2rem; }
  .nav__links .btn-gold { display: inline-flex; }
  .nav__cta { display: none; }
  /* The slide-out panel is ivory, so links must be dark even over a dark hero */
  .nav:not(.is-stuck).nav--on-dark .nav__links .nav__link { color: var(--green-deep); }
  body.menu-open .nav.is-stuck .nav__links .nav__link { color: var(--green-deep); }
  body.menu-open .nav__links { transform: translateX(0); }
  body.menu-open::after {
    content: ""; position: fixed; inset: 0; z-index: 40; background: rgba(6, 53, 53, .45);
    backdrop-filter: blur(2px);
  }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; color: var(--ivory);
  background: radial-gradient(120% 120% at 80% -10%, var(--green-700) 0%, var(--green) 45%, var(--green-deep) 100%);
  overflow: hidden;
  padding-top: clamp(8rem, 16vh, 11rem);
  padding-bottom: clamp(4rem, 9vw, 7rem);
}
.hero__pattern {
  position: absolute; inset: 0; opacity: .10; color: var(--gold-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='140' viewBox='0 0 80 140'%3E%3Cg fill='none' stroke='%23d9c188' stroke-width='1'%3E%3Cpath d='M40 4 C58 14 70 36 70 70 C70 104 58 126 40 136 C22 126 10 104 10 70 C10 36 22 14 40 4 Z'/%3E%3Cpath d='M40 28 C50 34 58 48 58 70 C58 92 50 106 40 112 C30 106 22 92 22 70 C22 48 30 34 40 28 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 80px 140px;
  -webkit-mask-image: radial-gradient(120% 90% at 70% 0%, #000 0%, transparent 70%);
  mask-image: radial-gradient(120% 90% at 70% 0%, #000 0%, transparent 70%);
}
.hero__glow { position: absolute; width: 60vmax; height: 60vmax; right: -20vmax; top: -25vmax; background: radial-gradient(circle, rgba(194,161,75,.25), transparent 60%); pointer-events: none; }
.hero__inner { position: relative; z-index: 2; max-width: 760px; }
.hero h1 { color: var(--ivory); font-size: var(--fs-hero); }
.hero .hero__lead { color: rgba(251, 248, 241, .82); font-size: var(--fs-lead); margin-top: 1.25rem; max-width: 54ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }
.hero__arch { position: absolute; right: clamp(-2rem, 4vw, 5rem); bottom: -2px; width: clamp(160px, 26vw, 360px); color: rgba(217, 193, 136, .5); z-index: 1; }
.hero__arch path { fill: none; stroke: currentColor; stroke-width: 1; }

/* Next-prayer strip inside hero */
.nextprayer {
  position: relative; z-index: 2; margin-top: 2.75rem;
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 1.4rem;
  padding: 1rem 1.5rem; border-radius: var(--r-md);
  background: rgba(251, 248, 241, .07); border: 1px solid rgba(217, 193, 136, .3);
  backdrop-filter: blur(6px);
}
.nextprayer__label { text-transform: uppercase; letter-spacing: .2em; font-size: .7rem; color: var(--gold-soft); font-weight: 600; }
.nextprayer__name { font-family: var(--font-display); font-size: 1.4rem; color: var(--ivory); }
.nextprayer__time { font-family: var(--font-display); font-size: 1.4rem; color: var(--gold-soft); }
.nextprayer__count { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ivory); }
.nextprayer__sep { width: 1px; height: 34px; background: rgba(217,193,136,.3); }

/* ---------- Cards ---------- */
.card {
  background: var(--ivory); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.5rem, 2.5vw, 2.1rem);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  height: 100%;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--gold-soft); }
.card__icon {
  width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center;
  background: var(--sage); color: var(--green); margin-bottom: 1.1rem;
}
.card__icon svg { width: 26px; height: 26px; stroke-width: 1.5; }
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--muted); font-size: .96rem; }
.card--green { background: var(--green); border-color: var(--green-deep); }
.card--green h3 { color: var(--ivory); }
.card--green p { color: rgba(251,248,241,.78); }
.card--green .card__icon { background: rgba(217,193,136,.16); color: var(--gold-soft); }

.appeal-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: clamp(1rem, 2.4vw, 2rem);
  align-items: stretch;
}
.appeal-visual {
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--ivory);
  box-shadow: var(--shadow);
}
.appeal-visual img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  display: block;
}
.appeal-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
}
.appeal-gallery img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  display: block;
}
.appeal-gallery img:first-child {
  grid-column: 1 / -1;
}
#building-appeal {
  scroll-margin-top: 110px;
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
}
.js #building-appeal .reveal,
.js #building-appeal .reveal-scale {
  opacity: 1;
  transform: none;
}
#building-appeal .card {
  background: rgba(251, 248, 241, .075);
  border-color: rgba(217, 193, 136, .28);
  box-shadow: none;
}
#building-appeal .card:hover {
  border-color: rgba(217, 193, 136, .55);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .16);
}
#building-appeal .card p,
#building-appeal .card .muted {
  color: rgba(251, 248, 241, .76);
}
#building-appeal .appeal-visual,
#building-appeal .appeal-gallery img {
  border-color: rgba(217, 193, 136, .34);
  box-shadow: 0 18px 54px rgba(0, 0, 0, .2);
}
#building-bank-details {
  scroll-margin-top: 120px;
}
.donate-contact-actions {
  justify-content: center;
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
@media (max-width: 900px) {
  .appeal-showcase { grid-template-columns: 1fr; }
  .appeal-visual img { min-height: 280px; }
}
@media (max-width: 620px) {
  .appeal-gallery { grid-template-columns: 1fr; }
  .appeal-gallery img:first-child { grid-column: auto; }
}

/* ---------- Prayer board ---------- */
.board { display: grid; gap: 1rem; grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1000px) { .board { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .board { grid-template-columns: repeat(2, 1fr); } }
.ptile {
  position: relative; text-align: center; overflow: hidden;
  background: var(--ivory); border: 1px solid var(--line);
  border-radius: 50% 50% var(--r-md) var(--r-md) / 20% 20% var(--r-md) var(--r-md);
  padding: 1.5rem 1rem 1.25rem;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t), background var(--t);
}
.ptile__name { font-family: var(--font-display); font-size: 1.15rem; color: var(--green); letter-spacing: .03em; }
.ptile__arabic { font-family: var(--font-arabic); font-size: 1.05rem; color: var(--gold); margin-top: .1rem; }
.ptile__adhan { font-size: 1.5rem; font-weight: 600; color: var(--ink); margin-top: .7rem; font-variant-numeric: tabular-nums; }
.ptile__adhan .ap { font-size: .68em; margin-left: .2em; font-weight: 600; }
.ptile__iqamah { display: flex; align-items: baseline; justify-content: center; gap: .4rem; font-size: .86rem; color: var(--muted); margin-top: .25rem; text-transform: uppercase; letter-spacing: .07em; }
.ptile__iqamah .lbl { font-size: .76rem; }
.ptile__iqamah b { color: var(--green); font-size: 1.08rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.ptile.is-next {
  background: var(--green); border-color: var(--green-deep); box-shadow: var(--shadow-md); transform: translateY(-4px);
}
.ptile.is-next .ptile__name { color: var(--gold-soft); }
.ptile.is-next .ptile__arabic { color: var(--gold-soft); }
.ptile.is-next .ptile__adhan { color: var(--ivory); }
.ptile.is-next .ptile__iqamah { color: rgba(251,248,241,.7); }
.ptile.is-next .ptile__iqamah b { color: var(--gold-soft); }
.ptile__flag {
  position: absolute; top: .6rem; left: 50%; transform: translateX(-50%);
  font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
  color: var(--gold-soft); opacity: 0;
}
.ptile.is-next .ptile__flag { opacity: 1; }

.board-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem; }
.board-date { font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.9rem); color: var(--green-deep); }
.board-hijri { color: var(--gold); font-weight: 600; letter-spacing: .04em; }
.countdown-pill {
  display: inline-flex; align-items: center; gap: .6rem; padding: .55rem 1.1rem; border-radius: 999px;
  background: var(--green); color: var(--ivory); font-weight: 600;
}
.countdown-pill b { color: var(--gold-soft); font-variant-numeric: tabular-nums; }

.jummah-card {
  display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between;
  background: var(--green); color: var(--ivory); border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-md); position: relative; overflow: hidden;
}
.jummah-card .jslot { text-align: center; }
.jummah-card .jslot small { display: block; text-transform: uppercase; letter-spacing: .16em; font-size: .68rem; color: var(--gold-soft); }
.jummah-card .jslot strong { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 400; color: var(--ivory); }

/* ---------- Donate widget ---------- */
.donate-card {
  background: var(--ivory); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: clamp(1.5rem, 3vw, 2.5rem);
}
.seg {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 5px;
  background: var(--sage); border-radius: 999px;
}
.seg button {
  position: relative; padding: .8rem 1rem; border-radius: 999px; font-weight: 600; font-size: .95rem;
  color: var(--muted); transition: color var(--t-fast);
}
.seg button[aria-pressed="true"] { color: var(--ivory); }
.seg__pill {
  position: absolute; inset: 5px auto 5px 5px; width: calc(50% - 5px);
  background: var(--green); border-radius: 999px; transition: transform var(--t); z-index: 0;
}
.seg button span { position: relative; z-index: 1; }
.seg[data-active="recurring"] .seg__pill { transform: translateX(100%); }

.amount-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-top: 1.25rem; }
.amount-grid button {
  padding: 1rem .5rem; border-radius: var(--r-md); border: 1.5px solid var(--line); background: var(--ivory);
  font-weight: 600; font-size: 1.05rem; color: var(--green-deep); transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.amount-grid button .freq { display: block; font-size: .68rem; font-weight: 500; color: var(--muted); letter-spacing: .04em; }
.amount-grid button:hover { border-color: var(--gold-soft); }
.amount-grid button[aria-pressed="true"] { border-color: var(--green); background: var(--sage); }
.field { margin-top: 1.1rem; }
.field label { display: block; font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: .45rem; }
.field .input-money { position: relative; }
.field .input-money span { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 600; }
.input, .field input, .field select, .field textarea {
  width: 100%; padding: .9rem 1rem; border-radius: var(--r-md); border: 1.5px solid var(--line);
  background: var(--ivory); transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field .input-money input { padding-left: 2rem; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(9,73,73,.1); }
.form-optional { font-weight: 500; letter-spacing: 0; text-transform: none; }
.form-consent { display: flex; align-items: flex-start; gap: .65rem; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.form-consent input { width: 1.1rem; height: 1.1rem; margin-top: .15rem; accent-color: var(--green); flex: 0 0 auto; }
.file-input { padding: .65rem !important; }
.file-input::file-selector-button { border: 0; border-radius: .45rem; background: var(--green); color: var(--ivory); padding: .55rem .75rem; margin-right: .7rem; font-weight: 600; cursor: pointer; }
.form-note--error { color: #9f2d2d !important; }
.btn:disabled { opacity: .65; cursor: wait; }
.designation { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .6rem; }
.chip {
  padding: .42rem .72rem; border-radius: 999px; border: 1.5px solid var(--line); font-size: .8rem; font-weight: 600; color: var(--muted);
  transition: all var(--t-fast);
}
.chip[aria-pressed="true"] { border-color: var(--green); color: var(--green); background: var(--sage); }
.donate-total { display: flex; align-items: baseline; justify-content: space-between; margin: 1.4rem 0 1rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.donate-total .amt { font-family: var(--font-display); font-size: 2rem; color: var(--green-deep); }
.donate-total .amt .per { font-family: var(--font-body); font-size: .9rem; color: var(--muted); font-weight: 500; }
.support-dock { display: none; }

@media (max-width: 760px) {
  .support-dock {
    position: fixed; z-index: 90; left: 1rem; right: 1rem; bottom: max(1rem, env(safe-area-inset-bottom));
    display: flex; align-items: center; gap: .7rem; padding: .72rem .9rem;
    color: var(--ivory); background: rgba(9, 73, 73, .96); border: 1px solid rgba(217, 193, 136, .5);
    border-radius: 999px; box-shadow: 0 14px 38px rgba(5, 38, 33, .28); backdrop-filter: blur(12px);
    opacity: 0; visibility: hidden; transform: translateY(calc(100% + 1.5rem));
    transition: opacity var(--t), transform var(--t), visibility var(--t);
  }
  .support-dock.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
  .support-dock__icon { display: grid; place-items: center; width: 2rem; height: 2rem; flex: 0 0 auto; border-radius: 50%; background: rgba(217, 193, 136, .16); color: var(--gold-soft); font-size: 1.25rem; }
  .support-dock strong, .support-dock small { display: block; line-height: 1.2; }
  .support-dock strong { font-size: .92rem; }
  .support-dock small { margin-top: .12rem; color: rgba(251, 248, 241, .72); font-size: .7rem; }
  .support-dock__arrow { margin-left: auto; color: var(--gold-soft); font-size: 1.15rem; }
  body.menu-open .support-dock { opacity: 0; visibility: hidden; pointer-events: none; }
}
.embedded-checkout { width: min(100%, 680px); }
.embedded-checkout__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.embedded-checkout__head .btn { flex: 0 0 auto; padding: .65rem .9rem; }
#stripe-embedded-checkout { min-height: 420px; }
.donation-use-list { margin-top: 1.5rem; border-top: 1px solid var(--line); }
.donation-use-list > div { display: grid; grid-template-columns: minmax(135px, .7fr) 1.5fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.donation-use-list strong { color: var(--green-deep); }
.donation-use-list span { color: var(--muted); }
.fund-guide { max-width: 900px; margin-inline: auto; border-top: 1px solid var(--line); }
.fund-guide__item { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 1rem; padding: 1.25rem .25rem; border-bottom: 1px solid var(--line); color: inherit; transition: padding var(--t-fast), background var(--t-fast); }
.fund-guide__item:hover { padding-inline: 1rem; background: rgba(9, 73, 73, .035); }
.fund-guide__number { font-family: var(--font-display); color: var(--gold); font-size: 1.15rem; }
.fund-guide__item strong, .fund-guide__item small { display: block; }
.fund-guide__item strong { color: var(--green-deep); font-size: 1.1rem; }
.fund-guide__item small { margin-top: .25rem; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.fund-guide__item b { color: var(--green); font-size: .82rem; }

@media (max-width: 520px) {
  .embedded-checkout__head { align-items: stretch; flex-direction: column; }
  .embedded-checkout__head .btn { align-self: flex-start; }
  .donation-use-list > div { grid-template-columns: 1fr; gap: .25rem; }
  .fund-guide__item { grid-template-columns: 36px 1fr; }
  .fund-guide__item b { display: none; }
}

/* ---------- Hadith block ---------- */
.hadith {
  text-align: center; position: relative; padding: clamp(2rem, 5vw, 3.5rem);
}
.hadith__ar { font-family: var(--font-arabic); font-size: clamp(1.6rem, 3.4vw, 2.6rem); color: var(--gold-soft); direction: rtl; line-height: 1.9; }
.hadith__en { font-family: var(--font-display); font-size: clamp(1.4rem, 2.8vw, 2.1rem); color: var(--ivory); margin-top: 1.1rem; line-height: 1.4; }
.hadith__src { display: inline-block; margin-top: 1.2rem; color: var(--gold-soft); letter-spacing: .14em; text-transform: uppercase; font-size: .75rem; font-weight: 600; }

/* ---------- Stat / feature rows ---------- */
.stat { text-align: center; }
.stat__num { font-family: var(--font-display); font-size: clamp(2.2rem, 4.5vw, 3.4rem); color: var(--green); line-height: 1; }
.stat__num .suffix { color: var(--gold); }
.stat__label { margin-top: .5rem; color: var(--muted); font-size: .9rem; letter-spacing: .04em; }

.home-directory__layout {
  display: grid;
  grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}

.home-directory__intro {
  position: sticky;
  top: 7rem;
}

.home-directory__intro .lead {
  max-width: 36ch;
}

.home-directory__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 4vw, 4rem);
}

.home-directory__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: center;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  transition: padding-left var(--t-fast), border-color var(--t-fast);
}

.home-directory__item h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
}

.home-directory__item p {
  max-width: 38ch;
  margin-top: .45rem;
  color: var(--muted);
}

.home-directory__item b {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--t-fast), transform var(--t-fast);
}

.home-directory__item:hover,
.home-directory__item:focus-visible {
  padding-left: .5rem;
  border-color: rgba(194, 161, 75, .5);
}

.home-directory__item:hover b,
.home-directory__item:focus-visible b {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 960px) {
  .home-directory__layout,
  .home-directory__list {
    grid-template-columns: 1fr;
  }

  .home-directory__intro {
    position: static;
  }

  .home-directory__item b {
    opacity: 1;
    transform: none;
  }
}

.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.tlist { display: grid; gap: 1.1rem; margin-top: 1.5rem; }
.tlist li { display: flex; gap: .9rem; align-items: flex-start; }
.tlist .tick { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--sage); color: var(--green); display: grid; place-items: center; margin-top: 2px; }
.tlist .tick svg { width: 15px; height: 15px; stroke-width: 2.2; }
.tlist b { color: var(--green-deep); font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; }
.tlist p { color: var(--muted); font-size: .95rem; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; background: var(--green-deep); color: var(--ivory); border-radius: var(--r-lg); padding: clamp(2.5rem, 6vw, 4.5rem); text-align: center; }
.cta-band h2 { color: var(--ivory); }
.cta-band .hero__pattern { opacity: .08; }

/* ---------- Footer ---------- */
.footer { background: var(--green-deep); color: rgba(251,248,241,.7); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.footer a { color: rgba(251,248,241,.7); transition: color var(--t-fast); }
.footer a:hover { color: var(--gold-soft); }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 2.5rem; }
@media (max-width: 820px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__logo img { height: 46px; margin-bottom: 1.1rem; }
.footer h4 { color: var(--gold-soft); font-family: var(--font-body); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; margin-bottom: 1.1rem; }
.footer ul { display: grid; gap: .65rem; font-size: .95rem; }
.footer__bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(251,248,241,.12); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .85rem; }

/* ---------- Page header (interior) ---------- */
.pagehead { position: relative; overflow: hidden; background: var(--green); color: var(--ivory); padding-top: clamp(7.5rem, 14vh, 10rem); padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.pagehead h1 { color: var(--ivory); }
.pagehead .lead { color: rgba(251,248,241,.82); margin-top: 1rem; }
.pagehead--events { padding-bottom: clamp(2rem, 4vw, 3rem); }
.crumbs { display: flex; gap: .5rem; align-items: center; font-size: .82rem; color: var(--gold-soft); letter-spacing: .06em; margin-bottom: 1rem; }
.crumbs a:hover { color: var(--ivory); }

/* ---------- Helpers ---------- */
.flex { display: flex; }
.wrap { flex-wrap: wrap; }
.aic { align-items: center; }
.jcb { justify-content: space-between; }
.gap-sm { gap: .75rem; } .gap { gap: 1.25rem; }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.mb-1 { margin-bottom: 1rem; }
.muted { color: var(--muted); }
.gold { color: var(--gold); }
.tabnum { font-variant-numeric: tabular-nums; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--gold); color: var(--green-deep);
  padding: .75rem 1.25rem; border-radius: 0 0 var(--r-sm) 0; font-weight: 600;
}
.skip:focus { left: 0; }

/* ---------- Scroll reveal (progressive enhancement) ----------
   Hidden initial state only applies when JS is active (html.js), so content
   is always visible if JS is disabled, slow, or fails. */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }
.js .reveal-scale { opacity: 0; transform: scale(.96); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms); }
.reveal-scale.in { opacity: 1; transform: none; }

/* draw-in for SVG arches */
.js .draw path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.draw.in path { animation: draw 2s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- Premium revamp layer ----------
   Site-wide polish for the public website. This intentionally sits after the
   core system so existing pages inherit the upgraded composition without
   requiring a full HTML rewrite first. */
:root {
  --container: 1260px;
  --section-y: clamp(5rem, 10vw, 8.5rem);
  --surface: rgba(255, 252, 246, .78);
  --surface-strong: rgba(251, 248, 241, .94);
  --glass-line: rgba(217, 193, 136, .28);
}

body {
  background:
    linear-gradient(180deg, var(--ivory) 0%, #fffdf8 38%, var(--ivory-2) 100%);
}

.section {
  position: relative;
}

.section:not(.section--green):not(.section--tint)::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(194, 161, 75, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(194, 161, 75, .045) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
  opacity: .42;
}

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

.nav {
  padding-block: 1.35rem;
}

.nav__inner {
  min-height: 56px;
}

.nav__logo img {
  height: 58px;
}

.nav.is-stuck .nav__logo img {
  height: 46px;
}

.nav.is-stuck {
  background: rgba(4, 35, 30, .72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(217, 193, 136, .16), 0 18px 55px rgba(6, 53, 53, .22);
}

.nav:not(.is-stuck).nav--on-dark {
  background: linear-gradient(180deg, rgba(4, 28, 24, .42), transparent);
}

.nav__links {
  gap: .55rem;
  padding: .4rem;
  border: 1px solid rgba(217, 193, 136, .16);
  border-radius: 999px;
  background: rgba(4, 35, 30, .16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.nav.is-stuck .nav__links {
  background: rgba(6, 53, 53, .5);
  border-color: rgba(217, 193, 136, .22);
}

.nav.is-stuck .nav__link {
  color: var(--ivory);
}

.nav.is-stuck .nav__link[aria-current="page"] {
  color: var(--gold-soft);
}

.nav.is-stuck .nav__toggle span,
.nav.is-stuck .nav__toggle span::before,
.nav.is-stuck .nav__toggle span::after {
  background: var(--ivory);
}

.nav__link {
  padding: .55rem .85rem;
  border-radius: 999px;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}

.nav__link:hover,
.nav__link[aria-current="page"] {
  background: rgba(217, 193, 136, .15);
}

.nav__link::after {
  display: none;
}

.event-feature--details-only {
  grid-template-columns: minmax(0, 1fr);
  max-width: 820px;
  margin-inline: auto;
}

.nav__dropdown {
  position: relative;
}

.nav__submenu-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.nav__chevron {
  width: .5rem;
  height: .5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--t-fast);
}

.nav__dropdown.is-open .nav__chevron {
  transform: translateY(2px) rotate(225deg);
}

.nav__submenu {
  position: absolute;
  top: calc(100% + .8rem);
  left: 50%;
  z-index: 90;
  width: min(310px, 80vw);
  padding: .65rem;
  border: 1px solid rgba(9, 73, 73, .12);
  border-radius: var(--r-md);
  background: var(--ivory);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -.5rem);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}

.nav__dropdown.is-open .nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.nav__submenu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .72rem .8rem;
  border-radius: .7rem;
  color: var(--green-deep);
  font-size: .92rem;
  font-weight: 600;
}

.nav__submenu a:hover,
.nav__submenu a:focus-visible {
  background: rgba(9, 73, 73, .08);
}

.nav__submenu-urgent::after {
  content: "Urgent support";
  padding: .2rem .4rem;
  border-radius: 999px;
  background: rgba(194, 161, 75, .16);
  color: var(--green-deep);
  font-size: .62rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.nav__submenu-all {
  margin-top: .35rem;
  border-top: 1px solid rgba(9, 73, 73, .1);
  color: var(--green) !important;
}

.nav__submenu-all--top {
  margin: 0 0 .35rem;
  border-top: 0;
  border-bottom: 1px solid rgba(9, 73, 73, .1);
}

.job-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: .38rem .7rem;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.job-status--open {
  background: rgba(24, 133, 91, .12);
  color: #126443;
}

.job-status--closed {
  background: rgba(9, 73, 73, .08);
  color: var(--muted);
}

.job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.2rem;
  margin-top: .8rem;
  color: var(--muted);
  font-size: .92rem;
}

.job-card--open {
  border-color: rgba(194, 161, 75, .42);
  box-shadow: var(--shadow-md);
}

@media (max-width: 940px) {
  .nav__toggle {
    position: relative;
    z-index: 70;
  }

  body.menu-open {
    overflow: hidden;
  }

  .nav__links,
  .nav.is-stuck .nav__links {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 60;
    width: min(88vw, 380px);
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1.25rem;
    padding: max(6.5rem, calc(env(safe-area-inset-top) + 5rem)) var(--gutter) max(2rem, env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
    background: var(--ivory);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    overflow-y: auto;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body.menu-open .nav__links,
  body.menu-open .nav.is-stuck .nav__links {
    transform: translateX(0);
  }

  .nav__links .nav__link,
  .nav.is-stuck .nav__links .nav__link,
  .nav:not(.is-stuck).nav--on-dark .nav__links .nav__link {
    color: var(--green-deep);
  }

  .nav__dropdown {
    width: 100%;
  }

  .nav__submenu-toggle {
    width: 100%;
    justify-content: space-between;
    text-align: left;
  }

  .nav__submenu {
    position: static;
    width: 100%;
    max-height: 0;
    padding: 0 .35rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: hidden;
    overflow: hidden;
    transform: none;
    transition: max-height var(--t), padding var(--t), visibility var(--t);
  }

  .nav__dropdown.is-open .nav__submenu {
    max-height: 32rem;
    padding: .45rem .35rem .2rem;
    visibility: visible;
    transform: none;
  }

  .nav__submenu a {
    min-height: 46px;
    padding: .7rem .8rem;
    font-size: .98rem;
  }
}

.hero {
  min-height: 92svh;
  display: flex;
  align-items: center;
  padding-top: clamp(8.5rem, 15vh, 12rem);
  padding-bottom: clamp(5rem, 10vw, 8rem);
  background:
    linear-gradient(115deg, rgba(3, 23, 20, .96) 0%, rgba(6, 53, 53, .98) 48%, rgba(9, 73, 73, .92) 100%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(108deg, transparent 0 58%, rgba(217, 193, 136, .1) 58.15%, transparent 58.35%),
    linear-gradient(112deg, transparent 0 64%, rgba(217, 193, 136, .075) 64.1%, transparent 64.25%);
}

.hero__photo {
  position: absolute;
  inset: 0 -5vw 0 auto;
  width: min(66vw, 1040px);
  background:
    linear-gradient(90deg, rgba(3, 23, 20, 1) 0%, rgba(6, 53, 53, .88) 22%, rgba(6, 53, 53, .36) 52%, rgba(6, 53, 53, .64) 100%),
    linear-gradient(180deg, rgba(3, 23, 20, .28), rgba(3, 23, 20, .58)),
    url("../img/centre/umma-centre-aerial.webp") 56% center / cover no-repeat;
  opacity: .9;
  filter: saturate(.88) contrast(1.04);
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 100%);
  pointer-events: none;
}

.hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(6, 53, 53, .8), transparent 44%),
    radial-gradient(circle at 65% 20%, rgba(217, 193, 136, .16), transparent 35%);
}

.hero__glow {
  display: none;
}

.hero__pattern {
  opacity: .16;
  animation: pattern-drift 24s linear infinite;
}

.hero__inner {
  max-width: min(840px, 68vw);
}

.hero h1 {
  max-width: 13.8ch;
  text-wrap: balance;
  text-shadow: 0 18px 44px rgba(0, 0, 0, .28);
}

.hero .hero__lead {
  max-width: 68ch;
  color: rgba(251, 248, 241, .86);
}

.hero__arch {
  right: clamp(1rem, 5vw, 6rem);
  width: clamp(240px, 31vw, 470px);
  color: rgba(217, 193, 136, .25);
}

.nextprayer {
  background: rgba(251, 248, 241, .09);
  border-color: rgba(217, 193, 136, .42);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), 0 24px 60px rgba(0, 0, 0, .18);
}

.btn {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.btn:hover {
  transform: translateY(-2px);
}

.card,
.donate-card,
.ptile,
.cta-band,
.archframe {
  box-shadow: 0 18px 60px -36px rgba(6, 53, 53, .48);
}

.card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .42), transparent 42%),
    var(--surface-strong);
}

.card.card--green {
  background:
    radial-gradient(circle at 90% 10%, rgba(217, 193, 136, .18), transparent 34%),
    linear-gradient(135deg, rgba(5, 38, 33, .98), rgba(9, 73, 73, .96));
  border-color: rgba(194, 161, 75, .28);
}

.card.card--green h3 {
  color: var(--ivory);
}

.card.card--green p {
  color: rgba(251, 248, 241, .8);
}

.card:hover {
  transform: translateY(-6px);
}

.event-feature {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(320px, 1.2fr);
  gap: clamp(1.25rem, 3vw, 2.4rem);
  align-items: start;
}

.event-pagehead__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.event-pagehead__copy {
  min-width: 0;
}

.event-selector {
  padding: 1rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--ivory);
  box-shadow: var(--shadow-sm);
}

.event-selector label {
  display: block;
  margin-bottom: .5rem;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.event-selector select {
  width: 100%;
  min-height: 58px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--line);
  background: var(--sage);
  color: var(--green-deep);
  font-weight: 700;
  padding: .95rem 1rem;
  font-size: 1rem;
}

.event-selector--hero {
  background: rgba(251, 248, 241, .08);
  border-color: rgba(217, 193, 136, .28);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .14);
  backdrop-filter: blur(8px);
}

.event-selector--hero label {
  color: var(--gold-soft);
}

.event-selector--hero select {
  background: rgba(251, 248, 241, .94);
}

.event-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.35rem);
}

.poster-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.35rem);
}

.section--notice-board {
  background:
    linear-gradient(180deg, rgba(251, 248, 241, .88), rgba(243, 239, 226, .7)),
    radial-gradient(circle at 18% 12%, rgba(194, 161, 75, .12), transparent 28%),
    radial-gradient(circle at 84% 16%, rgba(9, 73, 73, .10), transparent 30%);
}

.poster-grid--notice {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(1.35rem, 2.4vw, 1.9rem);
}

.poster-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 1.05rem;
  overflow: visible;
  border-radius: var(--r-md);
  background: rgba(255, 253, 247, .78);
}

.poster-grid--notice .poster-card {
  grid-template-columns: minmax(150px, .9fr) 1fr;
  align-items: center;
  padding: clamp(1.1rem, 2vw, 1.35rem);
}

.poster-card::before {
  content: "";
  position: absolute;
  top: -.55rem;
  left: 50%;
  width: 3.4rem;
  height: 1rem;
  transform: translateX(-50%) rotate(-2deg);
  border-radius: 2px;
  background: rgba(217, 193, 136, .58);
  box-shadow: 0 8px 18px rgba(6, 53, 53, .08);
}

.poster-card:nth-child(2)::before {
  transform: translateX(-50%) rotate(2.5deg);
  background: rgba(121, 154, 146, .36);
}

.poster-card:nth-child(3)::before {
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(194, 161, 75, .42);
}

.poster-card:nth-child(4)::before {
  transform: translateX(-50%) rotate(1.5deg);
  background: rgba(9, 73, 73, .18);
}

.poster-card__image {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  display: block;
  padding: .35rem;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(9, 73, 73, .10);
  box-shadow: 0 18px 42px -34px rgba(6, 53, 53, .55);
}

.poster-grid--notice .poster-card__image {
  max-height: 340px;
}

.poster-card p {
  font-size: .96rem;
  line-height: 1.65;
}

.section--activity-cards {
  background:
    linear-gradient(180deg, rgba(9, 73, 73, .08), rgba(9, 73, 73, .03)),
    linear-gradient(90deg, rgba(251, 248, 241, .95), rgba(239, 244, 235, .82));
}

.section--activity-cards .card {
  background: rgba(251, 248, 241, .9);
  border-color: rgba(9, 73, 73, .14);
}

.more-classes-band {
  margin-top: clamp(3.5rem, 6vw, 5rem);
  padding: 90px 0 96px;
  background: rgba(234, 240, 237, .58);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 120px;
}

.more-classes__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  padding-bottom: 1.35rem;
  border-bottom: 1px solid var(--line);
}

.more-classes__header h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.1rem);
  scroll-margin-top: 120px;
}

.more-classes__header p {
  max-width: 34ch;
  color: var(--muted);
  margin: 0;
}

.more-classes__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 64px;
}

.more-class-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding: 1.65rem 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  transition: padding-left var(--t-fast);
}

.more-class-row h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.2vw, 1.9rem);
}

.more-class-row p {
  max-width: 42ch;
  margin: .45rem 0 0;
  color: var(--muted);
}

.more-class-row__arrow {
  color: var(--gold);
  font-size: 1.65rem;
  line-height: 1;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--t-fast), transform var(--t-fast);
}

.more-class-row:hover {
  padding-left: .5rem;
}

.more-class-row:hover .more-class-row__arrow,
.more-class-row:focus-visible .more-class-row__arrow {
  opacity: 1;
  transform: translateX(0);
}

.education-icon-grid[hidden] {
  display: none !important;
}

.event-detail[hidden] {
  display: none;
}

.event-card {
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  appearance: none;
  font: inherit;
  color: inherit;
  text-decoration: none;
}

.home-event-card,
.event-card {
  position: relative;
}

.home-event-card--latest,
.event-card--latest {
  border-color: rgba(194, 161, 75, .72);
  box-shadow: 0 26px 70px -42px rgba(6, 53, 53, .72), inset 0 0 0 1px rgba(194, 161, 75, .22);
}

.event-card__latest {
  position: absolute;
  z-index: 2;
  top: 1.15rem;
  right: 1.15rem;
  display: inline-flex;
  align-items: center;
  padding: .44rem .72rem;
  border-radius: 999px;
  background: var(--gold);
  color: var(--green-deep);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .07em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 10px 26px rgba(6, 53, 53, .18);
}

.event-page-shell {
  min-height: 52vh;
}

.event-page-back {
  margin-bottom: 1.5rem;
}

.event-page-detail {
  align-items: stretch;
}

.event-page-detail .event-feature__body {
  align-content: start;
}

.event-page-poster {
  width: 100%;
  height: auto;
  max-height: 820px;
  display: block;
  object-fit: contain;
}

.event-page-actions {
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
}

.event-program {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  overflow: hidden;
  border: 1px solid rgba(9,73,73,.12);
  border-radius: var(--r-lg);
  background: var(--ivory);
  box-shadow: var(--shadow-lg);
}

.event-program > article {
  min-width: 0;
  padding: clamp(1.5rem, 4vw, 3rem);
}

.event-program__topics {
  background:
    radial-gradient(circle at 100% 0, rgba(194,161,75,.16), transparent 42%),
    linear-gradient(150deg, #fff, rgba(234,240,237,.72));
}

.event-program__speaker {
  color: rgba(255,255,255,.82);
  background:
    linear-gradient(135deg, rgba(194,161,75,.12), transparent 55%),
    var(--green-deep);
}

.event-program__speaker .eyebrow { color: var(--gold-soft); }
.event-program__speaker h2 { color: #fff; }
.event-program__speaker .lead { color: rgba(255,255,255,.82); }

.event-topic-list {
  display: grid;
  gap: .8rem;
}

.event-topic-list li {
  position: relative;
  padding-left: 1.65rem;
  color: var(--green-deep);
  font-weight: 650;
}

.event-topic-list li::before {
  content: '';
  position: absolute;
  top: .58em;
  left: 0;
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(194,161,75,.14);
}

.event-program__note {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(194,161,75,.28);
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.76);
}

.event-program__note strong { color: var(--green-deep); }
.event-program__note span { color: var(--muted); }

.event-booking-panel {
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(234,240,237,.72));
  box-shadow: var(--shadow-lg);
}

.event-booking-panel__intro {
  max-width: 720px;
  margin-bottom: 1.5rem;
}

.event-booking-panel__widget {
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
  min-height: 380px;
  padding: clamp(.25rem, 1.4vw, 1rem);
  border: 1px solid rgba(9,73,73,.1);
  border-radius: var(--r-md);
  background: #fff;
}

.event-booking-panel__widget .tryb-widget,
.event-booking-panel__widget iframe {
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  box-sizing: border-box;
  min-height: 380px !important;
}

.event-booking-panel__widget--google-form,
.event-booking-panel__widget--google-form iframe {
  min-height: 1180px !important;
}

.google-form-embed {
  height: 1180px !important;
  border: 0;
}

.event-booking-fallback {
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  border: 1px solid rgba(194, 161, 75, .38);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .82);
  color: var(--green-deep);
}

.event-booking-fallback p {
  margin-top: .45rem;
  color: var(--muted);
}

.saturday-school-details {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.6fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start;
}

.saturday-school-details--abjad {
  grid-template-columns: minmax(340px, .95fr) minmax(0, 1.45fr);
}

.abjad-program-poster {
  margin: 0 0 1.5rem;
}

.abjad-program-poster img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid rgba(9, 73, 73, .12);
  border-radius: var(--r-md);
  box-shadow: 0 24px 50px -36px rgba(6, 53, 53, .72);
}

.saturday-school-details__intro {
  position: sticky;
  top: 96px;
}

.saturday-school-details__links {
  align-items: center;
  flex-wrap: wrap;
}

.saturday-school-booking-grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  min-width: 0;
}

.saturday-school-booking-grid .event-booking-panel {
  padding: clamp(1.1rem, 2vw, 1.65rem);
  box-shadow: var(--shadow-md);
}

.saturday-school-booking-grid .event-booking-panel__widget,
.saturday-school-booking-grid .event-booking-panel__widget .tryb-widget,
.saturday-school-booking-grid .event-booking-panel__widget iframe {
  min-height: 330px !important;
}

@media (max-width: 620px) {
  .event-program { grid-template-columns: 1fr; }

  .event-booking-panel {
    padding: 1rem;
    border-radius: var(--r-md);
  }

  .event-booking-panel__intro {
    margin-bottom: 1rem;
  }

  .event-booking-panel__widget {
    padding: 0;
    border-radius: var(--r-sm);
  }

  .event-booking-panel__widget--google-form,
  .event-booking-panel__widget--google-form iframe,
  .google-form-embed {
    min-height: 1280px !important;
    height: 1280px !important;
  }
}

@media (max-width: 900px) {
  .saturday-school-details {
    grid-template-columns: 1fr;
  }

  .saturday-school-details__intro {
    position: static;
  }
}

.event-page-message {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.event-page-loading {
  padding: 3rem 0;
  text-align: center;
}

.event-card[aria-pressed="true"] {
  border-color: rgba(194, 161, 75, .62);
  box-shadow: 0 22px 70px -40px rgba(6, 53, 53, .58), inset 0 0 0 1px rgba(194, 161, 75, .28);
}

.event-card[aria-pressed="true"] .event-card__action {
  background: var(--green);
  color: var(--ivory);
}

.event-card__poster {
  width: 100%;
  aspect-ratio: 3 / 3.7;
  object-fit: contain;
  object-position: center;
  display: block;
  padding: .25rem;
  border-radius: var(--r-md);
  margin-bottom: 1.1rem;
  background: rgba(9, 73, 73, .06);
  border: 1px solid rgba(9, 73, 73, .08);
}

.event-meta {
  color: var(--green);
  font-weight: 700;
  font-size: .9rem;
  margin: .35rem 0 .6rem;
}

.event-card__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: auto;
  padding: .58rem .9rem;
  border-radius: 999px;
  background: var(--sage);
  color: var(--green);
  font-weight: 700;
  font-size: .86rem;
}

#events-browser {
  padding-top: clamp(4rem, 6vw, 5.5rem);
}

.event-archive-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.35rem);
}

.event-archive-card {
  min-height: 100%;
}

.event-archive-card .event-card__poster {
  aspect-ratio: 3 / 3.55;
  margin-bottom: 1rem;
}

.event-feature__media {
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid rgba(194, 161, 75, .28);
  background: var(--green-deep);
  box-shadow: var(--shadow-lg);
}

.event-feature__media img {
  width: 100%;
  height: auto;
  max-height: 820px;
  display: block;
  object-fit: contain;
}

.event-feature__body {
  display: grid;
  gap: 1rem;
}

.event-detail-list {
  display: grid;
  gap: .65rem;
  color: var(--muted);
}

.event-detail-list li {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
}

.event-detail-list strong {
  color: var(--green-deep);
}

.booking-panel {
  padding: clamp(1.2rem, 2.5vw, 1.7rem);
  border-radius: var(--r-md);
  border: 1px solid rgba(194, 161, 75, .24);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(250, 248, 244, .98));
  box-shadow: 0 18px 54px -38px rgba(6, 53, 53, .42);
}

.booking-panel .grid {
  gap: .85rem;
}

.event-summary {
  padding: .9rem 1rem;
  border-radius: var(--r-sm);
  background: rgba(9, 73, 73, .07);
  color: var(--green-deep);
  font-weight: 700;
}

.card__icon,
.tlist .tick {
  box-shadow: inset 0 0 0 1px rgba(194, 161, 75, .22);
}

.section--tint {
  background:
    linear-gradient(180deg, rgba(234, 240, 237, .58), rgba(251, 248, 241, .92)),
    var(--sage);
}

.section--green,
.footer,
.cta-band {
  background:
    linear-gradient(135deg, rgba(5, 38, 33, .98), rgba(6, 53, 53, .98) 55%, rgba(9, 73, 73, .92));
}

.archframe {
  transform: translateZ(0);
}

.archframe::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 44%, rgba(255, 255, 255, .12) 50%, transparent 56%);
  transform: translateX(-120%);
  transition: transform .9s var(--ease);
}

.archframe:hover::before {
  transform: translateX(120%);
}

.pagehead {
  background:
    linear-gradient(125deg, rgba(3, 23, 20, .98), rgba(9, 73, 73, .96)),
    var(--green);
}

.footer {
  border-top: 1px solid rgba(217, 193, 136, .18);
}

.footer__grid {
  padding-top: .5rem;
}

/* ---------- Prayer times page upgrade ---------- */
.pagehead--prayer {
  padding-bottom: clamp(4rem, 7vw, 6rem);
}

.pagehead__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
}

.prayer-section {
  background:
    linear-gradient(180deg, rgba(251, 248, 241, 1), rgba(234, 240, 237, .66));
}

.prayer-dashboard {
  display: grid;
  grid-template-columns: minmax(360px, 1.35fr) minmax(250px, .82fr) minmax(250px, .78fr);
  gap: 1rem;
  align-items: stretch;
  margin-top: clamp(-6.5rem, -6vw, -4rem);
  position: relative;
  z-index: 4;
}

.prayer-live-card,
.prayer-info-card {
  border-radius: var(--r-lg);
  border: 1px solid rgba(194, 161, 75, .26);
  box-shadow: var(--shadow-lg);
}

.prayer-live-card {
  min-height: 320px;
  padding: clamp(1.5rem, 3vw, 2.35rem);
  color: var(--ivory);
  background:
    radial-gradient(circle at 85% 15%, rgba(217, 193, 136, .22), transparent 34%),
    linear-gradient(135deg, rgba(5, 38, 33, .98), rgba(9, 73, 73, .98));
  overflow: hidden;
  position: relative;
}

.prayer-live-card::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -150px;
  width: 320px;
  height: 420px;
  border: 1px solid rgba(217, 193, 136, .28);
  border-radius: 50% 50% 0 0;
  pointer-events: none;
}

.prayer-live-card .eyebrow {
  color: var(--gold-soft);
}

.prayer-live-card__name {
  position: relative;
  z-index: 1;
  margin-top: .8rem;
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 6.2vw, 5.8rem);
  line-height: .98;
}

.prayer-live-card__row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.prayer-live-card__row div,
.prayer-info-card {
  background: rgba(251, 248, 241, .08);
  border: 1px solid rgba(217, 193, 136, .2);
  border-radius: var(--r-md);
}

.prayer-live-card__row div {
  padding: 1rem;
}

.prayer-live-card small,
.prayer-info-card .eyebrow {
  display: block;
  color: var(--gold-soft);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
  font-weight: 800;
}

.prayer-live-card strong {
  display: block;
  margin-top: .35rem;
  color: var(--ivory);
  font-size: clamp(1.45rem, 2.45vw, 2rem);
  font-variant-numeric: tabular-nums;
}

.prayer-info-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.4rem;
  padding: clamp(1.35rem, 2.5vw, 2rem);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(14px);
}

.prayer-info-card h2 {
  margin-top: .4rem;
  font-size: clamp(1.45rem, 2.2vw, 2rem);
}

.prayer-info-card p {
  color: var(--muted);
  margin-top: .45rem;
}

.prayer-info-card--screen {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(234, 240, 237, .9));
}

.board-intro {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: end;
}

.board-intro h2 {
  margin-top: .35rem;
}

.board-intro p {
  color: var(--muted);
  max-width: 34ch;
}

.board--prayer-page {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.prayer-section .board--prayer-page {
  margin-top: clamp(3.25rem, 5vw, 4rem);
}

.board--prayer-page .ptile {
  border-radius: var(--r-md);
  padding: 1.35rem 1rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(251, 248, 241, .98));
}

.board--prayer-page .ptile__name {
  font-size: clamp(1.25rem, 1.7vw, 1.55rem);
}

.board--prayer-page .ptile__adhan {
  font-size: clamp(1.65rem, 2.3vw, 2.2rem);
}

.board--prayer-page .ptile__iqamah {
  margin-top: .7rem;
  padding-top: .7rem;
  border-top: 1px solid rgba(9, 73, 73, .1);
}

.board--prayer-page .ptile__iqamah b {
  font-size: clamp(1.12rem, 1.4vw, 1.32rem);
}

@media (min-width: 1051px) {
  .board--prayer-page .ptile__iqamah {
    flex-direction: column;
    align-items: center;
    gap: .18rem;
    line-height: 1.15;
  }
}

.ptile__iqamah--jummah b {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .15rem .5rem;
  text-transform: none;
}

@media (min-width: 1051px) {
  .ptile__iqamah--jummah b {
    display: grid;
    gap: .12rem;
  }
}

.ptile--jummah:not(.is-next) {
  border-color: rgba(9, 73, 73, .28);
  background:
    linear-gradient(180deg, rgba(222, 233, 224, .78), rgba(251, 248, 241, .98));
}

.board--prayer-page .ptile.is-next {
  background:
    radial-gradient(circle at 85% 12%, rgba(217, 193, 136, .24), transparent 32%),
    linear-gradient(135deg, rgba(5, 38, 33, .98), rgba(9, 73, 73, .96));
}

.prayer-note {
  padding: 1rem 1.2rem;
  border-radius: var(--r-sm);
  color: var(--muted);
  background: rgba(9, 73, 73, .06);
  border: 1px solid rgba(9, 73, 73, .1);
  font-size: .94rem;
}

.jummah-card--page {
  transform: translateY(-1px);
}

.jummah-card--page .jslot strong {
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  font-weight: 600;
}

.prayer-jummah-section {
  padding-top: 0;
  padding-bottom: clamp(.9rem, 2vw, 1.5rem);
}

.is-friday .prayer-jummah-section {
  background:
    radial-gradient(circle at 82% 20%, rgba(217, 193, 136, .2), transparent 32%),
    linear-gradient(180deg, rgba(9, 73, 73, .12), rgba(222, 233, 224, .52));
}

.is-friday .jummah-card--page {
  border: 1px solid rgba(217, 193, 136, .55);
  box-shadow: 0 24px 56px -28px rgba(3, 35, 31, .72);
}

.prayer-links-section {
  padding-top: clamp(1.25rem, 2.5vw, 2rem);
  padding-bottom: clamp(2.5rem, 4.5vw, 3.75rem);
}

.phone-steps {
  padding-left: 1.25rem;
  color: var(--muted);
}

.phone-steps li + li {
  margin-top: .7rem;
}

.js .reveal {
  transform: translateY(34px);
  transition-duration: .85s;
}

.js .reveal-scale {
  transform: translateY(16px) scale(.96);
  transition-duration: .85s;
}

@keyframes pattern-drift {
  from { background-position: 0 0; }
  to { background-position: 80px 140px; }
}

@media (max-width: 960px) {
  .more-classes-band {
    padding: 72px 0 78px;
  }

  .more-classes__grid {
    grid-template-columns: 1fr;
  }

  .more-classes__header {
    align-items: flex-start;
  }
}

@media (max-width: 1050px) {
  .prayer-dashboard {
    grid-template-columns: 1fr;
  }

  .hero__photo {
    width: 100%;
    opacity: .26;
    mix-blend-mode: normal;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hero__inner {
    max-width: 760px;
  }

  .event-pagehead__inner {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .event-card-grid,
  .event-archive-grid,
  .poster-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .event-feature {
    grid-template-columns: 1fr;
  }

  .event-feature__media img {
    min-height: 0;
    max-height: 760px;
  }

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

@media (max-width: 620px) {
  #events-browser {
    padding-top: 2rem;
  }

  .event-page-actions,
  .event-page-actions .btn {
    width: 100%;
  }

  #events-browser .event-card-grid {
    margin-top: 1.5rem;
  }

  .event-card-grid,
  .event-archive-grid,
  .poster-grid {
    grid-template-columns: 1fr;
  }

  .poster-grid--notice .poster-card {
    grid-template-columns: 1fr;
  }

  .poster-grid--notice .poster-card__image {
    max-height: none;
  }
}

@media (max-width: 620px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .nav {
    padding-block: .85rem;
  }

  .nav__logo img {
    height: 48px;
  }

  .nav__links {
    border-radius: 0;
    background: var(--ivory);
    border: 0;
  }

  .hero {
    min-height: 100svh;
    padding-top: 7rem;
    padding-bottom: 4.5rem;
  }

  .hero .container {
    width: calc(100vw - 40px);
    max-width: 100%;
    padding-inline: 0;
    box-sizing: border-box;
  }

  .hero__inner {
    width: calc(100vw - 40px);
    max-width: 100%;
    min-width: 0;
  }

  .hero h1 {
    max-width: 100%;
    font-size: clamp(3rem, 14vw, 4.2rem);
    line-height: 1.04;
    overflow-wrap: break-word;
  }

  .hero .hero__lead {
    max-width: 100%;
    font-size: 1rem;
    overflow-wrap: break-word;
  }

  .hero__cta {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .hero__cta .btn {
    width: 100%;
    min-width: 0;
    justify-content: center;
    white-space: normal;
    text-align: center;
    padding-inline: 1rem;
  }

  .nextprayer {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 1rem;
    padding: 1rem;
    box-sizing: border-box;
  }

  .nextprayer__sep {
    display: none;
  }

  .nextprayer > div {
    min-width: 0;
  }

  .nextprayer > div:last-child {
    grid-column: 1 / -1;
  }

  .nextprayer__label,
  .nextprayer__name,
  .nextprayer__time,
  .nextprayer__count {
    overflow-wrap: anywhere;
  }

  .pagehead__actions,
  .pagehead__actions .btn {
    width: 100%;
  }

  .prayer-dashboard {
    margin-top: -3.25rem;
  }

  .prayer-live-card {
    min-height: auto;
  }

  .prayer-live-card__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
  }

  .prayer-live-card__row div {
    padding: .85rem;
  }

  .prayer-live-card strong {
    font-size: 1.25rem;
  }

  .board-intro {
    grid-template-columns: 1fr;
  }

  .board-intro {
    display: grid;
    align-items: start;
  }

  .board--prayer-page {
    grid-template-columns: 1fr;
  }

  .board--prayer-page .ptile {
    text-align: left;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .5rem 1rem;
    align-items: center;
  }

  .board--prayer-page .ptile__head {
    grid-row: span 2;
  }

  .board--prayer-page .ptile__adhan {
    margin-top: 0;
    text-align: right;
  }

  .board--prayer-page .ptile__iqamah {
    justify-content: flex-end;
    margin-top: 0;
    padding-top: .45rem;
    text-align: right;
  }

  .board--prayer-page .ptile__flag {
    top: .35rem;
    left: auto;
    right: .75rem;
    transform: none;
  }

  .jummah-card--page {
    align-items: flex-start;
  }

  .jummah-card--page #jummah-slots {
    width: 100%;
    gap: 1.25rem !important;
  }

}

/* ---------- Janazah services ---------- */
.janazah-section {
  background: linear-gradient(180deg, #f1f3ed 0%, var(--ivory) 45%, #f5f2e9 100%);
  padding-top: clamp(3.5rem, 6vw, 5rem);
  scroll-margin-top: 5.5rem;
}
.janazah-intro {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(360px, 1.05fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.janazah-intro__media {
  margin: 0;
  min-height: 380px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.janazah-intro__media img {
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
  display: block;
}
.janazah-services-head { margin-top: clamp(4rem, 8vw, 7rem); }
.janazah-process {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: 2.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow-sm);
}
.janazah-step {
  min-height: 242px;
  padding: 2rem 1.25rem;
  text-align: center;
}
.janazah-step + .janazah-step { border-left: 1px solid var(--line); }
.janazah-step__icon {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  margin: 0 auto 1.2rem;
  border-radius: 50%;
  background: var(--sage);
  color: var(--green);
}
.janazah-step__icon svg { width: 34px; height: 34px; }
.janazah-step h4 { font-size: 1.04rem; line-height: 1.35; color: var(--green-deep); }
.janazah-step p { margin-top: .65rem; color: var(--muted); font-size: .9rem; line-height: 1.65; }
.janazah-reminder {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.6rem;
  align-items: center;
  max-width: 980px;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  padding: clamp(1.6rem, 4vw, 2.5rem);
  border: 1px solid rgba(194,161,75,.28);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow-sm);
}
.janazah-reminder__icon {
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(9,73,73,.13);
  border-radius: 22px;
  background: var(--sage);
  color: var(--green);
}
.janazah-reminder__icon svg { width: 42px; height: 42px; }
.janazah-reminder p { color: var(--muted); }
.janazah-reminder strong { display: block; margin-top: .9rem; color: var(--green-deep); font-size: 1.12rem; line-height: 1.5; }
.janazah-reminder cite { display: block; margin-top: .65rem; color: var(--gold-dark); font-style: normal; font-weight: 700; }
.janazah-contacts {
  display: grid;
  grid-template-columns: minmax(230px, .75fr) minmax(0, 1.25fr);
  gap: 2rem 3rem;
  margin-top: clamp(3rem, 7vw, 5rem);
  padding: clamp(2rem, 5vw, 3.25rem);
  border-radius: var(--radius-lg);
  color: var(--ivory);
  background: linear-gradient(135deg, var(--green-deep), var(--green));
  box-shadow: var(--shadow-lg);
}
.janazah-contacts .eyebrow { color: var(--gold-light); }
.janazah-contacts h3 { color: var(--ivory); }
.janazah-contacts__head p { color: rgba(251,248,241,.76); margin-top: .75rem; }
.janazah-contact-list { display: grid; gap: .75rem; }
.janazah-contact-list a {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: .75rem;
  background: rgba(255,255,255,.08);
  color: var(--ivory);
  transition: background var(--ease), border-color var(--ease), transform var(--ease);
}
.janazah-contact-list a:hover { background: rgba(255,255,255,.14); border-color: rgba(194,161,75,.58); transform: translateY(-1px); }
.janazah-contact-list span { color: rgba(251,248,241,.8); }
.janazah-contact-list strong { color: var(--gold-light); white-space: nowrap; }
.janazah-contacts__email { grid-column: 1 / -1; color: rgba(251,248,241,.75); border-top: 1px solid rgba(255,255,255,.14); padding-top: 1.15rem; }
.janazah-contacts__email a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; }
.janazah-cemetery-head { margin-top: clamp(4rem, 8vw, 6rem); }
.janazah-cemeteries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.3rem; margin-top: 2rem; }
.janazah-cemetery {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.78);
  box-shadow: var(--shadow-sm);
}
.janazah-cemetery img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.janazah-cemetery div { padding: 1.45rem; }
.janazah-cemetery h4 { color: var(--green-deep); font-size: 1.08rem; }
.janazah-cemetery p { margin-top: .65rem; color: var(--muted); font-size: .92rem; }
.janazah-closing { max-width: 720px; margin: 2.5rem auto 0; color: var(--green-deep); font-weight: 650; }

@media (max-width: 1060px) {
  .janazah-process { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .janazah-step + .janazah-step { border-left: 0; }
  .janazah-step:not(:nth-child(3n + 1)) { border-left: 1px solid var(--line); }
  .janazah-step:nth-child(n + 4) { border-top: 1px solid var(--line); }
}

@media (max-width: 760px) {
  .janazah-intro,
  .janazah-contacts { grid-template-columns: 1fr; }
  .janazah-intro__media,
  .janazah-intro__media img { min-height: 270px; }
  .janazah-intro__media { order: -1; }
  .janazah-process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .janazah-step:not(:nth-child(3n + 1)) { border-left: 0; }
  .janazah-step:nth-child(even) { border-left: 1px solid var(--line); }
  .janazah-step:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .janazah-reminder { grid-template-columns: 1fr; text-align: center; }
  .janazah-reminder__icon { margin: 0 auto; }
  .janazah-contact-list a { align-items: flex-start; flex-direction: column; }
  .janazah-cemeteries { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .janazah-process { grid-template-columns: 1fr; }
  .janazah-step:nth-child(even) { border-left: 0; }
  .janazah-step + .janazah-step { border-top: 1px solid var(--line); }
}

/* ---------- Facility enquiry ---------- */
.facility-enquiry-fields { margin: 1.5rem 0; padding: 1.35rem; border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(224,234,224,.38); }
.facility-enquiry-fields[hidden] { display: none; }
.facility-enquiry-fields__head { margin-bottom: .4rem; }

/* ---------- Prayer, media and recording upgrades ---------- */
.ptile__hanafi {
  margin-top: .4rem;
  padding-top: .4rem;
  border-top: 1px solid rgba(9,73,73,.12);
  color: var(--muted);
  font-size: .74rem;
  letter-spacing: .04em;
}
.ptile__hanafi .lbl { margin-right: .32rem; }
.ptile__hanafi b { color: var(--green); font-weight: 700; }
.ptile.is-next .ptile__hanafi { border-color: rgba(255,255,255,.18); color: rgba(251,248,241,.72); }
.ptile.is-next .ptile__hanafi b { color: var(--gold-soft); }

.prayer-quickbar {
  display: grid;
  grid-template-columns: minmax(180px,.8fr) minmax(280px,1.2fr) auto;
  gap: clamp(1.25rem,3vw,2.5rem);
  align-items: center;
  margin-top: 1.5rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid rgba(9,73,73,.14);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.72);
  box-shadow: 0 16px 42px -34px rgba(6,53,53,.6);
}
.prayer-quickbar__intro { display: grid; gap: .3rem; }
.prayer-quickbar__intro strong { color: var(--green-deep); font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; }
.prayer-quickbar__slots { display: flex; flex-wrap: wrap; gap: clamp(1.4rem,4vw,3rem); }
.prayer-quickbar .jslot small { display: block; color: var(--muted); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.prayer-quickbar .jslot strong { color: var(--green); font-family: var(--font-display); font-size: 1.45rem; font-weight: 500; }

.is-friday .prayer-quickbar {
  border-color: rgba(217,193,136,.5);
  background:
    radial-gradient(circle at 88% 16%, rgba(217,193,136,.2), transparent 34%),
    linear-gradient(135deg, var(--green-deep), var(--green));
  box-shadow: 0 22px 48px -28px rgba(3,35,31,.82);
}
.is-friday .prayer-quickbar .eyebrow,
.is-friday .prayer-quickbar__intro strong,
.is-friday .prayer-quickbar .jslot strong,
.is-friday .prayer-quickbar .ulink { color: var(--gold-soft); }
.is-friday .prayer-quickbar .jslot small { color: rgba(251,248,241,.72); }

.media-showcase {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 48%, rgba(217,193,136,.15), transparent 32%),
    linear-gradient(110deg, rgba(3,23,20,.99), rgba(6,53,53,.96));
}
.media-showcase::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(217,193,136,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(217,193,136,.13) 1px, transparent 1px); background-size: 54px 54px; opacity: .3; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.92), rgba(0,0,0,.22)); mask-image: linear-gradient(90deg, rgba(0,0,0,.92), rgba(0,0,0,.22)); }
.media-showcase__panel {
  display: grid;
  grid-template-columns: minmax(300px,.72fr) minmax(520px,1.28fr);
  gap: clamp(2rem,4.5vw,4rem);
  align-items: stretch;
}
.media-showcase__quran { overflow: hidden; min-height: 540px; margin: 0; border: 1px solid rgba(217,193,136,.38); border-radius: var(--r-lg); background: #031b18; box-shadow: 0 34px 78px -38px rgba(0,0,0,.9); }
.media-showcase__quran img { display: block; width: 100%; height: 100%; min-height: 540px; object-fit: cover; object-position: 49% 52%; }
.media-showcase__content { display: grid; gap: clamp(1.35rem,2.5vw,2rem); align-content: center; min-width: 0; }
.media-showcase__copy { max-width: 690px; }
.media-showcase__copy h2 { color: var(--ivory); }
.media-showcase__copy .lead { color: rgba(251,248,241,.8); }
.media-showcase__video,
.series-recordings__featured {
  overflow: hidden;
  border: 1px solid rgba(217,193,136,.32);
  border-radius: var(--r-lg);
  background: #020202;
  box-shadow: 0 30px 70px -32px rgba(0,0,0,.72);
}
.media-showcase__video iframe,
.series-recordings__featured iframe { display: block; width: 100%; aspect-ratio: 16/9; border: 0; }

.centre-photo-card { overflow: hidden; border-radius: var(--r-lg); background: var(--ivory); box-shadow: var(--shadow-lg); }
.centre-photo-card img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.centre-photo-card figcaption { display: grid; gap: .32rem; padding: 1.25rem 1.35rem; }
.centre-photo-card figcaption strong { color: var(--green-deep); font-family: var(--font-display); font-size: 1.25rem; }
.centre-photo-card figcaption span { color: var(--muted); }
.centre-photo-card figcaption a { color: var(--green); font-weight: 700; }

.committee-preface {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}
.committee-preface p { padding: 1.1rem 1.2rem; border-left: 3px solid var(--gold); background: rgba(224,234,224,.45); color: var(--green-deep); }
.poster-card__link { display: inline-block; margin-top: .8rem; }

.series-recordings {
  overflow: hidden;
  scroll-margin-top: 96px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.96);
  box-shadow: var(--shadow-lg);
}
.series-events-section { background: linear-gradient(180deg, var(--ivory) 0%, rgba(224,234,224,.4) 100%); }
.series-events-section .series-recordings { margin-top: 0; }
.series-recordings__header { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding: clamp(1.5rem,3vw,2.6rem); background: linear-gradient(145deg, #fff, rgba(224,234,224,.42)); }
.series-recordings__intro { max-width: 820px; }
.series-recordings__intro h2 { font-size: clamp(2rem,4vw,3.45rem); }
.series-recordings__stat { display: flex; align-items: center; gap: .7rem; flex: 0 0 auto; padding: .8rem 1rem; border: 1px solid rgba(194,161,75,.32); border-radius: var(--r-md); background: rgba(217,193,136,.12); color: var(--green-deep); }
.series-recordings__stat strong { font-family: var(--font-display); font-size: 2.25rem; font-weight: 500; line-height: 1; }
.series-recordings__stat span { font-size: .72rem; font-weight: 800; letter-spacing: .07em; line-height: 1.25; text-transform: uppercase; }
.series-recordings__stage { padding: clamp(.75rem,1.5vw,1.2rem); background: linear-gradient(135deg, #031b18, #06413d); }
.series-recordings__featured { overflow: hidden; border: 1px solid rgba(217,193,136,.28); border-radius: var(--r-md) var(--r-md) 0 0; background: #000; box-shadow: 0 34px 80px -38px rgba(0,0,0,.9); }
.series-recordings__featured iframe { display: block; width: 100%; aspect-ratio: 16/9; min-height: 270px; border: 0; }
.series-recordings__playerbar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.05rem 1.2rem; border: 1px solid rgba(217,193,136,.2); border-top: 0; border-radius: 0 0 var(--r-md) var(--r-md); background: rgba(2,22,19,.96); color: var(--ivory); }
.series-recordings__now-playing { display: grid; grid-template-columns: auto auto; gap: .12rem .8rem; align-items: baseline; }
.series-recordings__now-playing small { grid-column: 1/-1; color: var(--gold-soft); font-size: .7rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.series-recordings__now-playing strong { font-family: var(--font-display); font-size: 1.55rem; font-weight: 500; }
.series-recordings__now-playing > span { color: rgba(251,248,241,.64); font-size: .86rem; }
.series-recordings__controls { display: flex; gap: .55rem; }
.series-recordings__nav { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 42px; padding: .65rem .9rem; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(255,255,255,.06); color: var(--ivory); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); }
.series-recordings__nav:hover:not(:disabled) { border-color: var(--gold-soft); background: rgba(217,193,136,.12); }
.series-recordings__nav:focus-visible { outline: 3px solid rgba(217,193,136,.35); outline-offset: 2px; }
.series-recordings__nav:disabled { cursor: not-allowed; opacity: .35; }
.series-recordings__catalogue { padding: clamp(1.4rem,3vw,2.4rem); background: rgba(251,248,241,.76); }
.series-recordings__catalogue-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.series-recordings__catalogue-head h3 { margin-top: .25rem; color: var(--green-deep); font-size: clamp(1.45rem,2vw,2rem); }
.series-recordings__list { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .9rem; }
.recording-card { overflow: hidden; display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; color: var(--green-deep); font: inherit; text-align: left; cursor: pointer; transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); }
.recording-card:hover { transform: translateY(-3px); border-color: rgba(194,161,75,.62); box-shadow: var(--shadow-md); }
.recording-card:focus-visible { outline: 3px solid rgba(194,161,75,.35); outline-offset: 3px; }
.recording-card.is-active { border-color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold), var(--shadow-sm); }
.recording-card__thumb { position: relative; display: block; overflow: hidden; background: var(--green-deep); }
.recording-card__thumb img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform var(--t-med); }
.recording-card:hover .recording-card__thumb img { transform: scale(1.035); }
.recording-card__play { position: absolute; right: .55rem; bottom: .55rem; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; background: rgba(3,27,24,.88); color: white; font-size: .66rem; box-shadow: 0 8px 20px rgba(0,0,0,.28); }
.recording-card.is-active .recording-card__play { background: var(--gold); color: var(--green-deep); }
.recording-card__body { display: grid; gap: .25rem; padding: .8rem .85rem .9rem; }
.recording-card__body small { color: var(--gold); font-size: .67rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.recording-card__body strong { overflow: hidden; font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
.recording-card__body > span { color: var(--muted); font-size: .76rem; }
.series-recordings__footer { padding: 1rem clamp(1.4rem,3vw,2.4rem); border-top: 1px solid var(--line); background: rgba(224,234,224,.36); }
.series-recordings__footer p { color: var(--muted); font-size: .84rem; }

.series-event-summary { display: grid; grid-template-columns: minmax(0,1fr) minmax(430px,.85fr); gap: 2rem; align-items: center; margin-top: 1.25rem; padding: 1.35rem 1.5rem; border: 1px solid var(--line); border-radius: var(--r-md); background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(224,234,224,.4)); }
.series-event-summary__meta { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .65rem; }
.series-event-summary__meta li { display: grid; gap: .25rem; padding: .75rem; border: 1px solid rgba(9,73,73,.1); border-radius: .75rem; background: rgba(255,255,255,.66); }
.series-event-summary__meta span { color: var(--gold); font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.series-event-summary__meta strong { color: var(--green-deep); font-size: .8rem; line-height: 1.35; }
.event-page--series .event-page-shell { padding-top: clamp(2rem,4vw,3.5rem); }
.event-page-anchor { position: absolute; top: 0; left: 0; width: 1px; height: 1px; scroll-margin-top: 88px; pointer-events: none; }
.event-page-shell { position: relative; }

@media (max-width: 1050px) {
  .media-showcase__panel { grid-template-columns: minmax(250px,.7fr) minmax(420px,1.3fr); gap: 2rem; }
  .media-showcase__quran,
  .media-showcase__quran img { min-height: 500px; }
  .series-recordings__list { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .series-event-summary { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .prayer-quickbar,
  .media-showcase__panel { grid-template-columns: 1fr; }
  .prayer-quickbar { align-items: start; }
  .series-recordings__header { align-items: flex-start; }
  .series-recordings__playerbar { align-items: flex-start; }
  .media-showcase__quran { width: min(100%,560px); min-height: 0; }
  .media-showcase__quran img { height: clamp(360px,85vw,560px); min-height: 0; }
}
@media (max-width: 620px) {
  .committee-preface { grid-template-columns: 1fr; }
  .series-recordings__list { grid-template-columns: 1fr; }
  .series-recordings__header,
  .series-recordings__playerbar { align-items: stretch; flex-direction: column; }
  .series-recordings__stat { width: fit-content; }
  .series-recordings__controls { width: 100%; }
  .series-recordings__nav { flex: 1; }
  .series-recordings__now-playing { grid-template-columns: 1fr; }
  .series-recordings__now-playing small { grid-column: auto; }
  .series-recordings__catalogue-head { align-items: flex-start; flex-direction: column; }
  .series-event-summary__meta { grid-template-columns: 1fr; }
  .prayer-quickbar__slots { justify-content: space-between; width: 100%; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal, .reveal-scale { opacity: 1; transform: none; }
  .draw path { stroke-dashoffset: 0; }
}
.form-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}