/* NABC Build Cost Planner */
.bcp {
	--bcp-primary: #017152;
	--bcp-dark: #00382B;
	--bcp-accent: #552F4F;
	--bcp-ink: #212B31;
	--bcp-muted: #5f6b73;
	--bcp-line: #e3e7e5;
	--bcp-soft: #f3f7f5;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--bcp-ink);
	max-width: 1180px;
	margin: 0 auto;
	box-sizing: border-box;
}
.bcp *, .bcp *::before, .bcp *::after { box-sizing: border-box; }

.bcp .bcp-title {
	font-family: Manrope, Inter, sans-serif;
	font-weight: 700;
	font-size: clamp(28px, 4vw, 40px);
	line-height: 1.15;
	color: var(--bcp-ink);
	margin: 0 0 8px;
}
.bcp .bcp-intro { color: var(--bcp-muted); font-size: 16px; margin: 0 0 24px; max-width: 560px; }

.bcp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 860px) { .bcp-grid { grid-template-columns: 1fr; } }

.bcp-panel { border-radius: 16px; padding: 28px; }
@media (max-width: 480px) { .bcp-panel { padding: 20px; } }

.bcp-inputs { background: #fff; border: 1px solid var(--bcp-line); }
.bcp-field + .bcp-field { margin-top: 26px; }
.bcp .bcp-label {
	display: block;
	font-family: Manrope, Inter, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bcp-muted);
	margin: 0 0 10px;
}
.bcp-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.bcp-size-val { font-family: Manrope, Inter, sans-serif; font-weight: 700; font-size: 20px; color: var(--bcp-ink); }

/* Project chips */
.bcp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bcp .bcp-chip, .bcp .bcp-seg {
	font-family: Manrope, Inter, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	padding: 9px 14px;
	border-radius: 999px;
	border: 1px solid var(--bcp-line);
	background: #fff;
	color: var(--bcp-ink);
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: none;
	margin: 0;
}
@media (hover: hover) {
	.bcp .bcp-chip:not([aria-pressed="true"]):hover, .bcp .bcp-seg:not([aria-pressed="true"]):hover { border-color: var(--bcp-primary); color: var(--bcp-primary); background: var(--bcp-soft); }
}
.bcp .bcp-chip[aria-pressed="true"], .bcp .bcp-seg[aria-pressed="true"] {
	background: var(--bcp-primary);
	border-color: var(--bcp-primary);
	color: #fff;
}
.bcp .bcp-chip:focus-visible, .bcp .bcp-seg:focus-visible, .bcp-select:focus-visible, .bcp-postcode:focus-visible, .bcp-range:focus-visible, .bcp-cta:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--bcp-primary) 40%, transparent);
	outline-offset: 2px;
}

/* Spec segmented control */
.bcp-segs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bcp .bcp-seg { border-radius: 10px; padding: 11px 8px; text-align: center; }
@media (max-width: 480px) { .bcp-segs { grid-template-columns: 1fr; } }

.bcp .bcp-help { font-size: 13px; color: var(--bcp-muted); margin: 10px 0 0; line-height: 1.5; }

/* Slider */
.bcp-range {
	-webkit-appearance: none; appearance: none;
	width: 100%; height: 6px; border-radius: 6px; margin: 8px 0;
	background: linear-gradient(to right, var(--bcp-primary) var(--bcp-fill, 50%), var(--bcp-line) var(--bcp-fill, 50%));
	cursor: pointer; border: 0; padding: 0;
}
.bcp-range::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	width: 22px; height: 22px; border-radius: 50%;
	background: #fff; border: 5px solid var(--bcp-primary);
	box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.bcp-range::-moz-range-thumb {
	width: 14px; height: 14px; border-radius: 50%;
	background: #fff; border: 5px solid var(--bcp-primary);
	box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

/* Region */
.bcp-region-row { display: grid; grid-template-columns: 1fr 140px; gap: 8px; }
@media (max-width: 480px) { .bcp-region-row { grid-template-columns: 1fr; } }
.bcp .bcp-select, .bcp .bcp-postcode {
	width: 100%; height: 46px; margin: 0;
	padding: 0 14px;
	border: 1px solid var(--bcp-line); border-radius: 10px;
	background-color: #fff; color: var(--bcp-ink);
	font: 500 15px/1.2 Inter, sans-serif;
}
.bcp .bcp-postcode { text-transform: uppercase; }
.bcp .bcp-postcode::placeholder { text-transform: none; color: #9aa4aa; }

/* Result card */
.bcp-result {
	background: var(--bcp-dark);
	color: #fff;
	position: sticky; top: 24px;
}
@media (max-width: 860px) { .bcp-result { position: static; } }
.bcp .bcp-eyebrow {
	display: inline-block;
	font-family: Manrope, Inter, sans-serif;
	font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: #fff; background: var(--bcp-accent);
	padding: 5px 10px; border-radius: 6px;
}
.bcp .bcp-big {
	font-family: Manrope, Inter, sans-serif;
	font-weight: 800;
	font-size: clamp(30px, 4.2vw, 42px);
	line-height: 1.1;
	margin: 16px 0 6px;
	font-variant-numeric: tabular-nums;
	color: #fff;
}
.bcp .bcp-big span { font-weight: 500; font-size: .6em; opacity: .75; }
.bcp .bcp-typical { margin: 0; font-size: 16px; color: rgba(255,255,255,.85); }
.bcp .bcp-typical strong { color: #fff; }
.bcp .bcp-summary { margin: 4px 0 20px; font-size: 13px; color: rgba(255,255,255,.6); }

.bcp .bcp-lines { margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.15); }
.bcp .bcp-lines > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 14px; }
.bcp .bcp-lines dt { margin: 0; color: rgba(255,255,255,.8); font-weight: 400; }
.bcp .bcp-lines dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: #fff; }
.bcp .bcp-lines .bcp-total { border-bottom: 0; padding-top: 14px; font-size: 17px; }
.bcp .bcp-lines .bcp-total dt, .bcp .bcp-lines .bcp-total dd { font-family: Manrope, Inter, sans-serif; font-weight: 800; color: #fff; }

.bcp .bcp-note { font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,.6); margin: 14px 0 0; }
.bcp .bcp-note-sm { margin-top: 6px; }

.bcp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.bcp-split > div { background: rgba(255,255,255,.08); border-radius: 10px; padding: 12px 14px; }
.bcp-split span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.bcp-split strong { display: block; margin-top: 4px; font-family: Manrope, Inter, sans-serif; font-size: 18px; color: #fff; font-variant-numeric: tabular-nums; }

.bcp .bcp-cta {
	display: flex; justify-content: center; align-items: center; gap: 8px;
	margin-top: 22px; width: 100%;
	padding: 15px 20px; border-radius: 8px;
	background: #fff; color: var(--bcp-dark);
	font-family: Manrope, Inter, sans-serif; font-weight: 700; font-size: 15px;
	text-decoration: none; transition: background .15s, color .15s;
}
.bcp .bcp-cta:hover { background: var(--bcp-primary); color: #fff; }
.bcp .bcp-method {
	display: flex; justify-content: center; align-items: center; gap: 6px;
	margin-top: 14px; padding: 6px;
	color: #fff; font-family: Manrope, Inter, sans-serif; font-weight: 600; font-size: 14px;
	text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.4);
}
.bcp .bcp-method:hover { color: #fff; text-decoration-color: #fff; }