/* ==========================================================================
   CRCS Legal
   Every value in this file was measured from the live Elementor build with a
   computed-style probe. Where the Elementor kit and the served CSS disagreed,
   the served CSS won.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   -------------------------------------------------------------------------- */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/poppins-400.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/poppins-500.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/poppins-600.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/poppins-700.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Questrial';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/questrial-400.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
	--navy: #1d3887;
	--navy-2: #253c82;
	--navy-header: rgba(29, 56, 135, 0.74);   /* #1D3887BD */
	--navy-caption: rgba(29, 56, 135, 0.85);  /* #1D3887D9 */
	--navy-card: rgba(29, 56, 135, 0.75);     /* #1D3887BF */
	--green: #3ca838;
	--green-dark: #34922f;
	--text: #474747;
	--text-black: #000;
	--muted: #777;
	--meta: #adadad;
	--link: #838383;
	--grey: #f5f5f5;
	--white: #fff;

	--font-head: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-body: 'Questrial', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--wide: 1600px;
	--team-wide: 1500px;
	--content: 1140px;
	--narrow: 650px;
	--cta: 550px;

	--radius: 6px;
	--shadow-card: 0 0 10px 0 rgba(0, 0, 0, 0.04);
	--shadow-post: 0 0 10px 0 rgba(0, 0, 0, 0.05);
}

/* --------------------------------------------------------------------------
   3. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 24px;
	color: var(--text);
	background: var(--white);
	overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
.split > *, .grid-2 > *, .imgpair > *, .services > *, .team > *, .cards > * { min-width: 0; }
img { border: 0; }

a { color: var(--link); text-decoration: none; transition: color 0.2s ease; }
a:hover, a:focus { color: var(--navy); }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); margin: 0; color: var(--navy); }
p { margin: 0 0 14.4px; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 16px; padding-left: 22px; }

button { font: inherit; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--green);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 8px;
	z-index: 999;
	padding: 12px 20px;
	background: var(--navy);
	color: var(--white);
	border-radius: 0 0 var(--radius) var(--radius);
}
.skip-link:focus { top: 0; color: var(--white); }

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
/* --cw is set per section from live's own content_width; the variant class is
   the fallback when live left it unset. */
.wrap {
	width: calc(100% - 20px);
	max-width: var(--cw, var(--wide));
	margin-inline: auto;
	padding-inline: 0;
}
/* A single-column band sits 10px further in on each side than a two-column one
   and caps 20px narrower - measured on live at both 1440 and 1920. */
.wrap--content {
	width: calc(100% - 40px);
	max-width: calc(var(--cw, var(--content)) - 20px);
}
.wrap--team { max-width: var(--cw, var(--team-wide)); }
.wrap--narrow { max-width: var(--cw, var(--narrow)); }
.wrap--cta { max-width: var(--cw, var(--cta)); }

/* Live sets top and bottom padding per section - 150/100 on one band, 100/100
   on the next, 80/80 on the testimonials, 40/40 on a CTA. A blanket 150px was
   the single largest source of vertical drift against live. */
.section { position: relative; padding-block: var(--pt, 150px) var(--pb, 150px); }
.section--grey { background: var(--grey); }
.section--tight { padding-block: var(--pt, 100px) var(--pb, 100px); }
.section--flush-bottom { padding-bottom: 0; }

.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: center; }
.grid-2--top { align-items: flex-start; }
.grid-2--wide-gap { gap: 60px; }
/* Contact page: live's two "col-50" columns actually render 497px / 922px at a
   1440 viewport (Elementor writes an inline width that overrides the class).
   Reproduced as the same ratio rather than a literal 50/50. */
/* align-items:stretch, not start: the navy panel is 358px of content beside a
   470px form, and starting it left a slab of empty white down the right of it.
   Stretching runs the panel the full height of the row, cards at the top. The
   gutter was 20px, which is tight for a two-column band at this width. */
.grid-2--contact { grid-template-columns: minmax(0, 497fr) minmax(0, 922fr); gap: 40px; align-items: stretch; }
.grid-2--contact > .contact-panel { align-self: stretch; }

/* --------------------------------------------------------------------------
   5. Type helpers
   -------------------------------------------------------------------------- */
.eyebrow {
	font-family: var(--font-head);
	font-size: 18px;
	line-height: 18px;
	font-weight: 600;
	color: var(--navy);
	margin: 0 0 30px;
}
/* Measured on live: 8px from the eyebrow to the rule. The 30px above still
   applies when a heading follows the eyebrow directly. */
.eyebrow:has(+ .rule) { margin-bottom: 8px; }
.eyebrow--light { color: var(--white); }

.rule {
	width: var(--rule-w, 61px);
	height: 0;
	color: inherit;
	border: 0;
	border-top: 4px solid var(--green);
	margin: 0 0 28px;
}
.rule--center { width: var(--rule-w, 45px); margin-inline: auto; }
.rule--light { border-top-width: 3px; border-top-color: var(--white); }

