/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* =========================================================================
   TABLE OF CONTENTS
   1.  CSS Variables
   2.  Base / Global Elements
   3.  Utility Classes (lists)
   4.  Shared Icon (Arrow) Rules
   5.  Buttons
   6.  Legacy Text Block (Sitemap / Privacy / Terms / HIPAA)
   7.  Forms
   8.  Header (base rules — announcement bar, mobile accordion)
   9.  Homepage / About
   10. Financing Widget (Cherry / Floating Estimator)
   11. Footer
   12. Table of Contents Sidebar
   13. Blog
   14. Services
   15. Service Category Dropdown
   16. Responsive / Media Queries
       16.1  Desktop nav flyouts        (min-width: 1201px)
       16.2  Tablet / small-desktop     (max-width: 1200px)
       16.3  Small tablet               (max-width: 1024px)
       16.4  Mobile                     (max-width: 767px)
       16.5  Small mobile               (max-width: 480px)
       16.6  Reduced motion
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. CSS VARIABLES
   ------------------------------------------------------------------------- */
:root {
  /* Neutrals */
  --color-black: #0F0F0F;
  --color-dark-gray: #313130;
  --color-gray: #616161;
  --color-light-gray: #F4F4F4;
  --color-white: #FFFFFF;

  /* Brand Colors */
  --color-charcoal: #141311;
  --color-gold: #9B6E23;
  --color-tan: #E1B167;
  --color-cream: #F8F3E9;
}


/* -------------------------------------------------------------------------
   2. BASE / GLOBAL ELEMENTS
   ------------------------------------------------------------------------- */
body p:last-child {
  margin-bottom: 0;
}

body :is(ul, ol) {
  margin-bottom: 20px;
}

.map-embed {
  position: relative;
  width: 100%;
  height: 100%;
}

.map-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 17px;
}


/* -------------------------------------------------------------------------
   3. UTILITY CLASSES
   ------------------------------------------------------------------------- */
.semibold {
  font-weight: 600;
}

.text-uppercase {
  text-transform: uppercase;
}

.desc-spacer {
  display: block;
  margin-bottom: 15px;
}

/* --- Default list styling (bullets / numbers via ::before) --- */
.list-default :is(ul, ol) {
  margin: 0;
  padding: 0;
  list-style: none;
}

.list-default ol {
  counter-reset: list-default-counter;
}

.list-default :is(ul, ol) li {
  position: relative;
  margin-bottom: 15px;
  padding-left: 1.2em;
}

.list-default :is(ul, ol) li:last-child {
  margin-bottom: 0;
}

.list-default ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-tan);
}

.list-default ol li::before {
  counter-increment: list-default-counter;
  content: counter(list-default-counter) ".";
  position: absolute;
  left: 0;
  color: var(--color-tan);
}

.list-default :is(ul, ol) li :is(b, strong) {
  font-weight: 700;
  color: var(--color-tan);
}

.list-default :is(ul, ol) li a {
  text-decoration: underline;
}

/* Dark variant */
.list-default.dark ul li::before,
.list-default.dark ol li::before {
  color: var(--color-black);
}

.list-default.dark :is(ul, ol) li :is(b, strong) {
  color: var(--color-black);
}

/* Block-1 variant: cream card, no marker */
.list-default.block-1 :is(ul, ol) {
  padding: 23px 30px;
  background: var(--color-cream);
  border-left: 3px solid var(--color-gold);
}

.list-default.block-1 ul li::before,
.list-default.block-1 ol li::before {
  display: none;
}

.list-default.block-1 ul li,
.list-default.block-1 ol li {
  padding: 0;
}

/* --- Bullet variation: literal bullet character ------------------------- */
.list-default.bullet :is(ul, ol) > li {
  position: relative;
  padding-left: 1.25em;
}

.list-default.bullet ul > li::before {
  display: block;
  content: "•";
  position: absolute;
  left: 0.25em;
  top: 0;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  color: var(--color-charcoal);
}

/* Block-2 variant: divider rows, no marker */
.list-default.block-2 ul li::before,
.list-default.block-2 ol li::before {
  display: none;
}

.list-default.block-2 ul li,
.list-default.block-2 ol li {
  padding: 0 0 15px;
  border-bottom: 1px solid rgba(97, 97, 97, 0.5);
}

.list-default.block-2 ul li:last-child,
.list-default.block-2 ol li:last-child {
  border-bottom: none;
}

/* Block-3 variant: individual cream cards, no marker */
.list-default.block-3 ul li::before,
.list-default.block-3 ol li::before {
  display: none;
}

.list-default.block-3 ul li,
.list-default.block-3 ol li {
  padding: 23px 31px;
  border-left: 3px solid var(--color-gold);
  background: var(--color-cream);
}


/* -------------------------------------------------------------------------
   4. SHARED ICON (ARROW) RULES
   Reused across buttons, announcement bar, blog "read more", and both
   desktop and mobile nav menus to draw the small chevron via a masked
   background SVG.
   ------------------------------------------------------------------------- */

/* --- Right-pointing chevron, currentColor (buttons / announcement / blog) --- */
.btn-text .elementor-button-text::after,
.main-hd .annoucement-btn-text::after,
.blog .archive-post-section .elementor-post__read-more::after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 7px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='9' height='7' viewBox='0 0 9 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 6.35352L8 3.35352L5 0.353516M8 3.35352L0 3.35351' stroke='black' stroke-width='1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='9' height='7' viewBox='0 0 9 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 6.35352L8 3.35352L5 0.353516M8 3.35352L0 3.35351' stroke='black' stroke-width='1'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.btn-text .elementor-button:hover .elementor-button-text::after,
.main-hd .annoucement-btn:hover .annoucement-btn-text::after,
.blog .archive-post-section .elementor-post__read-more:hover::after {
  transform: translateX(2px);
}

