/* ==========================================================================
   REFINE LAYER   The Med Spa Wimberley   design pass, 28 September 2026
   Arbalest Solutions.

   Loaded by wp-content/mu-plugins/medspa-refine.php (handle medspa-refine,
   depends on divi-style, so it prints directly after style.css). Deleting
   medspa-refine.php reverts every rule here and refine.js with it. Nothing in
   style.css is edited.

   Cascade note: Divi prints et-critical-inline-css (the Customizer's a{} and
   h1-h6{} colours, #top-header uppercase) AFTER this file, and its parent
   inline CSS (.entry-content ul, blockquote, table) before it. Every rule
   below that fights Divi's Customizer wins on specificity, never on order.
   ========================================================================== */

/* 0. TOKENS ---------------------------------------------------------------- */
:root{
  --ms-rail-max:1180px;                                   /* the hero content line */
  --ms-rail-gutter:clamp(20px,5vw,64px);                  /* = every namespace --gutter */
  --ms-wrap:calc(var(--ms-rail-max) + 2 * var(--ms-rail-gutter)); /* padded box whose content is 1180 */
  --ms-rail:max(var(--ms-rail-gutter),calc((100% - var(--ms-rail-max)) / 2)); /* padding that puts content on the rail */
  --ms-surface:rgba(255,255,255,.62);                     /* the raised card ground already used on contact and About */
  --ms-error:#8A2E2E;                                     /* the form's existing error colour */
}


/* ==========================================================================
   1. P1  BRAND, TRUST AND ACCESS
   ========================================================================== */

/* 1a. Logo. Divi caps it at max-width:50% below 981px, which squeezed the
   800x196 lockup to 69x34 (aspect 2.04 instead of 4.08). Brand guide: never
   condense the logo. Height rules in style.css stay in charge. */
#page-container #main-header #logo{max-width:none!important;}

/* 1b. Prose links. Divi's Customizer link colour #BAC6A1 (1.62:1 on cream)
   reaches every unclassed link in body copy. Deep olive, underlined, the same
   treatment .ms-s-faq__a a and .ms-s-related a already use. */
