/* Static-mirror overrides: restore interactions that Duda's stripped runtime JS used to drive.
   Scoped + !important to win specificity against Duda's generated CSS. */

/* Smooth the scroll-triggered header background change (toggled by site.js) */
#dm .dmHeader { transition: background-color 0.35s ease; }

/* --- Desktop nav: open sub-menu on hover / keyboard focus --- */
#dm .unifiednav__item_has-sub-nav:hover > .unifiednav__container_sub-nav,
#dm .unifiednav__item_has-sub-nav:focus-within > .unifiednav__container_sub-nav,
#dm .unifiednav__item_has-sub-nav.is-open > .unifiednav__container_sub-nav,
#dm .unifiednav__item_has-sub-nav:hover .unifiednav__container_sub-nav,
#dm .unifiednav__item_has-sub-nav.is-open .unifiednav__container_sub-nav {
  opacity: 1 !important;
  max-height: 2000px !important;
  visibility: visible !important;
  pointer-events: auto !important;
  overflow: visible !important;
}

/* Scroll-reveal animations. Duda hides [data-anim] elements with visibility:hidden and plays
   them (fadeInCombo) as they enter the viewport. We override that visibility, then site.js replays
   the reveal on scroll. The pre-animation opacity:0 only applies when JS is active (html.ft-js),
   so no-JS users always see the content. */
#dm .dmDesktopBody:not(.editGrid) [data-anim-desktop]:not([data-anim-desktop="none"]),
#dm [data-anim-desktop]:not([data-anim-desktop="none"]),
[data-anim-desktop]:not([data-anim-desktop="none"]),
[data-anim-extended],
[data-anim-mobile]:not([data-anim-mobile="none"]) {
  visibility: visible !important;
}
.splide, #dm .splide { visibility: visible !important; }

