/**
 * Mobile heroes — short photo band like My Offerings.
 *
 * The picture fills the band (cover — no navy letterbox). The band
 * stays ~280px so it is only a gentle crop, not the old 100vh zoom.
 * Title sits on the photo; longer copy sits on cream underneath.
 */

@media (max-width: 899px) {
	:root {
		--jw-offer-band: 17.5rem; /* 280px — same min-height as .of-hero */
		--jw-header-height-mobile: var(--site-header-height, 6rem);
		--jw-header-offset: calc(var(--jw-header-height-mobile) + env(safe-area-inset-top, 0px) + clamp(0.45rem, 2vw, 0.85rem));
		--jw-hero-pad-top: calc(var(--jw-header-offset) + clamp(0.35rem, 1.6vw, 0.75rem));
	}

	.page-hero,
	.bp-hero,
	.srv-hero {
		padding-top: var(--jw-hero-pad-top) !important;
	}

	.site-main > .section:first-child:not(.page-hero) {
		padding-top: var(--jw-hero-pad-top);
	}

	.of-hero,
	.ev-hero {
		aspect-ratio: auto;
		min-height: var(--jw-offer-band);
		align-items: center;
		padding-top: var(--jw-header-offset) !important;
		padding-bottom: 1.25rem;
		overflow: hidden;
		background: #14323f;
	}

	.of-hero__inner,
	.ev-hero__inner {
		padding-top: 0.25rem;
		padding-bottom: 0.25rem;
	}

	.hero__onphoto,
	.yp-cover__top,
	.of-hero__inner,
	.ev-hero__inner,
	.ct-hero__inner,
	.ab-hero__inner,
	.bl-hero__inner {
		box-sizing: border-box;
		position: relative;
		z-index: 2;
		max-width: min(100%, 46rem);
		margin-inline: auto;
	}

	.of-hero__media,
	.ev-hero__media {
		position: absolute;
		inset: 0;
	}

	.of-hero__media img,
	.ev-hero__media img {
		object-fit: cover !important;
		object-position: center center !important;
		background: #14323f;
	}

	.hero,
	.yp-cover,
	.ct-hero,
	.ab-hero,
	.bl-hero {
		position: relative;
		isolation: isolate;
		height: auto !important;
		min-height: var(--jw-offer-band) !important;
		max-height: none !important;
		aspect-ratio: auto !important;
		display: grid !important;
		align-items: center !important;
		justify-items: stretch;
		text-align: center;
		padding-top: var(--jw-header-offset) !important;
		padding-bottom: 1.25rem !important;
		overflow: hidden;
		background: #14323f;
		color: var(--color-white, #fffdf8);
	}

	.hero__media,
	.yp-cover__media,
	.yp-cover__veil,
	.ct-hero__bg,
	.ab-hero__bg,
	.ab-hero__bg-overlay,
	.bl-hero__bg {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: auto !important;
		width: 100% !important;
		height: var(--jw-offer-band) !important;
		aspect-ratio: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		z-index: 0;
		background: #14323f;
	}

	.hero__img,
	.yp-cover__media img,
	.ct-hero__bg img,
	.ab-hero__bg img,
	.bl-hero__bg img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		object-position: center center !important;
		transform: none !important;
		animation: none !important;
		opacity: 1 !important;
		mix-blend-mode: normal !important;
		filter: saturate(0.92) contrast(1.02) !important;
		background: #14323f;
	}

	.hero__overlay,
	.yp-cover__veil,
	.ct-hero__bg-overlay,
	.ab-hero__bg-overlay,
	.bl-hero::after {
		background:
			linear-gradient(180deg, rgba(20, 50, 65, 0.22) 0%, rgba(20, 50, 65, 0.12) 45%, rgba(20, 50, 65, 0.38) 100%) !important;
	}

	.hero__onphoto .hero__title,
	.yp-cover__title,
	.of-hero__title,
	.ev-hero__title,
	.ct-hero__title,
	.ab-hero__title,
	.bl-hero__title {
		text-wrap: balance;
		opacity: 1 !important;
	}

	.of-hero__title,
	.ev-hero__title {
		font-size: clamp(2rem, 8vw, 2.6rem);
		line-height: 1.08;
		margin-bottom: 0.55rem;
	}

	.of-hero__sub,
	.ev-hero__sub {
		font-size: clamp(1rem, 3.8vw, 1.12rem);
		line-height: 1.46;
		max-width: 34rem;
		margin-inline: auto;
	}

	.ct-hero__bg-grain,
	.ab-hero__bg-grain,
	.ab-hero__ornament,
	.ct-hero__ornament {
		display: none !important;
	}

	/* HOME — welcome line on the 280px picture; letter on cream */
	.hero {
		overflow: visible;
		align-items: stretch !important;
		padding: 0 !important;
		background: var(--color-paper, #f1e7d8);
	}

	.hero__content {
		display: flex;
		flex-direction: column;
		width: 100%;
		margin: 0;
		padding: 0;
	}

	.hero__onphoto {
		min-height: var(--jw-offer-band);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		padding: var(--jw-header-offset) 0 0.85rem;
		width: var(--site-width);
		margin: 0 auto;
		box-sizing: border-box;
	}

	.hero__img {
		object-position: center 42% !important;
	}

	.hero__onphoto .hero__eyebrow {
		display: none !important;
	}

	.hero__onphoto .hero__title {
		font-size: clamp(2.05rem, 8vw, 2.55rem);
		line-height: 1.06;
		margin-bottom: 0.5rem;
	}

	.hero__onphoto .hero__sub {
		max-width: 34rem;
		margin-bottom: 0;
		font-size: clamp(0.98rem, 3.6vw, 1.1rem);
		line-height: 1.38;
	}

	.hero__breath,
	.hero__scroll {
		display: none;
	}

	.hero__letter {
		position: relative;
		z-index: 2;
		background: var(--color-paper, #f1e7d8);
		color: var(--color-ink);
		padding: 1.85rem 0 2.4rem;
		text-align: center;
	}

	.hero__letter::before {
		content: '';
		display: block;
		width: 60px;
		height: 1px;
		background: var(--color-accent, #dd871e);
		opacity: 0.7;
		margin: 0 auto 1.5rem;
	}

	.hero__letter .hero__sub {
		color: var(--color-ink);
		text-shadow: none;
		max-width: 36rem;
		margin: 0 auto 1.05rem;
		font-size: clamp(1.05rem, 3.8vw, 1.2rem);
	}

	.hero__letter .hero__actions {
		margin-top: 1.25rem;
		justify-content: center;
	}

	.hero__letter .button-ghost {
		border-color: rgba(26, 61, 82, 0.28);
		color: var(--color-ink);
	}

	.hero__letter .button-ghost:hover {
		background: rgba(26, 61, 82, 0.06);
	}

	/* YOGA — title on the forest band; quote on cream */
	.yp-cover {
		overflow: visible;
		align-items: stretch !important;
		padding: 0 !important;
		background: var(--color-paper, #f1e7d8);
	}

	.yp-cover__top {
		position: relative !important;
		top: auto !important;
		left: auto;
		right: auto;
		z-index: 4;
		min-height: var(--jw-offer-band);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: var(--site-width);
		margin: 0 auto;
		padding: var(--jw-header-offset) 0 0.75rem;
		box-sizing: border-box;
	}

	.yp-cover__media img {
		object-position: center 38% !important;
	}

	.yp-cover__title {
		display: block !important;
		font-size: clamp(2rem, 7.6vw, 2.45rem);
		line-height: 1.08;
		color: rgba(245, 232, 211, 0.98);
		text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42), 0 1px 2px rgba(0, 0, 0, 0.35);
		visibility: visible !important;
	}

	.yp-cover__eyebrow {
		display: none !important;
	}

	.yp-cover__inner {
		position: relative;
		z-index: 3;
		display: block;
		background: var(--color-paper, #f1e7d8);
		color: var(--color-ink);
		padding: 1.6rem 0 2rem;
		width: 100%;
	}

	.yp-cover__quote {
		font-size: clamp(1.12rem, 4.8vw, 1.35rem);
		color: var(--color-ink);
		text-shadow: none;
		margin-inline: auto;
		text-align: center;
	}

	.yp-cover__cite {
		color: rgba(26, 61, 82, 0.65);
	}

	/* CONTACT */
	.ct-hero {
		padding-bottom: calc(var(--section-wave-h, 50px) + 1.1rem) !important;
	}

	.ct-hero__inner {
		position: relative;
		z-index: 2;
		align-items: center !important;
		justify-content: center !important;
		text-align: center;
		width: var(--site-width) !important;
		margin-inline: auto;
		padding: 0;
	}

	.ct-hero__title,
	.ct-hero__title--narrow {
		font-size: clamp(2.15rem, 8vw, 2.7rem);
	}

	/* MY STORY — fill the band, keep Jessica in frame */
	.ab-hero {
		padding-bottom: calc(var(--section-wave-h, 50px) + 1.1rem) !important;
	}

	.ab-hero:not(.ab-hero--em) .ab-hero__bg img {
		object-position: 22% 48% !important;
	}

	.ab-hero--em .ab-hero__bg img {
		object-position: center 52% !important;
	}

	.ab-hero__inner {
		position: relative;
		z-index: 1;
		justify-items: center !important;
		text-align: center !important;
		padding: 0;
		width: var(--site-width);
		margin: 0 auto;
	}

	.ab-hero__title--story,
	.ab-hero__title--story .ab-hero__lines--top {
		text-align: center !important;
		justify-items: center !important;
	}

	.ab-word--name {
		font-size: clamp(2.7rem, 13vw, 3.4rem);
		-webkit-text-fill-color: #f5e8d3;
		background: none;
		color: #f5e8d3;
	}

	.ab-hero__title--story .ab-hero__lines--top .ab-hero__line--em {
		font-size: clamp(1.02rem, 4vw, 1.2rem);
	}

	.ab-hero__lines {
		font-size: clamp(0.98rem, 3.8vw, 1.15rem);
		line-height: 1.28;
	}

	/* ENERGY — slogans on the photo; definition on cream (no navy gap) */
	.ab-hero--em {
		overflow: visible;
		align-items: stretch !important;
		padding: 0 !important;
		background: var(--color-paper, #f1e7d8);
	}

	.ab-hero--em .ab-hero__inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		max-width: none;
	}

	.ab-hero--em .ab-hero__onphoto {
		min-height: var(--jw-offer-band);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		width: var(--site-width);
		padding: var(--jw-header-offset) 0 0.7rem;
		box-sizing: border-box;
	}

	.ab-hero--em .ab-hero__title {
		justify-items: center;
		text-align: center;
	}

	.em-hero__sub {
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 1.6rem 1.5rem 2rem;
		background: var(--color-paper, #f1e7d8);
		color: var(--color-ink);
		text-align: center;
		font-size: clamp(1.06rem, 3.8vw, 1.22rem);
	}

	/* BLOG / BOOKING / GIFT — long titles grow the band;
	   keep the photo stretched to the bottom so no navy strip. */
	.bl-hero__bg {
		bottom: 0 !important;
		height: auto !important;
	}

	.bl-hero__inner {
		position: relative;
		z-index: 2;
		padding-top: 0.15rem;
		padding-bottom: 0.15rem;
	}

	.bl-hero__title {
		font-size: clamp(1.55rem, 6.4vw, 2.1rem);
		line-height: 1.2;
		margin-bottom: 0;
	}

	.bl-hero__lede {
		font-size: clamp(1rem, 3.6vw, 1.12rem);
		line-height: 1.42;
		margin-inline: auto;
	}

	.bl-hero__eyebrow {
		margin-bottom: 0.7rem;
	}

	@media (max-width: 340px) {
		.hero__onphoto .hero__title {
			font-size: clamp(1.7rem, 8vw, 1.9rem);
			line-height: 1.02;
			margin-bottom: 0.35rem;
		}

		.hero__onphoto .hero__sub {
			font-size: 0.86rem;
			line-height: 1.32;
		}
	}
}