/* ==========================================================================
   Boulder Technology — site stylesheet

   The design prototype carried its layout in inline styles; everything has
   been lifted here. Two surfaces alternate down every page:

     .surface-dark   navy ground, cream type      (the default)
     .surface-light  warm cream ground, ink type

   Each surface redefines the same set of contextual tokens (--s-*), so the
   card, note, list and figure components below work unchanged on either one.
   ========================================================================== */

:root {
	/* ── brand ─────────────────────────────────────────────────────── */
	--accent: #c6a253;
	--accent-bright: #d9b968;
	--accent-ink: #9a7a2e;           /* accent legible on the light surface */
	--periwinkle: #8b9ad0;
	--periwinkle-soft: #9fadd4;
	--periwinkle-ink: #4a6c8c;       /* periwinkle legible on light */

	/* ── dark surface ──────────────────────────────────────────────── */
	--ink: #0f141e;
	--ink-deep: #0b0f17;
	--panel: #131a28;
	--panel-raised: #161c29;
	--panel-inset: #1b2333;
	--rule: rgba(237, 234, 226, 0.08);
	--rule-strong: rgba(237, 234, 226, 0.18);
	--text: #edeae2;
	--text-bright: #f7f3eb;
	--text-head: #f5f1e9;
	--text-body: #b7bdc8;
	--text-soft: #c4c9d3;
	--text-dim: #aeb4c0;
	--text-faint: #8b92a0;
	--text-fainter: #6e7686;

	/* ── light surface ─────────────────────────────────────────────── */
	--cream: #f5f1e9;
	--cream-card: #ffffff;
	--cream-inset: #e8e4dc;
	--cream-quote: #ede9e1;
	--ink-head: #161a22;
	--ink-body: #4a4a42;
	--ink-muted: #54544b;
	--ink-muted-2: #5b5b52;
	--ink-meta: #6a6a62;
	--ink-faint: #8a8a80;
	--rule-lt: rgba(26, 29, 37, 0.08);

	/* ── type ──────────────────────────────────────────────────────── */
	--font-body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
	--font-display: 'Space Grotesk', 'Archivo', 'Helvetica Neue', Arial, sans-serif;
	--font-serif: 'Spectral', Georgia, 'Times New Roman', serif;

	/* ── metrics ───────────────────────────────────────────────────── */
	--gutter: 40px;
	--nav-h: 71px;
	--radius-sm: 10px;
	--radius: 14px;
	--radius-lg: 20px;
}

/* ── reset ─────────────────────────────────────────────────────────── */

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

html {
	scroll-behavior: smooth;
	/* sticky nav must not cover the target of an in-page anchor */
	scroll-padding-top: calc(var(--nav-h) + 12px);
}

body {
	background: var(--ink);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

/* A `display` declaration on an element beats the UA stylesheet's rule for
   [hidden], so anything given a display value would ignore the attribute. */
[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--ink); }

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

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

@keyframes float-up {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}

@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;
	}
}

/* ==========================================================================
   SURFACES
   ========================================================================== */

.surface-dark,
.surface-light {
	position: relative;
}

.surface-dark {
	background: var(--ink);
	color: var(--text);

	--s-eyebrow: var(--accent);
	--s-eyebrow-alt: var(--periwinkle);
	--s-head: var(--text-head);
	--s-head-strong: var(--text-bright);
	--s-body: var(--text-body);
	--s-copy: var(--text-soft);
	--s-meta: var(--text-faint);
	--s-meta-faint: var(--text-fainter);
	--s-accent: var(--accent);
	--s-accent-2: var(--periwinkle);
	--s-card: var(--panel);
	--s-card-raised: var(--panel-raised);
	--s-quote: var(--panel-raised);
	--s-rule: var(--rule);
	--s-rule-strong: var(--rule-strong);
}

.surface-light {
	background: var(--cream);
	color: var(--ink-body);

	--s-eyebrow: var(--accent-ink);
	--s-eyebrow-alt: var(--periwinkle-ink);
	--s-head: var(--ink-head);
	--s-head-strong: var(--ink-head);
	--s-body: var(--ink-muted);
	--s-copy: var(--ink-body);
	--s-meta: var(--ink-meta);
	--s-meta-faint: var(--ink-faint);
	--s-accent: var(--accent-ink);
	--s-accent-2: var(--periwinkle-ink);
	--s-card: var(--cream-card);
	--s-card-raised: var(--cream-inset);
	--s-quote: var(--cream-quote);
	--s-rule: var(--rule-lt);
	--s-rule-strong: rgba(26, 29, 37, 0.18);
}

/* Case-study bands invert the card treatment: insets rather than white cards. */
.surface-light--inset {
	--s-card: var(--cream-inset);
	--s-card-raised: var(--cream-inset);
}

.surface-gradient {
	background: linear-gradient(135deg, var(--panel-raised), var(--ink));
}

