/**
 * Refinement pass (October 2026): lighter banners, one hero height per
 * group, quieter buttons and finer details ("sophisticated, delicate").
 *
 * Loaded after every layout stylesheet (inc/refine.php), so each rule here
 * overrides the layout default it names. Remove this file to go back.
 *
 * @package GagaMuller
 */

/* ---------------------------------------------------------------------
 * Banners: a little lighter; one height for every inner page, and one
 * shared (taller) height for the homepage and the About section.
 * ------------------------------------------------------------------ */

/* Photo at 85%; the dark gradient covers only the text side (left). */
.gm-hero-image {
	--gm-hero-gradient: linear-gradient(99deg, rgb(16 16 16 / 0.8) 0%, rgb(16 16 16 / 0.5) 30%, rgb(16 16 16 / 0) 58%, rgb(114 21 244 / 0.12) 100%);
	--gm-hero-min-h: clamp(28rem, 40vw, 38rem); /* compact / standard / tall: one height */
}

.gm-hero-image .gm-hero-image__media {
	opacity: 0.85;
}

.gm-hero-video {
	--gm-hero-media-opacity: 0.7;
}

/* Boxes and cards: photo at 90%, darkened only in the lower third (text). */
.gm-four-boxes {
	--gm-box-photo-opacity: 0.9;
	--gm-box-gradient: linear-gradient(180deg, rgb(16 16 16 / 0) 0%, rgb(16 16 16 / 0) 48%, rgb(16 16 16 / 0.55) 72%, rgb(16 16 16 / 0.92) 100%);
}

.gm-four-boxes .gm-box--purple {
	--gm-box-photo-opacity: 0.75;
}

.gm-slide-box {
	--gm-slide-photo-opacity: 0.9;
	--gm-slide-gradient: linear-gradient(180deg, rgb(16 16 16 / 0) 0%, rgb(16 16 16 / 0) 45%, rgb(16 16 16 / 0.55) 70%, rgb(16 16 16 / 0.92) 100%);
}

.gm-sector__image {
	opacity: 0.75;
}

.gm-sector::before {
	background: linear-gradient(180deg, rgb(114 21 244 / 0) 0%, rgb(114 21 244 / 0) 40%, rgb(114 21 244 / 0.7) 75%, var(--gm-color-purple) 100%);
}

.gm-hero-image.gm-hero-image--home,
.gm-hero-video {
	--gm-hero-min-h: clamp(520px, 51vw, 736px);
}

@media (max-width: 1023px) {
	.gm-hero-image.gm-hero-image--home,
	.gm-hero-video {
		--gm-hero-min-h: 540px;
	}
}

@media (max-width: 479px) {
	.gm-hero-image.gm-hero-image--home,
	.gm-hero-video {
		--gm-hero-min-h: 440px;
	}
}

/* ---------------------------------------------------------------------
 * Buttons: smaller type, finer tracking, softer glow.
 * ------------------------------------------------------------------ */

.gm-btn {
	gap: 0.875rem;
	font-size: 0.9375rem;
	letter-spacing: 0.05em;
}

.gm-btn .gm-icon {
	width: 40px;
	height: 40px;
	padding: 10px;
}

.gm-btn--primary {
	box-shadow: 0 10px 28px -14px rgb(114 21 244 / 0.6);
}

.gm-btn--primary:hover,
.gm-btn--primary:focus-visible {
	box-shadow: 0 14px 34px -14px rgb(114 21 244 / 0.75);
}

.gm-btn--sm {
	min-height: 46px;
	font-size: 0.875rem;
}

.gm-btn--sm .gm-icon {
	width: 34px;
	height: 34px;
	padding: 8px;
}

/* ---------------------------------------------------------------------
 * Selected projects: slower, smoother accordion; no font-size jumps;
 * a gradient band instead of a solid purple block.
 * ------------------------------------------------------------------ */

/* Softer accordion: longer, gentler ease-in-out (no snap at the end). */
.gm-proj {
	--gm-proj-time: 1250ms;
	--gm-proj-ease: cubic-bezier(0.45, 0.05, 0.25, 1);
}

