/* Clinic — warm off-white, deep teal, soft cards, pill buttons. For dentists, doctors, pharmacies, care. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

:root {
	--bg: #f6f7f2;
	--fg: #10303a;
	--muted: #577077;
	--accent: #0e6b73;
	--accent-fg: #fff;
	--accent-glyph: none;
	--font-head: 'Poppins', system-ui, sans-serif;
	--font-body: 'Poppins', system-ui, sans-serif;

	--btn-radius: 999px;
	--btn-pad: 17px 24px;
	--btn-shadow: 0 10px 22px -12px color-mix(in srgb, var(--accent) 80%, transparent);

	--chip-bg: #e2f1ef;
	--chip-border: 1px solid #cbe4e1;
	--chip-size: 50px;
	--chip-glyph: invert(1) brightness(.35);   /* white glyph → dark teal-ish on the mint chip */

	--glyph-page: invert(1);
	--pop-bg: #ffffff;
	--pop-fg: #10303a;
	--pop-border: #d7e6e4;
	--pop-shade: rgba(16, 48, 58, .45);
	--field-bg: #f3f8f7;
	--star-filter: invert(1);
}

.bg {
	max-width: 520px;
	aspect-ratio: 4 / 3.2;
	max-height: 46dvh;
	border-radius: 0 0 36px 36px;
}
.bg > img { object-position: 50% 22%; }
.bg::after { height: 30%; background: linear-gradient(0deg, rgba(16, 48, 58, .28), transparent); }

/* the name sits on a white card pulled up over the photo */
.header {
	width: calc(100% - 32px);
	max-width: 468px;
	margin-top: -44px;
	padding: 22px 20px 20px;
	gap: 10px;
	background: #fff;
	border-radius: 26px;
	box-shadow: 0 18px 36px -18px rgba(14, 107, 115, .45);
}
.header .title h1 { font-size: clamp(1.5rem, 7vw, 1.9rem); font-weight: 600; color: #10303a; }
.header h2 {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 14px;
	border-radius: 999px;
	background: #e2f1ef;
	color: var(--accent);
	font-size: .82rem;
	font-weight: 500;
}
.header h2::before { content: '+'; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); color: #fff; font-size: .8rem; line-height: 1; font-weight: 600; }

.social-media { padding-top: 22px; }
.social-media > a:hover { background: #d3eae7; }

.links { padding-top: 24px; gap: 12px; }
.link { font-size: .98rem; }
.links .link:not(:first-child) { background: #fff; color: var(--accent); box-shadow: none; border: 1.5px solid #cfe3e0; }
.links .link:not(:first-child):hover { border-color: var(--accent); }