/* ==========================================================================
   CF Fire Doors Ltd - design stylesheet
   ==========================================================================

   Bridges the approved design (CF-Fire-Doors-Website/index.html) onto native
   Salient + WPBakery markup. Every value here is taken from the design file,
   not estimated.

   Everything is scoped to .cf-site (global chrome) or .cf-home (pages carrying
   the sectioned design), both applied by the child theme from a content marker,
   so a duplicated page keeps its styling and no rule can leak onto an unrelated
   page.

   HOW THE DESIGN'S STRUCTURE MAPS ONTO SALIENT

     design <section class="section">   ->  vc_row      .cf-section
     design   <div class="container">   ->  the row's .row_col_wrap_12 child
     design   a CSS grid of cards       ->  vc_row_inner, grid on
                                             .row_col_wrap_12_inner
     design     one card                ->  vc_column_inner holding one element

   Section padding lives on .row_col_wrap_12, NOT on the row: Salient writes
   padding-top / padding-bottom onto the row as an INLINE style from the row's
   own settings, and an inline style beats any rule here.

   DELIBERATE DEVIATIONS FROM THE DESIGN FILE

   1. The design's .hero__stats strip is full-viewport-width while its content
      sits in the 1280px container. Inside a Salient row the strip is already
      inside that container, so it is broken back out with a 100vw rule. The
      page carries overflow-x:hidden (as the design does), so the extra width
      under a vertical scrollbar is clipped rather than scrollable - verified
      with a scrollWidth probe at 1440/1100/900/834/375/360.

   2. Salient's .container is a different thing from the design's .container.
      Nothing here styles a bare .container: the design's container is applied
      to .row_col_wrap_12, and Salient's own .container is only touched inside
      #header-outer.

   CONTENTS
     1  Tokens
     2  Salient container release + section rhythm
     3  Salient resets (clearfix, column widths, wrappers)
     4  Typography helpers
     5  Buttons and arrow links
     6  Top utility bar (Salient secondary header)
     7  Header and navigation (Salient centered-menu)
     8  Off-canvas mobile menu
     9  Hero
     10 Accreditation bar
     11 Who we are
     12 Two paths
     13 Services
     14 Supply band
     15 Sectors
     16 Compliance band
     17 Process
     18 Slider (shared by case studies and reviews)
     19 Case studies
     20 Reviews
     21 Quote / contact and the enquiry form
     22 CTA band
     23 Footer
     24 Mobile action bar
     25 Scroll reveal and reduced motion
     26 Salient specificity tail - MUST STAY LAST
   ========================================================================== */


/* ==========================================================================
   1. TOKENS

   On .cf-site rather than :root so nothing escapes onto wp-admin, the login
   screen or a page that is not part of this design.
   ========================================================================== */
.cf-site {
	/* Brand. #CD0038 was sampled from the client's own logo artwork - see
	   BUILD-NOTES.md in the design package. It is the ONE value the client
	   asked us to get exactly right, so it lives in a single variable. */
	--red: #CD0038;
	--red-700: #AF0030;
	--red-900: #7E0022;
	--red-05: #FFF5F7;
	--red-10: #FFE6EC;
	/* Small red text on the dark sections only. #CD0038 on --ink is 3.3:1 and
	   fails WCAG AA; this tint is 6.5:1. Never swap one for the other. */
	--red-on-dark: #FF5C85;

	/* Neutrals */
	--ink: #0E1116;
	--ink-800: #161B23;
	--ink-700: #222935;
	--slate: #5A6575;
	--slate-2: #687285;      /* 4.9:1 on white - AA for the small uppercase labels */
	--line: #E4E8EE;
	--line-soft: #EEF1F5;
	--paper: #FFFFFF;
	--paper-soft: #F7F8FA;

	/* Type */
	--ff-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
	--ff-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;

	/* Layout */
	--container: 1280px;
	--gutter: clamp(20px, 4vw, 48px);
	--section-y: clamp(64px, 7.5vw, 124px);

	/* Effects */
	--r: 3px;
	--r-lg: 6px;
	--shadow-1: 0 1px 2px rgba(14,17,22,.04), 0 10px 30px -18px rgba(14,17,22,.22);
	--shadow-2: 0 30px 70px -34px rgba(14,17,22,.45);
	--ease: cubic-bezier(.22,.61,.36,1);
}


/* ==========================================================================
   2. SALIENT CONTAINER RELEASE + SECTION RHYTHM

   Salient caps page rows inside .container.main-content at the theme's
   max_container_width plus 90px of side padding. Releasing that container lets
   rows span the real layout width with no 100vw break-out, no negative margins
   and no scrollbar arithmetic - and then ONE rule on .row_col_wrap_12
   reproduces the design's "max-width:1280 centred inside var(--gutter)".
   ========================================================================== */
/* Salient already sets overflow-x:hidden on <html>; this is the body half of
   the same guard, so the hero's 100vw statistics strip is clipped rather than
   scrollable. (A consequence worth knowing: with the root clipped, `vw` units
   resolve against the client width rather than the window, so every clamp() in
   this file lands about 1% below the static design file's value at the same
   window size - 106.9px instead of 108px of section padding at 1440. That is
   Salient's behaviour, not a deviation introduced here.) */
.cf-site {
	overflow-x: hidden;
}

.cf-home .container-wrap .container.main-content {
	max-width: none;
	width: 100%;
	padding: 0;
	margin: 0;
}

.cf-home #content,
.cf-home .container-wrap {
	padding: 0 !important;
	margin: 0 !important;
}

/* Salient puts a bottom margin under the last row of a page. */
.cf-home .container-wrap .row:last-child,
.cf-home .wpb_row:last-child {
	margin-bottom: 0;
}

/* The design's <section>. Backgrounds are painted by Salient on .row-bg inside
   the row, so the row itself stays transparent and full width. */
.cf-home .cf-section {
	position: relative;
	margin-bottom: 0 !important;
}

/* The design's .container, plus the section rhythm. */
.cf-home .cf-section > .row_col_wrap_12 {
	float: none;
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding: var(--section-y) var(--gutter);
}

/* Alternating and dark section backgrounds, exactly as the design names them. */
.cf-home .cf-section--soft { background: var(--paper-soft); }
.cf-home .cf-section--ink {
	background: var(--ink);
	color: #fff;
}

/* A nested .cf-container inside a section would double the padding: the section
   wrapper already IS the container. It is re-activated only where an element
   deliberately breaks out (the hero stats strip). */
.cf-home .cf-section .cf-container {
	max-width: none;
	margin: 0;
	padding: 0;
	width: 100%;
}


/* ==========================================================================
   3. SALIENT RESETS

   Three families of Salient rule fight this design, and all three are silent
   failures rather than obvious ones:

     a. .col / .row clearfixes are display:table pseudo-elements. Inside a CSS
        grid they become grid ITEMS, so a 3-up grid silently renders 5 tracks
        with two empty ones.
     b. .wpb_column keeps its vc_col-sm-N percentage width, so a column inside a
        grid track renders at half the width it was given.
     c. salient-dynamic-styles rewrites those percentages again at 690px and
        999px, which re-wraps a grid on mobile after it looked correct.
   ========================================================================== */
.cf-home .cf-section > .row_col_wrap_12::before,
.cf-home .cf-section > .row_col_wrap_12::after,
.cf-home .cf-grid > .row_col_wrap_12_inner::before,
.cf-home .cf-grid > .row_col_wrap_12_inner::after,
.cf-home .cf-flex > .row_col_wrap_12_inner::before,
.cf-home .cf-flex > .row_col_wrap_12_inner::after {
	display: none !important;
	content: none !important;
}

.cf-home .cf-grid,
.cf-home .cf-flex {
	margin-bottom: 0 !important;
}

/* The inner ROW itself, not just its column wrapper.
   Salient's grid system gives .vc_row-fluid.inner_row a width of 98% with a 1%
   side margin, so a grid authored as an inner row comes out 2% narrower than
   the section it sits in - 1160px inside a 1184px container. That reads as
   "the cards are slightly too small" and nothing else, which is exactly the
   kind of 24px error that never gets found by eye. */
.cf-home .cf-grid,
.cf-home .cf-flex {
	width: 100% !important;
	margin-inline: 0 !important;
	padding-inline: 0 !important;
}

.cf-home .cf-grid > .row_col_wrap_12_inner,
.cf-home .cf-flex > .row_col_wrap_12_inner {
	float: none;
	width: 100% !important;
	margin-inline: 0 !important;
	padding: 0 !important;
}

/* Columns inside a gridded or flexed wrapper must lose Salient's percentage
   width, its float and its gutter padding, or the grid never gets control. */
.cf-home .cf-grid .wpb_column,
.cf-home .cf-flex .wpb_column {
	float: none !important;
	padding: 0 !important;
	margin: 0 !important;
	min-width: 0;
}

.cf-home .cf-grid .wpb_column { width: 100% !important; }
.cf-home .cf-flex .wpb_column { width: auto !important; }

/* Salient's grid-system.css puts `padding: 0 1%` on the column inside a
   full-width row (`.vc_row-fluid > .span_12 .wpb_column`). The design has no
   such gutter - its container's 1184px of content is the full width the grids
   span - so a 3-up grid rendered 1160px wide and every card came out 8px
   narrow. It is a 2% error that looks like nothing and measures like something.
   .cf-form is excluded because that column IS the white card and keeps its own
   padding. */
.cf-home .cf-section > .row_col_wrap_12 > .wpb_column:not(.cf-form) {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Salient adds bottom margin to column inners and wrappers; the design controls
   all vertical rhythm itself. */
.cf-home .cf-section .vc_column-inner,
.cf-home .cf-section .wpb_column > .vc_column-inner {
	padding: 0 !important;
}

.cf-home .cf-section .wpb_wrapper > *:last-child { margin-bottom: 0; }

.cf-home .cf-section .wpb_content_element,
.cf-home .cf-section .wpb_text_column,
.cf-home .cf-section .wpb_row {
	margin-bottom: 0;
}

/* Full-height columns for the equal-height two-path and about rows. */
.cf-home .cf-grid .wpb_column,
.cf-home .cf-grid .vc_column-inner,
.cf-home .cf-grid .wpb_wrapper {
	height: 100%;
}

/* Base typography. Salient sets body font-family and a 16px/1.6 rhythm from
   Theme Options; the design is 17px/1.7 Inter. Both are set in Theme Options
   too, but stating it here means the design does not silently change if someone
   edits Typography later. */
.cf-site,
.cf-site body {
	font-family: var(--ff-body);
	font-size: 17px;
	line-height: 1.7;
	color: var(--ink);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.cf-site h1,
.cf-site h2,
.cf-site h3,
.cf-site h4,
.cf-site h5 {
	font-family: var(--ff-display);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.08;
	margin: 0;
	color: inherit;
	text-transform: none;
}

.cf-site p { margin: 0; }
.cf-site img { max-width: 100%; height: auto; display: block; }
.cf-site a { color: inherit; text-decoration: none; }
.cf-site ul { margin: 0; padding: 0; list-style: none; }
.cf-site :focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.cf-site ::selection { background: var(--red); color: #fff; }

/* Every icon in the build is a <use> of the sprite; they must scale with the
   font and never be squashed by a flex parent. */
.cf-site svg:not(#icons) { width: 1em; height: 1em; flex: none; }
.cf-site svg#icons { position: absolute; width: 0; height: 0; }


/* ==========================================================================
   4. TYPOGRAPHY HELPERS
   ========================================================================== */
.cf-site .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--red);
	margin-bottom: 20px;
}
.cf-site .eyebrow::before {
	content: "";
	width: 26px;
	height: 2px;
	background: var(--red);
	flex: none;
}
.cf-site .cf-section--ink .eyebrow { color: var(--red-on-dark); }
.cf-site .cf-section--ink .eyebrow::before { background: var(--red-on-dark); }

.cf-site .h1 { font-size: clamp(34px, 4.6vw, 58px); line-height: 1.04; letter-spacing: -.028em; }
.cf-site .h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -.025em; }
.cf-site .h3 { font-size: clamp(20px, 1.6vw, 25px); line-height: 1.2; letter-spacing: -.018em; }
.cf-site .h4 { font-size: 18px; line-height: 1.3; letter-spacing: -.01em; font-weight: 700; }

.cf-site .lead {
	font-size: clamp(17px, 1.35vw, 20px);
	line-height: 1.65;
	color: var(--slate);
}
.cf-site .cf-section--ink .lead { color: rgba(255,255,255,.72); }
.cf-site .body-muted { color: var(--slate); }
.cf-site .cf-section--ink .body-muted { color: rgba(255,255,255,.66); }

.cf-site .section-head { max-width: 720px; }
.cf-site .section-head--center {
	max-width: 860px;
	margin-inline: auto;
	text-align: center;
}
.cf-site .section-head--center .eyebrow { justify-content: center; }
.cf-site .section-head .lead { margin-top: 20px; }

/* The icon tile some headings carry (the supply band, the form header). */
.cf-site .cf-head__ico {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: var(--r);
	background: var(--red);
	color: #fff;
	margin-bottom: 18px;
}
.cf-site .cf-head__ico svg { width: 21px; height: 21px; }

/* "Heading left, button right" - the design's .section-top. Built as a flex
   inner row so the button is a real, draggable builder element. */
.cf-home .cf-section-top > .row_col_wrap_12_inner {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
}
.cf-home .cf-section-top .wpb_column:first-child { flex: 1 1 420px; }


/* ==========================================================================
   5. BUTTONS AND ARROW LINKS
   ========================================================================== */
.cf-site .btn {
	--btn-bg: var(--red);
	--btn-fg: #fff;
	--btn-bd: var(--red);
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 28px;
	border-radius: var(--r);
	background: var(--btn-bg);
	color: var(--btn-fg);
	border: 2px solid var(--btn-bd);
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.cf-site .btn svg { width: 16px; height: 16px; flex: none; transition: transform .35s var(--ease); }
.cf-site .btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(205,0,56,.65); color: var(--btn-fg); }
.cf-site .btn:hover svg { transform: translateX(4px); }

.cf-site .btn--dark { --btn-bg: var(--ink); --btn-bd: var(--ink); }
.cf-site .btn--dark:hover { --btn-bg: var(--red); --btn-bd: var(--red); }
.cf-site .btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line); }
.cf-site .btn--ghost:hover { --btn-bd: var(--ink); box-shadow: none; }
.cf-site .btn--ghost-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.32); }
.cf-site .btn--ghost-light:hover { --btn-bd: #fff; --btn-bg: rgba(255,255,255,.08); box-shadow: none; }
.cf-site .btn--white { --btn-bg: #fff; --btn-fg: var(--red); --btn-bd: #fff; }
.cf-site .btn--white:hover { box-shadow: 0 16px 34px -16px rgba(0,0,0,.5); }
/* WhatsApp green with a near-black label: white on #25D366 is 1.98:1 and fails. */
.cf-site .btn--wa { --btn-bg: #25D366; --btn-bd: #25D366; --btn-fg: #04310F; }
.cf-site .btn--wa:hover { box-shadow: 0 14px 28px -14px rgba(37,211,102,.7); }

.cf-site .btn--sm { padding: 12px 20px; font-size: 13px; }
.cf-site .btn--block { width: 100%; justify-content: center; }

/* A long label (the tenders email) must not force a grid track wider than the
   viewport on a phone. */
.cf-site .cf-grid > .row_col_wrap_12_inner > *,
.cf-site .cf-flex > .row_col_wrap_12_inner > * { min-width: 0; }

.cf-site .link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: 13.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--red);
}
.cf-site .link-arrow svg { width: 15px; height: 15px; transition: transform .35s var(--ease); }
.cf-site .link-arrow:hover svg { transform: translateX(5px); }
.cf-site .link-arrow:hover { color: var(--red); }

/* Button groups are flex inner rows so each button stays a draggable element. */
.cf-home .cf-actions > .row_col_wrap_12_inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}


/* ==========================================================================
   6. TOP UTILITY BAR

   Salient's "Header With Secondary Navigation Bar" renders #header-secondary-outer
   with, in source order: the social icons, the centre text, then the secondary
   menu. The design wants badge + tagline on the LEFT and phone, email and social
   on the RIGHT, so the flex order is reassigned rather than the markup changed -
   that keeps all three pieces editable in their normal places (Theme Options and
   Appearance > Menus).
   ========================================================================== */
.cf-site #header-secondary-outer {
	background: var(--ink) !important;
	border: 0 !important;
	font-family: var(--ff-body);
	font-size: 13.5px;
	line-height: 1.5;
}
.cf-site #header-secondary-outer .container {
	max-width: var(--container) !important;
	width: 100% !important;
	padding-inline: var(--gutter) !important;
	margin-inline: auto !important;
}
.cf-site #header-secondary-outer nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	/* Salient sets its own min-height here from the secondary-bar options, which
	   wins without this - the bar came out 2px short of the design's 44px. */
	min-height: 44px !important;
	float: none !important;
	width: 100%;
}
.cf-site #header-secondary-outer nav::before,
.cf-site #header-secondary-outer nav::after { display: none !important; content: none !important; }

