/*
 * Dr. Pouria Arvish — site styles: a hand port of the Next.js design (app/globals.css and the
 * Tailwind class lists of components/*.tsx, with the computed values of the compiled CSS).
 * Each Tailwind class list is one semantic class here. Every colour, font, text size, radius,
 * shadow and timing is a custom property printed in :root by ARV_Tokens (dashboard: Colours &
 * fonts, Sizes & spacing). Logical properties throughout, so one stylesheet serves LTR and RTL.
 * Breakpoints: 360, 400, 640, 768, 1024, 1280 px (Tailwind's, plus min-[360px] and min-[400px]).
 */

/* =========================================================================
   Base (the parts of Tailwind's preflight the design relies on)
   ========================================================================= */

*,
::before,
::after {
	box-sizing: border-box;
	border: 0 solid;
}

/* Overflow guard: long words and labels wrap inside their box. */
* {
	min-width: 0;
	overflow-wrap: break-word;
}

/* …and a text box is never wider than its container: a flex or grid child sized by its content
   (fit-content: a column flex box that does not stretch, an inline-block link) would otherwise
   take the width of its longest unbroken word (break-word does not lower min-content). */
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
li,
dt,
dd,
blockquote,
figcaption {
	max-width: 100%;
}

html {
	/* Chrome heights the content clears (globals.css :root). */
	--nav-h: var(--nav-height);
	--tabbar-h: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0px));
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	tab-size: 4;
	font-family: var(--font-body);
	-webkit-tap-highlight-color: transparent;
	/* Light only (spec §3.4.7): the page declares both schemes so forced dark modes (Samsung
	   Internet above all) leave it alone; its "dark theme" restates the light palette. */
	color-scheme: light dark;
	scrollbar-color: var(--scrollbar) var(--canvas);
	scroll-behavior: smooth;
	/* Section snapping: each section's top snaps just below the navbar. */
	scroll-snap-type: y mandatory;
	scroll-padding-block-start: var(--nav-h);
}

/* From 1024 px the navbar carries the page links and the tab bar goes away. */
@media (min-width: 1024px) {
	html {
		--nav-h: var(--nav-height-desk);
		--tabbar-h: 0px;
	}
}

body {
	margin: 0;
	min-height: 100%;
	line-height: inherit;
	background-color: var(--canvas);
	font-family: var(--font-body);
	color: var(--charcoal);
	overflow-x: hidden;
	/* The content always renders with the light scheme. */
	color-scheme: light;
}

/* Yekan Bakh's width axis defaults to ExtraCondensed in the font file. */
html[data-lang="fa"] body,
html[data-lang="ar"] body {
	font-stretch: normal;
}

@media (prefers-color-scheme: dark) {
	html {
		color-scheme: light dark;
		scrollbar-color: var(--scrollbar) var(--canvas);
	}
	body {
		color-scheme: light;
		background-color: var(--canvas);
		color: var(--charcoal);
	}
	.dental-background {
		background-color: var(--canvas);
	}
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: inherit;
	font-weight: inherit;
}

blockquote,
dl,
dd,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
p {
	margin: 0;
}

ul,
ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

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

b,
strong {
	font-weight: bolder;
}

img,
svg {
	display: block;
	vertical-align: middle;
}

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

/* Letter-spacing breaks the joined letterforms of Arabic script: every tracked label falls back
   to normal spacing in the RTL editions (replaces globals.css [class*="tracking-"]). */
[dir="rtl"] .tracked {
	letter-spacing: 0;
}

@media (forced-colors: active) {
	:focus-visible {
		outline: 2px solid CanvasText;
	}
}

/* =========================================================================
   Icons — Material Symbols by codepoint (components/Icon.tsx). The box is pinned to one em square
   so the layout is the same before and after the font applies.
   ========================================================================= */

.icon {
	font-family: var(--font-icon);
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: middle;
	font-weight: 400;
	font-style: normal;
	font-size: var(--fs-icon);
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
	font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
}

/* =========================================================================
   Type roles and shared text styles
   ========================================================================= */

.title,
.title-text {
	font-family: var(--font-display);
	font-size: var(--fs-title1);
	line-height: var(--lh-title1);
	font-weight: var(--fw-title1);
}

/* The accent line: italic in English; Yekan Bakh has no italic, so upright in RTL. */
.title__accent {
	font-style: italic;
}

[dir="rtl"] .title__accent {
	font-style: normal;
}

