/* ==========================================================================
   Pankaj Yogpeeth — home.css
   Styles used only on the home page. Shared pieces (tokens, header, footer)
   live in core.css, which loads first.
   ========================================================================== */


/* 1. Hero slider (.pyp-hero) — markup: file/home/slider.php, init: home.js
   ========================================================================== */

.pyp-hero {
	--pyp-saffron-deep: #d9822b;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* Slides up under the transparent navbar (index.php sets $headerOverlay) */
	margin-top: calc(-1 * var(--pyp-navbar-h));
	background: #e9f1e4;
	font-family: var(--pyp-font-sans);
}

.pyp-hero :where(h2, p) {
	margin: 0;
}

.pyp-hero__swiper {
	position: relative;
	width: 100%;
	overflow: hidden;
}

/* Swiper's base layout, declared for our own class names. (The legacy theme pins
   `.swiper-wrapper .swiper-slide:last-child` in place with !important, which
   broke the last slide.) Before Swiper starts, slides sit in a row and only the
   first shows — no layout shift. */
.pyp-hero__track {
	position: relative;
	z-index: 1;
	display: flex;
	box-sizing: content-box;
	width: 100%;
	height: 100%;
	transition-property: transform;
}

.swiper-fade .pyp-hero__slide {
	pointer-events: none;
	transition-property: opacity;
}

.swiper-fade .pyp-hero__slide.swiper-slide-active {
	pointer-events: auto;
}

.pyp-hero__slide {
	position: relative;
	display: flex;
	flex-shrink: 0;
	transition-property: transform;
	align-items: center;
	width: 100%;
	height: clamp(600px, 88vh, 820px);
	overflow: hidden;
	color: var(--pyp-ink);
}

/* Photo — a real <img>, slowly drifting closer on the active slide */
.pyp-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.pyp-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--pyp-hero-pos, center);
	transform: scale(1.02);
	transition: transform 9s var(--pyp-ease-out);
}

.pyp-hero__slide.swiper-slide-active .pyp-hero__img {
	transform: scale(1.07);
}

/* Fade mode stacks every slide in the same place, which would make the browser fetch
   every lazy photo at once. Only the current and the next slide keep their photo in
   the layout, so each image loads one slide ahead of when it is needed. */
.pyp-hero__swiper.swiper-initialized .pyp-hero__slide:not(.swiper-slide-active):not(.swiper-slide-next) .pyp-hero__media {
	display: none;
}

/* Until the page has finished loading, only the visible slide may fetch its photo,
   so slide 1 and the rest of the first view get the whole connection (home.js adds .is-warm). */
.pyp-hero__swiper.swiper-initialized:not(.is-warm) .pyp-hero__slide:not(.swiper-slide-active) .pyp-hero__media {
	display: none;
}

/* Before Swiper starts, the slides sit in a row and slide 2 is within the browser's
   lazy-load distance; keep every photo but the first out of the layout until then. */
.pyp-hero__swiper:not(.swiper-initialized) .pyp-hero__slide:not(:first-child) .pyp-hero__media {
	display: none;
}

/* Soft light only on the text side; the people stay clear */
.pyp-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	--pyp-hero-scrim: rgba(246, 250, 244, 0.94) 0%, rgba(246, 250, 244, 0.8) 22%, rgba(246, 250, 244, 0.45) 38%, rgba(246, 250, 244, 0.1) 51%, rgba(246, 250, 244, 0) 62%;
	background: linear-gradient(270deg, var(--pyp-hero-scrim));
}

.pyp-hero__slide--left .pyp-hero__scrim {
	background: linear-gradient(90deg, var(--pyp-hero-scrim));
}

/* Sacred geometry on the text side: a Vedic zodiac wheel and a Sri Yantra turning
   slowly in opposite directions, with stars twinkling around them. A faint watermark —
   it sets the mood without competing with the words. */
.pyp-hero__cosmos {
	position: absolute;
	top: 50%;
	right: -210px;
	z-index: 1;
	width: 780px;
	height: 780px;
	margin-top: -390px;
	color: var(--pyp-green);
	pointer-events: none;
}

.pyp-hero__slide--left .pyp-hero__cosmos {
	right: auto;
	left: -210px;
}

.pyp-hero__zodiac,
.pyp-hero__yantra {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.pyp-hero__zodiac {
	opacity: 0.07;
	animation: pyp-hero-turn 240s linear infinite;
}

.pyp-hero__yantra {
	inset: 23%;
	width: 54%;
	height: 54%;
	/* Round the square bhupura frame away; only the circle of the yantra shows */
	clip-path: circle(49%);
	color: var(--pyp-saffron-deep);
	opacity: 0.16;
	animation: pyp-hero-turn 160s linear infinite reverse;
}

/* Swastika (卐) — a single auspicious accent, breathing gently */
.pyp-hero__swastika {
	position: absolute;
	top: 9%;
	left: 13%;
	width: 34px;
	height: 34px;
	fill: var(--pyp-saffron-deep);
	opacity: 0.55;
	animation: pyp-hero-breathe 7s ease-in-out infinite alternate;
}

@keyframes pyp-hero-breathe {
	from { opacity: 0.35; transform: scale(0.94); }
	to   { opacity: 0.7;  transform: scale(1.04); }
}

/* Four-pointed sparkles in saffron gold, glowing softly */
.pyp-hero__star {
	position: absolute;
	width: 18px;
	height: 18px;
	background: radial-gradient(circle, #fff3d6 0 12%, #f2b35f 34%, #d9822b 70%);
	clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
	filter: drop-shadow(0 0 6px rgba(242, 179, 95, 0.9));
	opacity: 0;
	animation: pyp-hero-twinkle 5.5s ease-in-out infinite;
}

.pyp-hero__star:nth-of-type(1) { top: 12%; left: 22%; animation-delay: 0s; }
.pyp-hero__star:nth-of-type(2) { top: 24%; left: 70%; animation-delay: -1.2s; transform: scale(0.7); }
.pyp-hero__star:nth-of-type(3) { top: 46%; left: 8%;  animation-delay: -2.6s; transform: scale(0.85); }
.pyp-hero__star:nth-of-type(4) { top: 68%; left: 30%; animation-delay: -0.6s; transform: scale(0.6); }
.pyp-hero__star:nth-of-type(5) { top: 80%; left: 62%; animation-delay: -3.4s; }
.pyp-hero__star:nth-of-type(6) { top: 36%; left: 44%; animation-delay: -4.2s; transform: scale(0.55); }
.pyp-hero__star:nth-of-type(7) { top: 8%;  left: 52%; animation-delay: -1.9s; transform: scale(0.75); }
.pyp-hero__star:nth-of-type(8) { top: 58%; left: 84%; animation-delay: -4.8s; transform: scale(0.65); }

@keyframes pyp-hero-turn {
	to { rotate: 360deg; }
}

@keyframes pyp-hero-twinkle {
	0%, 100% { opacity: 0; }
	45%, 55% { opacity: 0.9; }
}

/* Om — a glowing seed syllable sending out slow ripples, like a sound's vibration */
.pyp-hero__om {
	position: relative;
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 42px;
	height: 42px;
	margin-right: 6px;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 40%, #fff6e6, #fbe3bf 70%);
	box-shadow: 0 0 0 1px rgba(217, 130, 43, 0.25), 0 10px 22px -10px rgba(217, 130, 43, 0.7);
	color: var(--pyp-saffron-deep);
}

.pyp-hero__om svg {
	position: relative;
	z-index: 1;
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.pyp-hero__wave {
	position: absolute;
	inset: 0;
	border: 1px solid rgba(217, 130, 43, 0.55);
	border-radius: 50%;
	opacity: 0;
	animation: pyp-hero-ripple 4.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

.pyp-hero__wave:nth-child(2) { animation-delay: 1.5s; }
.pyp-hero__wave:nth-child(3) { animation-delay: 3s; }

@keyframes pyp-hero-ripple {
	0%   { opacity: 0.7; transform: scale(1); }
	100% { opacity: 0;   transform: scale(2.6); }
}

/* Only the visible slide animates; everything rests while the hero is off screen */
.pyp-hero__slide:not(.swiper-slide-active) :is(.pyp-hero__zodiac, .pyp-hero__yantra, .pyp-hero__swastika, .pyp-hero__star, .pyp-hero__wave),
.pyp-hero.is-offscreen :is(.pyp-hero__zodiac, .pyp-hero__yantra, .pyp-hero__swastika, .pyp-hero__star, .pyp-hero__wave) {
	animation-play-state: paused;
}

/* Content */
.pyp-hero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	padding-top: calc(var(--pyp-navbar-h) + 8px);
	padding-bottom: 96px;
}

.pyp-hero__content {
	width: clamp(420px, 44vw, 640px);
	-webkit-font-smoothing: antialiased;
}

.pyp-hero__slide--right .pyp-hero__content {
	margin-left: auto;
}

.pyp-hero__kicker {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
	font: 600 12px/1 var(--pyp-font-sans);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pyp-ink-soft);
}

.pyp-hero__kicker-num {
	font: 600 22px/1 var(--pyp-font-menu);
	letter-spacing: 0;
	color: var(--pyp-green);
}

.pyp-hero__kicker-num span {
	color: #4a9e45;
}

.pyp-hero__kicker-bar {
	flex-shrink: 0;
	width: 32px;
	height: 2px;
	border-radius: 2px;
	background: rgba(29, 112, 68, 0.35);
}

.pyp-hero .pyp-hero__title {
	font: 500 clamp(38px, 4.3vw, 66px)/1.04 var(--pyp-font-menu);
	letter-spacing: -0.012em;
	color: var(--pyp-forest);
}

/* Accent words: a sheen through the brand greens, forest to fresh leaf */
.pyp-hero__title em {
	font-style: normal;
	color: var(--pyp-green);
	background: linear-gradient(100deg, #12512f 0%, #1d7044 40%, #2f8a4c 70%, #4a9e45 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Green rule with a leaf-green seed — links the headline to the copy */
.pyp-hero__rule {
	position: relative;
	display: block;
	width: 56px;
	height: 3px;
	margin: 22px 0 18px;
	border-radius: 3px;
	background: var(--pyp-green);
}

.pyp-hero__rule::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 18px;
	height: 100%;
	border-radius: 3px;
	background: var(--pyp-leaf);
}

.pyp-hero__desc {
	max-width: 46ch;
	font: 400 16px/1.65 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
}

.pyp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 28px;
}

.pyp-hero__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	min-height: 54px;
	padding: 8px 8px 8px 24px;
	overflow: hidden;
	border-radius: 16px;
	font: 600 15px/1 var(--pyp-font-sans);
	letter-spacing: -0.006em;
	-webkit-tap-highlight-color: transparent;
	transition: transform 160ms var(--pyp-ease-out), background-color var(--pyp-dur-fast) var(--pyp-ease-out), box-shadow var(--pyp-dur) var(--pyp-ease-out);
}

.pyp-hero__btn .bi {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	font-size: 15px;
	transition: transform var(--pyp-dur) var(--pyp-ease-out);
}

.pyp-hero .pyp-hero__btn--primary {
	background: var(--pyp-green);
	color: #fff;
	box-shadow: 0 16px 30px -14px rgba(29, 112, 68, 0.75);
}

.pyp-hero__btn--primary .bi {
	background: rgba(255, 255, 255, 0.18);
}

/* Light sweeping across on hover */
.pyp-hero__btn--primary::before {
	content: '';
	position: absolute;
	inset: 0 auto 0 -120%;
	width: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	transition: left 0.8s var(--pyp-ease-out);
}

.pyp-hero__btn:active,
.pyp-hero__call:active {
	transform: scale(0.97);
}

/* Booking line: glass chip with the phone number */
.pyp-hero .pyp-hero__call {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 54px;
	padding: 7px 20px 7px 7px;
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.7);
	-webkit-backdrop-filter: blur(12px) saturate(160%);
	backdrop-filter: blur(12px) saturate(160%);
	box-shadow: 0 12px 26px -16px rgba(15, 59, 39, 0.45);
	color: var(--pyp-forest);
	-webkit-tap-highlight-color: transparent;
	transition: transform 160ms var(--pyp-ease-out), background-color var(--pyp-dur-fast) var(--pyp-ease-out);
}

.pyp-hero__call .bi {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--pyp-forest);
	color: #fff;
	font-size: 15px;
}

.pyp-hero__call-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.pyp-hero__call-label {
	font: 600 10.5px/1 var(--pyp-font-sans);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pyp-ink-soft);
}

.pyp-hero__call-number {
	font: 600 16px/1 var(--pyp-font-menu);
	letter-spacing: 0.01em;
}

/* Community proof */
.pyp-hero__members {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 24px;
}

.pyp-hero__avatars {
	display: flex;
	flex-shrink: 0;
}

.pyp-hero__avatars img {
	width: 40px;
	height: 40px;
	border: 2.5px solid #fff;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 6px 14px -8px rgba(15, 59, 39, 0.6);
}

.pyp-hero__avatars img + img {
	margin-left: -12px;
}

.pyp-hero__members p {
	font: 400 14px/1.4 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
}

.pyp-hero__members strong {
	font-weight: 600;
	color: var(--pyp-green);
}

/* Staggered reveal — plays on the active slide */
.pyp-hero__kicker,
.pyp-hero__title,
.pyp-hero__rule,
.pyp-hero__desc,
.pyp-hero__actions,
.pyp-hero__members {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.7s var(--pyp-ease-out), transform 0.9s var(--pyp-ease-out);
}

.swiper-slide-active .pyp-hero__kicker  { opacity: 1; transform: none; transition-delay: 0.1s; }
.swiper-slide-active .pyp-hero__title   { opacity: 1; transform: none; transition-delay: 0.18s; }
.swiper-slide-active .pyp-hero__rule    { opacity: 1; transform: none; transition-delay: 0.28s; }
.swiper-slide-active .pyp-hero__desc    { opacity: 1; transform: none; transition-delay: 0.34s; }
.swiper-slide-active .pyp-hero__actions { opacity: 1; transform: none; transition-delay: 0.44s; }
.swiper-slide-active .pyp-hero__members { opacity: 1; transform: none; transition-delay: 0.52s; }

/* Before Swiper starts, show the first slide's text straight away */
.pyp-hero__swiper:not(.swiper-initialized) .pyp-hero__slide:first-child :is(.pyp-hero__kicker, .pyp-hero__title, .pyp-hero__rule, .pyp-hero__desc, .pyp-hero__actions, .pyp-hero__members) {
	opacity: 1;
	transform: none;
}

/* Bottom chrome: dots + arrows, progress */
.pyp-hero__nav {
	position: absolute;
	right: 0;
	bottom: 28px;
	left: 0;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	pointer-events: none;
}

.pyp-hero__nav > * {
	pointer-events: auto;
}

.pyp-hero__dots {
	display: flex;
	align-items: center;
	gap: 8px;
	/* Swiper's stylesheet stretches horizontal pagination across the slider */
	position: static !important;
	width: auto !important;
}

.pyp-hero__dots .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	margin: 0 !important;
	border-radius: 999px;
	background: rgba(15, 59, 39, 0.28);
	opacity: 1;
	cursor: pointer;
	transition: width var(--pyp-dur-slow) var(--pyp-ease-out), background-color var(--pyp-dur) var(--pyp-ease-out);
}

.pyp-hero__dots .swiper-pagination-bullet-active {
	width: 28px;
	background: var(--pyp-green);
}

.pyp-hero__arrows {
	display: flex;
	gap: 8px;
}

.pyp-hero__arrow {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.72);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 10px 24px -12px rgba(15, 59, 39, 0.45);
	color: var(--pyp-forest);
	font-size: 16px;
	cursor: pointer;
	transition: transform 160ms var(--pyp-ease-out), background-color var(--pyp-dur-fast) var(--pyp-ease-out), color var(--pyp-dur-fast) var(--pyp-ease-out);
}

.pyp-hero__arrow:active {
	transform: scale(0.94);
}

.pyp-hero__progress {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 6;
	height: 3px;
	background: rgba(15, 59, 39, 0.12);
}

.pyp-hero__progress-bar {
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, var(--pyp-green), var(--pyp-leaf) 70%, var(--pyp-saffron-deep));
	transform: scaleX(0);
	transform-origin: left;
}

