/*
Theme Name: The Catering Butcher
Theme URI: https://thecateringbutcher.co.uk
Description: Child theme of Hulme Tech Theme. Holds the presentation refinements for The Catering Butcher so they survive parent theme updates and SCSS recompiles.
Author: Aaron Michael
Author URI: https://afbdigitalsolutions.co.uk
Template: hulmetech_theme
Version: 1.0.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: thecateringbutcher-child
*/


/* ---------------------------------------------------------------------------
   Service card icons

   The theme hardcodes width:64px; height:64px; object-fit:contain as an inline
   style on every icon, so a wide icon like the pig (93x48) fills the box across
   but only 33px down, while the tall sundries jar (35x49) fills it down and only
   46px across. Same box, very different visual weight, which is what makes the
   row of tiles read as untidy.

   These sizes give every icon the same optical area, 2114px2, which is how the
   eye judges weight. The area is capped by the widest icon, so nothing exceeds
   the 64px the card title already clears. Overriding an inline style is the one
   case where !important is the only tool available.
   --------------------------------------------------------------------------- */

.service-image-overlay img[src*="beef-wholesale-butchers-wolverhampton"] {
	width: 58px !important;
	height: 36px !important;
}  /* Beef */

.service-image-overlay img[src*="meat-suppliers-birmingham-pork"] {
	width: 64px !important;
	height: 33px !important;
}  /* Pork */

.service-image-overlay img[src*="wholesale-butchers-lamb-lichfield"] {
	width: 57px !important;
	height: 37px !important;
}  /* Lamb */

.service-image-overlay img[src*="catering-meat-suppliers-poultry-1"] {
	width: 42px !important;
	height: 50px !important;
}  /* Poultry */

.service-image-overlay img[src*="catering-meat-suppliers-game"] {
	width: 50px !important;
	height: 42px !important;
}  /* Game */

.service-image-overlay img[src*="whole-butchers-lichfield-veal"] {
	width: 49px !important;
	height: 43px !important;
}  /* Veal */

.service-image-overlay img[src*="bakery-catering-meat-suppliers-02"] {
	width: 56px !important;
	height: 38px !important;
}  /* Bakery */

.service-image-overlay img[src*="burgers-wholesale-butchers-birmingham"] {
	width: 54px !important;
	height: 39px !important;
}  /* Burgers */

.service-image-overlay img[src*="meat-suppliers-wolverhampton-sausages-1"] {
	width: 52px !important;
	height: 40px !important;
}  /* Sausages */

.service-image-overlay img[src*="cheese-eggs-meat-suppliers-lichfield-06"] {
	width: 54px !important;
	height: 39px !important;
}  /* Cheese and eggs */

.service-image-overlay img[src*="meat-suppliers-wolverhampton-cooked-meats"] {
	width: 50px !important;
	height: 42px !important;
}  /* Cooked meats */

.service-image-overlay img[src*="catering-meat-suppliers-wolverhampton-sundries"] {
	width: 39px !important;
	height: 54px !important;
}  /* Sundries */

/* ---------------------------------------------------------------------------
   Accreditations page logos

   The two accreditation rows use the theme's text-with-image layout, which
   serves whatever size the adaptive image cache has and mirrors the text
   alignment to the image side. AIMS only exists at 245px, SALSA at 538px, so
   one logo rendered less than half the size of the other, and the AIMS copy
   came out right aligned and ragged.

   Both logos now sit in the same white plate, contained rather than scaled,
   so neither is upscaled and the plates match. Text is left aligned on both
   rows. Scoped to this page so product pages using the same layout are
   untouched. !important is needed only where the theme sets inline styles.
   --------------------------------------------------------------------------- */

.page-id-2247 [class*="cms-text-with-image"] img {
	display: block;
	width: 100% !important;
	max-width: 420px;
	height: 220px !important;
	aspect-ratio: auto !important;
	margin: 0 auto;
	padding: 28px 36px;
	background: #eef4f9;
	border-radius: 11px;
	object-fit: contain;
}
/* The accreditation rows moved onto a white band on 28 Sept, so the plates carry the pale tint
   instead of white, or they would vanish into the row. */

.page-id-2247 [class*="cms-text-with-image"] .text-md-end,
.page-id-2247 [class*="cms-text-with-image"] .text-md-right {
	text-align: left !important;
}

/* ---------------------------------------------------------------------------
   Latest News cards

   The theme clamps each excerpt to three lines and draws its ellipsis at the
   end of line three, but the card height varied with the excerpt so the grid
   read as ragged. 4.5em is three lines at the 24px line height, so the cut
   lands on the same line as the ellipsis, and the minimum keeps short
   excerpts the same height. An earlier 6em value showed a fourth line under
   the ellipsis.
   --------------------------------------------------------------------------- */

.posts .post p.mt-2.mb-2 {
	max-height: 4.5em;
	min-height: 4.5em;
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
   History page location photos

   The market stall and Fenton shop photos sit side by side with matching
   347x237 attributes, but the shop photo is a 4:3 source and the theme's
   height:auto lets it render at 260, so its heading lands 23px lower than its
   neighbour and the two columns look misaligned. Hold both at the declared
   height and crop rather than stretch.
   --------------------------------------------------------------------------- */

.page-id-2242 .cms-rows .col-md-6 img[class*="wp-image"] {
	width: 347px;
	height: 237px;
	object-fit: cover;
}

/* ---------------------------------------------------------------------------
   Home page, shopfront text with image row

   The copy was pasted in as a paragraph inside a paragraph, so the browser
   closes the outer one empty and leaves a blank 16px paragraph above and
   below the copy. The blank one at the top is why the first line started
   16px lower than the top of the photo. Hiding empty paragraphs brings the
   copy level with the photo.

   The photo wrapper carries an inline 15px radius. The house radius is 11px,
   the same as the category tiles directly above it, so the two should match.
   !important is the only way past the inline style.

   The Experienced Hospitality Butchers heading sat with 16px above and 8px
   below, so it clung to the paragraph before it rather than the one it
   introduces. 32px above and 12px below ties it to its own copy.
   --------------------------------------------------------------------------- */

.page-id-2 .cms-text-with-image-2-2 p:empty {
	display: none;
}

.page-id-2 .cms-text-with-image-2-2 .col-md-6 > div[style] {
	border-radius: 11px !important;  /* beats the inline 15px */
}

.page-id-2 .cms-text-with-image-2-2 h2 {
	margin-top: 32px;
	margin-bottom: 12px;
}

/* ---------------------------------------------------------------------------
   Home page, family business centred row

   The centred copy ran the full 1200px column, 126 characters a line, about
   twice what the eye can carry back to the start of the next line, and the
   closing paragraph was a four line wall. 720px holds it near 75 characters
   a line, the top of the readable range, and still lets the short second
   paragraph sit on two lines. Centred text is fine at that measure because
   no paragraph runs past seven lines.

   The A Family Business heading had 16px above and 8px below, so it read as
   a caption for the paragraph above rather than a heading for the one below.
   Same 32px above and 12px below as the row above so the two rows share one
   rhythm.
   --------------------------------------------------------------------------- */

.page-id-2 [class*="cms-text-center-3-2-"] .col-12 > p,
.page-id-2 [class*="cms-text-center-3-2-"] .col-12 > h3 {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

.page-id-2 [class*="cms-text-center-3-2-"] .col-12 > h3 {
	margin-top: 32px;
	margin-bottom: 12px;
}

/* ---------------------------------------------------------------------------
   Accreditations page SALSA checklist

   The theme prints a per row style block that opens with a // line before
   the ul rule, which is not a CSS comment, so the browser throws that rule
   away and the checklist keeps Bootstrap's 32px list indent. The ticks then
   hang 32px inside the paragraph edge, and the one item that wraps
   (cheese and pâté) returns under the tick instead of under its own text.

   Pull the list back to the paragraph edge, hold each tick in a 24px gutter
   so wrapped lines align with the text, and give the items 6px between them
   so the list reads as a checklist rather than a block of prose.
   --------------------------------------------------------------------------- */

.page-id-2247 [class*="cms-text-with-image"] ul {
	padding-left: 0;
	margin: 0 0 16px;
}

.page-id-2247 [class*="cms-text-with-image"] li {
	position: relative;
	padding-left: 24px;
	margin-bottom: 6px;
}

.page-id-2247 [class*="cms-text-with-image"] li:last-child {
	margin-bottom: 0;
}

.page-id-2247 [class*="cms-text-with-image"] li::before {
	position: absolute;
	left: 0;
	margin-right: 0;
}

/* ---------------------------------------------------------------------------
   Contact page sidebar details

   The email, phone and opening hours in the right hand column are the same
   details the footer shows, but here they are bare text separated by empty
   paragraphs, while the footer gives each line a white glyph in a blue circle.
   Side by side on one page they read as two different things.

   Each line now gets the same 22px circle the footer uses, drawn from the
   footer's own icon paths and picked by what the line contains: a mailto link
   gets the envelope, a tel link the phone, and the first line with no link is
   the opening hours and gets the clock. Further hours lines indent under the
   clock so the three days read as one entry, matching the footer's stacked
   hours. The 16px gap between entries is the footer's paragraph margin.
   Scoped to the builder row so the footer's own block is untouched, and it
   does not depend on the row index, which changes when a heading row is
   added above it.
   --------------------------------------------------------------------------- */

.page-id-318 [class*="two-panel-text"] .contact-info {
	color: #FFFFFF;
}

.page-id-318 [class*="two-panel-text"] .contact-info > .d-flex {
	align-items: flex-start;
}

.page-id-318 [class*="two-panel-text"] .contact-info > .d-flex:has(a) {
	margin-bottom: 16px;
}

.page-id-318 [class*="two-panel-text"] .contact-info > .d-flex:has(a[href^="mailto:"])::before,
.page-id-318 [class*="two-panel-text"] .contact-info > .d-flex:has(a[href^="tel:"])::before,
.page-id-318 [class*="two-panel-text"] .contact-info > .d-flex:not(:has(a))::before {
	content: "";
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	margin: 1px 8px 0 0;
	border-radius: 999px;
	background-color: #009FE3;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
}

.page-id-318 [class*="two-panel-text"] .contact-info > .d-flex:has(a[href^="mailto:"])::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFFFFF' d='M3 6h18c1.1 0 2 .9 2 2v8c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V8c0-1.1.9-2 2-2zm0 2v.4L12 14l9-5.6V8H3zm18 8v-5.1l-8.5 5.3c-.3.2-.7.3-1 .3s-.7-.1-1-.3L3 10.9V16h18z'/%3E%3C/svg%3E");
}

.page-id-318 [class*="two-panel-text"] .contact-info > .d-flex:has(a[href^="tel:"])::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFFFFF' d='M6.7 3.5c.7-.7 1.8-.7 2.5 0l1.9 1.9c.6.6.7 1.5.2 2.2L10.2 9c1.2 2.1 2.9 3.8 5 5l1.4-1.1c.7-.5 1.6-.4 2.2.2l1.9 1.9c.7.7.7 1.8 0 2.5l-1.1 1.1c-.8.8-1.9 1.2-3 1.1C10.9 19 5 13.1 3.8 5.7c-.2-1.1.3-2.2 1.1-3l1.8-.2z'/%3E%3C/svg%3E");
}

.page-id-318 [class*="two-panel-text"] .contact-info > .d-flex:not(:has(a))::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFFFFF' d='M12 3a9 9 0 1 0 9 9 9 9 0 0 0-9-9zm1 4v5.1l3.6 2.2-1 1.6L11 13V7h2z'/%3E%3C/svg%3E");
}

.page-id-318 [class*="two-panel-text"] .contact-info > .d-flex:not(:has(a)) ~ .d-flex:not(:has(a)) {
	padding-left: 30px;
}

.page-id-318 [class*="two-panel-text"] .contact-info > .d-flex:not(:has(a)) ~ .d-flex:not(:has(a))::before {
	display: none;
}