/* A soft radial wash. Sits under the content of the section that owns it. */
.glow {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.glow--hero {
	background:
		radial-gradient(1200px 600px at 78% -10%, rgba(139, 154, 208, 0.14), transparent 60%),
		radial-gradient(900px 500px at 8% 30%, rgba(198, 162, 83, 0.12), transparent 55%);
}
.glow--page {
	background:
		radial-gradient(1000px 500px at 80% -10%, rgba(139, 154, 208, 0.12), transparent 60%),
		radial-gradient(700px 400px at 5% 60%, rgba(198, 162, 83, 0.10), transparent 55%);
}
.glow--contact {
	background:
		radial-gradient(900px 450px at 20% -10%, rgba(198, 162, 83, 0.13), transparent 60%),
		radial-gradient(700px 400px at 90% 40%, rgba(139, 154, 208, 0.10), transparent 55%);
}
.glow--signin {
	background:
		radial-gradient(800px 420px at 50% -5%, rgba(198, 162, 83, 0.12), transparent 62%),
		radial-gradient(600px 400px at 85% 70%, rgba(139, 154, 208, 0.10), transparent 58%);
}
.glow--suite {
	background: radial-gradient(800px 500px at 85% 20%, rgba(139, 154, 208, 0.10), transparent 60%);
}
.glow--cta {
	background:
		radial-gradient(700px 400px at 20% 20%, rgba(198, 162, 83, 0.14), transparent 60%),
		radial-gradient(700px 400px at 90% 90%, rgba(139, 154, 208, 0.12), transparent 60%);
}
.glow--panel {
	background: radial-gradient(420px 300px at 72% 20%, rgba(139, 154, 208, 0.10), transparent 65%);
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.section {
	padding: 100px var(--gutter);
	overflow: hidden;
}
.section--flush-top { padding-top: 0; }
.section--tight { padding: 64px var(--gutter); }
.section--hero { padding: 110px var(--gutter) 90px; }
.section--page-head { padding: 100px var(--gutter) 80px; }
.section--form { padding: 16px var(--gutter) 100px; }
.section--ruled-top { border-top: 1px solid var(--s-rule); }
.section--ruled-bottom { border-bottom: 1px solid var(--s-rule); }

.wrap { position: relative; max-width: 1180px; margin: 0 auto; }
.wrap--narrow { max-width: 1080px; }
.wrap--form { max-width: 1040px; }
.wrap--tight { max-width: 820px; }

.measure { max-width: 760px; }
.measure--wide { max-width: 820px; }
.measure--head { max-width: 680px; }

.stack-lg { margin-bottom: 52px; }
.stack-xl { margin-bottom: 56px; }

.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.grid--gap-lg { gap: 28px; }
.grid--gap-xl { gap: 60px; }
.grid--hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 56px; align-items: center; }
.grid--split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: start; }
.grid--case { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px; align-items: start; }
.grid--contact { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 56px; align-items: start; }
.grid--signin { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center; }

.column { display: flex; flex-direction: column; gap: 20px; }
.column--tight { gap: 18px; }

.center { text-align: center; }

/* ==========================================================================
   TYPE
   ========================================================================== */

.eyebrow {
	font-family: var(--font-display);
	font-size: 12px;
	letter-spacing: 0.2em;
	color: var(--s-eyebrow);
	margin-bottom: 18px;
}
.eyebrow--alt { color: var(--s-eyebrow-alt); letter-spacing: 0.18em; }
.eyebrow--sm { font-size: 11px; letter-spacing: 0.16em; margin-bottom: 10px; }
.eyebrow--xs { font-size: 11px; letter-spacing: 0.14em; margin-bottom: 14px; color: var(--s-meta); }
.eyebrow--quiet { color: var(--s-meta); }
.eyebrow--inline { display: inline-flex; align-items: center; gap: 8px; }

.badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 7px 14px;
	border: 1px solid rgba(198, 162, 83, 0.35);
	border-radius: 999px;
	font-family: var(--font-display);
	font-size: 12px;
	letter-spacing: 0.18em;
	color: var(--accent-bright);
	margin-bottom: 28px;
}
.badge::before {
	content: '';
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--accent);
}

.tag {
	padding: 3px 8px;
	border: 1px solid rgba(139, 154, 208, 0.4);
	border-radius: 999px;
	font-size: 10px;
	letter-spacing: 0.08em;
	color: var(--periwinkle);
}

.chip {
	display: inline-block;
	padding: 5px 14px;
	margin-bottom: 24px;
	background: rgba(198, 162, 83, 0.12);
	border: 1px solid rgba(198, 162, 83, 0.3);
	border-radius: 999px;
	font-family: var(--font-display);
	font-size: 11px;
	letter-spacing: 0.16em;
	color: var(--accent);
}

.headline-xl, .headline-lg, .headline-md, .headline-sm,
.headline-xs, .headline-2xs, .headline-3xs {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--s-head);
	text-wrap: pretty;
}

.headline-xl { font-size: clamp(38px, 5vw, 64px); line-height: 1.04; letter-spacing: -0.02em; color: var(--s-head-strong); }
.headline-lg { font-size: clamp(34px, 4.8vw, 60px); line-height: 1.07; letter-spacing: -0.02em; color: var(--s-head-strong); }
.headline-md { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1;  letter-spacing: -0.015em; }
.headline-sm { font-size: clamp(26px, 2.9vw, 38px); line-height: 1.14; letter-spacing: -0.015em; }
.headline-xs { font-size: 28px; line-height: 1.15; }
.headline-2xs { font-size: 21px; line-height: 1.25; }
.headline-3xs { font-size: 19px; line-height: 1.3; }

.headline-cta { font-size: clamp(32px, 4vw, 52px); line-height: 1.08; letter-spacing: -0.02em; color: var(--s-head-strong); }
.headline-feature { font-size: clamp(28px, 3vw, 40px); line-height: 1.12; letter-spacing: -0.015em; }

/* The gold serif italic that carries one word of most headlines. */
.accent-word {
	color: var(--s-accent);
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 500;
}

.lede {
	margin-top: 22px;
	font-size: 19px;
	line-height: 1.6;
	color: var(--s-body);
	max-width: 640px;
	text-wrap: pretty;
}
.lede--wide { max-width: 720px; }
.lede--md { font-size: 18px; }
.lede--sm { font-size: 17px; line-height: 1.7; }