.item-title {
	font-family: var(--font-display);
	font-size: var(--fs-item);
	line-height: var(--lh-item);
	font-weight: var(--fw-item);
}

.item-title--accent {
	font-style: italic;
}

[dir="rtl"] .item-title--accent {
	font-style: normal;
}

.body-text {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	font-weight: var(--fw-body);
}

.caption {
	font-size: var(--fs-caption);
	line-height: var(--lh-caption);
	font-weight: var(--fw-caption);
}

.kicker {
	font-size: var(--fs-caption);
	line-height: var(--lh-caption);
	font-weight: var(--fw-caption);
	text-transform: uppercase;
	letter-spacing: 0.3em;
	opacity: 0.5;
}

.kicker--faint {
	opacity: 0.4;
}

.label {
	font-size: var(--fs-caption);
	line-height: var(--lh-caption);
	font-weight: var(--fw-caption);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	opacity: 0.4;
}

.label--number {
	opacity: 0.3;
}

.rule {
	height: 1px;
	background-color: var(--charcoal);
}

.rule--short {
	width: 4rem;
}

.rule--tiny {
	width: 2.5rem;
}

@media (min-width: 768px) {
	.rule--short {
		width: 6rem;
	}
	.rule--tiny {
		width: 4rem;
	}
}

/* The site's one call-to-action style (components/LinkButton.tsx, D6). */
.link-button {
	display: inline-block;
	border-block-end: 1px solid var(--line-soft);
	padding-block-end: 0.25rem;
	font-size: var(--fs-caption);
	line-height: var(--lh-caption);
	font-weight: var(--fw-caption);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--charcoal);
	transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-button:hover {
	border-color: var(--charcoal);
}

/* =========================================================================
   Navbar (components/Navbar.tsx, H1) and language switcher (LanguageSwitcher.tsx)
   ========================================================================= */

.site-nav {
	position: fixed;
	inset-inline: 0;
	inset-block-start: 0;
	z-index: 50;
	display: flex;
	height: var(--nav-h);
	align-items: center;
	border-block-end: 1px solid var(--bar-border);
	background-color: var(--nav-bg);
	-webkit-backdrop-filter: blur(var(--blur-nav)) saturate(var(--saturate-card));
	backdrop-filter: blur(var(--blur-nav)) saturate(var(--saturate-card));
}

/* A logged-in visitor's WordPress toolbar (32 px, 46 px on phones) sits above the fixed navbar
   instead of covering it; on phones the toolbar stays fixed too, so the navbar never leaves a gap.
   Only logged-in views carry body.admin-bar, so visitors' pages are unchanged. */
html:has(> body.admin-bar) {
	--admin-bar-h: 32px;
	scroll-padding-block-start: calc(var(--nav-h) + var(--admin-bar-h));
}

body.admin-bar .site-nav {
	inset-block-start: var(--admin-bar-h);
}

@media (max-width: 782px) {
	html:has(> body.admin-bar) {
		--admin-bar-h: 46px;
	}
}

@media (max-width: 600px) {
	body.admin-bar #wpadminbar {
		position: fixed;
	}
}

.site-nav__inner {
	margin-inline: auto;
	display: flex;
	width: 100%;
	max-width: var(--container);
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding-inline: var(--gutter);
}

.site-nav__start {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 1.25rem;
}

.site-nav__brand {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: var(--font-display);
	font-size: var(--fs-item);
	line-height: var(--lh-item);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -0.025em;
	color: var(--charcoal);
}

.site-nav__divider {
	display: none;
	height: 1.25rem;
	width: 1px;
	flex-shrink: 0;
	background-color: var(--line-divider);
}

.site-nav__links {
	display: none;
	align-items: center;
	gap: 1.5rem;
}

