#main h1 {
	margin-bottom: 0.1em
}

/*
	Twenty by HTML5 UP — CPR-CA Variable Edition (main-cpr.css)
	Drop-in replacement for main.css with all hardcoded colours replaced by CSS variables.
	To change the site's colour scheme, edit the :root variables below only.
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

/* ─── Self-hosted Inter (variable font: every weight 100–900) ─────────────── */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../webfonts/InterVariable.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url('../webfonts/InterVariable-Italic.woff2') format('woff2');
}

/* ─── Colour Variables ────────────────────────────────────────────────────── */

:root {

	/* Primary palette */
	--color-primary-dark: hsl(6, 63%, 26%);
	--color-primary: hsl(6, 63%, 46%);
	--color-primary-light: hsl(6, 63%, 56%);
	--color-primary-light-hover: hsl(6, 63%, 56%);
	--color-primary-lighter: hsl(6, 63%, 66%);
	--color-primary-lightest: hsl(6, 63%, 86%);

	--color-accent: hsl(44, 55%, 75%);

	/* Secondaries: colors covering most areas */
	/*original*/

	--color-secondary-darkest: hsl(219, 36%, 23%);

	--color-secondary-dark: hsl(219, 36%, 33%);

	--color-secondary: hsl(219, 36%, 43%);

	--color-secondary-light: hsl(219, 36%, 53%);

	--color-secondary-lighter: hsl(219, 36%, 63%);

	--color-secondary-lightest: hsl(219, 36%, 83%);


	/*inspired by modal background: way too bright i.e. not muted enough*/
	/* --color-secondary-darkest: hsl(211, 56%,23%);

	--color-secondary-dark: hsl(211, 56%,  28%);

	--color-secondary: hsl(211, 56%, 43%);

	--color-secondary-light: hsl(221, 56%, 53%);

	--color-secondary-lighter: hsl(221, 56%, 63%);

	--color-secondary-lightest: hsl(211, 56%, 83%); */



	/* Text */
	/* main body text */
	--color-text: #272727;
	/* main body text - muted */
	--color-muted: #7c8081;
	/*footer text */
	--color-text-light: #eeeeee;
	/* secondary text, table header bg, footer text */
	--color-bg-white: #ffffff;
	/* white — used on many backgrounds and as text on dark */

	/* BACKGROUNDS */
	/* page background */
	--color-bg: #f3f6fa;

	--color-bg-subtle: #f8f8f8;
	--color-bg-code: #eeeeee;


	/* banner + CTA background */
	--color-banner-overlay: rgba(26, 58, 92, 0.8);
	/* secondary-dark at 60% */
	/* semi-transparent overlay on banner inner */

	/* Borders & shadows */
	--color-border: rgba(124, 128, 129, 0.2);
	/* standard subtle border */
	--color-border-faint: rgba(124, 128, 129, 0.1);
	/* even fainter border (mobile nav) */
	--color-shadow: rgba(0, 0, 0, 0.2);
	/* header box shadow */

	/* Interactive */
	--color-button-hover: rgba(188, 202, 206, 0.15);
	/* button hover bg */
	--color-white-hover: rgba(255, 255, 255, 0.15);
	/* toggle button hover bg - for collapsable sections */
	--color-toggle-button-hover: rgba(209, 221, 239, 0.85);
	/* white hover bg (on dark sections) */

	/* Mobile nav */
	--color-nav-mobile-bg: #1c2021;
	/* mobile nav panel background */
	--color-nav-mobile-border: rgba(255, 255, 255, 0.05);
	/* mobile nav item border */
	--color-nav-mobile-hover: rgba(163, 169, 170, 0.75);
	/* mobile nav item hover */



}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}

body {
	line-height: 1;
}

ol,
ul {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	-webkit-text-size-adjust: none;
}

mark {
	background-color: transparent;
	color: inherit;
}

input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input,
select,
textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

/* Basic */

html {
	box-sizing: border-box;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

body {
	background: var(--color-bg);
}

body.is-preload *,
body.is-preload *:before,
body.is-preload *:after {
	-moz-animation: none !important;
	-webkit-animation: none !important;
	-ms-animation: none !important;
	animation: none !important;
	-moz-transition: none !important;
	-webkit-transition: none !important;
	-ms-transition: none !important;
	transition: none !important;
}

html {
	font-size: 15pt;
}

body,
input,
select,
textarea {
	color: var(--color-text);
	font-family: 'Inter', sans-serif;
	font-size: 1rem;
	font-weight: 450;
	letter-spacing: 0.025em;
	line-height: 1.75em;
}

a {
	-moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
	-webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
	-ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
	transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
	color: var(--color-primary);
	text-decoration: none;
	border-bottom: dotted 1px;
}

a:hover {
	border-bottom-color: transparent;
}

/* ─── Text weights and accents ─────────────────────────── */

b {
	font-weight: 780;
}

strong {
	font-weight: 900;
}

.text-accented {
	font-weight: 780;
	color: var(--color-primary);
}

.note {
	display: block;
	/* new line, no number (it's not an <li>) */
	font-style: italic;
	/* restores italic that the reset stripped */
	margin-top: 0.25rem;
	font-size: 0.85em;
	color: var(--color-secondary-light);
}


/* ─── Font-weight utilities (Inter variable: full 100–900 range) ─────────── */

.fw-100 {
	font-weight: 100;
}

.fw-200 {
	font-weight: 200;
}

.fw-300 {
	font-weight: 300;
}

.fw-400 {
	font-weight: 400;
}

.fw-500 {
	font-weight: 500;
}

.fw-600 {
	font-weight: 600;
}

.fw-700 {
	font-weight: 700;
}

.fw-800 {
	font-weight: 800;
}

.fw-900 {
	font-weight: 900;
}



p,
ul,
ol,
dl,
table,
blockquote {
	margin: 0 0 1.5em 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: inherit;
	font-weight: 600;
	line-height: 1.75em;
	margin-bottom: 1em;
	/* text-transform: uppercase; */
}


h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
	color: inherit;
	text-decoration: none;
	border: 0;
}

h1 {
	/* font-size: clamp(1.25rem, 0.81rem + 1.1vw, 1.5rem); */
	/* Modest — h1 about 1.33× h2 */
	/* 30px → 40px */
	/* font-size: clamp(1.5rem, 0.62rem + 2.2vw, 2rem); */
	/* Balanced — clear hierarchy */
	/* 32px → 48px */
	font-size: clamp(1.6rem, 0.5rem + 2.75vw, 2.4rem);
	/* Bold — strong display heading */
	/* 35px → 60px */
	/* font-size: clamp(1.75rem, 0.35rem + 3.5vw, 3rem); */

	letter-spacing: 0.04em;
	word-spacing: 0.2rem;
	color: var(--color-primary);
}

h2 {
	font-size: clamp(1.25rem, 0.81rem + 1.1vw, 1.5rem);
	letter-spacing: 0.1em;
}

h3 {
	font-size: clamp(1rem, 0.74rem + 0.65vw, 1.15rem);
	letter-spacing: 0.025em;
}

sub {
	font-size: 0.8em;
	position: relative;
	top: 0.5em;
}

sup {
	font-size: 0.8em;
	position: relative;
	top: -0.5em;
}

hr {
	border: 0;
	border-top: solid 1px var(--color-border);
	margin-bottom: 1.5em;
}

blockquote {
	border-left: solid 0.5em var(--color-border);
	font-style: italic;
	padding: 1em 0 1em 2em;
}

/* Container */

.container {
	margin: 0 auto;
	max-width: 100%;
	width: 1400px;
}

.container.medium {
	width: 1050px;
}

@media screen and (max-width: 1680px) {

	.container {
		width: 1200px;
	}

	.container.medium {
		width: 900px;
	}

}

@media screen and (max-width: 1280px) {

	.container {
		width: 960px;
	}

	.container.medium {
		width: 735px;
	}

}

@media screen and (max-width: 980px) {

	.container {
		width: 95%;
	}

	.container.medium {
		width: 71.25%;
	}

}

@media screen and (max-width: 840px) {

	.container {
		width: 95%;
	}

	.container.medium {
		width: 95%;
	}

}

@media screen and (max-width: 736px) {

	.container {
		width: 100%;
	}

	.container.medium {
		width: 100%;
	}
}

/* Row */

.row {
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	align-items: stretch;
}

.row>* {
	box-sizing: border-box;
}

.row.gtr-uniform>*> :last-child {
	margin-bottom: 0;
}

.row.aln-left {
	justify-content: flex-start;
}

.row.aln-center {
	justify-content: center;
}

.row.aln-right {
	justify-content: flex-end;
}

.row.aln-top {
	align-items: flex-start;
}

.row.aln-middle {
	align-items: center;
}

.row.aln-bottom {
	align-items: flex-end;
}

.row>.imp {
	order: -1;
}

.row>.col-1 {
	width: 8.33333%;
}

.row>.off-1 {
	margin-left: 8.33333%;
}

.row>.col-2 {
	width: 16.66667%;
}

.row>.off-2 {
	margin-left: 16.66667%;
}

.row>.col-3 {
	width: 25%;
}

.row>.off-3 {
	margin-left: 25%;
}

.row>.col-4 {
	width: 33.33333%;
}

.row>.off-4 {
	margin-left: 33.33333%;
}

.row>.col-5 {
	width: 41.66667%;
}

.row>.off-5 {
	margin-left: 41.66667%;
}

.row>.col-6 {
	width: 50%;
}

.row>.off-6 {
	margin-left: 50%;
}

.row>.col-7 {
	width: 58.33333%;
}

.row>.off-7 {
	margin-left: 58.33333%;
}

.row>.col-8 {
	width: 66.66667%;
}

.row>.off-8 {
	margin-left: 66.66667%;
}

.row>.col-9 {
	width: 75%;
}

.row>.off-9 {
	margin-left: 75%;
}

.row>.col-10 {
	width: 83.33333%;
}

.row>.off-10 {
	margin-left: 83.33333%;
}

.row>.col-11 {
	width: 91.66667%;
}

.row>.off-11 {
	margin-left: 91.66667%;
}

.row>.col-12 {
	width: 100%;
}

.row>.off-12 {
	margin-left: 100%;
}

.row.gtr-0 {
	margin-top: 0px;
	margin-left: 0px;
}

.row.gtr-0>* {
	padding: 0px 0 0 0px;
}

.row.gtr-0.gtr-uniform {
	margin-top: 0px;
}

.row.gtr-0.gtr-uniform>* {
	padding-top: 0px;
}

.row.gtr-25 {
	margin-top: -12.5px;
	margin-left: -12.5px;
}

.row.gtr-25>* {
	padding: 12.5px 0 0 12.5px;
}

.row.gtr-25.gtr-uniform {
	margin-top: -12.5px;
}

.row.gtr-25.gtr-uniform>* {
	padding-top: 12.5px;
}

.row.gtr-50 {
	margin-top: -25px;
	margin-left: -25px;
}

.row.gtr-50>* {
	padding: 25px 0 0 25px;
}

.row.gtr-50.gtr-uniform {
	margin-top: -25px;
}

.row.gtr-50.gtr-uniform>* {
	padding-top: 25px;
}

.row {
	margin-top: -50px;
	margin-left: -50px;
}

.row>* {
	padding: 50px 0 0 50px;
}

.row.gtr-uniform {
	margin-top: -50px;
}

.row.gtr-uniform>* {
	padding-top: 50px;
}

.row.gtr-150 {
	margin-top: -75px;
	margin-left: -75px;
}

.row.gtr-150>* {
	padding: 75px 0 0 75px;
}

.row.gtr-150.gtr-uniform {
	margin-top: -75px;
}

.row.gtr-150.gtr-uniform>* {
	padding-top: 75px;
}

.row.gtr-200 {
	margin-top: -100px;
	margin-left: -100px;
}

.row.gtr-200>* {
	padding: 100px 0 0 100px;
}

.row.gtr-200.gtr-uniform {
	margin-top: -100px;
}

.row.gtr-200.gtr-uniform>* {
	padding-top: 100px;
}

@media screen and (max-width: 1680px) {

	.row {
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		align-items: stretch;
	}

	.row>* {
		box-sizing: border-box;
	}

	.row.gtr-uniform>*> :last-child {
		margin-bottom: 0;
	}

	.row.aln-left {
		justify-content: flex-start;
	}

	.row.aln-center {
		justify-content: center;
	}

	.row.aln-right {
		justify-content: flex-end;
	}

	.row.aln-top {
		align-items: flex-start;
	}

	.row.aln-middle {
		align-items: center;
	}

	.row.aln-bottom {
		align-items: flex-end;
	}

	.row>.imp-wide {
		order: -1;
	}

	.row>.col-1-wide {
		width: 8.33333%;
	}

	.row>.off-1-wide {
		margin-left: 8.33333%;
	}

	.row>.col-2-wide {
		width: 16.66667%;
	}

	.row>.off-2-wide {
		margin-left: 16.66667%;
	}

	.row>.col-3-wide {
		width: 25%;
	}

	.row>.off-3-wide {
		margin-left: 25%;
	}

	.row>.col-4-wide {
		width: 33.33333%;
	}

	.row>.off-4-wide {
		margin-left: 33.33333%;
	}

	.row>.col-5-wide {
		width: 41.66667%;
	}

	.row>.off-5-wide {
		margin-left: 41.66667%;
	}

	.row>.col-6-wide {
		width: 50%;
	}

	.row>.off-6-wide {
		margin-left: 50%;
	}

	.row>.col-7-wide {
		width: 58.33333%;
	}

	.row>.off-7-wide {
		margin-left: 58.33333%;
	}

	.row>.col-8-wide {
		width: 66.66667%;
	}

	.row>.off-8-wide {
		margin-left: 66.66667%;
	}

	.row>.col-9-wide {
		width: 75%;
	}

	.row>.off-9-wide {
		margin-left: 75%;
	}

	.row>.col-10-wide {
		width: 83.33333%;
	}

	.row>.off-10-wide {
		margin-left: 83.33333%;
	}

	.row>.col-11-wide {
		width: 91.66667%;
	}

	.row>.off-11-wide {
		margin-left: 91.66667%;
	}

	.row>.col-12-wide {
		width: 100%;
	}

	.row>.off-12-wide {
		margin-left: 100%;
	}

	.row.gtr-0 {
		margin-top: 0px;
		margin-left: 0px;
	}

	.row.gtr-0>* {
		padding: 0px 0 0 0px;
	}

	.row.gtr-0.gtr-uniform {
		margin-top: 0px;
	}

	.row.gtr-0.gtr-uniform>* {
		padding-top: 0px;
	}

	.row.gtr-25 {
		margin-top: -10px;
		margin-left: -10px;
	}

	.row.gtr-25>* {
		padding: 10px 0 0 10px;
	}

	.row.gtr-25.gtr-uniform {
		margin-top: -10px;
	}

	.row.gtr-25.gtr-uniform>* {
		padding-top: 10px;
	}

	.row.gtr-50 {
		margin-top: -20px;
		margin-left: -20px;
	}

	.row.gtr-50>* {
		padding: 20px 0 0 20px;
	}

	.row.gtr-50.gtr-uniform {
		margin-top: -20px;
	}

	.row.gtr-50.gtr-uniform>* {
		padding-top: 20px;
	}

	.row {
		margin-top: -40px;
		margin-left: -40px;
	}

	.row>* {
		padding: 40px 0 0 40px;
	}

	.row.gtr-uniform {
		margin-top: -40px;
	}

	.row.gtr-uniform>* {
		padding-top: 40px;
	}

	.row.gtr-150 {
		margin-top: -60px;
		margin-left: -60px;
	}

	.row.gtr-150>* {
		padding: 60px 0 0 60px;
	}

	.row.gtr-150.gtr-uniform {
		margin-top: -60px;
	}

	.row.gtr-150.gtr-uniform>* {
		padding-top: 60px;
	}

	.row.gtr-200 {
		margin-top: -80px;
		margin-left: -80px;
	}

	.row.gtr-200>* {
		padding: 80px 0 0 80px;
	}

	.row.gtr-200.gtr-uniform {
		margin-top: -80px;
	}

	.row.gtr-200.gtr-uniform>* {
		padding-top: 80px;
	}

}

