/*
 * Prophet Muhammad — Elementor widget styles.
 *
 * Each homepage section of the design, on top of the theme's main.css (which
 * holds the tokens and the shared pieces: eyebrow labels, the "Explore More"
 * button, article cards, section headings). Breakpoints follow the design —
 * 1280px, 900px and 620px — and 767px, Elementor's phone size, is where the
 * large banners switch to their phone picture.
 *
 * Selectors that size pictures carry two classes, so Elementor's own
 * ".elementor img { height: auto }" cannot undo them.
 */

/* ── Shared ───────────────────────────────────────────────────── */

.pm-section {
  width: var(--pm-container, 87.3vw);
  margin: 0 auto;
  padding: 90px 0 75px;
}

.pm-editor-hint {
  margin: 20px auto;
  padding: 18px 22px;
  width: min(900px, 90%);
  border: 1px dashed #b78f50;
  border-radius: 12px;
  background: #fffaf1;
  color: #6b5a47;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 14px;
  text-align: center;
}

/* ── Hero ─────────────────────────────────────────────────────── */

.pm-hero {
  position: relative;
  width: var(--pm-container);
  min-height: 830px;
  margin: 10px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.34fr);
  align-items: start;
}

.pm-hero--no-stories {
  grid-template-columns: minmax(0, 1fr);
}

.pm-hero__copy {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  height: 820px;
  padding-top: 100px;
}

/* Every slide sits in the same cell, so the hero keeps the height of the
   tallest one and nothing below it jumps when the slides change. */
