/*
Theme Name: Monster IT
Theme URI: https://monsterit.com.au
Author: Monster IT MSP
Description: Modern managed-IT theme for Monster IT — dark tech hero, slime-green accents and a friendly monster that keeps an eye on things.
Version: 1.4.0
Requires at least: 6.4
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: monsterit
*/

/* =========================================================================
   Tokens
   ====================================================================== */
:root {
	--ink: #14121e;
	--ink-2: #1c1a2a;
	--ink-3: #282540;
	--ink-line: rgba(255, 255, 255, .09);
	--on-ink: #ecebf5;
	--on-ink-muted: #a9a6bf;

	--slime: #8fd13f;
	--slime-deep: #1dad4b;
	--lime: #d3e063;
	--slime-grad: linear-gradient(135deg, #d3e063 0%, #8fd13f 45%, #1dad4b 100%);
	--slime-glow: rgba(143, 209, 63, .35);

	--paper: #ffffff;
	--tint: #f4f7ee;
	--text: #1b1a27;
	--muted: #5b5970;
	--line: #e3e7da;

	--warn: #ffb547;
	--danger: #ff6b6b;

	--radius: 18px;
	--radius-sm: 12px;
	--shadow: 0 1px 2px rgba(20, 18, 30, .06), 0 8px 24px -12px rgba(20, 18, 30, .18);
	--shadow-lg: 0 24px 60px -24px rgba(20, 18, 30, .35);

	--font-head: "Space Grotesk", system-ui, sans-serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

	--wrap: 1200px;
	--gutter: clamp(16px, 4vw, 32px);
}

/* =========================================================================
   Base
   ====================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--paper);
	color: var(--text);
	font: 400 16px/1.65 var(--font-body);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
body.mit-lock { overflow: hidden; }
img, svg { max-width: 100%; height: auto; }
a { color: var(--slime-deep); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: #138a3a; }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .5em; color: inherit; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--slime); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--lime); color: var(--ink); }

.screen-reader-text, .mit-hp {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.mit-skip { position: absolute; left: -999px; top: 8px; z-index: 999; background: var(--slime); color: var(--ink); padding: 8px 14px; border-radius: 8px; font-weight: 600; }
.mit-skip:focus { left: 8px; }

.mit-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.mit-narrow { max-width: 860px; }
.mit-mono { font-family: var(--font-mono); font-size: .8rem; }

.mit-icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }

.mit-h1 { font-size: clamp(2.3rem, 5.4vw, 4.1rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.04; }
.mit-h1--page { font-size: clamp(2rem, 4.4vw, 3.2rem); margin: 0; }
.mit-h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); font-weight: 700; }
.mit-hl {
	background: var(--slime-grad);
	-webkit-background-clip: text; background-clip: text;
	color: transparent;
}
.mit-eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	font: 500 .78rem/1 var(--font-mono);
	text-transform: uppercase; letter-spacing: .12em;
	color: var(--slime-deep);
	margin-bottom: 14px;
}
.mit-eyebrow::before { content: ">"; color: var(--slime); }

/* =========================================================================
   Buttons
   ====================================================================== */
.mit-btn {
	--h: 46px;
	position: relative;
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	min-height: var(--h); padding: 0 22px;
	border-radius: 999px; border: 1.5px solid transparent;
	font: 600 .95rem/1 var(--font-body); text-decoration: none; cursor: pointer;
	transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s, background .2s, color .2s, border-color .2s;
	white-space: nowrap;
}
.mit-btn:active { transform: scale(.96, .92); }
.mit-btn--sm { --h: 38px; padding: 0 16px; font-size: .85rem; }
.mit-btn--lg { --h: 54px; padding: 0 28px; font-size: 1rem; }
.mit-btn--block { width: 100%; }

/* The slime button: glossy gradient + a drip that stretches on hover */
.mit-btn--slime {
	background: var(--slime-grad);
	color: var(--ink);
	box-shadow: 0 8px 22px -8px var(--slime-glow), inset 0 1px 0 rgba(255, 255, 255, .55);
	overflow: visible;
	isolation: isolate;
}
.mit-btn--slime::after {
	content: ""; position: absolute; z-index: -1;
	left: 28%; bottom: -5px; width: 9px; height: 11px;
	background: #6cc040; border-radius: 0 0 6px 6px / 0 0 8px 8px;
	transition: height .35s cubic-bezier(.3, 1.6, .5, 1);
}
.mit-btn--slime:hover { color: var(--ink); transform: translateY(-2px); box-shadow: 0 14px 30px -10px var(--slime-glow), inset 0 1px 0 rgba(255, 255, 255, .55); }
.mit-btn--slime:hover::after { height: 17px; }
.mit-btn--ghost { background: rgba(255, 255, 255, .04); color: var(--on-ink); border-color: rgba(255, 255, 255, .22); }
.mit-btn--ghost:hover { color: var(--ink); background: var(--lime); border-color: var(--lime); }
.mit-btn--dark { background: var(--ink); color: #fff; }
.mit-btn--dark:hover { background: var(--ink-3); color: #fff; }

.mit-splat {
	position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
	background: rgba(255, 255, 255, .7); pointer-events: none;
	animation: mit-splat .6s ease-out forwards;
}
@keyframes mit-splat { to { transform: scale(16); opacity: 0; } }

.mit-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; }
.mit-link .mit-icon { transition: transform .2s; }
.mit-link:hover .mit-icon { transform: translateX(4px); }

/* =========================================================================
   Top bar + header
   ====================================================================== */
.mit-topbar { background: #0d0c14; color: var(--on-ink-muted); font-size: .8rem; }
.mit-topbar__inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 38px; }
.mit-topbar__status { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: .74rem; }
.mit-topbar__links { display: flex; gap: 20px; }
.mit-topbar a { color: var(--on-ink-muted); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.mit-topbar a:hover { color: var(--lime); }
.mit-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--slime); box-shadow: 0 0 0 0 var(--slime-glow); animation: mit-pulse 2s infinite; }
@keyframes mit-pulse { 70% { box-shadow: 0 0 0 9px rgba(143, 209, 63, 0); } 100% { box-shadow: 0 0 0 0 rgba(143, 209, 63, 0); } }

.mit-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(20, 18, 30, .86);
	-webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid var(--ink-line);
	transition: box-shadow .25s;
}
.mit-header.is-scrolled { box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5); }
.admin-bar .mit-header { top: 32px; }
.mit-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
.mit-logo img { display: block; height: 54px; width: auto; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.mit-logo:hover img { transform: rotate(-3deg) scale(1.04); }

.mit-nav { display: flex; align-items: center; gap: 26px; }
.mit-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.mit-menu > li { position: relative; }
.mit-menu a {
	display: block; padding: 10px 14px; border-radius: 10px;
	color: var(--on-ink); text-decoration: none; font-weight: 500; font-size: .95rem;
	transition: color .2s, background .2s;
}
.mit-menu > li > a:hover, .mit-menu > li:focus-within > a { background: rgba(255, 255, 255, .06); color: #fff; }
.mit-menu > .current-menu-item > a, .mit-menu > .current-menu-ancestor > a, .mit-menu > .current_page_item > a { color: var(--lime); }
.mit-menu > .current-menu-item > a::after, .mit-menu > .current-menu-ancestor > a::after {
	content: ""; display: block; height: 3px; width: 18px; margin: 3px auto -6px; border-radius: 3px; background: var(--slime);
}
.mit-menu .menu-item-has-children > a { padding-right: 28px; }
.mit-menu .menu-item-has-children > a::before {
	content: ""; position: absolute; right: 12px; top: 19px; width: 6px; height: 6px;
	border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg);
}
.mit-menu .sub-menu {
	list-style: none; margin: 0; padding: 10px;
	position: absolute; left: 50%; top: calc(100% + 10px); min-width: 290px;
	background: var(--ink-2); border: 1px solid var(--ink-line); border-radius: 16px;
	box-shadow: var(--shadow-lg);
	opacity: 0; visibility: hidden; transform: translate(-50%, 8px);
	transition: opacity .2s, transform .2s, visibility .2s;
	display: grid; grid-template-columns: 1fr; gap: 2px;
}
.mit-menu .sub-menu::before { content: ""; position: absolute; inset: -12px 0 auto; height: 12px; }
.mit-menu li:hover > .sub-menu, .mit-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.mit-menu .sub-menu a { font-size: .9rem; color: var(--on-ink-muted); padding: 10px 12px; }
.mit-menu .sub-menu a:hover { color: var(--ink); background: var(--lime); }
.mit-menu .sub-menu .current-menu-item > a { color: var(--lime); }
.mit-sub-toggle { display: none; }

.mit-burger { display: none; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--ink-line); background: transparent; cursor: pointer; padding: 0; position: relative; }
.mit-burger span { position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: #fff; transition: transform .25s, opacity .2s; }
.mit-burger span:nth-child(1) { top: 15px; }
.mit-burger span:nth-child(2) { top: 22px; }
.mit-burger span:nth-child(3) { top: 29px; }
.mit-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mit-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mit-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================================
   Hero (home) + page hero
   ====================================================================== */
.mit-hero, .mit-phero, .mit-404 {
	position: relative; isolation: isolate;
	background:
		radial-gradient(700px 420px at 85% 30%, rgba(143, 209, 63, .16), transparent 60%),
		radial-gradient(600px 400px at 0% 100%, rgba(29, 173, 75, .12), transparent 60%),
		var(--ink);
	color: var(--on-ink);
}
.mit-hero__grid-bg {
	position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
	background-size: 44px 44px;
	-webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 75%);
	mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 75%);
}
.mit-hero { padding: clamp(56px, 8vw, 104px) 0 clamp(90px, 10vw, 140px); }
/* Full-height video hero: fills the viewport below the top bar + header */
.mit-hero--video {
	min-height: calc(100vh - var(--mit-chrome, 114px));
	min-height: calc(100svh - var(--mit-chrome, 114px));
	display: flex; align-items: center;
	padding: 48px 0 96px;
	background: var(--ink);
}
.mit-hero--video .mit-hero__inner { width: 100%; }
/* Scale the hero copy with viewport height so it all sits above the fold */
.mit-hero--video { padding: clamp(24px, 4vh, 56px) 0 clamp(72px, 10vh, 110px); }
.mit-hero--video .mit-term { margin-bottom: clamp(14px, 2.6vh, 26px); }
.mit-hero--video .mit-h1 { font-size: clamp(2.2rem, min(5.2vw, 7vh), 4.1rem); }
.mit-hero--video .mit-hero__lead { margin: clamp(12px, 2.2vh, 22px) 0 clamp(18px, 3.4vh, 32px); }
.mit-hero--video .mit-chips { margin-top: clamp(16px, 3.4vh, 36px); }
.mit-hero--video .mit-hero__art { max-width: min(460px, 62vh); }
.mit-hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.mit-hero__video {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	filter: saturate(1.15) hue-rotate(-28deg);
	opacity: 0; transition: opacity 1.2s ease;
}
.mit-hero__video.is-playing { opacity: 1; }
/* Poster shows instantly (and stays for reduced-motion users) */
.mit-hero__media { background: var(--ink) url("assets/video/hero-servers-poster.jpg") center / cover no-repeat; }
.mit-hero__shade {
	position: absolute; inset: 0;
	background:
		linear-gradient(90deg, rgba(20, 18, 30, .94) 0%, rgba(20, 18, 30, .78) 45%, rgba(20, 18, 30, .45) 100%),
		linear-gradient(0deg, rgba(20, 18, 30, .95) 0%, transparent 35%),
		radial-gradient(700px 420px at 80% 40%, rgba(143, 209, 63, .22), transparent 65%);
}
.mit-hero--video .mit-hero__grid-bg { opacity: .55; }

