/*
 * CSA Modern interface refresh.
 *
 * A presentation layer over the established stylesheet rather than a rewrite of
 * it. layout.css is the 2015 CleanSpace CSS carried through the migration and is
 * left untouched, so anything here can be read, reviewed or reverted on its own.
 *
 * The brand is unchanged. The lime, the navy and the logo keep their exact
 * values; they are named as custom properties below so this file can reuse them
 * instead of repeating literals. What changes is spacing, type scale, line
 * length, depth, surface and the state of interactive controls.
 *
 * Loaded last, after components.css. Two rules follow from that:
 *   - `transition` is never declared `!important` here, so the reduced-motion
 *     block in components.css still wins for visitors who ask for it.
 *   - `!important` is used only where the established stylesheet already used it
 *     on the same property.
 *
 * Contents
 *   1  Tokens
 *   2  Base and typography
 *   3  Header
 *   4  Small-screen navigation
 *   5  Page head
 *   6  Buttons
 *   7  Forms
 *   8  Focus
 *   9  Prose, media and tables
 *   10 Cards
 *   11 Listings, archives and pagination
 *   12 Sidebar and widgets
 *   13 Builder panels and the home page
 *   14 WooCommerce
 *   15 Accounts and gated content
 *   16 Empty states
 *   17 Footer
 *   18 Back to top
 *   19 Small screens
 *   20 Print
 */


/*  1  T O K E N S
    --------------- */

:root {
	/* Brand. Unchanged values, named for reuse. */
	--csa-lime: #ccd200;
	--csa-lime-edge: #cbd32b;
	--csa-lime-bright: #dde400;
	/* The brand lime is 1.6:1 on white, so it cannot carry small text. This is
	   the same hue held down to 5.6:1 for labels and rules that must be read. */
	--csa-lime-deep: #686d00;
	--csa-lime-wash: #f8f9e8;
	--csa-navy: #002e60;
	--csa-navy-deep: #1b325e;
	--csa-navy-ink: #0b1f43;

	/* Neutrals. Cool greys, so they sit with the navy rather than against it.
	   The established #a9a9a9 meta grey falls below 3:1 on white and is gone. */
	--csa-ink: #1f2933;
	--csa-body: #495562;
	--csa-muted: #68727e;
	--csa-hairline: #e4e8ed;
	--csa-rule: #cfd6de;
	--csa-surface: #f6f8fa;
	--csa-surface-sunken: #eef2f6;
	--csa-surface-tint: #f2f5f8;

	--csa-radius-sm: 6px;
	--csa-radius: 10px;
	--csa-radius-lg: 16px;
	--csa-radius-pill: 999px;

	--csa-shadow-xs: 0 1px 2px rgba(11, 31, 67, 0.06);
	--csa-shadow-sm: 0 1px 2px rgba(11, 31, 67, 0.05), 0 2px 6px rgba(11, 31, 67, 0.05);
	--csa-shadow-md: 0 2px 6px rgba(11, 31, 67, 0.05), 0 10px 26px rgba(11, 31, 67, 0.09);
	--csa-shadow-lg: 0 18px 46px rgba(11, 31, 67, 0.17);

	--csa-ease: cubic-bezier(0.2, 0.6, 0.3, 1);

	/* The established container, named so the refresh can line new furniture up
	   with the old without repeating the number. */
	--csa-container: 1170px;
	--csa-gutter: 20px;
}

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

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: var(--csa-body);
}

/* Anchors sit under the header rather than flush with the viewport edge. */
:target {
	scroll-margin-top: 24px;
}

/* An open small-screen menu owns the screen; the page behind it stays put. */
html.csa-nav-locked,
html.csa-nav-locked body {
	overflow: hidden;
}


/*  2  B A S E   A N D   T Y P O G R A P H Y
    ----------------------------------------- */

/* 15px on a 20px line is tight for sustained reading. The established rule sets
   it on `div` as well as `p`, and a directly matching rule beats inheritance, so
   the prose containers have to be named rather than relying on the cascade. */
.contentarea p,
.contentarea ul li,
.contentarea ol li,
.contentarea dd,
.textwidget,
.textwidget p,
.textwidget li,
.entry p,
.entry li,
.module_cont:not(.module_layer_slider):not(.module_google_map) > .module_content,
.module_content p,
.module_content li,
.woocommerce-product-details__short-description,
.woocommerce-product-details__short-description p,
.woocommerce-Tabs-panel p,
.woocommerce-Tabs-panel li {
	font-size: 16.5px;
	line-height: 1.68;
	color: var(--csa-body);
}

.contentarea p,
.textwidget p,
.entry p,
.module_content p {
	margin: 0 0 1.05em 0;
}

/* Keep the established list indents but give the rows room to breathe. */
.contentarea ul li,
.contentarea ol li,
.textwidget li,
.module_content li {
	margin-bottom: 0.45em;
}

/* The established bullet is drawn as a positioned character on a fixed 20px
   line, so it sits high once the text runs on a taller line. */
.contentarea ul li:before {
	line-height: 1.68;
	color: var(--csa-lime-deep);
}

/* That bullet is meant for content lists. The recent-posts widget is a list of
   articles with their own titles and rules, and reads as one. */
.contentarea .rpwwt-widget ul li:before {
	content: none;
}

.contentarea .rpwwt-widget ul li {
	padding-left: 0;
}

/* Headings carry the established sizes. Only the leading, tracking and colour
   change: 40px on a 42px line is set for a display face, not for a UI sans. */
h1,
h2,
h3,
h4,
h5,
h6 {
	letter-spacing: -0.014em;
	text-wrap: balance;
	color: var(--csa-ink);
}

h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span {
	color: inherit;
}

h1,
h2 {
	line-height: 1.14;
}

h3 {
	line-height: 1.2;
}

h4,
h5 {
	line-height: 1.28;
}

h6 {
	line-height: 1.35;
}

/* An uppercase 800 weight closes its counters up if it is tracked in as well. */
h1:not(.title):not(.csa_page_title),
h1:not(.title):not(.csa_page_title) span,
h1:not(.title):not(.csa_page_title) a {
	letter-spacing: 0.005em;
}

/* Module headings introduce a section, so they want space above rather than a
   uniform margin below. */
h3.headInModule,
h5.headInModule {
	margin-bottom: 14px;
}

.contentarea h2:not(.title),
.contentarea h3,
.textwidget h2,
.textwidget h3,
.textwidget h4 {
	margin-top: 1.25em;
	margin-bottom: 0.55em;
}

.contentarea > .row > .span_full:first-child h2.title,
.contentarea h2.title {
	margin-top: 0;
}

/* A section heading inside body copy is marked by a short lime rule rather than
   by size alone, which is what ties a written page to the card and sidebar
   headings elsewhere on the site. */
.textwidget > h3,
.module_content > h3,
.contentarea > .row > .span_full:not(.csa_section_index) > h3 {
	position: relative;
	padding-top: 16px;
}

.textwidget > h3:before,
.module_content > h3:before,
.contentarea > .row > .span_full:not(.csa_section_index) > h3:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 34px;
	height: 3px;
	border-radius: 2px;
	background: var(--csa-lime);
}

/* Long unbroken URLs in link text are what push the search results and the news
   archive sideways on a narrow screen. The established design has carried that
   defect since 2015; wrapping them is the fix. */
.contentarea a,
.textwidget a,
.module_content a,
.sidepanel a,
.rpwwt-widget a {
	overflow-wrap: anywhere;
}

.contentarea,
.textwidget,
.module_content,
.blog_post_preview,
.csa_search_result {
	overflow-wrap: break-word;
}

/* A summary is plain text lifted out of a body, so a bare address in that body
   arrives as one unbreakable word rather than as link text the rule above
   already covers. */
.csa_search_result_text,
.csa_search_result_title {
	overflow-wrap: anywhere;
}

/* Colour alone should not be what marks a link inside a paragraph. The brand
   lime is kept as the rule under the link; the label itself takes a readable
   ink so a page of references is not a page of pale yellow. */
.contentarea p a,
.contentarea li a,
.textwidget p a,
.textwidget li a,
.module_content a:not(.shortcode_button):not(.sowb-button),
.entry p a {
	color: var(--csa-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	text-decoration-color: var(--csa-lime);
	transition: text-decoration-color 200ms var(--csa-ease), color 200ms var(--csa-ease), background-color 200ms var(--csa-ease);
}

.contentarea p a:hover,
.contentarea li a:hover,
.textwidget p a:hover,
.textwidget li a:hover,
.module_content a:not(.shortcode_button):not(.sowb-button):hover,
.entry p a:hover,
.contentarea p a:focus-visible,
.contentarea li a:focus-visible,
.textwidget p a:focus-visible,
.textwidget li a:focus-visible {
	color: var(--csa-navy);
	text-decoration-thickness: 3px;
	text-decoration-color: var(--csa-lime);
}

/* Meta text was set in a grey too light to read comfortably. */
.text_light,
.blog_info span,
.blogpost_meta,
.rpwwt-post-date,
.post-date,
.widget_recent_entries .post-date,
blockquote span {
	color: var(--csa-muted);
}

::selection {
	background: var(--csa-lime);
	color: #1e1e1e;
}

::-moz-selection {
	background: var(--csa-lime);
	color: #1e1e1e;
}

/* The established rules draw the horizontal rule as a 39px tall spacer. Keep the
   geometry, soften the colour. */
hr,
hr.light,
hr.gradient {
	border-top-color: var(--csa-hairline);
}

/* A quote is a change of voice, so it reads as one rather than as a paragraph
   with a slightly larger size. Established content sets the width of a pull
   quote inline, so the rule and the inset have to come out of that width. */
blockquote {
	box-sizing: border-box;
	max-width: 100%;
	margin: 26px 0;
	padding: 4px 0 4px 26px;
	border-left: 3px solid var(--csa-lime);
}

blockquote p {
	font-size: 18px;
	line-height: 1.58;
	color: var(--csa-ink);
}

/*
 * The line under a quote is whatever the author put in the shortcode's
 * `author_name`, which is not always a name. On the team pages it carries a
 * person's qualifications and affiliations: a sixty-word sentence that an
 * attribution treatment set in spaced capitals, where it read as shouting and
 * was materially harder to get through. It stays a quieter second voice than
 * the quote itself without being restyled into a label.
 */
blockquote span {
	display: block;
	margin-top: 10px;
	font-size: 13.5px;
	line-height: 1.55;
	font-weight: 600;
}


/*  R E A D I N G   M E A S U R E
    ----------------------------- */

/*
 * There is no separate prose measure. The column a page is laid out in is the
 * measure: 1170 pixels on a page without a sidebar, 807 to 870 beside one.
 *
 * An earlier revision capped full-width prose at 72ch. On a wide screen that
 * set a paragraph at 679 pixels inside an 1170 pixel column, so the text
 * stopped short while the heading above it, the images beside it and the same
 * paragraph on a page that happened to carry a sidebar all ran wider. The cap
 * was invisible on a laptop and obvious on a desktop, and it differed from one
 * page to the next for no reason a reader could see. Letting the column decide
 * is both wider and consistent.
 */


/*  3  H E A D E R
    --------------- */

header .head_line {
	border-top-width: 3px;
	background: var(--csa-navy);
}

header .top_slogan {
	color: #b9c2d6;
	letter-spacing: 0.015em;
	font-size: 11.5px;
}

header .top_slogan a {
	color: #e9edf5;
	font-weight: 600;
	padding: 2px 1px;
	border-radius: var(--csa-radius-sm);
	transition: color 200ms var(--csa-ease);
}

header .top_slogan a:hover,
header .top_slogan a:focus-visible {
	color: var(--csa-lime);
}

/* The pipes between the account links are punctuation, not content. */
header .top_slogan > span[aria-hidden='true'] {
	color: #4c5f86;
	padding: 0 3px;
}

header .csa_top_tagline {
	color: #93a0bd;
}

header .header_wrapper .call_us {
	color: var(--csa-muted);
	font-style: normal;
	font-size: 13px;
	letter-spacing: 0.01em;
}

header .header_wrapper .call_us a {
	color: var(--csa-navy-deep) !important;
	font-weight: 700;
	white-space: nowrap;
	transition: color 200ms var(--csa-ease);
}

header .header_wrapper .call_us a:hover,
header .header_wrapper .call_us a:focus-visible {
	color: var(--csa-navy) !important;
}

/* A hairline separates the header from the page without the weight of a border
   on the content wrapper. */
header .header_wrapper {
	border-bottom: 1px solid var(--csa-hairline);
}

header nav ul.menu li a {
	position: relative;
	font-size: 13px;
	letter-spacing: 0.055em;
	font-weight: 600;
	color: var(--csa-body);
	transition: color 200ms var(--csa-ease);
}

/* The established rule prints a colon between every navigation item. Spacing
   separates them now, which is quieter and leaves the labels themselves as the
   only thing to read. */
header nav ul.menu li:before,
footer nav ul.menu li:before {
	content: none !important;
}

header nav ul.menu > li {
	margin-left: 26px;
}

/* The established hover fades the label towards the page background, which reads
   as disabled rather than interactive. Move to the brand lime already used for
   the current item, and mark it with a rule so the state is not colour alone. */
header nav ul.menu > li > a::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 22px;
	height: 3px;
	border-radius: 2px;
	background: var(--csa-lime);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 220ms var(--csa-ease);
}

header nav ul.menu > li:hover > a::before,
header nav ul.menu > li:focus-within > a::before,
header nav ul.menu > li.current-menu-item > a::before,
header nav ul.menu > li.current-menu-parent > a::before,
header nav ul.menu > li.current-menu-ancestor > a::before {
	transform: scaleX(1);
}

