/**
 * GD Web — design system.
 *
 * Direction: dark, glossy, dimensional. The look is built from four repeatable
 * techniques rather than one-off styling:
 *
 *   1. Depth      — layered radial "mesh" gradients behind everything.
 *   2. Glass      — translucent surfaces with a blurred backdrop and a hairline
 *                   inset border that reads as a bevelled edge.
 *   3. Specular   — a highlight that tracks the pointer (--mx/--my, set in JS)
 *                   so a surface looks lit rather than flat.
 *   4. Parallax   — depth cues driven by scroll, applied to real 3D transforms.
 *
 * Order: tokens → reset → atmosphere → layout → header → buttons → cards →
 * metrics → forms → footer → editorial → motion.
 */

/* ============================================================
   1. Tokens
   ============================================================ */

:root {
	/* Depth ladder — darkest sits furthest back. */
	--gd-void: #04050a;
	--gd-abyss: #070912;
	--gd-deep: #0b0e1c;
	--gd-slate: #121734;
	--gd-raise: #171d40;

	/* Glass */
	--gd-glass: rgba(255, 255, 255, 0.045);
	--gd-glass-2: rgba(255, 255, 255, 0.07);
	--gd-glass-line: rgba(255, 255, 255, 0.1);
	--gd-glass-line-2: rgba(255, 255, 255, 0.18);

	/* Accents */
	--gd-violet: #7c5cff;
	--gd-indigo: #4f46e5;
	--gd-cyan: #22d3ee;
	--gd-pink: #f472b6;
	--gd-amber: #fbbf24;

	/* Text */
	--gd-text: #f4f6ff;
	--gd-text-2: #b6bedd;
	--gd-text-3: #7c86ab;

	/* Semantic */
	--gd-accent: var(--gd-violet);
	--gd-accent-deep: #6247e0;
	/* The accent for positive and confirming marks. */
	--gd-signal: #f472b6;
	--gd-danger: #fb7185;

	/* Glow */
	--gd-glow-violet: 0 0 0 1px rgba(124, 92, 255, 0.32), 0 12px 40px -12px rgba(124, 92, 255, 0.65);
	--gd-glow-soft: 0 20px 60px -24px rgba(6, 8, 20, 0.9);
	--gd-glow-lift: 0 40px 90px -32px rgba(4, 5, 12, 0.95);

	/* Type */
	--gd-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	--gd-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	--gd-text-xs: 0.8125rem;
	--gd-text-sm: 0.9375rem;
	--gd-text-md: 1.0625rem;
	--gd-text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	--gd-text-xl: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);
	--gd-text-2xl: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
	--gd-text-display: clamp(2.75rem, 1.7rem + 4.4vw, 5.5rem);

	/* Space */
	--gd-space-1: 0.5rem;
	--gd-space-2: 1rem;
	--gd-space-3: 1.5rem;
	--gd-space-4: 2.5rem;
	--gd-space-5: 4rem;
	--gd-space-6: 6.5rem;
	--gd-space-7: 9rem;

	/* Shape */
	--gd-radius-sm: 10px;
	--gd-radius: 18px;
	--gd-radius-lg: 26px;
	--gd-radius-xl: 34px;

	/* Layout */
	--gd-container: 1240px;
	--gd-container-narrow: 760px;
	--gd-gutter: clamp(1.25rem, 4vw, 2.75rem);
	--gd-header-h: 78px;
	/*
	 * The header's resting height plus its border and a few pixels of slack.
	 * Sized exactly, sub-pixel rounding pushed the facts strip a hair past the
	 * fold on some viewports.
	 */
	--gd-hero-offset: 114px;
	/* The header's resting height including its border. */
	--gd-header-rest: 105px;

	/* Motion */
	--gd-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--gd-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--gd-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

	/* Pointer position for specular highlights, updated by JS. */
	--mx: 50%;
	--my: 50%;

	color-scheme: dark;
}

/* ============================================================
   2. Reset and base
   ============================================================ */

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

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

body {
	/* Containing block for the absolutely positioned thread layer. */
	position: relative;
	margin: 0;
	background: var(--gd-void);
	color: var(--gd-text);
	font-family: var(--gd-font);
	font-size: var(--gd-text-md);
	line-height: 1.65;
	/*
	 * `clip` rather than `hidden`: hidden turns the body into a scroll
	 * container, which silently breaks `position: sticky` on everything inside
	 * it — including the header. `clip` prevents the sideways overflow without
	 * creating that container.
	 */
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/*
 * The clip above is declared on <body>, which only reaches the viewport by
 * overflow propagation — and Safari does not propagate `clip`. Declaring it on
 * <html> as well makes the clip direct instead of inherited, so iOS stops
 * panning sideways. Still `clip`, not `hidden`, so sticky survives.
 */
html {
	overflow-x: clip;
}

img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

a {
	color: var(--gd-text);
	text-decoration-color: rgba(124, 92, 255, 0.5);
	text-underline-offset: 0.2em;
	transition: color 0.2s var(--gd-ease);
}

/*
 * Follows the palette rather than being literally white. On paper a white
 * hover erases the link — including the whole service row, which is itself an
 * anchor, heading and all. The dark islands re-declare this token, so links
 * inside the hero and the footer still brighten.
 */
a:hover {
	color: var(--gd-text);
}

:focus-visible {
	outline: 2px solid var(--gd-violet);
	outline-offset: 3px;
	border-radius: 4px;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--gd-space-2);
	font-weight: 650;
	line-height: 1.08;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

h1 { font-size: var(--gd-text-display); }
h2 { font-size: var(--gd-text-2xl); }
h3 { font-size: var(--gd-text-xl); }
h4 { font-size: var(--gd-text-lg); }

p {
	margin: 0 0 var(--gd-space-2);
	text-wrap: pretty;
}

ul, ol {
	margin: 0 0 var(--gd-space-2);
	padding-left: 1.25rem;
}

hr {
	height: 1px;
	margin: var(--gd-space-4) 0;
	border: 0;
	background: linear-gradient(90deg, transparent, var(--gd-glass-line), transparent);
}

code, pre {
	font-family: var(--gd-font-mono);
	font-size: 0.9em;
}

::selection {
	background: rgba(124, 92, 255, 0.4);
	color: #fff;
}

/* Gradient text, used for the emphasised half of a headline. */
.gd-grad {
	background: linear-gradient(100deg, #a78bfa 0%, #22d3ee 52%, #f472b6 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	/* A gradient clipped to glyphs loses the descender otherwise. */
	padding-bottom: 0.08em;
}

/* ============================================================
   3. Atmosphere — the layered background the whole site sits on
   ============================================================ */

body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -2;
	background:
		radial-gradient(90rem 50rem at 12% -8%, rgba(124, 92, 255, 0.22), transparent 62%),
		radial-gradient(70rem 44rem at 92% 4%, rgba(34, 211, 238, 0.14), transparent 60%),
		radial-gradient(60rem 40rem at 50% 108%, rgba(244, 114, 182, 0.12), transparent 62%),
		var(--gd-void);
	pointer-events: none;
}

/*
 * Grain. A large flat colour field on a cheap panel shows visible banding;
 * a faint noise layer breaks the gradient steps up and reads as texture.
 */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	opacity: 0.035;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   4. Layout
   ============================================================ */

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

/*
 * Grid and flex items are min-width:auto by default, so one wide child can
 * stretch a track past the viewport. Everything here is designed to wrap.
 */
.gd-grid > *,
.gd-hero__copy > *,
.gd-funnel__inner > *,
.gd-cta__inner > *,
.gd-entry__layout > * {
	min-width: 0;
}

.gd-container--narrow { max-width: var(--gd-container-narrow); }

.gd-section {
	position: relative;
	padding-block: var(--gd-space-6);
}

.gd-section--tight { padding-block: var(--gd-space-5); }

.gd-section--alt {
	position: relative;
	background: linear-gradient(180deg, transparent, rgba(18, 23, 52, 0.55) 22%, rgba(18, 23, 52, 0.55) 78%, transparent);
}

.gd-section__head {
	max-width: 48rem;
	margin: 0 auto var(--gd-space-5);
	text-align: center;
}

.gd-section__title { margin-bottom: var(--gd-space-2); }

.gd-section__subtitle {
	margin: 0;
	color: var(--gd-text-2);
	font-size: var(--gd-text-lg);
}

.gd-section__more {
	margin: var(--gd-space-5) 0 0;
	text-align: center;
}

.gd-grid {
	display: grid;
	gap: var(--gd-space-3);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}

.gd-grid--2 { --gd-cols: 2; }
.gd-grid--3 { --gd-cols: 3; }
.gd-grid--4 { --gd-cols: 4; }

@media (min-width: 920px) {
	.gd-grid--2, .gd-grid--3, .gd-grid--4 {
		grid-template-columns: repeat(var(--gd-cols), minmax(0, 1fr));
	}
}

.gd-main { min-height: 50vh; }

.gd-skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	border-radius: 0 0 var(--gd-radius-sm) var(--gd-radius-sm);
	background: var(--gd-violet);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	transition: top 0.25s var(--gd-ease);
}

