:root {
	--ink: #12355b;
	--muted: #5b718a;
	--teal: #1264a3;
	--teal-dark: #0b3d6e;
	--mint: #eaf3fb;
	--coral: #2f86c9;
	--cream: #f7fbff;
	--white: #ffffff;
	--line: #d5e4f1;
	--shadow: 0 22px 60px rgba(18, 53, 91, 0.12);
	--radius: 18px;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	color: var(--ink);
	background: var(--cream);
	font-family: "Trebuchet MS", "Segoe UI", sans-serif;
	line-height: 1.6;
}

a {
	color: inherit;
	text-decoration: none;
}

.container {
	width: min(1120px, calc(100% - 48px));
	margin: 0 auto;
}

.site-header {
	position: relative;
	z-index: 10;
	background: rgba(247, 251, 255, 0.92);
	border-bottom: 1px solid rgba(213, 228, 241, 0.9);
	backdrop-filter: blur(14px);
}

.navbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 84px;
	gap: 24px;
}

.logo,
.footer-logo {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.logo-mark {
	display: grid;
	width: 42px;
	height: 42px;
	place-items: center;
	color: var(--white);
	background: var(--teal);
	border-radius: 12px 12px 12px 4px;
	font-size: 1.4rem;
	font-weight: 800;
}

.logo-text {
	display: grid;
	line-height: 1.1;
}

.logo-text strong {
	font-family: Georgia, serif;
	font-size: 1.15rem;
}

.logo-text small {
	margin-top: 4px;
	color: var(--muted);
	font-size: 0.65rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.nav-menu {
	display: flex;
	align-items: center;
	gap: 26px;
	color: var(--muted);
	font-size: 0.9rem;
	font-weight: 700;
}

.nav-menu a:not(.nav-appointment) {
	transition: color 180ms ease;
}

.nav-menu a:not(.nav-appointment):hover,
.nav-menu a:not(.nav-appointment):focus-visible {
	color: var(--teal);
}

.nav-appointment,
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 22px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-weight: 800;
	transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.nav-appointment,
.btn-primary {
	color: var(--white);
	background: var(--teal);
	box-shadow: 0 10px 24px rgba(8, 127, 130, 0.2);
}

.nav-appointment:hover,
.btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(20, 52, 59, 0.16);
}

.btn-secondary {
	color: var(--teal-dark);
	background: rgba(255, 255, 255, 0.7);
	border-color: var(--line);
}

.menu-toggle {
	display: none;
	width: 44px;
	height: 44px;
	padding: 10px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--white);
	cursor: pointer;
}

.menu-toggle span {
	display: block;
	height: 2px;
	margin: 5px 0;
	background: var(--teal-dark);
	transition: transform 180ms ease, opacity 180ms ease;
}

.hero {
	position: relative;
	overflow: hidden;
	min-height: 620px;
	display: flex;
	align-items: center;
	background: radial-gradient(circle at 82% 28%, rgba(47, 134, 201, 0.18), transparent 25%), linear-gradient(120deg, var(--mint), var(--cream) 62%);
}

.hero::after {
	position: absolute;
	right: -8%;
	bottom: -28%;
	width: 54vw;
	height: 54vw;
	border: 1px solid rgba(18, 100, 163, 0.14);
	border-radius: 50%;
	content: "";
}

.hero-content {
	position: relative;
	z-index: 1;
	width: min(660px, 100%);
	padding: 80px 0;
	animation: rise-in 700ms ease both;
}

.eyebrow {
	display: inline-block;
	margin-bottom: 20px;
	color: var(--teal);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.18em;
}

h1 {
	max-width: 680px;
	margin: 0;
	font-family: Georgia, serif;
	font-size: clamp(3.2rem, 7vw, 6.2rem);
	font-weight: 400;
	letter-spacing: -0.04em;
	line-height: 0.98;
}

h1 span {
	display: block;
	color: var(--teal);
}

.hero p {
	max-width: 480px;
	margin: 28px 0 34px;
	color: var(--muted);
	font-size: 1.1rem;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.care-strip {
	position: relative;
	z-index: 2;
	margin-top: -34px;
}

.care-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	overflow: hidden;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

.care-item {
	display: grid;
	gap: 3px;
	padding: 25px 30px;
	border-right: 1px solid var(--line);
}

.care-item:last-child {
	border-right: 0;
}

.care-item strong {
	color: var(--teal);
	font-family: Georgia, serif;
	font-size: 1.7rem;
	font-weight: 400;
}

.care-item span,
.service-card p,
.appointment-banner p {
	color: var(--muted);
}

.services-preview {
	padding: 120px 0 110px;
}

.section-heading {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 38px;
}

h2 {
	max-width: 560px;
	margin: 0;
	font-family: Georgia, serif;
	font-size: clamp(2.3rem, 5vw, 4.3rem);
	font-weight: 400;
	letter-spacing: -0.03em;
	line-height: 1.02;
}

.section-heading .eyebrow {
	margin-bottom: 14px;
}

.text-link {
	flex: 0 0 auto;
	padding-bottom: 8px;
	color: var(--teal-dark);
	border-bottom: 1px solid var(--teal);
	font-weight: 800;
}

.service-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.service-card {
	position: relative;
	display: flex;
	min-height: 300px;
	flex-direction: column;
	padding: 30px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--white);
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.service-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow);
}