html.ft-js [data-anim-desktop]:not([data-anim-desktop="none"]),
html.ft-js [data-anim-mobile]:not([data-anim-mobile="none"]) { opacity: 0; }
[data-anim-desktop].ft-anim-in,
[data-anim-mobile].ft-anim-in {
  animation: ft-fadeInCombo 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes ft-fadeInCombo {
  from { opacity: 0; transform: translateY(42px); }
  to   { opacity: 1; transform: none; }
}

/* Safety: never let an inline opacity:0 leave real content invisible (popups/overlays excepted) */
#dm .hasAnimations [style*="opacity:0"]:not(#dmPopup):not(.layout-drawer-overlay) { opacity: 1 !important; }
#dm .dmPhotoGalleryThumbs .image-container { opacity: 1 !important; transform: none !important; }

/* --- Mobile hamburger drawer (toggled by site.js) --- */
body.site-drawer-open { overflow: hidden; }
.site-drawer-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 99998;
}
body.site-drawer-open .site-drawer-overlay { opacity: 1; pointer-events: auto; }
.site-drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: 320px; max-width: 86vw;
  background: #fff; box-shadow: -4px 0 24px rgba(0,0,0,.18);
  transform: translateX(100%); transition: transform .28s ease; z-index: 99999;
  overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 72px 24px 32px;
}
body.site-drawer-open .site-drawer { transform: translateX(0); }
.site-drawer a {
  display: block; padding: 13px 4px; font-size: 17px; color: #2b2b2b;
  text-decoration: none; border-bottom: 1px solid #ececec;
}
.site-drawer a:hover { color: #000; }
.site-drawer__close {
  position: absolute; top: 18px; right: 20px; width: 34px; height: 34px;
  background: none; border: 0; cursor: pointer; font-size: 30px; line-height: 1; color: #333;
}

/* --- Icon glyphs (Duda's runtime injected these ::before content maps; restored statically) --- */
.dm-social-icons-facebook::before  { content: "\ea90"; font-family: "dm-social-icons" !important; }
.dm-social-icons-instagram::before { content: "\ea92"; font-family: "dm-social-icons" !important; }
.dm-social-icons-twitter::before   { content: "\ea96"; font-family: "dm-social-icons" !important; }
.dm-social-icons-email::before     { content: "\eace"; font-family: "dm-social-icons" !important; }
.dm-social-icons-whatsapp::before  { content: "\e907"; font-family: "dm-social-icons" !important; }
.dm-social-icons-linkedin::before  { content: "\f0e1"; font-family: "dm-social-icons" !important; }
.dm-common-icons-close::before     { content: "\e901"; font-family: "dm-common-icons" !important; }

/* --- Gallery lightbox --- */
.site-lightbox {
  position: fixed; inset: 0; background: rgba(0,0,0,.9); display: none;
  align-items: center; justify-content: center; z-index: 100000; cursor: zoom-out;
}
.site-lightbox.open { display: flex; }
.site-lightbox img { max-width: 92vw; max-height: 92vh; box-shadow: 0 8px 40px rgba(0,0,0,.5); }
.site-lightbox__close { position: absolute; top: 22px; right: 30px; color: #fff; font-size: 40px; cursor: pointer; line-height: 1; }

/* --- Promo popup (Lira Clinical). Duda loaded this dynamically via its runtime; rebuilt statically. --- */
.ft-popup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: none; align-items: center; justify-content: center; z-index: 1000000999; padding: 16px; }
.ft-popup-overlay.ft-open { display: flex; }
.ft-popup__dialog { position: relative; width: 520px; max-width: 94vw; max-height: 92vh; overflow-y: auto; background: #fff; border-radius: 10px; padding: 20px; box-shadow: 0 12px 50px rgba(0,0,0,.45); animation: ft-pop-in .3s ease; }
@keyframes ft-pop-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.ft-popup__art { width: 100%; aspect-ratio: 1125 / 1408; max-height: 74vh; background-size: contain; background-repeat: no-repeat; background-position: center; border-radius: 6px; }
.ft-popup__actions { position: static; margin-top: 16px; display: flex; gap: 14px; justify-content: center; }
.ft-popup__btn { flex: 1 1 0; max-width: 158px; height: 45px; display: flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 15px; text-decoration: none; letter-spacing: .3px; }
.ft-popup__btn--call { background: rgb(17,44,72); color: #fff; }
.ft-popup__btn--learn { background: #fff; color: rgb(17,44,72); border: 1px solid rgb(17,44,72); }
.ft-popup__close { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; border: 0; background: rgba(255,255,255,.9); border-radius: 50%; font-size: 22px; line-height: 28px; text-align: center; cursor: pointer; color: #333; z-index: 2; box-shadow: 0 1px 4px rgba(0,0,0,.2); }

/* --- Testimonials. Duda injected these customer reviews at runtime; rebuilt statically by site.js. --- */
.ft-testimonials { padding: 24px 5% 72px; }
.ft-testimonials__grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; align-items: stretch; }
.ft-tcard { background: #fff; border-radius: 8px; padding: 38px 34px; box-shadow: 0 0 11px rgba(0,0,0,.22); display: flex; flex-direction: column; justify-content: center; margin: 0; }
.ft-tcard__name { font-family: "Tenor Sans", serif; font-size: 20px; color: rgb(73,81,78); line-height: 1.25; }
.ft-tcard__loc { font-family: "Tenor Sans", serif; font-size: 18px; font-weight: 700; color: #000; margin-bottom: 20px; }
.ft-tcard__quote { font-family: "Outfit", sans-serif; font-size: 16px; font-style: italic; color: rgb(73,81,78); line-height: 1.55; margin: 0; }
@media (max-width: 900px) { .ft-testimonials__grid { grid-template-columns: 1fr; gap: 22px; } }

/* ==========================================================================
   MOBILE RESPONSIVE LAYER
   Duda shipped only the DESKTOP runtime; its real mobile DOM/CSS package was
   never mirrored, and <body> is hardcoded .dmDesktopBody. Legacy .dmRespRow
   grids are gated on device-body classes (never .dmMobileBody) so they don't
   stack. Flex sections (.flex-element / group_*) already reflow via their own
   viewport @media(max-width:767px) rules — we intentionally do NOT touch those.
   ========================================================================== */

/* ---- 0. Global overflow + media reset (all sizes) ---- */
html, body { max-width: 100%; overflow-x: hidden; }
#dm img, #dm video, #dm iframe, #dm .dmForm iframe { max-width: 100%; }
#dm img:not([width]) { height: auto; }

/* ---- 1. NAV SWAP — <=1024px ----
   Hide the 768px-min-width desktop header (source of horizontal scroll + a
   duplicate header) and reveal the real mobile hamburger bar + button so the
   existing site.js .site-drawer works. */
@media (max-width: 1024px) {
  #dm .dmHeaderContainer.showOnLarge,
  .dmHeaderContainer.showOnLarge { display: none !important; }
  #dm .dmHeaderContainer { min-width: 0 !important; }

  /* Release Duda's fixed 768px desktop canvas so the page can shrink to the viewport */
  #dm .dmInner, #dmStyle_innerContainer { min-width: 0 !important; }
  #dm .dmLayoutWrapper { width: 100% !important; min-width: 0 !important; }

  #hamburger-header-container { display: block !important; }
  #hamburger-header-container #hamburger-header { min-height: 48px; }
  /* Render the hamburger as 3 evenly-spaced lines (not one squashed bar) */
  #layout-drawer-hamburger {
    display: flex !important; flex-direction: column;
    justify-content: space-between !important; align-items: stretch;
    padding: 12px 8px !important; box-sizing: border-box;
  }
  #layout-drawer-hamburger .hamburger__slice {
    height: 2px !important; min-height: 2px; border: 0 !important;
    background: currentColor !important; border-radius: 2px;
  }
  #hamburger-header-container .imageWidget img { max-height: 40px; width: auto; }
}
@media (min-width: 1025px) {
  #layout-drawer-hamburger,
  #hamburger-header-container { display: none !important; }
}

/* ---- 2. SECTION REFLOW (legacy .dmRespRow grids only) — <=767px ---- */
@media (max-width: 767px) {
  #dm .dmRespRow .dmRespColsWrapper,
  #dm .dmRespDesignRow .dmRespColsWrapper {
    display: block !important;
    max-width: 100% !important;
    padding-left: 5%; padding-right: 5%;
  }
  #dm .dmRespRow .dmRespCol,
  #dm .dmRespDesignRow .dmRespDesignCol {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    float: none !important;
    left: 0 !important; right: 0 !important;
  }
  #dm .dmRespRow .dmRespCol.empty-column { display: none !important; }
  #dm .dmRespRow:not(.fullBleedMode) { min-height: 0 !important; }
  #dm .dmRespCol > .dmWidget { width: 100% !important; max-width: 100% !important; }
}

/* ---- 3. HERO — <=767px ---- */
@media (max-width: 767px) {
  #dm .dmRespRow.fullBleedMode.hasBackgroundOverlay {
    min-height: auto !important;
    padding: 96px 5% 44px !important;
    background-size: cover !important;
    background-position: center center !important;
  }
  #dm .dmRespRow.fullBleedMode .dmRespCol,
  #dm .dmRespRow.fullBleedMode .dmNewParagraph,
  #dm .dmRespRow.fullBleedMode .dmCustomHtml { text-align: center !important; }
  #dm .dmRespRow.fullBleedMode .dmWidget[class*="cta-button"] { margin: 18px auto 0 !important; }
}

/* ---- 4. TYPOGRAPHY — <=767px (clamp so headings can't overflow full-width) ---- */
@media (max-width: 767px) {
  #dm h1, #dm h1 * { font-size: clamp(1.6rem, 6.4vw, 2rem) !important;   line-height: 1.2 !important; }
  #dm h2, #dm h2 * { font-size: clamp(1.35rem, 5.2vw, 1.7rem) !important; line-height: 1.25 !important; }
  #dm h3, #dm h3 * { font-size: clamp(1.15rem, 4.4vw, 1.4rem) !important; line-height: 1.3 !important; }
  #dm h4, #dm h4 * { font-size: clamp(1.05rem, 3.6vw, 1.2rem) !important; }
  #dm h1, #dm h2, #dm h3, #dm h4 { overflow-wrap: break-word; word-break: break-word; }
  #dm .dmNewParagraph p, #dm .dmNewParagraph span { line-height: 1.6; }
}

/* ---- 5. BUTTONS / CTA — <=767px (44px tap target, never exceed viewport) ---- */
@media (max-width: 767px) {
  #dm a.dmWidget[class*="cta-button"],
  #dm .dmButtonLink,
  #dm .dmformsubmit input[type="submit"] {
    min-height: 44px !important;
    display: flex; align-items: center; justify-content: center;
    max-width: 100% !important;
  }
  #dm a.dmWidget[class*="cta-button"] { width: min(280px, 100%) !important; }
}

