.treatment-page {
    --cocoon-gold: #ce982c;
    --cocoon-ivory: #fffce5;
    --cocoon-sand: #f8f3ea;
    --cocoon-grey: #333333;
    --cocoon-white: #ffffff;
    --cocoon-border: rgba(51, 51, 51, 0.14);

}


.bianca {
    margin: auto !important;
    max-width: 800px;
}
.ct-back-to-top[data-alignment=right] {
    left: calc(var(--theme-frame-size, 0px) + var(--back-top-side-offset, 25px)) ;
    right: auto !important;
}

/* Position every submenu toggle beside its own menu item */
.cocoon-menu .menu-item-has-children {
    position: relative;
}

/* Leave space for the toggle on every parent link */
.cocoon-menu .menu-item-has-children > a {
    display: block;
    padding-right: 45px;
}

/* Keep each toggle aligned with its own link */
.cocoon-menu .menu-item-has-children > .cocoon-submenu-toggle {
    top: 7px;
    right: 0;
}

/* Smooth logo resize */
.cocoon-header__logo-image {
    transition:
        max-height 0.3s ease,
        max-width 0.3s ease;
}

/* Smaller logo after scrolling */
.cocoon-site-header.is-scrolled .cocoon-header__logo-image {
    width: auto;
    max-height: 100px;
}

.cocoon-divider {
    --divider-color: var(--cocoon-grey);
    --divider-line-color: var(--cocoon-grey);
    --divider-icon-width: 28px;
    --divider-line-width: 90px;

    display: flex;
    width: 100%;
    margin: 0px auto 10px auto;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.cocoon-divider__line {
    width: min(var(--divider-line-width), 30%);
    height: 1px;
    background: var(--divider-line-color);
}

.cocoon-divider__icon {
    display: block;
    width: var(--divider-icon-width);
    aspect-ratio: 87.97 / 75.97;
    flex: 0 0 auto;
    background-color: var(--divider-color);

    -webkit-mask-image:
        url("../images/cocoon-divider.svg");
    mask-image:
        url("../images/cocoon-divider.svg");

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: contain;
    mask-size: contain;
}






/* =========================================================
   Other treatments
   ========================================================= */

.other-treatments {
	padding: clamp(70px, 8vw, 110px) 24px;
	overflow: hidden;
	background: var(--cocoon-sand);
}

.other-treatments__inner {
	width: min(1248px, 100%);
	margin: 0 auto;
}

.other-treatments__heading {
	width: min(700px, 100%);
	margin: 0 auto clamp(42px, 5vw, 62px);
	text-align: center;
}

.other-treatments__heading h2 {
}

.other-treatments__introduction {
	max-width: 620px;
	margin: 22px auto 0;
	color: #555555;
	font-size: 1rem;
	line-height: 1.7;
}


/* =========================================================
   Card grid
   ========================================================= */

.other-treatments__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(18px, 2vw, 28px);
}

.other-treatment-card {
	min-width: 0;
	height: 100%;
	margin: 0;
	transition:
		opacity 280ms ease,
		transform 280ms ease;
}

.other-treatment-card__link {
	display: flex;
	height: 100%;
	overflow: hidden;
	border: 1px solid rgba(206, 152, 44, 0.3);
	color: #333333;
	background: #ffffff;
	text-decoration: none;
	flex-direction: column;
	transition:
		border-color 250ms ease,
		box-shadow 250ms ease,
		transform 250ms ease;
}

.other-treatment-card__link:hover,
.other-treatment-card__link:focus-visible {
	border-color: #ce982c;
	color: #333333;
	box-shadow: 0 14px 38px rgba(51, 51, 51, 0.1);
	transform: translateY(-5px);
}

.other-treatment-card__link:focus-visible {
	outline: 2px solid #ce982c;
	outline-offset: 4px;
}


/* =========================================================
   Square treatment image
   ========================================================= */

.other-treatment-card__media {
	position: relative;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: #f8f3ea;
}

.other-treatment-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms ease;
}

.other-treatment-card__link:hover .other-treatment-card__image,
.other-treatment-card__link:focus-visible .other-treatment-card__image {
	transform: scale(1.04);
}

.other-treatment-card__placeholder {
	width: 100%;
	height: 100%;
	background:
		linear-gradient(
			135deg,
			#f8f3ea 0%,
			#fffce5 50%,
			#f2e7cf 100%
		);
}