@media screen and (max-width: 1280px) {

	.row {
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		align-items: stretch;
	}

	.row>* {
		box-sizing: border-box;
	}

	.row.gtr-uniform>*> :last-child {
		margin-bottom: 0;
	}

	.row.aln-left {
		justify-content: flex-start;
	}

	.row.aln-center {
		justify-content: center;
	}

	.row.aln-right {
		justify-content: flex-end;
	}

	.row.aln-top {
		align-items: flex-start;
	}

	.row.aln-middle {
		align-items: center;
	}

	.row.aln-bottom {
		align-items: flex-end;
	}

	.row>.imp-normal {
		order: -1;
	}

	.row>.col-1-normal {
		width: 8.33333%;
	}

	.row>.off-1-normal {
		margin-left: 8.33333%;
	}

	.row>.col-2-normal {
		width: 16.66667%;
	}

	.row>.off-2-normal {
		margin-left: 16.66667%;
	}

	.row>.col-3-normal {
		width: 25%;
	}

	.row>.off-3-normal {
		margin-left: 25%;
	}

	.row>.col-4-normal {
		width: 33.33333%;
	}

	.row>.off-4-normal {
		margin-left: 33.33333%;
	}

	.row>.col-5-normal {
		width: 41.66667%;
	}

	.row>.off-5-normal {
		margin-left: 41.66667%;
	}

	.row>.col-6-normal {
		width: 50%;
	}

	.row>.off-6-normal {
		margin-left: 50%;
	}

	.row>.col-7-normal {
		width: 58.33333%;
	}

	.row>.off-7-normal {
		margin-left: 58.33333%;
	}

	.row>.col-8-normal {
		width: 66.66667%;
	}

	.row>.off-8-normal {
		margin-left: 66.66667%;
	}

	.row>.col-9-normal {
		width: 75%;
	}

	.row>.off-9-normal {
		margin-left: 75%;
	}

	.row>.col-10-normal {
		width: 83.33333%;
	}

	.row>.off-10-normal {
		margin-left: 83.33333%;
	}

	.row>.col-11-normal {
		width: 91.66667%;
	}

	.row>.off-11-normal {
		margin-left: 91.66667%;
	}

	.row>.col-12-normal {
		width: 100%;
	}

	.row>.off-12-normal {
		margin-left: 100%;
	}

	.row.gtr-0 {
		margin-top: 0px;
		margin-left: 0px;
	}

	.row.gtr-0>* {
		padding: 0px 0 0 0px;
	}

	.row.gtr-0.gtr-uniform {
		margin-top: 0px;
	}

	.row.gtr-0.gtr-uniform>* {
		padding-top: 0px;
	}

	.row.gtr-25 {
		margin-top: -10px;
		margin-left: -10px;
	}

	.row.gtr-25>* {
		padding: 10px 0 0 10px;
	}

	.row.gtr-25.gtr-uniform {
		margin-top: -10px;
	}

	.row.gtr-25.gtr-uniform>* {
		padding-top: 10px;
	}

	.row.gtr-50 {
		margin-top: -20px;
		margin-left: -20px;
	}

	.row.gtr-50>* {
		padding: 20px 0 0 20px;
	}

	.row.gtr-50.gtr-uniform {
		margin-top: -20px;
	}

	.row.gtr-50.gtr-uniform>* {
		padding-top: 20px;
	}

	.row {
		margin-top: -40px;
		margin-left: -40px;
	}

	.row>* {
		padding: 40px 0 0 40px;
	}

	.row.gtr-uniform {
		margin-top: -40px;
	}

	.row.gtr-uniform>* {
		padding-top: 40px;
	}

	.row.gtr-150 {
		margin-top: -60px;
		margin-left: -60px;
	}

	.row.gtr-150>* {
		padding: 60px 0 0 60px;
	}

	.row.gtr-150.gtr-uniform {
		margin-top: -60px;
	}

	.row.gtr-150.gtr-uniform>* {
		padding-top: 60px;
	}

	.row.gtr-200 {
		margin-top: -80px;
		margin-left: -80px;
	}

	.row.gtr-200>* {
		padding: 80px 0 0 80px;
	}

	.row.gtr-200.gtr-uniform {
		margin-top: -80px;
	}

	.row.gtr-200.gtr-uniform>* {
		padding-top: 80px;
	}

}

@media screen and (max-width: 980px) {

	.row {
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		align-items: stretch;
	}

	.row>* {
		box-sizing: border-box;
	}

	.row.gtr-uniform>*> :last-child {
		margin-bottom: 0;
	}

	.row.aln-left {
		justify-content: flex-start;
	}

	.row.aln-center {
		justify-content: center;
	}

	.row.aln-right {
		justify-content: flex-end;
	}

	.row.aln-top {
		align-items: flex-start;
	}

	.row.aln-middle {
		align-items: center;
	}

	.row.aln-bottom {
		align-items: flex-end;
	}

	.row>.imp-narrow {
		order: -1;
	}

	.row>.col-1-narrow {
		width: 8.33333%;
	}

	.row>.off-1-narrow {
		margin-left: 8.33333%;
	}

	.row>.col-2-narrow {
		width: 16.66667%;
	}

	.row>.off-2-narrow {
		margin-left: 16.66667%;
	}

	.row>.col-3-narrow {
		width: 25%;
	}

	.row>.off-3-narrow {
		margin-left: 25%;
	}

	.row>.col-4-narrow {
		width: 33.33333%;
	}

	.row>.off-4-narrow {
		margin-left: 33.33333%;
	}

	.row>.col-5-narrow {
		width: 41.66667%;
	}

	.row>.off-5-narrow {
		margin-left: 41.66667%;
	}

	.row>.col-6-narrow {
		width: 50%;
	}

	.row>.off-6-narrow {
		margin-left: 50%;
	}

	.row>.col-7-narrow {
		width: 58.33333%;
	}

	.row>.off-7-narrow {
		margin-left: 58.33333%;
	}

	.row>.col-8-narrow {
		width: 66.66667%;
	}

	.row>.off-8-narrow {
		margin-left: 66.66667%;
	}

	.row>.col-9-narrow {
		width: 75%;
	}

	.row>.off-9-narrow {
		margin-left: 75%;
	}

	.row>.col-10-narrow {
		width: 83.33333%;
	}

	.row>.off-10-narrow {
		margin-left: 83.33333%;
	}

	.row>.col-11-narrow {
		width: 91.66667%;
	}

	.row>.off-11-narrow {
		margin-left: 91.66667%;
	}

	.row>.col-12-narrow {
		width: 100%;
	}

	.row>.off-12-narrow {
		margin-left: 100%;
	}

	.row.gtr-0 {
		margin-top: 0px;
		margin-left: 0px;
	}

	.row.gtr-0>* {
		padding: 0px 0 0 0px;
	}

	.row.gtr-0.gtr-uniform {
		margin-top: 0px;
	}

	.row.gtr-0.gtr-uniform>* {
		padding-top: 0px;
	}

	.row.gtr-25 {
		margin-top: -7.5px;
		margin-left: -7.5px;
	}

	.row.gtr-25>* {
		padding: 7.5px 0 0 7.5px;
	}

	.row.gtr-25.gtr-uniform {
		margin-top: -7.5px;
	}

	.row.gtr-25.gtr-uniform>* {
		padding-top: 7.5px;
	}

	.row.gtr-50 {
		margin-top: -15px;
		margin-left: -15px;
	}

	.row.gtr-50>* {
		padding: 15px 0 0 15px;
	}

	.row.gtr-50.gtr-uniform {
		margin-top: -15px;
	}

	.row.gtr-50.gtr-uniform>* {
		padding-top: 15px;
	}

	.row {
		margin-top: -30px;
		margin-left: -30px;
	}

	.row>* {
		padding: 30px 0 0 30px;
	}

	.row.gtr-uniform {
		margin-top: -30px;
	}

	.row.gtr-uniform>* {
		padding-top: 30px;
	}

	.row.gtr-150 {
		margin-top: -45px;
		margin-left: -45px;
	}

	.row.gtr-150>* {
		padding: 45px 0 0 45px;
	}

	.row.gtr-150.gtr-uniform {
		margin-top: -45px;
	}

	.row.gtr-150.gtr-uniform>* {
		padding-top: 45px;
	}

	.row.gtr-200 {
		margin-top: -60px;
		margin-left: -60px;
	}

	.row.gtr-200>* {
		padding: 60px 0 0 60px;
	}

	.row.gtr-200.gtr-uniform {
		margin-top: -60px;
	}

	.row.gtr-200.gtr-uniform>* {
		padding-top: 60px;
	}

}

@media screen and (max-width: 840px) {

	.row {
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		align-items: stretch;
	}

	.row>* {
		box-sizing: border-box;
	}

	.row.gtr-uniform>*> :last-child {
		margin-bottom: 0;
	}

	.row.aln-left {
		justify-content: flex-start;
	}

	.row.aln-center {
		justify-content: center;
	}

	.row.aln-right {
		justify-content: flex-end;
	}

	.row.aln-top {
		align-items: flex-start;
	}

	.row.aln-middle {
		align-items: center;
	}

	.row.aln-bottom {
		align-items: flex-end;
	}

	.row>.imp-narrower {
		order: -1;
	}

	.row>.col-1-narrower {
		width: 8.33333%;
	}

	.row>.off-1-narrower {
		margin-left: 8.33333%;
	}

	.row>.col-2-narrower {
		width: 16.66667%;
	}

	.row>.off-2-narrower {
		margin-left: 16.66667%;
	}

	.row>.col-3-narrower {
		width: 25%;
	}

	.row>.off-3-narrower {
		margin-left: 25%;
	}

	.row>.col-4-narrower {
		width: 33.33333%;
	}

	.row>.off-4-narrower {
		margin-left: 33.33333%;
	}

	.row>.col-5-narrower {
		width: 41.66667%;
	}

	.row>.off-5-narrower {
		margin-left: 41.66667%;
	}

	.row>.col-6-narrower {
		width: 50%;
	}

	.row>.off-6-narrower {
		margin-left: 50%;
	}

	.row>.col-7-narrower {
		width: 58.33333%;
	}

	.row>.off-7-narrower {
		margin-left: 58.33333%;
	}

	.row>.col-8-narrower {
		width: 66.66667%;
	}

	.row>.off-8-narrower {
		margin-left: 66.66667%;
	}

	.row>.col-9-narrower {
		width: 75%;
	}

	.row>.off-9-narrower {
		margin-left: 75%;
	}

	.row>.col-10-narrower {
		width: 83.33333%;
	}

	.row>.off-10-narrower {
		margin-left: 83.33333%;
	}

	.row>.col-11-narrower {
		width: 91.66667%;
	}

	.row>.off-11-narrower {
		margin-left: 91.66667%;
	}

	.row>.col-12-narrower {
		width: 100%;
	}

	.row>.off-12-narrower {
		margin-left: 100%;
	}

	.row.gtr-0 {
		margin-top: 0px;
		margin-left: 0px;
	}

	.row.gtr-0>* {
		padding: 0px 0 0 0px;
	}

	.row.gtr-0.gtr-uniform {
		margin-top: 0px;
	}

	.row.gtr-0.gtr-uniform>* {
		padding-top: 0px;
	}

	.row.gtr-25 {
		margin-top: -7.5px;
		margin-left: -7.5px;
	}

	.row.gtr-25>* {
		padding: 7.5px 0 0 7.5px;
	}

	.row.gtr-25.gtr-uniform {
		margin-top: -7.5px;
	}

	.row.gtr-25.gtr-uniform>* {
		padding-top: 7.5px;
	}

	.row.gtr-50 {
		margin-top: -15px;
		margin-left: -15px;
	}

	.row.gtr-50>* {
		padding: 15px 0 0 15px;
	}

	.row.gtr-50.gtr-uniform {
		margin-top: -15px;
	}

	.row.gtr-50.gtr-uniform>* {
		padding-top: 15px;
	}

	.row {
		margin-top: -30px;
		margin-left: -30px;
	}

	.row>* {
		padding: 30px 0 0 30px;
	}

	.row.gtr-uniform {
		margin-top: -30px;
	}

	.row.gtr-uniform>* {
		padding-top: 30px;
	}

	.row.gtr-150 {
		margin-top: -45px;
		margin-left: -45px;
	}

	.row.gtr-150>* {
		padding: 45px 0 0 45px;
	}

	.row.gtr-150.gtr-uniform {
		margin-top: -45px;
	}

	.row.gtr-150.gtr-uniform>* {
		padding-top: 45px;
	}

	.row.gtr-200 {
		margin-top: -60px;
		margin-left: -60px;
	}

	.row.gtr-200>* {
		padding: 60px 0 0 60px;
	}

	.row.gtr-200.gtr-uniform {
		margin-top: -60px;
	}

	.row.gtr-200.gtr-uniform>* {
		padding-top: 60px;
	}

}

