.face-hero {
  width: min(1320px, calc(100% - 40px));
  min-height: calc(100dvh - 107px);
  max-height: 900px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  overflow: hidden;
  background: var(--ivory-100);
}

.face-hero-copy {
  align-self: center;
  padding: clamp(72px, 8vw, 128px) clamp(30px, 4vw, 58px);
}

.face-hero-copy h1 {
  max-width: 690px;
  margin-bottom: 28px;
  font-size: clamp(3rem, 4vw, 5.2rem);
  font-weight: 500;
  letter-spacing: -.055em;
  line-height: .92;
}

.face-hero-copy h1 em {
  color: var(--gold-600);
  font-weight: 500;
}

.face-hero-copy > p:not(.kicker) {
  max-width: 520px;
  margin-bottom: 30px;
  color: var(--cacao-700);
  font-size: 1.05rem;
}

.face-hero-visual {
  position: relative;
  min-height: 620px;
  margin: 0;
  overflow: hidden;
}

.face-hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wellness-hero-visual img { object-position: center 42%; }

.face-hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 65%, rgba(36, 23, 18, .58));
  pointer-events: none;
}

.face-hero-visual figcaption {
  position: absolute;
  z-index: 2;
  right: 28px;
  bottom: 24px;
  color: var(--white-warm);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .08em;
}

.face-intro {
  display: grid;
  grid-template-columns: .45fr 1.3fr .55fr;
  gap: clamp(34px, 6vw, 82px);
  align-items: start;
  padding-block: clamp(104px, 12vw, 160px);
}

.face-intro .section-note { margin: 10px 0 0; }

.face-intro h2,
.face-section-heading h2,
.face-guide-title h2,
.face-faq-heading h2,
.face-cta h2 {
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: .96;
}

.face-intro h2 {
  margin-bottom: 28px;
  font-size: clamp(2.8rem, 5vw, 5rem);
}

.face-intro > div p {
  max-width: 690px;
  margin: 0;
  color: var(--stone-600);
  font-size: 1.04rem;
  line-height: 1.8;
}

.face-intro aside {
  padding: 28px 0 0 28px;
  border-left: 1px solid var(--border-soft);
}

.face-intro aside span {
  display: block;
  margin-bottom: 28px;
  color: var(--gold-600);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.face-intro aside strong {
  display: block;
  margin-bottom: 10px;
  font-size: 1.6rem;
  font-weight: 500;
}

.face-intro aside p {
  margin: 0;
  color: var(--stone-600);
  font-size: .84rem;
}

.face-options {
  padding-block: clamp(96px, 11vw, 150px);
  background: var(--ivory-100);
}

.face-section-heading {
  display: grid;
  grid-template-columns: .45fr 1.2fr .55fr;
  gap: clamp(32px, 6vw, 78px);
  align-items: end;
  margin-bottom: clamp(64px, 8vw, 104px);
}

.face-section-heading > p,
.face-guide-title > p,
.face-faq-heading > p,
.face-cta .section-shell > p {
  margin: 0;
  color: var(--gold-600);
  font-size: .74rem;
  font-weight: 600;
}

.face-section-heading h2 {
  margin: 0;
  font-size: clamp(2.8rem, 5vw, 5rem);
}

.face-section-heading > span {
  color: var(--stone-600);
  font-size: .83rem;
  line-height: 1.7;
}

.face-treatment-list { display: grid; gap: 24px; }

.body-objectives {
  margin-top: 24px;
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: clamp(48px, 8vw, 110px);
  padding: clamp(54px, 7vw, 88px);
  background: var(--cacao-950);
  color: var(--ivory-50);
}

.body-objectives > div p {
  margin-bottom: 24px;
  color: #d3ad7e;
  font-size: .72rem;
  font-weight: 600;
}

.body-objectives h3 {
  margin: 0;
  font-size: clamp(2.4rem, 4vw, 4.2rem);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: .98;
}

.body-objectives ul { margin: 0; padding: 0; list-style: none; }

.body-objectives li {
  display: grid;
  grid-template-columns: 44px 120px 1fr;
  gap: 18px;
  align-items: baseline;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 253, 249, .16);
}

.body-objectives li:last-child { border-bottom: 1px solid rgba(255, 253, 249, .16); }
.body-objectives li span { color: #d3ad7e; font-size: .72rem; }
.body-objectives li strong { font-size: 1rem; font-weight: 500; }
.body-objectives li p { margin: 0; color: rgba(255, 253, 249, .62); font-size: .82rem; }

.face-treatment-row {
  min-height: 540px;
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  background: var(--white-warm);
}

.face-treatment-row-reverse { grid-template-columns: .75fr 1.25fr; }
.face-treatment-row-reverse .face-treatment-image { order: 2; }
.face-treatment-row-dark { background: var(--cacao-800); color: var(--ivory-50); }

.face-treatment-image { min-height: 430px; overflow: hidden; }

.face-treatment-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms var(--ease-out);
}

.face-treatment-copy {
  align-self: center;
  padding: clamp(40px, 6vw, 82px);
}

.face-treatment-copy > span {
  display: block;
  margin-bottom: 22px;
  color: var(--gold-600);
  font-size: .72rem;
  font-weight: 600;
}

