/* =====================================================================
   Think Macro — theme chrome on top of canonical tm-styles.css.
   Fixed-nav offset, logo image, dropdowns, mobile drawer, and a
   conservative responsive layer (desktop canonical look is untouched).
   ===================================================================== */

/* Header hardening — some canonical deploy pages (e.g. Analytics) ship a
   bare `nav{…}` rule in their inline <style> that bleeds onto our theme
   header. Lock our layout-critical props with !important so no page can
   override them. Values mirror tm-styles.css. */
.tm-nav {
	position: fixed !important;
	top: 0 !important; left: 0; right: 0;
	height: 84px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 0 48px !important;
	background: rgba(12,17,29,.94) !important;
	-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--teal-border) !important;
	z-index: 999 !important;
}
body { padding-top: 84px !important; }
.admin-bar .tm-nav { top: 32px !important; }
[id] { scroll-margin-top: 100px; }

/* Logo — horizontal lockup (globe mark + wordmark), enlarged */
.logo { display: flex; align-items: center; gap: 10px; }
.tm-logo-img { height: 52px; width: auto; display: block; flex-shrink: 0; }
.tm-logo-word {
	font-family: 'Montserrat', sans-serif; font-weight: 900;
	font-size: 18px; line-height: .98; letter-spacing: .04em;
	color: var(--teal) !important; text-transform: uppercase;
}
.tm-logo-word span { display: block; color: var(--white) !important; }

/* Dropdowns (canonical nav has none) */
.tm-nav .has-dd { position: relative; }
.tm-nav .dd-toggle {
	background: none; border: 0; cursor: pointer; color: var(--white);
	font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
	font-family: 'Inter', sans-serif; display: inline-flex; align-items: center; gap: 5px;
}
/* All nav text white (was grey) */
.tm-nav .nav-links a { color: var(--white) !important; }
.tm-nav .nav-links a:hover,
.tm-nav .has-dd:hover .dd-toggle,
.tm-nav .has-dd:focus-within .dd-toggle { color: var(--teal); }
/* Header CTA buttons: brighter, thicker outline */
/* Lock canonical .btn pill shape on header CTAs — some deploy pages
   (Analytics) ship a `.btn-ghost{border-radius:10px}` rule that leaks. */
.tm-nav-cta .btn {
	display: inline-flex !important; align-items: center !important;
	font-family: 'Montserrat', sans-serif !important; font-weight: 700 !important;
	font-size: 12px !important; letter-spacing: .08em !important;
	text-transform: uppercase !important;
	padding: 11px 22px !important;
	border-radius: 40px !important;
	text-decoration: none !important;
}
.tm-nav-cta .btn-teal {
	background: var(--teal) !important;
	color: var(--white) !important;
	border: 0 !important;
}
.tm-nav-cta .btn-ghost {
	background: transparent !important;
	color: #fff !important;
	border: 2.5px solid var(--teal) !important;
}

/* Analytics page content buttons use `.btn-primary` / `.btn-ghost` with
   a rectangular 10px radius. Force them to match the canonical pill
   shape used by every other page's hero + final CTA. */
.page-template-page-analytics .btn-primary,
.page-template-page-analytics .btn-ghost {
	display: inline-flex !important; align-items: center !important; gap: 7px !important;
	font-family: 'Montserrat', sans-serif !important; font-weight: 700 !important;
	font-size: 14px !important; letter-spacing: .08em !important;
	text-transform: uppercase !important;
	padding: 12px 26px !important;
	border-radius: 40px !important;
	text-decoration: none !important;
}
.page-template-page-analytics .btn-primary {
	background: var(--teal) !important;
	color: var(--navy) !important;
	border: 0 !important;
}
.page-template-page-analytics .btn-ghost {
	background: transparent !important;
	color: #fff !important;
	border: 3px solid var(--teal) !important;
}
/* Analytics .feat-h3 and .cta-banner h2 don't declare a color, so they
   fall back to Kadence parent theme's dark heading color. Force white;
   the inner <em> keeps its teal gradient via its own text-fill rules. */