.copy { font-size: 15px; line-height: 1.65; color: var(--s-copy); }
.copy--sm { font-size: 14px; line-height: 1.6; }
.copy + .copy { margin-top: 18px; }

.tagline {
	margin-top: 30px;
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 16px;
	color: var(--s-meta);
}

.footnote {
	font-size: 13px;
	line-height: 1.6;
	color: var(--s-meta-faint);
}
.footnote a {
	color: var(--s-meta);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.footnote a:hover { color: var(--s-accent); }

.attribution {
	margin-top: 18px;
	font-family: var(--font-display);
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--s-accent);
}
.attribution--quiet { color: var(--s-meta); }

/* ==========================================================================
   NAV
   ========================================================================== */

.nav {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 18px var(--gutter);
	background: rgba(15, 20, 30, 0.88);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(198, 162, 83, 0.16);
}

.logo {
	display: block;
	flex: none;
	background-image: url('/img/boulder-logo.png');
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
}
.logo--nav { width: 214px; height: 34px; }
.logo--footer { width: 176px; height: 28px; }

.nav__links {
	display: flex;
	align-items: center;
	gap: 24px;
	font-size: 14px;
	color: var(--text-dim);
}

.nav__link { transition: color 0.2s; }
.nav__link:hover,
.nav__link:focus-visible { color: var(--text-head); }
.nav__link.is-current { color: var(--accent); }

.nav__toggle {
	display: none;
	flex: none;
	width: 42px; height: 42px;
	background: transparent;
	border: 1px solid var(--rule-strong);
	border-radius: 10px;
	cursor: pointer;
}
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
	display: block;
	width: 18px; height: 1.5px;
	margin: 0 auto;
	background: var(--text);
	transition: transform 0.2s, opacity 0.2s;
}
.nav__toggle span { position: relative; }
.nav__toggle span::before,
.nav__toggle span::after {
	content: '';
	position: absolute;
	left: 0;
}
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after  { top: 6px; }
.nav__toggle[aria-expanded='true'] span { background: transparent; }
.nav__toggle[aria-expanded='true'] span::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded='true'] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 28px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	transition: transform 0.2s, border-color 0.2s, background 0.2s, color 0.2s;
}

.btn--primary {
	background: var(--accent);
	color: var(--ink);
	font-weight: 600;
	box-shadow: 0 12px 34px rgba(198, 162, 83, 0.28);
}
.btn--primary:hover { transform: translateY(-2px); color: var(--ink); }

.btn--outline {
	border-color: rgba(237, 234, 226, 0.24);
	color: var(--text);
}
.btn--outline:hover { border-color: var(--accent); color: var(--text); }

/* Dark button for use on the light surface. */
.btn--dark {
	background: var(--ink);
	color: var(--cream);
	font-weight: 600;
	font-size: 15px;
	padding: 14px 26px;
}
.btn--dark:hover { transform: translateY(-2px); color: var(--cream); }

.btn--sm { padding: 11px 20px; font-size: 14px; gap: 8px; }
.btn--block { width: 100%; }

/* The Client Portal control in the nav. */
.btn--portal {
	padding: 9px 17px;
	gap: 7px;
	font-size: 14px;
	border-color: rgba(237, 234, 226, 0.22);
	color: var(--text);
}
.btn--portal:hover { border-color: var(--accent); color: var(--text); }
.btn--portal svg { flex: none; }

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 38px;
}
.btn-row--center { justify-content: center; }

.link-arrow {
	font-family: var(--font-display);
	font-size: 13px;
	color: var(--s-accent-2);
}

/* ==========================================================================
   CARDS, NOTES, STATS
   ========================================================================== */

.card {
	padding: 30px 28px;
	background: var(--s-card);
	border: 1px solid var(--s-rule);
	border-radius: var(--radius);
}
.card--lg { padding: 36px 34px; border-radius: 16px; }
.card--raised { background: var(--s-card-raised); }
.card--accent-top { border-top: 2px solid var(--accent); }
.card--periwinkle-top { border-top: 2px solid var(--periwinkle); }

.card__kicker {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 24px;
	color: var(--s-head);
}
.card__label {
	margin-top: 6px;
	font-family: var(--font-display);
	font-size: 12px;
	letter-spacing: 0.16em;
	color: var(--accent-bright);
}
.card__label--alt { color: var(--periwinkle-soft); }
.card__index {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
	font-family: var(--font-display);
	font-size: 13px;
	color: var(--s-meta-faint);
}
.card__index em {
	font-style: normal;
	font-size: 11px;
	letter-spacing: 0.18em;
	color: var(--accent-bright);
}
.card__index em.alt { color: var(--periwinkle-soft); }
.card p { margin-top: 14px; font-size: 15px; line-height: 1.65; color: var(--s-body); }
.surface-dark .card p { color: var(--text-dim); }
.surface-light .card p { color: var(--ink-muted-2); }
.card h3, .card h4 { font-family: var(--font-display); font-weight: 600; color: var(--s-head); }
.card h3 { font-size: 20px; line-height: 1.25; }
.card h4 { font-size: 16px; line-height: 1.25; }
.card h4 + p { margin-top: 10px; font-size: 13.5px; line-height: 1.6; }

/* Callout with a coloured left edge — "the challenge", "the solution". */
.note {
	padding: 24px;
	background: var(--s-card);
	border-radius: 12px;
	border-left: 3px solid var(--s-accent);
}
.note--sm { padding: 22px; }
.note--alt { border-left-color: var(--s-accent-2); }
.note--card { background: var(--s-card-raised); }
.note__label {
	font-family: var(--font-display);
	font-size: 11px;
	letter-spacing: 0.16em;
	color: var(--s-accent);
	margin-bottom: 10px;
}
.note--alt .note__label { color: var(--s-accent-2); }
.note p { font-size: 15px; line-height: 1.65; color: var(--s-copy); }

