/**
 * Geocartis base styles.
 *
 * Consumes the custom properties in tokens.css. Nothing here hard-codes a
 * colour, so a palette change is a one-file edit in tokens.css.
 */

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

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

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

body {
	margin: 0;
	background: var(--gc-surface);
	color: var(--gc-ink);
	font-family: var(--gc-font-body);
	font-size: var(--gc-text-body);
	line-height: var(--gc-leading-relaxed);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a { color: inherit; }

:focus-visible {
	outline: 3px solid var(--gc-focus);
	outline-offset: 2px;
	border-radius: var(--gc-radius-sm);
}

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

.skip-link:focus {
	position: fixed; top: 1rem; left: 1rem;
	z-index: var(--gc-z-overlay);
	width: auto; height: auto;
	clip-path: none;
	background: var(--gc-brand);
	color: var(--gc-on-brand);
	padding: var(--gc-space-3) var(--gc-space-5);
	border-radius: var(--gc-radius-md);
	font-weight: var(--gc-weight-semi);
}

/* ---------------------------------------------------------------------
 * Typography
 * ------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--gc-font-display);
	font-weight: var(--gc-weight-semi);
	line-height: var(--gc-leading-snug);
	letter-spacing: var(--gc-tracking-tight);
	color: var(--gc-ink);
	margin: 0 0 var(--gc-space-4);
	text-wrap: balance;
}

h1 { font-size: var(--gc-text-h1); line-height: var(--gc-leading-tight); }
h2 { font-size: var(--gc-text-h2); }
h3 { font-size: var(--gc-text-h3); }
h4 { font-size: var(--gc-text-h4); }

p { margin: 0 0 var(--gc-space-4); }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: var(--gc-weight-semi); }

.gc-eyebrow {
	display: block;
	font-family: var(--gc-font-body);
	font-size: var(--gc-text-xs);
	font-weight: var(--gc-weight-semi);
	letter-spacing: var(--gc-tracking-wide);
	text-transform: uppercase;
	color: var(--gc-brand);
	margin: 0 0 var(--gc-space-4);
}

.gc-lead {
	font-size: var(--gc-text-lead);
	color: var(--gc-ink-muted);
	max-width: var(--gc-measure);
}

/* ---------------------------------------------------------------------
 * Layout
 * ------------------------------------------------------------------ */
.gc-container {
	width: 100%;
	max-width: var(--gc-container);
	margin-inline: auto;
	padding-inline: var(--gc-gutter);
}

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

.gc-section { padding-block: var(--gc-section-y); }
.gc-section--alt { background: var(--gc-surface-alt); }
.gc-section--dark { background: var(--gc-surface-dark); color: var(--gc-ink-inverse); }
.gc-section--dark h1,
.gc-section--dark h2,
.gc-section--dark h3 { color: var(--gc-ink-inverse); }

/* ---------------------------------------------------------------------
 * Buttons
 *
 * Primary uses --gc-on-brand (near-black) on brand orange: 7.2:1.
 * White on brand orange is 2.9:1 and must never be used.
 * ------------------------------------------------------------------ */
.gc-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--gc-space-2);
	padding: 0.8rem var(--gc-space-6);
	border: 2px solid transparent;
	border-radius: var(--gc-radius-md);
	font-family: var(--gc-font-body);
	font-size: var(--gc-text-sm);
	font-weight: var(--gc-weight-semi);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--gc-duration) var(--gc-ease),
	            border-color var(--gc-duration) var(--gc-ease),
	            color var(--gc-duration) var(--gc-ease),
	            transform var(--gc-duration) var(--gc-ease);
}

.gc-btn:hover { transform: translateY(-1px); }

.gc-btn--primary {
	background: var(--gc-brand);
	color: var(--gc-on-brand);
	border-color: var(--gc-brand);
}
.gc-btn--primary:hover {
	background: var(--gc-orange-400);
	border-color: var(--gc-orange-400);
}

.gc-btn--outline {
	background: transparent;
	color: var(--gc-ink);
	border-color: var(--gc-border-strong);
}
.gc-btn--outline:hover {
	border-color: var(--gc-brand);
	color: var(--gc-brand);
}