@keyframes pyp-hero-progress {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

@media (hover: hover) {
	.pyp-hero .pyp-hero__btn--primary:hover {
		background: var(--pyp-green-hover);
		color: #fff;
		box-shadow: 0 20px 34px -14px rgba(29, 112, 68, 0.8);
	}

	.pyp-hero__btn--primary:hover::before {
		left: 120%;
	}

	.pyp-hero__btn:hover .bi {
		transform: translateX(3px);
	}

	.pyp-hero .pyp-hero__call:hover {
		background: #fff;
		color: var(--pyp-forest);
	}

	.pyp-hero__arrow:hover {
		background: var(--pyp-green);
		color: #fff;
	}
}

.pyp-hero :focus-visible {
	outline: 2px solid var(--pyp-green);
	outline-offset: 3px;
}

/* Tablet */
@media (max-width: 1099.98px) {
	.pyp-hero__slide {
		height: clamp(560px, 80vh, 720px);
	}

	.pyp-hero__content {
		width: clamp(340px, 56vw, 560px);
	}

	.pyp-hero__cosmos {
		right: -260px;
		width: 620px;
		height: 620px;
		margin-top: -310px;
	}

	.pyp-hero__slide--left .pyp-hero__cosmos {
		left: -260px;
	}
}

/* Phones — the earlier owf native-app layout (pre "Mobile CRO"): photo on top, content
   docked at the bottom over a deep fade, one-line headline, compact swipeable button row */
@media (max-width: 767.98px) {
	.pyp-hero {
		background: var(--pyp-forest);
	}

	.pyp-hero__slide {
		align-items: stretch;
		height: 50vh;
		min-height: 440px;
		max-height: 560px;
	}

	/* The portrait frame shows about half the photo's width. Each slide sets its own
	   framing (slider.php `mobile`): --pyp-hero-mpos centres the people, --pyp-hero-mzoom
	   lifts faces above the docked text. Fallbacks keep the side opposite the text. */
	.pyp-hero__img,
	.pyp-hero__slide.swiper-slide-active .pyp-hero__img {
		object-position: var(--pyp-hero-mpos, 24% center);
		transform: var(--pyp-hero-mzoom, none);
		transform-origin: var(--pyp-hero-morigin, 50% 50%);
	}

	.pyp-hero__slide--left .pyp-hero__img {
		object-position: var(--pyp-hero-mpos, 76% center);
	}

	/* Dark at the top for the white header, deep at the bottom for the text */
	.pyp-hero__scrim,
	.pyp-hero__slide--left .pyp-hero__scrim {
		background:
			linear-gradient(180deg, rgba(6, 22, 14, 0.35) 0, rgba(6, 22, 14, 0) 90px),
			linear-gradient(180deg, rgba(6, 22, 14, 0) 18%, rgba(6, 22, 14, 0.3) 38%, rgba(6, 22, 14, 0.78) 66%, rgba(6, 22, 14, 0.95) 100%);
	}

	.pyp-hero__inner {
		align-items: flex-end;
		padding-top: 44px;
		padding-bottom: calc(16px + env(safe-area-inset-bottom));
	}

	.pyp-hero__content,
	.pyp-hero__slide--right .pyp-hero__content {
		width: 100%;
		margin: 0;
		text-shadow: 0 2px 12px rgba(0, 0, 0, 0.72);
	}

	.pyp-hero__kicker {
		margin-bottom: 11px;
		font-size: 10.5px;
		letter-spacing: 0.12em;
		color: rgba(255, 255, 255, 0.7);
	}

	.pyp-hero__kicker-num {
		font-size: 15px;
		color: var(--pyp-leaf);
	}

	.pyp-hero__kicker-num span {
		color: #f6c177;
	}

	.pyp-hero__kicker-bar {
		width: 22px;
		background: rgba(255, 255, 255, 0.35);
	}

	.pyp-hero__kicker-label {
		color: #e3f1da;
	}

	/* Headline on one line; the size scales with the screen so it always fits */
	.pyp-hero .pyp-hero__title {
		margin-bottom: 8px;
		font-size: clamp(14.5px, 4.55vw, 29px);
		line-height: 1.1;
		white-space: nowrap;
		color: #fff;
	}

	.pyp-hero__title em {
		color: var(--pyp-leaf);
		background: linear-gradient(100deg, #9ccf68, #c8e6a0 55%, #a6d777);
		-webkit-background-clip: text;
		background-clip: text;
	}

	.pyp-hero__kicker-num span {
		color: #c8e6a0;
	}

	.pyp-hero__rule::before {
		background: #c8e6a0;
	}

	/* Phones: no full circles — a small yantra low on the right, inside the dark fade
	   (clear of every face), with a single swastika and a few single stars */
	.pyp-hero__cosmos,
	.pyp-hero__slide--left .pyp-hero__cosmos {
		top: auto;
		right: -34px;
		bottom: 34px;
		left: auto;
		width: 150px;
		height: 150px;
		margin-top: 0;
	}

	.pyp-hero__zodiac {
		display: none;
	}

	.pyp-hero__yantra {
		inset: 0;
		width: 100%;
		height: 100%;
		color: #f6c177;
		opacity: 0.22;
	}

	/* Low on the right edge, level with the headline — below every face */
	.pyp-hero__swastika {
		top: 38px;
		right: 50px;
		left: auto;
		width: 20px;
		height: 20px;
		fill: #f6c177;
	}

	.pyp-hero__star:nth-of-type(n) {
		display: none;
	}

	.pyp-hero__star:nth-of-type(1),
	.pyp-hero__star:nth-of-type(3),
	.pyp-hero__star:nth-of-type(5) {
		display: block;
		width: 12px;
		height: 12px;
	}

	.pyp-hero__star:nth-of-type(1) { top: 8%;  left: 30%; }
	.pyp-hero__star:nth-of-type(3) { top: 52%; left: 4%; }
	.pyp-hero__star:nth-of-type(5) { top: 78%; left: 46%; }

	.pyp-hero__om {
		width: 30px;
		height: 30px;
		margin-right: 2px;
		background: radial-gradient(circle at 50% 40%, rgba(255, 246, 230, 0.95), rgba(251, 227, 191, 0.85) 70%);
	}

	.pyp-hero__om svg {
		width: 17px;
		height: 17px;
	}

	.pyp-hero__rule {
		margin: 0 0 8px;
		background: var(--pyp-leaf);
	}

	.pyp-hero__rule::before {
		background: #f6c177;
	}

	.pyp-hero__desc {
		max-width: none;
		margin-bottom: 14px;
		/* right gutter keeps the copy clear of the swastika on the edge */
		padding-right: 34px;
		padding-left: 10px;
		border-left: 3px solid rgba(156, 207, 104, 0.85);
		font-size: 10.5px;
		line-height: 1.58;
		color: rgba(255, 255, 255, 0.88);
	}

	/* Buttons → one compact row that scrolls sideways */
	.pyp-hero__actions {
		flex-wrap: nowrap;
		gap: 8px;
		margin-top: 0;
		padding: 2px 0;
		overflow-x: auto;
		overflow-y: visible;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.pyp-hero__actions::-webkit-scrollbar {
		display: none;
	}

	.pyp-hero__btn {
		flex-shrink: 0;
		gap: 9px;
		min-height: 40px;
		padding: 6px 7px 6px 13px;
		border-radius: 10px;
		font-size: 11px;
		scroll-snap-align: start;
		text-shadow: none;
	}

	.pyp-hero__btn .bi {
		width: 26px;
		height: 26px;
		border-radius: 7px;
		font-size: 12px;
	}

	.pyp-hero .pyp-hero__call {
		flex-shrink: 0;
		gap: 8px;
		min-height: 40px;
		padding: 6px 13px 6px 6px;
		border-color: rgba(255, 255, 255, 0.35);
		border-radius: 10px;
		background: rgba(255, 255, 255, 0.14);
		color: #fff;
		scroll-snap-align: start;
		text-shadow: none;
	}

	.pyp-hero__call .bi {
		width: 28px;
		height: 28px;
		border-radius: 7px;
		background: rgba(255, 255, 255, 0.18);
		font-size: 12px;
	}

	.pyp-hero__call-text {
		gap: 2px;
	}

	.pyp-hero__call-label {
		font-size: 8.5px;
		color: rgba(255, 255, 255, 0.72);
	}

	.pyp-hero__call-number {
		font-size: 12.5px;
	}

	.pyp-hero__members {
		gap: 10px;
		margin-top: 12px;
	}

	.pyp-hero__avatars img {
		width: 28px;
		height: 28px;
		border-width: 2px;
		border-color: rgba(255, 255, 255, 0.9);
	}

	.pyp-hero__avatars img + img {
		margin-left: -9px;
	}

	.pyp-hero__members p {
		font-size: 11px;
		color: rgba(255, 255, 255, 0.82);
	}

	.pyp-hero__members strong {
		color: var(--pyp-leaf);
	}

	/* App chrome: no arrows or dots; the progress line is the only indicator */
	.pyp-hero__nav {
		display: none;
	}

	.pyp-hero__progress {
		background: rgba(255, 255, 255, 0.18);
	}
}

@media (max-width: 480px) {
	.pyp-hero__slide {
		height: 48vh;
		min-height: 420px;
		max-height: 520px;
	}

	.pyp-hero__btn {
		min-height: 38px;
		padding: 5px 6px 5px 12px;
	}
}

@media (max-width: 380px) {
	.pyp-hero__slide {
		height: 46vh;
		min-height: 400px;
		max-height: 480px;
	}
}

/* Phones turned sideways: full-height hero, content centred */
@media (orientation: landscape) and (max-height: 560px) {
	.pyp-hero__slide {
		height: 100svh;
		min-height: 440px;
	}

	.pyp-hero__inner {
		align-items: center;
		padding-top: calc(var(--pyp-navbar-h) + 12px);
		padding-bottom: 44px;
	}

	.pyp-hero__nav {
		bottom: 10px;
	}
}

/* Reduced motion: no drift, no reveal, no progress sweep */
@media (prefers-reduced-motion: reduce) {
	.pyp-hero__img,
	.pyp-hero__slide.swiper-slide-active .pyp-hero__img {
		transform: none;
		transition: none;
	}

	.pyp-hero__kicker,
	.pyp-hero__title,
	.pyp-hero__rule,
	.pyp-hero__desc,
	.pyp-hero__actions,
	.pyp-hero__members {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.pyp-hero__progress-bar {
		transform: scaleX(1);
	}

	.pyp-hero__zodiac,
	.pyp-hero__yantra,
	.pyp-hero__swastika,
	.pyp-hero__wave {
		animation: none;
	}

	.pyp-hero__star {
		animation: none;
		opacity: 0.6;
	}
}



/* ==========================================================================
   2. Nine pillars (.pyp-usp) · markup: file/home/usp.php, behaviour: home.js
   A compact rail of photo cards. Number and title sit on the photo and the
   description rises on hover (tap on touch screens, focus for the keyboard).
   Desktop drags to scroll with edge arrows on hover; phones swipe natively.
   ========================================================================== */

.pyp-usp {
	--pyp-usp-h: clamp(220px, 36vh, 440px); /* card height on tablet and desktop */
	--pyp-saffron-deep: #d9822b;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(24px, 3vw, 44px);
	background: linear-gradient(180deg, #fff 0%, var(--pyp-mist) 100%);
}

@supports (height: 1svh) {
	.pyp-usp { --pyp-usp-h: clamp(220px, 36svh, 440px); }
}

/* A Sri Yantra watermark turning very slowly behind the heading */
.pyp-usp__yantra {
	position: absolute;
	top: -90px;
	right: -110px;
	z-index: -1;
	width: 300px;
	height: 300px;
	color: var(--pyp-green);
	fill: currentColor;
	opacity: 0.06;
	animation: pyp-usp-turn 160s linear infinite;
	pointer-events: none;
}

@keyframes pyp-usp-turn {
	to { transform: rotate(360deg); }
}

.pyp-usp.is-offscreen .pyp-usp__yantra {
	animation-play-state: paused;
}

/* Heading: one compact row */
.pyp-usp__head {
	margin-bottom: 16px;
}

.pyp-usp .pyp-usp__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	font: 600 11px/1 var(--pyp-font-sans);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pyp-green);
}

/* Om is a sacred symbol, so it alone takes the saffron */
.pyp-usp__om {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	color: var(--pyp-saffron-deep);
	fill: currentColor;
}

.pyp-usp .pyp-usp__heading {
	margin: 0;
	font: 500 clamp(24px, 2.5vw, 38px)/1.1 var(--pyp-font-menu);
	letter-spacing: -0.012em;
	color: var(--pyp-forest);
	text-wrap: balance;
}

.pyp-usp__heading em {
	font-style: normal;
	color: var(--pyp-green);
	background: linear-gradient(100deg, #12512f 0%, #1d7044 40%, #2f8a4c 70%, #4a9e45 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.pyp-usp .pyp-usp__lede {
	display: none;
	margin: 0;
	font: 400 14.5px/1.6 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
	text-wrap: pretty;
}

/* Rail: native scroll with snapping, bleeding to the screen edges */
.pyp-usp__stage {
	position: relative;
}

.pyp-usp .pyp-usp__rail {
	position: relative;
	display: flex;
	gap: 12px;
	margin: 0 calc(-1 * var(--pyp-gutter));
	padding: 4px var(--pyp-gutter) 12px;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--pyp-gutter);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.pyp-usp__rail::-webkit-scrollbar {
	display: none;
}

/* Card: the photo itself */
.pyp-usp .pyp-usp__card {
	position: relative;
	isolation: isolate;
	flex: 0 0 86vw;
	aspect-ratio: 3 / 2;
	margin: 0;
	overflow: hidden;
	border-radius: 20px;
	background: var(--pyp-forest);
	box-shadow: 0 1px 1px rgba(15, 59, 39, 0.06), 0 18px 34px -22px rgba(15, 59, 39, 0.6);
	scroll-snap-align: start;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

.pyp-usp__img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-user-drag: none;
	user-select: none;
	transition: transform 900ms var(--pyp-ease-out);
}

/* Dusk at the foot for the title, deepening when the story opens */
.pyp-usp__card::before,
.pyp-usp__card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.pyp-usp__card::before {
	background: linear-gradient(0deg, rgba(6, 28, 17, 0.8) 0%, rgba(6, 28, 17, 0.3) 34%, rgba(6, 28, 17, 0) 58%);
}

.pyp-usp__card::after {
	background: linear-gradient(0deg, rgba(6, 28, 17, 0.9) 0%, rgba(6, 28, 17, 0.55) 55%, rgba(6, 28, 17, 0.2) 100%);
	opacity: 0;
	transition: opacity 450ms var(--pyp-ease-out);
}

/* Glass chips: number (left) and a plus that turns as the story opens (right) */
.pyp-usp__num,
.pyp-usp__plus {
	position: absolute;
	top: 12px;
	z-index: 2;
	display: grid;
	place-items: center;
	height: 30px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	background: rgba(6, 28, 17, 0.32);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	backdrop-filter: blur(10px) saturate(140%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
	color: #fff;
}

.pyp-usp__num {
	left: 12px;
	padding: 0 11px;
	font: 600 12px/1 var(--pyp-font-menu);
	letter-spacing: 0.1em;
}

.pyp-usp__plus {
	right: 12px;
	width: 30px;
	font-size: 13px;
	transition: transform 450ms var(--pyp-ease-out), background-color 300ms var(--pyp-ease-out);
}

.pyp-usp__body {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	padding: 16px 16px 15px;
	color: #fff;
	-webkit-font-smoothing: antialiased;
}

.pyp-usp .pyp-usp__title {
	margin: 0;
	font: 500 17px/1.25 var(--pyp-font-menu);
	letter-spacing: -0.004em;
	color: #fff;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
	text-wrap: balance;
}

/* Grid rows 0fr → 1fr animates the height of the description smoothly */
.pyp-usp__more {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 450ms var(--pyp-ease-out);
}

.pyp-usp .pyp-usp__desc {
	min-height: 0;
	margin: 0;
	overflow: hidden;
	font: 400 13px/1.5 var(--pyp-font-sans);
	color: rgba(255, 255, 255, 0.9);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 300ms var(--pyp-ease-out), transform 450ms var(--pyp-ease-out);
	text-wrap: pretty;
}

.pyp-usp__desc::before {
	content: "";
	display: block;
	height: 8px;
}

/* Story open: hover with a mouse, a tap on touch screens, keyboard focus */
.pyp-usp__card:focus-visible .pyp-usp__more { grid-template-rows: 1fr; }
.pyp-usp__card:focus-visible .pyp-usp__desc { opacity: 1; transform: none; transition-delay: 80ms, 0s; }
.pyp-usp__card:focus-visible::after { opacity: 1; }
.pyp-usp__card:focus-visible .pyp-usp__plus { transform: rotate(45deg); background: rgba(6, 28, 17, 0.5); }
.pyp-usp__card:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pyp-green); }

@media (hover: hover) {
	.pyp-usp:not(.is-dragging) .pyp-usp__card:hover .pyp-usp__more { grid-template-rows: 1fr; }
	.pyp-usp:not(.is-dragging) .pyp-usp__card:hover .pyp-usp__desc { opacity: 1; transform: none; transition-delay: 80ms, 0s; }
	.pyp-usp:not(.is-dragging) .pyp-usp__card:hover::after { opacity: 1; }
	.pyp-usp:not(.is-dragging) .pyp-usp__card:hover .pyp-usp__plus { transform: rotate(45deg); background: rgba(6, 28, 17, 0.5); }
	.pyp-usp:not(.is-dragging) .pyp-usp__card:hover .pyp-usp__img { transform: scale(1.05); }
}

/* touch screens: a tap toggles the card open (home.js sets .is-open) */
.pyp-usp__card.is-open .pyp-usp__more { grid-template-rows: 1fr; }
.pyp-usp__card.is-open .pyp-usp__desc { opacity: 1; transform: none; transition-delay: 80ms, 0s; }
.pyp-usp__card.is-open::after { opacity: 1; }
.pyp-usp__card.is-open .pyp-usp__plus { transform: rotate(45deg); background: rgba(6, 28, 17, 0.5); }

/* Edge arrows: glass circles, only for a mouse, shown while it is over the section */
.pyp-usp__arrow {
	display: none;
}

@media (hover: hover) and (pointer: fine) {
	.pyp-usp .pyp-usp__rail {
		cursor: grab;
		user-select: none;
	}

	.pyp-usp.is-dragging .pyp-usp__rail,
	.pyp-usp.is-gliding .pyp-usp__rail {
		scroll-snap-type: none;
	}

	.pyp-usp.is-dragging .pyp-usp__rail {
		cursor: grabbing;
	}

	.pyp-usp__arrow {
		position: absolute;
		top: calc(50% - 5px);
		z-index: 4;
		display: grid;
		place-items: center;
		width: 48px;
		height: 48px;
		padding: 0;
		border: 1px solid rgba(255, 255, 255, 0.9);
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.78);
		-webkit-backdrop-filter: blur(14px) saturate(160%);
		backdrop-filter: blur(14px) saturate(160%);
		box-shadow: 0 14px 30px -14px rgba(15, 59, 39, 0.55);
		color: var(--pyp-forest);
		font-size: 18px;
		cursor: pointer;
		opacity: 0;
		pointer-events: none;
		transform: translateY(-50%) scale(0.86);
		transition: opacity 260ms var(--pyp-ease-out), transform 260ms var(--pyp-ease-out), background-color 160ms var(--pyp-ease-out), color 160ms var(--pyp-ease-out);
	}

	.pyp-usp__arrow--prev { left: 10px; }
	.pyp-usp__arrow--next { right: 10px; }

	.pyp-usp:hover .pyp-usp__arrow,
	.pyp-usp__arrow:focus-visible {
		opacity: 1;
		pointer-events: auto;
		transform: translateY(-50%);
	}

	.pyp-usp.is-start .pyp-usp__arrow--prev,
	.pyp-usp.is-end .pyp-usp__arrow--next,
	.pyp-usp.is-dragging .pyp-usp__arrow {
		opacity: 0;
		pointer-events: none;
		transform: translateY(-50%) scale(0.86);
	}

	.pyp-usp__arrow:hover {
		background: var(--pyp-green);
		color: #fff;
	}

	.pyp-usp__arrow:active {
		transform: translateY(-50%) scale(0.94);
	}

	.pyp-usp__arrow:focus-visible {
		outline: 2px solid var(--pyp-green);
		outline-offset: 3px;
	}
}

/* Tablet and up: the photo's own landscape shape, heading and lede on one row */
@media (min-width: 768px) {
	.pyp-usp__head {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 40px;
		margin-bottom: 20px;
	}

	.pyp-usp .pyp-usp__lede {
		display: block;
		max-width: 40ch;
	}

	.pyp-usp .pyp-usp__rail {
		gap: 16px;
	}

	.pyp-usp .pyp-usp__card {
		flex: 0 0 auto;
		height: var(--pyp-usp-h);
		aspect-ratio: 1344 / 768;
		border-radius: 22px;
	}

	.pyp-usp__body {
		padding: 20px 22px 20px;
	}

	.pyp-usp .pyp-usp__title {
		font-size: clamp(18px, 1.45vw, 22px);
	}

	.pyp-usp .pyp-usp__desc {
		max-width: 52ch;
		font-size: 14px;
	}

	.pyp-usp__num,
	.pyp-usp__plus {
		top: 16px;
	}

	.pyp-usp__num { left: 16px; }
	.pyp-usp__plus { right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.pyp-usp__img,
	.pyp-usp__more,
	.pyp-usp__desc,
	.pyp-usp__plus {
		transition: none;
	}

	.pyp-usp__yantra {
		animation: none;
	}
}

@media (prefers-reduced-transparency: reduce) {
	.pyp-usp__num,
	.pyp-usp__plus {
		background: rgba(6, 28, 17, 0.7);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}





/* Phones: an app rail. Compact cards, the photo on top and a white footer
   with the title; a tap raises the footer up the card as a green sheet with
   the story (hover does the same for a narrow mouse window). */
@media (max-width: 767.98px) {
	.pyp-usp {
		padding-block: 22px 14px;
	}

	.pyp-usp__head {
		margin-bottom: 14px;
	}

	.pyp-usp .pyp-usp__heading {
		font-size: 24px;
	}

	.pyp-usp .pyp-usp__rail {
		gap: 12px;
		padding: 4px var(--pyp-gutter) 18px;
	}

	.pyp-usp .pyp-usp__card {
		flex: 0 0 min(72vw, 290px);
		height: 300px;
		aspect-ratio: auto;
		border-radius: 22px;
		background: #fff;
		box-shadow: 0 1px 1px rgba(15, 59, 39, 0.05), 0 16px 30px -20px rgba(15, 59, 39, 0.45);
	}

	.pyp-usp .pyp-usp__img {
		bottom: auto;
		height: 64%;
	}

	.pyp-usp__card::before {
		display: none;
	}

	.pyp-usp__num,
	.pyp-usp__plus {
		top: 10px;
	}

	.pyp-usp__num { left: 10px; }
	.pyp-usp__plus { right: 10px; }

	/* the footer, which becomes the sheet */
	.pyp-usp .pyp-usp__body {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 36%;
		padding: 14px 16px 16px;
		border-radius: 0;
		background: #fff;
		color: var(--pyp-forest);
		transition: background-color 400ms var(--pyp-ease-out), border-radius 400ms var(--pyp-ease-out);
	}

	.pyp-usp .pyp-usp__title {
		font-size: 16px;
		line-height: 1.3;
		color: var(--pyp-forest);
		text-shadow: none;
		transition: color 300ms ease;
	}

	.pyp-usp .pyp-usp__desc {
		font-size: 13px;
	}

	.pyp-usp .pyp-usp__card:is(.is-open, :focus-visible) .pyp-usp__body {
		border-radius: 20px 20px 0 0;
		background: linear-gradient(180deg, #1d7044, #12512f);
	}

	.pyp-usp .pyp-usp__card:is(.is-open, :focus-visible) .pyp-usp__title {
		color: #fff;
	}

	.pyp-usp .pyp-usp__card:active {
		transform: scale(0.98);
	}

	@media (hover: hover) {
		.pyp-usp:not(.is-dragging) .pyp-usp__card:hover .pyp-usp__body {
			border-radius: 20px 20px 0 0;
			background: linear-gradient(180deg, #1d7044, #12512f);
		}

		.pyp-usp:not(.is-dragging) .pyp-usp__card:hover .pyp-usp__title {
			color: #fff;
		}
	}
}

/* ==========================================================================
   3. Yoga Teacher Training intro (.pyp-tt) · markup: file/home/whatisyoga.php
   The page's h1, on the section's original artwork (a lazy <img>). Copy on
   the white side; on the green side a temple arch (ogee, drawn as a mask so
   it scales) holds a slowly turning Vedic wheel, and the teacher and student
   step out over its edge. Phones: heading, stage, story. Desktop: 65vh.
   ========================================================================== */

.pyp-tt {
	--pyp-saffron-deep: #d9822b;
	/* one frosted glass for every surface in this section */
	--pyp-tt-glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.24));
	--pyp-tt-glass-edge: 1px solid rgba(255, 255, 255, 0.7);
	--pyp-tt-glass-blur: blur(18px) saturate(180%);
	--pyp-tt-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(255, 255, 255, 0.2), 0 18px 36px -22px rgba(15, 59, 39, 0.45);
	--pyp-tt-arch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 130' preserveAspectRatio='none'%3E%3Cpath d='M0 130V46C0 30 20 22 34 14C42 9 47 5 50 0C53 5 58 9 66 14C80 22 100 30 100 46V130Z'/%3E%3C/svg%3E");
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(32px, 4vw, 56px);
	background: #f4f9ef;
}

.pyp-tt__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

.pyp-tt__grid {
	display: grid;
	grid-template-areas: "head" "stage" "body";
	gap: 22px;
}

.pyp-tt__head  { grid-area: head; }
.pyp-tt__stage { grid-area: stage; }
.pyp-tt__body  { grid-area: body; }

/* Heading */
.pyp-tt .pyp-tt__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	font: 600 11px/1 var(--pyp-font-sans);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pyp-green);
}

/* Om is a sacred symbol, so it alone takes the saffron */
.pyp-tt__om {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	color: var(--pyp-saffron-deep);
	fill: currentColor;
}

.pyp-tt .pyp-tt__title {
	margin: 0;
	font: 500 clamp(32px, 3.3vw, 56px)/1.04 var(--pyp-font-menu);
	letter-spacing: -0.015em;
	color: var(--pyp-forest);
	text-wrap: balance;
}

.pyp-tt__title em {
	display: block;
	font-style: normal;
	color: var(--pyp-green);
	background: linear-gradient(100deg, #12512f 0%, #1d7044 40%, #2f8a4c 70%, #4a9e45 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Stage */
.pyp-tt .pyp-tt__stage {
	position: relative;
	width: min(100%, 360px);
	aspect-ratio: 100 / 124;
	margin: 0 auto 78px; /* room for the founder pill below the pair */
}

.pyp-tt__arch {
	position: absolute;
	inset: 14% 9% 5%;
	overflow: hidden;
	background:
		radial-gradient(120% 70% at 50% 108%, rgba(156, 207, 104, 0.35), transparent 60%),
		linear-gradient(180deg, #1f7a49 0%, #145a36 45%, #0f3b27 100%);
	-webkit-mask: var(--pyp-tt-arch) center / 100% 100% no-repeat;
	mask: var(--pyp-tt-arch) center / 100% 100% no-repeat;
}

/* Warm light behind the figures */
.pyp-tt__glow {
	position: absolute;
	inset: 12% 10% 30%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(200, 230, 160, 0.55), rgba(156, 207, 104, 0.12) 60%, transparent);
	filter: blur(6px);
}

.pyp-tt__wheel {
	position: absolute;
	top: 6%;
	left: 50%;
	width: 128%;
	aspect-ratio: 1;
	margin-left: -64%;
	color: rgba(255, 255, 255, 0.09);
	fill: currentColor;
	animation: pyp-tt-turn 180s linear infinite;
}

@keyframes pyp-tt-turn {
	to { transform: rotate(360deg); }
}

/* A second, finer arch traced around the first, like a carved jharokha frame */
.pyp-tt__arch-line {
	position: absolute;
	top: calc(14% - 12px);
	left: calc(9% - 12px);
	width: calc(82% + 24px);
	height: calc(81% + 13px);
	overflow: visible;
	fill: none;
	stroke: rgba(255, 255, 255, 0.6);
	stroke-width: 1.25;
	pointer-events: none;
}

.pyp-tt__shadow {
	position: absolute;
	right: 4%;
	bottom: 2%;
	left: 4%;
	height: 6%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(15, 59, 39, 0.35), transparent);
	filter: blur(4px);
}

.pyp-tt__pair {
	position: absolute;
	bottom: 3%;
	left: 2%;
	width: 96%;
	height: auto;
	filter: drop-shadow(0 18px 22px rgba(8, 32, 20, 0.28));
}

.pyp-tt__vertical {
	position: absolute;
	top: 28%;
	right: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	font: 600 10px/1 var(--pyp-font-sans);
	letter-spacing: 0.38em;
	text-transform: uppercase;
	color: rgba(15, 59, 39, 0.7);
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

.pyp-tt__vertical::before {
	content: "";
	width: 1px;
	height: 28px;
	background: currentColor;
	opacity: 0.6;
}

/* Glass fact chips, floating gently */
.pyp-tt .pyp-tt__chip {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 9px;
	max-width: 62%;
	margin: 0;
	padding: 8px 12px 8px 9px;
	border: var(--pyp-tt-glass-edge);
	border-radius: 14px;
	background: var(--pyp-tt-glass-bg);
	-webkit-backdrop-filter: var(--pyp-tt-glass-blur);
	backdrop-filter: var(--pyp-tt-glass-blur);
	box-shadow: var(--pyp-tt-glass-shadow);
	font: 400 10.5px/1.3 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
	animation: pyp-tt-float 7s ease-in-out infinite alternate;
}

.pyp-tt__chip .bi {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 9px;
	background: linear-gradient(145deg, #2f8a4c, var(--pyp-forest));
	color: #fff;
	font-size: 13px;
}

.pyp-tt__chip strong {
	display: block;
	font: 600 12px/1.25 var(--pyp-font-menu);
	color: var(--pyp-forest);
}

.pyp-tt__chip--alliance {
	top: 9%;
	right: -2%;
}

.pyp-tt__chip--centres {
	bottom: 13%;
	left: -2%;
	animation-delay: -3.5s;
}

@keyframes pyp-tt-float {
	from { transform: translateY(-5px); }
	to   { transform: translateY(5px); }
}

.pyp-tt.is-offscreen .pyp-tt__wheel,
.pyp-tt.is-offscreen .pyp-tt__chip {
	animation-play-state: paused;
}

/* Story */
.pyp-tt .pyp-tt__quote {
	position: relative;
	margin: 0 0 10px;
	padding: 0 0 0 38px;
	border: 0;
	background: none;
	font-size: inherit;
}

.pyp-tt__quote::before {
	content: "\201C";
	position: absolute;
	top: -8px;
	left: 0;
	font: 400 64px/1 Georgia, 'Times New Roman', serif;
	color: #4a9e45;
}

.pyp-tt .pyp-tt__quote p {
	margin: 0 0 6px;
	font: 500 clamp(18px, 1.45vw, 22px)/1.35 var(--pyp-font-menu);
	color: var(--pyp-forest);
	text-wrap: balance;
}

.pyp-tt .pyp-tt__quote cite {
	font: 600 11px/1 var(--pyp-font-sans);
	font-style: normal;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pyp-green);
}

.pyp-tt .pyp-tt__lead {
	margin: 0 0 14px;
	font: 400 15px/1.65 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
	text-wrap: pretty;
}

.pyp-tt__lead strong {
	font-weight: 600;
	color: var(--pyp-forest);
}

/* Two ways in: open, no boxes; a soft line divides them (vertical when
   side by side, horizontal when stacked) */
.pyp-tt .pyp-tt__ways {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pyp-tt__way {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 4px 0;
}

.pyp-tt__way + .pyp-tt__way {
	margin-top: 16px;
	padding-top: 20px;
}

.pyp-tt__way + .pyp-tt__way::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 1px;
	background: linear-gradient(90deg, rgba(29, 112, 68, 0.35), rgba(29, 112, 68, 0.12) 70%, transparent);
}

.pyp-tt__way-icon {
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	padding: 10px;
	border-radius: 13px;
	background: linear-gradient(145deg, #2f8a4c, var(--pyp-forest));
	box-shadow: var(--pyp-glow-green);
	color: #fff;
	fill: currentColor;
}

.pyp-tt .pyp-tt__way-title {
	margin: 2px 0 4px;
	font: 500 16px/1.3 var(--pyp-font-menu);
	color: var(--pyp-forest);
}

.pyp-tt .pyp-tt__way p {
	margin: 0;
	font: 400 13.5px/1.55 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
}

/* Founder: a glass pill with his portrait, centred below the pair */
.pyp-tt .pyp-tt__founder {
	position: absolute;
	top: calc(100% + 18px);
	right: 0;
	left: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	width: max-content;
	margin-inline: auto;
	gap: 12px;
	padding: 6px 8px 6px 6px;
	border: var(--pyp-tt-glass-edge);
	border-radius: 999px;
	background: var(--pyp-tt-glass-bg);
	-webkit-backdrop-filter: var(--pyp-tt-glass-blur);
	backdrop-filter: var(--pyp-tt-glass-blur);
	box-shadow: var(--pyp-tt-glass-shadow);
	color: var(--pyp-forest);
	text-decoration: none;
	transition: transform 200ms var(--pyp-ease-out), box-shadow 200ms var(--pyp-ease-out);
}

.pyp-tt__founder img {
	width: 46px;
	height: 46px;
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 1.5px rgba(74, 158, 69, 0.6);
	object-fit: cover;
}

.pyp-tt__founder-text {
	display: grid;
	gap: 3px;
	padding-right: 6px;
}

.pyp-tt__founder-kicker {
	font: 600 10px/1 var(--pyp-font-sans);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pyp-green);
}

.pyp-tt__founder-name {
	font: 500 16px/1.1 var(--pyp-font-menu);
}

.pyp-tt__founder .bi {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--pyp-green);
	box-shadow: var(--pyp-glow-green);
	color: #fff;
	font-size: 15px;
	transition: transform 200ms var(--pyp-ease-out);
}

.pyp-tt__founder:active {
	transform: scale(0.98);
}

.pyp-tt__founder:focus-visible {
	outline: 2px solid var(--pyp-green);
	outline-offset: 3px;
}

@media (hover: hover) {
	.pyp-tt .pyp-tt__founder:hover {
		color: var(--pyp-forest);
		transform: translateY(-2px);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 24px 40px -22px rgba(15, 59, 39, 0.55);
	}

	.pyp-tt__founder:hover .bi {
		transform: translateX(3px);
	}
}

/* Reveal as the section scrolls in (only once the script has armed it) */
.pyp-tt.is-armed .pyp-tt__arch,
.pyp-tt.is-armed .pyp-tt__arch-line {
	opacity: 0;
	transform: translateY(18px) scale(0.97);
	transform-origin: 50% 100%;
	transition: opacity 800ms var(--pyp-ease-out), transform 1000ms var(--pyp-ease-out);
}

.pyp-tt.is-armed .pyp-tt__pair {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 800ms 150ms var(--pyp-ease-out), transform 1000ms 150ms var(--pyp-ease-out);
}

.pyp-tt.is-armed .pyp-tt__head,
.pyp-tt.is-armed .pyp-tt__quote,
.pyp-tt.is-armed .pyp-tt__lead,
.pyp-tt.is-armed .pyp-tt__way,
.pyp-tt.is-armed .pyp-tt__founder {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 700ms var(--pyp-ease-out), transform 700ms var(--pyp-ease-out);
}

.pyp-tt.is-armed .pyp-tt__quote            { transition-delay: 100ms; }
.pyp-tt.is-armed .pyp-tt__lead             { transition-delay: 160ms; }
.pyp-tt.is-armed .pyp-tt__way:nth-child(1) { transition-delay: 220ms; }
.pyp-tt.is-armed .pyp-tt__way:nth-child(2) { transition-delay: 280ms; }
.pyp-tt.is-armed .pyp-tt__founder          { transition-delay: 340ms; }

.pyp-tt.is-armed.is-in .pyp-tt__arch,
.pyp-tt.is-armed.is-in .pyp-tt__arch-line,
.pyp-tt.is-armed.is-in .pyp-tt__pair,
.pyp-tt.is-armed.is-in .pyp-tt__head,
.pyp-tt.is-armed.is-in .pyp-tt__quote,
.pyp-tt.is-armed.is-in .pyp-tt__lead,
.pyp-tt.is-armed.is-in .pyp-tt__way,
.pyp-tt.is-armed.is-in .pyp-tt__founder {
	opacity: 1;
	transform: none;
}

@media (min-width: 576px) {
	.pyp-tt .pyp-tt__ways {
		grid-template-columns: 1fr 1fr;
	}

	.pyp-tt__way:first-child {
		padding-right: clamp(20px, 2.4vw, 36px);
	}

	.pyp-tt__way + .pyp-tt__way {
		margin-top: 0;
		padding-top: 4px;
		padding-left: clamp(20px, 2.4vw, 36px);
	}

	.pyp-tt__way + .pyp-tt__way::before {
		top: 0;
		right: auto;
		bottom: 0;
		width: 1px;
		height: auto;
		background: linear-gradient(180deg, transparent, rgba(29, 112, 68, 0.38) 25%, rgba(29, 112, 68, 0.38) 75%, transparent);
	}

	.pyp-tt .pyp-tt__stage {
		width: min(100%, 420px);
	}

	.pyp-tt .pyp-tt__chip {
		font-size: 11.5px;
	}

	.pyp-tt__chip strong {
		font-size: 13px;
	}
}

/* Desktop: 65vh. Copy on the white side, the arch on the green side; the
   arch takes its size from the section height */
@media (min-width: 992px) {
	.pyp-tt {
		display: flex;
		align-items: center;
		min-height: 65vh;
		min-height: 65svh;
		padding-block: clamp(16px, 1.6vw, 28px);
	}

	.pyp-tt__grid {
		grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
		grid-template-rows: auto 1fr;
		grid-template-areas: "head stage" "body stage";
		align-items: center;
		column-gap: clamp(32px, 4vw, 80px);
		row-gap: 14px;
		width: 100%;
	}

	.pyp-tt__head {
		align-self: end;
	}

	.pyp-tt__body {
		align-self: start;
	}

	.pyp-tt .pyp-tt__stage {
		width: auto;
		max-width: 100%;
		height: clamp(380px, calc(65svh - 140px), 600px);
		justify-self: end; /* hug the right edge; the chips get the open green to its left */
	}

	.pyp-tt__vertical {
		font-size: 11px;
	}

	/* The copy column is narrow until wide screens: one per row, line between */
	.pyp-tt .pyp-tt__ways {
		grid-template-columns: 1fr;
	}

	.pyp-tt__way:first-child {
		padding-right: 0;
	}

	.pyp-tt__way + .pyp-tt__way {
		margin-top: 16px;
		padding-top: 20px;
		padding-left: 0;
	}

	.pyp-tt__way + .pyp-tt__way::before {
		right: 0;
		bottom: auto;
		width: auto;
		height: 1px;
		background: linear-gradient(90deg, rgba(29, 112, 68, 0.35), rgba(29, 112, 68, 0.12) 70%, transparent);
	}
}

@media (min-width: 1200px) {
	.pyp-tt .pyp-tt__ways {
		grid-template-columns: 1fr 1fr;
	}

	.pyp-tt__way:first-child {
		padding-right: clamp(20px, 2.4vw, 36px);
	}

	.pyp-tt__way + .pyp-tt__way {
		margin-top: 0;
		padding-top: 4px;
		padding-left: clamp(20px, 2.4vw, 36px);
	}

	.pyp-tt__way + .pyp-tt__way::before {
		right: auto;
		bottom: 0;
		width: 1px;
		height: auto;
		background: linear-gradient(180deg, transparent, rgba(29, 112, 68, 0.38) 25%, rgba(29, 112, 68, 0.38) 75%, transparent);
	}

	/* chips stand off the arch, out on the open green (the copy column is
	   wide enough from here for the green to its left to stay clear) */
	.pyp-tt__chip--alliance {
		top: 0;
		right: -3%;
	}

	/* its right edge tucks just under the arch outline */
	.pyp-tt__chip--centres {
		right: calc(91% - 40px);
		bottom: 20%;
		left: auto;
		width: max-content;
		max-width: none;
	}
}

@media (min-width: 1920px) {
	/* wide screens: fully outside the arch, on the open green */
	.pyp-tt__chip--centres {
		right: calc(91% + 18px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pyp-tt__wheel,
	.pyp-tt__chip {
		animation: none;
	}

	.pyp-tt.is-armed .pyp-tt__arch,
	.pyp-tt.is-armed .pyp-tt__arch-line,
	.pyp-tt.is-armed .pyp-tt__pair,
	.pyp-tt.is-armed .pyp-tt__head,
	.pyp-tt.is-armed .pyp-tt__quote,
	.pyp-tt.is-armed .pyp-tt__lead,
	.pyp-tt.is-armed .pyp-tt__way,
	.pyp-tt.is-armed .pyp-tt__founder {
		transform: none;
		transition-property: opacity;
		transition-duration: 300ms;
	}
}

@media (prefers-reduced-transparency: reduce) {
	.pyp-tt .pyp-tt__chip,
	.pyp-tt .pyp-tt__founder {
		background: #fff;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}


/* The read-more button exists for phones only */
.pyp-tt__readmore {
	display: none;
}

/* Phones: a compact app screen. The title above; a short green card fitted
   to the photo, the pair rising out of it with their mat on its floor; the
   facts as small tiles and the founder as a row; the story in four lines with
   Read more; the two ways as a swipe row. Quiet motion throughout: the pair
   breathes, a sheen crosses the card, the glow pulses, the wheel turns. */
@media (max-width: 767.98px) {
	.pyp-tt {
		padding-block: 20px 26px;
	}

	.pyp-tt__grid {
		grid-template-columns: minmax(0, 1fr); /* swipe rows must not widen the column */
		gap: 16px;
	}

	.pyp-tt .pyp-tt__eyebrow {
		margin-bottom: 8px;
	}

	.pyp-tt .pyp-tt__title {
		font-size: clamp(26px, 7.4vw, 32px);
		line-height: 1.08;
		letter-spacing: -0.02em;
	}

	/* stage: percent padding and margins follow its width, so it all scales.
	   The pair is 64% wide (74% tall); the card spans 22% to 72% beneath it. */
	.pyp-tt .pyp-tt__stage {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		width: 100%;
		aspect-ratio: auto;
		margin: 0;
		padding-top: calc(74% + 12px);
	}

	.pyp-tt__arch {
		inset: 0 0 auto;
		width: 100%;
		aspect-ratio: 2 / 1;
		margin-top: 22%;
		border-radius: 26px;
		background:
			radial-gradient(70% 90% at 50% 100%, rgba(156, 207, 104, 0.45), transparent 70%),
			linear-gradient(160deg, #23824f 0%, #165f39 55%, #0f3b27 100%);
		box-shadow: 0 22px 36px -24px rgba(15, 59, 39, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.18);
		-webkit-mask: none;
		mask: none;
	}

	/* a sheen of light crossing the card now and then */
	.pyp-tt__arch::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.16) 50%, transparent 65%);
		transform: translateX(-100%);
		animation: pyp-tt-sheen 7s var(--pyp-ease-out) 1.5s infinite;
	}

	@keyframes pyp-tt-sheen {
		0%   { transform: translateX(-100%); }
		30%  { transform: translateX(100%); }
		100% { transform: translateX(100%); }
	}

	.pyp-tt__glow {
		inset: 10% 22% -10%;
		animation: pyp-tt-pulse 6s ease-in-out infinite alternate;
	}

	@keyframes pyp-tt-pulse {
		from { opacity: 0.6; transform: scale(0.94); }
		to   { opacity: 1; transform: scale(1.06); }
	}

	.pyp-tt__wheel {
		top: -40%;
		left: 50%;
		width: 110%;
		margin-left: -55%;
	}

	.pyp-tt__arch-line,
	.pyp-tt__shadow {
		display: none;
	}

	/* "What is yoga", carved up the card's left edge */
	.pyp-tt__vertical {
		top: 0;
		right: auto;
		left: 14px;
		margin-top: 30%;
		font-size: 9px;
		color: rgba(255, 255, 255, 0.7);
	}

	.pyp-tt__pair {
		top: 0;
		bottom: auto;
		left: 18%;
		width: 64%;
		filter: drop-shadow(0 14px 14px rgba(8, 32, 20, 0.35));
		animation: pyp-tt-breathe 6s ease-in-out infinite alternate;
	}

	/* uses `translate`, so it never fights the reveal's `transform` */
	@keyframes pyp-tt-breathe {
		from { translate: 0 2px; }
		to   { translate: 0 -5px; }
	}

	/* the facts: small tiles */
	.pyp-tt .pyp-tt__chip,
	.pyp-tt .pyp-tt__chip--alliance,
	.pyp-tt .pyp-tt__chip--centres {
		position: static;
		align-items: center;
		gap: 8px;
		width: auto;
		max-width: none;
		padding: 9px 10px;
		border-radius: 16px;
		font-size: 10.5px;
		line-height: 1.25;
		animation: none;
	}

	.pyp-tt__chip .bi {
		width: 26px;
		height: 26px;
		border-radius: 8px;
		font-size: 12px;
	}

	.pyp-tt .pyp-tt__chip strong {
		font-size: 12px;
	}

	.pyp-tt .pyp-tt__founder {
		position: static;
		grid-column: 1 / -1;
		width: auto;
		margin: 0;
		padding: 6px;
		border-radius: 18px;
	}

	.pyp-tt__founder img {
		width: 40px;
		height: 40px;
	}

	.pyp-tt__founder-text {
		flex: 1 1 auto;
	}

	.pyp-tt__founder-name {
		font-size: 15px;
	}

	.pyp-tt__founder .bi {
		width: 36px;
		height: 36px;
		border-radius: 12px;
	}

	/* the story */
	.pyp-tt .pyp-tt__quote {
		margin-bottom: 12px;
		padding: 2px 0 2px 14px;
		border-left: 3px solid #4a9e45;
	}

	.pyp-tt__quote::before {
		display: none;
	}

	.pyp-tt .pyp-tt__quote p {
		margin-bottom: 4px;
		font-size: 16.5px;
	}

	.pyp-tt .pyp-tt__lead {
		display: -webkit-box;
		margin-bottom: 4px;
		overflow: hidden;
		font-size: 14.5px;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 4;
	}

	.pyp-tt.is-read .pyp-tt__lead {
		display: block;
	}

	.pyp-tt .pyp-tt__readmore {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin: 0 0 14px;
		padding: 6px 0;
		border: 0;
		background: none;
		font: 500 15px/1 var(--pyp-font-menu);
		color: var(--pyp-green);
		cursor: pointer;
	}

	.pyp-tt__readmore::after {
		content: "";
		width: 7px;
		height: 7px;
		border-right: 1.75px solid currentColor;
		border-bottom: 1.75px solid currentColor;
		transform: translateY(-2px) rotate(45deg);
		transition: transform 300ms var(--pyp-ease-out);
	}

	.pyp-tt.is-read .pyp-tt__readmore::after {
		transform: translateY(2px) rotate(-135deg);
	}

	/* the two ways: a swipe row of glass cards */
	.pyp-tt .pyp-tt__ways {
		display: flex;
		gap: 10px;
		margin: 0 calc(-1 * var(--pyp-gutter));
		padding: 2px var(--pyp-gutter) 10px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--pyp-gutter);
		scrollbar-width: none;
	}

	.pyp-tt__ways::-webkit-scrollbar {
		display: none;
	}

	.pyp-tt__way,
	.pyp-tt__way:first-child,
	.pyp-tt__way + .pyp-tt__way {
		flex: 0 0 min(78vw, 310px);
		align-items: flex-start;
		gap: 12px;
		margin: 0;
		padding: 14px;
		border: var(--pyp-tt-glass-edge);
		border-radius: 20px;
		background: rgba(255, 255, 255, 0.8);
		-webkit-backdrop-filter: var(--pyp-tt-glass-blur);
		backdrop-filter: var(--pyp-tt-glass-blur);
		box-shadow: var(--pyp-tt-glass-shadow);
		scroll-snap-align: start;
	}

	.pyp-tt__way + .pyp-tt__way::before {
		display: none;
	}

	.pyp-tt__way-icon {
		width: 38px;
		height: 38px;
		padding: 9px;
		border-radius: 12px;
	}

	.pyp-tt .pyp-tt__way-title {
		margin-top: 0;
		font-size: 15px;
	}

	.pyp-tt .pyp-tt__way p {
		font-size: 13px;
	}

	/* entrance: card, pair, tiles and row rise in sequence */
	.pyp-tt.is-armed .pyp-tt__chip,
	.pyp-tt.is-armed .pyp-tt__founder,
	.pyp-tt.is-armed .pyp-tt__vertical {
		opacity: 0;
		transform: translateY(12px);
		transition: opacity 700ms var(--pyp-ease-out), transform 700ms var(--pyp-ease-out);
	}

	.pyp-tt.is-armed .pyp-tt__chip--alliance { transition-delay: 380ms; }
	.pyp-tt.is-armed .pyp-tt__chip--centres  { transition-delay: 440ms; }
	.pyp-tt.is-armed .pyp-tt__founder        { transition-delay: 500ms; }
	.pyp-tt.is-armed .pyp-tt__vertical       { transition-delay: 600ms; }

	.pyp-tt.is-armed.is-in .pyp-tt__chip,
	.pyp-tt.is-armed.is-in .pyp-tt__founder {
		opacity: 1;
		transform: none;
	}

	.pyp-tt.is-armed.is-in .pyp-tt__vertical {
		opacity: 1;
		transform: rotate(180deg);
	}

	.pyp-tt.is-offscreen .pyp-tt__pair,
	.pyp-tt.is-offscreen .pyp-tt__glow,
	.pyp-tt.is-offscreen .pyp-tt__arch::after {
		animation-play-state: paused;
	}
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
	.pyp-tt__pair,
	.pyp-tt__glow,
	.pyp-tt__arch::after {
		animation: none;
	}
}

/* ==========================================================================
   4. Benefits of yoga (.pyp-bn) · markup: file/home/yogabenefits.php
   An infographic: six numbered benefits strung on a breath line (prana)
   that draws itself across the row, over a carved jali lattice. Each card is
   a temple arch (jharokha) and keeps the original hover: a green liquid
   rises, the leaf-green wave sinks away, and the colour icon turns white.
   ========================================================================== */

.pyp-bn {
	--pyp-saffron-deep: #d9822b;
	--pyp-bn-wave: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 180'><path d='M0 90 Q 37.5 65 75 90 T 150 90 T 225 90 T 300 90 T 375 90 T 450 90 T 525 90 T 600 90 V180 H0 Z' fill='%239CCF68' opacity='0.6'/><path d='M0 70 Q 50 105 100 70 T 200 70 T 300 70 T 400 70 T 500 70 T 600 70 V180 H0 Z' fill='%23A9D987' opacity='0.8'/><ellipse cx='150' cy='90' rx='60' ry='20' fill='white' opacity='0.3'/><ellipse cx='400' cy='70' rx='80' ry='25' fill='white' opacity='0.25'/></svg>");
	--pyp-bn-h: 340px;
	--pyp-bn-arch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 130' preserveAspectRatio='none'%3E%3Cpath d='M0 130V30C0 20 16 14 30 9C40 5 46 3 50 0C54 3 60 5 70 9C84 14 100 20 100 30V121Q100 130 91 130H9Q0 130 0 121Z'/%3E%3C/svg%3E");
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(24px, 3vw, 44px);
	background:
		radial-gradient(60% 70% at 50% 0%, rgba(255, 255, 255, 0.9), transparent 70%),
		radial-gradient(50% 60% at 100% 100%, rgba(156, 207, 104, 0.22), transparent 70%),
		linear-gradient(180deg, #f8f7ef 0%, #eef4e6 55%, #e3eed8 100%);
	color: var(--pyp-forest);
}

/* Carved jali lattice, fading out towards the bottom */
.pyp-bn__jali {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: rgba(29, 112, 68, 0.08);
	stroke-width: 1;
	-webkit-mask-image: radial-gradient(130% 75% at 50% 0%, #000 35%, transparent 85%);
	mask-image: radial-gradient(130% 75% at 50% 0%, #000 35%, transparent 85%);
	pointer-events: none;
}

/* A Vedic wheel turning very slowly in the corner */
.pyp-bn__mandala {
	position: absolute;
	top: -180px;
	right: -160px;
	z-index: -1;
	width: 520px;
	height: 520px;
	color: rgba(29, 112, 68, 0.05);
	fill: currentColor;
	animation: pyp-bn-turn 200s linear infinite;
	pointer-events: none;
}

@keyframes pyp-bn-turn {
	to { transform: rotate(360deg); }
}

/* Verse: a sutra set between carved flourishes, a lotus above it */
.pyp-bn .pyp-bn__verse {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(10px, 2vw, 24px);
	margin: 0 0 22px;
}

.pyp-bn__flourish {
	flex: 0 1 160px;
	min-width: 36px;
	height: 16px;
	fill: none;
	stroke: rgba(29, 112, 68, 0.4);
	stroke-width: 1.2;
}

.pyp-bn__flourish--end {
	transform: scaleX(-1);
}

/* phones: the verse needs the whole width */
@media (max-width: 575.98px) {
	.pyp-bn__flourish {
		display: none;
	}

}

.pyp-bn__verse blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	text-align: center;
}

/* the lotus is sacred, so it takes the saffron */
.pyp-bn__lotus {
	display: block;
	width: 24px;
	height: 24px;
	margin: 0 auto 6px;
	color: var(--pyp-saffron-deep);
	fill: currentColor;
}

.pyp-bn .pyp-bn__verse p {
	margin: 0 0 4px;
	font: italic 400 clamp(22px, 2.2vw, 32px)/1.25 Georgia, 'Times New Roman', serif;
	letter-spacing: 0.02em;
	color: var(--pyp-forest);
}

.pyp-bn__verse figcaption {
	font: 400 13px/1.5 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
}

.pyp-bn__verse cite {
	display: inline-block;
	margin-left: 4px;
	font-style: normal;
	font-weight: 600;
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pyp-green);
}

/* Board: the breath line runs through the number nodes on the cards' top edge */
.pyp-bn__board {
	position: relative;
	padding-top: 30px;
}

.pyp-bn__line {
	display: none;
}

.pyp-bn .pyp-bn__list {
	position: relative;
	display: flex;
	gap: 14px;
	margin: 0 calc(-1 * var(--pyp-gutter));
	padding: 0 var(--pyp-gutter) 6px;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--pyp-gutter);
	scrollbar-width: none;
}

.pyp-bn__list::-webkit-scrollbar {
	display: none;
}

/* Card */
.pyp-bn .pyp-bn__card {
	position: relative;
	flex: 0 0 min(74vw, 300px);
	height: var(--pyp-bn-h);
	margin: 22px 0 0; /* room for the node above the card */
	filter: drop-shadow(0 16px 22px rgba(15, 59, 39, 0.16));
	color: var(--pyp-forest);
	scroll-snap-align: start;
	outline: none;
	cursor: default;
	-webkit-tap-highlight-color: transparent;
	transition: transform 450ms var(--pyp-ease-out), filter 450ms var(--pyp-ease-out);
}

/* Number node sitting on the breath line, at the arch's apex */
.pyp-bn__node {
	position: absolute;
	top: -19px;
	left: 50%;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	margin-left: -19px;
	border-radius: 50%;
	background: linear-gradient(145deg, #c8e6a0, #7fbf55);
	box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.75), 0 8px 18px -6px rgba(15, 59, 39, 0.35);
	font: 600 12px/1 var(--pyp-font-menu);
	letter-spacing: 0.04em;
	color: var(--pyp-forest);
}

/* a ring breathing out from each node, in turn */
.pyp-bn__node::after {
	content: "";
	position: absolute;
	inset: -5px;
	border: 1.5px solid rgba(74, 158, 69, 0.55);
	border-radius: 50%;
	opacity: 0;
	animation: pyp-bn-breathe 4.8s var(--pyp-ease-out) infinite;
	animation-delay: calc(var(--pyp-bn-i) * 0.8s);
}

@keyframes pyp-bn-breathe {
	0%   { opacity: 0.9; transform: scale(1); }
	60%  { opacity: 0; transform: scale(1.9); }
	100% { opacity: 0; transform: scale(1.9); }
}

/* The arch itself; inside it the liquid rises and the wave at rest sinks away */
.pyp-bn__liquid {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	background: linear-gradient(180deg, #fff 0%, #fbfdf8 100%);
	-webkit-mask: var(--pyp-bn-arch) center / 100% 100% no-repeat;
	mask: var(--pyp-bn-arch) center / 100% 100% no-repeat;
	pointer-events: none;
}

.pyp-bn__liquid::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: -2px;
	left: 0;
	height: 140%;
	background: linear-gradient(180deg, #23824f 0%, #1d7044 40%, #12512f 100%);
	transform: translateY(100%);
	transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pyp-bn__liquid::after {
	content: "";
	position: absolute;
	right: -25%;
	bottom: -72px;
	left: -25%;
	height: 180px;
	background: var(--pyp-bn-wave) 0 100% / 225px 175px repeat-x;
	animation: pyp-bn-wave 25s linear infinite;
	transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes pyp-bn-wave {
	to { background-position-x: -600px; }
}

.pyp-bn__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 48px 16px 26px;
	text-align: center;
}

.pyp-bn__icon {
	position: relative;
	display: block;
	width: 112px;
	height: 112px;
	margin-bottom: 14px;
	transition: width 500ms var(--pyp-ease-out), height 500ms var(--pyp-ease-out), margin 500ms var(--pyp-ease-out);
}

.pyp-bn__icon img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: opacity 350ms ease, transform 600ms var(--pyp-ease-out);
}

.pyp-bn__icon-white {
	opacity: 0;
	transform: scale(0.9) rotate(-6deg);
}

/* the classical name, set like a manuscript gloss */
.pyp-bn__tag {
	padding: 4px 12px 5px;
	border-radius: 999px;
	background: rgba(29, 112, 68, 0.07);
	font: italic 400 14px/1 Georgia, 'Times New Roman', serif;
	letter-spacing: 0.03em;
	color: var(--pyp-green);
	transition: background-color 300ms ease, color 300ms ease;
}

.pyp-bn .pyp-bn__name {
	margin: 10px 0 0;
	font: 500 18px/1.25 var(--pyp-font-menu);
	letter-spacing: -0.005em;
	color: var(--pyp-forest);
	text-wrap: balance;
	transition: color 300ms ease;
}

/* Grid rows 0fr → 1fr animates the height of the story smoothly */
.pyp-bn__more {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 500ms var(--pyp-ease-out);
}

.pyp-bn .pyp-bn__desc {
	min-height: 0;
	margin: 0;
	overflow: hidden;
	font: 400 12.5px/1.55 var(--pyp-font-sans);
	color: rgba(255, 255, 255, 0.9);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 300ms ease, transform 500ms var(--pyp-ease-out);
	text-wrap: pretty;
}

.pyp-bn__desc::before {
	content: "";
	display: block;
	height: 8px;
}

/* Open: hover with a mouse, a tap on touch screens, keyboard focus */
.pyp-bn__card:is(:focus-visible, .is-open) .pyp-bn__liquid::before { transform: translateY(0); }
.pyp-bn__card:is(:focus-visible, .is-open) .pyp-bn__liquid::after  { transform: translateY(100%); }
.pyp-bn__card:is(:focus-visible, .is-open) .pyp-bn__icon { width: 64px; height: 64px; margin-bottom: 10px; }
.pyp-bn__card:is(:focus-visible, .is-open) .pyp-bn__icon-color { opacity: 0; transform: scale(1.1); }
.pyp-bn__card:is(:focus-visible, .is-open) .pyp-bn__icon-white { opacity: 1; transform: none; }
.pyp-bn__card:is(:focus-visible, .is-open) .pyp-bn__tag { background: rgba(255, 255, 255, 0.14); color: #c8e6a0; }
.pyp-bn__card:is(:focus-visible, .is-open) .pyp-bn__name { color: #fff; }
.pyp-bn__card:is(:focus-visible, .is-open) .pyp-bn__more { grid-template-rows: 1fr; }
.pyp-bn__card:is(:focus-visible, .is-open) .pyp-bn__desc { opacity: 1; transform: none; transition-delay: 120ms, 0s; }
.pyp-bn__card:focus-visible .pyp-bn__node { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--pyp-green); }

@media (hover: hover) {
	.pyp-bn__card:hover { transform: translateY(-4px); filter: drop-shadow(0 24px 30px rgba(15, 59, 39, 0.26)); }
	.pyp-bn__card:hover .pyp-bn__liquid::before { transform: translateY(0); }
	.pyp-bn__card:hover .pyp-bn__liquid::after  { transform: translateY(100%); }
	.pyp-bn__card:hover .pyp-bn__icon { width: 64px; height: 64px; margin-bottom: 10px; }
	.pyp-bn__card:hover .pyp-bn__icon-color { opacity: 0; transform: scale(1.1); }
	.pyp-bn__card:hover .pyp-bn__icon-white { opacity: 1; transform: none; }
	.pyp-bn__card:hover .pyp-bn__tag { background: rgba(255, 255, 255, 0.14); color: #c8e6a0; }
	.pyp-bn__card:hover .pyp-bn__name { color: #fff; }
	.pyp-bn__card:hover .pyp-bn__more { grid-template-rows: 1fr; }
	.pyp-bn__card:hover .pyp-bn__desc { opacity: 1; transform: none; transition-delay: 120ms, 0s; }
}

/* Call to action: no box, a slim row under a fine ornamental line */
.pyp-bn__cta {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 14px;
	margin-top: 26px;
	padding-top: 22px;
	text-align: center;
}

.pyp-bn__cta::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(29, 112, 68, 0.28) 20%, rgba(29, 112, 68, 0.28) 80%, transparent);
}

/* a small temple arch with a lotus */
.pyp-bn__cta-mark {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 40px;
	height: 48px;
	padding-top: 6px;
	background: linear-gradient(180deg, #2f8a4c 0%, #1d7044 55%, #12512f 100%);
	-webkit-mask: var(--pyp-bn-arch) center / 100% 100% no-repeat;
	mask: var(--pyp-bn-arch) center / 100% 100% no-repeat;
}

.pyp-bn__cta-mark svg {
	width: 20px;
	height: 20px;
	color: #fff;
	fill: currentColor;
}

.pyp-bn .pyp-bn__cta-title {
	margin: 0 0 3px;
	font: 500 clamp(19px, 1.5vw, 22px)/1.2 var(--pyp-font-menu);
	letter-spacing: -0.005em;
	color: var(--pyp-forest);
}

.pyp-bn .pyp-bn__cta-text {
	margin: 0;
	font: 400 14px/1.55 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
	text-wrap: pretty;
}

.pyp-bn__cta-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 22px;
}

/* Primary: a forest pill that ends in a leaf-green circle with the arrow */
.pyp-bn .pyp-bn__btn--solid {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 46px;
	padding: 0 5px 0 20px;
	border-radius: 999px;
	background: linear-gradient(135deg, #23824f, var(--pyp-forest));
	box-shadow: 0 12px 24px -12px rgba(15, 59, 39, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.18);
	font: 500 15px/1 var(--pyp-font-menu);
	color: #fff;
	text-decoration: none;
	transition: transform 160ms var(--pyp-ease-out), box-shadow 200ms ease;
}

.pyp-bn__btn--solid .bi {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #c8e6a0;
	color: var(--pyp-forest);
	font-size: 15px;
	transition: transform 300ms var(--pyp-ease-out), background-color 200ms ease;
}

/* Secondary: a quiet text link whose underline draws in */
.pyp-bn .pyp-bn__btn--ghost {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	font: 500 15px/1 var(--pyp-font-menu);
	color: var(--pyp-green);
	text-decoration: none;
}

.pyp-bn__btn--ghost span {
	padding-bottom: 3px;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size 300ms var(--pyp-ease-out);
}

.pyp-bn__btn--ghost .bi {
	font-size: 14px;
	transition: transform 200ms var(--pyp-ease-out);
}

.pyp-bn__btn--solid:active {
	transform: scale(0.97);
}

.pyp-bn__btn:focus-visible {
	outline: 2px solid var(--pyp-green);
	outline-offset: 3px;
	border-radius: 999px;
}

@media (hover: hover) {
	.pyp-bn .pyp-bn__btn--solid:hover {
		color: #fff;
		box-shadow: 0 16px 30px -12px rgba(15, 59, 39, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.18);
	}

	.pyp-bn__btn--solid:hover .bi {
		background: #fff;
		transform: rotate(-45deg);
	}

	.pyp-bn .pyp-bn__btn--ghost:hover {
		color: var(--pyp-green-hover);
	}

	.pyp-bn__btn--ghost:hover span {
		background-size: 100% 1px;
	}

	.pyp-bn__btn--ghost:hover .bi {
		transform: translateX(3px);
	}
}

/* Reveal as the section scrolls in (only once the script has armed it) */
.pyp-bn.is-armed .pyp-bn__card {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 700ms var(--pyp-ease-out), transform 800ms var(--pyp-ease-out), filter 450ms var(--pyp-ease-out);
	transition-delay: calc(var(--pyp-bn-i) * 90ms + 200ms);
}

.pyp-bn.is-armed.is-in .pyp-bn__card {
	opacity: 1;
	transform: none;
}

.pyp-bn.is-armed.is-in .pyp-bn__card:hover {
	transform: translateY(-4px);
	transition-delay: 0s;
}

.pyp-bn.is-offscreen .pyp-bn__mandala,
.pyp-bn.is-offscreen .pyp-bn__line-flow,
.pyp-bn.is-offscreen .pyp-bn__node::after,
.pyp-bn.is-offscreen .pyp-bn__liquid::after {
	animation-play-state: paused;
}

/* Tablet: three per row, the whole set in view */
@media (min-width: 768px) {
	.pyp-bn .pyp-bn__list {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		row-gap: 34px;
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	.pyp-bn .pyp-bn__card {
		height: var(--pyp-bn-h);
		margin: 0;
	}

	.pyp-bn__cta {
		grid-template-columns: auto minmax(0, 1fr) auto;
		justify-items: start;
		align-items: center;
		column-gap: 18px;
		text-align: left;
	}
}

/* Desktop: all six in one row on the breath line */
@media (min-width: 1200px) {
	.pyp-bn .pyp-bn__list {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: clamp(12px, 1.1vw, 18px);
	}

	.pyp-bn__line {
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 60px;
		overflow: visible;
		pointer-events: none;
	}

	.pyp-bn__line path {
		fill: none;
		vector-effect: non-scaling-stroke;
	}

	.pyp-bn__line-base {
		stroke: rgba(29, 112, 68, 0.3);
		stroke-width: 1.5;
		stroke-dasharray: 1;
		stroke-dashoffset: 0;
	}

	/* light travelling along the breath */
	.pyp-bn__line-flow {
		stroke: #4a9e45;
		stroke-width: 2.5;
		stroke-linecap: round;
		stroke-dasharray: 0.01 0.09;
		animation: pyp-bn-flow 6s linear infinite;
	}

	@keyframes pyp-bn-flow {
		to { stroke-dashoffset: -0.5; }
	}

	.pyp-bn.is-armed .pyp-bn__line-base {
		stroke-dashoffset: 1;
		transition: stroke-dashoffset 1800ms var(--pyp-ease-out);
	}

	.pyp-bn.is-armed .pyp-bn__line-flow {
		opacity: 0;
		transition: opacity 800ms 1400ms ease;
	}

	.pyp-bn.is-armed.is-in .pyp-bn__line-base {
		stroke-dashoffset: 0;
	}

	.pyp-bn.is-armed.is-in .pyp-bn__line-flow {
		opacity: 0.55;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pyp-bn__mandala,
	.pyp-bn__node::after,
	.pyp-bn__line-flow,
	.pyp-bn__liquid::after {
		animation: none;
	}

	.pyp-bn.is-armed .pyp-bn__card {
		transform: none;
		transition-property: opacity;
		transition-duration: 300ms;
	}

	.pyp-bn.is-armed .pyp-bn__line-base {
		transition: none;
	}

	.pyp-bn__card:hover {
		transform: none;
	}
}

/* Phones: an app, not a shrunk page. The six benefits sit on a horizontal
   rail of compact cards (swipe, snap); a tap makes the green liquid rise in
   that card, the icon turns white and the story appears in place, so the
   section never grows. The call to action is a full-width app button. */
@media (max-width: 767.98px) {
	.pyp-bn .pyp-bn__verse {
		margin-bottom: 16px;
	}

	.pyp-bn .pyp-bn__verse p {
		font-size: 19px;
	}

	.pyp-bn__lotus {
		width: 20px;
		height: 20px;
		margin-bottom: 4px;
	}

	.pyp-bn__board {
		padding-top: 0;
	}

	.pyp-bn .pyp-bn__list {
		gap: 12px;
		padding: 4px var(--pyp-gutter) 18px;
	}

	/* the card */
	.pyp-bn .pyp-bn__card {
		flex: 0 0 min(68vw, 270px);
		height: 248px;
		margin: 0;
		border-radius: 22px;
		filter: none;
		box-shadow: 0 1px 1px rgba(15, 59, 39, 0.05), 0 16px 30px -20px rgba(15, 59, 39, 0.45);
	}

	.pyp-bn .pyp-bn__liquid {
		border-radius: inherit;
		-webkit-mask: none;
		mask: none;
	}

	/* the number, small in the top corner */
	.pyp-bn .pyp-bn__node {
		top: 14px;
		right: 14px;
		left: auto;
		width: 28px;
		height: 28px;
		margin: 0;
		box-shadow: none;
		font-size: 11px;
	}

	.pyp-bn .pyp-bn__node::after {
		display: none;
	}

	.pyp-bn .pyp-bn__inner {
		align-items: flex-start;
		justify-content: flex-start;
		padding: 16px 16px 40px;
		text-align: left;
		transition: padding 500ms var(--pyp-ease-out);
	}

	.pyp-bn .pyp-bn__icon {
		width: 84px;
		height: 84px;
		margin: 0 0 auto -4px;
	}

	.pyp-bn .pyp-bn__tag {
		padding: 0;
		background: none;
		font-size: 13px;
	}

	.pyp-bn .pyp-bn__name {
		margin: 4px 0 0;
		font-size: 16.5px;
		text-wrap: wrap;
	}

	.pyp-bn .pyp-bn__desc {
		font-size: 12.8px;
		line-height: 1.5;
	}

	/* open card */
	.pyp-bn .pyp-bn__card:is(.is-open, :focus-visible) .pyp-bn__inner {
		padding-bottom: 16px;
	}

	.pyp-bn .pyp-bn__card.is-open .pyp-bn__icon,
	.pyp-bn .pyp-bn__card:focus-visible .pyp-bn__icon {
		width: 38px;
		height: 38px;
		margin: 0 0 10px -2px;
	}

	.pyp-bn .pyp-bn__card:is(.is-open, :focus-visible) .pyp-bn__tag {
		background: none;
	}

	.pyp-bn .pyp-bn__card:is(.is-open, :focus-visible) .pyp-bn__node {
		background: rgba(255, 255, 255, 0.16);
		color: #fff;
	}

	.pyp-bn .pyp-bn__card:active {
		transform: scale(0.98);
	}

	/* cards simply fade in, no lift */
	.pyp-bn.is-armed .pyp-bn__card {
		transform: none;
	}

	/* call to action: an app button and a text link */
	.pyp-bn__cta {
		margin-top: 14px;
		padding-top: 0;
	}

	.pyp-bn__cta::before,
	.pyp-bn__cta-mark {
		display: none;
	}

	.pyp-bn__cta-actions {
		flex-direction: column;
		align-self: stretch;
		gap: 6px;
		width: 100%;
	}

	.pyp-bn .pyp-bn__btn--solid {
		justify-content: space-between;
		width: 100%;
		height: 54px;
		padding-left: 22px;
		border-radius: 18px;
		font-size: 16px;
	}

	.pyp-bn__btn--solid .bi {
		width: 44px;
		height: 44px;
		border-radius: 14px;
	}

	.pyp-bn .pyp-bn__btn--ghost {
		padding: 10px 0;
	}
}


/* ==========================================================================
   5. Courses (.pyp-cr) · markup: file/home/courses.php, behaviour: home.js
   A segmented control picks the place (a white thumb slides under it),
   chips filter the programme, and the courses sit on a rail of cards with
   their real facts. Desktop drags to scroll with edge arrows; phones swipe.
   ========================================================================== */

.pyp-cr {
	--pyp-saffron-deep: #d9822b;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(28px, 3.6vw, 56px);
	background: linear-gradient(180deg, #fff 0%, #f4f8ef 100%);
}

.pyp-cr__mandala {
	position: absolute;
	bottom: -260px;
	left: -220px;
	z-index: -1;
	width: 560px;
	height: 560px;
	color: rgba(29, 112, 68, 0.05);
	fill: currentColor;
	animation: pyp-cr-turn 220s linear infinite;
	pointer-events: none;
}

@keyframes pyp-cr-turn {
	to { transform: rotate(360deg); }
}

.pyp-cr.is-offscreen .pyp-cr__mandala {
	animation-play-state: paused;
}

/* Heading */
.pyp-cr__head {
	display: grid;
	gap: 10px;
	margin-bottom: 18px;
}

.pyp-cr .pyp-cr__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	font: 600 11px/1 var(--pyp-font-sans);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pyp-green);
}

/* Om is a sacred symbol, so it alone takes the saffron */
.pyp-cr__om {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	color: var(--pyp-saffron-deep);
	fill: currentColor;
}

.pyp-cr .pyp-cr__title {
	margin: 0;
	font: 500 clamp(26px, 3vw, 46px)/1.1 var(--pyp-font-menu);
	letter-spacing: -0.015em;
	color: var(--pyp-forest);
	text-wrap: balance;
}

.pyp-cr__title em {
	font-style: normal;
	color: var(--pyp-green);
	background: linear-gradient(100deg, #12512f 0%, #1d7044 40%, #2f8a4c 70%, #4a9e45 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.pyp-cr .pyp-cr__lede {
	margin: 0;
	font: 400 15px/1.65 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
	text-wrap: pretty;
}

/* Places: a segmented control with a sliding white thumb */
.pyp-cr__places {
	position: relative;
	display: grid;
	grid-auto-columns: 1fr;
	grid-auto-flow: column;
	gap: 4px;
	padding: 5px;
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: 20px;
	background: rgba(29, 112, 68, 0.08);
	box-shadow: inset 0 1px 3px rgba(15, 59, 39, 0.08);
}

.pyp-cr__thumb {
	position: absolute;
	top: 5px;
	bottom: 5px;
	left: 0;
	width: var(--pyp-cr-w, 0);
	border-radius: 15px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 59, 39, 0.08), 0 8px 18px -8px rgba(15, 59, 39, 0.35);
	transform: translateX(var(--pyp-cr-x, 0));
	transition: transform 520ms var(--pyp-ease-drawer), width 520ms var(--pyp-ease-drawer);
}

.pyp-cr__places:not(.is-ready) .pyp-cr__thumb {
	transition: none;
}

.pyp-cr .pyp-cr__place {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 0;
	padding: 10px 8px;
	border: 0;
	border-radius: 15px;
	background: none;
	color: var(--pyp-ink-soft);
	text-align: left;
	cursor: pointer;
	transition: color 300ms ease;
	-webkit-tap-highlight-color: transparent;
}

.pyp-cr__place-icon {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	color: inherit;
	transition: transform 400ms var(--pyp-ease-out);
}

.pyp-cr__place-text {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.pyp-cr__place-name {
	overflow: hidden;
	font: 500 16px/1.1 var(--pyp-font-menu);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.pyp-cr__place-meta {
	overflow: hidden;
	font: 500 11px/1.2 var(--pyp-font-sans);
	white-space: nowrap;
	text-overflow: ellipsis;
	opacity: 0.8;
}

.pyp-cr .pyp-cr__place[aria-selected="true"] {
	color: var(--pyp-forest);
}

.pyp-cr__place[aria-selected="true"] .pyp-cr__place-icon {
	color: var(--pyp-green);
	transform: scale(1.08);
}

.pyp-cr__place:focus-visible {
	outline: 2px solid var(--pyp-green);
	outline-offset: 2px;
}

@media (hover: hover) {
	.pyp-cr .pyp-cr__place[aria-selected="false"]:hover {
		color: var(--pyp-forest);
	}
}

/* Programme chips */
.pyp-cr__filters {
	display: flex;
	gap: 8px;
	margin: 16px calc(-1 * var(--pyp-gutter)) 0;
	padding: 0 var(--pyp-gutter) 2px;
	overflow-x: auto;
	scrollbar-width: none;
}

.pyp-cr__filters::-webkit-scrollbar {
	display: none;
}

.pyp-cr .pyp-cr__filter {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 8px 0 15px;
	border: 1px solid rgba(15, 59, 39, 0.14);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.7);
	font: 500 14px/1 var(--pyp-font-menu);
	color: var(--pyp-forest);
	cursor: pointer;
	transition: background-color 250ms ease, color 250ms ease, border-color 250ms ease, transform 160ms var(--pyp-ease-out);
}

/* the programme's own icon from Manage (the lotus for All) */
.pyp-cr__filter-icon {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin-left: -5px;
	color: var(--pyp-green);
	fill: currentColor;
	transition: color 250ms ease, transform 300ms var(--pyp-ease-out);
}

.pyp-cr__filter[aria-pressed="true"] .pyp-cr__filter-icon {
	color: #fff;
	transform: scale(1.08);
}

.pyp-cr .pyp-cr__filter > span:not(.pyp-cr__filter-icon) {
	display: grid;
	place-items: center;
	min-width: 24px;
	height: 24px;
	padding: 0 6px;
	border-radius: 999px;
	background: rgba(29, 112, 68, 0.1);
	font: 600 11.5px/1 var(--pyp-font-sans);
	color: var(--pyp-green);
	transition: inherit;
}

.pyp-cr .pyp-cr__filter[aria-pressed="true"] {
	border-color: var(--pyp-green);
	background: var(--pyp-green);
	color: #fff;
}

.pyp-cr .pyp-cr__filter[aria-pressed="true"] > span:not(.pyp-cr__filter-icon) {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
}

.pyp-cr__filter:active {
	transform: scale(0.96);
}

.pyp-cr__filter:focus-visible {
	outline: 2px solid var(--pyp-green);
	outline-offset: 2px;
}

@media (hover: hover) {
	.pyp-cr .pyp-cr__filter[aria-pressed="false"]:hover {
		border-color: rgba(29, 112, 68, 0.4);
		background: #fff;
	}
}

/* Rail */
.pyp-cr__stage {
	position: relative;
	margin-top: 14px;
}

.pyp-cr .pyp-cr__rail {
	display: flex;
	gap: 14px;
	margin: 0 calc(-1 * var(--pyp-gutter));
	padding: 6px var(--pyp-gutter) 22px;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--pyp-gutter);
	scrollbar-width: none;
}

.pyp-cr__rail::-webkit-scrollbar {
	display: none;
}

/* Card */
.pyp-cr .pyp-cr__card {
	position: relative;
	display: flex;
	flex: 0 0 min(80vw, 340px);
	flex-direction: column;
	margin: 0;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.95);
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 59, 39, 0.05), 0 18px 34px -24px rgba(15, 59, 39, 0.45);
	scroll-snap-align: start;
	transition: transform 450ms var(--pyp-ease-out), box-shadow 450ms var(--pyp-ease-out);
}

.pyp-cr__card[hidden] {
	display: none;
}

.pyp-cr__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: linear-gradient(145deg, #2f8a4c, var(--pyp-forest));
}

.pyp-cr__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-user-drag: none;
	user-select: none;
	transition: transform 900ms var(--pyp-ease-out);
}

/* a soft shade at the top for the badges */
.pyp-cr__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(6, 28, 17, 0.35) 0%, transparent 40%);
	pointer-events: none;
}

.pyp-cr__level,
.pyp-cr__hours {
	position: absolute;
	top: 12px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 26px;
	padding: 0 10px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	background: rgba(6, 28, 17, 0.38);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	backdrop-filter: blur(10px) saturate(140%);
	font: 600 11px/1 var(--pyp-font-sans);
	letter-spacing: 0.04em;
	color: #fff;
}

.pyp-cr__level { left: 12px; }

.pyp-cr__hours {
	right: 12px;
	background: rgba(200, 230, 160, 0.92);
	border-color: rgba(255, 255, 255, 0.6);
	color: var(--pyp-forest);
}

.pyp-cr__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 16px 18px 18px;
}

.pyp-cr .pyp-cr__kicker {
	margin: 0 0 6px;
	font: 600 10.5px/1 var(--pyp-font-sans);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #4a9e45;
}

.pyp-cr .pyp-cr__name {
	margin: 0 0 12px;
	font: 500 18px/1.25 var(--pyp-font-menu);
	letter-spacing: -0.005em;
	color: var(--pyp-forest);
	text-wrap: balance;
}

/* the title's link covers the whole card */
.pyp-cr .pyp-cr__link {
	color: inherit;
	text-decoration: none;
}

.pyp-cr__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.pyp-cr__link:focus-visible {
	outline: none;
}

.pyp-cr__card:has(.pyp-cr__link:focus-visible) {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pyp-green);
}

.pyp-cr .pyp-cr__facts {
	display: grid;
	gap: 7px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.pyp-cr__facts li {
	display: flex;
	align-items: center;
	gap: 9px;
	font: 400 13.5px/1.3 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
}

.pyp-cr__facts .bi {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: #f1f6ec;
	font-size: 13px;
	color: var(--pyp-green);
}

/* The course's next run (Manage → Services: Course dates) */
.pyp-cr__facts .pyp-cr__next {
	font-weight: 600;
	color: var(--pyp-forest);
}

.pyp-cr__foot {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid rgba(15, 59, 39, 0.08);
}

.pyp-cr .pyp-cr__price {
	display: grid;
	gap: 2px;
	margin: 0 auto 0 0;
	font: 500 10.5px/1 var(--pyp-font-sans);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pyp-ink-soft);
}

.pyp-cr__price b {
	font: 600 20px/1.1 var(--pyp-font-menu);
	letter-spacing: 0;
	text-transform: none;
	color: var(--pyp-forest);
}

.pyp-cr .pyp-cr__enquire {
	position: relative;
	z-index: 2; /* above the card link */
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding: 0 15px;
	border: 1px solid rgba(29, 112, 68, 0.3);
	border-radius: 999px;
	font: 500 14px/1 var(--pyp-font-menu);
	color: var(--pyp-green);
	text-decoration: none;
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.pyp-cr__enquire:focus-visible {
	outline: 2px solid var(--pyp-green);
	outline-offset: 2px;
}

.pyp-cr__go {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--pyp-green);
	box-shadow: var(--pyp-glow-green);
	color: #fff;
	font-size: 15px;
	transition: transform 400ms var(--pyp-ease-out), background-color 200ms ease;
}

.pyp-cr__card:active {
	transform: scale(0.985);
}

@media (hover: hover) {
	.pyp-cr__card:hover {
		transform: translateY(-5px);
		box-shadow: 0 1px 2px rgba(15, 59, 39, 0.05), 0 30px 50px -26px rgba(15, 59, 39, 0.55);
	}

	.pyp-cr__card:hover .pyp-cr__media img {
		transform: scale(1.06);
	}

	.pyp-cr__card:hover .pyp-cr__go {
		background: var(--pyp-forest);
		transform: rotate(45deg);
	}

	.pyp-cr .pyp-cr__enquire:hover {
		border-color: var(--pyp-green);
		background: var(--pyp-green);
		color: #fff;
	}
}

/* Cards arriving after a place or filter change: they rise in turn */
.pyp-cr__panel.is-entering .pyp-cr__card {
	animation: pyp-cr-in 600ms var(--pyp-ease-out) both;
	animation-delay: calc(var(--pyp-cr-n, 0) * 60ms);
}

@keyframes pyp-cr-in {
	from { opacity: 0; transform: translateY(18px) scale(0.98); }
	to   { opacity: 1; transform: none; }
}

/* Edge arrows: only for a mouse, shown while it is over the rail */
.pyp-cr__arrow {
	display: none;
}

@media (hover: hover) and (pointer: fine) {
	.pyp-cr .pyp-cr__rail {
		cursor: grab;
	}

	.pyp-cr.is-dragging .pyp-cr__rail {
		cursor: grabbing;
		user-select: none;
	}

	.pyp-cr.is-dragging .pyp-cr__rail,
	.pyp-cr.is-gliding .pyp-cr__rail {
		scroll-snap-type: none;
	}

	.pyp-cr.is-dragging .pyp-cr__card {
		pointer-events: none;
	}

	.pyp-cr__arrow {
		position: absolute;
		top: calc(50% - 8px);
		z-index: 4;
		display: grid;
		place-items: center;
		width: 48px;
		height: 48px;
		padding: 0;
		border: 1px solid rgba(255, 255, 255, 0.9);
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.82);
		-webkit-backdrop-filter: blur(14px) saturate(160%);
		backdrop-filter: blur(14px) saturate(160%);
		box-shadow: 0 14px 30px -14px rgba(15, 59, 39, 0.55);
		color: var(--pyp-forest);
		font-size: 18px;
		cursor: pointer;
		opacity: 0;
		pointer-events: none;
		transform: translateY(-50%) scale(0.86);
		transition: opacity 260ms var(--pyp-ease-out), transform 260ms var(--pyp-ease-out), background-color 160ms ease, color 160ms ease;
	}

	.pyp-cr__arrow--prev { left: -6px; }
	.pyp-cr__arrow--next { right: -6px; }

	.pyp-cr__stage:hover .pyp-cr__arrow,
	.pyp-cr__arrow:focus-visible {
		opacity: 1;
		pointer-events: auto;
		transform: translateY(-50%);
	}

	.pyp-cr__stage.is-start .pyp-cr__arrow--prev,
	.pyp-cr__stage.is-end .pyp-cr__arrow--next,
	.pyp-cr.is-dragging .pyp-cr__arrow {
		opacity: 0;
		pointer-events: none;
		transform: translateY(-50%) scale(0.86);
	}

	.pyp-cr__arrow:hover {
		background: var(--pyp-green);
		color: #fff;
	}

	.pyp-cr__arrow:focus-visible {
		outline: 2px solid var(--pyp-green);
		outline-offset: 3px;
	}
}