/* --- Right-pointing chevron, fixed color (nav submenu items, all depths) --- */
.main-hd .hd-menu .elementor-nav-menu--main > ul > li > ul.sub-menu > li > a.has-submenu::after,
.main-hd .hd-menu .elementor-nav-menu--main > ul > li > ul.sub-menu > li > ul.sub-menu > li:not(.desktop-submenu-back) > a:not(.has-submenu)::after,
.main-hd .hd-menu .elementor-nav-menu--main > ul > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a::after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 7px;
  flex-shrink: 0;
  background-color: var(--color-black);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='9' height='7' viewBox='0 0 9 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 6.35352L8 3.35352L5 0.353516M8 3.35352L0 3.35351' stroke='black' stroke-width='1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='9' height='7' viewBox='0 0 9 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 6.35352L8 3.35352L5 0.353516M8 3.35352L0 3.35351' stroke='black' stroke-width='1'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.main-hd .hd-menu .elementor-nav-menu--main > ul > li > ul.sub-menu > li > ul.sub-menu > li > a:not(.has-submenu):hover::after,
.main-hd .hd-menu .elementor-nav-menu--main > ul > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a:hover::after {
  background-color: var(--color-tan);
}

/* --- Left-pointing chevron ("back" links, desktop + mobile) --- */
.main-hd .hd-menu .desktop-submenu-back > a::before,
.main-hd .hd-menu .mobile-submenu-back > a::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 7px;
  flex-shrink: 0;
  background-color: var(--color-gray);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='9' height='7' viewBox='0 0 9 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 0.353516L1 3.35352L4 6.35352M1 3.35352L9 3.35351' stroke='black' stroke-width='1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='9' height='7' viewBox='0 0 9 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 0.353516L1 3.35352L4 6.35352M1 3.35352L9 3.35351' stroke='black' stroke-width='1'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* The mobile back link keeps its icon black regardless of hover state */
.main-hd .hd-menu .mobile-submenu-back > a::before {
  background-color: var(--color-black);
}

.main-hd .hd-menu .desktop-submenu-back > a:hover::before {
  background-color: var(--color-tan);
}


/* -------------------------------------------------------------------------
   5. BUTTONS
   ------------------------------------------------------------------------- */
.btn-icon .elementor-icon {
  display: block;
}

/* --- Outline variant (default / white / dark / gold) --- */
.btn-outline .elementor-button {
  background: none;
  color: var(--color-tan);
  border: 1px solid var(--color-tan);
}

.btn-outline .elementor-button:hover {
  color: var(--color-tan);
  border-color: var(--color-tan);
  background: rgba(225, 177, 103, 0.30);
}

.btn-outline.white .elementor-button {
  background: none;
  color: var(--color-white);
  border: 1px solid var(--color-white);
}

.btn-outline.white .elementor-button:hover {
  color: var(--color-black);
  border-color: var(--color-white);
  background: var(--color-white);
}

.btn-outline.dark .elementor-button {
  background: none;
  color: var(--color-black);
  border: 1px solid var(--color-black);
}

.btn-outline.dark .elementor-button:hover {
  color: var(--color-white);
  border-color: var(--color-black);
  background: var(--color-black);
}

.btn-outline.gold .elementor-button {
  background: none;
  color: var(--color-gold);
  border: 1px solid var(--color-gold);
}

.btn-outline.gold .elementor-button:hover {
  color: var(--color-white);
  border-color: var(--color-gold);
  background: var(--color-gold);
}

/* --- Text-link variant --- */
.btn-text .elementor-button {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-tan);
  display: inline-flex;
  align-items: center;
}

.btn-text .elementor-button:hover,
.btn-text .elementor-button:focus {
  background: none !important;
  border: none;
  color: var(--color-tan);
}

