/*
Theme Name: Manhattan Spine Consultants
Theme URI: https://manhattanspineconsultants.com
Author: Manhattan Spine Consultants
Description: Custom WordPress theme for Manhattan Spine Consultants — Dr. Vikas V. Varma, MD, spine surgery practice in Midtown Manhattan. Ported pixel-for-pixel from the design canvas source (Manhattan Spine Consultants.dc.html): hero, diagnosis index, patient-review carousel, Google reviews, condition/treatment library, ADA accessibility panel, and cookie consent.
Version: 2.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: manhattan-spine-consultants
*/

/* =========================================================================
   Design tokens
   ========================================================================= */
:root {
	--msc-navy: #16283c;
	--msc-navy-deep: #0b1830;
	--msc-navy-hover: #2e5f7a;
	--msc-cream: #f7f5f1;
	--msc-cream-alt: #f2eee6;
	--msc-ivory: #e9e4d8;
	--msc-tan: #d8c9a3;
	--msc-gold: #9a7b3f;
	--msc-ink: #1c2b3a;
	--msc-ink-muted: #4a5563;
	--msc-muted: #7a746a;
	--msc-border: #e2ddd2;
	--msc-border-soft: #cfc9bd;
	--msc-link: #2e5f7a;
	--msc-slate: #8b96a3;
	--msc-footer-text: #b9c2cc;
	--pad-x: 40px;
	--msc-container: calc(90vw - 4in);
	--msc-band-margin: calc(5vw + 2in);
	--msc-font-body: 'Public Sans', sans-serif;
	--msc-font-serif: 'Source Serif 4', serif;
	--msc-font-nav: 'Marcellus', serif;
}

/* =========================================================================
   Base
   ========================================================================= */
html {
	scroll-behavior: auto;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--msc-cream);
	color: var(--msc-ink);
	font-family: var(--msc-font-body);
	font-size: 100%;
	line-height: 1.6;
	min-height: 100vh;
}

a {
	color: var(--msc-link);
	text-decoration: none;
}

a:hover {
	color: var(--msc-ink);
}

img {
	max-width: 100%;
	display: block;
}

::selection {
	background: var(--msc-tan);
}

button {
	font-family: inherit;
}

.msc-container {
	max-width: var(--msc-container);
	margin: 0 auto;
	padding-left: var(--pad-x);
	padding-right: var(--pad-x);
}

.msc-container--narrow {
	max-width: 980px;
}

.msc-container--legal {
	max-width: 860px;
}

.msc-lead {
	font-size: 17px;
	color: var(--msc-ink-muted);
	margin: 0 0 18px;
}

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

@keyframes msc-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

@keyframes msc-fadeup {
	from {
		opacity: 0;
		transform: translateY(14px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

[data-msc-underline="true"] a {
	text-decoration: underline !important;
}

[data-msc-reduce-motion="true"] * {
	animation: none !important;
	transition: none !important;
}

[data-msc-contrast="true"] {
	filter: contrast(1.25) saturate(0.85);
}

.a11y-reading {
	outline: 2px solid var(--msc-tan);
	outline-offset: 2px;
}

/* =========================================================================
   Utility bar
   ========================================================================= */
.msc-utility {
	background: var(--msc-navy);
	color: var(--msc-ivory);
	font-size: 13px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 28px;
	padding: 8px var(--pad-x);
	flex-wrap: wrap;
}

.msc-utility__left {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}

.msc-utility__right {
	display: flex;
	gap: 20px;
	align-items: center;
}

.msc-utility__phone {
	color: var(--msc-ivory);
	text-decoration: none;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.msc-utility__cta {
	color: var(--msc-navy);
	background: var(--msc-tan);
	text-decoration: none;
	font-weight: 600;
	padding: 4px 14px;
	border-radius: 2px;
}

/* =========================================================================
   Header / nav — centered, stacked (logo above nav)
   ========================================================================= */
.msc-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(247, 245, 241, 0.96);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--msc-border);
}

.msc-header__row {
	max-width: var(--msc-container);
	margin: 0 auto;
	padding: 14px var(--pad-x);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	position: relative;
}

.msc-logo {
	text-decoration: none;
	color: var(--msc-ink);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	line-height: 1.15;
}

.msc-logo__name {
	font-family: var(--msc-font-serif);
	font-size: 42px;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.msc-logo__sub {
	font-size: 15px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--msc-muted);
}

.msc-logo img {
	max-height: 78px;
	width: auto;
}

.msc-nav {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

.msc-nav__link {
	text-decoration: none;
	color: var(--msc-ink);
	font-family: var(--msc-font-nav);
	font-size: 20px;
	letter-spacing: 0.04em;
	padding: 12px;
	display: inline-block;
	background: none;
	border: none;
	cursor: pointer;
}

.msc-nav__item {
	position: relative;
}

/* The mega-menu variant is wide enough that anchoring it to its own
   (narrow) trigger button would run it off the edge of the viewport for
   buttons positioned away from center — so it escapes its item's
   positioning context and centers on the full nav bar instead, via
   .msc-nav__item--mega { position: static } below. */
.msc-nav__item--mega {
	position: static;
}

.msc-nav__dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	background: #fff;
	border: 1px solid var(--msc-border);
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(22, 40, 60, 0.12);
	min-width: 240px;
	padding: 8px 0;
	display: none;
	flex-direction: column;
	z-index: 70;
	overflow: hidden;
}

.msc-nav__dropdown--conditions {
	min-width: 260px;
}

.msc-nav__dropdown--treatments {
	min-width: 300px;
}

/* Mega-menu variant: the Conditions/Treatments/Minimally Invasive Surgery
   dropdowns have too many items for one long single-file list, so they lay
   out two items per row instead — with the "View all" link spanning the
   full width above the grid. */
.msc-nav__dropdown--scroll {
	left: 50%;
	transform: translateX(-50%);
	grid-template-columns: repeat(2, 1fr);
	column-gap: 6px;
	width: 980px;
	max-width: calc(100vw - 32px);
	max-height: 80vh;
	padding: 22px 26px;
	overflow-y: auto;
}

.msc-nav__dropdown--scroll a {
	min-width: 0;
}

.msc-nav__dropdown--scroll .msc-nav__dropdown-all {
	grid-column: 1 / -1;
	padding-left: 0;
	margin-bottom: 6px;
}

/* A small anatomical vertebrae icon (assets/images/spine-icon.png), on its
   own light circular badge, in front of every procedure/condition link,
   matching the practice's branding. The PNG is transparent, so the badge
   circle is a separate background-color layer beneath it on the same
   pseudo-element. */
.msc-nav__dropdown--scroll a:not(.msc-nav__dropdown-all) {
	display: flex;
	align-items: center;
	gap: 10px;
}

.msc-nav__dropdown--scroll a:not(.msc-nav__dropdown-all)::before {
	content: '';
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--msc-cream-alt);
	background-image: url("assets/images/spine-icon.png");
	background-size: 66%;
	background-position: center;
	background-repeat: no-repeat;
}

.msc-nav__item.is-open .msc-nav__dropdown {
	display: flex;
}

.msc-nav__item.is-open .msc-nav__dropdown--scroll {
	display: grid;
}

.msc-nav__dropdown a {
	text-decoration: none;
	color: var(--msc-ink);
	font-family: var(--msc-font-nav);
	font-size: 16.5px;
	letter-spacing: 0.03em;
	padding: 11px 22px;
}

.msc-nav__dropdown a:hover {
	background: var(--msc-cream-alt);
}

.msc-nav__dropdown a.msc-nav__dropdown-all {
	font-family: var(--msc-font-body);
	color: var(--msc-link);
	font-size: 13px;
	font-weight: 600;
	padding: 9px 18px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.msc-nav__caret {
	font-size: 13px;
}

/* Hamburger menu — hidden on desktop, only shown/used below the 720px
   breakpoint (see the responsive section) where the full nav no longer
   fits comfortably wrapped under the centered logo. */
.msc-nav-burger {
	display: none;
	position: absolute;
	right: var(--pad-x);
	/* Fixed offset from the row's own top padding, not top:50% — the row
	   grows tall once the nav opens, and 50% of THAT height would drift
	   the button down to the middle of the open menu instead of staying
	   anchored near the logo. */
	top: 14px;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	background: none;
	border: 1px solid var(--msc-border-soft);
	border-radius: 4px;
	cursor: pointer;
	padding: 0;
}

.msc-nav-burger__bar {
	display: block;
	width: 18px;
	height: 2px;
	margin: 0 auto;
	background: var(--msc-ink);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.msc-nav-burger[aria-expanded="true"] .msc-nav-burger__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.msc-nav-burger[aria-expanded="true"] .msc-nav-burger__bar:nth-child(2) {
	opacity: 0;
}

.msc-nav-burger[aria-expanded="true"] .msc-nav-burger__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* =========================================================================
   Section "band" shell — dark, cream, or map bands with rounded corners
   framed by the same outer margin used throughout the redesign
   ========================================================================= */
/* overflow:hidden is deliberately NOT on the shared .msc-band rule — an
   ancestor with any overflow other than visible breaks position:sticky on
   descendants (e.g. the Diagnosis Index's sticky sidebar inside
   .msc-band--white), so it's opted into only by the variants that actually
   need corner-clipping for an absolutely-positioned/bleeding child
   (the dark bands' giant watermark letters, the map band's full-bleed
   iframe). */
.msc-band {
	margin: 16px var(--msc-band-margin);
	border-radius: 4px;
}

.msc-band--dark {
	background: var(--msc-navy);
	position: relative;
	overflow: hidden;
}

.msc-band--white {
	background: #fff;
	border: 1px solid var(--msc-border);
}

/* =========================================================================
   Buttons (shared)
   ========================================================================= */
.msc-btn {
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	padding: 14px 28px;
	border-radius: 2px;
	display: inline-block;
	border: none;
	cursor: pointer;
	font-family: inherit;
	text-align: center;
}

.msc-btn--sm {
	font-size: 14.5px;
	padding: 13px 24px;
}

.msc-btn--gold {
	background: var(--msc-tan);
	color: var(--msc-navy);
}

.msc-btn--gold:hover {
	background: var(--msc-ivory);
	color: var(--msc-navy);
}

.msc-btn--outline-light {
	color: var(--msc-cream);
	border: 1px solid rgba(247, 245, 241, 0.6);
	background: transparent;
}

.msc-btn--outline-light:hover {
	background: rgba(247, 245, 241, 0.12);
	color: var(--msc-cream);
}

.msc-btn--outline-ivory {
	color: var(--msc-ivory);
	border: 1px solid rgba(233, 228, 216, 0.5);
	background: transparent;
}

.msc-btn--outline-ivory:hover {
	background: rgba(233, 228, 216, 0.12);
	color: var(--msc-ivory);
}

.msc-btn--navy {
	background: var(--msc-navy);
	color: var(--msc-cream);
}

.msc-btn--navy:hover {
	background: var(--msc-navy-hover);
	color: var(--msc-cream);
}

.msc-btn--outline-navy {
	color: var(--msc-navy);
	border: 1px solid var(--msc-navy);
	background: transparent;
}

.msc-btn--outline-navy:hover {
	background: var(--msc-navy);
	color: var(--msc-cream);
}

.msc-hero .msc-btn {
	border-radius: 3px;
}

/* =========================================================================
   Hero (home)
   ========================================================================= */
.msc-hero {
	margin: 16px var(--msc-band-margin);
	position: relative;
	height: 640px;
	border-radius: 16px;
	overflow: hidden;
	background: var(--msc-navy);
}

.msc-hero__media {
	position: absolute;
	inset: 0;
}

.msc-hero__media video,
.msc-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	background: var(--msc-navy);
}

/* Auto-fading hero photo slideshow (replaces the old looping video) — all
   slides are stacked absolutely and cross-fade via opacity, cycled by
   theme.js toggling .is-active. */
.msc-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.8s ease;
}

.msc-hero__slide.is-active {
	opacity: 1;
}

.msc-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(12, 22, 34, 0.78) 0%, rgba(12, 22, 34, 0.45) 45%, rgba(12, 22, 34, 0.15) 75%, rgba(12, 22, 34, 0.35) 100%);
	pointer-events: none;
}