.h-section {
	/* Size comes from the section, because live sets it per heading and
	   overrides it again at <=767. Unitless line-height so it follows. */
	font-size: var(--h-size, 40px);
	line-height: 1.2;
	font-weight: 700;
	color: var(--navy);
	margin: 0 0 24px;
}
.h-section--light { color: var(--white); }
.h-section--caps { text-transform: capitalize; }
.center { text-align: center; }

.prose { color: var(--text-black); }
.prose p { font-size: 16px; line-height: 26px; margin-bottom: 14.4px; }
.prose ul, .prose ol { font-size: 16px; line-height: 26px; margin-bottom: 16px; }
.prose li { margin-bottom: 4px; }
/* Live renders in-body links grey (#838383) with no underline. The build was
   rendering them at the body colour, which made them indistinguishable from
   ordinary text - worse than live on both counts. Matching live here; the
   lack of an underline is inherited, not introduced (see 00-review.md). */
.prose a { color: var(--link); text-decoration: none; }
.prose a:hover, .prose a:focus { color: var(--navy); text-decoration: underline; }
.prose strong { font-weight: 700; }
.prose h2 { font-size: 36px; line-height: 43.2px; font-weight: 600; margin: 8px 0 16px; }
.prose h3 { font-size: 28px; line-height: 34px; font-weight: 600; margin: 8px 0 14px; }
.prose h4 { font-size: 22px; line-height: 28px; font-weight: 600; margin: 8px 0 12px; }
.prose img { border-radius: var(--radius); margin-block: 16px; }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
	display: inline-block;
	font-family: var(--font-head);
	font-size: 15px;
	line-height: 15px;
	font-weight: 500;
	color: var(--white);
	background: var(--green);
	padding: 12px 24px;
	border: 0;
	border-radius: var(--radius);
	text-align: center;
	cursor: pointer;
	transition: transform 0.2s ease, background-color 0.2s ease;
}
/* Live's buttons turn NAVY on hover and shrink to 0.9 - measured
   #3CA838 -> #1D3887 with matrix(0.9). The build darkened the green and
   shrank to 0.97, so every button on the site behaved differently. */
.btn:hover, .btn:focus { color: var(--white); background: var(--navy); transform: scale(0.9); }
.btn--block { display: block; width: 100%; font-size: 16px; line-height: 16px; padding: 15px 30px; }

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */
.site-header {
	position: relative;
	z-index: 5;
	background: var(--navy-header);
}
.site-header__inner {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 71px;
}
/* Live groups the menu and the Schedule A Call button together against the
   right edge; space-between left a ~200px hole between them on every page. */
.site-header__inner > .site-header__nav { margin-left: auto; }
/* Live sizes the header logo as 18% of the header container - 288px inside a
   1600px container at 1920, 256px inside 1420 at 1440 - so it grows with the
   viewport. A fixed 256px stayed put while live's grew. The percentage has to
   sit on the flex item; a percentage width on the image itself would resolve
   against a shrink-to-fit parent. */
.site-header__brand { display: flex; align-items: center; flex: 0 0 18%; min-width: 190px; max-width: 288px; }
.site-header__brand img { width: 100%; height: auto; }

.nav { display: flex; align-items: center; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.nav li { position: relative; }
.nav a {
	display: block;
	font-family: var(--font-head);
	font-size: 15px;
	line-height: 20px;
	font-weight: 500;
	color: var(--white);
	padding: 15px;
	white-space: nowrap;
}
.nav a:hover, .nav a:focus,
/* Only the exact current page, as live. The ancestor rule additionally lit
   the "Services" parent on every service page. */
.nav .current-menu-item > a,
.nav .current_page_item > a,
.nav .current-page-ancestor > a { color: var(--green); }

.nav .menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 0; height: 0;
	margin-left: 7px;
	vertical-align: middle;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
}

.nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 198px;
	display: block;
	flex-direction: column;
	background: var(--navy);
	/* Live's panel: no padding, square corners, no shadow. */
	padding: 0;
	border-radius: 0;
	box-shadow: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.nav li:hover > .sub-menu,
.nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
/* 46px tall on live, from 13px/20px padding on a 20px line box. */
.nav .sub-menu a { padding: 13px 20px; font-size: 14px; }

/* Live fills the item with green and keeps the text white, both on hover and
   for the page you are on. Written after the top-level current-page rule so it
   wins for sub-items, which otherwise inherited green TEXT on navy. */
.nav .sub-menu a:hover,
.nav .sub-menu a:focus,
.nav .sub-menu .current-menu-item > a,
.nav .sub-menu .current_page_item > a {
	background: var(--green);
	color: var(--white);
}

.site-header__cta { flex: 0 0 auto; }
/* The drawer carries its own copy of the CTA (the old site pointed the mobile
   one at the phone number). Only one of the two is ever visible. */
.site-header__nav .site-header__cta { display: none; }

.nav-toggle { display: none; }

/* --------------------------------------------------------------------------
   8. Hero (front page)
   -------------------------------------------------------------------------- */