.gc-btn--ghost-light {
	background: rgba(255, 255, 255, 0.10);
	color: #FFFFFF;
	border-color: rgba(255, 255, 255, 0.55);
	backdrop-filter: blur(4px);
}
.gc-btn--ghost-light:hover {
	background: rgba(255, 255, 255, 0.92);
	color: var(--gc-grey-950);
	border-color: #FFFFFF;
}

.gc-btn__arrow { transition: transform var(--gc-duration) var(--gc-ease); }
.gc-btn:hover .gc-btn__arrow { transform: translateX(3px); }

/* ---------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------ */
.gc-header {
	position: sticky;
	top: 0;
	z-index: var(--gc-z-header);
	background: var(--gc-surface);
	border-bottom: 1px solid var(--gc-border);
}

.gc-header__inner {
	min-height: var(--gc-header-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gc-space-6);
}

.gc-brand { display: inline-flex; align-items: center; text-decoration: none; }
.gc-brand img { max-height: 46px; width: auto; }

/* Text fallback used until the logo file is in the media library. */
.gc-brand__text { display: flex; flex-direction: column; line-height: 1; }
.gc-brand__name {
	font-family: var(--gc-font-display);
	font-size: 1.375rem;
	font-weight: var(--gc-weight-bold);
	letter-spacing: 0.02em;
	color: var(--gc-grey-500);
}
.gc-brand__name span { color: var(--gc-brand); }
.gc-brand__tag {
	font-size: 0.5625rem;
	font-weight: var(--gc-weight-medium);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--gc-ink-subtle);
	margin-top: 0.3rem;
}

.gc-nav { display: flex; align-items: center; gap: var(--gc-space-6); }
.gc-nav ul {
	display: flex;
	align-items: center;
	gap: var(--gc-space-6);
	list-style: none;
	margin: 0;
	padding: 0;
}
.gc-nav a {
	font-size: var(--gc-text-sm);
	font-weight: var(--gc-weight-medium);
	color: var(--gc-ink-muted);
	text-decoration: none;
	padding-block: var(--gc-space-2);
	transition: color var(--gc-duration) var(--gc-ease);
}
.gc-nav a:hover,
.gc-nav .current-menu-item > a,
.gc-nav .current_page_item > a { color: var(--gc-brand); }

.gc-nav-toggle {
	display: none;
	background: none;
	border: 1px solid var(--gc-border-strong);
	border-radius: var(--gc-radius-md);
	padding: var(--gc-space-2) var(--gc-space-3);
	cursor: pointer;
	color: var(--gc-ink);
	font-size: var(--gc-text-sm);
	font-weight: var(--gc-weight-semi);
}

@media (max-width: 900px) {
	.gc-nav-toggle { display: inline-flex; }
	.gc-nav {
		display: none;
		position: absolute;
		inset-inline: 0;
		top: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--gc-surface);
		border-bottom: 1px solid var(--gc-border);
		padding: var(--gc-space-4) var(--gc-gutter) var(--gc-space-6);
		box-shadow: var(--gc-shadow-md);
	}
	.gc-nav.is-open { display: flex; }
	.gc-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
	.gc-nav li { border-bottom: 1px solid var(--gc-border); }
	.gc-nav a { display: block; padding: var(--gc-space-4) 0; }
	.gc-header__cta { margin-top: var(--gc-space-4); justify-content: center; }
	.gc-header__inner { position: relative; }
}

/* ---------------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------------ */
.gc-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(460px, 62vh, 680px);
	background: var(--gc-grey-900);
	color: #FFFFFF;
	overflow: hidden;
}
.gc-hero__media {
	position: absolute;
	inset: 0;
}
.gc-hero__media img {
	width: 100%; height: 100%;
	object-fit: cover;
}
.gc-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		rgba(23, 24, 27, 0.92) 0%,
		rgba(23, 24, 27, 0.78) 38%,
		rgba(23, 24, 27, 0.35) 72%,
		rgba(23, 24, 27, 0.20) 100%
	);
}
.gc-hero__inner {
	position: relative;
	z-index: 1;
	padding-block: var(--gc-space-16);
}
.gc-hero__content { max-width: 40rem; }
.gc-hero .gc-eyebrow { color: var(--gc-orange-400); }
.gc-hero h1 {
	font-size: var(--gc-text-hero);
	font-weight: var(--gc-weight-bold);
	line-height: var(--gc-leading-tight);
	color: #FFFFFF;
	margin-bottom: var(--gc-space-5);
}
.gc-hero p {
	font-size: var(--gc-text-lead);
	color: rgba(255, 255, 255, 0.82);
	max-width: 34rem;
	margin-bottom: var(--gc-space-8);
}
.gc-hero__actions { display: flex; flex-wrap: wrap; gap: var(--gc-space-3); }

