/*
Theme Name: Skinovatio
Theme URI: https://www.skinovatio.com/
Author: UPRYT
Author URI: https://upryt.io/
Description: The Skinovatio brand family theme. One skeleton for Arlington Heights and Lincoln Park, Instrument Serif and Inter self-hosted, schema built in. Design of record: the September 2026 Vercel build.
Version: 2.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: Proprietary
Text Domain: skinovatio
*/

/* ---------- Reset (low specificity so component rules always win) ---------- */
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(html) { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
:where(body) { margin: 0; }
:where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol) { margin: 0; }
:where(ul[class], ol[class]) { list-style: none; padding: 0; }
:where(img, svg, video, iframe) { display: block; max-width: 100%; height: auto; }
:where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(a) { color: inherit; }
:where(table) { border-collapse: collapse; width: 100%; }
:where(summary) { list-style: none; cursor: pointer; }
:where(summary::-webkit-details-marker) { display: none; }

/* ---------- Base ---------- */
html { font-size: 100%; }
body {
  background: var(--sk-bg);
  color: var(--sk-ink);
  font-family: var(--sk-font-body);
  font-size: var(--sk-body-size);
  line-height: var(--sk-body-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}
a { color: var(--sk-accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { color: var(--sk-accent-hover); }
:focus-visible { outline: 2px solid var(--sk-accent); outline-offset: 2px; }
::selection { background: var(--sk-accent-soft); color: var(--sk-ink); }
strong { font-weight: 600; }
em { font-style: italic; }
hr { border: 0; border-top: 1px solid var(--sk-line); margin: 32px 0; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }
.sk-skip { position: absolute; left: -999px; top: 8px; background: var(--sk-accent); color: var(--sk-ink-on-dark); padding: 8px 12px; z-index: 100; border-radius: 6px; }
.sk-skip:focus { left: 8px; }

h1, h2, h3, .sk-hero__title, .sk-band__heading { font-family: var(--sk-font-display); font-weight: 400; letter-spacing: 0; text-wrap: balance; }
h1 { font-size: clamp(40px, 2.6vw + 24px, 60px); line-height: 1.03; }
h2 { font-size: clamp(34px, 1.9vw + 22px, 44px); line-height: 1.05; }
h3 { font-size: clamp(24px, 0.6vw + 20px, 28px); line-height: 1.15; font-weight: 400; }
h4 { font-family: var(--sk-font-body); font-weight: 600; font-size: 17px; line-height: 1.3; }
.sk-display { font-size: clamp(52px, 4vw + 28px, 80px); line-height: 0.95; letter-spacing: var(--sk-display-track); }
.sk-h2-large, .sk-section__heading { font-size: clamp(44px, 2.4vw + 26px, 56px); line-height: 1.02; }
.sk-label { font-family: var(--sk-font-body); font-weight: 600; font-size: 12px; line-height: 1.2; letter-spacing: var(--sk-label-track); text-transform: uppercase; color: var(--sk-mushroom); margin: 0 0 12px; }
.sk-eyebrow { font-family: var(--sk-font-body); font-weight: 500; font-size: 12px; letter-spacing: var(--sk-label-track); text-transform: uppercase; color: var(--sk-accent-text); margin: 0 0 12px; }
.sk-small { font-size: 14px; line-height: 1.5; color: var(--sk-ink-2); }
.sk-muted { color: var(--sk-ink-2); }
.sk-intro, .sk-hero__intro { font-size: 18px; line-height: 1.55; color: var(--sk-ink-2); max-width: 58ch; }

/* ---------- Layout ---------- */
.sk-container { width: 100%; max-width: 1400px; margin-inline: auto; padding-inline: 32px; }
.sk-column { max-width: 768px; margin-inline: auto; }
.sk-section { padding-block: var(--sk-section); }
.sk-section--tight { padding-block: 64px; }

.sk-grid { display: grid; gap: 24px; }
.sk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sk-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sk-main { display: block; min-height: 50vh; }

/* ---------- Header ---------- */
.sk-header { position: sticky; top: 0; z-index: 50; background: transparent; border-bottom: 1px solid transparent; transition: background-color 300ms ease, border-color 300ms ease; }
.sk-header.is-scrolled { background: rgba(250, 249, 246, 0.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom-color: var(--sk-line); }
body.sk-nav-open .sk-header, body.sk-nav-open .sk-header.is-scrolled { background: var(--sk-bg); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: var(--sk-line); }
.sk-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--sk-header-h); }
.sk-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--sk-ink); }
.sk-logo__mark { width: 40px; height: auto; flex: 0 0 auto; }
.sk-logo__img { display: block; height: 46px; width: auto; max-width: 100%; flex: 0 0 auto; }
.sk-logo__loc { position: relative; padding-left: 13px; font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sk-ink-2); white-space: nowrap; }
.sk-logo__loc::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 24px; background: var(--sk-line-strong); }
.sk-footer .sk-logo__loc { color: var(--sk-accent-soft); }
.sk-footer .sk-logo__loc::before { background: rgba(255, 255, 255, 0.25); }
@media (max-width: 700px) { .sk-logo__img { height: 38px; } .sk-logo__loc { font-size: 9px; padding-left: 10px; } .sk-logo__loc::before { height: 19px; } }
@media (max-width: 430px) { .sk-logo__loc { display: none; } }
.sk-logo__text { display: flex; flex-direction: column; line-height: 1; }
.sk-logo__brand { font-family: var(--sk-font-display); font-size: 24px; letter-spacing: 0.06em; text-transform: uppercase; }
.sk-logo__descriptor { font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sk-ink-2); margin-top: 5px; }
.sk-nav { display: flex; align-items: center; gap: 32px; }
.sk-nav__list { display: flex; align-items: center; gap: 28px; }
.sk-nav__list > li { position: relative; }
.sk-nav__list a, body .sk-nav__list a, .sk-nav__toggle { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-family: var(--sk-font-body); font-weight: 500; font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(41, 41, 41, 0.8); background: none; border: 0; padding: 0; cursor: pointer; transition: color 150ms ease; white-space: nowrap; }
.sk-nav__list a:hover, .sk-nav__toggle:hover, .sk-nav__toggle[aria-expanded="true"] { color: var(--sk-deep); }
.sk-nav__list a[aria-current="page"], .sk-nav__list .current-menu-item > a, .sk-nav__list .current-menu-ancestor > a, .sk-nav__list .current-menu-ancestor > .sk-nav__toggle { color: var(--sk-deep); }
.sk-nav__list a[aria-current="page"]::before, .sk-nav__list .current-menu-item > a::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--sk-accent-soft); margin-right: 2px; }
.sk-nav__chev { transition: transform 200ms ease; }
.sk-nav__toggle[aria-expanded="true"] .sk-nav__chev { transform: rotate(180deg); }
.sk-panel { position: absolute; left: 50%; top: calc(100% + 22px); transform: translateX(-50%); width: 352px; background: var(--sk-bg); border: 1px solid var(--sk-line); border-radius: 12px; box-shadow: 0 24px 60px rgba(41, 41, 41, 0.14); padding: 10px; z-index: 60; overflow: hidden; }
.sk-panel[hidden] { display: none; }
.sk-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 24px; }
.sk-panel__list { display: grid; gap: 2px; }
.sk-panel__item { display: flex !important; flex-direction: column; align-items: flex-start !important; gap: 2px; padding: 12px 16px !important; border-radius: 8px; text-transform: none !important; letter-spacing: 0 !important; text-align: left; }
.sk-panel__item:hover { background: var(--sk-bone); }
.sk-panel__name { font-family: var(--sk-font-display); font-size: 18px; line-height: 1.2; color: var(--sk-ink); }
.sk-panel__tag { font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sk-accent-soft); }
.sk-panel__all { display: flex !important; justify-content: space-between; align-items: center; margin: 8px -10px -10px; padding: 16px 24px !important; border-top: 1px solid var(--sk-line); color: var(--sk-deep) !important; font-size: 11.5px !important; letter-spacing: 0.16em !important; }
.sk-panel__all:hover { background: var(--sk-bone); }
.sk-nav__actions { display: flex; align-items: center; gap: 18px; }
.sk-nav__call { display: none; text-decoration: none; font-weight: 600; color: var(--sk-ink); white-space: nowrap; }
.sk-nav__actions .sk-btn { min-height: 44px; padding: 0 24px; font-size: 12px; }
.sk-burger { display: none; width: 44px; height: 44px; border-radius: 50%; background: none; border: 1px solid rgba(41, 41, 41, 0.3); padding: 0; align-items: center; justify-content: center; cursor: pointer; }


 


/* ---------- Buttons (pills, uppercase micro-type) ---------- */
.sk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border-radius: 999px; font-family: var(--sk-font-body); font-weight: 500; font-size: 12.5px; letter-spacing: var(--sk-label-track); text-transform: uppercase; line-height: 1.15; text-decoration: none; white-space: normal; text-align: center; text-wrap: balance; border: 1px solid transparent; transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease; }
.sk-btn--primary, a.sk-btn.sk-btn--primary, body .sk-btn--primary { background: var(--sk-deep); color: var(--sk-ink-on-dark); }
.sk-btn--primary:hover, a.sk-btn.sk-btn--primary:hover { background: var(--sk-ink); color: var(--sk-ink-on-dark); }
.sk-btn--secondary, a.sk-btn.sk-btn--secondary { background: transparent; color: var(--sk-ink); border-color: rgba(41, 41, 41, 0.3); }
.sk-btn--secondary:hover { background: var(--sk-deep); border-color: var(--sk-deep); color: var(--sk-ink-on-dark); }
.sk-btn--invert, a.sk-btn.sk-btn--invert, body .sk-band .sk-btn--invert, body .sk-footer .sk-btn--invert { background: var(--sk-bg); color: var(--sk-deep); letter-spacing: 0.14em; }
.sk-btn--invert:hover, a.sk-btn.sk-btn--invert:hover { background: var(--sk-accent-soft); color: var(--sk-deep); }
.sk-link { color: var(--sk-deep); font-family: var(--sk-font-body); font-weight: 500; font-size: 12.5px; letter-spacing: var(--sk-label-track); text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.sk-link::after { content: "\2192"; transition: transform 150ms ease; }
.sk-link:hover::after { transform: translateX(3px); }
.sk-book { margin: 32px 0; }

/* ---------- Heroes ---------- */
.sk-hero { padding: 40px 0 48px; }
.sk-hero--page { background: var(--sk-bg); padding: 48px 0 40px; }
.sk-hero--page .sk-hero__title { max-width: 22ch; font-size: clamp(44px, 2.4vw + 26px, 60px); }
.sk-hero--page .sk-hero__intro { margin-top: 20px; }
.sk-hero--post { background: var(--sk-bg); padding: 48px 0 40px; }
.sk-hero--post .sk-hero__title { max-width: 24ch; }
.sk-hero--treatment { padding: 32px 0 64px; overflow: hidden; background: var(--sk-bone); }
.sk-hero--treatment .sk-hero__title { font-size: clamp(46px, 2.6vw + 26px, 64px); max-width: 22ch; }
.sk-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; }
.sk-hero__copy .sk-hero__title { margin: 12px 0 20px; max-width: 18ch; }
.sk-hero__intro p + p { margin-top: 0.9em; }
.sk-hero__actions { display: flex; align-items: center; gap: 22px; margin-top: 28px; }
.sk-hero__media { position: relative; }
.sk-hero__img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--sk-hero-radius); }
.sk-hero__media--portrait .sk-ph-img { max-width: 360px; margin-left: auto; }
.sk-hero__cred { color: var(--sk-ink-2); font-size: 0.6em; font-family: var(--sk-font-body); font-weight: 500; letter-spacing: 0; }

/* Price card (treatment hero) */
.sk-price { margin-top: 28px; padding: 24px 28px; background: var(--sk-surface); border-radius: var(--sk-card-radius); max-width: 520px; }
.sk-price .sk-label { margin-bottom: 8px; }
.sk-price__line { font-family: var(--sk-font-display); font-size: 30px; line-height: 1.15; }
.sk-price__note { margin-top: 8px; font-size: 15px; color: var(--sk-ink-2); }
.sk-price__cta { margin-top: 18px; }

/* Breadcrumbs */
.sk-crumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--sk-ink-2); margin-bottom: 8px; }
.sk-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--sk-line); }
.sk-crumbs a { color: var(--sk-ink-2); text-decoration: none; }
.sk-crumbs a:hover { color: var(--sk-accent); }

/* Proof strip: on the deep ground, hairlines, no icons */
.sk-proof { background: var(--sk-deep); color: var(--sk-ink-on-dark); margin-top: 0; }
.sk-proof__inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; }
.sk-proof__list { display: flex; flex-wrap: wrap; }
.sk-proof__list li { padding: 22px 14px 22px 0; margin-right: 14px; font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; border-right: 1px solid rgba(250, 249, 246, 0.18); }
.sk-proof__list li:last-child { border-right: 0; margin-right: 0; }


/* ---------- Prose ---------- */
.sk-prose { max-width: var(--sk-measure); }
.sk-treatment__layout { padding-top: 0; }
.sk-treatment__body { margin-inline: auto; max-width: 768px; padding-bottom: 32px; }
.sk-prose > * + * { margin-top: var(--sk-para-gap); }
.sk-prose h2 { margin-top: 2.2em; padding-top: 40px; border-top: 1px solid var(--sk-line); font-size: clamp(30px, 1.2vw + 22px, 36px); }
.sk-prose h3 { margin-top: 1.6em; }
.sk-prose h2 + *, .sk-prose h3 + * { margin-top: 0.8em; }
.sk-prose ul, .sk-prose ol { padding-left: 1.3em; }
.sk-prose li + li { margin-top: 0.45em; }
.sk-prose li::marker { color: var(--sk-accent); }
.sk-prose blockquote, .wp-block-quote { border-left: 2px solid var(--sk-accent-soft); padding: 4px 0 4px 20px; font-family: var(--sk-font-display); font-size: 1.35em; line-height: 1.35; color: var(--sk-ink); }
.sk-prose img { border-radius: 12px; }
.sk-prose figure { margin: 2em 0; }
.sk-prose figcaption, .sk-figure figcaption, .sk-chart figcaption { font-size: 14px; line-height: 1.5; color: var(--sk-ink-2); margin-top: 10px; }
.sk-prose .sk-book { margin: 2em 0; }
.sk-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sk-table, .sk-prose table, .wp-block-table table { font-size: 15px; line-height: 1.45; }
.sk-table th, .sk-table td, .sk-prose th, .sk-prose td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--sk-line); }
.sk-table thead th, .sk-prose thead th { font-family: var(--sk-font-body); font-weight: 600; font-size: 13px; letter-spacing: var(--sk-label-track); text-transform: uppercase; color: var(--sk-ink-2); border-bottom: 1px solid var(--sk-ink); }
.sk-table tbody th, .sk-prose tbody th { font-weight: 600; }
.sk-bg-alt-section .sk-prose a, .sk-tint a, .sk-note a:not(.sk-btn), .sk-faq__a a:not(.sk-btn), .sk-spec a:not(.sk-btn), .sk-takeaways a:not(.sk-btn), .sk-cta a:not(.sk-btn):not(.sk-link) { color: var(--sk-link-on-alt); }
mark.sk-ph { background: #FFF0B3; color: #5A4A00; padding: 0 4px; border-radius: 3px; font-size: 0.9em; }

/* Placeholder image blocks */
.sk-ph-img { position: relative; width: 100%; background: var(--sk-bg-alt); border-radius: 12px; overflow: hidden; }
.sk-ph-img::before { content: ""; position: absolute; inset: 0; background: var(--sk-lotus-soft) center / 38% no-repeat; opacity: 0.55; }
.sk-ph-img::after { content: attr(data-alt); position: absolute; left: 16px; right: 16px; bottom: 12px; font-size: 12px; line-height: 1.4; color: var(--sk-ink-2); opacity: 0.85; }
.sk-ph-img[data-alt=""]::after, .sk-ph-img:not([data-alt])::after { content: none; }
.sk-ph-img--4x3 { aspect-ratio: 4 / 3; } .sk-ph-img--3x2 { aspect-ratio: 3 / 2; } .sk-ph-img--16x9 { aspect-ratio: 16 / 9; } .sk-ph-img--1x1 { aspect-ratio: 1 / 1; } .sk-ph-img--3x4 { aspect-ratio: 3 / 4; }
.sk-hero__img.sk-ph-img { border-radius: var(--sk-hero-radius); }
.sk-figure--lead { margin: 0 0 32px; }

/* ---------- Spec card ---------- */
.sk-spec { background: var(--sk-tint); border-radius: var(--sk-mat-radius); padding: 32px; margin: 0 0 40px; position: relative; z-index: 2; }
.sk-spec__label { margin-bottom: 18px; }
.sk-spec__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; margin-bottom: 24px; }
.sk-spec__row { display: grid; grid-template-columns: 110px 1fr; gap: 10px; font-size: 15px; line-height: 1.45; }
.sk-spec__row dt { font-weight: 600; color: var(--sk-ink-2); }
.sk-spec__row dd { color: var(--sk-ink); }

