/* Cocoon Lux preview: the treatment template (wp/src/templates/wellness-treatment.html), shared by the 49 treatment
   pages (body class lux-wl) and, for its building blocks (hero, facts strip, split, hairline lists, FAQ, closing band),
   by the package, clinic and About templates. Editorial pass, 13 Oct 2026 (design/editorial/SPEC.md 5): the hero, six
   sections at most, the closing band. Mobile first; 768 the hero in two columns; 1024 the two-column sections.
   Every rule is scoped under .lux-wl; the shared classes (lux-pill, lux-frame, lux-wrap, lux-dark) are used as they are.
   No text under 16px, body 17px (18px from 768). Inside a section: heading to text 24px, text to a row 32px. */

.lux-wl .wl{color:var(--espresso)}
.lux-wl .wl-sec{padding:var(--sec) 0;scroll-margin-top:68px}
.lux-wl .wl-cream{background:var(--cream)}
.lux-wl .wl-h2{font-family:var(--serif);font-weight:400;font-size:32px;line-height:1.14;color:var(--espresso);text-wrap:balance}
.lux-wl .wl-h3{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.25;color:var(--espresso)}
.lux-wl .wl-p{margin:0 0 18px;font-size:17px;line-height:1.7;color:var(--bark);text-wrap:pretty}
.lux-wl .wl-p:last-child{margin-bottom:0}
.lux-wl .wl-inline{border-bottom:1px solid var(--gold-bright)}
.lux-wl .wl-head .wl-h2{margin-bottom:24px}
.lux-wl figcaption{margin-top:10px;font-size:16px;line-height:1.5;color:var(--umber)}
/* running text never wider than about 34em (SPEC 1.5), lists the same */
.lux-wl .wl-body .wl-p,.lux-wl .wl-body .wl-lines,.lux-wl .wl-body .wl-more,.lux-wl .wl-body .wl-steps,.lux-wl .wl-body .wl-rows{max-width:34em}