/* ---------------------------------------------------------------------
 * Stats band
 * ------------------------------------------------------------------ */
.gc-stats {
	border-bottom: 1px solid var(--gc-border);
	padding-block: var(--gc-space-10);
}
.gc-stats__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--gc-space-8);
}
.gc-stat__value {
	font-family: var(--gc-font-display);
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.375rem);
	font-weight: var(--gc-weight-bold);
	line-height: 1.05;
	letter-spacing: var(--gc-tracking-tight);
	color: var(--gc-brand);
	margin: 0 0 var(--gc-space-2);
}
.gc-stat__label {
	font-size: var(--gc-text-sm);
	color: var(--gc-ink-muted);
	margin: 0;
}

/* ---------------------------------------------------------------------
 * Cards
 * ------------------------------------------------------------------ */
.gc-grid {
	display: grid;
	gap: var(--gc-space-6);
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.gc-card {
	display: flex;
	flex-direction: column;
	background: var(--gc-surface);
	border: 1px solid var(--gc-border);
	border-radius: var(--gc-radius-lg);
	padding: var(--gc-space-6);
	text-decoration: none;
	transition: border-color var(--gc-duration) var(--gc-ease),
	            box-shadow var(--gc-duration) var(--gc-ease),
	            transform var(--gc-duration) var(--gc-ease);
}
.gc-card:hover {
	border-color: var(--gc-orange-200);
	box-shadow: var(--gc-shadow-md);
	transform: translateY(-2px);
}
.gc-card h3 { margin-bottom: var(--gc-space-2); }
.gc-card p { color: var(--gc-ink-muted); font-size: var(--gc-text-sm); }
.gc-card__more {
	margin-top: auto;
	padding-top: var(--gc-space-4);
	font-size: var(--gc-text-sm);
	font-weight: var(--gc-weight-semi);
	color: var(--gc-brand);
}

/* ---------------------------------------------------------------------
 * Callout: regulatory anchors (Rule 34A, IBM SOP, CPCB, IEC 62446-3)
 * ------------------------------------------------------------------ */
.gc-callout {
	background: var(--gc-callout-bg);
	border-left: 4px solid var(--gc-callout-rule);
	border-radius: 0 var(--gc-radius-md) var(--gc-radius-md) 0;
	padding: var(--gc-space-5) var(--gc-space-6);
	color: var(--gc-callout-ink);
	margin-block: var(--gc-space-6);
}
.gc-callout__label {
	display: block;
	font-size: var(--gc-text-xs);
	font-weight: var(--gc-weight-semi);
	letter-spacing: var(--gc-tracking-wide);
	text-transform: uppercase;
	color: var(--gc-orange-700);
	margin-bottom: var(--gc-space-2);
}

/* ---------------------------------------------------------------------
 * Prose (long-form service copy)
 * ------------------------------------------------------------------ */
.gc-prose { max-width: var(--gc-measure); }
.gc-prose > * + * { margin-top: var(--gc-space-5); }
.gc-prose h2 { margin-top: var(--gc-space-12); }
.gc-prose h3 { margin-top: var(--gc-space-8); }
.gc-prose a { color: var(--gc-orange-700); text-underline-offset: 3px; }
.gc-prose ul, .gc-prose ol { padding-left: var(--gc-space-5); }
.gc-prose li + li { margin-top: var(--gc-space-2); }

.gc-table-wrap { overflow-x: auto; margin-block: var(--gc-space-6); }
.gc-prose table, .gc-table-wrap table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--gc-text-sm);
}
.gc-prose th, .gc-table-wrap th {
	text-align: left;
	background: var(--gc-surface-alt);
	font-weight: var(--gc-weight-semi);
	padding: var(--gc-space-3) var(--gc-space-4);
	border-bottom: 2px solid var(--gc-border-strong);
}
.gc-prose td, .gc-table-wrap td {
	padding: var(--gc-space-3) var(--gc-space-4);
	border-bottom: 1px solid var(--gc-border);
	vertical-align: top;
}