.ms-h .ms-h-intro a:not([class]),
.ms-s .ms-s-intro a:not([class]),
.ms-s .ms-s-note a:not([class]),
.ms-m .ms-m-intro a:not([class]),
.ms-m .ms-m-note a:not([class]),
.ms-p .ms-p-intro a:not([class]),
.ms-lg .ms-lg-prose p a:not([class]){
  color:var(--ms-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
}
.ms-h .ms-h-intro a:not([class]):hover,.ms-h .ms-h-intro a:not([class]):focus-visible,
.ms-s .ms-s-intro a:not([class]):hover,.ms-s .ms-s-intro a:not([class]):focus-visible,
.ms-s .ms-s-note a:not([class]):hover,.ms-s .ms-s-note a:not([class]):focus-visible,
.ms-m .ms-m-intro a:not([class]):hover,.ms-m .ms-m-intro a:not([class]):focus-visible,
.ms-m .ms-m-note a:not([class]):hover,.ms-m .ms-m-note a:not([class]):focus-visible,
.ms-p .ms-p-intro a:not([class]):hover,.ms-p .ms-p-intro a:not([class]):focus-visible,
.ms-lg .ms-lg-prose p a:not([class]):hover,.ms-lg .ms-lg-prose p a:not([class]):focus-visible{
  color:var(--ms-ink);text-decoration-thickness:2px;
}
/* the same links on the three ink bands: sand at rest, white on hover (the 7 Sep dark-band treatment) */
.ms-h .ms-h-band .ms-h-intro a:not([class]),
.ms-m .ms-m-tent .ms-m-intro a:not([class]),
.ms-p .ms-p-shop .ms-p-intro a:not([class]){color:var(--ms-sand);}
.ms-h .ms-h-band .ms-h-intro a:not([class]):hover,.ms-h .ms-h-band .ms-h-intro a:not([class]):focus-visible,
.ms-m .ms-m-tent .ms-m-intro a:not([class]):hover,.ms-m .ms-m-tent .ms-m-intro a:not([class]):focus-visible,
.ms-p .ms-p-shop .ms-p-intro a:not([class]):hover,.ms-p .ms-p-shop .ms-p-intro a:not([class]):focus-visible{color:#fff;}

/* 1c. Sand notice panels (evaluation, consultation and credit-rule flags).
   Deep olive on sand is 3.76:1 and muted on sand 3.69:1; ink is 8.25:1.
   The bold lead-in becomes its own line instead of running into the sentence. */
.ms-s p.ms-s-note.ms-s-note--flag{color:var(--ms-ink);}
.ms-s .ms-s-note--flag a:not([class]){
  color:var(--ms-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
}
.ms-s .ms-s-note--flag a:not([class]):hover,
.ms-s .ms-s-note--flag a:not([class]):focus-visible{color:var(--ms-ink);text-decoration-thickness:2px;}
.ms-s .ms-s-note--flag strong{display:block;margin-bottom:var(--sp-2xs);}
/* only between a flag and the block after it; a flag that ends its section adds nothing to the section gap */
.ms-s .ms-s-sec[id] > .ms-s-note--flag:not(:last-child){margin-bottom:var(--sp-m);}

/* 1d. Mobile menu toggle. refine.js makes it a real button; this gives it a
   visible focus ring on the greige bar (ink, 6.37:1) and a close glyph when open. */
#page-container .mobile_menu_bar_toggle:focus-visible{outline:2px solid var(--ms-ink);outline-offset:3px;border-radius:2px;}
#page-container .mobile_nav.opened .mobile_menu_bar:before{content:"\4d";}

/* 1e. Memberships comparison table. Divi's .entry-content tr th/td (0,1,2)
   beat the authored padding and add #EEE rules and a frame; the nowrap plan
   column hid "Best for" off the edge from 761 to 960px. */
.ms-s .ms-mb-tablewrap table.ms-mb-table{border:0;margin:0;}
.ms-s .ms-mb-table th,.ms-s .ms-mb-table td{border-top:0;}
@media (min-width:761px){
  .ms-s .ms-mb-table th,.ms-s .ms-mb-table td{padding:16px 18px 16px 0;}
  .ms-s .ms-mb-table thead th{padding-bottom:12px;}
  .ms-s .ms-mb-table tbody th{padding-right:26px;}
}
@media (min-width:761px) and (max-width:1100px){
  .ms-s .ms-mb-table tbody th{white-space:normal;width:24%;}
}

/* 1f. Massage hero photograph (pairs with the post 2 markup swap). The hero
   box keeps the 3:4 frame the reception photo had, so desktop layout does not
   move; the tent band drops to one column only once its photo is removed. */
.ms-m .ms-m-hero__media picture{aspect-ratio:3/4;}
.ms-m .ms-m-hero__media img{height:100%;object-position:50% 38%;}
@media (max-width:1000px){ .ms-m .ms-m-hero__media picture{aspect-ratio:1/1;} }
/* the square tablet frame keeps the client and the therapist's hands in shot */
@media (min-width:681px) and (max-width:1000px){ .ms-m .ms-m-hero__media img{object-position:50% 75%;} }
@media (max-width:680px){ .ms-m .ms-m-hero__media picture{aspect-ratio:4/5;} }
.ms-m .ms-m-tent__inner:not(:has(.ms-m-tent__media)){grid-template-columns:minmax(0,1fr);}


/* ==========================================================================
   2. DIVI LEAKS INSIDE OWNED COMPONENTS
   ========================================================================== */

/* 2a. .entry-content ul{padding:0 0 23px 1em} (0,1,1) beats every authored
   ul padding:0 (0,1,0): rows sat 16px right of their own top rule with 23px
   of dead space under the last one. Add new classed lists here. */
.ms-h .ms-h-band__list,
.ms-s .ms-s-list,
.ms-a .ms-a-awards,
.ms-c .ms-c-hours__list{padding:0;}
/* Instagram strip: style.css states the same reset at 0,2,1; this guard keeps it if that block moves */
.ms-ig .ms-ig__grid{padding:0;list-style:none;}
.ms-r .ms-r-themes{padding:var(--sp-s) 0 0;} /* keeps air under the score card's top rule */
/* inside a bordered panel the list needs neither its own top rule nor a last-row rule */
.ms-s .ms-s-table .ms-s-list{border-top:0;}
.ms-s .ms-s-table .ms-s-list > .ms-s-item:last-child{border-bottom:0;padding-bottom:0;}
/* the last VISIBLE row when the services filter hides rows with [hidden] */
.ms-s .ms-s-table .ms-s-list > .ms-s-item:nth-last-child(1 of :not([hidden])){border-bottom:0;padding-bottom:0;}
/* two-up touch-up list: the whole last row, and a lone right item above an empty cell */
@media (min-width:760px){
  .ms-s .ms-s-table .ms-s-list--cols > .ms-s-item:nth-last-child(-n+2 of :not([hidden])){border-bottom:0;padding-bottom:0;}
}

/* 2b. Divi's stock blockquote{border-left:5px solid;padding-left:20px}
   painted a heavy bar inside every review card and the About mission quote.
   0,0,1, printed after Divi's parent inline CSS, so it wins on order and
   loses to every authored class (the About testimonial cards keep their
   32px padding and 1px edge). */
:where(.ms-h,.ms-a,.ms-r) blockquote{border-left:0;padding-left:0;}

/* 2c. Divi's Customizer heading colour #4C4C4C, a cool neutral, on the 36
   headings the 3 Sep heading-colour pass did not list. */
.ms-a .ms-a-name,
.ms-s .ms-s-mcard h3,
.ms-m .ms-m-card h3,
.ms-p .ms-p-card__body h3{color:var(--ms-ink);}

/* 2d. Aboreto ships one weight. Prices, figures and the two display quotes
   were asking for 500 or 600. */
.ms-h .ms-h-card__p,
.ms-s .ms-s-item__price,
.ms-s .ms-s-price,
.ms-s .ms-mb-price,
.ms-a .ms-a-stat__n,
.ms-a .ms-a-quote,
.ms-r .ms-r-score__n,
.ms-m .ms-m-row__p,
.ms-m .ms-m-row__m{font-weight:400;}


/* ==========================================================================
   3. ONE CONTENT RAIL
   Heroes, dark bands and closing CTAs put 1180px of content inside the
   gutter (x=130 at 1440). Sections put the gutter inside 1180px, so their
   content sat at x=194, 64px in. Every section now matches the hero line.
   Paragraphs keep --measure, so no line of prose gets longer.
   ========================================================================== */
.ms-h .ms-h-sec,
.ms-a .ms-a-story,.ms-a .ms-a-do,.ms-a .ms-a-team,.ms-a .ms-a-quotes,
.ms-r .ms-r-wall,.ms-r .ms-r-guest,
.ms-s .ms-s-sec,.ms-s .ms-s-faq,.ms-s .ms-s-filter,.ms-s .ms-s-sticky,
.ms-m .ms-m-sec,
.ms-p .ms-p-sec,
.ms-c .ms-c-cards,.ms-c .ms-c-hours,
.ms-nf .ms-nf-sec{max-width:var(--ms-wrap);}
.ms-photo.ms-photo--wide{max-width:var(--ms-wrap);}
/* Instagram strip (style.css block of 28 Sep, on home and About) */
:is(.ms-h,.ms-a) .ms-ig{max-width:var(--ms-wrap);}

/* home results: the gallery, note and Call button carried a second gutter */
.ms-h .ms-h-ba,
.ms-h .ms-h-sec#results .ms-h-actions{max-width:none;margin-left:0;margin-right:0;padding-left:0;padding-right:0;}
.ms-h .ms-h-sec#results .ms-h-actions{margin-top:var(--sp-m);}
.ms-h .ms-h-ba__note{max-width:var(--measure);margin:var(--sp-m) 0 0;padding:0;}

/* services: the pinned strip's hairline spans the content, not the padded box */
@media (min-width:1000px){
  .ms-s .ms-s-sticky{
    border-bottom:0;
    background:linear-gradient(var(--c-line),var(--c-line)) center bottom / calc(100% - 2 * var(--gutter)) 1px no-repeat,var(--c-ground);
  }
}
/* services: the no-results panel was a content-box 1308px wide, wider than the page */
.ms-s .ms-s-sticky + .ms-s-empty{
  box-sizing:border-box;width:calc(100% - 2 * var(--gutter));max-width:var(--maxw);
  margin-left:auto;margin-right:auto;padding:22px 24px;
}
.ms-s .ms-s-empty .ms-s-linkbtn{font-size:inherit;}

/* legal: the document shell joins the same line */
.ms-lg .ms-lg-body{max-width:var(--ms-wrap);padding-left:var(--ms-rail-gutter);padding-right:var(--ms-rail-gutter);}

/* header, top bar, open mobile menu and footer on the same line (was 120 / 144 at 1440) */
#page-container #main-header .container,
#page-container #top-header .container{
  width:auto!important;max-width:none!important;
  padding-left:var(--ms-rail)!important;padding-right:var(--ms-rail)!important;
}
@media (max-width:1200px){
  #page-container .et_mobile_menu > li > a{padding-left:var(--ms-rail)!important;padding-right:var(--ms-rail)!important;}
  #page-container .et_mobile_menu ul.sub-menu li a{padding-left:calc(var(--ms-rail) + 16px)!important;}
}
.ms-footer .ms-footer__inner,
.ms-footer-bottom .ms-footer-bottom__inner{max-width:none;padding-left:var(--ms-rail);padding-right:var(--ms-rail);}
/* small laptops: the rail padding narrowed the Treatments column until its labels wrapped */
@media (min-width:1025px) and (max-width:1240px){
  .ms-footer .ms-footer__inner{grid-template-columns:1.45fr minmax(max-content,.9fr) 1.25fr 1.15fr;column-gap:32px;}
}


/* ==========================================================================
   4. NAVIGATION AND KEYBOARD
   ========================================================================== */

/* 4a. Current page and hover. Deep olive on greige is 2.90:1, so the page you
   are on read as disabled; child pages marked nothing. Ink (6.37:1) plus a
   1px underline, the quietest mark that still says "you are here". */
#page-container #top-menu > li > a:hover,
#page-container #top-menu > li > a:focus-visible,
#page-container #top-menu > li.current-menu-item > a,
#page-container #top-menu > li.current-menu-ancestor > a{
  color:var(--ms-ink)!important;
  text-decoration:underline!important;text-decoration-thickness:1px!important;
  text-underline-offset:8px!important;text-decoration-color:var(--ms-deep)!important;
}
#page-container #top-menu li.menu-item-50653 > a,
#page-container #top-menu li.menu-item-50653 > a:hover,
#page-container #top-menu li.menu-item-50653 > a:focus-visible{text-decoration:none!important;}
#page-container .et_mobile_menu li.current-menu-item > a{box-shadow:inset 3px 0 0 var(--ms-olive)!important;}

/* 4b. Focus on the header: ink rings on greige (olive measured 1.84:1 there),
   the Book button reacts to focus exactly as to hover, and Divi's hidden
   search field leaves the tab order (its icon was removed on purpose). */
#page-container #main-header a:focus-visible{outline:2px solid var(--ms-ink)!important;outline-offset:3px!important;}
/* the ink top bar: its deep olive ring measured about 2:1 there; sand reads (the bar's own hover colour) */
#page-container #top-header a:focus-visible{outline:2px solid var(--ms-sand)!important;outline-offset:2px!important;}
#page-container #main-header #top-menu li.menu-item-50653 > a:focus-visible{
  background:var(--cta-bg-hover)!important;border-color:var(--cta-bg-hover)!important;color:var(--cta-fg)!important;
  outline:2px solid var(--ms-ink)!important;outline-offset:3px!important;
}
#page-container .et_search_outer{display:none!important;}
/* skip link, inserted by refine.js as the first element of <body> */
.ms-skip{
  position:absolute;left:16px;top:-100px;z-index:100000;
  display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:2px;
  background:var(--ms-ink);color:var(--ms-cream)!important;text-decoration:none;
  font:600 var(--fs-n1)/1 'Montserrat',Helvetica,Arial,sans-serif;letter-spacing:.02em;
}
.ms-skip:focus{top:12px;outline:2px solid var(--ms-sand);outline-offset:2px;}

