/*
 * Services page (exm-page--services): pieces that are only used here. Core: modern.css. Markup: build/site/live/services_page.py.
 * Order: hero > sticky category bar (exm-bar, a nav) > services index (exm-index) > 5 categories (exm-cat, each with exm-svc
 * rows) > membership teaser (exm-teaser) > closing (shared exm-cta).
 * Numbers: the five big numerals are widgets, the small ones (01 to 05 in the bar and the index, 01.1 on each service) are CSS
 * counters with an empty alternative text, so assistive technology does not read them.
 * Without the page script (modern-services.js) everything is visible and works: the bar still sticks, links still jump,
 * the index lists are open.
 */

/* ------------------------------------------------------------------ anchors */
.exm-page--services {
	--exs-bar-h: 60px;
	--exs-land: calc(var(--ex-header-h, 88px) + var(--exs-bar-h));
}
/* modern-global.css gives the whole site scroll-padding-top: 96px. Here the targets carry their own margin (header + bar),
   so the page must not add the 96px a second time. */
html:has(body.exm-page--services) { scroll-padding-top: 0; }
.exm-page--services .exm-cat[id] { scroll-margin-top: var(--exs-land); }
.exm-page--services .exm-svc[id] { scroll-margin-top: calc(var(--exs-land) + 20px); }
.exm-page--services [data-elementor-type="wp-page"] { counter-reset: exs-cat; }
/* keyboard focus must never end up under the header and the bar: the browser applies scroll-margin when it scrolls a focused link into view */
.exm-page--services :is(.exm-index, .exm-cat, .exm-teaser, .exm-cta) a { scroll-margin-top: calc(var(--exs-land) + 16px); }

/* ------------------------------------------------------------------ header */
.exm-page--services .exm-hero.e-con {
	min-height: clamp(320px, 42svh, 460px);
	padding-bottom: clamp(56px, 6vw, 92px);
}

/* ------------------------------------------------------------------ sticky category bar */
.exm-page--services .exm-bar.e-con {
	position: sticky;
	top: var(--ex-header-h, 88px);
	z-index: 40;
	overflow: visible;
	background: rgba(16, 27, 24, .92);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	backdrop-filter: blur(14px) saturate(1.2);
	box-shadow: inset 0 -1px 0 rgba(195, 170, 120, .26);
}
.exm-page--services .exm-bar__list.elementor-widget { width: 100%; }
.exm-page--services .exm-bar__list .elementor-icon-list-items {
	position: relative;
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 32px;
	height: var(--exs-bar-h);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: exs-bar;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--exs-fl, 0px), #000 calc(100% - var(--exs-fr, 0px)), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 var(--exs-fl, 0px), #000 calc(100% - var(--exs-fr, 0px)), transparent 100%);
}
.exm-page--services .exm-bar__list .elementor-icon-list-items::-webkit-scrollbar { display: none; }
.exm-page--services .exm-bar__list .elementor-icon-list-item {
	display: flex;
	flex: 0 0 auto;
	align-items: stretch;
	margin: 0;
	padding: 0;
	counter-increment: exs-bar;
}
.exm-page--services .exm-bar__list .elementor-icon-list-icon { display: none; }
.exm-page--services .exm-bar__list .elementor-icon-list-item > a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 0;
	color: #BCC6BE;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .035em;
	line-height: 1.3;
	white-space: nowrap;
	transition: color .3s;
}
.exm-page--services .exm-bar__list .elementor-icon-list-text {
	padding: 0;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	line-height: inherit;
}
.exm-page--services .exm-bar__list .elementor-icon-list-item > a::before {
	content: counter(exs-bar, decimal-leading-zero);
	content: counter(exs-bar, decimal-leading-zero) / "";
	color: #C3AA78;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .18em;
	opacity: .75;
	transition: opacity .3s;
}
.exm-page--services .exm-bar__list .elementor-icon-list-item > a::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2px;
	background: #C3AA78;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}
