/*
 * Bill of quantities.
 *
 * Shares the packages page's language rather than carrying its own: the same
 * tokens from base.css, the same rounded surfaces, the same pills, Plus Jakarta
 * for prose and DM Serif for headings. Monospace is reserved for figures, where
 * tabular alignment earns its keep, instead of being used for labels and body
 * text where it only slowed reading down.
 *
 * The schedule is built from collapsing grids, never a fixed-width table, so it
 * reflows on a phone instead of forcing the page sideways.
 */

.bdy-boq {
	background: var(--bdy-surface);
	padding: 48px 32px 64px;
}

.bdy-boq__inner {
	max-width: 1240px;
	margin: 0 auto;
}

/* Every child of a grid or flex line may shrink below its content. Without
   this a wide child sets the column width and drags the whole page out of the
   viewport — which is exactly what the old fixed-width table did. */
.bdy-boq__inner *,
.bdy-boq__inner *::before,
.bdy-boq__inner *::after {
	min-width: 0;
}

/* …except the short fixed labels and figures. The rule above is what keeps the
   page inside the viewport, but applied to a unit or an amount it lets a
   two-character label shrink to one and clip its own text. These hold their
   width and let the field beside them give way instead. */
.bdy-boq__field span,
.bdy-boq__assume-unit,
.bdy-boq__addon-unit,
.bdy-boq__driver-delta,
.bdy-boq__group-sub,
.bdy-boq__extra-amount,
.bdy-boq__tier-total,
.bdy-boq__variant-mark,
.bdy-boq__change-delta,
.bdy-boq__abstract-row > span:last-child {
	min-width: auto;
	flex: none;
	white-space: nowrap;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.bdy-boq__crumbs {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12.5px;
	color: var(--bdy-muted-2);
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.bdy-boq__crumbs a {
	display: inline-block;
	padding: 5px 0;
	font-weight: 600;
	color: var(--bdy-blue);
	border-bottom: 1px solid rgba(29, 99, 196, 0.4);
	padding-bottom: 1px;
	text-decoration: none;
}

.bdy-boq__crumbs a:hover {
	color: var(--bdy-ink);
}

.bdy-boq__hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 400px;
	gap: 40px;
	align-items: center;
	margin-bottom: 36px;
}

.bdy-boq__eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bdy-dim);
	margin-bottom: 14px;
}

.bdy-boq__title {
	font-size: clamp(34px, 4.6vw, 54px);
	line-height: 1.06;
	margin-bottom: 16px;
}

.bdy-boq__lede {
	font-size: 15px;
	line-height: 1.62;
	color: var(--bdy-muted);
	max-width: 56ch;
}

/* ── The running total ────────────────────────────────────────────────── */

.bdy-boq__estimate {
	background: linear-gradient(168deg, #16273D 0%, #0B1420 74%);
	color: var(--bdy-on-dark);
	border-radius: 22px;
	padding: 24px 26px 26px;
	box-shadow: 0 24px 52px rgba(16, 27, 43, 0.24);
}

.bdy-boq__estimate-label {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bdy-blue-pale);
	margin-bottom: 8px;
}

.bdy-boq__estimate-value {
	font-size: clamp(32px, 4vw, 44px);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.05;
	color: #fff;
}

.bdy-boq__estimate-note {
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--bdy-blue-pale);
	margin-top: 8px;
}

.bdy-boq__estimate-prov {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	font-size: 12.5px;
	font-weight: 600;
	color: #fff;
}

/* ── Section headings ─────────────────────────────────────────────────── */

.bdy-boq__section {
	margin-bottom: 14px;
}

.bdy-boq__section h3 {
	font-size: clamp(22px, 2.6vw, 28px);
	line-height: 1.2;
}

.bdy-boq__section p {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--bdy-muted-2);
	margin-top: 6px;
	max-width: 64ch;
}

/* ── Cards ────────────────────────────────────────────────────────────── */

.bdy-boq__card {
	border: 1px solid var(--bdy-line);
	background: var(--bdy-surface);
	border-radius: var(--bdy-radius);
	box-shadow: 0 1px 2px rgba(16, 27, 43, 0.04);
	margin-bottom: 22px;
}

.bdy-boq__card--tint {
	background: var(--bdy-surface-alt);
}