/* "View project" button at the bottom of the card (replaces the arrow).
   In the accordion it fades in on the open card only, after the width. */
.gm-pcard__cta {
	margin: var(--gm-space-12, 0.75rem) 0 0;
}

.gm-pcard .gm-pcard__btn {
	position: relative;
	z-index: 2;
	border-color: rgb(255 255 255 / 0.6);
	color: var(--gm-color-white);
}

.gm-pcard .gm-pcard__btn:hover,
.gm-pcard .gm-pcard__btn:focus-visible {
	border-color: var(--gm-color-white);
	background: var(--gm-color-white);
	color: var(--gm-color-purple);
}

.gm-proj[data-mode="accordion"] .gm-pcard__cta {
	max-height: 0;
	margin-top: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition:
		max-height var(--gm-proj-time) var(--gm-proj-ease),
		margin var(--gm-proj-time) var(--gm-proj-ease),
		opacity 500ms var(--gm-ease),
		transform 700ms var(--gm-ease),
		visibility 0s linear var(--gm-proj-time);
}

.gm-proj[data-mode="accordion"] .gm-pcard.is-active .gm-pcard__cta {
	max-height: 4rem;
	margin-top: var(--gm-space-12, 0.75rem);
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s, 0s, 450ms, 450ms, 0s;
}

.gm-proj[data-mode="accordion"] .gm-pcard.is-active .gm-pcard__desc {
	transition-delay: 0s, 300ms, 0s;
}

.gm-pcard {
	border-color: rgb(255 255 255 / 0.08);
	border-radius: 24px;
}

.gm-pcard__band {
	min-height: 0;
	padding: 5rem 1.75rem 1.75rem;
	background: linear-gradient(180deg, rgb(114 21 244 / 0) 0%, rgb(96 18 210 / 0.72) 38%, rgb(52 10 120 / 0.94) 100%);
}

.gm-pcard__image {
	filter: saturate(0.75) brightness(0.85);
	transition: transform 1.2s var(--gm-proj-ease), filter 900ms var(--gm-proj-ease);
}

.gm-proj[data-mode="accordion"] .gm-pcard.is-active .gm-pcard__image,
.gm-proj:not([data-mode="accordion"]) .gm-pcard:hover .gm-pcard__image {
	filter: none;
	transform: scale(1.03);
}

.gm-proj[data-mode="accordion"] .gm-pcard__location,
.gm-proj[data-mode="accordion"] .gm-pcard.is-active .gm-pcard__location {
	font-size: 1.625rem;
	transition: none;
}

.gm-proj[data-mode="accordion"] .gm-pcard__stats,
.gm-proj[data-mode="accordion"] .gm-pcard.is-active .gm-pcard__stats {
	font-size: 1.75rem;
	transform-origin: left bottom;
	transition: transform var(--gm-proj-time) var(--gm-proj-ease);
}

.gm-proj[data-mode="accordion"] .gm-pcard.is-active .gm-pcard__stats {
	transform: scale(1.18);
}

.gm-pcard__go {
	width: 40px;
	height: 40px;
	border: 1px solid rgb(255 255 255 / 0.4);
	background: rgb(255 255 255 / 0.08);
}

.gm-pcard__go .gm-icon {
	width: 18px;
	height: 18px;
}

/* ---------------------------------------------------------------------
 * Forms with a photo ("Planning your next programme?", "Get in touch"):
 * a richer purple wash on hover.
 * ------------------------------------------------------------------ */

.gm-contact__media::before {
	background: linear-gradient(160deg, rgb(114 21 244 / 0.7) 0%, rgb(114 21 244 / 0.4) 50%, rgb(80 15 171 / 0.22) 100%);
	transition: opacity 700ms var(--gm-ease);
}

/* ---------------------------------------------------------------------
 * Lead contact bar: slightly bigger.
 * ------------------------------------------------------------------ */

.gm-lead__bar {
	padding: 1.25rem 1.5rem;
}

