/*
 * Final visual correction layer.
 * Loaded after pmc-design.css so shared header and hero geometry stay consistent
 * on the front end and inside the Elementor canvas.
 */

html,
body {
	overflow-x: hidden !important;
}

.pmc-page {
	background: var(--pmc-hero-bg, #fff8ef) !important;
}

/* The logo image only ever gets a CSS width (height:auto derives from
   whatever the image's natural ratio turns out to be once it's actually
   downloaded), so before it loads the browser has no idea how tall it'll
   be. On a slow connection that's a real layout shift — the header's
   height (and everything in it, including the logo link and the Apply
   button next to it) jumps once the image finishes loading. A tap that
   landed correctly the instant before can miss its target entirely once
   things resettle. Reserving the image's real aspect ratio up front means
   the header has its final height from the very first paint, so nothing
   moves out from under a tap. */
.pmc-logo img {
	aspect-ratio: 1252 / 477 !important;
	height: auto !important;
}

.pmc-page .pmc-header-row,
.pmc-page .pmc-header-row *,
.elementor-editor-active .pmc-page .pmc-header-row,
.elementor-editor-preview .pmc-page .pmc-header-row,
.elementor-editor-active .pmc-page .pmc-header-row *,
.elementor-editor-preview .pmc-page .pmc-header-row *,
.elementor-editor-active .pmc-page .pmc-header-row + .elementor-add-section,
.elementor-editor-preview .pmc-page .pmc-header-row + .elementor-add-section,
.elementor-editor-active .pmc-home .pmc-hero--builder > .elementor-add-section,
.elementor-editor-preview .pmc-home .pmc-hero--builder > .elementor-add-section,
.elementor-editor-active .pmc-home .pmc-hero--builder > .elementor-container > .elementor-add-section,
.elementor-editor-preview .pmc-home .pmc-hero--builder > .elementor-container > .elementor-add-section {
	display: none !important;
	height: 0 !important;
	min-height: 0 !important;
	max-height: 0 !important;
	width: 0 !important;
	min-width: 0 !important;
	max-width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	overflow: hidden !important;
	background: transparent !important;
	border: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.pmc-page .pmc-header .pmc-btn--nav,
.pmc-home .pmc-hero__copy--widget .pmc-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
}

.pmc-page .pmc-header .pmc-btn--nav > span,
.pmc-home .pmc-hero__copy--widget .pmc-btn > span {
	display: inline-block !important;
	line-height: 1 !important;
	transform: translateY(1px) !important;
}

@media (min-width: 901px) {
	.pmc-page .pmc-header {
		position: absolute !important;
		inset: 0 0 auto 0 !important;
		display: block !important;
		height: 0 !important;
		min-height: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
		background: transparent !important;
		overflow: visible !important;
		z-index: 120 !important;
		pointer-events: none !important;
	}

	.pmc-page .pmc-header::before,
	.pmc-page .pmc-header::after {
		display: none !important;
	}

	.pmc-page .pmc-header__inner {
		position: absolute !important;
		inset: 0 !important;
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		height: 0 !important;
		min-height: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
		pointer-events: auto !important;
	}

	.pmc-page .pmc-header .pmc-logo {
		position: absolute !important;
		top: clamp(28px, 2.32vw, 47px) !important;
		left: clamp(112px, 10.94vw, 224px) !important;
		display: block !important;
		margin: 0 !important;
		padding: 0 !important;
		transform: none !important;
		z-index: 130 !important;
	}

	.pmc-page .pmc-header .pmc-logo img {
		display: block !important;
		width: clamp(278px, 17.97vw, 368px) !important;
		max-width: none !important;
		height: auto !important;
		margin: 0 !important;
	}

	.pmc-page .pmc-nav__link {
		position: absolute !important;
		top: clamp(55px, 4.49vw, 92px) !important;
		left: 50% !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		margin: 0 !important;
		padding: 0 !important;
		transform: translateX(-50%) !important;
		color: var(--navy) !important;
		font-family: "URW Geometric", "Montserrat", Arial, sans-serif !important;
		font-size: clamp(13px, .84vw, 17px) !important;
		font-weight: 800 !important;
		line-height: 1 !important;
		letter-spacing: .08em !important;
		text-transform: uppercase !important;
		white-space: nowrap !important;
		z-index: 130 !important;
	}

	.pmc-page .pmc-header .pmc-btn--nav {
		position: absolute !important;
		top: clamp(29px, 2.59vw, 53px) !important;
		right: clamp(48px, 4.69vw, 96px) !important;
		width: auto !important;
		min-width: clamp(236px, 15.33vw, 314px) !important;
		min-height: clamp(58px, 3.91vw, 80px) !important;
		margin: 0 !important;
		padding: 0 clamp(30px, 2.25vw, 46px) !important;
		gap: clamp(9px, .68vw, 14px) !important;
		border-radius: 999px !important;
		font-family: "URW Geometric", "Montserrat", Arial, sans-serif !important;
		font-size: clamp(13px, .9vw, 18px) !important;
		font-weight: 800 !important;
		line-height: 1 !important;
		letter-spacing: .045em !important;
		text-transform: uppercase !important;
		white-space: nowrap !important;
		z-index: 130 !important;
	}

	.pmc-page .pmc-header .pmc-btn--nav .pmc-btn__paw {
		display: block !important;
		flex: 0 0 auto !important;
		width: clamp(22px, 1.42vw, 29px) !important;
		height: auto !important;
		margin: 0 !important;
	}

	.pmc-home .pmc-hero--builder,
	.elementor-editor-active .pmc-home .pmc-hero--builder,
	.elementor-editor-preview .pmc-home .pmc-hero--builder {
		position: relative !important;
		display: block !important;
		min-height: clamp(620px, 43.08vw, 882px) !important;
		padding: clamp(186px, 14.16vw, 290px) 0 0 !important;
		margin: 0 !important;
		background: var(--pmc-hero-bg, #fff8ef) !important;
		overflow: hidden !important;
		isolation: isolate !important;
	}

	.pmc-home .pmc-hero--builder > .elementor-container,
	.elementor-editor-active .pmc-home .pmc-hero--builder > .elementor-container,
	.elementor-editor-preview .pmc-home .pmc-hero--builder > .elementor-container {
		position: relative !important;
		display: block !important;
		width: min(1844px, calc(100% - clamp(112px, 9.96vw, 204px))) !important;
		max-width: none !important;
		min-height: clamp(420px, 28.96vw, 593px) !important;
		height: auto !important;
		margin: 0 auto !important;
		padding: 0 !important;
	}

	.pmc-home .pmc-hero-copy-column,
	.elementor-editor-active .pmc-home .pmc-hero-copy-column,
	.elementor-editor-preview .pmc-home .pmc-hero-copy-column {
		position: absolute !important;
		top: 0 !important;
		left: clamp(36px, 2.54vw, 52px) !important;
		display: block !important;
		width: clamp(430px, 27vw, 553px) !important;
		max-width: none !important;
		min-height: 0 !important;
		height: auto !important;
		padding: 0 !important;
		margin: 0 !important;
		z-index: 20 !important;
	}

	.pmc-home .pmc-hero-cat-column,
	.elementor-editor-active .pmc-home .pmc-hero-cat-column,
	.elementor-editor-preview .pmc-home .pmc-hero-cat-column {
		position: absolute !important;
		inset: 0 !important;
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		min-height: 0 !important;
		height: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
		z-index: 8 !important;
		pointer-events: none !important;
	}

	.pmc-home .pmc-hero-copy-column > .elementor-widget-wrap,
	.pmc-home .pmc-hero-cat-column > .elementor-widget-wrap,
	.pmc-home .pmc-hero-copy-column .elementor-widget,
	.pmc-home .pmc-hero-cat-column .elementor-widget,
	.pmc-home .pmc-hero-copy-column .elementor-widget-container,
	.pmc-home .pmc-hero-cat-column .elementor-widget-container {
		position: static !important;
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		height: auto !important;
		min-height: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.pmc-home .pmc-hero__copy--widget,
	.elementor-editor-active .pmc-home .pmc-hero__copy--widget,
	.elementor-editor-preview .pmc-home .pmc-hero__copy--widget {
		position: relative !important;
		display: block !important;
		width: clamp(430px, 27vw, 553px) !important;
		max-width: none !important;
		padding: clamp(6px, .52vw, 11px) 0 0 !important;
		margin: 0 !important;
		text-align: left !important;
		z-index: 22 !important;
	}

	.pmc-home .pmc-hero__copy--widget .pmc-hero__title {
		position: relative !important;
		display: block !important;
		margin: 0 !important;
		padding: 0 !important;
		line-height: 1 !important;
	}

	.pmc-home .pmc-hero__copy--widget .pmc-hero__title-main {
		display: block !important;
		font-family: "Sabon Paneuropean", "Sabon LT Paneuropean", "Playfair Display", Georgia, serif !important;
		font-size: clamp(80px, 5.56vw, 114px) !important;
		font-weight: 600 !important;
		line-height: .91 !important;
		letter-spacing: 0 !important;
		color: var(--navy) !important;
		white-space: nowrap !important;
	}

	.pmc-home .pmc-hero__copy--widget .pmc-hero__love-wrap {
		display: block !important;
		width: clamp(382px, 25.98vw, 532px) !important;
		max-width: none !important;
		margin: clamp(-9px, -.34vw, -4px) 0 0 clamp(-8px, -.38vw, -4px) !important;
		padding: 0 !important;
		line-height: 0 !important;
		transform: none !important;
	}

	.pmc-home .pmc-hero__copy--widget .pmc-hero__love-art {
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		height: auto !important;
		margin: 0 !important;
	}

	.pmc-home .pmc-hero__copy--widget .pmc-hero__spark-heart {
		position: absolute !important;
		top: clamp(-44px, -2.15vw, -28px) !important;
		left: clamp(346px, 25.1vw, 514px) !important;
		display: block !important;
		width: clamp(64px, 4.25vw, 87px) !important;
		max-width: none !important;
		height: auto !important;
		margin: 0 !important;
		z-index: 28 !important;
	}

	.pmc-home .pmc-hero__copy--widget p {
		display: block !important;
		width: clamp(300px, 20.62vw, 422px) !important;
		max-width: none !important;
		margin: clamp(30px, 2.1vw, 43px) 0 clamp(30px, 2.05vw, 42px) 4px !important;
		padding: 0 !important;
		color: var(--navy) !important;
		font-family: "URW Geometric", "Montserrat", Arial, sans-serif !important;
		font-size: clamp(18px, 1.17vw, 24px) !important;
		font-weight: 500 !important;
		line-height: 1.62 !important;
		letter-spacing: 0 !important;
		text-align: left !important;
	}

	.pmc-home .pmc-hero__copy--widget .pmc-btn {
		width: auto !important;
		min-width: clamp(320px, 20.02vw, 410px) !important;
		min-height: clamp(54px, 3.42vw, 70px) !important;
		margin: 0 !important;
		padding: 0 clamp(24px, 1.76vw, 36px) !important;
		gap: clamp(10px, .8vw, 16px) !important;
		border-radius: 999px !important;
		font-family: "URW Geometric", "Montserrat", Arial, sans-serif !important;
		font-size: clamp(13px, .78vw, 16px) !important;
		font-weight: 800 !important;
		line-height: 1 !important;
		letter-spacing: .045em !important;
		text-transform: uppercase !important;
		white-space: nowrap !important;
	}

	.pmc-home .pmc-hero__copy--widget .pmc-btn .pmc-btn__paw {
		display: block !important;
		flex: 0 0 auto !important;
		width: clamp(22px, 1.28vw, 26px) !important;
		height: auto !important;
		margin: 0 !important;
	}

	.pmc-home .pmc-hero__cat--widget,
	.elementor-editor-active .pmc-home .pmc-hero__cat--widget,
	.elementor-editor-preview .pmc-home .pmc-hero__cat--widget {
		position: absolute !important;
		top: clamp(-154px, -7.45vw, -92px) !important;
		right: clamp(-4px, 3.05vw, 62px) !important;
		left: auto !important;
		display: block !important;
		width: clamp(836px, 55vw, 1126px) !important;
		max-width: none !important;
		height: auto !important;
		margin: 0 !important;
		transform: none !important;
		z-index: 8 !important;
		pointer-events: none !important;
	}

	.pmc-home .pmc-hero--builder::before {
		content: "" !important;
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		display: block !important;
		width: clamp(170px, 11.47vw, 235px) !important;
		aspect-ratio: 150 / 168 !important;
		background: url("assets/blob-green-hq.png") left top / contain no-repeat !important;
		z-index: 2 !important;
		pointer-events: none !important;
	}

	.pmc-home .pmc-hero--builder::after {
		content: "" !important;
		position: absolute !important;
		top: clamp(250px, 22.55vw, 462px) !important;
		right: clamp(-14px, -.49vw, -8px) !important;
		bottom: auto !important;
		display: block !important;
		width: clamp(166px, 10.5vw, 215px) !important;
		aspect-ratio: 158 / 312 !important;
		background: url("assets/blob-orange-hq.png") right top / contain no-repeat !important;
		z-index: 10 !important;
		pointer-events: none !important;
	}

	.pmc-home .pmc-hero--builder > .elementor-container::before {
		content: "" !important;
		position: absolute !important;
		top: clamp(-22px, -1.45vw, -14px) !important;
		right: clamp(16px, 1.75vw, 36px) !important;
		display: block !important;
		width: clamp(48px, 3.08vw, 63px) !important;
		aspect-ratio: 1 / 1 !important;
		background: url("assets/sage-heart-hq.png") center / contain no-repeat !important;
		z-index: 24 !important;
		pointer-events: none !important;
	}
}

@media (max-width: 900px) {
	.pmc-page .pmc-header,
	.pmc-home .pmc-header,
	.pmc-story-page .pmc-header {
		position: relative !important;
		inset: auto !important;
		display: block !important;
		height: auto !important;
		min-height: 0 !important;
		padding: clamp(14px, 3.8vw, 24px) 0 clamp(10px, 2.8vw, 18px) !important;
		margin: 0 !important;
		background: var(--pmc-hero-bg, #fff8ef) !important;
		overflow: hidden !important;
		z-index: 100 !important;
		pointer-events: auto !important;
	}

	/* On mobile the header is a normal-flow block sitting directly above the
	   page's first section (on desktop it's an absolute overlay, so this
	   never shows there) — its background above has to match whatever that
	   first section actually paints, or the two read as a visible seam.
	   Home and plain pages (Disclaimer) both start on the page's own
	   fff8ef background, matching the shared rule above, but Our Story,
	   Kittens, and Apply each open with a --cream row instead. Targeting by
	   "does this page contain that row anywhere" (:has) is more reliable
	   than body class, since Disclaimer shares the .pmc-story-page body
	   class with Our Story despite using a different background. */
	.pmc-page:has(.pmc-story-row) .pmc-header,
	.pmc-page:has(.pmc-kittens-row) .pmc-header,
	.pmc-page:has(.pmc-apply-row) .pmc-header,
	.pmc-page:has(.pmc-schedule-row) .pmc-header {
		background: var(--cream, #f9f0e8) !important;
	}

	.pmc-page .pmc-header::before,
	.pmc-home .pmc-header::before,
	.pmc-story-page .pmc-header::before {
		content: "" !important;
		position: absolute !important;
		top: clamp(-34px, -5vw, -18px) !important;
		left: clamp(-42px, -6vw, -26px) !important;
		display: block !important;
		width: clamp(124px, 23vw, 190px) !important;
		aspect-ratio: 150 / 168 !important;
		background: url("assets/blob-green-hq.png") left top / contain no-repeat !important;
		z-index: 0 !important;
		pointer-events: none !important;
	}

	.pmc-page .pmc-header::after,
	.pmc-home .pmc-header::after,
	.pmc-story-page .pmc-header::after {
		display: none !important;
	}

	.pmc-page .pmc-header__inner,
	.pmc-home .pmc-header__inner,
	.pmc-story-page .pmc-header__inner {
		position: relative !important;
		z-index: 2 !important;
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		justify-content: center !important;
		width: min(720px, calc(100% - 28px)) !important;
		max-width: none !important;
		height: auto !important;
		min-height: 0 !important;
		margin: 0 auto !important;
		padding: 0 !important;
		gap: 10px 16px !important;
	}

	.pmc-page .pmc-header .pmc-logo,
	.pmc-home .pmc-header .pmc-logo,
	.pmc-story-page .pmc-header .pmc-logo {
		position: relative !important;
		inset: auto !important;
		order: 1 !important;
		flex: 0 0 100% !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		margin: 0 !important;
		padding: 0 !important;
		transform: none !important;
	}

	.pmc-page .pmc-header .pmc-logo img,
	.pmc-home .pmc-header .pmc-logo img,
	.pmc-story-page .pmc-header .pmc-logo img {
		display: block !important;
		width: clamp(190px, 34vw, 258px) !important;
		max-width: 68vw !important;
		height: auto !important;
		margin: 0 auto !important;
	}

	.pmc-page .pmc-nav__link,
	.pmc-home .pmc-nav__link,
	.pmc-story-page .pmc-nav__link {
		position: relative !important;
		inset: auto !important;
		order: 2 !important;
		flex: 0 1 auto !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		min-height: 32px !important;
		margin: 0 !important;
		padding: 6px 2px !important;
		transform: none !important;
		color: var(--navy) !important;
		font-family: "URW Geometric", "Montserrat", Arial, sans-serif !important;
		font-size: clamp(11px, 1.8vw, 13px) !important;
		font-weight: 800 !important;
		line-height: 1 !important;
		letter-spacing: .08em !important;
		text-transform: uppercase !important;
		text-align: center !important;
		white-space: nowrap !important;
	}

	.pmc-page .pmc-header .pmc-btn--nav,
	.pmc-home .pmc-header .pmc-btn--nav,
	.pmc-story-page .pmc-header .pmc-btn--nav {
		position: relative !important;
		inset: auto !important;
		order: 3 !important;
		flex: 0 1 auto !important;
		width: auto !important;
		min-width: min(232px, 72vw) !important;
		min-height: 42px !important;
		margin: 0 !important;
		padding: 0 17px !important;
		gap: 8px !important;
		border-radius: 999px !important;
		transform: none !important;
		font-family: "URW Geometric", "Montserrat", Arial, sans-serif !important;
		font-size: clamp(10px, 1.75vw, 12px) !important;
		font-weight: 800 !important;
		line-height: 1 !important;
		letter-spacing: .045em !important;
		text-transform: uppercase !important;
		text-align: center !important;
		white-space: nowrap !important;
	}

	.pmc-page .pmc-header .pmc-btn--nav .pmc-btn__paw,
	.pmc-home .pmc-header .pmc-btn--nav .pmc-btn__paw,
	.pmc-story-page .pmc-header .pmc-btn--nav .pmc-btn__paw {
		display: block !important;
		flex: 0 0 auto !important;
		width: 18px !important;
		height: auto !important;
		margin: 0 !important;
	}

	.pmc-home .pmc-hero--builder,
	.elementor-editor-active .pmc-home .pmc-hero--builder,
	.elementor-editor-preview .pmc-home .pmc-hero--builder {
		position: relative !important;
		display: block !important;
		min-height: 0 !important;
		padding: clamp(10px, 3.4vw, 28px) 0 0 !important;
		margin: 0 !important;
		background: var(--pmc-hero-bg, #fff8ef) !important;
		overflow: hidden !important;
		isolation: isolate !important;
	}

	.pmc-home .pmc-hero--builder::before {
		display: none !important;
	}

	.pmc-home .pmc-hero--builder > .elementor-container,
	.elementor-editor-active .pmc-home .pmc-hero--builder > .elementor-container,
	.elementor-editor-preview .pmc-home .pmc-hero--builder > .elementor-container {
		position: relative !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: flex-start !important;
		width: min(720px, calc(100% - 32px)) !important;
		max-width: none !important;
		min-height: 0 !important;
		height: auto !important;
		margin: 0 auto !important;
		padding: 0 !important;
		gap: 0 !important;
	}

	.pmc-home .pmc-hero-copy-column,
	.elementor-editor-active .pmc-home .pmc-hero-copy-column,
	.elementor-editor-preview .pmc-home .pmc-hero-copy-column {
		position: relative !important;
		inset: auto !important;
		order: 1 !important;
		display: block !important;
		width: min(460px, 100%) !important;
		max-width: none !important;
		min-height: 0 !important;
		height: auto !important;
		margin: 0 auto !important;
		padding: 0 !important;
		z-index: 18 !important;
	}

	.pmc-home .pmc-hero-cat-column,
	.elementor-editor-active .pmc-home .pmc-hero-cat-column,
	.elementor-editor-preview .pmc-home .pmc-hero-cat-column {
		position: relative !important;
		inset: auto !important;
		order: 2 !important;
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		min-height: 0 !important;
		height: auto !important;
		margin: 0 auto !important;
		padding: 0 !important;
		z-index: 6 !important;
		pointer-events: none !important;
	}

	.pmc-home .pmc-hero-copy-column > .elementor-widget-wrap,
	.pmc-home .pmc-hero-cat-column > .elementor-widget-wrap,
	.pmc-home .pmc-hero-copy-column .elementor-widget,
	.pmc-home .pmc-hero-cat-column .elementor-widget,
	.pmc-home .pmc-hero-copy-column .elementor-widget-container,
	.pmc-home .pmc-hero-cat-column .elementor-widget-container {
		position: static !important;
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		height: auto !important;
		min-height: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.pmc-home .pmc-hero__copy--widget,
	.elementor-editor-active .pmc-home .pmc-hero__copy--widget,
	.elementor-editor-preview .pmc-home .pmc-hero__copy--widget {
		position: relative !important;
		display: block !important;
		width: min(460px, 100%) !important;
		max-width: none !important;
		margin: 0 auto !important;
		padding: 4px 0 0 !important;
		text-align: center !important;
		z-index: 20 !important;
	}

	.pmc-home .pmc-hero__copy--widget .pmc-hero__title {
		position: relative !important;
		display: block !important;
		margin: 0 !important;
		padding: 0 !important;
		line-height: 1 !important;
	}

	.pmc-home .pmc-hero__copy--widget .pmc-hero__title-main {
		display: block !important;
		font-family: "Sabon Paneuropean", "Sabon LT Paneuropean", "Playfair Display", Georgia, serif !important;
		font-size: clamp(54px, 11vw, 80px) !important;
		font-weight: 600 !important;
		line-height: .93 !important;
		letter-spacing: 0 !important;
		color: var(--navy) !important;
		text-align: center !important;
		white-space: nowrap !important;
	}

	.pmc-home .pmc-hero__copy--widget .pmc-hero__love-wrap {
		display: block !important;
		width: min(378px, 88vw) !important;
		max-width: none !important;
		margin: -3px auto 0 !important;
		padding: 0 !important;
		line-height: 0 !important;
		transform: none !important;
	}

	.pmc-home .pmc-hero__copy--widget .pmc-hero__love-art {
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		height: auto !important;
		margin: 0 !important;
	}

	.pmc-home .pmc-hero__copy--widget .pmc-hero__spark-heart {
		position: absolute !important;
		top: -26px !important;
		left: calc(50% + min(114px, 29vw)) !important;
		display: block !important;
		width: clamp(46px, 8vw, 58px) !important;
		max-width: none !important;
		height: auto !important;
		margin: 0 !important;
		z-index: 26 !important;
	}

	.pmc-home .pmc-hero__copy--widget p {
		display: block !important;
		width: min(330px, 86vw) !important;
		max-width: none !important;
		margin: 22px auto 24px !important;
		padding: 0 !important;
		color: var(--navy) !important;
		font-family: "URW Geometric", "Montserrat", Arial, sans-serif !important;
		font-size: clamp(16px, 2.55vw, 18px) !important;
		font-weight: 500 !important;
		line-height: 1.58 !important;
		letter-spacing: 0 !important;
		text-align: center !important;
	}

	.pmc-home .pmc-hero__copy--widget .pmc-btn {
		width: min(352px, 100%) !important;
		min-width: 0 !important;
		min-height: clamp(52px, 8vw, 58px) !important;
		margin: 0 auto !important;
		padding: 0 20px !important;
		gap: 10px !important;
		border-radius: 999px !important;
		font-family: "URW Geometric", "Montserrat", Arial, sans-serif !important;
		font-size: 12px !important;
		font-weight: 800 !important;
		line-height: 1 !important;
		letter-spacing: .045em !important;
		text-transform: uppercase !important;
		text-align: center !important;
		white-space: nowrap !important;
	}

	.pmc-home .pmc-hero__copy--widget .pmc-btn .pmc-btn__paw {
		display: block !important;
		flex: 0 0 auto !important;
		width: 20px !important;
		height: auto !important;
		margin: 0 !important;
	}

	.pmc-home .pmc-hero__cat--widget,
	.elementor-editor-active .pmc-home .pmc-hero__cat--widget,
	.elementor-editor-preview .pmc-home .pmc-hero__cat--widget {
		position: relative !important;
		inset: auto !important;
		left: 50% !important;
		display: block !important;
		width: min(650px, 116vw) !important;
		max-width: none !important;
		height: auto !important;
		margin: clamp(8px, 2vw, 14px) 0 0 !important;
		transform: translateX(-50%) !important;
		z-index: 6 !important;
		pointer-events: none !important;
	}

	.pmc-home .pmc-hero--builder::after {
		content: "" !important;
		position: absolute !important;
		right: -58px !important;
		bottom: -20px !important;
		top: auto !important;
		display: block !important;
		width: clamp(136px, 20vw, 165px) !important;
		aspect-ratio: 158 / 312 !important;
		background: url("assets/blob-orange-hq.png") right bottom / contain no-repeat !important;
		z-index: 9 !important;
		pointer-events: none !important;
	}

	.pmc-home .pmc-hero--builder > .elementor-container::before {
		content: "" !important;
		position: absolute !important;
		top: 5px !important;
		right: max(0px, 4vw) !important;
		display: block !important;
		width: clamp(34px, 6vw, 42px) !important;
		aspect-ratio: 1 / 1 !important;
		background: url("assets/sage-heart-hq.png") center / contain no-repeat !important;
		z-index: 25 !important;
		pointer-events: none !important;
	}
}

@media (max-width: 560px) {
	.pmc-page .pmc-header,
	.pmc-home .pmc-header,
	.pmc-story-page .pmc-header {
		padding: 14px 0 10px !important;
	}

	.pmc-page .pmc-header::before,
	.pmc-home .pmc-header::before,
	.pmc-story-page .pmc-header::before {
		top: -21px !important;
		left: -35px !important;
		width: 124px !important;
	}

	.pmc-page .pmc-header__inner,
	.pmc-home .pmc-header__inner,
	.pmc-story-page .pmc-header__inner {
		width: min(370px, calc(100% - 28px)) !important;
		gap: 8px 12px !important;
	}

	.pmc-page .pmc-header .pmc-logo img,
	.pmc-home .pmc-header .pmc-logo img,
	.pmc-story-page .pmc-header .pmc-logo img {
		width: min(214px, 62vw) !important;
		max-width: 68vw !important;
	}

	.pmc-page .pmc-nav__link,
	.pmc-home .pmc-nav__link,
	.pmc-story-page .pmc-nav__link {
		min-height: 28px !important;
		padding: 5px 0 !important;
		font-size: 10.5px !important;
	}

	.pmc-page .pmc-header .pmc-btn--nav,
	.pmc-home .pmc-header .pmc-btn--nav,
	.pmc-story-page .pmc-header .pmc-btn--nav {
		min-width: min(218px, 70vw) !important;
		min-height: 39px !important;
		padding: 0 14px !important;
		gap: 7px !important;
		font-size: 10px !important;
	}

	.pmc-home .pmc-hero--builder,
	.elementor-editor-active .pmc-home .pmc-hero--builder,
	.elementor-editor-preview .pmc-home .pmc-hero--builder {
		padding-top: 18px !important;
	}

	.pmc-home .pmc-hero--builder > .elementor-container,
	.elementor-editor-active .pmc-home .pmc-hero--builder > .elementor-container,
	.elementor-editor-preview .pmc-home .pmc-hero--builder > .elementor-container {
		width: min(364px, calc(100% - 28px)) !important;
	}

	.pmc-home .pmc-hero-copy-column,
	.elementor-editor-active .pmc-home .pmc-hero-copy-column,
	.elementor-editor-preview .pmc-home .pmc-hero-copy-column {
		width: min(350px, 100%) !important;
	}

	.pmc-home .pmc-hero__copy--widget .pmc-hero__title-main {
		font-size: clamp(48px, 16vw, 61px) !important;
	}

	.pmc-home .pmc-hero__copy--widget .pmc-hero__love-wrap {
		width: min(318px, 91vw) !important;
	}

	.pmc-home .pmc-hero__copy--widget .pmc-hero__spark-heart {
		top: -25px !important;
		left: calc(50% + min(98px, 28vw)) !important;
		width: 45px !important;
	}

	.pmc-home .pmc-hero__copy--widget p {
		width: min(292px, 86vw) !important;
		margin-top: 20px !important;
		margin-bottom: 22px !important;
		font-size: 16px !important;
	}

	.pmc-home .pmc-hero__copy--widget .pmc-btn {
		width: min(326px, 100%) !important;
		min-height: 52px !important;
	}

	.pmc-home .pmc-hero__cat--widget,
	.elementor-editor-active .pmc-home .pmc-hero__cat--widget,
	.elementor-editor-preview .pmc-home .pmc-hero__cat--widget {
		width: min(470px, 116vw) !important;
		margin-top: 8px !important;
	}

	.pmc-home .pmc-hero--builder::after {
		right: -72px !important;
		width: 136px !important;
	}

	.pmc-home .pmc-hero--builder > .elementor-container::before {
		top: 4px !important;
		right: -2px !important;
		width: 33px !important;
	}
}

@media (max-width: 390px) {
	.pmc-page .pmc-header .pmc-btn--nav,
	.pmc-home .pmc-header .pmc-btn--nav,
	.pmc-story-page .pmc-header .pmc-btn--nav {
		flex-basis: min(272px, 100%) !important;
	}

	.pmc-home .pmc-hero__copy--widget .pmc-hero__title-main {
		font-size: clamp(45px, 15vw, 56px) !important;
	}

	.pmc-home .pmc-hero__copy--widget .pmc-hero__love-wrap {
		width: min(296px, 90vw) !important;
	}

	.pmc-home .pmc-hero__copy--widget .pmc-btn {
		width: min(306px, 100%) !important;
	}
}

/*
 * Mobile hero polish.
 * The HTML design reads better on phones with the cat leading the hero, one
 * red accent heart near the title, and the copy/button aligned as a clean
 * block below the image.
 */
@media (max-width: 900px) {
	.pmc-home .pmc-hero--builder,
	.elementor-editor-active .pmc-home .pmc-hero--builder,
	.elementor-editor-preview .pmc-home .pmc-hero--builder {
		padding: clamp(4px, 2vw, 16px) 0 0 !important;
		overflow: hidden !important;
	}

	.pmc-home .pmc-hero--builder > .elementor-container,
	.elementor-editor-active .pmc-home .pmc-hero--builder > .elementor-container,
	.elementor-editor-preview .pmc-home .pmc-hero--builder > .elementor-container {
		width: 100% !important;
		max-width: none !important;
		align-items: stretch !important;
	}

	.pmc-home .pmc-hero-cat-column,
	.elementor-editor-active .pmc-home .pmc-hero-cat-column,
	.elementor-editor-preview .pmc-home .pmc-hero-cat-column {
		order: 1 !important;
		width: 100% !important;
		margin: 0 auto clamp(10px, 2.4vw, 18px) !important;
		z-index: 6 !important;
	}

	.pmc-home .pmc-hero-copy-column,
	.elementor-editor-active .pmc-home .pmc-hero-copy-column,
	.elementor-editor-preview .pmc-home .pmc-hero-copy-column {
		order: 2 !important;
		width: min(700px, calc(100% - 40px)) !important;
		margin: 0 auto !important;
		z-index: 18 !important;
	}

	.pmc-home .pmc-hero__copy--widget,
	.elementor-editor-active .pmc-home .pmc-hero__copy--widget,
	.elementor-editor-preview .pmc-home .pmc-hero__copy--widget {
		width: 100% !important;
		text-align: left !important;
		padding: 0 !important;
	}

	.pmc-home .pmc-hero__cat--widget,
	.elementor-editor-active .pmc-home .pmc-hero__cat--widget,
	.elementor-editor-preview .pmc-home .pmc-hero__cat--widget {
		left: 50% !important;
		width: min(836px, 145vw) !important;
		margin: 0 auto !important;
		transform: translateX(-50%) !important;
	}

	.pmc-home .pmc-hero--builder > .elementor-container::before,
	.elementor-editor-active .pmc-home .pmc-hero--builder > .elementor-container::before,
	.elementor-editor-preview .pmc-home .pmc-hero--builder > .elementor-container::before {
		content: none !important;
		display: none !important;
	}

	.pmc-home .pmc-hero__copy--widget .pmc-hero__title-main {
		font-size: clamp(54px, 10.5vw, 76px) !important;
		line-height: .92 !important;
		text-align: left !important;
	}

	.pmc-home .pmc-hero__copy--widget .pmc-hero__love-wrap {
		width: min(430px, 75vw) !important;
		margin: -5px 0 0 clamp(54px, 12vw, 96px) !important;
	}

	.pmc-home .pmc-hero__copy--widget .pmc-hero__spark-heart {
		top: -14px !important;
		left: clamp(318px, 57vw, 430px) !important;
		width: clamp(42px, 6.3vw, 54px) !important;
	}

	.pmc-home .pmc-hero__copy--widget p {
		width: min(680px, 100%) !important;
		margin: clamp(22px, 3vw, 30px) 0 clamp(24px, 3vw, 34px) !important;
		font-size: clamp(17px, 2.35vw, 21px) !important;
		line-height: 1.55 !important;
		text-align: left !important;
	}

	.pmc-home .pmc-hero__copy--widget .pmc-btn {
		width: 100% !important;
		max-width: 640px !important;
		min-height: clamp(56px, 7vw, 68px) !important;
		margin: 0 auto clamp(14px, 3vw, 22px) !important;
		font-size: clamp(12px, 1.9vw, 15px) !important;
	}

	.pmc-home .pmc-hero--builder::after {
		right: clamp(-88px, -8vw, -48px) !important;
		bottom: 0 !important;
		width: clamp(150px, 23vw, 210px) !important;
	}
}

@media (max-width: 560px) {
	.pmc-home .pmc-hero-cat-column,
	.elementor-editor-active .pmc-home .pmc-hero-cat-column,
	.elementor-editor-preview .pmc-home .pmc-hero-cat-column {
		margin-bottom: 8px !important;
	}

	.pmc-home .pmc-hero__cat--widget,
	.elementor-editor-active .pmc-home .pmc-hero__cat--widget,
	.elementor-editor-preview .pmc-home .pmc-hero__cat--widget {
		width: min(627px, 150vw) !important;
	}

	.pmc-home .pmc-hero-copy-column,
	.elementor-editor-active .pmc-home .pmc-hero-copy-column,
	.elementor-editor-preview .pmc-home .pmc-hero-copy-column {
		width: calc(100% - 36px) !important;
	}

	.pmc-home .pmc-hero__copy--widget .pmc-hero__title-main {
		font-size: clamp(46px, 15.2vw, 62px) !important;
	}

	.pmc-home .pmc-hero__copy--widget .pmc-hero__love-wrap {
		width: min(332px, 77vw) !important;
		margin: -4px 0 0 clamp(42px, 13vw, 68px) !important;
	}

	.pmc-home .pmc-hero__copy--widget .pmc-hero__spark-heart {
		top: -12px !important;
		left: clamp(250px, 63vw, 300px) !important;
		width: 42px !important;
	}

	.pmc-home .pmc-hero__copy--widget p {
		width: 100% !important;
		margin-top: 20px !important;
		margin-bottom: 22px !important;
		font-size: 16px !important;
	}

	.pmc-home .pmc-hero__copy--widget .pmc-btn {
		width: 100% !important;
		max-width: none !important;
		min-height: 54px !important;
	}

	.pmc-home .pmc-hero--builder::after {
		right: -86px !important;
		bottom: 0 !important;
		width: 158px !important;
	}
}

@media (max-width: 390px) {
	.pmc-home .pmc-hero__cat--widget,
	.elementor-editor-active .pmc-home .pmc-hero__cat--widget,
	.elementor-editor-preview .pmc-home .pmc-hero__cat--widget {
		width: min(572px, 151vw) !important;
	}

	.pmc-home .pmc-hero-copy-column,
	.elementor-editor-active .pmc-home .pmc-hero-copy-column,
	.elementor-editor-preview .pmc-home .pmc-hero-copy-column {
		width: calc(100% - 30px) !important;
	}

	.pmc-home .pmc-hero__copy--widget .pmc-hero__title-main {
		font-size: clamp(43px, 14.4vw, 54px) !important;
	}

	.pmc-home .pmc-hero__copy--widget .pmc-hero__love-wrap {
		width: min(292px, 77vw) !important;
		margin-left: clamp(34px, 12vw, 48px) !important;
	}

	.pmc-home .pmc-hero__copy--widget .pmc-hero__spark-heart {
		top: -10px !important;
		left: clamp(218px, 62vw, 252px) !important;
		width: 38px !important;
	}
}

.pmc-care-icon--coral {
	color: var(--coral) !important;
}

.pmc-care-icon--gold {
	color: var(--gold) !important;
}

.pmc-care-icon img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
}

@media (min-width: 901px) {
	.pmc-home .pmc-hero--builder,
	.elementor-editor-active .pmc-home .pmc-hero--builder,
	.elementor-editor-preview .pmc-home .pmc-hero--builder {
		padding-bottom: clamp(3px, 0vw, 82px) !important;
	}

	.pmc-home .pmc-hero-copy-column,
	.elementor-editor-active .pmc-home .pmc-hero-copy-column,
	.elementor-editor-preview .pmc-home .pmc-hero-copy-column {
		transform: translateY(-14px) !important;
	}

	.pmc-home .pmc-hero__copy--widget p,
	.elementor-editor-active .pmc-home .pmc-hero__copy--widget p,
	.elementor-editor-preview .pmc-home .pmc-hero__copy--widget p {
		margin-top: clamp(24px, 1.55vw, 32px) !important;
		margin-bottom: clamp(26px, 1.75vw, 36px) !important;
	}

	.pmc-home .pmc-hero--builder::after,
	.elementor-editor-active .pmc-home .pmc-hero--builder::after,
	.elementor-editor-preview .pmc-home .pmc-hero--builder::after {
		top: clamp(246px, 22.1vw, 452px) !important;
		right: clamp(-58px, -2.05vw, -30px) !important;
		width: clamp(206px, 13.8vw, 282px) !important;
		background-size: 100% 100% !important;
	}

	.pmc-home .pmc-hero--builder > .elementor-container::before,
	.elementor-editor-active .pmc-home .pmc-hero--builder > .elementor-container::before,
	.elementor-editor-preview .pmc-home .pmc-hero--builder > .elementor-container::before {
		top: clamp(-30px, -1.65vw, -18px) !important;
		right: clamp(2px, 1.15vw, 24px) !important;
		width: clamp(52px, 3.34vw, 68px) !important;
	}
}

/*
 * Ready-to-go-home / on-hold states: a single pill button, vertically
 * centered in the same space the day countdown occupies, so every kitten
 * card in a row stays the same height.
 */
.pmc-ready--home,
.pmc-ready--reserved {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 82px;
}

.pmc-ready-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 28px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
}

.pmc-ready-btn--home {
	background: linear-gradient(135deg, var(--coral, #eb584f), var(--gold, #e0a23e));
	color: #fff8ef;
	box-shadow: 0 10px 20px rgba(235, 88, 79, .3);
}

.pmc-ready-btn--hold {
	background: #eee3d3;
	color: var(--olive, #6f7547);
	box-shadow: none;
}

/*
 * The parent Hello Elementor theme's reset.css ships a global
 * `a:hover, a:active { color: #336; }` rule. Because it targets the bare
 * <a> tag with a pseudo-class, it's specific enough to beat plain class
 * selectors like .pmc-btn or .pmc-footer__contact a, so button/footer link
 * text was flashing dark blue on hover. Force it back to the right colors.
 */
.pmc-btn:hover,
.pmc-btn--coral:hover,
.pmc-btn--dark:hover {
	color: #fff8ef !important;
}

.pmc-footer__contact a:hover,
.pmc-footer__disclaimer-link:hover {
	color: var(--coral, #eb584f) !important;
}

/*
 * Wavy top edge on the footer, matching the reference wave design (subtle,
 * only a couple of gentle undulations). The SVG sits at the very top of the
 * (already navy) footer; the path is filled to match .pmc-page's own
 * background exactly and only covers the "peaks" of the wave, so the
 * transparent "troughs" reveal the navy footer background already behind
 * it — giving the impression the page dips down into the footer in waves.
 * The fill MUST match .pmc-page's background (#fff8ef, not the --cream
 * brand color, which is a slightly different shade) or a mismatched seam
 * shows at the boundary.
 */
.pmc-footer {
	position: relative;
	overflow: hidden;
	padding-top: clamp(24px, 3vw, 46px) !important;
}

.pmc-footer__wave {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: clamp(18px, 2.4vw, 34px);
	display: block;
}

.pmc-footer__wave path {
	fill: var(--pmc-hero-bg, #fff8ef);
}

.pmc-footer__disclaimer-link {
	display: block !important;
	margin-top: 10px !important;
	color: rgba(255, 255, 255, .65) !important;
	font-size: 10.5px !important;
	font-weight: 700 !important;
	letter-spacing: .04em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
}

/* Kittens page — built from two Elementor-editable rows (heading + grid),
   styled to match Our Story's generous spacing and typographic character. */
.pmc-kittens-row {
	position: relative !important;
	overflow: hidden !important;
	background-color: var(--cream, #f9f0e8) !important;
}

.pmc-kittens-row > .elementor-container {
	width: min(1188px, calc(100% - 96px)) !important;
	max-width: none !important;
}

.pmc-kittens-row--heading {
	padding: 190px 0 70px !important;
}

.pmc-kittens-heading {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}

.pmc-kittens-heading h1 {
	margin: 0;
	font-family: var(--serif);
	font-weight: 700;
	line-height: 1;
}

.pmc-kittens-heading h1 .t1 {
	display: block;
	font-size: clamp(40px, 3.6vw, 54px);
	color: var(--navy, #102539);
}

.pmc-kittens-heading h1 em {
	display: block;
	margin-top: 8px;
	font-style: normal;
	font-weight: 400;
	font-family: var(--script);
	font-size: clamp(56px, 5vw, 74px);
	color: var(--olive, #6f7547);
}

.pmc-kittens-heading__divider {
	display: block;
	width: clamp(146px, 13vw, 184px);
	height: auto;
	margin: 28px auto 0;
}

.pmc-kittens-heading__lead {
	margin: 24px auto 0;
	max-width: 540px;
	color: var(--navy, #102539);
	font-size: 16px;
	line-height: 1.65;
}

/* Decorative corner blob on desktop for every non-home page (Our Story,
   Kittens, Disclaimer, any plain page), so the top of every page feels the
   same. This is deliberately the exact same size/position values as the
   home page's own blob (.pmc-home .pmc-hero--builder::before above) —
   .pmc-header sits flush at the same page top-left corner as
   .pmc-hero--builder does on home, so top:0/left:0 here lines up
   identically. Home keeps its own rule (rather than reusing this one)
   since it targets a different element. */
@media (min-width: 901px) {
	.pmc-page:not(.pmc-home) .pmc-header::before {
		content: "" !important;
		display: block !important;
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		width: clamp(170px, 11.47vw, 235px) !important;
		aspect-ratio: 150 / 168 !important;
		background: url("assets/blob-green-hq.png") left top / contain no-repeat !important;
		z-index: 2 !important;
		pointer-events: none !important;
	}
}

.pmc-kittens-filter {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 30px;
}

.pmc-kittens-filter__btn {
	padding: 10px 22px;
	border-radius: 999px;
	border: 1.5px solid var(--navy, #102539);
	background: transparent;
	color: var(--navy, #102539);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.pmc-kittens-filter__btn:hover {
	background: rgba(16, 37, 57, .06);
}

.pmc-kittens-filter__btn.is-active {
	background: var(--coral, #eb584f);
	border-color: var(--coral, #eb584f);
	color: #fff8ef;
}

.pmc-kittens-row--grid {
	padding: 4px 0 100px !important;
}

.pmc-kittens-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.pmc-kittens-page__empty {
	text-align: center;
	padding: 40px 0;
	color: var(--navy, #102539);
	font-size: 15px;
}

.pmc-kittens-row--grid .pmc-kittens__note {
	margin-top: 46px;
}

/* Kittens note: paw sits right next to the text like a bullet, at every
   screen size — replaces the old percentage-based absolute positioning
   (pmc-design.css) that drifted away from the text depending on width. */
.pmc-kittens__note {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	text-align: center !important;
}

.pmc-kittens__note-text {
	display: block;
	flex: 0 1 auto;
	text-align: center;
}

.pmc-note-paw {
	position: static !important;
	left: auto !important;
	top: auto !important;
	display: block !important;
	width: 22px !important;
	height: auto !important;
	margin: 0 !important;
	flex: 0 0 auto !important;
}

@media (max-width: 560px) {
	.pmc-note-paw {
		width: 20px !important;
	}
}

/* On mobile the bigger font wraps the note to 3 lines instead of 2, so
   centering the paw against the whole block (align-items:center) puts it
   noticeably below where a bullet should sit — align it to the first line
   instead. Desktop still only wraps to 2 lines, where centered looks
   correct, so this is scoped to mobile only. */
@media (max-width: 900px) {
	.pmc-kittens__note {
		align-items: flex-start !important;
	}

	.pmc-note-paw {
		margin-top: 1px !important;
	}

	/* Flexbox quirk: with only one shrinkable item in the row (the paw is
	   fixed-width), the text span doesn't just shrink to fit its own
	   wrapped content — once its natural single-line width overflows the
	   available space, flex-shrink expands it to fill 100% of whatever
	   room is left, however much that is. That leaves the *visible* text
	   (centered within that now much-wider box) floating far away from
	   the paw instead of sitting right next to it. Capping the width
	   forces it back to hugging its own wrapped content. */
	.pmc-kittens__note-text {
		max-width: 260px !important;
	}
}

.pmc-kittens-row--cta {
	padding: 70px 0 110px !important;
	text-align: center;
}

.pmc-kittens-cta {
	max-width: 100%;
	margin: 0 auto;
	padding: clamp(40px, 5vw, 64px) clamp(28px, 6vw, 80px);
	background: var(--blush, #f7e4db);
	border-radius: 32px;
}

.pmc-kittens-cta h2 {
	margin: 0;
	font-family: var(--serif);
	font-weight: 700;
	font-size: clamp(30px, 2.8vw, 42px);
	line-height: 1.15;
	color: var(--navy, #102539);
}

.pmc-kittens-cta p {
	margin: 16px auto 0;
	max-width: 720px;
	color: var(--navy, #102539);
	font-size: 18px;
	line-height: 1.65;
}

.pmc-kittens-cta__buttons {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 18px;
	margin-top: 34px;
}

@media (max-width: 560px) {
	.pmc-kittens-cta__buttons {
		flex-direction: column;
		align-items: center;
	}
}

@media (max-width: 1180px) {
	.pmc-kittens-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 900px) {
	.pmc-kittens-row--heading {
		padding-top: 40px !important;
	}

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

@media (max-width: 560px) {
	.pmc-kittens-grid {
		grid-template-columns: 1fr;
	}
}

/* Disclaimer & Policies page content */
.pmc-story-page .pmc-wp-page {
	padding: 190px 0 100px !important;
}

.pmc-legal {
	max-width: 760px;
	margin: 0 auto;
}

.pmc-legal__title {
	margin: 0 0 24px;
	font-family: var(--serif);
	font-weight: 700;
	font-size: clamp(34px, 3.2vw, 46px);
	line-height: 1.1;
	color: var(--navy, #102539);
}

.pmc-legal__intro,
.pmc-legal__closing {
	color: var(--navy, #102539);
	font-size: 16px;
	line-height: 1.7;
}

.pmc-legal__closing {
	margin-top: 44px;
	padding-top: 32px;
	border-top: 1px solid rgba(16, 37, 57, .12);
}

.pmc-legal__section {
	margin-top: 34px;
}

.pmc-legal__section h2 {
	margin: 0 0 8px;
	font-family: var(--serif);
	font-weight: 700;
	font-size: 21px;
	color: var(--olive, #6f7547);
}

.pmc-legal__section p {
	margin: 0;
	color: var(--navy, #102539);
	font-size: 15.5px;
	line-height: 1.7;
}

/*
 * Second header nav link ("Kittens"), added next to "Our Story". On mobile
 * (900px and below) the nav is already a normal flex row (see the
 * max-width:900px rules above), so both links just sit side by side there
 * with no extra work. On desktop the nav is absolutely centered at
 * left:50% + transform:translateX(-50%); we only add an extra horizontal
 * shift on top of that shared base so both links land symmetrically on
 * either side of the same center point the single link used to occupy.
 * These selectors match the specificity of the base .pmc-nav__link rules
 * (same number of qualifying classes) and are declared last in this file,
 * so they win the cascade without needing to touch any existing rule.
 */
@media (min-width: 901px) {
	.pmc-page .pmc-nav__link--story,
	.pmc-home .pmc-nav__link--story,
	.pmc-story-page .pmc-nav__link--story {
		transform: translateX(-50%) translateX(-44px) !important;
	}

	.pmc-page .pmc-nav__link--kittens,
	.pmc-home .pmc-nav__link--kittens,
	.pmc-story-page .pmc-nav__link--kittens {
		transform: translateX(-50%) translateX(44px) !important;
	}
}

.pmc-page .pmc-nav__link--active,
.pmc-home .pmc-nav__link--active,
.pmc-story-page .pmc-nav__link--active {
	color: var(--coral, #eb584f) !important;
}

/*
 * .pmc-home .pmc-breed-row--intro sets its background using the --cream
 * brand-color variable (#f9f0e8), a subtly different shade than the actual
 * page background (.pmc-page uses --pmc-hero-bg, #fff8ef) — the same class
 * of mismatch fixed earlier for the footer wave. That created a visible
 * seam right where the intro section's own background took over from the
 * page background above it. Match it to the real page background instead.
 *
 * IMPORTANT: only .pmc-breed-row--intro is targeted here, deliberately NOT
 * the shared .pmc-breed-row base class or .pmc-breed-row--cards. The cards
 * row is intentionally transparent (background: transparent, set elsewhere)
 * so the breed-cat photo above it — which overlaps down into the cards row
 * by design — stays partially visible behind/around the cards. Applying
 * this background fix to the bare .pmc-breed-row class previously matched
 * --cards too, made it opaque, and cut the cat off with a hard flat edge
 * instead of letting it peek through. Don't repeat that mistake.
 */
.pmc-home .pmc-breed-row--intro {
	background: var(--pmc-hero-bg, #fff8ef) !important;
}

.pmc-info-card,
.pmc-love-card,
.pmc-home .pmc-info-card--editable {
	box-shadow: 0 12px 26px rgb(58 43 28 / 14%) !important;
}

/* ==========================================================================
   Apply For A Kitten page
   ========================================================================== */

.pmc-apply-row {
	position: relative !important;
	overflow: hidden !important;
	background-color: var(--cream, #f9f0e8) !important;
}

.pmc-apply-row > .elementor-container {
	width: min(1040px, calc(100% - 64px)) !important;
	max-width: none !important;
}

.pmc-apply-row--heading {
	padding: 190px 0 40px !important;
}

.pmc-apply-heading {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}

.pmc-apply-heading h1 {
	margin: 0;
	font-family: var(--serif);
	font-weight: 700;
	line-height: 1;
}

.pmc-apply-heading h1 .t1 {
	display: block;
	font-size: clamp(40px, 3.6vw, 54px);
	color: var(--navy, #102539);
}

.pmc-apply-heading h1 em {
	display: block;
	margin-top: 8px;
	font-style: normal;
	font-weight: 400;
	font-family: var(--script);
	font-size: clamp(56px, 5vw, 74px);
	color: var(--olive, #6f7547);
}

.pmc-apply-heading__divider {
	display: block;
	width: clamp(146px, 13vw, 184px);
	height: auto;
	margin: 28px auto 0;
}

.pmc-apply-heading__lead {
	margin: 24px auto 0;
	max-width: 540px;
	color: var(--navy, #102539);
	font-size: 16px;
	line-height: 1.65;
}

.pmc-apply-row--form {
	padding: clamp(28px, 4vw, 56px) 0 clamp(90px, 10vw, 130px) !important;
	background: var(--blush, #f7e4db) !important;
}

.pmc-apply-card {
	position: relative;
	max-width: 920px;
	margin: 0 auto;
	padding: clamp(36px, 5vw, 64px) clamp(28px, 6vw, 72px);
	background: #fff;
	border-radius: 28px;
	box-shadow: 0 24px 50px rgb(58 43 28 / 16%), 0 4px 14px rgb(58 43 28 / 8%);
}

.pmc-apply-card__missing {
	text-align: center;
	color: var(--navy, #102539);
	font-size: 15px;
}

.pmc-apply-note {
	max-width: 640px;
	margin: 26px auto 0;
	padding: 0 20px;
	color: var(--navy, #102539);
	font-size: 13.5px;
	line-height: 1.6;
	text-align: center;
}

/* Gravity Forms reskin to match the Purrfect Match design language.
   Gravity Forms enqueues its own "orbital" theme styles, so these need
   !important throughout — same reasoning as the Elementor overrides above. */
.pmc-apply-card .gform_wrapper {
	--gf-form-gap-y: 22px;
	--gf-color-primary: #eb584f;
	--gf-color-primary-rgb: 235, 88, 79;
	--gf-color-primary-contrast: #fff8ef;
	--gf-color-primary-darker: #d1483f;
	--gf-color-primary-lighter: #f0847c;
	/* The page-turn/submit loading spinner reads its two ring colors from
	   these vars specifically (not --gf-color-primary), and defaults to
	   GF's blue — override both or the spinner shows up blue regardless of
	   the rest of the coral reskin. */
	--gf-form-spinner-fg-color: #eb584f;
	--gf-form-spinner-bg-color: rgba(235, 88, 79, .18);
	font-family: var(--body) !important;
}

.pmc-apply-card .gform_heading,
.pmc-apply-card .gform_description {
	display: none !important;
}

.pmc-apply-card .gform_required_legend {
	display: none !important;
}

/* Gravity Forms nests the visible page's fields two levels deep:
   .gform_page > .gform_page_fields (one per page, the OUTER wrapper) >
   .gform_fields (the actual field-list container) > .gfield. Only
   .gform_fields should be the grid — if .gform_page_fields is ALSO
   display:grid, its lone child (.gform_fields) gets auto-placed into a
   single track of that outer grid instead of stretching to full width,
   which squeezed every field down to ~40% width. */
.pmc-apply-card .gform_page_fields {
	display: block !important;
	width: 100% !important;
}

.pmc-apply-card .gform_fields {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 22px 20px !important;
	width: 100% !important;
}

.pmc-apply-card .gfield {
	grid-column: 1 / -1 !important;
	margin: 0 !important;
}

.pmc-apply-card .gfield.pmc-half {
	grid-column: span 1 !important;
}

@media (max-width: 560px) {
	.pmc-apply-card .gfield.pmc-half {
		grid-column: 1 / -1 !important;
	}
}

/* GF renders .gfield_label as a flex container (label text + the required
   indicator as two flex items). With flex-wrap left at its default, a long
   label eats the row width and shoves the required asterisk down onto its
   OWN wrapped line, stranding it far from the text it belongs to. Forcing
   the label back to a plain block makes the text and the asterisk flow as
   normal inline content instead, so they wrap together like any sentence. */
.pmc-apply-card .gfield_label,
.pmc-apply-card label.gfield_label {
	display: block !important;
	margin: 0 0 10px !important;
	font-family: var(--serif) !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
	color: var(--navy, #102539) !important;
}

/* GF's "(Required)" text is verbose next to every other label — swap it for
   a single compact asterisk, the modern-form convention. */
.pmc-apply-card .gfield_required {
	display: inline !important;
	margin-left: 4px !important;
	color: var(--coral, #eb584f) !important;
}

.pmc-apply-card .gfield_required_text {
	display: inline !important;
	font-size: 0 !important;
}

.pmc-apply-card .gfield_required_text::after {
	content: "*";
	font-size: 15px;
	font-weight: 700;
}

.pmc-apply-card .gfield_description {
	margin-top: 6px !important;
	font-size: 13px !important;
	color: rgba(16, 37, 57, .65) !important;
}

.pmc-apply-card input[type="text"],
.pmc-apply-card input[type="email"],
.pmc-apply-card input[type="tel"],
.pmc-apply-card input[type="number"],
.pmc-apply-card input[type="date"],
.pmc-apply-card select,
.pmc-apply-card textarea {
	width: 100% !important;
	padding: 13px 16px !important;
	border: 1.5px solid rgba(16, 37, 57, .16) !important;
	border-radius: 12px !important;
	background: var(--cream, #f9f0e8) !important;
	font-family: var(--body) !important;
	font-size: 15px !important;
	color: var(--navy, #102539) !important;
	box-shadow: none !important;
	transition: border-color .15s ease, background .15s ease !important;
}

.pmc-apply-card textarea {
	min-height: 100px !important;
	resize: vertical !important;
}

/* Chrome's native <select> UA style sets line-height to its own fixed
   ~38px regardless of author padding — combined with our 13px top/bottom
   padding that leaves almost no room for the text, the selected option's
   label renders squeezed into a sliver and reads as invisible. Overriding
   line-height back to something sane restores visible text. */
.pmc-apply-card select {
	height: auto !important;
	line-height: 1.3 !important;
}

.pmc-apply-card input:focus,
.pmc-apply-card select:focus,
.pmc-apply-card textarea:focus {
	border-color: var(--coral, #eb584f) !important;
	background: #fff !important;
	outline: none !important;
	box-shadow: 0 0 0 4px rgba(235, 88, 79, .13) !important;
}

/* Radio choices (Yes/No etc.) become selectable pill buttons rather than
   tiny circles with tight-set text — bigger touch targets, a self-contained
   height per question that keeps side-by-side paired fields reading as
   aligned even when their labels wrap to different numbers of lines, and a
   clearer "selected" state than a small dot. The native input stays in the
   DOM (just visually hidden) so keyboard/screen-reader behavior is unchanged. */
.pmc-apply-card .gfield_radio {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.pmc-apply-card .gfield_radio li {
	display: flex !important;
	margin: 0 !important;
}

.pmc-apply-card .gfield_radio input {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
}

.pmc-apply-card .gfield_radio label {
	display: inline-flex !important;
	align-items: center !important;
	margin: 0 !important;
	padding: 8px 18px !important;
	border: 1.5px solid rgba(16, 37, 57, .18) !important;
	border-radius: 999px !important;
	background: var(--cream, #f9f0e8) !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	color: var(--navy, #102539) !important;
	cursor: pointer !important;
	transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease !important;
}

.pmc-apply-card .gfield_radio label:hover {
	border-color: rgba(235, 88, 79, .5) !important;
}

.pmc-apply-card .gfield_radio input:checked + label {
	background: var(--coral, #eb584f) !important;
	border-color: var(--coral, #eb584f) !important;
	color: #fff8ef !important;
	font-weight: 700 !important;
	box-shadow: 0 6px 14px rgba(235, 88, 79, .3) !important;
}

/* Browsers draw a default blue focus ring on native radios/checkboxes that
   accent-color doesn't touch — replace it with an on-brand coral ring. Since
   the radio input itself is visually hidden, the ring is drawn on its pill
   label instead. */
.pmc-apply-card .gfield_radio input:focus-visible + label {
	outline: 2px solid var(--coral, #eb584f) !important;
	outline-offset: 2px !important;
}

.pmc-apply-card .gfield_checkbox {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.pmc-apply-card .gfield_checkbox li {
	display: flex !important;
	align-items: flex-start !important;
	gap: 14px !important;
	margin: 0 !important;
}

.pmc-apply-card .gfield_checkbox input {
	flex: none !important;
	width: 22px !important;
	height: 22px !important;
	margin: 1px 0 0 !important;
	accent-color: var(--coral, #eb584f) !important;
	cursor: pointer !important;
}

.pmc-apply-card .gfield_checkbox input:focus-visible {
	outline: 2px solid var(--coral, #eb584f) !important;
	outline-offset: 2px !important;
}

.pmc-apply-card .gfield_checkbox label {
	margin: 0 !important;
	font-size: 15px !important;
	line-height: 1.5 !important;
	color: var(--navy, #102539) !important;
	cursor: pointer !important;
}

.pmc-apply-card .pmc-gf-html-title {
	margin: 0 0 10px !important;
	font-family: var(--serif) !important;
	font-weight: 700 !important;
	font-size: 20px !important;
	color: var(--navy, #102539) !important;
}

.pmc-apply-card .gfield--type-html p {
	margin: 0 !important;
	font-size: 13.5px !important;
	line-height: 1.7 !important;
	color: rgba(16, 37, 57, .75) !important;
}

/* Step progress indicator (Gravity Forms "steps" pagination style): numbered
   circles connected by a line that fills coral as each step completes, no
   panel/background behind them — just sits directly on the card.
   IMPORTANT — the real GF markup is:
     form > div.gf_page_steps > div.gf_step(.gf_step_active/.gf_step_pending/
       .gf_step_first/.gf_step_last) > span.gf_step_number + span.gf_step_label
   There is NO .gf_progressbar_wrapper or .gf_step_wrapper element at all —
   those class names don't exist in this GF version and every rule that
   targeted them was silently doing nothing. .gf_page_steps IS both the
   outer wrapper and the flex row. */
.pmc-apply-card .gf_page_steps {
	display: flex !important;
	align-items: flex-start !important;
	justify-content: space-between !important;
	list-style: none !important;
	margin: 0 0 clamp(32px, 4.5vw, 44px) !important;
	padding: 0 !important;
	background: transparent !important;
	border-radius: 0 !important;
}

.pmc-apply-card .gf_step {
	position: relative;
	flex: 1 1 0;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center;
	font-size: 11.5px;
	outline: none !important;
}

/* GF moves keyboard focus to the step indicator when the page changes (for
   screen-reader announcement) — the browser's default blue ring on a
   non-native focusable element looks like a stray bug, so restyle it. */
.pmc-apply-card .gf_step:focus-visible .gf_step_number {
	outline: 2px solid var(--navy, #102539) !important;
	outline-offset: 2px !important;
}

.pmc-apply-card .gf_step::before {
	content: "" !important;
	position: absolute !important;
	top: 17px !important;
	left: -50% !important;
	width: 100% !important;
	height: 3px !important;
	background: rgba(16, 37, 57, .14) !important;
	border-radius: 3px !important;
	z-index: 0 !important;
	transition: background .25s ease !important;
}

/* The connector line leading INTO a completed/active step shows the coral
   "already done" fill, so the bar visibly progresses left to right. */
.pmc-apply-card .gf_step_active::before,
.pmc-apply-card .gf_step_completed::before {
	background: var(--coral, #eb584f) !important;
}

.pmc-apply-card .gf_step.gf_step_first::before {
	display: none !important;
}

.pmc-apply-card .gf_step_number {
	position: relative !important;
	z-index: 1 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	width: 34px !important;
	height: 34px !important;
	margin: 0 0 9px !important;
	border-radius: 999px !important;
	background: #fff !important;
	border: 2px solid rgba(16, 37, 57, .16) !important;
	color: var(--navy, #102539) !important;
	font-family: var(--serif) !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	line-height: 1 !important;
	box-shadow: none !important;
	transition: box-shadow .2s ease, background .2s ease, border-color .2s ease !important;
}

.pmc-apply-card .gf_step_label {
	max-width: 112px !important;
	color: rgba(16, 37, 57, .5) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: .04em !important;
	transition: color .2s ease !important;
}

.pmc-apply-card .gf_step_active .gf_step_number,
.pmc-apply-card .gf_step_completed .gf_step_number {
	background: var(--coral, #eb584f) !important;
	border-color: var(--coral, #eb584f) !important;
	color: #fff8ef !important;
}

/* A crisp, flat halo ring (spread only, zero blur) instead of a soft drop
   shadow — a blurred glow bleeds past the circle's solid edge and reads as
   a smudge where the connector line meets it; a hard-edged ring doesn't. */
.pmc-apply-card .gf_step_active .gf_step_number {
	box-shadow: 0 0 0 5px rgba(235, 88, 79, .16) !important;
}

/* GF's own "completed" checkmark icon is an ::after pseudo-element on
   .gf_step_number with both its background AND border hardcoded to GF's
   blue, not driven by the --gf-color-primary variable, so both have to be
   overridden directly (the border alone reads as a stray blue focus ring). */
.pmc-apply-card .gf_step_completed .gf_step_number::after {
	background-color: var(--coral, #eb584f) !important;
	border-color: var(--coral, #eb584f) !important;
}

.pmc-apply-card .gf_step_active .gf_step_label,
.pmc-apply-card .gf_step_completed .gf_step_label {
	color: var(--navy, #102539) !important;
}

.pmc-apply-card .gform_page_footer {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 14px !important;
	margin: 8px 0 0 !important;
	padding: 0 !important;
}

.pmc-apply-card .gform_footer {
	margin: 8px 0 0 !important;
	padding: 0 !important;
	position: relative !important;
}

.pmc-apply-card .gform-loader {
	width: 22px !important;
	height: 22px !important;
	font-size: 2px !important;
	border-width: 3px !important;
	flex: none !important;
}

.pmc-apply-card .gform_button,
.pmc-apply-card .gform_next_button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 15px 32px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--coral, #eb584f) !important;
	color: #fff8ef !important;
	font-family: var(--body) !important;
	font-weight: 800 !important;
	font-size: 14px !important;
	letter-spacing: .04em !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	box-shadow: 0 10px 20px rgba(235, 88, 79, .3) !important;
	transition: transform .15s ease, box-shadow .15s ease !important;
	/* Belt-and-braces: whatever transient state GF's page-turn JS puts the
	   button in, never let it fade to an unreadable near-white pill. */
	opacity: 1 !important;
}

.pmc-apply-card .gform_footer .gform_button {
	width: 100% !important;
}

.pmc-apply-card .gform_button:hover,
.pmc-apply-card .gform_next_button:hover {
	transform: translateY(-1px) !important;
	box-shadow: 0 14px 26px rgba(235, 88, 79, .38) !important;
	color: #fff8ef !important;
}

.pmc-apply-card .gform_button:focus-visible,
.pmc-apply-card .gform_next_button:focus-visible,
.pmc-apply-card .gform_previous_button:focus-visible {
	outline: 2px solid var(--navy, #102539) !important;
	outline-offset: 2px !important;
}

/* :active (the moment a real mouse click is held down) and plain :focus are
   separate states from :hover/:focus-visible above, and native <input
   type="submit">/<button> elements can carry their own browser/OS default
   "pressed" chrome (a lighter fill, an inset shadow) that isn't covered by
   the base rule alone — pin every property on both so a real click never
   shows anything but a solid coral pill with legible cream text. */
.pmc-apply-card .gform_button:focus,
.pmc-apply-card .gform_next_button:focus,
.pmc-apply-card .gform_button:active,
.pmc-apply-card .gform_next_button:active {
	background: var(--coral, #eb584f) !important;
	background-image: none !important;
	color: #fff8ef !important;
	-webkit-text-fill-color: #fff8ef !important;
	opacity: 1 !important;
	box-shadow: 0 10px 20px rgba(235, 88, 79, .3) !important;
}

.pmc-apply-card .gform_button,
.pmc-apply-card .gform_next_button,
.pmc-apply-card .gform_previous_button {
	-webkit-appearance: none !important;
	appearance: none !important;
	-webkit-tap-highlight-color: transparent !important;
}

/* While GF's spinner submits the page, the button gets a disabled state —
   keep its text and background fully on-brand instead of falling back to
   the browser's washed-out grey/white default. */
.pmc-apply-card .gform_button:disabled,
.pmc-apply-card .gform_next_button:disabled,
.pmc-apply-card .gform_button.disabled,
.pmc-apply-card .gform_next_button.disabled {
	background: var(--coral, #eb584f) !important;
	color: #fff8ef !important;
	opacity: 1 !important;
	cursor: not-allowed !important;
}

.pmc-apply-card .gform_previous_button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 15px 28px !important;
	border: 1.5px solid rgba(16, 37, 57, .22) !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: var(--navy, #102539) !important;
	font-family: var(--body) !important;
	font-weight: 800 !important;
	font-size: 14px !important;
	letter-spacing: .04em !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	box-shadow: none !important;
	transition: background .15s ease !important;
}

.pmc-apply-card .gform_previous_button:hover {
	background: rgba(16, 37, 57, .06) !important;
}

.pmc-apply-card .gform_validation_errors {
	grid-column: 1 / -1 !important;
	margin: 0 0 22px !important;
	padding: 16px 18px !important;
	border: 1.5px solid var(--coral, #eb584f) !important;
	border-radius: 14px !important;
	background: rgba(235, 88, 79, .08) !important;
}

.pmc-apply-card .gform_validation_errors h2 {
	margin: 0 !important;
	font-family: var(--serif) !important;
	font-size: 16px !important;
	color: var(--coral, #eb584f) !important;
}

.pmc-apply-card .gfield_validation_message,
.pmc-apply-card .validation_message {
	margin-top: 6px !important;
	font-size: 13px !important;
	color: var(--coral, #eb584f) !important;
}

.pmc-apply-card .gfield_error input,
.pmc-apply-card .gfield_error select,
.pmc-apply-card .gfield_error textarea {
	border-color: var(--coral, #eb584f) !important;
}

.pmc-apply-card .gform_confirmation_message {
	text-align: center;
	padding: 20px 0;
	font-family: var(--serif) !important;
	font-size: 18px !important;
	line-height: 1.6 !important;
	color: var(--navy, #102539) !important;
}

@media (max-width: 900px) {
	.pmc-apply-row--heading {
		padding-top: 40px !important;
	}

	.pmc-apply-card {
		border-radius: 22px;
	}

	.pmc-apply-card .gf_step_label {
		font-size: 10.5px;
		max-width: 84px;
	}
}

@media (max-width: 560px) {
	.pmc-apply-row--form {
		padding-bottom: 80px !important;
	}

	.pmc-apply-card .gform_fields {
		grid-template-columns: 1fr !important;
	}

	.pmc-apply-card .gform_button,
	.pmc-apply-card .gform_next_button,
	.pmc-apply-card .gform_previous_button {
		padding: 15px 20px !important;
	}

	.pmc-apply-card .gform_page_footer {
		flex-wrap: wrap !important;
	}

	.pmc-apply-card .gform_page_footer .gform_next_button,
	.pmc-apply-card .gform_page_footer .gform_previous_button {
		flex: 1 1 auto !important;
	}

	.pmc-apply-card .gf_step_label {
		display: none;
	}
}

/* ==========================================================================
   Schedule A Play Date page (Cal.com inline booking embed)
   ========================================================================== */

.pmc-schedule-row {
	position: relative !important;
	overflow: hidden !important;
	background-color: var(--cream, #f9f0e8) !important;
}

.pmc-schedule-row > .elementor-container {
	width: min(920px, calc(100% - 64px)) !important;
	max-width: none !important;
}

.pmc-schedule-row--heading {
	padding: 190px 0 40px !important;
}

.pmc-schedule-heading {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}

.pmc-schedule-heading h1 {
	margin: 0;
	font-family: var(--serif);
	font-weight: 700;
	line-height: 1;
}

.pmc-schedule-heading h1 .t1 {
	display: block;
	font-size: clamp(40px, 3.6vw, 54px);
	color: var(--navy, #102539);
}

.pmc-schedule-heading h1 em {
	display: block;
	margin-top: 8px;
	font-style: normal;
	font-weight: 400;
	font-family: var(--script);
	font-size: clamp(56px, 5vw, 74px);
	color: var(--coral, #eb584f);
}

.pmc-schedule-heading__divider {
	display: block;
	width: clamp(146px, 13vw, 184px);
	height: auto;
	margin: 28px auto 0;
}

.pmc-schedule-heading__lead {
	margin: 24px auto 0;
	max-width: 540px;
	color: var(--navy, #102539);
	font-size: 16px;
	line-height: 1.65;
}

.pmc-schedule-row--embed {
	padding: clamp(28px, 4vw, 56px) 0 clamp(90px, 10vw, 130px) !important;
	background: var(--blush, #f7e4db) !important;
}

.pmc-schedule-card {
	position: relative;
	max-width: 860px;
	margin: 0 auto;
	padding: clamp(14px, 2vw, 22px);
	background: #fff;
	border-radius: 28px;
	box-shadow: 0 24px 50px rgb(58 43 28 / 16%), 0 4px 14px rgb(58 43 28 / 8%);
}

.pmc-schedule-embed {
	width: 100%;
	height: clamp(560px, 68vh, 700px);
	overflow: auto;
	border-radius: 18px;
}

.pmc-schedule-embed iframe {
	width: 100% !important;
	height: 100% !important;
	border: 0 !important;
	border-radius: 18px;
}

.pmc-schedule-note {
	max-width: 640px;
	margin: 26px auto 0;
	padding: 0 20px;
	color: var(--navy, #102539);
	font-size: 13.5px;
	line-height: 1.6;
	text-align: center;
}

@media (max-width: 900px) {
	.pmc-schedule-row--heading {
		padding-top: 40px !important;
	}

	.pmc-schedule-card {
		border-radius: 22px;
	}

	.pmc-schedule-embed {
		height: clamp(520px, 78vh, 640px);
		border-radius: 14px;
	}

	.pmc-schedule-embed iframe {
		border-radius: 14px;
	}
}

@media (max-width: 560px) {
	.pmc-schedule-row--embed {
		padding-bottom: 80px !important;
	}
}

/* Our Story page: pmc-design.css sets a large 160px top padding on mobile
   (tuned for desktop's decorative header blob clearance) that leaves an
   oversized gap below the nav before the "Our Story" heading even starts. */
@media (max-width: 900px) {
	.pmc-story-row--heading {
		padding-top: 40px !important;
	}
}

/* ==========================================================================
   Our Story page — photo gallery (above Health & Care Standards)
   ========================================================================== */

.pmc-story-row--gallery {
	padding: 10px 0 100px !important;
}

.pmc-story-gallery__head {
	text-align: center;
	margin: 0 0 40px;
}

.pmc-story-gallery__head h2 {
	margin: 0;
	font-family: var(--serif);
	font-weight: 700;
	line-height: 1;
}

.pmc-story-gallery__head h2 .t1 {
	display: block;
	font-size: clamp(34px, 3vw, 46px);
	color: var(--navy, #102539);
}

.pmc-story-gallery__head h2 em {
	display: block;
	margin-top: 6px;
	font-style: normal;
	font-weight: 400;
	font-family: var(--script);
	font-size: clamp(48px, 4.2vw, 62px);
	color: var(--olive, #6f7547);
}

.pmc-story-gallery__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: clamp(10px, 1.2vw, 18px);
}

.pmc-story-gallery__item {
	position: relative;
	margin: 0;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 10px 22px rgb(58 43 28 / 12%);
}

/* The aspect-ratio lives on the button (real in-flow content), not the
   figure — a grid item whose only child is out-of-flow (the absolutely
   positioned img below) has nothing to establish its own height from, so
   aspect-ratio on the figure itself collapsed to 0 in a CSS Grid auto-row.
   Giving the in-flow button a definite height via aspect-ratio lets the
   figure's auto height follow it normally, sidestepping that circularity. */
.pmc-story-gallery__link {
	display: block !important;
	position: relative !important;
	width: 100% !important;
	aspect-ratio: 3 / 4 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: none !important;
	cursor: zoom-in !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

/* Absolute + inset is the bulletproof way to make object-fit:cover fill a
   tile: some landscape-oriented source photos were rendering at their own
   intrinsic (much shorter) height instead of the tile's full height — the
   theme's base "img { height: auto }" reset was winning over a plain
   width/height:100% rule for just the height property. Taking the image out
   of normal flow with position:absolute sidesteps that entirely, since its
   box is now defined purely by the inset edges, not intrinsic sizing. */
.pmc-story-gallery__item img {
	display: block;
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	transition: transform .35s ease;
}

.pmc-story-gallery__item:hover img {
	transform: scale(1.06);
}

/* Lightbox */
.pmc-story-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(20px, 5vw, 60px);
	background: rgba(16, 21, 28, .88);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility 0s linear .25s;
}

.pmc-story-lightbox.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity .25s ease, visibility 0s linear 0s;
}

.pmc-story-lightbox__figure {
	position: relative;
	max-width: min(920px, 100%);
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	transform: scale(.96);
	transition: transform .25s ease;
}

.pmc-story-lightbox.is-open .pmc-story-lightbox__figure {
	transform: scale(1);
}

.pmc-story-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: 82vh;
	border-radius: 18px;
	box-shadow: 0 30px 60px rgba(0, 0, 0, .4);
	background: #14181f;
}

/* Same pill-button language as the homepage "Meet the Next Batch" carousel
   (.pmc-carousel-btn in pmc-design.css): translucent cream circle, thin navy
   border, navy glyph, coral-on-hover. Positioned relative to the lightbox
   overlay itself (not the image), so they stay put at fixed screen edges
   regardless of whether the current photo is portrait or landscape. */
.pmc-story-lightbox__close,
.pmc-story-lightbox__prev,
.pmc-story-lightbox__next {
	position: absolute !important;
	z-index: 2 !important;
	display: grid !important;
	place-items: center !important;
	width: 46px !important;
	height: 46px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid rgba(255, 248, 239, .35) !important;
	border-radius: 999px !important;
	background: rgba(255, 252, 247, .16) !important;
	color: #fff8ef !important;
	cursor: pointer !important;
	font-family: var(--body) !important;
	font-size: 26px !important;
	line-height: 1 !important;
	box-shadow: 0 7px 18px rgba(0, 0, 0, .2) !important;
	transition: background .18s ease, transform .18s ease, color .18s ease, border-color .18s ease !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.pmc-story-lightbox__prev span,
.pmc-story-lightbox__next span {
	display: block;
	margin-top: -3px;
}

/* The × glyph's own metrics center perfectly on their own — the -3px nudge
   above is tuned for the ‹ / › arrow characters only and pushed × off-center
   when it was applied to all three buttons. */
.pmc-story-lightbox__close span {
	display: block;
}

.pmc-story-lightbox__close:hover,
.pmc-story-lightbox__prev:hover,
.pmc-story-lightbox__next:hover {
	background: #fffaf4;
	border-color: #fffaf4;
	color: var(--coral, #eb584f);
}

.pmc-story-lightbox__close:focus-visible,
.pmc-story-lightbox__prev:focus-visible,
.pmc-story-lightbox__next:focus-visible {
	outline: 2px solid #fff8ef;
	outline-offset: 2px;
}

.pmc-story-lightbox__close {
	top: clamp(16px, 3vw, 32px);
	right: clamp(16px, 3vw, 32px);
	font-size: 22px;
}

.pmc-story-lightbox__prev,
.pmc-story-lightbox__next {
	top: 50%;
	transform: translateY(-50%);
}

.pmc-story-lightbox__prev:hover,
.pmc-story-lightbox__next:hover {
	transform: translateY(-50%) scale(1.04);
}

.pmc-story-lightbox__prev {
	left: clamp(12px, 3vw, 32px);
}

.pmc-story-lightbox__next {
	right: clamp(12px, 3vw, 32px);
}

.pmc-story-lightbox__counter {
	margin-top: 16px;
	color: rgba(255, 248, 239, .75);
	font-family: var(--body);
	font-size: 13px;
	letter-spacing: .04em;
}

@media (max-width: 640px) {
	.pmc-story-lightbox__close {
		top: 12px;
		right: 12px;
		width: 40px;
		height: 40px;
	}

	.pmc-story-lightbox__prev {
		left: 8px;
	}

	.pmc-story-lightbox__next {
		right: 8px;
	}

	.pmc-story-lightbox__prev,
	.pmc-story-lightbox__next {
		width: 40px;
		height: 40px;
	}
}

@media (max-width: 1080px) {
	.pmc-story-gallery__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 700px) {
	.pmc-story-gallery__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 480px) {
	.pmc-story-gallery__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==========================================================================
   Mobile legibility pass — body copy across every page reads a size or two
   too small on phones. This bumps just the paragraph/description text (not
   headings, which already scale with clamp()) consistently site-wide.
   Scoped entirely to max-width:900px so desktop is completely untouched.
   ========================================================================== */
@media (max-width: 900px) {
	body {
		font-size: 17px !important;
	}

	.pmc-hero__copy p,
	.pmc-hero__copy--widget p {
		font-size: 17px !important;
	}

	.pmc-value__txt p {
		font-size: 15px !important;
	}

	.pmc-love-card p {
		font-size: 13px !important;
	}

	.pmc-litter-timeline__note {
		font-size: 14.5px !important;
	}

	.pmc-story__copy p {
		font-size: 16.5px !important;
	}

	.pmc-standard-grid span.t {
		font-size: 13.5px !important;
	}

	.pmc-kittens__note-text {
		font-size: 16px !important;
	}

	.pmc-traits {
		font-size: 13px !important;
	}

	.pmc-kittens-heading__lead,
	.pmc-apply-heading__lead,
	.pmc-schedule-heading__lead {
		font-size: 17px !important;
	}

	.pmc-apply-note,
	.pmc-schedule-note {
		font-size: 14.5px !important;
	}

	.pmc-legal p,
	.pmc-legal__intro {
		font-size: 17px !important;
	}

	/* Gravity Forms fields — also nudges inputs to 16px, which stops iOS
	   Safari's automatic zoom-on-focus (it triggers below 16px). */
	.pmc-apply-card .gfield_label {
		font-size: 16px !important;
	}

	.pmc-apply-card .gfield_description {
		font-size: 14px !important;
	}

	.pmc-apply-card .gfield_radio label,
	.pmc-apply-card .gfield_checkbox label {
		font-size: 14.5px !important;
	}

	.pmc-apply-card input[type="text"],
	.pmc-apply-card input[type="email"],
	.pmc-apply-card input[type="tel"],
	.pmc-apply-card input[type="date"],
	.pmc-apply-card select,
	.pmc-apply-card textarea {
		font-size: 16px !important;
	}
}

/* ==========================================================================
   Mobile nav: hamburger menu. Our Story / Kittens collapse into a dropdown
   toggled from a hamburger icon on the left, with the Apply button on the
   right. .pmc-mobile-nav is `display:contents` outside the mobile media
   query so on desktop its two links keep behaving exactly as direct flex
   children of .pmc-header__inner, same as before this change — desktop
   nav markup/CSS is otherwise completely untouched.
   ========================================================================== */
.pmc-nav-toggle {
	display: none !important;
}

.pmc-mobile-nav {
	display: contents;
}

@media (max-width: 900px) {
	.pmc-page .pmc-header__inner,
	.pmc-home .pmc-header__inner,
	.pmc-story-page .pmc-header__inner {
		justify-content: space-between !important;
	}

	.pmc-header.is-nav-open {
		overflow: visible !important;
	}

	.pmc-nav-toggle {
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 5px !important;
		order: 2 !important;
		flex: 0 0 auto !important;
		width: 40px !important;
		height: 40px !important;
		padding: 0 !important;
		border: none !important;
		border-radius: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		outline: none !important;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.pmc-nav-toggle:focus,
	.pmc-nav-toggle:active {
		border: none !important;
		outline: none !important;
		box-shadow: none !important;
	}

	.pmc-nav-toggle span {
		display: block;
		width: 24px;
		height: 2.5px;
		border-radius: 2px;
		background: var(--navy, #102539);
		transition: transform .25s ease, opacity .2s ease;
	}

	.pmc-header.is-nav-open .pmc-nav-toggle span:nth-child(1) {
		transform: translateY(7.5px) rotate(45deg);
	}

	.pmc-header.is-nav-open .pmc-nav-toggle span:nth-child(2) {
		opacity: 0;
	}

	.pmc-header.is-nav-open .pmc-nav-toggle span:nth-child(3) {
		transform: translateY(-7.5px) rotate(-45deg);
	}

	.pmc-page .pmc-header .pmc-btn--nav,
	.pmc-home .pmc-header .pmc-btn--nav,
	.pmc-story-page .pmc-header .pmc-btn--nav {
		order: 3 !important;
		min-width: 0 !important;
		flex: 0 0 auto !important;
		margin-right: -6px !important;
	}

	.pmc-nav-toggle {
		margin-left: -6px !important;
	}

	.pmc-mobile-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		margin-top: 10px;
		padding: 6px clamp(20px, 6vw, 34px) 14px;
		background: var(--cream, #f9f0e8);
		border-radius: 0 0 22px 22px;
		box-shadow: 0 18px 30px rgb(16 37 57 / 14%);
	}

	.pmc-header.is-nav-open .pmc-mobile-nav {
		display: flex !important;
	}

	.pmc-header.is-nav-open .pmc-mobile-nav .pmc-nav__link {
		width: 100% !important;
		flex: none !important;
		justify-content: center !important;
		padding: 14px 0 !important;
		border-top: 1px solid rgb(16 37 57 / 10%);
	}

	.pmc-header.is-nav-open .pmc-mobile-nav .pmc-nav__link:first-child {
		border-top: none;
	}
}

/* Kitten carousel prev/next buttons — bigger tap target on mobile only.
   Must also cover :hover/:focus/:active — pmc-design.css has a combined
   `.pmc-carousel-btn, .pmc-carousel-btn:hover, .pmc-carousel-btn:focus`
   rule pinning them back to 30px !important, and a pseudo-class selector
   is more specific than the plain class alone, so tapping (which focuses
   the button on mobile) was shrinking it back down after every tap. */
@media (max-width: 900px) {
	.pmc-carousel-btn,
	.pmc-carousel-btn:hover,
	.pmc-carousel-btn:focus,
	.pmc-carousel-btn:active {
		width: 44px !important;
		height: 44px !important;
		min-width: 44px !important;
		min-height: 44px !important;
		font-size: 30px !important;
	}
}

/* Breed section (Breed Characteristics / Coat Patterns / Fun Facts / Why We
   Love Them) — missed in the first mobile font pass, some as small as 7.5px. */
@media (max-width: 900px) {
	.pmc-info-card li {
		font-size: 15px !important;
	}

	.pmc-info-card p {
		font-size: 14.5px !important;
	}

	.pmc-patterns span,
	.pmc-colors span {
		font-size: 12px !important;
	}

	.pmc-breed__heading p {
		font-size: 16px !important;
	}

	.pmc-love-card p {
		font-size: 15px !important;
		max-width: 280px !important;
	}
}

/* ==========================================================================
   Sold kitten status — same grayscale-photo treatment as On Hold, but with
   its own "Sold" label so it reads as a distinct state. Like On Hold, the
   day countdown underneath still shows normally (see kitten_ready_block()
   in class-pmc-render.php) — only the photo overlay changes.
   ========================================================================== */
.pmc-kitten-card.is-sold .pmc-kitten-card__photo img {
	filter: grayscale(.82) saturate(.55) brightness(.76);
	transform: scale(1.015);
}

.pmc-kitten-card__hold--sold {
	background: rgba(16, 37, 56, .62);
}