.mit-vidtoggle {
	position: absolute; right: var(--gutter); bottom: 84px; z-index: 4;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 12px; border-radius: 999px; cursor: pointer;
	font: 500 .72rem/1 var(--font-mono); color: var(--on-ink-muted);
	background: rgba(20, 18, 30, .6); border: 1px solid var(--ink-line);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.mit-vidtoggle:hover { color: var(--lime); border-color: rgba(211, 224, 99, .4); }
.mit-vidtoggle::before { content: ""; width: 8px; height: 10px; border: solid currentColor; border-width: 0 3px; }
.mit-vidtoggle[aria-pressed="true"]::before { border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; width: 0; height: 0; }
.mit-vidtoggle__play, .mit-vidtoggle[aria-pressed="true"] .mit-vidtoggle__pause { display: none; }
.mit-vidtoggle[aria-pressed="true"] .mit-vidtoggle__play { display: inline; }

.mit-scrollcue {
	position: absolute; left: 50%; bottom: 78px; z-index: 4; transform: translateX(-50%);
	width: 26px; height: 42px; border: 2px solid rgba(255, 255, 255, .35); border-radius: 14px;
}
.mit-scrollcue span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--slime); animation: mit-scroll 1.8s ease-in-out infinite; }
.mit-scrollcue:hover { border-color: var(--lime); }
@keyframes mit-scroll { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
@media (max-height: 640px) { .mit-scrollcue { display: none; } }

.mit-hero__inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.mit-hero__lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--on-ink-muted); max-width: 560px; margin: 22px 0 32px; }
.mit-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; }

.mit-term {
	display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
	font: 500 .85rem/1.4 var(--font-mono); color: var(--on-ink);
	background: rgba(255, 255, 255, .05); border: 1px solid var(--ink-line);
	padding: 8px 14px; border-radius: 10px; margin-bottom: 26px;
}
.mit-term__prompt { color: var(--slime); }
.mit-term__caret { display: inline-block; width: 8px; height: 1.05em; background: var(--lime); animation: mit-blink 1s steps(1) infinite; margin-left: -6px; }
@keyframes mit-blink { 50% { opacity: 0; } }

.mit-chips { list-style: none; padding: 0; margin: 36px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.mit-chips li {
	display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--on-ink);
	padding: 7px 13px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--ink-line);
}
.mit-chips .mit-icon { color: var(--slime); }