/* ---------------------------------------------------------------------------
   Contact form fields

   The Contact Form 7 fields are white boxes with a hard 1px black border on
   the page blue, the select keeps the browser's grey border and its own
   line height so it renders 43px tall against 46px text inputs, the label
   text sits directly on top of its field with no breathing room, and the
   only focus indicator is the browser default, a thin ring that is nearly
   invisible on #003E70.

   The border is now white so the field edge is the white box itself, which
   is what the eye reads anyway. The select gets the same border, height and
   line height as the inputs and its own chevron in the page blue, so all
   six controls match. Labels go to 600 with 6px above the field. Focus is a
   3px ring in the site link blue with a 2px offset, which is 4.54:1 on the
   page blue, so keyboard and mouse users can see where they are. The
   validation tip inherits a pale red that reads on the blue where Contact
   Form 7's default dark red does not. Bootstrap's paragraph margin is
   dropped inside the form because the theme already puts 10px under each
   label and each field, and the three together made a 36px gap between
   groups. The 28px top margin lines the first label up with the sidebar's
   first line, which Bootstrap's mt-5 pins at 48px.
   --------------------------------------------------------------------------- */

.page-id-318 .wpcf7-form {
	margin-top: 28px;
}

.page-id-318 .wpcf7-form p {
	margin-bottom: 0;
}

.page-id-318 .wpcf7-form label {
	font-weight: 600;
}

.page-id-318 .wpcf7-form .wpcf7-form-control-wrap {
	display: block;
	margin-top: 6px;
}

.page-id-318 .wpcf7-form input:not([type="submit"]),
.page-id-318 .wpcf7-form select,
.page-id-318 .wpcf7-form textarea {
	border: 1px solid #FFFFFF;
	color: #212529;
	line-height: 24px;
}

.page-id-318 .wpcf7-form input:not([type="submit"]),
.page-id-318 .wpcf7-form select {
	height: 46px;
}

.page-id-318 .wpcf7-form select {
	appearance: none;
	background-color: #FFFFFF;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23003E70' stroke-width='2' d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px 16px;
}

.page-id-318 .wpcf7-form input:focus,
.page-id-318 .wpcf7-form select:focus,
.page-id-318 .wpcf7-form textarea:focus {
	outline: 3px solid #3CB2E8;
	outline-offset: 2px;
}

.page-id-318 .wpcf7-form .wpcf7-not-valid {
	border-color: #FFB4AB;
}

.page-id-318 .wpcf7-form .wpcf7-not-valid-tip {
	color: #FFB4AB;
	margin-top: 4px;
}

/* ---------------------------------------------------------------------------
   Contact form Turnstile and Submit row

   The Cloudflare Turnstile container reserves a 926 by 88 box under the
   message field. When the check passes silently, which is the normal case,
   the box stays empty and the page shows an 88px hole between the message
   and the Submit button. The container cannot be hidden or shrunk because
   Turnstile draws its 300 by 65 challenge into it when it decides to.

   The form becomes a wrapping flex row so the Turnstile box and the Submit
   sit on one line, widget on the left where it renders, button on the right.
   The reserved space is still fully there for the widget, it just shares the
   button's row instead of holding its own. The button is right aligned
   rather than stretched to the form width: a 926px wide button reads as a
   banner and competes with the message field, and the end of the line is
   where the eye lands after the last field. The button was 79 by 44 with a
   400 weight label, small for a 926px form, so it now has a 180px minimum
   width, 52px height and a 700 weight label. Its 10px top margin centres it
   on the widget's 72px box. The theme fixes the button's padding and
   centring margin with !important and those are left alone. Below 576px the
   button takes the full width because a right aligned button next to a
   stacked widget no longer reads as a row.
   --------------------------------------------------------------------------- */

.page-id-318 .wpcf7-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}

.page-id-318 .wpcf7-form > * {
	flex: 0 0 100%;
}

.page-id-318 .wpcf7-form > .cf-turnstile {
	flex: 1 1 auto;
	width: auto;
}

.page-id-318 .wpcf7-form > p:has(.wpcf7-submit) {
	flex: 0 0 auto;
	margin-top: 10px;
	margin-left: auto;
}

.page-id-318 .wpcf7-form .wpcf7-submit {
	min-width: 180px;
	height: 52px;
	font-weight: 700;
}

.page-id-318 .wpcf7-form .wpcf7-submit:focus {
	outline: 3px solid #FFFFFF;
	outline-offset: 2px;
}

@media (max-width: 575.98px) {
	.page-id-318 .wpcf7-form > p:has(.wpcf7-submit) {
		flex: 0 0 100%;
	}

	.page-id-318 .wpcf7-form .wpcf7-submit {
		width: 100%;
	}
}

/* ---------------------------------------------------------------------------
   Home page, white band on the shopfront row

   Only merge this together with the ACF row edit in home-changes.md that
   turns the shopfront row white. On the blue band it would hide the links.

   Headings and body copy inherit the row text colour from the ACF field, so
   the band needs nothing from CSS except a link colour that holds on white.
   The ACF link colour field should carry the same value and this rule is
   the safety net if it is left at the blue band value. #1A59A3 is the header
   blue, 7.0:1 on white, and the hover drops to the page blue.
   --------------------------------------------------------------------------- */

.page-id-2 .cms-text-with-image-2-2 a {
	color: #1A59A3;
}

.page-id-2 .cms-text-with-image-2-2 a:hover {
	color: #003E70;
}

/* ---------------------------------------------------------------------------
   History page location cards

   ⛔ Selected by attribute, not by the full row class. The theme numbers every
   row class by its position, so two-panel-text-5-2242 becomes -4- the moment a
   row above it is removed, and the cards would silently revert to plain text on
   blue. Removing the two spacer rows did exactly that.

   The market stall and Fenton shop blocks are a WYSIWYG stack: an H2, then
   three H3 address lines, then H4 opening days and H4 phone number, every
   one white, bold and between 24px and 32px, so six lines shout at the same
   volume and nothing reads as the heading. The directions link is a plain
   white 16px line with no underline, so it does not read as a link at all.

   Each block becomes one white card at the accreditation plate width, the
   photo sitting flush in the top of the card, the title in page blue, the
   address and opening days as quiet 16px body lines, the phone number as
   the one bold line, and the directions link as a small button in the
   theme's button shape. The two cards stretch to the same height and the
   button is pinned to the bottom so the shorter card has no ragged end.

   The WYSIWYG wraps every line in a span with an inline white colour and
   the link carries an inline white colour too, so !important is needed on
   those two selectors only, to beat the inline style. Scoped to the one row
   on page 2242 so no other two panel row changes.
   --------------------------------------------------------------------------- */

.page-id-2242 [class*="two-panel-text"] .col-md-6 {
	display: flex;
}

.page-id-2242 [class*="two-panel-text"] .col-md-6 > div {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 420px;
	margin: 8px auto 32px;
	padding: 0 28px 28px;
	background: #ffffff;
	border-radius: 11px;
	overflow: hidden;
	color: #212529;
}

.page-id-2242 [class*="two-panel-text"] .col-md-6 img[class*="wp-image"] {
	display: block;
	width: calc(100% + 56px);
	max-width: none;
	height: 237px;
	margin: 0 -28px 24px;
	object-fit: cover;
}

.page-id-2242 [class*="two-panel-text"] .col-md-6 p:empty {
	display: none;
}

.page-id-2242 [class*="two-panel-text"] .col-md-6 h2 {
	margin: 0 0 12px;
	font-size: 24px;
	line-height: 30px;
	color: #003E70;
}

.page-id-2242 [class*="two-panel-text"] .col-md-6 h3,
.page-id-2242 [class*="two-panel-text"] .col-md-6 h4 {
	margin: 0;
	font-size: 16px;
	font-weight: 400 !important;  /* beats the theme's own !important heading weight rule, there is no other way to quieten these lines */
	line-height: 24px;
}

.page-id-2242 [class*="two-panel-text"] .col-md-6 h4:last-of-type {
	margin-top: 12px;
	font-size: 18px;
	font-weight: 700 !important;  /* same theme rule, the phone number stays bold on purpose */
	line-height: 24px;
}

.page-id-2242 [class*="two-panel-text"] .col-md-6 h2 span,
.page-id-2242 [class*="two-panel-text"] .col-md-6 h3 span,
.page-id-2242 [class*="two-panel-text"] .col-md-6 h4 span {
	color: inherit !important;  /* beats the inline white span colour from the WYSIWYG */
}

.page-id-2242 [class*="two-panel-text"] .col-md-6 p:last-of-type {
	margin: auto 0 0;
	padding-top: 20px;
}

.page-id-2242 [class*="two-panel-text"] .col-md-6 p:last-of-type a {
	display: inline-block;
	padding: 10px 20px;
	background: #1A59A3;
	border-radius: 5px;
	font-weight: 700;
	line-height: 24px;
	color: #ffffff !important;  /* beats the inline white link colour, kept white on the blue button */
	text-decoration: none;
	transition: background-color 0.3s ease;
}

.page-id-2242 [class*="two-panel-text"] .col-md-6 p:last-of-type a:hover,
.page-id-2242 [class*="two-panel-text"] .col-md-6 p:last-of-type a:focus-visible {
	background: #003E70;
}

@media (max-width: 767.98px) {
	.page-id-2242 [class*="two-panel-text"] .col-md-6 > div {
		margin-bottom: 20px;
	}

	.page-id-2242 [class*="two-panel-text"] .col-md-6:last-child > div {
		margin-bottom: 32px;
	}
}

/* ---------------------------------------------------------------------------
   Latest News cards on the home page

   The theme gives the card no overflow rule, so a rounded card would let the
   square featured image paint over its own corners. Clipping the card lets the
   house 11px radius hold, and a light border and lift separate the cards from
   the white band they sit on.
   --------------------------------------------------------------------------- */

.page-id-2 .latest-news-section .news-card,
.page-id-2 [class*="latest-news"] article {
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 62, 112, 0.10);
}

/* ---------------------------------------------------------------------------
   Closing call to action

   The theme's button is sized for sitting inside a paragraph, so at the end of
   the page on its own it reads as an afterthought. This is the last thing on
   the page before the footer and the only place the site asks for the job, so
   it carries the weight of a section: larger type, a deeper hit area and the
   same 11px radius as the cards above it.
   --------------------------------------------------------------------------- */

.page-id-2 .cta-button a {
	padding: 18px 40px;
	font-size: 18px;
	font-weight: 700;
	border-radius: 11px;
}

/* ---------------------------------------------------------------------------
   Closing call to action, every page

   The theme puts the padding field straight onto the anchor as an inline style,
   so a 50px value makes a tall white slab with small text in the middle rather
   than a button. Inline styles can only be beaten with !important. This is the
   last thing before the footer on Home and History, so it reads as a button
   with weight without becoming a block.
   --------------------------------------------------------------------------- */

.cta-button a.btn {
	padding: 20px 44px !important;
	font-size: 18px;
	border-radius: 11px;
	min-width: 0 !important;
}

/* ===========================================================================
   Premium pass, 28 Sept 2026. Site wide.
   The palette is untouched. What changes is the finish: how type is set,
   whether surfaces have depth, how the header and footer hold the page, and
   what happens when a cursor moves over something.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Type

   Montserrat at 700 sets loose at display sizes, so large headings read as a
   row of separate letters. Tightening the tracking a touch pulls them back
   into words. Body copy is left alone.
   --------------------------------------------------------------------------- */

h1, .h1 {
	letter-spacing: -0.02em;
}

h2, .h2, h3.h2, .cms-rows h3 {
	letter-spacing: -0.015em;
}

/* ---------------------------------------------------------------------------
   Header

   Nav links had no hover and no current page state, so the header gave nothing
   back. A short rule grows in under the link on hover and stays under the page
   you are on. The built in CTA button is switched on in Theme Options; the top
   bar keeps phone and social only, so the one call to action lives in one place.
   --------------------------------------------------------------------------- */

header .desktop-menu .menu-item > a {
	position: relative;
	font-weight: 500;
	letter-spacing: 0.01em;
	padding-bottom: 6px;
	transition: color 0.2s ease;
}

header .desktop-menu .menu-item > a::after {
	content: "";
	position: absolute;
	left: 0.5rem;
	right: 0.5rem;
	bottom: 0;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}

header .desktop-menu .menu-item > a:hover::after,
header .desktop-menu .current-menu-item > a::after,
header .desktop-menu .current_page_item > a::after {
	transform: scaleX(1);
}

