/* ─────────────────────────────────────────────────────────────
   home.css — front page only (enqueued conditionally)
   Ground truth: live-oxygen-24.css + live-home-raw.html
   All values sourced directly from live site.
   .odx-btn / .odx-stars families live in components.css (shared global).
   ─────────────────────────────────────────────────────────── */

/* ── 1. HERO MAIN — section-2-24 ─────────────────────────────
   Full-width section, bg: Hero-Edit-scaled.jpg, height:42em.
   Inner: flex row, h5 heading LEFT, content div RIGHT.
   Source: #section-2-24 / #div_block-8-24 / #headline-9-24
   ─────────────────────────────────────────────────────────── */
/* min-height, not height: the single-column stack is taller than 42em and
   overflow:hidden would clip the Book Now button. */
.odx-hero-main {
	background-color: var(--color-white);
	min-height: 42em;
	position: relative;
	overflow: hidden;
	display: flex;
}

/* LCP image layer — replaces the former background-image; fills the section
   and crops like background-size:cover / background-position:50% 50%. */
.odx-hero-main__media,
.odx-hero-main__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: var(--z-hero-img);
}
.odx-hero-main__img {
	object-fit: cover;
	object-position: 50% 50%;
	display: block;
}

/* refinement: single text column (was row: headline LEFT, content RIGHT).
   Widescreen: the column occupies the left half and its blocks are centred
   inside that half; the text inside them stays left-aligned. */
.odx-hero-main__inner {
	position: relative;
	z-index: var(--z-hero-content);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 0 0 50%;
	max-width: 50%;
	padding: var(--section-pad-y) var(--container-pad);
}

/* shared measure — both blocks share one width so their left edges line up */
.odx-hero-main__headline,
.odx-hero-main__content {
	width: 100%;
	min-width: 35vw;
	max-width: 42vw;
}

/* refinement: kicker/display split replaces the flat 2em three-line block */
.odx-hero-main__headline {
	font-weight: 500;
	color: var(--color-navy);
	line-height: var(--line-height-tight);
	font-family: var(--font-sans);
	margin-bottom: 0;
	flex-shrink: 0;
}

.odx-hero-main__kicker {
	display: block;
	font-family: var(--font-sans);
	font-size: var(--font-size-kicker);
	letter-spacing: var(--tracking-kicker);
	text-transform: uppercase;
	color: var(--color-blue);
	margin-top: var(--space-3);
}

.odx-hero-main__display {
	display: block;
	font-size: var(--font-size-display);
	font-weight: 500;
	line-height: var(--line-height-tight);
	text-wrap: balance;
	max-width: 12ch;
}

/* live: #div_block-8-24 align-items:flex-start;margin-left:35px;max-width:1300px;padding-right:50px */
.odx-hero-main__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	margin-left: 0;
	padding-right: 0;
	gap: 0;
}

/* live: #text_block-10-24 font-size:1em;font-family:'Poppins';text-align:left;max-width:300px */
.odx-hero-main__text {
	font-family: 'Poppins', var(--font-sans);
	font-size: 1em;
	text-align: left;
	max-width: 100%;
	margin-bottom: 0;
}

/* Book Now geometry lives on .odx-btn--book (components.css) */

/* ── 2. REVIEWS — section-3-24 ───────────────────────────────
   Full-width section. Inner: div_block-45-24 (full width bg image, flex-end).
   Panel: div_block-23-24 (sky-blue, 55% wide, border-bottom-left-radius:150px).
   Source: #div_block-45-24 / #div_block-23-24 / #headline-31-24
   ─────────────────────────────────────────────────────────── */
.odx-hero-reviews {
	display: block;
	text-align: center;
	text-shadow: 0 0 4px var(--color-blue);
}

/* live: #div_block-45-24 bg-position:-400px 60%;flex flex-end;width:100% */
.odx-hero-reviews__bg {
	background-image: url('../images/sections/reviews-bg.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: -400px 60%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
}

/* live: #div_block-23-24 bg:#84c3e3;pt:75px;pb:75px;pl:25px;pr:0;width:55%;border-bottom-left-radius:150px */
.odx-hero-reviews__panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-color: var(--color-blue-light);
	padding-top: 75px;
	padding-bottom: 75px;
	padding-left: 25px;
	padding-right: 0;
	width: 55%;
	z-index: 2;
	border-bottom-left-radius: 150px;
}

/* live: #headline-31-24 color:#ffffff;font-size:1.7em;font-weight:500 */
.odx-hero-reviews__heading {
	color: var(--color-white);
	font-size: 1.7em;
	font-weight: 500;
	line-height: 1.3;
	margin-bottom: 0;
}

.odx-hero-reviews__heading a {
	color: var(--color-navy);
	text-decoration: none;
}

/* live: #text_block-41-24 color:#ffffff;mb:25px;pl:50px;pr:50px;max-width:550px;font-size:1em */
.odx-hero-reviews__text {
	color: var(--color-white);
	margin-bottom: 25px;
	padding-left: 50px;
	padding-right: 50px;
	max-width: 550px;
	font-size: 1em;
}

.odx-hero-reviews__text a {
	color: var(--color-navy);
}