.hero {
	position: relative;
	/* 80px, not 71: live's hero top measures -9 against a 71px header. */
	margin-top: -80px;
	/* Live sets this per page - 100vh on the home page, where the theme had a
	   hardcoded 900px and every section below sat 91px too high. */
	min-height: var(--hero-h, 900px);
	display: flex;
	align-items: center;
	overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--navy);
	opacity: 0.45;
}
.hero__inner { position: relative; z-index: 2; width: 100%; padding-top: 0; }
/* 742px at 1440 on live. At 50% this column came out 710px - just narrow
   enough to break the h1 from two lines to four. */
.hero__copy { max-width: 53%; }
.hero h1 {
	font-size: 64px;
	line-height: 76.8px;
	font-weight: 700;
	color: var(--white);
	margin: 0 0 20px;
}
.hero__lead {
	font-size: 20px;
	line-height: 30px;
	color: var(--white);
	margin: 0 0 34px;
}

/* --------------------------------------------------------------------------
   9. Page banner (inner pages, posts)
   -------------------------------------------------------------------------- */
.banner {
	position: relative;
	/* 80px, not 71: live's banner top measures -9 against a 71px header, the
	   same offset the hero uses. */
	margin-top: -80px;
	/* Live sets this per page (420px on most, 60vh on Work For Us) and uses
	   min-height, so a banner with a lead paragraph grows rather than clipping. */
	min-height: var(--banner-h, 420px);
	display: flex;
	align-items: center;
	overflow: hidden;
}
.banner__media { position: absolute; inset: 0; }
.banner__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.banner::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--navy);
	opacity: 0.45;
}
.banner__inner { position: relative; z-index: 2; width: 100%; padding-top: 71px; }
.banner h1 {
	font-size: 44px;
	line-height: 52.8px;
	font-weight: 700;
	color: var(--white);
	margin: 0;
}

/* Single-post banner: flat navy with the brand mark on the right. */
/* Live wraps the post title inside the navy panel (778px of a 1120px wrap at
   1440). Letting it run the full width put "Non-Compliance" white-on-cyan,
   straddling the panel edge and the photograph. */
.banner--post h1 { max-width: 70%; }
.banner__lead {
	max-width: 780px;
	margin: 18px 0 0;
	font-size: 18px;
	line-height: 28px;
	color: var(--white);
}
.banner--post { background: var(--navy-2); }
.banner__media img { object-fit: cover; object-position: var(--banner-pos, center center); }
.banner--post .banner__media img { object-fit: contain; object-position: 100% 50%; }
.banner--post::after { display: none; }

.breadcrumb { margin-top: 20px; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; margin: 0 -8px; padding: 0; }
.breadcrumb li { display: flex; align-items: center; margin: 0 8px; font-size: 16px; line-height: 24px; color: var(--white); }
/* White, as live. The grey --link token is a body-copy colour and rendered
   the breadcrumb almost invisible against a photographic banner. */
.breadcrumb a { color: var(--white); display: flex; align-items: center; gap: 8px; }
.breadcrumb a:hover, .breadcrumb a:focus { color: var(--white); }
.breadcrumb li + li::before { content: '\00bb'; margin-right: 16px; color: var(--white); }
.breadcrumb svg { width: 14px; height: 14px; fill: currentColor; }

/* --------------------------------------------------------------------------
   10. Text + staggered image-pair section
   -------------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.split--rev .split__media { order: -1; }

/* Measured on live: both images of a pair are width:100%, height:350px,
   object-fit:cover, object-position:center, border-radius:8px and NO shadow,
   with the second image sitting 70px higher than the first. Letting them keep
   their natural proportions instead produced pairs whose heights differed by
   nearly 300px. The height comes from the section (Elementor compiled 350 for
   almost every pair, 450 for one, and none for the homepage Guidance pair). */
/* Live's pair: two 310px images 40px apart inside a 710px column, i.e. the pair
   occupies ~93% of the column. Reproduced as a ratio so it holds at every
   width - checked at 1440 (live 310, build 311) and 1200 (live 250, build 249). */
.imgpair {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
	max-width: 96%;
	align-items: start;
}
.imgpair img {
	width: 100%;
	height: var(--pair-h, 350px);
	object-fit: cover;
	object-position: center center;
	border-radius: 8px;
	box-shadow: none;
}
.imgpair__a { margin-top: 70px; }
.imgpair__b { margin-top: 0; }

/* --------------------------------------------------------------------------
   11. Service cards (front page)
   -------------------------------------------------------------------------- */
.services { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 50px; }
.service {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}
.service__media img { width: 100%; height: 457px; object-fit: cover; }
.service__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: #000;
	opacity: 0.2;
	pointer-events: none;
}
.service__body {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	padding: 40px;
	z-index: 2;
}
.service__label {
	font-family: var(--font-head);
	font-size: 14px;
	line-height: 14px;
	font-weight: 400;
	color: var(--white);
	margin: 0 0 12px;
}
.service__title {
	font-size: 24px;
	line-height: 28px;
	font-weight: 600;
	color: var(--white);
	margin: 0;
}
.service .rule { margin-bottom: 12px; }

