/* Natural Pro SMP — vanilla nav / FAQ / gallery / stretch (replaces Elementor+UAEL JS) */

/* ---- Desktop header Contact Us (white outline pill, top-right) ---- */
/* Resting state stays Elementor-owned; hover/focus only. */
.elementor-3036 .elementor-element.elementor-element-88d8068 .elementor-button {
  cursor: pointer;
  transition:
    background-color 150ms ease,
    color 150ms ease,
    border-color 150ms ease,
    fill 150ms ease;
}
.elementor-3036 .elementor-element.elementor-element-88d8068 .elementor-button:hover,
.elementor-3036 .elementor-element.elementor-element-88d8068 .elementor-button:focus-visible {
  background-color: #f5b31b;
  color: #111;
  fill: #111;
  border-color: #f5b31b;
}

/* ---- Desktop dropdowns (CSS only; Elementor hid .elementor-nav-menu ul) ---- */
.elementor-nav-menu--main .elementor-nav-menu {
  position: relative;
  z-index: 100;
}
.elementor-nav-menu--main .elementor-nav-menu > li {
  position: relative;
}
.elementor-nav-menu--main .elementor-nav-menu ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 14em;
  z-index: 1000;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.elementor-nav-menu--main .elementor-nav-menu > li:hover > ul,
.elementor-nav-menu--main .elementor-nav-menu > li:focus-within > ul {
  display: block;
}
.elementor-nav-menu--main .elementor-nav-menu li li {
  position: relative;
}
.elementor-nav-menu--main .elementor-nav-menu li li > ul {
  top: 0;
  left: 100%;
}
.elementor-nav-menu--main .elementor-nav-menu li li:hover > ul,
.elementor-nav-menu--main .elementor-nav-menu li li:focus-within > ul {
  display: block;
}
.elementor-nav-menu--main .elementor-nav-menu--dropdown a {
  display: block;
  padding: 0.65em 1em;
  color: #1a1a1a;
  text-decoration: none;
  white-space: nowrap;
}
.elementor-nav-menu--main .elementor-nav-menu--dropdown a:hover,
.elementor-nav-menu--main .elementor-nav-menu--dropdown a:focus {
  background: #f5b31b;
  color: #1a1a1a;
}

/* ---- Top utility strip (address · hours · call) ---- */
/* Brand dark green: #092215 (same family as burger + mobile header) */
.npro-top-strip {
  display: none;
  box-sizing: border-box;
  background: #092215;
}
.npro-top-strip__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.88);
  font: 400 0.75rem/1.2 "DM Sans", system-ui, sans-serif;
  letter-spacing: 0.01em;
}
.npro-top-strip__item:hover,
.npro-top-strip__item:focus {
  color: #fff;
}
.npro-top-strip__address,
.npro-top-strip__hours {
  color: rgba(255, 255, 255, 0.88);
}
.npro-top-strip__call-label {
  color: rgba(255, 255, 255, 0.88);
  font-weight: 400;
}
/* Gold only on the phone number (existing brand cue) */
.npro-top-strip__phone {
  color: #ffbc00;
  font-weight: 700;
}
.npro-info-icon {
  flex: 0 0 auto;
  display: block;
  color: rgba(255, 255, 255, 0.72);
}

/*
 * Mobile/tablet top stack: ONE absolute overlay, two in-flow rows.
 * Heights self-accommodate (no magic top offsets / no logo clip under strip).
 * 1) .npro-top-strip  2) .npro-mobile-bar
 */
.npro-top-stack {
  display: none;
  box-sizing: border-box;
}

/* Mobile/tablet: compact two-line strip (address; hours · phone). Replaces
   Elementor phone-only cluster (ac0a4de). Desktop block below is unchanged. */
