/* =========================================================================
 * Inner pages — Treatments, Fees, Membership, Team
 *
 * Page hero, Membership hero, Treatments grid, Fee cards, Membership
 * compare, Team member profile, More of the team.
 * Sizes are Figma pixels × --bo-s (one design pixel); see foundation.css.
 * ====================================================================== */

/* -------------------------------------------------------------------------
 * Page hero — Treatments, Fees, Team (Proto / Hero load: Treatments …)
 * ---------------------------------------------------------------------- */

.bo-page-hero,
.bo-membership-hero {
	--bo-hero-title: max(60px, calc(216 * var(--bo-s)));
}

.bo-page-hero {
	padding-top: calc(var(--bo-header-h) + max(32px, calc(60 * var(--bo-s))));
	padding-bottom: max(56px, calc(110 * var(--bo-s)));
	overflow: hidden;
}

.bo-page-hero__row,
.bo-membership-hero__row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 48px;
	color: var(--ps-ivory);
}

.bo-section .bo-page-hero__title,
.bo-section .bo-membership-hero__title {
	flex-shrink: 0;
	color: var(--ps-ivory);
	font-family: var(--bo-font-display);
	font-weight: 400;
	font-size: var(--bo-hero-title);
	line-height: 0.9815;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

.bo-section .bo-page-hero__text {
	flex-shrink: 0;
	width: max(300px, calc(620 * var(--bo-s)));
	color: var(--ps-ivory);
}

/* -------------------------------------------------------------------------
 * Membership hero — Proto / Hero load: Membership
 * ---------------------------------------------------------------------- */

.bo-membership-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.bo-section .bo-membership-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bo-membership-hero__shade {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, var(--ps-velvet) 93%, transparent);
}

.bo-membership-hero__inner {
	padding-top: calc(var(--bo-header-h) + max(32px, calc(50 * var(--bo-s))));
}

.bo-section .bo-membership-hero__text {
	flex-shrink: 0;
	width: max(300px, calc(560 * var(--bo-s)));
	color: var(--ps-ivory);
}

.bo-section .bo-membership-hero__plans {
	display: flex;
	gap: calc(28 * var(--bo-s));
	margin-top: max(48px, calc(158 * var(--bo-s)));
}

/* A Denplan plan card. The Figma gradient stops are written as rgb()
   because neither is a palette colour: a lit and a shaded emerald. */