.msc-hero__quotes {
	position: absolute;
	top: 96px;
	left: 0;
	right: 0;
	overflow: hidden;
	pointer-events: none;
	padding: 12px 0;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.msc-hero__quotes-track {
	display: flex;
	align-items: baseline;
	width: max-content;
	animation: msc-marquee 38s linear infinite;
	gap: 90px;
	padding-right: 90px;
}

.msc-hero__quotes-track span {
	font-family: var(--msc-font-serif);
	font-weight: 400;
	font-size: 64px;
	line-height: 1.2;
	color: rgba(247, 245, 241, 0.92);
	white-space: nowrap;
	letter-spacing: 0.01em;
	text-shadow: 0 2px 24px rgba(12, 22, 34, 0.45);
}

.msc-hero__foot {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0 calc(var(--pad-x) + 16px) 48px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 32px;
	pointer-events: none;
}

.msc-hero__text {
	max-width: 560px;
	pointer-events: auto;
}

.msc-hero__eyebrow {
	margin: 0 0 12px;
	font-size: 12px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--msc-tan);
	font-weight: 600;
}

.msc-hero__title {
	font-family: var(--msc-font-serif);
	font-size: 42px;
	line-height: 1.1;
	font-weight: 500;
	margin: 0 0 14px;
	color: var(--msc-cream);
}

.msc-hero__desc {
	font-size: 16px;
	color: rgba(247, 245, 241, 0.8);
	max-width: 52ch;
	margin: 0 0 24px;
}

.msc-hero__actions {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

.msc-hero__pill {
	pointer-events: auto;
	text-decoration: none;
	background: var(--msc-navy);
	color: var(--msc-cream);
	font-weight: 600;
	font-size: 15px;
	padding: 14px 26px;
	border-radius: 30px;
	border: 1px solid rgba(247, 245, 241, 0.25);
	white-space: nowrap;
}

.msc-hero__pill:hover {
	background: var(--msc-navy-hover);
	color: var(--msc-cream);
}

/* =========================================================================
   Credential strip — 4-column bordered card
   ========================================================================= */
.msc-credentials {
	background: #fff;
}

.msc-credentials__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.msc-credentials__col {
	padding: 30px 32px;
	border-right: 1px solid var(--msc-border);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.msc-credentials__col:last-child {
	border-right: none;
}

.msc-credentials__tag {
	font-size: 10.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--msc-gold);
	font-weight: 700;
}

.msc-credentials__name {
	font-family: var(--msc-font-serif);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}

.msc-credentials__desc {
	font-size: 13px;
	color: var(--msc-muted);
}

/* =========================================================================
   Testimonial carousel (auto-advancing patient reviews)
   ========================================================================= */
.msc-review-band {
	position: relative;
}

.msc-review-band__quote-mark {
	position: absolute;
	top: -40px;
	left: 28px;
	font-family: var(--msc-font-serif);
	font-size: 300px;
	line-height: 1;
	color: rgba(216, 201, 163, 0.1);
	pointer-events: none;
}

.msc-review-band__grid {
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: 48px;
	padding: 60px 56px;
	align-items: center;
}

.msc-review-band__side {
	display: flex;
	flex-direction: column;
	gap: 22px;
	border-right: 1px solid rgba(216, 201, 163, 0.25);
	padding-right: 48px;
	align-self: stretch;
	justify-content: center;
}

.msc-review-band__eyebrow {
	margin: 0;
	font-size: 12px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--msc-tan);
	font-weight: 600;
}

.msc-review-band__heading {
	margin: 0;
	font-family: var(--msc-font-serif);
	font-size: 34px;
	font-weight: 500;
	color: var(--msc-cream);
	line-height: 1.15;
}

.msc-review-band__rating {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.msc-review-band__rating-num {
	font-family: var(--msc-font-serif);
	font-size: 52px;
	color: var(--msc-tan);
	line-height: 1;
}

.msc-review-band__rating-stars {
	color: var(--msc-tan);
	font-size: 15px;
	letter-spacing: 3px;
}

.msc-review-band__rating-note {
	margin: 0;
	font-size: 13.5px;
	color: var(--msc-slate);
}

.msc-review-band__more {
	color: var(--msc-tan);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.msc-review-band__main {
	display: flex;
	flex-direction: column;
	gap: 26px;
	min-width: 0;
}

.msc-review-band__figure {
	margin: 0;
	min-height: 190px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	animation: msc-fadeup 0.6s ease;
}

.msc-review-band__figure blockquote {
	margin: 0;
	font-family: var(--msc-font-serif);
	font-size: 29px;
	line-height: 1.42;
	color: var(--msc-ivory);
}

.msc-review-band__figure figcaption {
	font-size: 13px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--msc-tan);
	font-weight: 600;
}

.msc-review-band__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.msc-review-band__dots {
	display: flex;
	gap: 10px;
}

.msc-review-band__dot {
	height: 8px;
	border-radius: 4px;
	border: none;
	cursor: pointer;
	padding: 0;
	background: rgba(216, 201, 163, 0.3);
	transition: all 0.3s ease;
	width: 8px;
}

.msc-review-band__dot.is-active {
	background: var(--msc-tan);
	width: 26px;
}

.msc-review-band__arrows {
	display: flex;
	gap: 10px;
}

.msc-review-band__arrow {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: none;
	border: 1px solid rgba(216, 201, 163, 0.4);
	color: var(--msc-tan);
	font-size: 18px;
	cursor: pointer;
	font-family: inherit;
}

.msc-review-band__arrow:hover {
	background: rgba(216, 201, 163, 0.12);
}

/* =========================================================================
   Google reviews marquee
   ========================================================================= */
.msc-google-band {
	overflow: hidden;
	padding: 40px 0 48px;
}

.msc-google-band__head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0 0 26px;
}

.msc-google-band__head strong {
	font-family: var(--msc-font-serif);
	font-size: 24px;
	font-weight: 600;
}

.msc-google-band__rating {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-left: 6px;
}

.msc-google-band__rating-num {
	font-weight: 700;
	font-size: 18px;
	color: var(--msc-navy);
}

.msc-google-band__rating-stars {
	color: #FBBC05;
	font-size: 15px;
	letter-spacing: 2px;
}

.msc-google-track {
	display: flex;
	width: max-content;
	animation: msc-marquee 55s linear infinite;
	gap: 18px;
	padding-right: 18px;
}

.msc-google-track:hover {
	animation-play-state: paused;
}

.msc-google-card {
	margin: 0;
	width: 330px;
	flex-shrink: 0;
	background: #fff;
	border: 1px solid var(--msc-border);
	border-radius: 8px;
	padding: 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	box-shadow: 0 4px 14px rgba(22, 40, 60, 0.06);
}

.msc-google-card__head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.msc-google-card__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 17px;
	flex-shrink: 0;
}

.msc-google-card__who {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.msc-google-card__who strong {
	font-size: 14.5px;
}

.msc-google-card__meta {
	display: flex;
	align-items: center;
	gap: 6px;
}

.msc-google-card__stars {
	color: #FBBC05;
	font-size: 12px;
	letter-spacing: 2px;
}

.msc-google-card__when {
	font-size: 12px;
	color: var(--msc-muted);
}

.msc-google-card__g {
	margin-left: auto;
	flex-shrink: 0;
}

.msc-google-card blockquote {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--msc-ink-muted);
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* =========================================================================
   Meet Dr. Varma — circular portrait + ring + floating name tag
   ========================================================================= */
.msc-bio-grid {
	max-width: var(--msc-container);
	margin: 0 auto;
	padding: 88px var(--pad-x);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 64px;
	align-items: start;
}

.msc-bio-portrait {
	width: 440px;
	max-width: 100%;
	margin: 0 auto;
	position: relative;
	padding: 0 0 56px;
}

.msc-bio-portrait__ring {
	position: absolute;
	top: 22px;
	left: -22px;
	width: 440px;
	height: 440px;
	max-width: 100%;
	border: 1px solid var(--msc-tan);
	border-radius: 50%;
	pointer-events: none;
}

.msc-bio-portrait__frame {
	height: 440px;
	width: 440px;
	max-width: 100%;
	margin: 0 auto;
	position: relative;
	border-radius: 50%;
	overflow: hidden;
}

.msc-bio-portrait__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.msc-bio-portrait__tag {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	background: var(--msc-navy);
	color: var(--msc-cream);
	padding: 18px 34px;
	border-radius: 3px;
	text-align: center;
	box-shadow: 0 16px 36px rgba(22, 40, 60, 0.28);
	width: max-content;
}

.msc-bio-portrait__tag strong {
	display: block;
	font-family: var(--msc-font-serif);
	font-size: 19px;
	font-weight: 600;
}

.msc-bio-portrait__tag span {
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--msc-tan);
}

.msc-bio-grid h2 {
	font-family: var(--msc-font-serif);
	font-size: 40px;
	font-weight: 500;
	margin: 0 0 8px;
}

.msc-bio-grid__kicker {
	font-size: 13px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--msc-gold);
	font-weight: 600;
	margin: 0 0 24px;
}

.msc-bio-facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 28px;
	margin: 0 0 28px;
}

.msc-bio-fact {
	border-top: 2px solid var(--msc-tan);
	padding-top: 10px;
}

.msc-bio-fact strong {
	display: block;
	font-size: 14px;
}

.msc-bio-fact span {
	font-size: 14px;
	color: var(--msc-ink-muted);
}

.msc-bio-grid__more {
	text-decoration: none;
	color: var(--msc-link);
	font-weight: 600;
	font-size: 15px;
}

