.elementor-4452 .elementor-element.elementor-element-4900b0e{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overflow:hidden;--padding-top:80px;--padding-bottom:80px;--padding-left:0px;--padding-right:0px;}.elementor-4452 .elementor-element.elementor-element-55c15c27{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4452 .elementor-element.elementor-element-3d95f90f{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:24px 48px;--row-gap:24px;--column-gap:48px;}.elementor-4452 .elementor-element.elementor-element-247c53a6{--display:flex;}.elementor-4452 .elementor-element.elementor-element-247c53a6.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-4452 .elementor-element.elementor-element-7bad8d90{--grid-columns:1;}.elementor-4452 .elementor-element.elementor-element-6aa5d09d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:18px 18px;--row-gap:18px;--column-gap:18px;}.elementor-4452 .elementor-element.elementor-element-6aa5d09d.e-con{--flex-grow:1;--flex-shrink:0;}.elementor-4452 .elementor-element.elementor-element-92236c9{--swiper-slides-to-display:3;--swiper-slides-gap:10px;--arrow-prev-left-align:0%;--arrow-prev-translate-x:0px;--arrow-prev-left-position:-30px;--arrow-prev-top-align:50%;--arrow-prev-translate-y:-50%;--arrow-prev-top-position:0px;--arrow-next-right-align:0%;--arrow-next-translate-x:0%;--arrow-next-right-position:-30px;--arrow-next-top-align:50%;--arrow-next-translate-y:-50%;--arrow-next-top-position:0px;--arrow-normal-color:#81D4B8;--arrow-hover-color:#00687A;}.elementor-4452 .elementor-element.elementor-element-92236c9 .swiper-slide > .elementor-element{height:100%;}@media(max-width:1024px){.elementor-4452 .elementor-element.elementor-element-4900b0e{--padding-top:40px;--padding-bottom:40px;--padding-left:0px;--padding-right:0px;}.elementor-4452 .elementor-element.elementor-element-7bad8d90{--grid-columns:1;}.elementor-4452 .elementor-element.elementor-element-92236c9{--swiper-slides-to-display:2;}}@media(max-width:767px){.elementor-4452 .elementor-element.elementor-element-4900b0e{--padding-top:40px;--padding-bottom:40px;--padding-left:10px;--padding-right:10px;}.elementor-4452 .elementor-element.elementor-element-3d95f90f{--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:24px 24px;--row-gap:24px;--column-gap:24px;}.elementor-4452 .elementor-element.elementor-element-247c53a6{--width:260px;}.elementor-4452 .elementor-element.elementor-element-7bad8d90{--grid-columns:1;}.elementor-4452 .elementor-element.elementor-element-92236c9{--swiper-slides-to-display:1;}}@media(min-width:768px){.elementor-4452 .elementor-element.elementor-element-4900b0e{--content-width:1280px;}.elementor-4452 .elementor-element.elementor-element-247c53a6{--width:360px;}}@media(max-width:1024px) and (min-width:768px){.elementor-4452 .elementor-element.elementor-element-247c53a6{--width:300px;}}/* Start custom CSS for container, class: .elementor-element-4900b0e *//* "Who you'll see" (class mint-who), Saved Template 4452, shown on the hand service and Hand & Wrist Pain pages.
   The inner boxes lose Elementor's default 10px padding so the card, text and buttons line up with the heading,
   and the text column may shrink, so long lines wrap instead of running off the page. */
.elementor-4452 .elementor-element.elementor-element-4900b0e .mint-who__row,
.elementor-4452 .elementor-element.elementor-element-4900b0e .mint-who__card,
.elementor-4452 .elementor-element.elementor-element-4900b0e .mint-who__text,
.elementor-4452 .elementor-element.elementor-element-4900b0e .mint-who__buttons { --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; }
.elementor-4452 .elementor-element.elementor-element-4900b0e .mint-who__text { flex: 1 1 0; min-width: 0; }

/* Heading, row and carousel share the site’s own content width (1280px, the same as the "Our Services" carousel
   on these pages). It was 1080px, from when the block was one card beside text, which left it inset about 100px
   either side of everything else on the page — Juan, 18 September 2026.
   Heading and row share one centred width, so the block doesn't sit on the left with empty space to its right,
   and the heading stays in line with the card. 40px under the heading, like "Other conditions we treat". */
.elementor-4452 .elementor-element.elementor-element-4900b0e .mint-who__head,
.elementor-4452 .elementor-element.elementor-element-4900b0e .mint-who__row { width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; }
.elementor-4452 .elementor-element.elementor-element-4900b0e .mint-who__head { --padding-left: 0px; --padding-right: 0px; --padding-bottom: 40px; }

@media (max-width: 767px) {
  .elementor-4452 .elementor-element.elementor-element-4900b0e .mint-who__text { flex: 1 1 auto; }
}

/* The text column is now printed by [mint_who_intro] (WPCode snippet 4849), so it follows whoever is assigned to the
   page instead of naming one person here. The job title is deliberately not repeated: the card already shows it.
   The two buttons keep Elementor's button classes and so inherit the site's size, font, padding, radius and hover;
   only their fills were per-widget rules, so they are restored here: mint on "Book an appointment", white on "About". */
.elementor-4452 .elementor-element.elementor-element-4900b0e .mint-who__buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.elementor-4452 .elementor-element.elementor-element-4900b0e .mint-who__intro { margin: 0 0 20px; }
.elementor-4452 .elementor-element.elementor-element-4900b0e .mint-who__button { background-color: #81D4B8; color: #00687A; border: 1px solid #00687A;
  padding: 16px 32px; }   /* the old buttons’ padding, kept so they stay 47px tall: a 44px tap target */
.elementor-4452 .elementor-element.elementor-element-4900b0e .mint-who__button--ghost { background-color: #FFFFFF; }

/* TWO OR MORE CLINICIANS. The body class comes from snippet 4849, counted from the treats field, so one saved
   template serves both layouts. One clinician: the row above, a Loop Grid card beside the introduction. Two or more:
   the Loop Carousel, set up exactly like the "Our Services" carousel on the same pages (3 / 2 / 1 slides, arrows,
   fraction pagination, autoplay, 10px spacing, card template 269) — Juan, 18 September 2026, "just like Our Services
   does on the very same page". The snippet renders only the widget that applies, so the cards are never in the markup
   twice, and these rules hide whichever layout is not in use.

   The carousel sits directly in the section, NOT inside .mint-who__row: that row is a flex row with align-items
   center, which stopped the slides stretching and collapsed every card photo to a sliver. */
body.mint-who-many .elementor-4452 .elementor-element.elementor-element-4900b0e .mint-who__row { display: none; }
body.mint-who-one .elementor-4452 .elementor-element.elementor-element-4900b0e .mint-who__carousel { display: none; }
.elementor-4452 .elementor-element.elementor-element-4900b0e .mint-who__carousel { width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; }

/* The carousel arrows: the same circled Themify icon as the "Our Services" carousel, and the same mint. The icon is a
   widget setting (navigation_previous_icon / navigation_next_icon); the colour is set here because the widget's own
   arrow colour control compiled no rule, and without it the arrow inherited a near-white that barely showed on the
   beige (Juan, 18 September 2026: "the icon is not circled and has low contrast"). */
.elementor-4452 .elementor-element.elementor-element-4900b0e .mint-who__carousel .elementor-swiper-button { color: #81D4B8; }
.elementor-4452 .elementor-element.elementor-element-4900b0e .mint-who__carousel .elementor-swiper-button:hover,
.elementor-4452 .elementor-element.elementor-element-4900b0e .mint-who__carousel .elementor-swiper-button:focus-visible { color: #00687A; }

/* The carousel arrows sit 30px outside the content, as the "Our Services" arrows do. This section clips its overflow,
   which was harmless when the block was inset but hides the arrows now it runs the full content width, so the clip is
   lifted on desktop only — on tablet and phone it stays, because an element 30px outside a full-width container there
   would push the page sideways. Juan, 18 September 2026. */
@media (min-width: 1025px) { .elementor-4452 .elementor-element.elementor-element-4900b0e { --overflow: visible; overflow: visible; } }

/* ONE CLINICIAN, ON A PHONE. The row stacks, so the card sits above the introduction; it was still a fixed 260px,
   which left it marooned against a lot of empty space. Full width, with the text underneath (Juan, 18 September 2026). */
@media (max-width: 767px) {
  body.mint-who-one .elementor-4452 .elementor-element.elementor-element-4900b0e .mint-who__card { --width: 100%; max-width: 100%; }
  body.mint-who-one .elementor-4452 .elementor-element.elementor-element-4900b0e .mint-who__row { --align-items: stretch; }
}

/* ONE CLINICIAN, ON DESKTOP. Widening the block to the site's content width left the introduction 872px wide — over a
   hundred characters a line — and vertically centred against a 413px card, so it floated with 90px of air above and
   below (Juan, 18 September 2026: "the spacing on desktop still doesn't look great"). The paragraph is capped at a
   readable measure and the column starts level with the top of the card, so the remaining space sits in one place
   beside the card rather than in two. */
@media (min-width: 768px) {
  body.mint-who-one .elementor-4452 .elementor-element.elementor-element-4900b0e .mint-who__row { --align-items: flex-start; }
  body.mint-who-one .elementor-4452 .elementor-element.elementor-element-4900b0e .mint-who__text { max-width: 620px; }
}/* End custom CSS */