/**
Theme Name: Astra Child
Author: ConvyLab
Author URI: https://www.convylab.com
Description: Astra child theme for Elevate IT Service Group.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
*/

/* ==========================================================================
   ID SELECTORS USED IN THIS FILE
   Section ids are anchors first; these three are also used as style scopes,
   because the rules below must out-rank Spectra's own per-block CSS
   (`[data-spectra-id] > * { margin: 0 }` and friends):

     #how-we-help        card CTA pinned to the card floor + hover fill,
                         plus the card min-height (only this row uses it)
     #who-we-work-with   card CTA pinned to the floor + underline on hover
     #talk-with-elevate  form spacing on the brand panel

   No other id selectors are used. Add to this list if that changes.
   ========================================================================== */

.site-header-primary-section-right-center.site-header-section.ast-flex.ast-grid-right-center-section {
	justify-content: flex-end;
}

/* ==========================================================================
   Elevate Home v3 — the only rules Spectra's UI cannot express.

   Everything else lives on the blocks: widths, heights, padding, gaps,
   radius, shadow, colours, and the hero photo (a container background image).
   Container width comes from the Customizer via
   var(--wp--custom--ast-content-width-size) — never hardcoded.

   Specificity: Spectra ships
   `.wp-block-spectra-container:not(.alignfull){width:100%}` (0,2,0), so rules
   that must outrank it repeat the class.
   Breakpoints follow Spectra's fixed devices: sm <=767.98, md 768–1023.98.
   ========================================================================== */

/* Outline button border colour. Spectra emits the 1.5px width but routes
   border COLOUR through its `borderColor` attribute, which only accepts a
   palette slug - and a 35% tint of the brand colour has no slug. Derived from
   the palette with color-mix so it tracks slot 0 instead of freezing a hex.
   Without this, Astra's preset border-color (--ast-global-color-7) wins. */
.wp-block-spectra-button.wp-block-spectra-button.ev-btn-outline {
	border-color: color-mix(in srgb, var(--ast-global-color-0) 35%, transparent);
}

/* Measure — the design's `max-width: Nch` line-length limits */
.ev-h1    { max-width: 17ch; }
.ev-lead  { max-width: 44ch; }
.ev-sub   { max-width: 48ch; }

/* Hero media: blob sits behind the photo, stat card floats in front */
.ev-hero-media { position: relative; }

.wp-block-spectra-container.wp-block-spectra-container.ev-hero-blob {
	position: absolute;
	left: 22%;
	top: -8%;
	z-index: 0;
	pointer-events: none;
}

.wp-block-spectra-container.wp-block-spectra-container.ev-hero-photo {
	position: relative;
	z-index: 1;
}

.wp-block-spectra-container.wp-block-spectra-container.ev-hero-card {
	position: absolute;
	left: -56px;
	bottom: -44px;
	z-index: 2;
}

/* Tablet */
@media (max-width: 1023.98px) {
	.wp-block-spectra-container.wp-block-spectra-container.ev-hero-card {
		left: 0;
		bottom: -32px;
	}
}

/* Mobile — the card leaves the overlap and stacks under the photo */
@media (max-width: 767.98px) {
	.ev-h1, .ev-lead, .ev-sub { max-width: 100%; }
	.wp-block-spectra-container.wp-block-spectra-container.ev-hero-blob {
		left: 18%;
		top: -6%;
	}
	.wp-block-spectra-container.wp-block-spectra-container.ev-hero-card {
		position: static;
		margin-top: 20px;
	}
}

/* --- Sections 3–10 -------------------------------------------------------- */

/* Outline button: on hover the border matches the hover background so the
   pill fills cleanly (Astra's hover bg is --ast-global-color-1). */
.wp-block-spectra-button.wp-block-spectra-button.ev-btn-outline:hover,
.wp-block-spectra-button.wp-block-spectra-button.ev-btn-outline:focus-visible {
	border-color: var(--ast-global-color-1);
}

/* Measures from the mockup's `max-width: Nch` */
.ev-m20  { max-width: 20ch; }
.ev-m22  { max-width: 22ch; }
.ev-m32  { max-width: 32ch; }
.ev-m44  { max-width: 44ch; }
.ev-m46  { max-width: 46ch; }

/* Card "go" pill — inherits its border colour from the text colour so the
   light-on-dark variant needs no separate rule. */
.wp-block-spectra-container.wp-block-spectra-container.ev-go {
	border-color: color-mix(in srgb, var(--ast-global-color-0) 30%, transparent);
	margin-top: auto;
	align-self: flex-start;
}
.wp-block-spectra-container.wp-block-spectra-container.ev-go-dark {
	border-color: color-mix(in srgb, var(--ast-global-color-4) 28%, transparent);
}

/* Numbered badge on the dark solution card */
.wp-block-spectra-container.wp-block-spectra-container.ev-badge-dark {
	background: color-mix(in srgb, var(--ast-global-color-4) 14%, transparent);
}

@media (max-width: 767.98px) {
	.ev-m20, .ev-m22, .ev-m32, .ev-m44, .ev-m46, .ev-m60 { max-width: 100%; }
}

/* --- Closing CTA: topic pills + WPForms ----------------------------------- */

/* Outline pills on the brand panel. Border colour is set here because Spectra
   routes border colour through a palette-slug attribute and these are
   translucent whites, which have no slug. */
.wp-block-spectra-button.wp-block-spectra-button.ev-pill {
	border-color: color-mix(in srgb, var(--ast-global-color-4) 30%, transparent);
	line-height: 1.2;
}
.wp-block-spectra-button.wp-block-spectra-button.ev-pill:hover,
.wp-block-spectra-button.wp-block-spectra-button.ev-pill:focus-visible {
	background-color: color-mix(in srgb, var(--ast-global-color-4) 16%, transparent);
	border-color: var(--ast-global-color-4);
}

/* WPForms restyled to the mockup's form: pill fields on the brand panel. */
.ev-form.wpforms-container-full .wpforms-field-container {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
}
.ev-form.wpforms-container-full .wpforms-field {
	padding: 0;
	width: 100%;
	max-width: 100%;
}

/* The Contact Form puts First/Last in a two-column row (`wpforms-one-half`),
   which leaves the second field indented by 20px. The mockup stacks every
   field flush-left, so the column offset is removed. */
.ev-form.wpforms-container-full .wpforms-field.wpforms-one-half,
.ev-form.wpforms-container-full .wpforms-field.wpforms-first {
	margin-left: 0;
	margin-right: 0;
	float: none;
	clear: both;
}

/* WPForms' size classes (small/medium/large) cap field width via
   `div.wpforms-container-full .wpforms-field-medium`; the mockup's fields are
   full-width, so match that selector shape. */
.ev-form.wpforms-container-full .wpforms-field-small,
.ev-form.wpforms-container-full .wpforms-field-medium,
.ev-form.wpforms-container-full .wpforms-field-large,
.ev-form.wpforms-container-full input.wpforms-field-medium,
.ev-form.wpforms-container-full select.wpforms-field-medium,
.ev-form.wpforms-container-full textarea.wpforms-field-medium {
	width: 100%;
	max-width: 100%;
}
.ev-form .wpforms-field-label,
.ev-form .wpforms-field-sublabel,
.ev-form .wpforms-required-label { display: none; }

.ev-form.wpforms-container-full .wpforms-form input[type="text"],
.ev-form.wpforms-container-full .wpforms-form input[type="email"],
.ev-form.wpforms-container-full .wpforms-form input[type="tel"],
.ev-form.wpforms-container-full .wpforms-form input[type="url"],
.ev-form.wpforms-container-full .wpforms-form input[type="number"],
.ev-form.wpforms-container-full .wpforms-form select,
.ev-form.wpforms-container-full .wpforms-form textarea {
	width: 100%;
	max-width: 100%;
	background: color-mix(in srgb, var(--ast-global-color-4) 8%, transparent);
	border: 1.5px solid color-mix(in srgb, var(--ast-global-color-4) 22%, transparent);
	border-radius: 999px;
	padding: 16px 24px;
	font-size: 17px;
	line-height: 1.65;
	height: auto;
	min-height: 0;
	font-family: inherit;
	color: var(--ast-global-color-4);
	outline: none;
	box-shadow: none;
	transition: border-color 180ms ease, background 180ms ease;
}
.ev-form.wpforms-container-full .wpforms-form textarea { border-radius: 24px; min-height: 120px; }
.ev-form.wpforms-container-full .wpforms-form input::placeholder,
.ev-form.wpforms-container-full .wpforms-form textarea::placeholder {
	color: color-mix(in srgb, var(--ast-global-color-4) 70%, transparent);
}
.ev-form.wpforms-container-full .wpforms-form input:focus,
.ev-form.wpforms-container-full .wpforms-form textarea:focus,
.ev-form.wpforms-container-full .wpforms-form select:focus {
	border-color: var(--ast-global-color-4);
	background: color-mix(in srgb, var(--ast-global-color-4) 16%, transparent);
}
.ev-form input:focus-visible,
.ev-form textarea:focus-visible { outline: 2px solid var(--ast-global-color-5); outline-offset: 2px; }

/* WPForms "modern" render drives the submit button from custom properties, so
   the button is themed by overriding those rather than fighting their rules. */
.ev-form.wpforms-container-full {
	--wpforms-button-background-color: var(--ast-global-color-4);
	--wpforms-button-text-color: var(--ast-global-color-2);
	--wpforms-button-border-color: var(--ast-global-color-4);
	--wpforms-button-border-radius: 999px;
	--wpforms-button-size-font-size: 17px;
	--wpforms-button-size-height: auto;
	--wpforms-button-size-padding-h: 34px;
	--wpforms-button-size-margin-top: 28px;
	--wpforms-field-border-radius: 999px;
}

/* WPForms wins with `div.wpforms-container-full button[type=submit]:not(:hover):not(:active)`,
   so the resting state is matched at the same shape rather than with !important. */
.ev-form.wpforms-container-full .wpforms-form button[type="submit"]:not(:hover):not(:active),
.ev-form.wpforms-container-full .wpforms-form button[type="submit"] {
	background: var(--ast-global-color-4);
	color: var(--ast-global-color-2);
	border: 0;
	border-radius: 999px;
	/* Matches the global button rhythm: 17px text at 1.2em + 20.8px padding
	   = the same 62px pill height as every other button on the page. */
	padding: 20.8px 34px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.2;
	height: auto;
	width: auto;
	cursor: pointer;
	transition: background 180ms ease, color 180ms ease;
}
.ev-form.wpforms-container-full .wpforms-form button[type="submit"]:hover {
	background: var(--ast-global-color-5);
	color: var(--ast-global-color-2);
}

/* Astra's error/description text would otherwise read as dark on the panel */
.ev-form .wpforms-field-description,
.ev-form .wpforms-error { color: color-mix(in srgb, var(--ast-global-color-4) 75%, transparent); }

/* --- Site footer (Astra footer builder) ----------------------------------- */

.ast-footer-copyright,
.site-footer .widget { font-size: 17px; }

/* The mockup's footer links are plain — no underline, muted until hover. */
.site-footer a,
.ast-footer-copyright a {
	text-decoration: none;
	box-shadow: none;
}
.site-footer a:hover,
.ast-footer-copyright a:hover { color: var(--ast-global-color-0); }

.site-footer .widget ul { list-style: none; margin: 0; padding: 0; }
.site-footer .widget ul li { margin: 0 0 14px; }
.site-footer .widget ul li:last-child { margin-bottom: 0; }

/* Footer rhythm from the mockup: the grid carries 48px beneath it and the
   footer closes with 56px. Astra's own row padding (45px / 20px) is replaced
   rather than added to, so the spacing is applied once. */
.site-primary-footer-wrap.site-primary-footer-wrap { padding: 0 0 20px; }

/* Astra keeps emitting a row rule with `border-style: solid` even with the
   separator set to 0, so the width is zeroed at matching specificity.
   The mockup has no rule between the footer rows. */
.site-footer .site-primary-footer-wrap[data-section="section-primary-footer-builder"],
.site-footer .site-below-footer-wrap[data-section="section-below-footer-builder"] {
	border-top-width: 0;
	border-bottom-width: 0;
}
.site-below-footer-wrap.site-below-footer-wrap { padding: 0 0 56px; }

/* Copyright: 16px muted, left aligned — Astra centres it by default. */
.ast-footer-copyright.ast-footer-copyright,
.ast-footer-copyright.ast-footer-copyright p {
	text-align: left;
	font-size: 16px;
	color: var(--ast-global-color-3);
	margin: 0;
}

@media (max-width: 1023.98px) {
}
@media (max-width: 767.98px) {
}

/* --- Card rows, placeholders and hover states ----------------------------- */

/* Cards in a row must match height. Spectra's grid sets align-items:flex-start,
   so each card sized to its own content. */
.ev-grid2 { align-items: stretch; }
.wp-block-spectra-container.wp-block-spectra-container.ev-card { height: 100%; }

/* Icon badge circle (Who we work with) */
.ev-badge-circle .wp-block-spectra-icon svg { width: 22px; height: 22px; }

/* Audience cards read as links: lift + brand-tinted CTA on hover. */
.wp-block-spectra-container.wp-block-spectra-container.ev-card {
	transition: transform 220ms ease, box-shadow 220ms ease;
}
/* The [esg_insights] rows carry .ev-card for their layout but are hairline rows,
   not filled cards — they keep only their arrow hover. */
.wp-block-spectra-container.wp-block-spectra-container.ev-card:not(.ev-insight-row):hover,
.wp-block-spectra-container.wp-block-spectra-container.ev-card-outline:not(.ev-insight-row):hover {
	transform: translateY(-4px);
	box-shadow: 0 24px 60px color-mix(in srgb, var(--ast-global-color-6) 14%, transparent);
}

/* Outlined cards deepen their border on hover as well, so the lift reads on a
   white card that has no fill to shade. */
.wp-block-spectra-container.wp-block-spectra-container.ev-card-outline:not(.ev-insight-row):hover {
	border-color: color-mix(in srgb, var(--ast-global-color-0) 55%, transparent);
}

/* Card "go" pill picks up the same fill-on-hover as the buttons. */
.wp-block-spectra-container.wp-block-spectra-container.ev-go {
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
#how-we-help .ev-card:hover .ev-go:not(.ev-go-dark) {
	background: var(--ast-global-color-0);
	border-color: var(--ast-global-color-0);
}
#how-we-help .ev-card:hover .ev-go:not(.ev-go-dark) .wp-block-spectra-content {
	color: var(--ast-global-color-4);
}
#how-we-help .ev-card:hover .ev-go-dark {
	background: color-mix(in srgb, var(--ast-global-color-4) 16%, transparent);
	border-color: var(--ast-global-color-4);
}

/* Every button gets the hero's hover behaviour: fill to the Customizer's
   button hover colour, border follows the fill. */
.wp-block-spectra-button {
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
/* !important is required: a button whose background comes from a palette slug
   also carries Gutenberg's .has-<slug>-background-color class, and core ships
   that with !important - which silently beats every hover rule. */
.wp-block-spectra-button.wp-block-spectra-button.ev-btn-light:hover,
.wp-block-spectra-button.wp-block-spectra-button.ev-btn-light:focus-visible {
	background-color: var(--ast-global-color-5) !important;
	border-color: var(--ast-global-color-5);
	color: var(--ast-global-color-6) !important;
}

/* --- Round 2 refinements -------------------------------------------------- */

/* Card CTA is a real button now; keep the mockup's outline-pill look. */
.wp-block-spectra-button.wp-block-spectra-button.ev-go-btn {
	border-color: color-mix(in srgb, var(--ast-global-color-0) 30%, transparent);
	border-radius: 999px;
	line-height: 1.2;
	font-size: 16px;
	font-weight: 600;
}
.wp-block-spectra-button.wp-block-spectra-button.ev-go-btn-dark {
	border-color: color-mix(in srgb, var(--ast-global-color-4) 28%, transparent);
}
/* CTA pinned to the card floor. Generalised from #how-we-help on 2026-09-02
   so any page using .ev-card gets it - Solutions was missing it because the
   old rule was id-scoped. */
.wp-block-spectra-container.wp-block-spectra-container.ev-card > .wp-block-spectra-buttons.ev-go-wrap {
	margin-top: auto;
	align-self: flex-start;
}
.wp-block-spectra-button.wp-block-spectra-button.ev-go-btn:hover,
.wp-block-spectra-button.wp-block-spectra-button.ev-go-btn:focus-visible {
	background-color: var(--ast-global-color-0);
	border-color: var(--ast-global-color-0);
	color: var(--ast-global-color-4);
}
.wp-block-spectra-button.wp-block-spectra-button.ev-go-btn-dark:hover,
.wp-block-spectra-button.wp-block-spectra-button.ev-go-btn-dark:focus-visible {
	background-color: color-mix(in srgb, var(--ast-global-color-4) 16%, transparent);
	border-color: var(--ast-global-color-4);
	color: var(--ast-global-color-4);
}

/* Who we work with: CTA sits on the card floor so every card lines up,
   and underlines on hover. */
#who-we-work-with .ev-card > .wp-block-spectra-content:last-child {
	margin-top: auto;
	padding-top: 12px;
}
#who-we-work-with .ev-card:hover > .wp-block-spectra-content:last-child {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Footer text links underline on hover (buttons and menus excluded). */
.site-footer a:not(.wp-block-button__link):not(.ast-button):not(.menu-link):hover,
.site-footer a:not(.wp-block-button__link):not(.ast-button):not(.menu-link):focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* WPForms prints its no-JS sentence as a bare text node inside <form> — not
   wrapped in <noscript> — so it shows even with JS on. Zeroing the form's own
   font-size hides the stray node; real children restore their size. */
