/*
 * Leap template foundation
 * Shared layout utilities and the only custom behavior layer shipped to sites.
 */

:root {
  --leap-primary: #2d40ea;
  --leap-primary-dark: #2504a7;
  --leap-secondary: #04a77d;
  /* Text-safe dark variant of the secondary accent: >=4.5:1 on the light
     surfaces (#fff, #f4f5f7) it is used against. create-site.py's contrast
     guard re-derives it from the spec's secondary on retheme. */
  --leap-secondary-text: #037558;
}

html {
  font-size: 1.125rem;
  scroll-behavior: smooth;
}

/* Keep anchored sections clear of the sticky header */
[id] {
  scroll-margin-top: 6rem;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

.skip-link {
  position: fixed;
  inset: .75rem auto auto .75rem;
  z-index: 9999;
  padding: .75rem 1rem;
  color: #fff;
  background: #17202a;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

img {
  -webkit-user-drag: none;
}

[data-hero-video] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

.inherit-color * {
  color: inherit;
}

.rich-text > :not(div):first-child,
.rich-text > div:first-child > :first-child {
  margin-top: 0 !important;
}

.rich-text > :last-child,
.rich-text ol li:last-child,
.rich-text ul li:last-child {
  margin-bottom: 0 !important;
}

.container-medium,
.container-small,
.container-large {
  margin-right: auto !important;
  margin-left: auto !important;
}

img::selection,
svg::selection {
  background: transparent;
}

a,
.form-input,
.form-select,
.tab-link,
.site-nav__link {
  color: inherit;
  text-decoration: inherit;
  font-size: inherit;
}

.text-style-3lines,
.text-style-2lines {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.text-style-3lines {
  -webkit-line-clamp: 3;
}

.text-style-2lines {
  -webkit-line-clamp: 2;
}

.inline-flex {
  display: inline-flex;
}

.hide {
  display: none !important;
}

.margin-0 {
  margin: 0 !important;
}

.padding-0 {
  padding: 0 !important;
}

.spacing-clean {
  margin: 0 !important;
  padding: 0 !important;
}

.margin-top {
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
}

.margin-right {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
}

.margin-bottom {
  margin-top: 0 !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.margin-left {
  margin-top: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}

.margin-horizontal {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.margin-vertical {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.padding-top {
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
}

.padding-right {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
}

.padding-bottom {
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.padding-left {
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
}

.padding-horizontal {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.padding-vertical {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

/* Native interaction replacements */

.hours-grid {
  font-variant-numeric: tabular-nums;
}

.site-nav__menu-button,
.carousel__control--prev,
.carousel__control--next,
.faq__question {
  -webkit-tap-highlight-color: transparent;
}

/* Every interactive element gets a visible, brand-colored keyboard focus
   ring (WCAG 2.4.7). :where() keeps specificity at the pseudo-class alone so
   the component-specific rules below still win where they need to. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--leap-secondary-text);
  outline-offset: 3px;
}

/* Contrast-safe defaults for text that sits on light cards. */
.text-style-muted {
  opacity: 0.74;
}

.hours-grid .text-style-muted {
  color: #566174;
  opacity: 1;
}

.contact-label.text-color-primary {
  color: #686868;
}

.text-color-green {
  color: var(--color-success-text, #15803d);
}

/* Image-backed white text needs a predictable worst-case backdrop. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgb(0 0 0 / 58%);
}

.hero__content {
  z-index: 1;
}

.blog-image-overlay,
.service-card__overlay {
  background-color: rgb(0 0 0 / 60%);
}

.leap-slider-ready .carousel__viewport {
  touch-action: pan-y;
}

.leap-slider-track {
  display: flex;
  align-items: stretch;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.leap-slider-track.is-resizing {
  transition: none;
}

.leap-slider-track > .carousel__slide {
  flex: 0 0 100%;
  display: block;
}

[data-services-carousel] .carousel__viewport {
  height: auto;
}

[data-services-carousel] .leap-slider-track > .leap-service-card-slide {
  flex: 0 0 calc((100% - 3rem) / 4);
  height: auto;
  margin-right: 1rem;
}

[data-services-carousel] .service-card {
  width: 100%;
  height: 100%;
}

/* Desktop shows the whole service menu at once; the runtime sets
   .leap-slider-grid and suspends paging above 992px. */
[data-services-carousel].leap-slider-grid .leap-slider-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  transition: none;
  will-change: auto;
}

[data-services-carousel].leap-slider-grid
  .leap-slider-track
  > .leap-service-card-slide {
  flex-basis: auto;
  margin-right: 0;
}

.services-section .services-carousel.leap-slider-grid {
  padding-bottom: 0;
}

.services-section,
.services-section .services-carousel,
.services-section .carousel__viewport {
  background-color: transparent;
  box-shadow: none;
}

.location-card__address-row,
.location-card__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.location-card__address-row {
  gap: 0.75rem 1rem;
}

.location-card__copy {
  flex: none;
  min-height: 2.25rem;
}

#doctors {
  padding-bottom: clamp(5rem, 7vw, 7rem);
}

[data-team-slider] {
  padding-bottom: 4rem;
}

[data-team-slider].leap-slider-single {
  padding-bottom: 0;
}

.carousel__control {
  min-width: 3rem;
  min-height: 3rem;
  padding: 0;
  font: inherit;
  cursor: pointer;
  box-shadow: none;
  transition:
    color 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    opacity 160ms ease,
    transform 160ms ease;
}

.carousel__control:hover {
  border-color: #d0d5dd;
  background-color: #eee;
  box-shadow: none;
}

.carousel__control:active {
  transform: scale(0.96);
}

.carousel__control svg {
  display: block;
  pointer-events: none;
}

.leap-slider-dot {
  width: 0.95rem;
  height: 0.95rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgb(34 34 34 / 40%);
  cursor: pointer;
  transition:
    width 180ms ease,
    background-color 180ms ease,
    transform 160ms ease;
}

.leap-slider-dot:hover {
  background: rgb(34 34 34 / 65%);
}

.leap-slider-dot:active {
  transform: scale(0.96);
}

.leap-slider-dot.is-active {
  width: 1.9rem;
  background: #222;
}

.carousel__pagination-dots {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.65rem;
  width: auto;
  /* The dot rail ends before the bottom-right prev/next controls. */
  right: 8.5rem;
  height: 3rem;
  padding-top: 0;
}

.carousel__control[hidden],
.carousel__pagination[hidden],
.leap-slider-dot[hidden] {
  display: none !important;
}

.carousel__control--prev[aria-disabled="true"],
.carousel__control--next[aria-disabled="true"],
.carousel__control--prev:disabled,
.carousel__control--next:disabled {
  opacity: 0.38;
  pointer-events: none;
}

/* The bar sits clear of the viewport edge, matching the Leap site CTA. */
.sticky-cta {
  inset: auto 0% 1.25rem;
}

.faq__question {
  cursor: pointer;
}

.faq__icon {
  transition: transform 220ms ease;
}

.faq__item.is-open .faq__icon {
  transform: rotate(180deg);
}

.faq__answer[hidden] {
  display: none !important;
}

.hours-grid .is-current-day {
  color: var(--color-success-text, #15803d);
  font-weight: 600;
  opacity: 1;
}

/* Lightweight reveal system: transform and opacity only. */

.leap-reveal {
  --leap-delay: 0ms;
}

.leap-motion .leap-reveal {
  opacity: 0;
  transform: translate3d(0, 1rem, 0);
  transition:
    opacity 520ms ease var(--leap-delay),
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1) var(--leap-delay);
}

.leap-motion .leap-reveal[data-scale] {
  transform: scale(0.975);
}

.leap-motion .leap-reveal.is-visible {
  opacity: 1;
  transform: none;
}

.fade-in,
.fade-in-20,
.fade-in-40 {
  animation: leap-fade-in 480ms ease both;
}

.fade-in-20 {
  animation-delay: 120ms;
}

.fade-in-40 {
  animation-delay: 220ms;
}

@keyframes leap-fade-in {
  from {
    opacity: 0;
    transform: translate3d(0, -0.5rem, 0);
  }
}

.pulse {
  position: relative;
}

/* The ring is invisible until the JS marks the dot on-screen, and the
   animation is *declared* only on that state rather than paused there: a
   paused animation still resolves to its 0% keyframe, which left a static
   ring around every dot for reduced-motion and off-screen readers. */
.pulse::after {
  content: "";
  position: absolute;
  inset: -0.2rem;
  border: 1px solid currentColor;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

.pulse.is-motion-visible::after {
  animation: leap-pulse 2.2s ease-out infinite;
}

@keyframes leap-pulse {
  from {
    opacity: 0.55;
    transform: scale(0.85);
  }
  to {
    opacity: 0;
    transform: scale(1.8);
  }
}

/* The exported gradient animation and mask shine caused continuous paint
   work, so the gradient fill itself stays static — an animated
   `background-position` on a permanently on-screen element repaints the
   button every frame. The sheen below is the paint-safe variant: a single
   pseudo-element whose only animated property is `transform`, so it is
   handed to the compositor once and never repaints the button beneath it.
   `overflow: hidden` keeps the highlight inside the rounded box. */

.primary-button.animated-gradient-button {
  background: linear-gradient(
    120deg,
    var(--leap-primary),
    var(--leap-secondary)
  ) !important;
  background-size: 100% 100% !important;
  animation: none !important;
  position: relative;
  overflow: hidden;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

@media (prefers-reduced-motion: no-preference) {
  .primary-button.animated-gradient-button::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -35%;
    width: 25%;
    background: linear-gradient(
      100deg,
      rgb(255 255 255 / 0%),
      rgb(255 255 255 / 26%),
      rgb(255 255 255 / 0%)
    );
    pointer-events: none;
    animation: leap-cta-sheen 3.6s ease-in-out infinite;
  }
}

@keyframes leap-cta-sheen {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(640%, 0, 0);
  }
}

.primary-button.animated-gradient-button:hover {
  transform: translateY(-2px);
}

.primary-button.animated-gradient-button:active {
  transform: scale(0.96);
}

.button-link:active,
.service-card__details:active,
.service-card__book:active {
  transform: scale(0.96);
}

.location-image,
.service-card__image,
.team-card__media,
.technology-card img {
  outline: 1px solid rgb(0 0 0 / 10%);
  outline-offset: -1px;
}

.shine {
  -webkit-mask-image: none !important;
  animation: none !important;
}

.hero__benefits {
  scrollbar-width: none;
}

.hero__benefits::-webkit-scrollbar {
  display: none;
}

.hero__benefit.loop-move-left {
  animation: none !important;
}

/* Service and technology detail drawer.

   The drawer is a modal overlay, so it must outrank every stacking context on
   the page. Do not lower these numbers: the footer sits inside a revealing
   wrapper (.appointment-strip.overflow-mobile here, .scroll_wrap.overflow-mobile
   on the older Webflow forks, which carries z-index 999999) and the book-page
   nav carries z-index 999999999. Anything below those lets the footer paint
   over a drawer opened near the bottom of the page. */

.leap-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  background: rgb(15 18 20 / 55%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease;
}

.leap-drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* The side inset keeps a sliver of page visible so the sheet reads as an
   overlay, not a takeover. Kept small: every rem here is reading width lost
   on a 375pt phone. Desktop is unchanged — the 56rem cap bites first. */
.leap-drawer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2147483647;
  display: flex;
  flex-direction: column;
  width: min(100% - 1.25rem, 56rem);
  max-height: 82dvh;
  margin: 0 auto;
  color: #1a1a1a;
  background: #fff;
  border-radius: 1.25rem 1.25rem 0 0;
  box-shadow: 0 -0.75rem 3rem rgb(0 0 0 / 25%);
  transform: translate3d(0, 100%, 0);
  transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
}

.leap-drawer.is-open {
  transform: none;
}

.leap-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1.75rem 0.75rem;
}

.leap-drawer-title {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 700;
}

.leap-drawer-close {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #1a1a1a;
  background: #f1f1f0;
  font: inherit;
  cursor: pointer;
}

.leap-drawer-close:hover {
  background: #e5e5e3;
}

.leap-drawer-body {
  overflow-y: auto;
  padding: 0 1.75rem 2rem;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.leap-drawer-body img {
  max-width: 100%;
  height: auto;
  border-radius: 0.75rem;
}

.leap-drawer-body h2 {
  margin: 1.5em 0 0.5em;
  font-size: 1.2rem;
}

.leap-drawer-loading {
  padding: 3rem 0;
  color: #777;
  text-align: center;
}

.leap-drawer-grabber {
  flex: none;
  width: 2.5rem;
  height: 0.3rem;
  margin: 0.6rem auto 0;
  border-radius: 999px;
  background: #e0e0de;
}

body.leap-drawer-lock,
body.leap-menu-open {
  overflow: hidden;
}

/* Optional eight-image gallery injected by create-site.py. */

.bento-gallery {
  display: grid;
  grid-template-rows: repeat(4, auto);
  grid-template-columns: repeat(6, 1fr);
  grid-auto-columns: 1fr;
  gap: 1rem;
  width: 100%;
  min-height: 55rem;
}

.bento-gallery-item {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 2em;
  overflow: hidden;
  color: #fff;
  text-align: center;
  border-radius: 0.5rem;
}

.bento-gallery .bento-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
}

.bento-gallery-item.g1 {
  grid-area: span 2 / span 4;
}

.bento-gallery-item.g2 {
  grid-area: span 1 / span 2;
}

.bento-gallery-item.g5 {
  grid-area: span 2 / span 2;
}

.bento-gallery-item.g3,
.bento-gallery-item.g4,
.bento-gallery-item.g6 {
  grid-area: span 1 / span 1;
}

.bento-gallery-item.g7 {
  grid-area: 4 / 3 / 5 / 4;
}

.bento-gallery-item.g8 {
  grid-area: span 2 / span 3;
}

@media screen and (max-width: 1920px) {
  html {
    font-size: calc(0.625rem + 0.4166666667vw);
  }
}

@media screen and (max-width: 1440px) {
  html {
    font-size: calc(0.8126951093rem + 0.2081165453vw);
  }
}

/* Optional semantic-coverage section injected by source_coverage.py. */
.other-info-section {
  background: #f8f9ff;
}

.other-info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}

.other-info-card {
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 1.25rem;
  box-shadow: 0 0.5rem 1.5rem #1018280d;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.other-info-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.other-info-card__media img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.other-info-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem;
}

.other-info-card__body .button-link {
  margin-top: auto;
}

.other-info-card__title {
  font-size: 1.25rem;
  line-height: 1.25;
  margin: 0;
}

@media screen and (max-width: 991px) {
  .other-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hide,
  .hide-tablet {
    display: none !important;
  }

  .site-nav .site-nav__menu {
    top: 100%;
    right: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    max-height: calc(100dvh - 4.5rem);
    margin: 0;
    overflow-y: auto;
    display: block;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, -0.5rem, 0);
    box-shadow:
      0 8px 16px -8px rgb(16 24 40 / 10%),
      0 20px 36px -16px rgb(16 24 40 / 18%);
    transition:
      opacity 180ms ease,
      transform 180ms cubic-bezier(0.2, 0, 0, 1),
      visibility 0s linear 180ms;
  }

  .site-nav .site-nav__menu-button {
    display: block;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.625rem;
    color: inherit;
    background: transparent;
    border-radius: 0.75rem;
    transition:
      background-color 160ms ease,
      transform 160ms ease;
  }

  .site-nav .site-nav__menu-button:hover,
  .site-nav .site-nav__menu-button.is-open {
    color: inherit;
    background: rgb(45 64 234 / 7%);
  }

  .site-nav .site-nav__menu-button:active {
    transform: scale(0.96);
  }

  .site-nav .site-nav__menu.is-open {
    display: block;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
  }

  .site-nav__menu-line--top,
  .site-nav__menu-line--middle,
  .site-nav__menu-line--bottom {
    transition:
      opacity 180ms cubic-bezier(0.2, 0, 0, 1),
      transform 180ms cubic-bezier(0.2, 0, 0, 1);
  }

  .site-nav__menu-button.is-open .site-nav__menu-line--top {
    transform: translateY(8px) rotate(45deg);
  }

  .site-nav__menu-button.is-open .site-nav__menu-line--middle {
    opacity: 0;
    transform: scaleX(0.25);
  }

  .site-nav__menu-button.is-open .site-nav__menu-line--bottom {
    transform: translateY(-8px) rotate(-45deg);
  }

  .bento-gallery {
    min-height: 38rem;
  }

  [data-services-carousel] .leap-slider-track > .leap-service-card-slide {
    flex-basis: calc((100% - 1rem) / 2);
  }
}

@media screen and (max-width: 767px) {
  .hide-mobile-landscape {
    display: none !important;
  }

  /* A hidden .hide-mobile-landscape cell must not leave its column behind. */
  .location-grid,
  .location-grid.is-two-column {
    grid-template-columns: 1fr;
  }

  .hero__benefits {
    width: 100% !important;
    max-width: 100%;
    padding-right: 1.25rem;
    padding-left: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  .hero__benefit {
    scroll-snap-align: start;
  }

  .bento-gallery {
    display: flex;
    min-height: 20rem;
    padding-right: var(--page-padding-mobile);
    padding-left: var(--page-padding-mobile);
    overflow-x: auto;
  }

  .bento-gallery-item.narrow {
    width: 50%;
  }

  [data-services-carousel] .leap-slider-track > .leap-service-card-slide {
    flex-basis: 85%;
  }

  /* Phones scroll carousels natively, like the gallery: the runtime sets
     .leap-slider-scroll below 768px and hides the arrows and dots. */
  .leap-slider-scroll {
    /* width:auto lets the negative margins reach both screen edges. */
    width: auto;
    height: auto;
    margin-inline: calc(-1 * var(--page-padding-mobile));
    padding-bottom: 0;
  }

  .leap-slider-scroll .carousel__viewport {
    width: 100%;
    height: auto;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    touch-action: auto;
    scroll-snap-type: x proximity;
    scroll-padding-left: var(--page-padding-mobile);
  }

  .leap-slider-scroll .leap-slider-track {
    transform: none !important;
    padding-inline: var(--page-padding-mobile);
  }

  .leap-slider-scroll .leap-slider-track > .carousel__slide {
    flex: 0 0 85%;
    margin-right: 1rem;
    scroll-snap-align: start;
  }
}

@media screen and (max-width: 640px) {
  .leap-drawer {
    max-height: 92dvh;
  }

  .leap-drawer-head {
    padding: 1.1rem 1.25rem 0.5rem;
  }

  .leap-drawer-body {
    padding: 0 1.25rem 1.5rem;
  }
}

@media screen and (max-width: 479px) {
  html {
    font-size: calc(0.7494769874rem + 0.8368200837vw);
  }

  .hide-mobile {
    display: none !important;
  }

  .bento-gallery-item {
    width: 95%;
    max-height: 130vw;
  }

  .bento-gallery-item.narrow {
    width: 70%;
  }

  .other-info-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .leap-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Article covers (W3): Notion-style wide, heavily cropped cover bands — atop
   the detail drawer and atop published blog article pages. */

.leap-drawer-cover {
  flex: none;
  aspect-ratio: 7 / 2;
  overflow: hidden;
  border-radius: 1.25rem 1.25rem 0 0;
}

.leap-drawer-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.leap-drawer.has-cover .leap-drawer-grabber {
  position: absolute;
  top: 0.6rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  margin: 0;
  background: rgb(255 255 255 / 80%);
}

.leap-drawer-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.5rem;
}

.leap-drawer-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #1a1a1a;
  background: #f1f1f0;
  font: inherit;
  cursor: pointer;
}

.leap-drawer-copy:hover {
  background: #e5e5e3;
}

.leap-drawer-copy:focus-visible {
  outline: 3px solid var(--leap-secondary-text);
  outline-offset: 3px;
}

.leap-drawer-copy.is-copied svg {
  display: none;
}

.leap-drawer-copy.is-copied::after {
  content: "\2713";
  font-weight: 700;
  color: var(--color-success-text, #15803d);
}

.leap-article-cover {
  aspect-ratio: 7 / 2;
  overflow: hidden;
}

.leap-article-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.leap-article-head {
  padding: 2.75rem 0 0.5rem;
}

.leap-article-kicker {
  margin-bottom: 1rem;
  color: #6e6e73;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  .leap-article-cover,
  .leap-drawer-cover {
    aspect-ratio: 5 / 2;
  }
}

/* Bio crests and the credential ring (#437 Exhibit L). create-site.py sets an
   institution's real mark inline beside the name the bio writes out, and rings
   one credential phrase. Ornament on prose: it must not move the text, recolour
   it, or disturb the overflow measurement setupBioScrollHints() relies on. */

/* Mark + the institution's first word travel together, so a line break cannot
   orphan a logo. */
.bio-crest {
  white-space: nowrap;
}

/* Square by design — logo.dev letterboxes every mark into a 128x128 and
   object-fit cannot undo that padding without cropping. The plate is what makes
   a full-bleed mark and a transparent one read as the same kind of object. */
.bio-crest__mark {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  margin-right: 0.28em;
  vertical-align: -0.22em;
  border-radius: 0.24em;
  background-color: #fff;
  object-fit: contain;
}

/* inline-block, never inline: one unbroken box is the only geometry a single
   stroke can wrap. line-height:1 keeps the assembly shorter than the bio's 1.5
   line box, so a ring never changes how tall the paragraph is. The side padding
   is load-bearing — the ellipse is narrowest where the text sits. */
.bio-annot {
  position: relative;
  display: inline-block;
  line-height: 1;
  padding: 0.1em 0.78em 0.1em 0.62em;
  white-space: nowrap;
}

/* Without this the left end of the stroke runs through the glyph. */
.bio-annot--icon {
  padding-left: 1em;
}

.bio-annot__text {
  font-weight: 500;
}

/* width/height are explicit: an absolutely positioned <svg> with four insets
   and width:auto falls back to the 300x150 replaced-element default instead of
   stretching. Nudged up off centre because credential phrases are cap-height,
   so a centred ring reads as sagging. */
.bio-annot__ring {
  position: absolute;
  top: -0.34em;
  left: 0;
  width: 100%;
  height: calc(100% + 0.56em);
  color: var(--leap-primary);
  overflow: visible;
  pointer-events: none;
}

/* A black-on-transparent Noun Project PNG used as a mask, so one cached glyph
   paints itself in whatever brand colour the site was rethemed to. create-site
   writes the mask URL inline — a url() in a custom property would resolve
   against this stylesheet's directory, not the page. */
.bio-annot__icon {
  display: inline-block;
  width: 1.02em;
  height: 1.02em;
  margin-right: 0.28em;
  vertical-align: -0.13em;
  background-color: var(--leap-primary);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

@media (max-width: 767px) {
  .bio-annot {
    padding-left: 0.5em;
    padding-right: 0.6em;
  }

  .bio-annot--icon {
    padding-left: 0.86em;
  }

  .bio-annot__ring {
    top: -0.3em;
    height: calc(100% + 0.48em);
  }
}

/* ---- Location & Hours: photo matches the contact card's height ----------
   The card and the photo are peer cells of the same two-column grid. The theme
   sizes the photo from its own 3/2 aspect-ratio with `align-self: start`, so
   once the card grew (hours + phone + fax + email) the photo sat short beside
   it with a gap under it. Stretching the photo to the row height fixes that in
   whichever direction the row is driven: taller card -> photo fills down;
   taller photo -> the card (a flex column) fills to match.

   aspect-ratio is deliberately LEFT IN PLACE: a percentage height against an
   indefinite grid area is treated as auto while tracks are sized, so the ratio
   still supplies the photo's intrinsic contribution and the row never jumps to
   the image's natural 588px. That also keeps the theme's note at
   .location-image.rounded.shorter honest — a bare `height: 100%` with no ratio
   is what painted a ~190px sliver on first layout.

   Scoped to >=768px on purpose: below that the photo is display:none and the
   grid collapses to one column, so there is nothing to match. */
@media screen and (min-width: 768px) {
  .location-grid.is-two-column > .location-image.rounded.shorter {
    align-self: stretch;
    height: 100%;
    object-fit: cover;
  }
}

/* ---- Our Services: one filtered grid ------------------------------------
   The eight per-category carousels were collapsed into a single section with
   category pills and a "See more" batch of 32 (admin request 2026-08-27). The
   theme's .services-grid is a 4-up grid that turns into a horizontal
   overflow:scroll strip under 768px — right for a 12-card carousel, wrong for
   a filtered 184-card catalogue where the page-size control is the See more
   button. The --filtered modifier keeps it a wrapping grid at every width. */
.services-section .services-grid--filtered {
  display: grid;
  overflow: visible;
  padding-left: 0;
  padding-right: 0;
  grid-template-rows: auto;
  grid-auto-columns: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
@media screen and (max-width: 991px) {
  .services-section .services-grid--filtered {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media screen and (max-width: 767px) {
  .services-section .services-grid--filtered {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 479px) {
  .services-section .services-grid--filtered {
    grid-template-columns: 1fr;
  }
}
.services-section .services-grid--filtered .service-card[hidden] {
  display: none;
}

.services-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.services-filter__button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #333;
  background-color: #0000;
  border: 1px solid #3333;
  border-radius: 6.25rem;
  padding: 0.5rem 1rem;
  font-family: IBM Plex Sans, sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.2em;
  cursor: pointer;
  transition:
    background-color 0.2s,
    border-color 0.2s,
    color 0.2s;
}
.services-filter__button:hover {
  border-color: #17819b;
  color: #17819b;
}
.services-filter__button.is-active {
  background-color: var(--surface-primary);
  border-color: var(--surface-primary);
  color: var(--text-inverse);
}
.services-filter__count {
  font-size: 0.75rem;
  opacity: 0.6;
}
.services-filter__button.is-active .services-filter__count {
  opacity: 0.75;
}
.services-filter__status {
  margin: 0.75rem 0 0;
  color: var(--text-secondary);
  font-size: 0.88rem;
  text-align: center;
}
.services-more {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}
.services-more__button {
  cursor: pointer;
  border: 1px solid var(--surface-primary);
  border-radius: 6.25rem;
  padding: 0.75rem 2rem;
}
.services-more__button[hidden] {
  display: none;
}

/* Footer background video (admin request 2026-08-27: same clip as the hero).
   The theme's .background-image-wrapper was built for an <img>; a <video> is
   inline by default, which leaves a baseline gap under it inside the wrapper. */
.footer .background-image-wrapper > video.full-image {
  display: block;
}

/* FAQ, admin request 2026-08-27.
   1) The stethoscope watermark used to bleed up behind the heading and crossed
      through the word "FAQs". Parked below the intro text instead, with a
      shorter drift so the scroll animation can never carry it back up into it. */
.faq__decor {
  top: 9rem;
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .faq__decor {
      animation-name: leap-faq-decor-drift-low;
    }
  }
}
@keyframes leap-faq-decor-drift-low {
  from {
    transform: translateY(2rem) rotate(-4deg);
  }
  to {
    transform: translateY(-2rem) rotate(4deg);
  }
}
/* 2) The section carried TWO stacked bottom paddings (its own 8rem plus the
      inner .padding-section-large 8rem), leaving ~224px of empty grey under the
      last question. One modest gap now. The extra reserve existed for the
      sticky CTA, which overlays the footer below, not this section. */
.faq-section {
  padding-bottom: 0;
}
.faq-section .padding-section-large {
  padding-bottom: 4rem;
}

/* ---------------------------------------------------------------------------
   Our Doctors (#doctors) — rebuilt 2026-08-27 from design-library reference
   refs/inspo-277.webp (category: Team). Replaces the one-provider-per-slide
   carousel with a wrapping card grid: portrait tile, name, role, bio, and a
   row of round icon actions. Colors/fonts are the site's own tokens.
--------------------------------------------------------------------------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.5rem 1.75rem;
  /* stretch, not start: every card's round action row lands on one baseline
     even though the bios clamp to different line counts */
  align-items: stretch;
}
.team-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.team-card__media {
  display: block;
  overflow: hidden;
  /* edge treatment comes from the shared media-outline rule above, the same
     one service and technology card images use */
  border-radius: var(--radius-medium);
  background: color-mix(in srgb, var(--leap-primary) 5%, #f2f4f7);
  aspect-ratio: 1 / 1.04;
  margin-bottom: 1.125rem;
}
.team-card__photo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% top;
  transition: transform 0.5s ease;
}
.team-card:hover .team-card__photo {
  transform: scale(1.03);
}
@media (prefers-reduced-motion: reduce) {
  .team-card__photo,
  .team-card:hover .team-card__photo {
    transition: none;
    transform: none;
  }
}
.team-card__name {
  font-size: 1.05rem;
  line-height: 1.3;
  font-weight: 500;
  margin: 0 0 0.25rem;
}
.team-card__name-link {
  color: var(--text-primary);
  text-decoration: none;
}
.team-card__name-link:hover {
  text-decoration: underline;
}
.team-card__role {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--color-gray-600);
  margin: 0 0 0.75rem;
}
.team-card__bio {
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--color-gray-600);
  margin: 0 0 1.125rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
}
.team-card__bio .bio-crest__mark {
  vertical-align: -0.15em;
}
.team-card__actions {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
}
.team-card__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--color-neutral-100);
  background: #fff;
  color: var(--text-primary);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.team-card__action:hover {
  background: color-mix(in srgb, var(--leap-primary) 8%, #fff);
  border-color: color-mix(in srgb, var(--leap-primary) 35%, #fff);
  color: var(--leap-primary);
}
.team-card__action:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
@media (max-width: 991px) {
  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.25rem 1.5rem;
  }
}
@media (max-width: 639px) {
  .team-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
  .team-card__media {
    /* one card per row is a wide tile; keep it short so four providers don't
       add a screen and a half of scroll. Faces stay put (object-position top) */
    aspect-ratio: 1 / 0.7;
  }
}

/* ---------------------------------------------------------------------------
   Service + technology card motion (admin request 2026-08-28)
   Both card types were static apart from the shared scroll reveal: no hover
   feedback at all on a tile whose WHOLE box is clickable. Added here rather
   than in leap-theme.css (donor CSS, not ours to edit).

   The reveal system owns `transform` on these same cards (`.leap-motion
   .leap-reveal` slides them up; `.is-visible` sets `transform: none`, 0,3,0).
   So the hover LIFT uses the standalone `translate` property, not `transform`
   — the two compose instead of clobbering each other. Any rule that sets
   `transition` on a card must therefore restate the reveal's opacity/transform
   timing verbatim (520ms + var(--leap-delay)), or the entrance animation is
   silently replaced by the hover timing. Selectors are scoped to their section
   container to reach 0,3,0 and win on source order. Do not "simplify" them or
   fold the lift back into `transform`.

   All of it sits inside prefers-reduced-motion: no-preference and
   hover: hover — a touch device must not latch a hover state on tap, which on
   these cards would leave a tile lifted after the drawer opens.
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .services-grid .service-card,
  .services-grid--filtered .service-card {
    transition:
      opacity 520ms ease var(--leap-delay, 0ms),
      transform 520ms cubic-bezier(0.22, 1, 0.36, 1) var(--leap-delay, 0ms),
      translate 320ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .services-grid .service-card:hover,
  .services-grid--filtered .service-card:hover,
  .services-grid .service-card:focus-within,
  .services-grid--filtered .service-card:focus-within {
    translate: 0 -0.375rem;
    box-shadow: 0 1.25rem 2.25rem -0.75rem rgb(16 24 40 / 28%);
  }

  /* The image is clipped by the card's own overflow: hidden, so the zoom reads
     as the photo pushing into the frame rather than the tile growing. */
  .services-grid .service-card__image,
  .services-grid--filtered .service-card__image {
    transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }

  .services-grid .service-card:hover .service-card__image,
  .services-grid--filtered .service-card:hover .service-card__image,
  .services-grid .service-card:focus-within .service-card__image,
  .services-grid--filtered .service-card:focus-within .service-card__image {
    transform: scale(1.06);
  }

  /* Title + button sit on the photo. Zooming a photo can push a brighter
     region under them, so the scrim deepens by the same amount it brightens. */
  .services-grid .service-card__overlay,
  .services-grid--filtered .service-card__overlay {
    transition: background-color 320ms ease;
  }

  .services-grid .service-card:hover .service-card__overlay,
  .services-grid--filtered .service-card:hover .service-card__overlay,
  .services-grid .service-card:focus-within .service-card__overlay,
  .services-grid--filtered .service-card:focus-within .service-card__overlay {
    background-color: #00000080;
  }

  .services-grid .service-card:hover .service-card__details,
  .services-grid--filtered .service-card:hover .service-card__details {
    background-color: #ffffff66;
    border-color: #ffffff80;
  }

  /* Technology cards: same language, softer lift — they carry no overlay and
     their media is a separate `.rounded` box that already clips. */
  .technology-carousel__slide .technology-card {
    transition:
      opacity 520ms ease var(--leap-delay, 0ms),
      transform 520ms cubic-bezier(0.22, 1, 0.36, 1) var(--leap-delay, 0ms),
      translate 320ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .technology-carousel__slide .technology-card:hover,
  .technology-carousel__slide .technology-card:focus-within {
    translate: 0 -0.375rem;
  }

  /* The shadow goes on the media box, NOT the card: a technology card has no
     background of its own and no padding, so a card-level shadow drew a halo
     around bare text with its edge touching "Learn more". The `.rounded` media
     box is the only real surface here, so it is what lifts off the page. */
  .technology-carousel__slide .technology-card > .rounded {
    transition: box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .technology-carousel__slide .technology-card:hover > .rounded,
  .technology-carousel__slide .technology-card:focus-within > .rounded {
    box-shadow: 0 1.125rem 2rem -0.75rem rgb(16 24 40 / 30%);
  }

  .technology-carousel__slide .technology-card img.full-image {
    transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }

  .technology-carousel__slide .technology-card:hover img.full-image,
  .technology-carousel__slide .technology-card:focus-within img.full-image {
    transform: scale(1.06);
  }

  /* "Learn more" already changes colour on hover from the theme; the arrow
     nudging out is what ties it to the card-level hover. */
  .technology-carousel__slide .technology-card .button-icon {
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .technology-carousel__slide .technology-card:hover .button-icon,
  .technology-carousel__slide .technology-card:focus-within .button-icon {
    transform: translate3d(0.2rem, -0.2rem, 0);
  }
}

/* Staggered entrance for the technology carousel, so a row of three arrives as
   a wave rather than a block. `--leap-delay` is the reveal system's own hook
   (leap-foundation.js tags `[data-reveal]` with .leap-reveal and observes it;
   the technology cards carry that attribute).

   The services grid needs NOTHING here: it is a `[data-stagger-list]`, so the
   same JS already writes an INLINE `--leap-delay` of index*45ms (capped at 8)
   onto every card — an inline style no stylesheet rule can override. Do not
   add nth-child delays there; they are silently dead. */
.technology-carousel__slide:nth-child(3n + 2) .technology-card {
  --leap-delay: 70ms;
}

.technology-carousel__slide:nth-child(3n + 3) .technology-card {
  --leap-delay: 140ms;
}

/* Initials fallback for a team member added without a headshot (Dr. Kodra,
   2026-09-03) — reuses the existing photo boxes' size/position so the card
   grid and provider-bio head layout don't need their own variant rules. */
.team-card__initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--leap-primary);
  font-weight: 600;
  font-size: 2.5rem;
  letter-spacing: 0.05em;
}
.provider-bio__photo--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--leap-primary) 8%, #f2f4f7);
  color: var(--leap-primary);
  font-weight: 600;
  font-size: 1.75rem;
  letter-spacing: 0.05em;
}

/* Subway directions block in the Location & Hours card (added 2026-09-04).
   MTA official bullet colors; R/W use black ink on yellow per the MTA standard. */
.subway-directions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}
.subway-directions__head {
  margin: 0;
}
.subway-directions__list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.subway-station {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.subway-station__name {
  font-size: 1rem;
  line-height: 1.35;
  color: inherit;
}
.subway-bullets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.subway-bullet {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: #6d6e71;
}
.subway-bullet.is-blue { background: #0039a6; }
.subway-bullet.is-brown { background: #996633; }
.subway-bullet.is-red { background: #ee352e; }
.subway-bullet.is-green { background: #00933c; }
.subway-bullet.is-yellow { background: #fccc0a; color: #000; }
@media (max-width: 479px) {
  .subway-bullet { width: 1.85rem; height: 1.85rem; font-size: 0.95rem; }
}