/* =============================================================
 * UsedCarBase — Main stylesheet (dark theme)
 *
 * Overrides GeneratePress light defaults with a deep-green dark palette.
 * Structure:
 *   0. Fonts (locally-hosted Inter, 5 weights)
 *   1. Tokens & resets
 *   2. Typography
 *   3. Layout primitives (container, section, grid)
 *   4. Buttons & badges
 *   5. Site header + mobile drawer
 *   6. Site footer + floating WhatsApp FAB
 *   7. Shared components (hero, card, stats, kicker, form)
 *   8. Page-specific sections (added by later templates)
 *   9. Utilities & responsive adjustments
 * ============================================================= */

/* ============ 0. Fonts — locally hosted Inter (no CDN) ============ */
@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter-ExtraBold.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

/* ============ 1. Tokens & resets ============ */
:root {
	/* Primary — brand green (60%) */
	--green-primary: #1D9E75;
	--green-deep:    #0F6E56;
	--green-light:   #9FE1CB;
	--green-bg:      rgba(29, 158, 117, 0.10);
	--green-border:  rgba(29, 158, 117, 0.30);

	/* Secondary — warm amber (15%) */
	--amber-primary: #E8A942;
	--amber-deep:    #B97818;
	--amber-bright:  #FCDE5A;
	--amber-bg:      rgba(232, 169, 66, 0.10);
	--amber-border:  rgba(232, 169, 66, 0.35);

	/* Neutral — blue-gray (20%) */
	--graysteel:      #8FA8B5;
	--graysteel-deep: #4A6472;
	--graysteel-bg:   rgba(143, 168, 181, 0.10);

	/* Accent — champagne (rare) */
	--champagne:      #D9C8A8;

	/* Backgrounds */
	--bg-base:    #0A0F0D;
	--bg-surface: #0F1612;
	--bg-deep:    #070B09;
	--bg-elev:    #131B17;

	/* Text */
	--text-strong: #F2F5F3;
	--text-base:   #C9D2CD;
	--text-muted:  #8A938E;
	--text-faint:  #5F6763;

	/* Borders & dividers */
	--border-soft: rgba(255, 255, 255, 0.06);
	--border-med:  rgba(255, 255, 255, 0.10);

	/* Radii */
	--r-xs: 4px;
	--r-sm: 8px;
	--r-md: 12px;
	--r-lg: 20px;
	--r-xl: 28px;

	/* Spacing scale */
	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-5: 24px;
	--s-6: 32px;
	--s-7: 48px;
	--s-8: 64px;
	--s-9: 96px;

	/* Container */
	--maxw: 1200px;

	/* Transitions */
	--t-fast: 140ms ease;
	--t-med:  240ms ease;

	/* Fonts — Inter for everything, with deep system fallback incl. CJK */
	--font-head: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

/* --- GeneratePress / base reset overrides --- */
html { scroll-behavior: smooth; }
body.ucb-body {
	background: var(--bg-base);
	color: var(--text-base);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body.ucb-body a { color: var(--green-light); text-decoration: none; transition: color var(--t-fast); }
body.ucb-body a:hover { color: var(--green-primary); }

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

/* Drop the default GeneratePress site container constraints — we do our own. */
.ucb-body .site,
.ucb-body .site-content,
.ucb-body #page {
	background: var(--bg-base);
	max-width: none;
	padding: 0;
	margin: 0;
}
.ucb-body .inside-article,
.ucb-body .inside-content,
.ucb-body .inside-page-header,
.ucb-body .entry-content,
.ucb-body .site-main {
	padding: 0;
	margin: 0;
	max-width: none;
	background: transparent;
}
.ucb-body .site-main > article { background: transparent; }
.ucb-body .entry-header { display: none; }

/* Hide GeneratePress default header + footer — we render our own. */
.ucb-body > .site > .site-header,
.ucb-body > .site > .site-footer,
.ucb-body > #page > .site-header,
.ucb-body > #page > .site-footer { display: none; }

/* Form element baseline for dark theme. */
input, textarea, select, button {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}
input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
input[type="number"], input[type="search"], textarea, select {
	background: var(--bg-surface);
	border: 1px solid var(--border-med);
	color: var(--text-strong);
	padding: 12px 14px;
	border-radius: var(--r-sm);
	width: 100%;
	transition: border-color var(--t-fast), background var(--t-fast);
}
input:focus, textarea:focus, select:focus {
	outline: 0;
	border-color: var(--green-primary);
	background: var(--bg-elev);
}
textarea { min-height: 120px; resize: vertical; }

.ucb-skip-link {
	position: absolute; left: -9999px; top: 0;
	background: var(--green-primary); color: #fff;
	padding: 8px 12px; z-index: 9999;
}
.ucb-skip-link:focus { left: 12px; top: 12px; }

/* ============ 2. Typography ============ */
h1, h2, h3, h4, h5, .ucb-h1, .ucb-h2, .ucb-h3, .ucb-h4 {
	font-family: var(--font-head);
	font-weight: 800;
	color: var(--text-strong);
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0 0 var(--s-4);
}
.ucb-h1 { font-size: clamp(36px, 5.5vw, 56px); letter-spacing: -0.025em; font-weight: 800; }
.ucb-h2 { font-size: clamp(28px, 3.6vw, 38px); letter-spacing: -0.02em; font-weight: 700; }
.ucb-h3 { font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -0.015em; font-weight: 700; }
.ucb-h4 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }

p, .ucb-body p { margin: 0 0 var(--s-4); }
.ucb-lead { font-size: clamp(16px, 1.5vw, 18px); color: var(--text-base); max-width: 640px; }

.ucb-kicker {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	font-family: var(--font-head);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--amber-primary);
	margin: 0 0 var(--s-4);
}
.ucb-kicker--green { color: var(--green-primary); }

.ucb-text-green  { color: var(--green-primary); }
.ucb-text-amber  { color: var(--amber-primary); }
.ucb-text-gray   { color: var(--graysteel); }
.ucb-text-muted  { color: var(--text-muted); }
.ucb-text-strong { color: var(--text-strong); }
.ucb-small       { font-size: 13px; }

/* ============ 3. Layout primitives ============ */
.ucb-container {
	width: 100%;
	max-width: var(--maxw);
	padding-left: var(--s-5);
	padding-right: var(--s-5);
	margin-left: auto;
	margin-right: auto;
}
@media (min-width: 1024px) {
	.ucb-container { padding-left: var(--s-7); padding-right: var(--s-7); }
}

.ucb-section {
	padding-top: clamp(48px, 7vw, 96px);
	padding-bottom: clamp(48px, 7vw, 96px);
}
.ucb-section--tight   { padding-top: clamp(32px, 5vw, 64px); padding-bottom: clamp(32px, 5vw, 64px); }
.ucb-section--surface { background: var(--bg-surface); }
.ucb-section--deep    { background: var(--bg-deep); }

.ucb-grid      { display: grid; gap: var(--s-5); }
.ucb-grid--2   { grid-template-columns: 1fr; }
.ucb-grid--3   { grid-template-columns: 1fr; }
.ucb-grid--4   { grid-template-columns: 1fr; }
@media (min-width: 720px) {
	.ucb-grid--2 { grid-template-columns: repeat(2, 1fr); }
	.ucb-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.ucb-grid--4 { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
}
@media (min-width: 1024px) {
	.ucb-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.ucb-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.ucb-cta-row { display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* ============ 4. Buttons & badges ============ */
.ucb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	padding: 14px 22px;
	border-radius: 999px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 15px;
	line-height: 1;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform var(--t-fast), background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
	text-decoration: none;
	white-space: nowrap;
}
.ucb-btn:hover { transform: translateY(-1px); }
.ucb-btn--primary { background: var(--green-primary); color: #fff; }
.ucb-btn--primary:hover { background: var(--green-deep); color: #fff; }
.ucb-btn--amber   { background: var(--amber-primary); color: #20160A; }
.ucb-btn--amber:hover { background: var(--amber-deep); color: #fff; }
.ucb-btn--ghost {
	background: transparent;
	border-color: var(--border-med);
	color: var(--text-strong);
}
.ucb-btn--ghost:hover { border-color: var(--green-primary); color: var(--green-primary); background: var(--green-bg); }
.ucb-btn--sm { padding: 9px 16px; font-size: 13px; }
.ucb-btn--block { width: 100%; }

/* Badges & tags */
.ucb-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	font-family: var(--font-head);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: 999px;
	border: 1px solid transparent;
}
.ucb-badge--green { background: var(--green-bg);  color: var(--green-primary); border-color: var(--green-border); }
.ucb-badge--amber { background: var(--amber-bg);  color: var(--amber-primary); border-color: var(--amber-border); }
.ucb-badge--gray  { background: var(--graysteel-bg); color: var(--graysteel); border-color: rgba(143,168,181,0.25); }

/* ============ 5. Site header ============ */
.ucb-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(10, 15, 13, 0.88);
	backdrop-filter: saturate(140%) blur(12px);
	-webkit-backdrop-filter: saturate(140%) blur(12px);
	border-bottom: 1px solid var(--border-soft);
}
.ucb-site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 68px;
	gap: var(--s-5);
}
.ucb-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--s-3);
	color: var(--text-strong);
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 20px;
	letter-spacing: -0.01em;
}
.ucb-brand:hover { color: var(--text-strong); }
.ucb-brand__accent { color: var(--green-primary); }

.ucb-primary-nav {
	display: flex;
	align-items: center;
	gap: var(--s-5);
}
.ucb-menu {
	list-style: none;
	display: flex;
	gap: var(--s-5);
	padding: 0;
	margin: 0;
}
.ucb-menu a {
	color: var(--text-base);
	font-size: 14px;
	font-weight: 500;
	padding: 8px 2px;
	position: relative;
}
.ucb-menu a:hover { color: var(--text-strong); }
.ucb-menu .current-menu-item > a,
.ucb-menu .current_page_item > a {
	color: var(--text-strong);
}
.ucb-menu .current-menu-item > a::after,
.ucb-menu .current_page_item > a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -4px;
	height: 2px;
	background: var(--green-primary);
	border-radius: 2px;
}

.ucb-nav-toggle {
	display: none;
	background: transparent;
	border: 0;
	padding: 8px;
	cursor: pointer;
}
.ucb-nav-toggle span {
	display: block;
	width: 22px;
	height: 2px;
	margin: 5px 0;
	background: var(--text-strong);
	border-radius: 2px;
	transition: transform var(--t-fast), opacity var(--t-fast);
}

