/**
 * Section components.
 *
 * The governing rule: no two consecutive sections share a shape. Alternating
 * ground colour is not variety — a page where every section is "eyebrow,
 * heading, row of cards" reads as a template no matter what colour it is.
 *
 * So the page moves through: full-bleed image, thin data strip, interactive
 * tool, two-column comparison, asymmetric image grid, four-square sequence,
 * image-beside-text, full-bleed dark, three-up detail, image-beside-text
 * reversed, narrow accordion, full-bleed close.
 */

/* --------------------------------------------------------------------------
 * Hero — full bleed
 * ----------------------------------------------------------------------- */

.bm-hero__bleed {
	position: relative;
	margin-block-start: clamp(2rem, 5vw, 3.5rem);
	background: var(--bm-surface-sunken);
}
/*
 * The height of the hero photograph, and the one clamp on this page whose
 * floor was wrong.
 *
 * WHY THE MINIMUM IS FREE TO CHANGE AND THE MAXIMUM IS NOT.
 *
 *     clamp(MIN, 52vw, MAX)  =  max(MIN, min(52vw, MAX))
 *
 * The maximum takes over wherever 52vw exceeds it, which is every width at or
 * above 640 / 0.52 = 1230.8px. So at the three desktop control widths:
 *
 *     1280px   52vw = 665.6px > 640px  ->  640px
 *     1440px   52vw = 748.8px > 640px  ->  640px
 *     1920px   52vw = 998.4px > 640px  ->  640px
 *
 * before this change, and 640px at all three after it, because the floor is
 * not consulted once the maximum has won. Desktop is arithmetically identical.
 * The maximum itself is never free, and the 52vw coefficient is free only
 * while it stays at or above 640/1280 = 50vw; neither is touched here.
 *
 * WHAT THE OLD FLOOR DID.
 *
 * 20rem governed everything below 320 / 0.52 = 615.4px, so every phone got a
 * 320px-tall photograph: 56% of a 320x568 screen before the visitor has read a
 * word. Worse, it forced the 1376x768 master (1.79:1) into a 320x320 box under
 * object-fit: cover, so the frame is scaled to 573px wide and 44% of it is cut
 * off the sides, which is where the people in these photographs are.
 *
 * 11rem is chosen from that arithmetic rather than by eye. At 320px it gives a
 * 320x176 box = 1.82:1, within 2% of the master's own 1.79:1, so almost the
 * whole frame survives. It governs only below 176 / 0.52 = 338.5px; from there
 * to 615px the 52vw term takes over at a constant 1.92:1, a 7% crop instead of
 * a 44% one. At 768px and above nothing changes at all, because
 * 52vw already beat the old floor there.
 *
 * Measured: 320px 320 -> 176 · 360px 320 -> 187 · 390px 320 -> 203 ·
 * 430px 320 -> 224 · 768px 399 -> 399 · 1024px 532 -> 532 · 1280px 640 -> 640.
 *
 * The landscape cap that goes with this is at the end of the file: 52vw on a
 * 740x360 phone asks for 385px, which is taller than the whole viewport.
 */
.bm-hero__bleed img {
	display: block;
	inline-size: 100%;
	block-size: clamp(11rem, 52vw, 40rem);
	object-fit: cover;
}
.bm-hero__bleed::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 55%;
	background: linear-gradient(to top, rgb(6 23 47 / 80%) 0%, rgb(6 23 47 / 45%) 30%, transparent 100%);
	pointer-events: none;
}
.bm-hero__caption {
	position: absolute;
	z-index: 1; /* above the scrim: ::after is painted as the last child */
	inset-block-end: clamp(1.5rem, 4vw, 3rem);
	inset-inline-start: 0;
	inline-size: 100%;
	padding-inline: clamp(1.25rem, 5vw, 3rem);
	max-inline-size: 72rem;
	margin-inline: auto;
	inset-inline: 0;
	color: var(--bm-paper-50);
	font-size: var(--bm-text-base);
	font-weight: 500;
	text-shadow: 0 1px 16px rgb(6 23 47 / 70%);
}

/* --------------------------------------------------------------------------
 * Proof strip — facts only, set like data
 * ----------------------------------------------------------------------- */

