/**
 * Heroes
 */

 /*** Hero: Image Hero ***/

.module.hero.image-hero {
	color: var(--samoyed-white);
	isolation: isolate;
	overflow-x: clip;
	padding: calc(var(--header-height) + var(--module-spacing-medium)) 0 var(--module-spacing-large);
	position: relative;
}

/* The padding-top above already reserves space for the header — the
   module is meant to sit flush with the viewport top. Zero the module-
   spacing margin when this hero is first so a non-flush spacing choice
   doesn't leave a visible gap above the image. */

.page-builder > .module.hero.image-hero:first-child {
	margin-top: 0;
}

.module.hero.image-hero > .media {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
}

.module.hero.image-hero > .media video {
	height: 100%;
	left: 0;
	object-fit: cover;
	position: absolute;
	top: 0;
	width: 100%;
}

.module.hero.image-hero.carousel-mode > .media img {
	opacity: 0;
	transition: opacity 1s ease;
}

.module.hero.image-hero.carousel-mode > .media img.is-active {
	opacity: 1;
}

.module.hero.image-hero.has-gradient-overlay > .media::before {
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.55) 38%, rgba(0, 0, 0, 0.15) 65%, transparent 88%);
	content: '';
	height: 100%;
	left: 0;
	max-width: 1350px;
	position: absolute;
	top: 0;
	width: 92%;
	z-index: 1;
}

.module.hero.image-hero.has-gradient-overlay > .media::after {
	background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.9) 100%);
	bottom: 0;
	content: '';
	height: 55%;
	left: 0;
	position: absolute;
	width: 100%;
	z-index: 1;
}

.module.hero.image-hero > .container {
	min-height: min(600px, 60dvh);
	position: relative;
	z-index: 2;
}

.module.hero.image-hero .content {
	align-self: center;
	grid-column: 1 / 8;
	grid-row: 1;
	padding-right: var(--text-spacing-large);
}

.module.hero.image-hero .content > * + * {
	margin: var(--text-spacing-small) 0 0;
}

.module.hero.image-hero .content > * + .buttons {
	margin: var(--text-spacing-medium) 0 0;
}

/*** Events Ticker ***/

.module.hero.image-hero .events-ticker {
	align-self: flex-end;
	gap: var(--text-spacing-xsmall);
	grid-column: 9 / -1;
	grid-row: 1;
	margin-bottom: -24px;
	margin-right: calc(var(--viewport-edge) + 32px);
	width: auto;
	z-index: 3;
}

body.no-js .module.hero.image-hero .events-ticker {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
}

body.no-js .module.hero.image-hero .events-ticker .ticker-nav {
	display: none;
}

.module.hero.image-hero .events-ticker .jazzy-pause {
	display: none;
}

.module.hero.image-hero .events-ticker .ticker-item {
	border-radius: var(--border-radius-normal);
	display: flex;
	flex-shrink: 0;
	overflow: hidden;
	width: 100%;
}

.module.hero.image-hero .events-ticker .ticker-text {
	align-items: flex-start;
	background: var(--samoyed-white);
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 4px;
	justify-content: center;
	min-width: 0;
	padding: 0 var(--text-spacing-medium);
}

.module.hero.image-hero .events-ticker .pill {
	background: none;
	color: var(--grayhound);
	padding: 0;
}

.module.hero.image-hero .events-ticker .ticker-headline {
	color: var(--russian-blue);
	margin: 0;
	transition: color .3s ease;
}

.module.hero.image-hero .events-ticker .ticker-headline a {
	color: inherit;
}

.module.hero.image-hero .events-ticker a.ticker-item {
	margin-left: auto;
	max-width: 700px;
	text-decoration: none;
	width: 100%;
}

.module.hero.image-hero .events-ticker a.ticker-item:hover .ticker-headline {
	color: var(--russian-blue-hover);
}

.module.hero.image-hero .events-ticker a.ticker-item:hover .ticker-image img {
	transform: scale(1.05);
}

.module.hero.image-hero .events-ticker .ticker-image {
	aspect-ratio: 160 / 120;
	flex-shrink: 0;
	width: 160px;
}

.module.hero.image-hero .events-ticker .ticker-image img {
	transition: transform .4s ease;
}

.module.hero.image-hero .ticker-nav {
	display: flex;
	gap: var(--text-spacing-xxsmall);
	justify-content: flex-end;
}

.module.hero.image-hero .ticker-label {
	display: none;
}

.module.hero.image-hero .ticker-nav button {
	align-items: center;
	background: none;
	border: 1.5px solid var(--samoyed-white);
	border-radius: 50%;
	color: var(--samoyed-white);
	display: flex;
	height: 36px;
	justify-content: center;
	padding: 0;
	transition: background .3s ease, color .3s ease;
	width: 36px;
}