@media (max-width: 1024px) {
  .npro-top-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 10050;
  }
  /* Strip is in-flow row 1 — height = whatever font metrics need */
  .npro-top-stack .npro-top-strip,
  .npro-top-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 0.65rem;
    row-gap: 0.4rem;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    z-index: auto;
    width: 100%;
    min-height: 0;
    padding: 0.6rem 0.85rem 0.65rem;
    box-sizing: border-box;
    flex: 0 0 auto;
  }
  .npro-top-strip__item {
    gap: 0.35rem;
    font: 400 13px/1.45 "DM Sans", system-ui, sans-serif;
    letter-spacing: 0.01em;
  }
  /* Line 1: full-width address */
  .npro-top-strip__address {
    flex: 1 0 100%;
    justify-content: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Line 2: hours + phone (same row) */
  .npro-top-strip__hours,
  .npro-top-strip__call {
    flex: 0 0 auto;
  }
  .npro-top-strip__hours::after {
    content: "·";
    margin-left: 0.55rem;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 400;
  }
  .npro-top-strip__call-label {
    display: none;
  }
  .npro-top-strip .npro-info-icon {
    width: 12px;
    height: 12px;
  }
  /* Drop Elementor phone-only mobile strip (icon + Call us + number) */
  .elementor-element-ac0a4de {
    display: none !important;
  }
  /* Legacy Elementor mobile header shell — bar moved into .npro-top-stack */
  .elementor-3036 .elementor-element.elementor-element-58c60f1 {
    display: none !important;
  }
}
@media (min-width: 1025px) {
  /* Desktop: stack is a passthrough; only the strip paints (absolute top) */
  .npro-top-stack {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 10050;
    pointer-events: none;
  }
  .npro-top-stack .npro-top-strip,
  .npro-top-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    position: relative;
    width: 100%;
    min-height: 48px;
    padding: 0.75rem 4%;
    box-sizing: border-box;
    pointer-events: auto;
    /* Desktop: hero video plays under the strip; thin rule separates it */
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  }
  .npro-top-stack .npro-top-strip .npro-top-strip__item,
  .npro-top-strip .npro-top-strip__item {
    font: 400 0.8125rem/1.45 "DM Sans", system-ui, sans-serif;
  }
  .npro-top-stack .npro-mobile-bar {
    display: none !important;
  }
  /* Push logo/nav row below the strip (header was absolute top:0).
     Elementor's own ~60px top padding read as a big dead gap — trim it. */
  .elementor-3036 .elementor-element.elementor-element-6dc8b37 {
    top: 48px !important;
    padding-top: 18px !important;
  }
  /* Phone moved into strip — hide any leftover Elementor call cluster */
  .elementor-element-724fd4f {
    display: none !important;
  }
}

/* ---- Mobile hamburger (in mobile header bar) ---- */
.npro-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0.35rem;
  margin: 0;
  cursor: pointer;
  line-height: 0;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.npro-menu-toggle:focus-visible {
  outline: 2px solid #f5b31b;
  outline-offset: 3px;
}
/* Real DOM bars (not CSS background) so empty-button never ships mute.
   !important: Elementor/theme span rules otherwise collapse width to 0. */
.npro-menu-toggle__bars {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 5px !important;
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  height: 14px !important;
  flex: 0 0 22px !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
}
.npro-menu-toggle__bar {
  display: block !important;
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  height: 2px !important;
  min-height: 2px !important;
  flex: 0 0 2px !important;
  border-radius: 1px !important;
  background: #fff !important;
  background-color: #fff !important;
  box-sizing: border-box !important;
}

/*
 * Clean mobile header bar (logo left + hamburger right).
 * Replaces Elementor's 3-col grid + grid-column-start:2 logo hack that put the
 * toggle mid-hero after phase-2 layout overrides.
 */
.npro-mobile-bar {
  display: none;
  box-sizing: border-box;
}
.npro-mobile-bar__logo {
  display: block;
  flex: 0 0 auto;
  max-width: 140px;
  line-height: 0;
}
.npro-mobile-bar__logo img {
  display: block;
  width: 127px;
  max-width: 100%;
  height: auto;
}

@media (max-width: 1024px) {
  /* In-flow row 2 of .npro-top-stack — no top offset */
  .npro-top-stack .npro-mobile-bar,
  .npro-mobile-bar {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 56px;
    padding: 12px 16px;
    gap: 12px;
    flex: 0 0 auto;
    position: relative;
  }
  /* Transparent 44px hit target; white bar spans read over strip + hero video */
  .npro-menu-toggle {
    display: inline-flex !important;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    margin: 0;
    border-radius: 0;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
    overflow: visible !important;
    line-height: normal !important;
  }
}

