/* Staged content scenes (desktop) */
.ma-stage-backdrop {
  display: none;
  position: fixed;
  top: 90.5px; left: 0; bottom: 0;
  right: calc(4rem + 193px);
  z-index: 10000;
  background: rgb(0 0 0 / .52);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  cursor: pointer;
}
.ma-stage-backdrop.is-active {
  display: block;
}
.ma-stage-backdrop.is-prayer {
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
}

.ma-stage-scene {
  position: fixed;
  inset: 90.5px 0 0 0;
  z-index: 10001;
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
  clip-path: circle(0% at var(--bloom-x, 85%) var(--bloom-y, 5%));
  transition: clip-path .72s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .72s;
}

.ma-stage-scene.is-active,
.ma-stage-scene:target {
  pointer-events: auto;
  visibility: visible;
  clip-path: circle(150% at var(--bloom-x, 85%) var(--bloom-y, 5%));
  transition: clip-path .72s cubic-bezier(.4, 0, .2, 1);
}

.ma-stage-scene[hidden] {
  display: none !important;
}

.ma-stage-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  height: 100%;
  overflow: hidden;
  background: rgb(16 19 17 / .78);
  backdrop-filter: none;
  color: var(--steel-slate);
}


/* Light scenes — about, programs, events, building, contact */
.ma-stage-scene--about .ma-stage-shell,
.ma-stage-scene--services .ma-stage-shell,
.ma-stage-scene--events .ma-stage-shell,
.ma-stage-scene--building .ma-stage-shell,
.ma-stage-scene--contact .ma-stage-shell {
  background: rgb(245 247 251);
  backdrop-filter: none;
}
.ma-stage-scene--about .ma-stage-content,
.ma-stage-scene--services .ma-stage-content,
.ma-stage-scene--events .ma-stage-content,
.ma-stage-scene--building .ma-stage-content,
.ma-stage-scene--contact .ma-stage-content {
  background: rgb(245 247 251);
  backdrop-filter: none;
}

.ma-stage-subnav {
  padding: 1.5rem 1.15rem;
  border-right: 1px solid rgb(65 78 86 / .14);
}

.ma-stage-label,
.ma-stage-kicker {
  font-family: var(--cond);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgb(65 78 86 / .45);
}

.ma-stage-label {
  margin-bottom: 1rem;
}

.ma-stage-subnav-link {
  display: block;
  width: 100%;
  padding: .7rem 0;
  border: 0;
  background: transparent;
  color: rgb(65 78 86 / .55);
  font-family: var(--cond);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.25;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}

.ma-stage-subnav-link.active,
.ma-stage-subnav-link:hover,
.ma-stage-subnav-link:focus-visible {
  color: var(--forest);
}

.ma-stage-content {
  position: relative;
  padding: 2rem 2.5rem;
  background: rgb(245 247 251);
  overflow-y: auto;
}

.ma-stage-close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: rgb(65 78 86 / .72);
  font-size: 1.45rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 50;
  pointer-events: auto;
}

.ma-stage-close:hover,
.ma-stage-close:focus-visible {
  color: var(--forest);
  background: rgb(65 78 86 / .1);
}

.ma-stage-title {
  margin: .35rem 0 1.2rem;
  font-family: var(--cond);
  font-size: clamp(1.55rem, 2.6vw, 2.35rem);
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--steel-slate);
}

.ma-stage-title em {
  font-style: normal;
  color: rgb(65 78 86 / .55);
}

.ma-stage-panel h3 {
  margin: 0 0 .8rem;
  font-family: var(--cond);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--steel-slate);
}

.ma-stage-panel p {
  max-width: 64ch;
  color: rgb(65 78 86 / .82);
  font-size: .95rem;
  line-height: 1.8;
}

/* New Building > How to Give — primary link into the on-site Expansion
   Project donation panel, plus offline methods. Address/Zelle are
   placeholders pending the org (they'll prune what they don't use). */