/* Reveal as the section scrolls in */
.pyp-cr.is-armed .pyp-cr__head,
.pyp-cr.is-armed .pyp-cr__places,
.pyp-cr.is-armed .pyp-cr__filters,
.pyp-cr.is-armed .pyp-cr__stage {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 700ms var(--pyp-ease-out), transform 800ms var(--pyp-ease-out);
}

.pyp-cr.is-armed .pyp-cr__places  { transition-delay: 100ms; }
.pyp-cr.is-armed .pyp-cr__filters { transition-delay: 160ms; }
.pyp-cr.is-armed .pyp-cr__stage   { transition-delay: 220ms; }

.pyp-cr.is-armed.is-in .pyp-cr__head,
.pyp-cr.is-armed.is-in .pyp-cr__places,
.pyp-cr.is-armed.is-in .pyp-cr__filters,
.pyp-cr.is-armed.is-in .pyp-cr__stage {
	opacity: 1;
	transform: none;
}

/* Tablet and up */
@media (min-width: 768px) {
	.pyp-cr__head {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		align-items: end;
		column-gap: 48px;
		margin-bottom: 24px;
	}

	.pyp-cr__intro {
		justify-self: end;
	}

	.pyp-cr .pyp-cr__lede {
		font-size: 16px;
	}

	.pyp-cr__places {
		width: min(100%, 640px);
	}

	.pyp-cr .pyp-cr__card {
		flex-basis: 340px;
	}
}