/* live: link_button-43-24 margin handled by .odx-btn--white itself */
.odx-hero-reviews .odx-btn--white {
	margin-top: 0;
}

/* ── 3. ANNOUNCEMENT BAR — section-180-24 ───────────────────
   bg:#404040. Inner-wrap: padding:20px 50px, max-width:1280px (via .odx-container).
   Mapped to flat DOM: .odx-announcement__grid.odx-container — no extra wrapper div.
   Source: #section-180-24 / #div_block-49-24 / #headline-56-24
   ─────────────────────────────────────────────────────────── */
.odx-section--announcement {
	background-color: var(--color-charcoal);
	text-align: center;
}

/* live: inner-wrap max-width:100% (full-width, not capped at 1280px) */
.odx-section--announcement .odx-container {
	max-width: 100%;
}

.odx-section--announcement .odx-container {
	padding: var(--section-pad-y) 50px;   /* was 20px shell + 50px child margins */
}

/* live: #div_block-49-24 grid;2-col;gap:50px;text-align:left */
.odx-announcement__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(200px, 1fr));
	grid-column-gap: 50px;
	grid-row-gap: 0;
	align-items: center;
	justify-items: center;
	text-align: left;
	width: 100%;
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
}

/* rhythm folded into the shell padding — child margins zeroed */
.odx-announcement__left {
	width: 100%;
	margin-top: 0;
	margin-bottom: 0;
}

/* live: #headline-56-24 color:#ffffff;font-size:1.7em;font-weight:500 */
.odx-announcement__heading {
	color: var(--color-white);
	font-size: 1.7em;
	font-weight: 500;
	line-height: 1.6;
	margin-bottom: 0;
}

.odx-announcement__heading a {
	color: var(--color-white);
	text-decoration: none;
}

/* live: #div_block-51-24 display:flex;align-items:center */
.odx-announcement__right {
	display: flex;
	align-items: center;
	margin-top: 0;
	margin-bottom: 0;
}

/* live: #text_block-54-24 color:#ffffff;font-size:1em */
.odx-section--announcement p {
	color: var(--color-white);
	font-size: 1em;
	margin: 0;
	line-height: 1.6;
	font-family: 'Merriweather', serif;
}

.odx-section--announcement a:not(.odx-btn) {
	color: var(--color-white);
}

/* ══════════════════════════════════════════════════════════════
   SERVICE ZIGZAG — refactored pilot (Invisalign)
   Clean 4-node layout: section > frame > (media | panel).
   Replaces the 6-node .odx-split--invisalign scaffold:
     · offset folded from .odx-split-inner into section padding
     · empty spacer + content-inner nodes eliminated
     · decorative divider is a semantic <hr>, not an Oxygen div
   Values verified 1:1 against live via `node ui-clone.js diff`.
   ══════════════════════════════════════════════════════════════ */
.odx-service {
	/* min-height, not height: the 490px box is the design target, not a cap —
	   long panel copy (e.g. Dental Implants) grows the section instead of
	   getting clipped. */
	min-height: calc(490px + 2 * var(--section-pad-y));
	overflow: visible;
}

/* 20% of 1440 = the 288px left inset the block sits at */
.odx-service--invisalign {
	padding: var(--section-pad-y) 0 var(--section-pad-y) 20%;
}

/* frame = the inset 1152×490 block: two equal columns, carries the
   background image (left) + charcoal fill + bottom-left curve */
.odx-service__frame {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 490px;   /* target height; row grows with panel content, not locked to it */
	background-repeat: no-repeat;
	background-size: contain;
}

.odx-service--invisalign .odx-service__frame {
	background-image: url('../images/sections/invisalign.jpg');
	background-color: var(--color-charcoal);
	border-bottom-left-radius: 150px;
}

/* media = left column; empty at desktop so the frame image shows through */
.odx-service__media {
	min-width: 0;
}

/* panel = right column; charcoal overlay + top-left curve.
   padding 77/96 carves the 403px text column out of the 576px cell */
.odx-service__panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 0;
	background-color: var(--color-charcoal);
	padding: 75px 96px 75px 77px;
}

.odx-service--invisalign .odx-service__panel {
	border-top-left-radius: 150px;
}

/* ── Dental Implants: same side as Invisalign (media left / panel right),
   plus a 54px top bias on the content to match live #div_block-365-24 ── */
.odx-service--dental-implants {
	padding: var(--section-pad-y) 0 var(--section-pad-y) 20%;
}

.odx-service--dental-implants .odx-service__frame {
	background-image: url('../images/sections/dental-implants.jpg');
	background-color: var(--color-charcoal);
	border-bottom-left-radius: 150px;
}

.odx-service--dental-implants .odx-service__panel {
	border-top-left-radius: 150px;
	padding: 75px 98px 75px 75px;
}

/* live biases the implants content ~54px down from centre (#div_block-365-24) */
.odx-service--dental-implants .odx-service__title {
	margin-top: 54px;
}

/* ── General Dentistry: MIRRORED (panel left / media right),
   bottom-right curve, content right-aligned ── */
.odx-service--gen-dentistry {
	padding: var(--section-pad-y) 20% var(--section-pad-y) 0;
}

.odx-service--gen-dentistry .odx-service__frame {
	background-image: url('../images/sections/general-dentistry.jpg');
	background-size: 50% 100%;
	background-position: 100% 0%;
	border-bottom-right-radius: 150px;
}

