/* Homepage expertise: reference screenshot placement, scoped to this section. */
.vision--placement,
.bodymap--placement { background: #f5ddd7; }
.vision--placement { padding: 28px 24px 10px; }
.vision--placement .vision__head { display: block; max-width: 1120px; margin: 0 auto; text-align: center; }
.vision--placement .eyebrow { margin: 0 0 14px; font-size: 12px; letter-spacing: .16em; color: #ad7841; }
.vision--placement .eyebrow::before { animation: none; margin-right: 9px; }
.vision--placement .vision__head h2 { max-width: none; margin: 0; font-size: clamp(32px, 4.3vw, 56px); font-weight: 500; line-height: 1.1; letter-spacing: -.035em; }
.vision--placement .vision__divider { position: relative; width: 280px; height: 1px; background: #d7b187; margin: 24px auto; }
.vision__divider span { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; background: #b88b50; transform: translate(-50%, -50%) rotate(45deg); }
.vision--placement .vision__sub { max-width: 52ch; margin: 0 auto; font-size: 16px; line-height: 1.5; }
.bodymap--placement { max-width: none; margin: 0; padding: 0 24px; overflow: hidden; }
.bodymap--placement .bodymap__viz { display: block; position: relative; width: 100%; max-width: 840px; height: auto; min-height: 0; margin: 0 auto; padding: 0; overflow: hidden; }
.bodymap--placement .bodymap__img { position: relative; left: 50%; top: -20px; width: 480px; height: auto; max-width: 100%; max-height: none; margin: 0; transform: translateX(-50%); animation: none; filter: none; }
.bodymap--placement .bodymap__halo { width: 600px; height: 500px; top: 48%; opacity: .16; }
.bodymap--placement .hotspot { display: block; position: absolute; width: 215px; height: auto; z-index: 3; }
.bodymap--placement .hotspot[data-pos="face"] { left: 0; right: auto; top: 16px; }
.bodymap--placement .hotspot[data-pos="bust"] { left: 0; right: auto; top: 202px; }
.bodymap--placement .hotspot[data-pos="skin"] { left: auto; right: 0; top: 16px; }
.bodymap--placement .hotspot[data-pos="waist"] { left: auto; right: 0; top: 202px; }
.bodymap--placement .hotspot .hotspot__card { position: relative; inset: auto; width: 100%; min-height: 142px; padding: 16px 22px 20px; border: 0; border-radius: 12px; text-align: center; background: #fffcfa; box-shadow: 0 9px 20px rgba(62, 34, 25, .13); transform: none; }
.bodymap--placement .hotspot__num { display: block; text-align: left; color: #b78954; font-size: 13px; line-height: 1; }
.bodymap--placement .hotspot__card h3 { max-width: 20ch; margin: 10px auto 14px; font-size: 13px; font-weight: 600; line-height: 1.35; }
.bodymap--placement .hotspot__card p { margin: 0; font-size: 11px; line-height: 1.4; color: #27211d; }
.bodymap--placement .hotspot .hotspot__line { top: 62px; width: 205px; height: 1px; background: #d8b58f; z-index: -1; }
.bodymap--placement .hotspot[data-pos="face"] .hotspot__line,
.bodymap--placement .hotspot[data-pos="bust"] .hotspot__line { left: 100%; right: auto; }
.bodymap--placement .hotspot[data-pos="skin"] .hotspot__line,
.bodymap--placement .hotspot[data-pos="waist"] .hotspot__line { right: 100%; left: auto; }
.bodymap--placement .hotspot .hotspot__dot { top: 62px; left: auto; width: 12px; height: 12px; margin: -6px; box-shadow: none; background: #c29a60; transform: none; }
.bodymap--placement .hotspot[data-pos="face"] .hotspot__dot,
.bodymap--placement .hotspot[data-pos="bust"] .hotspot__dot { left: calc(100% + 205px); }
.bodymap--placement .hotspot[data-pos="skin"] .hotspot__dot,
.bodymap--placement .hotspot[data-pos="waist"] .hotspot__dot { right: calc(100% + 205px); }
.bodymap--placement .hotspot__dot::after { display: none; }
.bodymap--placement .hotspot[data-pos="skin"] .hotspot__line { top: 205px; width: 180px; }
.bodymap--placement .hotspot[data-pos="skin"] .hotspot__dot { top: 205px; right: calc(100% + 180px); }
.bodymap--placement .hotspot[data-pos="skin"] .hotspot__card::after { content: ""; position: absolute; right: 100%; top: 72px; width: 1px; height: 133px; background: #d8b58f; opacity: .45; }
.bodymap--placement .hotspot[data-pos="waist"] .hotspot__line { top: 108px; width: 195px; }
.bodymap--placement .hotspot[data-pos="waist"] .hotspot__dot { top: 108px; right: calc(100% + 195px); }
.bodymap--placement .bodymap__mobile { display: none; }
@media (max-width: 880px) and (min-width: 641px) {
  .bodymap--placement .bodymap__viz { max-width: 690px; height: auto; }
  .bodymap--placement .bodymap__img { width: 410px; }
  .bodymap--placement .hotspot { width: 180px; }
  .bodymap--placement .hotspot[data-pos="bust"], .bodymap--placement .hotspot[data-pos="waist"] { top: 174px; }
  .bodymap--placement .hotspot .hotspot__card { padding: 12px 16px 16px; min-height: 130px; }
  .bodymap--placement .hotspot .hotspot__line { width: 155px; }
  .bodymap--placement .hotspot[data-pos="face"] .hotspot__dot, .bodymap--placement .hotspot[data-pos="bust"] .hotspot__dot { left: calc(100% + 155px); }
  .bodymap--placement .hotspot[data-pos="skin"] .hotspot__dot, .bodymap--placement .hotspot[data-pos="waist"] .hotspot__dot { right: calc(100% + 155px); }
}
@media (max-width: 640px) {
  .vision--placement { padding: 36px 22px 8px; }
  .vision--placement .vision__head h2 { max-width: 15ch; margin: 0 auto; font-size: 34px; line-height: 1.1; }
  .vision--placement h2 br { display: none; }
  .vision--placement h2 em { color: #bc925a; }
  .vision--placement .vision__divider { width: 210px; margin: 22px auto; }
  .vision--placement .vision__sub { max-width: 31ch; font-size: 14px; }
  .bodymap--placement { padding: 0 22px 36px; }
  .bodymap--placement .bodymap__viz { height: auto; }
  .bodymap--placement .bodymap__img { width: 340px; top: -16px; }
  .bodymap--placement .hotspot { display: none; }
  .bodymap--placement .bodymap__mobile { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0 auto; max-width: 420px; position: relative; z-index: 3; }
  .bodymap--placement .bodymap__mobile-card { padding: 15px 18px; background: #fffcfa; }
}