/* ---- Slide-in mobile panel ---- */
.npro-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99980;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.npro-nav-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}
.npro-mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 99990;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: min(88vw, 360px);
  max-width: 100vw;
  height: 100%;
  max-height: 100dvh;
  /* Brand dark green (matches top strip / burger), not near-black */
  background: #092215;
  color: #fff;
  transform: translateX(100%);
  transition: transform 0.28s ease;
  /* Clip horizontal overflow so CTA/phone never bleed past the panel edge */
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.35);
  padding: 1rem 0 2rem;
}
.npro-mobile-nav.is-open {
  transform: translateX(0);
}
.npro-mobile-nav *,
.npro-mobile-nav *::before,
.npro-mobile-nav *::after {
  box-sizing: border-box;
}
/* Close row only — no logo in panel (logo stays in header bar) */
.npro-mobile-nav__header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 0.5rem 0.85rem 1rem 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  position: relative;
  z-index: 2;
  max-width: 100%;
  flex-shrink: 0;
}
/* Close × — plain white, hairline grey border (gold reserved for CONTACT US only) */
.npro-mobile-nav__close {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  flex-shrink: 0 !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px;
  min-height: 44px;
  margin: 0 !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-family: system-ui, -apple-system, sans-serif !important;
  font-size: 1.75rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  cursor: pointer;
  padding: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  position: relative;
  z-index: 3;
}
.npro-mobile-nav__close-icon {
  display: block;
  width: 18px;
  height: 18px;
  color: #fff;
  pointer-events: none;
}
.npro-mobile-nav__close:hover,
.npro-mobile-nav__close:focus {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}
.npro-mobile-nav__close:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
}
.npro-mobile-nav__list,
.npro-mobile-nav__list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Top-level plain links */
.npro-mobile-nav__list > li > a {
  display: flex !important;
  width: 100%;
  align-items: center;
  padding: 0.95rem 1.25rem;
  color: #fff !important;
  text-decoration: none;
  font: 500 0.95rem/1.3 Montserrat, system-ui, sans-serif !important;
  letter-spacing: 0.02em;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0 !important;
  text-align: left;
  box-shadow: none !important;
  text-transform: none !important;
}
/* Parent row: link (navigate) + chevron (toggle) — split hit areas */
.npro-mobile-nav__list .npro-row {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.npro-mobile-nav__list .npro-row__link {
  display: flex !important;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  padding: 0.95rem 0.5rem 0.95rem 1.25rem;
  color: #fff !important;
  text-decoration: none;
  font: 500 0.95rem/1.3 Montserrat, system-ui, sans-serif !important;
  letter-spacing: 0.02em;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  text-align: left;
  box-shadow: none !important;
  text-transform: none !important;
}
.npro-mobile-nav__list .npro-acc-toggle {
  display: inline-flex !important;
  flex: 0 0 48px;
  flex-shrink: 0 !important;
  align-items: center;
  justify-content: center;
  width: 48px;
  min-width: 48px;
  min-height: 48px;
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  cursor: pointer;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;
}
/* No gold hover/active wash — slightly brighter text only */
.npro-mobile-nav__list a:hover,
.npro-mobile-nav__list a:focus,
.npro-mobile-nav__list .npro-row__link:hover,
.npro-mobile-nav__list .npro-row__link:focus {
  background: transparent !important;
  color: #fff !important;
  font-weight: 600 !important;
}
.npro-mobile-nav__list .npro-acc-toggle:hover,
.npro-mobile-nav__list .npro-acc-toggle:focus {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
}
.npro-mobile-nav__list li.is-open > .npro-row > .npro-row__link {
  font-weight: 600 !important;
  color: #fff !important;
}
.npro-mobile-nav__list .npro-sub {
  display: none;
  background: rgba(255, 255, 255, 0.03);
}
.npro-mobile-nav__list li.is-open > .npro-sub {
  display: block;
}
/* Flat children only — one indent level, no nested accordions */
.npro-mobile-nav__list .npro-sub a {
  display: block;
  padding: 0.8rem 1.25rem 0.8rem 1.85rem;
  color: rgba(255, 255, 255, 0.88) !important;
  text-decoration: none;
  font: 400 0.92rem/1.35 Montserrat, system-ui, sans-serif !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent !important;
}
.npro-mobile-nav__list .npro-sub a:hover,
.npro-mobile-nav__list .npro-sub a:focus {
  color: #fff !important;
  font-weight: 500 !important;
  background: transparent !important;
}
.npro-acc-caret {
  flex: 0 0 auto;
  display: inline-block !important;
  width: 10px !important;
  height: 10px !important;
  border: 0 !important;
  border-right: 2px solid rgba(255, 255, 255, 0.75) !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.75) !important;
  background: transparent !important;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  margin: 0 0 0.2em 0;
  box-sizing: border-box;
}
.npro-mobile-nav__list li.is-open > .npro-row .npro-acc-caret {
  transform: rotate(-135deg);
  margin-bottom: -0.15em;
}