.page-template-page-analytics .feat-h3,
.page-template-page-analytics .cta-banner h2 {
	color: var(--white) !important;
}

/* Ingage page — same fallback-to-Kadence-dark issue on three headings.
   Each class only defines its inner <em> teal-gradient (so the em stays
   visible); the surrounding heading text has no color and renders dark. */
.page-template-page-ingage .ig-h1,
.page-template-page-ingage .pk-feat-h3,
.page-template-page-ingage .ig-cta-inner h2 {
	color: var(--white) !important;
}

/* Sticky requires no `overflow: hidden` ancestor. tm-styles.css sets
   body{overflow-x:hidden}, and the Ingage deploy CSS sets the same on
   .ingage-page — both kill position:sticky. Swap to overflow-x: clip
   (still prevents horizontal scroll but doesn't create a scroll context). */
body.page-template-page-ingage,
.page-template-page-ingage .ingage-page {
	overflow-x: clip !important;
	overflow-y: visible !important;
}

/* =====================================================================
   Ingage — "Six build types" → animated tabbed section.
   JS converts .build-grid into a tab bar (sliding pill behind active)
   plus a content panel that fades+slides+blurs cards on tab change.
   ===================================================================== */
.page-template-page-ingage .build-grid.tm-tabs {
	display: flex !important;
	flex-direction: column !important;
	grid-template-columns: none !important;
	gap: 10px !important;
	margin: 56px auto 0 !important;
	width: 100%;
	max-width: 1080px;
}

