/* ============================================================
   PFM Lyon — page Accueil (Figma 22:133, frame 1440x10120)
   Sections : hero, engagement, verset, contact rapide, services,
   conseils aux familles + hadith, équipe + étapes, CTA sombre,
   présence Lyon + chiffres, contact, partenariat mosquées.
   ============================================================ */

/* Modificateur bouton propre à cette page (bordure encre, non fourni
   par components.css qui n'a que --outline-white). */
.btn--outline-ink {
  background: transparent;
  color: var(--c-ink);
  border: 1px solid var(--c-ink);
}
.btn--outline-ink:hover { background: rgba(11, 25, 55, 0.05); }
.btn--outline-ink .ic-arrow path { fill: var(--c-ink); }

/* Eyebrow à un seul point (sections alignées à gauche) : components.css
   ne fournit que --start (retire le point AVANT), ici on retire celui
   d'APRÈS pour ne garder que le point de tête, comme sur la maquette. */
.eyebrow--solo::after { display: none; }

/* ================= HERO ================= */
.hero {
  position: relative;
  height: 650px;
  display: flex;
  align-items: center;
  color: var(--c-white);
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__veil {
  position: absolute; inset: 0; z-index: 1;
  background: var(--g-hero-veil), rgba(0, 0, 0, 0.45);
}
.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero__calligraphy { width: 154px; height: 54px; }
.hero__title {
  margin-top: 24px;
  font: var(--t-h1);
  text-align: center;
  max-width: 921px;
}
.hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 10px 26px;
  background: rgba(255, 255, 255, 0.05);
  border: 0.5px solid var(--c-white);
  border-radius: var(--r-pill);
  backdrop-filter: blur(5px);
  font: var(--t-tag);
  letter-spacing: 0.24px;
}
.hero__pill-dot {
  width: 7px; height: 7px;
  border-radius: var(--r-input);
  background: var(--c-primary);
  flex: none;
}
.hero__lead {
  margin-top: 20px;
  font: var(--t-body-med);
  text-align: center;
  max-width: 921px;
}
.hero__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 32px;
}
.hero__cards {
  display: flex;
  gap: 24px;
  margin-top: 47px;
  width: 100%;
}
.hero__card {
  flex: none;
  width: 275px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px;
  background: var(--c-white-02);
  border: 0.5px solid var(--c-white-50);
  border-radius: var(--r-box);
  backdrop-filter: blur(5px);
  text-align: center;
}
.hero__card:nth-child(2) { width: 270px; }
.hero__card:nth-child(3) { width: 257px; }
.hero__card:nth-child(4) { width: 326px; }
.hero__card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font: var(--t-label-15);
  color: var(--c-white);
}
.hero__card-text {
  font: var(--t-small);
  color: var(--c-white);
}

/* ================= Zone crème (engagement + verset + contact rapide + services) ================= */
.cream-zone {
  background: var(--c-cream);
  padding-top: 72px;
  display: flex;
  flex-direction: column;
  gap: 104px;
}
.cream-zone > .services {
  position: relative;
  padding-top: 16px;
  padding-bottom: 86px;
}