.odx-service--gen-dentistry .odx-service__panel {
	background-color: var(--color-charcoal);
	align-items: flex-end;
	text-align: right;
	padding: 75px 115px 75px 58px;
}

.odx-service--gen-dentistry .odx-service__title,
.odx-service--gen-dentistry .odx-service__rule {
	align-self: flex-end;   /* shrink-fit / divider to the right edge */
}

.odx-service__title {
	align-self: flex-start;   /* shrink to text width, like live (not full column) */
	margin: 0;
	color: var(--color-blue);
	font-size: 2em;
	font-weight: 500;
	line-height: 1.3;
}

/* heading link (Dental Implants) inherits the blue, no underline */
.odx-service__title a {
	color: inherit;
	text-decoration: none;
}

/* decorative divider — live: 70×1 bar in #6b6b6b, 20px margins */
.odx-service__rule {
	width: 70px;
	height: 1px;
	margin: 20px 0;
	border: 0;
	background-color: var(--color-divider);
}

.odx-service__text {
	margin: 0;
	color: var(--color-white);
	line-height: 1.6;
	font-family: 'Merriweather', serif;
}

/* in-text links stay readable + distinct on the charcoal panel */
.odx-service__text a {
	color: var(--color-blue-light);
}

/* button keeps intrinsic width (don't stretch in the flex column).
   Alignment is variant-scoped (mutually exclusive) to avoid order collisions. */
.odx-service .odx-btn--service {
	text-align: center;
}

.odx-service--invisalign .odx-btn--service,
.odx-service--dental-implants .odx-btn--service {
	align-self: flex-start;
}

.odx-service--gen-dentistry .odx-btn--service {
	align-self: flex-end;
}

/* ── .odx-service responsive (pilot) ─────────────────────────
   ≤1280 tighten offset · ≤991 tighten more · ≤767 stack image over panel
   ─────────────────────────────────────────────────────────── */
@media ( max-width: 1280px ) {
	.odx-service--invisalign,
	.odx-service--dental-implants {
		padding-left: 15%;
	}
	.odx-service--gen-dentistry {
		padding-right: 15%;
	}
}

@media ( max-width: 991px ) {
	/* content can never clip in the tight band — height released, offsets kept */
	.odx-service {
		height: auto;
		min-height: 640px;
		overflow: visible;
	}
	.odx-service--invisalign,
	.odx-service--dental-implants {
		padding-left: 8%;
	}
	.odx-service--gen-dentistry {
		padding-right: 8%;
	}
	.odx-service__panel {
		padding: 60px 40px 60px 48px;
	}
	.odx-service--gen-dentistry .odx-service__panel {
		padding: 60px 48px 60px 40px;
	}
	/* implants top bias dropped in the tight band (desktop art-direction quirk) */
	.odx-service--dental-implants .odx-service__title {
		margin-top: 0;
	}
	.odx-service__title {
		font-size: 1.6em;
	}
}

/* stack point raised 767 → 860: the 768–860 band clipped the 50% panel column */
@media ( max-width: 860px ) {
	.odx-service {
		height: auto;
		min-height: 0;
		overflow: visible;
		padding: 0 !important;   /* drop the desktop offset on every variant */
	}
	.odx-service__frame {
		grid-template-columns: 1fr;
		grid-template-rows: 300px auto;
		border-radius: 0;
	}
	.odx-service__media {
		grid-row: 1;             /* image always on top when stacked */
		background-size: cover;
		background-position: center 20%;
	}
	/* left-align every stacked panel — beats the gen-dentistry mirror (0,2,0) */
	.odx-service__panel,
	.odx-service--gen-dentistry .odx-service__panel {
		grid-row: 2;
		border-radius: 0 !important;
		align-items: flex-start;
		text-align: left;
		padding: 40px 25px 50px !important;
	}
	.odx-service--dental-implants .odx-service__title {
		margin-top: 0;   /* drop the desktop top-bias when stacked */
	}
	.odx-service--invisalign .odx-service__media {
		background-image: url('../images/sections/invisalign.jpg');
		background-position: 0% 20%;   /* left-anchored when stacked */
	}
	.odx-service--gen-dentistry .odx-service__media {
		background-image: url('../images/sections/general-dentistry.jpg');
	}
	.odx-service--dental-implants .odx-service__media {
		background-image: url('../images/sections/dental-implants.jpg');
	}
	/* left-align content when stacked, overriding the mirrored/right variants */
	.odx-service__title,
	.odx-service__rule,
	.odx-service .odx-btn--service,
	.odx-service--gen-dentistry .odx-service__title,
	.odx-service--gen-dentistry .odx-service__rule,
	.odx-service--gen-dentistry .odx-btn--service {
		align-self: flex-start;
	}
	.odx-service__title {
		font-size: 1.7em;
	}
}

/* ── 5. NEW PATIENT — section-916-24 ────────────────────────
   bg: var(--color-blue-light) (#84c3e3).
   __inner: full-width, padding:20px 50px (mirrors ct-section-inner-wrap).
   __grid:  max-width:1280px centred, 2-col, column-gap:50px (mirrors div_block-917-24).
   Source: #section-916-24 / #div_block-917-24 / #headline-919-24
   ─────────────────────────────────────────────────────────── */
