/* Shared hero and page layout; tokens and typography load first. */
body.page-about-us {
--about-ink: var(--brand);
	--about-white: var(--surface-base);
	--about-warm: var(--surface-raised);
	--about-gold: var(--accent-text);
	--about-container-navy: var(--container-navy);
	--about-container-gold: var(--container-gold);
	--about-muted: var(--text-secondary);
	--about-shadow: var(--shadow-lg);
	overflow-x: hidden;
	background: var(--about-warm);
	color: var(--text-primary);
}

.about-hero::before {
position: absolute;
	top: 9%;
	left: -8%;
	width: 34vw;
	height: 34vw;
	border-radius: 50%;
	background: var(--about-container-gold);
	content: "";
	opacity: 0.48;
}

.about-hero-media {
position: absolute;
	z-index: 1;
	top: 64px;
	right: max(24px, calc((100vw - 1220px) / 2));
	bottom: 64px;
	width: min(48%, 610px);
	overflow: hidden;
	border-radius: var(--radius-xl);
	background: var(--container-cool);
	box-shadow: var(--shadow-md);
}

.about-hero h1 {
max-width: 650px;
	margin: 0 0 var(--space-6);
	color: var(--about-ink);
}

@media (max-width: 1199px) {
.about-hero {
min-height: auto;
	padding: var(--space-16) 0 var(--space-24);
}

.about-hero-media {
position: relative;
	inset: auto;
	width: min(100% - 48px, 1220px);
	height: 590px;
	margin-inline: auto;
	border-radius: var(--radius-xl);
}

.about-hero-content {
min-height: auto;
	padding-top: var(--space-16);
	padding-right: 0;
}
}

@media (max-width: 599px) {
.about-hero {
padding: var(--space-8) 0 var(--space-16);
}

.about-hero-media {
width: min(100% - 34px, 620px);
	height: 470px;
	border-radius: var(--radius-xl);
}

.about-hero-content {
padding-top: var(--space-12);
}

.about-hero-actions {
align-items: stretch;
	flex-direction: column;
	width: 100%;
}
}

body.page-about-us {
--about-ink: var(--brand);
	--about-cream: var(--surface-sunken);
	--about-white: var(--surface-base);
	--about-warm: var(--surface-raised);
	--about-clay: var(--accent);
	--about-gold: var(--accent-text);
	--about-sky: var(--container-cool);
	--about-container-navy: var(--container-navy);
	--about-container-gold: var(--container-gold);
	--about-text: var(--text-primary);
	--about-muted: var(--text-secondary);
	--about-line: var(--border-subtle);
	--about-shadow: var(--shadow-lg);
	--about-soft-shadow: var(--shadow-md);
	--about-lift-shadow: var(--shadow-lg);
	--about-display: var(--font-label);
	--about-body: var(--font-body);
	overflow-x: hidden;
	background: var(--about-warm);
	color: var(--about-text);
}

.page-about-us .container {
width: min(var(--container-max), calc(100% - var(--container-gutter) * 2));
}

.page-about-us .section {
padding: var(--section-space) 0;
}

.page-about-us .eyebrow {
display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0 0 var(--space-4);
	color: var(--about-gold);
}

.page-about-us .eyebrow::before {
width: 28px;
	height: 1px;
	background: currentColor;
	content: "";
}

.page-about-us .eyebrow > span {
display: none;
}

.about-hero {
position: relative;
	isolation: isolate;
	min-height: 720px;
	overflow: hidden;
	background: var(--about-warm);
}

.about-hero::before {
position: absolute;
	top: 9%;
	left: -8%;
	width: 34vw;
	height: 34vw;
	border-radius: 50%;
	background: var(--about-container-gold);
	content: "";
	filter: blur(2px);
	opacity: 0.48;
}

.about-hero::after {
position: absolute;
	right: 46%;
	bottom: 12%;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background: var(--about-container-navy);
	content: "";
}

.about-hero-media {
position: absolute;
	z-index: 1;
	top: 64px;
	right: max(24px, calc((100vw - 1220px) / 2));
	bottom: 64px;
	width: min(48%, 610px);
	overflow: hidden;
	border-radius: var(--radius-xl);
	background-color: var(--about-sky);
	box-shadow: var(--shadow-md);
}

.about-hero-media img {
width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 36%;
}

.about-hero-content {
position: relative;
	z-index: 2;
	display: flex;
	min-height: 720px;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding-right: 40%;
}

.about-hero h1 {
max-width: 650px;
	margin: 0 0 var(--space-6);
}

.about-hero p:not(.eyebrow) {
max-width: var(--measure-tight);
	margin: 0 0 var(--space-8);
	color: var(--about-muted);
}

.about-hero-actions {
display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
}

.about-intro {
background: var(--about-cream);
}

.about-intro-grid {
display: grid;
	grid-template-columns: minmax(0, 0.88fr) minmax(420px, 1.12fr);
	gap: var(--space-24);
	align-items: center;
}