.gd-skip-link:focus { top: 0; }

/* The eyebrow pill used above most section titles. */
.gd-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 var(--gd-space-2);
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--gd-glass-line);
	border-radius: 999px;
	background: var(--gd-glass);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	color: var(--gd-text-2);
	font-size: var(--gd-text-xs);
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.gd-eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--gd-signal);
	box-shadow: 0 0 10px 2px rgba(244, 114, 182, 0.8);
}

/* ============================================================
   5. Header
   ============================================================ */

/*
 * At the top of the page the header is part of the hero: transparent, generous,
 * no edge. Once the page moves it becomes a distinct bar — shorter, properly
 * opaque and heavily blurred so that whatever scrolls beneath it stays readable
 * underneath rather than bleeding through and merging with it.
 */
.gd-header {
	--gd-h: 104px;
	--gd-logo: 46px;

	position: sticky;
	top: 0;
	z-index: 100;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: border-color 0.4s var(--gd-ease);
}

/*
 * The frost sits on a layer behind the header rather than on the header.
 *
 * A non-none backdrop-filter makes its own element a containing block for
 * fixed-position descendants. With it on .gd-header, the fixed menu panel was
 * being contained to the header's 64px box the moment the header stuck — so
 * the menu collapsed to a sliver as soon as the page had been scrolled. Moving
 * the filter to a child keeps the effect and leaves the header an ordinary
 * positioned ancestor.
 */
.gd-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: transparent;
	transition:
		background 0.4s var(--gd-ease),
		box-shadow 0.4s var(--gd-ease),
		backdrop-filter 0.4s var(--gd-ease);
	pointer-events: none;
}

.gd-header.is-stuck {
	--gd-h: 64px;
	--gd-logo: 34px;

	border-bottom-color: rgba(255, 255, 255, 0.14);
}

.gd-header.is-stuck::before {
	background: rgba(6, 8, 17, 0.82);
	backdrop-filter: blur(26px) saturate(190%);
	-webkit-backdrop-filter: blur(26px) saturate(190%);
	box-shadow: 0 18px 50px -28px rgba(0, 0, 0, 1);
}

/* A hairline of light along the bottom edge, so the bar reads as a surface. */
.gd-header::after {
	content: "";
	position: absolute;
	inset: auto 0 -1px;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(124, 92, 255, 0.55), rgba(34, 211, 238, 0.4), transparent);
	opacity: 0;
	transition: opacity 0.4s var(--gd-ease);
	pointer-events: none;
}

.gd-header.is-stuck::after { opacity: 1; }

.gd-header__inner {
	display: flex;
	align-items: center;
	gap: var(--gd-space-3);
	min-height: var(--gd-h);
	transition: min-height 0.4s var(--gd-ease);
}

.gd-header .custom-logo,
.gd-header .gd-brand {
	transition: max-height 0.4s var(--gd-ease), font-size 0.4s var(--gd-ease);
}



.gd-brand {
	margin: 0;
	font-size: 1.3rem;
	font-weight: 750;
	letter-spacing: -0.04em;
}

.gd-brand__link {
	color: var(--gd-text);
	text-decoration: none;
}

.gd-header .custom-logo { max-height: var(--gd-logo); width: auto; }

.gd-nav { margin-left: auto; }

.gd-nav__list {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gd-nav__list a,
.gd-nav .menu-item > a {
	position: relative;
	display: block;
	padding: 0.5rem 0.85rem;
	border-radius: 999px;
	color: var(--gd-text-2);
	font-size: var(--gd-text-sm);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s var(--gd-ease), background 0.2s var(--gd-ease);
}

.gd-nav__list a:hover,
.gd-nav .menu-item > a:hover,
.gd-nav .current-menu-item > a {
	background: var(--gd-glass);
	color: #fff;
}

.gd-nav .menu-item-has-children { position: relative; }

.gd-nav .sub-menu {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	min-width: 230px;
	margin: 0;
	padding: 0.5rem;
	list-style: none;
	background: rgba(11, 14, 28, 0.92);
	backdrop-filter: blur(22px);
	-webkit-backdrop-filter: blur(22px);
	border: 1px solid var(--gd-glass-line);
	border-radius: var(--gd-radius);
	box-shadow: var(--gd-glow-lift);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px) scale(0.98);
	transform-origin: top left;
	transition: opacity 0.22s var(--gd-ease), transform 0.22s var(--gd-ease), visibility 0.22s;
}

.gd-nav .menu-item-has-children:hover > .sub-menu,
.gd-nav .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

.gd-header__actions {
	display: flex;
	align-items: center;
	gap: var(--gd-space-2);
}

.gd-header__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--gd-text-2);
	font-size: var(--gd-text-sm);
	font-weight: 600;
	text-decoration: none;
}

