:root {
	--bg: #08111f;
	--bg-soft: #101c31;
	--panel: rgba(255, 255, 255, 0.08);
	--text: #f4f8ff;
	--muted: #aebbd2;
	--line: rgba(255, 255, 255, 0.16);
	--accent: #62e6ff;
	--accent-2: #8d7cff;
	--accent-3: #34f5a1;
	--shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
	--radius: 28px;
	--max: 1180px;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	background:
		radial-gradient(circle at 12% 8%, rgba(98, 230, 255, 0.16), transparent 28rem),
		radial-gradient(circle at 88% 20%, rgba(141, 124, 255, 0.18), transparent 30rem),
		linear-gradient(180deg, #07101e 0%, #0a1324 42%, #060b14 100%);
	color: var(--text);
	line-height: 1.55;
	overflow-x: hidden;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	max-width: 100%;
}

.page-glow {
	position: fixed;
	inset: auto -18rem -18rem auto;
	width: 38rem;
	height: 38rem;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(52, 245, 161, 0.11), transparent 70%);
	pointer-events: none;
	z-index: -1;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 10;
	backdrop-filter: blur(22px);
	background: rgba(8, 17, 31, 0.72);
	border-bottom: 1px solid var(--line);
}

.nav {
	max-width: var(--max);
	margin: 0 auto;
	min-height: 78px;
	padding: 0 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.brand {
	display: inline-flex;
	align-items: center;
	min-width: 190px;
}

.brand img {
	width: clamp(170px, 18vw, 265px);
	height: auto;
	display: block;
	filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.38));
}

.nav-links {
	display: flex;
	align-items: center;
	gap: 6px;
}

.nav-links a {
	color: var(--muted);
	padding: 10px 13px;
	border-radius: 999px;
	transition: 180ms ease;
}

.nav-links a:hover,
.nav-links a:focus-visible {
	color: var(--text);
	background: var(--panel);
}

.nav-toggle {
	display: none;
	width: 44px;
	height: 44px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--panel);
	color: var(--text);
}

.nav-toggle span {
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	margin: 4px auto;
}

.section-pad {
	max-width: var(--max);
	margin: 0 auto;
	padding: 100px 24px;
}

.hero {
	min-height: calc(100vh - 78px);
	display: grid;
	grid-template-columns: minmax(0, 1.04fr) minmax(320px, 0.96fr);
	align-items: center;
	gap: 54px;
}

.eyebrow {
	color: var(--accent);
	font-weight: 800;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-size: 0.78rem;
	margin: 0 0 16px;
}

h1,
h2,
h3,
p {
	margin-top: 0;
}

h1 {
	font-size: clamp(3rem, 7vw, 6.2rem);
	line-height: 0.95;
	letter-spacing: -0.07em;
	margin-bottom: 28px;
}

h2 {
	font-size: clamp(2rem, 4vw, 4rem);
	line-height: 1;
	letter-spacing: -0.055em;
	margin-bottom: 22px;
}

h3 {
	font-size: 1.35rem;
	letter-spacing: -0.025em;
	margin-bottom: 12px;
}

.hero-copy {
	max-width: 650px;
	color: var(--muted);
	font-size: 1.15rem;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 34px;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 20px;
	border-radius: 999px;
	font-weight: 800;
	border: 1px solid transparent;
	transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.btn:hover {
	transform: translateY(-2px);
}

.btn-primary {
	color: #03111f;
	background: linear-gradient(135deg, var(--accent), var(--accent-3));
	box-shadow: 0 18px 44px rgba(98, 230, 255, 0.22);
}

.btn-ghost {
	color: var(--text);
	border-color: var(--line);
	background: rgba(255, 255, 255, 0.05);
}

.btn-light {
	color: #06111f;
	background: #fff;
}

.hero-panel {
	min-height: 560px;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 18px;
	isolation: isolate;
}

.hero-panel::before {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	width: min(90vw, 520px);
	height: min(90vw, 520px);
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(98, 230, 255, 0.12), transparent 60%);
	transform: translate(-50%, -50%);
	animation: pulse 5s infinite alternate ease-in-out;
	z-index: -1;
}

.main-card,
.metric-card,
.glass-card,
.project-card,
.support-card,
.contact-card,
.printer-card,
.map-card {
	border: 1px solid var(--line);
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04));
	box-shadow: var(--shadow);
	backdrop-filter: blur(20px);
}

.main-card {
	width: min(100%, 430px);
	padding: 34px;
	border-radius: var(--radius);
}

.status-dot {
	width: 11px;
	height: 11px;
	display: inline-block;
	border-radius: 50%;
	background: var(--accent-3);
	box-shadow: 0 0 0 8px rgba(82, 199, 165, 0.12);
	margin-bottom: 34px;
	animation: statusPulse 1.8s ease-in-out infinite;
	transform-origin: center;
}

.main-card h2 {
	font-size: 2.4rem;
}

.main-card p {
	color: var(--muted);
	margin: 0;
}

.floating-bubbles {
	width: min(100%, 520px);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.metric-card {
	width: 100%;
	min-height: 126px;
	padding: 18px;
	border-radius: 24px;
	animation: bubbleFloat 6.5s ease-in-out infinite;
	will-change: transform;
}

.metric-card strong {
	display: block;
	font-size: 1.7rem;
	line-height: 1;
	margin-bottom: 8px;
}

.metric-card span {
	color: var(--muted);
	font-size: 0.92rem;
	line-height: 1.35;
}

.delay-1 {
	animation-delay: 0s;
}

.delay-2 {
	animation-delay: 1.1s;
}

.delay-3 {
	animation-delay: 2.1s;
}

.trust-strip {
	max-width: var(--max);
	margin: -30px auto 20px;
	padding: 0 24px 30px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.trust-strip span {
	color: var(--muted);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 10px 14px;
	background: rgba(255, 255, 255, 0.045);
}

.section {
	scroll-margin-top: 92px;
}

.section-heading {
	max-width: 840px;
	margin-bottom: 34px;
}

.about-grid,
.project-grid,
.customer-grid,
.contact-grid,
.printer-grid {
	display: grid;
	gap: 20px;
}

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

.project-grid,
.customer-grid {
	grid-template-columns: repeat(2, 1fr);
}

.contact-layout {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
	gap: 20px;
	align-items: stretch;
}

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

.glass-card,
.project-card,
.support-card,
.contact-card,
.printer-card {
	border-radius: var(--radius);
	padding: 28px;
}

.glass-card p,
.project-card p,
.support-card p,
.printer-card p,
.section-heading>p:not(.eyebrow) {
	color: var(--muted);
	margin-bottom: 0;
}

.printer-card {
	min-height: 260px;
	position: relative;
	overflow: hidden;
}

.printer-card::after {
	content: "";
	position: absolute;
	inset: auto -30% -45% 35%;
	height: 190px;
	background: radial-gradient(circle, rgba(98, 230, 255, 0.16), transparent 65%);
}

.printer-card span {
	color: var(--accent);
	font-weight: 900;
	letter-spacing: 0.14em;
	font-size: 0.78rem;
}

.printer-card h3 {
	font-size: 2.35rem;
	margin-top: 20px;
}

.printer-card p {
	position: relative;
	z-index: 1;
}

.feature-band {
	max-width: var(--max);
	margin: 0 auto;
	padding: 54px;
	border-radius: 38px;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 32px;
	align-items: center;
	border: 1px solid rgba(98, 230, 255, 0.24);
	background:
		linear-gradient(135deg, rgba(98, 230, 255, 0.16), rgba(141, 124, 255, 0.11)),
		rgba(255, 255, 255, 0.04);
	box-shadow: var(--shadow);
}

.feature-copy p:not(.eyebrow) {
	color: var(--muted);
	max-width: 660px;
	margin-bottom: 0;
}

.feature-link {
	min-width: 250px;
	min-height: 180px;
	border-radius: 30px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: #fff;
	color: #07101e;
	transition: transform 180ms ease;
}

.feature-link:hover {
	transform: translateY(-4px) rotate(-1deg);
}

.feature-link span {
	color: #4b5870;
	font-weight: 700;
}

.feature-link strong {
	font-size: 1.8rem;
	letter-spacing: -0.04em;
}

.feature-link em {
	align-self: flex-end;
	font-size: 1.8rem;
	font-style: normal;
}

.project-card {
	min-height: 300px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	transition: transform 180ms ease, border-color 180ms ease;
	overflow: hidden;
	position: relative;
}

.project-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at top right, rgba(98, 230, 255, 0.2), transparent 45%);
	opacity: 0;
	transition: opacity 180ms ease;
}

.project-card>* {
	position: relative;
}

.project-card:hover {
	transform: translateY(-5px);
	border-color: rgba(98, 230, 255, 0.42);
}

.project-card:hover::before {
	opacity: 1;
}

.project-tag {
	align-self: flex-start;
	color: var(--accent);
	font-weight: 800;
	font-size: 0.82rem;
	margin-bottom: auto;
	border: 1px solid rgba(98, 230, 255, 0.24);
	border-radius: 999px;
	padding: 8px 12px;
}

.project-card h3 {
	font-size: 2.35rem;
}

.project-card strong {
	margin-top: 22px;
	color: var(--accent-3);
}

.support-card {
	min-height: 300px;
}

.support-icon {
	width: 56px;
	height: 56px;
	display: grid;
	place-items: center;
	border-radius: 18px;
	margin-bottom: 28px;
	background: rgba(98, 230, 255, 0.12);
	color: var(--accent);
	font-size: 1.65rem;
}