.odx-section--new-patient {
	background-color: var(--color-blue-light);
	text-align: center;
	text-shadow: 0 0 4px var(--color-blue);
}

/* live: ct-section-inner-wrap — full-width, flex col, align-items:center, padding:20px 50px */
.odx-new-patient__inner {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--section-pad-y) 50px;   /* was 20px shell + 50px child margins */
	box-sizing: border-box;
}

/* live: #div_block-917-24 — grid;2-col;column-gap:50px;max-width:1280px */
.odx-new-patient__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(200px, 1fr));
	column-gap: 50px;
	align-items: center;
	text-align: left;
	width: 100%;
	max-width: var(--container-max);
}

/* live: #div_block-918-24 — flex col;align-items:flex-start;mt:50px;mb:50px */
.odx-new-patient__left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	margin-top: 0;
	margin-bottom: 0;
}

/* live: #headline-919-24 — color:#fff;font-size:27.2px (1.7em);font-weight:500;line-height:1.6;margin:0 */
.odx-new-patient__heading {
	color: var(--color-white);
	font-size: 1.7em;
	font-weight: 500;
	line-height: 1.6;
	margin: 0;
}

/* live: #code_block-920-24 — w:70px;h:0.5px;bg:#6b6b6b;mt:20px;mb:20px;color inherits section #404040 */
.odx-new-patient__divider {
	display: block;
	width: 70px;
	height: 0.5px;
	max-height: 0.5px;
	border: none;
	background-color: var(--color-divider);
	color: rgb(64, 64, 64);
	margin: 20px 0;
	align-self: flex-start;
	overflow: visible;
}

/* live: #div_block-921-24 — flex col;align-items:flex-start;mt:0;mb:0 (full col height) */
.odx-new-patient__right {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
}

/* live: #text_block-922-24 — color:#fff;font-size:1em;margin:0 */
.odx-section--new-patient p {
	color: var(--color-white);
	font-size: 1em;
	margin: 0;
}

/* inline links inside body text — navy for legibility on the light blue */
.odx-section--new-patient a:not(.odx-btn) {
	color: var(--color-navy);
}

/* the section glow must not bleed into the pill CTAs */
.odx-hero-reviews .odx-btn,
.odx-section--new-patient .odx-btn {
	text-shadow: none;
}

/* live: #link_button-928-24 — bg:#fff;color:#28b2f5;padding:10px 25px;border-radius:50px;
   display:block;text-align:center;text-transform:none;mt:50px */
/* keeps "OUR NEW PATIENT EXPERIENCE" on one line; "LEARN MORE ABOUT" wraps above it */
.odx-btn__phrase {
	white-space: nowrap;
}

.odx-btn--new-patient {
	display: block;
	background-color: var(--color-white);
	border: 1px solid var(--color-white);
	color: var(--color-blue);
	padding: 10px 25px;
	text-align: center;
	text-transform: none;
	margin-top: 50px;
}

/* ── 6. MEET OUR DENTISTS — section-6-24 ────────────────────
   Section: flex row, align-items:flex-end.
   Navy text block (margin-top:75px), ~53% width. Photo block ~47%, bleeds right.
   Arrow link sits inside navy block below, margin-top:-100px, aligns right.
   Source: #div_block-114-24 / #div_block-118-24 / #image-116-24 / #div_block-135-24
   ─────────────────────────────────────────────────────────── */
.odx-section--meet-dentists {
	text-align: center;
	overflow: visible;
}

/* live: ct-section-inner-wrap display:flex;flex-direction:row;align-items:flex-end;max-width:100% */
.odx-meet__row {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: center;
	max-width: 100%;
	width: 100%;
}

/* live: #div_block-114-24 flex:0 1 auto;width:52.94%;mt:75px;bg:#182f6c */
.odx-meet__text-block {
	flex: 0 1 auto;
	width: 52.94%;
	margin-top: 75px;
	background-color: var(--color-navy);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* live: #div_block-118-24 align-items:flex-start;text-align:left;color:#fff;mt:50px;mb:50px;width:85% */
.odx-meet__text-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	color: var(--color-white);
	margin-top: 50px;
	margin-bottom: 50px;
	width: 85%;
	margin-left: auto;
	margin-right: auto;
}

/* live: #headline-119-24 color:#fff;font-size:32px;font-weight:500;line-height:41.6px */
.odx-meet__heading {
	font-size: 32px;
	font-weight: 500;
	color: var(--color-white);
	line-height: 1.3;
	margin: 0;
}

/* live: #code_block-120-24 width:70px;height:0.5px;max-height:0.5px;bg:#6b6b6b;mt:20px;mb:20px;flex:1 0 auto */
.odx-meet__divider {
	width: 70px;
	height: 0;
	max-height: 0.5px;
	border: none;
	border-top: 0.5px solid var(--color-divider);
	background-color: var(--color-divider);
	flex: 0 0 auto;
	margin-top: 20px;
	margin-bottom: 20px;
}

/* live: #text_block-121-24 padding-right:162px (25% of 648px); font-size:16px */
.odx-meet__text-inner p {
	color: var(--color-white);
	padding-right: 25%;
	font-size: 1em;
	line-height: 1.6;
	margin: 0;
}

