@font-face {
	font-family: 'Worldstar';
	src: url('fonts/worldstar.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Classic Roots';
	src: url('fonts/classic-roots.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Pacifico';
	src: url('fonts/pacifico-regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/*
 * Refresh Wellbeing - homepage hero background video.
 *
 * Replaces the Slider Revolution / YouTube-embed hero, which painted YouTube's
 * own chrome (large play button, title bar, share + watch-later buttons) over
 * the footage. This is a silent, looping, non-interactive background video:
 * no controls, no play head, nothing clickable.
 *
 * Heights mirror the original slider's per-breakpoint module heights
 * (700 / 768 / 960 / 720) so the page below it lands exactly where it did.
 */

.rw-hero-video {
	position: relative;
	/* Full-bleed, matching the original slider's fullWidth:true. */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	height: 700px;
	overflow: hidden;
	/* A still frame sits under the layers, so there is always something to
	   look at: while the footage buffers, and on any browser that refuses
	   muted autoplay outright. */
	background-color: #2A1A0D;
	background-image: url('hero/hero-poster.jpg');
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	line-height: 0;
}

/* The media itself never takes pointer input, so no player chrome can be
   summoned and the viewer cannot pause or scrub the loop. */
.rw-hero-video__media {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 0;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}

/*
 * The two layers of the blended loop.
 *
 * Both start transparent over the still frame and are faded up only once the
 * browser reports the footage playing. That is what guarantees no play head:
 * where autoplay is refused there is no <video> on screen for Safari to draw
 * its start-playback button over - just the still.
 *
 * The same transition carries the loop seam: the incoming layer starts from
 * zero underneath and dissolves over the outgoing one.
 */
video.rw-hero-video__media {
	z-index: 1;
	opacity: 0;
	transition: opacity 600ms linear;
}

video.rw-hero-video__media.is-live {
	opacity: 1;
}

/* Belt and braces against the iOS start-playback overlay and any residual
   control surface a browser might paint over a background video. */
video.rw-hero-video__media::-webkit-media-controls,
video.rw-hero-video__media::-webkit-media-controls-panel,
video.rw-hero-video__media::-webkit-media-controls-start-playback-button,
video.rw-hero-video__media::-webkit-media-controls-overlay-play-button,
video.rw-hero-video__media::-webkit-media-controls-play-button {
	display: none !important;
	-webkit-appearance: none;
	appearance: none;
	opacity: 0 !important;
}

/*
 * Colour grade.
 *
 * Sampled, the footage averages #A0551F - hue 25deg, saturation 0.81. The
 * brand palette sits at hue 26-29deg but saturation 0.54-0.67 (#432D1A ink,
 * #CA925C tan). So the hue was already right; the footage simply ran far more
 * vivid than everything around it, which is what read as disconnected.
 *
 * Saturation is pulled back toward the palette and a brand-brown wash is laid
 * over the top to seat it against the header and the section below.
 */
.rw-hero-video__media {
	filter: saturate(0.72) contrast(0.97) brightness(0.98);
}

.rw-hero-video::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	/* Two washes. The first sits under the headline: the copy is cream now,
	   and the footage behind it is a bright waterfall, a pale sea and wet
	   sand, which left the type at 2.9-3.9:1 unaided. A soft ellipse centred
	   on the setting lifts it without flattening the corners of the frame.
	   The second is the brand wash that seats the hero against the header. */
	background:
		radial-gradient(ellipse 68% 60% at 50% 50%,
			rgba(36, 20, 8, 0.52) 0%,
			rgba(36, 20, 8, 0.34) 52%,
			rgba(36, 20, 8, 0) 100%),
		linear-gradient(180deg,
			rgba(42, 26, 14, 0.24) 0%,
			rgba(42, 26, 14, 0.04) 34%,
			rgba(67, 45, 26, 0.20) 100%);
}

/* Native <video> path: plain object-fit cover. */
video.rw-hero-video__media {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* YouTube iframe path: oversize a 16:9 box so it covers the banner and any
   residual branding at the frame edges sits outside the visible area. */
iframe.rw-hero-video__media {
	width: 100vw;
	height: 56.25vw;          /* 16:9 relative to width  */
	min-width: 177.7778vh;    /* 16:9 relative to height */
	min-height: 100%;
}

/*
 * Heights below are lower than the slider's originals (768/960/720). Those
 * were sized for a cropped still; against real 16:9 footage a 720px-tall box
 * on a 390px screen shows barely a third of the frame's width and slices the
 * subject in half. These keep the hero full-bleed while letting far more of
 * the shot survive the crop.
 */
@media (max-width: 1024px) {
	.rw-hero-video { height: 620px; }
}

/*
 * Below 778px the band is locked to 1.418:1 - 275px tall against a 390px
 * viewport, which is the band measured off the mockup. hero-mobile.* is
 * encoded at exactly that aspect (1152x812, cropped out of the 1080p master),
 * so the mockup's framing lands whole at every width in this range: nothing is
 * cropped a second time, and nothing is up-scaled. A fixed height here would
 * have re-cropped the already-tight framing into a letterbox slot on the
 * wider phones and small tablets.
 */
@media (max-width: 778px) {
	.rw-hero-video { height: 70.52vw; }
}


/* ---------------------------------------------------------------------
 * Hero headline
 *
 * Three lines set left, sitting in the open left-hand side of the frame.
 * FT Overpass ships a single 400 weight, so "slightly bold" is done with a
 * hairline stroke in the text's own colour - it thickens the letterforms
 * evenly and keeps their flow, where a synthesised bold would thicken them
 * unevenly and go blocky.
 * ------------------------------------------------------------------- */

.rw-hero-copy {
	position: absolute;
	z-index: 4;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	/* Line up with the same 1140px column the page content below uses. */
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 20px;
	pointer-events: none;
}

/* Scoped through .rw-hero-video: the hero sits inside an
   .elementor-widget-container, and the theme targets
   `.elementor-widget-container p` at specificity (0,1,1), which beats a lone
   class and forces colour and size back to inherit. */
.rw-hero-video .rw-hero-copy__line {
	margin: 0;
	text-align: center;
	color: var(--rw-panel, #FBF4EE);
	/* Museo Sans first; it falls through to the header menu's face until the
	   licensed woff2 is dropped into assets/fonts and given an @font-face. A
	   copy installed on the reader's own machine is picked up either way. */
	font-family: 'Museo Sans', 'MuseoSans', var(--rw-font, 'FT Overpass', Quicksand, ui-sans-serif, system-ui, sans-serif) !important;
	font-size: clamp(1.6rem, 4.5vw, 3.5rem);
	line-height: 0.98;
	letter-spacing: -0.015em;
	word-spacing: -0.06em;
	font-weight: 400;   /* Museo Sans 500 */
	/* No shadow or stroke - the type sits flat on the footage. */
	text-shadow: none;
}

/* "Thrive" carries the script, set larger so it sits optically level with the
   upright capitals either side of it. */
.rw-hero-video .rw-hero-copy__script {
	/* !important because the brand sheet sets the body face on `span` with
	   !important; without it the script never applies. */
	font-family: 'Classic Roots', 'Pacifico', cursive !important;
	font-size: 1.34em;
	line-height: 1;
	/* Classic Roots ships one weight, and its brush texture lives in hairline
	   gaps inside the strokes. Inheriting the 600 set on the line makes the
	   browser synthesise a bold, which thickens the strokes and closes those
	   gaps - the letters go solid. Pinned to the face's real weight with
	   synthesis off so the texture survives. */
	font-weight: 400;
	font-synthesis-weight: none;
	font-synthesis: none;
}

@media (max-width: 1024px) {
	.rw-hero-copy { padding: 0 26px; }
}

/* On a phone the headline runs almost the full width of the band, so the
   ellipse is widened and given a floor: the beach scene puts "Survive" over
   bright foam, which measured 2.6:1 with the desktop shaping. */
@media (max-width: 778px) {
	.rw-hero-video::after {
		background:
			radial-gradient(ellipse 96% 52% at 50% 50%,
				rgba(36, 20, 8, 0.52) 0%,
				rgba(36, 20, 8, 0.40) 55%,
				rgba(36, 20, 8, 0.24) 100%),
			linear-gradient(180deg,
				rgba(42, 26, 14, 0.24) 0%,
				rgba(42, 26, 14, 0.04) 34%,
				rgba(67, 45, 26, 0.20) 100%);
	}
}

/*
 * The headline is set in vw across the whole range where the band is locked to
 * its aspect, so the setting is a straight scale of the mockup at any width -
 * every proportion below was measured off it at a 390px viewport:
 *
 *   38.4px type     -> 9.85vw     (26.7px of cap height in Worldstar)
 *   42.3px baselines-> 1.1 leading
 *   15.7px inset    -> 4.1vw
 *
 * The 13px (3.33vw) nudge is there because centring the block centres its box,
 * and the box is top-heavy: the script's ascender adds height above the
 * capitals that no ink balances below, which lifts the whole setting off
 * centre.
 */
@media (max-width: 778px) {
	.rw-hero-copy {
		padding: 0 4.1vw;
		/* No optical correction on top of the centring: line one's line box
		   grows to fit the script's ascender on "Th", and that extra height
		   above the capitals balances line two's descender almost exactly.
		   Measured on the rendered page the ink's own centre lands within a
		   third of a pixel of the band's. An offset here pushed it low. */
	}

	.rw-hero-video .rw-hero-copy__line {
		font-size: 7.2vw;
		line-height: 1.0;
	}
}