.bm-proof {
	background: var(--bm-ink-900);
	color: var(--bm-paper-50);
	padding-block: var(--bm-space-6);
}
.bm-proof__inner {
	display: grid;
	gap: var(--bm-space-4) var(--bm-space-8);
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.bm-proof__item { display: flex; flex-direction: column; gap: 0.2rem; }
.bm-proof__item .k {
	font-size: 0.6875rem;
	letter-spacing: var(--bm-tracking-wide);
	text-transform: uppercase;
	color: var(--bm-ink-300);
}
.bm-proof__item .v { font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
 * Estimate — the tool, in the page
 * ----------------------------------------------------------------------- */

.bm-estimate { background: var(--bm-surface); }
.bm-centred { text-align: center; align-items: center; }
.bm-centred__p { margin-inline: auto; }

/* --------------------------------------------------------------------------
 * Services — asymmetric on purpose
 *
 * The first two are wide, the last three narrow. A five-item grid of equal
 * boxes is the shape every template produces; unequal weighting reads as a
 * decision, and it matches reality — house and interstate are the products
 * that matter most.
 * ----------------------------------------------------------------------- */

.bm-services { display: grid; gap: var(--bm-space-4); }

.bm-service {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--bm-radius-lg);
	background: var(--bm-ink-900);
	text-decoration: none;
	color: var(--bm-paper-50);
	min-block-size: 17rem;
	isolation: isolate;
}
.bm-service__media { position: absolute; inset: 0; z-index: -2; }
.bm-service__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1); }
/*
 * The scrim, deepened.
 *
 * The old ramp reached 52% opacity at the 45% mark, which was ample over the
 * darker photographs and nowhere near enough over the bright ones — the white
 * pantechnicon on Interstate and the lit roller door on Storage both pushed
 * the title towards the pale end of the image and swallowed it. A gradient
 * tuned to the friendliest photograph is not tuned at all.
 *
 * So the ramp now carries a fourth stop and holds real density through the
 * lower two thirds, where the title and the copy actually sit. The text-shadow
 * below is the belt to that brace: it does nothing on a dark photograph and
 * keeps the letterforms legible on a bright one, at no cost to either.
 */
.bm-service::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to top,
		rgb(6 23 47 / 93%) 0%,
		rgb(6 23 47 / 78%) 32%,
		rgb(6 23 47 / 52%) 62%,
		rgb(6 23 47 / 26%) 100%
	);
}
.bm-service__body {
	margin-block-start: auto;
	display: flex;
	flex-direction: column;
	gap: var(--bm-space-2);
	padding: var(--bm-space-6);
}
.bm-service__title {
	font-family: var(--bm-font-display);
	font-size: 1.75rem;
	line-height: 1.1;
	text-shadow: 0 1px 14px rgb(6 23 47 / 55%);
}
.bm-service__copy {
	font-size: 0.9375rem;
	color: var(--bm-paper-100);
	max-inline-size: 42ch;
	text-shadow: 0 1px 10px rgb(6 23 47 / 45%);
}
.bm-service__more {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--bm-signal-300);
}
.bm-service__more::after { content: " →"; }
.bm-service:hover .bm-service__media img { transform: scale(1.04); }
.bm-service:focus-visible { outline: 3px solid var(--bm-signal-500); outline-offset: 3px; }

@media (min-width: 48rem) {
	.bm-services { grid-template-columns: repeat(6, 1fr); }
	.bm-service:nth-child(1), .bm-service:nth-child(2) { grid-column: span 3; min-block-size: 22rem; }
	.bm-service:nth-child(n+3) { grid-column: span 2; }
}

/* --------------------------------------------------------------------------
 * Process — four drawn marks, not four photographs
 * ----------------------------------------------------------------------- */

.bm-process {
	display: grid;
	gap: var(--bm-space-6);
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}
.bm-step { display: flex; flex-direction: column; gap: var(--bm-space-2); }

/*
 * The step marks.
 *
 * These were four 1:1 photographs until 2026-09-08, and the row is a diagram
 * now — see inc/icons.php for why a date cannot be photographed.
 *
 * The number and the icon are one object rather than two stacked rows. Set
 * apart they read as two separate marks for the same step, and the card ends up
 * four elements deep before a word of copy: mark, number, heading, sentence.
 *
 * No tile behind them. The first version needed one, because the icons carried
 * their fold lines as a white stroke and a stroke also runs around the outer
 * silhouette — invisible on white, a halo on anything else. The folds are cut as
 * gaps now, so the ground shows through them and the icons sit on any surface.
 */
