/* Vale blocks: replaces the inline styles used in the legacy markup. Loaded on the site and in the editor. */

/* The legacy CSS leaves the page transparent; browsers in dark mode can then paint it dark. */
html, body { background: #fff; }

/* The page never scrolls sideways. The legacy rows' -4px side margins poke past the screen edge in sections
   with no side padding on phones (the old site hid some with overflow:hidden); main cuts them off. "clip"
   (unlike "hidden") cuts sideways only and doesn't turn main into a scroll box. Nothing in the content is
   meant to be scrolled to sideways. */
main { overflow-x: clip; }
/* Cookiebot's hidden 4px helper iframe: Firefox puts it just past the right edge, which made every page
   scroll 4px sideways. Keep it at the left, where it can't. */
.CybotCookiebotOffscreenIframe { left: 0 !important; right: auto !important; }
/* An email address is one long "word": in large intro text (contact page, ~768px wide) it ran past the
   screen edge. Let it wrap, only when it doesn't fit. */
a[href^="mailto:"] { overflow-wrap: anywhere; }

/* Media-library images carry width/height attributes (prevents layout shift); keep them fluid. */
/* Header/menu/footer images have width/height attributes (shape before loading); the CSS still sizes them. */
#logo_container img { width: 238px; height: 52.86px; } /* the wide logo (768px and up) at its usual size */
@media only screen and (max-width: 767px) { #logo_container img { width: 120.29px; height: 85px; } } /* square logo */
/* Hero slider: hold the first photo's height + 100px before the slider script sets the same (see hero-slider/render.php). */
.valeslidercontainer { container-type: inline-size; }
/* The video fills its slide at every width (it sits 100px higher, under the header), cropping the sides if need be, instead of leaving a gap below. */
#valeslider li #sliderVideo { height: calc(100% + 100px); }
#valeslider[style*="--vale-hero-ratio"] { height: calc(100cqw * var(--vale-hero-ratio) + 100px); }
@media (max-width: 768px) { #valeslider[style*="--vale-hero-ratio"] { height: calc(100cqw * var(--vale-hero-ratio-mobile) + 100px); } }
.nav .menu-right img, footer .footer-logo img { height: auto; }

img.r,
.valeslidercontainer img { height: auto; }

/* Logged in: the admin bar pushes the page down, so the fixed header, the menu button and the slide-out menu
   (all fixed at the top, separately) move down with it, and stay lined up with the header search. */
body.admin-bar header, body.admin-bar button.menu-burger, body.admin-bar .nav { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar header, body.admin-bar button.menu-burger, body.admin-bar .nav { top: 46px; }
}

.vale-fill { height: 100%; line-height: 0; }
/* Image & text with the text centred: no margin under the last item (usually the button), so it sits in the true middle. */
.vale-text-centred > :last-child, .vale-text-centred > .acf-innerblocks-container > :last-child { margin-bottom: 0; }

.vale-cards-section { padding: 40px 0 0; }
.vale-cards-section.vale-no-pt { padding-top: 0; } /* Cards with a Space above other than 40px: the block's own padding replaces it */
.vale-card { background: #fff; height: 100%; }
.vale-card p { padding: 0 25px; }
.vale-card p.vale-card-title { font-size: 18px; padding: 0 10px; }

.vale-link-card { padding-top: 20px; background: #fff; height: 100%; }

.vale-feature-row .wp-block-heading { margin-top: 40px; }
/* Feature row with 40px above, straight after the section heading: the original had the heading in its own row,
   so the two spaces add up rather than overlapping. Padding instead of margin stops them merging. */
.vale-feature-rows .wp-block-heading + .vale-feature-row.mt-4 { margin-top: 0; padding-top: 20px; }
@media only screen and (min-width: 48em) { .vale-feature-rows .wp-block-heading + .vale-feature-row.mt-4 { padding-top: 40px; } }

/* Also the "Specification" paragraph style, for case studies without a drawing. */
.vale-specs,
p.is-style-vale-specs.is-style-vale-specs {
	color: #b1b1b0;
	font-family: baskerville;
	line-height: initial;
	font-size: 24px;
	text-align: center;
}
/* As the original's specification box: 20px above (its pt-2), nothing below. */
p.is-style-vale-specs.is-style-vale-specs { margin: 20px 0 0; }
/* Phones: as the original's cs-xs-override class (16px Jost). */
@media screen and (max-width: 767px) {
	p.is-style-vale-specs.is-style-vale-specs { font-family: Jost, sans-serif; font-size: 16px; font-style: normal; }
}

.vale-daynight-col { padding: 0; }
.vale-daynight-heading { display: inline-block; color: #fff !important; font-size: 34px; }
.vale-daynight { width: 100%; } /* the legacy .transition-container is 100vw; the original overrode it inline */
.vale-daynight img { max-width: none; height: auto; display: block; }

/* Buttons placed one after another in a text area. */
.btn + .btn { margin-left: 10px; }

/* Gallery block (mirrors the legacy #lightgallery rules, but works for several galleries per page). */
.vale-gallery { overflow: hidden; max-width: 1250px; margin-left: auto; margin-right: auto; } /* 1250px, as lightgallery-bundle.css's #lightgallery */
/* Hover: the photo zooms slightly and fades, as the originals. */
.vale-gallery .vale-gallery-item { overflow: hidden; transition: opacity .25s ease-in-out; }
.vale-gallery img { transition: all 1s ease-in-out; }
.vale-gallery .vale-gallery-item:hover img { scale: 1.05; opacity: .75; }
.vale-gallery .vale-gallery-item { position: relative; margin-bottom: 5px; }
.vale-gallery img { height: 100%; max-width: initial; }
.vale-gallery-later { display: none !important; }
@media (max-width: 47.9375em) { .vale-gallery .vale-gallery-item { order: var(--vale-order); } }

/* Image with a caption over it. */
.vale-captioned { position: relative; line-height: 0; }
.vale-captioned .cs-overlay { line-height: initial; }

/* Video block. */
.vale-video { width: 100%; height: auto; display: block; }

/* 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; }

/* Columns "Photos side by side at the same height": widths follow each photo's shape (--vale-ratio
   is set per column in inc/blocks.php). On phones only for columns that aren't full width there. */
.vale-same-height > [class*="col-"]:not(.col-xs-12),
.vale-same-height > .acf-innerblocks-container > [class*="col-"]:not(.col-xs-12) { flex: var(--vale-ratio, 1) 1 0; max-width: none; }
@media (min-width: 768px) {
	.vale-same-height > [class*="col-"],
	.vale-same-height > .acf-innerblocks-container > [class*="col-"] { flex: var(--vale-ratio, 1) 1 0; max-width: none; }
}

/* Image block "Maximum size" option (inline images stay centred by the column's text alignment). */
img.r.vale-max-64 { max-width: 64px; }
img.r.vale-max-300 { max-width: 300px; }
img.r.vale-max-400 { max-width: 400px; }
img.r.vale-max-500 { max-width: 500px; }
img.r.vale-max-half { max-width: 50%; }
img.r.vale-max-natural { margin-left: auto; margin-right: auto; } /* width cap is inline: the file's own width */

/* Logos block: small images side by side (the old inline <img> tags). */
.vale-logos { text-align: center; }
.vale-logos .vale-logo { display: inline-block; vertical-align: middle; width: auto; max-width: 100%; height: auto; }
.vale-logos .vale-logo-h230 { max-height: 230px; margin: 15px; }
.vale-logos .vale-logo-h150 { max-height: 150px; margin-bottom: 20px; }

/* Vacancies block and vacancy pages (the old careers.php list and job view). */
.vale-vacancies .career { padding: 0; list-style-type: none; }
.vale-vacancy-body ul { list-style-position: inside; padding: 0; }

/* A section heading that keeps the old H1 size (e.g. "Similar Case Studies"); phones use the shared 24px heading rule. */
h2.vale-section-title { font-size: 34px; line-height: 1.2; }

/* Visually hidden but read by screen readers and search engines (e.g. the H1 behind a logo). */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Site search: form (menu panel, header icon, 404, Articles page), contact panel and results. */
.vale-search { display: flex; align-items: center; max-width: 640px; margin: 0 auto 20px; border-bottom: 1px solid #172b3a; }
.vale-search input[type="search"] { flex: 1; min-width: 0; border: 0; border-radius: 0; background: transparent; font: inherit; font-size: 18px; color: #172b3a; padding: 10px 4px; -webkit-appearance: none; appearance: none; }
.vale-search input[type="search"]::placeholder { color: #8a8a8a; }
.vale-search input[type="search"]:focus { outline: none; }
.vale-search:focus-within { border-bottom: 2px solid #172b3a; margin-bottom: 19px; } /* a heavier underline instead of a box */
.vale-search button { border: 0; background: none; color: #172b3a; padding: 8px 10px; cursor: pointer; line-height: 0; }
.nav .menu-left .inner .vale-search-menu { width: 500px; max-width: 100%; margin: 0 0 25px; }
.nav .menu-left .inner .vale-search-menu input[type="search"] { font-size: 16px; }
/* Header search: a box beside MENU on wide screens; an icon opening a full-width bar on narrower ones. */
.vale-header-search-toggle { display: none; position: absolute; top: 0; left: 165px; z-index: 11; padding: 37px 10px; border: 0; background: none; color: #172b3a; cursor: pointer; line-height: 0; }
.vale-header-search-box { position: absolute; top: 28px; left: 175px; z-index: 11; width: 250px; text-align: left; }
.vale-header-search-box .vale-search { margin: 0; }
.vale-header-search-box .vale-search:focus-within { margin-bottom: -1px; }
.vale-header-search-box input[type="search"] { font-size: 14px; letter-spacing: 1px; padding: 8px 2px; }
/* Hidden as soon as the menu opens; shown again only once the menu has slid away (1s), so it never sits on top of the panel. */
.vale-header-search { transition: visibility 0s 1s; }
.show-nav .vale-header-search { visibility: hidden; transition-delay: 0s; }
.vale-search-dropdown { position: absolute; top: 100%; left: 0; width: 440px; max-width: calc(100vw - 40px); max-height: 70vh; overflow-y: auto; margin-top: 8px; background: #fff; border: 1px solid #d9d9d9; box-shadow: 0 8px 24px rgba(23, 43, 58, .15); text-align: left; }
.vale-search-dropdown a { display: block; padding: 10px 14px; border-bottom: 1px solid #eee; color: #6c6c6c; }
.vale-search-dropdown a:hover, .vale-search-dropdown a.is-active { background: #f5f5f5; }
.vale-search-dropdown .vale-search-kind { font-size: 11px; margin-bottom: 1px; }
.vale-search-dropdown .vale-dd-title { display: block; font-family: Baskerville, serif; font-size: 17px; line-height: 1.25; color: #172b3a; }
.vale-search-dropdown .vale-dd-snippet { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; }
.vale-search-dropdown .vale-dd-all { color: #172b3a; font-size: 14px; text-align: center; text-decoration: underline; border-bottom: 0; }
.vale-search-dropdown .vale-dd-none { padding: 14px; font-size: 14px; text-align: center; }
.vale-search-dropdown mark { background: #f6e7b0; color: inherit; padding: 0 1px; }
@media (max-width: 1099px) {
	.vale-header-search-toggle { display: block; }
	.vale-header-search-box { display: none; top: 100%; left: 0; right: 0; width: auto; padding: 10px 20px 14px; background: #fff; border-bottom: 1px solid #e3e3e3; }
	.vale-header-search.is-open .vale-header-search-box { display: block; }
	.vale-header-search-box input[type="search"] { font-size: 16px; }
	.vale-search-dropdown { position: static; width: auto; max-width: none; max-height: 60vh; box-shadow: none; }
}
.vale-search-page h1 { margin-bottom: 25px; }
.vale-search-contact { background: #f1f1f1; padding: 14px 20px; margin: 25px 0 10px; text-align: center; }
.vale-search-contact p { margin: 0; }
.vale-search-status { text-align: center; color: #6c6c6c; margin: 15px 0 0; }
.vale-search-status a { text-decoration: underline; }
.vale-search-results { list-style: none; margin: 20px 0 0; padding: 0; }
.vale-search-result { display: flex; gap: 18px; align-items: flex-start; padding: 20px 0; border-top: 1px solid #e3e3e3; text-align: left; }
.vale-search-thumb { flex: 0 0 75px; }
.vale-search-thumb img { display: block; width: 75px; height: 75px; object-fit: cover; }
.vale-search-kind { display: block; margin-bottom: 3px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #8a8a8a; }
.vale-search-title { font-family: Baskerville, serif; font-size: 21px; line-height: 1.25; color: #172b3a; }
.vale-search-result p { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: #6c6c6c; }
.vale-search-q { font-weight: 600; color: #172b3a; }
.vale-search-result mark { background: #f6e7b0; color: inherit; padding: 0 1px; }
.vale-search-404 .header { margin-bottom: 10px; }
@media (max-width: 767px) {
	/* Slide the phone menu 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 end positions. */
	.nav .menu-left { left: 0; transform: translateX(-100%); transition: transform 1s ease-in-out; }
	.nav.show .menu-left { transform: none; }
	.vale-header-search-toggle { left: 62px; padding: 37px 8px; }
	.vale-search-result { gap: 12px; }
	.vale-search-thumb, .vale-search-thumb img { flex-basis: 60px; width: 60px; height: 60px; }
	.vale-search-title { font-size: 18px; }
}
.vale-search-dropdown .vale-dd-none a { display: inline; padding: 0; border: 0; color: #172b3a; text-decoration: underline; }
/* "Questions? Contact our team…" in the dropdown: the search page's panel, smaller */
.vale-search-dropdown .vale-dd-contact { background: #f1f1f1; padding: 10px 14px; font-size: 13px; line-height: 1.5; text-align: center; }
.vale-search-dropdown .vale-dd-contact p { margin: 0; font-size: inherit; }
.vale-search-dropdown .vale-dd-contact a { display: inline; padding: 0; border: 0; color: #172b3a; text-decoration: underline; font-size: inherit; }
.vale-search-dropdown .vale-dd-contact a:hover { background: none; }

/* Breadcrumb trail under the header (inc/breadcrumbs.php) */
.vale-breadcrumbs { background: #f6f6f6; border-bottom: 1px solid #e6e6e6; font-size: 13px; line-height: 1.5; padding: 10px 0; color: #6c6c6c; text-align: left; }
.vale-breadcrumbs a { color: #6c6c6c; text-decoration: none; font-size: inherit; }
.vale-breadcrumbs a:hover, .vale-breadcrumbs a:focus { color: #172b3a; text-decoration: underline; }
.vale-breadcrumbs .sep { margin: 0 8px; color: #aaa; }
.vale-breadcrumbs .breadcrumb_last { color: #172b3a; }
@media (max-width: 767px) {
	/* One line on phones: the current page shortens with an ellipsis. */
	.vale-breadcrumbs .container-fluid > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Image block with "vale-img-gap" (Advanced → Additional CSS class): keeps the small gap under the
   image that the old markup had (an image on a text line), e.g. the stacked pair on the home page. */
.line-height.vale-img-gap { line-height: inherit !important; }

/* Columns block with "vale-wide-gutter" (Advanced → Additional CSS class): 40px between columns instead
   of 16px, as the old project-card grids (.case-studies-block), e.g. Overseas Projects. */
.vale-wide-gutter :is(.top-xs, .middle-xs).row { margin-left: 0; margin-right: 0; } /* the old grid's outer photos sat inside its padding */
.vale-wide-gutter :is(.top-xs, .middle-xs).row [class*="col-"] { padding-left: 1rem; padding-right: 1rem; }
@media only screen and (min-width: 48em) { .vale-wide-gutter :is(.top-xs, .middle-xs).row [class*="col-"] { padding-left: 1.25rem; padding-right: 1.25rem; } }

/* Logos block with "vale-logos-baseline": logos sit on the text line, leaving a small gap between
   wrapped rows, as the old certificate and award rows did (Environmental & Certification). */
.vale-logos-baseline .vale-logo { vertical-align: baseline; }

/* ---- Brochure request form (blocks/brochure-form) ---------------------------------------------- */
.vale-brochure [hidden]{display:none!important}
.vale-brochure .vale-brochure-banner img{display:block;width:100%}
.vale-brochure-sent .request-brochure{padding-top:60px;padding-bottom:40px}
.vale-brochure .brochure-form .field{width:50%;margin-left:25%;padding:0;display:block}
@media (max-width:1300px){.vale-brochure .brochure-form .field{width:100%;margin-left:0}}
.vale-brochure .brochure-form .field label{display:block;margin-top:5px;font-size:15px}
.vale-brochure .brochure-form .field select,.vale-brochure .brochure-form .field input[type=text],.vale-brochure .brochure-form .field input[type=email],.vale-brochure .brochure-form .field input[type=tel]{width:100%;min-height:38px}
.vale-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){
	.vale-brochure .brochure-form .vale-brochure-row{display:grid;gap:0 16px;align-items:start}
	.vale-brochure .brochure-form .vale-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. */
	.vale-brochure .brochure-form .vale-brochure-row-contact{grid-template-columns:minmax(90px,1fr) 2fr 2fr}
	.vale-brochure .brochure-form .vale-brochure-row-contact > div:first-child{grid-column:span 2}
	.vale-brochure .brochure-form .vale-brochure-row > div{min-width:0}
}
.vale-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. */
.vale-brochure .brochure-form .vb-f{position:relative;margin-top:12px}
.vale-brochure .brochure-form .field .vb-f input,.vale-brochure .brochure-form .field .vb-f select,.vale-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 Jost,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}
.vale-brochure .brochure-form .field .vb-f textarea{min-height:110px;resize:vertical}
.vale-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='%23172b3a' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:12px 8px}
.vale-brochure .brochure-form .field .vb-f input:focus,.vale-brochure .brochure-form .field .vb-f select:focus,.vale-brochure .brochure-form .field .vb-f textarea:focus{border-color:#172b3a;background-color:#fff}
.vale-brochure .brochure-form .field .vb-f > label{position:absolute;left:14px;top:15px;margin:0;pointer-events:none;color:#8a8a8a;font:16px/20px Jost,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 44px);transition:opacity .12s}
.vale-brochure .brochure-form .vb-f > label .compulsory{color:#ff6d6d}
.vale-brochure .brochure-form .vb-f input:not(:placeholder-shown) + label,.vale-brochure .brochure-form .vb-f textarea:not(:placeholder-shown) + label,.vale-brochure .brochure-form .vb-f.filled > label{opacity:0}
.vale-brochure .brochure-form .field .vb-f.bad input,.vale-brochure .brochure-form .field .vb-f.bad select,.vale-brochure .brochure-form .field .vb-f.bad textarea{border-color:#ff6d6d;background-color:#ffe3e3}
.vale-brochure .brochure-form .field .vb-f.bad > label{color:#c0392b}
.vale-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 Jost,sans-serif;text-align:center;pointer-events:none}
.vale-brochure .brochure-form .vb-f.vb-sel.bad::after{right:34px}
.vale-brochure .brochure-form .vb-hint{margin:4px 0 0;font:13px Jost,sans-serif;color:#c0392b}
/* Address suggestions, under the search box as the visitor types. */
.vale-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 #172b3a;border-top:0;max-height:320px;overflow-y:auto;box-shadow:0 8px 18px rgba(0,0,0,.12)}
.vale-brochure .brochure-form .vb-suggest li{margin:0;padding:10px 12px;border-top:1px solid #eee;cursor:pointer;font:15px/1.3 Jost,sans-serif;color:#474747}
.vale-brochure .brochure-form .vb-suggest li:first-child{border-top:0}
.vale-brochure .brochure-form .vb-suggest li:hover,.vale-brochure .brochure-form .vb-suggest li.active{background:#e9eef2}
.vale-brochure .brochure-form .vb-suggest .desc{margin-left:6px;font-size:13px;color:#717171}
.vale-brochure .brochure-form .vb-suggest li.more .desc::after{content:" \203A";color:#172b3a}
/* Spinner in the search box while a search or address takes long enough to notice (brochure.js adds .busy). */
.vale-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:#172b3a;border-radius:50%;box-sizing:border-box;animation:vb-spin .7s linear infinite;pointer-events:none}
.vale-brochure .brochure-form .vb-f.busy::after{display:none}
.vale-brochure .brochure-form .vb-suggest.fetching{opacity:.5;pointer-events:none}
@keyframes vb-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.vale-brochure .brochure-form .vb-f.busy::before{animation-duration:2s}}
.vale-brochure .stage-choice .field{margin-bottom:20px}
.vale-brochure .radio{width:100%;background:#172b3a;border:1px solid #172b3a;padding:20px;display:flex!important;flex-direction:column;height:150px;margin:auto;align-items:center;justify-content:center;color:#e2e2e2;font-size:15px!important;cursor:pointer;text-transform:uppercase;letter-spacing:1px;text-align:center;gap:10px}
.vale-brochure .brochure-form .field label.radio{margin-top:0}
.vale-brochure .radio img{opacity:.8;width:64px;height:64px}
.vale-brochure .radio:hover img,.vale-brochure .radio:focus-within img{opacity:1}
.vale-brochure .radio:focus-within{outline:3px solid #8ab4d6;outline-offset:2px}
.vale-brochure .radio input{position:absolute;opacity:0;width:1px;height:1px}
.vale-brochure .enter-manually,.vale-brochure .reset-postcode{font-size:14px;text-transform:uppercase;letter-spacing:1px;text-decoration:underline}
.vale-brochure .enter-manually,.vale-brochure .reset-postcode{display:inline-block;margin:10px 0 0}
.vale-brochure .vale-check{display:flex;align-items:center;gap:8px;margin-top:5px}
.vale-brochure .brochure-form .field .vale-check input{width:24px;height:28px;flex:none;accent-color:#172b3a}
.vale-brochure .brochure-form .field .vale-check label{margin:0;font-size:16px}
.vale-brochure .brochure-form .field .vale-brochure-project + .vale-check label{font-size:14px}
/* Button as on the old page: navy, white bold Jost, pale border. */
.vale-brochure .brochure-form .field .requestbrochure{border:2px solid #dfdfdf;padding:10px 20px;font-family:Jost,sans-serif;font-size:14px;font-weight:700;letter-spacing:2px;text-transform:uppercase;background:#172b3a;color:#fff;cursor:pointer}
.vale-brochure .lookup-msg{font-size:14px;margin:8px 0 0}
.vale-brochure .brochure-form .field .requestbrochure{display:block;width:100%;margin-top:10px;padding:10px 16px;font-size:15px}
.vale-brochure .brochure-form .requestbrochure:disabled{opacity:.6;cursor:wait}
.vale-brochure .vale-brochure-error{background:#ffe3e3;border-left:4px solid #ff6d6d;padding:8px 12px;margin-top:16px}
.vale-brochure .vale-brochure-privacy{margin:16px 0 100px;font-size:16px}
.vale-brochure .vale-brochure-privacy a{text-decoration:underline}
.vale-brochure .vale-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.vale-brochure .vale-brochure-done{text-align:center;padding-bottom:60px}
.vale-brochure .vale-brochure-done .btn,.vale-brochure-sent .btn{display:inline-block}
.vale-brochure-pages{background:#e8e8e8}
.vale-brochure-pages .row > div{padding:20px 10px}

/* Block styles (Styles panel): "Photo label" paragraphs and "Smaller" headings, as the old Overseas Projects page. */
.is-style-vale-label { font-family: Baskerville, serif; font-size: 18px; text-transform: uppercase; margin-bottom: 0; }
/* Doubled class to outrank h2.initial (34px desktop, 28px phones); the original used an inline 29px at every width. */
.is-style-vale-smaller.is-style-vale-smaller { font-size: 29px; }
/* "Smaller intro" paragraphs: 22px on desktops, as the original's inline style on Contact Us and the galleries.
   vale.css's !important sizes still win below that (28px up to 1025px, 16px on phones), as on the original. */
p.is-style-vale-intro.is-style-vale-intro.is-style-vale-intro { font-size: 22px; }
/* Links inside editor headings take the heading's size (the site CSS sets every link to 16px). */
.wp-block-heading a { font-size: inherit; }
/* "Title band" headings: 20px above and below and no margin, so a grey Text section hugs the title (Client Journey, Project Considerations). */
.is-style-vale-title-band.is-style-vale-title-band { padding-top: 20px; padding-bottom: 20px; margin-bottom: 0; }
@media screen and (max-width: 1025px) { .is-style-vale-title-band.is-style-vale-title-band { padding-top: 10px; padding-bottom: 10px; } }
/* On phones the original title ran the full screen width; step out of the page container's 2rem side padding. */
@media screen and (max-width: 767px) { .is-style-vale-title-band.is-style-vale-title-band { margin-left: -2rem; margin-right: -2rem; } }
/* Links inside large "header" paragraphs take the paragraph's size, as the originals did inline (Architectural Bronze, Paint, Contact Us). */
p.header a { font-size: inherit; }

/* "Similar Case Studies" cards: the button sits at the bottom, level across cards whether the title runs to one line or two. */
.vale-related-card { display: flex; flex-direction: column; }
.vale-related-card .btn { margin-top: auto; align-self: center; }

/* Columns "Page width, no side margins": the case studies' style="padding:0px" containers. */
.container-fluid.vale-flush { padding-left: 0; padding-right: 0; }

/* Article header: live prints the date as a <span> right under the ARTICLE tag; ours is a <p>, so drop its top margin. */
.title-block .tag ~ p:first-of-type { margin-top: 0; }
.title-block .tag ~ p:last-child { margin-bottom: 0; } /* 60px to the next section, as on live */
@media (min-width: 768px) { /* date and byline on one line; stacked on phones */
	.title-block .tag ~ p { display: inline; }
	.title-block .tag ~ p.vale-byline::before { content: "\00a0\00b7\00a0"; }
}

/* Text block "Grey box": the boxed links to other articles (live: inline background #f1f1f1 on a .p-3 column). */
.vale-callout { background: #f1f1f1; }
.vale-callout a { text-decoration: underline; }

/* "None on phones" spacing as padding (vale_space_class(), e.g. 60px below, none on phones); vale.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; } }