/**
 * GENERATED by scripts/build-editor-css.mjs -- DO NOT hand-edit.
 * Public Gutenberg component CSS from theme/roarr-headless/src/blocks/.
 */

/* -- src/blocks/accessibility-bento.css (canonical component source) -- */
/**
 * Accessibility bento — 3-tile photo grid (one wide "main" tile + two
 * square tiles), used in the Partners page Sanctuary section and the
 * Accessibility page.
 * Ported from design-reference/mocks/css/styles.css ~lines 7675-7708.
 * Batch D (partners.html).
 */
.roarr-accessibility-bento {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-16);
	overflow: visible;
	border-radius: 0;
	box-shadow: none;
}

.roarr-accessibility-bento__item {
	display: block;
	min-width: 0;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--cream);
	box-shadow: 0 var(--space-12) var(--space-24) color-mix(in srgb, var(--deep-forest) 12%, transparent);
}

.roarr-accessibility-bento__item--main {
	grid-column: 1 / -1;
}

.roarr-accessibility-bento__item img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: var(--image-ratio-square);
	object-fit: cover;
}

.roarr-accessibility-bento__item--main img {
	aspect-ratio: var(--image-ratio-landscape);
	height: auto;
}

/* -- src/blocks/article.css (canonical component source) -- */
/* .roarr-article — ported verbatim from design-reference/mocks/css/styles.css.
   News singles use the full template (side-rail reading layout) in Phase 3;
   this skeleton only needs the article header + min-width reset so the
   post title/content read correctly without the rail. */

.roarr-article {
  min-width: 0;
}

.roarr-article__header {
	display: grid;
	margin-bottom: 0;
	padding-bottom: 0;
	border: 0;
	align-items: start;
}

.roarr-article__header h2 {
	max-width: none;
	margin: 0;
	color: var(--wp--preset--color--text-primary);
	font-size: var(--h2);
	line-height: var(--lh-tight);
}

.roarr-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16) var(--space-24);
  color: var(--wp--preset--color--primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.roarr-article__meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}

.roarr-article__header--single {
	grid-template-columns: minmax(0, var(--reading-width));
}

.roarr-site-main .roarr-reading-layout.roarr-reading-layout--solo {
  margin-top: 0;
}

.news-single-page > .section-body {
	padding-top: 0;
	/* The final CTA already owns the dark newsletter-to-footer transition.
	 * Generic section-body bottom padding inserted a cream buffer between the
	 * newsletter and the shared footer brush, hiding that section break. */
	padding-bottom: 0;
}

.roarr-reading-layout--solo .roarr-article {
  max-width: 100%;
  margin-inline: auto;
}

.roarr-indoor-page .roarr-section__inner > .roarr-split__content:only-child {
  max-width: var(--reading-width);
  margin-inline: auto;
}

.news-single-page .roarr-share-row,
.news-single-page .roarr-article__body > :not(.roarr-section, .roarr-section-break, .roarr-rip, .wp-block-gallery) {
	width: min(100%, var(--reading-width));
	margin-inline: 0;
}

.roarr-indoor-page .roarr-section__inner > .roarr-split__content:only-child {
  display: grid;
  gap: var(--space-16);
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: var(--lh-loose);
}

.roarr-indoor-page .roarr-section__inner > .roarr-split__content:only-child > h2 {
  margin: 0 0 var(--space-8);
  max-width: none;
  color: var(--text-primary);
  font-size: var(--h2);
  line-height: var(--lh-tight);
}

.roarr-indoor-page .roarr-section__inner > .roarr-split__content:only-child > .wp-core-block:has(.roarr-media-frame) {
  margin: var(--space-8) 0;
}

.roarr-indoor-page .roarr-section__inner > .roarr-split__content:only-child .roarr-media-frame {
  border-radius: var(--radius-md);
  background: var(--parchment);
  box-shadow: var(--shadow-card-soft);
}

.roarr-indoor-page .roarr-section__inner > .roarr-split__content:only-child .roarr-media-frame img {
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  object-fit: contain;
}

.roarr-indoor-page .roarr-section__inner > .roarr-split__content:only-child p {
  margin: 0;
}

/* News index — placeholder hook only, no mock exists yet for this template
   (see the news/page.tsx comment). Minimal token-only layout so it isn't
   unstyled; replace wholesale once the BlogListing block/mock lands. */
.roarr-news-list {
  display: grid;
  gap: var(--space-32);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.roarr-news-list__item a {
  display: grid;
  gap: var(--space-8);
  color: inherit;
  text-decoration: none;
}

/* Native News & Blogs article shell. */
:is(.roarr-site-main, .editor-styles-wrapper) .roarr-article__image {
  overflow: hidden;
  margin: 0 0 var(--space-24);
  border-radius: var(--radius-md);
  background: var(--parchment);
  box-shadow: var(--shadow-card-soft);
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-article__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--image-ratio-media);
  object-fit: cover;
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-article__image--banner img,
:is(.roarr-site-main, .editor-styles-wrapper) .roarr-article__image--inline img {
	aspect-ratio: auto;
}

/* News opening: the title, date and editable opening copy share the left
 * reading lane; the existing glance-list occupies the right lane. The saved
 * composition remains ordinary core/group, core/list and core/icon blocks. */
:is(.roarr-site-main, .editor-styles-wrapper) .roarr-news-opening,
.roarr-site-main .roarr-article__header {
	align-items: start;
}

:is(.roarr-site-main .roarr-article__header, .editor-styles-wrapper .roarr-news-opening) .roarr-split__content {
	align-content: start;
}

:is(.roarr-site-main .roarr-article__header, .editor-styles-wrapper .roarr-news-opening) .roarr-split__content > p {
	margin: 0;
	color: var(--text-secondary);
	font-size: var(--text-base);
	line-height: var(--lh-loose);
}

:is(.roarr-site-main .roarr-article__header, .editor-styles-wrapper .roarr-news-opening) .roarr-split__content > p:first-of-type {
	color: var(--text-primary);
	font-size: var(--text-lg);
	font-weight: var(--weight-bold);
}

:is(.roarr-site-main .roarr-article__header, .editor-styles-wrapper .roarr-news-opening) .roarr-leaf-heading {
	margin: var(--space-8) 0 0;
	font-size: var(--h3);
}

:is(.roarr-site-main .roarr-article__header, .editor-styles-wrapper .roarr-news-opening) .roarr-split__media {
	align-self: start;
	width: 100%;
	padding: var(--space-24);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
	background: var(--parchment);
	box-shadow: var(--shadow-card-soft);
}

:is(.roarr-site-main .roarr-article__header, .editor-styles-wrapper .roarr-news-opening) .roarr-glance-list {
	margin: 0;
}

:is(.roarr-site-main .roarr-article__body, .editor-styles-wrapper .roarr-article-body) {
	display: block;
	max-width: none;
	margin-top: var(--space-32);
	color: var(--text-secondary);
	font-size: var(--text-base);
	line-height: var(--lh-loose);
}

/* Short, paragraph-only news briefs use the full article canvas as a balanced
 * editorial spread. The template adds this modifier only to compact stories;
 * longer or structured articles retain the single comfortable reading lane. */
@media (min-width: 1024px) {
	.roarr-site-main .roarr-article__body--brief {
		width: 100%;
		columns: 2;
		column-gap: clamp(var(--space-48), 7vw, var(--space-96));
		column-rule: 1px solid var(--border-light);
		column-fill: balance;
	}

	.news-single-page .roarr-article__body--brief > :not(.roarr-section, .roarr-section-break, .roarr-rip, .wp-block-gallery) {
		width: auto;
		break-inside: avoid;
	}

	.news-single-page .roarr-article__body--brief > p:first-child::first-letter {
		float: left;
		margin: 0.05em 0.12em 0 0;
		color: var(--primary);
		font-family: var(--font-heading);
		font-size: 3.35em;
		font-weight: var(--weight-heavy);
		line-height: 0.82;
	}
}

:is(.roarr-site-main .roarr-article__body, .editor-styles-wrapper .roarr-article-body)
  > :not(.roarr-section-break, .roarr-rip) {
  margin-block: 0;
}

:is(.roarr-site-main .roarr-article__body, .editor-styles-wrapper .roarr-article-body)
  > :not(.roarr-section, .roarr-section-break, .roarr-rip)
  + :not(.roarr-section, .roarr-section-break, .roarr-rip) {
  margin-top: var(--space-16);
}

:is(.roarr-site-main .roarr-article__body, .editor-styles-wrapper .roarr-article-body)
  > :not(.roarr-section, .roarr-section-break, .roarr-rip)
  + .roarr-section {
  margin-top: var(--space-32);
}

:is(.roarr-site-main .roarr-article__body, .editor-styles-wrapper .roarr-article-body) :is(strong, h2, h3, h4) {
  color: var(--text-primary);
}

:is(.roarr-site-main .roarr-article__body, .editor-styles-wrapper .roarr-article-body) > :is(h2, h3) {
  margin-top: var(--space-16);
  font-family: var(--font-heading);
  font-size: var(--h3);
  font-weight: var(--weight-heavy);
  line-height: var(--lh-tight);
  text-transform: none;
}

:is(.roarr-site-main .roarr-article__body, .editor-styles-wrapper .roarr-article-body) > p:first-child {
  color: var(--text-primary);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

:is(.roarr-site-main .roarr-article__body, .editor-styles-wrapper .roarr-article-body) .wp-block-image:not(.roarr-article__image) {
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-soft);
}

:is(.roarr-site-main .roarr-article__body, .editor-styles-wrapper .roarr-article-body) .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* Native Gallery owns its column count, so removing or adding an image in
 * Gutenberg automatically closes or opens the available space. */
:is(.roarr-site-main .roarr-article__body, .editor-styles-wrapper .roarr-article-body) > .wp-block-gallery {
	width: 100%;
	margin: 0;
	gap: var(--space-16);
}

:is(.roarr-site-main .roarr-article__body, .editor-styles-wrapper .roarr-article-body)
	> .wp-block-gallery
	.wp-block-image {
	margin: 0;
}

:is(.roarr-site-main .roarr-article__body, .editor-styles-wrapper .roarr-article-body) figcaption {
  margin: var(--space-8) var(--space-12) var(--space-12);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
}

:is(.roarr-site-main .roarr-article__body, .editor-styles-wrapper .roarr-article-body) .wp-block-quote {
  margin-block: var(--space-16);
  padding: var(--space-24);
  border: 0;
  border-left: var(--space-8) solid var(--primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--parchment);
  color: var(--text-primary);
  box-shadow: var(--shadow-card-soft);
}

.roarr-site-main .roarr-share-row {
	position: relative;
	z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16);
	margin-top: var(--space-32);
	padding-top: var(--space-24);
  border-top: 1px solid var(--border-light);
  color: var(--text-primary);
  font-size: var(--text-sm);
}

.roarr-site-main .roarr-share-row a {
  display: inline-grid;
  place-items: center;
  width: var(--space-32);
  height: var(--space-32);
  border-radius: var(--radius-pill);
  background: var(--card-on-light);
  color: var(--deep-forest);
  font-weight: var(--weight-heavy);
  text-decoration: none;
}

.roarr-site-main .roarr-section--related-news .roarr-card-grid {
	align-items: stretch;
}

/* A news story without FAQs hands the green related band straight to the
 * final CTA. Carry that green through the shared down-brush instead of
 * inserting the default cream transition between the two colour sections. */
.news-single-page .roarr-section--related-news + .roarr-rip--cta {
	--roarr-break-fill: var(--wp--preset--color--green-dark);
}

/* The top brush overlaps farther into this band than the bottom CTA brush.
 * Give compact layouts one extra spacing rung above the heading so the cards
 * themselves sit visually centred between both painted edges. The shared
 * section-head keeps its normal 48px heading-to-card gap. */
@media (max-width: 1023px) {
	.news-single-page .news-whatson-section {
		padding-top: var(--section-padding-desktop);
	}
}

@media (max-width: 639px) {
	.news-single-page .news-whatson-section {
		padding-top: var(--section-padding-tablet);
	}
}

/* Three 280px cards plus two 24px gaps fit exactly at a 952px viewport in the
 * news container. Below that measured threshold, retain the cards' shared
 * 240px safe height and use the same native scroll-snap carousel convention
 * as the site's other compact card rows. */
@media (max-width: 951px) {
	.roarr-site-main .roarr-section--related-news .roarr-card-grid--related {
		display: flex;
		gap: var(--space-24);
		width: 100%;
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scroll-padding-inline: 0;
		scroll-snap-type: x mandatory;
		touch-action: pan-x;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.roarr-site-main .roarr-section--related-news .roarr-card-grid--related::-webkit-scrollbar {
		display: none;
	}

	.roarr-site-main .roarr-section--related-news .roarr-card-grid--related > .adventure-card {
		flex: 0 0 clamp(280px, 44vw, 397px);
		width: clamp(280px, 44vw, 397px);
		min-height: 240px;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}
}

.roarr-site-main .roarr-section--news-faq .faq-accordion {
	width: min(100%, var(--reading-width));
	margin-inline: auto;
}

@media (max-width: 1023px) {
	:is(.roarr-site-main .roarr-article__header, .editor-styles-wrapper .roarr-news-opening)
		> .roarr-split__content {
		display: grid;
		order: 1;
	}

	:is(.roarr-site-main .roarr-article__header, .editor-styles-wrapper .roarr-news-opening) .roarr-split__media {
		order: 2;
		margin-block: var(--space-8) 0;
	}
}

@media (max-width: 767px) {
	:is(.roarr-site-main .roarr-article__header, .editor-styles-wrapper .roarr-news-opening) .roarr-split__media {
		padding: var(--space-20);
	}

	:is(.roarr-site-main .roarr-article__body, .editor-styles-wrapper .roarr-article-body) {
		margin-top: var(--space-24);
	}
}

/* -- src/blocks/attractions-bento.css (canonical component source) -- */
/**
 * roarr-attractions-bento / roarr-feature-band — ported from
 * design-reference/mocks/css/styles.css (Attractions Bento block, lines
 * ~13363-13684). Search/quick-filter animation states (.is-hidden,
 * .is-filtering, .is-results, .roarr-bento-empty) are mock-only interactive
 * behaviour with no equivalent client JS on this build yet — not ported;
 * the base curated masonry layout (feature bands + wide/tall/large tiles)
 * renders identically without them.
 *
 * Tiles reuse the shared .roarr-image-card component (image-card.css); this
 * file only adds the bento container + size-variant grid spans + the
 * feature-band component.
 */

.roarr-attractions-bento {
	position: relative;
	display: grid;
	gap: clamp(var(--space-8), 2vw, var(--space-24));
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-flow: row dense;
}

/* WordPress applies flow-layout block margins to every saved child after the
 * first. The bento grid already owns both axes through `gap`; reset that
 * second spacing source on the public page and in the editor canvas. */
:is(.roarr-site-main, .editor-styles-wrapper) .roarr-attractions-bento > * {
	margin-block-start: 0;
}

/* ---- Tiles: shared .roarr-image-card; bento sizing only ----
   One size vocabulary, reused at every breakpoint:
     standard   -> 1 cell                 (the workhorse)
     --wide     -> 2 cells across          (wide banner)
     --tall     -> 2 cells tall            (portrait accent)
     --large    -> 2 across x 2 tall       (hero feature)
*/
.roarr-attractions-bento .roarr-image-card {
	min-height: clamp(calc(var(--space-120) + var(--space-16)), 42vw, calc(var(--space-120) + var(--space-56)));
	border-radius: var(--radius-md);
}

.roarr-attractions-bento .roarr-image-card--wide {
	grid-column: 1 / -1;
	min-height: clamp(calc(var(--space-120) + var(--space-56)), 44vw, calc(var(--space-120) + var(--space-80)));
}

.roarr-attractions-bento .roarr-image-card--tall {
	grid-column: 1 / -1;
	min-height: clamp(calc(var(--space-120) + var(--space-80)), 58vw, calc(var(--space-120) * 2 + var(--space-16)));
}

.roarr-attractions-bento .roarr-image-card--large {
	grid-column: 1 / -1;
	min-height: clamp(calc(var(--space-120) * 2), 70vw, calc(var(--space-120) * 2 + var(--space-72)));
}

/* Narrow tiles: trim the overlay's side padding and allow up to 3 lines so
   medium names show in full without shrinking the type. Only affects the
   2-up phone/tablet layout. */
@media (max-width: 1023px) {
	.roarr-attractions-bento .roarr-image-card__body { padding-inline: var(--space-12); }
	.roarr-attractions-bento .roarr-image-card h3 { -webkit-line-clamp: 3; }
}

/* ---- Feature band -- copy panel + image, soft fade at seam ---- */
.roarr-feature-band {
	--band: var(--deep-forest);
	--tag-bg: var(--amber);
	--tag-fg: var(--text-on-dark);
	--copy-width: 100%;
	position: relative;
	isolation: isolate;
	display: grid;
	grid-column: 1 / -1;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--band);
	color: var(--text-on-dark);
	box-shadow: var(--shadow-raised);
}

.roarr-feature-band--falls  { --band: var(--deep-forest); --tag-bg: var(--amber); --tag-fg: var(--text-on-dark); }
.roarr-feature-band--splash { --band: color-mix(in hsl longer hue, var(--primary-hover) 42%, var(--wp--preset--color--purple)); --tag-bg: var(--yellow); --tag-fg: var(--deep-forest); }
.roarr-feature-band--valley { --band: var(--jungle-green); --tag-bg: var(--primary); --tag-fg: var(--deep-forest); }
.roarr-feature-band--dinomite  { --band: var(--jungle-green); --tag-bg: var(--yellow); --tag-fg: var(--deep-forest); }
.roarr-feature-band--explorers { --band: var(--deep-forest); --tag-bg: var(--amber); --tag-fg: var(--text-on-dark); }

/* mobile: image on top, copy panel beneath */
.roarr-feature-band__media {
	position: relative;
	margin: 0;
	overflow: hidden;
	aspect-ratio: var(--image-ratio-media);
}

.roarr-feature-band__media img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: calc(var(--space-120) * 2);
	object-fit: cover;
	object-position: center;
}

/* Food & Drink feature artwork must fill the entire right-hand media panel.
 * Keep the crop centred so the left copy panel retains its fixed share. */
.roarr-feature-band__media--fit img {
	object-fit: cover;
	object-position: center;
}

.roarr-feature-band__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 90%, var(--band) 100%);
	pointer-events: none;
}

.roarr-feature-band__content {
	position: relative;
	z-index: 2;
	display: grid;
	gap: var(--space-16);
	align-content: center;
	padding: var(--space-40) var(--gutter-mobile) var(--space-48);
	background: var(--band);
}

.roarr-feature-band__title {
	margin: 0;
	color: var(--text-on-dark);
	font-family: var(--font-heading);
	font-size: var(--h1);
	font-weight: var(--weight-heavy);
	line-height: var(--lh-solid);
	letter-spacing: 0;
	text-transform: uppercase;
	text-wrap: balance;
}

.roarr-feature-band__desc {
	margin: 0;
	max-width: 30ch;
	color: var(--text-on-dark);
	font-size: var(--text-base);
	font-weight: var(--weight-medium);
	line-height: var(--lh-relaxed);
}

.roarr-feature-band__cta {
	justify-self: stretch;
	border-radius: var(--radius-sm);
	font-weight: var(--weight-heavy);
}

/* ---- >=960px -- copy panel left, image fills the rest ---- */
@media (min-width: 960px) {
	.roarr-feature-band {
		--copy-width: 38%;
		grid-template-columns: minmax(0, 1fr);
		min-height: calc(var(--space-120) * 3 + var(--space-48));
	}

	/* Qualified with the parent class (not a bare .roarr-feature-band__media
	   selector) so this beats core Gutenberg's own `.wp-block-image {
	   position: relative }` (block-library/editor.css) on specificity alone
	   inside the WP editor canvas -- that core rule loads AFTER
	   editor-style.css's inline <style> tag, so a same-specificity bare
	   selector here would lose the cascade tie-break in the editor (verified
	   live: without this qualifier the feature band never switched to the
	   side-by-side layout in the canvas, only on the real frontend where no
	   competing core rule exists). */
	.roarr-feature-band .roarr-feature-band__media {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: var(--copy-width);
		z-index: 0;
	}

	.roarr-feature-band__media img { min-height: 0; }

	.roarr-feature-band__media::after { content: none; }

	.roarr-feature-band::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: var(--copy-width);
		width: var(--space-64);
		z-index: 1;
		background: linear-gradient(
			90deg,
			var(--band) 0%,
			color-mix(in srgb, var(--band) 28%, transparent) 45%,
			transparent 100%
		);
		pointer-events: none;
	}

	.roarr-feature-band__content {
		z-index: 2;
		width: var(--copy-width);
		padding: var(--space-48) var(--space-40);
		background: var(--band);
	}
}

/* ---- 768-1023px -- tablet keeps the 2-column model, just taller ---- */
@media (min-width: 768px) and (max-width: 1023px) {
	.roarr-attractions-bento .roarr-image-card {
		min-height: clamp(calc(var(--space-120) + var(--space-56)), 30vw, calc(var(--space-120) + var(--space-96)));
	}

	.roarr-attractions-bento .roarr-image-card--wide {
		min-height: clamp(calc(var(--space-120) + var(--space-72)), 32vw, calc(var(--space-120) + var(--space-112)));
	}

	.roarr-attractions-bento .roarr-image-card--tall,
	.roarr-attractions-bento .roarr-image-card--large {
		min-height: clamp(calc(var(--space-120) + var(--space-128)), 42vw, calc(var(--space-120) * 2 + var(--space-80)));
	}
}

/* ---- >=1024px -- 12-col, 3-up bento on a fixed row module + bands ---- */
@media (min-width: 1024px) {
	.roarr-attractions-bento {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		grid-auto-rows: clamp(calc(var(--space-120) + var(--space-96)), 21vw, calc(var(--space-120) + var(--space-128)));
	}

	.roarr-attractions-bento .roarr-image-card  { grid-column: span 4; grid-row: span 1; min-height: 0; }
	.roarr-attractions-bento .roarr-image-card--wide  { grid-column: span 8; grid-row: span 1; }
	.roarr-attractions-bento .roarr-image-card--tall  { grid-column: span 4; grid-row: span 2; }
	.roarr-attractions-bento .roarr-image-card--large { grid-column: span 8; grid-row: span 2; }

	.roarr-attractions-bento .roarr-image-card h3 { font-size: var(--text-xl); }
	.roarr-attractions-bento .roarr-image-card--tall h3,
	.roarr-attractions-bento .roarr-image-card--large h3 { font-size: var(--h3); }

	.roarr-feature-band {
		--copy-width: 36%;
		grid-column: 1 / -1;
		grid-row: span 2;
		min-height: 0;
	}

	.roarr-feature-band__content {
		width: var(--copy-width);
		padding: var(--space-48) var(--space-40);
	}
}

@media (min-width: 1280px) {
	.roarr-feature-band {
		--copy-width: 32%;
	}
}

/* -- src/blocks/authoring-shell.css (canonical component source) -- */
/**
 * Curated authoring shells.
 *
 * The outer Gutenberg Group is structural editor UI, not a visual wrapper.
 * On the public site it disappears from layout so full-width ROARR sections
 * keep their established width/background behaviour. In Gutenberg it remains
 * a visible, selectable drop zone for approved page sections and story blocks.
 */
.roarr-site-main :is(.roarr-entry-body, .roarr-article-body) {
	display: contents;
}

.editor-styles-wrapper :is(.roarr-entry-body, .roarr-article-body) {
	display: block;
	min-block-size: var(--space-96);
	margin-block: var(--space-16);
	padding: var(--space-8);
	border: 1px dashed color-mix(in srgb, var(--primary) 34%, transparent);
	border-radius: var(--radius-sm);
}

.editor-styles-wrapper :is(.roarr-entry-body, .roarr-article-body) > * {
	margin-block-start: 0;
}

.roarr-article-body {
	min-width: 0;
}

.roarr-article-body :is(p, li, blockquote) {
	overflow-wrap: anywhere;
}

.roarr-article-body :is(img, figure, .wp-block-image, .wp-block-gallery) {
	max-width: 100%;
}

/* -- src/blocks/button-row.css (canonical component source) -- */
/**
 * roarr/button-row — layout only, ported verbatim (token-only) from
 * design-reference/mocks/css/styles.css. Button styling itself lives in
 * renderers/button/styles.css (.btn / .btn--primary / .btn--secondary).
 */

.roarr-button-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0;
}

.wp-core-block:has(> .roarr-button-row) {
	width: 100%;
}

.roarr-button-row--center {
	justify-content: center;
}

/* Honor Gutenberg's native content-justification classes — the app strips
   WP's generated layout CSS, so these need backing here. */
.roarr-button-row.is-content-justification-center {
	justify-content: center;
}
.roarr-button-row.is-content-justification-right {
	justify-content: flex-end;
}
.roarr-button-row.is-content-justification-space-between {
	justify-content: space-between;
}

:is(.roarr-button-row, .roarr-action-row, .roarr-cta-band__actions) :is(.btn, .wp-block-button__link) {
	min-width: min(100%, calc(var(--space-120) + var(--space-40)));
}

:is(.roarr-button-row, .roarr-action-row, .roarr-cta-band__actions) .wp-block-button {
	margin: 0;
}

@media (min-width: 768px) and (max-width: 1023px) {
	:is(.roarr-button-row, .roarr-action-row, .roarr-cta-band__actions) {
		width: 100%;
		align-items: stretch;
		justify-content: center;
	}

	:is(.roarr-button-row, .roarr-action-row, .roarr-cta-band__actions) .wp-block-button {
		flex: 1 1 0;
		min-width: 0;
	}

	:is(.roarr-button-row, .roarr-action-row, .roarr-cta-band__actions) :is(.btn, .wp-block-button__link) {
		width: auto;
		min-width: 0;
		padding-inline: var(--space-16);
	}

	:is(.roarr-button-row, .roarr-action-row, .roarr-cta-band__actions) .wp-block-button__link {
		width: 100%;
	}

	:is(.roarr-button-row, .roarr-action-row, .roarr-cta-band__actions) :is(.btn:only-child, .wp-block-button:only-child) {
		flex: 1 1 100%;
		width: 100%;
	}

	/* A single browse-more control below an attraction carousel should read as
	   a button, not a full-width banner. Keep this identical in the editor. */
	:is(.roarr-site-main, .editor-styles-wrapper)
		.roarr-section:has(:is(.roarr-card-grid--carousel, .roarr-attractions-grid))
		.roarr-button-row
		> .wp-block-button:only-child {
		flex: 0 1 auto;
		width: auto;
	}

	:is(.roarr-site-main, .editor-styles-wrapper)
		.roarr-section:has(:is(.roarr-card-grid--carousel, .roarr-attractions-grid))
		.roarr-button-row
		> .wp-block-button:only-child
		> .wp-block-button__link {
		width: auto;
		min-width: min(100%, calc(var(--space-120) + var(--space-40)));
	}
}

@media (min-width: 1024px) {
	:is(.roarr-button-row, .roarr-action-row, .roarr-cta-band__actions) {
		justify-content: center;
	}

	:is(.roarr-button-row, .roarr-action-row, .roarr-cta-band__actions) :is(.btn, .wp-block-button) {
		flex: 0 1 auto;
	}
}

@media (max-width: 767px) {
	:is(.roarr-button-row, .roarr-action-row, .roarr-cta-band__actions) {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		justify-content: center;
		width: 100%;
	}

	:is(.roarr-button-row, .roarr-action-row, .roarr-cta-band__actions) :is(.btn, .wp-block-button) {
		flex: 1 1 100%;
		width: 100%;
		min-width: 0;
		max-width: 100%;
	}

	:is(.roarr-button-row, .roarr-action-row, .roarr-cta-band__actions) :is(.btn, .wp-block-button__link) {
		width: 100%;
		min-width: 0;
		max-width: 100%;
		padding-inline: var(--space-16);
		justify-content: center;
	}

	/* Park-map actions stay stacked for a reliable tap layout, but should not
	   become edge-to-edge bars inside their already-safe centred container. */
	:is(.roarr-site-main, .editor-styles-wrapper)
		.roarr-parkmap__actions
		> .wp-block-button {
		flex: 0 1 auto;
		width: auto;
	}

	:is(.roarr-site-main, .editor-styles-wrapper)
		.roarr-parkmap__actions
		> .wp-block-button
		> .wp-block-button__link {
		width: auto;
		min-width: min(100%, calc(var(--space-120) * 2));
	}

	/* Carousel browse-more CTAs use the same compact treatment on phones as
	   tablets, including Gutenberg's editor canvas. */
	:is(.roarr-site-main, .editor-styles-wrapper)
		.roarr-section:has(:is(.roarr-card-grid--carousel, .roarr-attractions-grid))
		.roarr-button-row
		> .wp-block-button:only-child {
		flex: 0 1 auto;
		width: auto;
	}

	:is(.roarr-site-main, .editor-styles-wrapper)
		.roarr-section:has(:is(.roarr-card-grid--carousel, .roarr-attractions-grid))
		.roarr-button-row
		> .wp-block-button:only-child
		> .wp-block-button__link {
		width: auto;
		min-width: min(100%, calc(var(--space-120) + var(--space-40)));
	}

	/* Homepage content CTAs are compact controls, not full-width bars. Keep
	   the global stacked treatment for forms and conversion bands, but let the
	   attractions and plan rows breathe around intrinsic-width buttons. */
	:is(body.home .roarr-site-main, .editor-styles-wrapper)
		.roarr-section:has(:is(.roarr-card-grid--home-attractions, .roarr-attractions-grid, .roarr-glance-list))
		.roarr-button-row
		:is(.btn, .wp-block-button) {
		flex: 0 1 auto;
		width: auto;
	}

	:is(body.home .roarr-site-main, .editor-styles-wrapper)
		.roarr-section:has(:is(.roarr-card-grid--home-attractions, .roarr-attractions-grid, .roarr-glance-list))
		.roarr-button-row
		:is(.btn, .wp-block-button__link) {
		width: auto;
		max-width: 100%;
	}

	/* The mock keeps the two Plan actions in one compact phone row. Split the
	   available content width evenly and trim only this pair's inline padding;
	   other homepage CTAs retain the intrinsic-width treatment above. */
	:is(body.home .roarr-site-main, .editor-styles-wrapper)
		.roarr-section:has(.roarr-glance-list)
		.roarr-button-row {
		flex-wrap: nowrap;
	}

	:is(body.home .roarr-site-main, .editor-styles-wrapper)
		.roarr-section:has(.roarr-glance-list)
		.wp-block-buttons.roarr-button-row
		> .wp-block-button.wp-block-button,
	:is(body.home .roarr-site-main, .editor-styles-wrapper)
		.roarr-section:has(.roarr-glance-list)
		.roarr-button-row
		> .btn.btn {
		flex: 1 1 0;
		width: 0;
		min-width: 0;
	}

	:is(body.home .roarr-site-main, .editor-styles-wrapper)
		.roarr-section:has(.roarr-glance-list)
		.roarr-button-row
		> :is(.btn, .wp-block-button) :is(.btn, .wp-block-button__link),
	:is(body.home .roarr-site-main, .editor-styles-wrapper)
		.roarr-section:has(.roarr-glance-list)
		.roarr-button-row
		> .btn {
		width: 100%;
		padding-inline: var(--space-8);
		white-space: nowrap;
	}
}

/* -- src/blocks/button.css (canonical component source) -- */
/**
 * roarr/button — .btn base + primary/secondary/size styles, ported verbatim
 * (token-only) from design-reference/mocks/css/styles.css. `.btn` is a
 * genuine global primitive used across many blocks (roarr-cta-band,
 * roarr-split content, etc.) but this block "owns" the CTA concept, so its
 * base styles live here rather than duplicated per consumer.
 */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-8);
	min-height: var(--button-min-height);
	min-width: 0;
	max-width: 100%;
	padding-inline: var(--button-padding-inline);
	border-radius: var(--radius-md);
	border: 0;
	font-family: var(--font-body);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: var(--weight-bold);
	letter-spacing: 0;
	line-height: var(--lh-solid);
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	overflow-wrap: anywhere;
	white-space: normal;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.btn svg {
	width: var(--icon-sm);
	height: var(--icon-sm);
	flex: 0 0 var(--icon-sm);
}

/* Large size step for in-content conversion CTAs (event booking, enquiries). */
.btn--lg {
	min-height: var(--button-min-height-lg);
	padding-inline: var(--button-padding-inline-lg);
}

.btn--primary {
	background: var(--primary);
	color: var(--deep-forest);
}

.btn--primary:hover,
.btn--primary:focus-visible {
	background: var(--primary-hover);
	transform: translateY(-2px);
	text-decoration: none;
}

.btn--secondary {
	border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
	background: transparent;
	color: currentColor;
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
	border-color: var(--primary);
	background: var(--primary);
	color: var(--deep-forest);
	transform: translateY(-2px);
	text-decoration: none;
}

/* -- src/blocks/card-grid.css (canonical component source) -- */
/**
 * roarr/card-grid, ported verbatim from design-reference mocks styles.css.
 * NOTE: the raw mock token custom properties used below are not aliased in
 * this headless WP theme (theme.json only exposes the wp preset namespaced
 * names) — same known gap as the split and glance-list style sheets already
 * shipped in Wave 1/2. The renderer twin under renderers slash card-grid
 * slash styles.css is what actually ships to the real Next.js front end
 * with working tokens; this file is editor-preview-only approximation.
 */

.roarr-card-grid {
	display: grid;
	gap: var(--space-24);
}

.roarr-card-grid--events {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.roarr-card-grid--events .roarr-event-card--feature {
	grid-column: span 2;
}

.roarr-card-grid--related {
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.roarr-card-grid--thirds {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--space-120) * 2 + var(--space-32))), 1fr));
}

.roarr-card-grid--quartet {
	grid-template-columns: 1fr;
	gap: var(--space-8);
}

.roarr-card-grid--quick {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--space-120) * 2)), 1fr));
}

/* Ticket-cards / quick-links rows sit right below the hero info-bar — give
   them the same top clearance as the mock's .roarr-ticket-card-grid so they
   don't crowd the info-bar above. */
.roarr-card-grid--quartet,
.roarr-card-grid--quick {
	margin-top: var(--space-40);
}

.roarr-card-grid.roarr-card-grid--list {
	gap: 0;
}

/* List variation from the design mock: compact, rule-divided rows replace the
   standard card chrome when detail cards sit beside supporting media. */
.roarr-card-grid--list .roarr-detail-card {
	--icon-art-size-feature: var(--icon-art-size-lg);
	gap: var(--space-8);
	padding: var(--space-16) 0;
	border-width: 1px 0 0;
	border-color: var(--border-light);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.roarr-card-grid--list .roarr-detail-card:has(.roarr-detail-card__icon) {
	grid-template-columns: var(--icon-badge-size-lg) minmax(0, 1fr);
	align-items: start;
	column-gap: var(--space-16);
}

.roarr-card-grid--list .roarr-detail-card:has(.roarr-detail-card__icon) .roarr-detail-card__icon {
	grid-row: 1 / span 2;
}

.roarr-card-grid--list .roarr-detail-card:has(.roarr-detail-card__icon) h3,
.roarr-card-grid--list .roarr-detail-card:has(.roarr-detail-card__icon) p {
	grid-column: 2;
}

.roarr-card-grid--list .roarr-detail-card:has(.roarr-detail-card__icon) h3 {
	grid-row: 1;
}

.roarr-card-grid--list .roarr-detail-card:has(.roarr-detail-card__icon) p {
	grid-row: 2;
}

.roarr-card-grid--list .roarr-detail-card h3 {
	font-size: var(--text-lg);
}

.roarr-card-grid--list .roarr-detail-card p {
	font-size: var(--text-sm);
	line-height: var(--lh-normal);
}

.roarr-card-grid--list-lg .roarr-detail-card {
	gap: var(--space-8);
	padding-block: var(--space-16);
}

:is(.roarr-card-grid--center, .roarr-card-grid-center) .roarr-detail-card {
	justify-items: center;
	text-align: center;
}

.roarr-card-grid + .roarr-button-row {
	margin-top: var(--space-24);
}

/* View-All CTA under the attractions bento wants more breathing room above
   (and its own space below the button before the section break). */
.roarr-card-grid--home-attractions + .roarr-button-row,
.roarr-card-grid--carousel + .roarr-button-row {
	margin-top: var(--space-40);
	padding-bottom: var(--space-16);
}

/* Attractions carousel — the unenhanced and reduced-motion version remains a
   native scroll-snap row. The block view script adds an inert duplicate set
   and switches to the continuous track on every viewport. */
.roarr-card-grid.roarr-card-grid--carousel {
	--attractions-carousel-card-width: min(78vw, 360px);
	display: flex;
	gap: var(--space-16);
	overflow-x: auto;
	padding-block: var(--space-8) var(--space-12);
	scroll-padding-inline: var(--gutter-mobile);
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.roarr-site-main .roarr-card-grid.roarr-card-grid--carousel {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding-inline: var(--gutter-mobile);
}

.roarr-card-grid--carousel::-webkit-scrollbar {
	display: none;
}

.roarr-card-grid--carousel > .roarr-image-card,
.roarr-attractions-carousel__track > .roarr-image-card {
	flex: 0 0 var(--attractions-carousel-card-width);
	width: var(--attractions-carousel-card-width);
	min-height: clamp(288px, 72vw, 352px);
	scroll-snap-align: start;
}

.roarr-card-grid.roarr-card-grid--carousel.is-marquee {
	display: block;
	gap: 0;
	overflow: hidden;
	padding-inline: 0;
	scroll-snap-type: none;
}

.roarr-attractions-carousel__track {
	display: flex;
	align-items: stretch;
	width: max-content;
	animation: roarr-attractions-marquee 48s linear infinite;
	animation-play-state: paused;
	backface-visibility: hidden;
	will-change: transform;
}

.roarr-attractions-carousel__track > .roarr-image-card {
	margin-right: var(--space-16);
}

.roarr-card-grid--carousel.is-carousel-visible .roarr-attractions-carousel__track {
	animation-play-state: running;
}

.roarr-card-grid--carousel:is(:hover, :focus-within) .roarr-attractions-carousel__track {
	animation-play-state: paused;
}

@keyframes roarr-attractions-marquee {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}

@media (min-width: 640px) {
	.roarr-card-grid.roarr-card-grid--carousel {
		--attractions-carousel-card-width: min(42vw, 372px);
	}

	.roarr-site-main .roarr-card-grid.roarr-card-grid--carousel {
		padding-inline: var(--gutter-tablet);
	}

	.roarr-card-grid--carousel > .roarr-image-card,
	.roarr-attractions-carousel__track > .roarr-image-card {
		min-height: 332px;
	}
}

@media (min-width: 1024px) {
	.roarr-card-grid.roarr-card-grid--carousel {
		--attractions-carousel-card-width: clamp(300px, 27vw, 400px);
	}

	.roarr-site-main .roarr-card-grid.roarr-card-grid--carousel {
		padding-inline: var(--gutter-desktop);
	}

	.roarr-card-grid--carousel > .roarr-image-card,
	.roarr-attractions-carousel__track > .roarr-image-card {
		min-height: 336px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.roarr-attractions-carousel__track {
		animation: none;
	}
}

/* home-attractions — homepage attractions band bento grid: a wide Fossil
   Falls feature tile plus 7 equal cards. Source:
   design-reference/mocks/css/styles.css lines 6880-6953. */
.roarr-card-grid.roarr-card-grid--home-attractions {
	grid-template-columns: 1fr;
	grid-auto-flow: dense;
	gap: var(--space-8);
	align-items: stretch;
}

.roarr-card-grid--home-attractions .roarr-image-card {
	min-height: calc(var(--space-120) + var(--space-80) + var(--space-8));
	border-radius: var(--radius-md);
}

.roarr-card-grid--home-attractions .roarr-image-card--feature {
	min-height: calc(var(--space-120) + var(--space-120) + var(--space-56));
}

@media (min-width: 768px) {
	.roarr-card-grid--events {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.roarr-card-grid--events .roarr-event-card--feature {
		grid-column: span 2;
	}

	.roarr-card-grid--quartet {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--space-16);
	}

	.roarr-card-grid--quick {
		gap: var(--space-16);
	}
}

@media (min-width: 1024px) {
	:is(.roarr-card-grid--cols-3, .roarr-card-grid-cols-3) > :is(.roarr-detail-card--tablet-extra, .roarr-detail-card-tablet-extra) {
		display: none;
	}

	.roarr-card-grid--events {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.roarr-card-grid--cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	:is(.roarr-card-grid--cols-3, .roarr-card-grid-cols-3) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.roarr-card-grid.roarr-card-grid--home-attractions {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-template-rows: calc(var(--space-120) + var(--space-128) + var(--space-32)) calc(var(--space-120) + var(--space-72) + var(--space-32));
		gap: var(--space-8);
	}
}

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

	.roarr-card-grid--home-attractions .roarr-image-card--feature {
		grid-column: span 2;
	}
}

@media (min-width: 1024px) {
	.roarr-card-grid.roarr-card-grid--home-attractions {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-template-rows: calc(var(--space-120) + var(--space-128) + var(--space-32)) calc(var(--space-120) + var(--space-72) + var(--space-32));
		gap: var(--space-8);
	}

	.roarr-card-grid--home-attractions .roarr-image-card {
		min-height: 0;
		height: 100%;
	}

	/* Feature is a wide hero across the top-left two columns (one row tall);
	   two cards sit beside it, four equal cards fill the shorter row below. */
	.roarr-card-grid--home-attractions .roarr-image-card--feature {
		grid-column: span 2;
		grid-row: span 1;
	}
}

/* Phone-range bento: hero tile + one tall accent breaks the uniform-grid feel
   so 7 cards read as an arranged composition, not an endless single-column scroll. */
@media (max-width: 639px) {
	.roarr-card-grid.roarr-card-grid--home-attractions {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: calc(var(--space-128) + var(--space-16));
		grid-auto-flow: row dense;
		gap: var(--space-8);
	}

	.roarr-card-grid--home-attractions .roarr-image-card {
		min-height: 0;
	}

	.roarr-card-grid--home-attractions .roarr-image-card--feature {
		min-height: 0;
		grid-column: span 2;
		grid-row: span 2;
	}
	/* No tall accent card: Fossil Falls (2x2) + 6 equal cards = 10 cells fill
	   five clean 2-up rows, so the grid finishes flush with no orphaned tile. */
}

/* -- src/blocks/character.css (canonical component source) -- */
/**
 * Character cards (Dippy & Friends "meet the gang" grid) — a
 * roarr-detail-card variant: portrait figure, name heading, trait pills,
 * bio paragraph. Mascot accent colour is set per-card via a modifier class.
 * Ported (generic rules only — the mock's page-scoped glow/gradient title
 * treatment under `.dippy-friends-page #meet-the-gang` is a cosmetic
 * flourish, not structural, and is left for a future pass) from
 * design-reference/mocks/css/styles.css ~lines 16880-16980.
 * Batch D (dippy-and-friends.html).
 */
.roarr-character {
	--mascot-accent: var(--primary);
}
.roarr-character--dippy {
	--mascot-accent: var(--mascot-dippy);
}
.roarr-character--terry {
	--mascot-accent: var(--mascot-terry);
}
.roarr-character--paris {
	--mascot-accent: var(--mascot-paris);
}
.roarr-character--raz {
	--mascot-accent: var(--mascot-raz);
}

.roarr-character__traits {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.roarr-character__traits li {
	padding: var(--space-8) var(--space-16);
	border-radius: var(--radius-md);
	border: 1px dashed color-mix(in srgb, var(--mascot-accent) 60%, var(--border-light));
	color: var(--text-secondary);
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.roarr-character__portrait {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	margin: 0;
	min-height: clamp(280px, 42vw, 460px);
	overflow: visible;
}

.roarr-character__portrait img {
	position: relative;
	z-index: 1;
	width: min(100%, clamp(260px, 58vw, 460px));
	max-width: none;
	height: auto;
	object-fit: contain;
	filter: drop-shadow(0 18px 26px color-mix(in srgb, var(--deep-forest) 24%, transparent));
}

/* Dippy & Friends story artwork is a wide group portrait rather than an
   individual character card. WordPress adds a figure wrapper inside the
   portrait group, so centre both layers and remove the card's reserved height. */
:is(.roarr-site-main, .editor-styles-wrapper) #story .dippy-friends-story-art {
	align-items: center;
	min-height: 0;
}

:is(.roarr-site-main, .editor-styles-wrapper) #story .dippy-friends-story-art > .wp-block-image {
	display: flex;
	justify-content: center;
	width: 100%;
	margin: 0;
}

:is(.roarr-site-main, .editor-styles-wrapper) #story .dippy-friends-story-art img {
	width: min(100%, calc(var(--space-120) * 4));
	margin-inline: auto;
}

@media (max-width: 767px) {
	:is(.roarr-site-main, .editor-styles-wrapper) #story .dippy-friends-story-art img {
		width: min(calc(100vw - var(--space-16)), calc(var(--space-120) * 4));
	}
}

/* -- src/blocks/consent.css (canonical component source) -- */
/* ============================================================
   Cookie Consent — banner, preferences panel, footer reopen trigger.
   Verbatim port of the .btn base (styles.css lines ~2225-2274),
   .btn--secondary (lines ~9018-9032), and the full cookie-panel /
   cookie-pref / footer-cookie-prefs block (lines ~9765-10052) from
   design-reference/mocks/css/styles.css — the exact CSS
   ConsentBanner.tsx / CookiePrefsTrigger.tsx render against.
   Token usage only — no hex literals, no font-family literals.
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: var(--button-min-height);
  min-width: 0;
  max-width: 100%;
  padding-inline: var(--button-padding-inline);
  border-radius: var(--radius-md);
  border: 0;
  font-family: var(--font-body);
  font-size: var(--wp--preset--font-size--body-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
  line-height: var(--lh-solid);
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  overflow-wrap: anywhere;
  white-space: normal;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.btn svg,
.btn img {
  width: var(--icon-sm);
  height: var(--icon-sm);
  flex: 0 0 var(--icon-sm);
}

.btn--primary {
  background: var(--primary);
  color: var(--deep-forest);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--primary-hover);
  transform: translateY(-2px);
  text-decoration: none;
}

.btn--secondary {
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  background: transparent;
  color: currentColor;
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--deep-forest);
  transform: translateY(-2px);
  text-decoration: none;
}

/* Cookie consent banner — bottom-fixed bar, injected globally so it appears
   on every page (mirrors the WP wp_footer render). Reject is as easy as
   Accept — all first-layer buttons share the .btn--secondary weight (no
   dark pattern). "Customise" expands the per-category prefs inline rather
   than opening a modal. Choices persist in localStorage; the footer
   "Cookie Preferences" link reopens it. */
.cookie-panel {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  max-height: 100vh;
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-16) var(--space-24);
  padding-bottom: max(var(--space-16), env(safe-area-inset-bottom));
  background: var(--white);
  color: var(--text-primary);
  border-top: 1px solid var(--border-light);
  box-shadow: 0 -8px 24px color-mix(in srgb, var(--deep-forest) 10%, transparent);
  font-family: var(--font-body);
  transform: translateY(100%);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.3s var(--ease);
}

.cookie-panel__dismiss {
  position: absolute;
  top: var(--space-8);
  right: var(--space-16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--button-min-height);
  height: var(--button-min-height);
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-xl);
  line-height: 1;
  cursor: pointer;
}

.cookie-panel__dismiss:hover,
.cookie-panel__dismiss:focus-visible {
  background: color-mix(in srgb, var(--text-primary) 7%, transparent);
  color: var(--text-primary);
}

.cookie-panel.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.cookie-panel[hidden] {
  display: none;
}

@media (min-width: 880px) {
  .cookie-panel {
    padding: var(--space-24) var(--space-32);
  }
}

.cookie-panel__bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding-right: calc(var(--button-min-height) + var(--space-8));
}

@media (min-width: 1200px) {
  .cookie-panel__bar {
    flex-direction: row;
    align-items: center;
    gap: var(--space-24);
    padding-right: calc(var(--button-min-height) + var(--space-16));
  }
}

.cookie-panel__head {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  flex-shrink: 0;
}

.cookie-panel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cookie-panel__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-heavy);
  line-height: var(--lh-snug);
}

.cookie-panel__desc {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}

@media (min-width: 1200px) {
  .cookie-panel__desc {
    flex: 1 1 320px;
  }
}

.cookie-panel__desc a {
  color: var(--text-primary);
  font-weight: var(--weight-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookie-panel__desc a:hover,
.cookie-panel__desc a:focus-visible {
  color: var(--secondary);
}

.cookie-panel__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  flex-shrink: 0;
}

.cookie-panel__actions [data-cookie-action="settings"] {
  grid-column: auto;
}

@media (max-width: 599px) {
  .cookie-panel {
    padding: var(--space-12) var(--space-16);
    padding-bottom: max(var(--space-16), env(safe-area-inset-bottom));
  }

  .cookie-panel__dismiss {
    top: var(--space-4);
    right: var(--space-8);
  }

  .cookie-panel__bar {
    gap: var(--space-12);
    padding-right: 0;
  }

  .cookie-panel__head {
    gap: var(--space-8);
    padding-right: calc(var(--button-min-height) + var(--space-4));
  }

  .cookie-panel__desc {
    line-height: var(--lh-normal);
  }

  .cookie-panel__actions .btn {
    width: 100%;
    min-height: var(--button-min-height);
    padding-inline: var(--space-16);
    overflow-wrap: normal;
  }
}

@media (min-width: 600px) {
  .cookie-panel__actions {
    grid-template-columns: repeat(3, 1fr);
  }

  .cookie-panel__actions [data-cookie-action="settings"] {
    grid-column: auto;
  }
}

@media (min-width: 880px) {
  .cookie-panel__actions {
    grid-template-columns: repeat(3, auto);
  }
}

/* Portrait tablets and compact browser windows need more copy width than the
   single-row desktop bar allows. Keep the actions together, while placing the
   heading directly above the description in the wider first column. */
@media (min-width: 960px) and (max-width: 1199px) {
  .cookie-panel__bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-rows: auto auto;
    column-gap: var(--space-24);
    row-gap: var(--space-8);
    align-items: center;
  }

  .cookie-panel__head {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
  }

  .cookie-panel__desc {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    min-width: 0;
  }

  .cookie-panel__actions {
    grid-column: 2;
    grid-row: 1 / 3;
  }
}

@media (min-width: 1200px) {
  .cookie-panel__actions {
    margin-left: auto;
  }
}

.cookie-panel__chevron {
  transition: transform 0.2s var(--ease);
}

.cookie-panel.is-expanded .cookie-panel__chevron {
  transform: rotate(180deg);
}

.cookie-panel__prefs {
  height: 0;
  overflow: hidden;
  transition: height 0.28s var(--ease);
}

.cookie-panel__prefs[aria-hidden="true"] {
  display: none;
}

.cookie-panel__prefs-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  padding-top: var(--space-16);
}

@media (min-width: 720px) {
  .cookie-panel__prefs-inner {
    grid-template-columns: repeat(3, 1fr);
  }
}

.cookie-panel__prefs-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-8);
  grid-column: 1 / -1;
}

.cookie-pref {
  display: flex;
  gap: var(--space-16);
  padding: var(--space-16);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.cookie-pref:hover:not(.cookie-pref--locked) {
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
  background: color-mix(in srgb, var(--primary) 5%, transparent);
}

.cookie-pref--locked {
  cursor: default;
  background: color-mix(in srgb, var(--text-primary) 3%, transparent);
}

.cookie-pref__check {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.cookie-pref__box {
  position: relative;
  flex-shrink: 0;
  width: var(--space-24);
  height: var(--space-24);
  border: 2px solid color-mix(in srgb, var(--text-primary) 28%, transparent);
  border-radius: var(--radius-xs);
  background: var(--white);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.cookie-pref__box::after {
  content: '';
  position: absolute;
  top: 45%;
  left: 50%;
  width: var(--space-6);
  height: var(--space-12);
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -60%) rotate(45deg);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.cookie-pref__check:checked ~ .cookie-pref__box {
  background: var(--primary);
  border-color: var(--primary);
}

.cookie-pref__check:checked ~ .cookie-pref__box::after {
  opacity: 1;
}

.cookie-pref__check:disabled ~ .cookie-pref__box {
  background: color-mix(in srgb, var(--text-primary) 40%, transparent);
  border-color: color-mix(in srgb, var(--text-primary) 40%, transparent);
}

.cookie-pref__check:focus-visible ~ .cookie-pref__box {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.cookie-pref__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 0;
}

.cookie-pref__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-heavy);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}

.cookie-pref__required {
  font-weight: var(--weight-bold);
  color: var(--text-muted);
}

.cookie-pref__desc {
  font-size: var(--text-xs);
  line-height: var(--lh-normal);
  color: var(--text-secondary);
}

/* Footer "Cookie Preferences" trigger — sits inline with the legal links */
.site-footer__legal nav .footer-cookie-prefs {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: clamp(var(--text-xs), 2.8vw, var(--text-sm));
  font-weight: var(--weight-bold);
  color: var(--text-muted);
  cursor: pointer;
}

.site-footer__legal nav a + .footer-cookie-prefs::before {
  margin-right: var(--space-16);
  color: var(--border-light);
  content: '|';
}

.site-footer__legal nav .footer-cookie-prefs:hover,
.site-footer__legal nav .footer-cookie-prefs:focus-visible {
  color: var(--primary-dark);
}

@media (prefers-reduced-motion: reduce) {
  .cookie-panel,
  .cookie-panel__dismiss,
  .cookie-panel__chevron,
  .cookie-panel__prefs,
  .cookie-pref,
  .cookie-pref__box,
  .cookie-pref__box::after {
    transition: none;
  }
}

/* -- src/blocks/copy.css (canonical component source) -- */
/**
 * roarr/copy — identical to plugins/roarr-blocks/src/copy/style.css, ported
 * from design-reference/mocks/css/styles.css. Assumes tokens.css custom
 * properties (--text-secondary, --text-base, --lh-loose, --primary,
 * --primary-hover) are already loaded globally by the Next app.
 */

.roarr-copy {
	max-width: min(100%, 58ch);
	color: var(--text-secondary);
	font-size: var(--text-base);
	line-height: var(--lh-loose);
	overflow-wrap: anywhere;
	text-wrap: pretty;
}

.roarr-copy a:not(.btn) {
	color: var(--primary-hover);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.roarr-copy a:not(.btn):hover,
.roarr-copy a:not(.btn):focus-visible {
	color: var(--primary);
}

/* Lead copy must read light on dark bands (base .roarr-copy above sets the
   dark-on-light body colour directly on the element, which beats simple
   inheritance from the section's `color` — needs its own override). Ported
   from mock design-reference/mocks/css/styles.css (~L10993-10997); missing
   here left park-map/what's-open/annual-pass dark-band paragraphs rendering
   --text-secondary (dark grey) on dark green, near-invisible. */
.roarr-section--dark .roarr-copy,
.roarr-section--dark-forest-break .roarr-copy {
	color: var(--text-on-dark);
}

/* -- src/blocks/core-button-styles.css (canonical component source) -- */
/**
 * core/button block styles — bridges Gutenberg's native button markup to the
 * ROARR! `.btn` look now that `roarr/button` is deleted (plan 08 Stage 1).
 * Buttons are core/button + a registered block style
 * (is-style-roarr-primary / is-style-roarr-secondary — see roarr-wp
 * plugins/roarr-blocks registration) instead of a bespoke attribute; WP
 * applies the style class to the outer .wp-block-button wrapper and always
 * emits .wp-block-button__link on the anchor. These render via
 * CoreBlockFallback's renderedHtml (no React adapter), so the class-based
 * treatment below is applied by CSS alone, mirroring .btn / .btn--primary /
 * .btn--secondary in button.css (design-reference/mocks/css/styles.css) so
 * the visual result is identical.
 */

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-side-cta__body > .wp-block-buttons .wp-block-button__link,
.is-style-roarr-primary .wp-block-button__link,
.is-style-roarr-secondary .wp-block-button__link,
.is-style-roarr-primary-large .wp-block-button__link,
.is-style-roarr-secondary-large .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-8);
	min-height: var(--button-min-height);
	min-width: 0;
	max-width: 100%;
	padding-inline: var(--button-padding-inline);
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: var(--weight-bold);
	letter-spacing: 0;
	line-height: var(--lh-solid);
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	overflow-wrap: anywhere;
	white-space: normal;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-side-cta__body > .wp-block-buttons .wp-block-button__link svg,
.is-style-roarr-primary .wp-block-button__link svg,
.is-style-roarr-secondary .wp-block-button__link svg,
.is-style-roarr-primary-large .wp-block-button__link svg,
.is-style-roarr-secondary-large .wp-block-button__link svg {
	width: var(--icon-sm);
	height: var(--icon-sm);
	flex: 0 0 var(--icon-sm);
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-side-cta__body > .wp-block-buttons .wp-block-button__link,
.is-style-roarr-primary .wp-block-button__link,
.is-style-roarr-primary-large .wp-block-button__link {
	background: var(--primary);
	color: var(--deep-forest);
	border: 0;
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-side-cta__body > .wp-block-buttons .wp-block-button__link:hover,
:is(.roarr-site-main, .editor-styles-wrapper) .roarr-side-cta__body > .wp-block-buttons .wp-block-button__link:focus-visible,
.is-style-roarr-primary .wp-block-button__link:hover,
.is-style-roarr-primary .wp-block-button__link:focus-visible,
.is-style-roarr-primary-large .wp-block-button__link:hover,
.is-style-roarr-primary-large .wp-block-button__link:focus-visible {
	background: var(--primary-hover);
	transform: translateY(-2px);
	text-decoration: none;
}

.is-style-roarr-secondary .wp-block-button__link,
.is-style-roarr-secondary-large .wp-block-button__link {
	border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
	background: transparent;
	color: currentColor;
}

.is-style-roarr-secondary .wp-block-button__link:hover,
.is-style-roarr-secondary .wp-block-button__link:focus-visible,
.is-style-roarr-secondary-large .wp-block-button__link:hover,
.is-style-roarr-secondary-large .wp-block-button__link:focus-visible {
	border-color: var(--primary);
	background: var(--primary);
	color: var(--deep-forest);
	transform: translateY(-2px);
	text-decoration: none;
}

.is-style-roarr-primary-large .wp-block-button__link,
.is-style-roarr-secondary-large .wp-block-button__link {
	min-height: var(--button-min-height-lg);
	padding-inline: var(--button-padding-inline-lg);
}

/* -- src/blocks/cta-band.css (canonical component source) -- */
/**
 * Front-end styles for roarr/cta-band. Ported from design-reference/mocks
 * css/styles.css (.roarr-cta-band rules ~4397-4433 base band, ~4928-5162
 * panel/copy/actions/contact). The booking CTA and email signup are one shared
 * component so every template gets the same complete final section.
 */

.roarr-cta-band {
	--final-cta-bg: url("assets/img/decor/final-cta-sunset-desktop.webp");
	--final-cta-seam: #031a22;
	/* Desktop and ultrawide artwork render at their authored heights. The
	   viewport reveals more of a wider asset instead of enlarging one scene. */
	--final-cta-scene-height: 724px;
	position: relative;
	z-index: 1;
	isolation: isolate;
	display: grid;
	grid-template-rows: var(--final-cta-scene-height) auto;
	align-content: start;
	width: 100%;
	min-height: 0;
	aspect-ratio: auto;
	overflow-x: hidden;
	overflow-x: clip;
	background: var(--deep-forest);
	color: var(--deep-forest);
	margin-top: calc(-1 * var(--space-64));
	margin-bottom: 0;
}

/* The band normally overlaps the preceding section by one spacing step. An
   FAQ can end directly at that boundary, so keep the overlap from covering
   its final summary row while leaving every other CTA transition unchanged. */
.faq-accordion + .roarr-cta-band {
	margin-top: 0;
}

.roarr-cta-band::before {
	position: absolute;
	inset: calc(var(--final-cta-scene-height) - clamp(96px, 13vw, 176px)) 0 auto;
	z-index: 1;
	height: clamp(96px, 13vw, 176px);
	background: linear-gradient(
		to bottom,
		transparent 0%,
		color-mix(in srgb, var(--final-cta-seam) 36%, transparent) 46%,
		var(--final-cta-seam) 100%
	);
	content: "";
	pointer-events: none;
}

.roarr-cta-band::after {
	position: absolute;
	inset-block: auto;
	top: 0;
	left: 50%;
	z-index: 0;
	width: min(100%, 2172px);
	height: var(--final-cta-scene-height);
	transform: translateX(-50%);
	background: var(--final-cta-bg) center bottom / auto 100% no-repeat;
	content: "";
	pointer-events: none;
}

@media (min-width: 2173px) {
	.roarr-cta-band {
		--final-cta-bg: url("assets/img/decor/final-cta-sunset-ultrawide-v2.webp");
		--final-cta-scene-height: 760px;
		align-content: start;
	}

	.roarr-cta-band::after {
		width: min(100%, 3840px);
		-webkit-mask-image: none;
		mask-image: none;
	}

	.roarr-cta-band__panel {
		padding-top: clamp(var(--space-120), 6vw, calc(var(--space-128) + var(--space-32)));
	}
}

@media (min-width: 3841px) {
	.roarr-cta-band::after {
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
		mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
	}
}

@media (max-width: 1023px) {
	.roarr-cta-band {
		--final-cta-bg: url("assets/img/decor/final-cta-sunset-tablet.webp");
		--final-cta-scene-height: 100vw;
		min-height: 0;
		aspect-ratio: auto;
	}

	.roarr-cta-band::before {
		inset-block-start: calc(var(--final-cta-scene-height) - clamp(112px, 20vw, 168px));
		height: clamp(112px, 20vw, 168px);
	}
}

@media (max-width: 539px) {
	.roarr-cta-band {
		--final-cta-bg: url("assets/img/decor/final-cta-sunset-mobile.webp");
		--final-cta-scene-height: calc(100vw * 1672 / 941);
	}
}

/* The signup remains part of this one shared block, but it keeps the original
   newsletter visual contract: overlap only the scene's dark foreground, then
   extend as its own dark section below the fixed-height booking scene. */
.roarr-cta-band .site-footer__newsletter {
	--newsletter-overlap: clamp(72px, 20vw, 104px);
	z-index: 2;
	overflow: hidden;
	min-height: var(--newsletter-overlap);
	margin-bottom: calc(-1 * var(--newsletter-overlap));
	padding-bottom: 0;
	transform: translateY(calc(-1 * var(--newsletter-overlap)));
	background-color: transparent;
	background-image: linear-gradient(
		to bottom,
		color-mix(in srgb, var(--newsletter-seam) 8%, transparent) 0%,
		color-mix(in srgb, var(--newsletter-seam) 78%, transparent) calc(var(--newsletter-overlap) - var(--space-32)),
		var(--newsletter-seam) var(--newsletter-overlap),
		var(--newsletter-seam) calc(var(--newsletter-overlap) + var(--newsletter-extension)),
		var(--deep-forest) 100%
	);
}

.roarr-cta-band .site-footer__newsletter-field {
	grid-template-columns: var(--space-32) minmax(0, 1fr) minmax(var(--space-96), auto);
	background: color-mix(in srgb, var(--deep-forest) 64%, transparent);
}

.roarr-cta-band .site-footer__newsletter-field button {
	grid-column: auto;
	white-space: nowrap;
}

.roarr-cta-band .site-footer__newsletter-friends {
	align-self: end;
}

.roarr-cta-band .site-footer__newsletter-copy p,
.roarr-cta-band .site-footer__newsletter-form p {
	color: var(--text-on-dark);
}

.roarr-cta-band__panel {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--space-24);
	align-content: center;
	justify-items: center;
	min-width: 0;
	min-height: var(--final-cta-scene-height);
	padding: var(--space-48) var(--space-24);
	background: transparent;
	color: var(--deep-forest);
	text-align: center;
}

.roarr-cta-band__copy {
	display: grid;
	gap: 0;
	justify-items: center;
	width: 100%;
	max-width: 100%;
}

.roarr-cta-band__kicker {
	color: var(--deep-forest);
	font-family: var(--font-heading);
	font-size: var(--h3);
	font-weight: var(--weight-heavy);
	line-height: var(--lh-solid);
	text-transform: uppercase;
}

.roarr-cta-band .roarr-cta-band__title {
	max-width: min(100%, 12em);
	color: var(--text-on-dark);
	font-size: var(--h1);
	line-height: 0.95;
	overflow-wrap: anywhere;
	text-shadow: -0.07em 0.07em 0 var(--black);
	text-wrap: balance;
}

.roarr-cta-band .roarr-cta-band__title em {
	color: var(--primary);
	font-style: normal;
}

.roarr-cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-16);
	justify-content: center;
	width: fit-content;
	max-width: 100%;
	min-width: 0;
	margin-top: 0;
}

.roarr-cta-band__actions .btn {
	width: clamp(210px, 56vw, 248px);
}

.roarr-cta-band__contact {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-16) var(--space-24);
	justify-content: center;
	width: 100%;
	max-width: 100%;
	margin-top: var(--space-8);
	color: var(--deep-forest);
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	line-height: var(--lh-normal);
}

.roarr-cta-band__contact > li {
	flex: 0 0 auto;
}

.roarr-cta-band__contact a,
.roarr-cta-band__contact span {
	white-space: nowrap;
	overflow-wrap: normal;
}

.roarr-cta-band__contact li,
.roarr-cta-band__contact a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	min-width: 0;
}

.roarr-cta-band__contact a {
	display: inline-grid;
	grid-template-columns: var(--icon-art-size-sm) minmax(0, auto);
	align-items: center;
	column-gap: var(--space-8);
	color: inherit;
	min-height: var(--space-48);
	padding: var(--space-8) var(--space-16);
	text-decoration: none;
}

.roarr-cta-band__contact a:hover,
.roarr-cta-band__contact a:focus-visible {
	color: var(--deep-forest);
	text-decoration: underline;
	text-underline-offset: var(--space-8);
}

.roarr-cta-band__contact span {
	display: block;
	min-width: 0;
	overflow-wrap: anywhere;
}

.roarr-cta-band__contact svg {
	width: var(--icon-md);
	height: var(--icon-md);
	flex: 0 0 var(--icon-md);
	color: currentColor;
}

@media (max-width: 640px) {
	.roarr-cta-band__contact {
		display: grid;
		grid-template-columns: minmax(0, max-content);
		justify-content: center;
		justify-items: start;
		gap: var(--space-8);
		margin-top: var(--space-16);
	}

	.roarr-cta-band__contact li {
		display: block;
		min-width: 0;
	}

	.roarr-cta-band__contact a {
		justify-content: start;
		text-align: left;
	}

	.roarr-cta-band__contact span {
		text-align: left;
	}
}

@media (min-width: 768px) {
	.roarr-cta-band__panel {
		z-index: 2;
		margin-inline: auto;
		max-width: min(100%, 760px);
		padding: var(--space-56) var(--space-48);
		background: transparent;
	}

	.roarr-cta-band .roarr-cta-band__title {
		max-width: min(100%, 14em);
		font-size: var(--h1);
	}
}

@media (min-width: 1024px) {
	.roarr-cta-band__panel {
		margin-inline: auto;
		padding: var(--space-64) var(--space-48);
	}

	.roarr-cta-band .roarr-cta-band__title {
		max-width: min(100%, 16em);
		font-size: clamp(48px, 4vw, 64px);
		white-space: normal;
	}
}

@media (min-width: 700px) and (max-width: 1099px) {
	.roarr-cta-band .site-footer__newsletter {
		--newsletter-overlap: clamp(112px, 16vw, 152px);
	}
}

@media (min-width: 1100px) {
	.roarr-cta-band .site-footer__newsletter {
		--newsletter-overlap: clamp(148px, 9vw, 184px);
	}
}

@media (max-width: 699px) {
	.roarr-cta-band .site-footer__newsletter {
		--newsletter-overlap: clamp(132px, 25vw, 168px);
	}
}

@media (max-width: 539px) {
	.roarr-cta-band .site-footer__newsletter {
		--newsletter-overlap: clamp(160px, 44vw, 196px);
	}
}

/* -- src/blocks/download-strip.css (canonical component source) -- */
/**
 * Downloads strip (shared) — trust-asset PDFs under a rates split, e.g.
 * school planning packs. Heading → one-liner → button row, all centred in a
 * narrower card so it reads as a tidy hand-off moment.
 * Ported from design-reference/mocks/css/styles.css ~lines 14822-14910.
 * Batch D (schools-and-groups.html).
 */
.roarr-download-strip {
	display: grid;
	gap: var(--space-16);
	justify-items: center;
	width: min(100%, calc(var(--space-120) * 9));
	margin-top: clamp(var(--space-48), 5vw, var(--space-72));
	margin-inline: auto;
	padding: var(--space-24) clamp(var(--space-24), 3vw, var(--space-32));
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
	background: var(--card-on-light);
	text-align: center;
}

.roarr-section__inner > .roarr-download-strip:first-child {
	margin-top: 0;
}

.roarr-download-strip h2,
.roarr-download-strip h3 {
	margin: 0;
	color: var(--text-primary);
	font-family: var(--font-heading);
	font-size: var(--h3);
	font-weight: var(--weight-bold);
	line-height: var(--lh-tight);
}

@media (max-width: 767px) {
	.roarr-download-strip {
		justify-items: start;
		text-align: left;
	}
}

.roarr-download-strip .roarr-copy {
	max-width: none;
	margin: 0;
	color: var(--text-secondary);
}

.roarr-download-strip .roarr-action-row {
	justify-content: center;
}

@media (min-width: 768px) and (max-width: 1023px) {
	.roarr-download-strip .roarr-action-row {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		justify-content: stretch;
		width: 100%;
	}

	.roarr-download-strip .roarr-action-row .btn {
		width: 100%;
	}

	.roarr-download-strip .roarr-action-row .btn:only-child {
		grid-column: 1 / -1;
		justify-self: center;
		width: auto;
	}
}

.roarr-download-strip .btn--secondary {
	border-color: color-mix(in srgb, var(--primary) 55%, transparent);
	background: transparent;
	color: var(--primary-dark);
}

.roarr-download-strip .btn--secondary:hover,
.roarr-download-strip .btn--secondary:focus-visible {
	border-color: var(--primary);
	background: var(--primary);
	color: var(--deep-forest);
}

/* -- src/blocks/error-404.css (canonical component source) -- */
/**
 * Branded 404 scene. This is a classic-theme template component rather than
 * saved Gutenberg content, but it belongs in the canonical component bundle
 * so the public CSS remains generated from one source directory.
 */

.roarr-404 {
	min-height: auto;
	background: var(--cream);
}

.roarr-404__scene {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--white) 42%, transparent) 0 9rem, transparent 9.1rem),
		radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--yellow) 72%, transparent) 0 12rem, transparent 12.1rem),
		linear-gradient(145deg, var(--wp--preset--color--sky) 0%, color-mix(in srgb, var(--wp--preset--color--sky) 62%, var(--cream)) 100%);
}

.roarr-404__scene::after {
	position: absolute;
	z-index: -1;
	right: -4rem;
	bottom: -8rem;
	width: min(42vw, 36rem);
	aspect-ratio: 1;
	border-radius: 50%;
	background: color-mix(in srgb, var(--primary) 32%, transparent);
	content: "";
}

/* The shared final CTA normally receives a cream paint edge. The 404 ends on
   sky, so carry that exact scene colour through the brush mask and straight
   into the booking scene instead of inserting a cream buffer. */
.roarr-404 + .roarr-rip--cta {
	--roarr-break-fill: color-mix(in srgb, var(--wp--preset--color--sky) 62%, var(--cream));
}

.roarr-404__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(22rem, 0.98fr);
	gap: clamp(var(--space-40), 6vw, var(--space-96));
	align-items: center;
	min-height: clamp(36rem, 66vh, 46rem);
	padding-block: clamp(var(--space-64), 8vw, var(--space-120));
}

.roarr-404__copy {
	display: grid;
	gap: var(--space-24);
	justify-items: start;
	max-width: 41rem;
}

.roarr-404__eyebrow {
	display: inline-flex;
	align-items: center;
	min-height: var(--space-40);
	padding: var(--space-8) var(--space-16);
	border: 2px solid var(--deep-forest);
	border-radius: var(--radius-pill);
	background: var(--yellow);
	box-shadow: var(--space-4) var(--space-4) 0 var(--deep-forest);
	font-size: var(--text-sm);
	font-weight: var(--weight-heavy);
	line-height: var(--lh-solid);
	text-transform: uppercase;
}

.roarr-404 h1 {
	max-width: 12ch;
	color: var(--deep-forest);
	font-size: clamp(3rem, 5.8vw, 5.8rem);
	line-height: 0.92;
	text-wrap: balance;
}

.roarr-404__intro {
	max-width: 36ch;
	color: var(--text-primary);
	font-size: clamp(var(--text-base), 1.7vw, var(--text-xl));
	font-weight: var(--weight-bold);
	line-height: var(--lh-relaxed);
	text-wrap: pretty;
}

.roarr-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-12);
}

.roarr-404__actions .btn--secondary {
	border: 2px solid var(--deep-forest);
	background: color-mix(in srgb, var(--white) 46%, transparent);
	color: var(--deep-forest);
}

.roarr-404__quick-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8) var(--space-16);
	align-items: baseline;
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
}

.roarr-404__quick-links span {
	color: var(--text-secondary);
}

.roarr-404__quick-links a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.22em;
}

.roarr-404__characters {
	position: relative;
	display: grid;
	place-items: end center;
	align-self: end;
	min-width: 0;
	padding-top: clamp(var(--space-48), 7vw, var(--space-96));
}

.roarr-404__characters::before {
	position: absolute;
	right: 4%;
	bottom: 1%;
	left: 4%;
	height: clamp(var(--space-24), 4vw, var(--space-48));
	border-radius: 50%;
	background: color-mix(in srgb, var(--deep-forest) 28%, transparent);
	filter: blur(var(--space-12));
	content: "";
}

.roarr-404__characters img {
	position: relative;
	z-index: 1;
	width: min(100%, 30rem);
	filter: drop-shadow(0 var(--space-16) var(--space-16) color-mix(in srgb, var(--deep-forest) 22%, transparent));
}

.roarr-404__number {
	position: absolute;
	top: calc(-1 * clamp(var(--space-24), 3vw, var(--space-48)));
	left: 50%;
	transform: translateX(-50%);
	color: var(--white);
	font-family: var(--font-brand);
	font-size: clamp(10rem, 20vw, 18rem);
	font-weight: var(--weight-regular);
	font-synthesis: none;
	line-height: 0.8;
	-webkit-text-stroke: clamp(2px, 0.25vw, 4px) var(--deep-forest);
	paint-order: stroke fill;
	text-shadow:
		0.035em 0.035em 0 var(--deep-forest),
		0 0.08em 0.18em color-mix(in srgb, var(--deep-forest) 24%, transparent);
	white-space: nowrap;
}

@media (max-width: 899px) {
	.roarr-404__inner {
		grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.72fr);
		gap: var(--space-32);
		min-height: 38rem;
		padding-block: calc(var(--header-h) + var(--space-32)) calc(var(--space-80) + var(--space-24));
	}

	.roarr-404 h1 {
		font-size: clamp(3rem, 7vw, 4.5rem);
	}

	.roarr-404__characters {
		padding-top: var(--space-56);
	}
}

@media (max-width: 639px) {
	.roarr-404 + .roarr-rip--cta {
		--roarr-break-fill: color-mix(in srgb, var(--wp--preset--color--sky) 54%, var(--cream));
	}

	.roarr-404__scene {
		background:
			radial-gradient(circle at 102% 8%, color-mix(in srgb, var(--yellow) 70%, transparent) 0 8rem, transparent 8.1rem),
			linear-gradient(165deg, var(--wp--preset--color--sky) 0%, color-mix(in srgb, var(--wp--preset--color--sky) 54%, var(--cream)) 100%);
	}

	.roarr-404__scene::after {
		right: -7rem;
		bottom: -4rem;
		width: 19rem;
	}

	.roarr-404__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-32);
		min-height: 0;
		padding-block: calc(var(--header-h) + var(--space-16)) calc(var(--space-80) + var(--space-24));
	}

	.roarr-404__copy {
		gap: var(--space-20);
	}

	.roarr-404 h1 {
		max-width: 11ch;
		font-size: clamp(2.6rem, 12.5vw, 3.6rem);
	}

	.roarr-404__intro {
		font-size: var(--text-base);
	}

	.roarr-404__actions,
	.roarr-404__actions .btn {
		width: 100%;
	}

	.roarr-404__characters {
		padding-top: var(--space-48);
	}

	.roarr-404__characters img {
		width: min(78vw, 20rem);
	}

	.roarr-404__number {
		top: calc(-1 * var(--space-24));
		font-size: clamp(8rem, 40vw, 11rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.roarr-404__actions .btn {
		transition: none;
	}
}

/* -- src/blocks/event-carousel.css (canonical component source) -- */
/**
 * Front-end styles for roarr/event-carousel. Ported from design-reference/
 * mocks/css/styles.css — the "Homepage events carousel" rules plus the
 * per-event animated fx backdrop and the `.roarr-event-band--moody` mood
 * gradient. `.roarr-event-card` base rules (image, date pill, cta, hover)
 * already live in events-grid.css and apply here unchanged since the
 * carousel reuses the exact same card markup/classes — this file only adds
 * what's specific to the carousel treatment: band/fx layers, the
 * feature+queue layout, controls, dots, and the crossfade/swap animations.
 */

.roarr-event-band {
  position: relative; /* stage for the animated per-event FX backdrop */
  isolation: isolate;
  overflow: hidden; /* clip the sunbeams to the band */
  padding-block: var(--section-padding-desktop);
}

@media (max-width: 639px) {
  .roarr-event-band {
    /* Balance the complete carousel group between the down-rip above and the
       skyline below. The matching 16px reduction in roarr-section.css keeps
       the section's overall height unchanged. */
    padding-top: calc(var(--section-padding-mobile) + var(--space-80));
    padding-bottom: var(--section-padding-mobile);
  }
}

/* ── Per-event animated backdrop ─────────────────────────────────────
   A decorative layer over the mood gradient, behind the cards, echoing the
   active event's vibe (sunbeams / a glowing moon). data-fx on the band
   selects which theme shows; interactions.js measures the feature banner
   into --fx-x/--fx-y/--fx-size so the burst is anchored on it. */
.roarr-event-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.roarr-event-fx__beams,
.roarr-event-fx__glow,
.roarr-event-fx__stars,
.roarr-event-fx__shooting,
.roarr-event-fx__moon,
.roarr-event-fx__sunny {
  opacity: 0;
  transition: opacity var(--speed) var(--ease);
}
.roarr-event-band[data-fx='sunbeam'] .roarr-event-fx__beams,
.roarr-event-band[data-fx='sunbeam'] .roarr-event-fx__glow {
  opacity: 1;
}
.roarr-event-band[data-fx='moon'] .roarr-event-fx__stars,
.roarr-event-band[data-fx='moon'] .roarr-event-fx__shooting,
.roarr-event-band[data-fx='moon'] .roarr-event-fx__moon {
  opacity: 1;
}
.roarr-event-band[data-fx='sunny'] .roarr-event-fx__sunny {
  opacity: 1;
}

/* Perf: only the LIVE theme animates, and only while the band is on-screen.
   Every FX animation is paused by default; is-fx-visible (added by the
   client component's IntersectionObserver) + [data-fx] scope "running" to
   the active event's layers only. prefers-reduced-motion still wins. */
.roarr-event-fx__beams::before,
.roarr-event-fx__moon,
.roarr-event-fx__stars::before,
.roarr-event-fx__stars::after,
.roarr-event-fx__shooting::before,
.roarr-event-fx__shooting::after,
.roarr-event-fx__sunny::before,
.roarr-event-fx__sunny::after {
  animation-play-state: paused;
}
.roarr-event-band.is-fx-visible[data-fx='sunbeam'] .roarr-event-fx__beams::before,
.roarr-event-band.is-fx-visible[data-fx='moon'] .roarr-event-fx__moon,
.roarr-event-band.is-fx-visible[data-fx='moon'] .roarr-event-fx__stars::before,
.roarr-event-band.is-fx-visible[data-fx='moon'] .roarr-event-fx__stars::after,
.roarr-event-band.is-fx-visible[data-fx='moon'] .roarr-event-fx__shooting::before,
.roarr-event-band.is-fx-visible[data-fx='moon'] .roarr-event-fx__shooting::after,
.roarr-event-band.is-fx-visible[data-fx='sunny'] .roarr-event-fx__sunny::before,
.roarr-event-band.is-fx-visible[data-fx='sunny'] .roarr-event-fx__sunny::after {
  animation-play-state: running;
}

/* Carousel (and its cards) stay above the FX layer. */
.roarr-event-carousel {
  z-index: 1;
}

.roarr-event-fx__beams,
.roarr-event-fx__glow {
  position: absolute;
  left: var(--fx-x, 50%);
  top: var(--fx-y, 34%);
  width: var(--fx-size, 720px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

/* Radiating rays: pale wedges, slowly rotating, faded toward the rim so
   they melt into the mood gradient instead of ending on a hard circle. */
.roarr-event-fx__beams {
  width: var(--fx-beam-size, var(--fx-size, 720px));
  contain: layout paint;
}

/* Keep responsive placement on the outer element and rotation on an inner
   paint layer. Resizing can now move/scale the scene without rewriting the
   transform that owns the animation timeline (a long-standing Safari and
   Chromium compositor edge case during live window drags). */
.roarr-event-fx__beams::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-conic-gradient(
    from 0deg,
    color-mix(in srgb, var(--white) 16%, transparent) 0deg 3.4deg,
    transparent 3.4deg 15deg
  );
  -webkit-mask: radial-gradient(closest-side, #000 0, #000 8%, transparent 74%);
  mask: radial-gradient(closest-side, #000 0, #000 8%, transparent 74%);
  animation: roarr-fx-spin 64s linear infinite;
  transform-origin: center;
  backface-visibility: hidden;
  will-change: transform;
}

/* Warm core glow so the centre reads as a light source. */
.roarr-event-fx__glow {
  width: calc(var(--fx-size, 720px) * 0.92);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--yellow) 42%, transparent), transparent 68%);
}

/* ── Sunny half-term spiral ───────────────────────────────────────────
   A sky-blue scene with a warm rotating spiral and gently breathing sun.
   It uses the same feature-relative sizing as the existing beams, so the
   decoration remains centred behind the artwork at every breakpoint. */
.roarr-event-fx__sunny {
  position: absolute;
  left: var(--fx-x, 50%);
  top: var(--fx-y, 34%);
  width: var(--fx-beam-size, var(--fx-size, 720px));
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  contain: layout paint;
}

.roarr-event-fx__sunny::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    repeating-conic-gradient(
      from -10deg,
      color-mix(in srgb, var(--white) 26%, transparent) 0deg 5deg,
      color-mix(in srgb, var(--yellow) 18%, transparent) 5deg 9deg,
      transparent 9deg 23deg
    );
  -webkit-mask: radial-gradient(
    closest-side,
    #000 0 9%,
    color-mix(in srgb, #000 92%, transparent) 22%,
    #000 58%,
    transparent 82%
  );
  mask: radial-gradient(
    closest-side,
    #000 0 9%,
    color-mix(in srgb, #000 92%, transparent) 22%,
    #000 58%,
    transparent 82%
  );
  animation: roarr-sunny-spiral 28s linear infinite;
  transform-origin: center;
  backface-visibility: hidden;
  will-change: transform;
}

.roarr-event-fx__sunny::after {
  content: '';
  position: absolute;
  inset: 40%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 34% 30%,
    var(--white) 0 8%,
    var(--yellow) 30%,
    color-mix(in srgb, var(--yellow) 72%, #f59b3d) 58%,
    transparent 74%
  );
  filter: drop-shadow(0 0 24px color-mix(in srgb, var(--yellow) 58%, transparent));
  animation: roarr-sunny-pulse 4.8s ease-in-out infinite;
}

/* The animation shorthands above reset animation-play-state, so the Sunny
   lifecycle rules must follow them in source order. Keep the layer still
   while another carousel scene is active and run it only while visible. */
.roarr-event-fx__sunny::before,
.roarr-event-fx__sunny::after {
  animation-play-state: paused;
}

.roarr-event-band.is-fx-visible[data-fx='sunny'] .roarr-event-fx__sunny::before,
.roarr-event-band.is-fx-visible[data-fx='sunny'] .roarr-event-fx__sunny::after {
  animation-play-state: running;
}

/* ── Moon (night events) ──────────────────────────────────────────────
   A soft glowing moon tucked top-left, gently breathing. Anchored to the
   band corner, sits under the cards so it peeks out behind the banner. */
.roarr-event-fx__moon {
  position: absolute;
  top: var(--space-40);
  left: var(--space-48);
  width: var(--moon-size, 190px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--white) 95%, transparent) 0 24%,
    color-mix(in srgb, var(--cream) 60%, transparent) 30%,
    color-mix(in srgb, var(--white) 20%, transparent) 46%,
    transparent 72%
  );
  animation: roarr-moon-glow 6s ease-in-out infinite;
}

@media (max-width: 639px) {
  .roarr-event-fx__moon {
    top: var(--space-8);
    left: 50%;
    translate: -50% 0;
  }
}

/* ── Starfield (night events) ─────────────────────────────────────────
   A scatter of tiny lights above the cards. Two pseudo layers twinkle out
   of phase so the field shimmers rather than blinking in unison. */
.roarr-event-fx__stars {
  position: absolute;
  inset: 0;
  -webkit-mask: linear-gradient(to bottom, #000 0, #000 42%, transparent 80%);
  mask: linear-gradient(to bottom, #000 0, #000 42%, transparent 80%);
}
.roarr-event-fx__stars::before,
.roarr-event-fx__stars::after {
  content: '';
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  opacity: 1;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--white) 45%, transparent));
  will-change: opacity;
}
.roarr-event-fx__stars::before {
  background-image:
    radial-gradient(1.4px 1.4px at 8% 22%, var(--white) 0, var(--white) 48%, transparent 100%),
    radial-gradient(1.2px 1.2px at 15% 10%, var(--white) 0, var(--white) 48%, transparent 100%),
    radial-gradient(1.6px 1.6px at 23% 30%, var(--white) 0, var(--white) 48%, transparent 100%),
    radial-gradient(1.2px 1.2px at 31% 15%, var(--white) 0, var(--white) 48%, transparent 100%),
    radial-gradient(2px 2px at 42% 8%, var(--white) 0, var(--white) 58%, transparent 100%),
    radial-gradient(1.2px 1.2px at 39% 40%, var(--white) 0, var(--white) 48%, transparent 100%),
    radial-gradient(1.6px 1.6px at 54% 24%, var(--white) 0, var(--white) 48%, transparent 100%),
    radial-gradient(1.2px 1.2px at 62% 12%, var(--white) 0, var(--white) 48%, transparent 100%),
    radial-gradient(1.6px 1.6px at 70% 34%, var(--white) 0, var(--white) 48%, transparent 100%),
    radial-gradient(2px 2px at 78% 18%, var(--white) 0, var(--white) 58%, transparent 100%),
    radial-gradient(1.2px 1.2px at 85% 8%, var(--white) 0, var(--white) 48%, transparent 100%),
    radial-gradient(1.6px 1.6px at 92% 28%, var(--white) 0, var(--white) 48%, transparent 100%),
    radial-gradient(1.2px 1.2px at 88% 46%, var(--white) 0, var(--white) 48%, transparent 100%),
    radial-gradient(1.4px 1.4px at 5% 44%, var(--white) 0, var(--white) 48%, transparent 100%);
  animation: roarr-stars-twinkle-a 3.4s ease-in-out infinite;
}
.roarr-event-fx__stars::after {
  background-image:
    radial-gradient(1.2px 1.2px at 12% 34%, var(--cream) 0, var(--cream) 48%, transparent 100%),
    radial-gradient(1.6px 1.6px at 20% 18%, var(--cream) 0, var(--cream) 48%, transparent 100%),
    radial-gradient(1.2px 1.2px at 28% 6%, var(--cream) 0, var(--cream) 48%, transparent 100%),
    radial-gradient(1.6px 1.6px at 36% 26%, var(--cream) 0, var(--cream) 48%, transparent 100%),
    radial-gradient(1.2px 1.2px at 47% 16%, var(--cream) 0, var(--cream) 48%, transparent 100%),
    radial-gradient(2px 2px at 50% 38%, var(--cream) 0, var(--cream) 58%, transparent 100%),
    radial-gradient(1.2px 1.2px at 58% 44%, var(--cream) 0, var(--cream) 48%, transparent 100%),
    radial-gradient(1.6px 1.6px at 66% 20%, var(--cream) 0, var(--cream) 48%, transparent 100%),
    radial-gradient(1.2px 1.2px at 74% 8%, var(--cream) 0, var(--cream) 48%, transparent 100%),
    radial-gradient(1.6px 1.6px at 82% 32%, var(--cream) 0, var(--cream) 48%, transparent 100%),
    radial-gradient(1.2px 1.2px at 95% 14%, var(--cream) 0, var(--cream) 48%, transparent 100%),
    radial-gradient(1.6px 1.6px at 76% 50%, var(--cream) 0, var(--cream) 48%, transparent 100%);
  animation: roarr-stars-twinkle-b 5s ease-in-out infinite;
}

/* ── Shooting stars (night events) ────────────────────────────────────
   Two streaks that occasionally dart the full width of the band, behind
   the cards. Hidden under prefers-reduced-motion (motion is the point). */
.roarr-event-fx__shooting {
  position: absolute;
  inset: 0;
}
.roarr-event-fx__shooting::before,
.roarr-event-fx__shooting::after {
  content: '';
  position: absolute;
  width: 170px;
  height: 2px;
  border-radius: var(--radius-pill);
  background:
    radial-gradient(circle at 100% 50%, var(--white) 0, transparent 3px),
    linear-gradient(90deg, transparent 0, color-mix(in srgb, var(--white) 90%, transparent) 100%);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--white) 60%, transparent));
  opacity: 0;
  will-change: transform, opacity;
}
.roarr-event-fx__shooting::before {
  top: 0;
  left: 0;
  animation: roarr-shoot-a 7s linear infinite;
}
.roarr-event-fx__shooting::after {
  top: 0;
  right: 0;
  animation: roarr-shoot-b 9s linear 3.5s infinite;
}

@keyframes roarr-shoot-a {
  0% {
    opacity: 0;
    transform: rotate(15deg) translateX(-15vw);
  }
  5% {
    opacity: 1;
  }
  17% {
    opacity: 1;
  }
  24%,
  100% {
    opacity: 0;
    transform: rotate(15deg) translateX(135vw);
  }
}
@keyframes roarr-shoot-b {
  0% {
    opacity: 0;
    transform: rotate(165deg) translateX(-15vw);
  }
  5% {
    opacity: 1;
  }
  16% {
    opacity: 1;
  }
  23%,
  100% {
    opacity: 0;
    transform: rotate(165deg) translateX(135vw);
  }
}

@keyframes roarr-fx-spin {
  to {
    transform: rotate(1turn);
  }
}

@keyframes roarr-sunny-spiral {
  to {
    transform: rotate(1turn) scale(1.04);
  }
}

@keyframes roarr-sunny-pulse {
  0%,
  100% {
    transform: scale(0.92);
    opacity: 0.82;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

@keyframes roarr-moon-glow {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes roarr-stars-twinkle-a {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}
@keyframes roarr-stars-twinkle-b {
  0%,
  100% {
    opacity: 1;
  }
  40% {
    opacity: 0.6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .roarr-event-fx__beams::before,
  .roarr-event-fx__moon,
  .roarr-event-fx__stars::before,
  .roarr-event-fx__stars::after,
  .roarr-event-fx__sunny::before,
  .roarr-event-fx__sunny::after {
    animation: none;
  }
  .roarr-event-fx__shooting {
    display: none;
  }
}

/* Strip cards (everything but the feature) live in the scrolling track —
   two visible at a time, full banner aspect so nothing crops. */
.roarr-event-carousel__track > .roarr-event-card {
  flex: 0 0 calc((100% - var(--ev-gap)) / 2);
}

.roarr-event-carousel .roarr-event-card__date:empty,
.roarr-event-carousel .roarr-event-card__cta:empty {
  display: none;
}

.roarr-event-band[data-cta-position='right'] .roarr-event-card__cta {
  right: var(--space-20);
  left: auto;
  text-align: right;
}

@media (max-width: 639px) {
  .roarr-event-carousel__track .roarr-event-card__cta {
    display: none;
  }
}

/* ── Homepage events carousel — rotating "feature + queue" ────────────
   The full-width feature banner is the stage (the active event). Below it
   sit the next two events as half-width cards. Advancing promotes the left
   queue card up to the feature and pulls the next event in on the right
   (loops). Every card keeps the full 1.9:1 banner aspect so nothing crops. */
.roarr-event-carousel {
  --ev-gap: var(--space-24);
  max-width: calc(var(--container-width) - var(--space-96) * 2);
  margin-inline: auto;
  position: relative;
}

.roarr-event-carousel__layout {
  display: flex;
  flex-direction: column;
  gap: var(--ev-gap);
}

.roarr-event-card--feature {
  width: 100%;
}

.roarr-event-carousel__viewport {
  width: 100%;
  min-width: 0;
}

.roarr-event-carousel__track {
  display: flex;
  gap: var(--ev-gap);
}

.roarr-event-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  margin-top: var(--space-24);
}

.roarr-event-carousel__arrow {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--space-48);
  height: var(--space-48);
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--cream);
  color: var(--text-primary);
  box-shadow: var(--shadow-raised);
  cursor: pointer;
  transition:
    background var(--speed) var(--ease),
    transform var(--speed) var(--ease),
    opacity var(--speed) var(--ease);
}

.roarr-event-carousel__arrow:hover {
  background: var(--white);
  transform: scale(1.08);
}

.roarr-event-carousel__arrow:disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* CSS-drawn chevron (no inline icon SVG, per DESIGN.md §10). */
.roarr-event-carousel__arrow::before {
  content: '';
  width: var(--space-12);
  height: var(--space-12);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

.roarr-event-carousel__arrow--prev::before {
  transform: translateX(2px) rotate(135deg);
}

.roarr-event-carousel__arrow--next::before {
  transform: translateX(-2px) rotate(-45deg);
}

.roarr-event-carousel__dots {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.roarr-event-carousel__dot {
  position: relative;
  width: var(--space-12);
  height: var(--space-12);
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--text-on-dark) 45%, transparent);
  cursor: pointer;
  transition:
    background var(--speed) var(--ease),
    transform var(--speed) var(--ease);
}

/* Invisible hit-area expansion only — the visible dot stays the designed
   12px, this just enlarges what's clickable/tappable to clear the 24px
   touch-target minimum (WCAG 2.5.8 / Lighthouse target-size), a standard
   non-visual a11y technique. */
.roarr-event-carousel__dot::after {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--space-8));
}

.roarr-event-carousel__dot.is-active {
  background: var(--text-on-dark);
  transform: scale(1.3);
}

/* Feature crossfade: the incoming banner fades in over the current one,
   then JS commits it to the base image. Smooth, no hard cut. */
.roarr-event-card__ghost {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.roarr-event-card__ghost.is-in {
  opacity: 1;
}

/* Queue cards slide + fade in from the side of travel, lightly staggered so
   the row cascades rather than snapping. */
@keyframes roarr-ev-in-next {
  from {
    opacity: 0;
    transform: translateX(var(--space-32)) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes roarr-ev-in-prev {
  from {
    opacity: 0;
    transform: translateX(calc(-1 * var(--space-32))) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.roarr-event-carousel__track > .roarr-event-card.is-swap-next {
  animation: roarr-ev-in-next 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.roarr-event-carousel__track > .roarr-event-card.is-swap-prev {
  animation: roarr-ev-in-prev 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.roarr-event-carousel__track > .roarr-event-card:nth-child(2).is-swap-next,
.roarr-event-carousel__track > .roarr-event-card:nth-child(2).is-swap-prev {
  animation-delay: 0.07s;
}

@media (prefers-reduced-motion: reduce) {
  .roarr-event-card__ghost {
    transition: none;
  }
  .roarr-event-carousel__track > .roarr-event-card.is-swap-next,
  .roarr-event-carousel__track > .roarr-event-card.is-swap-prev {
    animation: none;
  }
}

/* ── Moody band mood gradient ──────────────────────────────────────────
   The band's background melts between the active event's 3 mood stops
   (set as inline custom properties by the client component). @property
   registration below makes --mood-* animatable colours so the transition
   tweens smoothly instead of snapping. */
@property --mood-1 {
  syntax: '<color>';
  inherits: true;
  initial-value: transparent;
}
@property --mood-2 {
  syntax: '<color>';
  inherits: true;
  initial-value: transparent;
}
@property --mood-3 {
  syntax: '<color>';
  inherits: true;
  initial-value: transparent;
}

.roarr-event-band--moody {
  --mood-1: var(--wp--preset--color--pink);
  --mood-2: var(--wp--preset--color--pink);
  --mood-3: var(--wp--preset--color--pink);
  background-color: var(--mood-2);
  background-image:
    radial-gradient(120% 120% at 12% 8%, var(--mood-1), transparent 55%),
    radial-gradient(130% 130% at 88% 92%, var(--mood-3), transparent 60%),
    linear-gradient(155deg, var(--mood-1), var(--mood-2) 50%, var(--mood-3));
  transition:
    --mood-1 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    --mood-2 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    --mood-3 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.roarr-event-band--moody + .roarr-canopy-break {
  transition: background-color 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .roarr-event-band--moody,
  .roarr-event-band--moody + .roarr-canopy-break {
    transition: none;
  }
}

/* -- src/blocks/event-gallery.css (canonical component source) -- */
/**
 * Event image gallery — the editable three-picture bento becomes a touch
 * scroller on tablet and mobile. The desktop composition deliberately reuses
 * accessibility-bento.css so there is one source for the bento geometry.
 */
.roarr-event-gallery {
	width: 100%;
	max-width: calc(var(--container-width) - var(--space-96) * 2);
	margin: var(--space-48) auto 0;
}

/* The event intro and gallery are authored in one section. Remove the shared
 * media-frame's 320px phone floor inside this pattern so its lead image keeps
 * the intended 16:10 ratio instead of becoming a tall, heavily cropped box.
 * The public DOM and Gutenberg canvas use the same structural selector. */
:is(.roarr-site-main, .editor-styles-wrapper)
	.roarr-section:has(.roarr-event-gallery)
	.roarr-split
	.roarr-media-frame
	img {
	height: auto;
	min-height: 0;
	aspect-ratio: var(--image-ratio-media);
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-event-gallery > .roarr-event-gallery__main {
	grid-column: 1 / -1;
}

:is(.roarr-site-main, .editor-styles-wrapper)
	.roarr-event-gallery
	> .roarr-event-gallery__main
	.wp-block-image
	img {
	height: auto;
	aspect-ratio: var(--image-ratio-landscape);
}

@media (max-width: 1023px) {
	:is(.roarr-site-main, .editor-styles-wrapper) .roarr-event-gallery {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: min(82vw, calc(var(--space-128) * 4 + var(--space-48)));
		justify-content: start;
		gap: var(--space-16);
		width: 100%;
		max-width: none;
		margin-inline: 0;
		padding: var(--space-8) var(--space-16) var(--space-16);
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-inline: contain;
		scroll-padding-inline: var(--space-16);
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	:is(.roarr-site-main, .editor-styles-wrapper) .roarr-event-gallery::-webkit-scrollbar {
		display: none;
	}

	:is(.roarr-site-main, .editor-styles-wrapper) .roarr-event-gallery > .roarr-accessibility-bento__item {
		grid-column: auto;
		min-width: 0;
		scroll-snap-align: center;
		scroll-snap-stop: always;
	}

	:is(.roarr-site-main, .editor-styles-wrapper)
		.roarr-event-gallery
		.roarr-accessibility-bento__item
		.wp-block-image
		img {
		height: auto;
		aspect-ratio: var(--image-ratio-landscape);
	}
}

@media (max-width: 767px) {
	:is(.roarr-site-main, .editor-styles-wrapper) .roarr-event-gallery {
		grid-auto-columns: min(84vw, calc(var(--space-128) * 3));
		margin-top: var(--space-32);
	}
}

/* -- src/blocks/events-grid.css (canonical component source) -- */
/**
 * Shared event-card and event-grid presentation. Ported from design-reference/mocks
 * css/styles.css (.roarr-card-grid / .roarr-card-grid--events / .roarr-event-card
 * rules). The mock's .roarr-event-card also carries carousel-specific
 * behaviour (data-mood crossfade, .roarr-event-carousel__track flex-basis,
 * ghost-image crossfade) that belongs to the bespoke home-hero band — the
 * manifest explicitly excludes home-hero from tonight's blocks ("bespoke,
 * one page — port as code component later"). Only the generic card rules
 * that apply in a plain grid or carousel context live here.
 */

.roarr-card-grid {
	display: grid;
	gap: var(--space-24);
}

.roarr-card-grid--events {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.roarr-card-grid--events .roarr-event-card--feature {
	grid-column: span 2;
}

@media (min-width: 768px) {
	.roarr-card-grid--events {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.roarr-card-grid--events .roarr-event-card--feature {
		grid-column: span 2;
	}
}

@media (min-width: 1024px) {
	.roarr-card-grid--events {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.roarr-event-card {
	position: relative;
	aspect-ratio: 1.9 / 1;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--surface-raised);
	color: var(--text-on-dark);
	text-decoration: none;
	isolation: isolate;
	transition: transform var(--speed) var(--ease);
}

.roarr-event-card:hover,
.roarr-event-card:focus-visible {
	outline: none;
	text-decoration: none;
	transform: translateY(calc(var(--space-4) * -1));
}

.roarr-event-card__image {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.roarr-event-card__date {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	min-height: var(--space-40);
	padding: 0 var(--space-24) 0 var(--space-16);
	border-radius: var(--radius-md) 0 var(--radius-md) 0;
	background: var(--date-pill-bg);
	color: var(--text-primary);
	font-family: var(--font-heading);
	font-size: var(--text-xs);
	font-weight: var(--weight-heavy);
	line-height: var(--lh-solid);
	text-transform: uppercase;
}

@media (max-width: 639px) {
	.roarr-event-card__date {
		display: none;
	}
}

.roarr-event-card__content {
	position: relative;
	z-index: 2;
	display: grid;
	align-self: end;
	gap: var(--space-8);
	padding: var(--space-64) var(--space-24) var(--space-24);
}

.roarr-event-card__title,
.roarr-event-card__cta {
	font-family: var(--font-heading);
	font-weight: var(--weight-heavy);
	letter-spacing: 0;
	text-transform: uppercase;
}

.roarr-event-card__title {
	display: block;
	max-width: 11ch;
	font-size: var(--text-xl);
	line-height: var(--lh-tight);
}

.roarr-event-card--feature .roarr-event-card__title {
	max-width: 13ch;
	font-size: var(--h3);
	line-height: var(--lh-snug);
}

.roarr-event-card__title em {
	color: var(--primary);
	font-style: normal;
}

.roarr-event-card__cta {
	position: absolute;
	z-index: 2;
	left: var(--space-20);
	bottom: var(--space-20);
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	color: var(--text-on-dark);
	font-size: var(--text-xs);
	line-height: var(--lh-solid);
	text-shadow: 0 1px 3px color-mix(in srgb, var(--deep-forest) 72%, transparent);
}

.roarr-event-card__cta::after {
	content: ">";
}

@media (max-width: 767px) {
	.roarr-event-card--feature .roarr-event-card__title {
		font-size: var(--h2);
	}
}

/* -- src/blocks/extras.css (canonical component source) -- */
/**
 * Party extras (exclusive adventures) — add-on block under a split: a
 * rule-flanked centred label, then soft cards straight on the section
 * background, photo inset left and copy right.
 * Ported from design-reference/mocks/css/styles.css ~lines 10946-11038.
 * Batch D (exclusive-adventures.html).
 */
.roarr-extras {
	display: grid;
	gap: var(--space-24);
}

.roarr-extras__heading {
	display: flex;
	align-items: center;
	gap: var(--space-24);
	margin: 0;
	color: var(--text-primary);
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	font-weight: var(--weight-heavy);
	line-height: var(--lh-tight);
	text-transform: uppercase;
}

.roarr-extras__heading::before,
.roarr-extras__heading::after {
	content: "";
	flex: 1 1 0;
	height: 1px;
	background: var(--border-light);
}

.roarr-extras__grid {
	display: grid;
	gap: var(--space-24);
}

.roarr-extras-card {
	display: grid;
	gap: var(--space-24);
	align-items: stretch;
}

.roarr-extras-card figure {
	margin: 0;
}

.roarr-extras-card img {
	display: block;
	width: 100%;
	height: auto;
	min-height: 0;
	aspect-ratio: var(--image-ratio-media-compact);
	object-fit: cover;
	border-radius: var(--radius-sm);
}

.roarr-extras-card__body {
	display: grid;
	gap: var(--space-8);
	align-content: start;
	justify-items: start;
	min-width: 0;
}

.roarr-extras-card__body h4 {
	margin: 0;
	color: var(--text-primary);
	font-size: var(--text-lg);
	line-height: var(--lh-snug);
}

.roarr-extras-card__body p {
	margin: 0;
	color: var(--text-secondary);
	font-size: var(--text-sm);
	line-height: var(--lh-loose);
}

.roarr-extras-card__body p.roarr-extras-card__price {
	color: var(--primary);
	font-family: var(--font-heading);
	font-size: var(--text-base);
	font-weight: var(--weight-heavy);
	line-height: var(--lh-tight);
}

.roarr-extras-card__body p + p {
	margin-top: var(--space-8);
}

@media (min-width: 768px) {
	.roarr-extras__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* -- src/blocks/faq.css (canonical component source) -- */
/**
 * FAQ accordion.
 *
 * One mobile-first layout owns every placement. The block is stacked through
 * tablet widths, becomes the reference two-column heading/list composition on
 * desktop, and stays bounded at the site container on ultrawide screens.
 * Legacy centered/divided/full attributes are intentionally presentation-only
 * no-ops so saved blocks remain valid without changing the public layout.
 */

.faq-accordion {
	box-sizing: border-box;
	width: calc(100% - var(--space-48));
	max-width: var(--container-width, 1240px);
	margin-top: var(--space-48);
	margin-inline: auto;
	padding-top: var(--space-32);
	border-top: 1px solid var(--border-light);
}

.roarr-section .faq-accordion {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* Approved section-inner wrappers already supply the responsive page gutter. */
.roarr-section__inner > .faq-accordion {
	width: 100%;
}
.faq-accordion > .leaf-heading {
	min-width: 0;
	margin-bottom: var(--space-24);
}

.faq-accordion__items {
	list-style: none;
	width: 100%;
	min-width: 0;
	padding: 0;
	margin: 0;
	max-width: none;
}

/* Reference layout: heading pinned left and questions in the wider right
   column. CSS makes the decision; editors never select a layout variant. */
@media (min-width: 1024px) {
	.faq-accordion {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		column-gap: clamp(var(--space-48), 5vw, var(--space-80));
		align-items: start;
	}

	.faq-accordion > .leaf-heading {
		margin-bottom: 0;
	}
}

/* Keep source casing on the FAQ heading accent so "FAQs" reads as written
   instead of being shouted to "FAQS" by the uppercase heading transform. */

:is(.roarr-site-main, .editor-styles-wrapper) .faq-accordion .leaf-heading em {
	color: var(--primary);
	font-style: normal;
	text-transform: none;
}

.faq-accordion__item {
	min-width: 0;
	border-top: 1px solid var(--border-light);
}

.faq-accordion__item:last-child {
	border-bottom: 1px solid var(--border-light);
}

.faq-accordion__item details > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	width: 100%;
	min-width: 0;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-16);
	padding: var(--space-24) 0;
	font-family: var(--font-body);
	font-weight: var(--weight-bold);
	font-size: var(--text-base);
	line-height: var(--lh-normal);
	letter-spacing: 0;
	color: var(--text-primary);
	transition: color 0.18s ease;
}

.faq-accordion__item details > summary span:first-child {
	min-width: 0;
	overflow-wrap: anywhere;
}

.faq-accordion__item details > summary::-webkit-details-marker,
.faq-accordion__item details > summary::marker {
	display: none;
	content: "";
}

.faq-accordion__item details > summary:hover {
	color: var(--primary);
}

.faq-accordion__item details > summary:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: var(--space-8);
	border-radius: var(--radius-xs);
}

.faq-accordion__chev {
	font-family: var(--font-body);
	font-weight: var(--weight-regular);
	font-size: var(--h3);
	line-height: var(--lh-solid);
	color: var(--secondary);
	width: var(--space-32);
	text-align: center;
	flex-shrink: 0;
	transition: transform 0.25s var(--ease);
	display: inline-block;
}

.faq-accordion__item details[open] > summary .faq-accordion__chev {
	transform: rotate(45deg);
}

.faq-accordion__answer {
	display: grid;
	gap: var(--space-16);
	min-width: 0;
	padding: 0 0 var(--space-24);
	font-family: var(--font-body);
	font-weight: var(--weight-regular);
	font-size: var(--wp--preset--font-size--body-md);
	line-height: var(--lh-loose);
	color: var(--text-secondary);
	max-width: calc(var(--space-96) * 8);
	overflow-wrap: anywhere;
}

.faq-accordion__answer p {
	margin: 0;
}

.faq-accordion__answer a {
	color: var(--primary);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 0.18s ease;
}

.faq-accordion__answer a:hover {
	color: var(--text-primary);
}

@media (min-width: 768px) {
	.faq-accordion {
		width: calc(100% - var(--space-64));
		margin-top: var(--space-64);
		padding-top: var(--space-48);
	}

	.roarr-section__inner > .faq-accordion {
		width: 100%;
	}

	.faq-accordion__item details > summary {
		font-size: var(--text-base);
		padding: var(--space-24) 0;
	}

	.faq-accordion__chev {
		font-size: var(--h3);
		width: var(--space-32);
	}
}

@media (min-width: 1024px) {
	.faq-accordion {
		width: calc(100% - var(--space-96));
	}

	.roarr-section__inner > .faq-accordion {
		width: 100%;
	}
}

/* -- src/blocks/feature-card.css (canonical component source) -- */
/**
 * roarr/feature-card — ported verbatim from design-reference/mocks/css/styles.css
 * (.roarr-feature-card--media base + --story override). See card-grid/style.css
 * for the token-alias caveat.
 */

.roarr-feature-card--media {
	position: relative;
	overflow: hidden;
	display: grid;
	align-items: end;
	min-height: calc(var(--space-96) * 3);
	border-radius: var(--radius-sm);
	background: var(--deep-forest);
	color: var(--text-on-dark);
	box-shadow: var(--shadow-soft);
}

.roarr-feature-card--media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--deep-forest) 92%, transparent), color-mix(in srgb, var(--deep-forest) 52%, transparent) 48%, color-mix(in srgb, var(--deep-forest) 12%, transparent)),
		linear-gradient(180deg, color-mix(in srgb, var(--deep-forest) 12%, transparent), color-mix(in srgb, var(--deep-forest) 28%, transparent));
	pointer-events: none;
}

.roarr-feature-card--media > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.roarr-feature-card__content {
	position: relative;
	z-index: 2;
	display: grid;
	gap: var(--space-16);
	width: min(100% - calc(var(--space-24) * 2), calc(var(--space-120) * 4 + var(--space-80)));
	padding: var(--panel-padding-mobile);
}

.roarr-tag {
	justify-self: start;
	padding: var(--space-8) var(--space-16);
	border-radius: var(--radius-xs);
	background: var(--amber);
	color: var(--text-on-dark);
	font-size: var(--text-sm);
	font-weight: var(--weight-heavy);
	line-height: var(--lh-solid);
	text-transform: uppercase;
}

.roarr-feature-card--media h2 {
	color: var(--text-on-dark);
	font-size: var(--h2);
	line-height: var(--lh-tight);
	letter-spacing: 0;
}

.roarr-feature-card--media p {
	max-width: 34ch;
	color: var(--text-on-dark);
	font-size: var(--text-base);
	font-weight: var(--weight-medium);
	line-height: var(--lh-relaxed);
}

.roarr-feature-card--media .btn {
	justify-self: start;
	border-radius: var(--radius-sm);
	font-weight: var(--weight-heavy);
}

/* --story override: lighter meta line, no tag/button, tighter measure. */
.roarr-feature-card--story h2 {
	max-width: 9em;
	font-size: var(--h2);
}

.roarr-feature-card--story .roarr-feature-card__meta {
	margin: 0;
	color: var(--text-secondary-dark);
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	line-height: var(--lh-snug);
}

.roarr-feature-card--story .roarr-feature-card__content {
	gap: var(--space-8);
	width: min(100% - calc(var(--space-24) * 2), calc(var(--space-120) * 4));
	padding: var(--space-24);
}

.roarr-feature-card--story p:not(.roarr-feature-card__meta) {
	max-width: 28ch;
	font-size: var(--text-sm);
	line-height: var(--lh-normal);
}

@media (min-width: 768px) {
	.roarr-feature-card--story {
		min-height: calc(var(--space-96) * 3 + var(--space-32));
	}

	.roarr-feature-card--story .roarr-feature-card__content {
		gap: var(--space-16);
		width: min(100% - calc(var(--space-24) * 2), calc(var(--space-120) * 4 + var(--space-80)));
		padding: var(--panel-padding-tablet);
	}

	.roarr-feature-card--story h2 {
		max-width: 11em;
		font-size: var(--h1);
	}

	.roarr-feature-card--story p:not(.roarr-feature-card__meta) {
		max-width: 34ch;
		font-size: var(--text-base);
		line-height: var(--lh-relaxed);
	}
}

@media (min-width: 1024px) {
	.roarr-feature-card--story .roarr-feature-card__content {
		padding: var(--space-48);
	}
}

/* -- src/blocks/forms.css (canonical component source) -- */
/**
 * roarr/form (plan 11 Stage 2) — the two marketing forms rendered where the
 * block sits: ContactForm (.roarr-contact-sheet / .roarr-form, ported
 * byte-for-byte from design-reference/mocks/contact-us.html) and
 * NewsletterForm (.roarr-newsletter-form, an in-page field variant of the
 * mock's .site-footer__newsletter-field, distinct from the site FOOTER's own
 * static chrome in chrome.css). Design tokens only, 8px grid.
 */

/* ── Contact sheet ─────────────────────────────────────────── */

.roarr-contact-section {
  padding-top: 0;
  overflow: visible;
}

.roarr-contact-sheet {
  width: min(100%, calc(var(--space-128) * 8));
  margin-inline: auto;
  margin-top: calc(-1 * var(--space-80));
  position: relative;
  isolation: isolate;
  z-index: 4;
  background-color: var(--card-on-light);
  background-image:
    linear-gradient(
      color-mix(in srgb, var(--card-on-light) 12%, transparent),
      color-mix(in srgb, var(--card-on-light) 12%, transparent)
    ),
    url("assets/img/decor/form-paper-pencil-tile-v1.webp");
  background-position: center, left top;
  background-repeat: no-repeat, repeat;
  background-size:
    100% 100%,
    clamp(384px, 70vw, 768px) auto;
  border: 1px solid color-mix(in srgb, var(--primary-dark) 22%, var(--border-light));
  border-radius: var(--radius-lg);
  box-shadow:
    var(--shadow-paper-panel-highlight),
    0 28px 64px color-mix(in srgb, var(--deep-forest) 12%, transparent);
  overflow: hidden;
}

.roarr-contact-sheet::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image:
    url("assets/img/decor/form-compass-pencil-v1.webp"),
    url("assets/img/decor/form-foliage-fern-pencil-v1.webp"),
    url("assets/img/decor/form-foliage-sprig-pencil-v1.webp"),
    url("assets/img/decor/form-foliage-fern-pencil-v1.webp");
  background-position:
    right -52px top -48px,
    left -82px top 30%,
    right -48px top 46%,
    left -50px bottom -52px;
  background-repeat: no-repeat;
  background-size:
    clamp(112px, 35vw, 156px) auto,
    clamp(176px, 55vw, 224px) auto,
    clamp(96px, 30vw, 136px) auto,
    clamp(152px, 48vw, 208px) auto;
  mix-blend-mode: multiply;
  opacity: 0.32;
  pointer-events: none;
}

.roarr-contact-sheet::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: var(--space-8);
  border: 1px solid color-mix(in srgb, var(--primary-dark) 18%, transparent);
  border-radius: calc(var(--radius-lg) - var(--space-4));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--white) 42%, transparent);
  pointer-events: none;
}

.roarr-contact-sheet__body {
  position: relative;
  z-index: 1;
  padding: var(--space-32) var(--space-24) var(--space-40);
  background: color-mix(in srgb, var(--card-on-light) 12%, transparent);
}

.roarr-contact-sheet .roarr-form {
  width: min(100%, calc(var(--space-128) * 7));
}

.roarr-leaf-heading--center {
  justify-content: center;
  text-align: center;
  margin-bottom: var(--space-24);
}

@media (min-width: 768px) {
  .roarr-contact-sheet::before {
    background-position:
      right -64px top -60px,
      left -112px top 31%,
      right -56px top 44%,
      left -78px bottom -72px;
    background-size:
      184px auto,
      248px auto,
      148px auto,
      238px auto;
    opacity: 0.29;
  }

  .roarr-contact-sheet__body {
    padding: var(--space-40) var(--space-48) var(--space-48);
  }
}

@media (min-width: 1024px) {
  .roarr-contact-sheet::before {
    background-position:
      right -72px top -72px,
      left -124px top 30%,
      right -60px top 43%,
      left -84px bottom -76px;
    background-size:
      224px auto,
      288px auto,
      176px auto,
      296px auto;
    opacity: 0.26;
  }

  .roarr-contact-sheet__body {
    padding: var(--space-48) var(--space-64) var(--space-56);
  }
}

@media (max-width: 640px) {
  .roarr-contact-sheet {
    margin-top: calc(-1 * var(--space-64));
  }
}

/* Flat variant — sheet sits inside its own normally-padded section, no
   hero/section straddle (used when the sheet isn't directly under a hero). */
.roarr-contact-sheet.roarr-contact-sheet--flat {
  margin-top: 0;
}

/* ── Contact form ──────────────────────────────────────────── */

.roarr-form {
  width: min(100%, calc(var(--space-128) * 6));
  margin-inline: auto;
}

.roarr-form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
}

.roarr-form__field {
  display: grid;
  gap: var(--space-8);
  min-width: 0;
}

.roarr-form__field--full {
  grid-column: 1 / -1;
}

.roarr-form__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--lh-normal);
  color: var(--text-primary);
}

.roarr-form__optional {
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
}

.roarr-form__control {
  width: 100%;
  min-height: var(--space-48);
  padding: var(--space-16) var(--space-16);
  border: 1px solid color-mix(in srgb, var(--deep-forest) 20%, var(--border-light));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--white) 94%, var(--card-on-light));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--white) 68%, transparent),
    0 1px 2px color-mix(in srgb, var(--deep-forest) 6%, transparent);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
}

textarea.roarr-form__control {
  min-height: calc(var(--space-96) + var(--space-16));
  resize: vertical;
}

.roarr-form__control:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-color: var(--primary);
}

.roarr-form__control[aria-invalid='true'] {
  border-color: var(--error);
}

.roarr-form__field-error {
  color: var(--error);
  font-size: var(--text-xs);
  line-height: var(--lh-normal);
}

.roarr-form__error {
  margin: 0 0 var(--space-16);
  color: var(--error);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
}

.roarr-form__success {
  margin: 0 0 var(--space-16);
  color: var(--success);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
}

.roarr-form__check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  margin-top: var(--space-24);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--text-secondary);
}

.roarr-form__check input {
  width: var(--space-20);
  height: var(--space-20);
  flex: 0 0 var(--space-20);
  accent-color: var(--primary);
}

.roarr-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16) var(--space-24);
  margin-top: var(--space-24);
}

.roarr-form__actions--center {
  justify-content: center;
}

.roarr-form__note {
  margin: var(--space-16) 0 0;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  line-height: var(--lh-normal);
}

.roarr-form__note a {
  color: var(--primary-dark);
  font-weight: var(--weight-bold);
}

@media (max-width: 767px) {
  .roarr-form__actions {
    align-items: stretch;
  }

  .roarr-form__actions .btn {
    min-height: var(--button-min-height-lg);
  }

  .roarr-form__note {
    flex-basis: 100%;
  }
}

@media (min-width: 768px) {
  .roarr-form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-24);
  }
}

/* ── In-page newsletter form ───────────────────────────────── */

.roarr-newsletter-form {
  display: grid;
  gap: var(--space-8);
  width: min(100%, calc(var(--space-120) * 4 + var(--space-40)));
  margin-inline: auto;
}

.roarr-newsletter-form__field {
  display: grid;
  grid-template-columns: var(--space-32) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
  min-height: var(--space-56);
  padding: var(--space-8) var(--space-8) var(--space-8) var(--space-16);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--white);
  transition: border-color var(--speed) var(--ease);
}

.roarr-newsletter-form__field:focus-within {
  border-color: var(--primary);
}

.roarr-newsletter-form__field svg,
.roarr-newsletter-form__field .roarr-generated-icon {
  width: var(--space-32);
  height: var(--space-32);
  color: var(--primary);
}

.roarr-newsletter-form__field input {
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-base);
  outline: 0;
}

.roarr-newsletter-form__field button {
  grid-column: 1 / -1;
  min-height: var(--space-48);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--amber);
  color: var(--deep-forest);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--lh-solid);
  text-transform: uppercase;
  transition:
    background var(--speed) var(--ease),
    transform var(--speed) var(--ease);
}

.roarr-newsletter-form__field button:hover,
.roarr-newsletter-form__field button:focus-visible {
  background: var(--yellow);
  transform: translateY(calc(var(--space-4) * -0.5));
}

.roarr-newsletter-form .roarr-form__note {
  text-align: center;
}

.roarr-newsletter-form .roarr-form__note a {
  color: var(--primary-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

@media (min-width: 640px) {
  .roarr-newsletter-form__field {
    grid-template-columns: var(--space-32) minmax(0, 1fr) minmax(calc(var(--space-96) + var(--space-24)), auto);
  }

  .roarr-newsletter-form__field button {
    grid-column: auto;
    padding-inline: var(--space-24);
  }
}

/* -- src/blocks/glance-list.css (canonical component source) -- */
/**
 * roarr/glance-list — identical to plugins/roarr-blocks/src/glance-list/style.css,
 * ported from design-reference/mocks/css/styles.css.
 */

.roarr-glance-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
}

.roarr-glance-list li {
	display: flex;
	align-items: center;
	gap: var(--space-16);
	padding-block: var(--space-16);
	border-top: 1px solid var(--border-light);
	color: var(--text-primary);
	font-size: var(--text-base);
	font-weight: var(--weight-medium);
	line-height: var(--lh-normal);
}

.roarr-glance-list--plain li {
	align-items: flex-start;
}

/* Prose list items can contain a bold lead-in followed by a full sentence.
 * Reserve the icon slot instead of making each inline fragment a flex item,
 * so marketing copy wraps as one readable line of prose at every width. */
:is(.roarr-glance-list--prose, .is-style-roarr-glance-list-prose) li {
	position: relative;
	display: block;
	min-block-size: var(--icon-badge-size-md);
	padding-inline-start: calc(var(--icon-badge-size-md) + var(--space-16));
	overflow-wrap: anywhere;
}

:is(.roarr-glance-list--prose, .is-style-roarr-glance-list-prose)
	li
	> :is(.roarr-icon, .roarr-icon-edit, [data-type="roarr/icon"], .wp-block-roarr-icon) {
	position: absolute;
	inset-block-start: var(--space-16);
	inset-inline-start: 0;
	margin: 0;
}

:is(.roarr-glance-list--prose, .is-style-roarr-glance-list-prose)
	li:first-child
	> :is(.roarr-icon, .roarr-icon-edit, [data-type="roarr/icon"], .wp-block-roarr-icon) {
	inset-block-start: 0;
}

.roarr-glance-list li:first-child {
	padding-top: 0;
	border-top: 0;
}

.roarr-glance-list li:last-child {
	padding-bottom: 0;
}

.roarr-glance-list__icon {
	display: inline-grid;
	place-items: center;
	flex: 0 0 var(--icon-badge-size-md);
	width: var(--icon-badge-size-md);
	height: var(--icon-badge-size-md);
	border: 1px solid var(--icon-badge-border);
	border-radius: var(--radius-pill);
	background: var(--icon-badge-bg);
	color: var(--icon-badge-color);
}

.roarr-ui-icon {
	display: block;
	width: var(--icon-badge-glyph-md);
	height: var(--icon-badge-glyph-md);
	overflow: visible;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.roarr-glance-list a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.roarr-glance-list a:hover,
.roarr-glance-list a:focus-visible {
	color: var(--primary-hover);
}

.roarr-section--dark-forest-break .roarr-glance-list li {
	color: var(--text-on-dark);
	border-top-color: color-mix(in srgb, var(--text-on-dark) 18%, transparent);
}

.roarr-section--dark-forest-break .roarr-glance-list a {
	color: var(--primary);
}

/**
 * --stepped — "Plan your ROARR! adventure" step list (ported from the mock's
 * .roarr-plan-day__steps). Bare glyph (no badge circle/border/background) +
 * a bold uppercase label + a muted description line, instead of the default
 * badged icon + single plain text line.
 */
.roarr-glance-list--stepped {
	gap: 0;
}

.roarr-glance-list--stepped li {
	display: grid;
	grid-template-columns: var(--icon-badge-size-xl) minmax(0, 1fr);
	align-items: center;
}

.roarr-glance-list--stepped .roarr-glance-list__icon {
	border: 0;
	border-radius: 0;
	background: none;
	flex-basis: var(--icon-badge-size-xl);
	width: var(--icon-badge-size-xl);
	height: var(--icon-badge-size-xl);
	color: var(--icon-badge-color);
}

.roarr-glance-list--stepped .roarr-glance-list__icon .roarr-ui-icon {
	width: var(--icon-badge-glyph-lg);
	height: var(--icon-badge-glyph-lg);
}

.roarr-glance-list--stepped .roarr-glance-list__icon .roarr-generated-icon {
	/* generated icon PNGs are 64px with baked-in transparent padding — scale
	   up so the glyph fills the badge box and reads at the intended size. */
	width: var(--icon-art-size-xl);
	height: var(--icon-art-size-xl);
	transform: scale(1.35);
	transform-origin: center;
}

.roarr-glance-list--stepped__label {
	display: block;
	color: var(--text-primary);
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: var(--weight-heavy);
	line-height: var(--lh-tight);
	text-transform: uppercase;
}

.roarr-glance-list--stepped__desc {
	display: block;
	margin-top: var(--space-8);
	color: var(--text-secondary);
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	line-height: var(--lh-normal);
}

.roarr-section--dark-forest-break .roarr-glance-list--stepped__label {
	color: var(--text-on-dark);
}

.roarr-section--dark-forest-break .roarr-glance-list--stepped__desc {
	color: color-mix(in srgb, var(--text-on-dark) 80%, transparent);
}

/* -- src/blocks/home-decor.css (canonical component source) -- */
/* home-decor.css — Home-only decorative elements ported from the mocks.
   Airship + attraction stamps sit in the "Explore our attractions" band;
   pterosaurs fly over the "Plan Your Adventure" map.
   Ported from design-reference/mocks/css/styles.css. No extra decorative DOM
   hooks exist in WordPress, so artwork is rendered on existing blocks. */

.roarr-section:has(.roarr-card-grid--home-attractions) {
  position: relative;
  --cards-w: min(100% - 2 * var(--gutter-desktop), var(--container));
}

.roarr-card-grid--home-attractions {
  position: relative;
}

/* Ride-name stamps belong to real content anchors, not the changing card-grid
   margins. Raptor stays level with the heading at its outer edge; Swing stays
   level with the CTA at the opposite outer edge. Phones drop both marks. */
.roarr-section:has(.roarr-card-grid--home-attractions) > :is(.roarr-leaf-heading, .roarr-button-row) {
  position: relative;
  z-index: 2;
}

.roarr-section:has(.roarr-card-grid--home-attractions) > .roarr-leaf-heading::after,
.roarr-section:has(.roarr-card-grid--home-attractions) > .roarr-button-row::before {
  content: "";
  position: absolute;
  display: block;
  aspect-ratio: 1 / 1;
  pointer-events: none;
  background: center / contain no-repeat;
  transform-origin: center;
}

.roarr-section:has(.roarr-card-grid--home-attractions) > .roarr-leaf-heading::after {
  background-image: url("assets/img/decor/stamp-raptor-contraptor.png");
  transform: translateY(-50%) rotate(-12deg);
}

.roarr-section:has(.roarr-card-grid--home-attractions) > .roarr-button-row::before {
  background-image: url("assets/img/decor/stamp-swing-o-saurus.png");
  transform: translateY(-50%) rotate(12deg);
}

.roarr-section:has(.roarr-card-grid--home-attractions) > .roarr-button-row > .wp-block-button:only-child {
  flex: 0 1 auto;
  width: auto;
}

.roarr-section:has(.roarr-card-grid--home-attractions) > .roarr-button-row > .wp-block-button:only-child > .wp-block-button__link {
  width: auto;
  min-width: min(100%, calc(var(--space-120) + var(--space-40)));
}

.roarr-card-grid--home-attractions::before,
.roarr-card-grid--home-attractions::after {
  content: none;
}

@media (max-width: 639px) {
  .roarr-section:has(.roarr-card-grid--home-attractions)::before,
  .roarr-section:has(.roarr-card-grid--home-attractions)::after {
    content: "";
    position: absolute;
    z-index: 1;
    display: block;
    pointer-events: none;
    background: center / contain no-repeat;
  }

  .roarr-section:has(.roarr-card-grid--home-attractions)::before {
    left: calc(3vw - var(--space-24));
    top: calc(var(--space-32) + var(--space-24));
    width: 29vw;
    aspect-ratio: 1448 / 1086;
    background-image: url("assets/img/decor/airship.webp");
    transform: rotate(-8deg);
  }

  .roarr-section:has(.roarr-card-grid--home-attractions)::after {
    top: calc(var(--space-16) + var(--space-4));
    right: 22vw;
    width: 24vw;
    aspect-ratio: 1672 / 941;
    background-image: url("assets/img/decor/pterosaur-2.webp");
  }

  .roarr-section:has(.roarr-card-grid--home-attractions) > .roarr-leaf-heading::after,
  .roarr-section:has(.roarr-card-grid--home-attractions) > .roarr-button-row::before {
    content: none;
    display: none;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .roarr-section:has(.roarr-card-grid--home-attractions) {
    /* Reserve a proper sky lane for both the airship and flier. Without this
       tablet headings rise into the decoration boxes. */
    padding-top: calc(var(--section-padding-tablet) + var(--space-112));
  }

  .roarr-section:has(.roarr-card-grid--home-attractions)::before,
  .roarr-section:has(.roarr-card-grid--home-attractions)::after {
    content: "";
    position: absolute;
    z-index: 1;
    display: block;
    pointer-events: none;
    background: center / contain no-repeat;
  }

  .roarr-section:has(.roarr-card-grid--home-attractions)::before {
    left: calc(-1 * var(--space-8));
    top: var(--space-56);
    width: calc(var(--space-120) + var(--space-48));
    aspect-ratio: 1448 / 1086;
    background-image: url("assets/img/decor/airship.webp");
    transform: rotate(-8deg);
  }

  .roarr-section:has(.roarr-card-grid--home-attractions)::after {
    top: var(--space-40);
    right: calc(50% - var(--space-32));
    width: calc(var(--space-120) + var(--space-24));
    aspect-ratio: 1672 / 941;
    background-image: url("assets/img/decor/pterosaur-2.webp");
  }

  .roarr-section:has(.roarr-card-grid--home-attractions) > .roarr-leaf-heading::after {
    top: 50%;
    right: calc(-1 * var(--space-16));
    width: var(--space-120);
  }

  .roarr-section:has(.roarr-card-grid--home-attractions) > .roarr-button-row::before {
    top: 50%;
    left: var(--space-16);
    width: var(--space-120);
  }

}

@media (min-width: 1024px) {
  /* ── Attractions band: steampunk airship ────────────────────────── */
  .roarr-section:has(.roarr-card-grid--home-attractions)::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: calc((100% - var(--cards-w)) / 2 - var(--space-24));
    top: calc(var(--canopy-h) - var(--space-112) - var(--space-4));
    width: calc(var(--cards-w) * 0.214);
    aspect-ratio: 1448 / 1086;
    background: center / contain no-repeat url("assets/img/decor/airship.webp");
    transform: rotate(-8deg);
    transform-origin: center;
    pointer-events: none;
  }

  .roarr-section:has(.roarr-card-grid--home-attractions) > .roarr-leaf-heading::after {
    top: calc(50% - 5px);
    right: calc(-1 * var(--space-32));
    width: min(calc(var(--space-144) + var(--space-40)), 167px);
  }

  .roarr-section:has(.roarr-card-grid--home-attractions) > .roarr-button-row::before {
    top: 50%;
    left: max(var(--space-32), calc((100% - 1440px) / 2 + var(--space-32)));
    width: min(calc(var(--space-144) + var(--space-40)), 167px);
  }

}

/* ── Plan-day sky: pterosaur silhouettes over the map ───────────── */
:is(.roarr-section:has(:is(.roarr-split--map, .is-style-roarr-split-map)), .roarr-section:has(.roarr-glance-list)) {
  position: relative;
  --cards-w: min(100% - var(--space-96), var(--container-width));
}
:is(.roarr-section:has(:is(.roarr-split--map, .is-style-roarr-split-map)), .roarr-section:has(.roarr-glance-list))::before,
:is(.roarr-section:has(:is(.roarr-split--map, .is-style-roarr-split-map)), .roarr-section:has(.roarr-glance-list))::after {
  content: "";
  position: absolute;
  z-index: 1;
  display: block;
  aspect-ratio: 1672 / 941;
  pointer-events: none;
  background: center / contain no-repeat;
}
:is(.roarr-section:has(:is(.roarr-split--map, .is-style-roarr-split-map)), .roarr-section:has(.roarr-glance-list))::before {
  background-image: url("assets/img/decor/pterosaur-1.webp");
}
:is(.roarr-section:has(:is(.roarr-split--map, .is-style-roarr-split-map)), .roarr-section:has(.roarr-glance-list))::after {
  background-image: url("assets/img/decor/pterosaur-2.webp");
}
:is(.roarr-split--map, .is-style-roarr-split-map, .roarr-split:has(.roarr-glance-list)) {
  position: relative;
}
:is(.roarr-split--map, .is-style-roarr-split-map, .roarr-split:has(.roarr-glance-list))::before {
  /* Two section-anchored fliers are enough. The former third flier was tied
     to the split and therefore moved with the map/content instead of the sky
     lane, which made reliable text and media clearance impossible. */
  content: none;
  position: absolute;
  z-index: 2;
  display: block;
  aspect-ratio: 1672 / 941;
  pointer-events: none;
  background: center / contain no-repeat url("assets/img/decor/pterosaur-3.webp");
}

@media (max-width: 639px) {
  :is(.roarr-section:has(:is(.roarr-split--map, .is-style-roarr-split-map)), .roarr-section:has(.roarr-glance-list))::before,
  :is(.roarr-section:has(:is(.roarr-split--map, .is-style-roarr-split-map)), .roarr-section:has(.roarr-glance-list))::after,
  :is(.roarr-split--map, .is-style-roarr-split-map, .roarr-split:has(.roarr-glance-list))::before {
    opacity: 0.9;
  }

  :is(.roarr-section:has(:is(.roarr-split--map, .is-style-roarr-split-map)), .roarr-section:has(.roarr-glance-list))::before {
    top: calc(var(--canopy-h) + var(--space-8));
    right: var(--space-40);
    width: 18vw;
  }

  :is(.roarr-section:has(:is(.roarr-split--map, .is-style-roarr-split-map)), .roarr-section:has(.roarr-glance-list))::after {
    top: var(--canopy-h);
    left: 40vw;
    width: 24vw;
  }
}

/* ── Explicit interior three-bird heading flights ──────────────────
   Saved cream sections choose which side carries the pair. A single bird
   sits opposite it, giving every nominated heading a balanced 2 + 1 flight
   without relying on section order or a particular heading class. The whole
   flight stays in reserved sky padding above the section content. */
:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section:is(
    .roarr-section--cream,
    .roarr-section--parchment,
    .is-style-roarr-bg-cream,
    .is-style-roarr-bg-parchment
  ):is(.roarr-birds--duo-left, .roarr-birds--duo-right) {
  position: relative;
  padding-top: calc(var(--section-padding-mobile) + var(--space-80));
  --roarr-bird-cluster-width: clamp(92px, 29vw, 116px);
  --roarr-bird-cluster-height: clamp(54px, 17vw, 68px);
  --roarr-bird-single-width: clamp(48px, 15vw, 64px);
  --roarr-bird-single-height: clamp(28px, 9vw, 38px);
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section:is(.roarr-birds--duo-left, .roarr-birds--duo-right)::before,
:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section:is(.roarr-birds--duo-left, .roarr-birds--duo-right)::after {
  content: "";
  position: absolute;
  z-index: 1;
  display: block;
  aspect-ratio: auto;
  pointer-events: none;
  background-color: transparent;
  background-repeat: no-repeat;
  opacity: 0.9;
}

@media (min-width: 640px) and (max-width: 1023px) {
  :is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
    .roarr-section:is(.roarr-birds--duo-left, .roarr-birds--duo-right) {
    padding-top: calc(var(--section-padding-tablet) + var(--space-80));
    --roarr-bird-cluster-width: 132px;
    --roarr-bird-cluster-height: 78px;
    --roarr-bird-single-width: 72px;
    --roarr-bird-single-height: 42px;
  }

}

@media (min-width: 1024px) {
  :is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
    .roarr-section:is(.roarr-birds--duo-left, .roarr-birds--duo-right) {
    padding-top: calc(var(--section-padding-desktop) + var(--space-64));
    --roarr-bird-cluster-width: 168px;
    --roarr-bird-cluster-height: 98px;
    --roarr-bird-single-width: 86px;
    --roarr-bird-single-height: 50px;
  }

}

@media (min-width: 640px) and (max-width: 1023px) {
  :is(.roarr-section:has(:is(.roarr-split--map, .is-style-roarr-split-map)), .roarr-section:has(.roarr-glance-list))::before,
  :is(.roarr-section:has(:is(.roarr-split--map, .is-style-roarr-split-map)), .roarr-section:has(.roarr-glance-list))::after,
  :is(.roarr-split--map, .is-style-roarr-split-map, .roarr-split:has(.roarr-glance-list))::before {
    opacity: 0.9;
  }

  :is(.roarr-section:has(:is(.roarr-split--map, .is-style-roarr-split-map)), .roarr-section:has(.roarr-glance-list))::before {
    top: calc(var(--canopy-h) + var(--space-24));
    left: calc(50% - var(--space-144));
    width: var(--space-96);
  }

  :is(.roarr-section:has(:is(.roarr-split--map, .is-style-roarr-split-map)), .roarr-section:has(.roarr-glance-list))::after {
    top: calc(var(--canopy-h) + var(--space-16));
    right: calc(50% - var(--space-144));
    width: var(--space-120);
  }
}

@media (min-width: 1024px) {
  :is(.roarr-section:has(:is(.roarr-split--map, .is-style-roarr-split-map)), .roarr-section:has(.roarr-glance-list))::before {
    /* ptero-1 - small, upper-right over the map */
    top: calc(var(--canopy-h) + var(--space-64));
    right: calc((100% - var(--cards-w)) / 2 + var(--cards-w) * 0.126);
    width: calc(var(--cards-w) * 0.057);
  }

  :is(.roarr-section:has(:is(.roarr-split--map, .is-style-roarr-split-map)), .roarr-section:has(.roarr-glance-list))::after {
    /* ptero-2 - medium, right of content centre */
    top: calc(var(--canopy-h) + var(--space-64));
    left: calc((100% - var(--cards-w)) / 2 + var(--cards-w) * 0.534);
    width: calc(var(--cards-w) * 0.139);
  }

}

/* ── Interior light-section heading flight ─────────────────────────
   The three-bird map scene above is a homepage exception. On interior pages,
   cream and parchment sections with a section heading use exactly two fliers
   in the clear strip above that heading. Never let the third, map-attached
   flier or any bird artwork leak onto a coloured section. */
:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section:not(:is(.roarr-section--cream, .roarr-section--parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment))
  :is(.roarr-split--map, .is-style-roarr-split-map, .roarr-split:has(.roarr-glance-list))::before,
:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section:not(:is(.roarr-section--cream, .roarr-section--parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment)):has(:is(.roarr-split--map, .is-style-roarr-split-map, .roarr-glance-list))::before,
:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section:not(:is(.roarr-section--cream, .roarr-section--parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment)):has(:is(.roarr-split--map, .is-style-roarr-split-map, .roarr-glance-list))::after {
  content: none;
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section:is(.roarr-section--cream, .roarr-section--parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment)
  :is(.roarr-split--map, .is-style-roarr-split-map, .roarr-split:has(.roarr-glance-list))::before {
  content: none;
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section:is(.roarr-section--cream, .roarr-section--parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list)) {
  position: relative;
  --cards-w: min(100% - var(--space-96), var(--container-width));
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section:is(.roarr-section--cream, .roarr-section--parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list))::before,
:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section:is(.roarr-section--cream, .roarr-section--parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list))::after {
  content: "";
  position: absolute;
  z-index: 1;
  display: block;
  aspect-ratio: 1672 / 941;
  pointer-events: none;
  background: center / contain no-repeat;
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section:is(.roarr-section--cream, .roarr-section--parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list))::before {
  background-image: url("assets/img/decor/pterosaur-1.webp");
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section:is(.roarr-section--cream, .roarr-section--parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list))::after {
  background-image: url("assets/img/decor/pterosaur-2.webp");
}

/* Every interior pair lives in a reserved sky lane. Per-section variables
   provide a small deterministic shuffle so repeated sections feel scattered
   without allowing either artwork box to approach content by less than 10px. */
:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section:is(.roarr-section--cream, .roarr-section--parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list))::before {
  top: var(--roarr-bird-one-top);
  right: auto;
  left: var(--roarr-bird-one-left);
  width: var(--roarr-bird-one-width);
  transform: rotate(var(--roarr-bird-one-rotate));
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section:is(.roarr-section--cream, .roarr-section--parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list))::after {
  top: var(--roarr-bird-two-top);
  right: var(--roarr-bird-two-right);
  left: auto;
  width: var(--roarr-bird-two-width);
  transform: rotate(var(--roarr-bird-two-rotate));
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section:is(.roarr-section--cream, .roarr-section--parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):nth-of-type(3n + 1):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list)) {
  --roarr-bird-one-left: 11%;
  --roarr-bird-one-top: var(--space-16);
  --roarr-bird-one-rotate: 4deg;
  --roarr-bird-two-right: 24%;
  --roarr-bird-two-top: calc(var(--space-24) + var(--space-4));
  --roarr-bird-two-rotate: -3deg;
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section:is(.roarr-section--cream, .roarr-section--parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):nth-of-type(3n + 2):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list)) {
  --roarr-bird-one-left: 31%;
  --roarr-bird-one-top: var(--space-32);
  --roarr-bird-one-rotate: -5deg;
  --roarr-bird-two-right: 9%;
  --roarr-bird-two-top: var(--space-12);
  --roarr-bird-two-rotate: 3deg;
}

@media (max-width: 639px) {
  :is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
    .roarr-section:is(.roarr-section--cream, .roarr-section--parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list)) {
    padding-top: calc(var(--section-padding-mobile) + var(--space-80));
    --roarr-bird-one-left: 14%;
    --roarr-bird-one-top: var(--space-32);
    --roarr-bird-one-width: 18vw;
    --roarr-bird-one-rotate: -3deg;
    --roarr-bird-two-right: 18%;
    --roarr-bird-two-top: var(--space-16);
    --roarr-bird-two-width: 22vw;
    --roarr-bird-two-rotate: 4deg;
  }

  :is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
    .roarr-section:is(.roarr-section--cream, .roarr-section--parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list))::before,
  :is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
    .roarr-section:is(.roarr-section--cream, .roarr-section--parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list))::after {
    opacity: 0.9;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  :is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
    .roarr-section:is(.roarr-section--cream, .roarr-section--parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list)) {
    padding-top: calc(var(--section-padding-tablet) + var(--space-96));
    --roarr-bird-one-left: 18%;
    --roarr-bird-one-top: var(--space-24);
    --roarr-bird-one-width: var(--space-80);
    --roarr-bird-one-rotate: -3deg;
    --roarr-bird-two-right: 14%;
    --roarr-bird-two-top: var(--space-12);
    --roarr-bird-two-width: calc(var(--space-96) + var(--space-8));
    --roarr-bird-two-rotate: 4deg;
  }

  :is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
    .roarr-section:is(.roarr-section--cream, .roarr-section--parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list))::before,
  :is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
    .roarr-section:is(.roarr-section--cream, .roarr-section--parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list))::after {
    opacity: 0.9;
  }
}

@media (min-width: 1024px) {
  :is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
    .roarr-section:is(.roarr-section--cream, .roarr-section--parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list)) {
    padding-top: calc(var(--section-padding-desktop) + var(--space-64));
    --roarr-bird-one-left: 22%;
    --roarr-bird-one-top: var(--space-32);
    --roarr-bird-one-width: calc(var(--cards-w) * 0.057);
    --roarr-bird-one-rotate: -3deg;
    --roarr-bird-two-right: 18%;
    --roarr-bird-two-top: var(--space-16);
    --roarr-bird-two-width: calc(var(--cards-w) * 0.12);
    --roarr-bird-two-rotate: 4deg;
  }

  :is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
    .roarr-section:is(.roarr-section--cream, .roarr-section--parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list))::before,
  :is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
    .roarr-section:is(.roarr-section--cream, .roarr-section--parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list))::after {
  }
}

/* The legacy two-bird selector above carries a :has() specificity boost.
   Reassert the explicit saved-block contract last so nominated sections use
   their three-bird composition whether or not their heading used a legacy
   trigger class. The repeated class attribute selector stays above the
   generated is-style bridge without changing which saved sections qualify. */
:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section[class][class]:is(.roarr-birds--duo-left, .roarr-birds--duo-right)::before,
:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section[class][class]:is(.roarr-birds--duo-left, .roarr-birds--duo-right)::after {
  aspect-ratio: auto;
  background-color: transparent;
  background-repeat: no-repeat;
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section[class][class].roarr-birds--duo-left::before,
:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section[class][class].roarr-birds--duo-right::after {
  width: var(--roarr-bird-cluster-width);
  height: var(--roarr-bird-cluster-height);
  background-image:
    url("assets/img/decor/pterosaur-2.webp"),
    url("assets/img/decor/pterosaur-3.webp");
  background-position:
    left top,
    right bottom;
  background-size:
    48% auto,
    54% auto;
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section[class][class].roarr-birds--duo-left::after,
:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section[class][class].roarr-birds--duo-right::before {
  width: var(--roarr-bird-single-width);
  height: var(--roarr-bird-single-height);
  background-image: url("assets/img/decor/pterosaur-1.webp");
  background-position: center;
  background-size: contain;
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section[class][class].roarr-birds--duo-left::before {
  top: var(--space-16);
  right: auto;
  left: 8%;
  transform: rotate(-3deg);
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section[class][class].roarr-birds--duo-left::after {
  top: var(--space-40);
  right: 12%;
  left: auto;
  transform: rotate(5deg);
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section[class][class].roarr-birds--duo-right::before {
  top: var(--space-40);
  right: auto;
  left: 12%;
  transform: rotate(-5deg);
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section[class][class].roarr-birds--duo-right::after {
  top: var(--space-16);
  right: 8%;
  left: auto;
  transform: rotate(3deg);
}

@media (min-width: 640px) and (max-width: 1023px) {
  :is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
    .roarr-section[class][class].roarr-birds--duo-left::before {
    left: 12%;
  }

  :is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
    .roarr-section[class][class].roarr-birds--duo-left::after {
    right: 16%;
  }

  :is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
    .roarr-section[class][class].roarr-birds--duo-right::before {
    left: 16%;
  }

  :is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
    .roarr-section[class][class].roarr-birds--duo-right::after {
    right: 12%;
  }
}

@media (min-width: 1024px) {
  :is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
    .roarr-section[class][class].roarr-birds--duo-left::before {
    left: max(8%, calc((100% - var(--container-width)) / 2));
  }

  :is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
    .roarr-section[class][class].roarr-birds--duo-left::after {
    right: max(13%, calc((100% - var(--container-width)) / 2 + var(--space-48)));
  }

  :is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
    .roarr-section[class][class].roarr-birds--duo-right::before {
    left: max(13%, calc((100% - var(--container-width)) / 2 + var(--space-48)));
  }

  :is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
    .roarr-section[class][class].roarr-birds--duo-right::after {
    right: max(8%, calc((100% - var(--container-width)) / 2));
  }
}

/* In a continuous run of cream/parchment sections, only the first section
   receives a flock. Later adjacent light sections keep their headings but do
   not repeat the sky decoration or its reserved top lane. This is structural,
   so editors do not need to remove the saved bird variant when sections move. */
:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section:is(.roarr-section--cream, .roarr-section--parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment)
  + .roarr-section[class][class]:is(.roarr-section--cream, .roarr-section--parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment)::before,
:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section:is(.roarr-section--cream, .roarr-section--parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment)
  + .roarr-section[class][class]:is(.roarr-section--cream, .roarr-section--parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment)::after {
  content: none;
  display: none;
  background-image: none;
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section:is(.roarr-section--cream, .roarr-section--parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment)
  + .roarr-section[class][class]:is(.roarr-section--cream, .roarr-section--parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list)):not(:is(.roarr-section--compact, .is-style-roarr-section-compact, .roarr-section--flush-top, .roarr-section-flush-top, .roarr-section--join-previous)) {
  padding-top: var(--section-padding-mobile);
}

@media (min-width: 640px) and (max-width: 1023px) {
  :is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
    .roarr-section:is(.roarr-section--cream, .roarr-section--parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment)
    + .roarr-section[class][class]:is(.roarr-section--cream, .roarr-section--parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list)):not(:is(.roarr-section--compact, .is-style-roarr-section-compact, .roarr-section--flush-top, .roarr-section-flush-top, .roarr-section--join-previous)) {
    padding-top: var(--section-padding-tablet);
  }
}

@media (min-width: 1024px) {
  :is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
    .roarr-section:is(.roarr-section--cream, .roarr-section--parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment)
    + .roarr-section[class][class]:is(.roarr-section--cream, .roarr-section--parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list)):not(:is(.roarr-section--compact, .is-style-roarr-section-compact, .roarr-section--flush-top, .roarr-section-flush-top, .roarr-section--join-previous)) {
    padding-top: var(--section-padding-desktop);
  }
}

/* FAQ sections never receive a flock, even when they start a new light-section
   run. Reset the reserved sky lane as well so the accordion heading follows
   the preceding content naturally instead of sitting below an empty bird gap. */
:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section[class][class][class]:is(.roarr-section--cream, .roarr-section--parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(> :is(.faq-accordion, .wp-block-roarr-faq))::before,
:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section[class][class][class]:is(.roarr-section--cream, .roarr-section--parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(> :is(.faq-accordion, .wp-block-roarr-faq))::after {
  content: none;
  display: none;
  background-image: none;
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section[class][class][class]:is(.roarr-section--cream, .roarr-section--parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(> :is(.faq-accordion, .wp-block-roarr-faq)) {
  padding-top: var(--section-padding-mobile);
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section[class][class][class]:is(.roarr-section--cream, .roarr-section--parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):is(.roarr-section--compact, .is-style-roarr-section-compact, .roarr-section--flush-top, .roarr-section-flush-top, .roarr-section--join-previous):has(> :is(.faq-accordion, .wp-block-roarr-faq)) {
  padding-top: var(--section-padding-compact-mobile);
}

@media (min-width: 640px) and (max-width: 1023px) {
  :is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
    .roarr-section[class][class][class]:is(.roarr-section--cream, .roarr-section--parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(> :is(.faq-accordion, .wp-block-roarr-faq)) {
    padding-top: var(--section-padding-tablet);
  }

  :is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
    .roarr-section[class][class][class]:is(.roarr-section--cream, .roarr-section--parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):is(.roarr-section--compact, .is-style-roarr-section-compact, .roarr-section--flush-top, .roarr-section-flush-top, .roarr-section--join-previous):has(> :is(.faq-accordion, .wp-block-roarr-faq)) {
    padding-top: var(--section-padding-compact-tablet);
  }
}

@media (min-width: 1024px) {
  :is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
    .roarr-section[class][class][class]:is(.roarr-section--cream, .roarr-section--parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(> :is(.faq-accordion, .wp-block-roarr-faq)) {
    padding-top: var(--section-padding-desktop);
  }

  :is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
    .roarr-section[class][class][class]:is(.roarr-section--cream, .roarr-section--parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):is(.roarr-section--compact, .is-style-roarr-section-compact, .roarr-section--flush-top, .roarr-section-flush-top, .roarr-section--join-previous):has(> :is(.faq-accordion, .wp-block-roarr-faq)) {
    padding-top: var(--section-padding-compact-desktop);
  }
}

/* -- src/blocks/home-hero.css (canonical component source) -- */
/**
 * roarr/home-hero — front-end + editor styles, ported verbatim (token-only)
 * from design-reference/mocks/css/styles.css (.roarr-home-hero rules). The
 * homepage-only video hero. See DESIGN.md — home is the one sanctioned
 * exception to the shared page-hero (§7 note): it has its own art-directed
 * media treatment page-hero never uses.
 */

.roarr-home-hero {
	position: relative;
	isolation: isolate;
	display: grid;
	align-items: end;
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
	padding: calc(var(--header-h) + var(--space-32)) var(--gutter-mobile) calc(var(--space-96) + var(--space-24));
	background: var(--deep-forest);
	color: var(--text-on-dark);
}

.roarr-home-hero--info-bar {
	/* extra clearance so hero CTAs clear the lifted 50/50 info bar + brush break */
	padding-bottom: calc(var(--space-128) + var(--space-64));
}

.roarr-home-hero__media,
.roarr-home-hero__shade {
	position: absolute;
	inset: 0;
}

.roarr-home-hero__media {
	z-index: -2;
	background: var(--deep-forest);
}

.roarr-home-hero .roarr-home-hero__video {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 58% center;
}

/* Client: keep the video bright — no darkening wash. Only a soft fade
   at the very bottom so the hero still blends into the section below. */
.roarr-home-hero__shade {
	z-index: -1;
	background: linear-gradient(
		180deg,
		transparent 0%,
		transparent 72%,
		color-mix(in srgb, var(--deep-forest) 55%, transparent) 90%,
		var(--deep-forest) 100%
	);
}

.roarr-home-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
}

.roarr-home-hero__content {
	display: grid;
	justify-items: center;
	gap: var(--space-24);
	width: min(100%, var(--container-wide));
	text-align: center;
}

.roarr-home-hero__title {
	max-width: min(100%, var(--container-wide));
	color: var(--text-on-dark);
	font-family: var(--font-brand);
	font-size: var(--display);
	font-weight: var(--weight-regular);
	font-synthesis: none;
	line-height: var(--lh-solid);
	letter-spacing: 0;
	text-transform: uppercase;
	text-wrap: balance;
	/* Adventure shadow treatment (brand kit p.27): white glyphs with a solid
	   black duplicate shifted down + left by 7% of cap height. */
	text-shadow: -0.07em 0.07em 0 var(--black);
}

.roarr-home-hero__title em {
	color: var(--primary);
	font-style: normal;
}

.roarr-home-hero__copy {
	max-width: min(100%, var(--container-wide));
	margin: 0;
	color: var(--text-on-dark);
	font-size: var(--text-lg);
	font-weight: var(--weight-medium);
	line-height: var(--lh-relaxed);
	text-shadow:
		0 1px 2px color-mix(in srgb, var(--deep-forest) 60%, transparent),
		0 6px 24px color-mix(in srgb, var(--deep-forest) 45%, transparent);
}

.roarr-home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-16);
	align-items: center;
	justify-content: center;
}

/* Keep the primary hero CTA legible in every link state. WordPress/browser
   link-state rules must never turn the lime button's label white. */
.roarr-home-hero__actions .btn--primary,
.roarr-home-hero__actions .btn--primary:visited,
.roarr-home-hero__actions .btn--primary:hover,
.roarr-home-hero__actions .btn--primary:focus-visible {
	color: var(--deep-forest);
}

.roarr-home-hero__actions .btn--light {
	border: 1px solid color-mix(in srgb, var(--text-on-dark) 36%, transparent);
	background: color-mix(in srgb, var(--deep-forest) 26%, transparent);
	color: var(--text-on-dark);
	box-shadow: none;
}

.roarr-home-hero__actions .btn--light:hover,
.roarr-home-hero__actions .btn--light:focus-visible {
	background: color-mix(in srgb, var(--text-on-dark) 12%, transparent);
	color: var(--text-on-dark);
}

@media (min-width: 768px) {
	.roarr-home-hero {
		min-height: 100vh;
		min-height: 100svh;
		padding: calc(var(--header-h) + var(--space-32)) var(--gutter-tablet) var(--space-96);
	}

	.roarr-home-hero--info-bar {
		padding-bottom: calc(var(--space-128) + var(--space-64));
	}
}

@media (min-width: 1024px) {
	.roarr-home-hero {
		min-height: 100vh;
		min-height: 100svh;
		padding: calc(var(--header-h) + var(--space-24)) var(--gutter-desktop) var(--space-80);
	}

	.roarr-home-hero--info-bar {
		padding-bottom: calc(
			var(--space-128) + var(--space-64) - clamp(var(--space-16), calc(3.3vw - var(--space-16)), var(--space-48))
		);
	}

	.roarr-home-hero__copy {
		white-space: nowrap;
	}
}

@media (min-width: 1024px) and (max-width: 1199px) {
	.roarr-home-hero__title {
		font-size: var(--h1);
		white-space: nowrap;
	}
}

@media (min-width: 640px) and (max-width: 1023px) {
	.roarr-home-hero__copy {
		max-width: none;
		font-size: var(--text-sm);
		white-space: nowrap;
	}
}

/* 640px upwards: the 2x2 info bar pulls up by half its height (~112px+),
   so the full-height hero reserves enough room above it for the CTAs. */
@media (min-width: 640px) and (max-width: 1023px) {
	.roarr-home-hero--info-bar {
		padding-bottom: calc(var(--space-128) + var(--space-80));
	}
}

@media (max-width: 639px) {
	.roarr-home-hero--info-bar {
		align-items: end;
		min-height: 100vh;
		min-height: 100svh;
		padding-top: calc(var(--header-h) + var(--space-16));
		/* Full-height hero still needs room above the fixed quick-link strip. */
		padding-bottom: var(--space-128);
	}

	.roarr-home-hero .roarr-home-hero__video {
		object-position: 54% center;
	}

	.roarr-home-hero__content {
		gap: var(--space-8);
		max-width: calc(var(--space-80) * 4);
	}

	.roarr-home-hero .roarr-home-hero__title {
		font-size: var(--h2);
		line-height: 0.98;
	}

	.roarr-home-hero__copy {
		max-width: 29ch;
		font-size: var(--text-sm);
		line-height: var(--lh-normal);
	}

	.roarr-home-hero__actions {
		gap: var(--space-8);
		width: 100%;
		max-width: calc(var(--space-120) * 3);
	}

	.roarr-home-hero__actions .btn {
		width: 100%;
	}
}

@media (max-width: 639px) {
	body.admin-bar .roarr-home-hero--info-bar {
		min-height: calc(100vh - var(--wp-admin--admin-bar--height, var(--space-48)));
		min-height: calc(100svh - var(--wp-admin--admin-bar--height, var(--space-48)));
	}
}

@media (min-width: 360px) and (max-width: 639px) {
	.roarr-home-hero__actions {
		flex-wrap: nowrap;
	}

	.roarr-home-hero__actions .btn {
		flex: 1 1 0;
		width: auto;
		padding-inline: var(--space-8);
		font-size: var(--text-xs);
		overflow-wrap: normal;
		white-space: nowrap;
	}
}

/* -- src/blocks/home-info-bar.css (canonical component source) -- */
/**
 * roarr/home-info-bar — front-end + editor styles, ported verbatim
 * (token-only) from design-reference/mocks/css/styles.css (the
 * ".info-bar.info-bar--home" / "Homepage action bar variant" section, plus
 * the "Mobile bottom quick-links dock" section). Base `.info-bar` /
 * `.info-bar__*` skeleton rules already live in page-hero.css (shared with
 * the page-hero info-bar variant) — this file only carries the `--home`
 * delta: the 50/50 straddle transform, the landing-page-scale cell styling,
 * and the ≤640px permanent bottom app-bar dock.
 *
 * NOTE: page-hero.css's ≤640px reflow block (2x2 -> 1-up) is scoped
 * `.info-bar:not(.info-bar--home)` so it never fights with the
 * home-specific mobile dock rules below — see that file's header if the
 * guard ever needs revisiting. (The mock also guards `:not(.info-bar--
 * embedded)`, but no `--embedded` variant exists in this codebase yet — add
 * the guard back here and in page-hero.css together if one is ever built.)
 */

@keyframes info-dock-in {
	from {
		transform: translateY(130%);
	}
	to {
		transform: translateY(0);
	}
}

.info-bar.info-bar--home {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	overflow: hidden;
	padding: 0;
	background: var(--card-on-light);
	/* 50/50 straddle against the VISUAL seam: the brush break's solid body
	   covers the hero's true bottom edge (~space-64 of sweep), so lift by that
	   much beyond centre; the extra lift is returned via margin-bottom so flow
	   spacing below is unchanged. Brush rip (z 3) stays under the bar (z 4). */
	transform: translateY(calc(-50% - var(--space-64)));
	margin-bottom: calc(-1 * (var(--space-64) + var(--space-64)));
}

.info-bar--home .info-bar__cell {
	min-height: var(--space-112);
	gap: 0;
	padding: var(--space-16) var(--space-24);
}

.info-bar--home .info-bar__cell + .info-bar__cell::before {
	top: 0;
	bottom: 0;
	background: var(--border-light);
}

.info-bar--home .info-bar__icon {
	width: var(--icon-badge-size-xl);
	height: var(--icon-badge-size-xl);
	flex-basis: var(--icon-badge-size-xl);
	margin-right: var(--space-16);
	background: var(--icon-badge-bg-strong);
}

.info-bar--home .info-bar__icon svg {
	width: var(--icon-badge-glyph-lg);
	height: var(--icon-badge-glyph-lg);
}

.info-bar--home .info-bar__icon .roarr-generated-icon {
	width: var(--icon-art-size-xl);
	height: var(--icon-art-size-xl);
}

.info-bar--home .info-bar__text {
	flex: 0 1 auto;
	width: auto;
	max-width: min(100%, 20ch);
	gap: var(--space-8);
}

.info-bar--home .info-bar__value-line {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	width: fit-content;
	max-width: 100%;
}

.info-bar--home .info-bar__label {
	color: var(--text-primary);
	font-weight: var(--weight-heavy);
	line-height: var(--lh-tight);
	overflow-wrap: normal;
	text-wrap: balance;
	word-break: normal;
}

.info-bar--home .info-bar__value {
	color: var(--text-secondary);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	line-height: var(--lh-normal);
	white-space: normal;
}

.info-bar--home .info-bar__arrow {
	flex: 0 0 auto;
	margin-left: 0;
	color: var(--text-muted);
	font-size: var(--text-lg);
	font-weight: var(--weight-heavy);
	line-height: var(--lh-solid);
}

.info-bar--home a.info-bar__cell {
	color: inherit;
	text-decoration: none;
}

.info-bar--home a.info-bar__cell:hover,
.info-bar--home a.info-bar__cell:focus-visible {
	background: color-mix(in srgb, var(--primary) 7%, var(--card-on-light));
	outline: none;
	text-decoration: none;
}

.info-bar--home a.info-bar__cell:hover .info-bar__arrow,
.info-bar--home a.info-bar__cell:focus-visible .info-bar__arrow {
	color: var(--primary);
}

@media (max-width: 1023px) {
	.info-bar.info-bar--home {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		transform: translateY(calc(-50% - var(--space-64)));
		margin-bottom: calc(-1 * (var(--space-112) + var(--space-64)));
	}

	.info-bar--home .info-bar__cell {
		min-height: var(--space-112);
	}
}

@media (max-width: 639px) {
	/* Single compact 4-up quick-links strip, edge-to-edge. Anchored with a clean
	   8px-system overlap into the hero and a clean gap down to the first card. */
	.info-bar.info-bar--home {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		width: calc(100% + var(--space-40));
		max-width: none;
		margin-inline: calc(var(--space-24) * -1);
		transform: none;
		margin-top: calc(-1 * var(--space-40));
		margin-bottom: var(--space-16);
		border-inline: 0;
		border-radius: 0;
	}

	.info-bar--home .info-bar__cell {
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		min-height: clamp(var(--space-80), 21vw, var(--space-96));
		gap: var(--space-8);
		padding: var(--space-16) var(--space-8);
		text-align: center;
	}

	.info-bar--home .info-bar__icon {
		width: clamp(var(--icon-badge-size-sm), 9vw, var(--icon-badge-size-md));
		height: clamp(var(--icon-badge-size-sm), 9vw, var(--icon-badge-size-md));
		flex-basis: clamp(var(--icon-badge-size-sm), 9vw, var(--icon-badge-size-md));
		margin-right: 0;
	}

	.info-bar--home .info-bar__icon svg {
		width: clamp(var(--icon-sm), 5.8vw, var(--icon-badge-glyph-md));
		height: clamp(var(--icon-sm), 5.8vw, var(--icon-badge-glyph-md));
	}

	.info-bar--home .info-bar__icon .roarr-generated-icon {
		width: clamp(var(--icon-art-size-md), 9vw, var(--icon-art-size-lg));
		height: clamp(var(--icon-art-size-md), 9vw, var(--icon-art-size-lg));
	}

	.info-bar--home .info-bar__label {
		font-size: clamp(12px, 3.25vw, var(--text-xs));
		line-height: var(--lh-tight);
		max-width: 10ch;
	}

	.info-bar--home .info-bar__value,
	.info-bar--home .info-bar__arrow {
		display: none;
	}

	.info-bar--home .info-bar__cell + .info-bar__cell {
		border-top: 0;
	}

	.info-bar--home .info-bar__cell + .info-bar__cell::before {
		display: block !important;
		top: 0;
		bottom: 0;
	}
}

@media (max-width: 360px) {
	.info-bar.info-bar--home {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.info-bar--home .info-bar__cell {
		padding-inline: var(--space-8);
	}

	.info-bar--home .info-bar__cell + .info-bar__cell::before {
		display: block !important;
		top: 0;
		bottom: 0;
	}

	.info-bar--home .info-bar__label {
		max-width: 10ch;
	}
}

/* ── Mobile bottom quick-links dock (homepage, ≤640px only) ──
   On phones the strip is a permanent app-style action bar fixed to the bottom
   of the viewport from page load. Desktop and tablet keep the in-flow strip
   overlapping the hero (rules above). Selectors are written
   .info-bar.info-bar--home so the dock outranks the reflow rules above
   regardless of source order. */
@media (max-width: 639px) {
	body:has(.info-bar-wrap--sticky) {
		/* Use the device's real home-indicator inset only. The previous
		   safe-area-max fallback reserved 32px even on browsers that did not
		   understand that newer environment variable, leaving a false blank
		   strip below the dock. */
		--info-dock-bottom-fill: env(safe-area-inset-bottom, 0px);
	}

	.info-bar-wrap--sticky .info-bar.info-bar--home {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 900;
		width: auto;
		max-width: none;
		margin: 0;
		padding-bottom: var(--info-dock-bottom-fill);
		transform: none;
		border: 0;
		border-top: 1px solid var(--border-light);
		border-radius: 0;
		box-shadow: 0 -10px 24px color-mix(in srgb, var(--deep-forest) 16%, transparent);
		animation: info-dock-in 0.5s var(--ease);
	}

	.info-bar-wrap--sticky .info-bar.info-bar--home .info-bar__cell {
		min-height: var(--space-64);
		padding: var(--space-8) var(--space-8) var(--space-4);
		gap: var(--space-8);
	}

	.info-bar-wrap--sticky .info-bar.info-bar--home .info-bar__icon {
		display: grid;
		place-items: center;
		width: var(--icon-badge-size-sm);
		height: var(--icon-badge-size-sm);
		flex-basis: var(--icon-badge-size-sm);
	}

	.info-bar-wrap--sticky .info-bar.info-bar--home .info-bar__icon .roarr-generated-icon {
		width: var(--icon-badge-size-sm);
		height: var(--icon-badge-size-sm);
		max-height: 100%;
		object-fit: contain;
	}

	.info-bar-wrap--sticky .info-bar.info-bar--home .info-bar__label {
		font-size: var(--text-2xs);
		line-height: var(--lh-tight);
	}

	/* The page never reserves space for the dock, so give the page end
	   clearance to scroll the footer past it. Scoped via :has() rather than
	   a page-type body class (the mock's body.home-page-mock hook doesn't
	   exist in Next — src/app/(frontend)/layout.tsx's <body> only ever
	   carries "single-bg") so this stays correct regardless of routing. */
	body:has(.info-bar-wrap--sticky) {
		padding-bottom: calc(var(--space-96) + var(--info-dock-bottom-fill));
	}
}

@media (prefers-reduced-motion: reduce) {
	.info-bar-wrap--sticky .info-bar--home {
		animation: none;
	}
}

/* -- src/blocks/image-card.css (canonical component source) -- */
/**
 * roarr/image-card — ported verbatim from design-reference/mocks/css/styles.css.
 * See card-grid/style.css for the token-alias caveat (applies to all Wave 3 blocks).
 */

.roarr-image-card {
	position: relative;
	display: grid;
	min-height: calc(var(--space-96) + var(--space-96) + var(--space-96) + var(--space-64));
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--deep-forest);
	box-shadow: 0 var(--space-6) var(--space-20) color-mix(in srgb, var(--deep-forest) 10%, transparent);
	color: var(--text-on-dark);
	text-decoration: none;
	transition: box-shadow 0.32s var(--ease), transform 0.32s var(--ease), gap 0.36s var(--ease);
}

.roarr-image-card:hover,
.roarr-image-card:focus-visible,
.roarr-image-card:focus-within,
.roarr-image-card.is-scroll-active {
	box-shadow: 0 var(--space-8) var(--space-24) color-mix(in srgb, var(--deep-forest) 14%, transparent);
	transform: translateY(-2px);
	text-decoration: none;
}

/* Keep the photograph clear. The only permanent shade is a short footer fade
   that protects the title instead of washing the whole card in black. */
.roarr-image-card::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 1;
	height: 40%;
	background: linear-gradient(
		180deg,
		transparent 0%,
		color-mix(in srgb, var(--deep-forest) 18%, transparent) 38%,
		color-mix(in srgb, var(--deep-forest) 74%, transparent) 100%
	);
	opacity: 0.9;
	pointer-events: none;
	transition: opacity 0.32s var(--ease);
}

.roarr-image-card:is(:hover, :focus-visible, :focus-within, .is-scroll-active)::after {
	opacity: 1;
}

.roarr-image-card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.roarr-image-card--artwork img {
	object-fit: contain;
	background: var(--deep-forest);
}

.roarr-image-card__body {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 2;
	display: grid;
	gap: 0;
	align-content: end;
	justify-items: center;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	min-height: 0;
	padding: var(--space-40) var(--space-24) var(--space-12);
	text-align: center;
	transition: gap 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.roarr-image-card:hover .roarr-image-card__body,
.roarr-image-card:focus-visible .roarr-image-card__body,
.roarr-image-card:focus-within .roarr-image-card__body,
.roarr-image-card.is-scroll-active .roarr-image-card__body {
	gap: var(--space-8);
}

.roarr-image-card__meta {
	display: none;
	margin: 0;
	color: var(--primary);
	font-size: var(--text-xs);
	font-weight: var(--weight-heavy);
	text-transform: uppercase;
}

.roarr-image-card h3 {
	order: 1;
	margin: 0;
	width: 100%;
	max-width: 100%;
	color: var(--text-on-dark);
	display: -webkit-box;
	font-family: var(--font-heading);
	font-size: var(--h3);
	font-weight: var(--weight-bold);
	letter-spacing: 0;
	line-height: var(--lh-tight);
	overflow: hidden;
	overflow-wrap: anywhere;
	text-align: center;
	text-shadow:
		1px 0 1px color-mix(in srgb, var(--deep-forest) 72%, transparent),
		-1px 0 1px color-mix(in srgb, var(--deep-forest) 72%, transparent),
		0 -1px 1px color-mix(in srgb, var(--deep-forest) 72%, transparent),
		0 2px 4px color-mix(in srgb, var(--deep-forest) 76%, transparent);
	text-wrap: balance;
	text-transform: none;
	transition: text-shadow 0.28s ease-out;
	white-space: normal;
	word-break: normal;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

@media (max-width: 639px) {
	.roarr-image-card h3 {
		font-size: var(--text-lg);
		-webkit-line-clamp: 4;
	}

	.roarr-card-grid--home-attractions .roarr-image-card {
		min-height: 0;
	}

	.roarr-card-grid--home-attractions .roarr-image-card--feature {
		min-height: 0;
		grid-column: span 2;
		grid-row: span 2;
	}
}

.roarr-image-card p,
.roarr-image-card__description,
.roarr-image-card__cta {
	color: var(--text-secondary-dark);
	font-size: var(--text-sm);
	line-height: var(--lh-relaxed);
	overflow-wrap: anywhere;
	text-align: center;
}

.roarr-image-card p,
.roarr-image-card__description {
	order: 2;
	margin: 0;
	color: var(--white);
	display: -webkit-box;
	overflow: hidden;
	text-shadow: 0 2px 10px transparent;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.roarr-image-card__cta {
	order: 3;
	color: var(--primary);
	font-weight: var(--weight-heavy);
	justify-self: center;
	text-shadow: 0 2px 6px transparent;
}

/* Hover-reveal: title shows always; description + CTA are hidden until hover/
   focus (or scroll-active on touch) — ported from mock styles.css ~L8674-8691. */
.roarr-image-card p,
.roarr-image-card__description,
.roarr-image-card__cta {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transform: translateY(var(--space-4));
	transition:
		max-height 0.38s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.28s ease-out,
		transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
		text-shadow 0.28s ease-out;
}

.roarr-image-card:hover p,
.roarr-image-card:hover .roarr-image-card__description,
.roarr-image-card:hover .roarr-image-card__cta,
.roarr-image-card:focus-visible p,
.roarr-image-card:focus-visible .roarr-image-card__description,
.roarr-image-card:focus-visible .roarr-image-card__cta,
.roarr-image-card:focus-within p,
.roarr-image-card:focus-within .roarr-image-card__description,
.roarr-image-card:focus-within .roarr-image-card__cta,
.roarr-image-card.is-scroll-active p,
.roarr-image-card.is-scroll-active .roarr-image-card__description,
.roarr-image-card.is-scroll-active .roarr-image-card__cta {
	max-height: calc(var(--space-64) + var(--space-32));
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.06s;
}

/* Keep the resting title crisp with only a fine edge. Add the deeper contrast
   shadow to every revealed caption element without dimming the photograph. */
.roarr-image-card:is(:hover, :focus-visible, :focus-within, .is-scroll-active) :is(h3, p, .roarr-image-card__description, .roarr-image-card__cta) {
	text-shadow:
		0 1px 2px color-mix(in srgb, var(--deep-forest) 100%, transparent),
		0 3px 7px color-mix(in srgb, var(--deep-forest) 94%, transparent),
		0 6px 18px color-mix(in srgb, var(--deep-forest) 82%, transparent);
}

/* Home attractions bento grid sizing — ported verbatim from mock
   .roarr-card-grid--home-attractions .roarr-image-card(--feature)
   (styles.css ~L6887-6950). */
.roarr-card-grid--home-attractions .roarr-image-card {
	min-height: calc(var(--space-120) + var(--space-80) + var(--space-8));
	border-radius: var(--radius-md);
}

.roarr-card-grid--home-attractions .roarr-image-card--feature {
	min-height: calc(var(--space-120) + var(--space-120) + var(--space-56));
}

@media (max-width: 639px) {
	.roarr-card-grid--home-attractions .roarr-image-card {
		min-height: 0;
	}

	.roarr-card-grid--home-attractions .roarr-image-card--feature {
		min-height: 0;
		grid-column: span 2;
		grid-row: span 2;
	}
}

@media (min-width: 640px) {
	.roarr-card-grid--home-attractions .roarr-image-card--feature {
		grid-column: span 2;
	}
}

@media (min-width: 1024px) {
	.roarr-card-grid--home-attractions .roarr-image-card {
		min-height: 0;
		height: 100%;
	}

	/* Feature is a wide hero across the top-left two columns (one row tall);
	   two cards sit beside it, four equal cards fill the shorter row below. */
	.roarr-card-grid--home-attractions .roarr-image-card--feature {
		grid-column: span 2;
		grid-row: span 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.roarr-image-card,
	.roarr-image-card::after,
	.roarr-image-card img,
	.roarr-image-card__body,
	.roarr-image-card__meta,
	.roarr-image-card p,
	.roarr-image-card__description,
	.roarr-image-card__cta {
		transition: none;
	}
}

/* -- src/blocks/info-card.css (canonical component source) -- */
/**
 * roarr/info-card — ported verbatim from design-reference/mocks/css/styles.css
 * (.roarr-detail-card icon/media/art/standout + .roarr-info-card--planner).
 * See card-grid/style.css for the token-alias caveat.
 */

.roarr-detail-card {
	display: grid;
	gap: var(--space-8);
	align-content: start;
	min-width: 0;
	padding: var(--card-padding-mobile);
	border: 1px solid color-mix(in srgb, var(--deep-forest) 12%, transparent);
	border-radius: var(--radius-lg);
	background: var(--card-on-light);
	box-shadow: 0 var(--space-12) var(--space-32) color-mix(in srgb, var(--deep-forest) 13%, transparent);
}

a.roarr-detail-card {
	color: inherit;
	text-decoration: none;
	transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease), transform var(--speed) var(--ease);
}

a.roarr-detail-card:hover,
a.roarr-detail-card:focus-visible {
	border-color: color-mix(in srgb, var(--primary) 45%, var(--border-light));
	box-shadow: var(--shadow-raised);
	outline: none;
	text-decoration: none;
	transform: translateY(calc(var(--space-4) * -1));
}

.roarr-detail-card__icon {
	width: var(--icon-badge-size-xl);
	height: var(--icon-badge-size-xl);
	display: inline-grid;
	place-items: center;
	border: 1px solid var(--icon-badge-border);
	border-radius: var(--radius-pill);
	background: var(--icon-badge-bg);
	color: var(--icon-badge-color);
}

.roarr-detail-card__icon svg {
	width: var(--icon-badge-glyph-lg);
	height: var(--icon-badge-glyph-lg);
}

.roarr-detail-card h3 {
	margin: 0;
	color: var(--text-primary);
	font-family: var(--font-heading);
	font-size: var(--h3);
	font-weight: var(--weight-bold);
	line-height: var(--lh-tight);
	text-wrap: balance;
}

.roarr-detail-card p {
	margin: 0;
	color: var(--text-secondary);
	font-size: var(--text-base);
	line-height: var(--lh-relaxed);
	text-wrap: pretty;
}

.roarr-detail-card p a:not(.btn) {
	color: var(--primary);
	font-weight: var(--weight-medium);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 0.18s ease;
}

.roarr-detail-card p a:not(.btn):hover,
.roarr-detail-card p a:not(.btn):focus-visible {
	color: var(--text-primary);
}

/* Media variant */
.roarr-detail-card.roarr-detail-card--media {
	padding: 0;
	overflow: hidden;
	grid-template-rows: auto 1fr;
}

.roarr-detail-card__media {
	margin: 0;
}

.roarr-detail-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: var(--image-ratio-media);
	object-fit: cover;
}

.roarr-detail-card--media .roarr-detail-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	padding: var(--card-padding-mobile);
}

@media (min-width: 768px) {
	.roarr-detail-card--media .roarr-detail-card__body {
		padding: var(--card-padding-tablet);
	}
}

/* Art variant — small illustrated panel beside the copy. */
.roarr-detail-card--art {
	grid-template-columns: clamp(var(--space-72), 10vw, var(--space-128)) minmax(0, 1fr);
	gap: var(--space-24);
	align-items: center;
}

.roarr-detail-card__art {
	margin: 0;
	align-self: center;
}

.roarr-detail-card__art img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-sm);
}

.roarr-detail-card--art .roarr-detail-card__body {
	display: grid;
	gap: var(--space-8);
	min-width: 0;
}

/* Standout variant — highlighted accent card. */
.roarr-detail-card--standout {
	border-color: color-mix(in srgb, var(--primary) 40%, var(--border-light));
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, transparent), transparent 58%),
		var(--card-on-light);
}

/* Planner variant — .roarr-info-card--planner, a static heading + checklist aside. */
.roarr-info-card {
	border: 1px solid var(--border-light);
	border-radius: var(--radius-lg);
	background: var(--card-on-light);
	box-shadow: var(--shadow-card-soft);
}

.roarr-info-card--planner {
	display: grid;
	gap: var(--space-24);
	align-content: center;
	min-width: 0;
	padding: var(--panel-padding-mobile);
}

.roarr-info-card--planner h3 {
	margin: 0;
	color: var(--text-primary);
	font-family: var(--font-heading);
	font-size: var(--h3);
	font-weight: var(--weight-bold);
	line-height: var(--lh-tight);
	letter-spacing: 0;
	text-transform: none;
}

.roarr-info-card--planner .brand-list {
	gap: var(--space-16);
}

/* -- src/blocks/info-row.css (canonical component source) -- */
/**
 * roarr-info-row — 3-up "at a glance" strip with vertical separators,
 * ported from design-reference/mocks/css/styles.css (Batch C: food-and-drink).
 */

.roarr-info-row {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	margin-top: calc(var(--space-16) + var(--space-16));
	list-style: none;
	padding: 0;
}

.roarr-info-row::before,
.roarr-info-row::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--border-light);
}

.roarr-info-row::before { left: 33.3333%; }
.roarr-info-row::after { left: 66.6666%; }

.roarr-info-row__item {
	background: transparent;
	border: 0;
	border-radius: 0;
	display: grid;
	grid-template-columns: var(--icon-badge-size-xl) minmax(0, 1fr);
	grid-template-rows: auto auto;
	gap: var(--space-8) var(--space-16);
	align-items: center;
	align-content: center;
	justify-self: stretch;
	width: 100%;
	min-width: 0;
	padding: 0 clamp(var(--space-16), 3vw, var(--space-32));
}

.roarr-info-row__icon,
.roarr-info-row__item > :is(.roarr-icon, .roarr-icon-edit, [data-type="roarr/icon"], .wp-block-roarr-icon) {
	display: inline-grid;
	place-items: center;
	width: var(--icon-badge-size-xl);
	height: var(--icon-badge-size-xl);
	grid-column: 1;
	grid-row: 1 / span 2;
	align-self: center;
	margin: 0;
}

.roarr-info-row__icon svg,
.roarr-info-row__item > :is(.roarr-icon, .roarr-icon-edit, [data-type="roarr/icon"], .wp-block-roarr-icon) svg {
	width: var(--icon-badge-glyph-lg);
	height: var(--icon-badge-glyph-lg);
}

/* Gutenberg flow margins must never move one icon/text cell independently.
 * The grid owns all spacing in this compact component. */
.roarr-info-row > *,
.roarr-info-row__item > * {
	margin-block: 0;
}

.roarr-info-row__label {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	letter-spacing: 0;
	text-transform: none;
	color: var(--deep-forest);
	line-height: var(--lh-snug);
	overflow-wrap: anywhere;
}

.roarr-info-row__value {
	grid-column: 2;
	grid-row: 2;
	min-width: 0;
	font-size: var(--text-xs);
	color: var(--text-secondary);
	line-height: var(--lh-normal);
	overflow-wrap: anywhere;
}

.roarr-info-row__value a {
	color: inherit;
}

.roarr-info-row__value a:hover {
	color: var(--primary);
	text-decoration: none;
}

@media (max-width: 900px) {
	.roarr-info-row {
		grid-template-columns: 1fr;
		gap: var(--space-24);
	}
	.roarr-info-row::before,
	.roarr-info-row::after {
		display: none;
	}
	.roarr-info-row__item {
		justify-self: start;
		padding-inline: 0;
	}
}

/* -- src/blocks/leaf-heading.css (canonical component source) -- */
/**
 * roarr/leaf-heading — ported verbatim (token-only) from
 * design-reference/mocks/css/styles.css. Shares its base rule with
 * .roarr-section__title in the mock (same visual treatment); duplicated
 * here as its own block-scoped rule since roarr/section__title is owned by
 * roarr/section-head, not this block.
 */

.roarr-leaf-heading {
	display: flex;
	align-items: center;
	gap: var(--space-16);
	max-width: 100%;
	margin: 0;
	color: inherit;
	font-family: var(--font-brand);
	font-size: var(--h2);
	font-weight: var(--weight-regular);
	font-synthesis: none;
	line-height: var(--lh-tight);
	letter-spacing: 0;
	text-transform: uppercase;
	overflow-wrap: anywhere;
	text-wrap: balance;
}

/* Flex exists for the leaf-icon + text layout. With no svg the heading is
   plain text, and flex splits a rich-text run (<em> = its own anonymous
   flex item) into squeezed min-content columns that break words mid-word
   at narrow widths ("ATTRACTI / ONS" at 375px). The mock avoids this by
   hand-wrapping such headings in a single <span> (e.g.
   exclusive-adventures.html line 92) — core/heading RichText can't carry
   that span, so mirror the same one-item behaviour by dropping flex when
   there's no icon. Found during the home page 375px parity pass,
   06-07-2026. */
.roarr-leaf-heading:not(:has(svg)) {
	display: block;
}

.roarr-leaf-heading em {
	color: var(--primary);
	font-style: normal;
}

.roarr-leaf-heading svg {
	width: 28px;
	height: 28px;
	color: var(--primary);
	flex: 0 0 28px;
}

.roarr-leaf-heading--center {
	justify-content: center;
	text-align: center;
	margin-bottom: var(--space-24);
}

/* -- src/blocks/legal-doc.css (canonical component source) -- */
/**
 * Legal-doc vocabulary — shared torn-paper panel used by the four legal
 * pages (privacy-policy, terms-conditions, cookie-policy,
 * accessibility-statement): tab strip + numbered clauses + data table +
 * important-callout + contact info-row (roarr-info-row is shared with
 * food-and-drink, styled in info-row.css already).
 * Ported from design-reference/mocks/css/styles.css ~lines 3690-4075
 * (roarr-doc/roarr-paper/roarr-tabs/roarr-numbered-section/roarr-data-table/
 * roarr-callout--important) + ~19991-20080 (roarr-timeline, About page
 * milestones — same vocabulary file since both are phase-4 batch F additions).
 */

.roarr-doc {
	background: var(--cream);
	padding-block: var(--space-24) var(--space-96);
	position: relative;
}

@media (max-width: 767px) {
	.roarr-doc {
		padding-bottom: var(--space-32);
	}
}

.roarr-doc-stack {
	position: relative;
	top: calc(var(--doc-lift) - var(--space-12) - var(--space-48));
	margin-bottom: calc(var(--doc-lift) - var(--space-16) - var(--space-48));
}

@media (max-width: 1023px) {
	.roarr-doc-stack {
		top: calc(-1 * var(--space-40));
		margin-bottom: calc(-1 * var(--space-40));
	}
}

.roarr-paper {
	width: min(100% - clamp(24px, 4vw, 48px), var(--container-wide));
	margin-inline: auto;
	position: relative;
	top: 0;
	margin-bottom: 0;
	z-index: 4;
	background: var(--cream);
	padding: clamp(var(--space-24), 3vw, var(--space-40)) clamp(var(--space-32), 5vw, var(--space-72)) clamp(var(--space-32), 5vw, var(--space-72));
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-paper-panel-highlight);
}

.roarr-paper__body {
	margin-top: var(--space-32);
	max-width: 880px;
	margin-inline: auto;
}

/* ── Tab strip (roarr/legal-tabs) — each tab is its own pill ────────── */

.roarr-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-8);
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-8);
}

.roarr-tabs a {
	flex: 0 1 auto;
	text-align: center;
	padding: clamp(var(--space-8), 1.4vw, var(--space-16)) clamp(var(--space-16), 2vw, var(--space-24));
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-light);
	background: transparent;
	font-size: clamp(11px, 1.1vw, 13px);
	font-weight: var(--weight-bold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-secondary);
	display: inline-grid;
	align-items: center;
	justify-items: center;
	justify-content: center;
	gap: var(--space-8);
	white-space: nowrap;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

@media (min-width: 1024px) {
	.roarr-tabs {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.roarr-tabs a {
		width: 100%;
		padding-inline: var(--space-16);
	}
}

@media (max-width: 900px) {
	.roarr-tabs {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-8);
	}
	.roarr-tabs a {
		width: 100%;
		padding-inline: var(--space-16);
	}
}

@media (max-width: 480px) {
	.roarr-tabs {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}
}

.roarr-tabs a:hover {
	background: var(--parchment);
	border-color: var(--primary);
	text-decoration: none;
}

.roarr-tabs a[aria-current='page'] {
	background: var(--jungle-green);
	border-color: var(--primary);
	color: var(--text-on-dark);
}

/* ── Numbered legal clauses ───────────────────────────────────────── */

.roarr-numbered-section {
	padding-block: var(--space-40);
	border-top: 1px solid var(--border-light);
}

.roarr-numbered-section:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.roarr-numbered-section:last-of-type {
	padding-bottom: 0;
}

.roarr-numbered-section__heading {
	font-family: var(--font-body);
	font-size: var(--text-lg);
	font-weight: var(--weight-heavy);
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--jungle-green);
	margin-bottom: var(--space-8);
	display: flex;
	align-items: center;
	gap: var(--space-8);
}

.roarr-numbered-section__num {
	color: var(--jungle-green);
}

.roarr-numbered-section p {
	font-size: var(--text-sm);
	line-height: var(--lh-loose);
	color: var(--text-secondary);
	max-width: 75ch;
}

.roarr-numbered-section p + p,
.roarr-numbered-section ul + p,
.roarr-numbered-section p + ul,
.roarr-numbered-section figure.is-style-roarr-data-table + p {
	margin-top: var(--space-8);
}

.roarr-numbered-section ul.brand-list {
	margin-top: var(--space-16);
	max-width: 75ch;
}

/* display:block (not the base ul.brand-list li flex layout — the icon
   bullet is already absolutely positioned via ::before, independent of the
   li's own layout mode) — legal clauses are the one brand-list context whose
   item text commonly wraps and carries an inline <a> (e.g. terms-conditions
   §3's "What's Open & When" link). A flex container block-ifies every
   in-flow child, including a plain <a> mixed with text, which broke the
   link out onto its own flex line and fragmented the sentence around it. */
.roarr-numbered-section ul.brand-list li {
	display: block;
	font-size: var(--text-sm);
	color: var(--text-secondary);
	padding-left: var(--space-24);
	min-height: 0;
}

/* Legal-scoped override: swap the brand square-tick for a small dark-forest
   dot — utility pages stay understated. Brand bullet remains unchanged
   globally (see brand-list rules elsewhere). */
.roarr-numbered-section ul.brand-list li::before {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--deep-forest);
	background-image: none;
	top: 0.85em;
	transform: translateY(-50%);
}

/* The global brand-list tick is a separate ::after layer. Legal lists use
   the understated dot above, so suppress the inherited tick completely. */
.roarr-numbered-section ul.brand-list li::after {
	content: none;
}

/* The original legal-page migration saved decorative contact slots without
   icon blocks. Restore the intended artwork only for those empty legacy
   slots; a future roarr/icon child automatically takes precedence because
   these selectors no longer match once the container is non-empty. */
.roarr-paper .roarr-info-row__icon:is(:empty, .wp-block-group__placeholder)::before {
	content: "";
	display: block;
	width: var(--icon-art-size-lg, 64px);
	height: var(--icon-art-size-lg, 64px);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

/* These legacy WebPs have different transparent lower edges. Offset their
   painted pixels individually so each visible icon bottom meets its own
   final text line, rather than aligning only the transparent image boxes. */
.roarr-paper .roarr-info-row__item:nth-child(1) .roarr-info-row__icon:is(:empty, .wp-block-group__placeholder)::before {
	background-image: url("../../plugins/roarr-blocks/assets/icons/webp-64/roarr-email-icon-solid-transparent-64.webp");
	transform: translateY(3px);
}

.roarr-paper .roarr-info-row__item:nth-child(2) .roarr-info-row__icon:is(:empty, .wp-block-group__placeholder)::before {
	background-image: url("../../plugins/roarr-blocks/assets/icons/webp-64/roarr-phone-icon-solid-transparent-64.webp");
	transform: translateY(-1px);
}

.roarr-paper .roarr-info-row__item:nth-child(3) .roarr-info-row__icon:is(:empty, .wp-block-group__placeholder)::before {
	background-image: url("../../plugins/roarr-blocks/assets/icons/webp-64/roarr-pin-icon-solid-transparent-64.webp");
	transform: translateY(0);
}

/* Legal contact rows have long literal values (notably the Guest Services
   address), so use the large artwork step instead of the shared XL badge and
   trim the cell gutters. This keeps each intended line intact without
   changing the roomier info-row treatment used elsewhere on the site. */
.roarr-paper .roarr-info-row__item {
	--roarr-legal-contact-inline-padding: var(--space-8);
	position: relative;
	min-height: var(--icon-art-size-lg);
	grid-template-columns: var(--icon-art-size-lg) minmax(0, 1fr);
	column-gap: var(--space-8);
	row-gap: 0;
	align-content: end;
	padding-inline: var(--roarr-legal-contact-inline-padding);
}

.roarr-paper .roarr-info-row__icon {
	width: var(--icon-art-size-lg);
	height: var(--icon-art-size-lg);
	align-self: end;
}

/* Keep the artwork out of the text-row sizing calculation. Otherwise the
   spanning icon distributes its spare height between the label and value,
   creating a false gap even when row-gap is zero. */
.roarr-paper .roarr-info-row__item > .roarr-info-row__icon {
	position: absolute;
	inset-inline-start: var(--roarr-legal-contact-inline-padding);
	inset-block-end: 0;
}

.roarr-paper .roarr-info-row__value {
	margin-block: 0;
	white-space: nowrap;
	overflow-wrap: normal;
}

.roarr-paper .roarr-info-row__label {
	width: max-content;
	padding-inline: var(--space-8);
	margin-inline-start: calc(-1 * var(--space-8));
	border-radius: var(--radius-sm);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.roarr-paper .roarr-info-row__item:is(:hover, :focus-within) .roarr-info-row__label {
	background: color-mix(in srgb, var(--primary) 20%, var(--cream));
	color: var(--deep-forest);
}

@media (max-width: 900px) {
	.roarr-paper .roarr-info-row__item {
		--roarr-legal-contact-inline-padding: 0px;
	}
}

.roarr-numbered-section__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
	gap: var(--space-48);
	align-items: start;
}

@media (max-width: 800px) {
	.roarr-numbered-section__grid {
		grid-template-columns: 1fr;
	}
	.roarr-numbered-section--with-aside {
		grid-template-columns: 1fr;
	}
}

/* ── Callout — important/info variant (icon-badge card) ─────────────
   Distinct from .roarr-callout--quote / is-style-roarr-callout-quote
   (split.css) — that's the pull-quote treatment for about-roarr; this is
   the icon-badge info panel the legal pages sit beside a numbered clause's
   list. The mock never combines both variants on one stylesheet cascade
   (each lives on its own page), but this app's CSS is global, so the
   icon-grid base below MUST exclude the quote variant explicitly — without
   the :not() it loads after split.css and silently wins the cascade,
   squeezing the quote's eyebrow into a 24px icon-grid column (confirmed via
   a live frontend render on about-roarr — the "Our golden rule" eyebrow
   wrapped into 3 stacked lines overlapping the quote text). */

.roarr-callout:not(.roarr-callout--quote):not(.is-style-roarr-callout-quote) {
	background: var(--parchment);
	border-radius: var(--radius-md);
	padding: var(--space-24);
	display: grid;
	grid-template-columns: var(--icon-md) minmax(0, 1fr);
	column-gap: var(--space-8);
	row-gap: var(--space-8);
	align-items: start;
	border: 1px solid var(--border-light);
}

.roarr-callout:not(.roarr-callout--quote):not(.is-style-roarr-callout-quote):has(> .roarr-callout__icon:empty) {
	grid-template-columns: minmax(0, 1fr);
}

.roarr-callout__icon:empty {
	display: none;
}

.roarr-callout__icon {
	width: var(--icon-md);
	height: var(--icon-md);
	border-radius: 50%;
	background: var(--jungle-green);
	display: grid;
	place-items: center;
}

.roarr-callout__icon svg {
	width: var(--icon-sm);
	height: var(--icon-sm);
	color: var(--white);
}

.roarr-callout__title {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-heavy);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--deep-forest);
	align-self: center;
	margin: 0;
}

.roarr-callout__body {
	grid-column: 1 / -1;
	font-size: var(--text-xs);
	line-height: var(--lh-relaxed);
	color: var(--text-secondary);
}

/* registry.tsx's roarr-callout renderer passes cssClassNames through
   verbatim (no BEM translation layer, unlike the *FromGroup.tsx-mediated
   variations) — so the DOM carries the literal is-style-* class WP applies,
   not a translated --important modifier. Target both so this also matches
   if a future group-translated path is added. */
.roarr-callout--important,
.roarr-callout.is-style-roarr-callout-important {
	background: var(--parchment);
	border-color: var(--warm-sand);
}

.roarr-callout--important .roarr-callout__icon,
.roarr-callout.is-style-roarr-callout-important .roarr-callout__icon {
	background: var(--jungle-green);
}

/* ── Data table — cookie-type table etc. ─────────────────────────────
   core/table is rendered via renderedHtml (CoreBlockFallback) — real WP
   markup, so a registerBlockStyle on core/table puts is-style-roarr-data-table
   on the OUTER <figure class="wp-block-table">, not the <table> itself.
   Target the descendant table (`figure.is-style-roarr-data-table table`)
   rather than a bare `.roarr-data-table` class that never lands in the DOM. */

figure.is-style-roarr-data-table {
	margin: 0;
}

figure.is-style-roarr-data-table table {
	width: 100%;
	margin-top: var(--space-24);
	background: var(--card-on-light);
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--border-light);
	box-shadow: var(--shadow-card-soft);
	font-size: var(--text-sm);
	border-collapse: separate;
	border-spacing: 0;
}

figure.is-style-roarr-data-table thead {
	background: var(--jungle-green);
	color: var(--text-on-dark);
}

figure.is-style-roarr-data-table th {
	text-align: left;
	padding: var(--space-16) var(--space-24);
	font-family: var(--font-body);
	font-weight: var(--weight-bold);
	letter-spacing: 0;
	text-transform: none;
	font-size: var(--text-sm);
	border-right: 1px solid var(--border-on-dark-subtle);
}

figure.is-style-roarr-data-table th:last-child {
	border-right: 0;
}

figure.is-style-roarr-data-table td {
	padding: var(--space-16) var(--space-24);
	border-top: 1px solid var(--border-light);
	border-right: 1px solid var(--border-light);
	color: var(--text-secondary);
	line-height: var(--lh-relaxed);
	vertical-align: top;
}

figure.is-style-roarr-data-table td:last-child {
	border-right: 0;
}

figure.is-style-roarr-data-table tbody tr {
	background: var(--card-on-light);
}

figure.is-style-roarr-data-table tbody tr:nth-child(even) {
	background: color-mix(in srgb, var(--warm-sand) 16%, var(--card-on-light));
}

figure.is-style-roarr-data-table tbody tr:first-child td {
	border-top: 0;
}

/* ── Timeline — About page "How the Park Grew" milestones ───────────
   Horizontal scroller on the dark-forest band: connector rail threads the
   year dots, cards hang beneath, row scroll-snaps so it reads draggable. */

.roarr-timeline {
	position: relative;
	min-width: 0;
	margin-top: var(--space-48);
}

.roarr-timeline__track {
	display: flex;
	align-items: stretch;
	gap: var(--space-24);
	margin: 0;
	padding: 0 var(--space-8) var(--space-24);
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-padding-left: var(--space-8);
	scrollbar-width: thin;
	scrollbar-color: var(--jungle-green) color-mix(in srgb, var(--deep-forest) 55%, transparent);
}

.roarr-timeline__track::-webkit-scrollbar {
	height: var(--space-8);
}

.roarr-timeline__track::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--jungle-green) 70%, transparent);
	border-radius: var(--radius-pill);
}

.roarr-timeline__item {
	flex: 0 0 min(80%, calc(var(--space-120) * 2 + var(--space-32)));
	display: grid;
	grid-template-rows: auto 1fr;
	gap: var(--space-16);
	scroll-snap-align: start;
}

.roarr-timeline__node {
	display: grid;
	gap: var(--space-8);
	justify-items: start;
}

.roarr-timeline__year {
	font-family: var(--font-heading);
	font-size: var(--h3);
	font-weight: var(--weight-heavy);
	line-height: var(--lh-tight);
	color: var(--primary);
}

.roarr-timeline__rail {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: var(--space-16);
}

.roarr-timeline__rail::before {
	content: '';
	position: absolute;
	left: 0;
	right: calc(-1 * var(--space-24));
	top: 50%;
	height: 2px;
	transform: translateY(-50%);
	background: linear-gradient(90deg, color-mix(in srgb, var(--jungle-green) 70%, transparent), color-mix(in srgb, var(--jungle-green) 28%, transparent));
}

.roarr-timeline__item:last-child .roarr-timeline__rail::before {
	right: 0;
}

.roarr-timeline__dot {
	position: relative;
	z-index: 1;
	width: var(--space-16);
	height: var(--space-16);
	border-radius: var(--radius-pill);
	background: var(--jungle-green);
	box-shadow: 0 0 0 var(--space-4) color-mix(in srgb, var(--jungle-green) 28%, transparent);
}

.roarr-timeline__card {
	height: 100%;
}

@media (min-width: 768px) {
	.roarr-timeline__item {
		flex-basis: calc(var(--space-120) * 2 + var(--space-48));
	}
}

/* -- src/blocks/map-card.css (canonical component source) -- */
/**
 * .roarr-map-card / .stay-map-card — the bordered card wrapper + iframe
 * sizing for an embedded Google Map, ported from
 * design-reference/mocks/css/styles.css (Batch C: contact-us).
 */

.roarr-map-card {
	border: 1px solid var(--border-light);
	border-radius: var(--radius-lg);
	background: var(--card-on-light);
	box-shadow: var(--shadow-card-soft);
}

.stay-map-card {
	position: relative;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	aspect-ratio: var(--image-ratio-landscape);
	overflow: hidden;
	padding: var(--space-16);
}

.stay-map-card iframe {
	position: absolute;
	inset: var(--space-16);
	width: calc(100% - var(--space-32));
	height: calc(100% - var(--space-32));
	border: 0;
	border-radius: calc(var(--radius-lg) - var(--space-8));
}

.stay-map-card--fill {
	width: 100%;
	height: auto;
	min-height: calc(var(--space-128) * 2);
	aspect-ratio: var(--image-ratio-landscape);
}

.roarr-split--map-fill .roarr-split__media {
	display: flex;
}

.roarr-parkmap {
	margin-block: 0;
	margin-inline: auto;
	overflow: hidden;
	border: 1px solid var(--border-light);
	border-radius: var(--radius-lg);
	background: var(--parchment);
	box-shadow: var(--shadow-soft);
}

.roarr-parkmap img {
	display: block;
	width: 100%;
}

.roarr-parkmap__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-16);
	justify-content: center;
	width: min(100% - var(--space-48), calc(var(--space-128) * 3));
	margin-top: var(--space-32);
	margin-inline: auto;
}

@media (min-width: 768px) {
	.roarr-parkmap__actions {
		width: min(100% - var(--space-64), calc(var(--space-128) * 4));
	}
}

@media (min-width: 1024px) {
	.roarr-parkmap__actions {
		width: fit-content;
		max-width: calc(100% - var(--space-96));
	}
}

/* -- src/blocks/outlet.css (canonical component source) -- */
/**
 * .outlet-list / .outlet — food & drink outlet directory rows (alternating
 * text/image layout), ported from design-reference/mocks/css/styles.css
 * (Batch C: food-and-drink).
 */

.outlet-list {
	display: grid;
	gap: var(--space-72);
}

.outlet {
	display: grid;
	gap: var(--space-24);
}

.outlet__intro {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-24);
	align-items: stretch;
}

.outlet__text {
	display: grid;
	gap: var(--space-16);
	align-content: center;
	min-width: 0;
}

.outlet__name {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--h2);
	font-weight: var(--weight-bold);
	line-height: var(--lh-tight);
	letter-spacing: 0;
	text-transform: none;
	color: var(--text-primary);
}

.outlet__sells {
	margin: 0;
	max-width: 46ch;
	color: var(--text-secondary);
	font-size: var(--text-base);
	line-height: var(--lh-loose);
}

.outlet__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8) var(--space-24);
	margin: 0;
	padding: 0;
	list-style: none;
}

.outlet__facts li {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-8);
	flex: 0 1 auto;
	min-width: 0;
	color: var(--text-secondary);
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	line-height: var(--lh-normal);
	overflow-wrap: anywhere;
}

.outlet__facts li > :is(.roarr-icon, .roarr-icon-edit, [data-type="roarr/icon"], .wp-block-roarr-icon) {
	display: inline-grid;
	flex: 0 0 var(--icon-art-size-sm);
	place-items: center;
	width: var(--icon-art-size-sm);
	height: var(--icon-art-size-sm);
	margin: 0;
}

.outlet__facts li .roarr-generated-icon {
	width: var(--icon-art-size-sm);
	height: var(--icon-art-size-sm);
	max-width: none;
}

.outlet__menu-actions {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--space-8);
	justify-self: start;
	width: 100%;
	min-width: 0;
}

.outlet__menu-actions > * {
	margin-block: 0;
}

.outlet__menu-actions > :is(.roarr-icon, .roarr-icon-edit, [data-type="roarr/icon"], .wp-block-roarr-icon) {
	display: inline-grid;
	flex: 0 0 var(--icon-art-size-sm);
	place-items: center;
	width: var(--icon-art-size-sm);
	height: var(--icon-art-size-sm);
}

.outlet__menu-actions .roarr-generated-icon {
	width: var(--icon-art-size-sm);
	height: var(--icon-art-size-sm);
	max-width: none;
}

.outlet__menu-actions > .wp-block-buttons {
	flex: 0 1 auto;
	min-width: 0;
	width: auto;
	max-width: 100%;
	margin: 0;
}

.outlet__menu-actions :is(.wp-block-button, .wp-block-button__link) {
	max-width: 100%;
}

.outlet__menu-actions .wp-block-button {
	display: inline-flex;
}

.outlet__menu-actions .outlet__menu-link .wp-block-button__link {
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--primary-dark);
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	line-height: var(--lh-normal);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
	white-space: normal;
	overflow-wrap: anywhere;
}

.outlet__menu-actions .outlet__menu-link .wp-block-button__link:hover,
.outlet__menu-actions .outlet__menu-link .wp-block-button__link:focus-visible {
	background: transparent;
	color: var(--primary);
}

.outlet__feature {
	position: relative;
	display: block;
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--parchment);
	box-shadow: var(--shadow-soft);
	cursor: zoom-in;
	aspect-ratio: var(--image-ratio-food-feature);
	transition: box-shadow 0.24s ease, transform 0.24s ease;
}

.outlet__feature img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.outlet__feature:hover,
.outlet__feature:focus-visible {
	box-shadow: var(--shadow-raised);
	transform: translateY(-2px);
	outline: none;
}

.outlet__menu-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	justify-self: start;
	color: var(--primary-dark);
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
	transition: color 0.18s ease;
}

.outlet__menu-link:hover,
.outlet__menu-link:focus-visible {
	color: var(--primary);
}

@media (min-width: 1024px) {
	.outlet__intro {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--space-40);
	}
	.outlet__feature {
		align-self: center;
	}
	.outlet:nth-child(even) .outlet__intro .outlet__text {
		order: 2;
	}
	.outlet:nth-child(even) .outlet__intro .outlet__feature {
		order: 1;
	}
	.outlet-list {
		gap: var(--space-96);
	}
}

@media (max-width: 1023px) {
	.outlet__text {
		display: contents;
	}
	.outlet__name { order: 1; }
	.outlet__sells { order: 2; }
	.outlet__feature { order: 3; }
	.outlet__facts { order: 4; }
	.outlet__menu-actions,
	.outlet__menu-link { order: 5; }
}

/* -- src/blocks/page-hero.css (canonical component source) -- */
/**
 * roarr/page-hero — front-end + editor styles, ported verbatim (token-only)
 * from design-reference/mocks/css/styles.css (.page-hero + .info-bar rules).
 * The one shared hero (DESIGN.md §7) used on every page except the homepage.
 */

.page-hero {
	display: flex;
	align-items: center;
	background: var(--deep-forest);
	color: var(--text-on-dark);
	position: relative;
	z-index: 1;
	padding-block: var(--space-112) var(--space-64);
	overflow: hidden;
	isolation: isolate;
}

@media (min-width: 1024px) {
	.page-hero {
		min-height: clamp(600px, 38.8vw, 640px);
	}
}

/* Legacy nested attraction facts bars remain as a safe fallback until the
   Page Hero info-bar variant owns them. Keep their core/group wrappers at the
   same compact dimensions on the public site and in Gutenberg. */
:is(.roarr-site-main, .editor-styles-wrapper) .roarr-attraction-info-bar {
	padding: var(--space-8) var(--space-16);
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-attraction-info-bar > .info-bar__cell {
	gap: var(--space-8);
	min-height: 88px;
	padding: var(--space-4) var(--space-12);
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-attraction-info-bar .info-bar__icon {
	flex-basis: var(--icon-badge-size-md);
	width: var(--icon-badge-size-md);
	height: var(--icon-badge-size-md);
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-attraction-info-bar .info-bar__icon :is(.roarr-icon-edit, .roarr-icon) {
	width: 100%;
	height: 100%;
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-attraction-info-bar .info-bar__text {
	gap: var(--space-4);
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-attraction-info-bar :is(.info-bar__cell, .info-bar__text) > * {
	margin-block: 0 !important;
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-attraction-info-bar .info-bar__text > :is(p, .wp-block-paragraph) {
	margin: 0 !important;
}

@media (max-width: 1024px) {
	:is(.roarr-site-main, .editor-styles-wrapper) .roarr-attraction-info-bar > .info-bar__cell {
		min-height: 80px;
	}
}

@media (max-width: 640px) {
	:is(.roarr-site-main, .editor-styles-wrapper) .roarr-attraction-info-bar > .info-bar__cell {
		min-height: 0;
		padding: var(--space-12) var(--space-16);
	}
}

.page-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--container-wide);
	margin-inline: auto;
	padding-inline: clamp(var(--space-16), 2vw, var(--space-24));
	box-sizing: border-box;
}

.page-hero__text {
	max-width: 780px;
	text-align: left;
}

/* ── Event/news single banner hero ── */
.page-hero.page-hero--banner {
	min-height: 0;
	padding: 0;
}

.page-hero--banner .page-hero__media {
	position: relative;
	width: 100%;
	height: clamp(
		calc(var(--space-128) * 2 + var(--space-64)),
		min(52.5vw, calc(100svh - var(--header-h))),
		calc(var(--space-128) * 5 + var(--space-80))
	);
	overflow: hidden;
}

.page-hero--banner .page-hero__media img {
	display: block;
	object-fit: cover;
}

/* A fixed pixel cap becomes physically shorter when an already-wide browser
   is zoomed. At cinema-wide viewport ratios, including a physically ultra-wide
   screen whose effective CSS width drops below 1920px, show the complete 1.9:1
   campaign artwork instead of cropping through its baked-in title. A short
   matching-colour buffer gives the overlapping hero brush somewhere to land
   without covering the artwork. */
@media (min-width: 1280px) and (min-aspect-ratio: 12 / 5) {
	.page-hero.page-hero--banner {
		padding-bottom: var(--space-48);
		background: #123746;
	}

	.page-hero--banner .page-hero__media {
		background: #123746;
	}

	.page-hero--banner .page-hero__media img {
		object-fit: contain;
		object-position: center;
	}
}

.page-hero--banner .page-hero__media::after {
	display: none;
}

@media (max-width: 767px) {
	.page-hero.page-hero--banner {
		padding-top: var(--header-h);
		padding-bottom: 0;
		background: transparent;
	}

	.page-hero--banner .page-hero__media {
		height: auto;
		aspect-ratio: var(--image-ratio-artwork);
	}
}

.page-hero--banner .page-hero__inner {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* News without a featured image keeps the same shell but uses a concise,
   readable text hero instead of leaving an empty campaign-artwork frame. */
.page-hero--news-text {
	min-height: clamp(360px, 34vw, 520px);
	background:
		radial-gradient(circle at 82% 18%, rgb(132 189 0 / 22%), transparent 34%),
		var(--deep-forest);
}

.page-hero--news-text .page-hero__text {
	max-width: 900px;
}

@media (max-width: 767px) {
	.page-hero--news-text {
		min-height: 0;
		padding-block: calc(var(--header-h) + var(--space-80)) var(--space-96);
	}
}

/* ── --with-media variant: image bleeds in from the right ── */

.page-hero__media {
	--page-hero-image-position: var(--image-position-hero-desktop);
	--page-hero-image-position-mobile: var(--image-position-hero-mobile);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 60%;
	z-index: 0;
	pointer-events: none;
}

.page-hero__media picture {
	display: block;
	width: 100%;
	height: 100%;
}

.page-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--page-hero-image-position);
}

.page-hero__media--focus-center {
	--page-hero-image-position: var(--image-position-center);
	--page-hero-image-position-mobile: var(--image-position-center);
}

.page-hero__media--focus-top {
	--page-hero-image-position: var(--image-position-top);
	--page-hero-image-position-mobile: var(--image-position-top);
}

.page-hero__media--focus-upper {
	--page-hero-image-position: var(--image-position-upper);
	--page-hero-image-position-mobile: var(--image-position-upper);
}

.page-hero__media--focus-lower {
	--page-hero-image-position: var(--image-position-lower);
	--page-hero-image-position-mobile: var(--image-position-lower);
}

.page-hero__media--focus-bottom {
	--page-hero-image-position: var(--image-position-bottom);
	--page-hero-image-position-mobile: var(--image-position-bottom);
}

.page-hero__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		var(--deep-forest) 0%,
		color-mix(in srgb, var(--deep-forest) 94%, transparent) 9%,
		color-mix(in srgb, var(--deep-forest) 78%, transparent) 18%,
		color-mix(in srgb, var(--deep-forest) 56%, transparent) 26%,
		color-mix(in srgb, var(--deep-forest) 36%, transparent) 33%,
		color-mix(in srgb, var(--deep-forest) 18%, transparent) 39%,
		color-mix(in srgb, var(--deep-forest) 6%, transparent) 43%,
		transparent 46%
	);
}

@media (max-width: 900px) {
	.page-hero {
		min-height: calc(var(--space-128) * 3);
	}

	.page-hero__media {
		width: 100%;
		opacity: 1;
	}

	.page-hero__media img {
		object-position: var(--page-hero-image-position-mobile);
		filter: saturate(0.96) brightness(0.9);
	}

	.page-hero__media::after {
		background:
			linear-gradient(
				180deg,
				color-mix(in srgb, var(--deep-forest) 70%, transparent) 0%,
				color-mix(in srgb, var(--deep-forest) 58%, transparent) 48%,
				color-mix(in srgb, var(--deep-forest) 78%, transparent) 100%
			),
			linear-gradient(
				90deg,
				color-mix(in srgb, var(--deep-forest) 84%, transparent) 0%,
				color-mix(in srgb, var(--deep-forest) 50%, transparent) 58%,
				color-mix(in srgb, var(--deep-forest) 24%, transparent) 100%
			);
	}
}

/* Breadcrumbs are intentionally NOT rendered (dead per the mock's own CSS —
   see plugins/roarr-blocks/src/page-hero/readme.txt Deviation 1) so there is
   no .page-hero__crumbs rule to port here.  */

.page-hero__title {
	max-width: min(100%, 12em);
	font-size: var(--display);
	font-weight: var(--weight-regular);
	font-synthesis: none;
	line-height: var(--lh-solid);
	letter-spacing: 0;
	text-transform: uppercase;
	margin-bottom: var(--space-24);
	overflow-wrap: anywhere;
	text-wrap: balance;
}

.page-hero__title em {
	font-style: normal;
	color: var(--primary);
}

.page-hero__kicker {
	margin: calc(var(--space-8) * -1) 0 var(--space-16);
	color: var(--amber);
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	font-weight: var(--weight-heavy);
	line-height: var(--lh-tight);
	letter-spacing: 0;
	text-transform: uppercase;
}

.page-hero__intro {
	max-width: min(100%, 34ch);
	font-size: var(--text-base);
	line-height: var(--lh-relaxed);
	color: var(--text-muted-dark);
	margin-bottom: var(--space-32);
	overflow-wrap: anywhere;
	text-wrap: pretty;
}

@media (max-width: 900px) {
	.page-hero__title {
		font-size: var(--h1);
	}
}

/* ── roarr-pill-list (banner variant kicker area) ── */
.roarr-pill-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.roarr-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	padding: var(--space-8) var(--space-16);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-pill);
	background: var(--parchment);
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	line-height: var(--lh-solid);
	letter-spacing: 0;
	text-transform: uppercase;
}

.page-hero .roarr-pill {
	border-color: var(--border-dark);
	background: color-mix(in srgb, var(--white) 12%, transparent);
	color: var(--text-on-dark);
}

/* ── Info bar (straddles the hero's bottom edge — info-bar variant only) ── */

.page-hero--info-bar {
	padding-block: var(--space-128) var(--space-64);
}

.info-bar-wrap {
	position: relative;
	z-index: 4;
}

.info-bar {
	display: grid;
	grid-template-columns: repeat(var(--info-bar-columns, 4), minmax(0, 1fr));
	align-items: stretch;
	max-width: 100%;
	background: var(--card-on-light);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	padding: var(--space-16) var(--space-24);
	margin-top: 0;
	margin-bottom: calc(-1 * var(--space-80));
	position: relative;
	transform: translateY(calc(-50% - var(--space-16)));
}

.info-bar__cell {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-16);
	min-width: 0;
	min-height: var(--space-112);
	padding: var(--space-8) var(--space-24);
	overflow: hidden;
	position: relative;
}

.info-bar__cell + .info-bar__cell::before {
	content: '';
	position: absolute;
	left: 0;
	top: 14%;
	bottom: 14%;
	width: 1px;
	background: var(--border-light);
}

.info-bar__icon {
	flex: 0 0 var(--icon-badge-size-lg);
	width: var(--icon-badge-size-lg);
	height: var(--icon-badge-size-lg);
}

.info-bar__icon svg {
	width: var(--icon-badge-glyph-lg);
	height: var(--icon-badge-glyph-lg);
}

/* Painted icon artwork is a full-bleed illustration, not a small glyph inside
   the otherwise empty badge slot. Keep it tied to the slot so Page Hero facts
   remain consistent in both the public render and Gutenberg preview. */
.info-bar__icon .roarr-generated-icon {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
}

.info-bar__text {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	width: auto;
	max-width: min(100%, 20ch);
	min-width: 0;
}

a.info-bar__text {
	color: inherit;
	text-decoration: none;
}

.info-bar__label {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--primary);
	overflow-wrap: anywhere;
	text-wrap: balance;
}

.info-bar__value {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	line-height: var(--lh-tight);
	color: var(--text-primary);
	overflow-wrap: anywhere;
	white-space: normal;
}

.info-bar__sub {
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	color: var(--text-secondary);
	line-height: var(--lh-normal);
	overflow-wrap: anywhere;
	text-wrap: pretty;
}

/* Editable fact copy can grow, but it must not resize the shared hero into a
   large content panel. Keep each individual line readable and clamp only the
   visual preview; the complete text remains in the accessible DOM. */
.info-bar__label,
.info-bar__value,
.info-bar__sub {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.section-body {
	background: var(--cream);
	padding-block: var(--section-padding-mobile);
	position: relative;
}

.section-body:has(.info-bar-wrap) {
	/* The fact strip is shared hero chrome, not a second content section.
	   Let the following section own the single standard spacing step instead
	   of stacking this wrapper's bottom padding with that section's top. */
	padding-block: 0;
}

@media (min-width: 1025px) {
	.info-bar {
		padding: var(--space-8) var(--space-24);
	}

	.info-bar__cell {
		gap: var(--space-8);
		padding: var(--space-8) var(--space-16);
	}

	.info-bar__label,
	.info-bar__sub {
		white-space: normal;
	}
}

@media (max-width: 1024px) {
	.info-bar {
		grid-template-columns: repeat(var(--info-bar-columns, 4), minmax(0, 1fr));
		row-gap: 0;
		padding: var(--space-8);
		transform: translateY(-30%);
		margin-bottom: calc(-1 * var(--space-80));
	}

	.info-bar:not(.info-bar--home) .info-bar__icon {
		flex: 0 0 var(--icon-badge-size-md);
		width: var(--icon-badge-size-md);
		height: var(--icon-badge-size-md);
	}

	.info-bar[data-cell-count="4"] .info-bar__cell + .info-bar__cell::before {
		display: none;
	}

	.info-bar[data-cell-count="4"] .info-bar__cell:nth-child(2n)::before {
		display: block;
	}

	.info-bar[data-cell-count="4"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.info-bar[data-cell-count="4"] .info-bar__cell:nth-child(n + 3) {
		border-top: 1px solid var(--border-light);
	}
}

@media (min-width: 641px) and (max-width: 1024px) {
	.info-bar:not(.info-bar--home) .info-bar__label,
	.info-bar:not(.info-bar--home) .info-bar__sub {
		font-size: var(--text-2xs);
	}

	.info-bar:not(.info-bar--home) .info-bar__value {
		font-size: var(--text-xs);
	}
}

@media (max-width: 640px) {
	.page-hero--info-bar {
		min-height: calc(var(--space-128) * 4);
		padding-block: var(--space-128) var(--space-112);
	}

	/* :not(.info-bar--home) — home has its own compact 4-up mobile dock,
	   see home-info-bar.css. Without this guard this reflow (1-col stack)
	   and home-info-bar.css's rules fight over the same breakpoint. */
	.info-bar:not(.info-bar--home) {
		grid-template-columns: 1fr;
		padding: var(--space-8);
		transform: translateY(-15%);
		margin-bottom: calc(-1 * var(--space-48));
	}

	.info-bar:not(.info-bar--home) .info-bar__cell::before {
		display: none !important;
	}

	.info-bar:not(.info-bar--home) .info-bar__cell {
		display: grid;
		grid-template-columns: var(--icon-badge-size-md) minmax(0, 1fr);
		align-items: center;
		justify-content: stretch;
		gap: var(--space-24);
		min-height: var(--space-96);
		padding: var(--space-12) var(--space-24);
	}

	.info-bar:not(.info-bar--home) .info-bar__icon {
		justify-self: center;
		margin: 0;
	}

	.info-bar:not(.info-bar--home) .info-bar__text {
		align-items: start;
		width: 100%;
		max-width: none;
		text-align: left;
	}

	.info-bar:not(.info-bar--home) .info-bar__cell + .info-bar__cell,
	.info-bar:not(.info-bar--home) .info-bar__cell:nth-child(n + 3) {
		border-top: 1px solid var(--border-light);
	}
}

@media (min-width: 768px) {
	.page-hero--info-bar {
		padding-block: var(--space-128) var(--space-80);
	}

	.section-body {
		padding-block: var(--section-padding-tablet);
	}
}

@media (min-width: 1024px) {
	.page-hero--info-bar {
		padding-block: var(--space-128) var(--space-80);
	}

	.section-body {
		padding-block: var(--section-padding-desktop);
	}
}

/* -- src/blocks/perks-cascade.css (canonical component source) -- */
/**
 * roarr-perks-cascade — the "See all pass perks" expandable panel used on
 * roarr-annual-pass.html's rate-rail (roarr-perks-cascade--scroll variant:
 * a green trigger button + a hidden panel of 4 perk-group checklists).
 * Ported from design-reference/mocks/css/styles.css (~lines 13971-14100,
 * 14990-15100, 15957-15990). The base .roarr-perks-cascade rules assume a
 * <details>/<summary> shell (a second, --aside variant used elsewhere in the
 * mock); the --scroll variant used here is a plain button + panel instead
 * (see PerksCascade.tsx), so only the rules that variant actually needs are
 * ported — the <details>-specific base summary/[open] rules are skipped as
 * out of scope for this composition (no mock instance on the Batch A pages
 * uses the --aside/details variant).
 */

.roarr-perks-cascade__body {
	display: grid;
	gap: var(--space-24);
	padding-top: var(--space-16);
}

.roarr-perks-cascade .roarr-copy {
	max-width: none;
	color: var(--text-secondary);
	font-size: var(--text-sm);
}

.roarr-perks-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-16);
}

.roarr-perks-group {
	display: grid;
	gap: var(--space-16);
	align-content: start;
	padding: var(--card-padding-mobile);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
	background: color-mix(in srgb, var(--cream) 70%, var(--white));
}

.roarr-perks-group h3 {
	margin: 0;
	color: var(--text-primary);
	font-family: var(--font-heading);
	font-size: var(--h3);
	font-weight: var(--weight-bold);
	line-height: var(--lh-tight);
	letter-spacing: 0;
	text-transform: none;
}

.check-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--space-16);
}

.check-list li {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-8);
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: var(--lh-relaxed);
	color: var(--wp--preset--color--text-secondary);
	padding-inline-start: calc(var(--icon-badge-size-sm) + var(--space-8));
}

.check-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	translate: 0 -50%;
	flex-shrink: 0;
	width: var(--icon-badge-size-sm);
	height: var(--icon-badge-size-sm);
	border: 1px solid var(--icon-badge-border);
	border-radius: var(--radius-pill);
	background: var(--icon-badge-bg);
}

/* See-all-perks trigger — green button that lives in the perks column,
   stacked directly under the cards by the media's own gap. */
.roarr-perks-cascade__trigger {
	display: grid;
	grid-template-columns: var(--icon-md) minmax(0, 1fr) var(--icon-md);
	min-height: var(--button-min-height);
	align-items: center;
	gap: var(--space-16);
	width: 100%;
	padding: 0 var(--button-padding-inline);
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--primary);
	color: var(--text-primary);
	font: inherit;
	font-size: var(--text-sm);
	font-weight: var(--weight-heavy);
	line-height: var(--lh-tight);
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background var(--speed) var(--ease),
		color var(--speed) var(--ease);
}

.roarr-perks-cascade__trigger > span:first-child {
	grid-column: 2;
	justify-self: center;
}

.roarr-perks-cascade__trigger:hover,
.roarr-perks-cascade__trigger:focus-visible {
	background: var(--primary-hover);
	color: var(--text-primary);
}

.roarr-perks-cascade__chev {
	grid-column: 3;
	justify-self: end;
	width: var(--icon-md);
	height: var(--icon-md);
	color: currentColor;
	transform: rotate(-90deg);
	transition: transform 0.25s var(--ease);
}

.roarr-perks-cascade__trigger .roarr-perks-cascade__chev .roarr-ui-icon {
	width: var(--icon-sm);
	height: var(--icon-sm);
}

.roarr-perks-cascade__trigger[aria-expanded='true'] .roarr-perks-cascade__chev {
	transform: rotate(0);
}

/* --scroll: no `display` here so the [hidden] attribute (collapsed state)
   wins; `border: 0` cancels the base .roarr-perks-cascade top rule. */
.roarr-perks-cascade--scroll {
	grid-column: 1 / -1;
	margin-top: var(--space-16);
	border: 0;
	background: transparent;
}

.roarr-perks-cascade--scroll .roarr-perks-cascade__body {
	margin-top: 0;
	padding: var(--panel-padding-mobile);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-lg);
	background: var(--card-on-light);
}

.roarr-perks-cascade--scroll .roarr-perks-grid {
	grid-template-columns: 1fr;
}

.roarr-perks-cascade--scroll .roarr-perks-group {
	padding: var(--card-padding-mobile);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-lg);
	background: var(--card-on-light);
}

.roarr-perks-cascade--scroll .roarr-perks-group h3 {
	font-size: var(--text-base);
}

@media (max-width: 767px) {
	.roarr-perks-cascade--scroll .roarr-perks-cascade__body {
		padding: var(--panel-padding-mobile);
	}
}

@media (min-width: 768px) {
	.roarr-perks-cascade--scroll .roarr-perks-group {
		padding: var(--card-padding-tablet);
	}

	.roarr-perks-cascade--scroll .roarr-perks-cascade__body {
		padding: var(--panel-padding-tablet);
	}

	.roarr-perks-cascade--scroll .roarr-perks-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-24);
	}
}

/* -- src/blocks/rate-table.css (canonical component source) -- */
/**
 * Front-end styles for roarr/rate-table. Ported from design-reference/mocks
 * css/styles.css (.roarr-rate-card / .roarr-rate-table rules).
 *
 * DEVIATION: the mock scopes most of this under body classes like
 * :is(.pricing-page-mock, .whats-open-page, .rates-page) — dropped here,
 * matching roarr/split-rates' precedent (see its readme.txt): the block
 * always carries its own class names, so rules apply directly off them
 * with no host-page dependency. Values are otherwise verbatim, including
 * hardcoded breakpoints, which the mock itself hardcodes.
 */

.roarr-rate-stack {
	display: grid;
	gap: var(--space-24);
}

.roarr-rate-stack > .roarr-rate-table__note {
	margin: calc(-1 * var(--space-16)) 0 0;
	padding-inline: var(--space-24);
}

.roarr-rate-card {
	overflow: hidden;
	border: 1px solid var(--border-light);
	border-radius: var(--radius-lg);
	background: var(--card-on-light);
	box-shadow: var(--shadow-card-soft);
}

.roarr-rate-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-sm);
}

.roarr-rate-table__caption {
	caption-side: top;
	padding: var(--space-24) var(--space-24) var(--space-8);
	color: var(--text-secondary);
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	line-height: var(--lh-normal);
	text-align: center;
}

.roarr-rate-table th,
.roarr-rate-table td {
	padding: var(--space-16) var(--space-24);
	text-align: left;
	border-bottom: 1px solid var(--border-light);
	vertical-align: middle;
}

.roarr-rate-table th:first-child,
.roarr-rate-table td:first-child {
	padding-left: var(--space-24);
}

.roarr-rate-table th:last-child,
.roarr-rate-table td:last-child {
	padding-right: var(--space-24);
}

.roarr-rate-table thead th {
	padding-bottom: var(--space-16);
	color: var(--text-primary);
	font-size: var(--text-xs);
	font-weight: var(--weight-heavy);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: bottom;
	border-bottom: 2px solid var(--border-light);
}

.roarr-rate-table tbody th {
	font-weight: var(--weight-bold);
	font-size: var(--text-base);
	color: var(--text-primary);
}

.roarr-rate-table .is-price {
	color: var(--text-secondary);
	font-weight: var(--weight-medium);
	font-variant-numeric: tabular-nums;
}

.roarr-rate-table td:last-child,
.roarr-rate-table th:last-child {
	text-align: right;
	white-space: nowrap;
}

.roarr-rate-table strong {
	color: var(--amber);
	font-size: var(--text-xl);
	font-weight: var(--weight-heavy);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

.roarr-rate-table tbody tr {
	transition: background var(--speed) var(--ease);
}

.roarr-rate-table--iconned tbody tr:nth-child(even) {
	background: color-mix(in srgb, var(--warm-sand) 12%, transparent);
}

.roarr-rate-table tbody tr:hover {
	background: color-mix(in srgb, var(--warm-sand) 22%, transparent);
}

.roarr-rate-table tbody tr:last-child th,
.roarr-rate-table tbody tr:last-child td {
	border-bottom: 0;
}

/* Ticket name + leading glyph */
.roarr-rate-table__tk {
	display: flex;
	align-items: center;
	gap: var(--space-16);
}

.roarr-rate-table__icon {
	flex: 0 0 var(--icon-badge-size-xl);
	width: var(--icon-badge-size-xl);
	height: var(--icon-badge-size-xl);
}

.roarr-rate-table__icon svg {
	width: var(--icon-badge-glyph-lg);
	height: var(--icon-badge-glyph-lg);
}

.roarr-rate-table__label {
	display: grid;
	gap: var(--space-8);
	min-width: 0;
}

.roarr-rate-table__title {
	color: var(--text-primary);
	font-size: var(--text-base);
	font-weight: var(--weight-bold);
	line-height: var(--lh-tight);
}

.roarr-rate-table__desc {
	color: var(--text-secondary);
	font-size: var(--text-xs);
	font-weight: var(--weight-regular);
	line-height: var(--lh-normal);
}

.roarr-rate-table__from {
	display: block;
	margin-top: var(--space-8);
	color: var(--text-secondary);
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Day-admission variant: centre the figure columns, ticket column stays left */
.roarr-rate-table--day-admission {
	table-layout: fixed;
}

.roarr-rate-table--day-admission thead th:not(:first-child),
.roarr-rate-table--day-admission thead th:last-child,
.roarr-rate-table--day-admission tbody td,
.roarr-rate-table--day-admission tbody td:last-child {
	text-align: center;
}

.roarr-rate-table--day-admission thead th:first-child { width: 36%; }
.roarr-rate-table--day-admission thead th:nth-child(2) { width: 17%; }
.roarr-rate-table--day-admission thead th:nth-child(3) { width: 20%; }
.roarr-rate-table--day-admission thead th:nth-child(4) { width: 27%; }

/* Opening-times variant: fixed layout, everything left-aligned and wraps */
.roarr-rate-table--opening-times {
	table-layout: fixed;
}

.roarr-rate-table--opening-times th:first-child {
	width: 28%;
}

.roarr-rate-table--opening-times th,
.roarr-rate-table--opening-times td,
.roarr-rate-table--opening-times td:last-child,
.roarr-rate-table--opening-times th:last-child {
	text-align: left;
	white-space: normal;
	overflow-wrap: break-word;
}

/* Iconned variant — the premium price-list look used on Tickets & Passes /
   Annual Pass: bigger icon badge, heavier row typography. */
.roarr-rate-table--iconned {
	background: var(--card-on-light);
	font-size: var(--text-base);
}

.roarr-rate-table--iconned th,
.roarr-rate-table--iconned td {
	padding-block: var(--space-8);
	padding-inline: var(--space-16);
}

.roarr-rate-table--iconned th:first-child,
.roarr-rate-table--iconned td:first-child {
	padding-left: var(--space-24);
}

.roarr-rate-table--iconned th:last-child,
.roarr-rate-table--iconned td:last-child {
	padding-right: var(--space-24);
}

.roarr-rate-table--iconned thead th {
	padding-top: var(--space-16);
	padding-bottom: var(--space-16);
}

.roarr-rate-table--iconned tbody th {
	font-size: var(--text-lg);
	font-weight: var(--weight-heavy);
}

.roarr-rate-table--iconned .is-price,
.roarr-rate-table--iconned tbody td:not(:last-child) {
	font-size: var(--text-lg);
	font-weight: var(--weight-heavy);
	line-height: var(--lh-snug);
}

@media (min-width: 768px) {
	.roarr-rate-table__tk {
		white-space: nowrap;
	}
}

.roarr-rate-table--iconned strong {
	font-size: var(--rate-price-size);
	line-height: var(--lh-solid);
}

.roarr-rate-table--iconned .roarr-rate-table__from {
	color: var(--text-primary);
	font-size: var(--text-sm);
	font-weight: var(--weight-heavy);
}

/* CTA variant — highlighted price + chevron, whole rows act as buttons */
.roarr-rate-table--cta {
	display: block;
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--card-on-light);
}

.roarr-rate-table--cta thead {
	display: none;
}

.roarr-rate-table--cta tbody {
	display: grid;
	padding: 0;
}

.roarr-rate-table--cta tbody tr,
.roarr-rate-table--cta.roarr-rate-table--stacked tbody tr {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-24);
	padding: var(--space-16) var(--space-24);
	border: 0;
	border-radius: 0;
	background: transparent;
}

.roarr-rate-table--cta tbody tr + tr {
	border-top: 1px solid var(--border-light);
}

.roarr-rate-table--cta tbody tr:hover,
.roarr-rate-table--cta tbody tr:focus-within {
	background: color-mix(in srgb, var(--primary) 8%, var(--card-on-light));
}

.roarr-rate-table--clickable tbody tr {
	position: relative;
	cursor: pointer;
}

.roarr-rate-table--clickable tbody tr:nth-child(even) {
	background: color-mix(in srgb, var(--primary) 5%, var(--card-on-light));
}

.roarr-rate-table--clickable tbody tr:hover,
.roarr-rate-table--clickable tbody tr:focus-within {
	background: color-mix(in srgb, var(--primary) 8%, var(--card-on-light));
}

.roarr-rate-table--clickable tbody tr:focus-within {
	box-shadow: inset 0 0 0 2px var(--primary);
}

.roarr-rate-table__row-link {
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
	color: inherit;
	text-decoration: none;
}

.roarr-rate-table__row-link:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: -2px;
}

@media (hover: none) and (pointer: coarse) {
	.roarr-rate-table--clickable tbody tr:focus-within {
		box-shadow: none;
	}

	.roarr-rate-table__row-link {
		-webkit-tap-highlight-color: transparent;
	}

	.roarr-rate-table__row-link:focus-visible {
		outline: none;
	}
}

.roarr-rate-table--cta tbody th,
.roarr-rate-table--cta tbody td,
.roarr-rate-table--cta.roarr-rate-table--stacked tbody th,
.roarr-rate-table--cta.roarr-rate-table--stacked tbody td,
.roarr-rate-table--cta.roarr-rate-table--stacked tbody tr:last-child th,
.roarr-rate-table--cta.roarr-rate-table--stacked tbody tr:last-child td {
	display: block;
	min-width: 0;
	width: auto;
	padding: 0;
	border: 0;
	text-align: left;
	white-space: normal;
}

.roarr-rate-table--cta th:first-child,
.roarr-rate-table--cta td:first-child,
.roarr-rate-table--cta th:last-child,
.roarr-rate-table--cta td:last-child {
	padding: 0;
}

.roarr-rate-table--cta .roarr-rate-table__tk,
.roarr-rate-table--cta.roarr-rate-table--stacked .roarr-rate-table__tk {
	display: grid;
	grid-template-columns: var(--icon-badge-size-xl) minmax(0, 1fr);
	align-items: center;
	gap: var(--space-16);
	min-width: 0;
	white-space: normal;
	overflow-wrap: normal;
}

.roarr-rate-table--cta .roarr-rate-table__icon,
.roarr-rate-table--cta.roarr-rate-table--stacked .roarr-rate-table__icon {
	display: inline-grid;
	flex-basis: var(--icon-badge-size-xl);
	width: var(--icon-badge-size-xl);
	height: var(--icon-badge-size-xl);
	border: 0;
	background: color-mix(in srgb, var(--primary) 11%, var(--card-on-light));
}

.roarr-rate-table--cta .roarr-rate-table__label {
	display: grid;
	gap: var(--space-8);
	min-width: 0;
}

.roarr-rate-table--cta .roarr-rate-table__title {
	color: var(--text-primary);
	font-size: var(--text-base);
	font-weight: var(--weight-bold);
	line-height: var(--lh-tight);
}

.roarr-rate-table--cta .roarr-rate-table__desc {
	color: var(--text-secondary);
	font-size: var(--text-xs);
	font-weight: var(--weight-regular);
	line-height: var(--lh-normal);
}

.roarr-rate-table--cta .roarr-rate-table__price-cta {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-24);
	white-space: nowrap;
}

.roarr-rate-table--cta .roarr-rate-table__price-value {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-8);
	white-space: nowrap;
}

.roarr-rate-table--cta strong,
.roarr-rate-table--cta.roarr-rate-table--stacked tbody td:last-child strong {
	display: block;
	color: var(--amber);
	font-size: var(--rate-price-size);
	font-weight: var(--weight-heavy);
	line-height: var(--lh-solid);
}

.roarr-rate-table--cta .roarr-rate-table__from {
	order: -1;
	display: block;
	margin: 0;
	color: var(--text-secondary);
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	line-height: var(--lh-solid);
	text-align: right;
	text-transform: uppercase;
}

.roarr-rate-table--cta .roarr-rate-table__cta-icon {
	display: inline-grid;
	place-items: center;
	width: var(--icon-md);
	height: var(--icon-md);
	color: var(--text-primary);
}

.roarr-rate-table--cta .roarr-rate-table__cta-icon .roarr-ui-icon {
	width: var(--icon-sm);
	height: var(--icon-sm);
	transform: rotate(-90deg);
}

.roarr-rate-table__note {
	margin: var(--space-16) 0 0;
	color: var(--text-secondary);
	font-size: var(--text-xs);
	line-height: var(--lh-relaxed);
}

.roarr-rate-table__note--with-icon {
	display: block;
}

.roarr-rate-table__note--with-icon:has(> :is(.roarr-rate-table__note-icon, .roarr-icon, [data-type="roarr/icon"])) {
	display: grid;
	grid-template-columns: var(--icon-badge-size-sm) minmax(0, 1fr);
	align-items: start;
	gap: var(--space-16);
}

.roarr-rate-table__note-icon {
	display: inline-grid;
	place-items: center;
	width: var(--icon-badge-size-sm);
	height: var(--icon-badge-size-sm);
	border: 1px solid var(--icon-badge-border);
	border-radius: var(--radius-pill);
	color: var(--icon-badge-color);
}

.roarr-rate-table__note-icon .roarr-ui-icon {
	width: var(--icon-badge-glyph-sm);
	height: var(--icon-badge-glyph-sm);
}

@media (max-width: 767px) {
	.roarr-rate-table--stacked .roarr-rate-table__from {
		display: none;
	}

	.roarr-rate-table--stacked {
		display: block;
		width: 100%;
		min-width: 0;
		table-layout: auto;
	}

	.roarr-rate-table--stacked .roarr-rate-table__caption {
		display: block;
		width: auto;
		padding: var(--space-24) var(--space-24) var(--space-8);
		text-align: left;
	}

	.roarr-rate-table--stacked thead {
		display: block;
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.roarr-rate-table--stacked thead tr,
	.roarr-rate-table--stacked thead th {
		display: block;
		width: 1px;
		height: 1px;
		padding: 0;
		border: 0;
	}

	.roarr-rate-table--stacked tbody {
		display: grid;
		gap: var(--space-8);
		padding: var(--space-16) var(--space-16) var(--space-16);
	}

	.roarr-rate-table--stacked tbody tr {
		display: grid;
		gap: var(--space-8);
		padding: var(--space-16);
		border: 1px solid var(--border-light);
		border-radius: var(--radius-md);
		background: color-mix(in srgb, var(--warm-sand) 16%, var(--card-on-light));
	}

	.roarr-rate-table--stacked tbody th,
	.roarr-rate-table--stacked tbody td,
	.roarr-rate-table--stacked tbody tr:last-child th,
	.roarr-rate-table--stacked tbody tr:last-child td {
		display: block;
		padding: 0;
		border-bottom: 0;
	}

	.roarr-rate-table--stacked tbody th {
		padding-bottom: var(--space-8);
		border-bottom: 1px solid var(--border-light);
		justify-content: flex-start;
	}

	.roarr-rate-table--stacked tbody td {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: baseline;
		gap: var(--space-16);
		color: var(--text-primary);
		text-align: right;
		white-space: normal;
	}

	.roarr-rate-table--stacked tbody tr:last-child td {
		display: grid;
		border-bottom: 0;
	}

	.roarr-rate-table--stacked strong {
		font-size: var(--text-lg);
	}

	.roarr-rate-table--cta tbody tr,
	.roarr-rate-table--cta.roarr-rate-table--stacked tbody tr,
	.roarr-rate-table--cta.roarr-rate-table--annual-pass tbody tr {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-16);
		padding: var(--space-16);
	}

	.roarr-rate-table--cta .roarr-rate-table__tk,
	.roarr-rate-table--cta.roarr-rate-table--stacked .roarr-rate-table__tk {
		grid-template-columns: var(--icon-badge-size-xl) minmax(0, 1fr);
	}

	.roarr-rate-table--cta .roarr-rate-table__price-cta {
		width: 100%;
		justify-content: flex-end;
		gap: var(--space-16);
	}

	.roarr-rate-table--cta .roarr-rate-table__price-value {
		display: inline-flex;
		align-items: baseline;
		gap: var(--space-8);
		width: auto;
		justify-items: end;
		text-align: right;
		white-space: nowrap;
	}

	.roarr-rate-table--cta .roarr-rate-table__from {
		text-align: right;
	}
}

@media (max-width: 640px) {
	.roarr-rate-table--opening-times {
		display: block;
		table-layout: auto;
	}
}

@media (max-width: 360px) {
	.roarr-rate-table--day-admission.roarr-rate-table--stacked tbody th,
	.roarr-rate-table--day-admission.roarr-rate-table--stacked tbody td,
	.roarr-rate-table--day-admission.roarr-rate-table--stacked .is-price {
		font-size: var(--text-xs);
	}
}

/* -- src/blocks/review-strip.css (canonical component source) -- */
/**
 * Front-end styles for the review-strip section (roarr-reviews-band).
 * Ported verbatim from design-reference/mocks css/styles.css
 * (.roarr-reviews-band / .roarr-review-card / .roarr-reviews-band__quote-card
 * rules — home-page.html lines 504-554).
 *
 * Background: `roarr-section--block-green` (ROARR dark green, P554C) — the
 * 05/06-07 rebrand-colour-revert landed for real on the frozen mock
 * (home-page.html line 504); the title's `em` flips to yellow on this band
 * (mock: `.roarr-section--block-green .roarr-reviews-band__title em`) so it
 * pops off the green instead of the site-wide primary-green em treatment.
 *
 * DEVIATION: the mock renders the star row as 5 literal star text glyphs
 * sized/spaced via font-size + letter-spacing on `.roarr-review-card__stars`
 * — core has no star-rating primitive, so the composition uses 5 real
 * roarr/icon "star" instances instead of faking it with text (per the
 * building-roarr-blocks skill). The text-sizing rule is kept (still applies
 * if any text content lands in that slot) and a flex row + icon-sizing rule
 * is added alongside it so the actual icon markup lays out correctly.
 *
 * Phone and tablet layouts deliberately use native scroll snap. The small
 * controller only moves the existing scroller; it never reparents or clones
 * cards, so Safari/Chrome resizing cannot strand a temporary DOM layout.
 */

.roarr-reviews-band {
  position: relative;
  overflow: hidden;
  padding-top: var(--space-56);
  padding-bottom: var(--section-padding-desktop);
  color: var(--text-on-dark);
}

@media (max-width: 639px) {
  .roarr-reviews-band {
    padding-top: var(--section-padding-mobile);
    padding-bottom: var(--space-16);
  }
}

.roarr-reviews-band__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--space-48);
  align-items: start;
}

.roarr-reviews-band__title {
  width: min(22ch, calc(100% - 2 * var(--gutter-mobile)));
  margin: 0 auto;
  color: var(--text-on-dark);
  font-family: var(--font-brand);
  font-size: var(--h2);
  font-weight: var(--weight-regular);
  font-synthesis: none;
  line-height: var(--lh-tight);
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
}

.roarr-reviews-band__title em {
  color: var(--primary);
  font-style: normal;
}

.roarr-section--block-green .roarr-reviews-band__title em {
  color: var(--yellow);
}

.roarr-reviews-band__cards {
  display: grid;
  gap: var(--space-8);
  align-items: stretch;
}

/* Carousel dots — only rendered/used in the compact scroll-snap mode below;
   not built here yet (see header comment), kept hidden by default. */
.roarr-reviews-band__dots {
  display: none;
}

.roarr-review-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-24);
  min-height: calc(var(--space-120) * 3 - var(--space-8));
  padding: var(--space-32) var(--space-24);
  border: 1px solid color-mix(in srgb, var(--white) 58%, transparent);
  border-radius: var(--radius-lg);
  background: var(--card-on-light);
  color: var(--text-primary);
  box-shadow: 0 var(--space-16) var(--space-32) color-mix(in srgb, var(--deep-forest) 22%, transparent);
}

.roarr-review-card__stars {
  display: flex;
  gap: var(--space-4);
  color: var(--amber);
  font-size: var(--h3);
  line-height: var(--lh-solid);
  letter-spacing: var(--space-4);
  white-space: nowrap;
}

/* The production launch copy predates the explicit star group. Keep a
   no-JavaScript visual fallback; review-carousel.js replaces this generated
   row with accessible labelled markup when the frontend boots. */
.roarr-review-card:not(:has(> .roarr-review-card__stars))::before {
  color: var(--amber);
  content: "★★★★★";
  font-size: var(--h3);
  line-height: var(--lh-solid);
  letter-spacing: var(--space-4);
  white-space: nowrap;
}

.roarr-review-card__stars .roarr-ui-icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
  fill: currentColor;
  stroke: none;
}

.roarr-review-card p {
  align-self: center;
  padding-top: var(--space-8);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--lh-relaxed);
}

.roarr-review-card footer {
  display: flex;
  gap: var(--space-8);
  align-items: end;
  justify-content: space-between;
  align-self: end;
}

.roarr-review-card footer span {
  display: grid;
  gap: var(--space-8);
}

.roarr-review-card strong {
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-heavy);
  line-height: var(--lh-tight);
}

.roarr-review-card small {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--lh-tight);
}

.roarr-reviews-band__quote-card {
  position: relative;
  display: grid;
  align-self: stretch;
  min-height: calc(var(--space-120) * 3 - var(--space-8));
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: 0 var(--space-16) var(--space-32) color-mix(in srgb, var(--deep-forest) 30%, transparent);
}

.roarr-reviews-band__quote-card::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--deep-forest) 3%, transparent) 0%, color-mix(in srgb, var(--deep-forest) 52%, transparent) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--deep-forest) 34%, transparent) 0%, color-mix(in srgb, var(--deep-forest) 6%, transparent) 100%);
  content: "";
}

.roarr-reviews-band__quote-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.roarr-reviews-band__quote-card figcaption {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: end;
  gap: var(--space-8);
  min-height: 100%;
  padding: var(--space-24) var(--space-24) var(--space-8);
}

.roarr-reviews-band__quote-mark {
  color: var(--primary);
  font-family: var(--font-heading);
  font-size: var(--display);
  font-weight: var(--weight-heavy);
  line-height: 0.58;
  text-shadow: 0 2px 12px color-mix(in srgb, var(--deep-forest) 45%, transparent);
}

.roarr-reviews-band__quote-card blockquote {
  margin: 0;
}

.roarr-reviews-band__quote-card p {
  max-width: 15ch;
  margin: 0;
  color: var(--text-on-dark);
  font-family: var(--font-heading);
  font-size: var(--h3);
  font-weight: var(--weight-heavy);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow:
    0 1px 2px color-mix(in srgb, var(--deep-forest) 60%, transparent),
    0 6px 24px color-mix(in srgb, var(--deep-forest) 45%, transparent);
}

.roarr-reviews-band__quote-card cite {
  color: var(--text-on-dark);
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: var(--weight-heavy);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  text-shadow: 0 1px 3px color-mix(in srgb, var(--deep-forest) 60%, transparent);
}

@media (min-width: 1024px) {
  .roarr-review-card {
    padding: var(--space-24);
  }

  .roarr-review-card p {
    font-size: var(--text-base);
  }
}

@media (min-width: 1280px) {
  .roarr-reviews-band__cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1440px) {
  .roarr-reviews-band__inner {
    width: min(100% - var(--space-96), var(--container-wide));
  }
}

@media (max-width: 639px) {
  .roarr-review-card {
    min-height: calc(var(--space-120) * 2 + var(--space-48));
    gap: var(--space-16);
    padding: var(--space-24);
  }

  .roarr-review-card p {
    padding-top: 0;
  }

  .roarr-reviews-band__quote-card {
    min-height: calc(var(--space-120) * 2 + var(--space-48));
  }

  .roarr-reviews-band__quote-card figcaption {
    padding: var(--space-24) var(--space-24) var(--space-8);
  }

}

@media (max-width: 1279px) {
  /* Stable scroll-snap carousel. Tablets show two complete cards; phones
     override this below with one primary card and a preview of the next. */
  .roarr-reviews-band__cards {
    display: flex;
    gap: var(--space-8);
    width: 100%;
    margin-inline: 0;
    padding-inline: var(--gutter-mobile);
    scroll-padding-inline: var(--gutter-mobile);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .roarr-reviews-band__cards::-webkit-scrollbar {
    display: none;
  }

  .roarr-reviews-band__cards > * {
    /* Leave one full gap of inline breathing room after the second card.
       WebKit resolves flex percentages against padded scrollers differently
       at exactly 640px; this basis stays safely inside either calculation. */
    flex: 0 0 calc(50% - var(--space-8));
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .roarr-reviews-band__dots {
    display: flex;
    gap: var(--space-8);
    justify-content: center;
  }

  .roarr-reviews-band__dot {
    display: grid;
    place-items: center;
    width: var(--space-24);
    height: var(--space-24);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .roarr-reviews-band__dot::before {
    content: "";
    width: var(--space-8);
    height: var(--space-8);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--white) 38%, transparent);
    transition: width 0.28s var(--ease), background 0.28s var(--ease);
  }

  .roarr-reviews-band__dot.is-active::before {
    width: var(--space-20);
    background: var(--primary);
  }
}

@media (max-width: 639px) {
  .roarr-reviews-band__cards > * {
    flex-basis: min(86%, 330px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .roarr-reviews-band__cards {
    scroll-behavior: auto;
  }

  .roarr-reviews-band__dot::before {
    transition: none;
  }
}

/* -- src/blocks/roarr-section.css (canonical component source) -- */
/**
 * roarr/section — front-end + editor styles, ported verbatim (token-only)
 * from design-reference/mocks/css/styles.css (.roarr-section rules). This is
 * the rhythm backbone every other section-level block sits inside.
 *
 * Superset of the Phase-3 skeleton version (home/news/404 shells +
 * roarr/section-head only needed the base + padding-block steps + the
 * --wide inner variant) — this is the full port from
 * roarr-wp/renderers/section/styles.css now every block that needs a
 * background/wave/sticky-rail variant is wired.
 */

.roarr-section {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  color: var(--text-primary);
  padding-block: var(--section-padding-mobile);
}

.roarr-section--cream,
.roarr-section--parchment {
  /* Parchment (the darker cream) is retired as a section background — both
     modifiers render the same paper-grain cream surface. See styles.css
     comment above .roarr-section--parchment for the history. */
  background-color: var(--cream);
  background-image: var(--paper-cream);
  background-repeat: repeat;
}

.roarr-section--sticky-rail {
  overflow: visible;
}

.roarr-section.roarr-section--join-previous {
  padding-top: 0;
}

/* Quick-links / ticket-card row sits right under the hero info-bar — give it
   the mock's breathing room (.section-body:has(.roarr-ticket-card-grid) in
   design-reference styles.css) since the app has no .section-body wrapper,
   only .roarr-section wrapping the quartet/quick card-grid directly. */
.roarr-section:has(> .roarr-section__inner > .roarr-card-grid--quartet),
.roarr-section:has(> .roarr-section__inner > .roarr-card-grid--quick) {
  padding-top: var(--space-64);
  padding-bottom: var(--space-96);
}

/* Attractions band: the preceding treeline break sets --join-previous which
   zeroes padding-top — restore it so the section head isn't jammed to the top,
   and make the head's space above (padding-top) equal its space below (head
   margin) so the header sits symmetrically. */
.roarr-section:has(> .roarr-section__inner > .roarr-card-grid--home-attractions) {
  padding-top: var(--space-64);
}

.roarr-section:has(> .roarr-section__inner > .roarr-card-grid--home-attractions) .roarr-section__head {
  margin-bottom: var(--space-64);
}

.roarr-section--wave-top {
  --roarr-section-wave-height: var(--space-32);
  --roarr-section-wave-offset: var(--roarr-section-wave-height);
  overflow: visible;
  isolation: isolate;
}

.roarr-section--wave-top::before {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(-1 * var(--roarr-section-wave-offset) + 1px);
  width: 100%;
  height: var(--roarr-section-wave-height);
  transform: translateX(-50%);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: inherit;
  pointer-events: none;
  z-index: 0;
}

.roarr-section--wave-top > .roarr-section__inner {
  position: relative;
  z-index: 1;
}

.roarr-section--dark {
  background: var(--deep-forest);
  color: var(--text-on-dark);
}

.roarr-section--dark-forest-break {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--deep-forest) 22%, transparent), color-mix(in srgb, var(--deep-forest) 54%, transparent)),
    linear-gradient(90deg, color-mix(in srgb, var(--jungle-green) 24%, transparent), color-mix(in srgb, var(--deep-forest) 32%, transparent)),
    url('assets/img/home-events/event-leaves-texture.webp') center / cover no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--jungle-green) 42%, var(--deep-forest)), var(--deep-forest));
  color: var(--text-on-dark);
}

/* Ported from mocks (pricing.html #gift.pricing-gift-forest) — generalised
   off the page-scoped selector to the background itself, per this repo's own
   convention of dropping page-body-class scoping (see split-rates.css's
   DEVIATION note). Leaf-heading em needs a legible-on-dark treatment on this
   background; .roarr-copy already inherits --text-on-dark from the rule
   above, and is-style-roarr-secondary's border/color already key off
   currentColor (core-button-styles.css), so it self-adjusts here without a
   dedicated "-on-forest" button variant — the mock's separate class was
   redundant with that currentColor behaviour. */
.roarr-section--dark-forest-break .roarr-leaf-heading em {
  color: var(--primary-hover);
}

@media (max-width: 767px) {
  .roarr-section--dark-forest-break:has(+ .roarr-section-break) {
    padding-bottom: calc(var(--section-padding-mobile) + var(--space-80));
  }

  .roarr-section-break + .roarr-section {
    padding-top: calc(var(--section-padding-mobile) + var(--space-80));
  }
}

/* Brand colour-block bands (rebrand direction, landed 05/06-07) — flat
   full-palette fills. Cream paper-rip seams (.roarr-rip--up/--down) tear
   cream into these from neighbouring cream sections, so the torn edge reads
   against the colour. White text + green/yellow em flourishes carry through
   from the dark treatment. */
.roarr-section--block-pink {
  background-color: var(--wp--preset--color--pink);
  color: var(--text-on-dark);
}

.roarr-section--block-green {
  background-color: var(--wp--preset--color--green-dark);
  color: var(--text-on-dark);
}

.roarr-section--block-sky {
  background-color: var(--wp--preset--color--sky);
}

/* Annual Pass colour band */
.roarr-section--block-sage {
  background-color: var(--wp--preset--color--sage);
}

.roarr-pass-band {
  position: relative;
  --roarr-block-spiral-y: 76%;
  overflow: hidden;
}

.roarr-section.roarr-pass-band--banner {
  padding-block: 0;
}

.roarr-section.roarr-pass-band--banner > .roarr-section__inner {
  width: 100%;
  max-width: none;
  padding-inline: 0;
}

.roarr-pass-band__banner,
.roarr-pass-band__banner a,
.roarr-pass-band__banner picture,
.roarr-pass-band__banner img {
  display: block;
}

.roarr-pass-band__banner {
  max-width: calc(var(--container-wide-width) + (var(--space-128) * 5));
  margin-inline: auto;
}

.roarr-pass-band__banner img {
  width: 100%;
  height: auto;
}

.roarr-section--compact {
  padding-block: var(--section-padding-compact-mobile);
}

.roarr-section:is(.roarr-section--flush-top, .roarr-section-flush-top) {
  padding-top: 0;
}

.roarr-section__inner {
  width: min(100% - var(--space-48), var(--container-width));
  margin-inline: auto;
}

.roarr-section__inner--wide {
  width: min(100% - var(--space-48), var(--container-wide-width));
}

/* ── Break clearance rule ────────────────────────────────────────────
   A break (.roarr-section-break — skyline/leaf/canopy) overlays the bottom
   of the section ABOVE it (negative margin + translate in chrome.css), so
   that section must reserve room or its content sits in the trees. The
   server-side break pass (BlockRenderer) tags the section above with
   roarr-section--break-after-<type>; these rules give every tagged section
   the SAME clearance — the break's full height plus one --space-32
   breathing gap. Tune the gap here once, every seam on every page follows.
   Heights (--skyline-h/--leaf-h/--canopy-h) are defined in chrome.css next
   to the break artwork they size. */
:is(.roarr-section, .roarr-event-band, .roarr-reviews-band).roarr-section--break-after-skyline {
  padding-bottom: calc(var(--skyline-h) + var(--space-32));
}
:is(.roarr-section, .roarr-event-band, .roarr-reviews-band).roarr-section--break-after-leaf {
  padding-bottom: calc(var(--leaf-h) + var(--space-32));
}
:is(.roarr-section, .roarr-event-band, .roarr-reviews-band).roarr-section--break-after-canopy {
  padding-bottom: calc(var(--canopy-h) + var(--space-32));
}

/* The event controls need a full comfort gap before the treeline rises into
   the band. This block is not a .roarr-section, so it previously missed the
   shared clearance contract entirely. */
.roarr-event-band.roarr-section--break-after-skyline {
  padding-bottom: calc(var(--skyline-h) + var(--space-64));
}

@media (min-width: 640px) {
  .roarr-event-band.roarr-section--break-after-skyline {
    /* Mirror the skyline clearance above the carousel so the homepage
       events/news content sits evenly within the colour band. */
    padding-top: calc(var(--skyline-h) + var(--space-64));
  }
}

@media (max-width: 639px) {
  .roarr-event-band.roarr-section--break-after-skyline {
    padding-bottom: calc(var(--skyline-h) + var(--space-48));
  }
}

@media (min-width: 768px) {
  .roarr-section {
    padding-block: var(--section-padding-tablet);
  }

  .roarr-section--wave-top {
    --roarr-section-wave-height: var(--space-48);
  }

  .roarr-section--compact {
    padding-block: var(--section-padding-compact-tablet);
  }

  .roarr-section__inner {
    width: min(100% - var(--space-64), var(--container-width));
  }
}

@media (min-width: 1024px) {
  .roarr-section {
    padding-block: var(--section-padding-desktop);
  }

  .roarr-section--compact {
    padding-block: var(--section-padding-compact-desktop);
  }

  .roarr-section__inner {
    width: min(100% - var(--space-96), var(--container-width));
  }
}

.roarr-canopy-break + .roarr-section {
  padding-top: calc(var(--canopy-h) + var(--section-padding-mobile));
}

@media (min-width: 768px) {
  .roarr-canopy-break + .roarr-section {
    padding-top: calc(var(--canopy-h) + var(--section-padding-tablet));
  }
}

@media (min-width: 1024px) {
  .roarr-canopy-break + .roarr-section {
    padding-top: calc(var(--canopy-h) + var(--section-padding-desktop));
  }
}

/* ── Controlled cream-section footprint trails ─────────────────────
   Footprints are opt-in presentation contracts on an existing core/group.
   They are never selected from section order or inferred from inner content:
   the chosen class stays attached to the chosen saved block. Home's existing
   home-attractions anchor is the first approved placement and follows the
   right-three trail while the role-gated control is built. The asset keeps the
   mock's original brown at exactly 15% alpha. */
.roarr-section:is(
  .roarr-section--cream,
  .roarr-section--parchment,
  .is-style-roarr-bg-cream,
  .is-style-roarr-bg-parchment
):is(
  .roarr-footprints--right-3,
  .roarr-footprints--left-3,
  .roarr-footprints--edge-2,
  .roarr-footprints--long-4,
  .roarr-footprints-plan-4,
  :where(#home-attractions)
) {
  --roarr-footprint: url("assets/img/decor/footprint-15.png");
  --roarr-footprint-size: 44px;
  background-blend-mode: normal;
}

.roarr-section:is(.roarr-footprints--right-3, :where(#home-attractions)) {
  background-image:
    var(--roarr-footprint),
    var(--roarr-footprint),
    var(--roarr-footprint),
    var(--paper-cream);
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-size:
    var(--roarr-footprint-size) auto,
    var(--roarr-footprint-size) auto,
    var(--roarr-footprint-size) auto,
    auto;
  background-position:
    right 2% top 58%,
    right 10% top 72%,
    right 2% top 86%,
    0 0;
}

.roarr-section[class][class].roarr-footprints--left-3 {
  background-image:
    var(--roarr-footprint),
    var(--roarr-footprint),
    var(--roarr-footprint),
    var(--paper-cream);
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-size:
    var(--roarr-footprint-size) auto,
    var(--roarr-footprint-size) auto,
    var(--roarr-footprint-size) auto,
    auto;
  background-position:
    left 2% top 58%,
    left 10% top 72%,
    left 2% top 86%,
    0 0;
}

.roarr-section[class][class].roarr-footprints--edge-2 {
  background-image:
    var(--roarr-footprint),
    var(--roarr-footprint),
    var(--paper-cream);
  background-repeat: no-repeat, no-repeat, repeat;
  background-size:
    var(--roarr-footprint-size) auto,
    var(--roarr-footprint-size) auto,
    auto;
  background-position:
    right 2% top 68%,
    right 12% top 84%,
    0 0;
}

.roarr-section[class][class].roarr-footprints--long-4 {
  background-image:
    var(--roarr-footprint),
    var(--roarr-footprint),
    var(--roarr-footprint),
    var(--roarr-footprint),
    var(--paper-cream);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-size:
    var(--roarr-footprint-size) auto,
    var(--roarr-footprint-size) auto,
    var(--roarr-footprint-size) auto,
    var(--roarr-footprint-size) auto,
    auto;
  background-position:
    left 3% top 40%,
    left 11% top 55%,
    left 3% top 70%,
    left 11% top 85%,
    0 0;
}

/* Homepage plan trail: desktop steps up from the lower-left in an alternating
   T-rex trackway. Tablet uses a tighter left/right stride in the clear lane
   between the transparent map artwork and the glance list. */
.roarr-section.roarr-footprints-plan-4 {
  background-image:
    var(--roarr-footprint),
    var(--roarr-footprint),
    var(--roarr-footprint),
    var(--roarr-footprint),
    var(--paper-cream);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-size:
    72px auto,
    72px auto,
    72px auto,
    72px auto,
    auto;
  background-position:
    left 12% bottom 4%,
    left 21% bottom 18%,
    left 31% bottom 10%,
    left 40% bottom 27%,
    0 0;
}

@media (min-width: 640px) and (max-width: 1023px) {
  .roarr-section:is(
    .roarr-footprints--right-3,
    .roarr-footprints--left-3,
    .roarr-footprints--edge-2,
    .roarr-footprints-plan-4,
    :where(#home-attractions)
  ) {
    --roarr-footprint-size: 54px;
  }

  .roarr-section:is(
    .roarr-footprints--right-3,
    .roarr-footprints--edge-2,
    :where(#home-attractions)
  ) {
    background-image:
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--paper-cream);
    background-repeat: no-repeat, no-repeat, repeat;
    background-size:
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      auto;
    background-position:
      left 100% top 90%,
      left 85% top 94%,
      0 0;
  }

  .roarr-section[class][class].roarr-footprints--left-3 {
    background-image:
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--paper-cream);
    background-repeat: no-repeat, no-repeat, repeat;
    background-size:
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      auto;
    background-position:
      right 100% top 90%,
      right 85% top 94%,
      0 0;
  }

  .roarr-section[class][class].roarr-footprints--long-4 {
    background-image: var(--paper-cream);
    background-repeat: repeat;
    background-size: auto;
    background-position: 0 0;
  }

  .roarr-section.roarr-footprints-plan-4 {
    background-image:
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--paper-cream);
    background-repeat: no-repeat, no-repeat, no-repeat, repeat;
    background-size:
      54px auto,
      54px auto,
      54px auto,
      auto;
    background-position:
      left 8% top 56%,
      left 22% top 61%,
      left 10% top 66%,
      0 0;
  }
}

@media (min-width: 1024px) {
  .roarr-section:is(
    .roarr-footprints--right-3,
    .roarr-footprints--left-3,
    .roarr-footprints--edge-2,
    .roarr-footprints--long-4,
    .roarr-footprints-plan-4,
    :where(#home-attractions)
  ) {
    --roarr-footprint-size: 72px;
  }
}

@media (max-width: 639px) {
  .roarr-section:is(
    .roarr-footprints--right-3,
    .roarr-footprints--edge-2,
    :where(#home-attractions)
  ) {
    background-image:
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--paper-cream);
    background-repeat: no-repeat, no-repeat, repeat;
    background-size:
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      auto;
    background-position:
      left 100% top 89%,
      left 75% top 93%,
      0 0;
  }

  .roarr-section[class][class].roarr-footprints--left-3 {
    background-image:
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--paper-cream);
    background-repeat: no-repeat, no-repeat, repeat;
    background-size:
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      auto;
    background-position:
      right 100% top 89%,
      right 75% top 93%,
      0 0;
  }

  .roarr-section[class][class].roarr-footprints--long-4 {
    background-image: var(--paper-cream);
    background-repeat: repeat;
    background-size: auto;
    background-position: 0 0;
  }

  .roarr-section.roarr-footprints-plan-4 {
    background-image:
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--paper-cream);
    background-repeat: no-repeat, no-repeat, repeat;
    background-size:
      44px auto,
      44px auto,
      auto;
    background-position:
      left 3% top 48%,
      left 20% top 54%,
      0 0;
  }
}

/* High-risk section shapes cannot opt in even if a class is added by mistake. */
.roarr-section:is(
  .roarr-section--compact,
  .is-style-roarr-section-compact,
  .roarr-section--flush-top,
  .roarr-section--join-previous,
  .roarr-contact-section,
  .roarr-store-join-previous,
  .roarr-store-compact
):is(
  .roarr-footprints--right-3,
  .roarr-footprints--left-3,
  .roarr-footprints--edge-2,
  .roarr-footprints--long-4,
  .roarr-footprints-plan-4,
  :where(#home-attractions)
) {
  background-image: var(--paper-cream);
  background-repeat: repeat;
  background-size: auto;
  background-position: 0 0;
}

/* ── Site-wide cream-section trackways ─────────────────────────────
   Interior pages opt into one of these four saved-block contracts. The
   trackway always lives inside the section's empty bottom padding lane, so it
   cannot sit behind headings, cards, forms or FAQ controls. Each step is
   offset across the row to read as an alternating T-rex gait. Phones and
   tablets deliberately render fewer, smaller steps than desktop. These rules
   come after the legacy risk guard because the bottom-lane contract is safe
   for compact, flush-top and joined cream sections too. */
.roarr-section:is(
  .roarr-section--cream,
  .roarr-section--parchment,
  .is-style-roarr-bg-cream,
  .is-style-roarr-bg-parchment
):is(
  .roarr-footprints--right-3,
  .roarr-footprints--left-3,
  .roarr-footprints--edge-2,
  .roarr-footprints--long-4
) {
  --roarr-footprint-size: 32px;
  --roarr-footprint-break-lift: 0px;
  --roarr-footprint-edge-inset: 8%;
  --roarr-footprint-lane-offset: calc(var(--roarr-footprint-edge-inset) + var(--roarr-footprint-size) + var(--space-8));
  --roarr-footprint-stride: 28px;
  --roarr-footprint-trail-height: calc(var(--roarr-footprint-size) + var(--roarr-footprint-stride));
  padding-bottom: max(var(--section-padding-mobile), calc(var(--roarr-footprint-trail-height) + var(--space-24)));
  background-blend-mode: normal;
}

/* Keep the lowest step above any artwork that rises into the section's bottom
   edge. Tall skyline/leaf/canopy breaks already reserve matching padding; the
   footprint lift uses that same height. A CTA brush only overlaps a shallow
   strip, so reserve a smaller dedicated lane before lifting its trackway. */
.roarr-section[class][class].roarr-section--break-after-skyline:is(
  .roarr-footprints--right-3,
  .roarr-footprints--left-3,
  .roarr-footprints--edge-2,
  .roarr-footprints--long-4
) {
  --roarr-footprint-break-lift: var(--skyline-h);
  padding-bottom: calc(var(--skyline-h) + var(--roarr-footprint-trail-height) + var(--space-32));
}

.roarr-section[class][class].roarr-section--break-after-leaf:is(
  .roarr-footprints--right-3,
  .roarr-footprints--left-3,
  .roarr-footprints--edge-2,
  .roarr-footprints--long-4
) {
  --roarr-footprint-break-lift: var(--leaf-h);
  padding-bottom: calc(var(--leaf-h) + var(--roarr-footprint-trail-height) + var(--space-32));
}

.roarr-section[class][class].roarr-section--break-after-canopy:is(
  .roarr-footprints--right-3,
  .roarr-footprints--left-3,
  .roarr-footprints--edge-2,
  .roarr-footprints--long-4
) {
  --roarr-footprint-break-lift: var(--canopy-h);
  padding-bottom: calc(var(--canopy-h) + var(--roarr-footprint-trail-height) + var(--space-32));
}

.roarr-section[class][class]:has(+ .roarr-rip--down):is(
  .roarr-footprints--right-3,
  .roarr-footprints--left-3,
  .roarr-footprints--edge-2,
  .roarr-footprints--long-4
) {
  --roarr-footprint-break-lift: var(--space-32);
  padding-bottom: max(
    calc(var(--section-padding-mobile) + var(--space-48)),
    calc(var(--space-32) + var(--roarr-footprint-trail-height) + var(--space-24))
  );
}

.roarr-section[class][class].roarr-footprints--right-3 {
  background-image:
    var(--roarr-footprint),
    var(--roarr-footprint),
    var(--paper-cream);
  background-repeat: no-repeat, no-repeat, repeat;
  background-size:
    var(--roarr-footprint-size) auto,
    var(--roarr-footprint-size) auto,
    auto;
  background-position:
    right var(--roarr-footprint-edge-inset) bottom calc(var(--roarr-footprint-break-lift) + 6px),
    right var(--roarr-footprint-lane-offset) bottom calc(var(--roarr-footprint-break-lift) + var(--roarr-footprint-stride) + 6px),
    0 0;
}

.roarr-section[class][class].roarr-footprints--left-3 {
  background-image:
    var(--roarr-footprint),
    var(--roarr-footprint),
    var(--paper-cream);
  background-repeat: no-repeat, no-repeat, repeat;
  background-size:
    var(--roarr-footprint-size) auto,
    var(--roarr-footprint-size) auto,
    auto;
  background-position:
    left var(--roarr-footprint-edge-inset) bottom calc(var(--roarr-footprint-break-lift) + 6px),
    left var(--roarr-footprint-lane-offset) bottom calc(var(--roarr-footprint-break-lift) + var(--roarr-footprint-stride) + 6px),
    0 0;
}

.roarr-section[class][class].roarr-footprints--edge-2 {
  background-image:
    var(--roarr-footprint),
    var(--roarr-footprint),
    var(--paper-cream);
  background-repeat: no-repeat, no-repeat, repeat;
  background-size:
    var(--roarr-footprint-size) auto,
    var(--roarr-footprint-size) auto,
    auto;
  background-position:
    right var(--roarr-footprint-edge-inset) bottom calc(var(--roarr-footprint-break-lift) + 6px),
    right var(--roarr-footprint-lane-offset) bottom calc(var(--roarr-footprint-break-lift) + var(--roarr-footprint-stride) + 6px),
    0 0;
}

.roarr-section[class][class].roarr-footprints--long-4 {
  background-image:
    var(--roarr-footprint),
    var(--roarr-footprint),
    var(--paper-cream);
  background-repeat: no-repeat, no-repeat, repeat;
  background-size:
    var(--roarr-footprint-size) auto,
    var(--roarr-footprint-size) auto,
    auto;
  background-position:
    right var(--roarr-footprint-edge-inset) bottom calc(var(--roarr-footprint-break-lift) + 6px),
    right var(--roarr-footprint-lane-offset) bottom calc(var(--roarr-footprint-break-lift) + var(--roarr-footprint-stride) + 6px),
    0 0;
}

@media (min-width: 640px) and (max-width: 1023px) {
  .roarr-section[class][class]:has(+ .roarr-rip--down):is(
    .roarr-footprints--right-3,
    .roarr-footprints--left-3,
    .roarr-footprints--edge-2,
    .roarr-footprints--long-4
  ) {
    padding-bottom: max(
      calc(var(--section-padding-tablet) + var(--space-48)),
      calc(var(--space-32) + var(--roarr-footprint-trail-height) + var(--space-24))
    );
  }

  .roarr-section[class][class]:is(
    .roarr-footprints--right-3,
    .roarr-footprints--left-3,
    .roarr-footprints--edge-2,
    .roarr-footprints--long-4
  ) {
    --roarr-footprint-size: 46px;
    --roarr-footprint-edge-inset: 5%;
    --roarr-footprint-stride: 32px;
    --roarr-footprint-trail-height: calc(var(--roarr-footprint-size) + var(--roarr-footprint-stride));
    padding-bottom: max(var(--section-padding-tablet), calc(var(--roarr-footprint-trail-height) + var(--space-24)));
  }

  .roarr-section[class][class].roarr-footprints--long-4 {
    --roarr-footprint-trail-height: calc(var(--roarr-footprint-size) + var(--roarr-footprint-stride) + var(--roarr-footprint-stride));
  }

  .roarr-section[class][class].roarr-footprints--right-3 {
    background-image:
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--paper-cream);
    background-repeat: no-repeat, no-repeat, repeat;
    background-size:
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      auto;
    background-position:
      right var(--roarr-footprint-edge-inset) bottom calc(var(--roarr-footprint-break-lift) + 8px),
      right var(--roarr-footprint-lane-offset) bottom calc(var(--roarr-footprint-break-lift) + var(--roarr-footprint-stride) + 8px),
      0 0;
  }

  .roarr-section[class][class].roarr-footprints--left-3 {
    background-image:
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--paper-cream);
    background-repeat: no-repeat, no-repeat, repeat;
    background-size:
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      auto;
    background-position:
      left var(--roarr-footprint-edge-inset) bottom calc(var(--roarr-footprint-break-lift) + 8px),
      left var(--roarr-footprint-lane-offset) bottom calc(var(--roarr-footprint-break-lift) + var(--roarr-footprint-stride) + 8px),
      0 0;
  }

  .roarr-section[class][class].roarr-footprints--edge-2 {
    background-image:
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--paper-cream);
    background-repeat: no-repeat, no-repeat, repeat;
    background-size:
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      auto;
    background-position:
      right var(--roarr-footprint-edge-inset) bottom calc(var(--roarr-footprint-break-lift) + 8px),
      right var(--roarr-footprint-lane-offset) bottom calc(var(--roarr-footprint-break-lift) + var(--roarr-footprint-stride) + 8px),
      0 0;
  }

  .roarr-section[class][class].roarr-footprints--long-4 {
    background-image:
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--paper-cream);
    background-repeat: no-repeat, no-repeat, no-repeat, repeat;
    background-size:
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      auto;
    background-position:
      right var(--roarr-footprint-edge-inset) bottom calc(var(--roarr-footprint-break-lift) + 8px),
      right var(--roarr-footprint-lane-offset) bottom calc(var(--roarr-footprint-break-lift) + var(--roarr-footprint-stride) + 8px),
      right var(--roarr-footprint-edge-inset) bottom calc(var(--roarr-footprint-break-lift) + var(--roarr-footprint-stride) + var(--roarr-footprint-stride) + 8px),
      0 0;
  }
}

@media (min-width: 1024px) {
  .roarr-section[class][class]:has(+ .roarr-rip--down):is(
    .roarr-footprints--right-3,
    .roarr-footprints--left-3,
    .roarr-footprints--edge-2,
    .roarr-footprints--long-4
  ) {
    padding-bottom: max(
      calc(var(--section-padding-desktop) + var(--space-48)),
      calc(var(--space-32) + var(--roarr-footprint-trail-height) + var(--space-24))
    );
  }

  .roarr-section[class][class]:is(
    .roarr-footprints--right-3,
    .roarr-footprints--left-3,
    .roarr-footprints--edge-2,
    .roarr-footprints--long-4
  ) {
    --roarr-footprint-size: 64px;
    --roarr-footprint-edge-inset: 3%;
    --roarr-footprint-stride: 32px;
    --roarr-footprint-trail-height: calc(var(--roarr-footprint-size) + var(--roarr-footprint-stride) + var(--roarr-footprint-stride));
    padding-bottom: max(var(--section-padding-desktop), calc(var(--roarr-footprint-trail-height) + var(--space-24)));
  }

  .roarr-section[class][class].roarr-footprints--edge-2 {
    --roarr-footprint-trail-height: calc(var(--roarr-footprint-size) + var(--roarr-footprint-stride));
  }

  .roarr-section[class][class].roarr-footprints--long-4 {
    --roarr-footprint-trail-height: calc(var(--roarr-footprint-size) + var(--roarr-footprint-stride) + var(--roarr-footprint-stride) + var(--roarr-footprint-stride));
  }

  .roarr-section[class][class].roarr-footprints--right-3 {
    background-image:
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--paper-cream);
    background-repeat: no-repeat, no-repeat, no-repeat, repeat;
    background-size:
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      auto;
    background-position:
      right var(--roarr-footprint-edge-inset) bottom calc(var(--roarr-footprint-break-lift) + 10px),
      right var(--roarr-footprint-lane-offset) bottom calc(var(--roarr-footprint-break-lift) + var(--roarr-footprint-stride) + 10px),
      right var(--roarr-footprint-edge-inset) bottom calc(var(--roarr-footprint-break-lift) + var(--roarr-footprint-stride) + var(--roarr-footprint-stride) + 10px),
      0 0;
  }

  .roarr-section[class][class].roarr-footprints--left-3 {
    background-image:
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--paper-cream);
    background-repeat: no-repeat, no-repeat, no-repeat, repeat;
    background-size:
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      auto;
    background-position:
      left var(--roarr-footprint-edge-inset) bottom calc(var(--roarr-footprint-break-lift) + 10px),
      left var(--roarr-footprint-lane-offset) bottom calc(var(--roarr-footprint-break-lift) + var(--roarr-footprint-stride) + 10px),
      left var(--roarr-footprint-edge-inset) bottom calc(var(--roarr-footprint-break-lift) + var(--roarr-footprint-stride) + var(--roarr-footprint-stride) + 10px),
      0 0;
  }

  .roarr-section[class][class].roarr-footprints--edge-2 {
    background-image:
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--paper-cream);
    background-repeat: no-repeat, no-repeat, repeat;
    background-size:
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      auto;
    background-position:
      right var(--roarr-footprint-edge-inset) bottom calc(var(--roarr-footprint-break-lift) + 10px),
      right var(--roarr-footprint-lane-offset) bottom calc(var(--roarr-footprint-break-lift) + var(--roarr-footprint-stride) + 10px),
      0 0;
  }

  .roarr-section[class][class].roarr-footprints--long-4 {
    background-image:
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--paper-cream);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
    background-size:
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      auto;
    background-position:
      right var(--roarr-footprint-edge-inset) bottom calc(var(--roarr-footprint-break-lift) + 10px),
      right var(--roarr-footprint-lane-offset) bottom calc(var(--roarr-footprint-break-lift) + var(--roarr-footprint-stride) + 10px),
      right var(--roarr-footprint-edge-inset) bottom calc(var(--roarr-footprint-break-lift) + var(--roarr-footprint-stride) + var(--roarr-footprint-stride) + 10px),
      right var(--roarr-footprint-lane-offset) bottom calc(var(--roarr-footprint-break-lift) + var(--roarr-footprint-stride) + var(--roarr-footprint-stride) + var(--roarr-footprint-stride) + 10px),
      0 0;
  }
}

/* Food & Drink dietary trail: use the homepage Plan trackway as the spacing
   standard, translated into the clear right-hand lane above the skyline. The
   track advances as it alternates instead of returning to two fixed columns. */
.roarr-section[class][class]#dietary.roarr-footprints--long-4 {
  --roarr-footprint-size: 44px;
  --roarr-footprint-trail-height: calc(82px + var(--roarr-footprint-size));
  padding-bottom: calc(var(--skyline-h) + var(--roarr-footprint-trail-height) + var(--space-32));
  background-image:
    var(--roarr-footprint),
    var(--roarr-footprint),
    var(--paper-cream);
  background-repeat: no-repeat, no-repeat, repeat;
  background-size:
    var(--roarr-footprint-size) auto,
    var(--roarr-footprint-size) auto,
    auto;
  background-position:
    right 3% bottom calc(var(--roarr-footprint-break-lift) + 82px),
    right 20% bottom calc(var(--roarr-footprint-break-lift) + 12px),
    0 0;
}

@media (min-width: 640px) and (max-width: 1023px) {
  .roarr-section[class][class]#dietary.roarr-footprints--long-4 {
    --roarr-footprint-size: 54px;
    --roarr-footprint-trail-height: calc(164px + var(--roarr-footprint-size));
    background-image:
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--paper-cream);
    background-repeat: no-repeat, no-repeat, no-repeat, repeat;
    background-size:
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      auto;
    background-position:
      right 8% bottom calc(var(--roarr-footprint-break-lift) + 164px),
      right 22% bottom calc(var(--roarr-footprint-break-lift) + 88px),
      right 10% bottom calc(var(--roarr-footprint-break-lift) + 12px),
      0 0;
  }
}

@media (min-width: 1024px) {
  .roarr-section[class][class]#dietary.roarr-footprints--long-4 {
    --roarr-footprint-size: 72px;
    --roarr-footprint-trail-height: calc(253px + var(--roarr-footprint-size));
    background-image:
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--paper-cream);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
    background-size:
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      auto;
    background-position:
      right 40% bottom calc(var(--roarr-footprint-break-lift) + 38px),
      right 31% bottom calc(var(--roarr-footprint-break-lift) + 169px),
      right 21% bottom calc(var(--roarr-footprint-break-lift) + 94px),
      right 12% bottom calc(var(--roarr-footprint-break-lift) + 253px),
      0 0;
  }
}

/* ── Automatic cream-run ends ──────────────────────────────────────
   Public pages receive one of these markers from section-breaks.php after
   Gutenberg renders. The end marker is the whole site contract: an isolated
   cream section gets a trail, while consecutive cream sections suppress all
   saved legacy trails until the last section in that run. This also means a
   newly-created Page, Event, Attraction or News single inherits the rule with
   no decorative choice required from Marketing.

   Gutenberg cannot run the public DOM pass, so the editor-only structural
   selectors below mirror the same rule for explicitly cream-styled sections.
   The homepage's approved Plan and Attractions trails remain bespoke. */
.roarr-section[class][class][class].roarr-footprints--cream-run-middle,
.editor-styles-wrapper .roarr-section[class][class]:is(
  .roarr-section--cream,
  .roarr-section--parchment,
  .is-style-roarr-bg-cream,
  .is-style-roarr-bg-parchment,
  .roarr-footprints--right-3,
  .roarr-footprints--left-3,
  .roarr-footprints--edge-2,
  .roarr-footprints--long-4
):has(+ .roarr-section:is(
  .roarr-section--cream,
  .roarr-section--parchment,
  .is-style-roarr-bg-cream,
  .is-style-roarr-bg-parchment,
  .roarr-footprints--right-3,
  .roarr-footprints--left-3,
  .roarr-footprints--edge-2,
  .roarr-footprints--long-4
)) {
  padding-bottom: var(--section-padding-mobile);
  background-image: var(--paper-cream);
  background-repeat: repeat;
  background-size: auto;
  background-position: 0 0;
}

.roarr-section[class][class][class].roarr-footprints--cream-run-middle:is(
  .roarr-section--compact,
  .is-style-roarr-section-compact,
  .roarr-store-compact
),
.editor-styles-wrapper .roarr-section[class][class]:is(
  .roarr-section--compact,
  .is-style-roarr-section-compact,
  .roarr-store-compact
):has(+ .roarr-section:is(
  .roarr-section--cream,
  .roarr-section--parchment,
  .is-style-roarr-bg-cream,
  .is-style-roarr-bg-parchment,
  .roarr-footprints--right-3,
  .roarr-footprints--left-3,
  .roarr-footprints--edge-2,
  .roarr-footprints--long-4
)) {
  padding-bottom: var(--section-padding-compact-mobile);
}

:is(
  .roarr-section[class][class][class].roarr-footprints--cream-run-end,
  .editor-styles-wrapper .roarr-section[class][class]:is(
    .roarr-section--cream,
    .roarr-section--parchment,
    .is-style-roarr-bg-cream,
    .is-style-roarr-bg-parchment,
    .roarr-footprints--right-3,
    .roarr-footprints--left-3,
    .roarr-footprints--edge-2,
    .roarr-footprints--long-4
  ):not(:is(
    .roarr-footprints-plan-4,
    .roarr-home-ticket-section,
    :where(#home-attractions)
  )):not(:has(+ .roarr-section:is(
    .roarr-section--cream,
    .roarr-section--parchment,
    .is-style-roarr-bg-cream,
    .is-style-roarr-bg-parchment,
    .roarr-footprints--right-3,
    .roarr-footprints--left-3,
    .roarr-footprints--edge-2,
    .roarr-footprints--long-4
  )))
) {
  --roarr-footprint: url("assets/img/decor/footprint-15.png");
  --roarr-footprint-size: 44px;
  --roarr-footprint-break-lift: 0px;
  --roarr-footprint-trail-height: calc(82px + var(--roarr-footprint-size));
  padding-bottom: calc(var(--roarr-footprint-break-lift) + var(--roarr-footprint-trail-height) + var(--space-32));
  background-image:
    var(--roarr-footprint),
    var(--roarr-footprint),
    var(--paper-cream);
  background-repeat: no-repeat, no-repeat, repeat;
  background-size:
    var(--roarr-footprint-size) auto,
    var(--roarr-footprint-size) auto,
    auto;
  background-position:
    right 3% bottom calc(var(--roarr-footprint-break-lift) + 82px),
    right 20% bottom calc(var(--roarr-footprint-break-lift) + 12px),
    0 0;
  background-blend-mode: normal;
}

/* Keep these break overrides more specific than the generated editor-style
   bridge's combined run-end selector. That bridge is emitted after canonical
   CSS, so source order alone cannot protect the lift on the public bundle. */
.roarr-section[class][class][class][class][class][class].roarr-footprints--cream-run-end:has(+ .roarr-rip--down) {
  /* The down-brush has tall dry flecks above its solid colour edge. Keep the
     complete lowest toe above that fleck field; skyline, leaf and canopy
     sections use their artwork-height overrides below instead. */
  --roarr-footprint-break-lift: var(--space-80);
}

.roarr-section[class][class][class][class][class][class].roarr-footprints--cream-run-end.roarr-section--break-after-skyline {
  --roarr-footprint-break-lift: var(--skyline-h);
}

.roarr-section[class][class][class][class][class][class].roarr-footprints--cream-run-end.roarr-section--break-after-leaf {
  --roarr-footprint-break-lift: var(--leaf-h);
}

.roarr-section[class][class][class][class][class][class].roarr-footprints--cream-run-end.roarr-section--break-after-canopy {
  --roarr-footprint-break-lift: var(--canopy-h);
}

@media (min-width: 640px) and (max-width: 1023px) {
  .roarr-section[class][class][class].roarr-footprints--cream-run-middle,
  .editor-styles-wrapper .roarr-section[class][class]:is(
    .roarr-section--cream,
    .roarr-section--parchment,
    .is-style-roarr-bg-cream,
    .is-style-roarr-bg-parchment,
    .roarr-footprints--right-3,
    .roarr-footprints--left-3,
    .roarr-footprints--edge-2,
    .roarr-footprints--long-4
  ):has(+ .roarr-section:is(
    .roarr-section--cream,
    .roarr-section--parchment,
    .is-style-roarr-bg-cream,
    .is-style-roarr-bg-parchment,
    .roarr-footprints--right-3,
    .roarr-footprints--left-3,
    .roarr-footprints--edge-2,
    .roarr-footprints--long-4
  )) {
    padding-bottom: var(--section-padding-tablet);
  }

  .roarr-section[class][class][class].roarr-footprints--cream-run-middle:is(
    .roarr-section--compact,
    .is-style-roarr-section-compact,
    .roarr-store-compact
  ) {
    padding-bottom: var(--section-padding-compact-tablet);
  }

  :is(
    .roarr-section[class][class][class].roarr-footprints--cream-run-end,
    .editor-styles-wrapper .roarr-section[class][class]:is(
      .roarr-section--cream,
      .roarr-section--parchment,
      .is-style-roarr-bg-cream,
      .is-style-roarr-bg-parchment,
      .roarr-footprints--right-3,
      .roarr-footprints--left-3,
      .roarr-footprints--edge-2,
      .roarr-footprints--long-4
    ):not(:is(
      .roarr-footprints-plan-4,
      .roarr-home-ticket-section,
      :where(#home-attractions)
    )):not(:has(+ .roarr-section:is(
      .roarr-section--cream,
      .roarr-section--parchment,
      .is-style-roarr-bg-cream,
      .is-style-roarr-bg-parchment,
      .roarr-footprints--right-3,
      .roarr-footprints--left-3,
      .roarr-footprints--edge-2,
      .roarr-footprints--long-4
    )))
  ) {
    --roarr-footprint-size: 54px;
    --roarr-footprint-trail-height: calc(164px + var(--roarr-footprint-size));
    background-image:
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--paper-cream);
    background-repeat: no-repeat, no-repeat, no-repeat, repeat;
    background-size:
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      auto;
    background-position:
      right 8% bottom calc(var(--roarr-footprint-break-lift) + 164px),
      right 22% bottom calc(var(--roarr-footprint-break-lift) + 88px),
      right 10% bottom calc(var(--roarr-footprint-break-lift) + 12px),
      0 0;
  }
}

@media (min-width: 1024px) {
  .roarr-section[class][class][class].roarr-footprints--cream-run-middle,
  .editor-styles-wrapper .roarr-section[class][class]:is(
    .roarr-section--cream,
    .roarr-section--parchment,
    .is-style-roarr-bg-cream,
    .is-style-roarr-bg-parchment,
    .roarr-footprints--right-3,
    .roarr-footprints--left-3,
    .roarr-footprints--edge-2,
    .roarr-footprints--long-4
  ):has(+ .roarr-section:is(
    .roarr-section--cream,
    .roarr-section--parchment,
    .is-style-roarr-bg-cream,
    .is-style-roarr-bg-parchment,
    .roarr-footprints--right-3,
    .roarr-footprints--left-3,
    .roarr-footprints--edge-2,
    .roarr-footprints--long-4
  )) {
    padding-bottom: var(--section-padding-desktop);
  }

  .roarr-section[class][class][class].roarr-footprints--cream-run-middle:is(
    .roarr-section--compact,
    .is-style-roarr-section-compact,
    .roarr-store-compact
  ) {
    padding-bottom: var(--section-padding-compact-desktop);
  }

  :is(
    .roarr-section[class][class][class].roarr-footprints--cream-run-end,
    .editor-styles-wrapper .roarr-section[class][class]:is(
      .roarr-section--cream,
      .roarr-section--parchment,
      .is-style-roarr-bg-cream,
      .is-style-roarr-bg-parchment,
      .roarr-footprints--right-3,
      .roarr-footprints--left-3,
      .roarr-footprints--edge-2,
      .roarr-footprints--long-4
    ):not(:is(
      .roarr-footprints-plan-4,
      .roarr-home-ticket-section,
      :where(#home-attractions)
    )):not(:has(+ .roarr-section:is(
      .roarr-section--cream,
      .roarr-section--parchment,
      .is-style-roarr-bg-cream,
      .is-style-roarr-bg-parchment,
      .roarr-footprints--right-3,
      .roarr-footprints--left-3,
      .roarr-footprints--edge-2,
      .roarr-footprints--long-4
    )))
  ) {
    --roarr-footprint-size: 72px;
    --roarr-footprint-trail-height: calc(253px + var(--roarr-footprint-size));
    background-image:
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--paper-cream);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
    background-size:
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      auto;
    background-position:
      right 40% bottom calc(var(--roarr-footprint-break-lift) + 38px),
      right 31% bottom calc(var(--roarr-footprint-break-lift) + 169px),
      right 21% bottom calc(var(--roarr-footprint-break-lift) + 94px),
      right 12% bottom calc(var(--roarr-footprint-break-lift) + 253px),
      0 0;
  }
}

/* -- src/blocks/section-head.css (canonical component source) -- */
/* roarr/section-head — ported verbatim from design-reference/mocks/css/styles.css
   (.roarr-section__head + variants, .roarr-section__title, .roarr-section__lede).
   Values are token-only per CLAUDE.md; this is a straight port, not a rewrite. */

.roarr-section__head {
  display: grid;
  gap: var(--space-16);
  max-width: calc(var(--space-96) * 8);
  margin: 0 auto var(--space-48);
  text-align: center;
}

.roarr-section__head:only-child {
  margin-bottom: 0;
}

.roarr-section__head--rule {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  max-width: none;
  margin: 0 0 var(--space-24);
  text-align: left;
}

.roarr-section__head--rule::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--border-light);
}

.roarr-section__head--rule .roarr-section__title {
  flex: 0 0 auto;
}

.roarr-section__head--plain {
  max-width: none;
  margin: 0 0 var(--space-24);
  text-align: left;
}

/* Left-aligned heads: lede sits flush left, not auto-centred (which reads as a stray indent). */
.roarr-section__head--plain .roarr-section__lede {
  margin-inline: 0;
}

.roarr-section__title {
  max-width: 100%;
  margin: 0;
  color: inherit;
  font-family: var(--font-brand);
  font-size: var(--h2);
  font-weight: var(--weight-regular);
  font-synthesis: none;
  line-height: var(--lh-tight);
  letter-spacing: 0;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.roarr-section__title em {
  color: var(--primary);
  font-style: normal;
}

.roarr-section--dark .roarr-section__title em {
  color: var(--primary-hover);
}

.roarr-section__title--relaxed {
  line-height: var(--lh-snug);
}

.roarr-section__lede {
  max-width: min(100%, 58ch);
  margin: 0 auto;
  color: var(--text-secondary);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium); /* body-lg per DESIGN.md type hierarchy */
  line-height: var(--lh-relaxed);
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

/* Homepage attractions mirrors the mock's centred header wrapper. Gutenberg
   saves the heading directly in the section, so centre the block box as well
   as its text; otherwise core flow layout leaves the 311px heading at x=0 on
   a 375px phone while the cards are centred inside the content gutter. */
:is(body.home .roarr-site-main, .editor-styles-wrapper)
  .roarr-section:has(> .wp-block-roarr-attractions-grid)
  > .roarr-leaf-heading {
  margin-inline: auto;
}

/* body-lg steps down to 18px on phones (DESIGN.md type hierarchy) — 20px on a
   ~340px measure wraps to ~28ch fragments. */
@media (max-width: 767px) {
  .roarr-section__lede {
    font-size: var(--text-base);
  }
}

.roarr-section--dark .roarr-section__lede,
.roarr-section--dark-forest-break .roarr-section__lede {
  color: var(--text-secondary-dark);
}

/* -- src/blocks/side-rail.css (canonical component source) -- */
/**
 * roarr-reading-layout--archive / roarr-blog-list(-card) / roarr-side-rail /
 * roarr-side-cta -- ported from design-reference/mocks/css/styles.css
 * (events-index.html's two-column archive layout, lines ~7914-7960 +
 * ~11991-12536). Events index is the only page using this layout so far;
 * the ".events-index-page" artwork-ratio override below applies unqualified
 * since roarr/events-list is events-only.
 */

.roarr-reading-layout {
	display: grid;
	gap: var(--space-48);
	margin-top: var(--space-64);
	align-items: start;
}

.roarr-reading-layout--archive {
	margin-top: 0;
	margin-inline: auto;
	width: min(100% - calc(var(--gutter-mobile) * 2), var(--container-wide));
}

.roarr-blog-feed,
.roarr-blog-list {
	display: grid;
	gap: var(--space-32);
	min-width: 0;
}

.roarr-blog-list-card {
	display: grid;
	gap: var(--space-24);
	min-width: 0;
	padding-bottom: var(--space-40);
	border-bottom: 1px solid var(--border-light);
	background: transparent;
	color: var(--text-primary);
}

.roarr-blog-list-card:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.roarr-blog-list-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	min-width: 0;
	border-radius: var(--radius-md);
	background: var(--parchment);
	box-shadow: var(--shadow-soft);
}

.roarr-blog-list-card__media img {
	width: 100%;
	aspect-ratio: var(--image-ratio-media);
	object-fit: cover;
}

/* Events index: the official event artwork is 1.9:1 with dates and offers
   baked into the edges -- show it uncropped instead of the 16:10 crop. */
.roarr-blog-list-card__media img {
	aspect-ratio: var(--image-ratio-artwork);
}

.roarr-blog-list-card__media-placeholder {
	display: grid;
	place-items: center;
	min-height: clamp(10rem, 28vw, 20rem);
	background:
		radial-gradient(circle at 22% 18%, color-mix(in srgb, var(--primary) 28%, transparent), transparent 42%),
		var(--deep-forest);
	color: var(--cream);
	font-family: var(--font-brand);
	font-size: var(--h2);
	letter-spacing: 0.04em;
}

.roarr-blog-list-card__content {
	display: grid;
	align-content: start;
	gap: var(--space-16);
	max-width: var(--reading-width);
	padding: 0;
}

.roarr-blog-list-card__meta {
	margin: 0;
	color: var(--primary);
	font-size: var(--text-xs);
	font-weight: var(--weight-heavy);
	line-height: var(--lh-snug);
	text-transform: uppercase;
}

.roarr-blog-list-card h3 {
	margin: 0;
	color: var(--text-primary);
	font-family: var(--font-heading);
	font-size: var(--h3);
	font-weight: var(--weight-heavy);
	line-height: var(--lh-tight);
	letter-spacing: 0;
	text-transform: none;
}

.roarr-blog-list-card h3 a {
	color: inherit;
	text-decoration: none;
}

.roarr-blog-list-card h3 a:hover,
.roarr-blog-list-card h3 a:focus-visible {
	color: var(--primary);
	text-decoration: none;
}

.roarr-blog-list-card__content p:not(.roarr-blog-list-card__meta) {
	margin: 0;
	color: var(--text-secondary);
	font-size: var(--text-sm);
	line-height: var(--lh-relaxed);
}

.roarr-blog-list-card__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	justify-self: start;
	color: var(--primary);
	font-size: var(--text-xs);
	font-weight: var(--weight-heavy);
	line-height: var(--lh-solid);
	text-decoration: none;
	text-transform: uppercase;
}

.roarr-blog-list-card__cta:hover,
.roarr-blog-list-card__cta:focus-visible {
	color: var(--deep-forest);
	text-decoration: none;
}

/* ---- Side rail -------------------------------------------------------- */

.roarr-side-rail {
	display: grid;
	gap: var(--space-16);
}

/* The mock deliberately removes both archive rails below 1024px. The global
   booking band and footer newsletter already provide these actions there. */
.roarr-reading-layout .roarr-side-rail {
	display: none;
}

.roarr-side-cta {
	position: relative;
	display: grid;
	overflow: hidden;
	min-height: calc(var(--space-120) + var(--space-96));
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
	background: var(--card-on-light);
	color: var(--text-primary);
	box-shadow: var(--shadow-soft);
}

.roarr-side-cta__media {
	display: none;
}

.roarr-side-cta__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-8);
	padding: var(--space-24);
}

.roarr-side-cta__body h2 {
	margin: 0;
	color: var(--text-primary);
	font-family: var(--font-heading);
	font-size: var(--h3);
	font-weight: var(--weight-bold);
	line-height: var(--lh-tight);
	letter-spacing: 0;
	text-transform: uppercase;
}

.roarr-side-cta__body p {
	margin: 0;
	color: var(--text-secondary);
	font-size: var(--text-sm);
	line-height: var(--lh-relaxed);
}

/* CTA (and the sign-up form) fill the card width and pin to the bottom, so
   the buttons line up across the equal-height rail cards. */
.roarr-side-cta__body .btn,
.roarr-side-cta__body > .wp-block-buttons,
.roarr-side-cta__body .roarr-newsletter-form {
	width: 100%;
	margin-top: auto;
}

.roarr-side-cta__body > .wp-block-buttons .wp-block-button,
.roarr-side-cta__body > .wp-block-buttons .wp-block-button__link {
	width: 100%;
}

/* Photo-backed rail cards (annual pass, book tickets upsell): the decorative
   image fills the card; a top+bottom scrim keeps corners legible, copy
   flips to light. Same text-over-image recipe as .roarr-feature-card--media. */
.roarr-side-cta--media {
	background: var(--deep-forest);
	color: var(--text-on-dark);
}

.roarr-side-cta--media .roarr-side-cta__media {
	display: block;
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

/* core/image renders a figure wrapper. Object-fit on that wrapper cannot crop
   the actual image, which previously left a large empty dark area beneath
   landscape artwork. Size and crop the child image explicitly. */
.roarr-side-cta--media .roarr-side-cta__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.roarr-side-cta--media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--deep-forest) 88%, transparent) 0%,
		color-mix(in srgb, var(--deep-forest) 72%, transparent) 30%,
		color-mix(in srgb, var(--deep-forest) 26%, transparent) 55%,
		color-mix(in srgb, var(--deep-forest) 36%, transparent) 78%,
		color-mix(in srgb, var(--deep-forest) 84%, transparent) 100%
	);
	pointer-events: none;
}

.roarr-side-cta--media .roarr-side-cta__body {
	position: relative;
	z-index: 2;
	justify-content: flex-end;
}

/* The media and CTA already carry the offer name. Keep legacy headings and
   supporting copy editable as migration context, but omit both publicly. */
.roarr-site-main .roarr-side-cta--media .roarr-side-cta__body > :is(h2, p) {
	display: none;
}

/* Pin the single visible CTA over the lower image scrim. */
.roarr-side-cta--media .roarr-side-cta__body > .wp-block-buttons {
	margin-top: 0;
}

.roarr-side-cta--media .roarr-side-cta__body h2,
.roarr-side-cta--media .roarr-side-cta__body p {
	color: var(--cream);
	text-shadow:
		0 1px 2px color-mix(in srgb, var(--deep-forest) 84%, transparent),
		0 var(--space-4) var(--space-12) color-mix(in srgb, var(--deep-forest) 60%, transparent);
}

/* Newsletter rail card: mirrors the footer sign-up -- deep-forest surface
   with the glassy translucent field, cream heading and amber CTA. */
.roarr-side-cta--signup {
	border-color: color-mix(in srgb, var(--white) 12%, transparent);
	background: var(--deep-forest);
}

.roarr-side-cta--signup .roarr-side-cta__body h2 {
	color: var(--cream);
}

.roarr-side-cta--signup .roarr-side-cta__body p {
	color: var(--text-muted-dark);
}

.roarr-side-cta--signup .roarr-newsletter-form {
	display: grid;
	gap: var(--space-8);
}

.roarr-side-cta--signup .roarr-newsletter-form__field {
	grid-template-columns: var(--space-32) minmax(0, 1fr);
	border-color: color-mix(in srgb, var(--white) 20%, transparent);
	background: color-mix(in srgb, var(--white) 8%, transparent);
}

/* The rail remains narrow even on a desktop viewport, so the global 640px
   newsletter breakpoint must not place its button beside the email input. */
.roarr-side-cta--signup .roarr-newsletter-form__field button {
	grid-column: 1 / -1;
	width: 100%;
}

.roarr-side-cta--signup .roarr-newsletter-form__field input {
	color: var(--cream);
}

.roarr-side-cta--signup .roarr-newsletter-form__field input::placeholder {
	color: var(--text-muted-dark);
}

.roarr-side-cta--signup .roarr-form__note {
	margin: 0;
	color: var(--text-muted-dark);
	font-size: var(--text-xs);
	line-height: var(--lh-relaxed);
}

.roarr-side-cta--signup .roarr-form__note a {
	color: var(--primary);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* Matched rail: cards at equal height, full-width CTAs aligned along the
   bottom -- the events/blog index shape. */
.roarr-side-rail--matched {
	grid-auto-rows: 1fr;
}

@media (min-width: 768px) {
	.roarr-reading-layout--archive {
		width: min(100% - calc(var(--gutter-tablet) * 2), var(--container-wide));
	}
}

@media (min-width: 1024px) {
	.roarr-reading-layout--archive {
		--archive-divider-gutter: var(--space-80);
		width: min(100% - calc(var(--gutter-desktop) * 2), var(--container-wide));
		grid-template-columns: minmax(0, 1fr) var(--archive-divider-gutter) minmax(calc(var(--space-120) * 2 + var(--space-64)), 0.42fr);
		column-gap: 0;
		row-gap: 0;
		align-items: stretch;
	}

	.roarr-reading-layout--archive::before {
		content: "";
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
		align-self: stretch;
		width: 1px;
		min-height: 100%;
		background: var(--border-light);
	}

	.roarr-reading-layout--archive .roarr-blog-feed {
		grid-column: 1;
		grid-row: 1;
		align-self: start;
	}

	.roarr-reading-layout .roarr-side-rail {
		display: grid;
	}

	.roarr-reading-layout--archive .roarr-side-rail {
		grid-column: 3;
		grid-row: 1;
		align-self: start;
	}

	.roarr-reading-layout--archive .roarr-side-rail--matched {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: 1fr;
	}

	.roarr-reading-layout--archive .roarr-side-rail--matched .roarr-side-cta--signup {
		grid-column: auto;
	}

	/* Sticky pin using the site's shared --header-h token. The header publishes
	   body.roarr-header-hidden as it leaves/returns, so the rail follows that
	   movement instead of leaving a dead gap above itself. */
	.roarr-side-rail {
		position: sticky;
		top: calc(var(--header-h) + var(--space-24));
		max-height: calc(100vh - var(--header-h) - var(--space-24));
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: none;
		transition: top 0.3s var(--ease);
	}

	body.roarr-header-hidden .roarr-side-rail {
		top: var(--space-24);
		max-height: calc(100vh - var(--space-48));
	}

	@media (prefers-reduced-motion: reduce) {
		.roarr-side-rail {
			transition: none;
		}
	}

	.roarr-side-rail::-webkit-scrollbar {
		display: none;
	}

	/* chrome.js publishes --rail-h with ResizeObserver. Rails that fit keep the
	   header-aware top pin; taller rails pin by their bottom edge so every card
	   remains reachable through normal document scrolling. The capped internal
	   scroller above is the no-JavaScript fallback. */
	.roarr-side-rail.roarr-rail-measured {
		top: min(calc(var(--header-h) + var(--space-24)), calc(100vh - var(--rail-h) - var(--space-24)));
		max-height: none;
		overflow: visible;
	}

	body.roarr-header-hidden .roarr-side-rail.roarr-rail-measured {
		top: min(var(--space-24), calc(100vh - var(--rail-h) - var(--space-24)));
		max-height: none;
	}
}

/* -- src/blocks/split-rates.css (canonical component source) -- */
/**
 * roarr/split-rates — ported from design-reference/mocks/css/styles.css.
 * DEVIATION: mock rules are scoped under
 * :is(.pricing-page-mock, .whats-open-page, .rates-page) body classes; this
 * block doesn't depend on page body classes, so the scoping is dropped and
 * rules apply directly off .roarr-split--rates (the block always carries
 * that class). Base .roarr-split / .roarr-split--info rules live in
 * roarr/split's style.css and are re-declared minimally here only where the
 * rates layout genuinely diverges (three-slot heading/lead/content+media
 * grid instead of two-slot).
 */

.roarr-split--rates {
	grid-template-columns: 1fr;
	gap: var(--space-24);
	align-items: start;
}

.roarr-split--rates > .roarr-split__heading {
	font-size: var(--h2);
}

.roarr-split--rates > .roarr-split__lead {
	max-width: calc(var(--space-120) * 6);
	margin: 0;
	color: var(--text-primary);
	font-size: var(--text-lg);
	font-weight: var(--weight-medium);
	line-height: var(--lh-relaxed);
}

.roarr-split--rates .roarr-split__content {
	gap: var(--space-24);
}

.roarr-split--rates .roarr-split__media {
	display: grid;
	gap: var(--space-24);
	align-content: start;
	width: 100%;
}

.roarr-split--rates .roarr-rate-actions {
	display: flex;
	align-items: stretch;
	justify-content: center;
	margin: 0;
}

.roarr-split--rates .roarr-rate-actions .wp-block-button,
.roarr-split--rates .roarr-rate-actions .wp-block-button__link,
.roarr-split--rates .roarr-rate-actions .btn {
	width: 100%;
	min-width: 0;
}

.roarr-split--rates .roarr-rate-actions .wp-block-button {
	display: flex;
}

.roarr-split--rates .roarr-glance-list li {
	gap: var(--space-24);
	padding-block: var(--space-24);
	font-size: var(--text-base);
	font-weight: var(--weight-medium);
	line-height: var(--lh-normal);
}

.roarr-split--rates .roarr-glance-list__icon {
	flex-basis: var(--icon-badge-size-xl);
	width: var(--icon-badge-size-xl);
	height: var(--icon-badge-size-xl);
}

.roarr-split--rates .roarr-glance-list__icon svg {
	width: var(--icon-badge-glyph-lg);
	height: var(--icon-badge-glyph-lg);
}

@media (min-width: 1200px) {
	.roarr-split--rates {
		grid-template-columns: minmax(0, 1.45fr) minmax(calc(var(--space-120) * 3), 0.95fr);
		column-gap: clamp(var(--space-40), 4vw, var(--space-56));
		row-gap: var(--space-24);
		align-items: start;
		grid-template-rows: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
	}

	.roarr-split--rates > .roarr-split__heading {
		grid-column: 1;
		grid-row: 2;
		align-self: center;
	}

	.roarr-split--rates > .roarr-split__lead {
		grid-column: 1;
		grid-row: 3;
	}

	.roarr-split--rates .roarr-split__content {
		grid-column: 1;
		grid-row: 4;
		margin-top: 0;
	}

	.roarr-split--rates .roarr-split__media {
		grid-column: 2;
		grid-row: 1 / span 5;
		align-self: center;
		margin-top: 0;
		padding-left: clamp(var(--space-32), 3vw, var(--space-48));
		border-left: 1px solid var(--border-light);
	}

	/* Mirrored rates split — table column on the right, side card on the
	   left, divider flipped to match. Lets consecutive rates sections
	   alternate sides. */
	.roarr-split--rates-flip {
		grid-template-columns: minmax(calc(var(--space-120) * 3), 0.95fr) minmax(0, 1.45fr);
		grid-template-rows: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
	}

	.roarr-split--rates-flip > .roarr-split__heading,
	.roarr-split--rates-flip > .roarr-split__lead {
		grid-column: 2;
	}

	.roarr-split--rates-flip .roarr-split__content {
		grid-column: 2;
	}

	.roarr-split--rates-flip .roarr-split__media {
		grid-column: 1;
		grid-row: 1 / span 5;
		padding-left: 0;
		padding-right: clamp(var(--space-32), 3vw, var(--space-48));
		border-left: 0;
		border-right: 1px solid var(--border-light);
	}

	.roarr-split--rates .roarr-split__media .roarr-rate-actions {
		justify-content: center;
	}
}

@media (max-width: 767px) {
	.roarr-split--rates .roarr-action-row {
		align-items: stretch;
	}
}

/**
 * roarr-rail-cards — "at a glance" support-card widget that fills the
 * split-rates media rail on pricing.html (alongside/instead of a plain
 * glance-list). Ported verbatim from design-reference/mocks/css/styles.css
 * (mock lines ~14912-15099, scoped there under .pricing-page-mock — dropped
 * here per this file's own DEVIATION note, same as the rest of split-rates).
 * See MEMORY "Rail cards component" — shared support-card grid used on
 * every rate-table rail except legal/opening-times.
 */
.roarr-rail-cards {
	display: grid;
	gap: var(--space-16);
}

.roarr-rail-cards__title {
	margin: 0;
	color: var(--deep-forest);
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	font-weight: var(--weight-bold);
	line-height: var(--lh-tight);
}

.roarr-rail-cards__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.roarr-rail-card {
	display: grid;
	grid-template-columns: var(--icon-badge-size-xl) minmax(0, 1fr);
	align-items: center;
	gap: var(--space-16);
	min-width: 0;
	padding: var(--card-padding-mobile);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-lg);
	background: var(--card-on-light);
	box-shadow: 0 var(--space-4) var(--space-12) color-mix(in srgb, var(--deep-forest) 8%, transparent);
}

.roarr-rail-card--wide {
	grid-column: 1 / -1;
}

.roarr-rail-card__icon {
	display: inline-grid;
	place-items: center;
	width: var(--icon-badge-size-xl);
	height: var(--icon-badge-size-xl);
	border-radius: var(--radius-sm);
	background: color-mix(in srgb, var(--primary) 11%, var(--card-on-light));
	color: var(--primary-dark);
}

.roarr-rail-card__icon .roarr-ui-icon {
	width: var(--icon-badge-glyph-md);
	height: var(--icon-badge-glyph-md);
}

.roarr-rail-card__icon .roarr-generated-icon {
	width: var(--icon-art-size-xl);
	height: var(--icon-art-size-xl);
}

.roarr-rail-card__body {
	display: grid;
	gap: var(--space-8);
	min-width: 0;
	color: var(--text-secondary);
	font-size: var(--text-xs);
	font-weight: var(--weight-regular);
	line-height: var(--lh-normal);
}

.roarr-rail-card__body strong {
	color: var(--text-primary);
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	line-height: var(--lh-tight);
}

@media (max-width: 767px) {
	.roarr-rail-cards__grid {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 768px) {
	.roarr-rail-card {
		padding: var(--card-padding-tablet);
	}
}

/* -- src/blocks/split.css (canonical component source) -- */
/**
 * roarr/split — front-end + editor styles, ported verbatim (token-only)
 * from design-reference/mocks/css/styles.css. Selectors kept unscoped from
 * page/body classes so the block works standalone in any wp-env test page —
 * the mock's page-scoped variants (:is(.pricing-page-mock, ...) etc.) are
 * NOT ported here; those are page-furniture overrides that belong to the
 * pages/patterns that use this block, not the block itself.
 */

.roarr-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-32);
	align-items: center;
}

.roarr-split__content {
	display: grid;
	gap: var(--space-16);
	min-width: 0;
}

/* Breathing room between the heading/intro and whatever follows (steps list,
   body copy) — mirrors the mock's .roarr-plan-day__content gap (L7059-7096)
   where the heading doesn't sit jammed against the next block.
   font-size/max-width match .roarr-section__title's own treatment (the base
   h1/h2 reset in base.css already gives every heading the brand font/weight/
   uppercase, but not the section-heading scale) — a split's content heading
   is sometimes authored as a plain core/heading with no roarr-section__title
   className (e.g. getting-here.html's "Head for Lenwade"), which otherwise
   renders at the browser's small default h2 size instead of the standard
   section-heading scale every other split uses. */
.roarr-split__content > h2 {
	margin-bottom: var(--space-8);
	max-width: 100%;
	font-size: var(--h2);
}

/* Same green accent as .roarr-section__title em — a bare core/heading (no
   roarr-section__title className) otherwise renders its <em> the same flat
   colour as the rest of the heading. */
.roarr-split__content > h2 em {
	color: var(--primary);
	font-style: normal;
}

/* Display headings must never break mid-word — a global overflow-wrap:anywhere
   reset otherwise shatters the brand heading (e.g. "ADVENTUR/E") while the
   Parkinsans webfont loads without fallback metrics. */
.roarr-split__content > :is(h1, h2, .roarr-section__title) {
	overflow-wrap: normal;
	word-break: normal;
	text-wrap: balance;
}

.roarr-split__content > :is(ul, ol) {
	margin-top: var(--space-24);
}

.roarr-split__content :is(.roarr-button-row, .roarr-action-row) {
	justify-content: flex-start;
}

.roarr-split__media {
	min-width: 0;
}

.roarr-split__media > .wp-block-image {
	margin: 0;
}

.roarr-media-hint {
	margin: var(--space-8) 0 0;
	color: var(--text-secondary);
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	line-height: var(--lh-normal);
	text-align: center;
}

.roarr-media-frame {
	position: relative;
	overflow: hidden;
	margin: 0;
	border-radius: var(--radius-lg);
	background: var(--parchment);
	box-shadow: var(--shadow-soft);
}

.roarr-media-frame img {
	width: 100%;
	height: 100%;
	min-height: 320px;
	aspect-ratio: var(--image-ratio-media);
	object-fit: cover;
}

/* ── Split helper: top-aligned info split (text + tip/card) ── */
.roarr-split--info {
	align-items: start;
}

/* Opening times / map: content and media each take the full lane */
.roarr-split--map-fill {
	grid-template-columns: 1fr;
	align-items: stretch;
	gap: var(--space-40);
}

.roarr-split--map-fill .roarr-split__content {
	align-content: start;
}

.roarr-split--map-fill .roarr-split__media {
	display: flex;
}

/* ── Map variant: illustrated park-map shown whole, no crop frame ──
   Ported from mock .roarr-plan-day__map img (design-reference L6978-6987):
   natural aspect ratio, drop-shadow hugging the cutout silhouette instead of
   a box-shadow/border-radius frame (which would box the transparent bg). */
.roarr-split--map .roarr-split__media img {
	width: 100%;
	height: auto;
	object-fit: unset;
	aspect-ratio: auto;
	filter: drop-shadow(0 var(--space-4) var(--space-8) color-mix(in srgb, var(--deep-forest) 28%, transparent));
}

/* ── Single-attraction body spacing under the info bar ─────── */
.section-body .roarr-split--attraction {
	margin-top: var(--space-48);
}

.section-body > .container > .roarr-split--attraction:first-child {
	margin-top: 0;
}

@media (min-width: 1024px) {
	.section-body .roarr-split--attraction {
		margin-top: var(--space-64);
	}
}

/* ── Mobile content order for every split (≤1023px) ──────────────
   Stack order: header → body copy → picture → bullet list → CTAs.
   Splits are authored flat (h2 / p / ul / button-row directly inside
   __content), so display:contents dissolves the __content box and we order
   its children by element type, alongside __media. Desktop is untouched —
   __content keeps its box from 1024px up. Applies to dark splits too. */
@media (max-width: 1023px) {
	.roarr-split {
		gap: var(--space-16);
	}

	.roarr-split > .roarr-split__content {
		display: contents;
	}

	.roarr-split__content > * {
		order: 2;
	}

	.roarr-split__content > :is(h1, h2, .roarr-section__title) {
		order: 1;
	}

	.roarr-split > .roarr-split__media {
		order: 3;
		margin-block: var(--space-8);
	}

	/* The app badge row is a direct split child rather than part of the copy
	   group. Give it an explicit slot after the phone artwork; otherwise its
	   default order places the download links before the heading in both the
	   public page and the Gutenberg canvas. */
	.roarr-app-download > .roarr-app-download__stores {
		order: 4;
	}

	.roarr-split__content > :is(h3, h4, .roarr-section__subhead, ul, ol, .roarr-card-grid) {
		order: 5;
	}

	.roarr-split__content > :is(.roarr-button-row, .roarr-action-row) {
		order: 6;
		margin-top: var(--space-8);
	}

	/* Homepage plan block follows the mock below desktop: centred title and
	   intro above the full-width map. Desktop keeps the compact left copy lane. */
	:is(body.home .roarr-site-main, .editor-styles-wrapper)
		.roarr-section
		> .roarr-split.roarr-split--media-hero:has(.roarr-glance-list)
		.roarr-split__content
		> :is(h1, h2, p) {
		justify-self: center;
		margin-inline: auto;
		text-align: center;
	}

	.roarr-split--map .roarr-split__content > :is(ul, ol, .roarr-glance-list) {
		order: 4;
	}

	.roarr-split--map .roarr-split__content > :is(.roarr-button-row, .roarr-action-row),
	.roarr-split--map .roarr-split__content > :has(> :is(.roarr-button-row, .roarr-action-row)) {
		order: 5;
	}

	/* Tabular / interactive content blocks (rate tables etc.) aren't a
	   header/body/picture/bullets/cta stack — keep the content block intact
	   so it stacks as one unit above the media instead of flattening apart. */
	.roarr-split > .roarr-split__content:has(> .roarr-rate-stack, > .roarr-rate-card, > table) {
		display: block;
	}
}

@media (min-width: 1024px) {
	.roarr-split {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		gap: var(--space-80);
	}

	.roarr-split--media-fill {
		align-items: stretch;
	}

	.roarr-split--media-fill .roarr-split__media {
		position: relative;
		min-height: 0;
	}

	.roarr-split--media-fill .roarr-media-frame {
		position: absolute;
		inset: 0;
		width: auto;
		height: auto;
	}

	.roarr-split--media-fill .roarr-media-frame img {
		position: absolute;
		inset: 0;
		min-height: 0;
		aspect-ratio: auto;
	}

	.roarr-split--info.roarr-split--media-fill {
		align-items: stretch;
	}

	/* Image-led split: the visual is the hero and dominates the row. */
	.roarr-split--media-hero {
		grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
	}

	/* Map variant: 2-col like media-hero but the map (media, 2nd col) leads and
	   shows whole/uncropped (see the img rule above). Content sits left. */
	.roarr-split--map {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
		align-items: center;
	}

	/* Homepage plan block: the saved Gutenberg split uses the media-hero
	   style, but its glance list + illustrated map follow the mock's narrower
	   planning-copy lane. Keep the bullets wrapping compactly and let the map
	   remain the dominant desktop visual (mock: .roarr-plan-day__inner). */
	:is(body.home .roarr-site-main, .editor-styles-wrapper)
		.roarr-section
		> .roarr-split.roarr-split--media-hero:has(.roarr-glance-list) {
		grid-template-columns: minmax(280px, 0.74fr) minmax(0, 1.46fr);
		column-gap: var(--space-64);
		align-items: start;
	}

	:is(body.home .roarr-site-main, .editor-styles-wrapper)
		.roarr-section
		> .roarr-split.roarr-split--media-hero:has(.roarr-glance-list)
		.roarr-split__media {
		align-self: start;
		margin-top: var(--space-40);
	}

	/* map-fill (contact-us opening-times + map) must stay single-column/
	   stacked at every width — re-declared here because it's otherwise the
	   same specificity (one class) as the .roarr-split desktop 2-col rule
	   above and loses on source order once this @media block wins at
	   ≥1024px, which was rendering the opening-times table and map
	   side-by-side instead of the mock's full-width stack. */
	.roarr-split--map-fill {
		grid-template-columns: 1fr;
	}

	.roarr-split--flip > :first-child {
		order: 2;
	}
}

/* ── Media stack variant (e.g. attraction singles' what-to-expect) ──
   Media becomes a vertical stack of frames rather than one frame. */
@media (min-width: 1024px) {
	.roarr-split--media-stack .roarr-split__media {
		display: grid;
		gap: var(--space-16);
	}

	.roarr-split--media-stack .roarr-split__media .roarr-media-frame img {
		aspect-ratio: var(--image-ratio-landscape);
	}
}

/* ── Document/scan image: bare, natural ratio, no cropping frame ──
   Ported from mock design-reference/mocks/css/styles.css (~L8353) — the
   pricing "One Ticket" calendar scan and similar document photography sit
   directly in .roarr-split__media (see Split.tsx's BARE_MEDIA_CLASSES),
   not the fixed-ratio .roarr-media-frame, so it isn't cover-cropped down. */
.roarr-document-image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-md);
}

/* ── Gift variant: transparent voucher cutout, no fixed-ratio frame ── */
.roarr-gift-card {
	margin: 0;
	width: 100%;
	max-width: calc(var(--space-120) * 4);
	justify-self: center;
	background: transparent;
}

.roarr-gift-card img {
	display: block;
	width: 100%;
	height: auto;
	filter: var(--filter-gift-card-shadow);
}

@media (min-width: 1024px) {
	.roarr-split--gift {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: clamp(var(--space-40), 5vw, var(--space-80));
	}
}

/* ── Supporting quote callout (media-stack variant) ── */
.roarr-callout--quote {
	display: block;
	position: relative;
	padding: var(--space-32);
	background: var(--parchment);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
}

.roarr-callout--quote::before {
	content: "\201C";
	position: absolute;
	top: var(--space-8);
	right: var(--space-16);
	font-family: var(--font-heading);
	font-size: var(--h1);
	line-height: 1;
	color: color-mix(in srgb, var(--jungle-green) 18%, transparent);
	pointer-events: none;
}

.roarr-callout__eyebrow {
	margin: 0 0 var(--space-8);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: var(--weight-heavy);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--primary);
}

.roarr-callout__quote {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: var(--weight-medium);
	line-height: var(--lh-snug);
	color: var(--deep-forest);
	text-wrap: pretty;
}

/**
 * App cross-sell media: phone mockup image + app-store/google-play badge
 * row. Ported from design-reference/mocks/css/styles.css (~lines 7004-7064,
 * 16179-16192). Used on whats-open.html's #roarr-app dark-forest-break
 * split and roarr-app.html's #download-app page split.
 */
.roarr-app-phones {
	/* Size the visual from the same fluid heading token as the adjacent copy.
	   The media lane remains the first constraint at narrow widths, while the
	   fixed rem ceiling stops the artwork growing indefinitely on ultrawide
	   screens. The class lives on the core/image figure, so it survives a
	   Media Library replacement without depending on a specific attachment. */
	--roarr-app-phones-inline-cap: 40rem;
	--roarr-app-phones-block-cap: 30rem;
	display: grid;
	place-items: center;
	width: min(100%, 13.5em);
	max-width: var(--roarr-app-phones-inline-cap);
	max-height: var(--roarr-app-phones-block-cap);
	margin-inline: auto;
	font-size: var(--h2);
	line-height: 1;
	filter: drop-shadow(0 var(--space-20) var(--space-40) color-mix(in srgb, var(--deep-forest) 55%, transparent));
}

.roarr-app-phones img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	max-height: var(--roarr-app-phones-block-cap);
	object-fit: contain;
	object-position: center;
}

.roarr-app-phones figcaption {
	font-size: var(--text-sm);
	line-height: var(--lh-normal);
}

/* The stacked tablet split keeps its media lane full-width. Override the
   split figure reset only at this breakpoint so the narrower, type-scaled
   phone artwork sits on the lane centre without changing phone or desktop. */
@media (min-width: 768px) and (max-width: 1023px) {
	:is(.roarr-site-main, .editor-styles-wrapper) .roarr-split__media > .wp-block-image.roarr-app-phones {
		margin-inline: auto;
	}
}

:is(.roarr-site-main, .editor-styles-wrapper) #download-app .roarr-app-download {
	gap: var(--space-24);
}

:is(.roarr-site-main, .editor-styles-wrapper) #download-app .roarr-app-download__media {
	align-self: center;
}

:is(.roarr-site-main, .editor-styles-wrapper) #download-app .roarr-plan-day__store-row {
	justify-content: flex-start;
	margin-top: var(--space-16);
}

.roarr-plan-day__store-row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-8);
	width: 100%;
	max-width: calc(var(--space-128) * 2 + var(--space-96));
}

.roarr-plan-day__store-badge {
	display: block;
	flex: 300 1 0;
	height: auto;
	aspect-ratio: var(--image-ratio-badge-wide);
	border-radius: var(--radius-xs);
	filter: drop-shadow(0 var(--space-4) var(--space-8) color-mix(in srgb, var(--deep-forest) 30%, transparent));
	text-decoration: none;
	transition:
		filter var(--speed) var(--ease),
		transform var(--speed) var(--ease);
}

:is(.roarr-plan-day__store-badge--google-play, .roarr-plan-day__store-badge-google-play) {
	flex-grow: 340;
	aspect-ratio: var(--image-ratio-app-badge);
}

.roarr-plan-day__store-badge img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.roarr-plan-day__store-badge:hover {
	filter: drop-shadow(0 var(--space-12) var(--space-20) color-mix(in srgb, var(--deep-forest) 50%, transparent));
	transform: translateY(calc(-1 * var(--space-4)));
}

.roarr-plan-day__store-badge:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: var(--space-4);
}

/* Shared dark app-upsell split: centre the badge row in its column — the
   content grid stretches children, but the row's max-width caps it short
   and it would otherwise pin left. */
:is(.roarr-section--dark, .roarr-section--dark-forest-break) .roarr-split__content .roarr-plan-day__store-row {
	margin-inline: auto;
}

@media (max-width: 1023px) {
	/* Treat the app-store badges as a normal CTA row below the phone artwork:
	   the split owns the vertical rhythm, while the row owns only alignment. */
	:is(.roarr-site-main, .editor-styles-wrapper) #download-app .roarr-app-download__media {
		margin-block: 0;
	}

	:is(.roarr-site-main, .editor-styles-wrapper) #download-app .roarr-app-download__media > .roarr-app-phones {
		margin-inline: auto;
	}

	:is(.roarr-site-main, .editor-styles-wrapper) #download-app .roarr-app-download__stores {
		justify-content: center;
		width: 100%;
		max-width: none;
		margin: 0;
	}

	/* Shared app cross-sells keep the download action attached to the phone
	   artwork when the split stacks. Their badge row lives inside the copy
	   group, so it needs its own slot after the media rather than inheriting
	   the body-copy order. */
	:is(.roarr-site-main, .editor-styles-wrapper) #roarr-app .roarr-split__content > .roarr-plan-day__store-row {
		order: 4;
		justify-content: center;
		width: 100%;
		max-width: none;
		margin: 0;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	/* Tablet presents the app cross-sell as one centred vertical story. */
	:is(.roarr-site-main, .editor-styles-wrapper)
		#roarr-app
		.roarr-split__content
		> :is(h1, h2, .roarr-section__title, p) {
		text-align: center;
	}
}

@media (max-width: 767px) {
	/* Phone keeps the same centred story as tablet so every element shares one
	   clear vertical axis at the narrowest width. */
	:is(.roarr-site-main, .editor-styles-wrapper)
		#roarr-app
		.roarr-split__content
		> :is(h1, h2, .roarr-section__title) {
		text-align: center;
	}

	:is(.roarr-site-main, .editor-styles-wrapper) #roarr-app .roarr-split__content > p {
		text-align: center;
	}

	:is(.roarr-site-main, .editor-styles-wrapper) #download-app {
		padding-top: var(--space-32);
	}

	:is(.roarr-site-main, .editor-styles-wrapper) #download-app .roarr-split {
		gap: var(--space-24);
	}

	.roarr-app-page #whats-open-upsell .roarr-button-row {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-16);
	}

	.roarr-app-page #whats-open-upsell .roarr-button-row .btn {
		flex: 1 1 auto;
		width: 100%;
		min-width: 0;
	}
}

@media (min-width: 1024px) {
	:is(.roarr-site-main, .editor-styles-wrapper) #download-app .roarr-app-download {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
		column-gap: var(--space-80);
		row-gap: var(--space-24);
	}

	:is(.roarr-site-main, .editor-styles-wrapper) #download-app .roarr-app-download__media {
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	:is(.roarr-site-main, .editor-styles-wrapper) #download-app .roarr-split__content {
		align-self: end;
	}

	:is(.roarr-site-main, .editor-styles-wrapper) #download-app .roarr-app-download__stores {
		align-self: start;
		grid-column: 1;
		margin-top: 0;
	}

}

/* -- src/blocks/ticket-card-grid.css (canonical component source) -- */
/**
 * roarr/ticket-card-grid + roarr/ticket-card — ported verbatim from
 * design-reference/mocks/css/styles.css lines 5717-6213 ("Ticket option
 * cards"). See card-grid/style.css header for the token-alias caveat
 * (applies to all Wave 3+ blocks) — this file is the working stylesheet for
 * both the editor (via build-editor-css.mjs) and the real Next.js front end.
 */

.roarr-ticket-card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-16);
	margin-top: var(--space-40);
	padding-bottom: 0;
}

.roarr-ticket-card {
	position: relative;
	container-type: inline-size;
	--ticket-card-visual-inline: clamp(var(--space-112), 64.5cqi, calc(var(--space-128) + var(--space-32)));
	--ticket-card-visual-size: clamp(var(--space-128), 80.7cqi, calc(var(--space-128) + var(--space-72)));
	--ticket-card-visual-shift-x: clamp(calc(var(--space-32) * -1), -12.9cqi, calc(var(--space-8) * -1));
	--ticket-card-visual-shift-y: clamp(calc(var(--space-24) * -1), -9.7cqi, calc(var(--space-12) * -1));
	/* Single placement source for Terry across the component and the flat
	   Gutenberg bridge. Keeping these on the card prevents later bundle order
	   changes from restoring the old downward offset. */
	--ticket-terry-phone-x: -27px;
	--ticket-terry-phone-y: -28px;
	--ticket-terry-phone-scale: 1.7;
	display: grid;
	grid-template-rows: auto 1fr;
	align-content: stretch;
	gap: var(--space-24);
	min-height: calc(var(--space-128) + var(--space-112));
	overflow: hidden;
	padding: var(--space-24);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--white) 52%, transparent), transparent 62%),
		var(--card-on-light);
	box-shadow: 0 var(--space-8) var(--space-24) color-mix(in srgb, var(--deep-forest) 9%, transparent);
	color: var(--text-primary);
	text-decoration: none;
	isolation: isolate;
	transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

.roarr-ticket-card:hover,
.roarr-ticket-card:focus-visible {
	border-color: color-mix(in srgb, var(--primary) 36%, var(--border-light));
	box-shadow: var(--shadow-soft);
	outline: none;
	text-decoration: none;
	transform: translateY(calc(var(--space-4) * -1));
}

.roarr-ticket-card__body {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(var(--ticket-card-visual-inline), 52%);
	grid-template-areas:
		"copy copy"
		"price visual"
		"link visual";
	column-gap: var(--space-8);
	row-gap: var(--space-8);
	align-items: end;
	min-height: calc(var(--space-128) + var(--space-32));
}

.roarr-ticket-card__content {
	display: contents;
}

.roarr-ticket-card__title,
.roarr-ticket-card__price,
.roarr-ticket-card__link {
	font-family: var(--font-heading);
	font-weight: var(--weight-heavy);
	line-height: var(--lh-snug);
	letter-spacing: 0;
	text-transform: uppercase;
}

.roarr-ticket-card__title {
	position: relative;
	z-index: 3;
	color: var(--text-primary);
	font-size: var(--text-lg);
	width: 100%;
	max-width: none;
	text-align: center;
	text-wrap: balance;
}

.roarr-ticket-card__copy {
	grid-area: copy;
	max-width: 24ch;
	justify-self: center;
	color: var(--text-secondary);
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	line-height: var(--lh-normal);
	text-align: center;
	overflow-wrap: anywhere;
}

.roarr-ticket-card__price {
	grid-area: price;
	position: relative;
	z-index: 3;
	display: grid;
	align-content: end;
	justify-items: start;
	gap: var(--space-8);
	margin-top: 0;
	color: var(--amber);
	font-size: clamp(calc(var(--text-xl) + var(--space-4)), 2.35vw, var(--h2));
	line-height: 0.98;
	text-align: left;
}

.roarr-ticket-card__price small {
	color: var(--text-primary);
	font-size: var(--text-sm);
	line-height: var(--lh-solid);
}

@media (min-width: 768px) {
	.roarr-ticket-card__price--enquiry {
		font-size: var(--text-xl);
		line-height: var(--lh-tight);
	}
}

.roarr-ticket-card__price--message {
	justify-items: start;
	max-width: 10ch;
	font-size: clamp(var(--text-lg), 1.75vw, var(--text-xl));
	line-height: var(--lh-solid);
	text-align: left;
	text-wrap: balance;
}

.roarr-ticket-card__price--message span {
	display: block;
}

.roarr-ticket-card__price--message small {
	font-size: var(--text-sm);
}

.roarr-ticket-card__link {
	grid-area: link;
	position: relative;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	align-self: end;
	margin-top: 0;
	color: var(--primary);
	font-size: var(--text-sm);
	white-space: nowrap;
}

.roarr-ticket-card__link::after {
	content: ">";
}

.roarr-ticket-card__visual {
	position: relative;
	z-index: 1;
	grid-area: visual;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	justify-self: end;
	align-self: end;
	min-width: 0;
	inline-size: var(--ticket-card-visual-inline);
	block-size: var(--ticket-card-visual-size);
	margin-right: var(--ticket-card-visual-shift-x);
	margin-bottom: var(--ticket-card-visual-shift-y);
	overflow: visible;
	pointer-events: none;
}

.roarr-ticket-card--exclusive-adventure .roarr-ticket-card__visual {
	align-items: flex-start;
	padding-top: var(--space-16);
}

.roarr-ticket-card--annual-pass,
.roarr-ticket-card--exclusive-adventure {
	--ticket-card-visual-inline: clamp(var(--space-112), 61.3cqi, calc(var(--space-128) + var(--space-24)));
}

.roarr-ticket-card--exclusive-adventure {
	gap: 0;
}

.roarr-ticket-card--exclusive-adventure .roarr-ticket-card__body {
	row-gap: 0;
}

.roarr-ticket-card--exclusive-adventure .roarr-ticket-card__price {
	transform: translateY(calc(var(--space-8) * -1));
}

.roarr-ticket-card__asset,
.roarr-ticket-card__visual:is(
	.is-style-roarr-ticket-asset-dino,
	.is-style-roarr-ticket-asset-school,
	.is-style-roarr-ticket-asset-hatchling,
	.is-style-roarr-ticket-asset-pass
) > img {
	--ticket-asset-max-width: 118%;
	--ticket-asset-max-height: 118%;
	--ticket-asset-x: 0px;
	--ticket-asset-y: 0px;
	--ticket-asset-rotate: 0deg;
	--ticket-asset-scale: 1;
	--ticket-asset-origin: 50% 50%;
	display: block;
	width: auto;
	height: auto;
	max-width: var(--ticket-asset-max-width);
	max-height: var(--ticket-asset-max-height);
	object-fit: contain;
	object-position: right bottom;
	pointer-events: none;
	transform: translate(var(--ticket-asset-x), var(--ticket-asset-y)) rotate(var(--ticket-asset-rotate)) scale(var(--ticket-asset-scale));
	transform-origin: var(--ticket-asset-origin);
}

.roarr-ticket-card__asset--dino,
.roarr-ticket-card__visual.is-style-roarr-ticket-asset-dino > img {
	--ticket-asset-max-width: 146%;
	--ticket-asset-max-height: 132%;
	--ticket-asset-x: clamp(10px, 5.65cqi, 14px);
	--ticket-asset-y: clamp(8px, 4.03cqi, 10px);
	--ticket-asset-scale: 0.83;
	margin-right: 0;
	margin-bottom: 0;
}

.roarr-ticket-card__asset--hatchling,
.roarr-ticket-card__visual.is-style-roarr-ticket-asset-hatchling > img {
	--ticket-asset-max-width: 146%;
	--ticket-asset-max-height: 132%;
	--ticket-asset-x: clamp(-6px, -2.42cqi, -4px);
	--ticket-asset-y: clamp(24px, 14.92cqi, 37px);
	--ticket-asset-scale: 0.81;
	margin-right: 0;
	margin-bottom: 0;
}

.roarr-ticket-card__asset--school,
.roarr-ticket-card__visual.is-style-roarr-ticket-asset-school > img {
	--ticket-asset-max-width: 122%;
	--ticket-asset-max-height: 128%;
	--ticket-asset-x: -62px;
	--ticket-asset-y: -68px;
	--ticket-asset-scale: 1.6;
	margin-right: calc(var(--space-64) * -1);
	margin-bottom: calc(var(--space-40) * -1);
}

.roarr-ticket-card__asset--pass,
.roarr-ticket-card__visual.is-style-roarr-ticket-asset-pass > img {
	--ticket-asset-max-width: 92%;
	--ticket-asset-x: -22px;
	--ticket-asset-y: 19px;
	--ticket-asset-rotate: -7deg;
	--ticket-asset-scale: 1.49;
	--ticket-asset-origin: 54% 58%;
	margin-right: var(--space-8);
	margin-bottom: var(--space-8);
}

@media (min-width: 640px) {
	.roarr-ticket-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: var(--space-40);
	}
}

@media (min-width: 1024px) {
	.roarr-ticket-card {
		min-height: calc(var(--space-128) + var(--space-96));
	}

	.roarr-ticket-card__body {
		grid-template-columns: minmax(0, 1fr) minmax(var(--ticket-card-visual-inline), 46%);
	}
}

@media (min-width: 640px) and (max-width: 1279px) {
	/* Keep the existing compact tablet cards at their intended measure when
	   the 4-up desktop row collapses. Wider 2-up rows only stretch the card
	   anatomy; the tablet card itself is already the approved treatment. */
	.roarr-ticket-card-grid {
		width: 100%;
		max-width: 43rem;
		margin-inline: auto;
	}

	.roarr-ticket-card__asset--pass,
	.roarr-ticket-card__visual.is-style-roarr-ticket-asset-pass > img {
		margin-right: var(--space-8);
		margin-bottom: var(--space-16);
	}

	.roarr-ticket-card__asset--school,
	.roarr-ticket-card__visual.is-style-roarr-ticket-asset-school > img {
		margin-right: calc(var(--space-48) * -1);
		margin-bottom: calc(var(--space-32) * -1);
	}
}

@media (min-width: 1280px) {
	.roarr-ticket-card-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--space-16);
		margin-top: var(--space-40);
	}

	.roarr-ticket-card__body,
	.roarr-ticket-card--exclusive-adventure .roarr-ticket-card__body {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		column-gap: var(--space-8);
	}

	/* 4-up row is dense — keep the supporting text compact here only. */
	.roarr-ticket-card__copy,
	.roarr-ticket-card__link,
	.roarr-ticket-card__price small,
	.roarr-ticket-card__price--message small {
		font-size: var(--text-xs);
	}
}

@media (max-width: 420px) {
	.roarr-ticket-card {
		gap: var(--space-16);
		min-height: calc(var(--space-128) + var(--space-96));
		padding: var(--space-24);
	}

	.roarr-ticket-card__body {
		grid-template-columns: minmax(0, 1fr) minmax(var(--ticket-card-visual-inline), 42%);
		gap: var(--space-8);
		min-height: var(--space-128);
	}

	.roarr-ticket-card__content {
		max-width: none;
	}
}

/* Mobile + tablet: scale the whole dino system down by ~0.8 (box + every
   position offset by the same factor) so cards compact and the characters
   stop dominating, while each one keeps its exact relative framing. Desktop
   (4-up, >=1280px) is untouched and looks the same. */
@media (max-width: 1279px) {
	.roarr-ticket-card {
		--ticket-card-visual-inline: clamp(var(--space-96), 52cqi, var(--space-128));
		--ticket-card-visual-size: clamp(var(--space-112), 65cqi, calc(var(--space-128) + var(--space-32)));
		min-height: calc(var(--space-128) + var(--space-64));
	}

	.roarr-ticket-card--annual-pass,
	.roarr-ticket-card--exclusive-adventure {
		--ticket-card-visual-inline: clamp(var(--space-96), 49cqi, calc(var(--space-112) + var(--space-8)));
	}

	/* Pull the whole character left into the card to close the gap by the text. */
	.roarr-ticket-card__visual {
		transform: translateX(calc(var(--space-16) * -1));
	}

	.roarr-ticket-card__asset--dino,
	.roarr-ticket-card__visual.is-style-roarr-ticket-asset-dino > img {
		--ticket-asset-x: clamp(8px, 4.5cqi, 11px);
		--ticket-asset-y: clamp(6px, 3.2cqi, 8px);
	}

	.roarr-ticket-card__asset--hatchling,
	.roarr-ticket-card__visual.is-style-roarr-ticket-asset-hatchling > img {
		--ticket-asset-x: clamp(-5px, -1.9cqi, -3px);
		--ticket-asset-y: clamp(19px, 11.9cqi, 30px);
	}

	.roarr-ticket-card__asset--school,
	.roarr-ticket-card__visual.is-style-roarr-ticket-asset-school > img {
		--ticket-asset-x: -50px;
		--ticket-asset-y: -54px;
		margin-right: calc(var(--space-48) * -1);
		margin-bottom: calc(var(--space-32) * -1);
	}

	.roarr-ticket-card__asset--pass,
	.roarr-ticket-card__visual.is-style-roarr-ticket-asset-pass > img {
		--ticket-asset-x: -18px;
		--ticket-asset-y: 15px;
		margin-right: var(--space-8);
		margin-bottom: var(--space-8);
	}
}

/* Phones: 2-up grid. The side-by-side price/character anatomy can't
   survive a ~170px card, so each card restacks vertically — title,
   copy, centred character, price, link — with the hand-tuned asset
   offsets reset to a plain centred bottom anchor. Must sit after the
   <=1279 dino-system block to win the cascade. */
@media (max-width: 639px) {
	.roarr-ticket-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-8);
	}

	.roarr-ticket-card,
	.roarr-ticket-card--exclusive-adventure {
		gap: var(--space-8);
		min-height: 0;
		padding: var(--space-16) var(--space-16);
	}

	.roarr-ticket-card__body,
	.roarr-ticket-card--exclusive-adventure .roarr-ticket-card__body {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"copy"
			"visual"
			"price"
			"link";
		row-gap: var(--space-8);
		justify-items: center;
		min-height: 0;
	}

	.roarr-ticket-card__copy {
		max-width: none;
	}

	.roarr-ticket-card__visual,
	.roarr-ticket-card--exclusive-adventure .roarr-ticket-card__visual {
		justify-self: center;
		align-self: end;
		align-items: flex-end;
		justify-content: center;
		inline-size: clamp(var(--space-96), 64cqi, calc(var(--space-112) + var(--space-16)));
		block-size: clamp(var(--space-96), 64cqi, calc(var(--space-112) + var(--space-16)));
		margin: 0;
		padding-top: 0;
		transform: none;
	}

	.roarr-ticket-card__asset,
	.roarr-ticket-card__asset--dino,
	.roarr-ticket-card__asset--school,
	.roarr-ticket-card__asset--hatchling,
	.roarr-ticket-card__asset--pass,
	.roarr-ticket-card__visual:is(
		.is-style-roarr-ticket-asset-dino,
		.is-style-roarr-ticket-asset-school,
		.is-style-roarr-ticket-asset-hatchling,
		.is-style-roarr-ticket-asset-pass
	) > img {
		--ticket-asset-x: 0px;
		--ticket-asset-y: 0px;
		--ticket-asset-rotate: 0deg;
		--ticket-asset-scale: 1;
		--ticket-asset-max-width: 100%;
		--ticket-asset-max-height: 100%;
		margin: 0;
		object-position: center bottom;
	}

	/* Rob's phone framing, dialled in with the placement tool 10-06-2026. */
	.roarr-ticket-card__asset--dino,
	.roarr-ticket-card__visual.is-style-roarr-ticket-asset-dino > img {
		--ticket-asset-y: 1px;
		--ticket-asset-scale: 1.03;
	}

	/* Terry (Annual Pass card — class names are mismatched, this is him).
	   Scaled from the bottom edge so he grows up/sideways, not into the clip. */
	.roarr-ticket-card__asset--school,
	.roarr-ticket-card__visual.is-style-roarr-ticket-asset-school > img {
		--ticket-asset-x: var(--ticket-terry-phone-x);
		--ticket-asset-y: var(--ticket-terry-phone-y);
		--ticket-asset-scale: var(--ticket-terry-phone-scale);
		--ticket-asset-origin: 50% 100%;
	}

	.roarr-ticket-card__asset--hatchling,
	.roarr-ticket-card__visual.is-style-roarr-ticket-asset-hatchling > img {
		--ticket-asset-x: -3px;
		--ticket-asset-y: 7px;
		--ticket-asset-scale: 1.2;
	}

	.roarr-ticket-card__asset--pass,
	.roarr-ticket-card__visual.is-style-roarr-ticket-asset-pass > img {
		--ticket-asset-x: 4px;
		--ticket-asset-y: 1px;
		--ticket-asset-rotate: -7deg;
		--ticket-asset-scale: 1.22;
	}

	.roarr-ticket-card__price,
	.roarr-ticket-card--exclusive-adventure .roarr-ticket-card__price {
		justify-items: center;
		align-content: center;
		text-align: center;
		transform: none;
	}

	/* Short eyebrow labels (e.g. "School trips") stay on one line here —
	   the stacked mobile layout has more room than the desktop 10ch cap. */
	.roarr-ticket-card__price--message {
		max-width: none;
	}

	.roarr-ticket-card__link {
		align-self: center;
	}

}

/* -- src/blocks/upsell-themes.css (canonical component source) -- */
/**
 * ROARR section themes — editor-selectable surfaces for repeated promotions
 * and one-off feature bands. The surface and seam are separate variables so
 * artwork can stay art-directed while the break above carries the matching
 * gradient into the section cleanly.
 */

:root {
	--roarr-theme-dino-sunrise-base: linear-gradient(
		90deg,
		#d1bb70 0%,
		#d38d68 47%,
		#c55f7f 100%
	);
	--roarr-theme-dino-sunrise-seam:
		linear-gradient(90deg, rgb(255 246 216 / 10%) 0%, rgb(255 225 192 / 7%) 46%, transparent 75%),
		var(--roarr-theme-dino-sunrise-base);
	/* The break and the first/last row of each footprint section share this
	 * neutral repeatable surface exactly. Directional copy contrast and the
	 * large footprint art are separate masked layers, so neither can expose a
	 * seam when the content makes a section shorter or taller. */
	--roarr-theme-footprint-green-seam: linear-gradient(
		rgb(3 18 8 / 72%),
		rgb(3 18 8 / 72%)
	), url('assets/img/upsells/green-stone-texture-tile-v1.webp') center / 520px 520px repeat #294018;
	--roarr-theme-footprint-ember-seam: linear-gradient(
		rgb(37 12 13 / 74%),
		rgb(37 12 13 / 74%)
	), url('assets/img/upsells/ember-stone-texture-tile-v1.webp') center / 520px 520px repeat #6d3518;
	--roarr-theme-footprint-lagoon-seam: linear-gradient(
		rgb(3 31 37 / 74%),
		rgb(3 31 37 / 74%)
	), url('assets/img/upsells/lagoon-stone-texture-tile-v1.webp') center / 520px 520px repeat #0d5356;
}

/* An explicit editor-selected theme must outrank the automatic footprint
 * trails on cream sections. Match that placement contract's specificity so
 * this later theme source wins without using !important. */
.roarr-section.roarr-section.roarr-section:is(
	.roarr-section--theme-dino-sunrise,
	.roarr-section--theme-footprint-green,
	.roarr-section--theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-dino-sunrise,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) {
	--roarr-theme-edge-outer: var(--space-24);
	--roarr-theme-edge-inner: var(--space-144);
	position: relative;
	isolation: isolate;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* Reusable upsell layout contract. Marketing chooses the copy side on the
 * outer ROARR Section; the grid placement and the readability gradient then
 * move as one decision. No image analysis is involved, so replacement media
 * behaves predictably in the editor and on the public page. */
.roarr-section:is(
	.roarr-section--theme-dino-sunrise,
	.roarr-section--theme-footprint-green,
	.roarr-section--theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-dino-sunrise,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
):has(.roarr-split) {
	--roarr-upsell-copy-scrim: linear-gradient(
		90deg,
		var(--roarr-upsell-scrim-strong) 0%,
		var(--roarr-upsell-scrim-mid) 46%,
		var(--roarr-upsell-scrim-soft) 72%,
		transparent 100%
	);
}

.roarr-section.roarr-upsell-copy-right:is(
	.roarr-section--theme-dino-sunrise,
	.roarr-section--theme-footprint-green,
	.roarr-section--theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-dino-sunrise,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) {
	--roarr-upsell-copy-scrim: linear-gradient(
		270deg,
		var(--roarr-upsell-scrim-strong) 0%,
		var(--roarr-upsell-scrim-mid) 46%,
		var(--roarr-upsell-scrim-soft) 72%,
		transparent 100%
	);
}

.roarr-section.roarr-section.roarr-section:is(.roarr-section--theme-dino-sunrise, .is-style-roarr-bg-theme-dino-sunrise) {
	--roarr-upsell-heading-accent: var(--primary);
	--roarr-upsell-scrim-strong: rgb(248 234 196 / 48%);
	--roarr-upsell-scrim-mid: rgb(244 205 180 / 30%);
	--roarr-upsell-scrim-soft: rgb(244 205 180 / 6%);
	position: relative;
	isolation: isolate;
	background-color: #d38d68;
	/* This is deliberately the exact seam variable with no extra layer at the
	   boundary. The directional copy wash lives on ::after and fades in below
	   the overlapping break. */
	background-image: var(--roarr-theme-dino-sunrise-seam);
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	color: var(--deep-forest);
}

/* The section base and injected break above use the exact same horizontal
   gradient. Keep the transparent silhouette banner on a separate layer that
   fades in below the overlap, so it cannot recolour the boundary row or
   expose a seam. */
.roarr-section:is(.roarr-section--theme-dino-sunrise, .is-style-roarr-bg-theme-dino-sunrise)::before {
	/* Override the global coloured-section rule that suppresses decorative
	   pseudo-elements; this theme deliberately owns this masked art layer. */
	content: '' !important;
	position: absolute;
	z-index: 1;
	/* The global plan-day decoration also targets sections containing a glance
	   list. This full-bleed theme layer must own its box geometry instead. */
	inset: 0 !important;
	width: auto !important;
	height: auto !important;
	aspect-ratio: auto !important;
	opacity: 1 !important;
	display: block !important;
	transform: none !important;
	pointer-events: none;
	background-image: var(--roarr-theme-artwork-image, url('assets/img/upsells/dino-vector-banner-v1.webp')) !important;
	background-position: var(--roarr-theme-artwork-position, 50% 50%) !important;
	background-repeat: no-repeat !important;
	/* The 2:1 banner stays wider than narrow screens so both edge groups remain
	   visible, but the 1800px ceiling prevents ultrawide over-scaling. */
	background-size: clamp(900px, 100vw, 1800px) auto !important;
	mask-image: linear-gradient(
		to bottom,
		transparent 0,
		transparent var(--roarr-theme-edge-outer),
		#000 var(--roarr-theme-edge-inner),
		#000 calc(100% - var(--roarr-theme-edge-inner)),
		transparent calc(100% - var(--roarr-theme-edge-outer)),
		transparent 100%
	);
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0,
		transparent var(--roarr-theme-edge-outer),
		#000 var(--roarr-theme-edge-inner),
		#000 calc(100% - var(--roarr-theme-edge-inner)),
		transparent calc(100% - var(--roarr-theme-edge-outer)),
		transparent 100%
	);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

.roarr-section:is(.roarr-section--theme-dino-sunrise, .is-style-roarr-bg-theme-dino-sunrise)::after {
	content: '';
	position: absolute;
	z-index: 1;
	inset: 0 !important;
	width: auto !important;
	height: auto !important;
	aspect-ratio: auto !important;
	opacity: 1 !important;
	display: block !important;
	transform: none !important;
	pointer-events: none;
	background-image: var(--roarr-upsell-copy-scrim, linear-gradient(transparent, transparent)) !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0,
		transparent var(--roarr-theme-edge-outer),
		#000 var(--roarr-theme-edge-inner),
		#000 calc(100% - var(--roarr-theme-edge-inner)),
		transparent calc(100% - var(--roarr-theme-edge-outer)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to bottom,
		transparent 0,
		transparent var(--roarr-theme-edge-outer),
		#000 var(--roarr-theme-edge-inner),
		#000 calc(100% - var(--roarr-theme-edge-inner)),
		transparent calc(100% - var(--roarr-theme-edge-outer)),
		transparent 100%
	);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

.roarr-section:is(.roarr-section--theme-dino-sunrise, .is-style-roarr-bg-theme-dino-sunrise) > * {
	position: relative;
	z-index: 2;
}

.roarr-section.roarr-section.roarr-section:is(.roarr-section--theme-footprint-green, .is-style-roarr-bg-theme-footprint-green) {
	--roarr-upsell-heading-accent: var(--yellow);
	--roarr-upsell-scrim-strong: rgb(3 18 8 / 94%);
	--roarr-upsell-scrim-mid: rgb(3 18 8 / 70%);
	--roarr-upsell-scrim-soft: rgb(3 18 8 / 22%);
	--roarr-theme-footprint-art: url('assets/img/upsells/footprint-green-masked-v1.webp');
	--roarr-theme-footprint-size: clamp(1080px, 100vw, 1800px) auto;
	background-color: #294018;
	background: var(--roarr-theme-footprint-green-seam);
	color: var(--text-on-dark);
}

.roarr-section.roarr-section.roarr-section:is(.roarr-section--theme-footprint-ember, .is-style-roarr-bg-theme-footprint-ember) {
	--roarr-upsell-heading-accent: var(--yellow);
	--roarr-upsell-scrim-strong: rgb(25 9 7 / 95%);
	--roarr-upsell-scrim-mid: rgb(49 15 18 / 72%);
	--roarr-upsell-scrim-soft: rgb(39 8 20 / 24%);
	--roarr-theme-footprint-art: url('assets/img/upsells/footprint-ember-masked-v1.webp');
	--roarr-theme-footprint-size: clamp(1040px, 100vw, 1740px) auto;
	background-color: #6d3518;
	background: var(--roarr-theme-footprint-ember-seam);
	color: var(--text-on-dark);
}

.roarr-section.roarr-section.roarr-section:is(.roarr-section--theme-footprint-lagoon, .is-style-roarr-bg-theme-footprint-lagoon) {
	--roarr-upsell-heading-accent: var(--yellow);
	--roarr-upsell-scrim-strong: rgb(2 20 25 / 95%);
	--roarr-upsell-scrim-mid: rgb(3 37 42 / 72%);
	--roarr-upsell-scrim-soft: rgb(5 62 65 / 24%);
	--roarr-theme-footprint-art: url('assets/img/upsells/footprint-lagoon-masked-v1.webp');
	--roarr-theme-footprint-size: clamp(1080px, 100vw, 1800px) auto;
	background-color: #0d5356;
	background: var(--roarr-theme-footprint-lagoon-seam);
	color: var(--text-on-dark);
}

/* Keep the recognisable footprint in the copy lane instead of beneath the
 * replaceable image stage. The directional scrim remains above the art, so
 * light copy stays readable while a square or landscape image can no longer
 * hide the centre of the footprint. Copy-left is the backwards-compatible
 * default for themed splits; the explicit right-hand option mirrors it. */
:is(
	.roarr-section--theme-footprint-green,
	.roarr-section--theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
):has(.roarr-split) {
	--roarr-theme-footprint-position: calc(50% - min(25vw, 360px)) 50%;
}

.roarr-section.roarr-upsell-copy-right:is(
	.roarr-section--theme-footprint-green,
	.roarr-section--theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) {
	--roarr-theme-footprint-position: calc(50% + min(25vw, 360px)) 50%;
}

/* Footprint art is deliberately not part of the section background stack.
 * The section and both breaks own only the repeatable seam surface. This
 * container-masked layer can stay large and dramatic while always fading
 * back to that exact surface before either edge, even when content height
 * changes. */
:is(
	.roarr-section--theme-footprint-green,
	.roarr-section--theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
)::before {
	content: '' !important;
	position: absolute;
	z-index: 1;
	inset: 0 !important;
	width: auto !important;
	height: auto !important;
	aspect-ratio: auto !important;
	opacity: 1 !important;
	display: block !important;
	transform: none !important;
	pointer-events: none;
	background-image: var(--roarr-theme-footprint-art) !important;
	background-position: var(--roarr-theme-footprint-position, 50% 50%) !important;
	background-repeat: no-repeat !important;
	background-size: var(--roarr-theme-footprint-size) !important;
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0,
		transparent var(--roarr-theme-edge-outer),
		#000 var(--roarr-theme-edge-inner),
		#000 calc(100% - var(--roarr-theme-edge-inner)),
		transparent calc(100% - var(--roarr-theme-edge-outer)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to bottom,
		transparent 0,
		transparent var(--roarr-theme-edge-outer),
		#000 var(--roarr-theme-edge-inner),
		#000 calc(100% - var(--roarr-theme-edge-inner)),
		transparent calc(100% - var(--roarr-theme-edge-outer)),
		transparent 100%
	);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

:is(
	.roarr-section--theme-footprint-green,
	.roarr-section--theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
)::after {
	content: '';
	position: absolute;
	z-index: 1;
	inset: 0 !important;
	width: auto !important;
	height: auto !important;
	aspect-ratio: auto !important;
	opacity: 1 !important;
	display: block !important;
	transform: none !important;
	pointer-events: none;
	background-image: var(--roarr-upsell-copy-scrim, linear-gradient(transparent, transparent)) !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0,
		transparent var(--roarr-theme-edge-outer),
		#000 var(--roarr-theme-edge-inner),
		#000 calc(100% - var(--roarr-theme-edge-inner)),
		transparent calc(100% - var(--roarr-theme-edge-outer)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to bottom,
		transparent 0,
		transparent var(--roarr-theme-edge-outer),
		#000 var(--roarr-theme-edge-inner),
		#000 calc(100% - var(--roarr-theme-edge-inner)),
		transparent calc(100% - var(--roarr-theme-edge-outer)),
		transparent 100%
	);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

:is(
	.roarr-section--theme-footprint-green,
	.roarr-section--theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) > * {
	position: relative;
	z-index: 2;
}

:is(.roarr-section--theme-dino-sunrise, .is-style-roarr-bg-theme-dino-sunrise) .roarr-copy,
:is(.roarr-section--theme-dino-sunrise, .is-style-roarr-bg-theme-dino-sunrise) .roarr-section__lede,
:is(.roarr-section--theme-dino-sunrise, .is-style-roarr-bg-theme-dino-sunrise) .roarr-glance-list li {
	color: color-mix(in srgb, var(--deep-forest) 88%, transparent);
}

:is(.roarr-section--theme-dino-sunrise, .is-style-roarr-bg-theme-dino-sunrise) .roarr-glance-list li {
	border-top-color: color-mix(in srgb, var(--deep-forest) 24%, transparent);
}

:is(.roarr-section--theme-dino-sunrise, .is-style-roarr-bg-theme-dino-sunrise) .roarr-leaf-heading em,
:is(.roarr-section--theme-dino-sunrise, .is-style-roarr-bg-theme-dino-sunrise) .roarr-section__title em {
	color: var(--roarr-upsell-heading-accent, var(--primary));
}

:is(
	.roarr-section--theme-footprint-green,
	.roarr-section--theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
)
	:is(.roarr-copy, .roarr-section__lede, .roarr-glance-list li) {
	color: var(--text-on-dark);
}

:is(
	.roarr-section--theme-footprint-green,
	.roarr-section--theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
)
	.roarr-glance-list li {
	border-top-color: color-mix(in srgb, var(--text-on-dark) 22%, transparent);
}

:is(
	.roarr-section--theme-footprint-green,
	.roarr-section--theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
)
	:is(.roarr-leaf-heading, .roarr-section__title) em {
	color: var(--roarr-upsell-heading-accent, var(--primary));
}

/* The foreground remains a normal Gutenberg Image block. Marketing selects
 * one of three treatments in the native Styles panel; every option has a
 * bounded stage, so swapping an attachment cannot make an ultrawide layout
 * enormous or collapse the section around a short image. */
.roarr-section:is(.roarr-upsell-copy-left, .roarr-upsell-copy-right) .roarr-split__media,
.roarr-annual-pass-upsell__media {
	display: grid;
	place-items: center;
	min-width: 0;
}

.roarr-section .wp-block-image:is(
	.is-style-roarr-upsell-media-cutout,
	.is-style-roarr-upsell-media-square,
	.is-style-roarr-upsell-media-landscape
),
.roarr-annual-pass-upsell__image {
	display: block;
	position: relative;
	justify-self: center;
	margin: 0;
	width: 100%;
}

.roarr-section .wp-block-image:is(.is-style-roarr-upsell-media-cutout, .roarr-annual-pass-upsell__image),
.roarr-annual-pass-upsell__image {
	isolation: isolate;
	overflow: visible;
	max-width: 42.5rem;
}

.roarr-section .wp-block-image.is-style-roarr-upsell-media-cutout::before,
.roarr-annual-pass-upsell__image::before {
	content: '';
	position: absolute;
	z-index: -1;
	inset: 12% 8%;
	border-radius: 50%;
	background: radial-gradient(circle, rgb(255 255 255 / 18%) 0%, rgb(255 255 255 / 7%) 42%, transparent 72%);
	filter: blur(var(--space-12));
	pointer-events: none;
}

.roarr-section .wp-block-image:is(.is-style-roarr-upsell-media-cutout, .roarr-annual-pass-upsell__image) img,
.roarr-annual-pass-upsell__image img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 35rem;
	object-fit: contain;
	object-position: center;
	filter: drop-shadow(0 var(--space-20) var(--space-24) rgb(4 18 9 / 28%));
}

.roarr-section .wp-block-image:is(.is-style-roarr-upsell-media-square, .is-style-roarr-upsell-media-landscape) {
	overflow: hidden;
	max-width: 42rem;
	border: 2px solid rgb(255 255 255 / 24%);
	border-radius: var(--radius-lg);
	background: color-mix(in srgb, var(--deep-forest) 28%, transparent);
	box-shadow: 0 var(--space-20) var(--space-48) rgb(2 16 13 / 34%);
}

.roarr-section .wp-block-image.is-style-roarr-upsell-media-square {
	width: min(100%, 34rem);
	aspect-ratio: 1;
}

.roarr-section .wp-block-image.is-style-roarr-upsell-media-landscape {
	width: min(100%, 42rem);
	aspect-ratio: 16 / 10;
}

.roarr-section .wp-block-image:is(.is-style-roarr-upsell-media-square, .is-style-roarr-upsell-media-landscape) img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--roarr-upsell-media-position, 50% 50%);
}

:is(
	.roarr-section--theme-footprint-green,
	.roarr-section--theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) .roarr-split__content {
	text-shadow:
		0 1px 2px rgb(0 0 0 / 82%),
		0 2px 18px rgb(0 0 0 / 68%);
}

/* Local heading and intro treatments avoid dimming the whole section. Apply
 * them to the text blocks themselves so they also survive the shared
 * tablet/mobile split layout, where the content wrapper becomes
 * display: contents. */
:is(
	.roarr-section--theme-footprint-green,
	.roarr-section--theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) .roarr-split__content > :is(h1, h2, p, .roarr-section__title, .roarr-leaf-heading) {
	position: relative;
	isolation: isolate;
}

/* Match the established home-hero Adventure treatment exactly: a solid black
 * duplicate shifted down and left behind the display lettering. */
:is(
	.roarr-section--theme-footprint-green,
	.roarr-section--theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) .roarr-split__content > :is(h1, h2, .roarr-section__title, .roarr-leaf-heading) {
	text-shadow: -0.07em 0.07em 0 var(--black);
}

:is(
	.roarr-section--theme-footprint-green,
	.roarr-section--theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) .roarr-split__content > p::before {
	content: '';
	position: absolute;
	z-index: -1;
	inset: -0.8em -1.15em;
	border-radius: 50%;
	background: radial-gradient(
		ellipse at 32% 50%,
		rgb(0 8 9 / 62%) 0%,
		rgb(0 8 9 / 44%) 48%,
		transparent 78%
	);
	filter: blur(10px);
	pointer-events: none;
}

:is(
	.roarr-section--theme-footprint-green,
	.roarr-section--theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) .roarr-split__content :is(.wp-block-button__link, .btn) {
	text-shadow: none;
}

/* The standard green primary and transparent white secondary actions lose
 * definition over the green, ember and lagoon stone artwork. Keep this
 * contrast treatment local to footprint themes: yellow leads, while the
 * secondary stays distinct on a solid light surface and turns yellow on
 * hover/focus. Both retain black copy at every state. */
:is(
	.roarr-section--theme-footprint-green,
	.roarr-section--theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) :is(.is-style-roarr-primary, .is-style-roarr-primary-large) .wp-block-button__link,
:is(
	.roarr-section--theme-footprint-green,
	.roarr-section--theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) .btn--primary {
	border-color: var(--yellow);
	background: var(--yellow);
	color: var(--black);
}

:is(
	.roarr-section--theme-footprint-green,
	.roarr-section--theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) :is(.is-style-roarr-primary, .is-style-roarr-primary-large) .wp-block-button__link:is(:hover, :focus-visible),
:is(
	.roarr-section--theme-footprint-green,
	.roarr-section--theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) .btn--primary:is(:hover, :focus-visible) {
	border-color: color-mix(in srgb, var(--yellow) 78%, var(--white));
	background: color-mix(in srgb, var(--yellow) 78%, var(--white));
	color: var(--black);
}

:is(
	.roarr-section--theme-footprint-green,
	.roarr-section--theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) :is(.is-style-roarr-secondary, .is-style-roarr-secondary-large) .wp-block-button__link,
:is(
	.roarr-section--theme-footprint-green,
	.roarr-section--theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) .btn--secondary {
	border-color: var(--black);
	background: var(--white);
	color: var(--black);
}

:is(
	.roarr-section--theme-footprint-green,
	.roarr-section--theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) :is(.is-style-roarr-secondary, .is-style-roarr-secondary-large) .wp-block-button__link:is(:hover, :focus-visible),
:is(
	.roarr-section--theme-footprint-green,
	.roarr-section--theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) .btn--secondary:is(:hover, :focus-visible) {
	border-color: var(--yellow);
	background: var(--yellow);
	color: var(--black);
}

@media (min-width: 1024px) {
	/* Once the footprint moves into the copy lane, the original near-opaque
	 * wash hides it. Keep a desktop-only tinted veil plus the existing text
	 * shadow: enough contrast for white type, without losing the artwork. */
	.roarr-section.roarr-section.roarr-section:is(.roarr-section--theme-footprint-green, .is-style-roarr-bg-theme-footprint-green) {
		--roarr-upsell-scrim-strong: rgb(3 18 8 / 68%);
		--roarr-upsell-scrim-mid: rgb(3 18 8 / 50%);
		--roarr-upsell-scrim-soft: rgb(3 18 8 / 16%);
	}

	.roarr-section.roarr-section.roarr-section:is(.roarr-section--theme-footprint-ember, .is-style-roarr-bg-theme-footprint-ember) {
		--roarr-upsell-scrim-strong: rgb(25 9 7 / 74%);
		--roarr-upsell-scrim-mid: rgb(49 15 18 / 54%);
		--roarr-upsell-scrim-soft: rgb(39 8 20 / 16%);
	}

	.roarr-section.roarr-section.roarr-section:is(.roarr-section--theme-footprint-lagoon, .is-style-roarr-bg-theme-footprint-lagoon) {
		--roarr-upsell-scrim-strong: rgb(2 20 25 / 84%);
		--roarr-upsell-scrim-mid: rgb(3 37 42 / 70%);
		--roarr-upsell-scrim-soft: rgb(5 62 65 / 26%);
	}

	/* The section owns the artwork-safe minimum. Putting this height on the
	 * inner split double-counts normal section padding and any injected break
	 * clearance, producing an oversized band on real WordPress pages. */
	.roarr-section:is(
		.roarr-section--theme-dino-sunrise,
		.roarr-section--theme-footprint-green,
		.roarr-section--theme-footprint-ember,
		.roarr-section--theme-footprint-lagoon,
		.is-style-roarr-bg-theme-dino-sunrise,
		.is-style-roarr-bg-theme-footprint-green,
		.is-style-roarr-bg-theme-footprint-ember,
		.is-style-roarr-bg-theme-footprint-lagoon
	):has(.roarr-split) {
		min-height: clamp(34rem, 42vw, 42rem);
	}

	.roarr-section.roarr-upsell-copy-left .roarr-split > .roarr-split__content,
	.roarr-section.roarr-upsell-copy-right .roarr-split > .roarr-split__media {
		grid-column: 1;
		grid-row: 1;
	}

	.roarr-section.roarr-upsell-copy-left .roarr-split > .roarr-split__media,
	.roarr-section.roarr-upsell-copy-right .roarr-split > .roarr-split__content {
		grid-column: 2;
		grid-row: 1;
	}

	.roarr-annual-pass-upsell__layout {
		grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
		gap: clamp(var(--space-40), 5vw, var(--space-80));
	}

	.roarr-annual-pass-upsell__media {
		align-self: stretch;
		min-height: 420px;
	}
}

@media (max-width: 1023px) {
	.roarr-annual-pass-upsell__media {
		width: 100%;
	}

	.roarr-annual-pass-upsell__image {
		max-width: 560px;
	}

	.roarr-annual-pass-upsell__image img {
		max-height: 430px;
	}
}

/* Tablet is a deliberate single-column composition, not simply a desktop
 * layout that happened to wrap. Keep the copy, list and CTA on the same
 * centred measure as the selected media treatment so a square replacement
 * does not sit under a visibly wider paragraph, while landscape artwork can
 * still use the extra tablet width. */
@media (min-width: 768px) and (max-width: 1023px) {
	.roarr-section:is(.roarr-upsell-copy-left, .roarr-upsell-copy-right) {
		--roarr-upsell-tablet-wrap: 35rem;
	}

	:is(
		.roarr-section--theme-footprint-green,
		.roarr-section--theme-footprint-ember,
		.roarr-section--theme-footprint-lagoon,
		.is-style-roarr-bg-theme-footprint-green,
		.is-style-roarr-bg-theme-footprint-ember,
		.is-style-roarr-bg-theme-footprint-lagoon
	):has(.roarr-split) {
		--roarr-theme-footprint-position: 50% -32px;
		--roarr-theme-footprint-size: 1000px auto;
	}

	.roarr-section:is(.roarr-upsell-copy-left, .roarr-upsell-copy-right):has(.wp-block-image.is-style-roarr-upsell-media-square) {
		--roarr-upsell-tablet-wrap: 34rem;
	}

	.roarr-section:is(.roarr-upsell-copy-left, .roarr-upsell-copy-right):has(.wp-block-image.is-style-roarr-upsell-media-landscape) {
		--roarr-upsell-tablet-wrap: 42rem;
	}

	.roarr-section:is(.roarr-upsell-copy-left, .roarr-upsell-copy-right) .roarr-split__content > *,
	.roarr-section:is(.roarr-upsell-copy-left, .roarr-upsell-copy-right) .roarr-split__media {
		width: 100%;
		max-width: var(--roarr-upsell-tablet-wrap);
		margin-inline: auto;
	}

	/* Keep the heading block aligned with the media edge, but give its text a
	 * shorter balanced measure so normal upsell headings default to two lines
	 * at tablet width. This avoids authored <br> tags surviving into desktop
	 * or producing awkward wraps after marketing edits the words. */
	.roarr-section:is(.roarr-upsell-copy-left, .roarr-upsell-copy-right)
		.roarr-split__content
		> :is(h1, h2, .roarr-section__title, .roarr-leaf-heading) {
		box-sizing: border-box;
		padding-inline-end: max(0px, calc(100% - 28ch));
		text-wrap: balance;
	}
}

@media (max-width: 767px) {
	:root {
		--roarr-theme-dino-sunrise-seam:
			linear-gradient(rgb(255 242 211 / 12%), rgb(255 242 211 / 12%)),
			var(--roarr-theme-dino-sunrise-base);
		/* The masked footprint artwork is intentionally finite. On tall phone
		 * stacks, carry the stone detail and a restrained colour lift through
		 * the remaining section with the repeatable surface instead of scaling
		 * that artwork beyond its approved 900px width. */
		--roarr-theme-footprint-green-seam:
			radial-gradient(ellipse 150% 760px at 50% 62%, rgb(83 133 46 / 16%) 0%, transparent 72%),
			linear-gradient(180deg, rgb(3 18 8 / 84%) 0%, rgb(3 18 8 / 82%) 48%, rgb(3 18 8 / 88%) 100%),
			url('assets/img/upsells/green-stone-texture-tile-v1.webp') center top / 360px 360px repeat #294018;
		--roarr-theme-footprint-ember-seam:
			radial-gradient(ellipse 150% 760px at 50% 62%, rgb(171 78 35 / 15%) 0%, transparent 72%),
			linear-gradient(180deg, rgb(25 9 7 / 86%) 0%, rgb(25 9 7 / 84%) 48%, rgb(25 9 7 / 90%) 100%),
			url('assets/img/upsells/ember-stone-texture-tile-v1.webp') center top / 360px 360px repeat #6d3518;
		--roarr-theme-footprint-lagoon-seam:
			radial-gradient(ellipse 150% 760px at 50% 62%, rgb(29 132 135 / 18%) 0%, transparent 72%),
			linear-gradient(180deg, rgb(2 20 25 / 82%) 0%, rgb(2 20 25 / 80%) 48%, rgb(2 20 25 / 87%) 100%),
			url('assets/img/upsells/lagoon-stone-texture-tile-v1.webp') center top / 360px 360px repeat #0d5356;
	}

	.roarr-section.roarr-section.roarr-section:is(
		.roarr-section--theme-dino-sunrise,
		.roarr-section--theme-footprint-green,
		.roarr-section--theme-footprint-ember,
		.roarr-section--theme-footprint-lagoon,
		.is-style-roarr-bg-theme-dino-sunrise,
		.is-style-roarr-bg-theme-footprint-green,
		.is-style-roarr-bg-theme-footprint-ember,
		.is-style-roarr-bg-theme-footprint-lagoon
	) {
		--roarr-theme-edge-outer: var(--space-16);
		--roarr-theme-edge-inner: var(--space-112);
	}

	.roarr-section.roarr-section.roarr-section:is(.roarr-section--theme-dino-sunrise, .is-style-roarr-bg-theme-dino-sunrise) {
		--roarr-upsell-copy-scrim: linear-gradient(180deg, rgb(248 234 196 / 46%) 0%, rgb(244 205 180 / 24%) 58%, transparent 100%);
		background-image: var(--roarr-theme-dino-sunrise-seam);
		background-position: left top;
		background-size: 100% 100%;
	}

	.roarr-section:is(.roarr-section--theme-dino-sunrise, .is-style-roarr-bg-theme-dino-sunrise)::before {
		background-position: var(--roarr-theme-artwork-position, 50% 55%) !important;
		background-size: 600px auto !important;
	}

	.roarr-annual-pass-upsell__image {
		max-width: 440px;
	}

	.roarr-annual-pass-upsell__image img {
		max-height: 340px;
	}

	.roarr-section.roarr-section.roarr-section:is(.roarr-section--theme-footprint-green, .is-style-roarr-bg-theme-footprint-green) {
		--roarr-upsell-copy-scrim: linear-gradient(180deg, rgb(3 18 8 / 74%) 0%, rgb(3 18 8 / 58%) 58%, rgb(3 18 8 / 28%) 100%);
	}

	.roarr-section.roarr-section.roarr-section:is(.roarr-section--theme-footprint-ember, .is-style-roarr-bg-theme-footprint-ember) {
		--roarr-upsell-copy-scrim: linear-gradient(180deg, rgb(25 9 7 / 95%) 0%, rgb(49 15 18 / 72%) 58%, rgb(39 8 20 / 30%) 100%);
	}

	.roarr-section.roarr-section.roarr-section:is(.roarr-section--theme-footprint-lagoon, .is-style-roarr-bg-theme-footprint-lagoon) {
		--roarr-upsell-copy-scrim: linear-gradient(180deg, rgb(2 20 25 / 94%) 0%, rgb(3 37 42 / 72%) 58%, rgb(5 62 65 / 30%) 100%);
	}

	.roarr-section.roarr-section.roarr-section:is(
		.roarr-section--theme-footprint-green,
		.roarr-section--theme-footprint-ember,
		.roarr-section--theme-footprint-lagoon,
		.is-style-roarr-bg-theme-footprint-green,
		.is-style-roarr-bg-theme-footprint-ember,
		.is-style-roarr-bg-theme-footprint-lagoon
	) {
		/* Keep the heading clear of the track itself. The fixed-size artwork
		 * then crosses the intro copy and meets the top edge of stacked media. */
		--roarr-theme-footprint-position: 50% 128px;
		--roarr-theme-footprint-size: 900px auto;
	}
}

/* -- src/blocks/whats-open-calendar.css (canonical component source) -- */
/**
 * roarr/whats-open-calendar — ported from design-reference/mocks/css/styles.css
 * (whats-open.html-specific rules; the .roarr-split--rates duplicate rules already
 * live in split-rates.css — see that file's DEVIATION note, same page-body-class
 * scoping dropped here). Covers: the day-type card accent bar (.whats-open-day-card
 * variants), the calendar widget (.roarr-cal*), its hover/focus popover
 * (.roarr-cal-pop), the selected-date info panel (.whats-open-date-panel*), and the
 * opening-times drawer (.whats-open-times*). Keyframes ported alongside their rules.
 */

@keyframes roarr-cal-month-in {
  from { opacity: 0; transform: translateY(var(--space-8)); }
  to   { opacity: 1; transform: none; }
}

@keyframes roarr-cal-flash {
  0%   { background: color-mix(in srgb, var(--primary) 22%, transparent); }
  100% { background: transparent; }
}
.whats-open-page {
  background: var(--cream);
}

.whats-open-calendar-section {
  padding-top: var(--section-padding-mobile);
}

.whats-open-page .whats-open-calendar-section .roarr-split--rates .roarr-split__heading {
  overflow-wrap: normal;
  text-wrap: pretty;
}

.whats-open-day-types,

.whats-open-change-grid {
  align-items: stretch;
}

@media (min-width: 768px) and (max-width: 1023px) {

  .whats-open-day-types {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

.whats-open-day-card {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--day-accent, var(--primary)) 34%, var(--border-light));
}

.whats-open-day-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--space-4);
  background: var(--day-accent, var(--primary));
}

.whats-open-day-card--toddler {
  --day-accent: var(--yellow);
}

.whats-open-day-card--off-peak {
  --day-accent: var(--wp--preset--color--pink);
}

.whats-open-day-card--events {
  --day-accent: var(--primary);
}

.whats-open-day-card--peak {
  --day-accent: var(--mascot-terry);
}

.whats-open-day-card__meta {
  order: -1;
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-heavy);
  line-height: var(--lh-snug);
  text-transform: uppercase;
}

.whats-open-day-card__character {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: var(--space-144);
}

.whats-open-day-card__character img {
  width: auto;
  max-width: 100%;
  height: var(--space-128);
  object-fit: contain;
}

.whats-open-day-card--off-peak .whats-open-day-card__character img,

.whats-open-day-card--peak .whats-open-day-card__character img,

.whats-open-day-card--events .whats-open-day-card__character img {
  height: var(--space-144);
}

.whats-open-calendar-layout {
  grid-template-columns: 1fr;
  gap: var(--space-24);
  margin-top: var(--space-32);
}

.whats-open-calendar-layout .roarr-split__content,

.whats-open-calendar-layout .roarr-split__media {
  min-width: 0;
}

.whats-open-calendar-guide .roarr-glance-list li strong {
  color: var(--text-primary);
  font-weight: var(--weight-heavy);
}

.whats-open-date-panel {
  --day-accent: var(--primary);
  display: grid;
  gap: var(--space-16);
  border-color: color-mix(in srgb, var(--day-accent) 42%, var(--border-light));
}

.whats-open-date-panel--off-peak {
  --day-accent: var(--wp--preset--color--pink);
}

.whats-open-date-panel--peak {
  --day-accent: var(--mascot-terry);
}

.whats-open-date-panel--toddler {
  --day-accent: var(--yellow);
}

.whats-open-date-panel--closed {
  --day-accent: color-mix(in srgb, var(--deep-forest) 42%, var(--white));
}

.whats-open-date-panel__eyebrow,

.whats-open-date-panel__event-kicker {
  margin: 0;
  color: color-mix(in srgb, var(--day-accent) 68%, var(--deep-forest));
  font-size: var(--text-xs);
  font-weight: var(--weight-heavy);
  line-height: var(--lh-snug);
  text-transform: uppercase;
}

.whats-open-date-panel__type {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  margin: 0;
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-heavy);
  line-height: var(--lh-normal);
}

.whats-open-date-panel__chip {
  flex: 0 0 var(--space-16);
  width: var(--space-16);
  height: var(--space-16);
  border-radius: var(--radius-pill);
  background: var(--day-accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--deep-forest) 20%, transparent);
}

.whats-open-date-panel__summary,

.whats-open-date-panel__note,

.whats-open-date-panel__event-summary {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
}

.whats-open-date-panel__list {
  display: grid;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.whats-open-date-panel__list li {
  position: relative;
  padding-inline-start: var(--space-24);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
}

.whats-open-date-panel__list li::before {
  content: "";
  position: absolute;
  top: var(--space-6);
  left: 0;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-pill);
  background: var(--day-accent);
}

.whats-open-date-panel__event {
  display: grid;
  gap: var(--space-16);
  padding: var(--space-16);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--day-accent) 46%, var(--border-light));
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--day-accent) 14%, transparent), transparent 72%),
    var(--card-on-light);
}

.whats-open-date-panel__event[hidden] {
  display: none;
}

.whats-open-date-panel__event-link {
  display: grid;
  gap: var(--space-16);
  padding: var(--space-16);
  border-radius: inherit;
  color: inherit;
  text-decoration: none;
}

.whats-open-date-panel__event-link:hover .whats-open-date-panel__event-title,

.whats-open-date-panel__event-link:focus-visible .whats-open-date-panel__event-title {
  color: var(--primary-dark);
}

.whats-open-date-panel__event-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: var(--space-4);
}

.whats-open-date-panel__event-media {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--cream);
}

.whats-open-date-panel__event-media[hidden] {
  display: none;
}

.whats-open-date-panel__event-media img {
  display: block;
  width: 100%;
  aspect-ratio: var(--image-ratio-artwork);
  height: auto;
  object-fit: cover;
}

.whats-open-date-panel__event-body {
  display: grid;
  gap: var(--space-8);
  align-content: center;
}

.whats-open-date-panel__event-title {
  display: block;
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-size: var(--h3);
  font-weight: var(--weight-heavy);
  line-height: var(--lh-tight);
  text-transform: uppercase;
}

.whats-open-date-panel__event-summary {
  display: block;
}

.whats-open-date-panel__event-cta {
  color: var(--primary-dark);
  font-size: var(--text-sm);
  font-weight: var(--weight-heavy);
  line-height: var(--lh-snug);
  text-transform: uppercase;
}

.whats-open-date-panel__cta {
  justify-self: start;
  width: auto;
  min-width: min(100%, calc(var(--space-120) + var(--space-40)));
}

@media (max-width: 767px) {

  .whats-open-date-panel__cta {
    justify-self: stretch;
    width: 100%;
    min-width: 0;
  }

}

.whats-open-date-panel.is-flashing {
  animation: roarr-cal-flash 0.4s var(--ease) forwards;
}

@media (min-width: 768px) {

  .whats-open-date-panel__event:has(.whats-open-date-panel__event-media:not([hidden])) {
    grid-template-columns: minmax(var(--space-120), 0.42fr) minmax(0, 1fr);
    align-items: center;
  }

  .whats-open-calendar-guide .roarr-glance-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-24);
  }

  .whats-open-calendar-guide .roarr-glance-list li:nth-child(-n + 2) {
    padding-top: 0;
    border-top: 0;
  }

}

.whats-open-times-drawer {
  margin-top: var(--space-24);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--day-accent, var(--primary)) 42%, var(--border-light));
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.whats-open-date-panel .whats-open-times-drawer {
  margin-top: 0;
  border-radius: var(--radius-md);
  /* Blend with the cream date-panel card it sits in, not stark white. */
  border-color: color-mix(in srgb, var(--day-accent) 30%, var(--border-light));
  background: color-mix(in srgb, var(--card-on-light) 82%, var(--cream));
  box-shadow: none;
}

.whats-open-times-drawer__header {
  display: grid;
  gap: var(--space-8);
  padding: var(--space-16) var(--space-24);
  border-bottom: 1px solid color-mix(in srgb, var(--day-accent) 24%, var(--border-light));
}

.whats-open-times-drawer__eyebrow,

.whats-open-times-drawer__header small {
  font-size: var(--text-xs);
  font-weight: var(--weight-heavy);
  line-height: var(--lh-snug);
  text-transform: uppercase;
}

.whats-open-times-drawer__eyebrow {
  color: color-mix(in srgb, var(--day-accent, var(--primary)) 68%, var(--deep-forest));
}

.whats-open-times-drawer__header strong {
  font-family: var(--font-heading);
  font-size: var(--h3);
  font-weight: var(--weight-heavy);
  line-height: var(--lh-tight);
  text-transform: uppercase;
}

.whats-open-times-drawer__header small {
  color: var(--text-secondary);
}

.whats-open-times-drawer__panel {
  display: grid;
  gap: var(--space-16);
  padding: var(--panel-padding-mobile);
}

.whats-open-times-drawer .whats-open-times-group {
  box-shadow: none;
}

.whats-open-times {
  --times-accent: var(--primary);
  display: grid;
  gap: var(--space-24);
}

.whats-open-times--toddler {
  --times-accent: var(--yellow);
}

.whats-open-times--off-peak {
  --times-accent: var(--wp--preset--color--pink);
}

.whats-open-times--peak {
  --times-accent: var(--mascot-terry);
}

.whats-open-times__note,

.whats-open-times-group__empty {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
}

.whats-open-times__groups {
  display: grid;
  gap: var(--space-16);
}

.whats-open-times-group {
  min-width: 0;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--card-on-light);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.whats-open-times-group__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-16);
  align-items: center;
  padding: var(--space-16);
  background: color-mix(in srgb, var(--times-accent) 10%, transparent);
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

.whats-open-times-group__head::-webkit-details-marker {
  display: none;
}

.whats-open-times-group__head:hover {
  background: color-mix(in srgb, var(--times-accent) 16%, transparent);
}

.whats-open-times-group__head:focus-visible {
  outline: 2px solid var(--times-accent);
  outline-offset: calc(-1 * var(--space-4));
}

.whats-open-times-group[open] .whats-open-times-group__head {
  border-bottom: 1px solid var(--border-light);
}

.whats-open-times-group__icon {
  width: var(--icon-badge-size-md);
  height: var(--icon-badge-size-md);
  color: color-mix(in srgb, var(--times-accent) 72%, var(--deep-forest));
}

.whats-open-times-group__icon svg {
  width: var(--icon-badge-glyph-md);
  height: var(--icon-badge-glyph-md);
}

.whats-open-times-group__icon .roarr-generated-icon {
  width: var(--icon-art-size-md);
  height: var(--icon-art-size-md);
}

.whats-open-times-group__heading {
  display: grid;
  gap: var(--space-8);
  min-width: 0;
}

.whats-open-times-group__heading h3 {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-size: var(--h3);
  font-weight: var(--weight-heavy);
  line-height: var(--lh-tight);
  text-transform: uppercase;
}

.whats-open-times-group__heading p {
  margin: 0;
  color: color-mix(in srgb, var(--times-accent) 72%, var(--deep-forest));
  font-size: var(--text-xs);
  font-weight: var(--weight-heavy);
  line-height: var(--lh-snug);
  text-transform: uppercase;
}

.whats-open-times-group__chev {
  display: grid;
  place-items: center;
  width: var(--space-32);
  height: var(--space-32);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--times-accent) 16%, var(--white));
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-heavy);
  line-height: var(--lh-solid);
}

@media (max-width: 639px) {

  .whats-open-times-group__head {
    gap: var(--space-8);
    padding: var(--space-16) var(--space-8);
  }

  .whats-open-times-group__icon {
    width: var(--icon-badge-size-sm);
    height: var(--icon-badge-size-sm);
  }

  .whats-open-times-group__icon svg {
    width: var(--icon-badge-glyph-sm);
    height: var(--icon-badge-glyph-sm);
  }

  .whats-open-times-group__heading h3 {
    /* --text-sm: "ATTRACTIONS" needs ~118px here and the column gives ~134. */
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
  }

}

.whats-open-times-group__chev::after {
  content: "+";
}

.whats-open-times-group[open] .whats-open-times-group__chev::after {
  content: "\2013";
}

.whats-open-times-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.whats-open-time-row {
  display: grid;
  gap: var(--space-8);
  padding: var(--space-16);
  border-top: 1px solid var(--border-light);
}

.whats-open-time-row:first-child {
  border-top: 0;
}

.whats-open-time-row:nth-child(even) {
  background: color-mix(in srgb, var(--cream) 48%, transparent);
}

.whats-open-time-row__name {
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-heavy);
  line-height: var(--lh-snug);
}

.whats-open-time-row__value {
  display: grid;
  gap: var(--space-8);
  color: color-mix(in srgb, var(--times-accent) 72%, var(--deep-forest));
  font-size: var(--text-base);
  font-weight: var(--weight-heavy);
  line-height: var(--lh-snug);
}

.whats-open-time-row__value small {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--lh-normal);
}

.whats-open-time-row.is-closed .whats-open-time-row__value {
  color: var(--text-secondary);
}

.whats-open-times-group__empty {
  padding: var(--space-16);
}

.whats-open-times__note {
  padding-inline: var(--space-8);
  font-size: var(--text-sm);
}

@media (min-width: 640px) {

  .whats-open-times-drawer__panel {
    padding: var(--panel-padding-tablet);
  }

  .whats-open-time-row {
    grid-template-columns: minmax(0, 1fr) minmax(calc(var(--space-120) + var(--space-48)), 0.56fr);
    align-items: start;
    column-gap: var(--space-16);
  }

}

.whats-open-guide-panel {
  display: grid;
  gap: var(--space-24);
  padding: var(--panel-padding-mobile);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--card-on-light);
  box-shadow: var(--shadow-soft);
}

.whats-open-guide-panel h2 {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-size: var(--h2);
  font-weight: var(--weight-heavy);
  line-height: var(--lh-tight);
  text-transform: uppercase;
}

.whats-open-guide-list {
  display: grid;
  gap: var(--space-16);
  margin: 0;
  padding: 0;
  list-style: none;
}

.whats-open-guide-list li {
  padding-top: var(--space-16);
  border-top: 1px solid var(--border-light);
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
}

.whats-open-guide-list strong {
  color: var(--text-primary);
}

.whats-open-day-dot {
  border-color: var(--deep-forest);
  background: color-mix(in srgb, var(--day-accent, var(--warm-sand)) 28%, var(--white));
  color: var(--deep-forest);
}

.whats-open-day-dot--off-peak { --day-accent: var(--wp--preset--color--pink); }

.whats-open-day-dot--peak { --day-accent: var(--mascot-terry); }

.whats-open-day-dot--toddler { --day-accent: var(--yellow); }

.whats-open-page .roarr-info-row {
  margin-top: 0;
}

.whats-open-checker {
  display: grid;
  gap: var(--space-8);
  margin-bottom: var(--space-24);
  padding-bottom: var(--space-24);
  border-bottom: 1px solid var(--border-light);
}

.whats-open-checker__label {
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.whats-open-checker__input {
  min-height: var(--space-48);
  padding-inline: var(--space-16);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-base);
}

.whats-open-checker__input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.whats-open-checker__result {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--lh-relaxed);
}

.whats-open-checker__result:empty {
  display: none;
}

.whats-open-checker__result strong {
  color: var(--text-primary);
}

.whats-open-checker__chip {
  flex: none;
  width: var(--space-12);
  height: var(--space-12);
  border-radius: var(--radius-pill);
  background: var(--day-accent, var(--warm-sand));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--deep-forest) 18%, transparent);
}
/* Scoped to .whats-open-col so the legal/data tables stay jungle-green. */
.roarr-data-table .whats-open-col--off-peak {
  background: var(--wp--preset--color--pink);
  color: var(--white);
}

.roarr-data-table .whats-open-col--peak {
  background: var(--mascot-terry);
  color: var(--deep-forest);
}

.roarr-data-table .whats-open-col--toddler {
  background: var(--yellow);
  color: var(--deep-forest);
}

.whats-open-status {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-heavy);
  line-height: var(--lh-solid);
  text-transform: uppercase;
  white-space: nowrap;
}

.whats-open-status--open {
  color: var(--primary-dark);
}

.whats-open-status--check {
  color: color-mix(in srgb, var(--amber) 70%, var(--deep-forest));
}

.whats-open-status--closed {
  color: var(--text-secondary);
}

.whats-open-note {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-24);
  padding: var(--card-padding-mobile);
  border: 1px solid color-mix(in srgb, var(--primary) 34%, var(--border-light));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--primary) 10%, var(--card-on-light));
}

.whats-open-note h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--h3);
  text-transform: none;
}

.whats-open-note p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-base);
}

@media (min-width: 768px) {

  .whats-open-calendar-section {
    padding-top: var(--section-padding-tablet);
  }

  .whats-open-guide-panel {
    padding: var(--panel-padding-tablet);
  }

  .whats-open-note {
    padding: var(--card-padding-tablet);
  }

}

@media (min-width: 1200px) {

  .whats-open-calendar-section {
    padding-top: var(--section-padding-desktop);
  }

  .whats-open-calendar-section .roarr-split--rates {
    grid-template-columns: minmax(0, 1.8fr) minmax(calc(var(--space-120) * 3), 0.9fr);
  }

  .whats-open-page .whats-open-calendar-section .roarr-split--rates .roarr-split__content {
    align-self: center;
    margin-top: 0;
  }

  .whats-open-note {
    padding: var(--card-padding-desktop);
  }

  .whats-open-guide-panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    padding: var(--panel-padding-desktop);
  }

  .whats-open-guide-list li:first-child {
    border-top: 0;
    padding-top: 0;
  }

}

.whats-open-checker__input {
  color-scheme: light;
}

.whats-open-checker__input::-webkit-calendar-picker-indicator {
  opacity: 0.7;
  cursor: pointer;
}
/* .roarr-cal — quiet cream field; light-cream month cards (matching design system) */
.roarr-cal {
  position: relative; /* anchor for popover absolute positioning */
  display: grid;
  gap: var(--space-16);
  padding: var(--space-24);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--cream);
}

.whats-open-page .roarr-cal {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.roarr-cal__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.roarr-cal__title {
  display: inline-block;
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-sm);
  background: var(--deep-forest);
  color: var(--text-on-dark);
  font-size: var(--text-sm);
  font-weight: var(--weight-heavy);
  letter-spacing: 0.04em;
  line-height: var(--lh-solid);
  text-transform: uppercase;
  transform: rotate(-1.5deg);
}

.roarr-cal__nav {
  display: flex;
  gap: var(--space-8);
}

.roarr-cal__arrow {
  display: inline-grid;
  place-items: center;
  min-width: calc(var(--space-40) + var(--space-4)); /* 44px touch target */
  min-height: calc(var(--space-40) + var(--space-4));
  padding: 0;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--deep-forest);
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.15s var(--ease);
}

.roarr-cal__arrow svg {
  width: var(--icon-badge-glyph-md);
  height: var(--icon-badge-glyph-md);
}

.roarr-cal__arrow:hover:not(:disabled),

.roarr-cal__arrow:focus-visible {
  background: var(--deep-forest);
  border-color: var(--deep-forest);
  color: var(--text-on-dark);
}

.roarr-cal__arrow:active:not(:disabled) {
  transform: scale(0.95);
}

.roarr-cal__arrow:disabled {
  opacity: 0.4;
  cursor: default;
}

.roarr-cal__arrow:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.roarr-cal__tabs {
  display: flex;
  gap: var(--space-8);
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  padding-block: var(--space-8);
  cursor: grab;
  overscroll-behavior-x: contain;
  scroll-padding-inline: var(--space-16);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
  user-select: none;
}

.roarr-cal__tabs::-webkit-scrollbar {
  display: none;
}

.roarr-cal__tab {
  flex: none;
  min-height: calc(var(--space-40) + var(--space-4)); /* 44px touch target */
  padding-inline: var(--space-16);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--lh-solid);
  scroll-snap-align: center;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.15s var(--ease);
}

.roarr-cal__tab:hover {
  border-color: var(--deep-forest);
}

.roarr-cal__tab:active {
  transform: scale(0.97);
}

.roarr-cal__tab.is-active {
  background: var(--deep-forest);
  border-color: var(--deep-forest);
  color: var(--text-on-dark);
}

.roarr-cal__tab:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.roarr-cal__months {
  display: grid;
  grid-template-columns: repeat(var(--cal-visible, 4), minmax(0, 1fr));
  gap: var(--space-16);
  align-items: start;
  cursor: default;
  touch-action: pan-y;
  user-select: none;
}

.roarr-cal__months.is-dragging {
  cursor: grabbing;
}

@media (pointer: coarse) {

  .roarr-cal__months {
    cursor: grab;
  }

}

.roarr-cal-month {
  min-width: 0;
  padding: var(--space-16);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--card-on-light);
  box-shadow: var(--shadow-soft);
  animation: roarr-cal-month-in 0.24s var(--ease-reveal) backwards;
}

.roarr-cal__months > .roarr-cal-month:nth-child(2) { animation-delay: 0.04s; }

.roarr-cal__months > .roarr-cal-month:nth-child(3) { animation-delay: 0.08s; }

.roarr-cal__months > .roarr-cal-month:nth-child(4) { animation-delay: 0.12s; }

.roarr-cal-month__name {
  margin: 0 0 var(--space-8);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-heavy);
  line-height: var(--lh-snug);
  text-transform: none;
}

.roarr-cal-month__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px; /* hairline grid gaps (sanctioned exception) */
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.roarr-cal-month__dow {
  display: grid;
  place-items: center;
  padding-block: calc(var(--space-8) / 2);
  color: var(--text-secondary);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}

.roarr-cal .roarr-cal-day {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: var(--image-ratio-square);
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  cursor: pointer;
  transition: filter 0.15s var(--ease);
}

.roarr-cal .roarr-cal-day:hover {
  filter: brightness(0.94);
}

.roarr-cal .roarr-cal-day.is-selected {
  outline: 2px solid var(--deep-forest);
  outline-offset: -2px;
  box-shadow:
    0 0 0 var(--space-4) color-mix(in srgb, var(--primary) 24%, transparent),
    0 var(--space-4) var(--space-12) color-mix(in srgb, var(--deep-forest) 18%, transparent);
  filter: brightness(0.98);
  transform: translateY(calc(var(--space-4) * -1));
  z-index: 1;
}

.roarr-cal .roarr-cal-day:focus-visible {
  outline: 2px solid var(--deep-forest);
  outline-offset: -2px;
  z-index: 1;
}

.roarr-cal .roarr-cal-day--off-peak {
  background: color-mix(in srgb, var(--wp--preset--color--pink) 34%, var(--white));
}

.roarr-cal .roarr-cal-day--peak {
  background: color-mix(in srgb, var(--mascot-terry) 44%, var(--white));
}

.roarr-cal .roarr-cal-day--toddler {
  background: color-mix(in srgb, var(--yellow) 52%, var(--white));
}

.roarr-cal .roarr-cal-day--closed {
  background: color-mix(in srgb, var(--deep-forest) 10%, var(--white));
  color: var(--text-secondary);
}

.roarr-cal .roarr-cal-day--empty {
  background: transparent;
}

.roarr-cal .roarr-cal-day__marks {
  position: absolute;
  top: calc(var(--space-4) / 2);
  right: calc(var(--space-4) / 2);
  display: flex;
  align-items: center;
  gap: 2px; /* token-lint: allow — hairline dot cluster */
  pointer-events: none;
  line-height: var(--lh-solid);
}

.roarr-cal .roarr-cal-day__marks svg {
  width: calc(var(--space-8) + 2px);
  height: calc(var(--space-8) + 2px);
  display: block;
  flex: none;
}

.roarr-cal .roarr-cal-day__marks .roarr-cal-mark--primevil {
  font-weight: var(--weight-heavy);
  font-size: var(--text-xs);
  line-height: var(--lh-solid);
  color: var(--wp--preset--color--purple);
  display: block;
}

.roarr-cal-pop {
  position: absolute;
  z-index: 100;
  background: color-mix(in srgb, var(--deep-forest) 94%, transparent);
  color: var(--text-on-dark);
  border-radius: var(--radius-sm);
  padding: var(--space-16) var(--space-16);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  line-height: var(--lh-normal);
  box-shadow: var(--shadow-raised);
  max-width: calc(var(--space-120) * 2);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s var(--ease);
  /* hidden by default */
  visibility: hidden;
}

.roarr-cal-pop.is-visible {
  opacity: 1;
  visibility: visible;
}

.roarr-cal-pop__date {
  display: block;
  font-weight: var(--weight-heavy);
  margin-bottom: var(--space-8);
  color: var(--text-on-dark);
}

.roarr-cal-pop__line {
  display: block;
  color: var(--text-muted-dark);
  margin-top: 2px; /* token-lint: allow — optical nudge */
}

.roarr-cal-pop__hint {
  display: block;
  margin-top: var(--space-8);
  color: color-mix(in srgb, var(--text-on-dark) 55%, transparent);
  font-size: var(--text-2xs);
}

.roarr-cal-pop::after {
  content: "";
  position: absolute;
  bottom: calc(var(--space-6) * -1);
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: var(--space-6) solid transparent;
  border-right: var(--space-6) solid transparent;
  border-top: var(--space-6) solid color-mix(in srgb, var(--deep-forest) 94%, transparent);
}

.whats-open-checker__result.is-flashing {
  animation: roarr-cal-flash 0.4s var(--ease) forwards;
  border-radius: var(--radius-xs);
}

@media (min-width: 1024px) {

  .roarr-cal .roarr-cal-day {
    font-size: var(--text-2xs);
  }

}

@media (max-width: 640px) {

  .roarr-cal {
    padding: var(--space-16);
  }

}

@media (prefers-reduced-motion: reduce) {

  .roarr-cal-month {
    animation: none;
  }

  .roarr-cal-pop {
    transition: none;
  }

  .whats-open-checker__result.is-flashing {
    animation: none;
  }

  .whats-open-date-panel.is-flashing {
    animation: none;
  }

}

/* -- src/blocks/where-stay-card.css (canonical component source) -- */
/**
 * where-stay-card — accommodation-partner listing card for the Where To Stay
 * hub grid. Same `.roarr-listing-card__*` inner vocabulary as the bento
 * card (image-card.css), restyled flat (no hover gradient/caption-reveal —
 * content sits static below the photo, per the mock).
 * Ported (generic rules — per-card object-position tweaks like
 * `--middle`/`--maids` are cosmetic photo-crop nudges and are skipped) from
 * design-reference/mocks/css/styles.css ~lines 18556-18722.
 * Batch D (where-to-stay.html).
 */
.where-stay-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-24);
}

.where-stay-card {
	position: relative;
	display: grid;
	grid-template-rows: auto 1fr;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--border-light);
	border-radius: var(--radius-lg);
	background: var(--card-on-light);
	color: var(--text-primary);
	text-decoration: none;
	box-shadow: var(--shadow-soft);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.where-stay-card:hover,
.where-stay-card:focus-visible {
	color: var(--text-primary);
	text-decoration: none;
	box-shadow: var(--shadow-raised);
	transform: translateY(calc(var(--space-4) * -1));
	outline: none;
}

.where-stay-card .roarr-listing-card__media {
	margin: 0;
	aspect-ratio: var(--image-ratio-media);
	background: var(--deep-forest);
}

.where-stay-card .roarr-listing-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.where-stay-card .roarr-listing-card__gradient {
	display: none;
}

.where-stay-card .roarr-listing-card__content {
	display: grid;
	gap: var(--space-8);
	align-content: start;
	padding: var(--space-24);
}

.where-stay-card .roarr-listing-card__meta {
	color: var(--primary-dark);
	font-size: var(--text-xs);
	font-weight: var(--weight-heavy);
	line-height: var(--lh-tight);
	letter-spacing: 0;
	text-transform: uppercase;
}

.where-stay-card .roarr-listing-card__title {
	min-height: auto;
	color: var(--text-primary);
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	font-weight: var(--weight-bold);
	line-height: var(--lh-tight);
	letter-spacing: 0;
	text-transform: none;
}

.where-stay-card--large .roarr-listing-card__title,
.where-stay-card--wide .roarr-listing-card__title {
	font-size: var(--h3);
}

.where-stay-card .roarr-listing-card__body {
	color: var(--text-secondary);
	font-size: var(--text-sm);
	line-height: var(--lh-relaxed);
}

.where-stay-card__flag {
	position: absolute;
	top: var(--space-16);
	left: var(--space-16);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	min-height: var(--space-32);
	max-width: calc(100% - var(--space-32));
	padding-inline: var(--space-16);
	border-radius: var(--radius-pill);
	background: var(--primary);
	color: var(--deep-forest);
	font-size: var(--text-xs);
	font-weight: var(--weight-heavy);
	line-height: var(--lh-solid);
	text-transform: uppercase;
	pointer-events: none;
}

.where-stay-card__flag--future {
	display: none;
}

.where-stay-card__flag--deal,
.where-stay-card__flag.is-style-where-stay-card-flag-deal {
	background: var(--amber);
	color: var(--deep-forest);
}

.where-stay-card__link {
	margin-top: var(--space-8);
	color: var(--primary-dark);
	font-size: var(--text-xs);
	font-weight: var(--weight-heavy);
	line-height: var(--lh-tight);
	text-transform: uppercase;
}

@media (min-width: 1024px) {
	.where-stay-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.where-stay-card--wide,
	.where-stay-card--large {
		grid-column: span 2;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.where-stay-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* -- src/blocks/zz-icon-art.css (canonical component source) -- */
/* ── Painted icon-art layer (site-wide, late cascade) ────────────────────────
 * Ported verbatim from design-reference/mocks/css/styles.css L19655–19895
 * (the block that closes the mock stylesheet). Generated/painted icons
 * (<img class="roarr-ui-icon roarr-generated-icon">) drop the pill badge
 * entirely — no border, no background — and size by the art-size scale
 * (--icon-art-size-page for list/table slots, --icon-art-size-feature for
 * feature slots), overriding every per-block badge rule that precedes it.
 *
 * This file is deliberately named zz-* so it sorts LAST when
 * roarr-wp/scripts/build-editor-css.mjs concatenates blocks/*.css
 * alphabetically for the editor canvas — same late-cascade position the
 * layer holds at the end of the mock's styles.css. Keep it last in
 * globals.css' import list for the same reason. body.home-page-mock-scoped
 * rules from the mock are intentionally omitted (no such hook in Next; the
 * home plan-day role is played by glance-list, which this layer already
 * drops to lg). */

.mega-link-icon:has(.roarr-generated-icon),
.info-bar__icon:has(.roarr-generated-icon),
.info-bar--home .info-bar__icon:has(.roarr-generated-icon),
.roarr-info-row__icon:has(.roarr-generated-icon),
.roarr-detail-card__icon:has(.roarr-generated-icon),
.roarr-glance-list__icon:has(.roarr-generated-icon),
.roarr-rate-table__icon:has(.roarr-generated-icon),
.roarr-accessibility-list__icon:has(.roarr-generated-icon),
.roarr-plan-day__icon:has(.roarr-generated-icon),
.mobile-nav-link__icon:has(.roarr-generated-icon),
.roarr-check-list__icon:has(.roarr-generated-icon),
.roarr-check-list--light .roarr-check-list__icon:has(.roarr-generated-icon),
.tip-card__icon:has(.roarr-generated-icon),
.roarr-pack-list__icon:has(.roarr-generated-icon),
.roarr-rail-card__icon:has(.roarr-generated-icon),
.roarr-rate-table__note-icon:has(.roarr-generated-icon),
.roarr-callout__icon:has(.roarr-generated-icon),
.allergen-card__icon:has(.roarr-generated-icon) {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body :is(
  .mega-link-icon,
  .info-bar__icon,
  .info-bar--home .info-bar__icon,
  .roarr-info-row__icon,
  .roarr-detail-card__icon,
  .roarr-glance-list__icon,
  .roarr-rate-table__icon,
  .roarr-rate-table__note-icon,
  .roarr-accessibility-list__icon,
  .roarr-plan-day__icon,
  .mobile-nav-link__icon,
  .roarr-check-list__icon,
  .roarr-check-list--light .roarr-check-list__icon,
  .tip-card__icon,
  .roarr-pack-list__icon,
  .roarr-rail-card__icon,
  .roarr-pass-saver__stat-icon,
  .roarr-pass-saver__highlight-icon,
  .roarr-callout__icon,
  .allergen-card__icon
):has(.roarr-generated-icon) {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body .check-list li[data-roarr-icon]:has(> .roarr-generated-icon) {
  display: grid;
  grid-template-columns: var(--icon-art-size-page) minmax(0, 1fr);
  gap: var(--space-16);
  align-items: center;
}

body .check-list li[data-roarr-icon]:has(> .roarr-generated-icon)::before,
body .check-list li[data-roarr-icon]:has(> .roarr-generated-icon)::after {
  content: none;
}

body .check-list li[data-roarr-icon] > .roarr-generated-icon {
  /* Generated (art) icons sit as the grid's first cell. Without this the
     glyph rule (.check-list li > .roarr-ui-icon) makes them position:absolute
     — they leave the grid, text collapses into the icon track and wraps one
     word per line. Keep them in flow. */
  display: block;
  position: static;
  translate: none;
  width: var(--icon-art-size-page);
  height: var(--icon-art-size-page);
  max-width: none;
}

body :is(
  .roarr-glance-list__icon,
  .roarr-rate-table__icon,
  .roarr-rate-table__note-icon,
  .roarr-accessibility-list__icon,
  .roarr-check-list__icon,
  .roarr-pack-list__icon,
  .roarr-callout__icon
):has(.roarr-generated-icon) {
  flex: 0 0 var(--icon-art-size-page);
  width: var(--icon-art-size-page);
  height: var(--icon-art-size-page);
}

body :is(
  .roarr-glance-list__icon,
  .roarr-rate-table__icon,
  .roarr-rate-table__note-icon,
  .roarr-accessibility-list__icon,
  .roarr-check-list__icon,
  .roarr-pack-list__icon,
  .roarr-callout__icon
) > .roarr-generated-icon {
  width: var(--icon-art-size-page);
  height: var(--icon-art-size-page);
  max-width: none;
}

/* Shared glance-list matches the home plan-day steps' icon size (lg / 72px);
   --icon-art-size-page (80) read a touch big for it. Glance-list only. */
body .roarr-glance-list__icon:has(.roarr-generated-icon) {
  flex-basis: var(--icon-art-size-lg);
  width: var(--icon-art-size-lg);
  height: var(--icon-art-size-lg);
}
body .roarr-glance-list__icon > .roarr-generated-icon {
  width: var(--icon-art-size-lg);
  height: var(--icon-art-size-lg);
}

/* Footnote info icon: a small inline indicator, not a feature-sized illustration.
   The :has(.roarr-generated-icon) blocks above force it to --icon-art-size-page (80px)
   and overflow the 48px column; drop it to xs (32px) and tighten the column to match. */
.roarr-rate-table__note--with-icon {
  grid-template-columns: var(--icon-art-size-xs) minmax(0, 1fr);
}
body .roarr-rate-table__note-icon:has(.roarr-generated-icon) {
  flex-basis: var(--icon-art-size-xs);
  width: var(--icon-art-size-xs);
  height: var(--icon-art-size-xs);
}
body .roarr-rate-table__note-icon > .roarr-generated-icon {
  width: var(--icon-art-size-xs);
  height: var(--icon-art-size-xs);
}

body .roarr-check-list li:has(> .roarr-check-list__icon > .roarr-generated-icon) {
  grid-template-columns: var(--icon-art-size-page) minmax(0, 1fr);
  gap: var(--space-16);
}

/* Perks cascade: long perk copy — drop the icons a size (page 80 → md 64) so
   the text has room, mobile especially. Scoped so other check-lists are untouched. */
body .roarr-perks-cascade .check-list li[data-roarr-icon]:has(> .roarr-generated-icon) {
  grid-template-columns: var(--icon-art-size-md) minmax(0, 1fr);
}
body .roarr-perks-cascade .check-list li[data-roarr-icon] > .roarr-generated-icon {
  width: var(--icon-art-size-md);
  height: var(--icon-art-size-md);
}

body .roarr-pack-list li:has(> .roarr-pack-list__icon > .roarr-generated-icon),
body .roarr-callout:has(.roarr-callout__icon > .roarr-generated-icon) {
  grid-template-columns: var(--icon-art-size-page) minmax(0, 1fr);
  column-gap: var(--space-16);
}

body .roarr-plan-day__steps li:has(> .roarr-plan-day__icon > .roarr-generated-icon) {
  grid-template-columns: var(--icon-art-size-feature) minmax(0, 1fr);
}

body .roarr-info-row__item:has(> .roarr-info-row__icon > .roarr-generated-icon) {
  grid-template-columns: var(--icon-art-size-feature) auto;
}

body .roarr-rail-card:has(> .roarr-rail-card__icon > .roarr-generated-icon) {
  grid-template-columns: var(--icon-art-size-feature) minmax(0, 1fr);
}

body :is(
  .roarr-info-row__icon,
  .roarr-detail-card__icon,
  .roarr-plan-day__icon,
  .roarr-rail-card__icon,
  .roarr-pass-saver__stat-icon,
  .roarr-pass-saver__highlight-icon,
  .roarr-rate-table--iconned .roarr-rate-table__icon,
  .roarr-rate-table--cta .roarr-rate-table__icon,
  .roarr-rate-table--cta.roarr-rate-table--stacked .roarr-rate-table__icon,
  .allergen-card__icon
):has(.roarr-generated-icon) {
  flex: 0 0 var(--icon-art-size-feature);
  width: var(--icon-art-size-feature);
  height: var(--icon-art-size-feature);
}

body :is(
  .roarr-info-row__icon,
  .roarr-detail-card__icon,
  .roarr-plan-day__icon,
  .roarr-rail-card__icon,
  .roarr-pass-saver__stat-icon,
  .roarr-pass-saver__highlight-icon,
  .roarr-rate-table--iconned .roarr-rate-table__icon,
  .roarr-rate-table--cta .roarr-rate-table__icon,
  .roarr-rate-table--cta.roarr-rate-table--stacked .roarr-rate-table__icon,
  .allergen-card__icon
) > .roarr-generated-icon {
  width: var(--icon-art-size-feature);
  height: var(--icon-art-size-feature);
  max-width: none;
}

/* Native ROARR Icon blocks render a .roarr-icon wrapper around the generated
 * image. Support that saved Gutenberg shape as well as the older direct-image
 * shape above so info-row artwork cannot fall back to the 30px UI-icon size. */
body .roarr-info-row__item:has(> .roarr-info-row__icon .roarr-generated-icon) {
  grid-template-columns: var(--icon-art-size-feature) minmax(0, 1fr);
}

body .roarr-info-row__icon :is(
  .roarr-icon,
  .roarr-icon-edit,
  [data-type="roarr/icon"],
  .wp-block-roarr-icon
),
body .roarr-info-row__icon .roarr-generated-icon {
  width: var(--icon-art-size-feature);
  height: var(--icon-art-size-feature);
  max-width: none;
}

/* Rail cards + iconned/CTA rate tables: drop generated icons one step,
   from feature (96) to xl (80) — same redefine pattern as plan-day above. */
.roarr-rail-card,
.roarr-rate-table--iconned,
.roarr-rate-table--cta {
  --icon-art-size-feature: var(--icon-art-size-xl);
}

/* -- is-style-roarr-* bridge (generated -- see script header) --------------
 * Gutenberg applies registerBlockStyle's className as `is-style-<name>`
 * directly on the block; the frontend's React adapters translate that to
 * the BEM modifier before the real CSS below ever sees it. The canvas has
 * no such adapter, so every BEM modifier rule above gets a matching
 * is-style-roarr-<block>-<modifier> rule here, generated 1:1 from the CSS
 * above (not hand-written) so it can never drift from it again. -- */

.roarr-site-main .roarr-reading-layout.is-style-roarr-reading-layout-solo {
  margin-top: 0;
}

.is-style-roarr-reading-layout-solo .roarr-article {
  max-width: 100%;
  margin-inline: auto;
}

.roarr-site-main .is-style-roarr-section-related-news .roarr-card-grid {
	align-items: stretch;
}

.news-single-page .is-style-roarr-section-related-news + .is-style-roarr-rip-cta {
	--roarr-break-fill: var(--wp--preset--color--green-dark);
}

.roarr-site-main .is-style-roarr-section-news-faq .faq-accordion {
	width: min(100%, var(--reading-width));
	margin-inline: auto;
}

.roarr-attractions-bento .is-style-roarr-image-card-wide {
	grid-column: 1 / -1;
	min-height: clamp(calc(var(--space-120) + var(--space-56)), 44vw, calc(var(--space-120) + var(--space-80)));
}

.roarr-attractions-bento .is-style-roarr-image-card-tall {
	grid-column: 1 / -1;
	min-height: clamp(calc(var(--space-120) + var(--space-80)), 58vw, calc(var(--space-120) * 2 + var(--space-16)));
}

.roarr-attractions-bento .is-style-roarr-image-card-large {
	grid-column: 1 / -1;
	min-height: clamp(calc(var(--space-120) * 2), 70vw, calc(var(--space-120) * 2 + var(--space-72)));
}

.is-style-roarr-feature-band-falls { --band: var(--deep-forest); --tag-bg: var(--amber); --tag-fg: var(--text-on-dark); }

.is-style-roarr-feature-band-splash { --band: color-mix(in hsl longer hue, var(--primary-hover) 42%, var(--wp--preset--color--purple)); --tag-bg: var(--yellow); --tag-fg: var(--deep-forest); }

.is-style-roarr-feature-band-valley { --band: var(--jungle-green); --tag-bg: var(--primary); --tag-fg: var(--deep-forest); }

.is-style-roarr-feature-band-dinomite { --band: var(--jungle-green); --tag-bg: var(--yellow); --tag-fg: var(--deep-forest); }

.is-style-roarr-feature-band-explorers { --band: var(--deep-forest); --tag-bg: var(--amber); --tag-fg: var(--text-on-dark); }

.is-style-roarr-button-row-center {
	justify-content: center;
}

.is-style-roarr-card-grid-events {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.is-style-roarr-card-grid-events .is-style-roarr-event-card-feature {
	grid-column: span 2;
}

.is-style-roarr-card-grid-related {
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.is-style-roarr-card-grid-thirds {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--space-120) * 2 + var(--space-32))), 1fr));
}

.is-style-roarr-card-grid-quartet {
	grid-template-columns: 1fr;
	gap: var(--space-8);
}

.is-style-roarr-card-grid-quick {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--space-120) * 2)), 1fr));
}

.is-style-roarr-card-grid-quartet,
.is-style-roarr-card-grid-quick {
	margin-top: var(--space-40);
}

.roarr-card-grid.is-style-roarr-card-grid-list {
	gap: 0;
}

.is-style-roarr-card-grid-list .roarr-detail-card {
	--icon-art-size-feature: var(--icon-art-size-lg);
	gap: var(--space-8);
	padding: var(--space-16) 0;
	border-width: 1px 0 0;
	border-color: var(--border-light);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.is-style-roarr-card-grid-list .roarr-detail-card:has(.roarr-detail-card__icon) {
	grid-template-columns: var(--icon-badge-size-lg) minmax(0, 1fr);
	align-items: start;
	column-gap: var(--space-16);
}

.is-style-roarr-card-grid-list .roarr-detail-card:has(.roarr-detail-card__icon) .roarr-detail-card__icon {
	grid-row: 1 / span 2;
}

.is-style-roarr-card-grid-list .roarr-detail-card:has(.roarr-detail-card__icon) h3,
.is-style-roarr-card-grid-list .roarr-detail-card:has(.roarr-detail-card__icon) p {
	grid-column: 2;
}

.is-style-roarr-card-grid-list .roarr-detail-card:has(.roarr-detail-card__icon) h3 {
	grid-row: 1;
}

.is-style-roarr-card-grid-list .roarr-detail-card:has(.roarr-detail-card__icon) p {
	grid-row: 2;
}

.is-style-roarr-card-grid-list .roarr-detail-card h3 {
	font-size: var(--text-lg);
}

.is-style-roarr-card-grid-list .roarr-detail-card p {
	font-size: var(--text-sm);
	line-height: var(--lh-normal);
}

.is-style-roarr-card-grid-list-lg .roarr-detail-card {
	gap: var(--space-8);
	padding-block: var(--space-16);
}

:is(.is-style-roarr-card-grid-center, .roarr-card-grid-center) .roarr-detail-card {
	justify-items: center;
	text-align: center;
}

.is-style-roarr-card-grid-home-attractions + .roarr-button-row,
.is-style-roarr-card-grid-carousel + .roarr-button-row {
	margin-top: var(--space-40);
	padding-bottom: var(--space-16);
}

.roarr-card-grid.is-style-roarr-card-grid-carousel {
	--attractions-carousel-card-width: min(78vw, 360px);
	display: flex;
	gap: var(--space-16);
	overflow-x: auto;
	padding-block: var(--space-8) var(--space-12);
	scroll-padding-inline: var(--gutter-mobile);
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.roarr-site-main .roarr-card-grid.is-style-roarr-card-grid-carousel {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding-inline: var(--gutter-mobile);
}

.is-style-roarr-card-grid-carousel::-webkit-scrollbar {
	display: none;
}

.is-style-roarr-card-grid-carousel > .roarr-image-card,
.roarr-attractions-carousel__track > .roarr-image-card {
	flex: 0 0 var(--attractions-carousel-card-width);
	width: var(--attractions-carousel-card-width);
	min-height: clamp(288px, 72vw, 352px);
	scroll-snap-align: start;
}

.roarr-card-grid.is-style-roarr-card-grid-carousel.is-marquee {
	display: block;
	gap: 0;
	overflow: hidden;
	padding-inline: 0;
	scroll-snap-type: none;
}

.is-style-roarr-card-grid-carousel.is-carousel-visible .roarr-attractions-carousel__track {
	animation-play-state: running;
}

.is-style-roarr-card-grid-carousel:is(:hover, :focus-within) .roarr-attractions-carousel__track {
	animation-play-state: paused;
}

.roarr-card-grid.is-style-roarr-card-grid-home-attractions {
	grid-template-columns: 1fr;
	grid-auto-flow: dense;
	gap: var(--space-8);
	align-items: stretch;
}

.is-style-roarr-card-grid-home-attractions .roarr-image-card {
	min-height: calc(var(--space-120) + var(--space-80) + var(--space-8));
	border-radius: var(--radius-md);
}

.is-style-roarr-card-grid-home-attractions .is-style-roarr-image-card-feature {
	min-height: calc(var(--space-120) + var(--space-120) + var(--space-56));
}

.is-style-roarr-character-dippy {
	--mascot-accent: var(--mascot-dippy);
}

.is-style-roarr-character-terry {
	--mascot-accent: var(--mascot-terry);
}

.is-style-roarr-character-paris {
	--mascot-accent: var(--mascot-paris);
}

.is-style-roarr-character-raz {
	--mascot-accent: var(--mascot-raz);
}

.is-style-roarr-section-dark .roarr-copy,
.is-style-roarr-section-dark-forest-break .roarr-copy {
	color: var(--text-on-dark);
}

.is-style-roarr-bg-dark .roarr-copy,
.is-style-roarr-bg-dark-forest-break .roarr-copy {
	color: var(--text-on-dark);
}

.roarr-404 + .is-style-roarr-rip-cta {
	--roarr-break-fill: color-mix(in srgb, var(--wp--preset--color--sky) 62%, var(--cream));
}

.is-style-roarr-event-card-feature {
  width: 100%;
}

.is-style-roarr-event-band-moody {
  --mood-1: var(--wp--preset--color--pink);
  --mood-2: var(--wp--preset--color--pink);
  --mood-3: var(--wp--preset--color--pink);
  background-color: var(--mood-2);
  background-image:
    radial-gradient(120% 120% at 12% 8%, var(--mood-1), transparent 55%),
    radial-gradient(130% 130% at 88% 92%, var(--mood-3), transparent 60%),
    linear-gradient(155deg, var(--mood-1), var(--mood-2) 50%, var(--mood-3));
  transition:
    --mood-1 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    --mood-2 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    --mood-3 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.is-style-roarr-event-band-moody + .roarr-canopy-break {
  transition: background-color 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.is-style-roarr-event-card-feature .roarr-event-card__title {
	max-width: 13ch;
	font-size: var(--h3);
	line-height: var(--lh-snug);
}

.is-style-roarr-feature-card-media {
	position: relative;
	overflow: hidden;
	display: grid;
	align-items: end;
	min-height: calc(var(--space-96) * 3);
	border-radius: var(--radius-sm);
	background: var(--deep-forest);
	color: var(--text-on-dark);
	box-shadow: var(--shadow-soft);
}

.is-style-roarr-feature-card-media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--deep-forest) 92%, transparent), color-mix(in srgb, var(--deep-forest) 52%, transparent) 48%, color-mix(in srgb, var(--deep-forest) 12%, transparent)),
		linear-gradient(180deg, color-mix(in srgb, var(--deep-forest) 12%, transparent), color-mix(in srgb, var(--deep-forest) 28%, transparent));
	pointer-events: none;
}

.is-style-roarr-feature-card-media > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.is-style-roarr-feature-card-media h2 {
	color: var(--text-on-dark);
	font-size: var(--h2);
	line-height: var(--lh-tight);
	letter-spacing: 0;
}

.is-style-roarr-feature-card-media p {
	max-width: 34ch;
	color: var(--text-on-dark);
	font-size: var(--text-base);
	font-weight: var(--weight-medium);
	line-height: var(--lh-relaxed);
}

.is-style-roarr-feature-card-media .btn {
	justify-self: start;
	border-radius: var(--radius-sm);
	font-weight: var(--weight-heavy);
}

.is-style-roarr-feature-card-story h2 {
	max-width: 9em;
	font-size: var(--h2);
}

.is-style-roarr-feature-card-story .roarr-feature-card__meta {
	margin: 0;
	color: var(--text-secondary-dark);
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	line-height: var(--lh-snug);
}

.is-style-roarr-feature-card-story .roarr-feature-card__content {
	gap: var(--space-8);
	width: min(100% - calc(var(--space-24) * 2), calc(var(--space-120) * 4));
	padding: var(--space-24);
}

.is-style-roarr-feature-card-story p:not(.roarr-feature-card__meta) {
	max-width: 28ch;
	font-size: var(--text-sm);
	line-height: var(--lh-normal);
}

.is-style-roarr-leaf-heading-center {
  justify-content: center;
  text-align: center;
  margin-bottom: var(--space-24);
}

.roarr-contact-sheet.is-style-roarr-contact-sheet-flat {
  margin-top: 0;
}

.is-style-roarr-glance-list-plain li {
	align-items: flex-start;
}

:is(.is-style-roarr-glance-list-prose, .is-style-roarr-glance-list-prose) li {
	position: relative;
	display: block;
	min-block-size: var(--icon-badge-size-md);
	padding-inline-start: calc(var(--icon-badge-size-md) + var(--space-16));
	overflow-wrap: anywhere;
}

:is(.is-style-roarr-glance-list-prose, .is-style-roarr-glance-list-prose)
	li
	> :is(.roarr-icon, .roarr-icon-edit, [data-type="roarr/icon"], .wp-block-roarr-icon) {
	position: absolute;
	inset-block-start: var(--space-16);
	inset-inline-start: 0;
	margin: 0;
}

:is(.is-style-roarr-glance-list-prose, .is-style-roarr-glance-list-prose)
	li:first-child
	> :is(.roarr-icon, .roarr-icon-edit, [data-type="roarr/icon"], .wp-block-roarr-icon) {
	inset-block-start: 0;
}

.is-style-roarr-section-dark-forest-break .roarr-glance-list li {
	color: var(--text-on-dark);
	border-top-color: color-mix(in srgb, var(--text-on-dark) 18%, transparent);
}

.is-style-roarr-bg-dark-forest-break .roarr-glance-list li {
	color: var(--text-on-dark);
	border-top-color: color-mix(in srgb, var(--text-on-dark) 18%, transparent);
}

.is-style-roarr-section-dark-forest-break .roarr-glance-list a {
	color: var(--primary);
}

.is-style-roarr-bg-dark-forest-break .roarr-glance-list a {
	color: var(--primary);
}

.is-style-roarr-glance-list-stepped {
	gap: 0;
}

.is-style-roarr-glance-list-stepped li {
	display: grid;
	grid-template-columns: var(--icon-badge-size-xl) minmax(0, 1fr);
	align-items: center;
}

.is-style-roarr-glance-list-stepped .roarr-glance-list__icon {
	border: 0;
	border-radius: 0;
	background: none;
	flex-basis: var(--icon-badge-size-xl);
	width: var(--icon-badge-size-xl);
	height: var(--icon-badge-size-xl);
	color: var(--icon-badge-color);
}

.is-style-roarr-glance-list-stepped .roarr-glance-list__icon .roarr-ui-icon {
	width: var(--icon-badge-glyph-lg);
	height: var(--icon-badge-glyph-lg);
}

.is-style-roarr-glance-list-stepped .roarr-glance-list__icon .roarr-generated-icon {

	width: var(--icon-art-size-xl);
	height: var(--icon-art-size-xl);
	transform: scale(1.35);
	transform-origin: center;
}

.is-style-roarr-glance-list-stepped__label {
	display: block;
	color: var(--text-primary);
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: var(--weight-heavy);
	line-height: var(--lh-tight);
	text-transform: uppercase;
}

.is-style-roarr-glance-list-stepped__desc {
	display: block;
	margin-top: var(--space-8);
	color: var(--text-secondary);
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	line-height: var(--lh-normal);
}

.is-style-roarr-section-dark-forest-break .is-style-roarr-glance-list-stepped__label {
	color: var(--text-on-dark);
}

.is-style-roarr-bg-dark-forest-break .roarr-glance-list--stepped__label {
	color: var(--text-on-dark);
}

.is-style-roarr-section-dark-forest-break .is-style-roarr-glance-list-stepped__desc {
	color: color-mix(in srgb, var(--text-on-dark) 80%, transparent);
}

.is-style-roarr-bg-dark-forest-break .roarr-glance-list--stepped__desc {
	color: color-mix(in srgb, var(--text-on-dark) 80%, transparent);
}

.roarr-section:has(.is-style-roarr-card-grid-home-attractions) {
  position: relative;
  --cards-w: min(100% - 2 * var(--gutter-desktop), var(--container));
}

.is-style-roarr-card-grid-home-attractions {
  position: relative;
}

.roarr-section:has(.is-style-roarr-card-grid-home-attractions) > :is(.roarr-leaf-heading, .roarr-button-row) {
  position: relative;
  z-index: 2;
}

.roarr-section:has(.is-style-roarr-card-grid-home-attractions) > .roarr-leaf-heading::after,
.roarr-section:has(.is-style-roarr-card-grid-home-attractions) > .roarr-button-row::before {
  content: "";
  position: absolute;
  display: block;
  aspect-ratio: 1 / 1;
  pointer-events: none;
  background: center / contain no-repeat;
  transform-origin: center;
}

.roarr-section:has(.is-style-roarr-card-grid-home-attractions) > .roarr-leaf-heading::after {
  background-image: url("assets/img/decor/stamp-raptor-contraptor.png");
  transform: translateY(-50%) rotate(-12deg);
}

.roarr-section:has(.is-style-roarr-card-grid-home-attractions) > .roarr-button-row::before {
  background-image: url("assets/img/decor/stamp-swing-o-saurus.png");
  transform: translateY(-50%) rotate(12deg);
}

.roarr-section:has(.is-style-roarr-card-grid-home-attractions) > .roarr-button-row > .wp-block-button:only-child {
  flex: 0 1 auto;
  width: auto;
}

.roarr-section:has(.is-style-roarr-card-grid-home-attractions) > .roarr-button-row > .wp-block-button:only-child > .wp-block-button__link {
  width: auto;
  min-width: min(100%, calc(var(--space-120) + var(--space-40)));
}

.is-style-roarr-card-grid-home-attractions::before,
.is-style-roarr-card-grid-home-attractions::after {
  content: none;
}

:is(.roarr-section:has(:is(.is-style-roarr-split-map, .is-style-roarr-split-map)), .roarr-section:has(.roarr-glance-list)) {
  position: relative;
  --cards-w: min(100% - var(--space-96), var(--container-width));
}

:is(.roarr-section:has(:is(.is-style-roarr-split-map, .is-style-roarr-split-map)), .roarr-section:has(.roarr-glance-list))::before,
:is(.roarr-section:has(:is(.is-style-roarr-split-map, .is-style-roarr-split-map)), .roarr-section:has(.roarr-glance-list))::after {
  content: "";
  position: absolute;
  z-index: 1;
  display: block;
  aspect-ratio: 1672 / 941;
  pointer-events: none;
  background: center / contain no-repeat;
}

:is(.roarr-section:has(:is(.is-style-roarr-split-map, .is-style-roarr-split-map)), .roarr-section:has(.roarr-glance-list))::before {
  background-image: url("assets/img/decor/pterosaur-1.webp");
}

:is(.roarr-section:has(:is(.is-style-roarr-split-map, .is-style-roarr-split-map)), .roarr-section:has(.roarr-glance-list))::after {
  background-image: url("assets/img/decor/pterosaur-2.webp");
}

:is(.is-style-roarr-split-map, .is-style-roarr-split-map, .roarr-split:has(.roarr-glance-list)) {
  position: relative;
}

:is(.is-style-roarr-split-map, .is-style-roarr-split-map, .roarr-split:has(.roarr-glance-list))::before {

  content: none;
  position: absolute;
  z-index: 2;
  display: block;
  aspect-ratio: 1672 / 941;
  pointer-events: none;
  background: center / contain no-repeat url("assets/img/decor/pterosaur-3.webp");
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
  .roarr-section:is(
    .is-style-roarr-section-cream,
    .is-style-roarr-section-parchment,
    .is-style-roarr-bg-cream,
    .is-style-roarr-bg-parchment
  ):is(.is-style-roarr-birds-duo-left, .is-style-roarr-birds-duo-right) {
  position: relative;
  padding-top: calc(var(--section-padding-mobile) + var(--space-80));
  --roarr-bird-cluster-width: clamp(92px, 29vw, 116px);
  --roarr-bird-cluster-height: clamp(54px, 17vw, 68px);
  --roarr-bird-single-width: clamp(48px, 15vw, 64px);
  --roarr-bird-single-height: clamp(28px, 9vw, 38px);
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section:is(
    .is-style-roarr-bg-cream,
    .is-style-roarr-bg-parchment,
    .is-style-roarr-bg-cream,
    .is-style-roarr-bg-parchment
  ):is(.roarr-birds--duo-left, .roarr-birds--duo-right) {
  position: relative;
  padding-top: calc(var(--section-padding-mobile) + var(--space-80));
  --roarr-bird-cluster-width: clamp(92px, 29vw, 116px);
  --roarr-bird-cluster-height: clamp(54px, 17vw, 68px);
  --roarr-bird-single-width: clamp(48px, 15vw, 64px);
  --roarr-bird-single-height: clamp(28px, 9vw, 38px);
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
  .roarr-section:is(.is-style-roarr-birds-duo-left, .is-style-roarr-birds-duo-right)::before,
:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
  .roarr-section:is(.is-style-roarr-birds-duo-left, .is-style-roarr-birds-duo-right)::after {
  content: "";
  position: absolute;
  z-index: 1;
  display: block;
  aspect-ratio: auto;
  pointer-events: none;
  background-color: transparent;
  background-repeat: no-repeat;
  opacity: 0.9;
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
  .roarr-section:not(:is(.is-style-roarr-section-cream, .is-style-roarr-section-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment))
  :is(.is-style-roarr-split-map, .is-style-roarr-split-map, .roarr-split:has(.roarr-glance-list))::before,
:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
  .roarr-section:not(:is(.is-style-roarr-section-cream, .is-style-roarr-section-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment)):has(:is(.is-style-roarr-split-map, .is-style-roarr-split-map, .roarr-glance-list))::before,
:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
  .roarr-section:not(:is(.is-style-roarr-section-cream, .is-style-roarr-section-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment)):has(:is(.is-style-roarr-split-map, .is-style-roarr-split-map, .roarr-glance-list))::after {
  content: none;
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section:not(:is(.is-style-roarr-bg-cream, .is-style-roarr-bg-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment))
  :is(.roarr-split--map, .is-style-roarr-split-map, .roarr-split:has(.roarr-glance-list))::before,
:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section:not(:is(.is-style-roarr-bg-cream, .is-style-roarr-bg-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment)):has(:is(.roarr-split--map, .is-style-roarr-split-map, .roarr-glance-list))::before,
:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section:not(:is(.is-style-roarr-bg-cream, .is-style-roarr-bg-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment)):has(:is(.roarr-split--map, .is-style-roarr-split-map, .roarr-glance-list))::after {
  content: none;
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
  .roarr-section:is(.is-style-roarr-section-cream, .is-style-roarr-section-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment)
  :is(.is-style-roarr-split-map, .is-style-roarr-split-map, .roarr-split:has(.roarr-glance-list))::before {
  content: none;
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section:is(.is-style-roarr-bg-cream, .is-style-roarr-bg-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment)
  :is(.roarr-split--map, .is-style-roarr-split-map, .roarr-split:has(.roarr-glance-list))::before {
  content: none;
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
  .roarr-section:is(.is-style-roarr-section-cream, .is-style-roarr-section-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list)) {
  position: relative;
  --cards-w: min(100% - var(--space-96), var(--container-width));
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section:is(.is-style-roarr-bg-cream, .is-style-roarr-bg-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list)) {
  position: relative;
  --cards-w: min(100% - var(--space-96), var(--container-width));
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
  .roarr-section:is(.is-style-roarr-section-cream, .is-style-roarr-section-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list))::before,
:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
  .roarr-section:is(.is-style-roarr-section-cream, .is-style-roarr-section-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list))::after {
  content: "";
  position: absolute;
  z-index: 1;
  display: block;
  aspect-ratio: 1672 / 941;
  pointer-events: none;
  background: center / contain no-repeat;
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section:is(.is-style-roarr-bg-cream, .is-style-roarr-bg-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list))::before,
:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section:is(.is-style-roarr-bg-cream, .is-style-roarr-bg-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list))::after {
  content: "";
  position: absolute;
  z-index: 1;
  display: block;
  aspect-ratio: 1672 / 941;
  pointer-events: none;
  background: center / contain no-repeat;
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
  .roarr-section:is(.is-style-roarr-section-cream, .is-style-roarr-section-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list))::before {
  background-image: url("assets/img/decor/pterosaur-1.webp");
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section:is(.is-style-roarr-bg-cream, .is-style-roarr-bg-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list))::before {
  background-image: url("assets/img/decor/pterosaur-1.webp");
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
  .roarr-section:is(.is-style-roarr-section-cream, .is-style-roarr-section-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list))::after {
  background-image: url("assets/img/decor/pterosaur-2.webp");
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section:is(.is-style-roarr-bg-cream, .is-style-roarr-bg-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list))::after {
  background-image: url("assets/img/decor/pterosaur-2.webp");
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
  .roarr-section:is(.is-style-roarr-section-cream, .is-style-roarr-section-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):nth-of-type(3n + 1):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list)) {
  --roarr-bird-one-left: 11%;
  --roarr-bird-one-top: var(--space-16);
  --roarr-bird-one-rotate: 4deg;
  --roarr-bird-two-right: 24%;
  --roarr-bird-two-top: calc(var(--space-24) + var(--space-4));
  --roarr-bird-two-rotate: -3deg;
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section:is(.is-style-roarr-bg-cream, .is-style-roarr-bg-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):nth-of-type(3n + 1):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list)) {
  --roarr-bird-one-left: 11%;
  --roarr-bird-one-top: var(--space-16);
  --roarr-bird-one-rotate: 4deg;
  --roarr-bird-two-right: 24%;
  --roarr-bird-two-top: calc(var(--space-24) + var(--space-4));
  --roarr-bird-two-rotate: -3deg;
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
  .roarr-section:is(.is-style-roarr-section-cream, .is-style-roarr-section-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):nth-of-type(3n + 2):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list)) {
  --roarr-bird-one-left: 31%;
  --roarr-bird-one-top: var(--space-32);
  --roarr-bird-one-rotate: -5deg;
  --roarr-bird-two-right: 9%;
  --roarr-bird-two-top: var(--space-12);
  --roarr-bird-two-rotate: 3deg;
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section:is(.is-style-roarr-bg-cream, .is-style-roarr-bg-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):nth-of-type(3n + 2):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list)) {
  --roarr-bird-one-left: 31%;
  --roarr-bird-one-top: var(--space-32);
  --roarr-bird-one-rotate: -5deg;
  --roarr-bird-two-right: 9%;
  --roarr-bird-two-top: var(--space-12);
  --roarr-bird-two-rotate: 3deg;
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
  .roarr-section[class][class]:is(.is-style-roarr-birds-duo-left, .is-style-roarr-birds-duo-right)::before,
:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
  .roarr-section[class][class]:is(.is-style-roarr-birds-duo-left, .is-style-roarr-birds-duo-right)::after {
  aspect-ratio: auto;
  background-color: transparent;
  background-repeat: no-repeat;
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
  .roarr-section[class][class].is-style-roarr-birds-duo-left::before,
:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
  .roarr-section[class][class].is-style-roarr-birds-duo-right::after {
  width: var(--roarr-bird-cluster-width);
  height: var(--roarr-bird-cluster-height);
  background-image:
    url("assets/img/decor/pterosaur-2.webp"),
    url("assets/img/decor/pterosaur-3.webp");
  background-position:
    left top,
    right bottom;
  background-size:
    48% auto,
    54% auto;
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
  .roarr-section[class][class].is-style-roarr-birds-duo-left::after,
:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
  .roarr-section[class][class].is-style-roarr-birds-duo-right::before {
  width: var(--roarr-bird-single-width);
  height: var(--roarr-bird-single-height);
  background-image: url("assets/img/decor/pterosaur-1.webp");
  background-position: center;
  background-size: contain;
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
  .roarr-section[class][class].is-style-roarr-birds-duo-left::before {
  top: var(--space-16);
  right: auto;
  left: 8%;
  transform: rotate(-3deg);
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
  .roarr-section[class][class].is-style-roarr-birds-duo-left::after {
  top: var(--space-40);
  right: 12%;
  left: auto;
  transform: rotate(5deg);
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
  .roarr-section[class][class].is-style-roarr-birds-duo-right::before {
  top: var(--space-40);
  right: auto;
  left: 12%;
  transform: rotate(-5deg);
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
  .roarr-section[class][class].is-style-roarr-birds-duo-right::after {
  top: var(--space-16);
  right: 8%;
  left: auto;
  transform: rotate(3deg);
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
  .roarr-section:is(.is-style-roarr-section-cream, .is-style-roarr-section-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment)
  + .roarr-section[class][class]:is(.is-style-roarr-section-cream, .is-style-roarr-section-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment)::before,
:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
  .roarr-section:is(.is-style-roarr-section-cream, .is-style-roarr-section-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment)
  + .roarr-section[class][class]:is(.is-style-roarr-section-cream, .is-style-roarr-section-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment)::after {
  content: none;
  display: none;
  background-image: none;
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section:is(.is-style-roarr-bg-cream, .is-style-roarr-bg-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment)
  + .roarr-section[class][class]:is(.is-style-roarr-bg-cream, .is-style-roarr-bg-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment)::before,
:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section:is(.is-style-roarr-bg-cream, .is-style-roarr-bg-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment)
  + .roarr-section[class][class]:is(.is-style-roarr-bg-cream, .is-style-roarr-bg-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment)::after {
  content: none;
  display: none;
  background-image: none;
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
  .roarr-section:is(.is-style-roarr-section-cream, .is-style-roarr-section-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment)
  + .roarr-section[class][class]:is(.is-style-roarr-section-cream, .is-style-roarr-section-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list)):not(:is(.is-style-roarr-section-compact, .is-style-roarr-section-compact, .is-style-roarr-section-flush-top, .roarr-section-flush-top, .is-style-roarr-section-join-previous)) {
  padding-top: var(--section-padding-mobile);
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section:is(.is-style-roarr-bg-cream, .is-style-roarr-bg-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment)
  + .roarr-section[class][class]:is(.is-style-roarr-bg-cream, .is-style-roarr-bg-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list)):not(:is(.roarr-section--compact, .is-style-roarr-section-compact, .roarr-section--flush-top, .roarr-section-flush-top, .roarr-section--join-previous)) {
  padding-top: var(--section-padding-mobile);
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
  .roarr-section[class][class][class]:is(.is-style-roarr-section-cream, .is-style-roarr-section-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(> :is(.faq-accordion, .wp-block-roarr-faq))::before,
:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
  .roarr-section[class][class][class]:is(.is-style-roarr-section-cream, .is-style-roarr-section-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(> :is(.faq-accordion, .wp-block-roarr-faq))::after {
  content: none;
  display: none;
  background-image: none;
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section[class][class][class]:is(.is-style-roarr-bg-cream, .is-style-roarr-bg-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(> :is(.faq-accordion, .wp-block-roarr-faq))::before,
:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section[class][class][class]:is(.is-style-roarr-bg-cream, .is-style-roarr-bg-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(> :is(.faq-accordion, .wp-block-roarr-faq))::after {
  content: none;
  display: none;
  background-image: none;
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
  .roarr-section[class][class][class]:is(.is-style-roarr-section-cream, .is-style-roarr-section-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(> :is(.faq-accordion, .wp-block-roarr-faq)) {
  padding-top: var(--section-padding-mobile);
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section[class][class][class]:is(.is-style-roarr-bg-cream, .is-style-roarr-bg-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(> :is(.faq-accordion, .wp-block-roarr-faq)) {
  padding-top: var(--section-padding-mobile);
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
  .roarr-section[class][class][class]:is(.is-style-roarr-section-cream, .is-style-roarr-section-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):is(.is-style-roarr-section-compact, .is-style-roarr-section-compact, .is-style-roarr-section-flush-top, .roarr-section-flush-top, .is-style-roarr-section-join-previous):has(> :is(.faq-accordion, .wp-block-roarr-faq)) {
  padding-top: var(--section-padding-compact-mobile);
}

:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
  .roarr-section[class][class][class]:is(.is-style-roarr-bg-cream, .is-style-roarr-bg-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):is(.roarr-section--compact, .is-style-roarr-section-compact, .roarr-section--flush-top, .roarr-section-flush-top, .roarr-section--join-previous):has(> :is(.faq-accordion, .wp-block-roarr-faq)) {
  padding-top: var(--section-padding-compact-mobile);
}

.is-style-roarr-home-hero-info-bar {

	padding-bottom: calc(var(--space-128) + var(--space-64));
}

.is-style-roarr-image-card-artwork img {
	object-fit: contain;
	background: var(--deep-forest);
}

.roarr-detail-card.is-style-roarr-detail-card-media {
	padding: 0;
	overflow: hidden;
	grid-template-rows: auto 1fr;
}

.is-style-roarr-detail-card-media .roarr-detail-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	padding: var(--card-padding-mobile);
}

.is-style-roarr-detail-card-art {
	grid-template-columns: clamp(var(--space-72), 10vw, var(--space-128)) minmax(0, 1fr);
	gap: var(--space-24);
	align-items: center;
}

.is-style-roarr-detail-card-art .roarr-detail-card__body {
	display: grid;
	gap: var(--space-8);
	min-width: 0;
}

.is-style-roarr-detail-card-standout {
	border-color: color-mix(in srgb, var(--primary) 40%, var(--border-light));
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, transparent), transparent 58%),
		var(--card-on-light);
}

.is-style-roarr-info-card-planner {
	display: grid;
	gap: var(--space-24);
	align-content: center;
	min-width: 0;
	padding: var(--panel-padding-mobile);
}

.is-style-roarr-info-card-planner h3 {
	margin: 0;
	color: var(--text-primary);
	font-family: var(--font-heading);
	font-size: var(--h3);
	font-weight: var(--weight-bold);
	line-height: var(--lh-tight);
	letter-spacing: 0;
	text-transform: none;
}

.is-style-roarr-info-card-planner .brand-list {
	gap: var(--space-16);
}

.roarr-callout:not(.is-style-roarr-callout-quote):not(.is-style-roarr-callout-quote) {
	background: var(--parchment);
	border-radius: var(--radius-md);
	padding: var(--space-24);
	display: grid;
	grid-template-columns: var(--icon-md) minmax(0, 1fr);
	column-gap: var(--space-8);
	row-gap: var(--space-8);
	align-items: start;
	border: 1px solid var(--border-light);
}

.roarr-callout:not(.is-style-roarr-callout-quote):not(.is-style-roarr-callout-quote):has(> .roarr-callout__icon:empty) {
	grid-template-columns: minmax(0, 1fr);
}

.is-style-roarr-callout-important,
.roarr-callout.is-style-roarr-callout-important {
	background: var(--parchment);
	border-color: var(--warm-sand);
}

.is-style-roarr-callout-important .roarr-callout__icon,
.roarr-callout.is-style-roarr-callout-important .roarr-callout__icon {
	background: var(--jungle-green);
}

.is-style-roarr-split-map-fill .roarr-split__media {
	display: flex;
}

.is-style-roarr-perks-cascade-scroll {
	grid-column: 1 / -1;
	margin-top: var(--space-16);
	border: 0;
	background: transparent;
}

.is-style-roarr-perks-cascade-scroll .roarr-perks-cascade__body {
	margin-top: 0;
	padding: var(--panel-padding-mobile);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-lg);
	background: var(--card-on-light);
}

.is-style-roarr-perks-cascade-scroll .roarr-perks-grid {
	grid-template-columns: 1fr;
}

.is-style-roarr-perks-cascade-scroll .roarr-perks-group {
	padding: var(--card-padding-mobile);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-lg);
	background: var(--card-on-light);
}

.is-style-roarr-perks-cascade-scroll .roarr-perks-group h3 {
	font-size: var(--text-base);
}

.is-style-roarr-rate-table-iconned tbody tr:nth-child(even) {
	background: color-mix(in srgb, var(--warm-sand) 12%, transparent);
}

.is-style-roarr-rate-table-day-admission {
	table-layout: fixed;
}

.is-style-roarr-rate-table-day-admission thead th:not(:first-child),
.is-style-roarr-rate-table-day-admission thead th:last-child,
.is-style-roarr-rate-table-day-admission tbody td,
.is-style-roarr-rate-table-day-admission tbody td:last-child {
	text-align: center;
}

.is-style-roarr-rate-table-day-admission thead th:first-child { width: 36%; }

.is-style-roarr-rate-table-day-admission thead th:nth-child(2) { width: 17%; }

.is-style-roarr-rate-table-day-admission thead th:nth-child(3) { width: 20%; }

.is-style-roarr-rate-table-day-admission thead th:nth-child(4) { width: 27%; }

.is-style-roarr-rate-table-opening-times {
	table-layout: fixed;
}

.is-style-roarr-rate-table-opening-times th:first-child {
	width: 28%;
}

.is-style-roarr-rate-table-opening-times th,
.is-style-roarr-rate-table-opening-times td,
.is-style-roarr-rate-table-opening-times td:last-child,
.is-style-roarr-rate-table-opening-times th:last-child {
	text-align: left;
	white-space: normal;
	overflow-wrap: break-word;
}

.is-style-roarr-rate-table-iconned {
	background: var(--card-on-light);
	font-size: var(--text-base);
}

.is-style-roarr-rate-table-iconned th,
.is-style-roarr-rate-table-iconned td {
	padding-block: var(--space-8);
	padding-inline: var(--space-16);
}

.is-style-roarr-rate-table-iconned th:first-child,
.is-style-roarr-rate-table-iconned td:first-child {
	padding-left: var(--space-24);
}

.is-style-roarr-rate-table-iconned th:last-child,
.is-style-roarr-rate-table-iconned td:last-child {
	padding-right: var(--space-24);
}

.is-style-roarr-rate-table-iconned thead th {
	padding-top: var(--space-16);
	padding-bottom: var(--space-16);
}

.is-style-roarr-rate-table-iconned tbody th {
	font-size: var(--text-lg);
	font-weight: var(--weight-heavy);
}

.is-style-roarr-rate-table-iconned .is-price,
.is-style-roarr-rate-table-iconned tbody td:not(:last-child) {
	font-size: var(--text-lg);
	font-weight: var(--weight-heavy);
	line-height: var(--lh-snug);
}

.is-style-roarr-rate-table-iconned strong {
	font-size: var(--rate-price-size);
	line-height: var(--lh-solid);
}

.is-style-roarr-rate-table-iconned .roarr-rate-table__from {
	color: var(--text-primary);
	font-size: var(--text-sm);
	font-weight: var(--weight-heavy);
}

.is-style-roarr-rate-table-cta {
	display: block;
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--card-on-light);
}

.is-style-roarr-rate-table-cta thead {
	display: none;
}

.is-style-roarr-rate-table-cta tbody {
	display: grid;
	padding: 0;
}

.is-style-roarr-rate-table-cta tbody tr,
.is-style-roarr-rate-table-cta.is-style-roarr-rate-table-stacked tbody tr {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-24);
	padding: var(--space-16) var(--space-24);
	border: 0;
	border-radius: 0;
	background: transparent;
}

.is-style-roarr-rate-table-cta tbody tr + tr {
	border-top: 1px solid var(--border-light);
}

.is-style-roarr-rate-table-cta tbody tr:hover,
.is-style-roarr-rate-table-cta tbody tr:focus-within {
	background: color-mix(in srgb, var(--primary) 8%, var(--card-on-light));
}

.is-style-roarr-rate-table-clickable tbody tr {
	position: relative;
	cursor: pointer;
}

.is-style-roarr-rate-table-clickable tbody tr:nth-child(even) {
	background: color-mix(in srgb, var(--primary) 5%, var(--card-on-light));
}

.is-style-roarr-rate-table-clickable tbody tr:hover,
.is-style-roarr-rate-table-clickable tbody tr:focus-within {
	background: color-mix(in srgb, var(--primary) 8%, var(--card-on-light));
}

.is-style-roarr-rate-table-clickable tbody tr:focus-within {
	box-shadow: inset 0 0 0 2px var(--primary);
}

.is-style-roarr-rate-table-cta tbody th,
.is-style-roarr-rate-table-cta tbody td,
.is-style-roarr-rate-table-cta.is-style-roarr-rate-table-stacked tbody th,
.is-style-roarr-rate-table-cta.is-style-roarr-rate-table-stacked tbody td,
.is-style-roarr-rate-table-cta.is-style-roarr-rate-table-stacked tbody tr:last-child th,
.is-style-roarr-rate-table-cta.is-style-roarr-rate-table-stacked tbody tr:last-child td {
	display: block;
	min-width: 0;
	width: auto;
	padding: 0;
	border: 0;
	text-align: left;
	white-space: normal;
}

.is-style-roarr-rate-table-cta th:first-child,
.is-style-roarr-rate-table-cta td:first-child,
.is-style-roarr-rate-table-cta th:last-child,
.is-style-roarr-rate-table-cta td:last-child {
	padding: 0;
}

.is-style-roarr-rate-table-cta .roarr-rate-table__tk,
.is-style-roarr-rate-table-cta.is-style-roarr-rate-table-stacked .roarr-rate-table__tk {
	display: grid;
	grid-template-columns: var(--icon-badge-size-xl) minmax(0, 1fr);
	align-items: center;
	gap: var(--space-16);
	min-width: 0;
	white-space: normal;
	overflow-wrap: normal;
}

.is-style-roarr-rate-table-cta .roarr-rate-table__icon,
.is-style-roarr-rate-table-cta.is-style-roarr-rate-table-stacked .roarr-rate-table__icon {
	display: inline-grid;
	flex-basis: var(--icon-badge-size-xl);
	width: var(--icon-badge-size-xl);
	height: var(--icon-badge-size-xl);
	border: 0;
	background: color-mix(in srgb, var(--primary) 11%, var(--card-on-light));
}

.is-style-roarr-rate-table-cta .roarr-rate-table__label {
	display: grid;
	gap: var(--space-8);
	min-width: 0;
}

.is-style-roarr-rate-table-cta .roarr-rate-table__title {
	color: var(--text-primary);
	font-size: var(--text-base);
	font-weight: var(--weight-bold);
	line-height: var(--lh-tight);
}

.is-style-roarr-rate-table-cta .roarr-rate-table__desc {
	color: var(--text-secondary);
	font-size: var(--text-xs);
	font-weight: var(--weight-regular);
	line-height: var(--lh-normal);
}

.is-style-roarr-rate-table-cta .roarr-rate-table__price-cta {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-24);
	white-space: nowrap;
}

.is-style-roarr-rate-table-cta .roarr-rate-table__price-value {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-8);
	white-space: nowrap;
}

.is-style-roarr-rate-table-cta strong,
.is-style-roarr-rate-table-cta.is-style-roarr-rate-table-stacked tbody td:last-child strong {
	display: block;
	color: var(--amber);
	font-size: var(--rate-price-size);
	font-weight: var(--weight-heavy);
	line-height: var(--lh-solid);
}

.is-style-roarr-rate-table-cta .roarr-rate-table__from {
	order: -1;
	display: block;
	margin: 0;
	color: var(--text-secondary);
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	line-height: var(--lh-solid);
	text-align: right;
	text-transform: uppercase;
}

.is-style-roarr-rate-table-cta .roarr-rate-table__cta-icon {
	display: inline-grid;
	place-items: center;
	width: var(--icon-md);
	height: var(--icon-md);
	color: var(--text-primary);
}

.is-style-roarr-rate-table-cta .roarr-rate-table__cta-icon .roarr-ui-icon {
	width: var(--icon-sm);
	height: var(--icon-sm);
	transform: rotate(-90deg);
}

.is-style-roarr-section-block-green .roarr-reviews-band__title em {
  color: var(--yellow);
}

.is-style-roarr-bg-block-green .roarr-reviews-band__title em {
  color: var(--yellow);
}

.is-style-roarr-section-cream,
.is-style-roarr-section-parchment {

  background-color: var(--cream);
  background-image: var(--paper-cream);
  background-repeat: repeat;
}

.is-style-roarr-bg-cream,
.is-style-roarr-bg-parchment {

  background-color: var(--cream);
  background-image: var(--paper-cream);
  background-repeat: repeat;
}

.is-style-roarr-section-sticky-rail {
  overflow: visible;
}

.roarr-section.is-style-roarr-section-join-previous {
  padding-top: 0;
}

.roarr-section:has(> .roarr-section__inner > .is-style-roarr-card-grid-quartet),
.roarr-section:has(> .roarr-section__inner > .is-style-roarr-card-grid-quick) {
  padding-top: var(--space-64);
  padding-bottom: var(--space-96);
}

.roarr-section:has(> .roarr-section__inner > .is-style-roarr-card-grid-home-attractions) {
  padding-top: var(--space-64);
}

.roarr-section:has(> .roarr-section__inner > .is-style-roarr-card-grid-home-attractions) .roarr-section__head {
  margin-bottom: var(--space-64);
}

.is-style-roarr-section-wave-top {
  --roarr-section-wave-height: var(--space-32);
  --roarr-section-wave-offset: var(--roarr-section-wave-height);
  overflow: visible;
  isolation: isolate;
}

.is-style-roarr-section-wave-top::before {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(-1 * var(--roarr-section-wave-offset) + 1px);
  width: 100%;
  height: var(--roarr-section-wave-height);
  transform: translateX(-50%);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: inherit;
  pointer-events: none;
  z-index: 0;
}

.is-style-roarr-section-wave-top > .roarr-section__inner {
  position: relative;
  z-index: 1;
}

.is-style-roarr-section-dark {
  background: var(--deep-forest);
  color: var(--text-on-dark);
}

.is-style-roarr-bg-dark {
  background: var(--deep-forest);
  color: var(--text-on-dark);
}

.is-style-roarr-section-dark-forest-break {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--deep-forest) 22%, transparent), color-mix(in srgb, var(--deep-forest) 54%, transparent)),
    linear-gradient(90deg, color-mix(in srgb, var(--jungle-green) 24%, transparent), color-mix(in srgb, var(--deep-forest) 32%, transparent)),
    url('assets/img/home-events/event-leaves-texture.webp') center / cover no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--jungle-green) 42%, var(--deep-forest)), var(--deep-forest));
  color: var(--text-on-dark);
}

.is-style-roarr-bg-dark-forest-break {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--deep-forest) 22%, transparent), color-mix(in srgb, var(--deep-forest) 54%, transparent)),
    linear-gradient(90deg, color-mix(in srgb, var(--jungle-green) 24%, transparent), color-mix(in srgb, var(--deep-forest) 32%, transparent)),
    url('assets/img/home-events/event-leaves-texture.webp') center / cover no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--jungle-green) 42%, var(--deep-forest)), var(--deep-forest));
  color: var(--text-on-dark);
}

.is-style-roarr-section-dark-forest-break .roarr-leaf-heading em {
  color: var(--primary-hover);
}

.is-style-roarr-bg-dark-forest-break .roarr-leaf-heading em {
  color: var(--primary-hover);
}

.is-style-roarr-section-block-pink {
  background-color: var(--wp--preset--color--pink);
  color: var(--text-on-dark);
}

.is-style-roarr-bg-block-pink {
  background-color: var(--wp--preset--color--pink);
  color: var(--text-on-dark);
}

.is-style-roarr-section-block-green {
  background-color: var(--wp--preset--color--green-dark);
  color: var(--text-on-dark);
}

.is-style-roarr-bg-block-green {
  background-color: var(--wp--preset--color--green-dark);
  color: var(--text-on-dark);
}

.is-style-roarr-section-block-sky {
  background-color: var(--wp--preset--color--sky);
}

.is-style-roarr-bg-block-sky {
  background-color: var(--wp--preset--color--sky);
}

.is-style-roarr-section-block-sage {
  background-color: var(--wp--preset--color--sage);
}

.is-style-roarr-bg-block-sage {
  background-color: var(--wp--preset--color--sage);
}

.roarr-section.is-style-roarr-pass-band-banner {
  padding-block: 0;
}

.roarr-section.is-style-roarr-pass-band-banner > .roarr-section__inner {
  width: 100%;
  max-width: none;
  padding-inline: 0;
}

.is-style-roarr-section-compact {
  padding-block: var(--section-padding-compact-mobile);
}

.roarr-section:is(.is-style-roarr-section-flush-top, .roarr-section-flush-top) {
  padding-top: 0;
}

:is(.roarr-section, .roarr-event-band, .roarr-reviews-band).is-style-roarr-section-break-after-skyline {
  padding-bottom: calc(var(--skyline-h) + var(--space-32));
}

:is(.roarr-section, .roarr-event-band, .roarr-reviews-band).is-style-roarr-section-break-after-leaf {
  padding-bottom: calc(var(--leaf-h) + var(--space-32));
}

:is(.roarr-section, .roarr-event-band, .roarr-reviews-band).is-style-roarr-section-break-after-canopy {
  padding-bottom: calc(var(--canopy-h) + var(--space-32));
}

.roarr-event-band.is-style-roarr-section-break-after-skyline {
  padding-bottom: calc(var(--skyline-h) + var(--space-64));
}

.roarr-section:is(
  .is-style-roarr-section-cream,
  .is-style-roarr-section-parchment,
  .is-style-roarr-bg-cream,
  .is-style-roarr-bg-parchment
):is(
  .is-style-roarr-footprints-right-3,
  .is-style-roarr-footprints-left-3,
  .is-style-roarr-footprints-edge-2,
  .is-style-roarr-footprints-long-4,
  .roarr-footprints-plan-4,
  :where(#home-attractions)
) {
  --roarr-footprint: url("assets/img/decor/footprint-15.png");
  --roarr-footprint-size: 44px;
  background-blend-mode: normal;
}

.roarr-section:is(
  .is-style-roarr-bg-cream,
  .is-style-roarr-bg-parchment,
  .is-style-roarr-bg-cream,
  .is-style-roarr-bg-parchment
):is(
  .roarr-footprints--right-3,
  .roarr-footprints--left-3,
  .roarr-footprints--edge-2,
  .roarr-footprints--long-4,
  .roarr-footprints-plan-4,
  :where(#home-attractions)
) {
  --roarr-footprint: url("assets/img/decor/footprint-15.png");
  --roarr-footprint-size: 44px;
  background-blend-mode: normal;
}

.roarr-section:is(.is-style-roarr-footprints-right-3, :where(#home-attractions)) {
  background-image:
    var(--roarr-footprint),
    var(--roarr-footprint),
    var(--roarr-footprint),
    var(--paper-cream);
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-size:
    var(--roarr-footprint-size) auto,
    var(--roarr-footprint-size) auto,
    var(--roarr-footprint-size) auto,
    auto;
  background-position:
    right 2% top 58%,
    right 10% top 72%,
    right 2% top 86%,
    0 0;
}

.roarr-section[class][class].is-style-roarr-footprints-left-3 {
  background-image:
    var(--roarr-footprint),
    var(--roarr-footprint),
    var(--roarr-footprint),
    var(--paper-cream);
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-size:
    var(--roarr-footprint-size) auto,
    var(--roarr-footprint-size) auto,
    var(--roarr-footprint-size) auto,
    auto;
  background-position:
    left 2% top 58%,
    left 10% top 72%,
    left 2% top 86%,
    0 0;
}

.roarr-section[class][class].is-style-roarr-footprints-edge-2 {
  background-image:
    var(--roarr-footprint),
    var(--roarr-footprint),
    var(--paper-cream);
  background-repeat: no-repeat, no-repeat, repeat;
  background-size:
    var(--roarr-footprint-size) auto,
    var(--roarr-footprint-size) auto,
    auto;
  background-position:
    right 2% top 68%,
    right 12% top 84%,
    0 0;
}

.roarr-section[class][class].is-style-roarr-footprints-long-4 {
  background-image:
    var(--roarr-footprint),
    var(--roarr-footprint),
    var(--roarr-footprint),
    var(--roarr-footprint),
    var(--paper-cream);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-size:
    var(--roarr-footprint-size) auto,
    var(--roarr-footprint-size) auto,
    var(--roarr-footprint-size) auto,
    var(--roarr-footprint-size) auto,
    auto;
  background-position:
    left 3% top 40%,
    left 11% top 55%,
    left 3% top 70%,
    left 11% top 85%,
    0 0;
}

.roarr-section:is(
  .is-style-roarr-section-compact,
  .is-style-roarr-section-compact,
  .is-style-roarr-section-flush-top,
  .is-style-roarr-section-join-previous,
  .roarr-contact-section,
  .roarr-store-join-previous,
  .roarr-store-compact
):is(
  .is-style-roarr-footprints-right-3,
  .is-style-roarr-footprints-left-3,
  .is-style-roarr-footprints-edge-2,
  .is-style-roarr-footprints-long-4,
  .roarr-footprints-plan-4,
  :where(#home-attractions)
) {
  background-image: var(--paper-cream);
  background-repeat: repeat;
  background-size: auto;
  background-position: 0 0;
}

.roarr-section:is(
  .is-style-roarr-section-cream,
  .is-style-roarr-section-parchment,
  .is-style-roarr-bg-cream,
  .is-style-roarr-bg-parchment
):is(
  .is-style-roarr-footprints-right-3,
  .is-style-roarr-footprints-left-3,
  .is-style-roarr-footprints-edge-2,
  .is-style-roarr-footprints-long-4
) {
  --roarr-footprint-size: 32px;
  --roarr-footprint-break-lift: 0px;
  --roarr-footprint-edge-inset: 8%;
  --roarr-footprint-lane-offset: calc(var(--roarr-footprint-edge-inset) + var(--roarr-footprint-size) + var(--space-8));
  --roarr-footprint-stride: 28px;
  --roarr-footprint-trail-height: calc(var(--roarr-footprint-size) + var(--roarr-footprint-stride));
  padding-bottom: max(var(--section-padding-mobile), calc(var(--roarr-footprint-trail-height) + var(--space-24)));
  background-blend-mode: normal;
}

.roarr-section:is(
  .is-style-roarr-bg-cream,
  .is-style-roarr-bg-parchment,
  .is-style-roarr-bg-cream,
  .is-style-roarr-bg-parchment
):is(
  .roarr-footprints--right-3,
  .roarr-footprints--left-3,
  .roarr-footprints--edge-2,
  .roarr-footprints--long-4
) {
  --roarr-footprint-size: 32px;
  --roarr-footprint-break-lift: 0px;
  --roarr-footprint-edge-inset: 8%;
  --roarr-footprint-lane-offset: calc(var(--roarr-footprint-edge-inset) + var(--roarr-footprint-size) + var(--space-8));
  --roarr-footprint-stride: 28px;
  --roarr-footprint-trail-height: calc(var(--roarr-footprint-size) + var(--roarr-footprint-stride));
  padding-bottom: max(var(--section-padding-mobile), calc(var(--roarr-footprint-trail-height) + var(--space-24)));
  background-blend-mode: normal;
}

.roarr-section[class][class].is-style-roarr-section-break-after-skyline:is(
  .is-style-roarr-footprints-right-3,
  .is-style-roarr-footprints-left-3,
  .is-style-roarr-footprints-edge-2,
  .is-style-roarr-footprints-long-4
) {
  --roarr-footprint-break-lift: var(--skyline-h);
  padding-bottom: calc(var(--skyline-h) + var(--roarr-footprint-trail-height) + var(--space-32));
}

.roarr-section[class][class].is-style-roarr-section-break-after-leaf:is(
  .is-style-roarr-footprints-right-3,
  .is-style-roarr-footprints-left-3,
  .is-style-roarr-footprints-edge-2,
  .is-style-roarr-footprints-long-4
) {
  --roarr-footprint-break-lift: var(--leaf-h);
  padding-bottom: calc(var(--leaf-h) + var(--roarr-footprint-trail-height) + var(--space-32));
}

.roarr-section[class][class].is-style-roarr-section-break-after-canopy:is(
  .is-style-roarr-footprints-right-3,
  .is-style-roarr-footprints-left-3,
  .is-style-roarr-footprints-edge-2,
  .is-style-roarr-footprints-long-4
) {
  --roarr-footprint-break-lift: var(--canopy-h);
  padding-bottom: calc(var(--canopy-h) + var(--roarr-footprint-trail-height) + var(--space-32));
}

.roarr-section[class][class]:has(+ .is-style-roarr-rip-down):is(
  .is-style-roarr-footprints-right-3,
  .is-style-roarr-footprints-left-3,
  .is-style-roarr-footprints-edge-2,
  .is-style-roarr-footprints-long-4
) {
  --roarr-footprint-break-lift: var(--space-32);
  padding-bottom: max(
    calc(var(--section-padding-mobile) + var(--space-48)),
    calc(var(--space-32) + var(--roarr-footprint-trail-height) + var(--space-24))
  );
}

.roarr-section[class][class].is-style-roarr-footprints-right-3 {
  background-image:
    var(--roarr-footprint),
    var(--roarr-footprint),
    var(--paper-cream);
  background-repeat: no-repeat, no-repeat, repeat;
  background-size:
    var(--roarr-footprint-size) auto,
    var(--roarr-footprint-size) auto,
    auto;
  background-position:
    right var(--roarr-footprint-edge-inset) bottom calc(var(--roarr-footprint-break-lift) + 6px),
    right var(--roarr-footprint-lane-offset) bottom calc(var(--roarr-footprint-break-lift) + var(--roarr-footprint-stride) + 6px),
    0 0;
}

.roarr-section[class][class]#dietary.is-style-roarr-footprints-long-4 {
  --roarr-footprint-size: 44px;
  --roarr-footprint-trail-height: calc(82px + var(--roarr-footprint-size));
  padding-bottom: calc(var(--skyline-h) + var(--roarr-footprint-trail-height) + var(--space-32));
  background-image:
    var(--roarr-footprint),
    var(--roarr-footprint),
    var(--paper-cream);
  background-repeat: no-repeat, no-repeat, repeat;
  background-size:
    var(--roarr-footprint-size) auto,
    var(--roarr-footprint-size) auto,
    auto;
  background-position:
    right 3% bottom calc(var(--roarr-footprint-break-lift) + 82px),
    right 20% bottom calc(var(--roarr-footprint-break-lift) + 12px),
    0 0;
}

.roarr-section[class][class][class].is-style-roarr-footprints-cream-run-middle,
.editor-styles-wrapper .roarr-section[class][class]:is(
  .is-style-roarr-section-cream,
  .is-style-roarr-section-parchment,
  .is-style-roarr-bg-cream,
  .is-style-roarr-bg-parchment,
  .is-style-roarr-footprints-right-3,
  .is-style-roarr-footprints-left-3,
  .is-style-roarr-footprints-edge-2,
  .is-style-roarr-footprints-long-4
):has(+ .roarr-section:is(
  .is-style-roarr-section-cream,
  .is-style-roarr-section-parchment,
  .is-style-roarr-bg-cream,
  .is-style-roarr-bg-parchment,
  .is-style-roarr-footprints-right-3,
  .is-style-roarr-footprints-left-3,
  .is-style-roarr-footprints-edge-2,
  .is-style-roarr-footprints-long-4
)) {
  padding-bottom: var(--section-padding-mobile);
  background-image: var(--paper-cream);
  background-repeat: repeat;
  background-size: auto;
  background-position: 0 0;
}

.roarr-section[class][class][class].roarr-footprints--cream-run-middle,
.editor-styles-wrapper .roarr-section[class][class]:is(
  .is-style-roarr-bg-cream,
  .is-style-roarr-bg-parchment,
  .is-style-roarr-bg-cream,
  .is-style-roarr-bg-parchment,
  .roarr-footprints--right-3,
  .roarr-footprints--left-3,
  .roarr-footprints--edge-2,
  .roarr-footprints--long-4
):has(+ .roarr-section:is(
  .is-style-roarr-bg-cream,
  .is-style-roarr-bg-parchment,
  .is-style-roarr-bg-cream,
  .is-style-roarr-bg-parchment,
  .roarr-footprints--right-3,
  .roarr-footprints--left-3,
  .roarr-footprints--edge-2,
  .roarr-footprints--long-4
)) {
  padding-bottom: var(--section-padding-mobile);
  background-image: var(--paper-cream);
  background-repeat: repeat;
  background-size: auto;
  background-position: 0 0;
}

.roarr-section[class][class][class].is-style-roarr-footprints-cream-run-middle:is(
  .is-style-roarr-section-compact,
  .is-style-roarr-section-compact,
  .roarr-store-compact
),
.editor-styles-wrapper .roarr-section[class][class]:is(
  .is-style-roarr-section-compact,
  .is-style-roarr-section-compact,
  .roarr-store-compact
):has(+ .roarr-section:is(
  .is-style-roarr-section-cream,
  .is-style-roarr-section-parchment,
  .is-style-roarr-bg-cream,
  .is-style-roarr-bg-parchment,
  .is-style-roarr-footprints-right-3,
  .is-style-roarr-footprints-left-3,
  .is-style-roarr-footprints-edge-2,
  .is-style-roarr-footprints-long-4
)) {
  padding-bottom: var(--section-padding-compact-mobile);
}

.roarr-section[class][class][class].roarr-footprints--cream-run-middle:is(
  .roarr-section--compact,
  .is-style-roarr-section-compact,
  .roarr-store-compact
),
.editor-styles-wrapper .roarr-section[class][class]:is(
  .roarr-section--compact,
  .is-style-roarr-section-compact,
  .roarr-store-compact
):has(+ .roarr-section:is(
  .is-style-roarr-bg-cream,
  .is-style-roarr-bg-parchment,
  .is-style-roarr-bg-cream,
  .is-style-roarr-bg-parchment,
  .roarr-footprints--right-3,
  .roarr-footprints--left-3,
  .roarr-footprints--edge-2,
  .roarr-footprints--long-4
)) {
  padding-bottom: var(--section-padding-compact-mobile);
}

:is(
  .roarr-section[class][class][class].is-style-roarr-footprints-cream-run-end,
  .editor-styles-wrapper .roarr-section[class][class]:is(
    .is-style-roarr-section-cream,
    .is-style-roarr-section-parchment,
    .is-style-roarr-bg-cream,
    .is-style-roarr-bg-parchment,
    .is-style-roarr-footprints-right-3,
    .is-style-roarr-footprints-left-3,
    .is-style-roarr-footprints-edge-2,
    .is-style-roarr-footprints-long-4
  ):not(:is(
    .roarr-footprints-plan-4,
    .roarr-home-ticket-section,
    :where(#home-attractions)
  )):not(:has(+ .roarr-section:is(
    .is-style-roarr-section-cream,
    .is-style-roarr-section-parchment,
    .is-style-roarr-bg-cream,
    .is-style-roarr-bg-parchment,
    .is-style-roarr-footprints-right-3,
    .is-style-roarr-footprints-left-3,
    .is-style-roarr-footprints-edge-2,
    .is-style-roarr-footprints-long-4
  )))
) {
  --roarr-footprint: url("assets/img/decor/footprint-15.png");
  --roarr-footprint-size: 44px;
  --roarr-footprint-break-lift: 0px;
  --roarr-footprint-trail-height: calc(82px + var(--roarr-footprint-size));
  padding-bottom: calc(var(--roarr-footprint-break-lift) + var(--roarr-footprint-trail-height) + var(--space-32));
  background-image:
    var(--roarr-footprint),
    var(--roarr-footprint),
    var(--paper-cream);
  background-repeat: no-repeat, no-repeat, repeat;
  background-size:
    var(--roarr-footprint-size) auto,
    var(--roarr-footprint-size) auto,
    auto;
  background-position:
    right 3% bottom calc(var(--roarr-footprint-break-lift) + 82px),
    right 20% bottom calc(var(--roarr-footprint-break-lift) + 12px),
    0 0;
  background-blend-mode: normal;
}

:is(
  .roarr-section[class][class][class].roarr-footprints--cream-run-end,
  .editor-styles-wrapper .roarr-section[class][class]:is(
    .is-style-roarr-bg-cream,
    .is-style-roarr-bg-parchment,
    .is-style-roarr-bg-cream,
    .is-style-roarr-bg-parchment,
    .roarr-footprints--right-3,
    .roarr-footprints--left-3,
    .roarr-footprints--edge-2,
    .roarr-footprints--long-4
  ):not(:is(
    .roarr-footprints-plan-4,
    .roarr-home-ticket-section,
    :where(#home-attractions)
  )):not(:has(+ .roarr-section:is(
    .is-style-roarr-bg-cream,
    .is-style-roarr-bg-parchment,
    .is-style-roarr-bg-cream,
    .is-style-roarr-bg-parchment,
    .roarr-footprints--right-3,
    .roarr-footprints--left-3,
    .roarr-footprints--edge-2,
    .roarr-footprints--long-4
  )))
) {
  --roarr-footprint: url("assets/img/decor/footprint-15.png");
  --roarr-footprint-size: 44px;
  --roarr-footprint-break-lift: 0px;
  --roarr-footprint-trail-height: calc(82px + var(--roarr-footprint-size));
  padding-bottom: calc(var(--roarr-footprint-break-lift) + var(--roarr-footprint-trail-height) + var(--space-32));
  background-image:
    var(--roarr-footprint),
    var(--roarr-footprint),
    var(--paper-cream);
  background-repeat: no-repeat, no-repeat, repeat;
  background-size:
    var(--roarr-footprint-size) auto,
    var(--roarr-footprint-size) auto,
    auto;
  background-position:
    right 3% bottom calc(var(--roarr-footprint-break-lift) + 82px),
    right 20% bottom calc(var(--roarr-footprint-break-lift) + 12px),
    0 0;
  background-blend-mode: normal;
}

.roarr-section[class][class][class][class][class][class].is-style-roarr-footprints-cream-run-end:has(+ .is-style-roarr-rip-down) {

  --roarr-footprint-break-lift: var(--space-80);
}

.roarr-section[class][class][class][class][class][class].is-style-roarr-footprints-cream-run-end.is-style-roarr-section-break-after-skyline {
  --roarr-footprint-break-lift: var(--skyline-h);
}

.roarr-section[class][class][class][class][class][class].is-style-roarr-footprints-cream-run-end.is-style-roarr-section-break-after-leaf {
  --roarr-footprint-break-lift: var(--leaf-h);
}

.roarr-section[class][class][class][class][class][class].is-style-roarr-footprints-cream-run-end.is-style-roarr-section-break-after-canopy {
  --roarr-footprint-break-lift: var(--canopy-h);
}

.is-style-roarr-section-dark .roarr-section__title em {
  color: var(--primary-hover);
}

.is-style-roarr-bg-dark .roarr-section__title em {
  color: var(--primary-hover);
}

.is-style-roarr-section-dark .roarr-section__lede,
.is-style-roarr-section-dark-forest-break .roarr-section__lede {
  color: var(--text-secondary-dark);
}

.is-style-roarr-bg-dark .roarr-section__lede,
.is-style-roarr-bg-dark-forest-break .roarr-section__lede {
  color: var(--text-secondary-dark);
}

.is-style-roarr-reading-layout-archive {
	margin-top: 0;
	margin-inline: auto;
	width: min(100% - calc(var(--gutter-mobile) * 2), var(--container-wide));
}

.is-style-roarr-side-cta-media {
	background: var(--deep-forest);
	color: var(--text-on-dark);
}

.is-style-roarr-side-cta-media .roarr-side-cta__media {
	display: block;
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

.is-style-roarr-side-cta-media .roarr-side-cta__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.is-style-roarr-side-cta-media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--deep-forest) 88%, transparent) 0%,
		color-mix(in srgb, var(--deep-forest) 72%, transparent) 30%,
		color-mix(in srgb, var(--deep-forest) 26%, transparent) 55%,
		color-mix(in srgb, var(--deep-forest) 36%, transparent) 78%,
		color-mix(in srgb, var(--deep-forest) 84%, transparent) 100%
	);
	pointer-events: none;
}

.is-style-roarr-side-cta-media .roarr-side-cta__body {
	position: relative;
	z-index: 2;
	justify-content: flex-end;
}

.roarr-site-main .is-style-roarr-side-cta-media .roarr-side-cta__body > :is(h2, p) {
	display: none;
}

.is-style-roarr-side-cta-media .roarr-side-cta__body > .wp-block-buttons {
	margin-top: 0;
}

.is-style-roarr-side-cta-media .roarr-side-cta__body h2,
.is-style-roarr-side-cta-media .roarr-side-cta__body p {
	color: var(--cream);
	text-shadow:
		0 1px 2px color-mix(in srgb, var(--deep-forest) 84%, transparent),
		0 var(--space-4) var(--space-12) color-mix(in srgb, var(--deep-forest) 60%, transparent);
}

.is-style-roarr-side-cta-signup {
	border-color: color-mix(in srgb, var(--white) 12%, transparent);
	background: var(--deep-forest);
}

.is-style-roarr-side-cta-signup .roarr-side-cta__body h2 {
	color: var(--cream);
}

.is-style-roarr-side-cta-signup .roarr-side-cta__body p {
	color: var(--text-muted-dark);
}

.is-style-roarr-side-cta-signup .roarr-newsletter-form {
	display: grid;
	gap: var(--space-8);
}

.is-style-roarr-side-cta-signup .roarr-newsletter-form__field {
	grid-template-columns: var(--space-32) minmax(0, 1fr);
	border-color: color-mix(in srgb, var(--white) 20%, transparent);
	background: color-mix(in srgb, var(--white) 8%, transparent);
}

.is-style-roarr-side-cta-signup .roarr-newsletter-form__field button {
	grid-column: 1 / -1;
	width: 100%;
}

.is-style-roarr-side-cta-signup .roarr-newsletter-form__field input {
	color: var(--cream);
}

.is-style-roarr-side-cta-signup .roarr-newsletter-form__field input::placeholder {
	color: var(--text-muted-dark);
}

.is-style-roarr-side-cta-signup .roarr-form__note {
	margin: 0;
	color: var(--text-muted-dark);
	font-size: var(--text-xs);
	line-height: var(--lh-relaxed);
}

.is-style-roarr-side-cta-signup .roarr-form__note a {
	color: var(--primary);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.is-style-roarr-side-rail-matched {
	grid-auto-rows: 1fr;
}

.is-style-roarr-reading-layout-archive::before {
		content: "";
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
		align-self: stretch;
		width: 1px;
		min-height: 100%;
		background: var(--border-light);
	}

.is-style-roarr-reading-layout-archive .roarr-blog-feed {
		grid-column: 1;
		grid-row: 1;
		align-self: start;
	}

.is-style-roarr-reading-layout-archive .roarr-side-rail {
		grid-column: 3;
		grid-row: 1;
		align-self: start;
	}

.is-style-roarr-reading-layout-archive .is-style-roarr-side-rail-matched {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: 1fr;
	}

.is-style-roarr-reading-layout-archive .is-style-roarr-side-rail-matched .is-style-roarr-side-cta-signup {
		grid-column: auto;
	}

.is-style-roarr-split-rates {
	grid-template-columns: 1fr;
	gap: var(--space-24);
	align-items: start;
}

.is-style-roarr-split-rates > .roarr-split__heading {
	font-size: var(--h2);
}

.is-style-roarr-split-rates > .roarr-split__lead {
	max-width: calc(var(--space-120) * 6);
	margin: 0;
	color: var(--text-primary);
	font-size: var(--text-lg);
	font-weight: var(--weight-medium);
	line-height: var(--lh-relaxed);
}

.is-style-roarr-split-rates .roarr-split__content {
	gap: var(--space-24);
}

.is-style-roarr-split-rates .roarr-split__media {
	display: grid;
	gap: var(--space-24);
	align-content: start;
	width: 100%;
}

.is-style-roarr-split-rates .roarr-rate-actions {
	display: flex;
	align-items: stretch;
	justify-content: center;
	margin: 0;
}

.is-style-roarr-split-rates .roarr-rate-actions .wp-block-button,
.is-style-roarr-split-rates .roarr-rate-actions .wp-block-button__link,
.is-style-roarr-split-rates .roarr-rate-actions .btn {
	width: 100%;
	min-width: 0;
}

.is-style-roarr-split-rates .roarr-rate-actions .wp-block-button {
	display: flex;
}

.is-style-roarr-split-rates .roarr-glance-list li {
	gap: var(--space-24);
	padding-block: var(--space-24);
	font-size: var(--text-base);
	font-weight: var(--weight-medium);
	line-height: var(--lh-normal);
}

.is-style-roarr-split-rates .roarr-glance-list__icon {
	flex-basis: var(--icon-badge-size-xl);
	width: var(--icon-badge-size-xl);
	height: var(--icon-badge-size-xl);
}

.is-style-roarr-split-rates .roarr-glance-list__icon svg {
	width: var(--icon-badge-glyph-lg);
	height: var(--icon-badge-glyph-lg);
}

.is-style-roarr-rail-card-wide {
	grid-column: 1 / -1;
}

.is-style-roarr-split-info {
	align-items: start;
}

.is-style-roarr-split-map-fill {
	grid-template-columns: 1fr;
	align-items: stretch;
	gap: var(--space-40);
}

.is-style-roarr-split-map-fill .roarr-split__content {
	align-content: start;
}

.is-style-roarr-split-map .roarr-split__media img {
	width: 100%;
	height: auto;
	object-fit: unset;
	aspect-ratio: auto;
	filter: drop-shadow(0 var(--space-4) var(--space-8) color-mix(in srgb, var(--deep-forest) 28%, transparent));
}

.section-body .is-style-roarr-split-attraction {
	margin-top: var(--space-48);
}

.section-body > .container > .is-style-roarr-split-attraction:first-child {
	margin-top: 0;
}

.is-style-roarr-callout-quote {
	display: block;
	position: relative;
	padding: var(--space-32);
	background: var(--parchment);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
}

.is-style-roarr-callout-quote::before {
	content: "\201C";
	position: absolute;
	top: var(--space-8);
	right: var(--space-16);
	font-family: var(--font-heading);
	font-size: var(--h1);
	line-height: 1;
	color: color-mix(in srgb, var(--jungle-green) 18%, transparent);
	pointer-events: none;
}

:is(.is-style-roarr-section-dark, .is-style-roarr-section-dark-forest-break) .roarr-split__content .roarr-plan-day__store-row {
	margin-inline: auto;
}

:is(.is-style-roarr-bg-dark, .is-style-roarr-bg-dark-forest-break) .roarr-split__content .roarr-plan-day__store-row {
	margin-inline: auto;
}

.is-style-roarr-ticket-card-exclusive-adventure .roarr-ticket-card__visual {
	align-items: flex-start;
	padding-top: var(--space-16);
}

.is-style-roarr-ticket-card-annual-pass,
.is-style-roarr-ticket-card-exclusive-adventure {
	--ticket-card-visual-inline: clamp(var(--space-112), 61.3cqi, calc(var(--space-128) + var(--space-24)));
}

.is-style-roarr-ticket-card-exclusive-adventure {
	gap: 0;
}

.is-style-roarr-ticket-card-exclusive-adventure .roarr-ticket-card__body {
	row-gap: 0;
}

.is-style-roarr-ticket-card-exclusive-adventure .roarr-ticket-card__price {
	transform: translateY(calc(var(--space-8) * -1));
}

.roarr-section.roarr-section.roarr-section:is(
	.is-style-roarr-section-theme-dino-sunrise,
	.is-style-roarr-section-theme-footprint-green,
	.is-style-roarr-section-theme-footprint-ember,
	.is-style-roarr-section-theme-footprint-lagoon,
	.is-style-roarr-bg-theme-dino-sunrise,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) {
	--roarr-theme-edge-outer: var(--space-24);
	--roarr-theme-edge-inner: var(--space-144);
	position: relative;
	isolation: isolate;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.roarr-section.roarr-section.roarr-section:is(
	.is-style-roarr-bg-theme-dino-sunrise,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-dino-sunrise,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) {
	--roarr-theme-edge-outer: var(--space-24);
	--roarr-theme-edge-inner: var(--space-144);
	position: relative;
	isolation: isolate;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.roarr-section:is(
	.is-style-roarr-section-theme-dino-sunrise,
	.is-style-roarr-section-theme-footprint-green,
	.is-style-roarr-section-theme-footprint-ember,
	.is-style-roarr-section-theme-footprint-lagoon,
	.is-style-roarr-bg-theme-dino-sunrise,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
):has(.roarr-split) {
	--roarr-upsell-copy-scrim: linear-gradient(
		90deg,
		var(--roarr-upsell-scrim-strong) 0%,
		var(--roarr-upsell-scrim-mid) 46%,
		var(--roarr-upsell-scrim-soft) 72%,
		transparent 100%
	);
}

.roarr-section:is(
	.is-style-roarr-bg-theme-dino-sunrise,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-dino-sunrise,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
):has(.roarr-split) {
	--roarr-upsell-copy-scrim: linear-gradient(
		90deg,
		var(--roarr-upsell-scrim-strong) 0%,
		var(--roarr-upsell-scrim-mid) 46%,
		var(--roarr-upsell-scrim-soft) 72%,
		transparent 100%
	);
}

.roarr-section.roarr-upsell-copy-right:is(
	.is-style-roarr-section-theme-dino-sunrise,
	.is-style-roarr-section-theme-footprint-green,
	.is-style-roarr-section-theme-footprint-ember,
	.is-style-roarr-section-theme-footprint-lagoon,
	.is-style-roarr-bg-theme-dino-sunrise,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) {
	--roarr-upsell-copy-scrim: linear-gradient(
		270deg,
		var(--roarr-upsell-scrim-strong) 0%,
		var(--roarr-upsell-scrim-mid) 46%,
		var(--roarr-upsell-scrim-soft) 72%,
		transparent 100%
	);
}

.roarr-section.roarr-upsell-copy-right:is(
	.is-style-roarr-bg-theme-dino-sunrise,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-dino-sunrise,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) {
	--roarr-upsell-copy-scrim: linear-gradient(
		270deg,
		var(--roarr-upsell-scrim-strong) 0%,
		var(--roarr-upsell-scrim-mid) 46%,
		var(--roarr-upsell-scrim-soft) 72%,
		transparent 100%
	);
}

.roarr-section.roarr-section.roarr-section:is(.is-style-roarr-section-theme-dino-sunrise, .is-style-roarr-bg-theme-dino-sunrise) {
	--roarr-upsell-heading-accent: var(--primary);
	--roarr-upsell-scrim-strong: rgb(248 234 196 / 48%);
	--roarr-upsell-scrim-mid: rgb(244 205 180 / 30%);
	--roarr-upsell-scrim-soft: rgb(244 205 180 / 6%);
	position: relative;
	isolation: isolate;
	background-color: #d38d68;

	background-image: var(--roarr-theme-dino-sunrise-seam);
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	color: var(--deep-forest);
}

.roarr-section.roarr-section.roarr-section:is(.is-style-roarr-bg-theme-dino-sunrise, .is-style-roarr-bg-theme-dino-sunrise) {
	--roarr-upsell-heading-accent: var(--primary);
	--roarr-upsell-scrim-strong: rgb(248 234 196 / 48%);
	--roarr-upsell-scrim-mid: rgb(244 205 180 / 30%);
	--roarr-upsell-scrim-soft: rgb(244 205 180 / 6%);
	position: relative;
	isolation: isolate;
	background-color: #d38d68;

	background-image: var(--roarr-theme-dino-sunrise-seam);
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	color: var(--deep-forest);
}

.roarr-section:is(.is-style-roarr-section-theme-dino-sunrise, .is-style-roarr-bg-theme-dino-sunrise)::before {

	content: '' !important;
	position: absolute;
	z-index: 1;

	inset: 0 !important;
	width: auto !important;
	height: auto !important;
	aspect-ratio: auto !important;
	opacity: 1 !important;
	display: block !important;
	transform: none !important;
	pointer-events: none;
	background-image: var(--roarr-theme-artwork-image, url('assets/img/upsells/dino-vector-banner-v1.webp')) !important;
	background-position: var(--roarr-theme-artwork-position, 50% 50%) !important;
	background-repeat: no-repeat !important;

	background-size: clamp(900px, 100vw, 1800px) auto !important;
	mask-image: linear-gradient(
		to bottom,
		transparent 0,
		transparent var(--roarr-theme-edge-outer),
		#000 var(--roarr-theme-edge-inner),
		#000 calc(100% - var(--roarr-theme-edge-inner)),
		transparent calc(100% - var(--roarr-theme-edge-outer)),
		transparent 100%
	);
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0,
		transparent var(--roarr-theme-edge-outer),
		#000 var(--roarr-theme-edge-inner),
		#000 calc(100% - var(--roarr-theme-edge-inner)),
		transparent calc(100% - var(--roarr-theme-edge-outer)),
		transparent 100%
	);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

.roarr-section:is(.is-style-roarr-bg-theme-dino-sunrise, .is-style-roarr-bg-theme-dino-sunrise)::before {

	content: '' !important;
	position: absolute;
	z-index: 1;

	inset: 0 !important;
	width: auto !important;
	height: auto !important;
	aspect-ratio: auto !important;
	opacity: 1 !important;
	display: block !important;
	transform: none !important;
	pointer-events: none;
	background-image: var(--roarr-theme-artwork-image, url('assets/img/upsells/dino-vector-banner-v1.webp')) !important;
	background-position: var(--roarr-theme-artwork-position, 50% 50%) !important;
	background-repeat: no-repeat !important;

	background-size: clamp(900px, 100vw, 1800px) auto !important;
	mask-image: linear-gradient(
		to bottom,
		transparent 0,
		transparent var(--roarr-theme-edge-outer),
		#000 var(--roarr-theme-edge-inner),
		#000 calc(100% - var(--roarr-theme-edge-inner)),
		transparent calc(100% - var(--roarr-theme-edge-outer)),
		transparent 100%
	);
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0,
		transparent var(--roarr-theme-edge-outer),
		#000 var(--roarr-theme-edge-inner),
		#000 calc(100% - var(--roarr-theme-edge-inner)),
		transparent calc(100% - var(--roarr-theme-edge-outer)),
		transparent 100%
	);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

.roarr-section:is(.is-style-roarr-section-theme-dino-sunrise, .is-style-roarr-bg-theme-dino-sunrise)::after {
	content: '';
	position: absolute;
	z-index: 1;
	inset: 0 !important;
	width: auto !important;
	height: auto !important;
	aspect-ratio: auto !important;
	opacity: 1 !important;
	display: block !important;
	transform: none !important;
	pointer-events: none;
	background-image: var(--roarr-upsell-copy-scrim, linear-gradient(transparent, transparent)) !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0,
		transparent var(--roarr-theme-edge-outer),
		#000 var(--roarr-theme-edge-inner),
		#000 calc(100% - var(--roarr-theme-edge-inner)),
		transparent calc(100% - var(--roarr-theme-edge-outer)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to bottom,
		transparent 0,
		transparent var(--roarr-theme-edge-outer),
		#000 var(--roarr-theme-edge-inner),
		#000 calc(100% - var(--roarr-theme-edge-inner)),
		transparent calc(100% - var(--roarr-theme-edge-outer)),
		transparent 100%
	);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

.roarr-section:is(.is-style-roarr-bg-theme-dino-sunrise, .is-style-roarr-bg-theme-dino-sunrise)::after {
	content: '';
	position: absolute;
	z-index: 1;
	inset: 0 !important;
	width: auto !important;
	height: auto !important;
	aspect-ratio: auto !important;
	opacity: 1 !important;
	display: block !important;
	transform: none !important;
	pointer-events: none;
	background-image: var(--roarr-upsell-copy-scrim, linear-gradient(transparent, transparent)) !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0,
		transparent var(--roarr-theme-edge-outer),
		#000 var(--roarr-theme-edge-inner),
		#000 calc(100% - var(--roarr-theme-edge-inner)),
		transparent calc(100% - var(--roarr-theme-edge-outer)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to bottom,
		transparent 0,
		transparent var(--roarr-theme-edge-outer),
		#000 var(--roarr-theme-edge-inner),
		#000 calc(100% - var(--roarr-theme-edge-inner)),
		transparent calc(100% - var(--roarr-theme-edge-outer)),
		transparent 100%
	);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

.roarr-section:is(.is-style-roarr-section-theme-dino-sunrise, .is-style-roarr-bg-theme-dino-sunrise) > * {
	position: relative;
	z-index: 2;
}

.roarr-section:is(.is-style-roarr-bg-theme-dino-sunrise, .is-style-roarr-bg-theme-dino-sunrise) > * {
	position: relative;
	z-index: 2;
}

.roarr-section.roarr-section.roarr-section:is(.is-style-roarr-section-theme-footprint-green, .is-style-roarr-bg-theme-footprint-green) {
	--roarr-upsell-heading-accent: var(--yellow);
	--roarr-upsell-scrim-strong: rgb(3 18 8 / 94%);
	--roarr-upsell-scrim-mid: rgb(3 18 8 / 70%);
	--roarr-upsell-scrim-soft: rgb(3 18 8 / 22%);
	--roarr-theme-footprint-art: url('assets/img/upsells/footprint-green-masked-v1.webp');
	--roarr-theme-footprint-size: clamp(1080px, 100vw, 1800px) auto;
	background-color: #294018;
	background: var(--roarr-theme-footprint-green-seam);
	color: var(--text-on-dark);
}

.roarr-section.roarr-section.roarr-section:is(.is-style-roarr-bg-theme-footprint-green, .is-style-roarr-bg-theme-footprint-green) {
	--roarr-upsell-heading-accent: var(--yellow);
	--roarr-upsell-scrim-strong: rgb(3 18 8 / 94%);
	--roarr-upsell-scrim-mid: rgb(3 18 8 / 70%);
	--roarr-upsell-scrim-soft: rgb(3 18 8 / 22%);
	--roarr-theme-footprint-art: url('assets/img/upsells/footprint-green-masked-v1.webp');
	--roarr-theme-footprint-size: clamp(1080px, 100vw, 1800px) auto;
	background-color: #294018;
	background: var(--roarr-theme-footprint-green-seam);
	color: var(--text-on-dark);
}

.roarr-section.roarr-section.roarr-section:is(.is-style-roarr-section-theme-footprint-ember, .is-style-roarr-bg-theme-footprint-ember) {
	--roarr-upsell-heading-accent: var(--yellow);
	--roarr-upsell-scrim-strong: rgb(25 9 7 / 95%);
	--roarr-upsell-scrim-mid: rgb(49 15 18 / 72%);
	--roarr-upsell-scrim-soft: rgb(39 8 20 / 24%);
	--roarr-theme-footprint-art: url('assets/img/upsells/footprint-ember-masked-v1.webp');
	--roarr-theme-footprint-size: clamp(1040px, 100vw, 1740px) auto;
	background-color: #6d3518;
	background: var(--roarr-theme-footprint-ember-seam);
	color: var(--text-on-dark);
}

.roarr-section.roarr-section.roarr-section:is(.is-style-roarr-bg-theme-footprint-ember, .is-style-roarr-bg-theme-footprint-ember) {
	--roarr-upsell-heading-accent: var(--yellow);
	--roarr-upsell-scrim-strong: rgb(25 9 7 / 95%);
	--roarr-upsell-scrim-mid: rgb(49 15 18 / 72%);
	--roarr-upsell-scrim-soft: rgb(39 8 20 / 24%);
	--roarr-theme-footprint-art: url('assets/img/upsells/footprint-ember-masked-v1.webp');
	--roarr-theme-footprint-size: clamp(1040px, 100vw, 1740px) auto;
	background-color: #6d3518;
	background: var(--roarr-theme-footprint-ember-seam);
	color: var(--text-on-dark);
}

.roarr-section.roarr-section.roarr-section:is(.is-style-roarr-section-theme-footprint-lagoon, .is-style-roarr-bg-theme-footprint-lagoon) {
	--roarr-upsell-heading-accent: var(--yellow);
	--roarr-upsell-scrim-strong: rgb(2 20 25 / 95%);
	--roarr-upsell-scrim-mid: rgb(3 37 42 / 72%);
	--roarr-upsell-scrim-soft: rgb(5 62 65 / 24%);
	--roarr-theme-footprint-art: url('assets/img/upsells/footprint-lagoon-masked-v1.webp');
	--roarr-theme-footprint-size: clamp(1080px, 100vw, 1800px) auto;
	background-color: #0d5356;
	background: var(--roarr-theme-footprint-lagoon-seam);
	color: var(--text-on-dark);
}

:is(
	.is-style-roarr-section-theme-footprint-green,
	.is-style-roarr-section-theme-footprint-ember,
	.is-style-roarr-section-theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
):has(.roarr-split) {
	--roarr-theme-footprint-position: calc(50% - min(25vw, 360px)) 50%;
}

:is(
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
):has(.roarr-split) {
	--roarr-theme-footprint-position: calc(50% - min(25vw, 360px)) 50%;
}

.roarr-section.roarr-upsell-copy-right:is(
	.is-style-roarr-section-theme-footprint-green,
	.is-style-roarr-section-theme-footprint-ember,
	.is-style-roarr-section-theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) {
	--roarr-theme-footprint-position: calc(50% + min(25vw, 360px)) 50%;
}

.roarr-section.roarr-upsell-copy-right:is(
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) {
	--roarr-theme-footprint-position: calc(50% + min(25vw, 360px)) 50%;
}

:is(
	.is-style-roarr-section-theme-footprint-green,
	.is-style-roarr-section-theme-footprint-ember,
	.is-style-roarr-section-theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
)::before {
	content: '' !important;
	position: absolute;
	z-index: 1;
	inset: 0 !important;
	width: auto !important;
	height: auto !important;
	aspect-ratio: auto !important;
	opacity: 1 !important;
	display: block !important;
	transform: none !important;
	pointer-events: none;
	background-image: var(--roarr-theme-footprint-art) !important;
	background-position: var(--roarr-theme-footprint-position, 50% 50%) !important;
	background-repeat: no-repeat !important;
	background-size: var(--roarr-theme-footprint-size) !important;
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0,
		transparent var(--roarr-theme-edge-outer),
		#000 var(--roarr-theme-edge-inner),
		#000 calc(100% - var(--roarr-theme-edge-inner)),
		transparent calc(100% - var(--roarr-theme-edge-outer)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to bottom,
		transparent 0,
		transparent var(--roarr-theme-edge-outer),
		#000 var(--roarr-theme-edge-inner),
		#000 calc(100% - var(--roarr-theme-edge-inner)),
		transparent calc(100% - var(--roarr-theme-edge-outer)),
		transparent 100%
	);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

:is(
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
)::before {
	content: '' !important;
	position: absolute;
	z-index: 1;
	inset: 0 !important;
	width: auto !important;
	height: auto !important;
	aspect-ratio: auto !important;
	opacity: 1 !important;
	display: block !important;
	transform: none !important;
	pointer-events: none;
	background-image: var(--roarr-theme-footprint-art) !important;
	background-position: var(--roarr-theme-footprint-position, 50% 50%) !important;
	background-repeat: no-repeat !important;
	background-size: var(--roarr-theme-footprint-size) !important;
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0,
		transparent var(--roarr-theme-edge-outer),
		#000 var(--roarr-theme-edge-inner),
		#000 calc(100% - var(--roarr-theme-edge-inner)),
		transparent calc(100% - var(--roarr-theme-edge-outer)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to bottom,
		transparent 0,
		transparent var(--roarr-theme-edge-outer),
		#000 var(--roarr-theme-edge-inner),
		#000 calc(100% - var(--roarr-theme-edge-inner)),
		transparent calc(100% - var(--roarr-theme-edge-outer)),
		transparent 100%
	);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

:is(
	.is-style-roarr-section-theme-footprint-green,
	.is-style-roarr-section-theme-footprint-ember,
	.is-style-roarr-section-theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
)::after {
	content: '';
	position: absolute;
	z-index: 1;
	inset: 0 !important;
	width: auto !important;
	height: auto !important;
	aspect-ratio: auto !important;
	opacity: 1 !important;
	display: block !important;
	transform: none !important;
	pointer-events: none;
	background-image: var(--roarr-upsell-copy-scrim, linear-gradient(transparent, transparent)) !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0,
		transparent var(--roarr-theme-edge-outer),
		#000 var(--roarr-theme-edge-inner),
		#000 calc(100% - var(--roarr-theme-edge-inner)),
		transparent calc(100% - var(--roarr-theme-edge-outer)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to bottom,
		transparent 0,
		transparent var(--roarr-theme-edge-outer),
		#000 var(--roarr-theme-edge-inner),
		#000 calc(100% - var(--roarr-theme-edge-inner)),
		transparent calc(100% - var(--roarr-theme-edge-outer)),
		transparent 100%
	);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

:is(
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
)::after {
	content: '';
	position: absolute;
	z-index: 1;
	inset: 0 !important;
	width: auto !important;
	height: auto !important;
	aspect-ratio: auto !important;
	opacity: 1 !important;
	display: block !important;
	transform: none !important;
	pointer-events: none;
	background-image: var(--roarr-upsell-copy-scrim, linear-gradient(transparent, transparent)) !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0,
		transparent var(--roarr-theme-edge-outer),
		#000 var(--roarr-theme-edge-inner),
		#000 calc(100% - var(--roarr-theme-edge-inner)),
		transparent calc(100% - var(--roarr-theme-edge-outer)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to bottom,
		transparent 0,
		transparent var(--roarr-theme-edge-outer),
		#000 var(--roarr-theme-edge-inner),
		#000 calc(100% - var(--roarr-theme-edge-inner)),
		transparent calc(100% - var(--roarr-theme-edge-outer)),
		transparent 100%
	);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

:is(
	.is-style-roarr-section-theme-footprint-green,
	.is-style-roarr-section-theme-footprint-ember,
	.is-style-roarr-section-theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) > * {
	position: relative;
	z-index: 2;
}

:is(
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) > * {
	position: relative;
	z-index: 2;
}

:is(.is-style-roarr-section-theme-dino-sunrise, .is-style-roarr-bg-theme-dino-sunrise) .roarr-copy,
:is(.is-style-roarr-section-theme-dino-sunrise, .is-style-roarr-bg-theme-dino-sunrise) .roarr-section__lede,
:is(.is-style-roarr-section-theme-dino-sunrise, .is-style-roarr-bg-theme-dino-sunrise) .roarr-glance-list li {
	color: color-mix(in srgb, var(--deep-forest) 88%, transparent);
}

:is(.is-style-roarr-bg-theme-dino-sunrise, .is-style-roarr-bg-theme-dino-sunrise) .roarr-copy,
:is(.is-style-roarr-bg-theme-dino-sunrise, .is-style-roarr-bg-theme-dino-sunrise) .roarr-section__lede,
:is(.is-style-roarr-bg-theme-dino-sunrise, .is-style-roarr-bg-theme-dino-sunrise) .roarr-glance-list li {
	color: color-mix(in srgb, var(--deep-forest) 88%, transparent);
}

:is(.is-style-roarr-section-theme-dino-sunrise, .is-style-roarr-bg-theme-dino-sunrise) .roarr-glance-list li {
	border-top-color: color-mix(in srgb, var(--deep-forest) 24%, transparent);
}

:is(.is-style-roarr-bg-theme-dino-sunrise, .is-style-roarr-bg-theme-dino-sunrise) .roarr-glance-list li {
	border-top-color: color-mix(in srgb, var(--deep-forest) 24%, transparent);
}

:is(.is-style-roarr-section-theme-dino-sunrise, .is-style-roarr-bg-theme-dino-sunrise) .roarr-leaf-heading em,
:is(.is-style-roarr-section-theme-dino-sunrise, .is-style-roarr-bg-theme-dino-sunrise) .roarr-section__title em {
	color: var(--roarr-upsell-heading-accent, var(--primary));
}

:is(.is-style-roarr-bg-theme-dino-sunrise, .is-style-roarr-bg-theme-dino-sunrise) .roarr-leaf-heading em,
:is(.is-style-roarr-bg-theme-dino-sunrise, .is-style-roarr-bg-theme-dino-sunrise) .roarr-section__title em {
	color: var(--roarr-upsell-heading-accent, var(--primary));
}

:is(
	.is-style-roarr-section-theme-footprint-green,
	.is-style-roarr-section-theme-footprint-ember,
	.is-style-roarr-section-theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
)
	:is(.roarr-copy, .roarr-section__lede, .roarr-glance-list li) {
	color: var(--text-on-dark);
}

:is(
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
)
	:is(.roarr-copy, .roarr-section__lede, .roarr-glance-list li) {
	color: var(--text-on-dark);
}

:is(
	.is-style-roarr-section-theme-footprint-green,
	.is-style-roarr-section-theme-footprint-ember,
	.is-style-roarr-section-theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
)
	.roarr-glance-list li {
	border-top-color: color-mix(in srgb, var(--text-on-dark) 22%, transparent);
}

:is(
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
)
	.roarr-glance-list li {
	border-top-color: color-mix(in srgb, var(--text-on-dark) 22%, transparent);
}

:is(
	.is-style-roarr-section-theme-footprint-green,
	.is-style-roarr-section-theme-footprint-ember,
	.is-style-roarr-section-theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
)
	:is(.roarr-leaf-heading, .roarr-section__title) em {
	color: var(--roarr-upsell-heading-accent, var(--primary));
}

:is(
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
)
	:is(.roarr-leaf-heading, .roarr-section__title) em {
	color: var(--roarr-upsell-heading-accent, var(--primary));
}

:is(
	.is-style-roarr-section-theme-footprint-green,
	.is-style-roarr-section-theme-footprint-ember,
	.is-style-roarr-section-theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) .roarr-split__content {
	text-shadow:
		0 1px 2px rgb(0 0 0 / 82%),
		0 2px 18px rgb(0 0 0 / 68%);
}

:is(
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) .roarr-split__content {
	text-shadow:
		0 1px 2px rgb(0 0 0 / 82%),
		0 2px 18px rgb(0 0 0 / 68%);
}

:is(
	.is-style-roarr-section-theme-footprint-green,
	.is-style-roarr-section-theme-footprint-ember,
	.is-style-roarr-section-theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) .roarr-split__content > :is(h1, h2, p, .roarr-section__title, .roarr-leaf-heading) {
	position: relative;
	isolation: isolate;
}

:is(
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) .roarr-split__content > :is(h1, h2, p, .roarr-section__title, .roarr-leaf-heading) {
	position: relative;
	isolation: isolate;
}

:is(
	.is-style-roarr-section-theme-footprint-green,
	.is-style-roarr-section-theme-footprint-ember,
	.is-style-roarr-section-theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) .roarr-split__content > :is(h1, h2, .roarr-section__title, .roarr-leaf-heading) {
	text-shadow: -0.07em 0.07em 0 var(--black);
}

:is(
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) .roarr-split__content > :is(h1, h2, .roarr-section__title, .roarr-leaf-heading) {
	text-shadow: -0.07em 0.07em 0 var(--black);
}

:is(
	.is-style-roarr-section-theme-footprint-green,
	.is-style-roarr-section-theme-footprint-ember,
	.is-style-roarr-section-theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) .roarr-split__content > p::before {
	content: '';
	position: absolute;
	z-index: -1;
	inset: -0.8em -1.15em;
	border-radius: 50%;
	background: radial-gradient(
		ellipse at 32% 50%,
		rgb(0 8 9 / 62%) 0%,
		rgb(0 8 9 / 44%) 48%,
		transparent 78%
	);
	filter: blur(10px);
	pointer-events: none;
}

:is(
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) .roarr-split__content > p::before {
	content: '';
	position: absolute;
	z-index: -1;
	inset: -0.8em -1.15em;
	border-radius: 50%;
	background: radial-gradient(
		ellipse at 32% 50%,
		rgb(0 8 9 / 62%) 0%,
		rgb(0 8 9 / 44%) 48%,
		transparent 78%
	);
	filter: blur(10px);
	pointer-events: none;
}

:is(
	.is-style-roarr-section-theme-footprint-green,
	.is-style-roarr-section-theme-footprint-ember,
	.is-style-roarr-section-theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) .roarr-split__content :is(.wp-block-button__link, .btn) {
	text-shadow: none;
}

:is(
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) .roarr-split__content :is(.wp-block-button__link, .btn) {
	text-shadow: none;
}

:is(
	.is-style-roarr-section-theme-footprint-green,
	.is-style-roarr-section-theme-footprint-ember,
	.is-style-roarr-section-theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) :is(.is-style-roarr-primary, .is-style-roarr-primary-large) .wp-block-button__link,
:is(
	.is-style-roarr-section-theme-footprint-green,
	.is-style-roarr-section-theme-footprint-ember,
	.is-style-roarr-section-theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) .btn--primary {
	border-color: var(--yellow);
	background: var(--yellow);
	color: var(--black);
}

:is(
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) :is(.is-style-roarr-primary, .is-style-roarr-primary-large) .wp-block-button__link,
:is(
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) .btn--primary {
	border-color: var(--yellow);
	background: var(--yellow);
	color: var(--black);
}

:is(
	.is-style-roarr-section-theme-footprint-green,
	.is-style-roarr-section-theme-footprint-ember,
	.is-style-roarr-section-theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) :is(.is-style-roarr-primary, .is-style-roarr-primary-large) .wp-block-button__link:is(:hover, :focus-visible),
:is(
	.is-style-roarr-section-theme-footprint-green,
	.is-style-roarr-section-theme-footprint-ember,
	.is-style-roarr-section-theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) .btn--primary:is(:hover, :focus-visible) {
	border-color: color-mix(in srgb, var(--yellow) 78%, var(--white));
	background: color-mix(in srgb, var(--yellow) 78%, var(--white));
	color: var(--black);
}

:is(
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) :is(.is-style-roarr-primary, .is-style-roarr-primary-large) .wp-block-button__link:is(:hover, :focus-visible),
:is(
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) .btn--primary:is(:hover, :focus-visible) {
	border-color: color-mix(in srgb, var(--yellow) 78%, var(--white));
	background: color-mix(in srgb, var(--yellow) 78%, var(--white));
	color: var(--black);
}

:is(
	.is-style-roarr-section-theme-footprint-green,
	.is-style-roarr-section-theme-footprint-ember,
	.is-style-roarr-section-theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) :is(.is-style-roarr-secondary, .is-style-roarr-secondary-large) .wp-block-button__link,
:is(
	.is-style-roarr-section-theme-footprint-green,
	.is-style-roarr-section-theme-footprint-ember,
	.is-style-roarr-section-theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) .btn--secondary {
	border-color: var(--black);
	background: var(--white);
	color: var(--black);
}

:is(
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) :is(.is-style-roarr-secondary, .is-style-roarr-secondary-large) .wp-block-button__link,
:is(
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) .btn--secondary {
	border-color: var(--black);
	background: var(--white);
	color: var(--black);
}

:is(
	.is-style-roarr-section-theme-footprint-green,
	.is-style-roarr-section-theme-footprint-ember,
	.is-style-roarr-section-theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) :is(.is-style-roarr-secondary, .is-style-roarr-secondary-large) .wp-block-button__link:is(:hover, :focus-visible),
:is(
	.is-style-roarr-section-theme-footprint-green,
	.is-style-roarr-section-theme-footprint-ember,
	.is-style-roarr-section-theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) .btn--secondary:is(:hover, :focus-visible) {
	border-color: var(--yellow);
	background: var(--yellow);
	color: var(--black);
}

:is(
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) :is(.is-style-roarr-secondary, .is-style-roarr-secondary-large) .wp-block-button__link:is(:hover, :focus-visible),
:is(
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.roarr-section--theme-footprint-lagoon,
	.is-style-roarr-bg-theme-footprint-green,
	.is-style-roarr-bg-theme-footprint-ember,
	.is-style-roarr-bg-theme-footprint-lagoon
) .btn--secondary:is(:hover, :focus-visible) {
	border-color: var(--yellow);
	background: var(--yellow);
	color: var(--black);
}

.whats-open-page .whats-open-calendar-section .is-style-roarr-split-rates .roarr-split__heading {
  overflow-wrap: normal;
  text-wrap: pretty;
}

.roarr-cal .is-style-roarr-cal-day-off-peak {
  background: color-mix(in srgb, var(--wp--preset--color--pink) 34%, var(--white));
}

.roarr-cal .is-style-roarr-cal-day-peak {
  background: color-mix(in srgb, var(--mascot-terry) 44%, var(--white));
}

.roarr-cal .is-style-roarr-cal-day-toddler {
  background: color-mix(in srgb, var(--yellow) 52%, var(--white));
}

.roarr-cal .is-style-roarr-cal-day-closed {
  background: color-mix(in srgb, var(--deep-forest) 10%, var(--white));
  color: var(--text-secondary);
}

.roarr-cal .is-style-roarr-cal-day-empty {
  background: transparent;
}

.roarr-cal .roarr-cal-day__marks .is-style-roarr-cal-mark-primevil {
  font-weight: var(--weight-heavy);
  font-size: var(--text-xs);
  line-height: var(--lh-solid);
  color: var(--wp--preset--color--purple);
  display: block;
}

.mega-link-icon:has(.roarr-generated-icon),
.info-bar__icon:has(.roarr-generated-icon),
.info-bar--home .info-bar__icon:has(.roarr-generated-icon),
.roarr-info-row__icon:has(.roarr-generated-icon),
.roarr-detail-card__icon:has(.roarr-generated-icon),
.roarr-glance-list__icon:has(.roarr-generated-icon),
.roarr-rate-table__icon:has(.roarr-generated-icon),
.roarr-accessibility-list__icon:has(.roarr-generated-icon),
.roarr-plan-day__icon:has(.roarr-generated-icon),
.mobile-nav-link__icon:has(.roarr-generated-icon),
.roarr-check-list__icon:has(.roarr-generated-icon),
.is-style-roarr-check-list-light .roarr-check-list__icon:has(.roarr-generated-icon),
.tip-card__icon:has(.roarr-generated-icon),
.roarr-pack-list__icon:has(.roarr-generated-icon),
.roarr-rail-card__icon:has(.roarr-generated-icon),
.roarr-rate-table__note-icon:has(.roarr-generated-icon),
.roarr-callout__icon:has(.roarr-generated-icon),
.allergen-card__icon:has(.roarr-generated-icon) {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body :is(
  .mega-link-icon,
  .info-bar__icon,
  .info-bar--home .info-bar__icon,
  .roarr-info-row__icon,
  .roarr-detail-card__icon,
  .roarr-glance-list__icon,
  .roarr-rate-table__icon,
  .roarr-rate-table__note-icon,
  .roarr-accessibility-list__icon,
  .roarr-plan-day__icon,
  .mobile-nav-link__icon,
  .roarr-check-list__icon,
  .is-style-roarr-check-list-light .roarr-check-list__icon,
  .tip-card__icon,
  .roarr-pack-list__icon,
  .roarr-rail-card__icon,
  .roarr-pass-saver__stat-icon,
  .roarr-pass-saver__highlight-icon,
  .roarr-callout__icon,
  .allergen-card__icon
):has(.roarr-generated-icon) {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body :is(
  .roarr-info-row__icon,
  .roarr-detail-card__icon,
  .roarr-plan-day__icon,
  .roarr-rail-card__icon,
  .roarr-pass-saver__stat-icon,
  .roarr-pass-saver__highlight-icon,
  .is-style-roarr-rate-table-iconned .roarr-rate-table__icon,
  .is-style-roarr-rate-table-cta .roarr-rate-table__icon,
  .is-style-roarr-rate-table-cta.is-style-roarr-rate-table-stacked .roarr-rate-table__icon,
  .allergen-card__icon
):has(.roarr-generated-icon) {
  flex: 0 0 var(--icon-art-size-feature);
  width: var(--icon-art-size-feature);
  height: var(--icon-art-size-feature);
}

body :is(
  .roarr-info-row__icon,
  .roarr-detail-card__icon,
  .roarr-plan-day__icon,
  .roarr-rail-card__icon,
  .roarr-pass-saver__stat-icon,
  .roarr-pass-saver__highlight-icon,
  .is-style-roarr-rate-table-iconned .roarr-rate-table__icon,
  .is-style-roarr-rate-table-cta .roarr-rate-table__icon,
  .is-style-roarr-rate-table-cta.is-style-roarr-rate-table-stacked .roarr-rate-table__icon,
  .allergen-card__icon
) > .roarr-generated-icon {
  width: var(--icon-art-size-feature);
  height: var(--icon-art-size-feature);
  max-width: none;
}

.roarr-rail-card,
.is-style-roarr-rate-table-iconned,
.is-style-roarr-rate-table-cta {
  --icon-art-size-feature: var(--icon-art-size-xl);
}

@media(max-width: 951px) {
	.roarr-site-main .is-style-roarr-section-related-news .is-style-roarr-card-grid-related {
		display: flex;
		gap: var(--space-24);
		width: 100%;
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scroll-padding-inline: 0;
		scroll-snap-type: x mandatory;
		touch-action: pan-x;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.roarr-site-main .is-style-roarr-section-related-news .is-style-roarr-card-grid-related::-webkit-scrollbar {
		display: none;
	}
	.roarr-site-main .is-style-roarr-section-related-news .is-style-roarr-card-grid-related > .adventure-card {
		flex: 0 0 clamp(280px, 44vw, 397px);
		width: clamp(280px, 44vw, 397px);
		min-height: 240px;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}
}

@media(min-width: 768px) and (max-width: 1023px) {
	.roarr-attractions-bento .is-style-roarr-image-card-wide {
		min-height: clamp(calc(var(--space-120) + var(--space-72)), 32vw, calc(var(--space-120) + var(--space-112)));
	}
	.roarr-attractions-bento .is-style-roarr-image-card-tall,
	.roarr-attractions-bento .is-style-roarr-image-card-large {
		min-height: clamp(calc(var(--space-120) + var(--space-128)), 42vw, calc(var(--space-120) * 2 + var(--space-80)));
	}
	:is(.roarr-site-main, .editor-styles-wrapper)
		.roarr-section:has(:is(.is-style-roarr-card-grid-carousel, .roarr-attractions-grid))
		.roarr-button-row
		> .wp-block-button:only-child {
		flex: 0 1 auto;
		width: auto;
	}
	:is(.roarr-site-main, .editor-styles-wrapper)
		.roarr-section:has(:is(.is-style-roarr-card-grid-carousel, .roarr-attractions-grid))
		.roarr-button-row
		> .wp-block-button:only-child
		> .wp-block-button__link {
		width: auto;
		min-width: min(100%, calc(var(--space-120) + var(--space-40)));
	}
	:is(
		.is-style-roarr-section-theme-footprint-green,
		.is-style-roarr-section-theme-footprint-ember,
		.is-style-roarr-section-theme-footprint-lagoon,
		.is-style-roarr-bg-theme-footprint-green,
		.is-style-roarr-bg-theme-footprint-ember,
		.is-style-roarr-bg-theme-footprint-lagoon
	):has(.roarr-split) {
		--roarr-theme-footprint-position: 50% -32px;
		--roarr-theme-footprint-size: 1000px auto;
	}
	:is(
		.is-style-roarr-bg-theme-footprint-green,
		.is-style-roarr-bg-theme-footprint-ember,
		.roarr-section--theme-footprint-lagoon,
		.is-style-roarr-bg-theme-footprint-green,
		.is-style-roarr-bg-theme-footprint-ember,
		.is-style-roarr-bg-theme-footprint-lagoon
	):has(.roarr-split) {
		--roarr-theme-footprint-position: 50% -32px;
		--roarr-theme-footprint-size: 1000px auto;
	}
}

@media(min-width: 1024px) {
	.roarr-attractions-bento .is-style-roarr-image-card-wide { grid-column: span 8; grid-row: span 1; }
	.roarr-attractions-bento .is-style-roarr-image-card-tall { grid-column: span 4; grid-row: span 2; }
	.roarr-attractions-bento .is-style-roarr-image-card-large { grid-column: span 8; grid-row: span 2; }
	.roarr-attractions-bento .is-style-roarr-image-card-tall h3,
	.roarr-attractions-bento .is-style-roarr-image-card-large h3 { font-size: var(--h3); }
	.roarr-card-grid.is-style-roarr-card-grid-carousel {
		--attractions-carousel-card-width: clamp(300px, 27vw, 400px);
	}
	.roarr-site-main .roarr-card-grid.is-style-roarr-card-grid-carousel {
		padding-inline: var(--gutter-desktop);
	}
	.is-style-roarr-card-grid-carousel > .roarr-image-card,
	.roarr-attractions-carousel__track > .roarr-image-card {
		min-height: 336px;
	}
	:is(.is-style-roarr-card-grid-cols-3, .roarr-card-grid-cols-3) > :is(.is-style-roarr-detail-card-tablet-extra, .roarr-detail-card-tablet-extra) {
		display: none;
	}
	.is-style-roarr-card-grid-events {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.is-style-roarr-card-grid-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	:is(.is-style-roarr-card-grid-cols-3, .roarr-card-grid-cols-3) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.roarr-card-grid.is-style-roarr-card-grid-home-attractions {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-template-rows: calc(var(--space-120) + var(--space-128) + var(--space-32)) calc(var(--space-120) + var(--space-72) + var(--space-32));
		gap: var(--space-8);
	}
	.is-style-roarr-card-grid-home-attractions .roarr-image-card {
		min-height: 0;
		height: 100%;
	}
	.is-style-roarr-card-grid-home-attractions .is-style-roarr-image-card-feature {
		grid-column: span 2;
		grid-row: span 1;
	}
	.is-style-roarr-feature-card-story .roarr-feature-card__content {
		padding: var(--space-48);
	}
	.roarr-section:has(.is-style-roarr-card-grid-home-attractions)::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: calc((100% - var(--cards-w)) / 2 - var(--space-24));
    top: calc(var(--canopy-h) - var(--space-112) - var(--space-4));
    width: calc(var(--cards-w) * 0.214);
    aspect-ratio: 1448 / 1086;
    background: center / contain no-repeat url("assets/img/decor/airship.webp");
    transform: rotate(-8deg);
    transform-origin: center;
    pointer-events: none;
  }
	.roarr-section:has(.is-style-roarr-card-grid-home-attractions) > .roarr-leaf-heading::after {
    top: calc(50% - 5px);
    right: calc(-1 * var(--space-32));
    width: min(calc(var(--space-144) + var(--space-40)), 167px);
  }
	.roarr-section:has(.is-style-roarr-card-grid-home-attractions) > .roarr-button-row::before {
    top: 50%;
    left: max(var(--space-32), calc((100% - 1440px) / 2 + var(--space-32)));
    width: min(calc(var(--space-144) + var(--space-40)), 167px);
  }
	:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
    .roarr-section:is(.is-style-roarr-birds-duo-left, .is-style-roarr-birds-duo-right) {
    padding-top: calc(var(--section-padding-desktop) + var(--space-64));
    --roarr-bird-cluster-width: 168px;
    --roarr-bird-cluster-height: 98px;
    --roarr-bird-single-width: 86px;
    --roarr-bird-single-height: 50px;
  }
	:is(.roarr-section:has(:is(.is-style-roarr-split-map, .is-style-roarr-split-map)), .roarr-section:has(.roarr-glance-list))::before {

    top: calc(var(--canopy-h) + var(--space-64));
    right: calc((100% - var(--cards-w)) / 2 + var(--cards-w) * 0.126);
    width: calc(var(--cards-w) * 0.057);
  }
	:is(.roarr-section:has(:is(.is-style-roarr-split-map, .is-style-roarr-split-map)), .roarr-section:has(.roarr-glance-list))::after {

    top: calc(var(--canopy-h) + var(--space-64));
    left: calc((100% - var(--cards-w)) / 2 + var(--cards-w) * 0.534);
    width: calc(var(--cards-w) * 0.139);
  }
	:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
    .roarr-section:is(.is-style-roarr-section-cream, .is-style-roarr-section-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list)) {
    padding-top: calc(var(--section-padding-desktop) + var(--space-64));
    --roarr-bird-one-left: 22%;
    --roarr-bird-one-top: var(--space-32);
    --roarr-bird-one-width: calc(var(--cards-w) * 0.057);
    --roarr-bird-one-rotate: -3deg;
    --roarr-bird-two-right: 18%;
    --roarr-bird-two-top: var(--space-16);
    --roarr-bird-two-width: calc(var(--cards-w) * 0.12);
    --roarr-bird-two-rotate: 4deg;
  }
	:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
    .roarr-section:is(.is-style-roarr-bg-cream, .is-style-roarr-bg-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list)) {
    padding-top: calc(var(--section-padding-desktop) + var(--space-64));
    --roarr-bird-one-left: 22%;
    --roarr-bird-one-top: var(--space-32);
    --roarr-bird-one-width: calc(var(--cards-w) * 0.057);
    --roarr-bird-one-rotate: -3deg;
    --roarr-bird-two-right: 18%;
    --roarr-bird-two-top: var(--space-16);
    --roarr-bird-two-width: calc(var(--cards-w) * 0.12);
    --roarr-bird-two-rotate: 4deg;
  }
	:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
    .roarr-section:is(.is-style-roarr-section-cream, .is-style-roarr-section-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list))::before,
  :is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
    .roarr-section:is(.is-style-roarr-section-cream, .is-style-roarr-section-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list))::after {
  }
	:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
    .roarr-section:is(.is-style-roarr-bg-cream, .is-style-roarr-bg-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list))::before,
  :is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
    .roarr-section:is(.is-style-roarr-bg-cream, .is-style-roarr-bg-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list))::after {
  }
	:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
    .roarr-section[class][class].is-style-roarr-birds-duo-left::before {
    left: max(8%, calc((100% - var(--container-width)) / 2));
  }
	:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
    .roarr-section[class][class].is-style-roarr-birds-duo-left::after {
    right: max(13%, calc((100% - var(--container-width)) / 2 + var(--space-48)));
  }
	:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
    .roarr-section[class][class].is-style-roarr-birds-duo-right::before {
    left: max(13%, calc((100% - var(--container-width)) / 2 + var(--space-48)));
  }
	:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
    .roarr-section[class][class].is-style-roarr-birds-duo-right::after {
    right: max(8%, calc((100% - var(--container-width)) / 2));
  }
	:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
    .roarr-section:is(.is-style-roarr-section-cream, .is-style-roarr-section-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment)
    + .roarr-section[class][class]:is(.is-style-roarr-section-cream, .is-style-roarr-section-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list)):not(:is(.is-style-roarr-section-compact, .is-style-roarr-section-compact, .is-style-roarr-section-flush-top, .roarr-section-flush-top, .is-style-roarr-section-join-previous)) {
    padding-top: var(--section-padding-desktop);
  }
	:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
    .roarr-section:is(.is-style-roarr-bg-cream, .is-style-roarr-bg-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment)
    + .roarr-section[class][class]:is(.is-style-roarr-bg-cream, .is-style-roarr-bg-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list)):not(:is(.roarr-section--compact, .is-style-roarr-section-compact, .roarr-section--flush-top, .roarr-section-flush-top, .roarr-section--join-previous)) {
    padding-top: var(--section-padding-desktop);
  }
	:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
    .roarr-section[class][class][class]:is(.is-style-roarr-section-cream, .is-style-roarr-section-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(> :is(.faq-accordion, .wp-block-roarr-faq)) {
    padding-top: var(--section-padding-desktop);
  }
	:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
    .roarr-section[class][class][class]:is(.is-style-roarr-bg-cream, .is-style-roarr-bg-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(> :is(.faq-accordion, .wp-block-roarr-faq)) {
    padding-top: var(--section-padding-desktop);
  }
	:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
    .roarr-section[class][class][class]:is(.is-style-roarr-section-cream, .is-style-roarr-section-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):is(.is-style-roarr-section-compact, .is-style-roarr-section-compact, .is-style-roarr-section-flush-top, .roarr-section-flush-top, .is-style-roarr-section-join-previous):has(> :is(.faq-accordion, .wp-block-roarr-faq)) {
    padding-top: var(--section-padding-compact-desktop);
  }
	:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
    .roarr-section[class][class][class]:is(.is-style-roarr-bg-cream, .is-style-roarr-bg-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):is(.roarr-section--compact, .is-style-roarr-section-compact, .roarr-section--flush-top, .roarr-section-flush-top, .roarr-section--join-previous):has(> :is(.faq-accordion, .wp-block-roarr-faq)) {
    padding-top: var(--section-padding-compact-desktop);
  }
	.is-style-roarr-home-hero-info-bar {
		padding-bottom: calc(
			var(--space-128) + var(--space-64) - clamp(var(--space-16), calc(3.3vw - var(--space-16)), var(--space-48))
		);
	}
	.is-style-roarr-section-compact {
    padding-block: var(--section-padding-compact-desktop);
  }
	.roarr-section:is(
    .is-style-roarr-footprints-right-3,
    .is-style-roarr-footprints-left-3,
    .is-style-roarr-footprints-edge-2,
    .is-style-roarr-footprints-long-4,
    .roarr-footprints-plan-4,
    :where(#home-attractions)
  ) {
    --roarr-footprint-size: 72px;
  }
	.roarr-section[class][class]:has(+ .is-style-roarr-rip-down):is(
    .is-style-roarr-footprints-right-3,
    .is-style-roarr-footprints-left-3,
    .is-style-roarr-footprints-edge-2,
    .is-style-roarr-footprints-long-4
  ) {
    padding-bottom: max(
      calc(var(--section-padding-desktop) + var(--space-48)),
      calc(var(--space-32) + var(--roarr-footprint-trail-height) + var(--space-24))
    );
  }
	.roarr-section[class][class]:is(
    .is-style-roarr-footprints-right-3,
    .is-style-roarr-footprints-left-3,
    .is-style-roarr-footprints-edge-2,
    .is-style-roarr-footprints-long-4
  ) {
    --roarr-footprint-size: 64px;
    --roarr-footprint-edge-inset: 3%;
    --roarr-footprint-stride: 32px;
    --roarr-footprint-trail-height: calc(var(--roarr-footprint-size) + var(--roarr-footprint-stride) + var(--roarr-footprint-stride));
    padding-bottom: max(var(--section-padding-desktop), calc(var(--roarr-footprint-trail-height) + var(--space-24)));
  }
	.roarr-section[class][class].is-style-roarr-footprints-edge-2 {
    --roarr-footprint-trail-height: calc(var(--roarr-footprint-size) + var(--roarr-footprint-stride));
  }
	.roarr-section[class][class].is-style-roarr-footprints-long-4 {
    --roarr-footprint-trail-height: calc(var(--roarr-footprint-size) + var(--roarr-footprint-stride) + var(--roarr-footprint-stride) + var(--roarr-footprint-stride));
  }
	.roarr-section[class][class].is-style-roarr-footprints-right-3 {
    background-image:
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--paper-cream);
    background-repeat: no-repeat, no-repeat, no-repeat, repeat;
    background-size:
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      auto;
    background-position:
      right var(--roarr-footprint-edge-inset) bottom calc(var(--roarr-footprint-break-lift) + 10px),
      right var(--roarr-footprint-lane-offset) bottom calc(var(--roarr-footprint-break-lift) + var(--roarr-footprint-stride) + 10px),
      right var(--roarr-footprint-edge-inset) bottom calc(var(--roarr-footprint-break-lift) + var(--roarr-footprint-stride) + var(--roarr-footprint-stride) + 10px),
      0 0;
  }
	.roarr-section[class][class].is-style-roarr-footprints-left-3 {
    background-image:
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--paper-cream);
    background-repeat: no-repeat, no-repeat, no-repeat, repeat;
    background-size:
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      auto;
    background-position:
      left var(--roarr-footprint-edge-inset) bottom calc(var(--roarr-footprint-break-lift) + 10px),
      left var(--roarr-footprint-lane-offset) bottom calc(var(--roarr-footprint-break-lift) + var(--roarr-footprint-stride) + 10px),
      left var(--roarr-footprint-edge-inset) bottom calc(var(--roarr-footprint-break-lift) + var(--roarr-footprint-stride) + var(--roarr-footprint-stride) + 10px),
      0 0;
  }
	.roarr-section[class][class]#dietary.is-style-roarr-footprints-long-4 {
    --roarr-footprint-size: 72px;
    --roarr-footprint-trail-height: calc(253px + var(--roarr-footprint-size));
    background-image:
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--paper-cream);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
    background-size:
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      auto;
    background-position:
      right 40% bottom calc(var(--roarr-footprint-break-lift) + 38px),
      right 31% bottom calc(var(--roarr-footprint-break-lift) + 169px),
      right 21% bottom calc(var(--roarr-footprint-break-lift) + 94px),
      right 12% bottom calc(var(--roarr-footprint-break-lift) + 253px),
      0 0;
  }
	.roarr-section[class][class][class].is-style-roarr-footprints-cream-run-middle,
  .editor-styles-wrapper .roarr-section[class][class]:is(
    .is-style-roarr-section-cream,
    .is-style-roarr-section-parchment,
    .is-style-roarr-bg-cream,
    .is-style-roarr-bg-parchment,
    .is-style-roarr-footprints-right-3,
    .is-style-roarr-footprints-left-3,
    .is-style-roarr-footprints-edge-2,
    .is-style-roarr-footprints-long-4
  ):has(+ .roarr-section:is(
    .is-style-roarr-section-cream,
    .is-style-roarr-section-parchment,
    .is-style-roarr-bg-cream,
    .is-style-roarr-bg-parchment,
    .is-style-roarr-footprints-right-3,
    .is-style-roarr-footprints-left-3,
    .is-style-roarr-footprints-edge-2,
    .is-style-roarr-footprints-long-4
  )) {
    padding-bottom: var(--section-padding-desktop);
  }
	.roarr-section[class][class][class].roarr-footprints--cream-run-middle,
  .editor-styles-wrapper .roarr-section[class][class]:is(
    .is-style-roarr-bg-cream,
    .is-style-roarr-bg-parchment,
    .is-style-roarr-bg-cream,
    .is-style-roarr-bg-parchment,
    .roarr-footprints--right-3,
    .roarr-footprints--left-3,
    .roarr-footprints--edge-2,
    .roarr-footprints--long-4
  ):has(+ .roarr-section:is(
    .is-style-roarr-bg-cream,
    .is-style-roarr-bg-parchment,
    .is-style-roarr-bg-cream,
    .is-style-roarr-bg-parchment,
    .roarr-footprints--right-3,
    .roarr-footprints--left-3,
    .roarr-footprints--edge-2,
    .roarr-footprints--long-4
  )) {
    padding-bottom: var(--section-padding-desktop);
  }
	.roarr-section[class][class][class].is-style-roarr-footprints-cream-run-middle:is(
    .is-style-roarr-section-compact,
    .is-style-roarr-section-compact,
    .roarr-store-compact
  ) {
    padding-bottom: var(--section-padding-compact-desktop);
  }
	:is(
    .roarr-section[class][class][class].is-style-roarr-footprints-cream-run-end,
    .editor-styles-wrapper .roarr-section[class][class]:is(
      .is-style-roarr-section-cream,
      .is-style-roarr-section-parchment,
      .is-style-roarr-bg-cream,
      .is-style-roarr-bg-parchment,
      .is-style-roarr-footprints-right-3,
      .is-style-roarr-footprints-left-3,
      .is-style-roarr-footprints-edge-2,
      .is-style-roarr-footprints-long-4
    ):not(:is(
      .roarr-footprints-plan-4,
      .roarr-home-ticket-section,
      :where(#home-attractions)
    )):not(:has(+ .roarr-section:is(
      .is-style-roarr-section-cream,
      .is-style-roarr-section-parchment,
      .is-style-roarr-bg-cream,
      .is-style-roarr-bg-parchment,
      .is-style-roarr-footprints-right-3,
      .is-style-roarr-footprints-left-3,
      .is-style-roarr-footprints-edge-2,
      .is-style-roarr-footprints-long-4
    )))
  ) {
    --roarr-footprint-size: 72px;
    --roarr-footprint-trail-height: calc(253px + var(--roarr-footprint-size));
    background-image:
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--paper-cream);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
    background-size:
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      auto;
    background-position:
      right 40% bottom calc(var(--roarr-footprint-break-lift) + 38px),
      right 31% bottom calc(var(--roarr-footprint-break-lift) + 169px),
      right 21% bottom calc(var(--roarr-footprint-break-lift) + 94px),
      right 12% bottom calc(var(--roarr-footprint-break-lift) + 253px),
      0 0;
  }
	:is(
    .roarr-section[class][class][class].roarr-footprints--cream-run-end,
    .editor-styles-wrapper .roarr-section[class][class]:is(
      .is-style-roarr-bg-cream,
      .is-style-roarr-bg-parchment,
      .is-style-roarr-bg-cream,
      .is-style-roarr-bg-parchment,
      .roarr-footprints--right-3,
      .roarr-footprints--left-3,
      .roarr-footprints--edge-2,
      .roarr-footprints--long-4
    ):not(:is(
      .roarr-footprints-plan-4,
      .roarr-home-ticket-section,
      :where(#home-attractions)
    )):not(:has(+ .roarr-section:is(
      .is-style-roarr-bg-cream,
      .is-style-roarr-bg-parchment,
      .is-style-roarr-bg-cream,
      .is-style-roarr-bg-parchment,
      .roarr-footprints--right-3,
      .roarr-footprints--left-3,
      .roarr-footprints--edge-2,
      .roarr-footprints--long-4
    )))
  ) {
    --roarr-footprint-size: 72px;
    --roarr-footprint-trail-height: calc(253px + var(--roarr-footprint-size));
    background-image:
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--paper-cream);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
    background-size:
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      auto;
    background-position:
      right 40% bottom calc(var(--roarr-footprint-break-lift) + 38px),
      right 31% bottom calc(var(--roarr-footprint-break-lift) + 169px),
      right 21% bottom calc(var(--roarr-footprint-break-lift) + 94px),
      right 12% bottom calc(var(--roarr-footprint-break-lift) + 253px),
      0 0;
  }
	.section-body .is-style-roarr-split-attraction {
		margin-top: var(--space-64);
	}
	.is-style-roarr-split-media-fill {
		align-items: stretch;
	}
	.is-style-roarr-split-media-fill .roarr-split__media {
		position: relative;
		min-height: 0;
	}
	.is-style-roarr-split-media-fill .roarr-media-frame {
		position: absolute;
		inset: 0;
		width: auto;
		height: auto;
	}
	.is-style-roarr-split-media-fill .roarr-media-frame img {
		position: absolute;
		inset: 0;
		min-height: 0;
		aspect-ratio: auto;
	}
	.is-style-roarr-split-info.is-style-roarr-split-media-fill {
		align-items: stretch;
	}
	.is-style-roarr-split-media-hero {
		grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
	}
	.is-style-roarr-split-map {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
		align-items: center;
	}
	:is(body.home .roarr-site-main, .editor-styles-wrapper)
		.roarr-section
		> .roarr-split.is-style-roarr-split-media-hero:has(.roarr-glance-list) {
		grid-template-columns: minmax(280px, 0.74fr) minmax(0, 1.46fr);
		column-gap: var(--space-64);
		align-items: start;
	}
	:is(body.home .roarr-site-main, .editor-styles-wrapper)
		.roarr-section
		> .roarr-split.is-style-roarr-split-media-hero:has(.roarr-glance-list)
		.roarr-split__media {
		align-self: start;
		margin-top: var(--space-40);
	}
	.is-style-roarr-split-map-fill {
		grid-template-columns: 1fr;
	}
	.is-style-roarr-split-flip > :first-child {
		order: 2;
	}
	.is-style-roarr-split-media-stack .roarr-split__media {
		display: grid;
		gap: var(--space-16);
	}
	.is-style-roarr-split-media-stack .roarr-split__media .roarr-media-frame img {
		aspect-ratio: var(--image-ratio-landscape);
	}
	.is-style-roarr-split-gift {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: clamp(var(--space-40), 5vw, var(--space-80));
	}
	.roarr-section.roarr-section.roarr-section:is(.is-style-roarr-section-theme-footprint-green, .is-style-roarr-bg-theme-footprint-green) {
		--roarr-upsell-scrim-strong: rgb(3 18 8 / 68%);
		--roarr-upsell-scrim-mid: rgb(3 18 8 / 50%);
		--roarr-upsell-scrim-soft: rgb(3 18 8 / 16%);
	}
	.roarr-section.roarr-section.roarr-section:is(.is-style-roarr-bg-theme-footprint-green, .is-style-roarr-bg-theme-footprint-green) {
		--roarr-upsell-scrim-strong: rgb(3 18 8 / 68%);
		--roarr-upsell-scrim-mid: rgb(3 18 8 / 50%);
		--roarr-upsell-scrim-soft: rgb(3 18 8 / 16%);
	}
	.roarr-section.roarr-section.roarr-section:is(.is-style-roarr-section-theme-footprint-ember, .is-style-roarr-bg-theme-footprint-ember) {
		--roarr-upsell-scrim-strong: rgb(25 9 7 / 74%);
		--roarr-upsell-scrim-mid: rgb(49 15 18 / 54%);
		--roarr-upsell-scrim-soft: rgb(39 8 20 / 16%);
	}
	.roarr-section.roarr-section.roarr-section:is(.is-style-roarr-bg-theme-footprint-ember, .is-style-roarr-bg-theme-footprint-ember) {
		--roarr-upsell-scrim-strong: rgb(25 9 7 / 74%);
		--roarr-upsell-scrim-mid: rgb(49 15 18 / 54%);
		--roarr-upsell-scrim-soft: rgb(39 8 20 / 16%);
	}
	.roarr-section.roarr-section.roarr-section:is(.is-style-roarr-section-theme-footprint-lagoon, .is-style-roarr-bg-theme-footprint-lagoon) {
		--roarr-upsell-scrim-strong: rgb(2 20 25 / 84%);
		--roarr-upsell-scrim-mid: rgb(3 37 42 / 70%);
		--roarr-upsell-scrim-soft: rgb(5 62 65 / 26%);
	}
	.roarr-section:is(
		.is-style-roarr-section-theme-dino-sunrise,
		.is-style-roarr-section-theme-footprint-green,
		.is-style-roarr-section-theme-footprint-ember,
		.is-style-roarr-section-theme-footprint-lagoon,
		.is-style-roarr-bg-theme-dino-sunrise,
		.is-style-roarr-bg-theme-footprint-green,
		.is-style-roarr-bg-theme-footprint-ember,
		.is-style-roarr-bg-theme-footprint-lagoon
	):has(.roarr-split) {
		min-height: clamp(34rem, 42vw, 42rem);
	}
	.roarr-section:is(
		.is-style-roarr-bg-theme-dino-sunrise,
		.is-style-roarr-bg-theme-footprint-green,
		.is-style-roarr-bg-theme-footprint-ember,
		.roarr-section--theme-footprint-lagoon,
		.is-style-roarr-bg-theme-dino-sunrise,
		.is-style-roarr-bg-theme-footprint-green,
		.is-style-roarr-bg-theme-footprint-ember,
		.is-style-roarr-bg-theme-footprint-lagoon
	):has(.roarr-split) {
		min-height: clamp(34rem, 42vw, 42rem);
	}
}

@media(max-width: 767px) {
	:is(.roarr-site-main, .editor-styles-wrapper)
		.roarr-section:has(:is(.is-style-roarr-card-grid-carousel, .roarr-attractions-grid))
		.roarr-button-row
		> .wp-block-button:only-child {
		flex: 0 1 auto;
		width: auto;
	}
	:is(.roarr-site-main, .editor-styles-wrapper)
		.roarr-section:has(:is(.is-style-roarr-card-grid-carousel, .roarr-attractions-grid))
		.roarr-button-row
		> .wp-block-button:only-child
		> .wp-block-button__link {
		width: auto;
		min-width: min(100%, calc(var(--space-120) + var(--space-40)));
	}
	:is(body.home .roarr-site-main, .editor-styles-wrapper)
		.roarr-section:has(:is(.is-style-roarr-card-grid-home-attractions, .roarr-attractions-grid, .roarr-glance-list))
		.roarr-button-row
		:is(.btn, .wp-block-button) {
		flex: 0 1 auto;
		width: auto;
	}
	:is(body.home .roarr-site-main, .editor-styles-wrapper)
		.roarr-section:has(:is(.is-style-roarr-card-grid-home-attractions, .roarr-attractions-grid, .roarr-glance-list))
		.roarr-button-row
		:is(.btn, .wp-block-button__link) {
		width: auto;
		max-width: 100%;
	}
	.is-style-roarr-event-card-feature .roarr-event-card__title {
		font-size: var(--h2);
	}
	.is-style-roarr-perks-cascade-scroll .roarr-perks-cascade__body {
		padding: var(--panel-padding-mobile);
	}
	.is-style-roarr-rate-table-stacked .roarr-rate-table__from {
		display: none;
	}
	.is-style-roarr-rate-table-stacked {
		display: block;
		width: 100%;
		min-width: 0;
		table-layout: auto;
	}
	.is-style-roarr-rate-table-stacked .roarr-rate-table__caption {
		display: block;
		width: auto;
		padding: var(--space-24) var(--space-24) var(--space-8);
		text-align: left;
	}
	.is-style-roarr-rate-table-stacked thead {
		display: block;
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.is-style-roarr-rate-table-stacked thead tr,
	.is-style-roarr-rate-table-stacked thead th {
		display: block;
		width: 1px;
		height: 1px;
		padding: 0;
		border: 0;
	}
	.is-style-roarr-rate-table-stacked tbody {
		display: grid;
		gap: var(--space-8);
		padding: var(--space-16) var(--space-16) var(--space-16);
	}
	.is-style-roarr-rate-table-stacked tbody tr {
		display: grid;
		gap: var(--space-8);
		padding: var(--space-16);
		border: 1px solid var(--border-light);
		border-radius: var(--radius-md);
		background: color-mix(in srgb, var(--warm-sand) 16%, var(--card-on-light));
	}
	.is-style-roarr-rate-table-stacked tbody th,
	.is-style-roarr-rate-table-stacked tbody td,
	.is-style-roarr-rate-table-stacked tbody tr:last-child th,
	.is-style-roarr-rate-table-stacked tbody tr:last-child td {
		display: block;
		padding: 0;
		border-bottom: 0;
	}
	.is-style-roarr-rate-table-stacked tbody th {
		padding-bottom: var(--space-8);
		border-bottom: 1px solid var(--border-light);
		justify-content: flex-start;
	}
	.is-style-roarr-rate-table-stacked tbody td {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: baseline;
		gap: var(--space-16);
		color: var(--text-primary);
		text-align: right;
		white-space: normal;
	}
	.is-style-roarr-rate-table-stacked tbody tr:last-child td {
		display: grid;
		border-bottom: 0;
	}
	.is-style-roarr-rate-table-stacked strong {
		font-size: var(--text-lg);
	}
	.is-style-roarr-rate-table-cta tbody tr,
	.is-style-roarr-rate-table-cta.is-style-roarr-rate-table-stacked tbody tr,
	.is-style-roarr-rate-table-cta.is-style-roarr-rate-table-annual-pass tbody tr {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-16);
		padding: var(--space-16);
	}
	.is-style-roarr-rate-table-cta .roarr-rate-table__tk,
	.is-style-roarr-rate-table-cta.is-style-roarr-rate-table-stacked .roarr-rate-table__tk {
		grid-template-columns: var(--icon-badge-size-xl) minmax(0, 1fr);
	}
	.is-style-roarr-rate-table-cta .roarr-rate-table__price-cta {
		width: 100%;
		justify-content: flex-end;
		gap: var(--space-16);
	}
	.is-style-roarr-rate-table-cta .roarr-rate-table__price-value {
		display: inline-flex;
		align-items: baseline;
		gap: var(--space-8);
		width: auto;
		justify-items: end;
		text-align: right;
		white-space: nowrap;
	}
	.is-style-roarr-rate-table-cta .roarr-rate-table__from {
		text-align: right;
	}
	.is-style-roarr-section-dark-forest-break:has(+ .roarr-section-break) {
    padding-bottom: calc(var(--section-padding-mobile) + var(--space-80));
  }
	.is-style-roarr-bg-dark-forest-break:has(+ .roarr-section-break) {
    padding-bottom: calc(var(--section-padding-mobile) + var(--space-80));
  }
	.is-style-roarr-split-rates .roarr-action-row {
		align-items: stretch;
	}
	.roarr-section.roarr-section.roarr-section:is(
		.is-style-roarr-section-theme-dino-sunrise,
		.is-style-roarr-section-theme-footprint-green,
		.is-style-roarr-section-theme-footprint-ember,
		.is-style-roarr-section-theme-footprint-lagoon,
		.is-style-roarr-bg-theme-dino-sunrise,
		.is-style-roarr-bg-theme-footprint-green,
		.is-style-roarr-bg-theme-footprint-ember,
		.is-style-roarr-bg-theme-footprint-lagoon
	) {
		--roarr-theme-edge-outer: var(--space-16);
		--roarr-theme-edge-inner: var(--space-112);
	}
	.roarr-section.roarr-section.roarr-section:is(
		.is-style-roarr-bg-theme-dino-sunrise,
		.is-style-roarr-bg-theme-footprint-green,
		.is-style-roarr-bg-theme-footprint-ember,
		.roarr-section--theme-footprint-lagoon,
		.is-style-roarr-bg-theme-dino-sunrise,
		.is-style-roarr-bg-theme-footprint-green,
		.is-style-roarr-bg-theme-footprint-ember,
		.is-style-roarr-bg-theme-footprint-lagoon
	) {
		--roarr-theme-edge-outer: var(--space-16);
		--roarr-theme-edge-inner: var(--space-112);
	}
	.roarr-section.roarr-section.roarr-section:is(.is-style-roarr-section-theme-dino-sunrise, .is-style-roarr-bg-theme-dino-sunrise) {
		--roarr-upsell-copy-scrim: linear-gradient(180deg, rgb(248 234 196 / 46%) 0%, rgb(244 205 180 / 24%) 58%, transparent 100%);
		background-image: var(--roarr-theme-dino-sunrise-seam);
		background-position: left top;
		background-size: 100% 100%;
	}
	.roarr-section.roarr-section.roarr-section:is(.is-style-roarr-bg-theme-dino-sunrise, .is-style-roarr-bg-theme-dino-sunrise) {
		--roarr-upsell-copy-scrim: linear-gradient(180deg, rgb(248 234 196 / 46%) 0%, rgb(244 205 180 / 24%) 58%, transparent 100%);
		background-image: var(--roarr-theme-dino-sunrise-seam);
		background-position: left top;
		background-size: 100% 100%;
	}
	.roarr-section:is(.is-style-roarr-section-theme-dino-sunrise, .is-style-roarr-bg-theme-dino-sunrise)::before {
		background-position: var(--roarr-theme-artwork-position, 50% 55%) !important;
		background-size: 600px auto !important;
	}
	.roarr-section:is(.is-style-roarr-bg-theme-dino-sunrise, .is-style-roarr-bg-theme-dino-sunrise)::before {
		background-position: var(--roarr-theme-artwork-position, 50% 55%) !important;
		background-size: 600px auto !important;
	}
	.roarr-section.roarr-section.roarr-section:is(.is-style-roarr-section-theme-footprint-green, .is-style-roarr-bg-theme-footprint-green) {
		--roarr-upsell-copy-scrim: linear-gradient(180deg, rgb(3 18 8 / 74%) 0%, rgb(3 18 8 / 58%) 58%, rgb(3 18 8 / 28%) 100%);
	}
	.roarr-section.roarr-section.roarr-section:is(.is-style-roarr-bg-theme-footprint-green, .is-style-roarr-bg-theme-footprint-green) {
		--roarr-upsell-copy-scrim: linear-gradient(180deg, rgb(3 18 8 / 74%) 0%, rgb(3 18 8 / 58%) 58%, rgb(3 18 8 / 28%) 100%);
	}
	.roarr-section.roarr-section.roarr-section:is(.is-style-roarr-section-theme-footprint-ember, .is-style-roarr-bg-theme-footprint-ember) {
		--roarr-upsell-copy-scrim: linear-gradient(180deg, rgb(25 9 7 / 95%) 0%, rgb(49 15 18 / 72%) 58%, rgb(39 8 20 / 30%) 100%);
	}
	.roarr-section.roarr-section.roarr-section:is(.is-style-roarr-bg-theme-footprint-ember, .is-style-roarr-bg-theme-footprint-ember) {
		--roarr-upsell-copy-scrim: linear-gradient(180deg, rgb(25 9 7 / 95%) 0%, rgb(49 15 18 / 72%) 58%, rgb(39 8 20 / 30%) 100%);
	}
	.roarr-section.roarr-section.roarr-section:is(.is-style-roarr-section-theme-footprint-lagoon, .is-style-roarr-bg-theme-footprint-lagoon) {
		--roarr-upsell-copy-scrim: linear-gradient(180deg, rgb(2 20 25 / 94%) 0%, rgb(3 37 42 / 72%) 58%, rgb(5 62 65 / 30%) 100%);
	}
	.roarr-section.roarr-section.roarr-section:is(
		.is-style-roarr-section-theme-footprint-green,
		.is-style-roarr-section-theme-footprint-ember,
		.is-style-roarr-section-theme-footprint-lagoon,
		.is-style-roarr-bg-theme-footprint-green,
		.is-style-roarr-bg-theme-footprint-ember,
		.is-style-roarr-bg-theme-footprint-lagoon
	) {

		--roarr-theme-footprint-position: 50% 128px;
		--roarr-theme-footprint-size: 900px auto;
	}
	.roarr-section.roarr-section.roarr-section:is(
		.is-style-roarr-bg-theme-footprint-green,
		.is-style-roarr-bg-theme-footprint-ember,
		.roarr-section--theme-footprint-lagoon,
		.is-style-roarr-bg-theme-footprint-green,
		.is-style-roarr-bg-theme-footprint-ember,
		.is-style-roarr-bg-theme-footprint-lagoon
	) {

		--roarr-theme-footprint-position: 50% 128px;
		--roarr-theme-footprint-size: 900px auto;
	}
}

@media(min-width: 640px) {
	.roarr-card-grid.is-style-roarr-card-grid-carousel {
		--attractions-carousel-card-width: min(42vw, 372px);
	}
	.roarr-site-main .roarr-card-grid.is-style-roarr-card-grid-carousel {
		padding-inline: var(--gutter-tablet);
	}
	.is-style-roarr-card-grid-carousel > .roarr-image-card,
	.roarr-attractions-carousel__track > .roarr-image-card {
		min-height: 332px;
	}
	.roarr-card-grid.is-style-roarr-card-grid-home-attractions {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.is-style-roarr-card-grid-home-attractions .is-style-roarr-image-card-feature {
		grid-column: span 2;
	}
	.roarr-event-band.is-style-roarr-section-break-after-skyline {

    padding-top: calc(var(--skyline-h) + var(--space-64));
  }
}

@media(min-width: 768px) {
	.is-style-roarr-card-grid-events {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.is-style-roarr-card-grid-events .is-style-roarr-event-card-feature {
		grid-column: span 2;
	}
	.is-style-roarr-card-grid-quartet {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--space-16);
	}
	.is-style-roarr-card-grid-quick {
		gap: var(--space-16);
	}
	.is-style-roarr-feature-card-story {
		min-height: calc(var(--space-96) * 3 + var(--space-32));
	}
	.is-style-roarr-feature-card-story .roarr-feature-card__content {
		gap: var(--space-16);
		width: min(100% - calc(var(--space-24) * 2), calc(var(--space-120) * 4 + var(--space-80)));
		padding: var(--panel-padding-tablet);
	}
	.is-style-roarr-feature-card-story h2 {
		max-width: 11em;
		font-size: var(--h1);
	}
	.is-style-roarr-feature-card-story p:not(.roarr-feature-card__meta) {
		max-width: 34ch;
		font-size: var(--text-base);
		line-height: var(--lh-relaxed);
	}
	.is-style-roarr-home-hero-info-bar {
		padding-bottom: calc(var(--space-128) + var(--space-64));
	}
	.is-style-roarr-detail-card-media .roarr-detail-card__body {
		padding: var(--card-padding-tablet);
	}
	.is-style-roarr-perks-cascade-scroll .roarr-perks-group {
		padding: var(--card-padding-tablet);
	}
	.is-style-roarr-perks-cascade-scroll .roarr-perks-cascade__body {
		padding: var(--panel-padding-tablet);
	}
	.is-style-roarr-perks-cascade-scroll .roarr-perks-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-24);
	}
	.is-style-roarr-section-wave-top {
    --roarr-section-wave-height: var(--space-48);
  }
	.is-style-roarr-section-compact {
    padding-block: var(--section-padding-compact-tablet);
  }
	.is-style-roarr-reading-layout-archive {
		width: min(100% - calc(var(--gutter-tablet) * 2), var(--container-wide));
	}
}

@media(max-width: 639px) {
	.roarr-card-grid.is-style-roarr-card-grid-home-attractions {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: calc(var(--space-128) + var(--space-16));
		grid-auto-flow: row dense;
		gap: var(--space-8);
	}
	.is-style-roarr-card-grid-home-attractions .roarr-image-card {
		min-height: 0;
	}
	.is-style-roarr-card-grid-home-attractions .is-style-roarr-image-card-feature {
		min-height: 0;
		grid-column: span 2;
		grid-row: span 2;
	}
	.roarr-404 + .is-style-roarr-rip-cta {
		--roarr-break-fill: color-mix(in srgb, var(--wp--preset--color--sky) 54%, var(--cream));
	}
	.roarr-section:has(.is-style-roarr-card-grid-home-attractions)::before,
  .roarr-section:has(.is-style-roarr-card-grid-home-attractions)::after {
    content: "";
    position: absolute;
    z-index: 1;
    display: block;
    pointer-events: none;
    background: center / contain no-repeat;
  }
	.roarr-section:has(.is-style-roarr-card-grid-home-attractions)::before {
    left: calc(3vw - var(--space-24));
    top: calc(var(--space-32) + var(--space-24));
    width: 29vw;
    aspect-ratio: 1448 / 1086;
    background-image: url("assets/img/decor/airship.webp");
    transform: rotate(-8deg);
  }
	.roarr-section:has(.is-style-roarr-card-grid-home-attractions)::after {
    top: calc(var(--space-16) + var(--space-4));
    right: 22vw;
    width: 24vw;
    aspect-ratio: 1672 / 941;
    background-image: url("assets/img/decor/pterosaur-2.webp");
  }
	.roarr-section:has(.is-style-roarr-card-grid-home-attractions) > .roarr-leaf-heading::after,
  .roarr-section:has(.is-style-roarr-card-grid-home-attractions) > .roarr-button-row::before {
    content: none;
    display: none;
  }
	:is(.roarr-section:has(:is(.is-style-roarr-split-map, .is-style-roarr-split-map)), .roarr-section:has(.roarr-glance-list))::before,
  :is(.roarr-section:has(:is(.is-style-roarr-split-map, .is-style-roarr-split-map)), .roarr-section:has(.roarr-glance-list))::after,
  :is(.is-style-roarr-split-map, .is-style-roarr-split-map, .roarr-split:has(.roarr-glance-list))::before {
    opacity: 0.9;
  }
	:is(.roarr-section:has(:is(.is-style-roarr-split-map, .is-style-roarr-split-map)), .roarr-section:has(.roarr-glance-list))::before {
    top: calc(var(--canopy-h) + var(--space-8));
    right: var(--space-40);
    width: 18vw;
  }
	:is(.roarr-section:has(:is(.is-style-roarr-split-map, .is-style-roarr-split-map)), .roarr-section:has(.roarr-glance-list))::after {
    top: var(--canopy-h);
    left: 40vw;
    width: 24vw;
  }
	:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
    .roarr-section:is(.is-style-roarr-section-cream, .is-style-roarr-section-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list)) {
    padding-top: calc(var(--section-padding-mobile) + var(--space-80));
    --roarr-bird-one-left: 14%;
    --roarr-bird-one-top: var(--space-32);
    --roarr-bird-one-width: 18vw;
    --roarr-bird-one-rotate: -3deg;
    --roarr-bird-two-right: 18%;
    --roarr-bird-two-top: var(--space-16);
    --roarr-bird-two-width: 22vw;
    --roarr-bird-two-rotate: 4deg;
  }
	:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
    .roarr-section:is(.is-style-roarr-bg-cream, .is-style-roarr-bg-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list)) {
    padding-top: calc(var(--section-padding-mobile) + var(--space-80));
    --roarr-bird-one-left: 14%;
    --roarr-bird-one-top: var(--space-32);
    --roarr-bird-one-width: 18vw;
    --roarr-bird-one-rotate: -3deg;
    --roarr-bird-two-right: 18%;
    --roarr-bird-two-top: var(--space-16);
    --roarr-bird-two-width: 22vw;
    --roarr-bird-two-rotate: 4deg;
  }
	:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
    .roarr-section:is(.is-style-roarr-section-cream, .is-style-roarr-section-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list))::before,
  :is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
    .roarr-section:is(.is-style-roarr-section-cream, .is-style-roarr-section-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list))::after {
    opacity: 0.9;
  }
	:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
    .roarr-section:is(.is-style-roarr-bg-cream, .is-style-roarr-bg-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list))::before,
  :is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
    .roarr-section:is(.is-style-roarr-bg-cream, .is-style-roarr-bg-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list))::after {
    opacity: 0.9;
  }
	.is-style-roarr-home-hero-info-bar {
		align-items: end;
		min-height: 100vh;
		min-height: 100svh;
		padding-top: calc(var(--header-h) + var(--space-16));

		padding-bottom: var(--space-128);
	}
	body.admin-bar .is-style-roarr-home-hero-info-bar {
		min-height: calc(100vh - var(--wp-admin--admin-bar--height, var(--space-48)));
		min-height: calc(100svh - var(--wp-admin--admin-bar--height, var(--space-48)));
	}
	.roarr-event-band.is-style-roarr-section-break-after-skyline {
    padding-bottom: calc(var(--skyline-h) + var(--space-48));
  }
	.roarr-section:is(
    .is-style-roarr-footprints-right-3,
    .is-style-roarr-footprints-edge-2,
    :where(#home-attractions)
  ) {
    background-image:
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--paper-cream);
    background-repeat: no-repeat, no-repeat, repeat;
    background-size:
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      auto;
    background-position:
      left 100% top 89%,
      left 75% top 93%,
      0 0;
  }
	.roarr-section[class][class].is-style-roarr-footprints-left-3 {
    background-image:
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--paper-cream);
    background-repeat: no-repeat, no-repeat, repeat;
    background-size:
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      auto;
    background-position:
      right 100% top 89%,
      right 75% top 93%,
      0 0;
  }
	.roarr-section[class][class].is-style-roarr-footprints-long-4 {
    background-image: var(--paper-cream);
    background-repeat: repeat;
    background-size: auto;
    background-position: 0 0;
  }
	.roarr-ticket-card,
	.is-style-roarr-ticket-card-exclusive-adventure {
		gap: var(--space-8);
		min-height: 0;
		padding: var(--space-16) var(--space-16);
	}
	.roarr-ticket-card__body,
	.is-style-roarr-ticket-card-exclusive-adventure .roarr-ticket-card__body {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"copy"
			"visual"
			"price"
			"link";
		row-gap: var(--space-8);
		justify-items: center;
		min-height: 0;
	}
	.roarr-ticket-card__visual,
	.is-style-roarr-ticket-card-exclusive-adventure .roarr-ticket-card__visual {
		justify-self: center;
		align-self: end;
		align-items: flex-end;
		justify-content: center;
		inline-size: clamp(var(--space-96), 64cqi, calc(var(--space-112) + var(--space-16)));
		block-size: clamp(var(--space-96), 64cqi, calc(var(--space-112) + var(--space-16)));
		margin: 0;
		padding-top: 0;
		transform: none;
	}
	.roarr-ticket-card__price,
	.is-style-roarr-ticket-card-exclusive-adventure .roarr-ticket-card__price {
		justify-items: center;
		align-content: center;
		text-align: center;
		transform: none;
	}
}

@media(prefers-reduced-motion: reduce) {
	.is-style-roarr-event-band-moody,
  .is-style-roarr-event-band-moody + .roarr-canopy-break {
    transition: none;
  }
}

@media(min-width: 640px) and (max-width: 1023px) {
	.roarr-section:has(.is-style-roarr-card-grid-home-attractions) {

    padding-top: calc(var(--section-padding-tablet) + var(--space-112));
  }
	.roarr-section:has(.is-style-roarr-card-grid-home-attractions)::before,
  .roarr-section:has(.is-style-roarr-card-grid-home-attractions)::after {
    content: "";
    position: absolute;
    z-index: 1;
    display: block;
    pointer-events: none;
    background: center / contain no-repeat;
  }
	.roarr-section:has(.is-style-roarr-card-grid-home-attractions)::before {
    left: calc(-1 * var(--space-8));
    top: var(--space-56);
    width: calc(var(--space-120) + var(--space-48));
    aspect-ratio: 1448 / 1086;
    background-image: url("assets/img/decor/airship.webp");
    transform: rotate(-8deg);
  }
	.roarr-section:has(.is-style-roarr-card-grid-home-attractions)::after {
    top: var(--space-40);
    right: calc(50% - var(--space-32));
    width: calc(var(--space-120) + var(--space-24));
    aspect-ratio: 1672 / 941;
    background-image: url("assets/img/decor/pterosaur-2.webp");
  }
	.roarr-section:has(.is-style-roarr-card-grid-home-attractions) > .roarr-leaf-heading::after {
    top: 50%;
    right: calc(-1 * var(--space-16));
    width: var(--space-120);
  }
	.roarr-section:has(.is-style-roarr-card-grid-home-attractions) > .roarr-button-row::before {
    top: 50%;
    left: var(--space-16);
    width: var(--space-120);
  }
	:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
    .roarr-section:is(.is-style-roarr-birds-duo-left, .is-style-roarr-birds-duo-right) {
    padding-top: calc(var(--section-padding-tablet) + var(--space-80));
    --roarr-bird-cluster-width: 132px;
    --roarr-bird-cluster-height: 78px;
    --roarr-bird-single-width: 72px;
    --roarr-bird-single-height: 42px;
  }
	:is(.roarr-section:has(:is(.is-style-roarr-split-map, .is-style-roarr-split-map)), .roarr-section:has(.roarr-glance-list))::before,
  :is(.roarr-section:has(:is(.is-style-roarr-split-map, .is-style-roarr-split-map)), .roarr-section:has(.roarr-glance-list))::after,
  :is(.is-style-roarr-split-map, .is-style-roarr-split-map, .roarr-split:has(.roarr-glance-list))::before {
    opacity: 0.9;
  }
	:is(.roarr-section:has(:is(.is-style-roarr-split-map, .is-style-roarr-split-map)), .roarr-section:has(.roarr-glance-list))::before {
    top: calc(var(--canopy-h) + var(--space-24));
    left: calc(50% - var(--space-144));
    width: var(--space-96);
  }
	:is(.roarr-section:has(:is(.is-style-roarr-split-map, .is-style-roarr-split-map)), .roarr-section:has(.roarr-glance-list))::after {
    top: calc(var(--canopy-h) + var(--space-16));
    right: calc(50% - var(--space-144));
    width: var(--space-120);
  }
	:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
    .roarr-section:is(.is-style-roarr-section-cream, .is-style-roarr-section-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list)) {
    padding-top: calc(var(--section-padding-tablet) + var(--space-96));
    --roarr-bird-one-left: 18%;
    --roarr-bird-one-top: var(--space-24);
    --roarr-bird-one-width: var(--space-80);
    --roarr-bird-one-rotate: -3deg;
    --roarr-bird-two-right: 14%;
    --roarr-bird-two-top: var(--space-12);
    --roarr-bird-two-width: calc(var(--space-96) + var(--space-8));
    --roarr-bird-two-rotate: 4deg;
  }
	:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
    .roarr-section:is(.is-style-roarr-bg-cream, .is-style-roarr-bg-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list)) {
    padding-top: calc(var(--section-padding-tablet) + var(--space-96));
    --roarr-bird-one-left: 18%;
    --roarr-bird-one-top: var(--space-24);
    --roarr-bird-one-width: var(--space-80);
    --roarr-bird-one-rotate: -3deg;
    --roarr-bird-two-right: 14%;
    --roarr-bird-two-top: var(--space-12);
    --roarr-bird-two-width: calc(var(--space-96) + var(--space-8));
    --roarr-bird-two-rotate: 4deg;
  }
	:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
    .roarr-section:is(.is-style-roarr-section-cream, .is-style-roarr-section-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list))::before,
  :is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
    .roarr-section:is(.is-style-roarr-section-cream, .is-style-roarr-section-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list))::after {
    opacity: 0.9;
  }
	:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
    .roarr-section:is(.is-style-roarr-bg-cream, .is-style-roarr-bg-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list))::before,
  :is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
    .roarr-section:is(.is-style-roarr-bg-cream, .is-style-roarr-bg-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list))::after {
    opacity: 0.9;
  }
	:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
    .roarr-section[class][class].is-style-roarr-birds-duo-left::before {
    left: 12%;
  }
	:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
    .roarr-section[class][class].is-style-roarr-birds-duo-left::after {
    right: 16%;
  }
	:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
    .roarr-section[class][class].is-style-roarr-birds-duo-right::before {
    left: 16%;
  }
	:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
    .roarr-section[class][class].is-style-roarr-birds-duo-right::after {
    right: 12%;
  }
	:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
    .roarr-section:is(.is-style-roarr-section-cream, .is-style-roarr-section-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment)
    + .roarr-section[class][class]:is(.is-style-roarr-section-cream, .is-style-roarr-section-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list)):not(:is(.is-style-roarr-section-compact, .is-style-roarr-section-compact, .is-style-roarr-section-flush-top, .roarr-section-flush-top, .is-style-roarr-section-join-previous)) {
    padding-top: var(--section-padding-tablet);
  }
	:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
    .roarr-section:is(.is-style-roarr-bg-cream, .is-style-roarr-bg-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment)
    + .roarr-section[class][class]:is(.is-style-roarr-bg-cream, .is-style-roarr-bg-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(:is(.roarr-section__title, .roarr-split__heading, .roarr-glance-list)):not(:is(.roarr-section--compact, .is-style-roarr-section-compact, .roarr-section--flush-top, .roarr-section-flush-top, .roarr-section--join-previous)) {
    padding-top: var(--section-padding-tablet);
  }
	:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
    .roarr-section[class][class][class]:is(.is-style-roarr-section-cream, .is-style-roarr-section-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(> :is(.faq-accordion, .wp-block-roarr-faq)) {
    padding-top: var(--section-padding-tablet);
  }
	:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
    .roarr-section[class][class][class]:is(.is-style-roarr-bg-cream, .is-style-roarr-bg-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):has(> :is(.faq-accordion, .wp-block-roarr-faq)) {
    padding-top: var(--section-padding-tablet);
  }
	:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.is-style-roarr-card-grid-home-attractions)))
    .roarr-section[class][class][class]:is(.is-style-roarr-section-cream, .is-style-roarr-section-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):is(.is-style-roarr-section-compact, .is-style-roarr-section-compact, .is-style-roarr-section-flush-top, .roarr-section-flush-top, .is-style-roarr-section-join-previous):has(> :is(.faq-accordion, .wp-block-roarr-faq)) {
    padding-top: var(--section-padding-compact-tablet);
  }
	:is(body:not(.home) .roarr-site-main, .editor-styles-wrapper:not(:has(.roarr-card-grid--home-attractions)))
    .roarr-section[class][class][class]:is(.is-style-roarr-bg-cream, .is-style-roarr-bg-parchment, .is-style-roarr-bg-cream, .is-style-roarr-bg-parchment):is(.roarr-section--compact, .is-style-roarr-section-compact, .roarr-section--flush-top, .roarr-section-flush-top, .roarr-section--join-previous):has(> :is(.faq-accordion, .wp-block-roarr-faq)) {
    padding-top: var(--section-padding-compact-tablet);
  }
	.is-style-roarr-home-hero-info-bar {
		padding-bottom: calc(var(--space-128) + var(--space-80));
	}
	.roarr-section:is(
    .is-style-roarr-footprints-right-3,
    .is-style-roarr-footprints-left-3,
    .is-style-roarr-footprints-edge-2,
    .roarr-footprints-plan-4,
    :where(#home-attractions)
  ) {
    --roarr-footprint-size: 54px;
  }
	.roarr-section:is(
    .is-style-roarr-footprints-right-3,
    .is-style-roarr-footprints-edge-2,
    :where(#home-attractions)
  ) {
    background-image:
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--paper-cream);
    background-repeat: no-repeat, no-repeat, repeat;
    background-size:
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      auto;
    background-position:
      left 100% top 90%,
      left 85% top 94%,
      0 0;
  }
	.roarr-section[class][class].is-style-roarr-footprints-left-3 {
    background-image:
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--paper-cream);
    background-repeat: no-repeat, no-repeat, repeat;
    background-size:
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      auto;
    background-position:
      right 100% top 90%,
      right 85% top 94%,
      0 0;
  }
	.roarr-section[class][class].is-style-roarr-footprints-long-4 {
    background-image: var(--paper-cream);
    background-repeat: repeat;
    background-size: auto;
    background-position: 0 0;
  }
	.roarr-section[class][class]:has(+ .is-style-roarr-rip-down):is(
    .is-style-roarr-footprints-right-3,
    .is-style-roarr-footprints-left-3,
    .is-style-roarr-footprints-edge-2,
    .is-style-roarr-footprints-long-4
  ) {
    padding-bottom: max(
      calc(var(--section-padding-tablet) + var(--space-48)),
      calc(var(--space-32) + var(--roarr-footprint-trail-height) + var(--space-24))
    );
  }
	.roarr-section[class][class]:is(
    .is-style-roarr-footprints-right-3,
    .is-style-roarr-footprints-left-3,
    .is-style-roarr-footprints-edge-2,
    .is-style-roarr-footprints-long-4
  ) {
    --roarr-footprint-size: 46px;
    --roarr-footprint-edge-inset: 5%;
    --roarr-footprint-stride: 32px;
    --roarr-footprint-trail-height: calc(var(--roarr-footprint-size) + var(--roarr-footprint-stride));
    padding-bottom: max(var(--section-padding-tablet), calc(var(--roarr-footprint-trail-height) + var(--space-24)));
  }
	.roarr-section[class][class].is-style-roarr-footprints-right-3 {
    background-image:
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--paper-cream);
    background-repeat: no-repeat, no-repeat, repeat;
    background-size:
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      auto;
    background-position:
      right var(--roarr-footprint-edge-inset) bottom calc(var(--roarr-footprint-break-lift) + 8px),
      right var(--roarr-footprint-lane-offset) bottom calc(var(--roarr-footprint-break-lift) + var(--roarr-footprint-stride) + 8px),
      0 0;
  }
	.roarr-section[class][class].is-style-roarr-footprints-edge-2 {
    background-image:
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--paper-cream);
    background-repeat: no-repeat, no-repeat, repeat;
    background-size:
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      auto;
    background-position:
      right var(--roarr-footprint-edge-inset) bottom calc(var(--roarr-footprint-break-lift) + 8px),
      right var(--roarr-footprint-lane-offset) bottom calc(var(--roarr-footprint-break-lift) + var(--roarr-footprint-stride) + 8px),
      0 0;
  }
	.roarr-section[class][class]#dietary.is-style-roarr-footprints-long-4 {
    --roarr-footprint-size: 54px;
    --roarr-footprint-trail-height: calc(164px + var(--roarr-footprint-size));
    background-image:
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--paper-cream);
    background-repeat: no-repeat, no-repeat, no-repeat, repeat;
    background-size:
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      auto;
    background-position:
      right 8% bottom calc(var(--roarr-footprint-break-lift) + 164px),
      right 22% bottom calc(var(--roarr-footprint-break-lift) + 88px),
      right 10% bottom calc(var(--roarr-footprint-break-lift) + 12px),
      0 0;
  }
	.roarr-section[class][class][class].is-style-roarr-footprints-cream-run-middle,
  .editor-styles-wrapper .roarr-section[class][class]:is(
    .is-style-roarr-section-cream,
    .is-style-roarr-section-parchment,
    .is-style-roarr-bg-cream,
    .is-style-roarr-bg-parchment,
    .is-style-roarr-footprints-right-3,
    .is-style-roarr-footprints-left-3,
    .is-style-roarr-footprints-edge-2,
    .is-style-roarr-footprints-long-4
  ):has(+ .roarr-section:is(
    .is-style-roarr-section-cream,
    .is-style-roarr-section-parchment,
    .is-style-roarr-bg-cream,
    .is-style-roarr-bg-parchment,
    .is-style-roarr-footprints-right-3,
    .is-style-roarr-footprints-left-3,
    .is-style-roarr-footprints-edge-2,
    .is-style-roarr-footprints-long-4
  )) {
    padding-bottom: var(--section-padding-tablet);
  }
	.roarr-section[class][class][class].roarr-footprints--cream-run-middle,
  .editor-styles-wrapper .roarr-section[class][class]:is(
    .is-style-roarr-bg-cream,
    .is-style-roarr-bg-parchment,
    .is-style-roarr-bg-cream,
    .is-style-roarr-bg-parchment,
    .roarr-footprints--right-3,
    .roarr-footprints--left-3,
    .roarr-footprints--edge-2,
    .roarr-footprints--long-4
  ):has(+ .roarr-section:is(
    .is-style-roarr-bg-cream,
    .is-style-roarr-bg-parchment,
    .is-style-roarr-bg-cream,
    .is-style-roarr-bg-parchment,
    .roarr-footprints--right-3,
    .roarr-footprints--left-3,
    .roarr-footprints--edge-2,
    .roarr-footprints--long-4
  )) {
    padding-bottom: var(--section-padding-tablet);
  }
	.roarr-section[class][class][class].is-style-roarr-footprints-cream-run-middle:is(
    .is-style-roarr-section-compact,
    .is-style-roarr-section-compact,
    .roarr-store-compact
  ) {
    padding-bottom: var(--section-padding-compact-tablet);
  }
	:is(
    .roarr-section[class][class][class].is-style-roarr-footprints-cream-run-end,
    .editor-styles-wrapper .roarr-section[class][class]:is(
      .is-style-roarr-section-cream,
      .is-style-roarr-section-parchment,
      .is-style-roarr-bg-cream,
      .is-style-roarr-bg-parchment,
      .is-style-roarr-footprints-right-3,
      .is-style-roarr-footprints-left-3,
      .is-style-roarr-footprints-edge-2,
      .is-style-roarr-footprints-long-4
    ):not(:is(
      .roarr-footprints-plan-4,
      .roarr-home-ticket-section,
      :where(#home-attractions)
    )):not(:has(+ .roarr-section:is(
      .is-style-roarr-section-cream,
      .is-style-roarr-section-parchment,
      .is-style-roarr-bg-cream,
      .is-style-roarr-bg-parchment,
      .is-style-roarr-footprints-right-3,
      .is-style-roarr-footprints-left-3,
      .is-style-roarr-footprints-edge-2,
      .is-style-roarr-footprints-long-4
    )))
  ) {
    --roarr-footprint-size: 54px;
    --roarr-footprint-trail-height: calc(164px + var(--roarr-footprint-size));
    background-image:
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--paper-cream);
    background-repeat: no-repeat, no-repeat, no-repeat, repeat;
    background-size:
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      auto;
    background-position:
      right 8% bottom calc(var(--roarr-footprint-break-lift) + 164px),
      right 22% bottom calc(var(--roarr-footprint-break-lift) + 88px),
      right 10% bottom calc(var(--roarr-footprint-break-lift) + 12px),
      0 0;
  }
	:is(
    .roarr-section[class][class][class].roarr-footprints--cream-run-end,
    .editor-styles-wrapper .roarr-section[class][class]:is(
      .is-style-roarr-bg-cream,
      .is-style-roarr-bg-parchment,
      .is-style-roarr-bg-cream,
      .is-style-roarr-bg-parchment,
      .roarr-footprints--right-3,
      .roarr-footprints--left-3,
      .roarr-footprints--edge-2,
      .roarr-footprints--long-4
    ):not(:is(
      .roarr-footprints-plan-4,
      .roarr-home-ticket-section,
      :where(#home-attractions)
    )):not(:has(+ .roarr-section:is(
      .is-style-roarr-bg-cream,
      .is-style-roarr-bg-parchment,
      .is-style-roarr-bg-cream,
      .is-style-roarr-bg-parchment,
      .roarr-footprints--right-3,
      .roarr-footprints--left-3,
      .roarr-footprints--edge-2,
      .roarr-footprints--long-4
    )))
  ) {
    --roarr-footprint-size: 54px;
    --roarr-footprint-trail-height: calc(164px + var(--roarr-footprint-size));
    background-image:
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--roarr-footprint),
      var(--paper-cream);
    background-repeat: no-repeat, no-repeat, no-repeat, repeat;
    background-size:
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      var(--roarr-footprint-size) auto,
      auto;
    background-position:
      right 8% bottom calc(var(--roarr-footprint-break-lift) + 164px),
      right 22% bottom calc(var(--roarr-footprint-break-lift) + 88px),
      right 10% bottom calc(var(--roarr-footprint-break-lift) + 12px),
      0 0;
  }
}

@media(max-width: 800px) {
	.is-style-roarr-numbered-section-with-aside {
		grid-template-columns: 1fr;
	}
}

@media(hover: none) and (pointer: coarse) {
	.is-style-roarr-rate-table-clickable tbody tr:focus-within {
		box-shadow: none;
	}
}

@media(max-width: 640px) {
	.is-style-roarr-rate-table-opening-times {
		display: block;
		table-layout: auto;
	}
}

@media(max-width: 360px) {
	.is-style-roarr-rate-table-day-admission.is-style-roarr-rate-table-stacked tbody th,
	.is-style-roarr-rate-table-day-admission.is-style-roarr-rate-table-stacked tbody td,
	.is-style-roarr-rate-table-day-admission.is-style-roarr-rate-table-stacked .is-price {
		font-size: var(--text-xs);
	}
}

@media(min-width: 1200px) {
	.is-style-roarr-split-rates {
		grid-template-columns: minmax(0, 1.45fr) minmax(calc(var(--space-120) * 3), 0.95fr);
		column-gap: clamp(var(--space-40), 4vw, var(--space-56));
		row-gap: var(--space-24);
		align-items: start;
		grid-template-rows: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
	}
	.is-style-roarr-split-rates > .roarr-split__heading {
		grid-column: 1;
		grid-row: 2;
		align-self: center;
	}
	.is-style-roarr-split-rates > .roarr-split__lead {
		grid-column: 1;
		grid-row: 3;
	}
	.is-style-roarr-split-rates .roarr-split__content {
		grid-column: 1;
		grid-row: 4;
		margin-top: 0;
	}
	.is-style-roarr-split-rates .roarr-split__media {
		grid-column: 2;
		grid-row: 1 / span 5;
		align-self: center;
		margin-top: 0;
		padding-left: clamp(var(--space-32), 3vw, var(--space-48));
		border-left: 1px solid var(--border-light);
	}
	.is-style-roarr-split-rates-flip {
		grid-template-columns: minmax(calc(var(--space-120) * 3), 0.95fr) minmax(0, 1.45fr);
		grid-template-rows: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
	}
	.is-style-roarr-split-rates-flip > .roarr-split__heading,
	.is-style-roarr-split-rates-flip > .roarr-split__lead {
		grid-column: 2;
	}
	.is-style-roarr-split-rates-flip .roarr-split__content {
		grid-column: 2;
	}
	.is-style-roarr-split-rates-flip .roarr-split__media {
		grid-column: 1;
		grid-row: 1 / span 5;
		padding-left: 0;
		padding-right: clamp(var(--space-32), 3vw, var(--space-48));
		border-left: 0;
		border-right: 1px solid var(--border-light);
	}
	.is-style-roarr-split-rates .roarr-split__media .roarr-rate-actions {
		justify-content: center;
	}
	.whats-open-calendar-section .is-style-roarr-split-rates {
    grid-template-columns: minmax(0, 1.8fr) minmax(calc(var(--space-120) * 3), 0.9fr);
  }
	.whats-open-page .whats-open-calendar-section .is-style-roarr-split-rates .roarr-split__content {
    align-self: center;
    margin-top: 0;
  }
}

@media(max-width: 1023px) {
	:is(body.home .roarr-site-main, .editor-styles-wrapper)
		.roarr-section
		> .roarr-split.is-style-roarr-split-media-hero:has(.roarr-glance-list)
		.roarr-split__content
		> :is(h1, h2, p) {
		justify-self: center;
		margin-inline: auto;
		text-align: center;
	}
	.is-style-roarr-split-map .roarr-split__content > :is(ul, ol, .roarr-glance-list) {
		order: 4;
	}
	.is-style-roarr-split-map .roarr-split__content > :is(.roarr-button-row, .roarr-action-row),
	.is-style-roarr-split-map .roarr-split__content > :has(> :is(.roarr-button-row, .roarr-action-row)) {
		order: 5;
	}
}

@media(min-width: 1280px) {
	.roarr-ticket-card__body,
	.is-style-roarr-ticket-card-exclusive-adventure .roarr-ticket-card__body {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		column-gap: var(--space-8);
	}
}

@media(max-width: 1279px) {
	.is-style-roarr-ticket-card-annual-pass,
	.is-style-roarr-ticket-card-exclusive-adventure {
		--ticket-card-visual-inline: clamp(var(--space-96), 49cqi, calc(var(--space-112) + var(--space-8)));
	}
}

/* -- gutenberg-raw-bridge.css (hand-maintained shared WP bridge) -- */
/**
 * Shared raw-Gutenberg bridge.
 *
 * The mock CSS targets the frontend adapter DOM. The full WordPress frontend
 * and editor canvas receive saved core block markup, so these rules map that
 * flatter markup back onto the same visual contract.
 */

/* -- About: native Gutenberg timeline ------------------------------------
 * The saved page keeps each milestone as a flat core/group. Give that native
 * anatomy the same strong visual hierarchy as the adapter timeline: tactile
 * paper cards over the dark texture, branded year nodes and a connecting
 * rail. The rail scrolls horizontally at every width, with tighter mandatory
 * snapping and a next-card peek on phones. */
:is(.roarr-site-main, .editor-styles-wrapper) #milestones .roarr-timeline {
	position: relative;
	display: grid;
	grid-auto-columns: minmax(min(78vw, calc(var(--space-120) * 2 + var(--space-48))), 1fr);
	grid-auto-flow: column;
	align-items: stretch;
	gap: var(--space-24);
	min-width: 0;
	margin-block-start: var(--space-48);
	padding: var(--space-32) var(--space-8) var(--space-24);
	overflow-x: auto;
	overflow-y: visible;
	overscroll-behavior-inline: contain;
	scroll-padding-inline: var(--space-8);
	scroll-snap-type: inline proximity;
	scrollbar-color: color-mix(in srgb, var(--jungle-green) 82%, var(--cream)) color-mix(in srgb, var(--deep-forest) 64%, transparent);
	scrollbar-width: thin;
}

:is(.roarr-site-main, .editor-styles-wrapper) #milestones .roarr-timeline::-webkit-scrollbar {
	height: var(--space-8);
}

:is(.roarr-site-main, .editor-styles-wrapper) #milestones .roarr-timeline::-webkit-scrollbar-track {
	border-radius: var(--radius-pill);
	background: color-mix(in srgb, var(--deep-forest) 64%, transparent);
}

:is(.roarr-site-main, .editor-styles-wrapper) #milestones .roarr-timeline::-webkit-scrollbar-thumb {
	border-radius: var(--radius-pill);
	background: color-mix(in srgb, var(--jungle-green) 82%, var(--cream));
}

:is(.roarr-site-main, .editor-styles-wrapper) #milestones .roarr-timeline-item {
	--timeline-accent: var(--primary);
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 100%;
	margin: 0;
	padding: var(--space-40) var(--space-24) var(--space-24);
	border: 1px solid color-mix(in srgb, var(--timeline-accent) 44%, var(--border-light));
	border-top: var(--space-8) solid var(--timeline-accent);
	border-radius: var(--radius-lg);
	background-color: var(--card-on-light);
	background-image:
		linear-gradient(145deg, color-mix(in srgb, var(--timeline-accent) 8%, transparent), transparent 62%),
		var(--paper-cream);
	background-blend-mode: multiply;
	box-shadow:
		0 var(--space-16) var(--space-32) color-mix(in srgb, var(--deep-forest) 42%, transparent),
		inset 0 1px 0 color-mix(in srgb, var(--white) 80%, transparent);
	color: var(--text-primary);
	scroll-snap-align: start;
}

:is(.roarr-site-main, .editor-styles-wrapper) #milestones .roarr-timeline-item:nth-child(3n + 2) {
	--timeline-accent: var(--amber);
}

:is(.roarr-site-main, .editor-styles-wrapper) #milestones .roarr-timeline-item:nth-child(3n) {
	--timeline-accent: var(--yellow);
}

:is(.roarr-site-main, .editor-styles-wrapper) #milestones .roarr-timeline-item::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: calc(var(--space-12) * -1);
	left: 0;
	right: calc(var(--space-24) * -1);
	height: var(--space-4);
	border-radius: var(--radius-pill);
	background: linear-gradient(90deg, var(--timeline-accent), var(--jungle-green));
	box-shadow: 0 0 var(--space-12) color-mix(in srgb, var(--jungle-green) 40%, transparent);
}

:is(.roarr-site-main, .editor-styles-wrapper) #milestones .roarr-timeline-item:last-child::before {
	right: 50%;
}

:is(.roarr-site-main, .editor-styles-wrapper) #milestones .roarr-timeline-item > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

:is(.roarr-site-main, .editor-styles-wrapper) #milestones .roarr-timeline-item > .roarr-timeline-year {
	position: absolute;
	z-index: 1;
	top: calc((var(--space-32) + var(--space-4)) * -1);
	left: var(--space-24);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: calc(var(--space-64) + var(--space-16));
	min-height: var(--space-48);
	padding-inline: var(--space-16);
	border: var(--space-4) solid var(--deep-forest);
	border-radius: var(--radius-pill);
	background: var(--timeline-accent);
	box-shadow:
		0 var(--space-8) var(--space-16) color-mix(in srgb, var(--deep-forest) 46%, transparent),
		0 0 0 var(--space-4) color-mix(in srgb, var(--timeline-accent) 28%, transparent);
	color: var(--deep-forest);
	font-family: var(--font-heading);
	font-size: var(--h3);
	font-weight: var(--weight-heavy);
	line-height: var(--lh-solid);
	letter-spacing: 0.02em;
}

:is(.roarr-site-main, .editor-styles-wrapper) #milestones .roarr-timeline-item > h3 {
	margin-block-end: var(--space-12);
	color: var(--deep-forest);
	font-family: var(--font-heading);
	font-size: var(--h3);
	font-weight: var(--weight-heavy);
	line-height: var(--lh-tight);
	text-wrap: balance;
}

:is(.roarr-site-main, .editor-styles-wrapper) #milestones .roarr-timeline-item > p:not(.roarr-timeline-year) {
	color: var(--text-secondary);
	font-size: var(--text-base);
	line-height: var(--lh-relaxed);
}

@media (max-width: 639px) {
	:is(.roarr-site-main, .editor-styles-wrapper) #milestones .roarr-timeline {
		grid-auto-columns: min(76vw, calc(var(--space-120) * 2 + var(--space-32)));
		grid-auto-flow: column;
		grid-template-columns: none;
		gap: var(--space-16);
		margin-block-start: var(--space-32);
		padding: var(--space-32) var(--space-8) var(--space-24);
		overflow-x: auto;
		overflow-y: hidden;
		scroll-padding-inline: var(--space-8);
		scroll-snap-type: inline mandatory;
		-webkit-overflow-scrolling: touch;
	}

	:is(.roarr-site-main, .editor-styles-wrapper) #milestones .roarr-timeline-item {
		scroll-snap-stop: always;
	}

	:is(.roarr-site-main, .editor-styles-wrapper) #milestones .roarr-timeline-item::before {
		right: calc(var(--space-16) * -1);
	}
}

/* -- Home: desktop event-card composition --------------------------------
 * Keep the feature artwork at a dependable marketing ratio instead of
 * flattening it according to viewport height. Supporting cards use one
 * slightly wider ratio, while the section spacing keeps the controls clear of
 * the brush and skyline artwork. Saved media and block attributes are left
 * untouched; images continue to use the component's object-fit crop. */
@media (min-width: 1024px) {
	:where(.roarr-site-main, .editor-styles-wrapper) .roarr-event-band {
		padding-top: calc(var(--space-112) + var(--space-24));
		padding-bottom: var(--space-32);
	}

	:where(.roarr-site-main, .editor-styles-wrapper)
		.roarr-event-band.roarr-section--break-after-skyline {
		padding-bottom: var(--skyline-h);
	}

	:where(.roarr-site-main, .editor-styles-wrapper) .roarr-event-carousel {
		--ev-gap: var(--space-12);
		max-width: min(
			calc(var(--container-width) - var(--space-96) * 2),
			clamp(800px, 100svh, 1048px)
		);
	}

	:where(.roarr-site-main, .editor-styles-wrapper) .roarr-event-card--feature {
		height: auto;
		aspect-ratio: 2 / 1;
	}

	:where(.roarr-site-main, .editor-styles-wrapper)
		.roarr-event-carousel__track > .roarr-event-card {
		height: auto;
		aspect-ratio: 2.2 / 1;
	}

	:where(.roarr-site-main, .editor-styles-wrapper)
		.roarr-event-carousel__controls {
		margin-top: var(--space-12);
	}
}

/* -- Attraction image cards -- flat Gutenberg bridge ---------------------
 * The design component renders `img + .roarr-image-card__body`, while the
 * native core-block composition saves a figure, meta paragraph, heading,
 * description and optional core/buttons as flat siblings. Recreate the same
 * bottom overlay without hiding the real core/image block from Gutenberg.
 * Public cards retain the mock's title-first hover reveal; the editor-only
 * visibility reset lives in editor-overrides.css so every field stays usable
 * while authoring. */
:is(.roarr-site-main, .editor-styles-wrapper) .roarr-image-card:has(> .wp-block-image) {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0;
	align-items: stretch;
	justify-content: flex-end;
	isolation: isolate;
	padding: var(--space-24) var(--space-24) var(--space-8);
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-image-card:has(> .wp-block-image) > .wp-block-image {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-image-card:has(> .wp-block-image) > .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-image-card:has(> .wp-block-image)::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	z-index: 1;
	height: 40%;
	background: linear-gradient(
		180deg,
		transparent 0%,
		color-mix(in srgb, var(--deep-forest) 18%, transparent) 38%,
		color-mix(in srgb, var(--deep-forest) 74%, transparent) 100%
	);
	pointer-events: none;
	transition: opacity 0.32s var(--ease);
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-image-card:has(> .wp-block-image) > :is(h3, .wp-block-heading, p, .wp-block-paragraph, .wp-block-buttons) {
	position: relative;
	z-index: 2;
	align-self: center;
	width: 100%;
	margin-block-start: 0;
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-image-card:has(> .wp-block-image) > .wp-block-buttons {
	justify-content: center;
}

.roarr-site-main .roarr-image-card:has(> .wp-block-image) > .roarr-image-card__meta {
	display: none;
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-image-card:has(> .wp-block-image) .roarr-image-card__cta .wp-block-button__link {
	min-height: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--primary);
	font-size: var(--text-sm);
	font-weight: var(--weight-heavy);
	line-height: var(--lh-relaxed);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.roarr-site-main .roarr-image-card:has(> .wp-block-image) > .wp-block-buttons {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transform: translateY(var(--space-8));
	transition: max-height 0.36s var(--ease), opacity 0.28s ease-out, transform 0.36s var(--ease);
}

.roarr-site-main .roarr-image-card:has(> .wp-block-image):is(:hover, :focus-within, .is-scroll-active) {
	gap: var(--space-8);
}

.roarr-site-main .roarr-image-card:has(> .wp-block-image):is(:hover, :focus-within, .is-scroll-active)::after {
	opacity: 1;
}

.roarr-site-main .roarr-image-card:has(> .wp-block-image):is(:hover, :focus-within, .is-scroll-active) > .wp-block-buttons {
	max-height: calc(var(--space-64) + var(--space-32));
	opacity: 1;
	transform: translateY(0);
}

.roarr-site-main .roarr-image-card:has(> .wp-block-image):is(:hover, :focus-within, .is-scroll-active) > p,
.roarr-site-main .roarr-image-card:has(> .wp-block-image):is(:hover, :focus-within, .is-scroll-active) .roarr-image-card__cta {
	max-height: calc(var(--space-64) + var(--space-32));
	opacity: 1;
	transform: translateY(0);
}

.roarr-ticket-card-grid {
	align-items: stretch;
}

.roarr-ticket-card {
	grid-template-columns: minmax(0, 1fr) minmax(var(--ticket-card-visual-inline), 52%);
	grid-template-rows: auto auto auto 1fr auto;
	grid-template-areas:
		"title title"
		"copy copy"
		"eyebrow visual"
		"value visual"
		"link visual";
	align-items: end;
	row-gap: var(--space-8);
	column-gap: var(--space-8);
	height: 100%;
}

.roarr-ticket-card > :is(h2, h3),
.roarr-ticket-card > .wp-block-heading {
	grid-area: title;
	margin: 0;
	width: 100%;
	max-width: none;
	color: var(--text-primary);
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: var(--weight-heavy);
	line-height: var(--lh-snug);
	text-align: center;
	text-transform: uppercase;
	text-wrap: balance;
}

.roarr-ticket-card > .roarr-ticket-card__price-eyebrow {
	grid-area: eyebrow;
	justify-self: start;
	align-self: end;
	margin: 0;
	color: var(--text-primary);
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: var(--weight-heavy);
	line-height: var(--lh-solid);
	text-align: left;
	text-transform: uppercase;
}

.roarr-ticket-card > .roarr-ticket-card__price-value {
	grid-area: value;
	justify-self: start;
	align-self: start;
	margin: 0;
	max-width: 10ch;
	color: var(--amber);
	font-family: var(--font-heading);
	font-size: clamp(var(--text-lg), 1.75vw, var(--text-xl));
	font-weight: var(--weight-heavy);
	line-height: var(--lh-solid);
	text-align: left;
	text-transform: uppercase;
	text-wrap: balance;
}

.roarr-ticket-card > .wp-block-buttons {
	grid-area: link;
	justify-self: start;
	align-self: end;
	margin: 0;
}

.roarr-ticket-card .roarr-ticket-card__link .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	padding: 0;
	background: none;
	border: none;
	color: var(--primary);
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: var(--weight-heavy);
	line-height: var(--lh-snug);
	text-transform: uppercase;
	white-space: nowrap;
}

.roarr-ticket-card .roarr-ticket-card__link .wp-block-button__link::after {
	content: none;
}

.roarr-ticket-card > .wp-block-image {
	grid-area: visual;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	justify-self: end;
	align-self: end;
	min-width: 0;
	inline-size: var(--ticket-card-visual-inline);
	block-size: var(--ticket-card-visual-size);
	margin: 0 var(--ticket-card-visual-shift-x) var(--ticket-card-visual-shift-y) 0;
	overflow: visible;
	pointer-events: none;
}

.roarr-ticket-card > .wp-block-image img {
	--ticket-asset-max-width: 118%;
	--ticket-asset-max-height: 118%;
	--ticket-asset-x: 0px;
	--ticket-asset-y: 0px;
	--ticket-asset-rotate: 0deg;
	--ticket-asset-scale: 1;
	--ticket-asset-origin: 50% 50%;
	display: block;
	width: auto;
	height: auto;
	max-width: var(--ticket-asset-max-width);
	max-height: var(--ticket-asset-max-height);
	object-fit: contain;
	object-position: right bottom;
	pointer-events: none;
	transform: translate(var(--ticket-asset-x), var(--ticket-asset-y)) rotate(var(--ticket-asset-rotate)) scale(var(--ticket-asset-scale));
	transform-origin: var(--ticket-asset-origin);
}

.roarr-ticket-card > .is-style-roarr-ticket-asset-dino img,
.roarr-ticket-card.is-style-roarr-ticket-asset-dino > .wp-block-image img {
	--ticket-asset-max-width: 146%;
	--ticket-asset-max-height: 132%;
	--ticket-asset-x: clamp(10px, 5.65cqi, 14px);
	--ticket-asset-y: clamp(8px, 4.03cqi, 10px);
	--ticket-asset-scale: 0.83;
}

.roarr-ticket-card > .is-style-roarr-ticket-asset-hatchling img,
.roarr-ticket-card.is-style-roarr-ticket-asset-hatchling > .wp-block-image img {
	--ticket-asset-max-width: 146%;
	--ticket-asset-max-height: 132%;
	--ticket-asset-x: clamp(-6px, -2.42cqi, -4px);
	--ticket-asset-y: clamp(24px, 14.92cqi, 37px);
	--ticket-asset-scale: 0.81;
}

.roarr-ticket-card > .is-style-roarr-ticket-asset-school img,
.roarr-ticket-card.is-style-roarr-ticket-asset-school > .wp-block-image img {
	--ticket-asset-max-width: 122%;
	--ticket-asset-max-height: 128%;
	--ticket-asset-x: -62px;
	--ticket-asset-y: -68px;
	--ticket-asset-scale: 1.6;
	margin-right: calc(var(--space-64) * -1);
	margin-bottom: calc(var(--space-40) * -1);
}

.roarr-ticket-card > .is-style-roarr-ticket-asset-pass img,
.roarr-ticket-card.is-style-roarr-ticket-asset-pass > .wp-block-image img {
	--ticket-asset-max-width: 92%;
	--ticket-asset-x: -22px;
	--ticket-asset-y: 19px;
	--ticket-asset-rotate: -7deg;
	--ticket-asset-scale: 1.49;
	--ticket-asset-origin: 54% 58%;
	margin-right: var(--space-8);
	margin-bottom: var(--space-8);
}

.roarr-ticket-card.is-style-roarr-ticket-annual-pass,
.roarr-ticket-card.is-style-roarr-ticket-exclusive-adventure {
	--ticket-card-visual-inline: clamp(var(--space-112), 61.3cqi, calc(var(--space-128) + var(--space-24)));
}

.roarr-ticket-card.is-style-roarr-ticket-exclusive-adventure {
	gap: 0;
}

.roarr-ticket-card.is-style-roarr-ticket-exclusive-adventure > .wp-block-image {
	align-items: flex-start;
	padding-top: var(--space-16);
}

@media (min-width: 768px) {
	.roarr-ticket-card > .roarr-ticket-card__price-value.is-style-roarr-ticket-price-enquiry {
		font-size: var(--text-xl);
		line-height: var(--lh-tight);
	}
}

@media (min-width: 1280px) {
	.roarr-ticket-card,
	.roarr-ticket-card.is-style-roarr-ticket-exclusive-adventure,
	.roarr-ticket-card.is-style-roarr-ticket-card-exclusive-adventure {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		column-gap: var(--space-8);
	}
}

@media (max-width: 1279px) {
	.roarr-ticket-card.is-style-roarr-ticket-annual-pass,
	.roarr-ticket-card.is-style-roarr-ticket-exclusive-adventure {
		--ticket-card-visual-inline: clamp(var(--space-96), 49cqi, calc(var(--space-112) + var(--space-8)));
	}

	.roarr-ticket-card > .is-style-roarr-ticket-asset-dino img,
	.roarr-ticket-card.is-style-roarr-ticket-asset-dino > .wp-block-image img {
		--ticket-asset-x: clamp(8px, 4.5cqi, 11px);
		--ticket-asset-y: clamp(6px, 3.2cqi, 8px);
	}

	.roarr-ticket-card > .is-style-roarr-ticket-asset-hatchling img,
	.roarr-ticket-card.is-style-roarr-ticket-asset-hatchling > .wp-block-image img {
		--ticket-asset-x: clamp(-5px, -1.9cqi, -3px);
		--ticket-asset-y: clamp(19px, 11.9cqi, 30px);
	}

	.roarr-ticket-card > .is-style-roarr-ticket-asset-school img,
	.roarr-ticket-card.is-style-roarr-ticket-asset-school > .wp-block-image img {
		--ticket-asset-x: -50px;
		--ticket-asset-y: -54px;
		margin-right: calc(var(--space-48) * -1);
		margin-bottom: calc(var(--space-32) * -1);
	}

	.roarr-ticket-card > .is-style-roarr-ticket-asset-pass img,
	.roarr-ticket-card.is-style-roarr-ticket-asset-pass > .wp-block-image img {
		--ticket-asset-x: -18px;
		--ticket-asset-y: 15px;
		margin-right: var(--space-8);
		margin-bottom: var(--space-8);
	}
}

@media (max-width: 639px) {
	.roarr-ticket-card {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"title"
			"copy"
			"visual"
			"eyebrow"
			"value"
			"link";
		justify-items: center;
		text-align: center;
	}

	.roarr-ticket-card > :is(h2, h3),
	.roarr-ticket-card > .wp-block-heading,
	.roarr-ticket-card > .roarr-ticket-card__copy,
	.roarr-ticket-card > .roarr-ticket-card__price-eyebrow,
	.roarr-ticket-card > .roarr-ticket-card__price-value,
	.roarr-ticket-card > .wp-block-buttons {
		justify-self: center;
		max-width: 100%;
		min-width: 0;
		text-align: center;
		overflow-wrap: anywhere;
	}

	.roarr-ticket-card > .wp-block-image,
	.roarr-ticket-card.is-style-roarr-ticket-exclusive-adventure > .wp-block-image {
		justify-self: center;
		align-self: end;
		align-items: flex-end;
		justify-content: center;
		inline-size: clamp(var(--space-96), 64cqi, calc(var(--space-112) + var(--space-16)));
		block-size: clamp(var(--space-96), 64cqi, calc(var(--space-112) + var(--space-16)));
		margin: 0;
		padding-top: 0;
		transform: none;
	}

	.roarr-ticket-card > .wp-block-image img {
		--ticket-asset-x: 0px;
		--ticket-asset-y: 0px;
		--ticket-asset-rotate: 0deg;
		--ticket-asset-scale: 1;
		--ticket-asset-max-width: 100%;
		--ticket-asset-max-height: 100%;
		margin: 0;
		object-position: center bottom;
	}

	.roarr-ticket-card > .is-style-roarr-ticket-asset-dino img,
	.roarr-ticket-card.is-style-roarr-ticket-asset-dino > .wp-block-image img {
		--ticket-asset-y: 1px;
		--ticket-asset-scale: 1.03;
	}

	.roarr-ticket-card > .is-style-roarr-ticket-asset-school img,
	.roarr-ticket-card.is-style-roarr-ticket-asset-school > .wp-block-image img {
		--ticket-asset-x: var(--ticket-terry-phone-x);
		--ticket-asset-y: var(--ticket-terry-phone-y);
		--ticket-asset-scale: var(--ticket-terry-phone-scale);
		--ticket-asset-origin: 50% 100%;
	}

	.roarr-ticket-card > .is-style-roarr-ticket-asset-hatchling img,
	.roarr-ticket-card.is-style-roarr-ticket-asset-hatchling > .wp-block-image img {
		--ticket-asset-x: -3px;
		--ticket-asset-y: 7px;
		--ticket-asset-scale: 1.2;
	}

	.roarr-ticket-card > .is-style-roarr-ticket-asset-pass img,
	.roarr-ticket-card.is-style-roarr-ticket-asset-pass > .wp-block-image img {
		--ticket-asset-x: 4px;
		--ticket-asset-y: 1px;
		--ticket-asset-rotate: -7deg;
		--ticket-asset-scale: 1.22;
	}
}

/* -- Rail cards -- flat Gutenberg bridge --------------------------------
 * Saved markup is core/group.roarr-rail-card > [ roarr/icon .roarr-icon,
 * core/heading h4, core/paragraph p ] -- no __icon/__body wrappers, so the
 * BEM rules in split-rates.css (targeting .roarr-rail-card__icon/__body)
 * never match; the paragraph auto-places into the narrow icon column and
 * wraps one word per line. Re-target the flat children onto the mock's
 * icon | body card (design-reference/mocks/pricing.html 108-136). */
.roarr-rail-cards__grid {
	align-items: stretch;
}
.roarr-rail-cards__grid > .roarr-rail-card {
	margin: 0;
}
.roarr-rail-card {
	grid-template-columns: var(--icon-badge-size-xl) minmax(0, 1fr);
	grid-template-rows: auto auto;
	align-self: stretch;
	align-content: center;
	justify-self: stretch;
	column-gap: var(--space-16);
	row-gap: var(--space-8);
	width: 100%;
	height: 100%;
	padding: var(--card-padding-tablet);
}
.roarr-rail-card > :is(.roarr-icon, .roarr-icon-edit, [data-type="roarr/icon"]) {
	grid-column: 1;
	grid-row: 1 / -1;
	align-self: center;
	display: inline-grid;
	place-items: center;
	width: var(--icon-badge-size-xl);
	height: var(--icon-badge-size-xl);
	border: 0;
	border-radius: var(--radius-sm);
	background: color-mix(in srgb, var(--primary) 11%, var(--card-on-light));
	box-shadow: none;
	color: var(--primary-dark);
}
.roarr-rail-card > :is(.roarr-icon, .roarr-icon-edit, [data-type="roarr/icon"]) .roarr-generated-icon {
	width: var(--icon-art-size-xl);
	height: var(--icon-art-size-xl);
}
.roarr-rail-card > .wp-block-heading {
	grid-column: 2;
	grid-row: 1;
	align-self: end;
	margin: 0;
	color: var(--text-primary);
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	line-height: var(--lh-tight);
}
.roarr-rail-card > .wp-block-paragraph,
.roarr-rail-card > p {
	grid-column: 2;
	grid-row: 2;
	align-self: start;
	margin: 0;
	color: var(--text-secondary);
	font-size: var(--text-xs);
	font-weight: var(--weight-regular);
	line-height: var(--lh-normal);
}

/* -- Split rates -- flat Gutenberg class bridge ---------------------------
 * The block variation saves `roarr-split-rates`; the mock/frontend block CSS
 * owns `.roarr-split--rates`. Keep the saved class working without forcing
 * page content rewrites. */
:is(.roarr-site-main, .editor-styles-wrapper) .roarr-split-rates {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-24);
	align-items: start;
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-split-rates > .roarr-split__heading {
	font-size: var(--h2);
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-split-rates > .roarr-split__heading em {
	color: var(--primary);
	font-style: normal;
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-split-rates > .roarr-split__lead {
	max-width: calc(var(--space-120) * 6);
	margin: 0;
	color: var(--text-primary);
	font-size: var(--text-lg);
	font-weight: var(--weight-medium);
	line-height: var(--lh-relaxed);
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-split-rates .roarr-split__content {
	gap: var(--space-24);
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-split-rates .roarr-split__media {
	display: grid;
	gap: var(--space-24);
	align-content: start;
	width: 100%;
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-split-rates .roarr-rate-actions {
	align-items: stretch;
	justify-content: center;
	margin: 0;
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-split-rates .roarr-rate-actions .wp-block-button,
:is(.roarr-site-main, .editor-styles-wrapper) .roarr-split-rates .roarr-rate-actions .wp-block-button__link {
	width: 100%;
	min-width: 0;
}

@media (min-width: 1200px) {
	:is(.roarr-site-main, .editor-styles-wrapper) .roarr-split-rates {
		grid-template-columns: minmax(0, 1.15fr) minmax(calc(var(--space-120) * 3 + var(--space-48)), 1fr);
		grid-template-rows: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
		column-gap: clamp(var(--space-32), 3vw, var(--space-48));
		row-gap: var(--space-24);
	}

	:is(.roarr-site-main, .editor-styles-wrapper) .roarr-split-rates > .roarr-split__heading {
		grid-column: 1;
		grid-row: 2;
		align-self: center;
	}

	:is(.roarr-site-main, .editor-styles-wrapper) .roarr-split-rates > .roarr-split__lead {
		grid-column: 1;
		grid-row: 3;
	}

	:is(.roarr-site-main, .editor-styles-wrapper) .roarr-split-rates .roarr-split__content {
		grid-column: 1;
		grid-row: 4;
		margin-top: 0;
	}

	:is(.roarr-site-main, .editor-styles-wrapper) .roarr-split-rates .roarr-split__media {
		grid-column: 2;
		grid-row: 1 / span 5;
		/* Centre the rail within the equal flexible outer rows used by the
		   left-hand heading, lead and rates stack. Reset Gutenberg's logical
		   flow margin as well as the physical top margin; either offset moves
		   the visual centre by half its value. */
		align-self: center;
		margin-block-start: 0 !important;
		margin-top: 0 !important;
		padding-left: var(--space-24);
		border-left: 1px solid var(--border-light);
	}
}

/* -- Core Table rate card --------------------------------------------------
 * Core Table saves a figure > table + figcaption structure, while the mock
 * uses a card wrapper around table > caption. Reorder the editable Core
 * caption visually and apply the same rate-card anatomy without replacing
 * native table controls. Keep the legacy class bridge until saved pages have
 * migrated to the registered ROARR Rate Card block style. */
:is(.roarr-site-main, .editor-styles-wrapper) figure.wp-block-table:is(.roarr-rate-table, .is-style-roarr-rate-card) {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--border-light);
	border-radius: var(--radius-lg);
	background: var(--card-on-light);
	box-shadow: var(--shadow-card-soft);
}

:is(.roarr-site-main, .editor-styles-wrapper) figure.wp-block-table:is(.roarr-rate-table, .is-style-roarr-rate-card) > table {
	order: 2;
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: transparent;
	font-size: var(--text-sm);
}

:is(.roarr-site-main, .editor-styles-wrapper) figure.wp-block-table:is(.roarr-rate-table, .is-style-roarr-rate-card) > figcaption {
	order: 1;
	margin: 0;
	padding: var(--space-24) var(--space-24) var(--space-8);
	color: var(--text-secondary);
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	line-height: var(--lh-normal);
	text-align: center;
}

:is(.roarr-site-main, .editor-styles-wrapper) figure.wp-block-table:is(.roarr-rate-table, .is-style-roarr-rate-card) :is(th, td) {
	padding: var(--space-16) var(--space-24);
	border: 0;
	border-bottom: 1px solid var(--border-light);
	text-align: left;
	vertical-align: middle;
}

:is(.roarr-site-main, .editor-styles-wrapper) figure.wp-block-table:is(.roarr-rate-table, .is-style-roarr-rate-card) thead th {
	padding-bottom: var(--space-16);
	border-bottom-width: 2px;
	color: var(--text-primary);
	font-size: var(--text-xs);
	font-weight: var(--weight-heavy);
	text-transform: uppercase;
	vertical-align: bottom;
}

:is(.roarr-site-main, .editor-styles-wrapper) figure.wp-block-table:is(.roarr-rate-table, .is-style-roarr-rate-card) tbody th {
	color: var(--text-primary);
	font-size: var(--text-base);
	font-weight: var(--weight-bold);
}

:is(.roarr-site-main, .editor-styles-wrapper) figure.wp-block-table:is(.roarr-rate-table, .is-style-roarr-rate-card) :is(td, th):last-child {
	text-align: right;
	white-space: nowrap;
}

:is(.roarr-site-main, .editor-styles-wrapper) figure.wp-block-table:is(.roarr-rate-table, .is-style-roarr-rate-card) strong {
	color: var(--amber);
	font-size: var(--text-xl);
	font-weight: var(--weight-heavy);
	font-variant-numeric: tabular-nums;
}

:is(.roarr-site-main, .editor-styles-wrapper) figure.wp-block-table:is(.roarr-rate-table, .is-style-roarr-rate-card) tbody tr {
	transition: background var(--speed) var(--ease);
}

:is(.roarr-site-main, .editor-styles-wrapper) figure.wp-block-table:is(.roarr-rate-table, .is-style-roarr-rate-card) tbody tr:hover {
	background: color-mix(in srgb, var(--warm-sand) 22%, transparent);
}

:is(.roarr-site-main, .editor-styles-wrapper) figure.wp-block-table:is(.roarr-rate-table, .is-style-roarr-rate-card) tbody tr:last-child > :is(th, td) {
	border-bottom: 0;
}

/* Raw Gutenberg sections have no generated .roarr-section__inner wrapper
 * around a following footnote, so give that editable paragraph the same
 * container contract as the mock's section inner. */
:is(.roarr-site-main, .editor-styles-wrapper) .roarr-section > .roarr-rate-table__note {
	width: min(100% - var(--space-48), var(--container-width));
	margin-inline: auto;
}

@media (min-width: 768px) {
	:is(.roarr-site-main, .editor-styles-wrapper) .roarr-section > .roarr-rate-table__note {
		width: min(100% - var(--space-64), var(--container-width));
	}
}

@media (min-width: 1024px) {
	:is(.roarr-site-main, .editor-styles-wrapper) .roarr-section > .roarr-rate-table__note {
		width: min(100% - var(--space-96), var(--container-width));
	}
}

/* -- Rate table -- flat Gutenberg row bridge -------------------------------
 * Saved markup is a group of .roarr-rate-table__row blocks. Shape those rows
 * like the mock's CTA rate table, while retaining editable core blocks. */
:is(.roarr-site-main, .editor-styles-wrapper) .roarr-split-rates .roarr-rate-table {
	display: grid;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--border-light);
	border-radius: var(--radius-lg);
	background: var(--card-on-light);
	box-shadow: var(--shadow-card-soft);
	font-size: var(--text-base);
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-split-rates .roarr-rate-table__row {
	position: relative;
	display: grid;
	grid-template-columns: var(--icon-badge-size-xl) minmax(0, 1fr) auto;
	grid-template-rows: auto auto;
	align-items: center;
	align-content: center;
	column-gap: var(--space-16);
	row-gap: var(--space-8);
	margin: 0;
	padding: var(--space-16) var(--space-24);
	border-top: 1px solid var(--border-light);
	background: transparent;
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-split-rates .roarr-rate-table__row > * {
	margin: 0;
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-split-rates .roarr-rate-table__row:first-of-type {
	border-top: 0;
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-split-rates .roarr-rate-table__row:nth-child(even) {
	background: color-mix(in srgb, var(--primary) 5%, var(--card-on-light));
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-split-rates .roarr-rate-table__row > :is(.roarr-icon, .roarr-icon-edit, [data-type="roarr/icon"]) {
	grid-column: 1;
	grid-row: 1 / span 2;
	display: inline-grid;
	place-items: center;
	width: var(--icon-badge-size-xl);
	height: var(--icon-badge-size-xl);
	border: 0;
	border-radius: var(--radius-sm);
	background: color-mix(in srgb, var(--primary) 11%, var(--card-on-light));
	box-shadow: none;
	color: var(--primary-dark);
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-split-rates .roarr-rate-table__row > :is(.roarr-icon, .roarr-icon-edit, [data-type="roarr/icon"]) .roarr-generated-icon {
	width: var(--icon-art-size-xl);
	height: var(--icon-art-size-xl);
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-split-rates .roarr-rate-table__title {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	color: var(--text-primary);
	font-family: var(--font-heading);
	font-size: var(--text-base);
	font-weight: var(--weight-bold);
	line-height: var(--lh-tight);
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-split-rates .roarr-rate-table__desc {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
	color: var(--text-secondary);
	font-size: var(--text-xs);
	font-weight: var(--weight-regular);
	line-height: var(--lh-normal);
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-split-rates .roarr-rate-table__row > .wp-block-buttons {
	grid-column: 3;
	grid-row: 1 / span 2;
	align-self: center;
	justify-self: end;
	margin: 0 0 0 var(--space-8);
	gap: 0;
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-split-rates .roarr-rate-table__row > .wp-block-buttons > .wp-block-button {
	margin: 0;
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-split-rates .roarr-rate-table__price .wp-block-button__link {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-8);
	min-height: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--amber);
	font-size: var(--rate-price-size);
	font-weight: var(--weight-heavy);
	line-height: var(--lh-solid);
	text-decoration: none;
	white-space: nowrap;
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-split-rates .roarr-rate-table__price.is-style-roarr-rate-from .wp-block-button__link::before {
	content: "From";
	order: -1;
	color: var(--text-secondary);
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	line-height: var(--lh-solid);
	text-transform: uppercase;
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-split-rates .roarr-rate-table__price .wp-block-button__link::after {
	content: ">";
	display: inline-grid;
	place-items: center;
	flex: 0 0 var(--icon-md);
	width: var(--icon-md);
	height: var(--icon-md);
	margin-left: var(--space-16);
	align-self: center;
	color: var(--text-primary);
	font-size: var(--text-base);
	line-height: var(--lh-solid);
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-split-rates .roarr-split__content > .roarr-rate-table__note,
:is(.roarr-site-main, .editor-styles-wrapper) .roarr-split-rates .roarr-rate-table > .roarr-rate-table__note {
	margin: var(--space-16) 0 0;
	padding-inline: var(--space-24);
	color: var(--text-secondary);
	font-size: var(--text-xs);
	line-height: var(--lh-relaxed);
}

@media (max-width: 767px) {
	:is(.roarr-site-main, .editor-styles-wrapper) .roarr-split-rates .roarr-rate-table__row {
		grid-template-columns: var(--icon-badge-size-xl) minmax(0, 1fr);
	}

	:is(.roarr-site-main, .editor-styles-wrapper) .roarr-split-rates .roarr-rate-table__row > .wp-block-buttons {
		grid-column: 1 / -1;
		grid-row: 3;
		justify-self: end;
	}
}

/* -- Direct roarr/icon children in saved lists -----------------------------
 * The mock has .roarr-glance-list__icon spans; saved Gutenberg content has a
 * roarr/icon block as the first child of each list item. */
:is(.roarr-site-main, .editor-styles-wrapper) .roarr-glance-list li > .roarr-icon {
	order: -1;
	display: inline-grid;
	place-items: center;
	flex: 0 0 var(--icon-badge-size-md);
	width: var(--icon-badge-size-md);
	height: var(--icon-badge-size-md);
	border: 1px solid var(--icon-badge-border);
	border-radius: var(--radius-pill);
	background: var(--icon-badge-bg);
	color: var(--icon-badge-color);
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-glance-list li > .roarr-icon .roarr-ui-icon {
	width: var(--icon-badge-glyph-md);
	height: var(--icon-badge-glyph-md);
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-glance-list li > .roarr-icon .roarr-generated-icon {
	width: var(--icon-art-size-md);
	height: var(--icon-art-size-md);
}

/* Accessibility feature lists store their RichText directly in the list item,
 * followed by the icon block. The shared flex layout therefore blockifies the
 * inline <strong> label and the following text into separate, narrow columns.
 * Reserve the icon column with padding instead so the label and sentence wrap
 * together, matching the design-reference list anatomy on every viewport. */
:is(.roarr-site-main, .editor-styles-wrapper)
	:is(#accessibility-approach, #getting-around)
	.roarr-glance-list
	li:has(> :is(.roarr-icon, [data-type="roarr/icon"], .wp-block-roarr-icon, .roarr-icon-edit)) {
	position: relative;
	display: block;
	box-sizing: content-box;
	min-block-size: var(--icon-badge-size-md);
	padding-inline-start: calc(var(--icon-badge-size-md) + var(--space-16));
}

:is(.roarr-site-main, .editor-styles-wrapper)
	:is(#accessibility-approach, #getting-around)
	.roarr-glance-list
	li
	> :is(.roarr-icon, [data-type="roarr/icon"], .wp-block-roarr-icon, .roarr-icon-edit) {
	position: absolute;
	inset-block-start: var(--space-16);
	inset-inline-start: 0;
	order: initial;
	margin: 0;
}

:is(.roarr-site-main, .editor-styles-wrapper)
	:is(#accessibility-approach, #getting-around)
	.roarr-glance-list
	li:first-child
	> :is(.roarr-icon, [data-type="roarr/icon"], .wp-block-roarr-icon, .roarr-icon-edit) {
	inset-block-start: 0;
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-split-rates .roarr-glance-list li > .roarr-icon {
	flex-basis: var(--icon-badge-size-xl);
	width: var(--icon-badge-size-xl);
	height: var(--icon-badge-size-xl);
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-split-rates .roarr-glance-list li > .roarr-icon .roarr-generated-icon {
	width: var(--icon-art-size-xl);
	height: var(--icon-art-size-xl);
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-rail-card.is-style-roarr-rail-card-wide {
	grid-column: 1 / -1;
}

/* -- Direct roarr/icon child in callout badge -------------------------------
 * Saved Gutenberg callouts can carry a roarr/icon block inside
 * .roarr-callout__icon (the mock's tip-card treatment). The base callout grid
 * reserves a 24px glyph column; icon ART needs the badge-sized column and the
 * badge chrome dropped, mirroring the glance-list bridge above. */
:is(.roarr-site-main, .editor-styles-wrapper) .roarr-callout:has(.roarr-callout__icon .roarr-generated-icon) {
	grid-template-columns: var(--icon-badge-size-md) 1fr;
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-callout__icon:has(.roarr-icon) {
	width: var(--icon-badge-size-md);
	height: var(--icon-badge-size-md);
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-callout__icon .roarr-icon {
	display: inline-grid;
	place-items: center;
	width: 100%;
	height: 100%;
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-callout__icon .roarr-icon .roarr-ui-icon {
	width: var(--icon-badge-glyph-md);
	height: var(--icon-badge-glyph-md);
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-callout__icon .roarr-icon .roarr-generated-icon {
	width: var(--icon-art-size-md);
	height: var(--icon-art-size-md);
}

/* ── visiting-roarr fixes (08-07) — mock rules never ported to WP markup ──
 * These four rules exist in design-reference/mocks/css/styles.css but were
 * dropped in the roarr-web-stg port because they target mock BEM (.btn,
 * --quartet) or the frontend .roarr-icon (vs editor .roarr-icon-edit). */

/* (1) Quartet card grid centres its detail cards (mock ~L10601). WP applies
 * is-style-roarr-card-grid-quartet; the mechanical bridge only carried the
 * --center variant, not the quartet default. */
:is(.roarr-site-main, .editor-styles-wrapper) .roarr-card-grid.is-style-roarr-card-grid-quartet .roarr-detail-card {
	justify-items: center;
	text-align: center;
}

/* (2) Detail-card icon sizing on the FRONTEND. Saved markup is
 * .roarr-detail-card > .roarr-icon (roarr/icon block), not the editor's
 * .roarr-icon-edit wrapper — so without this the span runs full-column-width
 * (~234px) and the glyph floats left. The mock's late painted-art layer raises
 * detail-card art to the feature size, with no badge chrome. */
:is(.roarr-site-main, .editor-styles-wrapper) .roarr-detail-card > .roarr-icon {
	display: inline-grid;
	place-items: center;
	width: var(--icon-art-size-feature);
	height: var(--icon-art-size-feature);
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-detail-card > .roarr-icon .roarr-ui-icon {
	width: var(--icon-badge-glyph-lg);
	height: var(--icon-badge-glyph-lg);
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-detail-card > .roarr-icon .roarr-generated-icon {
	width: var(--icon-art-size-feature);
	height: var(--icon-art-size-feature);
	max-width: none;
}

/* The List Card Grid mock positions .roarr-detail-card__icon beside the copy.
 * Gutenberg instead renders roarr/icon as .roarr-icon publicly and wraps it
 * in .roarr-icon-edit in the editor, so carry that compound layout across the
 * bridge without changing ordinary Info Cards. */
:is(.roarr-site-main, .editor-styles-wrapper)
	.roarr-card-grid.is-style-roarr-card-grid-list
	.roarr-detail-card:has(> :is(.roarr-icon, .roarr-icon-edit, [data-type="roarr/icon"], .wp-block-roarr-icon)) {
	grid-template-columns: var(--icon-badge-size-lg) minmax(0, 1fr);
	align-items: start;
	column-gap: var(--space-16);
}

:is(.roarr-site-main, .editor-styles-wrapper)
	.roarr-card-grid.is-style-roarr-card-grid-list
	.roarr-detail-card
	> :is(.roarr-icon, .roarr-icon-edit, [data-type="roarr/icon"], .wp-block-roarr-icon) {
	grid-row: 1 / span 2;
}

:is(.roarr-site-main, .editor-styles-wrapper)
	.roarr-card-grid.is-style-roarr-card-grid-list
	.roarr-detail-card:has(> :is(.roarr-icon, .roarr-icon-edit, [data-type="roarr/icon"], .wp-block-roarr-icon))
	> :is(h3, p) {
	grid-column: 2;
}

:is(.roarr-site-main, .editor-styles-wrapper)
	.roarr-card-grid.is-style-roarr-card-grid-list
	.roarr-detail-card:has(> :is(.roarr-icon, .roarr-icon-edit, [data-type="roarr/icon"], .wp-block-roarr-icon))
	> h3 {
	grid-row: 1;
}

:is(.roarr-site-main, .editor-styles-wrapper)
	.roarr-card-grid.is-style-roarr-card-grid-list
	.roarr-detail-card:has(> :is(.roarr-icon, .roarr-icon-edit, [data-type="roarr/icon"], .wp-block-roarr-icon))
	> p {
	grid-row: 2;
}

/* Info and media-fill splits use the mock's shared media frame even when
 * Core Image drops the optional roarr-media-frame class from its rendered
 * figure. Exclude the intentionally bare media treatments; every other
 * native image in these split variants follows the 16:10 frame contract. */
:is(.roarr-site-main, .editor-styles-wrapper) .roarr-split:is(.is-style-roarr-split-info, .is-style-roarr-split-media-fill) > .roarr-split__media > .wp-block-image:not(.roarr-media-frame, .roarr-document-image, .roarr-app-phones, .roarr-annual-pass-upsell__image) {
	position: relative;
	overflow: hidden;
	margin: 0;
	border-radius: var(--radius-lg);
	background: var(--parchment);
	box-shadow: var(--shadow-soft);
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-split:is(.is-style-roarr-split-info, .is-style-roarr-split-media-fill) > .roarr-split__media > .wp-block-image:not(.roarr-media-frame, .roarr-document-image, .roarr-app-phones, .roarr-annual-pass-upsell__image) img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: calc(var(--space-120) * 2 + var(--space-80));
	aspect-ratio: var(--image-ratio-media);
	object-fit: cover;
}

@media (min-width: 1024px) {
	:is(.roarr-site-main, .editor-styles-wrapper) .roarr-split.is-style-roarr-split-media-fill > .roarr-split__media > .wp-block-image:not(.roarr-media-frame, .roarr-document-image, .roarr-app-phones, .roarr-annual-pass-upsell__image) {
		position: absolute;
		inset: 0;
		width: auto;
		height: auto;
	}

	:is(.roarr-site-main, .editor-styles-wrapper) .roarr-split.is-style-roarr-split-media-fill > .roarr-split__media > .wp-block-image:not(.roarr-media-frame, .roarr-document-image, .roarr-app-phones, .roarr-annual-pass-upsell__image) img {
		position: absolute;
		inset: 0;
		min-height: 0;
		aspect-ratio: auto;
	}
}

/* The generated is-style bridge maps the quartet grid itself, but compound
 * selectors involving its child cards are not emitted. Keep the shared Info
 * Card variation on the exact compact quartet measurements from the mock. */
@media (min-width: 768px) {
	:is(.roarr-site-main, .editor-styles-wrapper) .roarr-card-grid.is-style-roarr-card-grid-quartet .roarr-detail-card {
		gap: var(--space-8);
		padding: var(--space-16);
	}

	:is(.roarr-site-main, .editor-styles-wrapper) .roarr-card-grid.is-style-roarr-card-grid-quartet .roarr-detail-card h3 {
		font-size: var(--text-lg);
	}

	:is(.roarr-site-main, .editor-styles-wrapper) .roarr-card-grid.is-style-roarr-card-grid-quartet .roarr-detail-card p {
		font-size: var(--text-sm);
		line-height: var(--lh-normal);
	}
}

@media (min-width: 1024px) {
	:is(.roarr-site-main, .editor-styles-wrapper) .roarr-card-grid.is-style-roarr-card-grid-quartet {
		gap: var(--space-24);
	}
}

/* A shared Info Card may carry one Gutenberg button as its destination field.
 * On the public site that link covers the card, matching the mock's linked
 * <a.roarr-detail-card>; the editor keeps the button visible for easy editing. */
.roarr-site-main .roarr-detail-card:not(.is-style-roarr-detail-card-media):has(> .wp-block-buttons > .wp-block-button > .wp-block-button__link) {
	position: relative;
	cursor: pointer;
	transition:
		border-color var(--speed) var(--ease),
		box-shadow var(--speed) var(--ease),
		transform var(--speed) var(--ease);
}

.roarr-site-main .roarr-detail-card:not(.is-style-roarr-detail-card-media) > .wp-block-buttons {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
	margin: 0;
}

.roarr-site-main .roarr-detail-card:not(.is-style-roarr-detail-card-media) > .wp-block-buttons > .wp-block-button,
.roarr-site-main .roarr-detail-card:not(.is-style-roarr-detail-card-media) > .wp-block-buttons > .wp-block-button > .wp-block-button__link {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
}

.roarr-site-main .roarr-detail-card:not(.is-style-roarr-detail-card-media) > .wp-block-buttons > .wp-block-button > .wp-block-button__link {
	padding: 0;
	border: 0;
	border-radius: var(--radius-lg);
	background: transparent;
	box-shadow: none;
	color: transparent;
	font-size: 0;
}

.roarr-site-main .roarr-detail-card:not(.is-style-roarr-detail-card-media):has(> .wp-block-buttons .wp-block-button__link:hover),
.roarr-site-main .roarr-detail-card:not(.is-style-roarr-detail-card-media):has(> .wp-block-buttons .wp-block-button__link:focus-visible) {
	border-color: color-mix(in srgb, var(--primary) 45%, var(--border-light));
	box-shadow: var(--shadow-raised);
	transform: translateY(calc(var(--space-4) * -1));
}

.roarr-site-main .roarr-detail-card:not(.is-style-roarr-detail-card-media) > .wp-block-buttons .wp-block-button__link:focus-visible {
	outline: 3px solid var(--primary);
	outline-offset: var(--space-4);
}

/* Media Info Cards are saved as flat Gutenberg children (image, heading,
 * paragraph, buttons), while the design mock groups the latter three inside
 * .roarr-detail-card__body. Recreate that body contract in the grid so the
 * image keeps its 16:10 crop, copy receives consistent inset spacing, and the
 * visible CTA pins to the bottom of every equal-height card. */
:is(.roarr-site-main, .editor-styles-wrapper) .roarr-detail-card.is-style-roarr-detail-card-media {
	--roarr-media-card-padding: var(--card-padding-mobile);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto auto minmax(0, 1fr) auto;
	gap: 0;
	align-content: stretch;
	padding: 0;
	overflow: hidden;
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-detail-card.is-style-roarr-detail-card-media > .wp-block-image {
	grid-row: 1;
	margin: 0;
	overflow: hidden;
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-detail-card.is-style-roarr-detail-card-media > .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--image-ratio-media);
	object-fit: cover;
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-detail-card.is-style-roarr-detail-card-media > h3 {
	grid-row: 2;
	margin: 0;
	padding: var(--roarr-media-card-padding) var(--roarr-media-card-padding) 0;
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-detail-card.is-style-roarr-detail-card-media > p {
	grid-row: 3;
	align-self: start;
	margin: 0;
	padding: var(--space-8) var(--roarr-media-card-padding) 0;
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-detail-card.is-style-roarr-detail-card-media:not(:has(> .wp-block-buttons)) > p {
	padding-bottom: var(--roarr-media-card-padding);
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-detail-card.is-style-roarr-detail-card-media > .wp-block-buttons {
	position: static;
	inset: auto;
	z-index: auto;
	grid-row: 4;
	display: flex;
	align-self: end;
	gap: var(--space-8);
	width: auto;
	height: auto;
	margin: 0;
	padding: var(--space-16) var(--roarr-media-card-padding) var(--roarr-media-card-padding);
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-detail-card.is-style-roarr-detail-card-media > .wp-block-buttons > .wp-block-button {
	display: flex;
	flex: 1 1 100%;
	width: 100%;
	height: auto;
	margin: 0;
}

/* Existing Corporate cards predate the core/button style assignment. Give
 * their scoped CTA the same primary-button skin as the mock without changing
 * button presentation anywhere else. */
:is(.roarr-site-main, .editor-styles-wrapper) .roarr-detail-card.is-style-roarr-detail-card-media > .wp-block-buttons .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	min-height: var(--button-min-height);
	padding: 0 var(--button-padding-inline);
	border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
	border-radius: var(--radius-md);
	background: transparent;
	box-shadow: none;
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-heavy);
	line-height: var(--lh-solid);
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	white-space: normal;
}

/* Corporate event cards use the mock's primary download/enquiry treatment.
 * Media cards elsewhere default to the secondary outline used by Partners;
 * an explicitly styled primary Gutenberg button also opts into this skin. */
:is(.roarr-site-main, .editor-styles-wrapper) #events .roarr-detail-card.is-style-roarr-detail-card-media > .wp-block-buttons .wp-block-button__link,
:is(.roarr-site-main, .editor-styles-wrapper) .roarr-detail-card.is-style-roarr-detail-card-media > .wp-block-buttons .is-style-roarr-primary .wp-block-button__link {
	border: 0;
	background: var(--primary);
	color: var(--deep-forest);
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-detail-card.is-style-roarr-detail-card-media > .wp-block-buttons .wp-block-button__link:is(:hover, :focus-visible) {
	background: var(--primary-hover);
	color: var(--deep-forest);
	text-decoration: none;
	transform: translateY(-2px);
}

@media (min-width: 768px) {
	:is(.roarr-site-main, .editor-styles-wrapper) .roarr-detail-card.is-style-roarr-detail-card-media {
		--roarr-media-card-padding: var(--card-padding-tablet);
	}
}

/* (3) Wide CTA in an info split (mock ~L10001). A lone button spans the
 * content column; two share it 50/50. Mock targets .btn; WP renders
 * .wp-block-button > .wp-block-button__link. Tablet up only — phones stack. */
@media (min-width: 768px) {
	:is(.roarr-site-main, .editor-styles-wrapper) .roarr-split.is-style-roarr-split-info .roarr-split__content :is(.roarr-button-row, .roarr-action-row) .wp-block-button {
		flex: 1 1 0;
	}

	:is(.roarr-site-main, .editor-styles-wrapper) .roarr-split.is-style-roarr-split-info .roarr-split__content :is(.roarr-button-row, .roarr-action-row) .wp-block-button .wp-block-button__link {
		width: 100%;
		text-align: center;
	}
}

/* FAQ headings are stored as plain text; roarr/faq wraps a trailing FAQ or
 * FAQs token in <em> at render time and mirrors it in the editor preview. */
:is(.roarr-site-main, .editor-styles-wrapper) .faq-accordion .leaf-heading em {
	color: var(--primary);
	font-style: normal;
	text-transform: none;
}

/* App-store badges ship with different intrinsic SVG dimensions. Give both
 * figures one shared rendered height, let each official aspect ratio set its
 * width, and make the linked wrapper fill the figure instead of collapsing
 * back to the SVG's native dimensions. */
:is(.roarr-site-main, .editor-styles-wrapper) .roarr-plan-day__store-row {
	gap: var(--space-16);
	max-width: calc(var(--space-128) * 3);
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-plan-day__store-badge,
:is(.roarr-site-main, .editor-styles-wrapper) .roarr-plan-day__store-badge--google-play {
	flex: 0 0 auto;
	width: auto;
	height: clamp(var(--space-40), 4vw, var(--space-56));
	margin: 0;
	aspect-ratio: auto;
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-plan-day__store-badge > a {
	display: block;
	width: auto;
	height: 100%;
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-plan-day__store-badge img {
	width: auto;
	max-width: none;
	height: 100%;
	object-fit: contain;
}

/* (4) Bento gap — make it read as an even 16px in BOTH axes.
 * Root cause of the earlier 48px-vertical-vs-16px-across mismatch: WP renders
 * the core/group bento as .is-layout-flow and adds margin-block-start
 * (block-gap) to every child after the first — so the 2nd/3rd grid tiles
 * carried a block margin stacked ON TOP of the 16px grid row-gap. The grid
 * gap alone spaces the tiles; zero the layout margin. align-items:start also
 * pins each tile to the top of its (auto) track rather than letting it
 * bottom-align in a track the stretched media column can grow. */
.roarr-accessibility-bento > * {
	margin-block: 0;
}

.roarr-accessibility-bento {
	align-items: start;
}

/* Tile heights come from each image's own aspect-ratio (main landscape, the
 * two below square). WP wraps each core/image in a <figure class="wp-block-image">
 * the mock lacks, so the sizing reaches the img through the figure. */
.roarr-accessibility-bento__item .wp-block-image {
	display: block;
	margin: 0;
	height: auto;
}

.roarr-accessibility-bento__item .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.roarr-accessibility-bento__item--main .wp-block-image img {
	aspect-ratio: var(--image-ratio-landscape);
}

.roarr-accessibility-bento__item:not(.roarr-accessibility-bento__item--main) .wp-block-image img {
	aspect-ratio: var(--image-ratio-square);
}

/* (5) Reusable three-image media bento for Gutenberg split sections.
 * The main tile spans both columns and the two supporting tiles share the
 * second row. WordPress' flow-layout margins are reset so the single grid
 * gap is the only spacing source in both axes. */
:is(.roarr-site-main, .editor-styles-wrapper) .roarr-media-bento {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-16);
	align-self: stretch;
	min-width: 0;
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-media-bento > * {
	min-width: 0;
	margin-block: 0;
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-media-bento__item {
	display: block;
	overflow: hidden;
	margin: 0;
	border-radius: var(--radius-md);
	background: var(--cream);
	box-shadow: var(--shadow-soft);
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-media-bento__item-main {
	grid-column: 1 / -1;
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-media-bento__item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--image-ratio-square);
	object-fit: cover;
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-media-bento__item-main img {
	aspect-ratio: var(--image-ratio-landscape);
}

@media (min-width: 1024px) {
	:is(.roarr-site-main, .editor-styles-wrapper) .roarr-split.is-style-roarr-split-info:has(> .roarr-media-bento) {
		align-items: stretch;
	}

	:is(.roarr-site-main, .editor-styles-wrapper) .roarr-media-bento {
		grid-template-rows: minmax(0, 1.1fr) minmax(0, 1fr);
	}

	:is(.roarr-site-main, .editor-styles-wrapper) .roarr-media-bento__item {
		position: relative;
		min-height: 0;
	}

	:is(.roarr-site-main, .editor-styles-wrapper) .roarr-media-bento__item img {
		position: absolute;
		inset: 0;
		height: 100%;
		aspect-ratio: auto;
	}
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-parkmap .wp-block-image {
	margin: 0;
}

/* Pricing what's-on: WP saves the document image class on the figure, not img. */
:is(.roarr-site-main, .editor-styles-wrapper) #whats-on .wp-block-image.roarr-document-image {
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-md);
}

:is(.roarr-site-main, .editor-styles-wrapper) #whats-on .wp-block-image.roarr-document-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: inherit;
}

@media (min-width: 1024px) {
	:is(.roarr-site-main, .editor-styles-wrapper) #whats-on .is-style-roarr-split-media-hero {
		grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
		gap: clamp(var(--space-32), 4vw, var(--space-48));
		align-items: center;
	}

	:is(.roarr-site-main, .editor-styles-wrapper) #whats-on .is-style-roarr-split-media-hero .roarr-split__media {
		align-self: center;
		margin-bottom: 0;
	}
}

/* Annual Pass perks: core/button saves a div + anchor and the editable panel
 * inside the rail. chrome.js promotes the panel to the split grid at runtime. */
.roarr-site-main .roarr-perks-cascade-wrap {
	display: grid;
	gap: 0;
	width: 100%;
	margin-top: var(--space-16);
}

.roarr-site-main .roarr-perks-cascade-wrap > .wp-block-buttons {
	display: block;
	margin: 0;
}

.roarr-site-main .roarr-perks-cascade-wrap .roarr-perks-cascade__trigger {
	display: block;
	min-height: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

.roarr-site-main .roarr-perks-cascade-wrap .roarr-perks-cascade__trigger > .wp-block-button__link {
	display: grid;
	grid-template-columns: var(--icon-md) minmax(0, 1fr) var(--icon-md);
	width: 100%;
	min-height: var(--button-min-height);
	align-items: center;
	gap: var(--space-16);
	padding: 0 var(--button-padding-inline);
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--primary);
	color: var(--text-primary);
	font-size: var(--text-sm);
	font-weight: var(--weight-heavy);
	line-height: var(--lh-tight);
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

.roarr-site-main .roarr-perks-cascade__label {
	grid-column: 2;
	justify-self: center;
}

.roarr-site-main .roarr-perks-cascade-wrap .roarr-perks-cascade__chev {
	grid-column: 3;
	justify-self: end;
	font-size: var(--h3);
	line-height: 1;
	transform: rotate(0);
}

.roarr-site-main .roarr-perks-cascade__trigger > .wp-block-button__link:is(:hover, :focus-visible) {
	background: var(--primary-hover);
	color: var(--text-primary);
}

.roarr-site-main .roarr-perks-cascade__trigger > .wp-block-button__link[aria-expanded="true"] .roarr-perks-cascade__chev {
	transform: rotate(45deg);
}

.roarr-site-main .roarr-perks-cascade--scroll {
	width: 100%;
	min-width: 0;
}

.roarr-site-main .roarr-perks-cascade--scroll[hidden] {
	display: none;
}

.roarr-site-main .roarr-perks-cascade .check-list li[data-roarr-icon]:has(> .roarr-generated-icon) {
	padding-inline-start: 0;
}

/* Gutenberg's flow layout adds margin-block-start to every child after the
 * first. The perks parent is a real grid, so its gap owns both row and column
 * spacing and every shared perks card must start flush in its grid cell. */
:is(.roarr-site-main, .editor-styles-wrapper) .roarr-perks-grid > .roarr-perks-group {
	margin-block-start: 0;
}

@media (max-width: 639px) {
	.roarr-site-main .roarr-perks-cascade--scroll .roarr-perks-cascade__body,
	.roarr-site-main .roarr-perks-cascade--scroll .roarr-perks-group {
		padding: var(--space-16);
	}

	.roarr-site-main .roarr-perks-cascade .check-list li[data-roarr-icon]:has(> .roarr-generated-icon) {
		grid-template-columns: var(--space-48) minmax(0, 1fr);
		gap: var(--space-12);
	}

	.roarr-site-main .roarr-perks-cascade .check-list li[data-roarr-icon] > .roarr-generated-icon {
		width: var(--space-48);
		height: var(--space-48);
	}
}

@media (max-width: 1023px) {
	.roarr-site-main #pass-in-app .roarr-plan-day__store-row {
		order: 6;
		margin-top: var(--space-8);
	}
}

/* -- Party extras -- flat Gutenberg bridge -------------------------------
 * The mock wraps this block in the wide section container and gives each
 * item the shared detail-card surface. Core/group saves neither contract and
 * its flow margins also offset the second card, so restore all three pieces
 * for the public page and editor canvas together. */
:is(.roarr-site-main, .editor-styles-wrapper) .roarr-section > .roarr-extras {
	width: min(100% - var(--space-48), var(--container-wide-width));
	margin-block-start: var(--space-24);
	margin-inline: auto;
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-extras > *,
:is(.roarr-site-main, .editor-styles-wrapper) .roarr-extras__grid > *,
:is(.roarr-site-main, .editor-styles-wrapper) .roarr-extras-card > * {
	margin-block-start: 0;
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-extras__grid {
	align-items: stretch;
}

:is(.roarr-site-main, .editor-styles-wrapper) .roarr-extras-card {
	align-content: start;
	min-width: 0;
	padding: var(--card-padding-mobile);
	border: 1px solid color-mix(in srgb, var(--deep-forest) 12%, transparent);
	border-radius: var(--radius-lg);
	background: var(--card-on-light);
	box-shadow: 0 var(--space-12) var(--space-32) color-mix(in srgb, var(--deep-forest) 13%, transparent);
}

@media (min-width: 768px) {
	:is(.roarr-site-main, .editor-styles-wrapper) .roarr-section > .roarr-extras {
		width: min(100% - var(--space-64), var(--container-wide-width));
	}

	:is(.roarr-site-main, .editor-styles-wrapper) .roarr-extras-card {
		padding: var(--card-padding-tablet);
	}
}

@media (min-width: 1024px) {
	:is(.roarr-site-main, .editor-styles-wrapper) .roarr-section > .roarr-extras {
		width: min(100% - var(--space-96), var(--container-wide-width));
	}

	:is(.roarr-site-main, .editor-styles-wrapper) .roarr-extras-card {
		padding: var(--card-padding-desktop);
	}
}

/* -- Exclusive Adventures responsive parity ------------------------------
 * Core blocks retain WordPress flow margins and generic table semantics that
 * the mock's semantic wrappers do not. Restore the mock contract without
 * changing the saved, content-only Gutenberg structure. */

/* WordPress global heading/paragraph rules outrank the shared hero's element
 * selectors once the dynamic block wrapper class is present. Reinstate the
 * token-owned rhythm so the public render and editor preview keep the mock's
 * intrinsic mobile height instead of collapsing to the minimum height. */
:is(.roarr-site-main, .editor-styles-wrapper) .wp-block-roarr-page-hero .page-hero__title {
	margin: 0 0 var(--space-24);
	line-height: var(--lh-solid);
}

:is(.roarr-site-main, .editor-styles-wrapper) .wp-block-roarr-page-hero .page-hero__intro {
	margin: 0 0 var(--space-32);
}

@media (max-width: 1023px) {
	:is(.roarr-site-main, .editor-styles-wrapper):has(#prices) .roarr-split__content > :is(.wp-block-heading, .wp-block-list) {
		margin-block: 0;
	}
}

:is(.roarr-site-main, .editor-styles-wrapper):has(#prices) .roarr-glance-list li > .roarr-icon {
	flex-basis: var(--icon-art-size-lg);
	width: var(--icon-art-size-lg);
	height: var(--icon-art-size-lg);
}

:is(.roarr-site-main, .editor-styles-wrapper):has(#prices) .roarr-glance-list li > .roarr-icon .roarr-generated-icon {
	width: var(--icon-art-size-lg);
	height: var(--icon-art-size-lg);
}

:is(.roarr-site-main, .editor-styles-wrapper):has(#prices) figure.wp-block-table:is(.roarr-rate-table, .is-style-roarr-rate-card) tbody td:first-child {
	color: var(--text-primary);
	font-size: var(--text-base);
	font-weight: var(--weight-bold);
}

:is(.roarr-site-main, .editor-styles-wrapper) #prices > .roarr-rate-table__note {
	margin-block-start: var(--space-16);
}

:is(.roarr-site-main, .editor-styles-wrapper) #enquiry > .roarr-contact-sheet,
.editor-styles-wrapper .roarr-section:has(> .roarr-contact-sheet) > .roarr-contact-sheet {
	width: min(100% - var(--space-40), calc(var(--space-128) * 8));
	margin-inline: auto;
}

@media (min-width: 768px) {
	:is(.roarr-site-main, .editor-styles-wrapper) #corporate {
		padding-top: var(--section-padding-compact-tablet);
	}

	:is(.roarr-site-main, .editor-styles-wrapper) #enquiry > .roarr-contact-sheet,
	.editor-styles-wrapper .roarr-section:has(> .roarr-contact-sheet) > .roarr-contact-sheet {
		width: min(100% - var(--space-64), calc(var(--space-128) * 8));
	}
}

@media (min-width: 1024px) {
	:is(.roarr-site-main, .editor-styles-wrapper) #corporate {
		padding-top: var(--section-padding-compact-desktop);
	}

	:is(.roarr-site-main, .editor-styles-wrapper) #enquiry > .roarr-contact-sheet,
	.editor-styles-wrapper .roarr-section:has(> .roarr-contact-sheet) > .roarr-contact-sheet {
		width: min(100% - calc(var(--gutter-desktop) * 2), calc(var(--space-128) * 8));
	}
}