/*! normalize.css v3.0.2 | MIT License | git.io/normalize */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body, form, fieldset {
	margin: 0;
	padding: 0;
	border: none;
}


/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
dl,
summary {
  padding:0;
  margin:0;
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */

[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */

abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */

dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

h1 {
  font-size: 2em;
  margin: 0 0;
}

h2 {
  font-size: 1.5em;
  margin: 0 0;
}
/**
 * Address styling not present in IE 8/9.
 */

mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * Address differences between Firefox and other browsers.
 */

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */

pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

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

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}


/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

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

td,
th {
  padding: 0;
}
/**
 * BxSlider v4.1.2 - Fully loaded, responsive content slider
 * http://bxslider.com
 *
 * Written by: Steven Wanderski, 2014
 * http://stevenwanderski.com
 * (while drinking Belgian ales and listening to jazz)
 *
 * CEO and founder of bxCreative, LTD
 * http://bxcreative.com
 */


/** RESET AND LAYOUT
===================================*/

.bx-wrapper {
	position: relative;
	margin: 0 auto 60px;
	padding: 0;
	*zoom: 1;
}

.bx-wrapper img {
	max-width: 100%;
	display: block;
}

/** THEME
===================================*/

.bx-wrapper .bx-viewport {
	-moz-box-shadow: 0 0 5px #ccc;
	-webkit-box-shadow: 0 0 5px #ccc;
	box-shadow: 0 0 5px #ccc;
	border:  5px solid #fff;
	left: -5px;
	background: #fff;
	
	/*fix other elements on the page moving (on Chrome)*/
	-webkit-transform: translatez(0);
	-moz-transform: translatez(0);
    	-ms-transform: translatez(0);
    	-o-transform: translatez(0);
    	transform: translatez(0);
}

.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
	position: absolute;
	bottom: -30px;
	width: 100%;
}

/* LOADER */

.bx-wrapper .bx-loading {
	min-height: 50px;
	background: url(images/bx_loader.gif) center center no-repeat #fff;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2000;
}

/* PAGER */

.bx-wrapper .bx-pager {
	text-align: center;
	font-size: .85em;
	font-family: Arial;
	font-weight: bold;
	color: #666;
	padding-top: 20px;
}

.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
	display: inline-block;
	*zoom: 1;
	*display: inline;
}

.bx-wrapper .bx-pager.bx-default-pager a {
	background: #666;
	text-indent: -9999px;
	display: block;
	width: 10px;
	height: 10px;
	margin: 0 5px;
	outline: 0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
	background: #000;
}

/* DIRECTION CONTROLS (NEXT / PREV) */

.bx-wrapper .bx-prev {
	left: 10px;
	background: url(images/controls.png) no-repeat 0 -32px;
}

.bx-wrapper .bx-next {
	right: 10px;
	background: url(images/controls.png) no-repeat -43px -32px;
}

.bx-wrapper .bx-prev:hover {
	background-position: 0 0;
}

.bx-wrapper .bx-next:hover {
	background-position: -43px 0;
}

.bx-wrapper .bx-controls-direction a {
	position: absolute;
	top: 50%;
	margin-top: -16px;
	outline: 0;
	width: 32px;
	height: 32px;
	text-indent: -9999px;
	z-index: 9999;
}

.bx-wrapper .bx-controls-direction a.disabled {
	display: none;
}

/* AUTO CONTROLS (START / STOP) */

.bx-wrapper .bx-controls-auto {
	text-align: center;
}

.bx-wrapper .bx-controls-auto .bx-start {
	display: block;
	text-indent: -9999px;
	width: 10px;
	height: 11px;
	outline: 0;
	background: url(images/controls.png) -86px -11px no-repeat;
	margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active {
	background-position: -86px 0;
}

.bx-wrapper .bx-controls-auto .bx-stop {
	display: block;
	text-indent: -9999px;
	width: 9px;
	height: 11px;
	outline: 0;
	background: url(images/controls.png) -86px -44px no-repeat;
	margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active {
	background-position: -86px -33px;
}

/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
	text-align: left;
	width: 80%;
}

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
	right: 0;
	width: 35px;
}

/* IMAGE CAPTIONS */

.bx-wrapper .bx-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	background: #666\9;
	background: rgba(80, 80, 80, 0.75);
	width: 100%;
}