header .header-menu-cta-button {
	font-weight: 700;
	letter-spacing: 0.01em;
	box-shadow: 0 2px 8px rgba(0, 20, 40, 0.18);
	transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

header .header-menu-cta-button:hover {
	box-shadow: 0 4px 14px rgba(0, 20, 40, 0.24);
	transform: translateY(-1px);
}

/* Over the hero video the header is transparent and the nav competes with the
   footage. A soft gradient from the top settles it. Scoped to the body class the
   theme sets only when a banner sits behind the header, so inner pages with a
   solid header are untouched. */
body.hero-banners-image-or-video-behind-header header {
	background: linear-gradient(180deg, rgba(0, 20, 40, 0.55) 0%, rgba(0, 20, 40, 0.25) 60%, rgba(0, 20, 40, 0) 100%);
}

/* ---------------------------------------------------------------------------
   Category tiles

   The theme lays a flat 50% black over the whole photo, which flattens every
   image to the same murk. A gradient that is clear at the top and deep where
   the title sits keeps the meat visible and the type legible. On hover the
   photo eases in a fraction, the tile lifts, and the gradient deepens.
   !important is needed because the overlay colour is an inline style.
   --------------------------------------------------------------------------- */

.service-card-wrap {
	display: block;
	border-radius: 11px;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card-wrap:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(0, 20, 40, 0.28);
}

.service-card__image {
	transition: transform 0.6s ease;
}

.service-card-wrap:hover .service-card__image {
	transform: scale(1.05);
}

.service-card__body {
	background: linear-gradient(180deg, rgba(0, 20, 40, 0) 30%, rgba(0, 20, 40, 0.45) 65%, rgba(0, 20, 40, 0.82) 100%) !important;
	transition: background 0.3s ease;
}

.service-card__title {
	letter-spacing: 0.04em;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* ---------------------------------------------------------------------------
   Cards and plates

   News cards, the location cards and the accreditation plates are all flat
   surfaces on a band. A resting shadow gives them a little lift off the page
   and a hover state says they are live.
   --------------------------------------------------------------------------- */

.news-card,
[class*="latest-news"] article,
.page-id-2242 [class*="two-panel-text"] .col-md-6 > div {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	box-shadow: 0 2px 8px rgba(0, 20, 40, 0.10);
}

.news-card:hover,
[class*="latest-news"] article:hover,
.page-id-2242 [class*="two-panel-text"] .col-md-6 > div:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(0, 20, 40, 0.18);
}

.page-id-2247 [class*="cms-text-with-image"] img {
	box-shadow: 0 2px 8px rgba(0, 20, 40, 0.08);
}

/* ---------------------------------------------------------------------------
   Links in copy

   Coloured text alone is a weak signal on a tinted band. Links underline on
   hover with a little air under the baseline.
   --------------------------------------------------------------------------- */

.cms-rows p a,
.cms-rows li a {
	text-decoration: none;
	text-underline-offset: 3px;
	transition: color 0.2s ease;
}

.cms-rows p a:hover,
.cms-rows li a:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Footer

   The parent sets the column headings as 800 weight h2s, which shout next to
   a few 14px links. Headings step down to a label size with tracking, links
   get room to breathe, the brand column carries the logo with the two
   accreditation marks on small plates, and the credit line stops competing
   with the content above it.
   --------------------------------------------------------------------------- */

.footer.pb-5.pt-5 {
	padding-top: 64px !important;
	padding-bottom: 56px !important;
}

.footer h2 {
	font-size: 13px;
	font-weight: 700 !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.85;
	margin-bottom: 18px;
}

.footer .footer-menu li {
	margin-bottom: 10px;
}

.footer .footer-menu a,
.footer .contact-info a {
	text-decoration: none;
	transition: color 0.2s ease;
}

.footer .footer-menu a:hover,
.footer .contact-info a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.footer .contact-info .d-flex {
	margin-bottom: 12px;
}

.footer .contact-info p {
	margin: 0;
}

.footer-brand__logo img {
	width: 200px;
	height: auto;
	display: block;
	margin-bottom: 14px;
}

.footer-brand__tagline {
	font-size: 13px;
	letter-spacing: 0.06em;
	opacity: 0.8;
	margin-bottom: 20px;
}

.footer-brand__trust {
	display: flex;
	gap: 10px;
}

.footer-brand__trust a {
	display: block;
	background: #fff;
	border-radius: 8px;
	padding: 8px 10px;
	width: 92px;
	height: 52px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.footer-brand__trust a:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.footer-brand__trust img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

@media (max-width: 991px) {
	.footer-brand {
		margin-bottom: 32px;
	}
}

footer.text-center {
	font-size: 13px;
	opacity: 0.85;
	padding-top: 18px;
	padding-bottom: 18px;
}

footer.text-center a {
	text-decoration: none;
}

footer.text-center a:hover {
	text-decoration: underline;
}

/* The CTA button is appended to the menu as its own item. The parent's critical CSS carries
   `header .d-none`, which outranks Bootstrap's `.d-md-inline-block`, so the theme's own d-*
   classes would keep it hidden at every width. Visibility is handled here instead: desktop
   nav from 768px up, never inside the burger menu. */
header .menu-item-cta {
	display: none;
}

@media (min-width: 768px) {
	header .desktop-menu ul {
		align-items: center;
	}

	header .desktop-menu .menu-item-cta {
		display: flex;
		align-items: center;
		margin-left: 12px;
	}
}

header .desktop-menu .menu-item-cta > a {
	padding: var(--header-menu-cta-button-padding, 12px 24px) !important;
	margin: 0 !important;
	line-height: 1.2;
}

header .desktop-menu .menu-item-cta > a::after {
	display: none;
}

/* Product page galleries: the three photos arrive at different heights and square cornered,
   the only square corners left on the site. Same 3:2 crop and 11px radius as the tiles. */
.gallery .masonry-item > div {
	border-radius: 11px !important;
	box-shadow: 0 8px 24px rgba(0, 20, 40, 0.18);
}

/* The theme prints each image's own ratio inline, hence the !important. */
.gallery .masonry-item img {
	aspect-ratio: 3 / 2 !important;
	object-fit: cover;
	display: block;
}


/* ---------------------------------------------------------------------------
   Band pass for the SEO, partner, testimonial and retail pages, 28 Sept 2026.
   The CTA row gets its own breathing room here so the pages no longer need
   spacer rows either side of it (Home's two were removed the same day).
   --------------------------------------------------------------------------- */
.cta-button {
	padding: 40px 0;
}

/* Testimonials: 21 quotes read better on a narrower measure. */
.page-id-178 [class*="cms-text-center-"] .col-12 {
	max-width: 880px;
	margin: 0 auto;
}

/* 404: the parent prints the heading and copy in body text colour on the blue. */
.error404 main,
.error404 main h1,
.error404 main p {
	color: #ffffff;
}

.error404 main a {
	color: #3cb2e8;
}

/* Guide page: the location headings are now links, keep the heading weight. */
[class*="cms-text-center-"] h3 a {
	font-weight: 700;
	text-decoration: none;
}

/* ===========================================================================
   Responsive pass, 28 Sept 2026
   Phone and tablet fixes from screenshotting every key page at 390, 768 and
   1024. Desktop from 1200 up is untouched.
   =========================================================================== */

/* Header, 992 to 1199. Five links and the quote button add up to about 750px in
   a 650px nav column, so the button wrapped onto a second line under the menu. */
@media (min-width: 992px) and (max-width: 1199.98px) {
	header .desktop-menu .menu-item > a {
		font-size: 14px;
		padding-left: 6px;
		padding-right: 6px;
	}

	header .desktop-menu .menu-item-cta {
		margin-left: 8px;
	}

	header .desktop-menu .menu-item-cta > a {
		padding: 10px 16px !important;
		font-size: 14px;
	}

	/* The email address is wider than a quarter column at this width and clipped at
	   the page edge, in the footer and in the contact page sidebar. The two short
	   link columns give up the room. */
	.footer .footer-brand ~ .col-6 {
		flex: 0 0 16.666%;
		max-width: 16.666%;
	}

	.footer .footer-brand ~ .col-12 {
		flex: 0 0 33.333%;
		max-width: 33.333%;
	}

	.page-id-318 [class*="two-panel-text"] .col-md-9 {
		flex: 0 0 66.666%;
		max-width: 66.666%;
	}

	.page-id-318 [class*="two-panel-text"] .col-md-3 {
		flex: 0 0 33.333%;
		max-width: 33.333%;
	}
}

/* Product tick lists: a wrapped item returned under its tick instead of under its
   own first word. The tick sits in a gutter so both lines share one left edge. */
@media (max-width: 1199.98px) {
	[class*="two-panel-text"] li {
		position: relative;
		padding-left: 24px;
	}

	[class*="two-panel-text"] li::before {
		position: absolute;
		left: 0;
	}
}

/* Tablet, 768 to 991. */
@media (min-width: 768px) and (max-width: 991.98px) {
	/* Text with image rows split into two 330px columns here, so the copy ran down
	   one side of a column that emptied after the photo. Stacked, the photo holds
	   its own size and the copy takes the width. The news post body uses the same
	   row. */
	[class*="cms-text-with-image"] .row > .col-md-6,
	.single-post .row.align-items-start > .col-md-6 {
		flex: 0 0 100%;
		max-width: 100%;
	}

	[class*="cms-text-with-image"] .row > .col-md-6:not([class*="text-"]) > div,
	.single-post .row.align-items-start > .col-md-6:not([class*="text-"]) > div {
		max-width: 480px;
	}

	.page-id-2247 [class*="cms-text-with-image"] .row > .col-md-6:not([class*="text-"]) > div {
		max-width: 420px;
	}

	/* Counters wrapped two and one. Three across fits at this width, and the row
	   aligns to the top so a title that wraps does not push its number down. */
	.row > [class*="col-lg-4"]:has(> .animated-counter) {
		flex: 0 0 33.333%;
		max-width: 33.333%;
		padding-top: 32px !important;
		padding-bottom: 32px !important;
	}

	.row:has(> [class*="col-lg-4"] > .animated-counter) {
		align-items: flex-start !important;
	}

	/* Contact form: the sidebar is hidden below 992 by its own class but its column
	   still held a quarter of the row, so the form sat in three quarters of the page. */
	.page-id-318 [class*="two-panel-text"] .col-md-9 {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* Footer stacked: the two link columns ran straight into the contact block. */
@media (max-width: 991.98px) {
	.footer .footer-brand ~ .col-6 {
		margin-bottom: 28px;
	}
}

/* Phone, below 768. */
@media (max-width: 767.98px) {
	/* Each counter carried 48px above and below, so three stacked read as three
	   sections with 100px of air between them. */
	.row > [class*="col-lg-4"]:has(> .animated-counter) {
		padding-top: 16px !important;
		padding-bottom: 16px !important;
	}

	/* Accreditations: the AIMS row is held left at every width by the rule above,
	   but the SALSA row fell back to the theme's centred text here, with the tick
	   list centred under ticks hanging at the left. */
	.page-id-2247 [class*="cms-text-with-image"] .row > .col-md-6.text-center {
		text-align: left !important;
	}
}

/* Closing CTA: 44px side padding around a 300px label ran the button past the
   container edge at phone widths. */
@media (max-width: 575.98px) {
	.cta-button a.btn {
		display: inline-block;
		max-width: 100%;
		padding: 16px 24px !important;
		font-size: 16px;
		white-space: normal;
	}
}

/* ---------------------------------------------------------------------------
   Heroes, 28 Sept 2026. Product pages already used an image_full_width row with
   text on it; every inner page now opens with one. Only rows that carry content
   get the height, so the plain photo on the retail page is left alone.
   --------------------------------------------------------------------------- */
.image-full-width-block:has(.image-full-width-content) {
	min-height: 460px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.image-full-width-content h1 {
	color: #ffffff;
	font-size: clamp(36px, 4.2vw, 56px);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.05;
	margin-bottom: 0;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

.image-full-width-content h1::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	margin: 20px auto 0;
	border-radius: 2px;
	background: #3cb2e8;
}

.image-full-width-content p {
	color: #ffffff;
	font-size: 20px;
	line-height: 1.5;
	max-width: 760px;
	margin: 20px auto 0;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.image-full-width-content p a {
	color: #ffffff;
	text-decoration: underline;
}

@media (max-width: 767.98px) {
	.image-full-width-block:has(.image-full-width-content) {
		min-height: 340px;
	}

	.image-full-width-content {
		padding: 72px 20px !important;
	}

	.image-full-width-content p {
		font-size: 17px;
	}
}

/* ---------------------------------------------------------------------------
   Section rhythm, 28 Sept 2026. Every band measures 72px from its edge to the
   first and last piece of content at desktop and 48px on a phone. The theme's
   own values ran from 16 to 72 and most rows carried an extra trailing margin,
   so bottoms were always deeper than tops. The inline row padding is !important
   so the extra sits on the row wrapper, which is where the band colour lives.
   --------------------------------------------------------------------------- */
[class*="cms-text-center-"] .col-12 > :last-child,
[class*="cms-text-with-image-"] .col-12 > :last-child,
.image-full-width-content > :last-child,
.two-panel-text .col-12 > :last-child,
.two-panel-text .col-lg-6 > :last-child {
	margin-bottom: 0;
}

/* The theme prints a per row style block after the stylesheet, so the body
   prefix is what wins the tie. */
body [class*="cms-text-center-"] {
	padding: 50px 0 !important;
}

body [class*="cms-text-with-image-"] {
	padding: 57px 0 !important;
}

div:has(> .container > .row > div > .animated-counter) {
	padding: 14px 0;
}

.latest-news-section {
	padding-top: 72px !important;
	padding-bottom: 72px !important;
}

.cta-button {
	padding: 72px 0;
}

.page-id-2242 .two-panel-text {
	padding-top: 64px !important;
	padding-bottom: 12px !important;
}

/* Product pages: each band is spacer, title, list, spacer. The 40px spacers
   stay, the title and list make up the rest. */
.parent-pageid-2377 [class*="cms-title-"] {
	padding-top: 33px !important;
}

.parent-pageid-2377 .two-panel-text {
	padding-bottom: 29px !important;
}

.parent-pageid-2377 .two-panel-text [class*="col-"] > :last-child {
	margin-bottom: 0;
}

.parent-pageid-2377 .gallery {
	padding: 16px 0;
}

@media (max-width: 767.98px) {
	body [class*="cms-text-center-"] {
		padding: 26px 0 !important;
	}

	body [class*="cms-text-with-image-"] {
		padding: 32px 0 !important;
	}

	div:has(> .container > .row > div > .animated-counter) {
		padding: 22px 0;
	}

	.cta-button {
		padding: 48px 0;
	}

	.services {
		padding-top: 48px !important;
		padding-bottom: 48px !important;
	}

	.latest-news-section {
		padding-top: 48px !important;
		padding-bottom: 48px !important;
	}

	.page-id-2242 .two-panel-text {
		padding-top: 40px !important;
	}

	.parent-pageid-2377 [class*="cms-title-"] {
		padding-top: 9px !important;
	}

	.parent-pageid-2377 .two-panel-text {
		padding-bottom: 8px !important;
	}
}

/* ---------------------------------------------------------------------------
   Phone header, 28 Sept 2026. The theme stacked the phone number, the social
   icons and the logo row as three centred rows, 165px before any content. One
   slim bar (number left, socials right) and a tighter logo row instead. The
   burger drawer takes the brand blue with white links and the quote button.
   --------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
	.top-header .row.col-12 {
		flex-wrap: nowrap;
		justify-content: space-between !important;
	}

	.top-header .top-header-phone {
		flex: 1 1 auto;
		width: auto;
		justify-content: flex-start;
		padding: 6px 0 !important;
	}

	.top-header .row.col-12 > .col-12.col-lg-6 {
		flex: 0 0 auto;
		width: auto;
		padding: 6px 0 !important;
	}

	.top-header .social-media {
		margin-left: 0 !important;
	}

	header .header-flex .nav.mt-3 {
		margin-top: 8px !important;
	}

	header .header-flex nav.mb-3 {
		margin-bottom: 8px !important;
	}

	header .logo img {
		max-height: 56px;
		width: auto;
	}

	header .mobile-menu {
		background: #003e70 !important;
		box-shadow: 8px 0 32px rgba(0, 0, 0, 0.35);
	}

	header .mobile-menu ul {
		flex-direction: column;
		padding: 8px 24px 0;
	}

	header .mobile-menu li a {
		color: #ffffff !important;
		font-size: 20px;
		font-weight: 600;
		padding: 12px 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
		display: block;
	}

	header .mobile-menu .mobile-menu-close-button {
		color: #ffffff;
	}

	header .mobile-menu .menu-item-cta {
		display: block;
		margin-top: 20px;
	}

	header .mobile-menu .menu-item-cta a {
		background: #ffffff;
		color: #003e70 !important;
		border-radius: 11px;
		text-align: center;
		padding: 14px 20px;
		border-bottom: 0;
	}

	header .mobile-menu .social-media a,
	header .mobile-menu .social-media svg {
		color: #3cb2e8;
		fill: #3cb2e8;
	}
}

/* Tablet and phone logo was 100px wide; the socials hug the number. */
@media (max-width: 991.98px) {
	header .logo {
		flex: 0 0 auto !important;
		width: auto !important;
	}

	header .logo img {
		width: 176px;
		max-width: 176px;
		max-height: none;
		height: auto;
	}

	header .header-flex .search-change-moble-menu {
		flex: 1 1 auto;
		width: auto;
	}

	.top-header .row.col-12 > .col-12.col-lg-6 {
		margin-left: auto;
		padding-right: 0 !important;
	}

	.top-header .top-header-phone {
		padding-left: 0 !important;
	}
}

@media (max-width: 575.98px) {
	header .logo img {
		width: 150px;
		max-width: 150px;
	}
}

/* Bootstrap's flex-fill on both bar columns is !important, so the socials sat in
   the middle of the right half. Both columns shrink to content, the bar loses the
   nested row and col padding so the number lines up with the logo. */
@media (max-width: 991.98px) {
	.top-header .row.col-12 {
		margin: 0 !important;
		padding: 0 !important;
		width: 100%;
	}

	.top-header .row.col-12 > div {
		flex: 0 0 auto !important;
		width: auto !important;
	}

	.top-header .row.col-12 > .col-12.col-lg-6 > .d-flex,
	.top-header .row.col-12 > .col-12.col-lg-6.d-flex,
	.top-header .social-media {
		justify-content: flex-end !important;
	}

	.top-header .top-header-phone {
		padding: 8px 0 !important;
	}

	header .header-flex {
		min-height: 0;
		padding: 6px 0;
	}

	header .header-flex .nav.mt-3 {
		margin-top: 0 !important;
	}

	header .header-flex nav.mb-3 {
		margin-bottom: 0 !important;
	}

	header .header-flex .search-change-moble-menu {
		justify-content: center;
	}
}

@media (max-width: 991.98px) {
	header .logo a > span {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}
}

/* Phone reading: long centred paragraphs are hard to scan, so body copy in the
   text rows goes left aligned below 768 while headings stay centred. The retail
   page keeps its centred address lines. The Home hero heading was 22px. */
@media (max-width: 767.98px) {
	body:not(.page-id-2248) [class*="cms-text-center-"] .col-12 p,
	body:not(.page-id-2248) [class*="cms-text-center-"] .col-12 ul,
	body:not(.page-id-2248) [class*="cms-text-center-"] .col-12 ol,
	[class*="cms-text-with-image-"] .col-12 p,
	[class*="cms-text-with-image-"] .col-12 ul {
		text-align: left;
	}

	.hero-banner h1,
	.hero-banner .h2-banners {
		font-size: 30px !important;
		line-height: 1.15;
	}
}

/* Home hero: the heading was 32px sentence case under a 56px uppercase system on
   every inner page. Same treatment, plus the one line of who they are. */
.hero-banner .mobile-content h1 {
	color: #ffffff;
	font-size: clamp(34px, 4.2vw, 56px);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.05;
	margin-bottom: 0;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

.hero-banner .mobile-content h1::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	margin: 20px auto 0;
	border-radius: 2px;
	background: #3cb2e8;
}

.hero-banner .mobile-content p {
	color: #ffffff;
	font-size: 20px;
	line-height: 1.5;
	max-width: 720px;
	margin: 20px auto 0;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

@media (max-width: 767.98px) {
	.hero-banner .mobile-content h1 {
		font-size: 30px !important;
	}

	.hero-banner .mobile-content p {
		font-size: 17px;
	}
}

@media (min-width: 1200px) {
	.hero-banner .mobile-content p {
		white-space: nowrap;
		max-width: none;
	}
}

/* ---------------------------------------------------------------------------
   Home middle band and news, 28 Sept 2026. The counters sit on a dark strip
   with light blue figures and hairline dividers, the news block gets a proper
   heading and cards that lift.
   --------------------------------------------------------------------------- */
div:has(> .container > .row > div > .animated-counter) .animated-counter {
	padding: 8px 24px;
}

div:has(> .container > .row > div > .animated-counter) .col-lg-4 + .col-lg-4 .animated-counter {
	border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.animated-counter .display-counter,
.animated-counter .plus-symbol {
	font-size: 64px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
}

.animated-counter .animated-counter-title {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-top: 14px;
	opacity: 0.9;
}

.latest-news-title {
	font-size: 40px;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin-bottom: 40px;
}

.latest-news-title::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	margin: 18px auto 0;
	border-radius: 2px;
	background: #3cb2e8;
}

.news-card {
	overflow: hidden;
	border-radius: 11px !important;
	box-shadow: 0 6px 20px rgba(0, 20, 40, 0.08);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.news-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 32px rgba(0, 20, 40, 0.14);
}

.news-card .news-card-image img {
	transition: transform 0.4s ease;
}

.news-card:hover .news-card-image img {
	transform: scale(1.04);
}

.news-card .news-card-title {
	font-size: 20px;
	line-height: 1.3;
}

.latest-news-button .view-all-button {
	padding: 16px 36px;
	border-radius: 11px;
	font-weight: 700;
	box-shadow: 0 4px 14px rgba(0, 20, 40, 0.14);
}

@media (max-width: 991.98px) {
	div:has(> .container > .row > div > .animated-counter) .col-lg-4 + .col-lg-4 .animated-counter {
		border-left: 0;
	}

	.animated-counter .display-counter,
	.animated-counter .plus-symbol {
		font-size: 48px;
	}

	.latest-news-title {
		font-size: 32px;
	}
}

/* The template pins text with image rows to align-items-start whatever the
   field says. Short copy next to a tall photo, as on Home, reads better centred. */
@media (min-width: 768px) {
	.page-id-2 .cms-text-with-image-4-2 .row.d-flex {
		align-items: center !important;
	}
}

/* ---------------------------------------------------------------------------
   Header home icon removed (the logo is the home link) and the phone footer
   rebuilt, 28 Sept 2026. On a phone the footer reads as a card: brand block
   centred, links side by side under their headings, contact block left
   aligned with the icons, socials centred, then the credit line.
   --------------------------------------------------------------------------- */
header .header-home-link {
	display: none !important;
}

@media (max-width: 991.98px) {
	.footer.pb-5.pt-5 {
		padding-top: 48px !important;
		padding-bottom: 40px !important;
	}

	.footer > .container {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}

	.footer .footer-brand {
		text-align: center;
		margin-bottom: 36px;
		padding-bottom: 32px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	}

	.footer .footer-brand__logo img {
		margin: 0 auto;
	}

	.footer .footer-brand__trust {
		justify-content: center;
	}

	.footer .footer-brand ~ .col-6 {
		margin-bottom: 32px;
	}

	.footer h2 {
		margin-bottom: 14px;
	}

	.footer .footer-menu li {
		margin-bottom: 10px;
	}

	.footer .footer-menu a,
	.footer .contact-info a,
	.footer .contact-info p {
		font-size: 16px;
	}

	.footer .contact-info .d-flex {
		margin-bottom: 14px;
	}

	.footer .social-media {
		justify-content: center !important;
		margin-top: 28px !important;
		padding-top: 28px;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}

	footer.text-center {
		padding: 18px 24px !important;
		gap: 6px !important;
	}
}

/* Footer on tablet and phone: every block stacks full width, left aligned. */
@media (max-width: 991.98px) {
	.footer .footer-brand,
	.footer .footer-brand ~ .col-6,
	.footer .footer-brand ~ .col-12 {
		flex: 0 0 100%;
		max-width: 100%;
		text-align: left;
	}

	.footer .footer-brand__logo img {
		margin: 0;
	}

	.footer .footer-brand__trust {
		justify-content: flex-start;
	}

	.footer .social-media {
		justify-content: flex-start !important;
	}
}

/* History: both story rows centre their copy on the photo. The "Visit us" title
   sits on the same blue as the cards below it, so it carries the top padding. */
@media (min-width: 768px) {
	.page-id-2242 [class*="cms-text-with-image-"] .row.d-flex {
		align-items: center !important;
	}
}

.page-id-2242 [class*="cms-title-"] {
	padding-top: 72px !important;
	padding-bottom: 0 !important;
}

.page-id-2242 [class*="cms-title-"] h1,
.page-id-2242 [class*="cms-title-"] h2 {
	font-size: 40px;
	font-weight: 800;
	margin-bottom: 0;
}

.page-id-2242 [class*="cms-title-"] h1::after,
.page-id-2242 [class*="cms-title-"] h2::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	margin: 18px auto 0;
	border-radius: 2px;
	background: #3cb2e8;
}

.page-id-2242 .two-panel-text {
	padding-top: 40px !important;
}

@media (max-width: 767.98px) {
	.page-id-2242 [class*="cms-title-"] {
		padding-top: 48px !important;
	}

	.page-id-2242 [class*="cms-title-"] h1,
	.page-id-2242 [class*="cms-title-"] h2 {
		font-size: 32px;
	}
}

/* ---------------------------------------------------------------------------
   Phone sliders, 28 Sept 2026. The History cards and the Home news cards were
   a long single column on a phone. Below 768 they become a swipe row: each
   card takes 84% of the width so the next one peeks in, scroll snap lands on
   a card, dots underneath show position (see functions.php). Desktop is
   untouched.
   --------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	.page-id-2242 .two-panel-text .row.d-flex,
	.latest-news-grid {
		display: flex !important;
		flex-wrap: nowrap !important;
		gap: 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 24px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding: 4px 24px 12px;
		margin: 0;
		/* full bleed: break out of the container to the screen edges */
		width: 100vw;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
	}

	.page-id-2242 .two-panel-text .container,
	.latest-news-section .container {
		overflow: visible;
	}

	.page-id-2242 .two-panel-text .row.d-flex::-webkit-scrollbar,
	.latest-news-grid::-webkit-scrollbar {
		display: none;
	}

	.page-id-2242 .two-panel-text .row.d-flex > .col-12,
	.latest-news-grid > .news-card {
		flex: 0 0 84% !important;
		max-width: 84% !important;
		width: 84% !important;
		scroll-snap-align: start;
		padding: 0 !important;
		margin: 0 !important;
	}

	.page-id-2242 .two-panel-text .row.d-flex::after,
	.latest-news-grid::after {
		content: "";
		flex: 0 0 8px;
	}

	.tcb-slider-dots {
		display: flex;
		justify-content: center;
		gap: 8px;
		margin: 6px 0 0;
		padding: 0;
		list-style: none;
	}

	.tcb-slider-dots button {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		border: 0;
		padding: 0;
		background: rgba(0, 62, 112, 0.25);
		transition: background 0.2s ease, transform 0.2s ease;
	}

	.page-id-2242 .two-panel-text .tcb-slider-dots button {
		background: rgba(255, 255, 255, 0.35);
	}

	.tcb-slider-dots button[aria-current="true"] {
		background: #3cb2e8;
		transform: scale(1.25);
	}
}

@media (min-width: 768px) {
	.tcb-slider-dots {
		display: none;
	}
}

/* The theme decorates every li inside a text row with a tick; the dots are not a list of facts. */
.tcb-slider-dots li,
.tcb-slider-dots li::before,
.tcb-slider-dots li::marker {
	content: none !important;
	background: none !important;
	padding: 0 !important;
	margin: 0 !important;
	list-style: none !important;
}

.tcb-slider-dots li::before {
	display: none !important;
}

/* Equal card heights. Desktop: the History cards and news cards stretch to the
   tallest in the row, with the button and the excerpt box pinned to the foot.
   Phone slider: same, since the track is a flex row. */
.page-id-2242 [class*="two-panel-text"] .col-md-6 {
	align-items: stretch;
}

.page-id-2242 [class*="two-panel-text"] .col-md-6 > div {
	height: calc(100% - 40px);
}

.latest-news-grid {
	align-items: stretch;
}

.latest-news-grid .news-card {
	display: flex;
	flex-direction: column;
	height: auto;
}

.latest-news-grid .news-card .news-card-link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	height: 100%;
}

.latest-news-grid .news-card .news-card-link > .news-card-text {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.latest-news-grid .news-card p.news-card-text {
	flex: 1 1 auto;
	min-height: 0;
}

@media (max-width: 767.98px) {
	.page-id-2242 .two-panel-text .row.d-flex > .col-12 > div {
		height: 100%;
		margin: 0 !important;
		max-width: none;
	}

	.latest-news-grid > .news-card {
		height: auto;
	}
}

/* ---------------------------------------------------------------------------
   News index, 28 Sept 2026. Markup in the child's index.php.
   --------------------------------------------------------------------------- */
.tcb-posts-header {
	background: #003e70;
	padding: 72px 0;
	text-align: center;
}

.tcb-posts-header h1 {
	color: #ffffff;
	font-size: clamp(36px, 4.2vw, 56px);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.05;
	margin: 0;
}

.tcb-posts-header h1::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	margin: 20px auto 0;
	border-radius: 2px;
	background: #3cb2e8;
}

.tcb-posts-section {
	background: #ffffff;
	padding: 48px 0 72px;
}

.tcb-posts-filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-bottom: 40px;
}

.tcb-posts-filter a {
	display: inline-block;
	padding: 10px 20px;
	border-radius: 999px;
	border: 1px solid #d5e3f0;
	background: #ffffff;
	color: #003e70;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.tcb-posts-filter a:hover {
	background: #eef4f9;
	border-color: #eef4f9;
	text-decoration: none;
}

.tcb-posts-filter a[aria-current="page"] {
	background: #003e70;
	border-color: #003e70;
	color: #ffffff;
}

.tcb-posts-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.tcb-post-card {
	display: flex;
	background: #eef4f9;
	border-radius: 11px;
	overflow: hidden;
	box-shadow: 0 6px 20px rgba(0, 20, 40, 0.08);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tcb-post-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 32px rgba(0, 20, 40, 0.14);
}

.tcb-post-card__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	color: inherit;
	text-decoration: none;
}

.tcb-post-card__link:hover {
	text-decoration: none;
}

.tcb-post-card__image {
	aspect-ratio: 16 / 10;
	background: #d5e3f0;
	overflow: hidden;
}

.tcb-post-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.tcb-post-card:hover .tcb-post-card__image img {
	transform: scale(1.04);
}

.tcb-post-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 22px 24px 24px;
}

