/**
 * Homepage styles — Shopify Templates
 *
 * Mobile-first. Every colour, radius and rhythm value comes from a CSS custom
 * property written by the Customizer (see inc/home/assets.php), so editors
 * restyle the page without touching this file.
 *
 * All selectors are namespaced with `mt-` to guarantee no collision with the
 * theme, so nothing collides with plugin CSS.
 *
 * 1.  Tokens & resets
 * 2.  Primitives (container, type, buttons, badges)
 * 3.  Hero
 * 4.  Why choose us
 * 5.  Theme features showcase
 * 6.  Services
 * 7.  Testimonials
 * 8.  FAQ
 * 9.  Blog
 * 10. CTA
 * 11. Motion & reduced motion
 */

/* ==========================================================================
   1. Tokens & resets
   ========================================================================== */

.mt-main {
	/* Fallbacks keep the page styled even if the inline token block is stripped. */
	--mt-dark: #12372a;
	--mt-dark-deep: #0f2a1e;
	--mt-lime: #95bf47;
	--mt-glow: #d6ff57;
	--mt-bg: #f7f8f4;
	--mt-bg-hero: #f3f8e8;
	--mt-bg-cream: #fffcf5;
	--mt-bg-beige: #f6f1e8;
	--mt-ink: #16211b;
	--mt-muted: #5a6a61;
	--mt-radius: 32px;
	--mt-space: clamp(56px, 7vw, 104px);
	--mt-marquee: 46s;

	--mt-gutter: clamp(20px, 5.6vw, 80px);
	--mt-hair: rgba(0, 0, 0, 0.06);
	--mt-ease: cubic-bezier(0.16, 0.84, 0.36, 1);
	--mt-font: "Instrument Sans", "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
	--mt-font-body: "Inter", system-ui, -apple-system, sans-serif;
	--mt-shadow: 0 30px 60px -34px rgba(18, 55, 42, 0.35);

	background: var(--mt-bg);
	color: var(--mt-ink);
	font-family: var(--mt-font);
	overflow-x: clip;
}

/*
 * Section blocks travel. On the front page they sit inside `.mt-main`; on a
 * page built from blocks they sit inside `.mt-block`, which is why every
 * section rule below is scoped to `:is(.mt-main, :where(.mt-block))` rather
 * than `.mt-main` alone — without the second root a block-built page loses
 * every band background while keeping the light-on-dark text colours, which
 * is white text on a cream page.
 *
 * `:where()` keeps the alias at the same specificity as the original single
 * class, so nothing downstream shifts.
 *
 * Only the inherited basics are repeated here. `background` and `overflow-x`
 * stay on `.mt-main`: a block paints its own surface, and clipping each block
 * separately would break the sticky rails inside them.
 */
.mt-block {
	color: var(--mt-ink);
	font-family: var(--mt-font);
	box-sizing: border-box;
}

:is(.mt-main,:where(.mt-block)) *,
:is(.mt-main,:where(.mt-block)) *::before,
:is(.mt-main,:where(.mt-block)) *::after {
	box-sizing: border-box;
}

:is(.mt-main,:where(.mt-block)) img {
	display: block;
	max-width: 100%;
	height: auto;
}

:is(.mt-main,:where(.mt-block)) ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

:is(.mt-main,:where(.mt-block)) a {
	color: inherit;
	text-decoration: none;
}

:is(.mt-main,:where(.mt-block)) :focus-visible {
	outline: 3px solid var(--mt-dark);
	outline-offset: 3px;
	border-radius: 8px;
}

/* Image placeholder shown until an editor uploads artwork. */
.mt-ph {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 140px;
	background: linear-gradient(140deg, #e9ede2, #c6d1b4 55%, #9aa886);
}

/* ==========================================================================
   2. Primitives
   ========================================================================== */

.mt-section {
	padding: var(--mt-space) var(--mt-gutter);
}

.mt-container {
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
}

.mt-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 14px;
	border-radius: 999px;
	background: var(--mt-lime);
	color: #14290a;
	font-family: var(--mt-font-body);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.mt-eyebrow svg {
	width: 12px;
	height: 12px;
}

.mt-h2 {
	margin: 22px 0 0;
	font-size: clamp(30px, 5.6vw, 48px);
	line-height: 1.12;
	letter-spacing: -1.4px;
	font-weight: 700;
}

.mt-lede {
	margin: 18px 0 0;
	max-width: 52ch;
	font-family: var(--mt-font-body);
	font-size: 16px;
	line-height: 1.62;
	color: var(--mt-muted);
}

.mt-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 16px 30px;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.2px;
	overflow: hidden;
	transition: transform 0.4s var(--mt-ease), background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.4s var(--mt-ease);
}

.mt-btn::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 -60%;
	width: 45%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
	transform: skewX(-18deg);
	transition: left 0.7s var(--mt-ease);
}

.mt-btn:hover::before {
	left: 130%;
}

.mt-btn--solid {
	background: var(--mt-dark);
	color: #fff;
	box-shadow: 0 18px 34px -22px rgba(18, 55, 42, 0.95);
}

.mt-btn--solid:hover {
	background: var(--mt-dark-deep);
	transform: translateY(-3px);
}

.mt-btn--ghost {
	border: 1.6px solid rgba(18, 55, 42, 0.5);
	color: var(--mt-dark);
}

.mt-btn--ghost:hover {
	background: var(--mt-dark);
	border-color: var(--mt-dark);
	color: #fff;
	transform: translateY(-3px);
}

.mt-btn--lime {
	background: var(--mt-lime);
	color: #12290b;
	box-shadow: 0 0 0 4px rgba(149, 191, 71, 0.22);
}

.mt-btn--lime:hover {
	transform: translateY(-3px);
	box-shadow: 0 0 0 5px rgba(149, 191, 71, 0.3);
}

.mt-btn--outline-lime {
	border: 1.4px solid var(--mt-lime);
	color: var(--mt-lime);
}

.mt-btn--outline-lime:hover {
	background: var(--mt-lime);
	color: #12290b;
	transform: translateY(-3px);
}

.mt-dot {
	display: inline-block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.2);
}

.mt-stars {
	display: flex;
	gap: 3px;
	color: #f0a028;
}

.mt-stars svg {
	width: 14px;
	height: 14px;
}

/* ==========================================================================
   3. Hero
   ========================================================================== */

.mt-hero {
	position: relative;
	padding: clamp(26px, 4vw, 56px) var(--mt-gutter) clamp(48px, 7vw, 100px);
	background: var(--mt-bg-hero);
	overflow: hidden;
}

.mt-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(900px 520px at 12% -8%, rgba(255, 255, 255, 0.85), transparent 62%),
		radial-gradient(1100px 700px at 88% 4%, rgba(238, 249, 214, 0.9), transparent 60%);
}

.mt-hero__inner {
	position: relative;
	display: grid;
	gap: 44px;
	width: 100%;
	max-width: 1660px;
	margin-inline: auto;
	align-items: center;
}

.mt-badge {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 11px 18px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 12px 28px -18px rgba(18, 55, 42, 0.5);
}

.mt-badge__dot {
	position: relative;
	width: 10px;
	height: 10px;
	flex: none;
	border-radius: 50%;
	background: #3fbb54;
}

.mt-badge__dot::after {
	content: "";
	position: absolute;
	inset: -5px;
	border-radius: 50%;
	border: 2px solid rgba(63, 187, 84, 0.55);
	animation: mt-pulse 2.4s var(--mt-ease) infinite;
}

@keyframes mt-pulse {
	0% { transform: scale(0.6); opacity: 1; }
	80%, 100% { transform: scale(1.5); opacity: 0; }
}

.mt-badge__label {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.3px;
}

.mt-badge__sep {
	width: 1px;
	height: 18px;
	background: rgba(22, 33, 27, 0.2);
}

.mt-badge__meta {
	font-weight: 500;
	color: #2c3630;
}

.mt-hero__title {
	margin: 26px 0 0;
	font-size: clamp(36px, 8.4vw, 74px);
	line-height: 1.06;
	letter-spacing: -2px;
	font-weight: 800;
	max-width: 14ch;
}

.mt-hero__lead {
	margin: 22px 0 0;
	max-width: 52ch;
	font-family: var(--mt-font-body);
	font-size: clamp(16px, 1.2vw, 19px);
	line-height: 1.62;
	color: var(--mt-muted);
}

.mt-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 32px;
}

.mt-hero__meta {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 28px 0 0;
	font-family: var(--mt-font-body);
	font-size: 15px;
	font-weight: 500;
	color: #2f3a33;
}

.mt-hero__meta i {
	display: block;
	width: 40px;
	height: 2px;
	flex: none;
	border-radius: 2px;
	background: var(--mt-ink);
}

.mt-hero__media {
	position: relative;
}

.mt-hero__frame {
	position: absolute;
	inset: 14px -10px 24px 4px;
	border: 2px dashed rgba(143, 174, 99, 0.9);
	border-radius: 34px;
	pointer-events: none;
}

.mt-shot {
	margin: 0;
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	box-shadow: var(--mt-shadow);
	will-change: transform;
}

.mt-shot--mini,
.mt-shot--pop {
	display: none;
}

/* ==========================================================================
   4. Why choose us
   ========================================================================== */

.mt-why {
	background: var(--mt-bg);
}

.mt-why__grid {
	display: grid;
	gap: 40px;
}