/* 4c. Open phone menu. The panel no longer scroll-chains into the page, it
   follows the real visible height on iOS, and the Book row stays in view at
   the bottom of the panel. Child rows keep their olive rule marker (HEADER-v2).
   Order, labels and content unchanged. */
@media (max-width:1200px){
  #page-container .et_mobile_menu{overscroll-behavior:contain;}
  @supports (height:100dvh){
    #page-container .et_mobile_menu{max-height:calc(100dvh - 110px)!important;}
  }
}
@media (min-width:768px) and (max-width:1200px){
  @supports (height:100dvh){
    #page-container .et_mobile_menu{max-height:calc(100dvh - 150px)!important;}
  }
}
@media (max-width:767px){
  #page-container .et_mobile_menu li.menu-item-50653{position:sticky;bottom:0;z-index:1;box-shadow:0 -8px 18px rgba(42,46,36,.10);}
  /* a row reached by Tab scrolls clear of the pinned Book row (focus not obscured) */
  #page-container .et_mobile_menu{scroll-padding-bottom:56px;}
}

/* 4d. Top bar: Divi's Customizer forces it to capitals, so the address read
   INFO@THEMEDSPAWIMBERLEY.COM. refine.js makes the number a tel: link. */
#page-container #top-header,
#page-container #top-header a{text-transform:none!important;}
/* phones hide the address (style.css), but its link stayed in the tab order as an invisible stop */
@media (max-width:480px){
  #page-container #et-info a:has(#et-info-email){display:none!important;}
}