.btn-text .elementor-button-content-wrapper,
.btn-text .elementor-button-text {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.btn-text .elementor-button-text {
  border-bottom: 1px solid var(--color-tan);
  padding-bottom: 2px;
}

.btn-text.white .elementor-button {
  color: var(--color-white);
}

.btn-text.white .elementor-button-text {
  border-color: var(--color-charcoal);
}

.btn-text.dark .elementor-button {
  color: var(--color-charcoal);
}

.btn-text.dark .elementor-button-text {
  border-color: var(--color-white);
}

/* --- Secondary variant --- */
.btn-secondary .elementor-button {
  border-radius: 6px;
  padding: 9px 16px;
}

.btn-secondary .elementor-button:hover {
  border-radius: 6px;
}


/* -------------------------------------------------------------------------
   6. LEGACY TEXT BLOCK (Sitemap / Privacy / Terms / HIPAA)
   ------------------------------------------------------------------------- */
.legacy-text-block :is(h1, h2) {
  margin: 60px 0 30px;
  color: var(--color-gold);
}

.legacy-text-block :is(h3, h4) {
  margin: 40px 0 20px;
  color: var(--color-gold);
}

.legacy-text-block :is(h1, h2, h3, h4):first-child {
  margin-top: 0;
}

.legacy-text-block :is(b, strong) {
  font-weight: 600;
  color: var(--color-gold);
}

.legacy-text-block :is(a) {
  text-decoration: underline;
  color: unset;
}


/* -------------------------------------------------------------------------
   7. FORMS
   ------------------------------------------------------------------------- */
.form-default .elementor-field-group {
  position: relative;
}

/* --- Marketing / non-marketing acceptance checkboxes --- */
.form-default .elementor-field-group-marketing_acceptance .elementor-field-option,
.form-default .elementor-field-group-nonmarketing_acceptance .elementor-field-option {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
}

.form-default .elementor-field-group-marketing_acceptance input[type="checkbox"],
.form-default .elementor-field-group-nonmarketing_acceptance input[type="checkbox"] {
  margin: 0;
  margin-top: 0.3em;
  accent-color: #383838; /* no matching root var */
}

/* --- Custom select dropdown caret icon ---
   NOTE: stroke='%230F0F0F' below is the URL-encoded equivalent of
   --color-black. It's a literal background-image data URI, so it
   cannot reference the CSS variable directly — update both together
   if the black shade ever changes. */
.form-default .select-caret-down-wrapper svg {
  display: none;
}

.form-default .select-caret-down-wrapper {
  width: 12px;
  height: 7px;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='7' viewBox='0 0 12 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.495117 0.495117L5.99512 5.99512L11.4951 0.495117' stroke='%230F0F0F' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* --- Radio field "pills" (no circle, filled background when checked) --- */
.form-default .elementor-field-type-radio .elementor-field-label {
  margin-bottom: 10px;
}

.form-default .elementor-field-subgroup.elementor-subgroup-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.form-default .elementor-field-type-radio .elementor-field-option {
  display: inline-flex;
  align-items: center;
  padding: 4px 13px 5px 13px;
  border: 1px solid var(--color-gray);
  border-radius: 50px;
  cursor: pointer;
}

/* Remove the native radio circle but keep it accessible/clickable */
.form-default .elementor-field-type-radio .elementor-field-option input[type="radio"] {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.form-default .elementor-field-type-radio .elementor-field-option label {
  margin: 0;
  cursor: pointer;
}

/* --- Acceptance field label color/size --- */
.form-default .elementor-field-type-acceptance label {
  color: var(--color-gray) !important;
  font-size: 0.875rem !important;
}

.form-default .elementor-field-group-marketing_acceptance > .elementor-field-label,
.form-default .elementor-field-group-nonmarketing_acceptance > .elementor-field-label {
    display: none;
}

/* --- Remove focus outline on all field types --- */
.form-default .elementor-field-textual:focus,
.form-default .elementor-field-textual:focus-visible,
.form-default input:focus,
.form-default input:focus-visible,
.form-default textarea:focus,
.form-default textarea:focus-visible,
.form-default select:focus,
.form-default select:focus-visible {
  outline: none;
  box-shadow: none;
}

.form-default .elementor-field-type-html {
  margin: 0 !important;
}

/* --- Legacy links row (e.g. privacy policy link under the form) --- */
.form-default .form-legacy-menu {
  display: flex;
  position: absolute;
  right: 20px;
  bottom: -35px;
  z-index: 1;
  gap: 20px;
  margin: 0;
  padding: 0;
  color: var(--color-gray);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  list-style: none;
}

.form-default .form-legacy-menu li {
  margin: 0;
  padding: 0;
}

.form-default .form-legacy-menu a {
  color: var(--color-gray);
  text-decoration: none;
}

.form-default .form-legacy-menu a:hover {
  color: var(--color-gold);
}

/* --- Placeholder color --- */
.form-default input::placeholder,
.form-default textarea::placeholder {
  color: var(--color-dark-gray);
  opacity: 1 !important;
}


/* -------------------------------------------------------------------------
   8. HEADER (base rules — breakpoint-specific nav rules live in Section 16)
   ------------------------------------------------------------------------- */

/* --- 8.1 Announcement Bar ---
   Default (above 767px): one item, centered, static — no animation.
   At 767px and below the JS adds .is-marquee plus the clones, and the
   scrolling animation is switched on in Section 16.4. */
.main-hd .annoucement-bar {
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
}

.main-hd .annoucement-bar-track {
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-hd .annoucement-bar-item {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 40px; /* use padding, not gap on the track — keeps the -50% loop seamless */
  flex-shrink: 0;
  white-space: nowrap;
}

.main-hd .annoucement-bar-item .promo-heading {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.64em;
  font-family: 'Inter', sans-serif;
  color: var(--color-white);
}

.main-hd .annoucement-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.42em;
}

.main-hd .annoucement-btn-text {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid var(--color-white);
  padding-bottom: 2px;
}

@keyframes annoucement-bar-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* --- 8.2 Main Navigation Menu — mobile accordion / drill-down ---
   The expand/collapse itself is Elementor's native mobile toggle
   (aria-expanded on the <a>) — this only adds visual styling on top.
   No media query needed: .elementor-nav-menu--dropdown only exists in
   Elementor's mobile/off-canvas markup, never on desktop, so this is
   already scoped correctly regardless of the exact pixel breakpoint
   Elementor uses internally to switch into mobile mode. */

.main-hd .hd-menu .elementor-nav-menu--dropdown > ul > li > a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 16px 0;
  color: var(--color-black);
}

.main-hd .hd-menu .elementor-nav-menu--dropdown > ul > li > a[aria-expanded="true"] {
  color: var(--color-gray);
}

.main-hd .hd-menu .elementor-nav-menu--dropdown > ul > li > a .sub-arrow svg {
  transition: transform 0.2s ease;
}

.main-hd .hd-menu .elementor-nav-menu--dropdown > ul > li > a[aria-expanded="true"] .sub-arrow svg {
  transform: rotate(180deg);
}

/* Level 2 list — indented, no vertical connector line */
.main-hd .hd-menu .elementor-nav-menu--dropdown > ul > li > ul.sub-menu {
  padding-left: 16px;
  margin: 0;
  list-style: none;
  border-left: none;
}

/* Level 2 AND Level 3 links share the same base styling */
.main-hd .hd-menu .elementor-nav-menu--dropdown > ul > li > ul.sub-menu > li > a,
.main-hd .hd-menu .elementor-nav-menu--dropdown > ul > li > ul.sub-menu > li > ul.sub-menu > li > a {
  display: flex;
  align-items: center;
  justify-content: flex-start !important;
  gap: 8px;
  padding: 12px 0;
  color: var(--color-black);
  text-decoration: none;
}

/* Level 2 -> Level 3 CONTAINED swap. Tapping a Level 2 item (e.g.
   Injectables) hides its sibling Level 2 items and reveals its Level 3
   list in the same spot — all within normal document flow, no
   position:fixed, no full-screen overlay, no DOM relocation. */

/* Level 3 lists stay hidden by default (normal nested accordion state) */
.main-hd .hd-menu .elementor-nav-menu--dropdown > ul > li > ul.sub-menu > li > ul.sub-menu {
  display: none;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* The active item's Level 3 list becomes visible */
.main-hd .hd-menu .elementor-nav-menu--dropdown > ul > li > ul.sub-menu > li.mobile-panel-open > ul.sub-menu {
  display: block;
}

/* The active item's own top-level link (e.g. "Injectables") hides —
   the back link inside its Level 3 list takes its place visually */
.main-hd .hd-menu .elementor-nav-menu--dropdown > ul > li > ul.sub-menu > li.mobile-panel-open > a {
  display: none;
}

/* While one item in a Level 2 list is active, hide its siblings
   (e.g. Facial Treatments, Wellness Center) so only the active
   item's Level 3 content shows in that spot */
.main-hd .hd-menu .elementor-nav-menu--dropdown > ul > li > ul.sub-menu:has(> li.mobile-panel-open) > li:not(.mobile-panel-open) {
  display: none;
}

/* Back link at the top of the Level 3 list. The icon itself is
   styled (shared with the desktop back link) in Section 4. */
.main-hd .hd-menu .mobile-submenu-back > a {
  display: flex;
  align-items: center;
  justify-content: flex-start !important;
  gap: 8px;
  padding: 16px 0;
  font-weight: 600;
  color: var(--color-black);
  text-decoration: none;
  border-bottom: 1px solid var(--color-light-gray);
  margin-bottom: 8px;
}

/* Level 4 list — flattened inline under its Level 3 category header,
   no further hiding/nesting needed */
.main-hd .hd-menu .elementor-nav-menu--dropdown > ul > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu {
  display: block;
  padding: 0;
  margin: 0;
  list-style: none;
}

.main-hd .hd-menu .elementor-nav-menu--dropdown > ul > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a {
  display: flex;
  align-items: center;
  justify-content: flex-start !important;
  gap: 8px;
  padding: 8px 0;
  color: var(--color-black);
  text-decoration: none;
}

/* The Level 3 item itself becomes a static, non-clickable, uppercase
   gold category header — no arrow */
.main-hd .hd-menu .elementor-nav-menu--dropdown > ul > li > ul.sub-menu > li > ul.sub-menu > li > a.has-submenu {
  pointer-events: none;
  color: var(--color-gold);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 3px;
  padding: 16px 0 8px;
}

.main-hd .hd-menu .elementor-nav-menu--dropdown > ul > li > ul.sub-menu > li > ul.sub-menu > li > a.has-submenu .sub-arrow {
  display: none;
}

.main-hd .hd-menu .elementor-nav-menu--dropdown > ul > li > ul.sub-menu > li > ul.sub-menu > li:first-child > a.has-submenu {
  padding-top: 4px;
}


/* -------------------------------------------------------------------------
   9. HOMEPAGE / ABOUT
   ------------------------------------------------------------------------- */
.home .main-hd .gallery-btn .elementor-button {
  border-color: var(--color-white);
  color: var(--color-white);
}

.home .main-hd .gallery-btn .elementor-button:hover {
  background: var(--color-white);
  color: var(--color-black);
}

.home .main-hd .hd-menu .elementor-nav-menu > li > a.elementor-item {
  color: var(--color-white);
}

.home .main-hd .hd-menu .elementor-nav-menu > li > a.elementor-item .sub-arrow svg {
  fill: var(--color-white);
}

.home .main-hd .elementor-sticky--effects .hd-menu .elementor-nav-menu > li > a.elementor-item {
  color: initial;
}

.home .main-hd .elementor-sticky--effects .hd-menu .elementor-nav-menu > li > a.elementor-item:hover,
.home .main-hd .elementor-sticky--effects .hd-menu .elementor-nav-menu > li > a.elementor-item.highlighted {
  color: var(--color-tan);
}

.home .main-hd .elementor-sticky--effects .hd-menu .elementor-nav-menu > li > a.elementor-item .sub-arrow svg {
  fill: initial;
}

.home .main-hd .elementor-sticky--effects .gallery-btn .elementor-button {
  border-color: initial;
  color: initial;
}

.home .main-hd .elementor-sticky--effects .gallery-btn .elementor-button:hover {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}

.home .about-section .credentials .gallery,
.about-us .hero-section .credentials .gallery,
.about-us .meet-the-team .credentials .gallery {
  display: flex;
  align-items: center;
  gap: 100px;
}

.home-featured-services .card-loop.big .elementor-cta {
  height: 100%;
}

.home-featured-services .card-loop .elementor-cta__content {
  position: relative;
  height: 100%;
}

.home-featured-services .card-loop .elementor-cta__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background: rgba(112, 112, 112, 0.25);
  backdrop-filter: blur(14.15px);
}

.home-featured-services .card-loop .elementor-cta__title::after {
  content: "";
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background-color: var(--color-white);
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.02407 9.31711L10.4946 4.84655L6.02407 0.375977M10.4946 4.84655L0 4.84654' stroke='%230F0F0F' stroke-width='1.06358'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}


/* -------------------------------------------------------------------------
   10. FINANCING WIDGET (Cherry / Floating Estimator)
   ------------------------------------------------------------------------- */
.cherry .cherry-widget .button-filled-hHeip {
  color: var(--color-black) !important;
  font-weight: 600 !important;
  border: none !important;
  opacity: 1 !important;
}

.cherry .cherry-widget .button-filled-hHeip:hover {
  background: var(--color-gold) !important;
  color: var(--color-white) !important;
}

.cherry .cherry-widget .button-outlined-2JWk6 {
  font-weight: 600 !important;
  border-color: var(--color-black) !important;
  color: var(--color-black) !important;
  opacity: 1 !important;
}

.cherry .cherry-widget .button-outlined-2JWk6:hover {
  background: var(--color-black) !important;
  color: var(--color-white) !important;
}

.floatingEstimator-floatingContainer-1uxGW .floatingEstimator-floatingButton-I5Zis {
  opacity: 1 !important;
}

.floatingEstimator-floatingContainer-1uxGW .floatingEstimator-floatingButton-I5Zis .floatingEstimator-buttonTextContainer-1Qw7h {
  color: var(--color-black) !important;
}

.floatingEstimator-floatingContainer-1uxGW .floatingEstimator-floatingButton-I5Zis .floatingEstimator-iconContainer-2OITm svg path {
  fill: var(--color-black);
}

.floatingEstimator-floatingContainer-1uxGW .floatingEstimator-floatingButton-I5Zis:hover {
  background: var(--color-gold);
  color: var(--color-white);
}

.floatingEstimator-floatingContainer-1uxGW .floatingEstimator-floatingButton-I5Zis:hover .floatingEstimator-buttonTextContainer-1Qw7h {
  color: var(--color-white) !important;
}

.floatingEstimator-floatingContainer-1uxGW .floatingEstimator-floatingButton-I5Zis:hover .floatingEstimator-iconContainer-2OITm svg path {
  fill: var(--color-white);
}

#widget-floatingEstimator-mount .calculator-sticky_button_container-3snzC .calculator-button_container-gUX3b {
  opacity: 1 !important;
  color: var(--color-black) !important;
}

#widget-floatingEstimator-mount .calculator-sticky_button_container-3snzC .calculator-button_container-gUX3b:hover {
  color: var(--color-white) !important;
}

#widget-floatingEstimator-mount .floatingEstimator-closeButton-n6w3M svg path {
  fill: var(--color-white) !important;
}