.bdy-boq__label {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--bdy-dim);
	margin-bottom: 9px;
}

/* ── Controls ─────────────────────────────────────────────────────────── */

.bdy-boq__controls {
	display: grid;
	grid-template-columns: minmax(170px, 0.9fr) minmax(190px, 1fr) minmax(250px, 1.5fr) minmax(190px, 1.1fr);
	gap: 22px 26px;
	padding: 22px 24px;
}

.bdy-boq__field {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--bdy-line);
	border-radius: 12px;
	background: #fff;
	padding: 0 14px 0 0;
}

.bdy-boq__field input {
	width: 100%;
	border: 0;
	outline: none;
	background: transparent;
	padding: 11px 14px;
	font-size: 17px;
	font-weight: 700;
	font-family: 'IBM Plex Mono', monospace;
	color: var(--bdy-ink);
}

.bdy-boq__field span {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--bdy-muted-2);
	white-space: nowrap;
}

/* Pills, exactly as the packages page uses them. */
.bdy-boq__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
	background: var(--bdy-line-soft);
	padding: 3px;
	border-radius: 999px;
	overflow: hidden;
}

/* Two rows of pills read as a block, not a lozenge, so the track squares off
   rather than curving away from the pills sitting in its corners. */
.bdy-boq__pills:has(.bdy-boq__pill:nth-child(5)) {
	border-radius: 22px;
}

.bdy-boq__tabs {
	display: inline-flex;
	width: auto;
	max-width: 100%;
	margin-bottom: 26px;
}

.bdy-boq__tabs .bdy-boq__pill {
	flex: 0 0 auto;
	padding-inline: 22px;
	text-decoration: none;
	text-align: center;
}

.bdy-boq__pill {
	flex: 1 1 auto;
	font-size: 12.5px;
	font-weight: 600;
	padding: 9px 14px;
	border-radius: 999px;
	border: 0;
	background: transparent;
	color: var(--bdy-muted-2);
	white-space: nowrap;
	transition: background 0.2s ease, color 0.2s ease;
}

.bdy-boq__pill:hover {
	color: var(--bdy-ink);
}

.bdy-boq__pill[aria-pressed='true'] {
	background: var(--bdy-ink);
	color: #fff;
}

.bdy-boq__pill:disabled {
	opacity: 0.4;
}

/* ── Assumptions ──────────────────────────────────────────────────────── */

.bdy-boq__assumes {
	padding: 4px 24px 22px;
}

.bdy-boq__assumes > summary {
	list-style: none;
	cursor: pointer;
	padding: 18px 0 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--bdy-ink);
}

.bdy-boq__assumes > summary::-webkit-details-marker {
	display: none;
}

.bdy-boq__assumes > summary::after {
	content: 'Adjust';
	font-size: 12px;
	font-weight: 600;
	color: var(--bdy-blue);
	white-space: nowrap;
}

.bdy-boq__assumes[open] > summary::after {
	content: 'Hide';
}

.bdy-boq__assume-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 18px 22px;
	padding-top: 4px;
}

.bdy-boq__assume-line {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--bdy-line);
	border-radius: 12px;
	background: #fff;
	padding-right: 12px;
}

.bdy-boq__assume.is-set .bdy-boq__assume-line {
	border-color: var(--bdy-blue);
	box-shadow: 0 0 0 3px rgba(29, 99, 196, 0.11);
}

.bdy-boq__assume-input {
	width: 100%;
	border: 0;
	outline: none;
	background: transparent;
	padding: 10px 12px;
	font-size: 15.5px;
	font-weight: 700;
	font-family: 'IBM Plex Mono', monospace;
	color: var(--bdy-ink);
}

.bdy-boq__assume-unit {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--bdy-muted-2);
}

.bdy-boq__assume-note {
	margin-top: 7px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--bdy-muted-2);
}

.bdy-boq__assume.is-set .bdy-boq__assume-note {
	color: var(--bdy-blue);
	font-weight: 600;
}

.bdy-boq__assume-foot {
	margin-top: 16px;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--bdy-muted-2);
}

/* ── Layout ───────────────────────────────────────────────────────────── */

.bdy-boq__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 350px;
	gap: 26px;
	align-items: start;
}

.bdy-boq__rail {
	position: sticky;
	top: calc(var(--bdy-sticky-top, 0px) + 18px);
}