@media (min-width: 1200px) {
	.pyp-cr .pyp-cr__card {
		flex-basis: calc((100% - 3 * 18px) / 4);
	}

	.pyp-cr .pyp-cr__rail {
		gap: 18px;
	}
}

/* Phones: app sizing */
@media (max-width: 767.98px) {
	.pyp-cr {
		padding-block: 24px 14px;
	}

	.pyp-cr .pyp-cr__title {
		font-size: 24px;
	}

	.pyp-cr .pyp-cr__lede {
		font-size: 14px;
	}

	.pyp-cr .pyp-cr__place {
		flex-direction: column;
		gap: 6px;
		padding: 9px 4px;
		text-align: center;
	}

	.pyp-cr__place-icon {
		width: 26px;
		height: 26px;
	}

	.pyp-cr__place-name {
		font-size: 14.5px;
	}

	.pyp-cr__place-meta {
		display: none;
	}

	.pyp-cr .pyp-cr__card {
		flex-basis: min(78vw, 320px);
	}

	.pyp-cr .pyp-cr__name {
		font-size: 17px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pyp-cr__mandala,
	.pyp-cr__panel.is-entering .pyp-cr__card {
		animation: none;
	}

	.pyp-cr__thumb {
		transition: none;
	}

	.pyp-cr.is-armed .pyp-cr__head,
	.pyp-cr.is-armed .pyp-cr__places,
	.pyp-cr.is-armed .pyp-cr__filters,
	.pyp-cr.is-armed .pyp-cr__stage {
		transform: none;
		transition-property: opacity;
		transition-duration: 300ms;
	}

	.pyp-cr__card:hover {
		transform: none;
	}
}


/* Courses · finishing layer: jali and aurora, header figures, the batch
   strip, a light that follows the pointer across each card, and a line
   showing where the rail is */
.pyp-cr__jali {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: rgba(29, 112, 68, 0.06);
	stroke-width: 1;
	-webkit-mask-image: radial-gradient(90% 70% at 85% 10%, #000 20%, transparent 75%);
	mask-image: radial-gradient(90% 70% at 85% 10%, #000 20%, transparent 75%);
	pointer-events: none;
}

.pyp-cr__aurora {
	position: absolute;
	right: -10%;
	bottom: -20%;
	left: 20%;
	z-index: -1;
	height: 70%;
	background:
		radial-gradient(40% 60% at 30% 50%, rgba(156, 207, 104, 0.22), transparent 70%),
		radial-gradient(35% 55% at 75% 60%, rgba(29, 112, 68, 0.12), transparent 70%);
	filter: blur(30px);
	animation: pyp-cr-aurora 18s ease-in-out infinite alternate;
	pointer-events: none;
}

@keyframes pyp-cr-aurora {
	from { transform: translateX(-4%) scale(1); }
	to   { transform: translateX(4%) scale(1.08); }
}

.pyp-cr.is-offscreen .pyp-cr__aurora {
	animation-play-state: paused;
}

/* Header figures */
.pyp-cr .pyp-cr__stats {
	display: flex;
	gap: 0;
	margin: 18px 0 0;
}

.pyp-cr__stats div {
	padding: 0 22px;
	border-left: 1px solid rgba(15, 59, 39, 0.12);
}

.pyp-cr__stats div:first-child {
	padding-left: 0;
	border-left: 0;
}

.pyp-cr .pyp-cr__stats dt {
	margin: 5px 0 0;
	font: 600 10.5px/1 var(--pyp-font-sans);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pyp-ink-soft);
}

.pyp-cr__stats div {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas: "icon num" "icon label";
	column-gap: 12px;
	align-items: center;
}

.pyp-cr__stats .bi {
	grid-area: icon;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: linear-gradient(145deg, #2f8a4c, var(--pyp-forest));
	box-shadow: var(--pyp-glow-green);
	font-size: 17px;
	color: #fff;
}

.pyp-cr .pyp-cr__stats dt { grid-area: label; }
.pyp-cr .pyp-cr__stats dd { grid-area: num; }

.pyp-cr .pyp-cr__stats dd {
	margin: 0;
	font: 500 clamp(26px, 2.4vw, 34px)/1 var(--pyp-font-menu);
	letter-spacing: -0.02em;
	color: var(--pyp-forest);
	font-variant-numeric: tabular-nums;
}

.pyp-cr__stats small {
	margin: 0 6px;
	font: 400 14px/1 var(--pyp-font-sans);
	letter-spacing: 0;
	color: var(--pyp-ink-soft);
}

/* Toolbar: chips on the left, batch strip on the right */
.pyp-cr__toolbar {
	position: relative;
	z-index: 6; /* above the rail (its cards, arrows at 4), so a date menu opens over the cards */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	margin-top: 16px;
}

.pyp-cr__toolbar .pyp-cr__filters {
	flex: 1 1 auto;
	min-width: 0;
	margin-top: 0;
}

.pyp-cr .pyp-cr__batches {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 5px 5px 5px 14px;
	border: 1px solid rgba(255, 255, 255, 0.95);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.72);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	backdrop-filter: blur(14px) saturate(160%);
	box-shadow: inset 0 1px 0 #fff, 0 10px 24px -16px rgba(15, 59, 39, 0.4);
	font: 500 13px/1 var(--pyp-font-menu);
	color: var(--pyp-forest);
}

.pyp-cr__batches > .bi {
	font-size: 14px;
	color: var(--pyp-green);
}

.pyp-cr__batches-text {
	display: grid;
	margin-right: 4px;
}

.pyp-cr__batches-place {
	font: 400 11px/1.2 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
}

.pyp-cr__months {
	display: flex;
	gap: 6px;
}

/* each month is a button, styled like the programme chips: it opens the
   enquiry with this place and month already chosen */
.pyp-cr .pyp-cr__month {
	position: relative;
	display: inline-grid;
	place-items: center;
	height: 30px;
	padding: 0 12px;
	border: 1px solid rgba(15, 59, 39, 0.14);
	border-radius: 999px;
	background: #fff;
	font: 600 12.5px/1 var(--pyp-font-sans);
	color: var(--pyp-forest);
	text-decoration: none;
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 160ms var(--pyp-ease-out);
}

.pyp-cr__month:active {
	transform: scale(0.95);
}

.pyp-cr__month:focus-visible {
	outline: 2px solid var(--pyp-green);
	outline-offset: 2px;
}

@media (hover: hover) {
	.pyp-cr .pyp-cr__month:hover {
		border-color: var(--pyp-green);
		background: var(--pyp-green);
		color: #fff;
	}
}

/* the nearest batch: filled, with a live dot */
.pyp-cr .pyp-cr__month.is-next {
	padding-left: 23px;
	border-color: var(--pyp-green);
	background: var(--pyp-green);
	color: #fff;
}

.pyp-cr__month.is-next::before,
.pyp-cr__month.is-next::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 10px;
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-radius: 50%;
	background: #c8e6a0;
}

.pyp-cr__month.is-next::after {
	animation: pyp-cr-live 2.4s var(--pyp-ease-out) infinite;
}

/* A start date (Manage → Services → Dates & fees): the day, and under it what starts then.
   Several courses on one day open a small menu of them (home.js). */
.pyp-cr .pyp-cr__date {
	display: inline-grid;
	gap: 2px;
	height: auto;
	min-height: 38px;
	padding: 5px 13px;
	text-align: center;
	line-height: 1;
	cursor: pointer;
}

.pyp-cr .pyp-cr__date.is-next {
	padding-left: 24px;
}

.pyp-cr__date b {
	font: 650 13px/1.05 var(--pyp-font-sans);
	white-space: nowrap;
}

.pyp-cr__date small {
	font: 500 10.5px/1.1 var(--pyp-font-sans);
	opacity: 0.78;
	white-space: nowrap;
}

.pyp-cr__date-pick {
	position: relative;
}

.pyp-cr__date-pick > summary {
	list-style: none;
}

.pyp-cr__date-pick > summary::-webkit-details-marker {
	display: none;
}

.pyp-cr__date-pick[open] > summary {
	border-color: var(--pyp-green);
	background: var(--pyp-green);
	color: #fff;
}

/* The strip sits above its neighbours in the toolbar: on phones it moves visually above the
   programme chips, which come after it in the page and would otherwise paint over its menu. */
.pyp-cr .pyp-cr__batches:has(.pyp-cr__date-pick) {
	position: relative;
	z-index: 3;
}

/* Solid, not frosted: the strip's own blur makes a second one inside it show what is behind. */
.pyp-cr__date-menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 20;
	display: grid;
	gap: 2px;
	width: min(320px, 86vw);
	padding: 8px;
	border: 1px solid rgba(15, 59, 39, 0.1);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 59, 39, 0.06), 0 24px 48px -20px rgba(15, 59, 39, 0.45);
	transform-origin: top right;
	animation: pyp-cr-menu-in 180ms var(--pyp-ease-out);
}