/* ---------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------ */
.gc-footer {
	background: var(--gc-grey-950);
	color: var(--gc-grey-300);
	padding-block: var(--gc-space-16) var(--gc-space-8);
	font-size: var(--gc-text-sm);
}
.gc-footer__grid {
	display: grid;
	gap: var(--gc-space-10);
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	padding-bottom: var(--gc-space-10);
	border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.gc-footer h4 {
	color: #FFFFFF;
	font-size: var(--gc-text-xs);
	font-weight: var(--gc-weight-semi);
	letter-spacing: var(--gc-tracking-wide);
	text-transform: uppercase;
	margin-bottom: var(--gc-space-4);
}
.gc-footer ul { list-style: none; margin: 0; padding: 0; }
.gc-footer li + li { margin-top: var(--gc-space-2); }
.gc-footer a { color: var(--gc-grey-300); text-decoration: none; }
.gc-footer a:hover { color: var(--gc-brand); }
.gc-footer__brand .gc-brand__name { color: #FFFFFF; }
.gc-footer__blurb { margin-top: var(--gc-space-4); max-width: 28rem; color: var(--gc-grey-400); }
.gc-footer__bottom {
	padding-top: var(--gc-space-6);
	display: flex;
	flex-wrap: wrap;
	gap: var(--gc-space-4);
	justify-content: space-between;
	color: var(--gc-grey-500);
	font-size: var(--gc-text-xs);
}

/* ---------------------------------------------------------------------
 * Default WordPress content (posts, archives) until templates land
 * ------------------------------------------------------------------ */
/* <main> is a bare wrapper: every template supplies its own .gc-section
 * padding, so full-bleed hero and CTA bands meet the header and footer
 * with no white band between them. */
.gc-main { padding-block: 0; }
.gc-entry + .gc-entry { margin-top: var(--gc-space-12); padding-top: var(--gc-space-12); border-top: 1px solid var(--gc-border); }
.gc-entry .entry-title { margin-bottom: var(--gc-space-2); }
.gc-entry .entry-title a { text-decoration: none; }
.gc-entry .entry-title a:hover { color: var(--gc-brand); }
.gc-entry .entry-meta { font-size: var(--gc-text-xs); color: var(--gc-ink-subtle); margin-bottom: var(--gc-space-4); }

/* ---------------------------------------------------------------------
 * Section heading helpers
 * ------------------------------------------------------------------ */
.gc-section > .gc-container > .gc-eyebrow + h2 { margin-bottom: var(--gc-space-10); }
.gc-section__more { margin-top: var(--gc-space-8); }

.gc-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--gc-space-2);
	font-size: var(--gc-text-sm);
	font-weight: var(--gc-weight-semi);
	color: var(--gc-orange-700);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	padding-bottom: 2px;
	transition: border-color var(--gc-duration) var(--gc-ease);
}
.gc-link-arrow:hover { border-bottom-color: var(--gc-brand); }
.gc-link-arrow .gc-btn__arrow { transition: transform var(--gc-duration) var(--gc-ease); }
.gc-link-arrow:hover .gc-btn__arrow { transform: translateX(3px); }

.gc-section--dark .gc-link-arrow,
.gc-cta .gc-link-arrow { color: var(--gc-orange-400); }

/* ---------------------------------------------------------------------
 * Split: text beside media
 * ------------------------------------------------------------------ */
.gc-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(var(--gc-space-8), 5vw, var(--gc-space-16));
	align-items: center;
}
.gc-split__text { max-width: var(--gc-measure); }
.gc-split__text p { color: var(--gc-ink-muted); }

.gc-split__media img,
.gc-split__media .gc-placeholder {
	width: 100%;
	border-radius: var(--gc-radius-lg);
	box-shadow: var(--gc-shadow-lg);
}
.gc-split__media img { aspect-ratio: 4 / 3; object-fit: cover; }

