/**
 * KOG — Section Animations
 *
 * Scroll-triggered reveals for the Hero Maximize pattern.
 * Targets are toggled to `.is-visible` by section-animations.js via
 * IntersectionObserver. Final-state styles fall back when JS is off.
 */

/* ==========================================================================
   1. Highlighted headline underline (draw-in left → right)
   ========================================================================== */
.highlight-underline {
	position: relative;
	background-image: linear-gradient(
		var(--wp--preset--color--gold),
		var(--wp--preset--color--gold)
	);
	background-repeat: no-repeat;
	background-size: 0% 0.18em;
	background-position: 0 92%;
	padding: 0 0.05em;
	transition: background-size 1.2s ease-out;
}
.highlight-underline.is-visible {
	background-size: 100% 0.18em;
}

/* ==========================================================================
   2. Pre-reveal states for figure + star
   ========================================================================== */
.hero-figure,
.decorative-star {
	opacity: 0;
	will-change: transform, opacity;
	transition: opacity 0.9s ease-out,
	            transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hero-figure {
	transform: translateY(5%) scale(0.92);
}
.decorative-star {
	transform: rotate(-120deg) scale(0.6);
}
.hero-figure.is-visible,
.decorative-star.is-visible {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   3. Hero Maximize layout (constrained section, sits on body bg)
   ========================================================================== */
.kog-hero-maximize {
	color: var(--wp--preset--color--charcoal);
	/* Audience-scene texture behind a vertical warm-white fade. Top is fully
	   transparent (image shows through); fade ramps up so the lower section
	   is near-solid warm-white for headline + figure legibility. */
	background-image:
		linear-gradient(
			180deg,
			rgba(245, 232, 192, 1) 0%,
			rgba(245, 232, 192, 1) 6%,
			rgba(245, 232, 192, 0.75) 18%,
			rgba(245, 232, 192, 0.65) 35%,
			rgba(245, 232, 192, 0.85) 70%,
			rgba(245, 232, 192, 0.98) 100%
		),
		url('../images/hero-maximize-bg.jpg');
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
}

/* Sub-headline that follows the hero-headline (smaller follow-up sentence).
   Playfair italic for continuity, ~half the size of the main headline. */
.kog-hero-maximize__sub {
	font-family: var(--wp--preset--font-family--playfair) !important;
	font-size: clamp(0.9375rem, 1.25vw, 1.125rem) !important;
	font-style: italic;
	font-weight: 500 !important;
	line-height: 1.5 !important;
	color: var(--wp--preset--color--charcoal) !important;
	margin: 0.75rem 0 0 !important;
	max-width: 36ch;
}

/* Headline — match section-headline rhythm; slightly punchier than h2 default */
.is-style-hero-headline {
	font-family: var(--wp--preset--font-family--playfair) !important;
	font-size: clamp(1.5rem, 2.6vw, 2.25rem) !important;
	font-weight: 700 !important;
	line-height: 1.15 !important;
	letter-spacing: -0.005em !important;
	color: var(--wp--preset--color--charcoal) !important;
	margin: 0 0 1rem !important;
	max-width: 22ch;
}
.is-style-hero-headline em,
.is-style-hero-headline i {
	font-style: italic;
	color: var(--wp--preset--color--gold);
}

/* Subhead (under the headline) */
.hero-subhead {
	font-size: 0.9375rem !important;
	color: var(--wp--preset--color--gray) !important;
	margin: 0 !important;
	max-width: 30ch;
}

/* Right-column supporting copy — keep the body type modest */
.kog-hero-maximize__cols p:not(.is-style-kog-eyebrow):not(.hero-subhead) {
	font-size: 0.9375rem !important;
}

/* Section has padding-bottom: 0 so the figure can touch the bottom edge.
   Text columns get their own padding-bottom so their content keeps breathing room
   without affecting where the figure lands. */
.kog-hero-maximize__cols > .wp-block-column:not(.kog-hero-maximize__figure-col) {
	padding-bottom: var(--wp--preset--spacing--60);
}

.kog-hero-maximize__figure-col {
	display: flex;
	justify-content: center;
	align-self: flex-end;
}
.kog-hero-maximize__figure-col .hero-figure {
	margin: 0 !important;
	max-width: 100%;
}
.kog-hero-maximize__figure-col .hero-figure img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 900px;
	object-fit: contain;
	object-position: center bottom;
}

/* Scroll-driven scale on hero figure images.
   --hero-scroll-scale is updated by section-animations.js on each rAF tick
   as the figure traverses the viewport (1.00 → 1.08). Applied to the inner
   <img> so it composes with the parent figure's intro-reveal transform. */
.hero-figure img {
	transform-origin: center bottom;
	transform: scale(var(--hero-scroll-scale, 1));
	transition: transform 120ms linear;
	will-change: transform;
}

/* Right-column star sizing */
.decorative-star {
	max-width: 88px;
	margin-left: 0 !important;
}
.decorative-star img {
	display: block;
	width: 100%;
	height: auto;
}

/* ==========================================================================
   4. Responsive: hide desktop figure on small screens, show mobile duplicate
   ========================================================================== */
.hero-figure--mobile {
	display: none !important;
}
.hero-figure--mobile img {
	display: block;
	width: 100%;
	max-width: 320px;
	height: auto;
	margin: 0 auto;
}

@media (max-width: 781px) {
	/* Let mobile cover grow with content instead of forcing 100vh */
	.kog-hero-maximize {
		min-height: auto !important;
	}
	.kog-hero-maximize__figure-col,
	.hero-figure--desktop {
		display: none !important;
	}
	.hero-figure--mobile {
		display: block !important;
	}
	.is-style-hero-headline {
		max-width: none;
	}
	.hero-subhead {
		max-width: none;
	}
}

/* ==========================================================================
   4b. Stage CTA section (full-bleed keynote backdrop)
   ========================================================================== */
.kog-stage-cta {
	position: relative;
	color: var(--wp--preset--color--warm-white);
	background-image:
		linear-gradient(
			rgba(10, 18, 12, 0.62),
			rgba(10, 18, 12, 0.78)
		),
		url('../images/stage-keynote-bg.jpg');
	background-size: cover;
	background-position: center 65%;
	background-repeat: no-repeat;
}
.kog-stage-cta-title {
	font-family: var(--wp--preset--font-family--playfair) !important;
	font-size: clamp(2rem, 3.5vw, 3rem) !important;
	font-weight: 700 !important;
	line-height: 1.1 !important;
	color: var(--wp--preset--color--warm-white) !important;
	margin: 0 auto 1rem !important;
	max-width: 22ch;
}
.kog-stage-cta-title em,
.kog-stage-cta-title i {
	font-style: italic;
	color: var(--wp--preset--color--gold);
}
.kog-stage-cta-sub {
	font-size: clamp(0.9375rem, 0.5vw + 0.85rem, 1.0625rem) !important;
	color: var(--wp--preset--color--cream) !important;
	margin: 0 auto !important;
	max-width: 56ch;
}

/* ==========================================================================
   5. Block style: Pill — Gold (button)
   ========================================================================== */
.wp-block-button.is-style-pill-gold .wp-block-button__link {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--charcoal);
	border-radius: 999px;
	padding: 0.9em 2.2em;
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	transition: transform 200ms ease, background 200ms ease, color 200ms ease;
}
.wp-block-button.is-style-pill-gold .wp-block-button__link:hover,
.wp-block-button.is-style-pill-gold .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--charcoal);
	color: var(--wp--preset--color--gold);
	transform: translateY(-2px);
}

