/* Full-width backdrop with a photograph that keeps its original composition. */
.family-hero.wide-hero {
  --banner-paper: #f0eee4;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: none;
  height: clamp(560px, 43vw, 900px);
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--banner-paper);
}
.wide-hero .hero-visual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 0;
}
.family-hero.wide-hero .hero-image-wrap {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  background: var(--banner-paper);
}
.wide-hero .hero-carousel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, #f0eee4f5 0%, #f0eee4d9 16%, #f0eee499 29%, #f0eee41a 48%, transparent 62%);
}
.wide-hero .hero-slide {position: relative; overflow: hidden; background: var(--banner-paper)}
.wide-hero .hero-slide img {width: 100%; height: 100%; object-fit: cover}
.wide-hero .hero-slide:nth-child(2) img {transform: translateX(10%); mask-image: linear-gradient(90deg, transparent, #000 16%)}
.wide-hero .hero-slide:nth-child(3) img {transform: translateX(18%); object-position: center top !important; mask-image: linear-gradient(90deg, transparent, #000 15%)}
.family-hero.wide-hero .hero-copy {
  position: relative;
  z-index: 2;
  width: 46%;
  max-width: 680px;
  padding: 0 0 36px clamp(32px, 6.4vw, 128px);
  text-align: left;
  pointer-events: none;
}
.wide-hero .hero-copy a {pointer-events: auto}
.wide-hero .eyebrow {font-size: 10px; letter-spacing: 1.8px; color: #5c5a52}
.wide-hero .short-line {display: none}
html[lang] .family-hero.wide-hero #hero-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(68px, 6.5vw, 110px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -3px;
  margin: 26px 0 24px;
  color: #3f3843;
  white-space: nowrap;
}
.wide-hero #hero-title > span {color: #78618a; font-style: italic}
html[lang=zh-CN] .family-hero.wide-hero #hero-title {
  font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
  font-size: clamp(46px, 4.5vw, 78px);
  font-weight: 600;
  letter-spacing: -2px;
  line-height: 1.3;
}
html[lang=zh-CN] .wide-hero #hero-title > span {font-style: normal; font-weight: 400}
html[lang] .family-hero.wide-hero .hero-description {
  max-width: 400px;
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: 0;
  color: #514b53;
}
html[lang] .family-hero.wide-hero .hero-actions {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 28px;
  margin-top: 30px;
}
html[lang] .wide-hero .hero-actions .button {font-size: 13px; min-height: 52px; padding: 14px 26px; gap: 22px}
.wide-hero .hero-actions .text-link {color: #514652; border-color: #867c87; font-size: 13px}
.wide-hero .hero-carousel-controls {
  z-index: 3;
  justify-content: flex-end;
  bottom: 28px;
  right: clamp(26px, 4vw, 76px);
  left: auto;
  gap: 14px;
}
.wide-hero .hero-photo-arrow {width: 44px; height: 44px; background: #fff9f3d9; box-shadow: none}
.wide-hero .hero-photo-dots {background: #fff9f3d9; padding: 0 4px}
.wide-hero .hero-photo-dots button {width: 34px; height: 40px}
.family-hero.wide-hero .photo-index {
  z-index: 2;
  right: auto;
  left: clamp(32px, 6.4vw, 128px);
  bottom: 43px;
  color: #514b53;
  font-size: 9px;
  letter-spacing: 1.8px;
}
.wide-hero + .home-directory {padding-top: 0; margin-bottom: 44px}
.wide-hero + .home-directory > a {padding-top: 25px; padding-bottom: 25px; border-top: 0}
/* Size the photo from the banner's height, not the screen's width. Cover on a
   3,840px desktop cropped the kittens even though the banner was only 760px tall. */
@media (min-width: 1001px) {
  .family-hero.wide-hero {
    --composition-gutter: max(0px, calc((100vw - 2560px) / 2));
    --copy-inset: clamp(32px, 6.4vw, 128px);
  }
  .family-hero.wide-hero .hero-slide:nth-child(n) img {
    position: absolute;
    top: 0;
    right: var(--composition-gutter);
    left: auto;
    width: auto;
    max-width: none;
    height: 100%;
    object-fit: contain;
    object-position: center !important;
    transform: none;
    mask-image: linear-gradient(90deg, transparent, #000 30%, #000 96%, transparent);
  }
  .wide-hero .hero-carousel::after {background: none}
  .family-hero.wide-hero .hero-copy {margin-left: var(--composition-gutter)}
  .family-hero.wide-hero .photo-index {left: calc(var(--composition-gutter) + var(--copy-inset))}
  .wide-hero .hero-carousel-controls {right: calc(var(--composition-gutter) + clamp(26px, 4vw, 76px))}
}
@media (min-width: 1001px) and (max-width: 1200px) {
  .wide-hero .hero-carousel::after {
    background: linear-gradient(90deg, #f0eee4f2, #f0eee4d9 22%, #f0eee480 34%, transparent 49%);
  }
}
@media (max-width: 1000px) and (min-width: 701px) {
  .family-hero.wide-hero {height: 560px}
  .family-hero.wide-hero .hero-copy {width: 49%; padding-left: 36px; padding-bottom: 40px}
  html[lang] .family-hero.wide-hero #hero-title {font-size: 65px; letter-spacing: -2.5px}
  html[lang=zh-CN] .family-hero.wide-hero #hero-title {font-size: 42px}
  html[lang] .family-hero.wide-hero .hero-description {font-size: 12px; max-width: 300px}
  .wide-hero .eyebrow {max-width: 270px; font-size: 8px; letter-spacing: 1px}
  html[lang] .family-hero.wide-hero .hero-actions {gap: 20px}
  html[lang] .wide-hero .hero-actions .button {font-size: 11px; padding-inline: 20px}
  .wide-hero .hero-carousel::after {background: linear-gradient(90deg, #f0eee4f5, #f0eee4c9 26%, #f0eee433 50%, transparent 73%)}
  .wide-hero .hero-slide:nth-child(3) img {transform: translateX(25%)}
}
@media (max-width: 700px) {
  .family-hero.wide-hero {height: min(760px, calc(100vw + 300px)); min-height: 620px; display: block}
  .family-hero.wide-hero .hero-copy {width: 100%; max-width: none; padding: 29px 24px 0}
  .wide-hero .eyebrow {font-size: 8px; letter-spacing: 1.25px; justify-content: flex-start}
  html[lang] .family-hero.wide-hero #hero-title {font-size: 58px; line-height: 1; letter-spacing: -2px; margin: 19px 0 17px}
  .family-hero.wide-hero #hero-title br {display: block}
  .family-hero.wide-hero #hero-title > span {display: inline}
  html[lang=zh-CN] .family-hero.wide-hero #hero-title {font-size: 38px; line-height: 1.25; margin: 19px 0 17px}
  html[lang] .family-hero.wide-hero .hero-description {font-size: 12px; line-height: 1.75; max-width: 345px}
  html[lang] .family-hero.wide-hero .hero-actions {gap: 23px; margin-top: 18px; flex-wrap: nowrap}
  html[lang] .wide-hero .hero-actions .button {font-size: 11px; padding: 11px 19px; min-height: 44px; gap: 17px}
  .wide-hero .hero-actions .text-link {font-size: 11px}
  .wide-hero .hero-slide img {position: absolute; bottom: 0; left: 0; width: 100%; height: min(100vw, 460px); object-position: 55% 50% !important}
  .wide-hero .hero-slide:nth-child(n) img {transform: none; mask-image: linear-gradient(180deg, transparent, #000 15%); object-position: 55% 50% !important}
  .wide-hero .hero-carousel::after {background: linear-gradient(180deg, var(--banner-paper) 0%, var(--banner-paper) 36%, #f0eee4db 40%, transparent 52%)}
  .wide-hero .hero-carousel-controls {bottom: 20px; right: 18px; left: 18px; gap: 10px; justify-content: space-between}
  .wide-hero .hero-photo-dots button {width: 34px; height: 40px}
  .family-hero.wide-hero .photo-index {display: none}
  .wide-hero + .home-directory {margin-bottom: 28px}
  .wide-hero + .home-directory > a {padding-block: 19px}
}
@media (max-width: 360px) {
  .family-hero.wide-hero .hero-copy {padding-inline: 19px}
  html[lang] .family-hero.wide-hero #hero-title {font-size: 51px}
  html[lang=zh-CN] .family-hero.wide-hero #hero-title {font-size: 34px}
  .wide-hero .eyebrow {font-size: 7px; letter-spacing: 1px}
  html[lang] .family-hero.wide-hero .hero-actions {gap: 18px}
}