.odx-meet__text-inner a {
	color: var(--color-blue);
}

/* live: #div_block-115-24 flex:0 1 auto;width:47.06%;align-self:auto */
.odx-meet__photo-block {
	flex: 0 1 auto;
	width: 47.06%;
	overflow: visible;
	align-self: auto;
}

/* live: #image-116-24 width:100%;max-width:100%;display:block */
.odx-meet__photo-img {
	width: 100%;
	max-width: 100%;
	height: auto;
	display: block;
}

/* live: #div_block-135-24 — inside navy block. width:100%;flex-end;margin-top:-100px */
.odx-meet__arrow-wrap {
	width: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	text-align: right;
	margin-top: -100px;
}

/* live: link-132-24 — 150×150px;bg:#167bd5;flex-center;padding:8px 16px */
.odx-meet__cta-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 150px;
	height: 150px;
	background-color: #167bd5;
	padding: 8px 16px;
	transition: background-color 0.3s;
	text-decoration: none;
}

.odx-meet__cta-arrow:hover {
	background-color: var(--color-blue);
}

/* live: fancy_icon-133-24 — 50×50px;border-radius:50%;mr:8px;color:#fff */
.odx-meet__arrow-icon {
	width: 50px;
	height: 50px;
	stroke: var(--color-white);
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	border-radius: 50%;
	margin-right: 8px;
}

/* ── 7. PRICING — section-7-24 ──────────────────────────────
   3-col grid: exam card spans 2 cols, insurance card spans 1 col.
   Exam card: bg:#182f6c (NAVY). Internal flex row: info LEFT (65%), price+btn RIGHT.
   Price side: border-left:3px solid #28b2f5; padding:30px 0 30px 30px; ml:30px.
   Book Now: white bg, blue text.
   Insurance card: bg:#1465b8; padding:100px 50px 78px; border-left-radius:10px.
   Source: #div_block-146-24 / #div_block-153-24 / #div_block-154-24
   ─────────────────────────────────────────────────────────── */
.odx-section--pricing {
	text-align: right;
}

/* live: ct-section-inner-wrap grid 3-col;pt:50px;align-items:end;max-width:100% */
.odx-pricing__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(200px, 1fr));
	grid-column-gap: 0;
	grid-row-gap: 0;
	padding-top: var(--section-pad-y-md);   /* one step tighter: abuts the photo bleed */
	align-items: end;
	max-width: 100%;
}

/* live: #div_block-145-24 grid-col:span2; display:flex;width:90%;justify-content:center — outer shell is 864px (90% of the 960px span-2 cell), leaving the white gap before the blue card */
.odx-pricing__exam-card {
	grid-column: span 2;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: 90%;
	color: rgb(64, 64, 64);
}

/* live: #div_block-146-24 bg:#182f6c;pt:50px;pb:50px;flex-row;center;width:100% — fills the 864px shell (the 90% narrowing lives on .odx-pricing__exam-card) */
/* Note: color intentionally NOT set here (live div_block-146-24 inherits rgb(64,64,64) from body).
   White text on each child element is set explicitly. */
.odx-pricing__exam-inner {
	background-color: var(--color-navy);
	padding-top: 50px;
	padding-bottom: 50px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
}

/* live: #div_block-584-24 flex-row;align-items:center */
.odx-pricing__exam-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

/* live: #div_block-148-24 display:flex;flex-col;align-items:flex-start;width:65% — left-aligns heading flush with body text */
.odx-pricing__exam-info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 65%;
}

/* live: #headline-149-24 color:#ffffff;font-weight:400;font-size:32px;padding-bottom:15px;text-align:center
   Renders flush-left because the exam-info column uses align-items:flex-start (heading shrinks to content). */
.odx-pricing__exam-info .odx-pricing__title {
	color: var(--color-white);
	font-weight: 400;
	font-size: 32px;
	line-height: 1.6;
	padding-bottom: 15px;
	margin-bottom: 0;
}

.odx-pricing__exam-info p {
	color: var(--color-white);
	font-size: 1em;
	text-align: left;
	margin: 0;
}

/* live: #div_block-153-24 border-left:3px solid #28b2f5;pt:30px;pb:30px;pl:30px;ml:30px;text-center */
.odx-pricing__exam-price {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	border-left: 3px solid var(--color-blue);
	padding-top: 30px;
	padding-bottom: 30px;
	padding-left: 30px;
	margin-left: 30px;
}

/* live: #text_block-163-24 color:#ffffff;font-size:32px */
.odx-pricing__price-amount {
	color: var(--color-white);
	font-size: 32px;
	margin: 0;
	font-family: var(--font-sans);
}

/* colour-only override: hover is WHITE bg + navy text (differs from global .odx-btn--primary:hover) */
.odx-pricing__exam-price .odx-btn--primary:hover {
	background-color: var(--color-white);
	border-color: var(--color-white);
	color: var(--color-navy);
}

/* live: #image-271-24 height:50px;width:~134px;margin-top:15px — icon below text in exam info */
.odx-pricing__exam-icon {
	height: 50px;
	width: auto;
	max-width: 134px;
	margin-top: 15px;
	display: block;
}