.service-card-featured {
	color: var(--white);
	background: var(--teal);
	border-color: var(--teal);
}

.service-card-featured p {
	color: #cbe7e1;
}

.service-number {
	color: var(--coral);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.1em;
}

.service-card h3 {
	max-width: 220px;
	margin: auto 0 14px;
	font-family: Georgia, serif;
	font-size: 1.65rem;
	font-weight: 400;
	line-height: 1.1;
}

.service-card p {
	margin: 0;
	font-size: 0.95rem;
}

.card-arrow {
	align-self: end;
	margin-top: 24px;
	color: var(--coral);
	font-size: 1.25rem;
}

.appointment-banner {
	padding: 72px 0;
	color: var(--white);
	background: var(--coral);
}

.appointment-banner-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 36px;
}

.appointment-banner .eyebrow {
	color: var(--ink);
	margin-bottom: 12px;
}

.appointment-banner h2 {
	max-width: 640px;
}

.appointment-banner p {
	margin: 18px 0 0;
	color: #174d7d;
}

.btn-light {
	flex: 0 0 auto;
	color: var(--ink);
	background: var(--white);
}

.page-intro {
	padding: 90px 0 76px;
	background: var(--mint);
}

.page-intro h1 {
	max-width: 700px;
	font-size: clamp(3rem, 7vw, 5.8rem);
}

.page-intro h1 span {
	display: inline;
}

.page-intro p {
	max-width: 520px;
	margin: 26px 0 0;
	color: var(--muted);
	font-size: 1.08rem;
}

.page-intro-actions {
	display: flex;
	gap: 12px;
	margin-top: 30px;
}

.appointment-section {
	padding: 96px 0 120px;
}

.contact-section {
	padding: 96px 0 120px;
}

.contact-layout {
	display: grid;
	grid-template-columns: .75fr 1.25fr;
	gap: clamp(42px, 8vw, 110px);
	align-items: start;
}

.contact-details h2 {
	margin-top: 10px;
	font-size: clamp(2.2rem, 4vw, 3.6rem);
}

.contact-detail {
	display: grid;
	gap: 5px;
	margin-top: 30px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
}

.contact-detail span {
	color: var(--muted);
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.contact-detail strong {
	font-family: Georgia, serif;
	font-size: 1.2rem;
	font-weight: 400;
}

.contact-form {
	display: grid;
	gap: 22px;
	padding: clamp(24px, 5vw, 46px);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--white);
	box-shadow: var(--shadow);
}

.contact-form label {
	display: grid;
	gap: 8px;
	font-size: .86rem;
	font-weight: 800;
}

.contact-form input,
.contact-form textarea {
	width: 100%;
	padding: 13px 14px;
	color: var(--ink);
	border: 1px solid var(--line);
	border-radius: 9px;
	background: var(--cream);
	font: inherit;
	font-size: .95rem;
	outline: none;
}

.contact-form textarea { resize: vertical; }

.contact-form input:focus,
.contact-form textarea:focus {
	border-color: var(--teal);
	box-shadow: 0 0 0 3px rgba(8, 127, 130, .12);
}

.contact-form .btn {
	justify-self: start;
	border: 0;
	font: inherit;
	cursor: pointer;
}

.contact-map {
	margin-top: 72px;
}

.contact-map-heading {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 30px;
	margin-bottom: 24px;
}

.contact-map-heading h2 {
	margin-top: 10px;
	font-size: clamp(2rem, 4vw, 3.2rem);
}

.contact-map-heading p {
	max-width: 390px;
	margin: 0;
	color: var(--muted);
}

