@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=DM+Sans:wght@400;500;600;700;800&display=swap");
:root {
	--red: #f21f3b;
	--red2: #bd0925;
	--ink: #101014;
	--paper: #f5f0e6;
	--white: #fffdf7;
	--blue: #bde8f5;
	--lime: #74e7d1;
	--line: 3px solid var(--ink);
	--shadow: 7px 7px 0 var(--ink);
	--font-head: "Barlow Condensed", Impact, sans-serif;
	--font-body: "DM Sans", Arial, sans-serif;
}
* {
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
}
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	overflow-x: hidden;
}
body:before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 10;
	opacity: 0.08;
	background-image: radial-gradient(#111 0.65px, transparent 0.65px);
	background-size: 5px 5px;
	mix-blend-mode: multiply;
}
.wrap {
	width: min(1240px, calc(100% - 36px));
	margin: auto;
}
.topline {
	background: var(--red);
	border-bottom: var(--line);
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 7px 0;
}
.topline .wrap {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}
.header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--paper);
	border-bottom: var(--line);
}
.nav {
	min-height: 76px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.logo img {
	display: block;
	width: 175px;
	max-height: 56px;
	object-fit: contain;
}
.links {
	display: flex;
	align-items: center;
	gap: 22px;
}
.links a {
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ink);
	position: relative;
}
.links a:after {
	content: "";
	height: 3px;
	background: var(--red);
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -7px;
	transition: right 0.25s;
}
.links a:hover:after,
.links a.active:after {
	right: 0;
}
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	background: var(--red);
	border: var(--line);
	box-shadow: 4px 4px 0 var(--ink);
	padding: 12px 18px;
	color: white;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 900;
	font-size: 12px;
	letter-spacing: 0.03em;
	transform: skew(-4deg);
	transition:
		transform 0.2s,
		box-shadow 0.2s,
		background 0.2s;
}
.button:hover {
	transform: skew(-4deg) translate(3px, 3px);
	box-shadow: 1px 1px 0 var(--ink);
	background: var(--red2);
}
.menu-btn {
	display: none;
	background: var(--red);
	border: var(--line);
	font-size: 23px;
	padding: 4px 12px;
}
.hero {
	background: var(--ink);
	color: var(--white);
	border-bottom: var(--line);
	position: relative;
	overflow: hidden;
	min-height: 570px;
	display: flex;
	align-items: center;
}
.hero:before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		circle at 76% 44%,
		#f21f3b 0 1px,
		transparent 2px
	);
	background-size: 13px 13px;
	opacity: 0.18;
	mask-image: linear-gradient(90deg, transparent 20%, black 100%);
}
.hero:after {
	content: "POW!";
	position: absolute;
	right: -10px;
	top: 4px;
	font: 900 clamp(90px, 18vw, 250px) / 0.8 var(--font-head);
	color: transparent;
	-webkit-text-stroke: 2px #ffffff12;
	transform: rotate(-8deg);
	pointer-events: none;
}
.hero-grid {
	display: grid;
	grid-template-columns: 1fr 0.9fr;
	align-items: center;
	gap: 10px;
	position: relative;
	z-index: 1;
	padding: 42px 0 35px;
}
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.eyebrow:before {
	content: "";
	width: 23px;
	height: 4px;
	background: var(--red);
}
h1,
h2,
h3,
p {
	margin-top: 0;
}
.hero h1 {
	font: 900 clamp(64px, 9.5vw, 138px) / 0.78 var(--font-head);
	letter-spacing: -0.045em;
	text-transform: uppercase;
	margin: 20px 0 24px;
	max-width: 760px;
}
.hero h1 span {
	color: var(--red);
	display: inline-block;
	transform: skew(-5deg) rotate(-2deg);
	text-shadow: 4px 4px 0 #fff;
}
.hero-copy p {
	font-size: 16px;
	line-height: 1.55;
	max-width: 420px;
	color: #ddd;
}
.hero-art {
	align-self: end;
	position: relative;
	min-height: 450px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.hero-art img {
	width: min(100%, 475px);
	max-height: 500px;
	object-fit: contain;
	filter: drop-shadow(12px 8px 0 var(--red));
	transform-origin: bottom center;
	animation: heroPop 0.9s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.speech {
	position: absolute;
	right: 0;
	top: 40px;
	background: var(--paper);
	color: var(--ink);
	border: var(--line);
	padding: 13px 17px;
	max-width: 160px;
	font: 900 20px/0.95 var(--font-head);
	text-transform: uppercase;
	transform: rotate(7deg);
	box-shadow: 4px 4px 0 var(--red);
}
.speech:after {
	content: "";
	position: absolute;
	bottom: -17px;
	left: 22px;
	border-width: 17px 15px 0 0;
	border-style: solid;
	border-color: var(--ink) transparent transparent transparent;
}
.hero-foot {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	margin-top: 26px;
}
.stats {
	display: flex;
	gap: 0;
	margin-top: 25px;
	border-top: 1px solid #ffffff45;
	padding-top: 16px;
	max-width: 550px;
}
.stat {
	padding: 0 22px;
	border-right: 1px solid #ffffff45;
}
.stat:first-child {
	padding-left: 0;
}
.stat:last-child {
	border: 0;
}
.stat b {
	display: block;
	color: var(--red);
	font: 900 32px/0.9 var(--font-head);
}
.stat span {
	display: block;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-top: 6px;
	color: #ddd;
}
.ticker {
	overflow: hidden;
	background: var(--red);
	border-bottom: var(--line);
	white-space: nowrap;
}
.ticker-track {
	display: flex;
	width: max-content;
	animation: marquee 28s linear infinite;
}
.ticker span {
	font: 900 21px var(--font-head);
	text-transform: uppercase;
	padding: 11px 25px;
}
.ticker span:after {
	content: "✦";
	padding-left: 35px;
	color: var(--ink);
}
.section {
	padding: 68px 0;
	border-bottom: var(--line);
	position: relative;
}
.section.dark {
	background: var(--ink);
	color: var(--white);
}
.section.blue {
	background: var(--blue);
}
.section.red {
	background: var(--red);
}
.section-head {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 30px;
	margin-bottom: 26px;
}
.section-head h2,
.page-title {
	font: 900 clamp(48px, 7vw, 88px) / 0.82 var(--font-head);
	text-transform: uppercase;
	letter-spacing: -0.035em;
	margin: 10px 0 0;
}
.section-head h2 em,
.page-title em {
	font-style: normal;
	color: var(--red);
}
.section-head p {
	max-width: 420px;
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
}
.comic-label {
	font: 900 12px var(--font-head);
	text-transform: uppercase;
	background: var(--lime);
	padding: 5px 9px;
	border: 2px solid var(--ink);
	display: inline-block;
	transform: rotate(-2deg);
}
.about-grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 28px;
	align-items: center;
}
.comic-panel {
	border: var(--line);
	background: var(--white);
	box-shadow: var(--shadow);
	position: relative;
	overflow: hidden;
}
.comic-panel:before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(#101014 1px, transparent 1.5px);
	background-size: 8px 8px;
	opacity: 0.1;
	pointer-events: none;
}
.about-art {
	min-height: 310px;
	background: var(--blue);
	display: flex;
	align-items: end;
	justify-content: center;
	overflow: hidden;
}
.about-art img {
	width: 70%;
	max-height: 350px;
	object-fit: contain;
	filter: drop-shadow(6px 4px 0 var(--ink));
	transition: transform 0.45s;
}
.about-art:hover img {
	transform: translateY(-8px) rotate(-3deg) scale(1.04);
}
.panel-copy {
	padding: 25px;
	position: relative;
}
.panel-copy h3 {
	font: 900 36px/0.9 var(--font-head);
	text-transform: uppercase;
	margin: 12px 0;
}
.panel-copy p {
	font-size: 13px;
	line-height: 1.6;
}
.mini-burst {
	position: absolute;
	right: 15px;
	top: 15px;
	background: var(--red);
	color: white;
	clip-path: polygon(
		50% 0%,
		61% 31%,
		92% 8%,
		75% 42%,
		100% 50%,
		73% 62%,
		91% 91%,
		60% 73%,
		50% 100%,
		39% 71%,
		9% 91%,
		27% 61%,
		0 50%,
		28% 39%,
		9% 9%,
		40% 28%
	);
	width: 68px;
	height: 68px;
	display: grid;
	place-items: center;
	font: 900 13px var(--font-head);
	text-align: center;
	transform: rotate(10deg);
}
.service-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}
.service-card {
	min-height: 225px;
	border: var(--line);
	box-shadow: 4px 4px 0 var(--ink);
	padding: 17px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	position: relative;
	overflow: hidden;
	transition:
		transform 0.25s,
		box-shadow 0.25s;
}
.service-card:nth-child(3n + 1) {
	background: var(--white);
}
.service-card:nth-child(3n + 2) {
	background: var(--blue);
}
.service-card:nth-child(3n) {
	background: #e7d7ff;
}
.service-card:hover {
	transform: translate(-3px, -4px) rotate(-0.5deg);
	box-shadow: 8px 8px 0 var(--ink);
}
.service-card .num {
	font: 900 14px var(--font-head);
	background: var(--red);
	color: white;
	padding: 5px 8px;
	border: 2px solid var(--ink);
}
.service-card h3 {
	font: 900 30px/0.9 var(--font-head);
	text-transform: uppercase;
	margin: 18px 0 9px;
	max-width: 230px;
}
.service-card p {
	font-size: 12px;
	line-height: 1.5;
	margin: 0;
	max-width: 260px;
}
.service-card .card-arrow {
	position: absolute;
	right: 15px;
	bottom: 12px;
	font-size: 28px;
	font-weight: 900;
	transition: transform 0.2s;
}
.service-card:hover .card-arrow {
	transform: translate(4px, -4px);
}
.process {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}
.step {
	border: var(--line);
	background: var(--paper);
	padding: 17px;
	min-height: 150px;
	position: relative;
}
.step b {
	display: block;
	font: 900 38px/0.9 var(--font-head);
	color: var(--red);
}
.step h3 {
	font: 900 23px var(--font-head);
	text-transform: uppercase;
	margin: 16px 0 6px;
}
.step p {
	font-size: 12px;
	margin: 0;
	line-height: 1.5;
}
.step:not(:last-child):after {
	content: "➜";
	position: absolute;
	right: -19px;
	top: 50%;
	z-index: 2;
	background: var(--red);
	border: 2px solid var(--ink);
	width: 27px;
	height: 27px;
	display: grid;
	place-items: center;
	font-size: 14px;
}
.character-strip {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}
.character-card {
	border: var(--line);
	background: var(--white);
	display: grid;
	grid-template-columns: 0.9fr 1fr;
	align-items: end;
	min-height: 190px;
	overflow: hidden;
	position: relative;
}
.character-card:nth-child(2) {
	background: var(--blue);
}
.character-card:nth-child(3) {
	background: #e7d7ff;
}
.character-card img {
	width: 100%;
	height: 200px;
	object-fit: contain;
	object-position: bottom;
	transition: transform 0.35s;
	filter: drop-shadow(3px 3px 0 #101014);
}
.character-card:hover img {
	transform: translateY(-8px) rotate(-4deg);
}
.character-card div {
	padding: 16px 12px 20px 0;
}
.character-card h3 {
	font: 900 27px/0.9 var(--font-head);
	text-transform: uppercase;
	margin: 8px 0;
}
.character-card p {
	font-size: 11px;
	line-height: 1.5;
	margin: 0;
}
.work-grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr 0.85fr;
	gap: 12px;
}
.work-card {
	min-height: 250px;
	border: var(--line);
	box-shadow: 4px 4px 0 var(--ink);
	position: relative;
	overflow: hidden;
	padding: 18px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: var(--red);
	color: white;
}
.work-card:nth-child(2) {
	background: var(--blue);
	color: var(--ink);
}
.work-card:nth-child(3) {
	background: #e7d7ff;
	color: var(--ink);
}
.work-card:nth-child(4) {
	background: var(--white);
	color: var(--ink);
}
.work-card:nth-child(5) {
	background: #15151a;
	color: white;
}
.work-card .scribble {
	font: 900 clamp(38px, 5vw, 66px) / 0.8 var(--font-head);
	text-transform: uppercase;
	max-width: 250px;
	position: relative;
	z-index: 1;
}
.work-card .tag {
	font-size: 10px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	position: relative;
	z-index: 1;
}
.work-card .decor {
	position: absolute;
	right: -20px;
	bottom: -30px;
	font: 900 180px/0.8 var(--font-head);
	opacity: 0.13;
	transform: rotate(-12deg);
}
.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}
.blog-card {
	border: var(--line);
	background: var(--white);
	box-shadow: 4px 4px 0 var(--ink);
	transition: transform 0.25s;
}
.blog-card:hover {
	transform: translateY(-5px) rotate(-0.3deg);
}
.blog-art {
	height: 130px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: var(--line);
	background: var(--blue);
	overflow: hidden;
}
.blog-card:nth-child(2) .blog-art {
	background: #e7d7ff;
}
.blog-card:nth-child(3) .blog-art {
	background: var(--red);
}
.blog-art img {
	height: 150px;
	width: 55%;
	object-fit: contain;
	filter: drop-shadow(3px 3px 0 var(--ink));
	transition: transform 0.35s;
}
.blog-card:hover img {
	transform: scale(1.1) rotate(3deg);
}
.blog-copy {
	padding: 17px;
}
.blog-copy small {
	font-size: 10px;
	font-weight: 900;
	text-transform: uppercase;
	color: var(--red);
}
.blog-copy h3 {
	font: 900 27px/0.92 var(--font-head);
	text-transform: uppercase;
	margin: 9px 0;
}
.blog-copy p {
	font-size: 12px;
	line-height: 1.5;
}
.text-link {
	font-size: 11px;
	font-weight: 900;
	text-transform: uppercase;
	color: var(--ink);
	text-decoration: none;
	border-bottom: 2px solid var(--red);
	padding-bottom: 3px;
}
.cta-band {
	background: var(--red);
	border-block: var(--line);
	padding: 38px 0;
}
.cta-band .wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 25px;
}
.cta-band h2 {
	font: 900 clamp(38px, 6vw, 72px) / 0.82 var(--font-head);
	text-transform: uppercase;
	margin: 0;
}
.cta-band .button {
	background: var(--ink);
	color: white;
	border-color: var(--ink);
	box-shadow: 4px 4px 0 var(--paper);
}
.page-hero {
	background: var(--ink);
	color: white;
	padding: 52px 0 42px;
	position: relative;
	overflow: hidden;
	border-bottom: var(--line);
}
.page-hero .wrap {
	position: relative;
	z-index: 1;
}
.page-hero .page-title {
	font-size: clamp(60px, 10vw, 120px);
	max-width: 900px;
	margin: 14px 0 18px;
}
.page-hero p {
	max-width: 560px;
	font-size: 15px;
	line-height: 1.6;
	color: #ddd;
}
.page-hero .hero-doodle {
	position: absolute;
	right: 0;
	top: -65px;
	width: 360px;
	opacity: 0.95;
	transform: rotate(5deg);
	filter: drop-shadow(8px 5px 0 var(--red));
	pointer-events: none;
}
.about-facts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border: var(--line);
	background: var(--ink);
	color: white;
	margin-top: 25px;
}
.fact {
	padding: 19px;
	border-right: 1px solid #555;
}
.fact:last-child {
	border: 0;
}
.fact strong {
	font: 900 36px var(--font-head);
	color: var(--red);
	display: block;
}
.fact span {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
.timeline {
	border-left: 4px solid var(--red);
	padding-left: 25px;
	display: grid;
	gap: 18px;
}
.timeline article {
	border: var(--line);
	background: var(--white);
	padding: 18px;
	box-shadow: 4px 4px 0 var(--ink);
}
.timeline h3 {
	font: 900 27px var(--font-head);
	text-transform: uppercase;
	margin: 0 0 5px;
}
.timeline p {
	font-size: 13px;
	line-height: 1.5;
	margin: 0;
}
.contact-layout {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 20px;
}
.contact-card {
	border: var(--line);
	padding: 24px;
	background: var(--blue);
	box-shadow: var(--shadow);
}
.contact-card h3 {
	font: 900 36px/0.9 var(--font-head);
	text-transform: uppercase;
}
.contact-row {
	padding: 13px 0;
	border-top: 2px solid #10101430;
	font-size: 13px;
	font-weight: 700;
	overflow-wrap: anywhere;
}
.contact-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	border: var(--line);
	background: var(--white);
	padding: 22px;
	box-shadow: var(--shadow);
}
.contact-form-shell {
	min-width: 0;
}
.contact-form-status {
	margin-bottom: 14px;
	padding: 14px 16px;
	border: var(--line);
	font-size: 13px;
	font-weight: 800;
	line-height: 1.5;
}
.contact-form-status--success {
	background: #e4f8e8;
	color: #145c2a;
}
.contact-form-status--error {
	background: #fff0e8;
	color: #8a281b;
}
.contact-form button:disabled {
	cursor: wait;
	opacity: 0.7;
}
.tnx-contact-honeypot {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}
.field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.field.full {
	grid-column: 1/-1;
}
.field label {
	font-size: 10px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
.field input,
.field textarea,
.field select {
	width: 100%;
	padding: 12px;
	border: 2px solid var(--ink);
	background: #fff;
	font: inherit;
	font-size: 13px;
	border-radius: 0;
}
.field textarea {
	min-height: 110px;
	resize: vertical;
}
.footer {
	background: var(--ink);
	color: white;
	padding: 38px 0 22px;
}
.footer-top {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	align-items: center;
}
.footer-logo {
	background: white;
	padding: 8px 12px;
	width: 180px;
}
.footer-logo img {
	width: 100%;
	display: block;
}
.footer-links {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
}
.footer-links a {
	color: white;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	text-decoration: none;
}
.footer-bottom {
	border-top: 1px solid #555;
	margin-top: 25px;
	padding-top: 15px;
	display: flex;
	justify-content: space-between;
	gap: 20px;
	font-size: 10px;
	color: #bbb;
}
.reveal {
	opacity: 0;
	transform: translateY(24px) scale(0.985);
	transition:
		opacity 0.65s ease,
		transform 0.65s cubic-bezier(0.2, 0.85, 0.2, 1);
}
.reveal.in-view {
	opacity: 1;
	transform: translateY(0) scale(1);
}
.reveal[data-delay="1"] {
	transition-delay: 0.08s;
}
.reveal[data-delay="2"] {
	transition-delay: 0.16s;
}
.reveal[data-delay="3"] {
	transition-delay: 0.24s;
}
.page-wipe {
	position: fixed;
	z-index: 100;
	inset: 0;
	background: var(--red);
	transform: scaleY(0);
	transform-origin: bottom;
	pointer-events: none;
}
.page-wipe.active {
	animation: wipe 0.55s cubic-bezier(0.76, 0, 0.24, 1);
}
.cursor-burst {
	position: fixed;
	z-index: 90;
	pointer-events: none;
	font: 900 22px var(--font-head);
	color: var(--red);
	text-shadow: 2px 2px var(--ink);
	animation: burst 0.55s ease-out forwards;
}
.comic-panel,
.service-card,
.work-card,
.blog-card {
	animation: inkIn 0.65s both;
}
.service-card:nth-child(2),
.work-card:nth-child(2),
.blog-card:nth-child(2) {
	animation-delay: 0.08s;
}
.service-card:nth-child(3),
.work-card:nth-child(3),
.blog-card:nth-child(3) {
	animation-delay: 0.16s;
}
@keyframes heroPop {
	0% {
		opacity: 0;
		transform: translateY(70px) rotate(8deg) scale(0.8);
	}
	100% {
		opacity: 1;
		transform: translateY(0) rotate(0) scale(1);
	}
}
@keyframes marquee {
	to {
		transform: translateX(-50%);
	}
}
@keyframes wipe {
	0% {
		transform: scaleY(0);
		transform-origin: bottom;
	}
	45% {
		transform: scaleY(1);
		transform-origin: bottom;
	}
	55% {
		transform: scaleY(1);
		transform-origin: top;
	}
	100% {
		transform: scaleY(0);
		transform-origin: top;
	}
}
@keyframes burst {
	0% {
		opacity: 1;
		transform: scale(0.5) rotate(-15deg);
	}
	100% {
		opacity: 0;
		transform: scale(1.8) rotate(18deg) translateY(-20px);
	}
}
@keyframes inkIn {
	from {
		opacity: 0;
		filter: blur(4px);
		transform: translateY(15px) rotate(-1deg);
	}
	to {
		opacity: 1;
		filter: blur(0);
		transform: translateY(0) rotate(0);
	}
}
@media (max-width: 900px) {
	.links {
		gap: 12px;
	}
	.links a {
		font-size: 11px;
	}
	.hero-grid {
		grid-template-columns: 1fr 0.8fr;
	}
	.hero-art {
		min-height: 380px;
	}
	.service-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.work-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.work-card:first-child {
		grid-row: span 2;
	}
	.character-strip {
		grid-template-columns: 1fr;
	}
	.character-card {
		min-height: 170px;
	}
	.contact-layout {
		grid-template-columns: 1fr;
	}
	.section-head {
		align-items: start;
	}
}
@media (max-width: 700px) {
	.topline .wrap span:last-child {
		display: none;
	}
	.nav {
		min-height: 66px;
	}
	.logo img {
		width: 145px;
	}
	.menu-btn {
		display: block;
	}
	.links {
		display: none;
		position: absolute;
		top: 66px;
		left: 0;
		right: 0;
		background: var(--paper);
		border-bottom: var(--line);
		padding: 16px 20px 22px;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.links.open {
		display: flex;
	}
	.links a {
		padding: 12px 0;
		border-bottom: 1px solid #10101420;
		font-size: 13px;
	}
	.nav > .button {
		display: none;
	}
	.hero {
		min-height: 0;
	}
	.hero-grid {
		grid-template-columns: 1fr;
		padding: 44px 0 22px;
	}
	.hero h1 {
		font-size: clamp(60px, 18vw, 110px);
	}
	.hero-art {
		min-height: 290px;
		max-height: 350px;
	}
	.hero-art img {
		max-height: 350px;
		width: 75%;
	}
	.speech {
		right: 3%;
		top: 10px;
		font-size: 16px;
	}
	.stats {
		justify-content: space-between;
	}
	.stat {
		padding: 0 10px;
	}
	.stat b {
		font-size: 27px;
	}
	.stat span {
		font-size: 8px;
	}
	.section {
		padding: 46px 0;
	}
	.section-head {
		display: block;
		margin-bottom: 22px;
	}
	.section-head p {
		margin-top: 15px;
	}
	.section-head h2,
	.page-title {
		font-size: clamp(48px, 14vw, 75px);
	}
	.about-grid {
		grid-template-columns: 1fr;
	}
	.service-grid {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}
	.service-card {
		min-height: 210px;
		padding: 12px;
		box-shadow: 3px 3px 0 var(--ink);
	}
	.service-card h3 {
		font-size: 25px;
	}
	.service-card p {
		font-size: 11px;
	}
	.process {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}
	.step:not(:last-child):after {
		display: none;
	}
	.work-grid,
	.blog-grid {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}
	.work-card {
		min-height: 205px;
		padding: 13px;
	}
	.work-card .scribble {
		font-size: 38px;
	}
	.work-card .decor {
		font-size: 120px;
	}
	.blog-art {
		height: 105px;
	}
	.blog-copy {
		padding: 12px;
	}
	.blog-copy h3 {
		font-size: 23px;
	}
	.page-hero {
		padding: 40px 0 30px;
	}
	.page-hero .hero-doodle {
		width: 180px;
		right: -35px;
		top: 20px;
		opacity: 0.45;
	}
	.about-facts {
		grid-template-columns: 1fr 1fr;
	}
	.fact {
		padding: 13px;
	}
	.fact strong {
		font-size: 30px;
	}
	.fact:nth-child(2) {
		border-right: 0;
	}
	.fact:nth-child(3) {
		grid-column: 1/-1;
		border-top: 1px solid #555;
	}
	.contact-form {
		grid-template-columns: 1fr;
		padding: 16px;
	}
	.field.full {
		grid-column: auto;
	}
	.footer-top {
		align-items: flex-start;
		flex-direction: column;
	}
	.footer-bottom {
		display: block;
	}
	.footer-bottom span {
		display: block;
		margin-top: 7px;
	}
	.cta-band .wrap {
		align-items: flex-start;
		flex-direction: column;
	}
	.about-art {
		min-height: 250px;
	}
}
@media (prefers-reduced-motion: reduce) {
	*,
	*:before,
	*:after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
	.reveal {
		opacity: 1;
		transform: none;
	}
}

/* Original Trainonex comic character artwork */
.hero-art img,
.page-hero img,
.hero-doodle,
.feature-art img {
	object-fit: contain;
	image-rendering: auto;
	filter: drop-shadow(5px 6px 0 rgba(15, 17, 22, 0.18));
}
.hero-art img {
	max-width: 100%;
}
.hero-doodle {
	max-width: min(100%, 330px);
	height: auto;
}
@media (max-width: 720px) {
	.hero-doodle {
		max-width: min(78vw, 270px);
	}
}

/* Reference-matched comic layout pass */
:root {
	--red: #f32640;
	--red2: #c70f2c;
	--ink: #090b0f;
	--paper: #f6f0e4;
	--white: #fffaf0;
	--blue: #d9edf5;
	--line: 2px solid var(--ink);
	--shadow: 5px 5px 0 var(--ink);
}
body:before {
	opacity: 0.045;
	background-size: 6px 6px;
}
.topline {
	display: none;
}
.header {
	background: #07090c;
	color: #fff;
	border-bottom: 2px solid #f32640;
	box-shadow: 0 5px 0 #0005;
}
.nav {
	min-height: 62px;
	gap: 16px;
}
.logo img {
	width: 150px;
	max-height: 48px;
	filter: drop-shadow(0 1px 0 #fff2);
}
.links {
	gap: clamp(10px, 1.6vw, 23px);
}
.links a {
	color: #fff;
	font-size: 10px;
	letter-spacing: 0.035em;
}
.links a:after {
	bottom: -8px;
	height: 2px;
}
.nav > .button {
	padding: 10px 15px;
	font-size: 10px;
	border: 1px solid #ff6678;
	box-shadow: 3px 3px 0 #5d0613;
	border-radius: 22px;
	transform: none;
}
.nav > .button:hover {
	transform: translate(2px, 2px);
	box-shadow: 1px 1px 0 #5d0613;
}
.hero {
	min-height: 510px;
	background: #090b0f;
	border-bottom: 3px solid var(--ink);
}
.hero:before {
	opacity: 0.75;
	background-image:
		radial-gradient(circle at 78% 20%, #f32640 0 1px, transparent 2px),
		linear-gradient(120deg, transparent 42%, #163349 42.2%, transparent 63%),
		repeating-linear-gradient(
			165deg,
			transparent 0 36px,
			#fff08 37px,
			transparent 39px
		);
	background-size:
		18px 18px,
		auto,
		auto;
}
.hero-grid {
	grid-template-columns: 1.03fr 0.97fr;
	gap: 0;
	padding: 28px 0 18px;
	min-height: 510px;
}
.hero-copy {
	padding: 16px 0 0;
	position: relative;
	z-index: 2;
}
.eyebrow {
	font-size: 10px;
	letter-spacing: 0.12em;
}
.hero h1 {
	font-size: clamp(76px, 10.4vw, 142px);
	line-height: 0.72;
	letter-spacing: -0.045em;
	margin: 18px 0 22px;
	text-shadow: 3px 3px 0 #000;
}
.hero h1 span {
	color: var(--red);
	text-shadow: 4px 4px 0 #5e0714;
}
.hero-copy p {
	font-size: 13px;
	max-width: 340px;
	color: #f4eee4;
}
.hero-foot {
	gap: 20px;
	margin-top: 20px;
}
.hero-foot .button {
	border-radius: 22px;
	border: 1px solid #ff687c;
	box-shadow: 3px 3px 0 #650719;
	transform: none;
}
.hero-art {
	min-height: 410px;
	align-self: stretch;
	overflow: visible;
}
.hero-art img {
	width: min(112%, 540px);
	max-height: 460px;
	object-fit: contain;
	filter: drop-shadow(8px 6px 0 var(--red));
	transform: translateX(5%);
}
.speech {
	border: 2px solid var(--ink);
	box-shadow: 3px 3px 0 var(--red);
	border-radius: 48% 48% 42% 42%;
	font-size: 13px;
	padding: 15px 18px;
	top: 8%;
	right: -2%;
	max-width: 160px;
}
.stats {
	border-top: 1px solid #fff5;
	margin-top: 20px;
	padding-top: 14px;
	gap: 12px;
}
.stat {
	padding: 0 14px 0 0;
	border-right: 1px solid #fff4;
}
.stat b {
	font-size: 28px;
	color: var(--red);
}
.stat span {
	color: #eee;
	font-size: 9px;
}
.ticker {
	padding: 9px 0;
	background: var(--red);
	border-bottom: 2px solid var(--ink);
}
.ticker-track span {
	font-size: 15px;
}
.section {
	padding: 48px 0;
}
.section-head {
	margin-bottom: 22px;
	gap: 20px;
}
.section-head h2,
.page-title {
	font-size: clamp(48px, 6.5vw, 78px);
	line-height: 0.82;
}
.section-head p {
	font-size: 12px;
	max-width: 340px;
}
.about-grid {
	gap: 20px;
}
.comic-panel {
	border: 2px solid var(--ink);
	box-shadow: 5px 5px 0 var(--ink);
}
.about-art {
	min-height: 280px;
	max-height: 360px;
	background: var(--red);
	background-image: radial-gradient(#fff7 1px, transparent 1.5px);
	background-size: 7px 7px;
}
.about-art img {
	max-height: 350px;
}
.blue {
	background: #e7f0f2;
}
.service-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}
.service-card {
	min-height: 175px;
	padding: 14px;
	box-shadow: 3px 3px 0 var(--ink);
	border-width: 2px;
}
.service-card h3 {
	font-size: clamp(22px, 2.2vw, 29px);
	margin: 12px 0 7px;
}
.service-card p {
	font-size: 11px;
	max-width: 245px;
}
.service-card .num {
	font-size: 12px;
	padding: 3px 7px;
}
.service-card .card-arrow {
	font-size: 23px;
	right: 10px;
	bottom: 8px;
}
.process {
	gap: 10px;
}
.step {
	padding: 14px;
	border-width: 2px;
	box-shadow: 3px 3px 0 var(--red);
}
.character-strip {
	gap: 12px;
}
.character-card {
	grid-template-columns: 0.8fr 1fr;
	min-height: 210px;
	border-width: 2px;
	box-shadow: 4px 4px 0 var(--ink);
}
.character-card img {
	max-height: 230px;
	align-self: end;
}
.work-grid {
	gap: 10px;
}
.work-card {
	min-height: 220px;
	padding: 15px;
	border-width: 2px;
	box-shadow: 4px 4px 0 var(--ink);
}
.work-card .scribble {
	font-size: clamp(34px, 4vw, 58px);
}
.blog-grid {
	gap: 12px;
}
.blog-card {
	border-width: 2px;
	box-shadow: 4px 4px 0 var(--ink);
}
.blog-art {
	height: 150px;
}
.blog-art img {
	height: 175px;
}
.page-hero {
	padding: 34px 0 28px;
	min-height: 280px;
	background: #0a0b0e;
}
.page-hero .page-title {
	max-width: 760px;
}
.page-hero p {
	font-size: 13px;
	max-width: 470px;
}
.page-hero .hero-doodle {
	width: clamp(190px, 26vw, 310px);
	max-height: 310px;
	object-fit: contain;
	right: 2%;
	top: -25px;
}
.contact-layout {
	gap: 14px;
}
.contact-card,
.contact-form {
	padding: 18px;
	border-width: 2px;
	box-shadow: 4px 4px 0 var(--ink);
}
.cta-band {
	padding: 28px 0;
}
.cta-band h2 {
	font-size: clamp(38px, 5vw, 60px);
}
.footer {
	padding: 28px 0 18px;
}
.footer-logo {
	width: 155px;
}
.reveal {
	transform: translateY(18px) scale(0.99);
	transition:
		opacity 0.5s ease,
		transform 0.55s cubic-bezier(0.2, 0.85, 0.2, 1);
}
@media (max-width: 900px) {
	.nav {
		gap: 10px;
	}
	.logo img {
		width: 125px;
	}
	.links {
		gap: 10px;
	}
	.links a {
		font-size: 9px;
	}
	.nav > .button {
		padding: 9px 11px;
	}
	.hero-grid {
		grid-template-columns: 1fr 0.82fr;
	}
	.hero-art {
		min-height: 350px;
	}
	.hero-art img {
		max-height: 390px;
	}
	.service-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.page-hero .hero-doodle {
		opacity: 0.8;
	}
}
@media (max-width: 700px) {
	.nav {
		min-height: 62px;
	}
	.logo img {
		width: 135px;
	}
	.menu-btn {
		display: block;
		background: var(--red);
		color: #fff;
		border: 1px solid #ff7081;
		border-radius: 5px;
	}
	.links {
		top: 62px;
		background: #090b0f;
		border-bottom: 2px solid var(--red);
		padding: 12px 20px 18px;
	}
	.links a {
		color: #fff;
		font-size: 12px;
	}
	.nav > .button {
		display: none;
	}
	.hero-grid {
		grid-template-columns: 1fr;
		padding: 28px 0 12px;
	}
	.hero {
		min-height: 0;
	}
	.hero h1 {
		font-size: clamp(72px, 17vw, 110px);
		margin: 17px 0;
	}
	.hero-copy p {
		max-width: 310px;
	}
	.hero-art {
		min-height: 270px;
		max-height: 310px;
		margin-top: -6px;
	}
	.hero-art img {
		width: 78%;
		max-height: 315px;
		transform: none;
	}
	.speech {
		right: 3%;
		top: 4%;
		font-size: 12px;
	}
	.stats {
		margin-top: 8px;
	}
	.stat b {
		font-size: 24px;
	}
	.stat span {
		font-size: 8px;
	}
	.section {
		padding: 34px 0;
	}
	.section-head {
		display: block;
	}
	.section-head p {
		margin-top: 12px;
	}
	.about-grid {
		grid-template-columns: 1fr;
	}
	.about-art {
		min-height: 230px;
	}
	.service-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}
	.service-card {
		min-height: 180px;
		padding: 11px;
	}
	.service-card h3 {
		font-size: 23px;
	}
	.service-card p {
		font-size: 10px;
	}
	.character-card {
		grid-template-columns: 0.85fr 1fr;
		min-height: 160px;
	}
	.character-card img {
		max-height: 180px;
	}
	.work-grid,
	.blog-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.work-card {
		min-height: 175px;
		padding: 11px;
	}
	.work-card .scribble {
		font-size: 34px;
	}
	.page-hero {
		min-height: 230px;
		padding: 30px 0 24px;
	}
	.page-hero .hero-doodle {
		width: 150px;
		right: -18px;
		top: 28px;
		opacity: 0.58;
	}
	.page-hero p {
		max-width: 70%;
		font-size: 12px;
	}
	.contact-layout {
		grid-template-columns: 1fr;
	}
	.cta-band .wrap {
		flex-direction: row;
		align-items: center;
	}
	.cta-band h2 {
		font-size: 36px;
	}
	.footer-top {
		flex-direction: column;
		align-items: flex-start;
	}
}
@media (max-width: 420px) {
	.service-card {
		min-height: 190px;
	}
	.service-card h3 {
		font-size: 21px;
	}
	.work-card .scribble {
		font-size: 29px;
	}
	.cta-band .wrap {
		align-items: flex-start;
		flex-direction: column;
	}
	.page-hero .hero-doodle {
		width: 120px;
		opacity: 0.45;
	}
}

/* FINAL REFERENCE MATCH: unframed characters, edge-to-edge comic composition */
:root {
	--red: #ff1738;
	--red2: #c80b28;
	--ink: #05080d;
	--paper: #f7f0e3;
	--white: #fffaf1;
}
/* Home header floats over the artwork, like the reference */
body:has(.hero) .topline {
	display: none;
}
body:has(.hero) .header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: linear-gradient(
		180deg,
		rgba(2, 5, 10, 0.94),
		rgba(2, 5, 10, 0.55)
	);
	border-bottom: 1px solid rgba(255, 255, 255, 0.13);
	box-shadow: none;
	color: #fff;
	z-index: 100;
}
body:has(.hero) .nav {
	width: min(1440px, calc(100% - 7vw));
	min-height: 78px;
}
body:has(.hero) .logo img {
	width: 178px;
	max-height: 60px;
}
body:has(.hero) .hero {
	padding-top: 65px;
	min-height: 660px;
	border: 0;
	overflow: visible;
	background:
		radial-gradient(ellipse at 80% 32%, #16415c 0, transparent 36%),
		linear-gradient(110deg, #03070c 0%, #08131e 55%, #101f2a 100%);
}
body:has(.hero) .hero:before {
	opacity: 0.9;
	background:
		repeating-linear-gradient(
			168deg,
			transparent 0 78px,
			rgba(255, 23, 56, 0.18) 80px,
			transparent 83px
		),
		radial-gradient(
			circle at 82% 20%,
			rgba(72, 151, 201, 0.4),
			transparent 26%
		),
		linear-gradient(
			90deg,
			transparent 0 64%,
			rgba(255, 255, 255, 0.045) 64.2%,
			transparent 64.5%
		);
}
body:has(.hero) .hero:after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.45;
	background:
		linear-gradient(90deg, #03070c 0%, transparent 56%),
		repeating-linear-gradient(
			0deg,
			transparent 0 110px,
			rgba(255, 255, 255, 0.045) 111px,
			transparent 113px
		);
	mask-image: linear-gradient(to bottom, black, transparent 95%);
}
body:has(.hero) .hero-grid {
	width: min(1440px, calc(100% - 7vw));
	position: relative;
	z-index: 2;
	grid-template-columns: 1fr;
	min-height: 590px;
	padding: 65px 0 20px;
	display: block;
}
body:has(.hero) .hero-copy {
	position: relative;
	z-index: 4;
	width: min(58%, 680px);
	padding-top: 16px;
}
body:has(.hero) .hero .eyebrow {
	display: none;
}
body:has(.hero) .hero h1 {
	font-size: clamp(100px, 12vw, 178px);
	line-height: 0.68;
	letter-spacing: -0.055em;
	margin: 10px 0 30px;
	text-transform: uppercase;
	font-weight: 900;
	font-style: italic;
	text-shadow: 4px 5px 0 #08090b;
}
body:has(.hero) .hero h1 span {
	color: var(--red);
	text-shadow: 5px 5px 0 #650819;
}
body:has(.hero) .hero-copy p {
	font-size: clamp(14px, 1.2vw, 18px);
	line-height: 1.35;
	max-width: 430px;
	margin-left: 14px;
}
body:has(.hero) .hero-foot {
	margin: 18px 0 0 14px;
}
body:has(.hero) .hero-foot .button {
	padding: 15px 25px;
	border: 0;
	border-radius: 28px;
	box-shadow: 0 6px 0 #8c071c;
	font-size: 13px;
}
body:has(.hero) .hero-art {
	position: absolute;
	z-index: 3;
	right: -1.5%;
	bottom: -4px;
	width: 58%;
	height: 100%;
	min-height: 0;
	max-height: none;
	overflow: visible;
	pointer-events: none;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: transparent;
}
body:has(.hero) .hero-art:before {
	content: "";
	position: absolute;
	inset: 8% 0 0 12%;
	background:
		linear-gradient(
			135deg,
			transparent 0 30%,
			rgba(25, 74, 102, 0.6) 30.2% 30.6%,
			transparent 31%
		),
		linear-gradient(
			160deg,
			transparent 0 56%,
			rgba(255, 23, 56, 0.8) 56.2% 57%,
			transparent 57.2%
		);
	clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%);
}
body:has(.hero) .hero-art img {
	position: relative;
	z-index: 2;
	width: auto;
	height: min(650px, 105%);
	max-width: 100%;
	max-height: none;
	object-fit: contain;
	object-position: center bottom;
	transform: translate(2%, 4%);
	filter: drop-shadow(14px 10px 0 rgba(255, 23, 56, 0.34));
	mix-blend-mode: normal;
}
body:has(.hero) .speech {
	z-index: 5;
	top: 15%;
	right: 0;
	border: 2px solid #090b0f;
	box-shadow: 4px 4px 0 var(--red);
	border-radius: 48% 48% 44% 44%;
	font-size: 15px;
	transform: rotate(5deg);
}
body:has(.hero) .stats {
	position: relative;
	z-index: 5;
	width: min(690px, 100%);
	margin-top: 28px;
	padding-top: 14px;
	border-top: 1px solid #ffffff44;
	gap: 0;
}
body:has(.hero) .stat {
	padding: 0 20px 0 0;
	margin-right: 20px;
	border-right: 1px solid #ffffff33;
}
body:has(.hero) .stat b {
	font-size: 30px;
	color: var(--red);
}
body:has(.hero) .stat span {
	font-size: 10px;
	color: #fff;
}
.ticker {
	position: relative;
	z-index: 6;
}
/* Character art is never boxed: let silhouettes break section edges */
.hero-art img,
.about-art img,
.character-card img,
.page-hero .hero-doodle,
.feature-art img {
	background: transparent;
	border: 0;
	box-shadow: none;
}
.about-art {
	position: relative;
	overflow: visible;
	border: 0;
	box-shadow: none;
	background: transparent;
	min-height: 340px;
}
.about-art img {
	position: absolute;
	bottom: -12px;
	left: 0;
	width: 100%;
	height: 115%;
	max-height: 430px;
	object-fit: contain;
	object-position: center bottom;
	filter: drop-shadow(6px 8px 0 rgba(5, 8, 13, 0.12));
}
.character-card {
	overflow: visible;
	isolation: isolate;
}
.character-card img {
	position: relative;
	z-index: 2;
	align-self: end;
	max-height: 260px;
	object-fit: contain;
	filter: drop-shadow(4px 4px 0 rgba(5, 8, 13, 0.13));
	transform: translateY(8px) scale(1.08);
	transform-origin: bottom center;
}
.page-hero {
	position: relative;
	overflow: visible;
	isolation: isolate;
}
.page-hero .hero-doodle {
	z-index: 3;
	filter: drop-shadow(6px 6px 0 rgba(255, 23, 56, 0.22));
	transform: translateY(10px) scale(1.08);
}
/* Less padding and more visual density, matching the reference's tight panels */
.section {
	padding: 42px 0;
}
.section-head {
	margin-bottom: 18px;
}
.service-grid {
	gap: 8px;
}
.service-card {
	position: relative;
	overflow: hidden;
	background: rgba(255, 250, 241, 0.9);
}
.service-card:after {
	content: "";
	position: absolute;
	right: -22px;
	top: -28px;
	width: 95px;
	height: 95px;
	border: 2px solid rgba(255, 23, 56, 0.17);
	border-radius: 50%;
	pointer-events: none;
}
.work-card,
.blog-card {
	overflow: hidden;
}
@media (max-width: 900px) {
	body:has(.hero) .hero-copy {
		width: 62%;
	}
	body:has(.hero) .hero-art {
		width: 54%;
		right: -3%;
	}
	body:has(.hero) .hero h1 {
		font-size: clamp(84px, 12vw, 130px);
	}
	body:has(.hero) .hero-art img {
		height: 90%;
	}
}
@media (max-width: 700px) {
	body:has(.hero) .nav {
		width: calc(100% - 28px);
		min-height: 64px;
	}
	body:has(.hero) .logo img {
		width: 135px;
	}
	body:has(.hero) .hero {
		padding-top: 64px;
		min-height: 0;
		overflow: hidden;
	}
	body:has(.hero) .hero-grid {
		width: calc(100% - 30px);
		min-height: 0;
		padding: 28px 0 12px;
		display: flex;
		flex-direction: column;
	}
	body:has(.hero) .hero-copy {
		width: 100%;
		padding-top: 10px;
	}
	body:has(.hero) .hero h1 {
		font-size: clamp(76px, 18vw, 118px);
		line-height: 0.72;
		margin: 10px 0 18px;
		max-width: 100%;
	}
	body:has(.hero) .hero-copy p {
		max-width: 70%;
		margin-left: 4px;
		font-size: 13px;
	}
	body:has(.hero) .hero-foot {
		margin-left: 4px;
		gap: 14px;
		flex-wrap: wrap;
	}
	body:has(.hero) .hero-art {
		position: relative;
		right: auto;
		bottom: auto;
		width: 100%;
		height: 300px;
		min-height: 300px;
		margin-top: -20px;
		align-self: stretch;
		justify-content: flex-end;
	}
	body:has(.hero) .hero-art img {
		height: 115%;
		max-height: 350px;
		max-width: 78%;
		transform: translate(3%, 5%);
	}
	body:has(.hero) .speech {
		top: 6%;
		right: 2%;
		font-size: 12px;
		padding: 10px 13px;
	}
	body:has(.hero) .stats {
		width: 100%;
		margin-top: 6px;
		gap: 0;
	}
	body:has(.hero) .stat {
		padding: 0 8px 0 0;
		margin-right: 8px;
	}
	body:has(.hero) .stat b {
		font-size: 23px;
	}
	body:has(.hero) .stat span {
		font-size: 8px;
	}
	.about-art {
		min-height: 240px;
	}
	.character-card img {
		max-height: 190px;
	}
}
@media (prefers-reduced-motion: reduce) {
	body:has(.hero) .hero-art img {
		transform: none;
	}
}

/* Text alignment pass: keep editorial copy on a consistent left edge. */
body,
h1,
h2,
h3,
p,
.section-head,
.section-head > p,
.service-card,
.step,
.character-card > div,
.blog-copy,
.contact-card,
.contact-form,
.footer-bottom {
	text-align: left;
}

.section-head {
	align-items: flex-start;
}

.section-head > div {
	flex: 1 1 auto;
	min-width: 0;
}

.section-head > p {
	flex: 0 1 340px;
	margin: 30px 0 0;
}

.section-head h2,
.page-title {
	text-wrap: balance;
}

.service-card h3,
.blog-copy h3 {
	text-wrap: balance;
}

.service-card p,
.blog-copy p,
.step p,
.character-card p,
.contact-card p,
.contact-form label {
	text-align: left;
}

.footer-bottom {
	align-items: flex-start;
}

@media (max-width: 700px) {
	.section-head > p {
		margin-top: 12px;
		max-width: 100%;
	}

	.section-head h2,
	.page-title {
		text-wrap: pretty;
	}
}

/* Improve readability: the condensed display font needs breathing room. */
body,
p,
li,
label,
input,
textarea,
select,
button {
	letter-spacing: 0.01em;
}

.hero h1,
.section-head h2,
.page-title,
.cta-band h2,
.service-card h3,
.blog-copy h3,
.contact-card h3,
.work-card .scribble {
	letter-spacing: 0.01em;
}

body:has(.hero) .hero h1 {
	letter-spacing: -0.01em;
}

.links a,
.button,
.eyebrow,
.comic-label,
.footer-links a,
.fact span,
.work-card .tag,
.blog-copy small {
	letter-spacing: 0.06em;
}

/* MOBILE RESPONSIVE REPAIR — October 2026
   Keep all copy in its own layout zone; characters never sit on top of text. */
img,
video,
iframe,
svg {
	max-width: 100%;
}
.wrap,
.hero-grid,
.nav {
	min-width: 0;
}
body {
	width: 100%;
}
button,
input,
textarea,
select {
	max-width: 100%;
}

@media (max-width: 900px) {
	.wrap {
		width: min(100% - 32px, 720px);
	}
	.section-head {
		align-items: flex-start;
	}
	.section-head > p {
		flex-basis: 42%;
	}
	.character-strip {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.work-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.process {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.contact-layout {
		grid-template-columns: 1fr 1fr;
	}
	.page-hero .hero-doodle {
		max-width: 36vw;
	}
}

@media (max-width: 700px) {
	html {
		overflow-x: clip;
	}
	.wrap {
		width: calc(100% - 32px);
	}
	.header {
		position: sticky;
		top: 0;
	}
	.nav {
		position: relative;
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: 12px;
		min-height: 64px;
	}
	.logo {
		flex: 0 1 auto;
		min-width: 0;
	}
	.logo img {
		width: clamp(112px, 36vw, 145px);
		max-height: 44px;
	}
	.menu-btn {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 42px;
		cursor: pointer;
	}
	.nav > .button {
		display: none;
	}
	.links {
		display: none;
		position: absolute;
		top: calc(100% + 2px);
		left: -16px;
		right: -16px;
		z-index: 200;
		padding: 8px 20px 14px;
		background: #07090c;
		border-bottom: 2px solid var(--red);
		box-shadow: 0 10px 18px #0003;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.links.open {
		display: flex;
	}
	.links a {
		display: block;
		padding: 13px 2px;
		color: #fff;
		font-size: 13px;
		line-height: 1.3;
		border-bottom: 1px solid #ffffff20;
	}
	.links a:last-child {
		border-bottom: 0;
	}
	.links a:after {
		display: none;
	}
	.topline .wrap {
		flex-direction: column;
		gap: 4px;
	}

	/* Home hero: copy and mascot occupy separate rows. */
	body:has(.hero) .hero {
		padding-top: 0;
		overflow: hidden;
		min-height: 0;
	}
	body:has(.hero) .hero-grid {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: calc(100% - 32px);
		min-height: 0;
		padding: 28px 0 18px;
	}
	body:has(.hero) .hero-copy {
		width: 100%;
		padding: 0;
	}
	body:has(.hero) .hero h1 {
		max-width: 100%;
		font-size: clamp(62px, 16.5vw, 108px);
		line-height: 0.78;
		letter-spacing: -0.025em;
		overflow-wrap: anywhere;
		margin: 14px 0 18px;
	}
	body:has(.hero) .hero-copy p {
		width: 100%;
		max-width: 100%;
		margin: 0 0 0 2px;
		font-size: 14px;
		line-height: 1.55;
	}
	body:has(.hero) .hero-foot {
		margin: 18px 0 0 2px;
		display: flex;
		align-items: flex-start;
		gap: 12px;
	}
	body:has(.hero) .hero-foot .button {
		max-width: 100%;
		padding: 12px 16px;
		white-space: normal;
		text-align: center;
	}
	body:has(.hero) .hero-art {
		position: relative;
		inset: auto;
		width: 100%;
		height: auto;
		min-height: 0;
		max-height: none;
		margin: 16px auto 0;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		overflow: visible;
		pointer-events: auto;
	}
	body:has(.hero) .hero-art:before {
		display: none;
	}
	body:has(.hero) .hero-art img {
		display: block;
		width: min(84%, 340px);
		height: auto;
		max-width: 100%;
		max-height: 360px;
		object-fit: contain;
		object-position: center bottom;
		transform: none;
	}
	body:has(.hero) .speech {
		top: 5%;
		right: 0;
		max-width: 130px;
		font-size: 12px;
		line-height: 1;
		padding: 10px 12px;
	}
	body:has(.hero) .stats {
		width: 100%;
		max-width: none;
		margin-top: 18px;
		padding-top: 13px;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
	}
	body:has(.hero) .stat {
		min-width: 0;
		padding: 0 6px 0 0;
		margin: 0;
		border-right: 1px solid #ffffff33;
	}
	body:has(.hero) .stat b {
		font-size: clamp(21px, 7vw, 28px);
	}
	body:has(.hero) .stat span {
		font-size: 9px;
		line-height: 1.35;
		overflow-wrap: anywhere;
	}

	.section {
		padding: 34px 0;
	}
	.section-head {
		display: block;
		margin-bottom: 20px;
	}
	.section-head > div {
		min-width: 0;
	}
	.section-head > p {
		max-width: 100%;
		width: 100%;
		margin: 12px 0 0;
	}
	.section-head h2,
	.page-title {
		font-size: clamp(43px, 12vw, 68px);
		line-height: 0.88;
		overflow-wrap: anywhere;
	}
	.about-grid,
	.contact-layout,
	.contact-layout > *,
	.feature-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.about-grid {
		gap: 20px;
	}
	.about-art {
		min-height: 220px;
		max-height: none;
	}
	.about-art img {
		width: min(82%, 310px);
		height: auto;
		max-height: 280px;
	}
	.mini-burst {
		width: 56px;
		height: 56px;
		font-size: 11px;
	}

	.service-grid,
	.work-grid,
	.blog-grid,
	.character-strip,
	.process,
	.about-facts {
		grid-template-columns: minmax(0, 1fr);
	}
	.service-grid,
	.work-grid,
	.blog-grid,
	.character-strip {
		gap: 14px;
	}
	.service-card {
		min-height: 0;
		padding: 16px;
	}
	.service-card h3 {
		max-width: calc(100% - 20px);
		font-size: clamp(25px, 7vw, 32px);
		line-height: 0.95;
	}
	.service-card p {
		max-width: 100%;
		font-size: 13px;
		line-height: 1.55;
		padding-bottom: 16px;
	}
	.service-card .card-arrow {
		right: 12px;
		bottom: 8px;
	}
	.step {
		min-height: 0;
		padding: 16px;
	}
	.step h3 {
		margin: 12px 0 6px;
	}
	.character-card {
		grid-template-columns: minmax(110px, 0.8fr) minmax(0, 1fr);
		min-height: 180px;
		overflow: hidden;
	}
	.character-card img {
		width: 100%;
		height: 190px;
		max-height: 190px;
		min-width: 0;
		transform: none;
	}
	.character-card div {
		min-width: 0;
		padding: 14px 12px 18px 0;
	}
	.character-card h3 {
		font-size: clamp(23px, 6.8vw, 29px);
		line-height: 0.95;
		overflow-wrap: anywhere;
	}
	.character-card p {
		font-size: 12px;
		line-height: 1.45;
	}
	.work-card {
		min-height: 190px;
		padding: 16px;
	}
	.work-card .scribble {
		max-width: 100%;
		font-size: clamp(36px, 10vw, 52px);
		overflow-wrap: anywhere;
	}
	.blog-art {
		height: 160px;
	}
	.blog-copy {
		padding: 16px;
	}
	.blog-copy h3 {
		font-size: 26px;
	}

	/* Inner-page character artwork is placed below copy instead of behind it. */
	.page-hero {
		min-height: 0;
		padding: 30px 0 12px;
		overflow: hidden;
	}
	.page-hero .wrap {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}
	.page-hero .page-title,
	.page-hero p {
		position: relative;
		z-index: 2;
		width: 100%;
		max-width: 100%;
	}
	.page-hero p {
		font-size: 14px;
		line-height: 1.55;
		margin-bottom: 0;
	}
	.page-hero .hero-doodle {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		align-self: center;
		display: block;
		width: min(70vw, 250px);
		max-width: 100%;
		max-height: 250px;
		height: auto;
		margin: 14px auto 0;
		opacity: 1;
		transform: none;
	}
	.page-hero:after {
		display: none;
	}
	.contact-layout {
		display: grid;
		gap: 18px;
	}
	.contact-card,
	.contact-form {
		min-width: 0;
		padding: 16px;
	}
	.contact-form {
		grid-template-columns: minmax(0, 1fr);
	}
	.field,
	.field.full {
		grid-column: 1 / -1;
		min-width: 0;
	}
	input,
	textarea,
	select {
		width: 100%;
		min-width: 0;
		font-size: 16px;
	}
	textarea {
		resize: vertical;
	}
	.cta-band {
		padding: 28px 0;
	}
	.cta-band .wrap {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}
	.cta-band h2 {
		max-width: 100%;
		font-size: clamp(34px, 10vw, 48px);
		line-height: 0.95;
	}
	.footer {
		padding: 26px 0 16px;
	}
	.footer-top {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}
	.footer-links {
		display: flex;
		flex-wrap: wrap;
		gap: 10px 16px;
	}
	.footer-bottom {
		display: flex;
		flex-direction: column;
		gap: 7px;
	}
	.footer-bottom span {
		overflow-wrap: anywhere;
	}
	.button {
		max-width: 100%;
		white-space: normal;
		text-align: center;
	}
}

@media (max-width: 380px) {
	.wrap {
		width: calc(100% - 26px);
	}
	body:has(.hero) .hero-grid {
		width: calc(100% - 26px);
	}
	body:has(.hero) .hero h1 {
		font-size: clamp(56px, 16vw, 72px);
	}
	body:has(.hero) .hero-foot {
		align-items: stretch;
		flex-direction: column;
	}
	body:has(.hero) .hero-foot > a {
		align-self: flex-start;
	}
	.character-card {
		grid-template-columns: minmax(92px, 0.72fr) minmax(0, 1fr);
	}
	.character-card img {
		height: 165px;
	}
	.character-card div {
		padding-right: 8px;
	}
	.character-card h3 {
		font-size: 22px;
	}
	.stat span {
		font-size: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-art img,
	.character-card img,
	.about-art img {
		animation: none !important;
		transition: none !important;
	}
}

/* FULL SITE RESPONSIVE QA PATCH — 2026-10-13
   Consolidated final overrides for the seven-page static site. */
:root {
	--mobile-gutter: 16px;
}
html {
	max-width: 100%;
	overflow-x: clip;
}
body {
	min-width: 0;
	max-width: 100%;
}
main,
section,
header,
footer,
.wrap,
.nav,
.hero-grid,
.about-grid,
.feature-grid,
.contact-layout,
.contact-form,
.service-grid,
.work-grid,
.blog-grid,
.character-strip,
.process {
	min-width: 0;
}
img,
video,
iframe {
	max-width: 100%;
}
input,
textarea,
select,
button {
	font: inherit;
}
input,
textarea,
select {
	min-width: 0;
}

/* Tablet navigation was previously compressed before the mobile breakpoint. */
@media (max-width: 900px) {
	.nav {
		gap: 12px;
	}
	.logo {
		flex: 0 1 auto;
		min-width: 0;
	}
	.logo img {
		width: clamp(112px, 20vw, 160px);
	}
	.menu-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		min-width: 44px;
		min-height: 42px;
		cursor: pointer;
	}
	.nav > .button {
		display: none;
	}
	.links {
		display: none;
	}
	.links.open {
		display: flex;
	}
	.nav {
		position: relative;
	}
	.links {
		position: absolute;
		top: calc(100% + 2px);
		left: -16px;
		right: -16px;
		z-index: 200;
		padding: 8px 20px 14px;
		background: #07090c;
		border-bottom: 2px solid var(--red);
		box-shadow: 0 10px 18px #0003;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.links a {
		display: block;
		padding: 13px 2px;
		color: #fff;
		font-size: 13px;
		line-height: 1.35;
		border-bottom: 1px solid #ffffff20;
	}
	.links a:last-child {
		border-bottom: 0;
	}
	.links a:after {
		display: none;
	}
	.hero-grid {
		gap: 16px;
	}
	.service-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.character-strip {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.work-grid,
	.blog-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.process {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.contact-layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	.contact-form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	:root {
		--mobile-gutter: 16px;
	}
	.wrap,
	body:has(.hero) .hero-grid {
		width: calc(100% - 32px);
	}
	.topline {
		font-size: 9px;
		letter-spacing: 0.06em;
	}
	.topline .wrap {
		align-items: flex-start;
	}
	/* Override the higher-specificity desktop hero header rule. */
	body:has(.hero) .header {
		position: relative;
		inset: auto;
		background: #07090c;
		border-bottom: 1px solid #ffffff20;
	}
	body:has(.hero) .nav {
		width: calc(100% - 32px);
		min-height: 64px;
	}
	body:has(.hero) .logo img {
		width: clamp(112px, 36vw, 145px);
		max-height: 44px;
	}
	body:has(.hero) .hero {
		padding-top: 0;
		min-height: 0;
		overflow: hidden;
	}
	body:has(.hero) .hero-grid {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		min-height: 0;
		padding: 25px 0 20px;
	}
	body:has(.hero) .hero-copy {
		width: 100%;
		max-width: 100%;
		padding: 0;
	}
	body:has(.hero) .hero h1 {
		font-size: clamp(58px, 15.5vw, 100px);
		line-height: 0.82;
		letter-spacing: -0.025em;
		overflow-wrap: normal;
		word-break: normal;
		margin: 13px 0 18px;
	}
	body:has(.hero) .hero h1 span {
		text-shadow: 3px 3px 0 #650819;
	}
	body:has(.hero) .hero-copy p {
		width: 100%;
		max-width: 100%;
		margin: 0;
		font-size: 14px;
		line-height: 1.55;
	}
	body:has(.hero) .hero-foot {
		margin: 17px 0 0;
		gap: 12px;
		align-items: center;
	}
	body:has(.hero) .hero-art {
		position: relative;
		inset: auto;
		width: 100%;
		height: auto;
		min-height: 0;
		max-height: none;
		margin: 14px auto 0;
		overflow: visible;
		display: flex;
		align-items: flex-end;
		justify-content: center;
	}
	body:has(.hero) .hero-art img {
		width: min(84%, 330px);
		height: auto;
		max-height: 340px;
		max-width: 100%;
		object-fit: contain;
		transform: none;
	}
	body:has(.hero) .speech {
		top: 4%;
		right: 0;
		max-width: 126px;
		font-size: 12px;
		padding: 9px 11px;
	}
	body:has(.hero) .stats {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
		width: 100%;
		max-width: none;
		margin-top: 18px;
		padding-top: 13px;
	}
	body:has(.hero) .stat {
		min-width: 0;
		margin: 0;
		padding: 0 6px 0 0;
	}
	body:has(.hero) .stat b {
		font-size: clamp(21px, 6.5vw, 27px);
	}
	body:has(.hero) .stat span {
		font-size: 9px;
		line-height: 1.35;
		overflow-wrap: normal;
	}

	.section {
		padding: 32px 0;
	}
	.section-head {
		display: block;
		margin-bottom: 20px;
	}
	.section-head > div {
		min-width: 0;
	}
	.section-head > p {
		width: 100%;
		max-width: 100%;
		margin: 12px 0 0;
	}
	.section-head h2,
	.page-title {
		font-size: clamp(42px, 11.5vw, 66px);
		line-height: 0.9;
		letter-spacing: -0.015em;
		overflow-wrap: break-word;
	}
	.about-grid,
	.feature-grid,
	.contact-layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}
	.about-art {
		min-height: 0;
		height: auto;
		padding-top: 10px;
		overflow: hidden;
	}
	.about-art img {
		position: relative;
		left: auto;
		bottom: auto;
		display: block;
		width: min(82%, 300px);
		height: auto;
		max-height: 280px;
		margin: 0 auto;
	}
	.mini-burst {
		width: 50px;
		height: 50px;
		font-size: 10px;
		right: 8px;
		top: 8px;
	}

	.service-grid,
	.work-grid,
	.blog-grid,
	.character-strip,
	.process,
	.about-facts {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 13px;
	}
	.service-card {
		min-height: 0;
		padding: 16px;
	}
	.service-card h3 {
		max-width: calc(100% - 20px);
		font-size: clamp(25px, 7vw, 32px);
		line-height: 0.98;
		overflow-wrap: break-word;
	}
	.service-card p {
		max-width: 100%;
		font-size: 13px;
		line-height: 1.55;
		padding-bottom: 16px;
	}
	.step {
		min-height: 0;
		padding: 16px;
	}
	.step:not(:last-child):after {
		display: none;
	}
	.character-card {
		grid-template-columns: minmax(105px, 0.75fr) minmax(0, 1fr);
		min-height: 170px;
		overflow: hidden;
	}
	.character-card img {
		width: 100%;
		height: 175px;
		max-height: 175px;
		min-width: 0;
		transform: none;
	}
	.character-card div {
		min-width: 0;
		padding: 13px 10px 16px 0;
	}
	.character-card h3 {
		font-size: clamp(22px, 6.4vw, 28px);
		line-height: 0.98;
		overflow-wrap: break-word;
	}
	.character-card p {
		font-size: 12px;
		line-height: 1.45;
	}
	.work-card {
		min-height: 175px;
		padding: 15px;
	}
	.work-card .scribble {
		max-width: 100%;
		font-size: clamp(34px, 9vw, 48px);
		line-height: 0.9;
		overflow-wrap: break-word;
	}
	.blog-art {
		height: auto;
		min-height: 120px;
		aspect-ratio: 16 / 9;
	}
	.blog-copy {
		min-width: 0;
		padding: 14px;
	}
	.blog-copy h3 {
		font-size: clamp(22px, 6vw, 27px);
		overflow-wrap: break-word;
	}

	.page-hero {
		min-height: 0;
		padding: 28px 0 14px;
		overflow: hidden;
	}
	.page-hero .wrap {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		min-width: 0;
	}
	.page-hero .page-title,
	.page-hero p {
		position: relative;
		z-index: 2;
		width: 100%;
		max-width: 100%;
	}
	.page-hero p {
		font-size: 14px;
		line-height: 1.55;
		margin: 12px 0 0;
	}
	.page-hero .hero-doodle {
		position: relative;
		inset: auto;
		display: block;
		align-self: center;
		width: min(66vw, 230px);
		max-width: 100%;
		height: auto;
		max-height: 230px;
		margin: 12px auto 0;
		opacity: 1;
		transform: none;
	}
	.page-hero:after {
		display: none;
	}

	.contact-card,
	.contact-form {
		min-width: 0;
		padding: 15px;
	}
	.contact-form {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}
	.field,
	.field.full {
		grid-column: 1 / -1;
		min-width: 0;
	}
	input,
	textarea,
	select {
		display: block;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		font-size: 16px;
	}
	textarea {
		resize: vertical;
	}
	.cta-band {
		padding: 27px 0;
	}
	.cta-band .wrap {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	.cta-band h2 {
		max-width: 100%;
		font-size: clamp(33px, 9.5vw, 46px);
		line-height: 0.98;
		overflow-wrap: break-word;
	}
	.footer {
		padding: 25px 0 16px;
	}
	.footer-top {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}
	.footer-logo img {
		max-width: min(100%, 160px);
	}
	.footer-links {
		display: flex;
		flex-wrap: wrap;
		gap: 10px 15px;
	}
	.footer-bottom {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 7px;
	}
	.footer-bottom span {
		overflow-wrap: anywhere;
	}
	.button {
		max-width: 100%;
		white-space: normal;
		text-align: center;
	}
	.wrap > *,
	.panel-copy,
	.contact-card,
	.contact-form,
	.service-card,
	.step,
	.blog-card,
	.work-card {
		min-width: 0;
	}
}

@media (max-width: 380px) {
	.wrap,
	body:has(.hero) .hero-grid,
	body:has(.hero) .nav {
		width: calc(100% - 26px);
	}
	body:has(.hero) .hero h1 {
		font-size: clamp(52px, 15.2vw, 62px);
	}
	body:has(.hero) .hero-foot {
		align-items: stretch;
		flex-direction: column;
	}
	body:has(.hero) .hero-foot > a {
		align-self: flex-start;
	}
	body:has(.hero) .hero-art img {
		width: min(92%, 300px);
	}
	body:has(.hero) .speech {
		max-width: 108px;
		font-size: 11px;
	}
	.character-card {
		grid-template-columns: minmax(90px, 0.7fr) minmax(0, 1fr);
	}
	.character-card img {
		height: 155px;
	}
	.character-card div {
		padding-right: 7px;
	}
	.character-card h3 {
		font-size: 21px;
	}
	.stat span {
		font-size: 8px;
	}
	.topline .wrap {
		overflow-wrap: anywhere;
	}
}

/* Clear, consistently aligned character artwork — preserve the established Trainonex UI. */
.hero-art {
	min-width: 0;
	overflow: visible;
}
.hero-art > img.hero-mascot {
	display: block;
	width: min(100%, 475px);
	height: auto;
	max-height: 500px;
	object-fit: contain;
	object-position: center bottom;
	filter: none !important;
	box-shadow: none !important;
	transform: translate3d(var(--track-x, 0px), var(--track-y, 0px), 0)
		rotate(var(--track-r, 0deg));
	transform-origin: center bottom;
	will-change: transform;
	animation: none !important;
}
.about-art {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	overflow: hidden;
}
.about-art > img {
	display: block;
	position: relative;
	left: auto;
	bottom: auto;
	width: min(78%, 360px);
	height: 320px;
	object-fit: contain;
	object-position: center bottom;
	filter: none !important;
}

.section.dark .step {
	color: var(--ink);
}

.section.dark .step p {
	color: var(--ink);
}
.character-card {
	min-width: 0;
	align-items: stretch;
}
.character-card > img {
	display: block;
	width: 100%;
	height: 210px;
	min-width: 0;
	object-fit: contain;
	object-position: center bottom;
	filter: none !important;
	padding: 8px;
}
.character-card > div {
	align-self: end;
	min-width: 0;
}
@media (max-width: 760px) {
	.hero-art {
		min-height: 0;
		margin-inline: auto;
	}
	.hero-art > img.hero-mascot {
		width: min(88%, 350px);
		max-height: 390px;
	}
	.about-art > img {
		width: min(86%, 330px);
		height: 280px;
	}
	.character-card > img {
		height: 170px;
		padding: 6px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.hero-art > img.hero-mascot {
		transform: none !important;
	}
}

/* Blog polish: keep artwork clean and add restrained pointer-driven depth. */
.page-hero .hero-doodle,
.blog-art img {
	filter: none !important;
	box-shadow: none !important;
}

.page-hero p {
	color: #f5f7fa !important;
}

.blog-copy small {
	color: #a90e27;
}

.mouse-section {
	isolation: isolate;
}

.mouse-section::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.35s ease;
	background: radial-gradient(
		circle at var(--section-x, 50%) var(--section-y, 50%),
		rgba(242, 31, 59, 0.09),
		transparent 28%
	);
}

.mouse-section.is-pointer-active::after {
	opacity: 1;
}

.blog-card[data-mouse-card] {
	--card-lift: 0px;
	--card-rotate: 0deg;
	--card-tilt-x: 0deg;
	--card-tilt-y: 0deg;
	transform: perspective(900px) rotateX(var(--card-tilt-y))
		rotateY(var(--card-tilt-x)) translateY(var(--card-lift))
		rotate(var(--card-rotate));
	transform-style: preserve-3d;
	will-change: transform;
	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease;
}

.blog-card[data-mouse-card]:hover {
	--card-lift: -5px;
	--card-rotate: -0.3deg;
	box-shadow: 7px 7px 0 var(--ink);
}

.blog-card[data-mouse-card]::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(
		circle at var(--card-x, 50%) var(--card-y, 50%),
		rgba(255, 255, 255, 0.25),
		transparent 32%
	);
	transition: opacity 0.2s ease;
}

.blog-card[data-mouse-card]:hover::after {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.mouse-section::after,
	.blog-card[data-mouse-card]::after {
		display: none;
	}

	.blog-card[data-mouse-card] {
		transform: none !important;
		transition: none;
	}
}

/* Border-runner transition inspired by the supplied crawling-ant reference. */
.service-card,
.work-card,
.blog-card {
	overflow: hidden;
}

.service-card::before,
.work-card::before,
.blog-card::before {
	content: "";
	position: absolute;
	z-index: 4;
	width: 9px;
	height: 9px;
	border: 2px solid var(--ink);
	border-radius: 50%;
	background: var(--red);
	pointer-events: none;
	offset-path: inset(5px round 1px);
	offset-distance: 0%;
	animation: borderRunner 8s linear infinite;
}

.service-card:nth-child(2)::before,
.work-card:nth-child(2)::before,
.blog-card:nth-child(2)::before {
	animation-delay: -2s;
}

.service-card:nth-child(3)::before,
.work-card:nth-child(3)::before,
.blog-card:nth-child(3)::before {
	animation-delay: -4s;
}

.service-card:nth-child(4)::before,
.work-card:nth-child(4)::before {
	animation-delay: -6s;
}

@keyframes borderRunner {
	to {
		offset-distance: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.service-card::before,
	.work-card::before,
	.blog-card::before {
		animation: none;
		display: none;
	}
}

/* --- 3D TRANSITION & DEPTH ADDITIONS --- */

:root {
	--transition-speed: 0.6s;
	--perspective: 1200px;
}

/* 3D Page Shutter Transition Overlay */
.page-wipe {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: var(--ink);
	pointer-events: none;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	transform-style: preserve-3d;
	perspective: var(--perspective);
}

.page-wipe span {
	background: var(--red);
	border: 1px solid var(--ink);
	transform-origin: left;
	transform: rotateY(-90deg);
	transition: transform var(--transition-speed) cubic-bezier(0.7, 0, 0.3, 1);
}

.page-wipe.active span {
	transform: rotateY(0deg);
}

.page-wipe.exit span {
	transform-origin: right;
	transform: rotateY(90deg);
}

/* 3D Tilt for Cards */
.service-card,
.work-card,
.blog-card,
.comic-panel {
	transition:
		transform 0.2s ease-out,
		box-shadow 0.2s ease-out;
	transform-style: preserve-3d;
	perspective: var(--perspective);
	will-change: transform;
}

/* Inner 3D depth (making text pop out of the card) */
.service-card h3,
.service-card .num,
.mini-burst,
.work-card .scribble {
	transform: translateZ(30px);
}

/* Character Float Animation */
@keyframes float3D {
	0% {
		transform: translateZ(20px) translateY(0px) rotate(0deg);
	}
	50% {
		transform: translateZ(40px) translateY(-10px) rotate(1deg);
	}
	100% {
		transform: translateZ(20px) translateY(0px) rotate(0deg);
	}
}

.hero-art img,
.about-art img,
.character-card img,
.hero-doodle {
	transform: translateZ(20px);
	animation: float3D 4s ease-in-out infinite;
	filter: drop-shadow(15px 15px 10px rgba(0, 0, 0, 0.2));
}

/* Section 3D Entrances */
.reveal {
	opacity: 0;
	transform: translateZ(-100px) rotateX(10deg);
	transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal.in-view {
	opacity: 1;
	transform: translateZ(0) rotateX(0);
}

/* --- HIGH-END 3D COMIC UI --- */

:root {
	--comic-perspective: 1100px;
	--comic-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--comic-shadow:
		8px 10px 0 rgba(16, 16, 20, 0.9), 0 20px 38px rgba(16, 16, 20, 0.12);
}

.section,
.hero,
.page-hero,
.cta-band {
	perspective: var(--comic-perspective);
}

.service-card,
.work-card,
.blog-card,
.comic-panel,
.contact-card,
.contact-form,
.step,
.fact,
.character-card {
	--tilt-x: 0deg;
	--tilt-y: 0deg;
	--pointer-x: 50%;
	--pointer-y: 50%;
	transform: perspective(var(--comic-perspective)) rotateX(var(--tilt-x))
		rotateY(var(--tilt-y)) translateZ(0);
	transform-style: preserve-3d;
	backface-visibility: hidden;
	will-change: transform;
	transition:
		transform 0.42s var(--comic-ease),
		box-shadow 0.42s var(--comic-ease),
		filter 0.42s var(--comic-ease);
}

.reveal:not(.in-view) {
	opacity: 0;
	transform: perspective(var(--comic-perspective)) rotateX(8deg)
		translateY(24px) translateZ(-80px);
}

.reveal.in-view {
	opacity: 1;
	transform: perspective(var(--comic-perspective)) rotateX(var(--tilt-x))
		rotateY(var(--tilt-y)) translateZ(0);
}

.service-card:hover,
.work-card:hover,
.blog-card:hover,
.comic-panel:hover,
.contact-card:hover,
.contact-form:hover,
.step:hover,
.fact:hover,
.character-card:hover,
.service-card.is-pointer-active,
.work-card.is-pointer-active,
.blog-card.is-pointer-active,
.comic-panel.is-pointer-active,
.contact-card.is-pointer-active,
.contact-form.is-pointer-active,
.step.is-pointer-active,
.fact.is-pointer-active,
.character-card.is-pointer-active {
	box-shadow: var(--comic-shadow);
	filter: saturate(1.08) contrast(1.02);
}

.service-card > *,
.work-card > *,
.blog-card > *,
.comic-panel > *,
.contact-card > *,
.contact-form > *,
.step > *,
.fact > *,
.character-card > * {
	position: relative;
	z-index: 2;
	transform: translateZ(24px);
	transform-style: preserve-3d;
}

.service-card .num,
.work-card .tag,
.blog-card small,
.comic-label,
.contact-card h3,
.contact-form .button,
.step b,
.fact strong {
	transform: translateZ(38px) rotate(-1deg);
}

.service-card h3,
.work-card .scribble,
.blog-card h3 {
	text-shadow: 1px 2px 0 rgba(16, 16, 20, 0.14);
}

.service-card::after,
.work-card::after,
.blog-card::after {
	transition:
		opacity 0.35s ease,
		background 0.35s ease;
}

.work-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
}

.service-card::after,
.work-card::after,
.blog-card::after {
	background: radial-gradient(
		circle at var(--pointer-x) var(--pointer-y),
		rgba(255, 255, 255, 0.28),
		transparent 32%
	);
}

.service-card:hover::after,
.work-card:hover::after,
.blog-card:hover::after,
.service-card.is-pointer-active::after,
.work-card.is-pointer-active::after,
.blog-card.is-pointer-active::after {
	opacity: 1;
}

.hero-art,
.about-art {
	transform-style: preserve-3d;
}

.hero-art img,
.about-art img,
.character-card img,
.page-hero .hero-doodle {
	--track-x: 0px;
	--track-y: 0px;
	--track-r: 0deg;
	transform: translate3d(var(--track-x), var(--track-y), 28px)
		rotate(var(--track-r));
	filter: none;
	transition: transform 0.6s var(--comic-ease);
}

.hero-art img {
	filter: drop-shadow(10px 14px 0 rgba(242, 31, 59, 0.22));
}

.about-art img,
.character-card img,
.page-hero .hero-doodle {
	filter: drop-shadow(7px 10px 0 rgba(16, 16, 20, 0.14));
}

.page-wipe {
	transform: none;
	transform-style: preserve-3d;
	perspective: var(--comic-perspective);
}

.page-wipe span {
	transform-origin: left center;
	transform: rotateY(-90deg) translateZ(-20px);
	transition-delay: calc(var(--panel-index, 0) * 70ms);
	transition-timing-function: var(--comic-ease);
}

.page-wipe.active span {
	transform: rotateY(0deg) translateZ(0);
}

.page-wipe.is-loading span {
	transition: none !important;
}

.page-wipe.exit span {
	transform-origin: right center;
	transform: rotateY(90deg) translateZ(-20px);
}

/* Keep service labels and emoji callouts readable while they float away. */
.cursor-burst {
	animation: burst 1.35s ease-out forwards !important;
	white-space: nowrap;
	max-width: min(86vw, 280px);
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.cursor-burst {
		animation-duration: 1.35s !important;
		animation-iteration-count: 1 !important;
	}
}

/* Shared character alignment and a consistent floating baseline. */
html body .hero-art img,
html body .about-art > img,
html body .character-card img,
html body .page-hero .hero-doodle {
	display: block;
	margin-inline: auto;
	transform-origin: center bottom;
}

/* Final curtain/book-page styling overrides. */
.page-wipe-panel {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	isolation: isolate;
}

.page-wipe-logo {
	position: absolute;
	top: 9%;
	z-index: 2;
	width: min(58%, 220px);
	padding: 12px 16px;
	background: var(--white);
	border: 3px solid var(--ink);
	box-shadow: 6px 6px 0 var(--ink);
	transform: rotate(-3deg) translateZ(40px);
}

.page-wipe-art {
	position: absolute;
	z-index: 1;
	bottom: -4%;
	width: min(88%, 430px);
	max-height: 58%;
	object-fit: contain;
	object-position: bottom center;
	filter: drop-shadow(8px 8px 0 rgba(16, 16, 20, 0.22));
	opacity: 0.9;
}

.page-wipe-panel-2 .page-wipe-logo {
	transform: rotate(3deg) translateZ(40px);
}

.page-wipe-panel-2 .page-wipe-art {
	transform: scaleX(-1);
}

.page-wipe {
	grid-template-columns: repeat(2, 1fr) !important;
	background: transparent !important;
	perspective: 1600px !important;
}

.page-wipe span,
.page-wipe span:nth-child(even) {
	background:
		radial-gradient(circle, rgba(16, 16, 20, 0.12) 1px, transparent 1.5px) 0 0 /
			10px 10px,
		linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.7),
			transparent 18%,
			transparent 82%,
			rgba(16, 16, 20, 0.08)
		),
		var(--paper) !important;
	border: 3px solid var(--ink) !important;
	box-shadow:
		inset -18px 0 24px rgba(16, 16, 20, 0.12),
		8px 8px 0 rgba(16, 16, 20, 0.2) !important;
	transform: translateX(-100%) !important;
	transform-origin: left center !important;
	transition: transform 0.62s cubic-bezier(0.77, 0, 0.18, 1) !important;
	transition-delay: 0s !important;
}

.page-wipe span:nth-child(even) {
	background:
		radial-gradient(circle, rgba(16, 16, 20, 0.12) 1px, transparent 1.5px) 0 0 /
			10px 10px,
		linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.55),
			transparent 18%,
			transparent 82%,
			rgba(16, 16, 20, 0.08)
		),
		var(--blue) !important;
	box-shadow:
		inset 18px 0 24px rgba(16, 16, 20, 0.12),
		-8px 8px 0 rgba(16, 16, 20, 0.2) !important;
	transform: translateX(100%) !important;
	transform-origin: right center !important;
}

.page-wipe.active span,
.page-wipe.active span:nth-child(even) {
	transform: translateX(0) !important;
}

.page-wipe.exit span {
	transform: translateX(-100%) !important;
}

.page-wipe.exit span:nth-child(even) {
	transform: translateX(100%) !important;
}

.page-wipe {
	grid-template-columns: repeat(6, 1fr);
	perspective: 1400px;
}

.page-wipe span {
	background: linear-gradient(90deg, var(--red2), var(--red) 48%, #ff3c54);
	box-shadow: inset -8px 0 14px rgba(16, 16, 20, 0.18);
	transition-duration: 0.58s !important;
	transition-delay: calc(var(--panel-index, 0) * 45ms) !important;
}

.page-wipe span:nth-child(even) {
	transform-origin: right center;
	transform: rotateY(-90deg) translateZ(-20px);
	box-shadow: inset 8px 0 14px rgba(16, 16, 20, 0.18);
}

.page-wipe.active span:nth-child(even) {
	transform: rotateY(0deg) translateZ(0);
}

.page-wipe.exit span:nth-child(even) {
	transform-origin: left center;
	transform: rotateY(-90deg) translateZ(-20px);
}

/* Keep cursor service callouts at their normal readable speed. */
@media (prefers-reduced-motion: reduce) {
	.cursor-burst {
		animation-duration: 1.35s !important;
	}
}

/* Staggered curtain/book-page transition. */
.page-wipe {
	grid-template-columns: repeat(6, 1fr);
	perspective: 1400px;
}

.page-wipe span {
	background: linear-gradient(90deg, var(--red2), var(--red) 48%, #ff3c54);
	box-shadow: inset -8px 0 14px rgba(16, 16, 20, 0.18);
	transition-duration: 0.58s;
	transition-delay: calc(var(--panel-index, 0) * 45ms);
}

.page-wipe span:nth-child(even) {
	transform-origin: right center;
	transform: rotateY(-90deg) translateZ(-20px);
	box-shadow: inset 8px 0 14px rgba(16, 16, 20, 0.18);
}

.page-wipe.active span:nth-child(even) {
	transform: rotateY(0deg) translateZ(0);
}

.page-wipe.exit span:nth-child(even) {
	transform-origin: left center;
	transform: rotateY(-90deg) translateZ(-20px);
}

/* Keep navigation feedback visible even when the OS requests reduced motion. */
@media (prefers-reduced-motion: reduce) {
	.page-wipe {
		display: block !important;
		background: rgba(16, 16, 20, 0.16);
		opacity: 0;
		transition: opacity 140ms ease !important;
		transform: none !important;
	}

	.page-wipe.active {
		opacity: 1;
		visibility: visible;
	}

	.page-wipe span {
		display: none;
	}
}

.reveal,
.reveal:not(.in-view),
.reveal.in-view {
	opacity: 1 !important;
}

.reveal.in-view {
	transform: perspective(var(--comic-perspective)) rotateX(var(--tilt-x, 0deg))
		rotateY(var(--tilt-y, 0deg)) translateY(0) translateZ(0) !important;
}

@media (prefers-reduced-motion: reduce) {
	.reveal,
	.reveal:not(.in-view),
	.reveal.in-view {
		opacity: 1 !important;
		transform: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.service-card,
	.work-card,
	.blog-card,
	.comic-panel,
	.contact-card,
	.contact-form,
	.step,
	.fact,
	.character-card {
		transform: none !important;
		transition: none !important;
		filter: none !important;
	}

	.page-wipe {
		display: none;
	}
}

/* Keep the book-page transition visible even when reduced motion is enabled. */
@media (prefers-reduced-motion: reduce) {
	html body .hero-art img,
	html body .about-art img,
	html body .character-card img,
	html body .page-hero .hero-doodle {
		transform: translate3d(var(--track-x), var(--track-y), 28px)
			rotate(var(--track-r));
		animation: float3D 4s ease-in-out infinite !important;
		animation-duration: 4s !important;
		animation-iteration-count: infinite !important;
		transition: transform 0.6s var(--comic-ease) !important;
		filter: drop-shadow(7px 10px 0 rgba(16, 16, 20, 0.14)) !important;
	}

	html body .reveal:not(.in-view) {
		opacity: 0 !important;
		transform: perspective(var(--comic-perspective)) rotateX(8deg)
			translateY(24px) translateZ(-80px) !important;
		transition:
			opacity 0.65s ease,
			transform 0.65s var(--comic-ease) !important;
	}

	html body .reveal.in-view {
		opacity: 1 !important;
		transform: perspective(var(--comic-perspective))
			rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(0)
			translateZ(0) !important;
	}

	html body .service-card,
	html body .work-card,
	html body .blog-card,
	html body .comic-panel,
	html body .contact-card,
	html body .contact-form,
	html body .step,
	html body .fact,
	html body .character-card {
		transition:
			transform 0.42s var(--comic-ease),
			box-shadow 0.42s var(--comic-ease),
			filter 0.42s var(--comic-ease) !important;
	}

	html body .service-card::before,
	html body .work-card::before,
	html body .blog-card::before {
		display: block !important;
		animation: borderRunner 8s linear infinite !important;
	}

	.page-wipe {
		display: grid !important;
	}

	.page-wipe span {
		display: flex !important;
		transition-duration: 0.62s !important;
		transition-delay: 0s !important;
	}
}

/* Replace the red border dot with a small ant walking around each card. */
html body .service-card::before,
html body .work-card::before,
html body .blog-card::before {
	content: "🐜" !important;
	width: 20px !important;
	height: 20px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	display: block !important;
	font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif !important;
	font-size: 18px !important;
	line-height: 1 !important;
	offset-path: inset(11px round 3px) !important;
	offset-anchor: 50% 50% !important;
	offset-distance: 0%;
	offset-rotate: 0deg !important;
	animation: antWalk 8s linear infinite !important;
}

@keyframes antWalk {
	0% {
		offset-distance: 0%;
	}
	100% {
		offset-distance: 100%;
	}
}

/* The moving glyph is replaced by a simple ant with a body, head and legs. */
html body .service-card::before,
html body .work-card::before,
html body .blog-card::before {
	content: none !important;
	display: none !important;
	animation: none !important;
}

html body .card-ant {
	position: absolute;
	z-index: 5;
	width: 24px;
	height: 20px;
	pointer-events: none;
	offset-path: inset(12px round 3px);
	offset-distance: 100%;
	offset-rotate: auto 180deg !important;
	animation: antWalk 8s linear infinite !important;
}

html body .card-ant-face {
	position: absolute;
	inset: 0;
	animation: none !important;
	transform: none !important;
}

html body .card-ant-face::before {
\tcontent: "\\1F41C ";
\tposition: absolute;
\tleft: 0;
\ttop: 0;
\twidth: 24px;
\theight: 20px;
\tfont-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
\tfont-size: 18px;
\tline-height: 20px;
\ttext-align: center;
\tfilter: drop-shadow(1px 1px 0 rgba(16, 16, 20, 0.25));
\tanimation: antBody 0.22s ease-in-out infinite alternate;
\tanimation-duration: 0.22s !important;
\tanimation-iteration-count: infinite !important;
}

html body .card-ant::after {
	display: none !important;
}

@keyframes antBody {
	from {
		transform: translateY(1px) rotate(-7deg) scale(0.92, 0.96);
	}
	to {
		transform: translateY(-1px) rotate(7deg) scale(1.04, 1.02);
	}
}

@keyframes antFacing {
	0%,
	100% {
		transform: rotate(0deg);
	}
}

/* Keep the shutter hidden between transitions and animate only its four panels. */
.page-wipe {
	background: transparent;
	animation: none !important;
	visibility: hidden;
	transform: none !important;
	pointer-events: none;
}

.page-wipe.active,
.page-wipe.exit {
	visibility: visible;
}

.page-wipe.active {
	animation: none !important;
}

.page-wipe span {
	transform-origin: left center;
	transform: rotateY(90deg) translateZ(-20px);
	transition: transform 0.52s var(--comic-ease);
	transition-delay: calc(var(--panel-index, 0) * 50ms);
	backface-visibility: hidden;
}

.page-wipe.active span {
	transform: rotateY(0deg) translateZ(0);
}

.page-wipe.exit span {
	transform-origin: right center;
	transform: rotateY(90deg) translateZ(-20px);
}

/* WordPress-safe animation fallback: content stays visible if JavaScript or observers are unavailable. */
.reveal {
	opacity: 1;
	transform: none;
}
.tnx-js-ready .reveal {
	transition:
		opacity 0.65s ease,
		transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tnx-js-ready .reveal:not(.is-visible) {
	opacity: 0;
	transform: translate3d(0, 22px, 0);
}
.tnx-js-ready .reveal.is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}
@media (prefers-reduced-motion: reduce) {
	.tnx-js-ready .reveal,
	.tnx-js-ready .reveal:not(.is-visible),
	.tnx-js-ready .reveal.is-visible {
		opacity: 1;
		transform: none;
		transition: none;
	}
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Shared layout and image sizing refinements for every page template. */
main,
main article,
main .wrap,
main .entry-content,
main .content-area {
	min-width: 0;
	max-width: 100%;
}

main img {
	max-width: 100%;
}

main p,
main li,
main h1,
main h2,
main h3 {
	overflow-wrap: break-word;
}

.character-strip {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
}

.character-card {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
	min-height: 320px;
}

.character-card > img {
	align-self: end;
	justify-self: center;
	width: 96%;
	height: clamp(280px, 23vw, 340px);
	max-height: none;
	padding: 0;
	object-fit: contain;
	object-position: center bottom;
}

.character-card > div {
	align-self: center;
	padding: 22px 18px 22px 0;
}

.character-card > p:empty,
.character-card > div > p:empty {
	display: none !important;
}

.character-card h3 {
	line-height: 0.98;
}

.character-card p {
	line-height: 1.55;
}

.service-grid,
.work-grid,
.blog-grid,
.character-strip,
.process,
.contact-layout,
.about-grid,
.feature-grid {
	min-width: 0;
}

.service-grid,
.work-grid,
.blog-grid,
.process,
.contact-layout {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.service-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.work-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.process {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.contact-layout {
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.service-card,
.work-card,
.blog-card,
.step,
.contact-card,
.contact-form,
.contact-form-shell,
.fact,
.timeline article {
	min-width: 0;
}

.service-card > img,
.work-card > img,
.blog-art img,
.single-post main article > img,
.single main article > img,
.archive main article img {
	display: block;
	max-width: 100%;
	object-fit: contain;
	object-position: center;
}

.single-post main article > img,
.single main article > img {
	width: min(100%, 960px);
	height: auto;
	margin: 0 0 28px;
}

@media (max-width: 900px) {
	.page-hero .wrap {
		padding-right: clamp(205px, 31vw, 285px);
	}

	.page-hero .page-title {
		max-width: 100%;
		font-size: clamp(54px, 8.5vw, 82px);
	}

	.page-hero p {
		max-width: 100%;
	}

	.page-hero .hero-doodle {
		right: 0;
		width: clamp(190px, 27vw, 245px);
		max-height: 300px;
		object-fit: contain;
		object-position: center bottom;
	}

	.character-strip,
	.service-grid,
	.work-grid,
	.blog-grid,
	.process {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.contact-layout {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body:has(.hero) .hero-copy {
		width: 50%;
	}

	body:has(.hero) .hero-art {
		width: 47%;
		right: 0;
	}

	body:has(.hero) .hero h1 {
		font-size: clamp(78px, 11vw, 112px);
	}
}

@media (max-width: 700px) {
	.page-hero .wrap {
		padding-right: 0;
	}

	.page-hero .page-title {
		font-size: clamp(42px, 11.5vw, 66px);
	}

	.page-hero .hero-doodle {
		position: relative;
		inset: auto;
		align-self: center;
		width: min(66vw, 230px);
		height: auto;
		max-height: 250px;
		margin: 14px auto 0;
	}

	.character-strip,
	.service-grid,
	.work-grid,
	.blog-grid,
	.process,
	.contact-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.character-card {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		min-height: 290px;
	}

	.character-card > img {
		width: 96%;
		height: clamp(240px, 75vw, 310px);
	}

	.character-card > div {
		padding: 18px 14px 18px 0;
	}

	.cta-band .wrap {
		align-items: flex-start;
	}

	.blog-art {
		height: auto;
		min-height: 130px;
		aspect-ratio: 16 / 9;
	}

	.blog-art img {
		width: min(55%, 200px);
		height: 100%;
	}
}

@media (max-width: 380px) {
	.character-card {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.character-card > div {
		padding-right: 10px;
	}

	.character-card h3 {
		font-size: clamp(21px, 6.2vw, 25px);
	}

	.page-hero .hero-doodle {
		width: min(72vw, 220px);
	}
}

/* Match inner-page mascot scale and placement to the homepage hero artwork. */
main > p:empty {
	display: none !important;
}

.site-main > article > p:empty {
	display: none !important;
}

.page-hero {
	min-height: 585px;
	overflow: visible;
	z-index: 2;
}

.page-hero .wrap {
	min-height: 0;
	padding-right: 560px;
}

.page-hero .wrap > p:has(> .hero-doodle) {
	max-width: none;
	margin: 0;
}

.page-hero .hero-doodle {
	top: 77px;
	right: 7.8%;
	bottom: auto;
	width: min(40vw, 380px);
	height: auto;
	aspect-ratio: 2 / 3;
	max-height: none;
	max-width: none;
	margin-block: auto;
	display: block;
	object-fit: contain;
	object-position: center bottom;
	transform: none !important;
	animation: none !important;
}

.about-art > img {
	width: min(88%, 420px);
	height: 360px;
	object-fit: contain;
	object-position: center bottom;
}

.entry-content img {
	display: block;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
	object-fit: contain;
}

@media (max-width: 1100px) and (min-width: 901px) {
	.page-hero {
		min-height: 355px;
	}

	.page-hero .wrap {
		padding-right: clamp(520px, 51vw, 560px);
	}

	.page-hero .page-title {
		font-size: clamp(46px, 6vw, 64px);
	}

	.page-hero .hero-doodle {
		right: 7.8%;
		top: -50px;
		width: min(30vw, 300px);
	}
}

@media (max-width: 900px) and (min-width: 701px) {
	.page-hero {
		min-height: 390px;
	}

	.page-hero .wrap {
		min-height: 0;
		padding-right: 380px;
	}

	.page-hero .page-title {
		font-size: clamp(48px, 8vw, 64px);
	}

	.page-hero .hero-doodle {
		right: 2%;
		top: 45px;
		bottom: auto;
		width: min(34vw, 270px);
	}

	.about-art > img {
		width: min(90%, 380px);
		height: 320px;
	}
}

@media (max-width: 700px) {
	.page-hero {
		min-height: 0;
	}

	.page-hero .wrap {
		min-height: 0;
		padding-right: 0;
	}

	.page-hero .wrap > p:has(> .hero-doodle) {
		margin-top: 16px;
	}

	.page-hero .hero-doodle {
		position: relative;
		inset: auto;
		width: min(35vw, 155px);
		height: auto;
		aspect-ratio: 2 / 3;
		max-height: none;
		margin: 0 auto;
	}

	.about-art > img {
		width: min(92%, 360px);
		height: clamp(280px, 82vw, 340px);
	}
}

/* Keep inner-page artwork inside its hero at every non-mobile breakpoint. */
@media (min-width: 1101px) {
	.page-hero .hero-doodle {
		top: 50px;
		width: min(36vw, 340px);
	}
}

@media (max-width: 1100px) and (min-width: 901px) {
	.page-hero {
		min-height: clamp(470px, 48vw, 500px);
	}

	.page-hero .hero-doodle {
		top: 60px;
		width: clamp(240px, 26vw, 280px);
	}
}

@media (max-width: 900px) and (min-width: 701px) {
	.page-hero {
		min-height: clamp(420px, 52vw, 468px);
	}

	.page-hero .hero-doodle {
		top: 68px;
		width: clamp(190px, 28vw, 245px);
	}
}

/* Keep featured card images in normal flow and WordPress content media bounded. */
.service-card > img {
	display: block;
	align-self: center;
	width: min(100%, 320px);
	height: clamp(120px, 20vw, 190px);
	margin: 0 auto 10px;
	flex: 0 0 auto;
	object-fit: contain;
	object-position: center;
}

main .entry-content > * {
	max-width: 100%;
}

main .entry-content iframe,
main .entry-content video,
main .entry-content embed,
main .entry-content object {
	max-width: 100%;
}

main .entry-content table,
main .entry-content pre {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

@media (max-width: 700px) {
	.service-card > img {
		height: 150px;
	}
}

/* Keep card artwork fully visible without letting hover effects crop it. */
.blog-art {
	height: clamp(170px, 18vw, 210px);
	overflow: hidden;
}

.blog-art img {
	display: block;
	width: auto;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: center;
	transform: none;
}

.blog-card:hover .blog-art img {
	transform: translateY(-3px);
}

@media (max-width: 700px) {
	.blog-art {
		height: auto;
		min-height: 160px;
		aspect-ratio: 16 / 9;
	}

	.blog-art img {
		width: auto;
		height: auto;
		max-width: min(100%, 240px);
		max-height: 100%;
	}
}

.tnx-card-link {
	display: block;
	width: 100%;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.tnx-card-link:focus-visible {
	outline: 3px solid var(--red);
	outline-offset: 4px;
}

.tnx-dynamic-cards .tnx-card-link > img {
	display: block;
	width: min(100%, 320px);
	height: clamp(120px, 20vw, 190px);
	margin: 0 auto 10px;
	flex: 0 0 auto;
	object-fit: contain;
	object-position: center;
}

.blog-card > .tnx-card-link {
	height: auto;
}

.blog-art img {
	transform: none !important;
}

.blog-card:hover .blog-art img {
	transform: translateY(-3px) !important;
}

.character-card > .tnx-card-link {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: inherit;
	align-items: inherit;
}

.character-card > .tnx-card-link > div {
	align-self: center;
	min-width: 0;
	padding: 22px 18px 22px 0;
}

.character-card > .tnx-card-link > img {
	width: 96%;
	height: clamp(200px, 23vw, 320px);
	max-width: 100%;
	margin: 0 auto;
	padding: 8px;
	object-fit: contain;
	object-position: center bottom;
}

.work-card > .tnx-card-link > img {
	width: min(100%, 280px);
	height: 150px;
	margin: 0 auto 10px;
	object-fit: contain;
}

.tnx-card-pagination {
	display: flex;
	justify-content: center;
	margin: 24px auto 0;
}

.tnx-card-pagination .page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tnx-card-pagination .page-numbers li {
	margin: 0;
	padding: 0;
}

.tnx-card-pagination a,
.tnx-card-pagination .page-numbers.current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 8px 12px;
	border: 2px solid var(--ink);
	background: var(--white);
	color: var(--ink);
	font-weight: 800;
	text-decoration: none;
}

.tnx-card-pagination .page-numbers.current {
	background: var(--red);
	color: #fff;
}

.single-article {
	width: min(100%, 900px);
	margin-inline: auto;
}

.single-article-header {
	margin-bottom: 24px;
}

.single-article-header h1 {
	font: 900 clamp(44px, 7vw, 84px) / 0.9 var(--font-head);
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.single-featured-image {
	display: block;
	width: min(100%, 900px);
	height: auto;
	max-height: 70vh;
	margin: 0 auto 28px;
	object-fit: contain;
	object-position: center;
}

.single-article .entry-content img,
.single-article .entry-content video,
.single-article .entry-content iframe {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 24px auto;
}

.single-article .entry-content table,
.single-article .entry-content pre {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

@media (max-width: 700px) {
	.character-card > .tnx-card-link > div {
		padding: 14px 12px 18px 0;
	}

	.tnx-dynamic-cards .tnx-card-link > img {
		height: 150px;
	}

	.character-card > .tnx-card-link > img {
		height: clamp(160px, 52vw, 210px);
		padding: 6px;
	}

	.single-article-header h1 {
		font-size: clamp(38px, 11vw, 60px);
	}
}

.tnx-page-repeater-grid .tnx-card-link {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

.tnx-page-repeater-grid .tnx-repeater-card-image {
	display: block;
	width: min(100%, 320px);
	height: clamp(130px, 20vw, 210px);
	max-width: 100%;
	margin: 0 auto 10px;
	object-fit: contain;
	object-position: center;
}

.tnx-page-repeater-grid .blog-card > .tnx-card-link {
	display: block;
	height: auto;
}

.tnx-page-repeater-grid .blog-art .tnx-repeater-card-image {
	height: 90%;
	max-height: 90%;
}

.tnx-page-repeater-grid.blog-grid .blog-art {
	background: #b8e4ff;
}

.tnx-page-repeater-grid.blog-grid .blog-card.tnx-image-position-left > .tnx-card-link,
.tnx-page-repeater-grid.blog-grid .blog-card.tnx-image-position-right > .tnx-card-link {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	align-items: stretch;
}

.tnx-page-repeater-grid.blog-grid .blog-card.tnx-image-position-left .blog-art,
.tnx-page-repeater-grid.blog-grid .blog-card.tnx-image-position-right .blog-art {
	height: 100%;
	min-height: 240px;
	border: 0;
}

.tnx-page-repeater-grid.blog-grid .blog-card.tnx-image-position-left .blog-art img,
.tnx-page-repeater-grid.blog-grid .blog-card.tnx-image-position-right .blog-art img {
	width: 90%;
	height: auto;
	max-height: 90%;
	margin: 0;
}

.tnx-page-repeater-grid.blog-grid .blog-card.tnx-image-position-right > .tnx-card-link {
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.tnx-page-repeater-grid.blog-grid .blog-card.tnx-image-position-right .blog-art {
	grid-column: 2;
	grid-row: 1;
	background: #e7d7ff;
}

.tnx-page-repeater-grid.blog-grid .blog-card.tnx-image-position-right .blog-copy {
	grid-column: 1;
	grid-row: 1;
}

.tnx-page-repeater-grid.blog-grid .blog-card.tnx-image-position-left .blog-art {
	background: #ffd7d7;
}

.tnx-page-repeater-grid.blog-grid .blog-card.tnx-image-position-bottom > .tnx-card-link {
	display: flex;
	flex-direction: column;
}

.tnx-page-repeater-grid.blog-grid .blog-card.tnx-image-position-bottom .blog-copy {
	order: 1;
}

.tnx-page-repeater-grid.blog-grid .blog-card.tnx-image-position-bottom .blog-art {
	order: 2;
	height: clamp(150px, 16vw, 200px);
	border-top: var(--line);
	border-bottom: 0;
	background: #fff0c2;
}

.tnx-page-repeater-grid.blog-grid .blog-card.tnx-image-position-bottom .blog-art img {
	height: 86%;
	max-height: 86%;
}

.tnx-page-repeater-grid .character-card:hover img {
	transform: none;
}

.tnx-page-repeater-grid .character-card > .tnx-card-link {
	display: grid;
}

.tnx-page-repeater-grid .work-card > .tnx-card-link {
	min-height: 100%;
	justify-content: space-between;
}

.tnx-page-repeater-grid .service-card {
	min-height: 270px;
}

.tnx-page-repeater-grid .service-card > .tnx-card-link > .tnx-repeater-card-image {
	height: 110px;
	margin-bottom: 6px;
}

.tnx-page-repeater-grid .work-card {
	min-height: 350px;
}

.tnx-page-repeater-grid .work-card > .tnx-card-link > .tnx-repeater-card-image {
	height: 170px;
}

.tnx-page-repeater-grid.process .step > .tnx-card-link {
	height: 100%;
}

.tnx-pdf-chat {
	position: fixed;
	right: max(20px, env(safe-area-inset-right));
	bottom: max(20px, env(safe-area-inset-bottom));
	z-index: 10001;
	font-family: var(--font-body);
}

.tnx-pdf-chat__toggle {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 13px 19px;
	border: var(--line);
	background: var(--red);
	box-shadow: 5px 5px 0 var(--ink);
	color: #fff;
	font: 900 13px/1 var(--font-body);
	text-transform: uppercase;
	cursor: pointer;
}

.tnx-pdf-chat__icon {
	display: block;
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
}

.tnx-pdf-chat__panel {
	display: flex;
	flex-direction: column;
	width: min(370px, calc(100vw - 32px));
	height: min(540px, calc(100dvh - 110px));
	min-height: 300px;
	margin-bottom: 14px;
	border: var(--line);
	background: var(--white);
	box-shadow: 7px 7px 0 var(--ink);
}

.tnx-pdf-chat__panel[hidden] {
	display: none;
}

.tnx-pdf-chat__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	border-bottom: var(--line);
	background: var(--blue);
}

.tnx-pdf-chat__header div {
	display: grid;
	gap: 3px;
}

.tnx-pdf-chat__header strong {
	font: 900 22px/1 var(--font-head);
	text-transform: uppercase;
}

.tnx-pdf-chat__header span,
.tnx-pdf-chat__note {
	font-size: 11px;
	line-height: 1.45;
}

.tnx-pdf-chat__close {
	width: 34px;
	height: 34px;
	border: 2px solid var(--ink);
	background: var(--white);
	font-size: 23px;
	line-height: 1;
	cursor: pointer;
}

.tnx-pdf-chat__messages {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	min-height: 0;
	padding: 14px;
	overflow-y: auto;
}

.tnx-pdf-chat__message {
	max-width: 92%;
	padding: 10px 12px;
	border: 2px solid var(--ink);
	font-size: 13px;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.tnx-pdf-chat__message p {
	margin: 0;
}

.tnx-pdf-chat__message span,
.tnx-pdf-chat__message a {
	display: inline-block;
	margin-top: 7px;
	font-size: 11px;
	font-weight: 800;
}

.tnx-pdf-chat__message--bot {
	align-self: flex-start;
	background: #e5f5f9;
}

.tnx-pdf-chat__message--visitor {
	align-self: flex-end;
	background: #fff0e8;
}

.tnx-pdf-chat__message--error {
	align-self: flex-start;
	background: #fff0e8;
}

.tnx-pdf-chat__status {
	min-height: 0;
	margin: 0;
	padding: 0 14px;
	color: #555;
	font-size: 11px;
}

.tnx-pdf-chat__status:not(:empty) {
	padding-top: 5px;
}

.tnx-pdf-chat__form {
	display: flex;
	gap: 8px;
	padding: 12px;
	border-top: 1px solid #10101430;
}

.tnx-pdf-chat__label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.tnx-pdf-chat__form input {
	width: 0;
	min-width: 0;
	flex: 1;
	padding: 11px;
	border: 2px solid var(--ink);
	background: #fff;
	font: inherit;
	font-size: 13px;
}

.tnx-pdf-chat__form button {
	padding: 0 14px;
	border: 2px solid var(--ink);
	background: var(--red);
	color: #fff;
	font: 900 12px var(--font-body);
	text-transform: uppercase;
	cursor: pointer;
}

.tnx-pdf-chat__form button:disabled {
	cursor: wait;
	opacity: 0.55;
}

.tnx-pdf-chat__note {
	margin: 0;
	padding: 0 12px 10px;
	color: #555;
}

@media (max-width: 700px) {
	.tnx-page-repeater-grid .tnx-repeater-card-image {
		height: 150px;
	}

	.tnx-pdf-chat {
		right: max(14px, env(safe-area-inset-right));
		bottom: max(14px, env(safe-area-inset-bottom));
	}

	.tnx-pdf-chat__panel {
		height: min(72dvh, 540px);
		margin-bottom: 11px;
	}

	.tnx-page-repeater-grid.blog-grid .blog-card.tnx-image-position-top .blog-art,
	.tnx-page-repeater-grid.blog-grid .blog-card.tnx-image-position-bottom .blog-art {
		height: auto;
		min-height: 170px;
		aspect-ratio: 16 / 9;
	}

	.tnx-page-repeater-grid.blog-grid .blog-card.tnx-image-position-top .blog-art img,
	.tnx-page-repeater-grid.blog-grid .blog-card.tnx-image-position-bottom .blog-art img {
		max-height: 86%;
	}

	.tnx-page-repeater-grid.blog-grid .blog-card.tnx-image-position-left > .tnx-card-link,
	.tnx-page-repeater-grid.blog-grid .blog-card.tnx-image-position-right > .tnx-card-link {
		display: flex;
		flex-direction: column;
	}

	.tnx-page-repeater-grid.blog-grid .blog-card.tnx-image-position-left .blog-art,
	.tnx-page-repeater-grid.blog-grid .blog-card.tnx-image-position-right .blog-art {
		width: 100%;
		height: auto;
		min-height: 170px;
		aspect-ratio: 16 / 9;
	}

	.tnx-page-repeater-grid.blog-grid .blog-card.tnx-image-position-left .blog-art {
		order: 0;
	}

	.tnx-page-repeater-grid.blog-grid .blog-card.tnx-image-position-right .blog-art {
		order: 2;
		border-top: var(--line);
		border-bottom: 0;
	}

	.tnx-page-repeater-grid.blog-grid .blog-card.tnx-image-position-left .blog-copy,
	.tnx-page-repeater-grid.blog-grid .blog-card.tnx-image-position-right .blog-copy {
		order: 1;
		width: auto;
		padding: 13px 10px;
	}

	.tnx-page-repeater-grid.blog-grid .blog-card.tnx-image-position-left .blog-art img,
	.tnx-page-repeater-grid.blog-grid .blog-card.tnx-image-position-right .blog-art img {
		width: min(78%, 300px);
		height: 86%;
		max-height: 86%;
		margin: 0;
	}

	.tnx-page-repeater-grid.blog-grid .blog-card.tnx-image-position-left .blog-copy h3,
	.tnx-page-repeater-grid.blog-grid .blog-card.tnx-image-position-right .blog-copy h3 {
		font-size: clamp(19px, 5.5vw, 25px);
	}

	.tnx-page-repeater-grid .service-card > .tnx-card-link > .tnx-repeater-card-image {
		height: 100px;
	}

	.tnx-page-repeater-grid .work-card {
		min-height: 300px;
	}
}

/* =========================================================
   TRAINONEX PREMIUM UI REFRESH
   Refined typography, spacing, responsive alignment and cards
   ========================================================= */
:root {
  --tnx-bg: #07111d;
  --tnx-bg-deep: #030810;
  --tnx-surface: #0d1b2a;
  --tnx-surface-2: #112538;
  --tnx-text: #f7f9fc;
  --tnx-muted: #aebdca;
  --tnx-line: rgba(255,255,255,.12);
  --tnx-accent: #ff2446;
  --tnx-accent-2: #d91032;
  --tnx-radius: 18px;
  --tnx-shadow: 0 22px 70px rgba(0,0,0,.24);
}
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
  background: var(--tnx-bg-deep);
  color: var(--tnx-text);
  font-family: "DM Sans", Inter, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
}
body:before { opacity: .025; background-size: 7px 7px; }
.wrap { width: min(1280px, calc(100% - 64px)); }
.topline { display: none; }
.header {
  background: rgba(3,8,16,.88);
  border-bottom: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
  backdrop-filter: blur(18px);
}
.nav {
  min-height: 82px;
  grid-template-columns: minmax(190px, 250px) 1fr auto;
  gap: clamp(18px, 3vw, 44px);
}
.logo { max-width: 250px; }
.logo img { width: clamp(170px, 17vw, 220px); max-height: 66px; }
.links .nav-list { gap: clamp(14px, 1.8vw, 30px); }
.links .nav-list a {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .045em;
  color: #f5f7fa;
  transition: color .2s ease;
}
.links .nav-list a:hover,
.links .nav-list .current-menu-item > a { color: var(--tnx-accent); }
.button {
  border: 1px solid var(--tnx-accent);
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(255,36,70,.22);
  padding: 14px 23px;
  font-size: 12px;
  letter-spacing: .06em;
  transform: none;
}
.button:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(255,36,70,.3); }
.header-cta { padding: 13px 22px; }
.menu-btn { border: 1px solid rgba(255,255,255,.25); border-radius: 12px; background: var(--tnx-accent); color: white; }
.hero {
  min-height: 650px;
  background:
    radial-gradient(ellipse at 78% 40%, rgba(26,102,139,.38), transparent 42%),
    radial-gradient(ellipse at 15% 70%, rgba(13,44,69,.34), transparent 48%),
    linear-gradient(115deg, #030810 0%, #071522 56%, #0a2639 100%);
  border-bottom: 1px solid var(--tnx-line);
  isolation: isolate;
}
.hero:before {
  background:
    linear-gradient(135deg, transparent 0 48%, rgba(38,142,183,.08) 48.1% 48.35%, transparent 48.5%),
    repeating-linear-gradient(168deg, transparent 0 56px, rgba(255,36,70,.09) 57px 59px, transparent 60px 112px);
  opacity: .55;
  mask-image: linear-gradient(90deg, transparent 0%, #000 35%, #000 100%);
}
.hero:after { content: ""; display: none; }
.hero-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  align-items: center;
  gap: clamp(32px, 5vw, 76px);
  padding: clamp(68px, 8vw, 112px) 0 clamp(58px, 7vw, 92px);
}
.hero-copy { min-width: 0; max-width: 690px; }
.eyebrow {
  color: #d8e2eb;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 11px;
  letter-spacing: .16em;
  line-height: 1.5;
}
.eyebrow:before { width: 28px; height: 3px; border-radius: 4px; }
.hero h1 {
  max-width: 720px;
  margin: 25px 0 22px;
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: clamp(54px, 6.15vw, 94px);
  font-weight: 900;
  line-height: .96;
  letter-spacing: -.025em;
  text-wrap: balance;
  overflow-wrap: normal;
}
.hero h1 span {
  color: var(--tnx-accent);
  display: inline;
  transform: none;
  text-shadow: none;
}
.hero h1 small {
  display: block;
  margin-top: 8px;
  color: #dce7ef;
  font: 700 clamp(18px, 2vw, 25px)/1.35 "DM Sans", Arial, sans-serif;
  letter-spacing: 0;
  text-transform: none;
}
.hero-copy > p {
  max-width: 570px;
  margin: 0;
  color: #c4d0da;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.8;
}
.hero-foot { margin-top: 30px; gap: 16px; }
.hero-foot > a:not(.button) {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: #f5f7fa !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 0 4px;
  border-bottom: 1px solid rgba(255,255,255,.35);
}
.stats {
  max-width: 570px;
  margin-top: 38px;
  padding-top: 22px;
  border-top: 1px solid var(--tnx-line);
}
.stat { padding: 0 clamp(14px, 2vw, 28px); border-color: var(--tnx-line); }
.stat b { font: 800 30px/1 "Barlow Condensed", sans-serif; color: var(--tnx-accent); }
.stat span { font-size: 10px; color: #b8c6d1; letter-spacing: .1em; }
.hero-art {
  align-self: stretch;
  min-height: 490px;
  max-height: 610px;
  align-items: flex-end;
  justify-content: center;
  isolation: isolate;
}
.hero-art:before {
  content: "";
  position: absolute;
  width: min(92%, 500px);
  aspect-ratio: 1;
  bottom: 2%;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(18,119,166,.28), rgba(18,119,166,.05) 58%, transparent 70%);
  z-index: -1;
}
.hero-art img {
  width: min(100%, 510px);
  max-height: 590px;
  object-position: bottom center;
  filter: drop-shadow(0 24px 34px rgba(0,0,0,.34));
}
.speech {
  top: 8%;
  right: -1%;
  max-width: 180px;
  padding: 13px 16px;
  border: 1px solid #20232a;
  border-radius: 22px;
  background: #fff8e9;
  box-shadow: 0 5px 0 var(--tnx-accent);
  font: 800 16px/1.15 "DM Sans", Arial, sans-serif;
  letter-spacing: -.02em;
  transform: rotate(4deg);
}
.speech:after { border-color: #20232a transparent transparent transparent; }
.ticker {
  background: var(--tnx-accent);
  border: 0;
}
.ticker span {
  padding: 14px 28px;
  font: 800 17px/1.2 "DM Sans", Arial, sans-serif;
  letter-spacing: .04em;
}
.ticker span:after { padding-left: 32px; color: #fff; }
.section {
  padding: clamp(64px, 7vw, 100px) 0;
  border-bottom: 1px solid var(--tnx-line);
  background: #07111d;
}
.section.dark { background: #030a12; color: var(--tnx-text); }
.section.blue { background: #0b1d2d; color: var(--tnx-text); }
.section.red { background: var(--tnx-accent); }
.section-head { align-items: end; gap: 40px; margin-bottom: 38px; }
.section-head h2, .page-title {
  font: 800 clamp(38px, 4.7vw, 66px)/1.04 "Barlow Condensed", Impact, sans-serif;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.section-head h2 em, .page-title em { color: var(--tnx-accent); }
.section-head p {
  max-width: 470px;
  color: var(--tnx-muted);
  font-size: 15px;
  line-height: 1.8;
}
.comic-label {
  border: 0;
  border-radius: 5px;
  background: rgba(255,36,70,.14);
  color: #ff8b9e;
  padding: 7px 10px;
  font: 800 11px/1.2 "DM Sans", Arial, sans-serif;
  letter-spacing: .1em;
  transform: none;
}
.about-grid { gap: clamp(32px, 5vw, 72px); }
.about-grid p { color: var(--tnx-muted); font-size: 15px !important; line-height: 1.85 !important; }
.about-art {
  min-height: 360px;
  border: 1px solid var(--tnx-line);
  border-radius: var(--tnx-radius);
  background: linear-gradient(145deg, #122e43, #0a1825);
  box-shadow: var(--tnx-shadow);
}
.about-art img { max-height: 380px; filter: drop-shadow(0 16px 24px rgba(0,0,0,.28)); }
.comic-panel { border: 1px solid var(--tnx-line); border-radius: var(--tnx-radius); box-shadow: var(--tnx-shadow); }
.service-grid { gap: 18px; }
.service-card {
  min-height: 245px;
  padding: 26px;
  border: 1px solid var(--tnx-line);
  border-radius: var(--tnx-radius);
  box-shadow: none;
  background: var(--tnx-surface) !important;
  color: var(--tnx-text);
}
.service-card:nth-child(3n + 2) { background: var(--tnx-surface-2) !important; }
.service-card:nth-child(3n) { background: #132337 !important; }
.service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,36,70,.6);
  box-shadow: 0 18px 42px rgba(0,0,0,.22);
}
.service-card .num {
  border: 0;
  border-radius: 7px;
  background: rgba(255,36,70,.15);
  color: #ff8295;
  padding: 7px 10px;
  font: 800 12px "DM Sans", Arial, sans-serif;
}
.service-card h3 {
  max-width: 100%;
  margin: 24px 0 12px;
  color: #f6f8fb;
  font: 800 clamp(21px, 2vw, 27px)/1.12 "DM Sans", Arial, sans-serif;
  letter-spacing: -.025em;
  text-transform: none;
}
.service-card p {
  max-width: 100%;
  color: #b5c3cf;
  font-size: 14px;
  line-height: 1.75;
}
.service-card .card-arrow { color: var(--tnx-accent); }
.process { gap: 14px; }
.step {
  min-height: 190px;
  padding: 24px;
  border: 1px solid var(--tnx-line);
  border-radius: var(--tnx-radius);
  background: var(--tnx-surface);
  color: var(--tnx-text);
}
.step b { color: var(--tnx-accent); font: 800 32px "Barlow Condensed", sans-serif; }
.step h3 { margin: 20px 0 8px; font: 700 20px/1.25 "DM Sans", Arial, sans-serif; text-transform: none; }
.step p { color: var(--tnx-muted); font-size: 13px; line-height: 1.7; }
.step:not(:last-child):after {
  right: -17px; width: 24px; height: 24px; border: 0; border-radius: 50%;
  background: var(--tnx-accent); color: white;
}
.character-strip { gap: 18px; }
.character-card {
  min-height: 220px;
  border: 1px solid var(--tnx-line);
  border-radius: var(--tnx-radius);
  background: var(--tnx-surface);
  color: var(--tnx-text);
}
.character-card:nth-child(2) { background: var(--tnx-surface-2); }
.character-card:nth-child(3) { background: #132337; }
.character-card h3 { font: 700 21px/1.2 "DM Sans", Arial, sans-serif; text-transform: none; }
.character-card p { color: var(--tnx-muted); font-size: 13px; line-height: 1.65; }
.cta-band {
  padding: clamp(42px, 6vw, 72px) 0;
  border: 0;
  background: linear-gradient(110deg, #e91439, #ff3152);
}
.cta-band h2 {
  font: 800 clamp(34px, 4.6vw, 60px)/1.04 "Barlow Condensed", sans-serif;
  letter-spacing: -.015em;
}
.cta-band .button { background: #07111d; border-color: #07111d; box-shadow: none; }
.page-hero {
  padding: clamp(62px, 8vw, 100px) 0 clamp(52px, 6vw, 78px);
  background:
    radial-gradient(ellipse at 78% 30%, rgba(26,102,139,.28), transparent 40%),
    linear-gradient(120deg, #030810, #0b1d2d);
  border-bottom: 1px solid var(--tnx-line);
}
.page-hero .page-title { max-width: 820px; font-size: clamp(42px, 5.6vw, 76px); line-height: 1.02; }
.page-hero p { max-width: 620px; color: #c1ccd6; font-size: 16px; line-height: 1.8; }
.page-hero .hero-doodle {
  right: 2%; top: -25px; width: min(31vw, 340px);
  opacity: .82; filter: drop-shadow(0 18px 28px rgba(0,0,0,.28));
}
.about-facts { border: 1px solid var(--tnx-line); border-radius: var(--tnx-radius); background: var(--tnx-surface); }
.fact { border-color: var(--tnx-line); }
.fact span { color: var(--tnx-muted); font-size: 11px; }
.contact-layout { gap: 24px; }
.contact-card, .contact-form {
  border: 1px solid var(--tnx-line);
  border-radius: var(--tnx-radius);
  box-shadow: var(--tnx-shadow);
}
.contact-card { background: var(--tnx-surface-2); color: var(--tnx-text); padding: 30px; }
.contact-card h3 { font: 800 34px/1.12 "DM Sans", Arial, sans-serif; text-transform: none; }
.contact-row { border-color: var(--tnx-line); color: #d0dbe4; font-size: 14px; line-height: 1.65; }
.contact-form { background: var(--tnx-surface); padding: 28px; }
.field label { color: #dbe4ec; font-size: 11px; letter-spacing: .08em; }
.field input, .field textarea, .field select {
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 9px;
  background: #07111d;
  color: #f7f9fc;
  padding: 14px 15px;
  font-size: 14px;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 2px solid rgba(255,36,70,.45);
  border-color: var(--tnx-accent);
}
.footer, .tnx-site-footer { background: #030810; color: var(--tnx-text); }
.footer-description, .tnx-footer-brand p, .tnx-footer-contact p { color: #aebdca; }
.footer-links a, .tnx-site-footer a { color: #d1dbe4; }
.reveal { transition-duration: .7s; }
@media (max-width: 1100px) {
  .nav { grid-template-columns: minmax(165px, 205px) 1fr auto; gap: 18px; }
  .links .nav-list { gap: 13px; }
  .links .nav-list a { font-size: 10px; }
  .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); gap: 26px; }
  .hero h1 { font-size: clamp(52px, 6.5vw, 76px); }
}
@media (max-width: 900px) {
  .wrap { width: min(100% - 44px, 760px); }
  .nav { min-height: 74px; grid-template-columns: 1fr auto auto; }
  .logo img { width: 180px; }
  .hero { min-height: 0; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(260px, .82fr); padding: 64px 0 52px; }
  .hero h1 { font-size: clamp(48px, 7vw, 68px); }
  .hero-art { min-height: 390px; }
  .speech { right: 0; max-width: 145px; font-size: 13px; }
  .section-head { align-items: flex-start; flex-direction: column; gap: 15px; }
  .service-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .process { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .step:not(:last-child):after { display: none; }
}
@media (max-width: 620px) {
  .wrap { width: calc(100% - 36px); }
  .nav { min-height: 68px; grid-template-columns: minmax(0,1fr) auto; gap: 10px; }
  .logo img { width: 155px; max-height: 48px; }
  .header-cta { display: none; }
  .hero-grid { grid-template-columns: 1fr; gap: 20px; padding: 56px 0 36px; }
  .hero-copy { max-width: none; }
  .hero h1 { max-width: 100%; margin: 18px 0 16px; font-size: clamp(43px, 12vw, 62px); line-height: .99; letter-spacing: -.02em; }
  .hero h1 small { font-size: 17px; line-height: 1.4; margin-top: 9px; }
  .hero-copy > p { font-size: 14px; line-height: 1.75; }
  .hero-foot { gap: 12px; margin-top: 22px; }
  .hero-foot .button { width: 100%; }
  .hero-foot > a:not(.button) { min-height: 42px; }
  .stats { margin-top: 26px; padding-top: 17px; }
  .stat { flex: 1; padding: 0 10px; }
  .stat b { font-size: 25px; }
  .stat span { font-size: 8px; letter-spacing: .05em; }
  .hero-art { min-height: 310px; max-height: 390px; }
  .hero-art img { width: min(84%, 330px); max-height: 390px; }
  .speech { top: 2%; right: 2%; max-width: 130px; padding: 10px 12px; font-size: 12px; }
  .ticker span { padding: 12px 18px; font-size: 14px; }
  .section { padding: 54px 0; }
  .section-head h2, .page-title { font-size: clamp(36px, 10vw, 48px); }
  .about-grid { grid-template-columns: 1fr; gap: 26px; }
  .about-art { min-height: 280px; }
  .service-grid, .process, .character-strip, .blog-grid, .work-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 0; padding: 22px; }
  .service-card h3 { font-size: 22px; }
  .step { min-height: 0; }
  .cta-band .wrap { align-items: flex-start; flex-direction: column; }
  .cta-band h2 { font-size: 38px; }
  .page-hero { padding: 54px 0 44px; }
  .page-hero .page-title { max-width: 100%; font-size: clamp(38px, 10vw, 52px); }
  .page-hero .hero-doodle { position: relative; display: block; top: auto; right: auto; width: min(75%, 250px); max-height: 210px; margin: 18px auto -10px; }
  .contact-layout { grid-template-columns: 1fr; }
  .contact-form { grid-template-columns: 1fr; padding: 20px; }
  .field.full { grid-column: auto; }
  .about-facts { grid-template-columns: 1fr; }
  .fact { border-right: 0; border-bottom: 1px solid var(--tnx-line); }
  .fact:last-child { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *:before, *:after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Hero final tuning: readable headline and a more relevant laptop mascot */
.hero h1 {
  font-size: clamp(44px, 4.65vw, 68px);
  line-height: 1.045;
  letter-spacing: -.022em;
  max-width: 680px;
  margin: 22px 0 18px;
}
.hero h1 small {
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.4;
  margin-top: 7px;
  font-weight: 600;
}
.hero-copy > p {
  max-width: 550px;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.72;
}
.hero-art {
  min-height: 430px;
  max-height: 540px;
}
.hero-art img {
  width: min(100%, 445px);
  max-height: 520px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.32));
}
.speech { font-size: 14px; max-width: 160px; }
@media (max-width: 1100px) {
  .hero h1 { font-size: clamp(42px, 5.4vw, 58px); }
  .hero-art { min-height: 380px; }
}
@media (max-width: 900px) {
  .hero h1 { font-size: clamp(40px, 5.8vw, 54px); }
  .hero-art { min-height: 360px; }
}
@media (max-width: 620px) {
  .hero h1 {
    font-size: clamp(38px, 9.2vw, 48px);
    line-height: 1.04;
    margin: 17px 0 14px;
  }
  .hero h1 small { font-size: 16px; }
  .hero-art { min-height: 300px; max-height: 350px; }
  .hero-art img { width: min(82%, 300px); max-height: 350px; }
  .speech { font-size: 11px; max-width: 125px; }
}

/* =========================================================
   APPROVED TRAINONEX HERO — matched to client reference
   ========================================================= */
.tnx-approved-hero {
  min-height: 690px;
  background:
    radial-gradient(ellipse at 77% 45%, rgba(92,22,49,.25), transparent 38%),
    radial-gradient(ellipse at 86% 68%, rgba(27,54,88,.48), transparent 48%),
    linear-gradient(112deg,#070d17 0%,#0b1321 56%,#101b2b 100%);
  border-bottom: 0;
}
.tnx-approved-hero:before {
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 18% 28%,rgba(255,255,255,.045) 0 1px,transparent 1.5px),
    linear-gradient(145deg,transparent 55%,rgba(255,36,70,.055) 55.2%,transparent 56%);
  background-size:8px 8px,auto;
  opacity:.5;
  mask-image:linear-gradient(90deg,#000 0%,#000 45%,transparent 100%);
}
.tnx-approved-hero:after { display:none; }
.tnx-approved-hero .hero-grid {
  grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);
  gap:clamp(24px,3vw,48px);
  padding:clamp(54px,6vw,78px) 0 58px;
  align-items:center;
}
.tnx-approved-hero .hero-copy {max-width:720px;position:relative;z-index:2;}
.tnx-service-pill {
  display:inline-flex; align-items:center; gap:12px;
  max-width:100%; flex-wrap:wrap;
  padding:9px 15px;
  border:1px solid rgba(205,220,237,.32);
  border-radius:999px;
  background:rgba(255,255,255,.07);
  color:#e7edf5;
  font:600 12px/1.4 "DM Sans",Arial,sans-serif;
  letter-spacing:.01em;
  margin-bottom:24px;
}
.tnx-service-pill .tnx-pill-dot {
  width:9px;height:9px;border-radius:50%;background:#ff2446;flex:0 0 auto;
  box-shadow:0 0 12px rgba(255,36,70,.7);
}
.tnx-service-pill i {
  width:1px;height:14px;background:rgba(255,255,255,.45);display:inline-block;
}
.tnx-approved-hero .hero h1,
.tnx-approved-hero h1 {
  max-width:720px;
  margin:0 0 20px;
  color:#f8fafc;
  font:800 clamp(42px,4.05vw,64px)/1.08 "DM Sans",Arial,sans-serif;
  letter-spacing:-.045em;
  text-transform:none;
  text-wrap:balance;
}
.tnx-approved-hero h1 span {
  display:inline;
  color:#ff2446;
  transform:none;
  text-shadow:none;
  white-space:normal;
}
.tnx-approved-hero .hero-copy > p {
  max-width:640px;
  margin:0;
  color:#d0d8e2;
  font:400 clamp(14px,1.08vw,16px)/1.72 "DM Sans",Arial,sans-serif;
}
.tnx-approved-hero .hero-foot {
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:27px;
}
.tnx-approved-hero .hero-foot .button {
  min-height:52px;padding:14px 24px;border:1px solid #ff2446;border-radius:999px;
  background:#ff2446;color:#fff;box-shadow:0 10px 25px rgba(255,36,70,.2);
  transform:none;font:700 14px/1 "DM Sans",Arial,sans-serif;letter-spacing:0;
}
.tnx-approved-hero .hero-foot .button:hover {transform:translateY(-2px);background:#e91b3d;}
.tnx-approved-hero .hero-foot .button b {font-size:20px;line-height:0;margin-left:6px;}
.tnx-secondary-cta {
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  min-height:52px;padding:12px 22px;border:1px solid rgba(235,242,250,.75);
  border-radius:999px;color:#f7f9fc;text-decoration:none;
  font:700 14px/1 "DM Sans",Arial,sans-serif;
  transition:background .2s,border-color .2s,transform .2s;
}
.tnx-secondary-cta span {
  width:23px;height:23px;border:1px solid rgba(255,255,255,.85);border-radius:50%;
  display:grid;place-items:center;font-size:10px;padding-left:2px;
}
.tnx-secondary-cta:hover {background:rgba(255,255,255,.1);border-color:#fff;transform:translateY(-2px);}
.tnx-hero-services {
  display:flex;align-items:center;gap:0;margin-top:34px;max-width:680px;
}
.tnx-hero-services > div {
  min-height:48px;display:flex;align-items:center;gap:11px;
  padding:0 clamp(12px,1.6vw,23px);border-right:1px solid rgba(255,255,255,.22);
  color:#e8edf4;font:600 11px/1.35 "DM Sans",Arial,sans-serif;
}
.tnx-hero-services > div:first-child {padding-left:0;}
.tnx-hero-services > div:last-child {border-right:0;padding-right:0;}
.tnx-service-icon {color:#f4f7fb;font-size:25px;line-height:1;flex:0 0 auto;}
.tnx-hero-tagline {
  display:flex;align-items:center;gap:12px;margin-top:27px;
  color:#f0f3f8;font:italic 600 clamp(14px,1.35vw,18px)/1.4 "DM Sans",Arial,sans-serif;
}
.tnx-hero-tagline b {color:#ff2446;font:900 34px/1 "DM Sans",Arial,sans-serif;}
.tnx-hero-tagline strong {color:#ff2446;font-weight:700;}
.tnx-approved-art {
  min-height:560px;max-height:650px;align-self:stretch;
  display:flex;align-items:center;justify-content:center;overflow:visible;
}
.tnx-approved-art:before {display:none;}
.tnx-approved-art img {
  display:block;width:clamp(480px,54vw,760px);max-width:none;height:auto;
  max-height:650px;object-fit:contain;object-position:center;
  filter:none;transform:none;animation:tnxCharacterIn .85s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes tnxCharacterIn {
  from {opacity:0;transform:translate3d(30px,18px,0) scale(.97);}
  to {opacity:1;transform:translate3d(0,0,0) scale(1);}
}
@media(max-width:1100px) {
  .tnx-approved-hero .hero-grid {grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:10px;}
  .tnx-approved-hero h1 {font-size:clamp(38px,4.6vw,52px);}
  .tnx-approved-art img {width:clamp(410px,50vw,600px);}
  .tnx-hero-services > div {padding-inline:10px;font-size:10px;gap:7px;}
}
@media(max-width:820px) {
  .tnx-approved-hero .hero-grid {grid-template-columns:1fr;gap:4px;padding:54px 0 38px;}
  .tnx-approved-hero .hero-copy {max-width:690px;}
  .tnx-approved-hero h1 {font-size:clamp(40px,6.4vw,56px);}
  .tnx-approved-art {min-height:390px;max-height:480px;margin-top:8px;}
  .tnx-approved-art img {width:min(100%,560px);max-height:480px;}
}
@media(max-width:620px) {
  .tnx-approved-hero .hero-grid {padding:42px 0 30px;gap:0;}
  .tnx-service-pill {font-size:10px;gap:7px;padding:8px 10px;margin-bottom:18px;}
  .tnx-service-pill i {height:11px;}
  .tnx-approved-hero h1 {font-size:clamp(34px,9vw,46px);line-height:1.08;letter-spacing:-.035em;margin-bottom:15px;}
  .tnx-approved-hero .hero-copy > p {font-size:14px;line-height:1.65;}
  .tnx-approved-hero .hero-foot {gap:10px;margin-top:21px;}
  .tnx-approved-hero .hero-foot .button,.tnx-secondary-cta {width:100%;min-height:48px;font-size:13px;}
  .tnx-hero-services {display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px;}
  .tnx-hero-services > div {border:0;padding:0;min-height:36px;font-size:11px;}
  .tnx-hero-services > div:first-child {padding-left:0;}
  .tnx-hero-tagline {font-size:13px;gap:8px;margin-top:22px;flex-wrap:wrap;}
  .tnx-hero-tagline b {font-size:26px;}
  .tnx-approved-art {min-height:300px;max-height:360px;margin-top:4px;}
  .tnx-approved-art img {width:min(115%,480px);max-height:360px;}
}
@media(prefers-reduced-motion:reduce) {
  .tnx-approved-art img {animation:none;}
}


/* Trainonex homepage refinement 1.3.3 — clear hierarchy, red accent, responsive spacing */
:root{--tnx-accent:#f21d3d!important;--tnx-accent-2:#c91631!important;--tnx-red:#f21d3d;--tnx-ink:#06101b;--tnx-panel:#102235;--tnx-muted:#aebdca}
.tnx-redesign-home{background:#06101b;color:#f7f8fa;overflow:hidden;font-family:"DM Sans",Arial,sans-serif}
.tnx-redesign-home *{box-sizing:border-box}.tnx-r-wrap{width:min(1180px,calc(100% - 64px));margin:0 auto}
.tnx-r-hero{position:relative;background:radial-gradient(ellipse at 76% 36%,rgba(27,93,123,.38),transparent 40%),linear-gradient(115deg,#030811,#0a1b2b 70%,#07121e);overflow:hidden}
.tnx-r-hero:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(165deg,transparent 0 74px,rgba(242,29,61,.12) 75px 76px,transparent 77px 148px);pointer-events:none}
.tnx-r-hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:35px;min-height:650px;padding-top:72px;padding-bottom:54px}
.tnx-r-eyebrow,.tnx-r-kicker{display:inline-flex;align-items:center;gap:10px;color:#e1e8ef;font-size:11px;font-weight:800;letter-spacing:.17em;text-transform:uppercase}.tnx-r-eyebrow i{width:8px;height:8px;background:#f21d3d;border-radius:50%;box-shadow:0 0 0 5px rgba(242,29,61,.14)}
.tnx-r-hero h1{max-width:720px;margin:28px 0 22px;font-family:"DM Sans",Arial,sans-serif;font-size:clamp(48px,6.2vw,82px);font-weight:900;line-height:.99;letter-spacing:-.065em;text-transform:none;color:#fff}.tnx-r-hero h1 em,.tnx-r-intro h2 em,.tnx-r-section-head h2 em,.tnx-r-difference h2 em,.tnx-r-industries h2 em,.tnx-r-cta h2 em{color:#f21d3d;font-style:normal}
.tnx-r-hero-copy>p{max-width:560px;color:#c2ced8;font-size:16px;line-height:1.8}.tnx-r-actions{display:flex;align-items:center;gap:25px;flex-wrap:wrap;margin-top:30px}.tnx-r-btn{display:inline-flex;align-items:center;gap:20px;padding:15px 21px;border-radius:999px;background:#f21d3d;color:#fff!important;text-decoration:none!important;font-size:13px;font-weight:800;box-shadow:0 10px 28px rgba(242,29,61,.2);transition:.25s}.tnx-r-btn:hover{background:#d31534;transform:translateY(-3px)}.tnx-r-btn b,.tnx-r-textlink b,.tnx-r-inline b{font-size:17px}.tnx-r-textlink,.tnx-r-inline{color:#f6f8fb;text-decoration:none;font-size:13px;font-weight:700}.tnx-r-textlink:hover,.tnx-r-inline:hover{color:#ff536c}.tnx-r-proof{display:flex;gap:24px;flex-wrap:wrap;margin-top:48px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14)}.tnx-r-proof span{font-size:11px;color:#b8c6d1}.tnx-r-proof b{display:block;color:#f21d3d;font-size:20px;margin-bottom:4px}
.tnx-r-hero-visual{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:500px}.tnx-r-hero-visual>img{position:relative;z-index:2;width:min(100%,520px);max-height:570px;object-fit:contain;object-position:bottom;filter:drop-shadow(0 22px 35px rgba(0,0,0,.42))}.tnx-r-orbit{position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);border:1px solid rgba(242,29,61,.28);border-radius:50%;aspect-ratio:1}.tnx-r-orbit-one{width:88%}.tnx-r-orbit-two{width:68%;border-color:rgba(255,255,255,.13)}.tnx-r-float{position:absolute;z-index:3;padding:13px 16px;border:1px solid rgba(255,255,255,.13);border-radius:12px;background:rgba(9,25,39,.86);box-shadow:0 12px 28px rgba(0,0,0,.25);backdrop-filter:blur(12px)}.tnx-r-float small{display:block;color:#ff536c;font-size:9px;letter-spacing:.15em}.tnx-r-float strong{display:block;margin-top:5px;font-size:13px}.tnx-r-float-a{top:19%;left:0}.tnx-r-float-b{right:0;bottom:22%}
.tnx-r-marquee{position:relative;background:#f21d3d;color:#fff;overflow:hidden;white-space:nowrap;padding:13px 0;font-size:11px;font-weight:900;letter-spacing:.12em}.tnx-r-marquee div{display:flex;justify-content:space-around;gap:30px;min-width:100%;}.tnx-r-marquee i{font-style:normal;color:#ffd9df}
.tnx-r-intro{padding:88px 0;background:#071522}.tnx-r-intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end}.tnx-r-kicker{color:#ff536c;font-size:10px}.tnx-r-intro h2,.tnx-r-section-head h2,.tnx-r-difference h2,.tnx-r-industries h2{font-size:clamp(36px,4.4vw,58px);line-height:1.06;letter-spacing:-.045em;margin:18px 0 0;font-weight:900}.tnx-r-intro-grid>div:last-child p,.tnx-r-section-head>p,.tnx-r-industries-grid>div:first-child>p{color:#b7c5d0;font-size:15px;line-height:1.85;margin:0 0 24px;max-width:560px}.tnx-r-inline{display:inline-flex;gap:12px;align-items:center;color:#fff}
.tnx-r-services{padding:94px 0 100px;background:#0b1d2c}.tnx-r-section-head{display:flex;align-items:end;justify-content:space-between;gap:55px;margin-bottom:38px}.tnx-r-section-head>p{max-width:390px;margin:0}.tnx-r-service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.tnx-r-service-grid article{position:relative;min-height:220px;padding:27px 27px 30px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:linear-gradient(145deg,#142b40,#102235);transition:transform .25s,border-color .25s,background .25s}.tnx-r-service-grid article:hover{transform:translateY(-5px);border-color:rgba(242,29,61,.65);background:linear-gradient(145deg,#19344a,#112538)}.tnx-r-service-grid article>span{color:#ff536c;font-size:10px;font-weight:800;letter-spacing:.13em}.tnx-r-service-grid h3{font-size:21px;font-weight:800;letter-spacing:-.025em;margin:27px 0 10px;color:#fff}.tnx-r-service-grid p{max-width:340px;color:#b5c3ce;font-size:13px;line-height:1.75;margin:0}.tnx-r-service-grid article>a{position:absolute;right:24px;bottom:20px;color:#ff536c;text-decoration:none;font-size:21px}.tnx-r-center{text-align:center;margin-top:34px}
.tnx-r-process{padding:94px 0;background:#06101b}.tnx-r-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.tnx-r-steps article{position:relative;padding:25px 23px 28px;border:1px solid rgba(255,255,255,.12);border-radius:13px;background:#0d1e2d;min-height:190px}.tnx-r-steps article>b{color:#f21d3d;font-size:26px;font-weight:900}.tnx-r-steps h3{margin:25px 0 8px;font-size:18px}.tnx-r-steps p{margin:0;color:#aebdca;font-size:13px;line-height:1.7}
.tnx-r-difference{padding:100px 0;background:#0b1d2c}.tnx-r-difference-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.tnx-r-large{max-width:490px;margin:24px 0 26px;color:#b7c5d0;font-size:16px;line-height:1.85}.tnx-r-benefits{border-top:1px solid rgba(255,255,255,.13)}.tnx-r-benefits article{display:grid;grid-template-columns:48px 1fr;gap:18px;padding:24px 0;border-bottom:1px solid rgba(255,255,255,.13)}.tnx-r-benefits article>b{color:#f21d3d;font-size:20px}.tnx-r-benefits h3{margin:0 0 7px;font-size:17px}.tnx-r-benefits p{margin:0;color:#adbdc9;font-size:13px;line-height:1.7}
.tnx-r-industries{padding:86px 0;background:#06101b}.tnx-r-industries-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.tnx-r-tags{display:flex;gap:11px;flex-wrap:wrap}.tnx-r-tags span{padding:13px 17px;border:1px solid rgba(255,255,255,.14);border-radius:999px;color:#e5ebf0;background:#0e2030;font-size:13px}.tnx-r-tags span:hover{border-color:#f21d3d;color:#fff}
.tnx-r-people{padding:92px 0;background:#0b1d2c}.tnx-r-people-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.tnx-r-people-grid article{display:flex;align-items:center;gap:16px;min-height:170px;padding:20px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:#102538}.tnx-r-people-grid img{width:105px;height:125px;object-fit:contain;flex:0 0 auto}.tnx-r-people-grid small{color:#ff536c;font-size:9px;letter-spacing:.14em;font-weight:800}.tnx-r-people-grid h3{font-size:17px;margin:8px 0}.tnx-r-people-grid p{font-size:12px;line-height:1.6;color:#aebdca;margin:0}
.tnx-r-cta{padding:58px 0;background:linear-gradient(110deg,#e91538,#f21d3d 65%,#ff3656)}.tnx-r-cta .tnx-r-wrap{display:flex;align-items:center;justify-content:space-between;gap:30px}.tnx-r-cta span{font-size:10px;font-weight:900;letter-spacing:.15em;color:#ffe0e5}.tnx-r-cta h2{font-size:clamp(31px,4vw,48px);line-height:1.05;margin:12px 0 0;color:#fff;letter-spacing:-.04em}.tnx-r-cta h2 em{color:#07111d}.tnx-r-cta a{display:inline-flex;align-items:center;gap:25px;padding:16px 20px;border-radius:999px;background:#071522;color:#fff;text-decoration:none;font-size:12px;font-weight:800;white-space:nowrap}
@media(max-width:950px){.tnx-r-hero-grid{min-height:570px;grid-template-columns:1fr .8fr}.tnx-r-hero h1{font-size:clamp(46px,6vw,66px)}.tnx-r-hero-visual{min-height:420px}.tnx-r-difference-grid,.tnx-r-industries-grid{gap:45px}.tnx-r-people-grid article{padding:15px;gap:10px}.tnx-r-people-grid img{width:82px}}
@media(max-width:700px){.tnx-r-wrap{width:calc(100% - 38px)}.tnx-r-hero-grid{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:64px 0 30px}.tnx-r-hero h1{font-size:clamp(46px,12vw,66px);line-height:.98;margin:22px 0 17px;max-width:600px}.tnx-r-hero-copy>p{font-size:14px;line-height:1.7}.tnx-r-actions{gap:17px;margin-top:22px}.tnx-r-proof{margin-top:27px;gap:17px}.tnx-r-proof span{font-size:10px}.tnx-r-proof b{font-size:17px}.tnx-r-hero-visual{min-height:300px;max-height:370px;margin:0 auto;width:100%;max-width:440px}.tnx-r-hero-visual>img{max-height:370px;width:85%}.tnx-r-float{padding:9px 11px}.tnx-r-float-a{left:2%;top:14%}.tnx-r-float-b{right:1%;bottom:16%}.tnx-r-marquee{padding:11px 0;font-size:9px}.tnx-r-marquee div{justify-content:flex-start;gap:22px;width:max-content;animation:tnxMarquee 28s linear infinite}@keyframes tnxMarquee{to{transform:translateX(-50%)}}.tnx-r-intro,.tnx-r-services,.tnx-r-process,.tnx-r-difference,.tnx-r-industries,.tnx-r-people{padding:62px 0}.tnx-r-intro-grid,.tnx-r-difference-grid,.tnx-r-industries-grid{grid-template-columns:1fr;gap:24px}.tnx-r-intro h2,.tnx-r-section-head h2,.tnx-r-difference h2,.tnx-r-industries h2{font-size:clamp(34px,9vw,46px)}.tnx-r-section-head{display:block;margin-bottom:26px}.tnx-r-section-head>p{margin-top:16px;font-size:13px}.tnx-r-service-grid{grid-template-columns:1fr 1fr;gap:10px}.tnx-r-service-grid article{min-height:205px;padding:19px 16px 28px}.tnx-r-service-grid h3{font-size:17px;margin:21px 0 8px}.tnx-r-service-grid p{font-size:11px;line-height:1.6}.tnx-r-service-grid article>a{right:15px;bottom:12px}.tnx-r-steps{grid-template-columns:1fr 1fr;gap:10px}.tnx-r-steps article{min-height:165px;padding:19px 16px}.tnx-r-steps h3{margin-top:18px;font-size:16px}.tnx-r-steps p{font-size:11px}.tnx-r-benefits article{padding:18px 0}.tnx-r-tags{gap:8px}.tnx-r-tags span{font-size:11px;padding:10px 13px}.tnx-r-people-grid{grid-template-columns:1fr;gap:10px}.tnx-r-people-grid article{min-height:130px;padding:12px 18px}.tnx-r-people-grid img{height:110px;width:90px}.tnx-r-cta{padding:42px 0}.tnx-r-cta .tnx-r-wrap{display:block}.tnx-r-cta h2{font-size:34px}.tnx-r-cta a{margin-top:24px}.tnx-r-proof{border-top:0}}
@media(max-width:390px){.tnx-r-service-grid{grid-template-columns:1fr}.tnx-r-service-grid article{min-height:175px}.tnx-r-hero h1{font-size:44px}.tnx-r-proof{gap:12px}.tnx-r-proof span{font-size:9px}}




/* Trainonex 1.3.6 — isolated layout system, responsive columns and live ticker */
html body .tnx-redesign-home { width:100%; max-width:100%; overflow:hidden; }
html body .tnx-redesign-home .tnx-r-wrap { width:min(1180px, calc(100% - 64px)); max-width:1180px; margin-inline:auto !important; }
html body .tnx-redesign-home .tnx-r-difference-grid,
html body .tnx-redesign-home .tnx-r-industries-grid {
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items:center !important;
  justify-content:normal !important;
  gap:clamp(28px, 5vw, 72px) !important;
  width:100% !important; max-width:1180px !important; min-width:0 !important;
}
html body .tnx-redesign-home .tnx-r-difference-grid > *,
html body .tnx-redesign-home .tnx-r-industries-grid > * {
  display:block !important; position:relative !important; float:none !important;
  width:100% !important; min-width:0 !important; max-width:none !important;
  grid-column:auto !important; writing-mode:horizontal-tb !important;
}
html body .tnx-redesign-home .tnx-r-benefits {
  display:flex !important; flex-direction:column !important; width:100% !important;
  min-width:0 !important; max-width:none !important; border-top:1px solid rgba(255,255,255,.14);
}
html body .tnx-redesign-home .tnx-r-benefits article {
  display:grid !important; grid-template-columns:48px minmax(0,1fr) !important;
  align-items:start !important; width:100% !important; min-width:0 !important;
  max-width:none !important; float:none !important; gap:16px !important; padding:20px 0 !important;
}
html body .tnx-redesign-home .tnx-r-benefits article > b { display:block !important; width:auto !important; }
html body .tnx-redesign-home .tnx-r-benefits article > div { display:block !important; width:100% !important; min-width:0 !important; max-width:none !important; }
html body .tnx-redesign-home .tnx-r-benefits h3,
html body .tnx-redesign-home .tnx-r-benefits p { width:auto !important; max-width:none !important; white-space:normal !important; word-break:normal !important; overflow-wrap:break-word !important; }
html body .tnx-redesign-home .tnx-r-tags {
  display:flex !important; flex-flow:row wrap !important; align-items:center !important;
  justify-content:flex-start !important; align-content:flex-start !important;
  width:100% !important; min-width:0 !important; max-width:none !important; gap:10px !important;
}
html body .tnx-redesign-home .tnx-r-tags > span {
  display:inline-flex !important; flex:0 1 auto !important; width:auto !important;
  min-width:0 !important; max-width:100% !important; white-space:normal !important;
  writing-mode:horizontal-tb !important; word-break:normal !important; overflow-wrap:normal !important;
  line-height:1.4 !important; margin:0 !important; transform:none !important;
}
/* The moving glyph is replaced by a simple ant with a body, head and legs. */
html body .tnx-redesign-home .tnx-r-service-grid article::before,
html body .service-card::before,
html body .work-card::before,
html body .blog-card::before {
	content: none !important;
	display: none !important;
	animation: none !important;
}

html body .tnx-redesign-home .tnx-r-service-grid article .card-ant,
html body .card-ant {
	position: absolute;
	z-index: 5;
	width: 24px;
	height: 20px;
	pointer-events: none;
	offset-path: inset(12px round 3px);
	offset-distance: 100%;
	offset-rotate: auto 180deg !important;
	animation: antWalk 8s linear infinite !important;
}

html body .tnx-redesign-home .tnx-r-service-grid article .card-ant-face,
html body .card-ant-face {
	position: absolute;
	inset: 0;
	animation: none !important;
	transform: none !important;
}

html body .tnx-redesign-home .tnx-r-service-grid article .card-ant-face::before,
html body .card-ant-face::before {
	content: "\1F41C ";
	position: absolute;
	left: 0;
	top: 0;
	width: 24px;
	height: 20px;
	font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
	font-size: 18px;
	line-height: 20px;
	text-align: center;
	filter: drop-shadow(1px 1px 0 rgba(16, 16, 20, 0.25));
	animation: antBody 0.22s ease-in-out infinite alternate;
	animation-duration: 0.22s !important;
	animation-iteration-count: infinite !important;
}

html body .tnx-redesign-home .tnx-r-service-grid article .card-ant::after,
html body .card-ant::after {
	display: none !important;
}

@keyframes antBody {
	from {
		transform: translateY(1px) rotate(-7deg) scale(0.92, 0.96);
	}
	to {
		transform: translateY(-1px) rotate(7deg) scale(1.04, 1.02);
	}
}

@keyframes antFacing {
	0%,
	100% {
		transform: rotate(0deg);
	}
}


/* Seamless marquee: the JS creates two identical runs; moving by half the track loops exactly. */
html body .tnx-redesign-home .tnx-r-marquee {
  display:block !important; position:relative !important; width:100% !important;
  overflow:hidden !important; white-space:nowrap !important; isolation:isolate;
  background:#f21d3d !important; color:#fff !important; padding:14px 0 !important;
  font-size:12px !important; line-height:1.4 !important; font-weight:900 !important;
}
html body .tnx-redesign-home .tnx-r-marquee-track {
  display:flex !important; flex-flow:row nowrap !important; align-items:center !important;
  justify-content:flex-start !important; gap:0 !important; width:max-content !important;
  min-width:max-content !important; max-width:none !important;
  animation:tnxRNewsTicker 28s linear infinite !important;
  animation-play-state:running !important; transform:translate3d(0,0,0); will-change:transform;
}
html body .tnx-redesign-home .tnx-r-marquee-run {
  display:flex !important; flex:0 0 auto !important; flex-flow:row nowrap !important;
  align-items:center !important; justify-content:flex-start !important; width:max-content !important;
  gap:30px !important; padding:0 18px !important; white-space:nowrap !important;
}
html body .tnx-redesign-home .tnx-r-marquee-run i { display:inline-block !important; color:#ffe0e5 !important; font-style:normal !important; }
html body .tnx-redesign-home .tnx-r-marquee:hover .tnx-r-marquee-track { animation-play-state:paused !important; }
@keyframes tnxRNewsTicker { from { transform:translate3d(0,0,0); } to { transform:translate3d(-50%,0,0); } }
@media(max-width:760px) {
  html body .tnx-redesign-home .tnx-r-wrap { width:calc(100% - 36px) !important; }
  html body .tnx-redesign-home .tnx-r-difference-grid,
  html body .tnx-redesign-home .tnx-r-industries-grid { grid-template-columns:minmax(0,1fr) !important; gap:24px !important; }
  html body .tnx-redesign-home .tnx-r-benefits article { grid-template-columns:40px minmax(0,1fr) !important; padding:16px 0 !important; }
  html body .tnx-redesign-home .tnx-r-tags { gap:8px !important; }
  html body .tnx-redesign-home .tnx-r-tags > span { font-size:12px !important; padding:9px 12px !important; }
  html body .tnx-redesign-home .tnx-r-marquee { font-size:11px !important; padding:12px 0 !important; }
  html body .tnx-redesign-home .tnx-r-marquee-track { animation-duration:22s !important; }
}
@media(prefers-reduced-motion:reduce) {
  html body .tnx-redesign-home .tnx-r-marquee-track { animation-duration:60s !important; }
}


/* Trainonex 1.3.7 — definitive partner-section grid repair */
html body .tnx-redesign-home section.tnx-r-difference { display:block !important; width:100% !important; }
html body .tnx-redesign-home section.tnx-r-difference > .tnx-r-wrap.tnx-r-difference-grid {
  display:grid !important;
  grid-template-columns:minmax(0, 0.92fr) minmax(0, 1.08fr) !important;
  align-items:center !important;
  column-gap:clamp(36px, 6vw, 88px) !important;
  row-gap:28px !important;
  width:min(1180px, calc(100% - 64px)) !important;
  max-width:1180px !important;
  margin-left:auto !important; margin-right:auto !important;
}
html body .tnx-redesign-home .tnx-r-difference-grid > div:first-child,
html body .tnx-redesign-home .tnx-r-difference-grid > .tnx-r-benefits {
  display:block !important; float:none !important; position:relative !important;
  inset:auto !important; width:100% !important; min-width:0 !important;
  max-width:none !important; margin:0 !important; padding:0 !important;
  writing-mode:horizontal-tb !important; transform:none !important;
}
html body .tnx-redesign-home .tnx-r-difference-grid > div:first-child { align-self:center !important; }
html body .tnx-redesign-home .tnx-r-difference-grid .tnx-r-large { max-width:540px !important; }
html body .tnx-redesign-home .tnx-r-benefits { border-top:1px solid rgba(255,255,255,.14) !important; }
html body .tnx-redesign-home .tnx-r-benefits article {
  display:grid !important; grid-template-columns:48px minmax(0,1fr) !important;
  align-items:start !important; gap:18px !important; width:100% !important;
  min-width:0 !important; max-width:none !important; margin:0 !important;
  padding:22px 0 !important; writing-mode:horizontal-tb !important;
}
html body .tnx-redesign-home .tnx-r-benefits article > b {
  display:block !important; width:auto !important; min-width:0 !important;
  font-size:20px !important; line-height:1.3 !important;
}
html body .tnx-redesign-home .tnx-r-benefits article > div {
  display:block !important; flex:none !important; width:100% !important;
  min-width:0 !important; max-width:none !important; columns:1 !important;
  writing-mode:horizontal-tb !important; text-orientation:mixed !important;
}
html body .tnx-redesign-home .tnx-r-benefits article h3,
html body .tnx-redesign-home .tnx-r-benefits article p {
  display:block !important; width:100% !important; min-width:0 !important;
  max-width:100% !important; white-space:normal !important;
  word-break:normal !important; overflow-wrap:break-word !important;
  writing-mode:horizontal-tb !important; text-orientation:mixed !important;
}
@media(max-width:760px) {
 html body .tnx-redesign-home section.tnx-r-difference > .tnx-r-wrap.tnx-r-difference-grid {
   grid-template-columns:minmax(0,1fr) !important; width:calc(100% - 36px) !important;
   row-gap:28px !important;
 }
 html body .tnx-redesign-home .tnx-r-benefits article { grid-template-columns:40px minmax(0,1fr) !important; padding:17px 0 !important; }
}


/* Trainonex 1.3.8 — remove decorative ant and harden partner-section sizing. */
html body .tnx-redesign-home .card-ant,
html body .tnx-redesign-home .card-ant-face,
html body .tnx-redesign-home .tnx-ant,
html body .tnx-redesign-home .tnx-ant-svg,
html body .tnx-redesign-home .tnx-r-service-grid article::before,
html body .tnx-redesign-home .tnx-r-service-grid article::after {
  display:none !important;
  content:none !important;
  visibility:hidden !important;
  animation:none !important;
}
html body .tnx-redesign-home section.tnx-r-difference {
  display:block !important;
  width:100% !important;
  overflow:visible !important;
}
html body .tnx-redesign-home section.tnx-r-difference > .tnx-r-wrap.tnx-r-difference-grid {
  display:grid !important;
  grid-template-columns:minmax(0, 0.95fr) minmax(0, 1.05fr) !important;
  align-items:center !important;
  justify-content:stretch !important;
  column-gap:clamp(28px, 5vw, 72px) !important;
  row-gap:32px !important;
  width:min(1180px, calc(100% - 64px)) !important;
  max-width:1180px !important;
  min-width:0 !important;
  margin-inline:auto !important;
}
html body .tnx-redesign-home .tnx-r-difference-grid > div:first-child,
html body .tnx-redesign-home .tnx-r-difference-grid > .tnx-r-benefits {
  position:static !important;
  display:block !important;
  float:none !important;
  inset:auto !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  writing-mode:horizontal-tb !important;
}
html body .tnx-redesign-home .tnx-r-difference-grid > .tnx-r-benefits {
  justify-self:stretch !important;
  align-self:center !important;
  border-top:1px solid rgba(255,255,255,.14) !important;
}
html body .tnx-redesign-home .tnx-r-benefits article {
  display:flex !important;
  flex-flow:row nowrap !important;
  align-items:flex-start !important;
  gap:20px !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  min-height:0 !important;
  margin:0 !important;
  padding:22px 0 !important;
  float:none !important;
  writing-mode:horizontal-tb !important;
  border-bottom:1px solid rgba(255,255,255,.14) !important;
  box-sizing:border-box !important;
}
html body .tnx-redesign-home .tnx-r-benefits article > b {
  display:block !important;
  flex:0 0 42px !important;
  width:42px !important;
  min-width:42px !important;
  max-width:42px !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1.35 !important;
  white-space:nowrap !important;
}
html body .tnx-redesign-home .tnx-r-benefits article > div {
  display:block !important;
  flex:1 1 0% !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  columns:1 !important;
  writing-mode:horizontal-tb !important;
  overflow:visible !important;
}
html body .tnx-redesign-home .tnx-r-benefits article h3,
html body .tnx-redesign-home .tnx-r-benefits article p {
  display:block !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:break-word !important;
  hyphens:none !important;
  writing-mode:horizontal-tb !important;
  text-orientation:mixed !important;
}
@media(max-width:760px) {
  html body .tnx-redesign-home section.tnx-r-difference > .tnx-r-wrap.tnx-r-difference-grid {
    grid-template-columns:minmax(0,1fr) !important;
    width:calc(100% - 36px) !important;
    row-gap:26px !important;
  }
  html body .tnx-redesign-home .tnx-r-benefits article { gap:16px !important; padding:18px 0 !important; }
  html body .tnx-redesign-home .tnx-r-benefits article > b { flex-basis:36px !important; width:36px !important; min-width:36px !important; max-width:36px !important; }
}