/**
 * Bread & Roses site fixes.
 *
 * Links inside dark sections.
 *
 * The Elementor kit sets a global `a { color: #3C342F }` (brand brown), which is
 * correct on cream and white but sits at roughly 1.15:1 against the dark footer
 * (#2E2A26) and the brown "visit" band (#3C342F) — effectively invisible.
 *
 * Atomic v4's e-paragraph has no link-colour property (the colour prop styles the
 * paragraph, not its descendant anchors), and `custom_css.raw` is render-gated
 * behind an active Elementor Pro licence, so it can vanish silently. A stylesheet
 * is the dependable place for this.
 */

/* Buttons and logo links are excluded in the selector itself. An earlier version
   reset `border-bottom: 0` on buttons afterwards, which also wiped the ghost
   button's own bottom border, so its outline lost one side. */
.s-site-foot a:not( .e-button-base ):not( :has( img ) ),
.s-home-visit a:not( .e-button-base ):not( :has( img ) ),
.s-foot-contact-body a:not( .e-button-base ),
.s-foot-links a:not( .e-button-base ) {
	color: #faf7f2;
	text-decoration: none;
	border-bottom: 1px solid rgba( 250, 247, 242, 0.28 );
	transition: color 0.15s ease, border-color 0.15s ease;
}

.s-site-foot a:not( .e-button-base ):not( :has( img ) ):hover,
.s-site-foot a:not( .e-button-base ):not( :has( img ) ):focus-visible,
.s-home-visit a:not( .e-button-base ):not( :has( img ) ):hover,
.s-home-visit a:not( .e-button-base ):not( :has( img ) ):focus-visible,
.s-foot-contact-body a:not( .e-button-base ):hover,
.s-foot-contact-body a:not( .e-button-base ):focus-visible,
.s-foot-links a:not( .e-button-base ):hover,
.s-foot-links a:not( .e-button-base ):focus-visible {
	color: #ffd400;
	border-bottom-color: #ffd400;
}

/* The base row sits quieter than the contact details above it. */
.s-foot-links a:not( .e-button-base ) {
	color: #c9bfb4;
	border-bottom-color: rgba( 201, 191, 180, 0.3 );
}

/* Visible keyboard focus on every button, which Elementor does not supply. */
.e-button-base:focus-visible,
.tribe-common .tribe-common-c-btn:focus-visible {
	outline: 3px solid #ffd400;
	outline-offset: 3px;
}

.s-hero-home .e-button-base:focus-visible,
.s-home-visit .e-button-base:focus-visible,
.s-events-perform .e-button-base:focus-visible {
	outline-color: #faf7f2;
}

/**
 * Google Maps consent gate.
 *
 * Sized to match the map it replaces so the page does not jump when it loads.
 */