/* Address + hours between menu list and CONTACT US (neutral; gold stays on CTA only) */
.npro-mobile-nav__info {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: auto;
  padding: 1.1rem 1.25rem 0.15rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  max-width: 100%;
  width: 100%;
  flex-shrink: 0;
}
.npro-mobile-nav__address,
.npro-mobile-nav__hours {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.72) !important;
  font: 400 0.8rem/1.35 "DM Sans", system-ui, sans-serif !important;
  text-decoration: none !important;
  letter-spacing: 0.01em;
}
.npro-mobile-nav__address:hover,
.npro-mobile-nav__address:focus {
  color: rgba(255, 255, 255, 0.92) !important;
}
.npro-mobile-nav__info .npro-info-icon {
  margin-top: 0.15em;
  color: rgba(255, 255, 255, 0.55);
}

/* Conversion CTAs at bottom of mobile panel */
.npro-mobile-nav__cta {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 0;
  padding: 1rem 1.25rem 0.5rem;
  border-top: 0;
  max-width: 100%;
  width: 100%;
  flex-shrink: 0;
}
/* ONLY gold element in the panel */
.npro-mobile-nav__contact-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-height: 48px;
  padding: 0.85rem 1rem;
  background: #f5b31b;
  color: #111 !important;
  font: 700 0.95rem/1.2 Montserrat, system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none !important;
  border-radius: 4px;
  box-sizing: border-box;
}
.npro-mobile-nav__contact-btn:hover,
.npro-mobile-nav__contact-btn:focus {
  background: #ffc94a;
  color: #111 !important;
}
/* Phone row — neutral white + hairline grey */
.npro-mobile-nav__call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  padding: 0.65rem 0.75rem;
  color: #fff !important;
  font: 600 1rem/1.2 Montserrat, system-ui, sans-serif;
  letter-spacing: 0.03em;
  text-decoration: none !important;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 4px;
  background: transparent;
  box-sizing: border-box;
}
.npro-mobile-nav__call:hover,
.npro-mobile-nav__call:focus {
  background: rgba(255, 255, 255, 0.06);
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.35);
}
.npro-mobile-nav__phone-icon {
  flex: 0 0 auto;
  display: block;
  color: #fff;
}

body.npro-nav-open {
  overflow: hidden;
}

/* ---- FAQ as details/summary (match UAEL accordion look) ---- */
.npro-faq {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.npro-faq details {
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #fff;
  border-radius: 2px;
}
.npro-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  font-family: Montserrat, system-ui, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.35;
  color: #1a1a1a;
}
.npro-faq summary::-webkit-details-marker {
  display: none;
}
.npro-faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 0.55em;
  height: 0.55em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  margin-bottom: 0.2em;
}
.npro-faq details[open] summary::after {
  transform: rotate(-135deg);
  margin-bottom: -0.1em;
}
.npro-faq .npro-faq__body {
  padding: 0 1.15rem 1.1rem;
  color: #333;
  font-size: 0.95rem;
  line-height: 1.55;
}
.npro-faq .npro-faq__body p {
  margin: 0 0 0.6em;
}
.npro-faq .npro-faq__body p:last-child {
  margin-bottom: 0;
}

