/* Homepage hero video styles */
.hero-section {
	position: relative;
/* 	height: 100vh; */
	overflow: hidden;
}

.video-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.video-container iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 56.25vw;
	min-height: 100vh;
	min-width: 100vw;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%,
		rgba(0, 0, 0, 0.3) 100%);
	z-index: 2;
}

.hero-banner-sec {
	position: relative;
	z-index: 3;
	height: 100%;
	display: flex;
	align-items: center;
	color: white;
}

/* Other styles */

/* Our Locations: this section renders edge-to-edge (no .container-fluid),
   so add horizontal padding on small screens to keep cards off the edges. */

/* Our Locations: Richmond Hill flagship emphasis */
.flagship-location {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	padding: clamp(24px, 2vw, 48px);
	background: var(--j17-surface);
	border: 2px solid var(--j17-accent);
	border-radius: clamp(18px, 1.25vw, 48px);
	/* On the dark theme this was a lime glow. A glow reads as a rendering fault on a
	   light page, so the flagship is lifted with a warm elevation shadow instead. */
	box-shadow: 0 18px 40px -24px rgba(27, 25, 23, 0.28);
}

.flagship-location .flagship-badge {
	display: inline-block;
	margin-bottom: 16px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--j17-accent);
	color: var(--j17-on-accent);
	font-weight: 700;
	font-size: clamp(12px, 0.72vw, 15px);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.flagship-location .flagship-title {
	font-size: clamp(28px, 2.2vw, 48px);
	margin-bottom: 8px;
}

.flagship-location .flagship-address {
	font-weight: 600;
	margin-bottom: 16px;
}

.flagship-location .flagship-desc {
	max-width: 640px;
	margin-bottom: 24px;
}

