/* ==========================================================================
   Pankaj Yogpeeth — service.css
   Course (service) page: service.php. The article body itself is styled by
   assets/css/prose.css (.pyp-prose); this file is the page around it.

   1. Buttons            5. "On this page" index
   2. Cover + breadcrumb 6. Booking card
   3. At a glance        7. Questions, answered
   4. Layout             8. More courses · 9. Phone booking bar
   ========================================================================== */

.pyp-svc {
	--pyp-svc-line: rgba(15, 59, 39, 0.1);
	--pyp-svc-soft: #63776b;
	--pyp-svc-anchor: calc(var(--pyp-navbar-h) + 24px);
	display: block;
	background: #fff;
	font-family: var(--pyp-font-sans);
}

.pyp-svc :where(h1, h2, p, dl, dd, ul, ol) {
	margin: 0;
}

.pyp-svc-eyebrow {
	color: var(--pyp-green);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}


/* 1. Buttons
   ========================================================================== */
.pyp-svc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 24px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.009em;
	white-space: nowrap;
	text-decoration: none;
	transition:
		background-color var(--pyp-dur-fast) var(--pyp-ease-out),
		color var(--pyp-dur-fast) var(--pyp-ease-out),
		box-shadow var(--pyp-dur) var(--pyp-ease-out),
		transform 120ms var(--pyp-ease-out);
}

.pyp-svc-btn .bi {
	font-size: 16px;
	transition: transform var(--pyp-dur) var(--pyp-ease-out);
}

.pyp-svc-btn:active {
	transform: scale(0.97);
}

.pyp-svc-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.pyp-svc-btn--light {
	background: #fff;
	color: var(--pyp-forest);
	box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.45);
}

.pyp-svc-btn--glass {
	border-color: rgba(255, 255, 255, 0.34);
	background: rgba(255, 255, 255, 0.12);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	backdrop-filter: blur(14px) saturate(160%);
	color: #fff;
}

.pyp-svc-btn--solid {
	background: var(--pyp-green);
	box-shadow: 0 14px 28px -14px rgba(29, 112, 68, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.18);
	color: #fff;
}

@media (hover: hover) {
	.pyp-svc-btn--light:hover {
		background: #f1f8ec;
		color: var(--pyp-forest);
	}

	.pyp-svc-btn--glass:hover {
		background: rgba(255, 255, 255, 0.22);
		color: #fff;
	}

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

	.pyp-svc-btn:hover .bi-arrow-right {
		transform: translateX(3px);
	}

	.pyp-svc-btn:hover .bi-arrow-down {
		transform: translateY(2px);
	}
}


/* 2. Cover: the course photo edge to edge, under the transparent navbar
   ========================================================================== */
.pyp-svc-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	overflow: hidden;
	min-height: clamp(580px, 86vh, 860px);
	/* Slides up under the transparent navbar (service.php sets $headerOverlay) */
	margin-top: calc(-1 * var(--pyp-navbar-h));
	padding: calc(var(--pyp-navbar-h) + 18px) 0 clamp(108px, 9vw, 140px);
	background: linear-gradient(160deg, var(--pyp-green), var(--pyp-forest));
	color: #fff;
}

.pyp-svc-hero__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
	transform: scale(1.06);
	animation: pyp-svc-settle 1.8s var(--pyp-ease-out) forwards;
}

@keyframes pyp-svc-settle {
	to { transform: scale(1); }
}

/* Shade: darker at the top (navbar, breadcrumb) and the bottom (title), clear between */
.pyp-svc-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(6, 26, 17, 0.62) 0%, rgba(6, 26, 17, 0.12) 30%, rgba(6, 26, 17, 0.28) 55%, rgba(6, 26, 17, 0.9) 100%),
		linear-gradient(90deg, rgba(6, 26, 17, 0.55) 0%, rgba(6, 26, 17, 0) 70%);
}

.pyp-svc-hero__inner {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
}

/* Title block */
.pyp-svc-hero__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	width: min(100%, 860px);
}

.pyp-svc-hero__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0;
	list-style: none;
}

.pyp-svc-hero__tags li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 13px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	color: rgba(255, 255, 255, 0.92);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
}

.pyp-svc-hero__tags .bi {
	color: var(--pyp-leaf);
}

.pyp-svc-hero__title {
	color: #fff;
	font-family: var(--pyp-font-menu);
	font-size: clamp(36px, 3.4vw + 16px, 70px);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -0.03em;
	text-shadow: 0 2px 30px rgba(0, 0, 0, 0.25);
	text-wrap: balance;
}

.pyp-svc-hero__dek {
	max-width: 62ch;
	color: rgba(255, 255, 255, 0.86);
	font-size: clamp(16px, 0.3vw + 15px, 18.5px);
	line-height: 1.6;
	text-wrap: pretty;
}

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

.pyp-svc-hero__price {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-left: 10px;
	padding-left: 22px;
	border-left: 1px solid rgba(255, 255, 255, 0.28);
}

.pyp-svc-hero__price small {
	color: rgba(255, 255, 255, 0.7);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.pyp-svc-hero__price b {
	font-family: var(--pyp-font-menu);
	font-size: 26px;
	font-weight: 600;
	line-height: 1;
}


/* 3. At a glance: a glass strip over the bottom of the cover
   ========================================================================== */
.pyp-svc-facts {
	position: relative;
	z-index: 2;
	margin-top: calc(-1 * clamp(72px, 6vw, 92px));
}

.pyp-svc-facts__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 4px;
	padding: 10px;
	border: 1px solid rgba(255, 255, 255, 0.85);
	border-radius: 26px;
	background: rgba(255, 255, 255, 0.94);
	-webkit-backdrop-filter: saturate(180%) blur(24px);
	backdrop-filter: saturate(180%) blur(24px);
	box-shadow: inset 0 1px 0 #fff, var(--pyp-shadow-panel);
}

.pyp-svc-fact {
	display: flex;
	align-items: center;
	gap: 13px;
	min-width: 0;
	padding: 14px 16px;
	border-radius: 18px;
}

.pyp-svc-fact__icon {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: var(--pyp-surface);
	box-shadow: var(--pyp-neu-raised);
	color: var(--pyp-green);
	font-size: 19px;
}

.pyp-svc-fact__text {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.pyp-svc-fact dt {
	color: var(--pyp-svc-soft);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.pyp-svc-fact dd {
	color: var(--pyp-ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.01em;
}


/* 4. Layout: article | rail. The rail is one sticky column on desktop (fee card, then
   the index), stuck by Canvas's .sticky-sidebar-wrap. Below 992px it dissolves: the index sits above the article, the card after it.
   ========================================================================== */
.pyp-svc-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "toc" "article" "book";
	gap: 28px;
	padding-block: clamp(44px, 5vw, 80px) clamp(64px, 6vw, 96px);
	scroll-margin-top: var(--pyp-svc-anchor);
}

.pyp-svc-article { grid-area: article; min-width: 0; }
.pyp-svc-rail { display: contents; }
.pyp-svc-book { grid-area: book; }
.pyp-svc-toc { grid-area: toc; }

@media (min-width: 992px) {
	.pyp-svc-layout {
		grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 360px);
		grid-template-areas: "article rail";
		align-items: start;
		column-gap: clamp(36px, 4vw, 64px);
	}

	/* Sticking is Canvas's sticky-sidebar-wrap (service.php); no CSS sticky here, or the two fight.
	   service.js sizes the index list so the whole rail fits the screen. */
	.pyp-svc-rail {
		grid-area: rail;
		display: block;
	}

	.pyp-svc-toc {
		display: flex;
		margin-top: 14px;
	}
}

/* Below 992px the plugin's wrapper (.scwStickySidebar, positioned inline) dissolves too, so the fee card and the index stay
   separate grid items (index above the article, card after it). */
@media (max-width: 991.98px) {
	.pyp-svc-rail > .scwStickySidebar {
		display: contents;
	}
}


/* 5. "On this page": compact, with a reading-progress line (service.js)
   ========================================================================== */
.pyp-svc-toc__box {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 0;
	border: 1px solid var(--pyp-svc-line);
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 59, 39, 0.04), 0 18px 36px -30px rgba(15, 59, 39, 0.5);
}