/* --------------------------------------------------------------------------
   12. Team grid
   -------------------------------------------------------------------------- */
.team { display: grid; grid-template-columns: repeat(var(--team-cols, 5), minmax(0, 1fr)); gap: 20px; }
/* Live's gap between a section heading and its grid. */
.team--spaced { margin-top: var(--head-gap, 60px); }
.team__card {
	position: relative;
	display: block;
	width: 100%;
	text-align: center;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	cursor: pointer;
}
.team__card--static { cursor: default; }
/* Live's team photos are width:100% at their NATURAL proportions with a 6px
   radius and the soft card shadow - no crop. Measured 272x341, 272x342,
   272x341, 272x340 across the four, i.e. heights that differ by a pixel or two. */
.team__card img {
	width: 100%;
	height: auto;
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
}
/* The caption elements are <span>s inside a <button>, so every one of them
   needs an explicit display:block - an inline span ignores vertical padding
   and the name spills straight out of the panel. */
.team__caption {
	display: block;
	position: relative;
	margin-top: -87px;
	min-height: 87px;
	background: var(--navy-caption);
	padding: 18px 20px;
	border-radius: 0 0 var(--radius) var(--radius);
}
.team__name {
	display: block;
	font-family: var(--font-head);
	font-size: 20px;
	line-height: 24px;
	font-weight: 600;
	color: var(--white);
	margin: 0 0 5px;
}
.team__role {
	display: block;
	font-family: var(--font-head);
	font-size: 14px;
	line-height: 14px;
	font-weight: 400;
	color: var(--white);
	margin: 0;
}
/* Live turns the caption green on hover - rgba(60,168,56,0.72) measured on
   the hovered card. The build stayed navy, so the cards looked inert. */
.team__card:hover .team__caption,
.team__card:focus-visible .team__caption { background: rgba(60, 168, 56, 0.72); }

/* --------------------------------------------------------------------------
   13. Accreditation strip
   -------------------------------------------------------------------------- */
.accreds { display: flex; flex-wrap: wrap; gap: var(--logo-gap, 0px); align-items: flex-start; }
.accreds--center { justify-content: center; }
.accred { display: flex; flex-direction: column; align-items: center; gap: 10px; width: var(--logo-w, 210px); }
/* Natural aspect, as live: a fixed 140px contain-box letterboxed every logo. */
.accred img { width: 100%; height: auto; }
/* Live keeps these captions in a hover panel, exactly as on About Us: the
   awards strip is logos-only at rest. Rendered statically they also collided
   with the Chamber of Commerce banner below - 0px clearance where live has 19. */
.accred { position: relative; overflow: hidden; }
.accred__caption {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin: 0;
	padding: 10px;
	background: #f2f2f2;
	font-family: var(--font-head);
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	color: var(--navy);
	text-align: center;
	transform: translateY(101%);
	visibility: hidden;
	transition: transform 0.3s ease, visibility 0.3s;
}
.accred:hover .accred__caption,
.accred:focus-within .accred__caption { transform: translateY(0); visibility: visible; }

@media (prefers-reduced-motion: reduce) {
	.accred__caption { transition: none; }
}

/* Single-image band (the homepage strip below the accreditation logos). */
.image-band img { max-width: var(--band-max, 100%); height: auto; }
.image-band--center { display: flex; justify-content: center; }

/* --------------------------------------------------------------------------
   14. Testimonials
   -------------------------------------------------------------------------- */
.testimonials {
	position: relative;
	padding-block: var(--pt, 80px) var(--pb, 80px);
	overflow: hidden;
}
.testimonials__media { position: absolute; inset: 0; }
.testimonials__media img { width: 100%; height: 100%; object-fit: cover; }
.testimonials::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--navy);
	opacity: 0.75;
}
.testimonials__inner { position: relative; z-index: 2; }

.carousel { position: relative; }
.carousel__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide {
	flex: 0 0 100%;
	scroll-snap-align: center;
	padding-inline: 20px;
	display: flex;
	justify-content: center;
}
.quote { max-width: 700px; text-align: center; }
.quote__text { font-size: 16px; line-height: 26px; color: var(--white); margin: 0 0 20px; }
.quote__name { font-family: var(--font-head); font-size: 18px; line-height: 18px; font-weight: 600; color: var(--white); margin: 0 0 6px; }
.quote__role { font-family: var(--font-head); font-size: 14px; line-height: 20px; font-weight: 400; color: var(--white); margin: 0; }

.carousel__dots { display: flex; justify-content: center; gap: 10px; margin-top: 36px; padding: 0; list-style: none; }
.carousel__dot {
	/* 43x43 hit target, as live. */
	width: 43px; height: 43px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	display: grid;
	place-items: center;
}
/* Live's mark is a horizontal DASH, not a dot: an SVG of a 17.25-unit rounded
   bar in a 24-unit box, rendered at 43px, i.e. ~31x3px. It is green when
   active and #F5F5F5 otherwise. The build drew an 11px circle. */
