/* ==========================================================
   BODY RENEWAL — design system
   Everything you might want to change (colors, fonts) is in
   the :root block directly below.
   ========================================================== */
:root{
  --ivory:#F8F3EA;        /* page background */
  --linen:#EFE7DA;        /* alternate sections */
  --champagne:#DCC9A3;    /* accents, highlights */
  --champagne-deep:#B99B63;
  --taupe:#6E6053;        /* secondary text (AA contrast on ivory) */
  --umber:#2F2822;        /* headings, buttons, footer */
  --text:#4A4037;         /* body text */
  --line:#DED2BF;         /* hairlines */
  --focus:#7A5A1E;

  --font-display:"Cormorant Garamond","Cormorant",Georgia,"Times New Roman",serif;
  --font-body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;

  --wrap:1180px;
  --gutter:clamp(20px,5vw,56px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ivory);color:var(--text);
  font-family:var(--font-body);font-size:1.0625rem;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
a{color:var(--umber);text-decoration-color:var(--champagne-deep);text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--umber)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-999px;top:8px;background:var(--umber);color:var(--ivory);padding:10px 16px;z-index:100}
.skip:focus{left:8px}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
.narrow{max-width:760px}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--font-display);color:var(--umber);font-weight:400;margin:0 0 .5em;letter-spacing:-.005em}
h1{font-size:clamp(2.75rem,6.2vw,4.9rem);line-height:1.02;font-weight:300}
h2{font-size:clamp(2rem,4vw,3.1rem);line-height:1.1;font-weight:300}
h3{font-size:1.65rem;line-height:1.2}
p{margin:0 0 1.15em;max-width:62ch}
.lede{font-family:var(--font-display);font-size:clamp(1.35rem,2.4vw,1.75rem);line-height:1.45;color:var(--umber);font-weight:400;max-width:34em}
.tagline{font-family:var(--font-display);font-style:italic;font-size:1.3rem;color:var(--taupe);margin:0 0 1.4rem}
.small{font-size:.9rem;color:var(--taupe)}

/* ---------- placeholders (impossible to miss) ---------- */
.todo{background:rgba(220,201,163,.5);outline:1px dashed #8d6f33;outline-offset:1px;padding:0 .3em;border-radius:2px;font-style:normal;color:var(--umber)}
.ph{
  background:
    radial-gradient(120% 80% at 30% 15%,rgba(255,255,255,.55),transparent 55%),
    linear-gradient(165deg,#EADFCC 0%,#D9C9AE 55%,#C8B491 100%);
  display:flex;align-items:flex-end;justify-content:center;padding:28px;text-align:center;
}
.ph .todo{font-size:.85rem;line-height:1.4}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(248,243,234,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:78px}
.brand{text-decoration:none;display:block;line-height:1}
.brand b{display:block;font-family:var(--font-display);font-weight:400;font-size:1.85rem;letter-spacing:.04em;color:var(--umber)}
.brand span{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:none;color:var(--taupe);margin-top:5px}
.nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
.nav a{text-decoration:none;font-size:.95rem;color:var(--text);padding:6px 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--champagne-deep);color:var(--umber)}
.nav .btn{border-bottom:0;color:var(--ivory)}
.menu-btn{display:none;background:none;border:1px solid var(--line);color:var(--umber);font:inherit;font-size:.95rem;padding:9px 16px;border-radius:999px;cursor:pointer}

@media (max-width:900px){
  .menu-btn{display:inline-block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--ivory);flex-direction:column;align-items:flex-start;gap:0;padding:12px var(--gutter) 28px;border-bottom:1px solid var(--line)}
  .nav.open{display:flex}
  .nav a{width:100%;padding:14px 0;border-bottom:1px solid var(--line);font-size:1.05rem}
  .nav .btn{margin-top:18px;width:auto;text-align:center;padding:14px 30px}
}