/* ---- 6. FOOTER — <=767px (flex groups have no mobile rules; stack to one column) ---- */
@media (max-width: 767px) {
  #dm .dmFooterContainer .flex-element.grid,
  #dm .dmFooterContainer .flex-element.group {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    width: 100% !important;
  }
  #dm .dmFooterContainer .flex-element {
    grid-area: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important; margin-right: 0 !important;
    align-items: center !important;
  }
  #dm .dmFooterContainer,
  #dm .dmFooterContainer .dmNewParagraph { text-align: center !important; }
  #dm .dmFooterContainer .unifiednav__container { align-items: center; }
}

/* ---- 7. CONTACT FORM — <=767px (full-width fields, label over input) ---- */
@media (max-width: 767px) {
  #dm .dmforminput { flex-direction: column !important; align-items: stretch !important; }
  #dm .dmforminput label:not(.for-checkable) {
    width: auto !important; display: block; margin: 0 0 6px; white-space: normal;
  }
  #dm .dmform input:not([type="checkbox"]):not([type="hidden"]),
  #dm .dmform textarea,
  #dm .dmform select {
    width: 100% !important; max-width: 100% !important;
    box-sizing: border-box; min-height: 44px;
  }
  #dm .dmform textarea { min-height: 120px; }
  #dm .dmform .dmformsubmit input[type="submit"] { width: auto !important; min-width: 180px; }
}

/* ---- 8. GALLERY — device-gated column widths; force a fluid wrap ---- */
@media (max-width: 767px) {
  #dm .dmPhotoGallery .photogallery-row { display: flex !important; flex-wrap: wrap !important; }
  #dm .dmPhotoGallery .photogallery-column { width: 33.3333% !important; float: none !important; }
}
@media (max-width: 480px) {
  #dm .dmPhotoGallery .photogallery-column { width: 50% !important; }
}

/* ---- 9. SMALL-PHONE polish — <=480px ---- */
@media (max-width: 480px) {
  #dm .dmRespRow .dmRespColsWrapper,
  #dm .dmRespDesignRow .dmRespColsWrapper { padding-left: 4%; padding-right: 4%; }
  #dm .dmRespRow.fullBleedMode.hasBackgroundOverlay { padding: 88px 4% 40px !important; }
  #dm .ft-testimonials { padding-left: 4%; padding-right: 4%; }
}