.module.hero.image-hero .ticker-nav button svg {
	height: 12px;
	width: 14px;
}

.module.hero.image-hero .ticker-nav button:hover {
	background: var(--samoyed-white);
	color: var(--russian-blue);
}

/** Hero: Image Hero (No Image) **/

.module.hero.image-hero.background-russian-blue {
	background: var(--russian-blue);
}

.module.hero.image-hero.background-russian-blue > .media {
	display: none;
}

.module.hero.image-hero.background-russian-blue > .container {
	min-height: auto;
}

.module.hero.image-hero.background-russian-blue .content {
	grid-column: span 9;
}

/*** Hero: Content + Image ***/

/* Colored background extends behind header when first module — convert margin-top to container padding-top so background covers it */

.page-builder > .module.hero.content-image:is(.background-appaloosa-beige, .background-russian-blue, .background-mustang-blue):first-child {
	margin-top: 0;
}

.page-builder > .module.hero.content-image:is(.background-appaloosa-beige, .background-russian-blue, .background-mustang-blue):first-child > .container {
	padding-top: calc(var(--header-height) + var(--text-spacing-xxlarge));
}

.page-builder > .module.hero.content-image:is(.background-appaloosa-beige, .background-russian-blue, .background-mustang-blue).module-spacing-flush:first-child > .container {
	padding-top: var(--header-height);
}

.page-builder > .module.hero.content-image:is(.background-appaloosa-beige, .background-russian-blue, .background-mustang-blue).module-spacing-small:first-child > .container {
	padding-top: calc(var(--header-height) + var(--module-spacing-small));
}

.page-builder > .module.hero.content-image:is(.background-appaloosa-beige, .background-russian-blue, .background-mustang-blue).module-spacing-medium:first-child > .container {
	padding-top: calc(var(--header-height) + var(--module-spacing-medium));
}

.page-builder > .module.hero.content-image:is(.background-appaloosa-beige, .background-russian-blue, .background-mustang-blue).module-spacing-large:first-child > .container {
	padding-top: calc(var(--header-height) + var(--module-spacing-large));
}

.page-builder > .module.hero.content-image:is(.background-appaloosa-beige, .background-russian-blue, .background-mustang-blue).module-spacing-xlarge:first-child > .container {
	padding-top: calc(var(--header-height) + var(--module-spacing-xlarge));
}

/*** Content ***/

.module.hero.content-image .content {
	align-self: center;
	grid-column: 1 / 7;
	grid-row: 1;
	padding-right: var(--text-spacing-large);
}

.module.hero.content-image .content > * + * {
	margin: var(--text-spacing-small) 0 0;
}

.module.hero.content-image .content > * + .buttons {
	margin: var(--text-spacing-medium) 0 0;
}

/* Small heading — force heading-2 underline sizing over h1 tag's default */

.module.hero.content-image.small-heading .heading-2 u::after {
	height: 10px;
	rotate: -1deg;
	top: calc(100% + 6px);
	width: calc(100% + 32px);
}

/*** Image ***/

.module.hero.content-image .media {
	aspect-ratio: 4 / 3;
	border-radius: var(--border-radius-large);
	grid-column: 7 / -1;
	grid-row: 1;
	margin-right: var(--container-breakout-full);
}


/*** Carousel Dots ***/

.module.hero.content-image .media .jazzy-dots {
	gap: var(--text-spacing-xsmall);
}

.module.hero.content-image .media .jazzy-dot {
	background: var(--wolfhound-gray);
	border: none;
	border-radius: 50%;
	height: 6px;
	opacity: 1;
	position: relative;
	transition: background 0.25s ease;
	width: 6px;
}

.module.hero.content-image .media .jazzy-dot:hover {
	background: var(--goldie-yellow);
}

.module.hero.content-image .media .jazzy-dot::before {
	border: 2px solid var(--goldie-yellow);
	border-radius: 50%;
	content: '';
	height: 16px;
	left: 50%;
	opacity: 0;
	position: absolute;
	top: 50%;
	transform: scale(0.9);
	transition: opacity 0.25s ease, transform 0.25s ease;
	translate: -50% -50%;
	width: 16px;
}

.module.hero.content-image .media .jazzy-dot.is-active {
	background: var(--wolfhound-gray);
	border: none;
	height: 6px;
	width: 6px;
}

.module.hero.content-image .media .jazzy-dot.is-active::before {
	opacity: 1;
	transform: scale(1);
}

/** Layout flip — image left, content right **/

.module.hero.content-image.layout-image-left .content {
	grid-column: 7 / -1;
	padding-left: var(--text-spacing-xxlarge);
	padding-right: 0;
}

.module.hero.content-image.layout-image-left .media {
	grid-column: 1 / 7;
	margin-left: var(--container-breakout-full);
	margin-right: 0;
}

/** No Image **/

.module.hero.content-image.no-image .media {
	display: none;
}

