/* Brochure popup — two-section layout (PDF download + printed request)
   Base positioning/animation lives in popup-shared.css */

.popup-brochure-dialog {
	position: relative;
	z-index: 1;
	background: #fff;
	color: #333;
	border: 0;
	border-radius: 8px;
	width: min(1040px, 100%);
	margin: auto;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}

.popup-brochure-top {
	border-radius: 8px 8px 0 0;
}

.popup-brochure .close {
	position: absolute;
	top: 18px;
	right: 22px;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	color: #c4c4c4;
	text-decoration: none;
	line-height: 1;
	z-index: 5;
	transition: color 0.2s ease;
}

.popup-brochure .close:hover {
	color: #666;
}

.popup-brochure-title {
	color: #247bbd;
	font-family: var(--heading-font);
	font-weight: var(--hw-md);
	font-size: 30px;
	line-height: 1.1;
	margin: 0 0 12px;
	letter-spacing: -0.01em;
}

.popup-brochure-intro {
	font-size: 14px;
	line-height: 1.5;
	color: #4a4a4a;
	margin-bottom: 18px;
	max-width: 90%;
}

/* ── Top row — download and email-it-to-me, side by side ──────────
   These are the two ways to get the same file, so they read as one choice rather than two
   stacked bands. The header carried a background image of the brochure spread; only the
   brochure ever had artwork, so every other PDF got an empty grey band and the dialog paid
   for it in height either way. */
.popup-brochure-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	border-radius: 8px 8px 0 0;
	overflow: hidden;
}

.popup-brochure-top {
	background-color: #fff;
	padding: 42px 34px 42px 50px;
}

/* ── Download panel — standfirst beside the brochure spread ────────
   The heading runs the full width of the panel, then the standfirst and the photograph share
   the line beneath it, and the button + file size sit under both. The image is 200px because
   the panel only has 436px of content width at the dialog's 1040px: anything larger and the
   260px-minimum button no longer fits beside it. */
.popup-brochure-top-body {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 20px;
	/* Anchor for .popup-brochure-dl below. */
	position: relative;
}

/* The download button + size note anchor to the bottom of the image row rather than
   flowing under it (Jason's mock, 2026-08-12): the standfirst is two lines and the
   photograph is 133px tall, so flowed markup left a dead band above the button. Taken
   out of flow and pinned bottom-left; ≤900 reverts to flow (the standfirst can wrap
   deep enough there to collide with an absolute block). */
/* -34px, not 0 (Jason, 2026-08-12: "push button down a bit"). Flush to the bottom of the
   row the button's top-right corner cut into the brochure photograph, because the standfirst
   column narrows with the viewport while the button keeps its 260px minimum — at a 952px
   dialog the button runs 68px past the image's left edge, straight through the spread's
   lower-left pages. Dropping it 34px puts its top level with the image's lower third, where
   the only thing left at that x is the ~20%-alpha drop shadow (invisible under a black
   button). The panel's 42px bottom padding plus the row's 20px margin absorb the drop and
   the file-size note beneath it. */
.popup-brochure-dl {
	position: absolute;
	left: 0;
	bottom: -34px;
}

.popup-brochure-standfirst {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	line-height: 1.5;
	color: #4a4a4a;
	margin: 0;
}

.popup-brochure-spread {
	flex: 0 0 200px;
	width: 200px;
	height: auto;
	display: block;
}

.popup-brochure-filesize {
	margin: 8px 0 0;
	font-size: 12px;
	color: #8a8a8a;
	line-height: 1.4;
}

/* Per-PDF mode (js/scripts.js adds .is-per-pdf on any trigger carrying data-pdf-name).
   The standfirst, the photograph and the measured size are facts about the BROCHURE; the
   dialog is serving a datasheet or a case-study PDF here, so they are removed rather than
   left asserting the wrong thing. ⚠️ The download BUTTON now lives inside .popup-brochure-top-body
   (2026-08-12, so it can pin to the image row) — hide the body's brochure-specific children,
   never the body itself, or per-PDF mode loses its download button entirely. */
.popup-brochure.is-per-pdf .popup-brochure-standfirst,
.popup-brochure.is-per-pdf .popup-brochure-spread,
.popup-brochure.is-per-pdf .popup-brochure-filesize {
	display: none;
}

/* With the image gone there is no row to anchor to — per-PDF flows the button normally. */
.popup-brochure.is-per-pdf .popup-brochure-dl {
	position: static;
}

