/**
 * Unified secondary button.
 *
 * Every ".gm-read" link (View case study, Explore, Read …) uses the same
 * outline pill as .gm-btn--outline: 15px, weight 500, sentence case,
 * plain arrow (no square), purple on light surfaces, white on purple/dark.
 */

.gm-read {
	display: inline-flex !important;
	align-items: center;
	gap: 0.625rem !important;
	min-height: 44px;
	padding: 0 1.25rem !important;
	border: 1.5px solid rgb(114 21 244 / 0.45) !important;
	border-radius: 999px !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--gm-color-purple) !important;
	font-family: var(--gm-font-body);
	font-size: 0.9375rem !important;
	font-weight: 500 !important;
	line-height: 1;
	letter-spacing: 0.02em !important;
	text-decoration: none !important;
	text-transform: none !important;
	white-space: nowrap;
	transition: background-color 300ms var(--gm-ease), border-color 300ms var(--gm-ease), color 300ms var(--gm-ease);
}

.gm-read > span:first-child {
	text-decoration: none !important;
}

.gm-read .gm-icon {
	inline-size: 1rem !important;
	block-size: 1rem !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	color: currentColor !important;
	transition: transform 300ms var(--gm-ease) !important;
}

a.gm-read:hover,
a.gm-read:focus-visible,
a:hover > .gm-read,
a:focus-visible .gm-read,
.gm-post__link:hover .gm-read,
.gm-alt__item:hover .gm-read {
	border-color: var(--gm-color-purple) !important;
	background: var(--gm-color-purple) !important;
	color: #fff !important;
}

a.gm-read:hover .gm-icon,
a.gm-read:focus-visible .gm-icon,
a:hover > .gm-read .gm-icon,
.gm-post__link:hover .gm-read .gm-icon,
.gm-alt__item:hover .gm-read .gm-icon {
	border: 0 !important;
	background: none !important;
	color: currentColor !important;
	transform: translateX(3px);
}

/* On purple / dark surfaces */
.gm-surface--inverse .gm-read,
.gm-surface--dark .gm-read,
.gm-caselist__item .gm-read {
	border-color: rgb(255 255 255 / 0.6) !important;
	color: #fff !important;
}

.gm-surface--inverse a.gm-read:hover,
.gm-surface--dark a.gm-read:hover,
.gm-caselist__item a.gm-read:hover,
.gm-caselist__item a.gm-read:focus-visible,
.gm-surface--inverse .gm-post__link:hover .gm-read,
.gm-surface--dark .gm-post__link:hover .gm-read {
	border-color: #fff !important;
	background: #fff !important;
	color: var(--gm-color-purple) !important;
}

/* Boxes: every title starts on the same top line (room for 3 lines, text
   top-aligned), so a long title like "Project Management Consultancy" no
   longer sits higher than its neighbours. Descriptions stay aligned below. */
@media (min-width: 1024px) {
	.gm-box__body {
		box-sizing: border-box;
		flex: 0 0 auto;
		block-size: 16.5rem;
		justify-content: flex-start !important;
	}

	.gm-box__title {
		min-height: 0 !important;
	}
}

/* Simple dropdowns (About) styled like the Capabilities mega panel:
   same glass panel, 15px Avenir links, caret icon, arrow + nudge on hover. */
