/* ============================================================================
   EPIC 2026 - the WordPress layer.
   epic.css holds the approved design. This file adds everything the static
   mock-up did not need: the real menu, page and post styles, listings, and the
   rules that stop Astra and the block editor fighting the design.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Astra */
/* Astra wraps everything in its own container and sets its own type scale.
   We draw our own containers, so its wrappers are flattened rather than hidden -
   hiding them would take the content with them. */
.epic .site,
.epic #page,
.epic .ast-container,
.epic .site-content,
.epic #primary,
.epic #content,
.epic .ast-container > .ast-row {
	max-width: none;
	width: auto;
	margin: 0;
	padding: 0;
	display: block;
	float: none;
}
.epic .ast-separate-container .ast-article-single,
.epic .ast-separate-container #primary {
	background: transparent;
	padding: 0;
	margin: 0;
	border: 0;
	box-shadow: none;
}
/* Astra's own header, footer, page title and breadcrumb - we supply all four. */
.epic .site-header,
.epic .main-header-bar,
.epic .ast-mobile-header-wrap,
.epic .site-footer,
.epic .ast-single-post-order,
.epic .entry-header .ast-blog-featured-section,
.epic .ast-archive-description {
	display: none !important;
}
/* Astra reserves space for a sticky header it is no longer drawing. */
.epic .ast-sticky-shrunk .main-header-bar-wrap { padding: 0 !important; }

/* ---------------------------------------------------------------- 2. base */
.epic-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--amber);
	color: #221704;
	padding: 12px 20px;
	font-weight: 600;
	border-radius: 0 0 8px 0;
}
.epic-skip:focus { left: 0; }

.epic-main { display: block; }

:where(.epic) a:focus-visible,
:where(.epic) button:focus-visible {
	outline: 3px solid var(--amber);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Astra's global typography settings force text-transform: capitalize on h1 and h2.
   The approved copy is written in sentence case, so "One partner for language access"
   was rendering as "One Partner For Language Access". Reset it, then put back the one
   heading the design does want in caps. */
.epic h1, .epic h2, .epic h3,
.epic h4, .epic h5, .epic h6 { text-transform: none; }
.epic footer h4 { text-transform: uppercase; }

/* Astra also sets an explicit colour on the body and on every heading
   (h1..h6 { color: var(--ast-global-color-2) }, a near-black navy).
   The approved design never colours a heading at all - headings inherit from the
   section they sit in, which is how the dark bands (government, technology, trust,
   the TIPS block, the closing panel) get white text. Astra's near-black beat that
   inherited white and left those headings unreadable on a dark background.
   :where() carries no specificity, so this rule scores as .epic alone: it beats
   Astra's bare element selector, and every rule in the design still beats it. */
.epic { color: var(--ink); }
.epic :where(h1, h2, h3, h4, h5, h6) { color: inherit; }

/* ---------------------------------------------------------------- 3. menu */
.epic-menu-list,
.epic-utility-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
}
.epic-menu-list { gap: 28px; }
.epic-utility-list { gap: 26px; margin-right: auto; }
.epic-utility-list a { color: inherit; }
.epic-utility-list a:hover { color: var(--amber); }

.epic-menu-list > li { position: relative; }
.epic-menu-list > li > a { white-space: nowrap; }

/* the caret on anything with children */
.epic-menu-list .menu-item-has-children > a::before {
	content: "";
	order: 2;
	width: 9px;
	height: 9px;
	margin-left: 2px;
	border-right: 1.8px solid currentColor;
	border-bottom: 1.8px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	opacity: .65;
}

.epic-menu-list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 14px;
	position: absolute;
	top: calc(100% + 14px);
	left: -18px;
	min-width: 296px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 16px;
	box-shadow: 0 26px 60px rgba(14, 26, 34, .16);
	display: grid;
	gap: 2px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .18s, transform .18s, visibility .18s;
	z-index: 70;
	/* no drop-down may be taller than the screen it opens on */
	max-height: min(66vh, 560px);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.epic-menu-list > li:hover > .sub-menu,