.gm-lead__label {
	font-size: 0.75rem;
}

.gm-lead__text {
	max-width: 20rem;
	font-size: var(--gm-text-body);
}

.gm-lead__photo {
	width: 4.5rem;
	height: 4.5rem;
}

.gm-lead__who {
	font-size: var(--gm-text-body);
}

.gm-lead__who span {
	font-size: var(--gm-text-sm);
}

@media (min-width: 900px) {
	.gm-lead__bar {
		gap: 2.5rem;
		padding: 1rem 1rem 1rem 2.5rem;
	}
}

/* ---------------------------------------------------------------------
 * Insights cards: a quiet "Read" text link instead of a black pill.
 * ------------------------------------------------------------------ */

.gm-read {
	gap: 0.625rem;
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--gm-text);
	font-size: 0.75rem;
	letter-spacing: 0.16em;
}

.gm-surface--inverse .gm-read {
	border: 0;
	color: var(--gm-color-white);
}

.gm-read .gm-icon {
	inline-size: 2rem;
	block-size: 2rem;
	padding: 0.5rem;
	border: 1px solid rgb(114 21 244 / 0.35);
	background: transparent;
	color: var(--gm-color-purple);
	transition: background-color 300ms var(--gm-ease), color 300ms var(--gm-ease), border-color 300ms var(--gm-ease);
}

@media (hover: hover) {
	.gm-post__link:hover .gm-read {
		box-shadow: none;
	}

	.gm-post__link:hover .gm-read .gm-icon {
		border-color: var(--gm-color-purple);
		background: var(--gm-color-purple);
		color: var(--gm-color-white);
	}
}

/* ---------------------------------------------------------------------
 * Builder pages that do not open with a hero (e.g. Contact): keep the
 * page title for screen readers and search engines, but do not show the
 * large title above the first section.
 * ------------------------------------------------------------------ */

