/* Global CMS theme bridge.
   The Framer export uses several blue/navy tokens for footer backgrounds,
   image fallbacks, cards and accents. Keep every one of those surfaces tied
   to the administrator's single Theme Color instead of leaving old blue
   shades behind. Lighter surfaces are derived from the same selected color
   so text contrast and the original visual hierarchy stay readable. */
body{
 --token-cc2033ed-c1cc-4cdc-baa7-f42de145a3e7:var(--cms-theme-color,#2B0A2B)!important;
 --token-60a4d2cf-83c5-4cce-a0cd-8d089ce89447:var(--cms-theme-color,#2B0A2B)!important;
 --token-1166dd0e-eccc-438f-a17d-4e274e783bb0:rgba(var(--cms-theme-rgb,43,10,43),.30)!important;
 --token-b3f0fe70-326a-4737-ab12-b92750aef217:color-mix(in srgb,var(--cms-theme-color,#2B0A2B) 24%,white)!important;
 --token-ee389f52-d947-40be-95dc-755a8fdb732f:color-mix(in srgb,var(--cms-theme-color,#2B0A2B) 10%,white)!important;
 --token-f45d661a-f9af-4774-ae91-22b93fd13d95:color-mix(in srgb,var(--cms-theme-color,#2B0A2B) 5%,white)!important;
 --token-db560e34-2ada-46cf-af5d-c55e235f0654:var(--cms-theme-color,#2B0A2B)!important;
 --token-e4176a4d-d995-4feb-b56c-bed4268d4993:color-mix(in srgb,var(--cms-theme-color,#2B0A2B) 12%,white)!important
}
/* If an editable image is cleared in the CMS, keep its existing layout box
   but show the selected theme color instead of an old blue/empty fallback. */
img[data-cms-src]:not([src]),img[data-cms-src][src=""]{background:var(--cms-theme-color,#2B0A2B)!important;color:transparent!important}

/*
 * Small CMS-only interaction layer.
 * The original Clireo layout, typography, spacing and breakpoints are kept in
 * the page CSS generated from the supplied Framer export. Nothing here should
 * redefine public section widths, gaps, typography or responsive breakpoints.
 */
[data-framer-name="Answer"][hidden],
.cms-mobile-menu[hidden],
.cms-mobile-backdrop[hidden]{display:none!important}

.cms-faq-open{height:auto!important}
.cms-faq-open [data-framer-name="Icon Wrap"]{transform:rotate(135deg)!important}

/* Mobile drawer is fixed/overlayed so opening it never changes page spacing. */
.cms-mobile-backdrop{
 position:fixed;inset:0;background:rgba(0,13,14,.36);backdrop-filter:blur(4px);
 -webkit-backdrop-filter:blur(4px);z-index:2147482997
}
.cms-mobile-menu{
 position:fixed;left:16px;right:16px;top:76px;z-index:2147482998;
 display:flex;flex-direction:column;gap:4px;max-height:calc(100dvh - 96px);
 overflow:auto;padding:14px;border-radius:16px;
 background:var(--token-a33c1b5b-e297-4002-8e0e-dc2265f4a460, rgb(0,13,14));
 box-shadow:0 18px 55px rgba(0,0,0,.22)
}
.cms-mobile-menu a{
 position:relative!important;display:flex!important;align-items:center!important;
 min-height:48px!important;width:100%!important;padding:10px 12px!important;
 overflow:visible!important;text-decoration:none!important;border-radius:10px
}
.cms-mobile-menu a p,.cms-mobile-menu a span,.cms-mobile-menu a h1,
.cms-mobile-menu a h2,.cms-mobile-menu a h3,.cms-mobile-menu a h4,
.cms-mobile-menu a h5,.cms-mobile-menu a h6{color:#fff!important}
body.cms-menu-open{overflow:hidden!important}

.cms-preview [data-cms-text]:hover,.cms-preview [data-cms-src]:hover,
.cms-preview [data-cms-background]:hover{outline:2px dashed #eb8cde;cursor:pointer}

/* Global CMS-controlled header logo sizing. Framer's source icon slot is only
   19–23px; these variables resize the slot itself, not only the uploaded image. */
[data-framer-name="Brand logo"] [data-framer-name="Vector"]{
 width:var(--cms-logo-width,46px)!important;
 height:var(--cms-logo-height,46px)!important;
 aspect-ratio:auto!important;
 flex:0 0 auto!important;
 min-width:0!important;min-height:0!important
}
[data-framer-name="Brand logo"] .svgContainer{width:100%!important;height:100%!important;aspect-ratio:auto!important}
[data-framer-name="Brand logo"]{overflow:visible!important;max-width:max(135px,calc(var(--cms-logo-width,46px) + 24px))!important}
.cms-brand-icon{display:block;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:contain}
@media(max-width:809.98px){
 [data-framer-name="Brand logo"] [data-framer-name="Vector"]{width:var(--cms-logo-mobile-width,40px)!important;height:var(--cms-logo-mobile-height,40px)!important}
 [data-framer-name="Brand logo"]{max-width:max(110px,calc(var(--cms-logo-mobile-width,40px) + 20px))!important}
}

@media (min-width:810px){.cms-mobile-menu,.cms-mobile-backdrop{display:none!important}}

/* Home > Our Treatments: interaction-only carousel restoration. The supplied
   Framer page CSS remains responsible for card sizes, gaps and breakpoints. */
.cms-treatments-carousel{touch-action:pan-y;cursor:grab}
.cms-treatments-carousel.is-dragging{cursor:grabbing}
.cms-treatments-carousel.is-dragging a{pointer-events:none}
.cms-treatments-carousel .framer--slideshow-controls button{
 pointer-events:auto!important;cursor:pointer!important
}
/* Home > Our Treatments: the exported Next-arrow SVG can fail to resolve on
   some mobile loads, causing its alt text to appear inside the circular button.
   Keep the existing button/action but render a deterministic CSS chevron. */
.cms-treatments-carousel .framer--slideshow-controls button[aria-label="Next"]{
 display:grid!important;place-items:center!important;place-content:center!important
}
.cms-treatments-carousel .framer--slideshow-controls button[aria-label="Next"] img{
 display:none!important
}
.cms-treatments-carousel .framer--slideshow-controls button[aria-label="Next"]::before{
 content:"";display:block;width:8px;height:8px;box-sizing:border-box;
 border-top:1.7px solid var(--cms-theme-color,#2B0A2B);
 border-right:1.7px solid var(--cms-theme-color,#2B0A2B);
 transform:translateX(-1px) rotate(45deg);pointer-events:none
}
.cms-treatments-carousel-track{will-change:transform}


/* === Simple Our Doctors section (single image + heading + paragraph) === */
.cms-doctors-simple{width:100%;background:#fff;padding:96px 32px;box-sizing:border-box}
.cms-doctors-simple__container{width:100%;max-width:1160px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
.cms-doctors-simple__media{width:100%;border-radius:16px;overflow:hidden;background:var(--cms-theme-color,#2B0A2B);aspect-ratio:4/5;min-height:0}
.cms-doctors-simple__image{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.cms-doctors-simple__copy{min-width:0;max-width:540px}
.cms-doctors-simple__heading{margin:0;color:var(--cms-theme-color,#2B0A2B);font-family:Inter,Inter Placeholder,sans-serif;font-size:clamp(38px,4.1vw,60px);font-weight:500;letter-spacing:-0.045em;line-height:1.02}
.cms-doctors-simple__text{margin:28px 0 0;color:rgba(var(--cms-theme-rgb,43,10,43),.72);font-family:Inter,Inter Placeholder,sans-serif;font-size:17px;font-weight:400;line-height:1.65;letter-spacing:-0.01em;white-space:pre-line}
@media (max-width:809.98px){
  .cms-doctors-simple{padding:64px 16px}
  .cms-doctors-simple__container{grid-template-columns:1fr;gap:34px}
  .cms-doctors-simple__media{aspect-ratio:4/5;max-height:620px}
  .cms-doctors-simple__copy{max-width:none}
  .cms-doctors-simple__heading{font-size:clamp(34px,10vw,48px)}
  .cms-doctors-simple__text{margin-top:20px;font-size:16px;line-height:1.6}
}

/* === FAQ answer width/runtime fix ===
   Framer's FAQ component gives the answer RichTextContainer width:1px and
   relies on its React variant runtime to grow it. The PHP CMS uses a lightweight
   accordion, so force the visible answer copy to consume the available card
   width while preserving the original card padding and responsive geometry. */
[data-framer-name="Answer"]{
  width:100%!important;
  max-width:100%!important;
  align-self:stretch!important;
  min-width:0!important;
}
[data-framer-name="Answer"] > [data-framer-component-type="RichTextContainer"]{
  flex:1 1 auto!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}
[data-framer-name="Answer"] .framer-text{
  width:100%!important;
  max-width:100%!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
  text-wrap:wrap!important;
}

/* === Mobile header alignment fix ===
   On the Framer mobile variant the hamburger lives inside the same "Brand logo"
   row as the logo. The global logo sizing rule must not cap that row's width,
   otherwise the menu icon sits beside the logo instead of at the far right. */
@media (max-width:809.98px){
  nav[data-framer-name*="Mobile"] [data-framer-name="Brand logo"]{
    width:100%!important;
    max-width:none!important;
    flex:1 1 auto!important;
    justify-content:space-between!important;
    align-items:center!important;
    overflow:visible!important;
  }
  nav[data-framer-name*="Mobile"] [data-framer-name="Brand logo"] > .framer-14s5xod-container{
    margin-left:auto!important;
    flex:0 0 32px!important;
  }
}

/* === Mobile navigation drawer: flat top-down panel ===
   Visual direction follows the supplied mobile reference: dark navy sheet,
   logo + close row, simple text links, no white rounded link cards. */
@media (max-width:809.98px){
  .cms-mobile-backdrop{
    position:fixed!important;
    inset:0!important;
    z-index:2147482997!important;
    background:rgba(var(--cms-theme-rgb,43,10,43),.46)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    opacity:0!important;
    transition:opacity .34s ease!important;
  }
  .cms-mobile-backdrop.is-open{opacity:1!important}

  .cms-mobile-menu{
    --cms-mobile-drawer-bg:var(--cms-theme-color,#2B0A2B);
    position:fixed!important;
    inset:0 0 auto 0!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    max-width:none!important;
    max-height:min(100dvh,680px)!important;
    box-sizing:border-box!important;
    z-index:2147482998!important;
    display:flex!important;
    flex-direction:column!important;
    gap:0!important;
    padding:0 16px 18px!important;
    overflow:auto!important;
    border-radius:0!important;
    background:var(--cms-mobile-drawer-bg)!important;
    box-shadow:0 16px 34px rgba(0,0,0,.24)!important;
    transform:translate3d(0,-105%,0)!important;
    opacity:.995!important;
    pointer-events:none!important;
    will-change:transform!important;
    transition:transform .38s cubic-bezier(.22,1,.36,1)!important;
  }
  .cms-mobile-menu.is-open{
    transform:translate3d(0,0,0)!important;
    pointer-events:auto!important;
  }
  .cms-mobile-menu.is-closing{
    transform:translate3d(0,-105%,0)!important;
    pointer-events:none!important;
  }
  .cms-mobile-menu__header{
    min-height:54px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:20px!important;
    border-bottom:1px solid rgba(255,255,255,.10)!important;
  }
  .cms-mobile-menu__brand{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:auto!important;
    min-width:0!important;
    padding:0!important;
    margin:0!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    text-decoration:none!important;
  }
  .cms-mobile-menu__brand [data-framer-name="Vector"]{
    width:26px!important;
    height:26px!important;
    min-width:26px!important;
    min-height:26px!important;
    flex:0 0 26px!important;
  }
  .cms-mobile-menu__brand .svgContainer,
  .cms-mobile-menu__brand .cms-brand-icon{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
  }
  .cms-mobile-menu__close{
    position:relative!important;
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    padding:0!important;
    margin:0 -5px 0 0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    cursor:pointer!important;
    appearance:none!important;
    -webkit-appearance:none!important;
  }
  .cms-mobile-menu__close span{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:16px!important;
    height:1.5px!important;
    border-radius:999px!important;
    background:#fff!important;
    transform-origin:center!important;
  }
  .cms-mobile-menu__close span:first-child{transform:translate(-50%,-50%) rotate(45deg)!important}
  .cms-mobile-menu__close span:last-child{transform:translate(-50%,-50%) rotate(-45deg)!important}
  .cms-mobile-menu__close:focus-visible{outline:2px solid rgba(255,255,255,.82)!important;outline-offset:-4px!important}

  .cms-mobile-menu__links{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    padding:3px 0 0!important;
  }
  .cms-mobile-menu .cms-mobile-nav-link,
  .cms-mobile-menu a.cms-mobile-nav-link{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:100%!important;
    min-height:0!important;
    padding:10px 0!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:#fff!important;
    font-family:Inter,"Inter Placeholder",Arial,sans-serif!important;
    font-size:14px!important;
    font-weight:500!important;
    line-height:1.25!important;
    letter-spacing:-.01em!important;
    text-align:left!important;
    text-decoration:none!important;
    opacity:.96!important;
    transition:opacity .2s ease,transform .2s ease!important;
  }
  .cms-mobile-menu .cms-mobile-nav-link:hover,
  .cms-mobile-menu .cms-mobile-nav-link:focus-visible{
    opacity:1!important;
    transform:translateX(3px)!important;
    outline:none!important;
  }
  .cms-mobile-menu .cms-mobile-submenu-link{
    padding:8px 0 8px 16px!important;
    font-size:13px!important;
    font-weight:450!important;
    opacity:.78!important;
  }
  .cms-mobile-menu .cms-mobile-submenu-link::before{
    content:"";
    position:absolute;
    left:1px;
    width:6px;
    height:1px;
    background:rgba(255,255,255,.5);
  }
  .cms-mobile-menu .cms-mobile-cta{
    background:transparent!important;
    color:#fff!important;
    border-radius:0!important;
  }
  body.cms-menu-open{overflow:hidden!important}
}

@media (prefers-reduced-motion:reduce){
  .cms-mobile-menu,.cms-mobile-backdrop{transition:none!important}
}

/* CMS before/after treatment result comparisons (Home + About).
   Restores the two Framer code-component slots without React hydration. */
.cms-before-after{
  --ba-pos:50%;
  position:relative!important;
  width:100%!important;
  height:100%!important;
  min-height:420px!important;
  overflow:hidden!important;
  border-radius:14px!important;
  background:var(--cms-theme-color,#2B0A2B)!important;
  isolation:isolate!important;
  user-select:none!important;
  -webkit-user-select:none!important;
}
.cms-before-after .cms-ba-layer{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  overflow:hidden!important;
  pointer-events:none!important;
}
.cms-before-after .cms-ba-layer img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  border-radius:0!important;
  pointer-events:none!important;
}
.cms-before-after .cms-ba-before{z-index:1!important}
.cms-before-after .cms-ba-after{
  z-index:2!important;
  clip-path:inset(0 0 0 var(--ba-pos))!important;
  -webkit-clip-path:inset(0 0 0 var(--ba-pos))!important;
}
.cms-before-after .cms-ba-divider{
  position:absolute!important;
  z-index:3!important;
  top:0!important;
  bottom:0!important;
  left:var(--ba-pos)!important;
  width:3px!important;
  transform:translateX(-50%)!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 0 0 1px rgba(0,0,0,.04)!important;
  pointer-events:none!important;
}
.cms-before-after .cms-ba-handle{
  position:absolute!important;
  z-index:4!important;
  left:var(--ba-pos)!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  width:38px!important;
  height:38px!important;
  border-radius:999px!important;
  background:var(--cms-theme-color,#2B0A2B)!important;
  color:#fff!important;
  display:grid!important;
  place-items:center!important;
  box-shadow:0 5px 18px rgba(0,0,0,.18)!important;
  pointer-events:none!important;
}
.cms-before-after .cms-ba-handle svg{width:19px!important;height:19px!important}
.cms-before-after .cms-ba-range{
  position:absolute!important;
  z-index:5!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  opacity:0!important;
  cursor:ew-resize!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  touch-action:pan-y!important;
}
.cms-before-after:focus-within .cms-ba-handle{
  box-shadow:0 0 0 3px rgba(255,255,255,.85),0 5px 18px rgba(0,0,0,.2)!important;
}
@media(max-width:809.98px){
  .cms-before-after{min-height:320px!important}
  .cms-before-after .cms-ba-handle{width:34px!important;height:34px!important}
}

/* Home hero image gradient.
   Keep the photograph clear through the middle while blending the outer edges
   and lower area into the site's plum theme (#2b0a2b), matching the supplied
   inner-page reference. This override is scoped to Home only. */
.framer-yd79V .framer-1npfag2[data-framer-name="Hero"] {
  background:#2b0a2b!important;
}
.framer-yd79V .framer-psh5y6 {
  -webkit-mask:none!important;
  mask:none!important;
}
.framer-yd79V .framer-psh5y6::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(43,10,43,.72) 0%,rgba(43,10,43,.28) 17%,rgba(43,10,43,.08) 43%,rgba(43,10,43,.08) 60%,rgba(43,10,43,.28) 83%,rgba(43,10,43,.72) 100%),
    linear-gradient(180deg,rgba(43,10,43,.22) 0%,rgba(43,10,43,.08) 34%,rgba(43,10,43,.26) 68%,rgba(43,10,43,.88) 100%);
}