/* Clone interaction states — replaces the React/slick runtime with CSS-driven
   equivalents. Class hooks are toggled by /assets/js/main.js. */

/* Live site shows no horizontal scrollbar despite 100vw sections.
   Must be `clip`, not `hidden`: hidden on html+body creates a body scroll
   container that swallows mouse-wheel events (page stops wheel-scrolling). */
html, body { overflow-x: clip; }

/* Hamburger button — settled runtime class from live CSSOM (missing from captures) */
.gPzsYj { display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; align-self: stretch; flex-direction: column; height: auto; width: 60px; padding: 5px 10px; border-left: 1px solid rgba(255, 255, 255, 0.5); background-color: rgb(250, 249, 246); }
@media (min-width: 1024px) {
  .gPzsYj { padding: 0px; width: 86.9531px; border-left: 1px solid rgba(255, 255, 255, 0.5); background-color: rgb(220, 193, 92); }
}
.gPzsYj span { display: block; font-family: bodoni-urw, serif; font-size: 1.3rem; font-weight: 500; letter-spacing: 0.03em; line-height: 1; text-transform: uppercase; color: rgb(56, 56, 56); }
.gPzsYj .icon { display: inline-block; width: 3.5rem; height: 3.5rem; stroke-width: 0; stroke: rgb(56, 56, 56); fill: rgb(56, 56, 56); }

/* Hero social rail + bottom bar — captures froze these pre-measurement (width 0);
   live settles them to the header height (~88px) */
.jtLCzO { top: 88px !important; width: 88px !important; height: calc(100% - 88px) !important; opacity: 1 !important; }
@media (min-width: 1024px) {
  .kzjOIM { width: calc(100% - 88px) !important; }
}

/* ---- Responsive variants (React swapped whole subtrees at 1024px) ---- */
@media (min-width: 1024px) {
  .rv-m { display: none !important; }
}
@media (max-width: 1023.98px) {
  .rv-d { display: none !important; }
}

/* ---- Full-screen menu overlay (hamburger) ---- */
.sc-e3d635ca-0 {
  transition: opacity 300ms ease, visibility 300ms ease;
}
.sc-e3d635ca-0 .sc-e3d635ca-1 {
  transition: transform 400ms ease;
}
.sc-e3d635ca-0.is-open {
  opacity: 1;
  visibility: visible;
  height: 100vh !important;
}
.sc-e3d635ca-0.is-open .sc-e3d635ca-1 {
  transform: translateX(0);
}

/* Menu levels: the theme's own CSS handles fades (ul base opacity 0 →
   ul.is-active opacity 1; ul.is-current gates pointer-events). Levels slide as
   a stack: JS sets inline translateX on the top UL (0% top level, -100% when a
   nested level is open — nested ULs sit at +100%). Add the slide transition the
   original drove from JS. */
.sc-e3d635ca-8 ul {
  transition: transform 400ms ease, opacity 500ms, visibility 500ms !important;
}
.sc-e3d635ca-8 ul.is-active {
  transition: transform 400ms ease, opacity 500ms 400ms, visibility 500ms 400ms !important;
}

/* ---- Mobile quick-action FAB drawer ---- */
.sc-a9bf554a-1 {
  transition: opacity 300ms ease, visibility 300ms ease;
}
.sc-a9bf554a-0.is-open .sc-a9bf554a-1 {
  opacity: 1;
  visibility: visible;
}
.sc-a9bf554a-4 li > a,
.sc-a9bf554a-4 li > button {
  transition: opacity 200ms ease, visibility 200ms ease;
}
.sc-a9bf554a-0.is-open .sc-a9bf554a-4 > ul > li > a,
.sc-a9bf554a-0.is-open .sc-a9bf554a-4 > ul > li > button {
  opacity: 1;
  visibility: visible;
}
/* nested (Call Us) level replaces the top level when active */
.sc-a9bf554a-4 ul ul {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.sc-a9bf554a-4 ul ul.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateX(0);
}
.sc-a9bf554a-4 ul ul.is-active li > a {
  opacity: 1;
  visibility: visible;
}
.sc-a9bf554a-0.is-submenu .sc-a9bf554a-4 > ul > li > a,
.sc-a9bf554a-0.is-submenu .sc-a9bf554a-4 > ul > li > button {
  opacity: 0;
  visibility: hidden;
}
/* FAB label */
.sc-a9bf554a-2 span:nth-child(1) {
  transition: opacity 200ms ease;
}
.sc-a9bf554a-0.is-open .sc-a9bf554a-2 span:nth-child(1) {
  opacity: 1;
}

/* ---- Doctor bio slidedown ---- */
.react-slidedown {
  overflow: hidden;
  transition: height 400ms ease;
}

/* ---- Sliders (slick replacement) ---- */
.slick-track {
  transition: transform 500ms ease;
}

/* ---- Before/After comparison widgets ----
   The clip window (.sc-1b7ccdf3-1) is a % of the card; the BEFORE pane inside
   must always render at FULL card width so both photos share one scale.
   200% of the 50% default window = card width (no-JS fallback); main.js keeps
   it exact in pixels and drives the drag. */
.sc-1b7ccdf3-3 {
  width: 200%;
}
.sc-1b7ccdf3-6 {
  cursor: grab;
  touch-action: pan-y;
}
.sc-1b7ccdf3-6:active {
  cursor: grabbing;
}

/* ---- Reviews: expandable text ---- */
.ti-review-item.ti-x .ti-review-content,
.ti-review-item.ti-x .ti-review-text,
.ti-review-item.ti-x [class*="ti-review-text"] {
  display: block !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  max-height: none !important;
  overflow: visible !important;
}

/* ---- Reviews strip must clip cards that slide out of view ---- */
.ti-widget .ti-reviews-container {
  overflow: hidden;
}
.ti-widget .ti-reviews-container-wrapper {
  display: flex !important;
  flex-wrap: nowrap !important;
  /* the strip must grow with its cards; the outer .ti-reviews-container is
     the clipping window. Card widths are pinned because Trustindex sized
     them as a % of this wrapper (circular once the wrapper is content-sized). */
  width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
}
.ti-widget .ti-review-item {
  flex: 0 0 320px !important;
  width: 320px !important;
  max-width: 320px !important;
  box-sizing: border-box;
}