/*
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.1.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.   Global Variables
   2.   Base / Global Element Styles
   3.   Scroll Animation
   4.   Shared Utility Components
   5.   Buttons
   6.   Legacy Text Block
   7.   Card Loop
   8.   Lists
   9.   Forms
   10.  Footer
   11.  Sticky CTA
   12.  Table of Contents Sidebar
   13.  Header Menu
   13b. Header Menu — Active States
   14.  Popup / Mobile Menu (incl. active states)
   15.  Service Category Dropdown
   16.  Post Archive / Single Post
   17.  Membership
   18.  Media Queries
   ========================================================================== */

/* ==========================================================================
   1. GLOBAL VARIABLES
   ========================================================================== */

:root {
  --color-black: #0F0F0F;
  --color-dark-gray: #6A6A6A;
  --color-gray: #B1B1B1;
  --color-medium-gray: #D1D1D1;
  --color-soft-gray: #E9E9E9;
  --color-light-gray: #FBFBFB;
  --color-white: #FFFFFF;
}

/* ==========================================================================
   2. BASE / GLOBAL ELEMENT STYLES
   ========================================================================== */

/* Remove trailing bottom margin from the last paragraph in any content block */
body p:last-child { margin-bottom: 0; }

/* Default spacing for lists */
body :is(ul, ol) { margin-bottom: 20px; }

/* ==========================================================================
   3. SCROLL ANIMATION (fade + rise on scroll into view)
   ========================================================================== */