/* live: #div_block-154-24 bg:#1465b8;pt:100px;pb:78px;px:50px;border-left-radius:10px — spans 1 col */
.odx-pricing__insurance-card {
	grid-column: span 1;
	background-color: var(--color-blue-mid);
	padding-top: 100px;
	padding-bottom: 78px;
	padding-left: 50px;
	padding-right: 50px;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	color: var(--color-white);
}

.odx-pricing__insurance-card p {
	color: var(--color-white);
	font-size: 1em;
	margin-top: 30px;
	margin-bottom: 30px;
}

.odx-pricing__insurance-card a:not(.odx-btn) {
	color: var(--color-blue-light);
}

/* See All — padding now inherited from .odx-btn--white (shared pill box) */

/* live: #image-270-24 width:50px;height:50px */
.odx-pricing__icon {
	display: block;
	width: 50px;
	height: 50px;
}

/* Insurance inner: mirrors #div_block-590-24 flex column center */
.odx-pricing__insurance-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* ── 8. FLEXIBLE PAYMENT — section-169-24 ────────────────────
   2-col grid: LEFT text (right-aligned, margin-left:110px), RIGHT illustration.
   Heading: color:#182f6c, font-size:2em.
   Button: blue fill #28b2f5 (NOT outline). padding:0 25px on image.
   Source: #div_block-170-24 / #div_block-173-24 / #div_block-171-24 / #headline-174-24
   ─────────────────────────────────────────────────────────── */
.odx-section--payment {
	text-align: left;
}

/* live: ct-section-inner-wrap grid 2-col;gap:20px;justify-items:center;align-items:center */
.odx-payment__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(200px, 1fr));
	grid-column-gap: 20px;
	grid-row-gap: 20px;
	justify-items: center;
	align-items: center;
	width: 100%;
}

/* live: #div_block-170-24 margin-left:110px;align-items:flex-end;text-align:right */
.odx-payment__text {
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	margin-left: 110px;
	text-align: right;
}

/* live: #div_block-173-24 align-items:flex-start;text-align:left;width:100% */
.odx-payment__text-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	width: 100%;
	gap: var(--space-4);
}

/* live: #headline-174-24 color:#182f6c;font-size:2em;font-weight:500;line-height:1.3 */
.odx-payment__heading {
	color: var(--color-navy);
	font-size: 2em;
	font-weight: 500;
	line-height: 1.3;
	margin-bottom: 0;
	font-family: var(--font-sans);
}

/* live: #text_block-176-24 width:70%;font-size:1em */
.odx-payment__body {
	width: 70%;
	font-size: 1em;
	margin: 0;
}

/* live: link_button-177-24 bg:#28b2f5;px:30px;mt:23px;uppercase;Poppins */
.odx-payment__text-inner .odx-btn--primary {
	margin-top: 23px;
}

/* live: #div_block-171-24 padding:0 25px */
.odx-payment__image {
	padding: 0 25px;
}

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

/* ── GENERIC HOME SECTION WRAPPERS ──────────────────────────
   Semantic markers matching live Oxygen class home-services-section-right
   ─────────────────────────────────────────────────────────── */
.odx-home-section {
	width: 100%;
}

.odx-section--services {
	overflow: hidden;
}

.odx-main--home {
	padding-top: 0;
	padding-bottom: 0;
}

/* ── RESPONSIVE — 1280px ─────────────────────────────────────
   Source: @media (max-width:1280px) rules in live-oxygen-24.css
   ─────────────────────────────────────────────────────────── */
@media ( max-width: 1280px ) {
	/* live: #section-2-24 height:32em */
	.odx-hero-main {
		min-height: 32em;
	}

	/* live: #div_block-8-24 padding-left:20px;margin-left:0 */
	.odx-hero-main__content {
		padding-left: 20px;
		margin-left: 0;
	}

	/* live: link_button hover intermediate state at 1280px */
	.odx-btn--primary:hover {
		background-color: var(--color-blue-light);
		border-color: var(--color-blue-light);
		color: var(--color-navy);
	}

	/* live: #div_block-135-24 margin-top:0 at 1280px (arrow is inside navy block) */
	.odx-meet__arrow-wrap {
		margin-top: 0;
	}

	/* live: section container padding at 1280px */
	.odx-section--announcement .odx-container {
		padding-left: 50px;
		padding-right: 50px;
	}

	.odx-new-patient__inner {
		padding-left: 50px;
		padding-right: 50px;
	}

	/* live: #div_block-154-24 tighter padding at 1280px */
	.odx-pricing__insurance-card {
		padding-bottom: 75px;
		padding-left: 20px;
		padding-right: 20px;
	}

	/* live: #div_block-170-24 margin-left:19px at 1280px */
	.odx-payment__text {
		margin-left: 19px;
	}
}

/* ── RESPONSIVE — 991px ──────────────────────────────────────
   Source: @media (max-width:991px) rules in live-oxygen-24.css
   ─────────────────────────────────────────────────────────── */
