/* --------------------------------------------------------------------------
   Mobile / tablet optimization — Isufi Royal Dental
   -------------------------------------------------------------------------- */

/* Safe areas + base mobile tweaks */
html {
	-webkit-text-size-adjust: 100%;
}

img,
video,
svg {
	max-width: 100%;
	height: auto;
}

body.nav-open {
	overflow: hidden;
	touch-action: none;
}

/* ---------- Tablet (≤991px) ---------- */
@media (max-width: 991px) {
	:root {
		--header-height: 72px;
	}

	.container {
		max-width: 100%;
		padding-left: 1.15rem;
		padding-right: 1.15rem;
	}

	.section {
		padding: 3.25rem 0;
	}

	.site-branding .custom-logo {
		max-height: 56px;
	}

	.site-header__inner {
		min-height: var(--header-height);
		gap: 0.75rem;
	}

	/* Full-screen mobile menu — Dentitive style, slides top → down */
	.menu-toggle {
		display: flex;
		margin-left: auto;
		order: 3;
		z-index: 1002;
	}

	.header-actions {
		order: 2;
		gap: 0.5rem;
	}

	.header-cta--desktop {
		display: none !important;
	}

	.main-navigation {
		position: fixed;
		inset: 0;
		z-index: 1200;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		gap: 0;
		padding: 0;
		min-height: 100dvh;
		background: #fff;
		transform: translateY(-105%);
		visibility: hidden;
		pointer-events: none;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.48s;
	}

	.main-navigation.is-open {
		transform: translateY(0);
		visibility: visible;
		pointer-events: auto;
	}

	.mobile-menu__top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: 1.15rem 1.35rem;
		padding-top: max(1.15rem, env(safe-area-inset-top));
		border-bottom: 0;
		flex-shrink: 0;
	}

	.mobile-menu__brand {
		display: inline-flex;
		align-items: center;
		max-width: calc(100% - 3.5rem);
	}

	.mobile-menu__logo,
	.mobile-menu__brand img {
		display: block;
		max-height: 70px;
		width: auto;
		height: auto;
	}

	.mobile-menu__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: transparent;
		color: #4b5563;
		cursor: pointer;
		flex-shrink: 0;
	}

	.mobile-menu__close:hover,
	.mobile-menu__close:focus-visible {
		color: var(--color-primary, #2c2c76);
		outline: none;
	}

	.main-navigation .menu {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.15rem;
		width: 100%;
		margin: 0;
		padding: 1.75rem 1.5rem 1.5rem;
		flex: 1 1 auto;
		list-style: none;
	}

	.main-navigation .menu li {
		border-bottom: 0;
		width: 100%;
	}

	.main-navigation .menu a {
		display: block;
		padding: 0.9rem 0;
		font-size: 1.4rem;
		font-weight: 500;
		letter-spacing: -0.01em;
		color: #6b7280;
		line-height: 1.25;
	}

	.main-navigation .menu a:hover,
	.main-navigation .menu a:focus-visible,
	.main-navigation .current-menu-item > a {
		color: var(--color-primary, #2c2c76);
	}

	.main-navigation .current-menu-item > a::after {
		display: none;
	}

	.mobile-menu__meta {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.55rem;
		margin-top: auto;
		padding: 1.25rem 1.5rem 2rem;
		padding-bottom: max(2rem, env(safe-area-inset-bottom));
		flex-shrink: 0;
	}

	.mobile-menu__contact {
		display: block;
		font-size: 0.95rem;
		font-weight: 500;
		color: #6b7280;
		line-height: 1.4;
	}

	.mobile-menu__contact:hover,
	.mobile-menu__contact:focus-visible {
		color: var(--color-primary, #2c2c76);
	}

	.mobile-menu__social {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		margin-top: 0.65rem;
	}

	.mobile-menu__social a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		color: #6b7280;
		background: #f3f4f6;
		transition: color 0.2s ease, background 0.2s ease;
	}

	.mobile-menu__social a:hover,
	.mobile-menu__social a:focus-visible {
		color: #fff;
		background: var(--color-primary, #2c2c76);
		outline: none;
	}

	/* Hero */
	.home-hero {
		padding: 1.25rem 0 2.25rem;
	}

	.home-hero__intro {
		grid-template-columns: 1fr;
		gap: 1.25rem;
		padding-top: 0.5rem;
		padding-bottom: 1.35rem;
	}

	.home-hero__title {
		max-width: none;
		font-size: clamp(1.75rem, 8vw, 2.35rem);
	}

	.home-hero__badge {
		font-size: 0.65rem;
		padding: 0.4rem 0.8rem;
	}

	.home-hero__lead {
		font-size: 0.95rem;
		max-width: none;
	}

	.home-hero__visual {
		aspect-ratio: 2.2 / 1;
		border-radius: 20px;
		min-height: 180px;
	}

	.home-hero__stat {
		width: min(100% - 1.25rem, 220px);
		padding: 0.9rem 1rem;
		border-radius: 16px;
	}

	.home-hero__stat-text {
		display: none;
	}

	.home-hero__social {
		padding: 0.4rem 0.75rem 0.4rem 0.4rem;
	}

	.home-hero__social-text {
		font-size: 0.8rem;
	}

	/* Marketing sections */
	.mk-story__title {
		font-size: 1.15rem;
		margin-bottom: 1.75rem;
		line-height: 1.5;
	}

	.mk-story__icons {
		grid-template-columns: 1fr;
		gap: 1.15rem;
		margin-bottom: 2rem;
	}

	.mk-story__icons li {
		display: flex;
		align-items: center;
		gap: 0.85rem;
		text-align: left;
	}

	.mk-story__icon {
		margin-bottom: 0;
		width: 44px;
		height: 44px;
		flex-shrink: 0;
	}

	.mk-story__grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.mk-story__card,
	.mk-story__card img {
		min-height: 300px;
	}

	.mk-story__card--offset {
		margin-top: 0;
	}

	.mk-stats__inner {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.mk-stats__feature {
		min-height: 360px;
	}

	.mk-stats__feature-content h2 {
		max-width: none;
		font-size: 1.65rem;
	}

	.mk-stats__grid {
		grid-template-columns: 1fr 1fr;
		gap: 0.75rem;
	}

	.mk-stats__card {
		min-height: 0;
		padding: 1rem;
	}

	.mk-stats__card h3 {
		font-size: 0.98rem;
	}

	.mk-precision__tabs {
		flex-wrap: balance;
		overflow-x: auto;
		gap: 0 1.15rem;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 0.15rem;
	}

	.mk-precision__tabs::-webkit-scrollbar {
		display: none;
	}

	.mk-precision__tab {
		flex: 0 0 auto;
		white-space: nowrap;
		font-size: 0.92rem;
	}

	.mk-precision__features {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.mk-precision__media img {
		aspect-ratio: 16 / 10;
	}

	.mk-precision__cta-row {
		grid-template-columns: 1fr;
		gap: 1.15rem;
	}

	.mk-precision__cta-aside {
		text-align: left;
	}

	.mk-precision__cta-aside .mk-btn {
		width: 100%;
		justify-content: center;
	}

	.mk-comfort__title {
		font-size: clamp(1.6rem, 7vw, 2.2rem);
		margin-bottom: 1.5rem;
	}

	.mk-comfort__grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

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

	.mk-comfort__card {
		min-height: 340px;
	}

	.mk-roadmap__shell {
		padding: 1.35rem 1.15rem;
		border-radius: 20px;
	}

	.mk-roadmap__header {
		grid-template-columns: 1fr;
		gap: 1rem;
		margin-bottom: 1.35rem;
	}

	.mk-roadmap__header h2 {
		max-width: none;
		font-size: 1.55rem;
	}

	.mk-roadmap__grid {
		grid-template-columns: 1fr;
		gap: 0.85rem;
	}

	.mk-roadmap__trust {
		flex-direction: column;
		gap: 0.65rem;
	}

	.mk-team__banner {
		margin-bottom: 1.75rem;
		border-radius: 20px;
		min-height: 0;
		aspect-ratio: 16 / 10;
	}

	.mk-team__banner-img {
		min-height: 180px;
	}

	.mk-team__content {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.mk-team__intro h2 {
		max-width: none;
		font-size: 1.75rem;
	}

	.mk-team__cards {
		grid-template-columns: 1fr;
		gap: 0.85rem;
	}

	.mk-team__card,
	.mk-team__card img {
		min-height: 280px;
	}

	.mk-exp__title {
		font-size: 1.55rem;
		margin-bottom: 1.35rem;
	}

	.mk-exp__grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.mk-exp__ba {
		min-height: 0;
		max-width: 100%;
		margin-inline: auto;
		width: 100%;
	}

	.mk-exp__ba-img {
		min-height: 0;
	}

	.mk-exp__quote {
		min-height: 300px;
		padding: 1.5rem 1.25rem 4rem;
	}

	.mk-exp__kpis {
		grid-template-columns: 1fr 1fr;
		gap: 1rem 0.75rem;
	}

	.mk-book {
		padding-top: 2.5rem;
	}

	.mk-book__shell {
		grid-template-columns: 1fr;
		border-radius: 20px 20px 0 0;
	}

	.mk-book__promo {
		padding: 1.75rem 1.25rem 1.25rem;
		min-height: 0;
	}

	.mk-book__promo h2 {
		max-width: none;
		font-size: 1.65rem;
	}

	.mk-book__form-wrap {
		border-radius: 20px 20px 0 0;
		padding: 1.25rem;
	}

	.mk-book__row {
		grid-template-columns: 1fr;
	}

	.mk-book__actions {
		justify-content: stretch;
	}

	.mk-book__actions .mk-btn {
		width: 100%;
		justify-content: center;
	}

	/* Footer */
	.site-footer--dark {
		padding: 2.25rem 0 1.25rem;
	}

	.site-footer__top {
		grid-template-columns: 1fr;
		gap: 1.75rem;
		justify-items: start;
		text-align: left;
		margin-bottom: 1.75rem;
		display: flex;
        flex-direction: column;
        justify-content: center;
	}

	.site-footer__brand-mark {
		justify-self: center;
	}

	.site-footer__col--contact {
		justify-self: start;
		min-width: 0;
	}

	.site-footer__nav {
		align-items: flex-start;
		gap: 0.55rem;
	}

	.site-footer__contact-block,
	.site-footer__social {
		text-align: left;
		justify-content: flex-start;
	}

	.site-footer__wordmark {
		font-size: clamp(1.6rem, 9vw, 2.6rem);
		margin-bottom: 1rem;
		padding: 0 0.5rem;
		word-break: break-word;
	}

	.site-footer--dark .site-footer__bottom {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 0.85rem;
	}

	.site-footer__copy {
		text-align: center;
	}

	/* Inner pages */
	.page-hero {
		padding: 2.75rem 0 2.25rem;
	}

	.page-hero__title {
		max-width: none;
	}

	.home-booking__inner--split {
		grid-template-columns: 1fr;
	}
}

/* ---------- Phones (≤575px) ---------- */
@media (max-width: 575px) {
	.container {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.section {
		padding: 2.5rem 0;
	}

	.site-branding .custom-logo {
		max-height: 70px;
		padding-top: 5px;
	}

	.header-cart {
		width: 40px;
		height: 40px;
	}

	.home-hero__features {
		flex-direction: column;
		gap: 0.55rem;
		margin-bottom: 1.15rem;
	}

	.home-hero__cta {
		width: 100%;
		justify-content: center;
	}

	.home-hero__visual {
		aspect-ratio: 2 / 1;
		border-radius: 16px;
		min-height: 160px;
	}

	.home-hero__stat {
		left: 0.65rem;
		top: 0.65rem;
		width: min(100% - 1.2rem, 180px);
		padding: 0.7rem 0.8rem;
	}

	.home-hero__stat-value {
		font-size: 1.85rem;
	}

	.home-hero__stat-label {
		font-size: 0.88rem;
		margin-bottom: 0;
	}

	.home-hero__social {
		left: 0.65rem;
		right: 0.65rem;
		bottom: 0.65rem;
		justify-content: flex-start;
		width: auto;
	}

	.home-hero__avatars img {
		width: 30px;
		height: 30px;
	}

	.mk-badge {
		font-size: 0.65rem;
		padding: 0.35rem 0.75rem;
	}

	.mk-stats__grid {
		grid-template-columns: 1fr;
	}

	.mk-stats__feature {
		min-height: 320px;
	}

	.mk-comfort__grid--services {
		grid-template-columns: 1fr;
	}

	.mk-team__banner-img {
		min-height: 200px;
	}

	.mk-team__cards {
		grid-template-columns: 1fr;
	}

	.mk-team__card,
	.mk-team__card img {
		min-height: 300px;
	}

	.mk-exp__kpis {
		grid-template-columns: 1fr 1fr;
	}

	.mk-exp__ba {
		min-height: 0;
		max-width: 100%;
	}

	.mk-exp__ba-img {
		min-height: 0;
	}

	.mk-exp__quote {
		min-height: 280px;
	}

	.mk-exp__ba-knob {
		width: 38px;
		height: 38px;
	}

	.mk-story__card,
	.mk-story__card img {
		min-height: 260px;
	}

	.mk-comfort__card {
		min-height: 340px;
	}

	.site-footer__nav {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.45rem;
	}

	.site-footer__brand-mark img,
	.site-footer__logo {
		width: 96px;
		max-height: 96px;
	}
}

/* ---------- Very small phones ---------- */
@media (max-width: 380px) {
	.home-hero__title {
		font-size: 1.55rem;
	}

	.mk-exp__kpis {
		grid-template-columns: 1fr;
	}

	.header-actions .header-cart span,
	.header-cart {
		transform: scale(0.95);
	}
}