.support-card .btn {
	margin-top: 26px;
}

.cta-section {
	max-width: var(--max);
	margin: 0 auto;
	padding: 64px 54px;
	border-radius: 38px;
	text-align: center;
	color: #06111f;
	background: linear-gradient(135deg, var(--accent), var(--accent-3));
	box-shadow: 0 30px 90px rgba(52, 245, 161, 0.22);
}

.cta-section .eyebrow {
	color: rgba(6, 17, 31, 0.64);
}

.cta-section h2 {
	max-width: 900px;
	margin-inline: auto;
}

.contact-card span {
	display: block;
	color: var(--muted);
	font-size: 0.84rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-bottom: 14px;
}

.contact-card a {
	color: var(--accent);
	font-weight: 900;
	overflow-wrap: anywhere;
}

.contact-card p {
	color: var(--text);
	margin: 0;
}

.map-card {
	min-height: 398px;
	border-radius: var(--radius);
	overflow: hidden;
	padding: 0;
}

.map-card iframe {
	width: 100%;
	height: 100%;
	min-height: 398px;
	border: 0;
	filter: saturate(0.9) contrast(1.05);
}

.footer {
	max-width: var(--max);
	margin: 0 auto;
	padding: 34px 24px 54px;
	border-top: 1px solid var(--line);
	color: var(--muted);
	display: flex;
	justify-content: space-between;
	gap: 18px;
}

.footer p {
	margin: 0;
}

.footer a {
	color: var(--text);
}

.reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 700ms ease, transform 700ms ease;
}

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

@keyframes pulse {
	from {
		transform: translate(-50%, -50%) scale(0.96);
		opacity: 0.7;
	}

	to {
		transform: translate(-50%, -50%) scale(1.04);
		opacity: 1;
	}
}

@keyframes bubbleFloat {

	0%,
	100% {
		transform: translateY(0);
	}

	25% {
		transform: translateY(-8px);
	}

	50% {
		transform: translateY(-3px);
	}

	75% {
		transform: translateY(-10px);
	}
}

@media (max-width: 940px) {
	.hero {
		grid-template-columns: 1fr;
		padding-top: 64px;
	}

	.hero-panel {
		min-height: auto;
		max-width: 560px;
		width: 100%;
		margin-inline: auto;
	}

	.about-grid,
	.project-grid,
	.customer-grid,
	.contact-grid,
	.printer-grid,
	.contact-layout {
		grid-template-columns: 1fr;
	}

	.feature-band {
		grid-template-columns: 1fr;
		padding: 34px;
		border-radius: 28px;
		margin-inline: 24px;
	}

	.feature-link {
		min-width: 0;
	}
}

@media (max-width: 760px) {
	.nav-toggle {
		display: block;
	}

	.nav-links {
		position: absolute;
		top: 78px;
		left: 16px;
		right: 16px;
		display: none;
		flex-direction: column;
		align-items: stretch;
		padding: 14px;
		border: 1px solid var(--line);
		border-radius: 24px;
		background: rgba(8, 17, 31, 0.94);
		box-shadow: var(--shadow);
	}

	.nav-links.open {
		display: flex;
	}

	.nav-links a {
		padding: 14px;
	}

	.brand img {
		width: 172px;
	}

	.section-pad {
		padding: 76px 18px;
	}

	.hero {
		min-height: auto;
	}

	h1 {
		font-size: clamp(2.65rem, 15vw, 4.6rem);
	}

	.hero-panel {
		min-height: auto;
		align-items: stretch;
	}

	.hero-panel::before {
		display: none;
	}

	.main-card {
		width: 100%;
	}

	.floating-bubbles {
		width: 100%;
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.metric-card {
		min-height: 104px;
	}

	.trust-strip {
		margin-top: 0;
		padding-inline: 18px;
	}

	.cta-section {
		margin-inline: 18px;
		padding: 44px 24px;
		border-radius: 28px;
	}

	.footer {
		flex-direction: column;
		padding-inline: 18px;
	}
}

/* =========================================================
   Consolidated responsive/layout fixes
   - removes accumulated inline/override conflicts
   - fixes 761px–1080px hero rendering
   - stabilizes printer-card layout on mobile
   ========================================================= */

/* ---------- Hero: machine visual ---------- */

.hero {
	position: relative;
}

.hero-content {
	min-width: 0;
}

.hero-panel {
	overflow: visible;
}

.hero-panel::before {
	pointer-events: none;
}

.hero-panel .machine-card {
	position: relative;
	width: min(100%, 720px);
	min-height: 680px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	backdrop-filter: none;
	display: grid;
	place-items: center;
	overflow: visible;
	isolation: isolate;
	z-index: 2;
}

.machine-card::before,
.machine-card::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: -1;
}

.machine-card::before {
	width: 84%;
	height: 84%;
	background:
		radial-gradient(circle at 50% 50%, rgba(52, 245, 161, 0.16), transparent 48%),
		radial-gradient(circle at 50% 50%, rgba(98, 230, 255, 0.10), transparent 68%);
	filter: blur(10px);
	animation: machineHalo 5.4s ease-in-out infinite alternate;
}

.machine-card::after {
	width: 68%;
	height: 68%;
	border: 1px solid rgba(52, 245, 161, 0.16);
	box-shadow:
		0 0 44px rgba(52, 245, 161, 0.09),
		inset 0 0 38px rgba(52, 245, 161, 0.06);
	animation: machineRing 11s linear infinite;
}

.machine-visual {
	position: relative;
	z-index: 1;
	width: min(100%, 700px);
	aspect-ratio: 1 / 1;
	display: grid;
	place-items: center;
	overflow: visible;
	animation: machineVisualFloat 6.8s ease-in-out infinite;
	transform-origin: center;
}

.machine-hero-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	transform: none !important;
	animation: none !important;
	filter:
		drop-shadow(0 30px 55px rgba(0, 0, 0, 0.42)) drop-shadow(0 0 22px rgba(52, 245, 161, 0.10));
}

/* Four glow points measured from the 1254×1254 gear image. */
.machine-dot {
	position: absolute;
	z-index: 4;
	display: block;
	margin: 0;
	border-radius: 999px;
	transform: translate(-50%, -50%);
	border: 1px solid rgba(226, 255, 198, 0.9);
	background:
		radial-gradient(circle, #ffffff 0 13%, #eaffb5 20%, #8dff27 42%, rgba(52, 245, 161, 0.30) 70%);
	box-shadow:
		0 0 0 9px rgba(141, 255, 39, 0.11),
		0 0 26px rgba(141, 255, 39, 0.95),
		0 0 72px rgba(52, 245, 161, 0.62);
	animation: machineGlowPulse 1.85s ease-in-out infinite;
	pointer-events: none;
	box-sizing: border-box;
}

.machine-dot::before,
.machine-dot::after {
	content: "";
	position: absolute;
	border-radius: inherit;
	pointer-events: none;
}

.machine-dot::before {
	inset: -18px;
	background: radial-gradient(circle, rgba(178, 255, 67, 0.34), transparent 66%);
	animation: machineGlowAura 1.85s ease-in-out infinite;
}

.machine-dot::after {
	inset: -30px;
	border: 1px solid rgba(141, 255, 39, 0.16);
	opacity: 0.65;
	animation: machineGlowRing 1.85s ease-in-out infinite;
}

.machine-dot-core {
	left: 55.31%;
	top: 49.49%;
	width: 19px;
	height: 19px;
}

.machine-dot-left {
	left: 17.72%;
	top: 57.00%;
	width: 14px;
	height: 14px;
	animation-delay: 0.22s;
}

.machine-dot-top {
	left: 73.93%;
	top: 23.05%;
	width: 13px;
	height: 13px;
	animation-delay: 0.44s;
}

.machine-dot-bottom {
	left: 48.76%;
	top: 77.75%;
	width: 16px;
	height: 16px;
	animation-delay: 0.66s;
}

/* Hero metric cards: one source of truth. */
.hero-panel .floating-bubbles {
	position: absolute;
	inset: 0;
	width: 100%;
	display: block;
	z-index: 5;
	pointer-events: none;
}

.hero-panel .metric-card {
	position: absolute;
	width: clamp(150px, 31%, 190px);
	min-height: 118px;
	padding: 18px;
	border-radius: 24px;
	border-color: rgba(52, 245, 161, 0.18);
	background:
		linear-gradient(145deg, rgba(12, 24, 40, 0.78), rgba(12, 24, 40, 0.38)),
		radial-gradient(circle at 70% 20%, rgba(52, 245, 161, 0.12), transparent 52%);
	box-shadow:
		0 22px 60px rgba(0, 0, 0, 0.38),
		inset 0 0 0 1px rgba(255, 255, 255, 0.035);
	backdrop-filter: blur(18px);
	z-index: 6;
	animation-duration: 9s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.hero-panel .delay-1 {
	top: 18px;
	left: 52%;
	right: auto;
	bottom: auto;
	animation-name: orbitBubbleTop;
	animation-delay: 0s;
}

.hero-panel .delay-2 {
	top: 51%;
	left: -6px;
	right: auto;
	bottom: auto;
	animation-name: orbitBubbleLeft;
	animation-delay: 1.05s;
}

.hero-panel .delay-3 {
	top: 58%;
	right: -2px;
	left: auto;
	bottom: auto;
	animation-name: orbitBubbleRight;
	animation-delay: 2.1s;
}

/* ---------- Printer cards: one stable layout ---------- */

.printer-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 132px;
	grid-template-areas:
		"logo image"
		"title image"
		"text text";
	column-gap: 8px;
	row-gap: 0;
	align-items: center;
	min-height: 275px;
	overflow: hidden;
}

.printer-card .sato-card-logo {
	grid-area: logo;
	display: block;
	width: clamp(112px, 42%, 158px);
	max-width: 100%;
	height: auto;
	margin: 0 0 18px;
	object-fit: contain;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.94);
	padding: 0px 0px;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}