/* ── View switch ──────────────────────────────────────────────────────── */

.bdy-boq__viewbar {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.bdy-boq__viewtitle {
	font-size: 15px;
	font-weight: 700;
}

.bdy-boq__viewnote {
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--bdy-muted-2);
	margin-top: 4px;
	max-width: 60ch;
}

/* ── The schedule ─────────────────────────────────────────────────────── */

.bdy-boq__group {
	border: 1px solid var(--bdy-line);
	border-radius: var(--bdy-radius);
	background: var(--bdy-surface);
	box-shadow: 0 1px 2px rgba(16, 27, 43, 0.04);
	margin-bottom: 14px;
	overflow: hidden;
}

.bdy-boq__group-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 15px 20px;
	background: var(--bdy-surface-alt);
	border-bottom: 1px solid var(--bdy-line-soft);
}

.bdy-boq__group-code {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 8px;
	background: var(--bdy-ink);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	flex: none;
}

.bdy-boq__group-title {
	font-size: 14.5px;
	font-weight: 700;
	flex: 1;
}

.bdy-boq__group-sub {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

/* Row: name grows, figures and amount sit beside it on wide screens and drop
   underneath on narrow ones. No fixed width anywhere, so nothing overflows. */
.bdy-boq__row {
	display: grid;
	/* Fixed tracks, not `auto`: every row is its own grid, so content-sized
	   columns would let each line find a different width and the figures would
	   stop lining up down the page. */
	grid-template-columns: minmax(0, 1fr) auto 108px 34px;
	grid-template-areas: 'name figures amount toggle';
	align-items: center;
	gap: 8px 18px;
	padding: 14px 20px;
	border-bottom: 1px solid var(--bdy-line-soft);
}

.bdy-boq__row:last-of-type {
	border-bottom: 0;
}

.bdy-boq__row.is-off {
	opacity: 0.5;
}

.bdy-boq__row.is-open {
	background: var(--bdy-surface-alt);
	border-bottom-color: transparent;
}

.bdy-boq__name {
	grid-area: name;
	display: block;
	width: 100%;
	text-align: left;
	background: transparent;
	border: 0;
	padding: 0;
	color: inherit;
}

.bdy-boq__name > span:first-child {
	display: block;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
}

.bdy-boq__how {
	display: block;
	margin-top: 4px;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--bdy-muted-2);
}

.bdy-boq__figures {
	grid-area: figures;
	display: grid;
	grid-template-columns: 92px 92px;
	gap: 16px;
}

.bdy-boq__fig {
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-align: right;
}

.bdy-boq__fig-key {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bdy-dim);
}

.bdy-boq__fig-val {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 13px;
	color: var(--bdy-ink-soft);
	white-space: nowrap;
}

.bdy-boq__brand {
	grid-area: figures;
	width: 100%;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--bdy-muted);
}

/* The specification column takes a share of the row rather than sizing to its
   own text, so short and long entries start on the same line. */
.bdy-boq__table.is-brands .bdy-boq__row {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) 108px 34px;
}

.bdy-boq__amount {
	grid-area: amount;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 14px;
	font-weight: 700;
	text-align: right;
	white-space: nowrap;
}

.bdy-boq__row.is-off .bdy-boq__amount {
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: var(--bdy-dim);
}

.bdy-boq__toggle {
	grid-area: toggle;
	width: 28px;
	height: 28px;
	border-radius: 9px;
	border: 1px solid var(--bdy-line);
	background: #fff;
	color: var(--bdy-muted-2);
	font-size: 15px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bdy-boq__toggle:hover {
	border-color: var(--bdy-blue);
	color: var(--bdy-blue);
}

.bdy-boq__total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	background: var(--bdy-ink);
	color: #fff;
	border-radius: var(--bdy-radius);
	font-size: 14px;
	font-weight: 700;
}

.bdy-boq__total span:last-child {
	font-family: 'IBM Plex Mono', monospace;
}

/* ── Open row ─────────────────────────────────────────────────────────── */

.bdy-boq__detail {
	padding: 4px 20px 20px;
	background: var(--bdy-surface-alt);
	border-bottom: 1px solid var(--bdy-line-soft);
}

.bdy-boq__measure {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 12px;
	padding: 12px 14px;
	border-radius: 12px;
	background: #fff;
	border: 1px solid var(--bdy-line-soft);
	margin-bottom: 16px;
}

