/* =========================================================================
   Priva Dental and Wellness Clinic, Balewadi Pune
   Design system. Palette sampled from the clinic's own logo:
   teal #10AD9A (tooth outline) and coral #ED717C (the smile).
   Bump the filename to priva-vN.css on every edit, the static server
   caches css/js/images for 24h.
   ========================================================================= */

/* ---------- fonts (self hosted, latin subset) ---------- */
@font-face {
	font-family: 'Outfit';
	src: url('/fonts/outfit-var.woff2') format('woff2-variations'), url('/fonts/outfit-var.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Inter Tight';
	src: url('/fonts/inter-tight-var.woff2') format('woff2-variations'), url('/fonts/inter-tight-var.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Newsreader';
	src: url('/fonts/newsreader-italic-var.woff2') format('woff2-variations'), url('/fonts/newsreader-italic-var.woff2') format('woff2');
	font-weight: 200 800;
	font-style: italic;
	font-display: swap;
}

/* ---------- tokens ---------- */
:root {
	--teal: #10ad9a;
	--teal-deep: #0a6f63;
	--teal-ink: #063b35;
	--coral: #ed717c;
	--coral-deep: #d2515f;
	--mint: #e6f6f3;
	--mint-soft: #f2faf8;
	--paper: #fbfdfc;
	--white: #ffffff;
	--ink: #0e2b28;
	--body: #4d6764;
	--muted: #7d9491;
	--line: #dcece8;
	--line-soft: #eaf4f1;
	--shadow-sm: 0 2px 10px rgba(6, 59, 53, .05);
	--shadow: 0 14px 40px -18px rgba(6, 59, 53, .28);
	--shadow-lg: 0 34px 80px -34px rgba(6, 59, 53, .42);
	--r-xs: 10px;
	--r-sm: 16px;
	--r: 22px;
	--r-lg: 30px;
	--r-xl: 42px;
	--display: 'Outfit', 'Segoe UI', system-ui, sans-serif;
	--sans: 'Inter Tight', 'Segoe UI', system-ui, -apple-system, sans-serif;
	--accent-serif: 'Newsreader', Georgia, serif;
	--wrap: 1180px;
	--nav-h: 96px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* No scroll-behavior: smooth here. Lenis drives the wheel, and CSS smooth
   scrolling fights its scrollTo, which reduces a full wheel gesture to a few
   pixels and leaves the page feeling stuck. Smooth anchor scrolling is done in
   JS instead, which also keeps it correct when Lenis is not running.
   overflow-x is clipped on the root rather than hidden on body: hidden on body
   turns body into its own scroll container, which breaks window scrolling. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
	margin: 0;
	background: var(--paper);
	color: var(--body);
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.72;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 {
	font-family: var(--display);
	color: var(--ink);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.022em;
	margin: 0 0 .5em;
}
h1 { font-size: clamp(2.5rem, 6vw, 4.3rem); }
h2 { font-size: clamp(1.95rem, 4vw, 3rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); letter-spacing: -.015em; }
p { margin: 0 0 1.1em; }
em, .em { font-family: var(--accent-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
::selection { background: var(--teal); color: #fff; }
:focus-visible { outline: 2px dashed var(--teal-deep); outline-offset: 4px; border-radius: 6px; }

.wrap { width: min(100% - 44px, var(--wrap)); margin-inline: auto; }
.wrap-wide { width: min(100% - 44px, 1340px); margin-inline: auto; }
.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- shared bits ---------- */
.eyebrow {
	font-family: var(--sans);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .19em;
	text-transform: uppercase;
	color: var(--teal-deep);
	margin: 0 0 14px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.eyebrow::before {
	content: '';
	width: 26px; height: 2px;
	background: var(--coral);
	border-radius: 2px;
	flex: none;
}
.eyebrow.is-center { justify-content: center; }
.lede { font-size: clamp(1.02rem, 1.6vw, 1.16rem); color: var(--body); max-width: 62ch; }

.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 30px;
	border-radius: 999px;
	background: var(--teal);
	color: #fff;
	font-family: var(--sans);
	font-weight: 600;
	font-size: .95rem;
	letter-spacing: .01em;
	text-decoration: none;
	border: 1px solid var(--teal);
	cursor: pointer;
	transition: background .22s ease, transform .22s ease, box-shadow .22s ease, border-color .22s ease;
	box-shadow: 0 12px 26px -14px rgba(16, 173, 154, .9);
}
.btn:hover { background: var(--teal-deep); border-color: var(--teal-deep); transform: translateY(-2px); }
.btn svg { width: 17px; height: 17px; fill: currentColor; }
.btn-ghost {
	background: transparent;
	color: var(--teal-ink);
	border-color: var(--line);
	box-shadow: none;
}
.btn-ghost:hover { background: var(--mint); color: var(--teal-ink); border-color: var(--teal); }
.btn-coral { background: var(--coral); border-color: var(--coral); box-shadow: 0 12px 26px -14px rgba(237, 113, 124, .95); }
.btn-coral:hover { background: var(--coral-deep); border-color: var(--coral-deep); }
.btn-sm { padding: 11px 22px; font-size: .86rem; }

.section { padding: clamp(66px, 9vw, 118px) 0; }
.section-mint { background: linear-gradient(180deg, var(--mint-soft), var(--white)); }
.section-deep { background: var(--teal-ink); color: #cfe6e2; }
.section-deep h2, .section-deep h3 { color: #fff; }
.section-deep .eyebrow { color: #7fd6c9; }

.head-row { display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: end; margin-bottom: 46px; }
.head-row h2 { margin: 0; max-width: 20ch; }
@media (max-width: 820px) { .head-row { grid-template-columns: 1fr; align-items: start; } }

/* ---------- header ---------- */
.site-head {
	position: sticky;
	top: 0;
	z-index: 90;
	background: rgba(251, 253, 252, .88);
	backdrop-filter: saturate(150%) blur(14px);
	-webkit-backdrop-filter: saturate(150%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color .3s ease, box-shadow .3s ease;
}
.site-head.is-stuck { border-color: var(--line-soft); box-shadow: 0 6px 24px -18px rgba(6, 59, 53, .5); }
.head-in {
	height: var(--nav-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.brand img { height: 68px; width: auto; transition: height .25s ease; }
/* The header tightens up once it sticks, so the logo comes with it. */
.site-head.is-stuck .brand img { height: 58px; }
.brand-txt { display: none; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a, .nav .drop-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	font-size: .93rem;
	font-weight: 500;
	color: var(--ink);
	text-decoration: none;
	background: none;
	border: 0;
	font-family: var(--sans);
	cursor: pointer;
	border-radius: 999px;
}
.nav a::after {
	content: '';
	position: absolute;
	left: 14px; right: 14px; bottom: 4px;
	height: 2px;
	background: var(--coral);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav .caret { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 2.2; transition: transform .25s ease; }
.drop { position: relative; }
.drop-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 50%;
	transform: translate(-50%, 8px);
	min-width: 250px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	box-shadow: var(--shadow);
	padding: 8px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.drop:hover .drop-menu, .drop:focus-within .drop-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.drop:hover .caret, .drop:focus-within .caret { transform: rotate(180deg); }
.drop-menu a { display: block; padding: 9px 14px; border-radius: 10px; font-size: .9rem; }
.drop-menu a::after { display: none; }
.drop-menu a:hover { background: var(--mint); color: var(--teal-deep); }

/* Booking CTA inside the nav: hidden on desktop (the header already has one),
   shown at the end of the mobile menu where the header button is hidden. */
.nav-book { display: none !important; }

.head-cta { display: flex; align-items: center; gap: 10px; flex: none; }
.head-tel { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .92rem; color: var(--teal-ink); text-decoration: none; }
.head-tel svg { width: 15px; height: 15px; fill: var(--teal); }

.burger { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; padding: 0; }
.burger span { display: block; width: 18px; height: 2px; background: var(--ink); margin: 4px auto; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1040px) {
	.burger { display: block; }
	.head-tel { display: none; }
	.nav {
		position: fixed;
		inset: var(--nav-h) 0 auto 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: #fff;
		border-bottom: 1px solid var(--line);
		padding: 14px 22px 26px;
		max-height: calc(100dvh - var(--nav-h));
		overflow-y: auto;
		transform: translateY(-12px);
		opacity: 0;
		visibility: hidden;
		transition: opacity .24s ease, transform .24s ease, visibility .24s;
		box-shadow: var(--shadow);
	}
	.nav.is-open { opacity: 1; visibility: visible; transform: none; }
	.nav a, .nav .drop-btn { padding: 13px 4px; font-size: 1.02rem; border-bottom: 1px solid var(--line-soft); border-radius: 0; width: 100%; }
	.nav a::after { display: none; }
	.drop-menu {
		position: static;
		transform: none;
		opacity: 1;
		visibility: visible;
		box-shadow: none;
		border: 0;
		border-bottom: 1px solid var(--line-soft);
		border-radius: 0;
		padding: 0 0 10px 12px;
		min-width: 0;
	}
	.drop-menu a { border: 0; padding: 9px 8px; color: var(--body); }
	.drop .caret { display: none; }
	.head-cta .btn { display: none; }
	.nav .nav-book {
		display: inline-flex !important;
		justify-content: center;
		width: auto;
		margin-top: 18px;
		border-bottom: 0;
		color: #fff;
		border-radius: 999px;
		padding: 15px 30px;
	}
}

/* ---------- hero ---------- */
.hero { position: relative; padding: clamp(46px, 6vw, 78px) 0 clamp(60px, 7vw, 96px); overflow: hidden; }
.hero::before {
	content: '';
	position: absolute;
	top: -280px; right: -180px;
	width: 720px; height: 720px;
	background: radial-gradient(circle, rgba(16, 173, 154, .16), transparent 66%);
	border-radius: 50%;
	pointer-events: none;
}
.hero::after {
	content: '';
	position: absolute;
	bottom: -220px; left: -200px;
	width: 560px; height: 560px;
	background: radial-gradient(circle, rgba(237, 113, 124, .13), transparent 66%);
	border-radius: 50%;
	pointer-events: none;
}
.hero-in { position: relative; display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(32px, 5vw, 68px); align-items: center; }
.hero-copy { max-width: 34rem; }
.hero h1 { margin-bottom: 20px; }
.hero h1 .em { display: block; color: var(--teal-deep); font-size: .82em; }
.hero-lede { font-size: clamp(1.04rem, 1.7vw, 1.2rem); margin-bottom: 30px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }

.hero-facts { display: flex; flex-wrap: wrap; gap: 10px 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.hero-fact { display: flex; flex-direction: column; gap: 2px; }
.hero-fact b { font-family: var(--display); font-size: 1.42rem; color: var(--ink); font-weight: 700; letter-spacing: -.02em; }
.hero-fact span { font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 500; }

/* hero art: an arch masked photo, the shape language of the whole site.
   The column is capped so the floating chips always land on the frame edge
   rather than drifting out onto empty background on wide screens. */
.hero-art { position: relative; max-width: 496px; margin-inline: auto; }
.hero-frame {
	position: relative;
	border-radius: 260px 260px var(--r-lg) var(--r-lg);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	background: var(--mint);
	aspect-ratio: 4 / 5;
	max-height: 620px;
	margin-inline: auto;
	max-width: 496px;
	will-change: transform;
}
.hero-frame picture { display: block; height: 100%; }
.hero-frame img { width: 100%; height: 100%; object-fit: cover; transform-origin: 52% 46%; }
.hero-frame::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(6, 59, 53, .04) 0%, rgba(6, 59, 53, .04) 52%, rgba(6, 59, 53, .5) 100%);
	pointer-events: none;
}
.hero-sheen {
	position: absolute;
	top: -30%; left: -60%;
	width: 45%; height: 170%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
	transform: rotate(12deg);
	pointer-events: none;
	z-index: 2;
}
.hero-ring {
	position: absolute;
	inset: -18px;
	max-width: 532px;
	margin-inline: auto;
	border: 1px dashed rgba(16, 173, 154, .5);
	border-radius: 280px 280px var(--r-xl) var(--r-xl);
	pointer-events: none;
}
.chip {
	position: absolute;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 11px 17px;
	background: rgba(255, 255, 255, .96);
	border: 1px solid var(--line);
	border-radius: 999px;
	box-shadow: var(--shadow);
	font-size: .84rem;
	font-weight: 600;
	color: var(--ink);
	white-space: nowrap;
	will-change: transform;
}
.chip svg { width: 15px; height: 15px; flex: none; }
.chip-rating { top: 7%; left: -26px; }
.chip-rating .stars { color: #f2b134; letter-spacing: 1px; font-size: .8rem; }
.chip-open { bottom: 15%; right: -26px; }
.chip-open i { width: 8px; height: 8px; border-radius: 50%; background: #37c98a; box-shadow: 0 0 0 4px rgba(55, 201, 138, .2); flex: none; }
.chip-loc { bottom: 3%; left: 8%; }

@media (max-width: 940px) {
	.hero-in { grid-template-columns: 1fr; }
	.hero-copy { max-width: none; }
	.hero-art { max-width: 460px; margin-inline: auto; width: 100%; }
	.chip-rating { left: -8px; }
	.chip-open { right: -6px; }
}
@media (max-width: 520px) {
	.chip { font-size: .76rem; padding: 9px 13px; }
	.chip-loc { display: none; }
}

/* ---------- marquee trust band ---------- */
.band { background: var(--teal-ink); color: #a9d9d1; padding: 15px 0; overflow: hidden; }
.band-track { display: flex; gap: 46px; width: max-content; animation: band 42s linear infinite; }
.band-track span { display: inline-flex; align-items: center; gap: 12px; font-size: .82rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 500; white-space: nowrap; }
.band-track span::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--coral); }
@keyframes band { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .band-track { animation: none; } }

/* ---------- feature grid ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 30px 28px;
	box-shadow: var(--shadow-sm);
	transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s ease, border-color .3s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: #c8e5df; }
.card h3 { margin-bottom: 10px; }
.card p { margin: 0; font-size: .96rem; }
.card-ico {
	width: 50px; height: 50px;
	display: grid; place-items: center;
	border-radius: 15px;
	background: var(--mint);
	margin-bottom: 18px;
}
.card-ico svg { width: 24px; height: 24px; stroke: var(--teal-deep); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- service cards with imagery ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 980px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .svc-grid { grid-template-columns: 1fr; } }
.svc {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	text-decoration: none;
	transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s ease, border-color .3s ease;
}
.svc:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: #c8e5df; }
.svc-img { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--mint); }
.svc-img picture { display: block; height: 100%; }
.svc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.4, 0, .2, 1); }
.svc:hover .svc-img img { transform: scale(1.06); }
.svc-body { padding: 22px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.svc-body h3 { font-size: 1.13rem; margin-bottom: 8px; }
.svc-body p { font-size: .92rem; margin: 0 0 16px; color: var(--body); }
.svc-more { margin-top: auto; font-size: .82rem; font-weight: 600; color: var(--teal-deep); display: inline-flex; align-items: center; gap: 7px; letter-spacing: .04em; }
.svc-more svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; transition: transform .25s ease; }
.svc:hover .svc-more svg { transform: translateX(4px); }

/* ---------- signature: the smile map ---------- */
.map-wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 920px) { .map-wrap { grid-template-columns: 1fr; } }

/* ---------- signature: the 32 tooth smile map ---------- */
.jaw-stage {
	position: relative;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 24px 24px 26px;
	box-shadow: var(--shadow);
}
.jaw-stage .arch-hint { margin-top: 0; }
.jaw-figure {
	position: relative;
	margin: 20px auto 0;
	max-width: 380px;
	border-radius: var(--r-sm);
	overflow: hidden;
}
/* Descendant, not direct child: the img now sits inside a <picture>. */
.jaw-figure img { width: 100%; height: auto; display: block; }
.jaw-figure picture { display: block; }
.jaw-hot { position: absolute; inset: 0; width: 100%; height: 100%; }
.jaw-zone { cursor: pointer; }
.jaw-zone .zline,
.jaw-zone .zfill {
	fill: none;
	stroke: none;
	opacity: 0;
	mix-blend-mode: multiply;
	transition: opacity .38s cubic-bezier(.4, 0, .2, 1);
}
.jaw-zone .zline { stroke: var(--teal); stroke-linecap: round; stroke-linejoin: round; }
.jaw-zone .zfill { fill: var(--teal); }
.jaw-zone .zhit { fill: transparent; stroke: transparent; }
.jaw-zone:hover .zline, .jaw-zone:hover .zfill,
.jaw-zone.is-on .zline, .jaw-zone.is-on .zfill { opacity: .46; }
/* Whole mouth tints every tooth at once, so it needs a lighter hand than a
   highlight covering one group. */
.jaw-zone[data-zone="full"]:hover .zfill,
.jaw-zone[data-zone="full"].is-on .zfill { opacity: .3; }
.jaw-zone:focus { outline: none; }
.jaw-zone:focus-visible .zline, .jaw-zone:focus-visible .zfill { opacity: .46; }
.jaw-zone:focus-visible .zhit { stroke: var(--coral); stroke-width: 5; stroke-dasharray: 10 8; }

/* ---------- signature: the treatment demonstrator ---------- */
.demo-stage {
	position: relative;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 24px 24px 22px;
	box-shadow: var(--shadow);
}
.demo-frames {
	position: relative;
	aspect-ratio: 1 / 1;
	max-width: 430px;
	margin: 18px auto 0;
	border-radius: var(--r-sm);
	overflow: hidden;
	background: linear-gradient(180deg, var(--mint-soft), #fff);
}
.demo-stage .arch-hint { margin-top: 0; }
.demo-frames picture { display: contents; }
.demo-frames img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
	transform: scale(1.02);
	transition: opacity .6s ease, transform .9s cubic-bezier(.4, 0, .2, 1);
}
.demo-frames img.is-on { opacity: 1; transform: none; }
.demo-badge {
	position: absolute;
	top: 14px; left: 14px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .94);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-sm);
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--teal-deep);
}
.demo-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); flex: none; }

.demo-steps {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin: 20px 0 0;
	padding: 0;
}
.demo-step {
	font-family: var(--sans);
	text-align: left;
	background: none;
	border: 0;
	border-top: 2px solid var(--line);
	padding: 11px 0 0;
	cursor: pointer;
	transition: border-color .4s ease;
}
.demo-step b {
	display: block;
	font-size: .68rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 4px;
	transition: color .3s ease;
}
.demo-step span {
	display: block;
	font-size: .87rem;
	line-height: 1.36;
	font-weight: 500;
	color: var(--body);
	transition: color .3s ease;
}
.demo-step.is-on { border-color: var(--teal); }
.demo-step.is-on b { color: var(--coral-deep); }
.demo-step.is-on span { color: var(--ink); }
@media (max-width: 560px) {
	.demo-steps { grid-template-columns: 1fr; gap: 10px; }
	.demo-step { padding-top: 9px; }
}

.arch-stage {
	position: relative;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 26px 26px 24px;
	box-shadow: var(--shadow);
}
/* The arch is a real anatomical rendering; the SVG on top only paints a
   translucent wash over whichever tooth group is selected, so the teeth stay
   visible through the highlight. */
.arch-figure { position: relative; margin: 0; border-radius: var(--r-sm); overflow: hidden; }
.arch-figure img { width: 100%; height: auto; display: block; }
.arch-figure picture { display: block; }
.arch-hot { position: absolute; inset: 0; width: 100%; height: 100%; }
.arch-zone { cursor: pointer; }
.arch-zone .zline,
.arch-zone .zfill {
	fill: none;
	stroke: none;
	opacity: 0;
	mix-blend-mode: multiply;
	transition: opacity .38s cubic-bezier(.4, 0, .2, 1);
}
.arch-zone .zline { stroke: var(--teal); stroke-linecap: round; stroke-linejoin: round; }
.arch-zone .zfill { fill: var(--teal); }
.arch-zone .zhit { fill: transparent; stroke: transparent; }
.arch-zone:hover .zline, .arch-zone:hover .zfill,
.arch-zone.is-on .zline, .arch-zone.is-on .zfill { opacity: .46; }
/* Whole mouth tints the entire arch, so it needs a lighter hand than a
   highlight covering three teeth. */
.arch-zone[data-zone="full"]:hover .zfill,
.arch-zone[data-zone="full"].is-on .zfill { opacity: .3; }
.arch-zone:focus { outline: none; }
.arch-zone:focus-visible .zline, .arch-zone:focus-visible .zfill { opacity: .46; }
.arch-zone:focus-visible .zhit { stroke: var(--coral); stroke-width: 5; stroke-dasharray: 10 8; }

.arch-hint {
	margin: 16px 0 0;
	font-size: .78rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 500;
}
.arch-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.arch-tab {
	font-family: var(--sans);
	font-size: .84rem;
	font-weight: 500;
	padding: 9px 16px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: #fff;
	color: var(--body);
	cursor: pointer;
	transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.arch-tab:hover { border-color: var(--teal); color: var(--teal-deep); }
.arch-tab[aria-selected="true"] { background: var(--teal); border-color: var(--teal); color: #fff; }

.map-panel { min-height: 232px; }
.map-panel h3 { margin-bottom: 12px; }
.map-panel .map-tag {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
	color: var(--coral-deep); margin-bottom: 12px;
}
.map-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.map-list li {
	font-size: .82rem; font-weight: 500; padding: 7px 14px;
	border-radius: 999px; background: var(--mint); color: var(--teal-deep); border: 1px solid #cfe9e3;
}
.map-fade { animation: mapfade .45s cubic-bezier(.4, 0, .2, 1); }
@keyframes mapfade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- results (before / after) ---------- */
/* Clinical pairs are different shapes, so cards size to their own content
   rather than stretching to the tallest in the row. */
.case-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; align-items: start; }
@media (max-width: 780px) { .case-grid { grid-template-columns: 1fr; } }
.case {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}
.case-img { position: relative; background: #0a1f1d; }
.case-img picture { display: block; }
.case-img img { width: 100%; height: auto; display: block; }
/* The clinical pairs are stacked before over after, so the two labels sit at
   the top and the bottom of the frame rather than side by side. */
.case-img b {
	position: absolute;
	left: 14px;
	font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
	background: rgba(255, 255, 255, .93); color: var(--teal-ink);
	padding: 5px 11px; border-radius: 999px; font-weight: 600;
}
.case-img .tag-before { top: 14px; }
.case-img .tag-after { bottom: 14px; }
.case-body { padding: 22px 24px 24px; }
.case-body h3 { font-size: 1.08rem; margin-bottom: 8px; }
.case-body p { font-size: .92rem; margin: 0; }
.case-note { font-size: .78rem; color: var(--muted); margin-top: 14px; }

/* ---------- reels ---------- */
.reel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .reel-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .reel-grid { grid-template-columns: 1fr; } }
.reel {
	position: relative;
	border-radius: var(--r);
	overflow: hidden;
	background: #06201d;
	box-shadow: var(--shadow-sm);
	aspect-ratio: 9 / 14;
}
.reel video { width: 100%; height: 100%; object-fit: cover; }
.reel figcaption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 32px 18px 16px;
	background: linear-gradient(180deg, transparent, rgba(4, 30, 27, .85));
	color: #fff;
	font-size: .86rem;
	font-weight: 500;
}
.reel-wide { aspect-ratio: 16 / 11; }

/* ---------- reviews ---------- */
.rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
@media (max-width: 940px) { .rev-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .rev-grid { grid-template-columns: 1fr; } }
.rev {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 26px 26px 24px;
	box-shadow: var(--shadow-sm);
}
.rev-stars { color: #f2b134; font-size: .9rem; letter-spacing: 2px; margin-bottom: 12px; }
.rev p { font-size: .95rem; margin: 0 0 18px; }
.rev-who { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line-soft); padding-top: 16px; }
.rev-who img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--mint); flex: none; }
.rev-who .rw-av {
	width: 40px; height: 40px; border-radius: 50%; flex: none;
	display: grid; place-items: center;
	background: var(--mint); color: var(--teal-deep);
	font-family: var(--display); font-weight: 700; font-size: 1rem;
}
.rev-who b { display: block; font-size: .9rem; color: var(--ink); font-weight: 600; }
.rev-who span { font-size: .78rem; color: var(--muted); }
.rev-src { margin-left: auto; }
.rev-src svg { width: 17px; height: 17px; }

/* ---------- doctors ---------- */
.doc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
@media (max-width: 780px) { .doc-grid { grid-template-columns: 1fr; } }
.doc {
	display: grid;
	grid-template-columns: 132px 1fr;
	gap: 22px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 24px;
	box-shadow: var(--shadow-sm);
	align-items: start;
}
.doc-photo {
	width: 132px; height: 168px;
	border-radius: 90px 90px var(--r-sm) var(--r-sm);
	object-fit: cover;
	background: var(--mint);
}
.doc-mono {
	width: 132px; height: 168px;
	border-radius: 90px 90px var(--r-sm) var(--r-sm);
	background: linear-gradient(160deg, var(--mint), #d6efe9);
	display: grid; place-items: center;
	font-family: var(--display); font-size: 2.3rem; font-weight: 700; color: var(--teal-deep);
}
.doc-mono svg { width: 46px; height: 46px; }
.doc h3 { margin-bottom: 4px; font-size: 1.22rem; }
.doc .doc-cred { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--coral-deep); font-weight: 600; margin: 0 0 12px; }
.doc p { font-size: .93rem; margin: 0 0 10px; }
.doc ul { margin: 0; padding-left: 18px; font-size: .9rem; }
.doc li { margin-bottom: 5px; }
@media (max-width: 520px) { .doc { grid-template-columns: 1fr; } .doc-photo, .doc-mono { width: 100%; height: 230px; border-radius: var(--r-sm); } }

/* ---------- faq ---------- */
.faq { max-width: 860px; margin-inline: auto; }
.faq details {
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: #fff;
	margin-bottom: 12px;
	overflow: hidden;
	transition: border-color .25s ease, box-shadow .25s ease;
}
.faq details[open] { border-color: #c4e4dd; box-shadow: var(--shadow-sm); }
.faq summary {
	list-style: none;
	cursor: pointer;
	padding: 19px 56px 19px 24px;
	font-family: var(--display);
	font-weight: 600;
	font-size: 1.02rem;
	color: var(--ink);
	position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: '';
	position: absolute;
	right: 24px; top: 50%;
	width: 10px; height: 10px;
	border-right: 2px solid var(--teal);
	border-bottom: 2px solid var(--teal);
	transform: translateY(-70%) rotate(45deg);
	transition: transform .25s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq .faq-a { padding: 0 24px 20px; font-size: .95rem; }
.faq .faq-a p:last-child { margin-bottom: 0; }

/* ---------- cta band ---------- */
.cta-band {
	background: linear-gradient(135deg, var(--teal-ink), #0b524a 62%, var(--teal-deep));
	color: #d5ece8;
	border-radius: var(--r-lg);
	padding: clamp(38px, 6vw, 66px) clamp(28px, 5vw, 58px);
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 30px;
	align-items: center;
	position: relative;
	overflow: hidden;
}
.cta-band::after {
	content: '';
	position: absolute;
	top: -140px; right: -90px;
	width: 380px; height: 380px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(237, 113, 124, .32), transparent 68%);
}
.cta-band h2 { color: #fff; margin-bottom: 10px; max-width: 18ch; }
.cta-band p { margin: 0; max-width: 46ch; position: relative; }
.cta-band .cta-actions { display: flex; gap: 12px; flex-wrap: wrap; position: relative; }
.cta-band .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .35); }
.cta-band .btn-ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .6); }
@media (max-width: 820px) { .cta-band { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.site-foot { background: var(--teal-ink); color: #a9cdc7; padding: clamp(52px, 7vw, 82px) 0 30px; font-size: .93rem; }
.foot-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1.15fr; gap: 40px; }
@media (max-width: 960px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 34px; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-brand img { height: 62px; width: auto; background: #fff; border-radius: 14px; padding: 8px 12px; }
.foot-brand p { margin: 16px 0 0; font-size: .9rem; color: #92bdb6; max-width: 34ch; }
.foot-h { font-family: var(--display); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: #7fd6c9; margin: 0 0 16px; font-weight: 600; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: 9px; }
.site-foot a { color: #a9cdc7; text-decoration: none; transition: color .2s ease; }
.site-foot a:hover { color: #fff; }
.foot-map { display: block; border-radius: var(--r-sm); overflow: hidden; border: 1px solid rgba(255, 255, 255, .14); position: relative; }
.foot-map picture { display: block; }
.foot-map img { width: 100%; height: auto; display: block; }
.foot-map .map-open {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 20px 14px 10px;
	background: linear-gradient(180deg, transparent, rgba(4, 32, 29, .9));
	color: #fff; font-size: .8rem; font-weight: 600;
}
.foot-base {
	margin-top: 46px;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, .12);
	display: flex;
	flex-wrap: wrap;
	gap: 14px 26px;
	align-items: center;
	justify-content: space-between;
	font-size: .82rem;
	color: #86b3ac;
}
.dev-credit { display: inline-flex; align-items: center; gap: 8px; color: #86b3ac !important; transition: color .2s ease; }
.dev-credit:hover { color: #fff !important; }
.dev-credit img { border-radius: 5px; }

/* ---------- whatsapp float + chat ---------- */
.wa-float {
	position: fixed;
	right: 20px; bottom: 20px;
	width: 56px; height: 56px;
	border-radius: 50%;
	background: #25d366;
	display: grid; place-items: center;
	box-shadow: 0 14px 30px -10px rgba(37, 211, 102, .8);
	z-index: 80;
	border: 0; cursor: pointer;
	transition: transform .25s ease;
}
.wa-float:hover { transform: scale(1.07); }
.wa-float svg { width: 30px; height: 30px; fill: #fff; }
.wa-panel {
	position: fixed;
	right: 20px; bottom: 88px;
	width: min(330px, calc(100vw - 40px));
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	box-shadow: var(--shadow-lg);
	z-index: 81;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px) scale(.97);
	transform-origin: bottom right;
	transition: opacity .24s ease, transform .24s ease, visibility .24s;
}
.wa-panel.is-open { opacity: 1; visibility: visible; transform: none; }
.wa-head { background: #075e54; color: #fff; padding: 14px 18px; display: flex; align-items: center; gap: 11px; }
.wa-head img { width: 34px; height: 34px; border-radius: 50%; background: #fff; padding: 3px; }
.wa-head b { display: block; font-size: .9rem; }
.wa-head span { font-size: .74rem; opacity: .85; }
.wa-body { padding: 18px; background: #ece5dd; }
.wa-bubble { background: #fff; border-radius: 4px 14px 14px 14px; padding: 12px 14px; font-size: .88rem; color: #23342f; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.wa-form { display: flex; gap: 8px; padding: 12px; background: #fff; border-top: 1px solid var(--line-soft); }
.wa-form input {
	flex: 1; border: 1px solid var(--line); border-radius: 999px;
	padding: 10px 16px; font-family: var(--sans); font-size: .88rem; color: var(--ink); min-width: 0;
}
.wa-form input:focus { outline: none; border-color: var(--teal); }
.wa-form button { border: 0; background: #25d366; color: #fff; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; flex: none; }
.wa-form button svg { width: 17px; height: 17px; fill: #fff; }

/* ---------- forms ---------- */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(26px, 4vw, 40px); box-shadow: var(--shadow); }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--teal-deep); margin-bottom: 8px; }
.field input, .field select, .field textarea {
	width: 100%;
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 13px 16px;
	font-family: var(--sans);
	font-size: .97rem;
	color: var(--ink);
	background: var(--mint-soft);
	transition: border-color .2s ease, background .2s ease;
}
.field textarea { min-height: 132px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--teal); background: #fff; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.form-send { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 6px; }
.form-status { font-size: .88rem; margin-top: 14px; min-height: 22px; }
.form-status.is-loading { color: var(--muted); }
.form-status.is-success { color: #128a5f; }
.form-status.is-error { color: var(--coral-deep); }

/* ---------- contact info blocks ---------- */
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px) { .info-grid { grid-template-columns: 1fr; } }
.info { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 26px; box-shadow: var(--shadow-sm); }
.info h3 { font-size: 1.02rem; margin-bottom: 10px; }
.info p, .info a { font-size: .94rem; margin: 0 0 6px; color: var(--body); text-decoration: none; display: block; }
.info a:hover { color: var(--teal-deep); }
.hours-row { display: flex; justify-content: space-between; gap: 14px; font-size: .93rem; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.hours-row:last-child { border-bottom: 0; }
.hours-row b { color: var(--ink); font-weight: 600; }

.map-embed { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--mint); position: relative; aspect-ratio: 16 / 9; }
.map-embed picture { display: block; height: 100%; }
.map-embed img, .map-embed iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.map-embed .map-load {
	position: absolute; inset: 0;
	display: grid; place-items: center;
	background: rgba(6, 59, 53, .32);
	border: 0; cursor: pointer; padding: 0;
}
.map-embed .map-load span {
	background: #fff; color: var(--teal-ink);
	padding: 13px 26px; border-radius: 999px;
	font-family: var(--sans); font-weight: 600; font-size: .92rem;
	box-shadow: var(--shadow);
}

/* ---------- gallery mosaic ---------- */
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .mosaic { grid-template-columns: 1fr 1fr; } }
.mosaic figure { margin: 0; border-radius: var(--r); overflow: hidden; background: var(--mint); box-shadow: var(--shadow-sm); }
.mosaic picture { display: block; height: 100%; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; }
.mosaic .tall { grid-row: span 2; }
.mosaic .wide { grid-column: span 2; }

/* ---------- breadcrumb + page head ---------- */
.page-head { padding: clamp(38px, 5vw, 62px) 0 clamp(28px, 4vw, 44px); background: linear-gradient(180deg, var(--mint-soft), var(--paper)); }
.crumb { font-size: .8rem; color: var(--muted); margin-bottom: 16px; }
.crumb a { color: var(--teal-deep); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.page-head h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); margin-bottom: 14px; }
.page-head .lede { margin: 0; }

/* ---------- preloader + page veil ---------- */
.veil {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: var(--paper);
	display: grid;
	place-items: center;
	transition: opacity .5s ease;
}
.veil.is-gone { opacity: 0; pointer-events: none; }
.veil-seal { position: relative; width: 148px; height: 148px; display: grid; place-items: center; }
.veil-seal img { width: 92px; height: auto; }
.veil-ring {
	position: absolute;
	inset: 0;
	border: 1px dashed var(--teal);
	border-radius: 50%;
	animation: spin 3.4s linear infinite;
}
.veil-ring::after {
	content: '';
	position: absolute;
	top: -5px; left: 50%;
	width: 9px; height: 9px;
	margin-left: -4.5px;
	background: var(--coral);
	border-radius: 50%;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .veil-ring { animation: none; } }

/* ---------- reveal animation defaults (JS off = visible) ---------- */
.js-on .reveal { opacity: 0; transform: translateY(26px); }
.js-on .reveal-img { opacity: 0; transform: translateY(20px) scale(.985); }
@media (prefers-reduced-motion: reduce) {
	.js-on .reveal, .js-on .reveal-img { opacity: 1; transform: none; }
}

/* ---------- blog ---------- */
.post-head { padding: clamp(34px, 5vw, 58px) 0 clamp(18px, 3vw, 26px); }
.post-head h1 { font-size: clamp(1.9rem, 4vw, 3rem); max-width: 20ch; margin-bottom: 14px; }
.post-meta {
	font-size: .78rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 600;
	margin: 0;
}
.post-hero { margin-bottom: clamp(26px, 4vw, 44px); }
.post-hero picture { display: block; }
.post-hero img {
	width: 100%;
	max-height: 460px;
	object-fit: cover;
	border-radius: var(--r-lg);
	box-shadow: var(--shadow);
}

/* Article bodies come from a rich text editor, so this styles bare tags
   rather than classes, and stays narrow enough to read comfortably. */
.post-body { max-width: 760px; padding-bottom: clamp(40px, 6vw, 70px); }
.post-body > * { max-width: 100%; }
.post-body p { font-size: 1.04rem; line-height: 1.8; margin: 0 0 1.15em; }
.post-body h2 {
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
	margin: 1.7em 0 .5em;
	scroll-margin-top: 110px;
}
.post-body h3 { font-size: clamp(1.1rem, 1.9vw, 1.3rem); margin: 1.5em 0 .45em; }
.post-body ul, .post-body ol { margin: 0 0 1.3em; padding-left: 22px; }
.post-body li { margin-bottom: .5em; line-height: 1.75; }
.post-body a { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 3px; }
.post-body a:hover { color: var(--coral-deep); }
.post-body strong { color: var(--ink); font-weight: 600; }
.post-body img { border-radius: var(--r-sm); margin: 1.2em 0; height: auto; }
.post-body blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--teal);
	color: var(--ink);
	font-family: var(--accent-serif);
	font-style: italic;
	font-size: 1.12rem;
}
.post-body table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: .95rem; }
.post-body th, .post-body td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.post-body th { background: var(--mint-soft); color: var(--ink); font-weight: 600; }
.post .cta-band { margin-bottom: clamp(40px, 6vw, 70px); }
.post .cta-band h2 { color: #fff; }