.printer-card .printer-image-wrap {
	grid-area: image;
	justify-self: end;
	align-self: center;
	width: 142px;
	height: 132px;
	min-height: 0;
	margin: -4px 0 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0;
	background: transparent !important;
	overflow: visible;
	z-index: 1;
}

.printer-card .printer-product-image {
	display: block;
	width: 142px;
	max-width: none;
	height: 132px;
	object-fit: contain;
	object-position: center right;
	filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.36));
	transform: translateX(0);
	transition: transform 180ms ease, filter 180ms ease;
}

.printer-card h3 {
	grid-area: title;
	position: relative;
	z-index: 3;
	margin: 2px -28px 10px 0;
	transform: none;
	white-space: nowrap;
}

.printer-card p {
	grid-area: text;
	position: relative;
	z-index: 3;
	margin: 10px 0 0;
	max-width: 100%;
	transform: none;
}

.printer-card:hover .printer-product-image {
	transform: translateY(-2px) scale(1.025);
	filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.42));
}

/* ---------- Feature image ---------- */

.feature-link {
	overflow: hidden;
}

.feature-link .feature-link-image {
	display: block;
	width: 100%;
	max-width: 260px;
	height: auto;
	margin: 14px auto 6px;
	object-fit: contain;
	border-radius: 16px;
	filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.24));
	transition: transform 180ms ease, filter 180ms ease;
}

.feature-link:hover .feature-link-image {
	transform: translateY(-3px) scale(1.025);
	filter: drop-shadow(0 22px 32px rgba(0, 0, 0, 0.30));
}

/* ---------- Desktop balance ---------- */

@media (min-width: 1081px) {
	.hero {
		grid-template-columns: minmax(0, 0.78fr) minmax(560px, 1.22fr);
		gap: 34px;
	}

	.hero-content {
		max-width: 610px;
	}

	.hero h1 {
		font-size: clamp(2.55rem, 4.8vw, 4.85rem);
		line-height: 1.02;
		letter-spacing: -0.06em;
		margin-bottom: 24px;
	}

	.hero-copy {
		max-width: 570px;
		font-size: 1.06rem;
	}

	.hero-panel {
		min-height: 690px;
		transform: translateX(18px);
	}

	.hero-panel .machine-card {
		width: min(100%, 720px);
		min-height: 690px;
	}
}

/* ---------- Tablet / narrow desktop fix: 761px–1080px ---------- */

@media (max-width: 1080px) {
	.section-pad {
		padding-inline: 24px;
	}

	.hero {
		display: flex;
		flex-direction: column;
		min-height: auto;
		gap: 26px;
		padding-top: 72px;
	}

	.hero-panel {
		order: 1;
		width: min(100%, 700px);
		max-width: 700px;
		min-height: 590px;
		margin-inline: auto;
		transform: none;
		display: grid;
		place-items: center;
		align-items: center;
	}

	.hero-content {
		order: 2;
		max-width: 760px;
		width: 100%;
		margin-inline: auto;
	}

	.hero h1 {
		font-size: clamp(2.45rem, 7.5vw, 4.25rem);
		line-height: 1.02;
	}

	.hero-panel .machine-card {
		width: min(100%, 640px);
		min-height: 560px;
	}

	.machine-visual {
		width: min(92vw, 590px);
	}

	.hero-panel .delay-1 {
		top: 0;
		left: 50%;
	}

	.hero-panel .delay-2 {
		top: 54%;
		left: 0;
	}

	.hero-panel .delay-3 {
		top: 59%;
		right: 0;
	}

	.about-grid,
	.printer-grid,
	.project-grid,
	.customer-grid,
	.contact-layout {
		grid-template-columns: 1fr;
	}

	.feature-band {
		grid-template-columns: 1fr;
		padding: 36px;
		border-radius: 30px;
		margin-inline: 24px;
	}

	.feature-link {
		min-width: 0;
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 760px) {
	.nav-toggle {
		display: block;
	}

	.nav-links {
		position: absolute;
		top: 78px;
		left: 16px;
		right: 16px;
		display: none;
		flex-direction: column;
		align-items: stretch;
		padding: 14px;
		border: 1px solid var(--line);
		border-radius: 24px;
		background: rgba(8, 17, 31, 0.94);
		box-shadow: var(--shadow);
	}

	.nav-links.open {
		display: flex;
	}

	.nav-links a {
		padding: 14px;
	}

	.brand img {
		width: 172px;
	}

	.section-pad {
		padding: 76px 18px;
	}

	.hero {
		padding-top: 42px;
		gap: 20px;
	}

	.hero-panel {
		width: 100%;
		min-height: 540px;
		margin-bottom: 20px;
	}

	.hero-panel::before {
		display: none;
	}

	.hero-panel .machine-card {
		min-height: 380px;
		width: 100%;
	}

	.machine-visual {
		width: min(100%, 400px);
	}

	.machine-dot-core {
		width: 16px;
		height: 16px;
	}

	.machine-dot-left {
		width: 12px;
		height: 12px;
	}

	.machine-dot-top {
		width: 11px;
		height: 11px;
	}

	.machine-dot-bottom {
		width: 13px;
		height: 13px;
	}

	.hero-panel .metric-card {
		width: min(48%, 172px);
		min-height: 104px;
		padding: 15px;
	}

	.hero-panel .delay-1 {
		top: 0;
		left: 50%;
	}

	.hero-panel .delay-2 {
		top: auto;
		left: 0;
		bottom: 8px;
	}

	.hero-panel .delay-3 {
		top: auto;
		right: 0;
		bottom: 22px;
	}

	h1 {
		font-size: clamp(2.18rem, 11vw, 3.35rem);
	}

	.contact-grid {
		grid-template-columns: 1fr;
	}

	.trust-strip {
		margin-top: 0;
		padding-inline: 18px;
	}

	.cta-section {
		margin-inline: 18px;
		padding: 44px 24px;
		border-radius: 28px;
	}

	.footer {
		flex-direction: column;
		padding-inline: 18px;
	}

	.feature-link .feature-link-image {
		max-width: 230px;
		margin-top: 12px;
	}

	.printer-card {
		grid-template-columns: 1fr;
		grid-template-areas:
			"logo"
			"image"
			"title"
			"text";
		min-height: auto;
		overflow: hidden;
	}

	.printer-card .sato-card-logo {
		width: 138px;
		margin-bottom: 14px;
	}

	.printer-card .printer-image-wrap {
		width: 100%;
		height: 150px;
		margin: 0 0 4px;
		justify-self: center;
	}

	.printer-card .printer-product-image {
		width: min(100%, 190px);
		height: 148px;
		object-position: center;
		transform: none;
	}

	.printer-card h3 {
		margin: 8px 0 10px;
		white-space: normal;
	}

	.printer-card p {
		margin: 0;
	}

	.printer-card:hover .printer-product-image {
		transform: translateY(-2px) scale(1.02);
	}
}

@media (max-width: 520px) {
	.hero-panel {
		min-height: auto;
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.hero-panel .machine-card {
		order: 1;
		min-height: 340px;
	}

	.machine-visual {
		width: min(100%, 340px);
	}

	.hero-panel .floating-bubbles {
		position: relative;
		inset: auto;
		order: 2;
		display: grid;
		grid-template-columns: 1fr;
		gap: 12px;
		width: 100%;
	}

	.hero-panel .metric-card,
	.hero-panel .delay-1,
	.hero-panel .delay-2,
	.hero-panel .delay-3 {
		position: relative;
		inset: auto;
		width: 100%;
		transform: none;
		animation-name: mobileBubbleFloat;
	}

	.printer-card .printer-image-wrap {
		height: 132px;
	}

	.printer-card .printer-product-image {
		width: min(100%, 165px);
		height: 128px;
	}
}

/* ---------- Animations ---------- */

@keyframes statusPulse {

	0%,
	100% {
		transform: scale(1);
		box-shadow: 0 0 0 8px rgba(82, 199, 165, 0.12);
	}

	50% {
		transform: scale(1.85);
		box-shadow: 0 0 0 13px rgba(82, 199, 165, 0.06);
	}
}

@keyframes machineVisualFloat {

	0%,
	100% {
		transform: translate3d(0, 0, 0) scale(1);
	}

	50% {
		transform: translate3d(0, -10px, 0) scale(1.012);
	}
}

@keyframes machineHalo {
	from {
		transform: scale(0.94);
		opacity: 0.64;
	}

	to {
		transform: scale(1.04);
		opacity: 1;
	}
}

@keyframes machineRing {
	from {
		transform: rotate(0deg) scale(0.98);
	}

	to {
		transform: rotate(360deg) scale(0.98);
	}
}

@keyframes machineGlowPulse {

	0%,
	100% {
		transform: translate(-50%, -50%) scale(1);
		filter: brightness(1);
		box-shadow:
			0 0 0 9px rgba(141, 255, 39, 0.11),
			0 0 26px rgba(141, 255, 39, 0.95),
			0 0 72px rgba(52, 245, 161, 0.62);
	}

	50% {
		transform: translate(-50%, -50%) scale(1.65);
		filter: brightness(1.35);
		box-shadow:
			0 0 0 16px rgba(141, 255, 39, 0.055),
			0 0 38px rgba(186, 255, 85, 1),
			0 0 98px rgba(52, 245, 161, 0.82);
	}
}

@keyframes machineGlowAura {

	0%,
	100% {
		transform: scale(0.82);
		opacity: 0.58;
	}

	50% {
		transform: scale(1.55);
		opacity: 0.18;
	}
}

@keyframes machineGlowRing {

	0%,
	100% {
		transform: scale(0.76);
		opacity: 0.46;
	}

	50% {
		transform: scale(1.28);
		opacity: 0.10;
	}
}

@keyframes orbitBubbleTop {

	0%,
	100% {
		transform: translate(-50%, 0);
	}

	25% {
		transform: translate(calc(-50% + 12px), -12px);
	}

	50% {
		transform: translate(calc(-50% - 10px), 8px);
	}

	75% {
		transform: translate(calc(-50% + 6px), 12px);
	}
}

@keyframes orbitBubbleLeft {

	0%,
	100% {
		transform: translate(0, -50%);
	}

	25% {
		transform: translate(-12px, calc(-50% - 10px));
	}

	50% {
		transform: translate(8px, calc(-50% + 8px));
	}

	75% {
		transform: translate(-4px, calc(-50% + 14px));
	}
}

@keyframes orbitBubbleRight {

	0%,
	100% {
		transform: translate(0, -50%);
	}

	25% {
		transform: translate(12px, calc(-50% + 10px));
	}

	50% {
		transform: translate(-8px, calc(-50% - 8px));
	}

	75% {
		transform: translate(4px, calc(-50% - 14px));
	}
}

@keyframes mobileBubbleFloat {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-7px);
	}
}

