/* ===== Testimonials Rene / Content 1 (live nafas.com/id-en/testimonials-rene-suhardono, frame "Content 1") =====
   One DOM for the three Framer variants (desktop >= 1440 two columns, tablet 810 to 1439.98 one column, phone one column).
   No links, 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 viewport edges, replays), 0.44s spring-like curve sampled on live. Charts are flat PNGs.
   Framer re-evaluates line-height and letter-spacing per inline element (CSS vars): the same %/em value is set on the
   text element and every descendant here, which rounds to the same layout units as live. */

.nf-rs-content-1 {
  --nf-rs-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: 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;
}

/* Inter Medium Italic (latin), the face live loads for the phone quotes (same file, same unicode-range) */
@font-face {
  font-family: "Inter"; src: url("../../../assets/fonts/inter-500-italic-latin.woff2") format("woff2"); font-display: swap;
  font-style: italic; font-weight: 500;
  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Text ---------- */
.nf-rs-content-1__title, .nf-rs-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-rs-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-rs-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-rs-content-1__body--15, .nf-rs-content-1__body--15 * { line-height: 150%; }
.nf-rs-content-1__body--16, .nf-rs-content-1__body--16 * { line-height: 1.6em; }
.nf-rs-content-1__body strong { font-weight: 700; }
/* Quotes. Live declares the Semibold Italic face at weight 600, base.css at 400: block the synthetic bold Chrome would
   add on top. The oblique synthesis from <em> stays, as on live. */
.nf-rs-content-1__q {
  font-family: "SF Pro Display Semibold Italic", "SF Pro Display Semibold Italic Placeholder", sans-serif;
  font-size: 24px; font-weight: 600; font-synthesis-weight: none;
}
.nf-rs-content-1__q em { font-style: italic; }
/* Per-variant wrapper spans: only sized at their breakpoint (see below), otherwise they inherit and change nothing */
.nf-rs-content-1__qbr, .nf-rs-content-1__ps { font-size: inherit; }

/* ---------- Desktop (>= 1440, base) ---------- */
.nf-rs-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-rs-content-1__title-box, .nf-rs-content-1__body-box {
  display: flex; flex-direction: column; justify-content: flex-start;
  flex: 0 0 auto; max-width: 100%; height: auto; position: relative;
}
.nf-rs-content-1__title-box { width: 366px; }
.nf-rs-content-1__body-box--wide { width: 800px; }
.nf-rs-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-rs-content-1__title-box--col { width: 100%; }
.nf-rs-content-1__body-box--col { width: 425px; }
.nf-rs-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;
}
.nf-rs-content-1__chart { flex: 0 0 auto; width: 100%; height: auto; position: relative; overflow: visible; }
.nf-rs-content-1__chart--score { aspect-ratio: 1.55382 / 1; }
.nf-rs-content-1__chart--outdoor { aspect-ratio: 1.89619 / 1; }
.nf-rs-content-1__chart img {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; width: 100%; height: 100%;
  object-position: center;
}
.nf-rs-content-1__chart--score img { object-fit: contain; }
.nf-rs-content-1__chart--outdoor img { object-fit: cover; }

/* ---------- Tablet (810 to 1439.98): one column, all bodies 1.6em, 24px line after each quote in block 3 ---------- */
@media (min-width: 810px) and (max-width: 1439.98px) {
  .nf-rs-content-1 { gap: 48px; padding: 60px 40px; }
  .nf-rs-content-1__row { flex-direction: column; justify-content: flex-start; gap: 32px; }
  .nf-rs-content-1__col { display: contents; }
  .nf-rs-content-1__title-box, .nf-rs-content-1__body-box--wide, .nf-rs-content-1__body-box--col,
  .nf-rs-content-1__charts { width: 100%; }
  .nf-rs-content-1__body--15, .nf-rs-content-1__body--15 * { line-height: 1.6em; }
  .nf-rs-content-1__qbr { font-size: 24px; }
}

/* ---------- Phone (<= 809.98) ---------- */
@media (max-width: 809.98px) {
  .nf-rs-content-1 { gap: 32px; padding: 32px 16px; }
  .nf-rs-content-1__row { flex-direction: column; justify-content: flex-start; gap: 16px; }
  .nf-rs-content-1__col { display: contents; }
  .nf-rs-content-1__title-box, .nf-rs-content-1__body-box--wide, .nf-rs-content-1__body-box--col,
  .nf-rs-content-1__charts { width: 100%; }
  .nf-rs-content-1__title { font-size: 29px; }
  .nf-rs-content-1__body--15, .nf-rs-content-1__body--15 *,
  .nf-rs-content-1__body--16, .nf-rs-content-1__body--16 * { line-height: 140%; }
  .nf-rs-content-1__body, .nf-rs-content-1__body * { letter-spacing: 0.03em; }
  /* Block 2 on phone: the paragraph itself is 16px (empty lines 22.4px), its text runs 20px */
  .nf-rs-content-1__body--data { font-size: 16px; }
  .nf-rs-content-1__ps { font-size: 20px; }
  .nf-rs-content-1__q {
    font-family: "Inter", "Inter Placeholder", sans-serif; font-size: inherit; font-style: italic; font-weight: 500;
    font-synthesis-weight: auto;
  }
}

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