/*
 Theme Name: Skinovatio Child
 Theme URI: https://skinovatioohio.com
 Description: Custom child theme for Skinovatio Medical Spa, built on Hello Elementor.
 Author: LAVACK DESIGN
 Author URI: https://lavackdesign.com/
 Template: hello-elementor
 Version: 2.0.0
 License: GNU General Public License v3 or later
 License URI: https://www.gnu.org/licenses/gpl-3.0.html
 Text Domain: skinovatio-child
*/

/* ==========================================================================
   Skinovatio Brand Variables
   ========================================================================== */

:root {
  /* Brand Colors — June 2026 Rebrand
     Teal + Fuchsia + Dark Purple-Black + Beige */
  --sk-teal: var(--e-global-color-primary, #61B09A);        /* Teal — icons, accents, hovers */
  --sk-teal-dark: var(--e-global-color-secondary, #2D1B2E); /* Purple-Black — headers, nav, footer, accents */
  --sk-teal-light: var(--e-global-color-sk_teal_light, #61B09A); /* Teal */
  --sk-fuchsia: var(--e-global-color-sk_fuchsia, #C63272);  /* Fuchsia — buttons, CTAs, offers */
  --sk-cream: var(--e-global-color-accent, #F2EDE5);        /* Beige — section dividers, cards */
  --sk-dark: var(--e-global-color-sk_dark, #2D1B2E);        /* Purple-Black — headlines */
  --sk-text: var(--e-global-color-text, #2D1B2E);           /* Purple-Black — body text */
  --sk-white: var(--e-global-color-sk_white, #FFFFFF);
  --sk-off-white: var(--e-global-color-sk_off_white, #F9F6F3);
  --sk-gray-light: var(--e-global-color-sk_gray_light, #F2EDE5); /* Beige */
  --sk-gray: var(--e-global-color-sk_gray, #6E5E73);        /* Muted Plum — supporting text */
  --sk-footer-bg: var(--e-global-color-sk_footer_bg, #2D1B2E);   /* Purple-Black */
  --sk-footer-dark: var(--e-global-color-sk_footer_dark, #1E1220);
  --sk-rose: #F8E7EF;                                       /* Fuchsia Tint — special offers, testimonials */
  --sk-sand: #F2EDE5;                                       /* Beige */
  --sk-slate: #6E5E73;                                      /* Muted Plum — captions */

  /* Derived */
  --sk-cta-hover: #2D1B2E;       /* button hover fill (purple-black) */
  --sk-teal-dark-hover: #1E1220; /* darkened purple-black */

  /* Typography */
  --sk-font-heading: 'Playfair Display', Georgia, serif;
  --sk-font-body: 'Lato', 'Helvetica Neue', Arial, sans-serif;

  /* Spacing */
  --sk-section-padding: 100px 0;
  --sk-container-width: 1200px;

  /* Transitions */
  --sk-transition: all 0.3s ease;
}

/* ==========================================================================
   Google Fonts (loaded via functions.php, fallback here)
   ========================================================================== */

/* ==========================================================================
   Global Resets & Base Styles
   ========================================================================== */

body {
  font-family: var(--sk-font-body);
  font-weight: 300;
  color: var(--sk-text);
  background-color: var(--sk-white);
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Default body text color — Elementor widget-level and global colors can override */
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor span,
.elementor-widget-text-editor li {
  color: var(--sk-text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sk-font-heading);
  font-weight: 700;
  color: var(--sk-dark);
  line-height: 1.2;
}

/* Section headings — dark for visual weight & hierarchy */
h2 {
  color: var(--sk-dark);
}

/* Card/subsection headings — teal accent for variety */
h3 {
  color: var(--sk-teal-dark);
}

h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
h4 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }

p {
  margin-bottom: 1.2em;
  color: var(--sk-text);
}

a {
  color: var(--sk-teal-dark);
  text-decoration: none;
  transition: var(--sk-transition);
}

a:hover {
  color: var(--sk-teal);
}

img {
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.elementor-button,
.sk-btn {
  font-family: var(--sk-font-body) !important;
  font-weight: 400 !important;
  letter-spacing: 0.03em !important;
  text-transform: none !important;
  border-radius: 50px !important;
  padding: 14px 32px !important;
  font-size: 15px !important;
  transition: var(--sk-transition) !important;
}

/* Primary Button — Fuchsia fill with White text */
.sk-btn-primary,
.elementor-button.elementor-button-primary {
  background-color: var(--sk-fuchsia) !important;
  color: var(--sk-white) !important;
  border: 2px solid var(--sk-fuchsia) !important;
}

.sk-btn-primary:hover,
.elementor-button.elementor-button-primary:hover {
  background-color: var(--sk-cta-hover) !important;
  color: var(--sk-white) !important;
  border-color: var(--sk-cta-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(198, 50, 114, 0.3);
}

/* Secondary Button - Outline (fuchsia) */
.sk-btn-secondary {
  background-color: transparent !important;
  color: var(--sk-fuchsia) !important;
  border: 2px solid var(--sk-fuchsia) !important;
}

.sk-btn-secondary:hover {
  background-color: var(--sk-fuchsia) !important;
  color: var(--sk-white) !important;
}

/* Dark Button */
.sk-btn-dark {
  background-color: var(--sk-dark) !important;
  color: var(--sk-white) !important;
  border: 2px solid var(--sk-dark) !important;
}

.sk-btn-dark:hover {
  background-color: var(--sk-text) !important;
  border-color: var(--sk-text) !important;
}

/* ==========================================================================
   Header
   ========================================================================== */

/* Sticky header — always visible at top */
.site-header,
.elementor-location-header {
  background-color: var(--sk-white);
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.05);
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  transition: box-shadow 0.3s ease;
}

/* Enhanced shadow when scrolled */
.elementor-location-header.sk-scrolled {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

/* WP admin bar offset */
.admin-bar .elementor-location-header {
  top: 32px !important;
}
@media (max-width: 782px) {
  .admin-bar .elementor-location-header {
    top: 46px !important;
  }
}

.site-header .site-branding img {
  max-height: 80px;
  width: auto;
}

/* Header logo sizing — BIGGER per client request (round 3) */
.elementor-location-header .elementor-widget-image img {
  width: 380px !important;
  max-width: 380px !important;
  height: auto !important;
}

.elementor-location-header .elementor-widget-image {
  width: 380px !important;
  flex-shrink: 0 !important;
}

/* Nav Links — compact for 8 items */
.elementor-nav-menu .elementor-item {
  font-family: var(--sk-font-body) !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  letter-spacing: 0.01em !important;
  color: var(--sk-dark) !important;
  transition: var(--sk-transition) !important;
  padding: 0 7px !important;
}
/* Force nav to single line */
.elementor-nav-menu--main {
  flex-wrap: nowrap !important;
}

.elementor-nav-menu .elementor-item:hover,
.elementor-nav-menu .elementor-item.elementor-item-active {
  color: var(--sk-teal-dark) !important;
}

/* Header 3-zone balanced layout — force row direction, logo | nav | CTA */
@media (min-width: 1025px) {
  .elementor-element-hdr_inner > .e-con-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
  }
  .elementor-element-hdr_logo_wrap {
    width: 360px !important;
    min-width: 360px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
  }
  .elementor-element-hdr_nav_wrap {
    flex-grow: 1 !important;
    display: flex !important;
    justify-content: center !important;
  }
  .elementor-element-hdr_cta_wrap {
    width: auto !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
  }
}

/* Desktop header buttons — identical style, all caps, centered */
.sk-header-call,
.elementor-location-header .elementor-widget-button .elementor-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  font-family: var(--sk-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border-radius: 30px !important;
  padding: 0 24px !important;
  height: 40px !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  background-color: var(--sk-fuchsia) !important;
  color: #fff !important;
  border: 2px solid var(--sk-fuchsia) !important;
  transition: all 0.2s ease !important;
}

.sk-header-call:hover,
.elementor-location-header .elementor-widget-button .elementor-button:hover {
  background-color: #fff !important;
  color: var(--sk-fuchsia) !important;
  border-color: var(--sk-fuchsia) !important;
}

/* ==========================================================================
   Mega Menu — Services Dropdown (desktop only)
   ========================================================================== */

@media (min-width: 768px) {

  /* Anchor the mega menu to the Services parent li */
  .elementor-nav-menu > li:has(> .sub-menu > .mega-menu-column-header) {
    position: relative !important;
  }

  /* First-level dropdown containing category columns — hidden by default */
  .elementor-nav-menu > li > .sub-menu:has(> .mega-menu-column-header) {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    min-width: 750px !important;
    max-width: 860px !important;
    background: var(--sk-white) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.10) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-top: 3px solid var(--sk-teal-dark) !important;
    border-radius: 0 0 8px 8px !important;
    padding: 28px 32px !important;
    margin: 0 !important;
    z-index: 9999 !important;
  }

  /* Show mega menu on hover — override SmartMenus */
  .elementor-nav-menu > li:hover > .sub-menu:has(> .mega-menu-column-header),
  .elementor-nav-menu > li:focus-within > .sub-menu:has(> .mega-menu-column-header) {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
  }

  /* Category column container */
  .mega-menu-column-header {
    flex: 1 !important;
    padding: 0 24px !important;
    border-right: none !important;
    list-style: none !important;
    background: transparent !important;
  }

  /* Category heading link */
  .mega-menu-column-header > a {
    font-family: var(--sk-font-body) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--sk-dark) !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
    padding: 0 0 12px 0 !important;
    margin-bottom: 8px !important;
    display: block !important;
    border-bottom: none !important;
    background: transparent !important;
  }

  .mega-menu-column-header > a:hover {
    color: var(--sk-teal-dark) !important;
  }

  /* Hide SmartMenus sub-arrows on category headers */
  .mega-menu-column-header > a > .sub-arrow {
    display: none !important;
  }

  /* Service links list — always visible within column, not a flyout */
  .mega-menu-column-header > .sub-menu {
    display: block !important;
    position: static !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: unset !important;
    width: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    top: auto !important;
    left: auto !important;
  }

  /* Individual service link item */
  .mega-menu-column-header > .sub-menu > li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  .mega-menu-column-header > .sub-menu > li > a {
    font-family: var(--sk-font-body) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--sk-dark) !important;
    padding: 6px 12px !important;
    border-radius: 4px !important;
    display: block !important;
    transition: var(--sk-transition) !important;
    line-height: 1.6 !important;
    background: transparent !important;
  }

  .mega-menu-column-header > .sub-menu > li > a:hover {
    color: var(--sk-teal-dark) !important;
    background: var(--sk-sand) !important;
  }
}

/* ==========================================================================
   Standard Sub-Menu Dropdowns (Academy, etc.)
   ========================================================================== */

@media (min-width: 768px) {
  /* Standard dropdown — matches mega-menu panel style */
  .elementor-nav-menu > li > .sub-menu:not(:has(> .mega-menu-column-header)) {
    background: var(--sk-white) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.10) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-top: 3px solid var(--sk-teal-dark) !important;
    border-radius: 0 0 8px 8px !important;
    padding: 20px 24px !important;
    min-width: 200px !important;
  }

  .elementor-nav-menu > li > .sub-menu:not(:has(> .mega-menu-column-header)) > li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  .elementor-nav-menu > li > .sub-menu:not(:has(> .mega-menu-column-header)) > li > a {
    font-family: var(--sk-font-body) !important;
    font-size: 14px !important;
    color: var(--sk-dark) !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    display: block !important;
    transition: var(--sk-transition) !important;
  }

  .elementor-nav-menu > li > .sub-menu:not(:has(> .mega-menu-column-header)) > li > a:hover,
  .elementor-nav-menu > li > .sub-menu:not(:has(> .mega-menu-column-header)) > li > a:focus,
  .elementor-nav-menu > li > .sub-menu:not(:has(> .mega-menu-column-header)) > li:hover > a,
  .elementor-nav-menu > li > .sub-menu:not(:has(> .mega-menu-column-header)) > li.highlighted > a,
  .elementor-nav-menu > li > .sub-menu:not(:has(> .mega-menu-column-header)) > li > a.elementor-item-active {
    color: var(--sk-teal-dark) !important;
    background: var(--sk-sand) !important;
  }
}

/* ==========================================================================
   Sections & Layout
   ========================================================================== */

/* Homepage split-layout sections — force side-by-side on desktop
   Elementor boxed containers use .e-con-inner with gap: 40px.
   Children at 45%+55% = 100% + 40px gap = overflow → wrap.
   Fix: target the inner wrapper and use flex-shrink to accommodate gap. */
@media (min-width: 768px) {
  /* Hero: text left ~45%, image right ~55% */
  .elementor-element-b1hero0 > .e-con-inner {
    flex-wrap: nowrap !important;
  }
  .elementor-element-b2left1 {
    width: 45% !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
  .elementor-element-b6rght5 {
    width: 55% !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  /* "Why Skinovatio": image left ~48%, text right ~48% */
  .elementor-element-d1abt0a > .e-con-inner {
    flex-wrap: nowrap !important;
  }
  .elementor-element-d2img1b {
    width: 48% !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
  .elementor-element-d4txt3d {
    width: 48% !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  /* "Visit Us": text left ~48%, image right ~48% */
  .elementor-element-g1cnt0a > .e-con-inner {
    flex-wrap: nowrap !important;
  }
  .elementor-element-g2lft1b {
    width: 48% !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
  .elementor-element-g6rgt5c {
    width: 48% !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  /* About page — Philosophy: text left ~55%, teal card right ~40% */
  .elementor-element-abt010 > .e-con-inner {
    flex-wrap: nowrap !important;
  }
  .elementor-element-abt011 {
    width: 55% !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
  .elementor-element-abt015 {
    width: 40% !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  /* About — restyle teal gradient quote box to match site aesthetic */
  .elementor-element-abt015 {
    background: var(--sk-cream) !important;
    border-left: 4px solid var(--sk-teal-dark) !important;
    border-radius: 8px !important;
    padding: 40px 36px !important;
    display: flex !important;
    align-items: center !important;
  }
  .elementor-element-abt015 .elementor-heading-title {
    color: var(--sk-text) !important;
    font-family: var(--sk-font-heading) !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: 22px !important;
    line-height: 1.5 !important;
  }

  /* About page — "Why Patients Trust Us" cards: 2x2 grid wrap */
  .elementor-element-abt032 > .e-con-inner {
    flex-wrap: wrap !important;
    gap: 24px !important;
  }

  /* Contact page — info row: left 45%, right 55% */
  .elementor-element-ct_info_inner > .e-con-inner {
    flex-wrap: nowrap !important;
  }
  .elementor-element-ct_info_left {
    width: 45% !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
  .elementor-element-ct_info_right {
    width: 55% !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
}

/* Placeholder images — rounded corners */
.elementor-widget-image img[src*="placeholder.png"] {
  border-radius: 12px;
}

/* Services page — category & detail cards: image flush at top */
.elementor-element[class*="svc01"] .elementor-widget-image img[src*="placeholder.png"],
.elementor-element[class*="sc10"] .elementor-widget-image img[src*="placeholder.png"] {
  border-radius: 0;
}

/* ==========================================================================
   Site-Wide Hero Split Layout — Text Left (~45%) + Image Right (~55%)
   ========================================================================== */
@media (min-width: 768px) {
  /* All hero containers that use row direction with two inner columns */
  .e-con.e-parent[data-id$="_hero"] > .e-con-inner,
  .e-con.e-parent[data-id="b1hero0"] > .e-con-inner,
  .e-con.e-parent[data-id="abt001"] > .e-con-inner,
  .e-con.e-parent[data-id="svc001"] > .e-con-inner,
  .e-con.e-parent[data-id="ct_hero"] > .e-con-inner {
    flex-wrap: nowrap !important;
  }

  /* Service sub-page heroes (sp001 through sp1901) */
  .e-con.e-parent[data-id^="sp"] > .e-con-inner {
    flex-wrap: nowrap !important;
  }

  /* Left column — text side */
  [data-id$="_hero_left"],
  [data-id="b2left1"],
  [data-id="abt_hero_left"],
  [data-id="svc_hero_left"],
  [data-id="ct_hero_left"] {
    width: 45% !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  /* Service sub-page left columns */
  [data-id$="01_left"] {
    width: 45% !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  /* Right column — image side */
  [data-id$="_hero_right"],
  [data-id="b6rght5"],
  [data-id="abt_hero_right"],
  [data-id="svc_hero_right"],
  [data-id="ct_hero_right"] {
    width: 55% !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  /* Service sub-page right columns */
  [data-id$="01_right"] {
    width: 55% !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  /* Hero images — rounded corners */
  [data-id$="_hero_right"] .elementor-widget-image img,
  [data-id$="01_right"] .elementor-widget-image img,
  [data-id="b6rght5"] .elementor-widget-image img {
    border-radius: 12px !important;
    width: 100% !important;
    height: auto !important;
  }
}

/* Mobile: stack vertically */
@media (max-width: 767px) {
  [data-id$="_hero_left"],
  [data-id$="_hero_right"],
  [data-id$="01_left"],
  [data-id$="01_right"],
  [data-id="b2left1"],
  [data-id="b6rght5"],
  [data-id="abt_hero_left"],
  [data-id="abt_hero_right"],
  [data-id="svc_hero_left"],
  [data-id="svc_hero_right"],
  [data-id="ct_hero_left"],
  [data-id="ct_hero_right"] {
    width: 100% !important;
  }
}

/* ==========================================================================
   Category Pages — Service Cards Grid (Face, Skin, Body & Wellness)
   ========================================================================== */
@media (min-width: 768px) {
  /* Cards row container — 3-column wrap grid */
  .elementor-element-fac_cards_row,
  .elementor-element-fac_cards_row > .e-con-inner,
  .elementor-element-ski_cards_row,
  .elementor-element-ski_cards_row > .e-con-inner,
  .elementor-element-bod_cards_row,
  .elementor-element-bod_cards_row > .e-con-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
  }

  /* Individual cards — 30% width for 3-column layout */
  .elementor-element-fac_cards_row > .e-con,
  .elementor-element-fac_cards_row > .e-con-inner > .e-con,
  .elementor-element-ski_cards_row > .e-con,
  .elementor-element-ski_cards_row > .e-con-inner > .e-con,
  .elementor-element-bod_cards_row > .e-con,
  .elementor-element-bod_cards_row > .e-con-inner > .e-con {
    width: calc(33.333% - 16px) !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
  }

  /* Card image — flush top, no border-radius */
  .elementor-element-fac_cards_row .elementor-widget-image img[src*="placeholder.png"],
  .elementor-element-ski_cards_row .elementor-widget-image img[src*="placeholder.png"],
  .elementor-element-bod_cards_row .elementor-widget-image img[src*="placeholder.png"] {
    border-radius: 8px 8px 0 0 !important;
  }
}

/* Cream background section */
.sk-bg-cream,
.elementor-section.sk-bg-cream {
  background-color: var(--sk-cream) !important;
}

/* Teal background section */
.sk-bg-teal,
.elementor-section.sk-bg-teal {
  background-color: var(--sk-teal) !important;
}

.sk-bg-teal h1,
.sk-bg-teal h2,
.sk-bg-teal h3,
.sk-bg-teal p {
  color: var(--sk-white) !important;
}

/* Dark section — deep teal */
.sk-bg-dark,
.elementor-section.sk-bg-dark {
  background-color: var(--sk-teal-dark) !important;
}

.sk-bg-dark h1,
.sk-bg-dark h2,
.sk-bg-dark h3,
.sk-bg-dark p,
.sk-bg-dark a {
  color: var(--sk-white) !important;
}

/* ==========================================================================
   Service Cards
   ========================================================================== */

.sk-service-card {
  background: var(--sk-white);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
  transition: var(--sk-transition);
}

.sk-service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.sk-service-card .sk-card-content {
  padding: 30px;
}

.sk-service-card h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
}

.sk-service-card p {
  font-size: 0.95rem;
  color: var(--sk-gray);
}

/* ==========================================================================
   Testimonials
   ========================================================================== */

.sk-testimonial {
  background: var(--sk-cream);
  padding: 40px;
  border-radius: 4px;
  border-left: 4px solid var(--sk-teal);
  font-style: italic;
}

.sk-testimonial p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--sk-text);
}

.sk-testimonial cite {
  display: block;
  margin-top: 15px;
  font-style: normal;
  font-weight: 600;
  color: var(--sk-teal-dark);
  font-size: 0.95rem;
}

/* ==========================================================================
   FAQ Accordion
   ========================================================================== */

.sk-faq .elementor-accordion-item {
  border: 1px solid var(--sk-gray-light) !important;
  margin-bottom: 10px !important;
  border-radius: 4px !important;
}

.sk-faq .elementor-tab-title {
  font-family: var(--sk-font-body) !important;
  font-weight: 600 !important;
  color: var(--sk-dark) !important;
  padding: 18px 24px !important;
}

.sk-faq .elementor-tab-title:hover {
  color: var(--sk-teal) !important;
}

.sk-faq .elementor-tab-content {
  padding: 0 24px 18px !important;
  color: var(--sk-text) !important;
  line-height: 1.7 !important;
}

/* ==========================================================================
   Footer
   ========================================================================== */

/* Footer — Dark Charcoal Grey bg with white text (client request round 2) */
.site-footer,
.elementor-location-footer {
  color: var(--sk-white);
  background-color: #1E2A36 !important;
}

/* Footer logo — left-aligned to match tagline text below */
.elementor-location-footer .e-con[data-id="ftr002"] {
  flex-basis: 300px !important;
  min-width: 300px !important;
  align-items: flex-start !important;
  text-align: left !important;
}
.elementor-location-footer .elementor-element-ftr003 img {
  width: 350px !important;
  max-width: 350px !important;
  height: auto !important;
  margin-left: -79px !important;
}

/* Footer headings — overridden in audit fixes section below */

/* Footer text/links — overridden in audit fixes section below */

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 767px) {
  :root {
    --sk-section-padding: 50px 0;
  }

  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.35rem; }

  .sk-testimonial {
    padding: 25px;
  }

  .elementor-button,
  .sk-btn {
    padding: 12px 28px !important;
    font-size: 13px !important;
  }
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.sk-text-teal { color: var(--sk-teal) !important; }
.sk-text-cream { color: var(--sk-cream) !important; }
.sk-text-dark { color: var(--sk-dark) !important; }
.sk-text-center { text-align: center; }
.sk-uppercase { text-transform: uppercase; letter-spacing: 0.1em; }
.sk-divider {
  width: 60px;
  height: 3px;
  background: var(--sk-teal);
  margin: 20px 0;
}
.sk-divider-center {
  width: 60px;
  height: 3px;
  background: var(--sk-teal);
  margin: 20px auto;
}

/* ==========================================================================
   VIO-Inspired Section Styles
   ========================================================================== */

/* Section label — small uppercase text above headings */
.sk-section-label {
  font-family: var(--sk-font-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sk-teal-dark);
  margin-bottom: 12px;
}

/* Pill button — primary filled */
.sk-pill {
  display: inline-block;
  font-family: var(--sk-font-body);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.03em;
  padding: 14px 32px;
  border-radius: 50px;
  background-color: var(--sk-fuchsia);
  color: var(--sk-white);
  border: 2px solid var(--sk-fuchsia);
  text-decoration: none;
  transition: var(--sk-transition);
  cursor: pointer;
}

.sk-pill:hover {
  background-color: var(--sk-cta-hover);
  border-color: var(--sk-cta-hover);
  color: var(--sk-white);
}

/* Pill button — outlined */
.sk-pill-outline {
  display: inline-block;
  font-family: var(--sk-font-body);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.03em;
  padding: 14px 32px;
  border-radius: 50px;
  background-color: transparent;
  color: var(--sk-fuchsia);
  border: 2px solid var(--sk-fuchsia);
  text-decoration: none;
  transition: var(--sk-transition);
  cursor: pointer;
}

.sk-pill-outline:hover {
  background-color: var(--sk-fuchsia);
  color: var(--sk-white);
}

/* Pill button — white (for dark backgrounds) */
.sk-pill-white {
  display: inline-block;
  font-family: var(--sk-font-body);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.03em;
  padding: 14px 32px;
  border-radius: 50px;
  background-color: var(--sk-white);
  color: var(--sk-teal-dark);
  border: 2px solid var(--sk-white);
  text-decoration: none;
  transition: var(--sk-transition);
  cursor: pointer;
}

.sk-pill-white:hover {
  background-color: transparent;
  color: var(--sk-white);
  border-color: var(--sk-white);
}

/* Service image card with overlay */
.sk-service-image-card {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 3/4;
}

.sk-service-image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.sk-service-image-card:hover img {
  transform: scale(1.05);
}

.sk-service-image-card .sk-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
  color: var(--sk-white);
}

/* Testimonial card — minimal */
.sk-testimonial-card {
  background: var(--sk-cream);
  padding: 40px;
  border-radius: 8px;
}

.sk-testimonial-card .sk-quote-mark {
  font-size: 48px;
  line-height: 1;
  color: var(--sk-teal);
  font-family: Georgia, serif;
  margin-bottom: 16px;
}

.sk-testimonial-card blockquote {
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--sk-text);
  margin: 0 0 16px 0;
}

.sk-testimonial-card cite {
  font-style: normal;
  font-weight: 600;
  color: var(--sk-dark);
  font-size: 0.95rem;
}

/* CTA Banner section */
.sk-cta-banner {
  background-color: var(--sk-teal-dark);
  padding: 80px 0;
  text-align: center;
}

.sk-cta-banner h2 {
  color: var(--sk-white);
  margin-bottom: 16px;
}

.sk-cta-banner p {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 30px;
}

/* ==========================================================================
   SITE-WIDE UI/UX AUDIT FIXES (VIO Med Spa comparison)
   Applied: March 2026
   ========================================================================== */

/* ---------- 1. SECTION SPACING — REDUCED ----------
   Tighter, modern spacing — still generous but not excessive.
   ---------------------------------------------------------- */

/* All parent (top-level) Elementor containers */
.e-con.e-parent {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}

/* Header and footer exceptions — don't over-pad */
.elementor-location-header .e-con.e-parent,
.elementor-location-footer .e-con.e-parent {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Nested e-parent containers inside sections — zero padding (they inherit wrongly) */
.e-con.e-parent .e-con.e-parent {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Footer inner columns — restore compact padding */
.elementor-location-footer .e-con.e-parent > .e-con,
.elementor-location-footer .e-con.e-parent > .e-con-inner > .e-con {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

/* Hero sections — reduced padding */
.e-con.e-parent[data-id="b1hero0"],
.e-con.e-parent[data-id^="sp"],
.e-con.e-parent[data-id="abt001"],
.e-con.e-parent[data-id="svc001"],
.e-con.e-parent[data-id="ct_hero"],
.e-con.e-parent[data-id$="_hero"] {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

/* CTA banner sections */
.e-con.e-parent[data-id="f1cta0a"],
.e-con.e-parent[data-id$="_cta"],
.e-con.e-parent[data-id^="fac_cta"],
.e-con.e-parent[data-id^="ski_cta"],
.e-con.e-parent[data-id^="bod_cta"] {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}

/* ---------- CONTACT PAGE — fix nested containers inheriting parent padding ----------
   Elementor marks many nested containers as e-parent on this page.
   Reset padding on inner wrappers; only the section-level ones should be padded.
   ---------------------------------------------------------------------------------- */
.e-con.e-parent[data-id="ct_info_inner"],
.e-con.e-parent[data-id="ct_info_left"],
.e-con.e-parent[data-id="ct_info_right"],
.e-con.e-parent[data-id="ct_address"],
.e-con.e-parent[data-id="ct_phone"],
.e-con.e-parent[data-id="ct_email"],
.e-con.e-parent[data-id="ct_hours"],
.e-con.e-parent[data-id="ct_form_inner"],
.e-con.e-parent[data-id="ct_cta_inner"] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Contact info items — compact spacing with left accent border */
.e-con.e-parent[data-id="ct_address"],
.e-con.e-parent[data-id="ct_phone"],
.e-con.e-parent[data-id="ct_email"],
.e-con.e-parent[data-id="ct_hours"] {
  padding: 16px 0 16px 20px !important;
  border-left: 3px solid var(--sk-teal) !important;
  margin-bottom: 12px !important;
}

/* Contact info section */
.e-con.e-parent[data-id="ct_info"] {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}

/* Contact form section */
.e-con.e-parent[data-id="ct_form_section"] {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}

/* ---------- 2. HOMEPAGE SERVICE CARDS — CLEANER STYLING ----------
   VIO: borderless cards, tall portrait images, no visible card borders.
   Skinovatio: has teal outline borders on cards — too clinical.
   ----------------------------------------------------------------- */

/* Academy cards — match Services card design */
.e-con[data-id="acd_cards"] > .e-con-inner {
  display: flex !important;
  gap: 30px !important;
  justify-content: center !important;
}
.e-con[data-id="acd_cards"] > .e-con-inner > .e-con {
  border: 1px solid #F9F6F3 !important;
  border-radius: 12px !important;
  padding: 24px !important;
  text-align: center !important;
  background: #fff !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease !important;
  flex: 1 !important;
  max-width: 400px !important;
}
.e-con[data-id="acd_cards"] > .e-con-inner > .e-con:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
  transform: translateY(-2px) !important;
}
.e-con[data-id="acd_cards"] .elementor-widget-image img {
  width: 100% !important;
  height: 240px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
}
.e-con[data-id="acd_cards"] .elementor-widget-heading .elementor-heading-title {
  font-family: var(--sk-font-heading) !important;
  font-style: normal !important;
  color: var(--sk-teal-dark) !important;
  font-size: 1.5rem !important;
  margin-top: 16px !important;
}
.e-con[data-id="acd_cards"] .elementor-widget-text-editor {
  text-align: center !important;
  color: var(--sk-slate) !important;
  font-size: 14px !important;
}
.e-con[data-id="acd_cards"] .elementor-widget-button .elementor-button {
  border: 1px solid var(--sk-fuchsia) !important;
  color: var(--sk-fuchsia) !important;
  background: transparent !important;
  border-radius: 30px !important;
  font-weight: 400 !important;
  padding: 10px 28px !important;
  transition: all 0.2s ease !important;
}
.e-con[data-id="acd_cards"] .elementor-widget-button .elementor-button:hover {
  background: var(--sk-fuchsia) !important;
  color: #fff !important;
}

/* Remove visible borders/outlines from homepage service cards */
.e-con.e-parent[data-id="c5cards"] .e-con .elementor-widget-button .elementor-button {
  border-color: var(--sk-fuchsia) !important;
  color: var(--sk-fuchsia) !important;
  background: transparent !important;
  font-weight: 400 !important;
}

.e-con.e-parent[data-id="c5cards"] .e-con .elementor-widget-button .elementor-button:hover {
  background: var(--sk-teal-dark) !important;
  color: var(--sk-white) !important;
}

/* Homepage service cards — center-align card content */
.e-con[data-id="c5cards"] > .e-con,
.e-con[data-id="c5cards"] > .e-con-inner > .e-con {
  align-items: center !important;
  text-align: center !important;
}

/* Homepage service cards — make images taller (portrait aspect ratio like VIO) */
.e-con.e-parent[data-id="c5cards"] .elementor-widget-image img {
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  width: 100% !important;
  border-radius: 8px !important;
}

/* Category page service cards — taller images too */
.elementor-element-fac_cards_row .elementor-widget-image img,
.elementor-element-ski_cards_row .elementor-widget-image img,
.elementor-element-bod_cards_row .elementor-widget-image img {
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  width: 100% !important;
}

/* ---------- 3. CTA BANNER BUTTON — WHITE FILL ----------
   Outlined button on dark bg is too subtle.
   VIO uses solid dark or white-filled CTAs.
   ------------------------------------------------------- */

/* CTA banner button — white filled for visibility */
.e-con.e-parent[data-id="f1cta0a"] .elementor-widget-button .elementor-button,
.e-con.e-parent[data-id$="_cta"] .elementor-widget-button .elementor-button,
.e-con.e-parent[data-id^="fac_cta"] .elementor-widget-button .elementor-button,
.e-con.e-parent[data-id^="ski_cta"] .elementor-widget-button .elementor-button,
.e-con.e-parent[data-id^="bod_cta"] .elementor-widget-button .elementor-button {
  background-color: var(--sk-white) !important;
  color: var(--sk-teal-dark) !important;
  border: 2px solid var(--sk-white) !important;
  font-weight: 500 !important;
}

.e-con.e-parent[data-id="f1cta0a"] .elementor-widget-button .elementor-button:hover,
.e-con.e-parent[data-id$="_cta"] .elementor-widget-button .elementor-button:hover,
.e-con.e-parent[data-id^="fac_cta"] .elementor-widget-button .elementor-button:hover,
.e-con.e-parent[data-id^="ski_cta"] .elementor-widget-button .elementor-button:hover,
.e-con.e-parent[data-id^="bod_cta"] .elementor-widget-button .elementor-button:hover {
  background-color: transparent !important;
  color: var(--sk-white) !important;
  border-color: var(--sk-white) !important;
}

/* CTA banner subtitle — slightly brighter for readability */
.e-con.e-parent[data-id="f1cta0a"] .elementor-widget-text-editor,
.e-con.e-parent[data-id$="_cta"] .elementor-widget-text-editor {
  opacity: 0.95 !important;
}

/* ---------- 4. TESTIMONIAL CARDS — SOFTER ----------
   Lighter background, larger quote marks, better spacing.
   ------------------------------------------------------ */

/* Testimonial section — light background to differentiate from white */
.e-con.e-parent[data-id="e1tst0a"] {
  background-color: var(--sk-white) !important;
}

/* Testimonial inner cards — Warm Sand bg with Dusty Rose accent */
.e-con.e-parent[data-id="e1tst0a"] .e-con.e-child {
  background-color: var(--sk-sand) !important;
  border-radius: 12px !important;
  padding: 36px 32px !important;
  border: none !important;
  box-shadow: none !important;
}

/* Testimonial quote marks — Dusty Rose accent */
.e-con.e-parent[data-id="e1tst0a"] .elementor-icon-list-icon i,
.e-con.e-parent[data-id="e1tst0a"] .elementor-icon i,
.e-con.e-parent[data-id="e1tst0a"] .sk-quote-mark,
.e-con.e-parent[data-id="e1tst0a"] .elementor-widget-icon .elementor-icon {
  color: var(--sk-rose) !important;
}
/* Quote mark headings (" characters) — Dusty Rose */
.elementor-element-e6qt2b0 .elementor-heading-title,
.elementor-element-eaqt5e3 .elementor-heading-title,
.elementor-element-eeqt8h6 .elementor-heading-title {
  color: var(--sk-rose) !important;
}

/* Testimonial quote text — clean italic, improved readability */
.e-con.e-parent[data-id="e1tst0a"] .elementor-widget-text-editor {
  font-style: italic !important;
  line-height: 1.8 !important;
  color: var(--sk-text) !important;
  font-size: 15px !important;
}
.e-con.e-parent[data-id="e1tst0a"] .elementor-widget-text-editor p {
  color: var(--sk-text) !important;
}

/* ---------- 5. CONSISTENT BUTTON HOVER STATES ----------
   All buttons: lift + shadow on hover. Consistent across site.
   ------------------------------------------------------------ */

/* GLOBAL: All Elementor buttons — consistent hover lift */
.elementor-widget-button .elementor-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
}

/* Hero CTA button — Light Teal fill with Deep Teal text (per client palette) */
.e-con.e-parent[data-id="b1hero0"] .elementor-widget-button .elementor-button {
  background-color: var(--sk-teal) !important;
  color: var(--sk-teal-dark) !important;
  border: 2px solid var(--sk-teal) !important;
  padding: 16px 36px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}
.e-con.e-parent[data-id="b1hero0"] .elementor-widget-button .elementor-button:hover {
  background-color: var(--sk-teal-dark) !important;
  color: var(--sk-white) !important;
  border-color: var(--sk-teal-dark) !important;
  box-shadow: 0 6px 24px rgba(45, 27, 46, 0.35) !important;
}

/* All filled teal buttons — darken on hover */
.e-con.e-parent[data-id="abt001"] .elementor-widget-button .elementor-button,
.e-con.e-parent[data-id="svc001"] .elementor-widget-button .elementor-button,
.e-con.e-parent[data-id="ct_hero"] .elementor-widget-button .elementor-button,
.e-con.e-parent[data-id$="_hero"] .elementor-widget-button .elementor-button {
  font-weight: 500 !important;
}

/* Outlined buttons — fill on hover (homepage service cards, "Learn More About Us", "See All") */
.e-con.e-parent[data-id="d1abt0a"] .elementor-widget-button .elementor-button {
  border-width: 2px !important;
  padding: 14px 32px !important;
  font-weight: 500 !important;
}
.e-con.e-parent[data-id="d1abt0a"] .elementor-widget-button .elementor-button:hover {
  background-color: var(--sk-teal-dark) !important;
  color: var(--sk-white) !important;
  border-color: var(--sk-teal-dark) !important;
}

/* "See All Services" button hover */
.elementor-element-cmallsvc .elementor-button:hover {
  background-color: var(--sk-teal-dark) !important;
  color: var(--sk-white) !important;
  border-color: var(--sk-teal-dark) !important;
}

/* "Learn More →" card buttons — hover neutralised (entire card is the click target).
   The ::after overlay catches pointer events; button stays visually unchanged. */

/* Header CTA hover — matches Call Now button */
.elementor-location-header .elementor-widget-button .elementor-button:hover {
  background-color: #fff !important;
  color: var(--sk-teal-dark) !important;
  border-color: var(--sk-teal-dark) !important;
  box-shadow: none !important;
}

/* ---------- 6. FOOTER — BETTER CONTRAST ----------
   Column headings: white instead of teal-light for clarity.
   ------------------------------------------------------- */

.elementor-location-footer h3:not(.e-con[data-id="ftr_form"] *),
.elementor-location-footer h4:not(.e-con[data-id="ftr_form"] *),
.elementor-location-footer .elementor-heading-title:not(.e-con[data-id="ftr_form"] *) {
  color: var(--sk-white);
  font-family: var(--sk-font-body) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  margin-bottom: 20px !important;
}

/* Footer links — brighter, better hover (exclude form section) */
.elementor-location-footer a:not(.e-con[data-id="ftr_form"] *) {
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.2s ease;
}

.elementor-location-footer a:hover {
  color: var(--sk-white);
  opacity: 1;
}

/* Footer bottom copyright bar */
.elementor-location-footer .elementor-widget-text-editor {
  font-size: 13px !important;
}

/* ---------- 7. TYPOGRAPHY REFINEMENTS ----------
   Larger headings, better label spacing.
   ----------------------------------------------- */

/* Section labels — more refined spacing */
.elementor-widget-heading .elementor-heading-title[style*="letter-spacing"],
.elementor-widget-text-editor[class*="label"] {
  font-size: 13px !important;
  letter-spacing: 0.15em !important;
}

/* Section logo — brand mark above section headings */
.sk-section-logo {
  margin-bottom: 8px !important;
  text-align: center !important;
}
.sk-section-logo img {
  width: 180px !important;
  max-width: 100% !important;
  height: auto !important;
  opacity: 0.85;
}

/* Homepage hero body text — slightly darker for better contrast on light gray */
.e-con.e-parent[data-id="b1hero0"] .elementor-widget-text-editor,
.e-con.e-parent[data-id="b1hero0"] .elementor-widget-text-editor p {
  color: #3A3A3A !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
}

/* Homepage hero heading — larger, more dramatic like VIO */
.e-con.e-parent[data-id="b1hero0"] .elementor-widget-heading .elementor-heading-title {
  font-size: clamp(2.8rem, 5.5vw, 4.2rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
}

/* Homepage hero logo — left-aligned, enlarged */
.e-con[data-id="b2left1"] > .elementor-widget-image {
  align-self: flex-start !important;
  text-align: left !important;
}
.e-con[data-id="b2left1"] > .elementor-widget-image img {
  width: 420px !important;
  max-width: 420px !important;
  height: auto !important;
}

/* --- HERO LEFT-ALIGNMENT (consistent across all pages) --- */
/* Services page hero */
.e-con.e-parent[data-id="svc001"] .elementor-widget-heading,
.e-con.e-parent[data-id="svc001"] .elementor-widget-text-editor,
.e-con.e-parent[data-id="svc001"] .elementor-widget-text-editor p {
  text-align: left !important;
}

/* Contact page hero */
.e-con.e-parent[data-id="ct_hero"] .elementor-widget-heading,
.e-con.e-parent[data-id="ct_hero"] .elementor-widget-text-editor,
.e-con.e-parent[data-id="ct_hero"] .elementor-widget-text-editor p {
  text-align: left !important;
}

/* Section headings (H2) — dark for visual weight, larger size */
.e-con.e-parent .elementor-widget-heading h2.elementor-heading-title {
  font-size: clamp(2.2rem, 4.5vw, 3.2rem) !important;
  line-height: 1.15 !important;
  color: var(--sk-dark) !important;
}

/* Card headings (H3, H4) — deep teal brand color */
.e-con.e-parent .elementor-widget-heading h3.elementor-heading-title,
.e-con.e-parent .elementor-widget-heading h4.elementor-heading-title {
  color: var(--sk-teal-dark) !important;
}

/* Section labels (H6) — deep teal for WCAG AA contrast (seafoam #3BD4AE = 1.87 ratio, FAIL) */
.e-con.e-parent .elementor-widget-heading h6.elementor-heading-title {
  color: var(--sk-teal-dark) !important;
}

/* ALL headings on DARK/TEAL backgrounds — force white */
.e-con.e-parent[data-id="sk_hero_slider"] .elementor-widget-heading .elementor-heading-title,
.e-con.e-parent[data-id="sk_hero_slider"] .elementor-widget-text-editor,
.e-con.e-parent[data-id="sk_hero_slider"] .elementor-widget-text-editor p,
.e-con.e-parent[data-id="f1cta0a"] .elementor-widget-heading .elementor-heading-title,
.e-con.e-parent[data-id="svc900"] .elementor-widget-heading .elementor-heading-title,
.e-con.e-parent[data-id="abt050"] .elementor-widget-heading .elementor-heading-title,
.e-con.e-parent[data-id$="_cta"] .elementor-widget-heading .elementor-heading-title,
.e-con.e-parent[data-id^="fac_cta"] .elementor-widget-heading .elementor-heading-title,
.e-con.e-parent[data-id^="ski_cta"] .elementor-widget-heading .elementor-heading-title,
.e-con.e-parent[data-id^="bod_cta"] .elementor-widget-heading .elementor-heading-title,
.e-con.e-parent[data-id^="sp_cta_"] .elementor-widget-heading .elementor-heading-title,
.elementor-location-footer .e-con.e-parent:not([data-id="ftr_form"]) .elementor-widget-heading h4.elementor-heading-title,
.elementor-location-footer .e-con.e-parent:not([data-id="ftr_form"]) .elementor-widget-heading .elementor-heading-title,
.sk-bg-teal .elementor-widget-heading .elementor-heading-title,
.sk-bg-dark .elementor-widget-heading .elementor-heading-title {
  color: var(--sk-white) !important;
}

/* ---------- 8. IMAGE REFINEMENTS ----------
   Better border-radius and object-fit for consistency.
   ---------------------------------------------------- */

/* All Elementor images — consistent rounding */
.elementor-widget-image img {
  border-radius: 8px;
}

/* Hero images — slightly more rounded */
.e-con.e-parent[data-id="b1hero0"] .elementor-widget-image img,
.e-con.e-parent[data-id="d1abt0a"] .elementor-widget-image img {
  border-radius: 12px !important;
}

/* ---------- 9. CONSISTENT CARD HOVER EFFECTS ----------
   All cards get: lift + shadow + image zoom on hover.
   ------------------------------------------------------- */

/* ---- CARD LIFT + SHADOW (all card-like containers) ---- */

/* Homepage service cards (Face / Skin / Body) */
.e-con[data-id="c5cards"] > .e-con,
.e-con[data-id="c5cards"] > .e-con-inner > .e-con {
  transition: transform 0.35s ease, box-shadow 0.35s ease !important;
  cursor: pointer !important;
  border: none !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: var(--sk-white) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}
.e-con[data-id="c5cards"] > .e-con:hover,
.e-con[data-id="c5cards"] > .e-con-inner > .e-con:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1) !important;
}

/* Services page — category cards (Face/Skin/Body) */
.e-con[data-id="svc010"] > .e-con,
.e-con[data-id="svc010"] > .e-con-inner > .e-con,
.e-con[data-id="svc_cats"] > .e-con,
.e-con[data-id="svc_cats"] > .e-con-inner > .e-con {
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease !important;
  cursor: pointer !important;
  border: 1px solid var(--sk-gray-light) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: var(--sk-white) !important;
}
.e-con[data-id="svc010"] > .e-con:hover,
.e-con[data-id="svc010"] > .e-con-inner > .e-con:hover,
.e-con[data-id="svc_cats"] > .e-con:hover,
.e-con[data-id="svc_cats"] > .e-con-inner > .e-con:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1) !important;
  border-color: var(--sk-teal) !important;
}

/* Services page — subcategory service cards (Face/Skin/Body grids) */
[data-id="svc1012"] > .e-con,
[data-id="svc1012"] > .e-con-inner > .e-con,
[data-id="svc1022"] > .e-con,
[data-id="svc1022"] > .e-con-inner > .e-con,
[data-id="svc1032"] > .e-con,
[data-id="svc1032"] > .e-con-inner > .e-con {
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease !important;
  cursor: pointer !important;
  border: 1px solid var(--sk-gray-light) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: var(--sk-white) !important;
}
[data-id="svc1012"] > .e-con:hover,
[data-id="svc1012"] > .e-con-inner > .e-con:hover,
[data-id="svc1022"] > .e-con:hover,
[data-id="svc1022"] > .e-con-inner > .e-con:hover,
[data-id="svc1032"] > .e-con:hover,
[data-id="svc1032"] > .e-con-inner > .e-con:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1) !important;
  border-color: var(--sk-teal) !important;
}

/* Category page service cards (Face, Skin, Body & Wellness) */
.elementor-element-fac_cards_row > .e-con,
.elementor-element-fac_cards_row > .e-con-inner > .e-con,
.elementor-element-ski_cards_row > .e-con,
.elementor-element-ski_cards_row > .e-con-inner > .e-con,
.elementor-element-bod_cards_row > .e-con,
.elementor-element-bod_cards_row > .e-con-inner > .e-con {
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease !important;
  border: 1px solid var(--sk-gray-light) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: var(--sk-white) !important;
}
.elementor-element-fac_cards_row > .e-con:hover,
.elementor-element-fac_cards_row > .e-con-inner > .e-con:hover,
.elementor-element-ski_cards_row > .e-con:hover,
.elementor-element-ski_cards_row > .e-con-inner > .e-con:hover,
.elementor-element-bod_cards_row > .e-con:hover,
.elementor-element-bod_cards_row > .e-con-inner > .e-con:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1) !important;
  border-color: var(--sk-teal) !important;
}

/* Testimonial cards */
.e-con.e-parent[data-id="e1tst0a"] .e-con.e-child {
  transition: transform 0.35s ease, box-shadow 0.35s ease !important;
}
.e-con.e-parent[data-id="e1tst0a"] .e-con.e-child:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
}

/* About page trust cards */
.elementor-element-abt032 > .e-con,
.elementor-element-abt032 > .e-con-inner > .e-con {
  transition: transform 0.35s ease, box-shadow 0.35s ease !important;
}
.elementor-element-abt032 > .e-con:hover,
.elementor-element-abt032 > .e-con-inner > .e-con:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
}

/* ---- IMAGE ZOOM ON HOVER (all card images) ---- */

/* Consistent image container overflow clip */
.e-con.e-parent[data-id="c5cards"] .elementor-widget-image,
[data-id="svc1012"] .elementor-widget-image,
[data-id="svc1022"] .elementor-widget-image,
[data-id="svc1032"] .elementor-widget-image,
.elementor-element-fac_cards_row .elementor-widget-image,
.elementor-element-ski_cards_row .elementor-widget-image,
.elementor-element-bod_cards_row .elementor-widget-image,
.e-con.e-parent[data-id="svc010"] .elementor-widget-image,
.e-con.e-parent[data-id="svc_cats"] .elementor-widget-image {
  overflow: hidden !important;
  border-radius: 8px !important;
}

/* All card images — smooth zoom transition */
.e-con.e-parent[data-id="c5cards"] .elementor-widget-image img,
[data-id="svc1012"] .elementor-widget-image img,
[data-id="svc1022"] .elementor-widget-image img,
[data-id="svc1032"] .elementor-widget-image img,
.elementor-element-fac_cards_row .elementor-widget-image img,
.elementor-element-ski_cards_row .elementor-widget-image img,
.elementor-element-bod_cards_row .elementor-widget-image img,
.e-con.e-parent[data-id="svc010"] .elementor-widget-image img,
.e-con.e-parent[data-id="svc_cats"] .elementor-widget-image img {
  transition: transform 0.5s ease !important;
}

/* All card images — zoom on parent card hover */
.e-con[data-id="c5cards"] > .e-con:hover .elementor-widget-image img,
[data-id="svc1012"] > .e-con:hover .elementor-widget-image img,
[data-id="svc1012"] > .e-con-inner > .e-con:hover .elementor-widget-image img,
[data-id="svc1022"] > .e-con:hover .elementor-widget-image img,
[data-id="svc1022"] > .e-con-inner > .e-con:hover .elementor-widget-image img,
[data-id="svc1032"] > .e-con:hover .elementor-widget-image img,
[data-id="svc1032"] > .e-con-inner > .e-con:hover .elementor-widget-image img,
.elementor-element-fac_cards_row > .e-con:hover .elementor-widget-image img,
.elementor-element-fac_cards_row > .e-con-inner > .e-con:hover .elementor-widget-image img,
.elementor-element-ski_cards_row > .e-con:hover .elementor-widget-image img,
.elementor-element-ski_cards_row > .e-con-inner > .e-con:hover .elementor-widget-image img,
.elementor-element-bod_cards_row > .e-con:hover .elementor-widget-image img,
.elementor-element-bod_cards_row > .e-con-inner > .e-con:hover .elementor-widget-image img,
.e-con[data-id="svc010"] > .e-con:hover .elementor-widget-image img,
.e-con[data-id="svc010"] > .e-con-inner > .e-con:hover .elementor-widget-image img,
.e-con[data-id="svc_cats"] > .e-con:hover .elementor-widget-image img,
.e-con[data-id="svc_cats"] > .e-con-inner > .e-con:hover .elementor-widget-image img {
  transform: scale(1.05) !important;
}

/* ---- LEARN MORE ARROW ANIMATION ---- */
/* Arrow slides right on card hover */
.elementor-widget-button .elementor-button {
  transition: all 0.3s ease !important;
}

/* "Learn More →" buttons — arrow animation */
.elementor-widget-button .elementor-button-text {
  transition: letter-spacing 0.3s ease !important;
}

/* ---------- 10. ALTERNATING SECTION BACKGROUNDS ----------
   VIO pattern: white → light gray → white → dark → white.
   Ensure proper visual rhythm.
   --------------------------------------------------------- */

/* About/Why section — Warm Sand bg */
.e-con.e-parent[data-id="d1abt0a"] {
  background-color: var(--sk-sand) !important;
}

/* Testimonials on white */
.e-con.e-parent[data-id="e1tst0a"] {
  background-color: var(--sk-white) !important;
}

/* ---------- 11. MOBILE REFINEMENTS ---------- */
@media (max-width: 767px) {

  /* ── FIX #1: Hero sections — stack vertically on mobile ──
     Services, Botox (all sp* pages), and Contact heroes
     force row layout on mobile. Override to column. */
  .e-con.e-parent[data-id="svc001"] > .e-con-inner,
  .e-con.e-parent[data-id="ct_hero"] > .e-con-inner,
  .e-con.e-parent[data-id^="sp"] > .e-con-inner,
  .e-con.e-parent[data-id$="_hero"] > .e-con-inner {
    flex-direction: column !important;
    --flex-direction: column;
    flex-wrap: wrap !important;
  }
  /* Reset child widths to full on mobile */
  .e-con.e-parent[data-id="svc001"] > .e-con-inner > .e-con,
  .e-con.e-parent[data-id="ct_hero"] > .e-con-inner > .e-con,
  .e-con.e-parent[data-id^="sp"] > .e-con-inner > .e-con,
  .e-con.e-parent[data-id$="_hero"] > .e-con-inner > .e-con {
    width: 100% !important;
    flex-basis: 100% !important;
    min-width: 100% !important;
  }

  /* ── FIX #2: Homepage side padding — 60px → 20px ──
     Homepage sections use Elementor --padding-left/right: 60px
     which wastes 31% of screen width on 390px. */
  .e-con.e-parent[data-id="b1hero0"],
  .e-con.e-parent[data-id="c1svcs0"],
  .e-con.e-parent[data-id="d1abt0a"],
  .e-con.e-parent[data-id="e1tst0a"],
  .e-con.e-parent[data-id="f1cta0a"],
  .e-con.e-parent[data-id="g1cnt0a"] {
    --padding-left: 20px !important;
    --padding-right: 20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* ── FIX #3: Section inner padding — 100px → 32px ──
     All non-hero sections still use Elementor's 100px inner padding.
     Override --padding-top/bottom for all parent sections. */
  .e-con.e-parent {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
    --padding-top: 32px !important;
    --padding-bottom: 32px !important;
  }

  /* Hero sections — even tighter */
  .e-con.e-parent[data-id="b1hero0"],
  .e-con.e-parent[data-id^="sp"],
  .e-con.e-parent[data-id="abt001"],
  .e-con.e-parent[data-id="svc001"],
  .e-con.e-parent[data-id="ct_hero"],
  .e-con.e-parent[data-id$="_hero"] {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    --padding-top: 24px !important;
    --padding-bottom: 24px !important;
  }

  /* ── FIX #4: Button tap targets — min 48px height ──
     "Learn More", "See All Services", CTA buttons all at 41px. */
  .elementor-button,
  a.elementor-button,
  .elementor-button-wrapper .elementor-button {
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ── FIX #5: Footer link tap targets — 17px → 44px min ── */
  .elementor-location-footer a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  /* Footer nav link list — reduce excessive gaps from min-height */
  .elementor-location-footer [data-id="ftr005"] p,
  .elementor-location-footer [data-id="ftr008"] p {
    margin-bottom: 0 !important;
    line-height: 1.2 !important;
  }
  /* Contact info links (phone, email) in body — larger tap area */
  a[href^="tel:"],
  a[href^="mailto:"] {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 0 !important;
  }

  /* Hero heading — still impactful on mobile */
  .e-con.e-parent[data-id="b1hero0"] .elementor-widget-heading .elementor-heading-title {
    font-size: 2.4rem !important;
  }

  /* Service card images — less tall on mobile */
  .e-con.e-parent[data-id="c5cards"] .elementor-widget-image img {
    aspect-ratio: 4 / 3 !important;
  }

  /* Homepage hero logo — slightly smaller on mobile */
  .e-con[data-id="b2left1"] > .elementor-widget-image img {
    width: 320px !important;
    max-width: 320px !important;
  }
}

/* ==========================================================================
   SERVICE SUBPAGE — FULL-WIDTH CONTENT (sidebar removed)
   Matches VIO's clean single-column service page layout.
   ========================================================================== */

/* Content section container — now column direction, no sidebar */
.sk-service-page .e-con.e-parent[data-id^="sp0"][data-id$="0"]:not([data-id$="00"]):not([data-id$="01"]),
.e-con.e-parent[data-id^="sp"][data-id$="10"] {
  max-width: 100% !important;
}

/* Content inner container — expand to full width */
.e-con.e-parent[data-id^="sp"][data-id$="10"] > .e-con,
.e-con.e-parent[data-id^="sp"][data-id$="10"] > .e-con-inner > .e-con {
  width: 100% !important;
  max-width: 100% !important;
}

/* Content text — readable max-width like VIO (~800px) */
.e-con.e-parent[data-id^="sp"][data-id$="10"] .elementor-widget-text-editor {
  max-width: 800px !important;
}

/* "About This Treatment" heading — style as VIO section label */
.e-con.e-parent[data-id^="sp"][data-id$="10"] .elementor-widget-heading h2.elementor-heading-title {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem) !important;
  margin-bottom: 24px !important;
}

/* Service page body text — better readability */
.e-con.e-parent[data-id^="sp"][data-id$="10"] .elementor-widget-text-editor {
  font-size: 16px !important;
  line-height: 1.8 !important;
}

/* Sub-headings within content (h3) — site-wide consistency */
.elementor-widget-text-editor h3 {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(1.25rem, 2.5vw, 1.5rem) !important;
  font-weight: 700 !important;
  margin-top: 32px !important;
  margin-bottom: 12px !important;
  color: var(--sk-teal-dark) !important;
  line-height: 1.3 !important;
}

/* First h3 in a block doesn't need top margin */
.elementor-widget-text-editor h3:first-child {
  margin-top: 0 !important;
}

/* Strip inline styles from h3 so CSS rules take over */
.elementor-widget-text-editor h3[style] {
  font-family: 'Playfair Display', serif !important;
  color: var(--sk-teal-dark) !important;
  font-size: clamp(1.25rem, 2.5vw, 1.5rem) !important;
}

/* Bullet lists within content — site-wide */
.elementor-widget-text-editor ul {
  padding-left: 24px !important;
  margin-bottom: 24px !important;
}

.elementor-widget-text-editor li {
  margin-bottom: 8px !important;
  line-height: 1.7 !important;
}

/* Service page CTA banner — match homepage CTA style */
.e-con.e-parent[data-id^="sp_cta_"] {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}

.e-con.e-parent[data-id^="sp_cta_"] .elementor-widget-heading .elementor-heading-title {
  font-size: clamp(2rem, 4vw, 3rem) !important;
  margin-bottom: 16px !important;
}

.e-con.e-parent[data-id^="sp_cta_"] .elementor-widget-text-editor {
  margin-bottom: 24px !important;
}

/* CTA banner button on service pages — white, same as homepage */
.e-con.e-parent[data-id^="sp_cta_"] .elementor-widget-button .elementor-button {
  background-color: var(--sk-white) !important;
  color: var(--sk-teal-dark) !important;
  border: 2px solid var(--sk-white) !important;
  font-weight: 500 !important;
}

.e-con.e-parent[data-id^="sp_cta_"] .elementor-widget-button .elementor-button:hover {
  background-color: transparent !important;
  color: var(--sk-white) !important;
  border-color: var(--sk-white) !important;
}

/* "← Back to All Services" link — subtle, VIO-style */
.e-con.e-parent[data-id^="sp"] .elementor-widget-text-editor a[href*="/services"] {
  font-size: 14px !important;
  color: var(--sk-teal-dark) !important;
  opacity: 0.7 !important;
  transition: opacity 0.2s ease !important;
}

.e-con.e-parent[data-id^="sp"] .elementor-widget-text-editor a[href*="/services"]:hover {
  opacity: 1 !important;
}

/* ==========================================================================
   Contrast Fixes — White text on ALL teal (#C63272) background sections
   Uses .sk-teal-section class added via JS, plus specific data-id fallbacks
   ========================================================================== */

/*
 * UNIVERSAL: Any teal CTA or footer section — force ALL text elements white.
 * Targets every page's CTA banner + footer by matching known data-id patterns.
 */

/* --- CTA Sections (all pages) — text-editor widgets only, NOT buttons --- */
.e-con[data-id="f1cta0a"] .elementor-widget-text-editor,
.e-con[data-id="f1cta0a"] .elementor-widget-text-editor p,
.e-con[data-id="f1cta0a"] .elementor-widget-text-editor span,
.e-con[data-id="svc900"] .elementor-widget-text-editor,
.e-con[data-id="svc900"] .elementor-widget-text-editor p,
.e-con[data-id="svc900"] .elementor-widget-text-editor span,
.e-con[data-id="abt050"] .elementor-widget-text-editor,
.e-con[data-id="abt050"] .elementor-widget-text-editor p,
.e-con[data-id="abt050"] .elementor-widget-text-editor span,
.e-con[data-id="ct_cta"] .elementor-widget-text-editor,
.e-con[data-id="ct_cta"] .elementor-widget-text-editor p,
.e-con[data-id="ct_cta"] .elementor-widget-text-editor span,
.e-con[data-id="fac_cta"] .elementor-widget-text-editor,
.e-con[data-id="fac_cta"] .elementor-widget-text-editor p,
.e-con[data-id="fac_cta"] .elementor-widget-text-editor span,
.e-con[data-id="ski_cta"] .elementor-widget-text-editor,
.e-con[data-id="ski_cta"] .elementor-widget-text-editor p,
.e-con[data-id="ski_cta"] .elementor-widget-text-editor span,
.e-con[data-id="bod_cta"] .elementor-widget-text-editor,
.e-con[data-id="bod_cta"] .elementor-widget-text-editor p,
.e-con[data-id="bod_cta"] .elementor-widget-text-editor span,
.e-con[data-id^="sp_cta_"] .elementor-widget-text-editor,
.e-con[data-id^="sp_cta_"] .elementor-widget-text-editor p,
.e-con[data-id^="sp_cta_"] .elementor-widget-text-editor span {
  color: var(--sk-white) !important;
}

/* ==========================================================================
   CTA Sections — Hero background image with Deep Teal overlay
   Applies to all "Not Sure Where to Start?" / CTA banner sections.
   ========================================================================== */

/* CTA sections need positioning context for ::before background */
.e-con.e-parent[data-id="f1cta0a"],
.e-con.e-parent[data-id="svc900"],
.e-con.e-parent[data-id="abt050"],
.e-con.e-parent[data-id="ct_cta"],
.e-con.e-parent[data-id="fac_cta"],
.e-con.e-parent[data-id="ski_cta"],
.e-con.e-parent[data-id="bod_cta"],
.e-con.e-parent[data-id^="sp_cta_"] {
  position: relative !important;
  overflow: hidden !important;
}

/* CTA ::before — DISABLED: replaced with Elementor native video bg + overlay
   Native overlay handles teal cover; video bg provides motion. Old static images
   are no longer used here — see _elementor_data background_video_link per section. */
.e-con.e-parent[data-id="f1cta0a"]::before,
.e-con.e-parent[data-id="svc900"]::before,
.e-con.e-parent[data-id="abt050"]::before,
.e-con.e-parent[data-id="ct_cta"]::before,
.e-con.e-parent[data-id="fac_cta"]::before,
.e-con.e-parent[data-id="ski_cta"]::before,
.e-con.e-parent[data-id="bod_cta"]::before,
.e-con.e-parent[data-id^="sp_cta_"]::before {
  content: none;
  background-image: none !important;
  background-repeat: no-repeat;
}

/* CTA ::before — page-specific hero images behind the Deep Teal overlay */
.e-con.e-parent[data-id="f1cta0a"]::before {                       /* Home */
  background-image: linear-gradient(rgba(45, 27, 46, 0.88), rgba(45, 27, 46, 0.88)),
                    url('/wp-content/uploads/2026/03/home-scaled.jpg');
}
.e-con.e-parent[data-id="abt050"]::before {                        /* About */
  background-image: linear-gradient(rgba(45, 27, 46, 0.88), rgba(45, 27, 46, 0.88)),
                    url('/wp-content/uploads/2026/03/face-2-hero-scaled.jpg');
}
.e-con.e-parent[data-id="svc900"]::before {                        /* Services */
  background-image: linear-gradient(rgba(45, 27, 46, 0.88), rgba(45, 27, 46, 0.88)),
                    url('/wp-content/uploads/2026/03/med-spa-services-scaled.jpg');
}
.e-con.e-parent[data-id="ct_cta"]::before {                        /* Contact */
  background-image: linear-gradient(rgba(45, 27, 46, 0.88), rgba(45, 27, 46, 0.88)),
                    url('/wp-content/uploads/2026/03/footer-3-scaled.jpg');
}
.e-con.e-parent[data-id="fac_cta"]::before {                       /* Face */
  background-image: linear-gradient(rgba(45, 27, 46, 0.88), rgba(45, 27, 46, 0.88)),
                    url('/wp-content/uploads/2026/03/face-scaled.jpg');
}
.e-con.e-parent[data-id="ski_cta"]::before {                       /* Skin */
  background-image: linear-gradient(rgba(45, 27, 46, 0.88), rgba(45, 27, 46, 0.88)),
                    url('/wp-content/uploads/2026/03/skin-scaled.jpg');
}
.e-con.e-parent[data-id="bod_cta"]::before {                       /* Body & Wellness */
  background-image: linear-gradient(rgba(45, 27, 46, 0.88), rgba(45, 27, 46, 0.88)),
                    url('/wp-content/uploads/2026/03/Body-Wellness-scaled.jpg');
}
/* Inner service page CTAs — each uses its own hero image */
.e-con.e-parent[data-id="sp_cta_34"]::before {                     /* Botox */
  background-image: linear-gradient(rgba(45, 27, 46, 0.88), rgba(45, 27, 46, 0.88)),
                    url('/wp-content/uploads/2026/03/Botox-scaled.jpg');
}
.e-con.e-parent[data-id="sp_cta_35"]::before {                     /* Dermaplaning */
  background-image: linear-gradient(rgba(45, 27, 46, 0.88), rgba(45, 27, 46, 0.88)),
                    url('/wp-content/uploads/2026/03/Dermaplaning-scaled.jpg');
}
.e-con.e-parent[data-id="sp_cta_36"]::before {                     /* Dermal Fillers */
  background-image: linear-gradient(rgba(45, 27, 46, 0.88), rgba(45, 27, 46, 0.88)),
                    url('/wp-content/uploads/2026/03/Dermal-Fillers-scaled.jpg');
}
.e-con.e-parent[data-id="sp_cta_37"]::before {                     /* Emsculpt NEO */
  background-image: linear-gradient(rgba(45, 27, 46, 0.88), rgba(45, 27, 46, 0.88)),
                    url('/wp-content/uploads/2026/03/Emsculpt-NEO-scaled.jpg');
}
.e-con.e-parent[data-id="sp_cta_38"]::before {                     /* Forma Laser */
  background-image: linear-gradient(rgba(45, 27, 46, 0.88), rgba(45, 27, 46, 0.88)),
                    url('/wp-content/uploads/2026/03/Forma-Laser-scaled.jpg');
}
.e-con.e-parent[data-id="sp_cta_39"]::before {                     /* HydraFacials */
  background-image: linear-gradient(rgba(45, 27, 46, 0.88), rgba(45, 27, 46, 0.88)),
                    url('/wp-content/uploads/2026/03/HydraFacials-scaled.jpg');
}
.e-con.e-parent[data-id="sp_cta_40"]::before {                     /* IPL Skin Rejuvenation */
  background-image: linear-gradient(rgba(45, 27, 46, 0.88), rgba(45, 27, 46, 0.88)),
                    url('/wp-content/uploads/2026/03/IPL-Skin-Rejuvenation-scaled.jpg');
}
.e-con.e-parent[data-id="sp_cta_41"]::before {                     /* Laser Hair Removal */
  background-image: linear-gradient(rgba(45, 27, 46, 0.88), rgba(45, 27, 46, 0.88)),
                    url('/wp-content/uploads/2026/03/Laser-Hair-Removal-scaled.jpg');
}
.e-con.e-parent[data-id="sp_cta_42"]::before {                     /* Microneedling with PRP */
  background-image: linear-gradient(rgba(45, 27, 46, 0.88), rgba(45, 27, 46, 0.88)),
                    url('/wp-content/uploads/2026/03/Microneedling-with-PRP-scaled.jpg');
}
.e-con.e-parent[data-id="sp_cta_43"]::before {                     /* Microneedling with HA */
  background-image: linear-gradient(rgba(45, 27, 46, 0.88), rgba(45, 27, 46, 0.88)),
                    url('/wp-content/uploads/2026/03/Microneedling-with-PRP-scaled.jpg');
}
.e-con.e-parent[data-id="sp_cta_44"]::before {                     /* Morpheus8 */
  background-image: linear-gradient(rgba(45, 27, 46, 0.88), rgba(45, 27, 46, 0.88)),
                    url('/wp-content/uploads/2026/03/Morpheus8-RF-scaled.jpg');
}
.e-con.e-parent[data-id="sp_cta_45"]::before {                     /* Oxygenating Facials */
  background-image: linear-gradient(rgba(45, 27, 46, 0.88), rgba(45, 27, 46, 0.88)),
                    url('/wp-content/uploads/2026/03/Oxygenating-Facials-scaled.jpg');
}
.e-con.e-parent[data-id="sp_cta_46"]::before {                     /* PRP Hair Restoration */
  background-image: linear-gradient(rgba(45, 27, 46, 0.88), rgba(45, 27, 46, 0.88)),
                    url('/wp-content/uploads/2026/03/PRP-Hair-Restoration-scaled.jpg');
}
.e-con.e-parent[data-id="sp_cta_47"]::before {                     /* Medical Weight Loss */
  background-image: linear-gradient(rgba(45, 27, 46, 0.88), rgba(45, 27, 46, 0.88)),
                    url('/wp-content/uploads/2026/03/Medical-Weight-Loss-scaled.jpg');
}
.e-con.e-parent[data-id="sp_cta_48"]::before {                     /* PDO Lifting Threads */
  background-image: linear-gradient(rgba(45, 27, 46, 0.88), rgba(45, 27, 46, 0.88)),
                    url('/wp-content/uploads/2026/03/PDO-Lifting-Threads-scaled.jpg');
}
.e-con.e-parent[data-id="sp_cta_49"]::before {                     /* Chemical Peel */
  background-image: linear-gradient(rgba(45, 27, 46, 0.88), rgba(45, 27, 46, 0.88)),
                    url('/wp-content/uploads/2026/03/Chemical-Peel-scaled.jpg');
}
.e-con.e-parent[data-id="sp_cta_50"]::before {                     /* Kybella */
  background-image: linear-gradient(rgba(45, 27, 46, 0.88), rgba(45, 27, 46, 0.88)),
                    url('/wp-content/uploads/2026/03/Deoxycholic-Acid-Kybella-scaled.jpg');
}
.e-con.e-parent[data-id="sp_cta_51"]::before {                     /* IV Therapy */
  background-image: linear-gradient(rgba(45, 27, 46, 0.88), rgba(45, 27, 46, 0.88)),
                    url('/wp-content/uploads/2026/03/IV-Therapy-scaled.jpg');
}
.e-con.e-parent[data-id="sp_cta_52"]::before {                     /* Candela Laser */
  background-image: linear-gradient(rgba(45, 27, 46, 0.88), rgba(45, 27, 46, 0.88)),
                    url('/wp-content/uploads/2026/03/Candela-Laser-Hair-Removal-scaled.jpg');
}
.e-con.e-parent[data-id="sp_cta_53"]::before {                     /* Cartessa Prisma 3D */
  background-image: linear-gradient(rgba(45, 27, 46, 0.88), rgba(45, 27, 46, 0.88)),
                    url('/wp-content/uploads/2026/03/Prisma-3D-scaled.jpg');
}
.e-con.e-parent[data-id="sp_cta_424"]::before {                    /* Teeth Whitening */
  background-image: linear-gradient(rgba(45, 27, 46, 0.88), rgba(45, 27, 46, 0.88)),
                    url('/wp-content/uploads/2026/03/teeth-whitening-scaled.jpg');
}
.e-con.e-parent[data-id="sp_cta_425"]::before {                    /* Permanent Makeup */
  background-image: linear-gradient(rgba(45, 27, 46, 0.88), rgba(45, 27, 46, 0.88)),
                    url('/wp-content/uploads/2026/03/Permanent-Makeup-scaled.jpg');
}
.e-con.e-parent[data-id="sp_cta_426"]::before {                    /* Eyelash Growth with LATISSE */
  background-image: linear-gradient(rgba(45, 27, 46, 0.88), rgba(45, 27, 46, 0.88)),
                    url('/wp-content/uploads/2026/03/Eyelash-Growth-with-LATISSE-2.jpg');
}
.e-con.e-parent[data-id="sp_cta_427"]::before {                    /* Become a Model */
  background-image: linear-gradient(rgba(45, 27, 46, 0.88), rgba(45, 27, 46, 0.88)),
                    url('/wp-content/uploads/2026/03/academy-scaled.jpg');
}

/* Keep CTA content above the ::before background */
.e-con.e-parent[data-id="f1cta0a"] > .e-con-inner,
.e-con.e-parent[data-id="svc900"] > .e-con-inner,
.e-con.e-parent[data-id="abt050"] > .e-con-inner,
.e-con.e-parent[data-id="ct_cta"] > .e-con-inner,
.e-con.e-parent[data-id="fac_cta"] > .e-con-inner,
.e-con.e-parent[data-id="ski_cta"] > .e-con-inner,
.e-con.e-parent[data-id="bod_cta"] > .e-con-inner,
.e-con.e-parent[data-id^="sp_cta_"] > .e-con-inner {
  position: relative;
  z-index: 1;
}

/* Override Elementor's default of hiding bg-videos on mobile.
   We want CTA + hero animations on every device. Mobile browsers handle
   muted+autoplay+playsinline videos fine since iOS 10 / Android 5. */
.elementor-background-video-container.elementor-hidden-mobile {
  display: block !important;
}

/* HERO SLIDESHOW FIX —
   The hero section is `e-con-full` (no .e-con-inner wrapper) — widgets are
   direct children. Force the section itself to be the positioned containing
   block for the absolute-positioned slideshow, and guarantee it fills 75vh.
   The slideshow's video tags (object-fit: cover) then fill the space. */
.elementor-element.elementor-element-sk_hero_slider {
  position: relative !important;
  overflow: hidden !important;
  min-height: 75vh !important;
}
/* Some Elementor builds wrap full containers in .e-con-inner; if so, give
   it the same constraints so the slideshow (when nested inside) still fills. */
.elementor-element.elementor-element-sk_hero_slider > .e-con-inner {
  min-height: 75vh !important;
  width: 100% !important;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: auto;
}
/* Slideshow must layer behind content; sk_hero_inner explicitly above */
.elementor-element-sk_hero_slider .sk-hero-slideshow {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  z-index: 0 !important;
  pointer-events: none;
  overflow: hidden;
}
/* The HTML widget that wraps the slideshow shouldn't carry layout weight —
   it's purely a vehicle for the absolutely-positioned slideshow div. */
.elementor-element-sk_hero_slider > .elementor-element-sk_hero_bg_slideshow,
.elementor-element-sk_hero_slider .elementor-element-sk_hero_bg_slideshow {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  z-index: 0 !important;
  pointer-events: none;
  margin: 0 !important;
}
.elementor-element-sk_hero_slider .elementor-element-sk_hero_inner {
  position: relative;
  z-index: 2;
}
/* Make sure each video element fills the slideshow container. */
.elementor-element-sk_hero_slider .sk-hero-slideshow .sk-slide {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* ==========================================================================
   TREATMENT-PAGE HERO SUBTITLE
   The text-editor injected via skinovatio_render_two_tier_hero — sits below H1.
   ========================================================================== */
.sk-hero-subtitle {
  font-family: "Lato", sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6E5E73;
  text-align: center;
  margin: 0 0 16px;
  line-height: 1.5;
}
.elementor-widget-text-editor:has(.sk-hero-subtitle) {
  margin-top: -8px !important;
}

/* ==========================================================================
   BUTTON SYSTEM — standardize to 3 sizes
   Override Elementor's default size variants with a tight, consistent system.
   sm:  13px / 8px 20px
   md:  15px / 12px 28px  (default)
   lg:  16px / 16px 36px
   ========================================================================== */
.elementor-button {
  font-family: "Lato", sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  border-radius: 50px !important;
  transition: all 0.25s ease !important;
}
.elementor-button.elementor-size-sm,
.elementor-button.elementor-button-link.elementor-size-sm {
  font-size: 13px !important;
  padding: 8px 20px !important;
}
.elementor-button.elementor-size-md,
.elementor-button.elementor-button-link.elementor-size-md {
  font-size: 15px !important;
  padding: 12px 28px !important;
}
.elementor-button.elementor-size-lg,
.elementor-button.elementor-button-link.elementor-size-lg {
  font-size: 16px !important;
  padding: 16px 36px !important;
}

/* ==========================================================================
   HEADER NAV — collapse the mega-menu's deep treatment leaves
   The treatment links are still in the DOM (SEO-indexable + accessible via
   sub-menu hover/keyboard), but visually we hide them in the FLAT primary nav
   on desktop so the menu doesn't look like a 35-link wall.
   We KEEP: top-level items (Home, About, Services, Face, Skin, Body, Academy,
   Memberships, Promotions, Contact) + treatment items inside dropdowns.
   ========================================================================== */
@media (min-width: 1025px) {
  /* Hide treatment leaves that appear at the top level of the flat menu.
     They still render inside their parent dropdown (Face/Skin/Body submenu). */
  .elementor-location-header .elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item-has-children + li.menu-item:not(.menu-item-has-children):not(.current-menu-item):has(a[href*="/services/face/"]),
  .elementor-location-header .elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item:not(.menu-item-has-children):has(a[href*="/services/skin/"]),
  .elementor-location-header .elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item:not(.menu-item-has-children):has(a[href*="/services/body-wellness/"]) {
    display: none !important;
  }
}

/* Trust-badge + breadcrumb CSS removed per client preference.
   See git history if you need to restore them. */

/* ==========================================================================
   ACCESSIBILITY — :focus-visible
   Show focus ring ONLY for keyboard users (not mouse clicks).
   Modern browsers: :focus-visible matches when focus came from keyboard;
   :focus:not(:focus-visible) covers mouse-click focus = hide outline.
   ========================================================================== */
*:focus-visible {
  outline: 2px solid #2D1B2E !important;
  outline-offset: 3px !important;
  border-radius: 2px;
}
*:focus:not(:focus-visible) {
  outline: none !important;
}
/* Buttons get a slightly stronger focus indicator since they're interactive */
.elementor-button:focus-visible,
button:focus-visible,
a.elementor-button:focus-visible {
  outline: 3px solid #2D1B2E !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 6px rgba(45, 27, 46, 0.18) !important;
}

/* ==========================================================================
   FORM SUCCESS / ERROR MESSAGES — brand-styled
   Replaces Elementor's generic green/red alert boxes with on-brand styling.
   ========================================================================== */
.elementor-message.elementor-message-success {
  background: linear-gradient(135deg, #2D1B2E 0%, #055a58 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 18px 24px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 6px 20px rgba(45, 27, 46, 0.15) !important;
  margin-top: 16px !important;
}
.elementor-message.elementor-message-success::before {
  content: "✓  ";
  font-weight: 700;
  margin-right: 4px;
}
.elementor-message.elementor-message-danger,
.elementor-message.elementor-message-error {
  background: #FFF5F5 !important;
  color: #B94A48 !important;
  border: 1px solid #E2B9B7 !important;
  border-left: 4px solid #B94A48 !important;
  border-radius: 8px !important;
  padding: 16px 24px !important;
  font-weight: 500 !important;
  margin-top: 16px !important;
}
.elementor-message.elementor-message-danger::before,
.elementor-message.elementor-message-error::before {
  content: "⚠  ";
  font-weight: 700;
  margin-right: 4px;
}
/* Required-field error styling: highlight the offending input */
.elementor-field-group input:invalid:not(:placeholder-shown),
.elementor-field-group textarea:invalid:not(:placeholder-shown) {
  border-color: #B94A48 !important;
  box-shadow: 0 0 0 1px #B94A48 !important;
}
/* Required-field marker (subtle teal asterisk in label) */
.elementor-field-group.elementor-field-required > .elementor-field-label::after {
  content: " *";
  color: #2D1B2E;
  font-weight: 700;
}

/* Legal & policy pages — brand-consistent page hero.
   Targets: Privacy Policy (3), Terms (235), HIPAA (236), Cancellation (459).
   IMPORTANT: scope selectors to the page-body Elementor wrapper only
   (data-elementor-type="wp-page") — otherwise rules bleed into the
   header and footer Elementor templates and break sitewide styling. */
.page-id-3   .elementor[data-elementor-type="wp-page"] > .e-con:first-of-type,
.page-id-235 .elementor[data-elementor-type="wp-page"] > .e-con:first-of-type,
.page-id-236 .elementor[data-elementor-type="wp-page"] > .e-con:first-of-type,
.page-id-459 .elementor[data-elementor-type="wp-page"] > .e-con:first-of-type {
  background: linear-gradient(135deg, #2D1B2E 0%, #055a58 100%) !important;
  padding: 80px 60px 64px !important;
  margin-bottom: 0 !important;
}
.page-id-3   .elementor[data-elementor-type="wp-page"] > .e-con:first-of-type .elementor-heading-title,
.page-id-235 .elementor[data-elementor-type="wp-page"] > .e-con:first-of-type .elementor-heading-title,
.page-id-236 .elementor[data-elementor-type="wp-page"] > .e-con:first-of-type .elementor-heading-title,
.page-id-459 .elementor[data-elementor-type="wp-page"] > .e-con:first-of-type .elementor-heading-title {
  color: #FFFFFF !important;
  text-align: center !important;
}
.page-id-3   .elementor[data-elementor-type="wp-page"] > .e-con:nth-of-type(2),
.page-id-235 .elementor[data-elementor-type="wp-page"] > .e-con:nth-of-type(2),
.page-id-236 .elementor[data-elementor-type="wp-page"] > .e-con:nth-of-type(2),
.page-id-459 .elementor[data-elementor-type="wp-page"] > .e-con:nth-of-type(2) {
  --content-width: 760px;
  padding: 64px 30px !important;
}
/* Body text in the BODY section (second .e-con) — dark on white bg.
   Scoped via :nth-of-type(2) so it doesn't bleed into the teal hero. */
.page-id-3   .elementor[data-elementor-type="wp-page"] > .e-con:nth-of-type(2) .elementor-widget-text-editor,
.page-id-235 .elementor[data-elementor-type="wp-page"] > .e-con:nth-of-type(2) .elementor-widget-text-editor,
.page-id-236 .elementor[data-elementor-type="wp-page"] > .e-con:nth-of-type(2) .elementor-widget-text-editor,
.page-id-459 .elementor[data-elementor-type="wp-page"] > .e-con:nth-of-type(2) .elementor-widget-text-editor,
.page-id-3   .elementor[data-elementor-type="wp-page"] > .e-con:nth-of-type(2) .elementor-widget-text-editor p,
.page-id-235 .elementor[data-elementor-type="wp-page"] > .e-con:nth-of-type(2) .elementor-widget-text-editor p,
.page-id-236 .elementor[data-elementor-type="wp-page"] > .e-con:nth-of-type(2) .elementor-widget-text-editor p,
.page-id-459 .elementor[data-elementor-type="wp-page"] > .e-con:nth-of-type(2) .elementor-widget-text-editor p {
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: #2D1B2E !important;
}

/* HERO subtitle text + label — high contrast against teal bg.
   The hero contains a "LEGAL" label heading and an intro text-editor. Both need
   white/near-white text since the bg is teal gradient. */
.page-id-3   .elementor[data-elementor-type="wp-page"] > .e-con:first-of-type .elementor-widget-text-editor,
.page-id-235 .elementor[data-elementor-type="wp-page"] > .e-con:first-of-type .elementor-widget-text-editor,
.page-id-236 .elementor[data-elementor-type="wp-page"] > .e-con:first-of-type .elementor-widget-text-editor,
.page-id-459 .elementor[data-elementor-type="wp-page"] > .e-con:first-of-type .elementor-widget-text-editor,
.page-id-3   .elementor[data-elementor-type="wp-page"] > .e-con:first-of-type .elementor-widget-text-editor p,
.page-id-235 .elementor[data-elementor-type="wp-page"] > .e-con:first-of-type .elementor-widget-text-editor p,
.page-id-236 .elementor[data-elementor-type="wp-page"] > .e-con:first-of-type .elementor-widget-text-editor p,
.page-id-459 .elementor[data-elementor-type="wp-page"] > .e-con:first-of-type .elementor-widget-text-editor p {
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
  text-align: center !important;
}
/* Hero label heading ("LEGAL") — white-tinted for readability */
.page-id-3   .elementor[data-elementor-type="wp-page"] > .e-con:first-of-type .elementor-widget-heading:first-of-type .elementor-heading-title,
.page-id-235 .elementor[data-elementor-type="wp-page"] > .e-con:first-of-type .elementor-widget-heading:first-of-type .elementor-heading-title,
.page-id-236 .elementor[data-elementor-type="wp-page"] > .e-con:first-of-type .elementor-widget-heading:first-of-type .elementor-heading-title,
.page-id-459 .elementor[data-elementor-type="wp-page"] > .e-con:first-of-type .elementor-widget-heading:first-of-type .elementor-heading-title {
  color: rgba(255, 255, 255, 0.85) !important;
  letter-spacing: 3px !important;
}

/* CTA video bg — break out of boxed e-con-inner to fill full section.
   The bg-video-container renders inside e-con-inner (which sits inside the section
   minus padding). Without intervention, the video only fills the e-con-inner's content
   area, leaving teal bands above/below in the section's padding zone.
   Solution: use negative top/bottom equal to the section's padding (--padding-top/bottom)
   so the video extends into the padding area. Combined with 100vw width breakout for
   horizontal full-width. */
.e-con.e-parent[data-id="f1cta0a"] > .e-con-inner > .elementor-background-video-container,
.e-con.e-parent[data-id="svc900"] > .e-con-inner > .elementor-background-video-container,
.e-con.e-parent[data-id="abt050"] > .e-con-inner > .elementor-background-video-container,
.e-con.e-parent[data-id="ct_cta"] > .e-con-inner > .elementor-background-video-container,
.e-con.e-parent[data-id="fac_cta"] > .e-con-inner > .elementor-background-video-container,
.e-con.e-parent[data-id="ski_cta"] > .e-con-inner > .elementor-background-video-container,
.e-con.e-parent[data-id="bod_cta"] > .e-con-inner > .elementor-background-video-container,
.e-con.e-parent[data-id="mem_cta"] > .e-con-inner > .elementor-background-video-container,
.e-con.e-parent[data-id="fin_cta"] > .e-con-inner > .elementor-background-video-container,
.e-con.e-parent[data-id="prom_cta"] > .e-con-inner > .elementor-background-video-container,
.e-con.e-parent[data-id="cta_43ffa03"] > .e-con-inner > .elementor-background-video-container,
.e-con.e-parent[data-id="art_cta"] > .e-con-inner > .elementor-background-video-container,
.e-con.e-parent[data-id="acd_cta"] > .e-con-inner > .elementor-background-video-container,
.e-con.e-parent[data-id="pkg_cta"] > .e-con-inner > .elementor-background-video-container,
.e-con.e-parent[data-id^="sp_cta_"] > .e-con-inner > .elementor-background-video-container {
  position: absolute !important;
  top: calc(-1 * var(--padding-top, 160px)) !important;
  bottom: calc(-1 * var(--padding-bottom, 160px)) !important;
  left: 50% !important;
  width: 100vw !important;
  height: auto !important;
  transform: translateX(-50%) !important;
  z-index: 0 !important;
}
/* Same fix for the ::before overlay so the teal tint covers the same area */
.e-con.e-parent[data-id="f1cta0a"]::before,
.e-con.e-parent[data-id="svc900"]::before,
.e-con.e-parent[data-id="abt050"]::before,
.e-con.e-parent[data-id="ct_cta"]::before,
.e-con.e-parent[data-id="fac_cta"]::before,
.e-con.e-parent[data-id="ski_cta"]::before,
.e-con.e-parent[data-id="bod_cta"]::before,
.e-con.e-parent[data-id="mem_cta"]::before,
.e-con.e-parent[data-id="fin_cta"]::before,
.e-con.e-parent[data-id="prom_cta"]::before,
.e-con.e-parent[data-id="cta_43ffa03"]::before,
.e-con.e-parent[data-id="art_cta"]::before,
.e-con.e-parent[data-id="acd_cta"]::before,
.e-con.e-parent[data-id="pkg_cta"]::before,
.e-con.e-parent[data-id^="sp_cta_"]::before {
  /* Ensure ::before covers the entire section, not just content area */
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
}
/* The teal overlay is ::before on the bg-video-container — already covered by the parent
   selector above since the ::before inherits the parent's positioning context. */
/* Make CTA section overflow visible so the breakout doesn't get clipped */
.e-con.e-parent[data-id="f1cta0a"],
.e-con.e-parent[data-id="svc900"],
.e-con.e-parent[data-id="abt050"],
.e-con.e-parent[data-id="ct_cta"],
.e-con.e-parent[data-id="fac_cta"],
.e-con.e-parent[data-id="ski_cta"],
.e-con.e-parent[data-id="bod_cta"],
.e-con.e-parent[data-id="cta_43ffa03"],
.e-con.e-parent[data-id="acd_cta"],
.e-con.e-parent[data-id="art_cta"],
.e-con.e-parent[data-id="mem_cta"],
.e-con.e-parent[data-id^="sp_cta_"] {
  overflow: hidden !important;
  position: relative !important;
}
/* Ensure e-con-inner doesn't create a stacking context that clips the breakout */
.e-con.e-parent[data-id="f1cta0a"] > .e-con-inner,
.e-con.e-parent[data-id="svc900"] > .e-con-inner,
.e-con.e-parent[data-id="abt050"] > .e-con-inner,
.e-con.e-parent[data-id="ct_cta"] > .e-con-inner,
.e-con.e-parent[data-id="fac_cta"] > .e-con-inner,
.e-con.e-parent[data-id="ski_cta"] > .e-con-inner,
.e-con.e-parent[data-id="bod_cta"] > .e-con-inner,
.e-con.e-parent[data-id="cta_43ffa03"] > .e-con-inner,
.e-con.e-parent[data-id="acd_cta"] > .e-con-inner,
.e-con.e-parent[data-id="art_cta"] > .e-con-inner,
.e-con.e-parent[data-id="mem_cta"] > .e-con-inner,
.e-con.e-parent[data-id^="sp_cta_"] > .e-con-inner {
  overflow: visible !important;
  position: relative !important;
  z-index: 2 !important;
}

/* --- Inner Service Page Sidebar --- */

/* Parent row must allow sticky to work — no overflow hidden, items stretch */
.sk-service-sidebar {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 100px !important;
  align-self: flex-start !important;
  --width: 33% !important;
  width: 33% !important;
  min-width: 0 !important;
  max-width: 360px !important;
  flex-basis: 33% !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  z-index: 10;
}

/* Ensure sidebar parent row doesn't break sticky.
   Elementor boxed layout: .e-con.e-con-boxed > .e-con-inner > .sk-service-sidebar
   Must target both the outer .e-con and the inner .e-con-inner wrapper. */
.e-con:has(.sk-service-sidebar) {
  overflow: visible !important;
  min-height: 900px !important;
}
.e-con:has(.sk-service-sidebar) > .e-con-inner {
  overflow: visible !important;
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
  min-height: 900px !important;
}

/* Sidebar inner card */
.sk-sidebar-card {
  background: var(--sk-white) !important;
  border: 1px solid var(--sk-gray-light) !important;
  border-top: 3px solid var(--sk-teal-dark) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}
.e-con.e-parent .e-con.e-parent.sk-sidebar-card {
  --padding-top: 40px !important;
  --padding-right: 28px !important;
  --padding-bottom: 40px !important;
  --padding-left: 28px !important;
  padding-top: 40px !important;
  padding-bottom: 40px !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}

/* Sidebar logo — box logo, centered */
.sk-service-sidebar .elementor-widget-image img {
  width: 180px !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Sidebar heading — "Have a Question?" */
.sk-service-sidebar .elementor-widget-heading .elementor-heading-title {
  font-family: var(--sk-font-heading) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--sk-dark) !important;
}

/* Sidebar phone link */
.sk-service-sidebar .elementor-widget-text-editor a {
  color: var(--sk-teal-dark) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.sk-service-sidebar .elementor-widget-text-editor a:hover {
  color: var(--sk-teal) !important;
}

/* Sidebar contact details */
.sk-service-sidebar .elementor-widget-text-editor p {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--sk-text) !important;
}

/* Sidebar button — pill shape, full width, with bottom spacing inside card */
.sk-service-sidebar .elementor-widget-button {
  margin-bottom: 24px !important;
  padding-bottom: 8px !important;
}
.sk-service-sidebar .elementor-widget-button .elementor-button {
  border-radius: 50px !important;
  font-family: var(--sk-font-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.5px !important;
  padding: 12px 24px !important;
  width: 100% !important;
  text-align: center !important;
}

/* --- Videos Hero — background image set via Elementor, overlay via ::before --- */
.sk-videos-hero {
  position: relative !important;
  min-height: 45vh !important;
  max-height: 500px !important;
}

/* Videos "Coming Soon" card — generous internal spacing */
.elementor-element-vid_coming > .elementor-widget:first-child {
  margin-top: 60px !important;
  padding-top: 20px !important;
}
.elementor-element-vid_coming > .elementor-widget:last-child {
  margin-bottom: 60px !important;
  padding-bottom: 20px !important;
}
.elementor-element-vid_coming > .elementor-widget {
  margin-bottom: 16px !important;
}

/* --- Before & After Section --- */
.sk-before-after-section {
  background: #F9F6F3 !important;
}

.sk-ba-card {
  overflow: hidden !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.sk-ba-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1) !important;
}

/* Force spacing inside B&A before/after halves via child margins */
.sk-ba-before > .elementor-widget:first-child,
.sk-ba-after > .elementor-widget:first-child {
  margin-top: 24px !important;
}
.sk-ba-before > .elementor-widget:last-child,
.sk-ba-after > .elementor-widget:last-child {
  margin-bottom: 24px !important;
}
.sk-ba-before,
.sk-ba-after {
  padding: 0 12px !important;
}

.sk-ba-card img {
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 8px !important;
}

.sk-ba-card .elementor-heading-title {
  margin-top: 14px !important;
  padding-bottom: 4px !important;
}

@media (max-width: 767px) {
  .sk-ba-card {
    width: 100% !important;
    max-width: 400px !important;
  }
}

/* --- Footer (global template) — default white text, Elementor can override --- */
.e-con[data-id="ftr001"] p,
.e-con[data-id="ftr001"] span,
.e-con[data-id="ftr001"] li,
.e-con[data-id="ftr001"] a,
.e-con[data-id="ftr001"] .elementor-widget-text-editor,
.e-con[data-id="ftr001"] .elementor-text-editor {
  color: var(--sk-white);
}

/* Footer links: light mint hover */
.e-con[data-id="ftr001"] a:hover {
  color: var(--sk-teal-light);
  text-decoration: underline;
}

/* Footer copyright bar — slightly dimmed */
.e-con[data-id="ftr014"] p,
.e-con[data-id="ftr014"] span,
.e-con[data-id="ftr014"] li,
.e-con[data-id="ftr014"] .elementor-widget-text-editor,
.e-con[data-id="ftr014"] .elementor-text-editor {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px !important;
}
/* Copyright bar — even darker bg */
.e-con[data-id="ftr014"] {
  background-color: #141E27 !important;
}

/* Footer social icons — clean white outlines */
.elementor-location-footer .elementor-social-icon {
  background-color: transparent !important;
  border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
  padding: 8px !important;
  transition: all 0.3s ease;
}
.elementor-location-footer .elementor-social-icon:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.9) !important;
}
.elementor-location-footer .elementor-social-icon svg {
  fill: rgba(255, 255, 255, 0.8) !important;
  width: 16px !important;
  height: 16px !important;
}
.elementor-location-footer .elementor-social-icon:hover svg {
  fill: #FFFFFF !important;
}

/* Footer legal links — subtler style */
.elementor-location-footer [data-id="ftr007"] a[href*="privacy"],
.elementor-location-footer [data-id="ftr007"] a[href*="terms"],
.elementor-location-footer [data-id="ftr007"] a[href*="hipaa"] {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 12px !important;
}
.elementor-location-footer [data-id="ftr007"] a[href*="privacy"]:hover,
.elementor-location-footer [data-id="ftr007"] a[href*="terms"]:hover,
.elementor-location-footer [data-id="ftr007"] a[href*="hipaa"]:hover {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Footer phone & email — button-style CTAs */
.elementor-location-footer [data-id="ftr013"] a[href^="tel:"],
.elementor-location-footer [data-id="ftr013"] a[href^="mailto:"] {
  display: inline-block !important;
  background-color: var(--sk-teal) !important;
  color: var(--sk-teal-dark) !important;
  font-family: var(--sk-font-body) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 12px 28px !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  transition: var(--sk-transition) !important;
  text-align: center !important;
  min-width: 200px !important;
}
.elementor-location-footer [data-id="ftr013"] a[href^="tel:"]:hover,
.elementor-location-footer [data-id="ftr013"] a[href^="mailto:"]:hover {
  background-color: var(--sk-white) !important;
  color: var(--sk-teal-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

/* ==========================================================================
   Legal Pages — Hero Banner (Privacy Policy, Terms of Service, HIPAA Notice)
   ========================================================================== */

/* Hero band — warm sand background behind page title */
.sk-page-privacy-policy .page-header,
.sk-page-terms-of-service .page-header,
.sk-page-hipaa-notice .page-header {
  background-color: var(--sk-sand) !important;
  padding: 80px 0 60px !important;
  margin-bottom: 0 !important;
  text-align: center !important;
}

/* If theme uses entry-title directly without .page-header wrapper */
.sk-page-privacy-policy .site-main > .entry-title,
.sk-page-terms-of-service .site-main > .entry-title,
.sk-page-hipaa-notice .site-main > .entry-title,
.sk-page-privacy-policy .page-header .entry-title,
.sk-page-terms-of-service .page-header .entry-title,
.sk-page-hipaa-notice .page-header .entry-title {
  font-family: var(--sk-font-heading) !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  font-weight: 700 !important;
  color: var(--sk-dark) !important;
  margin: 0 !important;
  padding: 80px 20px 60px !important;
  background-color: var(--sk-sand) !important;
  text-align: center !important;
}

/* Subtitle line under hero title */
.sk-page-privacy-policy .site-main > .entry-title::after,
.sk-page-terms-of-service .site-main > .entry-title::after,
.sk-page-hipaa-notice .site-main > .entry-title::after,
.sk-page-privacy-policy .page-header .entry-title::after,
.sk-page-terms-of-service .page-header .entry-title::after,
.sk-page-hipaa-notice .page-header .entry-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background-color: var(--sk-teal-dark);
  margin: 24px auto 0;
  border-radius: 2px;
}

/* Content area below hero — constrained width, clean spacing */
.sk-page-privacy-policy .page-content,
.sk-page-terms-of-service .page-content,
.sk-page-hipaa-notice .page-content,
.sk-page-privacy-policy .entry-content,
.sk-page-terms-of-service .entry-content,
.sk-page-hipaa-notice .entry-content {
  max-width: 800px !important;
  margin: 0 auto !important;
  padding: 60px 20px 80px !important;
}

/* Hide duplicate title inside content (first h2 that matches page title) */
.sk-page-privacy-policy .page-content > h2:first-child,
.sk-page-terms-of-service .page-content > h2:first-child,
.sk-page-hipaa-notice .page-content > h2:first-child,
.sk-page-privacy-policy .entry-content > h2:first-child,
.sk-page-terms-of-service .entry-content > h2:first-child,
.sk-page-hipaa-notice .entry-content > h2:first-child {
  display: none !important;
}

/* ==========================================================================
   Inner-Page Hero Banners (Articles, Memberships, Finance, Promotions)
   Teal gradient overlay on background image — matches homepage slider aesthetic
   ========================================================================== */
.sk-inner-hero {
  position: relative;
  width: 100%;
  height: 45vh;
  min-height: 320px;
  max-height: 500px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--sk-teal-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sk-inner-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(45,27,46,0.85) 0%, rgba(45,27,46,0.80) 100%);
  z-index: 1;
}
.sk-inner-hero__overlay {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 40px 20px;
  max-width: 700px;
}
.sk-inner-hero__overlay h1 {
  font-family: var(--sk-font-heading) !important;
  font-size: clamp(2rem, 5vw, 3.2rem) !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 0 0 16px !important;
  line-height: 1.2 !important;
}
.sk-inner-hero__overlay p {
  font-family: var(--sk-font-body) !important;
  font-size: clamp(1rem, 2vw, 1.2rem) !important;
  color: rgba(255,255,255,0.9) !important;
  margin: 0 !important;
  line-height: 1.6 !important;
}

/* Elementor widgets inside the hero — above overlay, white text */
.sk-inner-hero > .e-con-inner,
.sk-inner-hero > .elementor-widget {
  position: relative;
  z-index: 2;
}
.sk-inner-hero .elementor-heading-title {
  font-family: var(--sk-font-heading) !important;
  font-size: clamp(2rem, 5vw, 3.2rem) !important;
  font-weight: 700 !important;
  color: #fff !important;
  font-style: italic !important;
}
.sk-inner-hero .elementor-widget-text-editor {
  max-width: 600px;
  margin: 0 auto;
}
.sk-inner-hero .elementor-widget-text-editor p {
  color: rgba(255,255,255,0.9) !important;
  font-family: var(--sk-font-body) !important;
  font-size: clamp(1rem, 2vw, 1.15rem) !important;
  line-height: 1.6 !important;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .sk-inner-hero {
    height: 35vh;
    min-height: 260px;
  }
  .sk-inner-hero__overlay {
    padding: 30px 16px;
  }
}

/* ==========================================================================
   Single Blog Post — Hero, Article, CTA
   ========================================================================== */

/* Hide default Hello Elementor page-header on single posts */
.single-post .page-header {
  display: none !important;
}

/* Post Hero Banner */
.sk-post-hero {
  position: relative;
  width: 100%;
  height: 50vh;
  min-height: 380px;
  max-height: 540px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--sk-teal-dark);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sk-post-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(45,27,46,0.92) 0%, rgba(45,27,46,0.5) 40%, rgba(45,27,46,0.3) 100%);
  z-index: 1;
}
.sk-post-hero__overlay {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 20px 50px;
  max-width: 800px;
}
.sk-post-hero__cat {
  display: inline-block;
  font-family: var(--sk-font-body) !important;
  font-size: 0.75rem !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--sk-teal-light) !important;
  background: rgba(255,255,255,0.15);
  padding: 5px 16px;
  border-radius: 20px;
  margin-bottom: 18px;
}
.sk-post-hero__title {
  font-family: var(--sk-font-heading) !important;
  font-size: clamp(1.8rem, 4.5vw, 2.8rem) !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 0 0 16px !important;
  line-height: 1.25 !important;
}
.sk-post-hero__meta {
  font-family: var(--sk-font-body) !important;
  font-size: 0.9rem !important;
  color: rgba(255,255,255,0.75) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Article body */
.sk-single-post {
  background: var(--sk-white) !important;
  padding: 0 20px !important;
  margin: 0 !important;
  max-width: 100% !important;
}
.sk-post-article {
  max-width: 760px;
  margin: 0 auto;
  padding: 60px 0 40px;
}

/* Post content typography */
.sk-post-content h2 {
  font-family: var(--sk-font-heading) !important;
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  color: var(--sk-dark) !important;
  margin: 48px 0 16px !important;
  line-height: 1.3 !important;
}
.sk-post-content h2:first-child {
  margin-top: 0 !important;
}
.sk-post-content h3 {
  font-family: var(--sk-font-heading) !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: var(--sk-teal-dark) !important;
  margin: 36px 0 12px !important;
  line-height: 1.35 !important;
}
.sk-post-content p {
  font-family: var(--sk-font-body) !important;
  font-size: 1.05rem !important;
  color: var(--sk-dark) !important;
  line-height: 1.8 !important;
  margin: 0 0 20px !important;
}
.sk-post-content ul,
.sk-post-content ol {
  margin: 0 0 24px 0 !important;
  padding-left: 20px !important;
}
.sk-post-content li {
  font-family: var(--sk-font-body) !important;
  font-size: 1.02rem !important;
  color: var(--sk-dark) !important;
  line-height: 1.75 !important;
  margin-bottom: 10px !important;
  padding-left: 6px !important;
}
.sk-post-content li strong {
  color: var(--sk-teal-dark) !important;
}
.sk-post-content a {
  color: var(--sk-teal-dark) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.sk-post-content a:hover {
  color: var(--sk-teal-light) !important;
}

/* CTA banner at end of post */
.sk-post-cta {
  background: var(--sk-sand);
  border-radius: 12px;
  padding: 44px 36px;
  text-align: center;
  margin: 50px 0 30px;
}
.sk-post-cta h3 {
  font-family: var(--sk-font-heading) !important;
  font-size: 1.5rem !important;
  color: var(--sk-dark) !important;
  margin: 0 0 10px !important;
}
.sk-post-cta p {
  font-family: var(--sk-font-body) !important;
  font-size: 1rem !important;
  color: var(--sk-slate) !important;
  margin: 0 0 22px !important;
}
.sk-post-cta .sk-btn-primary {
  display: inline-block;
  background-color: var(--sk-teal-light);
  color: var(--sk-teal-dark) !important;
  font-family: var(--sk-font-body) !important;
  font-size: 1rem !important;
  font-weight: 600;
  padding: 14px 36px;
  border-radius: 30px;
  text-decoration: none !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.sk-post-cta .sk-btn-primary:hover {
  background-color: var(--sk-teal-dark);
  color: #fff !important;
}

/* Back to articles link */
.sk-post-back {
  text-align: center;
  padding: 20px 0 0;
}
.sk-post-back a {
  font-family: var(--sk-font-body) !important;
  font-size: 0.95rem !important;
  font-weight: 600;
  color: var(--sk-teal-dark) !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}
.sk-post-back a:hover {
  color: var(--sk-teal-light) !important;
}

@media (max-width: 767px) {
  .sk-post-hero {
    height: 40vh;
    min-height: 300px;
  }
  .sk-post-hero__overlay {
    padding: 0 16px 36px;
  }
  .sk-post-article {
    padding: 40px 0 30px;
  }
  .sk-post-cta {
    padding: 32px 20px;
  }
}

/* ==========================================================================
   Articles Blog Listing
   ========================================================================== */
.sk-articles-listing {
  background-color: var(--sk-white);
  padding: 80px 20px;
}
.sk-articles-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.sk-articles-intro {
  font-family: var(--sk-font-body) !important;
  font-size: 1.15rem !important;
  color: var(--sk-slate) !important;
  text-align: center !important;
  max-width: 700px;
  margin: 0 auto 50px !important;
  line-height: 1.7 !important;
}
.sk-articles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px;
}
.sk-article-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}
.sk-article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.10);
}
.sk-article-card__img {
  display: block;
  width: 100%;
  height: 220px;
  overflow: hidden;
}
.sk-article-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.sk-article-card:hover .sk-article-card__img img {
  transform: scale(1.05);
}
.sk-article-card__body {
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.sk-article-card__cat {
  display: inline-block;
  font-family: var(--sk-font-body) !important;
  font-size: 0.75rem !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--sk-teal-dark) !important;
  background: rgba(45,27,46,0.08);
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 14px;
  width: fit-content;
}
.sk-article-card__title {
  font-family: var(--sk-font-heading) !important;
  font-size: 1.25rem !important;
  line-height: 1.35 !important;
  margin: 0 0 12px !important;
}
.sk-article-card__title a {
  color: var(--sk-dark) !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}
.sk-article-card__title a:hover {
  color: var(--sk-teal-dark) !important;
}
.sk-article-card__excerpt {
  font-family: var(--sk-font-body) !important;
  font-size: 0.92rem !important;
  color: var(--sk-slate) !important;
  line-height: 1.6 !important;
  margin: 0 0 auto !important;
  padding-bottom: 16px;
}
.sk-article-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid #F9F6F3;
}
.sk-article-card__meta time {
  font-family: var(--sk-font-body) !important;
  font-size: 0.82rem !important;
  color: #999 !important;
}
.sk-article-card__read {
  font-family: var(--sk-font-body) !important;
  font-size: 0.88rem !important;
  font-weight: 600;
  color: var(--sk-teal-dark) !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}
.sk-article-card__read:hover {
  color: var(--sk-teal-light) !important;
}

@media (max-width: 767px) {
  .sk-articles-listing {
    padding: 50px 16px;
  }
  .sk-articles-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .sk-article-card__img {
    height: 180px;
  }
}

/* ==========================================================================
   Articles — Elementor Posts Widget Styling
   ========================================================================== */

/* Center the posts grid section */
.sk-page-cards.sk-articles-grid {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  background: #F9F6F3 !important;
  padding: 60px 40px !important;
}
.sk-page-cards.sk-articles-grid > .elementor-widget-heading {
  width: 100% !important;
  text-align: center !important;
  margin-bottom: 10px !important;
}
.sk-page-cards.sk-articles-grid > .elementor-widget-posts {
  width: 100% !important;
  max-width: 1100px !important;
}

/* Posts grid layout */
.sk-articles-grid .elementor-posts-container.elementor-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 30px !important;
  justify-content: center !important;
}

/* Individual post cards */
.sk-articles-grid .elementor-posts-container .elementor-post {
  background: #FFFFFF !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  width: 100% !important;
}
.sk-articles-grid .elementor-posts-container .elementor-post:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.10) !important;
}

/* Post thumbnail */
.sk-articles-grid .elementor-post__thumbnail {
  border-radius: 12px 12px 0 0 !important;
  overflow: hidden !important;
  height: 200px !important;
}
.sk-articles-grid .elementor-post__thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Post text area */
.sk-articles-grid .elementor-post__text {
  padding: 20px 24px 24px !important;
}

/* Post title */
.sk-articles-grid .elementor-post__title,
.sk-articles-grid .elementor-post__title a {
  font-family: 'Playfair Display', serif !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  color: var(--sk-dark, #2D1B2E) !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
  margin-bottom: 8px !important;
}
.sk-articles-grid .elementor-post__title a:hover {
  color: var(--sk-teal-dark, #2D1B2E) !important;
}

/* Post excerpt */
.sk-articles-grid .elementor-post__excerpt p {
  font-family: 'Lato', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: var(--sk-gray, #6E5E73) !important;
  margin-bottom: 12px !important;
}

/* Read more link */
.sk-articles-grid .elementor-post__read-more {
  font-family: 'Lato', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--sk-teal-dark, #2D1B2E) !important;
  text-decoration: none !important;
}
.sk-articles-grid .elementor-post__read-more:hover {
  color: var(--sk-teal, #61B09A) !important;
}

/* Post meta (date) */
.sk-articles-grid .elementor-post-date,
.sk-articles-grid .elementor-post__meta-data {
  font-family: 'Lato', sans-serif !important;
  font-size: 12px !important;
  color: var(--sk-gray, #6E5E73) !important;
  margin-bottom: 6px !important;
}

/* Badge (category) */
.sk-articles-grid .elementor-post__badge {
  background: var(--sk-teal-dark, #2D1B2E) !important;
  color: #FFFFFF !important;
  font-family: 'Lato', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
}

/* Responsive: 2 col tablet, 1 col mobile */
@media (min-width: 768px) and (max-width: 1024px) {
  .sk-articles-grid .elementor-posts-container.elementor-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 767px) {
  .sk-page-cards.sk-articles-grid {
    padding: 40px 16px !important;
  }
  .sk-articles-grid .elementor-posts-container.elementor-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* ==========================================================================
   Placeholder Content (Memberships, Finance, Promotions)
   Temporary layout until real Elementor content is designed
   ========================================================================== */
.sk-placeholder-content {
  background-color: var(--sk-white);
  padding: 80px 20px;
}
.sk-placeholder-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.sk-placeholder-intro {
  font-family: var(--sk-font-body) !important;
  font-size: 1.15rem !important;
  color: var(--sk-slate) !important;
  text-align: center !important;
  max-width: 700px;
  margin: 0 auto 50px !important;
  line-height: 1.7 !important;
}
.sk-placeholder-cards {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 30px !important;
  margin-bottom: 60px;
}
/* Override Elementor container defaults inside cards grid */
.sk-placeholder-cards > .e-con {
  width: 100% !important;
  max-width: 100% !important;
}
.sk-placeholder-card {
  background: var(--sk-sand);
  border-radius: 12px;
  padding: 36px 28px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sk-placeholder-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.sk-placeholder-card h3 {
  font-family: var(--sk-font-heading) !important;
  font-size: 1.3rem !important;
  color: var(--sk-dark) !important;
  margin: 0 0 12px !important;
}
/* --- New page section spacing (override Elementor 64px default) --- */
.sk-page-intro.e-con {
  padding: 40px 40px 10px !important;
}
.sk-page-cards.e-con {
  padding: 20px 30px 30px !important;
  gap: 30px !important;
}
.sk-page-cta.e-con {
  /* padding controlled by per-section Elementor settings (default 160px) */
  gap: 20px !important;
}
.sk-page-cta .elementor-widget-text-editor p,
.sk-page-cta .elementor-widget-text-editor {
  color: #FFFFFF !important;
  font-weight: 400 !important;
  font-size: 17px !important;
  opacity: 1 !important;
}

/* Larger paragraph text for readability */
.elementor-widget-text-editor p,
.elementor-widget-text-editor,
.sk-page-intro p,
.sk-page-cards p {
  font-size: 17px !important;
  line-height: 1.75 !important;
}

/* Hide "No Comments" on posts grid / archive */
.elementor-post__comments,
.elementor-posts .comments-link,
.post-comments,
.elementor-post-avatar {
  display: none !important;
}

/* Read More link — better contrast */
.elementor-post__read-more {
  color: var(--sk-teal-dark) !important;
  font-family: var(--sk-font-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}
.elementor-post__read-more:hover {
  color: var(--sk-teal-light) !important;
}

.sk-placeholder-card p {
  font-family: var(--sk-font-body) !important;
  font-size: 0.95rem !important;
  color: var(--sk-slate) !important;
  margin: 0 !important;
  line-height: 1.6 !important;
}
.sk-placeholder-cta {
  text-align: center;
  padding: 40px 0 0;
  border-top: 1px solid var(--sk-sand);
}
.sk-placeholder-cta p {
  font-family: var(--sk-font-body) !important;
  font-size: 1.05rem !important;
  color: var(--sk-slate) !important;
  margin: 0 0 24px !important;
}
.sk-placeholder-cta .sk-btn-primary {
  display: inline-block;
  background-color: var(--sk-teal-light);
  color: var(--sk-teal-dark) !important;
  font-family: var(--sk-font-body) !important;
  font-size: 1rem !important;
  font-weight: 600;
  padding: 14px 36px;
  border-radius: 30px;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.sk-placeholder-cta .sk-btn-primary:hover {
  background-color: var(--sk-teal-dark);
  color: #fff !important;
}

@media (max-width: 767px) {
  .sk-placeholder-content {
    padding: 50px 16px;
  }
  .sk-placeholder-cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Tablet: new page cards — stack to 2-col or full width */
@media (max-width: 1024px) {
  .sk-page-cards .e-con-inner > .e-con > .e-con,
  .sk-page-cards .e-con > .e-con {
    width: 100% !important;
    min-width: 100% !important;
    flex-basis: 100% !important;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .sk-page-cards .e-con-inner > .e-con > .e-con,
  .sk-page-cards .e-con > .e-con {
    width: 47% !important;
    min-width: 47% !important;
    flex-basis: 47% !important;
  }
}

/* ==========================================================================
   CLICKABLE CARDS — Full card acts as link (JS handles click, CSS handles visuals)
   ========================================================================== */

/* Card containers — pointer cursor & hover lift */
.sk-clickable-card {
  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.sk-clickable-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
}

/* ==========================================================================
   Mobile Header & Responsive Fixes
   ========================================================================== */

@media (max-width: 767px) {
  /* Header CTA button — hide on mobile to prevent overflow */
  .elementor-location-header .elementor-widget-button {
    display: none !important;
  }

  /* Service cards — stack single column on mobile */
  .e-con.e-parent[data-id="c1svcs0"] .elementor-widget-heading h2.elementor-heading-title {
    font-size: 2rem !important;
  }

  /* Footer columns — reduce padding on mobile */
  .e-con.e-parent[data-id="h1ftr0a"] {
    padding-top: 40px !important;
    padding-bottom: 20px !important;
  }

  /* About hero text — prevent overflow on mobile */
  .e-con.e-parent[data-id="abt001"] .elementor-widget-heading h1 {
    font-size: 2.2rem !important;
  }

  /* Inner service page sidebar — stack below content on mobile */
  .sk-service-sidebar {
    position: static !important;
    width: 100% !important;
    order: 2 !important;
  }
}

/* ==========================================================================
   MOBILE NAVIGATION — Full menu in hamburger dropdown
   Elementor's auto-generated dropdown is broken (only shows Services sub-items).
   Fix: On mobile, repurpose the main menu as a vertical slide-down panel,
   triggered by Elementor's existing hamburger toggle via JS.
   ========================================================================== */

@media (max-width: 1024px) {
  /* --- HEADER LAYOUT: logo left, hamburger right --- */
  .elementor-location-header .elementor-element-hdr_inner {
    flex-direction: row !important;
    --flex-direction: row;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* Hide the nav wrapper and CTA on tablet/mobile — hamburger takes over */
  .elementor-element-hdr_nav_wrap {
    display: none !important;
  }
  .elementor-element-hdr_cta_wrap {
    display: none !important;
  }

  /* Compact header on mobile */
  .elementor-location-header .e-con.e-parent[data-id="hdr_outer"],
  .elementor-location-header .elementor-element-hdr_inner {
    min-height: 70px !important;
  }
  .elementor-location-header .e-con.e-parent[data-id="hdr_outer"] {
    --padding-top: 0px !important;
    --padding-bottom: 0px !important;
  }
  .elementor-location-header .elementor-element-hdr_inner {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
  /* Logo for tablet/mobile — centered, larger, constrained */
  .elementor-element-hdr_logo img,
  .elementor-element-hdr_logo_wrap img {
    max-height: 65px !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Logo wrapper + all children — never overflow into hamburger */
  .elementor-element-hdr_logo_wrap,
  .elementor-element-hdr_logo_wrap .e-con-inner,
  .elementor-element-hdr_logo_wrap .elementor-widget-wrap,
  .elementor-element-hdr_logo_wrap .elementor-widget-container {
    width: auto !important;
    max-width: calc(100vw - 120px) !important;
    min-width: auto !important;
    overflow: hidden !important;
  }
  .elementor-element-hdr_logo_wrap {
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: center !important;
  }
  /* Ensure logo link doesn't extend beyond its container */
  .elementor-element-hdr_logo_wrap a {
    display: inline-block !important;
    max-width: 100% !important;
  }

  /* --- HAMBURGER TOGGLE BUTTON --- */
  .sk-mobile-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    outline: none;
    box-shadow: none !important;
    cursor: pointer;
    padding: 8px;
    margin-right: 12px;
    flex-shrink: 0;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    position: relative;
    z-index: 10;
    touch-action: manipulation;
  }
  .sk-mobile-toggle:hover,
  .sk-mobile-toggle:focus,
  .sk-mobile-toggle:active {
    background: transparent !important;
    background-color: transparent !important;
    outline: none;
    box-shadow: none !important;
  }
  .sk-mobile-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--sk-dark);
    position: relative;
    transition: all 0.3s ease;
  }
  .sk-mobile-toggle span::before,
  .sk-mobile-toggle span::after {
    content: '';
    position: absolute;
    left: 0;
    width: 24px;
    height: 2px;
    background: var(--sk-dark);
    transition: all 0.3s ease;
  }
  .sk-mobile-toggle span::before { top: -7px; }
  .sk-mobile-toggle span::after { top: 7px; }

  /* Toggle X state */
  .sk-mobile-toggle.active span { background: transparent; }
  .sk-mobile-toggle.active span::before { top: 0; transform: rotate(45deg); }
  .sk-mobile-toggle.active span::after { top: 0; transform: rotate(-45deg); }

  /* --- MOBILE SLIDE-DOWN MENU --- */
  .sk-mobile-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--sk-white);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    padding: 10px 0;
    border-top: 1px solid var(--sk-gray-light);
    max-height: calc(100vh - 70px - 50px);
    max-height: calc(100dvh - 70px - 50px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Prevent body scroll when mobile menu is open */
  body.sk-mobile-menu-open {
    overflow: hidden !important;
  }
  .sk-mobile-menu.open {
    display: block;
  }

  .sk-mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Top-level items */
  .sk-mobile-menu > ul > li > a {
    display: block;
    padding: 12px 24px;
    font-family: var(--sk-font-body);
    font-size: 15px;
    font-weight: 400;
    color: var(--sk-dark);
    text-decoration: none;
    border-bottom: 1px solid var(--sk-gray-light);
    transition: background 0.2s ease;
  }
  .sk-mobile-menu > ul > li > a:hover,
  .sk-mobile-menu > ul > li > a:active {
    background: var(--sk-cream);
    color: var(--sk-teal-dark);
  }

  /* Services parent — arrow indicator */
  .sk-mobile-menu > ul > li.has-children > a::after {
    content: '›';
    float: right;
    font-size: 20px;
    transition: transform 0.3s ease;
  }
  .sk-mobile-menu > ul > li.has-children.open > a::after {
    transform: rotate(90deg);
  }

  /* Sub-menu (Services accordion) */
  .sk-mobile-menu .sk-mobile-submenu {
    display: none;
    background: var(--sk-cream);
  }
  .sk-mobile-menu .has-children.open .sk-mobile-submenu {
    display: block;
  }

  /* Category headings (Face, Skin, Body & Wellness) */
  .sk-mobile-submenu .sk-mobile-cat-heading {
    display: block;
    padding: 10px 24px 6px 32px;
    font-family: var(--sk-font-body);
    font-size: 13px;
    font-weight: 700;
    color: var(--sk-teal-dark);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    border-bottom: none;
  }

  /* Service links under each category */
  .sk-mobile-submenu a {
    display: block;
    padding: 10px 24px 10px 40px;
    font-family: var(--sk-font-body);
    font-size: 15px;
    font-weight: 300;
    color: var(--sk-text);
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    transition: background 0.2s ease, color 0.2s ease;
  }
  .sk-mobile-submenu a:hover {
    background: rgba(45, 27, 46, 0.06);
    color: var(--sk-teal-dark);
  }

  /* CTA button at bottom of mobile menu */
  .sk-mobile-menu .sk-mobile-cta {
    display: block;
    margin: 10px 24px;
    padding: 12px 24px;
    background: var(--sk-teal-dark);
    color: var(--sk-white) !important;
    border-radius: 50px;
    text-align: center;
    font-family: var(--sk-font-body);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s ease;
  }
  .sk-mobile-menu .sk-mobile-cta:hover {
    background: var(--sk-teal-dark-hover);
  }

  .sk-mobile-menu .sk-mobile-call {
    display: block !important;
    background: var(--sk-teal-dark) !important;
    color: var(--sk-white) !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    padding: 12px 24px !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
  }
  .sk-mobile-menu .sk-mobile-call:hover {
    background: var(--sk-teal-dark-hover) !important;
    color: #fff !important;
  }
  /* Hide WhatsApp button when mobile menu is open */
  body.sk-mobile-menu-open .sk-whatsapp-btn {
    display: none !important;
  }

  /* Pin header to top on mobile */
  .elementor-location-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
  }
  /* Offset body so content isn't hidden behind fixed header */
  body:not(.sk-mobile-menu-open) .elementor-location-header + * {
    margin-top: 70px !important;
  }
  .admin-bar .elementor-location-header {
    top: 46px !important;
  }
}

/* Hide mobile elements on desktop */
@media (min-width: 1025px) {
  .sk-mobile-toggle,
  .sk-mobile-menu {
    display: none !important;
  }
}

/* ── MOBILE FOOTER — tighter layout with 2-column nav ── */
@media (max-width: 767px) {
  /* Force inner container to wrap in row direction */
  .elementor-location-footer [data-id="ftr001"] > .e-con-inner {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
  }

  /* Logo + tagline — full width, centered, compact */
  .elementor-location-footer [data-id="ftr002"] {
    flex-basis: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    padding: 28px 20px 12px !important;
    text-align: center;
    align-items: center !important;
  }
  .elementor-location-footer [data-id="ftr002"] img {
    max-width: 180px !important;
    margin: 0 auto !important;
  }
  .elementor-location-footer [data-id="ftr002"] .elementor-widget-text-editor {
    text-align: center;
  }

  /* Quick Links + Services — side by side, 50% each */
  .elementor-location-footer [data-id="ftr005"],
  .elementor-location-footer [data-id="ftr008"] {
    flex-basis: 50% !important;
    width: 50% !important;
    min-width: 0 !important;
    max-width: 50% !important;
    padding: 16px 16px !important;
    box-sizing: border-box;
  }
  .elementor-location-footer [data-id="ftr005"] .elementor-heading-title,
  .elementor-location-footer [data-id="ftr008"] .elementor-heading-title {
    font-size: 13px !important;
    margin-bottom: 8px !important;
  }
  .elementor-location-footer [data-id="ftr005"] .elementor-nav-menu li,
  .elementor-location-footer [data-id="ftr005"] .elementor-widget-text-editor p,
  .elementor-location-footer [data-id="ftr005"] a,
  .elementor-location-footer [data-id="ftr008"] .elementor-nav-menu li,
  .elementor-location-footer [data-id="ftr008"] .elementor-widget-text-editor p,
  .elementor-location-footer [data-id="ftr008"] a {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  /* Contact — full width, centered, compact */
  .elementor-location-footer [data-id="ftr011"] {
    flex-basis: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    padding: 16px 20px 20px !important;
    text-align: center;
    align-items: center !important;
  }
  .elementor-location-footer [data-id="ftr011"] .elementor-heading-title {
    font-size: 13px !important;
    margin-bottom: 8px !important;
  }
  .elementor-location-footer [data-id="ftr011"] .elementor-widget-text-editor {
    text-align: center;
  }

  /* Reduce paragraph spacing in all footer columns */
  .elementor-location-footer [data-id="ftr005"] p,
  .elementor-location-footer [data-id="ftr008"] p {
    margin-bottom: 8px !important;
  }
  .elementor-location-footer [data-id="ftr011"] p {
    margin-bottom: 10px !important;
  }
  .elementor-location-footer [data-id="ftr002"] p {
    margin-bottom: 4px !important;
  }

  /* Copyright bar — tighter */
  .elementor-location-footer [data-id="ftr014"] {
    padding: 12px 16px !important;
  }
  .elementor-location-footer [data-id="ftr014"] .e-con-inner {
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .elementor-location-footer [data-id="ftr014"] .elementor-widget-text-editor {
    text-align: center !important;
    font-size: 12px !important;
  }
}

@media (max-width: 480px) {
  /* Extra small screens — tighter heading sizes */
  .e-con.e-parent[data-id="b1hero0"] .elementor-widget-heading h1 {
    font-size: 2.5rem !important;
  }

  /* Testimonial cards — full width */
  .e-con.e-parent[data-id="e1tst0a"] .e-con.e-child {
    min-width: 100% !important;
  }
}

/* ==========================================================================
   WhatsApp Floating Button
   ========================================================================== */

/* Sticky mobile CTA bar */
.sk-sticky-mobile-cta {
  display: none;
}

@media (max-width: 767px) {
  .sk-sticky-mobile-cta {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    background: var(--sk-fuchsia);
    padding: 0;
    gap: 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
  }
  .sk-sticky-mobile-cta a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 0;
    color: #fff !important;
    font-family: var(--sk-font-body);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: background 0.2s ease;
  }
  .sk-sticky-mobile-cta a:first-child {
    border-right: 1px solid rgba(255, 255, 255, 0.2);
  }
  .sk-sticky-mobile-cta a:active {
    background: var(--sk-cta-hover, #2D1B2E);
  }
  /* Add bottom padding to body so content isn't hidden behind sticky bar */
  body {
    padding-bottom: 52px !important;
  }
  /* Move WhatsApp above the sticky bar */
  .sk-whatsapp-btn {
    bottom: 68px !important;
    width: 48px !important;
    height: 48px !important;
  }
}

.sk-whatsapp-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  width: 56px;
  height: 56px;
  background-color: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
}

.sk-whatsapp-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  color: #fff;
}

/* ==========================================================================
   Schedule a Visit — Sitewide Form Section
   ========================================================================== */

.sk-schedule-visit {
  background-color: var(--sk-sand);
  padding: 80px 0;
}

.sk-schedule-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 30px;
  display: flex;
  gap: 60px;
  align-items: flex-start;
}

.sk-schedule-text {
  flex: 0 0 38%;
}

.sk-schedule-text h2 {
  font-family: var(--sk-font-heading);
  color: var(--sk-dark);
  margin-bottom: 12px;
}

.sk-schedule-text > p {
  color: var(--sk-gray);
  margin-bottom: 30px;
  line-height: 1.7;
}

.sk-schedule-hours {
  background: var(--sk-white);
  border-radius: 12px;
  padding: 24px 28px;
  margin-top: 20px;
}

.sk-schedule-hours h4 {
  font-family: var(--sk-font-heading);
  color: var(--sk-teal-dark);
  margin-bottom: 12px;
  font-size: 1.1rem;
}

.sk-schedule-hours ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sk-schedule-hours li {
  padding: 6px 0;
  color: var(--sk-text);
  font-size: 15px;
  border-bottom: 1px solid var(--sk-gray-light);
}

.sk-schedule-hours li:last-child {
  border-bottom: none;
}

.sk-schedule-form {
  flex: 1;
  background: var(--sk-white);
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
}

.sk-form-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.sk-form-field {
  flex: 1;
}

.sk-form-field.sk-form-full {
  flex: 0 0 100%;
}

.sk-form-field label {
  display: block;
  font-family: var(--sk-font-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--sk-dark);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.sk-form-field input,
.sk-form-field select,
.sk-form-field textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-family: var(--sk-font-body);
  font-size: 15px;
  color: var(--sk-text);
  background: var(--sk-white);
  transition: border-color 0.3s ease;
  box-sizing: border-box;
}

.sk-form-field input:focus,
.sk-form-field select:focus,
.sk-form-field textarea:focus {
  outline: none;
  border-color: var(--sk-teal-dark);
}

.sk-form-field input::placeholder,
.sk-form-field textarea::placeholder {
  color: #aaa;
}

.sk-schedule-form .sk-pill {
  width: 100%;
  text-align: center;
  font-size: 16px;
  padding: 16px 32px;
  margin-top: 8px;
}

.sk-form-status {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
}

.sk-form-success {
  background: #e8f5e9;
  color: #2e7d32;
}

.sk-form-error {
  background: #F9F6F3;
  color: #c62828;
}

/* Schedule a Visit — mobile */
@media (max-width: 767px) {
  .sk-schedule-inner {
    flex-direction: column;
    gap: 30px;
  }

  .sk-schedule-text {
    flex: 0 0 100%;
  }

  .sk-schedule-form {
    padding: 24px;
  }

  .sk-form-row {
    flex-direction: column;
    gap: 12px;
  }

  .sk-schedule-visit {
    padding: 50px 0;
  }
}

/* ==========================================================================
   Elementor Footer Form Section (ftr_form) — match old PHP form styling
   ========================================================================== */

.e-con[data-id="ftr_form"] {
  background-color: var(--sk-sand) !important;
  padding: 80px 30px !important;
}

.e-con[data-id="ftr_form_left"] {
  justify-content: center !important;
}

/* Reset ALL footer white-text overrides inside the form section */
.elementor-location-footer [data-id="ftr_form"] .elementor-heading-title,
.elementor-location-footer .e-con.e-parent[data-id="ftr_form"] .elementor-widget-heading .elementor-heading-title {
  color: var(--sk-dark) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Description text */
.elementor-location-footer [data-id="ftr_form"] .elementor-widget-text-editor,
.elementor-location-footer [data-id="ftr_form"] .elementor-widget-text-editor p {
  color: #6E5E73 !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}

/* Business Hours card inside form section */
.elementor-location-footer [data-id="ftr_form"] .sk-schedule-hours h4 {
  color: var(--sk-teal-dark) !important;
  font-family: var(--sk-font-heading) !important;
  font-size: 1.1rem !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.elementor-location-footer [data-id="ftr_form"] .sk-schedule-hours li,
.elementor-location-footer [data-id="ftr_form"] .sk-schedule-hours li strong {
  color: var(--sk-text) !important;
}

/* ── Form section specific overrides (MUST come after reset) ── */

/* SCHEDULE A VISIT label — teal (high specificity to beat reset) */
.elementor-location-footer .e-con.e-parent[data-id="ftr_form"] .e-con[data-id="ftr_form_left"] .elementor-element[data-id="ftr_form_label"] h6.elementor-heading-title {
  color: #2D1B2E !important;
  font-size: 13px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
}

/* Ready to Get Started? heading — large serif */
.elementor-location-footer .e-con.e-parent[data-id="ftr_form"] .e-con[data-id="ftr_form_left"] .elementor-element[data-id="ftr_form_heading"] h2.elementor-heading-title {
  font-family: var(--sk-font-heading) !important;
  color: #2D1B2E !important;
  font-size: clamp(2rem, 4vw, 2.8rem) !important;
  margin-bottom: 16px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
}

/* Form card — white with shadow */
.e-con[data-id="ftr_form_right"] {
  background: var(--sk-white) !important;
  border-radius: 12px !important;
  padding: 40px !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06) !important;
}

/* Form field inputs */
.e-con[data-id="ftr_form_right"] .elementor-field-group .elementor-field {
  padding: 12px 16px !important;
  border: 1px solid #ddd !important;
  border-radius: 8px !important;
  font-family: var(--sk-font-body) !important;
  font-size: 15px !important;
  color: var(--sk-text) !important;
  background: var(--sk-white) !important;
  transition: border-color 0.3s ease !important;
}

.e-con[data-id="ftr_form_right"] .elementor-field:focus {
  border-color: var(--sk-teal-dark) !important;
  outline: none !important;
}

/* Fix select dropdown — remove fieldset/legend border wrapper */
.e-con[data-id="ftr_form_right"] .elementor-field-group .elementor-select-wrapper {
  border: none !important;
  padding: 0 !important;
}

.e-con[data-id="ftr_form_right"] .elementor-field-group select.elementor-field {
  border: 1px solid #ddd !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  appearance: auto !important;
  -webkit-appearance: auto !important;
}

.e-con[data-id="ftr_form_right"] .elementor-field-group fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Form labels */
/* All Elementor form labels — match footer form style */
.elementor-form .elementor-field-label {
  font-family: var(--sk-font-body) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--sk-dark) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  margin-bottom: 6px !important;
}

/* All Elementor form inputs — consistent styling */
.elementor-form .elementor-field-textual {
  font-family: var(--sk-font-body) !important;
  font-size: 14px !important;
  border: 1px solid #ddd !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  background: #fff !important;
  transition: border-color 0.2s ease !important;
}
.elementor-form .elementor-field-textual:focus {
  border-color: var(--sk-teal-dark) !important;
  outline: none !important;
}

/* All Elementor form submit buttons — teal pill */
.elementor-form .elementor-button[type="submit"] {
  width: 100% !important;
  background-color: var(--sk-fuchsia) !important;
  color: #fff !important;
  border-radius: 30px !important;
  padding: 16px 32px !important;
  font-family: var(--sk-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border: none !important;
  transition: background-color 0.2s ease !important;
}
.elementor-form .elementor-button[type="submit"]:hover {
  background-color: var(--sk-cta-hover, #2D1B2E) !important;
}

.e-con[data-id="ftr_form_right"] .elementor-field-label {
  font-family: var(--sk-font-body) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--sk-dark) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  margin-bottom: 6px !important;
}

/* Service checkboxes — pill tag style */
.elementor-field-type-checkbox .elementor-field-subgroup {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.elementor-field-type-checkbox .elementor-field-option {
  flex: 0 0 auto !important;
  max-width: 100% !important;
}
.elementor-field-type-checkbox .elementor-field-option label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 4px 11px !important;
  background: #F9F6F3 !important;
  border: 1.5px solid #F8E7EF !important;
  border-radius: 20px !important;
  font-family: var(--sk-font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #2D1B2E !important;
  cursor: pointer !important;
  transition: background 0.18s, border-color 0.18s, color 0.18s !important;
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.3 !important;
  user-select: none !important;
}
.elementor-field-type-checkbox .elementor-field-option label:hover {
  background: #F2EDE5 !important;
  border-color: #2D1B2E !important;
  color: #2D1B2E !important;
}
/* Hide native checkbox — pill is the control */
.elementor-field-type-checkbox .elementor-field-option input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}
/* Checked state (toggled by JS) */
.elementor-field-type-checkbox .elementor-field-option label.sk-pill-checked {
  background: #2D1B2E !important;
  border-color: #2D1B2E !important;
  color: #fff !important;
}

/* Submit button — full width teal pill */
.e-con[data-id="ftr_form_right"] .elementor-button[type="submit"],
.e-con[data-id="ftr_form_right"] .e-form__buttons__wrapper .elementor-button {
  width: 100% !important;
  background-color: var(--sk-fuchsia) !important;
  color: #fff !important;
  border-radius: 30px !important;
  padding: 16px 32px !important;
  font-family: var(--sk-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border: none !important;
  transition: background-color 0.2s ease !important;
}

.e-con[data-id="ftr_form_right"] .elementor-button[type="submit"]:hover,
.e-con[data-id="ftr_form_right"] .e-form__buttons__wrapper .elementor-button:hover {
  background-color: var(--sk-cta-hover, #2D1B2E) !important;
}

/* Mobile */
@media (max-width: 767px) {
  .e-con[data-id="ftr_form"] {
    padding: 50px 20px !important;
    flex-direction: column !important;
  }
  .e-con[data-id="ftr_form_right"] {
    padding: 24px !important;
  }
}

/* ==========================================================================
   Homepage Hero Slider
   ========================================================================== */

.sk-hero-slider {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  max-height: 900px;
  overflow: hidden;
}

.sk-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  background-size: cover;
  background-position: center;
}

.sk-hero-slide.active {
  opacity: 1;
}

.sk-hero-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(45, 27, 46, 0.65) 0%,
    rgba(45, 27, 46, 0.5) 100%
  );
}

.sk-hero-overlay {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-align: center;
  padding: 0 30px;
  max-width: 900px;
  margin: 0 auto;
}

.sk-hero-overlay h1 {
  font-family: var(--sk-font-heading);
  color: var(--sk-white);
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 20px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.sk-hero-overlay p {
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--sk-font-body);
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 300;
  margin-bottom: 32px;
  max-width: 600px;
}

.sk-hero-dots {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 10px;
}

.sk-hero-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background 0.3s ease;
  border: none;
}

.sk-hero-dot.active {
  background: var(--sk-white);
}

/* Hide the default Elementor hero on homepage when slider is active */
.sk-home .e-con.e-parent[data-id="b1hero0"] {
  display: none !important;
}

/* ==========================================================================
   Single Blog Post
   ========================================================================== */

/* Hero banner with featured image */
.sk-post-hero {
  position: relative;
  min-height: 380px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
}
.sk-post-hero__overlay {
  width: 100%;
  padding: 60px 40px 50px;
  background: linear-gradient(transparent 0%, rgba(45, 27, 46, 0.85) 60%);
  text-align: center;
}
.sk-post-hero__cat {
  display: inline-block;
  background: #FFFFFF;
  color: var(--sk-teal-dark, #2D1B2E);
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 5px 16px;
  border-radius: 4px;
  margin-bottom: 16px;
}
.sk-post-hero__title {
  color: #FFFFFF;
  font-family: 'Playfair Display', serif;
  font-size: 40px;
  font-weight: 700;
  font-style: italic;
  line-height: 1.25;
  margin: 0 auto 14px;
  max-width: 800px;
}
.sk-post-hero__meta {
  color: rgba(255, 255, 255, 0.8);
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 300;
}
.sk-post-hero__sep {
  margin: 0 8px;
}

/* Post body — warm sand background, content in centered white box */
.sk-single-post {
  background: #F9F6F3;
  padding: 50px 24px 60px;
}
.sk-post-article {
  max-width: 820px;
  margin: 0 auto;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  padding: 50px 60px 50px;
}
.sk-post-content h2 {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--sk-dark, #2D1B2E);
  margin: 40px 0 16px;
}
.sk-post-content h3 {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--sk-dark, #2D1B2E);
  margin: 32px 0 12px;
}
.sk-post-content p {
  font-family: 'Lato', sans-serif;
  font-size: 17px;
  line-height: 1.8;
  color: var(--sk-gray, #6E5E73);
  margin-bottom: 20px;
}
.sk-post-content ul,
.sk-post-content ol {
  font-family: 'Lato', sans-serif;
  font-size: 17px;
  line-height: 1.8;
  color: var(--sk-gray, #6E5E73);
  margin-bottom: 20px;
  padding-left: 24px;
}
.sk-post-content li {
  margin-bottom: 8px;
}
.sk-post-content strong {
  color: var(--sk-dark, #2D1B2E);
  font-weight: 600;
}
.sk-post-content a {
  color: var(--sk-teal-dark, #2D1B2E);
  text-decoration: underline;
  transition: color 0.2s ease;
}
.sk-post-content a:hover {
  color: var(--sk-teal, #61B09A);
}
.sk-post-content blockquote {
  border-left: 4px solid var(--sk-teal, #61B09A);
  padding: 16px 24px;
  margin: 30px 0;
  background: #F9F6F3;
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--sk-dark, #2D1B2E);
}

/* CTA banner at bottom of post */
.sk-post-cta {
  background: var(--sk-teal-dark, #2D1B2E);
  color: #FFFFFF;
  text-align: center;
  padding: 50px 40px;
  border-radius: 12px;
  margin: 50px 0 30px;
}
.sk-post-cta h3 {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 600;
  color: #FFFFFF !important;
  margin: 0 0 12px;
}
.sk-post-cta p {
  font-family: 'Lato', sans-serif;
  font-size: 17px;
  font-weight: 400;
  color: #FFFFFF !important;
  opacity: 1 !important;
  margin: 0 0 24px;
}
.sk-post-cta .sk-btn-primary {
  display: inline-block;
  background: transparent;
  color: #FFFFFF;
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 1px;
  padding: 14px 40px;
  border: 2px solid #FFFFFF;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
}
.sk-post-cta .sk-btn-primary:hover {
  background: #FFFFFF;
  color: var(--sk-teal-dark, #2D1B2E);
}

/* Back to articles link */
.sk-post-back {
  text-align: center;
  padding: 20px 0;
}
.sk-post-back a {
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--sk-teal-dark, #2D1B2E);
  text-decoration: none;
  transition: color 0.2s ease;
}
.sk-post-back a:hover {
  color: var(--sk-teal, #61B09A);
}

/* Single post responsive */
@media (max-width: 767px) {
  .sk-post-hero {
    min-height: 280px;
  }
  .sk-post-hero__overlay {
    padding: 40px 20px 30px;
  }
  .sk-post-hero__title {
    font-size: 28px;
  }
  .sk-single-post {
    padding: 24px 12px 40px;
  }
  .sk-post-article {
    padding: 28px 20px 36px;
    border-radius: 12px;
  }
  .sk-post-content h2 {
    font-size: 24px;
  }
  .sk-post-cta {
    padding: 36px 24px;
    border-radius: 8px;
  }
  .sk-post-cta h3 {
    font-size: 24px;
  }
}

/* ── SERVICE CHECKBOX PILLS ─────────────────────────── */
/* Pill-tag style for Service(s) of Interest checkboxes */
.elementor-field-type-checkbox .elementor-field-type-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 0 !important;
  list-style: none !important;
  margin: 0 !important;
}
.elementor-field-type-checkbox .elementor-field-type-list li {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
.elementor-field-type-checkbox .elementor-field-type-list li label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 5px 12px !important;
  background: #F9F6F3 !important;
  border: 1.5px solid #F8E7EF !important;
  border-radius: 20px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #2D1B2E !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  user-select: none !important;
  line-height: 1.4 !important;
}
.elementor-field-type-checkbox .elementor-field-type-list li label:hover {
  background: #F2EDE5 !important;
  border-color: #2D1B2E !important;
  color: #2D1B2E !important;
}
/* Hide the actual checkbox input - the pill IS the control */
.elementor-field-type-checkbox .elementor-field-type-list li input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}
/* Checked state via JS class + CSS sibling */
.elementor-field-type-checkbox .elementor-field-type-list li input[type="checkbox"]:checked + span,
.elementor-field-type-checkbox .elementor-field-type-list li.sk-checked label {
  background: #2D1B2E !important;
  border-color: #2D1B2E !important;
  color: #fff !important;
}

/* ==========================================================================
   Clickable Card Containers (Elementor container with link)
   ========================================================================== */
.sk-card-link,
.e-con[data-link] {
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sk-card-link:hover,
.e-con[data-link]:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(45, 27, 46, 0.12);
}
/* JS-driven checked state on the label itself */
.elementor-field-type-checkbox .elementor-field-type-list li label.sk-pill-checked {
  background: #2D1B2E !important;
  border-color: #2D1B2E !important;
  color: #fff !important;
}

/* ==========================================================================
   Dynamic Service Cards [skinovatio_service_cards]
   Matches Elementor card design from category pages (fac_card_0 template)
   ========================================================================== */
.sk-dynamic-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  padding: 0 20px;
}
.sk-dcard {
  display: flex;
  flex-direction: column;
  width: calc(33.333% - 16px);
  background: var(--sk-cream, #F2EDE5);
  border: 1px solid var(--sk-gray-light, #F2EDE5);
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sk-dcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(45, 27, 46, 0.12);
}
.sk-dcard__img {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: var(--sk-gray-light, #F2EDE5);
}
.sk-dcard__img img,
.sk-dcard__img video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sk-dcard__img video {
  pointer-events: none; /* clicks fall through to the parent link */
}
.sk-dcard__placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--sk-cream, #F2EDE5) 0%, var(--sk-off-white, #F9F6F3) 100%);
}
.sk-dcard__title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--sk-dark, #2D1B2E);
  margin: 15px 24px 0;
  line-height: 1.3;
}
.sk-dcard__desc {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: var(--sk-gray, #6E5E73);
  margin: 8px 24px 0;
}
.sk-dcard__btn {
  display: inline-block;
  font-family: 'Lato', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--sk-teal-dark, #2D1B2E);
  border: 1px solid var(--sk-teal-dark, #2D1B2E);
  border-radius: 50px;
  padding: 8px 20px;
  margin: auto 24px 30px;
  margin-top: 16px;
  text-align: center;
  transition: background 0.2s ease, color 0.2s ease;
  width: fit-content;
}
.sk-dcard:hover .sk-dcard__btn {
  background: var(--sk-teal-dark, #2D1B2E);
  color: #fff;
}

/* Responsive: Tablet */
@media (max-width: 1024px) {
  .sk-dcard {
    width: calc(50% - 12px);
  }
}
/* Responsive: Mobile */
@media (max-width: 600px) {
  .sk-dcard {
    width: 100%;
  }
  .sk-dynamic-cards {
    padding: 0 10px;
  }
}

/* === Membership teal header — compact === */
.page-id-245 .e-con[style*="61B09A"],
.page-id-245 [data-id="mc1c0_bar"],
.page-id-245 [data-id="mc1c1_bar"],
.page-id-245 [data-id="mc1c2_bar"],
.page-id-245 [data-id="mc1c3_bar"] { padding:14px 20px 6px !important; }

/* H6 inside inner-hero must stay white */
.e-con.e-parent.sk-inner-hero .elementor-widget-heading h6.elementor-heading-title {
  color: #fff !important;
}

/* ==============================================================
   SMS CONSENT ACCEPTANCE FIELD
   - Checkbox must sit NEXT to the TCPA disclosure text, not above.
   - Sidebar form: default size with tight line-height.
   - Footer form: smaller text (inline span styles it further).
   ============================================================== */

/* Force checkbox + label side-by-side on every acceptance field */
.elementor-field-type-acceptance .elementor-field-option {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

/* The checkbox input — don't let it stretch with flex */
.elementor-field-type-acceptance .elementor-field-option input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: 3px; /* nudge down to align with first line of text */
}

/* The label should take remaining space and read tight */
.elementor-field-type-acceptance .elementor-field-option label {
  flex: 1 1 auto;
  line-height: 1.35 !important;
  margin: 0 !important;
  cursor: pointer;
}

/* Footer form acceptance labels — match sidebar size (13px).
   Footer template has larger default label typography; this override
   normalizes acceptance field labels to the same size as sidebar forms. */
.elementor-location-footer .elementor-field-type-acceptance .elementor-field-option label {
  font-size: 13px !important;
  line-height: 1.35 !important;
  color: #6E5E73 !important; /* Soft Slate from brand palette */
}
.elementor-location-footer .elementor-field-type-acceptance .elementor-field-option label a {
  color: #2D1B2E !important; /* Deep Teal for link */
  text-decoration: underline;
}

/* ==========================================================================
   Scroll-Reveal Animations  (dynamic-vibes.js companion)
   ========================================================================== */

/* Pre-animation state — invisible until observer fires */
.sk-reveal           { opacity: 0; will-change: opacity, transform; }
.sk-reveal.sk-rise   { transform: translateY( 26px ); }
.sk-reveal.sk-zoom   { transform: scale( 0.97 ); }
/* .sk-fade starts at opacity:0 only — no transform */

/* Triggered state — JS adds .sk-in via IntersectionObserver */
.sk-reveal.sk-in {
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier( 0.22, 1, 0.36, 1 );
  animation-duration: 0.9s;
  animation-delay: var( --sk-delay, 0ms );
}
.sk-reveal.sk-rise.sk-in { animation-name: sk-anim-rise; }
.sk-reveal.sk-zoom.sk-in { animation-name: sk-anim-zoom; }
.sk-reveal.sk-fade.sk-in { animation-name: sk-anim-fade; }

@keyframes sk-anim-rise {
  from { opacity: 0; transform: translateY( 26px ); }
  to   { opacity: 1; transform: translateY( 0 );    }
}
@keyframes sk-anim-zoom {
  from { opacity: 0; transform: scale( 0.97 ); }
  to   { opacity: 1; transform: scale( 1 );    }
}
@keyframes sk-anim-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Hover image-zoom on standalone image widgets (outside header/footer) */
.elementor-widget-image .elementor-widget-container { overflow: hidden; }
.elementor-widget-image img {
  transition: transform 0.55s cubic-bezier( 0.22, 1, 0.36, 1 );
}
.elementor-widget-image:hover img { transform: scale( 1.045 ); }

/* Don't double-zoom images already inside .sk-service-image-card */
.sk-service-image-card .elementor-widget-image img { transform: none; }

/* Prevent pointer events on inline treatment videos (they auto-play, not interactive) */
.elementor-widget-html video { pointer-events: none; }

/* Hover lift on testimonial cards */
.sk-testimonial-card {
  transition: transform 0.3s cubic-bezier( 0.22, 1, 0.36, 1 ),
              box-shadow 0.3s ease;
}
.sk-testimonial-card:hover {
  transform: translateY( -4px );
  box-shadow: 0 12px 32px rgba( 0, 0, 0, 0.08 );
}

/* Hover lift on icon-box widgets */
.elementor-widget-icon-box {
  transition: transform 0.3s cubic-bezier( 0.22, 1, 0.36, 1 );
}
.elementor-widget-icon-box:hover { transform: translateY( -3px ); }

/* ==========================================================================
   BEFORE & AFTER — Coming Soon overlay
   When all 4 image slots in a Before & After grid still hold the placeholder
   SVG (which means real photos haven't been uploaded yet), hide the broken
   grid and show one centered "Coming Soon" message instead.

   The :has() selector requires Chrome 105+ / Safari 15.4+ — fully covered
   by 2026 browser baselines. As soon as ANY real image replaces a
   placeholder, this rule no longer matches and the gallery reappears.
   ========================================================================== */
.elementor-element[data-id^="ba_row_"]:has(img[src*="placeholder-before.svg"], img[src*="placeholder-after.svg"]) {
  position: relative;
  min-height: 240px;
}
.elementor-element[data-id^="ba_row_"]:has(img[src*="placeholder-before.svg"], img[src*="placeholder-after.svg"]) > * {
  visibility: hidden !important;
}
.elementor-element[data-id^="ba_row_"]:has(img[src*="placeholder-before.svg"], img[src*="placeholder-after.svg"])::after {
  content: "Before & After photos coming soon";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(135deg, #F2EDE5 0%, #F8E7EF 100%);
  color: #2D1B2E;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 22px;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 12px;
  padding: 40px 30px;
  visibility: visible;
}
@media (max-width: 767px) {
  .elementor-element[data-id^="ba_row_"]:has(img[src*="placeholder-before.svg"], img[src*="placeholder-after.svg"])::after {
    font-size: 18px;
    padding: 28px 20px;
  }
}


/* ==========================================================================
   PABAU REVIEW WIDGET — full-width fix
   The testimonials section uses flex column with align-items:center, which
   makes child widgets content-sized (narrow). The Pabau widget reads its
   container's offsetWidth at init to decide layout: >750px = desktop (2-col),
   <=750px = mobile (1-col). Without align-self:stretch, the widget initializes
   at content-width (narrow) and locks into mobile layout. Force stretch.
   ========================================================================== */
.e-con.e-parent[data-id="e1tst0a"] .elementor-widget-html,
.e-con.e-parent[data-id="e1tst0a"] .elementor-element-5bbf3e1,
.e-con.e-parent[data-id="e1tst0a"] .pabauReviews {
  width: 100% !important;
  max-width: 100% !important;
  align-self: stretch !important;
}

/* ==========================================================================
   CTA SECTION HEADINGS — force white on teal bg
   The global rule ".e-con.e-parent .elementor-widget-heading h2.elementor-heading-title"
   sets dark color !important. That's correct for body sections (white bg) but breaks
   on CTA sections that have teal video bg + white text. Override with higher
   specificity (.sk-page-cta class + same target) for all sk-page-cta CTAs.
   ========================================================================== */
.sk-page-cta .elementor-widget-heading h1.elementor-heading-title,
.sk-page-cta .elementor-widget-heading h2.elementor-heading-title,
.sk-page-cta .elementor-widget-heading h3.elementor-heading-title,
.sk-page-cta .elementor-widget-heading .elementor-heading-title {
  color: #FFFFFF !important;
}
/* Also for the homepage CTA (f1cta0a doesn't have sk-page-cta class) */
.e-con.e-parent[data-id="f1cta0a"] .elementor-widget-heading h2.elementor-heading-title,
.e-con.e-parent[data-id="abt050"] .elementor-widget-heading h2.elementor-heading-title,
.e-con.e-parent[data-id="svc900"] .elementor-widget-heading h2.elementor-heading-title,
.e-con.e-parent[data-id="ct_cta"] .elementor-widget-heading h2.elementor-heading-title,
.e-con.e-parent[data-id="fac_cta"] .elementor-widget-heading h2.elementor-heading-title,
.e-con.e-parent[data-id="ski_cta"] .elementor-widget-heading h2.elementor-heading-title,
.e-con.e-parent[data-id="bod_cta"] .elementor-widget-heading h2.elementor-heading-title,
.e-con.e-parent[data-id="acd_cta"] .elementor-widget-heading h2.elementor-heading-title,
.e-con.e-parent[data-id^="sp_cta_"] .elementor-widget-heading h2.elementor-heading-title {
  color: #FFFFFF !important;
}

/* ==========================================================================
   June 2026 rebrand — UX-audit remediations (2026-06-11)
   ========================================================================== */

/* 1. Hero readability: purple scrim over background slideshows + text shadow.
   White hero text washed out on light slideshow frames. Scrim sits over the
   slides, under the content layer; tune the 0.30/0.52 stops to taste. */
.elementor-background-slideshow::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(45, 27, 46, 0.30) 0%, rgba(45, 27, 46, 0.52) 100%);
  pointer-events: none;
}
.elementor-section:has(.elementor-background-slideshow) h1,
.e-con:has(.elementor-background-slideshow) h1,
.elementor-section:has(.elementor-background-slideshow) h2,
.e-con:has(.elementor-background-slideshow) h2,
.elementor-section:has(.elementor-background-slideshow) p,
.e-con:has(.elementor-background-slideshow) p,
.elementor-section:has(.elementor-background-slideshow) em,
.e-con:has(.elementor-background-slideshow) em {
  text-shadow: 0 1px 3px rgba(45, 27, 46, 0.45), 0 2px 14px rgba(45, 27, 46, 0.35);
}

/* 2. Pabau embed readability overrides (third-party widget text failed WCAG AA;
   selectors scoped to Pabau containers — re-verify after Pabau widget updates) */
.pabauReviews .overallAvarage-pabau { color: #6E5E73 !important; }            /* was #bebebe, 1.84:1 */
.pabauReviews .viewAll-pabau a { color: #C63272 !important; }                 /* was #54b2d3, 2.40:1 */
.pabauReviews .commentText { color: #4A3E50 !important; }                     /* was #7e7e7e, 4.03:1 */
span.description-pabau { color: #6E5E73 !important; }                         /* was #9292a3, 2.94:1 */
.pabau-package-discount-percentage { background: #C63272 !important; color: #FFFFFF !important; } /* was 1.83:1 */
.pabau-package-price-amount-before { color: #6E5E73 !important; }             /* was #b8b8c0, 1.97:1 */

/* 1b. The home/videos hero is a CUSTOM video slideshow (.sk-hero-slideshow, 4 crossfading
   <video> layers), not Elementor's native slideshow — scrim + shadow scoped to it too. */
.sk-hero-slideshow::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(45, 27, 46, 0.30) 0%, rgba(45, 27, 46, 0.52) 100%);
  pointer-events: none;
}
.e-con:has(.sk-hero-slideshow) h1,
.e-con:has(.sk-hero-slideshow) h2,
.e-con:has(.sk-hero-slideshow) p,
.e-con:has(.sk-hero-slideshow) em,
.elementor-section:has(.sk-hero-slideshow) h1,
.elementor-section:has(.sk-hero-slideshow) h2,
.elementor-section:has(.sk-hero-slideshow) p,
.elementor-section:has(.sk-hero-slideshow) em {
  text-shadow: 0 1px 3px rgba(45, 27, 46, 0.45), 0 2px 14px rgba(45, 27, 46, 0.35);
}

/* ==========================================================================
   ARABIC TYPOGRAPHY — Aref Ruqaa (loaded via functions.php Google Fonts enqueue)
   GTranslate sets <html lang="ar"> AND <html class="translated-rtl"> when the
   visitor switches to Arabic. Aref Ruqaa is a Ruqʿah-style calligraphic face —
   it needs extra line-height so the tall glyphs don't collide. Latin shaping is
   unaffected (scoped to Arabic only). Layout stays LTR (accepted free-tier
   limit); per-block RTL flow is available as a follow-up.
   ========================================================================== */
html[lang="ar"] body,
html.translated-rtl body,
html[lang="ar"] body :is(h1, h2, h3, h4, h5, h6, p, li, a, span, strong, em, blockquote, label,
  button, .elementor-heading-title, .elementor-button, .elementor-button-text,
  .elementor-widget-text-editor, .elementor-icon-list-text, .elementor-item,
  .sk-btn, .sk-pill, .sk-pill-outline, .sk-sticky-mobile-cta a, input, textarea, select),
html.translated-rtl body :is(h1, h2, h3, h4, h5, h6, p, li, a, span, strong, em, blockquote, label,
  button, .elementor-heading-title, .elementor-button, .elementor-button-text,
  .elementor-widget-text-editor, .elementor-icon-list-text, .elementor-item,
  .sk-btn, .sk-pill, .sk-pill-outline, .sk-sticky-mobile-cta a, input, textarea, select) {
  font-family: "Aref Ruqaa", "Playfair Display", "Times New Roman", serif !important;
}
/* breathing room for the calligraphic glyphs */
html[lang="ar"] body :is(p, li, .elementor-widget-text-editor, .elementor-icon-list-text),
html.translated-rtl body :is(p, li, .elementor-widget-text-editor, .elementor-icon-list-text) {
  line-height: 2.05 !important;
}
html[lang="ar"] body :is(h1, h2, h3, h4, h5, h6, .elementor-heading-title),
html.translated-rtl body :is(h1, h2, h3, h4, h5, h6, .elementor-heading-title) {
  line-height: 1.65 !important;
}
/* ============================================================================
   SKINOVATIO FULL DARK THEME — June 2026
   PROOF build: scoped to `body.home`. To roll out site-wide, replace every
   `body.home` with `body` (or strip the scope). Fully reversible: delete this
   block / file to revert to the light rebrand.

   Model: ONE dark canvas on <body>; every Elementor container is made
   transparent so the canvas shows through (kills all white/beige fills at once,
   scales to every page). Photos (background-images) still show — transparent
   background-COLOR doesn't hide a background-IMAGE. Cards are then re-elevated.
   Wins via !important (Elementor's own bg rules are not !important).
   ============================================================================ */
body.home {
  --sk-d-bg:        #2D1B2E;                    /* page canvas */
  --sk-d-surface:   #3A2541;                    /* elevated cards (step up in L) */
  --sk-d-surface-2: #241320;                    /* recessed inputs (step down) */
  --sk-d-border:    rgba(242, 237, 229, 0.14);  /* hairline dividers */
  --sk-d-text:      #F2EDE5;                     /* beige body text ~13:1 */
  --sk-d-muted:     rgba(242, 237, 229, 0.70);  /* captions */
  background-color: var(--sk-d-bg) !important;
  color: var(--sk-d-text);
}

/* --- 1. Kill ALL container fills → reveal the dark canvas ---
   The `html body.home` prefix + `.e-con[data-id]` matches the child theme's own
   card rules (e.g. `.e-con[data-id="c5cards"] > .e-con { background: var(--sk-white)
   !important }`, specificity 0,3,0) and clears them at 0,3,2. Containers only —
   never widgets/buttons — so fuchsia CTAs are untouched. */
body.home .elementor-section,
body.home .e-con,
body.home .elementor-column,
body.home .elementor-column-wrap,
body.home .elementor-widget-wrap,
body.home .e-con-inner,
body.home .elementor-widget-container,
html body.home .e-con[data-id],
html body.home .elementor-section[data-id],
html body.home .e-con[data-id] > .e-con,
html body.home .e-con[data-id] > .e-con-inner > .e-con {
  background-color: transparent !important;
}

/* --- 2. Header: dark bar, light nav, swapped (beige-subtitle) logo --- */
body.home header.elementor-location-header,
body.home .elementor-element-hdr_outer,
body.home .elementor-element-hdr_inner,
body.home .elementor-element-hdr_inner > .e-con-inner {
  background-color: var(--sk-d-bg) !important;
}
body.home header .elementor-item,
body.home header .elementor-nav-menu a,
body.home header .elementor-sub-item {
  color: var(--sk-d-text) !important;
}
body.home header img[src*="Skinovatio-OH-logo-wide"] {
  content: url("https://skinovatio.lavack.design/wp-content/uploads/2026/03/Skinovatio-OH-logo-wide-DARK.png");
}

/* --- 3. Cards → elevated surface (must come AFTER step 1) ---
   `.sk-clickable-card` is the shared class on every clickable card site-wide, so
   this generalizes to all pages. Matching the `[data-id] > child` depth ties the
   step-1 transparent rule on specificity (0,4,2); later source order wins. */
html body.home .e-con[data-id] > .sk-clickable-card,
html body.home .e-con[data-id] > .e-con-inner > .sk-clickable-card,
html body.home .sk-clickable-card,
html body.home .sk-schedule-hours {        /* Business Hours card */
  background-color: var(--sk-d-surface) !important;
  border: 1px solid var(--sk-d-border) !important;
  border-radius: 14px !important;
}

/* GTranslate language chip → dark to match (third-party widget; it's a .class not #id) */
body.home .gt_float_switcher,
body.home .gt_float_switcher .gt-selected,
body.home .gt_float_switcher .gt-current-lang,
body.home .gt_float_switcher a,
body.home .gt_float_switcher .gt_options,
body.home .gt_float_switcher .gt_options a {
  background-color: var(--sk-d-surface) !important;
  color: var(--sk-d-text) !important;
}

/* --- 4. Text → light --- */
body.home :is(h1, h2, h3, h4, h5, h6),
body.home .elementor-heading-title { color: var(--sk-d-text) !important; }
body.home :is(p, li, td, th, blockquote, label, figcaption, dt, dd),
body.home .elementor-widget-text-editor,
body.home .elementor-widget-text-editor :is(p, li, span, div),
body.home .elementor-icon-list-text {
  color: var(--sk-d-text) !important;
}
/* in-content links → teal accent (never buttons, never nav) */
body.home .elementor-widget-text-editor a,
body.home p a:not(.elementor-button) { color: #61B09A !important; }

/* --- 5. Form fields → dark --- */
body.home :is(input, textarea, select):not([type="submit"]):not([type="button"]):not([type="hidden"]) {
  background-color: var(--sk-d-surface-2) !important;
  color: var(--sk-d-text) !important;
  border-color: var(--sk-d-border) !important;
}
body.home ::placeholder { color: rgba(242, 237, 229, 0.45) !important; opacity: 1; }

/* --- 6. Dividers / hairlines --- */
body.home .elementor-divider-separator,
body.home hr { border-color: var(--sk-d-border) !important; }

/* --- 7. Pabau review embed → transparent surfaces, light text --- */
body.home [class*="pabau"],
body.home [class*="Pabau"] { background-color: transparent !important; }
body.home .commentText,
body.home [class*="pabau"] { color: var(--sk-d-text) !important; }

/* --- 8. Keep: buttons fuchsia/white (rebrand), images, footer (already dark) --- */

/* ============================================================================
   DARK THEME — TEXT CONTRAST FIX (2026-06-11)
   The rebrand colors headings/eyebrows #2D1B2E via !important rules
   (e.g. `.e-con.e-parent .elementor-widget-heading h6.elementor-heading-title
   { color: var(--sk-teal-dark) !important }`, spec 0,4,1) — identical to the dark
   canvas → invisible. Ghost-button text/border use the (non-important) global
   "secondary" (#2D1B2E) → also invisible. Overrides below force light text.
   ============================================================================ */

/* Headings + eyebrows → beige. Mirror+exceed the rebrand !important heading rule
   (html body.home prefix → 0,5,2 beats 0,4,1!important). */
html body.home .e-con .elementor-widget-heading .elementor-heading-title,
html body.home .e-con.e-parent .elementor-widget-heading .elementor-heading-title,
html body.home .e-con.e-child .elementor-widget-heading .elementor-heading-title,
html body.home .elementor-widget-heading .elementor-heading-title,
html body.home :is(h1, h2, h3, h4, h5, h6) {
  color: var(--sk-d-text) !important;
}

/* Body copy + lists → beige (rebrand body rules are non-important) */
html body.home .elementor-widget-text-editor,
html body.home .elementor-widget-text-editor :is(p, li, span, div, strong, em),
html body.home .e-con :is(p, li),
html body.home .elementor-icon-list-text,
html body.home .elementor-icon-box-description {
  color: var(--sk-d-text) !important;
}
/* in-content links stay teal (not buttons) */
html body.home .elementor-widget-text-editor a,
html body.home p a:not(.elementor-button) { color: #61B09A !important; }

/* Ghost / outline buttons (transparent bg, were #2D1B2E text+border = invisible) →
   beige text + fuchsia border. Card buttons via shared `.sk-clickable-card`;
   See-All + Learn-More by data-id. Filled fuchsia + white pills are NOT matched. */
html body.home .sk-clickable-card .elementor-button,
html body.home .elementor-widget-button[data-id="cmallsvc"] .elementor-button,
html body.home .elementor-widget-button[data-id="d8bt7h2"] .elementor-button {
  color: var(--sk-d-text) !important;
  border-color: var(--sk-fuchsia, #C63272) !important;
}
html body.home .sk-clickable-card .elementor-button .elementor-button-text,
html body.home .elementor-widget-button[data-id="cmallsvc"] .elementor-button-text,
html body.home .elementor-widget-button[data-id="d8bt7h2"] .elementor-button-text {
  color: var(--sk-d-text) !important;
}
/* ghost hover → fuchsia fill, white text */
html body.home .sk-clickable-card .elementor-button:hover,
html body.home .elementor-widget-button[data-id="cmallsvc"] .elementor-button:hover,
html body.home .elementor-widget-button[data-id="d8bt7h2"] .elementor-button:hover {
  background-color: var(--sk-fuchsia, #C63272) !important;
  border-color: var(--sk-fuchsia, #C63272) !important;
}
html body.home .sk-clickable-card .elementor-button:hover .elementor-button-text,
html body.home .elementor-widget-button[data-id="cmallsvc"] .elementor-button:hover .elementor-button-text,
html body.home .elementor-widget-button[data-id="d8bt7h2"] .elementor-button:hover .elementor-button-text {
  color: #FFFFFF !important;
}

/* --- Footer template (elementor-22) on dark ---
   Footer root bg is #1E2A36 (slate-blue leftover, not in the rebrand hex map) →
   unify to the purple-black canvas. Its "Ready to Get Started" form headings are
   forced #2D1B2E by deep `.elementor-location-footer [data-id="ftr_form"] … !important`
   rules → invisible; beat them with footer-scoped !important at higher specificity. */
html body.home footer.elementor-location-footer,
html body.home .elementor-location-footer,
html body.home .elementor-location-footer > .elementor-section,
html body.home .elementor-location-footer .e-con.e-parent {
  background-color: var(--sk-d-bg) !important;
}
html body.home .elementor-location-footer [data-id="ftr_form"] .elementor-heading-title,
html body.home .elementor-location-footer [data-id="ftr_form"] :is(h1, h2, h3, h4, h5, h6),
html body.home .elementor-location-footer .e-con.e-parent[data-id="ftr_form"] .elementor-widget-heading .elementor-heading-title,
html body.home .elementor-location-footer [data-id="ftr_form"] .sk-schedule-hours :is(h1, h2, h3, h4, h5, h6) {
  color: var(--sk-d-text) !important;
}