/* =========================================================
   FINAL RESPONSIVE FIXES
   Purpose:
   - prevent gear visual disappearing / sliding off-canvas between 761px and 1080px
   - keep image and glow dots locked together
   - stabilize printer-card rendering on mobile
   ========================================================= */

/* Put the machine image into a deterministic square anchor.
   The previous relative/grid positioning could drift at intermediate widths. */
.hero-panel .machine-card {
	position: relative !important;
	display: block !important;
	aspect-ratio: 1 / 1;
	min-height: 0 !important;
	height: auto !important;
	overflow: visible !important;
}

.machine-visual {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	aspect-ratio: 1 / 1;
	display: block !important;
	overflow: visible !important;
	transform-origin: center center;
	transform: translate(-50%, -50%);
	animation: machineVisualFloatCentered 6.8s ease-in-out infinite !important;
}

.machine-hero-image {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: contain !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	animation: none !important;
	z-index: 1;
}

.machine-dot {
	z-index: 4;
}

/* Full desktop keeps the large artwork. */
@media (min-width: 1081px) {
	.hero-panel .machine-card {
		width: min(100%, 720px) !important;
	}

	.machine-visual {
		width: min(100%, 700px) !important;
	}
}

/* Critical fix: tablet / narrow desktop.
   This is the range where the artwork was disappearing and only the glow was visible. */
@media (min-width: 761px) and (max-width: 1080px) {
	.hero {
		display: flex !important;
		flex-direction: column !important;
		min-height: auto !important;
		gap: 28px !important;
		padding-top: 70px !important;
	}

	.hero-panel {
		order: 1 !important;
		position: relative !important;
		width: min(100%, 760px) !important;
		max-width: 760px !important;
		min-height: 620px !important;
		margin-inline: auto !important;
		transform: none !important;
		display: grid !important;
		place-items: center !important;
		overflow: visible !important;
	}

	.hero-content {
		order: 2 !important;
		width: min(100%, 760px) !important;
		max-width: 760px !important;
		margin-inline: auto !important;
	}

	.hero-panel .machine-card {
		width: min(88vw, 640px) !important;
		max-width: 640px !important;
	}

	.machine-visual {
		width: min(86vw, 600px) !important;
		max-width: 600px !important;
	}

	.hero-panel .floating-bubbles {
		position: absolute !important;
		inset: 0 !important;
		display: block !important;
		width: 100% !important;
		z-index: 5 !important;
		pointer-events: none !important;
	}

	.hero-panel .metric-card {
		width: clamp(142px, 25vw, 178px) !important;
		min-height: 108px !important;
	}

	.hero-panel .delay-1 {
		top: 6px !important;
		left: 50% !important;
		right: auto !important;
		bottom: auto !important;
		animation-name: orbitBubbleTop !important;
	}

	.hero-panel .delay-2 {
		top: 54% !important;
		left: 0 !important;
		right: auto !important;
		bottom: auto !important;
		animation-name: orbitBubbleLeft !important;
	}

	.hero-panel .delay-3 {
		top: 59% !important;
		right: 0 !important;
		left: auto !important;
		bottom: auto !important;
		animation-name: orbitBubbleRight !important;
	}
}

/* Mobile keeps the drawing before text and avoids huge empty vertical areas. */
@media (max-width: 760px) {
	.hero {
		display: flex !important;
		flex-direction: column !important;
		min-height: auto !important;
		gap: 20px !important;
	}

	.hero-panel {
		order: 1 !important;
		position: relative !important;
		width: 100% !important;
		min-height: 520px !important;
		margin-inline: auto !important;
		transform: none !important;
		overflow: visible !important;
	}

	.hero-content {
		order: 2 !important;
	}

	.hero-panel .machine-card {
		width: min(100%, 400px) !important;
		margin-inline: auto !important;
	}

	.machine-visual {
		width: min(100%, 380px) !important;
	}

	.hero-panel .metric-card {
		width: min(48%, 172px) !important;
		min-height: 104px !important;
	}
}

/* Very small screens: stack the bubbles below the image, not over it. */
@media (max-width: 520px) {
	.hero-panel {
		min-height: auto !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 16px !important;
	}

	.hero-panel .machine-card {
		order: 1 !important;
		width: min(100%, 340px) !important;
	}

	.machine-visual {
		width: min(100%, 330px) !important;
	}

	.hero-panel .floating-bubbles {
		position: relative !important;
		inset: auto !important;
		order: 2 !important;
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 12px !important;
		width: 100% !important;
	}

	.hero-panel .metric-card,
	.hero-panel .delay-1,
	.hero-panel .delay-2,
	.hero-panel .delay-3 {
		position: relative !important;
		inset: auto !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		left: auto !important;
		width: 100% !important;
		transform: none !important;
		animation-name: mobileBubbleFloat !important;
	}
}

/* Printer cards: final mobile stabilization.
   Prevents previous grid/overlap rules from leaking into small screens. */
@media (max-width: 760px) {
	.printer-card {
		display: grid !important;
		grid-template-columns: 1fr !important;
		grid-template-areas:
			"logo"
			"image"
			"title"
			"text" !important;
		row-gap: 0 !important;
		min-height: auto !important;
		overflow: hidden !important;
		padding: 24px !important;
	}

	.printer-card .sato-card-logo {
		grid-area: logo !important;
		width: 138px !important;
		margin: 0 0 14px !important;
		justify-self: start !important;
	}

	.printer-card .printer-image-wrap {
		grid-area: image !important;
		width: 100% !important;
		max-width: 220px !important;
		height: 144px !important;
		min-height: 0 !important;
		margin: 0 auto 6px !important;
		justify-self: center !important;
		align-self: center !important;
		background: transparent !important;
		overflow: visible !important;
	}

	.printer-card .printer-product-image {
		width: 100% !important;
		max-width: 190px !important;
		height: 140px !important;
		object-fit: contain !important;
		object-position: center !important;
		transform: none !important;
	}

	.printer-card h3 {
		grid-area: title !important;
		margin: 8px 0 10px !important;
		transform: none !important;
		white-space: normal !important;
		z-index: 3 !important;
	}

	.printer-card p {
		grid-area: text !important;
		margin: 0 !important;
		max-width: 100% !important;
		transform: none !important;
		z-index: 3 !important;
	}
}

@media (max-width: 420px) {
	.printer-card .printer-image-wrap {
		height: 126px !important;
	}

	.printer-card .printer-product-image {
		max-width: 165px !important;
		height: 122px !important;
	}
}

/* Centered animation version. Without this, transform-based centering can be
   overridden by the float animation and cause the image to drift off-canvas. */
@keyframes machineVisualFloatCentered {

	0%,
	100% {
		transform: translate(-50%, -50%) translate3d(0, 0, 0) scale(1);
	}

	50% {
		transform: translate(-50%, -50%) translate3d(0, -10px, 0) scale(1.012);
	}
}

/* =========================================================
   UNCANNY WIDTH FIX
   Problem observed: between mobile and desktop widths the gear <img>
   could disappear while a glow dot remained visible.

   Fix strategy:
   - for <=1080px, render the gear artwork as the background of the
     same .machine-visual square that holds the glow dots
   - hide the <img> only in this breakpoint range to avoid duplicate art
   - keep all four glow dots positioned against the same coordinate plane
   - keep smaller mobile layout stable
   ========================================================= */