/* ==========================================================================
   7. Opt-in forms (Lead Magnet + Newsletter)
   ========================================================================== */
/* Keep the lead-magnet headline on one line on tablet/desktop (wraps on phones). */
.kog-lead-magnet-section .kog-section-headline {
	font-size: clamp(1.5rem, 4.2vw, 2.5rem) !important;
}
@media (min-width: 700px) {
	.kog-lead-magnet-section .kog-section-headline { white-space: nowrap; }
}
.kog-optin-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	max-width: 520px;
	margin-inline: auto;
}
.kog-optin-form input {
	flex: 1 1 200px;
	min-width: 0;
	padding: 0.85rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.06);
	color: var(--wp--preset--color--warm-white);
	font-size: 1rem;
	font-family: var(--wp--preset--font-family--dm-sans);
}
.kog-optin-form input::placeholder {
	color: rgba(255, 255, 255, 0.85);
}
.kog-optin-form input:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}
.kog-optin-form button {
	padding: 0.85rem 1.5rem;
	border: 0;
	border-radius: 6px;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--charcoal);
	font-size: 0.625rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 700;
	font-family: var(--wp--preset--font-family--dm-sans);
	cursor: pointer;
	transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}
.kog-optin-form button:hover,
.kog-optin-form button:focus-visible {
	background: var(--wp--preset--color--gold-light);
	transform: translateY(-2px);
}
.kog-optin-form--inline {
	max-width: 460px;
}

/* Fallback screen-reader utility in case wp-block-library isn't enqueued. */
.kog-optin-form .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* ==========================================================================
   7b. Hero — Alt (Superhero Pose photo bg + lead-capture form)
   ========================================================================== */

/* Kill WP-injected margin between header and main on the alt homepage so
   the hero's background sits flush with the bottom of the nav. Same fix
   pattern as body.home main on the live homepage. */
body.page-template-page-home-alt main,
body.page-template-page-home-alt main > .wp-block-post-content,
body.page-template-page-home-alt main > .wp-block-post-content > .kog-hero-alt:first-child,
body.page-template-page-home-alt main > .kog-hero-alt:first-child {
	margin-block-start: 0 !important;
	margin-top: 0 !important;
}


.kog-hero-alt {
	position: relative;
	min-height: 92vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	color: var(--wp--preset--color--charcoal);
	/* Left side warm-white-to-transparent scrim brightens negative space
	   under the dark headline copy; subject sits mid/right of frame. */
	background-image:
		linear-gradient(
			90deg,
			rgba(250, 248, 243, 0.78) 0%,
			rgba(250, 248, 243, 0.45) 32%,
			rgba(250, 248, 243, 0.0) 60%
		),
		url('../images/khaliah-superhero.jpg');
	background-size: cover;
	background-position: 90% 20%;
	background-repeat: no-repeat;
}
.kog-hero-alt__cols {
	width: 100%;
	position: relative;
	z-index: 1;
}
.kog-hero-alt__name {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 0.75rem !important;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	margin: 0 0 0.5rem !important;
}
.kog-hero-alt__credentials {
	font-size: 0.875rem !important;
	line-height: 1.55 !important;
	color: var(--wp--preset--color--charcoal);
	max-width: 38ch;
	margin: 0 0 1.5rem !important;
}
/* Brand line — Molly-style oversized label rather than tiny eyebrow.
   Gold, uppercase, tracked, DM Sans. Sized as the "kicker," not a
   micro-eyebrow, so it carries the hero alongside the headline. */