.epic-menu-list > li:focus-within > .sub-menu,
.epic-menu-list > li.epic-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* With the script running, opening is driven by .epic-open rather than by raw
   :hover. Two reasons. Brushing the cursor along the bar threw a full-width
   panel over the page; and there are 42px of nav padding between the bottom of
   the menu item and the top of the panel, so the panel closed before the
   cursor could ever reach it. The script opens after a short pause and holds
   the panel open while the cursor crosses that gap. With no script the plain
   hover rule above still works. */
html.js .epic-menu-list > li:hover:not(.epic-open) > .sub-menu {
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
}
.epic-menu-list .sub-menu a {
	display: block;
	padding: 9px 14px;
	border-radius: 9px;
	color: var(--ink);
	font-weight: 500;
	font-size: .9rem;
	line-height: 1.4;
	white-space: normal;
}
.epic-menu-list .sub-menu a::after { display: none; }
.epic-menu-list .sub-menu a:hover { background: var(--wash); color: var(--blue); }

/* a third level is rendered inline under its parent rather than as another
   flyout - these lists are long and a second hover target loses people */
.epic-menu-list .sub-menu .sub-menu {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	box-shadow: none;
	border: 0;
	border-left: 2px solid var(--line);
	border-radius: 0;
	margin: 2px 0 8px 14px;
	padding: 0 0 0 8px;
	min-width: 0;
	/* the height cap belongs to the panel, not to a list inside it */
	max-height: none;
	overflow: visible;
}
.epic-menu-list .sub-menu .sub-menu a { font-size: .855rem; color: var(--slate); }

/* 23 items in the live menu have no destination. Rendering them as links means
   23 things that do nothing when clicked, so they are drawn as headings instead. */
.epic-menu-list .sub-menu a[href="#"],
.epic-menu-list .sub-menu a[href=""],
.epic-menu-list .sub-menu a:not([href]) {
	font-size: .74rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--slate);
	font-weight: 600;
	pointer-events: none;
	padding-bottom: 4px;
}

/* mega panel: anchored to the header, not to the item, and laid out in columns.
   Columns rather than a grid: a grid lays the groups out row by row and every
   row is as tall as the tallest group in it, which padded the panel out to
   642px of content and forced it to scroll. Balanced columns pack the same
   groups into a panel that fits on the screen without scrolling. */
.nav .wrap { position: relative; }
.epic-menu-list > li.epic-mega { position: static; }
.epic-menu-list > li.epic-mega > .sub-menu {
	left: 0;
	right: 0;
	width: auto;
	min-width: 0;
	max-height: min(66vh, 560px);
	overflow-y: auto;
	padding: 18px 20px;
	display: block;
	columns: 232px 5;
	column-gap: 22px;
}
/* a group must not be split down the middle across two columns */
.epic-menu-list > li.epic-mega > .sub-menu > li {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	padding-bottom: 2px;
}