/* Steps */
.sk-steps { counter-reset: step; display: grid; gap: 20px; margin: 1.5em 0; }
.sk-steps__item { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.sk-steps__num { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--sk-accent-soft); color: var(--sk-deep); display: grid; place-items: center; font-family: var(--sk-font-display); font-size: 20px; }
.sk-steps__title { font-size: 20px; margin: 8px 0 4px; }
.sk-steps__item p { margin: 0; }

/* Timeline */
.sk-timeline { border-left: 1px solid var(--sk-line); margin: 1.5em 0 1.5em 8px; padding-left: 28px; display: grid; gap: 18px; }
.sk-timeline__item { position: relative; display: grid; gap: 4px; }
.sk-timeline__item::before { content: ""; position: absolute; left: -33px; top: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--sk-accent); }
.sk-timeline__when { font-family: var(--sk-font-display); font-size: 22px; line-height: 1.2; }
.sk-timeline__when { color: var(--sk-deep); font-size: 26px; }
.sk-timeline__what { color: var(--sk-ink); }

/* Note (the honest part) */
.sk-note { background: var(--sk-tint); border-radius: 12px; padding: 28px 32px; margin: 2em 0; }
.sk-note__title { font-size: 22px; margin-bottom: 10px; }
.sk-note p + p { margin-top: 0.8em; }
.sk-note { border-left: 3px solid var(--sk-accent-soft); border-radius: 0 12px 12px 0; }

/* Finance strip */
.sk-finance { border-top: 1px solid var(--sk-line); border-bottom: 1px solid var(--sk-line); padding: 18px 0; margin: 1.5em 0; font-size: 15px; }
.sk-finance__lead { margin: 0 0 6px; }
.sk-finance__partners { margin: 0; color: var(--sk-ink-2); }
.sk-finance__partners .sk-label { display: inline; margin: 0 6px 0 0; }

/* Mid-page CTA */
.sk-cta { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; background: var(--sk-bone); border-radius: 12px; padding: 28px 32px; margin: 2.2em 0; }
.sk-cta { background: var(--sk-tint); }
.sk-cta__heading { font-size: 24px; margin-bottom: 6px; }
.sk-cta__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.sk-cta p { margin: 0; }

/* Takeaways */
.sk-takeaways { background: var(--sk-tint); border-radius: 12px; padding: 24px 28px; margin: 1.6em 0; }
.sk-takeaways ul { padding-left: 1.2em; }
.sk-takeaways li + li { margin-top: 0.5em; }

/* FAQ */
.sk-faq { background: var(--sk-tint); border-radius: 20px; padding: 40px; margin: 2.5em 0; }
.sk-faq__heading { margin: 0 0 20px !important; padding-bottom: 0 !important; }
.sk-faq__heading::after { content: none !important; }
.sk-faq__item { border-top: 1px solid var(--sk-line); }
.sk-faq__item:last-child { border-bottom: 1px solid var(--sk-line); }
.sk-faq__q { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-family: var(--sk-font-display); font-size: 24px; font-weight: 400; line-height: 1.2; }
.sk-faq__q .sk-chevron { flex: 0 0 auto; color: var(--sk-deep); transition: transform 200ms ease; }
.sk-faq__item[open] .sk-chevron { transform: rotate(180deg); }
.sk-faq__a { padding: 0 0 20px; max-width: 64ch; }
.sk-faq__a p + p { margin-top: 0.8em; }

/* Compare table */
.sk-compare { margin: 2em 0; }

/* Charts */
.sk-chart { margin: 2.2em 0; padding: 24px; border-radius: var(--sk-card-radius); background: var(--sk-surface); }
.sk-chart__title { font-family: var(--sk-font-display); font-size: 22px; margin-bottom: 16px; }
.sk-bars { width: 100%; height: auto; font-family: var(--sk-font-body); }
.sk-bars__label { font-size: 14px; fill: var(--sk-ink); }
.sk-bars__value { font-size: 14px; fill: var(--sk-ink-2); }
.sk-bars__bar { fill: var(--sk-accent-soft); }
.sk-bars__bar.is-first { fill: var(--sk-deep); }
.sk-tl { width: 100%; height: auto; font-family: var(--sk-font-body); }
.sk-tl__line { stroke: var(--sk-line); stroke-width: 2; }
.sk-tl__dot { fill: var(--sk-deep); }
.sk-tl__when { font-size: 13px; font-weight: 600; fill: var(--sk-ink); }
.sk-tl__what { font-size: 12px; fill: var(--sk-ink-2); }
.sk-tl__list { padding-left: 1.2em; margin-top: 8px; font-size: 15px; }
.sk-tl__list li + li { margin-top: 0.4em; }
.sk-checklist { padding-left: 0; display: grid; gap: 10px; }
.sk-checklist li { position: relative; padding-left: 30px; }
.sk-checklist li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border: 1.5px solid var(--sk-accent); border-radius: 4px; }
.sk-checklist li::after { content: ""; position: absolute; left: 6px; top: 7px; width: 5px; height: 9px; border: solid var(--sk-accent); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }

/* Feature grid: one large card, the rest small (never three equal cards) */
.sk-grid--feature { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; }
.sk-grid--feature > .sk-card:first-child { grid-column: span 2; grid-row: span 2; }
.sk-grid--feature > .sk-card:first-child .sk-card__media img, .sk-grid--feature > .sk-card:first-child .sk-ph-img { aspect-ratio: 16 / 10; }
.sk-grid--feature > .sk-card:first-child .sk-card__title { font-size: 28px; }
/* Hairline text lists (concerns, directions) */
.sk-lines { list-style: none; padding: 0; margin: 0; }
.sk-lines li { padding: 14px 0; border-top: 1px solid var(--sk-line); line-height: 1.5; }
.sk-lines li:last-child { border-bottom: 1px solid var(--sk-line); }
.sk-lines a { font-weight: 600; }
/* Hero figures inside Elementor heroes */
.sk-hero-figure { margin: 0; }
.sk-hero-figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--sk-hero-radius); }
.sk-hero-figure--wide img { aspect-ratio: 4 / 3; }

.sk-el-hero .sk-values__item { flex-direction: column; gap: 14px; }
.sk-el-hero .sk-values__item p { font-size: 13px; }
.sk-el-hero .sk-values__item h3 { font-size: 11.5px; }
.sk-el-hero .e-con-inner > .e-con > .e-con:first-child > .elementor-element:last-child { margin-top: auto; padding-top: 40px; }
.sk-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 8px; }
.sk-el-hero .sk-intro { color: rgba(41, 41, 41, 0.75); max-width: 28rem; }
.sk-el-hero .sk-eyebrow .elementor-heading-title, .sk-el-hero .elementor-heading-title.sk-eyebrow { color: var(--sk-mushroom); }
.sk-el-hero .elementor-widget-heading .sk-eyebrow { margin-bottom: 8px; }
.sk-words span { position: relative; }


.sk-el-hero .elementor-widget-shortcode { width: 100%; }
.sk-el-hero .elementor-widget-heading .sk-display, .sk-el-hero h1.sk-display { max-width: 14ch; }
.sk-el-hero .sk-label { margin-bottom: 8px; }
.elementor-widget-heading .sk-label { font-size: 13px; }
.elementor-widget-text-editor .sk-intro { font-size: clamp(18px, 0.4vw + 16px, 20px); line-height: 1.55; max-width: 60ch; }
.elementor-widget-text-editor p { margin-bottom: 1em; }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.elementor-widget-heading h2 { margin-bottom: 8px; }
.elementor-widget-heading.sk-display .elementor-heading-title, .elementor-widget-heading .elementor-heading-title.sk-display { font-size: clamp(52px, 4vw + 28px, 80px); line-height: 0.95; letter-spacing: var(--sk-display-track); }
.elementor-widget-heading.sk-section__heading .elementor-heading-title, .elementor-widget-heading .elementor-heading-title.sk-section__heading { font-size: clamp(40px, 2.4vw + 26px, 56px); line-height: 1.02; }
.elementor-widget-heading .elementor-heading-title.sk-eyebrow { font-size: 12px; }
.elementor-widget-shortcode .sk-faq { margin: 0; }
.elementor-widget-shortcode .sk-steps { margin: 0; }
.elementor-widget-shortcode .sk-provider { margin: 8px 0 0; }
.elementor-element.sk-elbtn .elementor-button { background-color: var(--sk-deep); color: var(--sk-ink-on-dark); }


/* ---------- Cards: white ground, no border, image clipped inside the radius ---------- */
.sk-card { background: var(--sk-surface); border: 0; border-radius: var(--sk-card-radius); overflow: hidden; position: relative; transition: transform 200ms ease; }
.sk-card:hover, .sk-catcard:hover, .sk-ccard:hover { transform: translateY(-2px); }
.sk-card--treatment .sk-card__body::after { content: "\2197"; position: absolute; right: 20px; bottom: 22px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--sk-line-strong); display: grid; place-items: center; font-size: 14px; color: var(--sk-deep); }
.sk-card--treatment .sk-card__body { position: relative; padding-right: 72px; }
.sk-catcard { transition: transform 200ms ease; }
.sk-ccard { transition: transform 200ms ease; }
.sk-card__link { display: block; text-decoration: none; color: inherit; height: 100%; }
.sk-card__media img, .sk-card__media .sk-ph-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }
.sk-card--post .sk-card__media img, .sk-card--post .sk-card__media .sk-ph-img { aspect-ratio: 16 / 9; }
.sk-card--team .sk-card__media img, .sk-card--team .sk-card__media .sk-ph-img { aspect-ratio: 3 / 4; }
.sk-card__body { padding: 22px 24px 26px; }
.sk-card__title { font-size: 24px; margin-bottom: 6px; }
.sk-card__line, .sk-card__excerpt { color: var(--sk-ink-2); font-size: 15px; line-height: 1.5; margin-bottom: 12px; }
.sk-card__from { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sk-accent-text); }
.sk-card .sk-label { margin-bottom: 8px; }
.sk-card__title a { text-decoration: none; color: inherit; }
.sk-related { margin: 4rem 0 1em; padding-top: 2rem; border-top: 1px solid var(--sk-line); }
.sk-related__heading { margin-bottom: 24px; }
.sk-prose .sk-related h2, .sk-related__heading { border-top: 0; padding-top: 0; margin-top: 0; }
.sk-group { margin-bottom: 64px; }
.sk-group__head { margin-bottom: 8px; }
.sk-group__heading { margin-bottom: 8px; }
.sk-group__heading a { text-decoration: none; color: inherit; }
.sk-group__line { color: var(--sk-ink-2); max-width: 60ch; margin-bottom: 16px; }

/* Category cards: five cards, the first spans two rows */
.sk-catgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; gap: 20px; }
.sk-catcard { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--sk-card-radius); background: var(--sk-surface); text-decoration: none; color: inherit; }
.sk-catcard:first-child { grid-row: span 2; }
.sk-catcard__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 400ms ease; }
.sk-catcard:first-child .sk-catcard__media img { aspect-ratio: 4 / 5; height: 100%; }
.sk-catcard:first-child .sk-catcard__media { flex: 1; }
.sk-catcard:hover .sk-catcard__media img { transform: scale(1.02); }
.sk-catcard__body { display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 22px; }
.sk-catcard__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sk-catcard__head > span:first-child { display: flex; flex-direction: column; gap: 6px; }
.sk-catcard__arrow, .sk-ccard__arrow { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--sk-line-strong); display: grid; place-items: center; color: var(--sk-deep); transition: background-color 150ms ease, color 150ms ease; }
.sk-catcard:hover .sk-catcard__arrow, .sk-ccard:hover .sk-ccard__arrow { background: var(--sk-deep); color: var(--sk-bg); border-color: var(--sk-deep); }
.sk-catcard--cta { background: var(--sk-deep); color: var(--sk-ink-on-dark); justify-content: flex-end; }
.sk-catcard--cta .sk-catcard__body { padding: 24px; gap: 12px; }
.sk-catcard--cta .sk-catcard__name { font-size: 26px; }
.sk-catcard--cta .sk-catcard__line { color: rgba(250, 249, 246, 0.75); }
.sk-catcard--cta .sk-link { margin-top: 8px; }
.sk-catcard__tag { font-size: 10.5px; font-weight: 600; letter-spacing: var(--sk-label-track); text-transform: uppercase; color: var(--sk-accent-text); }
.sk-catcard__name { font-family: var(--sk-font-display); font-size: 24px; line-height: 1.05; }
.sk-catcard:first-child .sk-catcard__name { font-size: 28px; }
.sk-catcard__line { color: var(--sk-ink-2); font-size: 14px; line-height: 1.55; }
.sk-catcard__from { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sk-deep); margin-top: 4px; }

/* Concern cards */
.sk-cgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sk-ccard__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sk-ccard { display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 22px; background: var(--sk-surface); border-radius: var(--sk-card-radius); text-decoration: none; color: inherit; }
.sk-ccard__name { font-family: var(--sk-font-display); font-size: 22px; line-height: 1.1; }
.sk-ccard__line { color: var(--sk-ink-2); font-size: 14px; line-height: 1.55; flex: 1; }
.sk-ccard__from { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sk-accent-text); margin-top: 6px; }

/* Treatment rows (category pages, treatments index, pricing) */
.sk-trows { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--sk-line); }
.sk-trow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: 32px; align-items: start; padding: 24px 0; border-bottom: 1px solid var(--sk-line); }
.sk-trow__name { font-size: 26px; margin-bottom: 4px; }
.sk-trows--large .sk-trow__name { font-size: 32px; }
.sk-trow__name a { text-decoration: none; color: inherit; }
.sk-trow__name a:hover { color: var(--sk-accent-text); }
.sk-trow__line { color: var(--sk-ink-2); font-size: 15px; max-width: 60ch; }
.sk-trow__note { margin-top: 10px; font-size: 15px; color: var(--sk-ink); max-width: 62ch; padding: 10px 14px; border-radius: var(--sk-inset-radius); background: var(--sk-tint); }
.sk-trow__price { font-family: var(--sk-font-display); font-size: 22px; text-align: right; padding-top: 6px; max-width: 32ch; text-wrap: pretty; }
.sk-category__all { margin-top: 32px; }