/* ==========================================================================
   5. STATES
   One state language (CTA-SYSTEM): darken plus a 2px lift, one focus ring,
   reduced motion removes the lift. No press transform is added.
   ========================================================================== */

/* 5a. Cards that are not links do not lift. Team, review, product and
   technique cards promised a click that went nowhere. */
@media (hover:hover) and (pointer:fine){
  .ms-a .ms-a-card:hover,
  .ms-r .ms-r-card:hover,
  .ms-p .ms-p-card:hover,
  .ms-m .ms-m-card:hover{--lift:0px;box-shadow:none;border-color:var(--c-line);}
}
.ms-a .ms-a-card,.ms-p .ms-p-card{will-change:auto;}

/* 5b. Touch: a tapped button no longer stays lifted (iOS keeps :hover after a tap). */
@media (hover:none){
  .ms-h-btn:hover,.ms-a-btn:hover,.ms-s-btn:hover,.ms-m-btn:hover,.ms-p-btn:hover,.ms-r-btn:hover,
  .ms-c-btn:hover,.ms-lg-btn:hover,.ms-btn:hover,.ms-s-item__book:hover,.ms-m-book:hover{transform:none!important;}
  .ms-ig .ms-ig__follow:hover{--lift:0px;box-shadow:0 2px 10px rgba(42,46,36,.12);}
}
/* the footer primary hovered to #4C5140 on ink (1.69:1); give it the dark-band edge */
.ms-footer .ms-btn:not(.ms-btn--ghost){border-color:rgba(255,254,248,.42)!important;}

/* 5c. Contact form: an invalid field says so after the visitor has touched
   it (nothing is red on arrival). Colour plus a doubled edge, so the state is
   not carried by colour alone. */
.ms-c .ms-cform input:user-invalid,
.ms-c .ms-cform textarea:user-invalid{border-color:var(--ms-error);box-shadow:inset 0 0 0 1px var(--ms-error),0 0 0 3px rgba(138,46,46,.12);}

/* 5d. Home ticker: focusable (post 50540 tabindex), so keyboard and tap can
   pause it through the existing :focus-within rule. */
.ms-h .ms-h-tick:focus-visible{outline:2px solid var(--c-olive);outline-offset:-2px;}


/* ==========================================================================
   6. TOUCH, WRAP AND THE MOBILE ACTION BAR
   ========================================================================== */

/* 6a. Phone numbers never break at a hyphen. */
a[href^="tel:"]{white-space:nowrap;}

/* 6b. Tap targets under 40px on phones, enlarged without moving the layout:
   vertical padding cancelled by an equal negative margin grows the hit area
   and leaves the line box where it was. */
@media (max-width:900px),(pointer:coarse){
  .ms-h .ms-h-link a{padding-top:12px;padding-bottom:12px;} /* inline: padding grows the hit area, not the line */
  .ms-m .ms-m-link,
  .ms-r .ms-r-more a{padding-top:12px;padding-bottom:12px;margin-top:-12px;margin-bottom:-12px;}
  .ms-h .ms-h-link--row{row-gap:var(--sp-m);}
  #page-container #main-header .logo_container a{display:block;padding:5px 0;margin:-5px 0;}
  #page-container #et-info a{padding-top:13px;padding-bottom:13px;}
}
@media (max-width:980px){
  .ms-lg .ms-lg-toc a{padding-top:12px;padding-bottom:12px;}
  .ms-lg .ms-lg-toc a:before{top:12px;}
}
.ms-lg .ms-lg-contact dd a{display:inline-block;padding:12px 0;margin:-12px 0;}
@media (max-width:900px){
  .ms-footer .ms-contact a,
  .ms-footer .ms-dir a,
  .ms-footer-bottom .ms-legal a{display:inline-block;padding:10px 0;margin:-10px 0;}
}

/* 6c. The pinned action bar. From 768 to 900px the header already carries
   Book Appointment beside the menu, so the bar keeps only Call: the pinned
   Call stays for the call-first services on tablets. */
@media (min-width:768px) and (max-width:900px){
  .ms-mbar{justify-content:center;}
  .ms-mbar .ms-btn:not(.ms-btn--ghost){display:none!important;}
  .ms-mbar .ms-btn--ghost{flex:0 1 360px;}
}
/* refine.js adds this while a closing action group (not the hero) is on screen */
@media (max-width:900px){
  .ms-mbar.is-ready.ms-mbar--aside{transform:translateY(105%);opacity:0;pointer-events:none;}
}