.carousel__dot::before {
	content: '';
	width: 31px;
	height: 3px;
	border-radius: 2px;
	background: var(--grey);
	transition: background-color 0.2s ease;
}
.carousel__dot[aria-current='true']::before { background: var(--green); }

/* --------------------------------------------------------------------------
   15. CTA band with form
   -------------------------------------------------------------------------- */
.cta { background: var(--grey); padding-block: var(--pt, 40px) var(--pb, 40px); }
.cta__title {
	font-size: 32px;
	line-height: 32px;
	font-weight: 700;
	color: var(--navy);
	text-transform: capitalize;
	text-align: center;
	margin: 0 0 20px;
}
.cta__lead { text-align: center; color: var(--text-black); font-size: 16px; line-height: 26px; margin: 0 0 30px; }

/* --------------------------------------------------------------------------
   17. Contact detail cards
   -------------------------------------------------------------------------- */
.contact-panel { background: var(--navy); border-radius: var(--radius); padding: 30px; }
.contact-card {
	display: flex;
	align-items: center;
	gap: 18px;
	background: var(--white);
	border-radius: var(--radius);
	padding: 18px 22px;
	margin-bottom: 20px;
	color: var(--navy);
}
.contact-card:last-child { margin-bottom: 0; }
.contact-card svg { width: 34px; height: 34px; flex: 0 0 34px; fill: var(--navy); }
.contact-card__label { margin: 0; font-family: var(--font-head); font-size: 20px; line-height: 26px; font-weight: 600; color: var(--navy); margin: 0; }
.contact-card__value { font-size: 16px; line-height: 24px; color: var(--text); margin: 0; }
.contact-card a { color: var(--text); }
.contact-card a:hover, .contact-card a:focus { color: var(--green); }

/* --------------------------------------------------------------------------
   18. Post / resource cards
   -------------------------------------------------------------------------- */
.cards { display: grid; gap: 30px; }
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card {
	display: flex;
	flex-direction: column;
	background: var(--white);
	border-radius: 3px;
	box-shadow: var(--shadow-post);
	overflow: hidden;
}
.card__media { display: block; aspect-ratio: 546 / 363; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 30px; flex: 1 1 auto; }
.card__title { font-size: 21px; line-height: 25.2px; font-weight: 600; color: var(--navy); margin: 0 0 25px; }
.card__title a { color: inherit; }
.card__title a:hover, .card__title a:focus { color: var(--green); }
.card__excerpt { font-size: 14px; line-height: 21px; color: var(--muted); margin: 0 0 20px; }
.card__more {
	display: inline-block;
	font-family: var(--font-head);
	font-size: 12px;
	line-height: 18px;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--navy);
}
.card__more:hover, .card__more:focus { color: var(--green); }
.card__meta {
	font-family: var(--font-head);
	font-size: 12px;
	line-height: 15.6px;
	color: var(--meta);
	padding: 15px 30px;
	border-top: 1px solid #eee;
}

/* Resources card: image with a navy caption panel overlapping its foot. */
.rcard { position: relative; display: block; border-radius: var(--radius); overflow: hidden; }
.rcard img { width: 100%; aspect-ratio: 360 / 450; object-fit: cover; }
/* Same inline-span trap as the team caption: these are <span>s inside an <a>. */
.rcard__body {
	display: block;
	position: absolute;
	left: 0; right: 0; bottom: 0;
	background: var(--navy-card);
	padding: 24px 20px;
	text-align: center;
}
.rcard__label { display: block; font-family: var(--font-head); font-size: 14px; line-height: 14px; font-weight: 400; color: var(--white); margin: 0 0 10px; }
.rcard__title { margin: 0; font-weight: 700; display: block; font-family: var(--font-head); font-size: 18px; line-height: 24px; font-weight: 600; color: var(--white); margin: 0; }
.rcard .rule { margin: 0 auto 12px; }

.loadmore-wrap { text-align: center; margin-top: 50px; }

/* --------------------------------------------------------------------------
   19. Single post
   -------------------------------------------------------------------------- */
.post-layout { display: grid; grid-template-columns: minmax(0, 690px) minmax(0, 1fr); gap: 60px; align-items: start; }
.post-content { color: var(--text); }
.post-content p { font-size: 16px; line-height: 24px; }
.post-share { margin-top: 40px; display: flex; align-items: center; gap: 14px; }
.post-share a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	border-radius: 50%;
	background: var(--navy);
	color: var(--white);
}
.post-share a:hover, .post-share a:focus { background: var(--green); color: var(--white); }
.post-share svg { width: 18px; height: 18px; fill: currentColor; }

.sidebar__title { font-size: 24px; line-height: 30px; font-weight: 600; color: var(--navy); margin: 0 0 20px; }
.sidebar .cards { gap: 20px; }