/* ---- e-gallery → real image grid ---- */
.elementor-gallery__container.npro-gallery-grid,
.npro-gallery-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  height: auto !important;
  width: 100%;
}
.npro-gallery-grid .e-gallery-item,
.npro-gallery-grid a.npro-gallery-item {
  position: relative !important;
  display: block;
  height: auto !important;
  width: 100% !important;
  overflow: hidden;
  aspect-ratio: 1;
  background: #eee;
}
.npro-gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Full-bleed stretch sections without Elementor JS ---- */
/* Top-level Elementor sections are already body-width; do NOT use 100vw
   (scrollbar/viewport mismatch → document.scrollWidth > clientWidth). */
.elementor-section-stretched {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  left: 0 !important;
  right: 0 !important;
  position: relative;
}

/* Belt: page never pans horizontally (protects against future regressions).
   Root fix above removes the actual overflow; this is defense in depth. */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ---- Entrance classes stripped in HTML; belt-and-braces ---- */
.elementor-invisible {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Background video needs a positioned host */
.elementor-background-video-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.elementor-background-video-hosted {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* YouTube static embeds */
.elementor-wrapper .elementor-video iframe,
.npro-yt-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  display: block;
}

/*
 * Homepage hero only (video bg + "Conquer Hair Loss"): ~70% viewport so the
 * next section peeks below the fold. Overrides Elementor custom CSS
 * (height:100vh; min-height:888px) on .elementor-element-e18fe77.
 * Header/strip overlay absolutely; existing Elementor padding-top keeps
 * headline + CTA clear of the top stack on mobile.
 */
body.home .elementor-element.elementor-element-e18fe77,
.elementor-page-2975 .elementor-element.elementor-element-e18fe77 {
  height: auto !important;
  min-height: 70vh !important; /* fallback */
  min-height: 70svh !important;
  --min-height: 70vh;
  --min-height: 70svh;
  box-sizing: border-box;
  justify-content: center;
}
/*
 * Desktop: Elementor sets --padding-top:0 while the nav header overlays
 * absolutely down to ~190px, so the compressed 70svh hero pushed the H1 up
 * into the nav. Clear the header band (strip 48px + header 142px + gap).
 */
@media (min-width: 1025px) {
  body.home .elementor-element.elementor-element-e18fe77,
  .elementor-page-2975 .elementor-element.elementor-element-e18fe77 {
    --padding-top: 180px;
    padding-top: 180px !important;
    --padding-bottom: 48px;
    padding-bottom: 48px !important;
  }
}

/*
 * Contact page only: "CONTACT US" hero banner ~30% shorter vertically.
 * Elementor baseline: 50vh / 600px / 430px + heavy padding. Content stays centred.
 */
body.page-id-3427 #top-banner-page-template,
body.page-id-3427 .elementor-element.elementor-element-b810dce {
  --min-height: 35vh !important;
  min-height: 35vh !important;
  --padding-top: 126px !important;
  --padding-bottom: 70px !important;
  justify-content: center !important;
  align-items: center !important;
  box-sizing: border-box;
}
@media (max-width: 1470px) {
  body.page-id-3427 #top-banner-page-template,
  body.page-id-3427 .elementor-element.elementor-element-b810dce {
    --padding-top: 0% !important;
    --padding-bottom: 0% !important;
  }
}
@media (max-width: 1024px) {
  body.page-id-3427 #top-banner-page-template,
  body.page-id-3427 .elementor-element.elementor-element-b810dce {
    --min-height: 420px !important;
    min-height: 420px !important;
  }
}
@media (max-width: 767px) {
  body.page-id-3427 #top-banner-page-template,
  body.page-id-3427 .elementor-element.elementor-element-b810dce {
    --min-height: 300px !important;
    min-height: 300px !important;
    --padding-top: 0px !important;
    --padding-bottom: 84px !important;
    justify-content: center !important;
  }
}

/*
 * Footer contact block (template 3312, widget 1ff47bf) has Elementor
 * text-transform:capitalize, which renders the email as
 * "Naturalprosmp@Gmail.Com". Emails stay lowercase.
 */
.elementor-3312 .elementor-element-1ff47bf a[href^="mailto:"] {
  text-transform: none !important;
}

/* Turnstile widget (300x65 fixed) reads oversized in the form card — scale
   it down visually; negative margin collapses the leftover layout space. */
.cf-turnstile {
  transform: scale(0.78);
  transform-origin: 0 0;
  margin-bottom: -14px;
}

/* Kit default button hover is a washed sage (#7F8C80) — replace sitewide with
   a deepened brand gold. Works on dark hero, dark green bands, and white. */
.elementor-kit-8 .elementor-button:hover,
.elementor-kit-8 .elementor-button:focus {
  background-color: #e2a604 !important;
  color: #131315 !important;
  transition: background-color 150ms ease, color 150ms ease;
}

/* ==========================================================================
   Homepage: Contact Us founders photo + SMP collage rebalance (2026-07-29)
   ========================================================================== */

/* White Contact Us column: stack content, photo fills remaining height under CTA */
@media (min-width: 1025px) {
  .elementor-2975 .elementor-element.elementor-element-2a49c88,
  .elementor-page-2975 .elementor-element.elementor-element-2a49c88 {
    align-items: stretch !important;
  }
  .elementor-2975 .elementor-element.elementor-element-70c2eaf,
  .elementor-page-2975 .elementor-element.elementor-element-70c2eaf {
    height: 100%;
    align-self: stretch;
    display: flex !important;
    flex-direction: column;
    box-sizing: border-box;
  }
  .elementor-2975 .elementor-element.elementor-element-eab382e,
  .elementor-page-2975 .elementor-element.elementor-element-eab382e {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    min-height: 100%;
    gap: 16px;
  }
  .elementor-2975 .npro-contact-photo,
  .elementor-page-2975 .npro-contact-photo {
    width: 100%;
    margin-top: 8px;
    flex: 1 1 auto;
    min-height: 280px;
    display: flex;
    align-items: stretch;
  }
  .elementor-2975 .npro-contact-photo .elementor-widget-container,
  .elementor-page-2975 .npro-contact-photo .elementor-widget-container {
    width: 100%;
    height: 100%;
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    padding: 0 !important;
    margin: 0 !important;
  }
  .elementor-2975 .npro-contact-photo__img,
  .elementor-page-2975 .npro-contact-photo__img {
    width: 100%;
    height: 100%;
    min-height: 280px;
    max-height: none;
    object-fit: cover;
    object-position: center 28%;
    border-radius: 8px;
    display: block;
  }
}

@media (max-width: 1024px) {
  .elementor-2975 .elementor-element.elementor-element-eab382e,
  .elementor-page-2975 .elementor-element.elementor-element-eab382e {
    display: flex !important;
    flex-direction: column;
    height: auto;
    min-height: 0;
    gap: 16px;
  }
  .elementor-2975 .npro-contact-photo,
  .elementor-page-2975 .npro-contact-photo {
    width: 100%;
    flex: 0 0 auto;
    min-height: 0;
    margin-top: 16px;
  }
  .elementor-2975 .npro-contact-photo .elementor-widget-container,
  .elementor-page-2975 .npro-contact-photo .elementor-widget-container {
    padding: 0 !important;
    margin: 0 !important;
  }
  .elementor-2975 .npro-contact-photo__img,
  .elementor-page-2975 .npro-contact-photo__img {
    width: 100%;
    height: auto;
    min-height: 200px;
    max-height: 360px;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center 28%;
    border-radius: 8px;
    display: block;
  }
}

/* SMP collage after founders (gallery-1) moved to Contact Us:
   top = treatment close-up full width; bottom = three equal portraits. */
.elementor-2975 .npro-home-smp-grid,
.elementor-page-2975 .npro-home-smp-grid {
  --e-con-grid-template-columns: repeat(3, 1fr) !important;
  --e-con-grid-template-rows: auto !important;
  --gap: 16px 16px !important;
  --row-gap: 16px !important;
  --column-gap: 16px !important;
}

.elementor-2975 .npro-home-smp-grid > .elementor-element-0efbf68,
.elementor-page-2975 .npro-home-smp-grid > .elementor-element-0efbf68 {
  grid-column: 1 / -1 !important;
}

.elementor-2975 .npro-home-smp-grid > .elementor-element-0efbf68 img,
.elementor-page-2975 .npro-home-smp-grid > .elementor-element-0efbf68 img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  object-position: center center;
}