/* =========================================================================
   Patient video highlights (Wistia) — no source equivalent, added on
   request. Uses aspect-ratio for the responsive 16:9 frame (same approach
   as .msc-video-card iframe elsewhere in this file) rather than the
   classic padding-top percentage hack, since every modern browser this
   site needs to support has aspect-ratio.
   ========================================================================= */
.msc-wistia-section {
	max-width: var(--msc-container);
	margin: 0 auto;
	padding: 0 var(--pad-x) 88px;
}

.msc-wistia-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
}

.msc-wistia-card {
	margin: 0;
	background: #fff;
	border: 1px solid var(--msc-border);
	border-radius: 4px;
	overflow: hidden;
}

.msc-wistia-card__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--msc-navy);
}

.msc-wistia-card__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}

.msc-wistia-card figcaption {
	padding: 16px 20px 20px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--msc-ink);
	line-height: 1.4;
}

/* =========================================================================
   What We Treat — "Diagnosis Index" (sidebar region filter + list)
   ========================================================================= */
.msc-index-grid {
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: 64px;
	padding: 64px 56px;
	align-items: start;
}

.msc-index-side {
	position: sticky;
	top: 120px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.msc-index-side__eyebrow {
	margin: 0;
	font-size: 12px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--msc-gold);
	font-weight: 600;
}

.msc-index-side h2 {
	font-family: var(--msc-font-serif);
	font-size: 40px;
	font-weight: 500;
	margin: 0;
	line-height: 1.12;
}

.msc-index-side__desc {
	margin: 0;
	font-size: 15.5px;
	color: var(--msc-ink-muted);
}

.msc-index-regions {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--msc-border);
}

.msc-index-region {
	font-family: inherit;
	text-align: left;
	font-size: 16px;
	font-weight: 600;
	padding: 15px 4px 15px 18px;
	cursor: pointer;
	border: none;
	border-bottom: 1px solid var(--msc-border);
	border-left: 3px solid transparent;
	background: transparent;
	color: var(--msc-ink-muted);
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	transition: all 0.25s ease;
	width: 100%;
}

.msc-index-region.is-active {
	border-left-color: var(--msc-gold);
	background: var(--msc-cream-alt);
	color: var(--msc-navy);
}

.msc-index-region__count {
	font-family: var(--msc-font-serif);
	font-size: 14px;
	color: var(--msc-gold);
}

.msc-index-side__more {
	text-decoration: none;
	color: var(--msc-link);
	font-weight: 600;
	font-size: 15px;
}

.msc-index-list {
	display: flex;
	flex-direction: column;
	animation: msc-fadeup 0.45s ease;
}

.msc-index-row {
	text-decoration: none;
	color: var(--msc-ink);
	display: grid;
	grid-template-columns: 58px 1fr auto;
	gap: 20px;
	align-items: center;
	padding: 20px 14px;
	border-bottom: 1px solid var(--msc-border);
	border-radius: 3px;
	transition: background 0.25s ease, padding-left 0.25s ease;
}

.msc-index-row:hover {
	background: var(--msc-cream-alt);
	padding-left: 26px;
	color: var(--msc-ink);
}

.msc-index-row__num {
	font-family: var(--msc-font-serif);
	font-size: 17px;
	color: var(--msc-gold);
}

.msc-index-row__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.msc-index-row__body strong {
	font-family: var(--msc-font-serif);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
}

.msc-index-row__body span {
	font-size: 13.5px;
	color: var(--msc-muted);
}

.msc-index-row__meta {
	display: flex;
	align-items: center;
	gap: 14px;
}

.msc-index-row__region {
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--msc-muted);
	font-weight: 700;
	border: 1px solid var(--msc-border);
	border-radius: 14px;
	padding: 5px 12px;
	white-space: nowrap;
}

.msc-index-row__arrow {
	font-size: 18px;
	color: var(--msc-gold);
}

/* Full-width index list (Conditions / Treatments hub pages, no sidebar) */
.msc-index-full-row {
	padding: 22px 14px;
}

.msc-index-full-row .msc-index-row__body strong {
	font-size: 25px;
}

.msc-index-full-row .msc-index-row__body span {
	font-size: 14px;
}

/* =========================================================================
   Featured procedures — interactive expanding panels
   ========================================================================= */
.msc-featured-list {
	max-width: var(--msc-container);
	margin: 0 auto;
	padding: 88px var(--pad-x);
}

.msc-section-head {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 48px;
}

.msc-section-head h2 {
	font-family: var(--msc-font-serif);
	font-size: 38px;
	font-weight: 500;
	margin: 0;
}

.msc-section-head a {
	text-decoration: none;
	color: var(--msc-link);
	font-weight: 600;
	font-size: 15px;
}

.msc-featured-panels {
	display: flex;
	gap: 10px;
	height: 560px;
}

.msc-featured-panel {
	text-decoration: none;
	position: relative;
	display: flex;
	flex: 1;
	min-width: 96px;
	border-radius: 6px;
	overflow: hidden;
	background: var(--msc-navy);
	transition: flex 0.55s cubic-bezier(0.32, 0.72, 0.24, 1);
	cursor: pointer;
}

.msc-featured-panel.is-active {
	flex: 4.2;
}

.msc-featured-panel__media {
	position: absolute;
	inset: 0;
}

.msc-featured-panel__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.msc-featured-panel__veil {
	position: absolute;
	inset: 0;
	background: rgba(22, 40, 60, 0.52);
	transition: background 0.55s ease;
	pointer-events: none;
}

.msc-featured-panel.is-active .msc-featured-panel__veil {
	background: rgba(22, 40, 60, 0);
}

.msc-featured-panel__num {
	position: absolute;
	top: 20px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	opacity: 1;
	transition: opacity 0.4s ease;
	pointer-events: none;
}

.msc-featured-panel.is-active .msc-featured-panel__num {
	opacity: 0;
}

.msc-featured-panel__num span {
	font-family: var(--msc-font-serif);
	font-size: 22px;
	color: var(--msc-tan);
}

.msc-featured-panel__short {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	writing-mode: vertical-rl;
	font-family: var(--msc-font-serif);
	font-size: 19px;
	font-weight: 600;
	color: var(--msc-cream);
	white-space: nowrap;
	letter-spacing: 0.03em;
	opacity: 1;
	transition: opacity 0.4s ease;
	pointer-events: none;
	text-shadow: 0 2px 12px rgba(12, 22, 34, 0.6);
}

.msc-featured-panel.is-active .msc-featured-panel__short {
	opacity: 0;
}

.msc-featured-panel__detail {
	position: relative;
	align-self: flex-end;
	width: 100%;
	box-sizing: border-box;
	padding: 120px 32px 30px;
	background: linear-gradient(to top, rgba(12, 22, 34, 0.94) 0%, rgba(12, 22, 34, 0.55) 55%, transparent 100%);
	display: flex;
	flex-direction: column;
	gap: 9px;
	opacity: 0;
	transition: opacity 0.45s ease 0.15s;
	pointer-events: none;
}

.msc-featured-panel.is-active .msc-featured-panel__detail {
	opacity: 1;
}

.msc-featured-panel__detail-tag {
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--msc-tan);
	font-weight: 700;
}

.msc-featured-panel__detail strong {
	font-family: var(--msc-font-serif);
	font-size: 28px;
	font-weight: 500;
	color: var(--msc-cream);
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.msc-featured-panel__detail-blurb {
	font-size: 15px;
	color: #cdd5dd;
	max-width: 54ch;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.msc-featured-panel__detail-cta {
	font-size: 14px;
	color: var(--msc-tan);
	font-weight: 600;
	margin-top: 4px;
}

/* =========================================================================
   Quote band
   ========================================================================= */
.msc-quote-band {
	background: var(--msc-navy);
	padding: 72px 56px;
}

.msc-quote-band blockquote {
	max-width: 880px;
	margin: 0 auto;
	text-align: center;
}

.msc-quote-band p {
	font-family: var(--msc-font-serif);
	font-size: 34px;
	line-height: 1.35;
	color: var(--msc-ivory);
	margin: 0 0 20px;
}

.msc-quote-band cite {
	font-style: normal;
	font-size: 13px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--msc-tan);
	font-weight: 600;
}

/* =========================================================================
   Location / CTA — full-bleed map with floating overlay card
   ========================================================================= */
.msc-map-band {
	position: relative;
	overflow: hidden;
	min-height: 620px;
	display: flex;
	align-items: center;
}

.msc-map-band__iframe {
	border: none;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	filter: grayscale(0.55) saturate(0.7) contrast(1.02);
}

.msc-map-band__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(22, 40, 60, 0.55) 0%, rgba(22, 40, 60, 0.12) 45%, transparent 70%);
	pointer-events: none;
}

.msc-map-card {
	position: relative;
	margin: 48px;
	width: 440px;
	max-width: calc(100% - 96px);
	background: rgba(22, 40, 60, 0.96);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(216, 201, 163, 0.35);
	border-radius: 6px;
	padding: 40px 42px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	box-shadow: 0 30px 70px rgba(12, 22, 34, 0.45);
}

.msc-map-card__eyebrow {
	margin: 0;
	font-size: 12px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--msc-tan);
	font-weight: 600;
}

.msc-map-card h2 {
	font-family: var(--msc-font-serif);
	font-size: 36px;
	font-weight: 500;
	margin: 0;
	color: var(--msc-cream);
	line-height: 1.12;
}

.msc-map-card__addr-row {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.msc-map-card__pin {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--msc-tan);
	color: var(--msc-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
}

.msc-map-card__addr {
	font-size: 16px;
	color: var(--msc-ivory);
	margin: 2px 0 0;
	line-height: 1.5;
}

.msc-map-card__addr small {
	font-size: 13.5px;
	color: var(--msc-slate);
}

.msc-map-card__subway {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.msc-map-card__subway-label {
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--msc-slate);
	font-weight: 600;
}

.msc-subway-badge {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	font-weight: 700;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.msc-map-card__subway-note {
	font-size: 13px;
	color: var(--msc-slate);
}

.msc-map-card__hours {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 5px 22px;
	font-size: 14.5px;
	color: var(--msc-footer-text);
	border-top: 1px solid rgba(216, 201, 163, 0.25);
	padding-top: 18px;
}

.msc-map-card__hours strong {
	color: var(--msc-ivory);
}

.msc-map-card__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* =========================================================================
   Generic page hero (eyebrow + title + lead) — Patient info, international,
   reviews, videos, contact
   ========================================================================= */
.msc-page-hero {
	padding: 72px var(--pad-x) 0;
	max-width: var(--msc-container);
	margin: 0 auto;
}

.msc-page-hero--narrow {
	max-width: 980px;
}

.msc-page-hero--legal {
	max-width: 860px;
}

.msc-eyebrow {
	margin: 0 0 12px;
	font-size: 12px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--msc-gold);
	font-weight: 600;
}

.msc-eyebrow a {
	color: var(--msc-gold);
	text-decoration: none;
}

.msc-page-title {
	font-family: var(--msc-font-serif);
	font-size: 46px;
	font-weight: 500;
	margin: 0 0 16px;
}

.msc-page-lead {
	font-size: 17px;
	color: var(--msc-ink-muted);
	max-width: 68ch;
	margin: 0 0 44px;
}

.msc-page-hero--narrow .msc-page-title {
	margin-bottom: 28px;
}

.msc-page-hero--legal .msc-page-title {
	font-size: 42px;
	margin-bottom: 8px;
}

.msc-intl-grid .msc-page-title,
.msc-contact-grid .msc-page-title {
	margin-bottom: 24px;
}

/* Dark banded hero (About, Conditions hub, Treatments hub, Detail) */
.msc-dark-hero {
	position: relative;
}

/* Conditions/Treatments/MIS detail pages only — matches the wider
   .msc-detail-col content column below it, but only caps at 1180px on
   very wide screens (see the min-width: 1880px block) rather than
   unconditionally, so normal desktop widths keep their existing sizing. */
.msc-dark-hero--wide {}

.msc-dark-hero__watermark {
	position: absolute;
	top: -70px;
	right: -30px;
	font-family: var(--msc-font-serif);
	font-size: 360px;
	line-height: 1;
	color: rgba(216, 201, 163, 0.07);
	pointer-events: none;
}

.msc-dark-hero__inner {
	padding: 72px 56px;
}

.msc-dark-hero__eyebrow {
	margin: 0 0 14px;
	font-size: 12px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--msc-tan);
	font-weight: 600;
}

