/* InnerG Home section widgets — structural layout only; colour,
   typography and spacing are controlled per-instance via Elementor. */

/* Elementor's default ~10px .elementor-widget-wrap padding (same issue
   fixed for the Hero widgets) would otherwise add an unwanted extra gap on
   every side of these widgets' own precise container padding below. */
.elementor-widget-wrap:has( > .elementor-widget-innerg-disciplines ),
.elementor-widget-wrap:has( > .elementor-widget-innerg-mission ),
.elementor-widget-wrap:has( > .elementor-widget-innerg-studio-facility ),
.elementor-widget-wrap:has( > .elementor-widget-innerg-pillars ),
.elementor-widget-wrap:has( > .elementor-widget-innerg-club ),
.elementor-widget-wrap:has( > .elementor-widget-innerg-trainers ),
.elementor-widget-wrap:has( > .elementor-widget-innerg-schedule ),
.elementor-widget-wrap:has( > .elementor-widget-innerg-app-promo ),
.elementor-widget-wrap:has( > .elementor-widget-innerg-cta-banner ),
.elementor-widget-wrap:has( > .elementor-widget-innerg-locations ),
.elementor-widget-wrap:has( > .elementor-widget-innerg-map ),
.elementor-widget-wrap:has( > .elementor-widget-innerg-discipline-overview ),
.elementor-widget-wrap:has( > .elementor-widget-innerg-discipline-room ),
.elementor-widget-wrap:has( > .elementor-widget-innerg-discipline-curriculum ),
.elementor-widget-wrap:has( > .elementor-widget-innerg-discipline-sessions ) {
	padding: 0 !important;
}

/* ---------- Disciplines ---------- */

.innerg-disciplines {
	max-width: var( --container-max ); /* 80rem / 1280px, matches max-w-7xl */
	margin-inline: auto;
	padding-inline: 1.5rem; /* px-6 */
	padding-block: 6rem; /* py-24 */
}

.innerg-disciplines__header {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1.5rem;
	margin-block-end: 3.5rem; /* mb-14 */
}

@media ( min-width: 768px ) {
	.innerg-disciplines__header {
		flex-direction: row;
		align-items: flex-end;
	}
}

.innerg-disciplines__eyebrow {
	font-size: 0.75rem; /* 12px */
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var( --accent );
	margin-block-end: 1rem;
}

.innerg-disciplines__heading {
	font-family: var( --font-serif );
	font-weight: 500;
	line-height: 1.25;
	color: var( --brand-dark, var( --foreground ) );
	font-size: 2.25rem; /* 36px, mobile */
}

@media ( min-width: 768px ) {
	.innerg-disciplines__heading {
		font-size: 3.5rem; /* 56px */
	}
}

.innerg-disciplines__intro {
	font-size: 0.9375rem; /* 15px */
	line-height: 1.625;
	color: var( --muted-foreground );
	max-width: 24rem; /* max-w-sm */
}

@media ( min-width: 768px ) {
	.innerg-disciplines__intro {
		text-align: end;
	}
}

.innerg-disciplines__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background-color: var( --border );
	margin-block-end: 6rem; /* mb-24 */
}