@media (max-width: 880px) {
	.ucb-nav-toggle { display: block; }
	.ucb-primary-nav {
		position: fixed;
		inset: 68px 0 0 0;
		background: var(--bg-base);
		flex-direction: column;
		align-items: stretch;
		padding: var(--s-5);
		transform: translateY(-100%);
		opacity: 0;
		visibility: hidden;
		transition: transform var(--t-med), opacity var(--t-med), visibility var(--t-med);
		overflow-y: auto;
	}
	.ucb-primary-nav.is-open {
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
	}
	.ucb-menu {
		flex-direction: column;
		gap: 0;
	}
	.ucb-menu a {
		display: block;
		padding: var(--s-4) 0;
		font-size: 18px;
		border-bottom: 1px solid var(--border-soft);
	}
	.ucb-nav-cta { margin-top: var(--s-4); align-self: flex-start; }
	.ucb-nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.ucb-nav-toggle.is-active span:nth-child(2) { opacity: 0; }
	.ucb-nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ============ 6. Site footer & floating FAB ============ */
.ucb-site-footer {
	background: var(--bg-deep);
	border-top: 1px solid var(--border-soft);
	padding: var(--s-9) 0 var(--s-6);
	margin-top: var(--s-9);
}
.ucb-footer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-7);
}
@media (min-width: 720px) {
	.ucb-footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-6); }
}
.ucb-footer-col .ucb-brand { margin-bottom: var(--s-3); font-size: 18px; }
.ucb-footer-h {
	font-family: var(--font-head);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 0 0 var(--s-4);
}
.ucb-footer-blurb { color: var(--text-base); max-width: 360px; margin-bottom: var(--s-4); font-size: 14px; }
.ucb-footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.ucb-footer-links a,
.ucb-footer-link { color: var(--text-base); font-size: 14px; }
.ucb-footer-links a:hover,
.ucb-footer-link:hover { color: var(--green-primary); }
.ucb-footer-p { font-size: 14px; margin: 0 0 var(--s-2); }
.ucb-footer-bottom {
	margin-top: var(--s-7);
	padding-top: var(--s-5);
	border-top: 1px solid var(--border-soft);
	display: flex;
	justify-content: space-between;
	gap: var(--s-3);
	flex-wrap: wrap;
}
.ucb-footer-bottom p { margin: 0; font-size: 13px; color: var(--text-muted); }
.ucb-socials { display: flex; gap: var(--s-3); }
.ucb-socials a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: 50%;
	background: var(--bg-surface); color: var(--text-base);
	font-size: 11px; font-weight: 700;
	border: 1px solid var(--border-soft);
}
.ucb-socials a:hover { color: var(--green-primary); border-color: var(--green-border); }

.ucb-whatsapp-fab {
	position: fixed;
	right: max(16px, env(safe-area-inset-right));
	bottom: max(20px, env(safe-area-inset-bottom));
	width: 56px; height: 56px;
	border-radius: 50%;
	background: #25D366;
	color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	box-shadow: 0 12px 28px rgba(37, 211, 102, 0.35);
	z-index: 90;
	transition: transform var(--t-fast);
}
.ucb-whatsapp-fab:hover { transform: scale(1.06); color: #fff; }

/* ============ 7. Shared components ============ */

/* Hero */
.ucb-hero {
	position: relative;
	overflow: hidden;
	padding-top: clamp(56px, 8vw, 120px);
	padding-bottom: clamp(48px, 7vw, 96px);
	background:
		radial-gradient(1200px 600px at 85% -20%, rgba(29,158,117,0.18), transparent 70%),
		radial-gradient(900px 500px at 10% 110%, rgba(232,169,66,0.10), transparent 70%),
		var(--bg-base);
}
.ucb-hero--compact { padding-top: var(--s-8); padding-bottom: var(--s-7); }
.ucb-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-7);
	align-items: center;
}
@media (min-width: 1024px) {
	.ucb-hero__grid { grid-template-columns: 1.1fr 1fr; }
}
.ucb-hero__illu { position: relative; min-height: 280px; }
.ucb-hero__illu svg { width: 100%; height: auto; display: block; }

/* Cards */
.ucb-card {
	background: var(--bg-surface);
	border: 1px solid var(--border-soft);
	border-radius: var(--r-lg);
	padding: var(--s-6);
	transition: border-color var(--t-fast), transform var(--t-fast);
}
.ucb-card:hover { border-color: var(--border-med); }
.ucb-card--featured {
	border-top: 2px solid var(--green-primary);
	box-shadow: 0 0 0 1px var(--green-border), 0 24px 60px rgba(0,0,0,0.35);
	position: relative;
}
.ucb-card__kicker {
	font-family: var(--font-head);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
	display: block;
	margin-bottom: var(--s-3);
}
.ucb-card__title { font-family: var(--font-head); font-weight: 800; font-size: 22px; margin: 0 0 var(--s-3); color: var(--text-strong); }
.ucb-card__body  { color: var(--text-base); font-size: 15px; margin: 0 0 var(--s-4); }

/* Stat blocks */
.ucb-stat {
	padding: var(--s-5);
	border-radius: var(--r-md);
	border: 1px solid var(--border-soft);
	background: var(--bg-surface);
	text-align: center;
}
.ucb-stat__value {
	display: block;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: clamp(32px, 4vw, 44px);
	line-height: 1;
	margin-bottom: var(--s-2);
}
.ucb-stat--green .ucb-stat__value { color: var(--green-primary); }
.ucb-stat--amber .ucb-stat__value { color: var(--amber-primary); }
.ucb-stat__label {
	display: block;
	font-size: 12px;
	font-family: var(--font-head);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
}