.bdy-boq__measure-key {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bdy-dim);
}

.bdy-boq__measure-val {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 12.5px;
	color: var(--bdy-ink);
}

.bdy-boq__variants {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 10px;
	margin-bottom: 12px;
}

.bdy-boq__variant {
	border: 1px solid var(--bdy-line);
	border-radius: 12px;
	background: #fff;
	padding: 12px 14px;
}

.bdy-boq__variant.is-self {
	border-color: var(--bdy-blue);
	box-shadow: 0 0 0 3px rgba(29, 99, 196, 0.1);
}

.bdy-boq__variant-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 6px;
}

.bdy-boq__variant-name {
	font-size: 12.5px;
	font-weight: 700;
}

.bdy-boq__variant-mark {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 10.5px;
	color: var(--bdy-muted-2);
}

.bdy-boq__variant-spec {
	font-size: 12px;
	line-height: 1.45;
	color: var(--bdy-muted);
	margin-bottom: 8px;
}

.bdy-boq__variant-foot {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11.5px;
	color: var(--bdy-muted-2);
}

.bdy-boq__variant-amount {
	font-weight: 700;
	color: var(--bdy-ink);
}

/* The specification the package actually promises for this line, as it is
   written in the master data. */
.bdy-boq__spec {
	display: grid;
	grid-template-columns: minmax(140px, 0.8fr) minmax(0, 2fr);
	gap: 0;
	margin: 0 0 14px;
	border: 1px solid var(--bdy-line-soft);
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
}

.bdy-boq__spec-key,
.bdy-boq__spec-val {
	padding: 9px 14px;
	border-top: 1px solid var(--bdy-line-soft);
	font-size: 12.5px;
	line-height: 1.5;
	margin: 0;
}

.bdy-boq__spec-key:first-of-type,
.bdy-boq__spec-key:first-of-type + .bdy-boq__spec-val {
	border-top: 0;
}

.bdy-boq__spec-key {
	font-weight: 700;
	color: var(--bdy-ink);
	background: var(--bdy-surface-alt);
}

.bdy-boq__spec-val {
	color: var(--bdy-muted);
}

@media (max-width: 620px) {
	.bdy-boq__spec { grid-template-columns: 1fr; }
	.bdy-boq__spec-val { border-top: 0; padding-top: 0; }
	.bdy-boq__spec-key { background: transparent; padding-bottom: 2px; }
}

.bdy-boq__spread {
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--bdy-muted-2);
}

/* ── Section D: additional items ──────────────────────────────────────── */

/* A rate-only row is still worth reading, so it dims rather than disappears. */
.bdy-boq__row--addon {
	/* A fixed quantity track, not `auto`. Each row is its own grid, so an
	   auto column takes its width from that row's unit label — "sqft/ft"
	   against "litres" — and every input lands at a different offset. */
	grid-template-columns: minmax(0, 1fr) 186px 108px 34px;
	grid-template-areas: 'name qty amount toggle';
}

.bdy-boq__row--addon.is-quiet .bdy-boq__amount {
	color: var(--bdy-dim);
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
	font-weight: 600;
}

.bdy-boq__row--addon .bdy-boq__addon-qty {
	grid-area: qty;
	padding: 0;
	/* Box and unit each get their own track so both columns line up down the
	   page whatever the unit is called. */
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	gap: 10px;
	align-items: center;
}

.bdy-boq__row--addon .bdy-boq__addon-input {
	width: 100%;
}

.bdy-boq__row--addon .bdy-boq__addon-unit {
	white-space: normal;
	line-height: 1.3;
}

.bdy-boq__row--addon .bdy-boq__name > span:first-child {
	font-weight: 600;
}

.bdy-boq__row--addon .bdy-boq__toggle[aria-pressed='true'] {
	background: var(--bdy-blue);
	border-color: var(--bdy-blue);
	color: #fff;
}

/* ── Notes and exclusions ─────────────────────────────────────────────── */

.bdy-boq__notes {
	margin-top: 30px;
	padding: 24px;
	border: 1px solid var(--bdy-line);
	border-radius: var(--bdy-radius);
	background: var(--bdy-surface-alt);
}

