/* ==========================================================================
   Mobile menu as a simple popup — client request 2026-10-06 (design audit, batch 1)
   Theme option: Off Canvas Menu Style = "Fullscreen Cover Fade" (fullscreen-alt).
   These rules remove Salient's staggered link rise and the background's inset
   "zoom", so the menu and its links appear together with one short fade.
   Applies below Salient's mobile header breakpoint (1000px). Undo: delete this
   block (and set the menu style back to "Slide Out From Side" in Salient).
   ========================================================================== */
@media only screen and (max-width: 999px) {
	/* Links: no rise and no stagger. !important beats Salient's inline (jQuery transit) styles. */
	#slide-out-widget-area.fullscreen-alt .off-canvas-menu-container .menu,
	#slide-out-widget-area.fullscreen-alt .off-canvas-menu-container .menu > li {
		transform: none !important;
	}
	#slide-out-widget-area.fullscreen-alt .off-canvas-menu-container .menu > li {
		opacity: 1 !important;
		transition: none !important;
	}
	#slide-out-widget-area.fullscreen-alt .off-canvas-menu-container .menu {
		transition: opacity .2s ease-out !important;
	}
	/* The whole menu fades in with its background. */
	#slide-out-widget-area.fullscreen-alt.open {
		animation: bpo-menu-fade .2s ease-out both;
	}
	/* Background: a plain fade, no inset. */
	body #slide-out-widget-area-bg.fullscreen-alt,
	body #slide-out-widget-area-bg.fullscreen-alt.open {
		padding: 0 !important;
		transition: opacity .2s ease-out !important;
	}
	/* Keep the page behind the open menu from scrolling (the old slide-out menu did this too). */
	html:has(#slide-out-widget-area.fullscreen-alt.open),
	html:has(#slide-out-widget-area.fullscreen-alt.open) body {
		overflow: hidden !important;
	}
}
@keyframes bpo-menu-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}
/* Visitors who ask their device for less motion get no animation at all. */
@media (prefers-reduced-motion: reduce) {
	#slide-out-widget-area.fullscreen-alt.open { animation: none; }
	body #slide-out-widget-area-bg.fullscreen-alt,
	body #slide-out-widget-area-bg.fullscreen-alt.open,
	#slide-out-widget-area.fullscreen-alt .off-canvas-menu-container .menu { transition: none !important; }
}

/* ==========================================================================
   SEO heading fixes: typography helpers (design audit 2026-10-06; HOME/ABOUT/SERV/CULT/CONT/SITE heading findings)
   .bpo-type-hN = the look Salient gives an <hN>, so a heading tag can change with no visual change.
   Sizes copy salient-dynamic-styles.css (rem; the root font-size is fluid from 1000px, so rem + Salient's own
   breakpoints reproduce every width). Spacing copies style.css. Where to put the class:
   - raw HTML in a Text Block / Custom Heading el_class: on the element itself;
   - Split Line Heading: el_class (lands on the wrapper div; the rules style its inner tag). A Split Line Heading
     with its own size (font_size, fit text, font_size_tablet/phone) keeps that size: only spacing is copied
     (the split-heading selectors are kept at low specificity with :where() so Salient's per-element size rules win);
   - Highlighted Text with a custom size keeps that size from 1000px up.
   Undo: delete this block. Verified 2026-10-06 by a local DOM simulation (tag swap + this CSS) on all 7 pages at
   320/375/470/480/690/691/768/999/1000/1024/1301/1440/1920: no computed-style, descendant-colour or layout change.
   ========================================================================== */