@media (max-width: 1080px) {
	.hero {
		display: flex !important;
		flex-direction: column !important;
		min-height: auto !important;
	}

	.hero-panel {
		order: 1 !important;
		position: relative !important;
		display: grid !important;
		place-items: center !important;
		width: 100% !important;
		min-height: clamp(520px, 88vw, 680px) !important;
		overflow: visible !important;
		transform: none !important;
	}

	.hero-content {
		order: 2 !important;
		width: min(100%, 760px) !important;
		margin-inline: auto !important;
	}

	.hero-panel .machine-card {
		position: relative !important;
		display: block !important;
		width: min(92vw, 680px) !important;
		aspect-ratio: 1 / 1 !important;
		min-height: 0 !important;
		height: auto !important;
		overflow: visible !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
	}

	.machine-visual {
		position: absolute !important;
		top: 50% !important;
		left: 50% !important;
		display: block !important;
		width: min(90vw, 620px) !important;
		aspect-ratio: 1 / 1 !important;
		overflow: visible !important;
		background-image: url("img/vintage-gears.png") !important;
			background-image: image-set(url("img/vintage-gears.webp") type("image/webp"), url("img/vintage-gears.png") type("image/png")) !important;
		background-repeat: no-repeat !important;
		background-position: center !important;
		background-size: contain !important;
		transform-origin: center center !important;
		animation: machineVisualFloatCentered 6.8s ease-in-out infinite !important;
		z-index: 2 !important;
	}

	.machine-visual .machine-hero-image {
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
	}

	.machine-dot {
		display: block !important;
		opacity: 1 !important;
		visibility: visible !important;
	}

	.machine-dot-core {
		left: 55.31% !important;
		top: 49.49% !important;
	}

	.machine-dot-left {
		left: 17.72% !important;
		top: 57.00% !important;
	}

	.machine-dot-top {
		left: 73.93% !important;
		top: 23.05% !important;
	}

	.machine-dot-bottom {
		left: 48.76% !important;
		top: 77.75% !important;
	}

	.hero-panel .floating-bubbles {
		position: absolute !important;
		inset: 0 !important;
		display: block !important;
		width: 100% !important;
		height: 100% !important;
		z-index: 6 !important;
		pointer-events: none !important;
	}

	.hero-panel .metric-card {
		position: absolute !important;
		width: clamp(142px, 25vw, 178px) !important;
		min-height: 108px !important;
	}

	.hero-panel .delay-1 {
		top: 3% !important;
		left: 50% !important;
		right: auto !important;
		bottom: auto !important;
		animation-name: orbitBubbleTop !important;
	}

	.hero-panel .delay-2 {
		top: 56% !important;
		left: 0 !important;
		right: auto !important;
		bottom: auto !important;
		animation-name: orbitBubbleLeft !important;
	}

	.hero-panel .delay-3 {
		top: 60% !important;
		right: 0 !important;
		left: auto !important;
		bottom: auto !important;
		animation-name: orbitBubbleRight !important;
	}
}

/* The actual phone layout starts here; above this, keep the graphic large. */
@media (max-width: 760px) {
	.hero-panel {
		min-height: clamp(500px, 118vw, 620px) !important;
		margin-bottom: 18px !important;
	}

	.hero-panel .machine-card {
		width: min(92vw, 410px) !important;
	}

	.machine-visual {
		width: min(90vw, 390px) !important;
	}

	.hero-panel .metric-card {
		width: min(48%, 172px) !important;
		min-height: 104px !important;
	}

	.hero-panel .delay-1 {
		top: 0 !important;
		left: 50% !important;
	}

	.hero-panel .delay-2 {
		top: auto !important;
		left: 0 !important;
		bottom: 8px !important;
	}

	.hero-panel .delay-3 {
		top: auto !important;
		right: 0 !important;
		bottom: 22px !important;
	}
}

/* Very small phones: no overlap game; stack bubbles under the drawing. */
@media (max-width: 520px) {
	.hero-panel {
		min-height: auto !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 16px !important;
	}

	.hero-panel .machine-card {
		order: 1 !important;
		width: min(92vw, 340px) !important;
	}

	.machine-visual {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		width: min(92vw, 330px) !important;
		transform: none !important;
		animation: mobileMachineFloat 6.8s ease-in-out infinite !important;
	}

	.hero-panel .floating-bubbles {
		position: relative !important;
		inset: auto !important;
		order: 2 !important;
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 12px !important;
		width: 100% !important;
		height: auto !important;
	}

	.hero-panel .metric-card,
	.hero-panel .delay-1,
	.hero-panel .delay-2,
	.hero-panel .delay-3 {
		position: relative !important;
		inset: auto !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		left: auto !important;
		width: 100% !important;
		transform: none !important;
		animation-name: mobileBubbleFloat !important;
	}
}

@keyframes machineVisualFloatCentered {

	0%,
	100% {
		transform: translate(-50%, -50%) translate3d(0, 0, 0) scale(1);
	}

	50% {
		transform: translate(-50%, -50%) translate3d(0, -10px, 0) scale(1.012);
	}
}

@keyframes mobileMachineFloat {

	0%,
	100% {
		transform: translate3d(0, 0, 0) scale(1);
	}

	50% {
		transform: translate3d(0, -8px, 0) scale(1.01);
	}
}

/* =========================================================
   FINAL PRINTER-CARD RESPONSIVE FIX
   Keeps printer images right-aligned at all narrow widths.
   This intentionally comes last to override older max-width: 760/520/420 rules.
   ========================================================= */

.printer-card .printer-image-wrap {
	justify-content: flex-end;
}

.printer-card .printer-product-image {
	margin-left: auto;
	margin-right: 0;
	object-position: center right;
}

/* Tablet / narrow single-column cards */
@media (max-width: 1080px) {
	.printer-card {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) clamp(118px, 24vw, 150px) !important;
		grid-template-areas:
			"logo image"
			"title image"
			"text text" !important;
		column-gap: 10px !important;
		align-items: center !important;
		overflow: hidden !important;
	}

	.printer-card .printer-image-wrap {
		grid-area: image !important;
		justify-self: end !important;
		align-self: center !important;
		justify-content: flex-end !important;
		width: clamp(118px, 24vw, 150px) !important;
		max-width: none !important;
		height: clamp(118px, 22vw, 140px) !important;
		min-height: 0 !important;
		margin: 0 0 6px auto !important;
		background: transparent !important;
		overflow: visible !important;
	}

	.printer-card .printer-product-image {
		display: block !important;
		width: clamp(118px, 24vw, 150px) !important;
		max-width: none !important;
		height: clamp(112px, 21vw, 136px) !important;
		object-fit: contain !important;
		object-position: center right !important;
		margin-left: auto !important;
		margin-right: 0 !important;
		transform: none !important;
	}

	.printer-card h3 {
		grid-area: title !important;
		margin-right: -18px !important;
		white-space: nowrap !important;
	}

	.printer-card p {
		grid-area: text !important;
		max-width: 100% !important;
		margin-top: 10px !important;
	}
}

/* Phone cards: stack content, but keep the printer image aligned right */
@media (max-width: 760px) {
	.printer-card {
		grid-template-columns: 1fr !important;
		grid-template-areas:
			"logo"
			"image"
			"title"
			"text" !important;
		row-gap: 0 !important;
	}

	.printer-card .sato-card-logo {
		grid-area: logo !important;
		justify-self: start !important;
	}

	.printer-card .printer-image-wrap {
		grid-area: image !important;
		justify-self: end !important;
		align-self: center !important;
		justify-content: flex-end !important;
		width: min(62vw, 210px) !important;
		max-width: none !important;
		height: clamp(124px, 34vw, 152px) !important;
		margin: -2px 0 6px auto !important;
	}

	.printer-card .printer-product-image {
		width: min(62vw, 195px) !important;
		max-width: none !important;
		height: clamp(118px, 32vw, 145px) !important;
		object-position: center right !important;
		margin-left: auto !important;
		margin-right: 0 !important;
	}

	.printer-card h3 {
		grid-area: title !important;
		margin: 8px 0 10px !important;
		white-space: normal !important;
	}

	.printer-card p {
		grid-area: text !important;
		margin: 0 !important;
	}
}

/* Smallest phones: previous CSS centered the image here; force right alignment */
@media (max-width: 520px) {
	.printer-card .printer-image-wrap {
		justify-self: end !important;
		justify-content: flex-end !important;
		width: min(60vw, 178px) !important;
		height: clamp(112px, 32vw, 132px) !important;
		margin: -4px 0 4px auto !important;
	}

	.printer-card .printer-product-image {
		width: min(60vw, 165px) !important;
		height: clamp(108px, 30vw, 126px) !important;
		object-position: center right !important;
		margin-left: auto !important;
		margin-right: 0 !important;
	}
}

@media (max-width: 420px) {
	.printer-card .printer-image-wrap {
		width: min(58vw, 156px) !important;
		height: 116px !important;
	}

	.printer-card .printer-product-image {
		width: min(58vw, 148px) !important;
		height: 112px !important;
	}
}

/* =========================================================
   FINAL PRINTER IMAGE COMPACTING FIX
   Reduces wasted space around .printer-product-image while keeping
   the image right-aligned in the printer cards.
   ========================================================= */

.printer-card .printer-image-wrap {
	line-height: 0 !important;
}

/* Tablet / narrow single-column cards */
@media (max-width: 1080px) {
	.printer-card {
		grid-template-columns: minmax(0, 1fr) max-content !important;
		column-gap: 8px !important;
	}

	.printer-card .printer-image-wrap {
		width: max-content !important;
		max-width: 154px !important;
		height: auto !important;
		min-height: 0 !important;
		margin: 0 0 4px auto !important;
		padding: 0 !important;
		justify-self: end !important;
		align-self: center !important;
		justify-content: flex-end !important;
		background: transparent !important;
		overflow: visible !important;
	}

	.printer-card .printer-product-image {
		display: block !important;
		width: clamp(118px, 20vw, 154px) !important;
		height: auto !important;
		max-height: 132px !important;
		max-width: none !important;
		object-fit: contain !important;
		object-position: center right !important;
		margin: 0 0 0 auto !important;
		transform: none !important;
	}

	.printer-card h3 {
		margin-right: -12px !important;
	}
}