.bdy-boq__notelist {
	margin: 4px 0 0;
	padding-left: 20px;
	columns: 2;
	column-gap: 36px;
}

.bdy-boq__notelist li {
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--bdy-muted);
	margin-bottom: 9px;
	break-inside: avoid;
	padding-left: 4px;
}

@media (max-width: 860px) {
	.bdy-boq__notelist { columns: 1; }
}

/* ── Abstract ─────────────────────────────────────────────────────────── */

.bdy-boq__abstract {
	border: 1px solid var(--bdy-line);
	border-radius: var(--bdy-radius);
	background: var(--bdy-surface);
	box-shadow: 0 1px 2px rgba(16, 27, 43, 0.04);
	overflow: hidden;
	margin-bottom: 16px;
}

.bdy-boq__abstract-head {
	padding: 20px 20px 18px;
	background: linear-gradient(168deg, #16273D 0%, #0B1420 74%);
	color: var(--bdy-on-dark);
}

.bdy-boq__abstract-total {
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: #fff;
	line-height: 1.1;
}

.bdy-boq__abstract-note {
	font-size: 12px;
	line-height: 1.5;
	color: var(--bdy-blue-pale);
	margin-top: 6px;
}

.bdy-boq__abstract-prov {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	font-size: 12px;
	font-weight: 600;
	color: #fff;
}

.bdy-boq__abstract-rows {
	padding: 6px 20px 14px;
}

.bdy-boq__abstract-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid var(--bdy-line-soft);
	font-size: 12.5px;
	color: var(--bdy-muted);
}

.bdy-boq__abstract-row:last-child {
	border-bottom: 0;
}

.bdy-boq__abstract-row span:last-child {
	font-family: 'IBM Plex Mono', monospace;
	white-space: nowrap;
}

.bdy-boq__abstract-row.is-strong {
	color: var(--bdy-ink);
	font-weight: 700;
}

.bdy-boq__abstract-row.is-muted {
	font-style: italic;
	color: var(--bdy-muted-2);
}

.bdy-boq__tie {
	margin: 10px 20px 18px;
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--bdy-surface-alt);
	font-size: 11.5px;
	line-height: 1.6;
	color: var(--bdy-muted-2);
}

.bdy-boq__tie.is-warn {
	background: rgba(29, 99, 196, 0.07);
	color: var(--bdy-blue);
}

/* ── Toggle lists (add-ons, provisions, tiers) ────────────────────────── */

.bdy-boq__extras {
	padding: 14px 20px 18px;
	border-top: 1px solid var(--bdy-line-soft);
}

.bdy-boq__extra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 10px 0;
	background: transparent;
	border: 0;
	text-align: left;
	color: inherit;
	font-size: 13px;
}

.bdy-boq__extra-left {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bdy-boq__extra-note {
	font-size: 11px;
	color: var(--bdy-muted-2);
}

.bdy-boq__extra-right {
	display: flex;
	align-items: center;
	gap: 10px;
}

.bdy-boq__extra-amount {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
}

.bdy-boq__box {
	width: 20px;
	height: 20px;
	border-radius: 6px;
	border: 1.5px solid var(--bdy-line-strong);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	color: transparent;
	flex: none;
}

.bdy-boq__extra[aria-pressed='true'] .bdy-boq__box {
	background: var(--bdy-blue);
	border-color: var(--bdy-blue);
	color: #fff;
}

.bdy-boq__addon-row {
	border-bottom: 1px solid var(--bdy-line-soft);
}

.bdy-boq__addon-row:last-child {
	border-bottom: 0;
}

.bdy-boq__addon-row .bdy-boq__extra {
	padding-bottom: 4px;
}

.bdy-boq__addon-qty {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 0 12px;
}

.bdy-boq__addon-input {
	width: 82px;
	padding: 7px 10px;
	border: 1px solid var(--bdy-line);
	border-radius: 10px;
	background: #fff;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 13px;
	font-weight: 700;
	color: var(--bdy-ink);
}

.bdy-boq__addon-qty.is-set .bdy-boq__addon-input {
	border-color: var(--bdy-blue);
	box-shadow: 0 0 0 3px rgba(29, 99, 196, 0.11);
}

.bdy-boq__addon-unit {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--bdy-muted-2);
}

.bdy-boq__addon-hint {
	margin-left: auto;
	font-size: 11px;
	color: var(--bdy-muted-2);
}