.ma-give-cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: .3rem 0 1.7rem;
  padding: .62rem 1.15rem;
  font-family: var(--cond);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sand);
  background: var(--forest);
  border: 1px solid var(--forest);
  border-radius: 2px;
  text-decoration: none;
  transition: background .25s ease, color .25s ease;
}
.ma-give-cta:hover,
.ma-give-cta:focus-visible {
  background: transparent;
  color: var(--forest);
}
.ma-give-ways {
  padding-top: 1.4rem;
  border-top: 1px solid rgb(65 78 86 / .18);
}
.ma-give-ways-title {
  margin: 0 0 1rem;
  font-family: var(--cond);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--steel-slate);
}
.ma-give-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  max-width: 64ch;
}
.ma-give-list li {
  display: grid;
  gap: .2rem;
}
.ma-give-method {
  font-family: var(--cond);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--navy-deep);
}
.ma-give-detail {
  color: rgb(65 78 86 / .82);
  font-size: .92rem;
  line-height: 1.7;
}

/* Imam(s) — grid of names/photos that cross-fades ("flips") to a single
   imam's bio, mirroring the programs stage read-more. No layout jag. */
.ma-imam-flip {
  position: relative;
  display: grid;
}
.ma-imam-face {
  grid-area: 1 / 1;
  transition: opacity .35s ease, transform .45s cubic-bezier(.16, 1, .3, 1);
}
.ma-imam-face--back {
  opacity: 0;
  transform: scale(.985);
  pointer-events: none;
}
.ma-imam-flip.is-flipped .ma-imam-face--front {
  opacity: 0;
  transform: scale(1.015);
  pointer-events: none;
}
.ma-imam-flip.is-flipped .ma-imam-face--back {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.ma-imam-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin-top: 1.5rem;
}
.ma-imam-card {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .9rem 1rem;
  text-align: left;
  background: rgb(255 255 255 / .5);
  border: 1px solid rgb(65 78 86 / .16);
  border-radius: .6rem;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.ma-imam-card:hover,
.ma-imam-card:focus-visible {
  border-color: rgb(65 78 86 / .4);
  background: rgb(255 255 255 / .85);
  transform: translateY(-1px);
}

.ma-imam-photo {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgb(65 78 86 / .12) center / cover no-repeat;
  border: 2px dashed rgb(65 78 86 / .3);
}
.ma-imam-photo.has-photo {
  border-style: solid;
  border-color: rgb(65 78 86 / .2);
}

.ma-imam-body {
  display: flex;
  flex-direction: column;
  gap: .18rem;
  min-width: 0;
}
.ma-imam-name {
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--steel-slate);
}
.ma-imam-more {
  font-family: var(--cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: .68rem;
  color: rgb(65 78 86 / .6);
}
.ma-imam-card:hover .ma-imam-more,
.ma-imam-card:focus-visible .ma-imam-more {
  color: var(--navy-deep);
}

/* Back face — a single imam's detail */
.ma-imam-back {
  font-family: var(--cond);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .78rem;
  color: var(--navy-deep);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.ma-imam-back:hover {
  color: var(--steel-slate);
}
.ma-imam-detail {
  margin-top: 1.4rem;
}
.ma-imam-detail-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.1rem;
}
.ma-imam-detail .ma-imam-photo {
  width: 76px;
  height: 76px;
}
.ma-imam-detail-name {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--steel-slate);
}
.ma-imam-detail-bio {
  font-size: .95rem;
  line-height: 1.65;
  color: var(--steel-slate);
  max-width: 60ch;
}

/* ── Events stage — no subnav, horizontal card rail ── */
.ma-stage-scene--events .ma-stage-shell {
  grid-template-columns: 1fr;
  min-height: auto;
}

.st-ev-rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .85rem;
}