.pm-hero__slides {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.pm-hero__slide {
  grid-area: 1 / 1;
  min-height: 565px;
  visibility: hidden;
}

.pm-hero__slide.is-active {
  visibility: visible;
  animation: pm-fade-up 650ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.pm-hero .pm-hero__title {
  position: relative;
  z-index: 2;
  font-size: clamp(62px, 6.25vw, 120px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.pm-hero__title span {
  display: block;
  white-space: nowrap;
}

.pm-hero .pm-hero__kicker {
  max-width: 525px;
  margin-top: 28px;
  color: var(--pm-green);
  font-family: var(--pm-font-titling);
  font-size: clamp(21px, 1.65vw, 32px);
  line-height: 1.2;
}

.pm-hero .pm-hero__intro {
  max-width: 425px;
  margin: 30px 0 38px;
  font-size: 18px;
  line-height: 1.6;
}

/* The long white arrow at the foot of the picture moves to the next slide. */
.pm-hero__next {
  position: absolute;
  right: 8%;
  bottom: 48px;
  z-index: 3;
  width: 69px;
  padding: 8px 0;
  border: 0;
  background: none;
  color: #fff;
  transition: transform 240ms ease;
}

.pm-hero__next:hover {
  transform: translateX(6px);
}

.pm-hero__next .pm-icon {
  display: block;
  width: 69px;
  height: 16px;
}

/* ── Slide timeline (hero and quote banner) ───────────────────── */

/* "01 ─── ── ── 03": the number of the slide in view, a fine line per slide
   and the number of slides. The line of the slide in view widens and fills
   in green over the time the slide stays; lines already seen stay gold. */
.pm-slider-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  --pm-nav-ink: var(--pm-ink);
  --pm-nav-track: rgb(6 39 33 / 14%);
  --pm-nav-fill: var(--pm-green);
  --pm-nav-past: var(--pm-gold);
}

/* The two numbers share one face and size; the one in view is green. */
.pm-slider-nav__current,
.pm-slider-nav__total {
  font-family: var(--pm-font-label);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
}

.pm-slider-nav__current {
  min-width: 2ch;
  color: var(--pm-nav-fill);
}

.pm-slider-nav__current.is-changing {
  animation: pm-nav-number 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes pm-nav-number {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.pm-slider-nav__total {
  color: var(--pm-nav-past);
}

.pm-slider-nav__steps {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* A 2px line inside a taller button that is easy to click. */
.pm-slider-nav__step {
  width: 36px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pm-slider-nav__step.is-active {
  width: 88px;
}

.pm-slider-nav__bar {
  position: relative;
  display: block;
  height: 2px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--pm-nav-track);
  transition: background-color 240ms ease;
}

.pm-slider-nav__step:hover .pm-slider-nav__bar {
  background: rgb(6 39 33 / 28%);
}

.pm-slider-nav__fill {
  position: absolute;
  inset: 0;
  background: var(--pm-nav-fill);
  transform: scaleX(0);
  transform-origin: left center;
}

.pm-slider-nav__step.is-past .pm-slider-nav__fill {
  background: var(--pm-nav-past);
  transform: scaleX(1);
  transition: transform 400ms ease;
}

/* The line of the slide in view: full at once when the slides do not move by
   themselves, filling over --pm-interval when they do. */
.pm-slider-nav__step.is-active .pm-slider-nav__fill {
  transform: scaleX(1);
}

.is-autoplay .pm-slider-nav__step.is-active .pm-slider-nav__fill {
  animation: pm-nav-progress var(--pm-interval, 7000ms) linear forwards;
}

.is-paused .pm-slider-nav__step.is-active .pm-slider-nav__fill {
  animation-play-state: paused;
}

@keyframes pm-nav-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.pm-hero__nav {
  position: absolute;
  bottom: 24px;
  left: 0;
}

.pm-hero__media {
  position: absolute;
  top: 0;
  left: 19%;
  z-index: 1;
  width: 55.5%;
  height: 820px;
  border-radius: 400px 0 0 0;
}

.pm-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(90deg, #fff 0%, rgb(255 255 255 / 72%) 14%, transparent 38%);
  pointer-events: none;
}

.pm-hero__picture {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
}

.pm-hero__picture--empty {
  background: var(--pm-cream);
}

.pm-hero .pm-hero__picture img {
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: inherit;
  object-fit: cover;
}

.pm-hero .pm-hero__quote {
  position: absolute;
  z-index: 2;
  right: 30px;
  bottom: 35px;
  width: min(420px, 72%);
  margin: 0;
  padding: 24px;
  border-radius: 16px;
  background: rgb(255 255 255 / 90%);
  box-shadow: 0 30px 30px rgb(31 80 61 / 10%);
  color: var(--pm-ink);
  font-family: var(--pm-font-quote);
  font-size: 18px;
  font-style: italic;
  line-height: 1.7;
}

.pm-hero__quote p {
  margin: 0;
}

.pm-hero__quote cite {
  display: block;
}

.pm-hero__stories {
  position: relative;
  z-index: 3;
  grid-column: 2;
  grid-row: 1;
  display: grid;
  align-content: start;
  gap: 28px;
}

/* The first article: a picture card hanging from the top of the hero. */
.pm-card.pm-hero__feature {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 385px; /* the design's 317px, a fifth taller */
  margin-left: 8px;
  padding: 28px 28px 30px;
  border-radius: 0 0 24px 24px;
  overflow: hidden;
  color: #fff;
}

.pm-hero__feature .pm-eyebrow,
.pm-hero__feature .pm-card__title {
  position: relative;
  z-index: 1;
  color: #fff;
}

.pm-hero__feature .pm-card__title .pm-article-link:hover,
.pm-hero__feature .pm-card__title .pm-article-link:focus-visible,
.pm-hero__feature:hover .pm-card__title .pm-article-link {
  color: #fff;
}

.pm-hero__feature .pm-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
}

.pm-card.pm-hero__feature .pm-card__image {
  height: 100%;
  border-radius: inherit;
  filter: brightness(0.5);
}

.pm-card.pm-hero__feature .pm-card__title {
  margin-bottom: 0;
  font-size: 35px;
  line-height: 1.15;
}

/* The others: title beside a round picture. */
.pm-card.pm-hero__story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 106px;
  align-items: center;
  column-gap: 14px;
  margin-left: 35px;
  padding: 18px 0;
  border-bottom: 1px solid #ccd7d4;
}

.pm-hero__story .pm-eyebrow,
.pm-hero__story .pm-card__title {
  grid-column: 1;
}

.pm-card.pm-hero__story .pm-card__title {
  margin: 6px 0 0;
  font-size: 22px;
}

.pm-hero__story .pm-card__media {
  grid-column: 2;
  grid-row: 1 / 3;
  border-radius: 50%;
}

.pm-card.pm-hero__story .pm-card__image {
  width: 106px;
  height: 106px;
  border-radius: 50%;
}

@media (max-width: 1280px) {
  .pm-hero {
    grid-template-columns: 0.9fr 1.3fr;
    row-gap: 38px;
  }

  .pm-hero__copy {
    grid-row: 1 / span 2;
    height: 680px;
  }

  .pm-hero__media {
    position: relative;
    top: auto;
    left: auto;
    grid-column: 2;
    grid-row: 1;
    width: calc(100% + 60px);
    height: 680px;
    margin-left: -60px;
  }

  .pm-hero__stories {
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: 1.08fr 1fr;
    gap: 24px;
  }

  .pm-card.pm-hero__feature {
    grid-row: 1 / span 2;
    min-height: 420px;
    margin-left: 0;
    border-radius: 24px;
  }

  .pm-card.pm-hero__story {
    margin-left: 0;
  }

  .pm-hero__next {
    right: auto;
    left: calc(100% + 40px);
  }
}

@media (max-width: 900px) {
  .pm-hero {
    width: 100%;
    min-height: 620px;
    grid-template-columns: 0.9fr 1.1fr;
    margin-top: 0;
  }

  .pm-hero__copy {
    grid-column: 1;
    grid-row: 1;
    height: auto;
    min-height: 620px;
    padding: 60px 3vw 70px 5vw;
  }

  .pm-hero .pm-hero__title {
    font-size: clamp(52px, 7vw, 68px);
  }

  .pm-hero__slide {
    min-height: 0;
  }

  .pm-hero .pm-hero__kicker {
    margin-top: 25px;
  }

  .pm-hero .pm-hero__intro {
    margin: 25px 0;
  }

  .pm-hero__nav {
    left: 5vw;
  }

  .pm-hero__next {
    display: none;
  }

  .pm-hero__media {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    height: 620px;
    margin-left: 0;
  }

  .pm-hero .pm-hero__quote {
    right: 4vw;
    bottom: 28px;
  }

  .pm-hero__stories {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 86vw;
    margin: 0 auto 60px;
  }
}

@media (max-width: 620px) {
  .pm-hero {
    min-height: auto;
    grid-template-columns: minmax(0, 1fr);
  }

  .pm-hero .pm-hero__title {
    font-size: clamp(44px, 14vw, 59px);
  }

  /* A long line ("Changed History") would otherwise run off a phone screen. */
  .pm-hero__title span {
    white-space: normal;
  }

  .pm-hero__copy {
    min-height: 0;
    padding: 56px 7vw 64px;
  }

  .pm-hero__nav {
    left: 7vw;
  }

  .pm-hero__media {
    grid-column: 1;
    grid-row: 2;
    width: 93vw;
    height: 72vw;
    min-height: 430px;
    margin-left: 7vw;
    border-radius: 180px 0 0 0;
  }

  .pm-hero .pm-hero__quote {
    width: 85%;
    font-size: 15px;
  }

  .pm-hero__stories {
    grid-column: 1;
    grid-row: 3;
    grid-template-columns: minmax(0, 1fr);
    margin-top: 40px;
  }

  .pm-card.pm-hero__feature {
    grid-row: auto;
    min-height: 468px;
  }

  .pm-card.pm-hero__feature .pm-card__title {
    font-size: 30px;
  }
}

/* ── Article directory ────────────────────────────────────────── */

.pm-directory {
  display: grid;
  grid-template-columns: repeat(var(--pm-columns, 4), minmax(0, 1fr));
  gap: clamp(35px, 5vw, 95px);
  padding: 80px var(--pm-gutter);
  background: var(--pm-ink);
  color: #fff;
}

.pm-directory .pm-directory__heading {
  margin-bottom: 30px;
  color: #fff;
  font-size: 26px;
  line-height: 1.3;
}

.pm-directory__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pm-directory__list li {
  margin: 0;
}

.pm-directory .pm-directory__link {
  display: flex;
  gap: 16px;
  min-height: 78px;
  padding: 20px 0;
  border-bottom: 1px solid rgb(255 255 255 / 12%);
  color: var(--pm-muted);
  font-size: 17px;
  line-height: 1.55;
  text-decoration: none;
  transition: color 220ms ease;
}

.pm-directory .pm-directory__link:hover,
.pm-directory .pm-directory__link:focus-visible {
  color: #fff;
}

.pm-directory__arrow {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 1px;
}

.pm-directory__arrow .pm-icon {
  position: absolute;
  inset: 0;
  width: 24px;
  height: 24px;
  transition: opacity 220ms ease, transform 220ms ease;
}

.pm-directory__arrow .is-default {
  color: #263734;
}

.pm-directory__arrow .is-hover {
  color: var(--pm-green);
  opacity: 0;
  transform: scale(0.7) rotate(-15deg);
}

.pm-directory__link:hover .is-default,
.pm-directory__link:focus-visible .is-default {
  opacity: 0;
}

.pm-directory__link:hover .is-hover,
.pm-directory__link:focus-visible .is-hover {
  opacity: 1;
  transform: none;
}

/* Folding: the rows after the first slide shut, and a round + / − button on a
   green line at the foot of the band opens them. Without JavaScript every row
   simply shows and the button is hidden. */
.pm-directory.is-collapsible {
  position: relative;
  z-index: 2;
}

.pm-directory__more {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 550ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pm-directory__more > .pm-directory__list {
  min-height: 0;
  overflow: hidden;
}

.pm-js .pm-directory.is-folded .pm-directory__more {
  grid-template-rows: 0fr;
}

.pm-directory__toggle-bar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 6px;
  background: var(--pm-directory-toggle, var(--pm-green));
}

html:not(.pm-js) .pm-directory__toggle-bar {
  display: none;
}

.pm-directory__toggle {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--pm-directory-toggle, var(--pm-green));
  color: #fff;
  box-shadow: 0 6px 18px rgb(6 39 33 / 25%);
  transform: translate(-50%, -50%);
  transition: transform 240ms ease, filter 240ms ease;
}

.pm-directory__toggle:hover {
  filter: brightness(1.12);
  transform: translate(-50%, -50%) scale(1.08);
}

/* A plus whose upright bar turns flat: a minus while the rows are open. */
.pm-directory__toggle span {
  position: absolute;
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pm-directory.is-folded .pm-directory__toggle span + span {
  transform: rotate(90deg);
}

@media (max-width: 1280px) {
  .pm-directory {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .pm-directory {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 7vw;
  }
}

/* ── Intro & statistics ───────────────────────────────────────── */

.pm-intro-stats {
  width: var(--pm-container);
  margin: 0 auto;
  padding: 105px 0 80px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: end;
  gap: 55px;
}

.pm-intro-stats .pm-intro-stats__heading {
  max-width: 690px;
  margin: 15px 0 30px;
  font-family: var(--pm-font-display);
  font-size: clamp(45px, 4vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.pm-intro-stats__text {
  max-width: 595px;
  font-size: 18px;
  line-height: 1.6;
}

.pm-intro-stats__panel {
  display: grid;
  grid-template-columns: repeat(var(--pm-columns, 2), minmax(0, 1fr));
  align-items: end;
}

.pm-intro-stats .pm-intro-stats__panel-heading {
  grid-column: 1 / -1;
  margin: 0 0 8px 40px;
  font-size: 26px;
  line-height: 1.3;
}

.pm-stat {
  min-height: 145px;
  padding-left: 40px;
  border-left: 1px solid #d3ddda;
}

.pm-stat strong {
  display: block;
  color: var(--pm-green);
  font-family: var(--pm-font-display);
  font-size: clamp(42px, 3.1vw, 60px);
  font-weight: 400;
  line-height: 1.3;
}

.pm-stat span {
  display: block;
  max-width: 220px;
  color: var(--pm-ink);
  font-size: 18px;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .pm-intro-stats {
    width: 86vw;
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 620px) {
  .pm-intro-stats {
    width: var(--pm-container);
    gap: 35px;
    padding: 72px 0 56px;
  }

  .pm-intro-stats .pm-intro-stats__heading {
    font-size: 42px;
  }

  .pm-intro-stats .pm-intro-stats__panel-heading {
    margin-left: 25px;
  }

  .pm-stat {
    padding-left: 25px;
  }
}

/* ── Spotlight articles ───────────────────────────────────────── */

.pm-spotlight {
  width: var(--pm-container);
  margin: 0 auto 70px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 50px;
}

.pm-spotlight__card {
  position: relative;
  min-height: 640px;
  overflow: hidden;
  border-radius: var(--pm-radius);
}

.pm-spotlight__card.is-cream {
  display: flex;
  flex-direction: column;
  padding: 46px 50px 28px;
  background: var(--pm-cream);
}

.pm-spotlight .pm-spotlight__title {
  margin: 12px 0 25px;
  font-size: clamp(30px, 2.1vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.pm-spotlight__summary {
  font-size: 16px;
  line-height: 1.6;
}

.is-cream .pm-spotlight__media {
  display: block;
  width: min(295px, 74%);
  aspect-ratio: 1;
  margin: auto auto 0;
  border-radius: 50%;
  overflow: hidden;
}

.pm-spotlight .is-cream .pm-spotlight__image {
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 50%;
  object-fit: cover;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* The whole card is the link: hovering anywhere lights the title and slowly
   enlarges the picture inside its circle. */
.pm-spotlight .pm-spotlight__title .pm-article-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.is-cream:hover .pm-spotlight__image,
.is-cream:focus-within .pm-spotlight__image {
  transform: scale(1.07);
}

.pm-spotlight__card.is-cream:hover .pm-spotlight__title .pm-article-link {
  color: var(--pm-green);
  text-decoration-color: currentColor;
}

/* A title runs to three lines at most; the picture stays pinned to the foot
   of the card, so the cards of a row line up whatever their titles. */
.pm-spotlight .pm-spotlight__title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.is-photo .pm-spotlight__media {
  position: absolute;
  inset: 0;
}

.pm-spotlight .is-photo .pm-spotlight__image {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.is-photo:hover .pm-spotlight__image {
  transform: scale(1.04);
}

.pm-spotlight__card.is-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(6 39 33 / 10%) 35%, rgb(6 39 33 / 92%) 100%);
  pointer-events: none;
}

.is-photo .pm-spotlight__copy {
  position: absolute;
  right: 45px;
  bottom: 55px;
  left: 50px;
  z-index: 1;
}

.pm-spotlight .is-photo .pm-spotlight__title {
  margin-bottom: 0;
  color: #fff;
  font-size: 40px;
}

.is-photo .pm-spotlight__title .pm-article-link:hover,
.is-photo .pm-spotlight__title .pm-article-link:focus-visible {
  color: #fff;
}

.is-photo .pm-spotlight__summary {
  margin-top: 18px;
  color: rgb(255 255 255 / 85%);
}

@media (max-width: 900px) {
  .pm-spotlight {
    width: 86vw;
    grid-template-columns: minmax(0, 1fr);
  }

  .pm-spotlight__card.is-photo {
    order: -1;
    min-height: 520px;
  }

  .pm-spotlight__card.is-cream {
    min-height: 350px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(170px, 260px);
    gap: 28px;
    align-items: center;
    padding: 38px 42px;
  }

  .is-cream .pm-spotlight__media {
    width: 100%;
    max-width: 240px;
    margin: 0;
    justify-self: end;
  }
}

@media (max-width: 620px) {
  .pm-spotlight {
    width: var(--pm-container);
  }

  .pm-spotlight__card.is-photo {
    min-height: 480px;
  }

  .is-photo .pm-spotlight__copy {
    right: 26px;
    bottom: 34px;
    left: 26px;
  }

  .pm-spotlight__card.is-cream {
    min-height: 310px;
    grid-template-columns: minmax(0, 1fr) 125px;
    gap: 18px;
    padding: 30px 24px;
  }

  .is-cream .pm-spotlight__media {
    width: 125px;
  }

  .pm-spotlight .pm-spotlight__title,
  .pm-spotlight .is-photo .pm-spotlight__title {
    font-size: 29px;
  }
}

/* ── Popular topics ───────────────────────────────────────────── */

.pm-topics {
  padding: 55px 0 50px;
}

.pm-topics__grid {
  width: var(--pm-container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(var(--pm-columns, 4), minmax(0, 1fr));
}

.pm-card.pm-topics__item {
  min-height: 190px;
  padding: 35px;
  border-right: 1px solid var(--pm-line);
}

.pm-card.pm-topics__item:last-child {
  border-right: 0;
}

.pm-card.pm-topics__item .pm-card__title {
  margin: 10px 0 0;
  font-size: 26px;
  line-height: 1.3;
  letter-spacing: 0;
}

@media (max-width: 900px) {
  .pm-topics__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pm-card.pm-topics__item:nth-child(2n) {
    border-right: 0;
  }
}

@media (max-width: 620px) {
  .pm-topics__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pm-card.pm-topics__item,
  .pm-card.pm-topics__item:nth-child(2n) {
    min-height: 0;
    padding: 28px 0;
    border-right: 0;
    border-bottom: 1px solid var(--pm-line);
  }

  .pm-card.pm-topics__item:last-child {
    border-bottom: 0;
  }
}

/* ── Large banners: shared frame ──────────────────────────────── */

/* The picture fills the banner; a white fade on its left keeps the dark text
   readable. Each banner sets its own fade in --pm-banner-fade. */
.pm-banner-frame {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--pm-cream);
}

.pm-banner-frame__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
}

.pm-banner-frame .pm-banner-frame__bg img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.pm-banner-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pm-banner-fade, linear-gradient(90deg, #fff 12%, rgb(255 255 255 / 80%) 35%, transparent 63%));
  pointer-events: none;
}

/* Phones: the phone picture under a light fade, or — without one, or when
   chosen — a dark tint under light text. */
@media (max-width: 767px) {
  .pm-banner-frame.is-mobile-light::before {
    background: linear-gradient(180deg, rgb(255 255 255 / 94%) 0%, rgb(255 255 255 / 80%) 45%, rgb(255 255 255 / 25%) 100%);
  }

  .pm-banner-frame.is-mobile-dark::before {
    background: linear-gradient(180deg, rgb(6 39 33 / 82%) 0%, rgb(6 39 33 / 70%) 100%);
  }

  .pm-banner-frame.is-mobile-dark {
    --pm-banner-heading: #fff;
    --pm-banner-text: rgb(255 255 255 / 88%);
    color: #fff;
  }

  .pm-banner-frame.is-mobile-dark .pm-eyebrow {
    color: #e2c28f;
  }
}

/* ── Quote banner ─────────────────────────────────────────────── */

.pm-quote-banner {
  --pm-banner-fade: linear-gradient(90deg, rgb(255 255 255 / 92%) 24%, transparent 70%);
  min-height: 745px;
}

.pm-quote-banner__copy {
  width: min(800px, 82vw);
  padding: 115px 0 75px var(--pm-gutter);
}

.pm-quote-banner .pm-quote-banner__mark {
  display: block;
  width: 66px;
  height: 55px;
  color: var(--pm-green);
}

.pm-quote-banner__slides {
  display: grid;
}

.pm-quote-banner__slide {
  grid-area: 1 / 1;
  min-height: 310px;
  margin: 0;
  visibility: hidden;
}

.pm-quote-banner__slide.is-active {
  visibility: visible;
  animation: pm-fade-up 650ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.pm-quote-banner .pm-quote-banner__quote {
  margin: 45px 0 25px;
  color: var(--pm-ink);
  font-family: var(--pm-font-quote);
  font-size: clamp(37px, 3vw, 50px);
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.pm-quote-banner__quote p {
  margin: 0;
}

.pm-quote-banner .pm-quote-banner__source {
  display: block;
  margin-bottom: 60px;
  color: var(--pm-green);
  font-family: var(--pm-font-quote);
  font-size: 24px;
  font-style: italic;
}

/* The slide timeline sits between the saying and the button. */
.pm-quote-banner__slides:has(+ .pm-quote-banner__nav) .pm-quote-banner__source {
  margin-bottom: 36px;
}

.pm-quote-banner__nav {
  margin-bottom: 44px;
}

/* On a phone's dark tint the timeline turns light. */
@media (max-width: 767px) {
  .pm-quote-banner.is-mobile-dark .pm-slider-nav {
    --pm-nav-ink: #fff;
    --pm-nav-track: rgb(255 255 255 / 25%);
    --pm-nav-fill: #fff;
    --pm-nav-past: #e2c28f;
  }
}

@media (max-width: 767px) {
  .pm-quote-banner.is-mobile-dark .pm-quote-banner__mark {
    color: var(--pm-cream);
  }

  .pm-quote-banner.is-mobile-dark .pm-quote-banner__quote {
    color: #fff;
  }

  .pm-quote-banner.is-mobile-dark .pm-quote-banner__source {
    color: #e2c28f;
  }
}

@media (max-width: 620px) {
  .pm-quote-banner__copy {
    width: 92vw;
    padding: 80px 7vw 60px;
  }

  .pm-quote-banner__slide {
    min-height: 0;
  }

  .pm-quote-banner .pm-quote-banner__quote {
    font-size: 32px;
  }

  .pm-quote-banner .pm-quote-banner__source {
    margin-bottom: 40px;
    font-size: 20px;
  }
}

/* ── Voices ───────────────────────────────────────────────────── */

.pm-voices {
  display: grid;
  grid-template-columns: 0.86fr repeat(var(--pm-columns, 2), 1.2fr);
}

.pm-voices > * {
  min-height: 377px;
  margin: 0;
  padding: 70px clamp(35px, 4.5vw, 95px);
}

.pm-voices__title {
  background: var(--pm-green);
}

.pm-voices .pm-voices__title h2 {
  color: #fff;
  font-size: 40px;
  line-height: 1.2;
}

.pm-voices__quote {
  background: var(--pm-ink);
  color: #fff;
  font-size: 16px;
  line-height: 1.8;
}

.pm-voices__quote:nth-of-type(even) {
  background: var(--pm-cream);
  color: var(--pm-body);
}

.pm-voices__quote blockquote,
.pm-voices__quote p {
  margin: 0;
}

.pm-voices figcaption {
  margin-top: 32px;
}

.pm-voices figcaption strong,
.pm-voices figcaption span {
  display: block;
}

.pm-voices figcaption strong {
  color: var(--pm-green);
}

.pm-voices__quote:nth-of-type(odd) figcaption strong {
  color: #3fb8a3;
}

@media (max-width: 1280px) {
  .pm-voices {
    grid-template-columns: 0.8fr repeat(var(--pm-columns, 2), 1fr);
  }
}

@media (max-width: 900px) {
  .pm-voices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: var(--pm-ink);
  }

  .pm-voices__title {
    grid-column: 1 / -1;
    min-height: 0;
  }
}

@media (max-width: 620px) {
  .pm-voices {
    grid-template-columns: minmax(0, 1fr);
  }

  .pm-voices > * {
    min-height: 0;
    padding: 50px 7vw;
  }

  .pm-voices .pm-voices__title h2 {
    font-size: 34px;
  }
}

/* ── Featured articles ────────────────────────────────────────── */

.pm-featured__grid {
  display: grid;
  grid-template-columns: 1.12fr 1fr 1fr;
  gap: 65px;
}

.pm-featured__grid.has-no-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* The list beside the large cards stretches to their height and shares it out
   evenly, so its last rule lines up with the foot of the cards' pictures. */
.pm-featured__list,
.pm-new-articles__list {
  display: grid;
  grid-auto-rows: 1fr;
}

.pm-featured__list .pm-story,
.pm-new-articles__list .pm-story {
  align-items: center;
  padding: 18px 0;
}

/* 28px at the design's full width, smaller on a laptop, so most titles fit
   their two lines whole. */
.pm-featured__list .pm-story .pm-story__title,
.pm-new-articles__list .pm-story .pm-story__title {
  font-size: clamp(22px, 1.46vw, 28px);
}

@media (max-width: 900px) {
  .pm-featured__grid,
  .pm-featured__grid.has-no-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .pm-featured__list {
    order: 2;
  }
}

@media (max-width: 620px) {
  .pm-section {
    padding: 64px 0 56px;
  }

  .pm-story {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 18px;
  }

  .pm-story .pm-story__image {
    width: 96px;
    height: 96px;
  }

  .pm-story .pm-story__title {
    font-size: 23px;
  }
}

/* ── Large banner ─────────────────────────────────────────────── */

.pm-banner {
  min-height: 735px;
  display: flex;
}

.pm-banner__inner {
  width: 100%;
  padding: 125px var(--pm-gutter) 70px;
}

.pm-banner .pm-banner__copy {
  max-width: min(800px, 80vw);
}

.pm-banner .pm-banner__heading {
  margin-bottom: 38px;
  color: var(--pm-banner-heading, var(--pm-ink));
  font-size: clamp(54px, 5vw, 80px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.pm-banner__eyebrow + .pm-banner__heading {
  margin-top: 30px;
}

.pm-banner .pm-banner__text {
  max-width: 680px;
  margin-bottom: 38px;
  color: var(--pm-banner-text, var(--pm-body));
  font-size: 20px;
  line-height: 1.8;
}

/* Heading on the left, text on the right ("Ghadir Khumm"). */
.pm-banner--split {
  --pm-banner-fade: linear-gradient(130deg, #fff 12%, rgb(255 255 255 / 80%) 33%, transparent 55%);
}

/* The label has a row of its own, so the text on the right starts level with
   the top of the heading rather than with the label. */
.pm-banner--split .pm-banner__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.75fr);
  grid-template-areas:
    "eyebrow ."
    "heading text"
    "button  .";
  column-gap: 60px;
  align-items: start;
  /* The banner is taller than its words; keep the rows together at the top. */
  align-content: start;
  padding-block: 105px;
}

.pm-banner--split .pm-banner__copy {
  display: contents;
}

.pm-banner--split .pm-banner__eyebrow {
  grid-area: eyebrow;
  margin-bottom: 35px;
}

.pm-banner--split .pm-banner__heading,
.pm-banner--split .pm-banner__eyebrow + .pm-banner__heading {
  grid-area: heading;
  max-width: 720px;
  margin: 0 0 55px;
}

.pm-banner--split .pm-banner__button {
  grid-area: button;
  justify-self: start;
}

.pm-banner .pm-banner__aside {
  grid-area: text;
  justify-self: end;
  max-width: 525px;
  /* Brings the first line's capitals level with the heading's, whose larger
     type sits lower in its line. */
  margin: 0.35em 0 0;
  text-align: right;
}

/* On a narrow screen the text moves under the heading, above the button. */
@media (max-width: 900px) {
  .pm-banner--split .pm-banner__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .pm-banner--split .pm-banner__copy {
    display: contents;
  }

  .pm-banner--split .pm-banner__eyebrow { order: -3; }
  .pm-banner--split .pm-banner__heading { order: -2; }
  .pm-banner--split .pm-banner__aside { order: -1; }
  .pm-banner--split .pm-banner__button { order: 0; }

  .pm-banner--split .pm-banner__eyebrow + .pm-banner__heading,
  .pm-banner--split .pm-banner__heading {
    margin-bottom: 32px;
  }

  .pm-banner .pm-banner__aside {
    justify-self: auto;
    margin-bottom: 38px;
    text-align: left;
  }
}

@media (max-width: 620px) {
  .pm-banner__inner,
  .pm-banner--split .pm-banner__inner {
    padding: 90px 7vw 60px;
  }

  .pm-banner .pm-banner__heading {
    font-size: 46px;
  }

  .pm-banner .pm-banner__text {
    font-size: 18px;
  }
}

/* ── Verse strip ──────────────────────────────────────────────── */

.pm-verse-strip {
  min-height: 91px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 22px var(--pm-gutter);
  background: var(--pm-ink);
  color: #fff;
  font-size: 18px;
}

.pm-verse-strip__translation {
  font-family: var(--pm-font-quote);
  font-style: italic;
}

.pm-verse-strip__translation a {
  color: inherit;
}

/* Amiri Quran sets its vowel marks high above and below the letters, so it
   needs a taller line than Latin text. */
.pm-verse-strip .pm-verse-strip__arabic {
  flex: none;
  max-width: 50%;
  font-family: var(--pm-font-arabic);
  font-size: 34px;
  line-height: 2;
  text-align: right;
}

@media (max-width: 900px) {
  .pm-verse-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .pm-verse-strip .pm-verse-strip__arabic {
    order: -1;
    max-width: none;
    align-self: stretch;
  }
}

@media (max-width: 620px) {
  .pm-verse-strip {
    padding-inline: 7vw;
    font-size: 16px;
  }

  .pm-verse-strip .pm-verse-strip__arabic {
    font-size: 26px;
  }
}

/* ── New articles ─────────────────────────────────────────────── */

.pm-new-articles__layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 70px;
}

.pm-new-articles__layout.has-no-list,
.pm-new-articles__layout.has-no-cards {
  grid-template-columns: minmax(0, 1fr);
}

.pm-new-articles__cards {
  display: grid;
  grid-template-columns: repeat(var(--pm-columns, 2), minmax(0, 1fr));
  gap: 45px;
}

@media (max-width: 900px) {
  .pm-new-articles__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 35px;
  }

  .pm-new-articles__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .pm-new-articles__cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Article showcase ("His Family") ──────────────────────────── */

.pm-showcase__cards {
  display: grid;
  grid-template-columns: repeat(var(--pm-columns, 3), minmax(0, 1fr));
  gap: 50px;
}

.pm-showcase__cards .pm-card .pm-card__image {
  height: 308px;
}

.pm-showcase__related {
  display: grid;
  grid-template-columns: repeat(var(--pm-columns, 4), minmax(0, 1fr));
  margin-top: 70px;
  border-block: 1px solid var(--pm-line);
}

.pm-showcase__related .pm-story {
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 18px;
  padding: 32px 26px;
  border-bottom: 0;
  border-right: 1px solid var(--pm-line);
}

.pm-showcase__related .pm-story .pm-story__image {
  width: 96px;
  height: 96px;
}

.pm-showcase__related .pm-story:first-child {
  padding-left: 0;
}

.pm-showcase__related .pm-story:last-child {
  border-right: 0;
}

.pm-showcase__related .pm-story .pm-story__title {
  font-size: 22px;
  line-height: 1.3;
}

@media (min-width: 1700px) {
  .pm-showcase__related .pm-story {
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 24px;
    padding: 35px;
  }

  .pm-showcase__related .pm-story .pm-story__image {
    width: 120px;
    height: 120px;
  }

  .pm-showcase__related .pm-story .pm-story__title {
    font-size: 24px;
  }
}

@media (max-width: 1699px) {
  .pm-showcase__related .pm-story:nth-child(odd) {
    padding-left: 0;
  }
}

@media (max-width: 1699px) {
  .pm-showcase__related {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pm-showcase__related .pm-story:nth-child(2n) {
    border-right: 0;
  }

  .pm-showcase__related .pm-story:nth-child(n + 3) {
    border-top: 1px solid var(--pm-line);
  }
}

@media (max-width: 900px) {
  .pm-showcase__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pm-showcase__cards .pm-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .pm-showcase__related {
    grid-template-columns: minmax(0, 1fr);
  }

  .pm-showcase__related .pm-story,
  .pm-showcase__related .pm-story:nth-child(2n) {
    border-right: 0;
    border-top: 0;
    border-bottom: 1px solid var(--pm-line);
  }

  .pm-showcase__related .pm-story:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 620px) {
  .pm-showcase__cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .pm-showcase__related .pm-story {
    padding-inline: 0;
  }
}

/* ── Life journey ─────────────────────────────────────────────── */

.pm-journey__wrap {
  position: relative;
}

/* The thread through the circles; it stays put while the circles drift. */
.pm-journey__wrap::before {
  content: "";
  position: absolute;
  top: 74px;
  right: 62px;
  left: 62px;
  height: 1px;
  background: #eadcc5;
}

.pm-journey__track {
  position: relative;
  display: flex;
  gap: 56px;
  overflow-x: auto;
  padding: 14px 0 25px;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.pm-journey__track::-webkit-scrollbar {
  display: none;
}

.pm-journey__item {
  position: relative;
  z-index: 1;
  flex: 0 0 140px;
  text-align: center;
}

.pm-journey__media {
  display: block;
  width: 120px;
  height: 120px;
  margin: 0 auto 15px;
  padding: 10px;
  border-radius: 50%;
  background: var(--pm-cream);
  box-shadow: 0 0 0 0 var(--pm-green);
  transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1), background-color 450ms ease, box-shadow 450ms ease;
}

.pm-journey__item:hover .pm-journey__media,
.pm-journey__item:focus-within .pm-journey__media {
  background-color: var(--pm-green);
  box-shadow: 0 0 0 5px var(--pm-green);
  transform: scale(1.16);
}

.pm-journey .pm-journey__media img {
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 50%;
  object-fit: cover;
}

.pm-journey .pm-journey__title {
  font-size: 21px;
  line-height: 1.35;
  transition: color 450ms ease, transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pm-journey__item:hover .pm-journey__title,
.pm-journey__item:focus-within .pm-journey__title {
  color: var(--pm-green);
  transform: translateY(5px) scale(1.08);
}

.pm-journey__arrow {
  position: absolute;
  top: 52px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--pm-cream);
  border-radius: 50%;
  background: #fff;
  color: var(--pm-ink);
  box-shadow: 0 8px 24px rgb(31 80 61 / 12%);
  transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease;
}

.pm-journey__arrow:hover,
.pm-journey__arrow:focus-visible {
  border-color: var(--pm-green);
  background: var(--pm-green);
  color: #fff;
}

.pm-journey__arrow .pm-icon {
  width: 22px;
  height: 22px;
}

.pm-journey__arrow.is-prev {
  left: -22px;
}

.pm-journey__arrow.is-next {
  right: -22px;
}

@media (max-width: 620px) {
  .pm-journey__arrow.is-prev {
    left: -14px;
  }

  .pm-journey__arrow.is-next {
    right: -14px;
  }
}

/* ── Explore cards ────────────────────────────────────────────── */

.pm-explore {
  padding: 35px 0 70px;
}

.pm-explore--fade {
  background: linear-gradient(180deg, rgb(244 241 222 / 0%), var(--pm-sand));
}

/* In the footer, straight under the sand link columns. */
.pm-explore--sand {
  padding-top: 0;
  padding-bottom: 72px;
  background: var(--pm-sand);
}

/* "✦ To Explore More ✦" between two fine gold lines that fade outwards, with
   room to breathe above the cards. */
.pm-explore .pm-simple-heading {
  margin-bottom: 66px;
  padding-inline: 16px;
}

.pm-explore .pm-simple-heading::before,
.pm-explore .pm-simple-heading::after {
  content: "";
  flex: 0 1 220px;
  min-width: 0;
  height: 1px;
  margin-inline: 14px;
}

/* The lines give way to the heading, never the other way round. */
.pm-explore .pm-simple-heading .pm-simple-heading__title {
  flex-shrink: 0;
  max-width: calc(100% - 74px);
}

.pm-explore .pm-simple-heading::before {
  background: linear-gradient(90deg, rgb(183 143 80 / 0%), rgb(183 143 80 / 45%));
}

.pm-explore .pm-simple-heading::after {
  background: linear-gradient(90deg, rgb(183 143 80 / 45%), rgb(183 143 80 / 0%));
}

@media (max-width: 620px) {
  .pm-explore .pm-simple-heading {
    margin-bottom: 54px;
  }

  .pm-explore .pm-simple-heading::before,
  .pm-explore .pm-simple-heading::after {
    margin-inline: 4px;
  }
}

/* A phone has no room left for the lines beside the heading. */
@media (max-width: 440px) {
  .pm-explore .pm-simple-heading::before,
  .pm-explore .pm-simple-heading::after {
    display: none;
  }
}

.pm-explore__grid {
  width: var(--pm-container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(var(--pm-columns, 4), minmax(0, 1fr));
  gap: 48px;
}

.pm-explore__card {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 20px;
  min-height: 233px;
  padding: 30px 35px;
  border-radius: var(--pm-radius);
  background: #fff;
  box-shadow: var(--pm-shadow);
}

.pm-explore .pm-explore__icon {
  width: 70px;
  height: 70px;
  max-width: none;
  object-fit: contain;
}

.pm-explore .pm-explore__title {
  margin: 15px 0 18px;
  font-size: 26px;
  line-height: 1.3;
}

.pm-explore__text {
  font-size: 16px;
  line-height: 1.6;
}

/* Below the design's full width the cards are too narrow for text beside the
   icon, so the text runs across the card under the icon and title. */
@media (max-width: 1699px) {
  .pm-explore__card {
    grid-template-areas: "icon title" "text text";
    align-items: center;
    row-gap: 16px;
  }

  .pm-explore__card > div {
    display: contents;
  }

  .pm-explore .pm-explore__icon { grid-area: icon; }
  .pm-explore .pm-explore__title { grid-area: title; margin: 0; font-size: clamp(21px, 1.45vw, 26px); }
  .pm-explore .pm-explore__text { grid-area: text; align-self: start; }
}

@media (max-width: 1280px) {
  .pm-explore__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .pm-explore__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .pm-explore__card {
    min-height: 0;
    padding: 26px 24px;
  }
}

/* ── Footer widgets inside Elementor containers ───────────────── */

/* The footer widgets lay themselves out with container queries. Inside an
   Elementor container that wraps its children (the default), a phone-width
   layout measures such a widget before it knows its width and leaves it
   hundreds of pixels taller than its content — blank space under the link
   columns and under the footer bar. A definite width avoids that. */
.e-con > .elementor-widget.elementor-widget-pm-prefooter,
.e-con > .elementor-widget.elementor-widget-pm-footer,
.e-con > .elementor-widget.elementor-widget-pm-construction,
.e-con > .elementor-widget.elementor-widget-pm-not-found {
  width: 100%;
}

/* ── Footer — Chapter Links ───────────────────────────────────── */

.pm-flinks,
.pm-footer {
  container-type: inline-size;
  padding-inline: var(--pm-gutter, 6.3vw);
}

.pm-flinks {
  padding-top: 64px;
  padding-bottom: 64px;
  border-top: 1px solid #e8dfc7;
  background-color: var(--pm-sand, #f4f1de);
}

/* Columns per row as the widget narrows; the counts come from the widget. */
.pm-flinks .pm-flinks__grid {
  max-width: 1676px;
  margin: 0 auto;
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(var(--pm-cols-sm, 2), minmax(0, 1fr));
}

@container (min-width: 600px)  { .pm-flinks .pm-flinks__grid { grid-template-columns: repeat(var(--pm-cols-md, 3), minmax(0, 1fr)); } }
@container (min-width: 900px)  { .pm-flinks .pm-flinks__grid { grid-template-columns: repeat(var(--pm-cols-lg, 4), minmax(0, 1fr)); } }
@container (min-width: 1100px) { .pm-flinks .pm-flinks__grid { grid-template-columns: repeat(var(--pm-cols-xl, 5), minmax(0, 1fr)); } }
@container (min-width: 1300px) { .pm-flinks .pm-flinks__grid { grid-template-columns: repeat(var(--pm-cols, 5), minmax(0, 1fr)); } }

.pm-flinks .pm-flinks__col {
  min-width: 0;
}

/* One row that slides: as many columns as fit (five on a wide screen, one on
   a phone with a little of the next one peeking in), snapping column by
   column, with an arrow at each side (pm-widgets.js shows them only when
   there is more to see, and only the one that has somewhere to go). */
.pm-flinks__viewport {
  position: relative;
  max-width: 1676px;
  margin: 0 auto;
}

.pm-flinks.pm-flinks--slider .pm-flinks__grid {
  --pm-per-view: 1.15;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--pm-per-view) - 1) * 40px) / var(--pm-per-view));
  grid-template-columns: none;
  gap: 40px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.pm-flinks--slider .pm-flinks__grid::-webkit-scrollbar {
  display: none;
}

@container (min-width: 520px)  { .pm-flinks.pm-flinks--slider .pm-flinks__grid { --pm-per-view: 2; grid-template-columns: none; } }
@container (min-width: 780px)  { .pm-flinks.pm-flinks--slider .pm-flinks__grid { --pm-per-view: 3; grid-template-columns: none; } }
@container (min-width: 1040px) { .pm-flinks.pm-flinks--slider .pm-flinks__grid { --pm-per-view: 4; grid-template-columns: none; } }
@container (min-width: 1300px) { .pm-flinks.pm-flinks--slider .pm-flinks__grid { --pm-per-view: 5; grid-template-columns: none; } }

.pm-flinks--slider .pm-flinks__col {
  scroll-snap-align: start;
}

/* Round white arrows in the middle of the side margins, like the life-journey
   ones; green on hover. Hidden until the script finds the row overflowing. */
.pm-flinks__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--pm-cream, #e8dfc7);
  border-radius: 50%;
  background: #fff;
  color: var(--pm-ink, #062721);
  box-shadow: 0 8px 24px rgb(31 80 61 / 12%);
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity 300ms ease, visibility 300ms ease, background-color 220ms ease, color 220ms ease, border-color 220ms ease;
}

.pm-flinks.has-overflow .pm-flinks__arrow {
  display: grid;
}

.pm-flinks__arrow:hover,
.pm-flinks__arrow:focus-visible {
  border-color: var(--pm-green, #018774);
  background: var(--pm-green, #018774);
  color: #fff;
}

.pm-flinks__arrow .pm-icon {
  width: 22px;
  height: 22px;
}

/* At the first or last column the arrow that has nowhere to go fades out. */
.pm-flinks__arrow:disabled {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.pm-flinks__arrow.is-prev {
  left: calc(var(--pm-gutter, 6.3vw) / -2 - 22px);
}

.pm-flinks__arrow.is-next {
  right: calc(var(--pm-gutter, 6.3vw) / -2 - 22px);
}

/* Where the side margins are too narrow for them, the arrows half-overlap the
   margin and the row steps in to make room. */
@media (max-width: 820px) {
  .pm-flinks.has-overflow .pm-flinks__grid {
    margin-inline: 30px;
  }

  .pm-flinks__arrow {
    width: 40px;
    height: 40px;
  }

  .pm-flinks__arrow .pm-icon {
    width: 20px;
    height: 20px;
  }

  .pm-flinks__arrow.is-prev {
    left: max(calc(var(--pm-gutter, 6.3vw) * -1 + 4px), -20px);
  }

  .pm-flinks__arrow.is-next {
    right: max(calc(var(--pm-gutter, 6.3vw) * -1 + 4px), -20px);
  }
}

.pm-flinks .pm-flinks__heading {
  display: block;
  margin: 0 0 18px;
  color: var(--pm-ink, #062721);
  font-family: var(--pm-font-display, "DM Serif Display", Georgia, serif);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  text-decoration: none;
  transition: color 0.2s;
}

.pm-flinks a.pm-flinks__heading:hover {
  color: var(--pm-green, #018774);
}

.pm-flinks .pm-flinks__list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pm-flinks .pm-flinks__item {
  display: flex;
  align-items: flex-start; /* the arrow stays on the first line when a title wraps */
  gap: 8px;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.45;
}

.pm-flinks .pm-flinks__item::before,
.pm-flinks .pm-flinks__item::marker {
  content: none;
}

.pm-flinks .pm-flinks__icon {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-top: calc((1.45em - 7px) / 2);
  color: var(--pm-gold, #b78f50);
  opacity: 0.7;
  transition: opacity 0.2s;
}

.pm-flinks .pm-flinks__item:hover .pm-flinks__icon {
  opacity: 1;
}

.pm-flinks .pm-flinks__link {
  min-width: 0;
  color: #3b4c49;
  font-family: var(--pm-font-body, "Open Sans", Arial, sans-serif);
  font-size: 14px;
  line-height: 1.45;
  text-decoration: none;
  overflow-wrap: break-word;
  transition: color 0.2s;
}

.pm-flinks .pm-flinks__item:hover .pm-flinks__link {
  color: var(--pm-green, #018774);
}

.pm-flinks .pm-flinks__hint {
  margin: 0;
  color: #6b7c78;
  font-size: 12px;
  font-style: italic;
  line-height: 1.6;
}

/* ── Footer — Brand, Sites & Newsletter ───────────────────────── */

.pm-footer {
  padding-top: 64px;
  padding-bottom: 64px;
  background-color: var(--pm-ink, #062721);
  color: #fff;
}

/* Narrow: one column. Medium: brand | newsletter, sister sites across below.
   Wide: brand | sites | newsletter. */
.pm-footer .pm-footer__grid {
  max-width: 1676px;
  margin: 0 auto;
  display: grid;
  gap: 40px;
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr);
}

@container (min-width: 720px) and (max-width: 1023.98px) {
  .pm-footer .pm-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pm-footer .pm-footer__grid:has(.pm-footer__newsletter) .pm-footer__sites { grid-column: 1 / -1; grid-row: 2; }
  .pm-footer .pm-footer__sites { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (min-width: 1024px) {
  .pm-footer .pm-footer__grid { grid-template-columns: var(--pm-footer-cols, minmax(0, 1fr) 260px 360px); }
}

.pm-footer .pm-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.pm-footer .pm-footer__logo {
  display: inline-block;
  align-self: flex-start;
  line-height: 0;
}

.pm-footer .pm-footer__logo img {
  width: auto;
  height: 110px;
  max-width: none;
  border-radius: 0;
  object-fit: contain;
}

.pm-footer .pm-footer__wordmark {
  color: #fff;
  font-family: var(--pm-font-heading, "Gloock", Georgia, serif);
  font-size: 26px;
  line-height: 1.2;
}

.pm-footer .pm-footer__email {
  color: rgb(255 255 255 / 85%);
  font-family: var(--pm-font-heading, "Gloock", Georgia, serif);
  font-size: 28px;
  line-height: 1.1;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 0.2s;
}

@container (min-width: 480px) {
  .pm-footer .pm-footer__email { font-size: 32px; }
}

.pm-footer .pm-footer__email:hover {
  color: var(--pm-cream, #f5e8d3);
}

.pm-footer .pm-footer__social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.pm-footer .pm-footer__social-label {
  margin-right: 4px;
  color: var(--pm-gold, #b78f50);
  font-family: var(--pm-font-label, "Manrope", Arial, sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pm-footer .pm-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 50%;
  color: rgb(255 255 255 / 60%);
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

.pm-footer .pm-footer__social-link:hover {
  border-color: var(--pm-green, #018774);
  background-color: var(--pm-green, #018774);
  color: #fff;
}

.pm-footer .pm-footer__about {
  max-width: 480px;
  margin: 4px 0 0;
  color: rgb(255 255 255 / 45%);
  font-size: 13px;
  line-height: 1.65;
}

/* One column of cards on a phone; --pm-sites-cols (set by the widget) takes
   over once there is room, so four sites read as two rows of two. */
.pm-footer .pm-footer__sites {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-content: start;
}

@container (min-width: 480px) {
  .pm-footer .pm-footer__sites { grid-template-columns: repeat(var(--pm-sites-cols, 1), minmax(0, 1fr)); }
}

.pm-footer .pm-site-card {
  height: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-radius: 16px;
  background: #fff;
  text-decoration: none;
  transition: box-shadow 0.2s, transform 0.2s;
}

.pm-footer .pm-site-card:hover {
  box-shadow: 0 10px 30px rgb(0 0 0 / 22%);
  transform: translateY(-2px);
}

.pm-footer .pm-site-card__logo {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  max-width: none;
  border-radius: 0;
  object-fit: contain;
}

.pm-footer .pm-footer__grid[style*="--pm-sites-cols:2"] .pm-site-card { gap: 14px; padding: 18px; }
.pm-footer .pm-footer__grid[style*="--pm-sites-cols:2"] .pm-site-card__logo { width: 48px; height: 48px; }

.pm-footer .pm-site-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.pm-footer .pm-site-card__title {
  color: var(--pm-ink, #062721);
  font-family: var(--pm-font-heading, "Gloock", Georgia, serif);
  font-size: 18px;
  line-height: 1.25;
}

.pm-footer .pm-site-card__text {
  color: #4b5b58;
  font-size: 12.5px;
  line-height: 1.55;
}

.pm-footer .pm-footer__newsletter {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 30px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: var(--pm-radius, 24px);
  background: rgb(255 255 255 / 5%);
}

.pm-footer .pm-footer__nl-title {
  margin: 0 0 6px;
  color: #fff;
  font-family: var(--pm-font-heading, "Gloock", Georgia, serif);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
}

.pm-footer .pm-footer__nl-text {
  margin: 0;
  color: rgb(255 255 255 / 60%);
  font-size: 14px;
  line-height: 1.65;
}

.pm-footer .pm-footer__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

.pm-footer .pm-footer__input {
  width: 100%;
  padding: 13px 20px;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 999px;
  outline: none;
  background: rgb(255 255 255 / 8%);
  color: #fff;
  font-family: var(--pm-font-body, "Open Sans", Arial, sans-serif);
  font-size: 14px;
  transition: border-color 0.2s;
}

.pm-footer .pm-footer__input::placeholder {
  color: rgb(255 255 255 / 40%);
}

.pm-footer .pm-footer__input:focus {
  border-color: var(--pm-gold, #b78f50);
}

.pm-footer .pm-footer__button {
  width: 100%;
  padding: 13px;
  border: 0;
  border-radius: 999px;
  background: var(--pm-green, #018774);
  color: #fff;
  font-family: var(--pm-font-button, "Inter", Arial, sans-serif);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.pm-footer .pm-footer__button:hover {
  background: var(--pm-cream, #f5e8d3);
  color: var(--pm-ink, #062721);
}

.pm-footer .pm-footer__button:disabled {
  cursor: default;
  opacity: 0.7;
}

.pm-footer .pm-footer__fineprint {
  margin: 0;
  color: rgb(255 255 255 / 40%);
  font-size: 11px;
  line-height: 1.5;
}

.pm-footer .pm-footer__nl-status {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

.pm-footer .pm-footer__nl-status:empty { display: none; }
.pm-footer .pm-footer__nl-status.is-ok { color: #7fe3cf; }
.pm-footer .pm-footer__nl-status.is-error { color: #ffb4ab; }

/* ── Footer bar — logo in the middle ──────────────────────────── */

/* Phone: logo, then the details, then the newsletter, all centred.
   Tablet: logo across the top, details left, newsletter right.
   Wide: details | logo | newsletter. */
.pm-footer.pm-footer--centered .pm-footer__grid {
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  gap: 44px;
  text-align: center;
}

.pm-footer--centered .pm-footer__center {
  order: -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}

/* The line under the logo, set as a quotation in the footer's centre. */
.pm-footer .pm-footer__tagline {
  max-width: 340px;
  margin: 0;
  color: rgb(255 255 255 / 70%);
  font-family: var(--pm-font-quote, "Merriweather", Georgia, serif);
  font-size: 15px;
  font-style: italic;
  line-height: 1.75;
}

.pm-footer--classic .pm-footer__tagline {
  max-width: 480px;
}

.pm-footer.pm-footer--centered .pm-footer__logo {
  align-self: center;
}

.pm-footer.pm-footer--centered .pm-footer__logo img {
  height: 150px;
}

.pm-footer--centered .pm-footer__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  min-width: 0;
  max-width: 520px;
}

.pm-footer--centered .pm-footer__social {
  justify-content: center;
}

/* The email keeps to one line: it shrinks with the column it sits in
   (an address of about 27 characters is 16.5 times its font size wide). */
.pm-footer.pm-footer--centered .pm-footer__email {
  font-size: clamp(18px, 100cqi / 16.5, 24px);
}

.pm-footer--centered .pm-footer__about {
  margin: 0;
}

.pm-footer--centered .pm-footer__newsletter {
  width: 100%;
  max-width: 420px;
  text-align: left;
}

@container (min-width: 720px) and (max-width: 1099.98px) {
  .pm-footer.pm-footer--centered .pm-footer__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    justify-items: stretch;
    text-align: left;
  }

  .pm-footer--centered .pm-footer__center {
    grid-column: 1 / -1;
    justify-self: center;
  }

  .pm-footer--centered .pm-footer__info { align-items: flex-start; }
  .pm-footer--centered .pm-footer__social { justify-content: flex-start; }
  .pm-footer--centered .pm-footer__newsletter { justify-self: end; }
  .pm-footer.pm-footer--centered .pm-footer__email { font-size: clamp(18px, (50cqi - 22px) / 16.5, 24px); }
}

@container (min-width: 1100px) {
  .pm-footer.pm-footer--centered .pm-footer__grid {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    justify-items: stretch;
    text-align: left;
  }

  .pm-footer--centered .pm-footer__center {
    order: 0;
    justify-self: center;
  }

  .pm-footer--centered .pm-footer__info {
    align-items: flex-start;
    justify-self: start;
  }

  .pm-footer--centered .pm-footer__social { justify-content: flex-start; }
  .pm-footer--centered .pm-footer__newsletter { justify-self: end; }

  /* Each side column is half of what the logo column and gaps leave. */
  .pm-footer.pm-footer--centered .pm-footer__email { font-size: clamp(18px, (50cqi - 214px) / 16.5, 24px); }
}

/* Terms · Privacy · Sitemap, under the copyright note. */
.pm-footer .pm-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
  padding-top: 18px;
  border-top: 1px solid rgb(255 255 255 / 10%);
}

.pm-footer--centered .pm-footer__legal {
  align-self: stretch;
  justify-content: center;
}

@container (min-width: 720px) {
  .pm-footer--centered .pm-footer__legal { justify-content: flex-start; }
}

.pm-footer .pm-footer__legal a {
  position: relative;
  color: rgb(255 255 255 / 65%);
  font-size: 13px;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: color 0.2s;
}

.pm-footer .pm-footer__legal a:hover {
  color: #fff;
}

/* A small gold dot between the links. */
.pm-footer .pm-footer__legal > * + *::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -15px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--pm-gold, #b78f50);
  transform: translateY(-50%);
}

.pm-footer .pm-footer__legal-draft {
  position: relative;
  color: rgb(255 255 255 / 35%);
  font-size: 13px;
}

.pm-footer .pm-footer__legal-draft em {
  font-size: 11px;
}

/* Sister sites, when shown with this layout, in a row underneath. */
.pm-footer .pm-footer__sites--row {
  max-width: 1676px;
  margin: 48px auto 0;
  grid-template-columns: minmax(0, 1fr);
}

@container (min-width: 600px) {
  .pm-footer .pm-footer__sites--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (min-width: 1100px) {
  .pm-footer .pm-footer__sites--row { grid-template-columns: repeat(var(--pm-sites-cols, 4), minmax(0, 1fr)); }
}

/* A MailPoet form dropped into the footer, restyled for the dark bar. */
.pm-footer .pm-footer__mailpoet .mailpoet_form { padding: 0; background: none; }
.pm-footer .pm-footer__mailpoet .mailpoet_paragraph { margin-bottom: 12px; }
.pm-footer .pm-footer__mailpoet .mailpoet_paragraph:last-child { margin-bottom: 0; }
.pm-footer .pm-footer__mailpoet label,
.pm-footer .pm-footer__mailpoet p { color: rgb(255 255 255 / 60%); font-size: 13px; }
.pm-footer .pm-footer__mailpoet input[type="text"],
.pm-footer .pm-footer__mailpoet input[type="email"] {
  width: 100%;
  padding: 13px 20px;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 999px;
  background: rgb(255 255 255 / 8%);
  color: #fff;
  font-size: 14px;
}
.pm-footer .pm-footer__mailpoet input[type="submit"],
.pm-footer .pm-footer__mailpoet button[type="submit"] {
  width: 100%;
  padding: 13px;
  border: 0;
  border-radius: 999px;
  background: var(--pm-green, #018774);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}