/* Concern plan tiles */
.sk-plan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 2em 0 2.5em; max-width: none; align-items: start; }
.sk-prose > .sk-plan { margin-top: 2em; }
.sk-plan__tile { background: var(--sk-surface); border-radius: var(--sk-card-radius); padding: 26px 28px 28px; }
.sk-plan__tile--tell { background: var(--sk-tint); }
.sk-plan__name { font-size: 28px; margin: 0 0 8px; padding: 0; border: 0; }
.sk-prose .sk-plan__name { margin-top: 0; padding-top: 0; border-top: 0; font-size: 28px; }
.sk-plan__name a { text-decoration: none; color: inherit; }
.sk-plan__price { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sk-accent-text); }
.sk-plan__line { margin-top: 8px; font-size: 15px; color: var(--sk-ink-2); }
.sk-plan__text { font-size: 15px; }
.sk-plan__text p + p { margin-top: 0.7em; }
.sk-concern__body { max-width: none; margin-inline: 0; }
.sk-concern__body > .sk-prose, .sk-concern__body p, .sk-concern__body h2:not(.sk-plan__name), .sk-concern__body ul, .sk-concern__body .sk-note, .sk-concern__body .sk-faq { max-width: 768px; }
.sk-concerns-related { margin: 0 0 24px; }
.sk-concerns-related h2 { font-size: 24px; margin-bottom: 14px; }
.sk-pills { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sk-pills a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--sk-line-strong); text-decoration: none; color: var(--sk-ink); font-size: 14px; }
.sk-pills a:hover { background: var(--sk-tint); border-color: var(--sk-tint); }

/* Pricing page */
.sk-pricing__nav { position: sticky; top: var(--sk-header-h); z-index: 20; background: rgba(250, 249, 246, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); margin: 0 0 24px; padding: 12px 0; border-bottom: 1px solid var(--sk-line); }
.sk-pricing__nav ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sk-pricing__nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--sk-line-strong); text-decoration: none; color: var(--sk-ink); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.sk-pricing__nav a:hover { background: var(--sk-deep); border-color: var(--sk-deep); color: var(--sk-ink-on-dark); }
.sk-pricing__group { padding-top: 48px; scroll-margin-top: 150px; }
.sk-pricing__group h2 { font-size: clamp(36px, 2vw + 24px, 48px); margin-bottom: 8px; }
.sk-pricing__lead { color: var(--sk-ink-2); margin-bottom: 20px; max-width: 60ch; }
.sk-pricing__foot { margin-top: 48px; font-size: 14px; color: var(--sk-ink-2); max-width: 70ch; }

/* ---------- Provider and author boxes ---------- */
.sk-provider, .sk-author { display: grid; grid-template-columns: 120px 1fr; gap: 24px; align-items: start; padding: 28px; margin: 32px 0 48px; background: var(--sk-tint); border-radius: var(--sk-card-radius); }
.sk-provider__photo, .sk-author__photo { aspect-ratio: 3 / 4; border-radius: 12px; background: var(--sk-surface); display: grid; place-items: center; overflow: hidden; }
.sk-author__avatar { width: 100%; height: 100%; object-fit: cover; }
.sk-provider__name, .sk-author__name { font-size: 22px; margin-bottom: 8px; }
.sk-author__name a { text-decoration: none; color: inherit; }
.sk-author__cred { font-family: var(--sk-font-body); font-size: 15px; font-weight: 500; color: var(--sk-ink-2); }
.sk-author__role { color: var(--sk-ink-2); margin-bottom: 8px; font-size: 15px; }
.sk-provider p, .sk-author p { margin-bottom: 10px; }

/* Byline */
.sk-byline { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 20px; font-size: 14px; color: var(--sk-ink-2); }
.sk-byline a { color: var(--sk-ink); font-weight: 600; text-decoration: none; }
.sk-byline__item + .sk-byline__item::before { content: "\00B7"; margin-right: 18px; color: var(--sk-line); }

/* Table of contents */
.sk-toc { background: var(--sk-tint); border-radius: 12px; padding: 20px 24px; margin: 8px 0 32px; }
.sk-toc ol { padding-left: 1.2em; font-size: 15px; columns: 2; column-gap: 32px; }
.sk-toc li { margin-bottom: 6px; break-inside: avoid; }
.sk-toc a { text-decoration: none; color: var(--sk-ink); }
.sk-toc a:hover { color: var(--sk-accent); }

/* Filters */
.sk-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.sk-chip { border: 1px solid var(--sk-line); background: transparent; border-radius: 999px; padding: 10px 16px; min-height: 44px; font-weight: 500; font-size: 15px; cursor: pointer; color: var(--sk-ink); }
.sk-chip { text-transform: uppercase; font-size: 12px; letter-spacing: 0.12em; }
.sk-chip.is-active { background: var(--sk-deep); border-color: var(--sk-deep); color: var(--sk-ink-on-dark); }

/* NAP, hours, map */
.sk-nap__name { font-weight: 600; margin-bottom: 6px; }
.sk-nap__address { margin-bottom: 6px; }
.sk-nap__phone a, .sk-nap__email a { text-decoration: none; font-weight: 600; }
.sk-hours { display: grid; gap: 6px; margin: 12px 0; }
.sk-hours div { display: grid; grid-template-columns: auto 1fr; gap: 16px; font-size: 15px; }
.sk-hours dd { text-align: right; }
.sk-hours dt { color: var(--sk-ink-2); }
.sk-map iframe { width: 100%; border-radius: var(--sk-card-radius); }

/* ---------- Closing band and sisters ---------- */
.sk-band { background: var(--sk-deep); color: var(--sk-ink-on-dark); padding: 96px 0 48px; margin-top: 64px; position: relative; overflow: hidden; }
.sk-band__inner { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; position: relative; }
.sk-band__heading, .sk-band h2.sk-band__heading, body .sk-band .sk-band__heading { color: var(--sk-ink-on-dark); margin-bottom: 12px; font-size: clamp(34px, 2vw + 20px, 56px); line-height: 1.02; max-width: 18ch; }
.sk-band__text { max-width: 52ch; color: var(--sk-ink-on-dark); opacity: 0.85; }
.sk-band__actions { display: flex; align-items: center; gap: 22px; }
.sk-band__call { color: var(--sk-ink-on-dark); text-decoration: none; font-weight: 500; font-size: 12.5px; letter-spacing: var(--sk-label-track); text-transform: uppercase; white-space: nowrap; }
.sk-band__call:hover { color: var(--sk-accent-soft); }
.sk-band a.sk-link, .sk-sister a { color: var(--sk-accent-soft); }
.sk-sister { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.14); font-size: 14px; position: relative; }
.sk-sister a { text-decoration: none; font-weight: 500; }
.sk-sister a::after { content: " \2192"; }
.sk-band::before, .sk-footer::before { content: "S"; position: absolute; right: -0.08em; bottom: -0.35em; font-family: var(--sk-font-display); font-size: 26rem; line-height: 1; color: var(--sk-accent-soft); opacity: 0.06; pointer-events: none; }

/* ---------- Footer ---------- */
.sk-footer { background: var(--sk-deep); color: var(--sk-ink-on-dark); padding: 0 0 48px; position: relative; overflow: hidden; }
.sk-footer a { color: var(--sk-ink-on-dark); text-decoration: none; }
.sk-footer a:hover { color: var(--sk-accent-soft); }
.sk-footer .sk-label { color: var(--sk-accent-soft); }
.sk-footer .sk-logo { color: var(--sk-ink-on-dark); margin-bottom: 20px; }
.sk-footer .sk-logo__descriptor { color: var(--sk-accent-soft); }
.sk-footer .sk-hours dt { color: var(--sk-accent-soft); }
.sk-footer .sk-nap__directions a { color: var(--sk-accent-soft); }
.sk-footer__links { display: grid; gap: 8px; font-size: 14px; }
.sk-footer__group-name { display: block; font-family: var(--sk-font-display); font-size: 20px; margin-bottom: 8px; }
.sk-footer__social { list-style: none; padding: 0; margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.sk-sisters ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 32px; }
.sk-sisters li { display: grid; gap: 2px; font-size: 15px; }
.sk-sisters li a { font-weight: 500; }
.sk-sisters li span { color: var(--sk-accent-soft); font-size: 14px; }

/* Bottom bar (mobile) */
.sk-bottombar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: rgba(250, 249, 246, 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--sk-line); padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); gap: 10px; transition: transform 200ms ease, visibility 200ms ease; }
.sk-bottombar .sk-btn { flex: 1 1 0; min-width: 0; min-height: 52px; padding: 0 10px; font-size: 13px; }
.sk-bottombar--3 [data-sk="book"] { flex: 2 1 0; }
/* The bar is out of the way on the opening screen, where the hero already
   offers Book, and slides up once the visitor has scrolled. Gated on .sk-js so a
   visitor without JavaScript always gets the bar. visibility keeps it out of the
   keyboard tab order while it is off screen. */
.sk-js .sk-bottombar { transform: translateY(110%); visibility: hidden; }
.sk-js .sk-bottombar.is-shown { transform: none; visibility: visible; }

/* Instagram proof + area served */
.sk-igproof { margin: 0; font-size: 14px; }
.sk-band__proof { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.sk-area { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--sk-accent-soft); max-width: 46ch; }