/* from 1000px (Salient desktop sizes; Highlighted Text with a custom size keeps its own size here) */
@media only screen and (min-width: 1000px) {
	#ajax-content-wrap .bpo-type-h2:not(.nectar-split-heading):not(.nectar-highlighted-text[class*="font_size_"] > *),
	body .nectar-split-heading.bpo-type-h2:where([data-custom-font-size="false"]:not([data-has-fit-text])) > * { font-family: 'Inter Tight'; font-size: 2.7rem; line-height: 1.3; font-weight: 400; letter-spacing: 0; text-transform: none; }
	#ajax-content-wrap .bpo-type-h3:not(.nectar-split-heading):not(.nectar-highlighted-text[class*="font_size_"] > *),
	body .nectar-split-heading.bpo-type-h3:where([data-custom-font-size="false"]:not([data-has-fit-text])) > * { font-size: 2rem; line-height: 1.3; font-weight: 400; letter-spacing: 0; text-transform: none; }
	#ajax-content-wrap .bpo-type-h4:not(.nectar-split-heading):not(.nectar-highlighted-text[class*="font_size_"] > *),
	body .nectar-split-heading.bpo-type-h4:where([data-custom-font-size="false"]:not([data-has-fit-text])) > * { font-size: 1.4rem; line-height: 1.3; font-weight: 400; letter-spacing: 0; text-transform: none; }
	#ajax-content-wrap .bpo-type-h5:not(.nectar-split-heading):not(.nectar-highlighted-text[class*="font_size_"] > *),
	body .nectar-split-heading.bpo-type-h5:where([data-custom-font-size="false"]:not([data-has-fit-text])) > * { font-size: 1.1rem; line-height: 1.4; font-weight: 600; letter-spacing: 0; text-transform: none; }
	#ajax-content-wrap .bpo-type-h6:not(.nectar-split-heading):not(.nectar-highlighted-text[class*="font_size_"] > *),
	body .nectar-split-heading.bpo-type-h6:where([data-custom-font-size="false"]:not([data-has-fit-text])) > * { font-size: 1rem; line-height: 1.4; font-weight: 500; letter-spacing: 0; text-transform: none; }
}
@media only screen and (max-width: 999px) and (min-width: 691px) {
	#ajax-content-wrap .bpo-type-h2:not(.nectar-split-heading),
	body .nectar-split-heading.bpo-type-h2:where([data-custom-font-size="false"]:not([data-has-fit-text])) > * { font-family: 'Inter Tight'; font-size: 2.16rem; line-height: 1.3; font-weight: 400; letter-spacing: 0; text-transform: none; }
	#ajax-content-wrap .bpo-type-h3:not(.nectar-split-heading),
	body .nectar-split-heading.bpo-type-h3:where([data-custom-font-size="false"]:not([data-has-fit-text])) > * { font-size: 1.6rem; line-height: 1.3; font-weight: 400; letter-spacing: 0; text-transform: none; }
	#ajax-content-wrap .bpo-type-h4:not(.nectar-split-heading),
	body .nectar-split-heading.bpo-type-h4:where([data-custom-font-size="false"]:not([data-has-fit-text])) > * { font-size: 1.26rem; line-height: 1.3; font-weight: 400; letter-spacing: 0; text-transform: none; }
	#ajax-content-wrap .bpo-type-h5:not(.nectar-split-heading),
	body .nectar-split-heading.bpo-type-h5:where([data-custom-font-size="false"]:not([data-has-fit-text])) > * { font-size: 1.1rem; line-height: 1.4; font-weight: 600; letter-spacing: 0; text-transform: none; }
	#ajax-content-wrap .bpo-type-h6:not(.nectar-split-heading),
	body .nectar-split-heading.bpo-type-h6:where([data-custom-font-size="false"]:not([data-has-fit-text])) > * { font-size: 1rem; line-height: 1.4; font-weight: 500; letter-spacing: 0; text-transform: none; }
	/* Custom Heading h1-h3 get !important sizes from Salient below 1000px */
	html body #ajax-content-wrap .wpb_wrapper .vc_custom_heading.bpo-type-h2 { font-size: 2.16rem !important; line-height: 1.3 !important; }
}
@media only screen and (max-width: 690px) {
	#ajax-content-wrap .bpo-type-h2:not(.nectar-split-heading),
	body .nectar-split-heading.bpo-type-h2:where([data-custom-font-size="false"]:not([data-has-fit-text])) > * { font-family: 'Inter Tight'; font-size: 1.62rem; line-height: 1.3; font-weight: 400; letter-spacing: 0; text-transform: none; }
	#ajax-content-wrap .bpo-type-h3:not(.nectar-split-heading),
	body .nectar-split-heading.bpo-type-h3:where([data-custom-font-size="false"]:not([data-has-fit-text])) > * { font-size: 1.2rem; line-height: 1.3; font-weight: 400; letter-spacing: 0; text-transform: none; }
	#ajax-content-wrap .bpo-type-h4:not(.nectar-split-heading),
	body .nectar-split-heading.bpo-type-h4:where([data-custom-font-size="false"]:not([data-has-fit-text])) > * { font-size: 1.26rem; line-height: 1.3; font-weight: 400; letter-spacing: 0; text-transform: none; }
	#ajax-content-wrap .bpo-type-h5:not(.nectar-split-heading),
	body .nectar-split-heading.bpo-type-h5:where([data-custom-font-size="false"]:not([data-has-fit-text])) > * { font-size: 0.99rem; line-height: 1.4; font-weight: 600; letter-spacing: 0; text-transform: none; }
	#ajax-content-wrap .bpo-type-h6:not(.nectar-split-heading),
	body .nectar-split-heading.bpo-type-h6:where([data-custom-font-size="false"]:not([data-has-fit-text])) > * { font-size: 0.9rem; line-height: 1.4; font-weight: 500; letter-spacing: 0; text-transform: none; }
	html body #ajax-content-wrap .wpb_wrapper .vc_custom_heading.bpo-type-h2 { font-size: 1.62rem !important; line-height: 1.3 !important; }
}
/* --- spacing (html body #id outranks the per-page Yellow Pencil rules that target bare p) --- */
/* raw HTML (Text Block, Highlighted Text) */
html body #ajax-content-wrap [class*="bpo-type-h"]:not(.nectar-split-heading):not(.vc_do_custom_heading) { margin-top: 0; margin-bottom: 7px; padding: 0; }
html body #ajax-content-wrap .row .col .bpo-type-h3:not(.nectar-split-heading):not(.vc_do_custom_heading),
html body #ajax-content-wrap .row .col .bpo-type-h4:not(.nectar-split-heading):not(.vc_do_custom_heading) { margin-bottom: 8px; }
html body #ajax-content-wrap .wpb_text_column .bpo-type-h2:last-child,
html body #ajax-content-wrap .wpb_text_column .bpo-type-h3:last-child { margin-bottom: 10px; }
html body #ajax-content-wrap .nectar-highlighted-text > .bpo-type-h2:not(:last-child):not(.nectar-split-heading):not(.vc_do_custom_heading) { margin-bottom: 8px; }
html body #ajax-content-wrap .row .nectar-icon-list .nectar-icon-list-item .bpo-type-h4:not(.nectar-split-heading):not(.vc_do_custom_heading) { line-height: 30px; margin-bottom: 4px; }
/* Custom Heading: margins come from .vc_do_custom_heading and its design option, which stay */
html body #ajax-content-wrap .vc_do_custom_heading[class*="bpo-type-h"] { padding-bottom: 0; }
/* Split Line Heading inner tag (Salient centres h1-h4 in centred columns) */
html body #ajax-content-wrap .nectar-split-heading[class*="bpo-type-h"] > * { margin: 0 0 7px; padding: 0; }
html body #ajax-content-wrap .centered-text .nectar-split-heading[data-animation-type="line-reveal-by-space"]:is(.bpo-type-h2, .bpo-type-h3, .bpo-type-h4) > * { margin: 0 auto; }
/* h3 wrapped around existing inline text (Services text-with-icon titles): no look of its own */
html body #ajax-content-wrap .bpo-type-inline { font-size: inherit; line-height: inherit; font-weight: inherit; font-family: inherit; letter-spacing: inherit; color: inherit; margin: 0; padding: 0; }
/* Footer wordmark (global section 747, h1 -> p): heading colour instead of the link colour; no p spacing */
html body #ajax-content-wrap .nectar-split-heading.bpo-wordmark > * { color: var(--nectar-page-text-color, #1e1e1e); margin: 0; padding: 0; }

