/* ==========================================================================
   Globa-lent — Design tokens & reset
   ========================================================================== */

:root {
	/* Brand — client (blue) / partner (green), sampled from the approved TOP */
	--glt-blue-900: #062a5e;
	--glt-blue-800: #0b3d84;
	--glt-blue-700: #0d4fa6;
	--glt-blue-600: #1263cc;
	--glt-blue-500: #2b7ae4;
	--glt-blue-100: #e4eefb;
	--glt-blue-050: #f2f7fe;

	--glt-green-700: #0b7a43;
	--glt-green-600: #0f9d58;
	--glt-green-500: #21b46a;
	--glt-green-100: #e2f5eb;
	--glt-green-050: #f1fbf6;

	--glt-amber-600: #e08600;
	--glt-amber-100: #fdf1dc;
	--glt-purple-600: #6b4fc4;
	--glt-purple-100: #ece7fa;

	/* Neutrals */
	--glt-ink-900: #0f1b2d;
	--glt-ink-700: #24354d;
	--glt-ink-600: #3b4a5f;
	--glt-ink-500: #5b6b80;
	--glt-ink-400: #8798ad;
	--glt-line-300: #d7e1ee;
	--glt-line-200: #e6edf6;
	--glt-line-100: #f0f5fa;
	--glt-surface: #ffffff;
	--glt-canvas: #f6f9fd;

	--glt-danger: #c0392b;
	--glt-danger-100: #fcecea;
	--glt-success: #0f9d58;
	--glt-info: #1263cc;

	/* Typography */
	--glt-font: "Noto Sans JP", "Inter", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
	--glt-font-en: "Inter", "Noto Sans JP", sans-serif;

	/* 8px baseline grid */
	--glt-s1: 4px;
	--glt-s2: 8px;
	--glt-s3: 12px;
	--glt-s4: 16px;
	--glt-s5: 24px;
	--glt-s6: 32px;
	--glt-s7: 48px;
	--glt-s8: 64px;
	--glt-s9: 96px;
	--glt-s10: 128px;

	--glt-radius-sm: 6px;
	--glt-radius: 10px;
	--glt-radius-lg: 16px;
	--glt-radius-xl: 24px;

	--glt-shadow-xs: 0 1px 2px rgba(15, 27, 45, .06);
	--glt-shadow-sm: 0 2px 8px rgba(15, 27, 45, .06);
	--glt-shadow: 0 8px 24px rgba(15, 27, 45, .08);
	--glt-shadow-lg: 0 18px 48px rgba(15, 27, 45, .12);

	--glt-container: 1200px;
	--glt-container-wide: 1320px;
	--glt-header-h: 72px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--glt-font);
	font-size: 16px;
	line-height: 1.8;
	color: var(--glt-ink-700);
	background: var(--glt-surface);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 {
	margin: 0;
	color: var(--glt-ink-900);
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: .01em;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--glt-blue-600); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--glt-blue-800); }

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

ul, ol { margin: 0 0 1em; padding-left: 1.4em; }
li { margin-bottom: .35em; }

button { font-family: inherit; cursor: pointer; }

table { border-collapse: collapse; width: 100%; }

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

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

.glt-container--wide { max-width: var(--glt-container-wide); }
.glt-container--narrow { max-width: 760px; }

.glt-section { padding-block: var(--glt-s9); }
.glt-section--tight { padding-block: var(--glt-s8); }
.glt-section--canvas { background: var(--glt-canvas); }

.glt-center { text-align: center; }
.glt-stack > * + * { margin-top: var(--glt-s4); }

/* Section heading */
.glt-section-head {
	text-align: center;
	max-width: 760px;
	margin: 0 auto var(--glt-s7);
}

.glt-section-head .glt-eyebrow {
	display: inline-block;
	font-family: var(--glt-font-en);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--glt-blue-600);
	margin-bottom: var(--glt-s3);
}

.glt-section-head h2 {
	font-size: clamp(24px, 3vw, 34px);
	margin-bottom: var(--glt-s3);
}

.glt-section-head p {
	color: var(--glt-ink-500);
	font-size: 15px;
}

/* Decorative rule flanking a centered heading */
.glt-section-head--ruled h2 {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--glt-s4);
}

.glt-section-head--ruled h2::before,
.glt-section-head--ruled h2::after {
	content: "";
	flex: 0 0 48px;
	height: 1px;
	background: var(--glt-line-300);
}

@media (max-width: 640px) {
	.glt-section-head--ruled h2::before,
	.glt-section-head--ruled h2::after { flex-basis: 20px; }
}