.ev-form.wpforms-container-full .wpforms-form { font-size: 0; }
.ev-form.wpforms-container-full .wpforms-form > * { font-size: 17px; }

/* Field labels: visible but small, in the panel's muted white. */
/* Inputs use placeholders (as the mockup does); their labels stay in the DOM
   for screen readers but are visually hidden by WPForms' own label_hide. */
.ev-form.wpforms-container-full .wpforms-field-label {
	display: block;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	color: color-mix(in srgb, var(--ast-global-color-4) 62%, transparent);
	margin: 0 0 20px;
}
.ev-form.wpforms-container-full .wpforms-required-label {
	display: inline;
	color: color-mix(in srgb, var(--ast-global-color-4) 55%, transparent);
	border: 0;
}

/* 30px between the form title and the form. */
.ev-cta .ev-form.wpforms-container-full { margin-top: 10px; }

/* Autofilled / typed values stay white — Chrome's autofill forces black text
   on a light inset, which is unreadable on the brand panel. */
.ev-form.wpforms-container-full .wpforms-form input:-webkit-autofill,
.ev-form.wpforms-container-full .wpforms-form input:-webkit-autofill:hover,
.ev-form.wpforms-container-full .wpforms-form input:-webkit-autofill:focus,
.ev-form.wpforms-container-full .wpforms-form textarea:-webkit-autofill {
	-webkit-text-fill-color: var(--ast-global-color-4);
	caret-color: var(--ast-global-color-4);
	-webkit-box-shadow: 0 0 0 1000px color-mix(in srgb, var(--ast-global-color-4) 8%, transparent) inset;
	transition: background-color 5000s ease-in-out 0s;
}
.ev-form.wpforms-container-full .wpforms-form input,
.ev-form.wpforms-container-full .wpforms-form textarea {
	-webkit-text-fill-color: var(--ast-global-color-4);
	caret-color: var(--ast-global-color-4);
}

/* --- Round 3 -------------------------------------------------------------- */

/* WPForms' wrapper is a flex child of the CTA column; with the form's
   font-size zeroed (the no-JS text-node fix) its intrinsic width collapsed,
   so it is pinned to the column instead. */
.ev-cta .ev-form.wpforms-container-full,
.ev-cta .ev-form.wpforms-container-full .wpforms-form {
	width: 100%;
	max-width: 100%;
}

/* Footer gutters. The rows had no horizontal padding, so on anything narrower
   than the 1240 grid the content ran to the viewport edge. These match the
   section gutters (40 / 24) and keep the same 1240 content column. */
.site-primary-footer-wrap.site-primary-footer-wrap { padding: 0 40px 20px; }
.site-below-footer-wrap.site-below-footer-wrap { padding: 0 40px 56px; }
.site-footer .ast-builder-grid-row {
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 1023.98px) {
	.site-primary-footer-wrap.site-primary-footer-wrap { padding: 0 24px 18px; }
	.site-below-footer-wrap.site-below-footer-wrap { padding: 0 24px 48px; }
}
@media (max-width: 767.98px) {
	.site-primary-footer-wrap.site-primary-footer-wrap { padding: 0 24px 16px; }
	.site-below-footer-wrap.site-below-footer-wrap { padding: 0 24px 40px; }
}

/* --- CTA form: mockup choice pills --------------------------------------- */

/* The checkbox field renders as pills. The native input is hidden but still
   focusable-by-proxy: the label is the control, and :has() reflects the
   checked state so no JS is needed. */
.ev-form.wpforms-container-full .wpforms-field.wpforms-field-checkbox ul {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
}
.ev-form.wpforms-container-full .wpforms-field.wpforms-field-checkbox li {
	margin: 0;
	padding: 0;
}

.ev-form.wpforms-container-full .wpforms-field.wpforms-field-checkbox input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

.ev-form.wpforms-container-full .wpforms-field.wpforms-field-checkbox label {
	display: inline-block;
	margin: 0;
	padding: 13px 22px;
	padding-left: 22px;
	border: 1.5px solid color-mix(in srgb, var(--ast-global-color-4) 30%, transparent);
	border-radius: 999px;
	background: transparent;
	color: var(--ast-global-color-4);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	user-select: none;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.ev-form.wpforms-container-full .wpforms-field.wpforms-field-checkbox label:hover {
	border-color: color-mix(in srgb, var(--ast-global-color-4) 60%, transparent);
}

/* Selected: lighter border and text. The class is set by assets/js/cta-form.js
   — `li:has(input:checked)` parses and matches here but does not trigger a
   restyle on toggle, and WPForms' own `wpforms-selected` sits on every item. */
.ev-form.wpforms-container-full .wpforms-field.wpforms-field-checkbox li.ev-choice-selected label {
	border-color: var(--ast-global-color-4);
	background: color-mix(in srgb, var(--ast-global-color-4) 16%, transparent);
	color: var(--ast-global-color-4);
}
.ev-form.wpforms-container-full .wpforms-field.wpforms-field-checkbox li:focus-within label {
	outline: 2px solid var(--ast-global-color-5);
	outline-offset: 2px;
}

/* Mockup rhythm: 14px between fields, 28px before the submit. */
.ev-form.wpforms-container-full .wpforms-field-container { gap: 14px; }
.ev-form.wpforms-container-full .wpforms-field.wpforms-field-checkbox { margin-bottom: 0; }
/* 28px above the submit, as the mockup has. WPForms wins with
   `div.wpforms-container-full .wpforms-submit-container`, so match its shape. */
.ev-form.wpforms-container-full .wpforms-form .wpforms-submit-container {
	margin-top: 28px;
	padding: 0;
}

/* ==========================================================================
   Type scale — the sizes Astra's Customizer cannot express.

   Astra gives ONE body size (17px) and stepped headings (h2 54/38/34). The
   design needs intermediate body sizes and two off-scale h2s. Setting these
   here means one place to change them, instead of one copy per block.

   Selectors repeat `.wp-block-spectra-content` so they out-rank Astra's
   element rules. They sit BELOW Spectra's own per-block CSS (0,3,0), so a
   size set on an individual block in the editor still wins - which is what
   you want for a one-off.
   ========================================================================== */

.wp-block-spectra-content.ev-lead    { font-size: 21px; }
.wp-block-spectra-content.ev-body-lg { font-size: 19px; }
.wp-block-spectra-content.ev-body    { font-size: 18px; }
.wp-block-spectra-content.ev-body-sm { font-size: 16px; }
.wp-block-spectra-content.ev-strong  { font-weight: 600; }

/* Two h2 sizes deliberately off the Customizer scale. Standardised here so
   future pages reuse the same values rather than inventing new ones:
     .ev-h2-lead     section-opening h2, fluid   (intro)
     .ev-h2-compact  small in-body h2, stepped   (positioning)
   Everything else uses the Customizer h2 or its own fluid clamp. */
.wp-block-spectra-content.ev-h2-lead    { font-size: clamp(32px, 3.3vw, 46px); }
.wp-block-spectra-content.ev-h2-compact { font-size: 26px; }

@media (max-width: 767.98px) {
	.wp-block-spectra-content.ev-h2-compact { font-size: 23px; }
}

/* ==========================================================================
   Off-palette design colour.

   #A4A9B6 is the one colour in the design with no palette slot. The nearest
   is slot 1 (#7ba7bc), a visibly different hue, so it cannot become a slug
   without changing the front end - and the palette is full at 9 slots.

   Held as a named token so it is still defined in exactly one place, the
   same as a palette colour. If a slot ever frees up, this is the first
   candidate to move into it.
   ========================================================================== */

:root {
	--ev-muted-light: #A4A9B6;
}

.wp-block-spectra-content.ev-muted-light { color: var(--ev-muted-light); }

/* ==========================================================================
   Shell values that were repeated on every block carrying the class.

   Each was byte-identical across all blocks with that class, so it lives here
   now: change it once instead of opening eight blocks. Verified before moving
   - all 8 .ev-card carry radius 28px and all 8 .ev-badge carry 999px.

   min-height is scoped to #how-we-help because ONLY that row of cards had it;
   the who-we-work-with cards size to their own content and must keep doing so.
   ========================================================================== */

.wp-block-spectra-container.wp-block-spectra-container.ev-card  { border-radius: 28px; }
.wp-block-spectra-container.wp-block-spectra-container.ev-badge { border-radius: 999px; }

#how-we-help .ev-card { min-height: 380px; }

/* ==========================================================================
   Fluid heading scale - one curve per heading level.

   Goal: at any given viewport every h1/h2/h3 is the SAME size, and headings
   scale down through the desktop range instead of holding the desktop size
   flat until Astra's 921px step.

   Ceiling  = the Customizer DESKTOP size (h1 72 / h2 54 / h3 30), reached at
              1459px and above.
   Floor    = the Customizer TABLET size (47 / 38 / 28), so the handover to
              Astra at 921/922px is seamless - both sides render the same.
   Below 922px Astra's own tablet and mobile rules govern, untouched.

   e.g. a 1280px window renders h1 63 / h2 47 / h3 28.

   Selectors pair the bare tag with the Spectra variant so they out-rank
   Astra's element rule. They are (0,1,1), so the deliberate off-scale
   classes .ev-h2-lead / .ev-h2-compact (0,2,0) still win, as does any size
   set on an individual block by Spectra (0,3,0).
   ========================================================================== */

@media (min-width: 922px) {
	h1, h1.wp-block-spectra-content { font-size: clamp(47px, 4.93vw, 72px); }
	h2, h2.wp-block-spectra-content { font-size: clamp(38px, 3.70vw, 54px); }
	h3, h3.wp-block-spectra-content { font-size: clamp(28px, 2.06vw, 30px); }
}

/* ==========================================================================
   Solutions page components.

   .ev-card-outline  card border tracking the SAME palette slot as the outline
                     buttons, so borders and buttons cannot drift apart.
   .ev-insight-*     the Insights list. Per the mockup these are NOT filled
                     cards: transparent rows separated by a hairline, with a
                     44px outlined circle that fills on hover - the same
                     fill-on-hover the card CTAs use on Home.
   ========================================================================== */

.wp-block-spectra-container.wp-block-spectra-container.ev-card-outline {
	border: 1.5px solid color-mix(in srgb, var(--ast-global-color-0) 30%, transparent);
}

/* The card on the deep-blue background takes that same palette slot for its
   border, so the outline reads as part of the panel rather than a light rule. */
.wp-block-spectra-container.wp-block-spectra-container.ev-card-outline-dark {
	border-color: var(--ast-global-color-6);
}

.wp-block-spectra-container.wp-block-spectra-container.ev-insight-list {
	gap: 0;
}

/* Rows come from [esg_insights] as plain <a> elements, so the layout Spectra
   used to supply on the static containers is declared here instead. */
.ev-insight-row,
.wp-block-spectra-container.wp-block-spectra-container.ev-insight-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	padding: 24px 0;
	border-radius: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--ast-global-color-2) 14%, transparent);
	text-decoration: none;
	transition: border-color 200ms ease;
}

/* Must repeat the doubled container class: the rows carry it, so the base rule
   above also matches at (0,3,0) and would otherwise outrank a bare :last-of-type. */
.ev-insight-row:last-of-type,
.wp-block-spectra-container.wp-block-spectra-container.ev-insight-row:last-of-type {
	border-bottom: 0;
}

/* Title left, arrow right - regardless of source order in the markup. */
.ev-insight-title { order: 1; }
.ev-arrow-badge { order: 2; }

.ev-insight-title,
.wp-block-spectra-content.ev-insight-title {
	margin: 0;
	font-size: 22px;
	line-height: 1.3;
	letter-spacing: -0.02em;
	max-width: 34ch;
	transition: color 200ms ease;
}

.ev-arrow-badge,
.wp-block-spectra-container.wp-block-spectra-container.ev-arrow-badge {
	display: grid;
	place-items: center;
	border-radius: 999px;
	border: 1.5px solid color-mix(in srgb, var(--ast-global-color-2) 16%, transparent);
	background: transparent;
	flex: 0 0 44px;
	width: 44px;
	min-width: 44px;
	height: 44px;
	transition: background-color 200ms ease, border-color 200ms ease;
}

.ev-insight-row:hover .wp-block-spectra-container.ev-arrow-badge {
	background: var(--ast-global-color-0);
	border-color: var(--ast-global-color-0);
}

.ev-insight-row:hover .ev-arrow-badge .spectra-icon {
	color: var(--ast-global-color-4);
}

.ev-insight-row:hover .ev-insight-title {
	color: var(--ast-global-color-0);
}

.wp-block-spectra-container.wp-block-spectra-container.ev-insight-row-last {
	border-bottom: 0;
}

/* Breathing room between the last row and the Explore button, per the mockup. */
.ev-insight-list .wp-block-spectra-buttons {
	margin-top: 36px;
}

.wp-block-spectra-container.wp-block-spectra-container.ev-slot-insights {
	min-height: 320px;
	width: 100%;
}

/* ==========================================================================
   Footer — Astra footer builder, four widget columns.

   Rebuilt 2026-09-02 from a single Custom HTML widget into real widgets:
     col 1  Image (logo) + Text (address) + Nav Menu (social)
     col 2  Nav Menu "Solutions"   col 3  Nav Menu "Services"
     col 4  Nav Menu "Company"

   Astra's own row gives four equal columns; the 1.6fr first column is the only
   thing it cannot express, so it is set here. Selectors use Astra's widget
   markup and the menus' own container classes - no widget ids, which change.
   ========================================================================== */

.site-primary-footer-wrap .ast-builder-grid-row {
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 56px;
}

.site-footer .widget-title {
	font-size: 17px;
	font-weight: 600;
	margin: 0 0 14px;
	color: var(--ast-global-color-2);
}

.site-footer .widget_nav_menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer .widget_nav_menu li {
	margin: 0 0 10px;
}

.site-footer .widget_nav_menu a {
	color: var(--ast-global-color-3);
	font-size: 17px;
}

.site-footer .widget_nav_menu a:hover,
.site-footer .widget_nav_menu a:focus-visible {
	color: var(--ast-global-color-0);
}

/* Brand column: logo, address, social row */
.site-footer .widget_media_image img {
	max-width: 200px;
	height: auto;
}

.site-footer .widget_media_image {
	margin-bottom: 28px;
}

.site-footer .site-footer-section-1 .widget_text {
	color: var(--ast-global-color-3);
	font-size: 17px;
	line-height: 1.7;
	max-width: 34ch;
	margin-bottom: 22px;
}

.site-footer .site-footer-section-1 .widget_text a {
	color: var(--ast-global-color-3);
}

.site-footer .site-footer-section-1 .widget_text a:hover {
	color: var(--ast-global-color-0);
}

.site-footer .menu-footer-social-container ul {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
}

.site-footer .menu-footer-social-container li {
	margin: 0;
}

@media (max-width: 1023.98px) {
	.site-primary-footer-wrap .ast-builder-grid-row {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
	}
}