.msc-dark-hero__eyebrow a {
	color: var(--msc-tan);
	text-decoration: none;
}

.msc-dark-hero h1 {
	font-family: var(--msc-font-serif);
	font-size: 52px;
	font-weight: 500;
	margin: 0 0 14px;
	color: var(--msc-cream);
	line-height: 1.1;
}

.msc-dark-hero__lead {
	font-size: 18px;
	color: var(--msc-footer-text);
	max-width: 60ch;
	margin: 0;
}

.msc-dark-hero__watermark--about {
	top: -60px;
	right: -40px;
	font-size: 380px;
}

.msc-dark-hero__title--lg {
	font-size: 54px;
	line-height: 1.08;
	margin-bottom: 14px;
}

.msc-dark-hero__lead--sm {
	max-width: 54ch;
	margin-bottom: 28px;
}

.msc-dark-hero__lead--detail {
	max-width: 62ch;
	line-height: 1.65;
}

.msc-dark-hero__title--detail {
	font-size: 50px;
}

.msc-dark-hero__title--alone {
	margin-bottom: 0;
}

.msc-dark-hero__actions {
	margin-top: 28px;
}

/* =========================================================================
   About page
   ========================================================================= */
.msc-about-hero__grid {
	display: grid;
	grid-template-columns: 1fr 420px;
	gap: 48px;
	padding: 72px 56px;
	align-items: center;
}

.msc-about-hero__badge-list {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 22px;
}

.msc-about-hero__badge {
	font-size: 13px;
	font-weight: 600;
	color: var(--msc-ivory);
	border: 1px solid rgba(216, 201, 163, 0.4);
	border-radius: 20px;
	padding: 8px 18px;
}

.msc-about-hero__portrait {
	position: relative;
	width: 380px;
	max-width: 100%;
	margin: 0 auto;
}

.msc-about-hero__portrait-ring {
	position: absolute;
	inset: -14px;
	border: 1px solid rgba(216, 201, 163, 0.5);
	border-radius: 50%;
	pointer-events: none;
}

.msc-about-hero__portrait-frame {
	height: 380px;
	border-radius: 50%;
	overflow: hidden;
}

.msc-about-hero__portrait-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.msc-about-intro {
	max-width: var(--msc-container);
	margin: 0 auto;
	padding: 72px var(--pad-x) 24px;
}

.msc-about-intro__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
}

.msc-about-intro p {
	font-size: 18px;
	color: var(--msc-ink-muted);
	margin: 0;
}

.msc-about-intro__dropcap {
	font-family: var(--msc-font-serif);
	font-size: 58px;
	line-height: 0.9;
	color: var(--msc-gold);
	float: left;
	padding: 6px 12px 0 0;
}

.msc-philosophy {
	max-width: var(--msc-container);
	margin: 0 auto;
	padding: 48px var(--pad-x) 88px;
}

.msc-philosophy h2 {
	font-family: var(--msc-font-serif);
	font-size: 32px;
	font-weight: 500;
	margin: 0 0 36px;
}

.msc-philosophy__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.msc-philosophy__item {
	border-top: 2px solid var(--msc-gold);
	padding: 24px 4px 0;
}

.msc-philosophy__num {
	font-family: var(--msc-font-serif);
	font-size: 20px;
	color: var(--msc-gold);
	display: block;
	margin-bottom: 8px;
}

.msc-philosophy__item strong {
	font-family: var(--msc-font-serif);
	font-size: 22px;
	font-weight: 600;
	display: block;
	margin-bottom: 8px;
}

.msc-philosophy__item span {
	font-size: 15px;
	color: var(--msc-ink-muted);
}

.msc-philosophy__actions {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 44px;
}

/* =========================================================================
   Condition / treatment detail
   ========================================================================= */
.msc-detail-body {
	max-width: var(--msc-container);
	margin: 0 auto;
	padding: 48px var(--pad-x) 72px;
}

/* Only widened on very wide screens — see the min-width: 1880px block,
   which raises .msc-detail-col to 1180px and needs this band widened to
   fit it (otherwise --msc-container would clip it first). */
.msc-detail-body--flow {}

/* Still used by the Minimally Invasive Surgery HUB page (page-minimally-
   invasive-surgery.php), which keeps its own two-column layout with a
   sticky sidebar CTA — only the Conditions/Treatments/MIS detail pages
   (single-condition.php, single-treatment.php) moved to the single-column
   flow below. */
.msc-detail-grid {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 64px;
	align-items: start;
}

.msc-detail-side {
	position: sticky;
	top: 120px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Single-column reading flow (matches the real live site — the Conditions/
   Treatments/MIS detail pages have no sidebar at all, sticky or
   otherwise; everything reads top-to-bottom). */
.msc-detail-col {
	max-width: 880px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
}

/* Pairs the Symptoms card with the dark secondary-list band, and pairs
   Causes/Treatment-style sections, side by side at a fixed 50/50 (not an
   intrinsic auto-fit/minmax split, which collapsed to one column on
   ordinary desktop widths as soon as the ~880-1180px .msc-detail-col got a
   bit of padding taken off it — a real column-min-width vs. container-width
   squeeze, not a mobile breakpoint). A lone odd-numbered trailing child (no
   dark band on some pages, or an odd count of sections) spans the full row
   instead of leaving an empty half; collapses to one column at the same
   1100px breakpoint the rest of this detail-page layout already uses (see
   the media query below). The intro (lead photo + paragraphs) stays outside
   this grid — full width, image beside its own text — since pairing it into
   the same row as the Symptoms card left both too cramped. */
.msc-detail-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 40px;
	row-gap: 14px;
	align-items: start;
	margin-bottom: 28px;
}

.msc-detail-row:empty {
	display: none;
	margin-bottom: 0;
}

/* When a row pairs two image-bottom sections (or one paired with a plain
   text section), stretch both grid cells to equal height so the images —
   which sit after variable-length text — line up at the same top edge
   instead of trailing whichever column has less text above its image. */
.msc-detail-row--sections:has(> .msc-detail-section--img-bottom) {
	align-items: stretch;
}

/* Scoped to the points row (Symptoms/dark-band) only — nth-child position
   there always matches "is this alone in the row" since that row never has
   more than 2 items. The sections row can't rely on this same DOM-position
   trick once a .msc-detail-section--full banner splits it mid-sequence (the
   trailing item's nth-child parity no longer tells you whether it's alone
   in its row), so sections use the explicit --full class below instead. */
.msc-detail-row--points>*:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

.msc-detail-section--full {
	grid-column: 1 / -1;
}

/* The grid's row-gap is a small 14px base (see .msc-detail-row) — normal
   sections add their own margin-bottom on top of it to reach the full 40px
   row-to-row spacing used everywhere else, except the title-only banner,
   which is content with the bare 14px (matching an ordinary
   heading-to-content gap) since it has no body copy of its own to create
   breathing room. The title-only override needs the same two-class
   specificity as the rule below it, or the descendant selector wins
   regardless of source order and silently overrides it back to 26px. */
.msc-detail-row--sections .msc-detail-section {
	margin-bottom: 26px;
}

.msc-detail-row--sections .msc-detail-section--title-only {
	padding-bottom: 0;
	margin-bottom: 0;
}

.msc-detail-section--title-only h2 {
	margin-bottom: 0;
}

/* The Symptoms card and the dark band are both boxed "cards" sitting side
   by side — stretch them to match height instead of each hugging its own
   (shorter) content, unlike the plain-text Causes/Treatment sections row
   below, which stays top-aligned. */
.msc-detail-row--points {
	align-items: stretch;
}

.msc-detail-col .msc-detail-row .msc-detail-points {
	margin-bottom: 0;
}

.msc-detail-intro {
	display: flex;
	gap: 40px;
	align-items: flex-start;
	margin-bottom: 28px;
}

/* Wider, shorter frame than the raw source images (some are tall portrait
   crops) — object-fit:cover centers and crops each one to this landscape
   box instead of rendering it at its own natural (often tall) aspect. */
.msc-detail-intro__media {
	flex: 1 1 0;
	aspect-ratio: 3 / 2;
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 24px;
}

.msc-detail-intro__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Some source images (e.g. a diagram with its own baked-in caption text at
   the bottom) can't tolerate the default 3:2 crop without losing content —
   this shows the image at its full natural height instead. */
.msc-detail-intro__media--natural {
	aspect-ratio: auto;
}

.msc-detail-intro__media--natural img {
	height: auto;
	object-fit: initial;
}

.msc-detail-intro__text {
	flex: 1;
	min-width: 0;
}

.msc-detail-intro:not(.msc-detail-intro--with-img) .msc-detail-intro__text {
	flex: none;
	width: 100%;
}

