/**
 * DERMAL Phase C Services composition layer.
 *
 * Task 29 owns only the Services route's visual hierarchy, responsive rhythm
 * and component presentation. The frozen template, treatment model and
 * interaction hooks remain authoritative.
 */

.services-page {
	--dermal-services-section-space: clamp(4.5rem, 7vw, 7rem);
	--dermal-services-section-space-compact: clamp(3.5rem, 5vw, 5.5rem);
	--dermal-services-card-padding: clamp(1.25rem, 2.2vw, 2rem);
	--dermal-services-surface-border: 1px solid var(--dermal-color-border);
	--dermal-services-dark-surface: rgb(255 255 255 / 8%);
	--dermal-services-dark-border: rgb(255 255 255 / 15%);
}

.services-page :where(.section-title h1, .section-title h2) {
	line-height: var(--dermal-line-height-heading);
	text-wrap: balance;
}

.services-page .section-title h2 {
	font-size: clamp(2.25rem, 4vw, 3.25rem);
}

.services-page .section-title h3 {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: var(--dermal-letter-spacing-label);
	text-transform: uppercase;
}

.services-page .section-title p {
	max-width: 42rem;
	line-height: 1.7;
	text-wrap: pretty;
}

.services-page .section-row {
	margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.services-page :where(
	.page-header,
	.page-services,
	.our-process,
	.our-testimonials,
	.book-appointment
) {
	isolation: isolate;
}

.services-page :where(.page-services, .our-testimonials, .book-appointment) {
	padding-top: var(--dermal-services-section-space);
	padding-bottom: var(--dermal-services-section-space);
}

.services-page :where(.our-process, .book-appointment) {
	border: var(--dermal-services-surface-border);
	box-shadow: var(--dermal-shadow-sm);
}

/* Page header retains its landmark and breadcrumb while joining the Phase C hierarchy. */
.services-page .page-header {
	min-height: clamp(18rem, 32vw, 25rem);
	display: grid;
	place-items: center;
	padding: clamp(5rem, 10vw, 8rem) 0;
	overflow: hidden;
	background:
		radial-gradient(circle at 18% 18%, rgb(255 255 255 / 9%), transparent 30%),
		linear-gradient(135deg, var(--dermal-color-brand-900), var(--dermal-color-brand-700));
}

.services-page .page-header-box {
	position: relative;
	z-index: 1;
}

.services-page .page-header-box h1 {
	font-size: clamp(3rem, 6vw, 4.75rem);
	line-height: 1.05;
	text-wrap: balance;
}

.services-page .page-header-box .breadcrumb {
	gap: 0.25rem;
	padding: 0.625rem 1rem;
	background: rgb(255 255 255 / 8%);
	border: 1px solid rgb(255 255 255 / 14%);
	border-radius: var(--dermal-radius-pill);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

/* Treatment cards keep one shared list-detail record while gaining a clearer surface. */
.services-page .page-services .row {
	row-gap: clamp(1.25rem, 2vw, 2rem);
}

.services-page .page-services .service-box {
	height: 100%;
	margin-bottom: 0;
	overflow: hidden;
	background: var(--dermal-color-brand-900);
	border: 1px solid rgb(255 255 255 / 16%);
	border-radius: var(--dermal-radius-xl);
	box-shadow: var(--dermal-shadow-md);
}

.services-page .page-services .service-image,
.services-page .page-services .service-image a,
.services-page .page-services .service-image figure,
.services-page .page-services .service-image img {
	height: 100%;
	border-radius: inherit;
}

.services-page .page-services .service-image a {
	cursor: pointer;
}

.services-page .page-services .service-image img {
	min-height: 22rem;
	transition: transform var(--dermal-motion-slow) var(--dermal-ease-standard);
}

.services-page .page-services .service-image figure::before {
	background: linear-gradient(180deg, transparent 38%, rgb(17 52 47 / 95%) 91%);
}

.services-page .page-services .service-item {
	bottom: clamp(1.25rem, 2.8vw, 2.5rem);
	left: clamp(1.25rem, 2.8vw, 2.5rem);
	right: clamp(1.25rem, 2.8vw, 2.5rem);
}

.services-page .page-services .service-content h3 {
	font-size: clamp(1.5rem, 2vw, 1.8rem);
	font-weight: 700;
	line-height: 1.2;
	text-shadow: 0 1px 2px rgb(0 0 0 / 24%);
}

.services-page .page-services .service-content p {
	max-width: 24rem;
	color: rgb(255 255 255 / 82%);
	line-height: 1.6;
}

.services-page .page-services .service-content a {
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

.services-page .page-services .service-content a:focus-visible,
.services-page .page-services .service-image a:focus-visible {
	outline: 3px solid var(--dermal-color-on-brand);
	outline-offset: 4px;
}

/* Process stays a source split composition with stronger readable surfaces. */
.services-page .our-process {
	overflow: hidden;
}

.services-page .process-video-box,
.services-page .process-video-image,
.services-page .process-video-image img {
	border-radius: var(--dermal-radius-xl) 0 0 var(--dermal-radius-xl);
}

.services-page .process-video-image figure::before {
	background: linear-gradient(180deg, transparent 42%, rgb(17 52 47 / 92%) 100%);
}

.services-page .process-video-image img.services-guide-hero-image {
	object-position: 50% 28%;
}

.services-page .video-play-box {
	gap: var(--dermal-space-4);
	padding: var(--dermal-space-4);
	background: var(--dermal-services-dark-surface);
	border: 1px solid var(--dermal-services-dark-border);
	border-radius: var(--dermal-radius-lg);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.services-page .video-play-button a {
	flex: 0 0 3.75rem;
	margin-right: 0;
	cursor: pointer;
	transition:
		color var(--dermal-motion-base) var(--dermal-ease-standard),
		background-color var(--dermal-motion-base) var(--dermal-ease-standard);
}

.services-page .video-play-button a:is(:hover, :focus-visible) {
	color: var(--dermal-color-brand-900);
	background: var(--dermal-color-on-brand);
}

.services-page .our-process-content {
	padding-top: var(--dermal-services-section-space-compact);
	padding-bottom: var(--dermal-services-section-space-compact);
}

.services-page .our-process-list ul {
	gap: var(--dermal-space-3);
}

.services-page .our-process-list ul li {
	padding: var(--dermal-space-3) var(--dermal-space-3) var(--dermal-space-3) 2.25rem;
	background: rgb(255 255 255 / 62%);
	border: var(--dermal-services-surface-border);
	border-radius: var(--dermal-radius-md);
}

.services-page .our-process-list ul li::before {
	content: "";
	top: 1.05rem;
	left: 0.9rem;
	width: 0.75rem;
	height: 0.75rem;
	background: var(--dermal-color-brand-100);
	border: 3px solid var(--dermal-color-brand-700);
	border-radius: 50%;
}

.services-page .our-process-btn,
.services-page .our-process-content .section-footer-text {
	margin-top: var(--dermal-space-8);
}

/* Testimonials and client logos are clearly grouped, keyboard-focusable regions. */
.services-page .our-testimonials {
	background: transparent;
}

.services-page .testimonial-slider .swiper,
.services-page .testimonial-company-slider .swiper {
	border-radius: var(--dermal-radius-xl);
}

.services-page .testimonial-item {
	height: 100%;
	padding: var(--dermal-services-card-padding);
	border: var(--dermal-services-surface-border);
	border-radius: var(--dermal-radius-xl);
	box-shadow: var(--dermal-shadow-sm);
}

.services-page .testimonial-content p {
	line-height: 1.65;
}

.services-page .author-image figure {
	box-shadow: 0 0 0 3px var(--dermal-color-surface), 0 0 0 4px var(--dermal-color-border);
}

.services-page .testimonial-pagination {
	margin-top: var(--dermal-space-8);
}

.services-page .trusted-client-box {
	gap: var(--dermal-space-8);
	padding: var(--dermal-services-card-padding);
	margin-top: var(--dermal-space-10);
	background: var(--dermal-color-surface);
	border: var(--dermal-services-surface-border);
	border-radius: var(--dermal-radius-xl);
	box-shadow: var(--dermal-shadow-sm);
}

.services-page .trusted-client-logo {
	display: grid;
	min-height: 4rem;
	place-items: center;
}

.services-page .swiper:focus-visible {
	outline: 3px solid var(--dermal-color-focus);
	outline-offset: 5px;
}

/* Appointment remains PII-free in the internal GET query. */
.services-page .book-appointment-content,
.services-page .booking-form-box {
	position: relative;
	z-index: 1;
}

.services-page .booking-contact-list {
	gap: var(--dermal-space-4);
}

.services-page .booking-contact-item {
	width: calc(50% - 0.5rem);
	min-width: 0;
	padding: var(--dermal-space-4);
	background: var(--dermal-services-dark-surface);
	border: 1px solid var(--dermal-services-dark-border);
	border-radius: var(--dermal-radius-lg);
}

.services-page .booking-contact-list .icon-box {
	flex: 0 0 3.125rem;
	border-radius: var(--dermal-radius-md);
}

.services-page .google-map-iframe {
	overflow: hidden;
	border-color: var(--dermal-services-dark-border);
	border-radius: var(--dermal-radius-xl);
	box-shadow: var(--dermal-shadow-sm);
}

.services-page .google-map-iframe,
.services-page .google-map-iframe iframe {
	border-radius: inherit;
}

.services-page .booking-form-box {
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background: var(--dermal-color-surface);
	border: var(--dermal-services-surface-border);
	border-radius: var(--dermal-radius-xl);
	box-shadow: var(--dermal-shadow-md);
}

.services-page .book-appointment-form .form-control {
	opacity: 1;
}

.services-page .book-appointment-form textarea.form-control {
	min-height: 8.5rem;
	resize: vertical;
}

.services-page .our-scrolling-ticker {
	border-top: var(--dermal-services-surface-border);
}

.services-page > .our-process:last-child {
	margin-block-end: 4.5rem;
}

@media (hover: hover) {
	.services-page .page-services .service-box:hover .service-image img {
		transform: scale(1.04);
	}
}

@media (max-width: 991px) {
	.services-page > .our-process:last-child {
		margin-block-end: 3.5rem;
	}

	.services-page :where(.page-services, .our-testimonials, .book-appointment) {
		padding-top: var(--dermal-services-section-space-compact);
		padding-bottom: var(--dermal-services-section-space-compact);
	}

	.services-page .process-video-box,
	.services-page .process-video-image,
	.services-page .process-video-image img {
		border-radius: var(--dermal-radius-xl) var(--dermal-radius-xl) 0 0;
	}

	.services-page .our-process-content {
		padding-right: max(0.9375rem, 5vw);
		padding-left: max(0.9375rem, 5vw);
	}

	.services-page .booking-form-box {
		margin-bottom: var(--dermal-space-8);
	}
}

@media (max-width: 767px) {
	.services-page {
		--dermal-services-section-space: 4rem;
		--dermal-services-section-space-compact: 3.5rem;
	}

	.services-page > .our-process:last-child {
		margin-block-end: 2.5rem;
	}

	.services-page .page-header {
		min-height: 16rem;
		padding: 4.5rem 0;
	}

	.services-page .page-header-box h1 {
		font-size: clamp(2.5rem, 13vw, 3.5rem);
	}

	.services-page .page-services .service-image img {
		min-height: 20rem;
	}

	.services-page .page-services .service-item {
		bottom: var(--dermal-space-5);
		left: var(--dermal-space-5);
		right: var(--dermal-space-5);
	}

	.services-page .video-play-box {
		bottom: var(--dermal-space-4);
		left: var(--dermal-space-4);
		right: var(--dermal-space-4);
	}

	.services-page .process-video-image img.services-guide-hero-image {
		object-position: 50% 24%;
	}

	.services-page .video-play-content h2 {
		font-size: clamp(1.25rem, 7vw, 1.75rem);
	}

	.services-page .our-process-list ul li,
	.services-page .booking-contact-item {
		width: 100%;
	}

	.services-page .testimonial-item {
		padding: var(--dermal-space-5);
	}

	.services-page .testimonial-quote {
		margin-right: var(--dermal-space-3);
	}

	.services-page .trusted-client-box {
		display: block;
	}

	.services-page .trusted-client-title,
	.services-page .trusted-client-box .testimonial-company-slider {
		width: 100%;
	}

	.services-page .trusted-client-title {
		margin-bottom: var(--dermal-space-6);
	}

	.services-page .trusted-client-title h3 {
		max-width: none;
	}

	.services-page .booking-form-box {
		padding: var(--dermal-space-5);
	}
}

@media (prefers-reduced-motion: reduce) {
	.services-page .page-services .service-image img,
	.services-page .video-play-button a {
		transition: none !important;
	}

	.services-page .page-services .service-box:hover .service-image img {
		transform: none !important;
	}
}