.pyp-svc-toc__head {
	position: relative;
	display: flex;
	flex: none;
	align-items: center;
	gap: 10px;
	padding: 14px 16px 15px;
	list-style: none;
	cursor: pointer;
}

.pyp-svc-toc__head::-webkit-details-marker {
	display: none;
}

.pyp-svc-toc__title {
	color: var(--pyp-forest);
	font-family: var(--pyp-font-menu);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.pyp-svc-toc__count {
	padding: 3px 8px;
	border-radius: 999px;
	background: rgba(29, 112, 68, 0.1);
	color: var(--pyp-green);
	font-size: 11.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.pyp-svc-toc__count b {
	font-weight: 700;
}

.pyp-svc-toc__head .bi {
	margin-left: auto;
	color: var(--pyp-svc-soft);
	font-size: 13px;
	transition: transform var(--pyp-dur) var(--pyp-ease-out);
}

.pyp-svc-toc__box[open] .pyp-svc-toc__head .bi {
	transform: rotate(180deg);
}

/* Reading progress: a hairline under the header that fills as the article is read */
.pyp-svc-toc__progress {
	position: absolute;
	right: 16px;
	bottom: 0;
	left: 16px;
	height: 2px;
	overflow: hidden;
	border-radius: 2px;
	background: var(--pyp-svc-line);
}

.pyp-svc-toc__progress i {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--pyp-green), var(--pyp-leaf));
	transform: scaleX(var(--pyp-read, 0));
	transform-origin: left center;
	transition: transform 160ms linear;
}

.pyp-svc-toc__list {
	position: relative; /* offsetTop of the links is measured against the list (service.js) */
	display: grid;
	gap: 1px;
	min-height: 0;
	margin: 0;
	padding: 8px 8px 10px;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
	scrollbar-width: thin;
	scrollbar-color: rgba(29, 112, 68, 0.25) transparent;
}

.pyp-svc-toc__list a {
	position: relative;
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	align-items: baseline;
	gap: 4px;
	padding: 7px 10px;
	border-radius: 11px;
	color: var(--pyp-svc-soft);
	font-size: 13.5px;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color var(--pyp-dur-fast) var(--pyp-ease-out), color var(--pyp-dur-fast) var(--pyp-ease-out);
}

.pyp-svc-toc__list a span {
	color: rgba(29, 112, 68, 0.6);
	font-size: 11px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.03em;
}

/* Long titles stop at two lines */
.pyp-svc-toc__list a em {
	display: -webkit-box;
	overflow: hidden;
	font-style: normal;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.pyp-svc-toc__list a:hover {
	background: rgba(29, 112, 68, 0.06);
	color: var(--pyp-forest);
}

.pyp-svc-toc__list a[aria-current] {
	background: rgba(29, 112, 68, 0.1);
	color: var(--pyp-forest);
	font-weight: 600;
}

.pyp-svc-toc__list a[aria-current] span {
	color: var(--pyp-green);
}

.pyp-svc-toc__list a[aria-current]::before {
	content: '';
	position: absolute;
	top: 9px;
	bottom: 9px;
	left: 0;
	width: 3px;
	border-radius: 3px;
	background: var(--pyp-green);
}

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

/* Desktop: always open (service.js), so the header is a title, not a toggle */
@media (min-width: 992px) {
	.pyp-svc-toc__head {
		cursor: default;
		pointer-events: none;
	}

	.pyp-svc-toc__head .bi {
		display: none;
	}
}

@media (max-width: 991.98px) {
	.pyp-svc-toc__list {
		max-height: 60vh;
	}
}


/* 6. Fee card: a green clay header with the fee and batches, three stats, then the actions
   ========================================================================== */
.pyp-svc-book {
	display: flex;
	flex-direction: column;
	padding: 8px;
	border: 1px solid var(--pyp-svc-line);
	border-radius: 26px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 59, 39, 0.05), 0 30px 60px -36px rgba(15, 59, 39, 0.5);
}

.pyp-svc-book__top {
	position: relative;
	overflow: hidden;
	padding: 18px 18px 16px;
	border-radius: 20px;
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(156, 207, 104, 0.4), transparent 58%),
		linear-gradient(155deg, var(--pyp-green) 0%, var(--pyp-forest) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -10px 20px rgba(0, 0, 0, 0.12);
	color: #fff;
}

.pyp-svc-book__label {
	color: var(--pyp-leaf);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.pyp-svc-book__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 8px;
	margin-top: 6px;
}

.pyp-svc-book__price b {
	color: #fff;
	font-family: var(--pyp-font-menu);
	font-size: 36px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.03em;
}

.pyp-svc-book__price span {
	color: rgba(255, 255, 255, 0.78);
	font-size: 15px;
	font-weight: 500;
}

.pyp-svc-book__note {
	margin-top: 6px;
	color: rgba(255, 255, 255, 0.66);
	font-size: 12.5px;
}