/* -------------------------------------------------------------------------
   11. FOOTER
   ------------------------------------------------------------------------- */
.footer-location .contact-details .heading,
.form-thank-you .consultation-block .contact-details .heading {
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.33em;
  letter-spacing: 3px;
  color: var(--color-tan);
}

.form-thank-you .consultation-block .contact-details .heading {
  color: var(--color-gold);
}

.main-footer .legacy-menu .elementor-nav-menu {
  gap: 23px;
}

/* Sticky call/book/gallery button group icon color */
.btn-sticky .elementor-button svg path {
  fill: var(--color-tan) !important;
}

/* Dim other buttons in the group on hover */
.sticky-wrap .btn-sticky {
  transition: opacity 0.3s ease;
}

.sticky-wrap:has(.btn-sticky:hover) .btn-sticky:not(:hover) {
  opacity: 0.5;
}


/* -------------------------------------------------------------------------
   12. TABLE OF CONTENTS SIDEBAR
   Used on both single blog posts and service pages.
   ------------------------------------------------------------------------- */
.toc-sidebar .sidebar-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-height: 50vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--color-light-gray) transparent;
}

.toc-sidebar .sidebar-nav::-webkit-scrollbar {
  width: 4px;
}

.toc-sidebar .sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--color-light-gray);
  border-radius: 4px;
}