/* --- per-page Yellow Pencil rules (post meta _wt_css) that target the OLD tag, re-pointed at the new tag.
   The YP data stays untouched; if a YP rule is edited later, edit its twin here. --- */
/* Services: YP colours <strong> inside the Results statements (#values h2 strong) */
html body.page-id-1580 #values h3 strong { color: #002a4c; }
@media (max-width: 690px) {
	/* Our Culture phone hero: YP .ocm-effect-wrap .vc_hidden-lg h2 {margin-top:-2px} (its margin-bottom:0 loses to the Text Block 10px) */
	html body.page-id-1598 #ajax-content-wrap .vc_hidden-lg h1.bpo-type-h2 { margin-top: -2px; }
}
@media (max-width: 479px) {
	/* Home hero headline: YP .top-level .wpb_wrapper h2 {font-size:32px; line-height:1.2em} */
	html body.page-id-10 #ajax-content-wrap .top-level .wpb_wrapper .nectar-split-heading.bpo-type-h2 > h1 { font-size: 32px; line-height: 1.2em !important; }
	/* Home + Services step titles: YP #services ... .nectar-link-underline-effect:nth-child(2) h2 {font-size:15px} */
	html body.page-id-10 #services .nectar-sticky-media-section__content-section .nectar-link-underline-effect:nth-child(2) > h3,
	html body.page-id-1580 #services .nectar-sticky-media-section__content-section .nectar-link-underline-effect:nth-child(2) > h3 { font-size: 15px; }
	/* Services phone hero: YP .ocm-effect-wrap .vc_custom_1788987657435 h2 {margin-top:-10px} */
	html body.page-id-1580 #ajax-content-wrap .vc_custom_1788987657435 h1.bpo-type-h2 { margin-top: -10px; }
	/* Our Culture "Join Us" phone copy: YP .full-width-content:nth-child(8) .vc_hidden-lg h5 {margin-top:10px; margin-bottom:0} */
	html body.page-id-1598 #ajax-content-wrap .full-width-content:nth-child(8) .vc_hidden-lg .nectar-split-heading.bpo-type-h5 > p { margin-top: 10px; margin-bottom: 0; }
}
@media (max-width: 470px) {
	/* About phone hero: YP .ocm-effect-wrap .vc_custom_1789019531163 h2 {margin-top:-5px} */
	html body.page-id-1533 #ajax-content-wrap .vc_custom_1789019531163 h1.bpo-type-h2 { margin-top: -5px; }
}

/* Batch 2 correction (2026-10-06): Split Line Headings demoted to <p> that carry a phone font size (font_size_phone_*).
   Salient's generated rule puts line-height on the wrapper (e.g. 18px for 12px) and lets the inner tag inherit it; as an <h5>
   the theme's heading line-height (1.2em) won, as a <p> it inherits (+3.6px on Culture "Core Values"). Restore 1.2em. */
@media only screen and (max-width: 690px) {
	html body #ajax-content-wrap .nectar-split-heading[class*="font_size_phone_"][class*="bpo-type-h"] > p { line-height: 1.2em !important; }
}

/* ==========================================================================
   Batch 3 — layout fixes (design audit 2026-10-06). Undo: delete the batch-3 blocks below.
   ========================================================================== */
/* Step 1 (SERV-08): the horizontal "How We Can Help You" module made touch devices >= 1000px widen the layout viewport
   (3,400-4,700px) and pan sideways on Home and Services. clip (unlike hidden) creates no scroll container, so the
   module's position:sticky pin keeps working. Browsers without overflow:clip keep today's behaviour. */
#ajax-content-wrap { overflow-x: clip; }

/* ==========================================================================
   Batch 3 — layout fixes from the design audit (2026-10-06, verify/layout.json steps 5-12).
   Builder changes for the same findings are in post content (verify/layout-apply.json headingFixPlan).
   Every rule below is scoped (page id, element class or media query). Undo: delete this block.
   ========================================================================== */

/* --- Step 5 · Footer (global section 747) tap targets below 1000px — SITE-10 ---
   Text links 23px -> 45px tall; social icons 16x23 -> 44x51 (the icon link covers .nectar_icon, so padding grows it).
   The footer is centred on phones/tablets, so the extra padding does not move anything sideways. */
@media only screen and (max-width: 999px) {
	body .nectar_hook_global_section_footer .nectar-cta .link_wrap a.link_text {
		display: inline-block;
		padding: 11px 14px;
		margin: -3px 0;
	}
	body .nectar_hook_global_section_footer .nectar_icon_wrap .nectar_icon {
		padding: 14px;
	}
}

/* --- Step 6 · Legal pages line length — SITE-04 ---
   Privacy (3) and Terms (1617) ran 170-200 characters per line on laptops; 38em keeps ~75-90 at every width. */
.page-id-3 .wpb_text_column,
.page-id-1617 .wpb_text_column {
	max-width: 38em;
}

/* --- Step 6 · "Basic" CTA buttons: the whole pill is the link — ABOUT-14 ---
   Only the text (186x20) was clickable on About; Home/Services/Culture already had a column link.
   ::before because Salient already uses a.link_text::after (25x25 px). */
.nectar-cta[data-style="basic"] .link_wrap {
	position: relative;
}
.nectar-cta[data-style="basic"] .link_wrap a.link_text {
	position: static;
}
.nectar-cta[data-style="basic"] .link_wrap a.link_text::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* --- Step 7 · One 40px gutter above 1600px — SITE-08, HOME-10 ---
   The header is full width (logo at 40px) but boxed rows stopped at the 1600px container (text at 200px on a 1920 screen).
   Above 1600px the content container is no longer capped, so boxed rows keep the same 40px gutter as the header and the
   full-width rows. Nothing changes at 1600px and below. (Done in CSS instead of switching ~9 rows to "full width content":
   that switch also changes the column gutters of multi-column rows at every width.) */
@media only screen and (min-width: 1601px) {
	body .container-wrap .container.main-content,
	body .nectar-global-section .container.normal-container {
		max-width: none;
	}
}

/* --- Step 9 · About: leadership cards stack between 1000 and 1279px — ABOUT-11 ---
   Side by side, the bio column was 134-214px wide (up to 10 lines, names wrapping). */
