/* ==========================================================================
   Inner pages: page header, prose, grids, profiles, contact, search, 404
   ========================================================================== */

/* --- Page header -------------------------------------------------------- */

.tpl-page-hero {
	background-color: var(--c-ivory);
	background-image:
		radial-gradient(80% 140% at 100% 0%, rgba(145, 161, 132, 0.16) 0%, transparent 60%);
	padding-block: var(--sp-5) var(--sp-4);
}

[dir="rtl"] .tpl-page-hero {
	background-image:
		radial-gradient(80% 140% at 0% 0%, rgba(145, 161, 132, 0.16) 0%, transparent 60%);
}

.tpl-page-hero__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-3);
	align-items: center;
}

.tpl-page-hero__title {
	font-size: var(--fs-h2);
	font-weight: var(--fw-display);
	text-wrap: balance;
}

.tpl-page-hero__lead {
	margin-block-start: var(--sp-2);
	max-inline-size: 48ch;
	color: var(--c-muted);
	font-size: var(--fs-lead);
}

.tpl-page-hero__media {
	border-radius: var(--radius-md);
	overflow: hidden;
}

.tpl-page-hero__img {
	inline-size: 100%;
	block-size: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* --- Prose -------------------------------------------------------------- */

.tpl-prose {
	max-inline-size: 70ch;
	color: var(--c-text);
}

.tpl-prose > * + * {
	margin-block-start: var(--sp-2);
}

.tpl-prose h2 {
	margin-block-start: var(--sp-4);
	font-size: var(--fs-h2);
}

.tpl-prose h3 {
	margin-block-start: var(--sp-3);
	font-size: var(--fs-h3);
}

.tpl-prose a {
	color: var(--c-forest);
}

.tpl-prose ul,
.tpl-prose ol {
	padding-inline-start: var(--sp-3);
	list-style: revert;
}

.tpl-prose li + li {
	margin-block-start: 4px;
}

.tpl-prose img {
	border-radius: var(--radius-md);
}

.tpl-prose blockquote {
	margin: 0;
	padding-inline-start: var(--sp-3);
	border-inline-start: 2px solid var(--c-sage);
	color: var(--c-muted);
	font-family: var(--font-display);
	font-size: var(--fs-h3);
}

.tpl-prose--intro {
	margin-block-end: var(--sp-4);
}

/* --- About: story rows, pillars, reasons -------------------------------- */

.tpl-about-hero__actions {
	margin-block-start: var(--sp-3);
}

.tpl-feature-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-3);
	align-items: center;
}

.tpl-feature-row + .tpl-feature-row {
	margin-block-start: var(--sp-5);
}

.tpl-feature-row__text {
	color: var(--c-text);
	font-size: var(--fs-lead);
	line-height: var(--lh-body);
	max-inline-size: 60ch;
}

.tpl-feature-row__media {
	border-radius: var(--radius-md);
	overflow: hidden;
	background-color: var(--c-sage-200);
}

.tpl-feature-row__img {
	inline-size: 100%;
	aspect-ratio: 4 / 3;
	max-block-size: 58vh;
	object-fit: cover;
}

.tpl-pillars {
	background-color: var(--c-ivory);
}

.tpl-pillars__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-3);
}

.tpl-pillar {
	padding: var(--sp-3);
	background-color: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-md);
}

.tpl-pillar__icon {
	display: grid;
	place-items: center;
	inline-size: 48px;
	block-size: 48px;
	margin-block-end: var(--sp-2);
	background-color: var(--c-ivory);
	border-radius: var(--radius-pill);
	color: var(--c-forest);
}

.tpl-pillar__icon .tpl-icon {
	inline-size: 24px;
	block-size: 24px;
}

.tpl-pillar__title {
	margin-block-end: var(--sp-1);
	color: var(--c-forest);
	font-size: var(--fs-h3);
}

.tpl-pillar__text {
	color: var(--c-muted);
	font-size: var(--fs-small);
	line-height: var(--lh-body);
}

/* Reasons sit on a forest field, as the brand book's dark bands do. */
.tpl-reasons {
	background-color: var(--c-forest);
	background-image: url("../img/pattern-repeat-dark.svg");
	background-size: 240px auto;
	color: var(--c-ivory);
}