.toc-sidebar .sidebar-nav .nav-item {
  position: relative;
  padding: 19px 17px;
  color: #AFAFAF;
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.44em;
  transition: color 0.3s ease, padding-left 0.3s ease;
}

.toc-sidebar .sidebar-nav .nav-item:first-child{
  padding-top: 7px;
}

.toc-sidebar .sidebar-nav .nav-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background-color: var(--color-light-gray);
  transition: background-color 0.3s ease;
}

.toc-sidebar .sidebar-nav .nav-item.active,
.toc-sidebar .sidebar-nav .nav-item:hover {
  color: var(--color-gold);
}

.toc-sidebar .sidebar-nav .nav-item:hover::before,
.toc-sidebar .sidebar-nav .nav-item.active::before {
  background-color: #9B7A5B; /* no matching root var */
}

.toc-sidebar .sidebar-nav.dark .nav-item.active,
.toc-sidebar .sidebar-nav.dark .nav-item:hover {
  color: var(--color-black);
}

/* Smaller variant used on single blog posts and service pages */
.single-post .toc-sidebar .sidebar-nav .nav-item,
.services.toc-sidebar .sidebar-nav .nav-item {
  font-size: 1rem;
  padding: 12px 17px;
}


/* -------------------------------------------------------------------------
   13. BLOG
   ------------------------------------------------------------------------- */
.blog .archive-post-section .elementor-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog .archive-post-section .elementor-pagination .page-numbers {
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.42em;
}

/* Previous / Next pills */
.blog .archive-post-section .elementor-pagination .page-numbers.prev,
.blog .archive-post-section .elementor-pagination .page-numbers.next {
  background: var(--color-tan);
  color: var(--color-black);
  border-radius: 999px;
  padding: 10px 22px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.blog .archive-post-section .elementor-pagination .page-numbers.prev:hover,
.blog .archive-post-section .elementor-pagination .page-numbers.next:hover {
  background: var(--color-gold);
  color: var(--color-white);
}

/* Disabled state (no more pages in that direction) */
.blog .archive-post-section .elementor-pagination span.page-numbers.prev,
.blog .archive-post-section .elementor-pagination span.page-numbers.next {
  border: 1px solid rgba(225, 177, 103, 0.5);
  background-color: rgba(155, 122, 91, 0.13);
  color: var(--color-tan);
  pointer-events: none;
}

.blog .archive-post-section .elementor-pagination .page-numbers.prev {
  margin-right: auto;
}

.blog .archive-post-section .elementor-pagination .page-numbers.next {
  margin-left: auto;
}

.blog .archive-post-section .elementor-pagination .page-numbers.prev::before {
  content: "‹";
  font-size: 16px;
}

.blog .archive-post-section .elementor-pagination .page-numbers.next::after {
  content: "›";
  font-size: 16px;
}

/* Numbered pages */
.blog .archive-post-section .elementor-pagination .page-numbers:not(.prev):not(.next) {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #777; /* no matching root var */
  margin: 0 6px;
  text-decoration: none;
}

.blog .archive-post-section .elementor-pagination .page-numbers.current {
  background: #E0A84A; /* no matching root var */
  color: var(--color-white) !important;
}

/* Post thumbnail */
.blog .archive-post-section .elementor-post__thumbnail {
  border-radius: 17px;
  overflow: hidden;
}

.blog .archive-post-section .elementor-post__thumbnail img {
  border-radius: 17px;
}

/* "Read more" link — the chevron itself is styled in Section 4 */
.blog .archive-post-section .elementor-post__read-more {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  text-transform: none;
  border-bottom: 1px solid var(--color-gold);
  padding-bottom: 2px;
  color: var(--color-tan);
  transition: color 0.2s ease;
}

.blog .archive-post-section .elementor-post__read-more:hover {
  color: var(--color-gold);
}


/* -------------------------------------------------------------------------
   14. SERVICES
   ------------------------------------------------------------------------- */
.service-gallery-section .btn-icon.carousel .elementor-icon,
.service-testimonials-section .btn-icon.carousel .elementor-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  background: var(--color-light-gray);
  border-radius: 50px;
}

.service-gallery-section .btn-icon.carousel svg,
.service-testimonials-section .btn-icon.carousel svg {
  font-size: 16px;
}