@media (min-width: 1101px) {
	.msc-detail-col--cervical-radiculopathy .msc-detail-intro {
		display: contents;
	}

	.msc-detail-col--cervical-radiculopathy .msc-detail-row--points,
	.msc-detail-col--cervical-radiculopathy .msc-detail-row--sections {
		display: contents;
	}

	.msc-detail-col--cervical-radiculopathy {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 40px;
		align-items: start;
	}

	.msc-detail-col--cervical-radiculopathy .msc-detail-intro__text {
		grid-column: 1;
		grid-row: 1;
	}

	.msc-detail-col--cervical-radiculopathy .msc-detail-intro__media {
		grid-column: 2;
		grid-row: 1 / 3;
		width: 100%;
		aspect-ratio: auto;
		align-self: stretch;
	}

	.msc-detail-col--cervical-radiculopathy .msc-detail-row--points> :first-child {
		grid-column: 1;
		grid-row: 2;
	}

	.msc-detail-col--cervical-radiculopathy .msc-detail-row--sections> :first-child {
		grid-column: 1 / -1;
		grid-row: 3;
	}

	.msc-detail-col--cervical-radiculopathy .msc-detail-row--sections> :last-child {
		grid-column: 1 / -1;
		grid-row: 4;
		display: flex;
		gap: 32px;
	}

	.msc-detail-col--cervical-radiculopathy .msc-detail-row--sections> :last-child .msc-detail-section__media,
	.msc-detail-col--cervical-radiculopathy .msc-detail-row--sections> :last-child .msc-detail-section__body {
		flex: 1 1 0;
		min-width: 0;
	}

	.msc-detail-col--cervical-radiculopathy .msc-detail-video {
		grid-column: 1 / -1;
		grid-row: 5;
		margin-top: 24px;
	}

	.msc-detail-col--back-pain {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 40px;
		align-items: start;
	}

	.msc-detail-col--back-pain .msc-detail-intro,
	.msc-detail-col--back-pain .msc-detail-row--points,
	.msc-detail-col--back-pain .msc-detail-row--sections {
		display: contents;
	}

	.msc-detail-col--back-pain .msc-detail-intro__media {
		display: block;
		grid-column: 2;
		grid-row: 1 / 3;
		aspect-ratio: auto;
		width: 100%;
		align-self: stretch;
	}

	.msc-detail-col--back-pain .msc-detail-intro__text {
		grid-column: 1;
		grid-row: 1;
	}

	.msc-detail-col--back-pain .msc-detail-row--points> :first-child {
		grid-column: 2;
		grid-row: 1;
	}

	.msc-detail-col--back-pain .msc-detail-row--points> :last-child {
		grid-column: 1;
		grid-row: 2;
		margin-top: 40px;
	}

	.msc-detail-col--back-pain .msc-detail-row--sections> :first-child {
		grid-column: 1;
		grid-row: 2;
	}

	.msc-detail-col--back-pain .msc-detail-row--sections> :last-child {
		grid-column: 2;
		grid-row: 3;
	}

	.msc-detail-col--back-pain .msc-detail-video {
		grid-column: 1;
		grid-row: 3;
		width: 100%;
		margin-top: 40px;
	}

	.msc-detail-col--back-pain .msc-detail-row--sections> :last-child {
		margin-top: 40px;
	}

	.msc-detail-col--back-pain .msc-detail-intro__text .msc-detail-section__sub,
	.msc-detail-col--back-pain .msc-detail-row--points .msc-detail-points h2,
	.msc-detail-col--back-pain .msc-detail-section h2 {
		font-size: 22px;
		line-height: normal;
	}
}

.msc-detail-main p,
.msc-detail-intro__text p {
	font-size: 17.5px;
	color: var(--msc-ink-muted);
	margin: 0 0 22px;
	line-height: 1.7;
}

.msc-detail-col .msc-detail-section h2,
.msc-detail-col .msc-detail-points h2 {
	font-size: 22px !important;
	line-height: 1.4;
}

.msc-detail-col .msc-detail-section__sub {
	font-size: 18px !important;
	line-height: 1.4;
}

.msc-detail-col--cervical-radiculopathy .msc-detail-intro__text>.msc-detail-section__sub {
	font-size: 22px !important;
}

.msc-detail-section {
	padding: 4px 4px 14px;
	margin: 0 0 14px;
}

/* The gold accent moved from a full-width rule above the whole section to a
   short bar right before the section's own main title — not its smaller
   sub-heading, which reads as a lesser peer beneath it, not its own titled
   section. */
.msc-detail-section h2 {
	display: flex;
	align-items: center;
	gap: 14px;
}

.msc-detail-section h2::before {
	content: '';
	display: inline-block;
	width: 28px;
	height: 2px;
	background: var(--msc-gold);
	flex-shrink: 0;
}

.msc-detail-section h2 {
	font-family: var(--msc-font-serif);
	font-size: 22px;
	font-weight: 600;
	margin: 0 0 12px;
}

.msc-detail-section__sub {
	font-family: var(--msc-font-serif);
	font-size: 18px;
	font-weight: 600;
	color: var(--msc-ink);
	margin: 0 0 10px;
}

/* A second full title stacked further down a section (after its list/text) —
   same treatment as the section's own h2, just with breathing room above it
   since it follows other content instead of opening the section. */
.msc-detail-section h2.msc-detail-section__outro-title {
	margin-top: 28px;
}

.msc-detail-section p {
	font-size: 16.5px;
	color: var(--msc-ink-muted);
	margin: 0 0 12px;
	line-height: 1.68;
}

.msc-detail-section p:last-child {
	margin-bottom: 0;
}

.msc-detail-section__list {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	font-size: 16.5px;
	color: var(--msc-ink-muted);
	line-height: 1.68;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.msc-detail-section__list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.msc-detail-section__list li i {
	font-size: 13px;
	color: var(--msc-gold);
	flex-shrink: 0;
	margin-top: 4px;
}

/* A section can carry its own real photo/diagram from the live site,
   shown alongside its text (alternating sides by section index) — same
   idea as .msc-detail-intro's lead image, just per-section. */
.msc-detail-section--with-img {
	display: flex;
	gap: 32px;
	align-items: flex-start;
}

.msc-detail-section--with-img.msc-detail-section--img-right {
	flex-direction: row-reverse;
}

/* Text above, image below — for a tall/portrait photo that doesn't suit a
   narrow side-by-side column. The image markup still comes first in the
   DOM, so column-reverse (not column) is what puts the text on top. */
.msc-detail-section--with-img.msc-detail-section--img-bottom {
	flex-direction: column-reverse;
	gap: 20px;
}

.msc-detail-section--with-img.msc-detail-section--img-bottom .msc-detail-section__media {
	flex: none;
	width: 100%;
}

/* Image above, text below — the reverse stack: DOM order already puts the
   image first, so plain column (not column-reverse) is what's needed. */
.msc-detail-section--with-img.msc-detail-section--img-top {
	flex-direction: column;
	gap: 20px;
}

.msc-detail-section--with-img.msc-detail-section--img-top .msc-detail-section__media {
	flex: none;
	width: 100%;
}

/* A true 50/50 split instead of the default small fixed-width image beside
   a wide text column — for a full-width section where the image deserves
   equal billing with its text. */
.msc-detail-section--with-img.msc-detail-section--img-half .msc-detail-section__media {
	flex: 1 1 0;
}

.msc-detail-section__media {
	flex: 0 0 280px;
	border-radius: 4px;
	overflow: hidden;
}

.msc-detail-section__media img {
	display: block;
	width: 100%;
	height: auto;
}

.msc-detail-section__body {
	flex: 1;
	min-width: 0;
}

.msc-detail-section__body-image {
	display: block;
	width: 100%;
	height: auto;
	margin-top: 18px;
	border-radius: 4px;
}

/* A section with an image and no heading/text/list at all — used to give a
   photo its own full-width grid cell in the Causes/Treatment-style row
   (paired 50/50 next to a plain text section) instead of the image sitting
   in its own small flex-basis beside empty space. */
.msc-detail-section--img-only {
	border-top: none;
	padding: 0;
}

.msc-detail-section--img-only .msc-detail-section__media {
	flex: 1 1 auto;
	aspect-ratio: 4 / 3;
}

.msc-detail-section--img-only .msc-detail-section__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.msc-detail-section--img-only .msc-detail-section__body {
	display: none;
}

/* A capped-width, centered image (no cropping) — used for standalone full-row
   images that shouldn't be stretched/cover-cropped to fill the row. */
.msc-detail-section--img-only.msc-detail-section--img-natural {
	text-align: center;
}

.msc-detail-section--img-only.msc-detail-section--img-natural .msc-detail-section__media {
	flex: none;
	max-width: 800px;
	margin: 0 auto;
	aspect-ratio: auto;
}

.msc-detail-section--img-only.msc-detail-section--img-natural .msc-detail-section__media img {
	width: 100%;
	height: auto;
	object-fit: initial;
}

.msc-detail-section__caption {
	margin: 10px 0 0;
	font-size: 14px;
	color: var(--msc-ink-muted);
	text-align: center;
}

/* A captioned image-only section still fills its grid column at full width
   (like the plain img-only default) but drops the fixed 4:3 crop, since a
   forced aspect-ratio height would otherwise clip the caption below it. */
.msc-detail-section--img-only.msc-detail-section--has-caption .msc-detail-section__media {
	aspect-ratio: auto;
	overflow: visible;
}

.msc-detail-section--img-only.msc-detail-section--has-caption .msc-detail-section__media img {
	height: auto;
	object-fit: initial;
}

.msc-detail-video {
	margin: 0 0 22px;
}

.msc-detail-video--full {
	margin: 40px auto 0;
	max-width: 880px;
	width: 100%;
}

.msc-detail-video__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--msc-navy);
	border-radius: 4px;
	overflow: hidden;
}

.msc-detail-video__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}

.msc-detail-video figcaption {
	padding: 12px 2px 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.msc-detail-video figcaption strong {
	font-family: var(--msc-font-serif);
	font-size: 17px;
	color: var(--msc-ink);
}

.msc-detail-video figcaption span {
	font-size: 13.5px;
	color: var(--msc-muted);
}

.msc-detail-video--full figcaption {
	text-align: center;
	align-items: center;
}

.msc-detail-points {
	background: #fff;
	border: 1px solid var(--msc-border);
	border-radius: 4px;
	padding: 28px 30px;
}

.msc-detail-col .msc-detail-points {
	padding: 30px 34px;
	margin: 0 0 28px;
}

.msc-detail-points h2 {
	font-family: var(--msc-font-serif);
	font-size: 21px;
	font-weight: 600;
	margin: 0 0 16px;
}

.msc-detail-col .msc-detail-points h2 {
	font-size: 22px;
	margin-bottom: 14px;
}

.msc-detail-points__intro {
	font-size: 14.5px;
	color: var(--msc-ink-muted);
	line-height: 1.55;
	margin: -6px 0 16px;
}

.msc-detail-col .msc-detail-points__intro {
	font-size: 16px;
	line-height: 1.6;
	margin-top: -4px;
	margin-bottom: 18px;
}

.msc-detail-points__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.msc-detail-points__item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 14.5px;
	color: var(--msc-ink-muted);
	line-height: 1.55;
}

.msc-detail-col .msc-detail-points__item {
	font-size: 15.5px;
}

/* A clean Font Awesome checkmark (not the nav's circular spine-icon badge —
   too busy for a dense list of short items). */
.msc-detail-points__check {
	font-size: 13px;
	color: var(--msc-gold);
	flex-shrink: 0;
	margin-top: 3px;
}