/* Left: the badge and tagline, from Theme Options > Header > Secondary bar. */
.cf-site #header-secondary-outer .nectar-center-text {
	order: 1;
	margin: 0 auto 0 0 !important;
	padding: 0 !important;
	float: none !important;
	display: flex;
	align-items: center;
	gap: 12px;
	color: rgba(255,255,255,.74);
	font-weight: 500;
	text-align: left;
	width: auto !important;
	position: static !important;
	transform: none !important;
}
.cf-site .utility__badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: #fff;
	font-family: var(--ff-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	background: var(--red);
	padding: 5px 10px;
	border-radius: 2px;
	white-space: nowrap;
}
.cf-site .utility__badge svg { width: 14px; height: 14px; }

/* Right: the secondary menu (phone, email). */
.cf-site #header-secondary-outer ul.sf-menu {
	order: 2;
	display: flex;
	align-items: center;
	gap: 22px;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.cf-site #header-secondary-outer ul.sf-menu > li { margin: 0 !important; padding: 0 !important; }
.cf-site #header-secondary-outer ul.sf-menu > li > a {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	padding: 0 !important;
	color: rgba(255,255,255,.74) !important;
	font-family: var(--ff-body);
	font-size: 13.5px !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	line-height: 1.5 !important;
	opacity: 1 !important;
	transition: color .25s;
}
.cf-site #header-secondary-outer ul.sf-menu > li > a:hover { color: #fff !important; }
.cf-site #header-secondary-outer ul.sf-menu > li > a::before,
.cf-site #header-secondary-outer ul.sf-menu > li > a::after { display: none !important; content: none !important; }
.cf-site #header-secondary-outer .cf-mi__tile { display: inline-flex; }
.cf-site #header-secondary-outer .cf-mi__ico { width: 15px; height: 15px; color: var(--red); }

/* Right: the social marks. They are menu items rather than Salient's own social
   icon list, so they use this build's sprite instead of Font Awesome and stay
   editable in Appearance > Menus alongside the phone and email links. */
.cf-site #header-secondary-outer ul.sf-menu > li.cf-util-social { margin-left: -16px !important; }
.cf-site #header-secondary-outer ul.sf-menu > li.cf-util-social--first {
	margin-left: 0 !important;
	padding-left: 20px !important;
	border-left: 1px solid rgba(255,255,255,.14);
}
.cf-site #header-secondary-outer ul.sf-menu > li.cf-util-social > a {
	width: 30px;
	height: 30px;
	justify-content: center;
	border-radius: 2px;
	gap: 0;
	transition: background .25s, color .25s;
}
.cf-site #header-secondary-outer ul.sf-menu > li.cf-util-social > a:hover { background: var(--red); color: #fff !important; }
.cf-site #header-secondary-outer ul.sf-menu > li.cf-util-social .cf-mi__ico { width: 15px; height: 15px; color: inherit; }
/* The label is the accessible name only - the design shows the mark alone. */
.cf-site #header-secondary-outer ul.sf-menu > li.cf-util-social .cf-mi__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* The design drops the utility bar below 1100px; its phone, email and address
   are already in the off-canvas drawer, so nothing is lost.
   The selector carries two ids on purpose. Salient ships
   `body.material #header-secondary-outer[data-mobile="display_full"]
   {display:block !important}` at (1,2,1) inside a max-width:999px query, which
   beat the obvious `.cf-site #header-secondary-outer` (1,1,0) and left the bar
   on screen at 375px, overflowing to 737px wide inside a 375px viewport. */
@media (max-width: 1100px) {
	.cf-site #header-outer #header-secondary-outer[data-mobile] { display: none !important; }
}


/* ==========================================================================
   7. HEADER AND NAVIGATION

   Salient's "Centered Menu" format gives exactly the design's arrangement:
   #logo on the left, ul.sf-menu centred, ul.buttons on the right holding the
   "Request a Quote" item from the Pull Right menu.
   ========================================================================== */
.cf-site #header-outer {
	background: #fff !important;
	border-bottom: 1px solid var(--line);
	box-shadow: none !important;
	padding: 0 !important;
	transition: box-shadow .3s, border-color .3s;
}
.cf-site #header-outer.cf-stuck {
	box-shadow: 0 10px 30px -22px rgba(14,17,22,.4);
	border-color: transparent;
}

.cf-site #header-outer header#top .container {
	max-width: var(--container) !important;
	width: 100% !important;
	padding-inline: var(--gutter) !important;
	margin-inline: auto !important;
}

.cf-site #header-outer header#top .row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	min-height: 88px;
	transition: min-height .3s var(--ease);
	padding: 0 !important;
}
.cf-site #header-outer.cf-stuck header#top .row { min-height: 74px; }
.cf-site #header-outer header#top .row::before,
.cf-site #header-outer header#top .row::after { display: none !important; content: none !important; }

.cf-site #header-outer header#top .col.span_3,
.cf-site #header-outer header#top .col.span_9 {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
}
.cf-site #header-outer header#top .col.span_9 {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
}

.cf-site #header-outer #logo {
	display: block;
	flex: none;
	margin: 0 !important;
	line-height: 0;
}
.cf-site #header-outer #logo img {
	height: 46px !important;
	width: auto !important;
	max-height: none !important;
	transition: height .3s var(--ease);
}
.cf-site #header-outer.cf-stuck #logo img { height: 40px !important; }

/* The main menu, centred between the logo and the button. */
.cf-site #header-outer header#top nav {
	display: flex;
	align-items: center;
	flex: 1;
	justify-content: center;
	float: none !important;
	width: auto !important;
}
.cf-site #header-outer header#top nav > ul.sf-menu:not(.buttons) {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	float: none !important;
	margin: 0 !important;
	flex: 1;
}
.cf-site #header-outer header#top nav > ul.sf-menu:not(.buttons) > li { margin: 0 !important; }

.cf-site #header-outer header#top nav > ul.sf-menu:not(.buttons) > li > a {
	position: relative;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 6px;
	/* Padding pulled in slightly as the type went up, so the row gains width
	   from the letters rather than from the gaps between them. */
	padding: 12px 14px !important;
	white-space: nowrap;
	text-align: center;
	font-family: var(--ff-display) !important;
	font-weight: 600 !important;
	/* Larger and uppercase, at the client's request. Uppercase needs a little
	   tracking or the caps set too tight to read at a glance. */
	font-size: 16px !important;
	letter-spacing: .05em !important;
	text-transform: uppercase !important;
	line-height: 1.2 !important;
	color: var(--ink) !important;
	opacity: 1 !important;
	transition: color .25s;
}

/* Salient draws its own animated underline with ::before on every top-level
   link. It is replaced here rather than hidden, because hiding it and adding a
   second pseudo would leave two competing rules on the same element. Any future
   nav rule must repeat this full selector or it loses on specificity. */
.cf-site #header-outer header#top nav > ul.sf-menu:not(.buttons) > li > a::before,
.cf-site #header-outer header#top nav > ul.sf-menu:not(.buttons) > li > a::after {
	content: "" !important;
	position: absolute;
	/* Matched to the link's own horizontal padding so the rule sits exactly
	   under the word. Hardcoding a number here means the underline drifts out
	   of alignment the moment that padding changes. */
	left: 14px;
	right: 14px;
	bottom: 4px;
	top: auto;
	width: auto !important;
	height: 2px !important;
	background: var(--red) !important;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .35s var(--ease);
	opacity: 1 !important;
}
.cf-site #header-outer header#top nav > ul.sf-menu:not(.buttons) > li > a::after { display: none !important; content: none !important; }

/* `cf-active` is set by the scrollspy in cf-site.js from the section actually
   on screen. WordPress's own current-* classes are NOT used here: on a one-page
   site every item points at this page, so Home and Services were marked current
   permanently and sat red while the visitor was looking at the hero. They are
   stripped in functions.php. */
.cf-site #header-outer header#top nav > ul.sf-menu:not(.buttons) > li:hover > a,
.cf-site #header-outer header#top nav > ul.sf-menu:not(.buttons) > li:focus-within > a,
.cf-site #header-outer header#top nav > ul.sf-menu:not(.buttons) > li.cf-active > a { color: var(--red) !important; }

.cf-site #header-outer header#top nav > ul.sf-menu:not(.buttons) > li:hover > a::before,
.cf-site #header-outer header#top nav > ul.sf-menu:not(.buttons) > li:focus-within > a::before,
.cf-site #header-outer header#top nav > ul.sf-menu:not(.buttons) > li.cf-active > a::before { transform: scaleX(1); }

/* Salient's dropdown arrow, restyled to the design's chevron behaviour. */
.cf-site #header-outer header#top nav > ul.sf-menu:not(.buttons) > li.menu-item-has-children > a .sf-sub-indicator {
	position: static;
	display: inline-flex;
	margin: 0;
	width: 11px;
	height: 11px;
	transition: transform .3s var(--ease);
}
.cf-site #header-outer header#top nav > ul.sf-menu:not(.buttons) > li.menu-item-has-children:hover > a .sf-sub-indicator,
.cf-site #header-outer header#top nav > ul.sf-menu:not(.buttons) > li.menu-item-has-children:focus-within > a .sf-sub-indicator { transform: rotate(180deg); }

/* ---- Services dropdown: a simple icon list, not a mega menu ---- */
.cf-site #header-outer header#top nav > ul.sf-menu:not(.buttons) ul.sub-menu {
	width: 332px !important;
	left: 50% !important;
	top: calc(100% + 12px) !important;
	transform: translate(-50%, 10px) !important;
	background: #fff !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--r-lg) !important;
	box-shadow: var(--shadow-2) !important;
	padding: 8px !important;
	opacity: 0;
	visibility: hidden;
	transition: opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
}
.cf-site #header-outer header#top nav > ul.sf-menu:not(.buttons) > li:hover > ul.sub-menu,
.cf-site #header-outer header#top nav > ul.sf-menu:not(.buttons) > li:focus-within > ul.sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0) !important;
	display: block !important;
}

/* A gap between the trigger and the panel would drop the hover; this bridges it. */
.cf-site #header-outer header#top nav > ul.sf-menu:not(.buttons) > li.menu-item-has-children > ul.sub-menu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -14px;
	height: 14px;
}

.cf-site #header-outer header#top nav ul.sub-menu li { width: 100%; margin: 0 !important; }
.cf-site #header-outer header#top nav ul.sub-menu li a {
	display: flex !important;
	align-items: center;
	gap: 12px;
	padding: 10px 12px !important;
	border: 0 !important;
	border-radius: var(--r);
	font-family: var(--ff-display) !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	line-height: 1.35 !important;
	letter-spacing: -.005em !important;
	text-transform: none !important;
	color: var(--ink) !important;
	transition: background .22s, color .22s;
}
.cf-site #header-outer header#top nav ul.sub-menu li a:hover { background: var(--red-05) !important; color: var(--red) !important; }

/* The icon tile, injected from a cf-ico-* class on the menu item. */
.cf-site .cf-mi__tile {
	width: 32px;
	height: 32px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: var(--r);
	background: var(--red-05);
	color: var(--red);
	transition: background .22s, color .22s;
}
.cf-site #header-outer header#top nav ul.sub-menu li a:hover .cf-mi__tile { background: var(--red); color: #fff; }
.cf-site .cf-mi__tile svg { width: 17px; height: 17px; }
.cf-site .cf-mi__label { flex: 1; min-width: 0; }

/* ---- Header CTA (the Pull Right menu) ---- */
.cf-site #header-outer header#top ul.buttons {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: none;
	float: none !important;
	margin: 0 !important;
}
.cf-site #header-outer header#top ul.buttons > li { margin: 0 !important; }
.cf-site #header-outer header#top ul.buttons > li.cf-nav-cta > a {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	padding: 16px 28px !important;
	border-radius: var(--r);
	background: var(--red) !important;
	color: #fff !important;
	border: 2px solid var(--red);
	font-family: var(--ff-display) !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	letter-spacing: .06em !important;
	text-transform: uppercase !important;
	line-height: 1 !important;
	white-space: nowrap;
	opacity: 1 !important;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.cf-site #header-outer header#top ul.buttons > li.cf-nav-cta > a::before,
.cf-site #header-outer header#top ul.buttons > li.cf-nav-cta > a::after { display: none !important; content: none !important; }
.cf-site #header-outer header#top ul.buttons > li.cf-nav-cta > a:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 28px -14px rgba(205,0,56,.65);
}
.cf-site #header-outer header#top ul.buttons > li.cf-nav-cta .cf-mi__tile {
	width: auto;
	height: auto;
	background: none;
	color: inherit;
}
.cf-site #header-outer header#top ul.buttons > li.cf-nav-cta .cf-mi__ico { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.cf-site #header-outer header#top ul.buttons > li.cf-nav-cta > a:hover .cf-mi__ico { transform: translateX(4px); }

/* Salient's search / cart / account items are not used in this design. */
.cf-site #header-outer header#top ul.buttons > li#search-btn,
.cf-site #header-outer header#top ul.buttons > li.nectar-woo-cart,
.cf-site #header-outer .mobile-search,
.cf-site #header-outer .mobile-user-account,
.cf-site #header-outer #mobile-cart-link { display: none !important; }

/* Below 1100px the nav collapses to the off-canvas toggle, but the quote CTA
   stays visible (the design keeps it down to 560px). */
@media (max-width: 1100px) {
	.cf-site #header-outer header#top nav > ul.sf-menu:not(.buttons) { display: none !important; }
	.cf-site #header-outer header#top .row { min-height: 74px; }
	.cf-site #header-outer header#top ul.buttons { gap: 10px; }
	.cf-site #header-outer header#top ul.buttons > li.cf-nav-cta > a {
		padding: 13px 20px !important;
		font-size: 13px !important;
	}
}
@media (max-width: 560px) {
	.cf-site #header-outer header#top ul.buttons > li.cf-nav-cta { display: none !important; }
}

/* ---- Burger ---- */
.cf-site #header-outer .slide-out-widget-area-toggle { margin: 0 !important; }
.cf-site #header-outer .slide-out-widget-area-toggle > div > a {
	width: 46px;
	height: 46px;
	display: grid !important;
	place-items: center;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 0 !important;
}
.cf-site #header-outer .slide-out-widget-area-toggle .lines-button .lines,
.cf-site #header-outer .slide-out-widget-area-toggle .lines-button .lines::before,
.cf-site #header-outer .slide-out-widget-area-toggle .lines-button .lines::after {
	background-color: var(--ink) !important;
	width: 20px !important;
	height: 2px !important;
}
@media (min-width: 1101px) {
	.cf-site #header-outer .slide-out-widget-area-toggle { display: none !important; }
}

/* #header-space MUST stay.
   Salient's header is position:fixed, not sticky, so #header-space is the
   element that reserves its height in the flow. Hiding it (the obvious "remove
   the gap" reaction) pulls the hero up to y=0 and the top of the hero renders
   underneath the header - which looks deliberate on a dark hero and is not.
   The design's header is sticky and occupies flow space; this is Salient's
   equivalent of that. */
.cf-site #header-space { background-color: transparent; }


/* ==========================================================================
   8. OFF-CANVAS MOBILE MENU

   Salient's `fullscreen-alt` off-canvas, chosen in Salient > Header > Off
   Canvas Menu. This section is COLOUR AND TYPE ONLY - deliberately the same
   shape as the reference build at /gandg.

   There are no width, box-sizing, flex or position overrides here, and nothing
   is injected into the panel. Salient's own layout is correct. Three rounds of
   trying to improve on it - a contact card, a forced 420px drawer, a scrim, a
   visibility mirror - are what broke this menu, each fix creating the next
   fault. If something looks wrong here, change a Salient OPTION or a colour.
   Do not add layout.
   ========================================================================== */

/* The panel CANNOT be painted: fullscreen-legacy.css sets
   `#slide-out-widget-area.fullscreen-alt { background: transparent !important }`.
   The reference build paints .inner-wrap and .off-canvas-menu-container
   instead, and that is what is done here.

   How opaque the menu is comes from a Salient OPTION, not from CSS: the
   "overlay opacity" setting puts a class on -bg, and Salient maps it to
   solid = 1, dark = .93, medium = .6, light = .4. It was on `light`, which is
   why the page showed through the menu. It is now `solid`. */
.cf-site #slide-out-widget-area-bg.fullscreen-alt,
.cf-site #slide-out-widget-area .inner-wrap,
.cf-site #slide-out-widget-area .off-canvas-menu-container {
	background-color: var(--paper) !important;
}

.cf-site #slide-out-widget-area .off-canvas-menu-container .menu > li > a {
	font-family: var(--ff-display) !important;
	font-weight: 700 !important;
	font-size: clamp(1.3rem, 5.4vw, 1.7rem) !important;
	line-height: 1.25 !important;
	letter-spacing: -.015em;
	color: var(--ink) !important;
	padding: 13px 0 !important;
	transition: color .25s ease;
}
.cf-site #slide-out-widget-area .off-canvas-menu-container .menu > li > a:hover,
.cf-site #slide-out-widget-area .off-canvas-menu-container .menu > li > a:focus,
/* The section currently on screen, set by the scrollspy in cf-site.js. */
.cf-site #slide-out-widget-area .off-canvas-menu-container .menu > li.cf-active > a {
	color: var(--red) !important;
}

/* The services list and Salient's own "Back" row sit a step quieter. */
.cf-site #slide-out-widget-area .off-canvas-menu-container .sub-menu li a {
	font-family: var(--ff-display) !important;
	font-weight: 600 !important;
	font-size: 1.05rem !important;
	color: var(--slate) !important;
	padding: 11px 0 !important;
}
.cf-site #slide-out-widget-area .off-canvas-menu-container .sub-menu li a:hover {
	color: var(--red) !important;
}

