/**
 * Page Builder (Flexible Content) styles. Enqueued only on pages that
 * have page_builder rows (see inc/theme-setup.php) so other templates
 * don't pay for this weight. The base .btn classes live in main.css
 * instead, since sitewide chrome (the header CTA) needs them too and
 * main.css always loads.
 */

/* These big section titles use the Kit's default heading font
   (Tahoma) — confirmed via DevTools on the live site — not the brand
   display font (MonumentExtended) used elsewhere on the page. */
.section-kicker {
	font-family: Tahoma, sans-serif;
	text-align: left;
	margin: 0 0 32px;
	padding: 0 24px;
}

.section-kicker--center {
	text-align: center;
}

/* ---------- Hero ---------- */
.hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: var(--bf-color-white);
	background: var(--bf-color-primary);
	overflow: hidden;
}

.hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero__bg-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.hero__bg-video--desktop iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 177.77vh; /* 16:9 cover trick */
	height: 100vh;
	min-width: 100%;
	min-height: 56.25vw;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.hero__bg-poster {
	display: none;
}

.hero__bg-video--mobile,
.hero__bg-video--mobile video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__bg-video--mobile {
	display: none;
}

.hero__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
}

/* The 54% max-width on .hero__title below is a percentage of THIS
   element, which is why it needs the sitewide 1270px container cap —
   without it, .hero__content stretches to the full hero width and
   54% of that is too narrow, wrapping the subtitle to two lines
   instead of the one line it is on the live site. */
.hero__content {
	position: relative;
	z-index: 1;
	text-align: center;
	width: 100%;
	max-width: 1270px;
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
}

/* Both kicker lines confirmed from the widget's own typography: "Built
   From" is 128px, "The Ground Up" is 90px — two different sizes, not
   one shared size like I had. Font is Tahoma (the Kit's default
   heading font), not the brand display font — confirmed via DevTools
   on the live site (both h1 and h2 report font-family: Tahoma).

   Sizes below are those measurements reduced 20% and given normal
   (positive) line spacing — the negative margin that used to pull the
   two lines together was tuned for the old condensed display font and
   made Tahoma's wider letterforms look cramped/overlapping. */
.hero__kicker {
	font-family: Tahoma, sans-serif;
	margin: 0;
	line-height: 1.1;
	text-transform: uppercase;
	font-weight: 900;
}

.hero__kicker--1 {
	font-size: clamp(1.6rem, 7.2vw, 6.4rem);
}

.hero__kicker--2 {
	font-size: clamp(1.2rem, 5.2vw, 4.5rem);
	margin-top: 0.15em;
}

/* This is the gold subtitle box (#D7A048 on 45% black), not a plain
   line of text — confirmed from the widget's own background/color.
   Font is Tahoma (same as the kickers, not the body font), and the
   box only has vertical padding (13px 0, no horizontal) — confirmed
   via DevTools on the live site, where this combination is what keeps
   the text on one line at this width instead of wrapping. */
.hero__title {
	font-family: Tahoma, sans-serif;
	font-weight: 400;
	font-size: clamp(1rem, 2.5vw, 1.875rem);
	color: var(--bf-color-accent);
	background: rgba(0, 0, 0, 0.45);
	max-width: 54%;
	margin: 24px auto 32px;
	padding: 13px 0;
}

/* Olive-filled, white-bordered, 6px corners — not the thin pill
   outline I had. Background is the Kit's global Secondary color.
   Padding is 15px 40px on the live site (wider than the base .btn's
   14px 32px) and the button has a fixed (not max) width of 300px,
   border-box — confirmed via DevTools; content+padding alone don't
   reach 300px, so it needs the explicit width, not just a cap. */
.hero__cta {
	background: var(--bf-color-secondary);
	border: 1px solid var(--bf-color-white);
	border-radius: 6px;
	color: var(--bf-color-white);
	font-family: 'Matter', var(--bf-font-body);
	font-size: 20px;
	padding: 15px 40px;
	width: 300px;
	box-sizing: border-box;
}

.hero__cta:hover {
	background: var(--bf-color-primary);
	border-color: var(--bf-color-primary);
}

.hero__explore {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 15px;
	color: var(--bf-color-white);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 20px;
	margin-top: 90px;
	font-family: var(--bf-font-body);
}

/* ---------- About ---------- */
/* Same bg-5-new.svg used on the newsletter banner, layered over the
   dark-green base color — confirmed from this section's own
   background_image setting, not just a flat fill. */