.st-ev-card {
  cursor: pointer;
  background: rgb(65 78 86 / .06);
  border: 1px solid rgb(65 78 86 / .14);
  padding: 1rem 1rem .9rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.st-ev-date-row {
  display: flex;
  align-items: baseline;
  gap: .45rem;
}
.st-ev-day {
  font-family: var(--cond);
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
}
.st-ev-meta {
  display: flex;
  flex-direction: column;
}
.st-ev-month {
  font-family: var(--cond);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgb(65 78 86 / .55);
}
.st-ev-time {
  font-size: .68rem;
  color: rgb(65 78 86 / .5);
}
.st-ev-title {
  font-family: var(--cond);
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--steel-slate);
}
.st-ev-loc {
  font-size: .7rem;
  color: rgb(65 78 86 / .5);
  letter-spacing: .04em;
}
.st-ev-desc {
  font-size: .79rem;
  color: rgb(65 78 86 / .72);
  line-height: 1.65;
  flex: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}
.st-ev-rsvp {
  display: inline-block;
  margin-top: .3rem;
  font-family: var(--cond);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
}

.st-ev-flyer {
  flex: 0 0 160px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgb(65 78 86 / .14);
  min-height: 240px;
  cursor: pointer;
}
.st-ev-flyer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.st-ev-flyer:hover img {
  transform: scale(1.04);
}
.st-ev-flyer:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: -2px;
}
.st-ev-flyer-badge {
  position: absolute;
  top: .55rem;
  left: .55rem;
  background: var(--gold);
  color: var(--forest);
  font-family: var(--cond);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .08em;
  padding: .2rem .45rem;
  text-transform: uppercase;
}
.st-ev-flyer-overlay {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0);
  display: grid;
  place-items: end center;
  padding-bottom: .65rem;
  transition: background .3s;
}
.st-ev-flyer:hover .st-ev-flyer-overlay {
  background: rgb(0 0 0 / .35);
}
.st-ev-flyer-zoom {
  font-family: var(--cond);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cream-lt);
  opacity: 0;
  transition: opacity .3s;
}
.st-ev-flyer:hover .st-ev-flyer-zoom {
  opacity: 1;
}