/* Phone cards */
@media (max-width: 760px) {
	.printer-card {
		grid-template-columns: 1fr !important;
		grid-template-areas:
			"logo"
			"image"
			"title"
			"text" !important;
	}

	.printer-card .printer-image-wrap {
		width: max-content !important;
		max-width: min(54vw, 184px) !important;
		height: auto !important;
		min-height: 0 !important;
		margin: -4px 0 2px auto !important;
		padding: 0 !important;
		justify-self: end !important;
	}

	.printer-card .printer-product-image {
		width: min(54vw, 184px) !important;
		height: auto !important;
		max-height: 132px !important;
		margin: 0 !important;
	}

	.printer-card h3 {
		margin-top: 4px !important;
	}
}

/* Small phones */
@media (max-width: 520px) {
	.printer-card .printer-image-wrap {
		max-width: min(50vw, 160px) !important;
		margin: -6px 0 0 auto !important;
	}

	.printer-card .printer-product-image {
		width: min(50vw, 160px) !important;
		max-height: 118px !important;
	}
}

@media (max-width: 420px) {
	.printer-card .printer-image-wrap {
		max-width: min(48vw, 142px) !important;
	}

	.printer-card .printer-product-image {
		width: min(48vw, 142px) !important;
		max-height: 108px !important;
	}
}

/* =========================================================
   FINAL PRINTER-CARD LAYOUT RESET
   Render .printer-card the same way on mobile/tablet as on desktop.
   No special mobile scaling, no stacking, no compact-image overrides.
   ========================================================= */

@media all {
	.printer-card {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) 132px !important;
		grid-template-areas:
			"logo image"
			"title image"
			"text text" !important;
		column-gap: 8px !important;
		row-gap: 0 !important;
		align-items: center !important;
		min-height: 275px !important;
		overflow: hidden !important;
	}

	.printer-card .sato-card-logo {
		grid-area: logo !important;
		display: block !important;
		width: clamp(112px, 42%, 158px) !important;
		max-width: 100% !important;
		height: auto !important;
		margin: 0 0 18px !important;
		object-fit: contain !important;
		border-radius: 8px !important;
		background: rgba(255, 255, 255, 0.94) !important;
		padding: 0 !important;
		box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18) !important;
		justify-self: start !important;
	}

	.printer-card .printer-image-wrap {
		grid-area: image !important;
		justify-self: end !important;
		align-self: center !important;
		width: 142px !important;
		max-width: none !important;
		height: 132px !important;
		min-height: 0 !important;
		margin: -4px 0 4px !important;
		padding: 0 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
		border-radius: 0 !important;
		background: transparent !important;
		overflow: visible !important;
		line-height: normal !important;
		z-index: 1 !important;
	}

	.printer-card .printer-product-image {
		display: block !important;
		width: 142px !important;
		max-width: none !important;
		height: 132px !important;
		max-height: none !important;
		object-fit: contain !important;
		object-position: center right !important;
		margin: 0 !important;
		filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.36)) !important;
		transform: translateX(0) !important;
		transition: transform 180ms ease, filter 180ms ease !important;
	}

	.printer-card h3 {
		grid-area: title !important;
		position: relative !important;
		z-index: 3 !important;
		margin: 2px -28px 10px 0 !important;
		transform: none !important;
		white-space: nowrap !important;
	}

	.printer-card p {
		grid-area: text !important;
		position: relative !important;
		z-index: 3 !important;
		margin: 10px 0 0 !important;
		max-width: 100% !important;
		transform: none !important;
	}

	.printer-card:hover .printer-product-image {
		transform: translateY(-2px) scale(1.025) !important;
		filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.42)) !important;
	}
}

/* Explicitly neutralize every previous narrow breakpoint that changed printer-card. */
@media (max-width: 1080px),
(max-width: 760px),
(max-width: 520px),
(max-width: 420px) {
	.printer-card {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) 132px !important;
		grid-template-areas:
			"logo image"
			"title image"
			"text text" !important;
		column-gap: 8px !important;
		row-gap: 0 !important;
		align-items: center !important;
		min-height: 275px !important;
		overflow: hidden !important;
		padding: 28px !important;
	}

	.printer-card .sato-card-logo {
		grid-area: logo !important;
		width: clamp(112px, 42%, 158px) !important;
		max-width: 100% !important;
		height: auto !important;
		margin: 0 0 18px !important;
		justify-self: start !important;
	}

	.printer-card .printer-image-wrap {
		grid-area: image !important;
		justify-self: end !important;
		align-self: center !important;
		width: 142px !important;
		max-width: none !important;
		height: 132px !important;
		min-height: 0 !important;
		margin: -4px 0 4px !important;
		padding: 0 !important;
		justify-content: flex-end !important;
		background: transparent !important;
		overflow: visible !important;
	}

	.printer-card .printer-product-image {
		width: 142px !important;
		max-width: none !important;
		height: 132px !important;
		max-height: none !important;
		object-fit: contain !important;
		object-position: center right !important;
		margin: 0 !important;
		transform: translateX(0) !important;
	}

	.printer-card h3 {
		grid-area: title !important;
		margin: 2px -28px 10px 0 !important;
		transform: none !important;
		white-space: nowrap !important;
	}

	.printer-card p {
		grid-area: text !important;
		margin: 10px 0 0 !important;
		max-width: 100% !important;
		transform: none !important;
	}
}

/* Very narrow safety: only reduce card padding, not the internal layout. */
@media (max-width: 380px) {
	.printer-card {
		padding: 22px !important;
	}
}

/* =========================================================
   PROJECT-CARD LAYOUT MATCHING PRINTER-CARD
   Layout:
   - logo/tag upper-left
   - product/project image upper-right
   - title mid-left
   - description and link at base
   ========================================================= */

.project-card {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) 132px !important;
	grid-template-areas:
		"logo image"
		"title image"
		"text text"
		"link link" !important;
	column-gap: 8px !important;
	row-gap: 0 !important;
	align-items: center !important;
	justify-content: initial !important;
	min-height: 275px !important;
	padding: 28px !important;
	overflow: hidden !important;
	position: relative !important;
}

/* Keep the original hover glow as background only. */
.project-card::before {
	z-index: 0 !important;
}

/* Printer/project picture in the upper-right.
   Uses the existing barcode-printer asset without requiring HTML changes. */
.project-card::after {
	content: "" !important;
	grid-area: image !important;
	justify-self: end !important;
	align-self: center !important;
	width: 142px !important;
	height: 132px !important;
	margin: -4px 0 4px !important;
	background: url("img/barcode-printer.png") center right / contain no-repeat !important;
	background-image: image-set(url("img/barcode-printer.webp") type("image/webp"), url("img/barcode-printer.png") type("image/png")) !important;
	filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.36)) !important;
	position: relative !important;
	z-index: 1 !important;
	pointer-events: none !important;
	transition: transform 180ms ease, filter 180ms ease !important;
}

.project-card:hover::after {
	transform: translateY(-2px) scale(1.025) !important;
	filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.42)) !important;
}

.project-card>* {
	position: relative !important;
	z-index: 3 !important;
}

.project-card .project-tag {
	grid-area: logo !important;
	justify-self: start !important;
	align-self: start !important;
	margin: 0 0 18px !important;
}

.project-card h3 {
	grid-area: title !important;
	position: relative !important;
	z-index: 3 !important;
	margin: 2px -28px 10px 0 !important;
	transform: none !important;
	white-space: nowrap !important;
	font-size: 2.35rem !important;
}

.project-card p {
	grid-area: text !important;
	position: relative !important;
	z-index: 3 !important;
	margin: 24px 0 0 !important;
	max-width: 100% !important;
	transform: none !important;
	color: var(--muted) !important;
}

.project-card strong {
	grid-area: link !important;
	justify-self: start !important;
	margin: 16px 0 0 !important;
	color: var(--accent-3) !important;
}

/* Optional future-proof support: if a real image/logo is added inside
   the project-card, it will occupy the same upper-right image slot. */
.project-card .project-image-wrap {
	grid-area: image !important;
	justify-self: end !important;
	align-self: center !important;
	width: 142px !important;
	height: 132px !important;
	margin: -4px 0 4px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	background: transparent !important;
	overflow: visible !important;
	position: relative !important;
	z-index: 2 !important;
}

.project-card .project-image,
.project-card .project-image-wrap img {
	display: block !important;
	width: 142px !important;
	max-width: none !important;
	height: 132px !important;
	object-fit: contain !important;
	object-position: center right !important;
	margin: 0 !important;
	filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.36)) !important;
}

/* If a real image wrapper exists, do not also show the CSS fallback image. */
.project-card:has(.project-image-wrap)::after,
.project-card:has(.project-image)::after {
	display: none !important;
}