/* ---------- buttons ---------- */
.btn{display:inline-block;background:var(--umber);color:var(--ivory);text-decoration:none;font-size:.98rem;letter-spacing:.02em;padding:16px 34px;border-radius:999px;border:1px solid var(--umber);cursor:pointer;font-family:var(--font-body);transition:background .2s,color .2s}
.btn:hover{background:#463c33;color:var(--ivory)}
.btn.ghost{background:transparent;color:var(--umber);border-color:var(--taupe)}
.btn.ghost:hover{background:var(--umber);color:var(--ivory);border-color:var(--umber)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:2rem}

/* ---------- sections ---------- */
section{padding-block:clamp(64px,9vw,128px)}
.alt{background:var(--linen)}
.section-head{margin-bottom:clamp(36px,5vw,64px)}

/* ---------- hero ---------- */
.hero{padding-block:clamp(48px,7vw,104px) clamp(64px,8vw,112px)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,6vw,96px);align-items:center}
.hero h1{margin-bottom:.35em}
.hero .lede{margin-bottom:0}
.arch{border-radius:999px 999px 0 0;aspect-ratio:4/5;width:100%}
.hero-visual{position:relative}
.cred-note{position:absolute;left:-28px;bottom:36px;background:var(--ivory);border:1px solid var(--line);padding:18px 22px;max-width:260px;font-size:.92rem;line-height:1.5}
.cred-note strong{display:block;font-family:var(--font-display);font-weight:400;font-size:1.25rem;color:var(--umber);margin-bottom:2px}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{max-width:440px}
  .cred-note{left:12px;bottom:20px}
}

/* ---------- intro statement ---------- */
.statement{font-family:var(--font-display);font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1.3;color:var(--umber);font-weight:300;max-width:26em;margin:0}

/* ---------- service rows ---------- */
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:4fr 6fr 2fr;gap:clamp(16px,4vw,56px);padding-block:clamp(28px,4vw,48px);border-bottom:1px solid var(--line);align-items:start}
.row h3{margin:0}
.row p{margin:0;max-width:52ch}
.row .more{justify-self:end;white-space:nowrap}
@media (max-width:800px){
  .row{grid-template-columns:1fr}
  .row .more{justify-self:start}
}

/* ---------- credentials ---------- */
.creds{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,5vw,72px)}
.cred{border-top:1px solid var(--champagne-deep);padding-top:22px}
.cred .abbr{font-family:var(--font-display);font-size:clamp(3rem,6vw,4.6rem);line-height:1;color:var(--umber);font-weight:300;letter-spacing:.02em}
.cred p{margin:.6rem 0 0}
@media (max-width:700px){.creds{grid-template-columns:1fr}}

/* ---------- ordered steps (a true sequence) ---------- */
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px)}
.steps li{counter-increment:s;border-top:1px solid var(--line);padding-top:22px}
.steps li::before{content:counter(s);display:block;font-family:var(--font-display);font-size:2.4rem;color:var(--champagne-deep);line-height:1;margin-bottom:.7rem}
.steps h3{font-size:1.4rem}
.steps p{margin:0}
@media (max-width:800px){.steps{grid-template-columns:1fr}}

/* ---------- split feature ---------- */
.split{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,7vw,110px);align-items:center}
.split.flip{grid-template-columns:1.2fr .8fr}
.split .arch{max-width:420px}
@media (max-width:860px){.split,.split.flip{grid-template-columns:1fr}.split .arch{max-width:360px}}