.gd-header__phone:hover { color: #fff; }
.gd-header__phone svg { color: var(--gd-violet); }

.gd-burger {
	display: none;
	padding: 0.55rem;
	border: 1px solid var(--gd-glass-line);
	border-radius: var(--gd-radius-sm);
	background: var(--gd-glass);
	color: var(--gd-text);
	cursor: pointer;
}

/*
 * Build-time switcher between the two homepage versions. Marked out from the
 * real navigation so it never reads as a page the site actually offers — it
 * goes when the v2 working copy does.
 */
@media (min-width: 980px) {
	.gd-nav__item--v1 > a,
	.gd-nav__item--v2 > a,
	.gd-nav__item--v3 > a {
		padding-inline: 0.6rem;
		border: 1px dashed var(--gd-glass-line-2);
		color: var(--gd-text-3);
		font-family: var(--gd-font-mono, monospace);
		font-size: 0.7rem;
		letter-spacing: 0.14em;
	}

	.gd-nav__item--v1 > a:hover,
	.gd-nav__item--v2 > a:hover,
	.gd-nav__item--v3 > a:hover { color: var(--gd-text); }

	/* The one you are looking at. */
	.gd-nav__item--v1 > a[aria-current],
	.gd-nav__item--v2 > a[aria-current],
	.gd-nav__item--v3 > a[aria-current] {
		border-style: solid;
		border-color: var(--gd-brand-lift, #ef4b83);
		color: var(--gd-brand-lift, #ef4b83);
	}
}

/* ============================================================
   The mobile menu
   ============================================================ */

/* The bars morph into the close mark, so the control never swaps icons. */
.gd-burger__box {
	position: relative;
	display: block;
	width: 20px;
	height: 14px;
}

.gd-burger__bar {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1.75px;
	border-radius: 2px;
	background: currentColor;
	transition: transform 0.4s var(--gd-ease), width 0.4s var(--gd-ease);
}

.gd-burger__bar:nth-child(1) { top: 2px; }
.gd-burger__bar:nth-child(2) { bottom: 2px; width: 62%; }

.gd-burger:hover .gd-burger__bar:nth-child(2) { width: 100%; }

.gd-burger[aria-expanded="true"] .gd-burger__bar:nth-child(1) { transform: translateY(4.1px) rotate(45deg); }

.gd-burger[aria-expanded="true"] .gd-burger__bar:nth-child(2) {
	width: 100%;
	transform: translateY(-4.1px) rotate(-45deg);
}

@media (max-width: 979px) {
	/*
	 * These need to outrank .gd-btn's own display, which is declared later in
	 * the file at equal specificity and would otherwise win. Scoping to
	 * .gd-header adds the weight to make the intent hold.
	 */
	/*
	 * Above the panel, which is also a child of the header — without this the
	 * panel slides over the control that closes it.
	 */
	.gd-header .gd-burger {
		display: inline-flex;
		position: relative;
		z-index: 96;
		margin-left: auto;
	}
	.gd-header .gd-header__phone span { display: none; }

	/*
	 * One tap size for the whole set.
	 *
	 * The three controls had drifted apart — 40x34, 36x36, and, once the number
	 * itself is hidden, an 18px glyph with nothing around it. That last is well
	 * under a thumb, and the row read as two buttons and a loose icon rather
	 * than a set. Squaring them off answers both.
	 */
	.gd-header .gd-burger,
	.gd-header .gd-theme,
	.gd-header .gd-header__phone {
		width: 44px;
		height: 44px;
		padding: 0;
		align-items: center;
		justify-content: center;
		flex: none;
	}

	.gd-header .gd-header__phone {
		border: 1px solid var(--gd-glass-line);
		border-radius: var(--gd-radius-sm);
		background: var(--gd-glass);
	}
	.gd-header .gd-header__cta { display: none; }

	/* Sits above the header so the panel reads as one sheet, not a dropdown. */
	.gd-nav__scrim {
		position: fixed;
		inset: 0;
		z-index: 90;
		background: rgba(2, 3, 8, 0.6);
		backdrop-filter: blur(3px);
		-webkit-backdrop-filter: blur(3px);
		opacity: 0;
		transition: opacity 0.45s var(--gd-ease);
	}

	.gd-nav__scrim.is-open { opacity: 1; }

	/*
	 * Visibility rather than display, so both directions can animate — display
	 * cannot be transitioned, which is why the old panel appeared and vanished
	 * instantly.
	 */
	.gd-nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		z-index: 95;
		width: min(408px, 88vw);
		margin: 0;
		padding: 0;
		background: linear-gradient(200deg, #0b0f20 0%, #07091260 55%, #05060f 100%), rgba(7, 9, 18, 0.98);
		backdrop-filter: blur(26px);
		-webkit-backdrop-filter: blur(26px);
		border-left: 1px solid var(--gd-glass-line);
		box-shadow: -30px 0 80px rgba(0, 0, 0, 0.55);
		overflow-y: auto;
		overscroll-behavior: contain;
		visibility: hidden;
		transform: translateX(100%);
		transition: transform 0.5s var(--gd-ease), visibility 0.5s;
	}

	.gd-nav.is-open {
		visibility: visible;
		transform: translateX(0);
	}

	/* The site's thread, carried into the panel as a drawn edge. */
	.gd-nav__inner {
		position: relative;
		display: flex;
		min-height: 100%;
		flex-direction: column;
		padding: calc(var(--gd-h, 64px) + var(--gd-space-4)) var(--gd-gutter) var(--gd-space-4);
	}

	.gd-nav__inner::before {
		content: "";
		position: absolute;
		top: calc(var(--gd-h, 64px) + var(--gd-space-3));
		bottom: var(--gd-space-4);
		left: 0;
		width: 1px;
		background: linear-gradient(180deg, var(--gd-violet), var(--gd-cyan) 40%, var(--gd-brand, #cc3066));
		transform: scaleY(0);
		transform-origin: 50% 0;
		opacity: 0.75;
		transition: transform 0.7s var(--gd-ease) 0.12s;
	}

	.gd-nav.is-open .gd-nav__inner::before { transform: scaleY(1); }

	.gd-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		counter-reset: gd-nav-item;
	}

	/*
	 * Numbered to match the services index further down the page — the menu
	 * uses the site's own language rather than a generic list.
	 */
	.gd-nav .menu-item > a,
	.gd-nav__list > li > a {
		display: flex;
		align-items: baseline;
		gap: 0.9rem;
		padding: 1rem 0;
		border-bottom: 1px solid var(--gd-glass-line);
		border-radius: 0;
		color: var(--gd-text);
		font-family: var(--gd-font-display, inherit);
		font-size: clamp(1.5rem, 6vw, 1.9rem);
		font-weight: 600;
		letter-spacing: -0.01em;
	}

	.gd-nav__list > li > a::before {
		counter-increment: gd-nav-item;
		content: counter(gd-nav-item, decimal-leading-zero);
		color: var(--gd-brand-lift, #ef4b83);
		font-family: var(--gd-font-mono, monospace);
		font-size: 0.72rem;
		font-weight: 500;
		letter-spacing: 0.16em;
		opacity: 0.85;
	}

	.gd-nav__list > li > a:hover,
	.gd-nav__list > li > a:focus-visible { color: #fff; }

	.gd-nav .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		border: 0;
		border-left: 1px solid var(--gd-glass-line);
		box-shadow: none;
		background: transparent;
		margin-left: 0.3rem;
		padding: 0.4rem 0 0.8rem 1rem;
	}

	.gd-nav .sub-menu a {
		padding: 0.5rem 0;
		font-size: var(--gd-text-sm);
		font-weight: 400;
	}

	.gd-nav .sub-menu a::before { content: none; }

	/*
	 * Rows arrive one after another rather than the whole sheet at once. The
	 * index is set in JS so it works with any number of menu items.
	 */
	.gd-nav__list > li,
	.gd-nav__foot > * {
		opacity: 0;
		transform: translateX(18px);
		transition: opacity 0.45s var(--gd-ease), transform 0.45s var(--gd-ease);
		transition-delay: calc(var(--i, 0) * 55ms + 140ms);
	}

	.gd-nav.is-open .gd-nav__list > li,
	.gd-nav.is-open .gd-nav__foot > * {
		opacity: 1;
		transform: translateX(0);
	}

	.gd-nav__foot {
		display: flex;
		margin-top: auto;
		padding-top: var(--gd-space-4);
		flex-direction: column;
		align-items: flex-start;
		gap: 0.85rem;
	}

	.gd-nav__contact {
		display: inline-flex;
		align-items: center;
		gap: 0.6rem;
		color: var(--gd-text-2);
		font-size: var(--gd-text-sm);
		text-decoration: none;
		transition: color 0.2s var(--gd-ease);
	}

	.gd-nav__contact:hover { color: #fff; }
	.gd-nav__contact svg { color: var(--gd-brand-lift, #ef4b83); flex: 0 0 auto; }

	.gd-nav .gd-nav__cta {
		display: inline-flex;
		margin-top: 0.4rem;
		width: 100%;
		justify-content: center;
	}

	/*
	 * The header sits above the scrim so the close control stays legible, which
	 * otherwise leaves a brightly lit sliver of logo beside a dimmed page. Fade
	 * the bar's own content instead of fighting the stacking order.
	 */
	.gd-nav-open .gd-header .gd-brand,
	.gd-nav-open .gd-header__actions { opacity: 0.25; }

	.gd-header .gd-brand,
	.gd-header__actions { transition: opacity 0.4s var(--gd-ease); }

	.gd-nav__footlabel { margin: 0 0 0.2rem; }

	.gd-nav__tagline {
		margin: 0.5rem 0 0;
		color: var(--gd-brand-lift, #ef4b83);
		font-size: 0.7rem;
		font-weight: 600;
		letter-spacing: 0.22em;
		text-transform: uppercase;
	}
}

/* The panel is a mobile affordance only; the bar carries these on desktop. */
@media (min-width: 980px) {
	.gd-nav__foot,
	.gd-nav__scrim { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.gd-nav,
	.gd-nav__scrim,
	.gd-nav__inner::before,
	.gd-nav__list > li,
	.gd-nav__foot > *,
	.gd-burger__bar {
		transition-duration: 0.01ms;
		transition-delay: 0ms;
	}
}

/* ============================================================
   6. Buttons
   ============================================================ */

.gd-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	padding: 0.85rem 1.5rem;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: var(--gd-text-sm);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	isolation: isolate;
	overflow: hidden;
	transition: transform 0.25s var(--gd-spring), box-shadow 0.25s var(--gd-ease),
		background 0.25s var(--gd-ease), border-color 0.25s var(--gd-ease);
}

/* Gloss sweep: a diagonal highlight that crosses the button on hover. */
.gd-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(115deg, transparent 28%, rgba(255, 255, 255, 0.28) 46%, transparent 62%);
	transform: translateX(-120%);
	transition: transform 0.75s var(--gd-ease);
}

.gd-btn:hover::after { transform: translateX(120%); }

.gd-btn:hover { transform: translateY(-2px); }
.gd-btn:active { transform: translateY(0); }

.gd-btn--primary {
	background: linear-gradient(135deg, #8b6bff 0%, #5b45f0 55%, #4333c9 100%);
	color: #fff;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.35),
		inset 0 -1px 0 rgba(0, 0, 0, 0.25),
		0 10px 30px -10px rgba(124, 92, 255, 0.75);
}

.gd-btn--primary:hover {
	color: #fff;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.45),
		0 18px 44px -12px rgba(124, 92, 255, 0.9);
}

.gd-btn--ghost {
	border-color: var(--gd-glass-line-2);
	background: var(--gd-glass);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	color: var(--gd-text);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.gd-btn--ghost:hover {
	border-color: rgba(255, 255, 255, 0.32);
	background: var(--gd-glass-2);
	color: #fff;
}

.gd-btn--lg { padding: 1.05rem 2rem; font-size: var(--gd-text-md); }

.gd-btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

.gd-btn__spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: gd-spin 0.7s linear infinite;
}

.is-submitting .gd-btn__spinner { display: block; }

@keyframes gd-spin { to { transform: rotate(360deg); } }

/* ============================================================
   7. Cards — the glass + specular system
   ============================================================ */

.gd-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--gd-space-3);
	border: 1px solid var(--gd-glass-line);
	border-radius: var(--gd-radius-lg);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02) 42%, rgba(255, 255, 255, 0) 100%),
		rgba(18, 23, 52, 0.55);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), var(--gd-glow-soft);
	overflow: hidden;
	isolation: isolate;
	transform-style: preserve-3d;
	transform:
		perspective(900px)
		rotateX(var(--gd-rx, 0deg))
		rotateY(var(--gd-ry, 0deg))
		translate3d(0, var(--gd-lift, 0), 0);
	transition: transform 0.4s var(--gd-ease), box-shadow 0.4s var(--gd-ease),
		border-color 0.4s var(--gd-ease);
}

/* Specular highlight — follows the pointer via --mx/--my. */
.gd-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(
		22rem 22rem at var(--mx) var(--my),
		rgba(124, 92, 255, 0.22),
		transparent 68%
	);
	opacity: 0;
	transition: opacity 0.4s var(--gd-ease);
	pointer-events: none;
}

.gd-card:hover::before { opacity: 1; }

.gd-card:hover {
	--gd-lift: -6px;
	border-color: var(--gd-glass-line-2);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), var(--gd-glow-lift);
}

/* Children lift off the surface so tilt reads as real depth. */
.gd-card > * { transform: translateZ(0.01px); }

.gd-card__title {
	margin: 0 0 0.5rem;
	font-size: var(--gd-text-lg);
	letter-spacing: -0.025em;
}

.gd-card__title a { color: inherit; text-decoration: none; }
.gd-card__title a:hover { color: #fff; }

.gd-card__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	margin-bottom: var(--gd-space-3);
	border: 1px solid var(--gd-glass-line-2);
	border-radius: 16px;
	background: linear-gradient(145deg, rgba(124, 92, 255, 0.32), rgba(34, 211, 238, 0.14));
	color: #fff;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.35),
		inset 0 -8px 16px -8px rgba(0, 0, 0, 0.6),
		0 10px 28px -14px rgba(124, 92, 255, 0.9);
	transform: translateZ(26px);
	transition: transform 0.4s var(--gd-ease);
}

.gd-card:hover .gd-card__icon { transform: translateZ(40px) scale(1.04); }

.gd-card__tagline,
.gd-card__excerpt {
	margin: 0 0 var(--gd-space-3);
	color: var(--gd-text-2);
	font-size: var(--gd-text-sm);
}

.gd-card__list {
	margin: 0 0 var(--gd-space-3);
	padding: 0;
	list-style: none;
	font-size: var(--gd-text-sm);
	color: var(--gd-text-2);
}

.gd-card__list li {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	padding: 0.28rem 0;
}

.gd-card__list svg { flex: none; margin-top: 0.35em; color: var(--gd-signal); }

.gd-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gd-space-2);
	margin-top: auto;
	padding-top: var(--gd-space-3);
	border-top: 1px solid var(--gd-glass-line);
}