header nav ul.menu li a:hover,
header nav ul.menu li:hover > a {
	color: var(--csa-ink);
}

header nav ul.menu > li.current-menu-item > a,
header nav ul.menu > li.current-menu-parent > a,
header nav ul.menu > li.current-menu-ancestor > a {
	color: var(--csa-navy) !important;
}

/* Sub-menus were #787878 text on a #1e1e1e panel, which is 2.4:1 and hard to
   read at 13px. They move onto the brand navy already used by the top bar and
   the footer, with text light enough to read at a glance. */
header nav:not(.mobile_header) ul.sub-menu,
header nav:not(.mobile_header) ul.sub-menu li ul.sub-menu {
	background: var(--csa-navy-deep);
	box-shadow: var(--csa-shadow-lg);
}

header nav:not(.mobile_header) ul.sub-menu {
	border-radius: 0 0 var(--csa-radius) var(--csa-radius);
	padding: 8px 0 10px 0;
	min-width: 220px;
}

header nav:not(.mobile_header) ul.sub-menu li ul.sub-menu {
	border-radius: var(--csa-radius);
	padding-top: 10px !important;
	padding-bottom: 10px;
}

header nav:not(.mobile_header) ul.sub-menu li a,
header nav:not(.mobile_header) ul.sub-menu li ul.sub-menu li a {
	color: #dfe5f0 !important;
	font-size: 13px !important;
	letter-spacing: 0.02em;
	padding: 10px 18px !important;
	line-height: 1.4 !important;
	transition: color 180ms var(--csa-ease), background-color 180ms var(--csa-ease), box-shadow 180ms var(--csa-ease);
}

header nav:not(.mobile_header) ul.sub-menu li > a:hover,
header nav:not(.mobile_header) ul.sub-menu li:hover > a,
header nav:not(.mobile_header) ul.sub-menu li ul.sub-menu li > a:hover,
header nav:not(.mobile_header) ul.sub-menu li ul.sub-menu li:hover > a {
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff !important;
	box-shadow: inset 3px 0 0 var(--csa-lime);
}

/* The page a visitor is on is marked in the brand lime rather than by weight. */
header nav:not(.mobile_header) ul.sub-menu li.current-menu-item > a,
header nav:not(.mobile_header) ul.sub-menu li.current-menu-ancestor > a,
header nav:not(.mobile_header) ul.sub-menu li ul.sub-menu li.current-menu-item > a {
	color: var(--csa-lime) !important;
}

/* The pointer that ties an open panel to its parent. It is a list item, so the
   established `header nav ul.sub-menu li` rule pins it into the panel with
   `position: relative !important` and `margin: 0 !important`; without the two
   below it drops inside the panel, off centre, and pushes the first link down. */
header nav:not(.mobile_header) ul.sub-menu .menu_arrow {
	position: absolute !important;
	background: none;
	width: 0;
	height: 0;
	margin: 0 0 0 -6px !important;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 6px solid var(--csa-lime);
	top: -6px;
}

/* A magenta test colour left in the established stylesheet. */
header nav:not(.mobile_header) ul.sub-menu li ul.sub-menu > li:first-child {
	background: none;
}


/*  D R O P D O W N   I N D I C A T O R S
    ------------------------------------- */

/* Nothing told a visitor that Expertise, Services, Resources or About Us open a
   panel. A chevron does, and it turns to point at the panel while it is open. */
header nav ul.menu > li.menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: -3px 0 0 8px;
	vertical-align: middle;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.45;
	transition: opacity 200ms var(--csa-ease), transform 220ms var(--csa-ease), margin-top 220ms var(--csa-ease);
}

header nav ul.menu > li.menu-item-has-children:hover > a::after,
header nav ul.menu > li.menu-item-has-children:focus-within > a::after {
	opacity: 1;
	margin-top: 1px;
	transform: rotate(-135deg);
}

/* A second-level item that opens its own panel points at where it will appear. */
header nav:not(.mobile_header) ul.sub-menu li.menu-item-has-children > a {
	position: relative;
	padding-right: 34px !important;
}

header nav:not(.mobile_header) ul.sub-menu li.menu-item-has-children > a::after {
	content: '';
	position: absolute;
	right: 16px;
	top: 50%;
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.7;
}


/*  4  S M A L L - S C R E E N   N A V I G A T I O N
    ------------------------------------------------- */

/*
 * header.php prints the whole menu, so it works as a plain list of links before
 * any script runs. navigation.js adds `csa-nav-enhanced`, and only then is the
 * menu collapsed behind the button. Nothing here can hide the navigation from a
 * visitor whose scripts did not load.
 */

.csa_nav_toggle {
	display: none;
	align-items: center;
	gap: 10px;
	height: 46px;
	padding: 0 18px 0 15px;
	border: 1px solid var(--csa-rule);
	border-radius: var(--csa-radius-pill);
	background: #ffffff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--csa-navy-deep);
	cursor: pointer;
	transition: border-color 200ms var(--csa-ease), background-color 200ms var(--csa-ease), color 200ms var(--csa-ease), box-shadow 200ms var(--csa-ease);
}

.csa_nav_toggle:hover {
	border-color: var(--csa-navy-deep);
	box-shadow: var(--csa-shadow-sm);
}

.csa_nav_toggle_bars {
	position: relative;
	display: block;
	width: 18px;
	height: 12px;
	flex: none;
}

.csa_nav_toggle_bars span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: var(--csa-navy-deep);
	transition: transform 240ms var(--csa-ease), opacity 160ms var(--csa-ease), background-color 200ms var(--csa-ease);
}

.csa_nav_toggle_bars span:nth-child(1) {
	top: 0;
}

.csa_nav_toggle_bars span:nth-child(2) {
	top: 5px;
}

.csa_nav_toggle_bars span:nth-child(3) {
	top: 10px;
}

/* Open: the bars become the cross that closes it. */
.csa-nav-open .csa_nav_toggle {
	background: var(--csa-navy-deep);
	border-color: var(--csa-navy-deep);
	color: #ffffff;
}

.csa-nav-open .csa_nav_toggle_bars span {
	background: #ffffff;
}

.csa-nav-open .csa_nav_toggle_bars span:nth-child(1) {
	transform: translateY(5px) rotate(45deg);
}

.csa-nav-open .csa_nav_toggle_bars span:nth-child(2) {
	opacity: 0;
}

.csa-nav-open .csa_nav_toggle_bars span:nth-child(3) {
	transform: translateY(-5px) rotate(-45deg);
}

header nav.mobile_header {
	text-align: left;
}

.csa_mobile_menu,
.csa_mobile_menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.csa_mobile_menu li {
	position: relative;
	margin: 0;
	padding: 0;
	float: none;
	display: block;
	border-bottom: 1px solid var(--csa-hairline);
}

.csa_mobile_menu li:before {
	content: none !important;
}

.csa_mobile_menu > li > a {
	display: block;
	padding: 15px 56px 15px 4px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--csa-ink);
	text-decoration: none;
	transition: color 180ms var(--csa-ease);
}

.csa_mobile_menu > li > a:hover,
.csa_mobile_menu > li > a:focus-visible {
	color: var(--csa-navy);
}

.csa_mobile_menu > li.current-menu-item > a,
.csa_mobile_menu > li.current-menu-parent > a,
.csa_mobile_menu > li.current-menu-ancestor > a {
	color: var(--csa-navy);
	box-shadow: inset 3px 0 0 var(--csa-lime);
	padding-left: 14px;
}

/* The disclosure sits beside the section's own link rather than replacing it,
   so a visitor can open the panel or go straight to the landing page. */
.csa_mobile_disclosure {
	position: absolute;
	top: 4px;
	right: 0;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--csa-radius-sm);
	background: transparent;
	cursor: pointer;
	transition: background-color 180ms var(--csa-ease), border-color 180ms var(--csa-ease);
}

.csa_mobile_disclosure:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	margin: -6px 0 0 -4px;
	border-right: 2px solid var(--csa-body);
	border-bottom: 2px solid var(--csa-body);
	transform: rotate(45deg);
	transition: transform 220ms var(--csa-ease), border-color 180ms var(--csa-ease);
}

.csa_mobile_disclosure:hover {
	background: var(--csa-surface);
	border-color: var(--csa-hairline);
}

.csa_mobile_disclosure[aria-expanded='true']:before {
	margin-top: -2px;
	transform: rotate(-135deg);
	border-color: var(--csa-navy);
}

/* The established stylesheet draws every `sub-menu` as a floating panel pinned
   210 pixels wide beside its parent. In the drawer a section opens in place. */
.csa_mobile_menu .sub-menu,
.csa_mobile_menu .sub-menu .sub-menu {
	display: none;
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	width: auto !important;
	min-width: 0;
	margin: 0 0 12px 0 !important;
	padding: 6px 0 6px 14px !important;
	border: none !important;
	border-left: 2px solid var(--csa-lime) !important;
	border-radius: 0 var(--csa-radius-sm) var(--csa-radius-sm) 0;
	background: var(--csa-surface);
	box-shadow: none;
	opacity: 1 !important;
	z-index: auto;
}

.csa_mobile_menu .csa-sub-open > .sub-menu {
	display: block;
}

.csa_mobile_menu .sub-menu li {
	border-bottom: none;
	margin: 0 !important;
	padding: 0 !important;
	width: auto;
}

/*
 * Both drawer tiers are written against the same selector weight.
 *
 * The established stylesheet addresses the two tiers separately and gives the
 * second one more weight than the first: `header nav ul.sub-menu li a` for a
 * child, `header nav ul.sub-menu li ul.sub-menu li a` for a grandchild. A rule
 * written from the drawer class alone outweighs the first and loses to the
 * second, so a second-tier item kept the panel colours meant for a dark
 * dropdown -- #959595 on the drawer's pale grey, turning #ffffff on hover, both
 * of which are all but unreadable there. Naming the drawer's own nav puts every
 * tier above the established chain, whichever tier it was written for.
 */
header nav.mobile_header .csa_mobile_menu .sub-menu a,
header nav.mobile_header .csa_mobile_menu .sub-menu .sub-menu a {
	display: block;
	padding: 10px 12px !important;
	font-size: 14.5px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	letter-spacing: 0;
	text-transform: none;
	color: var(--csa-body) !important;
	text-decoration: none;
	transition: color 180ms var(--csa-ease);
}

header nav.mobile_header .csa_mobile_menu .sub-menu a:hover,
header nav.mobile_header .csa_mobile_menu .sub-menu a:focus-visible,
header nav.mobile_header .csa_mobile_menu .sub-menu li:hover > a,
header nav.mobile_header .csa_mobile_menu .sub-menu .sub-menu a:hover,
header nav.mobile_header .csa_mobile_menu .sub-menu .sub-menu a:focus-visible,
header nav.mobile_header .csa_mobile_menu .sub-menu .sub-menu li:hover > a {
	color: var(--csa-navy) !important;
	background: none;
}

header nav.mobile_header .csa_mobile_menu .sub-menu .current-menu-item > a,
header nav.mobile_header .csa_mobile_menu .sub-menu .sub-menu .current-menu-item > a {
	color: var(--csa-navy) !important;
	font-weight: 700 !important;
}

/* The same magenta test colour the desktop panel already had to undo. */
header nav.mobile_header .csa_mobile_menu .sub-menu .sub-menu > li:first-child {
	background: none;
}

/* A third tier is indented again rather than being drawn as its own panel. */
.csa_mobile_menu .sub-menu .sub-menu {
	margin-bottom: 4px !important;
	border-left-color: var(--csa-rule) !important;
	background: none;
}

/* The panel pointer belongs to the desktop dropdown. */
.csa_mobile_menu .menu_arrow {
	display: none;
}

.csa_mobile_menu .sub-menu .csa_mobile_disclosure {
	top: 0;
	height: 40px;
}

/* The last item's own rule closed the list twenty pixels above the rule that
   opens the section below it, which read as two lines and a gap rather than as
   one divider. The section's rule is the one that means something. */
.csa_mobile_menu > li:last-child {
	border-bottom: none;
}

/* The phone number and the account links, which the top bar squeezes onto one
   line at this size. */
.csa_mobile_meta {
	margin-top: 4px;
	padding-top: 18px;
	border-top: 1px solid var(--csa-hairline);
}

.csa_mobile_call {
	display: inline-flex;
	align-items: center;
	height: 44px;
	padding: 0 20px;
	border-radius: var(--csa-radius-pill);
	background: var(--csa-navy-deep);
	color: #ffffff !important;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: background-color 200ms var(--csa-ease);
}

.csa_mobile_call:hover {
	background: var(--csa-navy);
}

.csa_mobile_account {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin-top: 16px;
}

.csa_mobile_account a {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--csa-muted);
	text-decoration: none;
	transition: color 180ms var(--csa-ease);
}

.csa_mobile_account a:hover,
.csa_mobile_account a:focus-visible {
	color: var(--csa-navy);
}


/*  5  P A G E   H E A D
    --------------------- */

/*
 * The trail and the page title used to be two unrelated things: a grey strip,
 * then a title floating in white forty pixels below it. They are one unit, so
 * they are drawn as one band that opens every page.
 */
.csa_page_head {
	position: relative;
	margin-bottom: 46px;
	padding: 20px 0 34px 0;
	background: linear-gradient(180deg, var(--csa-surface) 0%, #ffffff 100%);
	border-bottom: 1px solid var(--csa-hairline);
}

.csa_page_head:after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 96px;
	height: 3px;
	background: var(--csa-lime);
}

.csa_page_head_inner {
	width: var(--csa-container);
	max-width: 100%;
	margin: 0 auto;
	text-align: left;
	position: relative;
}

.csa_page_head:after {
	left: calc(50% - var(--csa-container) / 2);
}