.mit-hero__art { position: relative; aspect-ratio: 1; max-width: 460px; justify-self: center; width: 100%; }
.mit-blob {
	position: absolute; inset: 6%;
	background: radial-gradient(circle at 35% 30%, #f7fbe9, #e3f0c4 70%);
	border-radius: 58% 42% 49% 51% / 47% 55% 45% 53%;
	box-shadow: 0 0 0 10px rgba(143, 209, 63, .12), 0 30px 80px -20px rgba(143, 209, 63, .45);
	animation: mit-morph 12s ease-in-out infinite;
}
@keyframes mit-morph {
	50% { border-radius: 44% 56% 58% 42% / 55% 43% 57% 45%; transform: rotate(6deg); }
}
@keyframes mit-bob { 50% { transform: translate(-50%, calc(-50% - 10px)); } }

/* -------------------------------------------------------------------------
   Animated hero mascot (template-parts/hero-monster.php): the original
   artwork with overlays for eyes, eyelids, mouth, laptop glow and reactions.
   ---------------------------------------------------------------------- */
.mit-hm {
	position: absolute; left: 50%; top: 52%; width: 84%;
	transform: translate(-50%, -50%);
	animation: mit-bob 5s ease-in-out infinite;
	cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mit-hm__svg { display: block; width: 100%; height: auto; overflow: visible; }
.mit-hm__svg * { transform-box: fill-box; }

.mit-hm__char { transform-origin: 50% 100%; }
.mit-hm__breath { transform-origin: 50% 100%; animation: mit-hm-breathe 3.6s ease-in-out infinite; }
@keyframes mit-hm-breathe { 50% { transform: scale(1.012, 1.03); } }

/* Eyes: repainted whites + irises that follow the cursor, skin-coloured lids for blinking */
.mit-hc__white { fill: url(#mit-hc-white); }
.mit-hc__rim { fill: none; stroke: #2e712e; stroke-width: 3.2; }
.mit-hc__iris { fill: #2f8ed4; stroke: #1a5273; stroke-width: 1.6; }
.mit-hc__pupil { fill: #10202e; }
.mit-hc__shine { fill: #fff; }
.mit-hm__look { transition: transform .18s ease-out; }
.mit-hc__lid rect { fill: #9fca3c; }
.mit-hc__lid path { fill: none; stroke: #2e712e; stroke-width: 3.2; }
.mit-hc__lid { transform: translateY(-104%); transition: transform .07s ease-in; }
.mit-hm.is-blink .mit-hc__lid { transform: translateY(0); }

/* Laptop light: spill on the face/belly + halo leaking round the lid */
.mit-hc__spill { fill: url(#mit-hc-glow); mix-blend-mode: screen; animation: mit-hm-flicker 2.6s steps(1) infinite; }
.mit-hc__halo { fill: #c4ff7a; opacity: .6; animation: mit-hm-flicker 2.6s steps(1) infinite; }
@keyframes mit-hm-flicker { 0% { opacity: .55; } 12% { opacity: .75; } 20% { opacity: .5; } 46% { opacity: .8; } 60% { opacity: .6; } 78% { opacity: .85; } }

.mit-hm__bits text { font: 600 11px var(--font-mono); fill: #c9ff8a; opacity: 0; animation: mit-hm-bit 3s ease-out var(--d) infinite; }
@keyframes mit-hm-bit { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-34px); } }

.mit-hm__logo circle:first-child { fill: #93d13f; stroke: #4f8a1f; stroke-width: 2; }
.mit-hm__logo { filter: drop-shadow(0 0 6px rgba(143, 209, 63, .9)); animation: mit-hm-logo 2.6s ease-in-out infinite; }
.mit-hm__logo-eye { fill: #14121e; }
.mit-hm__logo-mouth { fill: none; stroke: #14121e; stroke-width: 2; stroke-linecap: round; }
@keyframes mit-hm-logo { 50% { filter: drop-shadow(0 0 12px rgba(143, 209, 63, 1)); } }

/* Click reaction elements (hidden until .is-chomp) */
.mit-hm__splats circle { fill: #93d13f; stroke: #4f8a1f; stroke-width: 2; opacity: 0; }
.mit-hm__bubble { opacity: 0; transform-origin: 0% 100%; }
.mit-hm__bubble path { fill: #fff; stroke: #14121e; stroke-width: 3; }
.mit-hm__bubble text { font: 700 24px var(--font-head); fill: #1dad4b; text-anchor: middle; }

/* Hover: a happy hop */
.mit-hm:hover .mit-hm__char { animation: mit-hm-hop .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes mit-hm-hop { 30% { transform: scale(1.04, .94); } 60% { transform: translateY(-14px) scale(.98, 1.04); } 100% { transform: none; } }

/* Click: chomp (a copy of the mouth stretches open — never smaller than the
   original, so the art underneath never shows) + slime splats + "nom!" */
/* fill-box of the mouth group is the whole image, so 30% ≈ the top of the mouth (y≈95) */
.mit-hc__mouth { transform-origin: 50% 30%; }
.mit-hm.is-chomp .mit-hm__char { animation: mit-hm-squash .7s ease-out; }
.mit-hm.is-chomp .mit-hc__mouth { animation: mit-hc-chomp .7s ease-in-out; }
.mit-hm.is-chomp .mit-hm__splats circle { animation: mit-hm-splat .8s ease-out forwards; }
.mit-hm.is-chomp .mit-hm__bubble { animation: mit-hm-bubble 1.4s cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes mit-hm-squash { 15% { transform: scale(1.08, .9); } 35% { transform: scale(.95, 1.06) translateY(-8px); } 60% { transform: scale(1.02, .98); } 100% { transform: none; } }
@keyframes mit-hc-chomp { 0%, 100% { transform: none; } 22% { transform: scale(1.04, 1.7); } 40% { transform: none; } 60% { transform: scale(1.03, 1.5); } 78% { transform: none; } }
@keyframes mit-hm-splat { 0% { opacity: 1; transform: translate(0, 0) scale(.4); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1.2); } }
@keyframes mit-hm-bubble { 0% { opacity: 0; transform: scale(.3); } 20% { opacity: 1; transform: scale(1); } 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.9) translateY(-10px); } }
.mit-float {
	position: absolute; display: inline-flex; align-items: center; gap: 8px;
	background: rgba(28, 26, 42, .92); color: var(--on-ink);
	border: 1px solid var(--ink-line); border-radius: 12px; padding: 9px 13px;
	font: 500 .78rem/1 var(--font-mono); box-shadow: var(--shadow-lg);
	animation: mit-float 6s ease-in-out infinite;
}
.mit-float small { color: var(--on-ink-muted); }
.mit-float--a { top: 8%; left: -6%; }
.mit-float--b { top: 60%; right: -6%; animation-delay: -2s; }
.mit-float--c { bottom: 6%; left: 4%; animation-delay: -4s; }
@keyframes mit-float { 50% { transform: translateY(-8px); } }
.mit-dot { width: 8px; height: 8px; border-radius: 50%; }
.mit-dot--ok { background: var(--slime); box-shadow: 0 0 10px var(--slime); }
.mit-dot--warn { background: var(--warn); box-shadow: 0 0 10px var(--warn); }

/* -------------------------------------------------------------------------
   3D slime: sits across the hero's bottom edge and leaks out below it.
   Shapes are merged + lit by the #mit-goo SVG filter (see mit_slime()).
   ---------------------------------------------------------------------- */
.mit-slime {
	--edge: 42px;                         /* how far the slime rises into the hero */
	position: absolute; left: 0; right: 0; top: calc(100% - var(--edge)); height: 250px;
	z-index: 3; pointer-events: none; overflow: hidden;
	filter: drop-shadow(0 12px 14px rgba(25, 90, 30, .3));
}
.mit-slime__defs { position: absolute; width: 0; height: 0; }
.mit-slime__goo { position: absolute; inset: 0; filter: url(#mit-goo); }
.mit-slime__goo > span, .mit-slime__drip i, .mit-slime__drip::before { background: #93d43f; }

.mit-slime__band { position: absolute; left: -60px; right: -60px; top: 26px; height: 30px; border-radius: 15px; }

/* Ripples: flat ellipses of random size that slowly swell along the edge */
.mit-slime__blob {
	position: absolute; left: calc(var(--x) - var(--bw) / 2); top: calc(28px - var(--bh) / 2 + var(--y));
	width: var(--bw); height: var(--bh); border-radius: 50%;
	animation: mit-blob var(--t) ease-in-out var(--dl) infinite alternate;
}
@keyframes mit-blob { from { transform: scale(.85, .7) translateY(3px); } to { transform: scale(1.05, 1.1) translateY(-2px); } }

/* Drip = unscaled box; ::before is the stretching column, <i> the drop */
.mit-slime__goo > .mit-slime__drip { position: absolute; left: calc(var(--x) - var(--w) / 2); top: 44px; width: var(--w); height: var(--l); background: none; }
.mit-slime__drip::before {
	content: ""; position: absolute; inset: 0;
	border-radius: 0 0 calc(var(--w) / 2) calc(var(--w) / 2);
	transform-origin: 50% 0;
	animation: mit-drip var(--t) var(--dl) infinite;
}
.mit-slime__drip i {
	position: absolute; left: 50%; top: 0;
	width: calc(var(--w) * 1.5); height: calc(var(--w) * 1.5); border-radius: 50%;
	opacity: 0;
	animation: mit-drop var(--t) var(--dl) infinite;
}
@keyframes mit-drip {
	0%   { transform: scaleY(.35); }
	55%  { transform: scaleY(1); animation-timing-function: cubic-bezier(.2, 1.6, .4, 1); }
	68%  { transform: scaleY(.62); }
	100% { transform: scaleY(.35); }
}
@keyframes mit-drop {
	0%   { opacity: 1; transform: translate(-50%, calc(var(--l) * .35 - 70%)) scale(.7); }
	55%  { opacity: 1; transform: translate(-50%, calc(var(--l) - 70%)) scale(1); animation-timing-function: cubic-bezier(.5, 0, 1, .5); }
	82%  { opacity: 1; transform: translate(-50%, calc(var(--l) + 55px)) scale(.75, .9); }
	90%, 100% { opacity: 0; transform: translate(-50%, calc(var(--l) + 70px)) scale(.4); }
}
.mit-slime.is-paused *, .mit-slime.is-paused *::before { animation-play-state: paused; }

/* Page hero */
.mit-phero { padding: clamp(40px, 6vw, 72px) 0 clamp(44px, 6vw, 72px); border-bottom: 3px solid var(--slime); }
.mit-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font: 500 .78rem/1 var(--font-mono); color: var(--on-ink-muted); margin-bottom: 22px; }
.mit-crumbs a { color: var(--on-ink-muted); text-decoration: none; }
.mit-crumbs a:hover { color: var(--lime); }
.mit-crumbs [aria-current] { color: var(--slime); }
.mit-phero__row { display: flex; gap: 24px; align-items: flex-start; }
.mit-phero__ico {
	flex: none; width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center;
	background: var(--slime-grad); color: var(--ink); box-shadow: 0 14px 40px -12px var(--slime-glow);
}
.mit-phero__ico .mit-icon { width: 38px; height: 38px; }
.mit-phero__lead { font-size: 1.12rem; color: var(--on-ink-muted); max-width: 720px; margin: 14px 0 0; }

/* Photo background (the page's featured image) */
.mit-phero--image {
	min-height: clamp(320px, 44vh, 480px);
	display: flex; align-items: flex-end;
	overflow: hidden;
}
.mit-phero--image .mit-phero__inner { width: 100%; }
.mit-phero--image .mit-phero__lead { color: #d4d2e4; }
.mit-phero__bg {
	position: absolute; inset: 0; z-index: -2;
	background: var(--ink) center / cover no-repeat;
	filter: saturate(.85) contrast(1.05);
	animation: mit-drift 26s ease-in-out infinite alternate;
}
@keyframes mit-drift { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.12) translate(-1.5%, -1%); } }
.mit-phero__shade {
	position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(90deg, rgba(20, 18, 30, .96) 0%, rgba(20, 18, 30, .84) 38%, rgba(20, 18, 30, .5) 70%, rgba(20, 18, 30, .35) 100%),
		linear-gradient(0deg, rgba(20, 18, 30, .85) 0%, transparent 45%),
		linear-gradient(135deg, rgba(29, 173, 75, .18), rgba(143, 209, 63, .08));
}

/* =========================================================================
   Sections
   ====================================================================== */
.mit-section { padding: clamp(64px, 9vw, 112px) 0; }
.mit-section--flush { padding-bottom: 0; }
.mit-section--tint { background: var(--tint); }
.mit-section__head { text-align: center; max-width: 680px; margin: 0 auto 48px; }
.mit-section__head p:last-child { color: var(--muted); font-size: 1.08rem; }
.mit-section__after { margin-top: 56px; }

.mit-intro { padding-top: clamp(120px, 13vw, 170px); }
.mit-intro__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; }
.mit-intro .mit-prose p { font-size: 1.08rem; color: var(--muted); }

/* Service cards */
.mit-services { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.mit-svc {
	position: relative; overflow: hidden; isolation: isolate;
	display: flex; flex-direction: column;
	padding: 28px; border-radius: var(--radius);
	background: var(--paper); border: 1px solid var(--line);
	color: var(--text); text-decoration: none;
	box-shadow: var(--shadow);
	transition: transform .3s cubic-bezier(.3, 1.4, .5, 1), border-color .3s, box-shadow .3s;
}
.mit-svc::before {
	content: ""; position: absolute; z-index: -1; right: -40px; top: -40px; width: 120px; height: 120px;
	background: var(--slime-grad); opacity: .1; border-radius: 50% 40% 55% 45%;
	transition: transform .5s cubic-bezier(.3, 1.4, .5, 1), opacity .3s;
}
.mit-svc:hover { transform: translateY(-6px); border-color: var(--slime); box-shadow: var(--shadow-lg); color: var(--text); }
.mit-svc:hover::before { transform: scale(2.2) rotate(30deg); opacity: .16; }
.mit-svc__ico {
	width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 20px;
	background: var(--ink); color: var(--slime);
	transition: background .3s, color .3s, transform .3s;
}
.mit-svc__ico .mit-icon { width: 28px; height: 28px; }
.mit-svc:hover .mit-svc__ico { background: var(--slime-grad); color: var(--ink); transform: rotate(-6deg); }
.mit-svc h3 { font-size: 1.25rem; margin-bottom: 10px; }
.mit-svc p { color: var(--muted); font-size: .95rem; flex: 1; }
.mit-svc__more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9rem; color: var(--slime-deep); }
.mit-svc__more .mit-icon { transition: transform .2s; }
.mit-svc:hover .mit-svc__more .mit-icon { transform: translateX(5px); }

/* Why us */
.mit-why__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.mit-why p { color: var(--muted); font-size: 1.05rem; }
.mit-ticks { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.mit-ticks li { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.mit-ticks .mit-icon { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--slime); color: var(--ink); stroke-width: 2.6; }

.mit-console {
	background: var(--ink); color: var(--on-ink); border-radius: var(--radius); overflow: hidden;
	box-shadow: var(--shadow-lg), 0 0 0 1px var(--ink-line);
	transform: rotate(1.2deg);
}
.mit-console__bar, .mit-form__screen { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: var(--ink-2); border-bottom: 1px solid var(--ink-line); }
.mit-console__bar span, .mit-form__screen span { width: 11px; height: 11px; border-radius: 50%; background: #3a3752; }
.mit-console__bar span:first-child, .mit-form__screen span:first-child { background: #ff6b6b; }
.mit-console__bar span:nth-child(2), .mit-form__screen span:nth-child(2) { background: var(--warn); }
.mit-console__bar span:nth-child(3), .mit-form__screen span:nth-child(3) { background: var(--slime); }
.mit-console__bar code, .mit-form__screen code { margin-left: 8px; font: 500 .75rem var(--font-mono); color: var(--on-ink-muted); }
.mit-console__body { margin: 0; padding: 22px; font: 500 .84rem/1.9 var(--font-mono); white-space: pre-wrap; }
.c-dim { color: #6f6b8c; } .c-ok { color: var(--slime); } .c-warn { color: var(--warn); }

/* Process */
.mit-process { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.mit-process li {
	position: relative; counter-increment: step;
	padding: 28px 24px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line);
}
.mit-process li::before {
	content: "0" counter(step);
	display: inline-grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px;
	font: 700 1.1rem var(--font-mono); color: var(--ink);
	background: var(--slime-grad); border-radius: 46% 54% 42% 58% / 55% 45% 55% 45%;
}
.mit-process li:not(:last-child)::after {
	content: ""; position: absolute; top: 54px; right: -21px; width: 22px; border-top: 2px dashed var(--slime);
}
.mit-process h3 { font-size: 1.2rem; }
.mit-process p { color: var(--muted); font-size: .95rem; margin: 0; }

/* CTA band */
.mit-band { padding: 0 0 clamp(64px, 9vw, 112px); }
.mit-section--tint + .mit-band { padding-top: clamp(64px, 9vw, 112px); }
.mit-band__inner {
	position: relative; overflow: hidden; isolation: isolate;
	display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
	background: var(--ink); color: var(--on-ink);
	border-radius: 28px; padding: clamp(32px, 5vw, 56px);
	max-width: calc(var(--wrap) - 2 * var(--gutter));
}
.mit-band__inner::before {
	content: ""; position: absolute; z-index: -1; right: -80px; bottom: -120px; width: 360px; height: 360px;
	background: radial-gradient(circle, rgba(143, 209, 63, .35), transparent 65%);
}
.mit-band__inner > div:first-child { max-width: 620px; }
.mit-band .mit-h2 { margin: 0; }
.mit-band p { color: var(--on-ink-muted); margin: 12px 0 0; }
.mit-band__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.mit-band--slim { padding-top: clamp(16px, 3vw, 32px); }
.mit-band--slim .mit-h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); max-width: 640px; }

/* =========================================================================
   Contact
   ====================================================================== */
.mit-contact { background: var(--tint); padding: clamp(64px, 9vw, 112px) 0 clamp(120px, 14vw, 170px); }
.mit-contact__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.mit-contact__intro > p { color: var(--muted); font-size: 1.05rem; }
.mit-contact__cards { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.mit-contact__cards li {
	display: flex; gap: 16px; align-items: flex-start;
	padding: 18px; border-radius: var(--radius-sm); background: var(--paper); border: 1px solid var(--line);
}
.mit-contact__cards strong { display: block; font-family: var(--font-head); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.mit-contact__cards a { display: block; color: var(--text); font-weight: 600; text-decoration: none; }
.mit-contact__cards a:hover { color: var(--slime-deep); }
.mit-contact__cards small { color: var(--muted); }
.mit-contact__ico { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--ink); color: var(--slime); }

.mit-form {
	background: var(--paper); border-radius: 22px; overflow: hidden;
	border: 1px solid var(--line); box-shadow: var(--shadow-lg);
}
.mit-form > :not(.mit-form__screen) { margin-left: 28px; margin-right: 28px; }
.mit-form > .mit-form__screen + * { margin-top: 26px; }
.mit-form > :last-child { margin-bottom: 28px; }
.mit-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mit-field { display: block; margin-bottom: 16px; }
.mit-form__row .mit-field { margin-bottom: 16px; }
.mit-field > span { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 7px; }
.mit-field em { font-weight: 400; color: var(--muted); font-style: normal; }
.mit-field input, .mit-field select, .mit-field textarea, .mit-search input {
	width: 100%; font: inherit; color: var(--text);
	padding: 13px 15px; border-radius: 12px; border: 1.5px solid var(--line); background: #fbfcf8;
	transition: border-color .2s, box-shadow .2s, background .2s;
}
.mit-field textarea { resize: vertical; min-height: 130px; }
.mit-field input:focus, .mit-field select:focus, .mit-field textarea:focus, .mit-search input:focus {
	outline: none; border-color: var(--slime); background: #fff; box-shadow: 0 0 0 4px rgba(143, 209, 63, .2);
}
.mit-notice { padding: 13px 16px; border-radius: 12px; font-weight: 500; }
.mit-notice--ok { background: #eaf7d8; color: #2b5a10; border: 1px solid #c4e79a; }
.mit-notice--err { background: #fff0ed; color: #8a2a1c; border: 1px solid #ffd0c6; }

/* =========================================================================
   Inner page content (Gutenberg blocks)
   ====================================================================== */
.mit-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 56px; align-items: start; }
.mit-prose { font-size: 1.04rem; }
.mit-prose > * + * { margin-top: 0; }
.mit-prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 1.8em; }
.mit-prose h3 { font-size: 1.2rem; margin-top: 1.4em; }
.mit-prose > :first-child { margin-top: 0; }
.mit-prose p, .mit-prose li { color: #3d3b4f; }
.mit-prose ul:not([class*="mit-"]), .mit-prose ol:not([class*="mit-"]) { padding-left: 1.3em; }
.mit-prose li { margin-bottom: .4em; }
.mit-prose strong { color: var(--text); }
.mit-prose .mit-lead, .mit-lead { font-size: 1.2rem; line-height: 1.6; color: var(--text); }
.mit-prose .mit-eyebrow { margin-top: 2.6em; margin-bottom: 4px; }
.mit-prose .mit-eyebrow + h2 { margin-top: 0; }

/* Classic themes wrap group blocks in an inner container; flatten it so
   the grid/step layouts apply to the actual child blocks. */
.mit-prose [class*="mit-"] > .wp-block-group__inner-container { display: contents; }

/* Card grid: group.mit-grid > group.mit-card */
.mit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 16px; margin: 24px 0 32px; }
.mit-grid.is-layout-constrained > *, .mit-grid.is-layout-flow > * { margin: 0 !important; max-width: none !important; }
.mit-card {
	position: relative; padding: 24px; border-radius: var(--radius); background: var(--paper);
	border: 1px solid var(--line); box-shadow: var(--shadow);
	transition: transform .3s cubic-bezier(.3, 1.4, .5, 1), border-color .3s;
}
.mit-card:hover { transform: translateY(-4px); border-color: var(--slime); }
.mit-card h3 { margin: 0 0 8px; font-size: 1.1rem; display: flex; gap: 12px; align-items: center; }
.mit-card h3::before {
	content: ""; flex: none; width: 34px; height: 34px; border-radius: 10px;
	background: var(--ink) no-repeat center / 18px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fd13f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L4 14h7l-1 8 9-12h-7l1-8z'/%3E%3C/svg%3E");
}
.mit-card p { margin: 0; font-size: .96rem; color: var(--muted); }
.mit-card > * { margin-top: 0; }

/* Numbered steps: group.mit-steps > group.mit-step */
.mit-steps { counter-reset: s; display: grid; gap: 14px; margin: 24px 0 32px; }
.mit-steps > * { margin: 0 !important; max-width: none !important; }
.mit-step {
	counter-increment: s; position: relative; padding: 20px 22px 20px 82px; border-radius: var(--radius);
	background: var(--tint); border: 1px solid var(--line);
}
.mit-step::before {
	content: "0" counter(s); position: absolute; left: 20px; top: 20px;
	width: 44px; height: 44px; display: grid; place-items: center;
	font: 700 .95rem var(--font-mono); color: var(--ink);
	background: var(--slime-grad); border-radius: 46% 54% 42% 58% / 55% 45% 55% 45%;
}
.mit-step h3 { margin: 0 0 4px; }
.mit-step p { margin: 0; color: var(--muted); }

/* Check list */
.mit-checks { list-style: none; padding: 0; margin: 20px 0 28px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px 22px; }
.mit-checks li { position: relative; padding-left: 34px; margin: 0; color: var(--text); font-weight: 500; }
.mit-checks li::before {
	content: ""; position: absolute; left: 0; top: .15em; width: 22px; height: 22px; border-radius: 50%;
	background: var(--slime) no-repeat center / 13px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314121e' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.mit-checks.is-single { grid-template-columns: 1fr; }

/* Pill list */
.mit-pills { list-style: none; padding: 0; margin: 14px 0 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.mit-pills li {
	margin: 0; padding: 7px 14px; border-radius: 999px; font: 500 .82rem/1.3 var(--font-mono);
	background: var(--ink); color: var(--on-ink);
}
.mit-pills li::before { content: "› "; color: var(--slime); }

/* Callout */
.mit-callout {
	position: relative; overflow: hidden; margin: 36px 0; padding: 30px 32px; border-radius: 22px;
	background: var(--ink); color: var(--on-ink); isolation: isolate;
}
.mit-callout::after {
	content: ""; position: absolute; z-index: -1; right: -60px; top: -60px; width: 220px; height: 250px;
	background: radial-gradient(circle, rgba(143, 209, 63, .4), transparent 65%);
}
.mit-callout > * { margin-top: 0; }
.mit-callout h2, .mit-callout h3 { color: #fff; margin-top: 0; }
.mit-callout p, .mit-callout li { color: var(--on-ink-muted); }
.mit-callout .mit-checks li { color: var(--on-ink); }
.mit-callout > :last-child { margin-bottom: 0; }

/* Q&A style list */
.mit-questions { list-style: none; padding: 0; margin: 20px 0 28px; display: grid; gap: 12px; }
.mit-questions li {
	margin: 0; padding: 18px 20px 18px 58px; position: relative; border-radius: var(--radius-sm);
	border: 1px dashed #c8d6a9; background: #fbfdf6; font-weight: 500; color: var(--text);
}
.mit-questions li::before { content: "?"; position: absolute; left: 18px; top: 16px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--slime); font: 700 .85rem var(--font-mono); }

.mit-prose .wp-block-buttons { margin: 28px 0; display: flex; gap: 12px; flex-wrap: wrap; }
.mit-prose .wp-block-button__link {
	display: inline-flex; align-items: center; min-height: 50px; padding: 0 26px; border-radius: 999px;
	background: var(--slime-grad); color: var(--ink); font-weight: 600; text-decoration: none;
	box-shadow: 0 8px 22px -8px var(--slime-glow); transition: transform .2s;
}
.mit-prose .wp-block-button__link:hover { transform: translateY(-2px); color: var(--ink); }
.mit-prose .is-style-outline .wp-block-button__link { background: transparent; border: 1.5px solid var(--ink); box-shadow: none; }
.mit-prose .wp-block-separator { border: 0; height: 2px; background: var(--line); margin: 40px 0; }
.mit-prose blockquote { margin: 28px 0; padding: 8px 0 8px 22px; border-left: 4px solid var(--slime); font-size: 1.15rem; }
.mit-prose figure { margin: 28px 0; }
.mit-prose img { border-radius: var(--radius); }

/* =========================================================================
   Elementor layouts (pages converted by the Monster IT Deploy plugin).
   Elementor's markup is styled through the CSS classes set on its
   sections, columns and widgets, so editors keep the Monster IT look.
   ====================================================================== */
:root {
	/* Elementor "global" picks resolve to the theme palette (the kit stylesheet is not loaded) */
	--e-global-color-primary: var(--ink);
	--e-global-color-secondary: var(--slime-deep);
	--e-global-color-text: var(--text);
	--e-global-color-accent: var(--slime);
	--e-global-typography-primary-font-family: "Space Grotesk";
	--e-global-typography-secondary-font-family: "Space Grotesk";
	--e-global-typography-text-font-family: "Inter";
	--e-global-typography-accent-font-family: "Inter";
}
body.mit-elementor { font-family: var(--font-body); color: var(--text); }
.mit-elementor .elementor-heading-title { font-family: var(--font-head); line-height: 1.15; letter-spacing: -.02em; color: inherit; }
.mit-elementor .elementor-widget-text-editor { font-family: inherit; color: inherit; }
.mit-elementor .elementor-widget-text-editor p:last-child,
.mit-elementor .elementor-widget-text-editor ul:last-child { margin-bottom: 0; }
.mit-elementor .elementor-section .elementor-column > .elementor-widget-wrap { padding: 0; }
.mit-prose .elementor-section > .elementor-container { max-width: none; }
.mit-prose .elementor-widget:not(:last-child) { margin-bottom: 16px; margin-block-end: 16px; }

/* Buttons */
.mit-elementor .elementor-widget-button .elementor-button {
	display: inline-flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 26px; border-radius: 999px;
	background: var(--slime-grad); color: var(--ink); font: 600 .95rem/1 var(--font-body);
	box-shadow: 0 8px 22px -8px var(--slime-glow); transition: transform .2s;
}
.mit-elementor .elementor-widget-button .elementor-button:hover { transform: translateY(-2px); color: var(--ink); }

/* Card grid: section.mit-el-grid > column.mit-card */
.elementor-section.mit-el-grid { margin: 24px 0 32px; }
.elementor-section.mit-el-grid > .elementor-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.elementor-section.mit-el-grid > .elementor-container > .elementor-column { width: auto !important; max-width: none; }
.elementor-column.mit-card > .elementor-widget-wrap { align-content: flex-start; }
.mit-card .elementor-widget:not(:last-child) { margin-bottom: 8px; margin-block-end: 8px; }

/* Steps: section.mit-steps > inner section.mit-step; callout: section.mit-callout */
.mit-steps .elementor-section.mit-step:not(:last-child) { margin-bottom: 14px; }
.mit-step .elementor-widget:not(:last-child) { margin-bottom: 4px; margin-block-end: 4px; }
.elementor-section.mit-callout > .elementor-container { max-width: none; }

/* Home: full-width module sections ([mit_hero] etc.) */
.elementor-section.mit-raw { position: relative; z-index: 2; }
.elementor-section.mit-raw > .elementor-container { max-width: none; }
.mit-raw .elementor-widget { margin: 0 !important; }
.mit-raw--band .mit-band { padding-top: clamp(64px, 9vw, 112px); }

/* Home: content sections */
.elementor-section.mit-sec { padding: clamp(64px, 9vw, 112px) 0; }
.elementor-section.mit-sec > .elementor-container { max-width: var(--wrap); padding: 0 var(--gutter); }
.elementor-section.mit-sec--intro { padding-top: clamp(120px, 13vw, 170px); }
.elementor-section.mit-sec--tint { background: var(--tint); }
.elementor-section.mit-sec--2col > .elementor-container { gap: 56px; align-items: flex-start; }
.elementor-section.mit-sec--2col > .elementor-container > .elementor-column { flex: 1 1 0; width: auto; }
.elementor-section.mit-sec--center > .elementor-container { align-items: center; }
.elementor-widget.mit-h2 .elementor-heading-title { font-size: clamp(1.75rem, 3.4vw, 2.6rem); font-weight: 700; }
.elementor-widget.mit-lead p { color: var(--text); }
.elementor-widget.mit-eyebrow { display: flex; align-items: center; gap: 8px; }
.elementor-widget.mit-eyebrow p { margin: 0; }
.elementor-widget.mit-center { text-align: center; max-width: 680px; margin-left: auto; margin-right: auto; }
.elementor-widget.mit-eyebrow.mit-center { display: flex; justify-content: center; }
.elementor-widget.mit-muted { color: var(--muted); font-size: 1.05rem; }
.elementor-widget.mit-head-gap { margin-bottom: 48px !important; }

/* Home: process steps — inner section.mit-psteps > column.mit-pstep */
.elementor-section.mit-psteps { counter-reset: step; }
.elementor-section.mit-psteps > .elementor-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: none; }
.mit-psteps > .elementor-container > .elementor-column.mit-pstep {
	width: auto !important; position: relative; counter-increment: step;
	padding: 28px 24px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line);
}
.mit-pstep > .elementor-widget-wrap::before {
	content: "0" counter(step);
	display: inline-grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px;
	font: 700 1.1rem var(--font-mono); color: var(--ink);
	background: var(--slime-grad); border-radius: 46% 54% 42% 58% / 55% 45% 55% 45%;
}
.mit-pstep:not(:last-child)::after { content: ""; position: absolute; top: 54px; right: -21px; width: 22px; border-top: 2px dashed var(--slime); }
.mit-pstep .elementor-heading-title { font-size: 1.2rem; }
.mit-pstep .elementor-widget-text-editor { color: var(--muted); font-size: .95rem; }
.mit-pstep .elementor-widget:not(:last-child) { margin-bottom: 8px; margin-block-end: 8px; }

@media (max-width: 1080px) {
	.elementor-section.mit-psteps > .elementor-container { grid-template-columns: 1fr 1fr; }
	.mit-pstep:not(:last-child)::after { display: none; }
}
@media (max-width: 960px) {
	.elementor-section.mit-sec--2col > .elementor-container { flex-direction: column; gap: 40px; }
	.elementor-section.mit-sec--2col > .elementor-container > .elementor-column { flex: 0 0 auto; width: 100%; }
}
@media (max-width: 640px) {
	.elementor-section.mit-psteps > .elementor-container { grid-template-columns: 1fr; }
}

/* Aside */
.mit-aside { position: sticky; top: 104px; display: grid; gap: 18px; }
.admin-bar .mit-aside { top: 136px; }
.mit-aside__card { padding: 24px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper); }
.mit-aside__card h2 { font-size: 1.15rem; margin-bottom: 12px; }
.mit-aside__card--slime { background: var(--slime-grad); border: 0; color: var(--ink); position: relative; }
.mit-aside__card--slime::after { content: ""; position: absolute; left: 30px; bottom: -14px; width: 14px; height: 20px; background: #1dad4b; border-radius: 0 0 8px 8px; }
.mit-aside__card--slime p { font-size: .95rem; }
.mit-aside__phone { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 12px; color: var(--ink); font-weight: 600; text-decoration: none; }
.mit-aside__phone:hover { color: var(--ink); text-decoration: underline; }
.mit-aside__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mit-aside__list a { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 10px; color: var(--text); text-decoration: none; font-size: .93rem; font-weight: 500; }
.mit-aside__list a .mit-icon { color: var(--slime-deep); }
.mit-aside__list a:hover { background: var(--tint); }

/* =========================================================================
   Blog
   ====================================================================== */
.mit-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 24px; }
.mit-post-card { border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper); overflow: hidden; box-shadow: var(--shadow); transition: transform .3s cubic-bezier(.3, 1.4, .5, 1), border-color .3s; }
.mit-post-card:hover { transform: translateY(-6px); border-color: var(--slime); }
.mit-post-card__link { display: flex; flex-direction: column; height: 100%; color: var(--text); text-decoration: none; }
.mit-post-card__link:hover { color: var(--text); }
.mit-post-card__media { aspect-ratio: 16/9; background: var(--ink); overflow: hidden; position: relative; }
.mit-post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.mit-post-card__ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--slime); background: radial-gradient(circle at 70% 30%, rgba(143, 209, 63, .25), transparent 60%), linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 28px 28px, var(--ink); }
.mit-post-card__ph .mit-icon { width: 54px; height: 54px; }
.mit-post-card__body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.mit-post-card__body h2 { font-size: 1.3rem; }
.mit-post-card__body p { color: var(--muted); font-size: .95rem; flex: 1; }
.mit-post-card__meta { font: 500 .75rem var(--font-mono) !important; color: var(--slime-deep) !important; flex: 0 !important; text-transform: uppercase; letter-spacing: .06em; }
.mit-pagination .nav-links { display: flex; gap: 8px; justify-content: center; margin-top: 48px; }
.mit-pagination .page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); color: var(--text); text-decoration: none; font-weight: 600; }
.mit-pagination .page-numbers.current, .mit-pagination .page-numbers:hover { background: var(--ink); color: var(--slime); border-color: var(--ink); }
.mit-postnav { display: flex; justify-content: space-between; gap: 20px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); font-weight: 600; }
.mit-postnav a { text-decoration: none; }
.mit-empty { text-align: center; padding: 40px 0; }
.mit-search { display: flex; gap: 10px; max-width: 480px; margin: 24px auto 0; }

/* =========================================================================
   404
   ====================================================================== */
.mit-404 { padding: clamp(60px, 9vw, 120px) 0; text-align: center; }
.mit-404__inner { display: flex; flex-direction: column; align-items: center; }
.mit-404 p { color: var(--on-ink-muted); max-width: 520px; }
.mit-404__code { font: 700 clamp(6rem, 18vw, 12rem)/1 var(--font-head); letter-spacing: -.05em; margin: 0 0 10px; display: flex; align-items: center; color: var(--on-ink); }
.mit-404__o { display: inline-grid; place-items: center; width: .9em; height: .9em; margin: 0 .05em; border-radius: 50%; background: #e3f0c4; overflow: hidden; box-shadow: 0 0 0 8px rgba(143, 209, 63, .2); }
.mit-404__o img { width: 92%; mix-blend-mode: multiply; animation: mit-wobble 2.4s ease-in-out infinite; }
@keyframes mit-wobble { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
.mit-404__ctas { justify-content: center; margin-top: 12px; }

/* =========================================================================
   Footer
   ====================================================================== */
.mit-footer { position: relative; background: var(--ink); color: var(--on-ink-muted); padding: 80px 0 0; font-size: .94rem; }
.mit-peek { position: absolute; right: clamp(24px, 10vw, 160px); top: 0; transform: translateY(-74%); width: 170px; pointer-events: none; }
.mit-peek__svg { display: block; width: 100%; overflow: visible; }
.mit-peek__body { fill: #8fd13f; }
.mit-peek__horn { fill: #e9dca6; }
.mit-peek__spot { fill: #6cb22f; }
.mit-pupil { fill: var(--ink); transition: transform .12s ease-out; transform-box: fill-box; }
.mit-peek__lid { fill: none; stroke: #4f8a1f; stroke-width: 3; stroke-linecap: round; }
.mit-eye { transform-origin: center; transform-box: fill-box; transition: transform .08s; }
.mit-peek.is-blink .mit-eye { transform: scaleY(.1); }

.mit-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr .8fr 1.1fr; gap: 40px; padding-bottom: 56px; }
.mit-footer__brand img { height: 60px; width: auto; margin-bottom: 16px; }
.mit-footer__abn { font: 500 .78rem var(--font-mono); color: #77738f; }
.mit-footer__title { font-size: .8rem; font-family: var(--font-mono); font-weight: 500; text-transform: uppercase; letter-spacing: .12em; color: var(--slime); margin-bottom: 18px; }
.mit-footer__list, .mit-footer__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mit-footer a { color: var(--on-ink); text-decoration: none; }
.mit-footer a:hover { color: var(--lime); }
.mit-footer__contact { margin-bottom: 20px; }
.mit-footer__contact li { display: flex; gap: 10px; align-items: flex-start; }
.mit-footer__contact .mit-icon { color: var(--slime); margin-top: 4px; }
.mit-footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; padding-top: 22px; padding-bottom: 22px; border-top: 1px solid var(--ink-line); font-size: .84rem; }
.mit-ok { color: var(--slime); }

/* =========================================================================
   Reveal animations
   ====================================================================== */
.js .mit-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .9, .3, 1); }
.js .mit-svc.mit-reveal { transition-delay: calc(var(--i, 0) % 3 * 80ms); }
.js .mit-reveal.is-in { opacity: 1; transform: none; }
.js .mit-console.mit-reveal.is-in { transform: rotate(1.2deg); }
.js .mit-svc.mit-reveal.is-in:hover { transform: translateY(-6px); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* =========================================================================
   Responsive
   ====================================================================== */
@media (max-width: 1080px) {
	.mit-process { grid-template-columns: 1fr 1fr; }
	.mit-process li::after { display: none; }
	.mit-footer__grid { grid-template-columns: 1fr 1fr; }
	.mit-layout { grid-template-columns: minmax(0, 1fr); }
	.mit-aside { position: static; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px) {
	.mit-burger { display: block; }
	/* backdrop-filter would trap the fixed menu inside the header box */
	.mit-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--ink); }
	.mit-logo { position: relative; z-index: 70; }
	.mit-nav {
		position: fixed; inset: 0; top: var(--mit-nav-top, 0); z-index: 60;
		flex-direction: column; align-items: stretch; gap: 20px;
		background: var(--ink); padding: 96px var(--gutter) 32px; overflow-y: auto;
		opacity: 0; visibility: hidden; transform: translateY(-12px);
		transition: opacity .25s, transform .25s, visibility .25s;
	}
	.mit-nav.is-open { opacity: 1; visibility: visible; transform: none; }
	.mit-burger { position: relative; z-index: 70; }
	.mit-menu { flex-direction: column; gap: 2px; }
	.mit-menu a { font-size: 1.2rem; padding: 14px 8px; font-family: var(--font-head); }
	.mit-menu > .current-menu-item > a::after, .mit-menu > .current-menu-ancestor > a::after { display: none; }
	.mit-menu .menu-item-has-children > a::before { display: none; }
	.mit-menu .sub-menu {
		position: static; transform: none; opacity: 1; visibility: visible; display: none;
		min-width: 0; box-shadow: none; background: var(--ink-2); margin: 4px 0 8px;
	}
	.mit-menu li:hover > .sub-menu, .mit-menu li:focus-within > .sub-menu { transform: none; }
	.mit-menu li.is-open > .sub-menu { display: grid; }
	.mit-menu .sub-menu a { font-size: 1rem; font-family: var(--font-body); }
	.mit-menu > li { display: flex; flex-wrap: wrap; align-items: center; }
	.mit-menu > li > a { flex: 1; }
	.mit-menu > li > .sub-menu { flex-basis: 100%; }
	.mit-sub-toggle {
		display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--ink-line); border-radius: 10px; background: transparent; color: #fff; cursor: pointer;
	}
	.mit-sub-toggle::before { content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
	.mit-sub-toggle[aria-expanded="true"]::before { transform: rotate(-135deg); }
	.mit-nav__cta { align-self: stretch; --h: 54px; }

	.mit-hero__inner, .mit-intro__grid, .mit-why__grid, .mit-contact__grid { grid-template-columns: 1fr; gap: 40px; }
	.mit-hero__art, .mit-hero--video .mit-hero__art { max-width: min(340px, 34vh); order: -1; }
	.mit-hero--video { overflow-x: clip; }
	.mit-hero__shade { background: linear-gradient(180deg, rgba(20, 18, 30, .55) 0%, rgba(20, 18, 30, .82) 45%, rgba(20, 18, 30, .96) 100%); }
	.mit-scrollcue { display: none; }
	.mit-vidtoggle { bottom: 72px; }
	.mit-float--a { left: 0; }
	.mit-float--b { right: -6%; top: 62%; }
	.mit-topbar__status { display: none; }
	.mit-topbar__inner { justify-content: center; }
}

@media (max-width: 640px) {
	body { font-size: 15.5px; }
	.mit-header__inner { min-height: 66px; }
	.mit-logo img { height: 44px; }
	.mit-topbar__links { gap: 14px; font-size: .74rem; }
	.mit-topbar__links a:last-child { display: none; }
	.mit-hero__art, .mit-hero--video .mit-hero__art { max-width: min(210px, 26vh); }
	.mit-hero--video .mit-chips { display: none; }
	.mit-slime { --edge: 32px; }
	/* Render the slime at 60% on phones (wider box so it still spans edge to edge) */
	.mit-slime__goo { inset: 0 -12%; transform: scale(.8); transform-origin: 50% 0; }
	.mit-slime__drip:nth-child(even) { display: none; }
	.mit-hero--video .mit-vidtoggle { top: 14px; bottom: auto; }
	.mit-hero--video .mit-hero__ctas { gap: 10px; }
	.mit-hero__inner { gap: 24px; }
	.mit-hero { padding-top: 32px; }
	.mit-float { font-size: .7rem; padding: 7px 10px; }
	.mit-float--a { left: -22%; top: 4%; }
	.mit-float--b { right: -26%; top: 64%; }
	.mit-float--c { left: -14%; bottom: 0; }
	.mit-hero__ctas .mit-btn { width: 100%; }
	.mit-ticks, .mit-form__row, .mit-process, .mit-aside, .mit-footer__grid { grid-template-columns: 1fr; }
	.mit-form > :not(.mit-form__screen) { margin-left: 18px; margin-right: 18px; }
	.mit-phero__row { flex-direction: column; gap: 16px; }
	.mit-phero--image { min-height: 300px; }
	.mit-phero__shade { background: linear-gradient(180deg, rgba(20, 18, 30, .55) 0%, rgba(20, 18, 30, .88) 55%, rgba(20, 18, 30, .97) 100%); }
	.mit-phero__ico { width: 60px; height: 60px; border-radius: 18px; }
	.mit-phero__ico .mit-icon { width: 30px; height: 30px; }
	.mit-band__ctas, .mit-band__ctas .mit-btn { width: 100%; }
	.mit-peek { width: 120px; right: 20px; }
	.mit-step { padding: 72px 18px 18px; }
	.mit-term { font-size: .75rem; }
}

@media screen and (max-width: 782px) {
	.admin-bar .mit-header { top: 46px; }
}
@media screen and (max-width: 600px) {
	.admin-bar .mit-header { top: 0; }
}