/* Family gardens: connected places, one drawing, room for living material. */
.family-page { --family-columns:repeat(2,minmax(0,1fr)); --family-gap:72px; }
.family-opening { display:grid; grid-template-columns:var(--family-columns); gap:var(--family-gap); align-items:center; padding-block:56px 52px; }

.family-opening h1 em { display:block; color:var(--sage); margin-top:4px; }
.family-opening h1 br { display:none; }
.family-opening-copy { max-width:495px; }
.family-promise { margin-bottom:18px; }
.family-starts { padding-bottom:60px; }
.family-page #starts-title { margin-bottom:20px; }
.family-start-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:38px; }
.family-start-grid article { border-top:1px solid var(--line); padding-top:23px; display:grid; grid-template-columns:24px 1fr; gap:16px; }
.family-number { color:var(--muted); padding-top:6px; }
.family-start-grid h3 { margin-bottom:12px; }
.family-start-grid p { color:var(--muted); }
.family-study { padding-block:60px; border-block:1px solid var(--line); }
.family-study-grid { display:grid; grid-template-columns:1.42fr 1fr; gap:60px; align-items:center; }
.family-plan { min-width:0; margin:0; padding:28px 28px 0; background:#dce6c4; }
.family-plan-top { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:44px; padding-bottom:20px; color:var(--ink); }
.family-plan-reset { display:flex; align-items:center; gap:10px; white-space:nowrap; }
.family-plan-reset span { font-size:20px; line-height:1; }
.family-plan .study-window { aspect-ratio:1235/871; background:#fff; box-shadow:0 8px 25px #263b3514; }
.family-plan .study-window img { mix-blend-mode:normal; }
.family-plan .study-caption { padding-block:19px; border:0; }
.family-plan .zoom-label { background:var(--coral); }

.family-study-copy h2 em { color:var(--sage); }
.family-study-copy>.copy { margin-top:23px; max-width:440px; }
.family-observations { margin-top:27px; }
.family-observations .study-note { padding-block:18px; }

.family-study-foot { color:var(--muted); margin-top:20px; }
.family-living { display:grid; grid-template-columns:var(--family-columns); gap:var(--family-gap); align-items:center; }
.family-living h2 em { color:var(--sage); }
.family-principles { margin:30px 0 0; }
.family-principles>div { display:grid; grid-template-columns:145px 1fr; gap:24px; padding-block:18px; border-top:1px solid var(--line); }

.family-principles dd { margin:0; color:var(--muted); }
.family-living .text-link { margin-top:13px; }
.family-garden-photo { margin:0; padding:15px 15px 0; background:#ece7dd; transform:rotate(2deg); box-shadow:0 16px 32px #263b3512; transition:transform .45s; }
.family-garden-photo>div { overflow:hidden; aspect-ratio:1.1; }
.family-garden-photo img { width:100%; height:100%; object-fit:cover; object-position:40% 50%; transition:transform .55s; }
.family-garden-photo:hover { transform:rotate(.5deg) translateY(-3px); }
.family-garden-photo:hover img { transform:scale(1.025); }
.family-garden-photo figcaption { display:flex; justify-content:space-between; gap:20px; padding-block:17px; color:var(--muted); }
.family-decisions { display:grid; grid-template-columns:var(--family-columns); gap:var(--family-gap); border-top:1px solid var(--line); padding-block:var(--subsection-space); }

.family-decisions .copy { margin-top:24px; max-width:470px; }
.family-next-links { display:flex; flex-wrap:wrap; gap:0 28px; }

.family-decisions .details-list { align-self:center; }

.family-contact { background:#dce6c4; padding-block:60px; }
.family-contact-grid { display:grid; grid-template-columns:var(--family-columns); gap:var(--family-gap); align-items:center; }
.family-contact h2 em { color:var(--ink); }
.family-contact p:not(.eyebrow) { max-width:410px; }
.family-contact .button { background:var(--ink); color:var(--paper); margin-top:22px; }

@media(max-width:1100px) {
  .family-page { --family-gap:40px; }
  .family-opening { padding-block:45px; }

  .family-start-grid { gap:25px; }
  .family-start-grid article { grid-template-columns:1fr; gap:10px; }

  .family-study-grid { grid-template-columns:1.2fr 1fr; gap:38px; }
  .family-plan { padding:20px 20px 0; }
  .family-plan-top { flex-wrap:wrap; gap:10px; }
  .family-principles>div { grid-template-columns:1fr; gap:7px; padding-block:15px; }
}
@media(max-width:800px) {
  .family-opening { grid-template-columns:1fr; gap:28px; padding-block:38px 42px; }

  .family-opening-copy { max-width:600px; }
  .family-starts { padding-bottom:42px; }
  .family-start-grid { grid-template-columns:1fr; gap:20px; }
  .family-start-grid article { grid-template-columns:24px 1fr; gap:16px; padding-top:19px; }
  .family-start-grid h3 { margin-bottom:9px; }

  .family-study { padding-block:42px; }
  .family-study-grid { grid-template-columns:1fr; gap:34px; }
  .family-plan { padding:18px 18px 0; }
  .family-plan .study-caption { display:block; padding-block:15px; }
  .family-plan .study-caption>span { display:block; }
  .family-plan .study-caption>span:last-child { text-align:left; margin-top:4px; }
  .family-study-copy>.copy { max-width:none; }

  .family-living { grid-template-columns:1fr; gap:36px; }
  .family-principles { margin-top:27px; }
  .family-principles>div { grid-template-columns:1fr; gap:8px; padding-block:17px; }

  .family-garden-photo { margin-inline:5px; padding:12px 12px 0; }
  .family-garden-photo>div { aspect-ratio:1.5; }
  .family-garden-photo figcaption { padding-block:14px; }
  .family-decisions { grid-template-columns:1fr; gap:30px; }
  .family-decisions .copy { max-width:none; }
  .family-contact { padding-block:46px; }
  .family-contact-grid { grid-template-columns:1fr; gap:28px; }
}
@media(prefers-reduced-motion:reduce) {
  .family-garden-photo,.family-garden-photo img { transition:none; }
  .family-garden-photo:hover { transform:rotate(2deg); }
  .family-garden-photo:hover img { transform:none; }
}
.motion-paused .family-garden-photo,.motion-paused .family-garden-photo img { transition:none; }
.motion-paused .family-garden-photo:hover { transform:rotate(2deg); }
.motion-paused .family-garden-photo:hover img { transform:none; }