@media (min-width: 768px) {
  .animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  .animate.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fallback: force visible if JS fails or IntersectionObserver is unsupported */
.no-js .animate,
.gsap-failed .animate {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* ==========================================================================
   4. SHARED UTILITY COMPONENTS
   ========================================================================== */

/* --- Responsive embed wrapper (e.g. Google Maps iframe) fills its parent - */
.map-embed {
  position: relative;
  width: 100%;
  height: 100%;
}

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

/* --- Carousel ------------------------------------------------------------ */
.btn-icon.carousel .elementor-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  background: var(--color-white);
  border-radius: 50px;
}

.btn-icon[class*="custom_carousel_prev_"] .elementor-icon svg {
  rotate: 180deg;
}

.btn-icon.carousel svg { font-size: 16px; }
.btn-icon.carousel svg path { stroke: var(--color-black); }

.btn-icon.carousel.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-icon.carousel:hover { cursor: pointer; }

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

/* Icon button: force icon to block level for consistent alignment */
.btn-icon .elementor-icon { display: block; }

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

.btn-outline .elementor-button:hover {
  background: rgba(201, 201, 201, 0.29);
  border-color: initial;
  color: initial;
}

/* --- Outline button: white modifier ----------------------------------------*/
.btn-outline.white .elementor-button {
  color: var(--color-white, #fff);
  border-color: var(--color-white, #fff);
}

.btn-outline.white .elementor-button:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--color-white, #fff);
  color: var(--color-white, #fff);
}

/* --- Text-only (link-style) button with animated arrow ------------------ */
.btn-text .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: none;
  color: var(--color-black);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.btn-text .elementor-button:hover {
  background: none;
  color: var(--color-dark-gray);
}

.btn-text .elementor-button:hover::after { background-color: var(--color-dark-gray); }

/* Arrow icon built from an inline SVG mask so it inherits currentColor */
.btn-text .elementor-button::after {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 9px;
  height: 7px;
  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.28296L8 3.28296L5 0.282959M8 3.28296L0 3.28296' stroke='%23000000' stroke-width='0.8'/%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.28296L8 3.28296L5 0.282959M8 3.28296L0 3.28296' stroke='%23000000' stroke-width='0.8'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* --- Secondary (soft/filled) button --------------------------------------*/
.btn-secondary .elementor-button {
  padding: 9px 14px 8px 14px;
  background: var(--color-soft-gray);
  color: var(--color-black);
  border: 1px solid transparent;
}

.btn-secondary .elementor-button:hover {
  background: var(--color-dark-gray);
  color: var(--color-white);
  border: 1px solid transparent;
}

/* --- Sticky CTA button (paired with .sticky-cta wrapper, see section 11) - */
.btn-sticky .elementor-button {
  padding: 19px 33px 19px 24px;
  background: var(--color-light-gray);
  color: var(--color-black);
}

.btn-sticky .elementor-button svg path { fill: var(--color-gray); }

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

.btn-sticky .elementor-button:hover svg path { fill: var(--color-dark-gray); }

/* --- Back button ---------------------------------------------------------*/
.btn-back .elementor-button {
  padding: 0;
  background: none !important;
  color: var(--color-black);
  border-radius: 0;
}

.btn-back .elementor-button svg { font-size: 0.625rem; }
.btn-back .elementor-button svg path { fill: var(--color-black); }

.btn-back .elementor-button:hover,
.btn-back .elementor-button:focus {
  background: initial;
  color: var(--color-dark-gray);
}

.btn-back .elementor-button:hover svg path,
.btn-back .elementor-button:focus svg path {
  fill: var(--color-dark-gray);
}

/* ==========================================================================
   6. LEGACY TEXT BLOCK (Sitemap / Privacy / Terms / HIPAA pages)
   ========================================================================== */

.legacy-text-block :is(h1, h2) {
  margin: 60px 0 30px;
  color: var(--color-black);
}

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

.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-black);
}

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

.text-block a { text-decoration: underline; }

.text-block b,
.text-block strong {
  color: var(--color-black);
  font-weight: 500;
}

.text-block.cta b,
.text-block.cta strong {
  color: var(--color-white);
  font-weight: 500;
}

/* ==========================================================================
   7. CARD LOOP
   ========================================================================== */

.card-loop-01 .image-wrap {
  position: relative;
  overflow: hidden;
}

.card-loop-01 .image-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 168px;
  opacity: 0.47;
  background: linear-gradient(180deg, #0F0F0F 0%, rgba(15, 15, 15, 0.00) 100%);
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.3s ease;
}

.card-loop-01 .image-wrap img {
  transition: transform 0.4s ease;
}

.card-loop-01:hover .image-wrap img {
  transform: scale(1.06);
}

.card-loop-01:hover .image-wrap::after {
  opacity: 0.6;
}

/* ==========================================================================
   8. LISTS
   ========================================================================== */

/* --- Card-style list (each item boxed on its own background) ------------ */
.list-block ul,
.list-block ol {
  padding: 0;
  margin: 0;
  list-style: none;
}

.list-block ul li,
.list-block ol li {
  margin-bottom: 20px;
  padding: 27px 30px;
  background: var(--color-white);
  border-radius: 9px;
}

.list-block ul li b,
.list-block ul li strong,
.list-block ol li b,
.list-block ol li strong {
  font-weight: 500;
  color: var(--color-black);
}

.list-block ul li a,
.list-block ol li a { text-decoration: underline; }

.list-block ul li:last-child,
.list-block ol li:last-child { margin: 0; }

/* --- Arrow variation: right-aligned arrow icon on each item ------------- */
.list-block.arrow ul li,
.list-block.arrow ol li {
  position: relative;
  padding-right: 60px; /* room for the arrow */
}

.list-block.arrow ul li::after,
.list-block.arrow ol li::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  width: 13px;
  height: 12px;
  background-color: var(--color-black);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.88496 10.7006L11.9944 5.59114L6.88496 0.481689M11.9944 5.59114L0 5.59114' stroke='%230F0F0F' stroke-width='1.36252'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.88496 10.7006L11.9944 5.59114L6.88496 0.481689M11.9944 5.59114L0 5.59114' stroke='%230F0F0F' stroke-width='1.36252'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  pointer-events: none;
}

/* --- Light variation: light background, bold title on its own line ----- */
.list-block.light ul li,
.list-block.light ol li {
  background: var(--color-light-gray);
}

.list-block.light ul li > b,
.list-block.light ol li > b {
  display: block;
  margin-bottom: 5px;
}

.list-block.light ul li a,
.list-block.light ol li a { font-weight: 500; }

/* --- Stacked variation: bold title on its own line ---------------------- */
.list-block.condition li > :is(b, strong) {
  display: block;
  margin-bottom: 5px;
}

/* --- Default list (plain bullets, own pseudo-bullet for spacing control) */
.list-default ul,
.list-default ol {
  padding: 0;
  margin: 0;
  list-style: none;
}

.list-default ul li,
.list-default ol li {
  position: relative;
  margin-bottom: 15px;
  padding-left: 20px;
}

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

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

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

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

/* --- Numbered icon-box list (counter-based index, e.g. "01", "02"...) --- */
.list-count { counter-reset: list-counter; }

.list-count .list { margin-bottom: 40px; }

.list-count .list .elementor-icon-box-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 48px;
  counter-increment: list-counter;
}