.module.hero.content-image.no-image .content {
	grid-column: 1 / 8;
}

/*** Hero: Image Hero Centered ***/

.module.hero.image-hero-centered {
	color: var(--samoyed-white);
	isolation: isolate;
	margin-top: 0;
	overflow-x: clip;
	padding: 0;
	position: relative;
	text-align: center;
}

/* Background image — full bleed behind header, curved bottom edge */

.module.hero.image-hero-centered > .media {
	clip-path: ellipse(120% 100% at 50% 0%);
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
}

.module.hero.image-hero-centered.carousel-mode > .media img {
	opacity: 0;
	transition: opacity 1s ease;
}

.module.hero.image-hero-centered.carousel-mode > .media img.is-active {
	opacity: 1;
}

/* Dark gradient overlay for text legibility */

.module.hero.image-hero-centered.has-gradient-overlay > .media::after {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.65) 100%);
	content: '';
	height: 100%;
	left: 0;
	opacity: .5;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1;
}

/* Content */

.module.hero.image-hero-centered > .container {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 600px;
	padding-bottom: var(--module-spacing-small);
	padding-top: calc(var(--header-height) + var(--text-spacing-large));
	position: relative;
	z-index: 2;
}

.module.hero.image-hero-centered .content {
	align-items: center;
	display: flex;
	flex-direction: column;
	max-width: 800px;
}

.module.hero.image-hero-centered .content .pill {
	background: var(--husky-blue-50);
	color: var(--russian-blue);
	font-size: calc(12rem / 16);
	padding: 6px 16px;
}

.module.hero.image-hero-centered .content > * + * {
	margin: var(--text-spacing-small) 0 0;
}

.module.hero.image-hero-centered .content > * + .buttons {
	margin: var(--text-spacing-medium) 0 0;
}

.module.hero.image-hero-centered .buttons {
	justify-content: center;
}

/* Left-aligned variant — content shifts left and the overlay re-weights from
   a centered wash to a left scrim so the text stays legible while the subject
   stays visible on the right. */

.module.hero.image-hero-centered.content-left > .container {
	align-items: flex-start;
	text-align: left;
}

.module.hero.image-hero-centered.content-left .content {
	align-items: flex-start;
	text-align: left;
}

.module.hero.image-hero-centered.content-left .buttons {
	justify-content: flex-start;
}

/* Left-aligned uses the same two-layer overlay as the home page image hero:
   a horizontal scrim carrying the text side, plus a bottom scrim so anything
   sitting low in the hero stays legible. */

.module.hero.image-hero-centered.content-left.has-gradient-overlay > .media::before {
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.55) 38%, rgba(0, 0, 0, 0.15) 65%, transparent 88%);
	content: '';
	height: 100%;
	left: 0;
	max-width: 1350px;
	position: absolute;
	top: 0;
	width: 92%;
	z-index: 1;
}

.module.hero.image-hero-centered.content-left.has-gradient-overlay > .media::after {
	background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.9) 100%);
	bottom: 0;
	height: 55%;
	opacity: 1;
	top: auto;
}

/** No Image **/

.module.hero.image-hero-centered.no-image > .media {
	display: none;
}

/** Take a Tour Card **/

/* Mirrors the events ticker on the home hero — a white card floating over the
   hero image — but centered under the content because this hero is centered. */

.module.hero.image-hero-centered .tour-ticker {
	margin-top: var(--text-spacing-xlarge);
	max-width: 480px;
	position: relative;
	width: 100%;
	z-index: 3;
}

.module.hero.image-hero-centered.content-left .tour-ticker {
	margin-right: auto;
}

/* Left-aligned with a tour card mirrors the home hero: copy on the left,
   ticker parked bottom-right. The container is a flex column by default, so
   switch it to the 12-column grid for this arrangement only. */

.module.hero.image-hero-centered.content-left.has-tour > .container {
	display: grid;
	gap: var(--gap);
	grid-template-columns: var(--grid);
}

.module.hero.image-hero-centered.content-left.has-tour .content {
	align-self: center;
	grid-column: 1 / 8;
	grid-row: 1;
	padding-right: var(--text-spacing-large);
}

.module.hero.image-hero-centered.content-left.has-tour .tour-ticker {
	align-self: flex-end;
	grid-column: 9 / -1;
	grid-row: 1;
	margin-right: 0;
	margin-top: 0;
	max-width: none;
}

.module.hero.image-hero-centered .tour-ticker .ticker-item {
	align-items: stretch;
	background: var(--samoyed-white);
	border: 0;
	border-radius: var(--border-radius-normal);
	box-shadow: var(--card-shadow);
	display: flex;
	overflow: hidden;
	padding: 0;
	position: relative;
	text-align: left;
	text-decoration: none;
	transition: box-shadow .3s ease, transform .3s ease;
	width: 100%;
}