@media (min-width: 1024px) {
	.gm-header .gm-nav--theme .gm-nav__menu > li:not(.gm-mega) > .sub-menu {
		--gm-dropdown-link: rgb(232 232 238);
		--gm-dropdown-link-hover: var(--gm-color-white);
		min-width: 260px;
		padding: var(--gm-space-16, 16px);
		border: 1px solid rgba(255, 255, 255, 0.1);
		background: radial-gradient(120% 100% at 0% 0%, rgba(114, 21, 244, 0.2), rgba(114, 21, 244, 0) 60%), rgba(16, 16, 16, 0.86);
		-webkit-backdrop-filter: blur(18px) saturate(140%);
		backdrop-filter: blur(18px) saturate(140%);
		box-shadow: rgba(0, 0, 0, 0.5) 0 28px 56px -24px, rgba(255, 255, 255, 0.07) 0 1px 0 inset;
	}

	.gm-header .gm-nav--theme .gm-nav__menu > li:not(.gm-mega) > .sub-menu > li > a {
		position: relative;
		gap: var(--gm-space-12, 12px);
		min-height: 2.5rem;
		padding: var(--gm-space-8, 8px) var(--gm-space-12, 12px);
		color: var(--gm-dropdown-link);
		font-family: var(--gm-font-body);
		font-size: 0.9375rem;
		font-weight: var(--gm-weight-regular, 400);
		line-height: 1.3;
		transition: background-color var(--gm-duration) var(--gm-ease), color var(--gm-duration) var(--gm-ease), padding var(--gm-duration) var(--gm-ease);
	}

	.gm-header .gm-nav--theme .gm-nav__menu > li:not(.gm-mega) > .sub-menu > li > a::before {
		display: block;
		flex: 0 0 auto;
		width: 1.25rem;
		height: 1.25rem;
		background: var(--gm-color-light-purple);
		content: "";
		-webkit-mask: url("../images/icons/caret-right.svg") center / contain no-repeat;
		mask: url("../images/icons/caret-right.svg") center / contain no-repeat;
		opacity: 0.9;
	}

	.gm-header .gm-nav--theme .gm-nav__menu > li:not(.gm-mega) > .sub-menu > li > a::after {
		display: block;
		width: 0.875rem;
		height: 0.875rem;
		margin-left: auto;
		background: var(--gm-color-light-purple);
		content: "";
		-webkit-mask: url("../images/icons/arrow-right.svg") center / contain no-repeat;
		mask: url("../images/icons/arrow-right.svg") center / contain no-repeat;
		opacity: 0;
		transform: translateX(-6px);
		transition: opacity var(--gm-duration) var(--gm-ease), transform var(--gm-duration) var(--gm-ease);
	}

	.gm-header .gm-nav--theme .gm-nav__menu > li:not(.gm-mega) > .sub-menu > li > a:is(:hover, :focus-visible) {
		padding-left: var(--gm-space-16, 16px);
		background: rgba(255, 255, 255, 0.07);
		color: var(--gm-color-white);
	}

	.gm-header .gm-nav--theme .gm-nav__menu > li:not(.gm-mega) > .sub-menu > li > a:is(:hover, :focus-visible)::after {
		opacity: 1;
		transform: none;
	}

	.gm-header .gm-nav--theme .gm-nav__menu > li:not(.gm-mega) > .sub-menu > li.current-menu-item > a {
		background: var(--gm-dropdown-item-current);
		color: var(--gm-color-white);
	}
}

/* Homepage locations ("Where we deliver"): livelier cards in the approved
   hover language — purple pin, soft purple wash, growing line, filled arrow.
   The selected office keeps the highlighted state. */
.gm-loc {
	position: relative;
	overflow: hidden;
	border: 1px solid rgb(114 21 244 / 0.08);
	transition: transform 300ms var(--gm-ease), box-shadow 300ms var(--gm-ease), background-color 300ms var(--gm-ease), border-color 300ms var(--gm-ease);
}

.gm-loc {
	isolation: isolate;
}

/* Soft purple wash behind the content (z-index -1 inside the card). */
.gm-loc::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: linear-gradient(90deg, rgb(114 21 244 / 0.09), rgb(114 21 244 / 0) 65%);
	content: "";
	opacity: 0;
	pointer-events: none;
	transition: opacity 400ms var(--gm-ease);
}

.gm-loc__name {
	display: inline-flex !important;
	align-items: center;
	gap: 0.5rem;
}

.gm-loc__name::before {
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
	background: var(--gm-color-purple);
	content: "";
	-webkit-mask: url("../images/icons/map-pin.svg") center / contain no-repeat;
	mask: url("../images/icons/map-pin.svg") center / contain no-repeat;
	transition: transform 400ms var(--gm-ease);
}