@media (max-width: 767.98px) {
	.site-primary-footer-wrap .ast-builder-grid-row {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.site-footer .site-footer-section-1 .widget_text { max-width: 100%; }
}

/* ==========================================================================
   Footer brand column rhythm + social icons.

   30px between address, phones and the social row. The address is a Google
   Maps link; every link in this column inherits the body-muted colour so it
   reads as text, not as a link, per the design.

   Social icons are CSS masks over the menu items, so the icon takes
   currentColor and the list stays editable in Appearance > Menus - add a link,
   give it an ev-soc-* class, done.
   ========================================================================== */

.site-footer .site-footer-section-1 .widget_text p { margin: 0; }
.site-footer .site-footer-section-1 .widget_text p + p { margin-top: 10px; }
.site-footer .site-footer-section-1 .widget_text { margin-bottom: 30px; }
.site-footer .site-footer-section-1 .widget_nav_menu { margin-top: 0; }

.site-footer .menu-footer-social-container ul { gap: 14px; }

/* The link text is a real child node, so grid/flex centring would treat it as a
   second item and push the glyph off-centre. The mask is absolutely centred
   instead, and the text stays in the DOM for screen readers. */
.site-footer .menu-footer-social-container a {
	position: relative;
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	border: 1.5px solid var(--ast-global-color-0);
	color: var(--ast-global-color-0);
	font-size: 0;
	line-height: 0;
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.site-footer .menu-footer-social-container a::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 17px;
	height: 17px;
	background-color: currentColor;
	-webkit-mask: var(--ev-soc) center / contain no-repeat;
	mask: var(--ev-soc) center / contain no-repeat;
}

.site-footer .ev-soc-linkedin a { --ev-soc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z'/%3E%3C/svg%3E"); }
.site-footer .ev-soc-facebook a { --ev-soc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z'/%3E%3C/svg%3E"); }

.site-footer .menu-footer-social-container a:hover,
.site-footer .menu-footer-social-container a:focus-visible {
	background: var(--ast-global-color-0);
	border-color: var(--ast-global-color-0);
	color: var(--ast-global-color-4);
}

/* The credit reads as text, not as a link. */
.site-footer .ast-footer-copyright a { color: inherit; }
.site-footer .ast-footer-copyright a:hover,
.site-footer .ast-footer-copyright a:focus-visible { color: var(--ast-global-color-0); }

/* ==========================================================================
   About / Careers / Contact.

   Only the idioms Home and Solutions do not already have. Everything else
   (cards, badges, buttons, grids, panels, the type scale) is reused.
   ========================================================================== */

/* -- Divider rows: numeral | headline | prose, separated by a hairline.
      About "Five habits", Careers "A few things we value". ---------------- */
.wp-block-spectra-container.wp-block-spectra-container.ev-divrow {
	border-top: 1px solid color-mix(in srgb, var(--ast-global-color-2) 12%, transparent);
}

.wp-block-spectra-container.wp-block-spectra-container.ev-divrow > :first-child {
	flex: 0 0 110px;
}

/* Reproduce the mockup's `110px 0.85fr 1.15fr` — the two text columns share
   the remainder in that ratio rather than one of them taking all the slack. */
.wp-block-spectra-container.wp-block-spectra-container.ev-divrow > :nth-child(2) {
	flex: 0.85 1 0;
	width: auto;
}

.wp-block-spectra-container.wp-block-spectra-container.ev-divrow > :nth-child(3) {
	flex: 1.15 1 0;
	width: auto;
}

.wp-block-spectra-content.ev-divrow-num {
	/* The full-width tables use a 46px display number, which reads correctly with
	   its glyphs top-aligned to the row. */
	line-height: 1;
}

/* The half-width tables set the number at body size, where line-height: 1 left
   it riding ~4px above the first line of the text beside it. Inheriting the
   surrounding line-height puts the two first lines on the same optical line. */
.ev-divrow-tight .wp-block-spectra-content.ev-divrow-num {
	line-height: inherit;
}

@media (max-width: 767.98px) {
	.wp-block-spectra-container.wp-block-spectra-container.ev-divrow {
		flex-direction: column;
		gap: 16px;
	}
	.wp-block-spectra-container.wp-block-spectra-container.ev-divrow > * {
		width: 100% !important;
		flex: 0 0 auto;
	}
}

/* -- Centred icon tile (Careers benefits) ------------------------------- */
/* Benefit tiles: outlined, lift on hover. Matches the mockup's
   1px rgba(51,78,172,.18) border, expressed off the palette. */
.wp-block-spectra-container.wp-block-spectra-container.ev-tile-center {
	align-items: center;
	text-align: center;
	border: 1px solid color-mix(in srgb, var(--ast-global-color-0) 18%, transparent);
	transition: transform 200ms ease, box-shadow 200ms ease;
}

.ev-tile-center:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 40px color-mix(in srgb, var(--ast-global-color-6) 12%, transparent);
}

.wp-block-spectra-container.wp-block-spectra-container.ev-tile-dark {
	border-color: transparent;
}

/* Uppercase eyebrow (Contact detail groups, dark bands) */
.wp-block-spectra-content.ev-eyebrow,
.wp-block-spectra-content.ev-eyebrow-light {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Hairline inside a dark band (Careers "Why the work matters") */
.wp-block-spectra-container.wp-block-spectra-container.ev-rule-light {
	height: 1px;
	min-height: 1px;
	background: color-mix(in srgb, var(--ast-global-color-4) 22%, transparent);
	margin-bottom: 48px;
}

.wp-block-spectra-content.ev-measure { max-width: 68ch; }

/* Larger pill, matching the mockup's 16/32 CTA */
.wp-block-spectra-button.wp-block-spectra-button.ev-btn-lg {
	padding: 16px 32px;
}

/* Rule under the "Interested in joining us?" row */
.wp-block-spectra-container.wp-block-spectra-container.ev-joinus > :last-child {
	align-self: center;
	align-items: flex-end;
}

.wp-block-spectra-container.wp-block-spectra-container.ev-joinus {
	border-bottom: 1px solid color-mix(in srgb, var(--ast-global-color-2) 12%, transparent);
	padding-bottom: 96px !important;
}

/* The space below the rule is the next section's top padding (96/72/56), so the
   space above it has to step down on the same breakpoints. */
@media (max-width: 1023.98px) {
	.wp-block-spectra-container.wp-block-spectra-container.ev-joinus {
		padding-bottom: 72px !important;
	}
}

@media (max-width: 767.98px) {
	.wp-block-spectra-container.wp-block-spectra-container.ev-joinus {
		padding-bottom: 56px !important;
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
	}

	/* Both columns fill the container: the copy carries a 58% width from the
	   block, which stacked just made a narrow ragged column. The button
	   column's own contents stay left-aligned inside it.

	   Spectra prints a child's width as
	   `.wp-block-spectra-container ×3 [data-spectra-id]` — (0,4,0), and it
	   repeats the same declaration inside its own breakpoints, so the width
	   is flagged rather than out-weighted. */
	.wp-block-spectra-container.wp-block-spectra-container.ev-joinus > * {
		width: 100% !important;
	}

	.wp-block-spectra-container.wp-block-spectra-container.ev-joinus > :last-child {
		align-self: stretch;
		align-items: flex-start;
	}

	/* The column shrink-wraps to the button, and the button was wrapping its
	   own label onto two lines inside it. */
	.wp-block-spectra-container.ev-joinus .wp-block-spectra-button {
		white-space: nowrap;
	}
}

/* Contact details: small grey label, large dark value, links undecorated */
.wp-block-spectra-content.ev-detail-label { font-size: 15px; }

.wp-block-spectra-content.ev-detail-value {
	font-size: 19px;
	font-weight: 600;
}

/* The office address is one map link across two lines; give it the body
   line-height so the lines sit like the mockup rather than tight. */
.wp-block-spectra-content.ev-detail-address,
.wp-block-spectra-content.ev-detail-address a {
	line-height: 1.6;
	display: inline-block;
}

.ev-detail-value a { color: var(--ast-global-color-2); }
.ev-detail-value a:hover { color: var(--ast-global-color-0); }

/* -- Outlined panel (Careers "Open roles") ------------------------------ */
.wp-block-spectra-container.wp-block-spectra-container.ev-panel-outline {
	border: 1.5px solid color-mix(in srgb, var(--ast-global-color-2) 14%, transparent);
	border-radius: 28px;
}

/* -- Solid brand button (LinkedIn CTA). The palette slug also adds
      Gutenberg's .has-…-background-color, which ships !important, so the
      hover has to match it. -------------------------------------------- */
.wp-block-spectra-button.wp-block-spectra-button.ev-btn-solid:hover,
.wp-block-spectra-button.wp-block-spectra-button.ev-btn-solid:focus-visible {
	background-color: var(--ast-global-color-1) !important;
	border-color: var(--ast-global-color-1);
	color: var(--ast-global-color-4) !important;
}

.wp-block-spectra-container.wp-block-spectra-container.ev-open-roles-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
}

.ev-open-roles-icon .spectra-icon {
	max-width: 100px;
	max-height: 100px;
}

/* -- Leadership cards. .ev-bio-body carries the bio copy for a future
      lightbox; .ev-bio-trigger is the hook it will bind to. ------------- */
.wp-block-spectra-container.wp-block-spectra-container.ev-bio-photo {
	aspect-ratio: 1 / 1;
	height: auto;
}

.ev-bio-trigger { cursor: pointer; }

.wp-block-spectra-container.wp-block-spectra-container.ev-bio-body { display: none; }

.wp-block-spectra-container.wp-block-spectra-container.ev-bio-card {
	transition: transform 220ms ease, box-shadow 220ms ease;
}

.ev-bio-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 24px 64px color-mix(in srgb, var(--ast-global-color-6) 14%, transparent);
}

/* Bios run to different lengths, so the "Read bio" pill has to be pushed to the
   card floor. Spectra zeroes child margins at (0,3,0), hence the doubled class
   and the !important. */
.wp-block-spectra-container.wp-block-spectra-container.ev-bio-card > :last-child {
	margin-top: auto !important;
}

/* -- Contact: details column, hairline between groups ------------------- */
/* Spectra writes the block's own 0px padding at (0,3,0), so the divider gap
   has to match that weight. */
.wp-block-spectra-container.wp-block-spectra-container.ev-detail-group + .wp-block-spectra-container.ev-detail-group {
	border-top: 1px solid color-mix(in srgb, var(--ast-global-color-2) 12%, transparent);
	padding-top: 32px !important;
}

/* -- Contact: the form sits on a LIGHT panel here, not the dark one Home
      uses, so the .ev-form colours are re-pointed. --------------------- */
.ev-form-light.wpforms-container-full .wpforms-form input[type="text"],
.ev-form-light.wpforms-container-full .wpforms-form input[type="email"],
.ev-form-light.wpforms-container-full .wpforms-form input[type="tel"],
.ev-form-light.wpforms-container-full .wpforms-form select,
.ev-form-light.wpforms-container-full .wpforms-form textarea {
	background: var(--ast-global-color-4);
	border-color: color-mix(in srgb, var(--ast-global-color-2) 16%, transparent);
	color: var(--ast-global-color-2);
}

.ev-form-light.wpforms-container-full .wpforms-form input::placeholder,
.ev-form-light.wpforms-container-full .wpforms-form textarea::placeholder {
	color: var(--ast-global-color-3);
}

.ev-form-light.wpforms-container-full .wpforms-field-label {
	color: var(--ast-global-color-2);
}

.ev-form-light.wpforms-container-full .wpforms-field.wpforms-field-checkbox label {
	background: var(--ast-global-color-4);
	color: var(--ast-global-color-2);
	border-color: color-mix(in srgb, var(--ast-global-color-2) 16%, transparent);
}

.ev-form-light.wpforms-container-full .wpforms-field.wpforms-field-checkbox li.ev-choice-selected label {
	background: var(--ast-global-color-0);
	border-color: var(--ast-global-color-0);
	color: var(--ast-global-color-4);
}

.ev-form-light.wpforms-container-full .wpforms-form button[type="submit"],
.ev-form-light.wpforms-container-full .wpforms-form button[type="submit"]:not(:hover):not(:active) {
	background: var(--ast-global-color-0);
	color: var(--ast-global-color-4);
}

.wp-block-spectra-container.wp-block-spectra-container.ev-contact-form {
	border-radius: 28px;
}

/* ==========================================================================
   Contact 2.0 confirmation. WPForms swaps the form for this in place, so it
   sits inside the same light panel. Palette only; the tick is drawn, not an
   image.
   ========================================================================== */

.ev-form.wpforms-container-full .ev-confirm { display: block; padding: 8px 0; }

/* WPForms ships `div.wpforms-container-full *` (0,2,1) which zeroes
   background, radius and height on every descendant, so these selectors have
   to sit above it. */
.ev-form.wpforms-container-full .ev-confirm .ev-confirm-mark {
	display: block;
	width: 48px;
	height: 48px;
	margin-bottom: 24px;
	border-radius: 999px;
	background: var(--ast-global-color-0);
	position: relative;
}

.ev-form.wpforms-container-full .ev-confirm .ev-confirm-mark::after {
	content: "";
	position: absolute;
	left: 18px;
	top: 13px;
	width: 11px;
	height: 19px;
	border: solid var(--ast-global-color-4);
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}

/* The base form sits on the navy CTA panel and `.ev-form-light` is the light
   card on Contact, so the confirmation follows the same convention: light
   copy here, dark copy in the -light block below.

   Every selector carries .wpforms-container-full as well: WPForms ships
   `div.wpforms-container-full *` at (0,2,1), which sets a colour on every
   descendant, and a two-class selector loses to it. */
.ev-form.wpforms-container-full .ev-confirm .ev-confirm-title {
	margin: 0 0 16px;
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--ast-global-color-4);
}

.ev-form.wpforms-container-full .ev-confirm .ev-confirm-body {
	margin: 0;
	font-size: 19px;
	line-height: 1.7;
	color: color-mix(in srgb, var(--ast-global-color-4) 80%, transparent);
	max-width: 52ch;
}

/* The two contact blocks under the acknowledgement: side by side while there
   is room, stacked when there is not. */
.ev-form.wpforms-container-full .ev-confirm-contacts {
	display: flex;
	flex-wrap: wrap;
	gap: 32px 64px;
	margin-top: 32px;
}

.ev-form.wpforms-container-full .ev-confirm-block {
	flex: 1 1 260px;
	min-width: 0;
}

.ev-form.wpforms-container-full .ev-confirm-label {
	margin: 0 0 8px;
	font-size: 19px;
	font-weight: 600;
	color: var(--ast-global-color-4);
}

.ev-form.wpforms-container-full .ev-confirm-note {
	margin: 0 0 8px;
	font-size: 17px;
	line-height: 1.6;
	color: color-mix(in srgb, var(--ast-global-color-4) 75%, transparent);
}

.ev-form.wpforms-container-full .ev-confirm-line {
	margin: 0 0 4px;
	font-size: 17px;
	line-height: 1.6;
}

