/* ==========================================================================
   Signature Bookkeeping - service page components
   ==========================================================================

   Loaded after assets/css/sbk-core.css, on the four service page templates:
   Bookkeeping, Clean-Up and Catch-Up, Corporate Tax and Advisory.

   One copy of each component, shared by all four. Anything in here that a
   fifth page later needs stays here; anything the home page starts using
   moves to sbk-core.css. Never copy a block into a page template.

   Tokens, typography, buttons, the trust bar, header, footer, FAQ, review
   card, pricing line, gold band and sticky bar all come from sbk-core.css
   and are not repeated here.

   SPECIFICITY, ON THIS SITE ONLY

   The parent theme sets colour, margin and letter-spacing on bare elements
   (`span,p{color:...}`, `p{margin:0}`, `h1{letter-spacing:-2.56px}`) in a
   stylesheet that loads AFTER this one. A bare element selector applies
   directly, so inheriting from an ancestor does not survive it and a
   :where() reset ties on specificity and loses on order. Every component
   below therefore states its own colour, margin and letter-spacing at
   (0,1,0) or higher. That is deliberate, not redundancy.
   ========================================================================== */

/* --------------------------------------------------------------- layout */

.sbk-wrap {
	width: 100%;
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: var(--sbk-gutter);
}
.sbk-wrap--narrow { max-width: 900px; }

.sbk-band { padding-block: var(--sbk-section-y); }
.sbk-band--tight { padding-block: 52px; }
.sbk-band--cream { background: var(--sbk-cream); }
.sbk-band--white { background: var(--sbk-white); }
.sbk-band--bluegrey { background: var(--sbk-blue-grey); }
.sbk-band--navy { background: var(--sbk-navy); }

/* --------------------------------------------------------------- type */

.sbk-h1 {
	font-size: 46px;
	line-height: 1.14;
	font-weight: 700;
	letter-spacing: -.015em;
	color: var(--sbk-navy);
	margin: 14px 0 0;
	max-width: 17ch;
	text-wrap: balance;
}

/* 34em, not 62ch: a ch in this typeface is wide, and 62ch came out at 87
   characters a line. An average character here is about 0.45em, so 34em is
   about 72 characters, the readable measure. The same cap
   is on every other block of running text, so every page reads alike. */
.sbk-lede {
	font-size: 17.5px;
	line-height: 1.7;
	color: var(--sbk-body);
	margin: 16px 0 0;
	max-width: 34em;
}

.sbk-p {
	font-size: 16.5px;
	line-height: 1.75;
	color: var(--sbk-body);
	margin: 14px 0 0;
	max-width: 34em;
}

.sbk-sectionhead { margin: 10px 0 0; }

/* Light text on the navy bands. Stated per element, never inherited. */
.sbk-onnavy .sbk-h2,
.sbk-onnavy .sbk-h3 { color: var(--sbk-white); }
.sbk-onnavy .sbk-lede,
.sbk-onnavy .sbk-p { color: var(--sbk-on-navy-2); }

.sbk-imgnote {
	color: var(--sbk-muted);
	font-size: 13.5px;
	line-height: 1.6;
	margin-top: 16px;
	max-width: 36em;
}
.sbk-onnavy .sbk-imgnote { color: var(--sbk-on-navy-3); }

/* --------------------------------------------------------------- breadcrumbs */

/* Wraps between crumbs, never inside one. Four levels (Home, Resources,
   Guides, a topic) did not fit a phone, and without wrapping the last crumb
   was squeezed until "E-commerce" broke at its hyphen. */
.sbk-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 9px;
	color: var(--sbk-muted);
	font-size: 13.5px;
}
.sbk-crumbs > * { white-space: nowrap; }
.sbk-crumbs a { color: var(--sbk-muted); }
.sbk-crumbs a:hover { color: var(--sbk-gold); }
.sbk-crumbs__here { color: var(--sbk-navy-2); font-weight: 600; }
.sbk-crumbs__sep { color: var(--sbk-border-gold-soft); }

/* --------------------------------------------------------------- service hero */

.sbk-shero {
	background: var(--sbk-cream);
	border-bottom: 1px solid var(--sbk-border-warm);
	padding-block: 64px 60px;
}
.sbk-shero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	gap: var(--sbk-s6);
	align-items: end;
}
.sbk-shero__ctas { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.sbk-shero__micro { color: var(--sbk-muted); font-size: 14px; margin-top: 18px; }

.sbk-shero__art { display: flex; flex-direction: column; }
.sbk-shero__artlabel {
	color: var(--sbk-muted);
	font-size: 13px;
	line-height: 1.5;
	margin-top: 14px;
	text-align: center;
}

/* --------------------------------------------------------------- proof strip */

.sbk-strip {
	background: var(--sbk-white);
	border-bottom: 1px solid var(--sbk-border-cool-2);
	padding-block: 20px;
}
/* A grid, not a flex row. Four claims of unequal length in a flex row wrap
   whenever one of them is long, which drops the fourth onto a line of its own
   and reads as a mistake. Four equal tracks always sit on one line. */
.sbk-strip__list {
	display: grid;
	/* auto-fit, not repeat(4). Hardcoding four tracks left an empty quarter on
	   the About page, which carries three claims. auto-fit takes the number of
	   items from the content. */
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px 28px;
}
.sbk-strip__item {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--sbk-navy-text);
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.4;
}

/* --------------------------------------------------------------- grid and cards */

