/* Bronze blocks: replaces the inline styles used in the legacy markup. Loaded on the site and in the editor.
   Note: don't give html/body a background. The system pages' parallax photo sits behind the page (z-index -1)
   and a body background would hide it. */

/* Media-library images carry width/height attributes (prevents layout shift); keep them fluid. */
img.r { height: auto; }
.bronze-w100 { width: 100%; height: auto; }

/* Background "White": solid, so it covers the faded photo at the top of the system pages. */
.bronze-white { background: #fff; }

/* "Skip to content" (header.php): hidden until a keyboard user tabs to it, then shown over the header. */
.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus { left: 8px; top: 8px; z-index: 100000; padding: 10px 16px; background: #fff; color: #000; outline: 2px solid #7b7064; }

/* Logged in: the admin bar already pushes the page (and the header inside it) down. Only the fixed menu button
   and menu panel sit against the window, so they move down by the admin bar's height. */
body.admin-bar button.menu-burger, body.admin-bar .nav { top: 32px; }
body.admin-bar .nav.show { height: calc(100vh - 32px); }
@media screen and (max-width: 782px) {
	body.admin-bar button.menu-burger, body.admin-bar .nav { top: 46px; }
	body.admin-bar .nav.show { height: calc(100vh - 46px); }
}

/* Pinned header (Nov 2026; the Vale site's is pinned too). It stays at the top of the window on every page.
   - Ordinary pages ("page" header, dark logo): white from the start. "Sticky" rather than fixed, so it keeps its
     place in the page (its 90px and the gap below it) and everything under it starts exactly where it did.
   - Pages that open with the video (the home page and the "Dark-logo header" ones): over the video the header has a
     bronze-tinted frosted glass behind it, with the white logo, menu button and MENU. As the video scrolls away it
     fades to white, the logo to its black-lettered twin (.logo-on-white) and the menu button to black. bronze.js sets
     --hdr-white from 0 (over the video) to 1 (white) as the bottom of the video reaches the header.
   The glass and the white are ::before / ::after layers rather than the header's own background: a blur
   (backdrop-filter) on the header itself would trap the full-screen menu, which is inside it, in the 90px bar. */
header { position: fixed; top: 0; z-index: 50; }
header.page { position: sticky; background: #fff; }
body.admin-bar header { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar header { top: 46px; }
}
header:not(.page)::before,
header:not(.page)::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
header:not(.page)::before {
	background: rgba(123, 112, 100, .42); /* the site's bronze, see-through */
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	opacity: calc(1 - var(--hdr-white, 0));
}
header:not(.page)::after { background: #fff; opacity: var(--hdr-white, 0); }
#logo_container { position: relative; } /* holds the twin; the logo's half-width on phones is measured from it too */
header:not(.page) #logo_container img { opacity: calc(1 - var(--hdr-white, 0)); }
/* The twin keeps the logo's own size limits (bronze.css: 360px wide on computers, half the width on phones) and is
   centred the same way, so the two match exactly at every width. */
header:not(.page) #logo_container img.logo-on-white { position: absolute; top: 0; left: 0; right: 0; margin-left: auto; margin-right: auto; opacity: var(--hdr-white, 0); }
/* The menu button and MENU: white over the video, black on white (and black while the menu is open). */
header:not(.page) button.menu-burger span { background-color: color-mix(in srgb, #000 calc(var(--hdr-white, 0) * 100%), #fff); }
header:not(.page) .menu-burger:after { color: color-mix(in srgb, #000 calc(var(--hdr-white, 0) * 100%), #fff); }
/* body.show-nav (menu open) outranks the frosted mode's white below too, so the × shows on the white menu in both. */
body.show-nav header:not(.page) button.menu-burger span { background-color: #000; }
body.show-nav header:not(.page) .menu-burger:after { color: #000; }
/* Appearance → Customize → Header → "Stay frosted bronze" (class header-frosted): no fade to white. The glass stays
   just as it is over the video, with the white logo and menu button. */
header.header-frosted:not(.page)::before { opacity: 1; }
header.header-frosted:not(.page)::after { opacity: 0; }
header.header-frosted:not(.page) #logo_container img { opacity: 1; }
header.header-frosted:not(.page) #logo_container img.logo-on-white { display: none; }
header.header-frosted:not(.page) button.menu-burger span { background-color: #fff; }
header.header-frosted:not(.page) .menu-burger:after { color: #fff; }
/* Request Your Brochure, top right (header.php), placed as the Vale site's: a button on computers (#top_links,
   overriding bronze.css's older 240 x 45 one), a small two-line box on phones (.header-rab-xs). Both are the site's
   solid bronze with a thin white line round them (Vale's has a thin line too), so they read over the video, the
   frosted glass and white alike. The button's lettering is the floating panel's buttons' (cta.css .vcp-btn: Poppins
   13px bold, 2px apart); it's as wide as its wording, smaller on narrower computers so it stays clear of the logo. */
header #top_links.right { right: 25px; top: 50%; transform: translateY(-50%); } /* centred in the header, level with the logo */
header #top_links.right .btn { float: none; width: auto; height: auto; margin: 0; padding: 8px 16px; border: 1px solid #fff; color: #fff; font: 700 13px/1.3 Poppins, sans-serif; letter-spacing: 2px; white-space: nowrap; text-align: center; text-shadow: none; }
header #top_links.right .btn:hover { background: #1e1e1e; }
@media screen and (max-width: 1100px) {
	header #top_links.right .btn { width: auto !important; padding: 7px 12px !important; font-size: 11px; letter-spacing: 1px; } /* !important: bronze.css narrows it to 160px under 920px */
}
@media screen and (max-width: 900px) {
	header #top_links.right { right: 12px; }
	header #top_links.right .btn { padding: 7px 9px !important; font-size: 10px; letter-spacing: .5px; }
}
header .header-rab-xs { position: absolute; top: 10px; right: 6px; padding: 4px 4px 3px; border: 1px solid #fff; background: #7b7064; color: #fff; font: 8.5px/12px Poppins, sans-serif; letter-spacing: 0; text-transform: uppercase; text-align: center; text-decoration: none; }
header .header-rab-xs:hover, header .header-rab-xs:focus-visible { background: #1e1e1e; color: #fff; }
/* Its own breakpoint rather than hidden-sm / hidden-xs: those both hide at exactly 767px, leaving neither. */
@media screen and (min-width: 768px) {
	header .header-rab-xs { display: none; }
}

/* Phones: a shorter header (64px rather than 90, the 4px dark line included) with the menu button, logo and
   brochure box centred in it. */
@media screen and (max-width: 767px) {
	header { height: 64px; padding-top: 0; display: flex; align-items: center; justify-content: center; }
	header #logo_container { line-height: 0; } /* no gap under the logo, so it centres exactly */
	header #logo_container img { margin-top: 0 !important; vertical-align: top; }
	header .header-rab-xs { top: 50%; transform: translateY(-50%); }
	header button.menu-burger { left: 0; padding-top: 26px; } /* its three lines centred on the logo; left: 0, or the centring above would move it to the middle */
}

/* Links to a spot on the page (#…) stop below the header rather than under it. */
html { scroll-padding-top: 100px; }
/* No sideways scrolling: some home-page rows sit straight in the page with the grid's -4px side margins, so they
   poked 4px past the edge. "clip" rather than "hidden" keeps the pinned header (outside #main) and anything sticky. */
#main { overflow-x: clip; }

/* "None on phones" spacing as padding; the theme CSS only has the margin versions. */
@media screen and (max-width: 767px) { .pt-0-xs { padding-top: 0 !important; } .pb-0-xs { padding-bottom: 0 !important; } }
.bronze-mb-0.bronze-mb-0 { margin-bottom: 0; }

/* SCF wraps inner blocks in .acf-innerblocks-container on the front end; inside a grid row that
   wrapper would stop the columns sitting side by side, so make it layout-transparent. */
.row > .acf-innerblocks-container { display: contents; }

/* Case study: the text after "ABOUT PROJECT" starts straight under it (theme rule .casestudy b + p, which the
   inner-blocks wrapper would otherwise break). */
.casestudy b + .acf-innerblocks-container > p:first-child { margin-top: 0; }
/* Case study grey label between photo groups (e.g. RENOVATION WORK), as the old inline style. */
.bronze-cs-label { background-color: #ddd; padding: 15px; letter-spacing: 2px; }

/* Image & text: the photo column, as the old style="padding-right:10px;line-height:0;". */
.bronze-media { padding-right: 10px; line-height: 0; }
.bronze-media > img { width: 100%; }

/* Image block in a column, as an old <div class="row"><img></div>: the row's negative margins (flexboxgrid). */
.bronze-bleed { margin-left: -0.25rem; margin-right: -0.25rem; }

/* Image block "Line gap": the image sits on a line of text, as the old inline <img> in a text column. */
.bronze-img { line-height: inherit; }

/* Image block "Maximum size". */
img.r.bronze-max-64 { max-width: 64px; }
img.r.bronze-max-200 { max-width: 200px; margin-left: auto; margin-right: auto; }
/* "Featured in" logos: 50px high at their own width, faded. */
img.r.bronze-max-logo { width: auto; height: 50px; max-width: 100%; opacity: 0.8; margin-left: auto; margin-right: auto; }
img.r.bronze-max-300 { max-width: 300px; }
img.r.bronze-max-400 { max-width: 400px; }
img.r.bronze-max-half { max-width: 50%; }
img.r.bronze-max-natural { margin-left: auto; margin-right: auto; }

/* Text styles (Styles panel). The legacy class (h2.alt, p.header …) is added on the site by inc/blocks.php. */
.is-style-bronze-alt-24.is-style-bronze-alt-24 { font-size: 24px; }
.is-style-bronze-alt-26.is-style-bronze-alt-26 { font-size: 26px; letter-spacing: 1px; font-weight: normal; }
.is-style-bronze-label.is-style-bronze-label { font-size: 18px; color: #6c6c6c; }
.is-style-bronze-card.is-style-bronze-card { text-transform: uppercase; font-size: 16px; font-weight: 500; font-family: 'Poppins'; }
/* Line height "normal": the old line was a <span> on its own line, not a paragraph (28px lines). */
p.is-style-bronze-subheading { font-family: 'Poppins'; font-size: 18px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #6c6c6c; margin: 0; line-height: normal; }
p.is-style-bronze-intro-18.is-style-bronze-intro-18 { font-size: 18px; }
/* Feature bullets: the theme's ul.incontent (the class is added on the site), here for the editor too. */
ul.is-style-bronze-incontent { font-size: 14px; letter-spacing: 1px; line-height: 30px; list-style-type: initial; list-style-position: inside; text-indent: -20px; padding-left: 20px; text-align: left; color: #655d60; max-width: 800px; margin: auto; }

/* Cards (case studies, page links). */
.bronze-card { background: #fff; float: left; width: 100%; }
.bronze-card.bronze-card-plain { background: none; }
h3.bronze-card-title { text-transform: uppercase; font-size: 22px; font-weight: 500; font-family: 'Poppins'; }
p.bronze-card-line { line-height: 24px; }
p.bronze-card-line.bronze-card-line-gap { margin-bottom: 10px; }
/* All Case Studies: the arrow link as the old inline style. */
.bronze-card-more { margin: 30px 0 20px; padding-right: 10px; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; display: block; width: 100%; text-align: right; font-weight: 600; font-family: 'Poppins'; color: #695b61; }

/* Contact panel links, as the old inline style. */
.bronze-cta { padding-right: 10px; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; margin-top: 0; display: block; width: 100%; text-align: right; margin-bottom: 20px; font-weight: 600; font-family: 'Poppins'; color: #695b61; }

/* A caption: a line of text under an image, as the old <img><br>text (articles). */
p.bronze-caption.bronze-caption { margin: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }

/* Outline buttons as wide as their text, and the compact one (articles). */
.btn.bronze-btn-auto { width: auto; }
.btn.bronze-btn-small { padding: 9px 25px; }

/* Button "Small capitals, right" with the old 30px gap above (manufacturing). */
.bronze-cta.bronze-cta-gap { margin-top: 30px; }

/* Video band (home "British Craftsmanship"). */
.bronze-video-band { background: #000; overflow: hidden; position: relative; padding: 60px 0; }
.bronze-video-band #sliderVideo { position: absolute; top: 0; left: 0; z-index: 1; color: #fff; height: 100%; }
.bronze-video-band-text { position: relative; z-index: 2; }
.bronze-video-band-text h1, .bronze-video-band-text h2, .bronze-video-band-text p, .bronze-video-band-text a { color: #fff; }
.bronze-video-band-image { z-index: 10; opacity: 1; width: 175px; height: auto; }

/* Video block within the page. */
.bronze-video { width: 100%; height: auto; display: block; }

/* Editor and empty-block placeholders. */
.bronze-placeholder { background: #f0f0f0; border: 1px dashed #bbb; color: #777; padding: 40px 20px; text-align: center; font: 14px/1.4 'Poppins', sans-serif; }

/* Process step (working with homeowners): coloured band, title left, text right, arrow into the next step. The text
   colour is the block's --bronze-step-text (the old inline color … !important). */
.bronze-step h2.bronze-step-title { font-size: 24px; padding-top: 5px; }
.bronze-step h2, .bronze-step p, .bronze-step li { color: var(--bronze-step-text) !important; }
.bronze-step p { margin-top: 0; }
.bronze-step-arrow { position: absolute; width: 20px; height: 20px; bottom: -30px; left: 50%; border-left: 30px solid transparent; border-right: 30px solid transparent; border-top: 30px solid; z-index: 1; }

/* Vacancies block and vacancy pages (the old careers.php list and job view, and its page <style>: centred lists). */
.bronze-vacancies .career { padding: 0; list-style-type: none; }
.bronze-vacancy-body ul, .bronze-vacancies ul { text-align: center; list-style-position: inside; padding: 0; color: #6c6c6c; }

/* Case studies: every bold word has the old .casestudy b letter-spacing (<b> is saved as <strong>), and a bold label
   on its own line (the overseas questions) sits straight on the text under it, in the column's own font. */
.casestudy strong { letter-spacing: 2px; }
.casestudy p.bronze-cs-q { margin: 0; font: inherit; color: inherit; }
.casestudy p.bronze-cs-q + p { margin-top: 0; }

/* Phone menu, as on the Vale site: slide both panels with transform rather than left. Animating left made
   Android Chrome paint stray fragments of the menu text over the header while the panel slid. Same 1s slide,
   same open and closed positions. */
@media (max-width: 767px) {
	.nav .menu-left, .nav .menu-right { left: 0; transform: translateX(-100%); transition: transform 1s ease-in-out; }
	.nav.show .menu-left, .nav.show .menu-right { transform: none; }
}

/* ---- Brochure request form (blocks/brochure-form), as on the Vale site; Bronze colours and Poppins ---------------------------------------------- */
.bronze-brochure [hidden]{display:none!important}
.bronze-brochure .bronze-brochure-banner img{display:block;width:100%}
.bronze-brochure-sent .request-brochure{padding-top:60px;padding-bottom:40px}
.bronze-brochure .brochure-form .field{width:50%;margin-left:25%;padding:0;display:block}
@media (max-width:1300px){.bronze-brochure .brochure-form .field{width:100%;margin-left:0}}
.bronze-brochure .brochure-form .field label{display:block;margin-top:5px;font-size:15px}
.bronze-brochure .brochure-form .field select,.bronze-brochure .brochure-form .field input[type=text],.bronze-brochure .brochure-form .field input[type=email],.bronze-brochure .brochure-form .field input[type=tel]{width:100%;min-height:38px}
.bronze-brochure .brochure-form h2{margin:40px 0 10px}
/* Desktop: title / forename / surname on one row (title narrower), email and phone half each. Phones stack as before. */
@media (min-width:768px){
	.bronze-brochure .brochure-form .bronze-brochure-row{display:grid;gap:0 16px;align-items:start}
	.bronze-brochure .brochure-form .bronze-brochure-row-name{grid-template-columns:minmax(90px,1fr) 2fr 2fr}
	/* Same columns as the name row: email spans title + forename, phone lines up with surname. */
	.bronze-brochure .brochure-form .bronze-brochure-row-contact{grid-template-columns:minmax(90px,1fr) 2fr 2fr}
	.bronze-brochure .brochure-form .bronze-brochure-row-contact > div:first-child{grid-column:span 2}
	.bronze-brochure .brochure-form .bronze-brochure-row > div{min-width:0}
}
.bronze-brochure .brochure-form .field > h2:first-of-type{margin-top:0}
/* Boxes: the label sits inside and goes once something is typed or chosen; a light background; wrong boxes are
   highlighted (site's error red) with a "!" and, when it helps, a short reason underneath. */
.bronze-brochure .brochure-form .vb-f{position:relative;margin-top:12px}
.bronze-brochure .brochure-form .field .vb-f input,.bronze-brochure .brochure-form .field .vb-f select,.bronze-brochure .brochure-form .field .vb-f textarea{display:block;width:100%;min-height:50px;margin:0;padding:14px 12px;border:2px solid #dfdfdf;background-color:#f6f6f6;font:16px Poppins,sans-serif;color:#474747;border-radius:0;outline:none;-webkit-appearance:none;appearance:none;box-sizing:border-box;transition:border-color .15s,background-color .15s}
.bronze-brochure .brochure-form .field .vb-f textarea{min-height:110px;resize:vertical}
.bronze-brochure .brochure-form .field .vb-f select{padding-right:34px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237b7064' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:12px 8px}
.bronze-brochure .brochure-form .field .vb-f input:focus,.bronze-brochure .brochure-form .field .vb-f select:focus,.bronze-brochure .brochure-form .field .vb-f textarea:focus{border-color:#7b7064;background-color:#fff}
.bronze-brochure .brochure-form .field .vb-f > label{position:absolute;left:14px;top:15px;margin:0;pointer-events:none;color:#8a8a8a;font:16px/20px Poppins,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 44px);transition:opacity .12s}
.bronze-brochure .brochure-form .vb-f > label .compulsory{color:#ff6d6d}
.bronze-brochure .brochure-form .vb-f input:not(:placeholder-shown) + label,.bronze-brochure .brochure-form .vb-f textarea:not(:placeholder-shown) + label,.bronze-brochure .brochure-form .vb-f.filled > label{opacity:0}
.bronze-brochure .brochure-form .field .vb-f.bad input,.bronze-brochure .brochure-form .field .vb-f.bad select,.bronze-brochure .brochure-form .field .vb-f.bad textarea{border-color:#ff6d6d;background-color:#ffe3e3}
.bronze-brochure .brochure-form .field .vb-f.bad > label{color:#c0392b}
.bronze-brochure .brochure-form .vb-f.bad::after{content:"!";position:absolute;right:12px;top:14px;width:22px;height:22px;border-radius:50%;background:#ff6d6d;color:#fff;font:700 14px/22px Poppins,sans-serif;text-align:center;pointer-events:none}
.bronze-brochure .brochure-form .vb-f.vb-sel.bad::after{right:34px}
.bronze-brochure .brochure-form .vb-hint{margin:4px 0 0;font:13px Poppins,sans-serif;color:#c0392b}
/* Address suggestions, under the search box as the visitor types. */
.bronze-brochure .brochure-form .vb-suggest{position:absolute;left:0;right:0;top:50px;z-index:20;margin:0;padding:0;list-style:none;background:#fff;border:2px solid #7b7064;border-top:0;max-height:320px;overflow-y:auto;box-shadow:0 8px 18px rgba(0,0,0,.12)}
.bronze-brochure .brochure-form .vb-suggest li{margin:0;padding:10px 12px;border-top:1px solid #eee;cursor:pointer;font:15px/1.3 Poppins,sans-serif;color:#474747}
.bronze-brochure .brochure-form .vb-suggest li:first-child{border-top:0}
.bronze-brochure .brochure-form .vb-suggest li:hover,.bronze-brochure .brochure-form .vb-suggest li.active{background:#efebe7}
.bronze-brochure .brochure-form .vb-suggest .desc{margin-left:6px;font-size:13px;color:#717171}
.bronze-brochure .brochure-form .vb-suggest li.more .desc::after{content:" \203A";color:#7b7064}
/* Spinner in the search box while a search or address takes long enough to notice (brochure.js adds .busy). */
.bronze-brochure .brochure-form .vb-f.busy::before{content:"";position:absolute;right:14px;top:17px;width:16px;height:16px;border:2px solid #dfdfdf;border-top-color:#7b7064;border-radius:50%;box-sizing:border-box;animation:vb-spin .7s linear infinite;pointer-events:none}
.bronze-brochure .brochure-form .vb-f.busy::after{display:none}
.bronze-brochure .brochure-form .vb-suggest.fetching{opacity:.5;pointer-events:none}
@keyframes vb-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.bronze-brochure .brochure-form .vb-f.busy::before{animation-duration:2s}}
/* Hard copy / PDF, side by side at the top of the form: grey like the boxes, bronze once chosen. */
.bronze-brochure .brochure-form .vb-type{display:flex;gap:12px;margin:0 0 24px;padding:0;border:0;min-width:0}
.bronze-brochure .brochure-form .field .vb-type label{flex:1 1 0;position:relative;display:flex;align-items:center;justify-content:center;min-height:55px;margin:0;padding:10px;border:2px solid #dfdfdf;background:#f6f6f6;color:#8a8a8a;font:15px/1.3 Poppins,sans-serif;text-transform:uppercase;letter-spacing:1px;text-align:center;cursor:pointer;transition:border-color .15s,background-color .15s,color .15s}
.bronze-brochure .brochure-form .field .vb-type label:hover{border-color:#b9b9b9}
.bronze-brochure .brochure-form .field .vb-type label.chosen{background:#7b7064;border-color:#7b7064;color:#e2e2e2}
.bronze-brochure .brochure-form .field .vb-type label:focus-within{outline:3px solid #b7a998;outline-offset:2px}
.bronze-brochure .brochure-form .vb-type input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.bronze-brochure .brochure-form .field .vb-type.bad label{border-color:#ff6d6d;background:#ffe3e3;color:#c0392b}
.bronze-brochure .enter-manually,.bronze-brochure .reset-postcode{font-size:14px;text-transform:uppercase;letter-spacing:1px;text-decoration:underline}
.bronze-brochure .enter-manually,.bronze-brochure .reset-postcode{display:inline-block;margin:10px 0 0;color:#6c6c6c} /* the intro text's grey */
.bronze-brochure .bronze-check{display:flex;align-items:center;gap:8px;margin-top:5px}
.bronze-brochure .brochure-form .field .bronze-check input{width:24px;height:28px;flex:none;accent-color:#7b7064}
.bronze-brochure .brochure-form .field .bronze-check label{margin:0;font-size:16px;color:#6c6c6c} /* the intro text's grey */
.bronze-brochure .brochure-form .field .bronze-brochure-project + .bronze-check label{font-size:14px}
/* "Call me" ticked: when to call (the callback popup's picker, theme inc/callback.php), under the tickbox. */
.bronze-brochure .vb-call-when{margin:6px 0 4px}
.bronze-brochure .vb-call-when .vc-when-heading{margin:10px 0 0;font-size:16px;line-height:1.3;letter-spacing:1px;color:#655d60}
.bronze-brochure .brochure-form .vb-call-when .vc-slots{margin:12px 0 0}
.bronze-brochure .brochure-form .field .vb-call-when .vc-slots label{min-height:50px;padding:6px 8px;font-size:14px;line-height:1.2}
.bronze-brochure .vb-call-when .vc-slot-sub{display:block;white-space:nowrap;font-size:.9em}
.bronze-brochure .vb-call-when .vc-disclaimer{margin:10px 0 0;font-size:14px;line-height:1.4;color:#6c6c6c}
@media (max-width:600px){
	.bronze-brochure .brochure-form .vb-call-when .vc-slots{gap:6px}
	.bronze-brochure .brochure-form .field .vb-call-when .vc-slots label{font-size:12px;letter-spacing:0;padding:4px}
}
/* Button as on the old page: black, white, pale border. */
.bronze-brochure .brochure-form .field .requestbrochure{border:2px solid #dfdfdf;padding:10px 20px;font-family:Poppins,sans-serif;font-size:14px;font-weight:700;letter-spacing:2px;text-transform:uppercase;background:#000;color:#fff;cursor:pointer}
.bronze-brochure .lookup-msg{font-size:14px;margin:8px 0 0}
.bronze-brochure .brochure-form .field .requestbrochure{display:block;width:100%;margin-top:10px;padding:10px 16px;font-size:15px}
.bronze-brochure .brochure-form .requestbrochure:disabled{opacity:.6;cursor:wait}
/* The button is as tall as the boxes and the hard copy / PDF options. */
.bronze-brochure .brochure-form .field .requestbrochure.vb-submit{min-height:55px}
.bronze-brochure .bronze-brochure-error{background:#ffe3e3;border-left:4px solid #ff6d6d;padding:8px 12px;margin-top:16px}
.bronze-brochure .bronze-brochure-privacy{margin:16px 0 100px;font-size:16px}
.bronze-brochure .bronze-brochure-privacy a{text-decoration:underline}
.bronze-brochure .bronze-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bronze-brochure .bronze-brochure-done{text-align:center;padding-bottom:60px}
.bronze-brochure .bronze-brochure-done .btn,.bronze-brochure-sent .btn{display:inline-block}
.bronze-brochure-pages{background:#e8e8e8}
.bronze-brochure-pages .row > div{padding:20px 10px}

/* Text for screen readers only (the brochure form's labels and live messages). */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}
.bronze-brochure .bronze-brochure-done .btn,.bronze-brochure-sent .btn{width:auto} /* the site's .btn is full width; the old page's PDF buttons were not */
/* Bronze's body font (Roboto) isn't loaded, so the form's own text uses Poppins like the rest of the site. */
.bronze-brochure .brochure-form .bronze-check label,.bronze-brochure .enter-manually,.bronze-brochure .reset-postcode,.bronze-brochure .lookup-msg,.bronze-brochure .bronze-brochure-error,.bronze-brochure .bronze-brochure-done p{font-family:Poppins,sans-serif}