.gm-loc__toggle {
	transition: background-color 300ms var(--gm-ease), color 300ms var(--gm-ease), transform 300ms var(--gm-ease);
}

.gm-loc:is(:hover, :focus-within, :has(.gm-loc__main[aria-pressed="true"])) {
	border-color: rgb(114 21 244 / 0.22);
}

.gm-loc:is(:hover, :focus-within, :has(.gm-loc__main[aria-pressed="true"]))::before {
	opacity: 1;
}

.gm-loc:is(:hover, :focus-within) .gm-loc__name::before {
	transform: translateY(-2px);
}

.gm-loc:is(:hover, :focus-within, :has(.gm-loc__main[aria-pressed="true"])) .gm-loc__toggle {
	background: var(--gm-color-purple) !important;
	color: #fff !important;
}

/* Open office (details shown) keeps the highlighted state. */
.gm-loc:has(.gm-loc__toggle[aria-expanded="true"]) {
	border-color: rgb(114 21 244 / 0.22);
}

.gm-loc:has(.gm-loc__toggle[aria-expanded="true"])::before {
	opacity: 1;
}

.gm-loc:has(.gm-loc__toggle[aria-expanded="true"]) .gm-loc__toggle {
	background: var(--gm-color-purple) !important;
	color: #fff !important;
}

@media (prefers-reduced-motion: reduce) {
	.gm-loc::before,
	.gm-loc__name::before,
	.gm-loc__toggle {
		transition: none;
	}
}

/* Team stories (Careers): taller cards in the covers' own 9:16 shape, and
   the play button above the gradient and text. The photo is pushed to the
   back of the card instead of the whole media box, so the button can come
   to the front. */
.gm-stories--carousel .gm-story {
	aspect-ratio: 9 / 16 !important;
}

.gm-story .gm-story__media:not(.is-playing) {
	z-index: auto !important;
}

.gm-story .gm-story__media:not(.is-playing) .gm-story__image {
	position: relative;
	z-index: -2;
}

.gm-story .gm-story__play {
	z-index: 3 !important;
}

/* Vacancy "Role summary": talent contact with a round headshot. */
.gm-vsummary__contact.has-photo {
	display: grid !important;
	grid-template-columns: 56px minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 0.875rem;
	align-items: center;
}

.gm-vsummary__contact.has-photo .gm-vsummary__photo {
	grid-row: 1 / span 2;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #ececf1;
	object-fit: cover;
	object-position: center top;
}

.gm-vsummary__contact.has-photo > strong,
.gm-vsummary__contact.has-photo > span {
	align-self: end;
}

.gm-vsummary__contact.has-photo > span {
	align-self: start;
}

/* ---------- 2026-10-16 fixes ---------- */

/* Fixed (sticky) header while scrolling; anchors land below it. */
.gm-header {
	position: sticky !important;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 1000;
}

html {
	scroll-padding-top: 96px;
}

/* Boxes: no stray dash or underline at rest; titles take 3 lines on desktop
   so every description starts on the same line; stronger shade under text. */
.gm-box__title::after {
	opacity: 0;
	transition: transform 600ms var(--gm-ease), opacity 300ms var(--gm-ease);
}

.gm-box:hover .gm-box__title::after,
.gm-box:focus-within .gm-box__title::after {
	opacity: 1;
}

.gm-box--linked:hover .gm-box__title {
	text-decoration: none !important;
}

@media (min-width: 1024px) {
	.gm-four-boxes .gm-box__title {
		/* 3 lines + the hover line under the title, so every description lines up. */
		min-height: calc(3 * 1.15em + 2px + 0.75rem) !important;
	}
}

.gm-box__media::after {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgb(16 16 16 / 0) 20%, rgb(16 16 16 / 0.55) 52%, rgb(16 16 16 / 0.9) 100%) !important;
	content: "";
	pointer-events: none;
}

.gm-box__title,
.gm-box__text {
	text-shadow: 0 1px 12px rgb(0 0 0 / 0.35);
}