/* Local banner */
.ucb-banner {
	position: relative;
	background: var(--bg-surface);
	border: 1px solid var(--border-soft);
	border-left: 3px solid var(--green-primary);
	border-radius: var(--r-lg);
	padding: var(--s-7);
	overflow: hidden;
}
.ucb-banner::after {
	content: "GH";
	position: absolute;
	right: var(--s-6);
	bottom: -10px;
	font-family: var(--font-head);
	font-size: 140px;
	font-weight: 800;
	color: var(--amber-bg);
	letter-spacing: -0.05em;
	pointer-events: none;
}

/* Forms rendered by CF7 */
.wpcf7 form { display: grid; gap: var(--s-4); }
.wpcf7 p { margin: 0; }
.wpcf7 label { display: block; font-size: 13px; color: var(--text-base); margin-bottom: 6px; font-weight: 500; }
.wpcf7 label .req { color: var(--amber-primary); }
.wpcf7-not-valid-tip { color: #FF7A7A; font-size: 13px; margin-top: 4px; }
.wpcf7-response-output {
	margin: var(--s-4) 0 0;
	padding: var(--s-4);
	border-radius: var(--r-sm);
	background: var(--bg-surface);
	border: 1px solid var(--border-soft);
	color: var(--text-strong);
}

/* Prose (for .post-content etc) */
.ucb-prose { color: var(--text-base); line-height: 1.75; }
.ucb-prose h2 { margin-top: var(--s-7); }
.ucb-prose h3 { margin-top: var(--s-6); }
.ucb-prose ul, .ucb-prose ol { padding-left: 1.25em; }
.ucb-prose li { margin-bottom: var(--s-2); }
.ucb-prose a { color: var(--green-primary); text-decoration: underline; text-underline-offset: 3px; }

/* Utility — hide visually but keep for screen readers */
.ucb-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}

/* Divider */
.ucb-divider { height: 1px; background: var(--border-soft); margin: var(--s-7) 0; }

/* Main element wrapper */
.ucb-main { min-height: 50vh; }

/* ============ 8. Home page sections ============ */

/* Section head */
.ucb-section__head { text-align: center; margin: 0 auto var(--s-7); max-width: 760px; }
.ucb-section__head p.ucb-lead { margin-left: auto; margin-right: auto; }
.ucb-section__head--row {
	text-align: left;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--s-4);
	max-width: none;
	flex-wrap: wrap;
}

/* Hero illustration */
.ucb-home-hero .ucb-hero__illu { position: relative; }
.ucb-hero__car-svg {
	width: 100%;
	max-width: 640px;
	margin-left: auto;
	filter: drop-shadow(0 30px 40px rgba(0,0,0,0.4));
}
@media (max-width: 1023px) {
	.ucb-hero__grid { text-align: left; }
	.ucb-hero__illu { order: 2; }
}

/* Paths teaser grid */
.ucb-paths-grid .ucb-path-card {
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}
.ucb-paths-grid .ucb-path-card__illu {
	margin-bottom: var(--s-3);
	background: linear-gradient(180deg, var(--bg-elev), var(--bg-surface));
	border-radius: var(--r-md);
	padding: var(--s-4) var(--s-5);
	border: 1px solid var(--border-soft);
}
.ucb-paths-grid .ucb-path-card__illu svg { width: 100%; height: 140px; display: block; }
.ucb-card--featured .ucb-path-card__illu {
	background: linear-gradient(180deg, rgba(29,158,117,0.12), var(--bg-surface));
	border-color: var(--green-border);
}

/* Audience two-column */
.ucb-audience {
	display: grid;
	gap: var(--s-7);
	grid-template-columns: 1fr;
}
@media (min-width: 880px) {
	.ucb-audience { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
}
.ucb-audience__col {
	padding: var(--s-6);
	background: var(--bg-base);
	border: 1px solid var(--border-soft);
	border-radius: var(--r-lg);
}

/* Service promise grid */
.ucb-promise-grid .ucb-promise-card {
	padding: var(--s-5);
	text-align: left;
}
.ucb-promise-grid .ucb-promise-card__icon {
	width: 60px; height: 60px;
	margin-bottom: var(--s-4);
}
.ucb-promise-grid .ucb-promise-card__icon svg { width: 100%; height: 100%; }
.ucb-promise-grid .ucb-h4 { margin-bottom: var(--s-2); }

/* Team badge strip */
.ucb-team-badge {
	margin-top: var(--s-7);
	display: inline-flex;
	align-items: center;
	gap: var(--s-4);
	padding: var(--s-4) var(--s-5);
	background: var(--bg-surface);
	border: 1px solid var(--border-soft);
	border-radius: 999px;
}
.ucb-team-badge__avatars { display: flex; }
.ucb-avatar {
	width: 32px; height: 32px;
	border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--font-head);
	font-size: 11px;
	font-weight: 700;
	color: #0A0F0D;
	margin-left: -10px;
	border: 2px solid var(--bg-deep);
}
.ucb-avatar:first-child { margin-left: 0; }
.ucb-avatar--green { background: var(--green-primary); }
.ucb-avatar--amber { background: var(--amber-primary); }