.bx-wrapper .bx-caption span {
	color: #fff;
	font-family: Arial;
	display: block;
	font-size: .85em;
	padding: 10px;
}

/* General settings */
@font-face {
	font-family: 'Archivo';
	src: url('../Fonts/Archivo-Variable.woff2') format('woff2');
	font-weight: 400 800;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'IBM Plex Sans';
	src: url('../Fonts/IBMPlexSans-Variable.woff2') format('woff2');
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'IBM Plex Mono';
	src: url('../Fonts/IBMPlexMono-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'IBM Plex Mono';
	src: url('../Fonts/IBMPlexMono-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Source Sans 3';
	src: url('../Fonts/SourceSans3-Variable.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	color-scheme: light;

	--ground: #F5F2F1;
	--surface: #FFFFFF;
	--ink: #1D1517;
	--muted: #6B5F61;
	--rule: #E1D8D7;
	--brand: #8E0E1A;
	--brand-hover: #B5121F;
	--panel: #6F0B14;
	--panel-deep: #40060C;
	--on-panel: #FBEFEE;
	--on-panel-muted: #E3B9BB;
	--gear-stroke: rgba(255, 205, 205, .38);
	--gear-fill: rgba(255, 225, 225, .13);
	--gear-disc: rgba(255, 225, 225, .07);

	--display: "Archivo", "Arial Narrow", Arial, sans-serif;
	--body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
	--mono: "IBM Plex Mono", Consolas, "Courier New", monospace;
	--wordmark: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}

*, *::before, *::after {
	box-sizing: border-box;
}
body {
	margin: 0;
	background: var(--ground);
	color: var(--ink);
	font: 400 17px/1.6 var(--body);
	-webkit-font-smoothing: antialiased;
}
body::before {
	/* used to check Media Query in jQuery */
	display: none;
	content: 'desktop';
}

h1, h2, h3 {
	font-family: var(--display);
	font-stretch: 112%;
	text-wrap: balance;
	margin: 0;
}
h2 {
	font-size: clamp(28px, 3.6vw, 42px);
	line-height: 1.08;
	font-weight: 700;
	letter-spacing: -.015em;
}
p {
	margin: 0;
}
a {
	color: var(--brand);
	font-weight: 600;
	text-decoration: none;
}
a:hover {
	color: var(--brand-hover);
	text-decoration: underline;
}
img {
	max-width: 100%;
	height: auto;
}
address {
	font-style: normal;
}
:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 3px;
	border-radius: 2px;
}

.wrap {
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(16px, 4vw, 40px);
	padding-right: clamp(16px, 4vw, 40px);
}
.label {
	font: 500 12.5px/1.2 var(--mono);
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--muted);
}
.textlink {
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}
.textlink:hover {
	text-decoration: none;
}
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: 600 15.5px/1 var(--body);
	padding: 15px 20px;
	border-radius: 3px;
	border: 1px solid transparent;
	transition: transform .15s ease, background-color .15s ease;
}
.btn:hover {
	transform: translateY(-1px);
	text-decoration: none;
}
.btn-solid {
	background: var(--on-panel);
	color: #5A0810;
}
.btn-solid:hover {
	background: #fff;
	color: #5A0810;
}
.btn-line {
	border-color: rgba(255, 220, 220, .45);
	color: var(--on-panel);
}
.btn-line:hover {
	background: rgba(255, 255, 255, .08);
	color: var(--on-panel);
}
.btn-brand {
	background: var(--brand);
	color: var(--surface);
}
.btn-brand:hover {
	background: var(--brand-hover);
	color: var(--surface);
}
.btn-ghost {
	border-color: var(--rule);
	background: var(--surface);
	color: var(--ink);
	cursor: pointer;
}
.btn-ghost:hover {
	border-color: var(--ink);
}
.btn-brand {
	cursor: pointer;
}
.cookie-notice {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	padding-top: 16px;
	padding-bottom: 16px;
	background: var(--surface);
	border-top: 1px solid var(--rule);
	box-shadow: 0 -12px 32px -24px rgba(29, 21, 23, .35);
}
.cookie-notice-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 32px;
}
.cookie-notice p {
	font-size: 15px;
	max-width: 48rem;
}
.cookie-notice .actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.cookies {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 16px;
	font-size: 15px;
}
.cookies th,
.cookies td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--rule);
	text-align: left;
	vertical-align: top;
}
.cookies th {
	font: 500 12.5px/1.3 var(--mono);
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--muted);
}
.cookies td:first-child {
	font-family: var(--mono);
	font-size: 14px;
	white-space: nowrap;
}
.title, .error, .text-danger {
	color: var(--brand);
}