.bm-step__figure {
	display: flex;
	align-items: center;
	gap: var(--bm-space-3);
	margin-block-end: var(--bm-space-3);
}
/* 4rem, not 3.25. These are small isometric drawings and they were shipped at
   52px after being judged at 190 — at that size the calendar was a smudge and
   the bed was a wedge. 64px is where they hold. */
.bm-step__icon { display: block; inline-size: 4rem; block-size: 4rem; flex: none; }

/*
 * The number is set large, and that is not decoration either. The heading over
 * this row is "Four steps, and you are only committed at the third" — the copy
 * points at the numeral, so the numeral has to be findable. At 11px muted it
 * was a caption on a photograph that is no longer there.
 *
 * navy-300 rather than the body colour: present enough to count along, light
 * enough that the eye still goes to the step's name first.
 */
.bm-step__n {
	font-family: var(--bm-font-mono);
	font-size: 2rem;
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--bm-navy-300);
	letter-spacing: 0.08em;
}
.bm-step h3 { font-size: 1.25rem; }
.bm-step p { font-size: 0.9375rem; color: var(--bm-text-muted); }

/* --------------------------------------------------------------------------
 * Feature — image beside text, reversible
 * ----------------------------------------------------------------------- */

.bm-feature { display: grid; gap: var(--bm-space-8); align-items: center; }
.bm-feature__media { border-radius: var(--bm-radius-lg); overflow: hidden; box-shadow: var(--bm-shadow-md); }
.bm-feature__media img { display: block; inline-size: 100%; block-size: auto; }

@media (min-width: 60rem) {
	.bm-feature { grid-template-columns: 1fr 1fr; column-gap: var(--bm-space-12); }
	.bm-feature--reverse .bm-feature__media { order: 2; }
}

.bm-factors { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--bm-space-3); }
.bm-factors li {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding-block-end: var(--bm-space-3);
	border-block-end: 1px solid var(--bm-border-subtle);
	font-size: 0.9375rem;
	color: var(--bm-text-muted);
}
.bm-factors li:last-child { border-block-end: 0; padding-block-end: 0; }
.bm-factors strong { color: var(--bm-text); font-size: 1rem; }

/* --------------------------------------------------------------------------
 * Corridors — full bleed, image behind
 * ----------------------------------------------------------------------- */

.bm-corridors {
	position: relative;
	isolation: isolate;
	color: var(--bm-paper-50);
	padding-block: clamp(4rem, 10vw, 8rem);
}
.bm-corridors__media { position: absolute; inset: 0; z-index: -2; }
.bm-corridors__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.bm-corridors::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(100deg, rgb(6 23 47 / 94%) 0%, rgb(6 23 47 / 82%) 45%, rgb(6 23 47 / 40%) 100%);
}
.bm-corridors__body { max-inline-size: 72rem; }
.bm-corridors h2, .bm-corridors .bm-lede { color: var(--bm-paper-50); }
.bm-corridors .bm-lede { color: var(--bm-paper-200); max-inline-size: 52ch; }
.bm-corridors .bm-eyebrow { color: var(--bm-signal-300); }
.bm-corridors .bm-stack { max-inline-size: 40rem; }

.bm-corridor-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0; }
.bm-corridor-list li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--bm-space-3);
	padding-block: var(--bm-space-3);
	border-block-end: 1px solid rgb(247 249 251 / 18%);
	font-size: 0.9375rem;
}
.bm-corridor-list li:first-child { border-block-start: 1px solid rgb(247 249 251 / 18%); }
.bm-corridor-list em { font-style: normal; color: var(--bm-ink-300); }

/* --------------------------------------------------------------------------
 * Care — the trust section
 * ----------------------------------------------------------------------- */