/* ── Contact stage ── */
.ma-stage-scene--contact .ma-stage-shell {
  grid-template-columns: 150px minmax(0, 1fr);
}
.st-ct-info-block {
  margin-bottom: 1.1rem;
}
.st-ct-label {
  font-family: var(--cond);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgb(65 78 86 / .45);
  margin-bottom: .3rem;
}
.st-ct-value {
  font-size: .88rem;
  color: rgb(65 78 86 / .82);
  line-height: 1.6;
}
.st-ct-value a {
  color: var(--gold);
}
.st-ct-map iframe {
  width: 100%;
  height: 180px;
  border: 0;
  display: block;
  margin-top: .85rem;
  opacity: .85;
}
.st-ct-field {
  margin-bottom: .85rem;
}
.st-ct-field-label {
  display: block;
  font-family: var(--cond);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgb(65 78 86 / .45);
  margin-bottom: .3rem;
}
.st-ct-input {
  width: 100%;
  background: rgb(65 78 86 / .06);
  border: 1px solid rgb(65 78 86 / .18);
  color: var(--steel-slate);
  font-family: var(--sans, sans-serif);
  font-size: .85rem;
  padding: .55rem .75rem;
  outline: none;
  box-sizing: border-box;
}
.st-ct-input:focus {
  border-color: rgb(65 78 86 / .4);
}
.st-ct-select {
  appearance: none;
}
.st-ct-textarea {
  resize: vertical;
  min-height: 90px;
}
.st-ct-submit {
  font-family: var(--cond);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--forest);
  background: var(--gold);
  border: 0;
  padding: .65rem 1.5rem;
  cursor: pointer;
  transition: background .2s;
}
.st-ct-submit:hover {
  background: var(--gold-bright, #f0c040);
}
.st-ct-submit:disabled {
  cursor: wait;
  opacity: .65;
}
.st-ct-trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.st-ct-status {
  min-height: 1.25em;
  margin: .65rem 0 0;
  font: 600 .72rem/1.4 var(--sans, sans-serif);
  color: rgb(240 235 226 / .72);
}
.st-ct-status[data-state="success"] {
  color: #7fc99a;
}
.st-ct-status[data-state="error"] {
  color: #e58b82;
}

/* ── Donate stage ── */
.ma-stage-scene--donate .ma-stage-shell {
  background: var(--frost-pure);
  border-color: rgb(65 78 86 / .14);
}
.ma-stage-content--donate {
  background: var(--frost-pure);
  display: flex;
  flex-direction: column;
}
.ma-donate-frame-wrap {
  flex: 1;
  min-height: 0;
  margin-top: .75rem;
}
.ma-donate-iframe {
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: 0;
  display: block;
}

/* ── back-to-sections control — mobile-only, shown once a sub-link's
   content is open (distinct from .ma-stage-close, which closes the whole
   panel) ── */
.ma-stage-back {
  display: none;
}

/* ── stage scenes — mobile: full-screen takeover slides in from the
   left instead of the desktop clip-path bloom; subnav stays side-by-side
   at rest, pushes fully off-screen once a sub-link is selected so the
   content column gets the full width ── */
@media (max-width: 720px) {
  .ma-stage-scene {
    clip-path: none;
    visibility: visible;
    transform: translateX(-100%);
    transition: transform .4s ease;
    pointer-events: none;
  }
  .ma-stage-scene.is-active {
    transform: translateX(0);
    pointer-events: auto;
  }

  .ma-stage-scene:has(.ma-stage-subnav) .ma-stage-shell {
    display: flex;
    width: 200%;
    /* slide via margin, NOT transform: a transformed shell would become the
       containing block for the fixed close button below and drag it off-screen
       when the content column is shown. margin-left keeps the scene itself the
       containing block so the close stays pinned to the viewport. */
    transition: margin-left .35s ease;
  }
  .ma-stage-scene:has(.ma-stage-subnav) .ma-stage-subnav,
  .ma-stage-scene:has(.ma-stage-subnav) .ma-stage-content {
    flex: 0 0 50%;
    width: 50%;
    box-sizing: border-box;
  }
  .ma-stage-scene.is-content-open .ma-stage-shell {
    margin-left: -100%;
  }

  /* Pin the close to the viewport top-right so it is reachable from BOTH the
     subnav view and the content view (previously it lived in the content
     column, which sits off-screen until a panel is picked → "can't close"). */
  .ma-stage-close {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 60;
  }

  .ma-stage-content {
    padding: 4.5rem 1.2rem 2rem;
  }
  .ma-stage-subnav {
    padding: 4.5rem 1rem 1.5rem;
  }

  .ma-stage-scene.is-content-open .ma-stage-back {
    display: inline-flex;
    align-items: center;
    position: absolute;
    top: .9rem;
    left: 1rem;
    z-index: 50;
    border: 0;
    background: transparent;
    color: rgb(65 78 86 / .72);
    font-family: var(--cond);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .ma-stage-scene.is-content-open .ma-stage-back:hover {
    color: var(--forest);
  }

  /* events panel exception: no subnav — gets the same 2-col true
     masonry treatment as the homepage events sections instead */
  .st-ev-rail {
    display: block;
    column-count: 2;
    column-gap: .6rem;
  }
  .st-ev-card,
  .st-ev-flyer {
    display: block;
    width: 100%;
    flex: none;
    min-height: 0;
    break-inside: avoid;
    margin-bottom: .6rem;
  }
  .st-ev-flyer img {
    height: auto;
  }
}

/* ═══════════════ BÉTON BRUT STAGES — poster-voice interiors ═══════════════
   Translates the events (.evx) vocabulary onto the five light stage scenes
   (about / services / events / building / contact): near-black ground,
   structural hairline column grid, Jura mono meta, numbered subnav,
   parenthesised kicker, gold only as index accent. Donate scene untouched.
   Single additive block — DELETE FROM HERE DOWN to revert to light scenes. */

:is(.ma-stage-scene--about, .ma-stage-scene--services, .ma-stage-scene--events, .ma-stage-scene--building, .ma-stage-scene--contact) .ma-stage-shell {
  background: #0c0d0e;
  color: #f0ebe2;
}
:is(.ma-stage-scene--about, .ma-stage-scene--services, .ma-stage-scene--events, .ma-stage-scene--building, .ma-stage-scene--contact) .ma-stage-content {
  background-color: #0c0d0e;
  background-image: linear-gradient(90deg, rgb(240 235 226 / .06) 1px, transparent 1px);
  background-size: 25% 100%;
}

/* subnav rail — hairline seam, mono label, numbered links */
:is(.ma-stage-scene--about, .ma-stage-scene--services, .ma-stage-scene--events, .ma-stage-scene--building, .ma-stage-scene--contact) .ma-stage-subnav {
  border-right: 1px solid rgb(240 235 226 / .14);
  counter-reset: bbnav;
}
:is(.ma-stage-scene--about, .ma-stage-scene--services, .ma-stage-scene--events, .ma-stage-scene--building, .ma-stage-scene--contact) .ma-stage-label {
  font-family: 'Jura', ui-monospace, monospace;
  letter-spacing: .26em;
  color: rgb(240 235 226 / .45);
}
:is(.ma-stage-scene--about, .ma-stage-scene--services, .ma-stage-scene--events, .ma-stage-scene--building, .ma-stage-scene--contact) .ma-stage-subnav-link {
  counter-increment: bbnav;
  color: rgb(240 235 226 / .5);
  border-top: 1px solid rgb(240 235 226 / .1);
}
:is(.ma-stage-scene--about, .ma-stage-scene--services, .ma-stage-scene--events, .ma-stage-scene--building, .ma-stage-scene--contact) .ma-stage-subnav-link::before {
  content: counter(bbnav, decimal-leading-zero);
  margin-right: .55em;
  font-family: 'Jura', ui-monospace, monospace;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: #c9a040;
}
:is(.ma-stage-scene--about, .ma-stage-scene--services, .ma-stage-scene--events, .ma-stage-scene--building, .ma-stage-scene--contact) .ma-stage-subnav-link.active,
:is(.ma-stage-scene--about, .ma-stage-scene--services, .ma-stage-scene--events, .ma-stage-scene--building, .ma-stage-scene--contact) .ma-stage-subnav-link:hover,
:is(.ma-stage-scene--about, .ma-stage-scene--services, .ma-stage-scene--events, .ma-stage-scene--building, .ma-stage-scene--contact) .ma-stage-subnav-link:focus-visible {
  color: #f0ebe2;
}

/* kicker + title — mono parenthetical over monumental condensed */
:is(.ma-stage-scene--about, .ma-stage-scene--services, .ma-stage-scene--events, .ma-stage-scene--building, .ma-stage-scene--contact) .ma-stage-kicker {
  font-family: 'Jura', ui-monospace, monospace;
  letter-spacing: .26em;
  color: rgb(240 235 226 / .55);
}
:is(.ma-stage-scene--about, .ma-stage-scene--services, .ma-stage-scene--events, .ma-stage-scene--building, .ma-stage-scene--contact) .ma-stage-kicker::before {
  content: "(  ";
}
:is(.ma-stage-scene--about, .ma-stage-scene--services, .ma-stage-scene--events, .ma-stage-scene--building, .ma-stage-scene--contact) .ma-stage-kicker::after {
  content: "  )";
}
:is(.ma-stage-scene--about, .ma-stage-scene--services, .ma-stage-scene--events, .ma-stage-scene--building, .ma-stage-scene--contact) .ma-stage-title {
  font-size: clamp(2rem, 3.4vw, 3.1rem);
  color: #f0ebe2;
}
:is(.ma-stage-scene--about, .ma-stage-scene--services, .ma-stage-scene--events, .ma-stage-scene--building, .ma-stage-scene--contact) .ma-stage-title em {
  color: rgb(240 235 226 / .32);
}

/* panel body */
:is(.ma-stage-scene--about, .ma-stage-scene--services, .ma-stage-scene--events, .ma-stage-scene--building, .ma-stage-scene--contact) .ma-stage-panel h3 {
  color: #f0ebe2;
  padding-top: .8rem;
  border-top: 1px solid rgb(240 235 226 / .14);
}
:is(.ma-stage-scene--about, .ma-stage-scene--services, .ma-stage-scene--events, .ma-stage-scene--building, .ma-stage-scene--contact) .ma-stage-panel p {
  color: rgb(240 235 226 / .78);
}

/* chrome — close / back */
:is(.ma-stage-scene--about, .ma-stage-scene--services, .ma-stage-scene--events, .ma-stage-scene--building, .ma-stage-scene--contact) .ma-stage-close,
:is(.ma-stage-scene--about, .ma-stage-scene--services, .ma-stage-scene--events, .ma-stage-scene--building, .ma-stage-scene--contact).is-content-open .ma-stage-back {
  color: rgb(240 235 226 / .7);
}
:is(.ma-stage-scene--about, .ma-stage-scene--services, .ma-stage-scene--events, .ma-stage-scene--building, .ma-stage-scene--contact) .ma-stage-close:hover,
:is(.ma-stage-scene--about, .ma-stage-scene--services, .ma-stage-scene--events, .ma-stage-scene--building, .ma-stage-scene--contact) .ma-stage-close:focus-visible,
:is(.ma-stage-scene--about, .ma-stage-scene--services, .ma-stage-scene--events, .ma-stage-scene--building, .ma-stage-scene--contact).is-content-open .ma-stage-back:hover {
  color: #f0ebe2;
}

/* contact stage */
.ma-stage-scene--contact .st-ct-label {
  color: rgb(240 235 226 / .45);
}
.ma-stage-scene--contact .st-ct-value {
  color: rgb(240 235 226 / .85);
}
.ma-stage-scene--contact .st-ct-value a {
  color: #c9a040;
}
.ma-stage-scene--contact .st-ct-map iframe {
  border: 1px solid rgb(240 235 226 / .14);
}

/* building > give */
.ma-stage-scene--building .ma-give-ways {
  border-top-color: rgb(240 235 226 / .16);
}
.ma-stage-scene--building .ma-give-ways-title,
.ma-stage-scene--building .ma-give-method {
  color: #f0ebe2;
}
.ma-stage-scene--building .ma-give-detail {
  color: rgb(240 235 226 / .72);
}
.ma-stage-scene--building .ma-give-cta {
  color: #f0ebe2;
  background: transparent;
  border: 1px solid #c9a040;
}
.ma-stage-scene--building .ma-give-cta:hover,
.ma-stage-scene--building .ma-give-cta:focus-visible {
  background: #c9a040;
  color: #0c0d0e;
}

/* about > imams */
.ma-stage-scene--about .ma-imam-card {
  background: rgb(240 235 226 / .04);
  border-color: rgb(240 235 226 / .16);
  border-radius: 0;
}
.ma-stage-scene--about .ma-imam-card:hover,
.ma-stage-scene--about .ma-imam-card:focus-visible {
  background: rgb(240 235 226 / .09);
  border-color: rgb(240 235 226 / .4);
}
.ma-stage-scene--about .ma-imam-photo {
  background-color: rgb(240 235 226 / .08);
  border-color: rgb(240 235 226 / .3);
}
.ma-stage-scene--about .ma-imam-name,
.ma-stage-scene--about .ma-imam-detail-name {
  color: #f0ebe2;
}
.ma-stage-scene--about .ma-imam-more {
  color: rgb(240 235 226 / .55);
}
.ma-stage-scene--about .ma-imam-card:hover .ma-imam-more,
.ma-stage-scene--about .ma-imam-card:focus-visible .ma-imam-more {
  color: #c9a040;
}
.ma-stage-scene--about .ma-imam-back {
  color: #c9a040;
}
.ma-stage-scene--about .ma-imam-detail-bio {
  color: rgb(240 235 226 / .82);
}

/* events stage cards */
.ma-stage-scene--events .st-ev-card {
  background: rgb(240 235 226 / .045);
  border-color: rgb(240 235 226 / .14);
}
.ma-stage-scene--events .st-ev-day,
.ma-stage-scene--events .st-ev-rsvp {
  color: #c9a040;
}
.ma-stage-scene--events .st-ev-month,
.ma-stage-scene--events .st-ev-time,
.ma-stage-scene--events .st-ev-loc {
  color: rgb(240 235 226 / .5);
}
.ma-stage-scene--events .st-ev-title {
  color: #f0ebe2;
}
.ma-stage-scene--events .st-ev-desc {
  color: rgb(240 235 226 / .72);
}
.ma-stage-scene--events .st-ev-flyer {
  border-color: rgb(240 235 226 / .14);
}
/* ═══════════════ END BÉTON BRUT STAGES ═══════════════ */

/* ── BÉTON BRUT STAGES, PART 2 — contact form, donate scene, ghost words ──
   Same deletable mockup region as PART 1 above: to revert the whole look,
   delete from the first "BÉTON BRUT STAGES" marker to end of file. */

/* contact form — controls were inheriting light-scene ink (invisible on dark) */
.ma-stage-scene--contact .st-ct-field-label {
  color: rgb(240 235 226 / .5);
}
.ma-stage-scene--contact .st-ct-input {
  background: rgb(240 235 226 / .06);
  border-color: rgb(240 235 226 / .3);
  color: #f0ebe2;
  color-scheme: dark;
}
.ma-stage-scene--contact .st-ct-input::placeholder {
  color: rgb(240 235 226 / .38);
}
.ma-stage-scene--contact .st-ct-input:focus {
  border-color: #c9a040;
  background: rgb(240 235 226 / .09);
}
/* native select: Chrome derives the popup chrome from the select's own
   background-color, and composites translucency over WHITE — so the select
   (including its focus state, which is active while the popup is open)
   must be OPAQUE dark, and the options colored explicitly */
.ma-stage-scene--contact .st-ct-select {
  background: #131516;
}
.ma-stage-scene--contact .st-ct-select:focus {
  background: #1a1d1e;
}
.ma-stage-scene--contact .st-ct-select option {
  background: #131516;
  color: #f0ebe2;
}
.ma-stage-scene--contact .st-ct-select option:disabled {
  color: rgb(240 235 226 / .45);
  background: #131516;
}

/* donate scene — same voice; campaigns become a numbered index rail and the
   white masjidal iframe hangs on the dark wall like the event posters */
.ma-stage-scene--donate .ma-stage-shell {
  background: #0c0d0e;
  color: #f0ebe2;
}
.ma-stage-scene--donate .ma-stage-content,
.ma-stage-scene--donate .ma-stage-content--donate {
  background-color: #0c0d0e;
  background-image: linear-gradient(90deg, rgb(240 235 226 / .06) 1px, transparent 1px);
  background-size: 25% 100%;
}
.ma-stage-scene--donate .ma-stage-subnav {
  border-right: 1px solid rgb(240 235 226 / .14);
  counter-reset: bbnav;
}
.ma-stage-scene--donate .ma-stage-label {
  font-family: 'Jura', ui-monospace, monospace;
  letter-spacing: .26em;
  color: rgb(240 235 226 / .45);
}
.ma-stage-scene--donate .ma-stage-subnav-link {
  counter-increment: bbnav;
  color: rgb(240 235 226 / .5);
  border-top: 1px solid rgb(240 235 226 / .1);
}
.ma-stage-scene--donate .ma-stage-subnav-link::before {
  content: counter(bbnav, decimal-leading-zero);
  margin-right: .55em;
  font-family: 'Jura', ui-monospace, monospace;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: #c9a040;
}
.ma-stage-scene--donate .ma-stage-subnav-link.active,
.ma-stage-scene--donate .ma-stage-subnav-link:hover,
.ma-stage-scene--donate .ma-stage-subnav-link:focus-visible {
  color: #f0ebe2;
}
.ma-stage-scene--donate .ma-stage-kicker {
  font-family: 'Jura', ui-monospace, monospace;
  letter-spacing: .26em;
  color: rgb(240 235 226 / .55);
}
.ma-stage-scene--donate .ma-stage-kicker::before {
  content: "(  ";
}
.ma-stage-scene--donate .ma-stage-kicker::after {
  content: "  )";
}
.ma-stage-scene--donate .ma-stage-title {
  color: #f0ebe2;
  font-size: clamp(2rem, 3.4vw, 3.1rem);
}
.ma-stage-scene--donate .ma-stage-title em {
  color: rgb(240 235 226 / .32);
}
.ma-stage-scene--donate .ma-stage-close {
  color: rgb(240 235 226 / .7);
}
.ma-stage-scene--donate .ma-stage-close:hover,
.ma-stage-scene--donate .ma-stage-close:focus-visible {
  color: #f0ebe2;
}
.ma-stage-scene--donate .ma-donate-frame-wrap {
  border: 1px solid rgb(240 235 226 / .14);
  background: #fff;
  box-shadow: 0 30px 60px rgb(0 0 0 / .55), 0 8px 20px rgb(0 0 0 / .4);
}

/* donate > ways to give — sits right under the title, above the iframe, so
   no leading rule (that pattern is for when it follows other content, like
   on the building stage). */
.ma-stage-scene--donate .ma-give-ways {
  border-top: none;
  padding-top: 0;
  margin-bottom: 2rem;
}
.ma-stage-scene--donate .ma-give-ways-title,
.ma-stage-scene--donate .ma-give-method {
  color: #f0ebe2;
}
.ma-stage-scene--donate .ma-give-detail {
  color: rgb(240 235 226 / .72);
}

/* ghost stage words — the .evx word-rhythm echo: one monumental hollow word
   per scene, hung on the content pane's right edge */
:is(.ma-stage-scene--about, .ma-stage-scene--services, .ma-stage-scene--events, .ma-stage-scene--building, .ma-stage-scene--contact, .ma-stage-scene--donate) .ma-stage-content::after {
  position: absolute;
  top: 4.2rem;
  right: 1.05rem;
  writing-mode: vertical-rl;
  font-family: var(--cond);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(3.6rem, 9vh, 6.5rem);
  line-height: .82;
  letter-spacing: .04em;
  color: transparent;
  -webkit-text-stroke: 1px rgb(240 235 226 / .10);
  pointer-events: none;
}
.ma-stage-scene--about    .ma-stage-content::after {
  content: "ABOUT";
}
.ma-stage-scene--services .ma-stage-content::after {
  content: "SERVICES";
}
.ma-stage-scene--events   .ma-stage-content::after {
  content: "EVENTS";
}
.ma-stage-scene--building .ma-stage-content::after {
  content: "AMANAH";
}
.ma-stage-scene--contact  .ma-stage-content::after {
  content: "CONTACT";
}
.ma-stage-scene--donate   .ma-stage-content::after {
  content: "SADAQAH";
}
/* ═══════════════ END BÉTON BRUT STAGES (PARTS 1+2) ═══════════════ */