.service-gallery-section .btn-icon.carousel svg path,
.service-testimonials-section .btn-icon.carousel svg path {
  stroke: var(--color-charcoal);
}

.service-gallery-section .btn-icon.custom_carousel_prev_1 svg,
.service-testimonials-section .btn-icon.custom_carousel_prev_2 svg {
  transform: rotate(180deg);
}

.service-gallery-section .btn-icon.carousel.is-disabled,
.service-testimonials-section .btn-icon.carousel.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.service-gallery-section .btn-icon.carousel:hover,
.service-testimonials-section .btn-icon.carousel:hover {
  cursor: pointer;
}

.service-testimonials-section .elementor-testimonial__text {
  font-style: normal;
}

.service-testimonials-section .elementor-testimonial__text:before {
  content: "";
  display: block;
  width: 110px; /* exactly 22px × 5 stars */
  height: 22px;
  margin-bottom: 20px;
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.33869 3.15521C6.07757 1.82973 6.44699 1.16699 6.99935 1.16699C7.55171 1.16699 7.92113 1.82973 8.65998 3.15521L8.85114 3.49813C9.06114 3.87478 9.16608 4.06312 9.32982 4.18738C9.49351 4.31164 9.69732 4.35777 10.1051 4.45002L10.4763 4.53401C11.9111 4.85865 12.6285 5.02097 12.7992 5.56983C12.9699 6.11868 12.4808 6.69063 11.5026 7.83443L11.2496 8.13036C10.9716 8.45539 10.8326 8.61791 10.7701 8.81898C10.7076 9.02006 10.7286 9.23688 10.7706 9.67059L10.8089 10.0654C10.9567 11.5915 11.0307 12.3546 10.5839 12.6938C10.137 13.033 9.46527 12.7237 8.12186 12.1052L7.77431 11.9451C7.39257 11.7694 7.20171 11.6815 6.99935 11.6815C6.79699 11.6815 6.60612 11.7694 6.22439 11.9451L5.87684 12.1052C4.53341 12.7237 3.86171 13.033 3.41485 12.6938C2.968 12.3546 3.04195 11.5915 3.18983 10.0654L3.22809 9.67059C3.27012 9.23688 3.29113 9.02006 3.2286 8.81898C3.16608 8.61791 3.0271 8.45539 2.74914 8.13036L2.49608 7.83443C1.51791 6.69063 1.02883 6.11868 1.19951 5.56983C1.3702 5.02097 2.0876 4.85865 3.52241 4.53401L3.89362 4.45002C4.30135 4.35777 4.50521 4.31164 4.6689 4.18738C4.83259 4.06312 4.93758 3.87479 5.14754 3.49813L5.33869 3.15521Z' fill='%23D9A441'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 22px 22px;
}

.service-testimonials-section .testimonials .elementor-testimonial {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.services-faq-lists .list .elementor-icon-box-description a {
  color: currentColor;
  text-decoration: underline;
}


/* -------------------------------------------------------------------------
   15. SERVICE CATEGORY DROPDOWN
   ------------------------------------------------------------------------- */

/* Hide the original Elementor tab bar so only the custom dropdown shows */
.service-category-dropdown .e-n-tabs-heading {
  display: none;
}

/* Wrapper */
.service-category-select {
  position: relative;
  max-width: 380px; /* adjust to taste */
}

/* Toggle pill (closed state) */
.service-category-select-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 20px !important;
  background-color: var(--color-cream) !important;
  border: none;
  border-radius: 16px !important;
  cursor: pointer;
  text-align: left;
}

.service-category-select-toggle:hover {
  background-color: var(--color-cream) !important;
  transform: none;
  box-shadow: none;
  opacity: 1 !important;
}

.service-category-select-label {
  font-weight: 600;
  color: var(--color-black);
  font-size: 1rem;
}

.service-category-select-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-white);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.service-category-select-arrow svg {
  width: 16px;
  height: 16px;
  color: var(--color-gold);
}

.service-category-select.is-open .service-category-select-arrow {
  transform: rotate(180deg);
}

/* Dropdown menu (open state) */
.service-category-select-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background-color: var(--color-white);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 10px;
  z-index: 20;
  overflow-y: auto;
}

.service-category-select.is-open .service-category-select-menu {
  display: flex;
}

/* Gallery variant: long list (20+ items), so cap the height and scroll.
   Scoped to the mount with the "gallery" class only — other service
   dropdowns keep their full length. */
.service-category-dropdown-mount.gallery .service-category-select-menu {
  max-height: 360px; /* about 6–7 options visible; adjust to taste */
  overflow-y: auto;
  overscroll-behavior: contain; /* page won't scroll when the list hits its end */
  scrollbar-width: thin;
  scrollbar-color: var(--color-tan) transparent;
}

.service-category-dropdown-mount.gallery .service-category-select-menu::-webkit-scrollbar {
  width: 4px;
}

.service-category-dropdown-mount.gallery .service-category-select-menu::-webkit-scrollbar-thumb {
  background: var(--color-tan);
  border-radius: 4px;
}

/* Category + subcategory options (shared base) */
.service-category-select-option {
  display: block;
  width: 100%;
  text-align: left;
  text-decoration: none;
  background: none;
  border: none;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 15px;
  color: var(--color-black) !important;
  font-weight: 600;
  cursor: pointer;
}

.service-category-select-option:hover {
  background-color: var(--color-tan);
  color: var(--color-white);
}

.service-category-select-option.is-active {
  background-color: var(--color-gold);
  color: var(--color-white) !important;
  font-weight: 600;
}

/* Subcategory options (nested under their parent) */
.service-category-select-suboption {
  padding-left: 32px;
  font-size: 13px;
  color: #555555; /* no matching root var */
  background-color: #FAF6EC; /* no matching root var */
}

.service-category-select-suboption::before {
  content: "—";
  margin-right: 6px;
  color: #B5793A; /* no matching root var */
}

.service-category-select-suboption.is-active {
  color: var(--color-white);
}

/* Scroll offset so subcategory headings clear a sticky header */
.service-subcategory {
  scroll-margin-top: 150px;
}


/* =========================================================================
   16. RESPONSIVE / MEDIA QUERIES
   All breakpoints consolidated here, ordered widest to narrowest.
   Each breakpoint appears exactly once — previously several of these
   were declared twice in separate places in the file.
   ========================================================================= */