.mt-stat {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 32px 0 0;
	padding: 18px 22px;
	border: 1px solid rgba(0, 0, 0, 0.05);
	border-radius: 20px;
	background: #fff;
	transition: transform 0.45s var(--mt-ease), box-shadow 0.45s var(--mt-ease);
}

.mt-stat:hover {
	transform: translateY(-4px);
	box-shadow: 0 22px 40px -30px rgba(18, 55, 42, 0.6);
}

.mt-stat__num {
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -1.4px;
}

.mt-stat__txt {
	font-family: var(--mt-font-body);
	font-size: 13.5px;
	line-height: 1.45;
	color: #3c4a42;
}

.mt-stat__check {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin-left: auto;
	flex: none;
	border-radius: 50%;
	background: var(--mt-lime);
	color: #fff;
}

.mt-stat__check svg {
	width: 17px;
	height: 17px;
	stroke-width: 2.6;
}

.mt-why__cards {
	display: grid;
	gap: 18px;
}

.mt-fcard {
	position: relative;
	padding: 30px;
	border: 1px solid var(--mt-hair);
	border-radius: var(--mt-radius);
	background: #fff;
	overflow: hidden;
	transition: transform 0.5s var(--mt-ease), box-shadow 0.5s var(--mt-ease), border-color 0.4s;
}

.mt-fcard::after {
	content: "";
	position: absolute;
	top: -70px;
	right: -70px;
	width: 190px;
	height: 190px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(149, 191, 71, 0.22), transparent 70%);
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.6s var(--mt-ease), transform 0.7s var(--mt-ease);
}

.mt-fcard:hover {
	transform: translateY(-6px);
	border-color: rgba(149, 191, 71, 0.5);
	box-shadow: 0 34px 60px -38px rgba(18, 55, 42, 0.55);
}

.mt-fcard:hover::after {
	opacity: 1;
	transform: none;
}

.mt-fcard__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: var(--mt-lime);
	color: var(--mt-dark);
	transition: transform 0.5s var(--mt-ease), border-radius 0.5s var(--mt-ease);
}

.mt-fcard:hover .mt-fcard__icon {
	transform: rotate(-8deg) scale(1.08);
	border-radius: 18px;
}

.mt-fcard__icon svg {
	width: 24px;
	height: 24px;
}

.mt-fcard__title {
	position: relative;
	margin: 36px 0 0;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.5px;
}

.mt-fcard__rule {
	position: relative;
	margin: 16px 0 0;
	border: 0;
	height: 1px;
	background: var(--mt-hair);
}

.mt-fcard__text {
	position: relative;
	margin: 14px 0 0;
	font-family: var(--mt-font-body);
	font-size: 15px;
	line-height: 1.62;
	color: var(--mt-muted);
}

/* ==========================================================================
   5. Theme features showcase
   ========================================================================== */

.mt-showcase {
	background: var(--mt-bg-cream);
	overflow: hidden;
}

.mt-showcase__grid {
	display: grid;
	gap: 44px;
	align-items: center;
}

.mt-showcase__media {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.mt-tf {
	margin: 0;
	padding: 10px;
	border: 1px solid var(--mt-hair);
	border-radius: 22px;
	background: #fff;
	overflow: hidden;
	transition: transform 0.55s var(--mt-ease), box-shadow 0.55s var(--mt-ease), border-color 0.4s;
}

.mt-tf--main {
	grid-column: 1 / -1;
}

.mt-tf:hover {
	transform: translateY(-8px);
	border-color: rgba(149, 191, 71, 0.55);
	box-shadow: 0 40px 70px -44px rgba(18, 55, 42, 0.62);
	z-index: 3;
}

.mt-tf__media {
	position: relative;
	display: block;
	border-radius: 14px;
	overflow: hidden;
}

.mt-tf__img,
.mt-tf__media .mt-ph {
	width: 100%;
	transition: transform 0.9s var(--mt-ease);
}

.mt-tf:hover .mt-tf__img {
	transform: scale(1.06);
}

.mt-tf__tag {
	position: absolute;
	left: 12px;
	bottom: 12px;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--mt-lime);
	color: #14290a;
	font-family: var(--mt-font-body);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.mt-tf__cap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 8px 4px;
	font-family: var(--mt-font-body);
	font-size: 13px;
	color: #3c4a42;
}

.mt-tf__cap strong {
	font-family: var(--mt-font);
	font-size: 15px;
	letter-spacing: -0.3px;
	color: var(--mt-ink);
}

.mt-tf-chip {
	position: absolute;
	right: 0;
	bottom: -14px;
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 12px 18px 12px 14px;
	border: 1px solid var(--mt-hair);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 26px 46px -32px rgba(18, 55, 42, 0.65);
}

.mt-tf-chip__ring {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: 50%;
	background: conic-gradient(var(--mt-lime) 0 var(--mt-score, 90%), rgba(18, 55, 42, 0.12) 0);
}

.mt-tf-chip__ring b {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #fff;
	font-size: 12px;
	font-weight: 800;
}

.mt-tf-chip__txt {
	font-family: var(--mt-font-body);
	font-size: 12.5px;
	line-height: 1.35;
	color: var(--mt-muted);
}

.mt-tf-chip__txt b {
	display: block;
	font-family: var(--mt-font);
	font-size: 14px;
	color: var(--mt-ink);
}

.mt-showcase__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 32px;
}

/* ==========================================================================
   6. Services
   ========================================================================== */

.mt-services {
	position: relative;
	border-radius: 28px;
	background: var(--mt-dark);
	color: #fff;
	overflow: hidden;
}

.mt-services::before {
	content: "";
	position: absolute;
	left: 8%;
	top: -24%;
	width: 84%;
	aspect-ratio: 3 / 2;
	border-radius: 50%;
	background: var(--mt-glow);
	opacity: 0.08;
}

.mt-services__head {
	position: relative;
	display: grid;
	gap: 24px;
}

.mt-services .mt-h2 {
	color: #fff;
}

.mt-services__note {
	margin: 0;
	max-width: 44ch;
	font-family: var(--mt-font-body);
	font-size: 15.5px;
	line-height: 1.62;
	color: rgba(255, 255, 255, 0.78);
}

.mt-services__grid {
	position: relative;
	display: grid;
	gap: 20px;
	margin-top: 44px;
}

.mt-scard {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 280px;
	padding: 30px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--mt-radius);
	background: rgba(255, 255, 255, 0.03);
	transition: transform 0.5s var(--mt-ease), background 0.5s, border-color 0.5s, box-shadow 0.5s var(--mt-ease);
}

.mt-scard:hover {
	transform: translateY(-8px);
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(214, 255, 87, 0.35);
	box-shadow: 0 40px 70px -45px rgba(0, 0, 0, 0.9);
}

.mt-scard__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mt-scard__num {
	font-family: var(--mt-font-body);
	font-size: 14px;
	font-weight: 700;
}

.mt-scard__arrow {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	transition: transform 0.5s var(--mt-ease), background 0.4s, border-color 0.4s, color 0.4s;
}

.mt-scard__arrow svg {
	width: 14px;
	height: 14px;
}

.mt-scard:hover .mt-scard__arrow {
	transform: rotate(45deg);
	background: var(--mt-glow);
	border-color: var(--mt-glow);
	color: var(--mt-dark);
}

.mt-scard__title {
	margin: 40px 0 0;
	font-size: 23px;
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -0.7px;
	max-width: 14ch;
}

.mt-scard__text {
	margin: 16px 0 0;
	font-family: var(--mt-font-body);
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.75);
}

.mt-scard__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding-top: 24px;
	font-family: var(--mt-font-body);
	font-size: 15px;
}

.mt-scard__link i {
	display: block;
	width: 24px;
	height: 1px;
	background: currentColor;
	opacity: 0.35;
	transition: width 0.4s var(--mt-ease);
}

.mt-scard__link svg {
	width: 15px;
	height: 15px;
	transition: transform 0.4s var(--mt-ease);
}

.mt-scard:hover .mt-scard__link i {
	width: 34px;
}

.mt-scard:hover .mt-scard__link svg {
	transform: translateX(5px);
}

.mt-scard--featured {
	background: var(--mt-lime);
	color: var(--mt-dark);
}

.mt-scard--featured .mt-scard__text {
	color: rgba(18, 55, 42, 0.82);
}

.mt-scard--featured .mt-scard__arrow {
	background: var(--mt-dark);
	border-color: var(--mt-dark);
	color: #fff;
}

.mt-scard--featured:hover .mt-scard__arrow {
	background: var(--mt-dark-deep);
	border-color: var(--mt-dark-deep);
	color: #fff;
}

/* ==========================================================================
   7. Testimonials
   ========================================================================== */

.mt-testi {
	background: var(--mt-bg);
	text-align: center;
	padding-inline: 0;
}

.mt-testi__head {
	padding-inline: var(--mt-gutter);
}

.mt-testi .mt-lede {
	margin-inline: auto;
	max-width: 56ch;
}