.tcb-post-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #1a59a3;
}

.tcb-post-card__meta time {
	color: #5b6b7a;
	font-weight: 500;
}

.tcb-post-card__title {
	font-size: 20px;
	line-height: 1.3;
	font-weight: 700;
	color: #003e70;
	margin: 0 0 10px;
}

.tcb-post-card__excerpt {
	font-size: 15px;
	line-height: 1.55;
	color: #212529;
	margin: 0 0 16px;
	max-height: 4.65em;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.tcb-post-card__more {
	margin-top: auto;
	font-size: 15px;
	font-weight: 700;
	color: #1a59a3;
}

.tcb-post-card__more::after {
	content: " \2192";
	display: inline-block;
	transition: transform 0.2s ease;
}

.tcb-post-card:hover .tcb-post-card__more::after {
	transform: translateX(4px);
}

.tcb-posts-pagination {
	justify-content: center;
	gap: 6px;
	margin: 48px 0 0 !important;
}

.tcb-posts-pagination > span {
	display: inline-flex;
}

.tcb-posts-pagination a,
.tcb-posts-pagination .current,
.tcb-posts-pagination .dots {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px !important;
	margin: 0 !important;
	border-radius: 11px;
	font-weight: 700;
	background: #eef4f9 !important;
	color: #003e70 !important;
	transition: background 0.2s ease, color 0.2s ease;
}

.tcb-posts-pagination a:hover {
	background: #003e70 !important;
	color: #ffffff !important;
}

.tcb-posts-pagination .current {
	background: #003e70 !important;
	color: #ffffff !important;
}

.tcb-posts-pagination .dots {
	background: transparent !important;
}

.tcb-posts-pagination svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.tcb-posts-empty {
	text-align: center;
	padding: 40px 0;
}

@media (max-width: 991.98px) {
	.tcb-posts-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
}

@media (max-width: 767.98px) {
	.tcb-posts-header {
		padding: 48px 0;
	}

	.tcb-posts-section {
		padding: 32px 0 48px;
	}

	.tcb-posts-filter {
		justify-content: flex-start;
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin: 0 calc(50% - 50vw) 28px;
		padding: 0 24px 4px;
	}

	.tcb-posts-filter::-webkit-scrollbar {
		display: none;
	}

	.tcb-posts-filter a {
		flex: 0 0 auto;
	}
}

@media (max-width: 575.98px) {
	.tcb-posts-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
   Single post, 28 Sept 2026. Markup in the child's single.php. The article body
   is still ACF rows, every one of them saved white on blue, so the rows are
   recoloured here rather than across 160 posts: white page, dark text, a
   reading measure, left aligned copy.
   --------------------------------------------------------------------------- */
.tcb-post-header__meta {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin: 0 0 16px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #3cb2e8;
}

.tcb-post-header__meta a {
	color: #3cb2e8;
	text-decoration: none;
}

.tcb-post-header__meta a:hover {
	color: #ffffff;
}

.tcb-post-header__meta time {
	color: rgba(255, 255, 255, 0.75);
	font-weight: 500;
}

.tcb-post-header h1 {
	text-transform: none;
	letter-spacing: 0;
	font-size: clamp(30px, 3.4vw, 44px);
	line-height: 1.15;
	max-width: 900px;
	margin: 0 auto;
}

body.single-post .tcb-post {
	background: #ffffff;
	padding: 24px 0 8px;
}

body.single-post .tcb-post [class*="cms-text-center-"],
body.single-post .tcb-post [class*="cms-text-with-image-"],
body.single-post .tcb-post [class*="cms-title-"],
body.single-post .tcb-post .two-panel-text,
body.single-post .tcb-post .gallery {
	background: #ffffff !important;
	padding-top: 20px !important;
	padding-bottom: 20px !important;
}

body.single-post .tcb-post [class*="cms-text-center-"] .container,
body.single-post .tcb-post [class*="cms-text-with-image-"] .container {
	max-width: 900px;
}

body.single-post .tcb-post [class*="cms-text-center-"] .text-center,
body.single-post .tcb-post [class*="cms-text-center-"] .col-12,
body.single-post .tcb-post [class*="cms-text-with-image-"] .col-12 {
	text-align: left !important;
}

body.single-post .tcb-post h1,
body.single-post .tcb-post h2,
body.single-post .tcb-post h3,
body.single-post .tcb-post h4,
body.single-post .tcb-post p,
body.single-post .tcb-post li,
body.single-post .tcb-post span {
	color: #212529 !important;
}

body.single-post .tcb-post h1,
body.single-post .tcb-post h2 {
	font-size: 28px;
	font-weight: 700;
	color: #003e70 !important;
	margin: 28px 0 12px;
}

body.single-post .tcb-post h3 {
	font-size: 22px;
	font-weight: 700;
	color: #003e70 !important;
	margin: 24px 0 10px;
}

body.single-post .tcb-post p,
body.single-post .tcb-post li {
	font-size: 17px;
	line-height: 1.7;
}

body.single-post .tcb-post a,
body.single-post .tcb-post a span {
	color: #1a59a3 !important;
	text-decoration: underline;
}

body.single-post .tcb-post a:hover,
body.single-post .tcb-post a:hover span {
	color: #003e70 !important;
}

body.single-post .tcb-post img {
	border-radius: 11px;
}

body.single-post .tcb-post .col-12 > :last-child {
	margin-bottom: 0;
}

.tcb-post-nav {
	background: #eef4f9;
	padding: 48px 0 56px;
}

.tcb-post-nav__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.tcb-post-nav__card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 22px 24px;
	background: #ffffff;
	border-radius: 11px;
	box-shadow: 0 6px 20px rgba(0, 20, 40, 0.08);
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tcb-post-nav__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 32px rgba(0, 20, 40, 0.14);
	text-decoration: none;
}

.tcb-post-nav__card--next {
	text-align: right;
}

.tcb-post-nav__label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #1a59a3;
}