.kog-hero-alt__brand {
	font-family: var(--wp--preset--font-family--dm-sans) !important;
	font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
	font-weight: 800 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase;
	color: var(--wp--preset--color--charcoal) !important;
	margin: 0 0 1rem !important;
	line-height: 1.1 !important;
}
/* Headline — confident subhead beneath the kicker, not a display banger.
   Playfair, fluid 1.625rem → 2.5rem, em→gold via is-style-kog-italic-gold. */
.kog-hero-alt__headline {
	font-family: var(--wp--preset--font-family--playfair) !important;
	font-size: clamp(1.5rem, 2.2vw, 2rem) !important;
	font-weight: 600 !important;
	font-style: italic;
	line-height: 1.35 !important;
	letter-spacing: 0 !important;
	color: var(--wp--preset--color--charcoal) !important;
	margin: 0 0 1.25rem !important;
	max-width: 32ch;
}
.kog-hero-alt__headline em,
.kog-hero-alt__headline i {
	font-style: italic;
	color: var(--wp--preset--color--gold);
}
.kog-hero-alt__body {
	font-size: 1.0625rem !important;
	line-height: 1.65 !important;
	color: var(--wp--preset--color--charcoal);
	margin: 0 !important;
	max-width: 44ch;
}

/* Hero pull-quote (replaces .kog-hero-alt__body when a testimonial is used) */
.kog-hero-alt__testimonial {
	font-family: var(--wp--preset--font-family--playfair) !important;
	font-style: italic;
	font-size: clamp(1rem, 1.4vw, 1.1875rem) !important;
	line-height: 1.6 !important;
	color: var(--wp--preset--color--charcoal);
	margin: 0 !important;
	max-width: 52ch;
}
.kog-hero-alt__cite {
	font-family: var(--wp--preset--font-family--dm-sans) !important;
	font-size: 0.6875rem !important;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--wp--preset--color--gold);
	margin: 0 !important;
	max-width: 52ch;
}

/* Speaker headshot sitting before the credit line. */
.kog-hero-alt__cite-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.75rem;
}
.kog-hero-alt__cite-headshot {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--wp--preset--color--gold-border);
}
.kog-hero-alt__cite-headshot--placeholder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--gold-pale);
	color: var(--wp--preset--color--charcoal);
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* Form card — full-width bar at the bottom of the hero, dark surface for
   legibility against the photo background. Inputs sit horizontally inside. */
.kog-hero-alt__form-card {
	background: rgba(28, 28, 26, 0.3);
	color: var(--wp--preset--color--warm-white);
	padding: 1.5rem 1.75rem;
	border-radius: 10px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
	width: 100%;
}
.kog-hero-alt__form-eyebrow {
	color: var(--wp--preset--color--gold-light) !important;
	margin: 0 0 0.5rem !important;
}
.kog-hero-alt__form-title {
	font-size: 1.5rem !important;
	line-height: 1.2 !important;
	color: var(--wp--preset--color--warm-white) !important;
	margin: 0 0 0.5rem !important;
}
.kog-hero-alt__form-title em,
.kog-hero-alt__form-title i {
	font-style: italic;
	color: var(--wp--preset--color--gold);
}
.kog-hero-alt__form-sub {
	font-size: 0.875rem !important;
	line-height: 1.55 !important;
	color: var(--wp--preset--color--cream);
	margin: 0 0 1.25rem !important;
}
.kog-hero-alt__form-card .kog-optin-form,
.kog-hero-alt__form-card .kog-optin-form--inline {
	max-width: none;
	margin: 0.75rem 0;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: stretch;
}
.kog-hero-alt__form-card .kog-optin-form input {
	flex: 1 1 220px;
	min-width: 0;
}
.kog-hero-alt__form-card .kog-optin-form button {
	flex: 0 0 auto;
	padding: 0.9rem 1.75rem;
	font-size: 0.6875rem;
	white-space: nowrap;
}

@media (max-width: 540px) {
	/* Stack everything on phones so the button doesn't squash. */
	.kog-hero-alt__form-card .kog-optin-form {
		flex-direction: column;
	}
	.kog-hero-alt__form-card .kog-optin-form input,
	.kog-hero-alt__form-card .kog-optin-form button {
		flex: 1 1 100%;
		width: 100%;
	}
}
.kog-hero-alt__form-microcopy {
	color: rgba(255, 255, 255, 0.55) !important;
	margin: 0.75rem 0 0 !important;
	text-align: center;
}

/* Mobile — collapse columns, add a softer warm-white scrim over the
   whole image so left-aligned dark text reads through. */
@media (max-width: 781px) {
	.kog-hero-alt {
		min-height: auto;
		background-position: 65% top;
		padding-top: var(--wp--preset--spacing--70);
		padding-bottom: var(--wp--preset--spacing--60);
		background-image:
			linear-gradient(
				180deg,
				rgba(250, 248, 243, 0.86) 0%,
				rgba(250, 248, 243, 0.74) 55%,
				rgba(250, 248, 243, 0.82) 100%
			),
			url('../images/khaliah-superhero.jpg');
	}
	.kog-hero-alt__headline {
		max-width: none;
	}
	.kog-hero-alt__credentials,
	.kog-hero-alt__body {
		max-width: none;
	}
}