/* ---- Tab bar — 3 × 2 grid so the 6 options sit evenly. ---- */
.page-template-page-ingage .tm-tabs__bar {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	padding: 6px;
	background: rgba(15, 24, 37, 0.6);
	border: 1px solid rgba(65,190,176,.18);
	border-radius: 14px;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.page-template-page-ingage .tm-tabs__pill {
	position: absolute;
	left: 0; top: 0; width: 0; height: 0;
	background: rgba(65,190,176,.16);
	border: 1px solid rgba(65,190,176,.55);
	border-radius: 10px;
	pointer-events: none;
	box-shadow: 0 0 24px rgba(65,190,176,.18);
	transition: left .35s cubic-bezier(.22,.61,.36,1),
	            top  .35s cubic-bezier(.22,.61,.36,1),
	            width  .35s cubic-bezier(.22,.61,.36,1),
	            height .35s cubic-bezier(.22,.61,.36,1);
	z-index: 0;
}
.page-template-page-ingage .tm-tabs__btn {
	position: relative;
	z-index: 1;
	background: transparent;
	border: 1px solid rgba(65,190,176,.22);
	cursor: pointer;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 12.5px;
	letter-spacing: .02em;
	color: rgba(255,255,255,.78);
	padding: 11px 14px;
	border-radius: 10px;
	text-align: center;
	line-height: 1.25;
	transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.page-template-page-ingage .tm-tabs__btn:hover {
	color: var(--white);
	border-color: rgba(65,190,176,.45);
}
.page-template-page-ingage .tm-tabs__btn.is-active {
	color: var(--white);
	border-color: rgba(65,190,176,.6);
}
.page-template-page-ingage .tm-tabs__label { position: relative; z-index: 1; }

@media (max-width: 560px) {
	.page-template-page-ingage .tm-tabs__bar { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Content panel — teal-tinted illumination for contrast against the page bg ---- */
.page-template-page-ingage .tm-tabs__panel {
	position: relative;
	background:
		radial-gradient(120% 80% at 0% 0%, rgba(65,190,176,.16), transparent 55%),
		linear-gradient(135deg, rgba(65,190,176,.10) 0%, rgba(15, 24, 37, .92) 70%);
	border: 1px solid rgba(65,190,176,.32);
	border-radius: 18px;
	padding: 40px 44px;
	min-height: 320px;
	overflow: hidden;
	box-shadow:
		0 0 60px rgba(65,190,176,.08),
		0 32px 80px rgba(0,0,0,.45),
		inset 0 1px 0 rgba(255,255,255,.04);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.page-template-page-ingage .tm-tabs__panel .build-card {
	position: absolute;
	inset: 40px 44px;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	opacity: 0;
	pointer-events: none;
	transform: translateX(-10px) scale(.97);
	filter: blur(10px);
	transition: opacity .45s cubic-bezier(.22,.61,.36,1),
	            transform .45s cubic-bezier(.22,.61,.36,1),
	            filter   .45s cubic-bezier(.22,.61,.36,1);
}
.page-template-page-ingage .tm-tabs__panel .build-card.is-active {
	opacity: 1;
	pointer-events: auto;
	transform: translateX(0) scale(1);
	filter: blur(0);
}
.page-template-page-ingage .tm-tabs__panel .build-card-icon {
	width: 56px !important; height: 56px !important;
	border-radius: 14px !important;
	margin-bottom: 20px !important;
}
.page-template-page-ingage .tm-tabs__panel .build-card-icon svg {
	width: 28px; height: 28px;
}
.page-template-page-ingage .tm-tabs__panel .build-card-title {
	font-size: 26px !important;
	margin-bottom: 14px !important;
	line-height: 1.2 !important;
}
.page-template-page-ingage .tm-tabs__panel .build-card-desc {
	font-size: 16px !important;
	line-height: 1.65 !important;
}
.page-template-page-ingage .tm-tabs__panel .build-card-tag {
	font-size: 12px !important;
	margin-top: 18px !important;
}

@media (max-width: 700px) {
	.page-template-page-ingage .tm-tabs__btn { font-size: 12px; padding: 8px 12px; }
	.page-template-page-ingage .tm-tabs__panel { padding: 26px 22px; min-height: 360px; }
	.page-template-page-ingage .tm-tabs__panel .build-card { inset: 26px 22px; }
	.page-template-page-ingage .tm-tabs__panel .build-card-title { font-size: 22px !important; }
	.page-template-page-ingage .tm-tabs__panel .build-card-desc  { font-size: 15px !important; }
}

/* =====================================================================
   Ingage — "What your brand looks like" scroll-stack cards.
   The section heading sticks below the nav so the title/subtitle stay
   visible the whole time. Each card lives in its own sticky pin BELOW
   the heading. Cards scale down toward targetScale = 1 - (N-i)*0.05 as
   you scroll, with a small per-card top offset so earlier tops peek.
   ===================================================================== */
.page-template-page-ingage .tm-showcase-section {
	position: relative;
}
.page-template-page-ingage .tm-showcase-section .ig-head-center {
	position: sticky;
	top: 84px;
	z-index: 5;
	margin-bottom: 0 !important;
	padding-bottom: 12px;
	will-change: transform;
}

.page-template-page-ingage .showcase-grid.tm-stack {
	display: block !important;
	grid-template-columns: none !important;
	gap: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0;
}
.page-template-page-ingage .tm-show-pin {
	position: sticky;
	/* --tm-show-pin-top is set by JS from the measured heading height. */
	top: var(--tm-show-pin-top, 240px);
	height: calc(100vh - var(--tm-show-pin-top, 240px) - 24px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 24px;
	box-sizing: border-box;
}
.page-template-page-ingage .tm-show-pin .showcase-card {
	position: relative !important;
	top: calc(var(--i, 0) * 14px);
	transform: scale(var(--scale, 1));
	transform-origin: top center;
	width: min(72vw, 940px);
	max-height: calc(100vh - var(--tm-show-pin-top, 240px) - 64px);
	margin: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden;
	box-shadow: 0 28px 64px rgba(0,0,0,.55), 0 0 0 1px rgba(65,190,176,.2);
	will-change: transform;
}
.page-template-page-ingage .tm-show-pin .showcase-card:hover {
	transform: scale(var(--scale, 1)) !important;
}
.page-template-page-ingage .tm-show-pin .showcase-img-wrap {
	flex: 1;
	min-height: 0;
	overflow: hidden;
	position: relative;
}
.page-template-page-ingage .tm-show-pin .showcase-img-wrap img {
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: cover;
	display: block;
}
.page-template-page-ingage .tm-show-pin .showcase-chrome { flex-shrink: 0; }
.page-template-page-ingage .tm-show-pin .showcase-footer {
	flex-shrink: 0;
	padding: 16px 22px !important;
}
.page-template-page-ingage .tm-show-pin .showcase-client     { font-size: 17px !important; }
.page-template-page-ingage .tm-show-pin .showcase-build-type { font-size: 13px !important; }

@media (max-width: 700px) {
	.page-template-page-ingage .tm-showcase-section .ig-head-center {
		top: 76px;
		padding-bottom: 10px;
	}
	.page-template-page-ingage .tm-show-pin .showcase-card {
		width: 92vw;
		top: calc(var(--i, 0) * 10px);
	}
}

/* AI ROI Audit — full-bleed iframe of the Next.js app */
.tm-audit { background: var(--navy); }
.tm-audit__frame-wrap {
	position: relative;
	width: 100%;
	min-height: calc(100vh - 84px);
	background: var(--navy);
}
.tm-audit__frame {
	display: block;
	width: 100%;
	height: 100%;
	min-height: calc(100vh - 84px);
	border: 0;
	background: var(--navy);
}
.tm-audit__noscript {
	max-width: 720px; margin: 4rem auto; padding: 0 24px;
	text-align: center; color: var(--mist);
}
@media (max-width: 860px) {
	.tm-audit__frame-wrap, .tm-audit__frame { min-height: calc(100vh - 76px); }
}
.tm-nav .dd-menu {
	list-style: none; margin: 0; padding: 8px;
	position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(6px);
	min-width: 210px; background: #0F1825; border: 1px solid var(--teal-border);
	border-radius: 12px; opacity: 0; visibility: hidden; transition: .15s;
}
.tm-nav .has-dd:hover .dd-menu,
.tm-nav .has-dd:focus-within .dd-menu,
.tm-nav .dd-menu.is-open { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.tm-nav .dd-menu a {
	display: block; padding: 9px 12px; border-radius: 7px;
	font-size: 11px; letter-spacing: .06em; color: var(--mist); text-transform: none;
}
.tm-nav .dd-menu a:hover { background: rgba(65,190,176,.12); color: var(--teal); }

/* Hamburger */
.tm-nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.tm-burger, .tm-burger::before, .tm-burger::after {
	display: block; width: 24px; height: 2px; background: var(--white); transition: .2s; position: relative;
}
.tm-burger::before, .tm-burger::after { content: ''; position: absolute; left: 0; }
.tm-burger::before { top: -7px; } .tm-burger::after { top: 7px; }
.tm-nav-toggle[aria-expanded="true"] .tm-burger { background: transparent; }
.tm-nav-toggle[aria-expanded="true"] .tm-burger::before { top: 0; transform: rotate(45deg); }
.tm-nav-toggle[aria-expanded="true"] .tm-burger::after { top: 0; transform: rotate(-45deg); }

/* Footer brand row (extends canonical footer) */
.tm-foot-brand { display: flex; align-items: center; gap: 14px; }
.tm-foot-tag { font-size: 11px; color: var(--steel); max-width: 360px; }

/* ---- Responsive: keep desktop canonical, make phones usable ---- */
@media (max-width: 1024px) {
	.tm-nav { padding: 0 24px !important; }
	.tm-nav-toggle { display: block; }
	.tm-nav .nav-links {
		position: fixed; inset: 68px 0 auto 0; flex-direction: column; align-items: stretch;
		gap: 0; background: #0b1019; border-bottom: 1px solid var(--teal-border);
		padding: 8px 24px 24px; max-height: 0; overflow: hidden; transition: max-height .25s ease;
	}
	.tm-nav .nav-links.is-open { max-height: 85vh; overflow-y: auto; }
	.tm-nav .nav-links > li { border-bottom: 1px solid rgba(58,66,82,.35); }
	.tm-nav .nav-links a, .tm-nav .dd-toggle { padding: 14px 0; width: 100%; font-size: 12px; }
	.tm-nav .dd-menu {
		position: static; transform: none; opacity: 1; visibility: visible;
		background: none; border: 0; padding: 0 0 8px 12px; min-width: 0;
		max-height: 0; overflow: hidden; transition: max-height .2s ease;
	}
	.tm-nav .dd-menu.is-open { max-height: 320px; }
	.tm-nav-cta { display: flex; gap: 10px; margin-top: 14px; }
	.tm-nav-cta .btn { flex: 1; justify-content: center; }
}

/* Canonical grids/typography were desktop-only; stop overflow on small screens. */
@media (max-width: 860px) {
	.hero-grid, .win-card, .win-stats,
	[class*="-grid"] { grid-template-columns: 1fr !important; gap: 32px !important; }
	.hero h1 { font-size: 38px !important; }
	.section-h2, .cta-sec h2 { font-size: 30px !important; }
	.container { padding: 0 22px !important; }
	.cta-sec { padding: 72px 0 !important; }
	img, table { max-width: 100%; height: auto; }
	.footer-inner { flex-direction: column; gap: 16px; text-align: center; }
}

/* =====================================================================
   Hero overrides (all pages). Canonical inline <style> loads after this,
   so !important is required. Tighten top space ~1in; text +50%; visual +25%.
   ===================================================================== */
.hero {
	min-height: auto !important;
	padding-top: 28px !important;
	padding-bottom: 64px !important;
	overflow: visible !important;
}
.hero .container { width: 100%; }
.hero-grid { gap: 48px !important; align-items: center !important; }
/* Hero H1 unified across home + service pages. 56px cap fits the homepage
   typewriter ("AI Automations" without wrapping) and matches visually. */
.hero h1 { font-size: clamp(2rem, 3.6vw + .4rem, 56px) !important; line-height: 1.08 !important; }
/* Homepage: "Completely done for you" in white, not teal */
.home .hero h1 em { color: var(--white) !important; }
.tw-line { white-space: nowrap; }
.hero p { font-size: 24px !important; line-height: 1.7 !important; max-width: 620px !important; }
.hero .badge { padding: 8px 18px 8px 14px !important; margin-bottom: 26px !important; }
.hero .badge span { font-size: 15px !important; }
.hero-ctas { gap: 18px !important; }
.hero-ctas .btn,
.cta-btns .btn,
.cta-sec .btn {
	font-size: 14px !important;
	padding: 12px 26px !important;
	white-space: nowrap !important;
}
.hero-ctas .btn-ghost,
.cta-btns .btn-ghost,
.cta-sec .btn-ghost { border: 3px solid var(--teal) !important; color: #fff !important; }
/* Visual elements ~25% larger (service pages). */
.hero-grid > :last-child { transform: scale(1.25); transform-origin: center center; }
.hero-widget { height: 560px !important; }
/* Homepage hero holds the LeadConnector voice orb — don't transform-scale a
   live canvas (blurs it); let the widget size itself, just center it. */
.home .hero-grid > :last-child { transform: none; }
.home .hero-widget { height: auto !important; }

/* Homepage typewriter */
.tw { color: var(--teal); }
.tw::after {
	content: ''; display: inline-block; width: 3px; height: 1em;
	background: var(--teal); margin-left: 4px; vertical-align: -0.12em;
	animation: tw-blink 1s steps(1) infinite;
}
.tw.tw-done::after { animation: none; opacity: 0; }
@keyframes tw-blink { 50% { opacity: 0; } }

/* LeadConnector voice-orb embed slot — ~40% larger, nudged right.
   (CSS scale on a live canvas is slightly soft; for crisp scaling bump
   --orb-size-scale in the GHL widget settings instead.) */
.tm-voice-orb {
	width: 100%; min-height: 560px;
	display: flex; align-items: center; justify-content: flex-end;
}
.tm-voice-orb chat-widget {
	display: block;
	transform: translateX(36px) scale(1.4);
	transform-origin: center center;
}

/* Calendar embed in final CTA sections */
.tm-calendar-embed {
	max-width: 640px;
	margin: 0 auto 28px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--slate);
}
.tm-calendar-embed iframe {
	display: block;
	min-height: 600px;
}
.tm-cta-audit {
	text-align: center;
}
.tm-cta-audit .btn {
	min-width: 260px;
	text-align: center;
	display: inline-block;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 14px 40px;
	border-radius: 40px;
	text-decoration: none;
	border: 2.5px solid var(--teal);
	color: var(--white);
	background: transparent;
	transition: background .2s, color .2s;
}
.tm-cta-audit .btn:hover {
	background: var(--teal);
	color: var(--navy);
}

/* Legal pages (Privacy Policy, Terms & Conditions) */
.legal-page {
	background: var(--navy);
	color: var(--white);
	padding: 80px 0 100px;
}
.legal-wrap {
	max-width: 780px;
	margin: 0 auto;
	padding: 0 24px;
}
.legal-wrap h1 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 800;
	font-size: 36px;
	line-height: 1.2;
	margin-bottom: 8px;
}
.legal-updated {
	color: var(--steel);
	font-size: 13px;
	margin-bottom: 40px;
}
.legal-wrap h2 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 1.3;
	margin: 40px 0 12px;
	color: var(--teal);
}
.legal-wrap h3 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 17px;
	margin: 24px 0 8px;
}
.legal-wrap p,
.legal-wrap li {
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	line-height: 1.7;
	color: var(--mist);
}
.legal-wrap a {
	color: var(--teal);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.legal-wrap a:hover { color: var(--white); }
.legal-wrap ul {
	padding-left: 24px;
	margin: 12px 0;
}
.legal-wrap li {
	margin-bottom: 6px;
}
.legal-wrap strong {
	color: var(--white);
}

@media (prefers-reduced-motion: reduce) {
	.tw::after { animation: none; }
}
@media (max-width: 860px) {
	.hero-grid > :last-child { transform: none; }
	.hero p { font-size: 19px !important; }
	.hero-widget { height: auto !important; }
	.tm-voice-orb { min-height: 360px; justify-content: center; }
	.tm-voice-orb chat-widget { transform: scale(1.1); }
}

/* =====================================================================
   404 / Under Construction page
   ===================================================================== */
.tm-404-hero {
	min-height: calc(100vh - 84px);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 80px 0;
	position: relative;
	overflow: hidden;
}
.tm-404-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at center, rgba(65,190,176,.06) 0%, transparent 60%);
	pointer-events: none;
}
.tm-404-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	z-index: 1;
}

/* Globe with glow */
.tm-404-globe-wrap {
	position: relative;
	margin-bottom: 36px;
}
.tm-404-globe {
	width: 160px;
	height: auto;
	opacity: .25;
	animation: tm-404-float 6s ease-in-out infinite;
}
.tm-404-glow {
	position: absolute;
	inset: -40%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(65,190,176,.12) 0%, transparent 65%);
	pointer-events: none;
	animation: tm-404-pulse 4s ease-in-out infinite;
}
@keyframes tm-404-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-12px); }
}
@keyframes tm-404-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: .6; transform: scale(1.1); }
}

.tm-404-hero .section-label { margin-bottom: 24px; }
.tm-404-hero .section-h2 { margin-bottom: 20px; }

.tm-404-sub {
	font-size: 17px;
	color: var(--steel);
	line-height: 1.75;
	max-width: 520px;
	margin-bottom: 40px;
}
.tm-404-ctas {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}
.tm-404-ctas .btn {
	font-size: 14px !important;
	padding: 12px 26px !important;
}
.tm-404-ctas .btn-ghost {
	border: 2.5px solid var(--teal) !important;
	color: #fff !important;
}
.tm-404-trust {
	display: flex;
	gap: 28px;
	margin-top: 48px;
	flex-wrap: wrap;
	justify-content: center;
}
.tm-404-trust span {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	color: var(--steel);
}
.tm-404-trust span::before {
	content: '';
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--teal);
	box-shadow: 0 0 6px rgba(65,190,176,.9);
	flex-shrink: 0;
}

@media (max-width: 860px) {
	.tm-404-hero { padding: 48px 0; min-height: calc(100vh - 76px); }
	.tm-404-globe { width: 120px; }
	.tm-404-sub { font-size: 15px; }
	.tm-404-trust { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.tm-404-globe { animation: none; }
	.tm-404-glow { animation: none; }
}