.tpl-reasons .tpl-section-head__title {
	color: var(--c-ivory);
}

.tpl-reasons__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-2);
}

.tpl-reason {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-2);
	border: 1px solid var(--c-line-dark);
	border-radius: var(--radius-md);
	font-size: var(--fs-small);
}

.tpl-reason__mark {
	display: grid;
	place-items: center;
	flex: none;
	inline-size: 32px;
	block-size: 32px;
	color: var(--c-sage);
}

.tpl-reason__mark .tpl-icon {
	inline-size: 20px;
	block-size: 20px;
}

@media (min-width: 600px) {
	.tpl-pillars__grid,
	.tpl-reasons__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.tpl-feature-row {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--sp-6);
	}

	/* Alternate the image side down the page. */
	.tpl-feature-row--flip .tpl-feature-row__text {
		order: 2;
	}

	.tpl-pillars__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.tpl-reasons__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* --- Page-builder content ----------------------------------------------- */
/* Pages built with Elementor under the previous theme ship per-page CSS that
   hard-codes the old gold accent (#D4AF37) and centres body copy at element
   level. That stylesheet is generated from the page data, which is not ours to
   edit, so these rules reclaim the brand palette and reading rhythm. The
   !important flags are deliberate: the generated selectors are more specific
   than any sane authored selector, and this is scoped to builder pages only. */

.tpl-has-builder-content .tpl-prose {
	max-inline-size: none;
}

.tpl-has-builder-content .elementor-heading-title {
	color: var(--c-forest) !important;
	font-family: var(--font-display) !important;
	font-weight: var(--fw-display) !important;
}

html[lang^="ar"] .tpl-has-builder-content .elementor-heading-title {
	font-family: var(--font-body) !important;
}

/* Body copy reads from the start edge, not centred. */
.tpl-has-builder-content .elementor-widget-text-editor,
.tpl-has-builder-content .elementor-widget-text-editor p {
	text-align: start !important;
	color: var(--c-text);
	font-family: var(--font-body);
	line-height: var(--lh-body);
}

.tpl-has-builder-content .elementor-widget-icon-box .elementor-icon {
	color: var(--c-forest) !important;
	border-color: var(--c-forest) !important;
	fill: var(--c-forest) !important;
}

.tpl-has-builder-content .elementor-widget-image img {
	border-radius: var(--radius-md);
}

/* Builder sections frequently carry fixed padding tuned for the old theme. */
.tpl-has-builder-content .elementor-section {
	padding-block: 0;
}

.tpl-has-builder-content .elementor-widget:not(:last-child) {
	margin-block-end: var(--sp-2);
}

/* Spacer widgets carry fixed pixel heights tuned for the old theme, which
   leave large blank bands between sections. Capped to the 8px rhythm. */
.tpl-has-builder-content .elementor-widget-spacer .elementor-spacer,
.tpl-has-builder-content .elementor-spacer-inner {
	block-size: auto !important;
	max-block-size: var(--sp-4) !important;
}

/* --- Grids -------------------------------------------------------------- */

.tpl-offers__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--sp-2);
}

/* auto-fill, not auto-fit: a category with only two cases keeps the same tile
   size as a fuller one instead of stretching across the row. */
.tpl-gallery__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--sp-3);
}

.tpl-gallery__grid--single {
	grid-template-columns: minmax(0, 720px);
}

.tpl-gallery__note {
	margin-block-start: var(--sp-4);
	padding-block-start: var(--sp-2);
	border-block-start: 1px solid var(--c-line);
	color: var(--c-muted);
	font-size: var(--fs-small);
}

/* --- Gallery grouping and filters --------------------------------------- */

.tpl-gallery__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-1);
	margin-block-end: var(--sp-4);
}

.tpl-gallery__filter {
	min-block-size: 36px;
	padding-inline: var(--sp-2);
	background-color: var(--c-white);
	border: 1px solid var(--c-line);
	color: var(--c-forest);
	text-decoration: none;
	transition: background-color var(--speed) var(--ease),
		border-color var(--speed) var(--ease),
		color var(--speed) var(--ease);
}

.tpl-gallery__filter:hover {
	border-color: var(--c-forest);
}

