/* A spacious family-led story, using the original words and typefaces. */
.mosaeli-families .page-hero {
  padding: 0;
  background: var(--journey-paper);
  border: 0;
}
.mosaeli-families .page-hero > .container {
  width: min(100% - 6rem, 1280px);
  display: grid;
  grid-template-columns: 1.4fr .6fr;
  gap: var(--space-24);
  align-items: end;
  padding-block: var(--space-16);
}
.mosaeli-families .page-hero .eyebrow { color: var(--brand-purple); }
.mosaeli-families .page-hero h1 {
  font-size: clamp(2.6rem, 1.7rem + 2.8vw, 4.25rem);
  line-height: 1.15;
  letter-spacing: -.045em;
  max-width: 22ch;
  margin: 0;
  text-wrap: balance;
}
.mosaeli-families .page-hero h1 span {
  display: block;
  color: var(--green);
}
.mosaeli-families .page-hero .lede {
  font-size: 1.125rem;
  line-height: 1.8;
  padding-bottom: var(--space-2);
}
.families-landscape {
  width: 100%;
  height: clamp(300px, 28vw, 440px);
  object-fit: cover;
  object-position: center 20%;
}
.mosaeli-families .families-begin .split {
  grid-template-columns: .8fr 1.2fr;
  gap: var(--space-24);
}
.families-begin .eyebrow { color: var(--brand-purple); }
.families-begin h2 { max-width: 15ch; }
.families-begin .prose p { font-size: 1.0625rem; line-height: 1.8; margin-bottom: var(--space-6); }
.families-begin .prose p:last-child {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--journey-forest);
  font-weight: 600;
  line-height: 1.6;
  border-top: 1px solid var(--hero-line);
  padding-top: var(--space-6);
  margin: 0;
}
.mosaeli-families .families-moments {
  background: var(--journey-sage);
}
.families-moments .section-intro {
  max-width: none;
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  column-gap: var(--space-12);
  align-items: center;
  margin-bottom: var(--space-16);
}
.families-moments .section-intro .eyebrow { color: var(--green); max-width: 20ch; margin: 0; }
.families-moments .section-intro h2 { margin: 0; max-width: 21ch; }
.mosaeli-families .moments-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16) var(--space-24);
}
.mosaeli-families .moments-grid .feature {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: var(--space-8);
  padding: var(--space-10) 0 0;
  border: 0;
  border-top: 1px solid #ccd5c9;
  background: transparent;
}
.mosaeli-families .moments-grid h3 {
  grid-column: 1;
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.5;
  letter-spacing: -.025em;
}
.moments-grid h3 span {
  display: block;
  font-size: clamp(2.5rem, 1.3rem + 2.5vw, 3.5rem);
  line-height: 1.15;
  letter-spacing: -.055em;
  color: var(--brand-blue);
  margin-bottom: var(--space-2);
}
.moments-grid .feature:nth-child(2) h3 span { color: var(--brand-purple); }
.moments-grid .feature:nth-child(3) h3 span { color: var(--green); }
.moments-grid .feature:nth-child(4) h3 span { color: #995311; }
.mosaeli-families .moments-grid .feature p {
  grid-column: 2;
  font-size: var(--text-base);
  line-height: 1.8;
}
.mosaeli-families .families-voice {
  background: var(--journey-forest);
  color: var(--journey-paper);
  padding-block: var(--space-24);
}
.families-voice .split { grid-template-columns: 1fr 1fr; gap: var(--space-24); align-items: center; }
.mosaeli-families .families-voice h2 {
  font-size: clamp(2.5rem, 1.8rem + 2.6vw, 4.25rem);
  max-width: 14ch;
  margin-bottom: var(--space-8);
}
.families-voice .lede {
  color: #d5e1b7;
  max-width: 28ch;
}
.families-voice .values li {
  color: #d9e3de;
  padding-block: var(--space-6);
  border-bottom-color: #49645c;
  line-height: 1.8;
}
.families-voice .values li:first-child { padding-top: 0; }
.families-voice .values li:last-child { border-bottom: 0; padding-bottom: 0; }
.families-voice .values strong { color: var(--journey-paper); font-size: var(--text-lg); margin-bottom: var(--space-3); }
@media (max-width: 1100px) {
  .mosaeli-families .page-hero > .container { width: calc(100% - 3rem); gap: var(--space-12); grid-template-columns: 1.2fr .8fr; }
  .mosaeli-families .page-hero .lede { font-size: var(--text-base); }
  .mosaeli-families .families-begin .split { gap: var(--space-12); }
  .mosaeli-families .moments-grid { gap: var(--space-12); }
  .mosaeli-families .moments-grid .feature { grid-template-columns: 1fr; gap: var(--space-5); }
  .mosaeli-families .moments-grid .feature p { grid-column: 1; }
  .families-voice .split { gap: var(--space-12); }
}
@media (max-width: 760px) {
  .mosaeli-families .page-hero > .container {
    width: min(100% - 2.5rem, 560px);
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding-block: var(--space-8);
  }
  .mosaeli-families .page-hero h1 {
    font-size: clamp(2.4rem, 1.7rem + 3vw, 3.2rem);
    max-width: none;
    text-wrap: balance;
  }
  .mosaeli-families .page-hero h1 span { margin-top: var(--space-3); }
  .mosaeli-families .page-hero .lede { padding: 0; line-height: 1.75; }
  .families-landscape { height: 280px; object-position: 35% 50%; }
  .mosaeli-families .families-begin .split { grid-template-columns: 1fr; gap: var(--space-8); }
  .families-begin h2 { margin: 0; max-width: 17ch; }
  .families-begin .prose p { font-size: var(--text-base); }
  .families-begin .prose p:last-child { font-size: var(--text-lg); }
  .families-moments .section-intro { display: block; margin-bottom: var(--space-10); }
  .families-moments .section-intro .eyebrow { max-width: none; margin-bottom: var(--space-5); }
  .families-moments .section-intro h2 { max-width: 16ch; }
  .mosaeli-families .moments-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .mosaeli-families .moments-grid .feature { padding-top: var(--space-8); gap: var(--space-5); }
  .moments-grid h3 span { font-size: 2.8rem; }
  .mosaeli-families .families-voice { padding-block: var(--space-16); }
  .families-voice .split { grid-template-columns: 1fr; gap: var(--space-10); }
  .mosaeli-families .families-voice h2 { font-size: 2.5rem; margin-bottom: var(--space-6); }
}