.about-intro h2 {
max-width: 630px;
	margin: 0;
}

.about-intro-copy {
padding: var(--space-12);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-xl);
	background: var(--about-white);
	box-shadow: var(--shadow-md);
}

.about-intro-copy > p {
margin: 0 0 var(--space-8);
	color: var(--about-muted);
}

.about-stats {
display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-2);
}

.about-stats div {
min-height: 142px;
	padding: var(--space-6) var(--space-4);
	border-radius: var(--radius-lg);
	background: var(--about-warm);
}

.about-stats div:nth-child(2) {
background: var(--about-sky);
}

.about-stats div:nth-child(3) {
background: var(--about-container-navy);
}

.about-stats strong {
display: block;
	margin-bottom: var(--space-3);
	color: var(--about-ink);
}

.about-stats span {
display: block;
	color: var(--about-muted);
}

.about-credentials {
padding: var(--space-12) 0;
	background: var(--about-white);
}

.credentials-inner {
display: grid;
	grid-template-columns: 230px 1fr;
	align-items: center;
	gap: var(--space-12);
}

.credentials-inner .eyebrow {
margin: 0;
}

.credentials-logos {
display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--space-3);
}

.credentials-logos img {
width: 100%;
	height: 100px;
	padding: var(--space-4);
	border: 1px solid var(--about-line);
	border-radius: var(--radius-lg);
	background: var(--about-warm);
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.78;
	transition: filter var(--transition-duration) var(--ease-out), opacity var(--state-duration) var(--ease-out), transform var(--transition-duration) var(--ease-out), box-shadow var(--transition-duration) var(--ease-out);
}

.credentials-logos img:hover {
filter: grayscale(0);
	opacity: 1;
	box-shadow: var(--shadow-lg);
	transform: translateY(-3px);
}

.dentists {
background: var(--about-warm);
}

.dentists-layout {
display: grid;
	grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
	align-items: start;
	gap: var(--space-16);
}

.dentists-intro h2 {
margin: 0 0 var(--space-6);
}

.dentists-intro > p:not(.eyebrow) {
max-width: 470px;
	margin: 0;
	color: var(--about-muted);
}

.dentist-grid {
display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-6);
}

.dentist-card {
overflow: hidden;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-xl);
	background: var(--about-white);
	box-shadow: var(--shadow-md);
	transition: box-shadow var(--transition-duration) var(--ease-out), transform var(--transition-duration) var(--ease-out);
}

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

.dentist-photo {
height: 520px;
	overflow: hidden;
	background: var(--about-sky);
}

.dentist-card:nth-child(2) .dentist-photo {
background: var(--about-container-gold);
}

.dentist-photo img {
width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform var(--transition-duration) var(--ease-out);
}

.dentist-card:hover .dentist-photo img {
transform: scale(1.035);
}

.dentist-copy {
padding: var(--space-12);
}

.doctor-title {
margin: 0 0 var(--space-3);
	color: var(--about-gold);
}

.dentist-copy h3 {
margin: 0 0 var(--space-4);
}

.dentist-copy p:not(.doctor-title) {
margin: 0 0 var(--space-4);
	color: var(--about-muted);
}

.dentist-copy p:last-child {
margin-bottom: 0;
}

.about-values {
background: var(--about-ink);
	color: var(--about-white);
}

.values-grid {
display: grid;
	grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.15fr);
	gap: var(--space-24);
	align-items: start;
}

.values-panel {
position: sticky;
	top: 130px;
}

.values-panel .eyebrow {
color: var(--about-clay);
}

.values-panel h2 {
max-width: 550px;
	margin: 0;
	color: var(--about-white);
}

.values-list {
display: grid;
	gap: var(--space-3);
}

.values-list article {
display: grid;
	grid-template-columns: 54px 0.72fr 1.28fr;
	align-items: start;
	gap: var(--space-6);
	padding: var(--space-6);
	border: 1px solid var(--border-subtle-on-dark);
	border-radius: var(--radius-lg);
	background: var(--brand-hover);
	transition: background var(--state-duration) var(--ease-out), transform var(--transition-duration) var(--ease-out);
}

.values-list article:hover {
background: var(--brand-active);
	transform: translateX(5px);
}

.values-list span {
display: grid;
	width: 46px;
	height: 46px;
	border: 1px solid var(--border-subtle-on-dark);
	border-radius: 50%;
	color: var(--about-clay);
	place-items: center;
}

.values-list h3 {
margin: 0;
	color: var(--about-white);
}

.values-list p {
margin: var(--space-1) 0 0;
	color: var(--text-on-dark-muted);
}

.about-cta {
padding: var(--space-24) 0;
	background: var(--surface-raised);
	color: var(--text-primary);
	text-align: left;
}

.about-cta::before,
.about-cta::after {
display: none;
}