@media only screen and (min-width: 1000px) and (max-width: 1279px) {
	.page-id-1533 .wpb_row.inner_row:has(.team-member) > .row_col_wrap_12_inner > .wpb_column {
		width: 100%;
		margin-right: 0;
		margin-bottom: 40px;
	}
}

/* --- Step 10 · Home hero card: "Request a Quote" on one line on laptops — HOME-11 ---
   At 64% of the half-width column the card is 269-365px at 1000-1300px and the button wraps; it needs ~390px.
   Keep 64% but never less than 400px (no change from 1440px up). The tablet width is set in the builder (75%). */
@media only screen and (min-width: 1000px) {
	body.page-id-10 .vc_row.inner_row.max_width_desktop_64pct {
		max-width: max(64%, 400px);
	}
}

/* --- Step 11 · Hero lead paragraphs never below 16px — CULT-09 (also the Services hero lead) ---
   The lead is a Split Line Heading with font_size 1.2vw, written inline by Salient (12px at 1000px).
   !important because Salient sets it inline and in `#ajax-content-wrap .font_size_1vw.nectar-split-heading{font-size:1.2vw!important}`.
   Tablet 18px / phone 16px are unchanged (>=1000px only). */
@media only screen and (min-width: 1000px) {
	html body #ajax-content-wrap .nectar-split-heading.font_size_1vw[style*="font-size: 1.2vw"] {
		font-size: max(16px, 1.2vw) !important;
	}
}

/* --- Batch 3 follow-up · About "Ready to Build…" CTA row, 1000–1439px (2026-10-06) ---
   After step 3 (16px minimum root font) the "Book a Free Consultation" pill no longer fit its 251–320px column: it wrapped to two
   lines and touched the right screen edge at 1000–1279 (the right half has no right padding). Between 1000 and 1439px: heading column
   on the 40px gutter, text and pill stacked in the right half with a 40px right gutter. No change from 1440px up or below 1000px. */
@media only screen and (min-width: 1000px) and (max-width: 1439px) {
	.page-id-1533 .wpb_row.full-width-content:has(.nectar-cta[data-style="basic"]) > .row_col_wrap_12 > .wpb_column:first-child > .vc_column-inner {
		padding-left: 40px !important;
		padding-right: 40px !important;
	}
	.page-id-1533 .wpb_row.full-width-content:has(.nectar-cta[data-style="basic"]) > .row_col_wrap_12 > .wpb_column:last-child > .vc_column-inner {
		padding-right: 40px !important;
	}
	.page-id-1533 .wpb_row.full-width-content:has(.nectar-cta[data-style="basic"]) .inner_row .wpb_column {
		width: 100%;
		margin-right: 0;
	}
	.page-id-1533 .wpb_row.full-width-content:has(.nectar-cta[data-style="basic"]) .inner_row .wpb_column:has(.nectar-cta) {
		margin-top: 16px;
	}
}

/* ==========================================================================
   Consistency batch (newbpo, client-approved mockup 2026-10-08) — sitewide part.
   Page-scoped blocks follow below, one per page (".page-id-<id>").
   ========================================================================== */

/* Closing CTA heading: one size on Home, About, Services, Our Culture (3.25rem = 52px at 1440). */
#ajax-content-wrap .bpo-cta-title,
#ajax-content-wrap .bpo-cta-title :is(h1, h2, h3, h4, p, span),
body .nectar-split-heading.bpo-cta-title > * { font-family: 'Inter Tight'; font-size: 3.25rem; line-height: 1.15; font-weight: 400; letter-spacing: -0.015em; text-transform: none; }
@media (max-width: 999px) {
	#ajax-content-wrap .bpo-cta-title,
	#ajax-content-wrap .bpo-cta-title :is(h1, h2, h3, h4, p, span),
	body .nectar-split-heading.bpo-cta-title > * { font-size: 2.4rem; }
}
@media (max-width: 690px) {
	#ajax-content-wrap .bpo-cta-title,
	#ajax-content-wrap .bpo-cta-title :is(h1, h2, h3, h4, p, span),
	body .nectar-split-heading.bpo-cta-title > * { font-size: 2rem; line-height: 1.2; }
}

/* Contact "Send Message": the standard button (sky #1BAFEB, 8px corners, 43px, 19px text, arrow on the left).
   Yellow Pencil sets #wpforms-submit-1568 with !important (12px corners, #15a5de, full width), so these need it too. */