.module.hero.image-hero-centered .tour-ticker a.ticker-item,
.module.hero.image-hero-centered .tour-ticker button.ticker-item {
	cursor: pointer;
}

.module.hero.image-hero-centered .tour-ticker a.ticker-item:hover,
.module.hero.image-hero-centered .tour-ticker a.ticker-item:focus-visible,
.module.hero.image-hero-centered .tour-ticker button.ticker-item:hover,
.module.hero.image-hero-centered .tour-ticker button.ticker-item:focus-visible {
	box-shadow: 16px 16px 40px 0 rgba(0, 0, 0, 0.18);
	transform: translate3d(0, -2px, 0);
}

.module.hero.image-hero-centered .tour-ticker .ticker-text {
	align-items: flex-start;
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 4px;
	justify-content: center;
	min-width: 0;
	padding: var(--text-spacing-xsmall) var(--text-spacing-small);
}

.module.hero.image-hero-centered .tour-ticker .pill {
	background: none;
	color: var(--grayhound);
	padding: 0;
}

.module.hero.image-hero-centered .tour-ticker .ticker-headline {
	color: var(--russian-blue);
	margin: 0;
	transition: color .3s ease;
}

.module.hero.image-hero-centered .tour-ticker a.ticker-item:hover .ticker-headline,
.module.hero.image-hero-centered .tour-ticker button.ticker-item:hover .ticker-headline {
	color: var(--russian-blue-hover);
}

.module.hero.image-hero-centered .tour-ticker .ticker-image {
	aspect-ratio: 160 / 120;
	flex-shrink: 0;
	width: 160px;
}

.module.hero.image-hero-centered .tour-ticker .ticker-image img {
	transition: transform .4s ease;
}

.module.hero.image-hero-centered .tour-ticker a.ticker-item:hover .ticker-image img,
.module.hero.image-hero-centered .tour-ticker button.ticker-item:hover .ticker-image img {
	transform: scale(1.05);
}

/* Expand glyph sits over the thumbnail so it reads as "opens a viewer" */

.module.hero.image-hero-centered .tour-ticker .arrow-block {
	position: absolute;
	right: var(--text-spacing-xxsmall);
	top: var(--text-spacing-xxsmall);
}

/** Take a Tour Lightbox **/

/*
 * Fixed dialog size so controls stay anchored across slides — a shrink-to-fit
 * dialog would shift prev/next as images of different aspect ratios load (CLS).
 */
.hero-tour-lightbox[open] {
	align-items: center;
	background: transparent;
	border: none;
	display: flex;
	height: 90vh;
	justify-content: center;
	overflow: visible;
	padding: 0;
	width: 90vw;
}

.hero-tour-lightbox::backdrop {
	background: black;
	opacity: .85;
}

.hero-tour-lightbox .jazzy-dialog-img {
	border-radius: var(--border-radius-normal);
	display: block;
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
	outline: none;
	user-select: none;
}

.hero-tour-lightbox [data-jazzy-dialog-close],
.hero-tour-lightbox [data-jazzy-dialog-prev],
.hero-tour-lightbox [data-jazzy-dialog-next] {
	background: rgba(255, 255, 255, 0.25);
	border: 0;
	border-radius: var(--border-radius-normal);
	color: var(--samoyed-white);
	cursor: pointer;
	height: 40px;
	padding: 0;
	position: absolute;
	transition: background .2s ease;
	width: 40px;
	z-index: 1;
}

.hero-tour-lightbox [data-jazzy-dialog-close]:hover,
.hero-tour-lightbox [data-jazzy-dialog-prev]:hover,
.hero-tour-lightbox [data-jazzy-dialog-next]:hover {
	background: rgba(255, 255, 255, 0.4);
}

.hero-tour-lightbox [data-jazzy-dialog-close] {
	right: var(--text-spacing-xsmall);
	top: var(--text-spacing-xsmall);
}

.hero-tour-lightbox [data-jazzy-dialog-prev] {
	left: calc(var(--text-spacing-medium) * -1);
	top: 50%;
	transform: translateY(-50%);
}

.hero-tour-lightbox [data-jazzy-dialog-next] {
	right: calc(var(--text-spacing-medium) * -1);
	top: 50%;
	transform: translateY(-50%);
}

.hero-tour-lightbox [data-jazzy-dialog-prev] svg,
.hero-tour-lightbox [data-jazzy-dialog-next] svg,
.hero-tour-lightbox [data-jazzy-dialog-close] svg {
	display: block;
	height: 20px;
	margin: 0 auto;
	width: 20px;
}

/*** Hero: Content Overlay ***/

.module.hero.content-overlay {
	isolation: isolate;
	margin-top: 0;
	overflow-x: clip;
	padding: 0;
	position: relative;
}

/* Background image — full bleed behind header, curved bottom edge */