.csa_page_head_bare {
	padding-top: 30px;
}

/* No title to stand on the band, so it is a trail bar. */
.csa_page_head_trail {
	padding: 14px 0;
	margin-bottom: 40px;
	background: var(--csa-surface);
}

.csa_page_head_trail .breadcrumbs {
	margin-bottom: 0;
}

.csa_page_head_trail:after {
	display: none;
}

.csa_page_title,
h1.title.csa_page_title {
	margin: 0;
	font-size: 44px;
	line-height: 1.1;
	font-weight: 300 !important;
	text-transform: none;
	letter-spacing: -0.024em;
	color: var(--csa-ink);
}

.csa_page_meta {
	margin: 12px 0 0 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--csa-muted);
	letter-spacing: 0.01em;
}

/* Inside the band the trail is a line of navigation, not a strip of its own. */
.csa_page_head .breadcrumbs {
	background: none;
	border: none;
	padding: 0;
	margin: 0 0 16px 0;
}

.breadcrumbs .pathway {
	width: auto;
	margin: 0;
	padding: 0;
}

.breadcrumbs .pathway li {
	font-size: 12.5px;
	line-height: 20px;
	color: var(--csa-muted);
	letter-spacing: 0.01em;
}

.breadcrumbs .pathway li:before {
	color: #b6bec7;
}

.breadcrumbs .pathway li a {
	display: inline-block;
	min-width: 24px;
	min-height: 24px;
	padding: 2px 0;
	line-height: 20px;
	color: var(--csa-muted);
	transition: color 200ms var(--csa-ease);
}

.breadcrumbs .pathway li a:hover,
.breadcrumbs .pathway li a:focus-visible {
	color: var(--csa-navy);
}

.breadcrumbs .pathway li .current {
	color: var(--csa-ink);
	font-weight: 600;
}

/* The archive and search templates used to open with `h1.toptitle`, which the
   retired theme left at the uppercase 800 weight meant for a hero. Both use the
   page head now; the rule stays for any content that still carries the class. */
h1.toptitle,
h1.toptitle span {
	font-size: 34px;
	line-height: 1.15;
	font-weight: 300 !important;
	text-transform: none;
	letter-spacing: -0.018em;
	color: var(--csa-ink);
}

h1.toptitle {
	margin-bottom: 30px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--csa-hairline);
}

/* Established page titles inside the content area, where a template still
   prints one. */
h2.title {
	color: var(--csa-ink);
	margin-bottom: 26px;
}


/*  6  B U T T O N S
    ----------------- */

/*
 * One button, wherever it comes from. The established `custom_button` shortcode,
 * the page builder's own button widget, Ninja Forms, Ultimate Member and
 * WooCommerce each shipped a different control; the books page alone showed two
 * of them side by side. They share a shape, a size and a set of states here, and
 * differ only by whether they are the primary action.
 */
.shortcode_button,
.sowb-button,
.ow-button-base > a,
.feedback_form .feedback_go,
.feedback_form .feedback_reset,
#commentform #reset,
#commentform #submit,
.nf-form-cont .nf-form-content input[type='button'],
.nf-form-cont .nf-form-content input[type='submit'],
.um .um-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.woocommerce #respond input#submit,
.woocommerce-page #respond input#submit {
	border-radius: var(--csa-radius-sm) !important;
	font-family: inherit;
	font-weight: 700 !important;
	letter-spacing: 0.02em;
	text-align: center;
	text-decoration: none !important;
	transition: background-color 220ms var(--csa-ease), color 220ms var(--csa-ease), border-color 220ms var(--csa-ease), box-shadow 220ms var(--csa-ease), transform 220ms var(--csa-ease);
}

/* The established shortcode button floats left, which is what put the books
   page's Read more controls beside their covers instead of beneath them. */
.shortcode_button,
.sowb-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	float: none;
	margin: 6px 8px 6px 0;
	border: 1px solid var(--csa-rule);
	background: #ffffff;
	color: var(--csa-navy-deep);
}

.shortcode_button.btn_small,
.sowb-button {
	min-height: 40px;
	line-height: 1.2;
	font-size: 13.5px;
	padding: 0 20px;
}

.shortcode_button.btn_normal {
	min-height: 46px;
	line-height: 1.2;
	font-size: 15px;
	padding: 0 24px;
}

.shortcode_button.btn_large {
	min-height: 52px;
	line-height: 1.2;
	font-size: 16px;
	padding: 0 30px;
}

/* Every established colour variant collapses onto the two the site actually
   needs. `btn_type6` and the rest carried an orange from the theme this site was
   built on, which belongs to no part of the CSA identity. */
.shortcode_button.btn_type1,
.shortcode_button.btn_type2,
.shortcode_button.btn_type7,
.shortcode_button.btn_type8,
.shortcode_button.btn_type9,
.shortcode_button.btn_type10,
.shortcode_button.btn_type11,
.shortcode_button.btn_type12,
.shortcode_button.btn_type13,
.shortcode_button.btn_type14,
.shortcode_button.btn_type15,
.sowb-button {
	background: #ffffff !important;
	border-color: var(--csa-rule) !important;
	color: var(--csa-navy-deep) !important;
}

.shortcode_button.btn_type3,
.shortcode_button.btn_type4,
.shortcode_button.btn_type5,
.shortcode_button.btn_type6,
.shortcode_button.csa_button_primary {
	background: var(--csa-navy-deep) !important;
	border-color: var(--csa-navy-deep) !important;
	color: #ffffff !important;
}

.shortcode_button:hover,
.shortcode_button:focus-visible,
.sowb-button:hover,
.sowb-button:focus-visible {
	background: var(--csa-navy-deep) !important;
	border-color: var(--csa-navy-deep) !important;
	color: #ffffff !important;
	box-shadow: var(--csa-shadow-md);
	transform: translateY(-1px);
}

.shortcode_button.btn_type3:hover,
.shortcode_button.btn_type4:hover,
.shortcode_button.btn_type5:hover,
.shortcode_button.btn_type6:hover,
.shortcode_button.csa_button_primary:hover {
	background: var(--csa-navy) !important;
	border-color: var(--csa-navy) !important;
}

.shortcode_button:active,
.sowb-button:active {
	transform: translateY(0);
	box-shadow: none;
}

/*
 * The builder's button widget writes a stylesheet of its own into the uploads
 * directory, one per widget instance, and declares its colours `!important`
 * through a three-class selector. Matching that reach is what lets the third
 * book on the Books page carry the same control as the two beside it.
 */
.ow-button-base {
	margin: 6px 0;
}

div[class*='so-widget-sow-button'] .ow-button-base a.sowb-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	box-sizing: border-box;
	padding: 0 20px !important;
	border: 1px solid var(--csa-rule) !important;
	border-radius: var(--csa-radius-sm) !important;
	background: #ffffff !important;
	color: var(--csa-navy-deep) !important;
	font-family: inherit;
	font-size: 13.5px !important;
	font-weight: 700;
	line-height: 1.2 !important;
	letter-spacing: 0.02em;
	text-shadow: none !important;
	text-decoration: none !important;
	transition: background-color 220ms var(--csa-ease), color 220ms var(--csa-ease), border-color 220ms var(--csa-ease), box-shadow 220ms var(--csa-ease), transform 220ms var(--csa-ease);
}

div[class*='so-widget-sow-button'] .ow-button-base a.sowb-button:hover,
div[class*='so-widget-sow-button'] .ow-button-base a.sowb-button:focus-visible {
	background: var(--csa-navy-deep) !important;
	border-color: var(--csa-navy-deep) !important;
	color: #ffffff !important;
	box-shadow: var(--csa-shadow-md);
	transform: translateY(-1px);
}

/*
 * The widget wraps a button's label in a span carrying its own font and
 * background, so the label is reset to the button's own. An icon is a second
 * span inside that one, and it is a glyph rather than text: its character is
 * only drawn by the icon family the widget's stylesheet names. `font: inherit`
 * across every span took that family away and left the Purchase button on the
 * climate change handbook with an empty box where its cart should be, so the
 * reset now names the label alone.
 */
div[class*='so-widget-sow-button'] .ow-button-base a.sowb-button span:not([class*='sow-icon']) {
	display: inline;
	padding: 0;
	background: none;
	color: inherit;
	font: inherit;
}

/* The icon keeps its own family and sits a little clear of the label. */
div[class*='so-widget-sow-button'] .ow-button-base a.sowb-button span[class*='sow-icon'] {
	background: none;
	color: inherit;
	font-size: 1em;
	line-height: 1;
}

div[class*='so-widget-sow-button'] .ow-button-base a.sowb-button .ow-icon-placement-left span[class*='sow-icon'],
div[class*='so-widget-sow-button'] .ow-button-base a.sowb-button.ow-icon-placement-left span[class*='sow-icon'] {
	margin-right: 8px;
}

div[class*='so-widget-sow-button'] .ow-button-base a.sowb-button.ow-icon-placement-right span[class*='sow-icon'] {
	margin-left: 8px;
}

/* Back-to-top control inherited from the established stylesheet. */
.btn2top {
	border-radius: 50%;
	box-shadow: var(--csa-shadow-md);
	transition: background-color 220ms var(--csa-ease), transform 220ms var(--csa-ease);
}

.btn2top:hover {
	transform: translateY(-2px);
}


/*  7  F O R M S
    ------------- */

/* The established fields are 34px tall with a 3px left rule and square corners.
   They keep the accent rule; the box grows to a comfortable target and gains a
   visible focus state. */
.feedback_form .field-name,
.feedback_form .field-email,
.feedback_form .field-subject,
.feedback_form .field-message,
#commentform .form_field,
.um input[type='text'],
.um input[type='email'],
.um input[type='password'],
.um textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row input.input-text,
.woocommerce .quantity input.qty {
	border-radius: var(--csa-radius-sm);
	background: #ffffff;
	transition: border-color 200ms var(--csa-ease), box-shadow 200ms var(--csa-ease);
}

.feedback_form .field-name,
.feedback_form .field-email,
.feedback_form .field-subject,
#commentform .form_field {
	height: 24px;
	padding: 10px 13px;
}

.feedback_form .field-message,
#commentform #comment-message {
	padding: 12px 13px;
}

.um input[type='text'],
.um input[type='email'],
.um input[type='password'],
.um textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row input.input-text {
	border: 1px solid var(--csa-rule) !important;
	border-radius: var(--csa-radius-sm) !important;
	padding: 12px 14px !important;
	font-size: 16px !important;
	line-height: 1.4 !important;
	color: var(--csa-ink) !important;
	background: #ffffff !important;
}

/* Ninja Forms prints its own stylesheet after the theme's and styles fields
   through `.nf-form-content input:not([type=button])`. Matching that reach is
   what lets the contact form share the rest of the site's field treatment. */
.nf-form-cont .nf-form-content input:not([type='button']):not([type='submit']):not([type='checkbox']):not([type='radio']),
.nf-form-cont .nf-form-content textarea,
.nf-form-cont .nf-form-content select,
.nf-form-cont .nf-form-content .list-select-wrap .nf-field-element > div {
	border: 1px solid var(--csa-rule);
	border-radius: var(--csa-radius-sm);
	background: #ffffff;
	padding: 12px 14px;
	font-size: 16px;
	line-height: 1.4;
	color: var(--csa-ink);
	transition: border-color 200ms var(--csa-ease), box-shadow 200ms var(--csa-ease);
}

.feedback_form .field-name:focus,
.feedback_form .field-email:focus,
.feedback_form .field-subject:focus,
.feedback_form .field-message:focus,
#commentform .form_field:focus,
.um input:focus,
.um textarea:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce .quantity input.qty:focus {
	border-color: var(--csa-lime) !important;
	box-shadow: 0 0 0 3px rgba(204, 210, 0, 0.3);
}

.nf-form-cont .nf-form-content input:not([type='button']):not([type='submit']):focus,
.nf-form-cont .nf-form-content textarea:focus,
.nf-form-cont .nf-form-content select:focus {
	border-color: var(--csa-lime);
	box-shadow: 0 0 0 3px rgba(204, 210, 0, 0.3);
}

/* A field that failed validation should not rely on its message alone. */
.nf-form-cont .nf-form-content .nf-error input,
.nf-form-cont .nf-form-content .nf-error textarea {
	border-color: #c0392b;
}

/* Field labels read as part of the form rather than as body copy. */
.nf-form-cont .nf-field-label label,
.um .um-field-label label {
	font-size: 14px !important;
	font-weight: 700 !important;
	color: var(--csa-ink) !important;
	letter-spacing: 0.02em;
}

.nf-form-cont .nf-field-label {
	margin-bottom: 7px;
}

.nf-form-cont .nf-form-fields-required {
	font-size: 13px;
	color: var(--csa-muted);
	margin-bottom: 18px;
}

/* Ninja Forms emits its title inside an `<hundefined>` element, which no browser
   styles as a heading. Give the wrapper the heading treatment instead. */
.nf-form-cont .nf-form-title,
.nf-form-cont .nf-form-title > * {
	display: block;
	font-size: 24px;
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--csa-ink);
}

.nf-form-cont .nf-form-title {
	margin-bottom: 8px;
}

.nf-form-cont .nf-error-msg,
.nf-form-cont .ninja-forms-req-symbol {
	font-size: 13px;
}

.nf-form-cont .nf-error-msg {
	margin-top: 5px;
}

/* The newsletter opt-in is a checkbox beside its label, so the two need to line
   up rather than sit on a shared baseline. */
.nf-form-cont .checkbox-wrap .nf-field-element,
.nf-form-cont .checkbox-wrap .nf-field-label {
	display: inline-block;
	vertical-align: middle;
}