.list-count .list .elementor-icon-box-wrapper::before {
  content: counter(list-counter, decimal-leading-zero);
  flex-shrink: 0;
  padding-top: 4px;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-gray);
}

.list-count .list .elementor-icon-box-title {
  margin-top: 2px;
  margin-bottom: 8px;
}

.list-count .list .elementor-icon-box-description { color: #888; }

.list-count .list .elementor-icon-box-description b,
.list-count .list .elementor-icon-box-description strong {
  color: var(--color-black);
  font-weight: 500;
}

/* --- Arrow variation: CTA widget version (classes on the parent container) */
.list-block.arrow .elementor-cta__content {
  position: relative;
}

.list-block.arrow .elementor-cta__content::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  width: 13px;
  height: 12px;
  background-color: var(--color-black);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.88496 10.7006L11.9944 5.59114L6.88496 0.481689M11.9944 5.59114L0 5.59114' stroke='%230F0F0F' stroke-width='1.36252'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.88496 10.7006L11.9944 5.59114L6.88496 0.481689M11.9944 5.59114L0 5.59114' stroke='%230F0F0F' stroke-width='1.36252'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: transform 0.3s ease;
  pointer-events: none;
}

/* Optional: nudge the arrow right on hover */
.list-block.arrow .elementor-cta:hover .elementor-cta__content::after {
  transform: translate(4px, -50%);
}

.list-block.arrow .elementor-cta:hover .elementor-cta__content::after {
  background-color: var(--color-white);
}

.list-block.arrow .elementor-cta__content-item {
  padding-right: 40px; /* space between text and arrow */
}

.list-block.arrow .elementor-cta__content-item a{
  color: currentColor;
  text-decoration: underline;
}

/* ==========================================================================
   9. 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;
}

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

/* --- Custom select dropdown caret icon ------------------------------------*/
.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;
}

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

/* --- 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;
  list-style: none;
  color: var(--color-dark-gray);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

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

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

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

/* ==========================================================================
   10. FOOTER
   ========================================================================== */

/* Rounded map corners on the footer location block (desktop: right side) */
.ft-location .map-embed iframe { border-radius: 0 18px 18px 0; }

/* ==========================================================================
   11. STICKY CTA
   ========================================================================== */

.sticky-cta {
  position: relative;
  border-radius: 9px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.sticky-cta.elementor-sticky--effects { bottom: 20px !important; }

/* ==========================================================================
   12. TABLE OF CONTENTS SIDEBAR
   ========================================================================== */

.toc-sidebar .sidebar-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
}

.toc-sidebar .sidebar-nav .nav-item {
  position: relative;
  color: var(--color-dark-gray);
  font-family: "Google Sans", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.62em;
  transition: color 0.3s ease, padding-left 0.3s ease;
}

.toc-sidebar .sidebar-nav .nav-item.active {
  color: var(--color-black);
  font-weight: 500;
}

/* ==========================================================================
   13. HEADER MENU
   ========================================================================== */