.tcb-post-nav__card--prev .tcb-post-nav__label::before {
	content: "\2190  ";
}

.tcb-post-nav__card--next .tcb-post-nav__label::after {
	content: "  \2192";
}

.tcb-post-nav__title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: #003e70;
}

.tcb-post-nav__all {
	text-align: center;
	margin: 28px 0 0;
}

.tcb-post-nav__all a {
	font-weight: 700;
	color: #1a59a3;
}

@media (max-width: 767.98px) {
	.tcb-post-nav {
		padding: 36px 0 40px;
	}

	.tcb-post-nav__row {
		grid-template-columns: 1fr;
	}

	.tcb-post-nav__card--next {
		text-align: left;
	}

	body.single-post .tcb-post p,
	body.single-post .tcb-post li {
		font-size: 16px;
	}
}

/* Posts keep the whole article in one text with image row, which left the copy
   in a half width column beside a 300px photo. On posts the photo goes on top at
   full measure and the copy runs underneath. Heading weight beats the theme's
   own !important rule. */
body.single-post .tcb-post [class*="cms-text-with-image-"] .row.d-flex {
	flex-direction: column !important;
	gap: 8px;
}

body.single-post .tcb-post [class*="cms-text-with-image-"] .row.d-flex > [class*="col-"] {
	flex: 0 0 100% !important;
	max-width: 100% !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

body.single-post .tcb-post [class*="cms-text-with-image-"] .row.d-flex > [class*="col-"]:has(img):not(:has(p)) {
	order: -1;
}

body.single-post .tcb-post [class*="cms-text-with-image-"] img {
	width: 100%;
	max-height: 520px;
	object-fit: cover;
}

body.single-post .tcb-post h1,
body.single-post .tcb-post h2,
body.single-post .tcb-post h3 {
	font-weight: 700 !important;
}

.tcb-post-nav__row:has(> span:empty) {
	grid-template-columns: 1fr;
}

/* Post headings were pasted with an inline font-weight: 400 span. The intro row
   lines up with the article body. */
body.single-post .tcb-post h1 span,
body.single-post .tcb-post h2 span,
body.single-post .tcb-post h3 span,
body.single-post .tcb-post h4 span {
	font-weight: inherit !important;
}

@media (min-width: 992px) {
	body.single-post .tcb-post [class*="cms-text-center-"] .col-12 {
		padding-left: 36px !important;
		padding-right: 36px !important;
	}
}

/* ---------------------------------------------------------------------------
   Contact page, 28 Sept 2026. Hero on top (image_full_width row), then the
   form row on the tint: the form in a white card, the details in a blue card.
   The older rules above assumed the blue page; these take over.
   --------------------------------------------------------------------------- */
.page-id-318 [class*="two-panel-text"] {
	padding: 72px 0 !important;
}

.page-id-318 [class*="two-panel-text"] .row.d-flex {
	align-items: flex-start;
	gap: 28px 0;
}

.page-id-318 [class*="two-panel-text"] .col-md-9 {
	background: #ffffff;
	border-radius: 11px;
	box-shadow: 0 6px 20px rgba(0, 20, 40, 0.08);
	padding: 32px 36px 36px;
}

.page-id-318 [class*="two-panel-text"] .col-md-3 {
	padding-left: 28px;
}

.page-id-318 .wpcf7-form {
	margin-top: 0;
}

.page-id-318 .wpcf7-form label {
	color: #212529;
}

.page-id-318 .wpcf7-form input:not([type="submit"]),
.page-id-318 .wpcf7-form select,
.page-id-318 .wpcf7-form textarea {
	border: 1px solid #d5e3f0;
	border-radius: 8px;
	background-color: #ffffff;
}

.page-id-318 .wpcf7-form input:not([type="submit"]):hover,
.page-id-318 .wpcf7-form select:hover,
.page-id-318 .wpcf7-form textarea:hover {
	border-color: #1a59a3;
}

.page-id-318 .wpcf7-form input:focus,
.page-id-318 .wpcf7-form select:focus,
.page-id-318 .wpcf7-form textarea:focus {
	outline: 3px solid rgba(26, 89, 163, 0.35);
	outline-offset: 0;
	border-color: #1a59a3;
}

.page-id-318 .wpcf7-form .wpcf7-not-valid {
	border-color: #c62828;
}

.page-id-318 .wpcf7-form .wpcf7-not-valid-tip {
	color: #c62828;
}

.page-id-318 .wpcf7-form .wpcf7-submit {
	border-radius: 11px !important;
	background: #003e70 !important;
	color: #ffffff !important;
	box-shadow: 0 6px 18px rgba(0, 20, 40, 0.18);
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.page-id-318 .wpcf7-form .wpcf7-submit:hover {
	background: #1a59a3 !important;
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(0, 20, 40, 0.22);
}

.page-id-318 [class*="two-panel-text"] .contact-info {
	background: #003e70;
	border-radius: 11px;
	padding: 28px 28px 24px;
	margin-top: 0 !important;
	color: #ffffff;
}

.page-id-318 [class*="two-panel-text"] .contact-info h2 {
	font-size: 22px;
	font-weight: 700;
	color: #ffffff;
	margin: 0 0 18px;
}

.page-id-318 [class*="two-panel-text"] .contact-info a {
	color: #ffffff;
	text-decoration: none;
	word-break: break-word;
}

.page-id-318 [class*="two-panel-text"] .contact-info a:hover {
	color: #3cb2e8;
}

.page-id-318 [class*="two-panel-text"] .contact-info > .d-flex:has(a[href^="mailto:"])::before,
.page-id-318 [class*="two-panel-text"] .contact-info > .d-flex:has(a[href^="tel:"])::before,
.page-id-318 [class*="two-panel-text"] .contact-info > .d-flex:not(:has(a))::before {
	background-color: #3cb2e8;
}

.page-id-318 [class*="two-panel-text"] .contact-info .contact-info__visit {
	margin: 22px 0 0;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.page-id-318 [class*="two-panel-text"] .contact-info .contact-info__visit a {
	font-weight: 700;
	color: #3cb2e8;
}

.page-id-318 [class*="two-panel-text"] .contact-info .contact-info__visit a::after {
	content: " \2192";
}

@media (max-width: 991.98px) {
	.page-id-318 [class*="two-panel-text"] .col-md-9,
	.page-id-318 [class*="two-panel-text"] .col-md-3 {
		flex: 0 0 100%;
		max-width: 100%;
		padding-left: 12px;
		padding-right: 12px;
	}

	.page-id-318 [class*="two-panel-text"] .col-md-9 {
		padding: 24px 20px 28px;
	}

	.page-id-318 [class*="two-panel-text"] .contact-info {
		margin-top: 24px !important;
	}
}

@media (max-width: 767.98px) {
	.page-id-318 [class*="two-panel-text"] {
		padding: 40px 0 48px !important;
	}

	.page-id-318 .wpcf7-form .w-100.d-flex {
		flex-direction: column;
	}

	.page-id-318 .wpcf7-form .w-100.d-flex > .w-50 {
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* Details card wide enough for the email on one line. */
@media (min-width: 992px) {
	.page-id-318 [class*="two-panel-text"] .col-md-9 {
		flex: 0 0 66.666%;
		max-width: 66.666%;
	}

	.page-id-318 [class*="two-panel-text"] .col-md-3 {
		flex: 0 0 33.333%;
		max-width: 33.333%;
	}
}

.page-id-318 [class*="two-panel-text"] .contact-info a,
.page-id-318 [class*="two-panel-text"] .contact-info span {
	font-size: 15px;
}

/* Contact, tablet and phone: both cards sit 24px in from the screen edge, the
   details card takes 5 of 12 columns between 992 and 1199 so the email fits. */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.page-id-318 [class*="two-panel-text"] .col-md-9 {
		flex: 0 0 58.333%;
		max-width: 58.333%;
	}

	.page-id-318 [class*="two-panel-text"] .col-md-3 {
		flex: 0 0 41.666%;
		max-width: 41.666%;
	}
}

@media (max-width: 991.98px) {
	.page-id-318 [class*="two-panel-text"] .container {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}

	.page-id-318 [class*="two-panel-text"] .row.d-flex {
		margin: 0;
	}

	.page-id-318 [class*="two-panel-text"] .col-md-9,
	.page-id-318 [class*="two-panel-text"] .col-md-3 {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.page-id-318 [class*="two-panel-text"] .col-md-9 {
		padding: 28px 24px 32px !important;
	}
}

@media (max-width: 767.98px) {
	.page-id-318 .image-full-width-content p {
		font-size: 16px;
	}
}

/* The theme gives the form its own 20px padding inside the card. One set of
   padding is enough. */
.page-id-318 .wpcf7-form {
	padding: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

@media (max-width: 767.98px) {
	.page-id-318 [class*="two-panel-text"] .col-md-9 {
		padding: 24px 20px 28px !important;
	}
}

/* Products index, 28 Sept 2026: the tile grid carries its own heading now. */
.services-heading h2 {
	font-size: 40px;
	font-weight: 800;
	margin-bottom: 0 !important;
}

.services-heading h2::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	margin: 18px auto 0;
	border-radius: 2px;
	background: #3cb2e8;
}

.services-heading.mb-4 {
	margin-bottom: 40px !important;
}

@media (min-width: 768px) {
	.page-id-2377 [class*="cms-text-with-image-"] .row.d-flex {
		align-items: center !important;
	}
}

@media (max-width: 767.98px) {
	.services-heading h2 {
		font-size: 32px;
	}
}

/* Products index closing band: the last text row is the call to action, so its
   link becomes the button and the row takes the CTA band's padding. */
.page-id-2377 [class*="cms-text-center-5-2377"] {
	padding: 72px 0 !important;
}

.page-id-2377 [class*="cms-text-center-5-2377"] h1 {
	font-size: 32px;
	margin-bottom: 12px;
}

.page-id-2377 [class*="cms-text-center-5-2377"] p:last-child {
	margin-top: 24px;
}

.page-id-2377 [class*="cms-text-center-5-2377"] p:last-child a {
	display: inline-block;
	padding: 18px 40px;
	background: #ffffff;
	color: #003e70 !important;
	border-radius: 11px;
	font-weight: 700;
	text-decoration: none !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.page-id-2377 [class*="cms-text-center-5-2377"] p:last-child a:hover {
	background: #3cb2e8;
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

@media (max-width: 767.98px) {
	.page-id-2377 [class*="cms-text-center-5-2377"] {
		padding: 48px 0 !important;
	}

	.page-id-2377 [class*="cms-text-center-5-2377"] p:last-child a {
		display: block;
		padding: 16px 20px;
	}
}

/* The paragraph straight after a hero reads as the page lead. */
.image-full-width-block + [class*="cms-text-center-"] .col-12 > p {
	font-size: 19px;
	line-height: 1.65;
	max-width: 880px;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 767.98px) {
	.image-full-width-block + [class*="cms-text-center-"] .col-12 > p {
		font-size: 17px;
	}
}

/* Phone: headings follow their copy. Body text in the text rows went left
   aligned on phones earlier while the headings stayed centred, which read as a
   mistake. Blue closing bands and the retail address keep everything centred. */
@media (max-width: 767.98px) {
	body:not(.page-id-2248) [class*="cms-text-with-image-"] .col-12 h1,
	body:not(.page-id-2248) [class*="cms-text-with-image-"] .col-12 h2,
	body:not(.page-id-2248) [class*="cms-text-with-image-"] .col-12 h3,
	body:not(.page-id-2248) [class*="cms-text-center-"]:not([class*="cms-text-center-5-2377"]) .col-12 h1,
	body:not(.page-id-2248) [class*="cms-text-center-"]:not([class*="cms-text-center-5-2377"]) .col-12 h2,
	body:not(.page-id-2248) [class*="cms-text-center-"]:not([class*="cms-text-center-5-2377"]) .col-12 h3 {
		text-align: left;
	}

	body.page-id-2377 [class*="cms-text-center-5-2377"] .col-12 p,
	body.page-id-2377 [class*="cms-text-center-5-2377"] .col-12 h1 {
		text-align: center;
	}
}

/* Product pages: the enquire button matches the rest of the site's buttons. */
.parent-pageid-2377 .cta-button a.btn {
	background: #003e70 !important;
	color: #ffffff !important;
	border-radius: 11px;
	text-transform: none;
	box-shadow: 0 6px 18px rgba(0, 20, 40, 0.18);
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.parent-pageid-2377 .cta-button a.btn:hover {
	background: #1a59a3 !important;
	transform: translateY(-1px);
}

/* ---------------------------------------------------------------------------
   Product cut lists, 28 Sept 2026. Built by the script in functions.php.
   --------------------------------------------------------------------------- */
.tcb-cuts {
	background: #ffffff;
	padding: 56px 0 72px;
}

.tcb-cuts__nav-wrap {
	position: relative;
	margin-bottom: 40px;
}

.tcb-cuts__nav {
	display: flex;
	flex-wrap: nowrap;
	gap: 10px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding: 4px 2px;
}

.tcb-cuts__nav {
	scrollbar-width: thin;
	scrollbar-color: #1a59a3 #e3ebf3;
	padding-bottom: 14px;
}

.tcb-cuts__nav::-webkit-scrollbar {
	display: block;
	height: 6px;
}

.tcb-cuts__nav::-webkit-scrollbar-track {
	background: #e3ebf3;
	border-radius: 3px;
}

.tcb-cuts__nav::-webkit-scrollbar-thumb {
	background: #1a59a3;
	border-radius: 3px;
}


.tcb-cuts__nav a {
	flex: 0 0 auto;
	white-space: nowrap;
}

.tcb-cuts__nav a[aria-current="true"] {
	background: #003e70;
	border-color: #003e70;
	color: #ffffff;
}

.tcb-cuts__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid #d5e3f0;
	background: #ffffff;
	color: #003e70;
	font-size: 18px;
	line-height: 1;
	box-shadow: 0 4px 14px rgba(0, 20, 40, 0.12);
	cursor: pointer;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 0;
	z-index: 2;
}

.tcb-cuts__arrow:hover {
	background: #003e70;
	color: #ffffff;
}

.tcb-cuts__arrow--prev {
	left: -20px;
}

.tcb-cuts__arrow--next {
	right: -20px;
}

.tcb-cuts__nav-wrap .tcb-cuts__arrow {
	display: none !important;
}

.tcb-cuts__nav {
	cursor: grab;
	user-select: none;
}

.tcb-cuts__nav.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	scroll-snap-type: none;
}

.tcb-cuts__nav.is-dragging a {
	pointer-events: none;
}

.tcb-cuts__nav-wrap.is-start .tcb-cuts__arrow--prev,
.tcb-cuts__nav-wrap.is-end .tcb-cuts__arrow--next {
	display: none;
}

.tcb-cuts__nav a {
	display: inline-block;
	padding: 9px 18px;
	border-radius: 999px;
	border: 1px solid #d5e3f0;
	color: #003e70;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.tcb-cuts__nav a:hover {
	background: #003e70;
	border-color: #003e70;
	color: #ffffff;
	text-decoration: none;
}

.tcb-cuts__group {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 24px 48px;
	padding: 36px 0;
	border-top: 1px solid #e3ebf3;
	scroll-margin-top: 24px;
}

.tcb-cuts__group:last-child {
	border-bottom: 1px solid #e3ebf3;
}

.tcb-cuts__title {
	font-size: 22px;
	line-height: 1.3;
	font-weight: 700;
	color: #003e70;
	margin: 0;
	text-align: left;
}

.tcb-cuts__title img.emoji {
	width: 1em;
	height: 1em;
	margin-right: 6px;
	vertical-align: -0.1em;
}

.tcb-cuts__list {
	columns: 3;
	column-gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tcb-cuts__list li {
	break-inside: avoid;
	position: relative;
	padding: 4px 0 4px 22px;
	font-size: 15px;
	line-height: 1.45;
	color: #212529;
}

.tcb-cuts__list li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 4px;
	color: #1a9dd9;
	font-weight: 700;
}

@media (max-width: 991.98px) {
	.tcb-cuts__group {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 28px 0;
	}

	.tcb-cuts__list {
		columns: 2;
	}
}

@media (max-width: 575.98px) {
	.tcb-cuts {
		padding: 40px 0 48px;
	}

	.tcb-cuts__nav-wrap {
		margin: 0 calc(50% - 50vw) 28px;
	}

	.tcb-cuts__nav {
		padding: 4px 24px;
	}

	.tcb-cuts__arrow {
		display: none !important;
	}

	.tcb-cuts__list {
		columns: 1;
	}
}

/* ---------------------------------------------------------------------------
   Sticky header, 28 Sept 2026. The header is fixed and never changes size, so
   nothing jumps. The page is pushed down by the header's measured height
   (--tcb-header-h from functions.php) except on Home, where the hero sits
   under the header on purpose and the header goes solid once it leaves the
   video. The theme's page wrapper is overflow hidden, which is why this is
   fixed rather than sticky.
   --------------------------------------------------------------------------- */
body > header {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 1002;
	transition: none;
}

body:not(.hero-banners-image-or-video-behind-header) > main {
	margin-top: var(--tcb-header-h, 171px) !important;
}

body > header.is-scrolled {
	box-shadow: 0 2px 10px rgba(0, 20, 40, 0.18);
}

body.hero-banners-image-or-video-behind-header header.is-scrolled {
	background: #1a59a3 !important;
}

/* Anchored jumps land below the fixed header. */
.tcb-cuts__group,
#visit {
	scroll-margin-top: 200px;
}

html {
	scroll-padding-top: 200px;
}


/* ---------------------------------------------------------------------------
   Accreditations, 28 Sept 2026. The two bodies become white cards on the tint
   band: logo plate on the left, name and copy on the right, both cards the same
   width so they stack as a pair. The earlier plate rules above still size the
   logos. The list inside SALSA keeps its ticks.
   --------------------------------------------------------------------------- */
.page-id-2247 [class*="cms-text-with-image-"] {
	padding: 0 0 28px !important;
}

.page-id-2247 [class*="cms-text-with-image-"]:last-of-type {
	padding-bottom: 72px !important;
}

.page-id-2247 [class*="cms-text-with-image-"] .row.d-flex {
	background: #ffffff;
	border-radius: 11px;
	box-shadow: 0 6px 20px rgba(0, 20, 40, 0.08);
	padding: 32px 36px;
	align-items: center !important;
	margin: 0;
}

.page-id-2247 [class*="cms-text-with-image-"] .row.d-flex > .col-md-6:has(img) {
	flex: 0 0 300px;
	max-width: 300px;
	padding: 0 !important;
}

.page-id-2247 [class*="cms-text-with-image-"] .row.d-flex > .col-md-6:not(:has(img)) {
	flex: 1 1 auto;
	max-width: none;
	padding: 0 0 0 40px !important;
}

.page-id-2247 [class*="cms-text-with-image-"] .row > .col-md-6:has(img) > div {
	margin: 0 !important;
	height: 200px !important;
	background: #eef4f9;
	border-radius: 11px;
}

.page-id-2247 [class*="cms-text-with-image-"] h1,
.page-id-2247 [class*="cms-text-with-image-"] h2 {
	font-size: 24px !important;
	font-weight: 700;
	color: #003e70;
	margin: 0 0 12px;
}

.page-id-2247 [class*="cms-text-with-image-"] .col-12 > :last-child,
.page-id-2247 [class*="cms-text-with-image-"] ul {
	margin-bottom: 0;
}

.page-id-2247 [class*="cms-text-center-3-2247"] {
	padding-bottom: 32px !important;
}

@media (max-width: 767.98px) {
	.page-id-2247 [class*="cms-text-with-image-"] .row.d-flex {
		padding: 24px 20px;
	}

	.page-id-2247 [class*="cms-text-with-image-"] .row.d-flex > .col-md-6:has(img),
	.page-id-2247 [class*="cms-text-with-image-"] .row.d-flex > .col-md-6:not(:has(img)) {
		flex: 0 0 100%;
		max-width: 100%;
		padding: 0 !important;
	}

	.page-id-2247 [class*="cms-text-with-image-"] .row > .col-md-6:has(img) > div {
		height: 150px !important;
		margin-bottom: 20px !important;
	}

	.page-id-2247 [class*="cms-text-with-image-"]:last-of-type {
		padding-bottom: 48px !important;
	}
}

/* Accreditation logos: the plate is the box, the logo is contained inside it
   with even padding, so nothing ever crops at any width. */
.page-id-2247 [class*="cms-text-with-image-"] .row > .col-md-6:has(img) > div {
	overflow: visible !important;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 28px;
	box-sizing: border-box;
}

.page-id-2247 [class*="cms-text-with-image-"] img {
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	max-height: 100%;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	object-fit: contain !important;
}

@media (max-width: 767.98px) {
	.page-id-2247 [class*="cms-text-with-image-"] .row > .col-md-6:has(img) > div {
		padding: 18px 20px;
	}
}

/* Footer now has five columns: brand 3, shop 2, information 2, areas 2, contact 3. */
@media (min-width: 992px) {
	.footer .footer-brand ~ .col-lg-2 {
		flex: 0 0 16.666%;
		max-width: 16.666%;
	}

	.footer .footer-brand ~ .col-lg-3 {
		flex: 0 0 25%;
		max-width: 25%;
	}

	.footer .footer-brand ~ .col-12.col-lg-3 {
		flex: 0 0 25%;
		max-width: 25%;
	}
}

@media (min-width: 992px) and (max-width: 1199.98px) {
	.footer .footer-brand ~ .col-lg-2 {
		flex: 0 0 15%;
		max-width: 15%;
	}

	.footer .footer-brand ~ .col-12.col-lg-3 {
		flex: 0 0 30%;
		max-width: 30%;
	}
}

@media (max-width: 991.98px) {
	.footer .footer-areas {
		flex: 0 0 100%;
		max-width: 100%;
		margin-bottom: 32px;
	}
}

/* ---------------------------------------------------------------------------
   Testimonials, 28 Sept 2026. The quotes are blockquote + author pairs in one
   text row. They become a three column card grid: quote mark, the words, then
   the name. The container is the row's column, so the grid replaces the
   text_center's centring. Row 3 on page 178 is the quotes.
   --------------------------------------------------------------------------- */
.page-id-178 [class*="cms-text-center-3-178"] .col-12 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	text-align: left;
	padding-top: 24px !important;
}

.page-id-178 [class*="cms-text-center-3-178"] .col-12 > * {
	margin: 0;
}

.page-id-178 [class*="cms-text-center-3-178"] blockquote {
	position: relative;
	background: #ffffff;
	border-radius: 11px 11px 0 0;
	box-shadow: 0 6px 20px rgba(0, 20, 40, 0.08);
	padding: 52px 28px 8px;
	margin: 0 !important;
	font-size: 16px;
	line-height: 1.6;
	color: #212529;
}

.page-id-178 [class*="cms-text-center-3-178"] blockquote::before {
	content: "\201C";
	position: absolute;
	top: 14px;
	left: 24px;
	font-size: 64px;
	line-height: 1;
	font-weight: 800;
	color: #3cb2e8;
}

.page-id-178 [class*="cms-text-center-3-178"] blockquote p {
	margin: 0;
	text-align: left !important;
}

.page-id-178 [class*="cms-text-center-3-178"] blockquote + p {
	grid-row: auto;
	background: #ffffff;
	border-radius: 0 0 11px 11px;
	box-shadow: 0 6px 20px rgba(0, 20, 40, 0.08);
	padding: 12px 28px 24px;
	margin: -24px 0 0 !important;
	font-size: 14px;
	color: #1a59a3;
	text-align: left !important;
}

.page-id-178 [class*="cms-text-center-3-178"] blockquote + p strong {
	font-weight: 700;
	text-transform: none;
}

/* each blockquote and its author line share a column: the pair is laid out as one
   grid item by wrapping them in a flex column via display: contents on the row */
.page-id-178 [class*="cms-text-center-3-178"] .tcb-quote {
	display: flex;
	flex-direction: column;
}

.page-id-178 [class*="cms-text-center-3-178"] .tcb-quote blockquote {
	flex: 1 1 auto;
}

.page-id-178 [class*="cms-text-center-3-178"] .tcb-quote blockquote + p {
	margin-top: 0 !important;
}

.tcb-review-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 20px 0;
}

.tcb-review-links a {
	display: inline-block;
	padding: 14px 28px;
	border-radius: 11px;
	background: #003e70;
	color: #ffffff !important;
	font-weight: 700;
	text-decoration: none !important;
	box-shadow: 0 6px 18px rgba(0, 20, 40, 0.18);
	transition: background 0.2s ease, transform 0.2s ease;
}

.tcb-review-links a:hover {
	background: #1a59a3;
	transform: translateY(-1px);
}

@media (max-width: 991.98px) {
	.page-id-178 [class*="cms-text-center-3-178"] .col-12 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 575.98px) {
	.page-id-178 [class*="cms-text-center-3-178"] .col-12 {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* Testimonials grid takes the full container width; review buttons keep white text. */
.page-id-178 [class*="cms-text-center-3-178"] .col-12 {
	padding-left: 12px !important;
	padding-right: 12px !important;
}

.page-id-178 [class*="cms-text-center-3-178"] .container {
	max-width: 1140px;
}

.page-id-178 .tcb-review-links a,
.page-id-178 .tcb-review-links a:hover {
	color: #ffffff !important;
}

.page-id-178 [class*="cms-text-center-3-178"] blockquote + p strong {
	color: #1a59a3;
}

/* Testimonials grid: the theme's p-lg-5 on the column and the text row's own
   measure both narrow it; the grid gets the full container. */
.page-id-178 [class*="cms-text-center-3-178"] .container {
	max-width: 1320px;
}

.page-id-178 [class*="cms-text-center-3-178"] .col-12.p-lg-5 {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.page-id-178 [class*="cms-text-center-3-178"] .row.m-0 {
	margin: 0 !important;
}

.page-id-178 [class*="cms-text-center-3-178"] .col-12 {
	max-width: none !important;
	margin: 0 !important;
}

/* Testimonials closing band: the review ask is the call to action. */
.page-id-178 [class*="cms-text-center-4-178"] {
	padding: 72px 0 !important;
}

.page-id-178 [class*="cms-text-center-4-178"] h1 {
	color: #ffffff;
	font-size: 36px;
	font-weight: 800;
}

.page-id-178 [class*="cms-text-center-4-178"] p {
	color: rgba(255, 255, 255, 0.9);
	font-size: 18px;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

.page-id-178 [class*="cms-text-center-4-178"] .tcb-review-links {
	margin: 28px 0;
}

.page-id-178 [class*="cms-text-center-4-178"] .tcb-review-links a {
	background: #ffffff;
	color: #003e70 !important;
	padding: 18px 36px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.page-id-178 [class*="cms-text-center-4-178"] .tcb-review-links a:hover {
	background: #3cb2e8;
	color: #003e70 !important;
}

.page-id-178 [class*="cms-text-center-4-178"] .tcb-review-alt {
	font-size: 15px;
	color: rgba(255, 255, 255, 0.75);
}

.page-id-178 [class*="cms-text-center-4-178"] .tcb-review-alt a {
	color: #ffffff;
	text-decoration: underline;
}

@media (max-width: 767.98px) {
	.page-id-178 [class*="cms-text-center-4-178"] {
		padding: 48px 0 !important;
	}

	.page-id-178 [class*="cms-text-center-4-178"] h1,
	.page-id-178 [class*="cms-text-center-4-178"] p {
		text-align: center !important;
	}

	.page-id-178 [class*="cms-text-center-4-178"] .tcb-review-links a {
		display: block;
		width: 100%;
	}
}

/* ---------------------------------------------------------------------------
   Our Partners, 28 Sept 2026. Four supplier cards in a two panel row: logo on
   a white plate, name, one line on what they supply.
   --------------------------------------------------------------------------- */
.page-id-176 .two-panel-text {
	padding: 24px 0 72px !important;
}

.page-id-176 .two-panel-text .row.d-flex {
	gap: 24px 0;
}

.page-id-176 .two-panel-text .col-md-6 {
	display: grid;
	gap: 24px;
}

.tcb-partner {
	background: #ffffff;
	border-radius: 11px;
	box-shadow: 0 6px 20px rgba(0, 20, 40, 0.08);
	padding: 28px;
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 24px;
	align-items: center;
	text-align: left;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tcb-partner:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 32px rgba(0, 20, 40, 0.14);
}

.tcb-partner__logo {
	grid-row: span 2;
	height: 110px;
	border-radius: 8px;
	overflow: hidden;
	background: #eef4f9;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tcb-partner__logo {
	padding: 10px;
}

.tcb-partner__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.tcb-partner h3 {
	font-size: 20px;
	font-weight: 700;
	color: #003e70;
	margin: 0;
	align-self: end;
}

.tcb-partner p {
	font-size: 15px;
	line-height: 1.5;
	color: #212529;
	margin: 0;
	align-self: start;
}

@media (max-width: 767.98px) {
	.page-id-176 .two-panel-text {
		padding: 16px 0 48px !important;
	}

	.page-id-176 .two-panel-text .col-md-6 + .col-md-6 {
		margin-top: 24px;
	}

	.tcb-partner {
		grid-template-columns: 1fr;
		padding: 20px;
		text-align: center;
	}

	.tcb-partner__logo {
		grid-row: auto;
		height: 120px;
	}

	.tcb-partner h3 {
		align-self: auto;
	}
}

/* ---------------------------------------------------------------------------
   Retail Shop, 28 Sept 2026. Three outlet cards in a two panel row; the row's
   two columns are flattened into one three column grid.
   --------------------------------------------------------------------------- */
.page-id-2248 .two-panel-text {
	padding: 24px 0 72px !important;
}

.page-id-2248 .two-panel-text .row.d-flex {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.page-id-2248 .two-panel-text .row.d-flex > .col-md-6 {
	display: contents;
}

.tcb-outlet {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border-radius: 11px;
	overflow: hidden;
	box-shadow: 0 6px 20px rgba(0, 20, 40, 0.08);
	text-align: left;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tcb-outlet:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 32px rgba(0, 20, 40, 0.14);
}

.tcb-outlet__photo {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #d5e3f0;
}

.tcb-outlet__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tcb-outlet__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 24px 26px 26px;
}

.tcb-outlet h3 {
	font-size: 20px;
	font-weight: 700;
	color: #003e70;
	margin: 0 0 6px;
	text-align: left;
}

.tcb-outlet__addr {
	font-size: 15px;
	color: #5b6b7a;
	margin: 0 0 12px;
}

.tcb-outlet__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	font-size: 15px;
	font-weight: 600;
	margin: 0 0 12px;
}

.tcb-outlet__meta a {
	color: #1a59a3;
	text-decoration: none;
}

.tcb-outlet__meta span {
	color: #212529;
}

.tcb-outlet__body > p:not([class]) {
	font-size: 15px;
	line-height: 1.55;
	color: #212529;
	margin: 0 0 20px;
}

.tcb-outlet__btn {
	margin-top: auto;
	align-self: flex-start;
	display: inline-block;
	padding: 12px 22px;
	border-radius: 11px;
	background: #003e70;
	color: #ffffff !important;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none !important;
	transition: background 0.2s ease;
}

.tcb-outlet__btn:hover {
	background: #1a59a3;
}

@media (max-width: 991.98px) {
	.page-id-2248 .two-panel-text .row.d-flex {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 575.98px) {
	.page-id-2248 .two-panel-text {
		padding: 16px 0 48px !important;
	}

	.page-id-2248 .two-panel-text .row.d-flex {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* ---------------------------------------------------------------------------
   Who We Are, 28 Sept 2026. Team as cards (initials, name, role, email) in a
   two panel row flattened into one grid; the butchers note spans the row.
   Closing band with a button.
   --------------------------------------------------------------------------- */
.page-id-2246 .two-panel-text {
	padding: 24px 0 72px !important;
}

.page-id-2246 .two-panel-text .row.d-flex {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.page-id-2246 .two-panel-text .row.d-flex > .col-md-6 {
	display: contents;
}

.tcb-person {
	background: #eef4f9;
	border-radius: 11px;
	padding: 26px 22px;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.tcb-person__initials {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #003e70;
	color: #ffffff;
	font-weight: 700;
	font-size: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 12px;
}

.tcb-person h3 {
	font-size: 18px;
	font-weight: 700;
	color: #003e70;
	margin: 0;
	text-align: left;
}

.tcb-person__role {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #1a59a3;
	margin: 0 0 6px;
}

.tcb-person p:not(.tcb-person__role) {
	font-size: 14px;
	line-height: 1.5;
	color: #212529;
	margin: 0 0 8px;
}

.tcb-person a {
	font-size: 14px;
	color: #1a59a3;
	word-break: break-all;
	margin-top: auto;
}

.tcb-team-note {
	grid-column: 1 / -1;
	font-size: 16px;
	line-height: 1.6;
	color: #212529;
	text-align: center;
	max-width: 880px;
	margin: 12px auto 0;
}

.page-id-2246 [class*="cms-text-center-7-2246"] {
	padding: 72px 0 !important;
}

.page-id-2246 [class*="cms-text-center-7-2246"] h1 {
	color: #ffffff;
	font-size: 36px;
	font-weight: 800;
}

.page-id-2246 [class*="cms-text-center-7-2246"] p {
	color: rgba(255, 255, 255, 0.9);
	font-size: 18px;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

.tcb-btn {
	display: inline-block;
	margin-top: 12px;
	padding: 18px 40px;
	background: #ffffff;
	color: #003e70 !important;
	border-radius: 11px;
	font-weight: 700;
	text-decoration: none !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
	transition: background 0.2s ease, transform 0.2s ease;
}

.tcb-btn:hover {
	background: #3cb2e8;
	transform: translateY(-1px);
}

@media (min-width: 768px) {
	.page-id-2246 [class*="cms-text-with-image-"] .row.d-flex {
		align-items: center !important;
	}
}

@media (max-width: 991.98px) {
	.page-id-2246 .two-panel-text .row.d-flex {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 575.98px) {
	.page-id-2246 .two-panel-text {
		padding: 16px 0 48px !important;
	}

	.page-id-2246 .two-panel-text .row.d-flex {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.page-id-2246 [class*="cms-text-center-7-2246"] {
		padding: 48px 0 !important;
	}

	.page-id-2246 [class*="cms-text-center-7-2246"] h1,
	.page-id-2246 [class*="cms-text-center-7-2246"] p {
		text-align: center !important;
	}

	.tcb-btn {
		display: block;
	}
}

.page-id-2246 [class*="cms-text-center-7-2246"] .tcb-btn,
.page-id-2246 [class*="cms-text-center-7-2246"] .tcb-btn:hover,
body [class*="cms-text-center-"] a.tcb-btn {
	color: #003e70 !important;
}

/* Phone: every card grid sits 24px in from the screen edge. The grids built
   with display: contents lost the column padding, the others had Bootstrap's
   12px, which reads as touching the edge. */
@media (max-width: 767.98px) {
	.page-id-2248 .two-panel-text .container,
	.page-id-2246 .two-panel-text .container,
	.page-id-176 .two-panel-text .container,
	.page-id-178 [class*="cms-text-center-3-178"] .container,
	.page-id-2247 [class*="cms-text-with-image-"] .container,
	.parent-pageid-2377 .tcb-cuts .container {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}

	.page-id-2248 .two-panel-text .row.d-flex,
	.page-id-2246 .two-panel-text .row.d-flex,
	.page-id-176 .two-panel-text .row.d-flex,
	.page-id-178 [class*="cms-text-center-3-178"] .row.m-0,
	.page-id-2247 [class*="cms-text-with-image-"] .row.d-flex {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.page-id-176 .two-panel-text .col-md-6,
	.page-id-178 [class*="cms-text-center-3-178"] .col-12,
	.page-id-2247 [class*="cms-text-with-image-"] .row.d-flex > .col-md-6 {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}