@media screen and (max-width: 736px) {

	.row {
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		align-items: stretch;
	}

	.row>* {
		box-sizing: border-box;
	}

	.row.gtr-uniform>*> :last-child {
		margin-bottom: 0;
	}

	.row.aln-left {
		justify-content: flex-start;
	}

	.row.aln-center {
		justify-content: center;
	}

	.row.aln-right {
		justify-content: flex-end;
	}

	.row.aln-top {
		align-items: flex-start;
	}

	.row.aln-middle {
		align-items: center;
	}

	.row.aln-bottom {
		align-items: flex-end;
	}

	.row>.imp-mobile {
		order: -1;
	}

	.row>.col-1-mobile {
		width: 8.33333%;
	}

	.row>.off-1-mobile {
		margin-left: 8.33333%;
	}

	.row>.col-2-mobile {
		width: 16.66667%;
	}

	.row>.off-2-mobile {
		margin-left: 16.66667%;
	}

	.row>.col-3-mobile {
		width: 25%;
	}

	.row>.off-3-mobile {
		margin-left: 25%;
	}

	.row>.col-4-mobile {
		width: 33.33333%;
	}

	.row>.off-4-mobile {
		margin-left: 33.33333%;
	}

	.row>.col-5-mobile {
		width: 41.66667%;
	}

	.row>.off-5-mobile {
		margin-left: 41.66667%;
	}

	.row>.col-6-mobile {
		width: 50%;
	}

	.row>.off-6-mobile {
		margin-left: 50%;
	}

	.row>.col-7-mobile {
		width: 58.33333%;
	}

	.row>.off-7-mobile {
		margin-left: 58.33333%;
	}

	.row>.col-8-mobile {
		width: 66.66667%;
	}

	.row>.off-8-mobile {
		margin-left: 66.66667%;
	}

	.row>.col-9-mobile {
		width: 75%;
	}

	.row>.off-9-mobile {
		margin-left: 75%;
	}

	.row>.col-10-mobile {
		width: 83.33333%;
	}

	.row>.off-10-mobile {
		margin-left: 83.33333%;
	}

	.row>.col-11-mobile {
		width: 91.66667%;
	}

	.row>.off-11-mobile {
		margin-left: 91.66667%;
	}

	.row>.col-12-mobile {
		width: 100%;
	}

	.row>.off-12-mobile {
		margin-left: 100%;
	}

	.row.gtr-0 {
		margin-top: 0px;
		margin-left: 0px;
	}

	.row.gtr-0>* {
		padding: 0px 0 0 0px;
	}

	.row.gtr-0.gtr-uniform {
		margin-top: 0px;
	}

	.row.gtr-0.gtr-uniform>* {
		padding-top: 0px;
	}

	.row.gtr-25 {
		margin-top: -7.5px;
		margin-left: -7.5px;
	}

	.row.gtr-25>* {
		padding: 7.5px 0 0 7.5px;
	}

	.row.gtr-25.gtr-uniform {
		margin-top: -7.5px;
	}

	.row.gtr-25.gtr-uniform>* {
		padding-top: 7.5px;
	}

	.row.gtr-50 {
		margin-top: -15px;
		margin-left: -15px;
	}

	.row.gtr-50>* {
		padding: 15px 0 0 15px;
	}

	.row.gtr-50.gtr-uniform {
		margin-top: -15px;
	}

	.row.gtr-50.gtr-uniform>* {
		padding-top: 15px;
	}

	.row {
		margin-top: -30px;
		margin-left: -30px;
	}

	.row>* {
		padding: 30px 0 0 30px;
	}

	.row.gtr-uniform {
		margin-top: -30px;
	}

	.row.gtr-uniform>* {
		padding-top: 30px;
	}

	.row.gtr-150 {
		margin-top: -45px;
		margin-left: -45px;
	}

	.row.gtr-150>* {
		padding: 45px 0 0 45px;
	}

	.row.gtr-150.gtr-uniform {
		margin-top: -45px;
	}

	.row.gtr-150.gtr-uniform>* {
		padding-top: 45px;
	}

	.row.gtr-200 {
		margin-top: -60px;
		margin-left: -60px;
	}

	.row.gtr-200>* {
		padding: 60px 0 0 60px;
	}

	.row.gtr-200.gtr-uniform {
		margin-top: -60px;
	}

	.row.gtr-200.gtr-uniform>* {
		padding-top: 60px;
	}

}

/* Section/Article */

section.special,
article.special {
	text-align: center;
}

header.major {
	padding-bottom: 2em;
}

header.special {
	margin-bottom: 5em;
	padding-top: 7em;
	position: relative;
	text-align: center;
}

header.special:before,
header.special:after {
	border-bottom: solid 1.5px;
	border-top: solid 1.5px;
	content: '';
	height: 7px;
	opacity: 0.1;
	position: absolute;
	top: 1.75em;
	width: 43%;
}

header.special:before {
	left: 0;
}

header.special:after {
	right: 0;
}

header.special h2 {
	margin-bottom: 0;
}

header.special h2+p {
	margin-bottom: 0;
	padding-top: 1.5em;
}

header.special .icon {
	cursor: default;
	height: 7em;
	left: 0;
	position: absolute;
	text-align: center;
	top: 1em;
	width: 100%;
}

header.special .icon:before {
	font-size: 3.5em;
	opacity: 0.35;
}

footer> :last-child {
	margin-bottom: 0;
}

footer.major {
	padding-top: 3em;
}

/* Form */

input[type="text"],
input[type="password"],
input[type="email"],
textarea {
	-moz-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
	-webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
	-ms-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
	transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
	background: none;
	border: solid 1px var(--color-border);
	border-radius: 0;
	color: inherit;
	display: block;
	padding: 0.75em;
	text-decoration: none;
	width: 100%;
	outline: 0;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
	border-color: var(--color-primary-light);
}

input[type="text"],
input[type="password"],
input[type="email"] {
	line-height: 1em;
}

::-webkit-input-placeholder {
	color: inherit;
	opacity: 0.5;
	position: relative;
	top: 3px;
}

:-moz-placeholder {
	color: inherit;
	opacity: 0.5;
}

::-moz-placeholder {
	color: inherit;
	opacity: 0.5;
}

:-ms-input-placeholder {
	color: inherit;
	opacity: 0.5;
}

/* Image */

.site-logo {
	height: 3.5em;
	/* scales with the heading text size */
	width: auto;
	vertical-align: top;
	/* lines it up with the text */
	margin-right: 0.5em;
	/* gap between logo and name */
}

.logo-anchor {
	text-align: center;
}

.logo-anchor-image {
	display: block;
	height: 5rem;
	width: auto;
	margin: 0 auto 1em auto;
}

.logo-anchor .page-title {
	margin-bottom: 1.5em;
}

.logo-anchor p {
	margin-bottom: 1.5em;
}

.logo-anchor .button {
	margin-top: 0.5em;
}

.image {
	border: 0;
	position: relative;
}

.image:before {
	background: url("images/overlay.png");
	content: '';
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.image.fit {
	display: block;
}

.image.fit img {
	display: block;
	width: 100%;
}

.image.featured {
	display: block;
	margin: 0 0 2em 0;
}

.image.featured img {
	display: block;
	width: 100%;
}

.media-box {
	/* aspect-ratio: 4 / 3;
    border-radius: var(--radius-media); */
	aspect-ratio: 686 / 532;
	border-radius: 1.5rem;
	overflow: hidden;
	box-shadow: 2px 4px 16px rgba(0, 0, 0, 0.2);
	/* box-shadow: 0 4px 16px rgba(26, 58, 92, 0.2); */

}

.media-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: inherit;
}

/*Video*/

.video-wrapper {
	position: relative;
	width: 100%;
	margin-top: 2rem;
	padding-bottom: 56.25%;
	/* 16:9 aspect ratio */
	height: 0;
}

.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* For embeded code, such as embeded maps*/
.embed-padding {
	padding-top: 2rem;
	padding-bottom: 5rem;
}

@media (max-width: 980px) {
	.embed-pad {
		padding-top: 1.2rem;
		padding-bottom: 1.1rem;
	}
}

@media (max-width: 736px) {
	.embed-pad {
		padding-top: 0.45em;
		/* padding-bottom: 0.1em; */
	}
}

/* Icon */

.icon {
	text-decoration: none;
	position: relative;
}

.icon:before {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
	text-transform: none !important;
	font-family: 'Font Awesome 5 Free';
	font-weight: 400;
}

.icon.solid:before {
	font-weight: 900;
}

.icon:before {
	line-height: inherit;
}

.icon.brands:before {
	font-family: 'Font Awesome 5 Brands';
}

.icon.circle {
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	border: 0;
	border-radius: 100%;
	display: inline-block;
	font-size: 1.25rem;
	height: 2.25em;
	left: 0;
	line-height: 2.25em;
	text-align: center;
	text-decoration: none;
	top: 0;
	width: 2.25em;
	background: var(--color-secondary);
	color: var(--color-bg-white);
}

.icon.circle:hover {
	top: -0.2em;
	background: var(--color-secondary-lighter);
}

.icon.circle.fa-twitter {
	background: var(--color-secondary);
	color: var(--color-bg-white);
}

.icon.circle.fa-twitter:hover {
	background: var(--color-secondary-lighter);
}

.icon.circle.fa-facebook-f {
	background: var(--color-secondary);
	color: var(--color-bg-white);
}

.icon.circle.fa-facebook-f:hover {
	background: var(--color-secondary-lighter);
}

.icon.circle.fa-google-plus-g {
	background: var(--color-secondary);
	color: var(--color-bg-white);
}

.icon.circle.fa-google-plus-g:hover {
	background: var(--color-secondary-lighter);
}

.icon.circle.fa-github {
	background: var(--color-secondary);
	color: var(--color-bg-white);
}

.icon.circle.fa-github:hover {
	background: var(--color-secondary-lighter);
}

.icon.circle.fa-dribbble {
	background: var(--color-secondary);
	color: var(--color-bg-white);
}

.icon.circle.fa-dribbble:hover {
	background: var(--color-secondary-lighter);
}

.icon.featured {
	cursor: default;
	display: block;
	margin: 0 0 1.5em 0;
	opacity: 0.35;
	text-align: center;
}

.icon.featured:before {
	font-size: 5rem;
	line-height: 1em;
}

.icon>.label {
	display: none;
}

/* List */

ol {
	list-style: decimal;
	padding-left: 1.25em;
}

ol li {
	padding-left: 0.25em;
}

ul {
	list-style: disc;
	padding-left: 1em;
}

ul li {
	padding-left: 0.5em;
}

/* Icons */

ul.icons {
	list-style: none;
	padding-left: 0;
	cursor: default;
}

ul.icons li {
	display: inline-block;
	line-height: 1em;
	padding-left: 0.5em;
}

ul.icons li:first-child {
	padding-left: 0;
}

/* Featured Icons */

ul.featured-icons {
	cursor: default;
	margin: -0.75em 0 0 0;
	opacity: 0.35;
	overflow: hidden;
	position: relative;
	list-style: none;
	padding-left: 0;
}

ul.featured-icons li {
	display: block;
	float: left;
	text-align: center;
	width: 50%;
	padding-left: 0;
	margin-bottom: 1em;
}

ul.featured-icons li .icon {
	display: inline-block;
	font-size: 5.5rem;
	height: 1em;
	line-height: 1.5em;
	width: 1em;
}



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~TABLE~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

table {
	width: 100%;
}

table.default {
	width: 100%;
}

table.default tbody tr {
	border-bottom: solid 1px var(--color-border);
}

table.default td {
	padding: 0.5em 1em 0.5em 1em;
}

table.default th {
	font-weight: 400;
	padding: 0.5em 1em 0.5em 1em;
	text-align: left;
}

table.default thead {
	background: var(--color-muted);
	color: var(--color-bg-white);
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~BUTTONS~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* Base button: shape and default (hollow primary) colours.
   Every button-like element must carry class="button". */

.button {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
	-moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
	-webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
	-ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
	transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
	background: none;
	border: solid 2px var(--color-primary);
	/* box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.15); */
	border-radius: 2em;
	color: var(--color-primary);
	cursor: pointer;
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 900;
	letter-spacing: 2px;
	min-width: 18em;
	padding: 0 0.75em 0 0.75em;
	line-height: 3.75em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

.button:hover {
	background: var(--color-button-hover);
	border-color: inherit;
}

/* Colour + fill variants. hollow = outline only, full = solid background. */

.button-hollow-primary {
	background: none;
	border-color: var(--color-primary);
	color: var(--color-primary);
	box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.15);
}

.button-hollow-primary:hover {
	background: var(--color-button-hover);
	box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.15);
}

.button-full-primary {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-bg-white);
	box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.15);
}

.button-full-primary:hover {
	background: var(--color-primary-light-hover);
	border-color: var(--color-primary-light-hover);
	box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.15);
}

.button-hollow-secondary {
	background: none;
	border-color: var(--color-secondary);
	color: var(--color-secondary);
	box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.15);
}

.button-hollow-secondary:hover {
	background: var(--color-button-hover);
	box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.15);
}

.button-full-secondary {
	background: var(--color-secondary);
	border-color: var(--color-secondary);
	color: var(--color-bg-white);
	box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.15);
}

.button-full-secondary:hover {
	background: var(--color-secondary-light);
	border-color: var(--color-secondary-light);
	box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.15);
}

/* White variants: for use on dark backgrounds (e.g. #cta, dark wrappers) */

.button-hollow-white {
	background: none;
	border-color: var(--color-bg-white);
	color: var(--color-bg-white);
	box-shadow: 2px 4px 12px rgba(255, 255, 255, 0.25);
}

.button-hollow-white:hover {
	background: var(--color-white-hover);
	box-shadow: 2px 4px 12px rgba(255, 255, 255, 0.25);
}

.button-full-white {
	background: var(--color-bg-white);
	border-color: var(--color-bg-white);
	color: var(--color-secondary-dark);
	box-shadow: 2px 4px 12px rgba(255, 255, 255, 0.25);
}

.button-full-white:hover {
	background: var(--color-text-light);
	border-color: var(--color-text-light);
	box-shadow: 2px 4px 12px rgba(255, 255, 255, 0.25);
}

/* Size variants */

.button-fit {
	width: 100%;
}

.button-small {
	font-size: 0.7rem;
	min-width: 14em;
	padding: 0.5em 1.25em;
}

.button-compact {
	min-width: 0;
	padding-left: 2.5em;
	padding-right: 2.5em;
}

/* Buttons (button lists) */

.buttons {
	cursor: default;
	list-style: none;
	padding-left: 0;
}

.buttons:last-child {
	margin-bottom: 0;
}

.buttons li {
	display: inline-block;
	padding: 0 0 0 1.5em;
}

.buttons li:first-child {
	padding: 0;
}

.buttons-stacked li {
	display: block;
	padding: 1.5em 0 0 0;
}

.buttons-stacked li:first-child {
	padding: 0;
}

/* Wrapper */

.wrapper {
	margin-bottom: 5em;
	padding: 5em;
}

.wrapper.style1 {
	padding: 0;
}

.wrapper.style2 {
	background-color: var(--color-primary);
	color: var(--color-bg-white);
}

.wrapper.style2 .button:hover {
	background: var(--color-white-hover);
}

.wrapper.style2 .button-full-primary {
	background: var(--color-bg-white);
	border-color: var(--color-bg-white);
	color: var(--color-primary-light);
}

.wrapper.style2 .button-full-primary:hover {
	border-color: inherit;
	color: var(--color-bg-white);
}

.wrapper.style3 {
	background: var(--color-bg-white);
	color: inherit;
}

.wrapper.style4 {
	background: var(--color-bg-white);
	color: inherit;
	padding: 4em;
}

/* Header */

@-moz-keyframes reveal-header {
	0% {
		top: -5em;
	}

	100% {
		top: 0;
	}
}

@-webkit-keyframes reveal-header {
	0% {
		top: -5em;
	}

	100% {
		top: 0;
	}
}

@-ms-keyframes reveal-header {
	0% {
		top: -5em;
	}

	100% {
		top: 0;
	}
}

@keyframes reveal-header {
	0% {
		top: -5em;
	}

	100% {
		top: 0;
	}
}