.br-map-gate {
	position: relative;
	width: 100%;
	height: 420px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-color: #efe9e1;
	background-image: linear-gradient( 135deg, #efe9e1 25%, #e7e0d6 25%, #e7e0d6 50%, #efe9e1 50%, #efe9e1 75%, #e7e0d6 75% );
	background-size: 22px 22px;
	border: 1px solid #e2dbd2;
	border-radius: 6px;
	overflow: hidden;
}

.br-map-gate[data-loaded="1"] {
	background: none;
	display: block;
}

.br-map-gate__inner {
	max-width: 34rem;
	padding: 24px;
}

.br-map-gate__text {
	margin: 0 0 16px;
	font-family: "Inter", sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #2e2a26;
}

.br-map-gate__btn {
	font-family: "Inter", sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: #2e2a26;
	background-color: #ffd400;
	border: 0;
	border-radius: 4px;
	padding: 14px 26px;
	cursor: pointer;
}

.br-map-gate__btn:hover,
.br-map-gate__btn:focus-visible {
	background-color: #3c342f;
	color: #faf7f2;
}

.br-map-gate__alt {
	margin: 14px 0 0;
	font-family: "Inter", sans-serif;
	font-size: 14px;
}

.br-map-gate__alt a {
	color: #3c342f;
}

@media ( max-width: 767px ) {
	.br-map-gate {
		height: 320px;
	}
}

/**
 * Wheat-and-rose dividers, used as section separators.
 *
 * The artwork is the same motif as the logo and the printed calendar's week
 * rules, so it ties the pages to the print. Applied as a flex child on
 * centred column sections, which is why it needs an explicit width.
 */
/* The artwork is 2189x41 (a ~53:1 ratio).
 *
 * `background-size: contain` is deliberate. `100% auto` clipped the graphic,
 * because it scales to the box width and the natural height then overflows a
 * fixed-height box. `100% 100%` then stretched it to fill whatever height the
 * box happened to be. `contain` can do neither: it fits the artwork inside the
 * box at its true proportions, so the height below is simply an upper bound. */
.s-welcome::after,
.s-home-bar::after,
.s-priv-body-inner::after,
.s-contact-body::after {
	content: "";
	display: block;
	width: 100%;
	max-width: 1200px;
	height: 26px;
	margin-top: 56px;
	background-image: url( 'img/divider-long-black.png' );
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}

.s-priv-body-inner::after {
	margin-top: 40px;
	max-width: 780px;
}

/* On dark ground the cream version is used instead. */
.s-foot-base {
	border-top: 0 !important;
	position: relative;
	padding-top: 48px !important;
}

.s-foot-base::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 24px;
	background-image: url( 'img/divider-long-cream.png' );
	background-repeat: no-repeat;
	background-position: center top;
	background-size: contain;
	opacity: 0.75;
	/* Decorative, and must never intercept clicks on the links below it. */
	pointer-events: none;
}

/* Ornaments are decoration: drop them where the space is tight. */
@media ( max-width: 767px ) {
	.s-welcome::after,
	.s-home-bar::after,
	.s-priv-body-inner::after,
	.s-contact-body::after {
		margin-top: 36px;
	}
}

/* --------------------------------------------------------------------------
   Contact page: the map runs the full width of the viewport, while its heading
   and note stay aligned with the rest of the page content.
   -------------------------------------------------------------------------- */

.s-contact-map {
	padding-inline: 0 !important;
}

.s-contact-map .s-contact-map-h,
.s-contact-map .s-contact-map-note {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 32px;
	box-sizing: border-box;
}

.s-contact-map .br-map-gate {
	border-inline: 0;
	border-radius: 0;
	height: 460px;
}

@media ( max-width: 767px ) {
	.s-contact-map .s-contact-map-h,
	.s-contact-map .s-contact-map-note {
		padding-inline: 22px;
	}

	.s-contact-map .br-map-gate {
		height: 320px;
	}
}

/* --------------------------------------------------------------------------
   Contact form: match the site's button treatment. Elementor's form button takes
   its background from the kit accent but leaves the label white, which on yellow
   is about 1.4:1 — unreadable. Brown label instead, at 9.9:1.
   -------------------------------------------------------------------------- */

.elementor-widget-form .elementor-button[type="submit"],
.elementor-widget-form .elementor-button[type="submit"]:visited {
	background-color: #ffd400;
	color: #2e2a26;
	border: 0;
	border-radius: 4px;
	font-family: "Inter", sans-serif;
	font-size: 16px;
	font-weight: 600;
	padding: 15px 26px;
}

.elementor-widget-form .elementor-button[type="submit"]:hover,
.elementor-widget-form .elementor-button[type="submit"]:focus-visible {
	background-color: #3c342f;
	color: #faf7f2;
}

.elementor-widget-form .elementor-button[type="submit"]:focus-visible {
	outline: 3px solid #ffd400;
	outline-offset: 3px;
}

/* Form fields, to match the cream/hairline language used elsewhere. */
.elementor-widget-form .elementor-field-group .elementor-field {
	border: 1px solid #e2dbd2;
	border-radius: 4px;
	background-color: #fff;
	font-family: "Inter", sans-serif;
	font-size: 16px;
	padding: 12px 14px;
}