/* Main Navigation */
#mainnav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 32px;
	padding: 20px 0;
}
#mainnav .logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font: 400 24px/1 var(--wordmark);
	letter-spacing: -.01em;
	color: var(--ink);
}
#mainnav .logo:hover {
	text-decoration: none;
}
#mainnav .logo svg {
	width: 47px;
	height: 30px;
	flex: none;
	color: var(--brand);
}
#mainnav .logo .disc {
	fill: var(--muted);
	opacity: .55;
}
#mainnav .logo i {
	font-style: normal;
	color: var(--muted);
}
#mainnav .logo sup {
	font-size: .45em;
	color: var(--muted);
	vertical-align: top;
	position: relative;
	top: .1em;
}
#mainnav ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 26px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 15.5px;
}
#mainnav ul a {
	display: block;
	padding: 6px 0;
	border-bottom: 2px solid transparent;
	color: var(--ink);
	font-weight: 500;
}
#mainnav ul a:hover,
#mainnav .active a {
	border-bottom-color: var(--brand);
	text-decoration: none;
}
#mainnav .labs img {
	display: none;
}
#mainnav .hamburger {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--rule);
	border-radius: 3px;
	background: var(--surface);
	cursor: pointer;
}
#mainnav .hamburger span {
	display: block;
	width: 20px;
	height: 2px;
	margin: 4px auto;
	background: var(--ink);
}
/* End Main Navigation */

/* Main Leader */
.pageleader,
.hero {
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	background: radial-gradient(120% 140% at 85% 60%, var(--panel) 0%, var(--panel-deep) 78%);
	color: var(--on-panel);
}
.pageleader {
	padding: clamp(28px, 5vw, 56px) clamp(24px, 5vw, 64px);
}
.pageleader h1 {
	font: 500 12.5px/1.2 var(--mono);
	font-stretch: 100%;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--on-panel-muted);
	margin-bottom: 14px;
}
.pageleader h1 img {
	display: block;
	max-height: 48px;
}
.pageleader h2 {
	font-size: clamp(24px, 3.2vw, 38px);
	line-height: 1.12;
	font-weight: 800;
	font-stretch: 118%;
	max-width: 46rem;
	color: var(--on-panel);
}

/* home page */
.hero {
	isolation: isolate;
	padding: clamp(40px, 7vw, 96px) clamp(24px, 5vw, 64px);
}
.hero canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}
.hero-copy {
	max-width: 31rem;
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.hero .label {
	color: var(--on-panel-muted);
}
.hero h1 {
	font-size: clamp(36px, 5.4vw, 64px);
	line-height: 1.02;
	font-weight: 800;
	font-stretch: 118%;
	letter-spacing: -.025em;
}
.hero p {
	color: var(--on-panel-muted);
	font-size: 18px;
	max-width: 28rem;
}
.hero .actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 8px;
}
.hero :focus-visible {
	outline-color: var(--on-panel);
}
/* End Main Leader */

/* Main page content */
.contentarea {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 32px clamp(28px, 4vw, 56px);
	padding: clamp(40px, 6vw, 72px) 0;
	font-size: 16.5px;
}
.contentarea > * {
	flex: 1 1 100%;
	min-width: 0;
}
.contentarea > nav {
	flex: 0 0 220px;
	font-size: 15.5px;
	line-height: 1.4;
}
.contentarea > article {
	flex: 1 1 0;
}
.contentarea > article::after {
	content: "";
	display: table;
	clear: both;
}
.contentarea > .article_aside {
	flex: 0 0 250px;
}

.contentarea nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.contentarea nav li {
	padding: 10px 0;
	border-bottom: 1px solid var(--rule);
}
.contentarea nav li a {
	color: var(--ink);
	font-weight: 500;
}
.contentarea nav li a:hover,
.contentarea nav li.active > a {
	color: var(--brand);
}
.contentarea nav li.active > a {
	font-weight: 600;
}
.contentarea nav li ul {
	margin-top: 8px;
}
.contentarea nav li li {
	padding: 4px 0 4px 14px;
	border: none;
	font-size: 14.5px;
}