/* Specials */
.sk-specials__grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.sk-special { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: var(--sk-surface, #fff); border: 1px solid var(--sk-line-strong, #CBC7BE); border-radius: var(--sk-card-radius, 6px); }
.sk-special--sample { border-style: dashed; }
.sk-special__tier { margin: 0; font-size: 12px; letter-spacing: var(--sk-label-track, 0.1em); text-transform: uppercase; font-weight: 600; color: var(--sk-accent-soft, #7FA09C); }
.sk-special__title { margin: 0; font-family: var(--sk-font-display); font-weight: 400; font-size: 26px; line-height: 1.1; }
.sk-special__detail { margin: 0; color: var(--sk-ink-2); flex: 1 1 auto; }
.sk-special__meta { margin: 0; font-size: 13px; color: var(--sk-ink-2); font-variant-numeric: tabular-nums; }
.sk-special .sk-btn { align-self: flex-start; margin-top: 4px; }
.sk-specials__reach { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: 15px; color: var(--sk-ink-2); }

/* Announcement bar */
.sk-topbar { position: relative; background: var(--sk-accent, var(--sk-deep, #0B5C57)); color: var(--sk-ink-on-dark, #fff); font-size: 13px; line-height: 1.35; }
.sk-topbar[hidden] { display: none; }
.sk-topbar__inner { display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 7px 46px; text-align: center; }
.sk-topbar__msg { margin: 0; display: none; }
.sk-topbar__msg.is-on { display: block; }
.sk-topbar a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.sk-topbar__close { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; background: transparent; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; opacity: .75; }
.sk-topbar__close:hover, .sk-topbar__close:focus-visible { opacity: 1; }
.sk-sample { display: inline-block; margin-left: 8px; padding: 1px 6px; border-radius: 3px; background: #FFF0B3; color: #5A4A00; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px; }
@media (max-width: 600px) { .sk-topbar { font-size: 12.5px; } .sk-topbar__inner { padding: 7px 42px; } }

/* Google rating (visible proof only; never mirrored into schema) */
.sk-grating { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: inherit; text-decoration: none; }
.sk-grating__val { font-weight: 700; font-variant-numeric: tabular-nums; }
.sk-grating__stars { letter-spacing: 1px; }
.sk-grating__star { opacity: 0.32; }
.sk-grating__star.is-on { opacity: 1; }
.sk-grating__count { opacity: 0.82; }
a.sk-grating:hover .sk-grating__count, a.sk-grating:focus-visible .sk-grating__count { text-decoration: underline; }
.sk-band__proof { margin-top: 22px; }

/* Search and results */
.sk-search { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; max-width: 520px; }
.sk-search input { flex: 1 1 160px; min-width: 0; min-height: 48px; border: 1px solid var(--sk-line-strong); border-radius: 999px; padding: 0 14px; background: var(--sk-surface); }
.sk-results { display: grid; gap: 24px; }
.sk-results a { font-family: var(--sk-font-display); font-size: 24px; text-decoration: none; }
.sk-results p { color: var(--sk-ink-2); }
.pagination, .navigation.pagination { margin-top: 40px; }
.nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.nav-links .page-numbers { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--sk-line-strong); border-radius: 999px; text-decoration: none; }
.nav-links .page-numbers.current { background: var(--sk-deep); color: var(--sk-ink-on-dark); border-color: var(--sk-deep); }

/* ---------- Reveal ---------- */
.sk-js .sk-reveal { opacity: 0; transform: translateY(8px); transition: opacity 240ms ease, transform 240ms ease; }
.sk-js .sk-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .sk-js .sk-reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .sk-card, .sk-btn, .sk-faq__q .sk-chevron { transition: none; }
}

/* ---------- Elementor overrides (fonts and colors follow the theme; layout stays Elementor's) ---------- */
.elementor h1, .elementor h2, .elementor h3, .elementor .elementor-heading-title { font-family: var(--sk-font-display); font-weight: 400; letter-spacing: 0; }
.elementor h4, .elementor h5, .elementor h6 { font-family: var(--sk-font-body); font-weight: 600; }
.elementor-widget-text-editor, .elementor-widget-icon-list, .elementor-widget-button { font-family: var(--sk-font-body); }
.elementor a.elementor-button, .elementor .elementor-button { font-family: var(--sk-font-body); font-weight: 500; border-radius: 999px; min-height: 52px; display: inline-flex; align-items: center; padding: 0 28px; font-size: 12.5px; letter-spacing: var(--sk-label-track); text-transform: uppercase; }
.elementor .elementor-button.elementor-button-link:not(.sk-btn--secondary) { background-color: var(--sk-deep); color: var(--sk-ink-on-dark); }
.elementor .elementor-button:hover { background-color: var(--sk-ink); color: var(--sk-ink-on-dark); }
.elementor-widget-accordion .elementor-accordion .elementor-tab-title { font-family: var(--sk-font-display); font-size: 24px; font-weight: 400; }
.elementor-widget-accordion .elementor-accordion .elementor-tab-content { font-family: var(--sk-font-body); }
.elementor-widget-container .sk-prose, .elementor-widget-shortcode .sk-prose { max-width: none; }
.sk-page--elementor .sk-band { margin-top: 0; }

.e-con.sk-section-bone { background-color: var(--sk-bone); }


.sk-values__item h3 { font-family: var(--sk-font-body); font-size: 12px; font-weight: 600; letter-spacing: var(--sk-label-track); text-transform: uppercase; margin: 0 0 8px; }
.sk-values__item p { color: var(--sk-ink-2); font-size: 15px; margin: 0; }
.sk-words { display: flex; flex-wrap: wrap; gap: 12px 32px; font-family: var(--sk-font-display); font-size: 28px; color: var(--sk-deep); list-style: none; padding: 0; }
.sk-membership { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.sk-membership__price { font-family: var(--sk-font-display); font-size: clamp(56px, 4vw + 24px, 88px); line-height: 1; }
.sk-membership__price small { font-family: var(--sk-font-body); font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sk-ink-2); margin-left: 8px; }
.sk-membership__perks { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; margin: 28px 0; }
.sk-membership__perks h3 { font-family: var(--sk-font-body); font-size: 12px; font-weight: 600; letter-spacing: var(--sk-label-track); text-transform: uppercase; margin-bottom: 6px; }
.sk-membership__perks p { font-size: 15px; color: var(--sk-ink-2); margin: 0; }
.sk-membership__media img { width: 100%; border-radius: var(--sk-mat-radius); }


/* Elementor kit button styles must not reach theme buttons and nav toggles */
body .sk-burger, .elementor-kit-10 .sk-burger { background: none !important; border-radius: 50% !important; padding: 0 !important; border: 1px solid rgba(41, 41, 41, 0.3) !important; }


body .sk-nav__toggle, .elementor-kit-10 .sk-nav__toggle, body .sk-chip { background: none !important; border-radius: 0; padding: 0; box-shadow: none; }
body .sk-nav__toggle, .elementor-kit-10 .sk-nav__toggle { color: rgba(41, 41, 41, 0.8) !important; font-size: 12.5px !important; letter-spacing: var(--sk-label-track) !important; font-family: var(--sk-font-body) !important; text-transform: uppercase; }
body .sk-nav__toggle:hover, body .sk-nav__toggle[aria-expanded="true"] { color: var(--sk-deep) !important; }
body .sk-chip { border: 1px solid var(--sk-line-strong); border-radius: 999px; padding: 10px 16px; color: var(--sk-ink); }
body .sk-chip.is-active { background: var(--sk-deep); color: var(--sk-ink-on-dark); }
.elementor .sk-values__item h3, .elementor .sk-membership__perks h3, .elementor .sk-eyebrow .elementor-heading-title, .elementor .sk-label .elementor-heading-title, .elementor .elementor-heading-title.sk-eyebrow, .elementor .elementor-heading-title.sk-label, .elementor .sk-eyebrow, .elementor .sk-label, .elementor .sk-catcard__tag, .elementor .sk-ccard__from, .elementor .sk-catcard__from { font-family: var(--sk-font-body); }
.elementor .sk-eyebrow .elementor-heading-title, .elementor .elementor-heading-title.sk-eyebrow { font-size: 12px; font-weight: 500; letter-spacing: var(--sk-label-track); text-transform: uppercase; color: var(--sk-accent-text); }
.elementor .sk-label .elementor-heading-title, .elementor .elementor-heading-title.sk-label { font-size: 12px; font-weight: 600; letter-spacing: var(--sk-label-track); text-transform: uppercase; color: var(--sk-mushroom); }
.sk-provider__photo { background: var(--sk-bg-alt); }

/* ---------- Fluent Forms ---------- */
.fluentform .ff-el-input--label label { font-weight: 600; font-size: 15px; color: var(--sk-ink); }
.fluentform .ff-el-form-control { border: 1px solid var(--sk-line-strong) !important; border-radius: 8px !important; background: var(--sk-surface) !important; min-height: 48px; padding: 10px 14px !important; color: var(--sk-ink); }
.fluentform .ff-el-form-control:focus { border-color: var(--sk-accent) !important; box-shadow: 0 0 0 2px var(--sk-accent) !important; }
.fluentform .ff-btn-submit { background: var(--sk-deep) !important; color: var(--sk-ink-on-dark) !important; border: 0 !important; border-radius: 999px !important; min-height: 52px; padding: 0 28px !important; font-weight: 500 !important; font-size: 12.5px !important; letter-spacing: var(--sk-label-track); text-transform: uppercase; }
.fluentform .ff-btn-submit:hover { background: var(--sk-ink) !important; }
.fluentform .ff-el-is-error .text-danger, .fluentform .error { color: var(--sk-error) !important; }
.fluentform .ff-message-success { background: var(--sk-tint); border: 0; border-radius: 12px; padding: 20px 24px; }

/* ---------- Responsive (aligned with Elementor: tablet 1024, mobile 767) ---------- */
@media (max-width: 1180px) {
  .sk-nav__list { gap: 20px; }
  .sk-nav__list a, .sk-nav__toggle { font-size: 11.5px; letter-spacing: 0.1em; }
}
@media (max-width: 1024px) {
  .sk-hero__grid { grid-template-columns: 1fr; gap: 28px; }
  .sk-proof__inner { grid-template-columns: 1fr; gap: 0; }
  
  .sk-catgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-catcard:first-child { grid-row: auto; }
  .sk-catcard:first-child .sk-catcard__media img { aspect-ratio: 4 / 3; }
  .sk-catcard:first-child .sk-catcard__name { font-size: 30px; }
  .sk-cgrid, .sk-plan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-sechead { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 40px; }
  
  .sk-el-hero .e-con .e-con, .sk-el-hero .elementor-widget-html { flex-basis: auto !important; height: auto !important; min-height: 0; }
  .sk-el-hero .e-con-inner > .e-con { gap: 40px; }
  
  .sk-membership { grid-template-columns: 1fr; gap: 32px; }
  .sk-nav { position: fixed; inset: var(--sk-header-h) 0 0 0; background: var(--sk-bg); flex-direction: column; align-items: stretch; padding: 24px 32px 120px; gap: 8px; display: none; overflow: auto; z-index: 49; }
  .sk-nav.is-open { display: flex; }
  .sk-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .sk-nav__list > li { border-bottom: 1px solid var(--sk-line); }
  .sk-nav__list a, .sk-nav__toggle, body .sk-nav .sk-nav__toggle, body .sk-nav .sk-nav__list a { display: flex; width: 100%; justify-content: flex-start; gap: 10px; align-items: center; padding: 18px 0; font-family: var(--sk-font-display) !important; font-size: 24px !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--sk-ink) !important; }
  body .sk-nav .sk-nav__toggle { justify-content: space-between; }
  .sk-nav { height: calc(100vh - var(--sk-header-h)); height: calc(100dvh - var(--sk-header-h)); }
  .sk-nav__list .sk-nav__accent > a::before { width: 8px; height: 8px; }
  .sk-panel__item { text-transform: none !important; }
  .sk-panel__name { font-size: 20px; }
  .sk-panel__all { font-family: var(--sk-font-body) !important; font-size: 11.5px !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: var(--sk-deep) !important; }
  .sk-nav__list a[aria-current="page"]::before { display: none; }
  .sk-panel { position: static; transform: none; width: auto; box-shadow: none; border: 0; padding: 0 0 12px; background: transparent; }
  .sk-panel__item { padding: 10px 12px !important; }
  .sk-panel__name { font-size: 20px; }
  .sk-panel__all { padding: 12px 12px 4px !important; }
  .sk-nav__actions { flex-direction: column; align-items: stretch; margin-top: 20px; }
  .sk-nav__actions .sk-btn { width: 100%; min-height: 52px; }
  .sk-nav__call { display: block; text-align: center; padding: 12px 0; font-size: 12.5px; letter-spacing: var(--sk-label-track); text-transform: uppercase; }
  .sk-burger { display: inline-flex; }
  .sk-bottombar { display: flex; }
  .sk-footer { padding-bottom: 120px; }
}
@media (max-width: 767px) {
  .sk-container { padding-inline: 20px; }
  .sk-section { padding-block: var(--sk-section-m); }
  .sk-section--tight { padding-block: 40px; }
  .sk-grid--feature { grid-template-columns: 1fr; }
  .sk-grid--feature > .sk-card:first-child { grid-column: auto; grid-row: auto; }
  .sk-grid--3, .sk-grid--2, .sk-catgrid, .sk-cgrid, .sk-plan, .sk-membership__perks { grid-template-columns: 1fr; }
  
  
  .sk-spec__list { grid-template-columns: 1fr; }
  .sk-spec { padding: 24px; }
  .sk-faq { padding: 24px; border-radius: 12px; }
  .sk-faq__q { font-size: 20px; }
  .sk-provider, .sk-author { grid-template-columns: 1fr; }
  .sk-provider__photo, .sk-author__photo { max-width: 140px; }
  .sk-cta { grid-template-columns: 1fr; }
  .sk-cta__actions { align-items: flex-start; }
  .sk-band__inner { grid-template-columns: 1fr; }
  .sk-band__actions { flex-wrap: wrap; }
  .sk-toc ol { columns: 1; }
  .sk-sisters ul { grid-template-columns: 1fr; }
  .sk-hero__actions { flex-wrap: wrap; }
  .sk-band::before, .sk-footer::before { font-size: 14rem; }
  .sk-proof__list { flex-direction: column; }
  .sk-proof__list li { border-right: 0; margin-right: 0; padding: 12px 0; border-top: 1px solid rgba(250, 249, 246, 0.14); }
  .sk-proof__list li:first-child { border-top: 0; }
  .sk-trow { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sk-trow__price { text-align: left; padding-top: 0; max-width: none; }
  .sk-logo__brand { font-size: 20px; }
  .sk-logo__mark { width: 34px; }
  .sk-logo__descriptor { font-size: 9px; letter-spacing: 0.1em; white-space: nowrap; }
  .sk-steps__item { grid-template-columns: 36px 1fr; }
  .sk-steps__num { width: 36px; height: 36px; font-size: 17px; }
  .sk-timeline { margin-left: 4px; padding-left: 22px; }
  .sk-timeline__item::before { left: -27px; }
  .sk-band { padding: 64px 0 32px; }
  .sk-pricing__nav { position: static; }
  .sk-price { padding: 20px; }
  .sk-price__line { font-size: 26px; }
}


/* ---------- September 9 additions from the v0 source: icons, lotus, compositions ---------- */
.sk-ico { flex: 0 0 auto; }
.sk-lotus { color: var(--sk-deep); }
.sk-lotus--soft, .sk-footer .sk-lotus, .sk-band .sk-lotus { color: var(--sk-accent-soft); }
.sk-provider__photo .sk-lotus { color: var(--sk-deep); opacity: 0.7; }
.sk-logo__text { gap: 0; }
.sk-logo__brand { font-size: 22px; letter-spacing: 0.18em; }
.sk-logo__descriptor { font-size: 9.5px; letter-spacing: 0.42em; margin-top: 4px; }
.sk-logo__location { font-size: 9.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sk-accent-text); margin-top: 3px; }
.sk-footer .sk-logo__location { color: var(--sk-accent-soft); }
.sk-btn .sk-btn__ico { transition: transform 150ms ease; }
.sk-btn:hover .sk-btn__ico { transform: translate(2px, -2px); }
.sk-btn--ghost, a.sk-btn.sk-btn--ghost { background: transparent; color: var(--sk-ink-on-dark); border-color: rgba(250, 249, 246, 0.4); }
.sk-btn--ghost:hover, a.sk-btn.sk-btn--ghost:hover { background: var(--sk-bg); color: var(--sk-deep); }
.sk-link .sk-link__ico { margin-right: 2px; }
.sk-nav__list .sk-nav__accent > a { color: var(--sk-deep); }
.sk-nav__list .sk-nav__accent > a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sk-deep); }
.sk-nav__list a[aria-current="page"]::before, .sk-nav__list .current-menu-item > a::before { display: none; }
.sk-nav__list .menu-item-type-custom > a::before { display: none; }
.sk-panel__all .sk-ico { transition: transform 150ms ease; }
.sk-panel__all:hover .sk-ico { transform: translate(2px, -2px); }
.sk-burger__close { display: none; }
.sk-burger[aria-expanded="true"] .sk-burger__open { display: none; }
.sk-burger[aria-expanded="true"] .sk-burger__close { display: block; }
.sk-burger .sk-ico { color: var(--sk-ink); }

/* Proof strip: check marks and financing chips */
.sk-proof__list li { display: inline-flex; align-items: center; gap: 10px; }
.sk-proof__check { color: var(--sk-accent-soft); }
.sk-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.sk-chips__label { margin: 0; white-space: nowrap; }
.sk-chips--dark .sk-chips__label { color: var(--sk-accent-soft); }
.sk-chips__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sk-chips__list li { display: flex; align-items: center; justify-content: center; height: 36px; padding: 0 12px; border-radius: 6px; background: var(--sk-bg); }
.sk-chips--light .sk-chips__list li { background: var(--sk-surface); border: 1px solid var(--sk-line); }
.sk-chips .sk-chips__list li img, .elementor .sk-chips .sk-chips__list li img { height: 16px !important; width: auto !important; max-width: 90px; }
.sk-chips__word { font-weight: 600; font-size: 15px; letter-spacing: -0.02em; color: #D6394B; }
.sk-finance .sk-chips { margin: 10px 0; }

/* Section header rows: heading left, intro and link right */
.sk-sechead { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 56px; }
.sk-sechead h2 { margin-top: 20px; max-width: 26ch; }
.sk-sechead__aside { max-width: 24rem; }
.sk-sechead__aside p { color: rgba(41, 41, 41, 0.7); line-height: 1.6; margin: 0 0 20px; }
.sk-link__ico--after { margin-left: 4px; transition: transform 150ms ease; }
.sk-link:hover .sk-link__ico--after { transform: translate(2px, -2px); }
.sk-link:has(.sk-link__ico--after)::after { content: none; }
.sk-link--onDark { color: var(--sk-bg); }

/* Value tiles with icons */
.sk-values__item { display: flex; gap: 14px; align-items: flex-start; }
.sk-values__item > .sk-ico { color: var(--sk-accent-soft); margin-top: 2px; }
.sk-membership__perks .sk-values__item > .sk-ico { color: var(--sk-accent-soft); }

/* NAP icons */
.sk-nap__address, .sk-nap__phone { display: flex; gap: 10px; align-items: flex-start; }
.sk-nap__ico { color: var(--sk-accent-text); margin-top: 3px; }
.sk-footer .sk-nap__ico { color: var(--sk-accent-soft); }
.sk-footer__social .sk-pill { display: inline-flex; align-items: center; min-height: 34px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(250, 249, 246, 0.25); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.sk-footer__social .sk-pill:hover { background: var(--sk-bg); color: var(--sk-deep); }

/* Hero composition: petal-clipped portrait, stone overlay, rotating badge */
.sk-hcomp { position: relative; width: 100%; max-width: 560px; margin-inline: auto; }


@keyframes sk-badge-spin { to { transform: rotate(360deg); } }
.sk-eyebrow__rule { display: inline-block; width: 64px; height: 1px; background: var(--sk-line-strong); margin-left: 16px; vertical-align: middle; }

/* Philosophy: deep copy panel beside the botanical image */
.sk-philo { display: grid; grid-template-columns: 1fr 1fr; max-width: 1400px; margin-inline: auto; }
.sk-philo__copy { background: var(--sk-deep); color: var(--sk-ink-on-dark); padding: 96px 64px; display: flex; flex-direction: column; justify-content: center; }
.sk-philo__copy h2, .sk-philo__copy .sk-intro { color: var(--sk-ink-on-dark); }
.sk-philo__copy .sk-intro { opacity: 0.8; margin-top: 24px; }
.sk-eyebrow--onDark { color: var(--sk-accent-soft) !important; }
.sk-eyebrow--onDark .sk-eyebrow__rule { background: rgba(250, 249, 246, 0.3); }
.sk-philo .sk-words { list-style: none; padding: 0; margin: 40px 0 0; gap: 12px 32px; }
.sk-philo .sk-words li { font-family: var(--sk-font-body); font-size: 12.5px; font-weight: 500; letter-spacing: var(--sk-label-track); text-transform: uppercase; color: rgba(250, 249, 246, 0.7); }
.sk-philo__copy p:last-child { margin-top: 40px; }
.sk-philo__media { position: relative; min-height: 620px; overflow: hidden; }
.sk-philo__media img { width: 100%; height: 100%; object-fit: cover; }
.sk-philo__quote { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px; background: linear-gradient(to top, rgba(41, 41, 41, 0.5), transparent); }
.sk-philo__quote p { max-width: 20ch; font-family: var(--sk-font-display); font-style: italic; font-size: 26px; color: var(--sk-bg); margin: 0; }

/* Results stats and figure card */
.sk-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--sk-line); }
.sk-stat__value { font-family: var(--sk-font-display); font-size: 32px; line-height: 1.1; color: var(--sk-deep); margin: 0; }
.sk-stat__label { margin: 8px 0 0; font-size: 11px; font-weight: 500; letter-spacing: var(--sk-label-track); text-transform: uppercase; color: rgba(41, 41, 41, 0.6); line-height: 1.5; }
.sk-figcard { margin: 0; overflow: hidden; border-radius: var(--sk-card-radius); background: var(--sk-surface); }
.sk-figcard img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sk-figcard figcaption { padding: 24px; font-family: var(--sk-font-display); font-size: 22px; color: var(--sk-ink); }

/* Membership with the card image overlay */
.sk-membership__media { position: relative; overflow: hidden; border-radius: var(--sk-card-radius); }
.sk-membership__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }
.sk-membership__overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px; text-align: center; display: flex; flex-direction: column; align-items: center; background: linear-gradient(to top, rgba(41, 41, 41, 0.6), transparent); }
.sk-membership__brand { font-family: var(--sk-font-display); font-size: 24px; letter-spacing: 0.12em; color: var(--sk-bg); }
.sk-membership__sub { margin-top: 4px; font-size: 10px; font-weight: 500; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(250, 249, 246, 0.8); }
.sk-membership__tag { font-family: var(--sk-font-display); font-style: italic; font-size: 24px; color: var(--sk-accent-soft); margin: 8px 0 16px; }
.sk-membership__price { border-top: 1px solid var(--sk-line); padding-top: 28px; margin-top: 28px; }

/* Experience: image beside copy on bone */
.sk-exp { display: grid; grid-template-columns: 1fr 1fr; max-width: 1400px; margin-inline: auto; }
.sk-exp__media { min-height: 560px; overflow: hidden; }
.sk-exp__media img { width: 100%; height: 100%; object-fit: cover; }
.sk-exp__copy { padding: 96px 64px; display: flex; flex-direction: column; justify-content: center; }
.sk-exp__copy .sk-intro { margin-top: 24px; }
.sk-words--small { list-style: none; padding: 0; margin: 36px 0 40px; gap: 12px 28px; }
.sk-words--small li { font-family: var(--sk-font-body); font-size: 12.5px; font-weight: 500; letter-spacing: var(--sk-label-track); text-transform: uppercase; color: rgba(41, 41, 41, 0.6); }
@media (max-width: 1024px) {
  .sk-philo, .sk-exp { grid-template-columns: 1fr; }
  .sk-philo__copy, .sk-exp__copy { padding: 64px 32px; }
  .sk-philo__media, .sk-exp__media { min-height: 360px; }
  
  
}
@media (max-width: 767px) {
  .sk-stats { grid-template-columns: 1fr; gap: 16px; }
  
  
  .sk-philo__copy, .sk-exp__copy { padding: 56px 20px; }
  .sk-proof__list li { display: flex; }
}

/* ---------- Print ---------- */
@media print {
  .sk-header, .sk-bottombar, .sk-band, .sk-footer, .sk-btn, .sk-book { display: none !important; }
  body { background: #fff; color: #000; }
}

/* Package pricing, from the booking menu */
.sk-pkg { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--sk-line); }
.sk-pkg .sk-label { margin-bottom: 10px; }
.sk-pkg__list { margin: 0; }
.sk-pkg__row { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--sk-line); }
.sk-pkg__row:last-child { border-bottom: 0; }
.sk-pkg__row dt { margin: 0; font-size: 15px; color: var(--sk-ink); }
.sk-pkg__row dd { margin: 0; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sk-pkg__foot { margin-top: 12px; font-size: 13px; color: var(--sk-ink-2); }
.sk-pkg--row { max-width: 62ch; margin-top: 14px; }

/* Treatments: a link you can follow, plus a chevron that opens the panel */
.sk-nav__has-panel { display: flex; align-items: center; gap: 6px; }
.sk-nav__has-panel .sk-nav__toggle { min-width: 22px; min-height: 22px; justify-content: center; }
.sk-nav__list .current-page-ancestor > a, .sk-nav__list .current-page-parent > a, .sk-nav__list a[aria-current="true"] { color: var(--sk-deep); }
@media (max-width: 1024px) {
  body .sk-nav .sk-nav__has-panel { width: 100%; justify-content: space-between; gap: 12px; }
  body .sk-nav .sk-nav__has-panel > a { width: auto; flex: 1 1 auto; }
  body .sk-nav .sk-nav__has-panel .sk-nav__toggle { width: 44px; min-width: 44px; height: 44px; flex: 0 0 auto; justify-content: center; padding: 0; }
}


/* ---------- Franchise palette, September 2026 ----------
   Corrections that a token swap alone cannot make. See the design record.
   ------------------------------------------------------------------- */

/* Dark teal panels: white headings, pale mint for body and labels.
   --sk-accent-soft is soft sage now and cannot carry text on dark. */
.sk-footer__legal,
.sk-footer .sk-logo__loc,
.sk-footer .sk-sisters li span,
.sk-area { color: var(--sk-on-dark-2); }

/* Soft sage cannot carry text on light grounds either (1.9:1). */
.sk-special__tier { color: var(--sk-accent-text); }

/* The announcement bar carries a paragraph, so it takes the darker teal
   rather than the bright accent, per the palette rule. */
.sk-topbar { background: var(--sk-deep); }

/* Cards no longer lift off the ground by brightness, so they need an edge. */
.sk-card,
.sk-catcard,
.sk-ccard,
.sk-plan__tile,
.sk-price,
.sk-chart,
.sk-provider,
.sk-author { border: 1px solid var(--sk-line); }

/* Mint is only ever paired with charcoal, never white. */
.sk-btn--primary:hover,
a.sk-btn.sk-btn--primary:hover,
.sk-btn--primary:focus-visible,
a.sk-btn.sk-btn--primary:focus-visible {
  background: var(--sk-accent-hover);
  border-color: var(--sk-accent-hover);
  color: var(--sk-ink);
}

/* Keep the sample-offer chip reading as dashed after the border rule above. */
.sk-special--sample { border-style: dashed; }


/* ---------- Alternating section grounds ----------
   Page heroes take the alternating ground so every long page opens with a
   band, matching the treatment hero. .sk-alt-ground breaks a container out
   to full width and pushes its padding inward, so the ground is full-bleed
   while the content stays on the 1400px grid.
   ------------------------------------------------------------------- */
.sk-hero--page { background: var(--sk-bone); }
.sk-alt-ground {
  background: var(--sk-bone);
  max-width: none;
  margin-inline: 0;
  padding-inline: max(32px, calc((100% - 1400px) / 2));
}
.sk-alt-ground:not(.sk-section) { padding-block: var(--sk-section-m); }
@media (max-width: 767px) {
  .sk-alt-ground { padding-inline: 20px; }
}


/* Financing chips link out to each partner. */
.sk-chips__list li a { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.sk-chips__list li a:focus-visible { outline: 2px solid var(--sk-accent); outline-offset: 3px; }


/* Financing chip optical sizing, September 2026.
   Per-mark height comes from --sk-mark-h, set inline by sk_finance_chips().
   Matches this selector and !important so it wins over the flat 16px rule above. */
.sk-chips .sk-chips__list li img,
.elementor .sk-chips .sk-chips__list li img { height: var(--sk-mark-h, 16px) !important; }

/* Hero aside stack, September 2026. Layout to Natalie's spec, 10 Sep; type and
   colour on the theme's own tokens rather than one-off values.
   Square corners throughout. Row height is set by the quote card's content;
   the interior photo stretches to match. */
.sk-hstack { display: grid; grid-template-columns: 1fr; gap: 14px; }
.sk-hstack figure { margin: 0; min-width: 0; }
.sk-hstack img,
.elementor .sk-hstack img { display: block; border-radius: 0 !important; }

.sk-hstack__lead img {
	width: 100%;
	height: clamp(340px, 44vw, 500px);
	object-fit: cover;
	background: var(--sk-tint);
}

.sk-hstack__row { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; align-items: stretch; }

.sk-hstack__quote {
	background: var(--sk-tint);
	border-radius: 0;
	padding: 22px 24px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 18px;
}
.sk-hstack__quote blockquote {
	margin: 0;
	font-family: var(--sk-font-display);
	font-style: italic;
	font-weight: 400;
	font-size: 21px;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--sk-ink);
	text-wrap: pretty;
}
.sk-hstack__quote figcaption {
	font-family: var(--sk-font-body);
	font-size: 10.5px;
	font-weight: 400;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	line-height: 1.6;
	color: var(--sk-ink-2);
}

.sk-hstack__place img { width: 100%; height: 100%; min-height: 150px; object-fit: cover; }

/* Below ~420px the 1.15fr / 1fr split gets cramped, so stack: quote above reception. */
@media (max-width: 420px) {
	.sk-hstack__row { grid-template-columns: 1fr; gap: 14px; }
}

/* Hero rhythm, September 2026. The left column was an even 16px gap between every
   child, which read cramped at the top and sprawling overall. Spacing now varies the
   way the reference layout does: tight under the eyebrow, a breath after the headline,
   a longer pause before the financing rule.
   Elementor 4 does not render CSS classes on containers, only on widgets, so the two
   hero columns are selected by what they contain rather than by a class of their own. */
.e-con:has(> .sk-h-eyebrow) { gap: 0 !important; }
.sk-h-eyebrow { margin-top: 0; }
.sk-h-title   { margin-top: 14px; }
.sk-h-intro   { margin-top: 24px; }
.sk-h-actions { margin-top: 34px; }
.sk-h-finance { margin-top: 72px; }

/* Right column tracks the left: the portrait absorbs the leftover height, so the two
   columns finish level whatever the copy does. */
.e-con:has(> .elementor-widget-shortcode .sk-hstack) { justify-content: stretch; }
.elementor-widget-shortcode:has(.sk-hstack),
.elementor-widget-shortcode:has(.sk-hstack) > .elementor-widget-container,
.elementor-widget-shortcode:has(.sk-hstack) .elementor-shortcode {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}
.elementor-widget-shortcode:has(.sk-hstack) .sk-hstack { flex: 1 1 auto; grid-template-rows: minmax(0, 1fr) auto; }
.elementor-widget-shortcode:has(.sk-hstack) .sk-hstack__lead { min-height: 0; }
.elementor-widget-shortcode:has(.sk-hstack) .sk-hstack__lead img { height: 100%; min-height: 280px; }

/* Financing inside the hero. */
.sk-hfin {
	border-top: 1px solid var(--sk-line);
	padding-top: 26px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 32px;
	align-items: center;
}
.sk-hfin__label { color: var(--sk-accent-text); margin: 0 0 10px; }
.sk-hfin__text { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--sk-ink-2); max-width: 36ch; }
.sk-hfin .sk-chips { margin: 0; }
.sk-hfin .sk-chips__list { gap: 8px; }