.ev-form.wpforms-container-full .ev-confirm-line a {
	color: var(--ast-global-color-5);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ev-form.wpforms-container-full .ev-confirm-line a:hover,
.ev-form.wpforms-container-full .ev-confirm-line a:focus-visible {
	color: var(--ast-global-color-4);
}

/* -- the same message on the light Contact card -------------------------- */

.ev-form-light.wpforms-container-full .ev-confirm .ev-confirm-title,
.ev-form-light.wpforms-container-full .ev-confirm-label {
	color: var(--ast-global-color-2);
}

.ev-form-light.wpforms-container-full .ev-confirm .ev-confirm-body,
.ev-form-light.wpforms-container-full .ev-confirm-note {
	color: var(--ast-global-color-3);
}

.ev-form-light.wpforms-container-full .ev-confirm-line a {
	color: var(--ast-global-color-0);
}

.ev-form-light.wpforms-container-full .ev-confirm-line a:hover,
.ev-form-light.wpforms-container-full .ev-confirm-line a:focus-visible {
	color: var(--ast-global-color-6);
}

/* On navy the brand-blue disc disappears; it inverts to a white disc with a
   navy tick. */
.ev-form.wpforms-container-full:not(.ev-form-light) .ev-confirm .ev-confirm-mark {
	background: var(--ast-global-color-4);
}

.ev-form.wpforms-container-full:not(.ev-form-light) .ev-confirm .ev-confirm-mark::after {
	border-color: var(--ast-global-color-6);
}

.ev-form .wpforms-confirmation-container-full,
.ev-form div.wpforms-confirmation-container-full {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
}

/* ==========================================================================
   Contact 2.0 form corrections (ev-form-light two-up layout etc.)

   Scoped to .ev-form-light so the Home CTA form is untouched.
   ========================================================================== */

/* Paired fields sit side by side, as the mockup shows. WPForms 2.x emits the
   .wpforms-one-half classes but no longer floats them. */
@media (min-width: 768px) {
	/* WPForms 2.x makes this a flex COLUMN, so wrapping never applied. Switch
	   it to a wrapping row and keep the vertical rhythm as the row gap. */
	.ev-form-light.wpforms-container-full .wpforms-field-container {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
		column-gap: 24px;
		row-gap: 14px;
	}
	.ev-form-light.wpforms-container-full .wpforms-field-container > .wpforms-field { width: 100%; }
	.ev-form-light.wpforms-container-full .wpforms-field-container > .wpforms-one-half {
		width: calc(50% - 16px);
		flex: 0 0 calc(50% - 16px);
	}
}

/* Label rhythm */
.ev-form-light.wpforms-container-full .wpforms-form .wpforms-field-label {
	margin-bottom: 10px;
}

/* Blink paints glyphs from -webkit-text-fill-color, which the dark-panel rules
   set to white; `color` alone is ignored, so typed text was invisible. */
.ev-form-light.wpforms-container-full .wpforms-form input,
.ev-form-light.wpforms-container-full .wpforms-form textarea,
.ev-form-light.wpforms-container-full .wpforms-form select {
	-webkit-text-fill-color: var(--ast-global-color-2);
	color: var(--ast-global-color-2);
	caret-color: var(--ast-global-color-2);
}

/* The Home rules also paint the autofill caret white; on the light panel the
   cursor has to be dark or it reads as "not blinking". */
.ev-form-light.wpforms-container-full .wpforms-form input:-webkit-autofill,
.ev-form-light.wpforms-container-full .wpforms-form input:-webkit-autofill:hover,
.ev-form-light.wpforms-container-full .wpforms-form input:-webkit-autofill:focus,
.ev-form-light.wpforms-container-full .wpforms-form textarea:-webkit-autofill {
	-webkit-text-fill-color: var(--ast-global-color-2);
	caret-color: var(--ast-global-color-2);
	-webkit-box-shadow: 0 0 0 1000px var(--ast-global-color-4) inset;
}

.ev-form-light.wpforms-container-full .wpforms-form input::placeholder,
.ev-form-light.wpforms-container-full .wpforms-form textarea::placeholder {
	-webkit-text-fill-color: var(--ast-global-color-3);
}

/* Focus: keep the field white, ring it in brand blue. */
.ev-form-light.wpforms-container-full .wpforms-form input:focus,
.ev-form-light.wpforms-container-full .wpforms-form textarea:focus,
.ev-form-light.wpforms-container-full .wpforms-form select:focus {
	background: var(--ast-global-color-4);
	border-color: var(--ast-global-color-0);
	outline: 2px solid color-mix(in srgb, var(--ast-global-color-0) 35%, transparent) !important;
	outline-offset: 1px;
}

.ev-form-light.wpforms-container-full .wpforms-form textarea,
.ev-form-light.wpforms-container-full .wpforms-form textarea.wpforms-field-large {
	height: 149px;
	min-height: 149px;
}

/* ==========================================================================
   IT Operate (page 5886).

   Four components this page introduces. Everything else — cards, badges,
   divrows, the CTA panel, the type classes — is reused from Home / Solutions /
   About / Careers exactly as it stands.

     .ev-hero-rule    hairline under the h1, above the lead + CTA row
     .ev-statement    the pull-quote between two heavy rules (Intro)
     .ev-divgrid      two-column grid of numbered rows (Where it strains)
     .ev-ruled-row    a paragraph separated by a hairline (Operating model)
     .ev-model-*      image column that matches the height of the text column

   Hairlines use the same recipe as .ev-divrow / .ev-joinus so this page's
   rules cannot drift away from About and Careers.
   ========================================================================== */

.wp-block-spectra-container.wp-block-spectra-container.ev-hero-rule,
.wp-block-spectra-container.wp-block-spectra-container.ev-ruled-row {
	border-top: 1px solid color-mix(in srgb, var(--ast-global-color-2) 12%, transparent);
}

/* The mockup opens the statement and the operating-model column on a heavier
   rule than the separators inside them. */
.wp-block-spectra-container.wp-block-spectra-container.ev-statement {
	border-top: 2px solid var(--ast-global-color-0);
	border-bottom: 2px solid var(--ast-global-color-0);
}

.wp-block-spectra-container.wp-block-spectra-container.ev-model-notes > .ev-ruled-row:first-child {
	border-top: 2px solid var(--ast-global-color-2);
}

/* -- Where it strains: two columns of numbered rows --------------------- */
/* The grid carries the top rule so it spans both columns; each row carries its
   own bottom rule, so a short final column ends cleanly. */
.wp-block-spectra-container.wp-block-spectra-container.ev-divgrid {
	border-top: 1px solid color-mix(in srgb, var(--ast-global-color-2) 12%, transparent);
	row-gap: 0;
}

.wp-block-spectra-container.wp-block-spectra-container.ev-divgrid > .ev-divrow {
	border-top: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--ast-global-color-2) 12%, transparent);
}

/* These rows are half-width, so the number sits next to the text rather than in
   the 110px gutter .ev-divrow uses at full width. */
.wp-block-spectra-container.wp-block-spectra-container.ev-divrow-tight > :first-child {
	flex: 0 0 auto;
	width: auto;
}

@media (max-width: 767.98px) {
	.wp-block-spectra-container.wp-block-spectra-container.ev-divrow-tight {
		flex-direction: row;
		gap: 16px;
	}
	.wp-block-spectra-container.wp-block-spectra-container.ev-divrow-tight > :first-child {
		width: auto !important;
	}
	.wp-block-spectra-container.wp-block-spectra-container.ev-divrow-tight > :last-child {
		width: auto !important;
		flex: 1 1 auto;
	}
}

/* ==========================================================================
   Solutions sub-pages, shared components (IT Security, Elevate Intelligence).

     .ev-sticky-row / .ev-sticky-media   image column that holds while the notes
                                         beside it scroll — desktop only
     .ev-media-img                       a real <img> at the mockup's ratio,
                                         used where a background image would
                                         crop instead of scale
     .ev-split-media                     image half of a two-column split row
   ========================================================================== */

/* Sticky needs a start-aligned row: a stretched flex child is already as tall
   as the row, so it can never travel. */
.wp-block-spectra-container.wp-block-spectra-container.ev-sticky-row {
	align-items: flex-start;
}

@media (min-width: 1024px) {
	.wp-block-spectra-container.wp-block-spectra-container.ev-sticky-media {
		position: sticky;
		/* clears the sticky site header */
		top: 120px;
		align-self: flex-start;
	}
}

/* Core image inside a Spectra container: Spectra zeroes child margins, so the
   figure only needs its box sizing declared. */
.wp-block-image.ev-media-img {
	margin: 0;
	width: 100%;
}

.wp-block-image.ev-media-img img {
	display: block;
	width: 100%;
	height: auto;
}

/* Numbered list beside the sticky image (Elevate Intelligence). The column
   carries the opening rule; each row carries its own closing hairline. */
.wp-block-spectra-container.wp-block-spectra-container.ev-divgrid-single {
	border-top: 2px solid var(--ast-global-color-2);
}

.wp-block-spectra-container.wp-block-spectra-container.ev-divgrid-single > .ev-divrow {
	border-top: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--ast-global-color-2) 12%, transparent);
}


/* ==========================================================================
   Services pages (main + sub-pages).

     .ev-checkrow      check icon + line of text, in a hairline grid
     .ev-service-card  category card: badge + number, copy, checklist, floor CTA
     .ev-card-dark     the same card on the deep-blue fill
   ========================================================================== */

/* The icon column is only as wide as the icon, and the glyph is nudged onto the
   first line of the text beside it. */
.wp-block-spectra-container.wp-block-spectra-container.ev-checkrow > :first-child {
	flex: 0 0 auto;
	width: auto;
	padding-top: 5px;
}

/* A single-column checklist inside a card keeps the hairlines but not the
   64px column gap the two-column grids use. */
.wp-block-spectra-container.wp-block-spectra-container.ev-service-card .ev-divgrid {
	column-gap: 0;
}

/* On the deep-blue cards the rules and the number have to invert. */
.ev-card-dark .ev-divgrid,
.wp-block-spectra-container.wp-block-spectra-container.ev-card-dark .ev-divgrid > .ev-divrow {
	border-color: color-mix(in srgb, var(--ast-global-color-4) 22%, transparent);
}

/* Category cards read as links: the whole card lifts, matching the Home cards. */
.wp-block-spectra-container.wp-block-spectra-container.ev-service-card {
	height: 100%;
}


/* --- Round icon badges must be circles ---------------------------------- */
/* Spectra sizes the badge by width only, so a 54px badge with a 20px icon came
   out 54x46. Squaring it here keeps every badge circular whatever the size. */
.wp-block-spectra-container.wp-block-spectra-container.ev-badge-circle {
	aspect-ratio: 1;
	height: auto;
}

/* Service Desk band heading — smaller than a section h2, per the mockup. */
.wp-block-spectra-content.ev-h2-band {
	font-size: clamp(26px, 2.8vw, 38px);
}

/* --- Closing CTA: the button sits on the floor of its column ------------- */
/* The panel stretches both columns to the image height, so without this the
   button floats directly under the paragraph with dead space beneath it. */
#talk-with-elevate .wp-block-spectra-container.wp-block-spectra-container.ev-rhtp > * > .wp-block-spectra-buttons {
	margin-top: auto;
}


/* --- Checklists inside a box close on the box, not on a rule ------------- */
/* A list that sits in a filled/outlined card ends flush: the card edge already
   closes it, so the last row's hairline is redundant. Lists in open layout
   (e.g. the numbered tables) keep theirs. */
.ev-card .wp-block-spectra-container.wp-block-spectra-container.ev-divgrid > .ev-divrow:last-child,
.ev-card-outline .wp-block-spectra-container.wp-block-spectra-container.ev-divgrid > .ev-divrow:last-child {
	border-bottom: 0;
}

/* ...and no opening rule either: the divider sits only between items. */
.ev-card .wp-block-spectra-container.wp-block-spectra-container.ev-divgrid,
.ev-card-outline .wp-block-spectra-container.wp-block-spectra-container.ev-divgrid {
	border-top: 0;
}


/* ==========================================================================
   Primary nav submenu.

   Astra free exposes no submenu design controls in the Customizer (the saved
   astra-settings carry only the top-level menu colour and size), so the
   treatment lives here: a rounded card with a soft shadow, tighter rows, and
   an eased hover.

   The stock submenu was 240px wide at 18px type, which wrapped
   "Applications, Data & Intelligence" onto three lines and made an 85px row —
   the dead space between items. Wider box + 16px type fixes it at the cause.
   ========================================================================== */

.ast-desktop .main-header-menu.ast-menu-shadow .sub-menu,
.ast-desktop .main-header-menu .sub-menu {
	width: 292px;
	padding: 8px;
	border: 1px solid color-mix(in srgb, var(--ast-global-color-2) 8%, transparent);
	border-radius: 16px;
	box-shadow:
		0 18px 44px color-mix(in srgb, var(--ast-global-color-6) 15%, transparent),
		0 2px 6px color-mix(in srgb, var(--ast-global-color-6) 7%, transparent);
	transform: translateY(-6px);
	transition: opacity 200ms ease, transform 200ms ease;
}

.ast-desktop .main-header-menu .menu-item:hover > .sub-menu,
.ast-desktop .main-header-menu .menu-item.focus > .sub-menu {
	transform: translateY(0);
}

.ast-desktop .main-header-menu .sub-menu .menu-item {
	border: 0;
}

.ast-desktop .main-header-menu .sub-menu .menu-link {
	padding: 11px 14px;
	font-size: 16px;
	line-height: 1.35;
	border-radius: 10px;
	border: 0;
	transition: color 180ms ease;
}

.ast-desktop .main-header-menu .sub-menu .menu-item:hover > .menu-link,
.ast-desktop .main-header-menu .sub-menu .menu-link:focus-visible {
	color: var(--ast-global-color-0);
}

/* The current page reads as selected rather than merely coloured. */
.ast-desktop .main-header-menu .sub-menu .current-menu-item > .menu-link {
	background-color: color-mix(in srgb, var(--ast-global-color-0) 7%, transparent);
	color: var(--ast-global-color-0);
}

/* Mobile keeps Astra's accordion; only the type size follows the desktop. */
@media (max-width: 921px) {
	.main-header-menu .sub-menu .menu-link { font-size: 16px; }
}


/* ==========================================================================
   Sticky primary header.

   Astra's sticky header is a Pro feature and this install runs Astra free, so
   there is no Customizer control for it — this does the same job with CSS
   alone, no JS: the header element is already a direct child of .site, which
   has no clipping ancestor, so `position: sticky` holds without any offset
   maths or scroll listeners.
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 99;
}

/* The header sits over section backgrounds once it detaches, so it needs its
   own ground. Dark is the default now (see "Header colour modes" below), so
   the ground is the deep slot and the hairline is dropped — a navy bar over a
   white section separates itself. */
.site-header {
	background-color: var(--ast-global-color-6);
	box-shadow: none;
}

/* WordPress' admin bar is itself fixed, so the header has to clear it. */
.admin-bar .site-header { top: 32px; }

@media (max-width: 782px) {
	.admin-bar .site-header { top: 46px; }
}


/* ==========================================================================
   Mobile / tablet menu (Astra breakpoint: 921px).

   Astra renders a .ast-menu-toggle button for every parent item and its JS
   flips that button's aria-expanded — but it ships no rule that acts on the
   state and hides the button outright (.ast-menu-toggle{display:none} in
   main.min.css). The result was every submenu permanently open, so the whole
   tree read as one flat list. Driving the submenu off aria-expanded turns it
   into a real accordion using Astra's own markup and JS — no extra script.
   ========================================================================== */

@media (max-width: 921px) {

	/* -- Submenu accordion ------------------------------------------------ */
	.main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle,
	.ast-builder-menu-mobile .menu-item-has-children > .ast-menu-toggle {
		display: flex !important;
		align-items: center;
		justify-content: center;
		position: absolute;
		right: 0;
		top: 0;
		width: 56px;
		height: 56px;
		padding: 0;
		background: none;
		border: 0;
		color: var(--ast-global-color-2);
	}

	.main-header-bar-navigation .menu-item-has-children,
	.ast-builder-menu-mobile .menu-item-has-children {
		position: relative;
	}

	.main-header-bar-navigation .ast-menu-toggle .ast-icon,
	.ast-builder-menu-mobile .ast-menu-toggle .ast-icon {
		transition: transform 220ms ease;
	}

	.main-header-bar-navigation .ast-menu-toggle[aria-expanded="true"] .ast-icon,
	.ast-builder-menu-mobile .ast-menu-toggle[aria-expanded="true"] .ast-icon {
		transform: rotate(180deg);
	}

	/* Collapsed by default; the toggle's own state opens it. */
	.main-header-bar-navigation .ast-menu-toggle[aria-expanded="false"] + .sub-menu,
	.ast-builder-menu-mobile .ast-menu-toggle[aria-expanded="false"] + .sub-menu {
		display: none;
	}

	.main-header-bar-navigation .ast-menu-toggle[aria-expanded="true"] + .sub-menu,
	.ast-builder-menu-mobile .ast-menu-toggle[aria-expanded="true"] + .sub-menu {
		display: block;
	}

	/* Child level reads as nested, not as more top-level items. */
	.main-header-bar-navigation .sub-menu,
	.ast-builder-menu-mobile .sub-menu {
		background: color-mix(in srgb, var(--ast-global-color-0) 4%, transparent);
	}

	.main-header-bar-navigation .sub-menu .menu-link,
	.ast-builder-menu-mobile .sub-menu .menu-link {
		padding-left: 34px;
		font-size: 16px;
	}

	/* Astra prints its arrow glyph inside every submenu link; the indent already
	   says these are children, so it only reads as a stray chevron. Astra sets it
	   from a (0,6,0) selector, hence the !important rather than a longer chain. */
	.main-header-bar-navigation .sub-menu .menu-link > .ast-icon,
	.ast-builder-menu-mobile .sub-menu .menu-link > .ast-icon {
		display: none !important;
	}

	/* -- Open panel: list scrolls, CTA stays on the floor ------------------ */
	/* The button element lives in the header row, not inside the nav, so it is
	   lifted out to the viewport floor for as long as the menu is open. */
	body.ast-main-header-nav-open .main-header-bar-navigation,
	body.ast-main-header-nav-open .ast-builder-menu-mobile {
		max-height: calc(100dvh - 89px - 84px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}

	/* The panel fills the space between the header and the pinned CTA so the
	   open menu reads as a sheet rather than floating over the page copy. */
	body.ast-main-header-nav-open .main-header-bar-navigation {
		min-height: calc(100dvh - 89px - 84px);
		background-color: var(--ast-global-color-4);
	}

	body.ast-main-header-nav-open .ast-header-button-1 {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		display: block;
		padding: 16px 24px calc(16px + env(safe-area-inset-bottom));
		background-color: var(--ast-global-color-4);
		box-shadow: 0 -8px 24px color-mix(in srgb, var(--ast-global-color-6) 12%, transparent);
	}

	body.ast-main-header-nav-open .ast-header-button-1 .ast-builder-button-wrap {
		width: 100%;
	}

	body.ast-main-header-nav-open .ast-header-button-1 .ast-custom-button-link {
		display: block;
		width: 100%;
		text-align: center;
	}
}


/* ==========================================================================
   IT Health page.

     .ev-vector-*   the illustration columns. These are transparent SVGs, so
                    they keep their own aspect ratio — no crop, no rounded
                    corners, no fill behind them.
     .ev-pairgrid   narrow label column against a wide copy column
                    (Intelligence detail, Built around the team)
   ========================================================================== */

.wp-block-image.ev-vector-img {
	margin: 0;
	width: 100%;
}

/* The slot was built for transparent vectors, which is why the radius was
   pinned to 0 here. It now carries a photograph in the Intelligence section,
   so it takes the same 28px corner as every other photo on the page; on a
   transparent SVG a radius is a no-op, so the slots still holding vectors are
   unaffected.

   This cannot be set from the editor, and not only because of this rule: the
   merged theme.json resolves settings.border.radius to false — Astra's parent
   theme.json never opts in and there is no child theme.json — so WordPress
   hides the entire Border panel for core/image sitewide. */
.wp-block-image.ev-vector-img img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 28px;
}