/* Keep the same project-card layout on tablet/mobile. */
@media (max-width: 1080px),
(max-width: 760px),
(max-width: 520px),
(max-width: 420px) {
	.project-card {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) 132px !important;
		grid-template-areas:
			"logo image"
			"title image"
			"text text"
			"link link" !important;
		column-gap: 8px !important;
		row-gap: 0 !important;
		align-items: center !important;
		justify-content: initial !important;
		min-height: 275px !important;
		padding: 28px !important;
		overflow: hidden !important;
	}

	.project-card::after {
		grid-area: image !important;
		justify-self: end !important;
		align-self: center !important;
		width: 142px !important;
		height: 132px !important;
		margin: -4px 0 4px !important;
	}

	.project-card .project-tag {
		grid-area: logo !important;
		margin: 0 0 18px !important;
	}

	.project-card h3 {
		grid-area: title !important;
		margin: 2px -28px 10px 0 !important;
		white-space: nowrap !important;
		font-size: 2.35rem !important;
	}

	.project-card p {
		grid-area: text !important;
		margin: 24px 0 0 !important;
	}

	.project-card strong {
		grid-area: link !important;
		margin: 16px 0 0 !important;
	}
}

/* Very narrow safety: reduce padding only, not the internal layout. */
@media (max-width: 380px) {
	.project-card {
		padding: 22px !important;
	}
}

/* =========================================================
   SUPPORT-CARD COMPACT FIX
   Removes the forced tall-card behavior and lets support cards
   follow their actual content height.
   ========================================================= */

.support-card {
	min-height: 0 !important;
	height: auto !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-start !important;
	padding: 28px !important;
}

.support-card h3 {
	margin-bottom: 12px !important;
}

.support-card p {
	margin-bottom: 0 !important;
}

.support-card .support-icon {
	width: 48px !important;
	height: 48px !important;
	margin-bottom: 18px !important;
	border-radius: 16px !important;
}

.support-card .btn {
	align-self: flex-start !important;
	margin-top: 24px !important;
}

/* Keep the compact behavior on all responsive breakpoints. */
@media (max-width: 1080px),
(max-width: 760px),
(max-width: 520px),
(max-width: 420px) {
	.support-card {
		min-height: 0 !important;
		height: auto !important;
		padding: 26px !important;
	}

	.support-card .btn {
		margin-top: 22px !important;
	}
}

/* =========================================================
   CARD BOTTOM ARTIFACT FIX
   Removes the unaesthetic bottom-right pseudo-element/glow band from
   printer/project-style cards while preserving the clean card layout.
   ========================================================= */

/* The original .printer-card::after radial glow can create a visible
   horizontal artifact near the lower-right rounded corner. */
.printer-card::after {
	display: none !important;
	content: none !important;
}

/* Keep project cards clean too. The project image should be a real element
   or handled by the explicit project-card image layout, not by a bottom glow. */
.project-card::before {
	inset: 0 !important;
	border-radius: inherit !important;
	background: radial-gradient(circle at top right, rgba(98, 230, 255, 0.13), transparent 42%) !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.project-card:hover::before {
	opacity: 1 !important;
}

/* Clip all decorative effects strictly inside the rounded card. */
.printer-card,
.project-card {
	overflow: hidden !important;
	background-clip: padding-box !important;
}

/* Ensure all real card content stays above any decorative layer. */
.printer-card>*,
.project-card>* {
	position: relative !important;
	z-index: 2 !important;
}

/* =========================================================
   PRINTER-CARD DECORATIVE GLOW ORB
   Replaces the old bottom-right band artifact with a clean circular
   orb that casts ambient light across the entire card.
   ========================================================= */

.printer-card {
	position: relative !important;
	overflow: hidden !important;
	isolation: isolate !important;
}

/* Ambient wash across the card */
.printer-card::before {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	border-radius: inherit !important;
	pointer-events: none !important;
	z-index: 0 !important;
	background:
		radial-gradient(circle at 92% 88%,
			rgba(52, 245, 161, 0.22) 0%,
			rgba(98, 230, 255, 0.14) 22%,
			rgba(141, 124, 255, 0.07) 44%,
			transparent 72%) !important;
}

/* Actual glowing orb in the bottom-right corner */
.printer-card::after {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	right: -58px !important;
	bottom: -58px !important;
	width: 190px !important;
	height: 190px !important;
	border-radius: 999px !important;
	pointer-events: none !important;
	z-index: 1 !important;
	background:
		radial-gradient(circle at 38% 38%,
			rgba(255, 255, 255, 0.96) 0 4%,
			rgba(98, 230, 255, 0.92) 9%,
			rgba(52, 245, 161, 0.72) 22%,
			rgba(52, 245, 161, 0.30) 42%,
			rgba(52, 245, 161, 0.10) 58%,
			transparent 72%) !important;
	box-shadow:
		0 0 34px rgba(98, 230, 255, 0.38),
		0 0 82px rgba(52, 245, 161, 0.30),
		0 0 150px rgba(52, 245, 161, 0.18) !important;
	filter: blur(0.2px) saturate(1.1) !important;
	transform: translateZ(0) !important;
}

/* Keep all printer-card content above the glow. */
.printer-card>* {
	position: relative !important;
	z-index: 2 !important;
}

/* Slightly smaller orb on narrow cards, same visual behavior. */
@media (max-width: 760px) {
	.printer-card::after {
		right: -50px !important;
		bottom: -50px !important;
		width: 160px !important;
		height: 160px !important;
	}
}

@media (max-width: 420px) {
	.printer-card::after {
		right: -44px !important;
		bottom: -44px !important;
		width: 138px !important;
		height: 138px !important;
	}
}

/* =========================================================
   PRINTER-CARD SOFT DISCREET GLOW
   Replaces the bright orb with a subtle bottom-right radial glow.
   Center is visually anchored in the bottom-right corner, under text.
   ========================================================= */

.printer-card {
	position: relative !important;
	overflow: hidden !important;
	isolation: isolate !important;
}

/* Very soft ambient tint across the card, no hard center. */
.printer-card::before {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	border-radius: inherit !important;
	pointer-events: none !important;
	z-index: 0 !important;
	background:
		radial-gradient(circle at 100% 100%,
			rgba(52, 245, 161, 0.115) 0%,
			rgba(98, 230, 255, 0.070) 26%,
			rgba(98, 230, 255, 0.030) 48%,
			transparent 74%) !important;
	opacity: 0.78 !important;
}

/* Discreet glow source, centered exactly at the bottom-right corner. */
.printer-card::after {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	right: -95px !important;
	bottom: -95px !important;
	width: 190px !important;
	height: 190px !important;
	border-radius: 999px !important;
	pointer-events: none !important;
	z-index: 1 !important;
	background:
		radial-gradient(circle,
			rgba(52, 245, 161, 0.180) 0%,
			rgba(52, 245, 161, 0.105) 24%,
			rgba(98, 230, 255, 0.055) 48%,
			rgba(98, 230, 255, 0.025) 62%,
			transparent 76%) !important;
	box-shadow:
		0 0 42px rgba(52, 245, 161, 0.090),
		0 0 96px rgba(98, 230, 255, 0.060) !important;
	filter: blur(8px) saturate(0.95) !important;
	opacity: 0.68 !important;
	transform: translateZ(0) !important;
}

/* Keep white text and real content above the glow. */
.printer-card>* {
	position: relative !important;
	z-index: 2 !important;
}

/* Slightly softer on narrow cards because the glow occupies proportionally more area. */
@media (max-width: 760px) {
	.printer-card::before {
		opacity: 0.64 !important;
	}

	.printer-card::after {
		right: -82px !important;
		bottom: -82px !important;
		width: 164px !important;
		height: 164px !important;
		opacity: 0.54 !important;
		filter: blur(9px) saturate(0.9) !important;
	}
}

@media (max-width: 420px) {
	.printer-card::after {
		right: -72px !important;
		bottom: -72px !important;
		width: 144px !important;
		height: 144px !important;
		opacity: 0.48 !important;
	}
}

/* =========================================================
   FINAL PRINTER-CARD CORNER-CENTERED GLOW
   The glow center is exactly the bottom-right corner of .printer-card:
   radial-gradient(circle at 100% 100%, ...)
   No outside orb, no offset pseudo-element.
   ========================================================= */

.printer-card {
	position: relative !important;
	overflow: hidden !important;
	isolation: isolate !important;
}

/* Remove any previous ambient wash layer. */
.printer-card::before {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	border-radius: inherit !important;
	pointer-events: none !important;
	z-index: 0 !important;
	background:
		radial-gradient(circle at 100% 100%,
			rgba(52, 245, 161, 0.145) 0%,
			rgba(52, 245, 161, 0.095) 16%,
			rgba(98, 230, 255, 0.050) 32%,
			rgba(98, 230, 255, 0.025) 48%,
			transparent 68%) !important;
	opacity: 0.72 !important;
	filter: none !important;
}

/* Same coordinate plane as the card. The glow center is not outside;
   it is exactly at the bottom-right corner: 100% 100%. */
.printer-card::after {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	inset: 0 !important;
	right: auto !important;
	bottom: auto !important;
	width: auto !important;
	height: auto !important;
	border-radius: inherit !important;
	pointer-events: none !important;
	z-index: 1 !important;
	background:
		radial-gradient(circle at 100% 100%,
			rgba(52, 245, 161, 0.155) 0%,
			rgba(52, 245, 161, 0.095) 12%,
			rgba(98, 230, 255, 0.052) 28%,
			rgba(98, 230, 255, 0.024) 44%,
			transparent 62%) !important;
	box-shadow: none !important;
	filter: blur(2px) saturate(0.95) !important;
	opacity: 0.58 !important;
	transform: none !important;
}

/* White text and real content remain fully readable above the glow. */
.printer-card>* {
	position: relative !important;
	z-index: 2 !important;
}

/* Slightly softer on phones because the same corner glow covers more area. */
@media (max-width: 760px) {
	.printer-card::before {
		opacity: 0.58 !important;
	}

	.printer-card::after {
		opacity: 0.46 !important;
		filter: blur(2px) saturate(0.9) !important;
	}
}

@media (max-width: 420px) {
	.printer-card::before {
		opacity: 0.50 !important;
	}

	.printer-card::after {
		opacity: 0.40 !important;
	}
}

/* =========================================================
   SAFE PRINTER-CARD GLOW RESET
   Previous pseudo-element glow broke the card.
   This version uses ONLY the card background, no ::before/::after.
   Glow center is exactly bottom-right: circle at 100% 100%.
   ========================================================= */

.printer-card {
	position: relative !important;
	isolation: auto !important;
	overflow: hidden !important;
	background:
		radial-gradient(circle at 100% 100%,
			rgba(52, 245, 161, 0.130) 0%,
			rgba(52, 245, 161, 0.082) 18%,
			rgba(98, 230, 255, 0.044) 34%,
			rgba(98, 230, 255, 0.020) 52%,
			transparent 70%),
		linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04)) !important;
}