/* The close X, in the brand's ink. */
.cf-site #slide-out-widget-area .slide_out_area_close .close-line {
	background-color: var(--ink) !important;
}

/* Services carries a + so it reads as having a submenu. fullscreen-alt draws no
   arrow of its own - the parent link IS the drill-down control - so without
   this there is nothing to say the item opens rather than navigates. */
.cf-site #slide-out-widget-area .off-canvas-menu-container .menu > li.menu-item-has-children > a::after {
	content: "+";
	display: inline-block;
	margin-left: .38em;
	color: var(--red);
	font-weight: 600;
}

/* --- The quote button, email and social marks ----------------------------
   These are MENU ITEMS in Appearance > Menus > CF Mobile, not markup injected
   into the panel. The icons come from a `cf-ico-<name>` class on the item,
   read by cf_menu_item_icon(), which is the same mechanism the top bar's
   contact row uses. What follows styles those items; the panel's layout is
   still entirely Salient's. */
.cf-site #slide-out-widget-area .off-canvas-menu-container .menu > li.cf-nav-cta { margin-top: 20px; }
.cf-site #slide-out-widget-area .off-canvas-menu-container .menu > li.cf-nav-cta > a {
	display: inline-block !important;
	background: var(--red) !important;
	color: #fff !important;
	font-size: 1.05rem !important;
	line-height: 1 !important;
	padding: 16px 34px !important;
	border-radius: var(--r) !important;
}
.cf-site #slide-out-widget-area .off-canvas-menu-container .menu > li.cf-nav-cta > a:hover,
.cf-site #slide-out-widget-area .off-canvas-menu-container .menu > li.cf-nav-cta > a:focus {
	background: var(--ink) !important;
	color: #fff !important;
}
/* The + belongs to dropdown parents only, never to these. */
.cf-site #slide-out-widget-area .off-canvas-menu-container .menu > li.cf-nav-cta > a::after,
.cf-site #slide-out-widget-area .off-canvas-menu-container .menu > li.cf-nav-mail > a::after,
.cf-site #slide-out-widget-area .off-canvas-menu-container .menu > li.cf-nav-social > a::after {
	content: none;
}

.cf-site #slide-out-widget-area .off-canvas-menu-container .menu > li.cf-nav-mail > a {
	display: inline-flex !important;
	align-items: center;
	gap: 9px;
	font-size: 1rem !important;
	font-weight: 600 !important;
	color: var(--slate) !important;
	padding: 12px 0 !important;
}
.cf-site #slide-out-widget-area .off-canvas-menu-container .menu > li.cf-nav-mail > a:hover {
	color: var(--red) !important;
}
.cf-site #slide-out-widget-area .off-canvas-menu-container .menu > li.cf-nav-mail .cf-mi__ico {
	width: 17px;
	height: 17px;
	color: var(--red);
	flex: none;
}

/* The three marks sit on one row rather than stacking like the nav above them.
   font-size: 0 hides the label visually while leaving it for screen readers,
   which is why each one still announces as "Instagram", "Facebook" and so on. */
.cf-site #slide-out-widget-area .off-canvas-menu-container .menu > li.cf-nav-social {
	display: inline-block !important;
	margin: 10px 4px 0 !important;
}
/* Drilling into Services puts `subview` on the list and Salient hides the
   top-level items. These marks set `display` on the LI rather than the link,
   so that !important also beat the hiding and they hung around underneath the
   services list. They have to opt back out explicitly. */
.cf-site #slide-out-widget-area .off-canvas-menu-container .menu.subview > li.cf-nav-social {
	display: none !important;
}
.cf-site #slide-out-widget-area .off-canvas-menu-container .menu > li.cf-nav-social > a {
	display: grid !important;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0 !important;
	border: 1px solid var(--line);
	border-radius: var(--r);
	font-size: 0 !important;
	color: var(--ink) !important;
	transition: background .25s, border-color .25s, color .25s;
}
.cf-site #slide-out-widget-area .off-canvas-menu-container .menu > li.cf-nav-social > a .cf-mi__ico {
	width: 19px;
	height: 19px;
}
.cf-site #slide-out-widget-area .off-canvas-menu-container .menu > li.cf-nav-social > a:hover,
.cf-site #slide-out-widget-area .off-canvas-menu-container .menu > li.cf-nav-social > a:focus {
	background: var(--red);
	border-color: var(--red);
	color: #fff !important;
}


/* ==========================================================================
   9. HERO
   ========================================================================== */
.cf-home .cf-hero {
	background: var(--ink);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

/* Salient paints the row's background image on a nested .row-bg child, not on
   the row, so the design's .hero__bg opacity and gradient go there. */
.cf-home .cf-hero .row-bg { opacity: .6; }
.cf-home .cf-hero .row-bg-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
	background:
		linear-gradient(100deg, rgba(14,17,22,.97) 0%, rgba(14,17,22,.9) 34%, rgba(14,17,22,.52) 64%, rgba(14,17,22,.74) 100%),
		radial-gradient(70% 90% at 10% 108%, rgba(205,0,56,.45) 0%, transparent 60%);
}

/* The faint six-column rule grid behind the hero copy. */
.cf-home .cf-hero > .row_col_wrap_12 {
	position: relative;
	z-index: 3;
	padding-top: 0;
	padding-bottom: 0;
}
.cf-home .cf-hero > .row_col_wrap_12::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: .55;
	background-image: linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
	background-size: calc(100% / 6) 100%;
	display: block !important;
}

.cf-home .cf-hero .hero__inner {
	padding-block: clamp(70px, 9.5vw, 138px) clamp(54px, 6.5vw, 92px);
	max-width: 840px;
	position: relative;
}

.cf-site .hero__tag {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	margin-bottom: 26px;
	padding: 7px 18px 7px 7px;
	border: 1px solid rgba(255,255,255,.18);
	border-radius: 100px;
	background: rgba(255,255,255,.05);
	font-size: 13px;
	color: rgba(255,255,255,.86);
	font-weight: 500;
	line-height: 1.4;
}
.cf-site .hero__tag b {
	font-family: var(--ff-display);
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	background: var(--red);
	color: #fff;
	padding: 5px 11px;
	border-radius: 100px;
	flex: none;
}

.cf-home .cf-hero .section-head { max-width: none; }
.cf-home .cf-hero h1 {
	font-size: clamp(40px, 5.8vw, 76px);
	line-height: 1;
	letter-spacing: -.035em;
	font-weight: 900;
	color: #fff;
}
.cf-home .cf-hero h1 em {
	font-style: normal;
	color: var(--red);
	position: relative;
	white-space: nowrap;
}
.cf-home .cf-hero h1 em::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: .05em;
	height: .07em;
	background: var(--red);
	opacity: .3;
}
.cf-home .cf-hero .section-head .lead {
	margin-top: 26px;
	max-width: 655px;
	font-size: clamp(16.5px, 1.4vw, 19.5px);
	line-height: 1.62;
	color: rgba(255,255,255,.76);
}

.cf-home .cf-hero .cf-actions > .row_col_wrap_12_inner { margin-top: 38px; }

.cf-site .hero__proof {
	display: grid;
	gap: 13px;
	margin-top: 40px;
	padding-top: 28px;
	border-top: 1px solid rgba(255,255,255,.13);
}
.cf-site .hero__proof li {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	color: rgba(255,255,255,.78);
	font-weight: 500;
}
.cf-site .hero__proof svg { width: 17px; height: 17px; color: var(--red); flex: none; }

/* ---- The statistics strip ----
   In the design this is a full-viewport-width band inside the hero section. In
   a Salient row it is already inside the 1280px container, so it is broken back
   out. The page carries overflow-x:hidden, so the few pixels of 100vw that sit
   under a vertical scrollbar are clipped rather than scrollable. */
.cf-site .hero__stats {
	position: relative;
	border-top: 1px solid rgba(255,255,255,.12);
	background: rgba(255,255,255,.03);
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
}
.cf-home .cf-hero .hero__stats .cf-container {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
	width: 100%;
}
.cf-site .hero__stats ul { display: grid; grid-template-columns: repeat(4, 1fr); }
.cf-site .hero__stats li { padding: 30px 32px; border-left: 1px solid rgba(255,255,255,.1); }
.cf-site .hero__stats li:first-child { border-left: 0; padding-left: 0; }
.cf-site .hero__stats b {
	display: block;
	font-family: var(--ff-display);
	font-weight: 800;
	font-size: clamp(24px, 2.4vw, 34px);
	letter-spacing: -.025em;
	line-height: 1;
	color: #fff;
}
.cf-site .hero__stats b i { font-style: normal; color: var(--red); }
.cf-site .hero__stats span {
	display: block;
	margin-top: 9px;
	font-size: 13.5px;
	line-height: 1.45;
	color: rgba(255,255,255,.58);
}

@media (max-width: 900px) {
	.cf-site .hero__stats ul { grid-template-columns: 1fr 1fr; }
	.cf-site .hero__stats li { padding: 24px 0 24px 24px; }
	.cf-site .hero__stats li:nth-child(odd) { border-left: 0; padding-left: 0; }
	.cf-site .hero__stats li:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.1); }
}


/* ==========================================================================
   10. ACCREDITATION BAR
   ========================================================================== */
/* Tinted, so the white About section below it starts the client's
   white / colour / white / colour sequence cleanly. This rule has to carry the
   colour itself: it is later in the file than `.cf-section--soft` and matches
   at the same specificity, so adding that class to the row would lose here. */
.cf-home .cf-accr {
	border-bottom: 1px solid var(--line);
	background: var(--paper-soft);
}
.cf-home .cf-accr > .row_col_wrap_12 { padding-block: 0; }

.cf-site .accr__inner {
	display: flex;
	align-items: center;
	gap: clamp(24px, 4vw, 56px);
	/* Deeper band to carry the larger logos without crowding them. */
	padding-block: 38px;
}
.cf-site .accr__label {
	flex: none;
	max-width: 186px;
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--slate-2);
	line-height: 1.5;
	padding-right: clamp(24px, 3vw, 44px);
	border-right: 1px solid var(--line);
}
.cf-site .accr__marquee {
	flex: 1;
	overflow: hidden;
	min-width: 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
/* Two identical groups; each carries its own trailing gap so that a -50%
   translate lands exactly on the start of the second group. Changing the markup
   to a single group, or moving the gap onto the track, breaks the loop. */
.cf-site .accr__track {
	display: flex;
	align-items: center;
	width: max-content;
	animation: cf-accr-scroll 34s linear infinite;
}
.cf-site .accr__group {
	--accr-gap: clamp(40px, 5vw, 72px);
	display: flex;
	align-items: center;
	gap: var(--accr-gap);
	padding-right: var(--accr-gap);
}
.cf-site .accr__marquee:hover .accr__track { animation-play-state: paused; }
/* Full colour and noticeably larger, at the client's request - these are the
   accreditations the whole proposition rests on, and greyed down at 40px they
   were being missed entirely. The marquee still pauses on hover (the rule
   above), which is the behaviour they asked to keep. */
.cf-site .accr__track img {
	height: clamp(58px, 5.2vw, 82px);
	width: auto;
	max-width: none;
	opacity: 1;
	transition: transform .35s var(--ease);
}
/* Hovering a logo lifts it slightly, so the paused marquee reads as deliberate
   rather than stalled. */
.cf-site .accr__track img:hover { transform: translateY(-3px); }

@keyframes cf-accr-scroll { to { transform: translateX(-50%); } }

@media (max-width: 760px) {
	.cf-site .accr__inner { flex-direction: column; align-items: flex-start; gap: 18px; }
	.cf-site .accr__label { border-right: 0; padding-right: 0; max-width: none; }
	.cf-site .accr__marquee { width: 100%; }
}


/* ==========================================================================
   11. WHO WE ARE

   Both columns stretch to the same height so the section reads as one block
   rather than a tall text column beside a short image.
   ========================================================================== */
.cf-home .cf-intro > .row_col_wrap_12 {
	display: grid;
	grid-template-columns: 1.02fr .98fr;
	gap: clamp(40px, 5vw, 72px);
	align-items: stretch;
}
.cf-home .cf-intro > .row_col_wrap_12 > .wpb_column {
	width: 100% !important;
	float: none !important;
	padding: 0 !important;
	min-width: 0;
}
/* Direct children only. `.intro__body .wpb_wrapper` as a descendant selector
   also matches the wrapper inside the nested button row, and its
   flex-direction:column stacked "More About Us" above "See our work". Salient
   nests .wpb_wrapper at every level, so a descendant selector on it will always
   reach further than intended - the same mistake as the hero scrim. */
.cf-home .cf-intro .intro__body,
.cf-home .cf-intro .intro__body > .vc_column-inner,
.cf-home .cf-intro .intro__body > .vc_column-inner > .wpb_wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.cf-site .intro__media {
	position: relative;
	display: flex;
	min-height: 100%;
}
.cf-site .intro__media-main {
	flex: 1;
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--shadow-2);
}
.cf-site .intro__media-main img {
	width: 100%;
	height: 100%;
	min-height: clamp(380px, 42vw, 560px);
	object-fit: cover;
}
.cf-site .intro__media-sub {
	position: absolute;
	right: -22px;
	bottom: -30px;
	width: 42%;
	border: 8px solid #fff;
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--shadow-1);
	z-index: 2;
}
.cf-site .intro__media-sub img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.cf-site .intro__stamp {
	position: absolute;
	left: -24px;
	top: -24px;
	background: var(--red);
	color: #fff;
	padding: 18px 22px;
	border-radius: var(--r);
	box-shadow: 0 18px 40px -20px rgba(205,0,56,.8);
	z-index: 3;
}
.cf-site .intro__stamp b {
	display: block;
	font-family: var(--ff-display);
	font-weight: 800;
	font-size: 27px;
	line-height: 1;
	letter-spacing: -.02em;
}
.cf-site .intro__stamp span {
	display: block;
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-top: 6px;
	opacity: .9;
	font-weight: 600;
}

.cf-home .cf-intro .intro__body .section-head { max-width: none; }
.cf-home .cf-intro .intro__lead { margin-top: 22px; }
.cf-home .cf-intro .intro__copy { margin-top: 18px; }
.cf-home .cf-intro .intro__copy p + p { margin-top: 18px; }

.cf-site .intro__points {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px 30px;
	margin-top: 36px;
	padding-top: 34px;
	border-top: 1px solid var(--line);
}
.cf-site .intro__point { display: flex; gap: 14px; }
.cf-site .intro__point svg { width: 22px; height: 22px; color: var(--red); flex: none; margin-top: 2px; }
.cf-site .intro__point b {
	display: block;
	color: var(--ink);
	font-family: var(--ff-display);
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: -.01em;
}
.cf-site .intro__point span span,
.cf-site .intro__point > span > span {
	display: block;
	font-size: 14.5px;
	color: var(--slate);
	line-height: 1.55;
	margin-top: 3px;
}

/* The actions row is pushed to the bottom so both columns finish level. */
.cf-home .cf-intro .cf-actions {
	margin-top: auto !important;
	padding-top: 36px;
}

@media (max-width: 980px) {
	.cf-home .cf-intro > .row_col_wrap_12 { grid-template-columns: 1fr; gap: 64px; }
	.cf-home .cf-intro .intro__media-col { order: -1; margin-bottom: 22px; }
	.cf-site .intro__media-sub { right: 0; bottom: -30px; width: 38%; }
	.cf-site .intro__stamp { left: 0; top: -18px; }
}
@media (max-width: 560px) {
	.cf-site .intro__points { grid-template-columns: 1fr; }
}


/* ==========================================================================
   12. TWO PATHS
   ========================================================================== */
.cf-home .cf-paths__grid > .row_col_wrap_12_inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(18px, 2vw, 26px);
	margin-top: clamp(40px, 4.5vw, 58px);
}

.cf-site .path {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: #fff;
	transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.cf-site .path:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); border-color: transparent; }

.cf-site .path__media { position: relative; overflow: hidden; aspect-ratio: 16 / 9; }
.cf-site .path__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.cf-site .path:hover .path__media img { transform: scale(1.06); }
.cf-site .path__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(14,17,22,.14) 0%, rgba(14,17,22,.62) 100%);
}

.cf-site .path__tag {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--red);
	color: #fff;
	padding: 11px 20px;
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.cf-site .path__tag svg { width: 14px; height: 14px; }
.cf-site .path--supply .path__tag { background: var(--ink); }

.cf-site .path__num {
	position: absolute;
	right: 20px;
	top: 16px;
	z-index: 2;
	font-family: var(--ff-display);
	font-weight: 900;
	font-size: 60px;
	line-height: 1;
	color: rgba(255,255,255,.22);
	letter-spacing: -.04em;
}

.cf-site .path__body {
	padding: clamp(26px, 3vw, 38px);
	display: flex;
	flex-direction: column;
	flex: 1;
}
.cf-site .path__body h3 { margin-bottom: 12px; }
.cf-site .path__for {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	color: var(--red);
	letter-spacing: .04em;
	margin-bottom: 14px;
}
.cf-site .path--supply .path__for { color: var(--ink-700); }

.cf-site .path__list {
	margin: 24px 0 0;
	display: grid;
	gap: 11px;
	padding-top: 24px;
	border-top: 1px solid var(--line-soft);
}
.cf-site .path__list li { display: flex; gap: 11px; font-size: 15.5px; color: var(--slate); line-height: 1.5; }
.cf-site .path__list svg { width: 18px; height: 18px; color: var(--red); flex: none; margin-top: 3px; }
.cf-site .path--supply .path__list svg { color: var(--ink); }