/* Pull-quote panel on the light surface (the "worse than not using AI" line). */
.pull {
	margin-top: 28px;
	padding: 22px 24px;
	background: var(--cream-card);
	border: 1px solid var(--rule-lt);
	border-left: 3px solid var(--accent-ink);
	border-radius: var(--radius);
}
.pull p {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 18px;
	line-height: 1.5;
	color: var(--ink-head);
}

.stat {
	padding: 32px;
	background: var(--s-card);
	border: 1px solid var(--s-rule);
	border-radius: 16px;
}
.stat__figure {
	font-family: var(--font-display);
	font-size: 44px;
	font-weight: 600;
	line-height: 1;
	color: var(--s-accent);
}
.stat__figure--text { font-size: 30px; line-height: 1.1; color: var(--periwinkle-ink); }
.stat p { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--ink-muted-2); }

.metric {
	padding: 22px;
	background: var(--s-card);
	border-radius: 12px;
	text-align: center;
}
.metric__figure {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 32px;
	line-height: 1;
	color: var(--s-accent);
}
.metric p {
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--s-meta);
}

/* ==========================================================================
   QUOTES
   ========================================================================== */

.quote-hero {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: clamp(24px, 2.8vw, 34px);
	line-height: 1.4;
	color: var(--s-head);
	max-width: 900px;
	text-wrap: pretty;
}
.quote-hero + .attribution { margin-top: 24px; font-size: 14px; }

.quote-panel {
	padding: 24px;
	background: var(--s-quote);
	border: 1px solid rgba(198, 162, 83, 0.18);
	border-radius: 16px;
}
.quote-panel--lg { padding: 36px; border-radius: var(--radius-lg); }
.surface-light .quote-panel { border-color: rgba(154, 122, 46, 0.3); }

.quote-panel blockquote {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 16px;
	line-height: 1.65;
	color: var(--s-copy);
}
.quote-panel--lg blockquote { font-size: 16.5px; }
.surface-dark .quote-panel blockquote { color: #f0ede6; }
.surface-light .quote-panel blockquote { color: #2a2a22; }
.quote-panel blockquote p + p { margin-top: 14px; }
.quote-panel .attribution { margin-top: 14px; }
.quote-panel--lg .attribution { margin-top: 20px; }

.testimonial {
	padding: 32px;
	background: var(--s-card-raised);
	border: 1px solid var(--s-rule);
	border-radius: 16px;
}
.testimonial p {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 16px;
	line-height: 1.6;
	color: var(--s-copy);
}
.testimonial .attribution { color: var(--s-meta); }

/* ==========================================================================
   LISTS
   ========================================================================== */

/* Rotated-square bullets. */
.diamond-list { display: flex; flex-direction: column; gap: 14px; }
.diamond-list li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 15px;
	line-height: 1.5;
	color: #d6d9e0;
}
.diamond-list li::before {
	content: '';
	flex: none;
	width: 7px; height: 7px;
	margin-top: 7px;
	background: var(--s-accent);
	transform: rotate(45deg);
}

/* "Key capabilities delivered" — chevron bullets inside a panel. */
.cap-panel {
	padding: 20px 24px;
	background: var(--s-card);
	border-radius: 12px;
}
.cap-list { display: flex; flex-direction: column; gap: 10px; }
.cap-list li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 14px;
	color: var(--s-copy);
}
.cap-list li::before {
	content: '\25b8';
	flex: none;
	margin-top: 2px;
	color: var(--s-accent);
}

/* Small tiles used for the suite's underlying capabilities. */
.trait {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 20px 22px;
	background: var(--panel);
	border: 1px solid var(--rule);
	border-radius: 12px;
}
.trait::before {
	content: '';
	flex: none;
	width: 8px; height: 8px;
	margin-top: 6px;
	background: var(--accent);
	transform: rotate(45deg);
}
.trait--alt::before { background: var(--periwinkle); }
.trait p { font-size: 14px; line-height: 1.5; color: #c9ceda; }

/* Numbered steps with a rule above — the process band. */
.step { border-top: 2px solid var(--s-rule-strong); padding-top: 22px; }
.step--first { border-top-color: var(--accent); }
.step__num {
	font-family: var(--font-display);
	font-size: 13px;
	letter-spacing: 0.1em;
	color: var(--s-accent);
}
.step h3 {
	margin-top: 12px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 19px;
	color: var(--s-head);
}
.step p { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--ink-muted-2); }

/* Ruled list of expectations on the contact page. */
.expect { display: flex; gap: 16px; padding: 20px 0; border-top: 1px solid var(--s-rule); }
.expect__num {
	flex: none;
	padding-top: 3px;
	font-family: var(--font-display);
	font-size: 12px;
	letter-spacing: 0.1em;
	color: var(--accent);
}
.expect h3 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 15px;
	color: var(--text-head);
}
.expect p { margin-top: 7px; font-size: 14px; line-height: 1.6; color: var(--text-dim); }

/* ==========================================================================
   FIGURES  (the hand-authored schematics)
   ========================================================================== */

.figure {
	margin: 0;
	padding: 20px 20px 16px;
	background: var(--s-card);
	border: 1px solid rgba(198, 162, 83, 0.15);
	border-radius: 16px;
}
.surface-light .figure { border-color: rgba(154, 122, 46, 0.2); }
.figure--hero {
	padding: 22px 22px 18px;
	background: #121926;
	border-color: rgba(198, 162, 83, 0.22);
	border-radius: var(--radius-lg);
	box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45);
}