@media (max-width: 900px) {
	.sk-hfin { grid-template-columns: 1fr; gap: 18px; align-items: start; }
	.sk-h-finance { margin-top: 44px; }
	.sk-h-actions { margin-top: 28px; }
	.elementor-widget-shortcode:has(.sk-hstack) .sk-hstack__lead img { height: clamp(300px, 44vw, 460px); }
}


/* Header collision, September 2026. Between roughly 1024px and 1280px the location
   label beside the logo overlapped the first nav item: both are nowrap, the header is
   a flex row, and neither side was allowed to shrink. */
.sk-header__inner > .sk-logo,
.sk-header__inner > .sk-nav { flex: 0 1 auto; min-width: 0; }
@media (max-width: 1280px) {
	.sk-nav { gap: 22px; }
	.sk-nav__list { gap: 20px; }
}
@media (max-width: 1180px) {
	.sk-logo__loc { display: none; }
}

/* Right hero column, corrected. The flex chain above was collapsing the two-up row
   under the portrait; height does the same job without reflowing the inner grid. */
.elementor-widget-shortcode:has(.sk-hstack),
.elementor-widget-shortcode:has(.sk-hstack) > .elementor-widget-container,
.elementor-widget-shortcode:has(.sk-hstack) .elementor-shortcode {
	display: block;
	height: 100%;
	min-height: 0;
	flex: 0 1 auto;
}
.elementor-widget-shortcode:has(.sk-hstack) .sk-hstack { height: 100%; grid-template-rows: minmax(0, 1fr) auto; }


/* Hero width, pinned explicitly. The Elementor kit already sets --container-max-width
   to 1400px, but that lives in generated CSS that regenerates on any kit change, so the
   hero is held to the same 1400px grid as .sk-container here where it is visible. */
.sk-el-hero > .e-con-inner { max-width: 1400px; margin-inline: auto; }

/* Hero content aligned with the sections below it.
   Both the hero and the services section are boxed containers on the same 1400 grid
   with 32px of side padding. The difference was one level deeper: the hero's inner row
   is a FULL container, and a full container that sets no padding of its own inherits the
   kit default of 32px. So the hero carried 32 + 32 per side against the services
   section's 32, pushing its content 64px narrower. Zeroing the inner row lines them up. */
.sk-el-hero .e-con-inner > .e-con {
	/* Set as real properties, not Elementor variables: the container reads its own
	   custom-property chain first, so overriding --padding-* alone did not take. */
	padding-left: 0 !important;
	padding-right: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}


/* Type hierarchy, September 2026. H1 leads, always.
   The membership price was set to 88px, larger than every H1 on the site; it now sits
   below them. The page and treatment hero titles were 60px and 56px against section
   headings at 56px, which read as the same level; both now clear them properly.
   Scale: display H1 80 / page H1 64 / section heading 56 / h2 44. */
.sk-membership__price { font-size: clamp(48px, 3vw + 20px, 72px) !important; }
h1 { font-size: clamp(40px, 2.6vw + 24px, 64px); }
.sk-hero--page .sk-hero__title { font-size: clamp(46px, 2.6vw + 26px, 64px); }
.sk-hero--treatment .sk-hero__title { font-size: clamp(46px, 2.6vw + 26px, 64px); }


/* ============================================================
   Hero rebuilt against skinovatio-ah.vercel.app, 10 Sep 2026.
   Values read from the reference build's own classes, not estimated.
   ============================================================ */

/* Grid. The reference is max-w-[1400px] with px-8 INSIDE it, so the box is 1400 and
   the content is 1336, uniformly on every section. The 32px is applied here, once,
   on the boxed inner, so no section can double it the way the hero used to. */
.sk-container { width: 100%; max-width: 1400px; margin-inline: auto; padding-inline: 32px; }
.e-con-boxed > .e-con-inner { max-width: 1400px; width: 100%; margin-inline: auto; padding-inline: 32px; }
@media (max-width: 767px) {
	.sk-container,
	.e-con-boxed > .e-con-inner { padding-inline: 20px; }
}