.feedback_form .feedback_go,
.feedback_form .feedback_reset,
#commentform #reset,
#commentform #submit,
.nf-form-cont .nf-form-content input[type='button'],
.nf-form-cont .nf-form-content input[type='submit'] {
	height: auto !important;
	padding: 13px 30px !important;
	font-size: 15px !important;
	line-height: 1.3 !important;
}

/* WooCommerce's established buttons are 13px on a 2px vertical padding, which is
   below a comfortable pointer target and well below a comfortable touch one. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.woocommerce #respond input#submit,
.woocommerce-page #respond input#submit {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	font-size: 14px !important;
	line-height: 20px !important;
	padding: 10px 24px !important;
	background: #ffffff;
	border: 1px solid var(--csa-rule);
	color: var(--csa-navy-deep);
	text-shadow: none !important;
}

/* The primary action on a page carries the brand navy. */
.feedback_form .feedback_go,
#commentform #submit,
.nf-form-cont .nf-form-content input[type='submit'],
.um .um-button,
.woocommerce div.product .single_add_to_cart_button,
.woocommerce .button.alt,
.woocommerce-page .button.alt,
.woocommerce a.checkout-button,
.woocommerce-page a.checkout-button,
.woocommerce #place_order {
	background: var(--csa-navy-deep) !important;
	border: 1px solid var(--csa-navy-deep) !important;
	color: #ffffff !important;
	text-shadow: none !important;
}

.feedback_form .feedback_go:hover,
#commentform #submit:hover,
.nf-form-cont .nf-form-content input[type='submit']:hover,
.um .um-button:hover,
.woocommerce div.product .single_add_to_cart_button:hover,
.woocommerce .button.alt:hover,
.woocommerce-page .button.alt:hover,
.woocommerce a.checkout-button:hover,
.woocommerce-page a.checkout-button:hover,
.woocommerce #place_order:hover {
	background: var(--csa-navy) !important;
	border-color: var(--csa-navy) !important;
	color: #ffffff !important;
}

/* The coupon field sits inline with its button, so it needs the field treatment
   at the button's height rather than the default input size. */
.woocommerce .coupon input#coupon_code,
.woocommerce-page .coupon input#coupon_code {
	border: 1px solid var(--csa-rule) !important;
	border-radius: var(--csa-radius-sm) !important;
	background: #ffffff !important;
	height: 44px !important;
	padding: 0 14px !important;
	font-size: 15px !important;
	color: var(--csa-ink) !important;
}

.woocommerce .coupon input#coupon_code:focus {
	border-color: var(--csa-lime) !important;
	box-shadow: 0 0 0 3px rgba(204, 210, 0, 0.3);
}

/* A control that cannot act yet should look like it. */
.woocommerce button.button:disabled,
.woocommerce button.button[disabled],
.woocommerce input.button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.woocommerce button.button:disabled:hover,
.woocommerce input.button:disabled:hover {
	background: #ffffff;
	border-color: var(--csa-rule);
	color: var(--csa-body);
	box-shadow: none;
	transform: none;
}

/* One primary action per form. Ultimate Member marks its secondary control with
   `um-alt`, so Register reads as the alternative to Login rather than its equal. */
.um .um-button.um-alt {
	background: #ffffff !important;
	border: 1px solid var(--csa-rule) !important;
	color: var(--csa-navy-deep) !important;
}

.um .um-button.um-alt:hover {
	background: var(--csa-surface) !important;
	border-color: var(--csa-navy-deep) !important;
	color: var(--csa-navy-deep) !important;
}

.um .um-link-alt {
	color: var(--csa-body) !important;
	text-decoration: underline;
	text-underline-offset: 0.18em;
	transition: color 200ms var(--csa-ease);
}

/* The colour above has to be important to beat the plugin's own, so the hover
   does too or it never shows. */
.um .um-link-alt:hover {
	color: var(--csa-navy) !important;
}

/* Colours the automated WCAG 2.2 AA checks found below the contrast minimum. */
.um .um-field-checkbox-option {
	color: var(--csa-body) !important;
}

.contentarea a[href^='mailto:'] {
	color: var(--csa-navy) !important;
}

.contentarea :is(h1, h2, h3, h4, h5, h6) a,
.contentarea :is(h1, h2, h3, h4, h5, h6) a em {
	color: var(--csa-navy) !important;
}

/* The established hover on every WooCommerce control is #ff4b28, an orange from
   the theme this site was built on. Secondary controls hover to the brand navy. */
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-page #respond input#submit:hover,
.woocommerce a.button.checkout:hover,
.woocommerce a.button.show_review_form:hover {
	background: var(--csa-navy-deep);
	border-color: var(--csa-navy-deep);
	color: #ffffff;
}

.feedback_form .feedback_go:hover,
#commentform #submit:hover,
.nf-form-cont .nf-form-content input[type='button']:hover,
.nf-form-cont .nf-form-content input[type='submit']:hover,
.um .um-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	box-shadow: var(--csa-shadow-md);
	transform: translateY(-1px);
}

.feedback_form .feedback_go:active,
.nf-form-cont .nf-form-content input[type='submit']:active,
.woocommerce a.button:active,
.woocommerce button.button:active {
	transform: translateY(0);
	box-shadow: none;
}

/* Quantity stepper beside Add to cart. */
.woocommerce .quantity input.qty {
	border: 1px solid var(--csa-rule) !important;
	height: 44px !important;
	padding: 0 6px !important;
	font-size: 15px !important;
	color: var(--csa-ink) !important;
}

/* Checkboxes and radios were left at the browser default size, which is small
   against 16px labels. */
.nf-form-cont .nf-form-content input[type='checkbox'],
.nf-form-cont .nf-form-content input[type='radio'],
.woocommerce input[type='checkbox'],
.um input[type='checkbox'] {
	width: 18px;
	height: 18px;
	padding: 0;
	accent-color: var(--csa-lime);
	-webkit-appearance: checkbox !important;
	appearance: checkbox !important;
}

.nf-form-cont .nf-form-content input[type='radio'] {
	-webkit-appearance: radio !important;
	appearance: radio !important;
}


/*  8  F O C U S
    ------------- */

/* components.css establishes the ring. These give it the same corner radius as
   the control it surrounds, and keep it visible on the navy surfaces. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	border-radius: var(--csa-radius-sm);
	outline-offset: 3px;
}

header .head_line a:focus-visible,
header nav:not(.mobile_header) ul.sub-menu a:focus-visible,
footer a:focus-visible,
footer input:focus-visible {
	outline-color: #ffffff;
}

.skip-link:focus {
	background: var(--csa-navy);
	color: #ffffff;
	padding: 12px 18px;
	border-radius: var(--csa-radius);
	box-shadow: var(--csa-shadow-lg);
	text-decoration: none;
}


/*  9  P R O S E ,   M E D I A   A N D   T A B L E S
    -------------------------------------------------- */

.contentarea figure,
.contentarea .wp-caption {
	margin: 28px 0;
	max-width: 100%;
}

.contentarea figcaption,
.contentarea .wp-caption-text {
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--csa-muted);
}

.featured_image_full img,
.blog_post_preview img,
.contentarea .wp-caption img,
.textwidget img.size-full,
.textwidget img.size-large,
.so-widget-sow-image img {
	border-radius: var(--csa-radius);
}

/* Inline code and preformatted blocks in research write-ups. */
.contentarea code,
.contentarea kbd,
.contentarea samp {
	padding: 2px 6px;
	border: 1px solid var(--csa-hairline);
	border-radius: var(--csa-radius-sm);
	background: var(--csa-surface);
	font-size: 0.92em;
}

.contentarea pre {
	padding: 18px 20px;
	border: 1px solid var(--csa-hairline);
	border-radius: var(--csa-radius);
	background: var(--csa-surface);
	overflow-x: auto;
}

.contentarea pre code {
	padding: 0;
	border: none;
	background: none;
}

/* Content tables inherited no styling at all beyond a collapsed border. */
.contentarea table:not(.shop_table):not(.cart):not(.variations),
.textwidget table {
	width: 100%;
	margin: 0 0 26px 0;
	border: 1px solid var(--csa-hairline);
	border-radius: var(--csa-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-size: 15px;
}

.contentarea table:not(.shop_table):not(.cart):not(.variations) th,
.textwidget table th {
	padding: 13px 16px;
	background: var(--csa-surface);
	border-bottom: 1px solid var(--csa-hairline);
	text-align: left;
	font-weight: 700;
	color: var(--csa-ink);
}

.contentarea table:not(.shop_table):not(.cart):not(.variations) td,
.textwidget table td {
	padding: 13px 16px;
	border-bottom: 1px solid var(--csa-hairline);
	line-height: 1.55;
}

.contentarea table:not(.shop_table):not(.cart):not(.variations) tr:last-child td,
.textwidget table tr:last-child td {
	border-bottom: none;
}

/* A table wider than its column scrolls inside itself rather than pushing the
   page sideways. */
.contentarea .wp-block-table,
.contentarea .csa_table_scroll {
	overflow-x: auto;
}


/*  10  C A R D S
    -------------- */

/*
 * One card. The section index, the books page, the news list and the product
 * grid were four different frames; they share this one so that moving between
 * them feels like moving around a single site.
 */
.csa_section_index {
	margin-top: 34px;
}

/* When the cards replace the body rather than following it, they open the page
   and want no gap above them. */
.csa_section_index:first-child {
	margin-top: 0;
}

.csa_section_index_title,
.csa_eyebrow {
	font-size: 12.5px;
	line-height: 1.3;
	font-weight: 700 !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--csa-lime-deep);
	margin: 0 0 22px 0;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--csa-hairline);
}

.csa_section_cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.csa_section_card {
	margin: 0;
	padding: 0;
	display: flex;
}

.csa_section_card:before {
	content: none !important;
}

.csa_section_card > a {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	padding: 28px 26px 24px 26px;
	border: 1px solid var(--csa-hairline);
	border-radius: var(--csa-radius-lg);
	background: #ffffff;
	box-shadow: var(--csa-shadow-xs);
	text-decoration: none !important;
	overflow: hidden;
	transition: border-color 240ms var(--csa-ease), box-shadow 240ms var(--csa-ease), transform 240ms var(--csa-ease);
}

/* A lime edge that arrives on hover, so the card has somewhere to go. */
.csa_section_card > a:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--csa-lime);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 260ms var(--csa-ease);
}

.csa_section_card > a:hover,
.csa_section_card > a:focus-visible {
	border-color: #d2d9e0;
	box-shadow: var(--csa-shadow-md);
	transform: translateY(-3px);
}

.csa_section_card > a:hover:before,
.csa_section_card > a:focus-visible:before {
	transform: scaleY(1);
}

.csa_section_card_title {
	font-size: 20px;
	line-height: 1.28;
	font-weight: 600;
	color: var(--csa-ink);
	letter-spacing: -0.014em;
}

.csa_section_card_text {
	font-size: 15px;
	line-height: 1.6;
	color: var(--csa-body);
}

/* The whole card is the link, so this reads as an affordance rather than a
   second target. */
.csa_section_card_more {
	margin-top: auto;
	padding-top: 10px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--csa-navy-deep);
}

.csa_section_card_more:after {
	content: '';
	display: inline-block;
	width: 5px;
	height: 5px;
	margin: -1px 0 0 9px;
	vertical-align: middle;
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 240ms var(--csa-ease);
}

.csa_section_card > a:hover .csa_section_card_more:after {
	transform: rotate(45deg) translate(3px, -3px);
}


/*  C O N T E N T   M O D U L E   C A R D S
    --------------------------------------- */

/*
 * The books page is three covers with a control under each, but two of them are
 * established modules and the third is a builder widget, so nothing lined up and
 * the buttons sat beside the covers rather than beneath them. Any module that is
 * a picture and a link gets the same card.
 */
.module_text_area .module_content:has(> img):has(> .shortcode_button) {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	box-sizing: border-box;
	padding: 30px 26px 28px 26px;
	border: 1px solid var(--csa-hairline);
	border-radius: var(--csa-radius-lg);
	background: #ffffff;
	box-shadow: var(--csa-shadow-xs);
	text-align: center;
	transition: border-color 240ms var(--csa-ease), box-shadow 240ms var(--csa-ease), transform 240ms var(--csa-ease);
}

.module_text_area .module_content:has(> img):has(> .shortcode_button):hover {
	border-color: #d2d9e0;
	box-shadow: var(--csa-shadow-md);
	transform: translateY(-3px);
}

/* The covers are supplied at three different heights, so the picture is given a
   slot rather than being allowed to set the height of the card it sits in. */
.module_text_area .module_content:has(> img):has(> .shortcode_button) > img,
.panel-grid-cell:has(> .widget_sow-image + .widget_sow-button) .so-widget-image {
	width: auto !important;
	max-width: 100%;
	height: 400px !important;
	object-fit: contain;
	margin: 0 auto;
	border-radius: var(--csa-radius-sm);
}

.module_text_area .module_content:has(> img):has(> .shortcode_button) > .shortcode_button {
	margin: 0;
}

/* The builder's copy of the same idea: an image widget and a button widget
   stacked in one cell. */
.panel-grid-cell:has(> .widget_sow-image + .widget_sow-button) {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	padding: 28px 24px;
	border: 1px solid var(--csa-hairline);
	border-radius: var(--csa-radius-lg);
	background: #ffffff;
	box-shadow: var(--csa-shadow-xs);
	text-align: center;
	transition: border-color 240ms var(--csa-ease), box-shadow 240ms var(--csa-ease), transform 240ms var(--csa-ease);
}

.panel-grid-cell:has(> .widget_sow-image + .widget_sow-button):hover {
	border-color: #d2d9e0;
	box-shadow: var(--csa-shadow-md);
	transform: translateY(-3px);
}

