/*
 * Additions for the revamped Services and Training listings.
 *
 * Kept in its own file because assets/css/style.css is a minified build
 * artefact (style_unminified.css is its source), so hand-editing it would be
 * lost on the next build. Everything is scoped to .acclaim-card-grid, so other
 * pages reusing .service_content or .training_content are untouched.
 */

/* --------------------------------------------------------- square buttons --- */

/*
 * No rounded buttons anywhere. The radii were scattered across two dozen rules
 * in style.css (30px, 35px, 40px, 43px, 44px, 50px, 54px...) plus WPBakery's
 * own .vc_btn3-shape-round (2em) and -shape-rounded (5px), so this squares them
 * in one place rather than chasing each one - and it catches any new button
 * that inherits those classes later.
 *
 * !important is unavoidable: several of the originals are themselves !important,
 * and WPBakery's stylesheet loads after this file.
 */
/* Matched on the CLASS SUBSTRING rather than a list of names. The first pass
   enumerated ~30 selectors and still missed plenty, because the theme names
   buttons a dozen different ways (.slider_btn, .btn_range_more, .need_btn,
   .hover_btn, .banner_bottom_btn, .care-planning-contact-btn ...). Anything
   with "btn" in a class, plus the anchors inside those wrappers, plus the real
   button elements, covers the lot - including any added later. */
[class*="btn"],
[class*="btn"] a,
[class*="Btn"],
[class*="button"],
[class*="button"] a,
button,
a.btn,
input[type="submit"],
input[type="button"],
input[type="reset"],
.vc_btn3,
.vc_btn3.vc_btn3-shape-round,
.vc_btn3.vc_btn3-shape-rounded,
.view__services,
.view__training,
.looking-touch-btn,
.care-planning-contact-btn,
.contact-btn,
.box-card-two a,
.header_contact_btn .nav-link,
.type_radio-btn ul li a,
.type_radio-btn ul li label,
.wpforms-submit,
.wpcf7-submit,
.acclaim-hide-toggle {
	border-radius: 0 !important;
}

/*
 * Stragglers whose class contains neither "btn" nor "button", found by scanning
 * every border-radius rule in style.css. Links and labels styled as buttons,
 * tab and tag pills, and the search controls - a 50px-rounded search field
 * sitting next to a square submit looks broken, so they go together.
 *
 * Deliberately NOT included: .teams_description (a content card, 10px),
 * .file-container (upload UI driven by a CSS variable) and .file-icon .ic
 * (a 100% circle). Those are not buttons.
 */
.back-to-home,
.tabs,
.tag-section ul li,
#filter_sec .start_section label,
.price-range-search,
.mobile-sidebar_section a,
.logo-wp-slide .testimonials_content a,
.search-nev_2 .is-search-input,
.is-search-icon,
.search-nev .input-sln,
.search-nev .input-sm,
.search-nev:hover .input-sl,
.input-form-section .input_field select,
.cont-full .right-cont input[type="submit"],
.news_guide_section input[type="submit"] {
	border-radius: 0 !important;
}

/*
 * Two deliberate exceptions, both genuinely circular rather than pill-shaped:
 * the 36x36 search toggle in the header, and the custom radio/checkbox markers
 * drawn with :before. Squaring those would turn a round icon into a box and
 * radio buttons into checkboxes.
 */
.navbar-nav.ml-auto .btn {
	border-radius: 50% !important;
}

#filter_sec .start_section label:before,
.type_radio-btn ul li a:before,
.type_radio-btn ul li label:before {
	border-radius: 50% !important;
}

/* ------------------------------------------------- outlined orange buttons --- */

/*
 * Solid orange buttons re-styled to match the Back button on the training
 * booking page: white ground, 2px orange border, orange label. Same values as
 * .atb-back in the plugin's stylesheet (border 2px #f68b1f, hover #fff6ec) so
 * the two stay in step.
 *
 * "Where possible" is doing real work here - this deliberately does NOT touch
 * buttons that sit ON an orange or dark panel (.banner_bottom_btn,
 * .btn-loler-sec inside .orange-forlift-box / .grey-forlift-box,
 * .tag-line-section .contact-btn). An orange-on-orange outline would be
 * invisible; those already use white or black and are left alone.
 */
.slider_btn a,
.all_btn a,
.book_now_btn a,
.enquiry_btn a,
.btn_pro_ser a,
.view_btn_services a,
.view_btn_training a,
.reset_btn a,
.need_btn a,
.looking-touch-btn,
.care-planning-contact-btn,
.acclaim-card-grid .view_btn_services a,
.acclaim-card-grid .view_btn_training a,
body .all_banner_bottom_sec .all_btn a,
body .all_banner_bottom_sec .vc_btn3,
body .training_bottom_sec .vc_btn3,
.vc_btn3.vc_btn3-color-warning,
.vc_btn3.vc_btn3-color-warning.vc_btn3-style-classic,
/* style="custom" buttons carry their colours as an INLINE style
   (style="background-color:#f68b1f; color:#ffffff"). An author !important beats
   a plain inline declaration, so listing the class here is what converts them -
   the GET IN TOUCH buttons are all built this way. */
