/* Port corrections — hand-written, loaded after the generated WordPress cascade
 * (10-wp.css) and the page sheet. Each rule says what it corrects and why. */

/* Hero slider, fade mode (Bo 2026-10-14 — not on live; el/Behaviours.tsx slick()).
 * All four slides share one photo, so the change between slides is the text: the
 * current slide's lines fade out quickly, the next slide's subtitle, title, text and
 * button rise in one after another. The active dot widens instead of jumping. */
:where(html:has([data-mst-chrome])) .mst-hero-fade .mst-hero-out .post-inner > * {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
:where(html:has([data-mst-chrome])) .mst-hero-fade .mst-hero-in .post-inner > * {
  animation: mst-hero-rise 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
:where(html:has([data-mst-chrome])) .mst-hero-fade .mst-hero-in .post-inner > :nth-child(2) { animation-delay: 0.12s; }
:where(html:has([data-mst-chrome])) .mst-hero-fade .mst-hero-in .post-inner > :nth-child(3) { animation-delay: 0.24s; }
:where(html:has([data-mst-chrome])) .mst-hero-fade .mst-hero-in .post-inner > :nth-child(4) { animation-delay: 0.36s; }
/* Before slick() runs (first paint), only slide 1 shows. */
:where(html:has([data-mst-chrome])) .mst-hero-fade:not(.slick-initialized) > .single-slide-item ~ .single-slide-item {
  display: none;
}
:where(html:has([data-mst-chrome])) .mst-hero-fade .slick-dots li button {
  transition: width 0.5s ease, background-color 0.5s ease;
}
@keyframes mst-hero-rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  :where(html:has([data-mst-chrome])) .mst-hero-fade .single-slide-item .post-inner > *,
  :where(html:has([data-mst-chrome])) .mst-hero-fade .slick-dots li button {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* The three cards under the hero (Concierge Therapy · Convenient Therapy Options ·
 * Appointments on Your Schedule), made uniform (Bo 2026-10-14 — not on live, where each
 * gray box was as tall as its text and the icons and photo circles sat at different
 * heights). Keyed to the build's own classes (three_boxes_home / main_wrp /
 * three_boxes_home1), so it holds when the copy changes:
 * - every card is as tall as the tallest, in every row and at every width (grid rows 1fr;
 *   3 columns desktop, 2 tablet, 1 mobile, as the Elementor flex wrapped before);
 * - the gray box fills its card, so the boxes end together and the circles, which overlap
 *   the box's bottom edge (-170px), line up;
 * - the icon is pinned to the bottom of the box (the wrapper is column-reverse);
 * - titles reserve two lines, so the descriptions start together. */
:where(html:has([data-mst-chrome])) .three_boxes_home > .e-con-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--row-gap) var(--column-gap);
}
@media (max-width: 1024px) {
  :where(html:has([data-mst-chrome])) .three_boxes_home > .e-con-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  /* live spaced the stacked cards with a 30px bottom margin on the first two only (20px
     gap + 30px); the same 50px as a row gap, so all three rows are the same height */
  :where(html:has([data-mst-chrome])) .three_boxes_home > .e-con-inner { grid-template-columns: minmax(0, 1fr); row-gap: 50px; }
  :where(html:has([data-mst-chrome])) .three_boxes_home .e-con.main_wrp { margin-bottom: 0; }
}
:where(html:has([data-mst-chrome])) .three_boxes_home .e-con.main_wrp {
  width: auto;
  max-width: none;
}
:where(html:has([data-mst-chrome])) .three_boxes_home .main_wrp > .elementor-widget.three_boxes_home1 {
  flex-grow: 1;
}
:where(html:has([data-mst-chrome])) .three_boxes_home .three_boxes_home1 > .elementor-widget-container {
  height: 100%;
  box-sizing: border-box;
}
:where(html:has([data-mst-chrome])) .three_boxes_home .three_boxes_home1 .elementor-image-box-wrapper {
  height: 100%;
  justify-content: space-between;
}
:where(html:has([data-mst-chrome])) .three_boxes_home .three_boxes_home1 .elementor-image-box-title {
  min-height: 2.4em;
  min-height: 2lh;
}

/* "Why Choose a Concierge Model?" boxes (Personalized, One-on-One Care · Flexible
 * Scheduling & Convenience · Direct Access to Your Therapist · Comprehensive, Holistic
 * Approach): a rollover like the three cards under the hero (Bo 2026-10-14 — NOT on live,
 * where these never changed on hover). Same navy (kit secondary) and white text, same
 * 0.5s ease; the photo icons stay as they are (the cards invert line icons, which would
 * ruin a photo). */
:where(html:has([data-mst-chrome])) .service_area_box_serve .e-grid > .elementor-widget-image-box > .elementor-widget-container,
:where(html:has([data-mst-chrome])) .service_area_box_serve .e-grid > .elementor-widget-image-box :is(.elementor-image-box-title, .elementor-image-box-description) {
  transition: background-color 0.5s, color 0.5s;
}
:where(html:has([data-mst-chrome])) .service_area_box_serve .e-grid > .elementor-widget-image-box:hover > .elementor-widget-container {
  background-color: var(--e-global-color-secondary);
}
:where(html:has([data-mst-chrome])) .service_area_box_serve .e-grid > .elementor-widget-image-box:hover :is(.elementor-image-box-title, .elementor-image-box-description) {
  color: #fff !important;
}

/* Cloudflare Turnstile in the contact form's CAPTCHA row (Bo 2026-10-14; live had an
 * invisible reCAPTCHA under a bare "CAPTCHA" label). */
:where(html:has([data-mst-chrome])) #gform_wrapper_1 .mst-turnstile {
  display: flex;
  justify-content: flex-start;
  min-height: 65px;
}

/* Keep a phrase on one line (content: <span class="mst-nowrap">), e.g. "One-on-One". */
:where(html:has([data-mst-chrome])) .mst-nowrap {
  white-space: nowrap;
}