.module.hero.content-overlay > .media {
	clip-path: ellipse(120% 100% at 50% 0%);
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
}

.module.hero.content-overlay.carousel-mode > .media img {
	opacity: 0;
	transition: opacity 1s ease;
}

.module.hero.content-overlay.carousel-mode > .media img.is-active {
	opacity: 1;
}

/*** Content ***/

.module.hero.content-overlay > .container {
	align-items: flex-end;
	display: flex;
	min-height: min(calc(600px + var(--header-height)), 60dvh);
	padding-bottom: var(--text-spacing-xlarge);
	padding-top: calc(var(--header-height) + var(--module-spacing-medium));
	position: relative;
	z-index: 2;
}

.module.hero.content-overlay .content-card {
	background: var(--samoyed-white);
	border-radius: var(--border-radius-large);
	color: var(--retriever-black);
	max-width: 560px;
	padding: var(--text-spacing-xlarge);
}

.module.hero.content-overlay .content-card > * + * {
	margin: var(--text-spacing-small) 0 0;
}

.module.hero.content-overlay .content-card .heading-2 {
	isolation: isolate;
}

.module.hero.content-overlay .content-card > * + .buttons {
	margin: var(--text-spacing-medium) 0 0;
}

/* Secondary button sits on the white card, not the background image —
   undo the .background-image white-text override from style.css. */

.module.hero.content-overlay .content-card .btn.secondary {
	color: var(--russian-blue);
}

/** Card Right **/

.module.hero.content-overlay.card-right > .container {
	justify-content: flex-end;
}

/** No Image **/

.module.hero.content-overlay.no-image > .media {
	display: none;
}

/*** Hero: Centered ***/

.module.hero.centered {
	padding: var(--module-spacing-medium) 0;
}

.module.hero.centered .container {
	text-align: center;
}

.module.hero.centered .eyebrow:not(:last-child) {
	margin-bottom: var(--text-spacing-small);
}

/*** Hero: Content + Logo ***/

.module.hero.content-logo .breadcrumb {
	margin-bottom: var(--text-spacing-medium);
}

.module.hero.content-logo .content-row {
	align-items: center;
	display: flex;
	gap: var(--text-spacing-large);
	justify-content: space-between;
}

.module.hero.content-logo .content {
	flex: 1;
	min-width: 0;
}

.module.hero.content-logo .content > * + * {
	margin-top: var(--text-spacing-small);
}

.module.hero.content-logo .logo {
	flex-shrink: 0;
}

.module.hero.content-logo .logo img {
	display: block;
	height: auto;
	max-width: 200px;
}

/** No Logo **/

.module.hero.content-logo.no-logo .content-row {
	display: block;
}

/*
 * ====================================================================== *
 * MQ >=2222px — Full Max
 * ====================================================================== *
 */

@media only screen and (min-width: calc(2222rem / 16)) {

	.module.hero.image-hero {
		aspect-ratio: 3 / 1;
		/*max-height: 70dvh;*/
	}

	.module.hero.image-hero .media img {
		position: relative;
	}

	.module.hero.image-hero-centered {
		aspect-ratio: 3 / 1;
		max-height: 50dvh;
	}

	.module.hero.image-hero-centered > .container {
		height: 100%;
	}

}

/*
 * ====================================================================== *
 * MQ <=1400px — Small Desktop
 * ====================================================================== *
 */

@media only screen and (max-width: calc(1400rem / 16)) {

	/*.module.hero.image-hero > .container {
		min-height: 720px;
	}*/

}

/*
 * ====================================================================== *
 * MQ <=1300px
 * ====================================================================== *
 */

@media only screen and (max-width: calc(1300rem / 16)) {

	.module.hero.image-hero.has-gradient-overlay > .media::before {
		max-width: 600px;
	}

}

/*
 * ====================================================================== *
 * MQ <=1200px — Laptop
 * ====================================================================== *
 */

@media only screen and (max-width: calc(1200rem / 16)) {

	.module.hero.image-hero .content {
		grid-column: 1 / 9;
	}

	.module.hero.image-hero .events-ticker {
		grid-column: 7 / -1;
	}

	.module.hero.image-hero-centered.content-left.has-tour .content {
		grid-column: 1 / 9;
	}

	.module.hero.image-hero-centered.content-left.has-tour .tour-ticker {
		grid-column: 7 / -1;
	}

}

/*
 * ====================================================================== *
 * MQ <=950px — Tablet
 * ====================================================================== *
 */

