/* GrooveMe — one stylesheet for the whole site.
   Palette and wordmark come from the original GrooveMe logo: black, cyan, and the prismatic ring colours
   (red, green, purple, violet, amber) that become the holographic gradient used for accents. */

:root {
	--ink: #07070A;
	--ink-2: #0C0C12;
	--surface: #101017;
	--surface-2: #16161F;
	--line: rgba(255, 255, 255, .11);
	--line-soft: rgba(255, 255, 255, .06);
	--text: #F4F5F8;
	--muted: #A4A7B6;
	--cyan: #00BCE3;
	--cyan-bright: #35D7F7;
	--red: #E31836;
	--green: #81BB55;
	--purple: #AA5CA4;
	--violet: #8077B7;
	--amber: #FAAA52;
	--holo: linear-gradient(104deg, var(--cyan) 0%, var(--violet) 26%, var(--purple) 46%, var(--red) 66%, var(--amber) 84%, var(--green) 100%);
	/* Sora for headings (round geometric O's that echo the logo rings), Inter for text. */
	--display: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--text-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--body: #C9CCD6;
	--wrap: 1240px;
	--gutter: clamp(16px, 5vw, 56px);
	--radius: 18px;
	--radius-lg: 26px;
	--header-h: 76px;
	--section-y: clamp(60px, 7vw, 108px);
	--ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--ink);
	color: var(--text);
	font-family: var(--text-font);
	font-size: 17px;
	line-height: 1.7;
	font-weight: 400;
	/* Inter's optical sizing tightens large text into its Display cut; keep the text cut everywhere. */
	font-optical-sizing: none;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: var(--cyan); color: #04131A; }

:where(a, button, input, textarea, summary):focus-visible {
	outline: 2px solid var(--cyan-bright);
	outline-offset: 3px;
	border-radius: 4px;
}

.gm-skip {
	position: absolute; left: -9999px; top: 8px; z-index: 200;
	background: var(--cyan); color: #04131A; padding: 10px 18px; border-radius: 999px;
	font-weight: 700; text-decoration: none;
}
.gm-skip:focus { left: 16px; }

.gm-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------------------------------------------------------------- typography */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--display);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -.02em;
	color: #fff;
	margin: 0 0 .5em;
	text-wrap: balance;
}
h1 { font-size: clamp(32px, 4.6vw, 60px); font-weight: 700; line-height: 1.08; }
h2 { font-size: clamp(26px, 3vw, 40px); }
h3 { font-size: clamp(19px, 1.7vw, 23px); letter-spacing: -.01em; }
h4 { font-size: clamp(17px, 1.3vw, 19px); letter-spacing: 0; }
p { margin: 0 0 1.1em; }
.gm-content p { color: var(--body); }
p:last-child { margin-bottom: 0; }

.gm-label, .gm-content p.gm-label {
	font-family: var(--text-font);
	font-size: 12px; font-weight: 700; line-height: 1.4;
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--cyan);
	margin: 0 0 14px;
}
.gm-lead, .gm-content p.gm-lead {
	font-size: clamp(17px, 1.5vw, 20px);
	color: var(--muted);
	max-width: 62ch;
	line-height: 1.6;
}
.gm-prose { max-width: 70ch; }
.gm-prose p { color: var(--body); }
.gm-hint { color: var(--muted); font-size: 15px; }

/* Gradient text for the one word that carries the brand's prismatic idea. */
.gm-holo {
	background: var(--holo);
	-webkit-background-clip: text; background-clip: text;
	color: transparent;
}

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

.gm-header {
	position: fixed; inset: 0 0 auto; z-index: 100;
	transition: transform .35s var(--ease);
}
/* The blur sits on a pseudo-element: a filter on the header itself would become the containing block for
   the fixed phone menu and trap it. */
.gm-header::before {
	content: ''; position: absolute; inset: 0;
	background: rgba(7, 7, 10, .86);
	backdrop-filter: saturate(150%) blur(14px);
	-webkit-backdrop-filter: saturate(150%) blur(14px);
	border-bottom: 1px solid var(--line-soft);
	opacity: 0; transition: opacity .3s var(--ease);
	pointer-events: none;
}
.gm-header.is-stuck::before, body:not(.gm-has-hero) .gm-header::before { opacity: 1; }
.gm-header.is-hidden { transform: translateY(-100%); }
.gm-header.is-open { transform: none; }

.gm-bar {
	position: relative; z-index: 1;
	width: 100%; max-width: var(--wrap); margin-inline: auto;
	padding: 14px var(--gutter);
	display: flex; align-items: center; gap: 24px;
	min-height: var(--header-h);
}

.gm-logo-link { flex: 0 0 auto; line-height: 0; }
.gm-logo-img { width: auto; height: 30px; }

.gm-nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.gm-menu {
	list-style: none; margin: 0; padding: 0;
	display: flex; align-items: center; gap: 4px;
}
.gm-menu > li { position: relative; }
.gm-menu a {
	display: block; padding: 9px 13px;
	font-size: 15px; font-weight: 500; letter-spacing: 0;
	text-decoration: none; color: var(--text);
	background: transparent;
	border-radius: 999px;
	transition: color .2s var(--ease);
}
/* Hover only (the owner wants no permanent underline or pill): the link lights up in the logo cyan and a
   prismatic line in the logo rings' colours draws in under it from the centre. */