.panel-grid-cell:has(> .widget_sow-image + .widget_sow-button) .so-panel {
	margin-bottom: 0 !important;
}

.sow-image-container img {
	max-width: 100%;
	height: auto;
}

/* An empty builder cell is spacing, not a column with a border on it, and the
   width it was given belongs to the cells that have something in them. The
   third book sat in a third of the row while the first two took half each. */
.panel-grid-cell-empty {
	padding: 0 !important;
	border: none !important;
	background: none !important;
}

@media only screen and (min-width: 767px) {
	.panel-grid:has(> .panel-grid-cell-empty) > .panel-grid-cell-empty {
		flex: 1 1 0;
		width: auto !important;
		min-width: 0;
	}

	.panel-grid:has(> .panel-grid-cell-empty) > .panel-grid-cell:not(.panel-grid-cell-empty) {
		flex: 0 1 auto;
		width: 48% !important;
	}
}


/*  11  L I S T I N G S ,   A R C H I V E S   A N D   P A G I N A T I O N
    ---------------------------------------------------------------------- */

/*
 * Search results.
 *
 * A result used to be the whole of the page it found, rendered in full, so ten
 * results were ten pages of body copy and a reader scrolled several screens to
 * reach the second one. A result is now a title, the sections it sits under and
 * a couple of lines, which is what makes a list of results scannable — and what
 * lets the two pages called Executive Assessment be told apart.
 */
.csa_search_results {
	display: grid;
	gap: 14px;
	margin-bottom: 30px;
}

.csa_search_result {
	padding: 20px 24px 18px 24px;
	border: 1px solid var(--csa-hairline);
	border-radius: var(--csa-radius-lg);
	background: #ffffff;
	box-shadow: var(--csa-shadow-xs);
	transition: border-color 240ms var(--csa-ease), box-shadow 240ms var(--csa-ease);
}

.csa_search_result:hover {
	border-color: #d2d9e0;
	box-shadow: var(--csa-shadow-sm);
}

.csa_search_result_title {
	margin: 0 0 6px 0;
	font-size: 19px;
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: -0.015em;
}

.csa_search_result_title a {
	color: var(--csa-ink);
	border-bottom: none;
	transition: color 200ms var(--csa-ease);
}

.csa_search_result_title a:hover {
	color: var(--csa-navy);
}

/* Where the result sits. Set small and in the deep lime so it reads as a label
   rather than as the first line of the summary underneath it. */
.csa_search_result_trail {
	margin: 0 0 8px 0;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--csa-lime-deep);
}

.csa_search_result_text {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--csa-body);
}

/* The news archive and the search results were rows separated by a hairline,
   which ran to several screens of undifferentiated text. Each is a card. */
.blog_post_preview {
	position: relative;
	margin-bottom: 24px;
	padding: 28px 30px 26px 30px;
	border: 1px solid var(--csa-hairline);
	border-radius: var(--csa-radius-lg);
	background: #ffffff;
	box-shadow: var(--csa-shadow-xs);
	transition: border-color 240ms var(--csa-ease), box-shadow 240ms var(--csa-ease);
}

.blog_post_preview:hover {
	border-color: #d2d9e0;
	box-shadow: var(--csa-shadow-sm);
}

.blog_post_preview:last-child {
	border-bottom: 1px solid var(--csa-hairline);
}

.blogpost_title h5 {
	font-size: 21px;
	line-height: 1.3;
	font-weight: 600 !important;
	letter-spacing: -0.015em;
	margin-bottom: 12px;
	color: var(--csa-ink);
}

.blogpost_title a h5 {
	transition: color 200ms var(--csa-ease);
}

.blogpost_title a:hover h5 {
	color: var(--csa-navy);
}

/* The format marker beside a post title was a flat grey square holding a small
   PNG glyph, which read as a picture that had failed to load. Every article on
   this site is the same format, so the marker distinguishes nothing. */
.blogpost_title .blog_posttype,
.blog_info.blog_post .blog_posttype {
	display: none;
}

.blogpost_title {
	padding-left: 0 !important;
}

.blog_info {
	border-top: none;
	border-bottom: 1px solid var(--csa-hairline);
	padding-top: 0;
	padding-bottom: 14px;
	margin-bottom: 20px;
	font-size: 12.5px;
	font-style: normal;
	letter-spacing: 0.01em;
}

.blog_info span,
.blog_info a,
.blog_info em,
.blog_info i {
	font-style: normal;
}

.blog_info span:after {
	color: #c1c8d0;
}

.blog_info a {
	color: var(--csa-muted);
	transition: color 200ms var(--csa-ease);
}

.blog_info a:hover {
	color: var(--csa-navy);
}

.blog_post_preview .more-link {
	display: inline-block;
	margin-top: 6px;
	font-style: normal;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--csa-navy-deep);
	text-decoration: none !important;
	transition: color 200ms var(--csa-ease);
}

.blog_post_preview .more-link:after {
	content: '';
	display: inline-block;
	width: 5px;
	height: 5px;
	margin: -1px 0 0 8px;
	vertical-align: middle;
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 220ms var(--csa-ease);
}

.blog_post_preview .more-link:hover:after {
	transform: rotate(45deg) translate(3px, -3px);
}

/* An article opens with its date on a line of its own above the body. */
.blogpost_meta {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--csa-lime-deep);
	margin-bottom: 22px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--csa-hairline);
}

.single .no-sidebar .contentarea > .row > .blogpost_meta {
	max-width: none;
}

.csa_listing_summary {
	color: var(--csa-body);
}

/* Pagination reads as a set of controls rather than bare numbers. */
ul.pagerblock {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 34px 0 0 0;
	padding-top: 26px;
	border-top: 1px solid var(--csa-hairline);
	list-style: none;
}

ul.pagerblock li {
	margin: 0;
	padding: 0;
	float: none;
}

ul.pagerblock li:before {
	content: none !important;
}

ul.pagerblock li a,
ul.pagerblock li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--csa-hairline);
	border-radius: var(--csa-radius-sm);
	background: #ffffff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	color: var(--csa-body);
	text-decoration: none !important;
	transition: background-color 200ms var(--csa-ease), color 200ms var(--csa-ease), border-color 200ms var(--csa-ease);
}

ul.pagerblock li a:hover {
	border-color: var(--csa-navy-deep);
	color: var(--csa-navy-deep);
	background: var(--csa-surface);
}

ul.pagerblock li span.current {
	background: var(--csa-navy-deep);
	border-color: var(--csa-navy-deep);
	color: #ffffff;
	font-weight: 700;
}


/*  12  S I D E B A R   A N D   W I D G E T S
    ------------------------------------------- */

.sidepanel {
	margin-bottom: 26px;
	padding: 24px 24px 22px 24px;
	border: 1px solid var(--csa-hairline);
	border-radius: var(--csa-radius-lg);
	background: #ffffff;
	box-shadow: var(--csa-shadow-xs);
}

/* The search widget is a single control, so it does not need a frame around its
   own frame. Same for a widget that turned out to have nothing to list. */
.sidepanel.widget_search,
.sidepanel:has(> ul:empty),
.sidepanel:has(> h4 + ul:empty) {
	padding: 0;
	border: none;
	background: none;
	box-shadow: none;
}

.sidepanel:has(> ul:empty),
.sidepanel:has(> h4 + ul:empty) {
	display: none;
}

.sidebar_header,
.sidepanel h4.sidebar_header {
	font-size: 15px;
	line-height: 1.3;
	font-weight: 700 !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--csa-ink);
	width: auto;
	padding: 0 0 14px 0;
	margin: 0 0 18px 0;
	position: relative;
}

.sidebar_header:after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 38px;
	height: 3px;
	background: var(--csa-lime);
	border-radius: 2px;
}

/*
 * The spaced capitals above are a label, which is what the list widgets carry:
 * Recent Posts, Archives, Categories. A text widget carries a written heading
 * instead — the Services sidebars open with a question of up to nine words —
 * and a nine-word question set in spaced capitals reads as shouting and is
 * markedly slower to get through. It keeps the rule and the weight and is set
 * as a heading.
 */
.sidepanel.widget_text h4.sidebar_header {
	font-size: 18px;
	line-height: 1.28;
	letter-spacing: -0.01em;
	text-transform: none;
}

/*
 * A list inside a text widget is prose, not navigation, so it keeps its
 * markers. The widget lists elsewhere in the sidebar are rows of links and the
 * established stylesheet strips their markers for that reason, which left the
 * coaching assessments and the five demands of leadership as unseparated runs
 * of text. The marker is the lime the content lists already use.
 */
.sidepanel.widget_text ul {
	list-style: disc;
	padding-left: 1.2em;
	margin: 0 0 1em 0;
}

.sidepanel.widget_text ul li {
	margin-bottom: 0.5em;
}

.sidepanel.widget_text ul li::marker {
	color: var(--csa-lime-deep);
}

/* Continued chapter lists must honour their HTML start number. */
.contentarea ol[start] {
	list-style: decimal;
	padding-left: 2em;
}

.contentarea ol[start] > li {
	display: list-item;
	padding-left: 0;
}

.contentarea ol[start] > li::before {
	content: none;
	counter-increment: none;
}

.sidepanel.widget_text p:last-child,
.sidepanel.widget_text ul:last-child {
	margin-bottom: 0;
}

/* Each row in a widget list was drawn as its own bordered box, so a sidebar of
   five recent posts read as five buttons stacked on top of one another. They
   become rows in a list, marked on hover by the brand rule they already carry. */
.widget_nav_menu ul li a,
.widget_archive ul li a,
.widget_pages ul li a,
.widget_categories ul li,
.widget_recent_entries ul li a,
.widget_meta ul li a {
	border: none;
	border-left: 2px solid transparent;
	border-radius: 0 var(--csa-radius-sm) var(--csa-radius-sm) 0;
	margin-bottom: 0;
	padding: 8px 10px;
	font-size: 15px;
	line-height: 1.45 !important;
	color: var(--csa-body);
	transition: color 200ms var(--csa-ease), border-color 200ms var(--csa-ease), background-color 200ms var(--csa-ease), padding-left 200ms var(--csa-ease);
}

.widget_nav_menu ul li + li a,
.widget_archive ul li + li a,
.widget_pages ul li + li a,
.widget_categories ul li + li,
.widget_recent_entries ul li + li a,
.widget_meta ul li + li a {
	border-top: 1px solid var(--csa-hairline);
}

.sidepanel ul li a:hover,
.widget_archive ul li a:hover,
.widget_categories ul li:hover,
.widget_categories ul li a:hover,
.widget_recent_entries ul li a:hover,
.widget_nav_menu ul li a:hover,
.widget_pages ul li a:hover,
.widget_meta ul li a:hover {
	border-left-color: var(--csa-lime) !important;
	background: var(--csa-surface);
	color: var(--csa-navy) !important;
	padding-left: 14px;
}

/* Recent posts widget. The established rule sets the row gap; these give the
   title, date and excerpt a clear order. */
.rpwwt-widget ul li {
	padding-bottom: 1.4em;
	border-bottom: 1px solid var(--csa-hairline);
}

.rpwwt-widget ul li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.rpwwt-post-title {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.012em;
	color: var(--csa-ink);
	display: inline-block;
	margin-bottom: 4px;
	transition: color 200ms var(--csa-ease);
}

.rpwwt-widget a:hover .rpwwt-post-title {
	color: var(--csa-navy);
}

.rpwwt-post-date {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.5;
	margin-bottom: 6px;
}

.rpwwt-post-excerpt {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--csa-body);
}

.rpwwt-post-excerpt-more {
	font-weight: 700;
}

/* The sidebar is much shorter than the news archive it sits beside, so it
   follows the reader down rather than leaving a column of nothing. */
@media only screen and (min-width: 1025px) {
	.right-sidebar-block .sidebar,
	.left-sidebar-block .sidebar {
		position: sticky;
		top: 24px;
	}
}

/* The archive widget lists every month since 2010. Left whole it is longer than
   most of the pages it sits next to. */
.widget_archive ul,
.widget_categories ul {
	max-height: 320px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-right: 6px;
	scrollbar-width: thin;
}

.widget_archive ul::-webkit-scrollbar,
.widget_categories ul::-webkit-scrollbar {
	width: 8px;
}

.widget_archive ul::-webkit-scrollbar-thumb,
.widget_categories ul::-webkit-scrollbar-thumb {
	border-radius: 4px;
	background: var(--csa-rule);
}

.widget_archive ul::-webkit-scrollbar-track,
.widget_categories ul::-webkit-scrollbar-track {
	background: transparent;
}


/*  13  B U I L D E R   P A N E L S   A N D   T H E   H O M E   P A G E
    --------------------------------------------------------------------- */

/* Builder panels title themselves with `widget-title`. */
.widget-title {
	font-size: 30px;
	line-height: 1.18;
	letter-spacing: -0.022em;
	color: var(--csa-ink);
	position: relative;
	padding-bottom: 18px;
	margin-bottom: 24px;
}

.widget-title:after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 48px;
	height: 3px;
	border-radius: 2px;
	background: var(--csa-lime);
}

/* The home page's opening line and its welcome. The established markup draws a
   rule above and below; they become one composed band. */
.module_promo_text .shortcode_promoblock {
	padding: 8px 0 4px 0;
}

.module_promo_text .shortcode_promoblock h4 {
	font-size: 17.5px;
	line-height: 1.45;
	font-weight: 600 !important;
	letter-spacing: 0.075em;
	text-transform: uppercase;
	color: var(--csa-lime-deep);
	margin-bottom: 14px;
}

.module_promo_text .shortcode_promoblock h1 {
	font-size: 46px;
	line-height: 1.08;
	font-weight: 300 !important;
	letter-spacing: -0.028em;
	text-transform: none;
	margin-bottom: 4px;
}