.site-nav__link {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: var(--fs-caption);
	line-height: var(--lh-caption);
	font-weight: var(--fw-caption);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-nav__link:hover {
	opacity: 0.5;
}

.site-nav__link.is-current {
	border-block-end: 2px solid var(--charcoal);
	padding-block-end: 0.25rem;
}

/* Always reads left to right (dir="ltr" in the markup). */
.switcher {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 0.5rem;
	white-space: nowrap;
}

.switcher__item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* The separators are dropped on the narrowest phones. */
.switcher__sep {
	display: none;
	font-size: var(--fs-caption);
	line-height: var(--lh-caption);
	font-weight: var(--fw-caption);
	opacity: 0.2;
}

.switcher__link {
	font-size: var(--fs-caption);
	line-height: var(--lh-caption);
	font-weight: var(--fw-caption);
	opacity: 0.4;
	transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.switcher__link:hover,
.switcher__link.is-current {
	opacity: 1;
}

.switcher__link.is-current {
	font-weight: 700;
}

@media (min-width: 400px) {
	.switcher,
	.switcher__item {
		gap: 0.75rem;
	}
	.switcher__sep {
		display: inline;
	}
}

@media (min-width: 640px) {
	.site-nav__inner {
		gap: 1.5rem;
	}
}

@media (min-width: 1024px) {
	.site-nav__divider {
		display: block;
	}
	.site-nav__links {
		display: flex;
	}
}

@media (min-width: 1280px) {
	.site-nav__start,
	.site-nav__links {
		gap: 2rem;
	}
}

/* =========================================================================
   Page frame, sections (components/Section.tsx) and glass cards (Card.tsx)
   ========================================================================= */

.site-page {
	padding-block-end: var(--tabbar-h);
}

.site-page--no-tabbar {
	padding-block-end: 0;
}

.site-main {
	padding-block-start: var(--nav-h);
}

/* One idea per screen: a section fills the viewport below the navbar from 768 px and is
   content-sized on phones. */
.section {
	position: relative;
	display: flex;
	width: 100%;
	align-items: center;
	padding-block: 3rem;
}

.section--desk-only {
	display: none;
}

.section__inner {
	margin-inline: auto;
	width: 100%;
	max-width: var(--container);
	padding-inline: var(--gutter);
}

@media (min-width: 768px) {
	.section {
		min-height: calc(100svh - var(--nav-h));
		padding-block: 4rem;
	}
	.section--phone-only {
		display: none;
	}
	.section--desk-only {
		display: flex;
	}
}

/* Glass panel: translucent white with a faint diagonal sheen, the backdrop blurred and slightly
   saturated (constant: spec §3.4.5), a bright hairline on top and a soft drop shadow. */
.card {
	border-radius: var(--radius-card);
	border: 1px solid var(--glass-border);
	background-image: linear-gradient(to bottom right, var(--glass-from), var(--glass-via), var(--glass-to));
	box-shadow: var(--shadow-card);
	-webkit-backdrop-filter: blur(var(--blur-card)) saturate(var(--saturate-card));
	backdrop-filter: blur(var(--blur-card)) saturate(var(--saturate-card));
	padding: var(--card-p);
}

/* A card filled edge to edge by a photograph: no blur (it would never show). */
.card--flush {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

@media (min-width: 768px) {
	.card {
		border-radius: var(--radius-card-lg);
	}
	.card--roomy {
		padding: 4rem;
	}
}

/* =========================================================================
   Photographs (components/Media.tsx): the frame is the hover group (D3)
   ========================================================================= */

.media-frame {
	position: relative;
	overflow: hidden;
}

.media-frame--3-4 {
	aspect-ratio: 3 / 4;
}

.media-frame--4-3 {
	aspect-ratio: 4 / 3;
}

.media-frame--4-5 {
	aspect-ratio: 4 / 5;
}

.media-frame--16-7 {
	aspect-ratio: 16 / 7;
}

.media-frame--video {
	aspect-ratio: 16 / 9;
}

.media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	color: transparent;
	transition: transform var(--zoom-ms) cubic-bezier(0.22, 1, 0.36, 1);
}

/* Full colour, and a little zoom while hovered. */
.media-frame:hover .media {
	transform: scale(var(--zoom));
}

/* Fade-in when it decodes: only an image that has not arrived yet is hidden; `data-pending`
   holds it at zero with the transition off, `data-fading` arms the transition the frame after.
   The reveal fallback clears it. */
.media-fade[data-pending] {
	opacity: 0;
	transition: none;
}

.media-fade[data-fading] {
	transition: opacity var(--media-fade-ms) ease-out;
}

.media-fade[data-fading]:not([data-loaded]) {
	opacity: 0;
}

html.reveal-fallback .media-fade {
	opacity: 1;
}

/* =========================================================================
   Home: the opening (hero card + quick services), M1
   ========================================================================= */

.hero-grid {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	align-items: center;
	gap: 1.5rem;
}

.hero-card > * + * {
	margin-block-start: 1.5rem;
}

.hero-card__head > * + * {
	margin-block-start: 1rem;
}

.hero-card__icon {
	margin-block-end: 0.5rem;
}

.hero-card__body {
	max-width: 32rem;
	opacity: 0.7;
}

.hero-card__facts {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 1.5rem;
	border-block-start: 1px solid var(--line-faint);
	padding-block-start: 1.5rem;
}

.hero-card__facts .label,
.services-card .label {
	margin-block-end: 0.25rem;
}

.hero-card__fact {
	font-size: var(--fs-caption);
	line-height: var(--lh-caption);
	font-weight: var(--fw-caption-strong);
}

/* Phone numbers read left to right in every language, aligned to the reading end in RTL. */
[dir="rtl"] .hero-card__phone {
	text-align: end;
}

.services-card > * + * {
	margin-block-start: 2rem;
}

.services-card__body {
	opacity: 0.5;
}

@media (min-width: 640px) {
	.hero-card__facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.hero-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2.5rem;
	}
	.hero-card > * + * {
		margin-block-start: 2rem;
	}
	.hero-card__icon {
		font-size: var(--fs-icon-lg);
		line-height: 2.5rem;
	}
	.hero-card__facts {
		max-width: 32rem;
	}
	.hero-card__facts .label,
	.services-card .label {
		margin-block-end: 0.5rem;
	}
	.services-card > * + * {
		margin-block-start: 2.5rem;
	}
}

@media (min-width: 1024px) {
	.hero-grid {
		gap: 4rem;
	}
}

/* =========================================================================
   Home: figures (#experience)
   ========================================================================= */

.stats {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 2.5rem;
	text-align: center;
}

.stat > * + * {
	margin-block-start: 0.75rem;
}

.stat__number {
	display: none;
	font-family: var(--font-display);
	font-size: var(--fs-title2);
	line-height: var(--lh-title2);
	font-weight: var(--fw-title2);
	font-style: italic;
	opacity: 0.1;
}

[dir="rtl"] .stat__number {
	font-style: normal;
}

.stat__label {
	font-size: var(--fs-caption);
	line-height: var(--lh-caption);
	font-weight: var(--fw-caption);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	opacity: 0.4;
}

@media (min-width: 640px) {
	.stats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.stats {
		gap: 3rem;
		padding: 4rem;
	}
	.stat > * + * {
		margin-block-start: 1.25rem;
	}
	.stat__number {
		display: block;
	}
}

/* =========================================================================
   Home: core services (#treatments), F1
   ========================================================================= */

.core__head {
	margin-block-end: 2.5rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
}

.core__subtitle {
	max-width: 20rem;
	font-size: var(--fs-caption);
	line-height: var(--lh-caption);
	font-weight: var(--fw-caption);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	opacity: 0.4;
}

.core__grid {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 2rem;
}

.core__item > * + * {
	margin-block-start: 0.75rem;
}

.core__number {
	font-size: var(--fs-caption);
	line-height: var(--lh-caption);
	font-weight: var(--fw-caption);
	text-transform: uppercase;
	letter-spacing: 0.3em;
	opacity: 0.3;
}

.core__body {
	opacity: 0.6;
}

.core__cta {
	margin-block-start: 2.5rem;
	display: flex;
	justify-content: center;
}

@media (min-width: 640px) {
	.core__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.core__head {
		margin-block-end: 4rem;
		flex-direction: row;
		align-items: flex-end;
	}
	[dir="ltr"] .core__subtitle {
		text-align: end;
	}
	.core__grid {
		gap: 3rem;
	}
	.core__item > * + * {
		margin-block-start: 1rem;
	}
	.core__cta {
		margin-block-start: 3.5rem;
	}
}

/* =========================================================================
   Home: philosophy teaser (#philosophy)
   ========================================================================= */

.reveal--narrow {
	margin-inline: auto;
	width: 100%;
	max-width: 64rem;
}

.teaser {
	text-align: center;
}

.teaser > * + * {
	margin-block-start: 2rem;
}

.teaser__quote {
	margin-inline: auto;
	max-width: 48rem;
	font-style: italic;
	opacity: 0.7;
}

[dir="rtl"] .teaser__quote {
	font-style: normal;
}

.teaser__caption {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}

.teaser__caption-text {
	font-size: var(--fs-caption);
	line-height: var(--lh-caption);
	font-weight: var(--fw-caption);
	text-transform: uppercase;
	letter-spacing: 0.4em;
	opacity: 0.6;
}

@media (min-width: 768px) {
	.teaser > * + * {
		margin-block-start: 2.5rem;
	}
	.teaser__caption {
		gap: 1.5rem;
	}
}

/* =========================================================================
   Home: the doctor (#doctor), M2 and D3
   ========================================================================= */

.doctor {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2.5rem;
}

.doctor__photo,
.doctor__text {
	width: 100%;
}

.doctor__frame {
	margin-inline: auto;
	width: 75%;
	border-radius: var(--radius-card);
}

.doctor__text > * + * {
	margin-block-start: 1.5rem;
}

.doctor__head > * + * {
	margin-block-start: 0.75rem;
}

/* The introduction shows from 768 px only (M2). */
.doctor__body {
	display: none;
	opacity: 0.7;
}

.doctor__foot {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 1.5rem;
	padding-block-start: 0.5rem;
}

.doctor__creds > * + * {
	margin-block-start: 0.75rem;
}

.doctor__cred {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.doctor__dot,
.feature__dot {
	height: 0.375rem;
	width: 0.375rem;
	flex-shrink: 0;
	border-radius: 50%;
	background-color: var(--charcoal);
	opacity: 0.3;
}

.doctor__cred-text,
.feature__cred-text {
	font-size: var(--fs-caption);
	line-height: var(--lh-caption);
	font-weight: var(--fw-caption);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.doctor__cta {
	display: flex;
	align-items: flex-end;
}

@media (min-width: 640px) {
	.doctor__frame {
		width: 66.666667%;
	}
	.doctor__foot {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.doctor {
		flex-direction: row;
		gap: 3.5rem;
	}
	.doctor__photo {
		width: 41.666667%;
	}
	.doctor__text {
		width: 58.333333%;
	}
	.doctor__frame {
		margin-inline: 0;
		width: 100%;
		border-radius: var(--radius-card-lg);
	}
	.doctor__text > * + * {
		margin-block-start: 2rem;
	}
	.doctor__body {
		display: block;
	}
	.doctor__foot {
		gap: 2rem;
	}
}

@media (min-width: 1024px) {
	.doctor {
		gap: 5rem;
	}
}

/* =========================================================================
   Feature layout (components/FeatureSection.tsx): Services, Results, The Artisan. A text card
   beside a photo card; from 768 px two columns, the photo at the reading end, or at the start
   with `--image-start` (the text card moves to the second column). Phones: text first.
   ========================================================================= */

.feature__grid {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	align-items: center;
	gap: 1.5rem;
}

.feature__card > * + *,
.mantra__card > * + * {
	margin-block-start: 1.5rem;
}

.feature__head > * + *,
.mantra__head > * + * {
	margin-block-start: 1rem;
}

.feature__icon {
	margin-block-end: 0.5rem;
}

.rule--wide {
	width: 6rem;
}

.feature__body {
	max-width: 32rem;
	opacity: 0.7;
}

/* Results: the spec line under the text. */
.feature__spec {
	padding-block-start: 1rem;
}

.feature__spec-label {
	margin-block-end: 0.5rem;
}

/* A photo card filled edge to edge: no padding, no blur. */
.card--flush {
	padding: 0;
}

/* A tall portrait does not tower over the text card (D7). */
.feature__media--narrow {
	margin-inline: auto;
	width: 100%;
	max-width: 24rem;
}

/* The Artisan: credentials (a wrapping list with dot bullets). */
.feature__creds {
	display: flex;
	flex-wrap: wrap;
	column-gap: 2rem;
	row-gap: 0.75rem;
	padding-block-start: 0.5rem;
}

.feature__cred {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/* The Artisan: figures, the label above the value (F3). */
.feature__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
	padding-block-start: 0.5rem;
}

.feature__stat > * + * {
	margin-block-start: 0.25rem;
}

.feature__stat-value {
	font-family: var(--font-display);
	font-size: var(--fs-title2);
	line-height: var(--lh-title2);
	font-weight: var(--fw-title2);
}

/* The Artisan: the steps, a hairline between them. */
.feature__steps {
	padding-block-start: 1rem;
}

.feature__steps > * + * {
	margin-block-start: 1rem;
}

.feature__step {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding-block-end: 1rem;
}

.feature__step:not(:last-child) {
	border-block-end: 1px solid var(--line-hair);
}

.feature__step-number {
	font-size: var(--fs-caption);
	line-height: var(--lh-caption);
	font-weight: var(--fw-caption);
	letter-spacing: 0.1em;
	opacity: 0.3;
}

.feature__step-label {
	font-size: var(--fs-caption);
	line-height: var(--lh-caption);
	font-weight: var(--fw-caption);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.7;
}

@media (min-width: 768px) {
	.feature__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2.5rem;
	}
	.feature__grid--image-start > .feature__text {
		order: 2;
	}
	.feature__grid--image-start > .feature__media,
	.feature__grid--image-start > .mantra__media {
		order: 1;
	}
	.feature__card > * + *,
	.mantra__card > * + * {
		margin-block-start: 2rem;
	}
}

@media (min-width: 1024px) {
	.feature__grid {
		gap: 4rem;
	}
}

/* =========================================================================
   Philosophy: mantras (app/[locale]/philosophy/page.tsx). Beside a 4/5 portrait in a bordered
   frame, or a centred statement card, optionally with a 16/7 photo strip.
   ========================================================================= */

.mantra__meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.mantra__meta--stacked {
	flex-direction: column;
}

.mantra__icon {
	opacity: 0.4;
}

.mantra__meta--stacked .mantra__icon {
	opacity: 0.6;
}

.mantra__number {
	font-size: var(--fs-caption);
	line-height: var(--lh-caption);
	font-weight: var(--fw-caption);
	text-transform: uppercase;
	letter-spacing: 0.4em;
	opacity: 0.4;
}

.mantra__number--wide {
	letter-spacing: 0.5em;
	opacity: 0.5;
}

.title--tight {
	letter-spacing: -0.025em;
}

.rule--mantra {
	width: 4rem;
}

.rule--centered {
	margin-inline: auto;
}

.mantra__body {
	max-width: 28rem;
	opacity: 0.8;
}

.mantra__statement {
	opacity: 0.9;
}

.mantra__quote {
	font-style: italic;
}

[dir="rtl"] .mantra__quote {
	font-style: normal;
}

.mantra__media {
	margin-inline: auto;
	width: 100%;
	max-width: 20rem;
}

.mantra__frame {
	border-radius: var(--radius-card);
	border: 1px solid var(--frame-border);
	box-shadow: var(--shadow-frame);
}

.mantra__center {
	margin-inline: auto;
	width: 100%;
	max-width: 42rem;
}

.mantra__card--centered {
	text-align: center;
}

.mantra__head--centered > * + * {
	margin-block-start: 1.25rem;
}

.mantra__strip {
	width: 100%;
	border-radius: var(--radius-card);
}

@media (min-width: 640px) {
	.mantra__media {
		max-width: 24rem;
	}
}

@media (min-width: 768px) {
	.rule--mantra {
		width: 5rem;
	}
	.mantra__media {
		max-width: 28rem;
	}
	.mantra__frame,
	.mantra__strip {
		border-radius: var(--radius-card-lg);
	}
	.mantra__card--centered {
		padding: 4rem;
	}
}

/* =========================================================================
   Page not found (app/[locale]/not-found.tsx) and any other WordPress page (generic)
   ========================================================================= */

.notfound {
	margin-inline: auto;
	max-width: 36rem;
	text-align: center;
}

.notfound > * + *,
.page-content > * + * {
	margin-block-start: 1.5rem;
}

.notfound__body {
	opacity: 0.7;
}

.page-content {
	margin-inline: auto;
	max-width: 48rem;
}

.page-content__body {
	opacity: 0.8;
}

.page-content__body > * + * {
	margin-block-start: 1em;
}

.page-content__body a,
.page-content__title a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.page-content__body ul,
.page-content__body ol {
	list-style: revert;
	padding-inline-start: 1.5em;
}

.page-content__body img {
	border-radius: var(--radius-card);
}

/* =========================================================================
   Footer (components/Footer.tsx)
   ========================================================================= */

.site-footer {
	margin-inline: auto;
	width: 100%;
	max-width: var(--container);
	padding-inline: var(--gutter);
	padding-block: 1rem 3rem;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 2.5rem;
}

.site-footer__about > * + * {
	margin-block-start: 1.5rem;
}

.site-footer__brand {
	font-family: var(--font-display);
	font-size: var(--fs-item);
	line-height: var(--lh-item);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -0.025em;
	color: var(--charcoal);
}

.site-footer__tagline {
	max-width: 24rem;
	font-size: var(--fs-caption);
	line-height: var(--lh-caption);
	font-weight: var(--fw-caption);
	opacity: 0.6;
}

.site-footer__col > * + * {
	margin-block-start: 1.25rem;
}

.site-footer__list {
	font-size: var(--fs-caption);
	line-height: var(--lh-caption);
	font-weight: var(--fw-caption);
}

.site-footer__list > * + * {
	margin-block-start: 0.75rem;
}

.site-footer__link {
	opacity: 0.7;
	transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-footer__link:hover {
	opacity: 1;
}

.site-footer__phone {
	display: inline-block;
}

@media (min-width: 640px) {
	.site-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.site-footer__about {
		grid-column: span 2 / span 2;
	}
}

@media (min-width: 768px) {
	.site-footer {
		padding-block-end: 5rem;
	}
	.site-footer__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 3rem;
	}
}

/* =========================================================================
   Phone tab bar (components/MobileTabBar.tsx), below 1024 px
   ========================================================================= */

.tabbar {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 50;
	border-block-start: 1px solid var(--bar-border);
	background-color: var(--tabbar-bg);
	padding-block-end: env(safe-area-inset-bottom, 0px);
	-webkit-backdrop-filter: blur(var(--blur-nav)) saturate(var(--saturate-card));
	backdrop-filter: blur(var(--blur-nav)) saturate(var(--saturate-card));
}

.tabbar__list {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	padding-inline: 0.5rem;
}

.tabbar__item {
	flex: 1 1 0%;
}

.tabbar__link {
	display: flex;
	height: var(--tabbar-height);
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	padding-inline: 0.125rem;
	font-size: var(--fs-tab);
	text-transform: uppercase;
	letter-spacing: 0;
	color: var(--ink-soft);
}

.tabbar__link.is-current {
	font-weight: 700;
	color: var(--charcoal);
}

.tabbar__link:not(.is-current) .tabbar__icon {
	opacity: 0.7;
}

.tabbar__label {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (min-width: 360px) {
	.tabbar__link {
		padding-inline: 0.25rem;
		font-size: var(--fs-tab-wide);
		letter-spacing: 0.025em;
	}
}

@media (min-width: 1024px) {
	.tabbar {
		display: none;
	}
}

/* =========================================================================
   Page background (components/Background.tsx, globals.css, X1): four oversized circles and two
   light pools drifting over a warm gradient. Only `transform` is animated.
   arv-physical: start — the background is a fixed composition, not text: it keeps its physical
   positions in RTL as the design does (documented exception to the logical-properties rule).
   ========================================================================= */

.dental-background {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	background: var(--bg-desktop);
}

.dental-background .shape {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	will-change: transform;
}

/* Left — dominant giant arc */
.dental-background .shape-left {
	width: 76vw;
	height: 76vw;
	max-width: 1150px;
	max-height: 1150px;
	left: -54vw;
	top: 7vh;
	background: var(--bg-left);
	border: 1px solid var(--bg-left-border);
	box-shadow: var(--bg-left-glow);
	animation: leftFloat 18s ease-in-out infinite alternate;
}

/* Top right — partial circle */
.dental-background .shape-top {
	width: 54vw;
	height: 54vw;
	max-width: 820px;
	max-height: 820px;
	top: -38vw;
	right: -7vw;
	background: var(--bg-top);
	border: 1px solid var(--bg-top-border);
	box-shadow: var(--bg-top-glow);
	animation: topFloat 21s ease-in-out infinite alternate;
}

/* Right — large flowing arc */
.dental-background .shape-right {
	width: 70vw;
	height: 70vw;
	max-width: 1050px;
	max-height: 1050px;
	right: -58vw;
	top: 30%;
	background: var(--bg-right);
	border: 1px solid var(--bg-right-border);
	box-shadow: var(--bg-right-glow);
	animation: rightFloat 20s ease-in-out infinite alternate;
}

/* Lower right — extremely subtle circle */
.dental-background .shape-bottom {
	width: 57vw;
	height: 57vw;
	max-width: 900px;
	max-height: 900px;
	right: -31vw;
	bottom: -43vw;
	background: var(--bg-bottom);
	border: 1px solid var(--bg-bottom-border);
	animation: bottomFloat 23s ease-in-out infinite alternate;
}

/* Soft internal light that keeps the centre alive */
.dental-background .light {
	position: absolute;
	width: 45vw;
	height: 45vw;
	max-width: 700px;
	max-height: 700px;
	left: 29%;
	top: 28%;
	border-radius: 50%;
	pointer-events: none;
	background: var(--bg-light);
	animation: centerPulse 12s ease-in-out infinite alternate;
}

/* Very faint atmospheric layer */
.dental-background .atmosphere {
	position: absolute;
	width: 70vw;
	height: 38vw;
	left: 15%;
	top: 35%;
	border-radius: 50%;
	pointer-events: none;
	background: var(--bg-atmosphere);
	transform: rotate(-12deg);
	animation: atmosphereMove 16s ease-in-out infinite alternate;
}

@keyframes leftFloat {
	0% { transform: translate3d(0, 0, 0) scale(1); }
	100% { transform: translate3d(7vw, -5vh, 0) scale(1.055); }
}

@keyframes topFloat {
	0% { transform: translate3d(0, 0, 0) scale(1); }
	100% { transform: translate3d(-5vw, 5vh, 0) scale(1.075); }
}

@keyframes rightFloat {
	0% { transform: translate3d(0, 0, 0) scale(1); }
	100% { transform: translate3d(-7vw, -5vh, 0) scale(1.055); }
}

@keyframes bottomFloat {
	0% { transform: translate3d(0, 0, 0) scale(1); }
	100% { transform: translate3d(-5vw, -5vh, 0) scale(1.065); }
}

@keyframes centerPulse {
	0% { transform: scale(0.96); opacity: 0.65; }
	100% { transform: scale(1.1); opacity: 1; }
}

@keyframes atmosphereMove {
	0% { transform: translate3d(0, 0, 0) rotate(-12deg) scale(1); }
	100% { transform: translate3d(5vw, -3vh, 0) rotate(-8deg) scale(1.08); }
}

/* Phone composition */
@media (max-width: 700px) {
	.dental-background {
		background: var(--bg-phone);
	}
	.dental-background .shape-left { width: 125vw; height: 125vw; left: -91vw; top: 12vh; }
	.dental-background .shape-top { width: 90vw; height: 90vw; top: -62vw; right: -15vw; }
	.dental-background .shape-right { width: 115vw; height: 115vw; right: -99vw; top: 35%; }
	.dental-background .shape-bottom { width: 95vw; height: 95vw; right: -52vw; bottom: -67vw; }
	.dental-background .light { width: 75vw; height: 75vw; left: 12%; top: 30%; }
	.dental-background .atmosphere { width: 110vw; height: 60vw; left: -5%; top: 36%; }
}

/* arv-physical: end */

/* The drift off: by the owner (design.motion.background) or by the visitor's reduced motion. */
.dental-background--still .shape,
.dental-background--still .light,
.dental-background--still .atmosphere {
	animation: none;
}

/* =========================================================================
   Scroll reveal (globals.css, components/Reveal.tsx): the card rises, its contents fade. The fade
   is never on the card itself: opacity below 1 would switch its backdrop-filter off. Nothing is
   hidden until `html.js`; `html.reveal-fallback` shows everything after the fallback time.
   ========================================================================= */

html.js [data-reveal]:not([data-visible]) {
	transform: translateY(var(--rise));
}

html.js [data-reveal]:not([data-visible]) > * > * {
	opacity: 0;
}

[data-reveal] {
	transition: transform var(--rise-ms) cubic-bezier(0.455, 0.03, 0.515, 0.955);
	transition-delay: var(--reveal-delay, 0ms);
	will-change: transform;
}

[data-reveal] > * > * {
	transition: opacity var(--fade-ms) cubic-bezier(0.455, 0.03, 0.515, 0.955);
	transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal][data-visible] {
	will-change: auto;
}

html.reveal-fallback [data-reveal]:not([data-visible]) {
	transform: none;
}

html.reveal-fallback [data-reveal]:not([data-visible]) > * > * {
	opacity: 1;
}

/* =========================================================================
   Section snapping and the page crossfade
   ========================================================================= */

[data-snap] {
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

footer[data-snap] {
	scroll-snap-align: end;
}

/* The crossfade's duration (design.motion.page_ms); the `@view-transition` opt-in itself is
   printed inline by ARV_Front::page_transitions(), and left out inside the live preview. */
::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: var(--page-ms);
}

/* =========================================================================
   Reduced motion: everything that moves stops (playbook §7.1 rule 9)
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	.media-fade,
	.media {
		transition: none;
	}
	.media-frame:hover .media {
		transform: none;
	}
	.dental-background .shape,
	.dental-background .light,
	.dental-background .atmosphere {
		animation: none !important;
	}
	html.js [data-reveal]:not([data-visible]) {
		transform: none;
	}
	html.js [data-reveal]:not([data-visible]) > * > * {
		opacity: 1;
	}
	[data-reveal],
	[data-reveal] > * > * {
		transition: none;
	}
	/* The page crossfade (the inline rule ARV_Front::page_transitions() prints repeats this, as it
	   comes later in the cascade). */
	@view-transition {
		navigation: none;
	}
	::view-transition-old(root),
	::view-transition-new(root) {
		animation: none;
	}
}