/* =========================================================
   Card content
   ========================================================= */

.other-treatment-card__content {
	display: flex;
	min-height: 155px;
	padding: 25px 24px 23px;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
}

.other-treatment-card__content h3 {
	margin: 0 0 24px;
	color: #333333;
	font-family: "Playfair Display", serif;
	font-size: clamp(1.18rem, 1.6vw, 1.45rem);
	font-weight: 700;
	line-height: 1.3;
}

.other-treatment-card__action {
	display: inline-flex;
	margin-top: auto;
	color: #9d711c;
	font-size: 0.73rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	align-items: center;
	gap: 10px;
}

.other-treatment-card__action svg {
	width: 18px;
	height: 18px;
	stroke-width: 1.6;
	transition: transform 250ms ease;
}

.other-treatment-card__link:hover
	.other-treatment-card__action svg,
.other-treatment-card__link:focus-visible
	.other-treatment-card__action svg {
	transform: translateX(5px);
}


/* =========================================================
   Navigation
   Hidden on desktop because all four cards fit
   ========================================================= */

.other-treatments__navigation {
	display: none;
	margin-top: 35px;
	text-align: center;
}

.other-treatments__button {
	display: inline-flex;
	min-width: 125px;
	padding: 13px 22px;
	border: 1px solid #ce982c;
	border-radius: 0;
	color: #333333;
	background: transparent;
	font: inherit;
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	gap: 11px;
	transition:
		color 220ms ease,
		background-color 220ms ease;
}

.other-treatments__button:hover,
.other-treatments__button:focus-visible {
	color: #ffffff;
	background: #ce982c;
}

.other-treatments__button:focus-visible {
	outline: 2px solid #333333;
	outline-offset: 3px;
}

.other-treatments__button svg {
	width: 18px;
	height: 18px;
	stroke-width: 1.7;
	transition: transform 250ms ease;
}

.other-treatments__button[aria-expanded="true"] svg {
	transform: rotate(180deg);
}


/* =========================================================
   JS-controlled cards
   ========================================================= */

.other-treatments.is-slider-ready
	.other-treatment-card[hidden] {
	display: none;
}

.other-treatment-card.is-entering {
	opacity: 0;
	transform: translateY(10px);
}


/* =========================================================
   Tablet: three cards at a time
   ========================================================= */

@media (max-width: 900px) {
	.other-treatments__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.other-treatments__navigation.is-visible {
		display: block;
	}

	/*
	 * Centre the single fourth card when the second page is open.
	 */
	.other-treatments.is-second-page
		.other-treatments__grid
		.other-treatment-card:only-child {
		grid-column: 2;
	}
}


/* =========================================================
   Mobile: two cards at a time
   ========================================================= */

@media (max-width: 600px) {
	.other-treatments {
		padding: 65px 20px;
	}

	.other-treatments__heading {
		margin-bottom: 38px;
	}

	.other-treatments__heading h2 {
		font-size: clamp(2rem, 10vw, 2.65rem);
	}

	.other-treatments__introduction {
		margin-top: 18px;
		font-size: 0.95rem;
		line-height: 1.65;
	}

	.other-treatments__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 15px;
	}

	.other-treatment-card__content {
		min-height: 140px;
		padding: 20px 17px 18px;
	}

	.other-treatment-card__content h3 {
		margin-bottom: 19px;
		font-size: clamp(1.05rem, 4.5vw, 1.25rem);
	}

	.other-treatment-card__action {
		font-size: 0.65rem;
		letter-spacing: 0.065em;
		gap: 7px;
	}

	.other-treatment-card__action svg {
		width: 16px;
		height: 16px;
	}

	.other-treatments__navigation {
		margin-top: 28px;
	}
}


/* =========================================================
   Very small screens
   ========================================================= */

@media (max-width: 380px) {
	.other-treatments {
		padding-right: 15px;
		padding-left: 15px;
	}

	.other-treatments__grid {
		gap: 11px;
	}

	.other-treatment-card__content {
		min-height: 132px;
		padding: 17px 14px 16px;
	}

	.other-treatment-card__content h3 {
		font-size: 1rem;
	}

	.other-treatment-card__action {
		font-size: 0.6rem;
	}
}


/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.other-treatment-card,
	.other-treatment-card__link,
	.other-treatment-card__image,
	.other-treatment-card__action svg,
	.other-treatments__button svg {
		transition: none;
	}
}