.nav.solid .epic-menu-list > li > a { color: #fff; }
.nav.solid .epic-menu-list .sub-menu a { color: var(--ink); }

/* ---------------------------------------------------------------- 4. burger */
.epic-burger {
	display: none;
	width: 46px;
	height: 46px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: #fff;
	padding: 0 12px;
	cursor: pointer;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
}
.epic-burger span {
	display: block;
	height: 2px;
	background: var(--ink);
	border-radius: 2px;
	transition: transform .22s, opacity .18s;
}
.nav.solid .epic-burger { background: transparent; border-color: rgba(255, 255, 255, .35); }
.nav.solid .epic-burger span { background: #fff; }
.epic-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.epic-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.epic-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 1080 was too low. Between 1081 and 1365 the bar showed the full desktop nav AND the
   Request a Quote button, and the two together are wider than the row - so a 1280 laptop,
   the commonest size there is, scrolled sideways by 15px and a 1100 window by 175. The
   drawer now takes over up to 1200, and the band above it is tightened so the full nav
   fits without the button being dropped. Measured at 390/768/1024/1100/1152/1200/1201/
   1280/1300/1366/1440/1536/1920 before shipping. */
@media (max-width: 1200px) {
	.epic-burger { display: flex; }

	/* epic.css hides the menu outright at this width - put it back as a drawer */
	.nav .menu {
		display: block !important;
		position: fixed;
		inset: auto 0 0 0;
		top: 80px;
		background: #fff;
		border-top: 1px solid var(--line);
		padding: 18px 22px 40px;
		overflow-y: auto;
		transform: translateY(-8px);
		opacity: 0;
		visibility: hidden;
		transition: opacity .2s, transform .2s, visibility .2s;
		z-index: 65;
	}
	.epic-nav-open .nav .menu { opacity: 1; visibility: visible; transform: none; }
	.epic-nav-open { overflow: hidden; }

	.epic-menu-list { display: block; }
	.epic-menu-list > li > a {
		font-size: 1.02rem;
		font-weight: 600;
		padding: 14px 0;
		border-bottom: 1px solid var(--line);
		color: var(--ink) !important;
	}
	.epic-menu-list > li > a::after { display: none; }
	.epic-menu-list .sub-menu,
	.epic-menu-list .sub-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		border-radius: 0;
		padding: 6px 0 14px 12px;
		min-width: 0;
		/* the drawer scrolls as one - the individual lists must not */
		max-height: none;
		overflow: visible;
	}
	/* the mega panel is a desktop layout; in the drawer it is just a list */
	.epic-menu-list > li.epic-mega > .sub-menu {
		columns: auto;
		max-height: none;
		overflow: visible;
		padding: 6px 0 14px 12px;
	}
	.nav .wrap { gap: 14px; }
	.nav .btn-amber { display: none; }
}

/* the band just above the drawer: same nav, drawn tighter so it fits the row */
@media (min-width: 1201px) and (max-width: 1420px) {
	.epic-menu-list { gap: 14px; }
	.epic-menu-list > li > a { font-size: .93rem; }
	.nav .btn-amber { padding: 12px 16px; font-size: .9rem; }
}

/* ---------------------------------------------------------------- 5. heads */
.epic-pagehead {
	background: linear-gradient(160deg, var(--blue-950) 0%, var(--blue-800) 100%);
	color: #fff;
	padding: clamp(58px, 6vw, 96px) 0 clamp(46px, 5vw, 76px);
}
/* Astra sets an explicit colour on headings, which beats the white inherited
   from the band. Every piece of text on the dark band states its own colour. */
.epic-pagehead h1,
.epic-pagehead h2,
.epic-pagehead p,
.epic-pagehead a { color: #fff; }

.epic-pagehead h1 {
	color: #fff;
	font-size: clamp(2rem, 4vw, 3.3rem);
	letter-spacing: -.04em;
	line-height: 1.08;
	max-width: 22ch;
	margin: 0;
}
.epic-pagelede {
	color: rgba(255, 255, 255, .82);
	margin-top: 18px;
	color: rgba(255, 255, 255, .82);
	font-size: clamp(1.02rem, 1.5vw, 1.16rem);
	line-height: 1.62;
	max-width: 62ch;
}
.epic-crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	font-size: .82rem;
	color: rgba(255, 255, 255, .6);
	margin-bottom: 20px;
}
.epic-crumbs { color: rgba(255, 255, 255, .6); }
.epic-crumbs a { color: rgba(255, 255, 255, .82); }
.epic-crumbs a:hover { color: var(--amber); }

.epic-posthead .epic-eyebrow,
.epic-404 .epic-eyebrow {
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--amber);
	margin-bottom: 14px;
}
.epic-postmeta {
	margin-top: 22px;
	display: flex;
	gap: 10px;
	align-items: center;
	font-size: .9rem;
	color: rgba(255, 255, 255, .72);
}
.epic-postimage { margin-top: -46px; position: relative; z-index: 2; }
.epic-postimage img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 18px;
	box-shadow: 0 30px 70px rgba(14, 26, 34, .22);
}