/* ==========================================================================
   7b-bio. Feature-split bio — tighter paragraph rhythm
   Six body paragraphs read better with a denser gap than the default 1.5rem
   block-gap. Targets only paragraphs INSIDE the text column of this section
   so the image column and heading/quote spacing are untouched.
   ========================================================================== */
.kog-feature-split .wp-block-column > .kog-section-sub {
	margin-block-start: 0 !important;
	margin-block-end: 1rem !important;
}

/* Bio stat cards — horizontal 3-col grid on cream chips. Gold Playfair
   number, dark label + source, animated gold underline on hover. */
.kog-bio-stat-row {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
	align-items: stretch;
}
/* WP injects margin-block-start on flow children to honour blockGap. Inside
   our CSS grid that margin makes one card visually taller than the others —
   zero it so the grid's stretch alignment renders equal-height cards. */
.kog-bio-stat-row > .kog-bio-stat-card {
	margin: 0 !important;
}
.kog-bio-stat-card {
	background: var(--wp--preset--color--cream);
	padding: 1.25rem 1rem;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: background 0.3s ease;
}
.kog-bio-stat-card::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--wp--preset--color--gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s ease;
}
.kog-bio-stat-card:hover {
	background: var(--wp--preset--color--gold-pale);
}
.kog-bio-stat-card:hover::after {
	transform: scaleX(1);
}
.kog-bio-stat-number {
	font-family: var(--wp--preset--font-family--playfair) !important;
	font-size: clamp(1.75rem, 2.5vw, 2.5rem) !important;
	font-weight: 900 !important;
	line-height: 1 !important;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--gold) !important;
	margin: 0 0 0.5rem !important;
}
.kog-bio-stat-label {
	font-family: var(--wp--preset--font-family--dm-sans) !important;
	font-size: 0.8125rem !important;
	font-weight: 600 !important;
	line-height: 1.45 !important;
	color: var(--wp--preset--color--charcoal) !important;
	margin: 0 0 0.375rem !important;
}
.kog-bio-stat-source {
	font-family: var(--wp--preset--font-family--dm-sans) !important;
	font-size: 0.625rem !important;
	line-height: 1.4 !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gray) !important;
	margin: 0 !important;
}

@media (max-width: 540px) {
	.kog-bio-stat-row {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   7b-shifts. What Performance Rehab Actually Does — header + 6-card grid.
   Replaces the older 2-col image+copy "heart-break" layout. Card styling
   matches the site rhythm (cream chips, gold-pale hover, animated gold
   underline on hover) used by stat-row, problem-body, bio-stats.
   ========================================================================== */
.kog-shifts__eyebrow {
	color: var(--wp--preset--color--gold) !important;
	margin: 0 auto 1rem !important;
}
.kog-shifts__title {
	font-family: var(--wp--preset--font-family--playfair) !important;
	font-size: clamp(1.75rem, 3.4vw, 2.75rem) !important;
	font-weight: 700 !important;
	line-height: 1.15 !important;
	letter-spacing: -0.005em !important;
	color: var(--wp--preset--color--charcoal) !important;
	margin: 0 auto 1.25rem !important;
	max-width: 24ch;
}
.kog-shifts__title em,
.kog-shifts__title i {
	font-style: italic;
	color: var(--wp--preset--color--gold);
}
.kog-shifts__lead {
	font-style: italic;
	font-size: clamp(1.0625rem, 1.4vw, 1.25rem) !important;
	line-height: 1.5 !important;
	color: var(--wp--preset--color--charcoal) !important;
	margin: 0 auto !important;
	max-width: 42ch;
}
.kog-shifts__lead em,
.kog-shifts__lead i {
	font-style: italic;
	color: var(--wp--preset--color--gold);
}

/* Grid of 6 shift cards — 3 cols desktop, 2 cols tablet, 1 col phone */
.kog-shifts__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}
@media (max-width: 1024px) {
	.kog-shifts__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 600px) {
	.kog-shifts__grid {
		grid-template-columns: 1fr;
	}
}

/* Card — cream surface, gold-pale on hover, gold underline animation. */
.kog-shifts__card {
	background: var(--wp--preset--color--cream);
	padding: 1.5rem;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: background 0.3s ease;
}
.kog-shifts__card::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--wp--preset--color--gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s ease;
}
.kog-shifts__card:hover {
	background: var(--wp--preset--color--gold-pale);
}
.kog-shifts__card:hover::after {
	transform: scaleX(1);
}
.kog-shifts__card-title {
	font-family: var(--wp--preset--font-family--dm-sans) !important;
	font-size: 0.8125rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: var(--wp--preset--color--charcoal) !important;
	margin: 0 0 0.75rem !important;
	line-height: 1.4 !important;
}
.kog-shifts__arrow {
	color: var(--wp--preset--color--gold);
	margin: 0 0.4em;
	font-weight: 700;
}
.kog-shifts__card-body {
	font-size: 0.9375rem !important;
	line-height: 1.6 !important;
	color: var(--wp--preset--color--charcoal) !important;
	margin: 0 !important;
}

/* ==========================================================================
   7c. Shifts (Split) — image-anchored editorial variant of the shifts list.
   Left: sticky warm portrait panel. Right: "Before → After" list with a single
   gold accent. Adapts the arelmoodie split-composition into KOG's warm,
   monochrome-gold language (no card chrome, no rainbow accents).
   ========================================================================== */
