.family-page main { font-size: clamp(13px, 1.26vw, 24px); }
.family-page main h2, .family-page main h3 { font-family: var(--font-serif); font-weight: 500; }
.family-page main h2 { font-size: clamp(22px, 2.8vw, 54px); }
.family-page .membership-banner { background-color: #b7aca3; --title-outline-color: #b7aca3; }
.family-page .membership-banner-photo {
  --title-photo-ratio: 680 / 406;
  background-image: url("images/banner.png");
  background-image: image-set(url("images/banner.avif") type("image/avif"), url("images/banner.webp") type("image/webp"), url("images/banner.png") type("image/png"));
}
.family-lead { line-height: 2.4; margin: min(2.4vw, 46px) auto 0; }
.family-intro { padding-top: min(6vw, 114px); }
.sleeping-child { display: block; width: min(69.48%, 1320px); height: auto; margin: clamp(16px, 2vw, 38px) auto 0; pointer-events: none; }
.family-services { padding: min(8vw, 152px) 0 min(18vw, 342px); }
.service-list { list-style: none; width: min(83%, 1577px); padding: 0; margin: min(4.4vw, 84px) auto 0; display: grid; gap: min(2.7vw, 51px); }
.service-list li { background: #f5f5f5; border-radius: min(2.3vw, 44px); display: grid; grid-template-columns: 32% 1fr; align-items: start; gap: min(3.2vw, 61px); padding: min(2.2vw, 42px); text-align: left; }
.service-list img { width: 100%; height: auto; }
.service-list h3 { margin: 0 0 min(1.5vw, 28px); font-size: clamp(18px, 2.1vw, 40px); line-height: 1.7; }
.family-number { display: inline-flex; align-items: center; justify-content: center; width: 1.1em; height: 1.1em; border-radius: 50%; background: #ed6100; color: #fff; font-family: Arial, sans-serif; font-weight: 700; margin-right: .3em; flex: none; }
.service-list p { font-size: clamp(12px, 1.2vw, 23px); line-height: 1.9; margin: 0; }
.service-list p br { display: none; }
.family-patterns { position: relative; background: #f5f5f5; padding: min(7.9vw, 150px) 0 min(5.5vw, 104px); }
.family-illustration { position: absolute; width: min(14.1%, 268px); height: auto; left: 50%; top: 0; transform: translate(-50%, -52%); }
.pattern-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: min(1.9vw, 36px); width: min(80.84%, 1536px); margin: min(5vw, 95px) auto 0; }
.pattern-card { border-radius: min(1.8vw, 34px); background: #fff; padding: min(4.95vw, 94px) min(1.5vw, 28px) min(4.5vw, 85px); display: flex; flex-direction: column; align-items: center; }
.bed-icons { display: flex; justify-content: center; gap: min(.6vw, 12px); }
.bed-icons img { width: min(4.9vw, 93px); height: auto; }
.pattern-card h3 { font-size: clamp(15px, 1.7vw, 32px); margin: min(2.5vw, 48px) 0 min(5.5vw, 104px); }
.pattern-picture { height: min(10.3vw, 196px); width: 100%; display: flex; align-items: end; justify-content: center; }
.pattern-picture img { max-width: 95%; width: auto; height: 100%; object-fit: contain; }
.pattern-localized { max-width: 95%; width: auto; height: 100%; font-family: var(--font-sans); font-size: 21px; font-weight: 700; }
.pattern-card p { font-size: clamp(12px, 1.2vw, 23px); line-height: 2; margin: min(6vw, 114px) 0 0; min-height: 6em; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.family-note { font-size: clamp(11px, 1.05vw, 20px); margin: min(4.5vw, 85px) 6% 0; line-height: 1.9; }
.family-reservation { padding: min(8vw, 152px) 0 min(19vw, 361px); }
.reservation-steps { list-style: none; width: min(77.5%, 1473px); margin: min(7vw, 133px) auto 0; padding: 0; display: grid; gap: min(7vw, 133px); }
.reservation-steps li { display: grid; grid-template-columns: 1fr 45.15%; gap: 7%; text-align: left; align-items: start; }
.reservation-steps li > picture.asset-picture { display: block !important; }
.reservation-steps img { width: 100%; height: auto; }
.reservation-copy h3 { font-size: clamp(16px, 1.7vw, 32px); line-height: 1.8; margin: min(1.5vw, 28px) 0; }
.reservation-copy .family-number { display: flex; font-size: 1.8em; margin-bottom: .3em; }
.reservation-copy p { font-size: clamp(12px, 1.2vw, 23px); line-height: 1.9; margin: 0; }
.reservation-copy p br { display: none; }
.reservation-placeholder { width: 100%; aspect-ratio: 665 / 425; background: #f5f5f5; }
.pattern-track:focus-visible { outline: 2px solid #ed6100; outline-offset: 5px; }
@media (max-width: 760px) {
  .family-page main h2 { font-size: clamp(20px, 4.7vw, 32px); }
  .family-intro { padding-top: 30px; }
  .family-lead { width: 88%; font-size: 12px; line-height: 2; margin-top: 20px; }
  .family-lead br { display: none; }
  .sleeping-child { width: 84%; }
  .family-services { padding: 40px 0 92px; }
  .service-list { width: 72%; margin-top: 28px; gap: 20px; }
  .service-list li { display: block; padding: 20px 18px 28px; border-radius: 10px; }
  .service-list img { width: 82%; margin: 0 auto 20px; display: block; }
  .service-list h3 { text-align: center; font-size: clamp(15px, 3.5vw, 24px); margin-bottom: 14px; }
  .service-list p { font-size: 12px; line-height: 1.9; }
  .family-patterns { padding: 62px 0 30px; }
  .family-illustration { width: 27%; max-width: 180px; }
  .pattern-track { display: flex; width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 8%; padding: 0 8%; margin-top: 24px; gap: 3.5vw; scrollbar-width: none; }
  .pattern-track::-webkit-scrollbar { display: none; }
  .pattern-card { flex: 0 0 55.5%; min-width: 170px; scroll-snap-align: start; padding: 34px 10px 28px; border-radius: 10px; }
  .bed-icons { gap: 4px; }
  .bed-icons img { width: 9vw; max-width: 60px; }
  .pattern-card h3 { font-size: 14px; margin: 20px 0 45px; }
  .pattern-picture { height: 20vw; max-height: 150px; }
  .pattern-card p { margin-top: 42px; font-size: 11px; }
  .family-note { font-size: 10px; margin-top: 22px; }
  .family-reservation { padding: 50px 0 85px; }
  .reservation-steps { width: 72%; margin-top: 30px; gap: 40px; }
  .reservation-steps li { display: flex; flex-direction: column-reverse; gap: 10px; }
  .reservation-copy h3 { display: flex; align-items: start; font-size: 14px; line-height: 1.7; margin: 0 0 18px; }
  .reservation-copy h3 br { display: none; }
  .reservation-copy .family-number { font-size: 15px; margin-top: .3em; margin-right: 8px; }
  .reservation-copy p { font-size: 12px; }
  .reservation-placeholder { aspect-ratio: 665 / 475; }
}