/* Vehicle card */
.ucb-vehicle-card {
	background: var(--bg-surface);
	border: 1px solid var(--border-soft);
	border-radius: var(--r-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform var(--t-fast), border-color var(--t-fast);
}
.ucb-vehicle-card:hover { transform: translateY(-3px); border-color: var(--border-med); }

.ucb-vehicle-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--bg-deep);
	overflow: hidden;
}
.ucb-vehicle-card__img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 400ms ease;
}
.ucb-vehicle-card:hover .ucb-vehicle-card__img { transform: scale(1.04); }

.ucb-vehicle-card__placeholder {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 100%;
	background: linear-gradient(135deg, var(--bg-elev), var(--bg-surface));
}
.ucb-vehicle-card__placeholder svg { width: 80%; height: 80%; opacity: 0.75; }

.ucb-vehicle-card__badge {
	position: absolute;
	top: var(--s-3); left: var(--s-3);
	backdrop-filter: blur(8px);
}
.ucb-vehicle-card__chips {
	position: absolute;
	top: var(--s-3); right: var(--s-3);
	display: flex; gap: 6px;
}
.ucb-chip {
	display: inline-flex;
	padding: 4px 8px;
	font-family: var(--font-head);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 999px;
	backdrop-filter: blur(10px);
	background: rgba(10,15,13,0.6);
	border: 1px solid var(--border-med);
}
.ucb-chip--amber { color: var(--amber-primary); border-color: var(--amber-border); }
.ucb-chip--gray  { color: var(--graysteel);     border-color: rgba(143,168,181,0.35); }

.ucb-vehicle-card__body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.ucb-vehicle-card__meta { margin: 0; font-size: 12px; color: var(--text-muted); letter-spacing: 0.05em; }
.ucb-vehicle-card__meta span + span { margin-left: 4px; }
.ucb-vehicle-card__title {
	font-family: var(--font-head);
	font-size: 20px;
	font-weight: 800;
	margin: 0;
	line-height: 1.2;
}
.ucb-vehicle-card__title a { color: var(--text-strong); }
.ucb-vehicle-card__title a:hover { color: var(--green-primary); }
.ucb-vehicle-card__specs {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	color: var(--text-muted);
	font-size: 13px;
}
.ucb-vehicle-card__specs li::before { content: "·"; margin-right: 8px; color: var(--text-faint); }
.ucb-vehicle-card__specs li:first-child::before { content: ""; margin: 0; }
.ucb-vehicle-card__foot {
	margin-top: auto;
	padding-top: var(--s-3);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-2);
	border-top: 1px solid var(--border-soft);
}
.ucb-vehicle-card__price {
	font-family: var(--font-head);
	font-size: 22px;
	font-weight: 800;
	color: var(--green-primary);
}
.ucb-vehicle-card__price-note {
	font-size: 11px;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* Banner heading colour override (inside dark card) */
.ucb-banner .ucb-h2 { color: var(--text-strong); position: relative; z-index: 1; }

/* ============ 9. Inventory page ============ */
.ucb-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-5);
	margin-bottom: var(--s-6);
	padding: var(--s-4) var(--s-5);
	background: var(--bg-surface);
	border: 1px solid var(--border-soft);
	border-radius: var(--r-lg);
}
.ucb-filter__group {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	flex-wrap: wrap;
}
.ucb-filter__label {
	font-family: var(--font-head);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-right: 4px;
}
.ucb-filter__chip {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: 999px;
	border: 1px solid var(--border-med);
	background: transparent;
	color: var(--text-base);
	font-size: 13px;
	font-family: var(--font-body);
	cursor: pointer;
	transition: all var(--t-fast);
}
.ucb-filter__chip:hover { border-color: var(--green-border); color: var(--text-strong); }
.ucb-filter__chip.is-active {
	background: var(--green-primary);
	color: #fff;
	border-color: var(--green-primary);
}

.ucb-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--s-3);
	padding: var(--s-8) var(--s-5);
	text-align: center;
	background: var(--bg-surface);
	border: 1px dashed var(--border-med);
	border-radius: var(--r-lg);
}

/* ============ 10. Single vehicle ============ */
.ucb-breadcrumb {
	padding: var(--s-4) 0;
	font-size: 13px;
	color: var(--text-muted);
	border-bottom: 1px solid var(--border-soft);
}
.ucb-breadcrumb > .ucb-container { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ucb-breadcrumb a { color: var(--text-muted); }
.ucb-breadcrumb a:hover { color: var(--green-primary); }
.ucb-breadcrumb__current { color: var(--text-strong); }

.ucb-vehicle-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-7);
	align-items: start;
}
@media (min-width: 1024px) {
	.ucb-vehicle-hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-8); }
	.ucb-vehicle-hero__info { position: sticky; top: 90px; }
}