a.vc_btn3-style-custom,
.vc_btn3.vc_btn3-style-custom,
/* Form submits: Contact Form 7, WPForms and plain inputs. The SEND button on
   every enquiry form is one of these. */
.wpcf7-submit,
.wpforms-submit,
.talk_to_us_sec input[type="submit"],
.cont-full .right-cont input[type="submit"],
.news_guide_section input[type="submit"],
#filter_sec .submit_btn_row .btn_submit {
	background: #ffffff !important;
	background-color: #ffffff !important;
	border: 2px solid #f68b1f !important;
	color: #f68b1f !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	transition: background-color .25s ease, color .25s ease !important;
}

.slider_btn a:hover,
.all_btn a:hover,
.book_now_btn a:hover,
.enquiry_btn a:hover,
.btn_pro_ser a:hover,
.view_btn_services a:hover,
.view_btn_training a:hover,
.reset_btn a:hover,
.need_btn a:hover,
.looking-touch-btn:hover,
.care-planning-contact-btn:hover,
.acclaim-card-grid .view_btn_services a:hover,
.acclaim-card-grid .view_btn_training a:hover,
body .all_banner_bottom_sec .all_btn a:hover,
body .all_banner_bottom_sec .vc_btn3:hover,
body .training_bottom_sec .vc_btn3:hover,
.vc_btn3.vc_btn3-color-warning:hover,
.vc_btn3.vc_btn3-color-warning.vc_btn3-style-classic:hover,
a.vc_btn3-style-custom:hover,
.vc_btn3.vc_btn3-style-custom:hover,
.wpcf7-submit:hover,
.wpforms-submit:hover,
.talk_to_us_sec input[type="submit"]:hover,
.cont-full .right-cont input[type="submit"]:hover,
.news_guide_section input[type="submit"]:hover,
#filter_sec .submit_btn_row .btn_submit:hover {
	background: #fff6ec !important;
	background-color: #fff6ec !important;
	border-color: #f68b1f !important;
	color: #f68b1f !important;
}

/*
 * Higher-specificity overrides.
 *
 * style.css carries orange backgrounds at TWO or THREE class levels with
 * !important, e.g.
 *     .product_inner_row .btn_pro_ser a { background-color:#f68b1f !important }
 * which is (0,2,1) against the (0,1,1) of the block above. Both !important, so
 * specificity decides and the theme won - the GET IN TOUCH buttons stayed
 * orange-on-orange no matter what was added to the general rule.
 *
 * Confirmed by reading the live CSSOM rather than the source: of five rules
 * matching that button with a background, the winner was the .product_inner_row
 * one. These selectors are copied verbatim so they tie on specificity, and this
 * file loads after style.css so the tie breaks our way.
 */
.product_inner_row .btn_pro_ser a,
.caption_slider_tab_sec .slider_btn a,
.location_block button.btn.btn-primary,
.submit_changes_btn #submit_form,
.single_product_enquire .submit_changes_btn #submit_form-enquery,
.range_btn a,
.close_flyout_btn,
.talk_to_us_sec input[type="submit"] {
	background: #ffffff !important;
	background-color: #ffffff !important;
	border: 2px solid #f68b1f !important;
	color: #f68b1f !important;
	font-weight: 700 !important;
}

.product_inner_row .btn_pro_ser a:hover,
.caption_slider_tab_sec .slider_btn a:hover,
.location_block button.btn.btn-primary:hover,
.submit_changes_btn #submit_form:hover,
.single_product_enquire .submit_changes_btn #submit_form-enquery:hover,
.range_btn a:hover,
.close_flyout_btn:hover,
.enquiry_btn a:hover,
.book_now_btn_new a:hover,
#filter_sec .submit_btn_row .btn_submit:hover,
.talk_to_us_sec input[type="submit"]:hover {
	background: #fff6ec !important;
	background-color: #fff6ec !important;
	border-color: #f68b1f !important;
	color: #f68b1f !important;
}

/* The homepage hero caption sits over video, where a white button reads well
   but the surrounding text is white - keep that one solid so it still reads as
   the primary action against moving footage. */
.home_banner_image .caption_slider_new .vc_btn3 {
	background: #f68b1f !important;
	background-color: #f68b1f !important;
	border-color: #f68b1f !important;
	color: #ffffff !important;
}

.home_banner_image .caption_slider_new .vc_btn3:hover {
	background: #000000 !important;
	background-color: #000000 !important;
	border-color: #000000 !important;
	color: #ffffff !important;
}

/* ---------------------------------------------------------------- cards --- */

.acclaim-card-grid {
	display: flex;
	flex-wrap: wrap;
}

.acclaim-card-grid > [class*="col-"] {
	display: flex;
	margin-bottom: 30px;
}

.acclaim-card-grid .service_content,
.acclaim-card-grid .training_content {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: #fff;
	box-shadow: rgba(0, 0, 0, .24) 0 3px 8px;
}

/* The image slot was 310px tall and fed a full-size original - up to
   1600x1198 at 284KB - into a card about 370px wide. Height trimmed and the
   markup now serves a responsive srcset. */