.figure svg {
	display: block;
	width: 100%;
	height: auto;
	font-family: var(--font-display);
}

.figure figcaption {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid rgba(198, 162, 83, 0.15);
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--s-meta);
}
.figure--hero figcaption {
	margin-top: 16px;
	padding-top: 13px;
	border-top-color: rgba(198, 162, 83, 0.22);
	line-height: 1.55;
}
.surface-light .figure figcaption { border-top-color: rgba(154, 122, 46, 0.2); }

.fig-label {
	font-family: var(--font-display);
	letter-spacing: 0.14em;
	color: var(--s-accent);
}
.fig-label--alt { letter-spacing: 0.08em; color: var(--periwinkle); }

/* ==========================================================================
   SUITE TABS
   ========================================================================== */

.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 32px;
}
.tab {
	padding: 12px 20px;
	border: 1px solid var(--rule-strong);
	border-radius: 999px;
	background: transparent;
	color: var(--text-dim);
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.tab:hover { color: var(--text-head); border-color: rgba(198, 162, 83, 0.5); }
.tab[aria-selected='true'] {
	background: var(--accent);
	border-color: transparent;
	color: var(--ink);
	box-shadow: 0 8px 24px rgba(198, 162, 83, 0.28);
}

.tab-panel {
	display: none;
	grid-template-columns: 1fr 1fr;
	border: 1px solid rgba(237, 234, 226, 0.1);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--panel-raised);
}
.tab-panel.is-open { display: grid; }

.tab-panel__body { padding: 48px; }
.tab-panel__body h3 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 28px;
	line-height: 1.15;
	color: var(--text-head);
	text-wrap: pretty;
}
.tab-panel__body > p {
	margin-top: 16px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--text-body);
}
.tab-panel__body .diamond-list { margin-top: 26px; }