.contentarea article h1 {
	font-size: clamp(26px, 3vw, 34px);
	line-height: 1.12;
	font-weight: 700;
	letter-spacing: -.015em;
	margin-bottom: 18px;
}
.contentarea article h2 {
	font-size: 21px;
	line-height: 1.25;
	font-weight: 650;
	letter-spacing: -.01em;
	margin: 28px 0 8px;
}
.contentarea article h3 {
	font-size: 19px;
	line-height: 1.3;
	font-weight: 650;
	margin: 24px 0 8px;
}
.contentarea article p {
	margin-bottom: 14px;
}
.contentarea article ul,
.contentarea article ol {
	margin: 0 0 14px;
	padding-left: 22px;
}
.contentarea article li {
	margin-bottom: 4px;
}

.contentarea .right {
	float: right;
	margin: 0 0 20px 28px;
}
.contentarea .left {
	float: left;
	margin: 0 28px 20px 0;
}
figure {
	margin: 0 0 20px;
}
figure figcaption {
	margin-top: 6px;
	font-size: 14px;
	color: var(--muted);
	text-align: center;
}

.main_article .shots {
	max-width: 420px;
	margin: 4px 0 28px;
}
.to-contact {
	display: inline-block;
	margin: 20px 0;
	padding: 16px 20px;
	border: 1px solid var(--rule);
	border-radius: 3px;
	background: var(--surface);
	color: var(--ink);
	font-weight: 500;
	line-height: 1.4;
	transition: background-color .15s ease, color .15s ease;
}
.to-contact:hover {
	background: var(--brand);
	border-color: var(--brand);
	color: var(--surface);
	text-decoration: none;
}