.msc-detail-points__outro {
	font-size: 14.5px;
	color: var(--msc-ink-muted);
	line-height: 1.55;
	margin: 14px 0 0;
}

.msc-detail-col .msc-detail-points__outro {
	font-size: 15.5px;
	line-height: 1.6;
	margin-top: 16px;
}

.msc-detail-points--dark .msc-detail-points__outro {
	color: var(--msc-footer-text);
}

/* Full-width dark band variant — matches the real live site's dark navy
   "also a symptom of certain disorders such as:"-style band. */
.msc-detail-points--dark {
	background: var(--msc-navy);
	border-color: transparent;
}

.msc-detail-points--dark h2 {
	color: var(--msc-ivory);
}

.msc-detail-points--dark .msc-detail-points__intro {
	color: var(--msc-footer-text);
}

.msc-detail-points__bullets {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 14.5px;
	color: var(--msc-footer-text);
	line-height: 1.5;
}

.msc-detail-col .msc-detail-points__bullets {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px 32px;
	font-size: 15.5px;
}

/* Same Font Awesome checkmark as the Symptoms checklist, in place of the
   default list bullet, so the two paired cards match. */
.msc-detail-points__bullets li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.msc-detail-points__bullets li i {
	font-size: 12px;
	color: var(--msc-tan);
	flex-shrink: 0;
	margin-top: 4px;
}

/* A points/points2 card can carry its own real photo/diagram from the
   live site — shown beside the card's content instead of the checklist
   filling the full card width. */
.msc-detail-points--with-img {
	display: flex;
	gap: 28px;
	align-items: flex-start;
}

/* Equal 50/50 split, same proportion as the other paired images on a detail
   page (the intro photo, and an image-only section paired with Causes) —
   not a fixed pixel width, so it scales the same way they do. */
.msc-detail-points--with-img .msc-detail-points__media {
	flex: 1 1 0;
	aspect-ratio: 3 / 2;
	border-radius: 4px;
	overflow: hidden;
}

.msc-detail-points--with-img .msc-detail-points__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.msc-detail-points--with-img .msc-detail-points__body {
	flex: 1 1 0;
	min-width: 0;
}

/* Image on the right of the text instead of the left. */
.msc-detail-points--with-img.msc-detail-points--img-right {
	flex-direction: row-reverse;
}

/* Content on top, image below — same stacking technique as a detail
   section's img-bottom: DOM order is media then body, so column-reverse
   puts the body (text) first. */
.msc-detail-points--with-img.msc-detail-points--img-bottom {
	flex-direction: column-reverse;
	gap: 20px;
}

.msc-detail-points--with-img.msc-detail-points--img-bottom .msc-detail-points__media {
	flex: none;
	width: 100%;
}

.msc-detail-points--with-img .msc-detail-points__bullets {
	grid-template-columns: 1fr;
}

.msc-detail-cta {
	background: var(--msc-navy);
	border-radius: 4px;
	padding: 28px 30px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.msc-detail-cta strong {
	font-family: var(--msc-font-serif);
	font-size: 21px;
	color: var(--msc-ivory);
}

.msc-detail-cta span {
	color: var(--msc-footer-text);
	font-size: 14.5px;
	line-height: 1.55;
}

.msc-detail-cta .msc-btn {
	margin-top: 6px;
}

/* =========================================================================
   Patient info / International — stacked info cards (unchanged design)
   ========================================================================= */
.msc-info-stack {
	max-width: 980px;
	margin: 0 auto;
	padding: 0 var(--pad-x) 72px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.msc-info-card {
	background: #fff;
	border: 1px solid var(--msc-border);
	padding: 26px 30px;
}

.msc-info-card h2 {
	font-family: var(--msc-font-serif);
	font-size: 24px;
	font-weight: 600;
	margin: 0 0 10px;
}

.msc-info-card p {
	font-size: 16px;
	color: var(--msc-ink-muted);
	margin: 0;
}

.msc-info-card p+p {
	margin-top: 12px;
}

.msc-info-card a {
	color: var(--msc-link);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
}

.msc-intl-grid {
	max-width: var(--msc-container);
	margin: 0 auto;
	padding: 72px var(--pad-x);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 64px;
	align-items: start;
}

.msc-intl-grid__media {
	height: 520px;
	position: sticky;
	top: 100px;
}

.msc-intl-grid__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 4px;
}

.msc-intl-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0 0 32px;
}

.msc-philosophy-item {
	background: #fff;
	border: 1px solid var(--msc-border);
	padding: 18px 22px;
}

.msc-philosophy-item span {
	color: var(--msc-ink-muted);
}

/* =========================================================================
   Reviews / Video learning center
   ========================================================================= */
.msc-list-section {
	max-width: var(--msc-container);
	margin: 0 auto;
	padding: 0 var(--pad-x) 72px;
}

.msc-list-section--index {
	padding-top: 40px;
}

.msc-subhead {
	font-family: var(--msc-font-serif);
	font-size: 30px;
	font-weight: 600;
	margin: 0 0 20px;
}

.msc-video-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 14px;
	margin: 0 0 56px;
}

.msc-video-card {
	margin: 0;
	background: #fff;
	border: 1px solid var(--msc-border);
	display: flex;
	flex-direction: column;
}

.msc-video-card iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: none;
	display: block;
	background: var(--msc-navy);
}

.msc-video-card figcaption {
	padding: 16px 20px 20px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.msc-video-card__cat {
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--msc-gold);
	font-weight: 700;
}

.msc-video-card strong {
	font-family: var(--msc-font-serif);
	font-size: 18px;
}

.msc-video-card span.msc-video-card__desc {
	font-size: 13.5px;
	color: var(--msc-ink-muted);
}

.msc-review-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 14px;
	align-items: start;
}

.msc-review-card {
	background: #fff;
	border: 1px solid var(--msc-border);
	padding: 26px 28px;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.msc-stars {
	color: var(--msc-tan);
	font-size: 15px;
	letter-spacing: 3px;
}

.msc-review-card blockquote {
	margin: 0;
	font-family: var(--msc-font-serif);
	font-size: 18px;
	line-height: 1.5;
	color: var(--msc-ink);
}

.msc-review-card figcaption {
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--msc-muted);
	font-weight: 600;
}

.msc-video-filters {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 32px;
}

.msc-video-filter {
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	padding: 9px 18px;
	border-radius: 20px;
	cursor: pointer;
	border: 1px solid var(--msc-navy);
	background: #fff;
	color: var(--msc-navy);
}

.msc-video-filter.is-active {
	background: var(--msc-navy);
	color: var(--msc-cream);
}

/* =========================================================================
   Contact page
   ========================================================================= */
.msc-contact-grid {
	max-width: var(--msc-container);
	margin: 0 auto;
	padding: 72px var(--pad-x);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 64px;
	align-items: start;
}

.msc-contact-card {
	background: #fff;
	border: 1px solid var(--msc-border);
	padding: 26px 30px;
	margin: 0 0 18px;
}

.msc-contact-card strong.msc-contact-card__name {
	font-family: var(--msc-font-serif);
	font-size: 22px;
	display: block;
	margin-bottom: 10px;
}

.msc-contact-card p {
	margin: 0 0 12px;
	font-size: 16px;
	color: var(--msc-ink-muted);
}

.msc-contact-card__tel {
	color: var(--msc-link);
	font-weight: 600;
	text-decoration: none;
	font-size: 18px;
}

.msc-hours-grid {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 24px;
	font-size: 15px;
	color: var(--msc-ink-muted);
}

.msc-hours-grid strong {
	color: var(--msc-ink);
}

.msc-contact-map {
	border: 1px solid var(--msc-border);
	border-radius: 4px;
	width: 100%;
	height: 300px;
	display: block;
}

.msc-form-sent {
	background: var(--msc-navy);
	padding: 48px 40px;
	text-align: center;
}

.msc-form-sent strong {
	font-family: var(--msc-font-serif);
	font-size: 28px;
	color: var(--msc-ivory);
	display: block;
	margin-bottom: 12px;
}

.msc-form-sent p {
	color: var(--msc-footer-text);
	font-size: 16px;
	margin: 0;
}

.msc-form-sent a {
	color: var(--msc-tan);
}

.msc-form {
	background: #fff;
	border: 1px solid var(--msc-border);
	padding: 32px 34px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.msc-form__title {
	font-family: var(--msc-font-serif);
	font-size: 22px;
}

.msc-form-row-2 {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 16px;
}

.msc-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
}

.msc-field input,
.msc-field select,
.msc-field textarea {
	width: 100%;
	min-width: 0;
	font-family: inherit;
	font-size: 15px;
	padding: 11px 12px;
	border: 1px solid var(--msc-border-soft);
	border-radius: 2px;
	background: var(--msc-cream);
}

.msc-field textarea {
	resize: vertical;
}

.msc-form-consent {
	margin: 0;
	font-size: 12px;
	color: var(--msc-muted);
}

.msc-form-consent a {
	color: var(--msc-link);
}

.msc-form-submit {
	background: var(--msc-navy);
	color: var(--msc-cream);
	font-family: inherit;
	font-weight: 600;
	font-size: 15px;
	padding: 14px 28px;
	border: none;
	border-radius: 2px;
	cursor: pointer;
}

.msc-form-submit:hover {
	background: var(--msc-navy-hover);
}

.msc-form-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.msc-form-error {
	background: #fbeaea;
	border: 1px solid #d98b8b;
	color: #7a2222;
	padding: 12px 14px;
	font-size: 14px;
	border-radius: 2px;
}

/* Form states: required marker, inline errors, sending, reCAPTCHA */
.msc-req {
	color: var(--msc-gold);
	font-weight: 700;
}

.msc-field input:focus,
.msc-field select:focus,
.msc-field textarea:focus {
	outline: none;
	border-color: var(--msc-navy);
	box-shadow: 0 0 0 3px rgba(22, 40, 60, 0.12);
	background: #fff;
}

.msc-field.has-error input,
.msc-field.has-error select,
.msc-field.has-error textarea {
	border-color: #b54848;
	background: #fdf6f6;
}

.msc-field__error {
	font-size: 12.5px;
	font-weight: 500;
	color: #9b2c2c;
}

.msc-form-error[hidden] {
	display: none;
}

.msc-recaptcha {
	min-height: 78px;
}

.msc-recaptcha.has-error {
	outline: 1px solid #b54848;
	outline-offset: 4px;
	width: max-content;
	max-width: 100%;
}

.msc-recaptcha .msc-field__error {
	display: block;
	margin-top: 6px;
}

.msc-form.is-sending {
	opacity: 0.85;
}

.msc-form-submit[disabled] {
	cursor: progress;
	background: var(--msc-navy-hover);
}

.msc-form-sent:focus {
	outline: none;
}

.msc-form-sent p + p {
	margin-top: 10px;
}

/* =========================================================================
   Legal pages
   ========================================================================= */
.msc-legal-updated {
	font-size: 13px;
	color: var(--msc-muted);
	margin: 0 0 36px;
}