.mt-marquee {
	position: relative;
	margin-top: 44px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.mt-marquee__track {
	display: flex;
	gap: 18px;
	width: max-content;
	padding-inline: 18px;
	animation: mt-marquee var(--mt-marquee) linear infinite;
}

.mt-marquee:hover .mt-marquee__track,
.mt-marquee:focus-within .mt-marquee__track {
	animation-play-state: paused;
}

@keyframes mt-marquee {
	to { transform: translateX(-50%); }
}

.mt-tcard {
	display: flex;
	flex: none;
	width: 300px;
	padding: 24px 26px;
	border: 1px solid var(--mt-hair);
	border-radius: 24px;
	background: var(--mt-bg-cream);
	text-align: left;
	transition: transform 0.45s var(--mt-ease), box-shadow 0.45s var(--mt-ease);
}

.mt-tcard:hover {
	transform: translateY(-6px);
	box-shadow: 0 30px 50px -34px rgba(18, 55, 42, 0.5);
}

.mt-tcard figure {
	display: flex;
	flex-direction: column;
	margin: 0;
	width: 100%;
}

.mt-tcard__quote {
	margin: 16px 0 0;
	font-family: var(--mt-font-body);
	font-size: 15.5px;
	line-height: 1.6;
	color: #3c4a42;
}

.mt-tcard__who {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding-top: 22px;
}

.mt-tcard__avatar img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}

.mt-tcard__who b {
	display: block;
	font-size: 16px;
	letter-spacing: -0.3px;
}

.mt-tcard__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	font-family: var(--mt-font-body);
	font-size: 13px;
	color: var(--mt-muted);
}

.mt-tcard__verified {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.mt-tcard__verified i {
	display: grid;
	place-items: center;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--mt-lime);
	color: #fff;
}

.mt-tcard__verified svg {
	width: 8px;
	height: 8px;
	stroke-width: 3;
}

/* ==========================================================================
   8. FAQ
   ========================================================================== */

.mt-faq {
	background: var(--mt-bg-cream);
}

.mt-faq__grid {
	display: grid;
	gap: 40px;
	align-items: start;
}

.mt-help {
	margin-top: 36px;
	padding: 28px;
	border: 1px solid rgba(0, 0, 0, 0.05);
	border-radius: var(--mt-radius);
	background: var(--mt-bg-beige);
}

.mt-help__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: var(--mt-lime);
	color: var(--mt-dark);
}

.mt-help__icon svg {
	width: 24px;
	height: 24px;
}

.mt-help__title {
	margin: 22px 0 0;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.4px;
}

.mt-help__text {
	margin: 10px 0 0;
	font-family: var(--mt-font-body);
	font-size: 15px;
	line-height: 1.6;
	color: var(--mt-muted);
}

.mt-help .mt-btn {
	margin-top: 24px;
}

.mt-acc {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mt-acc__item {
	border: 1px solid rgba(18, 55, 42, 0.1);
	border-radius: 24px;
	background: #fff;
	overflow: hidden;
	transition: border-color 0.4s, box-shadow 0.5s var(--mt-ease);
}

.mt-acc__item.is-open {
	border-color: rgba(18, 55, 42, 0.22);
	box-shadow: 0 26px 50px -40px rgba(18, 55, 42, 0.7);
}

.mt-acc__heading {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
}

.mt-acc__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	padding: 20px 22px;
	border: 0;
	background: none;
	color: inherit;
	font-family: inherit;
	font-size: 16.5px;
	font-weight: 700;
	letter-spacing: -0.4px;
	text-align: left;
	cursor: pointer;
}

.mt-acc__sign {
	position: relative;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	flex: none;
	border: 1px solid rgba(18, 55, 42, 0.2);
	border-radius: 50%;
	transition: background 0.4s, border-color 0.4s, transform 0.5s var(--mt-ease);
}

.mt-acc__sign::before,
.mt-acc__sign::after {
	content: "";
	position: absolute;
	border-radius: 2px;
	background: var(--mt-dark);
	transition: transform 0.45s var(--mt-ease), background 0.4s;
}

.mt-acc__sign::before {
	width: 12px;
	height: 1.8px;
}

.mt-acc__sign::after {
	width: 1.8px;
	height: 12px;
}

.mt-acc__item.is-open .mt-acc__sign {
	background: var(--mt-dark);
	border-color: var(--mt-dark);
	transform: rotate(180deg);
}

.mt-acc__item.is-open .mt-acc__sign::before {
	background: #fff;
}

.mt-acc__item.is-open .mt-acc__sign::after {
	transform: scaleY(0);
	background: #fff;
}

/* Progressive enhancement: panels animate only once JS marks the accordion. */
.mt-acc.is-enhanced .mt-acc__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.5s var(--mt-ease);
}

.mt-acc.is-enhanced .mt-acc__item.is-open .mt-acc__panel {
	grid-template-rows: 1fr;
}

.mt-acc.is-enhanced .mt-acc__panel > div {
	overflow: hidden;
}

.mt-acc__panel p {
	margin: 0;
	padding: 0 22px 22px;
	font-family: var(--mt-font-body);
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--mt-muted);
}

/* ==========================================================================
   9. Blog
   ========================================================================== */

.mt-blogs {
	background: var(--mt-bg-beige);
}

.mt-blogs__head {
	display: grid;
	gap: 24px;
	align-items: center;
}

.mt-blogs__all {
	justify-self: start;
	padding: 15px 30px;
	border: 1px solid rgba(18, 55, 42, 0.6);
	border-radius: 999px;
	font-size: 16px;
	transition: background 0.35s, color 0.35s, transform 0.4s var(--mt-ease);
}

.mt-blogs__all:hover {
	background: var(--mt-dark);
	color: #fff;
	transform: translateY(-3px);
}

.mt-blogs__grid {
	display: grid;
	gap: 20px;
	margin-top: 44px;
}

.mt-bcard {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 10px;
	border-radius: 24px;
	background: #fff;
	transition: transform 0.5s var(--mt-ease), box-shadow 0.5s var(--mt-ease);
}

.mt-bcard:hover {
	transform: translateY(-7px);
	box-shadow: 0 36px 60px -40px rgba(18, 55, 42, 0.55);
}

/*
 * Blog card media — 3:2, the house standard for featured images.
 *
 * Was a 4:3 box with `object-fit: cover`, which centre-cropped every featured
 * image. Blog headers are almost always designed graphics — a browser mockup,
 * a stat badge, a percentage in the corner — and cover was slicing those edges
 * off, so the artwork lost exactly the parts carrying the message.
 *
 * `contain` stays even though uploads are now 3:2 and would fill the frame
 * either way. It is the safety net: the day someone uploads a 4:3 photo, it
 * sits on the mat instead of being silently cropped — which is the failure
 * mode this whole change exists to remove. The mat is a soft neutral rather
 * than white so that case reads as a frame, not a rendering bug.
 *
 * Recommended upload: 1800 × 1200 px (3:2).
 */
.mt-bcard__media {
	position: relative;
	display: block;
	border-radius: 16px;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: #f1f2ee;
}

.mt-bcard__img,
.mt-bcard__media .mt-ph {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* The placeholder is a solid block, so it should still fill the frame. */
.mt-bcard__media .mt-ph {
	object-fit: cover;
}

/*
 * No zoom on hover. Scaling a `contain` image pushes its edges out of the
 * frame — reintroducing on hover the exact clipping this section removed. The
 * card itself already lifts and casts a shadow, which is affordance enough.
 */

.mt-bcard__tag {
	position: absolute;
	left: 12px;
	top: 12px;
	padding: 5px 13px;
	border-radius: 999px;
	background: var(--mt-lime);
	color: #14290a;
	font-family: var(--mt-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.mt-bcard__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px 14px 14px;
}

.mt-bcard__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-family: var(--mt-font-body);
	font-size: 14px;
	color: #3c4a42;
}

.mt-bar {
	display: block;
	width: 3px;
	height: 16px;
	border-radius: 2px;
	background: var(--mt-lime);
}

.mt-bcard__meta .mt-dot {
	background: var(--mt-lime);
}

.mt-bcard__title {
	margin: 14px 0 0;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.4px;
}

/* .mt-bcard__excerpt was removed with the card excerpt — see
   template-parts/home/section-blog.php. */

.mt-bcard__link {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
	padding: 8px 18px;
	border: 1px solid rgba(18, 55, 42, 0.2);
	border-radius: 999px;
	font-family: var(--mt-font-body);
	font-size: 14.5px;
	transition: background 0.35s, color 0.35s, border-color 0.35s, transform 0.4s var(--mt-ease);
}

.mt-bcard__link svg {
	width: 14px;
	height: 14px;
	transition: transform 0.4s var(--mt-ease);
}

.mt-bcard__link:hover {
	background: var(--mt-dark);
	border-color: var(--mt-dark);
	color: #fff;
	transform: translateY(-2px);
}

.mt-bcard__link:hover svg {
	transform: translateX(4px);
}

/* ==========================================================================
   10. CTA
   ========================================================================== */

.mt-cta {
	background: var(--mt-bg);
}

.mt-cta__box {
	position: relative;
	padding: clamp(44px, 7vw, 100px) clamp(20px, 5vw, 80px);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--mt-radius);
	background: var(--mt-dark-deep);
	color: #fff;
	text-align: center;
	overflow: hidden;
}

.mt-cta__box::before,
.mt-cta__box::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: var(--mt-glow);
	opacity: 0.21;
	pointer-events: none;
}

.mt-cta__box::before {
	left: -18%;
	top: -34%;
	width: 320px;
	height: 320px;
}

.mt-cta__box::after {
	right: -14%;
	bottom: -40%;
	width: 380px;
	height: 380px;
}

.mt-cta__glow {
	position: absolute;
	left: 12%;
	top: 18%;
	width: 76%;
	height: 260px;
	border-radius: 999px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent);
	pointer-events: none;
}

.mt-cta__inner {
	position: relative;
	z-index: 2;
}

.mt-cta__title {
	margin: 20px auto 0;
	max-width: 16ch;
	font-size: clamp(28px, 5.6vw, 50px);
	line-height: 1.14;
	letter-spacing: -1.5px;
	font-weight: 700;
}