/* Hero section: pt-12/lg:pt-16, pb-14/lg:pb-20 in the reference. */
.sk-el-hero > .e-con-inner { padding-top: 48px; padding-bottom: 56px; }
@media (min-width: 1024px) {
	.sk-el-hero > .e-con-inner { padding-top: 64px; padding-bottom: 80px; }
}

/* Two columns: lg:grid-cols-[1.05fr_0.9fr], lg:gap-16, lg:items-stretch. */
.sk-el-hero .e-con-inner > .e-con {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 48px;
	align-items: stretch;
}
.sk-el-hero .e-con-inner > .e-con > .e-con { width: auto !important; max-width: none; }
@media (min-width: 1024px) {
	.sk-el-hero .e-con-inner > .e-con { grid-template-columns: 1.05fr 0.9fr; gap: 64px; }
}

/* Left column rhythm: mt-6 / mt-7 / mt-9, then the financing block pinned to the
   bottom with mt-auto, which is what makes the two columns finish level. */
.sk-el-hero .e-con-inner > .e-con > .e-con:first-child { display: flex; flex-direction: column; }
.sk-h-eyebrow { margin-top: 0; }
.sk-h-title   { margin-top: 24px; }
.sk-h-intro   { margin-top: 28px; }
.sk-h-actions { margin-top: 36px; }
.sk-h-finance { margin-top: auto; padding-top: 40px; border-top: 1px solid var(--sk-line); }
@media (min-width: 1024px) { .sk-h-finance { padding-top: 48px; } }

.sk-el-hero .sk-h-eyebrow .elementor-heading-title { font-size: 11.5px; letter-spacing: var(--sk-label-track); text-transform: uppercase; color: var(--sk-mushroom); font-weight: 500; }
.sk-el-hero .sk-h-intro { max-width: 448px; }
.sk-el-hero .sk-h-intro p { font-size: 18px; line-height: 1.625; color: rgba(41, 41, 41, 0.75); }

/* Financing block: justify-between with a 40px gap, copy capped at max-w-xs. */
.sk-hfin { border-top: 0; padding-top: 0; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 24px 40px; }
.sk-hfin__copy { max-width: 320px; }
.sk-hfin__label { font-size: 10.5px; letter-spacing: var(--sk-label-track); color: var(--sk-accent-text); margin: 0 0 12px; font-weight: 500; }
.sk-hfin__text { margin: 0; font-size: 14.4px; line-height: 1.625; color: rgba(41, 41, 41, 0.75); max-width: none; text-wrap: pretty; }
.sk-hfin__marks { padding-top: 4px; }
.sk-hfin .sk-chips__list { gap: 8px; }
.sk-hfin .sk-chips__list li { height: 36px; padding: 0 12px; border-radius: 6px; background: var(--sk-surface); border: 1px solid var(--sk-line); }

/* Right column: gap-5 throughout, 4/3 portrait with a soft drop shadow, then a
   1.1fr / 0.9fr row. The location image is h-full with a 190px floor, which is what
   holds it to the same height as the quote card beside it. */
.elementor-widget-shortcode:has(.sk-hstack) .sk-hstack { height: 100%; grid-template-rows: auto auto; gap: 20px; }
.sk-hstack__lead { filter: drop-shadow(0 22px 45px rgba(41, 41, 41, 0.14)); }
.sk-hstack__lead img,
.elementor-widget-shortcode:has(.sk-hstack) .sk-hstack__lead img {
	aspect-ratio: 4 / 3;
	height: auto;
	min-height: 0;
	width: 100%;
	object-fit: cover;
	border-radius: var(--sk-hero-radius) !important;
}
.sk-hstack__row { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: stretch; }
@media (min-width: 640px) { .sk-hstack__row { grid-template-columns: 1.1fr 0.9fr; } }

.sk-hstack__quote {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: var(--sk-bone);
	border-radius: var(--sk-tint-radius);
	padding: 28px;
	gap: 0;
}
.sk-hstack__quote blockquote {
	margin: 0;
	font-family: var(--sk-font-display);
	font-style: italic;
	font-size: 18px;
	line-height: 1.375;
	color: var(--sk-ink);
	text-wrap: pretty;
}
.sk-hstack__quote figcaption {
	margin-top: 24px;
	font-family: var(--sk-font-body);
	font-size: 10.5px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sk-mushroom);
}
.sk-hstack__place img,
.elementor-widget-shortcode:has(.sk-hstack) .sk-hstack__place img {
	height: 100%;
	min-height: 190px;
	width: 100%;
	object-fit: cover;
	border-radius: var(--sk-tint-radius) !important;
}

/* Teal bar: full-bleed ground, 1400 inner, py-5, items divided by hairlines. */
.sk-proof { background: var(--sk-deep); color: var(--sk-ink-on-dark); border: 0; }
.sk-proof__inner { display: block; }
.sk-proof__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0; padding: 20px 0; }
.sk-proof__list li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0 28px;
	border-right: 0;
	border-left: 1px solid rgba(250, 249, 246, 0.2);
	font-size: 13.8px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: none;
	color: var(--sk-ink-on-dark);
}
.sk-proof__list li:first-child { padding-left: 0; border-left: 0; }
.sk-proof__check { color: var(--sk-accent-hover); }
@media (max-width: 640px) {
	.sk-proof__list { flex-direction: column; align-items: flex-start; gap: 16px; }
	.sk-proof__list li { padding: 0; border-left: 0; }
}

/* H1 accent word, italic teal, matching the reference hero. */
.sk-h1-accent { font-style: italic; color: var(--sk-accent); }

/* Teal bar spans the viewport, content still on the 1400 grid.
   Its Elementor section is full-width now, so the ground runs edge to edge while
   .sk-proof__inner (.sk-container) holds the two lines to 1400 with the usual gutter. */
.sk-proof { width: 100%; }
.sk-proof__inner { display: block; }


/* ============================================================
   Section shell, 11 Sep 2026. Single source of truth for the grid.
   Every content shell on the site: a 1400px box, centred, with a 32px side
   gutter inside it (20px on phones), giving 1336px of content. Change the
   gutter here and it changes everywhere.

   Full-bleed sections (the teal proof bar, the closing band, the philosophy
   and experience grounds) keep their edge-to-edge colour; it is only the
   content inside them that sits on this shell.
   ============================================================ */
.sk-container,
.e-con-boxed > .e-con-inner,
.sk-exp {
	width: 100%;
	max-width: 1400px;
	margin-inline: auto;
	padding-inline: 32px;
}

/* Alternating tinted ground: full-bleed by design, so it holds the grid with a
   formula rather than a max-width. The trailing 32px is the same gutter. */
.sk-alt-ground {
	background: var(--sk-bone);
	max-width: none;
	margin-inline: 0;
	padding-inline: max(32px, calc((100% - 1400px) / 2 + 32px));
}

@media (max-width: 767px) {
	.sk-container,
	.e-con-boxed > .e-con-inner,
	.sk-exp { padding-inline: 20px; }
	.sk-alt-ground { padding-inline: max(20px, calc((100% - 1400px) / 2 + 20px)); }
}


/* Section shell, correction — 11 Sep 2026.
   Elementor 4.2.4 ships `.e-con > .e-con-inner { padding-inline: 0 }` in
   frontend.min.css, which loads after the theme stylesheet and has the same
   two-class specificity as the rule above, so every BOXED Elementor section was
   landing at 1400px of content flush to the box edge while the theme's own
   shells sat at 1336. Adding .e-con to the selector clears it without
   !important. No boxed container on the site nests another boxed container or a
   .sk-container, so the gutter cannot compound. */
.e-con.e-con-boxed > .e-con-inner {
	padding-inline: 32px;
}

@media (max-width: 767px) {
	.e-con.e-con-boxed > .e-con-inner { padding-inline: 20px; }
}


/* ============================================================
   Footer rebuilt against skinovatio-ah.vercel.app, 11 Sep 2026.
   Structure and rhythm read from the reference; type, colour and the
   1400/32 grid stay on our own tokens.

   Five bands stacked on the deep ground, each divided by a hairline:
   brand and navigation, treatments, sister locations, meta, disclaimer.
   The CTA strip that opens the reference's footer is our closing band,
   which sits directly above on the same ground, so it is not repeated.
   ============================================================ */
.sk-footer__main,
.sk-footer__treatments,
.sk-footer__sisters,
.sk-footer__meta,
.sk-footer__legal {
	position: relative;
}
.sk-footer__treatments,
.sk-footer__sisters,
.sk-footer__meta,
.sk-footer__legal {
	border-top: 1px solid rgba(250, 249, 246, 0.12);
}

/* Band rhythm: 64 for the main band, 56 for the two link bands, then fine print. */
.sk-footer__main { padding-block: 64px; }
.sk-footer__treatments,
.sk-footer__sisters { padding-block: 56px; }
.sk-footer__meta { padding-block: 32px; }
.sk-footer__legal { padding-block: 24px; }

/* Brand beside the link lists, which sit against the right edge of the grid. */
.sk-footer__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
@media (min-width: 1024px) {
	.sk-footer__main { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 64px; }
	.sk-footer__nav { justify-self: end; }
}

.sk-footer__tagline {
	margin: 24px 0 0;
	max-width: 26ch;
	font-family: var(--sk-font-display);
	font-size: 20px;
	font-style: italic;
	line-height: 1.35;
	color: var(--sk-accent-soft);
}
.sk-footer__brand .sk-nap { margin-top: 32px; }
.sk-footer__hours-label { margin: 32px 0 10px; }
.sk-footer__brand .sk-hours { margin: 0; max-width: 320px; }
.sk-footer .sk-footer__social { margin-top: 32px; }

.sk-footer__nav { display: flex; flex-wrap: wrap; gap: 40px 64px; }
@media (min-width: 640px) { .sk-footer__nav { gap: 40px 96px; } }
.sk-footer__navcol .sk-label { margin: 0 0 16px; }
.sk-footer__links { gap: 10px; }

/* Treatments get the full width the reference gives them: five columns on a
   desktop grid, three on a tablet, two on a phone. */
.sk-footer__groups {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px 32px;
	margin-top: 32px;
}
@media (min-width: 768px) { .sk-footer__groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sk-footer__groups { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Meta line: area served on the left, copyright held to the right. */
.sk-footer__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px 32px;
	font-size: 12.5px;
	letter-spacing: 0.06em;
	color: var(--sk-accent-soft);
}
.sk-footer__meta .sk-area { margin: 0; max-width: 70ch; }
.sk-footer__copy { margin: 0; text-transform: uppercase; }

.sk-footer__legal { font-size: 12.5px; line-height: 1.65; color: var(--sk-accent-soft); }
.sk-footer__legal p { margin: 0; max-width: 92ch; }

@media (max-width: 767px) {
	.sk-footer__main { padding-block: 48px; gap: 40px; }
	.sk-footer__treatments,
	.sk-footer__sisters { padding-block: 40px; }
	.sk-footer__groups { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 24px; }
	.sk-footer__nav { gap: 32px 40px; }
}

/* ============================================================
   Mobile hero and quick-action bar, 11 Sep 2026.
   Most patients book on a phone, so these are phone-width corrections.
   ============================================================ */

/* Hero vertical padding. Elementor 4.2.4 sets this from --padding-block-start
   in frontend.min.css, which loads after the theme at the same two-class
   specificity, so `.sk-el-hero > .e-con-inner` was silently losing and the hero
   opened on Elementor's 72px instead of ours. Adding .e-con wins it back
   without !important. Same trap as the container gutter, in a second place. */
.e-con.sk-el-hero > .e-con-inner { padding-top: 48px; padding-bottom: 56px; }
@media (min-width: 1024px) {
	.e-con.sk-el-hero > .e-con-inner { padding-top: 64px; padding-bottom: 80px; }
}

@media (max-width: 767px) {
	/* The announcement bar and header already spend 129px before the hero
	   starts, so the hero opens tighter on a phone. */
	.e-con.sk-el-hero > .e-con-inner { padding-top: 32px; padding-bottom: 40px; }

	/* Hero actions stack and run the full column width. */
	.sk-h-actions .elementor-widget-container,
	.sk-h-actions .elementor-widget-container > div {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}
	.sk-h-actions .sk-btn { width: 100%; }

	/* The financing block is pinned to the bottom of the left column with
	   margin-top: auto, which is what makes the two hero columns finish level on
	   a desktop. On a phone there is no spare height, so auto resolves to 0 and
	   the hairline lands flush on the button above it. Real clearance instead;
	   the selector matches the desktop rule so it actually wins. */
	.sk-el-hero .e-con-inner > .e-con > .e-con:first-child > .elementor-element:last-child {
		margin-top: 32px;
		padding-top: 24px;
	}
}

/* Quick-action bar: icon-only call and text, so the booking button keeps a
   readable one-line label. 56px square clears the 44px minimum tap target. */
.sk-bottombar .sk-bottombar__ico {
	flex: 0 0 56px;
	gap: 0;
	padding: 0;
}
.sk-bottombar--3 [data-sk="book"] { flex: 1 1 auto; }

/* Narrow phones: trim the bar so the booking label still reads on one line.
   The arrow is decorative, so it goes before the words do; 48px keeps the icon
   buttons above the 44px tap-target minimum. */
@media (max-width: 400px) {
	.sk-bottombar { padding-inline: 10px; gap: 8px; }
	.sk-bottombar .sk-bottombar__ico { flex: 0 0 48px; }
	.sk-bottombar [data-sk="book"] .sk-btn__ico { display: none; }
}

/* ============================================================
   Treatment menu, 11 Sep 2026. Structure read from the category pages of
   skinovatio-ah.vercel.app; type, colour and the grid stay ours.

   A row is the whole link: icon, copy, price, arrow. Four columns on a desktop,
   two on a phone, with the price and the arrow dropping to their own lines.
   Separate from .sk-trow, which the pricing page still uses.
   ============================================================ */

/* Eyebrow with the hairline the reference sets beside it. */
.sk-label--rule { display: flex; align-items: center; gap: 16px; }
.sk-label--rule::after { content: ""; flex: 0 0 64px; height: 1px; background: var(--sk-line-strong); }

/* "Not sure which one you need?" - the concerns this category treats. */
.sk-startwith { margin: 0 0 64px; padding: 28px; border-radius: var(--sk-inset-radius); background: var(--sk-bone); }
.sk-startwith__heading { margin: 0; font-family: var(--sk-font-display); font-size: 24px; line-height: 1.2; }
.sk-startwith__sub { margin: 8px 0 0; font-size: 14px; color: var(--sk-ink-2); max-width: 42ch; }
.sk-startwith__pills { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
@media (min-width: 1024px) {
	.sk-startwith { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; padding: 36px; }
	.sk-startwith__copy { flex: 0 0 auto; }
	.sk-startwith__pills { justify-content: flex-end; margin-top: 0; }
}

.sk-pill--quiet,
.sk-pill--accent {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 20px;
	border-radius: 999px;
	border: 1px solid var(--sk-line-strong);
	background: var(--sk-surface);
	font-size: 14px;
	line-height: 1.2;
	text-decoration: none;
	color: var(--sk-ink);
	transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}
.sk-pill--quiet:hover { border-color: var(--sk-deep); color: var(--sk-accent-text); }
.sk-pill--accent { border-color: var(--sk-deep); color: var(--sk-accent-text); font-weight: 500; }
.sk-pill--accent:hover { background: var(--sk-deep); color: var(--sk-ink-on-dark); }

/* Menu heading row: name left, count right, on one baseline. */
.sk-menu__head { display: flex; flex-direction: column; gap: 8px; padding-bottom: 20px; border-bottom: 1px solid var(--sk-ink); }
@media (min-width: 640px) { .sk-menu__head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; } }
.sk-menu__heading { margin: 0; font-family: var(--sk-font-display); font-size: clamp(30px, 2vw + 18px, 44px); line-height: 1.05; }
.sk-menu__meta { margin: 0; color: var(--sk-ink-2); }

.sk-menu__list { list-style: none; margin: 0; padding: 0; }
.sk-menu__row {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
	padding-block: 32px;
	border-bottom: 1px solid var(--sk-line);
	text-decoration: none;
	color: inherit;
}
@media (min-width: 768px) {
	/* A 15rem price column starves the name at tablet width, so the price column
	   stays narrow until there is room for both. */
	.sk-menu__row { grid-template-columns: 72px minmax(0, 1fr) 11rem auto; gap: 28px; padding-block: 36px; }
}
@media (min-width: 1024px) {
	.sk-menu__row { grid-template-columns: 72px minmax(0, 1fr) 15rem auto; gap: 36px; }
}

.sk-menu__icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--sk-tint-radius); background: var(--sk-tile); color: var(--sk-accent-text); }
.sk-menu__icon svg { width: 24px; height: 24px; }
@media (min-width: 768px) {
	.sk-menu__icon { width: 72px; height: 72px; }
	.sk-menu__icon svg { width: 28px; height: 28px; }
}