.face-treatment-row-dark .face-treatment-copy > span { color: #d3ad7e; }

.face-treatment-copy h3 {
  margin-bottom: 22px;
  font-size: clamp(2.3rem, 4.2vw, 4.5rem);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: .95;
}

.face-treatment-copy p {
  margin-bottom: 28px;
  color: var(--stone-600);
  line-height: 1.75;
}

.face-treatment-row-dark .face-treatment-copy p { color: rgba(255, 253, 249, .67); }

.face-treatment-copy ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.face-treatment-copy li {
  padding: 12px 0;
  border-top: 1px solid var(--border-soft);
  color: var(--cacao-700);
  font-size: .8rem;
}

.face-treatment-row-dark .face-treatment-copy li {
  border-color: rgba(255, 253, 249, .15);
  color: rgba(255, 253, 249, .78);
}

.face-guide {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: clamp(60px, 9vw, 130px);
  padding-block: clamp(110px, 13vw, 180px);
}

.face-guide-title { position: sticky; top: 130px; align-self: start; }

.face-guide-title h2 {
  max-width: 480px;
  margin: 24px 0 0;
  font-size: clamp(2.7rem, 4.6vw, 4.8rem);
}

.face-guide ol { margin: 0; padding: 0; list-style: none; }

.face-guide li {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 24px;
  padding: 34px 0;
  border-top: 1px solid var(--border-soft);
}

.face-guide li:last-child { border-bottom: 1px solid var(--border-soft); }
.face-guide li > span { color: var(--gold-600); font-size: .78rem; font-weight: 600; }
.face-guide h3 { margin-bottom: 10px; font-size: 1.45rem; font-weight: 500; }
.face-guide li p { max-width: 600px; margin: 0; color: var(--stone-600); }

.face-faq {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: clamp(62px, 10vw, 140px);
  padding-bottom: clamp(110px, 13vw, 170px);
}

.face-faq-heading h2 {
  margin: 22px 0 24px;
  font-size: clamp(2.7rem, 4.6vw, 4.8rem);
}

.face-faq-heading > span {
  display: block;
  max-width: 420px;
  color: var(--stone-600);
}

.face-cta {
  padding-block: clamp(110px, 13vw, 170px);
  background: var(--cacao-800);
  color: var(--ivory-50);
  text-align: center;
}

.face-cta h2 {
  max-width: 920px;
  margin: 28px auto 36px;
  font-size: clamp(3rem, 6vw, 6rem);
}

.face-cta .button { margin-inline: auto; }

.face-cta .section-shell > span {
  display: block;
  margin-top: 18px;
  color: rgba(255, 253, 249, .58);
  font-size: .72rem;
}

@media (hover: hover) {
  .face-treatment-row:hover .face-treatment-image img { transform: scale(1.025); }
}

@media (max-width: 880px) {
  .face-hero { min-height: auto; grid-template-columns: 1fr; }
  .face-hero-copy { padding-block: 86px 68px; }
  .face-hero-visual { min-height: 68dvh; max-height: 760px; }
  .face-intro, .face-section-heading { grid-template-columns: 1fr 1fr; }
  .face-intro .section-note, .face-section-heading > p { grid-column: 1 / 3; }
  .face-treatment-row, .face-treatment-row-reverse { min-height: 0; grid-template-columns: 1fr; }
  .face-treatment-row-reverse .face-treatment-image { order: 0; }
  .face-treatment-image { min-height: 520px; }
  .face-guide, .face-faq { grid-template-columns: 1fr; }
  .body-objectives { grid-template-columns: 1fr; }
  .face-guide-title { position: static; }
}

@media (max-width: 620px) {
  .face-hero { width: 100%; }
  .face-hero-copy { padding: 70px 22px 58px; }
  .face-hero-copy h1 { font-size: clamp(3.5rem, 17vw, 5.4rem); }
  .face-hero-visual { min-height: 72dvh; }
  .face-hero-visual figcaption { right: 18px; bottom: 18px; }
  .face-intro { grid-template-columns: 1fr; padding-block: 92px 110px; }
  .face-intro .section-note { grid-column: auto; }
  .face-intro aside { padding: 26px 0 0; border-top: 1px solid var(--border-soft); border-left: 0; }
  .face-section-heading { grid-template-columns: 1fr; }
  .face-section-heading > p { grid-column: auto; }
  .face-treatment-image { min-height: 340px; }
  .face-treatment-copy { padding: 38px 24px 44px; }
  .face-treatment-copy h3 { font-size: clamp(2.6rem, 13vw, 3.8rem); }
  .body-objectives { padding: 42px 24px; }
  .body-objectives li { grid-template-columns: 36px 1fr; gap: 8px 12px; }
  .body-objectives li p { grid-column: 2; }
  .face-guide li { grid-template-columns: 48px 1fr; gap: 12px; }
  .face-faq { gap: 54px; }
  .face-cta { text-align: left; }
  .face-cta h2 { margin-inline: 0; }
  .face-cta .button { width: 100%; }
}

@media print {
  .face-cta { display: none; }
}