.kog-shiftx { background: var(--wp--preset--color--warm-white); position: relative; overflow: hidden; }
.kog-shiftx__inner { max-width: 1400px; margin-inline: auto; }

/* Header — left-aligned, narrow */
.kog-shiftx__header {
	max-width: 32ch;
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
/* Sub-line — plain paragraph beneath the headline (DM Sans, muted). */
.kog-shiftx__sub {
	font-family: var(--wp--preset--font-family--dm-sans) !important;
	font-size: clamp(1.0625rem, 1.4vw, 1.25rem) !important;
	font-weight: 400 !important;
	line-height: 1.55 !important;
	color: rgba(28, 28, 26, 0.66) !important;
	margin: 1.1rem 0 0 !important;
}
.kog-shiftx__title {
	font-family: var(--wp--preset--font-family--playfair) !important;
	font-size: clamp(2rem, 4vw, 3.25rem) !important;
	font-weight: 700 !important;
	line-height: 1.1 !important;
	letter-spacing: -0.01em !important;
	color: var(--wp--preset--color--charcoal) !important;
	margin: 0 !important;
	text-align: center !important;
}
.kog-shiftx__title em,
.kog-shiftx__title i { font-style: italic; color: var(--wp--preset--color--gold); }

/* Body — portrait | list */
.kog-shiftx__body {
	display: grid;
	grid-template-columns: 1.12fr 0.88fr;
	gap: clamp(1.5rem, 3vw, 3.5rem);
	align-items: end;
}

/* Cutout figure — transparent PNG standing on the section, bottom-anchored.
   Bleeds past the section's bottom padding so she stands on the section edge,
   with a soft ground shadow so she floats (no card chrome). */
.kog-shiftx__figure {
	margin: 0 auto;
	align-self: end;
	line-height: 0;
	max-width: 72%;
	margin-bottom: calc(-1 * var(--wp--preset--spacing--70));
}
/* Scroll-bound grow — driven by --hero-scroll-scale (section-animations.js).
   transform-origin bottom keeps her feet planted as she grows up the section. */
.kog-shiftx__figure img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 26px 46px rgba(26, 58, 42, 0.20));
	transform-origin: center bottom;
	transform: scale(var(--hero-scroll-scale, 1));
	transition: transform 120ms linear;
	will-change: transform;
}

/* List — clean editorial rows, gold hairlines, single gold accent */
.kog-shiftx__list { display: flex; flex-direction: column; }
.kog-shiftx__item {
	padding-block: clamp(1.1rem, 1.7vw, 1.7rem);
	border-top: 1px solid var(--wp--preset--color--gold-border);
}
.kog-shiftx__item:first-child { border-top: 0; padding-top: 0; }
.kog-shiftx__shift {
	font-family: var(--wp--preset--font-family--playfair) !important;
	font-size: clamp(1.2rem, 1.9vw, 1.6rem) !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.005em !important;
	color: var(--wp--preset--color--charcoal) !important;
	margin: 0 0 0.5rem !important;
}
.kog-shiftx__shift .after { font-style: italic; color: var(--wp--preset--color--gold); }
.kog-shiftx__shift .arrow {
	color: var(--wp--preset--color--gold);
	margin: 0 0.45em;
	font-weight: 400;
	display: inline-block;
	transition: transform 0.3s ease;
}
.kog-shiftx__item:hover .kog-shiftx__shift .arrow { transform: translateX(5px); }
.kog-shiftx__desc {
	font-family: var(--wp--preset--font-family--dm-sans) !important;
	font-size: 0.9375rem !important;
	line-height: 1.65 !important;
	color: rgba(28, 28, 26, 0.72) !important;
	margin: 0 !important;
	max-width: 54ch;
}

@media (max-width: 900px) {
	.kog-shiftx__body { grid-template-columns: 1fr; gap: clamp(1.75rem, 5vw, 2.5rem); }
	.kog-shiftx__figure { max-width: 340px; margin-inline: auto; align-self: center; margin-bottom: 0; }
}

/* ==========================================================================
   7b-thesis. Thesis band — charcoal stage for a high-contrast punchline.
   Eyebrow → editorial italic statement → gold hairline → bold kicker →
   small follow-on. Big padding + dark canvas + gold accents = standout.
   ========================================================================== */
.kog-thesis-band {
	position: relative;
}
.kog-thesis-band__eyebrow {
	color: var(--wp--preset--color--cream) !important;
	margin: 0 auto !important;
}
.kog-thesis-band__text {
	font-family: var(--wp--preset--font-family--playfair) !important;
	font-size: clamp(1.25rem, 2vw, 1.75rem) !important;
	font-weight: 400 !important;
	font-style: italic;
	line-height: 1.5 !important;
	color: var(--wp--preset--color--charcoal) !important;
	margin: 0 auto !important;
	max-width: 52ch;
}
.kog-thesis-band__rule {
	width: 60px;
	border: 0;
	height: 2px;
	background: var(--wp--preset--color--charcoal);
	margin: 0.25rem auto !important;
	opacity: 1;
}
.kog-thesis-band__kicker {
	font-family: var(--wp--preset--font-family--playfair) !important;
	font-size: clamp(2rem, 4vw, 3.25rem) !important;
	font-weight: 900 !important;
	line-height: 1.05 !important;
	letter-spacing: -0.01em !important;
	color: var(--wp--preset--color--charcoal) !important;
	margin: 0 auto !important;
	max-width: 30ch;
}
.kog-thesis-band__kicker em,
.kog-thesis-band__kicker i {
	font-style: italic;
	color: var(--wp--preset--color--forest);
}
.kog-thesis-band__kicker-sub {
	font-family: var(--wp--preset--font-family--playfair) !important;
	font-size: clamp(1.25rem, 2vw, 1.75rem) !important;
	font-weight: 400 !important;
	font-style: italic;
	line-height: 1.3 !important;
	color: var(--wp--preset--color--forest) !important;
	margin: 0 auto !important;
	max-width: 30ch;
}