.bo-membership-plan {
	--bo-card-radius: 20px;
	--bo-plan-from: rgb(8 107 82);
	--bo-plan-to: rgb(5 69 51);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	flex: 0 0 calc(385 * var(--bo-s));
	height: calc(500 * var(--bo-s));
	padding: calc(35 * var(--bo-s)) calc(35 * var(--bo-s)) calc(11 * var(--bo-s));
	border: 1px solid var(--ps-brass-light);
	border-radius: 20px;
	background: linear-gradient(127.6deg, var(--bo-plan-from) 0%, var(--bo-plan-to) 71.43%);
	box-shadow: 0 24px 46px color-mix(in srgb, #000 42%, transparent);
	color: var(--ps-ivory);
	transform: var(--bo-plan-end);
	transition: transform 1200ms var(--bo-ease-out) 120ms;
}

/* End state: each card drifts up and tilts (offsets measured from Figma). */
.bo-membership-plan--1 { --bo-plan-end: translate(calc(-13.35 * var(--bo-s)), calc(-60.27 * var(--bo-s))) rotate(3deg); }
.bo-membership-plan--2 { --bo-plan-end: translate(calc(6.48 * var(--bo-s)), calc(-75.13 * var(--bo-s))) rotate(-1.5deg); }
.bo-membership-plan--3 { --bo-plan-end: translate(calc(-6.61 * var(--bo-s)), calc(-65.05 * var(--bo-s))) rotate(1.5deg); }
.bo-membership-plan--4 { --bo-plan-end: translate(calc(12.82 * var(--bo-s)), calc(-80.42 * var(--bo-s))) rotate(-3deg); }

/* Start state, until the hero has loaded. */
.bo-js .bo-membership-hero:not(.is-revealed) .bo-membership-plan {
	transform: none;
}

.bo-section .bo-membership-plan__label {
	margin-bottom: calc(20 * var(--bo-s));
	color: var(--ps-brass-light);
}

.bo-section .bo-membership-plan__title {
	color: var(--ps-ivory);
}

.bo-section .bo-membership-plan__price {
	margin-top: auto;
	color: var(--ps-ivory);
	white-space: nowrap;
}

.bo-section .bo-membership-plan__note {
	margin-top: calc(2 * var(--bo-s));
	color: var(--ps-on-dark-muted);
}

.bo-membership-plan .bo-card-hover {
	inset: -1px;
}

@media (prefers-reduced-motion: reduce) {
	.bo-membership-plan { transition: none; }
}

/* -------------------------------------------------------------------------
 * Treatments grid
 * ---------------------------------------------------------------------- */

.bo-treatments-grid {
	padding-top: max(56px, calc(100 * var(--bo-s)));
	padding-bottom: max(64px, calc(120 * var(--bo-s)));
}

.bo-treatments-grid__inner {
	display: flex;
	flex-direction: column;
	gap: max(16px, calc(32 * var(--bo-s)));
}

.bo-treatments-grid__row {
	display: flex;
	align-items: stretch;
	gap: max(16px, calc(32 * var(--bo-s)));
}

/* Widths as drawn: 788 / 386 / 386 of the row, or four equal cards. */
.bo-treatment-card {
	--bo-card-radius: 20px;
	display: flex;
	flex-direction: column;
	flex: 386 1 0;
	min-width: 0;
	min-height: max(240px, calc(300 * var(--bo-s)));
	overflow: hidden;
	border-radius: 20px;
	background: var(--ps-paper);
	color: var(--ps-ink);
}

.bo-treatment-card.is-wide { flex-grow: 788; }

.bo-treatment-card--velvet { background: var(--ps-velvet); color: var(--ps-ivory); }
.bo-treatment-card--blush  { background: var(--ps-blush); }
.bo-treatment-card--mint   { background: var(--vk-color-mint); }

.bo-treatment-card__media {
	flex-shrink: 0;
	height: max(180px, calc(220 * var(--bo-s)));
	overflow: hidden;
}

/* The bundled photo is pre-cropped to the 1920 slot, so cover matches Figma
   there and never distorts at other widths. */
.bo-section .bo-treatment-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bo-treatment-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	padding: max(24px, calc(36 * var(--bo-s)));
}