.gm-menu > li:not(.gm-cta) > a { position: relative; transition: color .25s var(--ease); }
.gm-menu > li:not(.gm-cta) > a::after {
	content: ''; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 2px; border-radius: 2px;
	background: var(--holo);
	transform: scaleX(0); transform-origin: center;
	transition: transform .3s var(--ease);
}
@media (hover: hover) {
	.gm-menu > li:not(.gm-cta) > a:hover { color: var(--cyan-bright); background: transparent; }
	.gm-menu > li:not(.gm-cta) > a:hover::after { transform: scaleX(1); }
}
.gm-menu > li:not(.gm-cta) > a:focus-visible::after { transform: scaleX(1); }
.gm-menu > li.current-menu-item:not(.gm-cta) > a { color: #fff; background: transparent; }

.gm-menu .gm-cta > a, .gm-menu li.gm-cta > a {
	background: var(--cyan); color: #04131A; font-weight: 600;
	padding: 10px 22px;
}
.gm-menu .gm-cta > a::after { display: none; }
.gm-menu .gm-cta > a { transition: background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
@media (hover: hover) {
	.gm-menu .gm-cta > a:hover {
		background: var(--cyan-bright); color: #04131A;
		transform: translateY(-2px);
		box-shadow: 0 8px 26px rgba(0, 188, 227, .45);
	}
}

.gm-menu .sub-menu {
	list-style: none; margin: 0; padding: 8px;
	position: absolute; top: calc(100% + 10px); left: 0; min-width: 220px;
	background: var(--surface-2);
	border: 1px solid var(--line); border-radius: 14px;
	box-shadow: 0 24px 50px rgba(0, 0, 0, .55);
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
/* Core navigation forces submenu link colour: set it explicitly on the dark panel. */
.gm-menu .sub-menu a { color: var(--text); font-weight: 500; }
.gm-menu li:hover > .sub-menu,
.gm-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }

.gm-nav-extra { display: none; }

.gm-socials { list-style: none; display: flex; gap: 10px; margin: 0; padding: 0; }
.gm-socials a {
	display: grid; place-items: center; width: 38px; height: 38px;
	border: 1px solid var(--line); border-radius: 50%;
	color: var(--muted);
	transition: color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.gm-socials svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) {
	.gm-socials a:hover { color: var(--cyan); border-color: var(--cyan); transform: translateY(-2px); }
}

.gm-burger {
	display: none; margin-left: auto;
	width: 44px; height: 44px; padding: 0;
	background: transparent; border: 1px solid var(--line); border-radius: 12px;
	cursor: pointer;
	flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.gm-burger span { display: block; width: 19px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .28s var(--ease), opacity .2s var(--ease); }
.gm-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.gm-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.gm-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------------- hero */

.gm-hero {
	position: relative;
	min-height: min(96vh, 900px);
	display: flex; align-items: flex-end;
	padding: calc(var(--header-h) + 40px) 0 clamp(48px, 7vw, 96px);
	overflow: hidden;
	isolation: isolate;
}
/* The image sits inside a block-editor <figure>; both it and the figure must fill the hero, or the
   photograph keeps its own aspect ratio and leaves a black gap (clearly visible on phones). */
.gm-hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.gm-hero-media .wp-block-image,
.gm-hero-media figure { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border-radius: 0; }
.gm-hero-media img {
	width: 100%; height: 100%; object-fit: cover; object-position: center 28%;
	animation: gm-drift 26s ease-in-out infinite alternate;
}
@keyframes gm-drift { from { transform: scale(1.04); } to { transform: scale(1.12); } }
/* The hero photograph is performers lit against black: the scrim only deepens the bottom for the text. */
.gm-hero::before {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(to top, var(--ink) 2%, rgba(7, 7, 10, .72) 32%, rgba(7, 7, 10, .18) 62%, rgba(7, 7, 10, .55) 100%);
}
/* A thin prismatic line at the foot of the hero, echoing the logo rings. */
.gm-hero::after {
	content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
	background: var(--holo); opacity: .9;
}
.gm-hero-inner { position: relative; width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.gm-hero-title {
	font-size: clamp(36px, 6.2vw, 84px);
	font-weight: 700; line-height: 1.04;
	letter-spacing: -.03em;
	margin: 0 0 22px;
	max-width: 15ch;
}
.gm-hero .gm-lead, .gm-content .gm-hero p.gm-lead { max-width: 52ch; color: #DADCE5; }
.gm-hero .gm-btns { margin-top: 30px; }

/* Topic pages (About, Awards, Festivals, Corporate, Investors) open on a shorter photo hero. */
.gm-hero-page { min-height: clamp(380px, 62vh, 600px); }
.gm-hero-page .gm-hero-title { font-size: clamp(40px, 6vw, 80px); margin-bottom: 0; }
.gm-hero-page .gm-hero-media img { object-position: center 40%; }
.gm-hero-page + .gm-section { padding-top: clamp(48px, 6vw, 92px); }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- buttons */

.gm-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.gm-btn {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 14px 26px;
	border-radius: 999px; border: 1px solid transparent;
	font-family: var(--text-font); font-size: 15px; font-weight: 600;
	letter-spacing: .005em; line-height: 1.2; text-decoration: none; cursor: pointer;
	transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.gm-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gm-btn-primary { background: var(--cyan); color: #04131A; }
.gm-btn-ghost { border-color: var(--line); color: var(--text); background: rgba(255, 255, 255, .04); }
@media (hover: hover) {
	.gm-btn:hover { transform: translateY(-2px); }
	.gm-btn-primary:hover { background: var(--cyan-bright); }
	.gm-btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); }
}

/* Core Button blocks are used inside page content so the owner can edit them in the normal editor; they
   are given the same look as the theme's own buttons. */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.gm-section > .gm-wrap > .wp-block-buttons,
.gm-btns-center,
.wp-block-buttons.gm-btns-center {
	justify-content: center;
	margin-top: clamp(28px, 4vw, 44px);
}
.wp-block-button { margin: 0; }
.wp-block-button__link, .wp-element-button {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 14px 26px;
	background: var(--cyan); color: #04131A;
	border: 1px solid transparent; border-radius: 999px;
	font-family: var(--text-font); font-size: 15px; font-weight: 600; letter-spacing: .005em; line-height: 1.2;
	text-decoration: none; cursor: pointer;
	transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.wp-block-button.is-style-outline .wp-block-button__link {
	background: rgba(255, 255, 255, .04); color: var(--text); border-color: var(--line);
}
@media (hover: hover) {
	.wp-block-button__link:hover { transform: translateY(-2px); background: var(--cyan-bright); color: #04131A; }
	.wp-block-button.is-style-outline .wp-block-button__link:hover { background: rgba(255, 255, 255, .04); border-color: var(--cyan); color: var(--cyan); }
}

/* ---------------------------------------------------------------- sections */

.gm-section { padding-block: var(--section-y); position: relative; }
.gm-section-tight { padding-block: clamp(44px, 5vw, 78px); }
/* Two sections on the same background would stack both paddings into one empty band. */
.gm-section-tight + .gm-section:not(.gm-surface) { padding-top: clamp(28px, 3vw, 44px); }
.gm-surface { background: var(--surface); }
.gm-section > .gm-wrap > .gm-label:first-child { margin-top: 0; }

.gm-head { max-width: 72ch; margin-bottom: clamp(26px, 3vw, 44px); }
.gm-head-wide { max-width: none; }

/* Photo band: the original ABOUT / AWARDS / FESTIVALS / CORPORATE / INVESTORS dividers, rebuilt as a
   full-bleed photograph with the section name over it instead of the old flat grey bar. */
.gm-band {
	position: relative;
	min-height: clamp(240px, 34vw, 400px);
	display: grid; place-items: center;
	overflow: hidden; isolation: isolate;
	text-align: center;
}
.gm-band img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.gm-band::before {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(to bottom, rgba(7, 7, 10, .78), rgba(7, 7, 10, .55) 50%, rgba(7, 7, 10, .88));
}
.gm-band-inner { padding: clamp(40px, 6vw, 72px) var(--gutter); }
.gm-band-label {
	font-family: var(--display);
	font-size: clamp(28px, 4vw, 50px); font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase;
	margin: 0;
}
.gm-band-rule { width: 76px; height: 3px; background: var(--holo); border-radius: 3px; margin: 18px auto 0; }
.gm-band .gm-btns { margin-top: 28px; display: flex; justify-content: center; }

/* ---------------------------------------------------------------- split rows */

.gm-split { display: grid; gap: clamp(28px, 4.5vw, 72px); align-items: center; }
@media (min-width: 900px) {
	.gm-split { grid-template-columns: 1fr 1fr; }
	.gm-split-rev .gm-split-media { order: -1; }
	.gm-split-wide { grid-template-columns: 1.05fr .95fr; }
}
.gm-split-text > :first-child { margin-top: 0; }
.gm-split-media { min-width: 0; }
/* A heading in a half-width column needs a smaller scale than a full-width section heading. */
.gm-split-text h2 { font-size: clamp(24px, 2.3vw, 32px); }
.gm-split-text h3 { font-size: clamp(18px, 1.7vw, 23px); }
/* WordPress gives .wp-block-image `display: table`, which shrink-wraps the figure; these images are
   meant to fill their column. */
.gm-split-img, .gm-wide-img {
	display: block;
	width: 100%;
	border-radius: var(--radius-lg);
	border: 1px solid var(--line-soft);
	overflow: hidden;
}
.gm-split-img img, .gm-wide-img img { width: 100%; border-radius: inherit; }

/* ---------------------------------------------------------------- topic cards */

/* The homepage's way into each story page, and "More from GrooveMe" at the foot of each story. */
.gm-section-explore { padding-top: clamp(16px, 2.5vw, 36px); }
.gm-topics { display: grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: 1fr; }
.gm-topic {
	position: relative; min-width: 0;
	display: flex; flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
	overflow: hidden;
	scroll-margin-top: calc(var(--header-h) + 20px);
	transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.gm-surface .gm-topic { background: var(--ink-2); }
.gm-content .gm-topic-img { display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2); }
.gm-topic-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.gm-topic-body { display: flex; flex-direction: column; flex: 1; padding: clamp(18px, 2vw, 28px); }
.gm-topic-body > .gm-label { margin-bottom: 8px; }
.gm-topic-body h3 { margin: 0 0 .45em; font-size: clamp(20px, 1.8vw, 26px); }
.gm-content p.gm-topic-line { color: var(--muted); font-size: 15.5px; line-height: 1.6; margin: 0 0 18px; }
.gm-content p.gm-topic-more { margin: auto 0 0; }
.gm-topic-link {
	display: inline-flex; align-items: center; gap: 8px;
	color: var(--cyan); font-weight: 600; font-size: 15px; text-decoration: none;
}
.gm-topic-link::before { content: ''; position: absolute; inset: 0; z-index: 1; } /* whole card is the link */
.gm-topic-link::after { content: '→'; transition: transform .25s var(--ease); }
.gm-topic:focus-within { outline: 2px solid var(--cyan-bright); outline-offset: 3px; }
.gm-topic-link:focus-visible { outline: none; }
@media (hover: hover) {
	.gm-topic:hover, .js .gm-topic.is-in:hover { transform: translateY(-4px); border-color: rgba(0, 188, 227, .35); }
	.gm-topic:hover .gm-topic-img img { transform: scale(1.05); }
	.gm-topic:hover .gm-topic-link::after { transform: translateX(4px); }
}
@media (min-width: 700px) {
	.gm-topics { grid-template-columns: repeat(2, 1fr); }
	/* Five cards: the last one takes the full row instead of leaving a hole. */
	.gm-topics > .gm-topic:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.gm-topics > .gm-topic:last-child:nth-child(odd) .gm-topic-img { aspect-ratio: 21 / 8; }
}
@media (min-width: 1000px) {
	/* Homepage: two wide cards, then three. */
	.gm-topics:not(.gm-topics-more) { grid-template-columns: repeat(6, 1fr); }
	.gm-topics:not(.gm-topics-more) > .gm-topic { grid-column: span 2; }
	.gm-topics:not(.gm-topics-more) > .gm-topic:nth-child(-n+2) { grid-column: span 3; }
	.gm-topics:not(.gm-topics-more) > .gm-topic:last-child:nth-child(odd) { grid-column: span 2; }
	.gm-topics:not(.gm-topics-more) > .gm-topic:last-child .gm-topic-img { aspect-ratio: 16 / 9; }
	/* Foot of a story page: the other four in one row. */
	.gm-topics-more { grid-template-columns: repeat(4, 1fr); }
	.gm-topics-more .gm-topic-body h3 { font-size: 20px; }
	.gm-content .gm-topics-more p.gm-topic-line { font-size: 14.5px; }
}

/* ---------------------------------------------------------------- homepage story + FAQ */

.gm-anchor { height: 0; scroll-margin-top: calc(var(--header-h) + 20px); }
.gm-section-story .gm-split { scroll-margin-top: calc(var(--header-h) + 20px); }
.gm-content .gm-split-text > .wp-block-buttons { margin-top: 26px; }

.gm-faq { max-width: 880px; display: grid; gap: 12px; }
/* Desktop: the heading sits beside the questions instead of above a half-empty row. */
@media (min-width: 1000px) {
	#faq > .gm-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
	#faq .gm-head { position: sticky; top: calc(var(--header-h) + 24px); margin-bottom: 0; }
	#faq .gm-faq { max-width: none; }
}
/* Phones and tablets: each story glimpse shows its photo first, so the photo is not read as the next story's. */
@media (max-width: 899px) {
	.gm-section-story .gm-split-media { order: -1; }
}
.gm-content .gm-faq-item {
	background: var(--surface);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius);
	transition: border-color .25s var(--ease), background .25s var(--ease);
}
.gm-faq-item[open] { border-color: rgba(0, 188, 227, .35); }
.gm-faq-item summary {
	list-style: none; cursor: pointer;
	display: flex; align-items: center; justify-content: space-between; gap: 18px;
	padding: 20px clamp(18px, 2.4vw, 28px);
	font-family: var(--display); font-weight: 600; font-size: clamp(16.5px, 1.4vw, 19px); line-height: 1.4; color: #fff;
	transition: color .2s var(--ease);
}
.gm-faq-item summary::-webkit-details-marker { display: none; }
/* A plus that turns into a minus. */
.gm-faq-item summary::after {
	content: ''; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
	border: 1px solid var(--line);
	background:
		linear-gradient(var(--cyan), var(--cyan)) center / 12px 2px no-repeat,
		linear-gradient(var(--cyan), var(--cyan)) center / 2px 12px no-repeat;
	transition: transform .3s var(--ease), background-size .3s var(--ease);
}
.gm-faq-item[open] summary::after { transform: rotate(180deg); background-size: 12px 2px, 2px 0; }
@media (hover: hover) {
	.gm-faq-item:hover { border-color: var(--line); background: var(--surface-2); }
	.gm-faq-item summary:hover { color: var(--cyan-bright); }
}
.gm-content .gm-faq-item > p { margin: 0 clamp(18px, 2.4vw, 28px) 14px; max-width: 70ch; color: var(--body); }
.gm-content .gm-faq-item > p:last-child { margin-bottom: 22px; }
.gm-faq-item > p a { color: var(--cyan); text-underline-offset: 3px; }

/* ---------------------------------------------------------------- cards */

.gm-cards { display: grid; gap: clamp(16px, 2vw, 26px); }
@media (min-width: 760px) { .gm-cards-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 760px) { .gm-cards-2 { grid-template-columns: repeat(2, 1fr); } }
.gm-card {
	background: var(--surface);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
	padding: clamp(24px, 2.6vw, 34px);
	min-width: 0;
	position: relative; overflow: hidden;
	transition: transform .3s var(--ease), border-color .3s var(--ease);
}
/* A prismatic hairline appears along the top of a card on hover. */
.gm-card::before {
	content: ''; position: absolute; inset: 0 0 auto; height: 3px;
	background: var(--holo);
	transform: scaleX(0); transform-origin: left;
	transition: transform .4s var(--ease);
}
@media (hover: hover) {
	.gm-card:hover { transform: translateY(-4px); border-color: var(--line); }
	.gm-card:hover::before { transform: scaleX(1); }
}
.gm-card > :first-child { margin-top: 0; }
.gm-card > :last-child { margin-bottom: 0; }
.gm-card h3 { margin-bottom: .6em; text-wrap: pretty; }
.gm-content .gm-card p { color: var(--muted); margin-bottom: 0; font-size: 16px; line-height: 1.7; }
.gm-card-n {
	font-family: var(--display); font-size: 13px; font-weight: 600;
	letter-spacing: .16em; color: var(--cyan); display: block; margin-bottom: 16px;
}

/* ---------------------------------------------------------------- video */

.gm-video { margin: 0; }
.gm-video + .gm-video { margin-top: clamp(20px, 2.5vw, 32px); }
/* WordPress reserves the embed's aspect ratio with a ::before spacer sized for an iframe. The lite player
   already sets its own 16:9 box, so leaving the spacer in doubles the height of every video. */
.wp-embed-responsive .wp-has-aspect-ratio .wp-block-embed__wrapper::before { content: none; }
.wp-block-embed__wrapper { position: relative; }
.gm-lite {
	display: block; position: relative;
	border-radius: var(--radius-lg); overflow: hidden;
	background: var(--surface-2);
	border: 1px solid var(--line-soft);
	aspect-ratio: 16 / 9;
}
.gm-lite-btn {
	display: block; width: 100%; height: 100%; padding: 0; margin: 0;
	background: none; border: 0; cursor: pointer; position: relative;
}
.gm-lite-btn img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease), opacity .3s var(--ease); }
.gm-lite-play {
	position: absolute; inset: 0; display: grid; place-items: center;
	background: linear-gradient(to top, rgba(7, 7, 10, .5), rgba(7, 7, 10, .05));
}
.gm-lite-play svg {
	width: 72px; height: 72px; padding: 20px;
	border-radius: 50%; background: rgba(7, 7, 10, .62);
	border: 2px solid rgba(255, 255, 255, .85);
	fill: #fff;
	transition: transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
	box-shadow: 0 10px 40px rgba(0, 0, 0, .45);
}
@media (hover: hover) {
	.gm-lite-btn:hover img { transform: scale(1.04); }
	.gm-lite-btn:hover .gm-lite-play svg { transform: scale(1.08); background: var(--cyan); border-color: var(--cyan); fill: #04131A; }
}
.gm-lite iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gm-video figcaption, .wp-block-embed figcaption {
	margin-top: 12px; font-size: 14.5px; color: var(--muted); text-align: left;
}

/* ---------------------------------------------------------------- quotes */

.gm-quote {
	position: relative;
	background: rgba(255, 255, 255, .035);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius);
	padding: clamp(22px, 2.6vw, 32px) clamp(22px, 3vw, 36px) clamp(22px, 2.6vw, 32px) clamp(26px, 3.2vw, 40px);
	margin: 0 0 1.4em;
	font-size: clamp(16.5px, 1.3vw, 18px);
	line-height: 1.7;
	overflow: hidden;
}
/* The prismatic edge of the logo rings, as the quote's left rule. */
.gm-quote::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(to bottom, var(--cyan), var(--purple), var(--amber)); }
.gm-content .gm-quote p { color: #E4E6ED; }
.gm-quote p:last-of-type { margin-bottom: 0; }
.gm-quote:last-child { margin-bottom: 0; }
.gm-quote-by {
	display: block; margin-top: 16px;
	font-size: 12px; font-weight: 700; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase;
	color: var(--cyan);
}

/* ---------------------------------------------------------------- partners */

.gm-partners { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 2vw, 22px); }
@media (min-width: 700px) { .gm-partners { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .gm-partners { grid-template-columns: repeat(6, 1fr); } }
.gm-partner {
	display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 14px;
	padding: 24px 14px 20px;
	background: var(--surface);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius);
	min-width: 0;
	transition: border-color .25s var(--ease), transform .25s var(--ease), background .25s var(--ease);
}
.gm-content .gm-partner-img {
	/* A fixed logo box, so every name below sits on the same line whatever the logo's shape. */
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 56px;
}
.gm-partner-img img, .gm-partner img {
	width: auto; max-width: min(100%, 140px); max-height: 48px; object-fit: contain;
	opacity: 1;
	filter: none;
	border-radius: 4px;
	transition: transform .25s var(--ease);
}
/* The ORWO Studios logo is shown white on the dark card. Sites set up before v0.3.0 still have the old navy logo in
   their Media Library (setup never replaces an image it already imported), so the colour is set here, whichever
   copy the page uses. The logo has a transparent background, so only the lettering turns white. */
.gm-partner img[alt="ORWO Studios" i] { filter: brightness(0) invert(1); }
.gm-content p.gm-partner-name { font-size: 11.5px; font-weight: 600; line-height: 1.45; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: center; margin: 0; text-wrap: balance; }
@media (hover: hover) {
	.gm-partner:hover { border-color: rgba(0, 188, 227, .4); background: var(--surface-2); transform: translateY(-3px); }
	.gm-partner:hover .gm-partner-img, .gm-partner:hover img { transform: scale(1.05); }
	.gm-content .gm-partner:hover .gm-partner-name { color: var(--text); }
}

/* ---------------------------------------------------------------- contact */

.gm-contact-grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 980px) { .gm-contact-grid { grid-template-columns: 1fr 1fr; } }

.gm-form-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: clamp(24px, 3vw, 40px);
	position: relative; overflow: hidden;
}
.gm-form-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--holo); }