.bdy-boq__addon-qty.is-set .bdy-boq__addon-hint {
	color: var(--bdy-blue);
	font-weight: 600;
}

/* ── Tier switcher ────────────────────────────────────────────────────── */

.bdy-boq__tiers {
	border: 1px solid var(--bdy-line);
	border-radius: var(--bdy-radius);
	background: var(--bdy-surface);
	padding: 16px 18px 12px;
	margin-bottom: 16px;
}

.bdy-boq__tier {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 11px 12px;
	margin-bottom: 6px;
	border: 1px solid var(--bdy-line-soft);
	border-radius: 12px;
	background: #fff;
	text-align: left;
	color: inherit;
}

.bdy-boq__tier:hover {
	border-color: var(--bdy-line-strong);
}

.bdy-boq__tier[aria-pressed='true'] {
	border-color: var(--bdy-blue);
	background: rgba(29, 99, 196, 0.05);
}

.bdy-boq__tier-name {
	font-size: 13px;
	font-weight: 700;
}

.bdy-boq__tier-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 1px;
}

.bdy-boq__tier-delta {
	font-size: 10.5px;
	color: var(--bdy-muted-2);
}

.bdy-boq__tier-total {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}

/* ── CTA ──────────────────────────────────────────────────────────────── */

.bdy-boq__cta-wrap {
	padding: 0 20px 20px;
}

.bdy-boq__cta {
	display: block;
	width: 100%;
	text-align: center;
	padding: 14px 20px;
	border-radius: 999px;
	background: var(--bdy-blue);
	color: #fff;
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
}

.bdy-boq__cta:hover {
	background: var(--bdy-ink);
}

.bdy-boq__phones {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 12px;
}

.bdy-boq__phones a {
	display: inline-block;
	padding: 4px 0;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--bdy-muted-2);
	text-decoration: none;
}

.bdy-boq__phones a:hover {
	color: var(--bdy-blue);
}

/* ── Why the price changes ────────────────────────────────────────────── */

.bdy-boq__why {
	border: 1px solid var(--bdy-line);
	border-radius: var(--bdy-radius);
	background: var(--bdy-surface-alt);
	padding: 24px;
	margin-top: 28px;
}

.bdy-boq__why-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.bdy-boq__why-title {
	font-size: clamp(20px, 2.4vw, 26px);
	line-height: 1.22;
}

.bdy-boq__why-lead {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--bdy-muted-2);
	margin-top: 6px;
	max-width: 62ch;
}

.bdy-boq__drivers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 12px;
	margin-bottom: 20px;
}

.bdy-boq__driver {
	border: 1px solid var(--bdy-line);
	border-radius: 14px;
	background: #fff;
	padding: 16px;
}

.bdy-boq__driver-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
}

.bdy-boq__driver-name {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
}

.bdy-boq__driver-delta {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--bdy-blue);
	white-space: nowrap;
}

.bdy-boq__driver-delta.is-down {
	color: #12805C;
}

.bdy-boq__driver-key {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bdy-dim);
	margin-bottom: 3px;
}

.bdy-boq__driver-key.is-to {
	margin-top: 10px;
	color: var(--bdy-blue);
}

.bdy-boq__driver-from,
.bdy-boq__driver-to {
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--bdy-muted);
}

.bdy-boq__driver-to {
	color: var(--bdy-ink);
	font-weight: 600;
}

.bdy-boq__driver-foot {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--bdy-line-soft);
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11px;
	color: var(--bdy-muted-2);
}

.bdy-boq__changes-wrap[hidden] {
	display: none;
}

.bdy-boq__changes-wrap > summary {
	list-style: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 1px solid var(--bdy-line);
	border-radius: 999px;
	background: #fff;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--bdy-ink);
}

.bdy-boq__changes-wrap > summary::-webkit-details-marker {
	display: none;
}

.bdy-boq__changes-wrap > summary::after {
	content: '▾';
	color: var(--bdy-blue);
}

.bdy-boq__changes-wrap[open] > summary {
	margin-bottom: 12px;
}

.bdy-boq__changes-wrap[open] > summary::after {
	content: '▴';
}

.bdy-boq__changes {
	border: 1px solid var(--bdy-line);
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
}