@keyframes pyp-cr-menu-in {
	from { opacity: 0; transform: translateY(-4px) scale(0.97); }
}

.pyp-cr__date-head {
	padding: 4px 8px 6px;
	font: 600 10.5px/1.2 var(--pyp-font-sans);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pyp-green);
}

.pyp-cr__date-menu a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 12px;
	color: var(--pyp-forest);
	text-decoration: none;
	transition: background-color 160ms ease;
}

.pyp-cr__date-menu a:hover,
.pyp-cr__date-menu a:focus-visible {
	background: rgba(29, 112, 68, 0.08);
	color: var(--pyp-forest);
}

.pyp-cr__date-menu a > span {
	display: grid;
	flex: 1 1 auto;
	gap: 3px;
	min-width: 0;
}

.pyp-cr__date-menu b {
	font: 600 13.5px/1.25 var(--pyp-font-sans);
}

.pyp-cr__date-menu small {
	font: 400 11.5px/1.3 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
}

.pyp-cr__date-menu .bi {
	flex: none;
	font-size: 14px;
	color: var(--pyp-green);
}

@keyframes pyp-cr-live {
	0%   { opacity: 0.9; transform: scale(1); }
	70%  { opacity: 0; transform: scale(3); }
	100% { opacity: 0; transform: scale(3); }
}