.acclaim-card-grid .acclaim-card-media {
	display: block;
	overflow: hidden;
}

.acclaim-card-grid .acclaim-card-media img {
	width: 100%;
	height: 240px !important;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}

.acclaim-card-grid .service_content:hover .acclaim-card-media img,
.acclaim-card-grid .training_content:hover .acclaim-card-media img {
	transform: scale(1.04);
}

.acclaim-card-grid .service_description,
.acclaim-card-grid .training_description {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 22px 24px 24px;
	text-align: left;
	min-height: 0;          /* the old 195px floor fights the flex layout */
}

/* Was a 35px <p> with a 98px min-height and nothing beneath it. Now a real
   heading, sized to sit above a description rather than carry the card. */
.acclaim-card-grid .service_title,
.acclaim-card-grid .training_title {
	font-family: "Ropa Sans", sans-serif;
	font-size: 24px;
	line-height: 28px;
	text-align: left;
	margin: 0 0 10px;
	padding: 0;
	min-height: 0;
	color: #000;
}

.acclaim-card-grid .service_title a,
.acclaim-card-grid .training_title a {
	color: inherit;
	text-decoration: none;
}

.acclaim-card-grid .service_title a:hover,
.acclaim-card-grid .training_title a:hover {
	color: #f68b1f;
}

.acclaim-card-grid .acclaim-card-excerpt {
	font-size: 15px;
	line-height: 25px;
	font-weight: 300;
	margin: 0 0 18px;
	color: #333;
	flex: 1 1 auto;
}

.acclaim-card-grid .acclaim-card-meta {
	display: block;
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #f68b1f;
	margin: 0 0 8px;
	font-family: "Ropa Sans", sans-serif;
}

.acclaim-card-grid .view_btn_services,
.acclaim-card-grid .view_btn_training {
	padding: 0;
	margin-top: auto;
	text-align: left;
}

.acclaim-card-grid .view_btn_services a,
.acclaim-card-grid .view_btn_training a {
	display: inline-block;
	padding: 11px 26px;
	font-size: 14px;
}

/* ------------------------------------------------------- about: stats row --- */

/*
 * The figures are the whole point of this row, but style.css pins them to
 * 30px with !important - barely above the 15px caption beneath them - so they
 * never read as a counter. Overridden here rather than in style.css, which is
 * a minified build artefact.
 *
 * Scoped to the About page so the .counter_sec rule keeps its existing size
 * anywhere else it is used.
 */
/* =========================================================================
   ABOUT PAGE - layout above the timeline
   =========================================================================
   The old layout was the problem, not the styling. Two of the five rows were
   lopsided splits inherited from the original build:

     welcome_sec    1/3 right-aligned headings | 2/3 body copy, with a 2px
                    orange bar dropped between the columns
     about_history  2/3 image | 1/3 body copy

   A heading column ranged right against a text column is a dated pattern, and
   the 8/4 split gives the copy a cramped measure while the image dominates.

   Rebuilt as: a centred single-column opening, a balanced 50/50 story block, a
   full-bleed figures band, and an even row of credential cards.

   All scoped to .page-id-147 - .about-winner-box is also the homepage promo
   row, and .counter_sec is used elsewhere too.
   ========================================================================= */

/* --- 1. opening: two lopsided columns become one centred column -------- */

.page-id-147 .welcome_sec {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center;
	max-width: 900px !important;
	width: 100% !important;
	margin: 0 auto !important;
	padding: 54px 20px 40px !important;
}

.page-id-147 .welcome_sec > .vc_column_container {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	padding: 0 !important;
}

.page-id-147 .welcome_sec .vc_column-inner {
	padding: 0 !important;
	margin: 0 !important;
}

/* Headings were forced right to sit against the divider bar. */
.page-id-147 .welcome_sec h1,
.page-id-147 .welcome_sec h2,
.page-id-147 .welcome_sec h6,
.page-id-147 .welcome_sec p {
	text-align: center !important;
}

/* The eyebrow above the h1 reads as a label, not a competing heading. */
.page-id-147 .welcome_sec h6 {
	font-size: 13px !important;
	letter-spacing: .16em;
	text-transform: uppercase;
	margin-bottom: 12px !important;
	line-height: 1.4 !important;
}

.page-id-147 .welcome_sec h1 {
	font-size: 44px !important;
	line-height: 1.06 !important;
	margin-bottom: 2px !important;
}

.page-id-147 .welcome_sec h2 {
	font-size: 34px !important;
	line-height: 1.15 !important;
	margin-bottom: 22px !important;
}

