/* 07 — MAISON SEREIN / med spa
   Blush clay, warm taupe ink, italic Playfair. */

body.spa{
  --bg:#f5eee9; --ink:#56473f;
  --accent:#8d7566; --accent-ink:#fff;
  --line:rgba(86,71,63,.2);
  --soft:rgba(86,71,63,.66);
  --panel:#e6d8cf;
  --inv-bg:#56473f; --inv-ink:#f5eee9;
  --display:'Playfair Display',serif;
  --nav-bg:#f5eee9;
  --radius:3px;
  background:#f5eee9;color:#56473f;font-family:'Manrope',sans-serif;
}

.spa .dh,.spa .dh-sm,.spa .cta h2,.spa .phero h1{font-weight:500}
.spa em,.spa i{font-style:italic}

/* header */
.spa .nav{padding:22px 4vw;display:flex;justify-content:space-between;align-items:center}
.spa .logo{font:30px 'Playfair Display';font-style:italic}

/* hero */
.spa .hero{min-height:760px;display:grid;grid-template-columns:1fr 1fr}
.spa .hero-copy{padding:14vh 4vw 8vh;align-self:center}
.spa .hero h1{font:clamp(58px,7.5vw,110px)/.95 'Playfair Display';font-weight:500;margin:22px 0}
.spa .hero-copy p{max-width:440px;line-height:1.75;margin-bottom:34px}
.spa .hero-img{margin:2vw;height:700px;border-radius:220px 220px 0 0;overflow:hidden}

/* treatment cards */
.spa .treatment{background:var(--panel);padding:34px;min-height:250px;display:flex;flex-direction:column;transition:.35s;border-radius:3px}
.spa .treatment:hover{transform:translateY(-5px)}
.spa .treatment span{font:11px 'DM Mono';letter-spacing:.1em}
.spa .treatment h3{font:32px 'Playfair Display';font-weight:500;margin-top:auto;padding-top:44px}
.spa .treatment p{margin-top:10px;color:var(--soft);font-size:15px}
.spa .sec-inv .treatment{background:#66564c}

/* treatment detail rows */
.spa .trow{display:grid;grid-template-columns:1fr auto;gap:24px;padding:28px 0;border-bottom:1px solid var(--line);align-items:baseline}
.spa .trow h3{font:27px 'Playfair Display';font-weight:500}
.spa .trow p{color:var(--soft);font-size:15px;line-height:1.7;margin-top:9px;max-width:640px}
.spa .trow .meta{text-align:right;white-space:normal;font-size:15px;min-width:0}
.spa .trow .meta strong{display:block;font:22px 'Playfair Display';font-weight:500}

/* arch image */
.spa .arch{border-radius:200px 200px 0 0;overflow:hidden}

@media(max-width:820px){
  .spa .hero{grid-template-columns:1fr;min-height:auto}
  .spa .hero-copy{padding:8vh 4vw 5vh}
  .spa .hero h1{font-size:clamp(42px,12vw,88px);overflow-wrap:anywhere}
  .spa .hero-img{height:min(480px,70vw);border-radius:160px 160px 0 0}
  .spa .trow{grid-template-columns:1fr}
  .spa .trow .meta{text-align:left}
  .spa .trow h3{overflow-wrap:anywhere}
}