.sbk-grid { display: grid; gap: 18px; align-items: stretch; }
.sbk-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sbk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sbk-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* A row one item short (corporate tax paused, see sbk_short_row_class())
   takes as many columns as it has items, so two cards read as a pair, not a
   pair beside a gap. Full rows carry no class and are untouched. */
@media (min-width: 1024px) {
	.sbk-grid--4.sbk-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1201px) {
	.sbk-grid--4.sbk-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* On a tablet the grid has two columns, so three cards left the third alone
   beside an empty space; it spans the row instead. */
@media (min-width: 768px) and (max-width: 1023px) {
	.sbk-grid--4.sbk-row--3 > :last-child { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
	.sbk-grid--3.sbk-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sbk-grid--gap-lg { gap: var(--sbk-s3); }
.sbk-grid--top { margin-top: 36px; }

.sbk-card {
	background: var(--sbk-white);
	border: 1px solid var(--sbk-border-warm);
	border-radius: var(--sbk-radius-card);
	padding: 26px 26px 24px;
	box-shadow: var(--sbk-shadow-card);
	display: flex;
	flex-direction: column;
}
.sbk-card--cream { background: var(--sbk-cream); }
.sbk-card--link { transition: box-shadow .18s ease, border-color .18s ease; }
.sbk-card--link:hover { box-shadow: var(--sbk-shadow-card-hover); border-color: var(--sbk-border-gold-soft); }
.sbk-card__title {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: normal;
	color: var(--sbk-navy);
	margin: 0;
}
.sbk-card__body { color: var(--sbk-body); font-size: 14.5px; line-height: 1.65; margin: 9px 0 0; }
.sbk-card__more {
	color: var(--sbk-gold-text);
	font-size: 14.5px;
	font-weight: 600;
	margin-top: auto;
	padding-top: 18px;
}
.sbk-card__icon {
	width: 44px; height: 44px;
	border-radius: 50%;
	background: var(--sbk-navy);
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	margin-bottom: var(--sbk-s2);
}

/* --------------------------------------------------------------- split */

.sbk-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--sbk-s6);
	align-items: start;
}
.sbk-split--wide-left { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }

.sbk-getlist { display: flex; flex-direction: column; }
.sbk-getlist__item {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 16px 0;
	border-bottom: 1px solid var(--sbk-border-warm);
	color: var(--sbk-navy);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
}
.sbk-getlist__item:first-child { border-top: 1px solid var(--sbk-border-warm); }

/* --------------------------------------------------------------- stages
   ONE numbered stage component, three layouts.

   The period cycle on Bookkeeping, the year-end timeline on Corporate Tax and
   the diagnostic flow on Clean-Up are the same idea: an ordered list of named
   stages, one of which belongs to the client. They differ only in how they sit
   on the page, so the difference is a modifier and not a second component.
   --------------------------------------------------------------- */

.sbk-stages { margin-top: 36px; }
.sbk-stages__item { position: relative; }
.sbk-stages__n {
	color: var(--sbk-gold-light);
	font-weight: 700;
	line-height: .9;
	letter-spacing: -.03em;
}
.sbk-stages__title {
	color: var(--sbk-white);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: normal;
	margin: 10px 0 0;
}
.sbk-stages__body {
	color: var(--sbk-on-navy-2);
	font-size: 14.5px;
	line-height: 1.65;
	margin: 8px 0 0;
}

/* Row: five stages across a navy band. Bookkeeping. */
.sbk-stages--row {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 14px;
}
.sbk-stages--row .sbk-stages__item {
	background: var(--sbk-navy-3);
	border: 1px solid rgba(233, 190, 98, .22);
	border-radius: var(--sbk-radius-card);
	padding: 22px 20px 20px;
	display: flex;
	flex-direction: column;
}
.sbk-stages--row .sbk-stages__n { font-size: 34px; }
.sbk-stages--row .sbk-stages__item--you {
	background: var(--sbk-gold-light);
	border-color: var(--sbk-gold-light);
}
.sbk-stages--row .sbk-stages__item--you .sbk-stages__n { color: var(--sbk-navy); }
.sbk-stages--row .sbk-stages__item--you .sbk-stages__title { color: var(--sbk-navy); }
.sbk-stages--row .sbk-stages__item--you .sbk-stages__body { color: var(--sbk-on-gold-body); }

.sbk-chip {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	margin-top: 16px;
	padding: 5px 11px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	background: rgba(233, 190, 98, .14);
	border: 1px solid rgba(233, 190, 98, .38);
	color: var(--sbk-gold-light);
}
.sbk-chip--you {
	background: var(--sbk-navy);
	border-color: var(--sbk-navy);
	color: var(--sbk-gold-light);
}

.sbk-stages__loop {
	display: flex;
	align-items: center;
	gap: var(--sbk-s2);
	margin-top: 22px;
	color: var(--sbk-gold-light);
	font-size: 14.5px;
	font-weight: 600;
}
.sbk-stages__loop-rule {
	flex: 1;
	height: 1px;
	background: rgba(233, 190, 98, .35);
}

.sbk-legend { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 18px; }
.sbk-legend__item {
	display: flex; align-items: center; gap: 9px;
	color: var(--sbk-on-navy-2); font-size: 13.5px;
}
.sbk-legend__swatch {
	width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0;
	background: var(--sbk-navy-3);
	border: 1px solid var(--sbk-on-navy-3);
}
.sbk-legend__swatch--you { background: var(--sbk-gold-light); border-color: var(--sbk-gold-light); }

/* Stack: numbered rows down a navy band. Corporate Tax. */
.sbk-stages--stack { border-top: 1px solid rgba(233, 190, 98, .28); }
.sbk-stages--stack .sbk-stages__item {
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr);
	gap: var(--sbk-s4);
	align-items: start;
	padding: 26px 0;
	border-bottom: 1px solid rgba(233, 190, 98, .28);
}
.sbk-stages--stack .sbk-stages__n { font-size: 52px; }
.sbk-stages--stack .sbk-stages__title { font-size: 24px; margin: 0; }
.sbk-stages--stack .sbk-stages__body { font-size: 15.5px; max-width: 34em; }

