/* ============================================================
   Megan Roy Sports Physiotherapy — front-end CSS for MR widgets
   BEM classes, one block per widget. Mobile strategy: everything
   multi-column simply stacks to a single column below 860px —
   no repositioning tricks that could break under real content.
   ============================================================ */

/* Guards against the .mr-curve full-bleed breakout (left:50%/width:100vw/-50vw margin,
   see below) ever introducing a horizontal scrollbar — 100vw can exceed the visible
   viewport width by a scrollbar's worth in some browsers. */
body{ overflow-x:hidden; }

:root{
  --mr-navy:#0D1B3E;
  --mr-teal:#00BCD4;
  --mr-pink:#EC008C;
  --mr-purple:#7C3AED;
  --mr-light:#F0F4FA;
  --mr-ink:#14192B;
  --mr-gray:#6B7A8D;
  --mr-white:#FFFFFF;
  --mr-line:#E2E6F2;
  --mr-grad: linear-gradient(90deg, var(--mr-teal) 36%, var(--mr-pink) 85%);
  --mr-grad-vertical: linear-gradient(180deg, var(--mr-teal), var(--mr-pink) 50%, rgba(13,27,62,.1) 100%);
  --mr-font-display:'Barlow Condensed', 'Arial Narrow', sans-serif;
  --mr-font-body:'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mr-radius:16px;
  --mr-container:1200px;
}

/* ---------- reset-ish base for our own components only ---------- */
.mr-header, .mr-footer, .mr-hero, .mr-stats, .mr-split, .mr-services,
.mr-trusted-by, .mr-carousel, .mr-carousel-outer, .mr-cta-recovery, .mr-news, .mr-mobile-nav,
.mr-pillars, .mr-timeline, .mr-tag-banner, .mr-process, .mr-sdc, .mr-conditions, .mr-team-physio, .mr-inline-cta,
.mr-contact-details, .mr-enquiry-form{
  box-sizing:border-box;
  font-family:var(--mr-font-body);
  color:var(--mr-ink);
}
/* Positioning context for the optional top/bottom curvy-line divider (see .mr-curve
   below) — every section widget needs this so the curve anchors to itself, not to
   some further-up ancestor. .mr-header is already position:sticky, which works the
   same way as a containing block, so it's left alone. */
.mr-split, .mr-services, .mr-trusted-by, .mr-carousel, .mr-carousel-outer, .mr-news, .mr-mobile-nav,
.mr-pillars, .mr-timeline, .mr-tag-banner, .mr-process, .mr-sdc, .mr-conditions, .mr-team-physio, .mr-inline-cta,
.mr-contact-details, .mr-enquiry-form{
  position:relative;
}
.mr-header *, .mr-footer *, .mr-hero *, .mr-stats *, .mr-split *, .mr-services *,
.mr-trusted-by *, .mr-carousel *, .mr-cta-recovery *, .mr-news *, .mr-mobile-nav *,
.mr-pillars *, .mr-timeline *, .mr-tag-banner *, .mr-process *, .mr-sdc *, .mr-conditions *, .mr-team-physio *, .mr-inline-cta *,
.mr-contact-details *, .mr-enquiry-form *{
  box-sizing:border-box;
}
.mr-h2, .mr-hero__title{ font-family:var(--mr-font-display); text-transform:uppercase; text-wrap:balance; letter-spacing:-0.5px; margin:0; }
.mr-h2{ font-weight:600; font-size:clamp(2.25rem, 4.3vw, 3.75rem); line-height:1; color:var(--mr-navy); }
.mr-eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--mr-font-body); font-weight:500; font-size:12px; line-height:16px; letter-spacing:.7px;
  text-transform:uppercase; color:var(--mr-pink); margin:0 0 .6rem;
}
.mr-eyebrow__line{ display:block; width:32px; height:1px; background:currentColor; flex:none; }
.mr-subtitle{ max-width:640px; color:var(--mr-gray); font-size:16px; line-height:26px; letter-spacing:-0.5px; margin:.9rem 0 0; }
.mr-body{ font-size:16px; line-height:26px; letter-spacing:-0.5px; color:var(--mr-gray); margin:1rem 0 1rem; }
.mr-icon{ display:block; }
.mr-center{ text-align:center; margin-top:2rem; }