/* Drawn illustrations on the Consultancy pages */
.illus {
	width: 340px;
	max-width: 100%;
}
.illus.tall {
	width: 250px;
}
.illus svg {
	display: block;
	width: 100%;
	height: auto;
	font-family: var(--mono);
}
.illus .sheet, .illus .card, .illus .wire { fill: var(--surface); stroke: var(--rule); stroke-width: 1.5; }
.illus .card { filter: drop-shadow(0 6px 10px rgba(29, 21, 23, .08)); }
.illus .card-head { fill: #EDE7E6; stroke: none; }
.illus .card-head.brand { fill: var(--brand); }
.illus .note { fill: #F3E6C8; stroke: #E2CFA0; stroke-width: 1.5; }
.illus .line, .illus .grid, .illus .rule, .illus .line-on-note { fill: none; stroke: var(--rule); stroke-width: 2; stroke-linecap: round; }
.illus .grid, .illus .rule { stroke-width: 1.2; }
.illus .line-on-note { stroke: #D9BE84; }
.illus .line-on-head { stroke: #B9ADAC; stroke-width: 3; stroke-linecap: round; }
.illus .line-on-brand { stroke: var(--on-panel-muted); stroke-width: 3; stroke-linecap: round; }
.illus .scribble { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; opacity: .6; }
.illus .arrow { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.illus .box { fill: var(--surface); stroke: var(--brand); stroke-width: 1.5; }
.illus .tick { fill: none; stroke: var(--brand); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.illus .wire-fill { fill: #EDE7E6; }
.illus .step { fill: var(--surface); stroke: var(--brand); stroke-width: 1.5; }
.illus .step.brand-fill { fill: var(--brand); }
.illus .mono { font-size: 9px; fill: var(--ink); font-weight: 500; }
.illus .mono.dim { fill: var(--muted); font-weight: 400; }
.illus .dash { fill: none; stroke: var(--rule); stroke-width: 1.5; stroke-dasharray: 3 3; }
.illus .diamond { fill: var(--surface); stroke: var(--brand); stroke-width: 1.5; }
.illus .code { fill: none; stroke: var(--muted); stroke-width: 2.5; stroke-linecap: round; opacity: .55; }
.illus .gear { fill: var(--brand); fill-rule: evenodd; }
.illus .disc { fill: var(--muted); opacity: .55; }
.illus .cloud { fill: var(--surface); stroke: var(--rule); stroke-width: 1.5; }
.illus .sketch { fill: var(--surface); stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 3; }
.illus .sketch-fill { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 3 2; }
.illus .sketch-line { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 3 2; stroke-linecap: round; }
.illus .btn { fill: var(--brand); }
.illus .dot { fill: var(--rule); }
.illus .ring { fill: none; stroke: var(--rule); stroke-width: 1.5; }
.illus .lock { fill: var(--brand); }
.illus .lock-shackle { fill: none; stroke: var(--brand); stroke-width: 2.5; }
.illus .lock-key { fill: var(--surface); }
.illus .bubble { fill: var(--surface); stroke: var(--brand); stroke-width: 1.5; }
.illus .bubble-fill { fill: #EDE7E6; }
.illus .brand-text { fill: var(--brand); font-size: 14px; font-weight: 500; }
.illus .label { font-size: 9px; letter-spacing: .12em; fill: var(--muted); font-weight: 500; }

/* Solutions and Partners grids */
.solutions,
.gridlist {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.gridlist.two {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}
.contentarea article .gridlist {
	margin: 0;
	padding: 0;
}
.gridbox {
	list-style: none;
	margin: 0;
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: 4px;
	overflow: hidden;
}
.gridbox figure {
	margin: 0;
	padding: 16px;
	background: #fff;
	border-bottom: 1px solid var(--rule);
	text-align: center;
	font-size: 0;
}
.gridbox h2,
.contentarea article .gridbox h2 {
	font-size: 18px;
	line-height: 1.25;
	font-weight: 650;
	letter-spacing: -.01em;
	margin: 16px 18px 8px;
}
.gridbox h2 a {
	color: var(--ink);
	font-weight: inherit;
}
.gridbox h2 a:hover {
	color: var(--brand);
	text-decoration: none;
}
.gridbox p,
.contentarea article .gridbox p {
	margin: 0 18px 18px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--muted);
}
.readmore {
	display: block;
	margin-top: 10px;
}

/* Case studies landing page */
.casestudies {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.casestudies > br {
	display: none;
}
.casestudies li {
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: 4px;
	overflow: hidden;
	transition: border-color .15s ease, transform .15s ease;
}
.casestudies li:hover {
	border-color: var(--brand);
	transform: translateY(-2px);
}
.casestudies a {
	display: block;
	height: 100%;
}
.casestudies a:hover {
	text-decoration: none;
}
.casestudies figure {
	margin: 0;
	padding: 14px;
	background: #fff;
	border-bottom: 1px solid var(--rule);
	text-align: center;
	font-size: 0;
}
.casestudies h2 {
	margin: 14px 16px 16px;
	font-size: 17px;
	line-height: 1.25;
	font-weight: 650;
	letter-spacing: -.01em;
	color: var(--ink);
}
.casestudies h2 span {
	display: block;
	margin-top: 6px;
	font: 400 14.5px/1.4 var(--body);
	letter-spacing: 0;
	color: var(--muted);
}
.we_also_work h2 {
	font: 500 12.5px/1.2 var(--mono);
	font-stretch: 100%;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--muted);
	margin-top: 24px;
}
.clients {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px 28px;
	padding: 24px;
	/* matches the background colour baked into the client logo images */
	background: #8e161c;
	border-radius: 4px;
}

/* Case study pages */
.columnhalf {
	width: 50%;
	float: left;
}
.columnhalf.first {
	padding-right: 40px;
}
.contentarea article .columnhalf h2 {
	font-size: clamp(22px, 2.4vw, 28px);
	margin-top: 16px;
}
.contentarea article .columnhalf h3 {
	font: 500 12.5px/1.2 var(--mono);
	font-stretch: 100%;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--brand);
	margin: 28px 0 10px;
}
.back {
	font: 500 12.5px/1.2 var(--mono);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--muted);
}
.back::before {
	content: "\2190\00a0";
}
.technologies {
	font: 400 12.5px/1.4 var(--mono);
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--muted);
}
.bxslider {
	padding: 0;
	margin: 0;
}
.bxslider li, .bxslider li img {
	padding: 0;
	margin: auto;
	text-align: center;
}
.contentarea article .bxslider {
	padding: 0;
	margin: 0;
}

/* Solution page asides */
.article_aside {
	font-size: 14.5px;
	line-height: 1.5;
}
.article_aside > img {
	display: block;
	margin-bottom: 20px;
}
.article_aside section {
	margin-bottom: 16px;
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: 4px;
	overflow: hidden;
}
.article_aside section h1 {
	font: 500 12.5px/1.3 var(--mono);
	font-stretch: 100%;
	letter-spacing: .07em;
	text-transform: uppercase;
	padding: 12px 16px;
	margin: 0;
}
.article_aside section.red_aside h1 {
	background: var(--panel);
	color: var(--on-panel);
}
.article_aside section.grey_aside h1 {
	background: #EDE7E6;
	color: var(--ink);
}
.article_aside section .box {
	padding: 14px 16px;
}
.article_aside section .box img {
	margin-bottom: 10px;
}
.article_aside p {
	margin-bottom: 10px;
}
.article_aside ul {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
}
.article_aside li {
	padding: 0 0 6px;
}

/* Home Page */
.homepage {
	display: flex;
	flex-direction: column;
	gap: clamp(64px, 9vw, 120px);
}
.feature {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
}
.feature-copy {
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-items: flex-start;
}
.feature-copy p {
	color: var(--muted);
	max-width: 34rem;
}
.shot {
	display: block;
	justify-self: center;
	max-width: 380px;
	padding: 14px;
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: 4px;
	box-shadow: 0 24px 48px -32px rgba(60, 10, 14, .35);
	font-size: 0;
	transition: transform .15s ease;
}
.shot:hover {
	transform: translateY(-2px);
}
.shot img {
	display: block;
	width: 100%;
}

.section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 40px;
	margin-bottom: 28px;
}
.section-head > div {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.register {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 2px solid var(--ink);
}
.register a {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.35fr) 11rem 1.5rem;
	gap: 6px 24px;
	align-items: baseline;
	padding: 18px 8px;
	border-bottom: 1px solid var(--rule);
	color: var(--ink);
	font-weight: 400;
	transition: background-color .15s ease, padding-left .15s ease;
}
.register a:hover {
	background: var(--surface);
	padding-left: 16px;
	text-decoration: none;
}
.register .client {
	font: 650 19px/1.25 var(--display);
	font-stretch: 108%;
}
.register a:hover .client {
	color: var(--brand);
}
.register .system {
	color: var(--muted);
	font-size: 16px;
	line-height: 1.4;
}
.register .sector {
	font: 400 12.5px/1.3 var(--mono);
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--muted);
}
.register .go {
	color: var(--brand);
	font-weight: 600;
	text-align: right;
}

.quote {
	display: grid;
	grid-template-columns: 6px minmax(0, 1fr);
	gap: clamp(20px, 3vw, 40px);
	margin: 0;
}
.quote::before {
	content: "";
	background: var(--brand);
}
.quote blockquote {
	margin: 0;
	font: 500 clamp(21px, 2.5vw, 29px)/1.35 var(--display);
	font-stretch: 100%;
	letter-spacing: -.01em;
	max-width: 46rem;
}
.quote figcaption {
	margin-top: 18px;
	text-align: left;
}

.caps {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(40px, 6vw, 88px);
}
.cap {
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-items: flex-start;
}
.cap > p {
	color: var(--muted);
	max-width: 30rem;
}
.run {
	list-style: none;
	margin: 0;
	padding: 0;
	font: 600 clamp(19px, 2vw, 23px)/1.55 var(--display);
	font-stretch: 106%;
	letter-spacing: -.01em;
}
.run li {
	display: inline;
}
.run li:not(:last-child)::after {
	content: " / ";
	color: var(--brand);
	font-weight: 400;
	padding: 0 4px;
}
.run a {
	color: var(--ink);
	font-weight: inherit;
	background: linear-gradient(var(--brand), var(--brand)) 0 100% / 0 2px no-repeat;
	transition: background-size .2s ease;
}
.run a:hover {
	background-size: 100% 2px;
	color: var(--brand);
	text-decoration: none;
}
/* End Home Page */

/* Contact page */
#contact_details {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}
#contact_details .contact {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: clamp(24px, 3vw, 36px);
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: 4px;
}
.contentarea article #contact_details h2 {
	margin: 0 0 6px;
	font-size: clamp(24px, 2.6vw, 30px);
}
#contact_details address,
#contact_details p {
	margin: 0 0 8px;
	color: var(--muted);
}
#contact_details .big {
	font: 650 clamp(19px, 2vw, 23px)/1.3 var(--display);
	font-stretch: 106%;
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
}
/* End Main page content */

