/* A quiet, domestic setting for the Sri Lankan-inspired Home Spa collection. */
.home-spa-page {
  --spa-leaf: #435640;
  --spa-bark: #756344;
  --spa-linen: #eee9df;
  --spa-moss: #e5e8dd;
  background: #f8f5ee;
}
.home-spa-page main p { color: #62675c; }
.home-spa-page .eyebrow { color: #726143; font-size: 13px; letter-spacing: 1.7px; }
.home-spa-page .button { text-transform: none; letter-spacing: .1px; font-size: 16px; }
.home-spa-page .text-link { text-transform: none; letter-spacing: .1px; font-size: 16px; }
.home-spa-page .breadcrumb { background: #f8f5ee; }
.spa-welcome { background: var(--spa-linen); }
.spa-welcome-grid { display: grid; grid-template-columns: minmax(0, .93fr) minmax(0, 1.07fr); max-width: 1600px; margin: 0 auto; }
.spa-welcome-copy { padding: 66px 11% 60px 15%; align-self: center; }
.spa-welcome-copy .eyebrow { margin-bottom: 20px; }
.spa-welcome h1 { font-size: clamp(56px, 5.6vw, 84px); line-height: 1.02; letter-spacing: -1.7px; color: #293c32; }
.spa-welcome h1 em { color: #657154; }
.spa-welcome-copy > p:not(.eyebrow) { margin: 27px 0 29px; max-width: 490px; font-size: 18px; line-height: 1.8; }
.spa-welcome-actions { display: flex; align-items: flex-start; flex-direction: column; gap: 12px; }
.spa-welcome-actions .text-link { min-height: 48px; }
.spa-welcome-photo { position: relative; margin: 0; min-height: 660px; overflow: hidden; }
.spa-welcome-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 51% center; }
.spa-welcome-photo figcaption { position: absolute; bottom: 23px; left: 26px; right: 26px; width: fit-content; background: #f8f5eef0; padding: 10px 16px; font: italic 25px/1.3 var(--serif); color: #334735; }
.spa-launch-label { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: 1.4px; color: #596448; margin-bottom: 24px; }
.spa-launch-label::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #687b51; }
.spa-signature-strip { padding: 22px; border-bottom: 1px solid #d8d8c9; display: flex; justify-content: center; align-items: center; gap: clamp(25px, 5vw, 80px); color: #5b644e; font-size: 14px; letter-spacing: .8px; }
.spa-signature-strip > span + span::before { content: '·'; margin-right: clamp(25px, 5vw, 80px); color: #8d7954; }
.spa-essence { text-align: center; max-width: 960px; padding-top: 94px; padding-bottom: 94px; }
.spa-essence h2, .spa-rituals h2, .spa-places h2, .spa-slow h2, .spa-invitation h2 { font-size: clamp(45px, 4.4vw, 64px); line-height: 1.08; letter-spacing: -.7px; }
.spa-essence h2 em, .spa-rituals h2 em, .spa-places h2 em, .spa-invitation h2 em { color: #6b755a; }
.spa-essence > p:not(.eyebrow) { font-size: 18px; line-height: 1.85; max-width: 740px; margin: 25px auto 0; }
.spa-essence .spa-sensory-line { color: #6e5b3a !important; font: italic 28px/1.5 var(--serif) !important; margin-top: 24px !important; }
.spa-rituals { padding-top: 80px; padding-bottom: 85px; background: var(--spa-moss); }
.spa-section-heading { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 60px; align-items: end; margin-bottom: 43px; }
.spa-section-heading .eyebrow { margin-bottom: 19px; }
.spa-section-heading > p { max-width: 440px; font-size: 17px; line-height: 1.8; padding-bottom: 3px; }
.spa-ritual-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.spa-ritual-card { min-width: 0; }
.spa-ritual-card > img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.spa-ritual-copy { padding-top: 24px; }
.spa-ritual-copy .eyebrow { font-size: 12px; letter-spacing: 1.15px; margin-bottom: 14px; }
.spa-ritual-copy h3 { font-size: clamp(33px, 3.2vw, 43px); line-height: 1.07; letter-spacing: -.5px; }
.spa-ritual-copy h3 em { color: #627153; }
.spa-ritual-copy > p:not(.eyebrow) { font-size: 17px; line-height: 1.8; margin: 20px 0 21px; }
.spa-ritual-copy .spa-moment { display: block; border-top: 1px solid #b9c1ac; padding-top: 18px; font: italic 23px/1.3 var(--serif); color: #536347; }
.spa-rituals .spa-image-note { font-size: 14px; line-height: 1.7; margin-top: 34px; max-width: 820px; }
.spa-places { padding-top: 90px; padding-bottom: 95px; }
.spa-place-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.spa-place-card { display: flex; flex-direction: column; min-width: 0; }
.spa-place-card > img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.spa-place-copy { padding: 25px 0 0; display: flex; flex: 1; flex-direction: column; }
.spa-place-copy .eyebrow { margin-bottom: 12px; font-size: 12px; letter-spacing: 1.1px; }
.spa-place-copy h3 { font-size: 36px; line-height: 1.15; letter-spacing: -.4px; }
.spa-place-copy > p:not(.eyebrow) { margin-top: 15px; font-size: 17px; line-height: 1.8; }
.spa-styling-note { display: block; margin-top: 12px; color: #62675c; font-size: 14px; line-height: 1.6; }
.spa-place-actions { margin-top: auto; padding-top: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.spa-place-actions .text-link { justify-content: space-between; width: 100%; gap: 12px; }
.spa-place-actions .spa-home-link { display: inline-flex; min-height: 44px; align-items: center; font-size: 15px; color: #646a5c; text-decoration: underline; text-underline-offset: 5px; }
.spa-slow { background: #344937; color: #f7f3e8; }
.spa-slow > .section-wrap { padding-top: 83px; padding-bottom: 83px; }
.spa-slow .eyebrow { color: #d5c5a5; }
.spa-slow h2 em { color: #d9c9a7; }
.home-spa-page .spa-slow p { color: #e0e5d9; }
.home-spa-page .spa-slow .eyebrow { color: #d5c5a5; }
.spa-slow ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px; list-style: none; margin: 0; padding: 0; }
.spa-slow li { border-top: 1px solid #83927a; padding-top: 24px; }
.spa-slow li > span { display: block; color: #d3c19d; font-size: 13px; letter-spacing: 1.5px; margin-bottom: 22px; }
.spa-slow li h3 { font-size: 32px; line-height: 1.15; }
.spa-slow li p { font-size: 17px; line-height: 1.8; margin-top: 15px; }
.spa-invitation { text-align: center; padding-top: 88px; padding-bottom: 86px; border-bottom: 1px solid var(--line); }
.spa-invitation .eyebrow { margin-bottom: 20px; }
.spa-invitation > p:not(.eyebrow) { margin: 24px auto 30px; max-width: 630px; font-size: 18px; line-height: 1.8; }
.home-spa-page main .contact p { color: #d0d7cd; }
.home-spa-page .contact .eyebrow { color: #d0b98b; }
.home-spa-page .contact h2 { font-size: clamp(46px, 4.9vw, 68px); }
.home-spa-page .contact-grid > div > p.contact-note { color: #d9c9a7; }

@media (min-width: 1600px) {
  .spa-welcome-copy { padding-left: 16%; }
}
@media (max-width: 1100px) {
  .spa-welcome-copy { padding: 48px 9% 48px 11%; }
  .spa-welcome h1 { font-size: 62px; }
  .spa-welcome-photo { min-height: 620px; }
  .spa-section-heading { gap: 35px; }
  .spa-ritual-cards, .spa-place-cards { gap: 22px; }
  .spa-place-copy h3 { font-size: 32px; }
  .spa-slow ol { gap: 28px; }
}
@media (max-width: 900px) {
  .spa-welcome-grid { grid-template-columns: 1fr; }
  .spa-welcome-copy { padding: 47px 5% 48px; }
  .spa-welcome h1 { font-size: clamp(57px, 8.5vw, 76px); }
  .spa-welcome-copy > p:not(.eyebrow) { max-width: 640px; }
  .spa-welcome-photo { min-height: 0; aspect-ratio: 16 / 9; }
  .spa-welcome-actions { flex-direction: row; align-items: center; gap: 28px; flex-wrap: wrap; }
  .spa-section-heading { grid-template-columns: 1fr; gap: 23px; margin-bottom: 34px; }
  .spa-section-heading > p { max-width: 650px; }
  .spa-ritual-cards { grid-template-columns: 1fr; gap: 38px; }
  .spa-ritual-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: start; }
  .spa-ritual-card > img { aspect-ratio: 1 / 1; }
  .spa-ritual-copy { padding-top: 0; }
  .spa-ritual-copy h3 { font-size: 40px; }
  .spa-place-cards { grid-template-columns: 1fr; gap: 37px; }
  .spa-place-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: start; }
  .spa-place-card > img { aspect-ratio: 1 / 1; }
  .spa-place-copy { padding-top: 0; }
  .spa-slow ol { grid-template-columns: 1fr; gap: 27px; }
  .spa-slow li { display: grid; grid-template-columns: 32px 1fr; gap: 17px; }
  .spa-slow li > span { margin: 4px 0 0; }
}
@media (max-width: 600px) {
  .spa-welcome-copy { padding: 33px 22px 38px; }
  .spa-welcome-copy .eyebrow { font-size: 12px; margin-bottom: 14px; letter-spacing: 1.5px; }
  .spa-welcome h1 { font-size: clamp(48px, 12.8vw, 69px); letter-spacing: -.9px; line-height: 1.05; }
  .spa-welcome-copy > p:not(.eyebrow) { font-size: 17px; line-height: 1.8; margin: 23px 0; }
  .spa-launch-label { margin-bottom: 17px; font-size: 12px; }
  .spa-welcome-actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
  .spa-welcome-actions .text-link { width: fit-content; }
  .spa-welcome-photo { order: -1; aspect-ratio: 4 / 3; max-height: 340px; }
  .spa-welcome-photo > img { object-position: center 57%; }
  .spa-welcome-photo figcaption { font-size: 21px; bottom: 16px; left: 22px; right: 22px; padding: 9px 13px; }
  .spa-signature-strip { flex-wrap: wrap; gap: 6px 19px; padding: 19px 18px; font-size: 13px; letter-spacing: 0; }
  .spa-signature-strip > span + span::before { margin-right: 19px; }
  .spa-essence, .spa-places, .spa-invitation { padding-top: 60px; padding-bottom: 60px; }
  .spa-essence h2, .spa-rituals h2, .spa-places h2, .spa-slow h2, .spa-invitation h2 { font-size: clamp(40px, 10.8vw, 51px); line-height: 1.1; letter-spacing: -.6px; }
  .spa-essence > p:not(.eyebrow), .spa-invitation > p:not(.eyebrow) { font-size: 17px; }
  .spa-essence .spa-sensory-line { font-size: 26px !important; }
  .spa-rituals { padding-top: 58px; padding-bottom: 58px; }
  .spa-ritual-cards { gap: 41px; }
  .spa-ritual-card, .spa-place-card { display: block; }
  .spa-ritual-card > img, .spa-place-card > img { aspect-ratio: 4 / 3; }
  .spa-ritual-copy, .spa-place-copy { padding-top: 24px; }
  .spa-ritual-copy h3 { font-size: 42px; }
  .spa-place-copy h3 { font-size: 36px; }
  .spa-ritual-copy > p:not(.eyebrow) { margin-top: 16px; }
  .spa-ritual-copy .spa-moment { padding-top: 15px; }
  .spa-place-actions { padding-top: 15px; }
  .spa-slow > .section-wrap { padding-top: 60px; padding-bottom: 60px; }
  .spa-slow li h3 { font-size: 31px; }
  .spa-invitation .button { width: 100%; }
  .home-spa-page .contact h2 { font-size: 49px; }
}
@media (max-width: 360px) {
  .spa-welcome-copy { padding-left: 18px; padding-right: 18px; }
  .spa-signature-strip { column-gap: 12px; }
  .spa-signature-strip > span + span::before { margin-right: 12px; }
}