.module_promo_text .shortcode_promoblock h1 span {
	color: var(--csa-navy) !important;
}

.module_promo_text .shortcode_promoblock hr.top_seperator,
.module_promo_text .shortcode_promoblock hr.bottom_seperator {
	border-top-color: var(--csa-hairline);
}

/*
 * A promo block that opens the page drops its top rule. The header already
 * closes itself with a hairline, so the block's own top rule landed eight
 * pixels below it: two lines too close together to read as anything but a
 * mistake. The bottom rule is the one doing the work, closing the welcome
 * against the showcase beneath it, and it stays.
 *
 * `!important` is answered in kind; the established stylesheet declares every
 * rule in this block `display: block !important`.
 */
.contentarea > .row > .module_promo_text:first-child .shortcode_promoblock hr.top_seperator {
	display: none !important;
}

/* The rule carried a 40px margin under it. Keep the opening the same size. */
.contentarea > .row > .module_promo_text:first-child .shortcode_promoblock {
	padding-top: 40px;
}

/* A builder grid puts its columns edge to edge. A rule says where one ends. */
@media only screen and (min-width: 1025px) {
	.panel-grid > .panel-grid-cell + .panel-grid-cell:not(.panel-grid-cell-empty) {
		border-left: 1px solid var(--csa-hairline);
		padding-left: 38px;
	}

	/* A cell that carries a card of its own already has an edge. */
	.panel-grid > .panel-grid-cell + .panel-grid-cell:has(.rpwwt-widget),
	.panel-grid > .panel-grid-cell + .panel-grid-cell:has(.lshowcase-logos) {
		border-left: none;
		padding-left: 26px;
	}
}

/* The home page's news column is a builder widget rather than a sidebar, so it
   never picked up the panel the rest of the site's lists sit in. */
.panel-grid-cell .rpwwt-widget {
	box-sizing: border-box;
	padding: 26px 26px 24px 26px;
	border: 1px solid var(--csa-hairline);
	border-radius: var(--csa-radius-lg);
	background: #ffffff;
	box-shadow: var(--csa-shadow-xs);
}

.panel-grid-cell .widget:has(> .rpwwt-widget) > .widget-title {
	font-size: 15px;
	font-weight: 700 !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding-bottom: 14px;
	margin-bottom: 20px;
}

.panel-grid-cell .widget:has(> .rpwwt-widget) > .widget-title:after {
	width: 38px;
}

/* The client strip closes the home page, so it is given a surface of its own to
   sit on rather than trailing off the bottom of the body copy. The showcase
   itself, and the plugin that draws it, are untouched. */
.so-panel.lshowcase_widget {
	position: relative;
	margin-top: 20px;
	padding: 46px 40px 40px 40px;
	border: 1px solid var(--csa-hairline);
	border-radius: var(--csa-radius-lg);
	background: linear-gradient(180deg, var(--csa-surface) 0%, #ffffff 100%);
}

.so-panel.lshowcase_widget .widget-title {
	font-size: 15px;
	font-weight: 700 !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--csa-muted);
	text-align: center;
	padding-bottom: 16px;
	margin-bottom: 8px;
}

.so-panel.lshowcase_widget .widget-title:after {
	left: 50%;
	margin-left: -24px;
}

.lshowcase-logos img {
	max-width: 100%;
	height: auto;
}

/* The divider module between the showcase strip and the body copy. */
.module_divider hr.gradient {
	background: linear-gradient(90deg, transparent 0%, var(--csa-hairline) 22%, var(--csa-hairline) 78%, transparent 100%);
	border: none;
	height: 1px;
}


/*  14  W O O C O M M E R C E
    --------------------------- */

/*
 * The product grid was four floated columns sized in percentages that added up
 * to more than the row they sat in, so the shop scrolled sideways at every
 * width between a tablet and the full container. A grid needs no such
 * arithmetic and gives the cards a common height.
 */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 24px;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0 0 32px 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products:before,
.woocommerce ul.products:after {
	content: none;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	float: none !important;
	clear: none !important;
	width: auto !important;
	margin: 0 !important;
}

/* A product in the grid is a card, like everything else in a grid on this site. */
.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: 22px 22px 24px 22px;
	border: 1px solid var(--csa-hairline);
	border-radius: var(--csa-radius-lg);
	background: #ffffff;
	box-shadow: var(--csa-shadow-xs);
	text-align: center;
	transition: border-color 240ms var(--csa-ease), box-shadow 240ms var(--csa-ease), transform 240ms var(--csa-ease);
}

.woocommerce ul.products li.product:hover {
	border-color: #d2d9e0;
	box-shadow: var(--csa-shadow-md);
	transform: translateY(-3px);
}

.woocommerce ul.products li.product a img {
	border-radius: var(--csa-radius-sm);
	margin-bottom: 18px;
	transition: transform 320ms var(--csa-ease);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
	font-size: 17px !important;
	line-height: 1.35;
	font-weight: 600 !important;
	letter-spacing: -0.012em;
	color: var(--csa-ink);
	padding: 0;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--csa-ink);
	font-style: normal;
	font-weight: 700;
}

.woocommerce ul.products li.product .price {
	margin-bottom: 0;
}

.woocommerce ul.products li.product .button {
	align-self: center;
	margin-top: auto;
	padding-top: 14px;
}

/* The established rule draws a grey line beneath every tile. The card has an
   edge of its own. */
.woocommerce ul.products li.product:after,
.woocommerce ul.products li.product .product_line {
	display: none !important;
}

.woocommerce .woocommerce-result-count {
	color: var(--csa-muted);
	font-size: 14px;
	line-height: 42px;
	margin-bottom: 22px;
}

.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering {
	margin-bottom: 22px;
}

.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
	border: 1px solid var(--csa-rule);
	border-radius: var(--csa-radius-sm);
	height: 42px;
	padding: 0 40px 0 14px;
	background-color: #ffffff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%23495562' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	-webkit-appearance: none;
	appearance: none;
	font-size: 15px;
	color: var(--csa-ink);
}

/* A single product: the cover on the left, everything a buyer needs on the
   right. The established title runs two lines into each other. */
.woocommerce div.product .product_title {
	font-size: 34px !important;
	line-height: 1.16 !important;
	font-weight: 300 !important;
	letter-spacing: -0.022em;
	color: var(--csa-ink);
	margin-bottom: 14px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-size: 24px;
	line-height: 1.3;
	margin-bottom: 18px;
}

.woocommerce div.product div.images img {
	border-radius: var(--csa-radius);
}

.woocommerce div.product form.cart {
	margin: 22px 0 24px 0;
}

.woocommerce div.product .product_meta {
	padding-top: 18px;
	border-top: 1px solid var(--csa-hairline);
	font-size: 13px;
	color: var(--csa-muted);
}

.woocommerce div.product .product_meta a {
	color: var(--csa-body);
}

/* Product tabs. */
.woocommerce div.product .woocommerce-tabs {
	margin-top: 34px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0 !important;
	border-bottom: 1px solid var(--csa-hairline);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	border-radius: var(--csa-radius-sm) var(--csa-radius-sm) 0 0;
	border-color: var(--csa-hairline);
	background: var(--csa-surface);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-weight: 600 !important;
	color: var(--csa-body) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--csa-ink) !important;
}

.woocommerce div.product .woocommerce-tabs .panel {
	padding: 26px 28px;
	border: 1px solid var(--csa-hairline);
	border-top: none;
	border-radius: 0 var(--csa-radius) var(--csa-radius) var(--csa-radius);
	background: #ffffff;
}

.woocommerce div.product .woocommerce-tabs .panel > h2:first-child {
	margin-top: 0;
	font-size: 20px;
}

/* Cart and checkout tables. */
.woocommerce table.shop_table {
	border-radius: var(--csa-radius-lg);
	border-color: var(--csa-hairline);
	overflow: hidden;
}

.woocommerce table.shop_table th {
	background: var(--csa-surface);
	color: var(--csa-ink);
	font-weight: 700;
}

.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
	border-color: var(--csa-hairline);
	padding: 14px 16px;
}

.woocommerce .cart_totals h2,
.woocommerce-checkout h3 {
	font-size: 22px;
	letter-spacing: -0.016em;
}

/* WooCommerce's notices default to a cyan that belongs to no part of the CSA
   identity, and print at the width of the page with an oversized inset. */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-message,
.woocommerce-page .woocommerce-info,
.woocommerce-page .woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	border-radius: var(--csa-radius);
	border: 1px solid var(--csa-hairline);
	border-top-color: var(--csa-hairline) !important;
	background: var(--csa-surface);
	padding: 16px 20px !important;
	margin-bottom: 26px !important;
	font-size: 15px;
	line-height: 1.5;
	color: var(--csa-ink);
}

.woocommerce .woocommerce-message,
.woocommerce-page .woocommerce-message {
	border-left: 3px solid var(--csa-lime);
}

.woocommerce .woocommerce-info,
.woocommerce-page .woocommerce-info {
	border-left: 3px solid var(--csa-navy-deep);
}

.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-error {
	border-left: 3px solid #c0392b;
	list-style: none;
}

.woocommerce .woocommerce-message:before,
.woocommerce .woocommerce-info:before,
.woocommerce .woocommerce-error:before {
	display: none;
}

.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-info .button {
	margin-left: auto;
}

/* An empty cart is an empty state, not a full-width table with nothing in it. */
.woocommerce .wc-empty-cart-message,
.woocommerce .return-to-shop {
	max-width: 620px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.woocommerce .wc-empty-cart-message .cart-empty {
	justify-content: center;
}

.woocommerce .return-to-shop {
	margin-top: 4px;
}


/*  15  A C C O U N T S   A N D   G A T E D   C O N T E N T
    --------------------------------------------------------- */

/* Shown in place of a paper download when the visitor is not signed in. */
.csa_members_only {
	display: block;
	margin: 0 0 1em 0;
	padding: 15px 20px;
	border: 1px solid var(--csa-hairline);
	border-left: 3px solid var(--csa-lime);
	border-radius: var(--csa-radius-sm);
	background: var(--csa-surface);
	font-size: 15px;
	line-height: 1.6;
	color: var(--csa-body);
}

.csa_members_only a {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* The login, registration and password pages are a single task, so the form is
   given a card of its own in the middle of the page rather than being left
   floating against the left margin. */
.um {
	max-width: 100% !important;
}

/* The prose rule sets a shorthand margin through `.contentarea p`, which is one
   step more specific than a class on its own, so the centring has to match it. */
.contentarea .csa_account_intro,
.contentarea .csa_account_orders,
.csa_account_intro,
.csa_account_orders {
	box-sizing: border-box;
	max-width: 620px;
	margin-right: auto;
	margin-left: auto;
}

.csa_account_intro {
	margin-bottom: 26px;
	padding: 15px 20px;
	border: 1px solid var(--csa-hairline);
	border-left: 3px solid var(--csa-lime);
	border-radius: var(--csa-radius-sm);
	background: var(--csa-surface);
	font-size: 15px;
	line-height: 1.6;
}

.csa_account_orders {
	margin-top: 40px;
	padding-top: 30px;
	border-top: 1px solid var(--csa-hairline);
}

.um-form {
	box-sizing: border-box;
	max-width: 620px;
	margin: 0 auto;
	padding: 32px 34px 30px 34px;
	border: 1px solid var(--csa-hairline);
	border-radius: var(--csa-radius-lg);
	background: #ffffff;
	box-shadow: var(--csa-shadow-sm);
}

.um-form .um-col-alt,
.um-form .um-col-alt-b {
	text-align: center;
}

/* What a form collects and why, printed by CSA Site Core above the account,
   enquiry, newsletter and checkout fields, and the policy links in the footer.
   The footer links keep a 24 pixel target. */
.csa_collection_notice {
	clear: both;
	margin: 16px 0;
	font-size: 14px;
	line-height: 1.6;
}

.csa_collection_notice p {
	margin: 0 0 8px;
}

.csa_collection_notice a,
.csa_policy_links a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.csa_policy_links a {
	display: inline-block;
	min-height: 24px;
	line-height: 24px;
}

/*
 * The newsletter offer on the registration form. It sits between the last field
 * and the submit button, and is a choice rather than a field, so it is set as a
 * row a visitor can tick anywhere along rather than as a sixth input.
 */
.um-form .csa_newsletter_field {
	margin: 4px 0 22px 0;
	clear: both;
}

.csa_newsletter_option {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid var(--csa-hairline);
	border-radius: var(--csa-radius-sm);
	background: var(--csa-surface);
	cursor: pointer;
	transition: border-color 200ms var(--csa-ease), background-color 200ms var(--csa-ease);
}

.csa_newsletter_option:hover {
	border-color: var(--csa-rule);
	background: var(--csa-surface-sunken);
}

.csa_newsletter_option:focus-within {
	border-color: var(--csa-lime);
	box-shadow: 0 0 0 3px rgba(204, 210, 0, 0.28);
}

/* The established stylesheet sizes every form control to a full-width text
   field, which is what a bare checkbox would otherwise inherit. */
.csa_newsletter_option input[type='checkbox'] {
	flex: none;
	width: 17px !important;
	height: 17px !important;
	min-width: 0;
	margin: 2px 0 0 0 !important;
	padding: 0 !important;
	accent-color: var(--csa-lime-deep);
	cursor: pointer;
}

.csa_newsletter_option_text {
	display: block;
}

.csa_newsletter_option_label {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: var(--csa-ink);
}

.csa_newsletter_option_note {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--csa-muted);
}


/*  16  E M P T Y   S T A T E S
    ----------------------------- */

.csa_empty_state {
	max-width: 620px;
	margin: 10px auto 40px auto;
	padding: 44px 34px 40px 34px;
	border: 1px solid var(--csa-hairline);
	border-radius: var(--csa-radius-lg);
	background: #ffffff;
	box-shadow: var(--csa-shadow-xs);
	text-align: center;
}

.csa_empty_state_code {
	margin: 0 0 6px 0;
	font-size: 62px;
	line-height: 1;
	font-weight: 800;
	letter-spacing: -0.04em;
	color: var(--csa-lime);
}

.csa_empty_state_title,
h1.csa_empty_state_title {
	margin: 0 0 12px 0;
	font-size: 27px;
	line-height: 1.2;
	font-weight: 300 !important;
	text-transform: none;
	letter-spacing: -0.02em;
	color: var(--csa-ink);
}

.csa_empty_state_text {
	margin: 0 auto 26px auto;
	max-width: 46ch;
	font-size: 15.5px !important;
	line-height: 1.6 !important;
	color: var(--csa-body);
}

.csa_empty_state_actions,
.error404_actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: center;
	margin-top: 0;
}