/* The one stage that belongs to the client, in the stacked layout. The row
   layout inverts the whole card; here a gold rule and a gold number say the
   same thing without breaking the rhythm of the list. */
.sbk-stages--stack .sbk-stages__item--you {
	/* An inset shadow rather than a border and a negative margin. The negative
	   margin pulled the row 25px left, which at a 22px gutter put it 3px
	   outside a 390px viewport. This paints the same line and moves nothing. */
	box-shadow: inset 3px 0 0 0 var(--sbk-gold-light);
	padding-left: 14px;
}
.sbk-stages--stack .sbk-stages__item--you .sbk-stages__title { color: var(--sbk-gold-light); }

.sbk-stages__note {
	display: inline-block;
	margin-top: 30px;
	background: rgba(233, 190, 98, .12);
	border: 1px solid rgba(233, 190, 98, .35);
	border-radius: 8px;
	padding: 14px 20px;
	color: var(--sbk-white);
	font-size: 15px;
	line-height: 1.6;
}

/* Cards: labelled stages on a light band. Clean-Up. */
.sbk-stages--cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}
.sbk-stages--cards .sbk-stages__item {
	background: var(--sbk-white);
	border: 1px solid var(--sbk-border-warm);
	border-radius: var(--sbk-radius-card);
	padding: 24px 24px 22px;
	box-shadow: var(--sbk-shadow-card);
}
.sbk-stages--cards .sbk-stages__n {
	color: var(--sbk-gold-text);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1.2;
}
.sbk-stages--cards .sbk-stages__title { color: var(--sbk-navy); font-size: 18px; }
.sbk-stages--cards .sbk-stages__body { color: var(--sbk-body); }

/* --------------------------------------------------------------- message mockup */

