/* V12 DARK + RED POINT — dark is the main colour; red appears only as small points (squares/dots) and a few thin lines. Never as text fill or large areas. Hero untouched. */
:root { --red: #E8372C; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline-color: var(--red) !important; }
/* section kicker: a small red square as the point (replaces the long line) */
.kick::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 10px 1px 0; background: var(--red); vertical-align: middle; }
.hero2 .kick::before, .bw .kick::before { display: none; }
/* index rows: number turns red on hover/active; small red square follows the active service */
.wh-idx a:hover .n, .sv-row.on .no, .mo2 .mo-list button[aria-pressed="true"] .lb { color: var(--red); }
.sv-row.on .tt::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 14px; background: var(--red); vertical-align: middle; transform: translateY(-.08em); }
/* chips: CTA goes red on hover (works on every world colour) */
a.chip.go:hover { background: var(--red); border-color: var(--red); color: #fff; }
.mo-ch button:hover, .mo-ch button:focus-visible { border-color: var(--red); }
.mo-ch button:hover .lb { color: var(--red); }
/* timelines & progress (kept thin) */
.tl i::after { background: var(--red); }
/* detail pages: tiny red square on section labels, red arrow on Next */
.dv-h::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 10px 1px 0; background: var(--red); vertical-align: middle; }
.dv-next .na { color: var(--red); }
/* footer mark */
.ft .logo::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; background: var(--red); vertical-align: middle; }
/* Services preview caption + Contact status get a point */
.hold .lb::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; background: var(--red); vertical-align: middle; }