/* Fully disable all printer-card pseudo-elements.
   This prevents the old band/orb/glow layers from interfering with layout,
   z-index, clipping, or generated content. */
.printer-card::before,
.printer-card::after {
	content: none !important;
	display: none !important;
	position: static !important;
	inset: auto !important;
	width: auto !important;
	height: auto !important;
	background: none !important;
	box-shadow: none !important;
	filter: none !important;
	opacity: 1 !important;
	transform: none !important;
}

/* Keep real card content normal and above the background. */
.printer-card>* {
	position: relative !important;
	z-index: 1 !important;
}

/* Slightly softer on small cards so white text stays readable. */
@media (max-width: 760px) {
	.printer-card {
		background:
			radial-gradient(circle at 100% 100%,
				rgba(52, 245, 161, 0.105) 0%,
				rgba(52, 245, 161, 0.066) 18%,
				rgba(98, 230, 255, 0.034) 34%,
				rgba(98, 230, 255, 0.016) 52%,
				transparent 70%),
			linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04)) !important;
	}
}

@media (max-width: 420px) {
	.printer-card {
		background:
			radial-gradient(circle at 100% 100%,
				rgba(52, 245, 161, 0.090) 0%,
				rgba(52, 245, 161, 0.052) 20%,
				rgba(98, 230, 255, 0.028) 38%,
				transparent 68%),
			linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04)) !important;
	}
}


/* Active state for split-page navigation */
.nav-links a[aria-current="page"] {
	color: var(--text);
	background: var(--panel);
}

/* =========================================================
   Header spacing refinement
   - smaller first-section gap below the sticky header
   - slightly taller/top-aligned navigation
   - lowercase italic catchphrase under the logo
   ========================================================= */

.nav {
	min-height: 88px;
	padding-top: 10px;
	padding-bottom: 6px;
	align-items: flex-start;
}

.brand {
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	width: clamp(168px, 17.5vw, 252px);
	min-width: clamp(168px, 17.5vw, 252px);
	padding-top: 2px;
	line-height: 1;
}

.brand img {
	width: 100%;
}

.brand-tagline {
	display: block;
	width: 100%;
	margin-top: 4px;
	padding-right: 3px;
	color: rgba(244, 248, 255, 0.76);
	font-size: clamp(0.78rem, 0.9vw, 0.94rem);
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0.025em;
	line-height: 1.15;
	text-align: right;
	text-transform: lowercase;
	white-space: nowrap;
	text-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
}

.nav-links {
	padding-top: 12px;
}

.nav-toggle {
	margin-top: 9px;
}

.hero {
	min-height: calc(100vh - 88px);
}

main > .section-pad:first-child,
.hero.section-pad {
	padding-top: 56px;
}

@media (max-width: 1080px) {
	.nav {
		min-height: 88px;
	}

	.nav-links {
		padding-top: 0;
	}

	.hero.section-pad,
	main > .section-pad:first-child {
		padding-top: 52px;
	}
}

@media (max-width: 760px) {
	.nav {
		min-height: 92px;
		padding-top: 10px;
		padding-bottom: 8px;
	}

	.brand {
		width: 172px;
		min-width: 172px;
	}

	.brand-tagline {
		margin-top: 3px;
		font-size: 0.74rem;
		letter-spacing: 0.02em;
	}

	.nav-toggle {
		margin-top: 12px;
	}

	.nav-links {
		top: 92px;
	}

	.hero.section-pad,
	main > .section-pad:first-child {
		padding-top: 44px;
	}
}

@media (max-width: 420px) {
	.nav {
		gap: 14px;
		padding-inline: 18px;
	}

	.brand {
		width: 158px;
		min-width: 158px;
	}

	.brand-tagline {
		font-size: 0.68rem;
	}
}

/* =========================================================
   Chrome-safe header logo/catchphrase lockup (20260613-headerlockup4)
   Keep the catchphrase below the logo regardless of flex inheritance.
   ========================================================= */
.site-header .nav .brand {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	grid-template-rows: auto auto !important;
	align-items: start !important;
	justify-items: stretch !important;
	place-content: start stretch !important;
	row-gap: 6px !important;
	width: clamp(168px, 17.5vw, 252px) !important;
	min-width: clamp(168px, 17.5vw, 252px) !important;
	max-width: 252px !important;
	line-height: 1 !important;
	text-decoration: none !important;
}

.site-header .nav .brand > .brand-logo,
.site-header .nav .brand > img {
	display: block !important;
	grid-column: 1 !important;
	grid-row: 1 !important;
	width: 100% !important;
	height: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 !important;
}

.site-header .nav .brand > .brand-tagline {
	display: block !important;
	grid-column: 1 !important;
	grid-row: 2 !important;
	width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 3px 0 0 !important;
	color: rgba(244, 248, 255, 0.78) !important;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
	font-size: clamp(0.78rem, 0.9vw, 0.94rem) !important;
	font-style: italic !important;
	font-weight: 400 !important;
	letter-spacing: 0.015em !important;
	line-height: 1.3 !important;
	text-align: right !important;
	text-transform: lowercase !important;
	white-space: nowrap !important;
	overflow: visible !important;
	text-shadow: 0 8px 22px rgba(0, 0, 0, 0.32) !important;
}

@media (max-width: 760px) {
	.site-header .nav .brand {
		width: 172px !important;
		min-width: 172px !important;
	}

	.site-header .nav .brand > .brand-tagline {
		font-size: 0.74rem !important;
	}
}

@media (max-width: 420px) {
	.site-header .nav .brand {
		width: 158px !important;
		min-width: 158px !important;
	}

	.site-header .nav .brand > .brand-tagline {
		font-size: 0.68rem !important;
	}
}


/* =========================================================
   Mobile header vertical centering (20260613-mobilecenter5)
   Center the logo/catchphrase lockup and hamburger inside the navbar.
   ========================================================= */
@media (max-width: 760px) {
	.site-header .nav {
		min-height: 92px !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		align-items: center !important;
	}

	.site-header .nav .brand {
		align-self: center !important;
		place-self: center start !important;
	}

	.site-header .nav .nav-toggle {
		align-self: center !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	.site-header .nav .nav-links {
		top: 92px !important;
	}
}

@media (max-width: 420px) {
	.site-header .nav {
		min-height: 88px !important;
	}

	.site-header .nav .nav-links {
		top: 88px !important;
	}
}

/* =========================================================
   Mobile logo lockup size fix (20260613-mobilelock6)
   Use fixed pixel sizes on mobile so the logo and catchphrase
   do not scale independently as viewport width changes.
   ========================================================= */
@media (max-width: 760px) {
	.site-header .nav {
		min-height: 96px !important;
		height: 96px !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		align-items: center !important;
		gap: 16px !important;
	}

	.site-header .nav .brand {
		width: 184px !important;
		min-width: 184px !important;
		max-width: 184px !important;
		align-self: center !important;
		place-self: center start !important;
		row-gap: 5px !important;
	}

	.site-header .nav .brand > .brand-logo,
	.site-header .nav .brand > img {
		width: 184px !important;
		min-width: 184px !important;
		max-width: 184px !important;
		height: auto !important;
	}

	.site-header .nav .brand > .brand-tagline {
		font-size: 12px !important;
		line-height: 1.25 !important;
		letter-spacing: 0.01em !important;
		padding-right: 2px !important;
		white-space: nowrap !important;
	}

	.site-header .nav .nav-toggle {
		flex: 0 0 44px !important;
		align-self: center !important;
		margin: 0 !important;
	}

	.site-header .nav .nav-links {
		top: 96px !important;
	}
}

@media (max-width: 360px) {
	.site-header .nav {
		padding-inline: 14px !important;
		gap: 12px !important;
	}

	.site-header .nav .brand,
	.site-header .nav .brand > .brand-logo,
	.site-header .nav .brand > img {
		width: 176px !important;
		min-width: 176px !important;
		max-width: 176px !important;
	}

	.site-header .nav .brand > .brand-tagline {
		font-size: 11.5px !important;
	}
}

/* =========================================================
   First-section top gap reduction (20260613-topgap7)
   Cut the space between the sticky navbar and the first section
   to roughly half on desktop and mobile.
   ========================================================= */
main > .section-pad:first-child,
.hero.section-pad {
	padding-top: 28px !important;
}

@media (max-width: 1080px) {
	main > .section-pad:first-child,
	.hero.section-pad {
		padding-top: 26px !important;
	}
}

@media (max-width: 760px) {
	main > .section-pad:first-child,
	.hero.section-pad {
		padding-top: 22px !important;
	}
}