.tab-panel__figure {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 340px;
	padding: 36px 32px;
	background: linear-gradient(160deg, #131a28, #0e1420);
	border-left: 1px solid var(--rule);
}
.tab-panel__figure > * { position: relative; }

/* The stacked schematic inside each tab panel. */
.flow {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	width: 100%;
}
.flow--roomy { gap: 16px; }
.flow__row { display: flex; gap: 12px; }
.flow__row--wide { gap: 30px; }
.flow__row--split { gap: 120px; }

.flow__node {
	padding: 10px 15px;
	background: #111a2b;
	border: 1px solid var(--rule);
	border-radius: 9px;
	font-family: var(--font-display);
	font-size: 12px;
	color: #c9ceda;
}
.flow__node--sm { padding: 9px 14px; font-size: 11.5px; border-color: rgba(139, 154, 208, 0.35); }
.flow__node--accent {
	padding: 12px 18px;
	background: #101827;
	border-color: var(--accent);
	border-radius: var(--radius-sm);
	font-size: 13px;
	color: #f0ead8;
}

.flow__hub {
	padding: 16px 24px;
	background: linear-gradient(180deg, #1b2438, #141c2c);
	border: 1px solid rgba(139, 154, 208, 0.5);
	border-radius: 12px;
	text-align: center;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.flow__hub--accent { border-color: var(--accent); }
.flow__hub--pill { padding: 18px 28px; border-radius: 50px; }
.flow__hub--card { width: 100%; max-width: 320px; padding: 18px 20px; border-radius: var(--radius); text-align: left; }
.flow__hub strong {
	display: block;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 15px;
	color: var(--text-head);
}
.flow__hub--pill strong { font-size: 14px; }
.flow__hub span {
	display: block;
	margin-top: 3px;
	font-family: var(--font-display);
	font-size: 11px;
	color: var(--periwinkle);
}
.flow__hub--pill span { font-size: 10.5px; letter-spacing: 0.08em; color: var(--accent); margin-top: 2px; }
.flow__hub--card strong { text-align: center; margin-bottom: 12px; }

.flow__tick { width: 1px; height: 22px; background: rgba(198, 162, 83, 0.5); }
.flow__tick--alt { background: rgba(139, 154, 208, 0.4); }
.flow__tick--short { height: 14px; }
.flow__tick--tall { height: 18px; }

.flow__caption {
	margin-top: 8px;
	font-family: var(--font-display);
	font-size: 11px;
	letter-spacing: 0.05em;
	color: var(--text-fainter);
}
.flow__note {
	font-family: var(--font-display);
	font-size: 10px;
	letter-spacing: 0.08em;
	color: var(--text-fainter);
}

.pill-set { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pill-set span {
	padding: 6px 11px;
	background: #0e1626;
	border: 1px solid var(--rule);
	border-radius: 999px;
	font-family: var(--font-display);
	font-size: 11px;
	color: #c9ceda;
}
.pill-set span.on-accent { border-color: rgba(198, 162, 83, 0.35); color: #f0ead8; }
.pill-set span.on-alt { border-color: rgba(139, 154, 208, 0.4); color: #f0ead8; }

/* ==========================================================================
   CASE STUDIES
   ========================================================================== */

.cs-jump { margin-top: 44px; padding-top: 32px; border-top: 1px solid rgba(237, 234, 226, 0.10); }
.cs-jump__label {
	font-family: var(--font-display);
	font-size: 12px;
	letter-spacing: 0.18em;
	color: var(--text-faint);
	margin-bottom: 18px;
}
.cs-jump__card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px 20px;
	background: rgba(22, 28, 41, 0.72);
	border: 1px solid rgba(237, 234, 226, 0.10);
	border-radius: var(--radius);
	transition: transform 0.2s, border-color 0.2s, background 0.2s;
}
.cs-jump__card:hover {
	transform: translateY(-3px);
	border-color: rgba(198, 162, 83, 0.45);
	background: rgba(22, 28, 41, 0.95);
	color: inherit;
}
.cs-jump__num {
	font-family: var(--font-display);
	font-size: 11px;
	letter-spacing: 0.16em;
	color: var(--accent);
}
.cs-jump__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1.3;
	color: var(--text-head);
}
.cs-jump__meta { font-size: 12.5px; line-height: 1.45; color: var(--text-faint); }

.cs-eyebrow {
	font-family: var(--font-display);
	font-size: 12px;
	letter-spacing: 0.2em;
	color: var(--s-meta);
	margin-bottom: 14px;
}
.surface-light .cs-eyebrow { color: var(--accent-ink); }

/* Teaser cards on the home page. */
.teaser {
	display: flex;
	flex-direction: column;
	padding: 32px;
	background: var(--panel-raised);
	border: 1px solid var(--rule);
	border-radius: 16px;
	transition: transform 0.2s, border-color 0.2s;
}
.teaser:hover {
	transform: translateY(-4px);
	border-color: rgba(198, 162, 83, 0.4);
	color: inherit;
}
.teaser__label {
	font-family: var(--font-display);
	font-size: 12px;
	letter-spacing: 0.14em;
	color: var(--accent);
	margin-bottom: 16px;
}
.teaser h3 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 19px;
	line-height: 1.3;
	color: var(--text-head);
}
.teaser p {
	flex: 1;
	margin-top: 12px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--text-dim);
}
.teaser .link-arrow { margin-top: 20px; }

.industry-panel {
	padding: 22px;
	background: var(--s-card);
	border-radius: 12px;
}
.industry-panel p { font-size: 15px; color: var(--s-copy); }

/* ==========================================================================
   FORMS
   ========================================================================== */

.form-panel {
	padding: 36px;
	background: var(--panel-raised);
	border: 1px solid rgba(237, 234, 226, 0.09);
	border-radius: var(--radius-lg);
}

.form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.field--full { grid-column: 1 / -1; }

.field__label {
	display: block;
	margin-bottom: 8px;
	font-family: var(--font-display);
	font-size: 11.5px;
	letter-spacing: 0.14em;
	color: var(--text-faint);
}
.field__label .req { color: var(--accent); }

.input, .select, .textarea {
	width: 100%;
	padding: 13px 15px;
	background: var(--ink);
	color: var(--text);
	border: 1px solid rgba(237, 234, 226, 0.14);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: 15px;
	transition: border-color 0.2s;
}
.input::placeholder, .textarea::placeholder { color: var(--text-fainter); }
.input:focus, .select:focus, .textarea:focus {
	border-color: var(--accent);
	outline: none;
}
.input[aria-invalid='true'], .textarea[aria-invalid='true'] {
	border-color: rgba(214, 109, 109, 0.7);
}

.textarea { resize: vertical; line-height: 1.6; }

.select {
	appearance: none;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--text-faint) 50%),
		linear-gradient(135deg, var(--text-faint) 50%, transparent 50%);
	background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

.form-actions {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	margin-top: 4px;
}
.form-actions .btn { margin: 0; }
.form-hint { font-size: 13px; color: #7c8496; }
.form-hint strong { font-weight: 400; color: var(--text-dim); }

.form-error {
	grid-column: 1 / -1;
	display: none;
	padding: 14px 16px;
	background: rgba(198, 83, 83, 0.10);
	border: 1px solid rgba(214, 109, 109, 0.4);
	border-radius: var(--radius-sm);
	font-size: 14px;
	color: #e9a9a9;
}
.form-error.is-shown { display: block; }

.form-sent { display: none; padding: 26px 8px; text-align: center; }
.form-sent.is-shown { display: block; }
.form-sent__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px; height: 52px;
	margin: 0 auto 20px;
	border: 1px solid rgba(198, 162, 83, 0.45);
	border-radius: 50%;
	background: rgba(198, 162, 83, 0.14);
	font-size: 24px;
	color: var(--accent);
}
.form-sent h2 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 24px;
	color: var(--text-head);
}
.form-sent p {
	max-width: 440px;
	margin: 14px auto 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--text-dim);
}
.form-sent p.small { margin-top: 18px; font-size: 13px; line-height: 1.6; color: #7c8496; }
.form-sent a { color: var(--accent); }

.form-legal { margin-top: 18px; font-size: 12.5px; line-height: 1.6; color: var(--text-fainter); }
.form-legal a { color: var(--text-faint); text-decoration: underline; text-underline-offset: 2px; }

/* Direct-contact block beside the form. */
.reach {
	margin-top: 30px;
	padding: 24px;
	background: var(--panel);
	border-radius: 16px;
	border-left: 3px solid var(--accent);
}
.reach__label {
	margin-bottom: 14px;
	font-family: var(--font-display);
	font-size: 11.5px;
	letter-spacing: 0.14em;
	color: var(--accent);
}
.reach__phone {
	display: block;
	margin-bottom: 10px;
	font-family: var(--font-display);
	font-size: 17px;
	color: var(--text-head);
}
.reach__email { display: block; font-size: 15px; color: var(--text-dim); word-break: break-word; }
.reach a:hover { color: var(--accent); }

.reach-inline {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	justify-content: center;
	margin-top: 34px;
	font-family: var(--font-display);
	font-size: 16px;
	color: var(--text);
}
.reach-inline a { display: inline-flex; align-items: center; gap: 10px; }
.reach-inline a:hover { color: var(--accent); }
.reach-inline span { color: var(--periwinkle); }

/* ── sign in ───────────────────────────────────────────────────────── */

.signin-card {
	padding: 38px 36px;
	background: var(--panel-raised);
	border: 1px solid rgba(198, 162, 83, 0.20);
	border-radius: var(--radius-lg);
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.40);
}
.signin-card h2 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 22px;
	color: var(--text-head);
}
.signin-card > p { margin-top: 8px; font-size: 14px; color: var(--text-faint); }
.signin-form { margin-top: 26px; display: flex; flex-direction: column; gap: 18px; }
.signin-form .field__label { margin-bottom: 8px; }
.field__head { display: flex; align-items: baseline; justify-content: space-between; }
.field__aside { font-size: 12px; color: var(--periwinkle); }
.field__aside:hover { color: var(--accent); }