/* Card: a light following the pointer, and a glowing gradient edge */
.pyp-cr__shine {
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: inherit;
	opacity: 0;
	pointer-events: none;
	transition: opacity 400ms ease;
}

.pyp-cr__shine::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(260px circle at var(--pyp-cr-mx, 50%) var(--pyp-cr-my, 0%), rgba(255, 255, 255, 0.22), transparent 60%);
}

/* the edge: a gradient ring drawn with a mask, brightest near the pointer */
.pyp-cr__shine::after {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1.5px;
	border-radius: inherit;
	background: radial-gradient(220px circle at var(--pyp-cr-mx, 50%) var(--pyp-cr-my, 0%), #9ccf68, rgba(29, 112, 68, 0.35) 45%, rgba(29, 112, 68, 0.08) 70%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

@media (hover: hover) {
	.pyp-cr__card:hover .pyp-cr__shine {
		opacity: 1;
	}
}

/* the photo melts into the card */
.pyp-cr__media::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	z-index: 1;
	height: 26%;
	background: linear-gradient(0deg, #fff, rgba(255, 255, 255, 0));
	pointer-events: none;
}

/* Rail progress */
.pyp-cr__progress {
	position: relative;
	display: block;
	width: min(100%, 220px);
	height: 3px;
	margin: 2px auto 0;
	overflow: hidden;
	border-radius: 3px;
	background: rgba(15, 59, 39, 0.1);
}

.pyp-cr__progress span {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: var(--pyp-cr-pw, 30%);
	border-radius: inherit;
	background: linear-gradient(90deg, var(--pyp-green), #9ccf68);
	transform: translateX(var(--pyp-cr-px, 0));
	transition: width 300ms var(--pyp-ease-out);
}

.pyp-cr__stage.is-fits .pyp-cr__progress {
	visibility: hidden;
}

/* Phones: the figures as three app tiles (icon and number side by side,
   label below); the batches as a card right under the place picker */
@media (max-width: 767.98px) {
	.pyp-cr .pyp-cr__stats {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr); /* "100 to 300" needs the room */
		gap: 8px;
		margin-top: 16px;
	}

	.pyp-cr__stats div,
	.pyp-cr__stats div:first-child {
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas: "icon num" "icon label"; /* the label sits under its number */
		align-items: center;
		justify-items: start;
		column-gap: 8px;
		row-gap: 0;
		padding: 10px 9px;
		border: 1px solid rgba(255, 255, 255, 0.95);
		border-radius: 16px;
		background: rgba(255, 255, 255, 0.78);
		-webkit-backdrop-filter: blur(14px) saturate(160%);
		backdrop-filter: blur(14px) saturate(160%);
		box-shadow: inset 0 1px 0 #fff, 0 12px 26px -20px rgba(15, 59, 39, 0.5);
	}

	.pyp-cr__stats .bi {
		width: 34px;
		height: 34px;
		margin: 0;
		border-radius: 10px;
		font-size: 15px;
	}

	.pyp-cr .pyp-cr__stats dd {
		align-self: end;
		font-size: clamp(15px, 4.4vw, 18px);
		white-space: nowrap;
	}

	.pyp-cr__stats small {
		margin: 0 2px;
		font-size: 10px;
	}

	.pyp-cr .pyp-cr__stats dt {
		align-self: start;
		margin-top: 4px;
		font-size: 8.5px;
		letter-spacing: 0.06em;
		white-space: nowrap;
	}

	/* small phones: a little tighter so every label stays whole */
	@media (max-width: 400px) {
		.pyp-cr .pyp-cr__stats {
			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr);
			gap: 6px;
		}

		.pyp-cr__stats div,
		.pyp-cr__stats div:first-child {
			column-gap: 6px;
			padding: 9px 7px;
		}

		.pyp-cr__stats .bi {
			width: 31px;
			height: 31px;
			border-radius: 9px;
			font-size: 14px;
		}

		.pyp-cr .pyp-cr__stats dd {
			font-size: 15px;
		}

		.pyp-cr .pyp-cr__stats dt {
			font-size: 8px;
			letter-spacing: 0.02em;
		}
	}

	/* the smallest phones */
	@media (max-width: 355px) {
		.pyp-cr__stats div,
		.pyp-cr__stats div:first-child {
			column-gap: 5px;
			padding: 8px 6px;
		}

		.pyp-cr__stats .bi {
			width: 24px;
			height: 24px;
			border-radius: 8px;
			font-size: 11px;
		}

		.pyp-cr .pyp-cr__stats dd {
			font-size: 14px;
		}

		.pyp-cr .pyp-cr__stats dt {
			font-size: 7.5px;
			letter-spacing: 0;
		}
	}

	.pyp-cr__toolbar {
		gap: 12px;
		margin-top: 12px;
	}

	.pyp-cr__toolbar .pyp-cr__filters {
		flex-basis: 100%;
	}

	/* batches: a card above the chips */
	.pyp-cr .pyp-cr__batches {
		order: -1;
		flex: 1 1 100%;
		gap: 12px;
		padding: 10px 10px 10px 10px;
		border-radius: 18px;
	}

	.pyp-cr__batches > .bi {
		display: grid;
		flex-shrink: 0;
		place-items: center;
		width: 38px;
		height: 38px;
		border-radius: 12px;
		background: linear-gradient(145deg, #2f8a4c, var(--pyp-forest));
		box-shadow: var(--pyp-glow-green);
		font-size: 16px;
		color: #fff;
	}

	.pyp-cr__batches-text {
		flex: 1 1 auto;
		gap: 3px;
		min-width: 0;
	}

	.pyp-cr__batches-label {
		font: 500 15px/1.1 var(--pyp-font-menu);
		color: var(--pyp-forest);
	}

	.pyp-cr__batches-place {
		font: 400 12px/1.2 var(--pyp-font-sans);
		color: var(--pyp-ink-soft);
	}

	.pyp-cr__months {
		flex-shrink: 0;
		gap: 5px;
	}

	.pyp-cr .pyp-cr__month {
		height: 32px;
		padding: 0 10px;
	}

	.pyp-cr .pyp-cr__month.is-next {
		padding-left: 21px;
	}

	/* Phones: the strip is a card. Icon and words on top; under them the three start dates as
	   equal tiles across the whole width; a date's menu opens full width under the card. */
	.pyp-cr .pyp-cr__batches {
		position: relative;
		display: grid;
		grid-template-columns: 38px minmax(0, 1fr);
		grid-template-areas:
			"icon text"
			"dates dates";
		align-items: center;
		gap: 10px 12px;
		padding: 10px;
	}

	.pyp-cr__batches > .bi {
		grid-area: icon;
	}

	.pyp-cr__batches-text {
		grid-area: text;
	}

	.pyp-cr__months {
		grid-area: dates;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 6px;
	}

	.pyp-cr .pyp-cr__month {
		width: 100%;
	}

	.pyp-cr .pyp-cr__date {
		min-height: 46px;
		height: auto;
		padding: 7px 6px;
		border-radius: 14px;
	}

	.pyp-cr .pyp-cr__date.is-next {
		padding-left: 6px;
	}

	/* the live dot moves to the corner, clear of the two lines */
	.pyp-cr__date.is-next::before,
	.pyp-cr__date.is-next::after {
		top: 8px;
		right: 8px;
		left: auto;
		margin-top: 0;
	}

	.pyp-cr__date b {
		font-size: 13.5px;
	}

	.pyp-cr__date small {
		font-size: 10px;
		line-height: 1.2;
		white-space: normal;
	}

	.pyp-cr__date-pick {
		position: static;
		display: block;
	}

	.pyp-cr__date-menu {
		left: 0;
		right: 0;
		width: auto;
		top: calc(100% + 6px);
		transform-origin: top center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pyp-cr__aurora,
	.pyp-cr__month.is-next::after {
		animation: none;
	}
}


/* ==========================================================================
   6. Growth and gratitude (.pyp-gr) · markup: file/home/counter.php
   One rectangular clay-and-glass panel: frosted, softly raised, lit along
   its inner edge. The six figures are open columns with hairline dividers;
   each illustration rests on a small clay tile, and a green bar draws in
   under the number while it counts up.
   ========================================================================== */

.pyp-gr {
	--pyp-saffron-deep: #d9822b;
	--pyp-gr-line: rgba(15, 59, 39, 0.12);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(24px, 2.6vw, 40px);
	background:
		radial-gradient(50% 70% at 15% 30%, rgba(156, 207, 104, 0.22), transparent 70%),
		radial-gradient(45% 60% at 90% 80%, rgba(29, 112, 68, 0.1), transparent 70%),
		linear-gradient(180deg, #f6f9f2 0%, #fff 100%);
}

/* a Sri Yantra, very faint, turning behind the panel */
.pyp-gr__yantra {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: -1;
	width: 720px;
	height: 720px;
	margin: -300px 0 0 -360px;
	color: var(--pyp-green);
	fill: currentColor;
	opacity: 0.035;
	animation: pyp-gr-turn 240s linear infinite;
	pointer-events: none;
}

@keyframes pyp-gr-turn {
	to { transform: rotate(360deg); }
}

.pyp-gr.is-offscreen .pyp-gr__yantra {
	animation-play-state: paused;
}

/* Heading */
.pyp-gr__head {
	display: grid;
	gap: 10px;
	margin-bottom: clamp(16px, 1.6vw, 22px);
}

.pyp-gr .pyp-gr__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	font: 600 11px/1 var(--pyp-font-sans);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pyp-green);
}

/* Om is a sacred symbol, so it alone takes the saffron */
.pyp-gr__om {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	color: var(--pyp-saffron-deep);
	fill: currentColor;
}

.pyp-gr .pyp-gr__title {
	margin: 0;
	font: 500 clamp(24px, 2.3vw, 36px)/1.1 var(--pyp-font-menu);
	letter-spacing: -0.015em;
	color: var(--pyp-forest);
	text-wrap: balance;
}

.pyp-gr__title em {
	font-style: normal;
	color: var(--pyp-green);
	background: linear-gradient(100deg, #12512f 0%, #1d7044 40%, #2f8a4c 70%, #4a9e45 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.pyp-gr .pyp-gr__lede {
	margin: 0;
	font: 400 15px/1.65 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
}

/* The panel: glass (frost, blur) and clay (raised, inner light and depth) */
.pyp-gr .pyp-gr__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	padding: 4px;
	list-style: none;
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: 22px;
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.5));
	-webkit-backdrop-filter: blur(18px) saturate(170%);
	backdrop-filter: blur(18px) saturate(170%);
	box-shadow:
		inset 0 1px 0 #fff,
		inset 6px 6px 16px rgba(255, 255, 255, 0.85),
		inset -8px -8px 18px rgba(29, 112, 68, 0.07),
		18px 22px 44px -22px rgba(15, 59, 39, 0.32),
		-10px -10px 30px -18px rgba(255, 255, 255, 0.95);
}

/* A figure: an open column; hairlines fade towards their ends */
.pyp-gr__item {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	/* Row 1: the illustration, with the number, its bar and the title stacked beside it.
	   Row 2: the description across the full width. */
	grid-template-areas: "tile figure" "tile bar" "tile label" "desc desc";
	grid-template-rows: auto auto auto 1fr; /* spare height goes under the text, so numbers line up */
	align-items: center;
	align-content: start;
	column-gap: 9px;
	padding: 14px 12px 16px;
	text-align: left;
}

.pyp-gr__item::before,
.pyp-gr__item::after {
	content: "";
	position: absolute;
	pointer-events: none;
}

/* vertical divider on the left */
.pyp-gr__item::before {
	top: 16%;
	bottom: 16%;
	left: 0;
	width: 1px;
	background: linear-gradient(180deg, transparent, var(--pyp-gr-line) 25%, var(--pyp-gr-line) 75%, transparent);
}

/* horizontal divider on top */
.pyp-gr__item::after {
	top: 0;
	right: 12%;
	left: 12%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--pyp-gr-line) 25%, var(--pyp-gr-line) 75%, transparent);
}

/* phones: two columns; no line before the first column, none above the first row */
.pyp-gr__item:nth-child(2n + 1)::before,
.pyp-gr__item:nth-child(-n + 2)::after {
	display: none;
}

/* the clay tile under each illustration: a soft raised rectangle */
.pyp-gr__tile {
	grid-area: tile;
	align-self: center;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 13px;
	background: linear-gradient(145deg, #ffffff, #eef5e7);
	box-shadow:
		8px 10px 20px -8px rgba(15, 59, 39, 0.25),
		-6px -6px 14px -4px rgba(255, 255, 255, 0.95),
		inset 3px 3px 6px rgba(255, 255, 255, 0.9),
		inset -3px -4px 8px rgba(29, 112, 68, 0.08);
	transition: transform 500ms var(--pyp-ease-out), box-shadow 500ms var(--pyp-ease-out);
}

.pyp-gr__tile img {
	width: 82%;
	height: 82%;
	object-fit: contain;
}

.pyp-gr .pyp-gr__figure {
	grid-area: figure;
	align-self: end;
	padding-top: 2px;
	margin: 0;
	font: 500 clamp(18px, 1.35vw, 22px)/1 var(--pyp-font-menu);
	letter-spacing: -0.02em;
	color: var(--pyp-forest);
	font-variant-numeric: tabular-nums;
}

/* the bar that draws in as the number counts */
.pyp-gr__bar {
	grid-area: bar;
	align-self: start;
	display: block;
	width: 18px;
	height: 2px;
	margin: 4px 0 0;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--pyp-green), #9ccf68);
	transform-origin: left;
}

.pyp-gr .pyp-gr__label {
	grid-area: label;
	align-self: start;
	display: -webkit-box;
	margin: 4px 0 0;
	overflow: hidden;
	font: 600 clamp(9px, 0.66vw, 10px)/1.3 var(--pyp-font-sans);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pyp-green);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2; /* phones: a long title wraps once beside the illustration, never more */
}

/* tablet and desktop columns are wide enough: titles stay on one line */
@media (min-width: 768px) {
	.pyp-gr .pyp-gr__label {
		display: block;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}

.pyp-gr .pyp-gr__desc {
	grid-area: desc;
	align-self: start;
	margin: 10px 0 0;
	font: 400 12px/1.5 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
	text-wrap: pretty;
}

@media (hover: hover) {
	.pyp-gr__item:hover .pyp-gr__tile {
		transform: translateY(-4px);
		box-shadow:
			10px 14px 26px -8px rgba(15, 59, 39, 0.3),
			-6px -6px 14px -4px rgba(255, 255, 255, 0.95),
			inset 3px 3px 6px rgba(255, 255, 255, 0.9),
			inset -3px -4px 8px rgba(29, 112, 68, 0.08);
	}
}

/* Footer line */
.pyp-gr .pyp-gr__foot {
	margin: clamp(14px, 1.6vw, 20px) 0 0;
	font: 400 14px/1.6 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
	text-align: center;
}

.pyp-gr .pyp-gr__foot a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-bottom: 3px;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	font: 500 15px/1 var(--pyp-font-menu);
	color: var(--pyp-green);
	text-decoration: none;
	transition: background-size 300ms var(--pyp-ease-out);
}

.pyp-gr__foot .bi {
	font-size: 13px;
	transition: transform 200ms var(--pyp-ease-out);
}

@media (hover: hover) {
	.pyp-gr .pyp-gr__foot a:hover {
		color: var(--pyp-green-hover);
		background-size: 100% 1px;
	}

	.pyp-gr__foot a:hover .bi {
		transform: translateX(3px);
	}
}

/* Entrance: the panel settles, the figures rise in turn, the bars draw */
.pyp-gr.is-armed .pyp-gr__list {
	opacity: 0;
	transform: translateY(18px) scale(0.985);
	transition: opacity 800ms var(--pyp-ease-out), transform 900ms var(--pyp-ease-out);
}

.pyp-gr.is-armed .pyp-gr__item {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 900ms var(--pyp-ease-out), transform 1100ms var(--pyp-ease-out);
	transition-delay: calc(var(--pyp-gr-i) * 110ms + 150ms);
}

.pyp-gr.is-armed .pyp-gr__bar {
	transform: scaleX(0);
	transition: transform 1400ms var(--pyp-ease-out);
	transition-delay: calc(var(--pyp-gr-i) * 90ms + 350ms);
}

.pyp-gr.is-armed.is-in .pyp-gr__list,
.pyp-gr.is-armed.is-in .pyp-gr__item,
.pyp-gr.is-armed.is-in .pyp-gr__bar {
	opacity: 1;
	transform: none;
}

/* Phones: an app info strip (as in the App Store): the same panel scrolls
   sideways inside itself, figures between vertical dividers, the far edge
   fading out to show there is more */