.msc-legal-body {
	padding: 0 var(--pad-x) 72px;
	max-width: 860px;
	margin: 0 auto;
}

.msc-legal-section {
	margin: 0 0 28px;
}

.msc-legal-section h2 {
	font-family: var(--msc-font-serif);
	font-size: 24px;
	font-weight: 600;
	margin: 0 0 10px;
}

.msc-legal-section p {
	font-size: 16px;
	color: var(--msc-ink-muted);
	margin: 0;
	white-space: pre-line;
}

/* =========================================================================
   Credentials band — verbatim from the live site's above-footer "Schedule
   a Consultation" link + Top Doctors/Marquis/Castle Connolly/Mount
   Sinai/SuperDoctors/Icahn School logo row, shown on every page since
   get_footer() (and therefore footer.php) loads site-wide.
   ========================================================================= */
.msc-credentials {
	background: var(--msc-cream);
	padding: 48px var(--pad-x);
	text-align: center;
}

.msc-credentials__inner {
	max-width: var(--msc-container);
	margin: 0 auto;
}

.msc-credentials__cta {
	display: inline-block;
	font-family: var(--msc-font-nav);
	font-size: 26px;
	letter-spacing: 0.03em;
	text-decoration: none;
	color: var(--msc-navy);
	margin-bottom: 36px;
}

.msc-credentials__cta strong {
	color: var(--msc-link);
}

.msc-credentials__cta:hover {
	opacity: 0.8;
}

.msc-credentials__logos {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent);
	mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent);
}

.msc-credentials__track {
	display: flex;
	align-items: center;
	width: max-content;
	gap: 56px;
	padding-right: 56px;
	animation: msc-marquee 32s linear infinite;
}

.msc-credentials__logos:hover .msc-credentials__track {
	animation-play-state: paused;
}

.msc-credentials__logos img {
	height: 54px;
	width: auto;
	max-width: 160px;
	object-fit: contain;
	flex: none;
}

/* =========================================================================
   Footer
   ========================================================================= */
.msc-footer {
	background: var(--msc-navy);
	color: var(--msc-footer-text);
	margin: 40px var(--msc-band-margin) 16px;
	border-radius: 4px;
}

.msc-footer__grid {
	padding: 64px 56px 40px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 48px;
}

.msc-footer__brand strong {
	font-family: var(--msc-font-serif);
	font-size: 22px;
	color: var(--msc-ivory);
	display: block;
	margin-bottom: 6px;
}

.msc-footer__brand span {
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--msc-tan);
}

.msc-footer__brand p {
	font-size: 14px;
	margin: 18px 0 0;
}

.msc-footer__brand a {
	color: var(--msc-ivory);
	text-decoration: none;
	font-weight: 600;
}

.msc-footer nav {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 14px;
}

.msc-footer nav strong {
	color: var(--msc-ivory);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-bottom: 4px;
}

.msc-footer nav a {
	color: var(--msc-footer-text);
	text-decoration: none;
}

.msc-footer nav a:hover {
	color: #fff;
}

.msc-footer__bottom {
	border-top: 1px solid rgba(233, 228, 216, 0.15);
}

.msc-footer__bottom-row {
	padding: 20px 56px;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 12.5px;
	color: var(--msc-slate);
}

.msc-footer__bottom-row a {
	color: var(--msc-tan);
}

/* Mobile-only fixed call/appointment strip — hidden by default, shown and
   positioned in the max-width:720px block below (with the ADA button and
   cookie banner nudged there too so nothing overlaps it). */
.msc-mobile-bar {
	display: none;
}

/* =========================================================================
   ADA accessibility widget
   ========================================================================= */
.msc-ada-btn {
	position: fixed;
	bottom: 24px;
	left: 24px;
	z-index: 90;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--msc-navy);
	color: var(--msc-cream);
	border: 2px solid var(--msc-tan);
	cursor: pointer;
	font-size: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 24px rgba(22, 40, 60, 0.35);
	font-family: inherit;
}

.msc-ada-btn:hover {
	background: var(--msc-navy-hover);
}

.msc-ada-panel {
	position: fixed;
	bottom: 92px;
	left: 24px;
	z-index: 95;
	width: 320px;
	background: #fff;
	border: 1px solid var(--msc-border);
	box-shadow: 0 20px 48px rgba(22, 40, 60, 0.25);
	padding: 22px 24px;
	display: none;
	flex-direction: column;
	gap: 14px;
}

.msc-ada-panel.is-open {
	display: flex;
}

.msc-ada-panel__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.msc-ada-panel__head strong {
	font-family: var(--msc-font-serif);
	font-size: 19px;
}

.msc-ada-panel__head button {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 18px;
	color: var(--msc-muted);
	font-family: inherit;
}

.msc-ada-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.msc-ada-group>span {
	font-size: 13px;
	font-weight: 600;
}

.msc-ada-row {
	display: flex;
	gap: 8px;
}

.msc-ada-row button {
	flex: 1;
	background: var(--msc-cream-alt);
	border: 1px solid var(--msc-border-soft);
	border-radius: 2px;
	padding: 9px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	color: var(--msc-ink);
}

.msc-ada-row button.msc-ada-row__primary {
	background: var(--msc-navy);
	color: var(--msc-cream);
	border: none;
	font-weight: 600;
	padding: 10px;
}

.msc-ada-row button.msc-ada-row__primary:hover {
	background: var(--msc-navy-hover);
}

.msc-ada-row button.msc-ada-row__stop {
	flex: none;
	padding: 10px 14px;
	font-weight: 600;
}

.msc-ada-row button.msc-ada-row__reset {
	font-weight: 400;
}

.msc-ada-row button[data-ada-text-larger] {
	font-size: 15px;
}

.msc-ada-note {
	font-size: 11.5px;
	color: var(--msc-muted);
}

.msc-ada-toggle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.msc-ada-toggle input {
	width: 18px;
	height: 18px;
	accent-color: var(--msc-navy);
	cursor: pointer;
}

.msc-ada-help {
	margin: 0;
	font-size: 11.5px;
	color: var(--msc-muted);
	border-top: 1px solid var(--msc-border);
	padding-top: 12px;
}

.msc-ada-help a {
	color: var(--msc-link);
}

/* =========================================================================
   Cookie consent banner
   ========================================================================= */
.msc-cookie-banner {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 85;
	background: #fff;
	border-top: 2px solid var(--msc-navy);
	box-shadow: 0 -12px 32px rgba(22, 40, 60, 0.15);
	padding: 20px var(--pad-x) 20px 100px;
	display: none;
}

.msc-cookie-banner.is-visible {
	display: block;
}

.msc-cookie-banner__row {
	max-width: var(--msc-container);
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
}

.msc-cookie-banner p {
	flex: 1;
	min-width: 320px;
	margin: 0;
	font-size: 14px;
	color: var(--msc-ink-muted);
}

.msc-cookie-banner p strong {
	color: var(--msc-ink);
}

.msc-cookie-banner__actions {
	display: flex;
	gap: 12px;
}

.msc-cookie-banner__actions button {
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	border-radius: 2px;
	padding: 11px 20px;
	white-space: nowrap;
}

.msc-cookie-banner__essential {
	background: #fff;
	color: var(--msc-navy);
	border: 1px solid var(--msc-navy);
}

.msc-cookie-banner__essential:hover {
	background: var(--msc-cream-alt);
}

.msc-cookie-banner__accept {
	background: var(--msc-navy);
	color: var(--msc-cream);
	border: none;
	padding: 11px 24px;
}

.msc-cookie-banner__accept:hover {
	background: var(--msc-navy-hover);
}

/* =========================================================================
   Blog (post) fallback templates
   ========================================================================= */