/* ==========================================================================
   7. HERO EDGES AND SEAMS
   ========================================================================== */

/* services, memberships, consultations: the hero stopped flush under the
   proof line (padding-bottom 0, a leftover from the old in-hero jump nav) */
.ms-s .ms-s-hero{padding-bottom:clamp(40px,5vw,64px);}
/* texture photos fade into the ground instead of ending in a straight line */
.ms-s .ms-s-hero .ms-herobg,
.ms-c .ms-c-hero .ms-herobg,
.ms-lg .ms-lg-hero .ms-herobg{
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent);
  mask-image:linear-gradient(180deg,#000 62%,transparent);
}
/* the fade must land on the page cream: the heroes' own bottom-left sand wash,
   always hidden under the opaque texture, would show through as a darker band
   with the same hard edge. The grain :before layer is untouched. */
.ms-c .ms-c-hero,
.ms-s .ms-s-hero{background:var(--c-ground);}
/* the legal hero's base is a greige to sand gradient that the washed texture
   already hides; the fade has to land on the page cream, not expose that base
   as a darker band with the same hard edge */
.ms-lg .ms-lg-hero{background:var(--ms-cream);}
/* its "Last updated" pill was cream on that base; on cream it needs the site's raised surface and hairline */
.ms-lg .ms-lg-hero p.ms-lg-updated{background:var(--ms-surface);box-shadow:inset 0 0 0 1px rgba(124,130,104,.24);}
/* 404: the bottom-left wash ended in a hard line; search field was pure white */
.ms-nf .ms-nf-hero{
  background:
    linear-gradient(180deg,rgba(247,243,234,0) 72%,var(--c-ground) 100%),
    radial-gradient(120% 90% at 88% 6%,rgba(178,177,154,.30) 0%,rgba(178,177,154,0) 58%),
    radial-gradient(90% 70% at 0% 100%,rgba(212,198,176,.32) 0%,rgba(212,198,176,0) 62%),
    var(--c-ground);
}
.ms-nf .ms-nf-search__input{background:rgba(255,255,255,.7);}
/* massage: an empty 84px cream strip and a floating rule between the ink tent band and the CTA */
.ms-m .ms-m-tent + .ms-m-cta{margin-top:0;border-top:0;}

/* 7b. About hero: the building's own "THE MED SPA" sign sat directly behind
   the H1 at desktop widths (text on text). The 16:9 photo has only 9px of
   slack in the 1440x801 hero, so object-position alone cannot move it; a
   zoom anchored bottom left does the same job and lifts the sign up and
   right, above the stats card, clear of the headline. The building stays
   whole and recognisable. From 901 to 1000px the hero is already stacked,
   so it takes the same vertical wash phones use below 901px. */
@media (min-width:1001px){
  .ms-a .ms-a-hero .ms-herobg img{transform:scale(1.3);transform-origin:0 100%;}
}
@media (min-width:901px) and (max-width:1000px){
  .ms-a .ms-a-hero .ms-herobg::after{
    background:linear-gradient(180deg,rgba(247,243,234,.94) 0%,rgba(247,243,234,.90) 48%,rgba(247,243,234,.84) 100%);
  }
}


/* ==========================================================================
   8. PROOF LINE: SEPARATORS THAT NEVER DANGLE
   Separators move to the leading edge of each item, and the one that starts
   a wrapped line falls inside a 15px strip the clip hides. The box keeps its
   width (the -15px on the left is returned on the right) and the last item
   gives back its new 15px lead, so every line breaks after the same item as
   before and every word sits at the same x. Phones (600px and below) keep
   their one-item-per-line layout untouched.
   ========================================================================== */
@media (min-width:601px){
  .ms-proof{margin-left:-15px;margin-right:15px;clip-path:inset(-6px -24px -6px 15px);}
  .ms-lg .ms-lg-prose .ms-proof{margin-left:-15px;margin-right:15px;}
  .ms-proof > span{border-right:0;margin-right:0;padding:0 14px;border-left:1px solid rgba(42,46,36,.18);}
  .ms-proof > span:last-child{margin-right:-15px;}
  .ms-proof > span.ms-proof__star{padding:0 6px 0 15px!important;border-left:0!important;}
  .ms-proof > .ms-proof__star + span{border-left:0;padding-left:0;}
}


/* ==========================================================================
   9. HOME
   ========================================================================== */

/* 9a. Treatment cards: where cards sit side by side, the price sits on its own
   line under the name, so every description in a row starts at the same
   height; nine cards as 3 x 3. One column keeps the name and price row. */
.ms-h .ms-h-card__p{font-size:var(--t-price-mixed);line-height:var(--lh-title);}
@media (min-width:681px){
  .ms-h .ms-h-card__top{flex-direction:column;align-items:flex-start;gap:var(--sp-3xs);}
  .ms-h .ms-h-card__p{margin-left:0;text-align:left;}
}
.ms-h .ms-h-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:1000px){
  .ms-h .ms-h-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ms-h .ms-h-grid > .ms-h-card:last-child:nth-child(odd){grid-column:1 / -1;}
}
@media (max-width:680px){ .ms-h .ms-h-grid{grid-template-columns:1fr;} }

/* 9b. Concern index: navigation, so hairline rows rather than a second
   boxed grid directly above the priced cards. Whole row stays the link. */