/* ---------- hero: breadcrumb, the photograph, then the words (phones); words beside the photograph from 768 ---------- */
.lux-wl .wl-hero{padding:var(--hc) 0 56px}
.lux-wl .wl-crumbs{padding-top:8px;margin-bottom:24px}
.lux-wl .wl-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;margin:0;padding:0;list-style:none;font-size:16px;line-height:1.5;color:var(--umber)}
.lux-wl .wl-crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--umber)}
.lux-wl .wl-crumbs a:hover{color:var(--espresso)}
.lux-wl .wl-crumbs [aria-current]{color:var(--espresso)}
.lux-wl .wl-hero__grid{display:flex;flex-direction:column}
.lux-wl .wl-hero__media{order:-1;width:100%;max-width:560px;margin:0 auto}
.lux-wl .wl-hero__photo{aspect-ratio:4/5;overflow:hidden;background:var(--img)}
.lux-wl .wl-hero__photo img{width:100%;height:100%;object-fit:cover}
.lux-wl .wl-hero__media figcaption{text-align:center}
.lux-wl .wl-hero__title{margin-top:32px;font-family:var(--serif);font-weight:400;font-size:42px;line-height:1.08;color:var(--espresso);text-wrap:balance}
.lux-wl .wl-hero__tagline{margin:18px 0 0;font-family:var(--serif);font-size:22px;line-height:1.4;color:var(--espresso);text-wrap:balance}
.lux-wl .wl-hero__lead{margin:16px 0 0;font-size:18px;line-height:1.65;color:var(--bark)}
/* the facts strip: label and value rows under hairlines */
.lux-wl .wl-facts{margin:28px 0 0;border-top:1px solid var(--line)}
.lux-wl .wl-facts>div{display:grid;grid-template-columns:minmax(0,7.5em) minmax(0,1fr);align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.lux-wl .wl-facts dt{font-size:16px;font-weight:500;line-height:1.4;color:var(--umber)}
.lux-wl .wl-facts dd{margin:0;font-size:17px;font-weight:500;line-height:1.45;color:var(--espresso);text-wrap:balance}
.lux-wl .wl-hero__actions{display:flex;flex-direction:column;gap:12px;margin-top:28px}
/* the buttons never fall under the 16px floor (base.css sets 15px) */
.lux-wl .wl-hero__actions .lux-pill,.lux-wl .wl-closing__actions .lux-pill{font-size:16px}

/* ---------- the two-column sections: heading left, text right from 1024; with a photograph, the heading and the
   text share the left column and the photograph is held on the right ---------- */
.lux-wl .wl-split--photo{display:flex;flex-direction:column}
.lux-wl .wl-split--photo .wl-head{order:1}
.lux-wl .wl-split--photo .wl-split__photo{order:2;margin:0 0 28px}
.lux-wl .wl-split--photo .wl-body{order:3}
.lux-wl .wl-photo{aspect-ratio:3/2}

/* ---------- hairline lists: the formula, the areas, who it suits, the prepare lines ---------- */
.lux-wl .wl-lines,.lux-wl .wl-suits__list{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.lux-wl .wl-lines li,.lux-wl .wl-suits__list li{padding:14px 0;border-bottom:1px solid var(--line);font-size:17px;line-height:1.55;color:var(--espresso)}
.lux-wl .wl-p+.wl-lines,.lux-wl .wl-p+.wl-suits__list{margin-top:32px}
.lux-wl .wl-lines+.wl-p,.lux-wl .wl-suits__list+.wl-p{margin-top:28px}
.lux-wl .wl-list__title{margin:32px 0 16px}
.lux-wl .wl-areas__name{display:block;font-weight:500}
.lux-wl .wl-areas__text{display:block;margin-top:4px;color:var(--bark)}

/* ---------- a closed row (Before and after your visit, Where it can be used): a hairline row with a chevron ---------- */
.lux-wl .wl-more{margin-top:32px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lux-wl .wl-more h3{margin:0;font:inherit}
.lux-wl .wl-more__btn{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;min-height:48px;margin:0;padding:12px 0;background:none;border:0;border-radius:0;cursor:pointer;text-align:left;font-family:var(--sans);font-size:17px;font-weight:500;line-height:1.4;color:var(--espresso)}
.lux-wl .wl-more__btn:hover>span:first-child{color:var(--gold-text)}
.lux-wl .wl-more__btn:focus-visible{outline:2px solid var(--gold-text);outline-offset:2px}
.lux-wl .wl-more__chev{position:relative;flex:none;width:22px;height:22px}
/* the open state moves the chevron 6px down inside the same transform as the turn: transform animates off the main thread, margin does not */
.lux-wl .wl-more__chev::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-8px 0 0 -5px;border-right:1px solid var(--gold-text);border-bottom:1px solid var(--gold-text);transform:translateY(0) rotate(45deg);transition:transform .25s var(--ease)}
.lux-wl .wl-more.is-on .wl-more__chev::before{transform:translateY(6px) rotate(225deg)}
.lux-wl .wl-more__body{padding:4px 0 8px}
.lux-wl .wl-more__body .wl-lines{border-top:0}
.lux-wl .wl-more__body .wl-lines li{border-bottom-color:var(--line-soft)}
.lux-wl .wl-more__body .wl-lines li:last-child{border-bottom:0}

/* ---------- the IV visit as three lines under plain numerals ---------- */
.lux-wl .wl-steps{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.lux-wl .wl-steps>li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;padding:24px 0;border-bottom:1px solid var(--line)}
.lux-wl .wl-steps__n{padding-top:3px;font-size:17px;font-weight:500;line-height:1.4;color:var(--umber);font-variant-numeric:lining-nums}
.lux-wl .wl-steps .wl-h3{margin:0 0 8px}
.lux-wl .wl-steps+.wl-more{border-top:0}

/* ---------- FAQ: every row closed on arrival, one open at a time with the script ---------- */
.lux-wl .wl-faq{border-top:1px solid var(--line-soft)}
.lux-wl .wl-faq__list{border-top:1px solid var(--line)}
.lux-wl .wl-qa{border-bottom:1px solid var(--line)}
.lux-wl .wl-qa h3{margin:0;font:inherit}
.lux-wl .wl-qa__btn{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;min-height:48px;margin:0;padding:20px 0;background:none;border:0;border-radius:0;cursor:pointer;text-align:left;font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.3;color:var(--espresso)}
.lux-wl .wl-qa__btn:hover>span:first-child{color:var(--gold-text)}
.lux-wl .wl-qa__btn:focus-visible{outline:2px solid var(--gold-text);outline-offset:2px}
.lux-wl .wl-pm{position:relative;flex:none;width:22px;height:22px}
.lux-wl .wl-pm::before,.lux-wl .wl-pm::after{content:"";position:absolute;left:50%;top:50%;width:58%;height:1.4px;margin:-.7px 0 0 -29%;border-radius:1px;background:var(--gold);transition:transform .25s var(--ease)}
.lux-wl .wl-pm::after{transform:rotate(90deg)}
.lux-wl .wl-qa.is-on .wl-pm::after{transform:rotate(0)}
.lux-wl .wl-qa__a p{padding:0 0 24px;font-size:17px;line-height:1.7;color:var(--bark)}
.lux-wl .wl-faq__more{margin-top:24px}

/* ---------- more: the related pages as rows of names, then the "All ..." link ---------- */
.lux-wl .wl-related{border-top:1px solid var(--line-soft)}
.lux-wl .wl-rows{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.lux-wl .wl-rows li{border-bottom:1px solid var(--line)}
.lux-wl .wl-row{position:relative;display:flex;align-items:center;min-height:64px;padding:14px 40px 14px 0;font-family:var(--serif);font-size:24px;line-height:1.25;color:var(--espresso);transition:color .3s}
.lux-wl .wl-row::after{content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;margin-top:-6px;border-top:1px solid var(--gold-text);border-right:1px solid var(--gold-text);transform:rotate(45deg);transition:transform .3s var(--ease)}
.lux-wl .wl-row:hover{color:var(--gold-text)}
.lux-wl .wl-row:hover::after{transform:translateX(4px) rotate(45deg)}
.lux-wl .wl-related__all{display:inline-flex;align-items:center;min-height:48px;margin-top:24px;font-size:16px;font-weight:500;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text)}
.lux-wl .wl-related__all:hover{color:var(--espresso)}

/* ---------- closing: the book label as the heading, the two buttons, the Ubud lounge beside them ---------- */
.lux-wl .wl-band{background:var(--espresso);color:var(--ivory)}
.lux-wl .wl-closing{padding:var(--sec) 0}
.lux-wl .wl-closing__grid{display:flex;flex-direction:column;gap:36px}
.lux-wl .wl-closing__title{margin:0 0 24px;font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.12;color:var(--ivory);text-wrap:balance}
.lux-wl .wl-closing__actions{display:flex;flex-direction:column;gap:12px}
.lux-wl .wl-closing__photo{margin:0}
.lux-wl .wl-closing__photo .lux-frame{aspect-ratio:4/3}

/* ---------- the About template's statement paragraph (kept here because its sheet builds on this one) ---------- */
.lux-wl .wl-results__lead{font-family:var(--serif);font-size:22px;line-height:1.5;color:var(--espresso)}

/* ---------- phones from 600: the phone layout in a centred column ---------- */
@media (min-width:600px) and (max-width:767.98px){
  .lux-wl .wl-hero .lux-wrap,.lux-wl .wl-sec>.lux-wrap,.lux-wl .wl-closing>.lux-wrap{max-width:592px}
}

/* ---------- tablet and desktop ---------- */
@media (min-width:768px){
  .lux-wl .wl-sec{scroll-margin-top:64px}
  .lux-wl .wl-h2{font-size:40px;line-height:1.12}
  .lux-wl .wl-h3{font-size:26px}
  .lux-wl .wl-p{margin-bottom:22px;font-size:18px}
  .lux-wl .wl-inline{transition:color .3s,border-color .3s}
  .lux-wl figcaption{margin-top:12px}

  .lux-wl .wl-hero{padding:calc(var(--hc) + 32px) 0 var(--sec)}
  .lux-wl .wl-crumbs{padding:0;margin-bottom:48px}
  .lux-wl .wl-crumbs ol{gap:10px;letter-spacing:.02em}
  .lux-wl .wl-crumbs a{display:inline;min-height:0}
  .lux-wl .wl-hero__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px;align-items:center}
  .lux-wl .wl-hero__media{order:0;max-width:none}
  .lux-wl .wl-hero__title{margin-top:0;font-size:clamp(48px,5vw,72px);line-height:1.04;letter-spacing:-.01em}
  .lux-wl .wl-hero__tagline{max-width:600px;margin-top:24px;font-size:clamp(23px,2vw,28px);line-height:1.35}
  .lux-wl .wl-hero__lead{max-width:600px;margin-top:22px;font-size:20px}
  .lux-wl .wl-facts{margin-top:36px}
  .lux-wl .wl-facts>div{grid-template-columns:minmax(0,9em) minmax(0,1fr);padding:14px 0}
  .lux-wl .wl-facts dd{font-size:18px}
  .lux-wl .wl-hero__actions{flex-direction:row;flex-wrap:wrap;gap:14px;margin-top:40px}
  .lux-wl .wl-hero__actions .lux-pill{width:auto;min-height:56px;padding:0 32px;letter-spacing:.12em}
  .lux-wl .wl-hero__actions .lux-pill--wa{padding:0 28px}

  .lux-wl .wl-lines li,.lux-wl .wl-suits__list li{font-size:18px}
  /* the IV formula in two columns: up to twelve short lines */
  .lux-wl .wl-formula{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
  .lux-wl .wl-more__btn{font-size:18px;padding:14px 0}
  .lux-wl .wl-steps>li{grid-template-columns:44px minmax(0,1fr);gap:16px;padding:28px 0}
  .lux-wl .wl-steps__n{font-size:18px}

  .lux-wl .wl-qa__btn{gap:24px;padding:24px 0;font-size:25px}
  .lux-wl .wl-qa__a p{max-width:34em;padding:0 64px 28px 0;font-size:18px}
  .lux-wl .wl-row{min-height:72px;padding:16px 48px 16px 0;font-size:26px}

  .lux-wl .wl-closing__grid{gap:48px}
  .lux-wl .wl-closing__title{margin-bottom:32px;font-size:clamp(42px,4.2vw,54px);line-height:1.1}
  .lux-wl .wl-closing__actions{flex-direction:row;flex-wrap:wrap;gap:14px}
  .lux-wl .wl-closing__actions .lux-pill{width:auto;min-height:56px;padding:0 32px;letter-spacing:.12em}
  .lux-wl .wl-closing__actions .lux-pill--wa{padding:0 30px}
  .lux-wl .wl-results__lead{font-size:26px}
}

/* ---------- desktop: the two-column sections ---------- */
@media (min-width:1024px){
  .lux-wl .wl-sec{scroll-margin-top:72px}
  .lux-wl .wl-h2{font-size:46px}
  .lux-wl .wl-hero{padding:calc(var(--hc) + 40px) 0 var(--sec)}
  .lux-wl .wl-crumbs{margin-bottom:56px}
  .lux-wl .wl-hero__grid{gap:88px}
  .lux-wl .wl-hero__text{max-width:34em}

  .lux-wl .wl-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:96px;align-items:start}
  .lux-wl .wl-head .wl-h2{margin-bottom:0}
  /* with a photograph: heading and text in the left column, the photograph in the right one, held while the text scrolls */
  .lux-wl .wl-split--photo{grid-template-columns:minmax(0,6fr) minmax(0,5fr);grid-template-rows:auto 1fr;gap:0 80px}
  .lux-wl .wl-split--photo .wl-head,.lux-wl .wl-split--photo .wl-body{grid-column:1;order:0}
  .lux-wl .wl-split--photo .wl-head .wl-h2{margin-bottom:28px}
  .lux-wl .wl-split--photo .wl-split__photo{grid-column:2;grid-row:1/span 2;order:0;margin:0}
  .lux-wl .wl-photo{aspect-ratio:4/5}

  .lux-wl .wl-faq__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:auto 1fr;grid-template-areas:"head list" "more list";column-gap:96px}
  .lux-wl .wl-faq__head{grid-area:head}
  .lux-wl .wl-faq__head .wl-h2{margin-bottom:24px}
  .lux-wl .wl-faq__list{grid-area:list;align-self:start}
  .lux-wl .wl-faq__more{grid-area:more;align-self:start;margin:0}
  .lux-wl .wl-qa__btn{min-height:44px;padding:26px 0;font-size:26px}

  /* the photograph keeps its 4:3 (a taller crop would draw the 640px file wider than it is, gen.CLOSE_SIZES) */
  .lux-wl .wl-closing__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:96px;align-items:center}
}
@media (min-width:1024px) and (min-height:860px){
  .lux-wl .wl-split--photo .wl-split__photo{position:sticky;top:calc(var(--hc) + 40px)}
}
@media (hover:hover){.lux-wl .wl-crumbs a{transition:color .3s}}