/* footer */
footer {
	background: var(--surface);
	border-top: 1px solid var(--rule);
}
.footer-contact {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr) minmax(0, 1fr);
	gap: 40px clamp(24px, 4vw, 56px);
	padding-top: clamp(56px, 7vw, 96px);
	padding-bottom: clamp(40px, 5vw, 64px);
}
.contact-lead {
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-items: flex-start;
}
.office {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 16px;
}
.office h3 {
	font-size: 20px;
	font-weight: 700;
}
.office address {
	color: var(--muted);
}
.office a {
	font-variant-numeric: tabular-nums;
}
footer .login {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: none;
}
footer .login input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--rule);
	border-radius: 3px;
	background: var(--ground);
	color: var(--ink);
	font: 400 15px/1.3 var(--body);
}
footer .login input[type="submit"] {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--surface);
	font-weight: 600;
	cursor: pointer;
}
footer .login input[type="submit"]:hover {
	border-color: var(--brand);
	background: var(--brand);
}
.partners-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px 36px;
	padding: 24px 0;
	border-top: 1px solid var(--rule);
}
.partners-row ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 32px;
	list-style: none;
	margin: 0;
	padding: 0;
	font: 600 18px/1.4 var(--display);
}
.partners-row a {
	color: var(--muted);
	font-weight: inherit;
}
.partners-row a:hover {
	color: var(--brand);
	text-decoration: none;
}