/* ================= Engagement ("Vous n'êtes pas seuls") ================= */
.engagement__grid {
  display: flex;
  align-items: center;
  gap: 81px;
}
.engagement__col {
  flex: 1 1 690px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.engagement__col > .engagement__actions { margin-top: 16px; }
.engagement__panel {
  display: flex;
  align-items: center;
  gap: 24px;
}
.engagement__badge {
  flex: none;
  width: 204px;
  height: 199px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  background: var(--c-white);
  border-radius: 22px;
  text-align: center;
}
.engagement__badge strong {
  font: var(--t-h3);
  color: var(--c-title);
}
.engagement__badge span {
  font: var(--t-lead-20);
  color: var(--c-body);
}
.engagement__list {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.engagement__list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font: var(--t-body-24);
  color: var(--c-body);
}
.engagement__list img { flex: none; }
.engagement__actions {
  display: flex;
  align-items: center;
  gap: 24px;
}
.engagement__media {
  position: relative;
  flex: none;
  width: 429px;
}
.engagement__media img:first-child {
  width: 429px;
  height: 548px;
  object-fit: cover;
  border-radius: var(--r-img);
  box-shadow: var(--sh-card);
}
.engagement__media-ornament {
  position: absolute;
  top: -24px;
  right: -24px;
  opacity: 0.9;
}

/* ================= Verset ================= */
.verse__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1036px;
}
.verse__arabic {
  font: var(--t-arabic-26);
  color: var(--c-body);
  text-align: center;
}
.verse__ornament {
  position: absolute;
  top: -15px;
  right: 5px;
}
.verse__citation {
  position: relative;
  width: 100%;
  margin-top: 21px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.verse__text {
  margin-top: 0;
  /* TODO token : 600 24/39.6 Raleway ls0.48, absent des tokens (proche --t-lead-20 mais poids/taille différents) */
  font: 600 24px/39.6px var(--f-body);
  letter-spacing: 0.48px;
  color: var(--c-body);
  text-align: center;
  max-width: 1010px;
}
.verse__divider {
  display: block;
  width: 2px;
  height: 24px;
  margin-top: 8px;
  background: #D4D2D2;
  border-radius: 10px;
}
.verse__ref-icon {
  position: absolute;
  left: 33px;
  top: 100px;
}
.verse__ref {
  margin-top: 16px;
  font: var(--t-lead-17);
  font-weight: 700;
  color: var(--c-ink);
}

/* ================= Contact rapide (bandeau marine) ================= */
.quick-contact__card {
  background: var(--c-ink);
  border-radius: var(--r-card-lg);
  padding: 32px 40px;
  position: relative;
  overflow: hidden;
}
.quick-contact__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../icons/ornament-hands.svg") center / 700px auto no-repeat;
  opacity: 0.04;
  pointer-events: none;
}
.quick-contact__row {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}
.quick-contact__col {
  flex: 1 1 482px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.quick-contact__col .section-head h2,
.quick-contact__col .section-head p { color: var(--c-white); }
.quick-contact__actions {
  display: flex;
  align-items: center;
  gap: 24px;
}
.quick-contact__form {
  flex: 1 1 548px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.quick-contact__submit { width: 100%; margin-top: 3px; }

/* Champs de formulaire (réutilisés par .quick-contact et .contact) */
.field-row { display: flex; gap: 24px; }
.field {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.field__label { font: var(--t-eyebrow); color: var(--c-ink); }
.field--dark .field__label { color: var(--c-white); }
.field__control {
  background: var(--c-white);
  border-radius: var(--r-pill);
  padding: 14px;
}
.field--message .field__control {
  border-radius: var(--r-box-md);
  padding: 16px 16px 12px;
}
.field__input {
  display: block;
  width: 100%;
  border: 0;
  background: none;
  /* TODO token : 400 14/16.8 Raleway, absent des tokens (repris de page-contact.css) */
  font: 400 14px/16.8px var(--f-body);
  color: var(--c-ink);
}
.field__input::placeholder { color: var(--c-muted); }
.field__textarea { min-height: 87px; resize: vertical; line-height: 16.8px; }

/* ================= Services ================= */
.services__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 40px;
}
.services__card {
  position: relative;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px;
  border-radius: 24px;
  overflow: hidden;
}
.services__card--tl { border-radius: 24px 24px 0 24px; }
.services__card--tr { border-radius: 24px 24px 24px 0; }
.services__card--bl { border-radius: 24px 0 24px 24px; }
.services__card--br { border-radius: 0 24px 24px 24px; }
.services__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.services__card-veil {
  position: absolute; inset: 0;
  background: var(--g-card-veil);
  z-index: 1;
}
.services__card-arrow {
  position: relative;
  z-index: 2;
  align-self: flex-end;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 47px; height: 47px;
  background: var(--c-white);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-btn);
}
.services__card-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--c-white);
}
.services__card-body h3 { font: var(--t-h4); }
.services__card-body p { font: var(--t-body); }
.services__phone {
  margin: 40px auto 0;
  width: fit-content;
}

/* ================= Conseils aux familles + hadith ================= */
.advice { padding-block: 104px 0; }
.advice__grid {
  display: flex;
  align-items: center;
  gap: 56px;
}
.advice__col {
  flex: 1 1 640px;
  display: flex;
  flex-direction: column;
  gap: 17px;
}
.advice__col > .advice__phone { margin-top: 15px; }
.advice__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.advice__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font: var(--t-lead-17);
  color: var(--c-body);
}
.advice__icon {
  flex: none;
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-primary);
  border-radius: var(--r-tag);
}
.advice__phone { width: fit-content; }
.advice__media {
  position: relative;
  flex: none;
  width: 504px;
}
.advice__media > img:first-child {
  width: 504px;
  height: 435px;
  object-fit: cover;
  border-radius: 60px 0 60px 0;
}
.advice__badge {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--r-pill);
  backdrop-filter: blur(7px);
}
.advice__badge-calligraphy {
  display: block;
  width: 229px;
  height: 56px;
  max-width: none;
}