.about {
	background: var(--bf-color-dark-green) url('../images/newsletter-bg.svg') top center / cover no-repeat;
	color: var(--bf-color-white);
	padding: 140px 0;
}

/* Real heading is 60px, centered, uppercase, tight line-height, wide
   letter-spacing — confirmed from the widget's own typography
   settings (this section's "kicker" is a full title, not a small
   eyebrow label like other sections use theirs for). */
.about .section-kicker {
	text-align: center;
	font-size: 60px;
	line-height: 0.9;
	text-transform: uppercase;
	letter-spacing: 6px;
	margin-bottom: 40px;
}

@media (max-width: 767px) {
	.about .section-kicker {
		font-size: 30px;
	}
}

.about__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
	padding: 0 24px;
	max-width: 1200px;
	margin: 0 auto;
}

.about__image img {
	width: 100%;
	border-radius: 8px;
}

.about__body h3 {
	font-family: var(--bf-font-heading);
	font-weight: 400;
	font-size: 1.5rem;
}

.about__body p {
	color: var(--bf-color-white);
	line-height: 1.6;
}

/* Real widget is a 3-column gallery (gallery_columns: 3) — 5 logos
   wrap 3-over-2, not a single flexed row. */
.about__logos--desktop {
	display: grid;
	grid-template-columns: repeat(3, auto);
	column-gap: 32px;
	row-gap: 24px;
	align-items: center;
	justify-content: start;
	margin-top: 24px;
}

.about__logos--desktop img {
	max-height: 48px;
	width: auto;
	filter: grayscale(1) brightness(2);
	opacity: 0.8;
}

.about__logos--mobile {
	display: none;
}

.about__logos--mobile .swiper-slide img {
	max-height: 48px;
	width: auto;
	margin: 0 auto;
	filter: grayscale(1) brightness(2);
	opacity: 0.8;
}

@media (max-width: 767px) {
	.about__grid {
		grid-template-columns: 1fr;
	}

	.about__logos--desktop {
		display: none;
	}

	.about__logos--mobile {
		display: block;
	}
}

/* ---------- Benefits ---------- */
.benefits {
	background: var(--bf-color-benefits-bg);
	color: var(--bf-color-primary);
	padding: 80px 24px;
}

/* Heading: 60px, bold, uppercase, letter-spacing 6px, centered, capped
   at 950px — confirmed from the widget's own typography settings
   (this section's kicker is a full title, same pattern as About Us). */
.benefits .section-kicker {
	max-width: 1000px;
	margin: 0 auto 120px;
	font-size: 51px;
	font-weight: bold;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: 6px;
	text-align: center;
}

@media (max-width: 767px) {
	.benefits .section-kicker {
		font-size: 25px;
		margin-bottom: 60px;
	}
}

.benefits__grid {
	max-width: 1200px;
	margin: 45px auto 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	text-align: left;
}

/* Card itself isn't in the source widget's own settings (its content
   background is fully transparent there) — added on request to match
   what's visibly on the live site, with the icon square overlapping
   its top-left corner. */
.benefit-card {
	position: relative;
	background: var(--bf-color-primary);
	padding: 56px 24px 24px;
	border-radius: 0 30px 0 30px;
}

.benefit-card__icon {
	position: absolute;
	top: -35px;
	left: 24px;
	width: 90px;
	height: 90px;
	box-sizing: border-box;
	padding: 14px;
	background: var(--bf-color-secondary);
	border-radius: 10px;
}

.benefit-card__title {
	color: var(--bf-color-white);
	font-family: var(--bf-font-body);
	font-weight: 600;
	font-size: 1.25rem;
	margin: 0 0 8px;
}

.benefit-card__text {
	color: var(--bf-color-white);
	margin: 0;
	opacity: 0.9;
}