/* One button shape across the whole dialog. The three were all slightly different —
   13/20 at 16px, 11/22 at 15px and 12/22 at 16px, across two radii — and the two green
   ones were 600 weight, which read bold against every other button on the site. */
.popup-brochure-download,
.popup-brochure-email-submit,
.popup-brochure-form input[type="submit"] {
	font-family: var(--heading-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	padding: 12px 22px;
	border: 0;
	border-radius: 4px;
}

.popup-brochure-download {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	background: #111;
	color: #fff;
	text-decoration: none;
	min-width: 260px;
	transition: background 0.2s ease;
}

.popup-brochure-download:hover,
.popup-brochure-download:focus {
	background: #247bbd;
	color: #fff;
	text-decoration: none;
}

.popup-brochure-download .fa-file-pdf {
	font-size: 22px;
	line-height: 1;
}

/* ── Email column — lightest grey, sits beside the download ───── */
.popup-brochure-email {
	background: #f8f8f8;
	padding: 42px 50px 42px 34px;
	border-left: 1px solid #eaeaea;
	align-self: stretch;
}

.popup-brochure-email-inner .popup-brochure-title {
	font-size: 22px;
	font-weight: var(--hw-sm);
	margin-bottom: 8px;
}

.popup-brochure-email-inner .popup-brochure-intro {
	margin-bottom: 14px;
	max-width: 100%;
	font-size: 14px;
}

.popup-brochure-email-form {
	display: block;
}

.popup-brochure-email-row {
	display: flex;
	gap: 10px;
	align-items: stretch;
	flex-wrap: wrap;
}

/* 180px basis, not 260: at half the dialog the input and its button needed 440px of a
   420px column, so they wrapped onto two lines. They still stack on a phone. */
.popup-brochure-email-row input[type="email"] {
	flex: 1 1 180px;
	min-width: 0;
	font-size: 14px;
	padding: 11px 14px;
	box-sizing: border-box;
	border: 1px solid #e2e2e2;
	background: #fff;
	border-radius: 3px;
	font-family: inherit;
	color: #333;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.popup-brochure-email-row input[type="email"]:focus {
	outline: 0;
	border-color: #247bbd;
	box-shadow: 0 0 0 3px rgba(36, 123, 189, 0.15);
}

.popup-brochure-email-submit {
	background-color: var(--brand-green);
	color: #fff;
	cursor: pointer;
	transition: background 0.2s ease;
	white-space: nowrap;
}

.popup-brochure-email-submit:hover:not(:disabled),
.popup-brochure-email-submit:focus:not(:disabled) {
	background-color: #11275d;
}

.popup-brochure-email-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* No reserved height: an empty response box was pushing the note away from its input. It
   only needs room once it has something to say. */
.popup-brochure-email-response {
	font-size: 14px;
}

.popup-brochure-email-response:not(:empty) {
	margin-top: 10px;
}

.popup-brochure-email-response.is-success {
	color: #2e7d32;
}

.popup-brochure-email-response.is-error {
	color: #c62828;
}

.popup-brochure-email-note {
	margin-top: 6px;
	font-size: 12px;
	color: #8a8a8a;
	line-height: 1.4;
}

/* ── Email panel consent — CF7's classes on hand-built markup ──────
   This form is not Contact Form 7, but the two boxes have to be indistinguishable from the
   two in the printed request below it, so the markup wears .wpcf7-checkbox / .wpcf7-acceptance
   and the tick comes from the single shared rule in style.css (~3120). Nothing about the tick
   is redefined here — only layout — so a change to the tick still lands in one place.

   Two columns, not the sitewide stack: the marketing sentence is long and the privacy line is
   short, so 1.35fr/1fr splits them at roughly the point where the two blocks come out the same
   height instead of one running to four lines beside a one-line neighbour. */
.popup-brochure-email-consent {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 4px 20px;
	align-items: start;
	margin-top: 14px;
}

.popup-brochure-email-consent p.checkbox {
	margin: 0;
	min-width: 0;
}

/* display:block is the one thing the shared tick CSS gets from a .wpcf7 ancestor that this
   markup has not got (`.wpcf7 .wpcf7-list-item`). Without it the list item stays inline and
   the label's ::before — which is positioned against the label box — has no line of its own
   to sit at the start of. 12px matches the printed panel's consent size. */
.popup-brochure-email-consent .wpcf7-list-item {
	display: block;
	margin: 0;
	font-size: 12px;
	line-height: 1.45;
	color: #6b6b6b;
}

.popup-brochure-email-consent .wpcf7-list-item-label a {
	color: var(--link-blue);
}

/* Borrowed from CF7 so the two forms in this dialog fail in the same language. Unlike the
   printed form's tips there is no .invalid gate — this one is only ever written by the submit
   handler in js/scripts.js, so it cannot fire early.
   Scoped to the panel deliberately: the element also carries .wpcf7-not-valid-tip, and CF7's
   own stylesheet sets colour, size and `display: block` on that at the same specificity. Two
   classes beats one, so these win regardless of enqueue order. */
.popup-brochure-email .popup-brochure-email-consent-tip:empty {
	display: none;
}

.popup-brochure-email .popup-brochure-email-consent-tip {
	margin-top: 8px;
	font-size: 12px;
	color: #c62828;
	line-height: 1.4;
}

/* ── Form section — dark, two-column ──────────────────────────────
   Dark so the printed request reads as its own offer rather than a third grey band
   trailing the two above it (Jason, 2026-08-07). */
.popup-brochure-form {
	background: #404040;
	color: #fff;
	padding: 32px 50px 36px;
}

.popup-brochure-form-inner .popup-brochure-title {
	color: #fff;
	margin-bottom: 10px;
}

.popup-brochure-form-inner .popup-brochure-intro {
	color: #d8d8d8;
	margin-bottom: 18px;
	max-width: 100%;
}

/* CF7 wrapper — reset */
.popup-brochure-form .wpcf7 {
	margin: 0;
}

/* THREE columns as of 2026-08-12 (client mockup), five rows:
     col 1  name (r1), email (r2), phone (r3), number of copies (r4)
     col 2  postal address (r1-2), message (r3-4)
     col 3  marketing consent (r1-2), privacy consent (r3), anti-spam check (r4), submit (r5)

   The marketing sentence is the tallest thing in the form at ~four lines of 12px, which is why
   it SPANS rows 1-2 rather than sitting in row 1: a single row would have grown to fit it and
   pushed the email field 26px away from the name field above it. Across two rows it fits in the
   height the inputs already need, so column 1 keeps an even rhythm. */
.popup-brochure-form .wpcf7-form {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 10px 20px;
	align-items: start;
}

.popup-brochure-form .wpcf7-form > p,
.popup-brochure-form .submit-align-right > p {
	margin: 0;
	min-width: 0;
	position: relative;
}

.popup-brochure-form .wpcf7-form > p:has(input[type="text"]) {
	grid-column: 1;
	grid-row: 1;
}

.popup-brochure-form .wpcf7-form > p:has(input[type="email"]) {
	grid-column: 1;
	grid-row: 2;
}

.popup-brochure-form .wpcf7-form > p:has(input[type="tel"]) {
	grid-column: 1;
	grid-row: 3;
}

.popup-brochure-form .wpcf7-form > p:has(select) {
	grid-column: 1;
	grid-row: 4;
}

.popup-brochure-form .wpcf7-form > p:has(textarea[name="your-address"]) {
	grid-column: 2;
	grid-row: 1 / span 2;
	height: 100%;
}

.popup-brochure-form .wpcf7-form > p:has(textarea[name="your-message"]) {
	grid-column: 2;
	grid-row: 3 / span 2;
	height: 100%;
}

.popup-brochure-form .wpcf7-form > p:has(textarea) .wpcf7-form-control-wrap,
.popup-brochure-form .wpcf7-form > p:has(textarea) textarea {
	height: 100%;
}

/* ⚠️ THE CONSENT FIELDS MUST STAY INSIDE .submit-align-right — this is the wrapper the CF7
   form template (form 8589, in the DB) puts them in, and re-parenting them in the template is
   what previously dropped them below the Send button.
   Rewritten 2026-08-12: the wrapper is now `display: contents`, so it stops being a grid item
   and its three children — marketing consent, privacy consent, submit — become grid items of
   the FORM, each placed explicitly in column 3. That is the only way to get the mockup's
   column-3 order, because the anti-spam check (`.cf-ts`, injected by
   mu-plugins/cf-turnstile-ui.php) is a sibling of the wrapper rather than a child of it, and
   has to render BETWEEN the privacy consent and the button. `display: contents` flattens the
   boundary; nothing moves in the DOM, so Turnstile's iframe is never re-parented.
   Consequence to remember: with the wrapper gone from layout, every one of its children needs
   an explicit column AND row, or it auto-places into whatever cell is free. */
.popup-brochure-form .submit-align-right {
	display: contents;
}

.popup-brochure-form .submit-align-right > p:has([data-name="consent-marketing"]) {
	grid-column: 3;
	grid-row: 1 / span 2;
}

/* Column 3 is CLUSTERED, not distributed (Jason's mock, 2026-08-12): the rows are sized
   by the columns-1/2 fields, so items pinned to rows 3/4/5 inherit ~26px of dead air each.
   align-self:start + a negative pull tightens the stack without disturbing the row grid.
   The pulls assume the marketing consent wraps to ≤4 lines at the ≥900 column width —
   if its wording grows, re-check for overlap before shipping. */
.popup-brochure-form .submit-align-right > p:has([data-name="consent-privacy-policy"]) {
	grid-column: 3;
	grid-row: 3;
	align-self: start;
	margin-top: -26px;
}

/* wpautop wraps the submit in a bare <p>. */
.popup-brochure-form .submit-align-right > p:not(.checkbox) {
	grid-column: 3;
	grid-row: 5;
	align-self: start;
	margin-top: -44px;
}


/* CF7's spinner is an inline-block sibling of a full-width submit, so it wrapped onto a
   second line and made this cell 33px taller than the button — which is what left the
   address box hanging below it. Out of flow; it still shows while the form is submitting. */
.popup-brochure-form .wpcf7-spinner {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
}

/* Response output → full width under everything (auto row, after the submit's row 5). */
.popup-brochure-form .wpcf7-form > .wpcf7-response-output {
	grid-column: 1 / -1;
	margin: 10px 0 0;
	font-size: 14px;
}

/* Copies selector — the only labelled control, because a dropdown cannot say what it is
   from a placeholder the way the text inputs do. */
.popup-brochure-form .popup-copies {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	font-size: 14px;
	white-space: nowrap;
}

.popup-brochure-form .popup-copies .wpcf7-form-control-wrap {
	flex: 1 1 auto;
}

.popup-brochure-form select {
	width: 100%;
	font-size: 14px;
	padding: 11px 14px;
	box-sizing: border-box;
	border: 1px solid #e2e2e2;
	background: #fff;
	border-radius: 3px;
	font-family: inherit;
	color: #333;
}

/* inputs */
.popup-brochure-form input[type="text"],
.popup-brochure-form input[type="email"],
.popup-brochure-form input[type="tel"],
.popup-brochure-form textarea {
	width: 100%;
	font-size: 14px;
	padding: 11px 14px;
	box-sizing: border-box;
	border: 1px solid #e2e2e2;
	background: #fff;
	border-radius: 3px;
	font-family: inherit;
	color: #333;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.popup-brochure-form input[type="text"]:focus,
.popup-brochure-form input[type="email"]:focus,
.popup-brochure-form input[type="tel"]:focus,
.popup-brochure-form textarea:focus {
	outline: 0;
	border-color: #247bbd;
	box-shadow: 0 0 0 3px rgba(36, 123, 189, 0.15);
}

/* No min-height: the address box takes its height from the column beside it (it spans the
   three inputs and the button), so a minimum could only make it overhang them. */
.popup-brochure-form textarea {
	resize: vertical;
}

.popup-brochure-form input[type="submit"] {
	width: 100%;
	background-color: var(--brand-green);
	color: #fff;
	cursor: pointer;
	transition: background 0.2s ease;
}

/* Green → the dialog's own blue, the same #247bbd as .popup-brochure-footer and the
   .popup-brochure-download hover, so every hover in this popup lands on one colour.
   Replaces a pale-grey inversion (#dcdcdc on navy text): on the dark panel a light button
   read as another empty field next to the white inputs, and grey reads as "disabled"
   rather than "active". Blue keeps white text, so the label contrast holds.
   Scoped to .popup-brochure-form, i.e. the printed-request form only — the email column's
   button is .popup-brochure-email-submit, a <button> outside this wrapper, and keeps its
   own hover. */
.popup-brochure-form input[type="submit"]:hover,
.popup-brochure-form input[type="submit"]:focus {
	background-color: #247bbd;
	color: #fff;
}

/* Anti-spam confirmation. It is a direct child of the form (the mu-plugin appends it after the
   .submit-align-right wrapper), which is exactly why that wrapper is display:contents — placed
   here in column 3 row 4 it lands between the privacy consent and the Send button, as the
   mockup has it, without anything being moved in the DOM. */
.popup-brochure-form .cf-ts {
	grid-column: 3;
	grid-row: 4;
	/* Clustered with the consents above it — see the column-3 note at .submit-align-right. */
	align-self: start;
	margin-top: -36px;
}

/* Once passed it is a ghost line, not a white chip: on the dark panel the light card it
   ships with (mu-plugins/cf-turnstile-ui.php) read as a third input.
   Scoped to the PASSED state on purpose — before that, the box holds Turnstile's own
   light-themed widget, which needs a light surface to sit on. */
.popup-brochure-form .cf-ts--verified {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.28);
}

.popup-brochure-form .cf-ts--verified .cf-ts__ok {
	color: #fff;
}

/* Readable on the dark panel — these were set for the grey it used to be. */
.popup-brochure-form .wpcf7-list-item {
	display: block;
	margin: 0;
	font-size: 12px;
	line-height: 1.45;
	color: #ccc;
}

.popup-brochure-form .wpcf7-response-output {
	color: #fff;
}

/* Same reason as the contact popup's: --link-blue on this dark grey is barely legible, so the
   privacy-policy link goes white and the underline is what marks it as a link. */
.popup-brochure-form .wpcf7-list-item-label a {
	color: #fff;
	text-decoration: underline;
}

/* The 8px this used to set is gone (2026-08-12). The shared rule in style.css reserves a 26px
   gutter here because that is where the tick box is drawn (`left: -26px` on the label's
   ::before); at 8px the box hung 18px outside the panel's left edge, level with nothing,
   which is what made the consent block read as detached from the fields above it. */

.popup-brochure-form .wpcf7-not-valid-tip {
	color: #ff9a92; /* #c00 was unreadable once the panel went dark */
	font-size: 0.85em;
	display: block;
	margin-top: 4px;
}

/* Hold the messages back until the visitor has actually tried to send.
   CF7 validates the WHOLE form on any change event (validate() scopes to the form, not to
   the field that changed), so picking the number of copies — or just tabbing out of Name —
   flagged every other required field as missing before the visitor had reached them. It
   reads as a failed submit. CF7 puts `.invalid` on the form once a real submit comes back
   with errors, and from then on the tips update live, which is when they are useful. */
.popup-brochure-form .wpcf7-form:not(.invalid) .wpcf7-not-valid-tip {
	display: none;
}

/* ── Blue footer band ────────────────────────────────────────── */
.popup-brochure-footer {
	background: #247bbd;
	color: #fff;
	padding: 16px 50px;
	text-align: center;
	font-size: 15px;
	font-family: var(--heading-font);
	font-weight: 300;
	display: block;
	border-radius: 0 0 8px 8px;
}

.popup-brochure-footer strong {
	font-weight: 600;
	margin-right: 28px;
}

.popup-brochure-footer span {
	display: inline-block;
	margin: 0 18px;
}

.popup-brochure-footer a {
	color: #fff;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.popup-brochure-footer a:hover {
	opacity: 0.85;
}

/* ── Tablet ──────────────────────────────────────────────────── */
@media screen and (max-width: 900px) {
	.popup-brochure {
		padding: 12px;
	}
	/* One column: at this width the email input and its button would each be under 180px. */
	/* minmax(0, 1fr), not 1fr: a bare 1fr track cannot shrink below its widest child (the 260px
	   download button), so on a phone the whole panel ran past the right edge. */
	.popup-brochure-actions {
		grid-template-columns: minmax(0, 1fr);
	}
	.popup-brochure-top {
		padding: 40px 32px 28px;
	}
	.popup-brochure-email {
		padding: 24px 32px 28px;
		border-left: 0;
		border-top: 1px solid #eaeaea;
	}
	/* The download panel is full width here, and the standfirst flexes, so without a cap it
	   filled the row and shoved the brochure image to the far right of the dialog — reading as
	   two unrelated things rather than a caption beside its picture. 520px keeps the sentence to
	   two lines with the image immediately after it. */
	.popup-brochure-top-body {
		max-width: 520px;
	}
	.popup-brochure-spread {
		flex: 0 0 160px;
		width: 160px;
	}
	.popup-brochure-form {
		padding: 32px;
	}
	.popup-brochure-footer {
		padding: 20px 32px;
	}
	.popup-brochure-title {
		font-size: 28px;
	}
	.popup-brochure-form .wpcf7-form {
		grid-template-columns: 1fr;
	}
	/* The two textareas are named explicitly, not matched by `p:has(textarea)`: an attribute
	   selector inside :has() makes the desktop rules MORE specific than a bare one, so the
	   columns did not collapse here — the address and message stayed in column 2. */
	.popup-brochure-form .wpcf7-form > p:has(input[type="text"]),
	.popup-brochure-form .wpcf7-form > p:has(input[type="email"]),
	.popup-brochure-form .wpcf7-form > p:has(input[type="tel"]),
	.popup-brochure-form .wpcf7-form > p:has(select),
	.popup-brochure-form .wpcf7-form > p:has(textarea[name="your-address"]),
	.popup-brochure-form .wpcf7-form > p:has(textarea[name="your-message"]),
	.popup-brochure-form .submit-align-right > p:has([data-name="consent-marketing"]),
	.popup-brochure-form .submit-align-right > p:has([data-name="consent-privacy-policy"]),
	.popup-brochure-form .submit-align-right > p:not(.checkbox),
	.popup-brochure-form .cf-ts {
		grid-column: 1;
		grid-row: auto;
		height: auto;
		/* Desktop's column-3 clustering pulls don't apply to the single-column stack. */
		margin-top: 0;
		align-self: auto;
	}
	/* The download button flows normally below 900px — the standfirst can wrap deep
	   enough here to collide with an absolutely pinned block. */
	.popup-brochure-dl {
		position: static;
	}
	/* The wrapper becomes a plain block again below 900px, so its three children lay out in DOM
	   order — marketing, privacy, submit — and the anti-spam check follows the wrapper as a grid
	   item of the form. That is the stack the mockup asks for on mobile (consent above button)
	   and it is what shipped before the three-column desktop layout, so nothing needs placing:
	   turning display:contents back off is the whole reset. */
	.popup-brochure-form .submit-align-right {
		display: block;
		margin-top: 6px;
	}
	.popup-brochure-form .submit-align-right > p {
		margin-bottom: 10px;
	}
	.popup-brochure-form .cf-ts {
		margin-top: 10px;
	}
	/* Stacked, so the boxes need their own height again — they are no longer sized by a
	   column of inputs beside them. */
	.popup-brochure-form textarea {
		min-height: 110px;
	}
	.popup-brochure-footer span,
	.popup-brochure-footer strong {
		display: block;
		margin: 4px 0;
	}
}

/* ── Mobile — full-screen ────────────────────────────────────── */
@media screen and (max-width: 600px) {
	.popup-brochure {
		padding: 0;
	}
	.popup-brochure-dialog {
		width: 100%;
		max-width: 100%;
		border-radius: 0;
		min-height: 100vh;
		margin: 0;
	}
	.popup-brochure-top {
		padding: 56px 20px 28px;
	}
	.popup-brochure-email {
		padding: 22px 20px;
	}
	.popup-brochure-form {
		padding: 28px 20px;
	}
	.popup-brochure-footer {
		padding: 20px;
		font-size: 15px;
	}
	.popup-brochure .close {
		top: 12px;
		right: 14px;
		font-size: 28px;
	}
	.popup-brochure-title {
		font-size: 24px;
		font-weight: var(--hw-sm);
	}
	.popup-brochure-download {
		width: 100%;
		min-width: 0;
	}
	/* Stacked and centred (Jason 2026-10-12, "a complete mess"): title, the brochure picture,
	   a one-line standfirst, then a full-width button. Side by side left the standfirst a
	   90px sliver and pushed the button off screen. */
	.popup-brochure-top-body {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
		max-width: none;
		margin-bottom: 0;
	}
	.popup-brochure-spread {
		order: -1;
		flex: 0 0 auto;
		width: min(240px, 70%);
		margin: 0 auto;
	}
	.popup-brochure-standfirst {
		text-align: center;
		font-size: 15px;
	}
	.popup-brochure-dl {
		text-align: center;
	}
	.popup-brochure-download {
		justify-content: center;
	}
	.popup-brochure-title {
		text-align: center;
	}
	/* Input over button: side by side the pair needed more than the 320px a phone gives them. */
	.popup-brochure-email-row {
		flex-direction: column;
	}
	.popup-brochure-email-row input[type="email"],
	.popup-brochure-email-submit {
		width: 100%;
		flex: 0 0 auto;
	}
	.popup-brochure-email .popup-brochure-title,
	.popup-brochure-form .popup-brochure-title {
		text-align: left;
	}
	/* Side by side is a 150px measure per box here — stacked, each gets the full width. */
	.popup-brochure-email-consent {
		grid-template-columns: 1fr;
		gap: 10px;
	}
}