#header {
	background: var(--color-bg-white);
	box-shadow: 0 1px 20px 0 var(--color-shadow);
	color: inherit;
	cursor: default;
	font-size: 0.8rem;
	left: 0;
	padding: 1em 1.5em;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10000;
}

#header h1 {
	font-weight: 900;
	margin: 0;
}

#header h1 span {
	font-weight: 300;
}

#header>a {
	border-bottom: none;
}

#header nav {
	letter-spacing: 0.075em;
	position: absolute;
	right: 1.5em;
	text-transform: uppercase;
	top: 1.3em;
}

#header nav ul {
	list-style: none;
	padding-left: 0;
}

#header nav ul li {
	display: inline-block;
	margin-left: 1.5em;
	padding-left: 0;
}

#header nav ul li>ul {
	display: none;
}

#header nav ul li a {
	border: solid 1px transparent;
	display: inline-block;
	line-height: 1em;
	padding: 0.6em 0.75em;
	text-decoration: none;
	color: var(--color-secondary-dark);

}

#header nav ul li .button {
	font-size: 0.8rem;
	min-width: 0;
	width: auto;
}

#header nav ul li.submenu>a {
	text-decoration: none;
}

#header nav ul li.submenu>a:before {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
	text-transform: none !important;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
}

#header nav ul li.submenu>a:before {
	content: '\f107';
	margin-right: 0.65em;
}

#header nav ul li.current>a {
	font-weight: 650;
	color: var(--color-primary);
}


#header nav ul li.active>a,
#header nav ul li:hover>a {
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	background: var(--color-secondary);
	color: #ffffff
}


#header.reveal {
	-moz-animation: reveal-header 0.5s;
	-webkit-animation: reveal-header 0.5s;
	-ms-animation: reveal-header 0.5s;
	animation: reveal-header 0.5s;
}

#header.alt {
	-moz-animation: none;
	-webkit-animation: none;
	-ms-animation: none;
	animation: none;
	background: transparent;
	box-shadow: none;
	color: var(--color-bg-white);
	padding: 1.25em 2.5em;
	position: absolute;
}

#header.alt nav {
	right: 2.5em;
	top: 1.75em;
}

#header.alt nav ul li.active>a,
#header.alt nav ul li:hover>a {
	border: solid 1px;
}

#header.alt nav ul li a {
	color: var(--color-bg-white);
}


/* Dropotron */

.dropotron {
	list-style: none;
	padding-left: 0;
	background: var(--color-bg-white);
	box-shadow: 0 1px 2px 0 var(--color-shadow);
	line-height: 2.25em;
	min-width: 13em;
	padding: 1em 0;
	text-transform: uppercase;
	margin-top: calc(-1em + 1px);
}

.dropotron.level-0 {
	font-size: 0.7rem;
	font-weight: 400;
	margin-top: 0em;
}

/* Invisible bridge across the gap so the menu doesn't close mid-hover */
.dropotron.level-0:after {
	content: '';
	position: absolute;
	top: -1.5em;
	/* spans the same 1.5em as the margin above */
	left: 0;
	right: 0;
	height: 1.5em;
	/* transparent on purpose — it only needs to catch the cursor */
}

.dropotron.level-0:before {
	border-bottom: solid 0.5em var(--color-bg-white);
	border-left: solid 0.5em transparent;
	border-right: solid 0.5em transparent;
	content: '';
	left: 0.75em;
	position: absolute;
	top: -0.45em;
}

.dropotron>li {
	border-top: solid 1px var(--color-border);
	padding-left: 0;
}

.dropotron>li>a {
	-moz-transition: none;
	-webkit-transition: none;
	-ms-transition: none;
	transition: none;
	color: inherit;
	text-decoration: none;
	padding: 0 1em;
	border: 0;
}

.dropotron>li:hover>a {
	background: var(--color-primary-light);
	color: var(--color-bg-white);
}

.dropotron>li:first-child {
	border-top: 0;
}


.dropotron li.current>a {
	font-weight: 900;
	color: var(--color-primary);
}

.dropotron li.current:hover>a {
	color: var(--color-bg-white);
}

/* Banner */

@-moz-keyframes reveal-banner {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-webkit-keyframes reveal-banner {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-ms-keyframes reveal-banner {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes reveal-banner {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

#banner {
	background-color: var(--color-secondary-dark);
	background-image:
		linear-gradient(rgba(26, 58, 92, 0.85), rgba(26, 58, 92, 0.75));
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--color-bg-white);
	cursor: default;
	padding: 6em 0;
	text-align: center;
	min-height: 90vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

#banner.bg-field {
	background-image:
		linear-gradient(rgba(26, 58, 92, 0.85), rgba(26, 58, 92, 0.75)),
		image-set(url("/assets/img/banner-field-1875.webp") type("image/webp"),
			url("/assets/img/banner-field-1875.jpg") type("image/jpeg"));
}

#banner.bg-coast {
	background-image:
		linear-gradient(rgba(26, 58, 92, 0.85), rgba(26, 58, 92, 0.75)),
		image-set(url("/assets/img/banner-coast-2560.webp") type("image/webp"),
			url("/assets/img/banner-coast-2560.jpg") type("image/jpeg"));
}

#banner .inner {
	-moz-animation: reveal-banner 0.4s 0s ease-in-out;
	-webkit-animation: reveal-banner 0.4s 0s ease-in-out;
	-ms-animation: reveal-banner 0.4s 0s ease-in-out;
	animation: reveal-banner 0.4s 0s ease-in-out;
	-moz-animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	-ms-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	/* background: var(--color-banner-overlay); */
	color: var(--color-bg-white);
	display: inline-block;
	opacity: 0;
	padding: 3em;
	text-align: center;
}

#banner .inner header {
	display: inline-block;
	border-bottom: solid 2px;
	border-top: solid 2px;
	margin: 0 0 4.5em 0;
	padding: 3px 0 3px 0;
}

#banner .inner header h2 {
	border-bottom: solid 2px;
	border-top: solid 2px;
	font-size: 2.5rem;
	font-weight: 900;
	letter-spacing: 0.2em;
	margin: 0;
	padding-left: 0.05em;
	position: relative;
	text-transform: uppercase;
}

#banner .inner p {
	letter-spacing: 0.1em;
	/* line-height: 1.8;   controls the leading of each line */
	margin: 0;
	text-transform: uppercase;
}

#banner .inner p:first-of-type {
	margin-bottom: 2em;
}

#banner .inner p a {
	color: inherit;
	font-weight: 400;
	text-decoration: none;
}

#banner .inner footer {
	margin: 2em 0 0 0;
}

#banner .inner .button {
	--banner-btn-shadow-color: #ffffff;
	--banner-btn-shadow-strength: 1.8;
	margin-top: 7rem;
	border: 2px solid var(--color-bg-white);
	box-shadow:
		1px 1px 2px color-mix(in srgb, var(--banner-btn-shadow-color) calc(20% * var(--banner-btn-shadow-strength)), transparent),
		2px 2px 4px color-mix(in srgb, var(--banner-btn-shadow-color) calc(18% * var(--banner-btn-shadow-strength)), transparent),
		4px 4px 8px color-mix(in srgb, var(--banner-btn-shadow-color) calc(16% * var(--banner-btn-shadow-strength)), transparent),
		8px 8px 16px color-mix(in srgb, var(--banner-btn-shadow-color) calc(14% * var(--banner-btn-shadow-strength)), transparent),
		12px 16px 32px color-mix(in srgb, var(--banner-btn-shadow-color) calc(12% * var(--banner-btn-shadow-strength)), transparent);
	transition:
		color 0.2s ease-in-out,
		border-color 0.2s ease-in-out,
		background-color 0.2s ease-in-out,
		box-shadow 0.25s ease-in-out;
}

#banner .inner .button:hover {
	box-shadow:
		1.5px 2px 4px color-mix(in srgb, var(--banner-btn-shadow-color) calc(22% * var(--banner-btn-shadow-strength)), transparent),
		3px 4px 8px color-mix(in srgb, var(--banner-btn-shadow-color) calc(20% * var(--banner-btn-shadow-strength)), transparent),
		6px 8px 16px color-mix(in srgb, var(--banner-btn-shadow-color) calc(18% * var(--banner-btn-shadow-strength)), transparent),
		12px 16px 32px color-mix(in srgb, var(--banner-btn-shadow-color) calc(16% * var(--banner-btn-shadow-strength)), transparent),
		18px 24px 48px color-mix(in srgb, var(--banner-btn-shadow-color) calc(14% * var(--banner-btn-shadow-strength)), transparent);
}

@media screen and (max-width: 736px) {
	#banner .inner .button {
		margin-top: 4rem;
	}
}

/* Main */

#main {
	padding: 9em 0 0em 0;
}

#main> :last-child {
	margin-bottom: 0;
	padding-bottom: 8rem;
}

#main .sidebar section {
	border-top: solid 1px var(--color-border);
	margin: 3em 0 0 0;
	padding: 3em 0 0 0;
}

#main .sidebar section:first-child {
	border-top: 0;
	padding-top: 0;
	margin-top: 0;
}

body.index #main {
	padding-top: 5em;
}

/* CTA */

#cta {
	background-color: var(--color-secondary-dark);
	color: var(--color-bg-white);
	padding: 5em;
	text-align: center;
}

#cta header {
	margin-bottom: 2em;
}

/* Footer */

#footer {
	background: var(--color-secondary-darkest);
	color: var(--color-text-light);
	padding: 5em 5em 1.5em 5em;
	text-align: center;
}

#footer .copyright {
	font-size: 0.8rem;
	line-height: 1em;
}

#footer .copyright a {
	color: inherit;
}

#footer .copyright li {
	display: inline-block;
	margin-left: 1em;
	padding-left: 1em;
	border-left: dotted 1px;
}

#footer .copyright li:first-child {
	margin: 0;
	padding: 0;
	border: 0;
}

/* ---- FOOTER NAV: START ---- */
.footer-nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: start;
	gap: 2em;
	text-align: left;
	max-width: 1200px;
	margin: 0 auto 3em auto;
}

.footer-cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75em;
	list-style: none;
	max-width: 26em;
	margin: 0 auto;
}

.footer-cta .footer-cta-wide {
	flex-basis: 100%;
	display: flex;
	justify-content: center;
	padding: 0;
}

.footer-cta .button {
	min-width: 11em;
}

/* .footer-nav-col {
	flex: 1 1 0;
} */



.footer-nav-col:last-child {
	justify-self: end;
}

.footer-nav-col ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.footer-nav-col li {
	margin-bottom: 0.9em;
}

.footer-nav-heading {
	font-size: 1rem;
	font-weight: 700;
	color: #ffffff;
	margin-bottom: 1.2em;
}

.footer-nav-col a {
	color: var(--color-text-light);
	border-bottom: none;
	font-size: 0.9rem;
}

.footer-nav-col a:hover {
	color: #ffffff;
	border-bottom: solid 1px #ffffff;
}


@media screen and (max-width: 980px) {
	.footer-nav {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
		gap: 3em;
	}

	.footer-nav-col:last-child {
		justify-self: center;
	}

	.footer-nav .footer-cta {
		max-width: none;
		order: -1;
	}

	.footer-nav .footer-cta li {
		padding: 0;
	}
}


/* ---- FOOTER NAV: END ---- */

/* Share buttons */
.share-buttons {
	display: flex;
	gap: 0.6rem;
	list-style: none;
	padding: 0;
	margin: 0 0 8rem 0;
	justify-content: center;
}

.share-buttons .share-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 2.75rem;
	border-radius: 999px;
	border: 2px solid var(--color-bg-white);
	color: #ffffff;
	text-decoration: none;
	transition: opacity 0.2s ease-in-out;
}

.share-buttons .share-btn:hover {
	opacity: 0.85;
}

.share-buttons [data-share="facebook"] {
	background: var(--color-secondary-light);
}

.share-buttons [data-share="twitter"] {
	background: #ffffff;
}

.share-buttons [data-share="twitter"] i {
	color: var(--color-text);
}

.share-buttons [data-share="linkedin"] {
	background: var(--color-secondary-light);
}

.share-buttons [data-share="email"] {
	background: var(--color-secondary-light);
}

/* ─── Person Card ─────────────────────────────────────────────────────────── */

.card-person {
	background: var(--color-bg-white);
	border: solid 1px var(--color-border);
	padding: 2em;
	text-align: center;
}

.card-person img {
	border-radius: 50%;
	width: 8em;
	height: 8em;
	object-fit: cover;
	margin-bottom: 1em;
}

.card-person .name {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.9rem;
	margin-bottom: 0.25em;
}

.card-person .role {
	color: var(--color-primary);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 1em;
}


/* ─── Stat Counter ────────────────────────────────────────────────────────── */

.stats {
	display: flex;
	flex-wrap: wrap;
	gap: 2em;
	list-style: none;
	padding: 0;
	margin: 0 0 2em 0;
	justify-content: center;
}

.stats li {
	text-align: center;
	min-width: 10em;
}

.stats .number {
	display: block;
	font-size: 3rem;
	font-weight: 900;
	color: var(--color-primary);
	line-height: 1em;
	margin-bottom: 0.2em;
}

.stats .label {
	display: block;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--color-muted);
}


/* ─── Timeline ────────────────────────────────────────────────────────────── */

.timeline {
	list-style: none;
	padding: 0;
	margin: 0 0 2em 0;
	position: relative;
}

.timeline::before {
	content: '';
	position: absolute;
	left: 7em;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--color-border);
}

.timeline li {
	display: flex;
	gap: 2em;
	margin-bottom: 2.5em;
	position: relative;
}

.timeline .date {
	min-width: 6em;
	text-align: right;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-primary);
	padding-top: 0.3em;
}

.timeline .dot {
	position: absolute;
	left: calc(7em - 0.4em);
	top: 0.4em;
	width: 0.8em;
	height: 0.8em;
	border-radius: 50%;
	background: var(--color-primary);
	border: 2px solid var(--color-bg);
	flex-shrink: 0;
}

.timeline .content {
	padding-left: 2em;
}

.timeline .content h4 {
	margin-bottom: 0.25em;
	font-size: 0.95rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.timeline .content p {
	margin: 0;
	font-size: 0.9rem;
	color: var(--color-muted);
}


/* ─── FEATURED-BLOCK ─────────────────────────────────────────────────────────── */

.featured-block {
	background: var(--color-primary);
	border-left: 0;
	color: var(--color-bg-white);
	text-align: center;
	padding: 2em 1.5em 1.5em 1.5em;
	margin: 0 5rem 0 5rem;
	font-size: 1.25rem;
}

.featured-block a {
	color: var(--color-bg-white);
}


/* ─── Quote Block ─────────────────────────────────────────────────────────── */

.quote-block {
	background: var(--color-bg-white);
	border-left: solid 4px var(--color-primary);
	padding: 2em 2.5em;
	margin: 0 0 2em 0;
}

.quote-block blockquote {
	border: 0;
	padding: 0;
	margin: 0 0 1em 0;
	font-size: 1.2rem;
	font-style: italic;
	color: var(--color-text);
}

.quote-block .attribution {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-muted);
}