.bdy-boq__change-head,
.bdy-boq__change,
.bdy-boq__change-total {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) auto;
	gap: 6px 14px;
	padding: 11px 16px;
	align-items: baseline;
}

.bdy-boq__change-head {
	background: var(--bdy-surface-alt);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bdy-dim);
}

.bdy-boq__change {
	border-top: 1px solid var(--bdy-line-soft);
	font-size: 12.5px;
	color: var(--bdy-muted);
}

.bdy-boq__change-name {
	font-weight: 600;
	color: var(--bdy-ink);
}

.bdy-boq__change-to {
	color: var(--bdy-ink);
}

.bdy-boq__change-to.is-same {
	color: var(--bdy-muted-2);
}

.bdy-boq__change-delta {
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 700;
	color: var(--bdy-blue);
	text-align: right;
	white-space: nowrap;
}

.bdy-boq__change-delta.is-down {
	color: #12805C;
}

.bdy-boq__change-total {
	border-top: 1px solid var(--bdy-line);
	background: var(--bdy-surface-alt);
	font-size: 12.5px;
	font-weight: 700;
	color: var(--bdy-ink);
}

.bdy-boq__why-summary {
	font-size: 13px;
	line-height: 1.65;
	color: var(--bdy-muted-2);
	margin-top: 16px;
	max-width: 74ch;
}

.bdy-boq__why-summary[hidden] {
	display: none;
}

.bdy-boq__foot {
	font-size: 12px;
	line-height: 1.65;
	color: var(--bdy-muted-2);
	margin-top: 24px;
	max-width: 88ch;
}

.bdy-boq__ghost,
.bdy-boq__solid {
	font-size: 12.5px;
	font-weight: 700;
	padding: 10px 18px;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
}

.bdy-boq__ghost {
	border: 1px solid rgba(255, 255, 255, 0.28);
	color: #fff;
}

.bdy-boq__ghost:hover {
	background: rgba(255, 255, 255, 0.1);
}

.bdy-boq__solid {
	background: var(--bdy-blue);
	color: #fff;
}