/* ---------- CTA band ---------- */
.cta{background:var(--umber);color:#E9E1D3;text-align:left}
.cta h2{color:var(--ivory)}
.cta p{color:#E9E1D3}
.cta a:not(.btn){color:var(--champagne)}
.cta .btn{background:var(--champagne);color:var(--umber);border-color:var(--champagne)}
.cta .btn:hover{background:var(--ivory);border-color:var(--ivory);color:var(--umber)}
.cta .btn.ghost{background:transparent;color:var(--ivory);border-color:#8a7e70}
.cta .btn.ghost:hover{background:var(--ivory);color:var(--umber)}
.cta :focus-visible{outline-color:var(--champagne)}

/* ---------- page heads (inner pages) ---------- */
.page-head{padding-block:clamp(56px,8vw,112px) clamp(32px,4vw,56px)}
.page-head h1{max-width:14em}
.page-head .lede{margin-top:1.2rem}

/* ---------- prose / lists ---------- */
.prose h2{margin-top:2.2em;font-size:clamp(1.8rem,3.2vw,2.4rem)}
.prose h2:first-child{margin-top:0}
.prose ul,.prose ol{padding-left:1.2em;margin:0 0 1.4em;max-width:62ch}
.prose li{margin-bottom:.55em}
.prose li::marker{color:var(--champagne-deep)}
.note{border-left:2px solid var(--champagne-deep);background:var(--linen);padding:20px 24px;margin:2em 0;max-width:62ch}
.note p:last-child{margin-bottom:0}
.note strong{color:var(--umber)}
.alt .note{background:var(--ivory)}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,88px)}
@media (max-width:800px){.two-col{grid-template-columns:1fr}}

/* ---------- details / FAQ ---------- */
.faq{border-top:1px solid var(--line);max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:22px 44px 22px 0;font-family:var(--font-display);font-size:1.45rem;color:var(--umber);position:relative;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:18px;font-size:1.8rem;color:var(--champagne-deep);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .answer{padding:0 0 24px;max-width:62ch}
.faq .answer p:last-child{margin-bottom:0}
.faq-group{margin-bottom:clamp(40px,6vw,72px)}
.faq-group h2{font-size:clamp(1.7rem,3vw,2.2rem)}

/* ---------- price/info table ---------- */
.facts{width:100%;border-collapse:collapse;max-width:620px;margin:1.4em 0 2em}
.facts th,.facts td{text-align:left;padding:14px 0;border-bottom:1px solid var(--line);vertical-align:top;font-weight:400}
.facts th{width:38%;color:var(--taupe);padding-right:20px}

/* ---------- forms ---------- */
.form{max-width:620px}
.field{margin-bottom:22px}
.field label{display:block;font-size:.95rem;color:var(--umber);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;font:inherit;color:var(--umber);background:#FCFAF5;border:1px solid #BDAE98;border-radius:3px;padding:13px 14px}
.field textarea{min-height:160px;resize:vertical}
.field .hint{font-size:.88rem;color:var(--taupe);margin-top:6px}
.check{display:flex;gap:12px;align-items:flex-start;font-size:.95rem}
.check input{width:20px;height:20px;margin-top:3px;flex:none;accent-color:var(--umber)}
.hp{position:absolute;left:-9999px}
.warn{background:var(--linen);border:1px solid var(--line);padding:18px 22px;margin-bottom:28px;font-size:.95rem}
.warn strong{color:var(--umber)}

/* ---------- booking embed ---------- */
.embed{border:1px solid var(--line);background:#FCFAF5;min-height:420px;display:flex;align-items:center;justify-content:center;padding:32px;text-align:center}

/* ---------- footer ---------- */
.site-footer{background:var(--umber);color:#DDD3C3;padding-block:clamp(56px,7vw,88px) 32px;font-size:.96rem}
.site-footer a{color:#EFE7DA;text-decoration-color:#8a7e70}
.site-footer a:hover{text-decoration-color:var(--champagne)}
.site-footer :focus-visible{outline-color:var(--champagne)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(24px,4vw,56px)}
.foot-brand b{display:block;font-family:var(--font-display);font-weight:400;font-size:1.9rem;color:var(--ivory);letter-spacing:.04em}
.foot-brand p{margin:.5rem 0 0;color:#BFB4A3}
.site-footer h2{font-family:var(--font-body);font-size:.9rem;font-weight:600;letter-spacing:.06em;color:var(--champagne);margin:0 0 14px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:9px}
.site-footer .todo{color:var(--umber);background:var(--champagne);outline-color:var(--champagne)}
.legal{border-top:1px solid #4a4037;margin-top:48px;padding-top:24px;font-size:.86rem;color:#B5AA99;display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between}
.legal p{margin:0;max-width:60ch}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media print{.site-header,.site-footer,.cta{display:none}body{background:#fff}}

/* Approved photos: preserve original layout and modest hero dimensions */
.home-massage-photo{overflow:hidden;width:min(100%,330px);aspect-ratio:3/2;margin-inline:auto;background:#e8d9c7;border-radius:12px}
.home-massage-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 45%}
.therapist-portrait{overflow:hidden;background:#e8d9c7;align-self:start}
.therapist-portrait img{display:block;width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top}

/* Final homepage refinement: modestly larger image; credentials below image. */
.home-massage-photo{width:min(100%,420px)}
.hero-visual .cred-note{position:static;max-width:420px;width:fit-content;margin:12px auto 0;padding:9px 14px;font-size:.82rem;line-height:1.35;border-radius:4px}
.hero-visual .cred-note strong{font-size:1.06rem;margin-bottom:1px}
@media (max-width:900px){.hero-visual{max-width:480px;margin-inline:auto;width:100%}}

/* Approved Body Renewal brand logo */
.brand{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:240px;max-width:42vw}
.brand-logo{display:block;width:100%;height:110px;object-fit:contain;mix-blend-mode:multiply}
.brand span{font-size:.58rem;letter-spacing:.085em;text-align:center;margin-top:-5px;white-space:nowrap}
.bar{min-height:130px}
@media(max-width:900px){.brand{width:175px;max-width:58vw}.brand-logo{height:82px}.brand span{font-size:.46rem;letter-spacing:.03em}.bar{min-height:100px}}