.ucb-vehicle-gallery { display: flex; flex-direction: column; gap: var(--s-3); }
.ucb-vehicle-gallery__main {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--r-lg);
	overflow: hidden;
	background: var(--bg-deep);
	border: 1px solid var(--border-soft);
}
.ucb-vehicle-gallery__img,
.ucb-vehicle-gallery__placeholder {
	width: 100%; height: 100%;
	display: block;
	object-fit: cover;
}
.ucb-vehicle-gallery__placeholder {
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, var(--bg-elev), var(--bg-surface));
}
.ucb-vehicle-gallery__placeholder svg { width: 70%; height: auto; opacity: 0.8; }
.ucb-vehicle-hero__badge {
	position: absolute;
	top: var(--s-4); left: var(--s-4);
	backdrop-filter: blur(8px);
}
.ucb-vehicle-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--s-2);
}
@media (max-width: 520px) {
	.ucb-vehicle-gallery__thumbs { grid-template-columns: repeat(4, 1fr); }
}
.ucb-vehicle-gallery__thumb {
	padding: 0;
	aspect-ratio: 1 / 1;
	border: 1px solid var(--border-soft);
	border-radius: var(--r-sm);
	background: var(--bg-deep);
	cursor: pointer;
	overflow: hidden;
	transition: border-color var(--t-fast), transform var(--t-fast);
}
.ucb-vehicle-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ucb-vehicle-gallery__thumb:hover { transform: translateY(-2px); }
.ucb-vehicle-gallery__thumb.is-active { border-color: var(--green-primary); box-shadow: 0 0 0 1px var(--green-primary); }

.ucb-vehicle-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--s-3);
	padding: var(--s-5) var(--s-5);
	background: var(--bg-surface);
	border: 1px solid var(--green-border);
	border-radius: var(--r-lg);
	margin: var(--s-4) 0 var(--s-5);
}
.ucb-vehicle-price__label {
	font-family: var(--font-head);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.ucb-vehicle-price__value {
	font-family: var(--font-head);
	font-size: 36px;
	font-weight: 800;
	color: var(--green-primary);
	line-height: 1;
}
.ucb-vehicle-price__note {
	font-size: 13px;
	color: var(--amber-primary);
	background: var(--amber-bg);
	padding: 4px 10px;
	border-radius: 999px;
	border: 1px solid var(--amber-border);
}

.ucb-spec-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--s-4) var(--s-5);
	margin: 0 0 var(--s-5);
}
@media (min-width: 520px) {
	.ucb-spec-grid { grid-template-columns: repeat(3, 1fr); }
}
.ucb-spec { border-left: 2px solid var(--border-soft); padding-left: var(--s-3); }
.ucb-spec__label {
	display: block;
	font-size: 11px;
	font-family: var(--font-head);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 0 0 4px;
}
.ucb-spec__value { color: var(--text-strong); font-size: 15px; margin: 0; font-weight: 500; }

.ucb-verify {
	list-style: none;
	padding: var(--s-4);
	margin: 0 0 var(--s-5);
	background: var(--bg-surface);
	border-radius: var(--r-md);
	border: 1px solid var(--border-soft);
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	font-size: 14px;
	color: var(--text-base);
}
.ucb-verify li { display: flex; align-items: center; gap: var(--s-2); margin: 0; }
.ucb-verify__tick {
	display: inline-flex; align-items: center; justify-content: center;
	width: 20px; height: 20px;
	border-radius: 50%;
	background: var(--green-bg);
	border: 1px solid var(--green-border);
	color: var(--green-primary);
	font-size: 11px;
	font-weight: 700;
}

/* Video */
.ucb-video-wrap {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--r-lg);
	overflow: hidden;
	background: var(--bg-deep);
	border: 1px solid var(--border-soft);
}
.ucb-video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Report */
.ucb-report {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-6);
	padding: var(--s-7);
	background: var(--bg-surface);
	border: 1px solid var(--border-soft);
	border-radius: var(--r-lg);
}
.ucb-report__text .ucb-lead { max-width: 620px; }
.ucb-report__stats {
	display: flex;
	gap: var(--s-5);
	flex-wrap: wrap;
	margin: var(--s-5) 0 var(--s-5);
}
.ucb-report__stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: var(--s-4) var(--s-5);
	background: var(--bg-deep);
	border-radius: var(--r-md);
	border: 1px solid var(--border-soft);
	min-width: 120px;
}
.ucb-report__stat-value {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 32px;
	line-height: 1;
	color: var(--text-strong);
}
.ucb-report__stat-label {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted);
	font-family: var(--font-head);
	font-weight: 700;
}

/* CTA banner */
.ucb-cta-banner {
	text-align: center;
	max-width: 680px;
	margin: 0 auto;
}
.ucb-cta-banner .ucb-lead { margin-left: auto; margin-right: auto; }
.ucb-cta-banner .ucb-btn { margin-top: var(--s-4); }

/* Description */
.ucb-vehicle-description { max-width: 760px; }

/* ============ 11. Dealers page ============ */
.ucb-steps-grid { counter-reset: ucbstep; }
.ucb-step {
	padding: var(--s-6);
	background: var(--bg-base);
	border: 1px solid var(--border-soft);
	border-radius: var(--r-lg);
	position: relative;
}
.ucb-step__num {
	display: inline-block;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 36px;
	line-height: 1;
	margin-bottom: var(--s-3);
}
.ucb-step h3 { margin-bottom: var(--s-3); }
.ucb-step p { color: var(--text-base); margin: 0; }

.ucb-dealers-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-8);
	align-items: start;
}
@media (min-width: 1024px) {
	.ucb-dealers-layout { grid-template-columns: 1.2fr 1fr; gap: var(--s-9); }
	.ucb-dealers-benefits { position: sticky; top: 96px; }
}
.ucb-form-card {
	background: var(--bg-surface);
	border: 1px solid var(--border-soft);
	border-radius: var(--r-lg);
	padding: var(--s-6);
	margin-top: var(--s-5);
}
.ucb-form-row { margin: 0; }
.wpcf7 form { gap: var(--s-4); }
.ucb-form-row--submit { margin-top: var(--s-3); }
@media (min-width: 720px) {
	.ucb-form-card .wpcf7 form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
	.ucb-form-row { grid-column: 1 / -1; }
	.ucb-form-row--half { grid-column: span 1; }
}
.wpcf7 .req { color: var(--amber-primary); margin-left: 4px; }