/* ==========================================================================
   7d. Pullquote band — full-bleed stage photo + italic pull quote
   ========================================================================== */
.kog-pullquote-stage {
	position: relative;
	color: var(--wp--preset--color--warm-white);
	background-image:
		linear-gradient(
			rgba(10, 18, 12, 0.55),
			rgba(10, 18, 12, 0.78)
		),
		url('../images/khaliah-alswang.jpg');
	background-size: cover;
	background-position: center 25%;
	background-repeat: no-repeat;
	min-height: 60vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.kog-pullquote-stage__eyebrow {
	color: var(--wp--preset--color--gold) !important;
	margin: 0 auto 1.25rem !important;
}
.kog-pullquote-stage__quote {
	font-family: var(--wp--preset--font-family--playfair) !important;
	font-style: italic !important;
	font-size: clamp(1.75rem, 4vw, 3rem) !important;
	font-weight: 500 !important;
	line-height: 1.25 !important;
	color: var(--wp--preset--color--warm-white) !important;
	margin: 0 auto !important;
	max-width: 22ch;
}
.kog-pullquote-stage__quote em,
.kog-pullquote-stage__quote i {
	font-style: italic;
	color: var(--wp--preset--color--gold);
}

/* ==========================================================================
   7e. Founder's Journey — 3-image timeline
   ========================================================================== */
.kog-journey__eyebrow {
	color: var(--wp--preset--color--gold) !important;
	margin: 0 auto 1rem !important;
}
.kog-journey__title {
	font-family: var(--wp--preset--font-family--playfair) !important;
	font-size: clamp(1.75rem, 3.4vw, 2.75rem) !important;
	font-weight: 700 !important;
	line-height: 1.15 !important;
	letter-spacing: -0.005em !important;
	color: var(--wp--preset--color--charcoal) !important;
	margin: 0 auto !important;
	max-width: 24ch;
}
.kog-journey__title em,
.kog-journey__title i {
	font-style: italic;
	color: var(--wp--preset--color--gold);
}

.kog-journey__timeline {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}
.kog-journey__item {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.kog-journey__photo {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: 10px;
	background: var(--wp--preset--color--cream);
}
.kog-journey__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}
.kog-journey__item:hover .kog-journey__photo img {
	transform: scale(1.04);
}
.kog-journey__caption {
	padding: 0;
}
.kog-journey__era {
	font-family: var(--wp--preset--font-family--dm-sans) !important;
	font-size: 0.6875rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold) !important;
	margin: 0 0 0.375rem !important;
}
.kog-journey__label {
	font-family: var(--wp--preset--font-family--dm-sans) !important;
	font-size: 0.9375rem !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	color: var(--wp--preset--color--charcoal) !important;
	margin: 0 !important;
}

