@media (max-width: 768px) {
	.about-media,
	.about-media.in-view {
		clip-path: inset(0 0 0 0);
	}

	.about-content,
	.about-content.in-view {
		opacity: 1;
		transform: none;
	}

	.menu-toggle { display: flex; }

	.nav-overlay {
		position: fixed;
		inset: 0;
		background-color: rgba(20, 20, 20, 0.55);
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);
		z-index: 998;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.4s var(--ease-smooth), visibility 0.4s var(--ease-smooth);
	}

	.nav-overlay.active { opacity: 1; visibility: visible; }

	.main-nav {
		position: fixed;
		top: 0;
		inset-inline-start: 0;
		width: min(78%, 320px);
		height: 100dvh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: var(--color-bg);
		box-shadow: none;
		z-index: 999;
		transform: translateX(100%);
		transition: transform 0.5s var(--ease-spring), box-shadow 0.5s var(--ease-spring);
		padding-inline: var(--space-xl);
	}

	.main-nav.open {
		transform: translateX(0);
		box-shadow: 0 0 60px rgba(0,0,0,0.25);
	}

	.main-nav ul {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-lg);
	}

	.main-nav ul li {
		width: 100%;
		opacity: 0;
		transform: translateY(16px);
		transition: opacity 0.4s var(--ease-smooth), transform 0.4s var(--ease-smooth);
	}

	.main-nav.open ul li { opacity: 1; transform: translateY(0); }
	.main-nav.open ul li:nth-child(1) { transition-delay: 0.12s; }
	.main-nav.open ul li:nth-child(2) { transition-delay: 0.18s; }
	.main-nav.open ul li:nth-child(3) { transition-delay: 0.24s; }
	.main-nav.open ul li:nth-child(4) { transition-delay: 0.30s; }
	.main-nav.open ul li:nth-child(5) { transition-delay: 0.36s; }

	.main-nav ul a {
		display: block;
		width: 100%;
		font-size: var(--fs-md);
		padding-block: var(--space-xs);
		position: relative;
	}

	.main-nav ul a::before {
		content: '';
		position: absolute;
		inset-inline-start: -14px;
		top: 50%;
		transform: translateY(-50%) scale(0);
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background-color: var(--color-gold);
		transition: transform var(--duration-fast) var(--ease-spring);
	}

	.main-nav ul a:active::before { transform: translateY(-50%) scale(1); }

	.hero { height: 100vh; height: 100svh; text-align: center; justify-content: center; }
}

@media (max-width: 640px) {
	.hero-content {
		align-items: center;
		justify-content: center;
		padding: 0 6%;
		padding-bottom: 0;
	}

	.hero-panel {
		max-width: 100%;
		text-align: center;
		border-inline-end: none;
		border-top: 1px solid var(--color-gold);
		padding: var(--space-md, 20px) var(--space-md, 20px);
	}
}