@media ( max-width: 991px ) {
	/* live: section-2-24 height:30em;bg-position:0% -12px */
	.odx-hero-main {
		min-height: 30em;
	}

	/* below widescreen the column spans the full width, left-aligned, and the
	   text returns to the live 300px measure */
	.odx-hero-main__inner {
		flex: 1;
		max-width: 100%;
		align-items: flex-start;
	}

	.odx-hero-main__headline,
	.odx-hero-main__content {
		min-width: 0;
		max-width: 100%;
	}

	.odx-hero-main__text {
		max-width: 300px;
	}

	/* live: #div_block-45-24 bg-position:-300px 0% at 991px */
	.odx-hero-reviews__bg {
		background-position: -300px 0%;
	}

	/* live: #div_block-23-24 width:50%;padding-left:0 at 991px */
	.odx-hero-reviews__panel {
		width: 50%;
		padding-left: 0;
	}

	.odx-section--announcement .odx-container {
		padding: var(--section-pad-y-md) 35px;
	}

	/* live: #div_block-49-24 collapses to single column at 991px */
	.odx-announcement__grid {
		display: flex;
		flex-direction: column;
	}

	/* live: #div_block-50-24 margin-bottom:0 at 991px */
	.odx-announcement__left {
		margin-bottom: 0;
	}

	.odx-new-patient__inner {
		padding: var(--section-pad-y-md) 35px;
	}

	/* live: #section-6-24 flex-direction:column-reverse at 991px */
	.odx-meet__row {
		flex-direction: column-reverse;
	}

	.odx-meet__text-block {
		margin-top: 0;
		align-items: flex-start;
		text-align: left;
		width: 100%;
	}

	.odx-meet__photo-block {
		width: 100%;
		min-height: 350px;
	}

	.odx-meet__photo-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		margin-left: 0;
	}

	/* live: #div_block-135-24 margin-top:-100px at 991px (arrow inside navy block) */
	.odx-meet__arrow-wrap {
		margin-top: -100px;
	}

	/* live: pricing inner padding at 991px */
	.odx-pricing__exam-inner {
		padding-left: 13px;
		padding-right: 25%;
		padding-top: 35px;
		padding-bottom: 35px;
	}

	/* live: #div_block-154-24 reduced vertical padding; no bottom-left radius at 991px */
	.odx-pricing__insurance-card {
		padding-top: 50px;
		padding-bottom: 50px;
		border-bottom-left-radius: 0;
	}

	.odx-section--payment {
		padding-top: var(--section-pad-y-md);
		padding-bottom: var(--section-pad-y-md);
	}
}

/* ── RESPONSIVE — 767px ──────────────────────────────────────
   Source: @media (max-width:767px) rules in live-oxygen-24.css
   ─────────────────────────────────────────────────────────── */