.tpl-gallery__filter.is-current {
	background-color: var(--c-forest);
	border-color: var(--c-forest);
	color: var(--c-ivory);
}

.tpl-gallery__group + .tpl-gallery__group {
	margin-block-start: var(--sp-5);
}

.tpl-gallery__group-title {
	margin-block-end: var(--sp-3);
	padding-block-end: var(--sp-1);
	border-block-end: 1px solid var(--c-line);
	color: var(--c-forest);
	font-size: var(--fs-h3);
	font-weight: var(--fw-display);
}

/* Anchor targets clear the sticky header. */
.tpl-gallery__group[id] {
	scroll-margin-block-start: calc(var(--header-h) + var(--sp-3));
}


/* --- Service detail ----------------------------------------------------- */

.tpl-service-detail {
	display: grid;
	gap: var(--sp-4);
}

.tpl-accordion__item {
	border-block-end: 1px solid var(--c-line);
}

.tpl-accordion__heading {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-body);
}

.tpl-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-2);
	inline-size: 100%;
	min-block-size: 56px;
	padding: var(--sp-1) 0;
	background: none;
	border: 0;
	color: var(--c-forest);
	font-size: var(--fs-lead);
	font-weight: 500;
	text-align: start;
	cursor: pointer;
}

.tpl-accordion__chevron {
	inline-size: 20px;
	block-size: 20px;
	flex: none;
	transition: transform var(--speed) var(--ease);
}

.tpl-accordion__trigger[aria-expanded="true"] .tpl-accordion__chevron {
	transform: rotate(180deg);
}

.tpl-accordion__panel {
	padding-block-end: var(--sp-2);
	color: var(--c-muted);
	max-inline-size: 70ch;
}

.tpl-accordion__panel[hidden] {
	display: none;
}

/* --- Profile ------------------------------------------------------------ */

.tpl-profile,
.tpl-offer-detail,
.tpl-contact {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-4);
	align-items: start;
}

.tpl-profile__media,
.tpl-offer-detail__media {
	border-radius: var(--radius-md);
	overflow: hidden;
	background-color: var(--c-sage-200);
}

/* Capped so a single-column tablet layout cannot blow the portrait up to
   ~860px tall. */
.tpl-profile__img,
.tpl-offer-detail__img {
	inline-size: 100%;
	aspect-ratio: 4 / 5;
	max-block-size: 62vh;
	object-fit: cover;
}

.tpl-profile__media,
.tpl-offer-detail__media {
	max-inline-size: 520px;
}

@media (min-width: 900px) {
	.tpl-profile__media,
	.tpl-offer-detail__media {
		max-inline-size: none;
	}
}

.tpl-profile__name,
.tpl-offer-detail__title {
	font-size: var(--fs-h2);
	font-weight: var(--fw-display);
}

.tpl-profile__role {
	margin-block-start: var(--sp-1);
	color: var(--c-muted);
}

.tpl-profile__actions,
.tpl-offer-detail__actions {
	margin-block-start: var(--sp-3);
}

.tpl-offer-detail__sub {
	margin-block-start: var(--sp-1);
	color: var(--c-muted);
	font-size: var(--fs-lead);
}

.tpl-offer-detail__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sp-1);
	margin-block-start: var(--sp-2);
}

.tpl-offer-detail__price-value {
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	font-weight: 600;
	color: var(--c-forest);
}

.tpl-offer-detail__terms {
	margin-block-start: var(--sp-2);
	color: var(--c-muted);
	font-size: var(--fs-small);
}

/* --- Contact ------------------------------------------------------------ */

.tpl-contact__list {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	margin-block: var(--sp-3);
}

.tpl-contact__item {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-2);
	color: var(--c-forest);
}

.tpl-contact__item .tpl-icon {
	color: var(--c-sage);
	margin-block-start: 3px;
}

.tpl-contact__value {
	font-style: normal;
	font-size: var(--fs-small);
	line-height: var(--lh-body);
}

.tpl-contact__privacy {
	margin-block-start: var(--sp-2);
	color: var(--c-muted);
	font-size: var(--fs-small);
}

