/* Happy Place Lagos. Wellness, intentionally indulged. */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url(../fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jost-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/jost-latin-500-normal.woff2) format("woff2")}

:root{
  --olive:#455528; --olive-deep:#2F3A1B; --cream:#F5F2DF; --ivory:#F3EED8;
  --espresso:#383634; --gold:#B9AF7D; --apricot:#C87848; --card:#FFFDF5;
  --line:rgba(56,54,52,.12); --muted:#6E6A61;
  --serif:"Cormorant Garamond", Georgia, serif; --sans:"Jost", "Helvetica Neue", Arial, sans-serif;
  --radius:24px; --shadow:0 18px 40px -22px rgba(47,58,27,.35);
  --wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--espresso);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.08;margin:0;color:var(--espresso)}
h1{font-size:clamp(44px,7vw,86px);letter-spacing:-.5px}
h2{font-size:clamp(34px,4.6vw,56px)}
h3{font-size:26px}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.eyebrow{font-size:12.5px;letter-spacing:3.5px;text-transform:uppercase;color:var(--olive);font-weight:500;margin-bottom:14px;display:inline-flex;align-items:center;gap:10px}
.eyebrow:before{content:"";width:28px;height:1px;background:var(--gold)}
.lead{font-size:19px;color:var(--muted);max-width:620px}
.section{padding:96px 0}
.section.tight{padding:64px 0}
.center{text-align:center}.center .eyebrow{justify-content:center}.center .lead{margin-left:auto;margin-right:auto}
.italic{font-style:italic;font-weight:500}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;padding:15px 28px;font:500 15px/1 var(--sans);letter-spacing:1.6px;text-transform:uppercase;text-decoration:none;border:1.5px solid var(--olive);cursor:pointer;transition:.25s}
.btn-solid{background:var(--olive);color:var(--ivory)}
.btn-solid:hover{background:var(--olive-deep);border-color:var(--olive-deep)}
.btn-ghost{background:transparent;color:var(--olive)}
.btn-ghost:hover{background:var(--olive);color:var(--ivory)}
.btn-light{background:var(--ivory);color:var(--olive);border-color:var(--ivory)}
.btn-outline-light{background:transparent;color:var(--ivory);border-color:rgba(243,238,216,.7)}
.btn-outline-light:hover{background:var(--ivory);color:var(--olive)}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* Header */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .3s, box-shadow .3s}
.site-header .bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:78px}
.menu-btn{justify-self:start;background:none;border:0;cursor:pointer;display:flex;align-items:center;gap:12px;color:var(--espresso);font:500 13px var(--sans);letter-spacing:2.5px;text-transform:uppercase;padding:8px 0}
.menu-btn span.lines{width:26px;height:12px;position:relative}
.menu-btn span.lines:before,.menu-btn span.lines:after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor}
.menu-btn span.lines:before{top:0}.menu-btn span.lines:after{bottom:0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{height:42px;width:auto}
.brand b{font:600 22px/1 var(--serif);letter-spacing:3px;color:var(--olive)}
.brand small{display:block;font:500 9.5px/1 var(--sans);letter-spacing:4px;color:var(--olive);margin-top:4px}
.header-book{justify-self:end;padding:11px 20px;font-size:13px}
.site-header.solid{background:rgba(245,242,223,.96);backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--line)}
.site-header.on-dark:not(.solid) .menu-btn{color:var(--ivory)}
.site-header.on-dark:not(.solid) .brand b,.site-header.on-dark:not(.solid) .brand small{color:var(--ivory)}
.site-header.on-dark:not(.solid) .brand .logo-dark{display:none}
.site-header .brand .logo-light{display:none}
.site-header.on-dark:not(.solid) .brand .logo-light{display:block}
.site-header.on-dark:not(.solid) .header-book{background:transparent;border-color:rgba(243,238,216,.75);color:var(--ivory)}
.page-pad{padding-top:78px}

/* Menu overlay */
.menu{position:fixed;inset:0;z-index:80;background:var(--olive-deep);color:var(--ivory);display:flex;flex-direction:column;padding:28px 26px 40px;transform:translateY(-100%);transition:transform .45s cubic-bezier(.7,0,.2,1)}
.menu.open{transform:none}
.menu-top{display:flex;justify-content:space-between;align-items:center}
.menu-close{background:none;border:1px solid rgba(243,238,216,.4);color:var(--ivory);border-radius:999px;padding:9px 18px;font:500 13px var(--sans);letter-spacing:2px;text-transform:uppercase;cursor:pointer}
.menu nav{margin:auto 0;display:flex;flex-direction:column;gap:6px}
.menu nav a{font:500 clamp(40px,8vw,72px)/1.1 var(--serif);text-decoration:none;color:var(--ivory)}
.menu nav a:hover{color:var(--gold)}
.menu-foot{display:flex;flex-wrap:wrap;gap:12px 32px;font-size:15px;color:rgba(243,238,216,.75)}
.menu-foot a{text-decoration:none}

/* Hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--ivory);overflow:hidden;background:radial-gradient(120% 90% at 50% 30%, #5b6d36 0%, #3a4723 55%, #222b12 100%)}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(25,31,13,.45) 0%,rgba(25,31,13,.25) 40%,rgba(25,31,13,.7) 100%)}
.hero-leaf{position:absolute;opacity:.12;width:520px;right:-120px;bottom:-90px;transform:rotate(-18deg)}
.hero-inner{position:relative;z-index:2;max-width:860px;padding:120px 22px 90px}
.hero h1{color:var(--ivory)}
.hero p{font-size:19px;color:rgba(243,238,216,.88);max-width:560px;margin:22px auto 34px}
.hero .actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero .tag{font:500 13px var(--sans);letter-spacing:4px;text-transform:uppercase;color:rgba(243,238,216,.8);margin-bottom:20px}
.sound-btn{position:absolute;z-index:3;right:24px;bottom:28px;width:48px;height:48px;border-radius:50%;border:1px solid rgba(243,238,216,.5);background:rgba(25,31,13,.35);color:var(--ivory);display:none;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(6px)}
.sound-btn.show{display:flex}
.sound-btn svg{width:20px;height:20px}
.hero-foot{position:absolute;z-index:2;left:0;right:0;bottom:92px;display:flex;justify-content:center;gap:28px;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:rgba(243,238,216,.75)}

/* Story */
.story{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.story-visual{position:relative;aspect-ratio:4/5;border-radius:240px 240px var(--radius) var(--radius);overflow:hidden}
.ph{background:linear-gradient(160deg,#d9d3b4 0%,#b9af7d 45%,#7d8a55 100%);display:flex;align-items:flex-end;justify-content:flex-start;color:rgba(47,58,27,.65);font-size:12px;letter-spacing:2px;text-transform:uppercase;padding:18px;position:relative}
.ph img.leaf{position:absolute;width:55%;left:22%;top:18%;opacity:.25}
.story h2{margin-bottom:22px}
.story p{color:var(--muted)}
.signature{font:italic 500 26px var(--serif);color:var(--olive);margin-top:18px}

/* Treatments row */
.row-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:34px;flex-wrap:wrap}
.scroller{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(270px,1fr);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:thin}
.t-card{scroll-snap-align:start;background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.t-card .ph{aspect-ratio:4/3}
.t-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.t-body h3{font-size:25px}
.t-body p{color:var(--muted);font-size:15.5px;margin:0}
.t-meta{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:10px;border-top:1px solid var(--line);font-size:14px}
.t-meta b{color:var(--olive);font-weight:600;font-size:16px}
.add-btn{background:none;border:1.5px solid var(--olive);color:var(--olive);border-radius:999px;padding:8px 14px;font:500 12.5px var(--sans);letter-spacing:1.4px;text-transform:uppercase;cursor:pointer;transition:.2s}
.add-btn:hover,.add-btn.added{background:var(--olive);color:var(--ivory)}

/* Package band */
.band{background:var(--olive);color:var(--ivory);border-radius:36px;padding:64px;display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;position:relative;overflow:hidden}
.band h2,.band .eyebrow{color:var(--ivory)}.band .eyebrow:before{background:var(--gold)}
.band p{color:rgba(243,238,216,.82)}
.mock{background:var(--card);color:var(--espresso);border-radius:22px;padding:22px;box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.mock h4{margin:0 0 12px;font:600 22px var(--serif)}
.mock .li{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:15px}
.mock .li.muted{color:var(--muted)}
.mock .li.total{border:0;font-weight:600;font-size:16px}
.mock .pay{margin-top:12px;background:var(--olive);color:var(--ivory);text-align:center;border-radius:999px;padding:12px;font:500 13px var(--sans);letter-spacing:1.6px;text-transform:uppercase}

/* Feature cards (ADE style) */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.f-card{background:var(--card);border-radius:var(--radius);padding:30px 26px;box-shadow:var(--shadow)}
.f-icon{width:54px;height:54px;border-radius:50%;background:#E4E6CF;display:flex;align-items:center;justify-content:center;margin-bottom:18px;color:var(--olive)}
.f-icon svg{width:24px;height:24px}
.f-card h3{font-size:24px;margin-bottom:8px}
.f-card p{color:var(--muted);font-size:15.5px;margin:0}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:40px}
.step{border-top:1px solid var(--gold);padding-top:20px}
.step .word{font:italic 500 30px var(--serif);color:var(--olive);margin-bottom:8px}
.step p{color:var(--muted);font-size:15.5px;margin:0}

/* Reviews */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.r-card{background:var(--card);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.r-card .stars{color:var(--gold);letter-spacing:3px;margin-bottom:12px}
.r-card blockquote{margin:0 0 16px;font:italic 500 22px/1.35 var(--serif)}
.r-card cite{font-style:normal;font-size:14px;color:var(--muted)}
.review-cta{margin-top:28px}

/* CTA */
.cta{background:var(--ivory);border-radius:36px;padding:70px 30px;text-align:center;border:1px solid var(--line)}
.cta h2{margin-bottom:14px}

/* Footer */
.site-footer{background:var(--olive-deep);color:rgba(243,238,216,.8);padding:70px 0 120px;margin-top:96px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.site-footer h4{font:600 22px var(--serif);color:var(--ivory);margin:0 0 14px}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:var(--gold)}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.foot-brand img{height:64px;width:auto;margin-bottom:14px}
.foot-tag{font:italic 500 22px var(--serif);color:var(--ivory)}
.copy{margin-top:46px;padding-top:22px;border-top:1px solid rgba(243,238,216,.15);font-size:13.5px}

/* Floating buttons */
.float{position:fixed;right:18px;bottom:96px;z-index:60;display:flex;flex-direction:column;gap:10px}
.float a{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 24px -10px rgba(0,0,0,.4)}
.float .wa{background:var(--olive);color:var(--ivory)}
.float .call{background:var(--espresso);color:var(--ivory)}
.float svg{width:22px;height:22px}

/* Sticky booking bar */
.sticky{position:fixed;left:50%;transform:translateX(-50%);bottom:20px;z-index:60;background:var(--espresso);color:var(--ivory);border-radius:999px;padding:8px 8px 8px 24px;display:flex;align-items:center;gap:18px;box-shadow:0 18px 40px -18px rgba(0,0,0,.55);white-space:nowrap;cursor:pointer;border:0;font:inherit}
.sticky .count{font-size:14px;letter-spacing:1.2px;text-transform:uppercase}
.sticky .go{background:var(--ivory);color:var(--espresso);border-radius:999px;padding:11px 18px;font:500 13px var(--sans);letter-spacing:1.5px;text-transform:uppercase}

/* Package drawer */
.drawer-bg{position:fixed;inset:0;background:rgba(25,31,13,.45);z-index:90;opacity:0;pointer-events:none;transition:.3s}
.drawer-bg.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;z-index:95;top:0;right:0;height:100%;width:min(440px,100%);background:var(--cream);transform:translateX(100%);transition:transform .4s cubic-bezier(.7,0,.2,1);display:flex;flex-direction:column}
.drawer.open{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:24px 24px 16px;border-bottom:1px solid var(--line)}
.drawer-head h3{font-size:30px}
.x{background:none;border:1px solid var(--line);border-radius:50%;width:40px;height:40px;cursor:pointer;font-size:20px;color:var(--espresso)}
.drawer-body{padding:12px 24px;overflow:auto;flex:1}
.d-item{display:flex;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.d-item b{font-weight:500}
.d-item small{display:block;color:var(--muted)}
.d-item .rm{background:none;border:0;color:var(--apricot);cursor:pointer;font-size:13px;padding:0;margin-top:4px}
.d-empty{color:var(--muted);padding:30px 0;text-align:center}
.drawer-foot{padding:18px 24px 26px;border-top:1px solid var(--line);background:var(--card)}
.sum{display:flex;justify-content:space-between;font-size:15px;padding:3px 0}
.sum.big{font-size:18px;font-weight:600;color:var(--olive);padding-top:8px}
.sum.muted{color:var(--muted)}
.drawer-foot .btn{width:100%;margin-top:14px}

/* Option picker (bottom sheet) */
.sheet{position:fixed;z-index:96;left:50%;bottom:0;transform:translate(-50%,110%);width:min(560px,100%);background:var(--cream);border-radius:28px 28px 0 0;padding:22px 24px 30px;transition:transform .35s cubic-bezier(.7,0,.2,1);box-shadow:0 -20px 50px -20px rgba(0,0,0,.4)}
.sheet.open{transform:translate(-50%,0)}
.sheet .grab{width:44px;height:4px;border-radius:4px;background:var(--line);margin:0 auto 16px}
.sheet h3{font-size:30px;margin-bottom:6px}
.sheet p{color:var(--muted);font-size:15.5px}
.opt{display:flex;justify-content:space-between;align-items:center;width:100%;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin-top:10px;cursor:pointer;font:inherit;color:inherit;text-align:left}
.opt:hover{border-color:var(--olive)}
.opt b{color:var(--olive)}

/* Services page */
.cat{margin-bottom:70px}
.cat-head{margin-bottom:24px}
.menu-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.m-item{background:var(--card);border-radius:20px;padding:22px 24px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px}
.m-item h3{font-size:24px}
.m-item p{margin:0;color:var(--muted);font-size:15.5px}
.m-item .best{font-size:14px;color:var(--olive)}
.m-opts{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.m-opt{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:999px;padding:6px 6px 6px 16px;font-size:15px}
.m-opt b{color:var(--espresso);font-weight:600}
.note{background:var(--ivory);border-left:3px solid var(--gold);padding:14px 18px;border-radius:12px;color:var(--muted);font-size:15.5px}

/* Book page */
.book-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:34px;align-items:start}
.panel{background:var(--card);border-radius:28px;padding:32px;box-shadow:var(--shadow)}
.panel h3{margin-bottom:18px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--olive);font-weight:500}
.field input,.field textarea,.field select{font:inherit;font-size:16px;padding:13px 15px;border-radius:14px;border:1px solid var(--line);background:#fff;color:var(--espresso)}
.field input:focus,.field textarea:focus{outline:2px solid rgba(69,85,40,.35);border-color:var(--olive)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.check{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;margin:8px 0 18px}
.check input{width:20px;height:20px;margin-top:3px;accent-color:var(--olive)}
.status{font-size:15px;margin-top:12px;min-height:1.4em}
.status.error{color:#a3361e}
.sticky-panel{position:sticky;top:100px}
.empty-pack{color:var(--muted)}
.policy{font-size:14.5px;color:var(--muted);margin-top:16px}
.modal{position:fixed;inset:0;z-index:99;background:rgba(25,31,13,.5);display:none;align-items:center;justify-content:center;padding:20px}
.modal.show{display:flex}
.modal .panel{max-width:480px;text-align:center}

/* FAQ */
.faq{max-width:820px;margin:0 auto}
.faq details{background:var(--card);border-radius:18px;margin-bottom:12px;box-shadow:var(--shadow)}
.faq summary{cursor:pointer;list-style:none;padding:22px 26px;font:600 22px var(--serif);display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font:400 26px var(--sans);color:var(--olive)}
.faq details[open] summary:after{content:"\2212"}
.faq details p{padding:0 26px 22px;margin:0;color:var(--muted)}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}
.c-list{display:grid;gap:14px}
.c-row{display:flex;gap:16px;align-items:center;background:var(--card);border-radius:18px;padding:18px 20px;box-shadow:var(--shadow);text-decoration:none}
.c-row small{display:block;font-size:12.5px;letter-spacing:2px;text-transform:uppercase;color:var(--olive)}
.c-row span{font-size:17px}

.page-hero{padding:150px 0 50px;text-align:center}
.page-hero .lead{margin:16px auto 0}

/* Reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* Responsive */
@media (max-width:980px){
  .story,.band,.book-grid,.contact-grid{grid-template-columns:1fr}
  .grid-4,.steps{grid-template-columns:1fr 1fr}
  .reviews{grid-template-columns:1fr}
  .menu-list{grid-template-columns:1fr}
  .band{padding:40px 26px}
  .foot-grid{grid-template-columns:1fr}
  .sticky-panel{position:static}
}
@media (max-width:620px){
  body{font-size:16px}
  .section{padding:72px 0}
  .menu-btn .label{display:none}
  .brand img{height:36px}
  .brand b{font-size:18px;letter-spacing:2px}
  .header-book{padding:9px 14px;font-size:12px}
  .grid-4,.steps,.two{grid-template-columns:1fr}
  .panel{padding:24px 20px}
  .hero-foot{display:none}
  .float{bottom:92px;right:14px}
  .sticky{left:16px;right:16px;transform:none;justify-content:space-between}
}

/* Fixes */
[hidden]{display:none!important}
@media (max-width:980px){ .book-grid .sticky-panel{order:-1} }
@media (max-width:620px){
  .header-book{display:none}
  .site-header .bar{grid-template-columns:auto 1fr auto}
  .brand{justify-self:center}
  .sticky{padding:6px 6px 6px 18px;gap:10px}
  .sticky .count{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:12px;letter-spacing:.8px}
  .sticky .go{padding:10px 14px;font-size:12px;flex:none}
}
@media (max-width:620px){ .float .call{display:none} .float a{width:46px;height:46px} }

/* =====================================================================
   Happy Place: "Eucalyptus and Champagne" look (approved direction, 30 Oct 2026)
   Cool, fresh and light. Her army green (the logo colour) appears only in
   the logo and the signature line. Deep shades are kept for text only.
   ===================================================================== */
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-latin-600-normal.woff2) format("woff2")}

:root{
  /* palette */
  --pearl:#FAFBF8;        /* page background, faintly cool */
  --mist:#EDF4EF;         /* sage mist blocks */
  --aqua:#E3F0EC;         /* aqua mist blocks */
  --champ-tint:#F7F2E8;   /* warm pearl blocks, a little luxury warmth */
  --ink:#1F2B27;          /* text */
  --soft:#5E6C67;         /* secondary text */
  --teal:#367C6C;         /* eucalyptus: buttons and links */
  --teal-hover:#2C6B5D;
  --champ:#C2A56B;        /* champagne gold: hairlines, dots, stars */
  --army:#455528;         /* her brand green, used sparingly */

  /* map the base variables onto the new palette */
  --olive:var(--teal); --olive-deep:var(--teal-hover); --cream:var(--pearl); --ivory:#FFFFFF;
  --espresso:var(--ink); --gold:var(--champ); --apricot:#A85A40; --card:#FFFFFF;
  --line:rgba(31,43,39,.10); --muted:var(--soft);
  --serif:"Instrument Serif", Georgia, serif; --sans:"Inter", "Helvetica Neue", Arial, sans-serif;
  --radius:22px; --shadow:0 18px 40px -30px rgba(31,43,39,.30);
}

body{background:var(--pearl);color:var(--ink);font-family:var(--sans);font-size:16.5px;line-height:1.7}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;color:var(--ink);line-height:1.04}
h1{font-size:clamp(46px,6.6vw,88px)}
h2{font-size:clamp(34px,4.4vw,58px)}
h3{font-size:24px}
.italic{font-style:italic;font-weight:400;color:inherit}
.lead,.story p,.t-body p,.f-card p,.step p,.m-item p{color:var(--soft)}

.eyebrow{font:600 11.5px var(--sans);letter-spacing:2.6px;color:var(--soft)}
.eyebrow:before{width:7px;height:7px;border-radius:50%;background:var(--champ)}

/* Buttons */
.btn{border-radius:999px;text-transform:none;letter-spacing:0;font:600 15px/1 var(--sans);padding:16px 26px;border-width:1.5px;transition:background .2s,color .2s,border-color .2s}
.btn-solid{background:var(--teal);border-color:var(--teal);color:#fff}
.btn-solid:hover{background:var(--teal-hover);border-color:var(--teal-hover)}
.btn-solid:after,.btn-light:after{content:"";display:inline-block;flex:none;width:13px;height:13px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center/contain no-repeat}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{background:var(--teal);border-color:var(--teal);color:#fff}
.btn-light{background:#fff;border-color:#fff;color:var(--ink)}
.btn-light:hover{background:var(--teal);border-color:var(--teal);color:#fff}

/* Header */
.site-header.solid{background:rgba(250,251,248,.94);box-shadow:0 1px 0 var(--line)}
.brand b{font:600 17px/1 var(--sans);letter-spacing:3px;color:var(--ink)}
.brand small{color:var(--soft);font-weight:600}
.menu-btn{font-weight:600;letter-spacing:1.5px}
.header-book{padding:12px 20px;font-size:14px}
.site-header.on-dark:not(.solid) .header-book{background:#fff;color:var(--ink);border-color:#fff}

/* Menu: light, not dark */
.menu{background:var(--mist);color:var(--ink)}
.menu nav a{font-family:var(--serif);font-weight:400;color:var(--ink)}
.menu nav a:hover{color:var(--teal)}
.menu-close{border-color:var(--line);color:var(--ink)}
.menu-foot{color:var(--soft)}
.menu .brand b,.menu .brand small{color:var(--ink)}

/* Hero: the massage loop fills the whole background */
.hero{background:#cfd9d3}
.hero-leaf{display:none}
.hero video{object-fit:cover;object-position:50% 42%}
.hero:after{background:linear-gradient(180deg,rgba(16,32,28,.30) 0%,rgba(16,32,28,0) 28%,rgba(16,32,28,.06) 58%,rgba(16,32,28,.46) 100%)}
.hero-inner{padding-top:110px}
.hero .tag{font:600 12px var(--sans);letter-spacing:3px;color:rgba(255,255,255,.95)}
.hero h1{color:#fff;text-shadow:0 2px 26px rgba(0,0,0,.22)}
.hero p{color:rgba(255,255,255,.96);font-size:18px;text-shadow:0 1px 12px rgba(0,0,0,.3)}
.hero .btn-outline-light{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.75);color:#fff;backdrop-filter:blur(8px)}
.hero .btn-outline-light:hover{background:#fff;color:var(--ink)}
.hero-inner .hero-foot{position:static;margin-top:26px;justify-content:center;gap:22px;color:rgba(255,255,255,.94);font:600 11.5px var(--sans);letter-spacing:2.4px}
.hero-foot span{display:inline-flex;align-items:center;gap:8px}
.hero-foot span:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--champ)}

/* Story */
.story-visual{border-radius:var(--radius);aspect-ratio:4/5}
.story-visual img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.signature{font:italic 400 28px var(--serif);color:var(--army)}

/* Treatment cards: one photo per treatment */
.t-card{background:transparent;box-shadow:none;border-radius:var(--radius)}
.t-card .ph{aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--mist);padding:0}
.t-card .t-img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.t-card:hover .t-img{transform:scale(1.04)}
.t-body{padding:18px 4px 6px}
.t-body h3{font-size:24px}
.t-meta{border-top:1px solid var(--line)}
.t-meta b{color:var(--ink);font-size:17px}
.add-btn{border:1.5px solid var(--teal);color:var(--teal);font:600 12.5px var(--sans);letter-spacing:.3px;text-transform:none;padding:9px 16px}
.add-btn:hover,.add-btn.added{background:var(--teal);border-color:var(--teal);color:#fff}

/* Package band: cool aqua mist */
.band{background:linear-gradient(135deg,var(--aqua) 0%,var(--mist) 100%);color:var(--ink);border-radius:32px}
.band:before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;border:1px solid rgba(194,165,107,.45);right:-120px;top:-140px}
.band h2,.band .italic{color:var(--ink)}
.band .eyebrow{color:var(--soft)}
.band p{color:var(--soft)}
.band .btn-light{background:var(--teal);border-color:var(--teal);color:#fff}
.mock{border-radius:20px;box-shadow:0 30px 60px -36px rgba(31,43,39,.35)}
.mock .pay{background:var(--teal);font:600 14px var(--sans);letter-spacing:0;text-transform:none}

/* Steps */
.steps{counter-reset:s}
.step{border-top:1px solid rgba(194,165,107,.55);padding-top:22px}
.step:before{counter-increment:s;content:"0" counter(s);display:block;font:600 12px var(--sans);letter-spacing:2px;color:var(--teal);margin-bottom:10px}
.step .word{font:400 30px var(--serif);color:var(--ink)}

/* Feature cards */
.f-card{background:var(--mist);box-shadow:none}
.grid-4 .f-card:nth-child(even){background:var(--champ-tint)}
.f-icon{background:#fff;color:var(--teal)}

/* Reviews + CTA */
.r-card{background:#fff;box-shadow:none;border:1px solid var(--line)}
.r-card blockquote{font-family:var(--serif)}
.r-card .stars{color:var(--champ)}
.cta{background:url(../img/treatments/cta-relax.jpg) 70% 40%/cover;border:0;border-radius:32px;position:relative;overflow:hidden;padding:110px 30px}
.cta:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,32,28,.55),rgba(16,32,28,.18))}
.cta > *{position:relative}
.cta h2,.cta .italic{color:#fff}
.cta .lead{color:rgba(255,255,255,.94)}
.cta .eyebrow{color:rgba(255,255,255,.9)}
.cta .btn-solid{background:#fff;border-color:#fff;color:var(--ink)}
.cta .btn-solid:hover{background:var(--teal);border-color:var(--teal);color:#fff}

/* Inner pages */
.page-hero{background:linear-gradient(180deg,var(--aqua) 0%,var(--pearl) 100%);padding:150px 0 60px;margin-bottom:20px}
.cat-photo{border-radius:28px;overflow:hidden;aspect-ratio:21/8;margin-bottom:28px;background:var(--mist)}
.cat-photo .cat-img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.m-item{box-shadow:none;border:1px solid var(--line);flex-direction:row;gap:18px;align-items:flex-start}
.m-img{width:104px;height:104px;flex:none;border-radius:16px;object-fit:cover}
.m-text{display:flex;flex-direction:column;gap:8px;min-width:0}
.m-item .best{color:var(--teal)}
.note{background:var(--champ-tint);border-left-color:var(--champ)}
.panel,.faq details,.c-row{box-shadow:none;border:1px solid var(--line)}
.field label{color:var(--soft);font-weight:600;letter-spacing:1.2px;font-size:12px}
.faq summary{font:400 24px var(--serif)}
.faq summary:after{color:var(--teal)}
.c-row small{color:var(--soft);font-weight:600}

/* Footer: light */
.site-footer{background:var(--mist);color:var(--soft);border-top:1px solid rgba(194,165,107,.4)}
.site-footer h4{font:400 24px var(--serif);color:var(--ink)}
.site-footer a:hover{color:var(--teal)}
.foot-tag{font:italic 400 24px var(--serif);color:var(--army)}
.copy{border-top-color:var(--line)}

/* Floating buttons, sticky bar, drawer */
.sticky{background:rgba(255,255,255,.96);color:var(--ink);box-shadow:0 18px 40px -16px rgba(16,32,28,.35);backdrop-filter:blur(10px)}
.sticky .go{background:var(--teal);color:#fff;font:600 13px var(--sans);letter-spacing:.3px;text-transform:none}
.drawer-bg,.modal{background:rgba(16,32,28,.32)}
.drawer,.sheet{background:var(--pearl)}
.sum.big{color:var(--ink)}
.opt b{color:var(--teal)}
.field input:focus,.field textarea:focus{outline:2px solid rgba(54,124,108,.35);border-color:var(--teal)}
.check input{accent-color:var(--teal)}

@media (max-width:620px){
  .m-img{width:84px;height:84px;border-radius:14px}
  .cat-photo{aspect-ratio:16/10;border-radius:22px}
  .cta{padding:80px 22px}
}

/* The option sheet stays fully hidden while closed, so its shadow never peeks above the screen edge */
.sheet{visibility:hidden;transition:transform .35s cubic-bezier(.7,0,.2,1),visibility 0s linear .35s}
.sheet.open{visibility:visible;transition:transform .35s cubic-bezier(.7,0,.2,1),visibility 0s}
.m-opt{white-space:nowrap}
@media (max-width:620px){
  .m-item{display:block;padding:20px}
  .m-img{float:left;width:64px;height:64px;margin:4px 14px 8px 0;border-radius:14px}
  .m-text{display:block}
  .m-text h3{margin-bottom:6px}
  .m-text p{margin-bottom:8px}
  .m-opts{clear:both;padding-top:6px}
  .m-opt{width:100%;justify-content:space-between}
}

/* Steps: icons instead of numbers, joined by a fine gold line */
.steps{position:relative;text-align:center;counter-reset:none}
.steps:before{content:"";position:absolute;top:30px;left:12.5%;right:12.5%;height:1px;background:linear-gradient(90deg,rgba(194,165,107,0),rgba(194,165,107,.7) 12%,rgba(194,165,107,.7) 88%,rgba(194,165,107,0))}
.step{border-top:0;padding-top:0;position:relative}
.step:before{content:none!important}
.s-ic{width:60px;height:60px;border-radius:50%;background:#fff;border:1px solid rgba(194,165,107,.55);color:var(--teal);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;position:relative;z-index:1}
.s-ic svg{width:26px;height:26px}
.step p{max-width:240px;margin:0 auto}
@media (max-width:980px){.steps:before{display:none}}

/* Footer: contact as icons */
.talk{display:flex;gap:14px;margin-bottom:16px}
.talk-i{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:var(--ink)}
.talk-i .ic{width:54px;height:54px;border-radius:50%;background:#fff;border:1px solid rgba(194,165,107,.55);display:flex;align-items:center;justify-content:center;color:var(--teal);transition:background .2s,color .2s}
.talk-i:hover .ic{background:var(--teal);color:#fff;border-color:var(--teal)}
.talk-i .ic svg{width:22px;height:22px}
.talk-i small{font:600 11px var(--sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--soft)}
.talk-line{margin:0 0 6px;font-size:15px;display:flex;align-items:center;gap:8px}
.talk-line a{color:var(--ink);font-weight:600;letter-spacing:.3px}
.talk-line.muted{color:var(--soft)}
.ic-s svg{width:16px;height:16px;display:block;color:var(--champ)}

/* Contact page rows with icons */
.c-row{gap:16px}
.c-ic{width:46px;height:46px;flex:none;border-radius:50%;background:var(--mist);color:var(--teal);display:flex;align-items:center;justify-content:center}
.c-ic svg{width:21px;height:21px}

/* ===== Menu: a slide-in panel from the left (replaces the full-screen page) ===== */
.menu{inset:0 auto 0 0;width:min(440px,92vw);background:var(--pearl);color:var(--ink);padding:26px 30px 28px;transform:translateX(-104%);
  transition:transform .55s cubic-bezier(.22,1,.36,1);box-shadow:30px 0 80px -40px rgba(16,32,28,.45);border-radius:0 28px 28px 0;overflow-y:auto;z-index:95}
.menu.open{transform:none}
.menu-scrim{position:fixed;inset:0;z-index:90;background:rgba(16,32,28,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .4s}
.menu-scrim.open{opacity:1;pointer-events:auto}
.menu-top{margin-bottom:18px}
.menu-close{width:46px;height:46px;padding:0;border-radius:50%;border:1px solid var(--line);background:#fff;position:relative;transition:transform .35s,background .2s}
.menu-close span:before,.menu-close span:after{content:"";position:absolute;left:14px;right:14px;top:50%;height:1.5px;background:var(--ink)}
.menu-close span:before{transform:rotate(45deg)}.menu-close span:after{transform:rotate(-45deg)}
.menu-close:hover{transform:rotate(90deg);background:var(--mist)}
.menu nav{margin:6px 0 0;gap:0}
.menu nav a{display:flex;flex-direction:column;padding:13px 0 13px 0;border-bottom:1px solid var(--line);font:inherit;color:var(--ink);position:relative;
  opacity:0;transform:translateX(-18px);transition:opacity .45s, transform .45s, padding .3s}
.menu.open nav a{opacity:1;transform:none;transition-delay:calc(.12s + var(--i) * .06s)}
.menu nav a span{font:400 clamp(32px,4.2vw,40px)/1.05 var(--serif);letter-spacing:-.01em}
.menu nav a small{font:500 12.5px var(--sans);color:var(--soft);letter-spacing:.3px;margin-top:3px}
.menu nav a:before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;border-radius:50%;background:var(--champ);transform:translateY(-50%) scale(0);transition:transform .3s}
.menu nav a:hover,.menu nav a.current{padding-left:22px;color:var(--teal)}
.menu nav a:hover:before,.menu nav a.current:before{transform:translateY(-50%) scale(1)}
.menu-preview{margin:20px 0 18px;border-radius:20px;overflow:hidden;aspect-ratio:16/9;background:var(--mist)}
.menu-preview img{width:100%;height:100%;object-fit:cover;transition:opacity .16s,transform .6s}
.menu-preview img.swap{opacity:0;transform:scale(1.04)}
.menu-foot{display:flex;flex-direction:column;align-items:flex-start;gap:14px;color:var(--soft);font-size:14px;margin-top:auto}
.menu-foot p{margin:0}
.menu-foot .btn{width:100%}
.menu-icons{display:flex;gap:10px}
.menu-icons a{width:44px;height:44px;border-radius:50%;border:1px solid rgba(194,165,107,.55);background:#fff;color:var(--teal);display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.menu-icons a:hover{background:var(--teal);color:#fff}
.menu-icons svg{width:20px;height:20px}
@media (max-height:760px){.menu-preview{display:none}}

/* Hero breathing room now the paragraph is gone */
.hero h1{margin-bottom:34px}

/* Floating chat button: one soft round button, like a boutique concierge */
.float{gap:0}
.float a.chat{width:58px;height:58px;border-radius:50%;background:#A8906A;color:#fff;box-shadow:0 14px 30px -12px rgba(60,48,28,.55);transition:transform .25s ease,background .25s ease}
.float a.chat:hover{background:#957C55;transform:translateY(-2px)}
.float a.chat svg{width:26px;height:26px}
@media (max-width:620px){.float a.chat{width:54px;height:54px}.float a.chat svg{width:24px;height:24px}}
.float{bottom:24px}
body.has-sticky .float{bottom:96px}
@media (max-width:620px){.float{bottom:18px;right:14px}body.has-sticky .float{bottom:90px}}

/* Home treatment cards: whole card links to the price list, no prices shown */
.t-link{text-decoration:none;color:inherit;display:flex;flex-direction:column}
.t-link:hover h3{color:var(--teal)}
.t-more{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font:600 13px var(--sans);color:var(--teal)}
.t-more:after{content:"\2192\FE0E";transition:transform .2s}
.t-link:hover .t-more:after{transform:translateX(3px)}
.m-item,.cat{scroll-margin-top:110px}

/* Reviews: one quote at a time, centred, with dots (1 Nov 2026) */
.reviews.rv{display:block;max-width:860px;margin:40px auto 0;text-align:center}
.rv-track{display:grid}
.rv-slide{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility .7s ease}
.rv-slide.on{opacity:1;visibility:visible}
.rv-slide .stars{color:var(--champ);letter-spacing:5px;font-size:13px;margin-bottom:22px}
.rv-slide blockquote{margin:0 0 28px;font:400 clamp(21px,2.4vw,30px)/1.45 var(--serif);color:var(--ink)}
.rv-slide figcaption b{display:block;font:600 15px var(--sans);color:var(--ink)}
.rv-slide figcaption small{display:block;font:400 13px var(--sans);color:var(--soft);margin-top:4px}
.rv-dots{display:flex;justify-content:center;gap:4px;margin-top:30px}
.rv-dots button{width:26px;height:26px;padding:0;border:0;background:none;cursor:pointer;position:relative}
.rv-dots button:after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:rgba(31,43,39,.22);transition:background .3s,transform .3s}
.rv-dots button.on:after{background:var(--champ);transform:scale(1.3)}
/* Footer hours line: icon sits on the first line of text */
.talk-line.muted{align-items:flex-start;line-height:1.5}
.talk-line .ic-s{flex:none;margin-top:3px}
@media (min-width:901px){.talk-line.muted{white-space:nowrap}}

/* Her own taglines on the treatment menu (2 Nov 2026) */
.m-text .tagline{display:block;margin-top:8px;font:italic 400 17px/1.4 var(--serif);color:var(--army)}

/* =====================================================================
   Font change (5 Nov 2026): Cormorant Garamond headings + Manrope text,
   with tighter letter spacing on small capital labels. Option B, approved.
   ===================================================================== */
@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/manrope-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/manrope-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/manrope-latin-600-normal.woff2) format("woff2")}
:root{--serif:"Cormorant Garamond", Georgia, serif; --sans:"Manrope", "Helvetica Neue", Arial, sans-serif}
body{line-height:1.62}
/* Cormorant has a small x-height, so headings go up a little and use the solid 600 weight */
h1,h2,h3{font-weight:600;letter-spacing:-.005em;line-height:1.06}
h1{font-size:clamp(48px,7vw,94px)}
h2{font-size:clamp(36px,4.7vw,62px)}
h3{font-size:26px}
.t-body h3{font-size:26px}
.m-item h3{font-size:26px}
h1 .italic,h2 .italic,h3 .italic{font-weight:500}
.faq summary{font-weight:600;font-size:25px}
.site-footer h4{font-weight:600;font-size:25px}
.step .word{font-weight:600;font-size:31px}
.menu nav a span{font-weight:600}
.rv-slide blockquote{font-weight:500;font-size:clamp(22px,2.5vw,31px)}
.m-text .tagline{font-weight:500;font-size:18px}
.signature{font-weight:500;font-size:29px}
.foot-tag{font-weight:500;font-size:25px}
/* less "spacey": tighter tracking on the small capital labels */
.eyebrow{letter-spacing:1.6px}
.hero .tag{letter-spacing:2px}
.hero-inner .hero-foot{letter-spacing:1.5px}
.menu-btn{letter-spacing:1px}
.field label{letter-spacing:.8px}
.talk-i small{letter-spacing:1.1px}
.step:before{letter-spacing:1.4px}
.c-row small{letter-spacing:1.2px}

/* Story photo: her own photo arriving with the table (5 Nov 2026), cropped to 3:4 */
.story-visual{aspect-ratio:3/4}
.story-visual img{object-position:50% 50%}

/* Adding treatments without the package covering the page (5 Nov 2026) */
.add-btn.added{background:var(--teal);border-color:var(--teal);color:#fff}
.add-btn.added:hover{background:var(--teal-hover);border-color:var(--teal-hover)}
.drawer-foot .btn-ghost{margin-top:10px}
@keyframes hp-added{0%{box-shadow:0 0 0 0 rgba(54,124,108,.55),0 18px 40px -16px rgba(16,32,28,.35)}100%{box-shadow:0 0 0 16px rgba(54,124,108,0),0 18px 40px -16px rgba(16,32,28,.35)}}
.sticky.pulse{animation:hp-added .7s ease-out}

/* Story photo back to 4:5 for her new portrait (5 Nov 2026, evening) */
.story-visual{aspect-ratio:4/5}
.story-visual img{object-position:50% 30%}
/* Five contact icons (WhatsApp, Call, Email, Instagram, Facebook) must fit a phone footer */
.talk{flex-wrap:wrap;gap:12px 10px}
.talk-i{min-width:58px}
@media (max-width:620px){.talk-i .ic{width:48px;height:48px}.talk-i small{font-size:10px;letter-spacing:.6px}}