.checkbox {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	color: var(--text-dim);
	cursor: pointer;
}
.checkbox input { width: 16px; height: 16px; accent-color: var(--accent); }

.or-rule {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 22px;
	font-size: 12px;
	color: #4e5665;
}
.or-rule::before, .or-rule::after {
	content: '';
	flex: 1;
	height: 1px;
	background: rgba(237, 234, 226, 0.10);
}

.disclosure {
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid var(--rule);
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--text-fainter);
}
.disclosure b {
	font-family: var(--font-display);
	font-weight: 400;
	letter-spacing: 0.1em;
	color: var(--periwinkle);
}

.notice {
	display: none;
	margin-top: 20px;
	padding: 14px 16px;
	background: rgba(139, 154, 208, 0.10);
	border: 1px solid rgba(139, 154, 208, 0.35);
	border-radius: var(--radius-sm);
	font-size: 14px;
	line-height: 1.6;
	color: #c9ceda;
}
.notice.is-shown { display: block; }

/* ==========================================================================
   CLIENT PORTAL
   ========================================================================== */

.signed-in-badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 6px 13px;
	background: rgba(139, 154, 208, 0.10);
	border: 1px solid rgba(139, 154, 208, 0.30);
	border-radius: 999px;
	font-family: var(--font-display);
	font-size: 12px;
	letter-spacing: 0.06em;
	color: var(--text-dim);
	white-space: nowrap;
}
.signed-in-badge::before {
	content: '';
	width: 6px; height: 6px;
	border-radius: 50%;
	background: #7fb08a;
}
.signed-in-badge b { font-weight: 500; color: var(--text-head); }

.nav__form { display: flex; }

/* ── client identity band ── */

.client-band {
	position: relative;
	overflow: hidden;
	padding: 44px var(--gutter) 40px;
	background: var(--ink);
	border-bottom: 1px solid var(--rule);
}
.client-band__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 26px;
}

/* A light tile, so any client's mark keeps its own colours on the dark ground. */
.client-logo {
	flex: none;
	width: 168px;
	height: 92px;
	padding: 14px 18px;
	background: #ffffff;
	border-radius: var(--radius);
	object-fit: contain;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* ── folder cards ── */

.folder {
	display: flex;
	flex-direction: column;
	padding: 28px;
	background: var(--panel-raised);
	border: 1px solid rgba(237, 234, 226, 0.09);
	border-radius: 18px;
	transition: transform 0.2s, border-color 0.2s;
}
.folder:hover {
	transform: translateY(-3px);
	border-color: rgba(198, 162, 83, 0.4);
	color: inherit;
}
.folder:hover .folder__open { color: var(--accent); }

.folder__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
}

.folder__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px; height: 44px;
	border-radius: 12px;
	background: rgba(198, 162, 83, 0.10);
	border: 1px solid rgba(198, 162, 83, 0.24);
	color: var(--accent);
}
.folder__icon--periwinkle {
	background: rgba(139, 154, 208, 0.10);
	border-color: rgba(139, 154, 208, 0.26);
	color: var(--periwinkle);
}
.folder__icon--sage {
	background: rgba(143, 169, 143, 0.10);
	border-color: rgba(143, 169, 143, 0.26);
	color: #8fa98f;
}

.folder__count {
	font-family: var(--font-display);
	font-size: 11px;
	letter-spacing: 0.12em;
	color: var(--text-fainter);
	white-space: nowrap;
}

.folder h3 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 19px;
	line-height: 1.25;
	color: var(--text-head);
}
.folder > p {
	margin-top: 9px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--text-dim);
}

.folder__preview { margin-top: 18px; }
.folder__item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 0;
	border-top: 1px solid rgba(237, 234, 226, 0.07);
}
.folder__item > span:first-child {
	font-size: 14px;
	color: #c9ceda;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.folder__item > span:last-child {
	flex: none;
	font-family: var(--font-display);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--text-fainter);
}
.folder__item--more > span { font-size: 12.5px; color: var(--periwinkle); }

.folder__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid rgba(237, 234, 226, 0.07);
	font-size: 12px;
	color: var(--text-fainter);
}
.folder__preview + .folder__foot { margin-top: 18px; }
.folder__open {
	font-family: var(--font-display);
	font-size: 13px;
	color: var(--periwinkle);
	transition: color 0.2s;
}

/* ── folder page ── */

.back-link {
	display: inline-block;
	margin-bottom: 26px;
	font-family: var(--font-display);
	font-size: 13.5px;
	color: var(--text-faint);
}
.back-link:hover { color: var(--accent); }

.folder-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 18px;
}
.folder-head__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
	margin-left: auto;
}