.bm-care { display: grid; gap: var(--bm-space-6); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.bm-care__item { margin: 0; display: flex; flex-direction: column; gap: var(--bm-space-3); }
.bm-care__item picture { display: block; border-radius: var(--bm-radius-md); overflow: hidden; }
.bm-care__item img { display: block; inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.bm-care__item figcaption { display: flex; flex-direction: column; gap: 0.25rem; }
.bm-care__item strong { font-size: 1.0625rem; }
.bm-care__item span { font-size: 0.9375rem; color: var(--bm-text-muted); }

/* --------------------------------------------------------------------------
 * Situations — recognition, set as a list rather than more cards
 *
 * Cards again here would have made three card grids on one page. A ruled list
 * with the label held in a fixed column reads as a reference table, which is
 * the right register for "find yourself in this list".
 * ----------------------------------------------------------------------- */

.bm-situations { list-style: none; padding: 0; display: flex; flex-direction: column; }
.bm-situations li {
	display: grid;
	gap: 0.25rem var(--bm-space-8);
	padding-block: var(--bm-space-4);
	border-block-end: 1px solid var(--bm-border-subtle);
}
.bm-situations li:first-child { border-block-start: 1px solid var(--bm-border-subtle); }
.bm-situations strong { font-family: var(--bm-font-display); font-size: 1.375rem; font-weight: 400; line-height: 1.2; }
.bm-situations span { color: var(--bm-text-muted); font-size: 0.9375rem; max-inline-size: 60ch; }

@media (min-width: 48rem) {
	.bm-situations li { grid-template-columns: 16rem 1fr; align-items: baseline; }
}

/* --------------------------------------------------------------------------
 * FAQ — native details/summary, no JavaScript
 * ----------------------------------------------------------------------- */

.bm-faq { display: flex; flex-direction: column; }
.bm-faq__item { border-block-end: 1px solid var(--bm-border-subtle); }
.bm-faq__item summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--bm-space-4);
	padding-block: var(--bm-space-4);
	font-family: var(--bm-font-display);
	font-size: 1.25rem;
	line-height: 1.25;
	cursor: pointer;
	list-style: none;
}
.bm-faq__item summary::-webkit-details-marker { display: none; }
.bm-faq__item summary::after {
	content: "+";
	font-family: var(--bm-font-body);
	font-size: 1.25rem;
	color: var(--bm-text-muted);
	flex: none;
	transition: transform 220ms ease;
}
.bm-faq__item[open] summary::after { content: "−"; }
.bm-faq__item summary:focus-visible { outline: 2px solid var(--bm-border-focus); outline-offset: 2px; }
.bm-faq__answer { padding-block-end: var(--bm-space-5); }
.bm-faq__answer p { color: var(--bm-text-muted); max-inline-size: 68ch; }

/* --------------------------------------------------------------------------
 * Contact form
 *
 * Reuses the calculator's field styles so the two forms on the site look and
 * behave identically. A visitor should not be able to tell they are two
 * different pieces of code.
 * ----------------------------------------------------------------------- */

.bm-contact-card {
	background: var(--bm-surface-raised);
	border: 1px solid var(--bm-border-subtle);
	border-radius: var(--bm-radius-lg);
	padding: clamp(1.5rem, 4vw, 2.25rem);
	box-shadow: none;
	overflow: visible;
}
.bm-contact { display: flex; flex-direction: column; gap: var(--bm-space-4); }
.bm-contact textarea { resize: vertical; min-block-size: 7rem; font-family: inherit; }
.bm-contact__note { font-size: 0.8125rem; color: var(--bm-text-muted); margin: 0; }
.bm-contact .bm-btn { align-self: flex-start; }

/* Policy pages — long-form prose set for reading, not for scanning. */
.bm-policy { display: flex; flex-direction: column; gap: var(--bm-space-4); }
.bm-policy h2 { font-size: 1.75rem; margin-block-start: var(--bm-space-6); }
.bm-policy h3 { font-size: 1.1875rem; margin-block-start: var(--bm-space-3); }
.bm-policy p, .bm-policy li { color: var(--bm-text-muted); }
.bm-policy ul, .bm-policy ol { padding-inline-start: 1.25rem; display: flex; flex-direction: column; gap: var(--bm-space-2); }
.bm-policy strong { color: var(--bm-text); }

/* --------------------------------------------------------------------------
 * Close — full bleed
 * ----------------------------------------------------------------------- */

.bm-close {
	position: relative;
	isolation: isolate;
	color: var(--bm-paper-50);
	padding-block: clamp(5rem, 12vw, 9rem);
	text-align: center;
}
.bm-close__media { position: absolute; inset: 0; z-index: -2; }
.bm-close__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.bm-close::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgb(6 23 47 / 82%);
}
.bm-close__body { display: flex; flex-direction: column; align-items: center; gap: var(--bm-space-4); }
.bm-close h2 { color: var(--bm-paper-50); max-inline-size: 16ch; }
.bm-close p { color: var(--bm-paper-200); max-inline-size: 46ch; }