/* -------------------------------------------------------------------------
   16.1 DESKTOP NAV FLYOUTS (min-width: 1201px)
   IMPORTANT — verify before shipping: this breakpoint was raised from
   1025px to 1201px. Elementor swaps to the mobile/off-canvas markup
   (adds .elementor-nav-menu--dropdown, see Section 8.2) at whatever
   breakpoint is set under Elementor > Site Settings > Layout >
   Breakpoints — by default that's 1024/1025px unless it's been
   changed. If that setting is still below 1201px, the range between
   it and 1201px has NEITHER the desktop flyout NOR the mobile
   accordion applied, and submenu items in that range will not open.
   Set Elementor's own breakpoint to 1200px (or lower this media query
   to match it) to close the gap.
   ------------------------------------------------------------------------- */
@media (min-width: 1201px) {
  /* Level 1 chevron flip on hover — targets Elementor's built-in submenu icon */
  .main-hd .hd-menu .elementor-nav-menu--main {
    pointer-events: auto !important;
  }

  .main-hd .hd-menu .elementor-nav-menu--main > ul > li > a .sub-arrow svg {
    transition: transform 0.2s ease;
  }

  .main-hd .hd-menu .elementor-nav-menu--main > ul > li:hover > a .sub-arrow svg,
  .main-hd .hd-menu .elementor-nav-menu--main > ul > li.highlighted > a .sub-arrow svg {
    transform: rotate(180deg);
  }

  /* Level 2 flyout panel (e.g. Services' Injectables/Facial Treatments/etc list) */
  .main-hd .hd-menu .elementor-nav-menu--main > ul > li > ul.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 270px !important;
    max-width: 270px !important;
    background: var(--color-white);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 10px 0;
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 9998;
  }

  .main-hd .hd-menu .elementor-nav-menu--main > ul > li:hover > ul.sub-menu,
  .main-hd .hd-menu .elementor-nav-menu--main > ul > li.highlighted > ul.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Services dropdown only — wider fixed width.
     NOTE: needs !important to beat the base rule's own !important above
     — without it, the base 270px width silently wins here regardless of
     this selector's higher specificity, since !important always beats
     a non-!important declaration. */
  .main-hd .hd-menu .elementor-nav-menu--main > ul > li.services-dropdown > ul.sub-menu {
    min-width: 218px !important;
    max-width: 218px !important;
  }

  /* Narrow dropdowns (About, Resources — short item labels) */
  .main-hd .hd-menu .elementor-nav-menu--main > ul > li.narrow > ul.sub-menu {
    min-width: 180px !important;
    max-width: 180px !important;
  }

  .main-hd .hd-menu .elementor-nav-menu--main > ul > li > ul.sub-menu > li {
    position: static;
  }

  /* Level 2 AND Level 3 links share the same base styling, wrapping allowed for long labels */
  .main-hd .hd-menu .elementor-nav-menu--main > ul > li > ul.sub-menu > li > a,
  .main-hd .hd-menu .elementor-nav-menu--main > ul > li > ul.sub-menu > li > ul.sub-menu > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 20px;
    white-space: normal;
    line-height: 1.4;
    border-inline-start: none;
  }

  /* Hide Elementor's default caret icon — only on items with a sub-menu */
  .main-hd .hd-menu .elementor-nav-menu--main > ul > li > ul.sub-menu > li > a.has-submenu .sub-arrow svg {
    display: none;
  }

  /* Level 3 flyout — takes over the exact same spot as level 2 */
  .main-hd .hd-menu .elementor-nav-menu--main > ul > li > ul.sub-menu > li > ul.sub-menu {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    padding: 10px 0;
    list-style: none;
    background: var(--color-white);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 9999;
  }

  /* Level 3 flyout — triggered by JS-added class only (hover-intent delay), NOT :hover directly */
  .main-hd .hd-menu .elementor-nav-menu--main > ul > li > ul.sub-menu > li.submenu-active > ul.sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Hide level 2 panel itself once a level-3 child panel is open */
  .main-hd .hd-menu .elementor-nav-menu--main > ul > li > ul.sub-menu:has(> li.submenu-active > ul.sub-menu) {
    visibility: hidden;
  }

  /* Force-hide level 3 when its "back" link was clicked, until mouse leaves the level-2 item */
  .main-hd .hd-menu .elementor-nav-menu--main > ul > li > ul.sub-menu > li.back-clicked > ul.sub-menu {
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* Force-show level 2 panel again when its child is in "back-clicked" state */
  .main-hd .hd-menu .elementor-nav-menu--main > ul > li > ul.sub-menu:has(> li.back-clicked) {
    visibility: visible !important;
  }

  /* Back link styling */
  .main-hd .hd-menu .desktop-submenu-back > a {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: 8px;
    padding: 10px 20px;
    color: var(--color-gray) !important;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
  }

  /* Restores the paired icon+text hover treatment used everywhere else
     in this file (announcement bar, buttons, blog read-more); only the
     icon color changed on hover before, text stayed gray. */
  .main-hd .hd-menu .desktop-submenu-back > a:hover {
    color: var(--color-tan);
  }

  /* -----------------------------------------------------------------------
     Level 4 (e.g. Botox, Dysport, Xeomin) no longer opens as its own
     flyout — it's flattened INLINE under its Level 3 parent instead.
     The Level 3 item that would normally lead there (e.g. Wrinkle
     Relaxers) becomes a static, non-clickable group header.
     ----------------------------------------------------------------------- */

  /* Level 4 list itself: remove flyout POSITIONING, but keep pointer-events
     OFF by default. This is critical — opacity:0 on the Level 3 ancestor
     (when closed) does NOT block clicks on its own, and our own
     visibility:visible here would otherwise escape that hidden state,
     leaving an invisible-but-clickable layer sitting on top of other
     menu items and intercepting their clicks. */
  .main-hd .hd-menu .elementor-nav-menu--main > ul > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu {
    display: block !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    background: none;
    box-shadow: none;
    padding: 0;
    transition: none;
  }

  /* Only re-enable interaction on Level 4 links when their Level 3
     ancestor panel is actually the open/active one */
  .main-hd .hd-menu .elementor-nav-menu--main > ul > li > ul.sub-menu > li.submenu-active > ul.sub-menu > li > ul.sub-menu {
    pointer-events: auto !important;
  }

  /* The Level 3 item itself becomes a static, non-clickable, uppercase
     gold group header — no arrow, no hover state */
  .main-hd .hd-menu .elementor-nav-menu--main > ul > li > ul.sub-menu > li > ul.sub-menu > li > a.has-submenu {
    pointer-events: none;
    color: var(--color-gold);
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    padding: 16px 20px 8px;
    border: none;
    border-inline-start: none;
  }

  .main-hd .hd-menu .elementor-nav-menu--main > ul > li > ul.sub-menu > li > ul.sub-menu > li > a.has-submenu .sub-arrow {
    display: none;
  }

  .main-hd .hd-menu .elementor-nav-menu--main > ul > li > ul.sub-menu > li > ul.sub-menu > li:first-child > a.has-submenu {
    padding-top: 4px;
  }

  /* Level 4 links (Botox, Dysport, Xeomin...) — flat items under the group header.
     Base layout only; the chevron + hover color are shared in Section 4. */
  .main-hd .hd-menu .elementor-nav-menu--main > ul > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 20px;
    white-space: normal;
    line-height: 1.4;
    text-decoration: none;
    border: none;
    border-inline-start: none;
  }
}