.hadith {
  display: flex;
  gap: 32px;
  margin-top: 56px;
}
.hadith__card {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 24px;
  border-radius: var(--r-box);
}
.hadith__card--fr { background: var(--c-cream); color: var(--c-title); }
.hadith__card--ar { background: var(--c-ink); color: var(--c-white); }
.hadith__quote {
  width: 43px; height: 43px;
  padding: 12px;
  border-radius: var(--r-pill);
  background: var(--c-white);
  box-sizing: border-box;
}
.hadith__card--ar .hadith__quote { align-self: flex-end; }
.hadith__text { margin-top: 18px; font: var(--t-body-med); }
.hadith__text span[lang="ar"] { font-family: var(--f-arabic); }
.hadith__card--ar .hadith__text {
  font: var(--t-arabic-20);
  text-align: right;
}
.hadith__ref { font: var(--t-small-med); }
.hadith__card--ar .hadith__ref { font: var(--t-arabic-16); text-align: right; }
.hadith__mark {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 133px; height: 77px;
  max-width: 40%;
  opacity: 0.15;
  background: radial-gradient(circle, var(--c-primary) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.hadith__card > *:not(.hadith__mark) { position: relative; z-index: 1; }
.hadith__card--ar .hadith__mark { background: radial-gradient(circle, var(--c-white) 0%, transparent 70%); }

/* ================= Équipe à l'écoute ================= */
.team { padding-block: 104px; }
.team__grid {
  display: flex;
  align-items: stretch;
  gap: 24px;
  margin-top: 41px;
}
.team__col {
  flex: 1 1 360px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.team__media { flex: none; width: 432px; }
.team__media img {
  width: 432px; height: 470px;
  object-fit: cover;
  border-radius: var(--r-card);
}
.team__card {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--c-grey-bg);
  overflow: hidden;
}
.team__card--tl { border-radius: 20px 20px 0 20px; }
.team__card--bl { border-radius: 20px 0 20px 20px; }
.team__card--tr { border-radius: 20px 20px 20px 0; }
.team__card--br { border-radius: 0 20px 20px 20px; }
.team__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  background: var(--c-ink);
  border-radius: 15px;
  border: 1px solid var(--c-ink);
}
.team__card h3 { font: var(--t-h5); color: var(--c-title); }
.team__card p { font: var(--t-small-lh22); color: var(--c-body); }

/* ================= Étapes (Comment nous vous accompagnons) ================= */
.steps { padding-block: 0 104px; }
.steps .section-head--center { max-width: 790px; margin-inline: auto; }
.steps__list {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  margin-top: 42px;
}
.steps__item {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.steps__item:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 38px;
  right: 100%;
  width: 40px;
  height: 0;
  border-top: 1px dashed var(--c-primary);
}
.steps__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px; height: 76px;
  background: rgba(11, 25, 55, 0.02);
  border-radius: var(--r-btn);
}
.steps__badge {
  display: inline-flex;
  padding: 9px 22px;
  border: 0.5px solid var(--c-primary);
  border-radius: var(--r-pill);
  font: var(--t-tag);
  color: var(--c-primary);
}
.steps__item h3 { font: var(--t-h6); letter-spacing: -0.2px; color: var(--c-title); }
.steps__item p { font: var(--t-small); color: var(--c-body); }
.steps__phone { margin: 48px auto 0; width: fit-content; }