.msc-blog-list {
	max-width: 860px;
	margin: 0 auto;
	padding: 72px var(--pad-x);
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.msc-blog-list article {
	border-bottom: 1px solid var(--msc-border);
	padding-bottom: 32px;
}

.msc-blog-list h2 {
	font-family: var(--msc-font-serif);
	font-size: 28px;
	margin: 0 0 8px;
}

.msc-blog-list h2 a {
	color: var(--msc-ink);
	text-decoration: none;
}

.msc-blog-meta {
	font-size: 12.5px;
	color: var(--msc-muted);
	margin: 0 0 12px;
}

.msc-single-post {
	max-width: 780px;
	margin: 0 auto;
	padding: 72px var(--pad-x);
}

.msc-single-post h1 {
	font-family: var(--msc-font-serif);
	font-size: 42px;
	margin: 0 0 16px;
}

.msc-single-post .msc-blog-meta {
	margin-bottom: 32px;
}

.msc-single-post p {
	font-size: 17px;
	color: var(--msc-ink-muted);
}

/* =========================================================================
   Responsive — breakpoints and rules mirror Manhattan Spine Consultants
   .dc.html's own [data-rsp="..."] media queries as closely as CSS classes
   allow (900px / 720px / 1100px / 480px, in that source order). The nav
   has no hamburger/off-canvas menu in the source design at all — on narrow
   viewports it simply wraps onto additional centered rows, same as here.
   ========================================================================= */
@media (max-width: 900px) {

	/* [data-rsp="feat"] base: featured-procedure panels stack instead of
	   sitting side-by-side. */
	.msc-featured-panels {
		flex-direction: column;
		height: auto;
	}

	.msc-featured-panel {
		min-height: 110px;
	}
}

@media (max-width: 720px) {
	:root {
		--pad-x: 20px;
	}

	.msc-hero {
		height: 580px !important;
	}

	/* Not in the source's own responsive rules (there it just wraps onto a
	   second row) — hidden by explicit request so the utility bar doesn't
	   eat vertical space above the fold on phones; the phone number and
	   appointment CTA stay visible. */
	.msc-utility__left {
		display: none;
	}

	.msc-utility {
		justify-content: center;
	}

	/* Not in the source design (there the logo stays centered at full
	   size) — narrowed, left-aligned, and shrunk by request so it wraps
	   more compactly on phones instead of taking two centered lines. */
	.msc-logo {
		align-items: flex-start;
		text-align: left;
		max-width: 200px;
		margin: 0 auto;
	}

	.msc-logo__name {
		font-size: 22px;
	}

	.msc-detail-col .msc-detail-points__bullets {
		grid-template-columns: 1fr;
	}

	.msc-credentials {
		padding: 36px var(--pad-x);
	}

	/* Base rule hardcodes 56px left/right padding and a minmax(220px,1fr)
	   grid column — both were wider than a phone viewport can hold, so the
	   grid overflowed and read as uneven/oversized padding. Equal, smaller
	   padding plus a single stacked column fixes it. */
	.msc-footer__grid {
		padding: 40px var(--pad-x) 24px;
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.msc-credentials__cta {
		font-size: 20px;
		margin-bottom: 26px;
	}

	.msc-credentials__track {
		gap: 32px;
		padding-right: 32px;
	}

	.msc-credentials__logos img {
		height: 40px;
		max-width: 120px;
	}

	.msc-logo__sub {
		font-size: 9px;
	}

	/* Section headers ("Featured procedures", "What we treat",
	   "Patient video highlights") pair a large serif heading with a link
	   on the same row via justify-content:space-between. On a narrow
	   phone the heading's own intrinsic width crowds the link into a
	   sliver, wrapping it one word per line — stack them instead. */
	.msc-section-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
}

@media (max-width: 1100px) {

	/* Override BOTH width-formula variables here, not individual selectors
	   — a growing list of "which selector used the variable" was already
	   missed twice (.msc-footer for --msc-band-margin, then
	   .msc-wistia-section for --msc-container, each shipping a horizontal-
	   overflow bug before being caught). --msc-container's calc(90vw - 4in)
	   goes negative below ~640px viewport width; --msc-band-margin's
	   calc(5vw + 2in) does the same below ~640px. Redefining both
	   variables fixes every current AND future consumer of either one in
	   this single place, permanently closing off that whole bug class. */
	:root {
		--msc-band-margin: 16px;
		--msc-container: none;
	}

	.msc-hero,
	.msc-band {
		margin: 16px !important;
	}

	.msc-map-card {
		margin: 20px !important;
		max-width: calc(100% - 40px) !important;
		padding: 28px 26px !important;
	}

	.msc-about-hero__grid,
	.msc-index-grid,
	.msc-detail-grid,
	.msc-detail-row {
		grid-template-columns: 1fr !important;
	}

	.msc-detail-intro {
		flex-direction: column;
		gap: 20px;
	}

	.msc-detail-intro__media {
		flex-basis: auto;
		width: 100%;
		max-width: 420px;
	}

	.msc-detail-section--with-img,
	.msc-detail-section--with-img.msc-detail-section--img-right {
		flex-direction: column;
		gap: 16px;
	}

	.msc-detail-section__media {
		flex-basis: auto;
		width: 100%;
		max-width: 420px;
	}

	.msc-detail-points--with-img,
	.msc-detail-points--with-img.msc-detail-points--img-right {
		flex-direction: column;
		gap: 16px;
	}

	.msc-detail-points--with-img .msc-detail-points__media {
		flex-basis: auto;
		width: 100%;
		max-width: 420px;
	}

	.msc-review-band__grid {
		grid-template-columns: 1fr !important;
		padding: 36px 28px !important;
	}

	.msc-review-band__side {
		border-right: none !important;
		padding-right: 0 !important;
		border-bottom: 1px solid rgba(216, 201, 163, 0.25);
		padding-bottom: 24px;
	}

	.msc-hero__quotes-track span {
		font-size: 36px !important;
	}

	.msc-hero__title {
		font-size: 28px !important;
	}

	.msc-hero__desc {
		font-size: 14px !important;
	}

	.msc-hero__pill {
		display: none !important;
	}

	.msc-credentials__grid {
		grid-template-columns: 1fr 1fr;
	}

	.msc-featured-panel.is-active {
		min-height: 380px;
	}

	.msc-featured-panel__short {
		writing-mode: horizontal-tb;
		bottom: 16px;
	}

	main h1 {
		font-size: 32px !important;
	}

	/* No source equivalent (the source has no responsive rule for h2 at
	   all — its own large decorative h2 headings, e.g. the Diagnosis
	   Index's "Lasting relief, precisely diagnosed.", stay full-size and
	   just rely on the column stacking above them) — added because at
	   full size those headings overwhelm a phone-width column. */
	main h2 {
		font-size: 26px !important;
		line-height: 1.25 !important;
	}

	.msc-quote-band p {
		font-size: 24px !important;
	}

	.msc-review-band__figure blockquote {
		font-size: 22px !important;
	}

	.msc-header__row {
		flex-wrap: wrap;
		justify-content: center !important;
	}

	.msc-nav {
		flex-wrap: wrap;
		justify-content: center;
	}

	/* Not in the source's literal breakpoints — the new "Diagnosis Index" /
	   detail-page sticky sidebars need to fall back to normal flow once
	   their two-column grid has already collapsed to one column above,
	   otherwise a "stuck" sidebar would float over the stacked content
	   below it. */
	.msc-index-side,
	.msc-detail-side {
		position: static;
	}
}

@media (max-width: 480px) {
	.msc-credentials__grid {
		grid-template-columns: 1fr;
	}
}

/* The rules below have no direct source equivalent — the source design
   has no card-grid/form/dark-hero components this narrow at these exact
   widths — but keep the redesign's new components usable on small phones. */
@media (max-width: 720px) {

	:root {
		--msc-mobile-bar-h: calc(46px + env(safe-area-inset-bottom, 0px));
	}

	.msc-index-grid,
	.msc-about-hero__grid,
	.msc-detail-grid {
		padding: 40px 24px !important;
	}

	.msc-dark-hero__inner {
		padding: 48px 24px;
	}

	.msc-map-card {
		width: 100%;
	}

	.msc-cookie-banner {
		padding-left: var(--pad-x);
		/* Stack above the fixed call/appointment strip instead of sitting
		   underneath it. */
		bottom: var(--msc-mobile-bar-h);
	}

	.msc-ada-btn {
		width: 48px;
		height: 48px;
		/* Clear the fixed call/appointment strip added below. */
		bottom: calc(var(--msc-mobile-bar-h) + 16px);
	}

	body {
		padding-bottom: var(--msc-mobile-bar-h);
	}

	.msc-mobile-bar {
		display: grid;
		grid-template-columns: 1fr 1fr;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 95;
		background: var(--msc-navy);
		box-shadow: 0 -8px 24px rgba(22, 40, 60, 0.35);
		/* Clears the home-indicator strip on notched iPhones instead of
		   sitting under it. */
		padding-bottom: env(safe-area-inset-bottom, 0);
	}

	.msc-mobile-bar a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		padding: 11px 6px;
		font-family: var(--msc-font-nav);
		font-size: 12.5px;
		font-weight: 600;
		letter-spacing: 0.02em;
		text-align: center;
		white-space: nowrap;
		text-decoration: none;
		color: var(--msc-cream);
	}

	.msc-mobile-bar a i {
		font-size: 12px;
	}

	.msc-mobile-bar a:first-child {
		border-right: 1px solid rgba(255, 255, 255, 0.14);
	}

	.msc-mobile-bar a:last-child {
		background: var(--msc-tan);
		color: var(--msc-navy);
	}

	.msc-ada-panel {
		width: calc(100vw - 32px);
		left: 16px;
	}

	/* Hamburger menu — not in the source design (there the nav just wraps
	   onto more rows), added by explicit request since the full nav plus
	   two dropdowns wrapping under the centered logo got unwieldy. */
	.msc-nav-burger {
		display: flex;
	}

	.msc-header__row {
		padding-right: 64px;
	}

	.msc-nav {
		display: none;
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.msc-header.is-nav-open .msc-nav {
		display: flex;
		/* .msc-header__row's padding-right is inflated to 64px so the
		   centered logo clears the absolutely-positioned burger button —
		   but that same inflated box also narrows the open nav dropdown,
		   leaving far more empty space on its right edge than its left.
		   Claw back the difference here so open menu rows sit flush and
		   equal on both sides. */
		margin-right: calc(-1 * (64px - var(--pad-x)));
	}

	.msc-nav__item {
		width: 100%;
	}

	.msc-nav__link {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		text-align: left;
		padding: 16px 24px;
		border-bottom: 1px solid var(--msc-border);
	}

	.msc-nav__caret {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 15px;
	}

	.msc-nav__dropdown {
		position: static;
		box-shadow: none;
		border: none;
		border-top: none;
		border-radius: 0;
		overflow: visible;
		width: 100%;
	}

	.msc-nav__dropdown a {
		padding: 12px 24px 12px 40px;
	}

	/* The mega-menu's 2-column grid is a desktop-hover convenience; on the
	   mobile slide-out menu it goes back to one full-width tappable row
	   per item, like every other dropdown. */
	.msc-nav__dropdown--scroll {
		grid-template-columns: none;
		min-width: 0;
		max-width: none;
		max-height: none;
		padding: 8px 0;
		overflow: visible;
		left: 0;
		transform: none;
	}

	.msc-nav__item.is-open .msc-nav__dropdown--scroll {
		display: flex;
	}

	/* The index row's third grid column (region badge + arrow) has a
	   natural minimum width it won't shrink below, which on a narrow
	   phone squeezed the text column down to almost nothing — wrapping
	   "Herniated Disc" one word per line and forcing the page to scroll
	   horizontally. Move that column onto its own row below the text
	   instead of fighting it for width. */
	.msc-index-row {
		grid-template-columns: 28px 1fr;
		grid-template-areas: "num body" "meta meta";
		row-gap: 10px;
	}

	.msc-index-row__num {
		grid-area: num;
	}

	.msc-index-row__body {
		grid-area: body;
	}

	.msc-index-row__meta {
		grid-area: meta;
		padding-left: 40px;
		justify-content: flex-start;
	}
}

@media (max-width: 480px) {
	.msc-form-row-2 {
		grid-template-columns: 1fr;
	}

	.msc-about-intro__grid,
	.msc-philosophy__grid {
		grid-template-columns: 1fr !important;
	}
}

@media print {

	.msc-ada-btn,
	.msc-ada-panel,
	.msc-cookie-banner,
	.msc-header,
	.msc-utility,
	.msc-footer {
		display: none !important;
	}
}

/* On very wide screens, cap a few site-wide/detail-page elements at
   1180px instead of letting them stretch to fill --msc-container (which
   grows unbounded with viewport width) — the Conditions/Treatments/MIS
   detail hero + content column, the footer, and the credentials band. */
@media (min-width: 1980px) {
	.msc-header__row {
		max-width: 1840px;
		width: 100%;
		margin: auto;
	}

	.msc-dark-hero--wide {
		max-width: 1840px;
		width: 100%;
		margin: auto;
	}

	.msc-detail-body--flow {
		max-width: 1840px;
	}

	.msc-detail-col {
		max-width: 1620px;
	}

	.msc-footer {
		max-width: 1840px;
		width: 100%;
		margin: 56px auto auto;
	}

	.msc-credentials__inner {
		max-width: 1840px;
		width: 100%;
		margin: auto;
	}
}

@media (min-width: 1200px) and (max-width: 1979px) {
	.msc-header__row {
		max-width: 1180px;
		width: 100%;
		margin: auto;
	}

	.msc-dark-hero--wide {
		max-width: 1180px;
		width: 100%;
		margin: auto;
	}

	.msc-detail-body--flow {
		max-width: 1260px;
	}

	.msc-detail-col {
		max-width: 1180px;
	}

	.msc-footer {
		max-width: 1180px;
		width: 100%;
		margin: 56px auto auto;
	}

	.msc-credentials__inner {
		max-width: 1180px;
		width: 100%;
		margin: auto;
	}
}