.csa_empty_state_actions .footer_search,
.error404_actions .footer_search {
	position: static;
	width: 240px;
	max-width: 100%;
	height: auto;
	padding: 0;
	border: 1px solid var(--csa-rule);
	border-radius: var(--csa-radius-sm);
	background: #ffffff;
}

.csa_empty_state_actions .footer_search input,
.error404_actions .footer_search input {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	padding: 13px 14px !important;
	font-size: 15px;
	font-style: normal;
	color: var(--csa-ink);
}

.csa_empty_state_actions .shortcode_button,
.error404_actions .shortcode_button {
	margin: 0;
}

/* The established search-icon overlay belongs to the footer bar. */
.csa_empty_state_actions .search_icon,
.error404_actions .search_icon {
	display: none;
}

.oops404 {
	line-height: 1.1;
}

.search_result_item,
.search-results .blog_post_preview {
	border-bottom-color: var(--csa-hairline);
}


/*  17  F O O T E R
    ----------------- */

/*
 * The established footer positions every part of itself absolutely against a
 * 1170px box, so it could not be recomposed without moving each piece by hand.
 * It becomes a grid of two columns and two rows: identity opposite navigation,
 * a rule, then the fine print opposite the things a visitor can act on.
 */
.pre_footer {
	border-top: 1px solid var(--csa-hairline);
}

footer {
	background: var(--csa-navy-deep);
	border-bottom-width: 3px;
}

footer .footer_wrapper {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		'brand  nav'
		'rule   rule'
		'legal  meta';
	align-items: center;
	column-gap: 40px;
	row-gap: 22px;
	padding: 36px 0 32px 0;
}

/* The search field and the social link, kept together at the right. */
footer .footer_meta {
	grid-area: meta;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 20px;
}

/* The rule between the identity row and the fine print. */
footer .footer_wrapper:before {
	content: '';
	grid-area: rule;
	height: 1px;
	background: rgba(255, 255, 255, 0.14);
}

footer .footer_wrapper .logo {
	grid-area: brand;
	justify-self: start;
	align-self: center;
}

footer .footer_wrapper nav {
	grid-area: nav;
	position: static;
	right: auto;
	bottom: auto;
	justify-self: end;
	align-self: center;
	max-width: 100%;
}

footer .copyright {
	grid-area: legal;
	align-self: center;
	color: #b6c0d6;
	font-style: normal;
	font-size: 12.5px;
	line-height: 1.7;
	padding-top: 0;
}

footer .copyright a {
	color: #e6ebf4;
	font-weight: 600;
	transition: color 200ms var(--csa-ease);
}

footer .copyright a:hover {
	color: var(--csa-lime);
}

footer .copyright strong {
	color: #ffffff;
}

/*
 * `csa_modern_search_form` returns the same `.footer_search` markup wherever a
 * search form is asked for, so the control has to read on a white sidebar as
 * well as on the navy footer. The light treatment is the default; the footer
 * takes the dark one.
 */
.footer_search {
	position: static;
	right: auto;
	bottom: auto;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	height: auto;
	/* The established stylesheet ends with a WebKit block that sets this
	   control's vertical padding to 3px over 7px, which every current browser
	   still matches. Left alone it seated the field's own text a few pixels
	   above the middle of the pill, which is what a reader sees as off centre.
	   `!important` is answered in kind because the rule it answers uses it. */
	padding: 0 !important;
	border: 1px solid var(--csa-rule);
	border-radius: var(--csa-radius-pill);
	background: #ffffff;
	transition: border-color 200ms var(--csa-ease), box-shadow 200ms var(--csa-ease), background-color 200ms var(--csa-ease);
}

.footer_search:focus-within {
	border-color: var(--csa-lime);
	box-shadow: 0 0 0 3px rgba(204, 210, 0, 0.28);
}

.footer_search .search_form {
	position: relative;
	display: flex;
	align-items: center;
}

.footer_search input {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	padding: 10px 40px 10px 16px !important;
	background: none;
	border: none;
	font-size: 14px;
	font-style: normal;
	line-height: 20px;
	color: var(--csa-ink);
}

.footer_search input::placeholder {
	color: var(--csa-muted);
}

/* A search input carries a browser-drawn clear control as soon as it holds a
   value, which lands on top of the glass this control already draws. */
.footer_search input::-webkit-search-cancel-button,
.footer_search input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

/*
 * The established markup ships an empty `search_icon` span whose background
 * image is commented out in the stylesheet it came from, so the control
 * reserved room at its right for nothing at all and read as a bare rounded box.
 * Drawing the glass in CSS costs no request and says what the field is for.
 */
.footer_search .search_icon {
	position: absolute;
	/* The widget copy of this control is positioned from the left by the
	   established stylesheet, which put the glass on top of the first letter of
	   the field's own text. Both sides are named so only one of them applies. */
	left: auto;
	right: 15px;
	top: 50%;
	width: 11px;
	height: 11px;
	margin-top: -7px;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	background: none;
	color: var(--csa-muted);
	opacity: 0.75;
	pointer-events: none;
}

.footer_search .search_icon:after {
	content: '';
	position: absolute;
	right: -3px;
	bottom: -4px;
	width: 5px;
	height: 1.5px;
	border-radius: 1px;
	background: currentColor;
	transform: rotate(45deg);
}

/* The search widget declares `width: auto !important` through a two-class
   selector, which shrink-wraps the control to its own placeholder text. */
.sidepanel .footer_search,
.widget_search .footer_search {
	width: 100% !important;
	height: auto !important;
	float: none;
	padding: 0 !important;
	border-color: var(--csa-rule);
}

/* The widget's own box is fixed at the 28px the established field used to be,
   so the control it now holds stood fourteen pixels outside it and the space
   under it closed up. */
.sidepanel.widget_search {
	height: auto;
}

/* The footer's own copy, on navy. */
footer .footer_search {
	width: 230px;
	border-color: rgba(255, 255, 255, 0.22);
	background: rgba(255, 255, 255, 0.06);
}

footer .footer_search:focus-within {
	border-color: var(--csa-lime);
	background: rgba(255, 255, 255, 0.1);
	box-shadow: 0 0 0 3px rgba(204, 210, 0, 0.25);
}

footer .footer_search input {
	color: #e7ebf3;
}

footer .footer_search input::placeholder {
	color: #a9b3c8;
}

footer .footer_search .search_icon {
	color: #a9b3c8;
	opacity: 0.9;
}

footer .footer_socials {
	position: static;
	right: auto;
	bottom: auto;
	margin: 0;
}

footer nav ul.menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px 26px;
}

footer nav ul.menu li {
	float: none;
	margin: 0;
}

footer nav ul.menu li a {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: #ccd4e4;
	transition: color 200ms var(--csa-ease);
}

footer nav ul.menu li a:hover,
footer nav ul.menu li:hover a {
	color: var(--csa-lime) !important;
}

/* The established resting opacity of 0.44 was set for a row of eight icons.
   Only one survives, and at that weight a lone 16px mark beside the search
   field reads as a smudge rather than as a link. */
footer .footer_socials a,
header .headline_socials a {
	border-radius: var(--csa-radius-sm);
	opacity: 0.72;
	transition: opacity 220ms var(--csa-ease);
}


/*  18  B A C K   T O   T O P
    --------------------------- */

.csa_to_top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 90;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid var(--csa-hairline);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: var(--csa-shadow-md);
	cursor: pointer;
	backdrop-filter: blur(6px);
	transition: background-color 220ms var(--csa-ease), border-color 220ms var(--csa-ease), transform 220ms var(--csa-ease), box-shadow 220ms var(--csa-ease);
}

.csa_to_top[hidden] {
	display: none;
}

.csa_to_top:before {
	content: '';
	display: block;
	width: 9px;
	height: 9px;
	margin: 3px auto -3px auto;
	border-left: 2px solid var(--csa-navy-deep);
	border-top: 2px solid var(--csa-navy-deep);
	transform: rotate(45deg);
	transition: border-color 220ms var(--csa-ease);
}

.csa_to_top:hover {
	background: var(--csa-navy-deep);
	border-color: var(--csa-navy-deep);
	transform: translateY(-2px);
	box-shadow: var(--csa-shadow-lg);
}

.csa_to_top:hover:before {
	border-color: #ffffff;
}


/*  C O N T A C T   D E T A I L S
    ----------------------------- */

/* The address, phone and email each sit behind a flat grey square holding a
   PNG glyph. The glyphs are white, so the tile carries the brand navy rather
   than a tint they would disappear into. */
.module_contact_info .continfo_item {
	padding: 8px 0 8px 48px;
	margin-bottom: 10px;
	line-height: 1.6;
}

.module_contact_info .continfo_item span {
	width: 34px;
	height: 34px;
	border-radius: var(--csa-radius-sm);
	background-color: var(--csa-navy-deep);
	background-position: center;
	top: 4px;
}

/* The map is a block of the page like any other picture on it. */
.module_google_map .module_content,
.module_google_map iframe {
	border-radius: var(--csa-radius);
	overflow: hidden;
}

.module_contact_info .continfo_item a {
	font-weight: 600;
}

.contact_info li {
	padding-bottom: 10px;
	line-height: 1.6;
}


/*  19  S M A L L   S C R E E N S
    ------------------------------- */

/*
 * Below the desktop layout the established containers are fixed pixel widths:
 * 760px between 767 and 959, 420px between 459 and 766, 300px under that. The
 * page therefore ignores the actual window. A 600px window shows a 420px column
 * and wastes a third of the screen; at exactly 768px the gutter is 4px; a 390px
 * phone gets a 300px column. These make the same containers fluid with one
 * gutter, which is what the rest of the layout already assumes.
 */
/*
 * The container is 1170 pixels wide with no gutter of its own, so any window
 * between 1025 and 1209 pixels scrolled sideways: the desktop rules had taken
 * over but the window was still narrower than the column they assume. One
 * fluid range covers everything below the full container.
 */
@media only screen and (max-width: 1209px) {
	header .headline_content,
	header .header_wrapper,
	.content_block,
	.csa_page_head_inner,
	#footer_bar,
	footer .footer_wrapper,
	.breadcrumbs .pathway {
		/* Width rather than padding, so the absolutely positioned header and
		   footer furniture still lines up with the gutter. */
		width: calc(100% - 40px) !important;
		max-width: 1170px;
		margin-left: auto;
		margin-right: auto;
	}

	.csa_page_head:after {
		left: 20px;
	}
}

/*  T H E   T A B L E T   A N D   P H O N E   H E A D E R
    ----------------------------------------------------- */

/*
 * The established breakpoint keeps the inline menu down to 767px, where seven
 * uppercase items and their dropdowns are squeezed into whatever is left beside
 * the logo. The menu moves into the drawer for the whole tablet range instead.
 */