.sbk-msg {
	background: var(--sbk-white);
	border: 1px solid var(--sbk-border-cool);
	border-radius: var(--sbk-radius-lg);
	box-shadow: var(--sbk-shadow-card-2);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.sbk-msg--raised { box-shadow: var(--sbk-shadow-card-hover); }
.sbk-msg__top {
	background: var(--sbk-cream);
	border-bottom: 1px solid var(--sbk-border-warm);
	padding: 16px 22px;
}
.sbk-msg__meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.sbk-msg__tag {
	background: var(--sbk-navy);
	color: var(--sbk-gold-light);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 4px;
}
.sbk-msg__date { color: var(--sbk-muted); font-size: 13px; }
.sbk-msg__subj {
	color: var(--sbk-navy);
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: normal;
	margin: 10px 0 0;
}
.sbk-msg__body { padding: 20px 22px; flex: 1; }
.sbk-msg__intro { color: var(--sbk-body); font-size: 14.5px; line-height: 1.65; margin: 0; }
.sbk-msg__list { display: flex; flex-direction: column; gap: 11px; margin-top: 16px; }
.sbk-msg__item {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	color: var(--sbk-navy-text);
	font-size: 14px;
	line-height: 1.55;
}
.sbk-msg__close {
	background: var(--sbk-cream);
	border-top: 1px solid var(--sbk-border-warm);
	padding: 13px 22px;
	color: var(--sbk-navy-2);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.5;
}

/* Small square marker, used inside the message and document mockups. */
.sbk-tick {
	width: 9px; height: 9px;
	background: var(--sbk-gold);
	transform: rotate(45deg);
	flex-shrink: 0;
	margin-top: 6px;
}
.sbk-tick--done { background: var(--sbk-confirm); }

/* --------------------------------------------------------------- document mockup */

.sbk-doc {
	background: var(--sbk-white);
	border: 1px solid var(--sbk-border-cool);
	border-radius: var(--sbk-radius-lg);
	box-shadow: var(--sbk-shadow-card-2);
	overflow: hidden;
}
.sbk-doc__top {
	background: var(--sbk-navy);
	padding: 16px 24px;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}
.sbk-doc__title { color: var(--sbk-white); font-size: 15.5px; font-weight: 600; letter-spacing: normal; margin: 0; }
.sbk-doc__sub { color: var(--sbk-on-navy-3); font-size: 12.5px; }
.sbk-doc__body { padding: 6px 24px 20px; }
.sbk-doc__sec { padding-top: 18px; }
.sbk-doc__sec + .sbk-doc__sec { border-top: 1px solid var(--sbk-border-cool-2); margin-top: 6px; }
.sbk-doc__sechead {
	color: var(--sbk-gold-text);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin: 0 0 4px;
}
.sbk-doc__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--sbk-s2);
	padding: 11px 0;
	border-bottom: 1px solid var(--sbk-border-cool-2);
	color: var(--sbk-navy-text);
	font-size: 14px;
	line-height: 1.5;
}
.sbk-doc__row:last-child { border-bottom: 0; }
.sbk-doc__count {
	color: var(--sbk-navy);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -.01em;
	white-space: nowrap;
	flex-shrink: 0;
}
.sbk-doc__unit {
	color: var(--sbk-muted);
	font-size: 11.5px;
	font-weight: 500;
	font-style: normal;
	letter-spacing: .04em;
	text-transform: uppercase;
	margin-left: 6px;
}
.sbk-doc__recs { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.sbk-doc__rec {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	color: var(--sbk-navy-text);
	font-size: 14px;
	line-height: 1.55;
}
.sbk-doc__foot {
	background: var(--sbk-cream);
	border-top: 1px solid var(--sbk-border-warm);
	padding: 16px 24px;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}
.sbk-doc__price { color: var(--sbk-navy); font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.sbk-doc__terms { color: var(--sbk-body); font-size: 13px; line-height: 1.5; }
.sbk-doc__note {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	background: var(--sbk-white);
	border-top: 1px solid var(--sbk-border-cool-2);
	padding: 13px 24px 16px;
	color: var(--sbk-muted);
	font-size: 12.5px;
	line-height: 1.55;
}
/* The measure belongs to the words, not the strip: capped, the strip stopped
   short and left a notch under the band above (Oct 3 2026). */
.sbk-doc__note > :last-child { max-width: 36em; }
.sbk-doc--compact .sbk-doc__body { padding-bottom: 14px; }

.sbk-pill {
	display: inline-flex;
	align-items: center;
	padding: 4px 11px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .04em;
	white-space: nowrap;
	flex-shrink: 0;
}
.sbk-pill--done { background: rgba(46, 122, 78, .1); color: var(--sbk-confirm); }
.sbk-pill--gold { background: rgba(185, 134, 47, .12); color: var(--sbk-gold-text); }
.sbk-pill--flat { background: var(--sbk-blue-grey); color: var(--sbk-navy-2); }

/* --------------------------------------------------------------- before and after */

.sbk-ba {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 36px;
	border-radius: var(--sbk-radius-lg);
	overflow: hidden;
	box-shadow: var(--sbk-shadow-card);
}
.sbk-ba__col { background: var(--sbk-white); padding: 30px 32px 34px; }
.sbk-ba__col--before { border-top: 3px solid var(--sbk-on-navy-3); }
.sbk-ba__col--after {
	border-top: 3px solid var(--sbk-gold-light);
	border-left: 1px solid var(--sbk-border-cool);
	background: var(--sbk-cream);
}
.sbk-ba__head {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sbk-navy);
	margin: 0 0 6px;
}
.sbk-ba__col--before .sbk-ba__head { color: var(--sbk-muted); }
.sbk-ba__row {
	display: flex;
	gap: 13px;
	align-items: flex-start;
	padding: 12px 0;
	border-bottom: 1px solid var(--sbk-border-cool-2);
	color: var(--sbk-navy-text);
	font-size: 15px;
	line-height: 1.55;
}
.sbk-ba__row:last-child { border-bottom: 0; }
.sbk-mark {
	width: 20px; height: 20px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 11px; font-weight: 700;
	flex-shrink: 0;
	margin-top: 2px;
}
.sbk-mark--x { background: rgba(122, 128, 152, .14); color: var(--sbk-muted); }
.sbk-mark--check { background: rgba(46, 122, 78, .12); color: var(--sbk-confirm); }

/* --------------------------------------------------------------- price callout */

.sbk-price {
	background: var(--sbk-white);
	border: 1px solid var(--sbk-border-warm);
	border-left: 4px solid var(--sbk-gold);
	border-radius: var(--sbk-radius-card);
	padding: 26px 30px;
	box-shadow: var(--sbk-shadow-card);
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.sbk-price__figure {
	color: var(--sbk-navy);
	font-size: 46px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.02em;
}
.sbk-price__note { color: var(--sbk-body); font-size: 14.5px; line-height: 1.6; }

/* --------------------------------------------------------------- fork diagram */

.sbk-fork { margin-top: 34px; }
.sbk-fork__hub {
	background: var(--sbk-navy-3);
	border: 1px solid rgba(233, 190, 98, .3);
	border-radius: var(--sbk-radius-card);
	padding: 22px 26px;
	max-width: 520px;
	margin-inline: auto;
	text-align: center;
}
.sbk-fork__hubtitle { color: var(--sbk-white); font-size: 18px; font-weight: 600; letter-spacing: normal; margin: 0; }
.sbk-fork__hubbody { color: var(--sbk-on-navy-2); font-size: 14.5px; line-height: 1.6; margin: 8px 0 0; }

/* The connector. A vertical stem, then a horizontal rule with two drops. */
.sbk-fork__stem {
	width: 2px;
	height: 30px;
	background: rgba(233, 190, 98, .45);
	margin-inline: auto;
}
.sbk-fork__split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sbk-s4);
	position: relative;
	padding-top: 30px;
}
.sbk-fork__split::before {
	content: "";
	position: absolute;
	top: 0;
	left: 25%;
	right: 25%;
	height: 2px;
	background: rgba(233, 190, 98, .45);
}
.sbk-fork__path { position: relative; }
.sbk-fork__path::before {
	content: "";
	position: absolute;
	top: -30px;
	left: 50%;
	width: 2px;
	height: 30px;
	background: rgba(233, 190, 98, .45);
}
.sbk-fork__panel {
	background: var(--sbk-navy-3);
	border: 1px solid rgba(233, 190, 98, .22);
	border-radius: var(--sbk-radius-card);
	padding: 24px 26px;
	height: 100%;
}
.sbk-fork__tag {
	display: inline-flex;
	padding: 4px 11px;
	border-radius: 999px;
	background: rgba(233, 190, 98, .14);
	border: 1px solid rgba(233, 190, 98, .38);
	color: var(--sbk-gold-light);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.sbk-fork__title { color: var(--sbk-white); font-size: 18px; font-weight: 600; letter-spacing: normal; margin: 12px 0 0; }
.sbk-fork__body { color: var(--sbk-on-navy-2); font-size: 14.5px; line-height: 1.65; margin: 8px 0 0; }
.sbk-fork__list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.sbk-fork__item {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	color: var(--sbk-white);
	font-size: 14px;
	line-height: 1.55;
}
.sbk-fork__join {
	margin-top: 26px;
	background: rgba(233, 190, 98, .12);
	border: 1px solid rgba(233, 190, 98, .35);
	border-radius: 8px;
	padding: 14px 20px;
	text-align: center;
	color: var(--sbk-white);
	font-size: 15px;
	line-height: 1.6;
}
/* Stating the colour is not redundancy. The parent theme's app.css carries
   `span,p{color:var(--color-dark-purple)}`, a bare element selector that
   applies DIRECTLY to this span and beats the white inherited from its parent.
   Without this line it rendered dark navy on the dark navy box: invisible.
   Third time this exact trap has bitten. Every classed span states its colour. */
.sbk-fork__joinlead { font-weight: 700; color: var(--sbk-white); }

/* --------------------------------------------------------------- deadlines table */

.sbk-datecard {
	margin-top: 30px;
	background: var(--sbk-white);
	border: 1px solid var(--sbk-border-warm);
	border-radius: var(--sbk-radius-card);
	box-shadow: var(--sbk-shadow-card);
	overflow-x: auto;
}
.sbk-datecard table { width: 100%; border-collapse: collapse; min-width: 560px; }

/* On a phone the table stacks: one block per deadline, what, when and its
   status one under the other. At 560px wide it had to be scrolled sideways
   on a 390px screen, with the status column out of sight. The column names
   stay in the markup for screen readers. */
@media (max-width: 600px) {
	.sbk-datecard { overflow-x: visible; }
	.sbk-datecard table { min-width: 0; }
	.sbk-datecard thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.sbk-datecard tr { display: block; padding: 16px 18px; border-bottom: 1px solid var(--sbk-border-cool-2); }
	.sbk-datecard tr:last-child { border-bottom: 0; }
	.sbk .sbk-datecard td { display: block; padding: 0; border-bottom: 0; }
	.sbk .sbk-datecard td + td { margin-top: 6px; }
}
.sbk-datecard th {
	text-align: left;
	background: var(--sbk-cream);
	border-bottom: 1px solid var(--sbk-border-warm);
	padding: 13px 22px;
	color: var(--sbk-navy);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.sbk-datecard td {
	padding: 15px 22px;
	border-bottom: 1px solid var(--sbk-border-cool-2);
	color: var(--sbk-navy-text);
	font-size: 14.5px;
	line-height: 1.55;
	vertical-align: top;
}
.sbk-datecard tr:last-child td { border-bottom: 0; }
/* Two classes deep: .sbk-datecard td, above, is (0,1,1) and outranked the
   single class, so a date still to confirm rendered in the body colour
   rather than the muted one that marks it as not final. */
.sbk-datecard .sbk-datecard__what { color: var(--sbk-navy); font-weight: 600; }
.sbk-datecard .sbk-datecard__pending { color: var(--sbk-muted); font-style: italic; }

/* --------------------------------------------------------------- report mockup */

.sbk-report {
	background: var(--sbk-white);
	border: 1px solid var(--sbk-border-cool);
	border-radius: var(--sbk-radius-lg);
	box-shadow: var(--sbk-shadow-card-2);
	overflow: hidden;
}
.sbk-report__top {
	background: var(--sbk-navy);
	padding: 16px 24px;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}
.sbk-report__title { color: var(--sbk-white); font-size: 15.5px; font-weight: 600; letter-spacing: normal; margin: 0; }
.sbk-report__sub { color: var(--sbk-on-navy-3); font-size: 12.5px; }
.sbk-report__body {
	padding: 22px 24px 24px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sbk-s2);
}
.sbk-kpi {
	background: var(--sbk-cream);
	border: 1px solid var(--sbk-border-warm-2);
	border-radius: var(--sbk-radius-card);
	padding: 14px 16px;
}
.sbk-kpi__label {
	display: block;
	color: var(--sbk-muted);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
}
.sbk-kpi__value {
	display: block;
	color: var(--sbk-navy);
	font-size: 23px;
	font-weight: 700;
	letter-spacing: -.015em;
	margin-top: 5px;
}
.sbk-kpi__delta { display: block; color: var(--sbk-confirm); font-size: 12.5px; font-weight: 600; font-style: normal; margin-top: 3px; }
.sbk-kpi__delta--watch { color: var(--sbk-gold-text); }

.sbk-report__wide { grid-column: 1 / -1; margin-top: 6px; }
.sbk-report__widehead {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}
.sbk-report__widetitle { color: var(--sbk-navy); font-size: 15px; font-weight: 600; letter-spacing: normal; margin: 0; }
.sbk-report__widenote { color: var(--sbk-muted); font-size: 13px; }
.sbk-report__widenote--up { color: var(--sbk-confirm); font-weight: 600; }

.sbk-report__table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.sbk-report__table th {
	text-align: left;
	padding: 8px 0;
	border-bottom: 1px solid var(--sbk-border-cool);
	color: var(--sbk-muted);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
}
.sbk-report__table td {
	padding: 10px 0;
	border-bottom: 1px solid var(--sbk-border-cool-2);
	color: var(--sbk-navy-text);
	font-size: 14px;
}
.sbk-report__table th + th,
.sbk-report__table td + td { text-align: right; padding-left: 12px; }
.sbk-report__table tr:last-child td { border-bottom: 0; }

.sbk-trend { width: 100%; height: 86px; margin-top: 14px; display: block; }

.sbk-bars { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.sbk-bar__head {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	color: var(--sbk-body);
	font-size: 13.5px;
	margin-bottom: 5px;
}
.sbk-bar__value { color: var(--sbk-navy); font-weight: 600; }
.sbk-bar__track {
	height: 8px;
	border-radius: 999px;
	background: var(--sbk-border-cool);
	overflow: hidden;
}
.sbk-bar__fill { display: block; height: 100%; border-radius: 999px; background: var(--sbk-gold-grad); }

/* --------------------------------------------------------------- cadence panels */

.sbk-cadence {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sbk-s3);
	margin-top: 36px;
}
.sbk-cadence__panel {
	background: var(--sbk-navy-3);
	border: 1px solid rgba(233, 190, 98, .22);
	border-radius: var(--sbk-radius-card);
	padding: 26px 28px;
}
.sbk-cadence__n {
	width: 34px; height: 34px;
	border-radius: 50%;
	background: var(--sbk-gold-light);
	color: var(--sbk-navy);
	display: flex; align-items: center; justify-content: center;
	font-size: 15px; font-weight: 700;
}
.sbk-cadence__title { color: var(--sbk-white); font-size: 18px; font-weight: 600; letter-spacing: normal; margin: 14px 0 0; }
.sbk-cadence__body { color: var(--sbk-on-navy-2); font-size: 15px; line-height: 1.65; margin: 8px 0 0; max-width: 34em; }
.sbk-cadence__list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.sbk-cadence__item {
	display: flex; gap: 11px; align-items: flex-start;
	color: var(--sbk-white); font-size: 14px; line-height: 1.55;
}

/* --------------------------------------------------------------- case note */

.sbk-case {
	margin-top: 26px;
	border-left: 3px solid var(--sbk-gold-light);
	padding-left: 26px;
	max-width: 78ch;
}
.sbk-case__body { color: var(--sbk-on-navy-2); font-size: 16.5px; line-height: 1.75; margin: 0; max-width: 34em; }
.sbk-case__kicker {
	color: var(--sbk-white);
	font-size: 17.5px;
	font-weight: 600;
	letter-spacing: -.005em;
	line-height: 1.5;
	margin-top: 16px;
}

/* --------------------------------------------------------------- faq help */

.sbk-faqhelp {
	background: var(--sbk-cream);
	border: 1px solid var(--sbk-border-warm);
	border-radius: var(--sbk-radius-card);
	padding: 26px 28px;
	text-align: center;
	margin-top: 28px;
}
.sbk-faqhelp__title { color: var(--sbk-navy); font-size: 17px; font-weight: 600; letter-spacing: normal; margin: 0; }
.sbk-faqhelp__body { color: var(--sbk-body); font-size: 15px; line-height: 1.6; margin: 6px 0 0; }
.sbk-faqhelp .sbk-btn { margin-top: 18px; }

/* --------------------------------------------------------------- reviews footer link */

.sbk-morereviews { text-align: center; margin-top: 26px; }
.sbk-morereviews a {
	color: var(--sbk-navy-2);
	font-size: 15px;
	font-weight: 600;
	border-bottom: 2px solid var(--sbk-gold-light);
	padding-bottom: 2px;
}

/* --------------------------------------------------------------- centred heads */

.sbk-h2--narrow { max-width: 22ch; margin-inline: auto; text-align: center; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1200px) {
	.sbk-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sbk-stages--row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sbk-stages--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
	.sbk-shero { padding-block: 48px 52px; }
	.sbk-shero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sbk-s4); align-items: start; }
	.sbk-h1 { font-size: 38px; max-width: none; }
	.sbk-split,
	.sbk-split--wide-left { grid-template-columns: minmax(0, 1fr); gap: var(--sbk-s4); }
	.sbk-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sbk-cadence { grid-template-columns: minmax(0, 1fr); }
	/* Three figures, three across: two columns left the third alone. */
	.sbk-report__body { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sbk-strip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.sbk-band--tight { padding-block: 32px; }
	.sbk-shero { padding-block: 32px 40px; }
	.sbk-h1 { font-size: 30px; line-height: 1.2; text-wrap: pretty; }
	.sbk-lede { font-size: 15.5px; }
	.sbk-p { font-size: 15.5px; }
	.sbk-shero__ctas { flex-direction: column; gap: 10px; }
	.sbk-shero__ctas .sbk-btn { width: 100%; }

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

	.sbk-stages--row,
	.sbk-stages--cards { grid-template-columns: minmax(0, 1fr); }
	.sbk-stages--stack .sbk-stages__item { grid-template-columns: 52px minmax(0, 1fr); gap: var(--sbk-s2); padding: 20px 0; }
	/* The padding shorthand just above resets the client's stage to no
	   indent, which put its text against its own gold rule on a phone. */
	.sbk-stages--stack .sbk-stages__item--you { padding-left: 14px; }
	.sbk-stages--stack .sbk-stages__n { font-size: 34px; }
	.sbk-stages--stack .sbk-stages__title { font-size: 20px; }

	.sbk-ba { grid-template-columns: minmax(0, 1fr); }
	.sbk-ba__col { padding: 24px 22px 26px; }
	.sbk-ba__col--after { border-left: 0; }

	.sbk-report__body { grid-template-columns: minmax(0, 1fr); }
	.sbk-doc__body,
	.sbk-doc__top,
	.sbk-doc__foot,
	.sbk-doc__note { padding-inline: 18px; }
	.sbk-msg__top,
	.sbk-msg__body,
	.sbk-msg__close { padding-inline: 18px; }

	.sbk-fork__split { grid-template-columns: minmax(0, 1fr); gap: var(--sbk-s2); padding-top: 22px; }
	/* One column means the horizontal rule and the two drops are meaningless:
	   the stem alone reads correctly, so the fork lines are removed rather
	   than left pointing at nothing. */
	.sbk-fork__split::before,
	.sbk-fork__path::before { display: none; }
	.sbk-fork__hub { padding: 20px; }

	.sbk-price__figure { font-size: 38px; }
	.sbk-case { padding-left: 18px; }
	.sbk-strip__list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.sbk-strip__item { font-size: 13.5px; }

	/* Touch targets, same 44px minimum as the rest of the site. */
	.sbk-crumbs a,
	.sbk-card__more,
	.sbk-morereviews a { display: inline-flex; align-items: center; min-height: var(--sbk-tap); }
	.sbk-crumbs a { min-width: var(--sbk-tap); }
}

