@media (max-width: 1100px) {
	.hero-content {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 30px;
	}

	.hero-btns {
		justify-content: center;
	}

	.hero-form-card {
		margin-top: 20px;
	}

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

	.about-story-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 900px) {
	.nav-menu {
		position: fixed;
		top: 80px;
		right: 20px;
		background: rgba(11, 19, 36, 0.98);
		flex-direction: column;
		gap: 16px;
		padding: 20px;
		border-radius: 16px;
		box-shadow: var(--shadow-lg);
		border: 1px solid rgba(255, 255, 255, 0.1);
		transform: translateY(-20px);
		opacity: 0;
		pointer-events: none;
		transition: var(--transition);
		z-index: 1001;
		width: min(80vw, 320px);
	}

	.nav-menu.active {
		transform: translateY(0);
		opacity: 1;
		pointer-events: auto;
	}

	.nav-menu ul {
		display: grid;
		gap: 12px;
	}

	.mobile-menu-btn {
		display: block;
	}

	.logo-text h1 {
		font-size: 1.4rem;
	}

	.sticky-contact-bar {
		display: grid;
	}

	body {
		padding-bottom: 96px;
	}
}

@media (max-width: 768px) {
	.hero {
		padding: 140px 0 80px;
	}

	.hero-text h1 {
		font-size: 2.6rem;
	}

	.hero-image-caption h2 {
		font-size: 1.6rem;
	}

	.section-title h2 {
		font-size: 2.2rem;
	}

	.page-header-content h1 {
		font-size: 2.4rem;
	}

	.cta-content h2 {
		font-size: 2.2rem;
	}

	.about-hero-simple {
		padding: 160px 0 90px;
		text-align: center;
	}

	.about-hero-simple-content {
		margin: 0 auto;
	}

	.about-hero-simple-content h1 {
		font-size: 2.4rem;
	}
}

@media (max-width: 600px) {
	.hero-text p {
		font-size: 1.05rem;
	}

	.btn {
		width: 100%;
	}

	.hero-btns,
	.cta-btns {
		flex-direction: column;
		align-items: stretch;
	}

	.location-top {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.sticky-contact-bar {
		left: 8px;
		right: 8px;
		bottom: 8px;
		padding: 8px;
		gap: 8px;
		border-radius: 16px;
	}

	.sticky-contact-bar__item {
		min-height: 58px;
		font-size: 0.74rem;
	}
}

/* ═══════════════════════════════════════════
   MOBILE CRITICAL FIXES
   ═══════════════════════════════════════════ */

/* Fix background-attachment:fixed — broken on iOS Safari & most Android browsers */
@media (max-width: 1024px) {
	.hero,
	body {
		background-attachment: scroll;
	}

	/* Prevent translateX animations from causing horizontal scroll */
	section,
	.hero,
	.page-header,
	.about-hero-simple {
		overflow-x: hidden;
	}
}

/* ── Tablet / Large Mobile (≤768px) ── */
@media (max-width: 768px) {
	/* Reduce oversized page-header padding */
	.page-header {
		padding: 110px 0 70px;
	}

	/* Hero: remove 100vh that misbehaves on iOS (URL bar included in vh) */
	.hero {
		min-height: auto;
	}

	/* Cap hero image width and caption font size */
	.hero-image {
		max-width: 100%;
	}

	.hero-image-caption h2 {
		font-size: 1.5rem;
	}

	/* Compact logo on smaller screens */
	.logo-img {
		width: 52px;
		height: 52px;
	}

	.logo-text p,
	.status-pill {
		display: none;
	}

	/* Lightbox must fit viewport */
	.lightbox {
		padding: 16px;
	}

	.lightbox-content {
		padding: 14px;
		max-width: 100%;
	}
}

/* ── Small Mobile (≤480px) ── */
@media (max-width: 480px) {
	.hero {
		padding: 110px 0 60px;
	}

	.hero-text h1 {
		font-size: 2rem;
	}

	.hero-image-caption h2 {
		font-size: 1.25rem;
	}

	.section-title h2 {
		font-size: 1.8rem;
	}

	.page-header {
		padding: 100px 0 60px;
	}

	.page-header-content h1 {
		font-size: 2rem;
	}

	.cta-content h2 {
		font-size: 1.8rem;
	}

	.hero-form-card {
		padding: 20px 14px;
	}

	.appointment-form {
		padding: 20px 14px;
	}

	.logo-img {
		width: 44px;
		height: 44px;
	}

	.logo-text h1 {
		font-size: 1.1rem;
	}

	.about-hero-simple {
		padding: 120px 0 60px;
	}

	.about-hero-simple-content h1 {
		font-size: 2rem;
	}

	/* Gallery lightbox full-width video */
	.lightbox-content {
		padding: 10px;
	}

	.nav-menu {
		top: 72px;
		right: 10px;
		left: 10px;
		width: auto;
	}
}

/* ── Extra Small (≤360px) ── */
@media (max-width: 360px) {
	.container {
		padding: 0 12px;
	}

	.logo-text h1 {
		font-size: 0.95rem;
	}

	.hero-text h1 {
		font-size: 1.7rem;
	}

	.section-title h2 {
		font-size: 1.5rem;
	}

	.page-header {
		padding: 95px 0 55px;
	}

	.page-header-content h1 {
		font-size: 1.8rem;
	}
}