/* Operations and Security share one column width, Intelligence and Funding
   another; the vectors inside them centre on their own height. */
.wp-block-spectra-container.wp-block-spectra-container.ev-vector-col {
	align-self: center;
}

/* -- Ruled label/copy pairs --------------------------------------------- */
.wp-block-spectra-container.wp-block-spectra-container.ev-pairrow {
	border-top: 1px solid color-mix(in srgb, var(--ast-global-color-2) 12%, transparent);
}

/* The stack opens on a heavier rule, matching the mockup. */
.wp-block-spectra-container.wp-block-spectra-container.ev-pairgrid > .ev-pairrow:first-child {
	border-top: 2px solid var(--ast-global-color-2);
}

/* The last pair closes the stack. */
.wp-block-spectra-container.wp-block-spectra-container.ev-pairgrid > .ev-pairrow:last-child {
	border-bottom: 1px solid color-mix(in srgb, var(--ast-global-color-2) 12%, transparent);
}

@media (max-width: 767.98px) {
	.wp-block-spectra-container.wp-block-spectra-container.ev-pairrow {
		flex-direction: column;
		gap: 16px;
	}
	.wp-block-spectra-container.wp-block-spectra-container.ev-pairrow > * {
		width: 100% !important;
	}
}

/* 60ch measure — the "Why rural hospitals call Elevate" lead. */
.wp-block-spectra-content.ev-m60 { max-width: 60ch; }

/* Number sits on the same line as the heading beside it. */
.wp-block-spectra-container.wp-block-spectra-container.ev-numtitle {
	flex-wrap: nowrap;
}

.wp-block-spectra-container.wp-block-spectra-container.ev-numtitle > :first-child {
	flex: 0 0 auto;
	width: auto;
}

.wp-block-spectra-container.wp-block-spectra-container.ev-numtitle > :last-child {
	flex: 1 1 auto;
	width: auto;
}

/* The number is 17px against a 26px heading, so its line box is shorter and the
   glyph would ride high on a flex-start row. Nudge it onto the heading's cap
   line — the same trick the mockup uses. */
.ev-numtitle .wp-block-spectra-content.ev-divrow-num {
	padding-top: 5px;
}

/* A little more air over the "Coverage may include:" style list headings. */
.wp-block-spectra-container.wp-block-spectra-container.ev-listhead {
	margin-top: 24px;
}

/* When a closing statement follows the pairs, its own top rule closes the
   stack, so the last row drops its border. */
.wp-block-spectra-container.wp-block-spectra-container.ev-pairgrid-open > .ev-pairrow:last-child {
	border-bottom: 0;
}

/* Horizontally mirrored image (Services "Not sure where to begin", per the
   image-mapping doc). */
.wp-block-image.ev-flip-x img {
	transform: scaleX(-1);
}

/* ==========================================================================
   Dark photo hero — #cybersecurity-hero-photo (page 4768).

   The section's background is a 16:9 studio shot whose subject sits in the
   right third over a deep blue sweep. Two things have to be true for white
   copy to sit on it:

     1. The section fills the viewport (`100svh`, so a mobile browser's
        retracting toolbar does not make it jump) and the photo covers it as
        one frame. The flat fill underneath is --ast-global-color-6, which is
        what the photo's own field samples at (#05205B), so nothing flashes a
        different blue while the image loads.
     2. The copy column needs a floor under it. ::before lays a left-to-right
        scrim mixed from the same slot; `isolation` keeps it above the photo
        and below the text without touching the children's stacking.

   Below the Spectra md breakpoint the columns stack and the copy runs the full
   width, so the scrim becomes a flat veil and the frame shifts right to keep
   the subject in it.

   Spectra prints this block's own background rule inline, after the theme
   stylesheet, at (0,5,0) — four repeats of .wp-block-spectra-container plus a
   [data-spectra-id] attribute — so no amount of class repetition reaches it
   from an enqueued file at equal specificity. background-size and -position
   are therefore flagged, the same way the button hover rules above are.
   ========================================================================== */

.wp-block-spectra-container.wp-block-spectra-container.wp-block-spectra-container.ev-hero-photo-bg.ev-hero-photo-bg {
	position: relative;
	isolation: isolate;
	/* The header is out of flow on these pages, so the hero owes it clearance.
	   The block's own 80/56/40 top padding is less than the ~95px header, and
	   on a hero whose copy fills the viewport the first line lands underneath
	   it. Flagged because Spectra writes the padding inline. */
	padding-top: 128px !important;
	min-height: 100vh;
	min-height: 100svh;
	background-color: var(--ast-global-color-6);
	background-size: cover !important;
	background-position: center !important;
}

.wp-block-spectra-container.wp-block-spectra-container.wp-block-spectra-container.ev-hero-photo-bg.ev-hero-photo-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(
		100deg,
		var(--ast-global-color-6) 0%,
		var(--ast-global-color-6) 30%,
		color-mix(in srgb, var(--ast-global-color-6) 72%, transparent) 48%,
		color-mix(in srgb, var(--ast-global-color-6) 18%, transparent) 64%,
		transparent 76%
	);
}

/* Tablet */
@media (max-width: 1023.98px) {
	.wp-block-spectra-container.wp-block-spectra-container.wp-block-spectra-container.ev-hero-photo-bg.ev-hero-photo-bg {
		background-position: 72% 50% !important;
		padding-top: 120px !important;
	}

	.wp-block-spectra-container.wp-block-spectra-container.wp-block-spectra-container.ev-hero-photo-bg.ev-hero-photo-bg::before {
		background: color-mix(in srgb, var(--ast-global-color-6) 72%, transparent);
	}
}

/* Mobile */
@media (max-width: 767.98px) {
	.wp-block-spectra-container.wp-block-spectra-container.wp-block-spectra-container.ev-hero-photo-bg.ev-hero-photo-bg {
		padding-top: 112px !important;
	}

	.wp-block-spectra-container.wp-block-spectra-container.wp-block-spectra-container.ev-hero-photo-bg.ev-hero-photo-bg::before {
		background: color-mix(in srgb, var(--ast-global-color-6) 78%, transparent);
	}
}

/* ==========================================================================
   Header colour modes.

   Dark is the DEFAULT. Every marketing page now opens on a dark photo hero,
   and the templates that do not have one (single job, job archive, 404,
   search, Privacy Policy) get the same white logo and light menu over a solid
   navy bar — so the header reads the same everywhere.

   The transparent variant — header lifted out of flow so it rides over the
   photo with no ground of its own — is opted into by
   `body:has(.ev-hero-photo-bg)`, matching the class the hero section itself
   carries. That replaces the page-id allowlist this block used to hold: a new
   page with a dark hero needs no CSS change, and a page without one can never
   end up with white links on white.

   The fallback is the reason it is written this way round. Where :has() is not
   supported the page simply keeps the solid navy bar, which is legible over
   the hero photo — rather than a transparent header that would be invisible.

   One behavioural trade-off, unchanged from the page-id version: on a hero
   page the header is absolute, not sticky, so it scrolls away with the hero
   instead of following you down onto the white sections below, where white
   links would disappear.

   NOT set here: the open mobile panel's background. The panel is white with
   navy links on every page (see "Mobile menu panel" below). The page-id
   version of this block painted it navy, which left navy links on a navy
   sheet once the panel rules were written for white.
   ========================================================================== */

/* -- Dark treatment — every template --------------------------------------- */

/* Astra paints the white and the hairline on the inner bar, not on #masthead,
   so the bar is cleared and .site-header alone carries the ground. */
body .ast-primary-header-bar,
body .main-header-bar,
body .ast-mobile-header-wrap .main-header-bar {
	background-color: transparent;
	border-bottom-width: 0;
	box-shadow: none;
}

/* The logo is a two-colour SVG served as an <img>, so it cannot be recoloured
   per-path from here. Knocking it to black and inverting gives a flat white
   mark, which is what a dark bar wants. */
body .site-header .custom-logo {
	filter: brightness(0) invert(1);
}

/* Top-level menu links only — the dropdown keeps its own white panel, so its
   links must stay dark. Astra prints the menu colour as Customizer CSS inline
   in <head>, after this file and at the same weight, so these carry the extra
   element of weight that settles it. */
body .main-header-menu > .menu-item > .menu-link {
	color: var(--ast-global-color-4);
}

body .main-header-menu > .menu-item > .menu-link:hover,
body .main-header-menu > .menu-item > .menu-link:focus-visible,
body .main-header-menu > .current-menu-item > .menu-link,
body .main-header-menu > .current-menu-ancestor > .menu-link,
body .main-header-menu > .menu-item > .menu-link .ast-icon {
	color: var(--ast-global-color-5);
}

/* The header CTA inverts: a white pill with navy type reads as the lighter
   element on the bar, and leaves the brand-blue pill inside the page as the
   single primary action. */
body .ast-builder-button-wrap .ast-custom-button {
	background-color: var(--ast-global-color-4);
	color: var(--ast-global-color-6);
	/* Astra draws a 1px slot-0 rim on the header button; on the white pill it
	   reads as an outline the dark bar does not want. */
	border-color: transparent;
}

body .ast-builder-button-wrap .ast-custom-button:hover,
body .ast-builder-button-wrap .ast-custom-button-link:focus-visible .ast-custom-button {
	background-color: var(--ast-global-color-5);
	color: var(--ast-global-color-6);
	border-color: transparent;
}

/* Mobile/tablet: the hamburger follows the menu colour. */
@media (max-width: 1023.98px) {
	body .ast-mobile-menu-trigger-minimal,
	body .ast-button-wrap .menu-toggle .ast-mobile-svg {
		color: var(--ast-global-color-4);
		fill: var(--ast-global-color-4);
	}
}

/* -- Transparent, over a dark photo hero ----------------------------------- */

/* Astra reserves 60px above #primary on desktop from a container rule, so the
   body selector alone does not reach it — repeat the container classes it
   keys on. The hero starts at the very top of the page instead. */
body:has(.ev-hero-photo-bg).ast-plain-container.ast-no-sidebar #primary,
body:has(.ev-hero-photo-bg).ast-plain-container #primary,
body:has(.ev-hero-photo-bg) #primary {
	margin-top: 0;
}

/* `fixed`, not `absolute`: both take the header out of flow so the hero can
   start at the very top of the page, but fixed also keeps it on screen as you
   scroll — the same behaviour the templates below get from `sticky`, which
   cannot be used here because an in-flow header would push the hero down. */
body:has(.ev-hero-photo-bg) .site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99;
	transition: background-color 220ms ease, box-shadow 220ms ease;
}

/* Over the hero the header has no ground of its own, and takes one once you
   scroll off the hero — otherwise white links land on the white sections
   below. The state comes from `ev-at-top`, which assets/js/cta-form.js sets on
   <html> while the page is at the top.

   Written this way round deliberately: the solid bar is the resting state, so
   a page that renders before the script runs (or without it) is legible. The
   CSS-only version, `animation-timeline: scroll()`, is not usable here — this
   document's body carries `overflow-x: hidden` and a root scroll timeline
   never activates on it. */
html.ev-at-top body:has(.ev-hero-photo-bg) .site-header {
	background-color: transparent;
	box-shadow: none;
}

/* ==========================================================================
   IT Health panel templates — 4c and 4d from the mockup (page 5646).

     4d  a navy full-width band carrying one rounded card — photo over a navy
         copy panel on the left, a white single-column checklist on the right,
         both columns the same height, the whole card rimmed in slot 0 so it
         separates from the band behind it.
     4c  the photo IS the section background, full width; a white card holding
         all the copy sits inside the Astra content width, right-aligned at
         75%, so a band of the photo stays visible down the left.

   Below the Spectra md breakpoint both cards go full width — the container
   prototypes already switch to vertical, so the breakpoints only have to undo
   the 75% and soften the radii.
   ========================================================================== */

/* The hairline under "Coverage may include:" / "The strain becomes visible
   when:" in both templates. The air ABOVE the heading is set on the block
   itself, because Spectra writes that margin inline at (0,5,0) and a rule
   here could not reach it. */
.wp-block-spectra-content.ev-ith-ruled {
	padding-bottom: 8px;
	border-bottom: 1px solid var(--ast-global-color-0);
}

/* The hairline already closes the heading, so the list drops the top border
   .ev-divgrid would draw and pulls up under it. */
.wp-block-spectra-container.wp-block-spectra-container.ev-ith-list {
	border-top: 0;
	margin-top: -10px;
}

/* -- 4d ------------------------------------------------------------------ */

.wp-block-spectra-container.wp-block-spectra-container.ev-ith-card {
	align-items: stretch;
	border: 1px solid var(--ast-global-color-0);
	border-radius: 28px;
	overflow: hidden;
}

.wp-block-spectra-container.wp-block-spectra-container.ev-ith-4d-left {
	align-self: stretch;
}

/* The navy panel absorbs whatever height the checklist column sets, and its
   copy sits optically centred in what is left under the photo. */
.wp-block-spectra-container.wp-block-spectra-container.ev-ith-4d-dark {
	flex: 1 1 auto;
	justify-content: center;
}

/* -- 4c ------------------------------------------------------------------ */

.wp-block-spectra-container.wp-block-spectra-container.ev-ith-4c-sec {
	background-size: cover !important;
	background-position: center !important;
}

/* Spectra paints a container's background colour on a `::before` at
   `z-index: -1`. Over a section whose own background is an IMAGE, that pseudo
   escapes to the nearest stacking context and lands UNDER the photo, so the
   card renders transparent. `isolation` makes the card its own stacking
   context and keeps its white where it belongs. */
.wp-block-spectra-container.wp-block-spectra-container.ev-ith-4c-card {
	isolation: isolate;
	border-radius: 28px;
	box-shadow: 0 24px 60px color-mix(in srgb, var(--ast-global-color-2) 22%, transparent);
}

/* Tablet and mobile */
@media (max-width: 1023.98px) {
	.wp-block-spectra-container.wp-block-spectra-container.ev-ith-card {
		border-radius: 24px;
	}

	.wp-block-spectra-container.wp-block-spectra-container.ev-ith-4c-card {
		border-radius: 24px;
	}
}

@media (max-width: 767.98px) {
	.wp-block-spectra-container.wp-block-spectra-container.ev-ith-4c-card {
		border-radius: 22px;
	}
}

/* ==========================================================================
   The 5c panel — #why-it-matters on IT Health (page 5646).

   One hairline card holding two columns: the reality on the left, the Elevate
   model on the right, split by a 2px rule that runs the height of the taller
   column. The rule lives on the right column's leading edge rather than in a
   container of its own, so it cannot fall out of step with the copy.
   ========================================================================== */

.wp-block-spectra-container.wp-block-spectra-container.ev-5c-card {
	align-items: stretch;
	border: 1px solid color-mix(in srgb, var(--ast-global-color-2) 12%, transparent);
	border-radius: 28px;
}

.wp-block-spectra-container.wp-block-spectra-container.ev-5c-model {
	border-left: 2px solid var(--ast-global-color-2);
}

/* The phrases the mockup picks out of the left paragraph. */
.ev-5c-col mark.ev-hl {
	background-color: var(--ast-global-color-5);
	color: var(--ast-global-color-2);
	font-weight: 600;
	padding: 1px 4px;
	border-radius: 4px;
}

/* -- the capability pills ------------------------------------------------ */

.wp-block-spectra-content.ev-chip {
	flex: 0 0 auto;
	padding: 10px 20px;
	border: 1px solid var(--ast-global-color-2);
	border-radius: 999px;
	background-color: var(--ast-global-color-2);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
}

.wp-block-spectra-content.ev-chip.ev-chip-outline {
	background-color: transparent;
}

/* Tablet and mobile: the columns stack, so the rule moves to the top of the
   second one and the pills keep their own rhythm. */