.cf-site .path__foot { margin-top: auto; padding-top: 28px; }

@media (max-width: 880px) {
	.cf-home .cf-paths__grid > .row_col_wrap_12_inner { grid-template-columns: 1fr; }
}


/* ==========================================================================
   13. SERVICES
   ========================================================================== */
.cf-home .cf-svc__grid > .row_col_wrap_12_inner {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(18px, 2vw, 24px);
	margin-top: clamp(40px, 4.5vw, 58px);
}

.cf-site .svc {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: clamp(26px, 2.6vw, 36px);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.cf-site .svc::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 3px;
	background: var(--red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .5s var(--ease);
}
.cf-site .svc:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); border-color: transparent; }
.cf-site .svc:hover::before { transform: scaleX(1); }

.cf-site .svc__ico {
	width: 54px;
	height: 54px;
	display: grid;
	place-items: center;
	border-radius: var(--r);
	background: var(--red-05);
	color: var(--red);
	margin-bottom: 24px;
	transition: background .4s, color .4s;
}
.cf-site .svc:hover .svc__ico { background: var(--red); color: #fff; }
.cf-site .svc__ico svg { width: 26px; height: 26px; }

.cf-site .svc h3 { margin-bottom: 12px; }
.cf-site .svc p { font-size: 15.5px; line-height: 1.62; color: var(--slate); }
.cf-site .svc__foot { margin-top: auto; padding-top: 26px; }
.cf-site .svc__no {
	position: absolute;
	right: 26px;
	top: 22px;
	font-family: var(--ff-display);
	font-weight: 900;
	font-size: 14px;
	letter-spacing: .06em;
	color: var(--line);
}

@media (max-width: 1040px) {
	.cf-home .cf-svc__grid > .row_col_wrap_12_inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
	.cf-home .cf-svc__grid > .row_col_wrap_12_inner { grid-template-columns: 1fr; }
}


/* ==========================================================================
   14. SUPPLY BAND
   ========================================================================== */
.cf-home .cf-supply {
	background: var(--ink);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}
.cf-home .cf-supply .row-bg { opacity: .32; }
.cf-home .cf-supply .row-bg-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
	background: linear-gradient(95deg, var(--ink) 4%, rgba(14,17,22,.93) 44%, rgba(14,17,22,.72) 100%);
}
.cf-home .cf-supply > .row_col_wrap_12 {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(28px, 4vw, 64px);
	flex-wrap: wrap;
	padding-block: clamp(38px, 4.2vw, 58px);
}
.cf-home .cf-supply > .row_col_wrap_12 > .wpb_column {
	width: auto !important;
	float: none !important;
	padding: 0 !important;
	min-width: 0;
}
.cf-home .cf-supply .supply__body { max-width: 720px; flex: 1 1 520px; }
.cf-home .cf-supply .supply__action { flex: none; }

.cf-home .cf-supply .supply__body .section-head { max-width: none; }
.cf-home .cf-supply .supply__body h2 {
	font-size: clamp(23px, 2.3vw, 31px);
	line-height: 1.14;
	letter-spacing: -.022em;
	color: #fff;
}
.cf-home .cf-supply .supply__body .lead {
	margin-top: 13px;
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255,255,255,.7);
}
.cf-home .cf-supply .cf-chips { margin-top: 20px; }

.cf-site .cf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-site .cf-chips span {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	padding: 6px 13px;
	border: 1px solid rgba(255,255,255,.22);
	border-radius: 100px;
	color: rgba(255,255,255,.78);
}

.cf-home .cf-supply .supply__action .wpb_wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 13px;
}
.cf-site .supply__mail {
	font-size: 14.5px;
	color: var(--red-on-dark);
	font-weight: 600;
	word-break: break-word;
}
.cf-site .supply__mail a { color: inherit; }
.cf-site .supply__mail:hover,
.cf-site .supply__mail a:hover { color: #fff; }

@media (max-width: 820px) {
	.cf-home .cf-supply .supply__action { width: 100%; }
	.cf-home .cf-supply .supply__action .wpb_wrapper { align-items: stretch; }
	.cf-home .cf-supply .supply__action .btn { justify-content: center; }
	.cf-site .supply__mail { text-align: center; }
}


/* ==========================================================================
   15. SECTORS
   ========================================================================== */
.cf-home .cf-sectors__grid > .row_col_wrap_12_inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(14px, 1.6vw, 20px);
	margin-top: clamp(40px, 4.5vw, 58px);
}

.cf-site .sector {
	position: relative;
	overflow: hidden;
	border-radius: var(--r-lg);
	min-height: clamp(300px, 30vw, 400px);
	display: flex;
	align-items: flex-end;
	color: #fff;
	height: 100%;
}
.cf-site .sector img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.1s var(--ease);
}
.cf-site .sector:hover img { transform: scale(1.07); }
.cf-site .sector::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(14,17,22,.05) 0%, rgba(14,17,22,.48) 46%, rgba(14,17,22,.93) 100%);
	transition: background .5s;
}
.cf-site .sector:hover::after {
	background: linear-gradient(180deg, rgba(205,0,56,.14) 0%, rgba(14,17,22,.52) 46%, rgba(14,17,22,.95) 100%);
}
.cf-site .sector__body {
	position: relative;
	z-index: 2;
	padding: clamp(22px, 2.2vw, 30px);
	width: 100%;
	display: block;
}
.cf-site .sector__body h3 {
	font-size: clamp(17px, 1.35vw, 21px);
	line-height: 1.18;
	text-transform: uppercase;
	letter-spacing: -.005em;
	color: #fff;
}
.cf-site .sector__body p {
	font-size: 14.5px;
	line-height: 1.55;
	color: rgba(255,255,255,.76);
	margin-top: 10px;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height .55s var(--ease), opacity .4s, margin-top .4s;
}
.cf-site .sector:hover .sector__body p { max-height: 140px; opacity: 1; }
.cf-site .sector__bar {
	display: block;
	width: 36px;
	height: 3px;
	background: var(--red);
	margin-bottom: 16px;
	transition: width .5s var(--ease);
}
.cf-site .sector:hover .sector__bar { width: 68px; }

@media (max-width: 1040px) {
	.cf-home .cf-sectors__grid > .row_col_wrap_12_inner { grid-template-columns: 1fr 1fr; }
	.cf-site .sector__body p { max-height: 140px; opacity: 1; }
}
@media (max-width: 560px) {
	.cf-home .cf-sectors__grid > .row_col_wrap_12_inner { grid-template-columns: 1fr; }
	.cf-site .sector { min-height: 260px; }
}


/* ==========================================================================
   16. COMPLIANCE BAND
   ========================================================================== */
.cf-home .cf-compliance {
	background: var(--ink);
	color: #fff;
	overflow: hidden;
}
.cf-home .cf-compliance > .row_col_wrap_12 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(40px, 5vw, 80px);
}
.cf-home .cf-compliance > .row_col_wrap_12 > .wpb_column {
	width: 100% !important;
	float: none !important;
	padding: 0 !important;
	min-width: 0;
}

.cf-site .compliance__media {
	position: relative;
	border-radius: var(--r-lg);
	overflow: hidden;
	aspect-ratio: 4 / 3;
}
.cf-site .compliance__media img { width: 100%; height: 100%; object-fit: cover; }
.cf-site .compliance__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(200deg, transparent 40%, rgba(14,17,22,.6) 100%);
}
.cf-site .compliance__badge {
	position: absolute;
	left: 24px;
	bottom: 24px;
	z-index: 2;
	background: #fff;
	color: var(--ink);
	border-radius: var(--r);
	padding: 16px 20px;
	max-width: 250px;
	box-shadow: var(--shadow-2);
}
.cf-site .compliance__badge b {
	display: block;
	font-family: var(--ff-display);
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--red);
}
.cf-site .compliance__badge span {
	display: block;
	font-size: 14px;
	line-height: 1.45;
	color: var(--slate);
	margin-top: 6px;
}

.cf-home .cf-compliance .section-head { max-width: none; }
.cf-home .cf-compliance .section-head .lead { margin-top: 20px; }

.cf-site .reg { display: grid; gap: 14px; margin-top: 32px; }
.cf-site .reg li {
	display: flex;
	gap: 16px;
	padding: 18px 20px;
	border: 1px solid rgba(255,255,255,.12);
	border-radius: var(--r);
	background: rgba(255,255,255,.03);
	transition: border-color .35s, background .35s;
}
.cf-site .reg li:hover { border-color: rgba(205,0,56,.55); background: rgba(205,0,56,.07); }
.cf-site .reg__q {
	font-family: var(--ff-display);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: .08em;
	color: var(--red-on-dark);
	flex: none;
	padding-top: 3px;
	min-width: 72px;
}
.cf-site .reg__c { flex: 1; min-width: 0; }
.cf-site .reg b {
	display: block;
	color: #fff;
	font-family: var(--ff-display);
	font-size: 16px;
	letter-spacing: -.01em;
}
.cf-site .reg__d {
	display: block;
	font-size: 14.5px;
	line-height: 1.55;
	color: rgba(255,255,255,.62);
	margin-top: 4px;
}

.cf-home .cf-compliance .cf-actions > .row_col_wrap_12_inner { margin-top: 32px; }
.cf-site .compliance__note {
	margin-top: 26px;
	font-size: 13px;
	color: rgba(255,255,255,.45);
	line-height: 1.6;
}

@media (max-width: 920px) {
	.cf-home .cf-compliance > .row_col_wrap_12 { grid-template-columns: 1fr; }
	.cf-home .cf-compliance .compliance__media-col { order: -1; }
}


/* ==========================================================================
   17. PROCESS
   ========================================================================== */
.cf-site .process__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(20px, 2.4vw, 30px);
	margin-top: clamp(40px, 4.5vw, 58px);
	position: relative;
}
.cf-site .process__grid::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 27px;
	height: 1px;
	background: var(--line);
	z-index: 0;
}
.cf-site .step { position: relative; z-index: 1; }
.cf-site .step__no {
	width: 56px;
	height: 56px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--line);
	color: var(--ink);
	font-family: var(--ff-display);
	font-weight: 800;
	font-size: 17px;
	margin-bottom: 22px;
	transition: background .4s var(--ease), color .4s, border-color .4s, transform .4s var(--ease);
}
.cf-site .step:hover .step__no {
	background: var(--red);
	border-color: var(--red);
	color: #fff;
	transform: translateY(-3px);
}
.cf-site .step h3 { font-size: 19px; margin-bottom: 10px; }
.cf-site .step p { font-size: 15px; line-height: 1.6; color: var(--slate); }

@media (max-width: 920px) {
	.cf-site .process__grid { grid-template-columns: 1fr 1fr; }
	.cf-site .process__grid::before { display: none; }
}
@media (max-width: 520px) {
	.cf-site .process__grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   18. SLIDER (shared by case studies and reviews)

   Scroll-snap based: native touch and trackpad swipe, buttons scroll by exactly
   one card. Salient's own carousel is not used - see the note in cf-elements.php.
   ========================================================================== */
.cf-site .slider {
	--slide-gap: clamp(18px, 2vw, 26px);
	--per: 3;
	margin-top: clamp(36px, 4vw, 54px);
}
.cf-site .slider__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	margin-inline: -4px;
	padding: 4px;
}
.cf-site .slider__viewport::-webkit-scrollbar { display: none; }
.cf-site .slider__track { display: flex; gap: var(--slide-gap); align-items: stretch; }
.cf-site .slider__track > * {
	flex: 0 0 calc((100% - (var(--per) - 1) * var(--slide-gap)) / var(--per));
	scroll-snap-align: start;
	min-width: 0;
}
.cf-site .slider__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: clamp(26px, 3vw, 38px);
}
.cf-site .slider__btn {
	width: 50px;
	height: 50px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid var(--line);
	background: #fff;
	color: var(--ink);
	padding: 0;
	cursor: pointer;
	transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease), opacity .3s;
}
.cf-site .slider__btn svg { width: 18px; height: 18px; }
.cf-site .slider__btn:hover:not(:disabled) {
	background: var(--red);
	border-color: var(--red);
	color: #fff;
	transform: translateY(-2px);
}
.cf-site .slider__btn:disabled { opacity: .34; cursor: default; }
.cf-site .slider__dots { display: flex; align-items: center; gap: 9px; }
.cf-site .slider__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--line);
	cursor: pointer;
	transition: background .3s var(--ease), width .3s var(--ease);
}
.cf-site .slider__dot.is-on { background: var(--red); width: 30px; border-radius: 100px; }

@media (max-width: 1040px) { .cf-site .slider { --per: 2; } }
@media (max-width: 720px) { .cf-site .slider { --per: 1; } }


/* ==========================================================================
   19. CASE STUDIES
   ========================================================================== */
.cf-site .case {
	height: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.cf-site .case:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); border-color: transparent; }
.cf-site .case__media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; }
.cf-site .case__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.cf-site .case:hover .case__media img { transform: scale(1.06); }
.cf-site .case__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(14,17,22,.3) 0%, transparent 45%);
}
.cf-site .case__job {
	position: absolute;
	left: 18px;
	top: 18px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	background: rgba(255,255,255,.95);
	color: var(--ink);
	padding: 8px 14px;
	border-radius: 2px;
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1.2;
}
.cf-site .case__loc {
	position: absolute;
	right: 18px;
	top: 18px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--red);
	color: #fff;
	padding: 8px 14px;
	border-radius: 2px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .03em;
	line-height: 1.2;
}
.cf-site .case__loc svg { width: 13px; height: 13px; }
.cf-site .case__body {
	padding: clamp(24px, 2.6vw, 34px);
	display: flex;
	flex-direction: column;
	flex: 1;
}
.cf-site .case__body h3 { margin-bottom: 14px; }
.cf-site .case__body p { font-size: 15.5px; line-height: 1.62; color: var(--slate); }
.cf-site .case__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.cf-site .case__tags span {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--slate);
	background: var(--paper-soft);
	border: 1px solid var(--line);
	padding: 5px 11px;
	border-radius: 100px;
}
.cf-site .case__foot { margin-top: auto; padding-top: 24px; }


/* ==========================================================================
   20. REVIEWS
   ========================================================================== */
.cf-home .cf-reviews__head > .row_col_wrap_12_inner {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
}
.cf-home .cf-reviews__head .wpb_column:first-child { flex: 1 1 380px; }

.cf-site .reviews__score {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 18px 24px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-1);
}
.cf-site .reviews__stars { display: flex; gap: 3px; color: var(--red); }
.cf-site .reviews__stars svg { width: 19px; height: 19px; }
.cf-site .reviews__score b {
	display: block;
	font-family: var(--ff-display);
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.2;
}
.cf-site .reviews__score span { display: block; font-size: 13px; color: var(--slate); margin-top: 2px; }

.cf-site .review {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: clamp(26px, 2.4vw, 32px);
	margin: 0;
	transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.cf-site .review:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); border-color: transparent; }
.cf-site .review__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}
.cf-site .review__mark {
	font-family: var(--ff-display);
	font-weight: 900;
	font-size: 56px;
	line-height: .62;
	color: var(--red-10);
}
.cf-site .review__stars { display: flex; gap: 3px; color: var(--red); }
.cf-site .review__stars svg { width: 16px; height: 16px; }
.cf-site .review__quote {
	font-size: 15.5px;
	line-height: 1.66;
	color: var(--ink-700);
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
	quotes: none;
}
.cf-site .review__quote::before,
.cf-site .review__quote::after { content: none; }
.cf-site .review__by {
	margin-top: auto;
	padding-top: 24px;
	display: flex;
	align-items: center;
	gap: 14px;
}
.cf-site .review__av {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--red);
	color: #fff;
	display: grid;
	place-items: center;
	font-family: var(--ff-display);
	font-weight: 800;
	font-size: 14.5px;
	flex: none;
	letter-spacing: .02em;
	line-height: 1;
}
.cf-site .review__who { min-width: 0; }
.cf-site .review__who b {
	display: block;
	font-family: var(--ff-display);
	font-size: 15px;
	letter-spacing: -.01em;
	line-height: 1.3;
}
.cf-site .review__who span {
	display: block;
	font-size: 13.5px;
	color: var(--slate);
	line-height: 1.45;
	margin-top: 2px;
}


/* ==========================================================================
   21. QUOTE / CONTACT AND THE ENQUIRY FORM

   The form is Contact Form 7, so the client owns the fields and the routing.
   These rules dress CF7's own markup - no CF7 output is overridden in PHP.
   ========================================================================== */
/* White. This was soft from round 2, when the client asked for #F7F8FA here -
   but the gallery section above it is now the tinted one, and two tinted
   sections in a row is exactly what the alternating sequence is meant to stop.
   The form keeps its own border and shadow, so it still reads as a card. */
.cf-home .cf-quote { background: var(--paper); overflow: hidden; }
.cf-home .cf-quote > .row_col_wrap_12 {
	display: grid;
	grid-template-columns: 1fr 1.08fr;
	gap: clamp(40px, 5vw, 76px);
	align-items: start;
}
/* :not(.cf-form) because the form column IS the white card - it is the one
   column in this row that must keep its padding. */