.about-cta-inner {
position: relative;
  overflow: hidden;
  max-width: 1220px;
  padding: var(--space-16) 40% var(--space-16) var(--space-16);
  border-radius: var(--radius-xl);
  background: linear-gradient(120deg, var(--container-cool) 0 66%, var(--container-navy) 66% 100%);
  box-shadow: var(--shadow-md);
}

.about-cta-inner::before {
position: absolute;
	z-index: 1;
	top: 50%;
	right: 3%;
	width: 460px;
	height: 460px;
	border: 12px solid var(--surface-base);
	border-radius: 50%;
	background: url("/wp-content/uploads/2026/06/cta-image-scaled.webp") center / cover no-repeat;
	box-shadow: var(--shadow-md);
	content: "";
	transform: translateY(-50%);
}

.about-cta-inner::after {
position: absolute;
	right: 7%;
	bottom: -80px;
	width: 290px;
	height: 290px;
	border-radius: 50%;
	content: "";
	box-shadow: var(--shadow-md);
}

.about-cta .eyebrow {
justify-content: flex-start;
}

.about-cta h2 {
position: relative;
	z-index: 1;
	margin: 0 0 var(--space-6);
	color: var(--brand);
}

.about-cta p:not(.eyebrow) {
position: relative;
	z-index: 1;
	max-width: 610px;
	margin: 0 0 var(--space-8);
	color: var(--text-secondary);
}

.about-cta-actions {
position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: var(--space-4);
}

@media (max-width: 1199px) {
.about-hero {
min-height: auto;
	padding: var(--space-16) 0 var(--space-24);
}

.about-hero-media {
position: relative;
	top: auto;
	right: auto;
	bottom: auto;
	width: min(100% - 48px, 1220px);
	height: 590px;
	margin-inline: auto;
	border-radius: var(--radius-xl);
}

.about-hero::after {
display: none;
}

.about-hero-content {
min-height: auto;
	padding-top: var(--space-16);
	padding-right: 0;
}

.about-hero h1 {
max-width: 760px;
}

.about-intro-grid,
.dentists-layout,
.values-grid {
grid-template-columns: 1fr;
	gap: var(--space-12);
}

.values-panel {
position: static;
}

.credentials-inner {
grid-template-columns: 1fr;
	gap: var(--space-6);
}

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

.dentist-card {
display: grid;
	grid-template-columns: minmax(320px, 0.82fr) 1.18fr;
}

.dentist-photo {
height: 100%;
	min-height: 500px;
}

.about-cta-inner {
padding-right: 44%;
}
}

@media (max-width: 599px) {
.page-about-us .container {
width: min(var(--container-max), calc(100% - var(--container-gutter) * 2));
}

.page-about-us .section {
padding: var(--section-space) 0;
}

.about-hero {
padding: var(--space-8) 0 var(--space-16);
}

.about-hero-media {
width: min(100% - 34px, 620px);
	height: 470px;
	border-radius: var(--radius-xl);
}

.about-hero-content {
padding-top: var(--space-12);
}

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

.about-intro-copy {
padding: var(--space-6);
}

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

.about-stats div {
min-height: 118px;
}

.credentials-logos {
grid-template-columns: repeat(2, 1fr);
}

.credentials-logos img {
height: 92px;
}

.dentist-card {
display: block;
}

.dentist-photo {
height: 430px;
	min-height: 0;
}

.dentist-copy {
padding: var(--space-8);
}

.values-list article {
grid-template-columns: 48px 1fr;
	gap: var(--space-4);
	padding: var(--space-6);
}

.values-list p {
grid-column: 2;
}


.about-cta {
padding: var(--space-16) 0;
}


}

@media (max-width: 599px) {
.about-hero-media {
height: 410px;
}

.credentials-logos {
grid-template-columns: 1fr;
}

}

@media (prefers-reduced-motion: reduce) {
.page-about-us *,
.page-about-us *::before,
.page-about-us *::after {
scroll-behavior: auto !important;
	transition: none !important;
}
}

/* CTA mirrors service pages; reserve image space on narrow layouts. */
.about-cta .patient-actions { position: relative; z-index: 2; }
.about-cta-inner::before, .about-cta-inner::after { pointer-events: none; }
@media (min-width: 900px) and (max-width: 1199px) {
  .about-cta-inner::before { width: 350px; height: 350px; }
}
@media (max-width: 899px) {
  .about-cta-inner {
    padding: var(--space-12) var(--space-8) calc(var(--space-32) + var(--space-32));
    background: linear-gradient(155deg, var(--container-cool) 0 70%, var(--container-navy) 70% 100%);
  }
  .about-cta-inner::before {
    box-sizing: border-box;
    top: auto; right: 50%; bottom: var(--space-6);
    width: 210px; height: 210px; border-width: 8px;
    transform: translateX(50%);
  }
  .about-cta-inner::after { right: -46px; bottom: -120px; }
}
@media (max-width: 599px) {
  .about-cta-inner { padding-inline: var(--space-6); padding-bottom: calc(var(--space-32) + var(--space-24)); }
  .about-cta-inner::before { width: 180px; height: 180px; }
}