@media only screen and (max-width: calc(950rem / 16)) {

	/*** Hero: Centered ***/

	.module.hero.centered {
		padding: 0 0 var(--module-spacing-small);
	}

	/*** Image Hero ***/

	.module.hero.image-hero > .container {
		align-items: flex-start;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		min-height: auto;
		padding-bottom: var(--text-spacing-large);
		padding-top: var(--text-spacing-large);
	}

	.module.hero.image-hero .content {
		grid-column: unset;
		grid-row: auto;
	}

	.module.hero.image-hero .events-ticker {
		align-items: flex-start;
		align-self: flex-start;
		grid-column: unset;
		grid-row: auto;
		margin-right: 0;
		margin-top: var(--text-spacing-large);
	}

	/*** Location hero — ticker drops under the copy ***/

	.module.hero.image-hero-centered.content-left.has-tour > .container {
		display: flex;
	}

	.module.hero.image-hero-centered.content-left.has-tour .content,
	.module.hero.image-hero-centered.content-left.has-tour .tour-ticker {
		align-self: flex-start;
		grid-column: unset;
		grid-row: auto;
		padding-right: 0;
	}

	.module.hero.image-hero-centered.content-left.has-tour .tour-ticker {
		margin-top: var(--text-spacing-large);
		max-width: 480px;
	}

	.module.hero.image-hero .events-ticker .ticker-image {
		width: 120px;
	}

	.module.hero.image-hero .ticker-nav {
		justify-content: flex-start;
	}

	/*** Content + Image ***/

	.module.hero.content-image {
		margin-top: 0;
	}

	.module.hero.content-image > .container {
		display: flex;
		flex-direction: column-reverse;
		gap: var(--text-spacing-large);
	}

	.module.hero.content-image .content,
	.module.hero.content-image.layout-image-left .content {
		align-items: center;
		align-self: unset;
		grid-column: unset;
		grid-row: auto;
		padding-left: 0;
		padding-right: 0;
		text-align: center;
	}

	.module.hero.content-image .content .buttons {
		justify-content: center;
	}

	.module.hero.content-image .media,
	.module.hero.content-image.layout-image-left .media {
		grid-column: unset;
		grid-row: auto;
		margin-left: 0;
		margin-right: 0;
		max-height: 480px;
		width: 100%;
	}

	/*** Content Overlay ***/

	.module.hero.content-overlay {
		padding-bottom: 72px;
	}

	.module.hero.content-overlay > .media {
		height: calc(480px + var(--header-height));
	}

	.module.hero.content-overlay > .container {
		min-height: calc(480px + var(--header-height));
	}

	.module.hero.content-overlay .content-card {
		max-width: none;
		transform: translateY(120px);
	}

}

/*
 * ====================================================================== *
 * MQ <=650px — Mobile
 * ====================================================================== *
 */