/* Forminator renders its own markup; only spacing, controls and the submit
   button are nudged so the form matches the theme's buttons and touch targets. */
.tpl-contact__form .forminator-ui input,
.tpl-contact__form .forminator-ui textarea,
.tpl-contact__form .forminator-ui select {
	min-block-size: var(--tap);
	font-size: 16px; /* stops iOS zooming on focus */
}

.tpl-contact__form .forminator-ui .forminator-button-submit,
.tpl-contact__form .forminator-button-submit {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-block-size: var(--tap);
	padding: 12px var(--sp-4) !important;
	background-color: var(--c-forest) !important;
	border: 1px solid var(--c-forest) !important;
	border-radius: var(--radius-pill) !important;
	color: var(--c-ivory) !important;
	font-family: var(--font-body) !important;
	font-size: var(--fs-small) !important;
	font-weight: 500 !important;
	letter-spacing: var(--ls-label);
	transition: background-color var(--speed) var(--ease);
}

.tpl-contact__form .forminator-button-submit:hover {
	background-color: var(--c-forest-900) !important;
	border-color: var(--c-forest-900) !important;
}

.tpl-contact__form .forminator-label {
	color: var(--c-forest);
	font-family: var(--font-body);
}

.tpl-contact__form .forminator-required,
.tpl-contact__form .forminator-error-message {
	color: #9B2C2C;
}

.tpl-contact__actions {
	margin-block-start: var(--sp-3);
}

/* --- Service page: treatment video and booking band ---------------------- */

.tpl-service-video {
	background-color: var(--c-ivory);
}

.tpl-service-video__player {
	inline-size: 100%;
	max-inline-size: 900px;
	aspect-ratio: 16 / 9;
	max-block-size: 70vh;
	background-color: var(--c-forest-900);
	background-image: url("../img/pattern-repeat-dark.svg");
	background-size: 160px auto;
	border-radius: var(--radius-md);
	object-fit: contain;
}

/* Portrait source videos sit inside the frame rather than being cropped. */
.tpl-service-book {
	background-color: var(--c-ivory);
}

/* --- Search and results -------------------------------------------------- */

.tpl-search {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-1);
	margin-block-end: var(--sp-4);
}

.tpl-search__input {
	flex: 1 1 240px;
	min-block-size: var(--tap);
	padding-inline: var(--sp-2);
	background-color: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-pill);
	color: var(--c-forest);
	font-family: var(--font-body);
	font-size: 16px;
}

.tpl-results {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

.tpl-result__link {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: var(--sp-2);
	background-color: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-md);
	text-decoration: none;
	transition: border-color var(--speed) var(--ease);
}

.tpl-result__link:hover {
	border-color: var(--c-forest);
}

.tpl-result__type {
	color: var(--c-sage);
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
}

.tpl-result__title {
	color: var(--c-forest);
	font-family: var(--font-display);
	font-size: var(--fs-h3);
}

.tpl-result__excerpt {
	color: var(--c-muted);
	font-size: var(--fs-small);
}

.tpl-404__heading {
	margin-block: var(--sp-5) var(--sp-3);
}

/* --- Pagination ---------------------------------------------------------- */

.tpl-pagination {
	margin-block-start: var(--sp-4);
}

.tpl-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-1);
	align-items: center;
}

.tpl-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-inline-size: var(--tap);
	min-block-size: var(--tap);
	padding-inline: var(--sp-1);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-pill);
	color: var(--c-forest);
	font-size: var(--fs-small);
	text-decoration: none;
}

.tpl-pagination .page-numbers.current,
.tpl-pagination .page-numbers:hover {
	background-color: var(--c-forest);
	border-color: var(--c-forest);
	color: var(--c-ivory);
}

/* --- Larger screens ------------------------------------------------------ */

@media (min-width: 900px) {
	.tpl-page-hero {
		padding-block: var(--sp-6) var(--sp-5);
	}

	.tpl-page-hero--media .tpl-page-hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
		gap: var(--sp-5);
	}

	.tpl-profile {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
		gap: var(--sp-6);
	}

	.tpl-offer-detail {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--sp-6);
	}

	.tpl-contact {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		gap: var(--sp-6);
	}

	.tpl-service-detail {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--sp-6);
	}
}