.pyp-svc-book__batches {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.pyp-svc-book__batches span {
	margin-right: 2px;
	color: rgba(255, 255, 255, 0.7);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.pyp-svc-book__batches b {
	padding: 5px 10px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
}

/* Dates (Manage → Services → Dates & fees): one horizontal card per date, a calendar tile, the
   dates, how long and the seats left; the soonest open one is lit. Three show, the rest open
   with "Show all dates" (service.js). */
.pyp-svc-dates {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.pyp-svc-dates__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}

.pyp-svc-dates__head span {
	color: rgba(255, 255, 255, 0.7);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.pyp-svc-dates__head small {
	color: rgba(255, 255, 255, 0.55);
	font-size: 11.5px;
}

.pyp-svc-dates__list {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pyp-svc-date {
	position: relative;
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 7px 12px 7px 7px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	text-decoration: none;
	transition: background-color 180ms ease, border-color 180ms ease, transform 160ms ease;
}

a.pyp-svc-date:hover,
a.pyp-svc-date:focus-visible {
	border-color: rgba(255, 255, 255, 0.42);
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
}

a.pyp-svc-date:active {
	transform: scale(0.985);
}

.pyp-svc-date__cal {
	display: grid;
	flex: none;
	place-items: center;
	align-content: center;
	width: 42px;
	height: 44px;
	border-radius: 10px;
	background: #fff;
	color: var(--pyp-forest);
	box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.35);
	line-height: 1;
}

.pyp-svc-date__cal small {
	color: var(--pyp-green);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.pyp-svc-date__cal b {
	margin-top: 3px;
	font-size: 17px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.pyp-svc-date__text {
	display: grid;
	flex: 1 1 auto;
	gap: 3px;
	min-width: 0;
}

.pyp-svc-date__text b {
	overflow: hidden;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pyp-svc-date__text small {
	color: rgba(255, 255, 255, 0.66);
	font-size: 11.5px;
	line-height: 1.2;
}

/* How long, then the occupancy ("8/15 booked") as a pill, amber once five or fewer seats are left */
.pyp-svc-date__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.pyp-svc-date__seats {
	padding: 2px 7px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	font-size: 10.5px;
	font-weight: 600;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.pyp-svc-date__seats.is-low {
	background: #fff4e0;
	color: #8a5200;
}

.pyp-svc-date__tag {
	flex: none;
	padding: 3px 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	font-size: 10px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.pyp-svc-date__go {
	flex: none;
	font-size: 14px;
	opacity: 0.6;
	transition: transform 180ms ease, opacity 180ms ease;
}

a.pyp-svc-date:hover .pyp-svc-date__go {
	opacity: 1;
	transform: translateX(2px);
}

.pyp-svc-date.is-next {
	border-color: rgba(156, 207, 104, 0.75);
	background: rgba(156, 207, 104, 0.18);
}

.pyp-svc-date.is-next .pyp-svc-date__tag {
	background: var(--pyp-leaf, #9ccf68);
	color: var(--pyp-forest);
}

.pyp-svc-date.is-full {
	opacity: 0.55;
}

.pyp-svc-date.is-full .pyp-svc-date__text b {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

.pyp-svc-dates__more {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	margin-top: 6px;
	padding: 7px 10px;
	border: 1px dashed rgba(255, 255, 255, 0.3);
	border-radius: 12px;
	background: transparent;
	color: rgba(255, 255, 255, 0.85);
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 180ms ease, border-color 180ms ease;
}

.pyp-svc-dates__more:hover {
	border-color: rgba(255, 255, 255, 0.55);
	background: rgba(255, 255, 255, 0.08);
}

.pyp-svc-dates__more i {
	transition: transform 200ms ease;
}

.pyp-svc-dates__more[aria-expanded="true"] i {
	transform: rotate(180deg);
}

/* Tablets and phones (the rail folds into the page): the dates become one swipeable row, every
   date in it (no "Show all"), running to the card's edges, the next one peeking in to say there
   is more. Snaps a card at a time. */
@media (max-width: 991.98px) {
	.pyp-svc-dates__list {
		display: flex;
		gap: 8px;
		margin-inline: -16px;
		padding: 2px 16px 6px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-padding-inline: 16px;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.pyp-svc-dates__list::-webkit-scrollbar {
		display: none;
	}

	.pyp-svc-dates__list > li {
		flex: 0 0 auto;
		width: min(250px, 76%);
		scroll-snap-align: start;
	}

	.pyp-svc-dates__list > li.is-more[hidden] {
		display: block;
	}

	.pyp-svc-dates__more {
		display: none;
	}

	.pyp-svc-date {
		height: 100%;
	}

}

/* Room prices (Manage → Services → Dates & fees) */
.pyp-svc-book__rooms {
	display: grid;
	gap: 8px;
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}

.pyp-svc-book__rooms li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px 9px 9px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.08);
}

.pyp-svc-book__rooms i {
	display: grid;
	flex: none;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.14);
	color: var(--pyp-leaf, #9ccf68);
	font-size: 15px;
}

.pyp-svc-book__rooms span {
	display: grid;
	flex: 1 1 auto;
	min-width: 0;
	font-size: 13.5px;
	font-weight: 600;
}

.pyp-svc-book__rooms small {
	color: rgba(255, 255, 255, 0.66);
	font-size: 11.5px;
	font-weight: 500;
}

.pyp-svc-book__rooms b {
	font-family: var(--pyp-font-display, inherit);
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

/* Tablets and phones: Shared and Private side by side as compact tiles, one row each: a small
   icon, the room and its note, the price at the right in a smaller size. */
@media (max-width: 991.98px) {
	.pyp-svc-book__rooms {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 6px;
	}

	.pyp-svc-book__rooms li {
		display: grid;
		grid-template-columns: 24px minmax(0, 1fr) auto;
		align-items: center;
		gap: 6px;
		padding: 7px 9px 7px 7px;
		border-radius: 12px;
	}

	.pyp-svc-book__rooms i {
		width: 24px;
		height: 24px;
		border-radius: 7px;
		font-size: 12px;
	}

	.pyp-svc-book__rooms span {
		font-size: 12px;
		line-height: 1.2;
	}

	.pyp-svc-book__rooms small {
		overflow: hidden;
		font-size: 10px;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.pyp-svc-book__rooms b {
		align-self: start;
		font-size: 13.5px;
		font-weight: 650;
		line-height: 1.2;
	}
}

/* Three stats in a row */
.pyp-svc-book__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0;
	padding: 12px 4px 10px;
	list-style: none;
}

.pyp-svc-book__stats li {
	display: grid;
	justify-items: center;
	gap: 2px;
	min-width: 0;
	padding: 0 4px;
	text-align: center;
}

.pyp-svc-book__stats li + li {
	border-left: 1px solid var(--pyp-svc-line);
}

.pyp-svc-book__stats .bi {
	margin-bottom: 3px;
	color: var(--pyp-green);
	font-size: 16px;
}

.pyp-svc-book__stats b {
	max-width: 100%;
	overflow: hidden;
	color: var(--pyp-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pyp-svc-book__stats small {
	color: var(--pyp-svc-soft);
	font-size: 11px;
	letter-spacing: 0.02em;
}

/* Enquire, with WhatsApp and Call as round buttons beside it */
.pyp-svc-book__actions {
	display: flex;
	gap: 8px;
	padding: 4px 4px 0;
}

.pyp-svc-book__cta {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 50px;
	padding: 0 18px;
	font-size: 15px;
}

.pyp-svc-book__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--pyp-surface);
	box-shadow: var(--pyp-neu-raised);
	color: var(--pyp-forest);
	font-size: 18px;
	text-decoration: none;
	transition: background-color var(--pyp-dur-fast) var(--pyp-ease-out), color var(--pyp-dur-fast) var(--pyp-ease-out), transform 120ms var(--pyp-ease-out);
}

.pyp-svc-book__icon--wa {
	color: #1da851;
}

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

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

@media (hover: hover) {
	.pyp-svc-book__icon:hover {
		background: var(--pyp-green);
		box-shadow: var(--pyp-glow-green);
		color: #fff;
	}
}

.pyp-svc-book__trust {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	padding: 11px 8px 6px;
	color: var(--pyp-svc-soft);
	font-size: 12px;
	line-height: 1.45;
}

.pyp-svc-book__trust .bi {
	color: var(--pyp-green);
}

/* Short laptop screens: the card gives the index more room */
@media (min-width: 992px) and (max-height: 760px) {
	.pyp-svc-book__note,
	.pyp-svc-book__trust {
		display: none;
	}

	.pyp-svc-book__top {
		padding: 14px 16px 13px;
	}

	.pyp-svc-book__price b {
		font-size: 30px;
	}

	.pyp-svc-book__batches {
		margin-top: 10px;
		padding-top: 10px;
	}

	.pyp-svc-book__stats {
		padding-block: 9px 8px;
	}

	.pyp-svc-book__actions {
		padding-bottom: 4px;
	}
}


/* 6b. Helpful resources
   Desktop: a row of soft cards. Phones: one grouped list with hairlines between the rows,
   like an app's settings list. Each kind of link has its own colour (course, guide, blog).
   ========================================================================== */
.pyp-svc-reads {
	margin-top: clamp(48px, 5vw, 72px);
}

.pyp-svc-reads__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 6px 16px;
	margin-bottom: 18px;
}

.pyp-svc-reads__head .pyp-svc-eyebrow {
	grid-column: 1 / -1;
}

.pyp-svc-reads__title {
	color: var(--pyp-forest);
	font-family: var(--pyp-font-menu);
	font-size: clamp(24px, 1vw + 19px, 32px);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.pyp-svc-reads__count {
	padding: 5px 11px;
	border-radius: 999px;
	background: rgba(29, 112, 68, 0.1);
	color: var(--pyp-green);
	font-size: 12px;
	font-weight: 600;
}

.pyp-svc-reads__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 12px;
	padding: 0;
	list-style: none;
}

.pyp-svc-read {
	--pyp-read-tone: var(--pyp-green);
	--pyp-read-tint: rgba(29, 112, 68, 0.12);

	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	height: 100%;
	padding: 16px;
	border: 1px solid transparent;
	border-radius: 18px;
	background: var(--pyp-surface);
	color: inherit;
	text-decoration: none;
	transition:
		background-color var(--pyp-dur) var(--pyp-ease-out),
		border-color var(--pyp-dur) var(--pyp-ease-out),
		box-shadow var(--pyp-dur) var(--pyp-ease-out),
		transform var(--pyp-dur) var(--pyp-ease-out);
}

.pyp-svc-read--guide {
	--pyp-read-tone: #b26a12;
	--pyp-read-tint: rgba(217, 130, 43, 0.14);
}

.pyp-svc-read--blog {
	--pyp-read-tone: #2f6f9f;
	--pyp-read-tint: rgba(47, 111, 159, 0.13);
}

.pyp-svc-read__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: var(--pyp-read-tint);
	color: var(--pyp-read-tone);
	font-size: 20px;
}

.pyp-svc-read__text {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.pyp-svc-read__text small {
	color: var(--pyp-read-tone);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.pyp-svc-read__text b {
	display: -webkit-box;
	overflow: hidden;
	color: var(--pyp-ink);
	font-family: var(--cnvs-primary-font, 'Jost', sans-serif);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.008em;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.pyp-svc-read__go {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #fff;
	color: var(--pyp-svc-soft);
	font-size: 13px;
	transition: background-color var(--pyp-dur) var(--pyp-ease-out), color var(--pyp-dur) var(--pyp-ease-out), transform var(--pyp-dur) var(--pyp-ease-out);
}

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

a.pyp-svc-read:active {
	transform: scale(0.985);
}

@media (hover: hover) {
	a.pyp-svc-read:hover {
		border-color: var(--pyp-svc-line);
		background: #fff;
		box-shadow: 0 18px 36px -26px rgba(15, 59, 39, 0.5);
		transform: translateY(-2px);
	}

	a.pyp-svc-read:hover .pyp-svc-read__go {
		background: var(--pyp-read-tone);
		color: #fff;
		transform: translateX(2px);
	}
}

/* Phones: one grouped list */
@media (max-width: 767.98px) {
	.pyp-svc-reads__head {
		margin-bottom: 14px;
	}

	.pyp-svc-reads__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		padding: 4px;
		border-radius: 20px;
		background: var(--pyp-surface);
	}

	.pyp-svc-reads__list > li + li {
		position: relative;
	}

	/* Hairline between rows, starting after the icon, as in an app list */
	.pyp-svc-reads__list > li + li::before {
		content: '';
		position: absolute;
		top: 0;
		right: 14px;
		left: 72px;
		height: 1px;
		background: rgba(15, 59, 39, 0.09);
	}

	.pyp-svc-read {
		gap: 12px;
		padding: 12px;
		border: 0;
		border-radius: 16px;
		background: transparent;
	}

	.pyp-svc-read__icon {
		width: 44px;
		height: 44px;
		border-radius: 13px;
		font-size: 19px;
	}

	.pyp-svc-read__text b {
		font-size: 15.5px;
	}

	.pyp-svc-read__go {
		width: auto;
		height: auto;
		background: none;
		color: rgba(15, 59, 39, 0.35);
	}

	a.pyp-svc-read:active {
		background: #fff;
		transform: none;
	}
}


/* 7. Questions, answered
   ========================================================================== */
.pyp-svc-faq {
	margin-top: clamp(60px, 6vw, 92px);
	scroll-margin-top: var(--pyp-svc-anchor);
}

.pyp-svc-faq__head {
	display: grid;
	gap: 10px;
	margin-bottom: 26px;
}

.pyp-svc-faq__title,
.pyp-svc-more__title {
	color: var(--pyp-forest);
	font-family: var(--pyp-font-menu);
	font-size: clamp(28px, 1.4vw + 20px, 40px);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.025em;
}

.pyp-svc-faq__list {
	display: grid;
	gap: 10px;
}

.pyp-svc-faq__item {
	border: 1px solid var(--pyp-svc-line);
	border-radius: 20px;
	background: #fff;
	transition: border-color var(--pyp-dur) var(--pyp-ease-out), box-shadow var(--pyp-dur) var(--pyp-ease-out), background-color var(--pyp-dur) var(--pyp-ease-out);
}

.pyp-svc-faq__item[open] {
	border-color: rgba(29, 112, 68, 0.28);
	background: linear-gradient(180deg, #fff, #f8fbf6);
	box-shadow: 0 20px 40px -28px rgba(15, 59, 39, 0.45);
}

.pyp-svc-faq__item summary {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	list-style: none;
	cursor: pointer;
}

.pyp-svc-faq__item summary::-webkit-details-marker {
	display: none;
}

.pyp-svc-faq__item summary:focus-visible {
	border-radius: 20px;
	outline: 2px solid var(--pyp-green);
	outline-offset: 2px;
}

.pyp-svc-faq__num {
	color: rgba(29, 112, 68, 0.75);
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.06em;
}

.pyp-svc-faq__q {
	color: var(--pyp-ink);
	font-family: var(--pyp-font-menu);
	font-size: 17.5px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -0.01em;
}

.pyp-svc-faq__icon {
	position: relative;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--pyp-surface);
	box-shadow: var(--pyp-neu-raised);
	transition: background-color var(--pyp-dur) var(--pyp-ease-out), transform var(--pyp-dur) var(--pyp-ease-out);
}

.pyp-svc-faq__icon::before,
.pyp-svc-faq__icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 2px;
	margin: -1px 0 0 -6px;
	border-radius: 2px;
	background: var(--pyp-green);
	transition: transform var(--pyp-dur) var(--pyp-ease-out), background-color var(--pyp-dur) var(--pyp-ease-out);
}

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

.pyp-svc-faq__item[open] .pyp-svc-faq__icon {
	background: var(--pyp-green);
	box-shadow: var(--pyp-glow-green);
	transform: rotate(180deg);
}

.pyp-svc-faq__item[open] .pyp-svc-faq__icon::before,
.pyp-svc-faq__item[open] .pyp-svc-faq__icon::after {
	background: #fff;
}

.pyp-svc-faq__item[open] .pyp-svc-faq__icon::after {
	transform: rotate(0deg);
}

.pyp-svc-faq__a {
	padding: 0 64px 20px 62px;
	color: #3a4d42;
	font-family: var(--cnvs-primary-font, 'Jost', sans-serif); /* body text, as in .pyp-prose */
	font-size: 16.5px;
	line-height: 1.72;
}

@media (hover: hover) {
	.pyp-svc-faq__item:not([open]):hover {
		border-color: rgba(29, 112, 68, 0.22);
	}
}


/* 8. More courses in the same place
   ========================================================================== */
.pyp-svc-more {
	padding-block: clamp(56px, 6vw, 96px);
	background: linear-gradient(180deg, var(--pyp-mist), #fff);
}

.pyp-svc-more__head {
	display: grid;
	gap: 10px;
	margin-bottom: 28px;
}

.pyp-svc-more__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
	padding: 0;
	list-style: none;
}

.pyp-svc-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--pyp-svc-line);
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 59, 39, 0.04);
	color: inherit;
	text-decoration: none;
	transition: transform var(--pyp-dur) var(--pyp-ease-out), box-shadow var(--pyp-dur) var(--pyp-ease-out);
}

.pyp-svc-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: linear-gradient(160deg, var(--pyp-green), var(--pyp-forest));
}

.pyp-svc-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--pyp-ease-out);
}

.pyp-svc-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 18px 20px 20px;
}

.pyp-svc-card__body small {
	color: var(--pyp-green);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.pyp-svc-card__body b {
	color: var(--pyp-ink);
	font-family: var(--pyp-font-menu);
	font-size: 18.5px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.012em;
}

.pyp-svc-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin-top: auto;
	padding-top: 6px;
	color: var(--pyp-svc-soft);
	font-size: 13.5px;
	font-weight: 500;
}

.pyp-svc-card__meta span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

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

@media (hover: hover) {
	.pyp-svc-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 30px 50px -30px rgba(15, 59, 39, 0.45);
	}

	.pyp-svc-card:hover .pyp-svc-card__media img {
		transform: scale(1.05);
	}
}


/* 9. Phone booking bar: rises once the cover has scrolled away (service.js)
   ========================================================================== */
.pyp-svc-cta {
	position: fixed;
	z-index: 60;
	right: 12px;
	bottom: calc(12px + env(safe-area-inset-bottom));
	left: 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 9px 9px 20px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 22px;
	background: rgba(15, 59, 39, 0.92);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	backdrop-filter: blur(18px) saturate(160%);
	box-shadow: 0 20px 44px -18px rgba(4, 24, 14, 0.6);
	color: #fff;
	opacity: 0;
	transform: translateY(calc(100% + 24px));
	transition: transform 520ms var(--pyp-ease-drawer), opacity 300ms var(--pyp-ease-out);
	pointer-events: none;
}

.pyp-svc-cta.is-shown {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.pyp-svc-cta__price {
	display: grid;
	gap: 3px;
}

.pyp-svc-cta__price small {
	color: rgba(255, 255, 255, 0.68);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.pyp-svc-cta__price b {
	font-family: var(--pyp-font-menu);
	font-size: 21px;
	font-weight: 600;
	line-height: 1;
}

.pyp-svc-cta .pyp-svc-btn {
	min-height: 48px;
	padding: 0 20px;
	box-shadow: none;
}

/* The theme's back-to-top button would sit on the bar */
body:has(.pyp-svc-cta.is-shown) #gotoTop {
	opacity: 0 !important;
	pointer-events: none;
}

@media (min-width: 992px) {
	.pyp-svc-cta {
		display: none;
	}
}


/* Tablets and phones
   ========================================================================== */
@media (max-width: 991.98px) {
	.pyp-svc-hero__price {
		margin-left: 0;
	}
}

@media (max-width: 767.98px) {
	.pyp-svc-hero {
		min-height: clamp(560px, 92svh, 760px);
		padding-bottom: 96px;
	}

	.pyp-svc-hero__inner {
		gap: 28px;
	}

	/* The trail keeps Home, Courses and the place; the title is right below it */
	.pyp-crumbs__extra {
		display: none !important;
	}

	.pyp-svc-hero__body {
		gap: 14px;
	}

	.pyp-svc-hero__tags li {
		padding: 7px 11px;
		font-size: 12.5px;
	}

	.pyp-svc-hero__actions {
		width: 100%;
	}

	.pyp-svc-hero__actions .pyp-svc-btn {
		flex: 1 1 auto;
	}

	.pyp-svc-hero__price {
		order: -1;
		width: 100%;
		flex-direction: row;
		align-items: baseline;
		gap: 10px;
		padding: 0;
		border: 0;
	}

	.pyp-svc-facts {
		margin-top: -64px;
	}

	.pyp-svc-facts__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0;
		padding: 6px;
		border-radius: 22px;
	}

	.pyp-svc-fact {
		align-items: flex-start;
		gap: 10px;
		padding: 11px 10px;
	}

	.pyp-svc-fact__icon {
		width: 34px;
		height: 34px;
		border-radius: 11px;
		font-size: 15px;
	}

	.pyp-svc-fact dt {
		font-size: 10.5px;
	}

	.pyp-svc-fact dd {
		font-size: 13.5px;
	}

	.pyp-svc-layout {
		padding-bottom: 56px;
	}

	.pyp-svc-faq__item summary {
		grid-template-columns: minmax(0, 1fr) auto; /* the number column is hidden on phones */
		gap: 12px;
		padding: 16px;
	}

	.pyp-svc-faq__num {
		display: none;
	}

	.pyp-svc-faq__q {
		font-size: 16.5px;
	}

	.pyp-svc-faq__a {
		padding: 0 16px 18px;
	}

	/* Courses scroll sideways, one and a bit cards at a time */
	.pyp-svc-more__list {
		grid-template-columns: none;
		grid-auto-columns: 80%;
		grid-auto-flow: column;
		gap: 14px;
		margin-inline: calc(-1 * var(--pyp-gutter));
		padding: 4px var(--pyp-gutter) 12px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-padding-inline: var(--pyp-gutter);
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.pyp-svc-more__list > li {
		scroll-snap-align: start;
	}

	/* Room under the footer for the booking bar */
	.pyp-svc ~ * :is(.pyp-footer__bottom) {
		padding-bottom: 92px;
	}
}

/* 10. App-style page on tablets and phones
   Reads like a native app screen: the photo as a cover, the content as a rounded white
   sheet sliding up over it, "On this page" as a sticky row of chips under the navbar
   (a tab bar), and a fixed action bar at the bottom with the fee and Enquire.
   Same markup as desktop; only the layout changes.
   ========================================================================== */
@media (max-width: 991.98px) {
	.pyp-svc {
		/* Navbar + chip bar: what an in-page jump has to clear */
		--pyp-svc-anchor: calc(var(--pyp-navbar-h) + 66px);
	}

	.pyp-svc .pyp-prose {
		--pyp-prose-anchor: calc(var(--pyp-navbar-h) + 70px);
	}

	/* "On this page" → sticky chip bar */
	.pyp-svc-layout {
		row-gap: 22px;
	}

	.pyp-svc-toc {
		position: sticky;
		z-index: 30;
		top: var(--pyp-navbar-h);
		align-self: stretch; /* 'start' would size it to all its chips (thousands of px wide) */
		min-width: 0;
		margin-inline: calc(-1 * var(--pyp-gutter));
	}

	.pyp-svc-toc__box {
		position: relative;
		border: 0;
		border-bottom: 1px solid var(--pyp-svc-line);
		border-radius: 0;
		background: rgba(255, 255, 255, 0.9);
		-webkit-backdrop-filter: saturate(180%) blur(20px);
		backdrop-filter: saturate(180%) blur(20px);
		box-shadow: 0 10px 20px -18px rgba(15, 59, 39, 0.5);
	}

	/* The header shrinks to just the reading-progress line along the bar's bottom edge */
	.pyp-svc-toc__head {
		position: absolute;
		right: 0;
		bottom: -1px;
		left: 0;
		padding: 0;
		pointer-events: none;
	}

	.pyp-svc-toc__title,
	.pyp-svc-toc__count,
	.pyp-svc-toc__head .bi {
		display: none;
	}

	.pyp-svc-toc__progress {
		position: static;
		display: block;
		height: 2px;
		border-radius: 0;
		background: transparent;
	}

	.pyp-svc-toc__list {
		display: flex;
		gap: 8px;
		max-height: none;
		padding: 10px var(--pyp-gutter);
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scroll-padding-inline: var(--pyp-gutter);
		scrollbar-width: none;
	}

	.pyp-svc-toc__list::-webkit-scrollbar {
		display: none;
	}

	.pyp-svc-toc__list li {
		flex: none;
	}

	.pyp-svc-toc__list a {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		min-height: 38px;
		padding: 0 14px 0 6px;
		border-radius: 999px;
		background: var(--pyp-surface);
		color: var(--pyp-ink);
		font-size: 13.5px;
		font-weight: 500;
		white-space: nowrap;
	}

	.pyp-svc-toc__list a span {
		display: grid;
		place-items: center;
		min-width: 26px;
		height: 26px;
		padding: 0 6px;
		border-radius: 999px;
		background: #fff;
		color: var(--pyp-green);
		font-size: 11px;
	}

	.pyp-svc-toc__list a em {
		display: inline;
		max-width: 22ch;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: unset;
	}

	.pyp-svc-toc__list a[aria-current] {
		background: var(--pyp-green);
		box-shadow: var(--pyp-glow-green);
		color: #fff;
	}

	.pyp-svc-toc__list a[aria-current] span {
		background: rgba(255, 255, 255, 0.2);
		color: #fff;
	}

	.pyp-svc-toc__list a[aria-current]::before {
		display: none;
	}

	/* Action bar: attached to the bottom edge, white glass, always there */
	.pyp-svc-cta {
		right: 0;
		bottom: 0;
		left: 0;
		padding: 10px var(--pyp-gutter) calc(10px + env(safe-area-inset-bottom));
		border: 0;
		border-top: 1px solid var(--pyp-svc-line);
		border-radius: 22px 22px 0 0;
		background: rgba(255, 255, 255, 0.94);
		-webkit-backdrop-filter: saturate(180%) blur(22px);
		backdrop-filter: saturate(180%) blur(22px);
		box-shadow: 0 -14px 34px -22px rgba(15, 59, 39, 0.45);
		color: var(--pyp-ink);
	}

	.pyp-svc-cta__price small {
		color: var(--pyp-svc-soft);
	}

	.pyp-svc-cta__price b {
		color: var(--pyp-forest);
		font-size: 22px;
	}

	.pyp-svc-cta .pyp-svc-btn--light {
		min-height: 50px;
		padding: 0 24px;
		background: var(--pyp-green);
		box-shadow: var(--pyp-glow-green);
		color: #fff;
	}

	/* Room for the bar at the end of the page content */
	.pyp-svc-more {
		padding-bottom: calc(96px + env(safe-area-inset-bottom));
	}
}

/* Tablets and phones: the course fee card moves up to the top of the page.
   The page becomes one column of reorderable blocks (the layout and the rail dissolve with
   display: contents, so the same markup is simply re-ordered, never repeated):
   cover, at a glance, fee card, chapter tabs, the course, more courses.
   Phones put the card straight under the title sheet, before the glance tiles. */
@media (max-width: 991.98px) {
	.pyp-svc {
		display: flex;
		flex-direction: column;
	}

	.pyp-svc-layout {
		display: contents;
	}

	.pyp-svc > *,
	.pyp-svc-article {
		min-width: 0; /* flex items: never wider than the screen */
	}

	.pyp-svc-hero { order: 0; }
	.pyp-svc-facts { order: 1; }
	.pyp-svc-book { order: 2; }
	.pyp-svc-toc { order: 3; }
	.pyp-svc-article { order: 4; }
	.pyp-svc-more { order: 5; }

	.pyp-svc-book {
		margin: 22px var(--pyp-gutter) 0;
	}

	/* Full width of the page now, so no bleed margins */
	.pyp-svc-toc {
		margin: 22px 0 0;
	}

	.pyp-svc-article {
		padding: 20px var(--pyp-gutter) 56px;
	}
}

/* Phones: cover + sheet */
@media (max-width: 767.98px) {
	/* Cover, app style: the photo stands alone at the top (no text on it), with a glass
	   back chip; the title, tags and summary sit on a white sheet that rides up over the
	   bottom of the photo. The in-page buttons give way to the action bar. */
	.pyp-svc-hero {
		--pyp-svc-cover-h: clamp(320px, 56svh, 470px);

		display: block;
		min-height: 0;
		padding: 0;
		overflow: hidden; /* the photo's settle zoom must not widen the page */
		background: #fff;
		color: var(--pyp-ink);
	}

	.pyp-svc-hero__img {
		position: relative;
		z-index: 0;
		display: block;
		height: var(--pyp-svc-cover-h);
	}

	/* Shade only at the top of the photo, for the navbar and the back chip */
	.pyp-svc-hero::before {
		z-index: 1;
		bottom: auto;
		height: var(--pyp-svc-cover-h);
		background: linear-gradient(180deg, rgba(6, 26, 17, 0.55) 0%, rgba(6, 26, 17, 0.08) 38%, rgba(6, 26, 17, 0) 60%, rgba(6, 26, 17, 0.18) 100%);
	}

	.pyp-svc-hero__inner {
		position: static;
		display: block;
	}

	/* Breadcrumb → a back chip over the photo: "‹ Courses" */
	.pyp-crumbs {
		position: absolute;
		z-index: 2;
		top: calc(var(--pyp-navbar-h) + 10px);
		left: var(--pyp-gutter);
	}

	.pyp-crumbs ol {
		padding: 0;
		border-color: rgba(255, 255, 255, 0.3);
		background: rgba(6, 26, 17, 0.32);
	}

	.pyp-crumbs li:not(:nth-child(2)) {
		display: none !important;
	}

	.pyp-crumbs li + li::before {
		display: none;
	}

	.pyp-crumbs li:nth-child(2) a {
		gap: 4px;
		padding: 9px 15px 9px 10px;
		color: #fff;
		font-size: 14px;
		font-weight: 600;
	}

	.pyp-crumbs li:nth-child(2) a::before {
		content: '\f284'; /* bi-chevron-left */
		font: 14px/1 bootstrap-icons;
	}

	/* The sheet */
	.pyp-svc-hero__body {
		position: relative;
		z-index: 3;
		gap: 12px;
		width: auto;
		margin: -30px calc(-1 * var(--pyp-gutter)) 0;
		padding: 30px var(--pyp-gutter) 6px;
		border-radius: 28px 28px 0 0;
		background: #fff;
		box-shadow: 0 -14px 30px -22px rgba(4, 24, 14, 0.55);
	}

	/* Grabber */
	.pyp-svc-hero__body::before {
		content: '';
		position: absolute;
		top: 10px;
		left: 50%;
		width: 40px;
		height: 5px;
		margin-left: -20px;
		border-radius: 999px;
		background: rgba(15, 59, 39, 0.14);
	}

	.pyp-svc-hero__tags {
		flex-wrap: nowrap;
		order: 1;
		max-width: 100%;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.pyp-svc-hero__tags li {
		flex: none;
		padding: 6px 11px;
		border: 0;
		background: rgba(29, 112, 68, 0.1);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		color: var(--pyp-forest);
		font-size: 12.5px;
		font-weight: 500;
	}

	.pyp-svc-hero__tags .bi {
		color: var(--pyp-green);
	}

	.pyp-svc-hero__title {
		order: 0;
		color: var(--pyp-forest);
		font-size: clamp(27px, 7.4vw, 34px);
		line-height: 1.1;
		text-shadow: none;
	}

	.pyp-svc-hero__dek {
		order: 2;
		display: -webkit-box;
		overflow: hidden;
		color: var(--pyp-ink-soft);
		font-size: 15px;
		line-height: 1.55;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}

	.pyp-svc-hero__actions {
		display: none;
	}

	/* At a glance follows straight on, on the same white sheet */
	.pyp-svc-facts {
		margin-top: 0;
		padding-top: 14px;
		background: #fff;
	}

	/* At a glance: a sideways row of stat tiles */
	.pyp-svc-facts__list {
		display: flex;
		gap: 10px;
		margin-inline: calc(-1 * var(--pyp-gutter));
		padding: 4px var(--pyp-gutter) 6px;
		overflow-x: auto;
		border: 0;
		border-radius: 0;
		background: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		box-shadow: none;
		scroll-padding-inline: var(--pyp-gutter);
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.pyp-svc-facts__list::-webkit-scrollbar {
		display: none;
	}

	.pyp-svc-fact {
		flex: 0 0 auto;
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		width: 132px;
		padding: 14px;
		border-radius: 18px;
		background: var(--pyp-surface);
		scroll-snap-align: start;
	}

	.pyp-svc-fact__icon {
		width: 34px;
		height: 34px;
		border-radius: 11px;
		background: #fff;
		font-size: 15px;
	}

	.pyp-svc-fact dd {
		display: -webkit-box;
		overflow: hidden;
		font-size: 14px;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	/* The fee card comes straight after the title, ahead of the glance tiles,
	   floating over the white sheet with a soft lift */
	.pyp-svc-book {
		order: 1;
		position: relative;
		z-index: 4;
		margin-top: 14px;
		box-shadow: 0 1px 2px rgba(15, 59, 39, 0.05), 0 24px 44px -26px rgba(15, 59, 39, 0.55);
	}

	.pyp-svc-facts {
		order: 2;
		padding-top: 18px;
	}

	.pyp-svc-toc {
		margin-top: 18px;
	}
}


/* 11. Phones: app cover. The photo runs to the top of the screen; the course fee card
   floats over its bottom edge like an app's booking card; the title, tags and summary
   follow on white. The cover's wrappers dissolve (display: contents) so the photo, the
   card and the title are re-ordered blocks of one column; nothing is repeated.
   ========================================================================== */
@media (max-width: 767.98px) {
	.pyp-svc {
		position: relative;
	}

	.pyp-svc-hero,
	.pyp-svc-hero__inner {
		display: contents;
	}

	.pyp-svc-hero__img {
		order: 0;
		flex: none;
		position: relative;
		z-index: 0;
		width: 100%;
		height: var(--pyp-svc-cover-h);
		margin-top: calc(-1 * var(--pyp-navbar-h)); /* under the transparent navbar */
		animation: none;
		transform: none;
	}

	/* Shade at the top of the photo (navbar, back chip) and a little at its foot */
	.pyp-svc-hero::before {
		position: absolute;
		z-index: 1;
		top: calc(-1 * var(--pyp-navbar-h));
		right: 0;
		bottom: auto;
		left: 0;
		height: var(--pyp-svc-cover-h);
		background: linear-gradient(180deg, rgba(6, 26, 17, 0.55) 0%, rgba(6, 26, 17, 0.06) 34%, rgba(6, 26, 17, 0) 55%, rgba(6, 26, 17, 0.35) 100%);
	}

	.pyp-crumbs {
		top: 12px;
	}

	/* Only the green fee panel (fee, stay note, batches) floats over the photo's bottom edge,
	   in its usual design; Enquire, WhatsApp and Call live in the bottom action bar. */
	.pyp-svc-book {
		order: 1;
		position: relative;
		z-index: 4;
		margin: -92px var(--pyp-gutter) 0;
		padding: 0;
		border: 0;
		border-radius: 20px;
		background: none;
		box-shadow: none;
	}

	/* Frosted white glass instead of the green fill: the photo shows through its top edge */
	.pyp-svc-book__top {
		border: 1px solid rgba(255, 255, 255, 0.85);
		background: rgba(255, 255, 255, 0.86);
		-webkit-backdrop-filter: saturate(180%) blur(22px);
		backdrop-filter: saturate(180%) blur(22px);
		box-shadow: inset 0 1px 0 #fff, 0 26px 44px -22px rgba(4, 24, 14, 0.55);
		color: var(--pyp-ink);
	}

	.pyp-svc-book__label {
		color: var(--pyp-green);
	}

	.pyp-svc-book__price b {
		color: var(--pyp-forest);
	}

	.pyp-svc-book__price span,
	.pyp-svc-book__note {
		color: var(--pyp-ink-soft);
	}

	.pyp-svc-book__batches {
		border-top-color: rgba(15, 59, 39, 0.1);
	}

	.pyp-svc-book__batches span {
		color: var(--pyp-ink-soft);
	}

	.pyp-svc-book__batches b {
		border-color: rgba(29, 112, 68, 0.18);
		background: rgba(29, 112, 68, 0.1);
		color: var(--pyp-forest);
	}

	.pyp-svc-dates {
		border-top-color: rgba(15, 59, 39, 0.1);
	}

	.pyp-svc-dates__head span,
	.pyp-svc-dates__head small,
	.pyp-svc-date__text small {
		color: var(--pyp-ink-soft);
	}

	.pyp-svc-date,
	a.pyp-svc-date:hover,
	a.pyp-svc-date:focus-visible {
		border-color: rgba(29, 112, 68, 0.16);
		background: rgba(29, 112, 68, 0.05);
		color: var(--pyp-forest);
	}

	.pyp-svc-date__cal {
		background: var(--pyp-green, #1d7044);
		color: #fff;
		box-shadow: none;
	}

	.pyp-svc-date__cal small {
		color: rgba(255, 255, 255, 0.8);
	}

	.pyp-svc-date__tag {
		background: rgba(29, 112, 68, 0.1);
	}

	.pyp-svc-date__seats {
		background: rgba(29, 112, 68, 0.1);
		color: var(--pyp-forest);
	}

	.pyp-svc-date__seats.is-low {
		background: #fff4e0;
		color: #8a5200;
	}

	.pyp-svc-date.is-next {
		border-color: var(--pyp-green, #1d7044);
		background: rgba(29, 112, 68, 0.1);
	}

	.pyp-svc-dates__more {
		border-color: rgba(29, 112, 68, 0.3);
		color: var(--pyp-green, #1d7044);
	}

	.pyp-svc-book__rooms li {
		border-color: rgba(29, 112, 68, 0.16);
		background: rgba(29, 112, 68, 0.06);
		color: var(--pyp-forest);
	}

	.pyp-svc-book__rooms small {
		color: var(--pyp-ink-soft);
	}

	.pyp-svc-book__rooms i {
		background: rgba(29, 112, 68, 0.1);
		color: var(--pyp-green, #1d7044);
	}

	.pyp-svc-book__stats,
	.pyp-svc-book__actions,
	.pyp-svc-book__trust {
		display: none;
	}

	/* Title, tags and summary on white under the card */
	.pyp-svc-hero__body {
		order: 2;
		margin: 0;
		padding: 22px var(--pyp-gutter) 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
	}

	.pyp-svc-hero__body::before {
		display: none;
	}

	.pyp-svc-facts { order: 3; }
	.pyp-svc-toc { order: 4; }
	.pyp-svc-article { order: 5; }
	.pyp-svc-more { order: 6; }
}

html:has(.pyp-svc) {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html:has(.pyp-svc) {
		scroll-behavior: auto;
	}

	.pyp-svc-hero__img {
		animation: none;
		transform: none;
	}

	.pyp-svc *,
	.pyp-svc-cta {
		transition-duration: 1ms !important;
	}
}

@media (prefers-reduced-transparency: reduce) {
	.pyp-crumbs ol,
	.pyp-svc-hero__tags li,
	.pyp-svc-btn--glass {
		background: rgba(6, 26, 17, 0.6);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.pyp-svc-facts__list,
	.pyp-svc-cta {
		background: #fff;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.pyp-svc-cta {
		background: var(--pyp-forest);
	}
}


/* Courses on set dates (Manage → Services: start and end date): a note on the cover once the
   dates have passed, and the fee card's date line marked as ended. */
.pyp-svc-hero__ended {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 4px 0 0;
	padding: 8px 14px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
}

.pyp-svc-book__batches.is-ended b { text-decoration: line-through; opacity: 0.7; }

/* Drop-in classes (a course page linked to drop-in enquiry options): the fee card lists the classes,
   each a link that opens the enquiry form with that class chosen. */
.pyp-svc-book__classes {
	display: grid;
	gap: 6px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.pyp-svc-book__classes span {
	color: rgba(255, 255, 255, 0.7);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.pyp-svc-book__classes a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 12px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	font-size: 14px;
	text-decoration: none;
	transition: background-color var(--pyp-dur-fast, 160ms) ease, border-color var(--pyp-dur-fast, 160ms) ease;
}

.pyp-svc-book__classes a b { font-weight: 600; }
.pyp-svc-book__classes a i { font-size: 13px; opacity: 0.75; transition: transform var(--pyp-dur-fast, 160ms) ease; }

@media (hover: hover) {
	.pyp-svc-book__classes a:hover {
		border-color: rgba(255, 255, 255, 0.4);
		background: rgba(255, 255, 255, 0.18);
	}

	.pyp-svc-book__classes a:hover i { transform: translate(2px, -2px); }
}

.pyp-svc-book__classes a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

@media (max-width: 767.98px) {
	/* On phones the fee card leads the page: the classes become a row of pills, like the batches. */
	.pyp-svc-book__classes {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin-top: 10px;
		padding-top: 10px;
		border-top-color: rgba(15, 59, 39, 0.1);
	}

	.pyp-svc-book__classes span { margin-right: 2px; color: var(--pyp-ink-soft); }

	.pyp-svc-book__classes a {
		gap: 5px;
		padding: 6px 10px;
		border-color: rgba(29, 112, 68, 0.18);
		border-radius: 999px;
		background: rgba(29, 112, 68, 0.08);
		color: var(--pyp-forest);
		font-size: 13px;
		line-height: 1.1;
	}

	.pyp-svc-book__classes a i { font-size: 11px; }

	.pyp-svc-book__classes a:focus-visible { outline-color: var(--pyp-green); }
}


/* Dates & fees section (Manage → Services → Sections, type "Dates & fees"; drawn by
   course_dates_section() live from the Dates & fees screen). Inside .pyp-prose, so its list
   and link styles are switched off here. Room prices, then one card per date: calendar tile,
   the dates and how long, an occupancy bar, that date's prices and Enquire. */
.pyp-svc-fees {
	display: grid;
	gap: 14px;
	margin: 18px 0 30px;
	font-family: var(--pyp-font-sans);
}

.pyp-svc-fees__rooms {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 10px;
}

.pyp-svc-fees__room {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid var(--pyp-hairline);
	border-radius: 18px;
	background: linear-gradient(180deg, #fff, var(--pyp-mist));
	box-shadow: 0 1px 2px rgba(15, 59, 39, 0.04), 0 12px 26px -20px rgba(15, 59, 39, 0.4);
}

.pyp-svc-fees__room > i {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: rgba(29, 112, 68, 0.1);
	color: var(--pyp-green);
	font-size: 18px;
}

.pyp-svc-fees__room > span {
	display: grid;
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1.25;
}

.pyp-prose .pyp-svc-fees__room b {
	color: var(--pyp-ink);
	font-size: 15px;
	font-weight: 650;
}

.pyp-svc-fees__room small {
	color: var(--pyp-ink-soft);
	font-size: 12.5px;
}

.pyp-prose .pyp-svc-fees__room strong {
	color: var(--pyp-forest);
	font-size: 24px;
	font-weight: 650;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.pyp-prose .pyp-svc-fees__list {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pyp-prose .pyp-svc-fees__list > li {
	margin: 0;
	padding: 0;
}

.pyp-prose .pyp-svc-fees__list > li::before {
	display: none;
}

.pyp-svc-run {
	display: grid;
	grid-template-columns: 58px minmax(0, 1.5fr) minmax(120px, 1fr) auto auto;
	grid-template-areas: "cal when seats price cta";
	align-items: center;
	gap: 16px;
	padding: 12px 14px 12px 12px;
	border: 1px solid var(--pyp-hairline);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 59, 39, 0.04);
	color: var(--pyp-ink);
	line-height: 1.3;
	transition: border-color 180ms var(--pyp-ease-out), box-shadow 180ms var(--pyp-ease-out), transform 180ms var(--pyp-ease-out);
}

.pyp-prose a.pyp-svc-run {
	color: var(--pyp-ink);
	font-weight: inherit;
	text-decoration: none;
}

@media (hover: hover) {
	.pyp-prose a.pyp-svc-run:hover {
		border-color: rgba(29, 112, 68, 0.45);
		box-shadow: 0 16px 30px -22px rgba(15, 59, 39, 0.55);
		transform: translateY(-1px);
	}

	.pyp-prose a.pyp-svc-run:hover .pyp-svc-run__cta i {
		transform: translateX(3px);
	}
}

.pyp-prose a.pyp-svc-run:active {
	transform: scale(0.99);
}

.pyp-svc-run.is-next {
	border-color: rgba(29, 112, 68, 0.4);
	background: linear-gradient(90deg, rgba(156, 207, 104, 0.14), #fff 60%);
}

.pyp-svc-run.is-full {
	opacity: 0.55;
}

.pyp-svc-run__cal {
	grid-area: cal;
	display: grid;
	place-items: center;
	align-content: center;
	height: 62px;
	border-radius: 14px;
	background: linear-gradient(155deg, var(--pyp-green), var(--pyp-forest));
	box-shadow: var(--pyp-glow-green);
	color: #fff;
	line-height: 1;
}

.pyp-svc-run__cal small {
	color: var(--pyp-leaf);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.pyp-svc-run__cal b {
	margin: 3px 0 2px;
	color: #fff;
	font-size: 22px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.pyp-svc-run__cal em {
	color: rgba(255, 255, 255, 0.72);
	font-size: 10px;
	font-style: normal;
	font-weight: 600;
}

.pyp-svc-run__when {
	grid-area: when;
	display: grid;
	gap: 4px;
	min-width: 0;
}

.pyp-prose .pyp-svc-run__when b {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	color: var(--pyp-ink);
	font-size: 16px;
	font-weight: 650;
}

.pyp-svc-run__when small {
	color: var(--pyp-ink-soft);
	font-size: 12.5px;
}

/* Scoped under .pyp-prose: its "em { color: inherit }" would otherwise turn the text dark */
.pyp-prose .pyp-svc-run__tag {
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--pyp-green);
	color: #fff;
	font-size: 10px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.pyp-prose .pyp-svc-run__tag.is-peak {
	background: #fff4e0;
	color: #8a5200;
}

.pyp-svc-run__seats {
	grid-area: seats;
	display: grid;
	gap: 6px;
}

.pyp-svc-run__bar {
	display: block;
	height: 6px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--pyp-mist);
	box-shadow: inset 0 1px 2px rgba(15, 59, 39, 0.08);
}

.pyp-svc-run__bar i {
	display: block;
	width: var(--fill, 0%);
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--pyp-leaf), var(--pyp-green));
}

.pyp-svc-run__seats.is-low .pyp-svc-run__bar i {
	background: linear-gradient(90deg, #f3c46b, #d98a16);
}

.pyp-svc-run__seats small {
	color: var(--pyp-ink-soft);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.pyp-svc-run__seats.is-low small {
	color: #8a5200;
	font-weight: 600;
}

.pyp-svc-run__price {
	grid-area: price;
	display: grid;
	grid-template-columns: auto auto;
	align-items: baseline;
	gap: 2px 8px;
	justify-content: end;
}

.pyp-svc-run__price small {
	color: var(--pyp-ink-soft);
	font-size: 11px;
	text-align: right;
}

.pyp-prose .pyp-svc-run__price b {
	color: var(--pyp-forest);
	font-size: 15px;
	font-weight: 650;
	font-variant-numeric: tabular-nums;
}

.pyp-svc-run__cta {
	grid-area: cta;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 14px;
	border-radius: 999px;
	background: var(--pyp-green);
	box-shadow: var(--pyp-glow-green);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.pyp-svc-run__cta i {
	transition: transform 180ms var(--pyp-ease-out);
}

.pyp-svc-run.is-full .pyp-svc-run__cta {
	background: var(--pyp-mist);
	box-shadow: none;
	color: var(--pyp-ink-soft);
}

.pyp-svc-fees__note,
.pyp-svc-fees__request {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	color: var(--pyp-ink-soft);
	font-size: 13px;
	line-height: 1.5;
}

.pyp-svc-fees__note i,
.pyp-svc-fees__request i {
	margin-top: 2px;
	color: var(--pyp-green);
}

.pyp-svc-fees__request {
	padding: 14px 16px;
	border-radius: 16px;
	background: var(--pyp-mist);
	font-size: 14px;
}

.pyp-prose a.pyp-svc-fees__ask {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
	border: 1px dashed rgba(29, 112, 68, 0.4);
	border-radius: 18px;
	background: var(--pyp-mist);
	color: var(--pyp-forest);
	text-decoration: none;
}

.pyp-svc-fees__ask span {
	display: grid;
	gap: 2px;
}

.pyp-svc-fees__ask small {
	color: var(--pyp-ink-soft);
	font-size: 12.5px;
	font-weight: 500;
}

/* Laptops: the price moves under the dates so the row keeps its breath */
@media (max-width: 1199.98px) {
	.pyp-svc-run {
		grid-template-columns: 58px minmax(0, 1fr) minmax(110px, 0.8fr) auto;
		grid-template-areas:
			"cal when seats cta"
			"cal price price cta";
		row-gap: 8px;
	}

	.pyp-svc-run__price {
		justify-content: start;
	}

	.pyp-svc-run__price small {
		text-align: left;
	}
}

/* Phones: tile and dates on top, then the occupancy, then prices beside Enquire */
@media (max-width: 767.98px) {
	/* the two room prices stay side by side as compact tiles, one row each: a small icon, the
	   room and its note, the price at the right in a smaller size */
	.pyp-svc-fees__rooms {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.pyp-svc-fees__room {
		display: grid;
		grid-template-columns: 28px minmax(0, 1fr) auto;
		align-items: center;
		gap: 7px;
		padding: 9px 11px 9px 9px;
		border-radius: 14px;
	}

	.pyp-svc-fees__room > i {
		width: 28px;
		height: 28px;
		border-radius: 9px;
		font-size: 14px;
	}

	.pyp-prose .pyp-svc-fees__room b {
		font-size: 13px;
	}

	.pyp-svc-fees__room small {
		overflow: hidden;
		font-size: 10.5px;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.pyp-prose .pyp-svc-fees__room strong {
		align-self: start;
		font-size: 14.5px;
		line-height: 1.2;
	}

	.pyp-svc-run {
		grid-template-columns: 52px minmax(0, 1fr) auto;
		grid-template-areas:
			"cal when when"
			"cal seats seats"
			"price price cta";
		gap: 10px 12px;
		padding: 12px;
	}

	.pyp-svc-run__cal {
		height: 56px;
	}

	.pyp-prose .pyp-svc-run__when b {
		font-size: 15px;
	}

	.pyp-svc-run__price {
		padding-top: 10px;
		border-top: 1px solid var(--pyp-hairline);
	}

	.pyp-svc-run__cta {
		align-self: end;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pyp-svc-run,
	.pyp-svc-run__cta i {
		transition: none;
	}
}