.recent-list { list-style: none; margin: 0; padding: 0; }
.recent-item {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 16px;
	align-items: center;
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid #eee;
}
.recent-item:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.recent-item:not(:has(.recent-item__media)) { grid-template-columns: minmax(0, 1fr); }
.recent-item__media { display: block; border-radius: 3px; overflow: hidden; }
.recent-item__media img { width: 96px; height: 64px; object-fit: cover; }
.recent-item__title { font-family: var(--font-head); font-size: 16px; line-height: 22px; font-weight: 500; color: var(--navy); }
.recent-item__title:hover, .recent-item__title:focus { color: var(--green); }

/* --------------------------------------------------------------------------
   20. Team bio modal
   -------------------------------------------------------------------------- */
.modal[hidden] { display: none !important; }
.modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 0, 0, 0.6);
}
.modal__box {
	position: relative;
	width: 100%;
	max-width: 900px;
	max-height: 88vh;
	overflow-y: auto;
	background: var(--white);
	border-radius: var(--radius);
	box-shadow: 2px 8px 23px 3px rgba(0, 0, 0, 0.2);
	padding: 50px;
}
.modal__close {
	position: absolute;
	top: 14px; right: 14px;
	width: 38px; height: 38px;
	display: flex; align-items: center; justify-content: center;
	background: transparent;
	border: 0;
	border-radius: 50%;
	font-size: 26px;
	line-height: 1;
	color: var(--navy);
	cursor: pointer;
}
.modal__close:hover { background: var(--grey); }
.modal__name { font-size: 32px; line-height: 38px; font-weight: 600; color: var(--navy); margin: 0 0 6px; }
.modal__role { font-family: var(--font-head); font-size: 16px; font-weight: 500; color: var(--green); margin: 0 0 20px; }
.modal__body { color: var(--text); }
.modal__body p { font-size: 16px; line-height: 26px; margin-bottom: 14px; }
body.modal-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   21. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--navy); padding-block: 45px; color: var(--white); }
.site-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.site-footer__brand img { width: 276px; height: auto; }
.site-footer__right { text-align: right; }
.site-footer .nav ul { justify-content: flex-end; flex-wrap: wrap; }
/* Live's footer links are 50px tall and its credit sits 20px under the nav.
   The whole footer is 218px; the build's inner block came out short, so the
   height is pinned to live's measured content box. */
.site-footer .nav a { padding: 15px 12px; }
.site-footer__inner { min-height: 128px; }
.site-footer .nav .sub-menu {
	/* Not visibility:hidden. An absolutely positioned, merely-invisible element
	   still contributes to the scrollable overflow rectangle, and with no
	   positioned ancestor in the footer it was measured against the page:
	   +33px of horizontal scroll at 390 and +84px of dead space below the
	   footer on every page. Live's desktop footer sub-menu is display:none;
	   its MOBILE footer expands the children in the flow (see below). */
	display: none;
	background: var(--navy-2);
}
/* 16px and #838383 on live, right-aligned under the menu - the build had it
   at 13px in near-white, which read as a different element entirely. */
.site-footer__credit { font-family: var(--font-head); font-size: 16px; line-height: 24px; color: var(--link); margin: 20px 12px 0 0; text-align: right; }
.site-footer__credit a { color: var(--link); text-decoration: none; }
.site-footer__credit a:hover { color: var(--white); }

/* --------------------------------------------------------------------------
   22. 404 / search
   -------------------------------------------------------------------------- */
.search-form { display: flex; gap: 10px; max-width: 480px; }
.search-form input[type='search'] {
	flex: 1 1 auto;
	min-height: 47px;
	padding: 6px 16px;
	font-family: var(--font-head);
	font-size: 16px;
	color: var(--navy);
	background: var(--grey);
	border: 1px solid var(--grey);
	border-radius: var(--radius);
}

.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 50px; }
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px; height: 42px;
	padding: 0 12px;
	font-family: var(--font-head);
	font-size: 15px;
	font-weight: 500;
	color: var(--navy);
	background: var(--grey);
	border-radius: var(--radius);
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover { background: var(--navy); color: var(--white); }

/* --------------------------------------------------------------------------
   22b. Modifiers used by the section partials
   -------------------------------------------------------------------------- */
.services--spaced { margin-top: var(--head-gap, 60px); }
.split__cta { margin-top: 28px; margin-bottom: 0; }
.cta--white { background: var(--white); }
.cta--white .wrap--cta { max-width: var(--narrow); }   /* 650px, measured on live */
.contact-panel--compact { padding: 20px; }
.contact-panel--compact .contact-card { padding: 14px 16px; margin-bottom: 14px; }
.post-share__label {
	font-family: var(--font-head);
	font-size: 14px;
	font-weight: 500;
	color: var(--navy);
	margin-right: 4px;
}
.cards--1 { grid-template-columns: minmax(0, 1fr); }
.cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.service__text { min-width: 0; }
.site-logo--text {
	font-family: var(--font-head);
	font-size: 24px;
	font-weight: 600;
	color: var(--white);
}
.prose.center ul, .prose.center ol { list-style-position: inside; padding-left: 0; }