body.page-id-1258 #wpforms-form-1568 .wpforms-submit-container { justify-content: flex-start; }
body.page-id-1258 #wpforms-submit-1568 {
	background-color: #1BAFEB !important; color: #fff !important;
	border-radius: 8px !important; width: auto !important; height: 43px !important;
	padding: 0 23px !important; display: inline-flex !important; align-items: center; gap: 12px;
	font-family: 'Inter Tight'; font-size: 19px !important; font-weight: 500; line-height: 1;
}
body.page-id-1258 #wpforms-submit-1568::before {
	content: ""; width: 22px; height: 12px; flex: none; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath d='M0 6h20M15 1l5 5-5 5' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath d='M0 6h20M15 1l5 5-5 5' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 690px) { body.page-id-1258 #wpforms-submit-1568 { font-size: 17px !important; height: 46px !important; } }

/* ---- Consistency batch: Home (page 10) ---- */
/* Home (id 10) page CSS to append to the child theme. Scope: .page-id-10 */

/* Change 1c: "Our Impact" label above the Real Results heading. That column is not a flex column (it is sticky and styled
   by pagecss-10), so the label->heading gap (10px, same as the flex_gap_desktop of the other label columns) is set here. */
.page-id-10 .results-band .results-band__label { margin-bottom: 10px; }

/* ---- Consistency batch: About (page 1533) ---- */
/* ==========================================================================
   About (page id 1533): consistency build, page-scoped rules to append to the child theme CSS.
   `#ajax-content-wrap` is in the selectors on purpose: the page's Yellow Pencil (_wt_css) rules are very long
   class chains (some with !important) and an id outranks any number of classes. Nothing here changes a tag or an id.
   ========================================================================== */

/* --- Change 3: both leaders shown the same way (desktop/tablet row AND phone-only row) ----------------------------
   DOM: .team-member > .team-member-image (photo), .team-meta (h5 role, h3 name, p mini bio, read-more arrow).
   YP had made column 2 a row-reverse (photo on the right) and pushed .team-meta down 100px; both are undone here.
   Photo: same box for both leaders (200px, 4:5, cover) with 15px corners; name = bpo-type-h4 size (1.4rem, 1.26rem <1000). */
.page-id-1533 #ajax-content-wrap .team-member[data-style="bio_fullscreen_alt"] {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 24px;
	padding-right: 0;
	transform: none;
}
.page-id-1533 #ajax-content-wrap .team-member[data-style="bio_fullscreen_alt"] .team-member-image {
	flex: 0 0 200px;
	width: 200px;
	aspect-ratio: 4 / 5;
	margin-bottom: 0;
	border-radius: 15px;
	overflow: hidden;
}
.page-id-1533 #ajax-content-wrap .team-member[data-style="bio_fullscreen_alt"] .team-member-image-inner {
	width: 100%;
	height: 100%;
}
.page-id-1533 #ajax-content-wrap .team-member[data-style="bio_fullscreen_alt"] .team-member-image img {
	display: block;
	width: 100%;
	height: 100%;
	margin-bottom: 0;
	object-fit: cover;
	object-position: center top;
	border-radius: 15px;
}
.page-id-1533 #ajax-content-wrap .team-member[data-style="bio_fullscreen_alt"] .team-meta {
	flex: 1 1 0;
	min-width: 0;
	width: auto !important; /* overrides a YP rule that is !important (width: 70%) */
	padding-top: 0;
	top: 0;
	align-items: flex-start;
	text-align: left;
	transform: none;
}
.page-id-1533 #ajax-content-wrap .team-member[data-style="bio_fullscreen_alt"] .team-meta h5,
.page-id-1533 #ajax-content-wrap .team-member[data-style="bio_fullscreen_alt"] .team-meta h3,
.page-id-1533 #ajax-content-wrap .team-member[data-style="bio_fullscreen_alt"] .team-meta p {
	text-align: left;
}
.page-id-1533 #ajax-content-wrap .team-member[data-style="bio_fullscreen_alt"] .team-meta h3 {
	font-size: 1.4rem;
	line-height: 1.3;
	font-weight: 400;
	letter-spacing: 0;
}
/* the two leaders stacked in the phone-only row (one column holds both) */
.page-id-1533 #ajax-content-wrap .team-member + .team-member {
	margin-top: 32px;
}
@media only screen and (max-width: 999px) {
	.page-id-1533 #ajax-content-wrap .team-member[data-style="bio_fullscreen_alt"] { gap: 16px; }
	.page-id-1533 #ajax-content-wrap .team-member[data-style="bio_fullscreen_alt"] .team-member-image { flex-basis: 120px; width: 120px; }
	.page-id-1533 #ajax-content-wrap .team-member[data-style="bio_fullscreen_alt"] .team-meta h3 { font-size: 1.26rem; }
}

/* --- Change 4: "Stronger Together" values = shared card (bg + 1px border + 15px corners come from the column attributes;
   class bpo-value-card is set on the four columns). Here: equal heights, rounded border, and the border stays on <=814px
   (YP forces border-right-width:0 !important on inner columns there). */
.page-id-1533 #ajax-content-wrap .bpo-value-card > .vc_column-inner {
	height: 100%;
	border-radius: inherit;
}
@media only screen and (max-width: 999px) {
	.page-id-1533 #ajax-content-wrap .bpo-value-card > .vc_column-inner { border-right-width: 1px !important; }
}

/* --- Change 5: Founder Perspective + At a Glance on the gutter. The row padding (40px / 6%) is set on the row.
   YP adds 48px side padding to the outer columns of #team (both #team rows) below 1000px: drop it so the content stays on the gutter. */
@media only screen and (max-width: 999px) {
	.page-id-1533 #team .row_col_wrap_12 > .vc_column_container > .vc_column-inner {
		padding-left: 0;
		padding-right: 0;
	}
}
/* --- Change 5: figures in the shared figure style (mockup .figs.dark): big number, small caption, left aligned, no divider lines.
   The columns carry Salient's centred-text class: reset it for #team. Number size follows the column width so
   "UK and US" fits next to the other three at 1000-1200px (2.75rem = 44px from ~1470px). */
.page-id-1533 #team .wpb_column.centered-text,
.page-id-1533 #team .wpb_column.centered-text .wpb_wrapper {
	text-align: left;
}
.page-id-1533 #ajax-content-wrap #team .bpo-fig-num {
	margin: 0 0 12px;
	font-size: clamp(1.75rem, 3vw, 2.75rem);
	line-height: 1;
	font-weight: 400;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	text-align: left;
}
.page-id-1533 #ajax-content-wrap #team .bpo-fig-cap {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.4;
	color: #4A4F58;
	text-align: left;
}
/* safety net: no vertical divider on the figure columns (attributes were removed; this covers any leftover border) */
.page-id-1533 #team .inner_row .vc_column_container,
.page-id-1533 #team .inner_row .vc_column-inner {
	border-right-width: 0;
}

/* --- Change 6: closing CTA. YP forces every Salient button label inside an inner row to 17px (!important) at <=470px;
   the shared CTA row sets the label size on the element (0.988rem on phones), so hand control back to it. */
@media only screen and (max-width: 470px) {
	html body.page-id-1533 .row_col_wrap_12_inner .vc_column_container .vc_column-inner .wpb_wrapper .nectar-cta .nectar-button-type .link_wrap .link_text span {
		font-size: 0.988rem !important;
	}
}

/* ---- Consistency batch: Services (page 1580) ---- */
/* Services (1580): no extra child-theme rules are needed. Everything is done in the content (bpo-type-h4 / bpo-type-h5 classes,
   standard nectar_cta, bpo-cta-title heading class) plus the page CSS meta in pagecss.new.txt (Home's "How We Can Help You" rules,
   already re-scoped to #services / body.page-id-1580). Needs from the main session: the .bpo-cta-title rule (3.25rem desktop). */