/* Dim the other top-level items while one is hovered */
.main-hd .hd-menu .e-n-menu-heading:hover .e-n-menu-item {
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.main-hd .hd-menu .e-n-menu-heading:hover .e-n-menu-item:hover {
  opacity: 1;
}

/* Individual submenu links in the flyout panel */
.main-hd .hd-menu .e-n-menu-content .elementor-nav-menu .elementor-item {
  transition: background-color 0.3s ease, color 0.3s ease;
  border-radius: 9px;
}

.main-hd .hd-menu .e-n-menu-content .elementor-nav-menu .elementor-item:hover,
.main-hd .hd-menu .e-n-menu-content .elementor-nav-menu .elementor-item:focus {
  background-color: var(--color-black);
  color: var(--color-white);
}

/* Hide the "About" team sub-menu by default */
.main-hd .hd-menu .about-menu-team {
  display: none;
  margin-left: 50px;
  position: relative;
}

/* Show it only when hovering "Meet the Team" specifically, or hovering the sub-menu itself */
.main-hd .hd-menu:has(.about-menu-main .menu-item-1171:hover) .about-menu-team,
.main-hd .hd-menu .about-menu-team:hover {
  display: block;
}

/* Invisible bridge so hover doesn't drop crossing the gap between the two sub-menus */
.main-hd .hd-menu .about-menu-team::before {
  content: "";
  position: absolute;
  top: 0;
  left: -50px;
  width: 50px;
  height: 100%;
}

.main-hd .hd-menu .about-menu-main .menu-item-1171 .elementor-item {
  position: relative;
  display: block;
  padding-right: 50px;
}

/* Chevron indicator on "Meet the Team" */
.main-hd .hd-menu .about-menu-main .menu-item-1171 .elementor-item::after {
  content: "" !important;
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  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.28284L8 3.28284L5 0.282837M8 3.28284L0 3.28284' stroke='%230F0F0F' stroke-width='0.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 1 !important;
  visibility: visible !important;
}

.main-hd .hd-menu .about-menu-main .menu-item-1171 .elementor-item:hover::after,
.main-hd .hd-menu .about-menu-main .menu-item-1171 .elementor-item:focus::after {
  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.28284L8 3.28284L5 0.282837M8 3.28284L0 3.28284' stroke='%23FFFFFF' stroke-width='0.8'/%3E%3C/svg%3E");
}

/* ==========================================================================
   13b. HEADER MENU — ACTIVE STATES
   ----------------------------------------------------------------------
   Classes are added by the theme script (section 6, Mega Menu Active State):
   - .has-active        on .e-n-menu-heading when any item is active
   - .is-active         on the active top-level .e-n-menu-item
   - .current-menu-item on "Meet the Team" when a team page is current
   ========================================================================== */

.main-hd .hd-menu .e-n-menu-item {
  transition: opacity 0.3s ease;
}

/* --- Main menu: rest at 0.5, active at full (until the menu is hovered) - */
.main-hd .hd-menu .e-n-menu-heading.has-active:not(:hover) > .e-n-menu-item {
  opacity: 0.5;
}

.main-hd .hd-menu .e-n-menu-heading.has-active:not(:hover) > .e-n-menu-item.is-active {
  opacity: 1;
}

/* Active item text + chevron in black */
.main-hd .hd-menu .e-n-menu-item.is-active > .e-n-menu-title :is(.e-n-menu-title-container, .e-n-menu-title-text, .e-n-menu-dropdown-icon) {
  color: var(--color-black) !important;
}

.main-hd .hd-menu .e-n-menu-item.is-active > .e-n-menu-title .e-n-menu-dropdown-icon svg {
  fill: var(--color-black) !important;
}

/* --- Submenu: current page link in black ---------------------------------*/
.main-hd .hd-menu .e-n-menu-content .elementor-nav-menu .current-menu-item > .elementor-item {
  background-color: var(--color-black);
  color: var(--color-white) !important;
}

/* White chevron on "Meet the Team" when active */
.main-hd .hd-menu .about-menu-main .menu-item-1171.current-menu-item .elementor-item::after {
  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.28284L8 3.28284L5 0.282837M8 3.28284L0 3.28284' stroke='%23FFFFFF' stroke-width='0.8'/%3E%3C/svg%3E");
}

/* ==========================================================================
   14. POPUP / MOBILE MENU
   ========================================================================== */

.popup-menu .mobile-menu .elementor-nav-menu a {
  line-height: unset;
  border-inline-start: 0 !important;
}

/* --- 1st level ------------------------------------------------------------*/
.popup-menu .mobile-menu .elementor-nav-menu > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 20px;
  padding: 18px 0;
  color: var(--color-black);
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  transition: opacity 0.3s ease, padding-left 0.3s ease;
}

.popup-menu .mobile-menu .elementor-nav-menu > li:last-child > a { border-bottom: 0; }