.ucb-benefit-list {
	list-style: none;
	padding: 0;
	margin: var(--s-5) 0 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}
.ucb-benefit-list li { display: flex; gap: var(--s-3); align-items: flex-start; }
.ucb-benefit-list strong { display: block; color: var(--text-strong); font-weight: 600; margin-bottom: 2px; }
.ucb-benefit-list__tick {
	flex: 0 0 24px;
	width: 24px; height: 24px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	font-size: 12px; font-weight: 700;
}
.ucb-benefit-list__tick--green { background: var(--green-bg); border: 1px solid var(--green-border); color: var(--green-primary); }
.ucb-benefit-list__tick--amber { background: var(--amber-bg); border: 1px solid var(--amber-border); color: var(--amber-primary); }

/* ============ 12. Service page ============ */
.ucb-office {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-6);
	align-items: center;
	padding: var(--s-7);
	background: var(--bg-surface);
	border: 1px solid var(--amber-border);
	border-radius: var(--r-lg);
}
@media (min-width: 720px) {
	.ucb-office { grid-template-columns: 220px 1fr; }
}
.ucb-office__map svg { width: 100%; height: auto; max-width: 200px; margin: 0 auto; display: block; }
.ucb-office__meta { display: flex; flex-direction: column; gap: var(--s-3); margin: var(--s-4) 0 var(--s-5); }
.ucb-office__meta > div { display: flex; gap: var(--s-4); align-items: baseline; }
.ucb-office__meta dt { font-family: var(--font-head); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); min-width: 120px; }
.ucb-office__meta dd { margin: 0; color: var(--text-base); }

.ucb-paths-full .ucb-path-full { display: flex; flex-direction: column; gap: var(--s-3); }
.ucb-feature-list { list-style: none; padding: 0; margin: var(--s-3) 0 var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); }
.ucb-feature-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-base); line-height: 1.55; }

.ucb-agency-steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-4);
	max-width: 820px;
	margin: 0 auto;
}
.ucb-agency-step {
	display: flex;
	gap: var(--s-4);
	align-items: flex-start;
	padding: var(--s-5);
	background: var(--bg-surface);
	border: 1px solid var(--border-soft);
	border-radius: var(--r-md);
}
.ucb-agency-step__num {
	flex: 0 0 48px;
	width: 48px; height: 48px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--green-bg);
	border: 1px solid var(--green-border);
	color: var(--green-primary);
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 16px;
}

.ucb-team-card { padding: var(--s-6); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--s-3); background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--r-lg); }
.ucb-team-card__avatar { width: 64px; height: 64px; font-size: 16px; margin: 0; border: 0; }
.ucb-team-card h3 { margin: 0; }

/* ============ 13. How It Works ============ */
.ucb-flow {
	padding: var(--s-6);
	background: var(--bg-base);
	border: 1px solid var(--border-soft);
	border-radius: var(--r-lg);
}
.ucb-flow__track {
	display: grid;
	grid-template-columns: repeat(6, minmax(90px, 1fr));
	gap: var(--s-3);
	overflow-x: auto;
	padding-bottom: var(--s-3);
	position: relative;
}
@media (max-width: 720px) {
	.ucb-flow__track { grid-template-columns: repeat(6, 120px); }
}
.ucb-flow__node {
	position: relative;
	padding: var(--s-4) var(--s-3);
	background: var(--bg-surface);
	border: 1px solid var(--border-soft);
	border-radius: var(--r-md);
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.ucb-flow__node::after {
	content: "→";
	position: absolute;
	right: calc( -1 * var(--s-3) );
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-faint);
	font-size: 14px;
}
.ucb-flow__node:last-child::after { display: none; }
.ucb-flow__node--green { border-color: var(--green-border); }
.ucb-flow__node--amber { border-color: var(--amber-border); background: linear-gradient(180deg, var(--amber-bg), var(--bg-surface)); }
.ucb-flow__num {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 18px;
	line-height: 1;
}
.ucb-flow__node--green .ucb-flow__num { color: var(--green-primary); }
.ucb-flow__node--amber .ucb-flow__num { color: var(--amber-primary); }
.ucb-flow__label {
	font-family: var(--font-head);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-strong);
}
.ucb-flow__range { font-size: 11px; color: var(--text-muted); }

.ucb-flow__legend {
	display: flex;
	gap: var(--s-5);
	flex-wrap: wrap;
	margin-top: var(--s-4);
	font-size: 13px;
	color: var(--text-muted);
}

/* Region labels above the flow track */
.ucb-flow__regions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-3);
	margin-bottom: var(--s-3);
	position: relative;
}
.ucb-flow__regions::before {
	content: "";
	position: absolute;
	left: 50%; top: 0; bottom: -6px;
	width: 1px;
	background: var(--border-med);
}
.ucb-flow__region-label { margin: 0; }
@media (max-width: 720px) { .ucb-flow__regions { display: none; } }
.ucb-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.ucb-dot--green { background: var(--green-primary); }
.ucb-dot--amber { background: var(--amber-primary); }