/* ---- Consistency batch: Our Culture (page 1598) ---- */
/* ==========================================================================
   Our Culture (page id 1598) — consistency build. Append to the child theme.
   All rules are scoped with .page-id-1598 and beat the Yellow Pencil rules (post meta _wt_css) by specificity, no !important.
   ========================================================================== */

/* Change 2 (photo corners 15px): Yellow Pencil's ".ocm-effect-wrap .wpb_wrapper img {border-radius:10px}" overrode the
   15px set on each Image-with-Animation element, so the two section photos rendered at 10px. Same selector + page id + the
   image wrapper class (0,5,1) puts every photo on the page back to the shared 15px. */
.page-id-1598 .ocm-effect-wrap .wpb_wrapper .img-with-aniamtion-wrap img,
.page-id-1598 .ocm-effect-wrap .wpb_wrapper .img-with-aniamtion-wrap .hover-wrap {
	border-radius: 15px;
}

/* Change 4 (button: wider arrow-to-text gap, 314px vs 289px). Cause: not a shortcode attribute but Yellow Pencil's
   ".ocm-effect-wrap .child_column i {background:#1bafeb; color:#0b1f3b; padding-left:5px; padding-right:20px; border-radius:100px}"
   (written for the old tick icons). The CTA sits in an inner column (.child_column) so its arrow <i> got +25px padding and a navy
   colour. Undo it for the button arrow only; padding 0 is what Home's button has (width difference was exactly 5+20). */
.page-id-1598 .ocm-effect-wrap .child_column .nectar-cta i {
	padding-left: 0;
	padding-right: 0;
	background: none;
	border-radius: 0;
	color: inherit;
}

/* Change 3 (Core Values line icons): same Yellow Pencil rule would turn the new Nectar Icon glyphs (inner columns too) into
   sky pills with navy glyphs and 25px side padding. Keep them as About's icons: plain glyph, sky colour, the circle comes
   from the icon's own soft background. */
.page-id-1598 .ocm-effect-wrap .child_column .nectar_icon_wrap .nectar_icon i {
	padding-left: 0;
	padding-right: 0;
	background: none;
	border-radius: 0;
	color: var(--nectar-accent-color, #1BAFEB);
}

/* ---- Consistency batch: Contact (page 1258) ---- */
/* Contact (page-id-1258): no page CSS needed.
   All approved changes are WPBakery attribute edits (see apply.py): gutter, card title class, 15px corners, details card shadow/white bg.
   The Yellow Pencil _wt_css has no rule that fights them (checked: no radius/shadow/padding rule targets the changed columns by id;
   its box-shadow rule hits only the 2nd top-level column = the navy form card, left as is). */

/* ---- Consistency batch 2: fixes after the on-screen review (2026-10-08) ---- */
/* About: "At a Glance" inner row kept Salient's -15px inner-row margin, so below 1000px it sat 3–7px from the screen edge. */
@media (max-width: 999px) {
	body.page-id-1533 #team .row_col_wrap_12_inner { margin-left: 0; margin-right: 0; }
}

/* Footer: 7 links now (Home + Contact added); at 1000–1100px the single flex line squeezed them into 2-line words. Keep each link
   on one line and let the list wrap between links. */
.nectar_hook_global_section_footer .wpb_wrapper:has(> .nectar-cta) { flex-wrap: wrap; row-gap: 6px; }
.nectar_hook_global_section_footer .wpb_wrapper > .nectar-cta { flex: none; white-space: nowrap; }

/* Closing CTA heading: balanced lines, no one-word last line ("Costs?", "Team?"). */
#ajax-content-wrap .bpo-cta-title :is(h1, h2, h3) { text-wrap: balance; }

/* Contact: the form card loses Yellow Pencil's large drop shadow — no other card on the site has one. */
body.page-id-1258 .vc_column-inner:has(.wpforms-container) { box-shadow: none !important; }

/* -- batch 2: About -- */
/* ==========================================================================
   About (page id 1533), fix round 2. Load AFTER out/1533/page.css and out/global/extra.css.
   Everything is scoped with body.page-id-1533; #ajax-content-wrap / #team ids are used on purpose to outrank the
   long Yellow Pencil (_wt_css) class chains. No tags or ids changed.
   ========================================================================== */

/* --- Issue 1: Founder Perspective / At a Glance share ONE left edge (the page gutter) ------------------------------
   a) Salient's -15px inner-row margin also shifts the "At a Glance" block on desktop (extra.css only covers < 1000px).
   b) The quote mark sat in a 2/12 column beside the quote, so the quote text was indented from the label (3 left edges
      at 375). Stack mark above quote in the sticky column at every width so mark, quote and name start on the gutter.
   c) The quote icon wrapper carries 10px side padding that pushes the glyph in from the edge. */
body.page-id-1533 #team .row_col_wrap_12_inner {
	margin-left: 0;
	margin-right: 0;
}
body.page-id-1533 #team .nectar-sticky-column-css .row_col_wrap_12_inner > .wpb_column {
	width: 100%;
	flex: 0 0 100%;
}
body.page-id-1533 #team .nectar-sticky-column-css .nectar_icon {
	padding-left: 0;
	padding-right: 0;
}
body.page-id-1533 #team .nectar-sticky-column-css .nectar_icon > i {
	margin-left: 0; /* the font icon carries margin-left:-15px, which pulled the glyph 15px left of the label */
}
/* YP pulls the quote text up by 45px (phones) because it used to sit beside the mark: not needed when stacked */
body.page-id-1533 #team .nectar-sticky-column-css .row_col_wrap_12_inner .wpb_wrapper {
	margin-top: 0;
}

/* --- Issue 2: "At a Glance" figures = a real grid (4 equal columns >= 1000px, 2 x 2 below) with a clear gap -------
   The columns were floats with unequal heights/widths (and YP width:50% / margin-top:20px rules per nth-child), so
   "UK and US" ran into "95%+" and the phone rows were uneven. The number size follows the width of its own column
   (container query) so the widest figure ("UK and US", about 4.5em wide) always fits its cell. */