.sk-menu__copy { display: block; min-width: 0; }
.sk-menu__name { display: block; font-family: var(--sk-font-display); font-size: 24px; line-height: 1.15; text-wrap: balance; transition: color 150ms ease; }
@media (min-width: 768px) { .sk-menu__name { font-size: 26px; } }
.sk-menu__row:hover .sk-menu__name { color: var(--sk-accent-text); }
.sk-menu__line { display: block; margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--sk-ink-2); }
.sk-menu__note { display: block; margin-top: 12px; max-width: 60ch; font-family: var(--sk-font-display); font-style: italic; font-size: 15px; line-height: 1.5; color: var(--sk-ink-2); }

/* Price. The small-caps label only appears when there is a real price to label. */
.sk-menu__price { grid-column: 1 / -1; }
@media (min-width: 768px) { .sk-menu__price { grid-column: auto; } }
.sk-menu__kind { display: block; font-size: 11px; color: var(--sk-ink-2); }
.sk-menu__amount { display: block; margin-top: 6px; font-size: 15px; line-height: 1.4; }
.sk-menu__amount--consult { margin-top: 0; color: var(--sk-ink-2); font-style: italic; }

.sk-menu__go {
	grid-column: 1 / -1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	justify-self: start;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	border: 1px solid var(--sk-line-strong);
	color: var(--sk-ink);
	transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
@media (min-width: 768px) { .sk-menu__go { grid-column: auto; justify-self: end; } }
.sk-menu__row:hover .sk-menu__go { background: var(--sk-deep); border-color: var(--sk-deep); color: var(--sk-ink-on-dark); }

.sk-category__all { margin-top: 48px; }

/* ============================================================
   Category hero, 11 Sep 2026. The reference opens these pages on the plain
   page ground rather than the alternating band, so the menu below is the only
   thing carrying a tint. Scoped to category pages; other page heroes keep the
   band. The breadcrumbs also sat 8px off the eyebrow, which read as a collision
   rather than a stack.
   ============================================================ */
.sk-category .sk-hero--page,
.sk-pricing .sk-hero--page { background: transparent; }
.sk-hero .sk-crumbs { margin-bottom: 44px; }
@media (max-width: 767px) {
	.sk-hero .sk-crumbs { margin-bottom: 28px; }
}

/* ============================================================
   Full treatments menu and price list, 11 Sep 2026. Both pages stack the same
   category menu component, so the gap between sections and the anchor offset
   belong here rather than in either template. The jump nav reuses the quiet
   pill so it cannot drift from the concern pills on the category pages.
   ============================================================ */
.sk-jump { margin: 0 0 40px; }
@media (min-width: 768px) {
	.sk-jump { margin-bottom: 56px; }
}
.sk-jump__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }

.sk-menu + .sk-menu { margin-top: 64px; }
@media (min-width: 768px) {
	.sk-menu + .sk-menu { margin-top: 96px; }
}
/* Anchored sections must clear the fixed header when jumped to. */
.sk-menu[id] { scroll-margin-top: calc(var(--sk-header-h, 72px) + 24px); }

/* Whatever the page still needs to say sits below the menu, not above it. */
.sk-fullmenu__note { margin-top: 56px; }

/* ============================================================
   Mobile fixes, 11 Sep 2026: menu, section heads, gutters.
   Appended last so each rule wins over the earlier one it corrects.
   ============================================================ */

/* Announcement bar dismiss. The Elementor kit paints every <button> as a filled
   pill, which turned the quiet × into a teal disc against the screen edge. */
body .sk-topbar__close,
.elementor-kit-10 .sk-topbar__close {
	right: 6px;
	width: 40px;
	height: 40px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	box-shadow: none !important;
	color: inherit !important;
	font-size: 20px !important;
	line-height: 1 !important;
}

/* Panel taglines: soft sage on porcelain was too faint to read. */
.sk-panel__tag { color: var(--sk-accent-text); }

@media (max-width: 1024px) {
	/* Section heads. The stacked tablet/phone rule near the top of the file was
	   overridden by the base .sk-sechead rule that comes later (align-items:
	   flex-end), which pushed short headings and the 24rem aside to the right. */
	.sk-sechead { align-items: flex-start; gap: 20px; margin-bottom: 40px; }

	/* Experience block: .sk-exp already carries the gutter, so the copy's own
	   side padding put its text a second gutter in from the photo above it. */
	.sk-exp__copy { padding-inline: 0; }

	/* Frosted header: at 90% the photos scrolling underneath showed through as
	   grey smudges on a phone. Keep the blur, lose the smudge. */
	.sk-header.is-scrolled { background: rgba(250, 249, 246, 0.97); }

	/* Menu panel starts where the header really ends. main.js measures it on
	   open, so the announcement bar can no longer push the header underneath. */
	.sk-nav { top: var(--sk-nav-top, var(--sk-header-h)); bottom: 0; height: auto; }
	.sk-header__inner > .sk-logo,
	.sk-header__inner > .sk-burger { position: relative; z-index: 51; }

	/* Top-level rows a touch shorter so Call and Text sit higher. */
	.sk-nav__list a, .sk-nav__toggle, body .sk-nav .sk-nav__toggle, body .sk-nav .sk-nav__list a { padding-block: 14px; }

	/* Dropdowns open underneath their heading, full width, like an accordion.
	   Without wrapping, the panel sat beside the heading as a narrow column and
	   its first items were pushed above the scrollable area. */
	body .sk-nav .sk-nav__has-panel { flex-wrap: wrap; row-gap: 0; }
	body .sk-nav .sk-nav__has-panel > .sk-panel { flex: 0 0 100%; order: 3; margin: -4px 0 0; padding: 0 0 16px; }

	body .sk-nav .sk-nav__list a.sk-panel__item { gap: 2px; padding: 10px 0 !important; }
	body .sk-nav .sk-panel__tag { font-family: var(--sk-font-body); font-size: 10.5px; line-height: 1.4; }

	/* "See all" link: a small label, not a fourth menu heading. */
	body .sk-nav .sk-nav__list a.sk-panel__all {
		justify-content: flex-start;
		gap: 6px;
		margin: 4px 0 0;
		padding: 12px 0 4px !important;
		border-top: 0;
		font-family: var(--sk-font-body) !important;
		font-size: 11.5px !important;
		font-weight: 500;
		letter-spacing: 0.16em !important;
		text-transform: uppercase !important;
		color: var(--sk-deep) !important;
	}

	/* Accent dot (Pricing) moves into the gutter so every label shares one edge. */
	body .sk-nav .sk-nav__list .sk-nav__accent > a { position: relative; }
	body .sk-nav .sk-nav__list .sk-nav__accent > a::before { position: absolute; left: -18px; top: 50%; margin: -4px 0 0; }
}

@media (max-width: 767px) {
	/* Quick-action bar on the same 20px gutter as the page. */
	.sk-bottombar { padding-inline: 20px; }
}
@media (max-width: 400px) {
	.sk-bottombar { padding-inline: 16px; }
}


/* ============================================================
   Desktop header, 11 Sep 2026: "Book a consult" on one line.
   Between 1025px and 1439px the logo, nav and button did not fit, so the
   button label wrapped to two lines, the location label could run into
   "Treatments", and just above 1024px the button ran off the screen.
   Room is made in steps instead of forcing nowrap: the decorative arrow
   goes first, then the gaps tighten, then the location label stacks, then
   the nav type drops to the size the 1180px rule always intended.
   Each step keeps at least 17px spare, enough for a Windows scrollbar.
   From 1440px up the header is unchanged.
   ============================================================ */
@media (min-width: 1025px) {
	/* The logo keeps its proportions; it was being squeezed narrower. */
	.sk-header .sk-logo__img { max-width: none; }
}
@media (min-width: 1025px) and (max-width: 1439px) {
	.sk-nav__actions .sk-btn .sk-btn__ico { display: none; }
	.sk-header__inner { gap: 20px; }
	.sk-nav { gap: 22px; }
	.sk-nav__list { gap: 20px; }
	/* Chevron sits closer to its label, so plain items can keep an even gap. */
	.sk-nav__has-panel { gap: 2px; }
	.sk-nav__has-panel .sk-nav__toggle { min-width: 18px; }
	.sk-nav__actions .sk-btn { padding-inline: 20px; }
}
@media (min-width: 1025px) and (max-width: 1300px) {
	/* "Arlington / Heights" and "Lincoln / Park" stack beside the logo. */
	.sk-header .sk-logo__loc { width: min-content; white-space: normal; line-height: 1.35; }
	.sk-nav { gap: 18px; }
	.sk-nav__list { gap: 16px; }
	body .sk-nav__list a, body .sk-nav__toggle { font-size: 12px; letter-spacing: 0.1em; }
}
@media (min-width: 1025px) and (max-width: 1180px) {
	.sk-header__inner { gap: 16px; }
	.sk-header .sk-logo__img { height: 38px; }
	.sk-nav { gap: 16px; }
	.sk-nav__actions .sk-btn { padding-inline: 18px; }
	body .sk-nav__list a, body .sk-nav__toggle { font-size: 11.5px; }
}


/* ============================================================
   Treatment menu rows on phones, 11 Sep 2026.
   Below 768px the price and the arrow spanned the full row, so they sat
   under the icon instead of under the treatment name, and the arrow took a
   line of its own. They now share the name's column, arrow on the right.
   Hover styles are kept to real pointers: touch screens leave :hover on
   after a tap, which left one row teal with a filled arrow. The row link
   also no longer picks up the global mint link hover, which turned the
   price into low-contrast text.
   ============================================================ */
a.sk-menu__row:hover,
a.sk-menu__row:focus-visible { color: inherit; }

@media (max-width: 767px) {
	.sk-menu__row { grid-template-columns: 56px minmax(0, 1fr) auto; }
	.sk-menu__copy { grid-column: 2 / -1; }
	.sk-menu__price { grid-column: 2; }
	.sk-menu__go { grid-column: 3; justify-self: end; align-self: center; }
}

@media (hover: none) {
	.sk-menu__row:hover .sk-menu__name { color: inherit; }
	.sk-menu__row:hover .sk-menu__go { background: transparent; border-color: var(--sk-line-strong); color: var(--sk-ink); }
}


/* Mobile menu focus, 11 Sep 2026. A tap-opened menu takes focus on the menu
   container (tabindex -1) so screen readers start inside it; the container
   itself never draws an outline. Links inside keep their focus ring. */
.sk-nav:focus,
.sk-nav:focus-visible { outline: none; }


/* ============================================================
   Mobile menu dropdowns, 11 Sep 2026: easier to read.
   Page names were the same thin display serif as the section headings and
   sat on the same edge, so an open list read like more headings; taglines
   were 10.5px tracked capitals. Now the open list sits on a tinted card with
   a teal edge, page names use the body sans at 16px, taglines are 13px in
   sentence case, and the open section's heading turns teal.
   Section headings keep the serif. Desktop panels are unchanged.
   ============================================================ */
@media (max-width: 1024px) {
	body .sk-nav .sk-nav__has-panel > .sk-panel {
		margin: 0 0 18px;
		padding: 6px 16px 4px 18px;
		background: var(--sk-bone);
		border-left: 2px solid var(--sk-deep);
		border-radius: 0 12px 12px 0;
	}
	body .sk-nav .sk-nav__list .sk-nav__has-panel:has(> .sk-nav__toggle[aria-expanded="true"]) > a { color: var(--sk-deep) !important; }

	body .sk-nav .sk-panel__list { display: block; }
	body .sk-nav .sk-panel__list > li + li { border-top: 1px solid var(--sk-line); }
	body .sk-nav .sk-nav__list a.sk-panel__item { gap: 3px; padding: 13px 0 !important; border-radius: 0; }
	body .sk-nav .sk-panel__item:hover { background: transparent; }
	body .sk-nav .sk-panel__name { font-family: var(--sk-font-body); font-size: 16px; font-weight: 500; line-height: 1.3; color: var(--sk-ink); }
	body .sk-nav .sk-panel__tag { font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--sk-ink-2); }
	body .sk-nav .sk-nav__list a.sk-panel__all { margin: 0; padding: 14px 0 12px !important; border-top: 1px solid var(--sk-line); }
}

/* Coming soon: one screen, the header and nothing under it. */
.sk-soon { display: grid; place-items: center; text-align: center; padding-block: 64px 80px; min-height: calc(100vh - var(--sk-header-h) - 52px); min-height: calc(100svh - var(--sk-header-h) - 52px); }
.sk-soon__inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.sk-soon__eyebrow { margin: 0; color: var(--sk-mushroom); }
.sk-soon__title { font-family: var(--sk-font-display); font-weight: 400; font-size: clamp(68px, 16vw, 220px); line-height: 0.9; letter-spacing: -0.015em; margin: 0; color: var(--sk-deep); text-wrap: balance; }
.sk-soon__note { max-width: 46ch; color: var(--sk-ink-2); }
.sk-soon__note p { margin: 0; }
@media (max-width: 767px) {
  .sk-soon { padding-block: 48px 64px; min-height: calc(100svh - var(--sk-header-h) - 120px); }
  .sk-soon__inner { gap: 14px; }
}


/* ============================================================
   Label-only dropdowns (About), 11 Sep 2026.
   A top-level menu item whose URL is "#" has no page of its own. Its name
   is the button that opens the panel (sk-nav__toggle--label), so it must
   read exactly like the linked items beside it: same size, tracking and
   colour at every header width, and the chevron the same distance from
   its label as on Treatments and Priorities. On phones it is a full-width
   row with its chevron on the same edge as the other chevrons.
   ============================================================ */
.sk-nav__toggle--label .sk-nav__label { pointer-events: none; }