/* On --reverse the media markup comes first, so it sits left on desktop.
 * Below the breakpoint the text is pulled above it, so every stacked
 * section still opens with a heading rather than a picture. */
@media (max-width: 860px) {
	.gc-split { grid-template-columns: 1fr; }
	.gc-split--reverse .gc-split__text { order: 1; }
	.gc-split--reverse .gc-split__media { order: 2; }
}

.gc-placeholder {
	aspect-ratio: 4 / 3;
	background:
		linear-gradient(135deg, rgba(244, 113, 33, 0.10), rgba(108, 109, 113, 0.14)),
		repeating-linear-gradient(
			45deg,
			transparent 0 14px,
			rgba(108, 109, 113, 0.10) 14px 15px
		);
	border: 1px solid var(--gc-border);
}

/* ---------------------------------------------------------------------
 * Cluster grid: the four service families
 * ------------------------------------------------------------------ */
.gc-cluster-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--gc-space-6);
}

@media (max-width: 860px) {
	.gc-cluster-grid { grid-template-columns: 1fr; }
}

.gc-cluster {
	background: var(--gc-surface);
	border: 1px solid var(--gc-border);
	border-radius: var(--gc-radius-lg);
	padding: var(--gc-space-8);
	transition: border-color var(--gc-duration) var(--gc-ease),
	            box-shadow var(--gc-duration) var(--gc-ease);
}
.gc-cluster:hover {
	border-color: var(--gc-orange-200);
	box-shadow: var(--gc-shadow-md);
}
.gc-cluster h3 { margin-bottom: var(--gc-space-3); }
.gc-cluster h3 a {
	text-decoration: none;
	transition: color var(--gc-duration) var(--gc-ease);
}
.gc-cluster h3 a:hover { color: var(--gc-brand); }
.gc-cluster > p {
	color: var(--gc-ink-muted);
	font-size: var(--gc-text-sm);
	margin-bottom: var(--gc-space-5);
}

.gc-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gc-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}
.gc-pills li {
	font-size: var(--gc-text-xs);
	font-weight: var(--gc-weight-medium);
	color: var(--gc-ink-muted);
	background: var(--gc-surface-alt);
	border: 1px solid var(--gc-border);
	border-radius: var(--gc-radius-pill);
	padding: 0.34rem var(--gc-space-3);
	line-height: 1.4;
}
.gc-section--alt .gc-pills li { background: var(--gc-surface); }

/* ---------------------------------------------------------------------
 * Deliverables: name / format pairs
 * ------------------------------------------------------------------ */