@media (max-width: 781px) {
	.kog-journey__timeline {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

/* ==========================================================================
   7f. Video Reel — embedded mashup, controlled playback
   ========================================================================== */
.kog-video-reel__eyebrow {
	color: var(--wp--preset--color--gold) !important;
	margin: 0 auto 1rem !important;
}
.kog-video-reel__title {
	font-family: var(--wp--preset--font-family--playfair) !important;
	font-size: clamp(1.75rem, 3.4vw, 2.5rem) !important;
	font-weight: 700 !important;
	line-height: 1.15 !important;
	color: var(--wp--preset--color--charcoal) !important;
	margin: 0 auto !important;
	max-width: 22ch;
}
.kog-video-reel__title em,
.kog-video-reel__title i {
	font-style: italic;
	color: var(--wp--preset--color--gold);
}
.kog-video-reel__player {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
	background: var(--wp--preset--color--charcoal);
}
.kog-video-reel__el {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* ==========================================================================
   7c. Logo ticker (auto-scrolling client wall)
   ========================================================================== */
.kog-logo-ticker-section {
	overflow: hidden; /* belt + suspenders — ticker itself clips, but the
	                     outer section also stays put if anything overflows. */
}
.kog-logo-ticker__eyebrow {
	color: var(--wp--preset--color--gray) !important;
	margin: 0 0 var(--wp--preset--spacing--20) !important;
}
.kog-logo-ticker {
	overflow: hidden;
	width: 100%;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.kog-logo-ticker__track {
	display: flex;
	align-items: center;
	gap: 3.5rem;
	width: max-content;
	animation: kog-ticker 45s linear infinite;
}
.kog-logo-ticker:hover .kog-logo-ticker__track {
	animation-play-state: paused;
}
.kog-logo-ticker__item {
	height: 36px;
	width: auto;
	flex: 0 0 auto;
	opacity: 0.85;
	transition: opacity 0.3s ease;
}

/* Square/seal/icon-style marks render narrow at 36px tall (their aspect
   ratio is ~1:1) while wordmark logos span 120–200px wide. Bump these
   specific slugs taller so they read at visual parity with the row. */
.kog-logo-ticker__item[src*="/logos/shell."],
.kog-logo-ticker__item[src*="/logos/nasa."],
.kog-logo-ticker__item[src*="/logos/fbi."],
.kog-logo-ticker__item[src*="/logos/ucf."],
.kog-logo-ticker__item[src*="/logos/georgia-state."],
.kog-logo-ticker__item[src*="/logos/new-jersey-courts."],
.kog-logo-ticker__item[src*="/logos/university-of-norfolk."],
.kog-logo-ticker__item[src*="/logos/huge."] {
	height: 60px;
}

/* Marriott wordmark reads thin/small at the 36px default — bump it up so the
   script mark sits at parity with the other wordmarks in the row. */
.kog-logo-ticker__item[src*="/logos/marriott."] {
	height: 52px;
}
.kog-logo-ticker__item:hover,
.kog-logo-ticker__item:focus-visible {
	opacity: 1;
}

/* Text-chip fallback for orgs without an SVG file yet. Renders as a small
   uppercase label in DM Sans so the section is never empty while assets
   are still being sourced. Upgrades automatically when the SVG drops in. */
.kog-logo-ticker__item--text {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 0.25rem;
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--charcoal);
	white-space: nowrap;
	filter: none; /* override the grayscale rule above */
	opacity: 0.55;
}
.kog-logo-ticker__item--text:hover,
.kog-logo-ticker__item--text:focus-visible {
	opacity: 1;
}

@keyframes kog-ticker {
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.kog-logo-ticker__track {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
	}
	.kog-logo-ticker {
		-webkit-mask-image: none;
		        mask-image: none;
	}
}

/* ==========================================================================
   8. Reduced motion — show final state, no transitions
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.highlight-underline,
	.hero-figure,
	.decorative-star {
		transition: none;
	}
	.highlight-underline {
		background-size: 100% 0.18em;
	}
	.hero-figure,
	.decorative-star {
		opacity: 1;
		transform: none;
	}
}

/* Keynote section sub — span full width (override shared 580px cap) */
.kog-keynote-section .kog-section-sub {
	max-width: none !important;
}

/* Workshop section sub — left-align to the container edge (matching the
   headline above it). The shared .kog-section-sub keeps its 580px max-width,
   so WordPress's constrained-layout auto margins would otherwise center it. */
.kog-workshop-section .kog-section-sub {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* Hero headline — fit "Where high performance meets human recovery." on one
   line for tablet & desktop. Drop the 32ch cap (the wrap cause) and scale the
   font with the viewport so the ~44-char string clears the 70/30 left column.
   Phones (<768px) keep the larger size and wrap. */
@media (min-width: 768px) {
	.kog-hero-alt__headline {
		max-width: none !important;
		font-size: min(1.875rem, 2.2vw) !important;
	}
}

/* ==========================================================================
   Credibility badges — logo + gold-highlighted accent + forest label grid.
   Cream-chip cards, gold-pale hover, gold bottom-bar reveal.
   ========================================================================== */
.kog-badges { padding-block: clamp(3.5rem, 7vw, 6rem); }
.kog-badges__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 1.8vw, 1.4rem);
	max-width: 1080px;
	margin: clamp(2rem, 4vw, 3rem) auto 0;
}
.kog-badge {
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--gold-border);
	border-radius: 16px;
	padding: 1.7rem 1.4rem;
	text-align: center;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 0.5rem;
	transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.kog-badge::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background: var(--wp--preset--color--gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s ease;
}
.kog-badge:hover {
	background: var(--wp--preset--color--gold-pale);
	transform: translateY(-3px);
	box-shadow: 0 18px 40px rgba(28, 28, 26, 0.10);
}
.kog-badge:hover::after { transform: scaleX(1); }

.kog-badge__logo {
	height: 58px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0.3rem;
}
.kog-badge__logo img {
	max-height: 58px;
	max-width: 82%;
	width: auto;
	height: auto;
	object-fit: contain;
}
/* Square / seal marks (e.g. the City of Houston seal) read small at wordmark
   height — give them a taller box so they sit at visual parity. */
.kog-badge__logo--mark { height: 92px; }
.kog-badge__logo--mark img { max-height: 92px; max-width: 92px; }
.kog-badge__highlight {
	margin: 0;
	font-family: var(--wp--preset--font-family--dm-sans);
	font-weight: 700;
	font-size: clamp(1.05rem, 1.5vw, 1.24rem);
	line-height: 1.3;
	color: var(--wp--preset--color--charcoal);
}
.kog-badge__highlight span {
	background-image: linear-gradient(
		transparent 0 58%,
		rgba(196, 151, 58, 0.42) 58% 94%,
		transparent 94%
	);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	padding: 0 0.08em;
}
.kog-badge__label {
	margin: 0.1rem 0 0;
	font-family: var(--wp--preset--font-family--dm-sans);
	font-weight: 600;
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--forest);
}
.kog-badge__desc {
	margin: 0.3rem 0 0;
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--wp--preset--color--gray);
	max-width: 32ch;
}
.kog-badge--text { justify-content: center; }