/* ================= CTA sombre ================= */
.cta-dark {
  position: relative;
  padding-block: 112px;
  overflow: hidden;
}
.cta-dark__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.cta-dark__veil {
  position: absolute; inset: 0;
  z-index: 1;
  background: var(--g-ink-gold);
}
.cta-dark__ornament {
  position: absolute;
  z-index: 1;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.17;
  pointer-events: none;
}
.cta-dark__badge {
  position: absolute;
  z-index: 1;
  left: 1098px;
  top: 139px;
  width: 222px;
  height: 222px;
  border-radius: 50%;
  background: rgba(194, 164, 106, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.cta-dark__badge::before {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: var(--c-primary);
}
.cta-dark__badge img { position: relative; z-index: 1; }
.cta-dark__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 33px;
  max-width: 645px;
}
.cta-dark .section-head h2,
.cta-dark .section-head p { color: var(--c-white); }
.cta-dark__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* ================= Présents à Lyon + chiffres ================= */
.presence { margin-top: 107px; padding-top: 104px; padding-bottom: 108px; }
.presence__grid {
  display: flex;
  align-items: center;
  gap: 56px;
}
.presence__col {
  flex: 1 1 640px;
  display: flex;
  flex-direction: column;
  gap: 17px;
}
.presence__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.presence__list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font: var(--t-body-med);
  color: var(--c-body);
}
.presence__list img { flex: none; }
.presence__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 9px;
}
.presence__media { flex: none; width: 504px; }
.presence__media img {
  width: 504px; height: 461px;
  object-fit: cover;
  border-radius: var(--r-img);
}

.stats__head { margin-top: 104px; max-width: 790px; margin-inline: auto; }
.stats__grid {
  display: flex;
  align-items: stretch;
  gap: 24px;
  margin-top: 41px;
}
.stats__card {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 24px;
  background: var(--c-white);
  border-radius: var(--r-card);
  text-align: center;
}
.stats__card p { margin-top: -10px; }
.stats__card--dark { background: var(--c-ink); }
.stats__card h3 { margin-top: 53px; font: var(--t-h3); color: var(--c-title); }
.stats__card--dark h3 { color: var(--c-white); }
.stats__card p { font: var(--t-small-lh22); color: var(--c-body); }
.stats__card--dark p { color: var(--c-white); }

/* ================= Contact ================= */
.contact { padding-block: 104px; }
.contact__head { max-width: 895px; margin-inline: auto; }
.contact__row {
  display: flex;
  align-items: stretch;
  gap: 32px;
  margin-top: 41px;
}
.contact__card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 32px;
  background: var(--c-cream);
  border-radius: var(--r-card-lg);
}
.contact__fields { display: flex; flex-direction: column; gap: 32px; }
.contact__actions { display: flex; justify-content: flex-end; }
/* TODO token : filet #DACFB9 absent de tokens.css (déjà en dur dans page-contact.css) */
.contact__rule { display: block; height: 1px; width: 100%; background: #DACFB9; }
.contact__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.contact__meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font: var(--t-small);
  color: var(--c-ink);
  padding-right: 12px;
  border-right: 1px solid rgba(11, 25, 55, 0.15);
}
.contact__meta-item:last-child { border-right: 0; padding-right: 0; }
.contact__meta-dot {
  width: 8px; height: 8px;
  border-radius: var(--r-input);
  background: var(--c-primary);
}

.contact__media {
  position: relative;
  flex: none;
  width: 396px;
  border-radius: var(--r-card-lg);
  overflow: hidden;
}
.contact__media img { width: 396px; height: 596px; object-fit: cover; }
.contact__media-veil {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.1);
}
.contact__badge {
  position: absolute;
  left: 50%;
  top: 60px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: var(--r-pill);
  backdrop-filter: blur(7px);
}
.contact__badge img { width: 220px; height: 77px; filter: drop-shadow(0 0 13px rgba(0,0,0,0.62)); }

