/* ==========================================================================
   MedLab - Glassmorphism layer (brand green + teal)
   Loaded after main.css only when "Glass style" is on (wp-admin > Banner & Logos).
   Delete this file's enqueue (or untick the option) to go back to the flat style.

   Material system (3 tiers; every glass surface uses one of them):
     tier 1  "light"   - background decoration, chips, small tiles   : blur  8px, fill .30
     tier 2  "medium"  - main content panels and cards                : blur 16px, fill .46
     tier 3  "heavy"   - elevated: hero panel, footer, modals, drawer : blur 26px, fill .66
   Text stays dark on light glass (contrast >= 4.5:1 on the lightest part of the gradient).
   ========================================================================== */

body.ml-glass {
	--g1-blur: 8px;   --g1-fill: rgba(255,255,255,.30);
	--g2-blur: 16px;  --g2-fill: rgba(255,255,255,.46);
	--g3-blur: 26px;  --g3-fill: rgba(255,255,255,.66);
	--g-border: rgba(255,255,255,.62);
	--g-edge: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(255,255,255,.25);   /* light catching the top edge */
	--g-shadow: 0 10px 32px rgba(15,92,52,.13), 0 2px 8px rgba(27,127,75,.08);           /* shadows pick up the brand green */
	--g-shadow-hi: 0 16px 44px rgba(15,92,52,.20), 0 4px 12px rgba(0,191,165,.12);
	--g-dark-fill: rgba(15,92,52,.72);
	--ink: #14301f;
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------ atmosphere (background) */

html:has(body.ml-glass) { background: #e4f5ec; }
body.ml-glass { background: transparent; position: relative; }

body.ml-glass::before {                       /* animated mesh gradient, fixed behind everything */
	content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; will-change: transform;
	background:
		radial-gradient(900px 620px at 8% 4%,  rgba(0,191,165,.38), transparent 62%),
		radial-gradient(820px 600px at 94% 10%, rgba(27,127,75,.30), transparent 62%),
		radial-gradient(900px 700px at 72% 96%, rgba(120,214,160,.40), transparent 62%),
		radial-gradient(700px 520px at 6% 88%,  rgba(33,150,243,.16), transparent 62%),
		linear-gradient(135deg, #e6f8ee 0%, #d4f0e6 38%, #e6f5f6 68%, #f2fbf6 100%);
	background-size: 140% 140%;
	animation: ml-mesh 26s ease-in-out infinite alternate;
}
@keyframes ml-mesh { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }

.ml-orbs { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: paint; }
.ml-orbs span { position: absolute; border-radius: 50%; filter: blur(95px); opacity: .55; will-change: transform; pointer-events: none; }
.ml-orbs span:nth-child(1) { width: 460px; height: 460px; left: -120px; top: 14%; background: #00bfa5; animation: ml-float-a 24s ease-in-out infinite alternate; }
.ml-orbs span:nth-child(2) { width: 380px; height: 380px; right: -100px; top: 38%; background: #1b7f4b; opacity: .38; animation: ml-float-b 30s ease-in-out infinite alternate; }
.ml-orbs span:nth-child(3) { width: 320px; height: 320px; left: 42%; bottom: -120px; background: #8be0b4; animation: ml-float-a 36s ease-in-out infinite alternate-reverse; }
@keyframes ml-float-a { from { transform: translate3d(0,0,0); } to { transform: translate3d(70px,-50px,0) scale(1.12); } }
@keyframes ml-float-b { from { transform: translate3d(0,0,0); } to { transform: translate3d(-80px,60px,0) scale(.92); } }

/* sections let the atmosphere show through */
body.ml-glass .ml-main, body.ml-glass .ml-section, body.ml-glass .ml-hero, body.ml-glass .ml-banner,
body.ml-glass .ml-pshero, body.ml-glass .ml-media-band, body.ml-glass .ml-services, body.ml-glass .ml-offers { background: transparent; }

/* ------------------------------------------------------- glass primitives */

/* tier 2: main content panels and cards */
body.ml-glass .ml-quick__item,
body.ml-glass .ml-pkgcard, body.ml-glass .ml-media-card, body.ml-glass .ml-pcard, body.ml-glass .ml-loc,
body.ml-glass .ml-iconbox, body.ml-glass .ml-member, body.ml-glass .ml-useful, body.ml-glass .ml-ceo,
body.ml-glass .ml-fbcard, body.ml-glass .ml-socialcta, body.ml-glass .ml-flip__face--front,
body.ml-glass .ml-tablewrap, body.ml-glass .ml-pkg, body.ml-glass .ml-offer, body.ml-glass .ml-stat,
body.ml-glass .ml-step, body.ml-glass .ml-confirm, body.ml-glass .ml-portal__card {
	background: var(--g2-fill);
	-webkit-backdrop-filter: blur(var(--g2-blur)) saturate(150%);
	backdrop-filter: blur(var(--g2-blur)) saturate(150%);
	border: 1px solid var(--g-border);
	box-shadow: var(--g-edge), var(--g-shadow);
	color: var(--ink);
}
body.ml-glass .ml-pcard, body.ml-glass .ml-media-card, body.ml-glass .ml-pkgcard { border-radius: 20px; }
body.ml-glass .ml-pcard { padding: 12px; }

/* hover: the panel brightens and its edge glows, as if light moved across the glass */
body.ml-glass .ml-pkgcard:hover, body.ml-glass .ml-media-card:hover, body.ml-glass .ml-pcard:hover,
body.ml-glass .ml-loc:hover, body.ml-glass .ml-iconbox:hover, body.ml-glass .ml-fbcard:hover, body.ml-glass .ml-offer:hover {
	background: rgba(255,255,255,.64);
	border-color: rgba(255,255,255,.95);
	box-shadow: var(--g-edge), var(--g-shadow-hi);
	transform: translateY(-3px);
}
body.ml-glass .ml-pkgcard, body.ml-glass .ml-media-card, body.ml-glass .ml-pcard, body.ml-glass .ml-loc, body.ml-glass .ml-iconbox, body.ml-glass .ml-fbcard, body.ml-glass .ml-offer {
	transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

/* tier 1: chips, tiles, small controls */
body.ml-glass .ml-catcard, body.ml-glass .ml-range, body.ml-glass .ml-chip, body.ml-glass .ml-offertab,
body.ml-glass .ml-quick .ml-quick__icon, body.ml-glass .ml-fbcard__logo, body.ml-glass .ml-ceo__photo,
body.ml-glass .ml-member__photo, body.ml-glass .ml-promo__tab, body.ml-glass .ml-tablefoot__pager button {
	background: var(--g1-fill);
	-webkit-backdrop-filter: blur(var(--g1-blur));
	backdrop-filter: blur(var(--g1-blur));
	border-color: rgba(255,255,255,.7);
	box-shadow: var(--g-edge);
}
body.ml-glass .ml-catcard.is-active, body.ml-glass .ml-range.is-active, body.ml-glass .ml-promo__tab.is-active,
body.ml-glass .ml-offertab.is-active, body.ml-glass .ml-tablefoot__pager button.is-active {
	background: linear-gradient(135deg, rgba(27,127,75,.92), rgba(0,150,125,.88)); color: #fff; border-color: rgba(255,255,255,.5);
	box-shadow: 0 6px 18px rgba(27,127,75,.35), inset 0 1px 0 rgba(255,255,255,.4);
}

/* ------------------------------------------------------- header = navbar */

body.ml-glass .ml-header {
	background: rgba(15,92,52,.64);
	-webkit-backdrop-filter: blur(var(--g3-blur)) saturate(170%);
	backdrop-filter: blur(var(--g3-blur)) saturate(170%);
	border-bottom: 1px solid rgba(255,255,255,.30);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 8px 30px rgba(15,92,52,.16);
	transition: background-color .3s ease, box-shadow .3s ease;
}
body.ml-glass .ml-header.is-scrolled { background: rgba(15,92,52,.84); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 10px 34px rgba(15,92,52,.28); }
body.ml-glass .ml-header__logo { background: rgba(255,255,255,.92); box-shadow: 0 4px 14px rgba(0,0,0,.14), inset 0 1px 0 #fff; }
body.ml-glass .ml-header__icon:hover { background: rgba(255,255,255,.2); }

/* slide-in menu: dark glass (elevated) */
body.ml-glass .ml-drawer {
	background: rgba(15,92,52,.80);
	-webkit-backdrop-filter: blur(var(--g3-blur)) saturate(160%);
	backdrop-filter: blur(var(--g3-blur)) saturate(160%);
	border-left: 1px solid rgba(255,255,255,.28);
}

/* --------------------------------------------------------------- hero */

body.ml-glass .ml-hero { padding: 34px 20px 56px; }
body.ml-glass .ml-hero__slides {
	max-width: 1140px; margin: 0 auto; padding: 38px 34px; position: relative;
	background: var(--g3-fill);
	-webkit-backdrop-filter: blur(var(--g3-blur)) saturate(160%);
	backdrop-filter: blur(var(--g3-blur)) saturate(160%);
	border: 1px solid var(--g-border); border-radius: 32px;
	box-shadow: var(--g-edge), 0 24px 60px rgba(15,92,52,.18), 0 4px 14px rgba(0,191,165,.10);
}
body.ml-glass .ml-hero__inner { padding: 0; }
body.ml-glass .ml-hero__title { color: var(--brand-deep); text-shadow: 0 1px 0 rgba(255,255,255,.55); }
body.ml-glass .ml-hero__img { border-radius: 22px; border: 1px solid rgba(255,255,255,.75); box-shadow: 0 18px 44px rgba(15,92,52,.28), 0 2px 8px rgba(0,0,0,.08); }
body.ml-glass .ml-hero__dots { bottom: 14px; }
/* page-title banners: glass strip */
body.ml-glass .ml-banner, body.ml-glass .ml-pshero { padding: 22px 0; }
body.ml-glass .ml-banner > .ml-container, body.ml-glass .ml-pshero > .ml-container {
	background: var(--g2-fill); -webkit-backdrop-filter: blur(var(--g2-blur)); backdrop-filter: blur(var(--g2-blur));
	border: 1px solid var(--g-border); border-radius: 24px; box-shadow: var(--g-edge), var(--g-shadow); padding: 26px 34px;
}
body.ml-glass .ml-banner__title, body.ml-glass .ml-pshero__title { color: var(--brand-deep); text-shadow: 0 1px 0 rgba(255,255,255,.5); }

/* ------------------------------------------------------ quick links, services */

body.ml-glass .ml-quick .ml-quick__item, body.ml-glass .ml-quick .ml-quick__item:nth-child(n) { background: var(--g2-fill); border: 1px solid var(--g-border); border-radius: 22px; box-shadow: var(--g-edge), var(--g-shadow); }
@media (hover: hover) {
	body.ml-glass .ml-quick .ml-quick__item:hover { background: rgba(27,127,75,.86); -webkit-backdrop-filter: blur(var(--g2-blur)); backdrop-filter: blur(var(--g2-blur)); border-color: rgba(255,255,255,.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 14px 34px rgba(27,127,75,.38); }
}
body.ml-glass .ml-flip__face--front { border-radius: 20px; }
body.ml-glass .ml-flip__face--back { background: rgba(27,127,75,.88); -webkit-backdrop-filter: blur(var(--g2-blur)); backdrop-filter: blur(var(--g2-blur)); border-radius: 20px; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), var(--g-shadow-hi); }

/* media band + stats */
body.ml-glass .ml-media-band { padding-top: 24px; }
body.ml-glass .ml-stats { background: transparent; padding: 24px 0; }
body.ml-glass .ml-stats__grid { background: var(--g-dark-fill); -webkit-backdrop-filter: blur(var(--g3-blur)); backdrop-filter: blur(var(--g3-blur)); border: 1px solid rgba(255,255,255,.30); border-radius: 28px; padding: 30px 20px; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 20px 50px rgba(15,92,52,.26); }
body.ml-glass .ml-stat { background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: #fff; }

/* ---------------------------------------------------------- tests & tables */

body.ml-glass .ml-tablewrap { border-radius: 22px; overflow: hidden; }
body.ml-glass .ml-table th { background: rgba(27,127,75,.88); }
body.ml-glass .ml-table td { border-bottom-color: rgba(255,255,255,.55); }
body.ml-glass .ml-table tr:nth-child(even) td { background: rgba(255,255,255,.22); }
body.ml-glass .ml-table tbody tr:hover td { background: rgba(255,255,255,.5); }
body.ml-glass .ml-table mark { background: rgba(255,226,120,.8); }

/* ------------------------------------------------ inputs: inset glass */

body.ml-glass .ml-field input, body.ml-glass .ml-field select, body.ml-glass .ml-field textarea,
body.ml-glass .ml-tablefoot select, body.ml-glass .ml-locfilter input {
	background: rgba(255,255,255,.38);
	-webkit-backdrop-filter: blur(var(--g1-blur)); backdrop-filter: blur(var(--g1-blur));
	border: 1px solid rgba(255,255,255,.75);
	box-shadow: inset 0 2px 7px rgba(15,92,52,.14), inset 0 -1px 0 rgba(255,255,255,.7);   /* pressed-in */
	color: var(--ink);
	transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}
body.ml-glass .ml-field input::placeholder, body.ml-glass .ml-field textarea::placeholder { color: #4a6556; }
body.ml-glass .ml-field input:focus, body.ml-glass .ml-field select:focus, body.ml-glass .ml-field textarea:focus {
	outline: 0; background: rgba(255,255,255,.6); border-color: var(--brand-primary);
	box-shadow: inset 0 2px 6px rgba(15,92,52,.10), 0 0 0 4px rgba(0,191,165,.28);    /* focus glow in the accent colour */
}

/* icons inside glass inputs stay visible above the blur layer */
body.ml-glass .ml-field--icon > .ml-icon { z-index: 2; }

/* buttons */
body.ml-glass .ml-btn:not(.ml-btn--ghost):not(.ml-btn--wa):not(.ml-btn--fb):not(.ml-btn--yt):not(.ml-btn--ig) {
	background: linear-gradient(135deg, #1b7f4b, #12957d); border-color: rgba(255,255,255,.35);
	box-shadow: 0 8px 20px rgba(27,127,75,.32), inset 0 1px 0 rgba(255,255,255,.4);
}
body.ml-glass .ml-btn--ghost { background: var(--g1-fill); -webkit-backdrop-filter: blur(var(--g1-blur)); backdrop-filter: blur(var(--g1-blur)); border-color: rgba(27,127,75,.5); box-shadow: var(--g-edge); }

/* ----------------------------------------------------------------- footer */

body.ml-glass .ml-footer {
	margin: 40px 20px 20px; padding-top: 44px; border-radius: 32px; overflow: hidden;
	background: var(--g3-fill); -webkit-backdrop-filter: blur(var(--g3-blur)) saturate(150%); backdrop-filter: blur(var(--g3-blur)) saturate(150%);
	border: 1px solid var(--g-border); box-shadow: var(--g-edge), 0 -4px 40px rgba(15,92,52,.10), 0 20px 50px rgba(15,92,52,.14);
}
body.ml-glass .ml-footer__bottom { background: rgba(27,127,75,.14); border-top: 1px solid rgba(255,255,255,.6); }

/* ----------------------------------- elevated tier: modals, popups, toasts */

body.ml-glass .ml-modal__backdrop { background: rgba(10,40,26,.42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body.ml-glass .ml-modal__dialog:not(.ml-promo) { background: rgba(255,255,255,.78); -webkit-backdrop-filter: blur(var(--g3-blur)) saturate(160%); backdrop-filter: blur(var(--g3-blur)) saturate(160%); border: 1px solid var(--g-border); border-radius: 26px; box-shadow: var(--g-edge), 0 30px 80px rgba(15,92,52,.30); }
body.ml-glass .ml-modal--video .ml-modal__dialog, body.ml-glass .ml-modal--light .ml-modal__dialog { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.ml-glass .ml-modal__dialog.ml-promo { background: rgba(255,255,255,.80); -webkit-backdrop-filter: blur(var(--g3-blur)) saturate(160%); backdrop-filter: blur(var(--g3-blur)) saturate(160%); border: 1px solid var(--g-border); box-shadow: var(--g-edge), 0 34px 90px rgba(15,92,52,.34); }
body.ml-glass .ml-promo__media { background: rgba(255,255,255,.35); }
body.ml-glass .ml-toast { background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(var(--g2-blur)); backdrop-filter: blur(var(--g2-blur)); border: 1px solid var(--g-border); box-shadow: var(--g-shadow-hi); color: var(--ink); }

/* floating contact pills + back-to-top: glass */
body.ml-glass .ml-float__pill { border: 1px solid rgba(255,255,255,.5); -webkit-backdrop-filter: blur(var(--g1-blur)); backdrop-filter: blur(var(--g1-blur)); box-shadow: 0 6px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.4); }
body.ml-glass .ml-totop { background: rgba(27,127,75,.85); -webkit-backdrop-filter: blur(var(--g1-blur)); backdrop-filter: blur(var(--g1-blur)); border: 1px solid rgba(255,255,255,.45); }

/* ---------------------------------------------- phones: lighter, more opaque */

@media (max-width: 767px) {
	body.ml-glass { --g1-blur: 4px; --g2-blur: 8px; --g3-blur: 14px; --g1-fill: rgba(255,255,255,.46); --g2-fill: rgba(255,255,255,.62); --g3-fill: rgba(255,255,255,.78); }
	body.ml-glass .ml-hero { padding: 20px 14px 40px; }
	body.ml-glass .ml-hero__slides { padding: 24px 18px; border-radius: 24px; }
	body.ml-glass .ml-banner > .ml-container, body.ml-glass .ml-pshero > .ml-container { padding: 20px 20px; border-radius: 20px; }
	body.ml-glass .ml-footer { margin: 30px 10px 10px; border-radius: 24px; }
	body.ml-glass .ml-stats__grid { border-radius: 22px; }
	.ml-orbs span { filter: blur(70px); }
	/* the 15 test cards on a phone: no blur per card (keeps scrolling smooth), just a frosted fill */
	body.ml-glass .ml-table tr { background: rgba(255,255,255,.62); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: rgba(255,255,255,.8); box-shadow: var(--g-shadow); }
	body.ml-glass .ml-table tr:nth-child(even) td { background: transparent; }
}

/* --------------------------------------------- browsers without backdrop-filter */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	body.ml-glass { --g1-fill: rgba(255,255,255,.78); --g2-fill: rgba(255,255,255,.88); --g3-fill: rgba(255,255,255,.94); --g-dark-fill: rgba(15,92,52,.94); }
	body.ml-glass .ml-header { background: rgba(15,92,52,.96); }
	body.ml-glass .ml-drawer { background: rgba(15,92,52,.98); }
	body.ml-glass .ml-modal__dialog:not(.ml-promo), body.ml-glass .ml-modal__dialog.ml-promo { background: rgba(255,255,255,.97); }
}

@media (prefers-reduced-motion: reduce) {
	body.ml-glass::before, .ml-orbs span { animation: none; }
	body.ml-glass .ml-pkgcard:hover, body.ml-glass .ml-media-card:hover, body.ml-glass .ml-pcard:hover, body.ml-glass .ml-loc:hover { transform: none; }
}


/* ==========================================================================
   LEVEL 2 - more depth and light
   frosted grain - luminous gradient edges - gloss - cursor spotlight - 3D tilt
   glass discs + parallax orbs - button shine - glass header/footer sheen
   ========================================================================== */

body.ml-glass {
	--g-noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .10 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
	--g-gloss: linear-gradient(118deg, rgba(255,255,255,.50) 0%, rgba(255,255,255,.10) 36%, rgba(255,255,255,0) 54%);
	--g2-bg: var(--g-gloss), var(--g-noise), linear-gradient(var(--g2-fill), var(--g2-fill));
	--g3-bg: var(--g-gloss), var(--g-noise), linear-gradient(var(--g3-fill), var(--g3-fill));
}

/* stronger atmosphere: a 4th orb + glass discs that sit behind the cards */
.ml-orbs span:nth-child(4) { width: 280px; height: 280px; right: 22%; top: -90px; background: #2196f3; opacity: .22; animation: ml-float-b 28s ease-in-out infinite alternate-reverse; }
.ml-orbs span:nth-child(1) { translate: calc(var(--px, 0) * 40px) calc(var(--py, 0) * 30px); }
.ml-orbs span:nth-child(2) { translate: calc(var(--px, 0) * -34px) calc(var(--py, 0) * 26px); }
.ml-orbs span:nth-child(3) { translate: calc(var(--px, 0) * 26px) calc(var(--py, 0) * -36px); }
.ml-orbs span:nth-child(4) { translate: calc(var(--px, 0) * -22px) calc(var(--py, 0) * 20px); }
.ml-ring {
	position: absolute; border-radius: 50%; pointer-events: none; will-change: transform;
	border: 1px solid rgba(255,255,255,.7);
	background: linear-gradient(145deg, rgba(255,255,255,.40), rgba(255,255,255,.06) 60%);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 30px 70px rgba(15,92,52,.14);
}
.ml-ring--a { width: 360px; height: 360px; left: 3%; top: 20%; animation: ml-float-a 32s ease-in-out infinite alternate; translate: calc(var(--px, 0) * 22px) calc(var(--py, 0) * 18px); }
.ml-ring--b { width: 520px; height: 520px; right: -140px; bottom: 4%; animation: ml-float-b 38s ease-in-out infinite alternate; translate: calc(var(--px, 0) * -18px) calc(var(--py, 0) * -14px); }

/* grain + gloss on the glass tiers (hover rules still win and brighten the panel) */
body.ml-glass :is(.ml-quick__item, .ml-pkgcard, .ml-media-card, .ml-pcard, .ml-loc, .ml-iconbox, .ml-member, .ml-useful, .ml-ceo, .ml-fbcard, .ml-socialcta, .ml-tablewrap, .ml-pkg, .ml-offer, .ml-step) { background: var(--g2-bg); }
body.ml-glass :is(.ml-hero__slides, .ml-footer) { background: var(--g3-bg); }
body.ml-glass :is(.ml-banner, .ml-pshero) > .ml-container { background: var(--g2-bg); }
body.ml-glass .ml-modal__dialog.ml-promo { background: var(--g-gloss), var(--g-noise), linear-gradient(rgba(255,255,255,.80), rgba(255,255,255,.80)); }
body.ml-glass .ml-header { background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,0) 62%), var(--g-noise), rgba(15,92,52,.64); }
body.ml-glass .ml-header.is-scrolled { background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 62%), var(--g-noise), rgba(15,92,52,.84); }
body.ml-glass .ml-stats__grid { background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,0) 45%), var(--g-noise), var(--g-dark-fill); }

/* luminous gradient edge (a 1px ring that is bright at the top-left and fades) */
body.ml-glass :is(.ml-quick__item, .ml-pkgcard, .ml-media-card, .ml-pcard, .ml-loc, .ml-iconbox, .ml-fbcard, .ml-socialcta, .ml-useful,
	.ml-hero__slides, .ml-footer, .ml-stats__grid, .ml-offer, .ml-modal__dialog.ml-promo) { position: relative; isolation: isolate; }
body.ml-glass :is(.ml-quick__item, .ml-pkgcard, .ml-media-card, .ml-pcard, .ml-loc, .ml-iconbox, .ml-fbcard, .ml-socialcta, .ml-useful,
	.ml-hero__slides, .ml-footer, .ml-stats__grid, .ml-offer, .ml-modal__dialog.ml-promo)::before {
	content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 3;
	background: linear-gradient(140deg, rgba(255,255,255,.98), rgba(255,255,255,.22) 34%, rgba(0,191,165,.42) 70%, rgba(255,255,255,.80));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* cursor spotlight: a soft light that follows the pointer across the glass (under the text) */
body.ml-glass :is(.ml-quick__item, .ml-pkgcard, .ml-media-card, .ml-pcard, .ml-loc, .ml-iconbox, .ml-fbcard, .ml-socialcta, .ml-useful, .ml-hero__slides, .ml-offer)::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .35s ease;
	background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.72), rgba(255,255,255,0) 62%);
}
body.ml-glass :is(.ml-quick__item, .ml-pkgcard, .ml-media-card, .ml-pcard, .ml-loc, .ml-iconbox, .ml-fbcard, .ml-socialcta, .ml-useful, .ml-hero__slides, .ml-offer):hover::after { opacity: 1; }
body.ml-glass .ml-quick__item:hover::after { opacity: .35; }   /* the quick links turn green on hover, keep their text readable */

/* gentle 3D tilt toward the pointer (set from site.js, desktop only) */
@media (hover: hover) and (pointer: fine) {
	body.ml-glass :is(.ml-pkgcard, .ml-media-card, .ml-pcard, .ml-loc, .ml-iconbox, .ml-offer):hover {
		transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px);
		transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .12s ease-out;
	}
}

/* section headings glow lightly on the gradient */
body.ml-glass .ml-section__title, body.ml-glass .ml-h2, body.ml-glass .ml-h4 { text-shadow: 0 2px 16px rgba(255,255,255,.7); }

/* glass control strips: tests pager row, search bar row */
body.ml-glass .ml-tablefoot { background: var(--g1-fill); -webkit-backdrop-filter: blur(var(--g1-blur)); backdrop-filter: blur(var(--g1-blur)); border: 1px solid rgba(255,255,255,.7); border-radius: 18px; padding: 12px 18px; box-shadow: var(--g-edge); }
body.ml-glass .ml-ranges { background: var(--g1-fill); -webkit-backdrop-filter: blur(var(--g1-blur)); backdrop-filter: blur(var(--g1-blur)); border: 1px solid rgba(255,255,255,.7); border-radius: 999px; padding: 8px 14px; box-shadow: var(--g-edge); }

/* sale badges look like glass lozenges */
body.ml-glass .ml-pkgcard__badge, body.ml-glass .ml-offer__badge { background: linear-gradient(135deg, rgba(240,98,46,.95), rgba(233,69,96,.92)); box-shadow: 0 6px 16px rgba(233,69,96,.35), inset 0 1px 0 rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.4); }

/* buttons: a band of light sweeps across on hover */
body.ml-glass .ml-btn { position: relative; overflow: hidden; }
body.ml-glass .ml-btn::after {
	content: ""; position: absolute; top: 0; left: -80%; width: 55%; height: 100%; pointer-events: none;
	background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0)); transform: skewX(-20deg);
	transition: left .7s ease;
}
body.ml-glass .ml-btn:hover::after { left: 130%; }

/* service tiles: gloss on the front face */
body.ml-glass .ml-flip__face--front { background: var(--g2-bg); }

/* phones / no-hover devices: keep it light (no grain, no spotlight, no tilt, no rings) */
@media (max-width: 767px), (hover: none) {
	body.ml-glass { --g-noise: none; }
	body.ml-glass :is(.ml-quick__item, .ml-pkgcard, .ml-media-card, .ml-pcard, .ml-loc, .ml-iconbox, .ml-fbcard, .ml-socialcta, .ml-useful, .ml-hero__slides, .ml-offer)::after { display: none; }
	.ml-ring { display: none; }
	body.ml-glass .ml-btn::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.ml-ring, .ml-orbs span { animation: none; translate: none; }
	body.ml-glass .ml-btn::after { transition: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .ml-ring { display: none; } }


/* ==========================================================================
   LEVEL 3 - clearer glass, less solid green
   Panels are more see-through, the navbar / stats / table header / buttons become
   frosted glass instead of solid green, and the background carries more colour
   (aqua, blue, mint, lilac next to the brand green) so the glass is actually visible.
   ========================================================================== */

body.ml-glass {
	--g1-blur: 14px;  --g1-fill: rgba(255,255,255,.20);
	--g2-blur: 22px;  --g2-fill: rgba(255,255,255,.28);
	--g3-blur: 30px;  --g3-fill: rgba(255,255,255,.40);
	--g-border: rgba(255,255,255,.75);
	--g-sat: saturate(185%) brightness(1.04);
	--ink: #0d2a1c;
}
/* every blur also boosts the colour that shows through the glass */
body.ml-glass :is(.ml-quick__item, .ml-pkgcard, .ml-media-card, .ml-pcard, .ml-loc, .ml-iconbox, .ml-member, .ml-useful, .ml-ceo, .ml-fbcard, .ml-socialcta, .ml-tablewrap, .ml-pkg, .ml-offer, .ml-step, .ml-flip__face--front, .ml-banner > .ml-container, .ml-pshero > .ml-container) {
	-webkit-backdrop-filter: blur(var(--g2-blur)) var(--g-sat); backdrop-filter: blur(var(--g2-blur)) var(--g-sat);
}
body.ml-glass :is(.ml-hero__slides, .ml-footer, .ml-header, .ml-drawer, .ml-modal__dialog, .ml-stats__grid) {
	-webkit-backdrop-filter: blur(var(--g3-blur)) var(--g-sat); backdrop-filter: blur(var(--g3-blur)) var(--g-sat);
}

/* ---- more colourful atmosphere (brand green stays, but it is no longer the only colour) */
html:has(body.ml-glass) { background: #eaf6f8; }
body.ml-glass::before {
	background:
		radial-gradient(760px 560px at 6% 6%,   rgba(34,211,238,.42), transparent 62%),     /* aqua   */
		radial-gradient(820px 600px at 96% 8%,  rgba(59,130,246,.30), transparent 62%),     /* blue   */
		radial-gradient(820px 640px at 78% 94%, rgba(52,211,153,.42), transparent 62%),     /* mint   */
		radial-gradient(700px 520px at 4% 90%,  rgba(167,139,250,.30), transparent 62%),    /* lilac  */
		radial-gradient(620px 460px at 50% 46%, rgba(27,127,75,.16), transparent 66%),      /* brand green, softer */
		linear-gradient(135deg, #f1fbfa 0%, #dff3f1 38%, #e9f1fb 68%, #f6fcf8 100%);
	background-size: 140% 140%;
}
.ml-orbs span { filter: blur(100px); }
.ml-orbs span:nth-child(1) { background: #22d3ee; opacity: .50; }
.ml-orbs span:nth-child(2) { background: #3b82f6; opacity: .30; }
.ml-orbs span:nth-child(3) { background: #34d399; opacity: .52; }
.ml-orbs span:nth-child(4) { background: #a78bfa; opacity: .34; }
.ml-ring { background: linear-gradient(145deg, rgba(255,255,255,.55), rgba(255,255,255,.10) 62%); border-color: rgba(255,255,255,.9); }

/* ---- navbar: light frosted glass (dark-green icons) instead of a solid green bar */
body.ml-glass .ml-header {
	background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.18)), var(--g-noise), rgba(255,255,255,.12);
	border-bottom: 1px solid rgba(255,255,255,.85);
	box-shadow: inset 0 1px 0 #fff, 0 10px 34px rgba(30,100,130,.14);
}
body.ml-glass .ml-header.is-scrolled { background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.40)), var(--g-noise), rgba(255,255,255,.18); box-shadow: inset 0 1px 0 #fff, 0 12px 38px rgba(30,100,130,.22); }
body.ml-glass .ml-header a, body.ml-glass .ml-header button { color: var(--brand-deep); }
body.ml-glass .ml-header__icon:hover { background: rgba(27,127,75,.12); }
body.ml-glass .ml-header__logo { background: rgba(255,255,255,.75); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid #fff; box-shadow: 0 6px 18px rgba(30,100,130,.16), inset 0 1px 0 #fff; }

/* ---- slide-in menu: lighter, tinted glass */
body.ml-glass .ml-drawer { background: linear-gradient(160deg, rgba(15,92,52,.70), rgba(8,110,110,.62)); }

/* ---- stats band: glass panel with dark numbers */
body.ml-glass .ml-stats__grid { background: var(--g3-bg); border: 1px solid var(--g-border); box-shadow: var(--g-edge), 0 20px 50px rgba(30,100,130,.16); }
body.ml-glass .ml-stat { color: var(--ink); }
body.ml-glass .ml-stat__n { color: var(--brand-deep); }
body.ml-glass .ml-stat__icon { color: #0e9f8e; }
body.ml-glass .ml-stat__label { color: #2b4a3a; }

/* ---- test table: glass header instead of solid green */
body.ml-glass .ml-table th { background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.30)); color: var(--brand-deep); border-bottom: 1px solid rgba(255,255,255,.9); text-shadow: 0 1px 0 rgba(255,255,255,.6); }
body.ml-glass .ml-sort { color: var(--brand-deep); }

/* ---- buttons: tinted glass (green-teal) with a glowing edge, not a solid fill */
body.ml-glass .ml-btn:not(.ml-btn--ghost):not(.ml-btn--wa):not(.ml-btn--fb):not(.ml-btn--yt):not(.ml-btn--ig) {
	background: linear-gradient(135deg, rgba(27,127,75,.58), rgba(0,191,165,.46)), var(--g-gloss);
	-webkit-backdrop-filter: blur(14px) var(--g-sat); backdrop-filter: blur(14px) var(--g-sat);
	color: #06301c; text-shadow: 0 1px 0 rgba(255,255,255,.5);
	border: 1px solid rgba(255,255,255,.85);
	box-shadow: 0 10px 26px rgba(0,150,130,.25), inset 0 1px 0 #fff, inset 0 -8px 16px rgba(255,255,255,.18);
}
body.ml-glass .ml-btn:not(.ml-btn--ghost):not(.ml-btn--wa):not(.ml-btn--fb):not(.ml-btn--yt):not(.ml-btn--ig):hover { background: linear-gradient(135deg, rgba(27,127,75,.72), rgba(0,191,165,.60)), var(--g-gloss); }
body.ml-glass .ml-btn--ghost { color: var(--brand-deep); border-color: rgba(255,255,255,.9); background: rgba(255,255,255,.24); }
/* coloured brand buttons become glass tinted with their colour */
body.ml-glass .ml-btn--wa { background: linear-gradient(135deg, rgba(37,211,102,.72), rgba(37,211,102,.55)); border: 1px solid rgba(255,255,255,.8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 8px 22px rgba(37,211,102,.30), inset 0 1px 0 rgba(255,255,255,.7); }
body.ml-glass .ml-btn--fb { background: linear-gradient(135deg, rgba(24,119,242,.78), rgba(24,119,242,.60)); border: 1px solid rgba(255,255,255,.8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 8px 22px rgba(24,119,242,.30), inset 0 1px 0 rgba(255,255,255,.7); }
body.ml-glass .ml-btn--yt { background: linear-gradient(135deg, rgba(230,33,23,.78), rgba(230,33,23,.60)); border: 1px solid rgba(255,255,255,.8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 8px 22px rgba(230,33,23,.30), inset 0 1px 0 rgba(255,255,255,.7); }
body.ml-glass .ml-fbcard__btn { border: 1px solid rgba(255,255,255,.8); box-shadow: 0 8px 20px rgba(24,119,242,.28), inset 0 1px 0 rgba(255,255,255,.7); }

/* ---- selected chips / tabs: tinted glass with a glow */
body.ml-glass .ml-catcard.is-active, body.ml-glass .ml-range.is-active, body.ml-glass .ml-promo__tab.is-active,
body.ml-glass .ml-offertab.is-active, body.ml-glass .ml-tablefoot__pager button.is-active {
	background: linear-gradient(135deg, rgba(27,127,75,.55), rgba(0,191,165,.42)); color: #06301c; border: 1px solid #fff;
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	box-shadow: 0 8px 20px rgba(0,150,130,.25), inset 0 1px 0 #fff;
}

/* ---- quick links: hover = green-tinted glass (still clearly green, but see-through) */
@media (hover: hover) {
	body.ml-glass .ml-quick .ml-quick__item:hover { background: linear-gradient(135deg, rgba(27,127,75,.74), rgba(0,160,140,.62)); border-color: rgba(255,255,255,.85); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 14px 34px rgba(0,150,130,.34); }
}
body.ml-glass .ml-quick .ml-quick__icon { background: rgba(255,255,255,.45); border: 1px solid #fff; }

/* ---- service tiles, floating pills, to-top, social dots */
body.ml-glass .ml-flip__face--back { background: linear-gradient(135deg, rgba(27,127,75,.70), rgba(0,160,140,.58)); }
body.ml-glass .ml-float__pill--call { background: linear-gradient(135deg, rgba(15,92,52,.72), rgba(27,127,75,.58)); }
body.ml-glass .ml-float__pill--wa { background: linear-gradient(135deg, rgba(37,211,102,.80), rgba(37,211,102,.62)); }
body.ml-glass .ml-totop { background: rgba(255,255,255,.45); color: var(--brand-deep); border: 1px solid #fff; box-shadow: 0 8px 22px rgba(30,100,130,.22), inset 0 1px 0 #fff; }
body.ml-glass .ml-social__dot { background: rgba(255,255,255,.45); color: var(--brand-deep); border: 1px solid #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 #fff, 0 4px 12px rgba(30,100,130,.14); }
body.ml-glass .ml-footer__bottom { background: rgba(255,255,255,.22); border-top: 1px solid rgba(255,255,255,.8); }
body.ml-glass .ml-hero__dot.is-active { background: #0e9f8e; box-shadow: 0 0 10px rgba(0,191,165,.6); }

/* ---- popup: clearer glass */
body.ml-glass .ml-modal__dialog.ml-promo { background: var(--g-gloss), var(--g-noise), linear-gradient(rgba(255,255,255,.52), rgba(255,255,255,.52)); }
body.ml-glass .ml-modal__dialog:not(.ml-promo) { background: rgba(255,255,255,.58); }

/* phones keep the lighter, more opaque glass (these values must come after the rules above) */
@media (max-width: 767px) {
	body.ml-glass { --g1-blur: 6px; --g2-blur: 12px; --g3-blur: 18px; --g1-fill: rgba(255,255,255,.42); --g2-fill: rgba(255,255,255,.55); --g3-fill: rgba(255,255,255,.70); }
	body.ml-glass .ml-header { background: rgba(255,255,255,.66); }
	body.ml-glass .ml-modal__dialog.ml-promo, body.ml-glass .ml-modal__dialog:not(.ml-promo) { background: rgba(255,255,255,.82); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	body.ml-glass { --g1-fill: rgba(255,255,255,.80); --g2-fill: rgba(255,255,255,.88); --g3-fill: rgba(255,255,255,.94); }
	body.ml-glass .ml-header { background: rgba(255,255,255,.95); }
	body.ml-glass .ml-modal__dialog.ml-promo, body.ml-glass .ml-modal__dialog:not(.ml-promo) { background: rgba(255,255,255,.97); }
	body.ml-glass .ml-stat { color: var(--ink); }
}

/* ---- inner pages: panels that had no rounding / padding of their own in the flat style */
body.ml-glass .ml-pkg { border-radius: 26px; padding: 30px 32px 26px; margin: 0 0 24px; position: relative; isolation: isolate; }
body.ml-glass .ml-pkg .ml-iconlist { margin-bottom: 22px; }
body.ml-glass .ml-pkg__foot { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.8); display: flex; align-items: center; flex-wrap: wrap; gap: 22px; }
body.ml-glass .ml-pkg::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 3;
	background: linear-gradient(140deg, rgba(255,255,255,.98), rgba(255,255,255,.22) 34%, rgba(0,191,165,.42) 70%, rgba(255,255,255,.80));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
body.ml-glass .ml-ceo { border-radius: 28px; padding: 30px; }
body.ml-glass .ml-ceo__photo { border-radius: 20px; }
body.ml-glass .ml-useful { border-radius: 22px; padding: 22px; }
body.ml-glass .ml-step { border-radius: 26px; padding: 28px; }
body.ml-glass .ml-confirm { border-radius: 20px; }
@media (max-width: 767px) { body.ml-glass .ml-pkg { padding: 22px 20px 20px; border-radius: 22px; } body.ml-glass .ml-ceo { padding: 20px; } }

/* ---- Smooth scrolling on phones/tablets: no animated blurred layers, no per-card backdrop blur ---- */
@media (max-width: 1024px), (hover: none) {
	body.ml-glass::before { animation: none !important; will-change: auto !important; }
	.ml-orbs span, .ml-ring { animation: none !important; will-change: auto !important; filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; translate: none !important; }
	.ml-orbs span { opacity: .30 !important; }
	.ml-ring { display: none !important; }
	.ml-orbs { contain: strict; }
	body.ml-glass *:not(.ml-header):not(.ml-drawer):not(.ml-modal__backdrop):not(.ml-modal__dialog) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
	body.ml-glass .ml-header { -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important; }
	body.ml-glass .ml-modal__backdrop { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(10,40,26,.55); }
	body.ml-glass :is(.ml-card, .ml-svc, .ml-pkg, .ml-step, .ml-ceo, .ml-useful, .ml-loc, .ml-tablefoot, .ml-ranges) { transition: none; }
}