.gd-card__price { font-size: var(--gd-text-sm); font-weight: 700; }

.gd-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--gd-text);
	font-size: var(--gd-text-sm);
	font-weight: 600;
	text-decoration: none;
}

.gd-card__link svg { transition: transform 0.3s var(--gd-spring); }
.gd-card:hover .gd-card__link { color: #fff; }
.gd-card:hover .gd-card__link svg { transform: translateX(5px); }

/* Case study card */

.gd-card--case { padding: 0; }

.gd-card__media {
	position: relative;
	display: block;
	/* It is an <a>, so it inherits the underline unless told otherwise. */
	text-decoration: none;
	aspect-ratio: 16 / 10;
	background: linear-gradient(140deg, var(--gd-slate), var(--gd-deep));
	overflow: hidden;
}

.gd-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 45%, rgba(7, 9, 18, 0.85));
}

.gd-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--gd-ease);
}

.gd-card--case:hover .gd-card__media img { transform: scale(1.06); }

.gd-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--gd-text-3);
}

.gd-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	/* Eases off on a phone, where the card itself is only ~190px wide. */
	padding: clamp(1.05rem, 3.1vw, 1.5rem);
}

.gd-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 0.85rem;
}

.gd-chip {
	padding: 0.28rem 0.7rem;
	border: 1px solid var(--gd-glass-line);
	border-radius: 999px;
	background: var(--gd-glass);
	color: var(--gd-text-2);
	font-size: var(--gd-text-xs);
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.2s var(--gd-ease), color 0.2s var(--gd-ease);
}

a.gd-chip:hover { border-color: var(--gd-violet); color: #fff; }

.gd-card__client {
	margin: 0 0 var(--gd-space-2);
	color: var(--gd-text-3);
	font-size: var(--gd-text-sm);
}

/* Team card */

.gd-card--team { align-items: center; text-align: center; }

.gd-card__portrait {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5;
	margin-bottom: var(--gd-space-3);
	border-radius: var(--gd-radius);
	background: linear-gradient(140deg, var(--gd-slate), var(--gd-deep));
	overflow: hidden;
}

.gd-card__portrait img { width: 100%; height: 100%; object-fit: cover; }

.gd-card__initials {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--gd-text-3);
	font-size: 3.5rem;
	font-weight: 750;
}

.gd-card__role { margin: 0 0 var(--gd-space-3); color: var(--gd-text-2); font-size: var(--gd-text-sm); }

.gd-card__social { display: flex; gap: 0.6rem; margin: auto 0 0; }

.gd-card__social a {
	display: inline-flex;
	padding: 0.5rem;
	border: 1px solid var(--gd-glass-line);
	border-radius: 10px;
	background: var(--gd-glass);
	color: var(--gd-text-2);
}

.gd-card__social a:hover { border-color: var(--gd-violet); color: #fff; }

/* Quote card */

.gd-card--quote { margin: 0; gap: var(--gd-space-2); }
.gd-card--quote > svg { color: var(--gd-violet); opacity: 0.5; }

.gd-stars { display: flex; gap: 3px; color: var(--gd-amber); }
.gd-stars svg { fill: currentColor; }

.gd-card__quote {
	margin: 0;
	font-size: var(--gd-text-md);
	color: var(--gd-text);
}

.gd-card__quote p:last-child { margin-bottom: 0; }

.gd-card__author {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin-top: auto;
	padding-top: var(--gd-space-3);
	border-top: 1px solid var(--gd-glass-line);
}

.gd-avatar {
	width: 46px;
	height: 46px;
	flex: none;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid var(--gd-glass-line-2);
}

.gd-card__author-text { display: flex; flex-direction: column; font-size: var(--gd-text-sm); line-height: 1.4; }
.gd-card__author-role { color: var(--gd-text-3); font-size: var(--gd-text-xs); }

.gd-card__logo {
	max-width: 84px;
	max-height: 30px;
	width: auto;
	margin-left: auto;
	object-fit: contain;
	opacity: 0.6;
}

/* ============================================================
   8. Metrics
   ============================================================ */

.gd-metrics {
	display: grid;
	gap: var(--gd-space-3);
	margin: 0;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.gd-metric { margin: 0; }

.gd-metric__value {
	margin: 0;
	font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem);
	font-weight: 700;
	letter-spacing: -0.05em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	background: linear-gradient(180deg, #ffffff 30%, #9fa8cc 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.gd-metric__label {
	margin: 0.5rem 0 0;
	color: var(--gd-text-3);
	font-size: var(--gd-text-sm);
}

/*
 * All three figures on one line, divided.
 *
 * `auto-fit` with a 90px minimum only ever fitted two across a card this wide,
 * so the third dropped to a second row and the set stopped reading as one
 * measure of the work. Flex shares the width between however many there are —
 * two or three — and the figures are sized to suit the narrower column.
 */
.gd-metrics--inline {
	display: flex;
	align-items: flex-start;
	gap: 0;
	margin-bottom: var(--gd-space-3);
}

.gd-metrics--inline .gd-metric {
	flex: 1 1 0;
	min-width: 0;
	/* Narrows with the card, so the figures keep their room on a phone. */
	padding-inline: clamp(0.22rem, 0.85vw, 0.7rem);
}

.gd-metrics--inline .gd-metric:first-child { padding-inline-start: 0; }
.gd-metrics--inline .gd-metric:last-child { padding-inline-end: 0; }

.gd-metrics--inline .gd-metric + .gd-metric {
	border-inline-start: 1px solid var(--gd-glass-line);
}

.gd-metrics--inline .gd-metric__value {
	font-size: clamp(0.8rem, 0.5rem + 0.95vw, 1.35rem);
	letter-spacing: -0.03em;
	background: linear-gradient(135deg, #a78bfa, #22d3ee);
	-webkit-background-clip: text;
	background-clip: text;
}

.gd-metrics--inline .gd-metric__label {
	margin-top: 0.3rem;
	font-size: 0.7rem;
	line-height: 1.35;
}

.gd-metrics--band {
	padding: var(--gd-space-5) var(--gd-space-4);
	border: 1px solid var(--gd-glass-line);
	border-radius: var(--gd-radius-xl);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 55%),
		rgba(18, 23, 52, 0.6);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), var(--gd-glow-soft);
	text-align: center;
}

/* ============================================================
   9. Forms
   ============================================================ */

.gd-form {
	position: relative;
	padding: var(--gd-space-4);
	border: 1px solid var(--gd-glass-line-2);
	border-radius: var(--gd-radius-xl);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02) 40%, rgba(255, 255, 255, 0) 100%),
		rgba(11, 14, 28, 0.72);
	backdrop-filter: blur(26px) saturate(150%);
	-webkit-backdrop-filter: blur(26px) saturate(150%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), var(--gd-glow-lift);
}