.mt-cta__text {
	margin: 18px auto 0;
	max-width: 58ch;
	font-family: var(--mt-font-body);
	font-size: 16px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.8);
}

.mt-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 32px;
}

/* ==========================================================================
   11. Motion
   ========================================================================== */

.mt-rev {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.85s var(--mt-ease), transform 0.85s var(--mt-ease);
	transition-delay: var(--mt-d, 0s);
}

.mt-rev.is-in,
.mt-no-anim .mt-rev {
	opacity: 1;
	transform: none;
}

.mt-float-a { animation: mt-float 7s ease-in-out infinite 1.5s; }
.mt-float-b { animation: mt-float 8.5s ease-in-out infinite 2s; }

@keyframes mt-float {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 -10px; }
}

@media (prefers-reduced-motion: reduce) {
	:is(.mt-main,:where(.mt-block)) *,
	:is(.mt-main,:where(.mt-block)) *::before,
	:is(.mt-main,:where(.mt-block)) *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.mt-rev {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   Breakpoints (mobile-first)
   ========================================================================== */

@media (min-width: 600px) {
	.mt-why__cards,
	.mt-blogs__grid {
		grid-template-columns: 1fr 1fr;
	}

	.mt-tcard {
		width: 340px;
	}

	.mt-fcard {
		padding: 36px;
	}
}

@media (min-width: 900px) {
	.mt-services__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.mt-blogs__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.mt-blogs__head {
		grid-template-columns: 1fr auto;
	}

	.mt-showcase__media {
		grid-template-columns: 1.12fr 1fr;
	}

	.mt-tf--main {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.mt-tf-chip {
		right: auto;
		left: -14px;
		bottom: -18px;
	}
}

@media (min-width: 1181px) {
	.mt-hero__inner {
		grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
		gap: clamp(32px, 4vw, 64px);
	}

	.mt-hero__media {
		min-height: 620px;
	}

	.mt-shot--main {
		width: 78%;
		margin-left: auto;
	}

	.mt-shot--mini,
	.mt-shot--pop {
		display: block;
		position: absolute;
	}

	.mt-shot--mini {
		left: 0;
		bottom: 6%;
		width: 46%;
	}

	.mt-shot--pop {
		right: -3%;
		top: 38%;
		width: 42%;
	}

	.mt-why__grid,
	.mt-faq__grid {
		grid-template-columns: minmax(0, 0.44fr) minmax(0, 1fr);
		gap: clamp(32px, 4vw, 64px);
	}

	.mt-showcase__grid {
		grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
		gap: clamp(36px, 5vw, 80px);
	}

	.mt-services {
		border-radius: 40px;
	}

	.mt-services__head {
		grid-template-columns: 1fr auto;
		align-items: end;
		gap: 40px;
	}

	.mt-services__grid {
		gap: 24px;
		margin-top: 56px;
	}

	.mt-scard {
		padding: 34px;
		min-height: 322px;
	}

	.mt-help {
		max-width: 412px;
	}

	.mt-acc__q {
		padding: 26px 28px;
		font-size: 18px;
	}

	.mt-acc__panel p {
		padding: 0 70px 28px 28px;
	}

	.mt-stat {
		max-width: 340px;
	}
}

/* ==========================================================================
   12. Colour hardening
   --------------------------------------------------------------------------
   Inherited colour always loses to a direct element rule, so any plugin that
   styles `h2` or `p` globally would repaint our dark sections. Every text node
   below states its colour explicitly, scoped under `.mt-main` so specificity is
   unambiguous, with a `-webkit-text-fill-color` reset in case something applies
   gradient text. This is defensive, not legacy cleanup — the old stylesheets
   are long gone, but plugins keep shipping global rules.
   ========================================================================== */

:is(.mt-main,:where(.mt-block)) h1,
:is(.mt-main,:where(.mt-block)) h2,
:is(.mt-main,:where(.mt-block)) h3,
:is(.mt-main,:where(.mt-block)) h4,
:is(.mt-main,:where(.mt-block)) p,
:is(.mt-main,:where(.mt-block)) li,
:is(.mt-main,:where(.mt-block)) a,
:is(.mt-main,:where(.mt-block)) blockquote,
:is(.mt-main,:where(.mt-block)) time,
:is(.mt-main,:where(.mt-block)) strong,
:is(.mt-main,:where(.mt-block)) b {
	-webkit-text-fill-color: currentColor;
}

/* Light sections */
:is(.mt-main,:where(.mt-block)) .mt-h2,
:is(.mt-main,:where(.mt-block)) .mt-hero__title,
:is(.mt-main,:where(.mt-block)) .mt-fcard__title,
:is(.mt-main,:where(.mt-block)) .mt-bcard__title,
:is(.mt-main,:where(.mt-block)) .mt-bcard__title a,
:is(.mt-main,:where(.mt-block)) .mt-acc__q,
:is(.mt-main,:where(.mt-block)) .mt-help__title,
:is(.mt-main,:where(.mt-block)) .mt-stat__num,
:is(.mt-main,:where(.mt-block)) .mt-tf__cap strong {
	color: var(--mt-ink);
}

:is(.mt-main,:where(.mt-block)) .mt-lede,
:is(.mt-main,:where(.mt-block)) .mt-fcard__text,
:is(.mt-main,:where(.mt-block)) .mt-help__text,
:is(.mt-main,:where(.mt-block)) .mt-acc__panel p,
:is(.mt-main,:where(.mt-block)) .mt-tcard__quote {
	color: var(--mt-muted);
}

:is(.mt-main,:where(.mt-block)) .mt-hero__lead {
	color: var(--mt-muted);
}

:is(.mt-main,:where(.mt-block)) .mt-eyebrow,
:is(.mt-main,:where(.mt-block)) .mt-bcard__tag,
:is(.mt-main,:where(.mt-block)) .mt-tf__tag {
	color: #14290a;
}

:is(.mt-main,:where(.mt-block)) .mt-badge__label,
:is(.mt-main,:where(.mt-block)) .mt-hero__meta,
:is(.mt-main,:where(.mt-block)) .mt-bcard__meta,
:is(.mt-main,:where(.mt-block)) .mt-tf__cap,
:is(.mt-main,:where(.mt-block)) .mt-stat__txt,
:is(.mt-main,:where(.mt-block)) .mt-tcard__who b {
	color: var(--mt-ink);
}

:is(.mt-main,:where(.mt-block)) .mt-badge__meta,
:is(.mt-main,:where(.mt-block)) .mt-tcard__meta {
	color: var(--mt-muted);
}

/* Dark sections — services */
:is(.mt-main,:where(.mt-block)) .mt-services .mt-h2,
:is(.mt-main,:where(.mt-block)) .mt-scard,
:is(.mt-main,:where(.mt-block)) .mt-scard__title,
:is(.mt-main,:where(.mt-block)) .mt-scard__num,
:is(.mt-main,:where(.mt-block)) .mt-scard__link {
	color: #fff;
}

:is(.mt-main,:where(.mt-block)) .mt-services__note,
:is(.mt-main,:where(.mt-block)) .mt-scard__text {
	color: rgba(255, 255, 255, 0.78);
}

:is(.mt-main,:where(.mt-block)) .mt-scard--featured,
:is(.mt-main,:where(.mt-block)) .mt-scard--featured .mt-scard__title,
:is(.mt-main,:where(.mt-block)) .mt-scard--featured .mt-scard__num,
:is(.mt-main,:where(.mt-block)) .mt-scard--featured .mt-scard__link {
	color: var(--mt-dark);
}

:is(.mt-main,:where(.mt-block)) .mt-scard--featured .mt-scard__text {
	color: rgba(18, 55, 42, 0.82);
}

/* Dark sections — CTA */
:is(.mt-main,:where(.mt-block)) .mt-cta__box,
:is(.mt-main,:where(.mt-block)) .mt-cta__title {
	color: #fff;
}

:is(.mt-main,:where(.mt-block)) .mt-cta__text {
	color: rgba(255, 255, 255, 0.82);
}

/* Buttons — never inherit */
:is(.mt-main,:where(.mt-block)) .mt-btn--solid,
.mt-shell .mt-btn--solid {
	color: #fff;
	-webkit-text-fill-color: #fff;
}

:is(.mt-main,:where(.mt-block)) .mt-btn--ghost,
.mt-shell .mt-btn--ghost {
	color: var(--mt-dark);
	-webkit-text-fill-color: var(--mt-dark);
}

:is(.mt-main,:where(.mt-block)) .mt-btn--ghost:hover,
.mt-shell .mt-btn--ghost:hover {
	color: #fff;
	-webkit-text-fill-color: #fff;
}

:is(.mt-main,:where(.mt-block)) .mt-btn--lime,
.mt-shell .mt-btn--lime {
	color: #12290b;
	-webkit-text-fill-color: #12290b;
}

:is(.mt-main,:where(.mt-block)) .mt-btn--outline-lime {
	color: var(--mt-lime);
	-webkit-text-fill-color: var(--mt-lime);
}

:is(.mt-main,:where(.mt-block)) .mt-btn--outline-lime:hover {
	color: #12290b;
	-webkit-text-fill-color: #12290b;
}

:is(.mt-main,:where(.mt-block)) .mt-blogs__all,
:is(.mt-main,:where(.mt-block)) .mt-bcard__link {
	color: var(--mt-dark);
}

:is(.mt-main,:where(.mt-block)) .mt-blogs__all:hover,
:is(.mt-main,:where(.mt-block)) .mt-bcard__link:hover {
	color: #fff;
}

/* ==========================================================================
   13. Hover & motion polish
   --------------------------------------------------------------------------
   One easing curve, transform/opacity only (no layout-triggering properties),
   and a slightly longer exit than entry so hovers feel damped rather than
   snappy.
   ========================================================================== */

:is(.mt-main,:where(.mt-block)) .mt-btn,
:is(.mt-main,:where(.mt-block)) .mt-fcard,
:is(.mt-main,:where(.mt-block)) .mt-scard,
:is(.mt-main,:where(.mt-block)) .mt-tcard,
:is(.mt-main,:where(.mt-block)) .mt-bcard,
:is(.mt-main,:where(.mt-block)) .mt-tf,
:is(.mt-main,:where(.mt-block)) .mt-stat,
:is(.mt-main,:where(.mt-block)) .mt-acc__item,
:is(.mt-main,:where(.mt-block)) .mt-blogs__all,
:is(.mt-main,:where(.mt-block)) .mt-bcard__link {
	transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
	transition-duration: 0.45s;
	will-change: transform;
}

:is(.mt-main,:where(.mt-block)) .mt-btn:hover,
:is(.mt-main,:where(.mt-block)) .mt-fcard:hover,
:is(.mt-main,:where(.mt-block)) .mt-scard:hover,
:is(.mt-main,:where(.mt-block)) .mt-tcard:hover,
:is(.mt-main,:where(.mt-block)) .mt-bcard:hover,
:is(.mt-main,:where(.mt-block)) .mt-tf:hover {
	transition-duration: 0.3s;
}

:is(.mt-main,:where(.mt-block)) .mt-btn:active {
	transform: translateY(-1px) scale(0.985);
	transition-duration: 0.12s;
}

/* Arrow icons glide instead of jumping. */
:is(.mt-main,:where(.mt-block)) .mt-scard__link svg,
:is(.mt-main,:where(.mt-block)) .mt-bcard__link svg {
	transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Cards lift on keyboard focus too. */
:is(.mt-main,:where(.mt-block)) .mt-scard:focus-visible,
:is(.mt-main,:where(.mt-block)) .mt-bcard__link:focus-visible,
:is(.mt-main,:where(.mt-block)) .mt-tf__link:focus-visible {
	transform: translateY(-4px);
}

/* Softer CTA sheen — the flat overlay read as a visible block on dark green. */
:is(.mt-main,:where(.mt-block)) .mt-cta__glow {
	left: 8%;
	width: 84%;
	height: 46%;
	background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 70%);
	border-radius: 0;
	filter: blur(1px);
}

:is(.mt-main,:where(.mt-block)) .mt-cta__box::before,
:is(.mt-main,:where(.mt-block)) .mt-cta__box::after {
	background: radial-gradient(circle at 50% 50%, var(--mt-glow) 0%, rgba(214, 255, 87, 0) 70%);
	opacity: 0.3;
}

/* ==========================================================================
   14. Hero — exact mockup geometry
   --------------------------------------------------------------------------
   Every value below is derived from the Figma export (1440 × 760 artboard):

     media stage   x 676 → 1360, y 176 → 613   (684 × 437)
     main shot     x 769  y 176  499 × 371     radius 8, 2px lime hairline
     quick view    x 1083 y 353  277 × 154
     collection    x 676  y 457  290 × 156
     dashed frame  x 746.5 y 278.5 570 × 304   radius 24, #95BF47

   Positions are expressed as percentages of the stage so the whole
   composition scales down proportionally on smaller screens.
   ========================================================================== */

:is(.mt-main,:where(.mt-block)) .mt-hero {
	background: var(--mt-bg);
}

/* Two blurred brand circles, matching the artboard's background shapes. */
:is(.mt-main,:where(.mt-block)) .mt-hero::before {
	/* Artboard shapes: a 878 px lime circle centred at (1201, 239) and a
	   639 × 754 pill at (160, 338), both heavily blurred. */
	background:
		radial-gradient(circle 470px at 83.4% 31.4%, rgba(214, 255, 87, 0.2), rgba(214, 255, 87, 0) 72%),
		radial-gradient(340px 400px at 11% 44%, rgba(166, 255, 0, 0.08), rgba(166, 255, 0, 0) 72%);
}

:is(.mt-main,:where(.mt-block)) .mt-hero__title {
	/* Measured off the artboard: 48 px type, 58 px leading, three lines inside
	   a 500 px column. */
	max-width: 500px;
	font-size: clamp(31px, 3.34vw, 48px);
	line-height: 1.2;
	letter-spacing: -1.5px;
	font-weight: 700;
}

:is(.mt-main,:where(.mt-block)) .mt-hero__lead {
	max-width: 500px;
	font-size: clamp(15.5px, 1.15vw, 16.5px);
	line-height: 1.62;
}

:is(.mt-main,:where(.mt-block)) .mt-badge {
	gap: 12px;
	padding: 9px 16px;
	background: rgba(255, 255, 255, 0.8);
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 10px 24px -18px rgba(18, 55, 42, 0.55);
}

:is(.mt-main,:where(.mt-block)) .mt-badge__dot {
	width: 8px;
	height: 8px;
	background: #22c55e;
}

:is(.mt-main,:where(.mt-block)) .mt-badge__label {
	gap: 12px;
	font-size: 15px;
	font-weight: 600;
}

:is(.mt-main,:where(.mt-block)) .mt-badge__sep {
	height: 16px;
	background: rgba(0, 0, 0, 0.1);
}

:is(.mt-main,:where(.mt-block)) .mt-hero__meta i {
	width: 24px;
	background: #444939;
}

:is(.mt-main,:where(.mt-block)) .mt-hero__meta {
	font-size: 14px;
	color: #444939;
}

/* --- stage ------------------------------------------------------------- */

:is(.mt-main,:where(.mt-block)) .mt-hero__media {
	position: relative;
	width: 100%;
	aspect-ratio: 684 / 437;
	min-height: 0;
}

:is(.mt-main,:where(.mt-block)) .mt-hero__frame {
	position: absolute;
	inset: 23.45% auto auto 10.31%;
	width: 83.33%;
	height: 69.57%;
	border: 1px dashed #95bf47;
	border-radius: 24px;
	background: none;
}

:is(.mt-main,:where(.mt-block)) .mt-shot {
	position: absolute;
	margin: 0;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
}

:is(.mt-main,:where(.mt-block)) .mt-shot__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Main store window — the artwork is cropped from the top in the design. */
:is(.mt-main,:where(.mt-block)) .mt-shot--main {
	left: 13.6%;
	top: 0;
	width: 72.95%;
	height: 84.9%;
	z-index: 1;
	box-shadow: 0 0 0 2px rgba(149, 191, 71, 0.2), 0 26px 50px -32px rgba(18, 55, 42, 0.35);
}

:is(.mt-main,:where(.mt-block)) .mt-shot--main .mt-shot__img {
	object-position: 50% 0;
}

/* Collection card, lower left. */
:is(.mt-main,:where(.mt-block)) .mt-shot--mini {
	display: block;
	left: 0;
	top: 64.3%;
	width: 42.4%;
	height: 35.7%;
	z-index: 2;
	box-shadow: 0 22px 44px -26px rgba(18, 55, 42, 0.45);
}

/* Quick-view card, lower right. */
:is(.mt-main,:where(.mt-block)) .mt-shot--pop {
	display: block;
	left: 59.5%;
	top: 40.5%;
	width: 40.5%;
	height: 35.24%;
	right: auto;
	z-index: 3;
	box-shadow: 0 24px 48px -26px rgba(18, 55, 42, 0.5);
}

@media (max-width: 1180px) {
	:is(.mt-main,:where(.mt-block)) .mt-hero__media {
		max-width: 780px;
		margin-inline: auto;
	}

	:is(.mt-main,:where(.mt-block)) .mt-hero__title {
		max-width: 20ch;
	}
}

/* ==========================================================================
   15. Buttons — the design's offset ring
   --------------------------------------------------------------------------
   In the artboard a filled button is two shapes: the pill itself (48 px tall)
   and a 1 px stroke 4.5 px outside it. `outline` reproduces that exactly — it
   sits outside the box, leaves the gap transparent, follows the radius and is
   never clipped by the button's own overflow.
   ========================================================================== */

:is(.mt-main,:where(.mt-block)) .mt-btn,
.mt-shell .mt-btn {
	padding: 15px 30px;
	font-size: 16px;
	line-height: 1.125;
	box-shadow: none;
}

:is(.mt-main,:where(.mt-block)) .mt-btn--solid,
.mt-shell .mt-btn--solid {
	outline: 1px solid var(--mt-dark);
	outline-offset: 4.5px;
	transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.3s ease, outline-offset 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), outline-color 0.3s ease;
}

:is(.mt-main,:where(.mt-block)) .mt-btn--solid:hover,
.mt-shell .mt-btn--solid:hover {
	outline-offset: 6.5px;
	box-shadow: none;
}

:is(.mt-main,:where(.mt-block)) .mt-btn--lime,
.mt-shell .mt-btn--lime {
	outline: 1px solid var(--mt-lime);
	outline-offset: 4.5px;
	transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.3s ease, outline-offset 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

:is(.mt-main,:where(.mt-block)) .mt-btn--lime:hover,
.mt-shell .mt-btn--lime:hover {
	outline-offset: 6.5px;
	box-shadow: none;
}

/* Outlined buttons are a single 57 px pill in the design — no inner fill, no
   second ring — so they match the solid button's outer edge. */
:is(.mt-main,:where(.mt-block)) .mt-btn--ghost,
.mt-shell .mt-btn--ghost {
	padding: 19.5px 34px;
	border: 1px solid var(--mt-dark);
	outline: none;
}

:is(.mt-main,:where(.mt-block)) .mt-btn--outline-lime {
	padding: 19.5px 34px;
	border: 1px solid var(--mt-lime);
}

/* Keyboard focus keeps its own high-contrast ring. */
:is(.mt-main,:where(.mt-block)) .mt-btn:focus-visible,
.mt-shell .mt-btn:focus-visible {
	outline: 3px solid var(--mt-dark);
	outline-offset: 4.5px;
}

:is(.mt-main,:where(.mt-block)) .mt-btn--lime:focus-visible,
:is(.mt-main,:where(.mt-block)) .mt-btn--outline-lime:focus-visible {
	outline-color: var(--mt-lime);
}

/* ==========================================================================
   16. Hero entrance
   --------------------------------------------------------------------------
   The approved build opens with a staggered page-load sequence. Here it is
   CSS-only: no class toggling, no layout shift, and nothing depends on
   JavaScript running. The headline rises behind its own overflow mask, the
   rest of the column follows, and the reassurance rule draws itself last.

   Disabled by the "Enable scroll animations" switch (`.mt-no-anim`) and by
   `prefers-reduced-motion`.
   ========================================================================== */

@keyframes mt-rise {
	from { opacity: 0; transform: translateY(22px); }
	to { opacity: 1; transform: none; }
}

@keyframes mt-line-up {
	from { transform: translateY(105%); }
	to { transform: none; }
}

@keyframes mt-line-grow {
	from { transform: scaleX(0); }
	to { transform: none; }
}

@keyframes mt-shot-in {
	from { opacity: 0; transform: translate3d(28px, 26px, 0) scale(0.96); }
	to { opacity: 1; transform: none; }
}

:is(.mt-main,:where(.mt-block)) .mt-badge,
:is(.mt-main,:where(.mt-block)) .mt-hero__lead,
:is(.mt-main,:where(.mt-block)) .mt-hero__actions,
:is(.mt-main,:where(.mt-block)) .mt-hero__meta {
	animation: mt-rise 0.95s cubic-bezier(0.16, 0.84, 0.36, 1) both;
}

:is(.mt-main,:where(.mt-block)) .mt-badge { animation-delay: 0.1s; }
:is(.mt-main,:where(.mt-block)) .mt-hero__lead { animation-delay: 0.5s; }
:is(.mt-main,:where(.mt-block)) .mt-hero__actions { animation-delay: 0.62s; }
:is(.mt-main,:where(.mt-block)) .mt-hero__meta { animation-delay: 0.74s; }

/* Masked headline reveal — works with any Customizer text, no line splitting. */
:is(.mt-main,:where(.mt-block)) .mt-hero__title {
	overflow: hidden;
	padding-bottom: 0.08em;
}

:is(.mt-main,:where(.mt-block)) .mt-hero__title > span,
:is(.mt-main,:where(.mt-block)) .mt-hero__title {
	display: block;
}

:is(.mt-main,:where(.mt-block)) .mt-hero__title {
	animation: mt-line-up 1.05s cubic-bezier(0.16, 0.84, 0.36, 1) 0.24s both;
}

:is(.mt-main,:where(.mt-block)) .mt-hero__meta i {
	transform-origin: left;
	animation: mt-line-grow 0.9s cubic-bezier(0.16, 0.84, 0.36, 1) 0.9s both;
}

/* The three screenshots drift in behind the copy. */
:is(.mt-main,:where(.mt-block)) .mt-shot--main { animation: mt-shot-in 1.1s cubic-bezier(0.16, 0.84, 0.36, 1) 0.36s both; }
:is(.mt-main,:where(.mt-block)) .mt-shot--mini { animation: mt-shot-in 1.1s cubic-bezier(0.16, 0.84, 0.36, 1) 0.54s both, mt-float 7s ease-in-out 2.4s infinite; }
:is(.mt-main,:where(.mt-block)) .mt-shot--pop { animation: mt-shot-in 1.1s cubic-bezier(0.16, 0.84, 0.36, 1) 0.7s both, mt-float 8.5s ease-in-out 2.8s infinite; }

:is(.mt-main,:where(.mt-block)) .mt-hero__frame {
	animation: mt-rise 1s cubic-bezier(0.16, 0.84, 0.36, 1) 0.9s both;
}

/* Respect the Customizer switch and the OS preference. */
.mt-no-anim :is(.mt-main,:where(.mt-block)) .mt-badge,
.mt-no-anim :is(.mt-main,:where(.mt-block)) .mt-hero__title,
.mt-no-anim :is(.mt-main,:where(.mt-block)) .mt-hero__lead,
.mt-no-anim :is(.mt-main,:where(.mt-block)) .mt-hero__actions,
.mt-no-anim :is(.mt-main,:where(.mt-block)) .mt-hero__meta,
.mt-no-anim :is(.mt-main,:where(.mt-block)) .mt-hero__meta i,
.mt-no-anim :is(.mt-main,:where(.mt-block)) .mt-hero__frame,
.mt-no-anim :is(.mt-main,:where(.mt-block)) .mt-shot {
	animation: none;
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	:is(.mt-main,:where(.mt-block)) .mt-badge,
	:is(.mt-main,:where(.mt-block)) .mt-hero__title,
	:is(.mt-main,:where(.mt-block)) .mt-hero__lead,
	:is(.mt-main,:where(.mt-block)) .mt-hero__actions,
	:is(.mt-main,:where(.mt-block)) .mt-hero__meta,
	:is(.mt-main,:where(.mt-block)) .mt-hero__meta i,
	:is(.mt-main,:where(.mt-block)) .mt-hero__frame,
	:is(.mt-main,:where(.mt-block)) .mt-shot {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   17. Fidelity pass against the approved build
   --------------------------------------------------------------------------
   Small differences found by rendering both side by side.
   ========================================================================== */

/* CTA: the artboard uses two hard-edged lime circles, not soft glows. */
:is(.mt-main,:where(.mt-block)) .mt-cta__box::before,
:is(.mt-main,:where(.mt-block)) .mt-cta__box::after {
	background: var(--mt-glow);
	opacity: 0.21;
	filter: none;
}

:is(.mt-main,:where(.mt-block)) .mt-cta__box::before {
	left: -9%;
	top: -34%;
	width: min(520px, 46vw);
	height: min(520px, 46vw);
}

:is(.mt-main,:where(.mt-block)) .mt-cta__box::after {
	right: -4%;
	bottom: -46%;
	width: min(640px, 56vw);
	height: min(640px, 56vw);
}

/* Testimonial cards keep a consistent height like the reference row. */
:is(.mt-main,:where(.mt-block)) .mt-tcard {
	min-height: 260px;
	padding: 26px 28px 24px;
}

:is(.mt-main,:where(.mt-block)) .mt-tcard__quote {
	font-size: 16px;
}

:is(.mt-main,:where(.mt-block)) .mt-tcard__who b {
	font-size: 16.5px;
}

/* Feature card: more air between the icon and the title, as approved. */
@media (min-width: 600px) {
	:is(.mt-main,:where(.mt-block)) .mt-fcard__title {
		margin-top: 44px;
	}
}

/* Services: the numbered cards sit on a slightly brighter surface so the
   featured card is not the only readable one on small screens. */
@media (max-width: 899px) {
	:is(.mt-main,:where(.mt-block)) .mt-scard {
		min-height: 0;
	}
}

/* ==========================================================================
   18. Interaction pass — hover colour, motion smoothing, icon fixes
   --------------------------------------------------------------------------
   Issues found by comparing the live site with the approved build:

   1. Lime surfaces never brightened on hover (the reference moves them to a
      lighter shade). They only moved, so the hover read as "wrong colour".
   2. Cards felt like they snapped. Two causes: hover and un-hover ran at
      different speeds, and `will-change: transform` promoted the card to its
      own layer, re-rasterising the text on the first frame.
   3. The feature icon morphed its border-radius while rotating, so the square
      briefly looked like a blob. Radius is not a cheap property to animate.
   4. Stray shadows/filters under the icons, inherited from styles outside this
      stylesheet. Reset explicitly.
   ========================================================================== */

/* --- 1. Lime hover shades ---------------------------------------------- */

.mt-shell .mt-nav__cta:hover,
.mt-shell .mt-drawer__cta:hover,
:is(.mt-main,:where(.mt-block)) .mt-btn--lime:hover,
.mt-shell .mt-btn--lime:hover {
	background: var(--mt-lime-bright);
	color: var(--mt-lime-ink);
	-webkit-text-fill-color: var(--mt-lime-ink);
}

:is(.mt-main,:where(.mt-block)) .mt-scard--featured:hover {
	background: var(--mt-lime-bright);
	border-color: rgba(18, 55, 42, 0.25);
}

:is(.mt-main,:where(.mt-block)) .mt-btn--outline-lime:hover {
	background: var(--mt-lime);
	border-color: var(--mt-lime);
}

:is(.mt-main,:where(.mt-block)) .mt-fcard:hover .mt-fcard__icon,
:is(.mt-main,:where(.mt-block)) .mt-help:hover .mt-help__icon {
	background: var(--mt-lime-bright);
}

/* --- 2. Motion smoothing ------------------------------------------------ */

:is(.mt-main,:where(.mt-block)) .mt-fcard,
:is(.mt-main,:where(.mt-block)) .mt-scard,
:is(.mt-main,:where(.mt-block)) .mt-tcard,
:is(.mt-main,:where(.mt-block)) .mt-bcard,
:is(.mt-main,:where(.mt-block)) .mt-tf,
:is(.mt-main,:where(.mt-block)) .mt-stat,
:is(.mt-main,:where(.mt-block)) .mt-acc__item,
.mt-shell .mt-pcard {
	/* Same curve and the same duration in both directions — an asymmetric
	   transition is what made the cards feel like they jumped. */
	transition-property: transform, box-shadow, border-color, background;
	transition-duration: 0.42s;
	transition-timing-function: cubic-bezier(0.33, 0.8, 0.4, 1);
	will-change: auto;
	backface-visibility: hidden;
}

:is(.mt-main,:where(.mt-block)) .mt-fcard:hover,
:is(.mt-main,:where(.mt-block)) .mt-scard:hover,
:is(.mt-main,:where(.mt-block)) .mt-tcard:hover,
:is(.mt-main,:where(.mt-block)) .mt-bcard:hover,
:is(.mt-main,:where(.mt-block)) .mt-tf:hover,
.mt-shell .mt-pcard:hover {
	/* Shorter travel reads as calmer and keeps the pointer inside the card,
	   so the hover cannot flicker on and off at the edge. */
	transition-duration: 0.42s;
}

:is(.mt-main,:where(.mt-block)) .mt-fcard:hover { transform: translate3d(0, -5px, 0); }
:is(.mt-main,:where(.mt-block)) .mt-scard:hover { transform: translate3d(0, -6px, 0); }
:is(.mt-main,:where(.mt-block)) .mt-tcard:hover { transform: translate3d(0, -5px, 0); }
:is(.mt-main,:where(.mt-block)) .mt-bcard:hover,
.mt-shell .mt-pcard:hover { transform: translate3d(0, -5px, 0); }
:is(.mt-main,:where(.mt-block)) .mt-tf:hover { transform: translate3d(0, -6px, 0); }
:is(.mt-main,:where(.mt-block)) .mt-stat:hover { transform: translate3d(0, -4px, 0); }

/* The corner glow fades rather than scaling, which is one less animated
   property per frame. */
:is(.mt-main,:where(.mt-block)) .mt-fcard::after {
	transform: none;
	transition: opacity 0.5s ease;
	opacity: 0;
}

:is(.mt-main,:where(.mt-block)) .mt-fcard:hover::after {
	transform: none;
	opacity: 1;
}

/* --- 3. Icons: scale only, no radius morph ------------------------------ */

:is(.mt-main,:where(.mt-block)) .mt-fcard__icon,
:is(.mt-main,:where(.mt-block)) .mt-help__icon {
	transition: transform 0.42s cubic-bezier(0.33, 0.8, 0.4, 1), background 0.3s ease;
	transform-origin: center;
}

:is(.mt-main,:where(.mt-block)) .mt-fcard:hover .mt-fcard__icon,
:is(.mt-main,:where(.mt-block)) .mt-help:hover .mt-help__icon {
	transform: scale(1.06);
	border-radius: 14px;
}

/* --- 4. Kill inherited shadows and filters around icons ----------------- */

:is(.mt-main,:where(.mt-block)) .mt-fcard__icon,
:is(.mt-main,:where(.mt-block)) .mt-help__icon,
:is(.mt-main,:where(.mt-block)) .mt-stat__check,
:is(.mt-main,:where(.mt-block)) .mt-scard__arrow,
:is(.mt-main,:where(.mt-block)) .mt-tf-chip__ring,
:is(.mt-main,:where(.mt-block)) .mt-tcard__verified i,
:is(.mt-main,:where(.mt-block)) .mt-eyebrow,
.mt-shell .mt-footer__ring {
	box-shadow: none !important;
	filter: none !important;
}

:is(.mt-main,:where(.mt-block)) svg,
.mt-shell .mt-footer svg,
.mt-shell .mt-nav svg {
	filter: none;
	box-shadow: none;
}

/* --- 5. Arrow buttons keep a single, calm rotation ---------------------- */

:is(.mt-main,:where(.mt-block)) .mt-scard__arrow {
	transition: transform 0.45s cubic-bezier(0.33, 0.8, 0.4, 1), background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
	:is(.mt-main,:where(.mt-block)) .mt-fcard:hover,
	:is(.mt-main,:where(.mt-block)) .mt-scard:hover,
	:is(.mt-main,:where(.mt-block)) .mt-tcard:hover,
	:is(.mt-main,:where(.mt-block)) .mt-bcard:hover,
	:is(.mt-main,:where(.mt-block)) .mt-tf:hover,
	:is(.mt-main,:where(.mt-block)) .mt-stat:hover,
	.mt-shell .mt-pcard:hover {
		transform: none;
	}
}

/* --- 6. Hero frame: the marching dashes from the approved build --------- */

:is(.mt-main,:where(.mt-block)) svg.mt-hero__frame {
	position: absolute;
	inset: 23.45% auto auto 10.31%;
	width: 83.33%;
	height: 69.57%;
	border: 0;
	overflow: visible;
	pointer-events: none;
}

:is(.mt-main,:where(.mt-block)) svg.mt-hero__frame rect {
	fill: none;
	stroke: var(--mt-lime);
	stroke-width: 1;
	stroke-dasharray: 4 6;
	animation: mt-march 26s linear infinite;
}

@keyframes mt-march {
	to { stroke-dashoffset: -500; }
}

.mt-no-anim :is(.mt-main,:where(.mt-block)) svg.mt-hero__frame rect {
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	:is(.mt-main,:where(.mt-block)) svg.mt-hero__frame rect {
		animation: none;
	}
}

/* --- 7. Services grid: four cards ---------------------------------------
   The agency offer runs to four services, so the row auto-fits instead of
   being locked to three columns. */

@media (min-width: 900px) {
	:is(.mt-main,:where(.mt-block)) .mt-services__grid {
		grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
	}
}

/* Empty blog section — visible in the editor and on a fresh install. */
:is(.mt-main,:where(.mt-block)) .mt-blogs__empty {
	margin: 40px 0 0;
	padding: 28px;
	border: 1px dashed rgba(18, 55, 42, 0.25);
	border-radius: 20px;
	font-family: var(--mt-font-body);
	font-size: 15px;
	color: var(--mt-muted);
	text-align: center;
}

/* ==========================================================================
   19. Block layout options
   --------------------------------------------------------------------------
   Set from the block's Layout panel. They map to the same tokens the rest of
   the theme uses, so a section dropped on any page still matches the design.
   ========================================================================== */

.mt-block > .mt-section,
.mt-block > .mt-hero {
	margin-inline: 0;
}

.mt-w-narrow .mt-container { max-width: 960px; }
.mt-w-wide .mt-container { max-width: 1480px; }
.mt-w-full .mt-container { max-width: none; }

.mt-sp-none > .mt-section,
.mt-sp-none > .mt-hero { padding-block: 0; }

.mt-sp-tight > .mt-section,
.mt-sp-tight > .mt-hero { padding-block: clamp(32px, 4vw, 56px); }

.mt-sp-roomy > .mt-section,
.mt-sp-roomy > .mt-hero { padding-block: clamp(80px, 9vw, 150px); }

.mt-bg-page > .mt-section,
.mt-bg-page > .mt-hero { background: var(--mt-bg); }

.mt-bg-cream > .mt-section,
.mt-bg-cream > .mt-hero { background: var(--mt-bg-cream); }

.mt-bg-beige > .mt-section,
.mt-bg-beige > .mt-hero { background: var(--mt-bg-beige); }

.mt-bg-white > .mt-section,
.mt-bg-white > .mt-hero { background: #fff; }

.mt-bg-none > .mt-section,
.mt-bg-none > .mt-hero { background: transparent; }

.mt-bg-dark > .mt-section,
.mt-bg-dark > .mt-hero {
	background: var(--mt-dark);
	color: #fff;
}

.mt-bg-dark .mt-h2,
.mt-bg-dark h3,
.mt-bg-dark .mt-hero__title { color: #fff; }

.mt-bg-dark .mt-lede,
.mt-bg-dark p { color: rgba(255, 255, 255, 0.76); }

/* Flip the two halves of any split section. */
.mt-al-flip .mt-why__grid,
.mt-al-flip .mt-faq__grid,
.mt-al-flip .mt-showcase__grid,
.mt-al-flip .mt-svc__grid,
.mt-al-flip .mt-hero__inner {
	direction: rtl;
}

.mt-al-flip .mt-why__grid > *,
.mt-al-flip .mt-faq__grid > *,
.mt-al-flip .mt-showcase__grid > *,
.mt-al-flip .mt-svc__grid > *,
.mt-al-flip .mt-hero__inner > * {
	direction: ltr;
}

.mt-al-flip .mt-thm__panel:nth-child(odd) .mt-thm__canvas { order: 2; }
.mt-al-flip .mt-thm__panel:nth-child(even) .mt-thm__canvas { order: 0; }

/* ==========================================================================
   20. Support section
   ========================================================================== */

:is(.mt-main,:where(.mt-block)) .mt-sup { background: var(--mt-bg); }

.mt-sup__box {
	position: relative;
	overflow: hidden;
	padding: clamp(32px, 5vw, 72px) clamp(24px, 4vw, 60px);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--mt-radius);
	background: var(--mt-dark-deep);
	color: #fff;
}

.mt-sup__box::before,
.mt-sup__box::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: var(--mt-glow);
	opacity: 0.18;
	pointer-events: none;
}

.mt-sup__box::before { left: -12%; top: -40%; width: min(460px, 44vw); height: min(460px, 44vw); }
.mt-sup__box::after { right: -8%; bottom: -48%; width: min(520px, 48vw); height: min(520px, 48vw); }

.mt-sup__glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.07), transparent 65%);
	pointer-events: none;
}

.mt-sup__grid {
	position: relative;
	z-index: 2;
	display: grid;
	gap: clamp(28px, 4vw, 56px);
}

.mt-sup__title {
	margin: 20px 0 0;
	max-width: 16ch;
	font-size: clamp(28px, 3.6vw, 44px);
	line-height: 1.14;
	letter-spacing: -1.3px;
	font-weight: 700;
	color: #fff;
}

.mt-sup__text {
	margin: 18px 0 0;
	max-width: 48ch;
	font-family: var(--mt-font-body);
	font-size: 16px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.8);
}

.mt-sup__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 30px;
}

