/* ===== Testimonials Antoine / Content 1 (live nafas.com/id-en/testimonials-antoine-de-carbonnel, frame "Content 1") =====
   Three Framer variants (desktop / tablet / phone markup, switched with the base visibility helpers).
   Text follows Framer's rich-text model: the text element sets size, line height (%), letter spacing (em) and family as
   custom properties, and every span re-computes them against its own font size (so a 20px span in an 18px / 150% box
   gets 30px lines while the box keeps an 18px / 27px strut, exactly as live).
   No links, hover, press or click states on live (photo and charts are plain images).
   Text boxes fade in once at >= 50% visible: opacity 0 -> 1 in 0.44s, curve sampled on live (js/20-content-1.js). */

/* Phone quote face: live loads Framer's Inter Medium Italic (latin subset) for the phone quotes */
@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; }

.nf-an-c1 {
  --nf-an-c1-ease: linear(0, 0.027 4%, 0.092 8%, 0.177 12%, 0.274 16%, 0.371 20%, 0.467 24%, 0.555 28%, 0.629 32%, 0.7 36%, 0.759 40%, 0.806 44%, 0.849 48%, 0.881 52%, 0.91 56%, 0.932 60%, 0.949 64%, 0.962 68%, 0.973 72%, 0.982 76%, 0.987 80%, 0.992 84%, 0.995 88%, 0.998 92%, 0.999 96%, 1);
  display: block; flex: 0 0 auto; width: 100%; position: relative;
}

/* ---------- Rich text (all variants) ---------- */
.nf-an-c1__rt {
  --c1-ff: "SF Pro Display Regular", "SF Pro Display Regular Placeholder", sans-serif;
  --c1-fs: 16px; --c1-fw: 400; --c1-fst: normal; --c1-lh: 1.2em; --c1-ls: 0; --c1-ot: initial;
  margin: 0; padding: 0; white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;
}
.nf-an-c1__rt, .nf-an-c1__rt span {
  font-family: var(--c1-ff); font-style: var(--c1-fst); font-weight: var(--c1-fw); font-size: var(--c1-fs);
  line-height: var(--c1-lh); letter-spacing: var(--c1-ls); font-feature-settings: var(--c1-ot);
  color: #000; text-transform: none; text-decoration: none;
}
.nf-an-c1__rt strong { font-weight: bolder; }
.nf-an-c1__rt em { font-style: italic; }
.nf-an-c1__f20 { --c1-fs: 20px; }
.nf-an-c1__f21 { --c1-fs: 21px; }
.nf-an-c1__f23 { --c1-fs: 23px; }
.nf-an-c1__f24 { --c1-fs: 24px; }
/* Quote runs. Live declares the Semibold Italic face at weight 600, base.css at 400: block the synthetic bold Chrome
   would add. The oblique from em stays synthetic, as on live (the face is declared upright on both). */
.nf-an-c1__q { --c1-ff: "SF Pro Display Semibold Italic", "SF Pro Display Semibold Italic Placeholder", sans-serif; --c1-fw: 600; font-synthesis-weight: none; }
.nf-an-c1__qi { --c1-ff: "Inter", "Inter Placeholder", sans-serif; --c1-fst: italic; --c1-fw: 500; }

.nf-an-c1__title {
  --c1-ff: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", sans-serif;
  --c1-fs: 42px; --c1-fw: 500; --c1-lh: 125%;
  --c1-ot: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
  text-align: start;
}
.nf-an-c1__title--p125 { --c1-fs: 29px; --c1-ls: -0.01em; --c1-lh: 125%; }
.nf-an-c1__title--p120 { --c1-fs: 29px; --c1-ls: -0.01em; --c1-lh: 120%; }
.nf-an-c1__body { text-align: left; }
.nf-an-c1__body--18 { --c1-fs: 18px; --c1-lh: 150%; }
.nf-an-c1__body--20 { --c1-fs: 20px; --c1-lh: 150%; }
.nf-an-c1__body--p15 { --c1-fs: 15px; --c1-lh: 140%; --c1-ls: 0.03em; }
.nf-an-c1__body--p20 { --c1-fs: 20px; --c1-lh: 140%; --c1-ls: 0.03em; }
.nf-an-c1__body--p16 { --c1-lh: 1.4em; }

/* Text boxes (Framer RichTextContainer) */
.nf-an-c1__box { flex: 0 0 auto; max-width: 100%; height: auto; position: relative; display: flex; flex-direction: column; justify-content: flex-start; }
.nf-an-c1__w333 { width: 333px; }
.nf-an-c1__w425 { width: 425px; }
.nf-an-c1__w800 { width: 800px; }
.nf-an-c1__wfull { width: 100%; }

/* Photo and charts */
.nf-an-c1__photo { position: relative; border-radius: 24px; overflow: visible; }
.nf-an-c1__fill { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; }
.nf-an-c1__fill picture { display: contents; border-radius: inherit; }
.nf-an-c1__photo img, .nf-an-c1__chart img {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; width: 100%; height: 100%;
  border-radius: inherit; object-position: center;
}
.nf-an-c1__photo img { object-fit: cover; }
.nf-an-c1__charts {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px;
  flex: 0 0 auto; height: min-content; padding: 0; position: relative; overflow: clip;
}
.nf-an-c1__charts--d { width: 800px; }
.nf-an-c1__charts--full { width: 100%; }
.nf-an-c1__chart { flex: 0 0 auto; width: 100%; height: auto; position: relative; overflow: visible; }
.nf-an-c1__chart--score { aspect-ratio: 1.55382 / 1; }
.nf-an-c1__chart--outdoor { aspect-ratio: 1.89619 / 1; }
.nf-an-c1__chart--score img { object-fit: contain; }
.nf-an-c1__chart--outdoor img { object-fit: cover; }

/* ---------- Desktop variant (>= 1440): rows of two columns ---------- */
.nf-an-c1__v--d {
  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-an-c1__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-an-c1__col {
  display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
  flex: 0 0 auto; align-self: stretch; max-width: 100%; height: auto; padding: 0; position: relative; overflow: clip;
}
.nf-an-c1__col--photo { width: 424px; gap: 48px; }
.nf-an-c1__col--data { width: 425px; gap: 42px; }
/* Photo fills what the title leaves of the row height (flex 1 0 0, as live) */
.nf-an-c1__photo--d { flex: 1 0 0px; width: 100%; height: 1px; }

/* ---------- Tablet (810 to 1439.98) and phone variants: one column ---------- */
.nf-an-c1__v--t, .nf-an-c1__v--p {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  flex: 0 0 auto; width: 100%; height: min-content; position: relative; overflow: hidden;
}
.nf-an-c1__v--t { gap: 48px; padding: 60px 40px; }
.nf-an-c1__v--p { gap: 32px; padding: 32px 16px; }
.nf-an-c1__stack {
  display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
  flex: 0 0 auto; width: 100%; height: min-content; padding: 0; position: relative; overflow: clip;
}
.nf-an-c1__v--t .nf-an-c1__stack { gap: 32px; }
.nf-an-c1__v--p .nf-an-c1__stack { gap: 16px; }
.nf-an-c1__v--t .nf-an-c1__stack--data, .nf-an-c1__v--p .nf-an-c1__stack--data { gap: 100px; }
.nf-an-c1__stack--inner { max-width: 101%; }
.nf-an-c1__photo--t { flex: 0 0 auto; width: 100%; height: 400px; }
.nf-an-c1__photo--p { flex: 0 0 auto; width: 100%; height: 253px; }

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