/* Our Locations: "Training" tag on the satellite (non-flagship) cards */
.commitment-sec .commitment-wrapper .commitment-block .loc-type {
	position: absolute;
	bottom: 24px;
	right: 24px;
	z-index: 2;
	padding: 8px 12px;
	border-radius: clamp(4px, 0.417vw, 16px);
	/* This chip sits on a location photograph, not on the page, so it stays a solid
	   dark tint. Agave rather than terracotta: it is a label, not a call to action,
	   and must not compete with the buttons. */
	background: rgba(94, 115, 85, 0.88);
	color: var(--j17-on-image);
	font-weight: 600;
	font-size: clamp(11px, 0.65vw, 14px);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

@media (max-width: 490px) {
	.commitment-sec .commitment-wrapper .commitment-block .loc-type {
		bottom: 12px;
		right: 12px;
		padding: 4px 8px;
	}
}

/*
 * Title banner: carry the brand Tagline, not the H1.
 *
 * The handoff spec is one H1 per page, on the keyword sentence in the body, with the
 * Tagline as the visually dominant line. app-20260714.css only styles ".title-banner h1",
 * so this repeats that rule for a <p class="banner-title"> and lets the banner hold a
 * non-heading element.
 */
.title-banner .banner-title {
	font-family: "Nexa", sans-serif;
	font-size: clamp(42px, 5.5vw, 140px);
	font-style: normal;
	font-weight: 900;
	line-height: 130%;
	letter-spacing: -3.6px;
	background: linear-gradient(180deg, var(--j17-on-image) 68%, rgba(153, 153, 153, 0.3) 85%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-transform: capitalize;
	padding-top: clamp(98px, 5vw, 150px);
	padding-bottom: clamp(40px, 5vw, 150px);
	margin-bottom: 0;
	text-align: center;
}

/*
 * Scrims for the photographic banners.
 *
 * The hero and the page banners are the only places left where type sits on an image, so
 * they are the only places still using white text. The renders they use are bright warm
 * travertine, and white on bare travertine measures around 1.6:1 — the headline was
 * already hard to read on the dark theme and there is nowhere left to hide it now that
 * the rest of the page is light.
 *
 * A warm near-black scrim fixes it without losing the photograph: it is weakest through
 * the middle of the frame, where there is no type, and strongest at the left and right
 * where the headline and the copy block sit. The tint is warm (26,18,13) rather than
 * neutral black so it reads as shadow in the space rather than as a grey wash.
 */
.hero-banner-sec::before,
.title-banner::before,
.inner-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.hero-banner-sec::before {
	background:
		linear-gradient(180deg, rgba(26, 18, 13, 0.55) 0%, rgba(26, 18, 13, 0) 20%),
		linear-gradient(105deg, rgba(26, 18, 13, 0.82) 0%, rgba(26, 18, 13, 0.6) 38%,
			rgba(26, 18, 13, 0.42) 60%, rgba(26, 18, 13, 0.74) 100%);
}

.title-banner,
.inner-banner {
	position: relative;
}

.title-banner::before,
.inner-banner::before {
	background: linear-gradient(180deg, rgba(26, 18, 13, 0.72) 0%, rgba(26, 18, 13, 0.48) 55%,
		rgba(26, 18, 13, 0.62) 100%);
}

/* Lift the banner content back above its own scrim. */
.hero-banner-sec > *,
.title-banner > *,
.inner-banner > * {
	position: relative;
	z-index: 1;
}

/*
 * Mobile menu button.
 *
 * The hamburger is a Font Awesome glyph rather than an image, so it takes its colour from
 * the stylesheet. It sits inside .main-menu__right, which carries an "i { color: ink }"
 * rule from the template for a search icon on a light chip. That selector is more specific
 * than .mobile-nav__toggler, so without this the glyph renders dark against the hero and
 * all but disappears. Match the nav links beside it instead.
 */
.header .navigation .main-menu__right .mobile-nav__toggler i {
	color: var(--j17-on-image);
	transition: 500ms;
}

.header .navigation .main-menu__right .mobile-nav__toggler:hover i {
	color: var(--j17-accent-text);
}

/*
 * Card links ("Explore Strength", "Explore Personal Training", ...).
 *
 * These were plain "Read more" anchors, which read as a blog teaser sitting under a class
 * card rather than a way into the page. Three things make them read as navigation instead:
 *
 *  - The arrow is a masked SVG, not a Font Awesome glyph or a Unicode arrow. A mask takes
 *    its colour from currentColor, so the arrow follows the link through hover and focus
 *    without a second colour rule, and its metrics do not shift with the loaded font.
 *  - The underline is on .link-arrow .label, not on the anchor, so it stays under the words
 *    and does not stretch beneath the arrow as it slides. It is drawn with a transparent
 *    text-decoration-color that fades in, which keeps the baseline still on hover - an
 *    underline that appears and disappears reflows the line.
 *  - The whole thing is inline-flex, so the arrow is vertically centred against the cap
 *    height rather than the baseline.
 */
.link-arrow {
	--link-arrow-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E");
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--j17-accent-text);
	font-weight: 600;
	font-size: clamp(14px, 0.833vw, 18px);
	line-height: 1.3;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: color 300ms ease;
}

.link-arrow:hover,
.link-arrow:focus-visible {
	color: var(--j17-accent-hover);
}

.link-arrow .label {
	text-decoration-line: underline;
	text-decoration-thickness: 1.5px;
	text-decoration-color: transparent;
	text-underline-offset: 4px;
	transition: text-decoration-color 300ms ease;
}

.link-arrow:hover .label,
.link-arrow:focus-visible .label {
	text-decoration-color: currentColor;
}

.link-arrow::after {
	content: "";
	flex-shrink: 0;
	width: 1.05em;
	height: 1.05em;
	background-color: currentColor;
	-webkit-mask-image: var(--link-arrow-glyph);
	mask-image: var(--link-arrow-glyph);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: transform 300ms ease;
}

.link-arrow:hover::after,
.link-arrow:focus-visible::after {
	transform: translateX(4px);
}

/* The accent is warm terracotta on a warm page, so the default focus ring is hard to
   see against it. Offset a ring in the link's own colour instead. */
.link-arrow:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 4px;
}

/*
 * Over a photograph the accent text is already lightened to sandstone (app.css re-points
 * --j17-accent-text inside these regions), and --j17-accent-hover would pull it back down
 * towards the dark body copy. Go to white there instead.
 */
.hero-section .link-arrow:hover,
.hero-section .link-arrow:focus-visible,
.hero-banner-sec .link-arrow:hover,
.hero-banner-sec .link-arrow:focus-visible,
.title-banner .link-arrow:hover,
.title-banner .link-arrow:focus-visible,
.inner-banner .link-arrow:hover,
.inner-banner .link-arrow:focus-visible {
	color: var(--j17-on-image);
}