.gc-formats {
	margin: 0 0 var(--gc-space-4);
	border-top: 1px solid var(--gc-border);
}
.gc-formats__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--gc-space-3);
	padding-block: var(--gc-space-4);
	border-bottom: 1px solid var(--gc-border);
}
.gc-formats dt {
	font-weight: var(--gc-weight-semi);
	font-size: var(--gc-text-sm);
	color: var(--gc-ink);
	margin: 0;
}
.gc-formats dd {
	margin: 0;
	font-family: var(--gc-font-mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
	font-size: var(--gc-text-xs);
	letter-spacing: 0.04em;
	color: var(--gc-orange-700);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------
 * Why Geocartis: icon pillars
 * ------------------------------------------------------------------ */
.gc-pillars {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: var(--gc-space-6);
}

.gc-pillar {
	background: var(--gc-surface);
	border: 1px solid var(--gc-border);
	border-radius: var(--gc-radius-lg);
	padding: var(--gc-space-6);
}
.gc-pillar h3 {
	font-size: var(--gc-text-h4);
	margin-bottom: var(--gc-space-2);
}
.gc-pillar p {
	color: var(--gc-ink-muted);
	font-size: var(--gc-text-sm);
}
.gc-pillar__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: var(--gc-radius-md);
	background: var(--gc-orange-50, rgba(244, 113, 33, 0.10));
	color: var(--gc-orange-700);
	margin-bottom: var(--gc-space-5);
}
.gc-pillar__icon svg { width: 22px; height: 22px; }

/* ---------------------------------------------------------------------
 * Closing CTA band
 * ------------------------------------------------------------------ */
.gc-cta {
	background: var(--gc-surface-dark, var(--gc-grey-900));
	color: var(--gc-ink-inverse, #FFFFFF);
	padding-block: var(--gc-section-y);
}
.gc-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.gc-cta h2 {
	color: #FFFFFF;
	margin-bottom: var(--gc-space-4);
}
.gc-cta p {
	color: rgba(255, 255, 255, 0.78);
	max-width: 44rem;
	margin-bottom: var(--gc-space-8);
}

/* ---------------------------------------------------------------------
 * Inner page head
 * ------------------------------------------------------------------ */
.gc-page-head {
	background: var(--gc-surface-alt);
	border-bottom: 1px solid var(--gc-border);
	padding-block: clamp(var(--gc-space-12), 7vw, var(--gc-space-16));
}
.gc-page-head h1 { margin-bottom: var(--gc-space-4); }
.gc-page-head .gc-lead { margin-bottom: 0; }

.gc-breadcrumb {
	font-size: var(--gc-text-xs);
	color: var(--gc-ink-subtle);
	margin-bottom: var(--gc-space-4);
}
.gc-breadcrumb a { text-decoration: none; }
.gc-breadcrumb a:hover { color: var(--gc-brand); }
.gc-breadcrumb span { margin-inline: var(--gc-space-2); }

.gc-page-head__actions { margin-top: var(--gc-space-8); margin-bottom: 0; }

/* ---------------------------------------------------------------------
 * Feature image, pulled up over the page-head boundary
 * ------------------------------------------------------------------ */
.gc-feature-image {
	background: linear-gradient(var(--gc-surface-alt) 0 50%, var(--gc-surface) 50% 100%);
}
.gc-feature-image img {
	width: 100%;
	max-height: 460px;
	object-fit: cover;
	border-radius: var(--gc-radius-lg);
	box-shadow: var(--gc-shadow-lg);
}

/* ---------------------------------------------------------------------
 * Article: long-form copy beside a sticky aside
 * ------------------------------------------------------------------ */
.gc-article {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: clamp(var(--gc-space-8), 4vw, var(--gc-space-16));
	align-items: start;
}

@media (max-width: 1020px) {
	.gc-article { grid-template-columns: 1fr; }
}

.gc-article__body { max-width: var(--gc-measure); }

.gc-article__aside {
	position: sticky;
	top: calc(var(--gc-header-h) + var(--gc-space-6));
	display: grid;
	gap: var(--gc-space-5);
}

@media (max-width: 1020px) {
	.gc-article__aside { position: static; }
}

.gc-aside-card {
	background: var(--gc-surface-alt);
	border: 1px solid var(--gc-border);
	border-radius: var(--gc-radius-lg);
	padding: var(--gc-space-6);
}
.gc-aside-card h3 {
	font-size: var(--gc-text-h4);
	margin-bottom: var(--gc-space-4);
}
.gc-aside-card p {
	font-size: var(--gc-text-sm);
	color: var(--gc-ink-muted);
	margin-bottom: var(--gc-space-5);
}
.gc-aside-card .gc-formats { margin-bottom: 0; }
.gc-aside-card .gc-formats__row { padding-block: var(--gc-space-3); }
.gc-aside-card .gc-formats__row:last-child { border-bottom: 0; padding-bottom: 0; }

.gc-aside-card--brand {
	background: var(--gc-surface-brand);
	border-color: var(--gc-orange-200);
}

/* ---------------------------------------------------------------------
 * Pagination
 * ------------------------------------------------------------------ */
.pagination, .navigation.pagination { margin-top: var(--gc-space-12); }
.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gc-space-2);
	align-items: center;
}
.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: var(--gc-space-3);
	border: 1px solid var(--gc-border-strong);
	border-radius: var(--gc-radius-md);
	font-size: var(--gc-text-sm);
	font-weight: var(--gc-weight-medium);
	text-decoration: none;
	transition: border-color var(--gc-duration) var(--gc-ease),
	            color var(--gc-duration) var(--gc-ease);
}
.nav-links .page-numbers:hover { border-color: var(--gc-brand); color: var(--gc-brand); }
.nav-links .page-numbers.current {
	background: var(--gc-brand);
	border-color: var(--gc-brand);
	color: var(--gc-on-brand);
}