#footernav {
	padding-top: 22px;
	padding-bottom: 22px;
	font-size: 14px;
	color: var(--muted);
}
#footernav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}
#footernav li:last-child {
	margin-left: auto;
}
#footernav a {
	color: var(--muted);
	font-weight: 400;
}
#footernav a:hover {
	color: var(--brand);
}

/******************/
/* Overlay style */
.overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 50;
	background: rgba(64, 6, 12, .96);
}

/* Overlay closing cross */
.overlay .overlay-close {
	width: 44px;
	height: 44px;
	position: absolute;
	right: 16px;
	top: 16px;
	overflow: hidden;
	border: none;
	background: url(../Images/cross.png) no-repeat center center;
	text-indent: 200%;
	color: transparent;
	cursor: pointer;
	z-index: 100;
}

/* Menu style */
.overlay nav {
	text-align: center;
	position: relative;
	top: 50%;
	height: 60%;
	font: 700 34px/1.2 var(--display);
	font-stretch: 112%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.overlay ul {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	display: inline-block;
	height: 100%;
	position: relative;
}
.overlay ul li {
	display: block;
	height: calc(100% / 5);
	min-height: 44px;
}
.overlay ul li a {
	display: block;
	color: var(--on-panel);
	font-weight: inherit;
	transition: color 0.2s;
}
.overlay ul li a:hover,
.overlay ul li a:focus {
	color: #fff;
	text-decoration: none;
}

/* Effects */
.overlay-hugeinc {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0s 0.3s;
}
.overlay-hugeinc.open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition: none !important;
	}
}

@media (max-width: 992px) {
    body::before {
        content: 'desktop';
    }

    .contentarea > .article_aside {
        flex: 1 1 100%;
    }

    .article_aside > img {
        display: none;
    }

    .footer-contact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 820px) {
    .feature,
    .caps,
    .footer-contact {
        grid-template-columns: minmax(0, 1fr);
    }

    .shot {
        justify-self: start;
    }

    .register a {
        grid-template-columns: minmax(0, 1fr) 1.5rem;
    }

    .register .client,
    .register .system,
    .register .sector {
        grid-column: 1;
    }

    .register .go {
        grid-column: 2;
        grid-row: 1;
    }
}


@media (max-width: 768px) {
    body::before {
        /* used to check Media Query in jQuery */
        content: 'mobile';
    }

    #mainnav ul {
        display: none;
    }

    #mainnav .hamburger {
        display: block;
    }

    .hero {
        padding-bottom: 210px;
    }

    .contentarea > nav {
        display: none;
    }

    .contentarea .right,
    .contentarea .left {
        float: none;
        margin: 0 0 20px;
    }

    .columnhalf {
        float: none;
        width: 100%;
    }

    .columnhalf.first {
        padding-right: 0;
    }

    #contact_details {
        grid-template-columns: minmax(0, 1fr);
    }

    .gridlist.two {
        grid-template-columns: minmax(0, 1fr);
    }

    footer .extranet {
        display: none;
    }

    #footernav li:last-child {
        margin-left: 0;
    }
}