.gm-pb-no-hero .page-header {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

/* Menu headings that only group links (Sectors, Services). */
.gm-nav a:not([href]) {
	cursor: default;
}

/* ---------------------------------------------------------------------
 * Review by Timmy Falvey (15 Oct 2026).
 * ------------------------------------------------------------------- */

/* Vision & mission: no purple-on-purple. The vision card highlights in
   white (soft underline), the mission card in light purple on black. */
.gm-vm__card--vision {
	--gm-highlight: var(--gm-color-white);
	--gm-hl-base: rgb(255 255 255 / 0.6);
}

.gm-vm__card--mission {
	--gm-highlight: var(--gm-color-light-purple);
	--gm-hl-base: var(--gm-color-white);
}

.gm-vm__card--vision .gm-vm__text .gm-highlight {
	color: var(--gm-color-white);
	text-decoration: underline;
	text-decoration-color: rgb(255 255 255 / 0.45);
	text-decoration-thickness: 0.06em;
	text-underline-offset: 0.14em;
}

/* Announcements (image tiles): a brand-purple gradient rises from the
   bottom and covers any text baked into the photo; the title stays white.
   On hover the gradient climbs higher and deepens, the photo zooms softly. */
.gm-post--image .gm-post__link {
	isolation: isolate;
	box-shadow: 0 18px 40px -28px rgb(114 21 244 / 0.55);
	transition: box-shadow 500ms var(--gm-ease), transform 500ms var(--gm-ease);
}

.gm-post--image .gm-post__link::after {
	position: absolute;
	z-index: 1;
	inset: 0;
	background: linear-gradient(180deg, rgb(114 21 244 / 0) 0%, rgb(114 21 244 / 0.35) 38%, rgb(114 21 244 / 0.82) 68%, rgb(78 12 176 / 0.96) 100%);
	opacity: 0.92;
	transform: translateY(18%);
	transition: transform 600ms var(--gm-ease), opacity 600ms var(--gm-ease);
	content: "";
	pointer-events: none;
}

.gm-post--image .gm-post__body {
	z-index: 2;
	background: none;
}

.gm-post--image .gm-post__date {
	color: rgb(255 255 255 / 0.8);
}

.gm-post--image .gm-post__title {
	color: var(--gm-color-white);
}

@media (hover: hover) {
	.gm-post--image .gm-post__link:hover {
		box-shadow: 0 26px 50px -26px rgb(114 21 244 / 0.75);
		transform: translateY(-4px);
	}

	.gm-post--image .gm-post__link:hover::after {
		opacity: 1;
		transform: translateY(0);
	}

	.gm-post--image .gm-post__link:hover .gm-post__title {
		color: var(--gm-color-white);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gm-post--image .gm-post__link,
	.gm-post--image .gm-post__link::after {
		transition: none;
	}
}

/* 4 Boxes: every box reacts on hover, linked or not. The purple brand
   gradient fades in, the photo zooms slowly, the text rises a little and a
   thin light-purple line grows under the title. */
.gm-box__image {
	transition: transform 900ms var(--gm-ease), opacity 600ms var(--gm-ease);
}

.gm-box__body {
	transition: transform 600ms var(--gm-ease);
}

.gm-box__title::after {
	display: block;
	width: 2.5rem;
	height: 2px;
	margin-top: 0.75rem;
	border-radius: 2px;
	background: var(--gm-color-light-purple);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 600ms var(--gm-ease);
	content: "";
}

/* Titles start on the same line across the row: every title reserves two
   lines (a one-line title leaves the second empty), so a wrapping title
   such as "Project Management Consultancy" no longer pushes up. Only where
   the boxes sit side by side. */
@media (min-width: 1024px) {
	.gm-four-boxes .gm-box__title {
		min-height: calc(2em * 1.15 + 0.75rem + 2px); /* two lines + hover line */
	}
}

@media (hover: hover) {
	.gm-box:hover::before {
		opacity: 1;
	}

	.gm-box:hover .gm-box__image {
		opacity: 1;
		transform: scale(1.06);
	}

	.gm-box:hover .gm-box__body {
		transform: translateY(-6px);
	}

	.gm-box:hover .gm-box__title::after {
		transform: scaleX(1);
	}
}

.gm-box:focus-within::before {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.gm-box__image,
	.gm-box__body,
	.gm-box__title::after {
		transition: none;
	}

	.gm-box:hover .gm-box__image,
	.gm-box:hover .gm-box__body {
		transform: none;
	}
}

/* Buttons: one standard everywhere — capitals, 15px, same tracking and
   weight, whatever the layout or size variant (--sm keeps its smaller
   height and icon only). Text links that act as buttons follow too.
   !important: several layouts set their own button type sizes. */
/* Oct 2026 review: 14px, sentence case (capital first letter only), a
   lighter tracking and a little more room before the arrow icon. The label
   is lower-cased and its first letter capitalised, so editors can type any
   case; LinkedIn links keep their own spelling. */
.gm-btn,
.gm-btn--sm,
.gm-btn--lg,
.gm-textlink,
.gm-hero-video__cta {
	font-size: 0.9375rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.02em !important;
	text-transform: none !important;
}

.gm-btn,
.gm-hero-video__cta {
	gap: 1.125rem !important;
}

.gm-hero-video__cta > span:first-child {
	margin-right: 1.125rem;
}

.gm-btn .gm-btn__label,
.gm-hero-video__cta > span:first-child,
.gm-textlink > span:first-child {
	display: inline-block;
	font-size: inherit !important;
	letter-spacing: inherit !important;
	text-transform: lowercase !important;
}

.gm-btn .gm-btn__label::first-letter,
.gm-hero-video__cta > span:first-child::first-letter,
.gm-textlink > span:first-child::first-letter {
	text-transform: uppercase;
}

a[href*="linkedin.com"] .gm-btn__label,
a[href*="linkedin.com"] > span:first-child {
	text-transform: none !important;
}

/* One text size and one line spacing for running text across the site
   (body = 17px, line height 1.4 – a little tighter than before). */
:root {
	--gm-text-body-md: var(--gm-text-body);
	--gm-text-body-lg: var(--gm-text-body);
	--gm-text-intro: var(--gm-text-body);
	--gm-leading-body: 1.4;
	--gm-leading-intro: 1.4;
}

body,
.gm-hero-image__intro,
.gm-hero-video__intro,
.gm-section-header__intro,
.gm-section-header__intro p,
.gm-type-intro,
.gm-box__text,
.gm-slide-box__text,
.gm-csd__text,
.gm-alt__text,
.gm-caselist__text,
.gm-sectors__body,
.gm-sector__text,
.gm-pcard__desc,
.gm-pcard__services,
.gm-contact__intro,
.gm-textimg__body,
.gm-textimg__body p,
.gm-vm__text,
.entry-content p,
.gm-vac__about,
.gm-vac__about p {
	line-height: 1.4 !important;
}

.gm-hero-image__intro {
	font-size: var(--gm-text-body) !important;
}

/* Homepage banner line ("Project and cost management for the
   infrastructure shaping the future"): a lead under "Build with Data",
   larger and lighter so it reads as a subtitle, max two lines. */
.gm-hero-video__intro {
	max-width: 34rem;
	font-size: clamp(1.25rem, 0.95rem + 1.1vw, 1.75rem) !important;
	font-weight: 500 !important;
	letter-spacing: -0.005em;
	line-height: 1.25 !important;
	text-wrap: balance;
}

/* ---------------------------------------------------------------------
 * One type scale for the whole site (Oct 2026). Desktop sizes in the
 * comments; every size scales down on phones.
 *   Display (homepage "Build with Data") — unchanged
 *   H1 68 · H2 52 · H3-L 32 · H3 24 · eyebrow 19
 *   text 17 · small 14 · label 12 (caps) · button/link 14
 * ------------------------------------------------------------------- */
:root {
	--gm-fs-h1: clamp(2.5rem, 1.6rem + 3.2vw, 4.25rem);
	--gm-fs-h2: clamp(2rem, 1.35rem + 2.4vw, 3.25rem);
	--gm-fs-h3l: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	--gm-fs-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
	--gm-fs-eyebrow: clamp(1rem, 0.95rem + 0.25vw, 1.1875rem);
	--gm-fs-text: 1.0625rem;
	--gm-fs-small: 0.875rem;
	--gm-fs-label: 0.75rem;
}

/* H1: page banners and pages without a banner (policies). */
.gm-hero-image__title,
.page-header__title,
.entry-title {
	font-size: var(--gm-fs-h1) !important;
	line-height: 1.05 !important;
}

/* H2: section headings. */
.gm-section-header__title,
.gm-why__title,
.gm-textimg__title,
.gm-textcols__title,
.gm-contact__title,
.gm-cta__title,
.gm-sectors__title,
.gm-regions .gm-section-header__title,
.gm-projects .gm-section-header__title,
.gm-msc__heading,
.gm-csd__role {
	font-size: var(--gm-fs-h2) !important;
	line-height: 1.08 !important;
}

.gm-csd__role {
	font-size: var(--gm-fs-h3l) !important;
	line-height: 1.2 !important;
}

/* H3 large: item names in long lists. */
.gm-alt__title,
.gm-caselist__name {
	font-size: var(--gm-fs-h3l) !important;
	line-height: 1.15 !important;
}

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

/* H3: card, box, pill, office, project and step titles. */
.gm-card__title,
.gm-box__title,
.gm-slide-box__title,
.gm-sector__name,
.gm-office__city,
.gm-pcard__location,
.gm-msc__title,
.gm-loc__name,
.gm-people__name,
.gm-vstack__title,
.gm-post__title,
.gm-vac__title,
.gm-vm__card--mission .gm-vm__text {
	font-size: var(--gm-fs-h3) !important;
	line-height: 1.2 !important;
}

/* Eyebrow (label next to the purple arrow). */
.gm-eyebrow,
.gm-eyebrow__label {
	font-size: var(--gm-fs-eyebrow) !important;
}

/* Running text, cards included. */
.gm-card__text,
.gm-sector__text,
.gm-pcard__services,
.gm-pcard__desc,
.gm-loc__text,
.gm-office__address,
.gm-csd__scope-list li,
.gm-alt__text,
.gm-caselist__text,
.gm-csd__text,
.gm-box__text,
.gm-slide-box__text,
.gm-vstack__text,
.gm-why__body,
.gm-textimg__body,
.gm-textcols__body,
.gm-story__quote:not(.gm-story__quote--lg),
.entry-content p,
.entry-content li {
	font-size: var(--gm-fs-text) !important;
}

/* Small text: roles, contact lines, notes, meta. */
.gm-pcard__name,
.gm-card__meta,
.gm-office__contact,
.gm-story__who,
.gm-story__who span,
.gm-people__role,
.gm-lead__who span,
.gm-caselist__client,
.gm-caselist__stats,
.gm-regions__hint,
.gm-post__date,
.gm-csd__fact dt {
	font-size: var(--gm-fs-small) !important;
}

/* Labels: small caps tags. */
.gm-alt__kicker,
.gm-caselist__location,
.gm-caselist__scope li,
.gm-csd__scope-label,
.gm-vm__label,
.gm-story__tag,
.gm-alt__num {
	font-size: var(--gm-fs-label) !important;
}

/* Forms ("Planning your next programme?", "Apply for this role"): the
   intro sits under the title, not in a narrow column beside it. */
@media (min-width: 640px) {
	.gm-contact__head {
		grid-template-columns: minmax(0, 1fr);
	}

	.gm-contact__intro {
		padding-top: 0;
	}
}

.gm-contact__intro {
	max-width: 34rem;
}

/* Case study facts (Location · Client · Project size · Project value) as a
   violet-outline pill: value large on top, label small underneath,
   centred, no dividers. */
.gm-csd__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem 1rem;
	align-items: center;
	padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem) clamp(1.5rem, 1rem + 3vw, 3.5rem);
	border: 1.5px solid var(--gm-color-purple);
	border-top-color: var(--gm-color-purple);
	border-bottom-color: var(--gm-color-purple);
	border-radius: 999px;
	background: var(--gm-color-white);
}