.epic-pagebody, .epic-postbody { padding: clamp(48px, 5vw, 82px) 0; }
.epic-postbody .epic-prose { max-width: 74ch; margin: 0 auto; }

/* ---------------------------------------------------------------- 6. prose */
.epic-prose { font-size: 1.045rem; line-height: 1.75; color: #2C3A44; }
.epic-prose > * + * { margin-top: 1.15em; }
.epic-prose h1, .epic-prose h2, .epic-prose h3,
.epic-prose h4, .epic-prose h5, .epic-prose h6 {
	color: var(--ink);
	letter-spacing: -.028em;
	line-height: 1.2;
	margin-top: 1.9em;
	margin-bottom: .55em;
}
.epic-prose > :first-child { margin-top: 0; }
.epic-prose h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
.epic-prose h3 { font-size: clamp(1.24rem, 1.9vw, 1.5rem); }
.epic-prose h4 { font-size: 1.1rem; }
.epic-prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.epic-prose a:hover { color: var(--amber-600); }
/* Astra and Spectra both put a large margin-left on lists while leaving the width
   at 100%, which pushes them off the right edge on a phone. Indent with padding
   instead, so the box can never be wider than its parent. */
.epic-prose ul, .epic-prose ol {
	margin-left: 0;
	padding-left: 1.35em;
	max-width: 100%;
}
.epic-prose li + li { margin-top: .5em; }
.epic-prose img, .epic-prose video, .epic-prose iframe {
	max-width: 100%;
	height: auto;
	border-radius: 14px;
	display: block;
}
.epic-prose figure { margin: 2em 0; }
.epic-prose figcaption {
	font-size: .87rem;
	color: var(--slate);
	margin-top: 10px;
	line-height: 1.55;
}
.epic-prose blockquote {
	margin: 2em 0;
	padding: 6px 0 6px 26px;
	border-left: 3px solid var(--amber);
	font-size: 1.12rem;
	color: var(--ink);
}
.epic-prose blockquote p:last-child { margin-bottom: 0; }
.epic-prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.6em 0; }
.epic-prose code {
	background: var(--wash);
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 2px 6px;
	font-size: .9em;
}
.epic-prose pre {
	background: var(--blue-950);
	color: #D7E4EC;
	padding: 20px 22px;
	border-radius: 14px;
	overflow-x: auto;
}
.epic-prose pre code { background: none; border: 0; padding: 0; color: inherit; }

/* tables get their own scroll container rather than pushing the page sideways */
.epic-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
	display: block;
	overflow-x: auto;
	white-space: nowrap;
}
.epic-prose table th, .epic-prose table td {
	border: 1px solid var(--line);
	padding: 11px 14px;
	text-align: left;
}
.epic-prose table th { background: var(--wash); font-weight: 600; color: var(--ink); }

/* ------------------------------------------------- 7. editor + Spectra */
/* Existing pages are built with blocks. Do not restyle them - just stop them
   overflowing and make sure their own colours still win. */
.epic-prose .alignwide  { max-width: min(1100px, 100%); margin-inline: auto; }
.epic-prose .alignfull  { max-width: 100%; }
.epic-prose .alignleft  { float: left;  margin: .4em 1.6em .8em 0; }
.epic-prose .alignright { float: right; margin: .4em 0 .8em 1.6em; }
.epic-prose .aligncenter { margin-inline: auto; }
.epic-prose .wp-block-image { margin-block: 1.6em; }
.epic-prose .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.epic-prose .wp-block-button__link { border-radius: 999px; padding: 13px 26px; font-weight: 600; }
.epic-prose .wp-block-columns { gap: clamp(20px, 3vw, 40px); }
/* Spectra renders its button icons as an <svg> with no width, height or viewBox
   sizing. With nothing to constrain it the SVG stretches to the full available
   width and pushes the page sideways - 26px of horizontal scroll on a phone.
   Give any unsized SVG inside content a text-sized box. */
