/* =========================================================================
   MedTrust Solutions — Widgets for Elementor
   All widgets render inside a wrapper element with class .mts-w to namespace
   styles and resist theme overrides. CSS variables mirror src/styles.css from
   the Lovable source byte-for-byte (same HSL triples).
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Design tokens (mirrored from Lovable :root)
   ------------------------------------------------------------------------- */
.mts-w {
	--mts-background:        hsl(0,   0%,   100%);
	--mts-foreground:        hsl(215, 45%,  12%);
	--mts-card:              hsl(0,   0%,   100%);
	--mts-card-foreground:   hsl(215, 45%,  12%);
	--mts-primary:           hsl(205, 75%,  32%);
	--mts-primary-foreground:hsl(0,   0%,   100%);
	--mts-secondary:         hsl(320, 70%,  55%);
	--mts-secondary-foreground:hsl(0, 0%,   100%);
	--mts-muted:             hsl(210, 40%,  96%);
	--mts-muted-foreground:  hsl(215, 16%,  42%);
	--mts-accent:            hsl(185, 70%,  94%);
	--mts-accent-foreground: hsl(205, 75%,  22%);
	--mts-border:            hsl(215, 20%,  89%);
	--mts-ring:              hsl(205, 75%,  45%);
	--mts-brand:             hsl(205, 75%,  38%);
	--mts-brand-2:           hsl(185, 75%,  48%);
	--mts-brand-3:           hsl(320, 70%,  55%);

	--mts-radius:    0.875rem;
	--mts-radius-sm: calc(var(--mts-radius) - 4px);
	--mts-radius-lg: calc(var(--mts-radius) + 4px);
	--mts-radius-xl: calc(var(--mts-radius) + 8px);

	--mts-gradient-brand: linear-gradient(135deg, hsl(185, 75%, 48%), hsl(205, 75%, 38%) 50%, hsl(320, 70%, 55%));
	--mts-gradient-soft:  linear-gradient(135deg, hsl(185, 75%, 96%), hsl(320, 70%, 97%));
	--mts-gradient-text:  linear-gradient(90deg, hsl(185, 85%, 70%), #ffffff, hsl(320, 85%, 75%));
	--mts-gradient-stat:  linear-gradient(90deg, hsl(185, 85%, 70%), hsl(320, 85%, 75%));
	--mts-gradient-page-hero: linear-gradient(135deg, hsl(215, 55%, 12%), hsl(205, 75%, 22%), hsl(320, 60%, 28%));
	--mts-gradient-hero-overlay: linear-gradient(135deg, hsla(215, 55%, 10%, 0.85), hsla(215, 55%, 15%, 0.70) 50%, hsla(320, 60%, 25%, 0.70));

	--mts-shadow-brand: 0 18px 40px -16px hsla(205, 75%, 38%, 0.35);
	--mts-shadow-soft:  0 8px 30px -12px hsla(215, 45%, 20%, 0.12);

	--mts-font: 'Manrope', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* -------------------------------------------------------------------------
   2. Base reset within the namespace
   ------------------------------------------------------------------------- */
.mts-w,
.mts-w * {
	box-sizing: border-box;
}
.mts-w {
	font-family: var(--mts-font);
	color: var(--mts-foreground);
	-webkit-font-smoothing: antialiased;
	line-height: 1.6;
}
.mts-w h1, .mts-w h2, .mts-w h3, .mts-w h4 {
	letter-spacing: -0.02em;
	font-weight: 700;
	margin: 0;
	color: var(--mts-foreground);
	line-height: 1.1;
}
.mts-w p { margin: 0; }
.mts-w a { color: inherit; text-decoration: none; }
.mts-w img { max-width: 100%; height: auto; display: block; }
.mts-w ul { margin: 0; padding: 0; list-style: none; }
.mts-w button { font-family: inherit; }

/* Prevent horizontal scroll on mobile across all widgets. */
.mts-w { overflow-x: clip; }

/* Layout container helper. */
.mts-container {
	max-width: 80rem;          /* 1280px ≈ Tailwind max-w-7xl */
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}
@media (min-width: 768px) {
	.mts-container { padding-left: 2rem; padding-right: 2rem; }
}

.mts-section { padding: 5rem 0; }
@media (min-width: 768px) { .mts-section { padding: 7rem 0; } }
.mts-section--sm { padding: 4rem 0; }
@media (min-width: 768px) { .mts-section--sm { padding: 5rem 0; } }

/* -------------------------------------------------------------------------
   3. Buttons — beat any theme override (Hello Elementor Site Settings etc.)
      Inline-style block in widget templates ALSO sets these via style="";
      this gives us defaults when those aren't present.
   ------------------------------------------------------------------------- */
.mts-w .mts-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.875rem 1.75rem;
	border-radius: 9999px;
	font-weight: 600;
	font-size: 0.95rem;
	white-space: nowrap;
	border: 0;
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease, color 0.2s ease;
	text-align: center;
	line-height: 1.2;
}
.mts-w .mts-btn--gradient {
	background: var(--mts-gradient-brand);
	color: #ffffff;
	box-shadow: var(--mts-shadow-brand);
}
.mts-w .mts-btn--gradient:hover { opacity: 0.95; color: #ffffff; }
.mts-w .mts-btn--white {
	background: #ffffff;
	color: var(--mts-primary);
	font-weight: 700;
}
.mts-w .mts-btn--white:hover { background: rgba(255,255,255,0.95); }
.mts-w .mts-btn--glass {
	background: rgba(255,255,255,0.10);
	color: #ffffff;
	border: 1px solid rgba(255,255,255,0.30);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.mts-w .mts-btn--glass:hover { background: rgba(255,255,255,0.20); color: #ffffff; }
.mts-w .mts-btn--dark {
	background: var(--mts-foreground);
	color: var(--mts-background);
}
.mts-w .mts-btn--dark:hover { background: var(--mts-primary); color: #ffffff; }
.mts-w .mts-btn--sm { padding: 0.625rem 1.5rem; font-size: 0.875rem; }

.mts-w .mts-eyebrow {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--mts-brand-3);
}
.mts-w .mts-text-gradient {
	background: var(--mts-gradient-brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
.mts-w .mts-icon-tile {
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 0.75rem;
	background: var(--mts-gradient-brand);
	color: #ffffff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	box-shadow: var(--mts-shadow-brand);
	flex-shrink: 0;
}
.mts-w .mts-icon-tile--lg { width: 4rem; height: 4rem; font-size: 1.875rem; border-radius: 1rem; }
.mts-w .mts-icon-tile--accent {
	background: var(--mts-accent);
	color: var(--mts-primary);
	box-shadow: none;
	width: 3rem;
	height: 3rem;
	font-size: 1.25rem;
}

/* -------------------------------------------------------------------------
   4. HEADER widget
   ------------------------------------------------------------------------- */
.mts-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255,255,255,0.95);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--mts-border);
}
.mts-header__inner {
	max-width: 80rem;
	margin: 0 auto;
	height: 5rem;
	padding: 0 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
@media (min-width: 768px) { .mts-header__inner { padding: 0 2rem; } }
.mts-header__logo img { height: 3rem; width: auto; object-fit: contain; }
@media (min-width: 768px) { .mts-header__logo img { height: 3.5rem; } }
.mts-header__nav {
	display: none;
	align-items: center;
	gap: 0.25rem;
}
@media (min-width: 768px) { .mts-header__nav { display: flex; } }
.mts-header__nav a {
	padding: 0.5rem 1.25rem;
	border-radius: 9999px;
	font-size: 0.875rem;
	font-weight: 500;
	color: hsla(215, 45%, 12%, 0.8);
	transition: all 0.2s ease;
}
.mts-header__nav a:hover { color: var(--mts-foreground); background: var(--mts-accent); }
.mts-header__nav a.is-active {
	color: var(--mts-primary);
	background: var(--mts-accent);
	font-weight: 600;
}
.mts-header__right { display: flex; align-items: center; gap: 0.75rem; }
.mts-header__cta { display: none; }
@media (min-width: 768px) { .mts-header__cta { display: inline-flex; } }
.mts-header__burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	border-radius: 0.5rem;
	color: var(--mts-foreground);
	background: transparent;
	border: 0;
	cursor: pointer;
	font-size: 1.25rem;
}
@media (min-width: 768px) { .mts-header__burger { display: none; } }
.mts-header__burger:hover { background: var(--mts-accent); }
.mts-header__mobile {
	display: none;
	border-top: 1px solid var(--mts-border);
	background: var(--mts-background);
	padding: 0.75rem 1rem;
}
.mts-header.is-open .mts-header__mobile { display: block; }
@media (min-width: 768px) { .mts-header.is-open .mts-header__mobile { display: none; } }
.mts-header__mobile-nav { display: flex; flex-direction: column; gap: 0.25rem; }
.mts-header__mobile-nav a {
	padding: 0.75rem 1rem;
	border-radius: 0.75rem;
	font-size: 1rem;
	font-weight: 500;
	color: var(--mts-foreground);
}
.mts-header__mobile-nav a:hover { background: var(--mts-accent); }
.mts-header__mobile-cta {
	margin-top: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	border-radius: 0.75rem;
	background: var(--mts-gradient-brand);
	color: #ffffff;
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   5. HERO (homepage) — uses background-image, not <img>
   ------------------------------------------------------------------------- */
.mts-hero {
	position: relative;
	min-height: 88vh;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
}
.mts-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--mts-gradient-hero-overlay);
	pointer-events: none;
}
.mts-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 80rem;
	margin: 0 auto;
	width: 100%;
	padding: 7rem 1rem;
	color: #ffffff;
}
@media (min-width: 768px) { .mts-hero__inner { padding: 9rem 2rem; } }
.mts-hero__inner > div { max-width: 48rem; }
.mts-hero__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 1rem;
	border-radius: 9999px;
	background: rgba(255,255,255,0.10);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255,255,255,0.20);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-weight: 600;
	color: #ffffff;
}
.mts-hero__pill::before {
	content: "";
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 9999px;
	background: var(--mts-brand-2);
}
.mts-hero__title {
	margin-top: 1.5rem;
	font-size: clamp(2.25rem, 6vw, 4.5rem);
	font-weight: 800;
	line-height: 1.05;
	color: #ffffff;
}
.mts-hero__title .mts-hero__title-accent {
	background: var(--mts-gradient-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
.mts-hero__lead {
	margin-top: 1.5rem;
	font-size: 1.125rem;
	color: rgba(255,255,255,0.85);
	max-width: 38rem;
}
@media (min-width: 768px) { .mts-hero__lead { font-size: 1.25rem; } }
.mts-hero__buttons {
	margin-top: 2.5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}
@media (max-width: 767px) {
	.mts-hero { background-attachment: scroll; min-height: 100svh; }
}

/* -------------------------------------------------------------------------
   6. PAGE HERO (Inner hero — About / Services / Contact)
   ------------------------------------------------------------------------- */
.mts-page-hero {
	position: relative;
	overflow: hidden;
	background: var(--mts-gradient-page-hero);
	color: #ffffff;
}
.mts-page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0.30;
	background:
		radial-gradient(circle at 20% 20%, hsl(185, 85%, 60%) 0%, transparent 40%),
		radial-gradient(circle at 80% 60%, hsl(320, 85%, 60%) 0%, transparent 40%);
	pointer-events: none;
}
.mts-page-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 80rem;
	margin: 0 auto;
	padding: 6rem 1rem;
}
@media (min-width: 768px) { .mts-page-hero__inner { padding: 8rem 2rem; } }
.mts-page-hero__eyebrow {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: hsl(185, 85%, 75%);
}
.mts-page-hero__title {
	margin-top: 0.75rem;
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	font-weight: 800;
	max-width: 56rem;
	line-height: 1.05;
	color: #ffffff;
}
.mts-page-hero__desc {
	margin-top: 1.25rem;
	font-size: 1.125rem;
	color: rgba(255,255,255,0.80);
	max-width: 42rem;
}
@media (min-width: 768px) { .mts-page-hero__desc { font-size: 1.25rem; } }
.mts-page-hero__tagline {
	margin-top: 1.5rem;
	font-size: 0.875rem;
	font-style: italic;
	color: rgba(255,255,255,0.60);
}