@media (min-width: 1025px) {
	body .sk-nav .sk-nav__list .sk-nav__toggle--label {
		gap: 10px;
		line-height: inherit;
		font-weight: 500;
		font-size: 12.5px !important;
		letter-spacing: 0.12em !important;
	}
	body .sk-nav .sk-nav__list .current-menu-ancestor > .sk-nav__toggle--label,
	body .sk-nav .sk-nav__list .current-menu-parent > .sk-nav__toggle--label { color: var(--sk-deep) !important; }
}
@media (min-width: 1025px) and (max-width: 1439px) {
	body .sk-nav .sk-nav__list .sk-nav__toggle--label { gap: 4px; }
}
@media (min-width: 1025px) and (max-width: 1300px) {
	body .sk-nav .sk-nav__list .sk-nav__toggle--label { font-size: 12px !important; letter-spacing: 0.1em !important; }
}
@media (min-width: 1025px) and (max-width: 1180px) {
	body .sk-nav .sk-nav__list .sk-nav__toggle--label { font-size: 11.5px !important; }
}

@media (max-width: 1024px) {
	body .sk-nav .sk-nav__has-panel > .sk-nav__toggle--label {
		width: 100%;
		min-width: 0;
		height: auto;
		min-height: 44px;
		flex: 1 1 100%;
		justify-content: space-between;
		padding: 14px 15px 14px 0;
		text-align: left;
	}
	body .sk-nav .sk-nav__list .sk-nav__toggle--label[aria-expanded="true"] { color: var(--sk-deep) !important; }
	body .sk-nav .sk-nav__list .sk-nav__toggle--label[aria-expanded="true"] .sk-nav__chev { color: var(--sk-ink); }
}

/* ============================================================
   Image treatment, 11 Sep 2026. Two treatments, never a hybrid.

   BAND: a full-width split that runs to the container edge, square
   corners, flush top and bottom. The photo is architecture, not a
   picture resting on a surface. The philosophy panel is the only one,
   which is why .sk-philo is no longer in the section shell above.

   INSET: anything sitting inside the shell gutter is a framed object
   and takes a radius from the scale. The experience section had been
   a hybrid, a 32px gutter with square corners, so the photo read as a
   rectangle pasted onto the ground. It is a proper inset block now:
   the shell gives it the side gutter, this gives it the vertical room,
   and the media carries the hero radius.
   ============================================================ */
.sk-exp {
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
	padding-block: var(--sk-section);
}
.sk-exp__media {
	min-height: 0;
	border-radius: var(--sk-hero-radius);
	overflow: hidden;
}
.sk-exp__media img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.sk-exp__copy { padding: 0; }

@media (max-width: 1024px) {
	.sk-exp {
		grid-template-columns: 1fr;
		gap: 40px;
		padding-block: var(--sk-section-m);
	}
	.sk-exp__media { min-height: 0; }
}
@media (max-width: 767px) {
	.sk-exp { gap: 32px; }
	.sk-exp__media { border-radius: var(--sk-tint-radius); }
}

/* Results block: three role claims beside a captioned figure. The figure is
   the inset pattern at card radius, matching the service cards; the stats
   reuse .sk-stats and .sk-figcard from the original build. */
.sk-results {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}
.sk-results__copy .sk-intro { margin-top: 24px; }
@media (max-width: 1024px) {
	.sk-results { grid-template-columns: 1fr; gap: 40px; }
}
.sk-figcard__quote { font-style: italic; line-height: 1.35; text-wrap: balance; }

/* FAQ card, 11 Sep 2026. It was the one card still filled with tint. On a
   bone section that is only ~16 RGB points of separation, and it read as a
   flat area rather than a panel. It now uses the same surface-plus-edge
   treatment as every other card on the site, so it reads the same way on
   paper and on bone. */
.sk-faq { background: var(--sk-surface); border: 1px solid var(--sk-line); }

/* ============================================================
   Treatment page, 11 Sep 2026.

   A treatment page carries 2,500 to 3,700 words. It used to render as one
   prose column, which meant no way to scan it and no way to jump. The body
   is now split at every h2 (inc/treatment.php) into real sections, so the
   page has three new parts: the at-a-glance band, the sticky jump nav, and
   the sections themselves on alternating grounds.
   ============================================================ */

/* At a glance. Six facts across, directly under the hero, where the old
   version was a vertical list buried in the body. */
.sk-glance {
	background: var(--sk-bone);
	border-top: 1px solid var(--sk-line);
	border-bottom: 1px solid var(--sk-line);
}
.sk-glance__title { margin: 0; padding-top: 30px; color: var(--sk-mushroom); }
.sk-glance__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 28px 24px;
	margin: 0;
	padding: 22px 0 34px;
}
.sk-glance__item { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sk-glance__ico { color: var(--sk-deep); }
.sk-glance__label {
	margin: 0;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: var(--sk-label-track);
	text-transform: uppercase;
	color: var(--sk-mushroom);
}
.sk-glance__value { margin: 0; font-size: 15px; line-height: 1.4; color: var(--sk-ink); text-wrap: pretty; }
@media (max-width: 1024px) {
	.sk-glance__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.sk-glance__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; padding-bottom: 28px; }
}

/* Jump nav. Sticks directly under the header; scrolls sideways on phones
   rather than wrapping, so it never takes two rows off the viewport. */
.sk-jump {
	position: sticky;
	top: var(--sk-header-h);
	z-index: 20;
	background: var(--sk-bg);
	border-bottom: 1px solid var(--sk-line);
}
@supports (backdrop-filter: blur(8px)) {
	.sk-jump { background: color-mix(in srgb, var(--sk-bg) 88%, transparent); backdrop-filter: blur(8px); }
}
.sk-jump__list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}
.sk-jump__list::-webkit-scrollbar { display: none; }
.sk-jump__list li { flex: 0 0 auto; }
.sk-jump__list a {
	display: block;
	white-space: nowrap;
	border-radius: 999px;
	padding: 8px 14px;
	font-size: 14px;
	line-height: 1.3;
	color: var(--sk-ink-2);
	text-decoration: none;
	transition: background-color 150ms ease, color 150ms ease;
}
.sk-jump__list a:hover,
.sk-jump__list a:focus-visible { background: var(--sk-bone); color: var(--sk-ink); }

/* Sections. Two columns, always. Which two depends on what the section holds:
   prose beside its own component, a capped lead above a wide component, or a
   pinned heading beside a long read. A heading sitting on top of a full-width
   column of text is what made these pages read as an article, so it is the one
   arrangement that never happens here. */
.sk-tsection {
	border-bottom: 1px solid var(--sk-line);
	scroll-margin-top: calc(var(--sk-header-h) + 52px);
	padding-block: 96px;
}
.sk-tsection--bone { background: var(--sk-bone); }
.sk-tsection--full { padding-block: 72px; }

.sk-tsec--split,
.sk-tsec--sticky { display: grid; gap: 64px; align-items: start; }
.sk-tsec--split  { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.sk-tsec--sticky { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); }

.sk-tsec__head { max-width: 28rem; }
.sk-tsec__head .sk-eyebrow { margin-bottom: 14px; }
.sk-tsec__title {
	margin: 0;
	padding-top: 0;
	border-top: 0;
	font-size: clamp(30px, 1.1vw + 22px, 40px);
	line-height: 1.08;
	text-wrap: balance;
}
.sk-tsec__rule { display: block; width: 48px; height: 1px; margin-top: 18px; background: var(--sk-accent-soft); }
.sk-tsec__prose { margin-top: 26px; max-width: 28rem; }
.sk-tsec__payload { max-width: none; }
.sk-tsec__body { max-width: 46rem; }
.sk-tsec__full { max-width: none; }
.sk-tsec--stack .sk-tsec__head,
.sk-tsec--stack .sk-tsec__prose { max-width: 40rem; }
.sk-tsec__wide { max-width: none; margin-top: 48px; }

/* The long reference sections keep their heading pinned beside the text
   instead of stacked above it, which is what stops a 1,200 word run from
   reading as an article. */
.sk-tsec--sticky .sk-tsec__head { position: sticky; top: calc(var(--sk-header-h) + 72px); max-width: none; }
.sk-tsec--sticky .sk-tsec__title { font-size: clamp(26px, 0.8vw + 20px, 32px); }

.sk-tsection .sk-prose h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.sk-tsection .sk-faq,
.sk-tsection .sk-related { margin: 0; }
.sk-tsection .sk-related { padding-top: 0; border-top: 0; }
.sk-tsec__payload > *:first-child,
.sk-tsec__wide > *:first-child,
.sk-tsec__prose > *:first-child { margin-top: 0; }
.sk-tsection--bone .sk-prose a:not(.sk-btn):not(.sk-link) { color: var(--sk-link-on-alt); }

@media (max-width: 1024px) {
	.sk-tsection { padding-block: 72px; }
	.sk-tsec--split,
	.sk-tsec--sticky { grid-template-columns: 1fr; gap: 36px; }
	.sk-tsec--sticky .sk-tsec__head { position: static; }
	.sk-tsec__head,
	.sk-tsec__prose,
	.sk-tsec--stack .sk-tsec__head,
	.sk-tsec--stack .sk-tsec__prose { max-width: none; }
	.sk-tsec__wide { margin-top: 36px; }
}
@media (max-width: 767px) {
	.sk-tsection { padding-block: 56px; }
}

/* Steps in a wide section read as four moments across, not a stacked list. */
.sk-tsec__wide .sk-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; margin: 0; }
.sk-tsec__wide .sk-steps__item { display: block; }
.sk-tsec__wide .sk-steps__num { margin-bottom: 20px; }
.sk-tsec__wide .sk-steps__title { margin-top: 0; }
@media (max-width: 1024px) {
	.sk-tsec__wide .sk-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 28px; }
}
@media (max-width: 600px) {
	.sk-tsec__wide .sk-steps { grid-template-columns: 1fr; gap: 28px; }
}

/* The treatment h1 keeps the primary phrase; the search tail sits under it in
   italic display, the way the reference does it. */
.sk-hero__sub {
	margin-top: 12px;
	font-family: var(--sk-font-display);
	font-style: italic;
	font-size: clamp(19px, 0.5vw + 16px, 23px);
	line-height: 1.3;
	color: var(--sk-ink-2);
}

/* The jump nav says where you are, not just where you can go. */
.sk-jump__list a.is-active,
.sk-jump__list a.is-active:hover {
	background: var(--sk-deep);
	color: var(--sk-ink-on-dark);
}

/* ============================================================
   Category arch hero, 11 Sep 2026.

   No photograph, which is the point: one SVG path draws a wide shallow dome,
   filled with a gradient that fades out before the bottom, over a faintly
   green ground, with a soft fade at the foot so the band dissolves into the
   page instead of ending on a rule. Everything is centred.
   ============================================================ */
:root {
	--sk-arch-ground: color-mix(in srgb, var(--sk-tile) 68%, var(--sk-bone));
	--sk-arch-light: color-mix(in srgb, var(--sk-tile) 50%, #ffffff);
}
.sk-arch {
	position: relative;
	overflow: hidden;
	background: var(--sk-arch-ground);
}
.sk-arch__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.sk-arch__fade {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 128px;
	background: linear-gradient(to bottom, transparent, var(--sk-bg));
	pointer-events: none;
}
.sk-arch__inner {
	position: relative;
	text-align: center;
	padding-block: 176px 112px;
}
.sk-arch .sk-crumbs ol { justify-content: center; }
.sk-arch__eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin: 0;
	font-family: var(--sk-font-body);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: var(--sk-label-track);
	text-transform: uppercase;
	color: var(--sk-accent-text);
}
.sk-arch__rule { display: block; width: 48px; height: 1px; background: color-mix(in srgb, var(--sk-deep) 30%, transparent); }
.sk-arch__title {
	margin: 28px auto 0;
	max-width: 18ch;
	font-family: var(--sk-font-display);
	font-weight: 400;
	font-size: clamp(48px, 3.4vw + 28px, 72px);
	line-height: 1;
	color: var(--sk-ink);
	text-wrap: balance;
}
.sk-arch__intro {
	margin: 24px auto 0;
	max-width: 42rem;
	font-size: 18px;
	line-height: 1.55;
	color: var(--sk-ink-2);
	text-wrap: pretty;
}
.sk-arch__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 20px;
	margin-top: 36px;
}
.sk-arch__meta {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: var(--sk-label-track);
	text-transform: uppercase;
	color: color-mix(in srgb, var(--sk-ink) 50%, transparent);
}
/* The arch button carries no arrow; the label is the whole thing. */
.sk-btn--plain .sk-btn__ico { display: none; }

/* The category's own words sit under the hero now, centred to match it. */
.sk-category__lede {
	max-width: 46rem;
	margin-inline: auto;
	text-align: center;
	margin-bottom: 56px;
}

@media (max-width: 1024px) {
	.sk-arch__inner { padding-block: 120px 80px; }
}
@media (max-width: 767px) {
	.sk-arch__inner { padding-block: 72px 56px; }
	.sk-arch__rule { width: 28px; }
	.sk-arch__fade { height: 88px; }
	.sk-category__lede { text-align: left; margin-bottom: 40px; }
}

/* 11 Sep 2026 - service cards: cap the tall first card's photo at 616px.
   Only the 3-column layout stretches this card across two rows; at 1024 and
   below it is already a 4:3 card well under the cap, so the cap is scoped out. */
@media (min-width: 1025px) {
  .sk-catcard:first-child { align-self: start; }
  .sk-catcard:first-child .sk-catcard__media { flex: 0 0 auto; height: 616px; }
  .sk-catcard:first-child .sk-catcard__media img { height: 100%; max-height: 616px; aspect-ratio: auto; }
}

/* 12 Sep 2026 - service cards: when the grid carries the CTA card, column one
   becomes one stack (tall first card on top, CTA beneath it) whose bottom edge
   lines up with the bottom of the 2x2 block beside it.

   Three rows instead of two do the work, with no hardcoded heights: row 3 is
   sized by the CTA, the Hair and Wellness cards span rows 2-3, and the first
   card spans rows 1-2. Row 2 therefore resolves to whatever is left of those
   cards after the CTA's row, which lands the first card at roughly three
   quarters of the column and the CTA at the remaining quarter. The first
   card's photo flexes to fill, so it crops rather than leaving a gap, which
   also supersedes the 616px cap above in this case.

   Scoped with :has() so a grid without a CTA (the treatments index) keeps the
   two-row layout and the cap untouched. */
@media (min-width: 1025px) {
  .sk-catgrid:has(.sk-catcard--cta) > .sk-catcard:nth-child(1) { grid-column: 1; grid-row: 1 / 3; align-self: stretch; height: auto; }
  .sk-catgrid:has(.sk-catcard--cta) > .sk-catcard:nth-child(2) { grid-column: 2; grid-row: 1; }
  .sk-catgrid:has(.sk-catcard--cta) > .sk-catcard:nth-child(3) { grid-column: 3; grid-row: 1; }
  .sk-catgrid:has(.sk-catcard--cta) > .sk-catcard:nth-child(4) { grid-column: 2; grid-row: 2 / 4; }
  .sk-catgrid:has(.sk-catcard--cta) > .sk-catcard:nth-child(5) { grid-column: 3; grid-row: 2 / 4; }
  .sk-catgrid:has(.sk-catcard--cta) > .sk-catcard--cta { grid-column: 1; grid-row: 3; align-self: stretch; }
  .sk-catgrid:has(.sk-catcard--cta) > .sk-catcard:nth-child(1) .sk-catcard__media { flex: 1 1 auto; height: auto; min-height: 0; overflow: hidden; }
  .sk-catgrid:has(.sk-catcard--cta) > .sk-catcard:nth-child(1) .sk-catcard__media img { height: 100%; max-height: none; aspect-ratio: auto; object-fit: cover; }
}