/* ==========================================================================
   40 Content 2 (live "Content 2", after the Banner Separator)
   Three blocks: "A Different Relationship With Home", "What Peace of Mind Looks Like",
   "Living With Healthier Air". Framer renders two markups: desktop rows (heading left,
   800px copy right) and a tablet/phone column. Text mirrors Framer's rich text: the
   p/h2 and every classed span carry their own font-size and a percentage line-height
   (resolved on that element), em and br inherit.
   Reveal: each heading and copy box fades in once (opacity 0 to 1, 0.45s spring)
   when 50% of it is in view (js/40-content-2.js).
   ========================================================================== */

/* Phone quotes use Inter Medium Italic: the @font-face is declared once, in 20-content-1.css */

/* ---------- desktop (>= 1440px) and shared ---------- */
.nf-an-c2 {
  /* critically damped spring sampled on live (w = 16.3/s), cut at 0.45s */
  --nf-an-c2-fade: linear(0, 0.0256, 0.0874, 0.1684, 0.2575, 0.3474, 0.4334, 0.5131, 0.5851, 0.6491, 0.7051, 0.7535, 0.7951, 0.8305, 0.8604, 0.8856, 0.9067, 0.9243, 0.9389, 0.9509, 0.9609, 0.9691, 0.9759, 0.9814, 0.9859, 0.9896, 0.9926, 0.9951, 0.9971, 0.9987, 1);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
  gap: 75px;
  width: 100%;
  padding: 80px 60px;
  overflow: hidden;
}

.nf-an-c2__row {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  flex: 0 0 auto;
  width: 100%;
  overflow: clip;
}

.nf-an-c2__blk {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex: 0 0 auto;
  gap: 32px;
  width: 100%;
  overflow: clip;
}

/* Framer RichTextContainer boxes */
.nf-an-c2__head,
.nf-an-c2__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: 0 0 auto;
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: break-word;
}
.nf-an-c2__blk > .nf-an-c2__head,
.nf-an-c2__blk > .nf-an-c2__copy { width: 100%; }
.nf-an-c2__row > .nf-an-c2__copy { width: 800px; }
.nf-an-c2__head--relationship { width: 333px; }
.nf-an-c2__head--peace { width: 364px; }
.nf-an-c2__head--living { width: 226px; }

/* scroll reveal (plays once) */
.nf-an-c2__rv { opacity: 0; }
.nf-an-c2__rv.is-in { opacity: 1; transition: opacity 0.45s var(--nf-an-c2-fade); }

/* headings */
.nf-an-c2__h {
  margin: 0;
  font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", sans-serif;
  font-size: 42px;
  font-style: normal;
  font-weight: 500;
  line-height: 125%;
  letter-spacing: 0;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
  text-align: start;
  color: rgb(0, 0, 0);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* copy */
.nf-an-c2__p {
  margin: 0;
  font-family: "SF Pro Display Regular", "SF Pro Display Regular Placeholder", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0;
  text-align: left;
  color: rgb(0, 0, 0);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}
.nf-an-c2__p--18 { font-size: 18px; }
.nf-an-c2__s { font-size: 20px; line-height: 150%; }
.nf-an-c2__q,
.nf-an-c2__qm {
  font-family: "SF Pro Display Semibold Italic", "SF Pro Display Semibold Italic Placeholder", sans-serif;
  font-weight: 600;
  font-size: inherit;
  line-height: 150%;
}
.nf-an-c2__q--24,
.nf-an-c2__qm { font-size: 24px; }
.nf-an-c2__q--23 { font-size: 23px; }
.nf-an-c2__q--20 { font-size: 20px; }

/* ---------- tablet (810px to 1439.98px) ---------- */
@media (min-width: 810px) and (max-width: 1439.98px) {
  .nf-an-c2 { gap: 48px; padding: 60px 40px; }
}

/* ---------- phone (<= 809.98px) ---------- */
@media (max-width: 809.98px) {
  .nf-an-c2 { gap: 32px; padding: 32px 16px; }
  .nf-an-c2__blk { gap: 16px; }
  .nf-an-c2__h { font-size: 29px; line-height: 120%; letter-spacing: -0.01em; }
  .nf-an-c2__p { line-height: 140%; }
  .nf-an-c2__qm {
    font-family: Inter, "Inter Placeholder", sans-serif;
    font-style: italic;
    font-weight: 500;
    font-size: inherit;
    line-height: 140%;
  }
}