@media only screen and (max-width: 1024px) {
	header .header_wrapper {
		display: flex !important;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		position: relative;
		padding: 22px 0 22px 0 !important;
		min-height: 0;
	}

	/* The logo anchor carries its 450 by 65 pixel box as an inline style with
	   `overflow: hidden`, so it clips the mark rather than scaling it. */
	header .header_wrapper .logo {
		position: static !important;
		flex: 0 1 auto;
		margin: 0 !important;
		width: auto !important;
		height: auto !important;
		max-width: calc(100% - 190px);
		overflow: visible;
	}

	header .header_wrapper .logo img {
		width: auto !important;
		max-width: 100%;
		height: auto !important;
	}

	header .header_wrapper .call_us {
		position: static !important;
		order: 3;
		flex: 1 0 100%;
		text-align: left;
		height: auto !important;
	}

	/* The inline menu is replaced by the drawer, not hidden from a visitor: the
	   whole menu is printed inside `nav.mobile_header` below. */
	header .header_wrapper nav:not(.mobile_header) {
		display: none !important;
	}

	.csa_nav_toggle {
		display: inline-flex;
		flex: none;
	}

	header nav.mobile_header {
		display: block !important;
		position: absolute !important;
		left: 0 !important;
		right: 0;
		top: 100% !important;
		/* `header nav` anchors itself to the bottom of the header. Left in place
		   that resolves against `top` and gives the drawer a height of nothing. */
		bottom: auto !important;
		width: auto !important;
		z-index: 70;
		box-sizing: border-box;
		margin-top: 1px;
		padding: 8px 24px 26px 24px;
		border: 1px solid var(--csa-hairline);
		border-radius: 0 0 var(--csa-radius-lg) var(--csa-radius-lg);
		background: #ffffff;
		box-shadow: var(--csa-shadow-lg);
		max-height: calc(100vh - 150px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/* Collapsed only once the script that opens it again has run. */
	.csa-nav-enhanced nav.mobile_header {
		display: none !important;
	}

	.csa-nav-enhanced.csa-nav-open nav.mobile_header {
		display: block !important;
	}

	/* Without the script the drawer is simply the menu, in place. */
	header .header_wrapper:not(.csa-nav-enhanced) nav.mobile_header {
		position: static !important;
		border: none;
		border-top: 1px solid var(--csa-hairline);
		border-radius: 0;
		box-shadow: none;
		padding: 4px 0 0 0;
		max-height: none;
		flex: 1 0 100%;
	}

	header .header_wrapper:not(.csa-nav-enhanced) .csa_mobile_menu .sub-menu {
		display: block;
	}
}

@media only screen and (max-width: 766px) {
	header .head_line {
		height: auto;
		min-height: 40px;
	}

	header .headline_content {
		min-height: 40px;
	}

	header .top_slogan {
		display: block !important;
		position: static;
		padding: 9px 0;
		line-height: 22px;
		text-align: center;
	}

	header .header_wrapper .logo {
		max-width: calc(100% - 76px);
	}

	header .header_wrapper .call_us {
		display: none;
	}

	.csa_nav_toggle {
		padding: 0 16px 0 14px;
	}

	.csa_nav_toggle_label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
	}

	header nav.mobile_header {
		padding: 8px 18px 24px 18px;
	}
}

@media only screen and (max-width: 520px) {
	header .csa_top_tagline {
		display: none;
	}
}

/*
 * The established stylesheet has a block it labels "Killing" that removes the
 * trail, the footer menu, the footer search and the social link below 767 and
 * again below 460. A visitor on a phone was left with no way back up a section
 * and no navigation at the foot of the page at all, which is the size at which
 * those are most useful. They are brought back.
 */
@media only screen and (max-width: 766px) {
	.csa_page_head .breadcrumbs,
	footer nav,
	footer .footer_search,
	.sidepanel .footer_search,
	.csa_empty_state .footer_search {
		display: block !important;
	}

	footer .footer_socials {
		display: flex !important;
	}

	.csa_page_head .pathway li {
		line-height: 1.7;
	}
}

/*  C O N T E N T   A T   T A B L E T   A N D   P H O N E
    ----------------------------------------------------- */

/*
 * The sidebar keeps its share of a fixed 1170 pixel row all the way down, so at
 * 768 pixels the archive, the search box and the recent posts were squeezed
 * into 176 pixels beside the articles. Below the desktop layout it becomes a
 * band under the content instead, with its panels side by side while there is
 * room for them.
 */
@media only screen and (max-width: 1024px) {
	/* The established rules pin these widths through a two-class selector and
	   `!important`, so the reset has to reach as far. */
	.right-sidebar .fl-container,
	.right-sidebar .posts-block,
	.left-sidebar .fl-container,
	.left-sidebar .posts-block,
	.both-sidebars .fl-container,
	.both-sidebars .posts-block,
	.right-sidebar .right-sidebar-block,
	.left-sidebar .left-sidebar-block,
	.both-sidebars .right-sidebar-block,
	.both-sidebars .left-sidebar-block {
		float: none !important;
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.right-sidebar .right-sidebar-block,
	.left-sidebar .left-sidebar-block,
	.both-sidebars .right-sidebar-block,
	.both-sidebars .left-sidebar-block {
		margin-top: 34px !important;
		padding-top: 30px;
		border-top: 1px solid var(--csa-hairline);
	}

	.right-sidebar-block .sidebar,
	.left-sidebar-block .sidebar {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
		gap: 20px;
		align-items: start;
	}

	.right-sidebar-block .sidepanel,
	.left-sidebar-block .sidepanel {
		margin-bottom: 0;
		min-width: 0;
	}
}

@media only screen and (max-width: 1024px) {
	.csa_page_head {
		margin-bottom: 34px;
		padding: 16px 0 26px 0;
	}

	.csa_page_title,
	h1.title.csa_page_title {
		font-size: 34px;
	}

	.widget-title {
		font-size: 26px;
	}

	.module_promo_text .shortcode_promoblock h1 {
		font-size: 36px;
	}

	.module_promo_text .shortcode_promoblock h4 {
		font-size: 15.5px;
	}

	h2.title {
		margin-bottom: 20px;
	}

	.so-panel.lshowcase_widget {
		padding: 34px 24px 30px 24px;
	}

	/* The footer's two columns become one at this size. */
	footer .footer_wrapper {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			'brand'
			'nav'
			'rule'
			'legal'
			'meta';
		row-gap: 22px;
		text-align: left !important;
		padding: 32px 0 30px 0 !important;
	}

	footer .footer_wrapper .logo,
	footer .footer_wrapper nav,
	footer .footer_meta,
	footer .copyright {
		justify-self: start;
	}

	/* Below 767 the established stylesheet centres the footer logo: the anchor
	   is stretched to the column and told to centre its contents, and the mark
	   inside it is given automatic side margins with `!important`. That left the
	   logo floating in the middle of an otherwise left-aligned column. Both are
	   answered, the second in kind. */
	footer .footer_wrapper .logo {
		margin: 0 !important;
		text-align: left !important;
	}

	footer .footer_wrapper .logo img {
		margin: 0 !important;
	}

	footer nav ul.menu {
		justify-content: flex-start;
		gap: 10px 24px;
	}

	footer .copyright {
		text-align: left;
	}

	/* The pair lines up with the column, the field taking the width that is left. */
	footer .footer_meta {
		justify-content: flex-start;
		gap: 16px;
		width: 100%;
	}

	footer .footer_search {
		flex: 1 1 auto;
		width: auto;
		max-width: 320px;
	}
}

@media only screen and (max-width: 766px) {
	.contentarea p,
	.contentarea ul li,
	.contentarea ol li,
	.textwidget,
	.textwidget p,
	.textwidget li,
	.entry p,
	.entry li,
	.module_cont:not(.module_layer_slider):not(.module_google_map) > .module_content,
	.module_content p,
	.module_content li {
		font-size: 16px;
		line-height: 1.62;
	}

	.csa_page_head {
		margin-bottom: 28px;
	}

	.csa_page_title,
	h1.title.csa_page_title {
		font-size: 29px;
	}

	.module_promo_text .shortcode_promoblock h1 {
		font-size: 30px;
	}

	.widget-title {
		font-size: 23px;
		padding-bottom: 14px;
		margin-bottom: 18px;
	}

	.module_cont {
		margin-bottom: 34px !important;
	}

	.sidepanel {
		margin-bottom: 20px;
		padding: 20px 20px 18px 20px;
	}

	/* A meta row of four items wrapped onto two lines needs the room. */
	.blog_info {
		padding-right: 0;
		line-height: 1.8;
	}

	.blog_post_preview {
		margin-bottom: 18px;
		padding: 22px 20px 20px 20px;
	}

	.csa_section_cards {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.csa_section_card > a {
		padding: 22px 20px 20px 20px;
	}

	.csa_empty_state {
		padding: 32px 22px 30px 22px;
	}

	.csa_empty_state_actions .footer_search,
	.error404_actions .footer_search {
		width: 100%;
	}

	.um-form {
		padding: 24px 18px 22px 18px;
	}

	/* A pull quote set to half the column is a column of single words on a
	   phone. The established rules already zero its margins at this size. */
	blockquote.shortcode_blockquote {
		width: 100% !important;
		float: none !important;
	}

	/* The verification widget is a fixed 302 pixels wide whatever is around it. */
	.um-form .g-recaptcha,
	.um-field-recaptcha .um-field-area,
	.nf-form-cont .g-recaptcha,
	.nf-form-cont .nf-field-element > div[class*='recaptcha'] {
		max-width: 100%;
		overflow-x: auto;
	}

	.module_text_area .module_content:has(> img):has(> .shortcode_button),
	.panel-grid-cell:has(> .widget_sow-image + .widget_sow-button) {
		padding: 22px 18px;
	}

	.module_text_area .module_content:has(> img):has(> .shortcode_button) > img,
	.panel-grid-cell:has(> .widget_sow-image + .widget_sow-button) .so-widget-image {
		height: 300px !important;
	}

	.so-panel.lshowcase_widget {
		padding: 28px 18px 24px 18px;
	}

	/* Full-width controls are easier to hit than inline ones on a phone. */
	.nf-form-cont .nf-form-content input[type='submit'],
	.woocommerce div.product .single_add_to_cart_button,
	.csa_empty_state_actions .shortcode_button,
	.error404_actions .shortcode_button {
		width: 100%;
	}

	.woocommerce div.product .product_title {
		font-size: 27px !important;
	}

	.csa_to_top {
		right: 16px;
		bottom: 16px;
	}
}


/*  20  P R I N T
    --------------- */

/* A consultancy's research pages and proposals get printed and sent on. The
   established stylesheet has no print rules at all, so a printed page carried
   the navigation, the footer and a wall of white. */
/*  Sections built in the page builder
    ----------------------------------

    The builder puts its sections into the grid, the buttons and the spacing the
    site already has, so most of what it renders needs nothing here. These are
    the few things it can put on a page that the inherited stylesheet never had
    to draw: a figure with a caption, a disclosure, a rule, deliberate empty
    height and a responsive embed. */

.csa_align_center {
	text-align: center;
}

.csa_align_right {
	text-align: right;
}

.csa_section_action {
	margin: 0;
}

.csa_figure {
	margin: 0;
}

.csa_figure img {
	height: auto;
	max-width: 100%;
}

.csa_figure figcaption {
	color: #6b6b6b;
	font-size: 13px;
	line-height: 1.5;
	margin-top: 8px;
}

.csa_align_center.csa_figure img,
.csa_align_right.csa_figure img {
	display: inline-block;
}

.csa_section_rule {
	background: none;
	border: 0;
	border-top: 1px solid #e2e2e2;
	height: 0;
	margin: 0;
}

.csa_spacer_small {
	height: 20px;
}

.csa_spacer_medium {
	height: 45px;
}

.csa_spacer_large {
	height: 90px;
}

.csa_embed {
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%;
	position: relative;
	width: 100%;
}

.csa_embed_map {
	padding-bottom: 45%;
}

.csa_embed iframe {
	border: 0;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

/* A question is a `details` element, so it opens without any script. The marker
   is drawn rather than left to the browser, which sets its own in each. */
.csa_question {
	border-bottom: 1px solid #e2e2e2;
}

.csa_question:first-child {
	border-top: 1px solid #e2e2e2;
}

.csa_question > summary {
	cursor: pointer;
	display: block;
	font-size: 16px;
	font-weight: 600;
	list-style: none;
	padding: 14px 34px 14px 0;
	position: relative;
}

.csa_question > summary::-webkit-details-marker {
	display: none;
}

.csa_question > summary:after {
	border-bottom: 2px solid #9aa000;
	border-right: 2px solid #9aa000;
	content: '';
	height: 8px;
	position: absolute;
	right: 6px;
	top: 18px;
	transform: rotate(45deg);
	transition: transform 150ms ease-in-out;
	width: 8px;
}

.csa_question[open] > summary:after {
	transform: rotate(-135deg);
	top: 22px;
}

.csa_question > summary:focus-visible {
	outline: 2px solid #2f6f00;
	outline-offset: 2px;
}

.csa_question_answer {
	padding: 0 0 16px;
}

.csa_question_answer > :first-child {
	margin-top: 0;
}

.csa_quote_author {
	margin: 8px 0 0;
}

/* A card with nowhere to go is still a card, but nothing about it should invite
   a click. */
.csa_section_card_plain > div {
	display: block;
	height: 100%;
	padding: 26px 28px 28px;
}

@media (prefers-reduced-motion: reduce) {
	.csa_question > summary:after {
		transition: none;
	}
}

@media print {
	header .head_line,
	header nav,
	nav.mobile_header,
	.csa_nav_toggle,
	.pre_footer,
	footer nav,
	.footer_meta,
	.footer_search,
	.footer_socials,
	.headline_socials,
	.csa_to_top,
	.csa_section_index,
	.right-sidebar-block,
	.left-sidebar-block,
	.module_layer_slider,
	.lshowcase-logos,
	.nf-form-cont,
	.woocommerce-ordering {
		display: none !important;
	}

	body,
	.content_block,
	.csa_page_head_inner,
	header .header_wrapper,
	footer .footer_wrapper {
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		background: #ffffff !important;
		color: #000000 !important;
	}

	.csa_page_head {
		background: none !important;
		border-bottom: 1pt solid #999999;
		margin-bottom: 18pt;
		padding: 0 0 10pt 0;
	}

	.csa_page_head:after {
		display: none;
	}

	.content_wrapper {
		min-height: 0 !important;
	}

	header .header_wrapper {
		padding: 0 0 12pt 0 !important;
		border-bottom: 1pt solid #999999;
	}

	.contentarea p,
	.contentarea li,
	.module_content,
	.textwidget,
	.textwidget p {
		font-size: 11pt !important;
		line-height: 1.45 !important;
		max-width: none !important;
		color: #000000 !important;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		color: #000000 !important;
		page-break-after: avoid;
		break-after: avoid;
	}

	.blog_post_preview,
	.csa_section_card > a,
	.sidepanel,
	figure,
	table,
	blockquote {
		page-break-inside: avoid;
		break-inside: avoid;
		box-shadow: none !important;
	}

	/* A printed link is only useful if its address comes with it. */
	.contentarea a[href^='http']:after,
	.textwidget a[href^='http']:after {
		content: ' (' attr(href) ')';
		font-size: 9pt;
		word-break: break-all;
	}

	footer {
		background: none !important;
		border: none !important;
		border-top: 1pt solid #999999 !important;
	}

	footer .footer_wrapper {
		display: block;
	}

	footer .copyright,
	footer .copyright a {
		color: #000000 !important;
	}
}