/* --------------------------------------------------------------------------
   23. Responsive
   -------------------------------------------------------------------------- */
/* Burger from 1024px down. Measured on live at five viewports: the main nav
   computes display:none at 1024 and display:flex at 1025. The Elementor build
   got this from ele-custom-skin's stylesheet, not from the kit. */
@media (max-width: 1024px) {
	.wrap { padding-inline: 20px; }

	.hero h1 { font-size: 48px; line-height: 58px; }
	.hero { min-height: 700px; }
	.hero__copy { max-width: 80%; }
	.h-section { font-size: var(--h-size, 34px); line-height: 1.2; }
	.team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.section { padding-block: 100px; }
	.section--tight { padding-block: 70px; }
	.post-layout { grid-template-columns: 1fr; gap: 40px; }
	.services { gap: 16px; }

	.nav-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px; height: 44px;
		padding: 0;
		background: transparent;
		border: 0;
		color: var(--white);
		cursor: pointer;
	}
	.nav-toggle svg { width: 26px; height: 26px; fill: currentColor; }
	.nav-toggle .icon-close { display: none; }
	.nav-toggle[aria-expanded='true'] .icon-open { display: none; }
	.nav-toggle[aria-expanded='true'] .icon-close { display: block; }

	.site-header__nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--navy);
		padding: 10px 0 20px;
		display: none;
		max-height: calc(100vh - 71px);
		overflow-y: auto;
	}
	.site-header__nav.is-open { display: block; }
	.site-header__nav .nav { display: block; }
	.site-header__nav .nav ul { display: block; }
	.site-header__nav .nav a { padding: 13px 20px; font-size: 16px; }
	.site-header__nav .nav .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		background: rgba(0, 0, 0, 0.16);
		border-radius: 0;
		padding: 0;
		display: none;
	}
	.site-header__nav .nav li.is-open > .sub-menu { display: block; }
	.site-header__nav .nav .sub-menu a { padding-left: 36px; }
	.site-header__nav .nav .menu-item-has-children > a::after { float: right; margin-top: 9px; }
	.site-header > .wrap > .site-header__cta { display: none; }
	.site-header__nav .site-header__cta { display: block; padding: 14px 20px 0; }
}

@media (max-width: 767px) {
	.wrap { padding-inline: 15px; }

	/* Live's mobile gutter is 15px. The base rule insets via width, the mobile
	   rule via padding; using both stacked them to 30. */
	.wrap, .wrap--content { width: 100%; padding-inline: 15px; }
	.site-header__inner { min-height: 75px; }
	/* Live's mobile logo is 273px of a 390px viewport - 70% - in a 75px bar,
	   where the build had a fixed 190px in a 64px bar. */
	.site-header__brand { flex: 0 0 70%; min-width: 0; max-width: 288px; }
	.site-header__brand img { width: 100%; }
	.site-header__nav { max-height: calc(100vh - 75px); }

	.hero { min-height: 620px; margin-top: -75px; }
	.hero__inner { padding-top: 75px; }
	.team { grid-template-columns: minmax(0, 1fr); }
	.hero h1 { font-size: 36px; line-height: 44px; }
	.hero__lead { font-size: 17px; line-height: 27px; }
	.hero__copy { max-width: 100%; }

	/* Live sets a mobile banner height per page: 600px on Work For Us. */
	.banner { min-height: var(--banner-h-m, 350px); margin-top: -75px; }
	.banner__inner { padding-top: 75px; }
	/* 40px on live at 390, where the build had 30. */
	.banner h1 { font-size: 40px; line-height: 48px; }
	.breadcrumb li { font-size: 14px; }

	.section { padding-block: 70px; }
	.section--tight { padding-block: 50px; }

	.split, .grid-2, .grid-2--contact, .services, .cards--2, .cards--3, .cards--4 { grid-template-columns: minmax(0, 1fr); gap: 30px; }
	.split--rev .split__media { order: 0; }
	.imgpair { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 100%; }
	.imgpair__b { display: none; }
	.imgpair__a { margin-top: 0; }

	.h-section { font-size: var(--h-size-m, var(--h-size, 36px)); line-height: 1.2; }
	.eyebrow { font-size: 16px; line-height: 16px; margin-bottom: 20px; }
	.prose h2 { font-size: 26px; line-height: 32px; }

	/* Live stacks the team one card per row at this width. */
	.team { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.team__caption { margin-top: -70px; padding: 14px 12px; }
	.team__name { font-size: 15px; line-height: 19px; }
	.team__role { font-size: 12px; line-height: 12px; }

	.service__media img { height: 300px; }
	.service__body { padding: 22px; flex-direction: column; align-items: flex-start; }

	.gform_wrapper .gform_fields { grid-template-columns: 1fr; }
	.gform_wrapper .gfield--half { grid-column: span 2; }

	.cta__title { font-size: 24px; line-height: 30px; }

	.site-footer { padding-block: 15px; }
	.site-footer__inner { flex-direction: column; text-align: center; }
	.site-footer__right { text-align: center; }
	.site-footer .nav ul { justify-content: center; }
	.site-footer__brand img { width: 220px; }

	.modal__box { padding: 30px 20px; }
	.modal__name { font-size: 24px; line-height: 30px; }

	.accreds { justify-content: center; gap: 26px; }
}

/* --------------------------------------------------------------------------
   Accreditation logos inside a text column (About Us)

   Live renders these inside the copy column, directly under the body text, at
   30% of the column with an 8% gap - both percentages, so they grow with the
   viewport (231px at 1920, 204px at 1440). Splitting them into a section of
   their own put 250px of empty space above them.

   The caption is NOT shown at rest. Live keeps it in a Premium Addons hover
   panel that an overflow:hidden ancestor clips away, so a reader sees only the
   logo until they hover. Reproduced here on hover AND focus, so it is reachable
   from the keyboard, which live's is not.
   -------------------------------------------------------------------------- */
.copy-accreds { display: flex; gap: 8%; margin-top: 40px; }
.copy-accred { position: relative; width: 30%; overflow: hidden; }
.copy-accred img { width: 100%; height: auto; display: block; }
.copy-accred__caption {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 10px;
	background: #f2f2f2;
	font-family: var(--font-head);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--navy);
	text-align: center;
	overflow: hidden;
	transform: translateY(101%);
	/* visibility as well as the transform: on a narrow viewport the tile is
	   short enough that caption text overflowed its own translated box and
	   painted across the logos at rest, clipped mid-word. */
	visibility: hidden;
	transition: transform 0.3s ease, visibility 0.3s;
}
.copy-accred:hover .copy-accred__caption,
.copy-accred:focus-within .copy-accred__caption { transform: translateY(0); visibility: visible; }