.mt-sup__note {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 22px 0 0;
	font-family: var(--mt-font-body);
	font-size: 14px;
	color: rgba(255, 255, 255, 0.65);
}

.mt-sup__pulse {
	position: relative;
	width: 9px;
	height: 9px;
	flex: none;
	border-radius: 50%;
	background: var(--mt-glow);
}

.mt-sup__pulse::after {
	content: "";
	position: absolute;
	inset: -5px;
	border-radius: 50%;
	border: 2px solid rgba(214, 255, 87, 0.5);
	animation: mt-pulse 2.4s var(--mt-ease) infinite;
}

.mt-sup__channels {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mt-sup__link {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	height: 100%;
	padding: 20px 22px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 22px;
	background: rgba(255, 255, 255, 0.04);
	color: #fff;
	text-decoration: none;
	transition: transform 0.42s cubic-bezier(0.33, 0.8, 0.4, 1), background 0.4s ease, border-color 0.4s ease;
}

a.mt-sup__link:hover {
	transform: translate3d(0, -4px, 0);
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(214, 255, 87, 0.45);
}

.mt-sup__icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	flex: none;
	border-radius: 13px;
	background: rgba(214, 255, 87, 0.14);
	border: 1px solid rgba(214, 255, 87, 0.28);
	color: var(--mt-glow);
	transition: background 0.4s ease, color 0.4s ease;
}