.epic-prose svg { max-width: 100%; }
.epic-prose a svg:not([width]):not([height]),
.epic-prose [class*="uagb-"] svg:not([width]):not([height]),
.epic-prose .wp-block-button__link svg {
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	vertical-align: -.12em;
}

.epic-prose .wp-block-group,
.epic-prose .uagb-container,
.epic-prose [class*="uagb-"] { max-width: 100%; }
.epic-prose .wp-block-embed__wrapper { position: relative; }
.epic-prose .wp-block-table { display: block; overflow-x: auto; }
.epic-prose .wp-block-table table { display: table; white-space: normal; }
/* a block that carries its own colour keeps it */
.epic-prose [style*="color"] { color: inherit; }
.epic-prose [class*="has-"][class*="-color"] { color: revert; }

/* ---------------------------------------------- 7b. carried from the Customizer */
/* Custom CSS in the Customizer is stored per theme, so none of the tuning done on
   astra-child carries over. Two of those rules matter for content and are ported
   here, retargeted at .epic-prose. The rest were Astra-specific (its header menu,
   its .site-content padding, an Elementor footer) and do not apply any more, and
   the footer link override is deliberately left out because it forced every footer
   link white and underlined, which fights this design. */
.epic-prose .wp-block-buttons { margin-bottom: 32px; }
.epic-prose .wp-block-buttons + .wp-block-group,
.epic-prose .wp-block-buttons + .wp-block-cover,
.epic-prose .wp-block-buttons + .wp-block-columns,
.epic-prose .wp-block-buttons + .wp-block-heading,
.epic-prose .wp-block-buttons + h2,
.epic-prose .wp-block-buttons + h3 { margin-top: 32px; }
@media (max-width: 768px) {
	.epic-prose .wp-block-buttons { margin-bottom: 24px; }
}
/* A heading given a background colour needs light text on it. No !important, so the
   inline colour added by the carried-over content filter still wins. */
.epic-prose h1.has-background,
.epic-prose h2.has-background,
.epic-prose h3.has-background,
.epic-prose h4.has-background { color: #fff; }

/* ---------------------------------------------------------------- 8. cards */
.epic-listing { padding: clamp(48px, 5vw, 86px) 0; }
.epic-cardgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: clamp(20px, 2.4vw, 32px);
}
.epic-card {
	border: 1px solid var(--line);
	border-radius: 18px;
	overflow: hidden;
	background: #fff;
	transition: transform .2s, box-shadow .2s, border-color .2s;
}
.epic-card:hover {
	transform: translateY(-4px);
	border-color: transparent;
	box-shadow: 0 22px 50px rgba(14, 26, 34, .13);
}
.epic-card-link { display: block; color: inherit; height: 100%; }
.epic-card-media {
	aspect-ratio: 16 / 9;
	background: var(--wash);
	display: grid;
	place-items: center;
	overflow: hidden;
}
.epic-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.epic-card-mark svg { height: 34px; width: auto; opacity: .22; color: var(--blue); }
.epic-card-body { padding: 22px 24px 26px; }
.epic-card-body .epic-eyebrow {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--blue);
	margin-bottom: 10px;
}
.epic-card-body h3 {
	font-size: 1.12rem;
	line-height: 1.32;
	letter-spacing: -.02em;
	color: var(--ink);
	margin: 0 0 10px;
}
.epic-card-body p { color: var(--slate); font-size: .95rem; line-height: 1.6; margin: 0; }
.epic-card-meta {
	margin-top: 16px;
	display: flex;
	gap: 8px;
	font-size: .82rem;
	color: var(--slate);
}
.epic-card--plain .epic-card-body { padding: 26px 26px 28px; }