@media print {
	.sbk-shero__art,
	.sbk-strip { break-inside: avoid; }
}

/* ---------------------------------------------------------- add-on services
   Bookkeeping's "Additional support" (Oct 3 2026): white cards on the navy
   band, each with a gold plus, the owner's words, and a small picture of the
   work in a cream well at the foot. On a computer the cards share their rows
   (subgrid), so all three are one height and the pictures line up; on a
   tablet each card is a row, words left, picture right; on a phone they
   stack. Nothing here is fixed in height: a card fits what is in it. */

.sbk-addons__lede { max-width: 34em; }
.sbk-addons { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 36px; }

.sbk-addon {
	display: flex; flex-direction: column;
	background: var(--sbk-white);
	border-radius: var(--sbk-radius-card);
	padding: 26px 26px 0;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
	overflow: hidden;
}
.sbk-addon__head { display: flex; align-items: center; gap: 12px; }
.sbk-addon__plus {
	position: relative; flex-shrink: 0;
	width: 30px; height: 30px; border-radius: 50%;
	background: var(--sbk-gold-grad);
}
.sbk-addon__plus::before,
.sbk-addon__plus::after {
	content: ""; position: absolute; left: 50%; top: 50%;
	width: 12px; height: 2px; margin: -1px 0 0 -6px;
	background: var(--sbk-navy); border-radius: 1px;
}
.sbk-addon__plus::after { transform: rotate(90deg); }
.sbk .sbk-addon__title { margin: 0; color: var(--sbk-navy); font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: normal; }
.sbk .sbk-addon__body { margin: 12px 0 0; color: var(--sbk-body); font-size: 14.5px; line-height: 1.65; }
.sbk-addon__well {
	margin: 22px -26px 0; padding: 18px;
	background: var(--sbk-cream);
	border-top: 1px solid var(--sbk-border-warm);
	flex-grow: 1;
	display: flex; align-items: flex-end;
}
.sbk-addon__well > .sbk-mini { width: 100%; }