@media (max-width: 767.98px) {
	.pyp-gr {
		padding-block: 22px 24px;
	}

	.pyp-gr .pyp-gr__title {
		font-size: 24px;
	}

	.pyp-gr .pyp-gr__lede {
		font-size: 14px;
	}

	.pyp-gr .pyp-gr__list {
		display: flex;
		padding: 2px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		border-radius: 20px;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 2px;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
		mask-image: linear-gradient(90deg, #000 85%, transparent);
		transition: -webkit-mask-image 300ms ease;
	}

	.pyp-gr .pyp-gr__list::-webkit-scrollbar {
		display: none;
	}

	.pyp-gr.is-end .pyp-gr__list {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.pyp-gr__item {
		flex: 0 0 max(64%, 232px);
		padding: 14px 14px 16px;
		scroll-snap-align: start;
	}

	/* vertical dividers only */
	.pyp-gr__item:nth-child(2n + 1)::before {
		display: block;
	}

	.pyp-gr__item:first-child::before,
	.pyp-gr__item::after {
		display: none;
	}

	.pyp-gr__tile {
		width: 42px;
		height: 42px;
		border-radius: 12px;
	}

	.pyp-gr .pyp-gr__figure {
		font-size: 19px;
	}

	.pyp-gr .pyp-gr__label {
		display: block;
		font-size: 9.5px;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.pyp-gr .pyp-gr__desc {
		font-size: 12px;
	}

	.pyp-gr .pyp-gr__foot {
		font-size: 13px;
	}
}

/* Tablet: three columns in two rows */
@media (min-width: 768px) {
	.pyp-gr__head {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
		align-items: end;
		column-gap: 48px;
	}

	.pyp-gr .pyp-gr__lede {
		justify-self: end;
		font-size: 16px;
	}

	.pyp-gr .pyp-gr__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		padding: 6px;
		border-radius: 24px;
	}

	.pyp-gr__item {
		padding: 16px 18px;
	}

	.pyp-gr__item:nth-child(2n + 1)::before,
	.pyp-gr__item:nth-child(-n + 2)::after {
		display: block;
	}

	.pyp-gr__item:nth-child(3n + 1)::before,
	.pyp-gr__item:nth-child(-n + 3)::after {
		display: none;
	}

}

/* Desktop: all six in one row, vertical dividers only */
@media (min-width: 1340px) { /* six across once each title fits on one line beside its illustration */
	.pyp-gr .pyp-gr__list {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.pyp-gr__item {
		padding: 16px 14px;
	}


	.pyp-gr__item:nth-child(3n + 1)::before {
		display: block;
	}

	.pyp-gr__item:first-child::before,
	.pyp-gr__item::after {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pyp-gr__yantra {
		animation: none;
	}

	.pyp-gr.is-armed .pyp-gr__list,
	.pyp-gr.is-armed .pyp-gr__item {
		transform: none;
		transition-property: opacity;
		transition-duration: 300ms;
	}

	.pyp-gr.is-armed .pyp-gr__bar {
		transform: none;
		transition: none;
	}

	.pyp-gr__item:hover .pyp-gr__tile {
		transform: none;
	}
}


/* 7. Student stories (.pyp-ts): shared with the contact page, so it lives in core.css (§7) */


/* ==========================================================================
   8. Locations and upcoming batches (.pyp-up) · markup: file/home/upcoming-courses.php
   Light and open: one clay-and-glass card per location. The photo shows the
   place, with its name and next batch on it; below, a compact one-line list
   of upcoming courses and the batch months to enquire for.
   ========================================================================== */

.pyp-up {
	--pyp-saffron-deep: #d9822b;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(30px, 3.6vw, 56px);
	background:
		radial-gradient(50% 70% at 90% 0%, rgba(156, 207, 104, 0.2), transparent 70%),
		linear-gradient(180deg, #f6f9f2 0%, #fff 100%);
}

.pyp-up__mandala {
	position: absolute;
	top: -220px;
	right: -200px;
	z-index: -1;
	width: 600px;
	height: 600px;
	color: rgba(29, 112, 68, 0.05);
	fill: currentColor;
	animation: pyp-up-turn 220s linear infinite;
	pointer-events: none;
}

@keyframes pyp-up-turn {
	to { transform: rotate(360deg); }
}

.pyp-up.is-offscreen .pyp-up__mandala {
	animation-play-state: paused;
}

/* Heading */
.pyp-up__head {
	display: grid;
	gap: 10px;
	margin-bottom: clamp(18px, 2vw, 28px);
}

.pyp-up .pyp-up__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	font: 600 11px/1 var(--pyp-font-sans);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pyp-green);
}

/* Om is a sacred symbol, so it alone takes the saffron */
.pyp-up__om {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	color: var(--pyp-saffron-deep);
	fill: currentColor;
}

.pyp-up .pyp-up__title {
	margin: 0;
	font: 500 clamp(24px, 2.6vw, 40px)/1.12 var(--pyp-font-menu);
	letter-spacing: -0.015em;
	color: var(--pyp-forest);
	text-wrap: balance;
}

.pyp-up__title em {
	font-style: normal;
	color: var(--pyp-green);
	background: linear-gradient(100deg, #12512f 0%, #1d7044 40%, #2f8a4c 70%, #4a9e45 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.pyp-up .pyp-up__lede {
	margin: 0;
	font: 400 15px/1.65 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
	text-wrap: pretty;
}

/* Cards: a swipe rail until there is room for all three */
.pyp-up .pyp-up__list {
	display: flex;
	gap: 14px;
	margin: 0 calc(-1 * var(--pyp-gutter));
	padding: 4px var(--pyp-gutter) 14px;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--pyp-gutter);
	scrollbar-width: none;
}

.pyp-up__list::-webkit-scrollbar {
	display: none;
}

.pyp-up .pyp-up__card {
	display: flex;
	flex: 0 0 min(84vw, 380px);
	flex-direction: column;
	margin: 0;
	padding: 6px;
	border: 1px solid rgba(255, 255, 255, 0.95);
	border-radius: 24px;
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.62));
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	backdrop-filter: blur(16px) saturate(160%);
	box-shadow:
		inset 0 1px 0 #fff,
		inset -6px -6px 14px rgba(29, 112, 68, 0.05),
		14px 18px 36px -22px rgba(15, 59, 39, 0.35);
	scroll-snap-align: start;
	transition: transform 450ms var(--pyp-ease-out), box-shadow 450ms var(--pyp-ease-out);
}

/* The photo, with the place and its next batch on it */
.pyp-up__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 19px;
	background: var(--pyp-mist);
}

.pyp-up__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 58%;
	transition: transform 1200ms var(--pyp-ease-out);
}

.pyp-up__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(6, 28, 17, 0.3) 0%, rgba(6, 28, 17, 0) 28%, rgba(6, 28, 17, 0) 55%, rgba(6, 28, 17, 0.62) 100%);
	pointer-events: none;
}

.pyp-up__next {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 28px;
	padding: 0 12px 0 10px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	background: rgba(6, 28, 17, 0.35);
	-webkit-backdrop-filter: blur(10px) saturate(150%);
	backdrop-filter: blur(10px) saturate(150%);
	font: 600 11.5px/1 var(--pyp-font-sans);
	color: #fff;
}

.pyp-up__live {
	position: relative;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #9ccf68;
}

.pyp-up__live::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: #9ccf68;
	animation: pyp-up-live 2.4s var(--pyp-ease-out) infinite;
}

@keyframes pyp-up-live {
	0%   { opacity: 0.9; transform: scale(1); }
	70%  { opacity: 0; transform: scale(3); }
	100% { opacity: 0; transform: scale(3); }
}

.pyp-up__place {
	position: absolute;
	right: 16px;
	bottom: 14px;
	left: 16px;
	z-index: 1;
	color: #fff;
}

.pyp-up .pyp-up__city {
	margin: 0;
	font: 500 26px/1 var(--pyp-font-menu);
	letter-spacing: -0.015em;
	color: #fff;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
}

.pyp-up .pyp-up__meta {
	margin: 5px 0 0;
	font: 600 10px/1.2 var(--pyp-font-sans);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #e4f3cf;
}

/* Courses: a segmented picker, one course shown at a time */
.pyp-up__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 12px 6px 6px;
}

.pyp-up__options {
	display: grid;
	grid-auto-columns: 1fr;
	grid-auto-flow: column;
	gap: 3px;
	padding: 4px;
	border-radius: 14px;
	background: rgba(29, 112, 68, 0.08);
	box-shadow: inset 0 1px 3px rgba(15, 59, 39, 0.08);
}

.pyp-up .pyp-up__opt {
	height: 34px;
	padding: 0 4px;
	border: 0;
	border-radius: 10px;
	background: none;
	font: 600 14px/1 var(--pyp-font-menu);
	color: var(--pyp-ink-soft);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 250ms ease, color 250ms ease, box-shadow 250ms ease;
	-webkit-tap-highlight-color: transparent;
}

.pyp-up__opt small {
	font: 600 10px/1 var(--pyp-font-sans);
}

.pyp-up .pyp-up__opt[aria-selected="true"] {
	background: #fff;
	color: var(--pyp-green);
	box-shadow: 0 1px 2px rgba(15, 59, 39, 0.08), 0 6px 14px -6px rgba(15, 59, 39, 0.35);
}

.pyp-up__opt:focus-visible {
	outline: 2px solid var(--pyp-green);
	outline-offset: 1px;
}

@media (hover: hover) {
	.pyp-up .pyp-up__opt[aria-selected="false"]:hover {
		color: var(--pyp-forest);
	}
}

/* the chosen course */
.pyp-up .pyp-up__detail {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 10px;
	padding: 12px 10px 12px 14px;
	border: 1px solid rgba(255, 255, 255, 0.95);
	border-radius: 16px;
	background: linear-gradient(145deg, #ffffff, #f1f6ec);
	box-shadow:
		6px 8px 16px -10px rgba(15, 59, 39, 0.3),
		inset -2px -3px 6px rgba(29, 112, 68, 0.06);
	color: var(--pyp-forest);
	text-decoration: none;
	animation: pyp-up-swap 420ms var(--pyp-ease-out);
	transition: box-shadow 220ms ease;
}

.pyp-up__detail[hidden] {
	display: none;
}

@keyframes pyp-up-swap {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

.pyp-up__detail-text {
	display: grid;
	flex: 1 1 auto;
	gap: 6px;
	min-width: 0;
}

.pyp-up__detail-name {
	font: 500 15px/1.25 var(--pyp-font-menu);
	color: var(--pyp-forest);
}

.pyp-up__detail-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	font: 400 12px/1 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
}

.pyp-up__detail-meta span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}

.pyp-up__detail-meta .bi {
	font-size: 11px;
	color: var(--pyp-green);
}

.pyp-up__detail-price {
	display: grid;
	flex-shrink: 0;
	gap: 3px;
	font: 600 19px/1 var(--pyp-font-menu);
	color: var(--pyp-forest);
	text-align: right;
}

.pyp-up__detail-price small {
	font: 600 9.5px/1 var(--pyp-font-sans);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pyp-ink-soft);
}

.pyp-up__detail-go {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--pyp-green);
	box-shadow: var(--pyp-glow-green);
	font-size: 14px;
	color: #fff;
	transition: transform 300ms var(--pyp-ease-out), background-color 200ms ease;
}

.pyp-up__detail:active {
	transform: scale(0.98);
}

.pyp-up__detail:focus-visible {
	outline: 2px solid var(--pyp-green);
	outline-offset: 2px;
}

@media (hover: hover) {
	.pyp-up__card:hover {
		transform: translateY(-5px);
		box-shadow:
			inset 0 1px 0 #fff,
			inset -6px -6px 14px rgba(29, 112, 68, 0.05),
			18px 26px 44px -22px rgba(15, 59, 39, 0.45);
	}

	.pyp-up__card:hover .pyp-up__photo {
		transform: scale(1.05);
	}

	.pyp-up .pyp-up__detail:hover {
		color: var(--pyp-forest);
		box-shadow:
			8px 12px 22px -10px rgba(15, 59, 39, 0.4),
			inset -2px -3px 6px rgba(29, 112, 68, 0.06);
	}

	.pyp-up__detail:hover .pyp-up__detail-go {
		background: var(--pyp-forest);
		transform: rotate(45deg);
	}
}

/* Reveal: the cards rise in turn */
.pyp-up.is-armed .pyp-up__head,
.pyp-up.is-armed .pyp-up__card {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 800ms var(--pyp-ease-out), transform 1000ms var(--pyp-ease-out), box-shadow 450ms var(--pyp-ease-out);
}

.pyp-up.is-armed .pyp-up__card {
	transition-delay: calc(var(--pyp-up-i) * 110ms + 150ms);
}

.pyp-up.is-armed.is-in .pyp-up__head,
.pyp-up.is-armed.is-in .pyp-up__card {
	opacity: 1;
	transform: none;
}

@media (hover: hover) {
	.pyp-up.is-armed.is-in .pyp-up__card:hover {
		transform: translateY(-5px);
		transition-delay: 0s;
	}
}

@media (min-width: 768px) {
	.pyp-up__head {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		align-items: end;
		column-gap: 48px;
	}

	.pyp-up .pyp-up__lede {
		justify-self: end;
		font-size: 16px;
	}
}

/* Desktop: the three side by side */
@media (min-width: 1200px) {
	.pyp-up .pyp-up__list {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
		gap: clamp(14px, 1.4vw, 22px);
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	.pyp-up__media {
		aspect-ratio: 16 / 10;
	}
}

@media (max-width: 767.98px) {
	.pyp-up {
		padding-block: 24px 22px;
	}

	.pyp-up .pyp-up__title {
		font-size: 23px;
	}

	.pyp-up .pyp-up__lede {
		font-size: 14px;
	}

	.pyp-up__card:active {
		transform: scale(0.99);
	}

}

/* small phones: the strip a little tighter */
@media (max-width: 380px) {
	.pyp-up .pyp-up__detail {
		gap: 9px;
		padding-left: 12px;
	}

	.pyp-up__detail-name {
		font-size: 14px;
	}

	.pyp-up__detail-price {
		font-size: 17px;
	}

	.pyp-up .pyp-up__opt {
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pyp-up__mandala,
	.pyp-up__live::after,
	.pyp-up .pyp-up__detail {
		animation: none;
	}

	.pyp-up.is-armed .pyp-up__head,
	.pyp-up.is-armed .pyp-up__card {
		transform: none;
		transition-property: opacity;
		transition-duration: 300ms;
	}

	.pyp-up__card:hover,
	.pyp-up__card:hover .pyp-up__photo {
		transform: none;
	}
}

@media (prefers-reduced-transparency: reduce) {
	.pyp-up .pyp-up__card,
	.pyp-up__next {
		background: #fff;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.pyp-up__next {
		background: rgba(6, 28, 17, 0.85);
	}
}


/* ==========================================================================
   9. Questions (.pyp-fq) · markup: file/home/faq.php, behaviour: home.js
   A clay-and-glass accordion (one answer open at a time) beside the
   teachers seated in namaste on a soft green arch, and a glass card to
   reach the school directly.
   ========================================================================== */

.pyp-fq {
	--pyp-saffron-deep: #d9822b;
	--pyp-fq-arch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 130' preserveAspectRatio='none'%3E%3Cpath d='M0 130V46C0 30 20 22 34 14C42 9 47 5 50 0C53 5 58 9 66 14C80 22 100 30 100 46V130Z'/%3E%3C/svg%3E");
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(24px, 2.8vw, 44px);
	background: linear-gradient(160deg, #f3f8ee 0%, #e9f2e0 55%, #f6f9f2 100%);
}

/* soft green light for the glass to catch */
.pyp-fq__glow {
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	filter: blur(60px);
	pointer-events: none;
}

.pyp-fq__glow--a {
	top: 10%;
	left: 8%;
	width: 42%;
	height: 70%;
	background: rgba(156, 207, 104, 0.42);
	animation: pyp-fq-drift 16s ease-in-out infinite alternate;
}

.pyp-fq__glow--b {
	right: 4%;
	bottom: -10%;
	width: 38%;
	height: 75%;
	background: rgba(47, 138, 76, 0.22);
	animation: pyp-fq-drift 20s ease-in-out infinite alternate-reverse;
}

@keyframes pyp-fq-drift {
	from { transform: translate(0, 0) scale(1); }
	to   { transform: translate(4%, -6%) scale(1.08); }
}

.pyp-fq.is-offscreen .pyp-fq__glow {
	animation-play-state: paused;
}

.pyp-fq__mandala {
	position: absolute;
	top: -120px;
	left: -160px;
	z-index: -1;
	width: 460px;
	height: 460px;
	color: var(--pyp-green);
	fill: currentColor;
	opacity: 0.04;
	animation: pyp-fq-turn 240s linear infinite;
	pointer-events: none;
}

@keyframes pyp-fq-turn {
	to { transform: rotate(360deg); }
}

.pyp-fq.is-offscreen .pyp-fq__mandala {
	animation-play-state: paused;
}

.pyp-fq__grid {
	display: grid;
	gap: 24px;
}

/* Heading */
.pyp-fq__head {
	margin-bottom: clamp(12px, 1.4vw, 18px);
}

.pyp-fq .pyp-fq__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	font: 600 11px/1 var(--pyp-font-sans);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pyp-green);
}

/* Om is a sacred symbol, so it alone takes the saffron */
.pyp-fq__om {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	color: var(--pyp-saffron-deep);
	fill: currentColor;
}

.pyp-fq .pyp-fq__title {
	margin: 0;
	font: 500 clamp(24px, 2.5vw, 38px)/1.1 var(--pyp-font-menu);
	letter-spacing: -0.015em;
	color: var(--pyp-forest);
	text-wrap: balance;
}

.pyp-fq__title em {
	font-style: normal;
	color: var(--pyp-green);
	background: linear-gradient(100deg, #12512f 0%, #1d7044 40%, #2f8a4c 70%, #4a9e45 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.pyp-fq .pyp-fq__lede {
	margin: 6px 0 0;
	font: 400 14.5px/1.55 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
}

/* Accordion: frosted glass, hairlines between questions */
.pyp-fq__list {
	padding: 2px 6px;
	border: 1px solid rgba(255, 255, 255, 0.65);
	border-radius: 22px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.22));
	-webkit-backdrop-filter: blur(22px) saturate(180%);
	backdrop-filter: blur(22px) saturate(180%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(255, 255, 255, 0.25), 0 10px 30px -18px rgba(15, 59, 39, 0.25);
}

.pyp-fq__item + .pyp-fq__item {
	border-top: 1px solid rgba(255, 255, 255, 0.7);
}

.pyp-fq .pyp-fq__q {
	margin: 0;
	font: inherit;
}

.pyp-fq .pyp-fq__toggle {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 12px 10px;
	border: 0;
	border-radius: 16px;
	background: none;
	color: var(--pyp-forest);
	text-align: left;
	cursor: pointer;
	transition: background-color 200ms ease;
	-webkit-tap-highlight-color: transparent;
}

.pyp-fq__num {
	flex-shrink: 0;
	font: 600 12px/1 var(--pyp-font-menu);
	letter-spacing: 0.06em;
	color: #4a9e45;
}

.pyp-fq__q-text {
	flex: 1 1 auto;
	font: 500 15px/1.35 var(--pyp-font-menu);
	text-wrap: pretty;
}

/* plus that turns into a minus */
.pyp-fq__plus {
	position: relative;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.6);
	transition: background-color 300ms ease, transform 400ms var(--pyp-ease-out);
}

.pyp-fq__plus::before,
.pyp-fq__plus::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 11px;
	height: 1.75px;
	margin: -0.875px 0 0 -5.5px;
	border-radius: 2px;
	background: var(--pyp-green);
	transition: transform 400ms var(--pyp-ease-out), background-color 300ms ease;
}

.pyp-fq__plus::after {
	transform: rotate(90deg);
}

.pyp-fq__item.is-open .pyp-fq__plus {
	background: var(--pyp-green);
	transform: rotate(180deg);
}

.pyp-fq__item.is-open .pyp-fq__plus::before,
.pyp-fq__item.is-open .pyp-fq__plus::after {
	background: #fff;
}

.pyp-fq__item.is-open .pyp-fq__plus::after {
	transform: rotate(0deg);
}

/* answer: grid rows 0fr → 1fr animates the height */
.pyp-fq__a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 450ms var(--pyp-ease-out);
}

.pyp-fq__item.is-open .pyp-fq__a {
	grid-template-rows: 1fr;
}

.pyp-fq__a-inner {
	min-height: 0;
	overflow: hidden;
}

.pyp-fq .pyp-fq__a p {
	margin: 0;
	padding: 0 48px 14px 34px;
	font: 400 14px/1.6 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 300ms ease, transform 400ms var(--pyp-ease-out);
	text-wrap: pretty;
}

.pyp-fq__item.is-open .pyp-fq__a p {
	opacity: 1;
	transform: none;
	transition-delay: 100ms;
}

.pyp-fq__toggle:focus-visible {
	outline: 2px solid var(--pyp-green);
	outline-offset: -2px;
}

@media (hover: hover) {
	.pyp-fq .pyp-fq__toggle:hover {
		background: rgba(255, 255, 255, 0.35);
		color: var(--pyp-forest);
	}

	.pyp-fq__item:not(.is-open) .pyp-fq__toggle:hover .pyp-fq__plus {
		background: rgba(29, 112, 68, 0.16);
	}
}

/* Side: the teachers on a green arch, and the help card */
.pyp-fq__side {
	position: relative;
	display: flex;
	flex-direction: column;
}

.pyp-fq__stage {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	aspect-ratio: 760 / 500;
}

.pyp-fq__arch {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 62%;
	height: 96%;
	transform: translateX(-50%);
	background:
		radial-gradient(90% 60% at 50% 100%, rgba(156, 207, 104, 0.45), transparent 65%),
		linear-gradient(180deg, #e8f2df 0%, #cfe5bc 100%);
	-webkit-mask: var(--pyp-fq-arch) center / 100% 100% no-repeat;
	mask: var(--pyp-fq-arch) center / 100% 100% no-repeat;
}

.pyp-fq__group {
	position: relative;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 18px 24px rgba(15, 59, 39, 0.18));
}

.pyp-fq__help {
	position: relative;
	z-index: 1;
	margin: -70px 4% 0; /* frosted over the teachers' laps */
	padding: 14px 16px 16px;
	border: 1px solid rgba(255, 255, 255, 0.65);
	border-radius: 20px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2));
	-webkit-backdrop-filter: blur(22px) saturate(180%);
	backdrop-filter: blur(22px) saturate(180%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(255, 255, 255, 0.25), 0 14px 34px -18px rgba(15, 59, 39, 0.3);
}

.pyp-fq .pyp-fq__help-title {
	margin: 0 0 3px;
	font: 500 17px/1.2 var(--pyp-font-menu);
	color: var(--pyp-forest);
}

.pyp-fq .pyp-fq__help-text {
	margin: 0 0 11px;
	font: 400 13px/1.5 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
}

.pyp-fq__help-actions {
	display: grid;
	grid-template-columns: 1fr 1fr 1.2fr;
	gap: 8px;
}

.pyp-fq .pyp-fq__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	height: 40px;
	padding: 0 12px;
	border-radius: 13px;
	font: 500 14.5px/1 var(--pyp-font-menu);
	text-decoration: none;
	white-space: nowrap;
	transition: transform 160ms var(--pyp-ease-out), background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.pyp-fq .pyp-fq__btn--wa,
.pyp-fq .pyp-fq__btn--call {
	border: 1px solid rgba(255, 255, 255, 0.8);
	background: rgba(255, 255, 255, 0.55);
	color: var(--pyp-forest);
}

.pyp-fq__btn--wa .bi,
.pyp-fq__btn--call .bi {
	font-size: 15px;
	color: var(--pyp-green);
}