a.mt-sup__link:hover .mt-sup__icon {
	background: var(--mt-glow);
	color: var(--mt-dark);
}

.mt-sup__icon svg { width: 20px; height: 20px; }

.mt-sup__body strong {
	display: block;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.3px;
}

.mt-sup__detail {
	display: block;
	margin-top: 6px;
	font-family: var(--mt-font-body);
	font-size: 14.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.7);
}

.mt-sup__cue {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	font-family: var(--mt-font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--mt-glow);
}

.mt-sup__cue svg { width: 14px; height: 14px; transition: transform 0.45s cubic-bezier(0.33, 0.8, 0.4, 1); }

a.mt-sup__link:hover .mt-sup__cue svg { transform: translateX(4px); }

@media (min-width: 900px) {
	.mt-sup__grid { grid-template-columns: 1fr 1fr; align-items: center; }
}

/* ==========================================================================
   21. Newsletter section
   ========================================================================== */

:is(.mt-main,:where(.mt-block)) .mt-news { background: var(--mt-bg-beige); }

.mt-news__panel {
	display: grid;
	gap: clamp(26px, 3vw, 48px);
	padding: clamp(28px, 4vw, 56px);
	border: 1px solid rgba(18, 55, 42, 0.12);
	border-radius: var(--mt-radius);
	background:
		radial-gradient(120% 120% at 100% 0%, rgba(149, 191, 71, 0.18), transparent 60%),
		#fff;
}