.gd-form--compact { padding: var(--gd-space-3); }

.gd-form__head { margin-bottom: var(--gd-space-3); }
.gd-form__title { margin-bottom: 0.4rem; font-size: var(--gd-text-xl); }
.gd-form__subtitle { margin: 0; color: var(--gd-text-2); font-size: var(--gd-text-sm); }

.gd-form__grid {
	display: grid;
	gap: var(--gd-space-2);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gd-form__field--full { grid-column: 1 / -1; }

@media (max-width: 599px) {
	.gd-form__grid { grid-template-columns: 1fr; }
}

.gd-form__label {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--gd-text-2);
	font-size: var(--gd-text-xs);
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.gd-form__required { color: var(--gd-violet); }

.gd-form input[type="text"],
.gd-form input[type="email"],
.gd-form input[type="tel"],
.gd-form input[type="url"],
.gd-form select,
.gd-form textarea {
	width: 100%;
	padding: 0.8rem 0.95rem;
	border: 1px solid var(--gd-glass-line);
	border-radius: 12px;
	background: rgba(4, 5, 12, 0.55);
	color: var(--gd-text);
	font-size: var(--gd-text-sm);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
	transition: border-color 0.2s var(--gd-ease), box-shadow 0.2s var(--gd-ease),
		background 0.2s var(--gd-ease);
}

.gd-form input::placeholder,
.gd-form textarea::placeholder { color: var(--gd-text-3); }

/* Native option lists render on the OS layer, so they need an explicit dark background. */
.gd-form select option { background: var(--gd-deep); color: var(--gd-text); }

.gd-form input:focus,
.gd-form select:focus,
.gd-form textarea:focus {
	outline: none;
	border-color: var(--gd-violet);
	background: rgba(4, 5, 12, 0.75);
	box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.22), inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

.gd-form textarea { resize: vertical; min-height: 108px; }

.gd-form .is-invalid { border-color: var(--gd-danger); }
.gd-form .is-invalid:focus { box-shadow: 0 0 0 3px rgba(251, 113, 133, 0.2); }

.gd-form__error {
	display: block;
	min-height: 1em;
	margin-top: 0.3rem;
	color: var(--gd-danger);
	font-size: var(--gd-text-xs);
}

.gd-form__error:empty { display: none; }

.gd-form__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.gd-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gd-space-2);
	margin-top: var(--gd-space-3);
}

.gd-form__privacy { margin: 0; color: var(--gd-text-3); font-size: var(--gd-text-xs); }
.gd-form__status { margin-top: var(--gd-space-2); font-size: var(--gd-text-sm); color: var(--gd-text-2); }
.gd-form__status.is-error { color: var(--gd-danger); }

.gd-form__success {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gd-space-2);
	padding: var(--gd-space-6) var(--gd-space-4);
	border: 1px solid rgba(244, 114, 182, 0.35);
	border-radius: var(--gd-radius-xl);
	background: linear-gradient(180deg, rgba(244, 114, 182, 0.16), rgba(244, 114, 182, 0.03));
	color: var(--gd-signal);
	text-align: center;
	box-shadow: 0 0 60px -20px rgba(244, 114, 182, 0.6);
}

.gd-form__success p { margin: 0; color: var(--gd-text); font-size: var(--gd-text-lg); font-weight: 600; }

.gd-searchform { display: flex; gap: 0.5rem; }

.gd-searchform input[type="search"] {
	flex: 1;
	padding: 0.8rem 0.95rem;
	border: 1px solid var(--gd-glass-line);
	border-radius: 12px;
	background: rgba(4, 5, 12, 0.55);
	color: var(--gd-text);
}

/* ============================================================
   10. CTA band, contact, footer
   ============================================================ */

.gd-cta {
	position: relative;
	padding-block: var(--gd-space-7);
	overflow: hidden;
}

.gd-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(50rem 30rem at 20% 30%, rgba(124, 92, 255, 0.25), transparent 60%),
		radial-gradient(40rem 26rem at 85% 70%, rgba(34, 211, 238, 0.16), transparent 60%);
	pointer-events: none;
}

.gd-cta__inner {
	position: relative;
	display: grid;
	gap: var(--gd-space-4);
	align-items: center;
}

@media (min-width: 980px) {
	.gd-cta__inner { grid-template-columns: 1fr 1fr; gap: var(--gd-space-5); }
}

.gd-cta__title { max-width: 18ch; }
.gd-cta__text { max-width: 44ch; color: var(--gd-text-2); font-size: var(--gd-text-lg); }

.gd-contact {
	display: grid;
	gap: 0.8rem;
	margin: var(--gd-space-3) 0 0;
	padding: 0;
	list-style: none;
}

.gd-contact__item {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	color: var(--gd-text-2);
	font-size: var(--gd-text-sm);
}