@media (max-width: 1023.98px) {
	.wp-block-spectra-container.wp-block-spectra-container.ev-5c-card {
		border-radius: 24px;
	}

	.wp-block-spectra-container.wp-block-spectra-container.ev-5c-model {
		border-left: 0;
		border-top: 2px solid var(--ast-global-color-2);
	}
}

@media (max-width: 767.98px) {
	.wp-block-spectra-container.wp-block-spectra-container.ev-5c-card {
		border-radius: 22px;
	}

	.wp-block-spectra-content.ev-chip {
		padding: 8px 16px;
	}
}

/* ==========================================================================
   Solutions rebuild — page 6288.

   The mockup is a flat HTML comp with its own hex values; none of them are
   carried across. Everything below resolves through the Astra palette, and
   every measurement that Spectra would overwrite inline lives in the block
   instead (padding, gaps, widths), so this file only holds what a stylesheet
   can actually win: rules, radii, pills, overlays and the stacking fixes.
   ========================================================================== */

/* -- shared ------------------------------------------------------------- */

/* A paragraph that opens on a heavy rule (Entry points, Intelligence). */
.wp-block-spectra-content.ev-sol-rule {
	padding-top: 28px;
	border-top: 2px solid var(--ast-global-color-2);
}

.ev-m56 { max-width: 56ch; }
.ev-m64 { max-width: 64ch; }
.ev-m70 { max-width: 70ch; }
.ev-m80 { max-width: 80ch; }

/* The mockup's h3/h4 sit a step under the section h2. */
.wp-block-spectra-content.ev-h4-sm {
	font-size: 26px;
	line-height: 1.25;
	letter-spacing: -0.02em;
}

/* -- hero ---------------------------------------------------------------- */
.wp-block-spectra-container.wp-block-spectra-container.ev-sol-herophoto {
	align-self: stretch;
}

/* -- entry points -------------------------------------------------------- */
.wp-block-spectra-container.wp-block-spectra-container.ev-sol-entrycard {
	border-radius: 20px;
}

.wp-block-spectra-content.ev-sol-entrynum {
	font-size: 15px;
	letter-spacing: 0.08em;
}

/* "Jump to section" is pinned to the card floor so three cards of different
   copy lengths still line their CTAs up. */
.wp-block-spectra-container.wp-block-spectra-container.ev-sol-entrycard .ev-sol-jump {
	margin-top: auto;
}

/* The jump CTA is the card's link, so it inherits the card's text colour
   rather than the global link blue, which would vanish on the navy card. */
.wp-block-spectra-content.ev-sol-jump a {
	color: inherit;
	text-decoration: none;
}

.wp-block-spectra-content.ev-sol-jump a:hover,
.wp-block-spectra-content.ev-sol-jump a:focus-visible {
	text-decoration: underline;
}

/* -- 01 Operate: the bordered two-column card ---------------------------- */
.wp-block-spectra-container.wp-block-spectra-container.ev-sol-card {
	align-items: stretch;
	border: 1px solid color-mix(in srgb, var(--ast-global-color-2) 12%, transparent);
	border-radius: 28px;
	overflow: hidden;
}

.wp-block-spectra-container.wp-block-spectra-container.ev-sol-cardleft {
	align-self: stretch;
}

.wp-block-spectra-container.wp-block-spectra-container.ev-sol-carddark {
	flex: 1 1 auto;
	justify-content: center;
}

/* -- 02 Security: white card riding over the photo panel ----------------- */
.wp-block-spectra-container.wp-block-spectra-container.ev-sol-photo {
	background-size: cover !important;
	background-position: center !important;
}

/* Spectra paints a container's background colour on a `::before` at
   `z-index: -1`; over a photo background that pseudo escapes its box and the
   card renders transparent. `isolation` keeps it inside. */
.wp-block-spectra-container.wp-block-spectra-container.ev-sol-overcard {
	isolation: isolate;
	border-radius: 20px;
	box-shadow: 0 24px 60px color-mix(in srgb, var(--ast-global-color-2) 28%, transparent);
}

.wp-block-spectra-container.wp-block-spectra-container.ev-sol-spectra {
	background-color: var(--ast-global-color-0);
	border-radius: 28px;
}

/* The certification medallion — a ring, not a filled badge. */
.wp-block-spectra-container.wp-block-spectra-container.ev-sol-badge {
	flex: 0 0 auto;
	aspect-ratio: 1;
	align-items: center;
	justify-content: center;
	text-align: center;
	border: 2px solid color-mix(in srgb, var(--ast-global-color-4) 60%, transparent);
	border-radius: 999px;
}

/* -- 03 Intelligence ----------------------------------------------------- */
.wp-block-spectra-container.wp-block-spectra-container.ev-sol-program {
	border-radius: 28px;
}

.wp-block-spectra-container.wp-block-spectra-container.ev-sol-qcard {
	border-radius: 16px;
}

.wp-block-spectra-content.ev-sol-qnum {
	font-size: 15px;
	letter-spacing: 0.08em;
}

.wp-block-spectra-container.wp-block-spectra-container.ev-sol-underphoto {
	flex: 1 1 auto;
}

/* Each numbered row opens on its own rule, and the grid drops the shared one. */
.wp-block-spectra-container.wp-block-spectra-container.ev-sol-numgrid {
	border-top: 0;
}

/* -- IT Health band ------------------------------------------------------ */
.wp-block-spectra-container.wp-block-spectra-container.ev-sol-health {
	position: relative;
	isolation: isolate;
	min-height: 520px;
	background-color: var(--ast-global-color-6);
	background-size: cover !important;
	background-position: 70% center !important;
	border-radius: 28px;
	overflow: hidden;
}

.wp-block-spectra-container.wp-block-spectra-container.ev-sol-health::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		var(--ast-global-color-6) 0%,
		color-mix(in srgb, var(--ast-global-color-6) 82%, transparent) 48%,
		color-mix(in srgb, var(--ast-global-color-6) 20%, transparent) 85%,
		transparent 100%
	);
}

/* -- the capabilities strip that closes each solution area --------------- */
.wp-block-spectra-container.wp-block-spectra-container.ev-capbar {
	flex-wrap: wrap;
	border-top: 1px solid color-mix(in srgb, var(--ast-global-color-2) 14%, transparent);
}

.wp-block-spectra-container.wp-block-spectra-container.ev-capbar-dark {
	border-top-color: color-mix(in srgb, var(--ast-global-color-4) 18%, transparent);
}

.wp-block-spectra-content.ev-caplabel {
	padding: 0;
	border: 0;
	background: none;
	margin-right: 4px;
}

/* Pill variants on top of the base .ev-chip from the 5c panel. */
.wp-block-spectra-content.ev-chip.ev-chip-soft {
	background-color: var(--ast-global-color-8);
	border-color: transparent;
	font-weight: 500;
}

.wp-block-spectra-content.ev-chip.ev-chip-ghost {
	background-color: color-mix(in srgb, var(--ast-global-color-4) 12%, transparent);
	border-color: transparent;
	font-weight: 500;
}

/* Tablet and mobile */
@media (max-width: 1023.98px) {
	.wp-block-spectra-container.wp-block-spectra-container.ev-sol-card,
	.wp-block-spectra-container.wp-block-spectra-container.ev-sol-health,
	.wp-block-spectra-container.wp-block-spectra-container.ev-sol-program,
	.wp-block-spectra-container.wp-block-spectra-container.ev-sol-spectra {
		border-radius: 24px;
	}

	.wp-block-spectra-container.wp-block-spectra-container.ev-sol-health {
		min-height: 0;
	}

	.wp-block-spectra-container.wp-block-spectra-container.ev-sol-health::before {
		background: color-mix(in srgb, var(--ast-global-color-6) 78%, transparent);
	}

	.wp-block-spectra-container.wp-block-spectra-container.ev-sol-badge {
		align-self: flex-start;
	}
}

@media (max-width: 767.98px) {
	.wp-block-spectra-container.wp-block-spectra-container.ev-sol-card,
	.wp-block-spectra-container.wp-block-spectra-container.ev-sol-health,
	.wp-block-spectra-container.wp-block-spectra-container.ev-sol-program,
	.wp-block-spectra-container.wp-block-spectra-container.ev-sol-spectra,
	.wp-block-spectra-container.wp-block-spectra-container.ev-sol-overcard {
		border-radius: 22px;
	}
}

/* ==========================================================================
   Our Team — the Leadership cards and their bio lightbox.

   The cards are emitted by [esg_team_grid] as plain markup, so they do not
   get Spectra's per-block CSS the way the static cards did. Everything that
   used to come from block attributes — the white ground, 24px padding, 28px
   radius, 16px gap, the 16px photo radius — is reproduced here, measured off
   the cards it replaces so the grid looks identical.
   ========================================================================== */

.ev-team-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	background-color: var(--ast-global-color-4);
	border-radius: 28px;
	cursor: pointer;
	transition: transform 220ms ease, box-shadow 220ms ease;
}

.ev-team-card:hover,
.ev-team-card:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 24px 64px color-mix(in srgb, var(--ast-global-color-6) 14%, transparent);
}

.ev-team-card .ev-team-photo {
	aspect-ratio: 1 / 1;
	background-color: var(--ast-global-color-8);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	border-radius: 16px;
}

.ev-team-card .ev-team-name {
	margin: 0;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--ast-global-color-2);
}

.ev-team-card .ev-team-role {
	margin: 0;
	font-size: 18px;
	line-height: 1.65;
	color: var(--ast-global-color-3);
}

/* The pill is a span, not a link — the whole card is the control — so it
   needs the shape .ev-go-btn gets from the button block. */
.ev-team-card .ev-team-btn {
	align-self: flex-start;
	margin-top: auto;
	padding: 12px 24px;
	border: 1.5px solid color-mix(in srgb, var(--ast-global-color-0) 30%, transparent);
	border-radius: 999px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ast-global-color-2);
}

.ev-team-card:hover .ev-team-btn {
	background-color: var(--ast-global-color-0);
	border-color: var(--ast-global-color-0);
	color: var(--ast-global-color-4);
}

/* -- the lightbox -------------------------------------------------------- */

html.ev-team-lb-lock {
	overflow: hidden;
}

.ev-team-lb {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	background-color: color-mix(in srgb, var(--ast-global-color-6) 82%, transparent);
	opacity: 0;
	transition: opacity 200ms ease;
	overflow-y: auto;
}

.ev-team-lb[hidden] {
	display: none;
}

.ev-team-lb.is-open {
	opacity: 1;
}

.ev-team-lb-dialog {
	position: relative;
	width: 100%;
	max-width: 1000px;
	max-height: calc(100vh - 80px);
	display: flex;
	background-color: var(--ast-global-color-4);
	border-radius: 28px;
	box-shadow: 0 40px 120px color-mix(in srgb, var(--ast-global-color-6) 45%, transparent);
	transform: translateY(12px) scale(0.985);
	transition: transform 200ms ease;
	overflow: hidden;
}

.ev-team-lb.is-open .ev-team-lb-dialog {
	transform: none;
}

.ev-team-lb-close {
	position: absolute;
	top: 40px;
	right: 40px;
	z-index: 2;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background-color: color-mix(in srgb, var(--ast-global-color-4) 86%, transparent);
	color: var(--ast-global-color-2);
	cursor: pointer;
	transition: background-color 160ms ease, color 160ms ease;
}

.ev-team-lb-close svg {
	width: 20px;
	height: 20px;
}

.ev-team-lb-close:hover,
.ev-team-lb-close:focus-visible {
	background-color: var(--ast-global-color-2);
	color: var(--ast-global-color-4);
}

.ev-team-lb-body {
	flex: 1 1 auto;
	min-height: 320px;
	display: flex;
}

.ev-team-lb-grid {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: 38% 1fr;
	min-height: 0;
}

.ev-team-lb-photo {
	background-color: var(--ast-global-color-8);
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
}

/* The copy column is the only thing that scrolls, so the portrait stays put
   and the dialog itself never grows past the viewport. */
.ev-team-lb-copy {
	min-width: 0;
	max-height: calc(100vh - 80px);
	overflow-y: auto;
	padding: 40px;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

.ev-team-lb-name {
	/* Keep a long name off the close button, which sits 40px in. */
	padding-right: 56px;
	margin: 0 0 4px;
	font-size: 38px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: var(--ast-global-color-2);
}

.ev-team-lb-role {
	margin: 0 0 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid color-mix(in srgb, var(--ast-global-color-2) 12%, transparent);
	font-size: 18px;
	font-weight: 600;
	color: var(--ast-global-color-0);
}

.ev-team-lb-bio p {
	margin: 0 0 16px;
	font-size: 17px;
	line-height: 1.7;
	color: var(--ast-global-color-3);
}

.ev-team-lb-bio p:last-child {
	margin-bottom: 0;
}

/* -- loading and error --------------------------------------------------- */

.ev-team-lb-loading,
.ev-team-lb-error {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 320px;
	padding: 40px;
}

.ev-team-lb-error p {
	margin: 0;
	color: var(--ast-global-color-3);
}

.ev-team-lb-spinner {
	width: 36px;
	height: 36px;
	border: 3px solid color-mix(in srgb, var(--ast-global-color-0) 20%, transparent);
	border-top-color: var(--ast-global-color-0);
	border-radius: 999px;
	animation: ev-team-spin 760ms linear infinite;
}

@keyframes ev-team-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.ev-team-lb,
	.ev-team-lb-dialog,
	.ev-team-card {
		transition: none;
	}

	.ev-team-lb-spinner {
		animation-duration: 2.4s;
	}
}

/* Tablet: the portrait moves above the copy and stops competing for width. */
@media (max-width: 1023.98px) {
	.ev-team-lb {
		padding: 30px;
	}

	.ev-team-lb-dialog {
		max-height: calc(100vh - 60px);
		border-radius: 24px;
	}

	.ev-team-lb-close {
		top: 30px;
		right: 30px;
	}

	.ev-team-lb-grid {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
		min-height: 0;
		overflow-y: auto;
	}

	/* Stacked, the portrait stops being a full-width band - a landscape crop
	   of a square headshot cut the faces off. It becomes a centred square
	   instead, which shows the source (768x768) whole. It clears the close
	   button, which stays pinned 30px into the corner. */
	.ev-team-lb-photo {
		justify-self: center;
		width: 300px;
		max-width: 100%;
		aspect-ratio: 1 / 1;
		margin: 88px 0 0;
		border-radius: 20px;
		background-position: center;
	}

	.ev-team-lb-copy {
		max-height: none;
		overflow: visible;
		padding: 32px;
	}

	/* Stacked, the name sits under a centred portrait rather than beside it,
	   so it centres too. The right padding that keeps a long name off the
	   close button is only needed when the two share a line, which they no
	   longer do - left in, it would throw the centring off by half of it. */
	.ev-team-lb-name,
	.ev-team-lb-role {
		padding-right: 0;
		text-align: center;
	}
}

@media (max-width: 767.98px) {
	.ev-team-lb-close {
		top: 30px;
		right: 30px;
		width: 40px;
		height: 40px;
	}

	.ev-team-lb-dialog {
		border-radius: 22px;
	}

	.ev-team-lb-name {
		font-size: 30px;
	}

	.ev-team-lb-copy {
		padding: 24px;
	}

	.ev-team-lb-photo {
		width: 240px;
		margin-top: 80px;
		border-radius: 18px;
	}
}

/* ==========================================================================
   Home — the Operate / Secure / Improve row under the hero (#positioning).

   The heading and the three blocks share one row. Left to size themselves the
   three wrap, because their copy runs to different lengths; sharing the track
   equally keeps them on one line and lets the longest one wrap its text
   instead. Desktop only - below the Spectra md breakpoint the block's own
   responsive values stack them, and that is still right on a phone.
   ========================================================================== */

@media (min-width: 1024px) {
	.wp-block-spectra-container.wp-block-spectra-container.ev-pos-cols {
		flex-wrap: nowrap;
	}

	.wp-block-spectra-container.wp-block-spectra-container.ev-pos-col {
		flex: 1 1 0;
		min-width: 0;
	}
}

/* ==========================================================================
   Dark photo hero — the controls inside it.

   The section shell, its photo and the scrim are set per page in the block;
   what cannot be is the colour of the controls, because Spectra writes button
   colour from palette slugs at a specificity a plain rule cannot reach. These
   restyle whatever button a given hero happens to carry - the outline pill,
   the bare "go" link, the hairline above the lead row - so no page needed its
   button markup rewritten.
   ========================================================================== */

/* The colour is flagged because Spectra prints the button's palette colour in
   its own inline per-block rule, which outranks anything an enqueued file can
   say. The border is not - that one comes from this stylesheet already. */