@media ( min-width: 640px ) {
	.innerg-disciplines__grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( min-width: 1024px ) {
	.innerg-disciplines__grid {
		grid-template-columns: repeat( 4, 1fr );
	}
}

.innerg-disciplines__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 2rem;
	background: var( --background, #fff );
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.innerg-disciplines__card:hover {
	background-color: color-mix( in srgb, var( --secondary ) 60%, transparent );
}

.innerg-disciplines__icon {
	width: 2.75rem;
	height: 2.75rem;
	margin-block-end: 1.5rem;
	color: var( --accent );
}

.innerg-disciplines__icon svg,
.innerg-disciplines__icon i {
	width: 100%;
	height: 100%;
	font-size: 2.75rem;
}

.innerg-disciplines__name {
	font-family: var( --font-serif );
	font-weight: 500;
	font-size: 1.75rem; /* 28px */
	color: var( --brand-dark, var( --foreground ) );
	margin-block-end: 0.25rem;
}

.innerg-disciplines__category {
	font-size: 0.75rem; /* 12px */
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var( --muted-foreground );
	margin-block-end: 1rem;
}

.innerg-disciplines__tagline {
	font-size: 0.8125rem; /* 13px */
	line-height: 1.625;
	color: var( --muted-foreground );
}

/* The reference wraps the tagline in literal quote marks — added visually
   here rather than baked into the text field, so the same field stays
   reusable (e.g. if ever quoted elsewhere without quotes). */
.innerg-disciplines__tagline::before {
	content: '"';
}

.innerg-disciplines__tagline::after {
	content: '"';
}

.innerg-disciplines__details {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.innerg-disciplines__detail {
	position: relative;
	overflow: hidden;
	scroll-margin-top: 5rem;
	aspect-ratio: 16 / 9;
}

@media ( min-width: 768px ) {
	.innerg-disciplines__detail {
		aspect-ratio: 21 / 9;
	}
}

.innerg-disciplines__detail-media {
	position: absolute;
	inset: 0;
	background: #e7e5e4;
}

.innerg-disciplines__detail-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s ease;
}

.innerg-disciplines__detail:hover .innerg-disciplines__detail-media img {
	transform: scale( 1.02 );
}

.innerg-disciplines__detail-content {
	position: absolute;
	bottom: 0;
	inset-inline: 0;
	max-width: none;
	padding: 1.75rem; /* 28px, mobile */
	background: color-mix( in srgb, var( --card ) 92%, transparent );
	backdrop-filter: blur( 8px );
	-webkit-backdrop-filter: blur( 8px );
}

@media ( min-width: 768px ) {
	.innerg-disciplines__detail-content {
		inset-inline-end: auto;
		max-width: var( --innerg-disc-detail-max-width, 36rem ); /* 576px */
		padding: 2.25rem; /* 36px */
	}
}

.innerg-disciplines__detail-content .innerg-disciplines__category {
	/* Detail panels use a wider letter-spacing than the grid cards above
	   (0.25em vs 0.2em) despite sharing the same class — the reference
	   itself differentiates these two contexts this way. */
	letter-spacing: 0.25em;
	color: var( --accent );
	margin-block-end: 0.25rem;
}

.innerg-disciplines__detail-title {
	font-family: var( --font-serif );
	font-weight: 500;
	font-size: 1.875rem; /* 30px, mobile */
	color: var( --brand-dark, var( --foreground ) );
	margin-block-end: 0.75rem;
}

@media ( min-width: 768px ) {
	.innerg-disciplines__detail-title {
		font-size: 2.75rem; /* 44px */
	}
}

.innerg-disciplines__detail-lead {
	font-size: 0.9375rem; /* 15px */
	font-weight: 500;
	color: var( --brand-terracotta );
	margin-block-end: 0.5rem;
}

.innerg-disciplines__detail-body {
	font-size: 0.9375rem; /* 15px */
	line-height: 1.625;
	color: var( --muted-foreground );
}

/* .innerg-disciplines__mcards (see Disciplines_Widget::render_mobile_card())
   is the shared per-discipline card markup used by BOTH mobile display
   modes — hidden unconditionally here so it never paints on desktop, which
   keeps the .details overlay panels above instead. */
.innerg-disciplines__mcards {
	display: none;
}

.innerg-disciplines__mcard {
	display: none;
}

.innerg-disciplines__slider-nav {
	display: none;
}

/* ----- Mobile display modes (reusable pattern — see below) -----
   Both "Slider" and "Unified cards" solve the same problem: the reference's
   own mobile layout just stacks the compact grid directly above the full
   detail panels, which reads as the same 4 disciplines listed twice. Below
   the breakpoint, exactly one of these structures is shown (desktop's own
   .grid + .details stay hidden in both, replaced by .mcards):
     --mobile-slider (default): only the active .mcard shows, connected
       directly to a nav bar (arrows/dots/numbers — see disciplines.js)
       below it.
     --mobile-unified: every .mcard shows, stacked.
   This same approach — a root modifier class picking which structure this
   breakpoint paints, with the unused one(s) simply not rendered by PHP at
   all when not applicable — is the pattern to reach for on future sections
   that need different mobile-vs-desktop information density rather than
   just a smaller version of the same layout. */
@media ( max-width: 767px ) {
	.innerg-disciplines--mobile-slider .innerg-disciplines__grid,
	.innerg-disciplines--mobile-slider .innerg-disciplines__details,
	.innerg-disciplines--mobile-unified .innerg-disciplines__grid,
	.innerg-disciplines--mobile-unified .innerg-disciplines__details {
		display: none;
	}

	.innerg-disciplines--mobile-unified .innerg-disciplines__mcards {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}

	.innerg-disciplines--mobile-unified .innerg-disciplines__mcard {
		display: block;
	}

	/* Slider: every card is placed in the SAME grid cell, so the grid
	   track (and therefore the whole .mcards container) always sizes
	   itself to the TALLEST card, regardless of which one is active —
	   switching slides (different body-text lengths) never resizes the
	   card or shifts the nav bar below it. Inactive cards stay
	   `visibility:hidden` rather than `display:none` specifically so
	   they keep contributing to that sizing; they're just unseen and
	   untappable. This also gives the "always match the tallest card"
	   behaviour for free even with truncation turned off. */
	.innerg-disciplines--mobile-slider .innerg-disciplines__mcards {
		display: grid;
		touch-action: pan-y;
	}

	.innerg-disciplines--mobile-slider .innerg-disciplines__mcard {
		display: block;
		grid-area: 1 / 1;
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.25s ease;
	}

	.innerg-disciplines--mobile-slider .innerg-disciplines__mcard.is-active {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
	}

	.innerg-disciplines--mobile-slider .innerg-disciplines__slider-nav {
		display: flex;
		align-items: center;
		gap: 1rem;
		padding-block: 1.25rem;
		border-block-end: 1px solid var( --border );
	}
}

/* The dots/numbers group fills the space between the two arrows (or the
   whole bar, if arrows are off) and aligns itself within that space per
   the Pagination position setting — arrows themselves always stay pinned
   to the two ends of the bar regardless of this. */
.innerg-disciplines__slider-nav .innerg-disciplines__dots {
	flex: 1 1 auto;
}

.innerg-disciplines__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.innerg-disciplines__dots--pos-left {
	justify-content: flex-start;
}

.innerg-disciplines__dots--pos-right {
	justify-content: flex-end;
}

.innerg-disciplines__dot {
	border: 0;
	padding: 0;
	background: none;
}

.innerg-disciplines__dots--dots .innerg-disciplines__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: rgba( 43, 41, 26, 0.3 );
}

.innerg-disciplines__dots--dots .innerg-disciplines__dot.is-active {
	background-color: var( --brand-dark, #2b291a );
}

.innerg-disciplines__dots--numbers .innerg-disciplines__dot {
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.05em;
	color: rgba( 43, 41, 26, 0.3 );
}

.innerg-disciplines__dots--numbers .innerg-disciplines__dot.is-active {
	color: var( --brand-dark, #2b291a );
}

.innerg-disciplines__dot-line {
	width: 1.75rem;
	height: 1px;
	background-color: rgba( 43, 41, 26, 0.3 );
}

.innerg-disciplines__slide-arrow {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background-color: var( --secondary );
	color: var( --foreground );
	border: 0;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.innerg-disciplines__slide-arrow:hover {
	background-color: color-mix( in srgb, var( --secondary ) 60%, transparent );
}

.innerg-disciplines__slide-arrow svg {
	width: 16px;
	height: 16px;
}

/* The mobile card (Slider's single active card, or Unified's stacked
   list): a header row (icon + category/name), then a contained, rounded
   image — NOT full-bleed with text overlaid on it, unlike the desktop
   .detail panels above — then the lead/body text below in normal flow. */
.innerg-disciplines__mcard {
	background: var( --background );
	border: 1px solid var( --border );
	border-radius: 0.5rem;
	padding: 1.25rem;
}

.innerg-disciplines__mcard-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-block-end: 1rem;
}

.innerg-disciplines__mcard-icon {
	flex-shrink: 0;
	width: 1.75rem;
	height: 1.75rem;
	margin-block-end: 0; /* overrides the base .icon rule's grid-card margin (same specificity tier — see main .icon rule above), irrelevant in this flex row */
	color: var( --accent );
}

.innerg-disciplines__mcard-header-text {
	min-width: 0;
}

.innerg-disciplines__mcard-header-text .innerg-disciplines__category {
	margin-block-end: 0.125rem;
}

.innerg-disciplines__mcard-header-text .innerg-disciplines__name {
	margin-block-end: 0;
}

.innerg-disciplines__mcard-media {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: 0.375rem;
	overflow: hidden;
	background: #e7e5e4;
	margin-block-end: 1.25rem;
}

.innerg-disciplines__mcard-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.innerg-disciplines__mcard-body .innerg-disciplines__detail-lead {
	margin-block-end: 0.5rem;
}

.innerg-disciplines__unified-body-wrap[data-truncatable] .innerg-disciplines__detail-body {
	display: -webkit-box;
	-webkit-line-clamp: var( --innerg-disc-truncate-lines, 3 );
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.innerg-disciplines__unified-body-wrap.is-expanded .innerg-disciplines__detail-body {
	display: block;
	overflow: visible;
}

.innerg-disciplines__read-more {
	margin-block-start: 0.5rem;
	font-size: 0.8125rem;
	color: var( --accent );
	text-decoration: underline;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	align-self: flex-start;
}

/* Slider's own truncation: a plain, non-interactive line-clamp (no
   expand/collapse button) — its per-discipline CTA link below is the
   "read more" affordance instead, so the clamped text's height always
   stays fixed. */
.innerg-disciplines__mcard-body-clamp {
	display: -webkit-box;
	-webkit-line-clamp: var( --innerg-disc-truncate-lines, 3 );
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.innerg-disciplines__mcard-cta {
	display: inline-block;
	margin-block-start: 0.75rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var( --accent );
	text-decoration: underline;
	text-underline-offset: 2px;
}

.innerg-disciplines__mcard-cta:hover {
	color: var( --brand-dark, #2b291a );
}

/* ----- Compact links mode (e.g. "Other Disciplines" cross-links) ----- */

.innerg-disciplines-links {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background-color: var( --border );
}

@media ( min-width: 640px ) {
	.innerg-disciplines-links {
		grid-template-columns: repeat( 3, 1fr );
	}
}

.innerg-disciplines-links__card {
	display: block;
	padding: 1.5rem;
	background-color: var( --background );
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.innerg-disciplines-links__card:hover {
	background-color: var( --secondary );
}

.innerg-disciplines-links__tag {
	display: inline-block;
	width: fit-content;
	padding: 0.25rem 0.5rem;
	margin-block-end: 1rem;
	font-size: 0.5625rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.innerg-disciplines-links__name {
	font-family: var( --font-serif );
	font-weight: 600;
	font-size: 1rem;
	color: var( --foreground );
	margin: 0;
}

.innerg-disciplines-links__arrow {
	display: block;
	margin-block-start: 0.5rem;
	color: var( --muted-foreground );
	transition: transform 0.2s ease;
}

.innerg-disciplines-links__card:hover .innerg-disciplines-links__arrow {
	transform: translateX( 4px );
}

/* ---------- Mission ---------- */

.innerg-mission {
	position: relative;
	overflow: hidden;
	/* The reference's own `--secondary` token (#e1d5c3) is a flat hex
	   value, not derived the way ours is (a 10% sage/cream color-mix) —
	   the two produce visibly different tints. Using the reference's
	   literal value here (rather than our derived --secondary token)
	   keeps this specific background pixel-accurate; --secondary itself
	   is left alone since other widgets already rely on it. */
	background-color: color-mix( in srgb, #e1d5c3 50%, transparent );
	padding-block: 112px; /* py-28, mirrored by the section_padding_block control */
	padding-inline: 1.5rem; /* px-6 */
}

.innerg-mission__decoration {
	position: absolute;
	inset-inline-end: -140px;
	top: 50%;
	transform: translateY( -50% );
	width: 520px;
	max-width: none;
	height: auto;
	opacity: 0.08;
	pointer-events: none;
	user-select: none;
}

.innerg-mission__intro {
	position: relative;
	max-width: 56rem; /* max-w-4xl */
	margin-inline: auto;
	text-align: center;
}

.innerg-mission__eyebrow {
	font-size: 0.625rem; /* 10px */
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var( --accent );
	margin-block-end: 1.5rem; /* mb-6 */
}

.innerg-mission__statement {
	font-family: var( --font-serif );
	font-weight: 500;
	line-height: 1.375; /* leading-snug */
	color: var( --brand-dark, var( --foreground ) );
	font-size: 1.5rem; /* 24px, mobile */
	margin-block-end: 2.5rem; /* mb-10 */
}

@media ( min-width: 768px ) {
	.innerg-mission__statement {
		font-size: 2.25rem; /* 36px */
	}
}

.innerg-mission__values {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 4rem; /* gap-x-16 */
	row-gap: 2.5rem; /* gap-y-10 */
	max-width: 64rem; /* max-w-5xl */
	margin-inline: auto;
	margin-block-start: 5rem; /* mt-20 */
}

@media ( min-width: 768px ) {
	.innerg-mission__values {
		grid-template-columns: repeat( 2, 1fr );
	}
}

.innerg-mission__value {
	display: flex;
	gap: 1rem;
}

.innerg-mission__value-mark {
	font-size: 1.125rem;
	line-height: 1;
	margin-block-start: 0.25rem;
	color: var( --accent );
}

.innerg-mission__value-title {
	font-size: 1rem; /* text-base */
	font-weight: 600; /* font-semibold */
	color: var( --brand-dark, var( --foreground ) );
	margin-block-end: 0.375rem; /* mb-1.5 */
}

.innerg-mission__value-desc {
	font-size: 0.875rem; /* text-sm */
	line-height: 1.625; /* leading-relaxed */
	color: var( --muted-foreground );
}

/* ---------- Studio Facility ---------- */

.innerg-studio-facility {
	background-color: var( --brand-dark );
	color: var( --background );
}

.innerg-studio-facility__banner {
	position: relative;
	height: 70vh;
	min-height: 480px;
	overflow: hidden;
}

/* Compound selector (2 classes) is deliberate: Elementor's own
   `.elementor img { height: auto; max-width: 100% }` reset is 0,1,1
   specificity, which beats a single-class `.innerg-studio-facility__banner-img`
   (0,1,0) for `height` — silently shrinking the image to its intrinsic
   aspect ratio instead of filling the banner (same issue already solved
   for the Hero widgets — see hero.css). */
.innerg-studio-facility__banner .innerg-studio-facility__banner-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.8;
}

.innerg-studio-facility__banner-overlay {
	position: absolute;
	inset: 0;
}

.innerg-studio-facility__banner-overlay--vertical {
	background: linear-gradient(
		to top,
		var( --brand-dark ) 0%,
		color-mix( in srgb, var( --brand-dark ) 20%, transparent ) 50%,
		transparent 100%
	);
}

.innerg-studio-facility__banner-overlay--horizontal {
	background: linear-gradient(
		to right,
		color-mix( in srgb, var( --brand-dark ) 50%, transparent ) 0%,
		transparent 100%
	);
}

[dir='rtl'] .innerg-studio-facility__banner-overlay--horizontal {
	background: linear-gradient(
		to left,
		color-mix( in srgb, var( --brand-dark ) 50%, transparent ) 0%,
		transparent 100%
	);
}

.innerg-studio-facility__location {
	position: absolute;
	top: 2.5rem;
	inset-inline-start: 2.5rem;
	z-index: 2;
	font-size: 0.625rem; /* 10px */
	letter-spacing: 0.35em;
	text-transform: uppercase;
	color: var( --accent );
}

.innerg-studio-facility__banner-content {
	position: absolute;
	bottom: 2.5rem;
	inset-inline: 2.5rem;
	z-index: 2;
}

@media ( min-width: 768px ) {
	.innerg-studio-facility__banner-content {
		inset-inline-end: auto;
		max-width: 36rem; /* max-w-xl */
	}
}

.innerg-studio-facility__eyebrow {
	font-size: 0.625rem; /* 10px */
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var( --accent );
	margin-block-end: 0.75rem; /* mb-3, banner context */
}

.innerg-studio-facility__gallery-wrap .innerg-studio-facility__eyebrow {
	margin-block-end: 2.5rem; /* mb-10, gallery-intro context */
}

.innerg-studio-facility__heading {
	font-family: var( --font-serif );
	font-weight: 500;
	line-height: 1.05;
	font-size: 2.25rem; /* text-4xl, mobile */
	margin-block-end: 1rem; /* mb-4 */
}

@media ( min-width: 768px ) {
	.innerg-studio-facility__heading {
		font-size: 3.75rem; /* text-6xl */
	}
}

.innerg-studio-facility__description {
	font-size: 0.875rem; /* text-sm */
	color: color-mix( in srgb, var( --background ) 65%, transparent );
	max-width: 28rem; /* max-w-md */
}

/* The banner image/overlay is deliberately edge-to-edge (the section is
   set to Elementor's "Full Width" layout); everything below it — stats
   and the gallery — re-applies the site's normal container so they don't
   also bleed to the viewport edge. */
/* The reference's bottom rule (`border-b` on an outer, unconstrained
   div) spans the full section width; the grid itself — and its column
   dividers — sit inside the normal max-width container. Splitting these
   into two elements (rather than putting the border on `.stats`
   directly) is what makes the bottom line run edge-to-edge instead of
   stopping at the 1280px container. */
.innerg-studio-facility__stats-wrap {
	border-block-end: 1px solid color-mix( in srgb, var( --background ) 10%, transparent );
}

.innerg-studio-facility__stats {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	max-width: var( --container-max, 1280px );
	margin-inline: auto;
	padding-inline: 1.5rem; /* px-6 */
}

@media ( min-width: 768px ) {
	.innerg-studio-facility__stats {
		grid-template-columns: repeat( 4, 1fr );
	}
}

.innerg-studio-facility__stat {
	padding-block: 2rem;
	padding-inline: 1.5rem;
	border-inline-start: 1px solid color-mix( in srgb, var( --background ) 10%, transparent );
}

/* Whichever card starts a grid row shouldn't carry the divider or its
   left padding — nth-child(2n+1)/(4n+1) (rather than :first-child) keeps
   this correct regardless of how many stats are configured or which
   breakpoint's column count is active, matching the reference's
   `divide-x` + `first:pl-0` on a single row (desktop) without leaving a
   stray border on the row-2 card once this wraps to 2 columns (mobile). */
.innerg-studio-facility__stat:nth-child( 2n + 1 ) {
	border-inline-start: 0;
	padding-inline-start: 0;
}

@media ( min-width: 768px ) {
	.innerg-studio-facility__stat:nth-child( 2n + 1 ) {
		border-inline-start: 1px solid color-mix( in srgb, var( --background ) 10%, transparent );
		padding-inline-start: 1.5rem;
	}

	.innerg-studio-facility__stat:nth-child( 4n + 1 ) {
		border-inline-start: 0;
		padding-inline-start: 0;
	}
}

.innerg-studio-facility__stat-value {
	font-family: var( --font-serif );
	font-weight: 500;
	font-size: 1.5rem; /* text-2xl, mobile */
	margin-block-end: 0.25rem; /* mb-1 */
}

@media ( min-width: 768px ) {
	.innerg-studio-facility__stat-value {
		font-size: 1.875rem; /* text-3xl */
	}
}

.innerg-studio-facility__stat-label {
	font-size: 0.625rem; /* 10px */
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: color-mix( in srgb, var( --background ) 40%, transparent );
}

.innerg-studio-facility__gallery-wrap {
	max-width: var( --container-max, 1280px );
	margin-inline: auto;
	padding-inline: 1.5rem; /* px-6 */
	padding-block: 4rem; /* py-16 */
}

/* The reference's own markup carries an `lg:grid-cols-4` class, but its
   compiled stylesheet never actually promotes this grid past 2 columns
   at any desktop width (confirmed by rendering the reference file
   directly and checking computed grid-template-columns from 640px up to
   1920px) — wider, two-row cards are the real/final design, not a
   missed breakpoint on our end. */
.innerg-studio-facility__gallery {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
}

@media ( min-width: 640px ) {
	.innerg-studio-facility__gallery {
		grid-template-columns: repeat( 2, 1fr );
	}
}

.innerg-studio-facility__gallery-item {
	position: relative;
	min-height: 280px;
	overflow: hidden;
	background: #1c1917; /* stone-900 fallback while the image loads */
}

a.innerg-studio-facility__gallery-item {
	display: block;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

.innerg-studio-facility__gallery-item img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s ease;
}

.innerg-studio-facility__gallery-item:hover img {
	transform: scale( 1.04 );
}

.innerg-studio-facility__gallery-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient( to top, color-mix( in srgb, var( --brand-dark ) 70%, transparent ), transparent );
}

.innerg-studio-facility__gallery-caption {
	position: absolute;
	bottom: 1.25rem;
	inset-inline-start: 1.25rem;
	z-index: 2;
}

.innerg-studio-facility__gallery-category {
	font-size: 0.5625rem; /* 9px */
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var( --accent );
	margin-block-end: 0.25rem; /* mb-1 */
}

.innerg-studio-facility__gallery-name {
	font-family: var( --font-serif );
	font-weight: 500;
	font-size: 1rem; /* text-base */
	color: var( --background );
}

/* ---------- Pillars ---------- */

.innerg-pillars {
	position: relative;
	overflow: hidden;
	/* Same reasoning as Mission's background — the reference's own
	   --secondary token (#e1d5c3) is a flat hex, not derived the way ours
	   is, so the literal value is used here to stay pixel-accurate. */
	background-color: color-mix( in srgb, #e1d5c3 50%, transparent );
	padding-block: 96px; /* py-24, mirrored by the section_padding_block control */
	padding-inline: 1.5rem; /* px-6 */
}

.innerg-pillars__decoration {
	position: absolute;
	inset-inline-end: -160px;
	bottom: -96px;
	width: 520px;
	max-width: none;
	height: auto;
	opacity: 0.07;
	pointer-events: none;
	user-select: none;
}

.innerg-pillars__intro {
	position: relative;
	max-width: 56rem; /* max-w-4xl */
	margin-inline: auto;
	text-align: center;
	margin-block-end: 4rem; /* mb-16 */
}

.innerg-pillars__eyebrow {
	font-size: 0.625rem; /* 10px, mobile */
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var( --accent );
	margin-block-end: 1.5rem; /* mb-6 */
}

.innerg-pillars__heading {
	font-family: var( --font-serif );
	font-weight: 500;
	line-height: 1.375; /* leading-snug */
	color: var( --brand-dark, var( --foreground ) );
	font-size: 1.875rem; /* 30px, mobile */
	margin-block-end: 1.5rem; /* mb-6 */
}

@media ( min-width: 768px ) {
	.innerg-pillars__heading {
		font-size: 3rem; /* 48px */
	}
}

.innerg-pillars__description {
	font-size: 0.875rem; /* 14px, mobile */
	line-height: 1.625; /* leading-relaxed */
	color: var( --muted-foreground );
	max-width: 42rem; /* max-w-2xl */
	margin-inline: auto;
}

/* The reference's own compiled build bumps several small/text-utility
   sizes up by a bit specifically at 1024px+ (confirmed by rendering the
   reference directly: eyebrow/number 10→12px, heading 48→56px, title
   20→22px, description 14→15px, item description 12→13px) — beyond what
   their nominal (unprefixed or md:-prefixed) Tailwind classes alone
   would suggest. Replicated here as a third breakpoint tier rather than
   guessed from the class names, since it doesn't correspond to any of
   Tailwind's standard sm/md variants used in the markup. */
@media ( min-width: 1024px ) {
	.innerg-pillars__eyebrow {
		font-size: 0.75rem; /* 12px */
	}

	.innerg-pillars__heading {
		font-size: 3.5rem; /* 56px */
	}

	.innerg-pillars__description {
		font-size: 0.9375rem; /* 15px */
	}
}

.innerg-pillars__grid {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	max-width: 72rem; /* max-w-6xl */
	margin-inline: auto;
}

@media ( min-width: 640px ) {
	.innerg-pillars__grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( min-width: 1024px ) {
	.innerg-pillars__grid {
		grid-template-columns: repeat( 5, 1fr );
	}
}

.innerg-pillars__item {
	border: 1px solid color-mix( in srgb, var( --brand-dark ) 14%, transparent );
	padding: 1.5rem;
}

.innerg-pillars__number {
	font-size: 0.625rem; /* 10px, mobile */
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var( --accent );
	margin-block-end: 0.75rem; /* mb-3 */
}

.innerg-pillars__title {
	font-family: var( --font-serif );
	font-weight: 500;
	color: var( --brand-dark, var( --foreground ) );
	font-size: 1.25rem; /* 20px, mobile */
	margin-block-end: 0.5rem; /* mb-2 */
}

.innerg-pillars__desc {
	font-size: 0.75rem; /* 12px, mobile */
	line-height: 1.625; /* leading-relaxed */
	color: var( --muted-foreground );
}

@media ( min-width: 1024px ) {
	.innerg-pillars__number {
		font-size: 0.75rem; /* 12px */
	}

	.innerg-pillars__title {
		font-size: 1.375rem; /* 22px */
	}

	.innerg-pillars__desc {
		font-size: 0.8125rem; /* 13px */
	}
}

/* ---------- Discipline Pages ---------- */

.innerg-discipline-overview {
	padding-block: 6rem;
	padding-inline: 1.5rem;
	max-width: var( --container-max, 1280px );
	margin-inline: auto;
}

.innerg-discipline-overview__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4rem;
	align-items: start;
}

@media ( min-width: 1024px ) {
	.innerg-discipline-overview__grid {
		grid-template-columns: 1fr 480px;
	}
}

.innerg-discipline-overview__eyebrow {
	font-size: 0.625rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	margin: 0 0 1rem;
}

.innerg-discipline-overview__heading {
	font-family: var( --font-serif );
	font-weight: 500;
	font-size: 2.25rem;
	line-height: 1.15;
	margin: 0 0 2rem;
}

.innerg-discipline-overview__heading em {
	font-style: italic;
	font-weight: 400;
}

@media ( min-width: 768px ) {
	.innerg-discipline-overview__heading {
		font-size: 3rem;
	}
}

.innerg-discipline-overview__paragraph {
	font-size: 0.875rem;
	line-height: 1.625;
	color: var( --muted-foreground );
	margin: 0 0 1.25rem;
}

.innerg-discipline-overview__features {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 1px;
	background-color: var( --border );
	margin-block-start: 2.5rem;
}

.innerg-discipline-overview__feature {
	background-color: var( --background );
	padding: 1.5rem;
}

.innerg-discipline-overview__feature-icon {
	display: flex;
	margin-block-end: 0.75rem;
}

.innerg-discipline-overview__feature-icon svg {
	width: 18px;
	height: 18px;
}

.innerg-discipline-overview__feature-title {
	font-weight: 600;
	font-size: 0.875rem;
	margin: 0 0 0.25rem;
}

.innerg-discipline-overview__feature-desc {
	font-size: 0.75rem;
	line-height: 1.625;
	color: var( --muted-foreground );
	margin: 0;
}

.innerg-discipline-overview__collage {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.innerg-discipline-overview__photo {
	position: relative;
	overflow: hidden;
	height: 200px;
	background-color: var( --secondary );
}

.innerg-discipline-overview__photo--large {
	height: 280px;
}

.innerg-discipline-overview .innerg-discipline-overview__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 0.7s ease;
}

.innerg-discipline-overview__photo:hover img {
	transform: scale( 1.04 );
}

.innerg-discipline-overview__photo-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient( to top, color-mix( in oklab, var( --brand-dark, #2b291a ) 40%, transparent ), transparent );
}

.innerg-discipline-overview__collage-row {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 0.75rem;
}

.innerg-discipline-overview__caption {
	position: absolute;
	inset-block-end: 1rem;
	inset-inline-start: 1rem;
	font-size: 0.625rem;
	letter-spacing: 0.1em;
}

.innerg-discipline-room {
	background-color: var( --brand-dark, #2b291a );
	color: var( --background, #fff );
	padding-block: 6rem;
}

.innerg-discipline-room__grid {
	max-width: var( --container-max, 1280px );
	margin-inline: auto;
	padding-inline: 1.5rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 4rem;
	align-items: center;
}

@media ( min-width: 1024px ) {
	.innerg-discipline-room__grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

.innerg-discipline-room__eyebrow {
	font-size: 0.625rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	margin: 0 0 1.5rem;
}

.innerg-discipline-room__heading {
	font-family: var( --font-serif );
	font-weight: 500;
	font-size: 2.25rem;
	line-height: 1.15;
	margin: 0 0 2rem;
}

.innerg-discipline-room__heading em {
	font-style: italic;
	font-weight: 400;
}

@media ( min-width: 768px ) {
	.innerg-discipline-room__heading {
		font-size: 3rem;
	}
}

.innerg-discipline-room__description {
	font-size: 0.875rem;
	line-height: 1.625;
	margin: 0 0 1.5rem;
}

.innerg-discipline-room__checklist {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 0 0 2.5rem;
	padding: 0;
}

.innerg-discipline-room__check-item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: 0.875rem;
}

.innerg-discipline-room__check {
	flex-shrink: 0;
	margin-block-start: 0.125rem;
}

.innerg-discipline-room__photos {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 0.75rem;
}

.innerg-discipline-room__photo {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	background-color: rgba( 255, 255, 255, 0.08 );
}

.innerg-discipline-room__photo--offset {
	margin-block-start: 2.5rem;
}

.innerg-discipline-room .innerg-discipline-room__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 0.7s ease;
}

.innerg-discipline-room__photo:hover img {
	transform: scale( 1.04 );
}

.innerg-discipline-curriculum {
	padding-block: 6rem;
	padding-inline: 1.5rem;
	max-width: var( --container-max, 1280px );
	margin-inline: auto;
}

.innerg-discipline-curriculum__header {
	margin-block-end: 3.5rem;
	max-width: 32rem;
}

.innerg-discipline-curriculum__eyebrow {
	font-size: 0.625rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	margin: 0 0 1rem;
}

.innerg-discipline-curriculum__heading {
	font-family: var( --font-serif );
	font-weight: 500;
	font-size: 2.25rem;
	margin: 0 0 1rem;
}

.innerg-discipline-curriculum__description {
	font-size: 0.875rem;
	line-height: 1.625;
	color: var( --muted-foreground );
	margin: 0;
}

.innerg-discipline-curriculum__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	background-color: var( --border );
	margin-block-end: 2.5rem;
}

.innerg-discipline-curriculum__tab {
	flex: 1 1 auto;
	min-width: 160px;
	padding: 1rem 1.5rem;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: start;
	background-color: var( --background );
	color: var( --muted-foreground );
	border: 0;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.innerg-discipline-curriculum__tab:hover:not( .is-active ) {
	color: var( --foreground );
}

.innerg-discipline-curriculum__tab-range {
	display: block;
	font-size: 0.5625rem;
	opacity: 0.6;
	margin-block-end: 0.25rem;
}

.innerg-discipline-curriculum__panel {
	display: none;
	grid-template-columns: 1fr;
	gap: 1px;
	background-color: var( --border );
}

.innerg-discipline-curriculum__panel.is-active {
	display: grid;
}

@media ( min-width: 768px ) {
	.innerg-discipline-curriculum__panel {
		grid-template-columns: repeat( 2, 1fr );
	}
}

.innerg-discipline-curriculum__item {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.5rem;
	background-color: var( --background );
}

.innerg-discipline-curriculum__item-number {
	flex-shrink: 0;
	margin-block-start: 0.125rem;
	font-size: 0.625rem;
	font-weight: 700;
}

.innerg-discipline-curriculum__item-text {
	font-size: 0.875rem;
	margin: 0;
}

.innerg-discipline-sessions {
	background-color: var( --secondary );
	padding-block: 6rem;
}

.innerg-discipline-sessions__inner {
	max-width: var( --container-max, 1280px );
	margin-inline: auto;
	padding-inline: 1.5rem;
}

.innerg-discipline-sessions__eyebrow {
	font-size: 0.625rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var( --accent );
	margin: 0 0 1rem;
}

.innerg-discipline-sessions__heading {
	font-family: var( --font-serif );
	font-weight: 500;
	font-size: 2.25rem;
	margin: 0 0 3rem;
}

.innerg-discipline-sessions__list {
	display: flex;
	flex-direction: column;
	gap: 1px;
	background-color: var( --border );
}

.innerg-discipline-sessions__list.is-truncatable {
	position: relative;
}

/* Rows past the configured "visible sessions before truncating" count
   are marked --extra in PHP and simply hidden here until the list gets
   .is-expanded — mirrors the Schedule widget's own truncate pattern. */
.innerg-discipline-sessions__row.innerg-discipline-sessions__row--extra {
	display: none;
}

.innerg-discipline-sessions__list.is-expanded .innerg-discipline-sessions__row.innerg-discipline-sessions__row--extra {
	display: grid;
}

.innerg-discipline-sessions__list.is-truncatable:not( .is-expanded )::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 4rem;
	background: linear-gradient( to bottom, transparent, var( --background ) );
	pointer-events: none;
}

.innerg-discipline-sessions__row {
	display: grid;
	grid-template-columns: 80px 1fr auto;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem;
	background-color: var( --background );
	transition: background-color 0.2s ease;
}

@media ( min-width: 768px ) {
	.innerg-discipline-sessions__row {
		grid-template-columns: 80px 120px 1fr 120px auto;
	}
}

.innerg-discipline-sessions__row:hover {
	background-color: color-mix( in oklab, var( --secondary ) 40%, transparent );
}

.innerg-discipline-sessions__day {
	font-size: 0.75rem;
	font-weight: 700;
	color: var( --accent );
	margin: 0;
}

.innerg-discipline-sessions__time {
	font-family: var( --font-serif );
	font-weight: 600;
	font-size: 1.125rem;
	margin: 0;
}

.innerg-discipline-sessions__tag-wrap {
	display: none;
}

@media ( min-width: 768px ) {
	.innerg-discipline-sessions__tag-wrap {
		display: block;
	}
}

.innerg-discipline-sessions__tag {
	display: inline-block;
	padding: 0.25rem 0.625rem;
	font-size: 0.5625rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.innerg-discipline-sessions__trainer {
	font-size: 0.875rem;
	font-weight: 500;
	margin: 0;
}

.innerg-discipline-sessions__level {
	font-size: 0.625rem;
	color: var( --muted-foreground );
	margin: 0.125rem 0 0;
}

.innerg-discipline-sessions__spots-wrap {
	display: none;
}

@media ( min-width: 768px ) {
	.innerg-discipline-sessions__spots-wrap {
		display: block;
	}
}

.innerg-discipline-sessions__spots {
	display: inline;
	font-size: 0.875rem;
	font-weight: 600;
	margin: 0;
}

.innerg-discipline-sessions__spots--low {
	color: #ef4444;
}

.innerg-discipline-sessions__spots-label {
	font-size: 0.75rem;
	color: var( --muted-foreground );
	margin-inline-start: 0.25rem;
}

.innerg-discipline-sessions__book {
	display: inline-block;
	padding: 0.625rem 1rem;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
	text-decoration: none;
	color: var( --foreground );
	border: 1px solid var( --border );
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.innerg-discipline-sessions__toggle {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.375rem;
	width: 100%;
	margin-block-start: 1.5rem;
	font-size: 0.75rem;
	text-align: center;
	color: var( --accent );
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.innerg-discipline-sessions__toggle-label {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.innerg-discipline-sessions__toggle-icon {
	width: 10px;
	height: 6px;
	animation: innerg-schedule-toggle-bounce 1.6s ease-in-out infinite;
}

.innerg-discipline-sessions__toggle.is-expanded .innerg-discipline-sessions__toggle-icon {
	animation: none;
	transform: rotate( 180deg );
}

@media ( prefers-reduced-motion: reduce ) {
	.innerg-discipline-sessions__toggle-icon {
		animation: none;
	}
}

.innerg-discipline-sessions__footnote {
	font-size: 0.75rem;
	color: var( --muted-foreground );
	margin: 1.5rem 0 0;
}

/* ---------- Club ---------- */

.innerg-club {
	position: relative;
	background-color: var( --secondary );
	padding-block: 5rem; /* matches the site's own section_spacing scale */
	padding-inline: 1.5rem;
}

.innerg-club__header {
	position: relative;
	max-width: 42rem;
	margin-inline: auto;
	text-align: center;
	margin-block-end: 3rem;
}

.innerg-club__eyebrow {
	font-size: 0.625rem; /* 10px */
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var( --accent );
	margin-block-end: 1.5rem;
}

.innerg-club__heading {
	font-family: var( --font-serif );
	font-weight: 500;
	line-height: 1.2;
	color: var( --brand-dark, var( --foreground ) );
	font-size: 1.875rem; /* 30px, mobile */
	margin-block-end: 1.25rem;
}

@media ( min-width: 768px ) {
	.innerg-club__heading {
		font-size: 2.5rem; /* 40px */
	}
}

.innerg-club__description {
	font-size: 0.9375rem; /* 15px */
	line-height: 1.625;
	color: var( --muted-foreground );
}

.innerg-club__gallery {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	max-width: 72rem;
	margin-inline: auto;
}

@media ( min-width: 768px ) {
	.innerg-club__gallery {
		grid-template-columns: repeat( 3, 1fr );
	}
}

.innerg-club__photo {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 0.5rem;
}

.innerg-club__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.innerg-club__photo:hover img {
	transform: scale( 1.04 );
}

/* ---------- Trainers ---------- */

.innerg-trainers {
	/* Same reasoning as Mission/Pillars — the reference's own --secondary
	   token (#e1d5c3) is a flat hex, not derived the way ours is. */
	background-color: color-mix( in srgb, #e1d5c3 40%, transparent );
	padding-block: 6rem; /* py-24 */
}

.innerg-trainers__container {
	max-width: var( --container-max, 1280px ); /* max-w-7xl */
	margin-inline: auto;
	padding-inline: 1.5rem; /* px-6 */
}

.innerg-trainers__header {
	margin-block-end: 3.5rem; /* mb-14 */
}

.innerg-trainers__eyebrow {
	font-size: 0.625rem; /* 10px, mobile */
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var( --accent );
	margin-block-end: 1rem; /* mb-4 */
}

.innerg-trainers__heading {
	font-family: var( --font-serif );
	font-weight: 500;
	color: var( --brand-dark, var( --foreground ) );
	font-size: 2.25rem; /* 36px, mobile, text-4xl */
}

@media ( min-width: 768px ) {
	.innerg-trainers__heading {
		font-size: 3rem; /* 48px, md:text-5xl */
	}
}

/* Same 1024px-and-up size bump discovered in the reference's own
   compiled build for Mission/Pillars — replicated here for consistency
   (eyebrow/role/badge/tag +~20%, heading/name a touch more). */
@media ( min-width: 1024px ) {
	.innerg-trainers__eyebrow {
		font-size: 0.75rem; /* 12px */
	}

	.innerg-trainers__heading {
		font-size: 3.5rem; /* 56px */
	}
}

.innerg-trainers__scroll {
	display: flex;
	gap: 2rem; /* gap-8 */
	overflow-x: auto;
	padding-block-end: 1.5rem; /* pb-6 */
	scroll-snap-type: x mandatory;
	margin-inline: -1.5rem;
	padding-inline: 1.5rem;
	/* pan-x (not pan-y): this track scrolls natively (overflow-x + scroll-
	   snap, no custom touch JS like the Disciplines slider), so touch
	   panning needs to stay enabled on the horizontal axis — pan-y would
	   tell the browser to treat horizontal drags as page navigation/scroll
	   instead of letting them scroll this track, which is exactly what
	   blocked swipe here. */
	touch-action: pan-x;
	--innerg-trainers-cards-visible: 1.5;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* legacy Edge */
}

.innerg-trainers__scroll::-webkit-scrollbar {
	display: none; /* Chrome, Safari, modern Edge */
}

.innerg-trainers__card {
	flex-shrink: 0;
	scroll-snap-align: start;
	width: 260px;
}

@media ( max-width: 639px ) {
	.innerg-trainers__card {
		width: calc( ( 100% - 2rem ) / var( --innerg-trainers-cards-visible, 1.5 ) );
	}
}

@media ( min-width: 640px ) {
	.innerg-trainers__card {
		width: var( --innerg-trainers-card-width, 280px );
	}
}

.innerg-trainers__media {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	margin-block-end: 1.5rem; /* mb-6 */
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.04 );
	transition: box-shadow 0.5s ease;
}

a.innerg-trainers__media {
	display: block;
	color: inherit;
	text-decoration: none;
}

.innerg-trainers__name a {
	color: inherit;
	text-decoration: none;
}

.innerg-trainers__name a:hover {
	text-decoration: underline;
}

.innerg-trainers__card:hover .innerg-trainers__media {
	box-shadow: 0 24px 48px -12px rgba( 0, 0, 0, 0.25 );
}

.innerg-trainers__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale( 15% );
	transition: filter 0.7s ease-out, transform 0.7s ease-out;
}

.innerg-trainers__card:hover .innerg-trainers__img {
	filter: grayscale( 0% );
	transform: scale( 1.04 );
}

.innerg-trainers__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		color-mix( in srgb, var( --brand-dark ) 60%, transparent ) 0%,
		transparent 50%,
		transparent 100%
	);
	opacity: var( --innerg-trainers-overlay-opacity, 0.7 );
	transition: opacity 0.5s ease;
}

.innerg-trainers__card:hover .innerg-trainers__overlay {
	opacity: 0.4;
}

.innerg-trainers__badge-wrap {
	position: absolute;
	top: 1rem;
	inset-inline-start: 1rem;
	padding: 0.375rem 0.75rem; /* px-3 py-1.5 */
	background-color: color-mix( in srgb, var( --background ) 90%, transparent );
	backdrop-filter: blur( 4px );
	-webkit-backdrop-filter: blur( 4px );
	border: 1px solid color-mix( in srgb, var( --border ) 60%, transparent );
}

.innerg-trainers__badge {
	font-size: 0.5625rem; /* 9px, mobile */
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var( --foreground );
}

.innerg-trainers__tag-wrap {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 1.25rem; /* p-5 */
	opacity: 0;
	transform: translateY( 0.5rem );
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.innerg-trainers__card:hover .innerg-trainers__tag-wrap {
	opacity: 1;
	transform: translateY( 0 );
}

.innerg-trainers__tag {
	font-size: 0.5625rem; /* 9px, mobile */
	padding: 0.25rem 0.625rem; /* px-2.5 py-1 */
}

@media ( min-width: 1024px ) {
	.innerg-trainers__badge,
	.innerg-trainers__tag {
		font-size: 0.6875rem; /* 11px */
	}
}

.innerg-trainers__role {
	font-size: 0.625rem; /* 10px, mobile */
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var( --accent );
	margin-block-end: 0.5rem; /* mb-2 */
}

.innerg-trainers__name {
	font-family: var( --font-serif );
	font-weight: 500;
	color: var( --brand-dark, var( --foreground ) );
	font-size: 1.5rem; /* 24px, mobile, text-2xl */
	margin-block-end: 0.75rem; /* mb-3 */
}

.innerg-trainers__bio {
	font-size: 0.875rem; /* 14px, mobile, text-sm */
	line-height: 1.625; /* leading-relaxed */
	color: var( --muted-foreground );
}

@media ( min-width: 1024px ) {
	.innerg-trainers__role {
		font-size: 0.75rem; /* 12px */
	}

	.innerg-trainers__name {
		font-size: 1.75rem; /* 28px */
	}

	.innerg-trainers__bio {
		font-size: 0.9375rem; /* 15px */
	}
}

.innerg-trainers__view-all {
	margin-block-start: 2.5rem;
	text-align: center;
}

/* ----- Profile grid layout (Discipline page trainers) ----- */

.innerg-trainers__profile-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background-color: var( --border );
}

@media ( min-width: 768px ) {
	.innerg-trainers__profile-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

.innerg-trainers__profile-card {
	display: grid;
	/* Below 768px this collapses to a single stacked column — the fixed
	   180px + the content column's min-content width (name/bio text
	   can't shrink further) together exceed a real 375px phone viewport,
	   forcing the whole card past the page edge otherwise. */
	grid-template-columns: 1fr;
	background-color: var( --background );
}

@media ( min-width: 768px ) {
	.innerg-trainers__profile-card {
		grid-template-columns: 180px 1fr;
	}
}

.innerg-trainers__profile-media {
	position: relative;
	overflow: hidden;
	min-height: 300px;
	background-color: var( --secondary );
}

.innerg-trainers__profile-media .innerg-trainers__profile-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 0.7s ease;
}

.innerg-trainers__profile-card:hover .innerg-trainers__profile-img {
	transform: scale( 1.03 );
}

.innerg-trainers__profile-placeholder {
	position: absolute;
	inset: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0.75rem;
	border: 1px dashed var( --border );
	font-size: 0.6875rem;
	color: var( --muted-foreground );
}

.innerg-trainers__profile-content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 2rem;
}

.innerg-trainers__profile-role {
	font-size: 0.625rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var( --accent );
	margin: 0 0 0.5rem;
}

.innerg-trainers__profile-name {
	font-family: var( --font-serif );
	font-weight: 500;
	font-size: 1.5rem;
	margin: 0 0 0.75rem;
}

.innerg-trainers__profile-badge {
	font-size: 0.625rem;
	line-height: 1.6;
	color: var( --muted-foreground );
	margin: 0 0 1rem;
}

.innerg-trainers__profile-bio {
	font-size: 0.875rem;
	line-height: 1.625;
	color: var( --muted-foreground );
	margin: 0;
}

.innerg-trainers__profile-stats {
	display: flex;
	gap: 1.5rem;
	margin-block-start: 1.5rem;
	border-block-start: 1px solid var( --border );
	padding-block-start: 1.25rem;
}

.innerg-trainers__profile-stat-value {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	font-family: var( --font-serif );
	font-weight: 500;
	font-size: 1.125rem;
	margin: 0;
}

.innerg-trainers__profile-stat-label {
	font-size: 0.625rem;
	color: var( --muted-foreground );
	margin: 0.125rem 0 0;
}

.innerg-trainers__profile-star {
	flex-shrink: 0;
}

/* ----- Slider navigation — same shape as the Hero/Disciplines sliders ----- */

.innerg-trainers__nav {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-block-start: 1.5rem;
}

.innerg-trainers__nav .innerg-trainers__dots {
	flex: 1 1 auto;
}

.innerg-trainers__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.innerg-trainers__dots--pos-left {
	justify-content: flex-start;
}

.innerg-trainers__dots--pos-right {
	justify-content: flex-end;
}

.innerg-trainers__dot {
	border: 0;
	padding: 0;
	background: none;
	cursor: pointer;
}

.innerg-trainers__dots--dots .innerg-trainers__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: rgba( 43, 41, 26, 0.3 );
}

.innerg-trainers__dots--dots .innerg-trainers__dot.is-active {
	background-color: var( --brand-dark, #2b291a );
}

.innerg-trainers__dots--numbers .innerg-trainers__dot {
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.05em;
	color: rgba( 43, 41, 26, 0.3 );
}

.innerg-trainers__dots--numbers .innerg-trainers__dot.is-active {
	color: var( --brand-dark, #2b291a );
}

.innerg-trainers__dot-line {
	width: 1.75rem;
	height: 1px;
	background-color: rgba( 43, 41, 26, 0.3 );
}

.innerg-trainers__arrow {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background-color: var( --secondary );
	color: var( --foreground );
	border: 0;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.innerg-trainers__arrow:hover {
	background-color: color-mix( in srgb, var( --secondary ) 60%, transparent );
}

.innerg-trainers__arrow svg {
	width: 16px;
	height: 16px;
}

/* ---------- Schedule ---------- */

.innerg-schedule {
	max-width: var( --container-max, 1280px ); /* max-w-7xl */
	margin-inline: auto;
	padding-block: 6rem; /* py-24 */
	padding-inline: 1.5rem; /* px-6 */
}

.innerg-schedule__intro {
	max-width: 42rem; /* max-w-2xl */
	margin-block-end: 2.5rem; /* mb-10 */
}

.innerg-schedule__eyebrow {
	font-size: 0.625rem; /* 10px */
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var( --accent );
	margin-block-end: 1rem; /* mb-4 */
}

.innerg-schedule__heading {
	font-family: var( --font-serif );
	font-weight: 500;
	color: var( --brand-dark, var( --foreground ) );
	font-size: 2.25rem; /* 36px, text-4xl — no responsive variant in the reference */
	margin-block-end: 1.25rem; /* mb-5 */
}

.innerg-schedule__description {
	font-size: 0.875rem; /* text-sm */
	line-height: 1.625; /* leading-relaxed */
	color: var( --muted-foreground );
}

.innerg-schedule__tabs-row {
	margin-block-end: 1rem;
}

.innerg-schedule__tabs {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.5rem; /* gap-2 */
	width: 100%;
}

/* Four tabs across gets cramped below ~640px — two-by-two gives each
   button (and its now-longer name+description content) real breathing
   room instead of squeezing all 4 into one tight row. */
@media ( max-width: 639px ) {
	.innerg-schedule__tabs {
		display: grid;
		grid-template-columns: repeat( 2, 1fr );
	}
}

/* flex:1 1 0 (not the shorthand `1`) so every tab divides the row equally
   regardless of how long its name/subtitle text is; min-width:0 lets a
   flex item shrink below its own text's intrinsic width instead of
   overflowing — critical on mobile where 4 equal tabs must fit one row
   without re-introducing the site-wide horizontal-scroll class of bug. */
.innerg-schedule__tab {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	padding: 0.75rem 0.5rem; /* py-3, tighter px than before to fit 4-across on mobile */
	text-align: center;
	border: 1px solid var( --border );
	background: transparent;
	color: var( --muted-foreground );
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

@media ( min-width: 640px ) {
	.innerg-schedule__tab {
		min-width: 7rem;
		padding: 0.75rem 1.5rem; /* py-3 px-6 */
	}
}

.innerg-schedule__tab:not( .is-active ):hover {
	border-color: var( --accent );
}

.innerg-schedule__tab-name {
	font-size: 0.75rem; /* text-xs — unchanged from the tab's own former font-size */
	letter-spacing: 0.1em; /* tracking-widest */
	text-transform: uppercase;
}

.innerg-schedule__tab-subtitle {
	font-size: 0.625rem; /* 10px */
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 1.3;
	opacity: 0.75;
}

/* Date range (left) + "Book Now" (right), sharing one row on desktop —
   a separate row from the studio tabs above it. Stacks on mobile. */
.innerg-schedule__meta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-block-end: 1.5rem; /* mb-6 */
}

.innerg-schedule__cta {
	flex-shrink: 0;
	/* Pushes the button to the end of the row on its own (via the auto
	   margin consuming the row's free space) when the date-range banner
	   is toggled off and it's the only child left — with the banner
	   present this has no visible effect, since space-between already
	   puts the button at the same end. Either way the button's own
	   position never changes based on the toggle. Desktop only — see the
	   mobile breakpoint below, where this margin is cancelled. */
	margin-inline-start: auto;
}

@media ( max-width: 639px ) {
	.innerg-schedule__meta-row {
		flex-direction: column;
		align-items: stretch;
	}

	.innerg-schedule__cta .innerg-btn {
		width: 100%;
	}

	/* An inline-axis auto margin becomes a CROSS-axis margin once the row
	   switches to flex-direction:column — which overrides align-items:
	   stretch and shrinks .innerg-schedule__cta to its content width
	   instead of filling the row, breaking the full-width mobile button.
	   Cancelled here (after the base rule above, so it actually wins the
	   cascade at this breakpoint) — mobile keeps stretching exactly as
	   before regardless of the date-range banner's toggle state. */
	.innerg-schedule__cta {
		margin-inline-start: 0;
	}
}

.innerg-schedule__cta .innerg-btn--solid {
	background-color: var( --accent, #73947c );
}

.innerg-schedule__cta .innerg-btn--solid:hover {
	background-color: var( --brand-dark, #2b291a );
}

.innerg-schedule__week-range {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	color: var( --foreground );
	padding-block: 0.625rem;
	padding-inline: 1rem;
	background: color-mix( in srgb, var( --secondary ) 60%, transparent );
	border-inline-start: 2px solid var( --accent );
	width: fit-content;
}

.innerg-schedule__week-range-icon {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	color: var( --accent );
}

.innerg-schedule__week-range-label {
	font-size: 0.625rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 600;
	color: var( --accent );
}

.innerg-schedule__panels {
	margin-block-end: 3.5rem; /* mb-14 */
}

.innerg-schedule__panel {
	display: none;
}

.innerg-schedule__panel.is-active {
	display: block;
}

/* Both the desktop table and the mobile day-card carousel are always
   rendered — swapped purely by breakpoint (matching the reference's own
   `hidden md:block` / `md:hidden` pair) — so switching studio tabs never
   needs to know which one is currently visible. */
.innerg-schedule__table-wrap {
	display: none;
}

.innerg-schedule__mobile-days {
	display: flex;
}

@media ( min-width: 768px ) {
	.innerg-schedule__table-wrap {
		display: block;
		overflow-x: auto;
	}

	.innerg-schedule__mobile-days {
		display: none;
	}
}

/* One card per day, swiped horizontally, each taking the FULL viewport
   width with zero peek of its neighbour — negative margin cancels the
   section's own inline padding so the scroller itself spans edge-to-edge.
   Unlike the Trainers slider (which intentionally shows a peek via
   container-level padding + <1 cards-visible), the reading-gutter here
   lives INSIDE each card instead of on the scroller: putting it on the
   scroller would shrink each card's available "100%" below the true
   viewport width, leaving a sliver of the gap/next card visible at rest. */
.innerg-schedule__mobile-days {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	margin-inline: -1.5rem;
	padding-block-end: 0.5rem;
	-webkit-overflow-scrolling: touch;
}

.innerg-schedule__mobile-days::-webkit-scrollbar {
	display: none; /* Chrome, Safari, modern Edge */
}

.innerg-schedule__day-card {
	flex: 0 0 100%;
	min-width: 0;
	scroll-snap-align: start;
	position: relative;
	padding-inline: 1.5rem;
}

/* Day name + calendar date on the same row, pushed to opposite ends via
   space-between — flexbox reverses this automatically under [dir="rtl"],
   so the date lands on the correct opposite side in Arabic too without
   any extra RTL override. */
.innerg-schedule__day-card-label {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	margin-block-end: 0.75rem;
	padding-block-end: 0.5rem;
	border-block-end: 1px solid var( --border );
}

.innerg-schedule__day-card-day {
	font-size: 0.8125rem; /* 13px, up from 11px */
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 600;
	color: var( --brand-dark, var( --foreground ) );
}

.innerg-schedule__day-card-date {
	font-size: 0.75rem; /* 12px */
	font-weight: 400;
	color: var( --muted-foreground );
}

.innerg-schedule__table {
	width: 100%;
	border-collapse: collapse;
}

.innerg-schedule__table th {
	text-align: start;
	padding: 0.75rem 1rem; /* py-3 px-4 */
	font-size: 0.6875rem; /* 11px, up from 10px */
	letter-spacing: 0.1em; /* tracking-widest */
	font-weight: 400;
	color: var( --muted-foreground );
	border-block-end: 1px solid var( --border );
}

.innerg-schedule__th-time {
	width: 7rem; /* w-28 */
}

/* Day name stacked above its calendar date, both bumped up from the
   single 10px label this replaced — the day name carries the same
   uppercase/tracking treatment as before, the date sits smaller and
   muted underneath since it's secondary information. */
.innerg-schedule__th-day {
	display: block;
	font-size: 0.8125rem; /* 13px */
	font-weight: 600;
	color: var( --brand-dark, var( --foreground ) );
}

.innerg-schedule__th-date {
	display: block;
	margin-block-start: 0.1875rem;
	font-size: 0.6875rem; /* 11px */
	letter-spacing: normal;
	font-weight: 400;
	color: var( --muted-foreground );
}

.innerg-schedule__table td {
	padding: 0.875rem 1rem; /* py-3.5 px-4 */
	border-block-end: 1px solid var( --border );
}

.innerg-schedule__table tbody tr {
	transition: background-color 0.2s ease;
}

.innerg-schedule__table tbody tr:hover {
	background-color: color-mix( in srgb, var( --secondary ) 60%, transparent );
}

.innerg-schedule__time {
	font-size: 0.625rem; /* 10px */
	color: var( --muted-foreground );
	white-space: nowrap;
}

.innerg-schedule__pill {
	display: inline-block;
	font-size: 0.625rem; /* 10px */
	padding: 0.25rem 0.625rem; /* py-1 px-2.5 */
}

.innerg-schedule__mobile-slot {
	border-block-end: 1px solid var( --border );
	padding-block: 0.75rem; /* py-3 */
}

.innerg-schedule__mobile-slot .innerg-schedule__time {
	margin-block-end: 0.5rem; /* mb-2 */
}

.innerg-schedule__mobile-slot .innerg-schedule__pill {
	display: block;
	width: fit-content;
}

/* Rows past the configured "visible before truncating" count are
   marked --extra in PHP (not selected via CSS :nth-child(var(...)),
   which isn't reliably supported for a dynamic admin-set count) and
   simply hidden here until the container gets .is-expanded. A fade
   gradient over the tail of the last visible row hints there's more
   below, purely decorative — the hidden rows contribute nothing to the
   layout (display:none), so nothing is literally being clipped. */
.innerg-schedule__mobile-slot--extra {
	display: none;
}

.innerg-schedule__mobile.is-expanded .innerg-schedule__mobile-slot--extra {
	display: block;
}

.innerg-schedule__mobile.is-truncatable {
	position: relative;
}

/* Height mode: every row is always in the markup — a hard pixel
   max-height plus overflow:hidden does the actual clipping (can land
   mid-row), rather than PHP hiding whole rows. */
.innerg-schedule__mobile--height-mode.is-truncatable {
	max-height: var( --innerg-schedule-truncate-height, 320px );
	overflow: hidden;
}

.innerg-schedule__mobile--height-mode.is-truncatable.is-expanded {
	max-height: none;
	overflow: visible;
}

.innerg-schedule__mobile.is-truncatable:not( .is-expanded )::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 4rem;
	background: linear-gradient( to bottom, transparent, var( --background ) );
	pointer-events: none;
}

.innerg-schedule__mobile-toggle {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.375rem;
	width: 100%;
	margin-block-start: 1.25rem;
	font-size: 0.75rem;
	text-align: center;
	color: var( --accent );
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

@media ( min-width: 768px ) {
	.innerg-schedule__mobile-toggle {
		display: none;
	}
}

.innerg-schedule__mobile-toggle-label {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.innerg-schedule__mobile-toggle-arrow {
	width: 14px;
	height: 14px;
	animation: innerg-schedule-toggle-bounce 1.6s ease-in-out infinite;
}

.innerg-schedule__mobile-toggle.is-expanded .innerg-schedule__mobile-toggle-arrow {
	animation: none;
	transform: rotate( 180deg );
}

@keyframes innerg-schedule-toggle-bounce {
	0%, 100% {
		transform: translateY( 0 );
	}
	50% {
		transform: translateY( 4px );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.innerg-schedule__mobile-toggle-arrow {
		animation: none;
	}
}

/* Hints that the day-card carousel below is swipeable — mobile only,
   hidden once the desktop table takes over at the same breakpoint the
   day-cards themselves switch off at. */
.innerg-schedule__swipe-hint {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-size: 0.6875rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var( --muted-foreground );
	margin-block-end: 0.75rem;
}

@media ( min-width: 768px ) {
	.innerg-schedule__swipe-hint {
		display: none;
	}
}

/* The chevrons point in a physical left/right sense (swipe this way),
   not a text-direction sense — row-reverse cancels flexbox's automatic
   RTL mirroring so the left-pointing glyph stays on the physical left
   (and the right-pointing one stays right) on the Arabic pages too. */
[dir='rtl'] .innerg-schedule__swipe-hint {
	flex-direction: row-reverse;
}

.innerg-schedule__swipe-icon {
	width: 14px;
	height: 14px;
}

.innerg-schedule__swipe-icon:first-child {
	animation: innerg-schedule-swipe-left 1.8s ease-in-out infinite;
}

.innerg-schedule__swipe-icon:last-child {
	animation: innerg-schedule-swipe-right 1.8s ease-in-out infinite;
}

@keyframes innerg-schedule-swipe-left {
	0%, 100% { transform: translateX( 0 ); opacity: 0.6; }
	50% { transform: translateX( -3px ); opacity: 1; }
}

@keyframes innerg-schedule-swipe-right {
	0%, 100% { transform: translateX( 0 ); opacity: 0.6; }
	50% { transform: translateX( 3px ); opacity: 1; }
}

@media ( prefers-reduced-motion: reduce ) {
	.innerg-schedule__swipe-icon:first-child,
	.innerg-schedule__swipe-icon:last-child {
		animation: none;
	}
}

/* ---------- Membership ---------- */

.innerg-membership__header {
	text-align: center;
	margin-block-end: 3.5rem; /* mb-14 */
}

.innerg-membership__eyebrow {
	font-size: 0.625rem; /* 10px */
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var( --accent );
	margin-block-end: 1rem; /* mb-4 */
}

.innerg-membership__heading {
	font-family: var( --font-serif );
	font-weight: 500;
	color: var( --brand-dark, var( --foreground ) );
	font-size: 2.25rem; /* 36px, text-4xl (mobile) */
}

@media ( min-width: 768px ) {
	.innerg-membership__heading {
		font-size: 3rem; /* 48px, md:text-5xl */
	}
}

/* Same 1024px-and-up size bump discovered in the reference's own
   compiled build elsewhere in this theme (Pillars/Trainers/Schedule)
   — confirmed live: eyebrow 10→12px, heading 48→56px, plan name
   24→28px, description/price-period/feature/button 12→13px. */
@media ( min-width: 1024px ) {
	.innerg-membership__eyebrow {
		font-size: 0.75rem; /* 12px */
	}

	.innerg-membership__heading {
		font-size: 3.5rem; /* 56px */
	}

	.innerg-membership__name {
		font-size: 1.75rem; /* 28px */
	}

	.innerg-membership__desc,
	.innerg-membership__price-period,
	.innerg-membership__feature,
	.innerg-membership__button {
		font-size: 0.8125rem; /* 13px */
	}
}

/* ----- Track: mobile-first single-slide grid-stack, shared by mobile
   (always one plan at a time) and the desktop carousel (more than 3
   plans). Desktop with 3 or fewer plans overrides this into a plain
   static grid further down — the reference's own exact layout. ----- */

.innerg-membership__track {
	position: relative;
	display: grid;
	max-width: 26rem;
	margin-inline: auto;
}

.innerg-membership__plan {
	grid-area: 1 / 1;
	padding: 2.5rem;
	display: flex;
	flex-direction: column;
	background: var( --background, #fff );
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}

.innerg-membership__plan[ data-plan-offset='0' ] {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	position: relative;
	z-index: 1;
}

.innerg-membership__name {
	font-family: var( --font-serif );
	font-weight: 500;
	font-size: 1.5rem; /* 24px */
	margin-block-end: 0.5rem; /* mb-2 */
}

.innerg-membership__desc {
	font-size: 0.75rem; /* 12px */
	margin-block-end: 2rem; /* mb-8 */
	color: var( --muted-foreground );
}

.innerg-membership__price {
	display: flex;
	align-items: baseline;
	gap: 0.375rem; /* gap-1.5 */
	margin-block-end: 2rem; /* mb-8 */
}

.innerg-membership__price-value {
	font-family: var( --font-serif );
	font-weight: 500;
	font-size: 3rem; /* 48px */
	line-height: 1;
}

.innerg-membership__price-period {
	font-size: 0.75rem;
	color: var( --muted-foreground );
}

.innerg-membership__features {
	list-style: none;
	margin: 0 0 2.5rem; /* mb-10 */
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.875rem; /* gap-3.5 */
	flex: 1;
}

.innerg-membership__feature {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem; /* gap-3 */
	font-size: 0.75rem;
}

.innerg-membership__feature-check {
	flex-shrink: 0;
	color: var( --accent );
	font-size: 0.875rem;
	line-height: 1;
	margin-block-start: 0.125rem; /* mt-0.5 */
}

.innerg-membership__feature-text {
	color: var( --muted-foreground );
}

.innerg-membership__button {
	display: block;
	width: 100%;
	text-align: center;
	padding-block: 0.875rem; /* py-3.5 */
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border: 1px solid var( --border, #ddd );
	background: transparent;
	color: inherit;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.innerg-membership__plan:not( .innerg-membership__plan--highlighted ) .innerg-membership__button:hover {
	background: var( --brand-dark );
	color: var( --background );
	border-color: var( --brand-dark );
}

/* Highlighted (featured) plan — text opacity ratios match the
   reference's own text-background/55, /50, /75 utility classes; the
   checkmark and plan name/price stay at full opacity, only the
   secondary text dims, which is why each gets its own inner element
   rather than a shared card-level opacity. */

.innerg-membership__plan--highlighted .innerg-membership__desc {
	color: inherit;
	opacity: 0.55;
}

.innerg-membership__plan--highlighted .innerg-membership__price-period {
	color: inherit;
	opacity: 0.5;
}

.innerg-membership__plan--highlighted .innerg-membership__feature-text {
	color: inherit;
	opacity: 0.75;
}

.innerg-membership__plan--highlighted .innerg-membership__button:hover {
	opacity: 0.8;
}

/* ----- Navigation: always rendered, always visible on mobile; only
   shown on desktop once the carousel kicks in (see below). ----- */

.innerg-membership__nav {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-block-start: 2rem;
}

.innerg-membership__nav .innerg-membership__dots {
	flex: 1 1 auto;
}

.innerg-membership__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.innerg-membership__dots--pos-left {
	justify-content: flex-start;
}

.innerg-membership__dots--pos-right {
	justify-content: flex-end;
}

.innerg-membership__dot {
	border: 0;
	padding: 0;
	background: none;
	cursor: pointer;
}

.innerg-membership__dots--dots .innerg-membership__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: rgba( 43, 41, 26, 0.3 );
}

.innerg-membership__dots--dots .innerg-membership__dot.is-active {
	background-color: var( --brand-dark, #2b291a );
}

.innerg-membership__dots--numbers .innerg-membership__dot {
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.05em;
	color: rgba( 43, 41, 26, 0.3 );
}

.innerg-membership__dots--numbers .innerg-membership__dot.is-active {
	color: var( --brand-dark, #2b291a );
}

.innerg-membership__dot-line {
	width: 1.75rem;
	height: 1px;
	background-color: rgba( 43, 41, 26, 0.3 );
}

.innerg-membership__arrow {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background-color: var( --secondary );
	color: var( --foreground );
	border: 0;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.innerg-membership__arrow:hover {
	background-color: color-mix( in srgb, var( --secondary ) 60%, transparent );
}

.innerg-membership__arrow svg {
	width: 16px;
	height: 16px;
}

@media ( min-width: 1024px ) {
	/* Default: 3 or fewer plans — the reference's own static grid,
	   full-width cards, no navigation (nothing to page through).
	   Dividers are real borders (border-inline-end per card, removed on
	   the last), not the gap-px/bg-border "peek-through" trick — that
	   technique splits 1024px (or whatever --container-max resolves to)
	   across N equal-width `1fr` columns, which almost never divides
	   evenly; the sub-pixel remainder rounds unpredictably per column
	   under fractional display scaling (125%/150%, common on Windows),
	   occasionally leaving a stray hairline of the container's own
	   background showing past the last card's right edge. A real border
	   painted inside each card's own box has no such rounding-dependent
	   gap to leak through. */
	.innerg-membership:not( .innerg-membership--carousel ) .innerg-membership__track {
		display: grid;
		grid-template-columns: repeat( var( --innerg-membership-columns, 3 ), 1fr );
		gap: 0;
		max-width: 64rem; /* max-w-5xl */
	}

	.innerg-membership:not( .innerg-membership--carousel ) .innerg-membership__plan {
		grid-area: auto;
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		position: static;
		border-inline-end: 1px solid var( --border );
	}

	.innerg-membership:not( .innerg-membership--carousel ) .innerg-membership__plan:last-child {
		border-inline-end: 0;
	}

	.innerg-membership:not( .innerg-membership--carousel ) .innerg-membership__nav {
		display: none;
	}

	/* More than 3 plans — infinite, center-focused carousel: the
	   active plan is shown at full size, its immediate neighbours are
	   scaled down and dimmed either side, everything else is hidden.
	   `data-plan-offset` (set by membership.js) drives both the
	   visual state and left-to-right order, so DOM order never has to
	   match display order. */
	.innerg-membership--carousel .innerg-membership__track {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 1.5rem;
		max-width: none;
		padding-block: 1rem;
	}

	.innerg-membership--carousel .innerg-membership__plan {
		grid-area: auto;
		flex: 0 0 22rem;
		visibility: visible;
		opacity: 0.45;
		pointer-events: auto;
		position: static;
		/* Locked to the tallest plan (measured by membership.js across
		   ALL plans, not just the 3 currently on screen) so rotating
		   the carousel never changes the row's height — see the flex
		   button rule below for where the extra space ends up. */
		min-height: var( --innerg-membership-card-height, auto );
		transform: scale( 0.86 );
		box-shadow: 0 1rem 2.5rem rgba( 43, 41, 26, 0.08 );
		transition: transform 0.4s ease, opacity 0.4s ease;
	}

	.innerg-membership--carousel .innerg-membership__plan[ data-plan-offset='-1' ] {
		order: 0;
	}

	.innerg-membership--carousel .innerg-membership__plan[ data-plan-offset='0' ] {
		order: 1;
		opacity: 1;
		transform: scale( 1 );
		box-shadow: 0 1.5rem 3rem rgba( 43, 41, 26, 0.14 );
		z-index: 1;
	}

	.innerg-membership--carousel .innerg-membership__plan[ data-plan-offset='1' ] {
		order: 2;
	}

	/* Kept laid out (not display:none) so membership.js can always
	   read its real scrollHeight for the min-height calc above, even
	   while it's off-screen — only taken out of the flex row's own
	   flow via absolute positioning. */
	.innerg-membership--carousel .innerg-membership__plan[ data-plan-offset='hidden' ] {
		position: absolute;
		visibility: hidden;
		pointer-events: none;
		opacity: 0;
		width: 22rem;
	}
}

/* ---------- Testimonials ---------- */

.innerg-testimonials {
	/* Same reasoning as Mission/Pillars/Trainers — the reference's own
	   --secondary token (#e1d5c3) is a flat hex, not derived the way
	   ours is. */
	background-color: color-mix( in srgb, #e1d5c3 40%, transparent );
	padding-block: 6rem; /* py-24 */
}

.innerg-testimonials__container {
	/* Same self-contained max-width + centering + side padding every
	   other section here uses (Disciplines/Mission/Overview/etc.) —
	   without its own cap, the track's `max-width:none` at desktop
	   (below) let this section's actual rendered width depend on
	   whatever the wrapping Elementor SECTION's own layout setting
	   happened to be (boxed vs full_width) rather than being fixed and
	   predictable regardless of that per-instance setting. */
	max-width: var( --container-max, 1280px );
	margin-inline: auto;
	padding-inline: 1.5rem; /* px-6 */
}

.innerg-testimonials__header {
	margin-block-end: 3.5rem; /* mb-14 */
}

.innerg-testimonials__eyebrow {
	font-size: 0.625rem; /* 10px */
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var( --accent );
	margin-block-end: 1rem; /* mb-4 */
}

.innerg-testimonials__heading {
	font-family: var( --font-serif );
	font-weight: 500;
	color: var( --brand-dark, var( --foreground ) );
	font-size: 2.25rem; /* 36px, text-4xl — no responsive class in the reference */
}

/* ----- Track: mobile-first single-slide grid-stack, shared by mobile
   (always one testimonial at a time) and the desktop carousel (more
   than 3 testimonials). Desktop with 3 or fewer testimonials overrides
   this into a plain static grid further down — the reference's own
   exact layout. ----- */

.innerg-testimonials__track {
	position: relative;
	display: grid;
	max-width: 26rem;
	margin-inline: auto;
}

.innerg-testimonials__card {
	grid-area: 1 / 1;
	padding: 2rem; /* p-8 */
	display: flex;
	flex-direction: column;
	background: var( --background, #fff );
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}

.innerg-testimonials__card[ data-testimonial-offset='0' ] {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	position: relative;
	z-index: 1;
}

.innerg-testimonials__stars {
	display: flex;
	gap: 0.25rem; /* gap-1 */
	margin-block-end: 1.5rem; /* mb-6 */
	color: var( --accent );
}

.innerg-testimonials__star--empty {
	opacity: 0.35;
}

.innerg-testimonials__quote {
	flex: 1;
	margin: 0 0 2rem; /* mb-8 */
	font-family: var( --font-serif );
	font-style: italic;
	font-size: 1.125rem; /* 18px */
	line-height: 1.625; /* leading-relaxed */
	color: var( --brand-dark, var( --foreground ) );
}

.innerg-testimonials__author {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	border-top: 1px solid var( --border, #ddd );
	padding-block-start: 1.25rem; /* pt-5 */
}

/* Two classes so this beats Elementor's own `.elementor img { border-
   radius: 0 }` reset (specificity 0,1,1) — a bare `.innerg-
   testimonials__avatar` (0,1,0) loses to it regardless of source
   order, same class of bug as the custom-property-indirection issue
   documented elsewhere: an unrelated, higher-specificity global rule
   silently wins over a single-class widget rule. */
.innerg-testimonials__author .innerg-testimonials__avatar {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
}

.innerg-testimonials__name {
	font-size: 0.875rem; /* 14px */
	font-weight: 500;
}

.innerg-testimonials__meta {
	font-size: 0.625rem; /* 10px */
	color: var( --muted-foreground );
	letter-spacing: 0.025em;
	margin-block-start: 0.25rem;
}

/* Same 1024px-and-up size bump discovered in the reference's own
   compiled build elsewhere in this theme (Membership/Pillars/etc.) —
   confirmed live: eyebrow/meta 10→12px, heading 36→44px, quote
   18→20px, name 14→15px. Placed after all the base rules above (not
   alongside the header rules near the top of this section) since an
   equal-specificity rule wins by SOURCE ORDER, not media-query
   position — putting it earlier let the later, unconditional
   .quote/.name/.meta declarations silently override it. */
@media ( min-width: 1024px ) {
	.innerg-testimonials__eyebrow {
		font-size: 0.75rem; /* 12px */
	}

	.innerg-testimonials__heading {
		font-size: 2.75rem; /* 44px */
	}

	.innerg-testimonials__quote {
		font-size: 1.25rem; /* 20px */
	}

	.innerg-testimonials__name {
		font-size: 0.9375rem; /* 15px */
	}

	.innerg-testimonials__meta {
		font-size: 0.75rem; /* 12px */
	}
}

/* ----- Navigation: always rendered, always visible on mobile; only
   shown on desktop once the carousel kicks in (see below). ----- */

.innerg-testimonials__nav {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-block-start: 2rem;
}

.innerg-testimonials__nav .innerg-testimonials__dots {
	flex: 1 1 auto;
}

.innerg-testimonials__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.innerg-testimonials__dots--pos-left {
	justify-content: flex-start;
}

.innerg-testimonials__dots--pos-right {
	justify-content: flex-end;
}

.innerg-testimonials__dot {
	border: 0;
	padding: 0;
	background: none;
	cursor: pointer;
}

.innerg-testimonials__dots--dots .innerg-testimonials__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: rgba( 43, 41, 26, 0.3 );
}

.innerg-testimonials__dots--dots .innerg-testimonials__dot.is-active {
	background-color: var( --brand-dark, #2b291a );
}

.innerg-testimonials__dots--numbers .innerg-testimonials__dot {
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.05em;
	color: rgba( 43, 41, 26, 0.3 );
}

.innerg-testimonials__dots--numbers .innerg-testimonials__dot.is-active {
	color: var( --brand-dark, #2b291a );
}

.innerg-testimonials__dot-line {
	width: 1.75rem;
	height: 1px;
	background-color: rgba( 43, 41, 26, 0.3 );
}

.innerg-testimonials__arrow {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background-color: var( --secondary );
	color: var( --foreground );
	border: 0;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.innerg-testimonials__arrow:hover {
	background-color: color-mix( in srgb, var( --secondary ) 60%, transparent );
}

.innerg-testimonials__arrow svg {
	width: 16px;
	height: 16px;
}

@media ( min-width: 768px ) {
	/* Default: 3 or fewer testimonials — the reference's own static
	   grid, hairline dividers via the gap-px/bg-border trick, no
	   navigation (nothing to page through). */
	.innerg-testimonials:not( .innerg-testimonials--carousel ) .innerg-testimonials__track {
		display: grid;
		grid-template-columns: repeat( var( --innerg-testimonials-columns, 3 ), 1fr );
		gap: 1px;
		background: var( --border );
		max-width: none;
	}

	.innerg-testimonials:not( .innerg-testimonials--carousel ) .innerg-testimonials__card {
		grid-area: auto;
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		position: static;
	}

	.innerg-testimonials:not( .innerg-testimonials--carousel ) .innerg-testimonials__nav {
		display: none;
	}

	/* More than 3 testimonials — infinite, center-focused carousel:
	   the active card is shown at full size, its immediate neighbours
	   are scaled down and dimmed either side, everything else is
	   hidden. `data-testimonial-offset` (set by testimonials.js)
	   drives both the visual state and left-to-right order, so DOM
	   order never has to match display order. */
	.innerg-testimonials--carousel .innerg-testimonials__track {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 1.5rem;
		max-width: none;
		padding-block: 1rem;
	}

	.innerg-testimonials--carousel .innerg-testimonials__card {
		grid-area: auto;
		flex: 0 0 22rem;
		visibility: visible;
		opacity: 0.45;
		pointer-events: auto;
		position: static;
		/* Locked to the tallest card (measured by testimonials.js
		   across ALL cards, not just the 3 currently on screen) so
		   rotating the carousel never changes the row's height — the
		   extra space lands between the quote and the author block,
		   same principle as Membership's card/button locking. */
		min-height: var( --innerg-testimonials-card-height, auto );
		transform: scale( 0.86 );
		box-shadow: 0 1rem 2.5rem rgba( 43, 41, 26, 0.08 );
		transition: transform 0.4s ease, opacity 0.4s ease;
	}

	.innerg-testimonials--carousel .innerg-testimonials__card[ data-testimonial-offset='-1' ] {
		order: 0;
	}

	.innerg-testimonials--carousel .innerg-testimonials__card[ data-testimonial-offset='0' ] {
		order: 1;
		opacity: 1;
		transform: scale( 1 );
		box-shadow: 0 1.5rem 3rem rgba( 43, 41, 26, 0.14 );
		z-index: 1;
	}

	.innerg-testimonials--carousel .innerg-testimonials__card[ data-testimonial-offset='1' ] {
		order: 2;
	}

	/* Kept laid out (not display:none) so testimonials.js can always
	   read its real scrollHeight for the min-height calc above, even
	   while it's off-screen — only taken out of the flex row's own
	   flow via absolute positioning. */
	.innerg-testimonials--carousel .innerg-testimonials__card[ data-testimonial-offset='hidden' ] {
		position: absolute;
		visibility: hidden;
		pointer-events: none;
		opacity: 0;
		width: 22rem;
	}
}

/* ---------- Account Feature ---------- */

/* Header (eyebrow/heading/description) runs full-width above the
   two-column content row — kept out of the grid entirely rather than
   spanning it, since it never needs to line up column-for-column with
   anything below it. */
.innerg-account-feature__header {
	margin-block-end: 1.75rem; /* tighter on mobile; desktop gets its own value below */
}

/* Content row: mobile-first single column. The visual renders first in
   the markup (so it naturally lands BETWEEN the header and the
   feature list on mobile, as requested, with zero reordering needed);
   at desktop the two are swapped via `order` so the list+button sit
   on the start side and the illustration on the end side instead. */
.innerg-account-feature__content {
	display: flex;
	flex-direction: column;
	gap: 1.75rem; /* tighter on mobile; desktop gets its own value below */
}

@media ( min-width: 1024px ) {
	.innerg-account-feature__header {
		margin-block-end: 3rem;
	}

	.innerg-account-feature__content {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 4rem; /* gap-16 */
		align-items: center;
	}

	.innerg-account-feature__content .innerg-account-feature__main {
		order: 1;
	}

	.innerg-account-feature__content .innerg-account-feature__visual {
		order: 2;
	}
}

.innerg-account-feature__eyebrow {
	font-size: 0.625rem; /* 10px */
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var( --accent );
	margin-block-end: 1rem; /* mb-4 */
}

.innerg-account-feature__heading {
	font-family: var( --font-serif );
	font-weight: 500;
	line-height: 1.2;
	color: var( --brand-dark, var( --foreground ) );
	font-size: 2.25rem; /* 36px, text-4xl (mobile) */
	margin-block-end: 1.5rem; /* mb-6 */
}

@media ( min-width: 768px ) {
	.innerg-account-feature__heading {
		font-size: 3rem; /* 48px, md:text-5xl */
	}
}

.innerg-account-feature__description {
	font-size: 0.875rem; /* 14px */
	line-height: 1.625; /* leading-relaxed */
	color: var( --muted-foreground );
	max-width: 28rem; /* max-w-md */
	margin-block-end: 2.5rem; /* mb-10 */
}

.innerg-account-feature__list {
	display: flex;
	flex-direction: column;
	gap: 1.75rem; /* gap-7 */
	margin-block-end: 2.5rem; /* mb-10 */
}

.innerg-account-feature__item {
	display: flex;
	gap: 1rem; /* gap-4 */
}

.innerg-account-feature__icon {
	flex-shrink: 0;
	width: 2.5rem; /* 40px, w-10 */
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var( --border, #ddd );
	color: var( --accent );
}

.innerg-account-feature__icon svg {
	width: 16px;
	height: 16px;
}

.innerg-account-feature__item-title {
	font-size: 0.875rem; /* 14px */
	font-weight: 600;
	color: var( --brand-dark, var( --foreground ) );
	margin-block-end: 0.25rem; /* mb-1 */
}

.innerg-account-feature__item-desc {
	font-size: 0.875rem; /* 14px */
	line-height: 1.625; /* leading-relaxed */
	color: var( --muted-foreground );
}

/* Same 1024px-and-up size bump discovered in the reference's own
   compiled build elsewhere in this theme (Membership/Testimonials/
   Pillars/etc.) — confirmed live: eyebrow 10→12px, heading 48→56px,
   description/item-title/item-desc 14→15px, button text 12→13px.
   Placed last within this section's CSS (after every base rule it
   touches) — an equal-specificity rule wins by source order, not by
   where the media query "logically" belongs. */
@media ( min-width: 1024px ) {
	.innerg-account-feature__eyebrow {
		font-size: 0.75rem; /* 12px */
	}

	.innerg-account-feature__heading {
		font-size: 3.5rem; /* 56px */
	}

	.innerg-account-feature__description,
	.innerg-account-feature__item-title,
	.innerg-account-feature__item-desc {
		font-size: 0.9375rem; /* 15px */
	}
}

.innerg-account-feature__visual {
	position: relative;
	display: flex;
	justify-content: center;
}

@media ( min-width: 1024px ) {
	.innerg-account-feature__visual {
		justify-content: flex-end;
	}
}

.innerg-account-feature__media {
	width: 100%;
	max-width: 32rem; /* max-w-lg */
}

.innerg-account-feature__media img {
	display: block;
	width: 100%;
	height: auto;
	box-shadow: 0 24px 64px -24px rgba( 43, 41, 26, 0.25 );
}

.innerg-account-feature__illustration {
	width: 100%;
	max-width: 26rem;
	height: auto;
}

/* 20% smaller on mobile specifically, per request — the desktop size
   (26rem) is unchanged. */
@media ( max-width: 1023px ) {
	.innerg-account-feature__illustration {
		max-width: 20.8rem; /* 26rem * 0.8 */
	}
}

/* Button centred on mobile only — the reference itself doesn't
   specify this (no mobile-specific button alignment exists there),
   it's a deliberate refinement once the CTA sits below a full-width
   feature list on a narrow screen. */
@media ( max-width: 1023px ) {
	.innerg-account-feature__main .innerg-btn {
		display: flex;
		width: fit-content;
		margin-inline: auto;
	}
}

/* ---------- App Promo ---------- */

/* Full-bleed break-out — this section deliberately ignores whatever
   container it's placed in (unlike every other section here, which
   stays within max-w-7xl) since the photo is meant to run edge to
   edge of the viewport. */
.innerg-app-promo {
	position: relative;
	width: 100vw;
	margin-inline: calc( 50% - 50vw );
	display: flex;
	flex-direction: column;
	background-color: color-mix( in srgb, #e1d5c3 50%, transparent );
}

@media ( min-width: 1024px ) {
	.innerg-app-promo {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: stretch;
	}
}

.innerg-app-promo__visual {
	position: relative;
	min-height: var( --innerg-app-promo-visual-height, 320px );
}

@media ( min-width: 1024px ) {
	.innerg-app-promo__visual {
		min-height: var( --innerg-app-promo-visual-height, 480px );
	}
}

.innerg-app-promo__mask {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

/* Two classes so this beats Elementor's own `.elementor img { height:
   auto }` reset (specificity 0,1,1) — same recurring gotcha as the
   Hero/Testimonials images. Brightness/saturation/contrast are read
   from the *visual* wrapper (not set directly here) so the Photo
   treatment controls can grade either the real photo or the
   placeholder illustration with one set of variables. */
.innerg-app-promo__mask .innerg-app-promo__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness( var( --innerg-app-promo-brightness, 0.92 ) ) saturate( var( --innerg-app-promo-saturate, 0.78 ) ) contrast( var( --innerg-app-promo-contrast, 1.06 ) );
	transform: scale( var( --innerg-app-promo-photo-scale, 1 ) );
	transition: transform 1.4s cubic-bezier( 0.16, 1, 0.3, 1 );
}

.innerg-app-promo__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient( 135deg, color-mix( in srgb, var( --accent ) 16%, var( --secondary ) ), var( --secondary ) );
}

.innerg-app-promo__placeholder svg {
	height: 78%;
	width: auto;
	transform: scale( var( --innerg-app-promo-photo-scale, 1 ) );
	transition: transform 1.4s cubic-bezier( 0.16, 1, 0.3, 1 );
}

.innerg-app-promo__tint {
	position: absolute;
	inset: 0;
	background-color: var( --innerg-app-promo-tint, var( --brand-dark ) );
	opacity: var( --innerg-app-promo-tint-opacity, 0.14 );
	mix-blend-mode: var( --innerg-app-promo-tint-blend, multiply );
	pointer-events: none;
}

/* Mobile: sections stack top-to-bottom instead of side-by-side, so the
   seam is the photo's BOTTOM edge, not its right/left edge — always
   faded regardless of which desktop mask_style is chosen (the
   shape-based options don't have a meaningful stacked-layout
   equivalent, but a soft dissolve into the content below always
   does). Reuses the same fade-width variable as the desktop version;
   Elementor's responsive control already gives it its own mobile
   value when set. */
@media ( max-width: 1023px ) {
	.innerg-app-promo__mask {
		mask-image: linear-gradient( to bottom, black 0%, black calc( 100% - var( --innerg-app-promo-fade-width, 30% ) ), transparent 100% );
		-webkit-mask-image: linear-gradient( to bottom, black 0%, black calc( 100% - var( --innerg-app-promo-fade-width, 30% ) ), transparent 100% );
	}
}

@media ( min-width: 1024px ) {
	/* Fade: the photo itself fades to transparent toward the seam,
	   revealing the section's own background underneath — no shape,
	   no hard edge, just the photo dissolving into the page. This is
	   the default; the shape-based alternatives below are opt-in. */
	.innerg-app-promo--mask-fade .innerg-app-promo__mask {
		mask-image: linear-gradient( to right, black 0%, black calc( 100% - var( --innerg-app-promo-fade-width, 32% ) ), transparent 100% );
		-webkit-mask-image: linear-gradient( to right, black 0%, black calc( 100% - var( --innerg-app-promo-fade-width, 32% ) ), transparent 100% );
	}

	[dir='rtl'] .innerg-app-promo--mask-fade .innerg-app-promo__mask {
		mask-image: linear-gradient( to left, black 0%, black calc( 100% - var( --innerg-app-promo-fade-width, 32% ) ), transparent 100% );
		-webkit-mask-image: linear-gradient( to left, black 0%, black calc( 100% - var( --innerg-app-promo-fade-width, 32% ) ), transparent 100% );
	}

	/* The shape-based transitions still get a seam fade layered on top
	   (softens the cut edge into the content panel); "fade" doesn't
	   need it since the mask already dissolves the whole edge. */
	.innerg-app-promo:not( .innerg-app-promo--mask-fade ) .innerg-app-promo__mask::after {
		content: '';
		position: absolute;
		inset-block: 0;
		inset-inline-end: 0;
		width: 18%;
		background: linear-gradient( to right, transparent, var( --background ) );
		pointer-events: none;
	}

	[dir='rtl'] .innerg-app-promo:not( .innerg-app-promo--mask-fade ) .innerg-app-promo__mask::after {
		background: linear-gradient( to left, transparent, var( --background ) );
	}

	/* Diagonal: a gentle lean into the seam — no SVG needed. */
	.innerg-app-promo--mask-diagonal .innerg-app-promo__mask {
		clip-path: polygon( 0 0, 100% 0, 94% 100%, 0 100% );
	}

	[dir='rtl'] .innerg-app-promo--mask-diagonal .innerg-app-promo__mask {
		clip-path: polygon( 100% 0, 0 0, 6% 100%, 100% 100% );
	}

	/* Curve: a soft single wave, drawn via an objectBoundingBox
	   clipPath (see the widget's render()) so it scales with the box
	   instead of needing fixed pixel coordinates. */
	.innerg-app-promo--mask-curve .innerg-app-promo__mask {
		clip-path: url( #innerg-app-promo-curve );
	}

	[dir='rtl'] .innerg-app-promo--mask-curve .innerg-app-promo__mask {
		clip-path: url( #innerg-app-promo-curve-rtl );
	}
}

/* ----- Motion: a gentle zoom-out reveal the first time the section
   scrolls into view (toggled via .is-visible by app-promo.js), plus a
   slightly closer zoom on hover. Entirely opt-out via the "Reveal &
   hover effects" switcher (no --motion class at all when disabled, so
   none of this applies and the photo just renders statically). ----- */
.innerg-app-promo--motion .innerg-app-promo__visual {
	opacity: 0;
	transition: opacity 1.1s ease;
}

.innerg-app-promo--motion .innerg-app-promo__mask .innerg-app-promo__photo,
.innerg-app-promo--motion .innerg-app-promo__placeholder svg {
	--innerg-app-promo-photo-scale: 1.08;
}

.innerg-app-promo--motion.is-visible .innerg-app-promo__visual {
	opacity: 1;
}

.innerg-app-promo--motion.is-visible .innerg-app-promo__mask .innerg-app-promo__photo,
.innerg-app-promo--motion.is-visible .innerg-app-promo__placeholder svg {
	--innerg-app-promo-photo-scale: 1;
}

.innerg-app-promo--motion .innerg-app-promo__visual:hover .innerg-app-promo__mask .innerg-app-promo__photo,
.innerg-app-promo--motion .innerg-app-promo__visual:hover .innerg-app-promo__placeholder svg {
	--innerg-app-promo-photo-scale: 1.045;
	transition: transform 0.8s cubic-bezier( 0.16, 1, 0.3, 1 );
}

@media ( prefers-reduced-motion: reduce ) {
	.innerg-app-promo--motion .innerg-app-promo__visual {
		opacity: 1;
		transition: none;
	}

	.innerg-app-promo--motion .innerg-app-promo__mask .innerg-app-promo__photo,
	.innerg-app-promo--motion .innerg-app-promo__placeholder svg {
		--innerg-app-promo-photo-scale: 1;
		transition: none;
	}
}

.innerg-app-promo__content {
	padding: 3rem 1.5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

@media ( min-width: 1024px ) {
	.innerg-app-promo__content {
		padding: 4rem 4rem 4rem 3rem;
	}

	[dir='rtl'] .innerg-app-promo__content {
		padding: 4rem 3rem 4rem 4rem;
	}
}

.innerg-app-promo__eyebrow {
	font-size: 0.625rem; /* 10px */
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var( --accent );
	margin-block-end: 1rem; /* mb-4 */
}

.innerg-app-promo__heading {
	font-family: var( --font-serif );
	font-weight: 500;
	line-height: 1.2;
	color: var( --brand-dark, var( --foreground ) );
	font-size: 2.25rem; /* 36px, text-4xl (mobile) */
	margin-block-end: 1.5rem; /* mb-6 */
}

@media ( min-width: 768px ) {
	.innerg-app-promo__heading {
		font-size: 3rem; /* 48px, md:text-5xl */
	}
}

.innerg-app-promo__description {
	font-size: 0.875rem; /* 14px */
	line-height: 1.625; /* leading-relaxed */
	color: var( --muted-foreground );
	max-width: 28rem; /* max-w-md */
	margin-block-end: 2.5rem; /* mb-10 */
}

.innerg-app-promo__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem; /* gap-3 */
}

.innerg-app-promo__badge {
	display: flex;
	align-items: center;
	gap: 0.75rem; /* gap-3 */
	padding: 0.75rem 1.5rem; /* py-3 px-6 */
	border: 1px solid var( --brand-dark, #2b291a );
	color: var( --brand-dark, #2b291a );
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.innerg-app-promo__badge-icon {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
}

.innerg-app-promo__badge-text {
	display: flex;
	flex-direction: column;
	text-align: start;
	line-height: 1.2;
}

.innerg-app-promo__badge-eyebrow {
	font-size: 0.5625rem; /* 9px */
	letter-spacing: 0.02em;
	opacity: 0.7;
}

.innerg-app-promo__badge-title {
	font-size: 0.875rem; /* 14px */
	font-weight: 600;
}

/* Same 1024px-and-up size bump discovered in the reference's own
   compiled build elsewhere in this theme (Membership/Testimonials/
   Account Feature/etc.) — confirmed live: eyebrow 10→12px, heading
   48→56px, description 14→15px, badge eyebrow 9→11px, badge title
   14→15px. Placed last within this section's CSS (after every base
   rule it touches) — an equal-specificity rule wins by source order,
   not by where the media query "logically" belongs. */
@media ( min-width: 1024px ) {
	.innerg-app-promo__eyebrow {
		font-size: 0.75rem; /* 12px */
	}

	.innerg-app-promo__heading {
		font-size: 3.5rem; /* 56px */
	}

	.innerg-app-promo__description {
		font-size: 0.9375rem; /* 15px */
	}

	.innerg-app-promo__badge-eyebrow {
		font-size: 0.6875rem; /* 11px */
	}

	.innerg-app-promo__badge-title {
		font-size: 0.9375rem; /* 15px */
	}
}

/* ---------- CTA Banner ---------- */

/* Full-bleed break-out — the reference itself has no max-width
   container on this section at all (unlike every other section here),
   so the accent background genuinely runs edge to edge of the
   viewport; only the description gets its own inner max-width. */
.innerg-cta-banner {
	position: relative;
	width: 100vw;
	margin-inline: calc( 50% - 50vw );
	overflow: hidden;
	text-align: center;
	padding: 5rem 1.5rem; /* py-20 px-6 */
	background-color: #73947c;
}

/* Two classes so this beats Elementor's own `.elementor img { max-
   width: 100%; height: auto }` reset (0,1,1 beats a bare 0,1,0). */
.innerg-cta-banner .innerg-cta-banner__decoration {
	position: absolute;
	inset-inline-start: 50%;
	top: 50%;
	transform: translate( -50%, -50% );
	width: 640px;
	max-width: none;
	height: auto;
	opacity: 0.08;
	/* The reference's monogram is sage-green; on this accent-green
	   background it's inverted to white so it reads as a tone-on-tone
	   watermark instead of disappearing into the same colour. */
	filter: brightness( 0 ) invert( 1 );
	pointer-events: none;
	user-select: none;
}

.innerg-cta-banner__eyebrow {
	position: relative;
	font-size: 0.625rem; /* 10px */
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: rgba( 43, 41, 26, 0.55 );
	margin-block-end: 1.25rem; /* mb-5 */
}

.innerg-cta-banner__heading {
	position: relative;
	font-family: var( --font-serif );
	font-weight: 500;
	line-height: 1.2;
	color: var( --brand-dark, #2b291a );
	font-size: 2.25rem; /* 36px, text-4xl (mobile) */
	margin-block-end: 1.25rem; /* mb-5 */
}

@media ( min-width: 768px ) {
	.innerg-cta-banner__heading {
		font-size: 3rem; /* 48px, md:text-5xl */
	}
}

.innerg-cta-banner__description {
	position: relative;
	font-size: 0.875rem; /* 14px */
	line-height: 1.625; /* leading-relaxed */
	color: rgba( 43, 41, 26, 0.65 );
	max-width: 28rem; /* max-w-md */
	margin: 0 auto 2.5rem; /* mb-10 */
}

.innerg-cta-banner__buttons {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	justify-content: center;
}

@media ( min-width: 640px ) {
	.innerg-cta-banner__buttons {
		flex-direction: row;
	}
}

.innerg-cta-banner__button {
	position: relative;
	padding: 1rem 3rem; /* py-4 px-12 */
	/* Overrides .innerg-btn's flat 13px default — reference is 12px
	   below the 1024px bump, restored to 13px in the block below. */
	font-size: 0.75rem; /* 12px */
}

/* Same 1024px-and-up size bump discovered in the reference's own
   compiled build elsewhere in this theme — confirmed live: eyebrow
   10→12px, heading 48→56px, description 14→15px, button 12→13px.
   Placed last within this section's CSS (after every base rule it
   touches) — an equal-specificity rule wins by source order, not by
   where the media query "logically" belongs. */
@media ( min-width: 1024px ) {
	.innerg-cta-banner__eyebrow {
		font-size: 0.75rem; /* 12px */
	}

	.innerg-cta-banner__heading {
		font-size: 3.5rem; /* 56px */
	}

	.innerg-cta-banner__description {
		font-size: 0.9375rem; /* 15px */
	}

	.innerg-cta-banner__button {
		font-size: 0.8125rem; /* 13px */
	}
}

/* ----- Section Header (small reusable eyebrow/heading/intro block) ----- */

.innerg-section-header {
	--innerg-section-header-align: center;
	max-width: 640px;
	margin-inline: auto;
	padding: clamp( 3rem, 6vw, 5rem ) 1.5rem 2.5rem;
	text-align: var( --innerg-section-header-align );
}

.innerg-section-header__eyebrow {
	margin: 0 0 0.75rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var( --accent );
}

.innerg-section-header__heading {
	margin: 0 0 1rem;
	font-family: var( --font-serif );
	font-weight: 500;
	font-size: clamp( 1.75rem, 4vw, 2.5rem );
	color: var( --foreground );
}

.innerg-section-header__intro {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var( --muted-foreground );
}