.quote-block.featured {
	background: var(--color-primary);
	border-left: 0;
	color: var(--color-bg-white);
	text-align: center;
	padding: 3em;
}

.quote-block.featured blockquote {
	color: var(--color-bg-white);
	font-size: 1.5rem;
}

.quote-block.featured .attribution {
	color: rgba(255, 255, 255, 0.75);
}


/* ─── Alert / Notice Box ──────────────────────────────────────────────────── */

.alert {
	padding: 1.25em 1.5em;
	margin: 0 0 2em 0;
	border-left: solid 4px;
	font-size: 0.9rem;
}

.alert.info {
	background: #e8f4f8;
	border-color: var(--color-primary);
	color: #1a4a45;
}

.alert.warning {
	background: #fef8e7;
	border-color: color-text-light;
	color: #5a4200;
}

.alert.urgent {
	background: #fdecea;
	border-color: #c0392b;
	color: #5a1a14;
}


/* ─── Highlighted Fact Box ────────────────────────────────────────────────── */

.fact-box {
	background: var(--color-bg);
	border: solid 1px var(--color-border);
	padding: 1.5em 2em;
	margin: 0 0 2em 0;
}

.fact-box .fact-label {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--color-primary);
	margin-bottom: 0.5em;
}

.fact-box p {
	margin: 0;
	font-size: 1.1rem;
}


/* ─────────────────────────── GRAPHICS ───────────────────────────────────────────── */

/* ─── Graphic: Ballot Initiative Process ───────────────────────────────────────────── */

.ballot-process {
	--bp-badge-size: clamp(2.4rem, 5vw, 3rem);
	--bp-badge-gap: clamp(0.75rem, 2.5vw, 1.25rem);
	--bp-title-size: clamp(1.1rem, 2.5vw + 0.3rem, 1.25rem);
	--bp-body-size: clamp(0.9rem, 1.8vw + 0.3rem, 1rem);
	--bp-card-pad-v: clamp(0.9rem, 2.5vw, 1.4rem);
	--bp-card-pad-h: clamp(1rem, 3vw, 1.75rem);
	--bp-arrow-size: clamp(1.2rem, 2.5vw, 1.6rem);
	--bp-arrow-gap: clamp(0.75rem, 2vw, 1.1rem);

	background: var(--color-secondary-lightest);
	border-radius: 1rem;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	margin-bottom: 4.5rem;
	margin-top: 4rem;
	max-width: 35rem;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
}

.bp-item {
	display: flex;
	align-items: center;
	gap: var(--bp-badge-gap);
}

.bp-badge {
	width: var(--bp-badge-size);
	height: var(--bp-badge-size);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(0.95rem, 2vw, 1.2rem);
	font-weight: 780;
	color: var(--color-bg-white);
	flex-shrink: 0;
	box-shadow: 0 0 0 3px var(--color-bg-white),
		0 0 0 4px rgba(0, 0, 0, 0.08);
}

.bp-badge--primary {
	background: var(--color-primary);
}

.bp-badge--secondary {
	background: var(--color-secondary);
}

.bp-card {
	flex: 1;
	background: var(--color-bg-white);
	border: 1px solid var(--color-border);
	border-radius: 0.75rem;
	padding-top: var(--bp-card-pad-v);
	padding-bottom: var(--bp-card-pad-v);
	padding-left: var(--bp-card-pad-h);
	padding-right: var(--bp-card-pad-h);
	box-shadow:
		0 1px 3px rgba(38, 52, 80, 0.06),
		0 4px 12px rgba(38, 52, 80, 0.06);
}

.bp-title {
	font-size: var(--bp-title-size);
	font-weight: 700;
	line-height: 1.25;
	margin-bottom: 0.4em;
	text-transform: none;
	letter-spacing: 0;
}

.bp-title--primary {
	color: var(--color-primary);
}

.bp-title--secondary {
	color: var(--color-secondary);
}

.bp-body {
	font-size: var(--bp-body-size);
	line-height: 1.65;
	color: var(--color-text);
	margin: 0;
}

.bp-body b {
	font-weight: 780;
}

.bp-arrow-row {
	display: flex;
	align-items: stretch;
	gap: var(--bp-badge-gap);
	padding: var(--bp-arrow-gap) 0;
}

.bp-arrow-blank {
	width: var(--bp-badge-size);
	flex-shrink: 0;
}

.bp-arrow-well {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

.bp-arrow-well svg {
	width: var(--bp-arrow-size);
	height: auto;
	color: var(--color-text);
	opacity: 0.72;
	display: block;
}

/* ─── Graphic: Ballot Initiative Process (tighter variant) ────────────── */

.ballot-process.tight {
	--bp-badge-size: clamp(1.9rem, 4vw, 2.25rem);
	--bp-badge-gap: clamp(0.55rem, 1.6vw, 0.8rem);
	--bp-title-size: clamp(0.95rem, 1.6vw + 0.3rem, 1.05rem);
	--bp-body-size: clamp(0.82rem, 1.1vw + 0.35rem, 0.9rem);
	--bp-card-pad-v: clamp(0.55rem, 1.4vw, 0.8rem);
	--bp-card-pad-h: clamp(0.7rem, 1.8vw, 1rem);
	--bp-arrow-size: clamp(0.85rem, 1.6vw, 1.05rem);
	--bp-arrow-gap: clamp(0.3rem, 0.9vw, 0.45rem);

	padding-block: clamp(1.8rem, 2.9vw, 2.5rem);
	padding-inline: clamp(1rem, 2.5vw, 1.5rem);
	margin-top: 2rem;
	margin-bottom: 2rem;
	max-width: 30rem;
}

.ballot-process.tight .bp-badge {
	font-size: clamp(0.78rem, 1.4vw, 0.92rem);
	box-shadow: 0 0 0 2px var(--color-bg-white),
		0 0 0 3px rgba(0, 0, 0, 0.08);
}

.ballot-process.tight .bp-title {
	margin-bottom: 0.2em;
}

.ballot-process.tight .bp-body {
	line-height: 1.42;
}



/*~~~~~~~~~~~~~~~~~RESPONSIVE~~~~~~~~~~~~~~~~~~~~~*/

/* Wide */

@media screen and (max-width: 1680px) {

	/* Basic */

	html {
		font-size: 14pt;
	}

	/* Section/Article */

	header.special {
		padding-top: 5.5em;
		margin-bottom: 4em;
	}

}

/* Normal */

@media screen and (max-width: 1280px) {

	/* Basic */

	html {
		font-size: 13pt;
	}

	body,
	input,
	select,
	textarea {
		letter-spacing: 0.025em;
		line-height: 1.65em;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		line-height: 1.5em;
	}

	/* Section/Article */

	header.major {
		padding-bottom: 1.5em;
	}

	footer.major {
		padding-top: 2em;
	}

	/* Wrapper */

	.wrapper {
		margin-bottom: 4em;
		padding: 4em 3em;
	}

	.wrapper.style4 {
		padding: 3em;
	}

	/* Header */

	#header nav ul li {
		margin-left: 1em;
	}

	/* Banner */

	#banner {
		background-attachment: scroll;
	}

	/* CTA */

	#cta {
		padding: 4em;
		background-attachment: scroll;
	}

	/* Footer */

	#footer {
		padding: 4em;
	}

}

/* Narrow */

@media screen and (max-width: 980px) {

	/* Basic */

	html {
		font-size: 13pt;
	}

	body,
	input,
	select,
	textarea {
		letter-spacing: 0.025em;
		line-height: 1.5em;
	}

	/* Section/Article */

	header br {
		display: none;
	}

	header.major {
		padding-bottom: 1em;
	}

	header.special {
		padding-left: 2.5em;
		padding-right: 2.5em;
	}

	footer.major {
		padding-top: 1.5em;
	}

	/* Wrapper */

	.wrapper {
		margin-bottom: 3em;
		padding: 3em 2.5em;
	}

	.wrapper.special br {
		display: none;
	}

	.wrapper.style1 {
		padding: 0 2.5em;
	}

	.wrapper.style2 {
		background-size: 15em;
	}

	.wrapper.style4 {
		padding: 2.5em;
	}

	/* Banner */

	#banner {
		background-size: cover;
	}

	/* Main */

	#main {
		background-size: 15em;
	}

	/* CTA */

	#cta {
		background-size: 15em, 15em, auto, cover;
		padding: 3em;
	}

}

/* Narrower */

#navPanel,
#navButton {
	display: none;
}



@media screen and (max-width: 840px) {

	/* Basic */

	html,
	body {
		overflow-x: hidden;
	}

	header.major {
		padding-bottom: 0.25em;
	}

	header.special {
		margin-bottom: 4em;
		padding-top: 5em;
	}

	header.special:before,
	header.special:after {
		width: 40%;
	}

	header.special h2+p {
		padding-top: 1.25em;
	}

	/* Section/Article */

	section {
		margin: 1em 0 1em 0;
	}

	section:first-child {
		margin-top: 0;
	}


	/* Button */

	.button-small {
		font-size: 0.8rem;
		min-width: 18em;
		padding: 0.75em 1.25em;
	}

	/* Featured Icons */

	ul.featured-icons {
		margin: 0;
	}

	ul.featured-icons li {
		display: inline-block;
		float: none;
		width: auto;
	}

	ul.featured-icons li .icon {
		font-size: 4rem;
		width: 1.25em;
	}

	/* Buttons */

	.buttons li {
		display: block;
		padding: 1em 0 0 0;
	}

	/* Header */

	#header {
		display: none;
	}

	/* Banner */

	#banner {
		margin: 0;
	}

	/* Wrapper */

	.wrapper.special-alt {
		text-align: center;
	}

	.wrapper.style4 {
		padding-bottom: 3em;
	}

	/* Main */

	#main {
		padding: 5em 0 5em 0;
	}

	#main .sidebar {
		border-top: solid 1px rgba(124, 128, 129, 0.1);
		padding-top: 3em;
	}

	#main .sidebar section {
		border-top: 0;
		padding-top: 0;
	}

	body.index #main {
		padding-top: 4.5em;
	}

	/* CTA */

	#cta {
		margin: 0;
	}

	/* Footer */

	#footer {
		padding: 4em 1.5em;
	}

	/* Nav */

	#page-wrapper {
		-moz-backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		backface-visibility: hidden;
		-moz-transition: -moz-transform 0.5s ease;
		-webkit-transition: -webkit-transform 0.5s ease;
		-ms-transition: -ms-transform 0.5s ease;
		transition: transform 0.5s ease;
		padding-bottom: 1px;
	}

	#navButton {
		-moz-backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		backface-visibility: hidden;
		-moz-transition: -moz-transform 0.5s ease;
		-webkit-transition: -webkit-transform 0.5s ease;
		-ms-transition: -ms-transform 0.5s ease;
		transition: transform 0.5s ease;
		display: block;
		height: 60px;
		left: 0;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 10001;
	}

	#navButton .toggle {
		text-decoration: none;
		height: 60px;
		left: 0;
		position: absolute;
		text-align: center;
		top: 0;
		width: 100%;
		border: 0;
		outline: 0;
	}

	#navButton .toggle:before {
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
		display: inline-block;
		font-style: normal;
		font-variant: normal;
		text-rendering: auto;
		line-height: 1;
		text-transform: none !important;
		font-family: 'Font Awesome 5 Free';
		font-weight: 900;
	}

	#navButton .toggle:before {
		color: var(--color-bg-white);
		content: '\f0c9';
		font-size: 1rem;
		height: 40px;
		left: 10px;
		line-height: 40px;
		opacity: 0.5;
		position: absolute;
		top: 11px;
		width: 60px;
		z-index: 1;
	}

	#navButton .toggle:after {
		background: var(--color-nav-mobile-hover);
		border-radius: 2px;
		content: '';
		height: 40px;
		left: 10px;
		position: absolute;
		top: 10px;
		width: 60px;
	}

	#navPanel {
		-moz-backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		backface-visibility: hidden;
		-moz-transform: translateX(-275px);
		-webkit-transform: translateX(-275px);
		-ms-transform: translateX(-275px);
		transform: translateX(-275px);
		-moz-transition: -moz-transform 0.5s ease;
		-webkit-transition: -webkit-transform 0.5s ease;
		-ms-transition: -ms-transform 0.5s ease;
		transition: transform 0.5s ease;
		display: block;
		height: 100%;
		left: 0;
		overflow-y: auto;
		position: fixed;
		top: 0;
		width: 275px;
		z-index: 10002;
		background: var(--color-nav-mobile-bg);
		color: var(--color-bg-white);
		font-size: 0.8rem;
		letter-spacing: 0.075em;
		text-transform: uppercase;
		padding: 0.25em 0.75em 1em 0.75em;
	}

	#navPanel .link {
		border: 0;
		border-top: solid 1px var(--color-nav-mobile-border);
		color: inherit;
		display: block;
		height: 3em;
		line-height: 3em;
		opacity: 0.75;
		text-decoration: none;
	}

	#navPanel .link.depth-0 {
		font-weight: 900;
	}

	#navPanel .link:first-child {
		border-top: 0;
	}

	#navPanel .indent-1 {
		display: inline-block;
		width: 1em;
	}

	#navPanel .indent-2 {
		display: inline-block;
		width: 2em;
	}

	#navPanel .indent-3 {
		display: inline-block;
		width: 3em;
	}

	#navPanel .indent-4 {
		display: inline-block;
		width: 4em;
	}

	#navPanel .indent-5 {
		display: inline-block;
		width: 5em;
	}

	body.navPanel-visible #page-wrapper {
		-moz-transform: translateX(275px);
		-webkit-transform: translateX(275px);
		-ms-transform: translateX(275px);
		transform: translateX(275px);
	}

	body.navPanel-visible #navButton {
		-moz-transform: translateX(275px);
		-webkit-transform: translateX(275px);
		-ms-transform: translateX(275px);
		transform: translateX(275px);
	}

	body.navPanel-visible #navPanel {
		-moz-transform: translateX(0);
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
	}

}

/* Mobile */