/* --- 2nd level ------------------------------------------------------------*/
.popup-menu .mobile-menu .elementor-nav-menu > li > .sub-menu {
  margin: 10px 0;
  border-left: 1px solid var(--color-black);
}

.popup-menu .mobile-menu .elementor-nav-menu > li > .sub-menu > li { margin-bottom: 10px; }
.popup-menu .mobile-menu .elementor-nav-menu > li > .sub-menu > li:last-child { margin-bottom: 0; }

.popup-menu .mobile-menu .elementor-nav-menu > li > .sub-menu > li > a {
  padding: 10px 0 10px 20px;
  transition: opacity 0.3s ease, padding-left 0.3s ease;
}

/* --- 3rd level ------------------------------------------------------------*/
.popup-menu .mobile-menu .elementor-nav-menu > li > .sub-menu .sub-menu > li {
  margin-bottom: 10px;
}

.popup-menu .mobile-menu .elementor-nav-menu > li > .sub-menu .sub-menu > li:last-child {
  margin-bottom: 0;
}

.popup-menu .mobile-menu .elementor-nav-menu > li > .sub-menu .sub-menu > li > a {
  margin: 10px 0;
  padding-left: 40px;
  transition: opacity 0.3s ease, padding-left 0.3s ease;
}

/* --- Dim non-hovered items within each level when that level is hovered - */

/* Top level */
.popup-menu .mobile-menu .elementor-nav-menu:hover > li > a { opacity: 0.5; }
.popup-menu .mobile-menu .elementor-nav-menu:hover > li > a:hover { opacity: 1; }

/* 2nd level */
.popup-menu .mobile-menu .elementor-nav-menu > li > .sub-menu:hover > li > a { opacity: 0.5; }
.popup-menu .mobile-menu .elementor-nav-menu > li > .sub-menu:hover > li > a:hover { opacity: 1; }

/* 3rd level */
.popup-menu .mobile-menu .elementor-nav-menu > li > .sub-menu .sub-menu:hover > li > a { opacity: 0.5; }
.popup-menu .mobile-menu .elementor-nav-menu > li > .sub-menu .sub-menu:hover > li > a:hover { opacity: 1; }

/* --- Active state: 1st level (CSS only) ----------------------------------
   WordPress marks the current page with .current-menu-item and every
   parent above it with .current-menu-ancestor. When the menu contains a
   current page, all 1st-level items drop to 0.5 and the active one stays
   black at full opacity (even while the menu is hovered/touched).
   :where() keeps the dim rule's specificity equal to the hover rules
   above, so a hovered item still goes back to full. */

.popup-menu .mobile-menu .elementor-nav-menu:where(:has(.current-menu-item)) > li > a {
  opacity: 0.5;
}

.popup-menu .mobile-menu .elementor-nav-menu > li:is(.current-menu-item, .current-menu-ancestor) > a {
  opacity: 1;
  color: var(--color-black) !important;
}

.popup-menu .mobile-menu .elementor-nav-menu > li:is(.current-menu-item, .current-menu-ancestor) > a .sub-arrow svg {
  fill: var(--color-black) !important;
}

/* --- Active state: sub menus (2nd + 3rd level, CSS only) -----------------
   Same effect per level: when a sub menu contains the current page, its
   links drop to 0.5 and the active one (or the parent leading to it,
   e.g. "Meet the Team") stays black at full opacity.
   !important keeps the active link at full while the sub menu is
   hovered/touched, matching the 1st level. */

.popup-menu .mobile-menu .sub-menu:where(:has(.current-menu-item)) > li > a {
  opacity: 0.5;
}

.popup-menu .mobile-menu .sub-menu > li:is(.current-menu-item, .current-menu-ancestor) > a {
  opacity: 1 !important;
  color: var(--color-black) !important;
}

.popup-menu .mobile-menu .sub-menu > li:is(.current-menu-item, .current-menu-ancestor) > a .sub-arrow svg {
  fill: var(--color-black) !important;
}

/* ==========================================================================
   15. SERVICE CATEGORY DROPDOWN
   ========================================================================== */

/* Hide the original Elementor tab bar so only the custom dropdown shows.
   IMPORTANT: `.service-category-dropdown` must be applied to the tabs WIDGET
   wrapper (the element with class `elementor-widget-n-tabs`), not to an
   individual tab panel, or this rule and the JS controller both silently
   no-op. */