@media (min-width: 900px) {
	.gm-csd__facts {
		grid-auto-flow: column;
		grid-template-columns: none;
		grid-auto-columns: minmax(0, 1fr);
	}
}

@media (max-width: 599px) {
	.gm-csd__facts {
		grid-template-columns: minmax(0, 1fr);
		border-radius: 32px;
	}
}

.gm-csd__fact,
.gm-csd__fact + .gm-csd__fact {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: 0.375rem;
	padding: 0;
	border-left: 0;
	text-align: center;
}

.gm-csd__fact dd {
	margin: 0;
	color: var(--gm-color-black);
	font-family: var(--gm-font-heading);
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem) !important;
	font-weight: var(--gm-weight-bold);
	line-height: 1.1 !important;
	text-wrap: balance;
}

/* Text values (location, client) are longer: a size down. */
.gm-csd__fact:nth-child(-n + 2) dd {
	font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem) !important;
}

.gm-csd__fact dt {
	color: var(--gm-text-secondary);
	font-size: var(--gm-fs-small) !important;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

/* ---------------------------------------------------------------------
 * Mobile friendliness (Oct 2026 audit at 375px).
 * ------------------------------------------------------------------- */

/* Carousel dots: same look, 44px tap area (WCAG 2.5.8). */
.gm-carousel-dot {
	position: relative;
}

.gm-carousel-dot::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
	content: "";
}