/* Vision card: black with a soft purple glow (like the mission card's dark
   tone); highlight in the same light purple as the mission text. */
.gm-vm__card--vision {
	background:
		radial-gradient(120% 90% at 100% 0%, rgb(114 21 244 / 0.55) 0%, rgb(114 21 244 / 0) 60%),
		radial-gradient(90% 80% at 0% 100%, rgb(114 21 244 / 0.25) 0%, rgb(114 21 244 / 0) 55%),
		#101010 !important;
}

.gm-vm__card--vision .gm-highlight {
	background: none !important;
	color: rgb(182 129 255) !important;
	-webkit-text-fill-color: currentColor !important;
	text-decoration: none !important;
	box-shadow: none !important;
	border: 0 !important;
}

/* Brand black is #101010 everywhere (heroes and map used #000 / near-black). */
.gm-hero-video,
.gm-hero-video__media,
.gm-hero-image,
.gm-regions__stage,
.gm-regions__canvas {
	background-color: #101010 !important;
}

/* ---------- Library blocks on the site standard (2026-10-16) ----------
   Type scale tokens (--gm-fs-*), brand palette only (#7215F4, #E5E5E5,
   #101010, #B681FF), card radius, approved hover (purple wash + slow zoom),
   standard secondary buttons, sentence case. */

/* Shared hover wash for photo cards. */
.gm-vspot__card::after,
.gm-spot__card::after,
.gm-persona__tile--photo::after {
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	background: linear-gradient(180deg, rgb(114 21 244 / 0) 30%, rgb(114 21 244 / 0.45) 100%);
	content: "";
	opacity: 0;
	pointer-events: none;
	transition: opacity 600ms var(--gm-ease);
}

.gm-vspot__card:not(.is-playing):hover::after,
.gm-spot__card:hover::after,
.gm-persona__tile--photo:hover::after {
	opacity: 1;
}

.gm-vspot__image,
.gm-spot__image,
.gm-persona__image {
	transition: transform 1200ms var(--gm-ease) !important;
}

.gm-vspot__card:not(.is-playing):hover .gm-vspot__image,
.gm-spot__card:hover .gm-spot__image,
.gm-persona__tile--photo:hover .gm-persona__image {
	transform: scale(1.06) !important;
}

.gm-vspot__card,
.gm-spot__card,
.gm-persona__tile,
.gm-vshow__media {
	border-radius: var(--gm-radius-card) !important;
}

/* Video Spotlight */
.gm-vspot__card {
	background: var(--gm-color-black) !important;
}

.gm-vspot__stat-value {
	font-size: var(--gm-text-stat) !important;
}

.gm-vspot__stat-label {
	color: var(--gm-text-secondary) !important;
	font-size: var(--gm-fs-small) !important;
}

.gm-vspot__tag strong {
	font-size: var(--gm-fs-h3) !important;
}

.gm-vspot__tag span,
.gm-vspot__chips li {
	font-size: var(--gm-fs-small) !important;
	text-transform: none !important;
}

.gm-vspot__tag,
.gm-vspot__chips {
	z-index: 1;
}

/* Persona Mosaic */
.gm-persona__tile--quote {
	background: rgb(182 129 255 / 0.22) !important;
	color: var(--gm-color-black) !important;
}

.gm-persona__mark {
	color: var(--gm-color-purple) !important;
}

.gm-persona__tile--quote p,
.gm-persona__tile--accent p,
.gm-persona__name {
	font-size: var(--gm-fs-h3) !important;
}

.gm-persona__tile--profile {
	background: var(--gm-color-grey) !important;
}

.gm-persona__role,
.gm-persona__tag {
	font-size: var(--gm-fs-small) !important;
}

.gm-persona__tag {
	background: var(--gm-color-black) !important;
}

.gm-persona__arrow {
	border-color: rgb(114 21 244 / 0.45) !important;
	color: var(--gm-color-purple) !important;
}