@media (max-width: 900px) {
	.kog-badges__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
	.kog-badges__grid { grid-template-columns: 1fr; max-width: 22rem; }
}

/* Keynotes page — hide the "Performance Rehab™" eyebrow in the shared video
   hero (the homepage uses the same pattern and keeps it). */
.page-template-page-keynotes .kog-hero-video-content .is-style-kog-eyebrow {
	display: none;
}

/* Keynotes page — also hide the hero sub line (moved into the intro band below). */
.page-template-page-keynotes .kog-hero-video-content .kog-hero-video-sub {
	display: none;
}
/* With the sub hidden, give the headline more room above the buttons. */
.page-template-page-keynotes .kog-hero-video-content .kog-hero-video-title {
	margin-bottom: 2.75rem !important;
}

/* ==========================================================================
   Speaker intro band — forest positioning statement beneath a hero.
   Gold name accent + gold "highlighter" on the closing phrase.
   ========================================================================== */
.kog-speaker-intro {
	padding-block: clamp(0.9rem, 1.6vw, 1.35rem);
	text-align: center;
	margin-top: 0 !important; /* sit flush against the hero above */
}
.kog-speaker-intro__text {
	font-family: var(--wp--preset--font-family--playfair);
	font-size: clamp(0.6rem, 1.04vw, 0.95rem);
	line-height: 1.5;
	font-weight: 400;
	color: var(--wp--preset--color--cream);
	max-width: none;
	margin: 0 auto;
}
/* Keep the statement on a single line from tablet up; wrap on small phones
   where the full sentence can't fit. */
@media (min-width: 880px) {
	.kog-speaker-intro__text { white-space: nowrap; }
}
.kog-speaker-intro__name {
	color: var(--wp--preset--color--gold);
	font-weight: 600;
}
.kog-speaker-intro__hl {
	background-image: linear-gradient(
		transparent 0 60%,
		rgba(196, 151, 58, 0.42) 60% 94%,
		transparent 94%
	);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	padding: 0 0.05em;
}

/* ==========================================================================
   Journey pull quote — full-bleed forest band (Same Person, Every Stage)
   Extracted from the founder's-journey header into its own pull-quote block.
   ========================================================================== */
.kog-journey-pull {
	margin-top: 0 !important;
	padding-block: clamp(3.5rem, 7vw, 6rem);
}
.kog-journey-pull .is-style-kog-eyebrow {
	margin-bottom: 1.1rem;
}
.kog-journey-pull__quote {
	font-size: clamp(1.9rem, 4.4vw, 3.25rem) !important;
	line-height: 1.14 !important;
	font-weight: 600 !important;
	max-width: 20ch;
	margin-inline: auto !important;
}

/* ==========================================================================
   Event-planner speaker kit — headshot download (keynotes page).
   Reuses .kog-kd-btn--gold and .kog-kd-ph (keynote-detail.css, site-wide).
   ========================================================================== */
.kog-planner-kit { padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.kog-planner-kit__inner {
	display: grid;
	grid-template-columns: 1.5fr 0.55fr;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
	max-width: 1000px;
	margin-inline: auto;
}
.kog-planner-kit__head {
	font-family: var(--wp--preset--font-family--playfair);
	font-size: clamp(1.6rem, 3.2vw, 2.4rem);
	line-height: 1.12;
	color: var(--wp--preset--color--charcoal);
	margin: 0.5rem 0 0.75rem;
}
.kog-planner-kit__head em { font-style: italic; color: var(--wp--preset--color--gold); }
.kog-planner-kit__sub {
	color: var(--wp--preset--color--charcoal);
	max-width: 46ch;
	margin: 0 0 1.5rem;
}
.kog-planner-kit__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
}
.kog-planner-kit__note {
	margin: 0.7rem 0 0;
	font-size: 0.78rem;
	color: var(--wp--preset--color--gray);
}
.kog-planner-kit__thumb { margin: 0; }
.kog-planner-kit__thumb .kog-kd-ph,
.kog-planner-kit__thumb img {
	aspect-ratio: 4 / 5;
	border-radius: 6px;
}
.kog-planner-kit__thumb img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}
@media (max-width: 700px) {
	.kog-planner-kit__inner { grid-template-columns: 1fr; }
	.kog-planner-kit__thumb { order: -1; max-width: 260px; }
}

/* ---------------------------------------------------------------------------
   Reel modal — "Watch Khaliah on Stage" lightbox launched from the workshops
   video hero. Hidden by default; JS toggles .is-open (see section-animations.js).
   --------------------------------------------------------------------------- */
.kog-reel-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vw, 3rem);
}
.kog-reel-modal.is-open {
	display: flex;
}
.kog-reel-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(10, 18, 12, 0.88);
	cursor: pointer;
}
.kog-reel-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 1080px;
	z-index: 1;
}
.kog-reel-modal__video {
	display: block;
	width: 100%;
	height: auto;
	max-height: 84vh;
	border-radius: 10px;
	background: #000;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.kog-reel-modal__close {
	position: absolute;
	top: -3rem;
	right: 0;
	width: 2.5rem;
	height: 2.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	line-height: 1;
	color: var(--wp--preset--color--warm-white);
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: color 0.2s ease, transform 0.2s ease;
}
.kog-reel-modal__close:hover {
	color: var(--wp--preset--color--gold);
	transform: scale(1.1);
}
@media (max-width: 600px) {
	.kog-reel-modal__close { top: -2.75rem; }
}