@media only screen and (max-width: calc(650rem / 16)) {

	/*** Take a Tour Card ***/

	.module.hero.image-hero-centered .tour-ticker {
		margin-top: var(--text-spacing-large);
		max-width: none;
	}

	.module.hero.image-hero-centered.content-left.has-tour .tour-ticker {
		margin-top: 0;
	}

	.module.hero.image-hero-centered .tour-ticker .ticker-text {
		padding: var(--text-spacing-xsmall);
	}

	.module.hero.image-hero-centered .tour-ticker .ticker-image {
		width: 110px;
	}

	/*** Take a Tour Lightbox — arrows move inside and to the bottom ***/

	.hero-tour-lightbox [data-jazzy-dialog-prev],
	.hero-tour-lightbox [data-jazzy-dialog-next] {
		bottom: var(--text-spacing-medium);
		top: auto;
		transform: none;
	}

	.hero-tour-lightbox [data-jazzy-dialog-prev] {
		left: calc(50% - 48px);
	}

	.hero-tour-lightbox [data-jazzy-dialog-next] {
		left: calc(50% + 8px);
		right: auto;
	}

	/* Colored content-image hero — extend bg behind the in-flow mobile header
	   by locally defining --header-height so base padding calculations include it,
	   and using negative margin-top to pull the module up behind the header. */

	.page-builder > .module.hero.content-image:is(.background-appaloosa-beige, .background-russian-blue, .background-mustang-blue):first-child {
		--header-height: 112px; /* mobile #header: 20px padding + 72px logo + 20px padding */
		margin-top: calc(-1 * var(--header-height));
	}

	/* Dark-bg content-image hero: header sits over the dark color, so the
	   logo needs to stay white — overrides the mobile rule that forces
	   on-dark logos back to russian-blue. */

	body:has(> main > .page-builder > .module.hero.content-image:is(.background-russian-blue, .background-mustang-blue):first-child) #header.on-dark:not(.sticky) .logo-default svg path {
		fill: var(--samoyed-white);
	}

	/* Lock the image-to-header gap on mobile regardless of CMS module-spacing
	   choice. flex-end in column-reverse packs image+content up against the
	   padding-top so viewport fill lands below the content, not above. */

	.page-builder > .module.hero.content-image:is(.background-appaloosa-beige, .background-russian-blue, .background-mustang-blue):first-child > .container,
	.page-builder > .module.hero.content-image:is(.background-appaloosa-beige, .background-russian-blue, .background-mustang-blue):is(.module-spacing-flush, .module-spacing-small, .module-spacing-medium, .module-spacing-large, .module-spacing-xlarge):first-child > .container {
		justify-content: flex-end;
		padding-top: calc(var(--header-height) + var(--text-spacing-small));
	}

	.module.hero.centered {
		padding-bottom: var(--text-spacing-xlarge);
	}

	.module.hero.centered .eyebrow:not(:last-child) {
		margin-bottom: var(--text-spacing-xxsmall);
		margin-top: var(--text-spacing-medium);
	}

	.module.hero.content-image > .container {
		gap: 0;
	}

	.module.hero.content-image .media {
		margin-bottom: var(--text-spacing-medium);
	}

	.module.hero.content-image .content > * + * {
		margin: var(--text-spacing-xxsmall) 0 0;
	}

	/* Add breathing room after an underlined heading — the <u>'s
	   yellow stroke sits just below the text and visually crowds the
	   next element. */

	.module.hero.content-image .content > .heading-1:has(u) + * {
		margin-top: var(--text-spacing-small);
	}

	.module.hero.content-image .content > * + .buttons {
		margin: var(--text-spacing-small) 0 0;
	}

	/* Small-heading variant: the default override in this file forces desktop
	   H2 underline sizing at higher specificity than the mobile base rule,
	   so we re-apply the mobile H2 underline scale here. */

	.module.hero.content-image.small-heading .heading-2 u::after {
		height: 6px;
		top: calc(100% + 1px);
		width: calc(100% + 20px);
	}

	/*** Image Hero Centered ***/

	.module.hero.image-hero-centered > .container {
		padding-bottom: var(--module-spacing-medium);
		padding-top: var(--module-spacing-small);
	}

	.module.hero.image-hero-centered .content > * + * {
		margin: var(--text-spacing-xsmall) 0 0;
	}

	/* Image Hero Centered — background-image variant:
	   image stacks above content, extends behind the header
	   (logo already flips white via on-dark in page-builder.php). */

	.module.hero.image-hero-centered.background-image {
		color: var(--retriever-black);
		display: flex;
		flex-direction: column;
		padding-bottom: var(--text-spacing-xsmall);
		text-align: center;
	}

	/* When first on the page, pull the module up behind the (now in-flow)
	   mobile header so the image reaches viewport top. Header keeps its
	   z-index: 10 and sits on top visually. */

	.page-builder > .module.hero.image-hero-centered.background-image:first-child {
		--header-height: 112px; /* mobile #header: 20px padding + 72px logo + 20px padding */
		margin-top: calc(-1 * var(--header-height));
	}

	/* Logo needs to switch to white since it's now sitting over the image.
	   Override the mobile rule that forces on-dark logos back to russian-blue. */

	body:has(> main > .page-builder > .module.hero.image-hero-centered.background-image:first-child) #header.on-dark:not(.sticky) .logo-default svg path {
		fill: var(--samoyed-white);
	}

	.module.hero.image-hero-centered.background-image > .media {
		aspect-ratio: 375 / 260;
		/* Wide rx keeps curve shallow and in-proportion like desktop;
		   percentage ry alone gets skewed when the image shortens. */
		clip-path: ellipse(200% 100% at 50% 0%);
		height: auto;
		order: 1;
		position: relative;
		width: 100%;
		z-index: 0;
	}

	.module.hero.image-hero-centered.background-image > .media::after {
		display: none;
	}

	.module.hero.image-hero-centered.background-image > .container {
		min-height: 0;
		order: 2;
		padding-bottom: 0;
		padding-top: var(--text-spacing-medium);
		position: static;
	}

	.module.hero.image-hero-centered.background-image .content > .pill + .heading-2 {
		margin-top: var(--text-spacing-xsmall);
	}

	/* Container is a flex column with align-items: center, which sizes
	   .content to its widest child's max-content (a long unbroken pair
	   like "Community Outreach"). Force .content to fill the container
	   so the heading has a real width to wrap against. */

	.module.hero.image-hero-centered.background-image .content {
		width: 100%;
	}

	.module.hero.image-hero-centered.background-image .content .heading-2 {
		max-width: 100%;
	}

	.module.hero.image-hero-centered.background-image .content .white {
		color: var(--russian-blue);
	}

	.module.hero.image-hero-centered.background-image .btn.secondary {
		color: var(--russian-blue);
	}

	/*** Image Hero ***/

	.module.hero.image-hero.background-image {
		background: var(--pitty-off-white);
		color: var(--retriever-black);
		display: flex;
		flex-direction: column;
		padding: var(--text-spacing-small) 0;
		position: relative;
	}

	.module.hero.image-hero.background-image > .media {
		aspect-ratio: 375 / 400;
		height: auto;
		order: 2;
		position: relative;
		width: 100%;
		z-index: 0;
	}

	.module.hero.image-hero.background-image > .media::before {
		display: none;
	}

	.module.hero.image-hero.has-gradient-overlay.background-image > .media::after {
		background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.85) 100%);
		height: 55%;
	}

	.module.hero.image-hero.background-image > .container {
		display: block;
		min-height: 0;
		order: 1;
		padding-bottom: var(--text-spacing-large);
		padding-top: 0;
		position: static;
		text-align: center;
		z-index: auto;
	}

	.module.hero.image-hero.background-image .content {
		padding-right: 0;
	}

	.module.hero.image-hero.background-image .content .white {
		color: var(--russian-blue);
	}

	.module.hero.image-hero.background-image .btn.secondary {
		color: var(--russian-blue);
	}

	.module.hero.image-hero.background-image .content > * + * {
		margin: var(--text-spacing-xsmall) 0 0;
	}

	.module.hero.image-hero.background-image .content > * + .buttons {
		margin: var(--text-spacing-small) 0 0;
	}

	.module.hero.image-hero.background-image .buttons {
		flex-direction: column;
		gap: var(--text-spacing-small);
		justify-content: center;
	}

	.module.hero.image-hero.background-image .jazzy-carousel-wrapper {
		bottom: 0;
		display: flex;
		flex-direction: column;
		gap: var(--text-spacing-xsmall);
		left: var(--container-outer-padding);
		position: absolute;
		width: calc(100% - (var(--container-outer-padding) * 2));
		z-index: 4;
	}

	.module.hero.image-hero.background-image > .background-shape.shape-bottom {
		bottom: var(--text-spacing-small);
		left: 0;
		position: absolute;
		width: 100%;
		z-index: 1;
	}

	.module.hero.image-hero .ticker-nav {
		align-items: center;
		justify-content: flex-start;
	}

	.module.hero.image-hero .ticker-label {
		color: var(--samoyed-white);
		display: block;
		margin-right: auto;
	}

	.module.hero.image-hero .events-ticker {
		align-self: auto;
		margin: 0;
	}

	.module.hero.image-hero .events-ticker .ticker-item {
		border-radius: 6px;
		box-shadow: 8px 8px 40px 0 rgba(0, 0, 0, 0.04);
		overflow: clip;
		text-align: left;
	}

	.module.hero.image-hero .events-ticker .pill {
		display: none;
	}

	.module.hero.image-hero .events-ticker .ticker-text {
		padding: 0 var(--text-spacing-small) 0 var(--text-spacing-xsmall);
		width: 140px;
	}

	.module.hero.image-hero .events-ticker .ticker-headline {
		font-size: calc(14rem / 16) !important;
		font-weight: 600;
		line-height: calc(22 / 14) !important;
	}

	.module.hero.image-hero .events-ticker .ticker-image {
		aspect-ratio: 116 / 87;
		flex-shrink: 0;
		height: 87px;
		width: 116px;
	}

	.module.hero.image-hero .events-ticker .ticker-image img {
		border-radius: 0;
	}

	.module.hero.image-hero.background-russian-blue > .container {
		min-height: 0;
		padding-bottom: var(--text-spacing-medium);
		padding-top: var(--text-spacing-medium);
	}

	/*** Content + Image ***/

	.module.hero.content-image .media {
		aspect-ratio: 3 / 2;
	}

	/*** Content Overlay ***/

	.module.hero.content-overlay {
		display: flex;
		flex-direction: column;
		padding-bottom: 0;
	}

	.module.hero.content-overlay > .media {
		aspect-ratio: 3 / 2;
		height: auto;
		order: 1;
		position: relative;
	}

	.module.hero.content-overlay > .container {
		min-height: auto;
		padding-bottom: var(--text-spacing-xlarge);
		padding-top: var(--text-spacing-medium);
	}

	.module.hero.content-overlay .content-card {
		background: transparent;
		border-radius: 0;
		padding: 0;
		transform: none;
	}

	.module.hero.content-overlay .content-card > * + * {
		margin: var(--text-spacing-xsmall) 0 0;
	}

	.module.hero.content-overlay .content-card > * + .buttons {
		margin: var(--text-spacing-small) 0 0;
	}

	/*** Content + Logo ***/

	.module.hero.content-logo .content-row {
		align-items: flex-start;
		flex-direction: column;
	}

}

/*
 * ====================================================================== *
 * MQ height <=840px — Short Viewport
 * ====================================================================== *
 *
 * Tighter top padding on image-hero when the viewport is short, so the
 * header offset + module spacing don't eat too much of the visible area.
 */

@media only screen and (max-height: calc(840rem / 16)) {

	.module.hero.image-hero {
		padding-bottom: var(--module-spacing-small);
		padding-top: calc(var(--header-height) + var(--text-spacing-small));
	}

}