/* Studio treatment (gallery-3): bias crop left so the foreground client stays in frame */
.elementor-2975 .npro-home-smp-grid > .elementor-element-e190958 img,
.elementor-page-2975 .npro-home-smp-grid > .elementor-element-e190958 img,
.elementor-2975 .elementor-element.elementor-element-e190958 img,
.elementor-page-2975 .elementor-element.elementor-element-e190958 img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  object-position: left center;
}

.elementor-2975 .npro-home-smp-grid > .elementor-element-5d3a38a img,
.elementor-page-2975 .npro-home-smp-grid > .elementor-element-5d3a38a img,
.elementor-2975 .npro-home-smp-grid > .elementor-element-caecc86 img,
.elementor-page-2975 .npro-home-smp-grid > .elementor-element-caecc86 img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  object-position: center center;
}

@media (max-width: 1024px) {
  .elementor-2975 .npro-home-smp-grid,
  .elementor-page-2975 .npro-home-smp-grid {
    --e-con-grid-template-columns: repeat(2, 1fr) !important;
  }
  .elementor-2975 .npro-home-smp-grid > .elementor-element-0efbf68,
  .elementor-page-2975 .npro-home-smp-grid > .elementor-element-0efbf68 {
    grid-column: 1 / -1 !important;
  }
  .elementor-2975 .npro-home-smp-grid > .elementor-element-0efbf68 img,
  .elementor-page-2975 .npro-home-smp-grid > .elementor-element-0efbf68 img {
    height: 360px;
  }
  .elementor-2975 .npro-home-smp-grid > .elementor-element-e190958 img,
  .elementor-page-2975 .npro-home-smp-grid > .elementor-element-e190958 img,
  .elementor-2975 .elementor-element.elementor-element-e190958 img,
  .elementor-page-2975 .elementor-element.elementor-element-e190958 img,
  .elementor-2975 .npro-home-smp-grid > .elementor-element-5d3a38a img,
  .elementor-page-2975 .npro-home-smp-grid > .elementor-element-5d3a38a img,
  .elementor-2975 .npro-home-smp-grid > .elementor-element-caecc86 img,
  .elementor-page-2975 .npro-home-smp-grid > .elementor-element-caecc86 img {
    height: 360px;
  }
  /* Last portrait full-width under the pair so tablet stays balanced */
  .elementor-2975 .npro-home-smp-grid > .elementor-element-caecc86,
  .elementor-page-2975 .npro-home-smp-grid > .elementor-element-caecc86 {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .elementor-2975 .npro-home-smp-grid,
  .elementor-page-2975 .npro-home-smp-grid {
    --e-con-grid-template-columns: repeat(1, 1fr) !important;
  }
  .elementor-2975 .npro-home-smp-grid > .elementor-element-0efbf68,
  .elementor-page-2975 .npro-home-smp-grid > .elementor-element-0efbf68,
  .elementor-2975 .npro-home-smp-grid > .elementor-element-caecc86,
  .elementor-page-2975 .npro-home-smp-grid > .elementor-element-caecc86 {
    grid-column: auto !important;
  }
  .elementor-2975 .npro-home-smp-grid > .elementor-element-0efbf68 img,
  .elementor-page-2975 .npro-home-smp-grid > .elementor-element-0efbf68 img,
  .elementor-2975 .npro-home-smp-grid > .elementor-element-e190958 img,
  .elementor-page-2975 .npro-home-smp-grid > .elementor-element-e190958 img,
  .elementor-2975 .elementor-element.elementor-element-e190958 img,
  .elementor-page-2975 .elementor-element.elementor-element-e190958 img,
  .elementor-2975 .npro-home-smp-grid > .elementor-element-5d3a38a img,
  .elementor-page-2975 .npro-home-smp-grid > .elementor-element-5d3a38a img,
  .elementor-2975 .npro-home-smp-grid > .elementor-element-caecc86 img,
  .elementor-page-2975 .npro-home-smp-grid > .elementor-element-caecc86 img {
    height: 400px;
  }
}