/* Case study tabs: wrap into pills on small screens instead of running
   off the edge. */
@media (max-width: 767px) {
	.gm-caselist__tabs {
		flex-wrap: wrap;
		gap: 0.5rem;
		overflow: visible;
		border-bottom: 0;
	}

	.gm-caselist__tab {
		flex: 0 0 auto;
		padding: 0.5rem 1rem;
		border: 1px solid rgb(16 16 16 / 0.18);
		border-radius: 999px;
		font-size: 0.9375rem;
	}

	.gm-caselist__tab::after {
		display: none;
	}

	.gm-caselist__tab.is-active {
		border-color: var(--gm-color-purple);
		background: var(--gm-color-purple);
		color: var(--gm-color-white);
	}

	/* Small labels: readable on phones. */
	.gm-alt__kicker,
	.gm-caselist__location,
	.gm-caselist__scope li,
	.gm-csd__scope-label,
	.gm-vm__label,
	.gm-story__tag,
	.gm-office__label {
		font-size: 0.8125rem !important;
	}
}

/* Headings inside plain text pages (Privacy, Cookie Policy, articles). */
.entry-content h2 {
	margin-top: 2.5rem;
	font-size: var(--gm-fs-h3l) !important;
	line-height: 1.2 !important;
}

.entry-content h3 {
	font-size: var(--gm-fs-h3) !important;
	line-height: 1.25 !important;
}