.cf-home .cf-quote > .row_col_wrap_12 > .wpb_column:not(.cf-form) {
	width: 100% !important;
	float: none !important;
	padding: 0 !important;
	min-width: 0;
}
.cf-home .cf-quote > .row_col_wrap_12 > .wpb_column.cf-form {
	width: 100% !important;
	float: none !important;
	min-width: 0;
}
.cf-home .cf-quote .section-head { max-width: none; }
.cf-home .cf-quote .section-head .lead { margin-top: 20px; }
.cf-home .cf-quote .section-head .lead a { color: var(--red); font-weight: 600; }

.cf-site .quote__routes { display: grid; gap: 14px; margin-top: 34px; }
.cf-site .route {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 20px 22px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	transition: border-color .35s, transform .35s var(--ease), box-shadow .35s;
}
.cf-site .route:hover { border-color: var(--red); transform: translateX(4px); box-shadow: var(--shadow-1); }
.cf-site .route__ico {
	width: 46px;
	height: 46px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: var(--r);
	background: var(--red-05);
	color: var(--red);
	margin-top: 2px;
}
.cf-site .route__ico--wa { background: #E7F9EE; color: #128C4B; }
.cf-site .route__ico svg { width: 21px; height: 21px; }
.cf-site .route b {
	display: block;
	color: var(--ink);
	font-family: var(--ff-display);
	font-size: 15.5px;
	letter-spacing: -.01em;
}
.cf-site .route > span > span {
	display: block;
	font-size: 14.5px;
	color: var(--slate);
	line-height: 1.5;
	margin-top: 3px;
}
.cf-site .route strong {
	display: block;
	font-size: 15px;
	color: var(--red);
	font-weight: 600;
	margin-top: 6px;
	word-break: break-word;
}

.cf-home .cf-quote__addr > .row_col_wrap_12_inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px;
	margin-top: 28px;
	padding-top: 26px;
	border-top: 1px solid var(--line);
}
.cf-site .quote__addr h3,
.cf-home .cf-quote__addr h3 {
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--slate-2);
	margin-bottom: 10px;
	font-weight: 700;
}
.cf-home .cf-quote__addr p { font-size: 15px; line-height: 1.65; color: var(--ink-700); }
.cf-home .cf-quote__addr .quote__directions { margin-top: 14px; }

.cf-site .hours { display: grid; gap: 6px; font-size: 14.5px; }
.cf-site .hours div { display: flex; justify-content: space-between; gap: 16px; color: var(--slate); }
.cf-site .hours div span:last-child { color: var(--ink); font-weight: 500; }

.cf-site .quote__map {
	margin-top: 26px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--shadow-1);
	background: #E8EAED;
}
.cf-site .quote__map iframe {
	display: block;
	width: 100%;
	height: clamp(200px, 20vw, 250px);
	border: 0;
	/* In colour, at the client's request. It was desaturated to sit quietly
	   beside the form; they would rather it read as a real map. */
}

/* ---- The form itself ---- */
/* !important on the padding because Salient's grid-system.css sets
   `.vc_row-fluid > .span_12 .wpb_column {padding: 0 1%}` at (0,3,0), which
   outranks this and collapsed the card's side padding to 5.8px. */
.cf-site .cf-form {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: clamp(26px, 3vw, 42px) !important;
	box-shadow: var(--shadow-1);
}
.cf-site .cf-form .wpcf7-form { margin: 0; }
.cf-site .form__top {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-bottom: 24px;
	margin-bottom: 26px;
	border-bottom: 1px solid var(--line-soft);
}
.cf-site .form__top-ico {
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border-radius: var(--r);
	background: var(--red);
	color: #fff;
	flex: none;
}
.cf-site .form__top-ico svg { width: 22px; height: 22px; }
.cf-site .form__top b {
	display: block;
	color: var(--ink);
	font-family: var(--ff-display);
	font-size: 19px;
	letter-spacing: -.018em;
	line-height: 1.25;
}
.cf-site .form__top > span > span { display: block; font-size: 14px; color: var(--slate); margin-top: 3px; }

.cf-site .form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	align-items: end;
}
.cf-site .field { display: block; margin-bottom: 16px; }
.cf-site .field > span.field__label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--slate-2);
	margin-bottom: 8px;
	min-height: 17px;
}
.cf-site .field .opt { text-transform: none; letter-spacing: 0; font-weight: 400; }
.cf-site .field .field__label i { font-style: normal; color: var(--red); }

/* CF7 wraps every control in a span.wpcf7-form-control-wrap, which would
   otherwise be an inline box the input cannot fill. */
.cf-site .cf-form .wpcf7-form-control-wrap { display: block; width: 100%; }

.cf-site .cf-form input[type="text"],
.cf-site .cf-form input[type="email"],
.cf-site .cf-form input[type="tel"],
.cf-site .cf-form select,
.cf-site .cf-form textarea {
	height: auto;
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: #fff;
	font-family: var(--ff-body);
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--ink);
	box-shadow: none;
	margin: 0;
	transition: border-color .25s, box-shadow .25s;
}
.cf-site .cf-form textarea { resize: vertical; min-height: 118px; line-height: 1.6; }
.cf-site .cf-form input:focus,
.cf-site .cf-form select:focus,
.cf-site .cf-form textarea:focus {
	outline: 0;
	border-color: var(--red);
	box-shadow: 0 0 0 3px var(--red-10);
}
.cf-site .cf-form input::placeholder,
.cf-site .cf-form textarea::placeholder { color: #7A8496; opacity: 1; }

.cf-site .cf-form select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6575' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 17px;
	padding-right: 44px;
}

.cf-site .cf-form .file {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border: 1px dashed var(--line);
	border-radius: var(--r);
	background: var(--paper-soft);
	cursor: pointer;
	transition: border-color .25s, background .25s;
}
.cf-site .cf-form .file:hover { border-color: var(--red); background: var(--red-05); }
.cf-site .cf-form .file > svg { width: 20px; height: 20px; color: var(--red); flex: none; }
.cf-site .cf-form .file b {
	display: block;
	color: var(--ink);
	font-size: 14.5px;
	font-family: var(--ff-display);
	letter-spacing: -.01em;
}
.cf-site .cf-form .file .file__hint { display: block; font-size: 13px; color: var(--slate); }
.cf-site .cf-form .file input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
}

.cf-site .cf-form .consent {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 20px 0 22px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--slate);
}
.cf-site .cf-form .consent .wpcf7-list-item { margin: 0; }
.cf-site .cf-form .consent input[type="checkbox"] {
	width: 19px;
	height: 19px;
	flex: none;
	margin: 2px 0 0;
	accent-color: var(--red);
}
.cf-site .cf-form .consent a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }

/* CF7's submit button, dressed as the design's full-width primary button. */
.cf-site .cf-form .wpcf7-submit,
.cf-site .cf-form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 16px 28px;
	border-radius: var(--r);
	background: var(--red);
	color: #fff;
	border: 2px solid var(--red);
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.cf-site .cf-form .wpcf7-submit:hover,
.cf-site .cf-form input[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 28px -14px rgba(205,0,56,.65);
}

.cf-site .form__note {
	margin-top: 18px;
	font-size: 13px;
	color: var(--slate-2);
	line-height: 1.55;
	text-align: center;
}

/* CF7 response and validation messages. */
.cf-site .cf-form .wpcf7-response-output {
	margin: 18px 0 0;
	padding: 12px 16px;
	border-radius: var(--r);
	border: 1px solid var(--line);
	font-size: 14px;
	line-height: 1.5;
}
.cf-site .cf-form .wpcf7-not-valid-tip {
	color: var(--red);
	font-size: 13px;
	margin-top: 6px;
	display: block;
}
.cf-site .cf-form .wpcf7-not-valid { border-color: var(--red) !important; }
/* The honeypot field must stay invisible without being display:none, which some
   bots detect. */
.cf-site .cf-form .cf7-honeypot-field { position: absolute; left: -9999px; }

@media (max-width: 980px) {
	.cf-home .cf-quote > .row_col_wrap_12 { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
	.cf-site .form__row { grid-template-columns: 1fr; }
	.cf-home .cf-quote__addr > .row_col_wrap_12_inner { grid-template-columns: 1fr; }
}


/* ==========================================================================
   22. CTA BAND
   ========================================================================== */
.cf-home .cf-ctaband,
.cf-site .cf-ctaband {
	position: relative;
	background: var(--red);
	color: #fff;
	overflow: hidden;
}
.cf-home .cf-ctaband::after {
	content: "";
	position: absolute;
	right: -6%;
	top: -40%;
	width: 46vw;
	height: 180%;
	background: rgba(255,255,255,.055);
	transform: skewX(-14deg);
	z-index: 0;
}
.cf-home .cf-ctaband > .row_col_wrap_12 {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 20px;
	padding-block: clamp(30px, 2.9vw, 42px);
}
.cf-home .cf-ctaband > .row_col_wrap_12 > .wpb_column {
	width: 100% !important;
	float: none !important;
	padding: 0 !important;
}
.cf-home .cf-ctaband .section-head {
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
}
.cf-home .cf-ctaband h2 {
	font-size: clamp(21px, 2.1vw, 28px);
	line-height: 1.2;
	letter-spacing: -.02em;
	color: #fff;
}
.cf-home .cf-ctaband .lead {
	margin-top: 10px;
	font-size: 15.5px;
	color: rgba(255,255,255,.82);
	max-width: 600px;
	line-height: 1.55;
	margin-inline: auto;
}
.cf-home .cf-ctaband .cf-actions > .row_col_wrap_12_inner { justify-content: center; }
.cf-home .cf-ctaband .btn { padding: 13px 22px; font-size: 13px; }
.cf-home .cf-ctaband .btn--ghost-light { --btn-bd: rgba(255,255,255,.5); }
/* The arrow slide is wrong on a social button - the icon is the brand mark. */
.cf-home .cf-ctaband .btn:hover svg { transform: none; }


/* ==========================================================================
   23. FOOTER
   ========================================================================== */
.cf-site #footer-outer {
	background: var(--ink) !important;
	color: rgba(255,255,255,.62);
	font-size: 15px;
	border: 0;
}
.cf-site #footer-outer #footer-widgets { border: 0; padding: 0; }
.cf-site #footer-outer #footer-widgets .container {
	max-width: var(--container) !important;
	width: 100% !important;
	padding-inline: var(--gutter) !important;
	margin-inline: auto !important;
}
.cf-site #footer-outer #footer-widgets .row {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.35fr;
	gap: clamp(30px, 3.6vw, 56px);
	padding-block: clamp(52px, 6vw, 84px);
	margin: 0;
}
.cf-site #footer-outer #footer-widgets .row::before,
.cf-site #footer-outer #footer-widgets .row::after { display: none !important; content: none !important; }
.cf-site #footer-outer #footer-widgets .col {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
}
.cf-site #footer-outer .widget { margin-bottom: 0; }
.cf-site #footer-outer .widget:last-child { padding-bottom: 0; }

.cf-site .cf-footer__logo { height: 52px; width: auto; margin-bottom: 24px; }
.cf-site .cf-footer__about { line-height: 1.7; max-width: 330px; }

.cf-site .cf-footer__social { display: flex; gap: 9px; margin-top: 26px; }
.cf-site .cf-footer__social a {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255,255,255,.16);
	border-radius: var(--r);
	color: #fff;
	transition: background .3s, border-color .3s, transform .3s var(--ease);
}
.cf-site .cf-footer__social a:hover { background: var(--red); border-color: var(--red); transform: translateY(-3px); }
.cf-site .cf-footer__social svg { width: 17px; height: 17px; }

.cf-site #footer-outer .widget h4,
.cf-site #footer-outer .widgettitle {
	font-family: var(--ff-display);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 22px;
}

.cf-site #footer-outer .widget ul.menu,
.cf-site #footer-outer .widget_nav_menu ul {
	display: grid;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.cf-site #footer-outer .widget_nav_menu li { margin: 0; padding: 0; border: 0; }
.cf-site #footer-outer .widget_nav_menu li a {
	position: relative;
	color: rgba(255,255,255,.62);
	padding: 0;
	border: 0;
	transition: color .25s, padding-left .25s var(--ease);
}
.cf-site #footer-outer .widget_nav_menu li a:hover { color: #fff; padding-left: 9px; }
.cf-site #footer-outer .widget_nav_menu li a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 4px;
	height: 1px;
	background: var(--red);
	opacity: 0;
	transition: opacity .25s;
}
.cf-site #footer-outer .widget_nav_menu li a:hover::before { opacity: 1; }

.cf-site .cf-footer__contact { display: grid; gap: 18px; }
.cf-site .cf-footer__contact li { display: flex; gap: 13px; }
.cf-site .cf-footer__contact svg { width: 18px; height: 18px; color: var(--red); flex: none; margin-top: 3px; }
.cf-site .cf-footer__contact b {
	display: block;
	color: #fff;
	font-family: var(--ff-display);
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-bottom: 4px;
	font-weight: 700;
}
.cf-site .cf-footer__contact a { color: rgba(255,255,255,.62); transition: color .25s; }
.cf-site .cf-footer__contact a:hover { color: #fff; }
.cf-site .cf-footer__contact span { line-height: 1.6; display: block; }

/* The legal bar replaces Salient's copyright row. */
.cf-site #copyright {
	background: var(--ink) !important;
	border-top: 0;
	padding: 0 !important;
}
.cf-site #copyright .container {
	max-width: var(--container) !important;
	width: 100% !important;
	padding-inline: var(--gutter) !important;
	margin-inline: auto !important;
}
.cf-site #copyright .row { margin: 0; display: block; }
.cf-site #copyright .col { float: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
.cf-site #copyright p { margin: 0; }
.cf-site #copyright .nectar-social,
.cf-site #copyright ul.social { display: none !important; }

.cf-site .cf-footer__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 26px;
	flex-wrap: wrap;
	padding-block: 24px;
	border-top: 1px solid rgba(255,255,255,.1);
	font-size: 13.5px;
	color: rgba(255,255,255,.45);
}
.cf-site .cf-footer__reg,
.cf-site .cf-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.cf-site .cf-footer__legal a { color: rgba(255,255,255,.45); transition: color .25s; }
.cf-site .cf-footer__legal a:hover { color: #fff; }
.cf-site .cf-footer__legal li { list-style: none; }
.cf-site .cf-footer__by a {
	color: #fff;
	font-weight: 600;
	border-bottom: 1px solid rgba(255,255,255,.3);
	transition: color .25s, border-color .25s;
}
.cf-site .cf-footer__by a:hover { color: var(--red-on-dark); border-color: var(--red-on-dark); }

@media (max-width: 1000px) {
	.cf-site #footer-outer #footer-widgets .row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	.cf-site #footer-outer #footer-widgets .row { grid-template-columns: 1fr; gap: 40px; }
}


/* ==========================================================================
   24. MOBILE ACTION BAR
   ========================================================================== */
.cf-site .cf-mobilebar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 920;
	display: none;
	background: #fff;
	border-top: 1px solid var(--line);
	box-shadow: 0 -8px 24px -18px rgba(14,17,22,.5);
	grid-template-columns: 1fr 1fr;
}
.cf-site .cf-mobilebar a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 15px 10px;
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.cf-site .cf-mobilebar a:first-child { background: var(--red); color: #fff; }
.cf-site .cf-mobilebar a:last-child { color: var(--ink); }
.cf-site .cf-mobilebar svg { width: 17px; height: 17px; }

@media (max-width: 700px) {
	.cf-site .cf-mobilebar { display: grid; }
	/* Clear the bar so the footer's last line is never under it. */
	.cf-site #footer-outer { padding-bottom: 54px; }
}

/* Salient's back-to-top button would sit on the action bar. */
.cf-site #to-top { display: none !important; }


/* ==========================================================================
   24b. LEGAL PAGES

   Terms, Privacy and Disclaimer are plain prose on the same chrome. They share
   the section rhythm and the container, and nothing else - a legal page should
   read like a document, not like a landing page.
   ========================================================================== */
.cf-home .cf-legal > .row_col_wrap_12 { max-width: 840px; }
.cf-site .cf-legal h1 { margin-bottom: 28px; }
.cf-site .cf-legal__body { font-size: 16.5px; line-height: 1.75; color: var(--slate); }
.cf-site .cf-legal__body p { margin-bottom: 18px !important; }
.cf-site .cf-legal__body p:last-child { margin-bottom: 0 !important; }
.cf-site .cf-legal__body strong { color: var(--ink); }
.cf-site .cf-legal__body h2 { font-size: 24px; margin: 34px 0 12px !important; }
.cf-site .cf-legal__body h3 { font-size: 19px; margin: 26px 0 10px !important; }
.cf-site .cf-legal__body ul { list-style: disc; padding-left: 22px; margin-bottom: 18px; }
.cf-site .cf-legal__body ul li { list-style: disc; margin-bottom: 8px; }
.cf-site .cf-legal__body a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }


/* ==========================================================================
   25. SCROLL REVEAL AND REDUCED MOTION

   Armed by the data-cf-js attribute on <html>, so with JavaScript unavailable the page renders fully
   visible instead of a column of empty space.
   ========================================================================== */
[data-cf-js] [data-reveal],
[data-cf-js] .cf-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .8s var(--ease), transform .8s var(--ease);
}
[data-cf-js] [data-reveal].is-in,
[data-cf-js] .cf-reveal.is-in { opacity: 1; transform: none; }

/* The stagger. A builder element can carry a class but not a data attribute,
   so both spellings exist - see the note in cf-site.js. */