@media screen and (max-width: 736px) {

	/* Basic */

	body {
		min-width: 320px;
	}


	h3 {
		/* h3 size now handled by clamp() in the base rule */
		letter-spacing: 0.025em;
	}

	p {
		text-align: justify;
	}

	/* Section/Article */

	header {
		text-align: center;
	}

	header.major {
		padding-bottom: 0;
	}

	header.special {
		margin-bottom: 3em;
		padding-left: 1.5em;
		padding-right: 1.5em;
	}

	header.special:before,
	header.special:after {
		width: 38%;
	}

	header.special .icon {
		font-size: 0.75em;
		top: 1.5em;
	}

	header p {
		text-align: center;
	}

	footer.major {
		padding-top: 0;
	}

	/* Icon */

	.icon.circle {
		font-size: 1rem;
	}

	/* Button */

	.button {
		display: block;
		margin-left: auto;
		margin-right: auto;
		max-width: 20em;
		width: 100%;
	}

	.button-fit {
		width: auto;
	}

	/* Icons */

	ul.icons li {
		padding-left: 0.25em;
	}

	/* Featured Icons */

	ul.featured-icons li .icon {
		width: 1.1em;
	}

	/* Buttons */

	.buttons {
		text-align: center;
	}

	/* Wrapper */

	.wrapper {
		margin-bottom: 2.5em;
		padding: 2.25em 1.5em;
	}

	.wrapper.special br {
		display: none;
	}

	.wrapper.style1 {
		padding: 0 1.5em;
	}

	.wrapper.style2 {
		background-size: 10em;
		padding: 2.25em 1.5em;
	}

	.wrapper.style4 {
		background-size: 10em;
		padding: 1.5em 1.5em 3em 1.5em;
	}

	/* Banner */

	#banner {
		background-size: cover;
		padding: 6em 0;
	}

	#banner.bg-field {
		background-image:
			linear-gradient(rgba(26, 58, 92, 0.85), rgba(26, 58, 92, 0.75)),
			image-set(url("/assets/img/banner-field-1280.webp") type("image/webp"),
				url("/assets/img/banner-field-1280.jpg") type("image/jpeg"));
	}

	#banner.bg-coast {
		background-image:
			linear-gradient(rgba(26, 58, 92, 0.85), rgba(26, 58, 92, 0.75)),
			image-set(url("/assets/img/banner-coast-1920.webp") type("image/webp"),
				url("/assets/img/banner-coast-1920.jpg") type("image/jpeg"));
	}

	#banner .inner {
		background: none;
		display: block;
		padding: 0 1.5em;
	}

	#banner .inner header h2 {
		font-size: 1.5rem;
	}

	#banner .inner p {
		text-align: center;
	}

	#banner .inner br {
		display: none;
	}

	/* Main */

	#main {
		background-size: 10em;
		padding: 3.5em 0 2.5em 0;
	}

	body.index #main {
		padding: 2.5em 0 0 0;
	}

	body.contact #main {
		padding-bottom: 0;
	}

	/* CTA */

	#cta {
		background-size: 10em, 10em, auto, cover;
		padding: 3em 1.5em;
	}

	/* Footer */

	#footer {
		padding: 3em 1.5em;
	}

	#footer .copyright li {
		display: block;
		margin: 1em 0 0 0;
		padding: 0;
		border: 0;
	}

	/* Nav */

	#navButton .toggle:before {
		top: 8px;
		left: 8px;
		width: 50px;
		height: 34px;
		line-height: 34px;
	}

	#navButton .toggle:after {
		top: 8px;
		left: 8px;
		width: 50px;
		height: 34px;
	}

}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~LEVEL 1 DIV: SECTIONS (full-width background + padding)~~~~~~~~~~~~~~~ */

/* SINGLE COLUMN SECTION = BAND — no image */

.section-no-columns {
	padding: 4rem 5rem 5rem 5rem;
	margin-bottom: 0rem;
}

/* TWO COLUMN SECTION = SPLIT — flex now lives on .container-2-cols (LEVEL 2), not here */
.section-2-cols {
	padding: 4rem 6rem 5rem 6rem;
	margin-bottom: 0rem;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~LEVEL 2 DIV: INNER WRAPPERS — constrain width + center~~~~~~~~~~~~~~~~ */


.container-no-col {
	max-width: 80rem;
	margin: 0 auto;
}


/* The split inner is the flex container for the two columns */
.container-2-cols {
	display: flex;
	align-items: center;
	gap: 2rem;

	max-width: 65rem;
	margin: 0 auto;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~LEVEL 3 DIV: COLUMN CONTENT~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.column-single-homepage {
	max-width: 780px;
	/* readable measure for centered text */
	margin-inline: auto;
	/* the symmetric centering — this is what makes it "decisive" */
	/* text-align: center; */
	padding-inline: 24px;
	/* keeps text off the edges on narrow screens */
}

.column-single {
	max-width: 950px;
	/* readable measure for centered text */
	margin-inline: auto;
	/* the symmetric centering — this is what makes it "decisive" */
	/* text-align: center; */
	padding-inline: 24px;
	/* keeps text off the edges on narrow screens */
}

.section-band-image {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: 0.75rem;
	margin-block: 1.5rem;
	object-fit: cover;
}


.section-band-image--tablet,
.section-band-image--phone {
	display: none;
}

@media screen and (min-width: 737px) and (max-width: 980px) {
	.section-band-image--desktop {
		display: none;
	}

	.section-band-image--tablet {
		display: block;
	}
}

@media screen and (max-width: 736px) {
	.section-band-image--desktop {
		display: none;
	}

	.section-band-image--tablet {
		display: none;
	}

	.section-band-image--phone {
		display: block;
	}
}

.column-single-homepage,
.column-single h2 {
	text-align: center;
}

.column-for-text {
	flex: 1;
}


.column-for-media {
	flex: 1;
}

.column-for-media img {
	display: block;
	width: 100%;
	border-radius: 0.75rem;
}


/* Background color variants — applied as madditional class on divs */
.section-white {
	background: var(--color-bg-white);
}

.section-tinted {
	background: var(--color-bg);
}

.section-secondary-dark {
	background: var(--color-secondary-dark);
	color: var(--color-bg-white);
}

.section-secondary {
	background: var(--color-secondary);
	color: var(--color-bg-white);
}





/*HEADINGS TEXT LISTS*/

/*Titles & Headings*/


.page-title {
	font-size: clamp(2rem, 0.8rem + 2.9vw, 2.6rem);
	text-align: center;
	text-transform: uppercase;
	margin-top: 1rem;

}

#main h1.page-title {
	margin-bottom: 3rem;
}

.multi-sections-heading {
	font-size: clamp(2rem, 0.8rem + 2.9vw, 2.6rem);
	text-align: center;
	line-height: 2;
	letter-spacing: 0;
	text-transform: none;
	color: var(--color-primary)
}

.section-heading {
	font-size: clamp(1.6rem, 0.55rem + 2.6vw, 2.2rem);
	text-align: center;
	color: var(--color-secondary-dark);
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
}

.column-heading {
	font-size: clamp(1.8rem, 0.6rem + 2.8vw, 2.3rem);
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
}

.subtitle {
	font-size: clamp(1.1rem, 0.3rem + 1.5vw, 1.5rem);
	line-height: 1.4;
	margin-top: 2.2em;
	letter-spacing: 0;
	text-transform: none;
	color: var(--color-secondary-light);
}

.dive-deeper-heading {
	background: var(--color-secondary-dark);
	color: var(--color-secondary-lightest);
	padding: 0.1rem 20px;
	margin: 0 0 1.7rem 0;
	border-radius: 4px;
	text-align: center;
}




/*Text and headings colors*/
.text-primary {
	color: var(--color-primary);
}

.text-primary-light {
	color: var(--color-primary-light);
}

.text-secondary-dark {
	color: var(--color-secondary-dark);
}

.text-secondary {
	color: var(--color-secondary);
}


.text-secondary-light {
	color: var(--color-secondary-light);
}

.text-secondary-lightest {
	color: var(--color-secondary-lightest);
}

/*for bookmarks on headings: to fix where the link lands and show heading there*/
.bookmarks-target-fix {
	scroll-margin-top: 8.5rem;
	/* adjust to your header's height */
}



/*LISTS */


/*to remove vertical spacing between paragraph line and start of bullet list*/

.tight {
	margin-top: 0;
}

p:has(+ .tight) {
	margin-bottom: 0;
}

/*Level 4*/
.checklist {
	list-style: none;
	margin: 0 0 1rem 0;
	padding: 0;
}

.column-single .checklist {
	/* padding-left: 2rem; */
}

/*Level 5*/
.checklist li {
	position: relative;
	padding: 0.45rem 0 0.45rem 2.65rem;
	/* left pad makes room for the check */
	color: inherit;
}

.checklist li:before {
	content: "\f00c";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position: absolute;
	left: 0;
	top: 0.35rem;
	width: 1.8rem;
	height: 1.8rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8rem;
	color: var(--color-secondary);
	background: rgba(109, 142, 196, 0.12);
	border-radius: 0.45rem;
}


.section-secondary .checklist li:before {
	color: var(--color-secondary-lightest);
	background: var(--color-secondary-dark);
}

.section-secondary-dark .checklist li:before {
	color: var(--color-secondary-lightest);
	background: var(--color-secondary);
}


/* Numbered variant — mirrors .checklist layout but with counters */
.numlist {
	list-style: none;
	margin: 0 0 1rem 0;
	padding: 0;
	counter-reset: numlist;
	/* start the counter at 0 */
}

.numlist li {
	position: relative;
	padding: 0.45rem 0 0.45rem 2.65rem;
	color: inherit;
	counter-increment: numlist;
	/* +1 per item */
}

.numlist li:before {
	content: counter(numlist);
	/* the number, instead of the check glyph */
	position: absolute;
	left: 0;
	top: 0.35rem;
	width: 1.8rem;
	height: 1.8rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--color-secondary-dark);
	background: var(--color-secondary-lightest);
	border-radius: 0.45rem;
}

/* dark-section variants, matching the checklist ones at lines 4206 & 4211 */
.section-secondary .numlist li:before,
.section-secondary-dark .numlist li:before {
	color: var(--color-secondary-lightest);
	background: var(--color-secondary-dark);
}

/* BUTTONS LAYOUT WITHIN SECTIONS AND COLUMNS*/

/* Lone button: center it (both section types) */
.column-for-text>.button,
.column-single>.button {
	display: block;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
}

/* Button row: center the group + space them (both section types) */
.column-for-text .buttons,
.column-single .buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 5em;
}

.column-for-text .buttons li,
.column-single .buttons li {
	padding: 0;
}

/* Let gap be the only thing spacing hero buttons */
.column-for-text .buttons li,
.column-single .buttons li {
	padding-left: 0;
}

/* Top space above buttons (both hero types) */
.column-for-text .button,
.column-for-text .buttons,
.column-single .button,
.column-single .buttons,
.column-single-homepage .button,
.column-single-homepage .buttons {
	margin-top: 2.5em;
}





@media screen and (max-width: 736px) {

	.section-2-cols {
		padding: 2.5rem 1.5rem;
	}

	.container-2-cols {
		flex-direction: column;
		gap: 2rem;
	}

	.section-no-columns {
		padding: 2.5rem 1.5rem;
	}

	.column-for-text .buttons,
	.column-single .buttons {
		gap: 1em;
	}

}


/* ═══════════════════════════════════════════════════════════════════════════
Contact page (minimal card layout) — additions only, nothing above is modified 
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Contact page (minimal card layout) — additions only, nothing above is modified ─── */


.wrapper.style3.contact-card {
	max-width: 34rem;
	margin: 0 auto;
	padding: 4.5em 3em 2em 3em;
	border-radius: 0.75rem;
}

.icon.circle.icon-circle-lg {
	font-size: 1.75rem;
	width: 3em;
	height: 3em;
	line-height: 3em;
	margin-bottom: 1em;
}

.button.button-compact-card {
	min-width: 16em;
	line-height: 3.5em;
}

.tt.tt-inline {
	display: inline-block;
}


/* ═══════════════════════════════════════════════════════════════════════════
   COLLAPSIBLE "DEEP DIVE"  (.dd-*)
   Native <details>/<summary>, no JS. Uses site colour variables.
   ═══════════════════════════════════════════════════════════════════════════ */

.dd-block {
	margin: 0 0 1.5em 0;
}

.dd-card {
	margin-top: 1em;
	border: solid 1px var(--color-border);
	border-left: solid 4px var(--color-secondary);
	border-radius: 0.5rem;
	background: var(--color-bg-white);
	overflow: hidden;
	interpolate-size: allow-keywords;
	/* enables the open/close height transition */
}

.dd-toggle-button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: 0.5em 1.15em;
	cursor: pointer;
	user-select: none;
	list-style: none;
	/* hide default marker (Chrome/Firefox) */
	font-weight: 700;
	letter-spacing: 0.025em;
	color: var(--color-secondary-dark);
	background: var(--color-secondary-lightest);
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.dd-toggle-button::-webkit-details-marker {
	/* hide default marker (Safari) */
	display: none;
}

.dd-toggle-button:hover {
	background: var(--color-toggle-button-hover);
	color: var(--color-primary);
}

.dd-toggle-button:focus-visible {
	outline: 2px solid var(--color-secondary);
	outline-offset: -2px;
}

.dd-chevron {
	flex: 0 0 auto;
	font-size: 0.9em;
	color: var(--color-secondary);
	transition: transform 0.2s ease-in-out;
}

.dd-card[open] .dd-toggle-button {
	color: var(--color-primary);
}

.dd-card[open] .dd-chevron {
	transform: rotate(180deg);
}

.dd-body {
	padding: 1.5em 1.25em 0.3em 1.5em;
	border-top: solid 1px var(--color-border);
	color: var(--color-text);
}

.dd-body p:last-child {
	margin-bottom: 1.15em;
}

.dd-body a .icon {
	font-size: 0.85em;
	margin-left: 0.15em;
}

.dd-body .dd-heading {
	font-size: 1em;
	/* not enlarged */
	font-weight: 800;
	/* bold */
	text-transform: none;
	/* cancels the global h1–h6 uppercase */
	letter-spacing: 0.01em;
	line-height: 1.4;
	margin: 1.25em 0 0.4em 0;
	/* space above, small gap below */
	color: var(--color-secondary);
	/* the "different color" — strong navy */
}

.dd-body .dd-heading:first-child {
	margin-top: 0;
	/* no gap if it's the first thing in the card */
}

/* Smooth open/close where supported; instant fallback elsewhere */
@supports (interpolate-size: allow-keywords) {
	.dd-card::details-content {
		height: 0;
		overflow: hidden;
		transition: height 0.25s ease, content-visibility 0.25s allow-discrete;
	}

	.dd-card[open]::details-content {
		height: auto;
	}
}

/* On dark sections, text + chevron switch to light (lighter than #c0c0c0) */
.section-secondary .dd-card,
.section-secondary-dark .dd-card {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.18);
	border-left-color: var(--color-secondary-lightest);
}

.section-secondary .dd-toggle-button,
.section-secondary-dark .dd-toggle-button {
	background: rgba(255, 255, 255, 0.08);
	color: var(--color-bg-white);
}

.section-secondary .dd-toggle-button:hover,
.section-secondary-dark .dd-toggle-button:hover {
	background: rgba(255, 255, 255, 0.16);
	color: var(--color-secondary-lightest);
}

.section-secondary .dd-card[open] .dd-toggle-button,
.section-secondary-dark .dd-card[open] .dd-toggle-button {
	color: var(--color-secondary-lightest);
}

.section-secondary .dd-chevron,
.section-secondary-dark .dd-chevron {
	color: var(--color-secondary-lightest);
}

.section-secondary .dd-body,
.section-secondary-dark .dd-body {
	color: var(--color-bg-white);
}


/* ═══════════════════════════════════════════════════════════════════════════
   COLLAPSIBLE "OFFICIAL DOCUMENTS"  (.od-*)
   Native <details>/<summary>, no JS. Uses site colour variables.
   ═══════════════════════════════════════════════════════════════════════════ */

.od-block {
	margin: 0 0 1.5em 0;
}