.bdy-boq__solid:hover {
	background: #fff;
	color: var(--bdy-ink);
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
	.bdy-boq__hero { grid-template-columns: 1fr; gap: 26px; }
	.bdy-boq__controls { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
	.bdy-boq__grid { grid-template-columns: 1fr; }
	.bdy-boq__rail { position: static; }
}

@media (max-width: 860px) {
	/* Figures move under the name and read left-to-right, so the schedule
	   never needs to scroll sideways. */
	.bdy-boq__row {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			'name    toggle'
			'figures amount';
		gap: 10px 14px;
	}
	.bdy-boq__figures { grid-template-columns: auto auto; justify-content: start; }
	.bdy-boq__fig { text-align: left; }
	/* Two classes: the generic row rule above sets areas this one must replace,
	   and equal specificity would leave it to source order. */
	.bdy-boq__row.bdy-boq__row--addon {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			'name   toggle'
			'qty    amount';
		align-items: center;
	}
	.bdy-boq__row.bdy-boq__row--addon .bdy-boq__addon-qty { justify-content: flex-start; }
	.bdy-boq__row.bdy-boq__row--addon .bdy-boq__amount { text-align: right; }
	.bdy-boq__table.is-brands .bdy-boq__row {
		grid-template-columns: minmax(0, 1fr) auto;
	}
	.bdy-boq__change-head { display: none; }
	.bdy-boq__change,
	.bdy-boq__change-total {
		grid-template-columns: minmax(0, 1fr) auto;
		row-gap: 4px;
	}
	.bdy-boq__change-name { grid-column: 1; }
	.bdy-boq__change-delta { grid-column: 2; grid-row: 1; }
	.bdy-boq__change-from,
	.bdy-boq__change-to { grid-column: 1 / -1; font-size: 12px; }
}

@media (max-width: 620px) {
	.bdy-boq { padding: 28px 16px 56px; }
	.bdy-boq__toggle { width: 40px; height: 40px; font-size: 18px; }
	/* Text links need a little height of their own to be tappable. */
	.bdy-boq__crumbs a,
	.bdy-boq__phones a { display: inline-block; padding: 6px 0; }
	.bdy-boq__controls { padding: 18px 16px; gap: 18px; }
	.bdy-boq__assumes { padding: 0 16px 18px; }
	.bdy-boq__group-head,
	.bdy-boq__row { padding-left: 16px; padding-right: 16px; }
	.bdy-boq__detail { padding: 4px 16px 18px; }
	.bdy-boq__why { padding: 18px 16px; }
	.bdy-boq__estimate { padding: 20px; }
}

/* ── Theme armour ─────────────────────────────────────────────────────────
 * See the note in base.css. A theme's global element styling must not reach
 * inside the sheet. Doubling the class raises specificity above a theme's
 * single-class and element rules without resorting to !important. */

.bdy.bdy .bdy-boq__title,
.bdy.bdy .bdy-boq__why-title,
.bdy.bdy .bdy-boq__section h3 {
	font-family: 'DM Serif Display', Georgia, serif;
	font-weight: 400;
	color: var(--bdy-ink);
	margin: 0;
	text-transform: none;
	letter-spacing: -0.02em;
}

.bdy.bdy .bdy-boq__field input,
.bdy.bdy .bdy-boq__assume-input,
.bdy.bdy .bdy-boq__addon-input {
	height: auto;
	margin: 0;
	max-width: none;
	line-height: 1.2;
	background: transparent;
	color: var(--bdy-ink);
	font-family: 'IBM Plex Mono', monospace;
}

.bdy.bdy .bdy-boq__addon-input {
	background: #fff;
}

.bdy.bdy .bdy-boq__field input:focus,
.bdy.bdy .bdy-boq__assume-input:focus,
.bdy.bdy .bdy-boq__addon-input:focus {
	outline: none;
	box-shadow: none;
}

.bdy.bdy .bdy-boq__cta,
.bdy.bdy .bdy-boq__solid {
	background: var(--bdy-blue);
	color: #fff;
}

.bdy.bdy .bdy-boq__cta:hover {
	background: var(--bdy-ink);
	color: #fff;
}

.bdy.bdy .bdy-boq__solid:hover {
	background: #fff;
	color: var(--bdy-ink);
}

.bdy.bdy .bdy-boq__ghost {
	color: #fff;
}

.bdy.bdy .bdy-boq__crumbs a {
	color: var(--bdy-blue);
}

/* Armour needs its own :hover. Raising specificity to beat the theme also
   beats this sheet's own hover rule — `.bdy.bdy .bdy-boq__crumbs a` (0,3,1)
   out-specifies `.bdy-boq__crumbs a:hover` (0,2,1) — so the link went dead on
   hover. Every armoured colour states its hover alongside it. */
.bdy.bdy .bdy-boq__crumbs a:hover {
	color: var(--bdy-ink);
}

.bdy.bdy .bdy-boq__phones a:hover {
	color: var(--bdy-blue);
}

/* The service-type tabs are anchors, so a theme's link colour reaches them
   and out-specifies a single-class rule. */
.bdy.bdy .bdy-boq__pill {
	color: var(--bdy-muted-2);
	text-decoration: none;
}

.bdy.bdy .bdy-boq__pill:hover {
	color: var(--bdy-ink);
}

.bdy.bdy .bdy-boq__pill[aria-pressed='true'] {
	background: var(--bdy-ink);
	color: #fff;
}

.bdy.bdy .bdy-boq__phones a {
	color: var(--bdy-muted-2);
}

/* ── Hover states ─────────────────────────────────────────────────────────
 * See the note in packages.css. A control that is already selected keeps its
 * selected look on hover rather than fighting it. */

.bdy-boq__name:hover > span:first-child {
	color: var(--bdy-blue);
}

.bdy-boq__row:hover {
	background: var(--bdy-surface-alt);
}

.bdy-boq__row.is-open:hover {
	background: var(--bdy-surface-alt);
}

.bdy-boq__extra:hover .bdy-boq__box {
	border-color: var(--bdy-blue);
}

.bdy-boq__extra:hover {
	color: var(--bdy-blue);
}

.bdy-boq__extra[aria-pressed='true']:hover .bdy-boq__box {
	background: var(--bdy-blue);
	border-color: var(--bdy-blue);
}

.bdy-boq__assumes > summary:hover,
.bdy-boq__changes-wrap > summary:hover {
	color: var(--bdy-blue);
}

.bdy-boq__group-head:hover {
	background: var(--bdy-line-soft);
}