[data-reveal][data-delay="1"], .cf-reveal--1 { transition-delay: .09s; }
[data-reveal][data-delay="2"], .cf-reveal--2 { transition-delay: .18s; }
[data-reveal][data-delay="3"], .cf-reveal--3 { transition-delay: .27s; }
[data-reveal][data-delay="4"], .cf-reveal--4 { transition-delay: .36s; }

/* Touch targets: lift inline links to the 24px WCAG 2.5.8 minimum on phones. */
@media (max-width: 700px) {
	.cf-site #footer-outer .widget_nav_menu li a,
	.cf-site .cf-footer__legal a,
	.cf-site .cf-footer__contact a { display: inline-block; padding-block: 4px; }
	.cf-site .link-arrow { padding-block: 5px; }
}

@media (prefers-reduced-motion: reduce) {
	.cf-site *,
	.cf-site *::before,
	.cf-site *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	[data-cf-js] [data-reveal],
	[data-cf-js] .cf-reveal { opacity: 1; transform: none; }
}

.cf-site .cf-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--red);
	color: #fff;
	padding: 12px 20px;
	z-index: 999;
	font-weight: 600;
}
.cf-site .cf-skip:focus { left: 12px; top: 12px; }


/* ==========================================================================
   25b. CLIENT ROUND 1 (2026-09-23)

   Appended as a dated block rather than edited in above, so the original
   design-match pass stays readable and it is obvious what changed after review.
   ========================================================================== */

/* --- Top bar: one line, and the icons are marks, not tiles -----------------
   The menu-item icon helper wraps every icon in .cf-mi__tile, which is a 32px
   pink rounded square - correct in the Services dropdown, wrong in the top bar,
   where it rendered as a white box around a red glyph. */
.cf-site #header-secondary-outer .cf-mi__tile {
	width: auto;
	height: auto;
	background: none !important;
	border-radius: 0;
	display: inline-flex;
	align-items: center;
}
.cf-site #header-secondary-outer .cf-mi__tile svg { width: 15px; height: 15px; color: var(--red); }
.cf-site #header-secondary-outer ul.sf-menu > li > a:hover .cf-mi__tile svg { color: inherit; }

/* Keep the badge and the tagline on one line; the tagline is what wraps if the
   window is genuinely too narrow, and the bar is hidden below 1100px anyway. */
.cf-site #header-secondary-outer .nectar-center-text { flex-wrap: nowrap; min-width: 0; }
.cf-site .utility__badge { white-space: nowrap; flex: none; }
.cf-site .utility__text {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}
.cf-site #header-secondary-outer ul.sf-menu > li > a { white-space: nowrap; }

/* --- Header CTA: the label must stay white on hover ------------------------
   Salient colours header links with its own hover colour, which turned the
   label red on a red button - an invisible button. */
.cf-site #header-outer header#top ul.buttons > li.cf-nav-cta > a:hover,
.cf-site #header-outer header#top ul.buttons > li.cf-nav-cta > a:focus,
.cf-site #header-outer header#top ul.buttons > li.cf-nav-cta:hover > a,
.cf-site #header-outer header#top ul.buttons > li.cf-nav-cta > a:hover .cf-mi__label,
.cf-site #header-outer header#top ul.buttons > li.cf-nav-cta > a:hover span {
	color: #fff !important;
	background: var(--red) !important;
}

/* --- Buttons must never stretch -------------------------------------------
   A .btn is inline-flex, but inside a column flex container (which the intro
   body and the action rows are) it is a FLEX ITEM, and the default
   align-items:stretch pulls it to the full column width. On a dark button that
   reads as a black slab across the column - which is exactly what it looked
   like. */
.cf-site .btn:not(.btn--block),
.cf-site .link-arrow { align-self: flex-start; }

/* Button groups: one row, one column, buttons flexed side by side.
   Previously each button had its own column, which is why the builder showed a
   stack of near-empty rows. */
.cf-home .cf-actions > .row_col_wrap_12_inner,
.cf-home .cf-actions .wpb_wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}
.cf-home .cf-actions .wpb_column { width: auto !important; float: none !important; padding: 0 !important; }
.cf-home .cf-actions .wpb_wrapper > * { margin: 0; }
.cf-home .cf-ctaband .cf-actions > .row_col_wrap_12_inner,
.cf-home .cf-ctaband .cf-actions .wpb_wrapper { justify-content: center; }

/* --- Hero proof list: three items, three single lines ---------------------- */
.cf-site .hero__proof li { font-size: 13.5px; line-height: 1.4; }
.cf-site .hero__proof span { min-width: 0; }

/* --- About: a real image grid ---------------------------------------------
   The two-image version hung the inset outside the column on a negative offset,
   which left a band of empty white beneath whenever the text column ran taller.
   With a third image the column becomes a grid that fills its own height. */
/* One photograph across the top, two beneath it - "the third image underneath",
   as asked for at review.
   Two things make this behave, and both are easy to get wrong:
   1. The images are ABSOLUTELY POSITIONED. An in-flow image contributes its
      intrinsic height, and `fr` tracks in a container whose own height is
      indefinite resolve against CONTENT - so a 1400px photograph forced the
      grid to 864px however the tracks were written. Out of flow, they
      contribute nothing and the tracks are purely proportional.
   2. On desktop the height comes from the ROW: the column is a grid item and
      stretches to the taller text column, and height:100% is threaded down
      through Salient's two wrapper divs so the grid can see it. That is what
      keeps the imagery level with the copy instead of leaving a band of white
      beneath it - the original complaint.
   Below 980px the column no longer stretches, so the cells fall back to their
   own aspect ratios.
   Never set `aspect-ratio: auto` on these images: the width/height attributes
   give them a ratio the browser uses to reserve space before the file loads. */
.cf-site .intro__media--grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-rows: minmax(0, 1.7fr) minmax(0, 1fr);
	gap: 16px;
	height: 100%;
	min-height: clamp(360px, 38vw, 560px);
}
.cf-home .cf-intro .intro__media-col > .vc_column-inner,
.cf-home .cf-intro .intro__media-col .wpb_wrapper { height: 100%; }

.cf-site .intro__media--grid .intro__media-main,
.cf-site .intro__media--grid .intro__media-sub,
.cf-site .intro__media--grid .intro__media-third {
	position: relative;
	/* The offset layout positions .intro__media-sub with right:-22px and
	   bottom:-30px. Those offsets still apply to a position:relative box, so
	   without clearing them the second cell sat 30px below the third. */
	inset: auto;
	border-radius: var(--r-lg);
	overflow: hidden;
	min-height: 0;
	min-width: 0;
	width: auto;
	border: 0;
}
.cf-site .intro__media--grid .intro__media-main {
	grid-column: 1 / -1;
	grid-row: 1;
	box-shadow: var(--shadow-2);
}
.cf-site .intro__media--grid .intro__media-sub,
.cf-site .intro__media--grid .intro__media-third {
	grid-row: 2;
	box-shadow: var(--shadow-1);
}
.cf-site .intro__media--grid .intro__media-sub { grid-column: 1; }
.cf-site .intro__media--grid .intro__media-third { grid-column: 2; }

.cf-site .intro__media--grid .intro__media-main img,
.cf-site .intro__media--grid .intro__media-sub img,
.cf-site .intro__media--grid .intro__media-third img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: cover;
	display: block;
}
.cf-site .intro__media--grid .intro__stamp { left: -20px; top: -20px; z-index: 3; }

@media (max-width: 980px) {
	/* The column is no longer stretched by a taller sibling, so height:100% has
	   nothing to resolve against - the cells carry their own ratios instead. */
	.cf-site .intro__media--grid { height: auto; min-height: 0; grid-template-rows: auto auto; }
	.cf-site .intro__media--grid .intro__media-main { aspect-ratio: 16 / 10; }
	.cf-site .intro__media--grid .intro__media-sub,
	.cf-site .intro__media--grid .intro__media-third { aspect-ratio: 4 / 3; }
	.cf-site .intro__media--grid .intro__stamp { left: 0; top: -18px; }
}
/* --- Case studies ---------------------------------------------------------
   The job title moves into the card as a red eyebrow; the white badge that used
   to float over the photograph is gone. Cards are equal height because the
   slide is a flex item stretching to the track. */
.cf-site .case__job {
	display: block;
	position: static;
    background: none;
	padding: 0;
	margin-bottom: 10px;
	color: var(--red);
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	line-height: 1.35;
}

/* A softer, tighter lift. The original shadow was a 70px blur at 45% opacity,
   which on a white card over a white section read as a grey smudge rather than
   a raised card. */
.cf-site .case:hover,
.cf-site .review:hover,
.cf-site .svc:hover,
.cf-site .path:hover {
	box-shadow: 0 2px 4px rgba(14,17,22,.04), 0 18px 40px -24px rgba(14,17,22,.28);
	border-color: var(--line);
}
.cf-site .case:hover { transform: translateY(-4px); }
.cf-site .review:hover { transform: translateY(-3px); }

/* --- Reviews: separate the section from the one above it ------------------
   Services, sectors and reviews are all --paper-soft, so the reviews section
   ran into the process section with no edge at all. A hairline plus a short
   top-lit gradient reads as a deliberate division rather than a border. */
.cf-home .cf-reviews {
	border-top: 1px solid var(--line);
	background:
		linear-gradient(180deg, #fff 0%, var(--paper-soft) 180px),
		var(--paper-soft);
}

/* --- Contact ---------------------------------------------------------------
   The form card carries the section's visual weight, so it gets a real edge and
   a deeper shadow, and the field labels get room to breathe. */
.cf-site .cf-form {
	border-color: #E9EDF3;
	box-shadow: 0 1px 2px rgba(14,17,22,.03), 0 24px 60px -34px rgba(14,17,22,.30);
}
.cf-site .form__top { align-items: flex-start; }
.cf-site .field > span.field__label {
	font-size: 13px;
	letter-spacing: .08em;
	color: var(--slate-2);
	margin-bottom: 9px;
}
.cf-site .cf-form input[type="text"],
.cf-site .cf-form input[type="email"],
.cf-site .cf-form input[type="tel"],
.cf-site .cf-form select,
.cf-site .cf-form textarea { border-color: #DFE5EE; }
.cf-site .cf-form input:hover,
.cf-site .cf-form select:hover,
.cf-site .cf-form textarea:hover { border-color: #C9D2E0; }
.cf-site .cf-form .file { padding: 16px; gap: 14px; }

/* CF7's submit is rewritten to a <button> so it can carry the arrow. */
.cf-site .cf-form button.wpcf7-submit svg { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.cf-site .cf-form button.wpcf7-submit:hover svg { transform: translateX(4px); }
.cf-site .cf-form button.wpcf7-submit:disabled { opacity: .6; cursor: progress; }

/* --- CTA band: the social buttons sit on one centred row ------------------- */
.cf-home .cf-ctaband .btn svg { width: 16px; height: 16px; }
.cf-home .cf-ctaband .btn--white:hover,
.cf-home .cf-ctaband .btn--ghost-light:hover { transform: translateY(-2px); }

/* --- Footer ---------------------------------------------------------------- */
.cf-site #footer-outer .cf-footer__logo {
	height: 44px !important;
	width: auto !important;
	max-width: none;
	margin-bottom: 22px;
}

/* Footer links were coming out blue on hover: Salient's own link colour wins
   over a plain `.cf-site #footer-outer ... a:hover`, and these items also carry
   current-menu-item because they are custom links pointing at this page. */
.cf-site #footer-outer .widget_nav_menu li a,
.cf-site #footer-outer .widget_nav_menu li.current-menu-item > a,
.cf-site #footer-outer .widget_nav_menu li.current_page_item > a {
	color: rgba(255,255,255,.62) !important;
}
.cf-site #footer-outer .widget_nav_menu li a:hover,
.cf-site #footer-outer .widget_nav_menu li a:focus,
.cf-site #footer-outer .widget_nav_menu li.current-menu-item > a:hover,
.cf-site #footer-outer .cf-footer__contact a:hover,
.cf-site #footer-outer .cf-footer__legal a:hover {
	color: #fff !important;
}

/* The hover marker: a 1px hairline was invisible against the dark footer at any
   real viewing distance. A 6x2 red dash, vertically centred on the first line
   of the link rather than on the whole (sometimes two-line) box.

   The dash fades in on a DELAY, and that is the fix for it appearing on top of
   the first letter. The link slides 9px right over .25s while the dash sits at
   left:0; for most of that quarter second the text has not moved far enough to
   clear it, so the two overlap. Waiting .18s before fading the dash in means it
   only ever appears once the text is out of its way. */
.cf-site #footer-outer .widget_nav_menu li a::before {
	top: 11px;
	width: 6px;
	height: 2px;
	border-radius: 2px;
	transform: none;
	transition: opacity .18s ease .18s;
}
.cf-site #footer-outer .widget_nav_menu li a:hover::before,
.cf-site #footer-outer .widget_nav_menu li a:focus::before { opacity: 1; }
/* Leaving the link, the dash goes immediately - it must not linger over the
   text as it slides back. */
.cf-site #footer-outer .widget_nav_menu li a:not(:hover)::before {
	transition: opacity .06s ease 0s;
}

/* 13px rather than the design's 9px, because this dash is 6px wide where the
   design's was 4px. It leaves a 7px gap at rest of the hover, and means the
   text has cleared the dash well before the delayed fade-in starts. */
.cf-site #footer-outer .widget_nav_menu li a:hover,
.cf-site #footer-outer .widget_nav_menu li a:focus { padding-left: 13px; }

.cf-site .cf-footer__social a { width: 38px; height: 38px; }
.cf-site .cf-footer__social svg { width: 16px; height: 16px; }
/* Same as the top bar: identical to every other mark, it just does not
   navigate. See the note there. */
.cf-site .cf-footer__social .cf-soc--todo { opacity: 1; cursor: pointer; }

/* The legal links sit under the copyright line, left aligned, as marked up in
   the review. Stacking them explicitly rather than relying on the flex row
   wrapping means they land in the same place at every width. */
.cf-site .cf-footer__bar {
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 12px;
}
.cf-site .cf-footer__legal { margin-left: 0; }

/* --- Small-screen polish --------------------------------------------------
   The design's own rule: a long label such as "WhatsApp 07377 753390" must be
   allowed to wrap rather than force a button wider than the viewport. */
@media (max-width: 560px) {
	.cf-site .btn {
		white-space: normal;
		text-align: center;
		word-break: break-word;
	}
	/* Two stacked buttons at two different widths looks accidental. Full width
	   reads as deliberate and gives a bigger tap target. */
	.cf-home .cf-actions .wpb_wrapper > .btn,
	.cf-home .cf-actions .wpb_wrapper > a.btn {
		width: 100%;
		justify-content: center;
		align-self: stretch;
	}
	.cf-site .path__foot .btn,
	.cf-home .cf-supply .supply__action .btn { width: 100%; justify-content: center; }

	/* The stat strip reads better as a single column than as two cramped ones
	   once the figures start wrapping. */
	.cf-site .hero__stats li { padding: 20px 0; }
	.cf-site .intro__stamp { padding: 14px 16px; }
	.cf-site .intro__stamp b { font-size: 22px; }

	/* Slider arrows and dots: keep them comfortably tappable. */
	.cf-site .slider__btn { width: 46px; height: 46px; }
}

@media (max-width: 420px) {
	/* Below this the two-up stat grid leaves ~150px per figure, which is not
	   enough for "FD30-FD120" without breaking mid-word. */
	.cf-site .hero__stats ul { grid-template-columns: 1fr; }
	.cf-site .hero__stats li { border-left: 0; padding-left: 0; }
	.cf-site .hero__stats li + li { border-top: 1px solid rgba(255,255,255,.1); }
}

/* --- Equal-height cards ---------------------------------------------------
   `height: 100%` on a flex item whose track has an auto height resolves to
   `auto`, and an explicit height also switches OFF align-items:stretch - so the
   cards sized to their own content and came out 25px apart. Letting the track
   stretch them is both simpler and actually equal. */
.cf-site .slider__track { align-items: stretch; }
.cf-site .slider__track > .case,
.cf-site .slider__track > .review {
	height: auto;
	align-self: stretch;
}


/* ==========================================================================
   25c. CLIENT ROUND 2 (2026-09-23)
   ========================================================================== */

/* --- The dark rectangle beside the hero buttons ---------------------------
   The hero's gradient scrim was written as `.cf-hero .row-bg-wrap::after`.
   Salient gives EVERY row a .row-bg-wrap, including inner rows, so that
   descendant selector painted a second copy of the full hero gradient over the
   button row - an 840x97 dark slab sitting on the photograph. The scrim belongs
   to the section row only, so it is matched as a DIRECT CHILD.
   Anything added later that styles .row-bg / .row-bg-wrap must use `>` too. */
.cf-home .cf-hero .row-bg-wrap::after,
.cf-home .cf-supply .row-bg-wrap::after { content: none; }

.cf-home .cf-hero > .row-bg-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
	background:
		linear-gradient(100deg, rgba(14,17,22,.97) 0%, rgba(14,17,22,.9) 34%, rgba(14,17,22,.52) 64%, rgba(14,17,22,.74) 100%),
		radial-gradient(70% 90% at 10% 108%, rgba(205,0,56,.45) 0%, transparent 60%);
}
.cf-home .cf-supply > .row-bg-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
	background: linear-gradient(95deg, var(--ink) 4%, rgba(14,17,22,.93) 44%, rgba(14,17,22,.72) 100%);
}
/* The background IMAGE opacity is on .row-bg, which inner rows also have. */
.cf-home .cf-hero .row-bg { opacity: 1; }
.cf-home .cf-hero > .row-bg-wrap .row-bg { opacity: .6; }
.cf-home .cf-supply .row-bg { opacity: 1; }
.cf-home .cf-supply > .row-bg-wrap .row-bg { opacity: .32; }