/* -------------------------------------------------------------------------
   7. ABOUT (homepage 2-col)
   ------------------------------------------------------------------------- */
.mts-about-grid {
	display: grid;
	gap: 3rem;
	align-items: center;
}
@media (min-width: 768px) { .mts-about-grid { grid-template-columns: 1fr 1fr; } }
.mts-about__media { position: relative; }
.mts-about__media::before {
	content: "";
	position: absolute;
	inset: -1rem;
	background: var(--mts-gradient-brand);
	opacity: 0.15;
	border-radius: 1.5rem;
	filter: blur(2rem);
	pointer-events: none;
}
.mts-about__media img {
	position: relative;
	border-radius: 1.5rem;
	box-shadow: var(--mts-shadow-soft);
	width: 100%;
	height: auto;
	object-fit: cover;
}
.mts-about__title {
	margin-top: 0.75rem;
	font-size: clamp(1.875rem, 3.5vw, 3rem);
	font-weight: 800;
}
.mts-about__lead { margin-top: 1.5rem; color: var(--mts-muted-foreground); font-size: 1.125rem; line-height: 1.7; }
.mts-about__lead-2 { margin-top: 1rem; color: var(--mts-muted-foreground); line-height: 1.7; }
.mts-about__cta { margin-top: 2rem; }