.service-category-dropdown .e-n-tabs-heading {
  display: none;
}

/* Bump up the featured image height specifically inside this layout */
.service-category-dropdown .card-loop-01 .featured img {
  height: 325px !important;
}

/* --- Wrapper --------------------------------------------------------------*/
.service-category-select {
  position: relative;
  max-width: 380px;
  margin: 0 auto;
}

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

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

.service-category-select-label {
  font-weight: 500;
  color: var(--color-white);
  font-size: 0.875rem;
}

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

.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;
  display: none;
  flex-direction: column;
  gap: 4px;
  max-height: min(400px, 60vh); /* scrolls when the list is longer than this */
  padding: 8px;
  background-color: var(--color-black);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 20;
  overflow-y: auto;
  overscroll-behavior: contain; /* stops the page scrolling when the list hits its end */
}

.service-category-select-menu {
  scrollbar-width: thin;
  scrollbar-color: var(--color-dark-gray) transparent;
}

.service-category-select-menu::-webkit-scrollbar { width: 6px; }
.service-category-select-menu::-webkit-scrollbar-thumb {
  background: var(--color-dark-gray);
  border-radius: 10px;
}

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

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

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

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

/* Checkmark on the active option */
.service-category-select-option.is-active::after {
  content: "";
  width: 16px;
  height: 16px;
  margin-left: auto;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M13.333 4 6 11.333 2.667 8' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M13.333 4 6 11.333 2.667 8' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 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. POST ARCHIVE / SINGLE POST
   ========================================================================== */

.post-loop .category .elementor-post-info .elementor-post-info__terms-list-item,
.single-post .category .elementor-post-info .elementor-post-info__terms-list-item {
  display: block;
  padding: 9px 14px 8px 14px;
  background: var(--color-soft-gray);
  border-radius: 6px;
}

.single-post-content .quote-block.wp-block-paragraph {
  margin-top: 20px;
  padding: 25px 30px;
  background: var(--color-soft-gray);
  border-left: 3px solid var(--color-black);
  color: var(--color-black);
  font-family: 'Bodoni 72', serif;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.6px;
  line-height: 1.54em;
}

.single-post-content .wp-block-group.outline-block {
  margin-top: 60px;
  padding: 30px;
  border: 1px solid var(--color-light-gray);
  border-radius: 9px;
}

.single-post-content .wp-block-group.outline-block h3 {
  margin: 0 0 20px !important;
}

.single-post-content .wp-block-group.outline-block .wp-block-list {
  margin: 0 !important;
  padding-left: 25px;
}

.single-post-content .wp-block-group.outline-block .wp-block-list li {
  margin-bottom: 15px;
}

.single-post-content .wp-block-group.outline-block .wp-block-list li:last-child {
  margin: 0;
}

/* ==========================================================================
   17. MEMBERSHIP
   ========================================================================== */

.memberships .plan-block .price span {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.62em;
  color: var(--color-dark-gray);
}

.memberships .plan-block .plan-benefits p {
  padding-left: 20px;
  border-left: 1px solid var(--color-dark-gray);
}

.memberships .plan-block:hover .price .elementor-heading-title,
.memberships .plan-block:hover .price .elementor-heading-title span,
.memberships .plan-block:hover .plan-benefits p,
.memberships .plan-block:hover .heading .elementor-icon-box-title,
.memberships .plan-block:hover .heading .elementor-icon-box-description {
  color: var(--color-white);
}

.memberships .plan-block:hover .btn .elementor-button {
  background: var(--color-white);
  color: var(--color-black);
}

/* ==========================================================================
   18. MEDIA QUERIES
   ========================================================================== */

/* --- Tablet and below -------------------------------------------------- */
@media (max-width: 1024px) {
  .ft-location .map-embed iframe { border-radius: 0 0 18px 18px; }
}

/* --- Mobile -------------------------------------------------------------*/
@media (max-width: 767px) {
  .sticky-cta { box-shadow: none; }

  .sticky-cta .btn-sticky .elementor-button {
    padding: 13px 24px 13px 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  .list-count .list .elementor-icon-box-wrapper { gap: 24px; }

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