/* --- Button rows: stop the column collapsing ------------------------------
   The inner row was a flex container AND the column inside it was width:auto,
   so the column shrank to the width of the first button and everything after it
   wrapped onto its own line - "See our work" fell beneath "More About Us".
   Only the wrapper needs to flex; the column should simply be full width. */
.cf-home .cf-actions > .row_col_wrap_12_inner {
	display: block;
	width: 100% !important;
}
.cf-home .cf-actions .wpb_column {
	width: 100% !important;
	float: none !important;
	padding: 0 !important;
}
.cf-home .cf-actions .wpb_wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	width: 100%;
}
.cf-home .cf-ctaband .cf-actions .wpb_wrapper { justify-content: center; }

/* --- Top bar icon colour --------------------------------------------------
   .cf-mi__tile sets `color: var(--red)` for the Services dropdown. In the top
   bar the icon inherits from the tile, so `color: inherit` on the icon resolved
   to red - and on hover the link turns red-on-red: a solid red square with an
   invisible glyph, which is what the Instagram mark looked like. */
.cf-site #header-secondary-outer .cf-mi__tile { color: inherit; }
.cf-site #header-secondary-outer ul.sf-menu > li > a .cf-mi__ico,
.cf-site #header-secondary-outer .cf-mi__tile svg { color: var(--red); }
.cf-site #header-secondary-outer ul.sf-menu > li.cf-util-social > a .cf-mi__ico { color: rgba(255,255,255,.74); }
.cf-site #header-secondary-outer ul.sf-menu > li > a:hover .cf-mi__ico,
.cf-site #header-secondary-outer ul.sf-menu > li.cf-util-social > a:hover .cf-mi__ico { color: #fff; }

/* A social mark whose URL is still outstanding: present so the row is complete,
   dimmed and inert so it never looks clickable. Same treatment as the footer. */
/* A social mark whose URL is still outstanding looks EXACTLY like the others -
   asked for at review, and right: a dimmed icon reads as a rendering fault
   rather than as missing data. It simply does not navigate; cf-site.js swallows
   the click. Filling the URL in at Settings > CF Fire Doors makes it live. */
.cf-site #header-secondary-outer ul.sf-menu > li.cf-soc--todo > a {
	opacity: 1 !important;
	cursor: pointer;
}

/* --- Footer links: every link state -----------------------------------------
   A footer item rendered purple. getComputedStyle reports the unvisited colour
   for privacy reasons, so the :visited state does not show up in any measuring
   pass - it has to be styled explicitly rather than diagnosed. All four states
   are pinned for the same reason. */
.cf-site #footer-outer .widget_nav_menu li a,
.cf-site #footer-outer .widget_nav_menu li a:visited,
.cf-site #footer-outer .widget_nav_menu li a:active,
.cf-site #footer-outer .cf-footer__contact a:visited,
.cf-site #footer-outer .cf-footer__legal a:visited,
.cf-site #footer-outer .cf-footer__legal a:active {
	color: rgba(255,255,255,.62) !important;
}
.cf-site #footer-outer .widget_nav_menu li a:hover,
.cf-site #footer-outer .widget_nav_menu li a:focus,
.cf-site #footer-outer .widget_nav_menu li a:visited:hover,
.cf-site #footer-outer .cf-footer__contact a:hover,
.cf-site #footer-outer .cf-footer__contact a:focus,
.cf-site #footer-outer .cf-footer__legal a:hover,
.cf-site #footer-outer .cf-footer__legal a:focus {
	color: #fff !important;
}
.cf-site #footer-outer .cf-footer__by a,
.cf-site #footer-outer .cf-footer__by a:visited { color: #fff !important; }

/* --- Footer legal row: back onto the copyright line, right aligned --------- */
.cf-site .cf-footer__bar {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 12px 26px;
	flex-wrap: wrap;
}
.cf-site .cf-footer__legal { margin-left: auto; }

/* --- Compliance band: the photograph fills its column ---------------------
   A fixed 4/3 frame beside a much taller text column left roughly 550px of
   empty black above and below it. The column stretches and the image covers. */
.cf-home .cf-compliance > .row_col_wrap_12 { align-items: stretch; }
.cf-home .cf-compliance .compliance__media-col,
.cf-home .cf-compliance .compliance__media-col > .vc_column-inner,
.cf-home .cf-compliance .compliance__media-col .wpb_wrapper { height: 100%; }
.cf-site .cf-compliance .compliance__media {
	aspect-ratio: auto;
	height: 100%;
	min-height: clamp(340px, 30vw, 560px);
}
.cf-site .cf-compliance .compliance__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (max-width: 920px) {
	.cf-site .cf-compliance .compliance__media { height: auto; aspect-ratio: 4 / 3; min-height: 0; }
}

/* --- Contact: address and hours ------------------------------------------- */
.cf-home .cf-quote__addr > .row_col_wrap_12_inner { grid-template-columns: 1.15fr 1fr; gap: 22px; }
.cf-home .cf-quote__addr p { font-size: 14.5px; line-height: 1.6; }
.cf-site .hours { font-size: 14px; }
.cf-site .hours div { gap: 12px; }
@media (max-width: 520px) {
	.cf-home .cf-quote__addr > .row_col_wrap_12_inner { grid-template-columns: 1fr; }
}


/* ==========================================================================
   25d. CLIENT ROUND 3 (2026-09-23)
   ========================================================================== */

/* --- Hero proof points on one line ---------------------------------------
   Three short claims stacked down the left of an 840px column left two thirds
   of the row empty. Inline they read as one credential strip. They still wrap
   to a column on a phone - three of these will not fit in 335px. */
/* At 12px with 16px gaps the three claims need about 800px of the hero
   column's 840px - roughly 40px of slack, which is enough that a different
   machine rendering the font a shade wider does not tip one onto a second line.
   At 12.5px it fitted with 2px to spare, which is not a margin, it is luck.
   nowrap keeps a claim whole if it ever does have to move down. */
.cf-site .hero__proof {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
}
.cf-site .hero__proof li { font-size: 13px; line-height: 1.35; white-space: nowrap; }
.cf-site .hero__proof svg { width: 15px; height: 15px; }

/* Below this the hero column itself is narrower than the strip needs, so it
   goes back to a stacked list at a comfortable reading size. */
@media (max-width: 940px) {
	.cf-site .hero__proof { display: grid; gap: 12px; }
	.cf-site .hero__proof li { font-size: 13.5px; white-space: normal; }
	.cf-site .hero__proof svg { width: 16px; height: 16px; }
}

/* --- Compliance band: the same three-image grid as the About column -------
   Built exactly like .intro__media--grid: absolutely positioned images so they
   contribute no intrinsic height, and the height comes from the stretched
   column. See the long note on that block before changing either. */
.cf-site .cf-compliance .compliance__media.cf-media--grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-rows: minmax(0, 1.7fr) minmax(0, 1fr);
	gap: 16px;
	height: 100%;
	min-height: clamp(340px, 30vw, 560px);
	border-radius: 0;
	overflow: visible;
	aspect-ratio: auto;
}
.cf-site .cf-compliance .cf-media--grid .cf-media__main,
.cf-site .cf-compliance .cf-media--grid .cf-media__sub,
.cf-site .cf-compliance .cf-media--grid .cf-media__third {
	position: relative;
	border-radius: var(--r-lg);
	overflow: hidden;
	min-height: 0;
	min-width: 0;
}
.cf-site .cf-compliance .cf-media--grid .cf-media__main { grid-column: 1 / -1; grid-row: 1; }
.cf-site .cf-compliance .cf-media--grid .cf-media__sub { grid-column: 1; grid-row: 2; }
.cf-site .cf-compliance .cf-media--grid .cf-media__third { grid-column: 2; grid-row: 2; }
.cf-site .cf-compliance .cf-media--grid img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* The dark scrim belongs on the main photograph, not on the whole grid. */
.cf-site .cf-compliance .cf-media--grid::after { content: none; }
.cf-site .cf-compliance .cf-media--grid .cf-media__main::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(200deg, transparent 40%, rgba(14,17,22,.6) 100%);
}
.cf-site .cf-compliance .cf-media--grid .compliance__badge { left: 20px; bottom: 20px; z-index: 4; }

@media (max-width: 920px) {
	.cf-site .cf-compliance .compliance__media.cf-media--grid {
		height: auto;
		min-height: 0;
		grid-template-rows: auto auto;
	}
	.cf-site .cf-compliance .cf-media--grid .cf-media__main { aspect-ratio: 16 / 10; }
	.cf-site .cf-compliance .cf-media--grid .cf-media__sub,
	.cf-site .cf-compliance .cf-media--grid .cf-media__third { aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
	/* Taken out of the overlay and dropped below the photographs. It has to span
	   BOTH grid columns: as a static child of a two-column grid it becomes a
	   grid item, which pinned it to one 160px column with the other half empty. */
	.cf-site .cf-compliance .cf-media--grid .compliance__badge {
		position: static;
		grid-column: 1 / -1;
		max-width: none;
		width: 100%;
		margin-top: 16px;
	}
}


/* ==========================================================================
   25e. CLIENT ROUND 4 (2026-09-23)
   ========================================================================== */

/* --- Hero background slideshow -------------------------------------------
   The element is authored inside the hero column, so it has to be pulled out
   to full-bleed and pushed behind the copy. z-index:-1 puts it behind the
   container's own content; the container is already position:relative with a
   stacking context, which is what makes that reliable.
   It carries its OWN scrim: the row's scrim lives inside .row-bg-wrap, which
   paints UNDER this, so a scrim down there would never be seen. */
/* The slideshow lives in its own zero-height column so that the only positioned
   ancestor between it and the row is .row_col_wrap_12. Put it in hero__inner
   instead and it positions against THAT - 840px wide, offset down the page -
   which is exactly what went wrong first time. */
.cf-home .cf-hero .cf-hero__bg,
.cf-home .cf-hero .cf-hero__bg > .vc_column-inner,
.cf-home .cf-hero .cf-hero__bg .wpb_wrapper {
	position: static;
	height: 0;
	min-height: 0;
	margin: 0 !important;
	padding: 0 !important;
}

.cf-home .cf-hero .cf-slides {
	position: absolute;
	inset: 0;
	z-index: -1;
	margin-left: calc(50% - 50vw);
	width: 100vw;
	overflow: hidden;
	pointer-events: none;
}
.cf-site .cf-slides__item {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.4s var(--ease);
}
.cf-site .cf-slides__item.is-on { opacity: 1; }
.cf-site .cf-slides__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: .6;
}
/* The scrim, matching the single-image hero exactly. */
.cf-home .cf-hero .cf-slides::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		linear-gradient(100deg, rgba(14,17,22,.97) 0%, rgba(14,17,22,.9) 34%, rgba(14,17,22,.52) 64%, rgba(14,17,22,.74) 100%),
		radial-gradient(70% 90% at 10% 108%, rgba(205,0,56,.45) 0%, transparent 60%);
}
/* A very slow drift so a still photograph does not look frozen between fades.
   Scoped to the active slide so only one image is ever animating. */
.cf-site .cf-slides--drift .cf-slides__item.is-on .cf-slides__img {
	animation: cf-slide-drift 14s ease-out forwards;
}
@keyframes cf-slide-drift {
	from { transform: scale(1); }
	to   { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
	.cf-site .cf-slides__item { transition: none; }
	.cf-site .cf-slides--drift .cf-slides__item.is-on .cf-slides__img { animation: none; }
}

/* --- Services dropdown ----------------------------------------------------
   Salient hides each dropdown item (opacity:0, translateY(13px)) and animates
   it in from its own hover JavaScript. This build opens the panel in CSS, so
   that JavaScript never runs and the panel rendered as an empty white box.
   The items are simply shown; the panel's own transition does the animating. */
.cf-site #header-outer header#top nav ul.sub-menu li {
	opacity: 1 !important;
	transform: none !important;
}
/* Nothing in this dropdown is ever Salient's accent blue - not on hover, not
   for the current page. Every one of these items points at the page it is
   already on, so they all carry current-menu-item. */
.cf-site #header-outer header#top nav ul.sub-menu li a,
.cf-site #header-outer header#top nav ul.sub-menu li.current-menu-item > a,
.cf-site #header-outer header#top nav ul.sub-menu li.current_page_item > a {
	background-color: transparent !important;
	color: var(--ink) !important;
}
.cf-site #header-outer header#top nav ul.sub-menu li a:hover,
.cf-site #header-outer header#top nav ul.sub-menu li a:focus,
.cf-site #header-outer header#top nav ul.sub-menu li.current-menu-item > a:hover {
	background-color: var(--red-05) !important;
	color: var(--red) !important;
}

/* --- Button rows: centre, do not top-align -------------------------------
   `align-self: flex-start` stops a button stretching inside a COLUMN flex
   container, but in the action rows - which are ROW flex - it pinned a short
   link to the top of a 59px button. Inside .cf-actions they centre instead. */
.cf-home .cf-actions .wpb_wrapper > .btn,
.cf-home .cf-actions .wpb_wrapper > .link-arrow { align-self: center; }

/* --- Spacing: a little tighter, and sections that read as separate --------
   Two soft-grey sections meeting with 214px of combined padding and no edge
   read as one long gap. The rhythm comes down about 15%, and the contact
   section gets the same hairline the reviews section already had. */
.cf-site { --section-y: clamp(56px, 6.4vw, 104px); }

/* White, with the hairline kept. The gradient here existed because the section
   above was also tinted and the two ran together; the gallery above it is the
   tinted one now, so the colour change is the division and a gradient back into
   the tint would undo it. */
.cf-home .cf-quote {
	border-top: 1px solid var(--line);
	background: var(--paper);
}
/* The carousels already carry their own bottom margin under the arrows. */
.cf-home .cf-reviews .slider__nav { margin-top: clamp(20px, 2.2vw, 30px); }
.cf-home .cf-cases .slider__nav { margin-top: clamp(20px, 2.2vw, 30px); }

/* --- Contact: the map fills the rest of the column ------------------------
   The form is the taller column, so the left column used to stop short and
   leave a band of grey beside it. Both columns now stretch and the map takes
   whatever height is left. */
.cf-home .cf-quote > .row_col_wrap_12 { align-items: stretch; }
.cf-home .cf-quote > .row_col_wrap_12 > .wpb_column:not(.cf-form),
.cf-home .cf-quote > .row_col_wrap_12 > .wpb_column:not(.cf-form) > .vc_column-inner,
.cf-home .cf-quote > .row_col_wrap_12 > .wpb_column:not(.cf-form) > .vc_column-inner > .wpb_wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.cf-site .quote__map {
	flex: 1;
	display: flex;
	min-height: clamp(220px, 20vw, 260px);
}
.cf-site .quote__map iframe { height: 100%; flex: 1; }

@media (max-width: 980px) {
	.cf-home .cf-quote > .row_col_wrap_12 > .wpb_column:not(.cf-form),
	.cf-home .cf-quote > .row_col_wrap_12 > .wpb_column:not(.cf-form) > .vc_column-inner,
	.cf-home .cf-quote > .row_col_wrap_12 > .wpb_column:not(.cf-form) > .vc_column-inner > .wpb_wrapper {
		display: block;
		height: auto;
	}
	.cf-site .quote__map { display: block; }
	.cf-site .quote__map iframe { height: clamp(220px, 40vw, 300px); }
}

/* --- Submit button -------------------------------------------------------
   The disabled state is NOT a bug: Contact Form 7 disables the submit until the
   consent box is ticked, and re-enables it on change. At 60% red that read as a
   broken button, so it now looks deliberately inactive instead. */
.cf-site .cf-form button.wpcf7-submit,
.cf-site .cf-form input[type="submit"] {
	background: var(--red) !important;
	border-color: var(--red) !important;
	color: #fff !important;
	opacity: 1;
}
.cf-site .cf-form button.wpcf7-submit:hover:not(:disabled),
.cf-site .cf-form button.wpcf7-submit:focus:not(:disabled),
.cf-site .cf-form input[type="submit"]:hover:not(:disabled) {
	background: var(--red-700) !important;
	border-color: var(--red-700) !important;
	color: #fff !important;
	opacity: 1;
}
.cf-site .cf-form button.wpcf7-submit:disabled,
.cf-site .cf-form input[type="submit"]:disabled {
	background: #E4E8EE !important;
	border-color: #E4E8EE !important;
	color: #8A93A3 !important;
	opacity: 1;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}
.cf-site .cf-form button.wpcf7-submit:disabled:hover { transform: none; box-shadow: none; }
/* Tell the visitor why it is inactive rather than leaving them to guess. */
.cf-site .cf-form .consent { align-items: center; }
.cf-site .cf-form .cf-consent-hint {
	display: block;
	margin-top: 10px;
	font-size: 13px;
	color: var(--slate-2);
	text-align: center;
}
/* Once the box is ticked the button is live and the hint has nothing to say. */
.cf-site .cf-form form:has(button.wpcf7-submit:not(:disabled)) .cf-consent-hint,
.cf-site .cf-form form:has(input[type="submit"]:not(:disabled)) .cf-consent-hint {
	display: none;
}

/* --- Footer legal row on the copyright line ------------------------------
   The two blocks together came to 1183px inside a 1184px bar, so the legal
   links dropped to a second line. Tighter gaps and a slightly smaller size
   give them room to sit where they belong. */