/* --------------------------------------------------------------------------
 * Quick enquiry strip
 *
 * Replaces the three-photograph "care" block that ran on ten pages in nine
 * wordings of the same three ideas. Name, phone, what they need.
 *
 * The inputs are styled here rather than borrowing .bm-calc__field from
 * bm-calculator, because calculator.css is not enqueued on every page — About
 * does not load it — and a form whose fields lose their styling on one page in
 * ten is the kind of fault nobody notices until a customer sees it. This part is
 * self-contained: theme CSS only, works anywhere it is included.
 * ----------------------------------------------------------------------- */

/*
 * A pale teal ground, so the strip is visibly a different thing.
 *
 * It sat on --bm-surface-sunken, the same paper the section above it uses, and
 * the two ran together as one long band with a form floating at the bottom of
 * it. Ground colour is the cheapest separation available and it costs no markup.
 *
 * signal-100 rather than teal-100 directly: the signal-* aliases exist so the
 * accent can be re-pointed in one place, which is what makes a rebrand a
 * one-file change here.
 *
 * Contrast measured against #dff4f6 before it shipped, because pale grounds are
 * where muted text quietly stops being readable — heading 11.22:1, the note and
 * the labels 5.02:1, the eyebrow 5.56:1, all above the 4.5:1 body-text floor.
 * The inputs stay white: at 1.14:1 the fill barely separates from this ground,
 * so it is their slate border at 5.73:1 that draws them, not the fill.
 */
.bm-leadstrip { background: var(--bm-signal-100); }

.bm-leadstrip__form { display: flex; flex-direction: column; gap: var(--bm-space-6); }
.bm-leadstrip__intro { display: flex; flex-direction: column; gap: var(--bm-space-2); }
.bm-leadstrip__intro h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
.bm-leadstrip__note { color: var(--bm-text-muted); font-size: 0.9375rem; max-inline-size: 54ch; }

/* Stacked by default. The row only becomes a row where there is width for one. */
.bm-leadstrip__row { display: grid; gap: var(--bm-space-4); }

.bm-leadstrip__field { display: flex; flex-direction: column; gap: 0.35rem; }
.bm-leadstrip__field label {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--bm-text-muted);
}
.bm-leadstrip__field input,
.bm-leadstrip__field select {
	inline-size: 100%;
	padding: 0.85rem 1rem;
	font-family: inherit;
	font-size: var(--bm-text-base);
	color: var(--bm-text);
	background: var(--bm-surface-raised);
	border: 1px solid var(--bm-border-interactive);
	border-radius: var(--bm-radius-md);
	/* iOS zooms a focused field under 16px, which throws the whole page sideways. */
	min-block-size: 3rem;
}
/* The browser's own arrow, deliberately. appearance:none removes it and then
   something has to draw one — a background data: URI, which the Content Security
   Policy will have to carry an exception for once it stops being Report-Only.
   A native arrow costs nothing and cannot break. */
.bm-leadstrip__field select { padding-inline-end: 2rem; }
.bm-leadstrip__field input:focus-visible,
.bm-leadstrip__field select:focus-visible { border-color: var(--bm-border-focus); }

.bm-leadstrip__error {
	color: var(--bm-text);
	background: var(--bm-surface-raised);
	border-inline-start: 3px solid var(--bm-signal-700);
	padding: var(--bm-space-3) var(--bm-space-4);
	border-radius: var(--bm-radius-sm);
	font-size: 0.9375rem;
}
.bm-leadstrip__done {
	background: var(--bm-surface-raised);
	border-radius: var(--bm-radius-md);
	padding: var(--bm-space-6);
	display: flex;
	flex-direction: column;
	gap: var(--bm-space-2);
	max-inline-size: 46ch;
}

/*
 * The honeypot. Never display:none — some bots skip anything hidden that way,
 * which is the one thing this field must not allow. Moved out of the viewport
 * instead, and out of the keyboard order by tabindex on the input itself.
 */