.contact-map-frame {
	display: block;
	width: 100%;
	height: 390px;
	border: 0;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

.story-section,
.careers-section,
.values-section,
.faq-section,
.legal-section {
	padding: 96px 0 120px;
}

.story-layout,
.careers-layout {
	display: grid;
	grid-template-columns: .85fr 1.15fr;
	gap: clamp(42px, 8vw, 110px);
	align-items: start;
}

.story-layout h2,
.careers-layout h2 {
	margin-top: 10px;
	font-size: clamp(2.2rem, 4vw, 3.6rem);
}

.story-copy {
	color: var(--muted);
	font-size: 1.05rem;
}

.story-copy p:first-child { margin-top: 0; }
.story-copy .btn { margin-top: 14px; }

.values-section { background: var(--mint); }

.value-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.value-grid article {
	padding: 30px;
	border-top: 2px solid var(--teal);
	background: var(--white);
}

.value-grid article > span {
	color: var(--coral);
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .1em;
}

.value-grid h2 { margin: 30px 0 10px; font-size: 1.8rem; }
.value-grid p { margin: 0; color: var(--muted); }

.faq-list {
	width: min(780px, 100%);
}

.faq-list details {
	border-top: 1px solid var(--line);
}

.faq-list details:last-child { border-bottom: 1px solid var(--line); }

.faq-list summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 23px 0;
	cursor: pointer;
	font-family: Georgia, serif;
	font-size: 1.35rem;
	list-style: none;
}

.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { color: var(--teal); content: "+"; font-family: "Trebuchet MS", sans-serif; font-size: 1.4rem; }
.faq-list details[open] summary::after { content: "-"; }
.faq-list details p { max-width: 650px; margin: -4px 40px 24px 0; color: var(--muted); }

.legal-intro { padding-bottom: 68px; }
.legal-content { width: min(780px, 100%); }
.legal-updated { color: var(--muted); font-size: .85rem; }
.legal-content h2 { margin: 42px 0 12px; font-size: 2rem; }
.legal-content h2:first-of-type { margin-top: 48px; }
.legal-content p { color: var(--muted); }
.legal-content a { color: var(--teal-dark); text-decoration: underline; }

.listing-section {
	padding: 90px 0 120px;
}

.listing-heading {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	margin-bottom: 38px;
}

.listing-heading p {
	max-width: 420px;
	margin: 0;
	color: var(--muted);
}

.service-listing-grid,
.doctor-listing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.listing-card,
.doctor-card {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--white);
}

.listing-card {
	display: flex;
	min-height: 300px;
	flex-direction: column;
	padding: 30px;
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.listing-card:hover,
.doctor-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow);
}

.listing-number,
.doctor-specialty {
	color: var(--coral);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.listing-card h2,
.doctor-card h2 {
	margin: auto 0 14px;
	font-family: Georgia, serif;
	font-size: 1.75rem;
	font-weight: 400;
	line-height: 1.08;
}

.listing-card p,
.doctor-card p {
	margin: 0 0 22px;
	color: var(--muted);
	font-size: .94rem;
}

.listing-card .text-link,
.doctor-card .text-link {
	align-self: flex-start;
	margin-top: auto;
	font-size: .86rem;
}

.doctor-card {
	overflow: hidden;
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.doctor-avatar {
	display: grid;
	height: 220px;
	place-items: center;
	color: var(--teal-dark);
	background: var(--mint);
	font-family: Georgia, serif;
	font-size: 4rem;
}

.doctor-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.doctor-card-body {
	display: flex;
	min-height: 245px;
	flex-direction: column;
	padding: 25px;
}

.doctor-card h2 {
	margin: 9px 0 12px;
}

.facility-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.facility-card {
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--white);
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.facility-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow);
}

.facility-image {
	display: grid;
	height: 230px;
	place-items: center;
	color: var(--teal);
	background: var(--mint);
	font-family: Georgia, serif;
	font-size: 4rem;
}

.facility-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.facility-card-body {
	display: flex;
	min-height: 210px;
	flex-direction: column;
	padding: 25px;
}

.facility-card h2 {
	margin: 0 0 12px;
	font-family: Georgia, serif;
	font-size: 1.65rem;
	font-weight: 400;
	line-height: 1.1;
}

.facility-card p {
	margin: 0 0 22px;
	color: var(--muted);
	font-size: .94rem;
}

.facility-card .text-link {
	align-self: flex-start;
	margin-top: auto;
	font-size: .86rem;
}

.news-grid,
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.news-card,
.gallery-item {
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--white);
}

.news-card { transition: transform 180ms ease, box-shadow 180ms ease; }
.news-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.news-card > img,
.news-placeholder { display: block; width: 100%; height: 190px; object-fit: cover; }
.news-placeholder { display: grid; place-items: center; color: var(--teal); background: var(--mint); font: 4rem Georgia, serif; }
.news-card-body { display: flex; min-height: 245px; flex-direction: column; padding: 25px; }
.news-card h2 { margin: 10px 0 12px; font: 400 1.65rem/1.1 Georgia, serif; }
.news-card p { margin: 0 0 22px; color: var(--muted); font-size: .94rem; }
.news-card .text-link { align-self: flex-start; margin-top: auto; font-size: .86rem; }
.gallery-item { margin: 0; }
.gallery-item img { display: block; width: 100%; height: 250px; object-fit: cover; }
.gallery-item figcaption { padding: 14px 18px; font-weight: 800; }
.content-empty { grid-column: 1 / -1; padding: 70px 30px; text-align: center; }
.content-empty h2 { margin: 0; font-size: 2.2rem; }
.content-empty p { color: var(--muted); }
.article-section { padding: 90px 0 120px; }
.article-layout { display: flex; justify-content: center; }
.article-content { width: min(760px, 100%); }
.article-content h2 { margin: 14px 0 20px; font-size: clamp(2.5rem, 6vw, 5rem); }
.article-excerpt { color: var(--muted); font-size: 1.15rem; }
.article-image { width: 100%; max-height: 440px; margin: 24px 0; object-fit: cover; border-radius: var(--radius); }
.article-body { margin: 28px 0 34px; font-size: 1.04rem; line-height: 1.85; }