.mt-news__title {
	margin: 18px 0 0;
	max-width: 20ch;
	font-size: clamp(25px, 3vw, 38px);
	line-height: 1.16;
	letter-spacing: -1.1px;
	font-weight: 700;
	color: var(--mt-ink);
}

.mt-news__text {
	margin: 16px 0 0;
	max-width: 52ch;
	font-family: var(--mt-font-body);
	font-size: 15.5px;
	line-height: 1.62;
	color: var(--mt-muted);
}

.mt-news__perks {
	display: grid;
	gap: 10px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.mt-news__perks li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--mt-font-body);
	font-size: 14.5px;
	color: var(--mt-ink);
}

.mt-news__tick {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	flex: none;
	border-radius: 50%;
	background: var(--mt-lime);
	color: #fff;
}

.mt-news__tick svg { width: 11px; height: 11px; }

.mt-news__form { align-self: center; }

.mt-news__row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 8px;
	border: 1px solid rgba(18, 55, 42, 0.16);
	border-radius: 999px;
	background: #fff;
	transition: border-color 0.35s ease, box-shadow 0.4s ease;
}

.mt-news__row:focus-within {
	border-color: var(--mt-dark);
	box-shadow: 0 0 0 4px rgba(149, 191, 71, 0.22);
}

.mt-news__input {
	flex: 1 1 220px;
	min-width: 0;
	padding: 14px 20px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font-family: var(--mt-font-body);
	font-size: 15.5px;
	color: var(--mt-ink);
}