.exm-page--services .exm-bar__list .elementor-icon-list-item > a:hover,
.exm-page--services .exm-bar__list .elementor-icon-list-item > a[aria-current] { color: #F4F0E7; }
.exm-page--services .exm-bar__list .elementor-icon-list-item > a:hover::before,
.exm-page--services .exm-bar__list .elementor-icon-list-item > a[aria-current]::before { opacity: 1; }
.exm-page--services .exm-bar__list .elementor-icon-list-item > a:hover::after { transform: scaleX(.4); }
.exm-page--services .exm-bar__list .elementor-icon-list-item > a[aria-current]::after { transform: scaleX(1); }
.exm-page--services .exm-bar__list .elementor-icon-list-item > a:focus-visible { outline-offset: -4px; }

/* ------------------------------------------------------------------ services index */
.exm-page--services .exm-index.e-con { padding: clamp(56px, 6vw, 92px) 0 clamp(64px, 7vw, 108px); }
.exm-page--services .exm-index .exm-kicker .elementor-heading-title { margin-bottom: clamp(26px, 3vw, 44px); }
.exm-page--services .exm-index__grid.e-con {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	column-gap: clamp(20px, 2.6vw, 44px);
	row-gap: 44px;
	counter-reset: exs-ix;
}
.exm-page--services .exm-index__col.e-con {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	counter-increment: exs-ix;
}
.exm-page--services .exm-index__cat.elementor-widget { width: 100%; }
.exm-page--services .exm-index__cat .elementor-button {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	min-height: 104px;
	padding: 0 0 22px;
	border: 0;
	border-radius: 0;
	background: linear-gradient(var(--exm-accent), var(--exm-accent)) 0 100% / 0 1px no-repeat;
	box-shadow: inset 0 -1px 0 var(--exm-line);
	color: var(--exm-ink);
	font-size: clamp(17px, 1.35vw, 20px);
	font-weight: 500;
	letter-spacing: -.015em;
	line-height: 1.28;
	text-align: left;
	transition: background-size .6s cubic-bezier(.22, 1, .36, 1), color .3s;
}
.exm-page--services .exm-index__cat .elementor-button-content-wrapper { display: block; }
.exm-page--services .exm-index__cat .elementor-button-text { display: block; white-space: normal; }
.exm-page--services .exm-index__cat .elementor-button::before {
	content: counter(exs-ix, decimal-leading-zero);
	content: counter(exs-ix, decimal-leading-zero) / "";
	display: block;
	margin-bottom: 16px;
	color: var(--exm-kicker);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .2em;
}
.exm-page--services .exm-index__cat .elementor-button:hover { background-size: 100% 1px; color: var(--exm-kicker); }
.exm-page--services .exm-index__list .elementor-icon-list-items {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.exm-page--services .exm-index__list .elementor-icon-list-item { display: block; margin: 0; padding: 0; }
.exm-page--services .exm-index__list .elementor-icon-list-item:first-child { padding-top: 14px; }
.exm-page--services .exm-index__list .elementor-icon-list-icon { display: none; }
.exm-page--services .exm-index__list .elementor-icon-list-item > a {
	display: block;
	padding: 8px 0;
	color: var(--exm-muted);
	font-size: 14.5px;
	line-height: 1.45;
	transition: color .25s, transform .35s cubic-bezier(.22, 1, .36, 1);
}
.exm-page--services .exm-index__list .elementor-icon-list-text { padding: 0; color: inherit; font-size: inherit; line-height: inherit; }
.exm-page--services .exm-index__list .elementor-icon-list-item > a:hover { color: var(--exm-ink); transform: translateX(6px); }

/* phones: the lists fold (modern-services.js adds .is-collapsible and one toggle button per column) */
.exm-index__toggle {
	display: none;
}
@media (max-width: 767px) {
	.exm-page--services .exm-index__grid.e-con { grid-template-columns: 1fr; row-gap: 0; }
	.exm-page--services .exm-index__cat .elementor-button { min-height: 0; padding: 22px 64px 22px 0; box-shadow: inset 0 -1px 0 var(--exm-line); }
	.exm-page--services .exm-index__cat .elementor-button::before { margin-bottom: 8px; }
	.exm-page--services .exm-index__list .elementor-icon-list-item:first-child { padding-top: 4px; }
	.exm-page--services .exm-index__list .elementor-icon-list-item:last-child { padding-bottom: 18px; }
	.exm-page--services .exm-index__grid.is-collapsible .exm-index__toggle {
		position: absolute;
		top: 12px;
		right: 0;
		z-index: 2;
		display: block;
		width: 44px;
		height: 44px;
		margin: 0;
		padding: 0;
		border: 1px solid var(--exm-line);
		border-radius: 50%;
		color: var(--exm-ink);
		background:
			linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat,
			linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		transition: background-size .4s cubic-bezier(.22, 1, .36, 1), background-color .35s, border-color .35s, color .35s;
	}
	.exm-page--services .exm-index__grid.is-collapsible .exm-index__toggle:focus-visible { outline: 2px solid var(--exm-accent); outline-offset: 3px; }
	.exm-page--services .exm-index__grid.is-collapsible .is-open > .exm-index__toggle {
		border-color: var(--exm-accent);
		background-color: var(--exm-accent);
		color: var(--exm-d);
		background-size: 14px 1.5px, 1.5px 0;
	}
	.exm-page--services .exm-index__grid.is-collapsible .exm-index__list.elementor-widget {
		display: grid;
		grid-template-rows: 0fr;
		visibility: hidden;
		transition: grid-template-rows .45s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .45s;
	}
	.exm-page--services .exm-index__grid.is-collapsible .is-open .exm-index__list.elementor-widget {
		grid-template-rows: 1fr;
		visibility: visible;
		transition-delay: 0s;
	}
	.exm-page--services .exm-index__grid.is-collapsible .exm-index__list > :is(.elementor-widget-container, .elementor-icon-list-items) { min-height: 0; overflow: hidden; }
}

/* ------------------------------------------------------------------ categories */
.exm-page--services .exm-cat.e-con {
	padding: clamp(80px, 9vw, 144px) 0 clamp(56px, 6vw, 104px);
	counter-increment: exs-cat;
	counter-reset: exs-svc;
}
.exm-page--services .exm-cat__head.e-con {
	display: grid;
	grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
	column-gap: clamp(32px, 6vw, 100px);
	align-items: end;
	padding-bottom: clamp(44px, 5vw, 76px);
}
/* the big numeral: a soft gold that fades out towards the bottom */
.exm-page--services .exm-cat__num .elementor-heading-title {
	display: block;
	font-size: clamp(112px, 17vw, 264px);
	font-weight: 400;
	line-height: .8;
	letter-spacing: -.075em;
	color: transparent;
	background: linear-gradient(180deg, #C3AA78 0%, rgba(195, 170, 120, .55) 55%, rgba(195, 170, 120, 0) 98%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	padding-bottom: .06em;
	user-select: none;
}
.exm-page--services .exm-light .exm-cat__num .elementor-heading-title {
	background-image: linear-gradient(180deg, #A58B59 0%, rgba(165, 139, 89, .5) 55%, rgba(165, 139, 89, 0) 98%);
}
.exm-page--services .exm-cat__intro.e-con { display: flex; flex-direction: column; align-items: flex-start; }
.exm-page--services .exm-cat__intro .exm-h2 .elementor-heading-title { font-size: clamp(36px, 4.4vw, 66px); }
.exm-page--services .exm-cat__intro .exm-lead { padding-top: clamp(20px, 2.4vw, 32px); }
.exm-page--services .exm-cat__list.e-con { display: block; }

/* service row: image and text side by side, mirrored on every second row */
.exm-page--services .exm-svc.e-con {
	display: grid;
	grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
	column-gap: clamp(40px, 6.4vw, 104px);
	align-items: center;
	padding: clamp(40px, 4.6vw, 68px) 0;
	border-top: 1px solid var(--exm-line);
	background: linear-gradient(var(--exm-accent), var(--exm-accent)) 0 0 / 0 1px no-repeat border-box;
	transition: background-size .9s cubic-bezier(.22, 1, .36, 1);
	counter-increment: exs-svc;
}
@media (hover: hover) {
	.exm-page--services .exm-svc.e-con:hover { background-size: 100% 1px; }
}
.exm-page--services .exm-svc--flip.e-con { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
.exm-page--services .exm-svc--flip .exm-svc__media { order: 2; }
.exm-page--services .exm-svc__media.elementor-widget {
	width: 100%;
	aspect-ratio: 7 / 5;
	border-radius: 2px;
}
.exm-page--services .exm-svc__media img { border-radius: 0; }
.exm-page--services .exm-svc__body.e-con {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 520px;
}
.exm-page--services .exm-svc__title .elementor-heading-title::before {
	content: counter(exs-cat, decimal-leading-zero) "." counter(exs-svc);
	content: counter(exs-cat, decimal-leading-zero) "." counter(exs-svc) / "";
	display: block;
	margin-bottom: 20px;
	color: var(--exm-kicker);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .2em;
	line-height: 1.5;
}
.exm-page--services .exm-svc__text { padding-top: clamp(18px, 1.8vw, 26px); }
.exm-page--services .exm-svc__text p { font-size: clamp(15px, 1.12vw, 17px); line-height: 1.75; }
.exm-page--services .exm-svc__action { padding-top: clamp(26px, 2.6vw, 36px); }
.exm-page--services .exm-svc__action .elementor-button { min-width: 0; min-height: 50px; gap: 26px; padding: 13px 20px; }
.exm-page--services .exm-svc__action.elementor-widget { width: auto; }

/* ------------------------------------------------------------------ membership teaser */
.exm-page--services .exm-tease.e-con {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
	column-gap: clamp(40px, 8vw, 128px);
	align-items: center;
}
.exm-page--services .exm-tease__intro.e-con { display: flex; flex-direction: column; align-items: flex-start; }
.exm-page--services .exm-tease__intro .exm-lead { padding-top: clamp(20px, 2.4vw, 32px); }
.exm-page--services .exm-tease__tiers.e-con { display: flex; flex-direction: column; align-items: stretch; }
.exm-page--services .exm-tiers.e-con { display: block; border-bottom: 1px solid var(--exm-line); }
.exm-page--services .exm-tier + .exm-tier { border-top: 1px solid var(--exm-line); }
.exm-page--services .exm-tier p {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 24px;
	flex-wrap: wrap;
	margin: 0;
	padding: clamp(20px, 2.2vw, 30px) 0;
}
.exm-page--services .exm-tier__name {
	color: var(--exm-ink);
	font-size: clamp(26px, 2.8vw, 42px);
	letter-spacing: -.035em;
	line-height: 1.15;
}
.exm-page--services .exm-tier__price {
	color: var(--exm-kicker);
	font-size: clamp(14px, 1.1vw, 16px);
	font-weight: 600;
	letter-spacing: .06em;
	white-space: nowrap;
}
.exm-page--services .exm-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.exm-page--services .exm-tease__note { padding-top: 22px; }
.exm-page--services .exm-tease__action.e-con { padding-top: clamp(28px, 3vw, 40px); }

/* ------------------------------------------------------------------ motion */
/* images settle in (modern.js adds .exm-motion to <html> and .is-visible to a revealed .exm-reveal) */
.exm-motion .exm-page--services .exm-svc__media img { transform: scale(1.07); }
.exm-motion .exm-page--services .exm-svc__media.is-visible img { transform: scale(1); }
@media (hover: hover) {
	.exm-motion .exm-page--services .exm-svc__media.is-visible:hover img { transform: scale(1.04); }
}
/* The typing caret of a heading without inner spans is a direct child span, and the core rule that makes such spans display
   block (.exm-h2 .elementor-heading-title > span) turns it into a line of its own: every typed heading is 0.75em taller
   until it has finished typing, so the page below it jumps (layout shift, anchors landing off by up to 190px). */
.exm-page--services .exm-root :is(.exm-h1, .exm-h2) .elementor-heading-title > span.exm-caret { display: inline-block; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1199px) {
	.exm-page--services .exm-index__grid.e-con { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.exm-page--services .exm-bar__list .elementor-icon-list-items { justify-content: flex-start; gap: 36px; }
}
@media (max-width: 899px) {
	.exm-page--services .exm-cat__head.e-con { grid-template-columns: 1fr; row-gap: 22px; align-items: start; }
	.exm-page--services .exm-cat__num .elementor-heading-title { font-size: clamp(96px, 26vw, 168px); }
	.exm-page--services .exm-svc.e-con,
	.exm-page--services .exm-svc--flip.e-con { grid-template-columns: minmax(0, 1fr); row-gap: 30px; align-items: start; }
	.exm-page--services .exm-svc--flip .exm-svc__media { order: 0; }
	.exm-page--services .exm-svc__media.elementor-widget { aspect-ratio: 4 / 3; }
	.exm-page--services .exm-svc__body.e-con { max-width: 640px; }
	.exm-page--services .exm-tease.e-con { grid-template-columns: 1fr; row-gap: 40px; align-items: start; }
}
@media (max-width: 767px) {
	.exm-page--services { --exs-bar-h: 52px; }
	.exm-page--services .exm-hero.e-con { min-height: 0; padding-top: 96px; }
	.exm-page--services .exm-index__grid.e-con { grid-template-columns: 1fr; row-gap: 0; }
	.exm-page--services .exm-bar__list .elementor-icon-list-items { gap: 28px; }
	.exm-page--services .exm-bar__list .elementor-icon-list-item > a { font-size: 12.5px; }
	.exm-page--services .exm-svc__media.elementor-widget { aspect-ratio: 5 / 4; }
	.exm-page--services .exm-cat.e-con { padding-top: 72px; }
	.exm-page--services .exm-svc__action .elementor-button { width: 100%; }
	.exm-page--services .exm-svc__action.elementor-widget { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.exm-page--services .exm-svc__media img { transform: none !important; }
	.exm-page--services .exm-bar__list .elementor-icon-list-item > a::after { transition: none; }
}