body.page-id-1533 #team .row_col_wrap_12 > .wpb_column:has(.bpo-fig-num) > .vc_column-inner {
	container-type: inline-size;
}
body.page-id-1533 #team .row_col_wrap_12_inner:has(.bpo-fig-num) {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 24px;
	row-gap: 28px;
}
body.page-id-1533 #team .row_col_wrap_12_inner:has(.bpo-fig-num) > .wpb_column {
	width: auto;
	float: none;
	margin: 0;
	padding: 0;
}
@media only screen and (min-width: 1000px) {
	body.page-id-1533 #team .row_col_wrap_12_inner:has(.bpo-fig-num) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	body.page-id-1533 #ajax-content-wrap #team .bpo-fig-num {
		font-size: clamp(1.5rem, 4.6cqw, 2.75rem);
	}
}

/* number-to-caption gap = 12px (the number carried 1.5em of bottom padding on top of its 12px margin) */
body.page-id-1533 #ajax-content-wrap #team .bpo-fig-num {
	padding-bottom: 0;
}

/* --- Issue 3: stray vertical line between the two leaders --------------------------------------------------------
   YP gives leader 2's column a 2px grey border-left meant as a divider. Salient stacks the two columns below 1280px,
   where the line then sits at the left screen edge (and shifts leader 2 by 2px). Keep it only when they sit side by side. */
@media only screen and (max-width: 1279px) {
	body.page-id-1533 #ajax-content-wrap .row_col_wrap_12_inner > .wpb_column:has(.team-member) {
		border-left-width: 0;
	}
}

/* --- Issue 4: "Stronger Together" cards reach the right gutter ---------------------------------------------------
   The column holding the cards has Salient's padding-4-percent class, which leaves a 4% right padding on
   .vc_column-inner: the cards stop 22-50px short of the gutter. Drop only the right padding. */
body.page-id-1533 #ajax-content-wrap .wpb_row:has(.bpo-value-card) > .row_col_wrap_12 > .wpb_column:has(.bpo-value-card) > .vc_column-inner {
	padding-right: 0;
}

/* -- batch 2: Our Culture -- */
/* ==========================================================================
   Our Culture (page id 1598) — fix round 2. Append to the child theme AFTER page.css.
   CSS only. Every rule is scoped with body.page-id-1598; the Core Values section is found with
   :has(.nectar_icon_wrap) (it is the only full-width row on the page holding the line icons), so no generated
   element id (#fws_…) is used. Beats Salient's .padding-5-percent and Yellow Pencil by specificity; !important only
   where an inline style is overridden (issue 4).
   ========================================================================== */

/* Shared gutter for the Core Values section: 40px at >=1000px (= logo x), 6% of the row below. */
body.page-id-1598 .wpb_row.full-width-content:has(.nectar_icon_wrap) {
	--cv-gutter: 40px;
}
@media (max-width: 999px) {
	body.page-id-1598 .wpb_row.full-width-content:has(.nectar_icon_wrap) {
		--cv-gutter: 6%;
	}
}

/* Issue 1 (content off the shared left edge: 72px at 1440, 50px at 1024).
   Cause: every inner column carries Salient's "padding-5-percent" (5% on all sides = 72px at 1440).
   The first column of every inner row (heading row and card row) takes the gutter on the left; every column takes it on
   the right so the right edge is also on the gutter; cards 2 and 3 get the gutter on their left (= 40px of air after the
   card before). The intro column keeps its own 100px left offset (left_padding_desktop) on desktop. */
body.page-id-1598 .wpb_row.full-width-content:has(.nectar_icon_wrap) .inner_row > .row_col_wrap_12_inner > .child_column > .vc_column-inner {
	padding-right: var(--cv-gutter);
}
body.page-id-1598 .wpb_row.full-width-content:has(.nectar_icon_wrap) .inner_row > .row_col_wrap_12_inner > .child_column:first-child > .vc_column-inner,
body.page-id-1598 .wpb_row.full-width-content:has(.nectar_icon_wrap) .inner_row:has(.nectar_icon_wrap) > .row_col_wrap_12_inner > .child_column > .vc_column-inner {
	padding-left: var(--cv-gutter);
}

/* Issue 1, phones: Yellow Pencil forces ".ocm-effect-wrap .wpb_wrapper .vc_column-inner {padding:20px !important}" at <=479px
   (and 0 on ".vc_hidden-lg" rows), which puts the section at 19px instead of the 22.5px gutter of the sections above.
   Only way to override an !important is another one, with higher specificity; left/right only. */
@media (max-width: 479px) {
	body.page-id-1598 .wpb_row.full-width-content:has(.nectar_icon_wrap) .inner_row > .row_col_wrap_12_inner > .child_column > .vc_column-inner {
		padding-left: var(--cv-gutter) !important;
		padding-right: var(--cv-gutter) !important;
	}
}

/* Issue 3 (768: header columns 449 + 321px with the intro pushed to the far right; card text capped at 300px so only the
   left ~45% of the screen is used). At tablet width the header stacks (heading, then intro under it, both on the
   gutter), the cards stay stacked (1-up) and their text/lists run the full content width. */
@media (max-width: 999px) {
	body.page-id-1598 .wpb_row.full-width-content:has(.nectar_icon_wrap) .inner_row:not(:has(.nectar_icon_wrap)) > .row_col_wrap_12_inner > .child_column {
		width: 100%;
	}
	body.page-id-1598 .wpb_row.full-width-content:has(.nectar_icon_wrap) .inner_row:not(:has(.nectar_icon_wrap)) > .row_col_wrap_12_inner > .child_column:nth-child(2) > .vc_column-inner {
		padding-left: var(--cv-gutter);
		padding-top: 0;
	}
	body.page-id-1598 .wpb_row.full-width-content:has(.nectar_icon_wrap) .inner_row .wpb_text_column {
		max-width: none !important; /* the "max_width=300" attribute is an inline style */
	}
}