.gd-contact__item svg { flex: none; color: var(--gd-violet); }
.gd-contact a { color: var(--gd-text-2); text-decoration: none; }
.gd-contact a:hover { color: #fff; }
.gd-contact__item--hours { color: var(--gd-text-3); padding-left: 1.9rem; }

.gd-footer {
	position: relative;
	padding-block: var(--gd-space-5) var(--gd-space-3);
	border-top: 1px solid var(--gd-glass-line);
	background: rgba(4, 5, 12, 0.6);
	color: var(--gd-text-2);
	font-size: var(--gd-text-sm);
}

.gd-footer a { color: var(--gd-text-2); text-decoration: none; }
.gd-footer a:hover { color: #fff; }

.gd-footer__grid {
	display: grid;
	gap: var(--gd-space-4);
	padding-bottom: var(--gd-space-4);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.gd-footer__brand { max-width: 34ch; }
.gd-footer .gd-brand__link { color: #fff; }
.gd-footer__about { margin: var(--gd-space-2) 0 var(--gd-space-3); color: var(--gd-text-3); }

/*
 * Block-based widgets ignore the before_title passed to register_sidebar and
 * render their own <h2 class="wp-block-heading">, which would otherwise inherit
 * the full h2 display size in the footer.
 */
.gd-footer .wp-block-heading,
.gd-footer .widget-title,
.gd-sidebar .wp-block-heading,
.gd-widget__title,
.gd-footer__heading {
	margin: 0 0 var(--gd-space-2);
	color: #fff;
	font-size: var(--gd-text-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.gd-footer ul { margin: 0; padding: 0; list-style: none; }

.gd-footer .gd-widget,
.gd-footer .widget { font-size: var(--gd-text-sm); }

.gd-footer .wp-block-group,
.gd-footer .wp-block-heading + * { margin-top: var(--gd-space-2); }
.gd-footer li + li { margin-top: 0.55rem; }

.gd-social {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * The row spaces itself with `gap`. Without this it also inherits whatever
 * stacking margin the surrounding context puts on list items — in the footer,
 * `.gd-footer li + li` was adding 0.55rem to the top of every icon but the
 * first, which reads as the first icon sitting out of line with the rest.
 */
.gd-social li { margin: 0; }

.gd-social a {
	display: inline-flex;
	padding: 0.55rem;
	border: 1px solid var(--gd-glass-line);
	border-radius: 10px;
	background: var(--gd-glass);
	color: var(--gd-text-2);
	transition: transform 0.25s var(--gd-spring), border-color 0.25s var(--gd-ease);
}

.gd-social a:hover { transform: translateY(-3px); border-color: var(--gd-violet); color: #fff; }

.gd-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--gd-space-2);
	padding-top: var(--gd-space-3);
	border-top: 1px solid var(--gd-glass-line);
	color: var(--gd-text-3);
	font-size: var(--gd-text-xs);
}

.gd-footer__bar ul { display: flex; flex-wrap: wrap; gap: var(--gd-space-2); }
/*
 * The stacking margin above is for the footer's vertical link lists. The
 * horizontal rows space themselves with `gap`, and inherit it as an 0.55rem
 * push on every item but the first — which reads as the first icon sitting out
 * of line with the rest of the row.
 */
.gd-footer__bar li + li,
.gd-footer .gd-social li + li { margin-top: 0; }

/* ============================================================
   11. Editorial
   ============================================================ */

.gd-entry { padding-block: var(--gd-space-5); }
.gd-entry__layout { display: grid; gap: var(--gd-space-5); }

@media (min-width: 980px) {
	body:not(.no-sidebar) .gd-entry__layout--sidebar { grid-template-columns: minmax(0, 1fr) 300px; }
}

.gd-entry__header { margin-bottom: var(--gd-space-3); }

.gd-entry__thumb {
	margin: 0 0 var(--gd-space-4);
	border: 1px solid var(--gd-glass-line);
	border-radius: var(--gd-radius-lg);
	overflow: hidden;
	box-shadow: var(--gd-glow-lift);
}

.gd-postmeta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	color: var(--gd-text-3);
	font-size: var(--gd-text-sm);
}

.gd-prose { max-width: var(--gd-container-narrow); color: var(--gd-text-2); }
.gd-prose > * + * { margin-top: var(--gd-space-2); }
.gd-prose h2, .gd-prose h3, .gd-prose h4 { color: var(--gd-text); }
.gd-prose h2 { margin-top: var(--gd-space-4); }
.gd-prose h3 { margin-top: var(--gd-space-3); }
.gd-prose a { color: #b7a6ff; }
.gd-prose img, .gd-prose figure { border-radius: var(--gd-radius); }

.gd-prose blockquote {
	margin: var(--gd-space-3) 0;
	padding: var(--gd-space-2) var(--gd-space-3);
	border-left: 2px solid var(--gd-violet);
	border-radius: 0 var(--gd-radius-sm) var(--gd-radius-sm) 0;
	background: var(--gd-glass);
	color: var(--gd-text);
	font-size: var(--gd-text-lg);
}

.gd-widget { margin-bottom: var(--gd-space-4); }
.gd-sidebar { position: sticky; top: calc(var(--gd-header-h) + var(--gd-space-2)); align-self: start; }

.gd-pagehead {
	position: relative;
	padding-block: var(--gd-space-6) var(--gd-space-5);
	border-bottom: 1px solid var(--gd-glass-line);
}

.gd-pagehead--center { text-align: center; }
.gd-pagehead--center .gd-pagehead__desc { margin-inline: auto; }
.gd-pagehead__title { margin-bottom: var(--gd-space-2); font-size: var(--gd-text-2xl); }
.gd-pagehead__desc { max-width: 54ch; color: var(--gd-text-2); font-size: var(--gd-text-lg); }
.gd-pagehead__desc p:last-child { margin-bottom: 0; }

.gd-crumbs { padding-block: var(--gd-space-2); font-size: var(--gd-text-sm); }

.gd-crumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--gd-text-3);
}

.gd-crumbs__item + .gd-crumbs__item::before { content: "/"; margin-right: 0.5rem; opacity: 0.4; }
.gd-crumbs a { color: var(--gd-text-2); text-decoration: none; }
.gd-crumbs a:hover { color: #fff; }

.gd-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.45rem;
	margin-top: var(--gd-space-5);
}

.gd-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 0.8rem;
	border: 1px solid var(--gd-glass-line);
	border-radius: 12px;
	background: var(--gd-glass);
	color: var(--gd-text-2);
	font-size: var(--gd-text-sm);
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.2s var(--gd-ease), color 0.2s var(--gd-ease);
}

.gd-pagination .page-numbers:hover { border-color: var(--gd-violet); color: #fff; }

.gd-pagination .page-numbers.current {
	background: linear-gradient(135deg, #8b6bff, #5b45f0);
	border-color: transparent;
	color: #fff;
}

.gd-empty {
	padding: var(--gd-space-6) var(--gd-space-3);
	border: 1px dashed var(--gd-glass-line-2);
	border-radius: var(--gd-radius-lg);
	background: var(--gd-glass);
	color: var(--gd-text-2);
	text-align: center;
}

.gd-empty__title { margin-bottom: 0.5rem; color: var(--gd-text); }

/* Logo strip */

.gd-logos { padding-block: var(--gd-space-4); }

.gd-logos__title {
	margin: 0 0 var(--gd-space-3);
	color: var(--gd-text-3);
	font-size: var(--gd-text-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-align: center;
	text-transform: uppercase;
}

.gd-logos__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--gd-space-3) var(--gd-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gd-logos__item img {
	max-width: 130px;
	max-height: 38px;
	width: auto;
	object-fit: contain;
	filter: grayscale(1) brightness(2.2);
	opacity: 0.45;
	transition: filter 0.3s var(--gd-ease), opacity 0.3s var(--gd-ease);
}

.gd-logos__item img:hover { filter: grayscale(0) brightness(1); opacity: 1; }

/* ============================================================
   12. Motion primitives
   ============================================================ */

/*
 * Elements opt in with data-anim. They start hidden only once JS confirms it
 * will run (html.gd-js), so a failed script leaves content visible rather than
 * blanking the page.
 */
.gd-js [data-anim] {
	opacity: 0;
	will-change: transform, opacity;
	transition:
		opacity 0.9s var(--gd-ease) var(--gd-delay, 0ms),
		transform 0.9s var(--gd-ease) var(--gd-delay, 0ms),
		filter 0.9s var(--gd-ease) var(--gd-delay, 0ms);
}

.gd-js [data-anim="fade"] { transform: none; }
.gd-js [data-anim="up"] { transform: translate3d(0, 42px, 0); }
.gd-js [data-anim="down"] { transform: translate3d(0, -42px, 0); }
.gd-js [data-anim="left"] { transform: translate3d(-52px, 0, 0); }
.gd-js [data-anim="right"] { transform: translate3d(52px, 0, 0); }
.gd-js [data-anim="scale"] { transform: scale(0.9); }
.gd-js [data-anim="blur"] { filter: blur(14px); transform: translate3d(0, 24px, 0); }

/* A card that swings in on its X axis, as if hinged at the top. */
.gd-js [data-anim="flip"] {
	transform: perspective(1400px) rotateX(24deg) translate3d(0, 46px, 0);
	transform-origin: 50% 0%;
}

.gd-js [data-anim].is-in {
	opacity: 1;
	filter: none;
	transform: none;
}

/* Per-word headline reveal, built by JS from a [data-split] element. */
/*
 * The mask clips its own box, and headings run a 1.08 line-height — tight
 * enough that descenders in words like "promises" fall outside it. Pad the box
 * out and pull the same amount back off the margin so nothing is clipped and
 * layout is unchanged.
 */
.gd-word {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding: 0.14em 0.03em 0.24em;
	margin: -0.14em -0.03em -0.24em;
}

.gd-word > span {
	display: inline-block;
	transform: translateY(110%) rotate(4deg);
	transition: transform 1s var(--gd-ease) var(--gd-delay, 0ms);
}

.is-in .gd-word > span,
.gd-word.is-in > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	/* Never leave content stranded mid-animation when motion is off. */
	.gd-js [data-anim],
	.gd-word > span {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
	}
}

/* ============================================================
   13. Utilities
   ============================================================ */

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

.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	clip: auto;
	white-space: normal;
}

.gd-center { text-align: center; }
.gd-mt-0 { margin-top: 0; }
.gd-mb-0 { margin-bottom: 0; }

.alignleft { float: left; margin: 0 var(--gd-space-3) var(--gd-space-2) 0; }
.alignright { float: right; margin: 0 0 var(--gd-space-2) var(--gd-space-3); }
.aligncenter { display: block; margin-inline: auto; }

.wp-caption-text,
.wp-element-caption {
	margin-top: 0.5rem;
	color: var(--gd-text-3);
	font-size: var(--gd-text-xs);
	text-align: center;
}

@media print {
	.gd-header, .gd-footer, .gd-cta, .gd-form { display: none; }
	body { background: #fff; color: #000; }
}

/* ============================================================
   Footer — closing call, detail, and the wordmark
   ============================================================ */

/*
 * The tagline as a running line across the full width of the footer.
 *
 * Full bleed by construction: it sits outside the container, so it fills any
 * viewport without needing a width to be guessed. The phrase is repeated and
 * the track duplicated by anim.js, which makes the loop seamless — the copy
 * arrives exactly where the original started.
 */
.gd-tagline {
	display: flex;
	margin-top: var(--gd-space-5);
	padding-block: clamp(1rem, 2.2vw, 1.9rem);
	border-top: 1px solid var(--gd-glass-line);
	border-bottom: 1px solid var(--gd-glass-line);
	overflow: hidden;
}

.gd-tagline__track {
	display: flex;
	flex: none;
	align-items: center;
	animation: gd-scroll var(--gd-marquee-duration, 30s) linear infinite;
}

/* Let a reader stop it to actually look at it. */
.gd-tagline:hover .gd-tagline__track { animation-play-state: paused; }

.gd-tagline__item {
	font-size: clamp(1.9rem, 5.4vw, 4.4rem);
	font-weight: 750;
	letter-spacing: -0.045em;
	line-height: 1.15;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.19);
}

.gd-tagline em {
	font-style: normal;
	background: linear-gradient(100deg, #a78bfa 0%, #22d3ee 55%, #f472b6 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* The beat between repetitions. */
.gd-tagline__sep {
	flex: none;
	width: clamp(9px, 1.1vw, 14px);
	height: clamp(9px, 1.1vw, 14px);
	margin-inline: clamp(1.25rem, 3vw, 3rem);
	border-radius: 50%;
	background: linear-gradient(120deg, #a78bfa, #22d3ee);
	opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
	/* Static, and only the first phrase — a repeated line has nothing to add. */
	.gd-tagline { overflow: hidden; }
	.gd-tagline__track { animation: none; }
}

/* ============================================================
   Logo
   ============================================================ */

/*
 * Two colours, both driven from CSS: the mark takes the brand ink, the
 * wordmark inherits whatever the surrounding text colour is. One piece of
 * geometry therefore works on any surface without a second asset.
 */
:root {
	--gd-brand: #cc3066;
	/* Lifted for use on near-black, where the brand ink alone reads muddy. */
	--gd-brand-lift: #ef4b83;
	--gd-logo-mark: var(--gd-brand-lift);
}

.gd-logo {
	display: block;
	width: auto;
	height: var(--gd-logo-h, 38px);
	color: var(--gd-text);
	transition: height 0.4s var(--gd-ease);
}

.gd-brand__link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.gd-header .gd-logo { --gd-logo-h: 42px; }
.gd-header.is-stuck .gd-logo { --gd-logo-h: 30px; }
.gd-footer .gd-logo { --gd-logo-h: 40px; color: #fff; }

.gd-brand__link:hover .gd-logo { color: #fff; }

.gd-logo-mark {
	display: block;
	width: auto;
	height: var(--gd-logo-h, 24px);
}

/* ============================================================
   Colour scheme
   ============================================================

   The palette above is the dark one and stays the default — it is what the
   site was designed in. This block is its light counterpart, in the same
   language: violet and cyan still lead, deepened to hold their contrast
   against paper rather than against near-black.

   `data-theme` is stamped on <html> by the inline script in the head, which
   resolves the reader's stored choice or their system setting before first
   paint. The CSS therefore only ever sees an explicit light or dark.
   ============================================================ */

:root[data-theme="light"] {
	--gd-void: #f6f7fb;
	--gd-abyss: #f6f7fb;
	--gd-deep: #ffffff;
	--gd-slate: #eef0f7;
	--gd-raise: #ffffff;

	--gd-glass: rgba(23, 29, 64, 0.035);
	--gd-glass-2: rgba(23, 29, 64, 0.06);
	--gd-glass-line: rgba(23, 29, 64, 0.12);
	--gd-glass-line-2: rgba(23, 29, 64, 0.22);

	/* Deepened for paper: the near-black tones read as pastel on white. */
	--gd-violet: #5b45f0;
	--gd-indigo: #4534c9;
	--gd-cyan: #0e7490;
	--gd-pink: #c0257a;

	--gd-text: #0f1330;
	--gd-text-2: #464e75;
	/* 4.95:1 on paper, 4.66:1 on the tinted band — muted text lands on both. */
	--gd-text-3: #626a8c;

	--gd-accent: var(--gd-violet);
	--gd-accent-deep: #4534c9;
	--gd-signal: #c0257a;
	--gd-danger: #c2334a;

	--gd-logo-mark: var(--gd-brand);

	--gd-glow-violet: 0 0 0 1px rgba(91, 69, 240, 0.18), 0 12px 34px -18px rgba(23, 29, 64, 0.4);
	--gd-glow-soft: 0 12px 32px -22px rgba(23, 29, 64, 0.3);
	--gd-glow-lift: 0 24px 54px -32px rgba(23, 29, 64, 0.35);
}

/* --- Details carrying literal colour, which the token swap cannot reach --- */

:root[data-theme="light"] body { background: var(--gd-void); }

:root[data-theme="light"] body::before {
	background:
		radial-gradient(90rem 50rem at 12% -8%, rgba(91, 69, 240, 0.07), transparent 62%),
		radial-gradient(70rem 44rem at 92% 4%, rgba(14, 116, 144, 0.05), transparent 60%),
		var(--gd-void);
}

:root[data-theme="light"] .gd-card {
	background: var(--gd-deep);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

:root[data-theme="light"] .gd-section--alt {
	background: linear-gradient(180deg, transparent, var(--gd-slate) 22%, var(--gd-slate) 78%, transparent);
}

:root[data-theme="light"] .gd-header.is-stuck::before {
	background: rgba(246, 247, 251, 0.9);
	box-shadow: 0 1px 0 rgba(23, 29, 64, 0.08), 0 14px 30px -26px rgba(23, 29, 64, 0.45);
}

/*
 * The two dark islands get the dark palette back.
 *
 * The hero and the footer stay dark while the rest of the page is paper, so
 * everything inside them is still being told to draw for a light ground —
 * hairlines come out navy on near-black and simply vanish, which is what took
 * the rules off the footer's tagline. Re-declaring the surface tokens inside
 * them fixes every one of those at once, rather than hunting them one at a
 * time and missing the next.
 */
:root[data-theme="light"] .gd-hero--shot,
:root[data-theme="light"] .gd-svc-hero,
:root[data-theme="light"] .gd-footer {
	--gd-glass: rgba(255, 255, 255, 0.045);
	--gd-glass-2: rgba(255, 255, 255, 0.07);
	--gd-glass-line: rgba(255, 255, 255, 0.12);
	--gd-glass-line-2: rgba(255, 255, 255, 0.22);
	--gd-text: #f4f6ff;
	--gd-text-2: rgba(255, 255, 255, 0.66);
	--gd-text-3: rgba(255, 255, 255, 0.48);
	--gd-logo-mark: var(--gd-brand-lift);
}

/*
 * The footer is a dark anchor, matching the hero. Light mode is therefore two
 * dark bookends around a paper document rather than a page that fades out at
 * both ends — the same structure v2 uses, and the reason the hero reads as
 * deliberate rather than as a leftover from the dark palette.
 */
:root[data-theme="light"] .gd-footer {
	background: #0b0e1c;
	border-top-color: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.66);
}

:root[data-theme="light"] .gd-footer a,
:root[data-theme="light"] .gd-footer p { color: rgba(255, 255, 255, 0.66); }
:root[data-theme="light"] .gd-footer a:hover { color: #fff; }
:root[data-theme="light"] .gd-footer__about { color: rgba(255, 255, 255, 0.55); }
:root[data-theme="light"] .gd-footer__bar { border-top-color: rgba(255, 255, 255, 0.1); }
/* Scoped to the contact list: unqualified, this also pinked the social icons. */
:root[data-theme="light"] .gd-footer .gd-contact svg { color: var(--gd-brand-lift); }

:root[data-theme="light"] .gd-footer .gd-contact__item,
:root[data-theme="light"] .gd-footer .gd-contact__item span { color: rgba(255, 255, 255, 0.66); }
:root[data-theme="light"] .gd-footer .gd-contact__item--hours { color: rgba(255, 255, 255, 0.48); }

:root[data-theme="light"] .gd-form input[type="text"],
:root[data-theme="light"] .gd-form input[type="email"],
:root[data-theme="light"] .gd-form input[type="tel"],
:root[data-theme="light"] .gd-form input[type="url"],
:root[data-theme="light"] .gd-form select,
:root[data-theme="light"] .gd-form textarea {
	background: var(--gd-deep);
	box-shadow: none;
}

:root[data-theme="light"] .gd-form select option { background: var(--gd-deep); }

:root[data-theme="light"] .gd-metric__value {
	background: linear-gradient(180deg, #1c2350 25%, #5b45f0 100%);
	-webkit-background-clip: text;
	background-clip: text;
}

/* White at 14% is invisible on paper. The active one is left to each version,
   which each mark it in their own accent. */
:root[data-theme="light"] .gd-carousel__dot { background: rgba(23, 29, 64, 0.2); }

:root[data-theme="light"] .gd-thread__track { stroke: rgba(23, 29, 64, 0.07); }
:root[data-theme="light"] .gd-thread__line { opacity: 0.5; filter: none; }
:root[data-theme="light"] .gd-thread__glow { fill: rgba(91, 69, 240, 0.16); }

/* --- The control itself --- */

.gd-theme {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--gd-glass-line);
	border-radius: var(--gd-radius-sm);
	background: var(--gd-glass);
	color: var(--gd-text-2);
	cursor: pointer;
	transition: color 0.2s var(--gd-ease), border-color 0.2s var(--gd-ease);
}

.gd-theme:hover { border-color: var(--gd-glass-line-2); color: var(--gd-text); }

/* Show the destination, not the current state: dark showing offers the sun. */
.gd-theme__sun { display: block; }
.gd-theme__moon { display: none; }
:root[data-theme="light"] .gd-theme__sun { display: none; }
:root[data-theme="light"] .gd-theme__moon { display: block; }

/* --- The photographic hero stays dark in light mode ----------------------
   The hero is a dark photograph under a dark scrim, so it does not invert
   with the rest of the page — it becomes a dark island in a light document,
   the same relationship v2 uses deliberately. Its copy, its facts strip and
   the header resting over it therefore keep the dark-ground scale. */

:root[data-theme="light"] .gd-shotbg { background: #04050a; }

:root[data-theme="light"] .gd-shotbg__foot {
	background: linear-gradient(180deg, transparent, rgba(4, 5, 12, 0.86) 62%, #04050a 100%);
}

:root[data-theme="light"] .gd-hero--shot,
:root[data-theme="light"] .gd-hero--shot .gd-hero__lede { color: rgba(255, 255, 255, 0.78); }

:root[data-theme="light"] .gd-hero--shot h1,
:root[data-theme="light"] .gd-hero--shot .gd-statement,
:root[data-theme="light"] .gd-hero--shot .gd-facts__value { color: #fff; }

:root[data-theme="light"] .gd-hero--shot .gd-eyebrow {
	border-color: rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.78);
}

:root[data-theme="light"] .gd-hero--shot .gd-facts__label { color: rgba(255, 255, 255, 0.6); }
:root[data-theme="light"] .gd-hero--shot .gd-facts::before { background: rgba(255, 255, 255, 0.16); }

:root[data-theme="light"] .gd-hero--shot .gd-btn--ghost,
:root[data-theme="light"] .gd-hero--shot .gd-btn--line {
	border-color: rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.04);
	color: #fff;
}

/*
 * Scoped to the views that actually carry that hero — the front page and the
 * v3 working copy taken from it. On an inner page the header rests over light
 * content and must stay dark.
 */
:root[data-theme="light"] body.home .gd-header:not(.is-stuck),
:root[data-theme="light"] body.gd-v3 .gd-header:not(.is-stuck),
:root[data-theme="light"] body.gd-story .gd-header:not(.is-stuck),
:root[data-theme="light"] body.home .gd-header:not(.is-stuck) .gd-logo,
:root[data-theme="light"] body.gd-v3 .gd-header:not(.is-stuck) .gd-logo { color: #fff; }
:root[data-theme="light"] body.gd-story .gd-header:not(.is-stuck) .gd-logo { color: #fff; }

:root[data-theme="light"] body.home .gd-header:not(.is-stuck) .gd-nav .menu-item > a,
:root[data-theme="light"] body.home .gd-header:not(.is-stuck) .gd-nav__list > li > a,
:root[data-theme="light"] body.home .gd-header:not(.is-stuck) .gd-header__phone,
:root[data-theme="light"] body.gd-v3 .gd-header:not(.is-stuck) .gd-nav .menu-item > a,
:root[data-theme="light"] body.gd-story .gd-header:not(.is-stuck) .gd-nav .menu-item > a,
:root[data-theme="light"] body.gd-v3 .gd-header:not(.is-stuck) .gd-nav__list > li > a,
:root[data-theme="light"] body.gd-story .gd-header:not(.is-stuck) .gd-nav__list > li > a,
:root[data-theme="light"] body.gd-story .gd-header:not(.is-stuck) .gd-header__phone,
:root[data-theme="light"] body.gd-v3 .gd-header:not(.is-stuck) .gd-header__phone {
	color: rgba(255, 255, 255, 0.82);
}

:root[data-theme="light"] body.home .gd-header:not(.is-stuck) .gd-theme,
:root[data-theme="light"] body.home .gd-header:not(.is-stuck) .gd-burger,
:root[data-theme="light"] body.home .gd-header:not(.is-stuck) .gd-header__phone,
:root[data-theme="light"] body.gd-v3 .gd-header:not(.is-stuck) .gd-theme,
:root[data-theme="light"] body.gd-story .gd-header:not(.is-stuck) .gd-theme,
:root[data-theme="light"] body.gd-v3 .gd-header:not(.is-stuck) .gd-burger,
:root[data-theme="light"] body.gd-story .gd-header:not(.is-stuck) .gd-burger,
:root[data-theme="light"] body.gd-story .gd-header:not(.is-stuck) .gd-header__phone,
:root[data-theme="light"] body.gd-v3 .gd-header:not(.is-stuck) .gd-header__phone {
	border-color: rgba(255, 255, 255, 0.2);
	color: #fff;
}

/*
 * The slide indicators are 3px tall by design — as a target that is nothing.
 * A transparent box around each one takes the tap without touching the look or
 * the layout; it is inset horizontally so neighbouring targets never overlap.
 */
.gd-carousel__dot { position: relative; }

.gd-carousel__dot::after {
	content: "";
	position: absolute;
	inset: -20px -3px;
}

/*
 * The switcher sits in that same bar, so it inverts with it — except for the
 * entry marking where you are, which keeps its own colour.
 */
/*
 * Every version rests its header over a dark hero, and each one's hairline
 * token is tuned for its own body — navy on v2 and v3 — which is invisible
 * against the photograph. Not scoped to [data-theme] for that reason: it is
 * the hero underneath that decides this, not the page's palette.
 */
body.home .gd-header:not(.is-stuck) .gd-nav__list > li[class*="--v"] > a:not([aria-current]),
body.gd-v2 .gd-header:not(.is-stuck) .gd-nav__list > li[class*="--v"] > a:not([aria-current]),
body.gd-story .gd-header:not(.is-stuck) .gd-nav__list > li[class*="--v"] > a:not([aria-current]),
body.gd-v3 .gd-header:not(.is-stuck) .gd-nav__list > li[class*="--v"] > a:not([aria-current]) {
	border-color: rgba(255, 255, 255, 0.28);
	color: rgba(255, 255, 255, 0.7);
}

/* The lead panel and the footer mark, both of which carry literal colour. */

:root[data-theme="light"] .gd-form {
	background: var(--gd-deep);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-shadow: var(--gd-glow-soft);
}

:root[data-theme="light"] .gd-footer .gd-logo,
:root[data-theme="light"] .gd-footer .gd-brand__link { color: #fff; }

:root[data-theme="light"] .gd-footer .gd-social a {
	border-color: rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.04);
	color: rgba(255, 255, 255, 0.7);
}

:root[data-theme="light"] .gd-footer .gd-social a:hover { border-color: var(--gd-brand-lift); color: #fff; }

:root[data-theme="light"] .gd-cta::before {
	background:
		radial-gradient(50rem 30rem at 20% 30%, rgba(91, 69, 240, 0.07), transparent 60%),
		radial-gradient(40rem 26rem at 85% 70%, rgba(14, 116, 144, 0.05), transparent 60%);
}

:root[data-theme="light"] .gd-footer__heading { color: rgba(255, 255, 255, 0.95); }

/* --- Light mode: the pinned timeline ---
   The node is a dark glass disc built for a near-black ground; on paper it
   reads as a blot. Same shape, inverted. */

:root[data-theme="light"] .gd-flow__num {
	border-color: var(--gd-glass-line-2);
	background: var(--gd-deep);
	box-shadow: var(--gd-glow-soft);
}

:root[data-theme="light"] .gd-flow__num span {
	background: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	color: var(--gd-text);
	-webkit-text-fill-color: var(--gd-text);
}

:root[data-theme="light"] .gd-js .gd-flow__item .gd-flow__num { filter: none; }

:root[data-theme="light"] .gd-flow__item.is-active .gd-flow__num {
	border-color: var(--gd-violet);
	box-shadow: 0 0 0 3px rgba(91, 69, 240, 0.14);
}

:root[data-theme="light"] .gd-flow__item.is-active .gd-flow__num::after { border-color: rgba(91, 69, 240, 0.7); }
:root[data-theme="light"] .gd-flow::before { background: var(--gd-glass-line); }

/* --- Light mode: waiting states ---
   0.4 reads as a legible grey against near-black, but as nearly-blank paper
   on white. The rows still recede, just not to the point of looking unfinished. */

:root[data-theme="light"] .gd-js .gd-index__row .gd-index__name,
:root[data-theme="light"] .gd-js .gd-index__row .gd-index__num,
:root[data-theme="light"] .gd-js .gd-index__row .gd-index__note { opacity: 0.55; }

:root[data-theme="light"] .gd-js .gd-flow__item { opacity: 0.45; }

/*
 * Which version you are on, marked wherever the switcher lands — including
 * over a dark hero, where the header's own inversion would otherwise repaint
 * it. The extra `body` is there to outrank those per-version header rules.
 */
body .gd-header .gd-nav__list > li[class*="--v"] > a[aria-current] {
	border-color: var(--gd-brand-lift, #ef4b83);
	color: var(--gd-brand-lift, #ef4b83);
}