.appointment-layout {
	display: grid;
	grid-template-columns: minmax(220px, 0.75fr) minmax(0, 1.25fr);
	gap: clamp(42px, 8vw, 110px);
	align-items: start;
}

.appointment-aside h2 {
	margin-top: 10px;
	font-size: clamp(2.2rem, 4vw, 3.6rem);
}

.appointment-aside > p {
	margin: 24px 0 0;
	color: var(--muted);
}

.appointment-note {
	display: grid;
	gap: 8px;
	margin-top: 44px;
	padding: 22px;
	border-left: 3px solid var(--coral);
	background: var(--white);
}

.appointment-note span {
	color: var(--muted);
	font-size: 0.9rem;
}

.appointment-form {
	display: grid;
	gap: 22px;
	padding: clamp(24px, 5vw, 46px);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--white);
	box-shadow: var(--shadow);
}

.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.appointment-form label {
	display: grid;
	gap: 8px;
	color: var(--ink);
	font-size: 0.86rem;
	font-weight: 800;
}

.appointment-form input,
.appointment-form select,
.appointment-form textarea {
	width: 100%;
	padding: 13px 14px;
	color: var(--ink);
	border: 1px solid var(--line);
	border-radius: 9px;
	background: var(--cream);
	font: inherit;
	font-size: 0.95rem;
	outline: none;
	transition: border-color 180ms ease, box-shadow 180ms ease;
}

.appointment-form textarea {
	resize: vertical;
}

.appointment-form input:focus,
.appointment-form select:focus,
.appointment-form textarea:focus {
	border-color: var(--teal);
	box-shadow: 0 0 0 3px rgba(8, 127, 130, 0.12);
}

.appointment-form .btn {
	justify-self: start;
	border: 0;
	font: inherit;
	cursor: pointer;
}

.optional,
.form-footnote {
	color: var(--muted);
	font-size: 0.78rem;
	font-weight: 400;
}

.form-footnote {
	margin: -10px 0 0;
}

.alert {
	margin-top: 24px;
	padding: 14px 18px;
	border-radius: 10px;
	font-weight: 700;
}

.alert-success {
	color: #155b4c;
	background: #dff4e9;
	border: 1px solid #b8e5d0;
}

.alert-error {
	color: #8b3e35;
	background: #fff0ec;
	border: 1px solid #f2c8bd;
}

html.js [data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 600ms ease, transform 600ms ease;
}

html.js [data-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
}

.site-footer {
	padding: 64px 0 24px;
	color: #e5f1fb;
	background: var(--ink);
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr;
	gap: 48px;
	padding-bottom: 48px;
}

.footer-logo {
	color: var(--white);
	font-family: Georgia, serif;
	font-size: 1.2rem;
}

.footer-about p,
.footer-contact p {
	max-width: 300px;
	color: #a9c1d8;
}

.footer-newsletter p {
	margin: 0 0 12px;
	color: #a9c1d8;
	font-size: .9rem;
}

.newsletter-input {
	display: flex;
	border-bottom: 1px solid rgba(217, 239, 235, .4);
}

.newsletter-input input {
	width: 100%;
	padding: 10px 0;
	color: var(--white);
	background: transparent;
	border: 0;
	font: inherit;
	outline: 0;
}

.newsletter-input input::placeholder { color: #a9c7c3; }
.newsletter-input button { padding: 0 0 0 12px; color: var(--coral); background: transparent; border: 0; font: inherit; font-size: 1.2rem; cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.footer-links,
.footer-contact {
	display: grid;
	align-content: start;
	gap: 10px;
}

.footer-links h3,
.footer-contact h3 {
	margin: 0 0 8px;
	color: var(--white);
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.footer-bottom {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding-top: 22px;
	border-top: 1px solid rgba(217, 239, 235, 0.16);
	color: #a9c7c3;
	font-size: 0.78rem;
}

.footer-bottom p {
	margin: 0;
}

.footer-bottom a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

@keyframes rise-in {
	from {
		opacity: 0;
		transform: translateY(22px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}