.search-input {
	width: 280px;
	padding: 12px 16px;
	background: var(--panel);
	border-radius: 999px;
	font-size: 14px;
}
.search-input::-webkit-search-cancel-button { cursor: pointer; }

/* "clear it" inside the no-matches copy */
.link-button {
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.portal-note {
	margin-top: 32px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--text-fainter);
}
.portal-note a { color: var(--accent); }

.doc-list {
	margin-top: 32px;
	border-top: 1px solid var(--rule);
}

.doc {
	display: grid;
	grid-template-columns: auto 1fr auto auto auto;
	align-items: center;
	gap: 18px;
	padding: 18px 16px;
	border-bottom: 1px solid var(--rule);
	transition: background 0.2s;
}
.doc:hover { background: var(--panel); color: inherit; }
.doc:hover .doc__action { color: var(--accent); }

.doc__icon { flex: none; width: 22px; height: 22px; color: var(--periwinkle); }
.doc__name {
	font-size: 15px;
	color: var(--text-head);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.doc__meta {
	font-family: var(--font-display);
	font-size: 12.5px;
	color: var(--text-fainter);
	white-space: nowrap;
}
.doc__meta--date { min-width: 96px; text-align: right; }
.doc__action {
	font-family: var(--font-display);
	font-size: 13px;
	color: var(--periwinkle);
	white-space: nowrap;
	transition: color 0.2s;
}

.empty {
	margin-top: 40px;
	padding: 40px 32px;
	background: var(--panel);
	border: 1px solid var(--rule);
	border-radius: 16px;
	text-align: center;
}
.empty__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 18px;
	color: var(--text-head);
}
.empty p + p {
	max-width: 460px;
	margin: 10px auto 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--text-dim);
}
.empty code {
	padding: 2px 6px;
	background: var(--ink);
	border-radius: 5px;
	font-size: 13px;
	color: var(--accent);
}

@media (max-width: 900px) {
	.client-logo { width: 132px; height: 74px; }
	.client-band { padding: 32px var(--gutter) 28px; }
}

@media (max-width: 700px) {
	.folder-head__aside {
		align-items: stretch;
		width: 100%;
		margin-left: 0;
	}
	.search-input { width: 100%; }
	.folder-head__aside .folder__count { text-align: right; }

	.doc {
		grid-template-columns: auto 1fr;
		gap: 8px 14px;
	}
	.doc__name { grid-column: 2; }
	.doc__meta, .doc__action { grid-column: 2; font-size: 12px; }
	.doc__meta--date { text-align: left; min-width: 0; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer {
	padding: 48px var(--gutter);
	background: var(--ink-deep);
	border-top: 1px solid rgba(237, 234, 226, 0.07);
}
.footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: 1180px;
	margin: 0 auto;
}
.footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	font-size: 14px;
	color: var(--text-faint);
}
.footer__links a:hover { color: var(--text-head); }
.footer__copy { font-size: 13px; color: var(--text-fainter); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1080px) {
	.grid--hero,
	.grid--split,
	.grid--case,
	.grid--contact,
	.grid--signin { grid-template-columns: minmax(0, 1fr); gap: 36px; }

	.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.grid--gap-xl { gap: 36px; }

	.tab-panel.is-open { grid-template-columns: 1fr; }
	.tab-panel__body { padding: 36px 32px; }
	.tab-panel__figure { border-left: 0; border-top: 1px solid var(--rule); min-height: 300px; }

	/* The hero schematic is tall and narrow; cap it once it is full width. */
	.figure--hero { max-width: 460px; }
}

@media (max-width: 900px) {
	:root { --gutter: 24px; --nav-h: 67px; }

	.nav { flex-wrap: wrap; }
	.nav__toggle { display: block; }

	.nav__links {
		display: none;
		flex-basis: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		padding: 14px 0 6px;
		margin-top: 14px;
		border-top: 1px solid var(--rule);
		font-size: 15px;
	}
	.nav__links.is-open { display: flex; }
	.nav__links > a:not(.btn) { padding: 11px 2px; }
	.nav__links .btn { justify-content: flex-start; margin-top: 8px; }

	.section { padding: 72px var(--gutter); }
	.section--hero { padding: 64px var(--gutter) 56px; }
	.section--page-head { padding: 64px var(--gutter) 56px; }
	.section--flush-top { padding-top: 0; }
	.section--form { padding: 8px var(--gutter) 72px; }

	.grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
	.form-grid { grid-template-columns: 1fr; }

	.flow__row--split { gap: 60px; }
	.footer__inner { justify-content: flex-start; }
}

@media (max-width: 560px) {
	.logo--nav { width: 176px; height: 28px; }

	.card, .card--lg { padding: 24px 22px; }
	.form-panel { padding: 24px 20px; }
	.signin-card { padding: 28px 22px; }
	.tab-panel__body { padding: 28px 22px; }
	.quote-panel--lg { padding: 24px; }
	.stat { padding: 24px; }
	.teaser { padding: 24px; }

	.tabs { gap: 8px; }
	.tab { padding: 10px 15px; font-size: 13px; }

	.btn { padding: 14px 22px; font-size: 15px; width: 100%; }
	.btn--sm, .btn--portal { width: auto; }
	.btn-row { gap: 12px; }

	.reach-inline { gap: 14px; flex-direction: column; align-items: flex-start; }
	.btn-row--center .btn { width: 100%; }
	.flow__row { flex-wrap: wrap; justify-content: center; }
	.flow__row--split { gap: 40px; }
}

body:not(.with-captcha) .grecaptcha-badge { opacity:0;}