/* Issue 2 (1024: tick icons stretched into 25 x 51px pills when the list line wraps).
   Salient's fancy-ul gives the <i> height:100% of its <li>; Yellow Pencil's ".ocm-effect-wrap .child_column i" adds the
   sky pill. Fix the box to the size it has on one line (25 x 25.6px, the 1440 rendering) so it can never stretch. */
body.page-id-1598 .wpb_row.full-width-content:has(.nectar_icon_wrap) .nectar-fancy-ul li > i {
	width: 25px;
	height: 25.6px;
	flex: 0 0 25px;
}

/* Issue 4 (hero label "Our Culture" white at >=768, sky on phones). The label's colour is an inline style
   (color: #FFFFFF) on the hero's text column; the phone hero is a separate element that is already sky.
   Sky = the label colour of every other section, 1.1rem/600 come from .bpo-type-h5. */
body.page-id-1598 .wpb_row.top-level .nectar-split-heading.bpo-type-h5 p[style*="FFFFFF" i] {
	color: #1BAFEB !important;
}

/* Issue 5 (Core Values card titles ~1.8vw: 25.9px at 1440, 18.4px at 1024). Card-title size = 1.4rem (22.4px).
   The size is set on the "nectar_responsive_text" wrapper by an inline rule with an id
   ("#ajax-content-wrap .font_size_desktop_1vw.nectar-responsive-text {font-size:1.8vw}", and the tablet twin = 22px);
   the <h3> inherits it. Same id in our selector + more classes wins, no !important. */
body.page-id-1598 #ajax-content-wrap .wpb_row.full-width-content:has(.nectar_icon_wrap) .nectar-responsive-text[class*="font_size"] {
	font-size: 1.4rem;
}

/* -- batch 2: Services + Home seam -- */
/* fix2 (Services 1580 + one shared seam on Home 10). CSS only, appended to the child theme. 2026-10-08.
   Several targets are styled by inline px set from JS (Salient row padding) or by Yellow Pencil (_wt_css) rules, hence html body prefixes / !important. */

/* 1. "Our Trained Agents" card: white text on the white card. The phone copy of the card inherits the white of the dark/navy
      neighbours; make the title and list #1E1E1E at all widths. The tick icons keep their own colour (icon-salient-check, navy). */
html body.page-id-1580 .child_column:has(.fa-users) .wpb_wrapper,
html body.page-id-1580 .child_column:has(.fa-users) h3,
html body.page-id-1580 .child_column:has(.fa-users) li { color: #1E1E1E; }

@media only screen and (max-width: 479px) {
  /* 2. Problem / Solution / Trained Agents cards: inset ~48px on phones. The card column is wrapped in a column that has 2.5px own padding
        plus a 24px inner padding (YP .zindex-set:nth-child(4) .row_col_wrap_12 .col-overflow-hidden > .vc_column-inner). Drop both sideways
        (1px keeps the card on the same x as the hero photo and the headings: the full-width row sits 1px left of the container). Inner card padding is untouched. */
  html body.page-id-1580 .wpb_row.vc_hidden-lg.vc_hidden-md:has(.fa-users) > .row_col_wrap_12 > .col-overflow-hidden { padding-left: 1px; padding-right: 1px; }
  html body.page-id-1580 .wpb_row.vc_hidden-lg.vc_hidden-md:has(.fa-users) > .row_col_wrap_12 > .col-overflow-hidden > .vc_column-inner { padding-left: 0; padding-right: 0; }

  /* 3. Hero button "Let's Drive Your Growth": 67px tall because the phone link carries margin 10px 0 30px (YP .ocm-effect-wrap .vc_hidden-lg a
        {margin-top:10px !important; margin-bottom:30px !important}), which grows the button. Same text size as the other buttons already; remove that margin so the
        height equals the standard button (the 20px outer margin of the .nectar-cta still spaces it from the photo). */
  html body.page-id-1580 .ocm-effect-wrap .vc_hidden-lg .nectar-cta a.link_text { margin-top: 0 !important; margin-bottom: 0 !important; }
}

/* 4. Results (navy) -> "Our Process / How We Can Help You" (navy): the heading row (6% / 15% top padding, set inline from JS) stacked on Results' bottom padding
      (5% / 20%). The two rows are one block of navy, so: the heading row loses its top padding and Results' bottom padding becomes equal to its top padding
      (4vw desktop, the px value Salient writes inline for the top; 10% of the 88% container = 8.8vw below 1000px). */
html body.page-id-1580 .wpb_row:has(+ #services) { padding-top: 0 !important; }
html body.page-id-1580 #values { padding-bottom: 4vw !important; }
@media only screen and (max-width: 999px) {
  html body.page-id-1580 #values { padding-bottom: 8.8vw !important; }
}

/* 5. Faint full-width line between the "How We Can Help You" heading row and #services (Services + Home): two navy rows meet at a fractional y
      (e.g. 3126.95), the antialiased edges let the light page ground through. Overlap them by 1px (the later row paints over the earlier one's last pixel). */
html body.page-id-1580 .wpb_row:has(+ #services),
html body.page-id-10 .wpb_row:has(+ #services) { margin-bottom: -1px; }
/* same seam one row up on Services: Results (#values) -> heading row, both navy */
html body.page-id-1580 #values { margin-bottom: -1px; }

@media only screen and (max-width: 690px) {
  /* 6. "What We Offer" on phones (phone-only copy of the section): icons sat at 34px (column padding 15px inside a -3.3px row margin) while the
        heading is at 22px, and each item had 15px above / 40px below its title (25px column margin, 0 on the last of each row) -> columns flush to the content
        edge, no column margin, same 24px above and below every item. */
  html body.page-id-1580 .vc_hidden-lg.vc_hidden-md.vc_hidden-sm:has(.iwithtext) .row_col_wrap_12_inner { margin-left: 0; margin-right: 0; }
  html body.page-id-1580 .vc_hidden-lg.vc_hidden-md.vc_hidden-sm:has(.iwithtext) .inner_row .child_column { padding: 24px 0 !important; margin-bottom: 0 !important; }
}