.ev-hero-photo-bg .wp-block-spectra-button.wp-block-spectra-button.ev-btn-outline,
.ev-hero-photo-bg .wp-block-spectra-button.wp-block-spectra-button.ev-go-btn {
	color: var(--ast-global-color-4) !important;
	border-color: color-mix(in srgb, var(--ast-global-color-4) 45%, transparent);
}

/* Hover fills with the light blue and the label stays white. Earlier this
   rule only set a border, on the assumption that Spectra's
   `background: var(--spectra-background-color-hover) !important` would win —
   but that rule is scoped to `.spectra-background-color-hover`, a class these
   buttons do not carry, so nothing was painting a background and the label
   went navy on a dark photo: invisible. The fill is a wash rather than solid
   slot 5, because white type needs something dark left underneath it. */
.ev-hero-photo-bg .wp-block-spectra-button.wp-block-spectra-button.ev-btn-outline:hover,
.ev-hero-photo-bg .wp-block-spectra-button.wp-block-spectra-button.ev-btn-outline:focus-visible,
.ev-hero-photo-bg .wp-block-spectra-button.wp-block-spectra-button.ev-go-btn:hover,
.ev-hero-photo-bg .wp-block-spectra-button.wp-block-spectra-button.ev-go-btn:focus-visible {
	background: color-mix(in srgb, var(--ast-global-color-5) 22%, transparent) !important;
	border-color: var(--ast-global-color-5);
	color: var(--ast-global-color-4) !important;
}

/* The hairline over the lead + CTA row on the Services sub-page heroes. */
.ev-hero-photo-bg .wp-block-spectra-container.wp-block-spectra-container.ev-hero-rule {
	border-top-color: color-mix(in srgb, var(--ast-global-color-4) 22%, transparent);
}

/* ==========================================================================
   Featured menu items.

   Both are driven by a CSS class set on the menu item in Appearance > Menus,
   not by its menu-item id: ids change when a menu is rebuilt, a class
   survives reordering and lets the treatment move to another item without
   touching this file.

     .ev-nav-outline   header "IT Health" - outlined pill
     .ev-nav-hiring    footer "Careers"  - brand blue plus a "We're hiring" pill
   ========================================================================== */

/* -- header: IT Health --------------------------------------------------- */

/* Astra gives the link the full 80px header height via line-height, so the
   outline has to stop inheriting that or it draws a pill the height of the
   header. The link becomes a self-centred box with its own tight padding. */
@media (min-width: 1024px) {
	/* 15px of extra air after the item, on top of Astra's own 18px gutter. */
	.main-header-menu > li.ev-nav-outline {
		margin-right: 15px;
	}

	/* The header is dark on every template now, so the outline takes the pale
	   blue outright — a 40% tint of slot 0 disappears on navy and on a photo. */
	.main-header-menu > li.ev-nav-outline > .menu-link {
		align-self: center;
		height: auto;
		padding: 7px 15px;
		line-height: 1.25;
		border: 1px solid color-mix(in srgb, var(--ast-global-color-5) 70%, transparent);
		border-radius: 999px;
		transition: background-color 160ms ease, border-color 160ms ease;
	}

	.main-header-menu > li.ev-nav-outline > .menu-link:hover,
	.main-header-menu > li.ev-nav-outline > .menu-link:focus-visible {
		background-color: color-mix(in srgb, var(--ast-global-color-4) 14%, transparent);
		border-color: var(--ast-global-color-5);
	}
}

/* -- footer: Careers ----------------------------------------------------- */

/* The other footer links are slot 3; this one steps up to the brand blue and
   carries the pill. inline-flex + wrap so the pill drops under the word in a
   narrow column instead of pushing the row wider. */
.site-footer li.ev-nav-hiring > a {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	color: var(--ast-global-color-0);
	font-weight: 600;
}

.site-footer li.ev-nav-hiring > a::after {
	content: "We're hiring";
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	background-color: var(--ast-global-color-5);
	color: var(--ast-global-color-6);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
}

.site-footer li.ev-nav-hiring > a:hover::after,
.site-footer li.ev-nav-hiring > a:focus-visible::after {
	background-color: var(--ast-global-color-0);
	color: var(--ast-global-color-4);
}

/* ==========================================================================
   Contact v2 (page 4743).

   The detail bands are plain rows of label/value pairs separated by hairlines,
   so the page reads as one column of information rather than a form with a
   sidebar. Each row wraps on its own; the widths come from the content, not
   from fixed columns, which is what keeps it honest on a phone.
   ========================================================================== */

.wp-block-spectra-container.wp-block-spectra-container.ev-c-ruled {
	border-top: 1px solid color-mix(in srgb, var(--ast-global-color-0) 18%, transparent);
}

.wp-block-spectra-container.wp-block-spectra-container.ev-c-row {
	flex-wrap: wrap;
}

.wp-block-spectra-container.wp-block-spectra-container.ev-c-item {
	flex: 0 0 auto;
}

/* The LinkedIn tile is a square, and a flex item takes its height from its
   content, so the height is pinned rather than left to aspect-ratio. */
.wp-block-spectra-container.wp-block-spectra-container.ev-c-social {
	border-radius: 12px;
}

/* The map sits on the page, not in a card - no ground, no rule. The padding
   on the block is all that holds it off the section edges. */
.wp-block-spectra-container.wp-block-spectra-container.ev-c-mappanel {
	background-color: transparent;
	border: 0;
}

/* Spectra's vertical stacks align their children to the start, so a heading
   shrink-wraps to its own text and `text-align` has nothing to work with.
   Stretching it across the stack is what actually centres it. */
.wp-block-spectra-content.ev-c-center {
	align-self: stretch;
	width: 100%;
	text-align: center;
}

/* The map is an image block inside this panel now, not a background. The
   container keeps the radius it carries in the block; `overflow` is what
   holds the artwork's corners inside it, and the rim is the pale blue. */
.wp-block-spectra-container.wp-block-spectra-container.ev-c-map {
	background-color: transparent;
	border: 1.5px solid var(--ast-global-color-5);
	overflow: hidden;
}

.ev-c-map .wp-block-image,
.ev-c-map .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

.wp-block-spectra-container.wp-block-spectra-container.ev-c-formcard {
	max-width: 900px;
	border-radius: 32px;
}

@media (max-width: 1023.98px) {
	.wp-block-spectra-container.wp-block-spectra-container.ev-c-formcard {
		border-radius: 24px;
	}
}

@media (max-width: 767.98px) {
	.wp-block-spectra-container.wp-block-spectra-container.ev-c-formcard {
		border-radius: 22px;
	}
}

/* ==========================================================================
   Mobile menu panel — legibility.

   Astra renders the panel links at the same muted slot the footer uses, which
   is too light on a white sheet at phone size. They go to the heading navy,
   and the whole row (not just the text) takes a brand-blue hover so a tap
   target reads as one block.
   ========================================================================== */

@media (max-width: 1023.98px) {
	/* Astra prints the panel link colour in the Customizer's inline CSS, which
	   lands after this file at the same weight, so the colour is flagged.
	   Everything else here wins on its own. */
	.ast-header-break-point .main-header-bar-navigation .main-header-menu .menu-link {
		color: var(--ast-global-color-2) !important;
		font-weight: 500;
	}

	.ast-header-break-point .main-header-bar-navigation .main-header-menu .menu-item:hover > .menu-link,
	.ast-header-break-point .main-header-bar-navigation .main-header-menu .menu-link:hover,
	.ast-header-break-point .main-header-bar-navigation .main-header-menu .menu-link:focus-visible {
		background-color: var(--ast-global-color-0);
		color: var(--ast-global-color-4) !important;
	}

	/* The featured item runs the full panel width, deeper than a plain row,
	   with its own air above it. Astra styles these links from
	   .ast-header-break-point .main-header-bar-navigation .main-header-menu
	   .menu-link and zeroes the border and padding, so this matches that
	   weight and flags what has to win outright. The panel is white, so the
	   outline takes the on-white blue, not the pale one the dark header uses. */
	.ast-header-break-point .main-header-bar-navigation .main-header-menu li.ev-nav-outline {
		margin-top: 15px;
	}

	.ast-header-break-point .main-header-bar-navigation .main-header-menu li.ev-nav-outline > .menu-link {
		width: auto;
		margin: 0 20px;
		padding: 14px 20px !important;
		text-align: center;
		border: 1px solid color-mix(in srgb, var(--ast-global-color-0) 40%, transparent) !important;
		border-radius: 999px;
		line-height: 1.4;
	}

	.ast-header-break-point .main-header-bar-navigation .main-header-menu li.ev-nav-outline > .menu-link:hover,
	.ast-header-break-point .main-header-bar-navigation .main-header-menu li.ev-nav-outline > .menu-link:focus-visible {
		background-color: var(--ast-global-color-0);
		border-color: var(--ast-global-color-0) !important;
		color: var(--ast-global-color-4) !important;
	}
}


/* ==========================================================================
   Job board — WP Job Openings (plugin "wp-job-openings", sold as HireZoot).

   The plugin's own stylesheet stays in place; this re-surfaces it so a listing
   reads like the rest of the site. The LIST view is the one in use (Settings ▸
   Appearance ▸ Listing), because the table layout is what the brief asked for;
   the grid view is left untouched.

   What changes: the list becomes one rounded card, rows are divided by a
   hairline with none at the ends, and the row is laid out with flex instead of
   the plugin's two 50% floats — floats cannot centre the right column against
   a two-line title, and they need a clearfix to hold the row open.

   `.ev-jobs-board` is the group block wrapping the [awsmjobs] shortcode on
   Careers. A Spectra vertical stack aligns children to start and lets them
   shrink-wrap, so without `align-self` the board sits at its content width
   instead of filling the 1240 column.
   ========================================================================== */

.ev-jobs-board {
	align-self: stretch;
	width: 100%;
}

.awsm-job-wrap .awsm-filter-wrap {
	margin-bottom: 24px;
}

.awsm-job-wrap .awsm-lists {
	border: 1px solid color-mix(in srgb, var(--ast-global-color-2) 12%, transparent);
	border-radius: 16px;
	background-color: var(--ast-global-color-4);
	/* Clips the first and last rows to the corner radius. */
	overflow: hidden;
}

.awsm-lists .awsm-list-item .awsm-job-item {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 24px 32px;
	border-bottom: 1px solid color-mix(in srgb, var(--ast-global-color-2) 10%, transparent);
	transition: background-color 160ms ease;
}

.awsm-lists .awsm-list-item:last-child .awsm-job-item {
	border-bottom: 0;
}

.awsm-lists .awsm-list-item .awsm-job-item:hover {
	background-color: color-mix(in srgb, var(--ast-global-color-8) 55%, transparent);
}

.awsm-lists .awsm-list-left-col,
.awsm-lists .awsm-list-right-col {
	float: none;
	width: auto;
}

.awsm-lists .awsm-list-left-col {
	flex: 1 1 auto;
	min-width: 0;
}

.awsm-lists .awsm-list-right-col {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 24px;
}

/* Beats the sitewide fluid h2 curve, which is sized for section headings. */
.awsm-lists h2.awsm-job-post-title {
	font-size: 20px;
	line-height: 1.4;
	font-weight: 600;
	margin: 0;
}

.awsm-lists h2.awsm-job-post-title a {
	color: var(--ast-global-color-2);
	text-decoration: none;
}

.awsm-lists h2.awsm-job-post-title a:hover,
.awsm-lists h2.awsm-job-post-title a:focus-visible {
	color: var(--ast-global-color-0);
}

.awsm-lists .awsm-job-specification-item {
	color: var(--ast-global-color-3);
	font-size: 16px;
	margin: 0;
}

.awsm-lists .awsm-job-specification-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 24px;
}

.awsm-lists .awsm-job-more-container .awsm-job-more {
	color: var(--ast-global-color-0);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.awsm-lists .awsm-job-more-container .awsm-job-more:hover,
.awsm-lists .awsm-job-more-container .awsm-job-more:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.awsm-job-wrap .awsm-jobs-none-container {
	padding: 32px;
}

/* The two columns cannot hold a row at phone width, so the specs and the link
   drop under the title. */
@media (max-width: 767.98px) {
	.awsm-lists .awsm-list-item .awsm-job-item {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding: 24px;
	}

	.awsm-lists .awsm-list-right-col {
		flex-wrap: wrap;
		gap: 8px 24px;
	}
}


/* ==========================================================================
   Templates with no hero — single job, job archive, 404, search, and the
   pages built without a hero section.

   These land on Astra's boxed layout, which draws a white card on the light
   blue site background. The brief wants the opposite: a plain white page with
   the content running in the 1240 column like every other template, so the
   site background goes white and the article card loses its 2.5em padding,
   its ground and its shadow.

   Scoped by `:not(:has(.ev-hero-photo-bg))` for the same reason the header is
   — it follows the page's own markup rather than a list of ids. Where :has()
   is unsupported nothing here applies and the stock Astra layout shows, which
   is intact, just not the design.
   ========================================================================== */

body:not(:has(.ev-hero-photo-bg)) {
	background-color: var(--ast-global-color-4);
}

/* `.ast-separate-container` is a BODY class, so these are compound, not
   descendant, selectors. */
body:not(:has(.ev-hero-photo-bg)).ast-separate-container .ast-article-single,
body:not(:has(.ev-hero-photo-bg)).ast-separate-container .ast-article-post,
body:not(:has(.ev-hero-photo-bg)).ast-separate-container .ast-archive-description {
	padding: 0;
	background-color: transparent;
	box-shadow: none;
	border-radius: 0;
}

/* The article's own padding was carrying the page's top and bottom air, so the
   column takes it back on the section rhythm's small step. */
body:not(:has(.ev-hero-photo-bg)) .site-content > .ast-container {
	padding-top: 56px;
	padding-bottom: 96px;
}

@media (max-width: 767.98px) {
	body:not(:has(.ev-hero-photo-bg)) .site-content > .ast-container {
		padding-top: 40px;
		padding-bottom: 72px;
	}
}

/* Astra leaves these templates on a ~8px phone gutter, which reads as no
   margin at all next to the 24px the header, footer and every hero section
   use. Set from the tablet breakpoint down, where the content stops being
   narrower than the column. */
@media (max-width: 921px) {
	/* Astra sets this from an inline rule that carries #content, so the
	   selector has to carry the id too. */
	body:not(:has(.ev-hero-photo-bg)) #content.site-content > .ast-container {
		padding-left: 24px;
		padding-right: 24px;
	}
}


/* ==========================================================================
   Single job post.

   Plugin markup, site surfaces: the description keeps the plugin's structure
   and the application form is restated in the site's form language — 1.5px
   rims, pill fields, a brand-blue submit at the same 62px height as every
   other button on the site.
   ========================================================================== */

/* The content column runs the full 1240 by default, which is roughly 150
   characters a line — about twice a readable measure, and it leaves the form
   fields absurdly wide. The job column takes the site's reading width instead;
   the plugin's own markup and styling are otherwise untouched. */
/* The whole column takes the measure, not just the description: the title and
   the previous/next links are siblings of the article content, so capping the
   article and the navigation keeps every edge on the same line. Applied to
   every template without a hero, since 1240 is twice a readable measure for
   running text wherever it appears.

   (Astra caps direct children of .entry-content at the 1240 content width from
   an inline rule at (0,2,0), which is why the inner selector carries a class
   more than it looks like it needs.) */
body:not(:has(.ev-hero-photo-bg)) .site-main > article,
body:not(:has(.ev-hero-photo-bg)) .site-main > .navigation,
.entry-content[data-ast-blocks-layout] > .awsm-job-single-wrap,
.awsm-job-single-wrap {
	max-width: 880px;
	margin-left: auto;
	margin-right: auto;
}

.awsm-job-single-wrap .awsm-job-entry-content h3,
.awsm-job-single-wrap .awsm-job-entry-content h4 {
	margin-top: 40px;
}

.awsm-job-single-wrap .awsm-job-entry-content > *:first-child {
	margin-top: 0;
}

.awsm-job-single-wrap .awsm-job-entry-content ul {
	margin-bottom: 24px;
}

.awsm-job-single-wrap .awsm-job-entry-content li {
	margin-bottom: 8px;
}

.awsm-job-single-wrap .awsm-job-content {
	padding-bottom: 56px;
}

/* -- Application form ----------------------------------------------------- */

.awsm-job-form .awsm-job-form-inner {
	background-color: var(--ast-global-color-4);
	border: 1.5px solid color-mix(in srgb, var(--ast-global-color-2) 14%, transparent);
	border-radius: 24px;
	padding: 40px;
	box-shadow: 0 18px 44px color-mix(in srgb, var(--ast-global-color-6) 8%, transparent);
}