.mr-accent-teal{ color:var(--mr-teal); }
.mr-accent-grad{
  /* exact Figma spec for highlighted/gradient heading text — straight 0%→100% stops,
     kept separate from --mr-grad (36%/85%) which drives solid gradient backgrounds
     elsewhere (buttons, CTA card, footer mark) */
  background:linear-gradient(90deg, var(--mr-teal) 0%, var(--mr-pink) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- buttons ---------- */
.mr-btn-row{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.6rem; }
.mr-btn-row--center{ justify-content:center; }
.mr-btn{
  display:inline-flex; align-items:center; gap:.4rem; padding:12px 24px; border-radius:10px;
  font-weight:700; font-size:14px; line-height:20px; letter-spacing:-0.15px; text-decoration:none; border:2px solid transparent; transition:transform .15s ease, opacity .15s ease;
}
.mr-btn:hover{ transform:translateY(-2px); }
.mr-btn .mr-icon{ width:16px; height:16px; flex:none; }
.mr-btn .mr-icon--img{ object-fit:contain; }

/* Primary (pink) button "recipe" — the exact Figma spec for the booking CTA, shared by
   every pink button on the site (.mr-btn--pink used in the Hero / CTA banner / etc., the
   header Book Now button, and the mobile nav Book Now link) so they never drift apart. */
.mr-btn--pink, .mr-header__book, .mr-mobile-nav__book{
  background:rgba(236,0,140,1) !important; border:none !important;
  color:#fff !important; box-shadow:0px 10px 15px 0px rgba(236,0,140,0.3), 0px 4px 6px 0px rgba(236,0,140,0.3) !important;
}
/* Extra specificity bump (two classes) in case a theme/Elementor reset also ships box-shadow:none !important. */
.mr-btn.mr-btn--pink, a.mr-header__book, a.mr-mobile-nav__book{
  box-shadow:0px 10px 15px 0px rgba(236,0,140,0.3), 0px 4px 6px 0px rgba(236,0,140,0.3) !important;
}
.mr-btn--pink{ border-radius:10px; }
.mr-btn--teal-outline{
  background:rgba(0,188,212,0.15); border:1px solid rgba(0,188,212,0.4); color:var(--mr-teal);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.mr-btn--dark-outline{ background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.25); color:#fff; }
.mr-btn--white-border{ background:#fff; border:1px solid rgba(13,27,62,0.15); color:rgba(13,27,62,1); }
.mr-btn--white{ background:#fff; color:var(--mr-navy); }
.mr-btn--outline-navy{ background:transparent; border:1px solid rgba(0,188,212,0.3); border-radius:8px; color:var(--mr-navy); gap:8px; }
.mr-btn--outline-navy .mr-icon{ width:11px; height:12px; }

.mr-text-link{ color:var(--mr-pink); font-family:var(--mr-font-body); font-weight:600; text-decoration:none; display:inline-flex; gap:.35rem; margin-top:.75rem; }
.mr-text-link:hover{ text-decoration:underline; }

/* Optional decorative "curvy line" top/bottom divider — added via the shared Style-tab
   controls (MR_Curve_Trait) on every MR widget. A single continuous cubic-Bezier wave,
   1440×60 to match the Figma vector; colour is set per instance via {{WRAPPER}} selectors.
   Full-bleed breakout: many section widgets (.mr-services, .mr-sdc, .mr-pillars, .mr-timeline,
   .mr-trusted-by, .mr-news, .mr-tag-banner, …) are themselves a centred max-width:1200px box,
   not a full-width section — so a plain left:0/right:0 (relative to that box) only spans the
   1200px container, not the browser viewport. left:50% + width:100vw + a -50vw margin re-centres
   it on the *viewport* instead (the ancestor box's own horizontal centre already coincides with
   the viewport centre, since it's margin:0 auto), giving a true edge-to-edge wave regardless of
   which widget it's attached to. */
.mr-curve{ position:absolute; left:50%; right:auto; width:100vw; margin-left:-50vw; height:60px; line-height:0; pointer-events:none; z-index:2; }
.mr-curve--top{ top:0; }
.mr-curve--bottom{ bottom:0; }
.mr-curve--top .mr-curve__svg{ transform:scaleY(-1); }
.mr-curve__svg{ display:block; width:100%; height:100%; }
.mr-curve__svg path{ fill:#FFFFFF; }

.mr-pill{ display:inline-flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.35);
  color:#fff; font-size:.75rem; font-weight:700; letter-spacing:.12em; padding:.5rem 1rem; border-radius:999px; }
.mr-pill__dot{ width:7px; height:7px; border-radius:50%; background:var(--mr-teal); }
/* Inner-page hero (hero_style: page — About/Service/Team/Contact, not the
   Homepage) uses a light grey dot instead of the Homepage's teal one. */
.mr-hero--page .mr-pill__dot{ background:rgba(229, 231, 235, 1); }

.mr-badge{ position:absolute; display:flex; align-items:center; gap:.5rem; padding:.6rem 1.1rem; border-radius:12px; font-size:.8rem; font-weight:600; line-height:1.3; max-width:220px; box-shadow:0 12px 30px rgba(13,27,62,.25); }
.mr-badge .mr-icon{ width:18px; height:18px; flex:none; }
.mr-badge .mr-icon--img{ object-fit:contain; }
.mr-badge--dark{ background:var(--mr-navy); color:#fff; bottom:-1rem; left:1.5rem; }
.mr-badge--teal{ background:var(--mr-teal); color:#fff; top:1.5rem; left:1.5rem; }
.mr-badge--pink{ background:var(--mr-pink); color:#fff; top:1.5rem; right:1.5rem; }
.mr-badge--white-accent{ background:#fff; color:var(--mr-navy); border-bottom:4px solid var(--mr-teal); top:1.5rem; left:1.5rem; }
/* Large "stat card" size — e.g. About's "20+ Yrs Experience" / "Warm, Friendly & Caring
   Personality" floating over the bio/values photo. Bigger type, bleeds off the image edge. */
.mr-badge--stat{
  max-width:200px; padding:1rem 1.25rem; border-radius:12px; font-family:var(--mr-font-display);
  font-weight:600; font-size:24px; line-height:1; gap:.25rem; box-shadow:0 20px 25px rgba(0,0,0,.1), 0 8px 10px rgba(0,0,0,.1);
}
.mr-badge--stat.mr-badge--dark{ bottom:2rem; left:-1.5rem; border:1px solid rgba(0,188,212,.3); }
.mr-badge--stat.mr-badge--teal{ top:1.5rem; right:-1.5rem; left:auto; background:linear-gradient(135deg, var(--mr-teal) 0%, #0097A7 100%); }
.mr-badge--stat.mr-badge--pink{ bottom:2rem; right:-1.5rem; left:auto; top:auto; background:linear-gradient(135deg, var(--mr-pink) 0%, #C0007A 100%); }
.mr-badge--stat.mr-badge--white-accent{ top:1.5rem; left:-1.5rem; }
/* Explicit corner override, when a badge's default corner needs changing per instance. */
.mr-badge--top-left{ top:1.5rem; bottom:auto; left:1.5rem; right:auto; }
.mr-badge--top-right{ top:1.5rem; bottom:auto; right:1.5rem; left:auto; }
.mr-badge--bottom-left{ bottom:1.5rem; top:auto; left:1.5rem; right:auto; }
.mr-badge--bottom-right{ bottom:1.5rem; top:auto; right:1.5rem; left:auto; }
.mr-badge--stat.mr-badge--top-left{ top:1.5rem; left:-1.5rem; bottom:auto; right:auto; }
.mr-badge--stat.mr-badge--top-right{ top:1.5rem; right:-1.5rem; bottom:auto; left:auto; }
.mr-badge--stat.mr-badge--bottom-left{ bottom:2rem; left:-1.5rem; top:auto; right:auto; }
.mr-badge--stat.mr-badge--bottom-right{ bottom:2rem; right:-1.5rem; top:auto; left:auto; }

/* ============================================================
   HEADER
   ============================================================ */
.mr-header{ position:sticky; top:0; z-index:40; background:#fff; transition:background-color .25s ease, box-shadow .25s ease; }
/* Elementor wraps every widget in its own container(s); if any ancestor between the
   header and the page ends up with overflow other than visible (or a transform, which
   also breaks position:sticky), the sticky header silently stops sticking. Force the
   header's own Elementor wrappers to stay non-clipping so sticky always has room to work —
   if it's still not sticking after this, check the Section/Column that holds the header in
   Elementor's Advanced tab for "Overflow: Hidden" or a Motion Effects transform. */
.elementor-widget-mr-header,
.elementor-widget-mr-header > .elementor-widget-container{
  overflow:visible !important;
}
/* "Transparent over hero" mode (Header widget → Layout → Transparent over hero).
   Starts see-through and out of normal flow so it floats over the hero section that
   follows it, instead of pushing that hero down or showing its own white bar; JS
   (mr-frontend.js) removes this class once the visitor scrolls past the hero, at
   which point the base .mr-header rule above (position:sticky, white background)
   takes over as the normal solid nav bar. */
.mr-header--transparent{
  position:absolute; top:0; left:0; right:0; background:transparent; box-shadow:none;
}
.mr-header--transparent .mr-header__link{ color:#fff; }
.mr-header--transparent .mr-header__link.is-active, .mr-header--transparent .mr-header__link:hover{ color:#fff; border-color:#fff; }
.mr-header--transparent .mr-header__name{ color:#fff; }
.mr-header--transparent .mr-header__tagline{ color:rgba(255,255,255,.75); }
.mr-header--transparent .mr-header__burger span{ background:#fff; }
/* While the mobile menu is open (mr-frontend.js adds this class), force the
   transparent header solid/dark-on-white again — it now sits directly above
   the menu's own solid white dropdown, so the see-through white-on-photo
   look would otherwise clash with it right at the seam. */
.mr-header--transparent.mr-header--menu-open{ background:#fff; box-shadow:0 2px 8px rgba(13,27,62,.08); }
.mr-header--transparent.mr-header--menu-open .mr-header__link{ color:var(--mr-ink); }
.mr-header--transparent.mr-header--menu-open .mr-header__link.is-active,
.mr-header--transparent.mr-header--menu-open .mr-header__link:hover{ color:var(--mr-pink); border-color:var(--mr-pink); }
.mr-header--transparent.mr-header--menu-open .mr-header__name{ color:var(--mr-navy); }
.mr-header--transparent.mr-header--menu-open .mr-header__tagline{ color:#8891AC; }
.mr-header--transparent.mr-header--menu-open .mr-header__burger span{ background:var(--mr-navy); }
.mr-header__inner{ max-width:1440px; margin:0 auto; padding:5px 52px; display:flex; align-items:center; gap:1.5rem; }
.mr-header__brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; margin-right:auto; }
.mr-header__mark--text{ display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%;
  background:var(--mr-grad); color:#fff; font-family:var(--mr-font-display); font-weight:700; font-size:1rem; }
/* Uploaded logo image: sized by height only (see the Style tab's "Logo image height"
   slider), width follows the image's own aspect ratio — no forced square/circle crop,
   since a real logo file (icon + wordmark together) isn't a square icon. */
.mr-header__mark--img{ width:auto; height:52px; border-radius:0; object-fit:contain; }
.mr-header__wordmark{ display:flex; flex-direction:column; line-height:1.2; }
.mr-header__name{ font-family:var(--mr-font-display); font-weight:600; font-size:1.15rem; color:var(--mr-navy); text-transform:uppercase; }
.mr-header__tagline{ font-size:.72rem; color:#8891AC; letter-spacing:.04em; }
.mr-header__nav{ display:flex; align-items:stretch; align-self:stretch; gap:1.8rem; }
.mr-header__link{
  display:flex; align-items:center;
  text-decoration:none; color:var(--mr-ink); font-weight:400; font-size:26px; line-height:20px; letter-spacing:-0.15px;
  padding-bottom:6px; border-bottom:4px solid transparent;
}
.mr-header__link.is-active, .mr-header__link:hover{ border-color:var(--mr-pink); color:var(--mr-pink); font-weight:700; }
.mr-header__book{ display:inline-flex; align-items:center; gap:8px; padding:12px 24px; border-radius:10px;
  font-weight:700; font-size:22px; line-height:24px; letter-spacing:-0.18px; text-decoration:none; white-space:nowrap; }
.mr-header__book .mr-icon{ width:19px; height:19px; flex:none; }
.mr-header__book .mr-icon--img, .mr-mobile-nav__book .mr-icon--img{ object-fit:contain; }
.mr-header__burger{ display:none; flex-direction:column; gap:5px; width:34px; height:34px; align-items:center; justify-content:center; background:none; border:0; cursor:pointer; }
.mr-header__burger span{ display:block; width:22px; height:2px; background:var(--mr-navy); }
/* Solid white background regardless of header state — when the header is in
   "Transparent over hero" mode (see .mr-header--transparent above) it has no
   background of its own, so without this the open mobile menu had nothing
   behind it and its links floated unreadable on top of the hero photo/text. */
.mr-mobile-nav{ display:none; flex-direction:column; padding:1rem 1.5rem 1.5rem; border-top:1px solid var(--mr-line); background:#fff; box-shadow:0 16px 32px rgba(13,27,62,.18); }
.mr-mobile-nav.is-open{ display:flex; }
.mr-mobile-nav__link{ padding:.7rem 0; text-decoration:none; color:var(--mr-ink); font-weight:600; border-bottom:1px solid var(--mr-line); }
.mr-mobile-nav__link.is-active{ color:var(--mr-pink); }
.mr-mobile-nav__book{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:1rem; text-align:center; padding:.8rem; border-radius:999px; text-decoration:none; font-weight:600; }
.mr-mobile-nav__book .mr-icon{ width:18px; height:18px; flex:none; }

/* ============================================================
   HERO
   ============================================================ */
.mr-hero{
  position:relative; min-height:640px; height:100%; display:flex; align-items:center; padding:6rem 1.5rem;
  background-color:var(--mr-navy);
  background-image:var(--mr-hero-bg, none); background-size:cover; background-position:center;
}
/* "Other pages" hero style (see hero_style): a shorter banner with the content sitting
   at the bottom edge instead of vertically centered — extra top padding clears a
   transparent-over-hero header, and no bottom padding lets the content sit flush above
   the section's own curvy-line divider / the next section down. */
.mr-hero--page{ padding:12rem 1.5rem 3rem; align-items:flex-end; }
/* If the Section/Column this widget sits in has its own explicit height (e.g. a "Min
   Height" set on the Elementor Section itself, taller than our own min-height above),
   our <section> otherwise only takes its own natural height and sits top-anchored
   inside that taller box — which pushes the (correctly self-centered) content toward
   the top of a short box floating inside a tall visible photo area, reading as "stuck
   near the bottom" of the overall hero image. Stretching to 100% height here is a
   no-op when no ancestor defines a height (the normal case), and only kicks in when
   one does, so the flex centering above actually centers within the full visible area. */
.elementor-widget-mr-home-hero,
.elementor-widget-mr-home-hero > .elementor-widget-container{
  height:100%;
}
.mr-hero__scrim{ position:absolute; inset:0; }
.mr-hero__inner{ position:relative; max-width:var(--mr-container); margin:0 auto; max-width:720px; margin-left:max(1.5rem, calc((100% - var(--mr-container)) / 2)); }
.mr-hero__title{ color:#fff; font-weight:600; font-size:clamp(2.5rem, 6.25vw, 5.625rem); line-height:.96; margin:1.3rem 0 1.1rem; }
.mr-hero__intro{ color:#fff; font-size:18px; line-height:28px; letter-spacing:-0.5px; max-width:560px; margin:0; }
.mr-hero__trust{ list-style:none; margin:2.2rem 0 0; padding:0; display:flex; flex-wrap:nowrap; align-items:center; row-gap:1rem; }
.mr-hero__trust li{ display:flex; align-items:center; gap:.5rem; color:#fff; font-size:20px; line-height:1; font-weight:600; letter-spacing:-0.5px; padding:0 1rem; border-left:1px solid rgba(255,255,255,.3); white-space:nowrap; }
.mr-hero__trust li:first-child{ padding-left:0; border-left:0; }
.mr-hero__trust .mr-icon{ color:var(--mr-teal); width:18px; height:18px; flex:none; }
.mr-hero__trust .mr-icon--img{ object-fit:contain; }

/* ============================================================
   STATS BAR
   ============================================================ */
.mr-stats{ background:var(--mr-teal); padding:32px 0; position:relative; overflow:hidden; }
.mr-stats__grid{ max-width:1280px; margin:0 auto; padding:0 32px; display:grid; grid-template-columns:repeat(3,1fr); text-align:center; gap:1.5rem; position:relative; z-index:1; }
.mr-stats__item{ position:relative; }
.mr-stats__item:not(:last-child)::after{ content:''; position:absolute; top:0; bottom:0; right:calc(-.75rem - 1px); width:1px; background:rgba(13,27,62,.15); }
.mr-stats__number, .mr-stats__suffix{ font-family:var(--mr-font-display); font-weight:600; font-size:36px; line-height:40px; letter-spacing:-0.5px; color:var(--mr-navy); font-variant-numeric:tabular-nums; }
.mr-stats__label{ display:block; color:rgba(13,27,62,.7); font-weight:400; font-size:12px; line-height:16px; letter-spacing:.7px; margin-top:.3rem; }
/* Decorative wave at the bottom edge, transitioning into whatever section follows
   (light by default — see the Style tab's "Wave colour" control). Approximated
   from Figma (only a bounding box was available for this vector, not its path). */
.mr-stats__wave{ position:absolute; left:0; right:0; bottom:0; width:100%; height:50px; display:block; z-index:0; pointer-events:none; }

/* ============================================================
   SPLIT FEATURE
   ============================================================ */
.mr-split{ padding:5rem 1.5rem; }
.mr-split--bg-light{ background:var(--mr-light); }
.mr-split--bg-white{ background:#fff; }
.mr-split--bg-navy{ background:var(--mr-navy); color:#fff; }
.mr-split--bg-navy .mr-body{ color:#fff; }
.mr-split--bg-navy .mr-h2{ color:#fff; }
.mr-split--bg-navy .mr-icon-list__text strong{ color:#fff; }
.mr-split--bg-navy .mr-icon-list__text span{ color:#C9CEE4; }
.mr-split--bg-navy .mr-icon-list__ic{ background:rgba(255,255,255,.1); }
.mr-split__grid{ max-width:var(--mr-container); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center; }
.mr-split--reverse .mr-split__grid{ direction:rtl; }
.mr-split--reverse .mr-split__grid > *{ direction:ltr; }
.mr-split__media{ position:relative; }
.mr-split__media img{ width:100%; height:auto; border-radius:var(--mr-radius); display:block; }
.mr-split__subheading{ color:var(--mr-gray); font-size:14px; line-height:20px; letter-spacing:-0.3px; margin:-.6rem 0 0; }
.mr-split--bg-navy .mr-split__subheading{ color:#C9CEE4; }
/* Optional row of small stat cards under the body copy (e.g. "10+ Sports Clubs & Teams") —
   distinct from the "badges" repeater's size:"stat" option, which floats a single large stat
   card over the image side instead. */
.mr-split__stats{ display:flex; gap:1rem; margin-top:1.5rem; flex-wrap:wrap; }
.mr-split__stat{
  position:relative; overflow:hidden; flex:1 1 140px; text-align:center;
  background:#fff; border:1px solid var(--mr-line); border-radius:12px; padding:1.25rem 1rem;
}
.mr-split__stat::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--mr-teal),var(--mr-pink)); }
.mr-split__stat:nth-child(even)::before{ background:linear-gradient(90deg,var(--mr-pink),var(--mr-teal)); }
.mr-split__stat-number{ display:block; font-family:var(--mr-font-display); font-weight:500; font-size:2rem; line-height:1; margin-bottom:.4rem; }
.mr-split__stat-label{ display:block; font-size:12px; color:var(--mr-gray); }
.mr-split--bg-navy .mr-split__stat{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1); }
.mr-split--bg-navy .mr-split__stat-label{ color:#C9CEE4; }
.mr-icon-list{ list-style:none; margin:1.6rem 0 0; padding:0; display:grid; gap:1rem; }
/* Items-per-row is controlled by the widget's responsive "Items per row" control (see
   items_columns in MR_Split_Feature_Widget), which targets this same selector — this is
   just the fallback so the list still looks right before/without that inline CSS. */
.mr-icon-list--grid{ grid-template-columns:repeat(2,1fr); }
/* Optional "white card" item style — background, padding, shadow — vs. the default plain
   icon + text with no background, e.g. Services' "Personalised Care" quick-fact list. */
.mr-icon-list--card li{
  background:#fff; border:1px solid rgba(13,27,62,.05); border-radius:12px;
  padding:1rem 1.1rem; box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.mr-split--bg-navy .mr-icon-list--card li{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.1); box-shadow:none; }
/* Stacked full-width rows under the photo (items_position:"media") — e.g. About's
   "Meet Megan Roy" credential list and "Core Values" value list: white card rows
   with a border, not the plain 2-col grid used in the text column. */
/* Flex (not grid) so each row sizes to its own content by default — the editor's
   per-item "Width" select (item_width: full / half / third) then applies one of the
   .mr-icon-list--w-* classes below, rather than every row being forced to stretch
   full width. */
.mr-icon-list--stacked{ display:flex; flex-wrap:wrap; margin-top:1.25rem; gap:1rem; }
.mr-icon-list--stacked li{
  background:#fff; border:1px solid var(--mr-line); border-radius:12px; padding:1rem;
  flex:0 0 auto; max-width:100%;
}
.mr-icon-list--stacked li.mr-icon-list--w-full{ flex-basis:100%; width:100%; }
.mr-icon-list--stacked li.mr-icon-list--w-half{ flex-basis:calc(50% - .5rem); width:calc(50% - .5rem); }
.mr-icon-list--stacked li.mr-icon-list--w-third{ flex-basis:calc(33.333% - .667rem); width:calc(33.333% - .667rem); }
/* On a navy section (e.g. About's "Core Values") the confirmed Figma spec has no card
   background on these rows — just the icon chip and text directly on the navy fill. */
.mr-split--bg-navy .mr-icon-list--stacked li{ background:none; border:none; padding:0; }
.mr-icon-list li{ display:flex; gap:.75rem; align-items:flex-start; }
.mr-icon-list__ic{ flex:none; width:38px; height:38px; border-radius:10px; background:var(--mr-light); color:var(--mr-teal); display:flex; align-items:center; justify-content:center; }
/* A per-item custom chip colour (see the repeater's "Icon chip colour" field) is always
   a solid/saturated fill in this design (e.g. Core Values' teal/pink gradient chips),
   so the glyph switches to white rather than staying the Style tab's icon colour. */
.mr-icon-list__ic[style]{ color:#fff; }
.mr-icon-list__ic .mr-icon{ width:19px; height:19px; flex:none; }
.mr-icon-list__ic .mr-icon--img{ object-fit:contain; }
.mr-icon-list__text{ display:flex; flex-direction:column; gap:.3rem; }
.mr-icon-list__text strong{ color:var(--mr-navy); font-weight:600; font-size:14px; line-height:20px; letter-spacing:-0.5px; }
.mr-icon-list__text span{ color:var(--mr-gray); font-size:14px; line-height:23px; letter-spacing:-0.5px; }

/* ============================================================
   SERVICES GRID
   ============================================================ */
.mr-services{ padding:5rem 1.5rem; max-width:var(--mr-container); margin:0 auto; }
.mr-section-head{ max-width:640px; margin:0 auto 3rem; text-align:center; }
.mr-section-head .mr-eyebrow, .mr-section-head .mr-subtitle{ margin-left:auto; margin-right:auto; }
/* Optional separator line under the section head — same gradient underline used
   under Team Physio's heading (.mr-team-physio__head-line), reused here as a
   plain optional switcher ("show_head_line") since .mr-section-head is shared
   by several widgets. Sits after the subtitle/intro when one is shown, else
   right under the heading — see mr_head_line_html() in mr-elementor-widgets.php. */
.mr-section-head__line{
  display:block; width:96px; height:2px; margin:1.5rem auto 0;
  background:linear-gradient(90deg, var(--mr-teal), var(--mr-pink));
}
.mr-services__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
/* display:flex column so the tag pills (see .mr-service-card__tags below) can be pinned
   to the card's bottom edge with margin-top:auto, lining up across a row of cards even
   when their descriptions run to different lengths. */
.mr-service-card{
  position:relative; display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--mr-light); border-radius:var(--mr-radius); padding:2rem;
  transition:transform .15s ease, background-color .2s ease, color .2s ease;
}
.mr-service-card h3, .mr-service-card p, .mr-service-card__icon, .mr-service-card__link{ transition:color .2s ease, background-color .2s ease; }
/* Optional corner badge (e.g. "Popular") for cards with no photo — mirrors the Service Detail
   Cards' photo badge treatment (solid pink pill) but positioned top-right since there's no
   photo to float over. */
.mr-service-card__badge{
  position:absolute; top:1.25rem; right:1.25rem; background:linear-gradient(135deg, #EC008C 0%, #C0007A 100%);
  color:#fff; font-size:11px; font-weight:600; letter-spacing:-0.2px; padding:4px 12px; border-radius:999px;
}
.mr-service-card--featured .mr-service-card__badge{ background:#fff; color:var(--mr-pink); }
a.mr-service-card:hover{ transform:translateY(-4px); }
.mr-service-card__icon{ width:52px; height:52px; border-radius:14px; color:var(--mr-teal); display:flex; align-items:center; justify-content:center; margin-bottom:1.2rem; }
.mr-service-card__icon .mr-icon{ width:24px; height:24px; flex:none; }
.mr-service-card__icon .mr-icon--img{ object-fit:contain; }
/* A per-card custom chip colour (see the repeater's "Icon chip colour" field — used e.g.
   to alternate teal/pink on About's Qualifications cards) is a solid fill, so the glyph
   switches to white rather than the Style tab's single icon colour. */
.mr-service-card__icon[style]{ color:#fff; }
.mr-service-card h3{ font-family:var(--mr-font-display); font-weight:600; font-size:20px; line-height:28px; letter-spacing:0; margin:0 0 .6rem; color:var(--mr-navy); }
.mr-service-card p{ margin:0; color:var(--mr-gray); font-size:14px; line-height:23px; letter-spacing:-0.5px; }
/* CTA card (6th service card) — exact Figma spec: diagonal gradient, 28px padding,
   two soft decorative circles bleeding off the top-right/bottom-left corners, and
   everything left-aligned + content-width (not stretched to the card's full width). */
.mr-service-card--cta{
  background:linear-gradient(135deg, #EC008C 0%, #00BCD4 100%); color:#fff;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:20px;
  padding:28px; position:relative; overflow:hidden;
}
.mr-service-card--cta h3{ color:#fff; margin:0; }
.mr-service-card--cta p{ color:rgba(255,255,255,.8); margin:0; }
.mr-service-card--cta .mr-service-card__icon{
  width:48px; height:48px; border-radius:12px; background:rgba(255,255,255,.2); color:#fff; margin:0;
}
.mr-service-card--cta .mr-btn--white{
  width:max-content; padding:12px 20px; gap:8px; border-radius:8px; text-decoration:underline;
  box-shadow:0px 4px 6px rgba(0,0,0,.1), 0px 10px 15px rgba(0,0,0,.1);
}
.mr-service-card--cta .mr-btn--white .mr-icon{ width:11px; height:12px; color:var(--mr-navy); }
.mr-service-card--cta::before{
  content:""; position:absolute; top:-64px; right:-64px; width:128px; height:128px;
  border-radius:9999px; background:rgba(255,255,255,.1); pointer-events:none;
}
.mr-service-card--cta::after{
  content:""; position:absolute; bottom:-48px; left:-48px; width:96px; height:96px;
  border-radius:9999px; background:rgba(255,255,255,.1); pointer-events:none;
}
/* Section-background variants — the same card grid reused for Core Values /
   Qualifications & Registrations on the About page (and anywhere else a
   plain N-card grid is needed), not just the Homepage Services section. */
.mr-services--bg-white .mr-service-card:not(.mr-service-card--cta){
  border:1px solid rgba(229,231,235,1); box-shadow:0px 1px 2px 0px rgba(0,0,0,.05);
}
/* Optional centered layout for the card content (icon + heading + body), e.g. for a
   grid of simple value/credential cards rather than the left-aligned services list. */
.mr-services--center .mr-service-card:not(.mr-service-card--cta){ text-align:center; }
.mr-services--center .mr-service-card:not(.mr-service-card--cta) .mr-service-card__icon{ margin-left:auto; margin-right:auto; }
.mr-services--bg-light{ background:var(--mr-light); }
.mr-services--bg-navy{
  background:var(--mr-navy); color:#fff; position:relative; overflow:hidden; z-index:0;
}
.mr-services--bg-navy .mr-h2{ color:#fff; }
/* "Outline only" card style — border, no fill, e.g. a navy section's method/approach
   cards. Border colour follows the section it's on (translucent white on navy,
   translucent navy everywhere else) so it stays readable in either context. */
.mr-services--outline .mr-service-card:not(.mr-service-card--cta){
  background:transparent; border:1px solid rgba(13,27,62,.1);
}
.mr-services--bg-navy.mr-services--outline .mr-service-card:not(.mr-service-card--cta){
  border-color:rgba(255,255,255,.1);
}
/* When a per-card custom icon colour is set (icon_bg) AND the grid is in outline mode,
   the icon chip itself goes translucent (tinted background + matching border) with a
   coloured glyph, instead of the normal solid-fill/white-glyph treatment — color-mix()
   derives the tint straight from the same colour so no extra control is needed. Falls
   back to the plain solid chip in browsers without color-mix() support. */
.mr-services--outline .mr-service-card__icon[style]{
  background:var(--mr-icon-accent) !important; color:#fff;
}
@supports (background: color-mix(in srgb, red 10%, transparent)){
  .mr-services--outline .mr-service-card__icon[style]{
    background:color-mix(in srgb, var(--mr-icon-accent) 12%, transparent) !important;
    border:1px solid color-mix(in srgb, var(--mr-icon-accent) 25%, transparent);
    color:var(--mr-icon-accent) !important;
  }
}
/* Featured card — the pink→teal gradient treatment reused for a "most popular" or
   "elite athletes" highlight card, e.g. Services' Treatment Categories/Patient Groups. */
.mr-service-card--featured{
  background:linear-gradient(135deg, var(--mr-pink) 0%, var(--mr-teal) 100%) !important;
  border:none !important; color:#fff;
}
/* !important: the Style tab's "Card title colour" control targets
   .mr-service-card:not(.mr-service-card--cta) h3 with Elementor's own higher-specificity
   wrapper selector, which otherwise wins over a plain class rule here and silently turns
   the featured card's heading navy again. */
.mr-service-card--featured h3{ color:#fff !important; }
.mr-service-card--featured p{ color:rgba(255,255,255,.85); }
.mr-service-card--featured .mr-service-card__icon{ background:rgba(255,255,255,.2) !important; color:#fff; border:none; }
.mr-service-card--featured .mr-service-card__tag{ background:rgba(255,255,255,.2); border-color:transparent; color:#fff; }
.mr-service-card--featured .mr-service-card__link{ color:#fff; }
/* Dark card — a plainer highlight than Featured's gradient: solid navy, white text, e.g.
   a "Popular" middle card in a 3-up row (Team & Affiliations' "Work With Megan"). */
.mr-service-card--dark{ background:var(--mr-navy) !important; border:none !important; color:#fff; overflow:hidden; }
.mr-service-card--dark::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--mr-teal), var(--mr-pink));
}
.mr-service-card--dark h3{ color:#fff !important; }
.mr-service-card--dark p{ color:rgba(255,255,255,.7); }
.mr-service-card--dark .mr-service-card__icon{ background:rgba(255,255,255,.12) !important; color:#fff; border:none; }
.mr-service-card--dark .mr-service-card__tag{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.1); color:#fff; }
.mr-service-card--dark .mr-service-card__link{ color:var(--mr-teal); }
.mr-service-card--dark .mr-service-card__badge{ background:linear-gradient(135deg, #EC008C 0%, #C0007A 100%); color:#fff; }
/* Small tag pills under a card's body copy, e.g. "Age 5+" / "All Sports". */
/* margin-top:auto pins the tag row to the bottom of the card (see the flex column on
   .mr-service-card above) instead of sitting right under the description, so tags line
   up along the same baseline across a row even when descriptions differ in length. */
.mr-service-card__tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:auto; padding-top:1rem; }
.mr-service-card__tag{
  display:inline-flex; align-items:center; padding:.25rem .65rem; border-radius:9999px;
  background:rgba(0,188,212,.1); border:1px solid rgba(0,188,212,.2); color:var(--mr-teal);
  font-size:12px; line-height:16px; letter-spacing:-0.2px;
}
.mr-services--center .mr-service-card__tags{ justify-content:center; }
/* Visible "Enquire Now"-style link copy at the bottom of a card — the whole card is
   already the clickable link, this is just styled text, not a nested anchor. Pinned to
   the bottom the same way the tag pills are. */
.mr-service-card__link{
  display:inline-flex; align-items:center; gap:8px; margin-top:auto; padding-top:1rem;
  color:var(--mr-teal); font-weight:600; font-size:14px; line-height:20px; letter-spacing:-0.15px;
}
.mr-service-card__link .mr-icon{ width:11px; height:12px; flex:none; }
.mr-services--center .mr-service-card__link{ justify-content:center; }
.mr-services--bg-navy .mr-subtitle{ color:#C9CEE4; }
.mr-services--bg-navy .mr-service-card:not(.mr-service-card--cta){ background:rgba(255,255,255,.06); }
.mr-services--bg-navy .mr-service-card:not(.mr-service-card--cta) h3{ color:#fff; }
.mr-services--bg-navy .mr-service-card:not(.mr-service-card--cta) p{ color:#C9CEE4; }
/* Soft teal/pink glows echoing the Figma navy sections elsewhere on About. */
.mr-services--bg-navy::before, .mr-services--bg-navy::after{
  content:""; position:absolute; border-radius:9999px; filter:blur(64px); pointer-events:none; z-index:-1;
}
.mr-services--bg-navy::before{ top:-80px; right:10%; width:288px; height:288px; background:radial-gradient(circle, rgba(0,188,212,.35), transparent 70%); }
.mr-services--bg-navy::after{ bottom:-100px; left:8%; width:256px; height:256px; background:radial-gradient(circle, rgba(236,0,140,.3), transparent 70%); }
/* "Navy (plain)" section background option — same navy background/text rules above,
   just without the decorative glow. */
.mr-services--bg-navy.mr-services--no-glow::before, .mr-services--bg-navy.mr-services--no-glow::after{ display:none; }
/* Card hover effect (Layout tab "Card hover effect") — a hover interaction that applies
   to every card except the CTA card and any card already statically Featured/Dark, which
   already carry their own permanent treatment. Three styles: the same gradient as the
   static Featured card, the same solid navy as the static Dark card, or a plain custom
   colour via the "Hover background colour" control (read through --mr-services-hover-bg,
   set inline on the section when that option is chosen). */
.mr-services--hover-featured a.mr-service-card:not(.mr-service-card--cta):not(.mr-service-card--featured):not(.mr-service-card--dark):hover{
  background:linear-gradient(135deg, var(--mr-pink) 0%, var(--mr-teal) 100%) !important; color:#fff;
}
.mr-services--hover-featured a.mr-service-card:not(.mr-service-card--cta):hover h3{ color:#fff !important; }
.mr-services--hover-featured a.mr-service-card:not(.mr-service-card--cta):hover p{ color:rgba(255,255,255,.85); }
.mr-services--hover-featured a.mr-service-card:not(.mr-service-card--cta):hover .mr-service-card__icon{ background:rgba(255,255,255,.2) !important; color:#fff; }
.mr-services--hover-featured a.mr-service-card:not(.mr-service-card--cta):hover .mr-service-card__link{ color:#fff; }
.mr-services--hover-dark a.mr-service-card:not(.mr-service-card--cta):not(.mr-service-card--featured):not(.mr-service-card--dark):hover{
  background:var(--mr-navy) !important; color:#fff;
}
.mr-services--hover-dark a.mr-service-card:not(.mr-service-card--cta):hover h3{ color:#fff !important; }
.mr-services--hover-dark a.mr-service-card:not(.mr-service-card--cta):hover p{ color:rgba(255,255,255,.7); }
.mr-services--hover-dark a.mr-service-card:not(.mr-service-card--cta):hover .mr-service-card__icon{ background:rgba(255,255,255,.12) !important; color:#fff; }
.mr-services--hover-dark a.mr-service-card:not(.mr-service-card--cta):hover .mr-service-card__link{ color:var(--mr-teal); }
.mr-services--hover-color a.mr-service-card:not(.mr-service-card--cta):not(.mr-service-card--featured):not(.mr-service-card--dark):hover{
  background:var(--mr-services-hover-bg, var(--mr-navy)) !important;
}

/* ============================================================
   TRUSTED BY / TABS
   ============================================================ */
.mr-trusted-by{ padding:5rem 1.5rem 0; max-width:var(--mr-container); margin:0 auto; }
.mr-tabs{ display:flex; flex-wrap:nowrap; justify-content:center; gap:1.25rem; }
.mr-tabs__item{ display:flex; flex-direction:column; align-items:center; gap:.6rem; flex:1 1 0; min-width:0; }
.mr-tabs__pill{ display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--mr-line); background:#fff; color:#5A6180; padding:12px 16px; min-width:64px; width:100%; border-radius:12px; cursor:pointer; }
.mr-tabs__pill .mr-icon{ width:24px; height:24px; flex:none; }
.mr-tabs__pill .mr-icon--img{ object-fit:contain; }
.mr-tabs__pill.is-active{ background:var(--mr-navy); border-color:var(--mr-navy); color:#fff; }
.mr-tabs__pill.is-active .mr-icon--img{ filter:brightness(0) invert(1); }
.mr-tabs__item-label{ font-weight:600; font-size:.85rem; color:#5A6180; }

/* ============================================================
   PARTNER CAROUSEL — an actual interactive slider: auto-scroll (JS,
   requestAnimationFrame), drag/swipe, and prev/next arrows, all driving
   native horizontal scroll on .mr-carousel__viewport (see mr-frontend.js).
   ============================================================ */
.mr-carousel{ position:relative; padding:2.5rem 3.5rem; }
.mr-carousel__viewport{
  overflow-x:auto; overflow-y:hidden; cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  scrollbar-width:none; -ms-overflow-style:none;
}
.mr-carousel__viewport::-webkit-scrollbar{ display:none; }
.mr-carousel__viewport.is-dragging{ cursor:grabbing; }
.mr-carousel__viewport.is-dragging .mr-carousel__track{ pointer-events:none; }
.mr-carousel__track{ display:flex; align-items:center; gap:3.5rem; width:max-content; }
.mr-carousel__track--reverse{ margin-top:2rem; }
/* Partner card style — exact Figma spec: each logo sits in its own light,
   padded, fixed-size tile rather than floating bare in the scrolling strip. */
.mr-carousel__logo{
  flex:none; box-sizing:border-box;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  width:153px; height:137px; padding:32px; gap:23px;
  background:#F0F4FA;
}
.mr-carousel__logo img{ width:85px; height:72px; object-fit:contain; filter:grayscale(1); opacity:.65; -webkit-user-drag:none; user-select:none; }
.mr-carousel--color .mr-carousel__logo img{ filter:none; }
.mr-carousel__arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:9999px; border:1px solid var(--mr-line); background:#fff; color:var(--mr-navy);
  cursor:pointer; box-shadow:0 8px 20px rgba(13,27,62,.12); padding:0;
}
.mr-carousel__arrow:hover{ background:var(--mr-navy); color:#fff; border-color:var(--mr-navy); }
.mr-carousel__arrow .mr-icon{ width:11px; height:12px; flex:none; }
.mr-carousel__arrow--prev{ left:0; }
.mr-carousel__arrow--next{ right:0; }
@media (prefers-reduced-motion: reduce){ .mr-carousel__viewport{ scroll-behavior:auto; } }
/* Sport-filtered state (Trusted By tabs): stays a slider — only the non-matching
   logo tiles are hidden (both the original and duplicated copy of each, since the
   JS filters by the same data-mr-sports tag on both halves), and mr-frontend.js
   re-measures the loop width afterwards so drag/auto-scroll/wrap keep working
   correctly with the now-shorter track. No separate grid layout. */
.mr-carousel__logo.is-hidden{ display:none; }

/* ============================================================
   CTA RECOVERY BANNER
   ============================================================ */
.mr-cta-recovery{ background:var(--mr-navy); padding:4rem 1.5rem; position:relative; overflow:hidden; }
/* Optional background photo (Style tab colour control still tints the plain-navy case;
   with a photo set we swap to a cover image + a navy scrim so the white text stays
   readable over any photo, matching the Tag Banner's photo pattern). */
.mr-cta-recovery--photo{
  background-color:var(--mr-navy); background-image:var(--mr-cta-recovery-bg, none);
  background-size:cover; background-position:center;
}
.mr-cta-recovery__scrim{ position:absolute; inset:0; }
.mr-cta-recovery__inner{
  position:relative; max-width:var(--mr-container); margin:0 auto; color:#fff; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;
}
.mr-cta-recovery__text{ max-width:520px; }
.mr-cta-recovery__inner p{ color:#C9CEE4; margin:1rem 0 0; line-height:1.7; }
.mr-cta-recovery__btns{ margin-top:0; flex:none; }
.mr-h2--white{ color:#fff; }

/* ============================================================
   LATEST NEWS
   ============================================================ */
.mr-news{ padding:5rem 1.5rem; max-width:var(--mr-container); margin:0 auto; }
.mr-news__head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:2.5rem; }
.mr-news__head .mr-eyebrow{ margin-bottom:.4rem; }
.mr-news__head .mr-h2{ margin:0; }
.mr-news__head .mr-btn--outline-navy{ flex:none; }
.mr-news__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem; }

.mr-news-card{
  text-decoration:none; color:inherit; display:flex; flex-direction:column;
  background:#fff; border:1px solid rgba(13,27,62,.05); box-shadow:0 1px 2px rgba(0,0,0,.05);
  border-radius:16px; overflow:hidden; transition:background-color .25s ease, border-color .25s ease;
}
.mr-news-card__media{ position:relative; height:208px; flex:none; }
.mr-news-card__img{ position:absolute; inset:0; background-size:cover; background-position:center; }
.mr-news-card__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(13,27,62,.3) 0%, rgba(13,27,62,0) 50%, rgba(13,27,62,0) 100%);
  transition:background .25s ease;
}
.mr-news-card__pill{
  position:absolute; left:16px; top:16px; z-index:2; display:inline-flex; align-items:center; gap:6px;
  background:var(--mr-pink); color:#fff; font-family:var(--mr-font-body); font-weight:400; font-size:12px; line-height:16px; letter-spacing:.1px;
  padding:6px 12px; border-radius:9999px; box-shadow:0 4px 6px rgba(0,0,0,.1), 0 10px 15px rgba(0,0,0,.1);
}
.mr-news-card__dot{ width:4px; height:4px; border-radius:9999px; background:#fff; flex:none; }
.mr-news-card__featured{
  position:absolute; top:17px; right:17px; z-index:2; display:inline-flex; align-items:center; gap:4px;
  background:var(--mr-teal); color:var(--mr-navy); font-family:var(--mr-font-body); font-weight:400; font-size:12px; line-height:16px; letter-spacing:.1px;
  padding:6px 12px; border-radius:9999px; box-shadow:0 4px 6px rgba(0,0,0,.1), 0 10px 15px rgba(0,0,0,.1);
}
.mr-news-card__featured .mr-icon{ width:14px; height:12px; flex:none; }
.mr-news-card__body{ display:flex; flex-direction:column; gap:16px; padding:24px; flex:1 1 auto; }
.mr-news-card__meta{ display:flex; align-items:center; gap:8px; color:#6B7A8D; transition:color .25s ease; }
.mr-news-card__meta-item{ display:inline-flex; align-items:center; gap:6px; font-size:12px; line-height:16px; letter-spacing:-0.5px; }
.mr-news-card__meta-item .mr-icon{ width:12px; height:12px; flex:none; color:var(--mr-teal); }
.mr-news-card__meta-dot{ width:4px; height:4px; border-radius:9999px; background:rgba(107,122,141,.4); flex:none; transition:background .25s ease; }
.mr-news-card h3{
  font-family:var(--mr-font-display); font-weight:600; font-size:24px; line-height:32px; letter-spacing:-0.5px;
  text-transform:none; margin:0; color:var(--mr-navy); transition:color .25s ease;
}
.mr-news-card__excerpt{ margin:0; color:#6B7A8D; font-family:var(--mr-font-body); font-weight:400; font-size:14px; line-height:23px; letter-spacing:-0.5px; transition:color .25s ease; }
.mr-news-card__more{
  display:inline-flex; align-items:center; gap:8px; color:var(--mr-pink); font-family:var(--mr-font-body);
  font-weight:400; font-size:14px; line-height:20px; letter-spacing:-0.15px; margin-top:auto; transition:color .25s ease;
}
.mr-news-card__more .mr-icon{ width:11px; height:12px; flex:none; }

/* Bottom gradient accent bar — hidden until hover (Figma hover variant). */
.mr-news-card::after{
  content:''; order:2; flex:none; width:100%; height:2px;
  background:linear-gradient(90deg, var(--mr-teal) 0%, var(--mr-pink) 100%);
  opacity:0; transition:opacity .25s ease;
}

/* Hover state — card recipe from the Figma hover variant. */
.mr-news-card:hover{ background:#0D1B3E; border-color:rgba(0,188,212,.1); }
.mr-news-card:hover .mr-news-card__media::after{ background:linear-gradient(0deg, rgba(13,27,62,.5) 0%, rgba(13,27,62,0) 50%, rgba(13,27,62,0) 100%); }
.mr-news-card:hover .mr-news-card__body h3{ color:#fff !important; }
.mr-news-card:hover .mr-news-card__excerpt{ color:rgba(255,255,255,.55); }
.mr-news-card:hover .mr-news-card__meta{ color:rgba(255,255,255,.4); }
.mr-news-card:hover .mr-news-card__meta-dot{ background:rgba(255,255,255,.2); }
.mr-news-card:hover .mr-news-card__more{ color:var(--mr-teal); }
.mr-news-card:hover::after{ opacity:1; }

/* ============================================================
   NUMBERED PILLARS (e.g. About → "Treatment Philosophy")
   ============================================================ */
.mr-pillars{ padding:5rem 1.5rem; max-width:var(--mr-container); margin:0 auto; }
.mr-pillars__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; align-items:stretch; }
.mr-pillar-card{
  position:relative; background:var(--mr-light); border-radius:16px; padding:32px;
  display:flex; flex-direction:column; gap:20px; overflow:hidden;
  transition:background-color .25s ease, color .25s ease;
}
/* Thin top accent bar in the card's own icon colour (confirmed in Figma on every pillar
   card, teal on the first, pink on the rest). */
.mr-pillar-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--mr-pillar-accent, var(--mr-teal));
}
/* All cards sit at the same #F0F4FA background at rest; the navy "highlight" treatment
   is a hover-only effect applied uniformly to every card, not a static per-item state. */
.mr-pillar-card:hover{ background:var(--mr-navy); color:#fff; }
.mr-pillar-card__number{
  position:absolute; top:20px; right:24px; font-family:var(--mr-font-display); font-weight:400;
  font-size:48px; line-height:1; color:rgba(13,27,62,.08); pointer-events:none;
  transition:color .25s ease;
}
/* Icon sits to the left of the title, side by side, instead of stacked above it. */
.mr-pillar-card__head{ display:flex; align-items:center; gap:16px; }
.mr-pillar-card__head h3{ flex:1; }
.mr-pillar-card:hover .mr-pillar-card__number{ color:rgba(255,255,255,.1); }
/* No coloured chip background behind the icon — the icon glyph itself takes the
   per-item accent colour (or white on hover, once the card goes navy). */
.mr-pillar-card__icon{
  flex:none; color:var(--mr-pillar-accent, var(--mr-teal));
  display:flex; align-items:center; justify-content:center;
  transition:color .25s ease;
}
.mr-pillar-card:hover .mr-pillar-card__icon{ color:#fff; }
.mr-pillar-card__icon .mr-icon{ width:28px; height:28px; }
.mr-pillar-card__icon .mr-icon--img{ width:28px; height:28px; object-fit:contain; }
.mr-pillar-card h3{ font-family:var(--mr-font-display); font-weight:600; font-size:24px; line-height:30px; margin:0; color:var(--mr-navy); position:relative; transition:color .25s ease; }
.mr-pillar-card:hover h3{ color:#fff; }
.mr-pillar-card p{ margin:0; color:var(--mr-gray); font-size:14px; line-height:23px; letter-spacing:-0.3px; position:relative; transition:color .25s ease; }
.mr-pillar-card:hover p{ color:#C9CEE4; }
.mr-pillar-card__bullets{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.mr-pillar-card__bullets li{ display:flex; align-items:center; gap:8px; font-size:14px; line-height:20px; color:var(--mr-navy); transition:color .25s ease; }
.mr-pillar-card:hover .mr-pillar-card__bullets li{ color:#fff; }
.mr-pillar-card__bullets .mr-icon{ width:14px; height:14px; flex:none; color:var(--mr-pillar-accent, var(--mr-teal)); }

/* ============================================================
   TIMELINE (e.g. About → "Career Journey")
   ============================================================ */
.mr-timeline{ padding:5rem 1.5rem; max-width:var(--mr-container); margin:0 auto; }
.mr-timeline__rail{ position:relative; max-width:960px; margin:0 auto; display:flex; flex-direction:column; gap:2.5rem; }
.mr-timeline__rail::before{
  content:''; position:absolute; left:50%; top:0; bottom:0; width:2px; transform:translateX(-50%);
  background:var(--mr-grad-vertical); opacity:.6;
}
.mr-timeline__row{ position:relative; display:grid; grid-template-columns:1fr 64px 1fr; align-items:center; gap:0 2rem; }
.mr-timeline__marker{ grid-column:2; display:flex; align-items:center; justify-content:center; z-index:1; }
.mr-timeline__icon{
  width:56px; height:56px; border-radius:9999px; background:#fff; border:2px solid var(--mr-line);
  display:flex; align-items:center; justify-content:center; color:var(--mr-teal); box-shadow:0 4px 6px rgba(0,0,0,.05);
}
/* A per-item marker colour (see the repeater's "Marker colour" field) always fills the
   whole circle, so the glyph switches to white to stay legible on it. */
.mr-timeline__icon[style]{ color:#fff; }
.mr-timeline__icon .mr-icon{ width:24px; height:24px; }
.mr-timeline__icon .mr-icon--img{ width:24px; height:24px; object-fit:contain; }
.mr-timeline__card{
  grid-column:1; background:#fff; border-radius:16px; padding:24px;
  box-shadow:0 1px 2px rgba(0,0,0,.05); border:1px solid rgba(13,27,62,.05);
  display:flex; flex-direction:column; gap:6px;
}
.mr-timeline__row:nth-child(even) .mr-timeline__card{ grid-column:3; }
.mr-timeline__card.is-current{ background:var(--mr-navy); border-color:transparent; }
.mr-timeline__year{
  font-family:var(--mr-font-display); font-weight:600; font-size:24px; line-height:1; color:var(--mr-teal);
}
.mr-timeline__card.is-current .mr-timeline__year{ color:var(--mr-teal); }
.mr-timeline__category{ text-transform:uppercase; font-size:12px; letter-spacing:.6px; font-weight:600; color:var(--mr-pink); }
.mr-timeline__card.is-current .mr-timeline__category{ color:#fff; opacity:.7; }
.mr-timeline__card h3{ font-family:var(--mr-font-display); font-weight:600; font-size:18px; line-height:24px; margin:0; color:var(--mr-navy); }
.mr-timeline__card.is-current h3{ color:#fff; }
.mr-timeline__card p{ margin:0; font-size:14px; line-height:22px; letter-spacing:-0.3px; color:var(--mr-gray); }
.mr-timeline__card.is-current p{ color:#C9CEE4; }
.mr-timeline__row.is-current .mr-timeline__icon{ background:var(--mr-navy); border-color:var(--mr-navy); color:#fff; }

/* ============================================================
   TAG BANNER (e.g. About → "Referral Network")
   Confirmed against Figma: this is a contained rounded card (not a
   full-bleed section) meant to sit inside a light-background wrapper
   alongside a card grid (e.g. right after Qualifications & Registrations),
   with soft decorative glows behind it — no background photo by default.
   ============================================================ */
.mr-tag-banner{ padding:0 1.5rem; max-width:var(--mr-container); margin:0 auto; }
.mr-tag-banner__card{
  position:relative; overflow:hidden; border-radius:16px; padding:2.5rem;
  background-color:var(--mr-navy);
}
.mr-tag-banner__card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, rgba(0,188,212,0), var(--mr-teal) 33%, var(--mr-pink) 67%, rgba(236,0,140,0));
}
.mr-tag-banner__card::after{
  content:''; position:absolute; top:-80px; right:10%; width:256px; height:256px; border-radius:9999px;
  background:radial-gradient(circle, rgba(236,0,140,.25), transparent 70%); filter:blur(48px); pointer-events:none;
}
.mr-tag-banner__card--photo{
  background-color:var(--mr-navy); background-image:var(--mr-tag-banner-bg, none);
  background-size:cover; background-position:center;
}
.mr-tag-banner__scrim{ position:absolute; inset:0; background:linear-gradient(100deg, rgba(13,27,62,.95) 30%, rgba(13,27,62,.8) 100%); }
.mr-tag-banner__inner{
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:2.5rem; flex-wrap:wrap;
}
.mr-tag-banner__text{ max-width:520px; flex:1 1 360px; }
.mr-tag-banner__text .mr-h2{ margin:.2rem 0 0; }
.mr-tag-banner__body{ color:#C9CEE4; margin:1rem 0 0; line-height:1.7; font-size:15px; }
.mr-tag-banner__tags{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:1rem; flex:1 1 460px; }
.mr-tag{
  display:flex; align-items:center; gap:.75rem; background:rgba(255,255,255,.04);
  border:1px solid rgba(0,188,212,.15); color:#fff; font-size:14px; font-weight:500; line-height:20px;
  padding:1rem; border-radius:12px; width:calc(50% - .5rem); box-sizing:border-box;
}
.mr-tag__icon{
  flex:none; width:36px; height:36px; border-radius:8px; display:flex; align-items:center;
  justify-content:center; color:#fff;
}
.mr-tag__icon .mr-icon{ width:16px; height:16px; }
.mr-tag__icon .mr-icon--img{ width:16px; height:16px; object-fit:contain; }

/* ============================================================
   PROCESS STEPS (Services → "Your Journey")
   4-column flex row, 56×56 rounded-square badges alternating a solid
   fill / translucent outline treatment, an overlapping number pill on
   each badge, and a faint horizontal connector line running behind
   them all. Navy section background per Figma.
   ============================================================ */
.mr-process{ background:var(--mr-navy); padding:5.5rem 1.5rem; position:relative; overflow:hidden; z-index:0; }
.mr-process .mr-section-head .mr-subtitle{ color:rgba(255,255,255,.6); }
.mr-process__grid{ position:relative; display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem 2rem; max-width:var(--mr-container); margin:0 auto; }
/* Faint connector line threading through the vertical centre of the badges — fades out
   at both ends rather than running edge-to-edge. */
/* Sits just below the badges (56px tall + ~8px gap = 64px), not through their centre —
   exact Figma spec: full-width, teal→pink fade with transparent ends. */
.mr-process__grid::before{
  content:''; position:absolute; left:0; right:0; top:64px; height:1px; z-index:0; border-radius:0;
  background:linear-gradient(90deg, rgba(0,188,212,0) 0%, rgba(0,188,212,.3) 33.33%, rgba(236,0,140,.3) 66.67%, rgba(236,0,140,0) 100%);
}
.mr-process__step{ position:relative; z-index:1; flex:1 1 240px; max-width:286px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:.9rem; }
.mr-process__badge-wrap{ position:relative; margin-bottom:.3rem; }
.mr-process__badge{
  width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background:var(--mr-process-accent, var(--mr-pink)); color:#fff;
}
.mr-process__badge--solid{
  box-shadow:0 8px 20px -4px var(--mr-process-accent, var(--mr-pink));
}
.mr-process__badge--outline{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:var(--mr-process-accent, var(--mr-pink));
}
@supports (background: color-mix(in srgb, red 10%, transparent)){
  .mr-process__badge--outline{
    background:color-mix(in srgb, var(--mr-process-accent, var(--mr-pink)) 14%, transparent);
    border:1px solid color-mix(in srgb, var(--mr-process-accent, var(--mr-pink)) 30%, transparent);
  }
}
.mr-process__badge .mr-icon{ width:22px; height:22px; flex:none; }
.mr-process__badge .mr-icon--img{ object-fit:contain; }
.mr-process__number{
  position:absolute; top:-8px; right:-10px; display:flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:9999px; background:var(--mr-navy);
  border:2px solid var(--mr-process-accent, var(--mr-pink)); color:var(--mr-process-accent, var(--mr-pink));
  font-family:var(--mr-font-display); font-weight:600; font-size:12px; line-height:1;
}
.mr-process__step h3{ font-family:var(--mr-font-display); font-weight:600; font-size:20px; line-height:26px; margin:0; color:#fff; }
.mr-process__step p{ margin:0; color:rgba(255,255,255,.5); font-size:14px; line-height:22px; letter-spacing:-0.3px; }
/* Soft decorative glows, matching the treatment already used on other navy sections. */
.mr-process::before, .mr-process::after{
  content:""; position:absolute; border-radius:9999px; filter:blur(64px); pointer-events:none; z-index:-1;
}
.mr-process::before{ top:-80px; left:8%; width:288px; height:288px; background:radial-gradient(circle, rgba(0,188,212,.3), transparent 70%); }
.mr-process::after{ bottom:-100px; right:10%; width:256px; height:256px; background:radial-gradient(circle, rgba(236,0,140,.28), transparent 70%); }

/* ============================================================
   SERVICE DETAIL CARDS (Services → "Treatment Categories")
   Photo + badge + bullets cards, richer than the plain Services Grid.
   ============================================================ */
.mr-sdc{ padding:5rem 1.5rem; max-width:var(--mr-container); margin:0 auto; }
.mr-sdc__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; align-items:stretch; }
.mr-sdc__card{
  display:flex; flex-direction:column; background:#F0F4FA; border:1px solid #E5E7EB; border-radius:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.05); overflow:hidden;
}
.mr-sdc__photo{ position:relative; height:208px; flex:none; overflow:hidden; }
.mr-sdc__photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.mr-sdc__photo-scrim{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(13,27,62,.55) 0%, rgba(13,27,62,0) 55%);
}
/* Exact Figma spec: a near-solid pink (subtle 135° pink→darker-pink), not the pink→teal
   gradient used elsewhere — and bottom-left, not top-left. */
.mr-sdc__photo-badge{
  position:absolute; left:16px; bottom:16px; z-index:2; display:inline-flex; align-items:center;
  background:linear-gradient(135deg, #EC008C 0%, #C0007A 100%);
  color:#fff; font-size:12px; line-height:16px; letter-spacing:-0.2px; font-weight:400;
  padding:4px 12px; border-radius:9999px; box-shadow:0 4px 6px rgba(0,0,0,.1), 0 10px 15px rgba(0,0,0,.1);
}
.mr-sdc__photo-icon{
  position:absolute; right:16px; top:16px; z-index:2; display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px; background:rgba(13,27,62,.8);
  border:1px solid var(--mr-sdc-accent, rgba(255,255,255,.3)); color:var(--mr-sdc-accent, #fff);
}
.mr-sdc__photo-icon .mr-icon{ width:18px; height:18px; flex:none; }
.mr-sdc__photo-icon .mr-icon--img{ object-fit:contain; }
.mr-sdc__body{ display:flex; flex-direction:column; gap:.9rem; padding:28px; flex:1 1 auto; }
.mr-sdc__category{
  margin:0; font-family:var(--mr-font-display); font-weight:600; font-size:12px; line-height:16px;
  letter-spacing:.7px; text-transform:uppercase; color:var(--mr-sdc-accent, var(--mr-pink));
}
.mr-sdc__body h3{ font-family:var(--mr-font-display); font-weight:600; font-size:22px; line-height:28px; margin:0; color:var(--mr-navy); }
.mr-sdc__desc{ margin:0; color:var(--mr-gray); font-size:14px; line-height:23px; letter-spacing:-0.5px; }
.mr-sdc__bullets{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.mr-sdc__bullets li{ display:flex; align-items:flex-start; gap:.55rem; font-size:14px; line-height:22px; color:var(--mr-gray); }
/* Bullet checks use the contrasting accent (--mr-sdc-bullet-accent, set per card in PHP —
   the opposite of --mr-sdc-accent) rather than matching the category/link colour, so a
   pink category pairs with teal checks and vice versa. */
.mr-sdc__bullets .mr-icon{ width:14px; height:14px; flex:none; margin-top:4px; color:var(--mr-sdc-bullet-accent, var(--mr-teal)); }
/* The "Learn More" link shares the card's accent colour with .mr-sdc__category above. */
.mr-sdc__link{
  display:inline-flex; align-items:center; gap:8px; margin-top:auto; padding-top:.4rem;
  color:var(--mr-sdc-accent, var(--mr-pink)); font-weight:600; font-size:14px; line-height:20px; letter-spacing:-0.15px; text-decoration:none;
}
.mr-sdc__link:hover{ text-decoration:underline; }
.mr-sdc__link .mr-icon{ width:11px; height:12px; flex:none; }
.mr-sdc__card .mr-btn{ margin-top:auto; align-self:flex-start; }
/* Featured card — same pink→teal gradient recipe reused across the site. */
.mr-sdc__card--featured{ background:linear-gradient(135deg, var(--mr-pink) 0%, var(--mr-teal) 100%); border:none; }
.mr-sdc__card--featured .mr-sdc__category{ color:rgba(255,255,255,.85); }
.mr-sdc__card--featured .mr-sdc__body h3{ color:#fff; }
.mr-sdc__card--featured .mr-sdc__desc{ color:rgba(255,255,255,.85); }
.mr-sdc__card--featured .mr-sdc__bullets li{ color:rgba(255,255,255,.85); }
.mr-sdc__card--featured .mr-sdc__bullets .mr-icon{ color:#fff; }
.mr-sdc__card--featured .mr-sdc__photo-icon{ background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.4); color:#fff; }

/* ============================================================
   TEAM PHYSIO (Team & Affiliations → sport chips + club-partnership
   cards). New widget — the sport-chip row and this card's badge +
   floating-icon-over-photo shape don't match any existing widget
   closely enough to just extend one.
   ============================================================ */
.mr-team-physio{ padding:5rem 1.5rem; max-width:var(--mr-container); margin:0 auto; }
/* Two-column header — eyebrow + heading + a short gradient underline on the left, the
   subtitle on the right — not the shared centered .mr-section-head used elsewhere. */
.mr-team-physio__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2.5rem; margin:0 0 3rem; }
.mr-team-physio__head-left{ display:flex; flex-direction:column; gap:10px; max-width:460px; }
.mr-team-physio__head-right{ display:flex; flex-direction:column; gap:6px; max-width:384px; flex:none; }
.mr-team-physio__subtitle{ margin:0; color:var(--mr-gray); font-size:14px; line-height:23px; letter-spacing:-0.5px; }
.mr-team-physio__head-line{ display:block; width:96px; height:2px; background:linear-gradient(90deg,var(--mr-teal),var(--mr-pink)); }
.mr-team-physio__chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem; margin:0 0 3rem; }
.mr-team-physio__chip{
  flex:1 1 140px; max-width:183px; display:flex; flex-direction:column; align-items:center;
  background:none; border:0; padding:0; margin:0; font:inherit; cursor:pointer;
}
.mr-team-physio__chip-ic{
  display:flex; align-items:center; justify-content:center; width:100%; height:56px;
  border-radius:12px; background:#F0F4FA; color:var(--mr-navy);
  transition:background-color .2s ease, color .2s ease;
}
.mr-team-physio__chip-ic .mr-icon{ width:24px; height:24px; flex:none; }
.mr-team-physio__chip-ic .mr-icon--img{ object-fit:contain; transition:filter .2s ease; }
.mr-team-physio__chip-label{ margin-top:8px; display:block; text-align:center; font-size:12px; font-weight:600; letter-spacing:-0.5px; color:var(--mr-navy); }
/* Dark chip variant — also the fix for a Figma source bug where the "Basketball" chip had
   a navy background with navy label text (invisible); dark chips now get white icon+label. */
.mr-team-physio__chip--dark .mr-team-physio__chip-ic{ background:var(--mr-navy); color:#fff; }
.mr-team-physio__chip--dark .mr-team-physio__chip-label{ color:#fff; }
/* Hover/active — same navy-fill treatment as Trusted By's .mr-tabs__pill.is-active, applied
   to just the icon chip (the label stays put) since a chip here also carries a text label. */
.mr-team-physio__chip:hover .mr-team-physio__chip-ic,
.mr-team-physio__chip.is-active .mr-team-physio__chip-ic{ background:var(--mr-navy); color:#fff; }
.mr-team-physio__chip:hover .mr-team-physio__chip-ic .mr-icon--img,
.mr-team-physio__chip.is-active .mr-team-physio__chip-ic .mr-icon--img{ filter:brightness(0) invert(1); }
.mr-team-physio__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; align-items:stretch; }
.mr-team-physio__card.is-hidden{ display:none; }
.mr-team-physio__card{
  position:relative; display:flex; flex-direction:column; background:#F0F4FA; border:1px solid #E5E7EB;
  border-radius:16px; overflow:hidden; transition:background-color .2s ease, border-color .2s ease;
}
/* The navy background + white text is a HOVER state on every card, not a static "highlight
   card" variant — matches the Figma prototype's interactive treatment (its static export just
   happened to snapshot one card mid-hover). */
.mr-team-physio__card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px; z-index:2;
  background:linear-gradient(90deg, var(--mr-teal), var(--mr-pink));
  opacity:0; transition:opacity .2s ease;
}
.mr-team-physio__card:hover{ background:var(--mr-navy); border-color:transparent; }
.mr-team-physio__card:hover::before{ opacity:1; }
.mr-team-physio__photo{ position:relative; height:192px; flex:none; overflow:hidden; }
.mr-team-physio__photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.mr-team-physio__photo-scrim{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(13,27,62,.8) 0%, rgba(13,27,62,.3) 50%, rgba(13,27,62,0) 100%);
}
.mr-team-physio__badge{
  position:absolute; right:16px; top:16px; z-index:2; display:inline-flex; align-items:center;
  color:#fff; font-size:12px; font-weight:600; letter-spacing:-0.2px; padding:4px 12px; border-radius:9999px;
}
.mr-team-physio__badge--teal{ background:linear-gradient(135deg, #00BCD4 0%, #0097A7 100%); }
.mr-team-physio__badge--navy{ background:rgba(13,27,62,.8); border:1px solid rgba(255,255,255,.2); }
.mr-team-physio__badge--pink{ background:linear-gradient(135deg, #EC008C 0%, #C0007A 100%); }
.mr-team-physio__photo-icon{
  position:absolute; left:16px; bottom:16px; z-index:2; display:flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:12px; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.2); color:#fff;
}
.mr-team-physio__photo-icon .mr-icon{ width:20px; height:20px; flex:none; }
.mr-team-physio__photo-icon .mr-icon--img{ object-fit:contain; }
.mr-team-physio__body{ display:flex; flex-direction:column; gap:.5rem; padding:24px; flex:1 1 auto; }
.mr-team-physio__category{ margin:0; font-family:var(--mr-font-display); font-weight:400; font-size:12px; line-height:16px; letter-spacing:.7px; text-transform:uppercase; }
.mr-team-physio__body h3{ font-family:var(--mr-font-display); font-weight:600; font-size:20px; line-height:28px; margin:0; color:var(--mr-navy); transition:color .2s ease; }
.mr-team-physio__card:hover .mr-team-physio__body h3{ color:#fff; }
.mr-team-physio__desc{ margin:0; color:var(--mr-gray); font-size:14px; line-height:23px; letter-spacing:-0.5px; transition:color .2s ease; }
.mr-team-physio__card:hover .mr-team-physio__desc{ color:rgba(255,255,255,.6); }
.mr-team-physio__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:.4rem; }
.mr-team-physio__tag{
  display:inline-flex; align-items:center; background:#fff; border:1px solid #E5E7EB; border-radius:9999px;
  padding:4px 12px; font-size:12px; line-height:16px; letter-spacing:-0.5px; color:var(--mr-gray);
  transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
.mr-team-physio__card:hover .mr-team-physio__tag{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.1); color:rgba(255,255,255,.7); }

/* ============================================================
   INLINE CTA BANNER (compact icon+copy left, button right —
   e.g. Team & Affiliations' "Discuss a Partnership" strip)
   ============================================================ */
.mr-inline-cta{ padding:2rem 1.5rem; }
.mr-inline-cta__card{
  position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; max-width:var(--mr-container); margin:0 auto; padding:1.75rem 2rem;
  background:#fff; border:1px solid #E5E7EB; border-radius:16px;
}
.mr-inline-cta__card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--mr-teal), var(--mr-pink));
}
.mr-inline-cta__text{ display:flex; align-items:center; gap:1rem; }
.mr-inline-cta__icon{
  flex:none; width:44px; height:44px; border-radius:12px; background:var(--mr-pink); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.mr-inline-cta__icon .mr-icon{ width:20px; height:20px; flex:none; }
.mr-inline-cta__icon .mr-icon--img{ object-fit:contain; }
.mr-inline-cta__copy{ display:flex; flex-direction:column; gap:.2rem; }
.mr-inline-cta__copy strong{ font-weight:600; font-size:16px; line-height:24px; color:var(--mr-navy); }
.mr-inline-cta__copy span{ font-size:14px; line-height:20px; color:var(--mr-gray); }
.mr-inline-cta__buttons{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; flex:none; }
.mr-inline-cta__buttons .mr-btn{ flex:none; }
/* Icon-only circular button — e.g. a row of social icons, each set to its own brand
   colour via the button repeater's "Colour" field (Facebook blue, Instagram pink, etc.). */
.mr-inline-cta__icon-btn{
  display:flex; align-items:center; justify-content:center; flex:none;
  width:40px; height:40px; border-radius:50%; background:var(--mr-navy); color:#fff;
  transition:transform .15s ease;
}
.mr-inline-cta__icon-btn:hover{ transform:translateY(-2px); }
.mr-inline-cta__icon-btn .mr-icon{ width:16px; height:16px; flex:none; }
.mr-inline-cta__icon-btn .mr-icon--img{ object-fit:contain; }

/* ============================================================
   CONDITIONS (Services → "Common Conditions We Treat")
   Two-column split: condition chip grid on the left, photo + floating
   card + navy callout stacked on the right.
   ============================================================ */
.mr-conditions{ padding:5rem 1.5rem; background:#E5E7EB; }
.mr-conditions__grid{ display:grid; grid-template-columns:1fr 1fr; gap:5rem; max-width:1216px; margin:0 auto; align-items:start; }
.mr-conditions__col--media{ display:flex; flex-direction:column; gap:1.5rem; }
.mr-conditions__chips{ list-style:none; margin:2rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.75rem; }
.mr-conditions__chip{
  flex:1 1 calc(50% - .375rem); min-width:220px; box-sizing:border-box; display:flex; align-items:center; gap:.75rem;
  background:#F0F4FA; border:1px solid #E5E7EB; border-radius:12px; padding:1rem;
}
.mr-conditions__chip-icon{
  flex:none; width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  background:var(--mr-chip-accent, var(--mr-teal)); color:#fff;
}
@supports (background: color-mix(in srgb, red 10%, transparent)){
  .mr-conditions__chip-icon{
    background:color-mix(in srgb, var(--mr-chip-accent, var(--mr-teal)) 14%, transparent);
    color:var(--mr-chip-accent, var(--mr-teal));
  }
}
.mr-conditions__chip-icon .mr-icon{ width:16px; height:16px; flex:none; }
.mr-conditions__chip-icon .mr-icon--img{ object-fit:contain; }
.mr-conditions__chip span:last-child{ font-weight:600; font-size:14px; line-height:20px; letter-spacing:-0.3px; color:var(--mr-navy); }
/* No overflow:hidden here on purpose — the floating card below overlaps this photo's
   bottom edge, and clipping the photo would also clip the card (and the icon sitting at
   its top) whenever the card's content needs a little more height than expected. The
   image and scrim are rounded individually instead, so the photo still reads as a single
   rounded rectangle without risking that clip. */
.mr-conditions__photo{
  position:relative; height:360px;
  box-shadow:0 10px 30px rgba(13,27,62,.15);
}
.mr-conditions__photo img{ width:100%; height:100%; object-fit:cover; border-radius:16px; display:block; }
.mr-conditions__photo-scrim{
  position:absolute; inset:0; border-radius:16px;
  background:linear-gradient(0deg, rgba(13,27,62,.7) 0%, rgba(13,27,62,0) 45%);
}
.mr-conditions__float{
  position:absolute; left:16px; right:16px; bottom:16px; z-index:2; display:flex; align-items:flex-start; gap:.9rem;
  background:rgba(255,255,255,.95); border-bottom:2px solid var(--mr-pink); border-radius:12px; padding:1.1rem;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.mr-conditions__float-icon{
  flex:none; width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--mr-pink); color:#fff;
}
.mr-conditions__float-icon .mr-icon{ width:20px; height:20px; flex:none; }
.mr-conditions__float-icon .mr-icon--img{ object-fit:contain; }
.mr-conditions__float-text{ display:flex; flex-direction:column; gap:.25rem; }
.mr-conditions__float-text strong{ font-size:14px; line-height:20px; color:var(--mr-navy); }
.mr-conditions__float-text span{ font-size:13px; line-height:19px; color:var(--mr-gray); }
.mr-conditions__callout{
  position:relative; overflow:hidden; background:var(--mr-navy); border-radius:16px; padding:2rem;
}
.mr-conditions__callout::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--mr-teal), var(--mr-pink));
}
.mr-conditions__callout::after{
  content:''; position:absolute; bottom:-60px; right:-40px; width:200px; height:200px; border-radius:9999px;
  background:radial-gradient(circle, rgba(236,0,140,.3), transparent 70%); filter:blur(40px); pointer-events:none;
}
.mr-conditions__callout h3{
  position:relative; font-family:var(--mr-font-display); font-weight:600; font-size:22px; line-height:28px; margin:0 0 .6rem; color:#fff;
}
.mr-conditions__callout p{ position:relative; margin:0 0 1.3rem; color:#C9CEE4; font-size:14px; line-height:23px; letter-spacing:-0.3px; }
.mr-conditions__callout .mr-btn{ position:relative; }

/* ============================================================
   FOOTER
   ============================================================ */
.mr-footer{ position:relative; background:var(--mr-navy); color:#EDEFF7; padding:5rem 1.5rem 2rem; }
.mr-footer__grid{ max-width:var(--mr-container); margin:0 auto; display:grid; grid-template-columns:1.3fr 2fr 1.2fr; gap:3rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.12); }
.mr-footer__mark{ display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; background:var(--mr-grad); font-family:var(--mr-font-display); font-weight:700; color:#fff; margin-bottom:1rem; }
/* Uploaded logo image: sized by height only (see the Style tab's "Logo image height"
   slider), width follows the image's own aspect ratio — no forced circle crop. */
.mr-footer__mark--img{ width:auto; height:48px; border-radius:0; background:none; object-fit:contain; }
.mr-footer__name{ font-family:var(--mr-font-display); text-transform:uppercase; font-size:1.05rem; margin:0 0 .3rem; color:#fff; }
.mr-footer__tagline{ color:#9AA2C2; font-size:.85rem; margin:0 0 1.3rem; }
.mr-footer__desc{ color:rgba(255,255,255,.5); font-size:14px; line-height:23px; letter-spacing:-0.5px; max-width:274px; margin:-.6rem 0 1.3rem; }
.mr-footer__socials{ display:flex; gap:.7rem; }
.mr-footer__socials a{ display:flex; align-items:center; justify-content:center; color:#fff; overflow:hidden; }
.mr-footer__socials svg{ width:16px; height:16px; }
.mr-footer__socials .mr-icon--img{ width:100%; height:100%; object-fit:cover; }
.mr-footer__nav{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.mr-footer__col h4{ text-transform:uppercase; font-weight:700; font-size:14px; line-height:20px; letter-spacing:.9px; color:#fff; margin:0 0 1rem; }
.mr-footer__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.65rem; }
.mr-footer__col a{ color:rgba(255,255,255,.5); text-decoration:none; font-size:14px; line-height:20px; letter-spacing:-0.5px; }
.mr-footer__col a:hover{ color:var(--mr-teal); }
.mr-footer__contact h4{ text-transform:uppercase; font-weight:700; font-size:14px; line-height:20px; letter-spacing:.9px; color:#fff; margin:0 0 1rem; }
.mr-footer__contact-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1.1rem; }
.mr-footer__contact-list li{ display:flex; gap:.6rem; align-items:flex-start; font-size:.88rem; color:#C9CEE4; }
.mr-footer__contact-list a{ color:#fff; text-decoration:none; font-size:14px; line-height:20px; letter-spacing:-0.5px; }
.mr-footer__contact-text{ display:flex; flex-direction:column; gap:2px; }
.mr-footer__contact-text em{ font-style:normal; font-size:12px; line-height:16px; letter-spacing:-0.2px; color:rgba(255,255,255,.5); }
.mr-footer__contact-list .mr-icon{ width:18px; height:18px; color:var(--mr-teal); flex:none; margin-top:1px; }
.mr-footer__contact-list .mr-icon--img{ width:18px; height:18px; object-fit:contain; }
.mr-footer__contact-item--pink .mr-icon{ color:var(--mr-pink); }
.mr-footer__bottom{ max-width:var(--mr-container); margin:0 auto; padding-top:1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.mr-footer__bottom p{ margin:0; font-size:12px; line-height:16px; color:#8891AC; }
.mr-footer__legal{ list-style:none; margin:0; padding:0; display:flex; gap:1.5rem; }
.mr-footer__legal a{ color:#8891AC; text-decoration:none; font-size:12px; line-height:16px; }
.mr-footer__legal a:hover{ color:#fff; }

/* ============================================================
   CONTACT DETAILS (Contact page, left column — heading/body,
   contact-info cards, dark Service Area card, Follow Megan social
   row, Benefits row). Column-scoped widget: no outer max-width of
   its own, it just fills whichever Elementor column holds it.
   ============================================================ */
.mr-contact-details{ display:flex; flex-direction:column; }
.mr-contact-details__body{ margin:.9rem 0 0; color:var(--mr-gray); font-size:16px; line-height:26px; letter-spacing:-0.5px; }
.mr-contact-details__eyebrow-label{
  margin:0 0 .9rem; font-family:var(--mr-font-body); font-weight:600; font-size:12px; line-height:16px;
  letter-spacing:.7px; text-transform:uppercase; color:var(--mr-pink);
}

/* -- shared card component: icon chip + label/title/desc text -- reused for
   info cards (stacked), socials (3-up grid) and benefits (stacked) -- */
.mr-contact-card{
  display:flex; align-items:flex-start; gap:14px; background:#fff; border:1px solid var(--mr-line);
  border-radius:14px; padding:1rem 1.25rem; text-decoration:none; color:inherit; width:100%;
  transition:border-color .2s ease, box-shadow .2s ease;
}
a.mr-contact-card:hover{ border-color:transparent; box-shadow:0 8px 20px rgba(13,27,62,.08); }
.mr-contact-card__icon{
  display:flex; align-items:center; justify-content:center; flex:none; width:44px; height:44px;
  border-radius:12px;
}
.mr-contact-card__icon .mr-icon{ width:20px; height:20px; flex:none; color:inherit; }
.mr-contact-card__icon .mr-icon--img{ width:20px; height:20px; object-fit:contain; }
.mr-contact-card__text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.mr-contact-card__label{ font-weight:600; font-size:12px; line-height:16px; letter-spacing:.3px; }
.mr-contact-card__title{ font-weight:700; font-size:16px; line-height:24px; letter-spacing:-0.3px; color:var(--mr-navy); word-break:break-word; }
.mr-contact-card__desc{ font-size:13px; line-height:20px; letter-spacing:-0.2px; color:var(--mr-gray); }

.mr-contact-details__cards{ display:flex; flex-direction:column; gap:12px; margin-top:2rem; }

.mr-contact-details__service-area{
  position:relative; overflow:hidden; margin-top:12px; background:var(--mr-navy); border-radius:16px;
  padding:1.5rem 1.75rem;
}
.mr-contact-details__sa-icon{
  display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:9px;
  background:rgba(255,255,255,.12); color:#fff; margin-bottom:.75rem;
}
.mr-contact-details__sa-icon .mr-icon{ width:16px; height:16px; }
.mr-contact-details__sa-icon .mr-icon--img{ width:16px; height:16px; object-fit:contain; }
.mr-contact-details__sa-heading{ margin:0 0 .5rem; font-family:var(--mr-font-display); font-weight:600; font-size:18px; line-height:24px; color:#fff; }
.mr-contact-details__sa-body{ margin:0; color:rgba(255,255,255,.6); font-size:13px; line-height:21px; letter-spacing:-0.2px; }
.mr-contact-details__sa-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:1rem; }
.mr-contact-tag{
  display:inline-flex; align-items:center; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1);
  border-radius:9999px; padding:5px 12px; font-size:12px; line-height:16px; letter-spacing:-0.2px; color:rgba(255,255,255,.75);
}

.mr-contact-details__social-block{ margin-top:2rem; }
.mr-contact-details__socials{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
/* Icon on the left, platform name + handle stacked on the right — same row layout
   as the info cards, just with the social row's smaller icon chip and type scale. */
.mr-contact-card--social{ flex-direction:row; align-items:center; gap:10px; padding:1rem; }
.mr-contact-card--social .mr-contact-card__icon{ width:36px; height:36px; }
.mr-contact-card--social .mr-contact-card__icon .mr-icon{ width:16px; height:16px; }
.mr-contact-card--social .mr-contact-card__title{ font-size:14px; line-height:20px; }
.mr-contact-card--social .mr-contact-card__desc{ font-size:12px; }

.mr-contact-details__benefits-block{ margin-top:1.5rem; }
.mr-contact-details__benefits{ display:flex; flex-direction:column; gap:12px; }
.mr-contact-card--benefit .mr-contact-card__title{ font-size:14px; line-height:21px; font-weight:600; }

/* ============================================================
   ENQUIRY FORM (Contact page, right column — Book Online button +
   the "Make an Enquiry" card: pill, heading, description,
   patient-type tabs, then a saved-Elementor-template panel per tab
   — see mr-elementor-widgets.php: MR_Enquiry_Form_Widget picks a
   template per tab via mr_render_elementor_template() rather than
   hand-building form fields. Only the active tab's panel shows
   (mr-frontend.js toggles .is-active); with no template chosen yet
   the empty-state box below explains the two ways to add one.
   ============================================================ */
.mr-enquiry-form{ display:flex; flex-direction:column; }
.mr-enquiry-form__book{ width:100%; justify-content:center; margin-bottom:1.25rem; }
.mr-enquiry-form__card{
  position:relative; overflow:hidden; background:#fff; border-radius:20px 20px 0 0;
  padding:2rem 2rem 1.5rem;
}
.mr-enquiry-form__card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--mr-teal), var(--mr-pink), var(--mr-purple));
}
.mr-enquiry-form__card::after{
  content:''; position:absolute; top:-60px; right:-60px; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(236,0,140,.12), transparent 70%); pointer-events:none;
}
.mr-enquiry-form__pill{
  position:relative; display:inline-flex; align-items:center; gap:8px; background:rgba(236,0,140,.08);
  border-radius:9999px; padding:6px 14px 6px 6px; font-weight:600; font-size:11px; line-height:16px;
  letter-spacing:.5px; color:var(--mr-pink); margin-bottom:1rem;
}
.mr-enquiry-form__pill-icon{
  display:flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%;
  background:transparent; color:var(--mr-pink); flex:none;
}
.mr-enquiry-form__pill-icon .mr-icon{ width:12px; height:12px; }
.mr-enquiry-form__pill-icon .mr-icon--img{ object-fit:contain; }
.mr-enquiry-form__heading{
  position:relative; margin:0 0 .6rem; font-family:var(--mr-font-display); text-transform:uppercase;
  font-weight:700; font-size:clamp(1.5rem,2.6vw,1.875rem); line-height:1.15; letter-spacing:-0.3px; color:var(--mr-navy);
}
.mr-enquiry-form__desc{ position:relative; margin:0 0 1.5rem; color:var(--mr-gray); font-size:14px; line-height:22px; letter-spacing:-0.3px; max-width:34ch; }
.mr-enquiry-form__tabs{ position:relative; display:flex; background:var(--mr-light); border-radius:12px; padding:4px; gap:4px; }
.mr-enquiry-form__tab{
  flex:1 1 0; display:flex; align-items:center; justify-content:center; gap:8px; border:0; background:transparent;
  border-radius:9px; padding:10px 12px; font-family:var(--mr-font-body); font-weight:600; font-size:13px;
  letter-spacing:-0.2px; color:var(--mr-gray); cursor:pointer; transition:background-color .2s ease, color .2s ease;
}
.mr-enquiry-form__tab .mr-icon{ width:15px; height:15px; flex:none; }
.mr-enquiry-form__tab .mr-icon--img{ object-fit:contain; }
.mr-enquiry-form__tab.is-active{ background:var(--mr-navy); color:#fff; }
/* The card intentionally has square bottom corners (no bottom radius/padding —
   see .mr-enquiry-form__card above): whichever fields close it off — a
   template panel, the empty-state note, or a manually-added Form widget
   wearing this same class — supplies the closing radius + shadow instead. */
.mr-enquiry-form__fields{ display:block; background:#fff; border-radius:0 0 20px 20px; padding:1.5rem 2rem 2rem; }
/* Template panels: only one shows at a time (mr-frontend.js toggles .is-active
   to match the selected tab); each is independently a .mr-enquiry-form__fields
   box. */
.mr-enquiry-form__panel{ display:none; }
.mr-enquiry-form__panel.is-active{ display:block; }
.mr-enquiry-form__fields--empty p{ margin:0; color:var(--mr-gray); font-size:13px; line-height:21px; }
.mr-enquiry-form__fields--empty code{ background:var(--mr-light); border-radius:4px; padding:1px 6px; font-size:12px; }

/* Security reassurance line — lives INSIDE the white .mr-enquiry-form__fields
   box (right after the template's own fields/submit button), not below it, so
   it sits within the card's padded white area rather than floating under it. */
.mr-enquiry-form__footnote{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin:1.25rem 0 0; padding:0; color:var(--mr-gray); font-size:13px; line-height:19px; text-align:center;
}
.mr-enquiry-form__footnote-icon{ display:flex; flex:none; }
.mr-enquiry-form__footnote-icon .mr-icon{ width:16px; height:16px; }
.mr-enquiry-form__footnote-icon .mr-icon--img{ width:16px; height:16px; object-fit:contain; }

/* ============================================================
   RESPONSIVE — stack everything below 860px, never reposition
   in a way that risks overlap. Below 600px, tighten paddings.
   ============================================================ */
@media (max-width: 960px){
  .mr-header__nav{ display:none; }
  .mr-header__book{ display:none; }
  .mr-header__burger{ display:flex; }
  .mr-stats__grid, .mr-news__grid,
  .mr-footer__grid, .mr-footer__nav{ grid-template-columns:1fr; }
  /* !important: always stack to 1 column below this breakpoint no matter what the
     widget's "Columns" control is set to — default OR a custom 2/3/4 value, on any
     device tab (Desktop/Tablet/Mobile) in Elementor. That control's CSS otherwise has
     higher specificity than a plain class selector and would silently win here. */
  .mr-services__grid{ grid-template-columns:1fr !important; }
  /* Same guarantee for the other grids driven by a per-widget "Columns"/"Items per row"
     control — always stack to 1 column below this breakpoint regardless of the value. */
  .mr-sdc__grid{ grid-template-columns:1fr !important; }
  .mr-icon-list--grid{ grid-template-columns:1fr !important; }
  /* Icon List (stacked layout): every item goes full-width on mobile regardless of the
     per-item "Width" setting (Auto/Full/Half/One third) — !important since the width
     classes below have higher specificity than a plain .mr-icon-list--stacked li rule. */
  .mr-icon-list--stacked li{ flex-basis:100% !important; width:100% !important; }
  .mr-process__grid{ flex-direction:column; align-items:center; }
  .mr-process__grid::before{ display:none; }
  .mr-conditions__grid{ grid-template-columns:1fr; gap:3rem; }
  .mr-conditions__chip{ flex-basis:100%; }
  .mr-team-physio__grid{ grid-template-columns:1fr; }
  .mr-team-physio__head{ flex-direction:column; align-items:flex-start; gap:1.25rem; }
  .mr-team-physio__head-right{ max-width:none; }
  .mr-inline-cta__card{ flex-direction:column; align-items:flex-start; }
  .mr-inline-cta__buttons{ width:100%; }
  .mr-inline-cta__buttons .mr-btn{ width:100%; justify-content:center; }
  .mr-stats__grid{ gap:1.25rem; }
  .mr-stats__item:not(:last-child)::after{ left:0; right:0; top:auto; bottom:calc(-.625rem - 1px); width:auto; height:1px; }
  .mr-hero__trust{ flex-direction:column; align-items:flex-start; }
  .mr-hero__trust li{ padding-left:0 !important; border-left:none !important; font-size:16px; }
  .mr-split__grid{ grid-template-columns:1fr; }
  .mr-split--reverse .mr-split__grid{ direction:ltr; }
  .mr-split__media{ order:-1; }
  .mr-hero__inner{ max-width:100%; margin-left:0; }
  .mr-hero{ padding:4.5rem 1.25rem; min-height:0; }
  /* The "Other pages" hero style (hero_style: page) needs its own, much larger
     top padding — the shared .mr-hero reset above is sized for the tall
     centered Homepage hero and isn't enough to clear the header when it's in
     "Transparent over hero" mode (position:absolute — see .mr-header--transparent),
     which is exactly the combo this style is normally used with. Without this,
     the eyebrow pill sits under/behind the header on mobile. */
  .mr-hero--page{ padding-top:8.5rem; }
  .mr-footer__bottom{ flex-direction:column; text-align:center; justify-content:center; }
  .mr-footer__legal{ justify-content:center; flex-wrap:wrap; }
  .mr-cta-recovery__inner{ flex-direction:column; text-align:center; }
  .mr-cta-recovery__text{ max-width:100%; }
  .mr-cta-recovery__btns{ justify-content:center; }
  .mr-tabs{ flex-wrap:wrap; }
  .mr-tabs__item{ flex:1 1 30%; }
  .mr-pillars__grid{ grid-template-columns:1fr; }
  .mr-timeline__rail::before{ left:27px; }
  .mr-timeline__row{ grid-template-columns:56px 1fr; }
  .mr-timeline__marker{ grid-column:1; }
  .mr-timeline__row .mr-timeline__card,
  .mr-timeline__row:nth-child(even) .mr-timeline__card{ grid-column:2; }
  .mr-tag-banner__inner{ justify-content:center; text-align:center; }
  .mr-tag-banner__tags{ justify-content:center; }
  .mr-tag{ width:100%; }
  .mr-contact-details__socials{ grid-template-columns:1fr; }
  .mr-enquiry-form__card{ padding:1.5rem 1.5rem 1.25rem; }
  .mr-enquiry-form__fields{ padding:1.25rem 1.5rem 1.5rem; }
  .mr-enquiry-form__tabs{ flex-direction:column; }
}
@media (max-width: 600px){
  .mr-split, .mr-services, .mr-trusted-by, .mr-cta-recovery, .mr-news, .mr-footer,
  .mr-pillars, .mr-timeline, .mr-tag-banner, .mr-team-physio, .mr-inline-cta{ padding-left:1.25rem; padding-right:1.25rem; }
  .mr-header__inner{ padding:10px 1.25rem; }
  .mr-stats__number, .mr-stats__suffix{ font-size:2.1rem; }
  .mr-hero__title{ font-size:2.1rem; }
  .mr-badge{ position:static; display:inline-block; margin:.5rem .5rem 0 0; }
  .mr-tag-banner__card{ padding:1.75rem; }
}