/* =====================================================================
   BRANDS BAND v3 — nine cards in a 3 × 3 grid (design A, 2026-09-08).
   Loads after poz-home-extra.css; .pzb--grid scopes every rule, the
   nine-in-a-row .pzb rules stay for rollback. Colour: only the brand's
   own accent line (--bacc); marks are the original artwork, no filter.
   ===================================================================== */
.pzb.pzb--grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--poz-line-dark, #24272D);
	border: 1px solid var(--poz-line-dark, #24272D);
}
.pzb--grid .pzb__card {
	flex: none; min-height: 236px;
	padding: 24px 26px 22px;
	border-right: 0;
	background: var(--poz-ink-2, #101114);
}
.pzb--grid .pzb__card:hover { background: var(--poz-ink-3, #15171B); }
.pzb--grid .pzb__card::before { display: none; }
.pzb--grid .pzb__role { margin-top: 16px; }
.pzb--grid .pzb__stage { min-height: 96px; padding: 18px 0 16px; }
.pzb--grid .pzb__logo, .pzb--grid .pzb__card.is-mark .pzb__logo { height: var(--lh, 26px); opacity: 1; }
.pzb--grid .pzb__name { font: 400 16px/1.3 var(--poz-font-display, Michroma, sans-serif); letter-spacing: .02em; color: #F2F4F6; }
.pzb--grid .pzb__origin { font: 400 10px/1.45 var(--poz-font-body, Sora, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--poz-text-3, #8B929E); }
.pzb--grid .pzb__go {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--poz-line-dark-soft, #1E2127);
	font: 400 12px/1.4 var(--poz-font-body, Sora, sans-serif); color: #A9AFB8;
}
.pzb--grid .pzb__go-a { color: var(--poz-text-3, #8B929E); transition: transform .45s cubic-bezier(.16, 1, .3, 1), color .3s ease; }
.pzb--grid .pzb__card:hover .pzb__go-a { transform: translateX(5px); color: #F2F4F6; }
@media (max-width: 900px) {
	.pzb.pzb--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.pzb.pzb--grid { grid-template-columns: minmax(0, 1fr); }
	.pzb--grid .pzb__card { min-height: 0; }
}

/* ===== COMPACT ROW (2026-09-08, Sven: "more compact variant"): the nine as one row of hairline cells — mark, name, role. The
   whole cell is the link, so the destination row is dropped. ===== */
.pzb.pzb--row { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 1px; background: var(--poz-line-dark, #24272D); border: 1px solid var(--poz-line-dark, #24272D); }
.pzb--row .pzb__card { flex: none; min-height: 0; padding: 22px 12px 20px; border-right: 0; background: var(--poz-ink-2, #101114); align-items: center; text-align: center; }
.pzb--row .pzb__card:hover { background: var(--poz-ink-3, #15171B); }
.pzb--row .pzb__card::before { display: none; }
.pzb--row .pzb__tick { width: 18px; margin: 0 auto; }
.pzb--row .pzb__role { order: 4; margin-top: 4px; font-size: 9px; letter-spacing: .12em; }
.pzb--row .pzb__stage { order: 2; min-height: 64px; padding: 16px 0 12px; justify-content: center; }
.pzb--row .pzb__logo, .pzb--row .pzb__card.is-mark .pzb__logo { height: calc(var(--lh, 26px) * .8); max-width: 100%; opacity: 1; }
.pzb--row .pzb__id { order: 3; flex-direction: column; align-items: center; gap: 2px; }
.pzb--row .pzb__name { font: 400 12px/1.3 var(--poz-font-display, Michroma, sans-serif); letter-spacing: .02em; color: #F2F4F6; }
.pzb--row .pzb__origin { font: 400 9px/1.45 var(--poz-font-body, Sora, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--poz-text-3, #8B929E); }
.pzb--row .pzb__go { display: none; }
@media (max-width: 1100px) { .pzb.pzb--row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pzb.pzb--row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== v3.1 POLISH (2026-09-12, Sven: "elevate and polish the brand containers") =====
   Same hairline grid, same nine cells, same original artwork with no filter. What changes:
   a top-lit surface on every cell, the brand's own hue on hover (an inset ring, a soft
   wash from the foot, a glow under the tick) and a restrained lift of the mark. The tick
   grows to 44px, not full width - a full-width bar fought the grid's own hairlines. The
   aside's quote link is gone (it duplicated the header); .poz-brands2__btn is the
   catalogues button in its place. Scoped to .pzb--row so the 3x3 grid variant is untouched. */
.pzb.pzb--row { border-radius: 14px; overflow: hidden; }
.pzb--row .pzb__card {
	padding: 26px 14px 22px;
	background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 46%), var(--poz-ink-2, #101114);
	transition: background-color .45s cubic-bezier(.16,1,.3,1), box-shadow .45s cubic-bezier(.16,1,.3,1);
}
.pzb--row .pzb__card::before { display: block; height: 62%; opacity: 0; }
.pzb--row .pzb__card:hover::before,
.pzb--row .pzb__card:focus-visible::before { opacity: .11; }
.pzb--row .pzb__card:hover,
.pzb--row .pzb__card:focus-visible {
	background-color: var(--poz-ink-3, #15171B);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bacc, #3E7BFA) 38%, transparent), inset 0 1px 0 rgba(255,255,255,.06);
}
.pzb--row .pzb__tick { width: 22px; box-shadow: 0 0 12px color-mix(in srgb, var(--bacc, #3E7BFA) 55%, transparent); }
.pzb--row .pzb__card:hover .pzb__tick,
.pzb--row .pzb__card:focus-visible .pzb__tick { width: 44px; }
.pzb--row .pzb__stage { min-height: 72px; padding: 18px 0 14px; }
.pzb--row .pzb__logo { transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .35s ease; will-change: transform; }
.pzb--row .pzb__card:hover .pzb__logo,
.pzb--row .pzb__card:focus-visible .pzb__logo { transform: scale(1.06); }
.pzb--row .pzb__name { font-size: 12.5px; letter-spacing: .04em; }
.pzb--row .pzb__origin { color: #9AA1AC; letter-spacing: .16em; }
.pzb--row .pzb__role { margin-top: 6px; font-size: 9px; letter-spacing: .14em; color: #7E8794; transition: color .3s ease; }
.pzb--row .pzb__card:hover .pzb__role,
.pzb--row .pzb__card:focus-visible .pzb__role { color: #C6CBD3; }
@media (prefers-reduced-motion: reduce) {
	.pzb--row .pzb__card, .pzb--row .pzb__logo, .pzb--row .pzb__tick, .pzb--row .pzb__role { transition: none; }
	.pzb--row .pzb__card:hover .pzb__logo { transform: none; }
}

/* The aside button: a real button, on the section's own green (the eyebrow tick). */
.poz-brands2__btn {
	display: inline-flex; align-items: center; gap: 10px;
	margin-top: 22px; padding: 12px 18px;
	border: 1px solid #3A3F48; border-radius: 999px;
	background: rgba(255,255,255,.03);
	font: 400 10.5px/1 var(--poz-font-display, Michroma, sans-serif);
	letter-spacing: .14em; text-transform: uppercase; color: #E6E9EE; text-decoration: none;
	transition: border-color .3s ease, background-color .3s ease, color .3s ease;
}
.poz-brands2__btn span { display: inline-block; transition: transform .3s ease; }
.poz-brands2__btn:hover,
.poz-brands2__btn:focus-visible { border-color: #2AA876; background: rgba(42,168,118,.12); color: #F2F4F6; }
.poz-brands2__btn:hover span { transform: translateX(4px); }
.poz-brands2__btn:focus-visible { outline: 2px solid #2AA876; outline-offset: 3px; }
@media (max-width: 600px) { .poz-brands2__btn { padding: 13px 18px; font-size: 11px; } }
/* v3.1 name alignment: "FOS Technologies" wraps to two lines at nine-across, which pushed that
   cell's origin and role below its neighbours. Every name now reserves two lines and sits on
   the lower one, so the nine origin/role rows share a baseline. */
.pzb--row .pzb__name { display: flex; align-items: flex-end; justify-content: center; min-height: 2.6em; text-align: center; }