/* -------------------------------------------------------------------------
   16.2 TABLET / SMALL DESKTOP (max-width: 1200px)
   ------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  /* -- Table of contents / homepage nav reset -- */
  .single-post .toc-sidebar .sidebar-nav .nav-item,
  .services.toc-sidebar .sidebar-nav .nav-item {
    font-size: 0.875rem;
  }

  .home .main-hd .hd-menu .elementor-nav-menu > li > a.elementor-item {
    color: initial;
  }

  .home .main-hd .hd-menu .elementor-nav-menu > li > a.elementor-item .sub-arrow svg {
    fill: initial;
  }

  /* -- Mobile nav: submenu indent -- */
  .main-hd .hd-menu .elementor-nav-menu--dropdown > ul > li > ul.sub-menu {
    padding-left: 40px;
  }

  /* -- Mobile menu toggle: swap icon for "Menu" / "Close" text -- */
  .hd-menu .elementor-menu-toggle {
    padding: 15px 27px;
  }

  .hd-menu .elementor-menu-toggle svg {
    display: none;
  }

  .hd-menu .elementor-menu-toggle::before {
    content: "Menu";
    font-size: 0.875rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    color: inherit;
  }

  .hd-menu .elementor-menu-toggle[aria-expanded="true"]::before {
    content: "Close";
  }

  /* -- Header background goes white while the mobile menu is open -- */
  .main-hd:has(.elementor-menu-toggle.elementor-active) {
    background: var(--color-white) !important;
  }

  /* -- 1st & 2nd level menu icon swap
     NOTE: this duplicates the chevron logic already defined in Section 4
     for submenu items — that version is scoped to .main-hd .hd-menu and
     targets deeper item levels specifically. This unscoped version was
     added later for 1st/2nd level mobile items only; verify only one is
     actually needed to avoid two icon systems fighting each other. -- */
  .hd-menu .elementor-nav-menu > li > a .sub-arrow svg,
  .hd-menu .elementor-nav-menu > li > ul.sub-menu > li > a .sub-arrow svg {
    display: none;
  }

  .hd-menu .elementor-nav-menu > li > a .sub-arrow::before,
  .hd-menu .elementor-nav-menu > li > ul.sub-menu > li > a .sub-arrow::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 7px;
    background-image: url("data:image/svg+xml,%3Csvg width='9' height='7' viewBox='0 0 9 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 6.35352L8 3.35352L5 0.353516M8 3.35352L0 3.35351' stroke='%230F0F0F'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform 0.3s ease;
  }

  .hd-menu .elementor-nav-menu > li > a[aria-expanded="true"] .sub-arrow::before,
  .hd-menu .elementor-nav-menu > li > ul.sub-menu > li > a[aria-expanded="true"] .sub-arrow::before {
    transform: rotate(90deg);
  }
}


/* -------------------------------------------------------------------------
   16.3 SMALL TABLET (max-width: 1024px)
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .floatingEstimator-floatingContainer-1uxGW {
    left: calc(20px) !important;
  }
}


/* -------------------------------------------------------------------------
   16.4 MOBILE (max-width: 767px)
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .list-default.block-1 :is(ul, ol) {
    padding: 20px;
  }

  .list-default.block-3 ul li,
  .list-default.block-3 ol li {
    padding: 20px;
  }

  .main-hd .hd-menu .elementor-nav-menu--dropdown > ul > li > ul.sub-menu {
    padding-left: 20px;
  }

  /* -- Announcement bar: infinite scroll (mobile only).
     .is-marquee is added by JS together with the cloned items; the
     duration comes from --marquee-duration, which JS sets from the
     content width so the speed stays constant. -- */
  .main-hd .annoucement-bar.is-marquee .annoucement-bar-track {
    justify-content: flex-start;
    width: max-content;
    animation: annoucement-bar-scroll var(--marquee-duration, 30s) linear infinite;
  }

  .main-hd .annoucement-bar.is-marquee:hover .annoucement-bar-track {
    animation-play-state: paused;
  }
}


/* -------------------------------------------------------------------------
   16.5 SMALL MOBILE (max-width: 480px)
   ------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .home .about-section .credentials .gallery,
  .about-us .hero-section .credentials .gallery,
  .about-us .meet-the-team .credentials .gallery {
    gap: 40px;
  }

  .main-footer .legacy-menu .elementor-nav-menu {
    gap: 15px 20px;
  }

  .blog .archive-post-section .elementor-pagination .page-numbers:not(.prev):not(.next) {
    display: none;
  }
}


/* -------------------------------------------------------------------------
   16.6 REDUCED MOTION
   Visitors who ask their OS for less motion get the static bar.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .main-hd .annoucement-bar.is-marquee .annoucement-bar-track {
    animation: none;
  }
}