.bo-treatment-card__copy {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bo-section .bo-treatment-card__title {
	white-space: nowrap;
}

.bo-section .bo-treatment-card__text { color: var(--ps-ink-muted); }
.bo-section .bo-treatment-card__price { color: var(--ps-emerald); white-space: nowrap; }

.bo-treatment-card--velvet .bo-treatment-card__title { color: var(--ps-ivory); }
.bo-section .bo-treatment-card--velvet .bo-treatment-card__text { color: var(--ps-on-dark-muted); }
.bo-section .bo-treatment-card--velvet .bo-treatment-card__price { color: var(--ps-brass-light); }

/* Photo cards: title and text left, price bottom-right. */
.bo-treatment-card.has-image .bo-treatment-card__body {
	flex-direction: row;
	align-items: flex-end;
	padding: max(24px, calc(32 * var(--bo-s))) max(24px, calc(36 * var(--bo-s))) max(24px, calc(36 * var(--bo-s)));
}

.bo-treatment-card.has-image .bo-treatment-card__copy {
	gap: 10px;
	max-width: max(280px, calc(480 * var(--bo-s)));
}

@media (max-width: 1199px) {
	.bo-section .bo-treatment-card__title { white-space: normal; }
}

@media (max-width: 1023px) {
	.bo-treatments-grid__row {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
	.bo-treatment-card.is-wide { grid-column: 1 / -1; }
	.bo-section .bo-treatment-card__media img { object-fit: cover; }
}

@media (max-width: 767px) {
	.bo-treatments-grid__row { grid-template-columns: 1fr; }
	.bo-treatment-card { min-height: 0; }
	.bo-treatment-card.has-image .bo-treatment-card__body {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* -------------------------------------------------------------------------
 * Fee cards
 * ---------------------------------------------------------------------- */

.bo-fees-cards {
	padding-top: max(56px, calc(100 * var(--bo-s)));
	padding-bottom: max(64px, calc(120 * var(--bo-s)));
}

.bo-fees-cards__columns {
	display: flex;
	align-items: flex-start;
	gap: max(16px, calc(32 * var(--bo-s)));
}

.bo-fees-cards__column {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: max(16px, calc(32 * var(--bo-s)));
	min-width: 0;
}

.bo-fees-card,
.bo-fees-prompt {
	box-sizing: border-box;
	border-radius: 20px;
	break-inside: avoid;
}

.bo-fees-card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: max(24px, calc(36 * var(--bo-s))) max(20px, calc(36 * var(--bo-s))) max(16px, calc(24 * var(--bo-s)));
	background: var(--ps-paper);
	color: var(--ps-ink);
}

.bo-section .bo-fees-card__rows { margin: 0; }

.bo-fees-card__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 13px;
	border-top: 1px solid var(--ps-line-light);
}

.bo-fees-card__row dt {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--ps-ink);
}

.bo-section .bo-fees-card__price {
	display: flex;
	flex-shrink: 0;
	align-items: baseline;
	gap: 10px;
	margin: 0;
	white-space: nowrap;
}

.bo-fees-card__child { color: var(--ps-ink-muted); }
.bo-fees-card__adult { color: var(--ps-emerald); }

.bo-fees-prompt {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: max(24px, calc(36 * var(--bo-s)));
	background: var(--ps-velvet);
	color: var(--ps-ivory);
}

.bo-section .bo-fees-prompt__title { color: var(--ps-ivory); }
.bo-section .bo-fees-prompt__text { color: var(--ps-on-dark-muted); }
.bo-fees-prompt__action { margin-top: 24px; } /* 8px spacer frame + one more 16px gap */

@media (max-width: 1199px) {
	.bo-fees-cards__columns {
		display: block;
		columns: 2;
		column-gap: 24px;
	}
	.bo-fees-cards__column { display: contents; }
	.bo-fees-card,
	.bo-fees-prompt { margin-bottom: 24px; }
}

@media (max-width: 767px) {
	.bo-fees-cards__columns { columns: 1; }
	.bo-fees-card,
	.bo-fees-prompt { margin-bottom: 16px; }
}

/* -------------------------------------------------------------------------
 * Membership: what you get
 * ---------------------------------------------------------------------- */

.bo-membership-compare {
	padding-top: max(64px, calc(130 * var(--bo-s)));
	padding-bottom: max(64px, calc(120 * var(--bo-s)));
}

.bo-membership-compare__row {
	display: flex;
	align-items: flex-start;
	gap: max(40px, calc(96 * var(--bo-s)));
}

.bo-membership-compare__included {
	display: flex;
	flex: 0 0 max(300px, calc(620 * var(--bo-s)));
	flex-direction: column;
	gap: 28px;
}

.bo-section .bo-membership-compare__heading { color: var(--ps-ink); }

.bo-membership-compare__list li {
	padding-block: 16px;
	border-top: 1px solid var(--ps-line-light);
	color: var(--ps-ink);
}

.bo-membership-compare__card {
	box-sizing: border-box;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	padding: max(28px, calc(56 * var(--bo-s))) max(24px, calc(56 * var(--bo-s))) max(24px, calc(48 * var(--bo-s)));
	border-radius: 24px;
	background: var(--ps-paper);
}

.bo-section .bo-membership-compare__title { color: var(--ps-ink); }
.bo-section .bo-membership-compare__text { color: var(--ps-ink-muted); }

/* Rows sit 12px apart, each with a rule on top — border-spacing gives the
   gap, the negative margins cancel it above the first and below the last. */
.bo-membership-compare__table {
	width: 100%;
	margin: 16px 0 -12px;
	border-collapse: separate;
	border-spacing: 0 12px;
	table-layout: fixed;
}

.bo-membership-compare__table th,
.bo-membership-compare__table td {
	padding: 16px 12px 16px 0;
	text-align: left;
	vertical-align: middle;
}

.bo-membership-compare__table thead th {
	color: var(--ps-ink-muted);
}

.bo-membership-compare__table tbody :is(th, td) {
	border-top: 1px solid var(--ps-line-light);
	color: var(--ps-ink);
}

.bo-membership-compare__table tbody .bo-membership-compare__diff {
	color: var(--ps-emerald);
}

@media (max-width: 1199px) {
	.bo-membership-compare__row { flex-direction: column; }
	.bo-membership-compare__included,
	.bo-membership-compare__card { flex: none; width: 100%; }
}

@media (max-width: 767px) {
	.bo-membership-compare__table,
	.bo-membership-compare__table tbody,
	.bo-membership-compare__table tr { display: block; }
	.bo-membership-compare__table { margin: 8px 0 0; }
	.bo-membership-compare__table thead { display: none; }
	.bo-membership-compare__table tbody tr {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 4px 16px;
		padding-block: 16px;
		border-top: 1px solid var(--ps-line-light);
	}
	.bo-membership-compare__table tbody :is(th, td) {
		display: block;
		padding: 0;
		border: 0;
	}
	.bo-membership-compare__table tbody th { grid-column: 1 / -1; }
	.bo-membership-compare__table tbody td::before {
		content: attr(data-label);
		display: block;
		color: var(--ps-ink-muted);
		font-size: 13px;
		line-height: 20px;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}
}

/* -------------------------------------------------------------------------
 * Team member profile
 * ---------------------------------------------------------------------- */

.bo-team-member {
	padding-top: max(64px, calc(120 * var(--bo-s)));
	padding-bottom: max(56px, calc(100 * var(--bo-s)));
}

.bo-team-member__row {
	display: flex;
	align-items: flex-start;
	gap: max(40px, calc(96 * var(--bo-s)));
}

.bo-team-member__portrait {
	display: flex;
	flex: 0 0 max(260px, calc(520 * var(--bo-s)));
	flex-direction: column;
	gap: 28px;
}

.bo-team-member__photo {
	box-sizing: border-box;
	width: max(240px, calc(400 * var(--bo-s)));
	aspect-ratio: 1;
	overflow: hidden;
	border: 3px solid var(--ps-brass);
	border-radius: 50%;
}

.bo-section .bo-team-member__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bo-section .bo-team-member__credentials {
	max-width: 480px;
	color: var(--ps-ink-muted);
}

.bo-team-member__bio {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.bo-section .bo-team-member__name { color: var(--ps-ink); }
.bo-section .bo-team-member__role { color: var(--ps-emerald); }

.bo-section .bo-team-member__rows {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 32px 0 0;
}

.bo-team-member__item {
	display: flex;
	align-items: flex-start;
	gap: 32px;
	padding-block: 22px;
	border-top: 1px solid var(--ps-line-light);
}

.bo-team-member__item dt {
	flex: 0 0 max(180px, calc(280 * var(--bo-s)));
	color: var(--ps-ink);
}

.bo-section .bo-team-member__item dd {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	color: var(--ps-ink-muted);
}

.bo-team-member__nowrap { white-space: nowrap; }

/* Stacked: portrait, then name and bio, then the credentials line. */
@media (max-width: 1023px) {
	.bo-team-member__row { flex-direction: column; gap: 32px; }
	.bo-team-member__portrait { display: contents; }
	.bo-team-member__photo { order: 1; }
	.bo-team-member__bio { order: 2; flex: none; width: 100%; }
	.bo-section .bo-team-member__credentials { order: 3; }
}

@media (max-width: 767px) {
	.bo-team-member__item { flex-direction: column; gap: 6px; }
	.bo-team-member__item dt { flex: none; }
}

/* -------------------------------------------------------------------------
 * More of the team — Proto / Team plaque
 * ---------------------------------------------------------------------- */

.bo-team-plaques {
	padding-bottom: max(64px, calc(120 * var(--bo-s)));
}

.bo-team-plaques__row {
	display: flex;
	gap: max(16px, calc(32 * var(--bo-s)));
}

.bo-team-plaque {
	--bo-card-radius: 24px;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	min-width: 0;
	min-height: max(420px, calc(560 * var(--bo-s)));
	overflow: hidden;
	border-radius: 24px;
	background: var(--ps-blush);
}

.bo-team-plaque--stone { background: var(--ps-stone); }
.bo-team-plaque--paper { background: var(--ps-paper); }
.bo-team-plaque--mint  { background: var(--vk-color-mint); }

.bo-team-plaque__media {
	flex-shrink: 0;
	height: max(220px, calc(340 * var(--bo-s)));
	overflow: hidden;
}

.bo-section .bo-team-plaque__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bo-team-plaque__copy {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: max(24px, calc(32 * var(--bo-s))) max(24px, calc(44 * var(--bo-s))) max(28px, calc(36 * var(--bo-s)));
}

.bo-section .bo-team-plaque__title { color: var(--ps-ink); }

.bo-section .bo-team-plaque__text {
	max-width: max(280px, calc(620 * var(--bo-s)));
	color: var(--ps-ink-muted);
}

@media (max-width: 767px) {
	.bo-team-plaques__row { flex-direction: column; }
	.bo-team-plaque { min-height: 0; }
}

/* -------------------------------------------------------------------------
 * Heroes on tablet and phone
 * ---------------------------------------------------------------------- */

@media (max-width: 1023px) {
	.bo-page-hero__row,
	.bo-membership-hero__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}
	.bo-section .bo-page-hero__text,
	.bo-section .bo-membership-hero__text { width: 100%; max-width: 620px; }

	.bo-section .bo-membership-hero__plans {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 16px;
		margin-top: 48px;
		padding-bottom: 56px;
	}
	.bo-membership-plan {
		height: auto;
		aspect-ratio: 385 / 500;
		padding: 28px 28px 16px;
	}
	.bo-membership-plan--1 { --bo-plan-end: rotate(3deg); }
	.bo-membership-plan--2 { --bo-plan-end: rotate(-1.5deg); }
	.bo-membership-plan--3 { --bo-plan-end: rotate(1.5deg); }
	.bo-membership-plan--4 { --bo-plan-end: rotate(-3deg); }
	.bo-section .bo-membership-plan__label { margin-bottom: 16px; }
}

@media (max-width: 767px) {
	.bo-section .bo-page-hero__title,
	.bo-section .bo-membership-hero__title { white-space: normal; }

	.bo-section .bo-membership-hero__plans { gap: 14px; }
	.bo-membership-plan { padding: 18px 16px 10px; }
	.bo-section .bo-membership-plan__label { margin-bottom: 10px; font-size: 13px; }
	.bo-section .bo-membership-plan__title { font-size: 20px; }
	.bo-section .bo-membership-plan__price { font-size: 40px; }
	.bo-section .bo-membership-plan__note { font-size: 15px; }
}

/* Four plan cards in a row on wide tablets; two by two below 900px, sized
   by their content rather than the desktop card shape. */
@media (max-width: 899px) {
	.bo-section .bo-membership-hero__plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
	.bo-membership-plan { aspect-ratio: auto; min-height: 240px; }
}