@media (prefers-reduced-motion: reduce) {
	.copy-accred__caption { transition: none; }
}

/* --------------------------------------------------------------------------
   In-article contact band (end of every post)

   Measured on live: 690x205, a 32px centred heading 50px down, then one centred
   row of phone / email / address at y=102. The sidebar card this replaced was
   three stacked rows and 281px tall.
   -------------------------------------------------------------------------- */
.acontact {
	background: var(--navy);
	border-radius: var(--radius);
	padding: 50px 25px;
	margin-top: 50px;
	text-align: center;
}
/* Scoped through .prose as well: the band sits inside the article, where
   .prose h2 would otherwise set the size, line-height and margins. */
.acontact__title,
.prose .acontact__title {
	font-family: var(--font-head);
	font-size: 32px;
	line-height: 32px;
	font-weight: 700;
	color: var(--white);
	margin: 0 0 20px;
}
.acontact__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	/* 18px keeps all three items on one row at live's 640px, as live does. */
	gap: 10px 18px;
}
.acontact__list li { display: flex; align-items: center; gap: 8px; }
.acontact__list a, .acontact__list span {
	font-family: var(--font-head);
	font-size: 16px;
	line-height: 22px;
	color: var(--white);
	text-decoration: none;
}
.acontact__list a:hover, .acontact__list a:focus { text-decoration: underline; }
.acontact__list svg { width: 18px; height: 18px; flex: 0 0 auto; fill: currentColor; color: var(--white); }

@media (max-width: 767px) {
	.acontact { padding: 34px 20px; }
	.acontact__title { font-size: 26px; line-height: 30px; }
	.acontact__list { flex-direction: column; gap: 12px; }
}

/* --------------------------------------------------------------------------
   Mobile footer

   Live's mobile footer is not the desktop strip reflowed: it stacks the whole
   menu vertically, expands the Services children in the flow, and runs 458px
   tall against the build's 273px with five fewer links.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.site-footer__inner { flex-direction: column; align-items: flex-start; gap: 18px; }
	.site-footer__right { text-align: left; width: 100%; }
	.site-footer .nav ul { flex-direction: column; align-items: flex-start; justify-content: flex-start; }
	.site-footer .nav a { padding: 7px 0; }

	/* The children are part of the list here, not a fly-out. */
	.site-footer .nav .sub-menu {
		display: block;
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		background: none;
		border-radius: 0;
		padding: 0 0 0 16px;
		min-width: 0;
	}
	.site-footer .nav .sub-menu a { padding: 8px 0; font-size: 14px; }
	.site-footer__credit { margin: 8px 0 0; text-align: left; }
}

@media (max-width: 767px) {
	/* Live runs the two logos at 180px of a 390px viewport - they fill the
	   column side by side. 30% of the column gave 108. This has to come AFTER
	   the .copy-accred block above: a media query adds no specificity, so an
	   override written earlier in the file loses to it. */
	.copy-accreds { gap: 4%; }
	.copy-accred { width: 48%; }
}