.od-card {
	margin-top: 1em;
	border: solid 1px var(--color-border);
	border-left: solid 4px var(--color-secondary);
	border-radius: 0.5rem;
	background: var(--color-bg-white);
	overflow: hidden;
	interpolate-size: allow-keywords;
	/* enables the open/close height transition */
}

.dd-od-card--pad-bottom {
	padding: 0 0 1.5rem 0;
}

.od-toggle-button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: 0.5em 1.15em;
	cursor: pointer;
	user-select: none;
	list-style: none;
	/* hide default marker (Chrome/Firefox) */
	font-weight: 700;
	letter-spacing: 0.025em;
	color: var(--color-secondary-dark);
	background: var(--color-secondary-lightest);
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.od-toggle-button::-webkit-details-marker {
	/* hide default marker (Safari) */
	display: none;
}

.od-toggle-button:hover {
	background: var(--color-toggle-button-hover);
	color: var(--color-primary);
}

.od-toggle-button:focus-visible {
	outline: 2px solid var(--color-secondary);
	outline-offset: -2px;
}

.od-chevron {
	flex: 0 0 auto;
	font-size: 0.9em;
	color: var(--color-secondary);
	transition: transform 0.2s ease-in-out;
}

.od-card[open] .od-toggle-button {
	color: var(--color-primary);
}

.od-card[open] .od-chevron {
	transform: rotate(180deg);
}

.od-body {
	padding: 2em 1.25rem 0.3em 1.5em;
	border-top: solid 1px var(--color-border);
	color: var(--color-text);
}

.od-body p {
	margin-bottom: 0.25rem;
}

.od-body p:last-child {
	margin-bottom: 1.15em;
}

.od-body a .icon {
	font-size: 0.85em;
	margin-left: 0.15em;
}

.od-body .od-heading {
	font-size: 1em;
	/* not enlarged */
	font-weight: 800;
	/* bold */
	text-transform: none;
	/* cancels the global h1–h6 uppercase */
	letter-spacing: 0.01em;
	line-height: 1.4;
	margin: 1.25em 0 0.4em 0;
	/* space above, small gap below */
	color: var(--color-secondary);
	/* deep navy */
}

.od-body .od-heading:first-child {
	margin-top: 0;
	/* no gap if it's the first thing in the card */
}

.section-secondary .od-body .od-heading,
.section-secondary-dark .od-body .od-heading {
	color: var(--color-secondary-lightest);
	/* light blue — readable on dark */
}

.od-view-here {}

/* Smooth open/close where supported; instant fallback elsewhere */
@supports (interpolate-size: allow-keywords) {
	.od-card::details-content {
		height: 0;
		overflow: hidden;
		transition: height 0.25s ease, content-visibility 0.25s allow-discrete;
	}

	.od-card[open]::details-content {
		height: auto;
	}
}

/* On dark sections, text + chevron switch to light (lighter than #c0c0c0) */
.section-secondary .od-card,
.section-secondary-dark .od-card {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.18);
	border-left-color: var(--color-secondary-lightest);
}

.section-secondary .od-toggle-button,
.section-secondary-dark .od-toggle-button {
	background: rgba(255, 255, 255, 0.08);
	color: var(--color-bg-white);
}

.section-secondary .od-toggle-button:hover,
.section-secondary-dark .od-toggle-button:hover {
	background: rgba(255, 255, 255, 0.16);
	color: var(--color-secondary-lightest);
}

.section-secondary .od-card[open] .od-toggle-button,
.section-secondary-dark .od-card[open] .od-toggle-button {
	color: var(--color-secondary-lightest);
}

.section-secondary .od-chevron,
.section-secondary-dark .od-chevron {
	color: var(--color-secondary-lightest);
}

.section-secondary .od-body,
.section-secondary-dark .od-body {
	color: var(--color-bg-white);
}



/* ═══════════════════════════════════════════════════════════════════════════
   TIMELINES WITH COLLAPSIBLE SECTIONS IN HOW WE GOT HERE
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
CSS, WRITTEN FOR FIRST, RECENT TIMELINE IN HOW WE GOT HERE
   ---------------------------------------------------------------------------
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── THE KNOBS FOR THE RED TEXT ─────────────────────────────────────────────
   The emphasised phrases are marked up with your existing .text-accented
   class. There are two knobs because the timeline has two backgrounds:

     --tl-red-on-dark   used inside the cards (dark background) — keep it LIGHT
     --tl-red-on-light  used on the page and in the starting-point panel
                        (light background) — keep it DARK

   To change the red, edit these two lines and nothing else.

   SCOPING NOTE: the overrides below are written as `.tl .tl-card ...` and
   `.tl .tl-intro ...` on purpose. .text-accented is used all over your site,
   so an unscoped `.text-accented { color: ... }` would recolour every accented
   phrase on every page. As written these cannot: they only apply inside .tl.
   ------------------------------------------------------------------------- */
.tl {
	--tl-red-on-dark: var(--color-primary-lightest);
	--tl-red-on-light: var(--color-primary);
}
.tl .tl-card .text-accented {
	color: var(--tl-red-on-dark);
}
.tl .tl-intro .text-accented {
	color: var(--tl-red-on-light);
}

/* ── Intro text above the timeline ──────────────────────────────────────── */
.tl-lede {
	max-width: 46em;
	margin: 0 auto 2em auto;
	text-align: center;
	color: var(--color-text);
}

/* ── The starting-point panel ───────────────────────────────────────────────
   Uses your .cft-panel, but tinted instead of white so it reads as a card
   against the now-white page. Scoped to .tl-intro, so .cft-panel stays white
   everywhere else on the site.
   ------------------------------------------------------------------------- */
.tl-intro {
	background: var(--color-bg);
	margin-bottom: 2.5em;
}
.tl-intro-heading {
	margin: 0 0 0.8em 0;
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 0.01em;
	color: var(--color-secondary-dark);
}

	.tl-intro-subheading {
	margin: 0 0 2.5em 0;
	font-size: 1.0rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.01em;
	color: var(--color-secondary-dark);
}

.tl-intro p {
	margin: 0 0 1em 0;
	font-size: 0.95rem;
	line-height: 1.75;
	color: var(--color-text);
}
/* round bullets, same shape as the ones in the cards but dark on light */
.tl-startpoints {
	margin: 0 0 1em 0;
	padding: 0;
	list-style: none;
}
.tl-startpoints li {
	position: relative;
	padding-left: 1.5em;
	margin-bottom: 0.6em;
	font-size: 0.95rem;
	line-height: 1.7;
	color: var(--color-text);
}
.tl-startpoints li::before {
	content: '';
	position: absolute;
	left: 0.15em;
	top: 0.65em;
	width: 0.45em;
	height: 0.45em;
	border-radius: 50%;
	background: var(--color-primary);
}
.tl-intro-close {
	margin: 1.2em 0 0 0 !important;
	padding-top: 1em;
	border-top: solid 1px var(--color-border);
	font-style: italic;
	color: var(--color-secondary-dark) !important;
}

/* ── The track that holds the events ────────────────────────────────────── */
.tl-track { margin: 0; }

/* One event = three columns: [ year ] [ rail ] [ card ].
   The year has its own column, so the vertical line can never cross it. */
.tl-item {
	display: grid;
	grid-template-columns: 6.5rem 1.6rem 1fr;
	align-items: stretch;
}

/* ── The year: large, on the page background, clear of the line ─────────── */
.tl-year {
	grid-column: 1;
	text-align: right;
	padding: 0 1rem 2.2rem 0;
	font-size: clamp(1.7rem, 0.9rem + 2.1vw, 2.5rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--color-primary);
	white-space: nowrap;
}
/* the month sits above the year, small, so "January 2010" stays on one line */
.tl-month {
	display: block;
	font-size: 0.4em;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-secondary);
	margin-bottom: 0.35em;
}

/* ── The rail: vertical line plus the round marker ──────────────────────── */
.tl-rail {
	grid-column: 2;
	position: relative;
}
.tl-rail::before {
	content: '';
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 0.15rem;
	bottom: 0;
	width: 2px;
	background: var(--color-secondary-lightest);
}
.tl-item:last-child .tl-rail::before { bottom: auto; height: 1.2rem; }

.tl-dot {
	position: absolute;
	left: 50%;
	top: 0.15rem;
	transform: translateX(-50%);
	width: 1.05rem;
	height: 1.05rem;
	border-radius: 50%;
	background: var(--cft-c);
	/* ring in the page colour so the line appears to pass behind the marker */
	box-shadow: 0 0 0 4px var(--color-bg-white);
}

/* ── The card: darker than the page ─────────────────────────────────────── */
.tl-card {
	grid-column: 3;
	margin: 0 0 2.2rem 1.4rem;
	padding: 1.3rem 1.5rem 1.35rem 1.5rem;
	background: var(--color-secondary-dark);
	border-radius: 0.6rem;
	border-left: solid 5px var(--cft-c);
	color: var(--color-text-light);
	box-shadow: 0 2px 10px rgba(38, 52, 80, 0.16);
}

/* Card title: one line, no italics, one size and weight throughout,
   including the court or agency in brackets. 1.05rem is the largest size at
   which the longest of these titles still fits on a single line in the card. */
.tl-card h3, .tl-card-subheading  {
	margin: 0 0 0.7em 0;
	font-size: 1.05rem;
	font-weight: 800;
	font-style: normal;
	line-height: 1.35;
	letter-spacing: 0.01em;
	color: var(--color-primary-lightest);
}

/* Your .cft-heading, used for the two sub-headings in the last card. Its
   --cft-ink colour is dark, so this recolours it INSIDE .tl-card only —
   .cft-heading is untouched everywhere else on the site. */
.tl-card .cft-heading {
	color: var(--color-accent);
	font-size: 1rem;
	margin: 1.4em 0 0.5em 0;
}
.tl-card .cft-heading:first-child { margin-top: 0; }

/* ── Round bullets ──────────────────────────────────────────────────────── */
.tl-points { margin: 0; padding: 0; list-style: none; }
.tl-points li {
	position: relative;
	padding-left: 1.5em;
	margin-bottom: 0.7em;
	font-size: 0.92rem;
	line-height: 1.65;
	color: var(--color-bg-tint);
}
.tl-points li:last-child { margin-bottom: 0; }
.tl-points li::before {
	content: '';
	position: absolute;
	left: 0.15em;
	top: 0.62em;
	width: 0.45em;
	height: 0.45em;
	border-radius: 50%;
	background: var(--tl-red-on-dark);
}

/* .note is your class; on the dark card its default blue is unreadable, so
   this recolours it INSIDE .tl-card only — it cannot affect .note elsewhere. */
.tl-card .note {
	margin-top: 1em;
	padding-top: 0.9em;
	border-top: solid 1px rgba(238, 238, 238, 0.22);
	color: var(--color-secondary-lightest);
}

/* ── Era headings ─────────────────── */
.tl-era {
	margin-left: 8.1rem;
	margin-top: 1.2em;
	margin-bottom: 0.5em;
	text-align: center;
	font-size: clamp(1.2rem, 0.5rem + 1.7vw, 1.8rem)
}
/* the qualifying line under an era heading — .note again, sized down because
   here it inherits from a heading rather than from body text */
.tl-era .note {
	font-size: 0.62em;
	margin-top: 0;
}

/* ── Narrow screens: year moves above the card, rail disappears ─────────── */
@media (max-width: 736px) {
	.section-no-columns { padding: 2.5rem 1.25rem 3rem 1.25rem; }
	.tl-item {
		grid-template-columns: 1.6rem 1fr;
		grid-template-areas: "rail year" "rail card";
	}
	.tl-year {
		grid-area: year;
		text-align: left;
		padding: 0 0 0.4rem 0.6rem;
	}
	.tl-rail { grid-area: rail; }
	.tl-card {
		grid-area: card;
		margin-left: 0.6rem;
	}
	.tl-era { margin-left: 2.2rem; }
}

/* ── Quality floor ──────────────────────────────────────────────────────── */
.tl :focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
}



/* ==========================================================================
   CAMPAIGN-FINANCE TIMELINE  —  add this whole block to main.css
   --------------------------------------------------------------------------
   Self-contained. Every class is prefixed .cft- (which stands for campaign finance timeline)
   so nothing here touches existing .timeline, .od-card, .card, or any other component.
   It only READS existing colour variables (--color-*); it never redefines
   them. 
   The four category colours are set on the .cft-<category> classes at the
   bottom: three reuse the site's palette, one (appeals) is a new muted purple.
   
   ========================================================================== */

.cft {
	margin: 0 0 2em 0;
}

/* the surface the dots sit on — keeps their halo matched to the background */
.cft {
	--cft-halo: var(--color-bg);
}

/* white panel wrapper */
.cft-panel {
	background: var(--color-bg-white);
	border: solid 1px var(--color-border);
	border-radius: 0.75rem;
	padding: 2em 2em 1.5em 2em;
	margin: 0em 0em 4em 0em;
}

.cft-panel .cft {
	--cft-halo: var(--color-bg-white);
	margin-bottom: 0;
}


/* ── Legend: the four colored dots at the top with their labels ─────────────────────────────────────────────────────────────── */
.cft-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45em 1.4em;
	margin: 0 0 1.6em 0;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.cft-legend>span {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.cft-swatch {
	display: inline-block;
	width: 0.8em;
	height: 0.8em;
	border-radius: 50%;
	background: var(--cft-c);
	flex: 0 0 auto;
}

/* ── Track = div holding all 17 cards + vertical spine ─────────────────────────────────────────────── */



.cft-track {
	position: relative;
	padding-left: 2.4em;
}

.cft-track::before {
	content: '';
	position: absolute;
	left: 0.7em;
	top: 0.4em;
	bottom: 0.4em;
	width: 2px;
	background: var(--color-border);
}

/* ── Between-card narrative (sits on the page background) 

.cft-between — the 16 narrative paragraphs between the cards (the "what was happening in this period" text).
.cft-intro — two paragraphs: the one above the timeline explaining contributions/spending/disclosure, and the closing one at the bottom.
────────────────── */
.cft-between {
	margin: 0 0 1.4em 0;
	font-size: 0.92rem;
	line-height: 1.75;
	color: var(--color-text);
}


.cft-intro {
	margin: 0 0 1.6em 0;
	font-size: 0.95rem;
	line-height: 1.75;
	color: var(--color-text);
}

/* ── One event (dot on the spine + collapsible card) ────────────────────── */
.cft-item {
	position: relative;
	margin: 0 0 1.4em 0;
}

.cft-dot {
	position: absolute;
	left: -2.06em;
	top: 0.55em;
	width: 0.8em;
	height: 0.8em;
	border-radius: 50%;
	background: var(--cft-c);
	border: 2px solid var(--color-bg);
}

.cft-card {
	border: solid 1px var(--color-border);
	border-left: solid 4px var(--cft-c);
	border-radius: 0.5rem;
	background: var(--color-bg-white);
	overflow: hidden;
	interpolate-size: allow-keywords;
}

/* summary = the clickable header; whole card stays short until opened */
.cft-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: 0.7em 1.15em;
	cursor: pointer;
	user-select: none;
	list-style: none;
	background: var(--cft-tint);
	transition: background-color 0.2s ease-in-out;
}