/* Buttons and text links share one size. */
.gm-read,
.gm-alt__more {
	font-size: 0.9375rem !important;
	letter-spacing: 0.02em !important;
}

/* Statements and headings keep their own tighter leading. */
.gm-vm__card--vision .gm-vm__text {
	line-height: 1.12 !important;
}

/* No pause buttons on the homepage video and the logo strip; the logos
   keep running on hover too (motion still stops for visitors who switch
   animations off in their system settings). */
.gm-hero-video__toggle,
.gm-marquee__toggle,
.gm-marquee__bar {
	display: none !important;
}

.gm-marquee.is-running:hover .gm-marquee__track,
.gm-marquee.is-running:focus-within .gm-marquee__track,
.gm-marquee.is-paused .gm-marquee__track {
	animation-play-state: running;
}

/* "Explore other sectors": three tall pills visible on desktop (two on
   tablets), fully rounded, text centred in the lower half. The carousel
   column is wider so the three pills keep a slim, elegant shape. */
/* Heading on top, the pills below across the full width. */
@media (min-width: 1024px) {
	.gm-sectors__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--gm-space-32, 2rem);
	}
}

.gm-sector {
	border-radius: 999px;
	text-align: center;
}

.gm-sector__body {
	align-items: center;
	padding: 0 1.5rem 3.25rem;
}

.gm-sector__name {
	font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem);
}

.gm-sector__text {
	font-size: 0.9375rem;
	line-height: 1.4;
}

.gm-sector__image {
	opacity: 0.85;
	transition: transform 900ms var(--gm-ease);
}

@media (min-width: 640px) {
	.gm-sector {
		flex-basis: calc(50cqw - 11px);
	}
}

@media (min-width: 1024px) {
	.gm-sector {
		flex-basis: calc((100cqw - 66px) / 4); /* four visible */
		height: clamp(26rem, 22rem + 8vw, 30rem);
	}
}

@media (hover: hover) {
	.gm-sector--linked:hover .gm-sector__image {
		transform: scale(1.06);
	}
}

/* Homepage banner: no photo before the video plays (dark banner with the
   brand gradient, then the video fades in). Visitors who never get the
   player (reduced motion) keep the photo. */
.gm-hero-video--has-player .gm-hero-video__poster {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.gm-hero-video--has-player .gm-hero-video__poster {
		display: block;
	}
}

.gm-hero-video--has-player .gm-hero-video__media {
	background: radial-gradient(ellipse at 75% 40%, rgb(114 21 244 / 0.35) 0%, rgb(0 0 0 / 0) 60%), #050308;
}

/* "Data dripping" canvas: above the gradient, under the text. */
.gm-hero-data {
	position: absolute;
	z-index: 1;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	mix-blend-mode: screen;
}

/* Footer: no tagline, so the brand row sits on one line and the gap to
   the link columns is tighter. */
.gm-footer__inner {
	gap: clamp(2rem, 1.5rem + 2vw, 2.75rem);
}

.gm-footer__top {
	align-items: center;
}

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