/*
 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: 1.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 — 2026 Palette Refresh
     Deep Teal + Light Teal + Warm Sand + Dusty Rose + Charcoal */
  --sk-teal: var(--e-global-color-primary, #6CD5D2);        /* Light Teal — buttons, icons, hover */
  --sk-teal-dark: var(--e-global-color-secondary, #066F6C); /* Deep Teal — headers, nav, footer, accents */
  --sk-teal-light: var(--e-global-color-sk_teal_light, #6CD5D2); /* Light Teal */
  --sk-cream: var(--e-global-color-accent, #E5D9D0);        /* Warm Sand — section dividers, cards */
  --sk-dark: var(--e-global-color-sk_dark, #2D3E50);        /* Rich Charcoal — headlines */
  --sk-text: var(--e-global-color-text, #2D3E50);           /* Rich Charcoal — body text */
  --sk-white: var(--e-global-color-sk_white, #FFFFFF);
  --sk-off-white: var(--e-global-color-sk_off_white, #FAF7F4);
  --sk-gray-light: var(--e-global-color-sk_gray_light, #E5D9D0); /* Warm Sand */
  --sk-gray: var(--e-global-color-sk_gray, #5A6A7A);        /* Soft Slate — supporting text */
  --sk-footer-bg: var(--e-global-color-sk_footer_bg, #066F6C);   /* Deep Teal */
  --sk-footer-dark: var(--e-global-color-sk_footer_dark, #044E4C);
  --sk-rose: #D4B8B0;                                       /* Dusty Rose — special offers, testimonials */
  --sk-sand: #E5D9D0;                                       /* Warm Sand */
  --sk-slate: #5A6A7A;                                      /* Soft Slate — captions */

  /* Derived */
  --sk-teal-dark-hover: #055B58; /* darkened deep teal for button hover states */

  /* 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 — Light Teal fill with Deep Teal text */
.sk-btn-primary,
.elementor-button.elementor-button-primary {
  background-color: var(--sk-teal) !important;
  color: var(--sk-teal-dark) !important;
  border: 2px solid var(--sk-teal) !important;
}

.sk-btn-primary:hover,
.elementor-button.elementor-button-primary:hover {
  background-color: var(--sk-teal-dark) !important;
  color: var(--sk-white) !important;
  border-color: var(--sk-teal-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(6, 111, 108, 0.3);
}

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

.sk-btn-secondary:hover {
  background-color: var(--sk-teal) !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-teal-dark) !important;
  color: #fff !important;
  border: 2px solid var(--sk-teal-dark) !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-teal-dark) !important;
  border-color: var(--sk-teal-dark) !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-teal-dark);
  color: var(--sk-white);
  border: 2px solid var(--sk-teal-dark);
  text-decoration: none;
  transition: var(--sk-transition);
  cursor: pointer;
}

.sk-pill:hover {
  background-color: var(--sk-teal-dark-hover);
  border-color: var(--sk-teal-dark-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-teal-dark);
  border: 2px solid var(--sk-teal-dark);
  text-decoration: none;
  transition: var(--sk-transition);
  cursor: pointer;
}

.sk-pill-outline:hover {
  background-color: var(--sk-teal-dark);
  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 #e0dcd8 !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-teal-dark) !important;
  color: var(--sk-teal-dark) !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-teal-dark) !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-teal-dark) !important;
  color: var(--sk-teal-dark) !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(6, 111, 108, 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 (#009490) 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 — shared layout (Deep Teal overlay + cover sizing) */
.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: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  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(6, 111, 108, 0.88), rgba(6, 111, 108, 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(6, 111, 108, 0.88), rgba(6, 111, 108, 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(6, 111, 108, 0.88), rgba(6, 111, 108, 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(6, 111, 108, 0.88), rgba(6, 111, 108, 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(6, 111, 108, 0.88), rgba(6, 111, 108, 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(6, 111, 108, 0.88), rgba(6, 111, 108, 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(6, 111, 108, 0.88), rgba(6, 111, 108, 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(6, 111, 108, 0.88), rgba(6, 111, 108, 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(6, 111, 108, 0.88), rgba(6, 111, 108, 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(6, 111, 108, 0.88), rgba(6, 111, 108, 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(6, 111, 108, 0.88), rgba(6, 111, 108, 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(6, 111, 108, 0.88), rgba(6, 111, 108, 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(6, 111, 108, 0.88), rgba(6, 111, 108, 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(6, 111, 108, 0.88), rgba(6, 111, 108, 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(6, 111, 108, 0.88), rgba(6, 111, 108, 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(6, 111, 108, 0.88), rgba(6, 111, 108, 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(6, 111, 108, 0.88), rgba(6, 111, 108, 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(6, 111, 108, 0.88), rgba(6, 111, 108, 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(6, 111, 108, 0.88), rgba(6, 111, 108, 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(6, 111, 108, 0.88), rgba(6, 111, 108, 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(6, 111, 108, 0.88), rgba(6, 111, 108, 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(6, 111, 108, 0.88), rgba(6, 111, 108, 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(6, 111, 108, 0.88), rgba(6, 111, 108, 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(6, 111, 108, 0.88), rgba(6, 111, 108, 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(6, 111, 108, 0.88), rgba(6, 111, 108, 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(6, 111, 108, 0.88), rgba(6, 111, 108, 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(6, 111, 108, 0.88), rgba(6, 111, 108, 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(6, 111, 108, 0.88), rgba(6, 111, 108, 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(6, 111, 108, 0.88), rgba(6, 111, 108, 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(6, 111, 108, 0.88), rgba(6, 111, 108, 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(6, 111, 108, 0.88), rgba(6, 111, 108, 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;
}

/* --- 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(6,111,108,0.85) 0%, rgba(45,62,80,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(6,111,108,0.92) 0%, rgba(6,111,108,0.5) 40%, rgba(45,62,80,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(6,111,108,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 #f0ebe7;
}
.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, #2D3E50) !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, #066F6C) !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, #5A6A7A) !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, #066F6C) !important;
  text-decoration: none !important;
}
.sk-articles-grid .elementor-post__read-more:hover {
  color: var(--sk-teal, #6CD5D2) !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, #5A6A7A) !important;
  margin-bottom: 6px !important;
}

/* Badge (category) */
.sk-articles-grid .elementor-post__badge {
  background: var(--sk-teal-dark, #066F6C) !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: 60px 40px !important;
  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(6, 111, 108, 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-teal-dark);
    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-teal-dark-hover, #055a58);
  }
  /* 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: #fbe9e7;
  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: #5A6A7A !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: #066F6C !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: #2D3E50 !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-teal-dark) !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-teal-dark-hover, #055a58) !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: #F5F1EE !important;
  border: 1.5px solid #D4B8B0 !important;
  border-radius: 20px !important;
  font-family: var(--sk-font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #2D3E50 !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: #E5D9D0 !important;
  border-color: #066F6C !important;
  color: #066F6C !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: #066F6C !important;
  border-color: #066F6C !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-teal-dark) !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-teal-dark-hover, #055a58) !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(6, 111, 108, 0.65) 0%,
    rgba(45, 62, 80, 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(6, 111, 108, 0.85) 60%);
  text-align: center;
}
.sk-post-hero__cat {
  display: inline-block;
  background: #FFFFFF;
  color: var(--sk-teal-dark, #066F6C);
  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, #2D3E50);
  margin: 40px 0 16px;
}
.sk-post-content h3 {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--sk-dark, #2D3E50);
  margin: 32px 0 12px;
}
.sk-post-content p {
  font-family: 'Lato', sans-serif;
  font-size: 17px;
  line-height: 1.8;
  color: var(--sk-gray, #5A6A7A);
  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, #5A6A7A);
  margin-bottom: 20px;
  padding-left: 24px;
}
.sk-post-content li {
  margin-bottom: 8px;
}
.sk-post-content strong {
  color: var(--sk-dark, #2D3E50);
  font-weight: 600;
}
.sk-post-content a {
  color: var(--sk-teal-dark, #066F6C);
  text-decoration: underline;
  transition: color 0.2s ease;
}
.sk-post-content a:hover {
  color: var(--sk-teal, #6CD5D2);
}
.sk-post-content blockquote {
  border-left: 4px solid var(--sk-teal, #6CD5D2);
  padding: 16px 24px;
  margin: 30px 0;
  background: #F9F6F3;
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--sk-dark, #2D3E50);
}

/* CTA banner at bottom of post */
.sk-post-cta {
  background: var(--sk-teal-dark, #066F6C);
  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, #066F6C);
}

/* 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, #066F6C);
  text-decoration: none;
  transition: color 0.2s ease;
}
.sk-post-back a:hover {
  color: var(--sk-teal, #6CD5D2);
}

/* 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: #F5F1EE !important;
  border: 1.5px solid #D4B8B0 !important;
  border-radius: 20px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #2D3E50 !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: #E5D9D0 !important;
  border-color: #066F6C !important;
  color: #066F6C !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: #066F6C !important;
  border-color: #066F6C !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(6, 111, 108, 0.12);
}
/* JS-driven checked state on the label itself */
.elementor-field-type-checkbox .elementor-field-type-list li label.sk-pill-checked {
  background: #066F6C !important;
  border-color: #066F6C !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, #E5D9D0);
  border: 1px solid var(--sk-gray-light, #E5D9D0);
  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(6, 111, 108, 0.12);
}
.sk-dcard__img {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: var(--sk-gray-light, #E5D9D0);
}
.sk-dcard__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sk-dcard__placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--sk-cream, #E5D9D0) 0%, var(--sk-off-white, #FAF7F4) 100%);
}
.sk-dcard__title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--sk-dark, #2D3E50);
  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, #5A6A7A);
  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, #066F6C);
  border: 1px solid var(--sk-teal-dark, #066F6C);
  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, #066F6C);
  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*="6CD5D2"],
.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;
}