.cft-toggle::-webkit-details-marker {
	display: none;
}

.cft-toggle:hover {
	filter: brightness(0.985);
}

.cft-toggle:focus-visible {
	outline: 2px solid var(--cft-c);
	outline-offset: -2px;
}

.cft-head {
	display: flex;
	flex-direction: column;
	gap: 0.12em;
	min-width: 0;
	flex: 1;
}


.cft-row1 {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1em;
	flex-wrap: wrap;
}

.cft-title {
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	line-height: 1.3;
	color: var(--color-text);
}

.cft-year {
	color: var(--cft-ink);
}

.cft-name {
	color: var(--color-text);
}

.cft-cat {
	flex-shrink: 0;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cft-ink);
	white-space: nowrap;
	align-self: baseline;
	padding-top: 0.3em;

}

/* stack the category under the title on narrow screens */
@media (max-width: 600px) {
	.cft-row1 {
		flex-direction: column;
		gap: 0.15em;
	}

	.cft-cat {
		padding-top: 0;
	}
}

.cft-sub {
	font-size: 0.85rem;
	font-weight: 500;
	line-height: 1.4;
	/* color: var(--color-muted); */
}

/* CSS-drawn chevron on the right (points down; flips up when open) */
.cft-chevron {
	flex: 0 0 auto;
	width: 0.5em;
	height: 0.5em;
	margin-right: 0.25em;
	border-right: 2px solid var(--cft-c);
	border-bottom: 2px solid var(--cft-c);
	transform: rotate(45deg);
	transition: transform 0.2s ease-in-out;
}

.cft-card[open] .cft-chevron {
	transform: rotate(-135deg);
}

/* ── Expanded body ──────────────────────────────────────────────────────── */
.cft-body {
	padding: 1.1em 1.35rem 0.5em 1.5em;
	border-top: solid 1px var(--color-border);
	background: var(--color-bg-white);
	color: var(--color-text);
}

.cft-heading {
	font-size: 0.95rem;
	font-weight: 800;
	text-transform: none;
	letter-spacing: 0.01em;
	line-height: 1.4;
	margin: 1.2em 0 0.4em 0;
	color: var(--cft-ink);
}

.cft-heading:first-child {
	margin-top: 0;
}

.cft-body p {
	margin: 0 0 0.6em 0;
	font-size: 0.92rem;
	line-height: 1.7;
	color: var(--color-text);
}

.cft-body ul,
.cft-body li {
	font-size: 0.92rem;
	line-height: 1.7;
}

/* bold lead-in word/phrase at the start of a paragraph */
.cft-lead {
	font-weight: 780;
	color: var(--color-text);
}

/* Smooth open/close where the browser supports it; instant elsewhere */
@supports (interpolate-size: allow-keywords) {
	.cft-card::details-content {
		height: 0;
		overflow: hidden;
		transition: height 0.25s ease, content-visibility 0.25s allow-discrete;
	}

	.cft-card[open]::details-content {
		height: auto;
	}
}

/* ── The four category colours ──────────────────────────────────────────────
   --cft-c    = dot / left border / chevron / legend swatch (mid tone)
   --cft-tint = header background (very light)
   --cft-ink  = meta label + section headings (dark, high contrast)
   -------------------------------------------------------------------------- */
.cft-legislation {
	--cft-c: var(--color-secondary);
	--cft-tint: hsl(219, 36%, 96%);
	--cft-ink: var(--color-secondary-darkest);
}

.cft-scotus {
	--cft-c: var(--color-primary);
	--cft-tint: hsl(6, 63%, 96%);
	--cft-ink: var(--color-primary-dark);
}

.cft-appeals {
	--cft-c: hsl(270, 30%, 52%);
	--cft-tint: hsl(270, 30%, 96%);
	--cft-ink: hsl(270, 38%, 32%);
}

.cft-fec {
	--cft-c: hsl(42, 60%, 42%);
	--cft-tint: hsl(44, 62%, 95%);
	--cft-ink: hsl(36, 62%, 26%);
}





/* ═══════════════════════════════════════════════════════════════════════════
   SECTIONS IN FAQ
   ═══════════════════════════════════════════════════════════════════════════ */

.faq-group-label {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin: 1.6em 0 0.6em 0;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.faq-group-label .grp-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
	background: var(--color-secondary);
	color: #ffffff;
	font-size: 0.85em;
}


.faq-wrap {
	max-width: 760px;
	/* the width/size from the original preview */
}

/* ---- FAQ SEARCH: START ---- */

/* The "JUMP TO" and  "SEARCH" heading text above the search and pills. */
.faq-label {
	margin: 0 0 0.5rem;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: center;
	color: var(--color-bg);
}

/* Applied by faq.js to any .dd-card or .section-no-columns that doesn't match
   the current search. Scoped to #faq-search-root so it can never hide anything
   elsewhere on the site. */
#faq-search-root .is-search-hidden {
	display: none;
}

/* The whole search block: the input, its clear button, and the status line.
   Sits inside #faq-search-root, above the jump nav and section 1. */
.faq-search {
	margin-bottom: 2rem;
}

/* Wrapper around just the input + clear button. `position: relative` is what
   the absolutely-positioned clear button below anchors itself to — without it,
   the × would fly to the corner of the page. */
.faq-search-field {
	position: relative;
}

/* The search text field itself. The oversized right padding (3rem) reserves
   space so typed text never runs underneath the clear button. */
.faq-search-input {
	width: 100%;
	padding: 0.85rem 3rem 0.85rem 1rem;
	font-size: 1rem;
	border-radius: 999px;
	box-shadow: 0 3px 6px -2px rgba(0, 0, 0, 0.5);
}

/* Suppresses the browser's OWN built-in clear button on <input type="search">
   (Chrome/Safari/Edge), so it doesn't sit next to our custom one. */
.faq-search-input::-webkit-search-cancel-button,
.faq-search-input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

/* Our custom × button, floated over the right-hand end of the input.
   Clears the search and refocuses the field. */
.faq-search-clear {
	position: absolute;
	top: 50%;
	right: 0.75rem;
	transform: translateY(-50%);
	border: 0;
	background: none;
	cursor: pointer;
	padding: 0.25rem 0.5rem;
	font-size: 1.5rem;
	line-height: 1;
	color: #555;
	/* ~67% brightness diff on white */
}

/* The × button on hover / keyboard focus — darkens. */
.faq-search-clear:hover,
.faq-search-clear:focus {
	color: #111;
}

/* The live result line under the input ("15 questions found…").
   Base/neutral state; min-height reserves the space so the page doesn't
   jump when the text appears and disappears. */
.faq-search-status {
	min-height: 1.5em;
	margin: 0.5rem 0 0;
	font-size: 0.9rem;
	color: var(--color-secondary);
}

/* The result line when the search DID match questions. Class added by faq.js. */
.faq-search-status.has-hits {
	color: var(--color-primary-lighter);
	/* blue — matches your site's link color family */
	font-weight: 600;
}

/* The result line when the search matched NOTHING. Class added by faq.js. */
.faq-search-status.no-hits {
	color: var(--color-primary-lighter);
	/* muted red */
	font-weight: 600;
}


/* ---- FAQ SEARCH: END ---- */




/* ---- FAQ JUMP NAV: START ---- */

/* The whole jump-nav block: the "JUMP TO" label plus the row(s) of pill links.
   Sits inside #faq-search-root, below the search box, above section 1. */
.faq-jump {
	margin-top: 1.5rem;
	max-width: 1500px;
	/* breaking out of container if needed*/
	margin-left: auto;
	margin-right: auto;
}



/* The <ul> holding the pills. Flex container: strips default list styling,
   lays the pills out in a centered row, wrapping to new rows as needed. */
.faq-jump-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}



/* Each <li> wrapping a pill. Zeroes out theme list-item spacing so the
   flex `gap` above is the only thing controlling separation. */
.faq-jump-list li {
	margin: 0;
	padding: 0;
}

/* The pill itself — the clickable link to a section (resting state). */
.faq-jump-list a {
	display: inline-block;


	/* font-size: 0.9rem;
	padding: 0.35rem 0.75rem; */

	font-size: clamp(13.5px, 1.2vw, 17px);
	padding: clamp(3.5px, 0.3vw, 5px) clamp(12px, 1.1vw, 15px);

	background: var(--color-bg);
	border: 1px solid var(--color-secondary-dark);
	border-radius: 999px;

	text-decoration: none;
	color: var(--color-secondary-dark);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;

}

/* The pill on mouse-hover and on keyboard focus — inverted colors. */
.faq-jump-list a:hover,
.faq-jump-list a:focus {
	opacity: 0.7;
	color: var(--color-secondary-darkest);
	border-color: #fff;
}

/* ---- FAQ JUMP NAV: END ---- */



/* ═══════════════════════════════════════════════════════════════════════════
   TOOLTIPS  (.tt / [data-tip])
   Pure CSS, no JS. Shows above the trigger on hover + keyboard focus.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
	--tt-bg: var(--color-secondary-dark);
	/* #1a3a5c */
	--tt-fg: var(--color-bg-white);
	/* #ffffff */
	--tt-radius: 0.4rem;
	--tt-gap: 0.6em;
	--tt-max: 35em;
}

@media (max-width: 600px) {
	:root {
		--tt-max: 70vw;
	}
}

.tt {
	position: relative;
}

/* trigger 1 — inline text */
.tt-text {
	cursor: help;
	text-decoration: underline dotted var(--color-secondary-light);
	color: var(--color-secondary-light);
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

/* trigger 2 — info icon */
.tt-icon {
	cursor: help;
	color: var(--color-secondary);
	font-size: 0.9em;
	vertical-align: 0.05em;
}

.tt-icon:hover,
.tt:focus-visible .tt-icon {
	color: var(--color-secondary-lighter);
}

/* bubble + arrow, generated from data-tip */
.tt[data-tip]::after,
.tt[data-tip]::before {
	position: absolute;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 100;
	transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.tt[data-tip]::after {
	content: attr(data-tip);
	left: 50%;
	bottom: calc(100% + var(--tt-gap));
	transform: translate(-50%, 0.25em);
	width: max-content;
	max-width: var(--tt-max);
	white-space: normal;
	padding: 0.55em 0.7em;
	font-size: 0.7rem;
	font-weight: 450;
	line-height: 1.5;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--tt-fg);
	background: var(--tt-bg);
	border-radius: var(--tt-radius);
	box-shadow: 2px 4px 16px rgba(0, 0, 0, 0.2);
}

.tt[data-tip]::before {
	content: "";
	left: 50%;
	bottom: calc(100% + var(--tt-gap) - 0.35em);
	transform: translate(-50%, 0.25em);
	border: 0.4em solid transparent;
	border-top-color: var(--tt-bg);
}

.tt[data-tip]:hover::after,
.tt[data-tip]:hover::before,
.tt[data-tip]:focus-visible::after,
.tt[data-tip]:focus-visible::before {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}


.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---- SUBSCRIBE MODAL CSS: START ---- */
.sub-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(17, 17, 17, 0.55);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 16px;
	z-index: 10500;
}

.sub-modal-overlay.is-open {
	display: flex;
}

.sub-modal-box {
	position: relative;
	background: #1a3a5c;
	border-radius: 10px;
	width: 100%;
	max-width: 540px;
	/* match your Brevo form's width */
	max-height: 90vh;
	min-height: 0;
	overflow-y: auto;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.sub-modal-close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 50%;
	background: #111111;
	/* dark on white: high contrast */
	color: #ffffff;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	z-index: 1;
}

.sub-modal-close:hover,
.sub-modal-close:focus-visible {
	background: #333333;
	outline: 2px solid #111111;
	outline-offset: 2px;
}

.sub-modal-content {
	padding: 8px;
}

.sub-modal-content iframe {
	display: block;
	width: 100%;
	border: none;
}

/* Prevent the page behind the modal from scrolling */
body.sub-modal-lock {
	overflow: hidden;
}

/* ---- SUBSCRIBE MODAL CSS: END ---- */


/* ---- CONTACT MODAL CSS: START ---- */
.contact-modal-content {
	padding: 1.6em 1.8em 1.1em 1.8em;
	color: var(--color-bg-white);
}

.contact-modal-content .note {
	color: var(--color-text-light);
}

.contact-modal-content form {
	display: flex;
	flex-direction: column;
	/* gap: 1em; */
	margin: 0;
}

.contact-modal-content form>div {
	margin-bottom: 0.85em;
}

.contact-modal-content label {
	display: block;
	margin-bottom: 0.35em;
	font-weight: 500;
	color: var(--color-bg-white);
}

.contact-modal-content input,
.contact-modal-content textarea {
	width: 100%;
	padding: 0.3em 0.85em 0.65em 0.85em;
	border-radius: 0.4rem;
	border: solid 1px rgba(255, 255, 255, 0.25);
	background: rgba(255, 255, 255, 0.15);
	color: var(--color-bg-white);
}

.contact-modal-content input::placeholder,
.contact-modal-content textarea::placeholder {
	color: var(--color-text-light);
	opacity: 0.75;
	font-weight: 400;
}

.contact-modal-content input:focus,
.contact-modal-content textarea:focus {
	outline: 2px solid var(--color-secondary-lightest);
	outline-offset: 2px;
}

.contact-modal-content textarea {
	min-height: 8em;
	resize: vertical;
}

.contact-modal-content button[type="submit"] {
	align-self: center;
	margin-top: 0.8em;
	margin-bottom: 0em;
	padding: 0.65em 1.5em;
	border: none;
	border-radius: 0.4rem;
	background: var(--color-primary);
	color: var(--color-bg-white);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s ease-in-out;
}

.contact-modal-content button[type="submit"]:hover,
.contact-modal-content button[type="submit"]:focus-visible {
	background: var(--color-primary-light-hover);
}

.contact-modal-content #directEmailFallback a {
	color: var(--color-bg-white);
}

.contact-modal-content .form-status {
	margin-top: 0.25em;
	font-size: 0.9em;
}

.contact-modal-content #directEmailFallback {
	text-align: center;
}

/* ---- CONTACT MODAL CSS: END ---- */


/* ---- SHARE MODAL CSS: START ---- */

/*padding around the modal's inner content (1.75em sides/top, 2em bottom), and sets default text color to*/
.share-modal-content {

	padding: 1.75em 1.75em 2em 1.75em;
	color: var(--color-bg-white);
	text-align: center;
}

/* .share-modal-content .note {
	color: var(--color-text-light);
} */

.share-modal-content h2 {
	margin-bottom: 2em;
	/* gap between h2 and icons */
}



.share-modal-content .icons {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.5em;
}

.share-modal-content .icons {
	margin-bottom: 1.5em;
	/* gap between icons and Copy link button */
}

.share-modal-content .icons a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 999px;
	border: 2px solid #ffffff;
	background: transparent;
	color: #ffffff;
	border-bottom: 2px solid #ffffff;
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.share-modal-content .icons a:hover {
	background: #ffffff;
	color: var(--color-secondary-darkest);
	border-bottom-color: #ffffff;
}

/* ---- SHARE MODAL CSS: END ---- */