/* ============================================================
   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.
   ============================================================ */

: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-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-cta-recovery, .mr-news, .mr-mobile-nav{
  box-sizing:border-box;
  font-family:var(--mr-font-body);
  color:var(--mr-ink);
}
.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 *{
  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:700; font-size:clamp(2.25rem, 4.3vw, 3.75rem); line-height:1; color:var(--mr-navy); }
.mr-eyebrow{ 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-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:0 0 1rem; }
.mr-icon{ display:block; }
.mr-center{ text-align:center; margin-top:2rem; }

.mr-accent-teal{ color:var(--mr-teal); }
.mr-accent-grad{
  background:var(--mr-grad); -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); }

/* 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); color:#fff; border:1px solid rgba(229,231,235,1);
  box-shadow:0 12.17px 18.26px 0 rgba(236,0,140,.3), 0 4.87px 7.3px 0 rgba(236,0,140,.3);
}
.mr-btn--pink{ border-radius:10px; }
.mr-btn--teal-outline{ border-color:var(--mr-teal); color:var(--mr-teal); background:transparent; }
.mr-btn--dark-outline{ border-color:rgba(255,255,255,.5); color:#fff; background:transparent; }
.mr-btn--white{ background:#fff; color:var(--mr-navy); }

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

.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); }

.mr-badge{ position:absolute; 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--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; }

/* ============================================================
   HEADER
   ============================================================ */
.mr-header{ position:sticky; top:0; z-index:40; background:#fff; border-bottom:1px solid var(--mr-line); }
.mr-header__inner{ max-width:1440px; margin:0 auto; padding:10px 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; gap:1.8rem; }
.mr-header__link{ 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:2px 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); }
.mr-mobile-nav{ display:none; flex-direction:column; padding:1rem 1.5rem 1.5rem; border-top:1px solid var(--mr-line); }
.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__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; 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;
}
.mr-hero__scrim{ position:absolute; inset:0; background:linear-gradient(100deg, rgba(13,27,62,.96) 20%, rgba(13,27,62,.55) 75%); }
.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:wrap; gap:1.4rem 2rem; }
.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; }
.mr-hero__trust .mr-icon{ color:var(--mr-teal); width:18px; height:18px; }

/* ============================================================
   STATS BAR
   ============================================================ */
.mr-stats{ background:var(--mr-teal); padding:3rem 1.5rem; border-radius:48px 48px 0 0; margin-top:-32px; position:relative; }
.mr-stats__grid{ max-width:var(--mr-container); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); text-align:center; gap:1.5rem; }
.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:var(--mr-navy); font-weight:400; font-size:12px; line-height:16px; letter-spacing:.7px; margin-top:.3rem; }

/* ============================================================
   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-icon-list{ list-style:none; margin:1.6rem 0 0; padding:0; display:grid; gap:1rem; }
.mr-icon-list--grid{ grid-template-columns:1fr 1fr; }
.mr-icon-list--list{ grid-template-columns:1fr; }
.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; }
.mr-icon-list__ic .mr-icon{ width:19px; height:19px; }
.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; }
.mr-services__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.mr-service-card{ display:block; text-decoration:none; color:inherit; background:var(--mr-light); border-radius:var(--mr-radius); padding:2rem; transition:transform .15s ease; }
a.mr-service-card:hover{ transform:translateY(-4px); }
.mr-service-card__icon{ width:52px; height:52px; border-radius:14px; background:#fff; color:var(--mr-teal); display:flex; align-items:center; justify-content:center; margin-bottom:1.2rem; }
.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; }
.mr-service-card--cta{ background:var(--mr-grad); color:#fff; display:flex; flex-direction:column; justify-content:center; }
.mr-service-card--cta h3{ color:#fff; }
.mr-service-card--cta p{ color:rgba(255,255,255,.9); margin-bottom:1.2rem; }

/* ============================================================
   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:wrap; justify-content:center; gap:.7rem; }
.mr-tabs__pill{ border:1px solid var(--mr-line); background:#fff; color:#5A6180; padding:.6rem 1.3rem; border-radius:999px; font-weight:600; font-size:.85rem; cursor:pointer; }
.mr-tabs__pill.is-active{ background:var(--mr-navy); border-color:var(--mr-navy); color:#fff; }

/* ============================================================
   PARTNER CAROUSEL (marquee)
   ============================================================ */
.mr-carousel{ overflow:hidden; padding:2.5rem 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.mr-carousel__track{ display:flex; align-items:center; gap:3.5rem; width:max-content; animation:mr-marquee var(--mr-carousel-speed,32s) linear infinite; }
.mr-carousel__track--reverse{ animation-direction:reverse; margin-top:2rem; }
.mr-carousel__logo{ flex:none; height:44px; display:flex; align-items:center; }
.mr-carousel__logo img{ height:100%; width:auto; object-fit:contain; filter:grayscale(1); opacity:.65; }
.mr-carousel--color .mr-carousel__logo img{ filter:none; }
@keyframes mr-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .mr-carousel__track{ animation:none; overflow-x:auto; } }

/* ============================================================
   CTA RECOVERY BANNER
   ============================================================ */
.mr-cta-recovery{ background:var(--mr-navy); padding:5rem 1.5rem; text-align:center; position:relative; overflow:hidden; }
.mr-cta-recovery--photo::before{
  content:""; position:absolute; inset:0; background-image:var(--mr-cta-bg); background-size:cover; background-position:center; opacity:.22;
}
.mr-cta-recovery__inner{ position:relative; max-width:640px; margin:0 auto; color:#fff; }
.mr-cta-recovery__inner p{ color:#C9CEE4; margin:1rem 0 0; line-height:1.7; }
.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:baseline; justify-content:space-between; gap:1rem; margin-bottom:2.5rem; }
.mr-news__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem; }
.mr-news-card{ text-decoration:none; color:inherit; display:block; }
.mr-news-card__img{ height:190px; border-radius:var(--mr-radius); background-size:cover; background-position:center; margin-bottom:1rem; }
.mr-news-card__pill{ display:inline-block; background:var(--mr-pink); color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.3rem .7rem; border-radius:999px; margin-bottom:.7rem; }
.mr-news-card h3{ font-family:var(--mr-font-display); text-transform:uppercase; font-size:1rem; margin:0 0 .5rem; color:var(--mr-navy); }
.mr-news-card p{ margin:0 0 .6rem; color:#5A6180; font-size:.88rem; line-height:1.6; }
.mr-news-card__more{ color:var(--mr-pink); font-weight:600; font-size:.85rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.mr-footer{ position:relative; background:var(--mr-navy); color:#EDEFF7; padding:5rem 1.5rem 2rem; }
/* Decorative curved edge that "cuts into" whatever section sits above the footer —
   approximated from Figma (a plain bounding box was all the API returned for this
   vector; no exact path data), so nudge the curve in mr-footer__wave path `d` above
   if the client wants a closer match to the original artwork. */
.mr-footer__wave{ position:absolute; top:-59px; left:0; width:100%; height:60px; display:block; pointer-events:none; }
.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; }

/* ============================================================
   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-services__grid, .mr-news__grid,
  .mr-footer__grid, .mr-footer__nav, .mr-icon-list--grid{ grid-template-columns:1fr; }
  .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; }
  .mr-footer__bottom{ flex-direction:column; text-align:center; justify-content:center; }
  .mr-footer__legal{ justify-content:center; flex-wrap:wrap; }
}
@media (max-width: 600px){
  .mr-split, .mr-services, .mr-trusted-by, .mr-cta-recovery, .mr-news, .mr-footer{ 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; }
}