/* VoitureBelgique Portal Hubs — local, dependency-free archive presentation. */
.vbph-hub-page {
	--vbph-accent: #137333;
	--vbph-accent-dark: #0d652d;
	--vbph-accent-rgb: 19, 115, 51;
	--vbph-highlight: #f9ab00;
	--vbph-soft: #eef5f1;
	--vbph-asphalt: #202124;
	--vbph-ink: #3c4043;
	--vbph-muted: #5f6368;
	--vbph-subtle: #7b8085;
	--vbph-line: #dadce0;
	--vbph-paper: #fff;
	--vbph-canvas: #f8f9fa;
	--vbph-shell: min(1160px, calc(100vw - 48px));
	--vbph-radius: 18px;
	--vbph-shadow: 0 18px 44px rgba(32, 33, 36, .09);
}

.vbph-pillar-reliability { --vbph-accent: #9a6700; --vbph-accent-dark: #765000; --vbph-accent-rgb: 154, 103, 0; --vbph-soft: #fff7e0; --vbph-highlight: #f9ab00; }
.vbph-pillar-paperwork { --vbph-accent: #00796b; --vbph-accent-dark: #00695c; --vbph-accent-rgb: 0, 121, 107; --vbph-soft: #e9f5f3; --vbph-highlight: #81c995; }
.vbph-pillar-driving { --vbph-accent: #2f6b3f; --vbph-accent-dark: #245432; --vbph-accent-rgb: 47, 107, 63; --vbph-soft: #edf4ed; --vbph-highlight: #fbbc04; }
.vbph-pillar-maintenance { --vbph-accent: #6b5b45; --vbph-accent-dark: #514433; --vbph-accent-rgb: 107, 91, 69; --vbph-soft: #f4f1ec; --vbph-highlight: #f9ab00; }
.vbph-pillar-electric { --vbph-accent: #00796b; --vbph-accent-dark: #00695c; --vbph-accent-rgb: 0, 121, 107; --vbph-soft: #e8f5f2; --vbph-highlight: #a8d57a; }
.vbph-pillar-crossborder { --vbph-accent: #8a6d1d; --vbph-accent-dark: #6b5314; --vbph-accent-rgb: 138, 109, 29; --vbph-soft: #f8f3e4; --vbph-highlight: #81c995; }

body.vbph-hub-page #inner-wrap { background: var(--vbph-canvas); }
.vbph-hub { background: var(--vbph-canvas); color: var(--vbph-ink); overflow: hidden; }
.vbph-shell { margin-inline: auto; width: var(--vbph-shell); }
.vbph-hub :where(a) { text-underline-offset: 3px; }
.vbph-hub :where(a, button):focus-visible { outline: 3px solid var(--vbph-highlight); outline-offset: 3px; }
.vbph-icon { display: inline-block; flex: 0 0 auto; height: 1.25em; vertical-align: -.25em; width: 1.25em; }

.vbph-hero {
	background:
		radial-gradient(circle at 83% 16%, rgba(var(--vbph-accent-rgb), .34), transparent 31%),
		linear-gradient(124deg, #181a1c 0%, var(--vbph-asphalt) 55%, #262a27 100%);
	color: #fff;
	overflow: hidden;
	padding: 24px 0 58px;
	position: relative;
}
.vbph-hero::after { border: 1px solid rgba(255,255,255,.08); border-radius: 50%; content: ""; height: 520px; position: absolute; right: -180px; top: -290px; width: 520px; }
.vbph-breadcrumbs { color: rgba(255,255,255,.68); font-size: 12px; font-weight: 600; margin-bottom: 42px; position: relative; z-index: 2; }
.vbph-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.vbph-breadcrumbs li:not(:last-child)::after { color: rgba(255,255,255,.4); content: "/"; margin-left: 8px; }
.vbph-breadcrumbs a { color: #fff; text-decoration: none; }
.vbph-breadcrumbs a:hover { color: var(--vbph-highlight); }
.vbph-hero__grid { align-items: end; display: grid; gap: clamp(38px, 6vw, 86px); grid-template-columns: minmax(0, 1.5fr) minmax(280px, .65fr); position: relative; z-index: 2; }
.vbph-eyebrow { align-items: center; color: var(--vbph-accent); display: flex; font-size: 11px; font-weight: 800; gap: 9px; letter-spacing: .12em; margin: 0 0 15px; text-transform: uppercase; }
.vbph-eyebrow > span { background: currentColor; height: 2px; width: 24px; }
.vbph-hero .vbph-eyebrow { color: var(--vbph-highlight); }
body.vbph-hub-page .vbph-hero h1 { color: #fff; font-size: clamp(42px, 5.8vw, 72px); letter-spacing: -.055em; line-height: .98; margin: 0; max-width: 820px; }
.vbph-hero__description { color: rgba(255,255,255,.83); font-size: clamp(17px, 2vw, 20px); line-height: 1.55; margin: 24px 0 0; max-width: 720px; }
.vbph-hero__promise { color: #fff; font-size: 14px; font-weight: 700; margin: 12px 0 0; }
.vbph-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.vbph-button { align-items: center; border: 1px solid transparent; border-radius: 10px; display: inline-flex; font-size: 13px; font-weight: 750; gap: 9px; justify-content: center; min-height: 48px; padding: 11px 17px; text-decoration: none; transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.vbph-button:hover { transform: translateY(-2px); }
body.vbph-hub-page .vbph-button--primary { background: var(--vbph-accent); color: #fff; }
body.vbph-hub-page .vbph-button--primary:hover { background: var(--vbph-accent-dark); color: #fff; }
body.vbph-hub-page .vbph-button--ghost { border-color: rgba(255,255,255,.32); color: #fff; }
body.vbph-hub-page .vbph-button--ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }
.vbph-hero__stats { border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; gap: 0; margin-top: 36px; padding-top: 19px; }
.vbph-hero__stats > span { color: rgba(255,255,255,.62); display: flex; flex-direction: column; font-size: 11px; line-height: 1.35; min-width: 132px; padding: 0 22px; }
.vbph-hero__stats > span:first-child { padding-left: 0; }
.vbph-hero__stats > span + span { border-left: 1px solid rgba(255,255,255,.14); }
.vbph-hero__stats strong { color: #fff; font-size: 15px; font-weight: 750; }
.vbph-starter { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: var(--vbph-radius); box-shadow: 0 22px 60px rgba(0,0,0,.18); padding: 27px; position: relative; }
.vbph-starter__icon { align-items: center; background: var(--vbph-accent); border-radius: 13px; color: #fff; display: flex; height: 48px; justify-content: center; margin-bottom: 23px; width: 48px; }
.vbph-starter__icon .vbph-icon { height: 25px; width: 25px; }
.vbph-starter > p { color: var(--vbph-highlight); font-size: 10px; font-weight: 800; letter-spacing: .11em; margin: 0 0 5px; text-transform: uppercase; }
body.vbph-hub-page .vbph-starter h2 { color: #fff; font-size: 22px; letter-spacing: -.025em; margin: 0 0 19px; }
.vbph-starter ol { list-style: none; margin: 0; padding: 0; }
.vbph-starter li { align-items: center; border-top: 1px solid rgba(255,255,255,.12); display: grid; gap: 12px; grid-template-columns: 30px 1fr; min-height: 46px; }
.vbph-starter li span { color: var(--vbph-highlight); font-size: 10px; font-weight: 800; }
.vbph-starter li a { color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; }
.vbph-starter li a:hover { color: var(--vbph-highlight); }

.vbph-section { padding-block: 76px; }
.vbph-section-heading { align-items: end; display: flex; gap: 32px; justify-content: space-between; margin-bottom: 32px; }
body.vbph-hub-page .vbph-section-heading h2 { color: var(--vbph-asphalt); font-size: clamp(29px, 3.6vw, 44px); letter-spacing: -.045em; line-height: 1.08; margin: 0; }
.vbph-section-heading > p { color: var(--vbph-muted); font-size: 14px; line-height: 1.55; margin: 0 0 3px; max-width: 370px; }

.vbph-featured { background: var(--vbph-canvas); }
.vbph-featured__grid { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vbph-guide-card { background: var(--vbph-paper); border: 1px solid var(--vbph-line); border-radius: var(--vbph-radius); display: flex; flex-direction: column; min-width: 0; overflow: hidden; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.vbph-guide-card:hover { border-color: rgba(var(--vbph-accent-rgb), .44); box-shadow: var(--vbph-shadow); transform: translateY(-4px); }
.vbph-guide-card__media { aspect-ratio: 16 / 8.8; background: var(--vbph-asphalt); color: #fff; display: block; overflow: hidden; position: relative; text-decoration: none; }
.vbph-guide-card__media img { height: 100%; object-fit: cover; transition: transform .3s ease; width: 100%; }
.vbph-guide-card:hover .vbph-guide-card__media img { transform: scale(1.025); }
.vbph-visual-placeholder { align-items: flex-end; background: linear-gradient(135deg, #242628 0%, #303632 56%, var(--vbph-accent-dark) 150%); display: flex; height: 100%; justify-content: space-between; overflow: hidden; padding: 19px; position: relative; width: 100%; }
.vbph-visual-placeholder::before { border: 1px solid rgba(255,255,255,.12); border-radius: 50%; content: ""; height: 190px; position: absolute; right: -54px; top: -74px; width: 190px; }
.vbph-visual-placeholder::after { background: var(--vbph-accent); bottom: 0; content: ""; height: 5px; left: 0; position: absolute; width: 74px; }
.vbph-visual-placeholder > span:last-child { color: rgba(255,255,255,.72); font-size: 9px; font-weight: 800; letter-spacing: .1em; max-width: 64%; position: relative; text-align: right; text-transform: uppercase; z-index: 1; }
.vbph-visual-placeholder__icon { align-items: center; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; display: flex; height: 55px; justify-content: center; position: relative; width: 55px; z-index: 1; }
.vbph-visual-placeholder__icon .vbph-icon { height: 28px; width: 28px; }
.vbph-guide-card__body { display: flex; flex: 1; flex-direction: column; padding: 22px; }
.vbph-guide-card__section { color: var(--vbph-accent); font-size: 10px; font-weight: 800; letter-spacing: .08em; margin-bottom: 10px; text-decoration: none; text-transform: uppercase; }
body.vbph-hub-page .vbph-guide-card h3 { font-size: 20px; letter-spacing: -.025em; line-height: 1.25; margin: 0 0 12px; }
.vbph-guide-card h3 a { color: var(--vbph-asphalt); text-decoration: none; }
.vbph-guide-card h3 a:hover { color: var(--vbph-accent); }
.vbph-guide-card__body > p { color: var(--vbph-muted); font-size: 13px; line-height: 1.6; margin: 0 0 20px; }
.vbph-guide-card__meta { border-top: 1px solid var(--vbph-line); color: var(--vbph-subtle); display: flex; flex-wrap: wrap; font-size: 10px; gap: 6px; margin-top: auto; padding-top: 13px; }

.vbph-topics { background: var(--vbph-soft); border-block: 1px solid rgba(var(--vbph-accent-rgb), .15); scroll-margin-top: 30px; }
.vbph-topic-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vbph-topic-card { background: var(--vbph-paper); border: 1px solid var(--vbph-line); border-radius: 15px; display: flex; flex-direction: column; min-height: 300px; padding: 23px; position: relative; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.vbph-topic-card::after { background: var(--vbph-accent); bottom: 0; content: ""; height: 4px; left: 0; position: absolute; transform: scaleX(0); transform-origin: left; transition: transform .18s ease; width: 100%; }
.vbph-topic-card:hover { border-color: rgba(var(--vbph-accent-rgb), .42); box-shadow: 0 12px 30px rgba(32,33,36,.08); transform: translateY(-3px); }
.vbph-topic-card:hover::after { transform: scaleX(1); }
.vbph-topic-card__top { align-items: center; display: flex; justify-content: space-between; margin-bottom: 18px; }
.vbph-topic-card__top span { align-items: center; background: var(--vbph-soft); border-radius: 9px; color: var(--vbph-accent); display: flex; font-size: 11px; font-weight: 850; height: 36px; justify-content: center; width: 36px; }
.vbph-topic-card__top small { color: var(--vbph-subtle); font-size: 10px; font-weight: 700; }
body.vbph-hub-page .vbph-topic-card h3 { font-size: 19px; letter-spacing: -.02em; line-height: 1.25; margin: 0 0 10px; }
.vbph-topic-card h3 a { color: var(--vbph-asphalt); text-decoration: none; }
.vbph-topic-card h3 a:hover { color: var(--vbph-accent); }
.vbph-topic-card > p { color: var(--vbph-muted); font-size: 13px; line-height: 1.55; margin: 0 0 17px; }
.vbph-topic-card__latest { border-top: 1px solid var(--vbph-line); display: flex; flex-direction: column; gap: 5px; margin-top: auto; padding-top: 14px; }
.vbph-topic-card__latest span { color: var(--vbph-accent); font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.vbph-topic-card__latest a { color: var(--vbph-ink); display: -webkit-box; font-size: 11px; font-weight: 650; line-height: 1.4; overflow: hidden; text-decoration: none; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.vbph-topic-card__link { align-items: center; color: var(--vbph-accent); display: inline-flex; font-size: 11px; font-weight: 800; gap: 6px; margin-top: 16px; text-decoration: none; }

.vbph-content { align-items: start; display: grid; gap: 34px; grid-template-columns: minmax(0, 1fr) 290px; }
.vbph-latest { min-width: 0; scroll-margin-top: 30px; }
.vbph-guide-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vbph-guide-grid .vbph-guide-card__media { aspect-ratio: 16 / 7.7; }
.vbph-guide-grid .vbph-guide-card h3 { font-size: 18px; }
.vbph-sidebar { display: grid; gap: 18px; padding-top: 76px; position: sticky; top: 22px; }
.vbph-sidebar__card, .vbph-method-card, .vbph-ad-slot { background: var(--vbph-paper); border: 1px solid var(--vbph-line); border-radius: 15px; padding: 22px; }
body.vbph-hub-page .vbph-sidebar h2 { color: var(--vbph-asphalt); font-size: 20px; letter-spacing: -.025em; margin: 0 0 16px; }
.vbph-sidebar__card ul { list-style: none; margin: 0; padding: 0; }
.vbph-sidebar__card li { border-top: 1px solid var(--vbph-line); }
.vbph-sidebar__card li a { align-items: center; color: var(--vbph-ink); display: grid; font-size: 12px; font-weight: 650; gap: 10px; grid-template-columns: 1fr auto; min-height: 42px; text-decoration: none; }
.vbph-sidebar__card li a:hover { color: var(--vbph-accent); }
.vbph-sidebar__card li strong { align-items: center; background: var(--vbph-soft); border-radius: 999px; color: var(--vbph-accent); display: flex; font-size: 9px; height: 24px; justify-content: center; min-width: 24px; padding-inline: 6px; }
.vbph-method-card { background: var(--vbph-asphalt); border-color: var(--vbph-asphalt); color: #fff; }
.vbph-method-card__mark { align-items: center; background: var(--vbph-accent); border-radius: 11px; display: flex; font-size: 13px; font-weight: 850; height: 42px; justify-content: center; margin-bottom: 18px; width: 42px; }
.vbph-method-card > p { color: var(--vbph-highlight); font-size: 9px; font-weight: 800; letter-spacing: .1em; margin: 0 0 6px; text-transform: uppercase; }
body.vbph-hub-page .vbph-method-card h2 { color: #fff; font-size: 22px; line-height: 1.2; }
.vbph-method-card ul { color: rgba(255,255,255,.76); font-size: 11px; line-height: 1.55; list-style: none; margin: 0 0 18px; padding: 0; }
.vbph-method-card li { padding: 4px 0 4px 18px; position: relative; }
.vbph-method-card li::before { color: var(--vbph-highlight); content: "✓"; font-weight: 800; left: 0; position: absolute; }
.vbph-method-card > a { align-items: center; color: #fff; display: inline-flex; font-size: 11px; font-weight: 750; gap: 6px; text-decoration: none; }
.vbph-method-card > a:hover { color: var(--vbph-highlight); }
.vbph-ad-slot > span { color: var(--vbph-subtle); display: block; font-size: 9px; letter-spacing: .1em; margin-bottom: 8px; text-align: center; text-transform: uppercase; }

.vbph-hub .navigation.pagination { margin-top: 34px; }
.vbph-hub .nav-links { display: flex; flex-wrap: wrap; gap: 7px; }
.vbph-hub .page-numbers { align-items: center; background: var(--vbph-paper); border: 1px solid var(--vbph-line); border-radius: 8px; color: var(--vbph-ink); display: inline-flex; font-size: 12px; font-weight: 700; justify-content: center; min-height: 38px; min-width: 38px; padding: 7px 11px; text-decoration: none; }
.vbph-hub .page-numbers.current, .vbph-hub a.page-numbers:hover { background: var(--vbph-accent); border-color: var(--vbph-accent); color: #fff; }
.vbph-empty { background: var(--vbph-paper); border: 1px dashed var(--vbph-line); border-radius: var(--vbph-radius); padding: 32px; }
body.vbph-hub-page .vbph-empty h3 { margin-top: 0; }

/* Professional child-category hubs ------------------------------------- */
.vbph-subhero {
	background:
		radial-gradient(circle at 88% 14%, rgba(var(--vbph-accent-rgb), .32), transparent 29%),
		linear-gradient(128deg, #181a1c 0%, var(--vbph-asphalt) 63%, #292e2a 100%);
	color: #fff;
	overflow: hidden;
	padding: 23px 0 52px;
	position: relative;
}
.vbph-subhero::after { border: 1px solid rgba(255,255,255,.08); border-radius: 50%; content: ""; height: 440px; position: absolute; right: -132px; top: -260px; width: 440px; }
.vbph-subhero .vbph-breadcrumbs { margin-bottom: 34px; }
.vbph-subhero__grid { align-items: stretch; display: grid; gap: clamp(34px, 5vw, 72px); grid-template-columns: minmax(0, 1.5fr) minmax(285px, .62fr); position: relative; z-index: 2; }
.vbph-subhero__copy { align-self: center; }
.vbph-subhero__parent { align-items: center; color: var(--vbph-highlight); display: inline-flex; font-size: 10px; font-weight: 800; gap: 8px; letter-spacing: .11em; margin-bottom: 17px; text-decoration: none; text-transform: uppercase; }
.vbph-subhero__parent:hover { color: #fff; }
.vbph-subhero__parent .vbph-icon { height: 18px; width: 18px; }
body.vbph-hub-page .vbph-subhero h1 { color: #fff; font-size: clamp(40px, 5vw, 62px); letter-spacing: -.052em; line-height: 1; margin: 0; max-width: 780px; }
.vbph-subhero__description { color: rgba(255,255,255,.78); font-size: clamp(16px, 1.8vw, 19px); line-height: 1.6; margin: 21px 0 0; max-width: 720px; }
.vbph-subhero__actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 27px; }
.vbph-subhero__stats { border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; margin-top: 30px; padding-top: 17px; }
.vbph-subhero__stats span { color: rgba(255,255,255,.61); display: flex; flex-direction: column; font-size: 10px; line-height: 1.4; min-width: 160px; padding: 0 21px; }
.vbph-subhero__stats span:first-child { padding-left: 0; }
.vbph-subhero__stats span + span { border-left: 1px solid rgba(255,255,255,.14); }
.vbph-subhero__stats strong { color: #fff; font-size: 14px; }
.vbph-subhero__method { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: var(--vbph-radius); padding: 26px; }
.vbph-subhero__method-icon { align-items: center; background: var(--vbph-accent); border-radius: 12px; color: #fff; display: flex; height: 45px; justify-content: center; margin-bottom: 19px; width: 45px; }
.vbph-subhero__method-icon .vbph-icon { height: 23px; width: 23px; }
.vbph-subhero__method > p { color: var(--vbph-highlight); font-size: 9px; font-weight: 800; letter-spacing: .1em; margin: 0 0 7px; text-transform: uppercase; }
body.vbph-hub-page .vbph-subhero__method h2 { color: #fff; font-size: 19px; letter-spacing: -.02em; line-height: 1.3; margin: 0 0 17px; }
.vbph-subhero__method ul { border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.72); font-size: 11px; line-height: 1.5; list-style: none; margin: 0; padding: 13px 0 0; }
.vbph-subhero__method li { padding: 5px 0 5px 18px; position: relative; }
.vbph-subhero__method li::before { color: var(--vbph-highlight); content: "✓"; font-weight: 800; left: 0; position: absolute; }

.vbph-sibling-nav { background: var(--vbph-paper); border-bottom: 1px solid var(--vbph-line); box-shadow: 0 8px 24px rgba(32,33,36,.04); }
.vbph-sibling-nav > .vbph-shell { align-items: center; display: grid; gap: 18px; grid-template-columns: auto minmax(0, 1fr); min-height: 76px; }
.vbph-sibling-nav > .vbph-shell > span { color: var(--vbph-subtle); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.vbph-sibling-nav > .vbph-shell > div { display: flex; gap: 8px; overflow-x: auto; padding: 10px 2px; scrollbar-width: thin; }
.vbph-sibling-nav a { align-items: center; border: 1px solid var(--vbph-line); border-radius: 999px; color: var(--vbph-ink); display: inline-flex; flex: 0 0 auto; font-size: 11px; font-weight: 700; gap: 7px; min-height: 36px; padding: 7px 11px; text-decoration: none; }
.vbph-sibling-nav a:hover, .vbph-sibling-nav a.is-current { background: var(--vbph-soft); border-color: rgba(var(--vbph-accent-rgb), .38); color: var(--vbph-accent); }
.vbph-sibling-nav a small { align-items: center; background: var(--vbph-soft); border-radius: 999px; color: var(--vbph-accent); display: inline-flex; font-size: 8px; height: 20px; justify-content: center; min-width: 20px; padding-inline: 5px; }
.vbph-sibling-nav a.is-current small { background: var(--vbph-accent); color: #fff; }

.vbph-brand-tool { padding-bottom: 0; }
.vbph-brand-tool .vb-brand-finder { margin-bottom: 0; }
.vbph-brand-tool .vb-brand-guides-heading { display: none; }
.vbph-brand-tool + .vbph-subguide-section { padding-top: 54px; }
.vbph-brand-tool .vbph-brand-finder { border-color: rgba(var(--vbph-accent-rgb), .22); box-shadow: 0 20px 50px rgba(32,33,36,.08); }
.vbph-brand-tool .vb-brand-finder__intro { background: linear-gradient(135deg, #fff 0%, var(--vbph-soft) 100%); gap: 46px; grid-template-columns: minmax(0, 1.1fr) minmax(340px, .8fr); }
.vbph-brand-tool .vb-brand-finder__intro::after { background: var(--vbph-accent); width: 118px; }
.vbph-brand-tool .vb-brand-finder__heading .vb-eyebrow { color: var(--vbph-accent); }
body.vbph-hub-page .vbph-brand-tool .vb-brand-finder__heading h2 { color: var(--vbph-asphalt); }
.vbph-brand-tool .vb-brand-finder__heading > p:last-child { color: var(--vbph-muted); }
.vbph-brand-tool .vb-brand-finder__search-wrap > label { color: var(--vbph-asphalt); }
.vbph-brand-tool .vb-brand-finder__search { border: 1px solid var(--vbph-line); box-shadow: 0 9px 24px rgba(32,33,36,.09); }
.vbph-brand-tool .vb-brand-finder__search:focus-within { border-color: var(--vbph-accent); box-shadow: 0 0 0 4px rgba(var(--vbph-accent-rgb),.12), 0 9px 24px rgba(32,33,36,.09); }
.vbph-brand-tool .vb-brand-finder__summary { color: var(--vbph-muted); }
.vbph-brand-featured { border-bottom: 1px solid var(--vbph-line); margin: 0 0 28px; padding: 0 0 30px; }
.vbph-brand-featured__heading { align-items: end; display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr) minmax(260px, .65fr); margin-bottom: 17px; }
.vbph-brand-featured__heading span { color: var(--vbph-accent); display: block; font-size: 9px; font-weight: 850; letter-spacing: .11em; margin-bottom: 5px; text-transform: uppercase; }
body.vbph-hub-page .vbph-brand-featured__heading h3 { color: var(--vbph-asphalt); font-size: clamp(20px, 2.3vw, 28px); letter-spacing: -.03em; line-height: 1.15; margin: 0; }
.vbph-brand-featured__heading p { color: var(--vbph-muted); font-size: 11px; line-height: 1.5; margin: 0; }
.vbph-brand-featured__grid { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vbph-brand-featured__grid > a { align-items: center; background: #fff; border: 1px solid rgba(var(--vbph-accent-rgb), .25); border-radius: 13px; color: var(--vbph-ink); display: grid; gap: 11px; grid-template-columns: 46px minmax(0, 1fr) auto; min-height: 76px; padding: 12px; text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.vbph-brand-featured__grid > a:hover { border-color: rgba(var(--vbph-accent-rgb), .55); box-shadow: 0 10px 25px rgba(32,33,36,.08); color: var(--vbph-ink); transform: translateY(-2px); }
.vbph-brand-featured__mark { align-items: center; background: var(--vbph-soft); border: 1px solid #e2e6e3; border-radius: 11px; display: flex; height: 46px; justify-content: center; width: 46px; }
.vbph-brand-featured__mark img { display: block; height: 29px; max-width: 31px; object-fit: contain; width: 29px; }
.vbph-brand-featured__mark .vbph-brand-monogram { color: var(--vbph-asphalt); font-size: 10px; font-weight: 850; }
.vbph-brand-featured__grid strong { color: var(--vbph-asphalt); display: block; font-size: 13px; line-height: 1.2; }
.vbph-brand-featured__grid small { color: var(--vbph-muted); display: block; font-size: 9px; line-height: 1.35; margin-top: 4px; }
.vbph-brand-featured__grid b { color: var(--vbph-accent); font-size: 16px; transition: transform .18s ease; }
.vbph-brand-featured__grid > a:hover b { transform: translateX(2px); }
.vbph-brand-tool .vb-brand-grid { gap: 11px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.vbph-brand-tool .vb-brand-card { background: #fff; border-color: var(--vbph-line); grid-template-columns: 44px minmax(0, 1fr) auto; min-height: 78px; padding: 12px; }
.vbph-brand-tool .vb-brand-card__mark { background: #fff; border: 1px solid #e3e6e4; border-radius: 11px; color: var(--vbph-asphalt); height: 44px; width: 44px; }
.vbph-brand-tool .vb-brand-card__mark img { display: block; height: 29px; max-width: 30px; object-fit: contain; width: 29px; }
.vbph-brand-tool .vbph-brand-monogram { font-size: 10px; font-weight: 850; letter-spacing: -.02em; }
.vbph-brand-tool .vb-brand-card__copy strong { font-size: 13px; }
.vbph-brand-tool .vb-brand-card__copy small { font-size: 9px; }
.vbph-brand-tool .vb-brand-card__arrow { color: var(--vbph-accent); }
.vbph-brand-tool .vb-brand-card.is-upcoming { background: #fafbfa; color: var(--vbph-ink); }
.vbph-brand-tool .vb-brand-card.is-upcoming .vb-brand-card__mark { background: #fff; color: var(--vbph-muted); }
.vbph-brand-tool .vb-brand-card.is-upcoming .vb-brand-card__mark img { opacity: .66; }
.vbph-brand-tool .vb-brand-card.is-available { border-color: rgba(var(--vbph-accent-rgb),.28); box-shadow: inset 0 -3px 0 rgba(var(--vbph-accent-rgb),.08); }
.vbph-brand-tool .vb-brand-card.is-available:hover { border-color: rgba(var(--vbph-accent-rgb),.52); }
.vbph-brand-tool .vb-brand-card.is-available:hover .vb-brand-card__mark { background: var(--vbph-soft); color: var(--vbph-accent); }

/* Electric-manufacturer discovery -------------------------------------- */
.vbph-electric-brands { background: linear-gradient(180deg, #f2f8f6 0%, #f8fbfa 100%); border-block: 1px solid rgba(var(--vbph-accent-rgb), .15); }
.vbph-electric-brands .vbph-section-heading { margin-bottom: 30px; }
.vbph-electric-brands .vbph-brand-finder { background: #fff; }
.vbph-electric-brands .vb-brand-finder__intro { background: linear-gradient(135deg, #fff 0%, #e4f4ef 100%); }
.vbph-electric-brands .vb-brand-finder__intro::after { background: var(--vbph-accent); }
body.vbph-hub-page .vbph-electric-brands .vb-brand-finder__heading h3 { color: var(--vbph-asphalt); font-size: clamp(25px, 3vw, 36px); letter-spacing: -.035em; line-height: 1.08; margin: 7px 0 13px; }
.vbph-electric-brands .vb-brand-finder__heading > p:last-child { color: var(--vbph-muted); }
.vbph-electric-brands .vbph-brand-featured__mark { background: #e5f4ef; border-color: #d2e8e0; }
.vbph-electric-brands .vb-brand-card.is-available { border-color: rgba(var(--vbph-accent-rgb), .29); box-shadow: inset 0 -3px 0 rgba(var(--vbph-accent-rgb), .08); }
.vbph-electric-brands__all { margin: 22px 0 0; text-align: center; }
.vbph-electric-brands__all .vbph-button { background: #fff; border-color: rgba(var(--vbph-accent-rgb), .38); color: var(--vbph-accent-dark); }
.vbph-electric-brands__all .vbph-button:hover { background: var(--vbph-accent); border-color: var(--vbph-accent); color: #fff; }

.vbph-subguide-section { scroll-margin-top: 24px; }
.vbph-subguide-grid { display: grid; gap: 19px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vbph-subguide-grid--count-1 { grid-template-columns: minmax(0, 760px); }
.vbph-subguide-grid--count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 850px; }
.vbph-subguide-grid .vbph-guide-card__media { aspect-ratio: 16 / 8; }
.vbph-subguide-grid .vbph-guide-card h3 { font-size: 19px; }
.vbph-subguide-grid--count-1 .vbph-guide-card { display: grid; grid-template-columns: minmax(250px, .75fr) minmax(0, 1fr); }
.vbph-subguide-grid--count-1 .vbph-guide-card__media { aspect-ratio: auto; min-height: 270px; }
.vbph-subguide-grid--count-1 .vbph-guide-card h3 { font-size: 24px; }

.vbph-related-topics { background: var(--vbph-soft); border-block: 1px solid rgba(var(--vbph-accent-rgb), .14); }
.vbph-parent-link { align-items: center; color: var(--vbph-accent); display: inline-flex; font-size: 12px; font-weight: 750; gap: 7px; text-decoration: none; white-space: nowrap; }
.vbph-related-topic-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vbph-related-topic { align-items: center; background: var(--vbph-paper); border: 1px solid var(--vbph-line); border-radius: 13px; color: var(--vbph-ink); display: grid; gap: 15px; grid-template-columns: 38px minmax(0, 1fr) auto; min-height: 100px; padding: 17px; text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.vbph-related-topic:hover { border-color: rgba(var(--vbph-accent-rgb), .4); box-shadow: 0 10px 26px rgba(32,33,36,.07); color: var(--vbph-ink); transform: translateY(-2px); }
.vbph-related-topic > span { align-items: center; background: var(--vbph-soft); border-radius: 9px; color: var(--vbph-accent); display: flex; font-size: 10px; font-weight: 850; height: 38px; justify-content: center; width: 38px; }
.vbph-related-topic strong { color: var(--vbph-asphalt); display: block; font-size: 14px; line-height: 1.3; }
.vbph-related-topic small { color: var(--vbph-muted); display: -webkit-box; font-size: 11px; line-height: 1.45; margin-top: 5px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.vbph-related-topic b { color: var(--vbph-accent); font-size: 16px; }

.vbph-trust { background: var(--vbph-paper); border-top: 1px solid var(--vbph-line); padding: 32px 0; }
.vbph-trust .vbph-shell { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vbph-trust .vbph-shell > div { align-items: center; display: grid; gap: 14px; grid-template-columns: 42px 1fr; padding: 7px 28px; }
.vbph-trust .vbph-shell > div + div { border-left: 1px solid var(--vbph-line); }
.vbph-trust .vbph-shell > div > span { align-items: center; background: var(--vbph-soft); border-radius: 11px; color: var(--vbph-accent); display: flex; height: 42px; justify-content: center; width: 42px; }
.vbph-trust p { color: var(--vbph-muted); font-size: 11px; line-height: 1.4; margin: 0; }
.vbph-trust strong { color: var(--vbph-asphalt); display: block; font-size: 13px; }

@media (max-width: 980px) {
	.vbph-hero__grid { align-items: stretch; grid-template-columns: 1fr; }
	.vbph-subhero__grid { grid-template-columns: 1fr; }
	.vbph-subhero__method { max-width: 640px; }
	.vbph-starter { max-width: 620px; }
	.vbph-topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vbph-subguide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vbph-subguide-grid--count-1 { grid-template-columns: minmax(0, 760px); }
	.vbph-content { grid-template-columns: 1fr; }
	.vbph-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 0 70px; position: static; }
	.vbph-ad-slot { grid-column: 1 / -1; }
	.vbph-trust .vbph-shell > div { padding-inline: 18px; }
	.vbph-brand-tool .vb-brand-finder__intro { grid-template-columns: 1fr; }
	.vbph-brand-featured__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.vbph-brand-tool .vb-brand-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
	.vbph-hub-page { --vbph-shell: min(100% - 32px, 1160px); }
	.vbph-hero { padding: 18px 0 42px; }
	.vbph-subhero { padding: 18px 0 40px; }
	.vbph-breadcrumbs { margin-bottom: 31px; }
	body.vbph-hub-page .vbph-hero h1 { font-size: clamp(38px, 12vw, 56px); }
	body.vbph-hub-page .vbph-subhero h1 { font-size: clamp(36px, 11vw, 50px); }
	.vbph-hero__description { font-size: 16px; }
	.vbph-subhero__description { font-size: 15px; }
	.vbph-hero__stats > span { min-width: 0; padding: 0 14px; }
	.vbph-sibling-nav > .vbph-shell { align-items: start; gap: 6px; grid-template-columns: 1fr; padding-block: 12px; }
	.vbph-sibling-nav > .vbph-shell > div { max-width: 100%; padding: 2px 1px 4px; }
	.vbph-section { padding-block: 56px; }
	.vbph-brand-tool .vb-brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vbph-brand-featured__heading { align-items: start; gap: 9px; grid-template-columns: 1fr; }
	.vbph-brand-featured__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vbph-brand-featured__grid > a { grid-template-columns: 40px minmax(0, 1fr); min-height: 70px; padding: 10px; }
	.vbph-brand-featured__mark { height: 40px; width: 40px; }
	.vbph-brand-featured__mark img { height: 25px; width: 25px; }
	.vbph-brand-featured__grid b { display: none; }
	.vbph-brand-tool .vb-brand-card { grid-template-columns: 38px minmax(0, 1fr); min-height: 72px; padding: 10px; }
	.vbph-brand-tool .vb-brand-card__mark { height: 38px; width: 38px; }
	.vbph-brand-tool .vb-brand-card__mark img { height: 25px; width: 25px; }
	.vbph-brand-tool .vb-brand-card__arrow { display: none; }
	.vbph-section-heading { align-items: start; flex-direction: column; gap: 11px; margin-bottom: 25px; }
	.vbph-featured__grid, .vbph-guide-grid { grid-template-columns: 1fr; }
	.vbph-subguide-grid, .vbph-subguide-grid--count-1, .vbph-subguide-grid--count-2 { grid-template-columns: 1fr; max-width: none; }
	.vbph-subguide-grid--count-1 .vbph-guide-card { display: flex; }
	.vbph-subguide-grid--count-1 .vbph-guide-card__media { aspect-ratio: 16 / 8; min-height: 0; }
	.vbph-related-topic-grid { grid-template-columns: 1fr; }
	.vbph-topic-grid { grid-template-columns: 1fr; }
	.vbph-topic-card { min-height: 0; }
	.vbph-sidebar { grid-template-columns: 1fr; }
	.vbph-trust .vbph-shell { grid-template-columns: 1fr; }
	.vbph-trust .vbph-shell > div { padding: 16px 0; }
	.vbph-trust .vbph-shell > div + div { border-left: 0; border-top: 1px solid var(--vbph-line); }
}

@media (max-width: 460px) {
	.vbph-brand-featured__grid { grid-template-columns: 1fr; }
	.vbph-hero__actions, .vbph-subhero__actions { flex-direction: column; }
	.vbph-button { width: 100%; }
	.vbph-hero__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
	.vbph-hero__stats > span { padding: 0 10px; }
	.vbph-hero__stats > span:nth-child(3) { border-left: 0; grid-column: 1 / -1; padding-left: 0; }
	.vbph-starter { padding: 22px; }
	.vbph-subhero__stats span { min-width: 0; padding: 0 12px; }
	.vbph-subhero__method { padding: 22px; }
	.vbph-related-topic { grid-template-columns: 34px minmax(0, 1fr) auto; padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.vbph-hub *, .vbph-hub *::before, .vbph-hub *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Cross-portal readability floor -------------------------------------- */

.vbph-guide-card__section { font-size: 12px; }
.vbph-guide-card__body > p { font-size: 15px; }
.vbph-guide-card__meta { font-size: 12px; }
.vbph-topic-card__top small { font-size: 11px; }
.vbph-topic-card > p { font-size: 15px; }
.vbph-topic-card__latest span { font-size: 11px; }
.vbph-topic-card__latest a,
.vbph-topic-card__link { font-size: 13px; }
.vbph-sidebar__card li a { font-size: 14px; }
.vbph-sidebar__card li strong { font-size: 11px; }
.vbph-method-card > p { font-size: 11px; }
.vbph-method-card ul,
.vbph-method-card > a { font-size: 13px; }
.vbph-ad-slot > span { font-size: 11px; }
.vbph-subhero__parent { font-size: 12px; }
.vbph-subhero__stats span { font-size: 12px; }
.vbph-subhero__method > p { font-size: 11px; }
.vbph-subhero__method ul { font-size: 13px; }
.vbph-sibling-nav > .vbph-shell > span { font-size: 11px; }
.vbph-sibling-nav a { font-size: 13px; }
.vbph-sibling-nav a small { font-size: 10px; }
.vbph-brand-featured__heading span { font-size: 11px; }
.vbph-brand-featured__heading p { font-size: 14px; }
.vbph-brand-featured__grid strong { font-size: 14px; }
.vbph-brand-featured__grid small { font-size: 11px; }
.vbph-brand-tool .vb-brand-card__copy strong { font-size: 14px; }
.vbph-brand-tool .vb-brand-card__copy small { font-size: 11px; }
.vbph-parent-link { font-size: 14px; }
.vbph-related-topic strong { font-size: 16px; }
.vbph-related-topic small { font-size: 13px; }
.vbph-trust p { font-size: 13px; }
.vbph-trust strong { font-size: 14px; }

body.vbph-hub-page .vbph-hero h1,
body.vbph-hub-page .vbph-subhero h1,
body.vbph-hub-page .vbph-starter h2,
body.vbph-hub-page .vbph-method-card h2,
body.vbph-hub-page .vbph-subhero__method h2 { color: #fff !important; }