.ucb-steps-detail {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-5);
	max-width: 820px;
	margin-inline: auto;
}
.ucb-step-detail {
	padding: var(--s-6);
	background: var(--bg-surface);
	border: 1px solid var(--border-soft);
	border-radius: var(--r-lg);
	border-left: 3px solid var(--border-med);
}
.ucb-step-detail--green { border-left-color: var(--green-primary); }
.ucb-step-detail--amber { border-left-color: var(--amber-primary); }
.ucb-step-detail__head {
	display: flex;
	gap: var(--s-4);
	align-items: flex-start;
	margin-bottom: var(--s-3);
}
.ucb-step-detail__num {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 40px;
	line-height: 1;
	color: var(--text-faint);
	flex: 0 0 auto;
}
.ucb-step-detail--green .ucb-step-detail__num { color: var(--green-primary); }
.ucb-step-detail--amber .ucb-step-detail__num { color: var(--amber-primary); }
.ucb-step-detail__head .ucb-badge { margin-top: var(--s-2); }
.ucb-step-detail__note {
	margin-top: var(--s-3);
	padding: var(--s-3) var(--s-4);
	background: var(--bg-deep);
	border-radius: var(--r-sm);
	font-size: 13px;
	color: var(--text-muted);
	font-style: italic;
}

/* FAQ */
.ucb-faq {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	max-width: 820px;
	margin-inline: auto;
}
.ucb-faq__item {
	background: var(--bg-surface);
	border: 1px solid var(--border-soft);
	border-radius: var(--r-md);
	overflow: hidden;
}
.ucb-faq__q {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--s-4);
	width: 100%;
	padding: var(--s-5);
	background: transparent;
	border: 0;
	color: var(--text-strong);
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
}
.ucb-faq__q:hover { color: var(--green-primary); }
.ucb-faq__plus {
	font-family: var(--font-head);
	font-size: 22px;
	font-weight: 800;
	color: var(--green-primary);
	transition: transform var(--t-fast);
}
.ucb-faq__item.is-open .ucb-faq__plus { transform: rotate(45deg); }
.ucb-faq__a {
	max-height: 0;
	overflow: hidden;
	transition: max-height var(--t-med);
	padding: 0 var(--s-5);
}
.ucb-faq__item.is-open .ucb-faq__a {
	max-height: 400px;
	padding-bottom: var(--s-5);
}
.ucb-faq__a p { margin: 0; color: var(--text-base); }

/* ============ 14. About page ============ */
.ucb-value-card {
	position: relative;
	padding: var(--s-6);
	border-left: 3px solid var(--border-med);
}
.ucb-value-card--green { border-left-color: var(--green-primary); }
.ucb-value-card--amber { border-left-color: var(--amber-primary); }
.ucb-value-card__num {
	display: block;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 32px;
	line-height: 1;
	color: var(--text-faint);
	margin-bottom: var(--s-3);
}
.ucb-value-card--green .ucb-value-card__num { color: var(--green-primary); }
.ucb-value-card--amber .ucb-value-card__num { color: var(--amber-primary); }

.ucb-timeline {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-5);
	position: relative;
	padding-left: var(--s-6);
	max-width: 780px;
	margin-inline: auto;
}
.ucb-timeline::before {
	content: "";
	position: absolute;
	left: 10px; top: 10px; bottom: 10px;
	width: 2px;
	background: linear-gradient(180deg, var(--green-primary), var(--amber-primary), var(--green-primary));
	opacity: 0.5;
	border-radius: 2px;
}
.ucb-timeline__item {
	position: relative;
	padding: var(--s-4) var(--s-5);
	background: var(--bg-surface);
	border: 1px solid var(--border-soft);
	border-radius: var(--r-md);
}
.ucb-timeline__node {
	position: absolute;
	left: calc( -1 * var(--s-6) + 3px );
	top: 50%;
	transform: translateY(-50%);
	width: 16px; height: 16px;
	border-radius: 50%;
	border: 3px solid var(--bg-base);
	box-shadow: 0 0 0 2px var(--border-med);
}
.ucb-timeline__item--green .ucb-timeline__node { background: var(--green-primary); box-shadow: 0 0 0 2px var(--green-border); }
.ucb-timeline__item--amber .ucb-timeline__node { background: var(--amber-primary); box-shadow: 0 0 0 2px var(--amber-border); }
.ucb-timeline__body h3 { margin: var(--s-2) 0; }

/* ============ 15. Inter type adjustments (applied last so they win) ============
 * Switching from Syne (display) + DM Sans (body) to Inter single-family:
 * - Uppercase kickers/badges read better at 600 than 700 in Inter.
 * - Buttons go 500 → 600 for firmer UI weight.
 * - Letter-spacing on kickers already tightened globally from 0.2–0.25em → 0.08–0.1em.
 */
.ucb-kicker,
.ucb-card__kicker,
.ucb-footer-h,
.ucb-filter__label,
.ucb-chip,
.ucb-badge,
.ucb-stat__label,
.ucb-spec__label,
.ucb-flow__label,
.ucb-office__meta dt,
.ucb-report__stat-label,
.ucb-socials a,
.ucb-vehicle-card__price-note,
.ucb-vehicle-price__label {
	font-weight: 600;
}
.ucb-btn { font-weight: 600; }