.bm-leadstrip__pot {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (min-width: 60rem) {
	/*
	 * Three fields and the button on one line, bottoms aligned. The button is
	 * auto rather than 1fr so it stays the width of its label instead of
	 * stretching into a fourth field.
	 */
	.bm-leadstrip__row {
		grid-template-columns: 1fr 1fr 1fr auto;
		align-items: end;
		gap: var(--bm-space-4);
	}
	.bm-leadstrip__row .bm-btn { min-block-size: 3rem; }
}

/* --------------------------------------------------------------------------
 * Estimate modal
 *
 * The questionnaire in a dialog, opened by every "Get an estimate" on the site.
 * The calculator element is MOVED in here and back out again — see
 * assets/js/estimate-modal.js — so nothing below may assume it is present.
 *
 * <dialog> is used rather than a div with a z-index, because it brings the top
 * layer, the backdrop, focus trapping, Escape and focus restoration with it.
 * Reimplementing those is how inaccessible modals get built.
 * ----------------------------------------------------------------------- */

.bm-estimate-modal {
	padding: 0;
	border: 0;
	background: transparent;
	max-inline-size: 100%;
	max-block-size: 100%;
	color: var(--bm-text);
	overflow: visible;
}
.bm-estimate-modal::backdrop {
	background: rgb(6 23 47 / 62%);
	backdrop-filter: blur(2px);
}

.bm-estimate-modal__inner {
	position: relative;
	background: var(--bm-surface);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.bm-estimate-modal__close {
	position: sticky;
	inset-block-start: 0;
	margin-inline-start: auto;
	z-index: 2;
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border: 1px solid var(--bm-border-subtle);
	border-radius: var(--bm-radius-pill);
	background: var(--bm-surface-raised);
	color: var(--bm-text);
	cursor: pointer;
}
.bm-estimate-modal__close:hover { background: var(--bm-surface-sunken); }

/*
 * The calculator draws its own card — paper ground, 18px corners, a shadow.
 * Inside the dialog that is a card floating on a panel, so the card's own
 * chrome comes off and the dialog is the surface.
 */
.bm-estimate-modal .bm-calc {
	max-inline-size: 100%;
	border-radius: 0;
	box-shadow: none;
	border: 0;
	background: transparent;
}

/*
 * Mobile: the whole screen. A questionnaire seven steps long inside a floating
 * card on a phone is a scroll area inside a scroll area, and the customer loses
 * track of which one they are moving.
 *
 * 100dvh, not 100vh. On iOS Safari 100vh is the viewport with the address bar
 * hidden, so the last thing on the page sits underneath it until you scroll —
 * and the last thing here is the Continue button.
 */
.bm-estimate-modal__inner {
	/*
	 * 100%, not 100vw.
	 *
	 * 100vw is the viewport INCLUDING a classic scrollbar gutter, so on any
	 * desktop browser that reserves one the panel is about 15px wider than the
	 * space it has and the page gains a horizontal scrollbar of its own. 100%
	 * of the dialog is the right measure, and the dialog is already capped at
	 * max-inline-size: 100% above.
	 *
	 * Desktop is untouched by this and by the padding below, and not by
	 * accident: the min-width: 48rem block below redeclares both, and it wins
	 * at every width from 768px up. At 1280px the used width is
	 *
	 *     min(46rem + 3rem, calc(100vw - 2rem)) = min(784px, 1248px) = 784px
	 *
	 * before this change and 784px after it, because neither declaration here
	 * is the one that wins at that width.
	 */
	inline-size: 100%;
	block-size: 100dvh;
	max-block-size: 100dvh;

	/*
	 * The bottom padding clears the iOS home indicator.
	 *
	 * 2rem is 32px of clearance against a 34px indicator, so the last control
	 * in the questionnaire sits under the bar the operating system draws over
	 * the page, and on the longest steps that control is Continue. env() adds
	 * the device's own inset on top of the spacing rather than replacing it,
	 * so on every phone that has no indicator the value is unchanged.
	 *
	 * THIS IS INERT UNTIL THE VIEWPORT META CARRIES viewport-fit=cover.
	 * Safari reports every safe-area inset as 0 without it, and header.php
	 * currently emits `width=device-width, initial-scale=1`. That file belongs
	 * to the chrome group, so the meta is theirs to change; the fallback keeps
	 * this valid either way rather than dropping the declaration.
	 */
	padding: var(--bm-space-4) var(--bm-space-4) calc(var(--bm-space-8) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 48rem) {
	/*
	 * Desktop: exactly the width the calculator has in the page — 46rem, which
	 * is the 736px it measures inline — so the modal is the same object the
	 * customer would have scrolled to, not a different one.
	 */
	.bm-estimate-modal__inner {
		inline-size: min(46rem + var(--bm-space-12), calc(100vw - var(--bm-space-8)));
		block-size: auto;
		max-block-size: min(90dvh, 56rem);
		border-radius: var(--bm-radius-lg);
		padding: var(--bm-space-4) var(--bm-space-6) var(--bm-space-8);
		box-shadow: var(--bm-shadow-lg);
	}
}

/* ============================================================================
 * MOBILE ADAPTATION
 * ============================================================================
 * Three rules that had to go at the end of the file rather than beside the
 * components they correct, because each is an override and the cascade decides
 * overrides by order. Everything that changes geometry is inside a max-width
 * query, so none of it can reach 1280px: a query with a 79.99rem ceiling
 * cannot match at 1280, which makes "desktop is unchanged" arithmetic rather
 * than a claim somebody has to check.
 *
 * The third finding on this file, the hero clamp, is fixed where it is
 * declared instead. It is a clamp whose maximum already wins at every desktop
 * width, so lowering its floor is provably invisible there and a duplicate of
 * the same clamp down here would only be a second copy to drift.
 * ========================================================================== */

/* --- global, and it changes no geometry -----------------------------------
   break-word, never anywhere: `anywhere` alters an element's min-content size
   contribution, which changes grid and flex track sizing at EVERY width, 1280
   included. `break-word` only breaks a word that would otherwise run out of
   its own line, so it is inert until something actually overflows.

   Named selectors rather than a blanket rule, and these two are named because
   they are the boxes on these pages that hold a machine-shaped string: the
   legal list on About prints the ABN and the registered name, and the enquiry
   strip prints back an eight-character reference code. Both fit 280px today,
   and both fit by luck rather than by design. */
.bm-situations span,
.bm-leadstrip__done {
	overflow-wrap: break-word;
}


@media (max-width: 47.99rem) {

	/*
	 * The estimate dialog fills the screen below the tablet breakpoint, and
	 * this is the declaration that makes it so.
	 *
	 * The panel inside asks for `inline-size: 100%`, which is 100% of the
	 * dialog. A <dialog> is `width: fit-content` in the UA stylesheet, so
	 * without this the pair resolve against each other and the dialog settles
	 * on the intrinsic width of the questionnaire instead of the width of the
	 * phone. The panel used to say 100vw, which forced the issue but measured
	 * the viewport INCLUDING a classic scrollbar gutter.
	 *
	 * 100% here is 100% of the initial containing block, which excludes that
	 * gutter, so the full-bleed intent survives and the overflow goes away.
	 *
	 * Below 48rem only: from 48rem up the min-width block above sets the
	 * panel's width outright and the dialog shrink-wraps it, which is the
	 * floating-card treatment that is wanted there.
	 */
	.bm-estimate-modal { inline-size: 100%; }
}


@media (max-width: 79.99rem) and (max-height: 30rem) {

	/*
	 * Landscape. 740x360 is a real phone held sideways, not an edge case.
	 *
	 * The hero clamp is driven by 52vw, and a landscape phone is wide and
	 * short: at 740px the term asks for 384.8px of height inside a 360px
	 * viewport, so the photograph is taller than the screen it is on and the
	 * heading above it has been scrolled away before the visitor sees it.
	 *
	 * A cap rather than a second block-size, so the clamp stays the single
	 * place the height is decided: the used value is the smaller of the two,
	 * and the cap only bites when it is genuinely smaller. At 740x360 that is
	 * 45svh = 162px. At 320x480 it computes to 216px, which is larger than the
	 * 176px the clamp already gives, so nothing changes on a short portrait
	 * screen.
	 *
	 * svh and not vh: vh on iOS is the viewport with the browser chrome
	 * retracted, which is the one measurement that is never on screen at the
	 * moment the page first paints.
	 *
	 * The max-width guard is what keeps this off the desktop. A short desktop
	 * window is not a phone and must render exactly as it does today.
	 */
	.bm-hero__bleed img { max-block-size: 45svh; }
}