@media ( max-width: 767px ) {
	/* live: #section-2-24 bg:Hero-mob;height:37em;bg-position:0 0;text-align:left.
	   The portrait mobile PNG is now swapped in via <source> in <picture>;
	   here we just anchor its crop to the top (former bg-position:0 0). */
	.odx-hero-main {
		min-height: 37em;
	}
	.odx-hero-main__img {
		object-position: 50% 0;   /* centred crop; was 0 0 (left-anchored) */
	}

	/* live: ct-section-inner-wrap pt:125px;pb:50px;justify-content:flex-start */
	.odx-hero-main__inner {
		padding-top: 125px;
		padding-bottom: 50px;
		justify-content: flex-start;
	}

	/* on the dark portrait photo: off-white display, sky-blue kicker */
	.odx-hero-main__headline {
		color: var(--color-off-white);
	}

	.odx-hero-main__kicker {
		color: var(--color-navy);
	}

	/* the inner carries the single 25px gutter for headline + content alike,
	   so the content must not add its own on top of it */
	.odx-hero-main__inner {
		padding-left: 25px;
		padding-right: 25px;
	}

	.odx-hero-main__content {
		margin-left: 0;
		margin-top: 35px;
		padding-left: 0;
	}

	/* live: #text_block-10-24 color:#ffffff at 767px */
	.odx-hero-main__text {
		color: var(--color-white);
	}

	/* live: link_button-11-24 bg:#182f6c at 767px (dark on mobile) */
	.odx-hero-main .odx-btn--primary {
		background-color: var(--color-navy);
		border-color: var(--color-navy);
	}

	/* live: #div_block-23-24 width:100%;border-radius:0 at 767px */
	.odx-hero-reviews__panel {
		width: 100%;
		border-radius: 0;
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding-left: 25px;    /* symmetric gutters — the panel centres its content */
		padding-right: 25px;
	}

	/* Mobile CTAs all hang off the right edge of their container. Every one of
	   those containers carries a 25px right gutter — one step wider than the
	   header's 20px, so the buttons clear the hamburger's line. */
	.odx-hero-main__content .odx-btn,
	.odx-service__panel .odx-btn,
	.odx-new-patient__right .odx-btn {
		align-self: flex-end;
		margin-left: auto;
		margin-right: 0;
	}

	/* these stay centred in their card */
	.odx-hero-reviews__panel .odx-btn,
	.odx-pricing__insurance-inner .odx-btn,
	.odx-payment__text-inner .odx-btn {
		align-self: center;
		margin-left: auto;
		margin-right: auto;
	}

	/* price + Book Now travel together: centred on each other inside a
	   shrink-to-fit box that hangs off the right edge */
	.odx-pricing__exam-price {
		width: auto;
		margin-left: auto;
		justify-self: end;
		align-self: end;
		align-items: center;
		text-align: center;
	}

	/* the new-patient CTA is a full-width block at desktop — shrink it to its
	   text so there is a right edge to align */
	.odx-new-patient__right .odx-btn {
		display: inline-block;
		width: auto;
	}

	/* Announcement: 1-col at mobile */
	.odx-announcement__grid {
		flex-direction: column;
		display: flex;
	}

	.odx-section--announcement .odx-container {
		padding: var(--section-pad-y-sm) 25px;
	}

	.odx-new-patient__inner {
		padding: var(--section-pad-y-sm) 25px;
	}

	.odx-announcement__left,
	.odx-announcement__right {
		margin-top: 0;
		margin-bottom: 0;
		width: 100%;
	}

	.odx-announcement__left {
		margin-bottom: 25px;
	}

	/* New patient: 1-col at mobile */
	.odx-new-patient__grid {
		display: flex;
		flex-direction: column;
	}

	.odx-new-patient__left,
	.odx-new-patient__right {
		width: 100%;
		margin-top: 0;
		margin-bottom: 0;
	}

	.odx-new-patient__left {
		margin-bottom: 25px;
	}

	/* Meet dentists at 767px — 25/25 gutters + full measure, matching the
	   .odx-service panels (the 85% inner + 25% text inset read as "smaller"). */
	.odx-meet__text-block {
		align-items: flex-start;
		text-align: left;
		padding-left: 25px;
		padding-right: 25px;
		flex-direction: column;
	}

	.odx-meet__text-inner {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	.odx-meet__text-inner p {
		padding-right: 0;
	}

	.odx-meet__photo-img {
		border-top-left-radius: 50%;
	}

	/* live: #div_block-115-24 background-color:#84c3e3 at 767px */
	.odx-meet__photo-block {
		background-color: var(--color-blue-light);
		width: 100%;
	}

	/* live: arrow inside navy block stays accessible at mobile */
	.odx-meet__arrow-wrap {
		margin-top: 0;
	}

	/* pricing inner at 767px: full-width, 25/25 to match the .odx-service panels
	   (was 20px / 20% — the percentage inset shrank the measure) */
	.odx-pricing__exam-inner {
		width: 100%;
		padding-left: 25px;
		padding-right: 25px;
		padding-top: 35px;
		padding-bottom: 35px;
	}

	/* Pricing: 1-col at mobile */
	.odx-pricing__grid {
		display: flex;
		flex-direction: column;
		padding-top: var(--section-pad-y-sm);
	}

	.odx-pricing__exam-card {
		width: 100%;
		grid-column: span 1;
	}

	/* live: #div_block-584-24 grid 2-col at mobile */
	.odx-pricing__exam-row {
		display: grid;
		grid-template-columns: repeat(2, minmax(200px, 1fr));
		grid-column-gap: 20px;
	}

	.odx-pricing__exam-info {
		width: 100%;
	}

	.odx-pricing__insurance-card {
		width: 100%;
		border-radius: 0;
		padding-top: 50px;
		padding-bottom: 50px;
		padding-left: 25px;
		padding-right: 25px;
	}

	/* Payment: 1-col at mobile */
	.odx-payment__grid {
		display: grid;
		grid-template-columns: repeat(1, minmax(100%, 1fr));
		justify-items: left;
		align-items: end;
	}

	.odx-payment__text {
		margin-left: 0;
		width: 100%;
		padding: 0 25px;
	}

	.odx-payment__body {
		width: 90%;
	}

	.odx-payment__image {
		width: 100%;
	}
}

/* ── RESPONSIVE — 479px ──────────────────────────────────────
   Source: @media (max-width:479px) rules in live-oxygen-24.css
   ─────────────────────────────────────────────────────────── */
@media ( max-width: 479px ) {
	/* live: ct-section-inner-wrap pt:75px;pb:35px at 479px */
	.odx-hero-main__inner {
		padding-top: 75px;
		padding-bottom: 35px;
	}

	.odx-hero-main__content {
		padding-left: 0;
		padding-right: 0;
	}

	/* Pricing: stack vertically at 479px */
	.odx-pricing__grid {
		padding-top: 0;
	}

	/* live: #div_block-146-24 flex-col;align-items:flex-start;text-align:left at 479px */
	.odx-pricing__exam-inner {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}

	.odx-pricing__exam-row {
		display: flex;
		flex-direction: column;
	}

	.odx-pricing__exam-price {
		border-left: none;
		padding-left: 0;
		margin-left: auto;   /* keeps the price/button box on the right edge */
		width: auto;
		align-items: center;
		text-align: center;
	}

	/* live: #div_block-135-24 padding-top:75px at 479px */
	.odx-meet__arrow-wrap {
		padding-top: 75px;
	}

	/* live: #image-271-24 margin-bottom:35px at 479px */
	.odx-pricing__exam-icon {
		margin-bottom: 35px;
	}

	/* Payment at 479px — margin-left:20px on a width:100% block pushed the
	   column (and its CTA) 20px past the right edge; gutters go in padding */
	.odx-payment__text {
		margin-left: 0;
		margin-right: 0;
		padding: 35px 25px 0;
	}
}