/* Services Menu (/services/). Extends about-pillars + faq-accordion; tokens only. */

/* ---- Menu head + jump links ---------------------------------------------- */
.clickt-svcmenu { padding-bottom: 40px; }
.clickt-svcmenu .clickt-svcmenu__head { margin-bottom: 104px; }
.clickt-svcmenu__intro {
	max-width: var(--clickt-maxw-prose);
	margin: 28px auto 0;
	font-size: var(--clickt-fs-body-l);
	line-height: var(--clickt-lh-body-loose);
	font-weight: 300;
	color: var(--clickt-body-78);
}
.clickt-svcmenu__jump {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 12px;
	max-width: 880px;
	margin: 44px auto 0;
}
.clickt-svcmenu .clickt-svcmenu__jump a {
	padding: 9px 16px;
	border: 1px solid var(--clickt-navy-18);
	color: var(--clickt-navy-700);
	font-size: var(--clickt-fs-caption);
	letter-spacing: var(--clickt-ls-caps-soft);
	text-transform: uppercase;
	text-decoration: none;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
.clickt-svcmenu .clickt-svcmenu__jump a:hover,
.clickt-svcmenu .clickt-svcmenu__jump a:focus-visible { border-color: var(--clickt-gold-500); background: var(--clickt-gold-18); }

/* ---- Rows (pillars, a touch tighter so eleven rows stay scannable) --------- */
.clickt-svcmenu__row { margin-bottom: 104px; scroll-margin-top: 120px; }
.clickt-svcmenu .clickt-svcmenu__img { height: 420px; }
.clickt-svcmenu__row .clickt-pillars__img-cell > a { display: block; position: relative; overflow: hidden; }
.clickt-svcmenu__row .clickt-svcmenu__img { transition: transform 0.6s var(--clickt-ease-out); }
.clickt-svcmenu__row:hover .clickt-svcmenu__img { transform: scale(1.03); }
/* tokens.css forces the body font on every [class^=clickt-] a with !important; titles keep the display face. */
.clickt-svcmenu .clickt-svcmenu__row .clickt-pillars__title a { color: inherit; font: inherit; font-family: var(--clickt-font-display) !important; letter-spacing: inherit; text-transform: inherit; text-decoration: none; }
.clickt-svcmenu .clickt-svcmenu__row .clickt-pillars__title a:hover { color: var(--clickt-navy-800); }

.clickt-svcmenu__ideal {
	max-width: 480px;
	margin: 22px 0 0;
	font-size: var(--clickt-fs-body-s);
	line-height: var(--clickt-lh-body);
	color: var(--clickt-body-78);
}
.clickt-svcmenu__ideal span {
	display: block;
	margin-bottom: 6px;
	font-size: var(--clickt-fs-eyebrow);
	letter-spacing: var(--clickt-ls-caps-eyebrow);
	text-transform: uppercase;
	color: var(--clickt-gold-700);
}
.clickt-svcmenu__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 22px 0 0;
	font-family: var(--clickt-font-mono);
	font-size: var(--clickt-fs-caption);
	letter-spacing: var(--clickt-ls-caps);
	color: var(--clickt-navy-700);
}
.clickt-svcmenu__meta .clickt-diamond {
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: 0 4px 0 2px;
	background: var(--clickt-gold-500);
	transform: rotate(45deg);
	flex: none;
}

.clickt-svcmenu__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 32px; }
.clickt-svcmenu a.clickt-svcmenu__view {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--clickt-gold-500);
	color: var(--clickt-navy-800);
	font-family: var(--clickt-font-body);
	font-size: var(--clickt-fs-eyebrow);
	font-weight: 600;
	letter-spacing: var(--clickt-ls-caps-button);
	text-transform: uppercase;
	text-decoration: none;
}
.clickt-svcmenu a.clickt-svcmenu__view span { transition: transform 0.2s var(--clickt-ease-out); }
.clickt-svcmenu a.clickt-svcmenu__view:hover span { transform: translateX(4px); }
.clickt-svcmenu a.clickt-svcmenu__book {
	display: inline-block;
	padding: 14px 30px;
	background: var(--clickt-gold-500);
	color: var(--clickt-navy-800);
	font-size: var(--clickt-fs-eyebrow);
	font-family: var(--clickt-font-body);
	font-weight: 700;
	line-height: 1;
	letter-spacing: var(--clickt-ls-caps-button);
	text-transform: uppercase;
	text-decoration: none;
	transition: filter 0.2s ease;
}
.clickt-svcmenu a.clickt-svcmenu__book:hover { filter: brightness(0.95); }

/* ---- "Start with how you feel" guide (navy band) -------------------------- */
.clickt-svcguide {
	background: var(--clickt-navy-800);
	padding: var(--clickt-pad-y-m) var(--clickt-pad-x);
	font-family: var(--clickt-font-body);
}
.clickt-svcguide__inner { max-width: var(--clickt-maxw-grid); margin: 0 auto; }
.clickt-svcguide__head { text-align: center; margin-bottom: 72px; }
.clickt-svcguide__eyebrow {
	font-size: var(--clickt-fs-eyebrow);
	letter-spacing: var(--clickt-ls-caps-eyebrow);
	text-transform: uppercase;
	color: var(--clickt-gold-500);
}
.clickt-svcguide__heading {
	margin: 20px 0 0;
	font-family: var(--clickt-font-display);
	font-weight: 300;
	font-size: var(--clickt-fs-h2);
	letter-spacing: var(--clickt-ls-display-soft);
	color: var(--clickt-cream-100);
}
.clickt-svcguide__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.clickt-svcguide__card {
	padding: 36px 32px 32px;
	border: 1px solid var(--clickt-gold-25);
	border-top: 2px solid var(--clickt-gold-500);
}
.clickt-svcguide__need {
	margin: 0;
	font-family: var(--clickt-font-display);
	font-weight: 400;
	font-size: 28px;
	line-height: 1.2;
	color: var(--clickt-cream-100);
}
.clickt-svcguide__line {
	margin: 14px 0 0;
	font-size: var(--clickt-fs-body-s);
	line-height: var(--clickt-lh-body);
	font-weight: 300;
	color: var(--clickt-cream-72);
}
.clickt-svcguide__picks { margin: 22px 0 0; font-size: var(--clickt-fs-body-s); color: var(--clickt-cream-55); }
.clickt-svcguide .clickt-svcguide__picks a {
	color: var(--clickt-gold-500);
	text-decoration: none;
	border-bottom: 1px solid var(--clickt-gold-50);
}
.clickt-svcguide .clickt-svcguide__picks a:hover { border-bottom-color: var(--clickt-gold-500); }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
	.clickt-svcmenu .clickt-svcmenu__head { margin-bottom: 72px; }
	.clickt-svcmenu__row { margin-bottom: 72px; }
	.clickt-svcmenu .clickt-svcmenu__img { height: 320px; }
	.clickt-svcguide__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
	.clickt-svcmenu__jump { justify-content: flex-start; }
	.clickt-svcguide__grid { grid-template-columns: 1fr; }
	.clickt-svcguide__card { padding: 28px 24px; }
}
@media (prefers-reduced-motion: reduce) {
	.clickt-svcmenu__row .clickt-svcmenu__img,
	.clickt-svcmenu aa.clickt-svcmenu__view span { transition: none; }
	.clickt-svcmenu__row:hover .clickt-svcmenu__img { transform: none; }
}