.page-id-147 .welcome_sec p {
	font-size: 17px;
	line-height: 30px;
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

/* The 2px orange bar that separated the two columns has nothing left to
   separate now they are stacked. */
.page-id-147 .welcome_sec .vc_col-sm-8::after {
	display: none !important;
	content: none !important;
}

/* The 9px orange slab under the intro was the heaviest thing on the page.
   Scoped to the page, NOT to .welcome_sec: that separator lives in its own
   standalone vc_row between the intro and the story block, so a rule aimed
   inside .welcome_sec never matched it and it stayed orange and full width. */
.page-id-147 .vc_sep_line {
	border-top-width: 1px !important;
	border-color: #e6e6e6 !important;
}

/* --- 2. story block: 8/4 becomes a balanced 50/50 --------------------- */

.page-id-147 .about_history {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap;
	gap: 46px;
	max-width: 1240px;
	margin: 0 auto !important;
	padding: 20px 20px 56px !important;
}

.page-id-147 .about_history > .vc_column_container {
	flex: 1 1 380px !important;
	width: auto !important;
	max-width: none !important;
	float: none !important;
	padding: 0 !important;
}

.page-id-147 .about_history .vc_column-inner {
	padding: 0 !important;
}

.page-id-147 .about_history img {
	width: 100%;
	height: auto;
	min-height: 0 !important;
	display: block;
	margin-bottom: 0 !important;
}

.page-id-147 .about_para_content p {
	font-size: 16px;
	line-height: 29px;
}

/* --- 3. figures: a full-bleed band instead of five loose columns ------ */

.page-id-147 .counter_sec {
	display: grid !important;
	grid-template-columns: repeat(5, 1fr);
	align-items: start;
	background: #faf8f6;
	/* Break out of the centred container so the band runs edge to edge. */
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	/* A clear gap and a top edge so the band reads as its own section rather
	   than running straight on from what sits above it. No bottom border - the
	   band's own tint is enough to close it off, and a rule there just stacked
	   another grey line above the timeline. */
	margin-top: 30px !important;
	border-top: 1px solid #ece5de;
	padding: 54px 40px !important;
}

.page-id-147 .counter_sec > .vc_column_container {
	width: auto !important;
	max-width: none !important;
	float: none !important;
	padding: 6px 24px !important;
	text-align: center;
	/* Hairlines BETWEEN the figures rather than a rule under each. */
	border-left: 1px solid #e9e2db;
}

.page-id-147 .counter_sec > .vc_column_container:first-child {
	border-left: 0;
}

/* Each figure carried its own orange rule across the column - twelve of them in
   this band alone. With hairlines now running BETWEEN the figures those are
   redundant, and two sets of rules at right angles is what was clashing. */
.page-id-147 .counter_sec .vc_separator {
	display: none !important;
}

/* The band has a sixth column - a full-width vc_col-sm-12 holding nothing but
   another orange separator. With the separator hidden it was an empty cell
   sitting in a second grid row, padding out the bottom of the band for no
   reason. */
.page-id-147 .counter_sec > .vc_column_container.vc_col-sm-12 {
	display: none !important;
}

/* --- 4. credentials: an even row of cards ---------------------------- */

.page-id-147 .about-winner-box {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	width: 100% !important;
	max-width: 1240px;
	margin: 0 auto !important;
	padding: 56px 20px !important;
	box-shadow: none !important;
}

/*
 * WPBakery gives every .vc_row a clearfix pair:
 *     .vc_row:after,.vc_row:before{content:" ";display:table}
 * and cancels it only on rows that carry .vc_row-flex. This row is the one row
 * on the page WITHOUT that class, so both pseudo-elements survive - and in a
 * grid container a pseudo-element is a grid ITEM. ::before took cell 1, the
 * four cards were pushed into cells 2-5 (so the fourth wrapped onto a second
 * line), and ::after took cell 6.
 */
.page-id-147 .about-winner-box::before,
.page-id-147 .about-winner-box::after {
	content: none !important;
	display: none !important;
}

.page-id-147 .about-winner-box > .vc_column_container {
	width: auto !important;
	max-width: none !important;
	float: none !important;
	border: 1px solid #ececec;
	padding: 28px 20px 26px !important;
	text-align: center;
	transition: border-color .25s ease, transform .25s ease;
}

.page-id-147 .about-winner-box > .vc_column_container:hover {
	border-color: #f68b1f;
	transform: translateY(-3px);
}

/* Cards are laid out as columns so their parts line up across the row, however
   long the text in any one of them runs. */
.page-id-147 .about-winner-box > .vc_column_container > .vc_column-inner,
.page-id-147 .about-winner-box > .vc_column_container > .vc_column-inner > .wpb_wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* 30px names over 82px icons were top-heavy; these are labels, not headlines.
   "Supporting Apprentices" is 22 characters against "Winner" at 6, so it wraps
   to two lines while the others sit on one - which dropped its description
   lower than the rest and made the row look ragged. Reserving two lines for
   every name lines the descriptions up regardless of length. */
.page-id-147 .about-winner-box h3 {
	font-size: 18px !important;
	line-height: 22px !important;
	padding: 14px 0 0 !important;
	margin-bottom: 6px !important;
	color: #f68b1f;
	min-height: 58px;               /* 14px padding + two 22px lines */
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

/* Descriptions vary from 27 to 59 characters, so they take the slack and the
   cards stay the same shape. */
.page-id-147 .about-winner-box .wpb_text_column,
.page-id-147 .about-winner-box p {
	margin-top: 0 !important;
}

.page-id-147 .about-winner-box p {
	flex: 1 1 auto;
}

.page-id-147 .about-winner-box p {
	font-size: 14px !important;
	line-height: 21px !important;
	color: #555 !important;
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}

/* --- 5. closing block ------------------------------------------------- */

.page-id-147 .equal_sec {
	max-width: 820px;
	margin: 0 auto !important;
	padding: 54px 20px !important;
	text-align: center;
}

.page-id-147 .equal_sec h4 {
	font-size: 26px !important;
	padding-bottom: 12px !important;
}

.page-id-147 .equal_sec p {
	font-size: 16px;
	line-height: 29px;
}

/* --- responsive ------------------------------------------------------- */

@media (max-width: 1024px) {
	.page-id-147 .counter_sec {
		grid-template-columns: repeat(3, 1fr);
		row-gap: 32px;
		padding: 40px 24px !important;
	}
	/* With three per row the dividers have to restart each row. */
	.page-id-147 .counter_sec > .vc_column_container:nth-child(3n + 1) {
		border-left: 0;
	}
	.page-id-147 .about-winner-box {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.page-id-147 .welcome_sec {
		padding: 34px 20px 26px !important;
	}
	.page-id-147 .welcome_sec h1 { font-size: 32px !important; }
	.page-id-147 .welcome_sec h2 { font-size: 25px !important; }
	.page-id-147 .welcome_sec p  { font-size: 16px; line-height: 27px; }

	.page-id-147 .about_history {
		gap: 26px;
		padding: 10px 20px 34px !important;
	}

	.page-id-147 .counter_sec {
		grid-template-columns: repeat(2, 1fr);
		padding: 32px 18px !important;
	}
	.page-id-147 .counter_sec > .vc_column_container {
		border-left: 0;
		padding: 10px !important;
	}

	.page-id-147 .about-winner-box {
		grid-template-columns: 1fr;
		padding: 34px 20px !important;
	}

	.page-id-147 .equal_sec {
		padding: 34px 20px !important;
	}
}

.page-id-147 .counter_sec h4 {
	font-size: 46px !important;
	line-height: 1.05;
	padding-top: 6px;
	margin-bottom: 2px;
	color: #f68b1f;
}

.page-id-147 .counter_sec p {
	font-size: 15px;
	line-height: 23px;
	padding-bottom: 0;
}

/* (The rule that used to space these separators is gone - the separators
   themselves are now hidden further up, replaced by hairlines running between
   the figures instead of across each one.) */

/* ------------------------------------------------------ homepage hero fit --- */

/*
 * The hero was pinned to a flat 626px (.home_banner_image max-height, and the
 * video itself height:626px). On a short viewport that plus the header pushes
 * the banner through the fold; on a tall one it leaves dead space.
 *
 * Now it is whichever is SMALLER: the original 626px, or whatever is left below
 * the header. So it never grows beyond today's size and always clears the fold.
 *
 * --acclaim-header-h is measured and set by the snippet in header.php, because
 * the header's height changes across breakpoints (52-58px on mobile, taller on
 * desktop) and hardcoding one number would be wrong at most widths. The
 * fallback covers the moment before that runs, and anyone with JS disabled.
 */
.home_banner_image {
	max-height: none !important;

	/* --acclaim-hero-gap is the breathing room left BELOW the banner: header +
	   banner + this much = one screen. Raise it to shrink the banner, lower it
	   to grow it. This is the one number to tune. */
	--acclaim-hero-gap: 300px;
	--acclaim-hero-h: clamp(260px, calc(100vh - var(--acclaim-header-h, 118px) - var(--acclaim-hero-gap)), 500px);
	--acclaim-hero-h: clamp(260px, calc(100svh - var(--acclaim-header-h, 118px) - var(--acclaim-hero-gap)), 500px);

	height: var(--acclaim-hero-h) !important;

	/* The caption is position:absolute and nothing above it was positioned, so
	   it anchored to a distant ancestor. Making the banner the containing block
	   fixes that.

	   overflow:hidden is deliberately NOT set. style.css positions the caption
	   at bottom:-28px - deliberately hanging below the banner edge - so clipping
	   the overflow is exactly what made the text and buttons vanish. The video
	   already crops itself via object-fit:cover, so nothing needs hiding. */
	position: relative;
}

.home_banner_image video {
	/* The SAME value as the row, not height:100%. A percentage height only
	   resolves against a parent with a definite height, and there are five
	   unstyled WPBakery wrappers between the row and the video - none of which
	   has one. So height:100% collapsed to auto and the video rendered at its
	   intrinsic size. overflow:hidden had been masking that; removing it to
	   rescue the caption is what exposed it as a giant video. */
	height: var(--acclaim-hero-h, 500px) !important;
	max-height: var(--acclaim-hero-h, 500px) !important;
	width: 100% !important;
	object-fit: cover;
	/* display:block replaces the -8px margin hack in style.css, which existed to
	   hide the inline-element descender gap and would now show as a seam. */
	display: block;
	margin-bottom: 0 !important;
}

/* Pin the caption to the banner explicitly. style.css sets bottom to 10px,
   11px and -28px at different widths; the negative one hangs it below the
   banner. Anchored to a fixed offset here so it always sits ON the video. */
.home_banner_image .caption_slider_new {
	position: absolute !important;
	right: 100px !important;
	left: auto !important;
	top: auto !important;
	bottom: 30px !important;
	width: auto !important;
	max-width: calc(100% - 140px);
	margin: 0 !important;
	z-index: 5 !important;
}

@media (max-width: 991px) {
	.home_banner_image .caption_slider_new {
		right: 20px !important;
		bottom: 18px !important;
		max-width: calc(100% - 40px);
	}
}

/*
 * Caption type scales with the viewport rather than stepping down at two fixed
 * breakpoints. The old rules dropped it to a flat 36px under 900px tall and
 * 28px under 740px, which left it looking small in a banner that had room to
 * spare - measured at 720px tall the caption used 208px of a 301px banner, with
 * 63px going begging above it.
 *
 * clamp() gives roughly: 47px at 720px tall, 59px at 910px, 70px at 1080px -
 * bigger everywhere than before, while the lower bound keeps it inside the
 * banner on short screens.
 */
/*
 * TWO headings live here and they are NOT meant to be the same size:
 *
 *   "44 Years" counter      style.css: .home_banner_image h3 { font-size:155px }
 *   "Built on Quality..."   a 50px inline vc_custom_heading
 *
 * One rule covering both flattened them to a single size, which shrank the
 * counter from 155px to ~75px (it reads as regressed) and pushed the strapline
 * well past its intended 50px. Sized separately now, counter still dominant.
 */
.home_banner_image .caption_slider_new .wpb_text_column h3,
.home_banner_image .caption_slider_new .wpb_text_column h3 a,
.home_banner_image .caption_slider_new .years,
.home_banner_image .caption_slider_new .timeRefYears {
	/* Solved as a line through two measured points rather than a fraction of the
	   viewport: 147px at 910px tall (near the theme's intended 155px) and ~50px
	   at 700px, where the banner is only 281px and a proportional size
	   overflowed it by 75px. A plain multiple of the height cannot hit both -
	   it needs the negative offset. */
	font-size: clamp(40px, calc(46.2vh - 273px), 155px) !important;
	line-height: 0.92 !important;
}

/* The strapline: a step up from its original 50px, but nowhere near the
   counter. Reduced from the 75px it briefly hit, which read as too big. */
.home_banner_image .caption_slider_new h3.vc_custom_heading,
.home_banner_image .caption_slider_new h3.vc_custom_heading a {
	/* Same treatment: ~55px at 910px tall, ~28px at 700px. */
	font-size: clamp(20px, calc(12.86vh - 62px), 58px) !important;
	line-height: 1.08 !important;
}

/* The left-hand "Lead Times" block, same treatment. */
.home_banner_image .acl-org {
	font-size: clamp(26px, 8.4vh, 90px) !important;
	font-size: clamp(26px, calc((100svh - 418px) * 0.155), 90px) !important;
	line-height: 1.05 !important;
}

.home_banner_image .acl-head {
	font-size: clamp(18px, 5.2vh, 56px) !important;
	font-size: clamp(18px, calc((100svh - 418px) * 0.095), 56px) !important;
	line-height: 1.18 !important;
}

/* Buttons nudge up with it so they do not look stranded under larger type. */
.home_banner_image .caption_slider_new .vc_btn3 {
	font-size: clamp(13px, 2.1vh, 21px) !important;
	font-size: clamp(13px, calc((100svh - 418px) * 0.038), 21px) !important;
	padding: clamp(9px, 1.5vh, 15px) clamp(14px, 2.2vh, 26px) !important;
}

/* ------------------------------------------------- inner-page banner size --- */

/*
 * Every inner page opened with .all_slider_sec: a row holding nothing but a
 * decorative background image, 550px tall on desktop. All 62 of them checked -
 * every single one is empty, purely a picture - so they are removed outright
 * rather than resized. That is ~550px of the fold handed back on every page.
 *
 * Hiding the class covers both routes it arrives by: the 62 WPBakery rows, and
 * the templates that hardcode it (single-service, single-training,
 * taxonomy-training_category, single-areas, single-makes). On the section-level
 * ones the class is on the <section> itself, so this removes the wrapper too;
 * on the div-level ones .location-banner-section is an unstyled wrapper that
 * collapses to nothing once its only child is gone.
 */
.all_slider_sec,
.tax-tab_section .all_slider_sec {
	display: none !important;
}

/*
 * With the image gone, the title bar underneath - orange, white text - now butts
 * straight up against the orange nav, and the two oranges clash badly.
 *
 * Redesigned as a light header instead: white ground, dark heading, the orange
 * kept as a deliberate accent rule rather than a competing slab. It also fixes
 * the contrast failures Lighthouse flagged on white-on-orange text.
 *
 * Two bar classes because there are two patterns: .all_banner_bottom_sec on the
 * WPBakery pages, .training_bottom_sec on the template-rendered ones.
 *
 * "body" prefixes are load-bearing: WPBakery prints .vc_custom_xxx{background-
 * color:#f68b1f!important} in an inline <style> that lands AFTER this file, so
 * at equal specificity it would win on source order. The extra element bumps
 * specificity above it. The !important on colours is what beats the inline
 * style="color:#ffffff" that vc_custom_heading writes onto each heading.
 */
body .all_banner_bottom_sec,
body .training_bottom_sec,
body .contact-cat-section {
	background: #ffffff !important;
	background-color: #ffffff !important;
	border-bottom: 1px solid #e8e8e8;
	padding: 20px 100px 18px !important;
}

body .all_banner_bottom_sec h1,
body .all_banner_bottom_sec h2,
body .training_bottom_sec h1,
body .training_bottom_sec h2,
body .contact-cat-section h1,
body .contact-cat-section h2 {
	color: #1a1a1a !important;
	font-size: 40px !important;
	line-height: 44px !important;
	margin: 0 0 6px !important;
	padding-bottom: 0 !important;
}

body .all_banner_bottom_sec p,
body .training_bottom_sec p,
body .contact-cat-section p {
	color: #555555 !important;
	font-size: 16px !important;
	line-height: 26px !important;
	margin-bottom: 0 !important;
}

/* The title-bar button. This used to force solid orange (it had been
   white-on-orange and would have vanished on the new white bar) - but that made
   it the one button on the page still filled, and because this rule sits later
   in the file it beat the outlined styling above it. Now outlined like the
   rest. */
body .all_banner_bottom_sec .all_btn a,
body .all_banner_bottom_sec .vc_btn3,
body .training_bottom_sec .vc_btn3,
body .contact-cat-section .vc_btn3 {
	background: #ffffff !important;
	background-color: #ffffff !important;
	border: 2px solid #f68b1f !important;
	color: #f68b1f !important;
	font-weight: 700 !important;
}

body .all_banner_bottom_sec .all_btn a:hover,
body .all_banner_bottom_sec .vc_btn3:hover,
body .training_bottom_sec .vc_btn3:hover,
body .contact-cat-section .vc_btn3:hover {
	background: #fff6ec !important;
	background-color: #fff6ec !important;
	border-color: #f68b1f !important;
	color: #f68b1f !important;
}

/* The section under the title bar carried 50px of its own padding on top of the
   bar's, which is the large empty band between the heading and the first line
   of content. */
body .welcome_sec {
	padding-top: 26px !important;
	padding-bottom: 26px !important;
}

/*
 * The promo row under the homepage video: full width, and tightened up so the
 * whole thing clears the fold.
 *
 * It was width:90% (hence the gutters either side) with 30px of vertical
 * padding, and its own WPBakery rule adds margin-top:50px - that margin is most
 * of what was pushing it out of view.
 *
 * Scoped to .width-100 on purpose. The bare .about-winner-box class is shared
 * with the awards row on the About page, which should keep its inset width and
 * shadow; only the homepage row carries .width-100.
 */
body .about-winner-box.width-100 {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 10px 20px !important;
	box-shadow: none !important;

	display: grid !important;
	grid-template-columns: repeat(5, 1fr);
	gap: 14px;
	align-items: stretch;
}

/*
 * Same trap as the About page: WPBakery gives every .vc_row a clearfix pair
 * (.vc_row:after,.vc_row:before{content:" ";display:table}) and cancels it only
 * on rows carrying .vc_row-flex. This row does NOT carry it, so in a grid
 * container those pseudo-elements become grid ITEMS - ::before would take
 * cell 1 and push the five cards along by one, wrapping the last onto a second
 * line.
 */
body .about-winner-box.width-100::before,
body .about-winner-box.width-100::after {
	content: none !important;
	display: none !important;
}

/* --- the cards themselves, matching the About page credential boxes --- */

body .about-winner-box.width-100 > .vc_column_container {
	width: auto !important;
	max-width: none !important;
	float: none !important;
	border: 1px solid #ececec;
	padding: 14px 12px 16px !important;
	text-align: center;
	/* Containing block for the stretched link below. */
	position: relative;
	transition: border-color .25s ease, transform .25s ease;
	display: flex;
	flex-direction: column;
}

body .about-winner-box.width-100 > .vc_column_container:hover {
	border-color: #f68b1f;
	transform: translateY(-3px);
}

/* The inner wrappers must stay static, or they - not the card - become the
   containing block and the stretched link only covers part of the box. */
body .about-winner-box.width-100 > .vc_column_container > .vc_column-inner,
body .about-winner-box.width-100 > .vc_column_container > .vc_column-inner > .wpb_wrapper {
	position: static !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

/*
 * Whole card clickable, without touching the markup: the button's own anchor
 * grows an overlay across the card. Because it is the real <a>, the destination
 * and the onclick handlers on the three booking buttons all still fire, and the
 * keyboard focus target stays the button rather than a new tabbable wrapper.
 */
/*
 * js_composer sets .vc_general.vc_btn3 { position: relative }, which made the
 * anchor its own containing block - so the overlay below covered the 144x52
 * button rather than the 234x134 card, and only the button was clickable.
 * Measured with elementFromPoint: the top and middle of each card were hitting
 * the <h3> and the wrapper div, not the link.
 *
 * Forcing the anchor static hands the containing block back to the card.
 */
body .about-winner-box.width-100 .vc_btn3-container a {
	position: static !important;
}

body .about-winner-box.width-100 .vc_btn3-container a::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
}

/* The card's own contents must not sit above the overlay, or they would swallow
   the click again. The button keeps its own stacking so it still looks pressed
   and focusable. */
body .about-winner-box.width-100 > .vc_column_container {
	cursor: pointer;
}

/* Keeps the hover state alive while the pointer is over the overlay. */
body .about-winner-box.width-100 > .vc_column_container:hover .vc_btn3 {
	background: #fff6ec !important;
	background-color: #fff6ec !important;
}

/* Push the button to the bottom so all five line up however long the label. */
body .about-winner-box.width-100 .vc_btn3-container {
	margin-top: auto !important;
	position: static;
}

/* Card type. The cards are 362px wide and were carrying 22px titles and 30px
   prices, which looked undersized in a box that big. Scaled up, and scaled with
   the viewport so they stay in proportion as the row's height budget changes. */
body .about-winner-box.width-100 h3 {
	font-size: clamp(20px, 2.9vh, 30px) !important;
	line-height: 1.18 !important;
	padding: 4px 0 0 !important;
	margin-bottom: 2px !important;
}

body .about-winner-box.width-100 h4 {
	font-size: clamp(26px, 4.4vh, 44px) !important;
	line-height: 1.1 !important;
	margin-bottom: 8px !important;
}

body .about-winner-box.width-100 .vc_btn3 {
	font-size: clamp(13px, 1.8vh, 17px) !important;
	padding: clamp(8px, 1.3vh, 13px) clamp(16px, 2.4vh, 28px) !important;
}

/* The 86x86 icons above each heading are the biggest remaining chunk of
   vertical space in this row. */
body .about-winner-box.width-100 .wpb_single_image {
	margin-bottom: 0 !important;
}

body .about-winner-box.width-100 .wpb_single_image img {
	max-height: 56px;
	width: auto;
}

body .about-winner-box.width-100 .vc_btn3-container {
	margin-bottom: 0 !important;
}

/* --- keeping the whole row above the fold ---------------------------------
   Card padding and borders add height, so the contents tighten to compensate.
   Header + banner + this row has to fit one screen. */
@media (max-width: 1400px) {
	body .about-winner-box.width-100 > .vc_column_container {
		padding: 10px 8px 12px !important;
	}
	body .about-winner-box.width-100 h3 { font-size: 19px !important; line-height: 23px !important; }
	body .about-winner-box.width-100 h4 { font-size: 26px !important; line-height: 30px !important; }
	body .about-winner-box.width-100 .wpb_single_image img { max-height: 46px; }
}

/* Short screens: drop the icons rather than the row. */
@media (max-height: 820px) {
	body .about-winner-box.width-100 .wpb_single_image { display: none !important; }
	body .about-winner-box.width-100 h3 { font-size: 18px !important; line-height: 22px !important; }
	body .about-winner-box.width-100 h4 { font-size: 24px !important; line-height: 28px !important; }
	body .about-winner-box.width-100 > .vc_column_container { padding: 10px 8px 12px !important; }
}

@media (max-width: 991px) {
	body .about-winner-box.width-100 {
		grid-template-columns: repeat(2, 1fr);
	}
	body .about-winner-box.width-100 .wpb_single_image { display: block !important; }
}

@media (max-width: 575px) {
	body .about-winner-box.width-100 {
		grid-template-columns: 1fr;
	}
}

body .about-winner-box.width-100 .vc_single_image-wrapper {
	margin-bottom: 0 !important;
}

/* The five-column promo row centres its icons and headings but left the buttons
   ranged left. text-align alone does nothing here: WPBakery gives the container
   .vc_btn3-inline (display:inline-block), so the container is only as wide as
   the button and there is no free space to centre within. It has to become a
   block first, then the inline-block anchor inside it centres. */
body .about-winner-box .vc_btn3-container,
body .about-winner-box .vc_btn3-container.vc_btn3-inline {
	display: block !important;
	float: none !important;
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

@media (max-width: 991px) {
	body .all_banner_bottom_sec,
	body .training_bottom_sec,
	body .contact-cat-section {
		padding: 18px 20px 16px !important;
		text-align: left !important;
	}
	body .all_banner_bottom_sec h1,
	body .training_bottom_sec h1,
	body .contact-cat-section h1 {
		font-size: 32px !important;
		line-height: 36px !important;
	}
}

/* ---------------------------------------------------------------- mobile --- */

@media (max-width: 991px) {
	.acclaim-card-grid .service_title,
	.acclaim-card-grid .training_title {
		font-size: 22px;
		line-height: 26px;
	}
	.acclaim-card-grid .acclaim-card-media img {
		height: 210px !important;
	}
}

@media (max-width: 575px) {
	.acclaim-card-grid .acclaim-card-media img {
		height: 200px !important;
	}
	.acclaim-card-grid .service_description,
	.acclaim-card-grid .training_description {
		padding: 18px 18px 20px;
	}
}