.ms-h .ms-h-concern__grid{column-gap:clamp(28px,4vw,56px);row-gap:0;}
.ms-h .ms-h-concern__card{
  background:transparent;border:0;border-top:1px solid var(--c-line);border-radius:0;
  padding:var(--sp-s) 0 var(--sp-m);box-shadow:none;
}
@media (hover:hover) and (pointer:fine){
  .ms-h .ms-h-concern__card:hover{--lift:0px;box-shadow:none;border-color:transparent;border-top-color:var(--c-olive);}
}

/* 9c. "Also offered" and "Retail" panels: their links share one baseline */
.ms-h .ms-h-more__col{display:flex;flex-direction:column;}
.ms-h .ms-h-more__col ul{margin-bottom:var(--sp-m);}
.ms-h .ms-h-more__col > p:last-child{margin-top:auto;}

/* 9d. Lip filler results: 2 x 2 on phones instead of four stacked squares */
@media (max-width:560px){
  .ms-h .ms-h-ba{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
}


/* ==========================================================================
   10. SERVICES MENU
   ========================================================================== */

/* 10a. The price rail. The leader was the last flex child, so it ran from the
   price to an empty right edge and 118 prices sat at 102 x positions. Leader
   between name and price, figures tabular, prices on one right edge. */
.ms-s .ms-s-item__top:after{order:1;}
.ms-s .ms-s-item__price{order:2;font-variant-numeric:tabular-nums;}
.ms-s .ms-s-price,.ms-s .ms-mb-price,.ms-s .ms-s-table dd{font-variant-numeric:tabular-nums;}

/* 10b. Laser hair removal: 48 short zone rows two up on wide screens (the
   touch-up list already does this). The whole last row loses its rule,
   counting only the rows the filter leaves visible. */
@media (min-width:1000px){
  .ms-s #lhr .ms-s-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;}
  .ms-s #lhr .ms-s-table .ms-s-list > .ms-s-item:nth-last-child(-n+2 of :not([hidden])){border-bottom:0;padding-bottom:0;}
}

/* 10c. Chip row: phones get their edge-to-edge scroll back (the late
   margin:0 reset cancelled it); laptops fade the row instead of cutting a chip */
@media (max-width:720px){
  .ms-s .ms-s-sticky .ms-s-chips{margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);}
}
@media (min-width:1000px) and (max-width:1239px){
  .ms-s .ms-s-sticky .ms-s-chip{padding:0 7px;} /* from about 1080px all eleven chips clear the fade; below, the row scrolls under it */
  .ms-s .ms-s-sticky .ms-s-chips{
    padding-right:32px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);
  }
}

/* 10d. Phones: rows with no description (laser hair zones, waxing, add-ons)
   stacked name, duration and a full-width Book at about 134px a row. The
   duration and a right-aligned Book now share one line (44px target and the
   call-first fill unchanged). Below 350px the stack returns. */
@media (min-width:350px) and (max-width:560px){
  .ms-s .ms-s-item:not(:has(.ms-s-item__d)) .ms-s-item__foot{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 12px;}
  .ms-s .ms-s-item:not(:has(.ms-s-item__d)) .ms-s-item__meta{margin:0;}
  .ms-s .ms-s-item:not(:has(.ms-s-item__d)) .ms-s-item__book{width:auto;flex:0 0 auto;margin:0 0 0 auto;}
}


/* ==========================================================================
   11. MEMBERSHIP PLANS AND PERKS  (memberships, services #member, consultations)
   ========================================================================== */

/* 11a. Plan cards. 30px was reserved for a badge no card carries; the :has
   guard restores it for the whole grid the day a badge returns. Subgrid keeps
   name, price, "per month", description and button level across a row.
   Seven cards: 4 + 3 centred, no empty cell. */
.ms-s .ms-s-mgrid:not(:has(.ms-s-flag)) .ms-s-mcard{padding-top:clamp(20px,2.2vw,26px);}
@supports (grid-template-rows:subgrid){
  /* explicit shrinkable column: the nowrap button must not set the card's min width */
  .ms-s .ms-s-mcard{display:grid;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);grid-row:span 5;row-gap:0;}
  .ms-s .ms-s-mcard .ms-s-perks__cta{align-self:end;}
}
@media (min-width:1001px){
  .ms-s .ms-s-mgrid{grid-template-columns:repeat(8,minmax(0,1fr));}
  .ms-s .ms-s-mcard{grid-column:span 2;}
}
/* centring counts only the cards the services filter leaves visible; own
   blocks, so an older browser drops only the centring */
@media (min-width:1001px){
  .ms-s .ms-s-mcard:nth-child(5 of :not([hidden])):nth-last-child(3 of :not([hidden])){grid-column:2 / span 2;}
}
@media (min-width:681px) and (max-width:1000px){
  .ms-s .ms-s-mcard:nth-last-child(1 of :not([hidden])):nth-child(odd of :not([hidden])){grid-column:1 / -1;justify-self:center;width:calc(50% - clamp(14px,1.8vw,20px) / 2);}
}

/* 11b. Perk panels written as note paragraphs (memberships, consultations):
   two columns instead of four short lines in a mostly empty box, and the
   panels that follow no longer butt against them. */
@media (min-width:681px){
  .ms-s .ms-s-perks:has(> .ms-s-note){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-s) var(--sp-l);}
  .ms-s .ms-s-perks > .ms-s-note{margin:0;max-width:none;}
  .ms-s .ms-s-perks > .ms-s-note:last-child:nth-child(odd){grid-column:1 / -1;max-width:var(--measure);}
}
.ms-s .ms-s-perks + .ms-s-note{margin-top:var(--sp-s);}
.ms-s .ms-s-perks + .ms-s-note--flag{padding-left:clamp(22px,2.6vw,30px);}
.ms-s .ms-s-note--flag + .ms-s-note{margin-top:var(--sp-m);}
.ms-s .ms-s-table + .ms-s-note{margin-top:var(--sp-m);}


