/* ===== Testimonials Mohammed Ayoub / content rows (copy of the Elodie Content 1 CSS; used by 20-content-1 and 40-content-2) =====
   One DOM for every breakpoint (Elodie has separate desktop/phone and tablet variants; the tablet values are copied here). No links, no hover, press or click states on live. Every text box is a Framer appear:
   opacity 0 -> 1 at >= 50% visible, back to 0 below 50% (both edges, replays), 0.44s spring-like curve sampled
   on live (same curve as how-it-works). Charts are flat images (dark cards drawn in). */

.nf-ay-content-1 {
  --nf-ay-content-1-ease: linear(0, 0.017 4.1%, 0.078 8.2%, 0.154 11.8%, 0.245 15.7%, 0.34 19.5%, 0.432 23.2%, 0.513 27%, 0.592 30.9%, 0.658 34.3%, 0.72 38.4%, 0.773 42.3%, 0.819 45.9%, 0.854 49.8%, 0.886 53.6%, 0.912 57.3%, 0.932 61.4%, 0.948 65%, 0.962 68.9%, 0.972 72.5%, 0.98 76.4%, 0.986 80%, 0.991 83.9%, 0.994 87.7%, 0.997 91.6%, 0.999 95.5%, 1);
  display: block; flex: 0 0 auto; width: 100%; position: relative;
}

/* ---------- Text (shared by both variants) ---------- */
.nf-ay-content-1__title, .nf-ay-content-1__body {
  margin: 0; color: var(--nf-black); text-transform: none; text-decoration: none; letter-spacing: normal;
  white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;
}
.nf-ay-content-1__title {
  font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", sans-serif;
  font-size: 42px; font-weight: 500; line-height: 125%; text-align: start;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
}
.nf-ay-content-1__body {
  font-family: "SF Pro Display Regular", "SF Pro Display Regular Placeholder", sans-serif;
  font-size: 20px; font-weight: 400; text-align: left;
}
.nf-ay-content-1__body--15 { line-height: 150%; }
.nf-ay-content-1__body--16 { line-height: 1.6em; }
.nf-ay-content-1__body strong { font-weight: 700; }

/* ---------- Desktop (>= 1440, base) and phone variant ---------- */
.nf-ay-content-1__dp {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 75px;
  flex: 0 0 auto; width: 100%; height: min-content; padding: 80px 60px; position: relative; overflow: hidden;
}
.nf-ay-content-1__row {
  display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start;
  flex: 0 0 auto; width: 100%; height: min-content; padding: 0; position: relative; overflow: clip;
}
.nf-ay-content-1__title-box, .nf-ay-content-1__body-box, .nf-ay-content-1__col-title-box,
.nf-ay-content-1__col-body-box {
  flex: 0 0 auto; max-width: 100%; height: auto; position: relative;
}
.nf-ay-content-1__title-box { width: 366px; }
.nf-ay-content-1__body-box { width: 800px; }
.nf-ay-content-1__col {
  display: flex; flex-direction: column; justify-content: flex-start; align-content: center; align-items: center; gap: 42px;
  flex: 0 0 auto; align-self: stretch; width: 425px; max-width: 100%; height: auto; padding: 0; position: relative; overflow: clip;
}
.nf-ay-content-1__col-title-box { width: 100%; }
.nf-ay-content-1__col-body-box { width: 425px; }
.nf-ay-content-1__charts {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px;
  flex: 0 0 auto; width: 800px; height: min-content; padding: 0; position: relative; overflow: clip;
}


/* Body + photo or chart under it (right column) */
.nf-ay-content-1__stack {
  display: flex; flex-direction: column; gap: 32px; flex: 0 0 auto; width: 800px; max-width: 100%; position: relative;
}
.nf-ay-content-1__stack > .nf-ay-content-1__body-box { width: 100%; }
/* Photos and charts: the chart PNGs carry the dark card with black corners, so the wrapper rounds them off */
.nf-ay-content-1__media {
  display: block; flex: 0 0 auto; width: 100%; height: auto; border-radius: 16px; overflow: hidden; position: relative;
}
.nf-ay-content-1__media img { display: block; width: 100%; height: auto; }
.nf-ay-content-1__media--photo { aspect-ratio: 1419 / 757; }
.nf-ay-content-1__media--photo img { height: 100%; object-fit: cover; }
/* "Bakhoor is part of his home. / So is clean air.": line break on desktop only */
.nf-ay-content-1__sep--rest { display: none; }

/* ---------- Tablet (810 to 1439.98): one column, as the Elodie tablet variant ---------- */
@media (min-width: 810px) and (max-width: 1439.98px) {
  .nf-ay-content-1__dp { gap: 48px; padding: 60px 40px; }
  .nf-ay-content-1__row { flex-direction: column; justify-content: flex-start; gap: 32px; }
  .nf-ay-content-1__title-box, .nf-ay-content-1__body-box, .nf-ay-content-1__col-body-box,
  .nf-ay-content-1__stack, .nf-ay-content-1__charts { width: 100%; }
  .nf-ay-content-1__body--15 { line-height: 1.6em; }
  .nf-ay-content-1__col { align-content: flex-start; align-items: flex-start; align-self: auto; gap: 32px; width: 100%; height: min-content; }
  .nf-ay-content-1__sep--desk { display: none; }
  .nf-ay-content-1__sep--rest { display: inline; }
}

/* ---------- Phone (<= 809.98) ---------- */
@media (max-width: 809.98px) {
  .nf-ay-content-1__dp { gap: 32px; padding: 32px 16px; }
  .nf-ay-content-1__row { flex-direction: column; justify-content: flex-start; gap: 16px; }
  .nf-ay-content-1__title-box, .nf-ay-content-1__body-box, .nf-ay-content-1__col-body-box { width: 100%; }
  .nf-ay-content-1__title { font-size: 29px; }
  .nf-ay-content-1__body--15, .nf-ay-content-1__body--16 { line-height: 140%; }
  /* Live nests the charts inside the left column (gap 16px); here they follow it in the same column with the same gap */
  .nf-ay-content-1__row--data { gap: 16px; }
  .nf-ay-content-1__col { align-content: flex-start; align-items: flex-start; align-self: auto; gap: 16px; width: 100%; max-width: 101%; height: min-content; }
  .nf-ay-content-1__charts, .nf-ay-content-1__stack { width: 100%; }
  .nf-ay-content-1__stack { gap: 16px; }
  .nf-ay-content-1__sep--desk { display: none; }
  .nf-ay-content-1__sep--rest { display: inline; }
}

/* ---------- Scroll appear (JS adds .is-js on the root, then toggles .is-in per box) ---------- */
.nf-ay-content-1 [data-ay-content-1-reveal] { will-change: transform; }
.nf-ay-content-1.is-js [data-ay-content-1-reveal] { opacity: 0; transition: opacity 0.44s var(--nf-ay-content-1-ease); }
.nf-ay-content-1.is-js [data-ay-content-1-reveal].is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .nf-ay-content-1.is-js [data-ay-content-1-reveal] { opacity: 1; transition: none; }
}