.pyp-fq .pyp-fq__btn--enq {
	background: linear-gradient(135deg, #23824f, var(--pyp-forest));
	box-shadow: 0 12px 22px -12px rgba(15, 59, 39, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.18);
	color: #fff;
}

.pyp-fq__btn .bi-arrow-right {
	transition: transform 200ms var(--pyp-ease-out);
}

.pyp-fq__btn:active {
	transform: scale(0.97);
}

.pyp-fq__btn:focus-visible {
	outline: 2px solid var(--pyp-green);
	outline-offset: 2px;
}

@media (hover: hover) {
	.pyp-fq .pyp-fq__btn--wa:hover,
	.pyp-fq .pyp-fq__btn--call:hover {
		border-color: var(--pyp-green);
		color: var(--pyp-green);
	}

	.pyp-fq .pyp-fq__btn--enq:hover {
		color: #fff;
	}

	.pyp-fq__btn--enq:hover .bi-arrow-right {
		transform: translateX(3px);
	}
}

/* Reveal */
.pyp-fq.is-armed .pyp-fq__head,
.pyp-fq.is-armed .pyp-fq__list,
.pyp-fq.is-armed .pyp-fq__stage,
.pyp-fq.is-armed .pyp-fq__help {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 800ms var(--pyp-ease-out), transform 900ms var(--pyp-ease-out);
}

.pyp-fq.is-armed .pyp-fq__list  { transition-delay: 120ms; }
.pyp-fq.is-armed .pyp-fq__stage { transition-delay: 200ms; }
.pyp-fq.is-armed .pyp-fq__help  { transition-delay: 320ms; }

.pyp-fq.is-armed.is-in .pyp-fq__head,
.pyp-fq.is-armed.is-in .pyp-fq__list,
.pyp-fq.is-armed.is-in .pyp-fq__stage,
.pyp-fq.is-armed.is-in .pyp-fq__help {
	opacity: 1;
	transform: none;
}

/* Desktop: accordion left, the teachers and the card right */
@media (min-width: 992px) {
	.pyp-fq__grid {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
		align-items: center;
		column-gap: clamp(32px, 4vw, 72px);
	}
}

/* Phones: no picture, the help card right after the answers */
@media (max-width: 767.98px) {
	.pyp-fq {
		padding-block: 22px 24px;
	}

	.pyp-fq__grid {
		gap: 14px;
	}

	.pyp-fq .pyp-fq__title {
		font-size: 24px;
	}

	.pyp-fq .pyp-fq__lede {
		font-size: 14px;
	}

	.pyp-fq__list {
		padding: 2px 4px;
		border-radius: 20px;
	}

	.pyp-fq .pyp-fq__toggle {
		gap: 10px;
		padding: 11px 6px;
	}

	.pyp-fq__q-text {
		font-size: 14px;
	}

	.pyp-fq__plus {
		width: 28px;
		height: 28px;
	}

	.pyp-fq .pyp-fq__a p {
		padding: 0 8px 16px 30px;
		font-size: 14px;
	}

	.pyp-fq__stage {
		display: none;
	}

	.pyp-fq__help {
		margin: 0;
		padding: 14px;
		border-radius: 20px;
	}

	.pyp-fq .pyp-fq__btn {
		height: 42px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pyp-fq__glow,
	.pyp-fq__mandala {
		animation: none;
	}

	.pyp-fq__a,
	.pyp-fq .pyp-fq__a p,
	.pyp-fq__plus,
	.pyp-fq__plus::before,
	.pyp-fq__plus::after {
		transition: none;
	}

	.pyp-fq.is-armed .pyp-fq__head,
	.pyp-fq.is-armed .pyp-fq__list,
	.pyp-fq.is-armed .pyp-fq__stage,
	.pyp-fq.is-armed .pyp-fq__help {
		transform: none;
		transition-property: opacity;
		transition-duration: 300ms;
	}
}

@media (prefers-reduced-transparency: reduce) {
	.pyp-fq__list,
	.pyp-fq__help {
		background: #fff;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}


/* ==========================================================================
   10. Our gurus (.pyp-gu) · markup: file/home/guru.php, behaviour: home.js
   Glass cards on a rail: each teacher seated in meditation against the
   Himalaya, then name, speciality and two tags. Desktop drags with edge
   arrows on hover; phones swipe.
   ========================================================================== */

.pyp-gu {
	--pyp-saffron-deep: #d9822b;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(26px, 3vw, 48px);
	background:
		radial-gradient(45% 60% at 10% 20%, rgba(156, 207, 104, 0.18), transparent 70%),
		linear-gradient(180deg, #fff 0%, #f6f9f2 100%);
}

/* Heading */
.pyp-gu__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: clamp(14px, 1.6vw, 22px);
}

.pyp-gu .pyp-gu__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	font: 600 11px/1 var(--pyp-font-sans);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pyp-green);
}

/* Om is a sacred symbol, so it alone takes the saffron */
.pyp-gu__om {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	color: var(--pyp-saffron-deep);
	fill: currentColor;
}

.pyp-gu .pyp-gu__title {
	margin: 0;
	font: 500 clamp(24px, 2.6vw, 40px)/1.12 var(--pyp-font-menu);
	letter-spacing: -0.015em;
	color: var(--pyp-forest);
	text-wrap: balance;
}

.pyp-gu__title em {
	font-style: normal;
	color: var(--pyp-green);
	background: linear-gradient(100deg, #12512f 0%, #1d7044 40%, #2f8a4c 70%, #4a9e45 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.pyp-gu .pyp-gu__all {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	font: 500 15px/1 var(--pyp-font-menu);
	color: var(--pyp-green);
	text-decoration: none;
}

.pyp-gu__all span {
	padding-bottom: 3px;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size 300ms var(--pyp-ease-out);
}

.pyp-gu__all .bi {
	font-size: 13px;
	transition: transform 200ms var(--pyp-ease-out);
}

@media (hover: hover) {
	.pyp-gu .pyp-gu__all:hover {
		color: var(--pyp-green-hover);
	}

	.pyp-gu__all:hover span {
		background-size: 100% 1px;
	}

	.pyp-gu__all:hover .bi {
		transform: translateX(3px);
	}
}

/* Rail */
.pyp-gu__stage {
	position: relative;
}

.pyp-gu .pyp-gu__rail {
	display: flex;
	gap: 14px;
	margin: 0 calc(-1 * var(--pyp-gutter));
	padding: 4px var(--pyp-gutter) 16px;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--pyp-gutter);
	scrollbar-width: none;
}

.pyp-gu__rail::-webkit-scrollbar {
	display: none;
}

/* Card: frosted glass around a photo */
.pyp-gu .pyp-gu__card {
	position: relative;
	display: flex;
	flex: 0 0 min(66vw, 280px);
	flex-direction: column;
	margin: 0;
	padding: 6px;
	border: 1px solid rgba(255, 255, 255, 0.85);
	border-radius: 22px;
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.4));
	-webkit-backdrop-filter: blur(16px) saturate(170%);
	backdrop-filter: blur(16px) saturate(170%);
	box-shadow: inset 0 1px 0 #fff, 0 16px 32px -22px rgba(15, 59, 39, 0.4);
	scroll-snap-align: start;
	transition: transform 450ms var(--pyp-ease-out), box-shadow 450ms var(--pyp-ease-out);
}

.pyp-gu__photo {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 17px;
	background: #e6eee0;
}

.pyp-gu__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-user-drag: none;
	user-select: none;
	transition: transform 1000ms var(--pyp-ease-out);
}

.pyp-gu__body {
	padding: 12px 8px 8px;
}

.pyp-gu .pyp-gu__name {
	margin: 0;
	font: 500 17px/1.2 var(--pyp-font-menu);
	color: var(--pyp-forest);
}

.pyp-gu .pyp-gu__link {
	color: inherit;
	text-decoration: none;
}

/* the name's link covers the whole card */
.pyp-gu__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.pyp-gu__link:focus-visible {
	outline: none;
}

.pyp-gu__card:has(.pyp-gu__link:focus-visible) {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pyp-green);
}

.pyp-gu .pyp-gu__role {
	margin: 4px 0 10px;
	font: 400 12.5px/1.4 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
}

.pyp-gu .pyp-gu__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pyp-gu__tags li {
	padding: 5px 9px;
	border-radius: 999px;
	background: rgba(29, 112, 68, 0.08);
	font: 600 10.5px/1 var(--pyp-font-sans);
	letter-spacing: 0.02em;
	color: var(--pyp-green);
}

.pyp-gu__card:active {
	transform: scale(0.985);
}

@media (hover: hover) {
	.pyp-gu__card:hover {
		transform: translateY(-5px);
		box-shadow: inset 0 1px 0 #fff, 0 26px 44px -24px rgba(15, 59, 39, 0.5);
	}

	.pyp-gu__card:hover .pyp-gu__photo img {
		transform: scale(1.06);
	}
}

/* Edge arrows: only for a mouse, shown while it is over the rail */
.pyp-gu__arrow {
	display: none;
}

@media (hover: hover) and (pointer: fine) {
	.pyp-gu .pyp-gu__rail {
		cursor: grab;
	}

	.pyp-gu.is-dragging .pyp-gu__rail {
		cursor: grabbing;
		user-select: none;
	}

	.pyp-gu.is-dragging .pyp-gu__rail,
	.pyp-gu.is-gliding .pyp-gu__rail {
		scroll-snap-type: none;
	}

	.pyp-gu.is-dragging .pyp-gu__card {
		pointer-events: none;
	}

	.pyp-gu__arrow {
		position: absolute;
		top: calc(50% - 30px);
		z-index: 4;
		display: grid;
		place-items: center;
		width: 46px;
		height: 46px;
		padding: 0;
		border: 1px solid rgba(255, 255, 255, 0.9);
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.82);
		-webkit-backdrop-filter: blur(14px) saturate(160%);
		backdrop-filter: blur(14px) saturate(160%);
		box-shadow: 0 14px 30px -14px rgba(15, 59, 39, 0.55);
		color: var(--pyp-forest);
		font-size: 17px;
		cursor: pointer;
		opacity: 0;
		pointer-events: none;
		transform: translateY(-50%) scale(0.86);
		transition: opacity 260ms var(--pyp-ease-out), transform 260ms var(--pyp-ease-out), background-color 160ms ease, color 160ms ease;
	}

	.pyp-gu__arrow--prev { left: -6px; }
	.pyp-gu__arrow--next { right: -6px; }

	.pyp-gu__stage:hover .pyp-gu__arrow,
	.pyp-gu__arrow:focus-visible {
		opacity: 1;
		pointer-events: auto;
		transform: translateY(-50%);
	}

	.pyp-gu__stage.is-start .pyp-gu__arrow--prev,
	.pyp-gu__stage.is-end .pyp-gu__arrow--next,
	.pyp-gu.is-dragging .pyp-gu__arrow {
		opacity: 0;
		pointer-events: none;
		transform: translateY(-50%) scale(0.86);
	}

	.pyp-gu__arrow:hover {
		background: var(--pyp-green);
		color: #fff;
	}

	.pyp-gu__arrow:focus-visible {
		outline: 2px solid var(--pyp-green);
		outline-offset: 3px;
	}
}

/* Reveal: the cards rise in turn */
.pyp-gu.is-armed .pyp-gu__head,
.pyp-gu.is-armed .pyp-gu__card {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 700ms var(--pyp-ease-out), transform 900ms var(--pyp-ease-out), box-shadow 450ms var(--pyp-ease-out);
}

.pyp-gu.is-armed .pyp-gu__card {
	transition-delay: calc(min(var(--pyp-gu-i), 5) * 80ms + 120ms);
}

.pyp-gu.is-armed.is-in .pyp-gu__head,
.pyp-gu.is-armed.is-in .pyp-gu__card {
	opacity: 1;
	transform: none;
}

@media (hover: hover) {
	.pyp-gu.is-armed.is-in .pyp-gu__card:hover {
		transform: translateY(-5px);
		transition-delay: 0s;
	}
}

/* Desktop: four and a bit in view */
@media (min-width: 992px) {
	.pyp-gu .pyp-gu__card {
		flex-basis: calc((100% - 4 * 16px) / 4.3);
	}

	.pyp-gu .pyp-gu__rail {
		gap: 16px;
	}
}

@media (min-width: 1500px) {
	.pyp-gu .pyp-gu__card {
		flex-basis: calc((100% - 5 * 16px) / 5.3);
	}
}

@media (max-width: 767.98px) {
	.pyp-gu {
		padding-block: 22px 18px;
	}

	.pyp-gu .pyp-gu__title {
		font-size: 22px;
	}

	.pyp-gu__head {
		align-items: flex-start;
	}

	.pyp-gu .pyp-gu__all {
		margin-top: 2px;
		font-size: 14px;
	}

	.pyp-gu .pyp-gu__all span {
		display: none; /* the arrow alone, as a round button */
	}

	.pyp-gu .pyp-gu__all {
		display: grid;
		place-items: center;
		width: 38px;
		height: 38px;
		padding: 0;
		border-radius: 50%;
		background: rgba(29, 112, 68, 0.1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pyp-gu.is-armed .pyp-gu__head,
	.pyp-gu.is-armed .pyp-gu__card {
		transform: none;
		transition-property: opacity;
		transition-duration: 300ms;
	}

	.pyp-gu__card:hover,
	.pyp-gu__card:hover .pyp-gu__photo img {
		transform: none;
	}
}

@media (prefers-reduced-transparency: reduce) {
	.pyp-gu .pyp-gu__card {
		background: #fff;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}


/* ==========================================================================
   11. Journal (.pyp-jr) · markup: file/home/blog.php
   A rail of equal glass cards. The article images are posters with their
   title in the picture, so each shows whole at 16:9, never cropped; the date,
   reading time and title sit below. Desktop drags with edge arrows.
   ========================================================================== */

.pyp-jr {
	--pyp-saffron-deep: #d9822b;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(26px, 3vw, 48px);
	background:
		radial-gradient(45% 60% at 95% 10%, rgba(156, 207, 104, 0.2), transparent 70%),
		linear-gradient(180deg, #f6f9f2 0%, #fff 100%);
}

/* Heading */
.pyp-jr__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: clamp(14px, 1.6vw, 22px);
}

.pyp-jr .pyp-jr__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	font: 600 11px/1 var(--pyp-font-sans);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pyp-green);
}

/* Om is a sacred symbol, so it alone takes the saffron */
.pyp-jr__om {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	color: var(--pyp-saffron-deep);
	fill: currentColor;
}

.pyp-jr .pyp-jr__title {
	margin: 0;
	font: 500 clamp(24px, 2.6vw, 40px)/1.12 var(--pyp-font-menu);
	letter-spacing: -0.015em;
	color: var(--pyp-forest);
	text-wrap: balance;
}

.pyp-jr__title em {
	font-style: normal;
	color: var(--pyp-green);
	background: linear-gradient(100deg, #12512f 0%, #1d7044 40%, #2f8a4c 70%, #4a9e45 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.pyp-jr .pyp-jr__lede {
	margin: 8px 0 0;
	font: 400 14.5px/1.55 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
}

.pyp-jr .pyp-jr__all {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	font: 500 15px/1 var(--pyp-font-menu);
	color: var(--pyp-green);
	text-decoration: none;
}

.pyp-jr__all span {
	padding-bottom: 3px;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size 300ms var(--pyp-ease-out);
}

.pyp-jr__all .bi {
	font-size: 13px;
	transition: transform 200ms var(--pyp-ease-out);
}

@media (hover: hover) {
	.pyp-jr .pyp-jr__all:hover {
		color: var(--pyp-green-hover);
	}

	.pyp-jr__all:hover span {
		background-size: 100% 1px;
	}

	.pyp-jr__all:hover .bi {
		transform: translateX(3px);
	}
}

/* Rail */
.pyp-jr__stage {
	position: relative;
}

.pyp-jr .pyp-jr__rail {
	display: flex;
	gap: 14px;
	margin: 0 calc(-1 * var(--pyp-gutter));
	padding: 4px var(--pyp-gutter) 16px;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--pyp-gutter);
	scrollbar-width: none;
}

.pyp-jr__rail::-webkit-scrollbar {
	display: none;
}

/* Card */
.pyp-jr .pyp-jr__card {
	position: relative;
	display: flex;
	flex: 0 0 min(80vw, 340px);
	flex-direction: column;
	margin: 0;
	padding: 6px;
	border: 1px solid rgba(255, 255, 255, 0.85);
	border-radius: 22px;
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.42));
	-webkit-backdrop-filter: blur(16px) saturate(170%);
	backdrop-filter: blur(16px) saturate(170%);
	box-shadow: inset 0 1px 0 #fff, 0 16px 32px -22px rgba(15, 59, 39, 0.4);
	scroll-snap-align: start;
	transition: transform 450ms var(--pyp-ease-out), box-shadow 450ms var(--pyp-ease-out);
}

.pyp-jr__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 17px;
	background: var(--pyp-mist);
}

.pyp-jr__media img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* the images are 16:9 themselves, so nothing is cut */
	-webkit-user-drag: none;
	user-select: none;
	transition: transform 1000ms var(--pyp-ease-out);
}

.pyp-jr__badge {
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 6px 10px;
	border-radius: 999px;
	background: var(--pyp-green);
	box-shadow: 0 6px 14px -6px rgba(15, 59, 39, 0.6);
	font: 600 10px/1 var(--pyp-font-sans);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
}

.pyp-jr__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 7px;
	padding: 12px 10px 10px;
}

.pyp-jr .pyp-jr__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font: 400 12px/1.2 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
}

.pyp-jr__meta > * + *::before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	margin-right: 10px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.5;
	vertical-align: middle;
}

.pyp-jr .pyp-jr__name {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	font: 500 16px/1.32 var(--pyp-font-menu);
	color: var(--pyp-forest);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.pyp-jr .pyp-jr__link {
	color: inherit;
	text-decoration: none;
}

/* the title's link covers the whole card */
.pyp-jr__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.pyp-jr__link:focus-visible {
	outline: none;
}

.pyp-jr__card:has(.pyp-jr__link:focus-visible) {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pyp-green);
}

.pyp-jr__read {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 2px;
	font: 500 13.5px/1 var(--pyp-font-menu);
	color: var(--pyp-green);
}

.pyp-jr__read .bi {
	font-size: 12px;
	transition: transform 200ms var(--pyp-ease-out);
}

.pyp-jr__card:active {
	transform: scale(0.985);
}

@media (hover: hover) {
	.pyp-jr__card:hover {
		transform: translateY(-5px);
		box-shadow: inset 0 1px 0 #fff, 0 26px 44px -24px rgba(15, 59, 39, 0.5);
	}

	.pyp-jr__card:hover .pyp-jr__media img {
		transform: scale(1.04);
	}

	.pyp-jr__card:hover .pyp-jr__read .bi {
		transform: translateX(3px);
	}
}

/* Edge arrows: only for a mouse, shown while it is over the rail */
.pyp-jr__arrow {
	display: none;
}

@media (hover: hover) and (pointer: fine) {
	.pyp-jr .pyp-jr__rail {
		cursor: grab;
	}

	.pyp-jr.is-dragging .pyp-jr__rail {
		cursor: grabbing;
		user-select: none;
	}

	.pyp-jr.is-dragging .pyp-jr__rail,
	.pyp-jr.is-gliding .pyp-jr__rail {
		scroll-snap-type: none;
	}

	.pyp-jr.is-dragging .pyp-jr__card {
		pointer-events: none;
	}

	.pyp-jr__arrow {
		position: absolute;
		top: calc(50% - 40px);
		z-index: 4;
		display: grid;
		place-items: center;
		width: 46px;
		height: 46px;
		padding: 0;
		border: 1px solid rgba(255, 255, 255, 0.9);
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.82);
		-webkit-backdrop-filter: blur(14px) saturate(160%);
		backdrop-filter: blur(14px) saturate(160%);
		box-shadow: 0 14px 30px -14px rgba(15, 59, 39, 0.55);
		color: var(--pyp-forest);
		font-size: 17px;
		cursor: pointer;
		opacity: 0;
		pointer-events: none;
		transform: translateY(-50%) scale(0.86);
		transition: opacity 260ms var(--pyp-ease-out), transform 260ms var(--pyp-ease-out), background-color 160ms ease, color 160ms ease;
	}

	.pyp-jr__arrow--prev { left: -6px; }
	.pyp-jr__arrow--next { right: -6px; }

	.pyp-jr__stage:hover .pyp-jr__arrow,
	.pyp-jr__arrow:focus-visible {
		opacity: 1;
		pointer-events: auto;
		transform: translateY(-50%);
	}

	.pyp-jr__stage.is-start .pyp-jr__arrow--prev,
	.pyp-jr__stage.is-end .pyp-jr__arrow--next,
	.pyp-jr.is-dragging .pyp-jr__arrow {
		opacity: 0;
		pointer-events: none;
		transform: translateY(-50%) scale(0.86);
	}

	.pyp-jr__arrow:hover {
		background: var(--pyp-green);
		color: #fff;
	}

	.pyp-jr__arrow:focus-visible {
		outline: 2px solid var(--pyp-green);
		outline-offset: 3px;
	}
}

/* Reveal: the cards rise in turn */
.pyp-jr.is-armed .pyp-jr__head,
.pyp-jr.is-armed .pyp-jr__card {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 700ms var(--pyp-ease-out), transform 900ms var(--pyp-ease-out), box-shadow 450ms var(--pyp-ease-out);
}

.pyp-jr.is-armed .pyp-jr__card {
	transition-delay: calc(min(var(--pyp-jr-i), 5) * 80ms + 120ms);
}

.pyp-jr.is-armed.is-in .pyp-jr__head,
.pyp-jr.is-armed.is-in .pyp-jr__card {
	opacity: 1;
	transform: none;
}

@media (hover: hover) {
	.pyp-jr.is-armed.is-in .pyp-jr__card:hover {
		transform: translateY(-5px);
		transition-delay: 0s;
	}
}

/* Desktop: three and a bit in view */
@media (min-width: 992px) {
	.pyp-jr .pyp-jr__card {
		flex-basis: calc((100% - 3 * 16px) / 3.3);
	}

	.pyp-jr .pyp-jr__rail {
		gap: 16px;
	}
}

@media (min-width: 1500px) {
	.pyp-jr .pyp-jr__card {
		flex-basis: calc((100% - 4 * 16px) / 4.3);
	}
}

@media (max-width: 767.98px) {
	.pyp-jr {
		padding-block: 22px 18px;
	}

	.pyp-jr__head {
		align-items: flex-start;
	}

	.pyp-jr .pyp-jr__title {
		font-size: 22px;
	}

	.pyp-jr .pyp-jr__lede {
		font-size: 14px;
	}

	/* "All articles" as a round arrow button */
	.pyp-jr .pyp-jr__all {
		display: grid;
		place-items: center;
		width: 38px;
		height: 38px;
		margin-top: 2px;
		padding: 0;
		border-radius: 50%;
		background: rgba(29, 112, 68, 0.1);
	}

	.pyp-jr .pyp-jr__all span {
		display: none;
	}

	.pyp-jr .pyp-jr__name {
		font-size: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pyp-jr.is-armed .pyp-jr__head,
	.pyp-jr.is-armed .pyp-jr__card {
		transform: none;
		transition-property: opacity;
		transition-duration: 300ms;
	}

	.pyp-jr__card:hover,
	.pyp-jr__card:hover .pyp-jr__media img {
		transform: none;
	}
}

@media (prefers-reduced-transparency: reduce) {
	.pyp-jr .pyp-jr__card {
		background: #fff;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}