/* -------------------------------------------------------------------------
   8. SERVICES (cards) + SERVICES GRID
   ------------------------------------------------------------------------- */
.mts-services { background: var(--mts-gradient-soft); }
.mts-services--plain { background: var(--mts-background); }
.mts-services__intro { max-width: 36rem; }
.mts-services__title {
	margin-top: 0.75rem;
	font-size: clamp(1.875rem, 3.5vw, 3rem);
	font-weight: 800;
}
.mts-services__lead { margin-top: 1rem; color: var(--mts-muted-foreground); font-size: 1.125rem; }
.mts-services__grid {
	margin-top: 3.5rem;
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .mts-services__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .mts-services__grid { grid-template-columns: 1fr 1fr 1fr; } }
.mts-service-card {
	position: relative;
	background: var(--mts-card);
	border-radius: 1rem;
	padding: 1.75rem;
	box-shadow: var(--mts-shadow-soft);
	border: 1px solid var(--mts-border);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.mts-service-card:hover { box-shadow: var(--mts-shadow-brand); transform: translateY(-4px); }
.mts-service-card__title { margin-top: 1.25rem; font-size: 1.25rem; font-weight: 700; color: var(--mts-foreground); }
.mts-service-card__desc { margin-top: 0.75rem; font-size: 0.875rem; color: var(--mts-muted-foreground); line-height: 1.7; }
.mts-services__cta { margin-top: 3rem; text-align: center; }

.mts-services-grid--lg .mts-service-card { padding: 2rem; border-radius: 1.5rem; }
.mts-services-grid--lg .mts-service-card__title { margin-top: 1.5rem; font-size: 1.5rem; }
.mts-services-grid--lg .mts-service-card__desc { margin-top: 0.75rem; font-size: 1rem; }

/* -------------------------------------------------------------------------
   9. VISION & MISSION
   ------------------------------------------------------------------------- */
.mts-vm-grid {
	display: grid;
	gap: 2rem;
}
@media (min-width: 768px) { .mts-vm-grid { grid-template-columns: 1fr 1fr; } }
.mts-vm-card {
	position: relative;
	overflow: hidden;
	border-radius: 1.5rem;
	padding: 2.5rem;
}
.mts-vm-card--light {
	background: var(--mts-gradient-soft);
	border: 1px solid var(--mts-border);
	color: var(--mts-foreground);
}
.mts-vm-card--dark {
	background: var(--mts-foreground);
	color: var(--mts-background);
}
.mts-vm-card h3 { margin-top: 1.5rem; font-size: 1.5rem; font-weight: 800; }
@media (min-width: 768px) { .mts-vm-card h3 { font-size: 1.875rem; } }
.mts-vm-card--dark h3 { color: var(--mts-background); }
.mts-vm-card p { margin-top: 1rem; line-height: 1.7; }
.mts-vm-card--light p { color: var(--mts-muted-foreground); }
.mts-vm-card--dark p { color: rgba(255,255,255,0.75); }

/* -------------------------------------------------------------------------
  10. VALUES — 4-up grid
   ------------------------------------------------------------------------- */
.mts-values { background: var(--mts-gradient-soft); }
.mts-values__intro { max-width: 36rem; }
.mts-values__title { margin-top: 0.75rem; font-size: clamp(1.875rem, 3.5vw, 3rem); font-weight: 800; }
.mts-values__lead { margin-top: 1rem; color: var(--mts-muted-foreground); font-size: 1.125rem; }
.mts-values__grid {
	margin-top: 3.5rem;
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .mts-values__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .mts-values__grid { grid-template-columns: repeat(4, 1fr); } }
.mts-value-card {
	background: var(--mts-card);
	border-radius: 1rem;
	padding: 1.5rem;
	border: 1px solid var(--mts-border);
	transition: box-shadow 0.3s ease;
}
.mts-value-card:hover { box-shadow: var(--mts-shadow-soft); }
.mts-value-card__title { margin-top: 1.25rem; font-size: 1.125rem; font-weight: 700; color: var(--mts-foreground); }
.mts-value-card__desc  { margin-top: 0.5rem; font-size: 0.875rem; color: var(--mts-muted-foreground); line-height: 1.7; }

/* -------------------------------------------------------------------------
  11. STATS — dark band, 4-up
   ------------------------------------------------------------------------- */
.mts-stats {
	background: var(--mts-foreground);
	color: var(--mts-background);
	padding: 4rem 0;
}
@media (min-width: 768px) { .mts-stats { padding: 5rem 0; } }
.mts-stats__grid {
	max-width: 80rem;
	margin: 0 auto;
	padding: 0 1rem;
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
}
@media (min-width: 768px)  { .mts-stats__grid { padding: 0 2rem; grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .mts-stats__grid { grid-template-columns: repeat(4, 1fr); } }
.mts-stat       { text-align: center; }
.mts-stat__value {
	font-size: clamp(3rem, 5vw, 3.75rem);
	font-weight: 800;
	background: var(--mts-gradient-stat);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	line-height: 1;
}
.mts-stat__label { margin-top: 0.75rem; font-size: 0.95rem; color: rgba(255,255,255,0.70); font-weight: 500; }

/* -------------------------------------------------------------------------
  12. PROCESS — 4 numbered cards
   ------------------------------------------------------------------------- */
.mts-process { background: var(--mts-gradient-soft); }
.mts-process__grid {
	margin-top: 3.5rem;
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .mts-process__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .mts-process__grid { grid-template-columns: repeat(4, 1fr); } }
.mts-process-card {
	position: relative;
	background: var(--mts-card);
	border-radius: 1rem;
	padding: 1.75rem;
	border: 1px solid var(--mts-border);
	box-shadow: var(--mts-shadow-soft);
}
.mts-process-card__num {
	position: absolute;
	top: -1rem;
	right: -1rem;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 9999px;
	background: var(--mts-gradient-brand);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	box-shadow: var(--mts-shadow-brand);
}
.mts-process-card__title { margin-top: 1.25rem; font-size: 1.125rem; font-weight: 700; }
.mts-process-card__text  { margin-top: 0.5rem; font-size: 0.875rem; color: var(--mts-muted-foreground); }

/* -------------------------------------------------------------------------
  13. OUR STORY — 2-col, mobile order swap (text first)
   ------------------------------------------------------------------------- */
.mts-our-story-grid {
	display: grid;
	gap: 3rem;
	align-items: center;
}
@media (min-width: 768px) { .mts-our-story-grid { grid-template-columns: 1fr 1fr; } }
.mts-our-story__text  { order: 2; }
.mts-our-story__media { order: 1; }
@media (min-width: 768px) {
	.mts-our-story__text  { order: 1; }
	.mts-our-story__media { order: 2; }
}
.mts-our-story__title { margin-top: 0.75rem; font-size: clamp(1.875rem, 3.5vw, 3rem); font-weight: 800; }
.mts-our-story__paras { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; color: var(--mts-muted-foreground); font-size: 1.125rem; line-height: 1.7; }
.mts-our-story__media { position: relative; }
.mts-our-story__media::before {
	content: "";
	position: absolute;
	inset: -1rem;
	background: var(--mts-gradient-brand);
	opacity: 0.15;
	border-radius: 1.5rem;
	filter: blur(2rem);
	pointer-events: none;
}
.mts-our-story__media img {
	position: relative;
	border-radius: 1.5rem;
	box-shadow: var(--mts-shadow-soft);
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* -------------------------------------------------------------------------
  14. CONTACT FORM
   ------------------------------------------------------------------------- */
.mts-contact-form-wrap {
	max-width: 48rem;
	margin: 0 auto;
	padding: 0 1rem;
}
@media (min-width: 768px) { .mts-contact-form-wrap { padding: 0 2rem; } }
.mts-contact-form-card {
	background: var(--mts-card);
	border-radius: 1.5rem;
	box-shadow: var(--mts-shadow-soft);
	border: 1px solid var(--mts-border);
	padding: 2rem;
}
@media (min-width: 768px) { .mts-contact-form-card { padding: 3rem; } }
.mts-contact-form-card h2 { font-size: clamp(1.875rem, 3vw, 2.25rem); font-weight: 800; }
.mts-contact-form-card__lead { margin-top: 0.75rem; color: var(--mts-muted-foreground); }
.mts-form { margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.mts-form input,
.mts-form select,
.mts-form textarea {
	width: 100%;
	border-radius: 0.75rem;
	border: 1px solid var(--mts-border);
	padding: 0.875rem 1rem;
	background: var(--mts-background);
	font-family: var(--mts-font);
	font-size: 1rem;
	color: var(--mts-foreground);
}
.mts-form input:focus,
.mts-form select:focus,
.mts-form textarea:focus {
	outline: none;
	box-shadow: 0 0 0 2px var(--mts-ring);
	border-color: var(--mts-ring);
}
.mts-form textarea { resize: vertical; min-height: 8rem; }
.mts-form-row {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}
@media (min-width: 640px) { .mts-form-row { grid-template-columns: 1fr 1fr; } }
.mts-form-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.mts-form__submit {
	width: 100%;
	border-radius: 9999px;
	background: var(--mts-gradient-brand);
	color: #ffffff;
	padding: 1rem 2rem;
	font-weight: 600;
	font-size: 1rem;
	border: 0;
	cursor: pointer;
	box-shadow: var(--mts-shadow-brand);
	transition: opacity 0.2s ease;
	font-family: var(--mts-font);
}
.mts-form__submit:hover    { opacity: 0.95; }
.mts-form__submit:disabled { opacity: 0.6; cursor: wait; }
.mts-form__alert {
	border-radius: 0.75rem;
	padding: 0.75rem 1rem;
	font-size: 0.9rem;
	border: 1px solid;
	display: none;
}
.mts-form__alert.is-shown { display: block; }
.mts-form__alert--success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.mts-form__alert--error   { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* -------------------------------------------------------------------------
  15. CONTACT INFO — 5 cards (3-up at lg)
   ------------------------------------------------------------------------- */
.mts-contact-info { background: var(--mts-gradient-soft); padding: 4rem 0; }
@media (min-width: 768px) { .mts-contact-info { padding: 5rem 0; } }
.mts-contact-info__grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .mts-contact-info__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .mts-contact-info__grid { grid-template-columns: repeat(3, 1fr); } }
.mts-contact-card {
	display: block;
	background: var(--mts-card);
	border-radius: 1rem;
	padding: 1.75rem;
	border: 1px solid var(--mts-border);
	box-shadow: var(--mts-shadow-soft);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.mts-contact-card:hover { box-shadow: var(--mts-shadow-brand); transform: translateY(-4px); }
.mts-contact-card__label {
	margin-top: 1.25rem;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--mts-muted-foreground);
}
.mts-contact-card__value {
	margin-top: 0.25rem;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--mts-foreground);
}

/* -------------------------------------------------------------------------
  16. CONTACT CTA banner
   ------------------------------------------------------------------------- */
.mts-cta-section { padding: 5rem 0; }
@media (min-width: 768px) { .mts-cta-section { padding: 6rem 0; } }
.mts-cta-banner {
	position: relative;
	overflow: hidden;
	border-radius: 1.5rem;
	background: var(--mts-gradient-brand);
	color: #ffffff;
	padding: 4rem 2rem;
	box-shadow: var(--mts-shadow-brand);
	text-align: center;
}
@media (min-width: 768px) { .mts-cta-banner { padding: 5rem 4rem; } }
.mts-cta-banner::before,
.mts-cta-banner::after {
	content: "";
	position: absolute;
	width: 18rem;
	height: 18rem;
	border-radius: 9999px;
	background: rgba(255,255,255,0.10);
	filter: blur(3rem);
	pointer-events: none;
}
.mts-cta-banner::before { top: -4rem; right: -4rem; }
.mts-cta-banner::after  { bottom: -4rem; left: -4rem; }
.mts-cta-banner__inner { position: relative; z-index: 1; max-width: 48rem; margin: 0 auto; }
.mts-cta-banner h2 {
	font-size: clamp(1.875rem, 4vw, 3rem);
	font-weight: 800;
	color: #ffffff;
}
.mts-cta-banner__lead {
	margin-top: 1rem;
	font-size: 1.125rem;
	color: rgba(255,255,255,0.85);
}
.mts-cta-banner__buttons {
	margin-top: 2rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}

/* -------------------------------------------------------------------------
  17. FOOTER
   ------------------------------------------------------------------------- */
.mts-footer {
	background: hsl(215, 45%, 10%);
	color: rgba(255,255,255,0.85);
}
.mts-footer__inner {
	max-width: 80rem;
	margin: 0 auto;
	padding: 4rem 1rem;
	display: grid;
	gap: 3rem;
	grid-template-columns: 1fr;
}
@media (min-width: 768px) {
	.mts-footer__inner { padding: 4rem 2rem; grid-template-columns: 2fr 1fr 1fr; }
}
.mts-footer__brand img { height: 4rem; width: auto; object-fit: contain; }
.mts-footer__desc    { margin-top: 1rem; font-size: 0.875rem; color: rgba(255,255,255,0.70); max-width: 28rem; }
.mts-footer__tagline { margin-top: 0.75rem; font-size: 0.875rem; font-style: italic; color: rgba(255,255,255,0.60); }
.mts-footer__socials { margin-top: 1.25rem; display: flex; gap: 0.75rem; }
.mts-footer__socials a {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 9999px;
	background: rgba(255,255,255,0.10);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	transition: background 0.3s ease;
}
.mts-footer__socials a:hover { background: var(--mts-gradient-brand); }
.mts-footer__col h4 {
	color: #ffffff;
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin: 0 0 1rem 0;
}
.mts-footer__col ul { display: flex; flex-direction: column; gap: 0.5rem; }
.mts-footer__col a  { color: rgba(255,255,255,0.70); font-size: 0.875rem; transition: color 0.2s ease; }
.mts-footer__col a:hover { color: #ffffff; }
.mts-footer__contact-list { display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.875rem; color: rgba(255,255,255,0.70); }
.mts-footer__contact-list li { display: flex; align-items: flex-start; gap: 0.75rem; }
.mts-footer__contact-list i  { margin-top: 0.25rem; color: var(--mts-brand-2); flex-shrink: 0; }
.mts-footer__bottom { border-top: 1px solid rgba(255,255,255,0.10); }
.mts-footer__bottom-inner {
	max-width: 80rem;
	margin: 0 auto;
	padding: 1.25rem 1rem;
	font-size: 0.75rem;
	color: rgba(255,255,255,0.50);
	text-align: center;
}
@media (min-width: 768px) { .mts-footer__bottom-inner { padding: 1.25rem 2rem; } }
.mts-footer__credit { display: block; margin-top: 0.25rem; }
.mts-footer__credit a { color: rgba(255,255,255,0.65); text-decoration: none; transition: color 0.2s ease; }
.mts-footer__credit a:hover { color: #ffffff; }

/* -------------------------------------------------------------------------
  18. Theme override insurance.
       Hello Elementor's "Site Settings → Buttons" rule otherwise turns our
       gradient buttons grey. The inline-style block in each widget template
       is the primary line of defense; this is a backstop.
   ------------------------------------------------------------------------- */
.elementor-widget-container .mts-w .mts-btn,
.mts-w .mts-btn {
	border-width: 0;
}

/* =========================================================================
  19. Style refinements (round 1)
       Targeted overrides for global heading weight, heading→description
       spacing, hero text colors, inner-page-hero spacing, and mobile-only
       header CTA visibility. Uses !important selectively to beat theme
       rules; restricted to .mts-w so nothing leaks outside our widgets.
   ========================================================================= */

/* 19.1 — Global heading weight: 800 across all widgets. */
.mts-w h1,
.mts-w h2,
.mts-w h3,
.mts-w h4,
.mts-w h5,
.mts-w h6 {
	font-weight: 800 !important;
}

/* 19.2 — Global spacing between any heading and the description below it.
          Targets the immediately-following paragraph in any widget. */
.mts-w h1 + p,
.mts-w h2 + p,
.mts-w h3 + p,
.mts-w h4 + p,
.mts-w h5 + p,
.mts-w h6 + p {
	margin-top: 1.25rem;
}
@media (min-width: 768px) {
	.mts-w h1 + p,
	.mts-w h2 + p,
	.mts-w h3 + p,
	.mts-w h4 + p,
	.mts-w h5 + p,
	.mts-w h6 + p {
		margin-top: 1.5rem;
	}
}

/* 19.3 — MTS Hero: force "Empowering Healthcare," (base title text) white.
          Some themes globally color h1 — this beats them. */
.mts-w .mts-hero__title {
	color: #ffffff !important;
}
/* The accented second line keeps its gradient — undo the override there. */
.mts-w .mts-hero__title .mts-hero__title-accent {
	color: transparent !important;
	-webkit-text-fill-color: transparent;
}

/* 19.4 — Inner Page Hero: white title + spacing above and below. */
.mts-w .mts-page-hero__title {
	color: #ffffff !important;
	margin-top: 1.25rem;     /* gap from eyebrow above */
	margin-bottom: 1.25rem;  /* gap to description below */
}
@media (min-width: 768px) {
	.mts-w .mts-page-hero__title {
		margin-top: 1.5rem;
		margin-bottom: 1.5rem;
	}
}
/* Reset the description's own top margin so the title's bottom margin
   is the single source of spacing (avoids double-stacking). */
.mts-w .mts-page-hero__title + .mts-page-hero__desc {
	margin-top: 0;
}

/* 19.5 — Header: hide "Get in Touch" CTA on mobile only.
          The button already shows on desktop (≥768px) via the rule in
          section 4. This keeps tablet+desktop visible, hides on phones. */
@media (max-width: 767px) {
	.mts-w .mts-header__cta {
		display: none !important;
	}
}

/* =========================================================================
  20. Style refinements (round 2)
       Heading weight to 900, hero pill→title spacing, and icon→title gaps
       across services / values / process cards.
   ========================================================================= */

/* 20.1 — Headings: bump to 900 (was 800 in round 1).
          Overrides rule 19.1 below it (later in source = wins). */
.mts-w h1,
.mts-w h2,
.mts-w h3,
.mts-w h4,
.mts-w h5,
.mts-w h6 {
	font-weight: 900 !important;
}

/* 20.2 — Hero: increase gap between the pill ("MedTrust Solutions — Lebanon")
          and the title ("Empowering Healthcare, Enhancing Lives."). */
.mts-w .mts-hero__title {
	margin-top: 2.25rem;
}
@media (min-width: 768px) {
	.mts-w .mts-hero__title {
		margin-top: 2.5rem;
	}
}

/* 20.3 — Service cards: more space between icon tile and title. */
.mts-w .mts-service-card__title {
	margin-top: 1.75rem;
}
.mts-w .mts-services-grid--lg .mts-service-card__title {
	margin-top: 2rem;
}

/* 20.4 — Value cards: more space between icon tile and title. */
.mts-w .mts-value-card__title {
	margin-top: 1.75rem;
}

/* 20.5 — Process cards: more space between icon tile and title. */
.mts-w .mts-process-card__title {
	margin-top: 1.75rem;
}