/* ================= Partenariat mosquées ================= */
.mosque-partner {
  position: relative;
  padding-block: 106px;
  margin-bottom: 104px;
  overflow: hidden;
  /* TODO token : fond #F7F7F7 (Rectangle 48) absent de tokens.css, proche --c-grey-bg */
  background: #F7F7F7;
}
.mosque-partner__bg {
  position: absolute;
  inset: -140px -160px auto auto;
  width: 942px; height: 737px;
  border-radius: 50%;
  /* TODO token : dégradé vert #027F5D → #014F39 (illustration mosquée) absent de tokens.css */
  background: radial-gradient(circle at 30% 30%, #027F5D 0%, #014F39 100%);
  opacity: 0.06;
  pointer-events: none;
}
.mosque-partner__illustration {
  position: absolute;
  left: 120px;
  bottom: 72px;
  width: 426px;
  height: 410px;
  object-fit: contain;
  opacity: 0.9;
}
.mosque-partner__head {
  max-width: 674px;
  margin-left: auto;
  gap: 16px;
}
.mosque-partner__cta { margin-left: auto; margin-top: 24px; display: flex; width: fit-content; }

/* ================= Footer : crédit développeur (accent maquette) ================= */
.footer__copy-credit { text-transform: uppercase; }
.footer__copy strong { font-weight: 700; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1240px) {
  .engagement__grid { gap: 64px; }
  .engagement__media,
  .engagement__media img:first-child { width: 360px; }
  .advice__media,
  .advice__media > img:first-child { width: 420px; }
  .presence__media,
  .presence__media img { width: 420px; }
}

@media (max-width: 1024px) {
  .hero { height: auto; padding-block: 72px; }
  .hero__cards { flex-wrap: wrap; }
  .hero__card,
  .hero__card:nth-child(2),
  .hero__card:nth-child(3),
  .hero__card:nth-child(4) { width: auto; flex: 1 1 45%; }

  .engagement__grid { flex-direction: column; }
  .engagement__col { flex: none; width: 100%; }
  .engagement__media { width: 100%; }
  .engagement__media img:first-child { width: 100%; height: 420px; }

  .quick-contact__row { flex-direction: column; }
  .quick-contact__col,
  .quick-contact__form { flex: none; width: 100%; }

  .services__grid { grid-template-columns: 1fr; }
  .services__card--tl,
  .services__card--tr,
  .services__card--bl,
  .services__card--br { border-radius: 24px; }

  .advice__grid { flex-direction: column; }
  .advice__col { flex: none; width: 100%; }
  .advice__media { width: 100%; }
  .advice__media > img:first-child { width: 100%; height: 360px; }
  .hadith { flex-direction: column; }

  .team__grid { flex-direction: column; }
  .team__col { flex: none; width: 100%; }
  .team__card { flex: none; }
  .team__media { width: 100%; order: -1; }
  .team__media img { width: 100%; height: 320px; }

  .steps__list { flex-wrap: wrap; }
  .steps__item { flex: 1 1 45%; }
  .steps__item::before { display: none; }

  .presence__grid { flex-direction: column; }
  .presence__col { flex: none; width: 100%; }
  .presence__media { width: 100%; }
  .presence__media img { width: 100%; height: 360px; }
  .stats__grid { flex-direction: column; }
  /* En colonne, la flex-basis 0 des cartes deviendrait une hauteur figée/nulle */
  .stats__card,
  .hadith__card { flex-basis: auto; }

  .contact__row { flex-direction: column; }
  .contact__media { width: 100%; }
  .contact__media img { width: 100%; height: 420px; }

  .mosque-partner__head { margin-left: 0; }
  .mosque-partner__illustration { opacity: 0.4; width: 280px; height: 270px; }
}

@media (max-width: 820px) {
  .hero__title { font-size: 34px; line-height: 44px; }
  .hero__cards { flex-direction: column; }
  .hero__card { flex: 1 1 auto; }
  .hero__actions { flex-direction: column; align-items: stretch; }

  .cream-zone { padding-block: 56px; gap: 72px; }
  .engagement__panel { flex-direction: column; align-items: stretch; }
  .engagement__badge { width: 100%; height: auto; padding-block: 24px; }
  .engagement__actions { flex-direction: column; align-items: stretch; }

  .quick-contact__card { padding: 24px; }
  .field-row { flex-direction: column; gap: 16px; }
  .quick-contact__actions { flex-direction: column; align-items: stretch; }

  .advice { padding-block: 72px 40px; }
  .team { padding-block: 72px; }
  .steps { padding-block: 0 72px; }
  .presence { padding-block: 72px; }
  .contact { padding-block: 72px; }
  .mosque-partner { padding-block: 64px; }
  .stats__head { margin-top: 72px; }

  .presence__actions,
  .cta-dark__actions { flex-direction: column; align-items: stretch; }
  .contact__card { padding: 24px; }
  .contact__meta { gap: 8px; }
  .contact__meta-item { border-right: 0; padding-right: 0; flex: 1 1 100%; }
}

@media (max-width: 600px) {
  .hero__title { font-size: 28px; line-height: 36px; }
  .hero__lead { font-size: 15px; }
  .verse__text { font-size: 19px; line-height: 31px; }
  .engagement__actions .btn,
  .services__phone,
  .advice__phone,
  .steps__phone { width: 100%; justify-content: center; }
  .stats__grid { gap: 16px; }
  .contact__actions .btn { width: 100%; }
  .mosque-partner__cta { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .hero__pill { text-align: left; }
  .engagement__list li,
  .presence__list li { align-items: flex-start; }
  .steps__badge { font-size: 11px; }
}