@media (max-width: 767px) {
	.benefits__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---------- Membership CTA banner ---------- */
/* Same bg-5-new.svg as About Us / newsletter banner — confirmed from
   this section's own background_image setting. */
.membership-cta {
	background: var(--bf-color-dark-green) url('../images/newsletter-bg.svg') top center / cover no-repeat;
	color: var(--bf-color-white);
	padding: 140px 24px 50px;
	text-align: center;
}

.membership-cta__logo {
	max-width: 1200px;
	width: 100%;
	padding: 0 24px;
	box-sizing: border-box;
	margin: 0 auto 40px;
}

/* Real values confirmed from the section's own settings: 10px solid
   #3E4823 border, 5px radius, black fill, columns split ~37/63 (not
   50/50), content centered rather than left-aligned. No width cap was
   set in the source (boxed to the normal content width) — 960px read
   far too small next to the rest of the page, sized up to match. */
.membership-cta__row {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 37% 63%;
	background: var(--bf-color-primary);
	border: 10px solid #3E4823;
	border-radius: 5px;
	text-align: center;
	overflow: hidden;
}

.membership-cta__media {
	height: 100%;
	box-sizing: border-box;
	padding: 24px;
}

.membership-cta__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.membership-cta__body {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 28px;
	padding: 0 0 50px;
}

/* Full-bleed to the column's top/right edges — no gap, not centered
   at a fixed max-width. */
.membership-cta__promo {
	align-self: stretch;
	width: 100%;
	margin: 0;
}

.membership-cta__body h2 {
	font-family: var(--bf-font-body);
	font-weight: 700;
	font-size: 1.6rem;
	margin: 0;
	padding: 0 40px;
}

.membership-cta__fineprint {
	font-size: 0.8rem;
	color: var(--bf-color-text);
	margin: 0;
}

@media (max-width: 767px) {
	.membership-cta__row {
		grid-template-columns: 1fr;
	}
}

/* ---------- Pricing tabs ---------- */
/* Real design: white section base color, a gym photo (cover), and a
   black overlay at 40% opacity — confirmed from the section's actual
   background_image + background_overlay_color/opacity settings. */
/* Section padding is 140px top/bottom in the source, not 80px — this
   section reads noticeably shorter without it. */
.pricing {
	background:
		linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
		url('../images/pricing-bg.jpeg') center top / cover no-repeat,
		var(--bf-color-white);
	color: var(--bf-color-white);
	padding: 140px 24px;
}

.pricing-tabs {
	max-width: 1200px;
	margin: 0 auto;
}

/* Real heading is 60px, bold, uppercase, letter-spacing 6px — same
   family of headings as About Us / Benefits, just not yet sized to
   match (the small default made the tab pill read as oversized by
   comparison, though the pill's own dimensions were already correct). */
.pricing .section-kicker {
	font-size: 60px;
	font-weight: bold;
	line-height: 0.9;
	text-transform: uppercase;
	letter-spacing: 6px;
	margin-bottom: 20px;
}

@media (max-width: 767px) {
	.pricing .section-kicker {
		font-size: 25px;
	}
}

/* One solid black pill holds all 3 controls (not separate outlined
   buttons) — confirmed from tabs_control_wrapper_border_radius:100 on
   the wrapper itself, with the active control alone getting its own
   gold pill inside it. */
.pricing-tabs__controls {
	display: flex;
	justify-content: center;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto 50px;
	background: var(--bf-color-primary);
	border-radius: 999px;
	padding: 12px;
}

.pricing-tabs__control {
	padding: 12px 40px;
	border-radius: 999px;
	border: none;
	background: transparent;
	color: var(--bf-color-white);
	font-family: var(--bf-font-body);
	font-size: 20px;
	font-weight: 900;
	cursor: pointer;
}

.pricing-tabs__control.is-active {
	background: var(--bf-color-accent);
	color: var(--bf-color-primary);
}

.pricing-tabs__panel {
	display: none;
}

.pricing-tabs__panel.is-active {
	display: block;
}

/* Plans sit edge-to-edge with the same background so they read as one
   unified strip (diagonal-rounded corners: top-left of the first plan,
   bottom-right of the last) — matches the live site exactly, it's not
   a set of separate cards with gaps. */
.pricing-plans {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: stretch;
	max-width: 1200px;
	margin: 0 auto;
}

.pricing-plan {
	background: var(--bf-color-secondary);
	padding: 32px 28px;
	text-align: center;
	display: flex;
	flex-direction: column;
	height: 100%;
	border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.pricing-plan:first-child {
	border-left: none;
	border-radius: 60px 0 0 0;
}

.pricing-plan:last-child {
	border-radius: 0 0 60px 0;
}

.pricing-plan__header {
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.pricing-plan__body {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.pricing-plan .btn {
	margin-top: auto;
}

.pricing-plan__name {
	font-family: var(--bf-font-body);
	font-weight: 400;
	font-size: 1.1rem;
	margin: 0 0 8px;
}

.pricing-plan--featured .pricing-plan__name {
	font-weight: 700;
}

.pricing-plan__price {
	font-family: var(--bf-font-heading);
	font-weight: 900;
	font-size: 2rem;
	margin: 0;
}

.pricing-plan__year {
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.85rem;
	margin: 4px 0 0;
}

.pricing-plan__year-was {
	text-decoration: line-through;
	margin-right: 4px;
}

.pricing-plan__features {
	list-style: none;
	padding: 0;
	margin: 0 0 28px;
	font-size: 0.9rem;
	line-height: 2;
	text-align: left;
}

.pricing-plan__features li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.pricing-plan__feature-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

/* Buy button used inside plan cards/banners — white pill, brand-green
   text, 6px corners (NOT the fully-round .btn default). */
.btn--plan {
	background: var(--bf-color-white);
	border-color: var(--bf-color-white);
	color: #61703A;
	border-radius: 6px;
}

@media (max-width: 900px) {
	.pricing-plans {
		grid-template-columns: 1fr;
	}

	.pricing-plan {
		border-left: none;
		border-top: 1px solid rgba(255, 255, 255, 0.15);
	}

	.pricing-plan:first-child {
		border-top: none;
	}
}

/* ---------- Services carousel ---------- */
/* Section is its own dark base color WITH a photo (banne.jpg) on top,
   150px/140px top/bottom padding — confirmed from the section's own
   background_image + padding, not just the flat fill I had. */
.services {
	background:
		linear-gradient(rgba(10, 10, 9, 0.4), rgba(10, 10, 9, 0.4)),
		url('../images/services-bg.jpg') center center / cover no-repeat,
		var(--bf-color-services-bg);
	color: var(--bf-color-white);
	padding: 150px 0 140px;
	position: relative;
}

.services .section-kicker {
	font-size: 60px;
	font-weight: bold;
	line-height: 0.9;
	text-transform: uppercase;
	letter-spacing: 6px;
	margin-bottom: 40px;
}

@media (max-width: 767px) {
	.services .section-kicker {
		font-size: 25px;
	}
}

/* Outer wrapper: positions the arrows in the side margins. No padding
   or overflow-hidden here — those go on .services__carousel-clip only,
   so the arrows (positioned further out, outside that clip box) never
   get cut off, and the clip box itself never shows a sliver of the
   next/previous slide. */
.services__carousel {
	max-width: 1420px;
	margin: 0 auto;
	position: relative;
}

.services__carousel-clip {
	max-width: 1200px;
	margin: 0 auto;
	overflow: hidden;
}

/* Real card border is a solid 3px near-black line with 10px corners —
   not just a plain overflow-hidden clip. */
.services__carousel-clip .swiper-slide {
	position: relative;
	box-sizing: border-box;
	border: 3px solid #040404;
	border-radius: 10px;
	overflow: hidden;
}

.services__carousel .swiper-slide img {
	width: 100%;
	height: 320px;
	object-fit: cover;
	display: block;
}

/* Circular gold-outline arrows, confirmed from the widget's own
   custom_css — not Swiper's default squares. */
.services__carousel .swiper-button-prev,
.services__carousel .swiper-button-next {
	box-sizing: border-box;
	width: 60px;
	height: 60px;
	background: transparent;
	border: 1px solid #D29D47;
	border-radius: 50%;
	color: var(--bf-color-white);
	top: 50%;
}

/* Sit in the 60px margin outside the clipped image area (outer
   wrapper is 1320px, the clip box inside it is 1200px) — never over
   the cards themselves. */
.services__carousel .swiper-button-prev {
	left: 0;
}

.services__carousel .swiper-button-next {
	right: 0;
}

.services__carousel .swiper-button-prev::after,
.services__carousel .swiper-button-next::after {
	font-size: 18px;
}

.services__carousel .swiper-button-prev:hover,
.services__carousel .swiper-button-next:hover {
	background: #D29D47;
}

@media (max-width: 1024px) {
	.services__carousel .swiper-button-prev,
	.services__carousel .swiper-button-next {
		width: 40px;
		height: 40px;
	}

	.services__carousel .swiper-button-prev::after,
	.services__carousel .swiper-button-next::after {
		font-size: 14px;
	}
}

.services__caption {
	position: absolute;
	bottom: 16px;
	left: 16px;
	right: 16px;
	margin: 0;
	font-family: var(--bf-font-body);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--bf-color-white);
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

/* ---------- Team ---------- */
.team {
	background: var(--bf-color-dark-green);
	color: var(--bf-color-white);
	padding: 80px 24px;
}

.team .section-kicker {
	font-size: 60px;
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 2.9px;
	padding-bottom: 20px;
	margin-bottom: 20px;
}

@media (max-width: 767px) {
	.team .section-kicker {
		font-size: 28px;
	}
}

.team__grid {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	align-items: stretch;
}

/* Circular photo (olive ring) overlapping a plain dark card below —
   confirmed visually against the live site twice; the underlying JSON
   didn't carry this (Elementor's newer "Global Classes" apply this
   kind of styling outside any one widget's own settings, so it never
   showed up in the widget export). Card itself has no border of its
   own — only the photo ring does. */
.team-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.team-card--hidden {
	display: none;
}

/* Square gray backdrop (matches the image widget's own #CECECE
   background) framing the circular photo, which overlaps down into
   the dark info card below. */
.team-card__photo-frame {
	width: 100%;
	aspect-ratio: 1 / 1;
	background: #CECECE;
	display: flex;
	align-items: center;
	justify-content: center;
}

.team-card__photo {
	width: 65%;
	aspect-ratio: 1 / 1;
	margin-bottom: -20px;
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid #3E4823;
	background: #CECECE;
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}

.team-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.team-card__body {
	box-sizing: border-box;
	width: 100%;
	text-align: center;
	background: #111111;
	padding: 35px 15px 15px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.team-card__role {
	font-size: 0.9rem;
	margin-bottom: 8px;
}

.team-card__name {
	font-family: var(--bf-font-heading);
	font-weight: 400;
	font-size: 1.25rem;
	margin: 0 0 16px;
}

.team-card__body .btn {
	margin-top: auto;
	align-self: center;
}

.team__load-more {
	text-align: center;
	margin-top: 40px;
}

@media (max-width: 900px) {
	.team__grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Standalone section heading ----------
   The Memberships page title. Measured on the live page (not guessed):
   the section starts 100px down with 70px of top padding (so the title
   sits 170px from the top, clear of the transparent site header),
   Tahoma 54px/65px bold uppercase in white, and 34px under it before
   the pricing rows. The 34px is padding (not the heading's margin) on
   purpose: a bottom margin would collapse out of this section and show
   the white page background as a gap under the title. */
.section-heading-block {
	background: var(--bf-color-primary);
	padding: 170px 24px 34px;
}

.section-heading-block .section-kicker {
	margin: 0;
	padding: 0;
	font-size: 54px;
	font-weight: 700;
	line-height: 65px;
	text-transform: uppercase;
	color: var(--bf-color-white);
}

@media (max-width: 767px) {
	.section-heading-block {
		padding-bottom: 28px;
	}

	.section-heading-block .section-kicker {
		font-size: 34px;
		line-height: 41px;
	}
}

/* ---------- Pricing banner (wide, single plan — e.g. Guest Pass) ----------
   Uses the site's global Accent color (gold), not a dark card — confirmed
   from the live design's __globals__ background reference, not guessed. */
.pricing-banner {
	background: var(--bf-color-primary);
	padding: 0 24px 50px;
}

.pricing-banner__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 2fr;
	color: var(--bf-color-primary);
}

/* Each half paints its own background (like the plan cards below) so
   its own border-radius actually shows — radius on a transparent child
   of a background-holding parent renders as nothing. */
.pricing-banner__intro {
	background: var(--bf-color-accent);
	padding: 25px 30px 25px 60px;
	border-radius: 50px 0 0 0;
}

.pricing-banner__details {
	background: var(--bf-color-accent);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 25px 60px 25px 40px;
	border-left: 1px solid var(--bf-color-primary);
	border-radius: 0 0 50px 0;
}

.pricing-banner__name {
	font-family: var(--bf-font-body);
	font-weight: 700;
	font-size: 1.1rem;
	margin: 0 0 4px;
}

.pricing-banner__price {
	font-family: var(--bf-font-heading);
	font-weight: 800;
	font-size: 2rem;
	margin: 0;
}

.pricing-banner__features {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 24px;
	font-size: 0.9rem;
}

.pricing-banner__features li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.pricing-banner .pricing-plan__feature-icon {
	/* The shared icon set is white-stroked (built for the dark green
	   plan cards) — invert to black so it reads on this gold banner. */
	filter: invert(1);
}

.pricing-banner .btn--outline {
	border-radius: 10px;
	border-width: 2px;
	flex-shrink: 0;
}

@media (max-width: 767px) {
	.pricing-banner__inner {
		grid-template-columns: 1fr;
	}

	.pricing-banner__intro {
		border-radius: 30px 30px 0 0;
		text-align: center;
	}

	.pricing-banner__details {
		flex-direction: column;
		border-left: none;
		border-top: 1px solid var(--bf-color-primary);
		border-radius: 0 0 30px 30px;
	}

	.pricing-banner__features {
		flex-direction: column;
	}
}

/* ---------- Pricing grid (cards, no tabs wrapper) ---------- */
.pricing-grid-section {
	background: var(--bf-color-primary);
	color: var(--bf-color-white);
	padding: 40px 24px 80px;
}

@media (max-width: 900px) {
	.pricing-grid-section .pricing-plans {
		grid-template-columns: 1fr;
	}
}

/* ---------- Page Banner (Services page title band) ---------- */
/* min-height 375px, top padding 118px (clears the transparent absolute
   header), bg photo + solid #050404 overlay at 0.6 opacity, bottom-
   center position — all confirmed from the section's own settings. */
.page-banner {
	position: relative;
	min-height: 375px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 118px 24px 0;
	box-sizing: border-box;
	overflow: hidden;
	background: var(--bf-color-dark-green);
}

/* About Us uses more top padding than Services (180px vs 118px) —
   confirmed from each page's own section settings. */
.page-banner--large {
	padding-top: 180px;
}

.page-banner__bg {
	position: absolute;
	inset: 0;
	background-position: bottom center;
	background-size: cover;
	background-repeat: no-repeat;
}

.page-banner__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(5, 4, 4, 0.6);
}

.page-banner__content {
	position: relative;
	z-index: 1;
	text-align: center;
	padding-top: 30px;
}

/* This h1 uses the Kit's default H1 font (Tahoma) — same reasoning as
   .section-kicker above: the widget's own settings only override
   size/weight/transform/line-height, not family, so it inherits the
   Kit's h1 override instead of the brand display font. */
/* Default weight (600) matches the Kit's own H1 default — confirmed
   via DevTools on the About page, which doesn't override it. Services'
   "SERVICES" title explicitly overrides to bold (700); that page's
   page_banner row has bold_heading enabled for the --bold modifier. */
.page-banner__heading {
	font-family: Tahoma, sans-serif;
	color: var(--bf-color-white);
	font-weight: 600;
	text-transform: uppercase;
	line-height: 0.9;
	font-size: 65px;
	margin: 0;
}

.page-banner__heading--bold {
	font-weight: bold;
}

/* About Us's "About Us" title is 80px vs Services' 65px — desktop
   only, tablet (50px) and mobile (38px) sizes are shared/identical
   between the two, confirmed from each page's own widget settings. */
.page-banner__heading--large {
	font-size: 80px;
}

@media (max-width: 1024px) {
	.page-banner__heading {
		font-size: 50px;
	}
}

@media (max-width: 767px) {
	.page-banner__heading {
		font-size: 38px;
	}
}

/* ---------- Content Row (alternating image+text, Services page) ---------- */
.content-row {
	padding: 80px 0;
	color: var(--bf-color-white);
	box-sizing: border-box;
}

/* The first Content Row on the page (right after the Page Banner) gets
   extra top padding in the real data (120px vs 80px everywhere else). */
.page-banner + .content-row {
	padding-top: 120px;
}

.content-row--green {
	background: var(--bf-color-dark-green) url('../images/newsletter-bg.svg') center center / cover no-repeat;
}

.content-row--gray {
	background: var(--bf-color-services-bg);
}

.content-row__grid {
	display: flex;
	align-items: flex-start;
	max-width: 1270px; /* live site's own .elementor-container width, measured directly */
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
}

.content-row__image {
	flex: 0 0 44.513%;
	max-width: 44.513%;
	order: 1;
	box-sizing: border-box;
}

.content-row__image img {
	display: block;
	width: 100%;
	border-radius: 10px;
}

.content-row__text {
	flex: 0 0 55.152%;
	max-width: 55.152%;
	order: 2;
	padding: 10px 0 0 20px;
	box-sizing: border-box;
}

.content-row--image-right .content-row__image {
	order: 2;
}

.content-row--image-right .content-row__text {
	order: 1;
	padding: 10px 20px 0 0;
}

/* "Wide image" ratio (~57/43 vs the standard ~45/55) — used by About's
   "Industry Leading Professionals" row, confirmed via direct
   measurement on the live site (56.95% / 42.71%). */
.content-row--wide-image .content-row__image {
	flex-basis: 56.954%;
	max-width: 56.954%;
}

.content-row--wide-image .content-row__text {
	flex-basis: 42.711%;
	max-width: 42.711%;
}

.content-row__heading {
	font-family: Tahoma, sans-serif;
	font-size: 45px;
	font-weight: 600;
	line-height: 1;
	margin: 0 0 16px;
}

.content-row__heading a {
	color: inherit;
	text-decoration: none;
}

.content-row__body {
	line-height: 1.6;
	max-width: 90%;
}

/* Services' text-editor widgets are 20px; About's are 18px — real
   per-page difference, confirmed from each widget's own settings. */
.content-row__body--md {
	font-size: 20px;
}

.content-row__body--sm {
	font-size: 18px;
}

.content-row__body p {
	margin: 0 0 1em;
}

.content-row__body p:last-child {
	margin-bottom: 0;
}

.content-row__button {
	display: inline-block;
	margin-top: 24px;
}

@media (max-width: 900px) {
	.content-row__grid {
		flex-direction: column;
	}

	.content-row__image,
	.content-row--image-right .content-row__image,
	.content-row--wide-image .content-row__image,
	.content-row__text,
	.content-row--image-right .content-row__text,
	.content-row--wide-image .content-row__text {
		flex: 0 0 100%;
		max-width: 100%;
		order: initial;
		padding: 0;
	}

	.content-row__text {
		margin-top: 24px;
	}

	.content-row__body {
		max-width: 100%;
	}
}

/* ---------- Text Intro (About page's "Our Gym. Our Story.") ---------- */
.text-intro {
	background: var(--bf-color-dark-green) url('../images/newsletter-bg.svg') center center / cover no-repeat;
	color: var(--bf-color-white);
	padding: 120px 20px;
	box-sizing: border-box;
}

.text-intro__inner {
	max-width: 1230px;
	margin: 0 auto;
}

.text-intro__heading {
	font-family: Tahoma, sans-serif;
	font-size: 45px;
	font-weight: 600;
	text-align: center;
	margin: 0 0 24px;
}

.text-intro__body {
	font-size: 18px;
	line-height: 1.6;
	text-align: left;
}

.text-intro__body p {
	margin: 0 0 1em;
}

.text-intro__body p:last-child {
	margin-bottom: 0;
}

/* ---------- Blog Banner ---------- */
/* Real background uses background-size:initial with a Y-offset — an
   editing quirk rather than deliberate art direction; simplified to a
   plain cover/center crop here, same treatment as every other banner
   photo in the theme. */
.blog-banner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 200px 24px 150px;
	box-sizing: border-box;
	overflow: hidden;
	background: var(--bf-color-primary);
}

@media (max-width: 1024px) {
	.blog-banner {
		padding: 200px 24px 130px;
	}
}

@media (max-width: 767px) {
	.blog-banner {
		padding: 140px 24px 60px;
	}
}

.blog-banner__bg {
	position: absolute;
	inset: 0;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

.blog-banner__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(27, 27, 27, 0.5);
}

.blog-banner__content {
	position: relative;
	z-index: 1;
	max-width: 500px;
	text-align: center;
}

.blog-banner__heading {
	color: var(--bf-color-white);
	font-size: 46px;
	font-weight: 600;
	margin: 0;
}

@media (max-width: 767px) {
	.blog-banner__heading {
		font-size: 25px;
	}
}

/* ---------- Blog Grid ---------- */
.blog-grid {
	background: var(--bf-color-services-bg);
	padding: 75px 24px;
	box-sizing: border-box;
}

@media (max-width: 767px) {
	.blog-grid {
		padding: 25px 24px;
	}
}

/* Unlike every other section in the theme, the real posts section is
   Elementor "full_width" layout (not the standard 1270px boxed
   container) — confirmed via DevTools: cards measure ~508px wide at
   a 1600px viewport, only possible with an uncapped, near-full-width
   grid. So no max-width here; only .blog-grid's own side padding
   bounds it. */
.blog-grid__inner {
	margin: 0 auto;
}

.blog-grid__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 20px;
	row-gap: 30px;
}

@media (max-width: 1024px) {
	.blog-grid__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.blog-grid__list {
		grid-template-columns: 1fr;
	}
}

.blog-card {
	background: var(--bf-color-white);
	border: 1px solid #060303;
	border-radius: 25px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.blog-card__thumb {
	display: block;
	aspect-ratio: 10 / 7;
	overflow: hidden;
}

.blog-card__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blog-card__body {
	padding: 20px;
	flex: 1;
}

.blog-card__title {
	margin: 0 0 25px;
	font-size: 21px;
}

.blog-card__title a {
	font-family: Tahoma, sans-serif;
	color: #636363;
	font-weight: 600;
	text-decoration: none;
}

.blog-card__excerpt {
	color: #636363;
	font-size: 16px;
	line-height: 1.5;
	margin-bottom: 16px;
}

.blog-card__excerpt p {
	margin: 0;
}

.blog-card__read-more {
	display: inline-block;
	color: #000000;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 0.5px;
	padding: 0 20px 16px;
}

/* ---------- Blog pagination ---------- */
.blog-grid__pagination {
	margin-top: 50px;
	display: flex;
	justify-content: center;
}

.blog-grid__pagination ul {
	list-style: none;
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
}

.blog-grid__pagination a,
.blog-grid__pagination span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	color: var(--bf-color-white);
	text-decoration: none;
	border-radius: 6px;
	font-size: 14px;
}

.blog-grid__pagination a:hover {
	background: var(--bf-color-accent);
	color: var(--bf-color-primary);
}

.blog-grid__pagination span.current {
	background: var(--bf-color-accent);
	color: var(--bf-color-primary);
	font-weight: 700;
}

.blog-grid__empty {
	color: var(--bf-color-white);
	text-align: center;
}

/* ---------- Trainer Cards (Personal Training page) ---------- */
.trainer-cards {
	background: var(--bf-color-services-bg);
	color: var(--bf-color-white);
	padding: 80px 24px;
}

.trainer-cards__inner {
	max-width: 1270px;
	margin: 0 auto;
}

.trainer-cards__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

@media (max-width: 767px) {
	.trainer-cards__grid {
		grid-template-columns: 1fr;
	}
}

.trainer-card {
	background: var(--bf-color-primary);
	border-radius: 10px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
	padding: 20px;
	text-align: center;
}

.trainer-card__name {
	font-family: Tahoma, sans-serif;
	font-size: 32px;
	font-weight: 600;
	margin: 0 0 8px;
}

.trainer-card__name a {
	color: inherit;
	text-decoration: none;
}

.trainer-card__instagram {
	display: inline-block;
	color: var(--bf-color-white);
	font-size: 30px;
	margin-bottom: 12px;
}

.trainer-card__photo {
	height: 350px;
	padding: 0 50px;
	box-sizing: border-box;
	margin-bottom: 16px;
}

.trainer-card__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
}

@media (max-width: 900px) {
	.trainer-card__photo {
		height: 200px;
	}
}

@media (max-width: 767px) {
	.trainer-card__photo {
		height: auto;
		padding: 0;
	}

	.trainer-card__photo img {
		height: auto;
	}
}

.trainer-card__bio {
	font-size: 20px;
	line-height: 1.6;
	margin-bottom: 16px;
	text-align: left;
	padding: 0 10px;
}

.trainer-card__bio p {
	margin: 0 0 1em;
}

.trainer-card__bio p:last-child {
	margin-bottom: 0;
}

.trainer-card__button {
	display: inline-block;
	background: var(--bf-color-white);
	color: var(--bf-color-secondary);
	font-size: 20px;
	font-weight: 700;
	border-radius: 8px;
	padding: 14px 32px;
	text-decoration: none;
}

.trainer-card__button:hover {
	background: var(--bf-color-accent);
}

/* ---------- Video Embed (Virtual Tour) ---------- */
.video-embed {
	background: var(--bf-color-primary);
	padding: 60px 24px 80px;
}

.video-embed__inner {
	max-width: 1270px;
	margin: 0 auto;
}

/* Same 16:9 fixed-ratio technique the original Elementor embed used
   (padding-bottom: 56.25% on a 0-height relative box, iframe absolutely
   filling it) — kept identical since it's just a responsive video box,
   nothing design-specific to replace. */
.video-embed__frame {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
	border-radius: 15px;
	overflow: hidden;
}

.video-embed__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}