.cf-site .cf-footer__bar { font-size: 13px; gap: 10px 20px; }
.cf-site .cf-footer__reg { gap: 6px 16px; }
.cf-site .cf-footer__legal { gap: 6px 16px; }


/* ==========================================================================
   25f. CLIENT ROUND 6 (2026-09-23)
   ========================================================================== */

/* --- Footer link dash: overlap made structurally impossible ---------------
   Delaying the fade was not enough - the dash still caught the first letter
   mid-slide. The link now carries the space permanently and the text never
   moves; only the dash fades. The list is pulled back by the same amount so the
   links still sit flush under their column heading. */
.cf-site #footer-outer .widget_nav_menu ul.menu,
.cf-site #footer-outer .widget_nav_menu > div > ul { margin-left: -13px; }

.cf-site #footer-outer .widget_nav_menu li a,
.cf-site #footer-outer .widget_nav_menu li a:hover,
.cf-site #footer-outer .widget_nav_menu li a:focus {
	padding-left: 13px !important;
	transition: color .25s;
}
.cf-site #footer-outer .widget_nav_menu li a::before {
	left: 0;
	top: 11px;
	width: 6px;
	height: 2px;
	border-radius: 2px;
	transform: none;
	transition: opacity .2s ease;
}

/* --- Footer social icons: white on hover, never Salient's blue ------------ */
.cf-site .cf-footer__social a,
.cf-site .cf-footer__social a:visited { color: #fff !important; }
.cf-site .cf-footer__social a:hover,
.cf-site .cf-footer__social a:focus,
.cf-site .cf-footer__social a:active {
	color: #fff !important;
	background: var(--red) !important;
	border-color: var(--red) !important;
}
.cf-site .cf-footer__social a svg,
.cf-site .cf-footer__social a:hover svg,
.cf-site .cf-footer__social a:focus svg { color: #fff !important; fill: currentColor; }

/* --- Contact form: the upload hint uses the full width --------------------
   CF7 wraps every control in span.wpcf7-form-control-wrap, and the form styles
   give that display:block; width:100%. Inside .file - which is a flex row - it
   was a flex item claiming the whole width, so the text beside the icon was
   squeezed to 188px of a 492px box and the hint ran to three lines. The input
   itself is visually hidden, so its wrapper should take no space at all. */
.cf-site .cf-form .file { align-items: center; }
.cf-site .cf-form .file > span:not(.wpcf7-form-control-wrap) {
	flex: 1 1 auto;
	min-width: 0;
}
.cf-site .cf-form .file .wpcf7-form-control-wrap {
	position: absolute;
	width: 1px !important;
	height: 1px;
	overflow: hidden;
	flex: 0 0 auto;
}
.cf-site .cf-form .file .file__hint {
	display: block;
	font-size: 13px;
	line-height: 1.45;
	max-width: none;
	white-space: normal;
}

/* --- Section rhythm: one value, top and bottom, everywhere ----------------
   Several sections had been given their own vertical padding over the rounds
   (the supply band, the CTA band, the accreditation strip), so the gaps between
   them no longer stepped evenly. They are restated here against the same token
   so the page reads with one rhythm. The two strips that are deliberately
   shallower - the accreditation bar and the CTA band - are set as a fraction of
   it rather than as their own numbers. */
.cf-home .cf-section > .row_col_wrap_12 {
	padding-top: var(--section-y);
	padding-bottom: var(--section-y);
}
.cf-home .cf-hero > .row_col_wrap_12 { padding-top: 0; padding-bottom: 0; }
.cf-home .cf-accr > .row_col_wrap_12 { padding-top: 0; padding-bottom: 0; }
.cf-home .cf-supply > .row_col_wrap_12 {
	padding-top: calc(var(--section-y) * .62);
	padding-bottom: calc(var(--section-y) * .62);
}
.cf-home .cf-ctaband > .row_col_wrap_12 {
	padding-top: calc(var(--section-y) * .44);
	padding-bottom: calc(var(--section-y) * .44);
}

/* --- Mobile ---------------------------------------------------------------- */
@media (max-width: 700px) {
	/* The callout over the compliance photographs was pinned to 250px, which on
	   a phone left it as a narrow column with half the row empty beside it. */
	.cf-site .cf-compliance .cf-media--grid .compliance__badge,
	.cf-site .compliance__badge {
		max-width: none;
		width: 100%;
	}

	/* The copyright line wrapped into four ragged rows. Stacked deliberately,
	   with the legal links as their own row. */
	.cf-site .cf-footer__bar {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		text-align: left;
	}
	.cf-site .cf-footer__reg {
		display: grid;
		gap: 6px;
		width: 100%;
	}
	.cf-site .cf-footer__legal {
		gap: 8px 18px;
		width: 100%;
		margin-left: 0;
	}
	.cf-site .cf-footer__by { margin-top: 2px; }
}


/* ==========================================================================
   25g. CLIENT ROUND 7 (2026-09-23) - the mobile drawer, and tighter rhythm
   ========================================================================== */

/* --- Rhythm: a step tighter, and tighter still around the carousels -------
   The reviews and contact sections sit either side of the page's deepest
   stretch of whitespace, because a carousel's arrows already leave clear air
   under the cards before the section padding starts. */
.cf-site { --section-y: clamp(48px, 5.4vw, 88px); }

/* Every section stays BALANCED top-to-bottom - that was the earlier
   requirement and it still holds. The carousel sections and the contact
   section simply use a smaller symmetric value: a carousel already leaves
   clear air under its cards for the arrows and dots, so the same padding
   there reads as a bigger gap than it measures. */
.cf-home .cf-cases > .row_col_wrap_12,
.cf-home .cf-reviews > .row_col_wrap_12,
.cf-home .cf-quote > .row_col_wrap_12 {
	padding-top: calc(var(--section-y) * .78);
	padding-bottom: calc(var(--section-y) * .78);
}
/* The arrows sit closer to the cards than the section padding suggests. */
.cf-home .cf-cases .slider__nav,
.cf-home .cf-reviews .slider__nav { margin-top: clamp(18px, 1.8vw, 26px); }

/* ==========================================================================
   25h. CLIENT ROUND 10 (2026-09-24) - the footer copyright row
   ========================================================================== */

/* The legal links had dropped onto a second row, with blank space beside the
   copyright line. It was not a wrapping bug in the bar: Salient's #copyright
   row is TWO columns, and this build's whole footer bar sits in the first one,
   which Salient caps at `max-width: 70%` - 829px. The bar's content measures
   1116px, so the nav had nowhere to go but down.

   The blank area to its right was the second column: Salient's own copyright
   social list, which is empty here because no copyright social icons are
   configured. Hiding it and letting the first column use the row's full
   1184px puts both groups back on one line, with space-between distributing
   the remaining ~68px. */
.cf-site #copyright .col.span_5 {
	width: 100% !important;
	max-width: none !important;
}
.cf-site #copyright .col.span_7 { display: none !important; }

/* Between roughly 1000px and 1250px the row is still narrower than the 1116px
   the two groups measure. Letting the copyright group shrink and wrap its own
   items keeps the legal links on the right of the SAME row rather than
   dropping the whole nav to a second line. */
/* Shrink, never grow: growing it fills the row and collapses the gap between
   the two groups to the flex gap, which reads as unbalanced. */
.cf-site .cf-footer__bar > .cf-footer__reg { flex: 0 1 auto; min-width: 0; }
.cf-site .cf-footer__bar > .cf-footer__legal { flex: 0 0 auto; }

/* A wrapping flex container WRAPS before it shrinks, so `flex-shrink` alone
   was never going to hold the row together between ~1000px and 1250px - the
   nav still dropped whole. Above the mobile breakpoint the row is not allowed
   to wrap, which forces the copyright group to shrink and wrap its own items
   instead. Below it, wrapping is what should happen, so it is left alone. */
@media (min-width: 1000px) {
	.cf-site .cf-footer__bar { flex-wrap: nowrap; }
}



/* --- Service card with a photograph ---------------------------------------
   Optional variant added for the simplified homepage, where the client asked
   for services to be shown with images. The card keeps its existing frame,
   hover lift and red top rule; the photo sits flush at the top, so the padding
   moves off the card and onto the text below it.
   A card with no photo is untouched. */
.cf-site .svc--img { padding: 0; }
.cf-site .svc--img .svc__media {
	position: relative;
	margin: 0;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--line-soft);
}
.cf-site .svc--img .svc__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--ease);
}
.cf-site .svc--img:hover .svc__media img { transform: scale(1.04); }

/* The text block carries the padding the card used to have. */
.cf-site .svc--img > :not(.svc__media) {
	padding-left: clamp(22px, 2.2vw, 30px);
	padding-right: clamp(22px, 2.2vw, 30px);
}
.cf-site .svc--img > h3 { margin-top: clamp(20px, 2vw, 26px); }
.cf-site .svc--img > .svc__foot { padding-bottom: clamp(22px, 2.2vw, 30px); margin-top: auto; }


/* --- Opening hours card ---------------------------------------------------
   Sits in the sixth cell of the five-service grid, where five services would
   otherwise leave a hole.

   It was an inverted ink panel first time round and read as too heavy beside
   the photo cards - a solid black block among five white ones pulls the eye
   straight to the opening times, which are not the most important thing in the
   row. It is now the same white card as its neighbours, carrying its weight in
   type and spacing instead of in fill.

   Today's row and the status pill are set by cf-site.js from the visitor's
   clock; the server-rendered guess is corrected on load. */
.cf-site .cf-hrs { padding: clamp(24px, 2.4vw, 32px); }

.cf-site .cf-hrs__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 6px;
}
.cf-site .cf-hrs .h3 { margin: 0; }

.cf-site .cf-hrs__status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: 13px;
	white-space: nowrap;
	color: var(--slate);
}
.cf-site .cf-hrs__status::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}
.cf-site .cf-hrs__status.is-open { color: #1a9d63; }

.cf-site .cf-hrs__list { list-style: none; margin: 14px 0 0; padding: 0; }
.cf-site .cf-hrs__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 9px 0;
	font-size: 14.5px;
	line-height: 1.4;
	color: var(--ink);
}
.cf-site .cf-hrs__row + .cf-hrs__row { border-top: 1px solid var(--line-soft); }
.cf-site .cf-hrs__day { font-weight: 600; color: var(--slate); }
.cf-site .cf-hrs__time { font-variant-numeric: tabular-nums; }
.cf-site .cf-hrs__row.is-closed .cf-hrs__time { color: var(--slate); }

/* Today: the day name and time in red. No fill and no marker - on a white card
   the colour alone is enough, and a tinted band brings the weight straight
   back. */
.cf-site .cf-hrs__row.is-today .cf-hrs__day,
.cf-site .cf-hrs__row.is-today .cf-hrs__time { color: var(--red); font-weight: 700; }

.cf-site .cf-hrs__note {
	margin: 16px 0 0;
	font-size: 13px;
	color: var(--slate);
	line-height: 1.55;
}
.cf-site .cf-hrs .svc__foot { margin-top: auto; padding-top: 18px; }
.cf-site .cf-hrs__call { font-size: 16px; }


/* --- Site photo gallery ---------------------------------------------------
   The client's site photography is portrait from a phone, so the cells are 3:4
   and the images are cropped to that on upload rather than being squeezed into
   a landscape frame by object-fit.
   auto-fit rather than a fixed column count: three across on a desktop, two on
   a tablet, two on a phone, with no breakpoint doing the arithmetic. */
.cf-site .cf-gal {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(clamp(150px, 26vw, 300px), 1fr));
	gap: clamp(12px, 1.4vw, 20px);
	margin-top: clamp(30px, 3vw, 44px);
}
.cf-site .cf-gal__item {
	position: relative;
	margin: 0;
	border-radius: var(--r-lg);
	overflow: hidden;
	background: var(--line-soft);
	border: 1px solid var(--line);
}
.cf-site .cf-gal__link {
	display: block;
	position: relative;
	line-height: 0;
}
/* A quiet cue that the photograph opens: the tile lifts its image and a
   magnifier fades in. Without one, nothing says these are clickable. */
.cf-site .cf-gal__link::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(14,17,22,.28) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='16' cy='16' r='9'/%3E%3Cpath d='M23 23l7 7M12 16h8M16 12v8'/%3E%3C/svg%3E") center / 38px no-repeat;
	opacity: 0;
	transition: opacity .35s var(--ease);
	pointer-events: none;
}
.cf-site .cf-gal__item:hover .cf-gal__link::after,
.cf-site .cf-gal__link:focus-visible::after { opacity: 1; }

.cf-site .cf-gal__item img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	transition: transform .6s var(--ease);
}
.cf-site .cf-gal__item:hover img { transform: scale(1.04); }

.cf-site .cf-gal__item figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 26px 16px 14px;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	background: linear-gradient(180deg, transparent, rgba(14,17,22,.78));
}


/* ==========================================================================
   26. SALIENT SPECIFICITY TAIL - MUST STAY LAST IN THIS FILE

   Salient's spacing and heading rules outrank the obvious selectors above, and
   every one of them is a silent defeat rather than an error:

     .wpb_text_column > .wpb_wrapper > :last-child {margin-bottom:0}   (0,3,0)
     .row .col p:last-child {padding-bottom:0}                          (0,3,1)
     .row .col h3, .row .col h4 {margin-bottom:8px}                     (0,2,1)
     .wpb_wrapper h2.vc_custom_heading                                  (0,2,1)
     skin-material p {padding-bottom:1.5em}

   A selector like .cf-site .svc h3 is only (0,2,1) and ties or loses. These
   rules restate the design's values with enough weight to win. Anything added
   after this block that touches headings or paragraph spacing inside a section
   must be checked against it.
   ========================================================================== */
.cf-site .cf-section p,
.cf-site .cf-section .wpb_text_column p,
.cf-site .cf-section .wpb_wrapper p {
	padding-bottom: 0 !important;
	margin-bottom: 0;
}

.cf-site .cf-section h1,
.cf-site .cf-section h2,
.cf-site .cf-section h3,
.cf-site .cf-section h4,
.cf-site .cf-section .wpb_wrapper h1,
.cf-site .cf-section .wpb_wrapper h2,
.cf-site .cf-section .wpb_wrapper h3,
.cf-site .cf-section .wpb_wrapper h4 {
	margin-bottom: 0;
	font-family: var(--ff-display);
	letter-spacing: -.02em;
	text-transform: none;
}

/* The headings whose tracking is NOT the -0.02em default. The rule above ties
   with each of these on specificity and wins on source order, so they have to
   be restated after it - this is the whole reason this block exists. */
.cf-site .cf-section.cf-hero h1 { letter-spacing: -.035em; }
.cf-site .cf-section .h1 { letter-spacing: -.028em; }
.cf-site .cf-section .h2 { letter-spacing: -.025em; }
.cf-site .cf-section .h3 { letter-spacing: -.018em; }
.cf-site .cf-section .h4 { letter-spacing: -.01em; }
.cf-site .cf-section.cf-supply .section-head h2 { letter-spacing: -.022em; }
.cf-site .cf-section.cf-ctaband h2 { letter-spacing: -.02em; }
.cf-site .cf-section .sector__body h3 { letter-spacing: -.005em; }
.cf-site .cf-section .reg b,
.cf-site .cf-section .route b,
.cf-site .cf-section .intro__point b,
.cf-site .cf-section .review__who b { letter-spacing: -.01em; }

/* Restate the component margins the rules above have just zeroed. */
.cf-site .cf-section .svc h3 { margin-bottom: 12px; }
.cf-site .cf-section .path__body h3 { margin-bottom: 12px; }
.cf-site .cf-section .case__body h3 { margin-bottom: 14px; }
.cf-site .cf-section .step h3 { margin-bottom: 10px; }
.cf-site .cf-section .section-head .lead { margin-top: 20px; }
/* The hero's sub-line sits 26px under the h1, not the standard 20px. It has to
   be restated HERE: the rule in section 9 ties with the one above on
   specificity and loses on source order. */
.cf-site .cf-section.cf-hero .section-head .lead { margin-top: 26px; }
/* Likewise the two headings whose lead the design spaces differently. */
.cf-site .cf-section.cf-supply .section-head .lead { margin-top: 13px; }
.cf-site .cf-section.cf-ctaband .section-head .lead { margin-top: 10px; }
.cf-site .cf-section .compliance__badge span { margin-top: 6px; }
.cf-site .cf-section .quote__addr h3,
.cf-site .cf-section .cf-quote__addr h3 { margin-bottom: 10px; }
.cf-site .cf-section .intro__copy p + p { margin-top: 18px; }
.cf-site .cf-section .case__job { margin-bottom: 10px; }
.cf-site .cf-section .hero__proof li { font-size: 13px; }
/* The stacked version needs its size restating here too: the rule above is
   (0,3,1) and the one inside the 940px query is (0,2,1), so the query loses on
   specificity no matter which viewport is being rendered. */
@media (max-width: 940px) {
	.cf-site .cf-section .hero__proof li { font-size: 13.5px; }
}

/* Salient's material skin gives every list item a bottom border in some
   contexts; none of the design's lists have one. */
.cf-site .cf-section ul li { border: 0; list-style: none; }
.cf-site .cf-section .reg li,
.cf-site .cf-section .route { border: 1px solid rgba(255,255,255,.12); }
.cf-site .cf-section .route { border-color: var(--line); }