.mt-news__input:focus { outline: none; }

.mt-news__submit { flex: 0 0 auto; }

.mt-news__note,
.mt-news__setup {
	margin: 14px 0 0;
	font-family: var(--mt-font-body);
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--mt-muted);
}

.mt-news__setup {
	padding: 16px 20px;
	border: 1px dashed rgba(18, 55, 42, 0.28);
	border-radius: 18px;
}

@media (min-width: 900px) {
	.mt-news__panel { grid-template-columns: 1.1fr 0.9fr; align-items: center; }
}

/* ==========================================================================
   22. Support cards — hover
   --------------------------------------------------------------------------
   Same interaction language as the service cards: the whole card is the link,
   a cursor-tracked glow follows the pointer, and only transform/opacity are
   animated so the section stays at 60fps.
   ========================================================================== */

.mt-sup__link {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition:
		transform 0.42s cubic-bezier(0.33, 0.8, 0.4, 1),
		background 0.4s ease,
		border-color 0.4s ease,
		box-shadow 0.45s cubic-bezier(0.33, 0.8, 0.4, 1);
}

/* Cursor glow. Position comes from --mt-x / --mt-y, eased in JS. */
.mt-sup__spot {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(
		320px circle at var(--mt-x, 50%) var(--mt-y, 0%),
		rgba(214, 255, 87, 0.18),
		transparent 62%
	);
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}

.mt-sup__link:hover .mt-sup__spot,
.mt-sup__link:focus-visible .mt-sup__spot,
.mt-sup__link.is-hot .mt-sup__spot {
	opacity: 1;
}

/* A hairline lights along the top edge, matching the service cards. */
.mt-sup__link::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--mt-glow), transparent);
	opacity: 0;
	transition: opacity 0.45s ease;
}

.mt-sup__link:hover::before,
.mt-sup__link:focus-visible::before {
	opacity: 1;
}

.mt-sup__link:hover,
.mt-sup__link:focus-visible {
	transform: translate3d(0, -5px, 0);
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(214, 255, 87, 0.5);
	box-shadow: 0 34px 60px -42px rgba(0, 0, 0, 0.95);
}

.mt-sup__link:active {
	transform: translate3d(0, -2px, 0);
	transition-duration: 0.12s;
}

.mt-sup__icon {
	transition: transform 0.45s cubic-bezier(0.33, 0.8, 0.4, 1), background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

.mt-sup__link:hover .mt-sup__icon,
.mt-sup__link:focus-visible .mt-sup__icon {
	transform: scale(1.06);
	background: var(--mt-glow);
	border-color: var(--mt-glow);
	color: var(--mt-dark);
}

/* The cue underlines itself and the arrow slides. */
.mt-sup__cue {
	position: relative;
}

.mt-sup__cue::after {
	content: "";
	position: absolute;
	left: 0;
	right: 22px;
	bottom: -3px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.45s cubic-bezier(0.33, 0.8, 0.4, 1);
}

.mt-sup__link:hover .mt-sup__cue::after,
.mt-sup__link:focus-visible .mt-sup__cue::after {
	transform: scaleX(1);
	transform-origin: left;
}

.mt-sup__link:hover .mt-sup__cue svg,
.mt-sup__link:focus-visible .mt-sup__cue svg {
	transform: translateX(5px);
}

@media (prefers-reduced-motion: reduce) {
	.mt-sup__link:hover,
	.mt-sup__link:focus-visible {
		transform: none;
	}

	.mt-sup__spot {
		display: none;
	}
}

/* Full-width canvas template: blocks own the whole page. */
.mt-canvas > .mt-block:first-child > .mt-section {
	padding-top: clamp(24px, 3vw, 48px);
}

/*
 * A default-template page that turned out to be built from section blocks.
 *
 * page.php drops its title header in that case, so the first section would
 * otherwise open with a full section's worth of padding hard under the
 * floating navbar. Same treatment as the canvas template, for the same
 * reason — and matched on both possible first children, because a section
 * rendered through mt_the_content_runs() is not wrapped in .mt-block.
 */
.mt-page--sections > .mt-section:first-child,
.mt-page--sections > .mt-block:first-child > .mt-section {
	padding-top: clamp(24px, 3vw, 48px);
}