.elementor-widget-form .elementor-field-group .elementor-field:focus {
	border-color: #3c342f;
	outline: 2px solid #ffd400;
	outline-offset: 1px;
}

.elementor-widget-form .elementor-field-group > label {
	font-family: "Inter", sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #3c342f;
	margin-bottom: 6px;
}

/* --------------------------------------------------------------------------
   Staff-only menu items. These appear in the header for signed-in people who
   can add events, and for nobody else, so they are marked out from the public
   navigation with the brand yellow.
   -------------------------------------------------------------------------- */

.br-menu-add > a,
.br-menu-help > a {
	color: #ffd400 !important;
}

.br-menu-add > a:hover,
.br-menu-help > a:hover {
	color: #ffffff !important;
}

/* The help link on the submission form itself. */
.br-events-help-link {
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Links inside body copy must be underlined.
   The kit's link colour (#3C342F) against body text (#2E2A26) is about 1.2:1 —
   effectively identical — so colour alone did not mark them as links at all.
   WCAG wants 3:1 against surrounding text before colour may be the only cue,
   so these carry an underline instead.
   -------------------------------------------------------------------------- */

.e-paragraph-base a:not( .e-button-base ),
.e-heading-base a:not( .e-button-base ) {
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	text-decoration-color: #a3968a;
}

.e-paragraph-base a:not( .e-button-base ):hover,
.e-paragraph-base a:not( .e-button-base ):focus-visible {
	color: #1c1a18;
	text-decoration-color: #ffd400;
	text-decoration-thickness: 2px;
}

/* The dark sections already mark their links with a bottom border, so they must
   not gain a second underline on top. Declared after the rule above so it wins. */
.s-site-foot .e-paragraph-base a,
.s-home-visit .e-paragraph-base a {
	text-decoration: none;
}

/* Small arrow marking the help link as opening in a new tab. */
.br-events-newtab {
	display: inline-block;
	font-size: 0.85em;
	color: #6b5f55;
}

/* The how-to page's buttons should not pick up the prose underline. */
.s-ht-body-inner .e-button-base,
.s-ht-tail .e-button-base {
	text-decoration: none;
	align-self: flex-start;
}

/* --------------------------------------------------------------------------
   Upcoming event posters ([br_event_posters]).
   Four across, dropping to two and then one. Posters are portrait and vary in
   proportion, so a fixed 5:7 frame with object-fit: cover keeps the row even.
   -------------------------------------------------------------------------- */

/* The carousel wrapper positions the arrows against the poster row. */
.br-carousel {
	position: relative;
	width: 100%;
}

/* A scroll-snap track. Three posters visible on desktop so there is always
   somewhere to scroll, dropping to two, then one-and-a-peek on phones. */
.br-posters {
	--br-per-view: 3;
	--br-gap: 22px;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc( ( 100% - ( var( --br-per-view ) - 1 ) * var( --br-gap ) ) / var( --br-per-view ) );
	gap: var( --br-gap );
	list-style: none;
	margin: 0;
	padding: 0 0 6px;
	width: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: #d8cfc4 transparent;
}

.br-posters:focus-visible {
	outline: 3px solid #ffd400;
	outline-offset: 4px;
}

.br-posters::-webkit-scrollbar { height: 6px; }
.br-posters::-webkit-scrollbar-thumb { background: #d8cfc4; border-radius: 3px; }
.br-posters::-webkit-scrollbar-track { background: transparent; }

.br-posters__item {
	margin: 0;
	scroll-snap-align: start;
}

/* Arrows. Hidden by default and revealed by carousel.js only when the row
   actually overflows. */
.br-carousel__btn {
	position: absolute;
	top: 34%;
	z-index: 2;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #e2dbd2;
	border-radius: 50%;
	background: #fff;
	color: #3c342f;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 3px 12px rgba( 28, 26, 24, 0.14 );
	transition: background-color 0.15s ease, color 0.15s ease;
}

.br-carousel__btn:hover {
	background: #ffd400;
	color: #1c1a18;
}

.br-carousel__btn:focus-visible {
	outline: 3px solid #ffd400;
	outline-offset: 3px;
}

.br-carousel__btn[hidden] { display: none; }

.br-carousel__btn--prev { left: -18px; }
.br-carousel__btn--next { right: -18px; }

@media ( max-width: 1280px ) {
	.br-carousel__btn--prev { left: 4px; }
	.br-carousel__btn--next { right: 4px; }
}

.br-posters__link {
	display: block;
	text-decoration: none !important;
	color: inherit;
}

.br-posters__img {
	display: block;
	width: 100%;
	aspect-ratio: 5 / 7;
	object-fit: cover;
	border-radius: 4px;
	background-color: #efe9e1;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.br-posters__link:hover .br-posters__img,
.br-posters__link:focus-visible .br-posters__img {
	transform: translateY( -3px );
	box-shadow: 0 8px 22px rgba( 28, 26, 24, 0.18 );
}

.br-posters__link:focus-visible {
	outline: 3px solid #ffd400;
	outline-offset: 4px;
}

.br-posters__meta {
	display: block;
	margin-top: 10px;
}

.br-posters__date {
	display: block;
	font-family: "Inter", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #6b5f55;
}

.br-posters__title {
	display: block;
	font-family: "Inter", sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: #1c1a18;
	margin-top: 2px;
}

.br-posters__link:hover .br-posters__title {
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media ( max-width: 1024px ) {
	.br-posters { --br-per-view: 2; --br-gap: 18px; }
}

@media ( max-width: 560px ) {
	/* A partial fourth poster peeking in signals that the row scrolls. */
	.br-posters { --br-per-view: 1.15; --br-gap: 14px; }
}

/* --------------------------------------------------------------------------
   Auto-rotating single poster ([br_event_posters rotate="1"]).
   Slides are stacked and cross-faded, so the block never changes height and the
   surrounding layout cannot jump as it advances.
   -------------------------------------------------------------------------- */

.br-rotator { width: 100%; }

/* The rotate variant must undo the scroll-carousel geometry it inherits from
   `.br-posters`. That base rule sets `grid-auto-flow: column` and
   `grid-auto-columns: calc( 100% / var( --br-per-view ) )`, so every stacked
   slide was being sized to a third of the track — 110px inside 374px — which is
   what kept the poster tiny. Chrome's computed values made this obvious. */
.br-posters--rotate {
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-flow: row;
	grid-auto-columns: auto;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	overflow: visible;
	scroll-snap-type: none;
}

/* Every slide occupies the same grid cell.
 *
 * `visibility` is delayed rather than transitioned: it cannot animate, so hiding
 * it at the same moment the incoming slide starts fading left a blank gap on
 * every change — the outgoing poster disappeared instantly while the new one was
 * still at opacity 0. Delaying the hide until the fade completes removes that.
 * (Opacity alone is not enough: an opacity-0 slide would still be focusable.) */
.br-posters--rotate > .br-posters__item {
	grid-area: 1 / 1;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease, visibility 0s linear 0.6s;
	pointer-events: none;
}

.br-posters--rotate > .br-posters__item.is-current {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.6s ease, visibility 0s linear 0s;
}

@media ( prefers-reduced-motion: reduce ) {
	.br-posters--rotate > .br-posters__item { transition: none; }
}

/* Dots and the pause control. */
.br-rotator__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 12px;
}

.br-rotator__dots {
	display: flex;
	gap: 7px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.br-rotator__dot {
	display: block;
	width: 9px;
	height: 9px;
	padding: 0;
	border: 1px solid #b9ada1;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.br-rotator__dot.is-current {
	background: #ffd400;
	border-color: #3c342f;
}

.br-rotator__dot:hover { background: #e2dbd2; }

.br-rotator__dot:focus-visible,
.br-rotator__pause:focus-visible {
	outline: 3px solid #ffd400;
	outline-offset: 2px;
}

.br-rotator__pause {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 1px solid #e2dbd2;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
}

/* Two bars for pause; swapped to a triangle when stopped. */
.br-rotator__pause-icon {
	display: block;
	width: 8px;
	height: 9px;
	border-left: 3px solid #3c342f;
	border-right: 3px solid #3c342f;
}

.br-rotator__pause.is-paused .br-rotator__pause-icon {
	width: 0;
	height: 0;
	border-left: 8px solid #3c342f;
	border-right: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	margin-left: 2px;
}

/* Single static poster (rotate off, limit 1). */
.br-posters--single {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

.br-posters--single > .br-posters__item { margin: 0; }

/* --------------------------------------------------------------------------
   Coming up: dates and button on the left, a single rotating poster on the
   right, filling the height of the row.
   -------------------------------------------------------------------------- */

/* The poster is width-led: it fills the right column and takes whatever height
   its own proportions give it.
   An earlier version tried to be height-led (height: 100% down the chain) so the
   poster would match the dates column. That collapsed it to almost nothing,
   because the rotator's grid row is auto-sized, so a percentage height had no
   definite height to resolve against. Width-led is both simpler and reliable. */
.s-events-cols {
	align-items: flex-start !important;
}

/* `align-items: stretch`, NOT center. This is a column flex container, so
   align-items works on the horizontal axis: `center` made every child shrink to
   its content width, which left the image's `width: 100%` with no definite width
   to resolve against and collapsed the poster to a thumbnail. */
.s-events-col-poster {
	justify-content: flex-start;
	align-items: stretch;
}

/* No caption: the poster artwork carries its own date and title. */
.br-posters--rotate .br-posters__meta {
	display: none;
}

.s-events-col-poster .br-rotator {
	width: 100%;
	padding: 6px 0;
}

.s-events-col-poster .br-posters--rotate {
	width: 100%;
}

.s-events-col-poster .br-posters__link {
	display: block;
	width: 100%;
}

/* Whole poster, never cropped. */
/* No `aspect-ratio: auto` here. That discarded the ratio the browser derives from
   the width/height attributes, so any not-yet-decoded slide had no height basis
   and blew the grid row out to 1500px. Letting the attributes govern means every
   slide reserves the right box before it decodes. */
/* `aspect-ratio: auto` lets each poster keep its true proportions instead of the
   5:7 the multi-poster carousel rule imposes, which letterboxed an A-size poster
   by ~5px. This is only safe because the posters are excluded from lazy loading
   and always carry width/height attributes, so the box is correct before the
   image decodes — without that, an undecoded image has no ratio and the slide
   collapses. */
.s-events-col-poster .br-posters__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: auto;
	object-fit: contain;
	border-radius: 3px;
	background: none;
}

/* Controls hidden, with one exception.
 *
 * The dots are purely redundant navigation, so they go entirely. The pause
 * button cannot simply be deleted: auto-moving content needs a way to stop it
 * (WCAG 2.2.2), and hover-pause alone does not help keyboard or screen reader
 * users. So it is visually hidden but reappears the moment it receives keyboard
 * focus — the same pattern as a skip link. Nothing is visible in normal use.
 */
.s-events-col-poster .br-rotator__controls {
	margin-top: 0;
	justify-content: center;
	gap: 0;
	min-height: 0;
}

.s-events-col-poster .br-rotator__dots {
	display: none;
}

.s-events-col-poster .br-rotator__pause {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset( 50% );
	border: 0;
	white-space: nowrap;
}

.s-events-col-poster .br-rotator__pause:focus-visible {
	position: static;
	width: 26px;
	height: 26px;
	margin: 8px auto 0;
	overflow: visible;
	clip-path: none;
	border: 1px solid #e2dbd2;
}

/* TEC's own "View Calendar" link under the listing. The "See the full calendar"
   button beneath replaces it, so two links to the same place is redundant.
   The wrapper is hidden, not just the anchor, so its spacing goes too. */
.tribe-events-widget-events-list__view-more,
.tribe-events-widget-events-list__view-more-link {
	display: none !important;
}
}

/* --------------------------------------------------------------------------
   The kicker and heading sit inside the left column, so the poster column starts
   level with the top of that text block. A 26px offset was tried here to line the
   poster up with the heading instead of the kicker, but WP-Optimize's minifier
   dropped the desktop rule (only the mobile override survived), and Steve
   preferred the un-offset result anyway — so there is deliberately no offset.
   -------------------------------------------------------------------------- */
.s-events-col-list {
	gap: 18px;
}

/* ==========================================================================
   Mobile fixes (live site, reported 2026-08-05).
   ========================================================================== */

/* 1. The burger dropdown was opening behind the hero.
      The header had `z-index: auto`, so its dropdown could not out-paint a
      later sibling section — and the hero, with a fixed background, is exactly
      that. Giving the header its own stacking context puts the menu on top. */
.s-site-head,
header.elementor-location-header {
	position: relative;
	z-index: 100;
}

.elementor-nav-menu--dropdown,
.elementor-nav-menu__container.elementor-nav-menu--dropdown {
	z-index: 101;
}

/* The dropdown lives inside the narrow menu column of the header row, so left
   in flow it opened as a cramped 147px box and grew the row, pushing the logo
   down. Lifting it out of flow and anchoring it to the header bar gives the
   full-width panel below the header that a burger menu is supposed to be.

   The two inner wrappers are Elementor's own `position: relative`, so they have
   to go static on mobile or they, not `.s-site-head`, become the offset parent. */
@media ( max-width: 1024px ) {
	.s-site-head .elementor-element-site-head-inner,
	.s-site-head .elementor-widget-nav-menu {
		position: static;
	}

	.s-site-head .elementor-nav-menu--dropdown {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: 100%;
		box-shadow: 0 12px 24px rgba( 0, 0, 0, 0.28 );
	}

	.elementor-nav-menu--dropdown a {
		color: #faf7f2 !important;
		padding: 16px 32px !important;
	}

	/* The current page reads as yellow text, not as a lighter block of its own. */
	.elementor-nav-menu--dropdown a:hover,
	.elementor-nav-menu--dropdown a:focus,
	.elementor-nav-menu--dropdown a.elementor-item-active {
		background-color: transparent !important;
		color: #ffd400 !important;
	}

	.elementor-menu-toggle {
		color: #faf7f2 !important;
	}
}

/* 2. The hero background on mobile.
      `background-attachment: fixed` sizes the image against the VIEWPORT rather
      than the element, so on a narrow screen a landscape photo gets scaled to
      cover a short viewport and you end up looking at a hugely zoomed crop.
      iOS ignores `fixed` inconsistently on top of that. Parallax is a desktop
      nicety, so it is switched off below 1025px where it does harm. */
@media ( max-width: 1024px ) {
	.s-hero-home {
		background-attachment: scroll !important;
		background-position: center center !important;
		background-size: cover !important;
	}
}

/* 3. The hero scrim was never visible.
      The hero declares two background layers:

          url( …weekender…jpg ), linear-gradient( …0.12, …0.9 )

      and in CSS the FIRST layer paints on top, so the photo covered the
      gradient completely and the white copy sat straight on a busy picture.
      Rather than restate the layers in the right order — which would hard-code
      the attachment URL and break the next time the photo is swapped — the
      scrim goes on a pseudo-element and the content is lifted above it. */
.s-hero-home {
	position: relative;
	isolation: isolate;
}

.s-hero-home::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient( 180deg, rgba( 18, 30, 24, 0.15 ) 0%, rgba( 24, 26, 22, 0.82 ) 100% );
	pointer-events: none;
	z-index: 0;
}

.s-hero-home > * {
	position: relative;
	z-index: 1;
}