.gm-persona__arrow:hover,
.gm-persona__arrow:focus-visible {
	border-color: var(--gm-color-purple) !important;
	background: var(--gm-color-purple) !important;
	color: #fff !important;
}

.gm-persona__tile--accent {
	background: var(--gm-color-purple) !important;
}

/* Spotlight Carousel */
.gm-spot__title {
	font-size: var(--gm-fs-h3l) !important;
}

.gm-spot__kicker,
.gm-spot__note {
	font-size: var(--gm-fs-small) !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

.gm-spot__body {
	z-index: 1;
	transition: transform 600ms var(--gm-ease);
}

.gm-spot__card:hover .gm-spot__body {
	transform: translateY(-6px);
}

.gm-spot__card--lavender {
	background: var(--gm-color-light-purple) !important;
	color: var(--gm-color-black) !important;
}

.gm-spot__card--purple {
	background: linear-gradient(145deg, var(--gm-color-purple), var(--gm-color-dark-purple)) !important;
}

.gm-spot__card--sky::before {
	background: linear-gradient(180deg, rgb(114 21 244 / 0.25) 0%, rgb(16 16 16 / 0.7) 100%) !important;
}

.gm-spot__dot.is-active {
	background: var(--gm-color-purple) !important;
}

/* Quote Carousel */
.gm-qc__quote p {
	color: var(--gm-color-black) !important;
	font-size: var(--gm-fs-h3l) !important;
	line-height: 1.4 !important;
}

.gm-qc__mark::before,
.gm-qc__mark::after {
	background: var(--gm-color-grey) !important;
}

.gm-qc__face {
	background: var(--gm-color-grey) !important;
}

.gm-qc__who strong {
	font-size: var(--gm-fs-h3) !important;
}

.gm-qc__who span {
	font-size: var(--gm-fs-small) !important;
}

/* Video Showcase band: brand purples only. */
.gm-vshow__stage::before {
	background: linear-gradient(135deg, var(--gm-color-purple) 0%, var(--gm-color-dark-purple) 100%) !important;
}

@media (prefers-reduced-motion: reduce) {
	.gm-vspot__image,
	.gm-spot__image,
	.gm-persona__image,
	.gm-spot__body {
		transition: none !important;
	}
}

/* Footer: brand black with a soft purple glow. */
.gm-footer {
	background:
		radial-gradient(85% 75% at 100% 0%, rgb(114 21 244 / 0.45) 0%, rgb(114 21 244 / 0) 70%),
		radial-gradient(70% 65% at 0% 100%, rgb(182 129 255 / 0.22) 0%, rgb(182 129 255 / 0) 70%),
		linear-gradient(180deg, #101010 0%, #160a2a 100%) !important;
}

/* "Our vision" / "Our mission" labels: sentence case. */
.gm-vm__label {
	letter-spacing: 0 !important;
	text-transform: none !important;
}

.gm-vm__card--vision .gm-highlight::before,
.gm-vm__card--vision .gm-highlight::after {
	display: none !important;
}

/* Services / Sectors overview: no item numbers */
.gm-alt__num {
	display: none !important;
}

/* Services / Sectors overview: kicker line in sentence case, not caps */
.gm-alt__kicker {
	font-size: 1rem !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
	line-height: 1.4 !important;
	text-transform: none !important;
}

/* Case study scope box: sentence-case label, icon per item */
.gm-csd__scope-label {
	font-size: 1.1875rem !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

.gm-csd__scope-list li {
	display: flex !important;
	align-items: center;
	gap: 0.875rem;
}

.gm-csd__scope-list li::before {
	content: none !important;
	display: none !important;
}

.gm-csd__scope-icon {
	flex: 0 0 auto;
	box-sizing: border-box;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	padding: 0.5rem;
	border-radius: 50%;
	background: rgb(114 21 244 / 0.1);
	color: var(--gm-color-purple);
	fill: currentColor;
}

@media (prefers-reduced-motion: reduce) {
	.gm-read,
	.gm-read .gm-icon {
		transition: none !important;
		transform: none !important;
	}
}