.epic-related { background: var(--wash); padding: clamp(48px, 5vw, 82px) 0; }
.epic-related h2 {
	font-size: clamp(1.4rem, 2.2vw, 1.9rem);
	letter-spacing: -.032em;
	margin: 0 0 28px;
	color: var(--ink);
}

/* ------------------------------------------------------------ 9. pagination */
.epic-pagination { margin-top: 46px; }
.epic-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.epic-pagination .page-numbers {
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--line);
	border-radius: 11px;
	font-weight: 500;
	color: var(--ink);
}
.epic-pagination .page-numbers:hover { border-color: var(--blue); color: var(--blue); }
.epic-pagination .page-numbers.current {
	background: var(--blue-900);
	border-color: var(--blue-900);
	color: #fff;
}

/* ---------------------------------------------------------------- 10. cta */
.epic-cta { padding: clamp(52px, 5vw, 92px) 0; }
.epic-cta h2 {
	font-size: clamp(1.45rem, 2.3vw, 2.05rem);
	letter-spacing: -.038em;
	margin: 0;
	color: #fff;
}
.epic-cta p { color: rgba(255, 255, 255, .88); margin-top: 10px; max-width: 54ch; }
.epic-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.epic-page-extra { padding: 0 0 clamp(40px, 4vw, 70px); }
.epic-empty { text-align: center; padding: 40px 0 60px; }

/* ---------------------------------------------------------------- 11. search */
.epic-404 .search-form,
.epic-pagehead .search-form {
	margin-top: 26px;
	display: flex;
	gap: 10px;
	max-width: 520px;
	flex-wrap: wrap;
}
.epic-404 .search-field,
.epic-pagehead .search-field {
	flex: 1 1 240px;
	min-width: 0;
	padding: 14px 18px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .3);
	background: rgba(255, 255, 255, .08);
	color: #fff;
	font: inherit;
	font-size: .96rem;
}
.epic-404 .search-field::placeholder { color: rgba(255, 255, 255, .55); }
.epic-404 .search-submit,
.epic-pagehead .search-submit {
	padding: 14px 26px;
	border-radius: 999px;
	border: 0;
	background: var(--amber);
	color: #221704;
	font-weight: 600;
	cursor: pointer;
	font-size: .94rem;
}
.epic-routes .epic-card { background: #fff; }

/* ---------------------------------------------------------------- 12. print */
@media print {
	.utility, .nav, footer, .epic-cta, .epic-related, .epic-skip { display: none !important; }
	.epic-pagehead { background: none; color: #000; padding: 0 0 18px; }
	.epic-pagehead h1, .epic-pagelede { color: #000; }
	.epic-prose { font-size: 11pt; }
}

/* ------------------------------------------------- 13. contact form (CF7) */
/* The design's field rules are written for labels in a block context. Contact Form 7
   wraps every control in an inline <span class="wpcf7-form-control-wrap"> and puts
   each row in a <p>, so both need flattening for the layout to hold. Form 26815
   ("EPIC Contact Form") already existed on the site - it is reused, not replaced. */
.cform .wpcf7-form p { margin: 0; }
.cform .wpcf7-form-control-wrap { display: block; }
.cform .wpcf7 form .wpcf7-response-output {
	margin: 22px 0 0;
	padding: 13px 17px;
	border: 1px solid var(--line);
	border-left: 3px solid var(--blue);
	border-radius: 0 11px 11px 0;
	font-size: .92rem;
	line-height: 1.6;
}
.cform .wpcf7-not-valid-tip { color: #B3261E; font-size: .82rem; margin-top: 6px; display: block; }
.cform .wpcf7-not-valid { border-color: #B3261E; }
.cform .wpcf7-spinner { vertical-align: middle; }
.cform .wpcf7-list-item { margin-left: 0; }