/* ==========================================================================
   12. MASSAGE
   ========================================================================== */

/* 12a. Book buttons were 190px in a 177px track: 9px past the table rule and
   13px out of line with the Thai call button. The track now fits the button. */
@media (min-width:901px){
  .ms-m .ms-m-table__head,.ms-m .ms-m-row{grid-template-columns:minmax(0,1fr) 130px 130px 192px;}
  .ms-m .ms-m-row--solo{grid-template-columns:minmax(0,1fr) 130px 192px;}
  .ms-m .ms-m-book{width:100%;margin-left:0;}
}
/* call-first rows read as a different action, as on the services menu (pairs with the post 2 Thai row) */
.ms-m .ms-m-book--call{background:var(--ms-deep);border-color:var(--ms-deep);color:#fff!important;}
.ms-m .ms-m-book--call:hover,.ms-m .ms-m-book--call:focus-visible{background:#4C5140;border-color:#4C5140;color:#fff!important;}

/* 12b. Technique cards: titles and bodies level across each row */
@supports (grid-template-rows:subgrid){
  .ms-m .ms-m-card{display:grid;grid-template-rows:subgrid;grid-row:span 2;row-gap:0;}
}


/* ==========================================================================
   13. CONSULTATIONS
   ========================================================================== */

/* 13a. The page says consultations are booked by phone, and its own hero and
   closing panel make Call the filled button. The phone bar now agrees
   (refine.js also moves Call first in the DOM; order:-1 covers no JS). */
@media (max-width:767px){
  .page-id-51614 .ms-mbar .ms-btn--ghost{
    order:-1;background:var(--cta-bg)!important;border-color:var(--cta-bg)!important;color:var(--cta-fg)!important;
  }
  .page-id-51614 .ms-mbar .ms-btn:not(.ms-btn--ghost){
    background:transparent!important;border-color:var(--cta-ghost-border)!important;color:var(--ms-ink)!important;box-shadow:none!important;
  }
}
/* 768 to 900: the bar carries only Call (6c), so it takes the filled style too */
@media (min-width:768px) and (max-width:900px){
  .page-id-51614 .ms-mbar .ms-btn--ghost{background:var(--cta-bg)!important;border-color:var(--cta-bg)!important;color:var(--cta-fg)!important;}
}


/* ==========================================================================
   14. ABOUT AND REVIEWS
   ========================================================================== */

/* 14a. No orphan cells: the seventh team card centres at desktop; at tablet
   the odd last card centres at card width, "What we do" stays three across
   and the testimonials stack on the measure. */
@media (min-width:1001px){
  .ms-a .ms-a-grid > .ms-a-card:last-child:nth-child(3n+1){grid-column:2;}
}
@media (min-width:681px) and (max-width:1000px){
  .ms-a .ms-a-grid > .ms-a-card:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;width:calc(50% - clamp(16px,2vw,24px) / 2);}
  .ms-a .ms-a-do__grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .ms-a .ms-a-quotes__grid{grid-template-columns:1fr;max-width:var(--measure);}
}

/* 14b. Phones: owner and Medical Director get full-width portraits (they were
   capped at 240px under 312px staff photos); staff cards become compact rows. */
@media (max-width:680px){
  .ms-a .ms-a-lead__media{max-width:none;}
  .ms-a .ms-a-card{
    display:grid;grid-template-columns:96px minmax(0,1fr);
    grid-template-areas:"media name" "media role" "bio bio";
    column-gap:16px;align-items:start;
  }
  .ms-a .ms-a-card__media{grid-area:media;margin-bottom:var(--sp-s);}
  .ms-a .ms-a-card .ms-a-name{grid-area:name;align-self:end;}
  .ms-a .ms-a-card .ms-a-role{grid-area:role;margin-bottom:0;}
  .ms-a .ms-a-card .ms-a-bio{grid-area:bio;margin-top:var(--sp-xs);}
  .ms-a .ms-a-hero__stats{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* 14c. Team bios start level even when a role wraps to two lines */
@media (min-width:681px){
  .ms-a .ms-a-card .ms-a-role{min-height:calc(2em * var(--lh-label));}
}
/* narrow three-up rows: the longest role runs to three lines */
@media (min-width:1001px) and (max-width:1199px){
  .ms-a .ms-a-card .ms-a-role{min-height:calc(3em * var(--lh-label));}
}

/* 14d. "What we do": three columns under an olive rule, not a fifth family of boxed cards */
.ms-a .ms-a-do__col{padding:var(--sp-m) 0 0;background:none;border:0;border-top:1px solid var(--c-olive);border-radius:0;}

/* 14e. Lead portraits ride beside long bios instead of leaving a dead column */
@media (min-width:681px){
  .ms-a .ms-a-lead__media{position:sticky;top:96px;}
}

/* 14f. Reviews: theme pills centred like the rest of the score card on
   phones; the two guest book notes fill their row instead of leaving a
   blank third column */
@media (max-width:560px){ .ms-r .ms-r-themes{justify-content:center;} }
@media (min-width:1001px){ .ms-r .ms-r-guest__grid{grid-template-columns:repeat(2,minmax(0,1fr));} }


/* ==========================================================================
   15. PRODUCTS
   ========================================================================== */

/* 15a. Card footers pinned to the card floor; seven cards as 3 + 4 with no
   hole; the three large cards take the 3-up title size the tokens prescribe. */
.ms-p .ms-p-card__go,.ms-p .ms-p-card__instore{margin-top:auto;}
/* both footer types one line box tall, so their dividers share a line across a row */
.ms-p .ms-p-card__go{font-size:var(--t-label);line-height:var(--lh-label);}
.ms-p .ms-p-card__go a{line-height:var(--lh-label);}
.ms-p .ms-p-desc{margin-bottom:16px;}
.ms-p .ms-p-kicker{font-weight:600;}
@media (min-width:1001px){
  .ms-p .ms-p-grid{grid-template-columns:repeat(12,minmax(0,1fr));}
  .ms-p .ms-p-card{grid-column:span 4;}
  .ms-p .ms-p-card:nth-child(n+4){grid-column:span 3;}
  .ms-p .ms-p-card:nth-child(-n+3) .ms-p-card__body h3{font-size:var(--t-title);}
}
/* the narrowest four-up cards: every kicker stays on one line, so titles align */
@media (min-width:1001px) and (max-width:1099px){
  .ms-p .ms-p-card:nth-child(n+4) .ms-p-kicker{letter-spacing:.1em;}
}
@media (min-width:681px) and (max-width:1000px){
  .ms-p .ms-p-card:last-child:nth-child(odd){grid-column:1 / -1;flex-direction:row;}
  .ms-p .ms-p-card:last-child:nth-child(odd) .ms-p-card__media{flex:0 0 42%;border-bottom:0;border-right:1px solid var(--c-line);}
}

/* 15b. Packshots: white studio grounds take the page cream instead of seven
   pure-white boxes. Cream (not sand) so white packaging is barely tinted. */
.ms-p .ms-p-card__media{background:var(--ms-cream);}
.ms-p .ms-p-card__media img{mix-blend-mode:multiply;}


/* ==========================================================================
   16. CONTACT
   ========================================================================== */
/* nothing sits behind these cards to blur; pure repaint cost */
.ms-c .ms-c-card{-webkit-backdrop-filter:none;backdrop-filter:none;}


/* ==========================================================================
   17. LEGAL PAGES
   ========================================================================== */
/* 17a. The document column holds the measure, so panels and paragraphs share
   one right edge; panels join the site's surfaces and 2 to 3px radii. */
.ms-lg .ms-lg-prose{max-width:var(--measure);}
.ms-lg .ms-lg-callout{
  background:rgba(212,198,176,.16);border:1px solid rgba(124,130,104,.24);
  border-left:2px solid var(--ms-deep);border-radius:3px;padding:20px 24px;
}
.ms-lg .ms-lg-contact{background:var(--ms-surface);border-radius:3px;}
.ms-lg .ms-lg-toc a{border-radius:2px;}
/* cancellation terms: a hairline band, not three white tiles */
.ms-lg .ms-lg-terms{gap:0;padding:22px 0;border-top:1px solid rgba(124,130,104,.24);border-bottom:1px solid rgba(124,130,104,.24);}
.ms-lg .ms-lg-term{background:none;border:0;border-radius:0;padding:0 18px;}
.ms-lg .ms-lg-term + .ms-lg-term{border-left:1px solid rgba(124,130,104,.24);}
@media (max-width:620px){
  .ms-lg .ms-lg-terms{padding:6px 0;}
  .ms-lg .ms-lg-term{display:grid;grid-template-columns:5.5em minmax(0,1fr);align-items:baseline;gap:12px;text-align:left;padding:14px 0;}
  .ms-lg .ms-lg-term + .ms-lg-term{border-left:0;border-top:1px solid rgba(124,130,104,.18);}
  .ms-lg .ms-lg-term__n{margin:0;}
  .ms-lg .ms-lg-term__l{text-wrap:balance;}
}
/* 17b. Hero on the same left line as every other hero and the contents rail */
.ms-lg .ms-lg-hero{text-align:left;padding-left:var(--ms-rail-gutter);padding-right:var(--ms-rail-gutter);}
.ms-lg .ms-lg-hero__inner{max-width:var(--ms-rail-max);}
.ms-lg .ms-lg-lede{margin-left:0;margin-right:0;}


/* ==========================================================================
   18. FOOTER
   ========================================================================== */
/* one hover language: white and underlined, as Explore and the legal links already do */
.ms-footer ul:not(.ms-social) a:hover,
.ms-footer ul:not(.ms-social) a:focus-visible{color:#fff;text-decoration:underline;text-underline-offset:3px;}
/* phones: the two link lists run two across instead of fifteen single rows */
@media (max-width:600px){
  .ms-footer .ms-footer__col:nth-child(2) ul,
  .ms-footer .ms-flinks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;}
}
/* the map keeps style.css's greyscale-until-hover (4 Sep); only its fade respects reduced motion */
@media (prefers-reduced-motion:reduce){ .ms-footer .ms-map__frame iframe{transition:none;} }

/* ==========================================================================
   19. IN-TEXT LINKS ON THE PRODUCTS PAGE                          29 Sep 2026
   The intro and the closing note on /med-spa-products/ had never carried a link,
   so their new "complimentary consultation" links fell through to Divi's default
   link colour: pale sage, no underline, about 1.7:1 on cream. Same treatment as
   every other in-text link on the site (style.css, the .ms-*-related rule).
   ========================================================================== */
.ms-p-lede a,.ms-p-note a{
  color:var(--c-deep,#5D624E);
  font-weight:500;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.ms-p-lede a:hover,.ms-p-note a:hover,
.ms-p-lede a:focus-visible,.ms-p-note a:focus-visible{
  color:var(--c-ink,#2A2E24);
  text-decoration-thickness:2px;
}