.awsm-job-form .awsm-job-form-inner h2 {
	font-size: 26px;
	line-height: 1.3;
	margin: 0 0 24px;
}

.awsm-job-form .awsm-job-form-group {
	margin-bottom: 24px;
}

.awsm-job-form .awsm-job-form-group label {
	font-size: 16px;
	font-weight: 600;
	color: var(--ast-global-color-2);
	margin-bottom: 8px;
}

.awsm-job-form .awsm-job-form-group .awsm-job-form-control {
	background-color: var(--ast-global-color-4);
	border: 1.5px solid color-mix(in srgb, var(--ast-global-color-2) 16%, transparent);
	border-radius: 999px;
	padding: 16px 24px;
	font-size: 17px;
	line-height: 1.65;
	color: var(--ast-global-color-2);
	height: auto;
	box-shadow: none;
	transition: border-color 180ms ease;
}

.awsm-job-form .awsm-job-form-group textarea.awsm-job-form-control {
	border-radius: 24px;
	min-height: 140px;
}

/* A file input cannot take a pill — the browser draws its own button inside. */
.awsm-job-form .awsm-job-form-group .awsm-form-file-control {
	border-radius: 16px;
	padding: 14px 20px;
}

.awsm-job-form .awsm-job-form-group .awsm-job-form-control:focus {
	border-color: var(--ast-global-color-0);
	outline: none;
}

.awsm-job-form .awsm-job-form-group small {
	display: block;
	margin-top: 8px;
	font-size: 15px;
	color: var(--ast-global-color-3);
}

/* The consent row is a checkbox and its sentence, not a labelled field. */
.awsm-job-form .awsm-job-inline-group {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.awsm-job-form .awsm-job-inline-group input[type="checkbox"] {
	margin: 5px 0 0;
	flex: 0 0 auto;
}

.awsm-job-form .awsm-job-inline-group label {
	font-weight: 400;
	font-size: 16px;
	color: var(--ast-global-color-3);
	margin: 0;
}

.awsm-job-form .awsm-application-submit-btn {
	background-color: var(--ast-global-color-0);
	border: 0;
	border-radius: 999px;
	color: var(--ast-global-color-4);
	/* 17px at 1.2 plus 20.8px of padding = the 62px pill the site uses. */
	padding: 20.8px 34px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.2;
	height: auto;
	width: auto;
	cursor: pointer;
	transition: background-color 180ms ease;
}

.awsm-job-form .awsm-application-submit-btn:hover,
.awsm-job-form .awsm-application-submit-btn:focus-visible {
	background-color: var(--ast-global-color-6);
	color: var(--ast-global-color-4);
}

.awsm-job-form .awsm-job-form-error {
	color: var(--ast-global-color-0);
}

/* 40px of card padding costs a quarter of the field width at phone size. */
@media (max-width: 767.98px) {
	.awsm-job-form .awsm-job-form-inner {
		padding: 24px;
		border-radius: 16px;
	}
}


/* ==========================================================================
   404.

   Markup comes from the child theme's template-parts/content-404.php, which
   overrides Astra's. The page has no hero, so it inherits the white ground and
   the navy bar from the block above and only needs its own centred column.
   ========================================================================== */

.ev-404 {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

.ev-404-art {
	display: block;
	width: 100%;
	max-width: 340px;
	height: auto;
	margin: 0 auto 24px;
}

/* The one-off size the section-opening headings use, so the 404 reads as a
   page of the site rather than a theme error screen. */
.ev-404 .ev-404-title {
	margin: 0 0 16px;
	font-size: clamp(32px, 3.3vw, 46px);
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--ast-global-color-2);
}

.ev-404-lead {
	max-width: 560px;
	margin: 0 auto 32px;
	font-size: 19px;
	line-height: 1.6;
	color: var(--ast-global-color-3);
	/* The block stays centred in the column; only its lines set flush left,
	   so the ragged edge falls on the right instead of on both sides. */
	text-align: left;
}

.ev-404-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

.ev-404-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	/* 17px at 1.2 plus 20.8px of padding = the site's 62px pill. */
	padding: 20.8px 34px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.ev-404-btn-solid {
	background-color: var(--ast-global-color-0);
	border: 1.5px solid var(--ast-global-color-0);
	color: var(--ast-global-color-4);
}

.ev-404-btn-solid:hover,
.ev-404-btn-solid:focus-visible {
	background-color: var(--ast-global-color-6);
	border-color: var(--ast-global-color-6);
	color: var(--ast-global-color-4);
}

.ev-404-btn-outline {
	background-color: transparent;
	border: 1.5px solid color-mix(in srgb, var(--ast-global-color-0) 30%, transparent);
	color: var(--ast-global-color-2);
}

.ev-404-btn-outline:hover,
.ev-404-btn-outline:focus-visible {
	background-color: color-mix(in srgb, var(--ast-global-color-0) 10%, transparent);
	border-color: var(--ast-global-color-0);
	color: var(--ast-global-color-2);
}

.ev-404-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 24px;
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid color-mix(in srgb, var(--ast-global-color-2) 12%, transparent);
}

.ev-404-links-label {
	font-size: 16px;
	color: var(--ast-global-color-3);
}

.ev-404-links a {
	font-size: 16px;
	font-weight: 600;
	color: var(--ast-global-color-0);
	text-decoration: none;
}

.ev-404-links a:hover,
.ev-404-links a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 767.98px) {
	.ev-404-art {
		max-width: 240px;
	}

	.ev-404-btn {
		width: 100%;
	}
}


/* ==========================================================================
   Document type scale — the templates with no hero.

   The sitewide heading curve is built for marketing sections, where an h2
   opens a full-width band: 54px on desktop. In running text that inverts the
   hierarchy — the page title renders at 32px with 54px section headings under
   it. These templates get a document scale instead, with the title taking the
   fluid size the 404 and the section-opening headings use.
   ========================================================================== */

body:not(:has(.ev-hero-photo-bg)) .entry-title {
	margin-bottom: 24px;
	font-size: clamp(32px, 3.3vw, 46px);
	line-height: 1.15;
	letter-spacing: -0.02em;
}

body:not(:has(.ev-hero-photo-bg)) .entry-content h2 {
	margin: 40px 0 16px;
	font-size: 26px;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

body:not(:has(.ev-hero-photo-bg)) .entry-content h3 {
	margin: 32px 0 12px;
	font-size: 22px;
	line-height: 1.35;
}

body:not(:has(.ev-hero-photo-bg)) .entry-content h4 {
	margin: 24px 0 12px;
	font-size: 19px;
	line-height: 1.4;
}

body:not(:has(.ev-hero-photo-bg)) .entry-content > *:first-child {
	margin-top: 0;
}

@media (max-width: 767.98px) {
	body:not(:has(.ev-hero-photo-bg)) .entry-content h2 {
		font-size: 23px;
	}
}


/* ==========================================================================
   Header, 922px to 1199px.

   Astra hands over to the mobile menu at 921px, so just above that the full
   desktop header has to fit in ~890px of inner width: a 200px logo, five
   18px menu items on 18px gutters and the CTA pill. It does not — the menu
   wraps to a second row and the button, which has no nowrap of its own,
   squeezes down to one character a line.

   Astra's own responsive controls cannot reach this band (their "tablet" step
   ends at 921px, where the desktop header no longer exists), so the step down
   is set here: a smaller mark, tighter gutters, and a button that refuses to
   wrap.
   ========================================================================== */

@media (min-width: 922px) and (max-width: 1199.98px) {
	.ast-primary-header-bar .ast-container {
		padding-left: 16px;
		padding-right: 16px;
	}

	.site-header .custom-logo {
		max-width: 160px;
	}

	/* One row, always — the wrap is what turns the bar into two storeys. */
	.main-header-menu {
		flex-wrap: nowrap;
	}

	.main-header-menu > .menu-item > .menu-link {
		padding-left: 10px;
		padding-right: 10px;
		font-size: 16px;
		white-space: nowrap;
	}

	/* The outlined item keeps its pill, just a tighter one. */
	.main-header-menu > li.ev-nav-outline {
		margin-right: 8px;
	}

	.main-header-menu > li.ev-nav-outline > .menu-link {
		padding: 6px 12px;
	}

	.ast-builder-button-wrap .ast-custom-button {
		padding: 12px 18px;
		font-size: 15px;
		white-space: nowrap;
	}
}


/* ==========================================================================
   Round 9 — Services, Contact, IT Health.
   ========================================================================== */

/* -- Contact: the social badge is the link ------------------------------- */

/* Spectra wraps only the 20px glyph in the <a>, so the 16px of blue around it
   was dead space. The anchor stretches to the badge instead, which makes the
   whole circle the hit area without touching the block. */
.wp-block-spectra-container.ev-c-social > .wp-block-spectra-icons,
.wp-block-spectra-container.ev-c-social > .wp-block-spectra-icons > .wp-block-spectra-icon {
	width: 100%;
	height: 100%;
}

.wp-block-spectra-container.ev-c-social > .wp-block-spectra-icons > .wp-block-spectra-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: inherit;
}

/* -- IT Health 4c: measure, two columns, navy variant -------------------- */

/* The lead and the closing line read at a measure, not across the whole card.
   Desktop only — below the Spectra md breakpoint the card is already narrow. */
@media (min-width: 1024px) {
	.ev-ith-4c-card > .wp-block-spectra-content.ev-body-lg:not(.ev-ith-ruled) {
		max-width: 70%;
	}
}

/* Two columns on desktop, filled TOP TO BOTTOM — 01-05 down the left, 06-10
   down the right, the way the mockup reads. A grid fills across instead, so
   the list switches to a multi-column block: it also balances the halves on
   its own, which matters because one of these lists has 10 items and the
   other 11. The rows keep their own bottom rule, and break-inside stops a row
   being split down the middle of the gutter.

   The block itself still records two columns, so the editor shows the same
   shape; this only changes which axis the items flow along. */
@media (min-width: 1024px) {
	/* Named parents rather than .ev-ith-list on its own, so a list that picks
	   up the class elsewhere does not inherit the two-column treatment by
	   accident. */
	.ev-ith-4c-card .wp-block-spectra-container.wp-block-spectra-container.ev-ith-list,
	.ev-ith-4d-list .wp-block-spectra-container.wp-block-spectra-container.ev-ith-list,
	.ev-sol-overcard .wp-block-spectra-container.wp-block-spectra-container.ev-ith-list {
		display: block;
		columns: 2;
		column-gap: 48px;
	}

	.ev-ith-4c-card .wp-block-spectra-container.ev-ith-list > .ev-divrow,
	.ev-ith-4d-list .wp-block-spectra-container.ev-ith-list > .ev-divrow,
	.ev-sol-overcard .wp-block-spectra-container.ev-ith-list > .ev-divrow {
		break-inside: avoid;
	}
}

/* Below that it is one column again. Spectra's own breakpoints on this
   install are lg > 782px, md 481–782 and sm ≤ 480, so a portrait tablet at
   820px would otherwise still take the desktop count and leave two ~280px
   columns inside the card. Spectra's per-block rule is
   `body .wp-block-spectra-container:where([data-spectra-id])`, which the
   :where() keeps at (0,1,1) — the repeated class here clears it without a
   flag. */
@media (max-width: 1023.98px) {
	.wp-block-spectra-container.wp-block-spectra-container.ev-ith-list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* The CTA at the foot of a 4d column sits on the card's floor, so both
   sections' buttons line up however much copy is above them. The column is a
   vertical flex that stretches to the card, which is what gives `auto`
   something to take. */
.ev-ith-4d-list > .wp-block-spectra-buttons:last-child {
	margin-top: auto;
}

/* The security card's two paragraphs: two columns on desktop, one from the
   design's tablet edge down. Spectra's own lg band starts at 783px, so the
   783-1023 strip needs the rule below to come back to one. */
@media (max-width: 1023.98px) {
	.wp-block-spectra-container.wp-block-spectra-container.ev-sol-paracols {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Navy variant of the 4c card. Every paragraph inside carries its own
   `has-ast-global-color-N-color` class, which WordPress prints with
   !important at (0,1,0) — so each of these is flagged and sits above that on
   specificity rather than fighting it. */
.ev-ith-4c-dark .wp-block-spectra-content.ev-m22,
.ev-ith-4c-dark .wp-block-spectra-content.ev-ith-ruled {
	color: var(--ast-global-color-4) !important;
}

.ev-ith-4c-dark .wp-block-spectra-content.ev-body-lg:not(.ev-strong) {
	color: color-mix(in srgb, var(--ast-global-color-4) 78%, transparent) !important;
}

.ev-ith-4c-dark .ev-divrow .wp-block-spectra-content.ev-body {
	color: color-mix(in srgb, var(--ast-global-color-4) 88%, transparent) !important;
}

/* The numbers and the closing line keep the accent role they have on white,
   stepped up to the pale blue so they hold on navy. */
.ev-ith-4c-dark .wp-block-spectra-content.ev-divrow-num,
.ev-ith-4c-dark > .wp-block-spectra-content.ev-body-lg.ev-strong {
	color: var(--ast-global-color-5) !important;
}

.ev-ith-4c-dark .wp-block-spectra-content.ev-ith-ruled {
	border-bottom-color: color-mix(in srgb, var(--ast-global-color-5) 60%, transparent);
}

.ev-ith-4c-dark .wp-block-spectra-container.ev-divgrid,
.ev-ith-4c-dark .wp-block-spectra-container.ev-divgrid > .ev-divrow {
	border-color: color-mix(in srgb, var(--ast-global-color-4) 18%, transparent);
}


/* ==========================================================================
   Card grids: the column count comes from here, not from the block.

   Spectra's own breakpoints on this install are lg > 782px, md 481–782 and
   sm ≤ 480 — bands that do not line up with the design's 1024 / 768. A grid
   set to 3 / 2 / 1 through Spectra therefore shows its TABLET count on a
   572px phone and its DESKTOP count on an 820px tablet, which is how the
   About, Services and Careers grids all ended up multi-column on a phone.

   The counts are set here instead, at the design's own breakpoints, for every
   grid in the system: .ev-grid3 is 3 / 2 / 1 and .ev-grid2 is 2 / 2 / 1. The
   blocks keep their own attributes — these only decide what wins on the front
   end. Spectra's per-block rule is
   `body .wp-block-spectra-container:where([data-spectra-id])`, which the
   :where() holds at (0,1,1), so the repeated class clears it with no flag.
   ========================================================================== */

@media (max-width: 1023.98px) {
	.wp-block-spectra-container.wp-block-spectra-container.ev-grid3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767.98px) {
	.wp-block-spectra-container.wp-block-spectra-container.ev-grid2,
	.wp-block-spectra-container.wp-block-spectra-container.ev-grid3 {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* The "Our mission" row: a 30% label beside a 64% statement. Stacked below
   the design's tablet edge — Spectra's own @mobile shape only reaches 480px,
   and the two columns are unreadable long before that. */
@media (max-width: 767.98px) {
	.wp-block-spectra-container.wp-block-spectra-container.ev-mission-row {
		flex-direction: column;
		gap: 16px;
	}

	/* Flagged for the same reason as the .ev-joinus columns above: Spectra
	   writes the 30% and 64% at (0,4,0). */
	.wp-block-spectra-container.wp-block-spectra-container.ev-mission-row > * {
		width: 100% !important;
	}
	
.ev-panel-outline{
	flex-direction:column !important;
	padding:25px !important
}	
	
.ev-panel-outline	.spectra-overlay-color{
	width:100% !important
}
	
}


/* ==========================================================================
   About — three widowed last lines.

   None of these were capped by their column: the headings sit in a 1240 and a
   794 column but stop at 752px, because `.ev-m22` holds them to a 22ch
   measure (and `.ev-m46` holds the CTA paragraph to 46ch). Raising the
   measure for these three alone, rather than the shared class, is what pulls
   the stranded word back up.

     "Five habits that shape how we work."   "work."   -> one line
     "…around the work that matters most."   "most."   -> 6 lines to 5
     "…what's the best next step."           "step."   -> "next step."

   `text-wrap` does the rest: `balance` evens the heading lines out, `pretty`
   only guards a paragraph's last line. Where it is unsupported the wider
   measure alone still clears the first two; the CTA keeps its widow.
   ========================================================================== */

@media (min-width: 768px) {
	#what-makes-the-model-different .wp-block-spectra-content.ev-m22,
	#our-mission .wp-block-spectra-content.ev-m22 {
		max-width: 32ch;
		text-wrap: balance;
	}
}

/* The CTA paragraph needs no more width — at 46ch it already stops short of
   its 645px column, and widening it would not move "step." up. Scoped to the
   About page by a section only it has. */
body:has(#what-makes-the-model-different) #talk-with-elevate .wp-block-spectra-content.ev-m46 {
	text-wrap: pretty;
}