.gm-details { margin: 0 0 22px; }
.gm-details > div { padding: 14px 0; border-bottom: 1px solid var(--line-soft); display: grid; gap: 4px; }
.gm-details dt { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.gm-details dd { margin: 0; color: #DDDFE7; }
.gm-details a { text-decoration: none; }
@media (hover: hover) { .gm-details a:hover { color: var(--cyan); } }
.gm-details-social { display: flex; flex-direction: column; gap: 12px; }
.gm-details-social .gm-label { margin: 0; }
.gm-maplink a { color: var(--cyan); }

/* ---------------------------------------------------------------- forms */

.gm-form { margin: 0; }
.gm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gm-fields { display: grid; gap: 16px; }
.gm-field { position: relative; }
.gm-field input, .gm-field textarea {
	width: 100%; padding: 22px 16px 10px;
	background: var(--ink-2);
	border: 1px solid var(--line);
	border-radius: 12px;
	color: var(--text);
	font-family: inherit; font-size: 16px;
	transition: border-color .2s var(--ease), background .2s var(--ease);
}
.gm-field textarea { resize: vertical; min-height: 110px; }
.gm-field label {
	position: absolute; left: 17px; top: 15px;
	font-size: 15px; color: var(--muted);
	pointer-events: none;
	transition: transform .18s var(--ease), font-size .18s var(--ease), color .18s var(--ease);
	transform-origin: left top;
}
.gm-field input:focus, .gm-field textarea:focus { border-color: var(--cyan); outline: none; background: #0A0A11; }
.gm-field input:focus + label, .gm-field textarea:focus + label,
.gm-field input:not(:placeholder-shown) + label, .gm-field textarea:not(:placeholder-shown) + label {
	transform: translateY(-9px) scale(.74);
	color: var(--cyan);
}
.gm-field [aria-invalid="true"] { border-color: var(--red); }
.gm-field-error { display: block; color: #FF8197; font-size: 13.5px; margin-top: 5px; min-height: 0; }
.gm-field-error:empty { display: none; }
.gm-form-actions { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.gm-form-note { font-size: 13px; color: var(--muted); margin: 0; }
.gm-form-status:empty { display: none; }
.gm-form-success, .gm-form-error {
	margin: 16px 0 0; padding: 13px 16px; border-radius: 12px; font-size: 15px;
}
.gm-form-success { background: rgba(0, 188, 227, .13); border: 1px solid rgba(0, 188, 227, .4); color: #BDEFFA; }
.gm-form-error { background: rgba(227, 24, 54, .12); border: 1px solid rgba(227, 24, 54, .4); color: #FFC2CC; }

/* ---------------------------------------------------------------- news */

.gm-news { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 2vw, 26px); }
@media (min-width: 860px) { .gm-news { grid-template-columns: repeat(3, 1fr); } }
.gm-news-card { min-width: 0; margin: 0; }
.gm-news-card a {
	display: flex; flex-direction: column; height: 100%;
	background: var(--surface);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
	overflow: hidden; text-decoration: none;
	transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.gm-news-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); }
.gm-news-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.gm-news-media-empty { background: var(--holo); opacity: .22; }
.gm-news-body { display: block; padding: clamp(16px, 2vw, 24px); }
.gm-news-body time { display: block; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); margin-bottom: 9px; }
.gm-news-title {
	display: block; font-family: var(--display); font-weight: 600;
	font-size: clamp(15px, 1.3vw, 18px); line-height: 1.35; letter-spacing: -.01em; color: #fff;
}
.gm-news-excerpt { display: block; margin-top: 12px; color: var(--muted); font-size: 15px; line-height: 1.65; }
@media (hover: hover) {
	.gm-news-card a:hover { transform: translateY(-4px); border-color: var(--line); }
	.gm-news-card a:hover .gm-news-media img { transform: scale(1.06); }
}
.gm-empty { text-align: center; padding: 60px 0; color: var(--muted); }

/* ---------------------------------------------------------------- page head, articles */

.gm-pagehead {
	padding: calc(var(--header-h) + clamp(48px, 7vw, 92px)) 0 clamp(32px, 4vw, 56px);
	border-bottom: 1px solid var(--line-soft);
	background:
		radial-gradient(900px 380px at 12% -10%, rgba(0, 188, 227, .16), transparent 70%),
		radial-gradient(700px 320px at 88% 0%, rgba(170, 92, 164, .14), transparent 70%);
}
.gm-pagehead-title { margin: 0; max-width: 22ch; }
.gm-pagehead .gm-lead { margin-top: 16px; }

.gm-content > *:first-child { margin-top: 0; }
.gm-plain { padding-block: clamp(36px, 5vw, 64px); }
.gm-plain > * { width: 100%; max-width: 760px; margin-inline: auto; padding-inline: var(--gutter); }
.gm-plain > .alignwide, .gm-plain > .alignfull { max-width: var(--wrap); }
.gm-plain h2 { margin-top: 1.6em; }
.gm-plain h3 { margin-top: 1.4em; }
.gm-plain ul, .gm-plain ol { color: #D7D9E2; padding-left: 1.3em; }
.gm-plain li { margin-bottom: .5em; }
.gm-plain a { color: var(--cyan); text-underline-offset: 3px; }

.gm-article-cover { margin-top: clamp(24px, 3vw, 40px); }
/* Article covers vary from square to wide; cap the height so a square one does not fill the screen. */
.gm-article-cover img {
	width: 100%;
	max-height: min(56vh, 520px);
	object-fit: cover;
	border-radius: var(--radius-lg);
	border: 1px solid var(--line-soft);
}
.gm-source {
	margin-top: 2.4em; padding-top: 1.2em;
	border-top: 1px solid var(--line-soft);
	font-size: 14.5px; color: var(--muted);
}
.gm-source a { color: var(--cyan); }

.gm-postnav { display: grid; gap: 14px; margin-block: clamp(36px, 5vw, 64px); }
@media (min-width: 720px) { .gm-postnav { grid-template-columns: 1fr 1fr; } }
.gm-postnav a {
	display: block; padding: 20px 24px;
	background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
	text-decoration: none; font-family: var(--display); font-weight: 600; font-size: 16px; line-height: 1.4;
	transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.gm-postnav a span {
	display: block; font-family: var(--text-font); font-size: 11.5px; font-weight: 700;
	letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); margin-bottom: 8px;
}
.gm-postnav-next { text-align: right; }
@media (hover: hover) { .gm-postnav a:hover { border-color: var(--cyan); transform: translateY(-2px); } }

.wp-block-query-pagination, .navigation.pagination { margin-top: 40px; display: flex; gap: 10px; justify-content: center; }
.navigation.pagination .page-numbers {
	display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 12px;
	border: 1px solid var(--line); border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 15px;
}
.navigation.pagination .page-numbers.current { background: var(--cyan); color: #04131A; border-color: var(--cyan); }

/* ---------------------------------------------------------------- CTA band */

.gm-cta-band {
	text-align: center;
	background:
		radial-gradient(800px 340px at 50% 0%, rgba(0, 188, 227, .18), transparent 72%),
		var(--surface);
	border-top: 1px solid var(--line-soft);
}
.gm-cta-band .gm-btns { justify-content: center; }
.gm-cta-title { margin-bottom: .55em; }

/* ---------------------------------------------------------------- footer */

.gm-footer { background: var(--ink-2); border-top: 1px solid var(--line-soft); padding-top: clamp(48px, 6vw, 80px); }
.gm-footer-top { display: grid; gap: clamp(28px, 3vw, 44px); }
@media (min-width: 720px) { .gm-footer-top { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .gm-footer-top { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; } }
.gm-footer-brand { min-width: 0; }
.gm-footer-logo { display: inline-block; margin-bottom: 18px; }
.gm-footer-logo .gm-logo-img { height: 34px; }
.gm-footer-line { color: var(--muted); font-size: 15px; margin-bottom: 18px; max-width: 36ch; }
.gm-footer-h { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text); margin: 0 0 16px; font-family: var(--text-font); }
.gm-footer-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gm-footer-col a, .gm-footer-contact p {
	color: var(--muted); text-decoration: none; font-size: 15px; margin: 0;
	overflow-wrap: anywhere;
	transition: color .2s var(--ease);
}
@media (hover: hover) { .gm-footer-col a:hover { color: var(--cyan); } }
.gm-footer-bottom {
	margin-top: clamp(36px, 4vw, 56px);
	padding: 22px 0; border-top: 1px solid var(--line-soft);
	display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
	font-size: 14px; color: var(--muted);
}
.gm-copy { margin: 0; }
.gm-legal { display: flex; flex-wrap: wrap; gap: 18px; margin-left: auto; }
.gm-legal a { color: var(--muted); text-decoration: none; }
@media (hover: hover) { .gm-legal a:hover { color: var(--cyan); } }
.gm-totop {
	display: grid; place-items: center; width: 40px; height: 40px;
	border: 1px solid var(--line); border-radius: 50%; color: var(--muted);
	transition: color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.gm-totop svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .gm-totop:hover { color: var(--cyan); border-color: var(--cyan); transform: translateY(-2px); } }

/* ---------------------------------------------------------------- block editor compatibility */

/* WordPress's flow layout gives every child after the first a top margin. Reset the block axis only:
   resetting all margins would also cancel the `margin-inline: auto` that centres .gm-wrap. */
.gm-content .wp-block-group,
.gm-content .wp-block-image,
.gm-content figure { margin-block: 0; }
/* ...which also removed the space between a two-column row and the text or quote that follows it. */
.gm-content .gm-split + .gm-prose,
.gm-content .gm-prose + .gm-split,
.gm-content .gm-split + .gm-split { margin-top: clamp(44px, 5.5vw, 84px); }
/* Text that continues after a two-column row reads as one neat, centred column. */
.gm-content .gm-split + .gm-prose { max-width: 820px; margin-inline: auto; }
.gm-content .gm-split-text > p + .gm-quote,
.gm-content .gm-prose > p + .gm-quote { margin-top: 1.6em; }
/* A page title is followed by its content: one gap, not the page head's and the section's together. */
.gm-pagehead + .gm-section,
.gm-pagehead + .gm-content > .gm-section:first-child,
.gm-pagehead + .gm-plain { padding-top: clamp(40px, 5vw, 72px); }

/* ---------------------------------------------------------------- motion */

/* Reveal targets are chosen by structure, so the page content stays plain, valid block markup with no
   extra attributes for the block editor to reject. The same selector list lives in gm.js. */
.js :is(.gm-hero-inner, .gm-head, .gm-split-text, .gm-prose, .gm-band-inner) > *,
.js .gm-card,
.js .gm-partner,
.js .gm-news-card,
.js .gm-topic {
	opacity: 0;
	transform: translateY(22px);
}
.js .is-in {
	opacity: 1; transform: none;
	transition: opacity .7s var(--ease), transform .7s var(--ease);
	transition-delay: var(--delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
	.js :is(.gm-hero-inner, .gm-head, .gm-split-text, .gm-prose, .gm-band-inner) > *,
	.js .gm-card, .js .gm-partner, .js .gm-news-card, .js .gm-topic { opacity: 1; transform: none; }
	.gm-hero-media img { animation: none; }
}

/* ---------------------------------------------------------------- phone and tablet */

@media (max-width: 1023px) {
	:root { --header-h: 66px; }
	.gm-burger { display: flex; }
	.gm-nav {
		position: fixed; inset: var(--header-h) 0 0; z-index: 90;
		flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
		padding: 18px var(--gutter) 40px;
		background: var(--ink);
		border-top: 1px solid var(--line-soft);
		overflow-y: auto; overscroll-behavior: contain;
		transform: translateY(-8px); opacity: 0; visibility: hidden;
		transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
	}
	.gm-nav.is-open { opacity: 1; visibility: visible; transform: none; }
	.gm-menu { flex-direction: column; align-items: stretch; gap: 0; }
	.gm-menu > li { border-bottom: 1px solid var(--line-soft); }
	.gm-menu a { padding: 15px 2px; font-size: 17px; border-radius: 0; }
	.gm-menu > li > a::after { display: none; }
	/* The Book a demo button sits inside the phone menu, full width, not in the bar. */
	.gm-menu li.gm-cta { border-bottom: 0; margin-top: 18px; }
	.gm-menu li.gm-cta > a { text-align: center; padding: 15px 20px; border-radius: 999px; }
	.gm-menu .sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none;
		background: none; border: 0; box-shadow: none; padding: 0 0 8px 14px;
	}
	.gm-nav-extra {
		display: flex; flex-direction: column; gap: 12px;
		margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line-soft);
	}
	.gm-nav-extra a { color: var(--muted); text-decoration: none; font-size: 15px; overflow-wrap: anywhere; }
	body.gm-nav-open { overflow: hidden; }
}

@media (max-width: 719px) {
	body { font-size: 16px; }
	/* Phone type scale is smaller than desktop. */
	h1 { font-size: clamp(28px, 9vw, 40px); }
	h2 { font-size: 30px; }
	h3 { font-size: 20px; }
	.gm-lead { font-size: 17px; }
	.gm-label { font-size: 10px; }

	.gm-hero { min-height: 92svh; align-items: flex-end; padding-bottom: 40px; }
	.gm-hero-title { font-size: clamp(30px, 11vw, 52px); max-width: none; }
	.gm-hero-media img { object-position: center 24%; }
	/* Both hero buttons on one row with equal width. */
	.gm-hero .gm-btns, .gm-hero .wp-block-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
	.gm-hero .gm-btn, .gm-hero .wp-block-button__link { justify-content: center; padding: 14px 10px; font-size: 14px; }
	.gm-hero .wp-block-button { display: grid; }

	/* Short content goes two-up on phones rather than one long column. */
	.gm-cards-3, .gm-cards-2 { grid-template-columns: repeat(2, 1fr); }
	.gm-cards-3 > .gm-card, .gm-cards-2 > .gm-card { padding: 18px 16px; }
	.gm-card h3 { font-size: 17px; }
	.gm-card p { font-size: 14.5px; }
	/* Cards whose text is long stay in one readable column. */
	.gm-cards-prose { grid-template-columns: 1fr; }

	.gm-partners { grid-template-columns: repeat(3, 1fr); }
	.gm-partner { padding: 14px 8px; gap: 8px; }
	.gm-partner-img, .gm-partner img { max-height: 32px; }
	.gm-partner-name { font-size: 10px; letter-spacing: .1em; }

	.gm-news { grid-template-columns: repeat(2, 1fr); }
	.gm-news-body { padding: 14px 13px; }
	.gm-news-title { font-size: 14.5px; }
	.gm-news-excerpt { display: none; }
	.gm-news-index .gm-news-excerpt { display: none; }
	/* An odd last card takes the full row instead of leaving a hole beside it. */
	.gm-news > :last-child:nth-child(odd) { grid-column: 1 / -1; }
	.gm-news > :last-child:nth-child(odd) .gm-news-media { aspect-ratio: 16 / 8; }

	.gm-lite-play svg { width: 56px; height: 56px; padding: 15px; }
	.gm-band { min-height: 190px; }
	.gm-band-label { font-size: clamp(26px, 9vw, 38px); letter-spacing: .06em; }

	.gm-footer-top { grid-template-columns: 1fr 1fr; }
	.gm-footer-brand { grid-column: 1 / -1; }
	.gm-footer-contact { grid-column: 1 / -1; }
	.gm-footer-bottom { flex-direction: column; align-items: flex-start; }
	.gm-legal { margin-left: 0; }
	.gm-totop { position: absolute; right: var(--gutter); margin-top: -56px; }

	.gm-postnav-next { text-align: left; }
	/* On phones the centred buttons (All news) sit on the left, in line with the text above them. */
	.gm-section > .gm-wrap > .wp-block-buttons, .gm-btns-center, .wp-block-buttons.gm-btns-center { justify-content: flex-start; }
}

/* Phones: topic cards go two-up (the homepage's first one full width), with just the name and link. */
@media (max-width: 699px) {
	.gm-hero-page { min-height: 340px; padding-bottom: 36px; }
	.gm-hero-page .gm-hero-title { font-size: clamp(34px, 11vw, 46px); }
	.gm-topics { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.gm-topics:not(.gm-topics-more) > .gm-topic:first-child { grid-column: 1 / -1; }
	.gm-content .gm-topic-img { aspect-ratio: 4 / 3; }
	.gm-topics:not(.gm-topics-more) > .gm-topic:first-child .gm-topic-img { aspect-ratio: 16 / 9; }
	.gm-topic-body { padding: 14px 14px 16px; }
	.gm-topic-body > .gm-label { display: none; }
	.gm-topic-body h3 { font-size: 18px; margin-bottom: 8px; }
	.gm-content p.gm-topic-line { display: none; }
	.gm-topics:not(.gm-topics-more) > .gm-topic:first-child p.gm-topic-line { display: block; font-size: 14.5px; margin-bottom: 12px; }
	.gm-topic-link { font-size: 14px; }
}

/* Very narrow phones (360 / 320): nothing may widen the grid. */
@media (max-width: 380px) {
	.gm-hero .gm-btn { font-size: 13px; padding: 13px 8px; }
	.gm-partners { grid-template-columns: repeat(2, 1fr); }
}