/* The mini document: a picture, so no headings inside it. */
.sbk-mini {
	background: var(--sbk-white);
	border: 1px solid var(--sbk-border-cool);
	border-radius: 8px;
	overflow: hidden;
}
.sbk-mini__head {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	background: var(--sbk-blue-grey);
	padding: 10px 14px;
}
.sbk-mini__titles { display: flex; flex-direction: column; min-width: 0; }
.sbk .sbk-mini__title { color: var(--sbk-navy); font-size: 13px; font-weight: 600; line-height: 1.35; }
.sbk .sbk-mini__sub { color: var(--sbk-navy-text); font-size: 11.5px; line-height: 1.4; }
.sbk .sbk-mini__stamp {
	flex-shrink: 0;
	display: inline-flex; align-items: center; gap: 5px;
	background: var(--sbk-white);
	border: 1.5px solid var(--sbk-confirm);
	border-radius: 999px;
	padding: 3px 9px;
	color: var(--sbk-confirm);
	font-size: 11px; font-weight: 700; line-height: 1.2;
	letter-spacing: .1em; text-transform: uppercase;
}
.sbk-mini__stamp::before {
	content: ""; width: 7px; height: 4px; margin-top: -2px;
	border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transform: rotate(-45deg);
}
.sbk-mini__row {
	display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
	padding: 7px 14px;
	border-top: 1px solid var(--sbk-border-cool-2);
}
.sbk .sbk-mini__label { color: var(--sbk-navy-text); font-size: 12.5px; line-height: 1.4; }
.sbk .sbk-mini__value { color: var(--sbk-navy); font-size: 12.5px; font-weight: 600; line-height: 1.4; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sbk-mini__row--total { background: var(--sbk-cream); }
.sbk .sbk-mini__row--total .sbk-mini__label { color: var(--sbk-navy); font-weight: 600; }

@media (min-width: 1100px) {
	.sbk-addons { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; gap: 0 24px; }
	.sbk-addon { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
	.sbk-addons.sbk-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sbk-addons.sbk-row--1 { grid-template-columns: minmax(0, 34em); }
}

@media (min-width: 700px) and (max-width: 1099px) {
	.sbk-addon {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 330px;
		grid-template-rows: 1fr auto auto 1fr;
		column-gap: 26px;
		padding: 24px 0 24px 26px;
	}
	/* The words sit centred beside the picture, not stranded at the top. */
	.sbk-addon__head { grid-column: 1; grid-row: 2; }
	.sbk-addon__body { grid-column: 1; grid-row: 3; }
	.sbk-addon__well {
		grid-column: 2; grid-row: 1 / -1;
		margin: -24px 0;
		border-top: 0; border-left: 1px solid var(--sbk-border-warm);
		align-items: center;
	}
}

@media (max-width: 699px) {
	.sbk-addon { padding: 22px 20px 0; }
	.sbk-addon__well { margin: 18px -20px 0; padding: 14px; }
	.sbk .sbk-addon__title { font-size: 18px; }
}

/* --------------------------------------------------------------- centred photo hero
   About (Oct 6 2026) and the Industries hub (Oct 14 2026). Centred like
   Pricing's, on a licensed photograph (the page's "Background photograph")
   under a navy tint, so every line is light text on a dark ground at every
   width. Without a photograph it stays the cream hero, centred. Where each
   photograph is cropped is in that page's own sheet. */
.sbk .sbk-shero--center .sbk-shero__text { text-align: center; max-width: 760px; margin-inline: auto; }
.sbk-shero--center .sbk-crumbs,
.sbk-shero--center .sbk-shero__ctas { justify-content: center; }
.sbk .sbk-shero--center .sbk-h1,
.sbk .sbk-shero--center .sbk-lede { margin-inline: auto; }
.sbk .sbk-shero--center .sbk-shero__micro { text-wrap: balance; }

.sbk-shero--photo {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--sbk-navy);
	border-bottom: 0;
	padding-block: 104px 100px;
}
.sbk-shero__media { position: absolute; inset: 0; z-index: -1; }
.sbk .sbk-shero__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* The tint, by the design counterpart: at least .68 navy behind any text,
   measured against the brightest light in the photograph (white text 4.5:1
   needs .62), heavier at the top and bottom edges. */
.sbk-shero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(29, 37, 71, .82) 0%, rgba(29, 37, 71, .68) 35%, rgba(29, 37, 71, .68) 70%, rgba(29, 37, 71, .78) 100%);
}
.sbk .sbk-shero--photo .sbk-h1 { color: var(--sbk-white); }
.sbk .sbk-shero--photo .sbk-lede { color: var(--sbk-on-navy); }
.sbk .sbk-shero--photo .sbk-shero__micro { color: var(--sbk-on-navy-2); }
.sbk .sbk-shero--photo .sbk-crumbs a { color: var(--sbk-on-navy-2); }
.sbk .sbk-shero--photo .sbk-crumbs__here { color: var(--sbk-white); }
.sbk .sbk-shero--photo .sbk-crumbs__sep { color: var(--sbk-gold-light); }
.sbk .sbk-shero--photo a.sbk-btn--outline { color: var(--sbk-white); border-color: rgba(255, 255, 255, .85); background: transparent; }
.sbk .sbk-shero--photo a.sbk-btn--outline:hover { color: var(--sbk-navy); background: var(--sbk-white); }
@media (max-width: 1023px) {
	.sbk-shero--photo { padding-block: 72px 68px; }
	.sbk .sbk-shero--center .sbk-h1 { max-width: 17ch; }
}
@media (max-width: 767px) {
	.sbk-shero--photo { padding-block: 44px 48px; }
}


/* ==========================================================================
   Phones, 640px and under (Oct 23 2026, round 4 design)
   ========================================================================== */
@media (max-width: 640px) {
	/* The hero graphic on Bookkeeping, Clean-Up & Catch-Up and Advisory
	   added clutter on a phone (owner). A computer keeps it. */
	.sbk-shero__art--desk { display: none; }
	/* A short diamond list, such as Clean-Up's "$250 diagnostic review"
	   strip: two by two small cards, the diamond on top, instead of four
	   lines stacked. */
	.sbk-strip { padding-block: 18px; }
	.sbk-strip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.sbk-strip__item {
		flex-direction: column; align-items: flex-start; gap: 10px;
		background: var(--sbk-cream);
		border: 1px solid var(--sbk-border-warm);
		border-radius: 10px;
		padding: 14px 14px 15px;
		font-size: 14px; font-weight: 600; line-height: 1.4;
	}
	.sbk-strip__item .sbk-diamond { width: 8px; height: 8px; background: var(--sbk-gold); flex-shrink: 0; }
	/* An odd one out (About has three) takes the full row, so no half row
	   stands empty beside it. */
	.sbk-strip__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}