*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(147 197 253 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(147 197 253 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}

/* @font-face here */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  src:
    local(""),
    url("/_assets/font/poppins-regular.woff2") format("woff2"),
    url("/_assets/font/poppins-regular.woff") format("woff");
  font-display: block;
}

@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 400;
  src:
    local(""),
    url("/_assets/font/poppins-italic.woff2") format("woff2"),
    url("/_assets/font/poppins-italic.woff") format("woff");
  font-display: block;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  src:
    local(""),
    url("/_assets/font/poppins-500.woff2") format("woff2"),
    url("/_assets/font/poppins-500.woff") format("woff");
  font-display: block;
}

@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 500;
  src:
    local(""),
    url("/_assets/font/poppins-500italic.woff2") format("woff2"),
    url("/_assets/font/poppins-500italic.woff") format("woff");
  font-display: block;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  src:
    local(""),
    url("/_assets/font/poppins-700.woff2") format("woff2"),
    url("/_assets/font/poppins-700.woff") format("woff");
  font-display: block;
}

@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 700;
  src:
    local(""),
    url("/_assets/font/poppins-700italic.woff2") format("woff2"),
    url("/_assets/font/poppins-700italic.woff") format("woff");
  font-display: block;
}

@font-face {
  font-family: "Cousine";
  font-style: normal;
  font-weight: 400;
  src:
    local(""),
    url("/_assets/font/cousine-regular.woff2") format("woff2"),
    url("/_assets/font/cousine-regular.woff") format("woff");
}

@font-face {
  font-family: "Cousine";
  font-style: italic;
  font-weight: 400;
  src:
    local(""),
    url("/_assets/font/cousine-italic.woff2") format("woff2"),
    url("/_assets/font/cousine-italic.woff") format("woff");
}

@font-face {
  font-family: "Cousine";
  font-style: normal;
  font-weight: 700;
  src:
    local(""),
    url("/_assets/font/cousine-700.woff2") format("woff2"),
    url("/_assets/font/cousine-700.woff") format("woff");
}

@font-face {
  font-family: "Cousine";
  font-style: italic;
  font-weight: 700;
  src:
    local(""),
    url("/_assets/font/cousine-700italic.woff2") format("woff2"),
    url("/_assets/font/cousine-700italic.woff") format("woff");
}

.container {
  width: 100%;
}

@media (min-width: 780px) {

  .container {
    max-width: 780px;
  }
}

@media (min-width: 1300px) {

  .container {
    max-width: 1300px;
  }
}

@media (min-width: 1400px) {

  .container {
    max-width: 1400px;
  }
}

@media (min-width: 1500px) {

  .container {
    max-width: 1500px;
  }
}

:root {
  --color-dark: #2C0043;
  --color-light: #FFFFFF;
  --color-light-shade: #F6F5F4;
  --color-mid: #B7B7B7;
  --color-mid-glare: #D4D4D4;
  --color-mid-shade: #444444;
  --color-charcoal: #222;
  --color-primary: #420065;
  --color-primary-glare: #B6A7BD;
  --color-primary-bright: #F6F3F8;
  --color-inclusive: #A900C0;
  --color-inclusive-shade: #7F238B;
  --color-sustainable: #FF1958;
  --color-ethical: #E100A0;
  --color-ethical-glare: #f857ca;
  --color-original: #F56F00;
  --color-bright: #FFC000;
  --color-bright-glare: #FFC822;
  --space-2xs: clamp(0.25rem, 0.23rem + 0.09vw, 0.3125rem);
  --space-xs: clamp(0.5625rem, 0.54rem + 0.09vw, 0.625rem);
  --space-s: clamp(0.875rem, 0.86rem + 0.09vw, 0.9375rem);
  --space-m: clamp(1.6875rem, 1.63rem + 0.28vw, 1.875rem);
  --space-l: clamp(2.25rem, 2.18rem + 0.37vw, 2.5rem);
  --space-xl: clamp(3.375rem, 3.26rem + 0.56vw, 3.75rem);
  --space-2xl: clamp(4.5rem, 4.35rem + 0.74vw, 5rem);
  --space-3xl: clamp(6.75rem, 6.53rem + 1.11vw, 7.5rem);
  --space-xs-s: clamp(0.5625rem, 0.45rem + 0.56vw, 0.9375rem);
  --space-s-m: clamp(0.875rem, 0.58rem + 1.48vw, 1.875rem);
  --space-s-l: clamp(0.875rem, 0.39rem + 2.41vw, 2.5rem);
  --space-m-l: clamp(1.6875rem, 1.45rem + 1.20vw, 2.5rem);
  --space-l-xl: clamp(2.25rem, 1.81rem + 2.22vw, 3.75rem);
  --space-m-2xl: clamp(1.6875rem, 0.71rem + 4.91vw, 5rem);
  --space-l-2xl: clamp(2.25rem, 1.44rem + 4.07vw, 5rem);
  --space-xl-2xl: clamp(3.375rem, 2.89rem + 2.41vw, 5rem);
  --space-xl-3xl: clamp(3.375rem, 2.15rem + 6.11vw, 7.5rem);
  --space-2xl-3xl: clamp(4.5rem, 3.61rem + 4.44vw, 7.5rem);
  --size-step-00: clamp(0.9375rem, 0.92rem + 0.09vw, 1rem);
  --size-step-0: clamp(1rem, 0.96rem + 0.19vw, 1.125rem);
  --size-step-1: clamp(1.1875rem, 1.11rem + 0.37vw, 1.4375rem);
  --size-step-2: clamp(1.4375rem, 1.34rem + 0.46vw, 1.75rem);
  --size-step-3: clamp(1.75rem, 1.62rem + 0.65vw, 2.1875rem);
  --size-step-4: clamp(2.0625rem, 1.86rem + 1.02vw, 2.75rem);
  --size-step-5: clamp(2.5rem, 2.22rem + 1.39vw, 3.4375rem);
  --size-step-6: clamp(2.5rem, 1.96rem + 2.69vw, 4.3125rem);
  --size-step-7: clamp(3.5625rem, 3.03rem + 2.69vw, 5.375rem);
  --size-step-8: clamp(4.3125rem, 3.61rem + 3.52vw, 6.6875rem);
  --size-step-9: clamp(5.1875rem, 4.24rem + 4.72vw, 8.375rem);
  --leading-flat: 1;
  --leading-fine: 1.15;
  --leading-compact: 1.25;
  --leading-standard: 1.5;
  --leading-loose: 1.7;
  --font-base: Poppins,Century Gothic,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
  --font-mono: Cousine,monospace;
  --font-normal: 400;
  --font-medium: 500;
  --font-bold: 700;
  --font-black: 900;
}

/*
  Global styles

  Low(ish)-specificity, global styles that apply to the whole
  project: https://cube.fyi/css.html
*/

/* Global variables */

:root {
  --transition-base: 250ms ease;
  --transition-movement: 200ms linear;
  --transition-fade: 300ms ease;
  --transition-bounce: 500ms cubic-bezier(0.5, 0.05, 0.2, 1.5);
  --focus-offset: 0.2em;
  --radius: 0.6rem;
  --radius-s: 0.4rem;
  --radius-xs: 0.2rem;
  --radius-l: clamp(0.75rem, 4vw, 1.2rem);
  --radius-xl: clamp(1.5rem, 6vw, 2.5rem);
  --radius-pinched: 0 var(--radius-xl) 0 var(--radius-xl);
  --radius-pinched-small: 0 1rem 0 1rem;
  --stroke: 1px solid var(--color-mid);
  --stroke-shade: 1px solid var(--color-mid-shade);
  --stroke-high-contrast: 1px solid transparent;
  --gutter: var(--space-m);
  --wrapper-max-width: 1400px;
  --accent: var(--color-inclusive-shade);
  --gradient-standard: linear-gradient(
      104deg,
      rgba(0, 0, 0, 0.2) 0%,
      rgba(0, 0, 0, 0) 100%
    ),
    linear-gradient(
      104deg,
      var(--color-primary) 0%,
      var(--color-inclusive) 99.04%
    );
  --gradient-subtle: linear-gradient(
      102deg,
      rgba(0, 0, 0, 0.04) 0%,
      rgba(0, 0, 0, 0.04) 27.08%,
      rgba(0, 0, 0, 0.04) 99.98%
    ),
    linear-gradient(
      280deg,
      rgba(66, 0, 101, 0.5) 0.01%,
      rgba(169, 0, 192, 0.3) 100%
    );
  --gradient-deep: linear-gradient(
      102deg,
      rgba(197, 94, 250, 0.05) 0%,
      rgba(197, 94, 250, 0) 45.03%,
      rgba(197, 94, 250, 0.05) 100%
    ),
    linear-gradient(
      299deg,
      rgba(66, 0, 101, 0.05) 0%,
      rgba(255, 255, 255, 0.05) 52.08%,
      rgba(66, 0, 101, 0.05) 100%
    );
  --gradient-light: linear-gradient(
      102deg,
      rgba(169, 0, 192, 0.05) 0%,
      rgba(169, 0, 192, 0) 45.03%,
      rgba(169, 0, 192, 0.05) 100%
    );
  --gradient-light-grey: linear-gradient(
      102deg,
      rgba(183,183, 183, 0.05) 0%,
      rgba(183, 183, 183, 0) 45.03%,
      rgba(183, 183, 183, 0.05) 100%
    ),
    linear-gradient(
      299deg,
      rgba(66, 0, 101, 0.05) 0%,
      rgba(255, 255, 255, 0.05) 52.08%,
      rgba(66, 0, 101, 0.05) 100%
    );
}

/* Box sizing rules */

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

/* Remove default margin in favour of better control in authored CSS */

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Core elements */

html {
  overflow-x: hidden;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  overflow-x: hidden;
  background: var(--color-light);
  color: var(--color-charcoal);
  font-size: var(--size-step-0);
  font-family: var(--font-base);
  line-height: var(--leading-standard);
  min-height: 100vh;
}

h1,
h2,
h3,
h4 {
  line-height: var(--leading-fine);
  color: var(--color-primary);
  text-wrap: balance;
}

h1 {
  font-size: var(--size-step-5);
  max-width: 20ch;
}

h2 {
  font-size: var(--size-step-4);
  max-width: 35ch;
}

h3 {
  font-size: var(--size-step-3);
  max-width: 35ch;
}

h4,
h5,
h6 {
  font-size: var(--size-step-2);
}

h6 {
  font-weight: normal;
}

small {
  font-size: 0.8em;
}

del {
  color: var(--color-mid-shade);
}

ins {
  text-decoration: none;
  background: var(--color-bright);
  border-radius: var(--radius-xs);
  padding-inline: 0.3em;
}

code,
kbd,
samp {
  /* background: var(--color-primary-bright); */
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  padding: 0.2em 0.2em 0.05em 0.2em;
  hyphens: none;
  tab-size: 2;
  text-align: left;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

p code {
  color: var(--color-primary);
}

pre, p code, div > code, li > code, dd > code, td > code:not(:only-child), kbd:not(:only-child) {
  background: var(--color-light-shade);
  /* border-radius: var(--radius-s); */
  border: 1px solid #888; /* explicit override - we don't have a subtle-enough defined colour */
}

pre {
  background: var(--color-light);
}

/* :has is not supported in the latest version of Firefox (120) but will be in 121,
   so includes the pre element on its own for now; all pre elements in the site at
   this time have code blocks as their first child, but this could be made more
   targeted in future by using pre:has(code)
*/

pre {
  padding: var(--space-m) var(--space-m);
  width: 100%;
  max-width: 100%;
}

pre:has(code) {
  padding: 0;
}

pre code {
  color: var(--color-primary);
  border: none;
  background: none;
  padding: 0;
}

kbd {
  background: var(--color-light-shade);
  border: 1px solid;
  box-shadow: inset 0 -2px 0 var(--color-mid);
  padding-block-end: 0.1em;
}

var {
  font-style: normal;
  font-weight: var(--font-medium);
  color: var(--color-primary);
}

q {
  font-style: italic;
}

/* Position sub and sup with transform so it doesn't affect leading */

sub,
sup {
  font-size: 0.75em;
  vertical-align: baseline;
  display: inline-block;
}

sub {
  transform: translateY(0.65ex);
}

sup {
  transform: translateY(-0.7ex);
}

b {
  color: var(--color-primary);
}

/* Lists */

::marker {
  color: var(--accent);
  font-family: var(--font-mono);
}

:is(ol, ul) {
  margin-block-end: 0;
}

ul {
  padding-inline-start: 1.5ch;
  list-style-type: disc;
}

ul:not([class]) > li {
  padding-inline-start: var(--space-2xs);
}

ul ::marker {
  font-size: 1.2em;
  line-height: 1;
}

ol ::marker {
  font-size: 1em;
  font-weight: var(--font-bold);
}

/* Lists with classes and roles will be out of standard flow, so remove the default spacing and style */

[role="list"][class],
[role="tablist"] {
  margin-block: 0;
  padding: 0;
  list-style: none;
}

/* Description lists */

dt {
  font-weight: var(--font-medium);
  color: var(--color-primary);
}

dt + dd {
  margin-block-start: var(--space-3xs);
}

dd + dt {
  margin-block-start: var(--space-xs);
}

dd {
  margin-inline-start: 1.5ch;
}

/* Default blockquotes */

blockquote {
  border-inline-start: 0.2em solid var(--color-inclusive);
  padding-inline-start: var(--space-s-m);
  padding-block: var(--space-xs);
  font-size: var(--size-step-1);
  line-height: var(--leading-standard);
}

blockquote :is(cite, footer) {
  font-size: var(--size-step-0);
  font-family: var(--font-mono);
}

blockquote > * + * {
  margin-block-start: 1em;
}

/* Address */

address {
  font-style: normal;
}

/* Media */

video,
iframe[src*="youtube"] {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}

img,
picture {
  height: auto;
  max-width: 100%;
  display: block;
}

picture {
  width: max-content;
}

figcaption {
  padding-block-start: 0.5em;
  font-size: var(--size-step-0);
}

figure > :is(img, svg):not(.services__icon) + figcaption,
figure > *:has( img, svg ):not(.services_icon) + figcaption {
  color: #44546A;
  border-left: 0.14rem solid var(--color-mid);
  font-weight: 500;
  margin: 0.5em 0;
  padding: 0.75em 1em 0.75em 0.75em;
}

/* Tables */

table {
  border: var(--stroke);
  border-collapse: collapse;
  width: 100%;
}

th {
  text-align: left;
  background: var(--color-primary-bright);
  font-weight: var(--font-bold);
  line-height: var(--leading-fine);
  background: rgb(0 0 0 / 2%);
}

thead th {
  padding-block: var(--space-s);
}

td,
th {
  padding: var(--space-xs) var(--space-s);
}

th:not(:only-of-type) {
  border-block-end: var(--stroke);
}

th:only-of-type {
  border-inline-end: var(--stroke);
}

:is(th, td) ~ :is(th, td) {
  border-inline-start: var(--stroke);
}

tr + tr :is(th, td) {
  border-block-start: var(--stroke);
}

table code {
  padding: 0;
  background: none;
}

table a:not([class]) {
  /* color: currentColor; */
}

caption {
  caption-side: bottom;
  margin-block-start: var(--space-s);
}

/* Interactive */

a:not([class]) {
  color: var(--accent);
  text-decoration-skip-ink: auto;
}

a:not([class]):focus-visible,
a:not([class]):hover {
  text-underline-offset: 0.2ex;
}

:is(h1, h2, h3, h4) a:not([class]) {
  text-decoration-thickness: 0.1ex;
  text-underline-offset: 0.2ex;
}

:is(h1, h2, h3, h4) a:not([class]):focus-visible,
:is(h1, h2, h3, h4) a:not([class]):hover {
  text-underline-offset: 0.3ex;
}

abbr {
  cursor: help;
  text-underline-offset: 0.2ex;
  color: var(--accent);
}

/* Focus as a fallback */

/* We have to define the full focus outline custom property code because if set that as
   a custom property itself, the --focus-color won't correctly cascade */

:focus {
  outline: 2px solid var(--focus-color, currentColor);
  outline-offset: var(--focus-offset);
}

/* If focus-visible is supported, opt for that approach as it's a better pointer experience */

@supports selector(:focus-visible) {
  :focus {
    outline: none;
  }

  :focus-visible {
    outline: 2px solid var(--focus-color, currentColor);
    outline-offset: var(--focus-offset);
  }
}

/* Firefox is the only browser that doesn't outline the whole element unless you
   make it display: inline-block. That in itself causes multiple flow issues so
   we can detect it, using its own vendor prefix and reduce focus offset
*/

@supports (-moz-appearance: none) {
  :root {
    --focus-offset: 0.08em;
  }
}

:is(div, main, h1, h2, h3, h4):focus {
  outline: none;
}

::selection {
  color: var(--color-light);
  background: var(--color-ethical);
}

:target {
  scroll-margin-block: 5ex;
}

/* Horizontal rule*/

hr {
  text-align: center;
  border: none;
  border-block-start: 2px solid var(--color-primary-glare);
  overflow: visible;
  margin-block: var(--flow-space, var(--space-l-xl));

  /* Fix the height so the brand separator doesn't affect space in flow contexts */
  height: 2px;
}

hr::after {
  content: url(/_images/divider.svg);
  display: inline-block;
  background: var(--color-light);

  /* Fixed pixels because we want ultimate control of rendering and overall spacing in this context */
  width: 160px;
  height: 28px;
  transform: translateY(-18px);
}

/* Decor removed for high contrast mode */

@media (prefers-contrast: more) {
  hr::after {
    display: none;
  }
}

/* Scale icons within container*/

svg:not([class]) {
  width: 1ex;
  height: 1ex;
}

/* Don't let SVGs shrink in flex contexts where there's less space */

svg {
  flex-shrink: 0;
}

/* Forms */

input,
button,
textarea,
select {
  font: inherit;
}

form {
  --focus-color: var(--accent);
}

form > * + * {
  margin-top: var(--flow-space, 1rem);
}

input,
select,
textarea {
  accent-color: var(--accent);
}

input:not([type="checkbox"], [type="radio"], [type="color"]),
select,
textarea {
  padding: 0.5em 0.8em;
  border-radius: var(--radius-xs);
  border: var(--stroke-shade);
  width: 100%;
}

label {
  line-height: var(--leading-compact);
  font-weight: var(--font-medium);
}

/* Creates a line break, but maintains its inline behaviour */

label::after {
  content: "\A";
  white-space: pre;
}

/* Usually label wraps checkbox and radio buttons, so we give ourselves more layout and text-flow control with flex */

label:has(input) {
  display: flex;
  align-items: flex-start;
  gap: var(--space-s);
  font-weight: var(--font-normal);
}

label:has(input) + label:has(input) {
  margin-block-start: var(--space-s-m);
}

label:has(input) input {
  transform: translateY(0.25ex);
}

input:disabled {
  background: var(--color-mid-glare);
}

input:disabled,
label input:disabled + * {
  cursor: not-allowed;
}

/* Sets a sensible height if textarea rows attribute is missing */

textarea:not([rows]) {
  min-height: 10em;
}

fieldset {
  border: var(--stroke);
  padding: var(--space-s);
}

legend {
  font-weight: var(--font-medium);
  padding-inline: var(--space-xs);
}

/* Details and summary */

summary {
  font-weight: var(--font-bold);
  cursor: default;
}

details[open] summary {
  margin-block-end: var(--space-s);
}

.avatar-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1rem, max-content));
}

/* Scale the images up slightly, to create the illusion of overlap */

.avatar-group .avatar {
  transform: scale(110%);
  transform-origin: left;
}

/* Increase the illusion by pulling each sibling image slightly left */

.avatar-group img + img {
  margin-inline-start: -7%;
}

.avatar {
  --avatar-size: clamp(3.5rem, 6vw, 12rem);
  --avatar-radius: var(--avatar-size);

  display: block;
  width: var(--avatar-size);
  height: var(--avatar-size);
  object-fit: cover;
  border-radius: var(--avatar-radius);
  border: 2px solid currentColor;
}

.avatar[data-avatar-variant="pinched"] {
  --avatar-radius: var(--radius-pinched);
  width: 100%;
  border: none;
}

.avatar--avatarless {
  padding: 1rem;
  overflow: initial;
}

@supports (aspect-ratio: 1/1) {
  .avatar {
    aspect-ratio: 1/1;
    height: unset;
  }
}

.avatar[src*="egorla.jpg"] {
  object-position: top;
}

.brand {
  --brand-gutter: var(--space-s-m);
  display: flex;
  gap: var(--brand-gutter);
  text-decoration: none;
  max-width: 20rem;
}

.brand__supporting-text {
  display: flex;
  align-items: center;
  border-inline-start: 2px solid var(--color-primary);
  padding-inline-start: var(--brand-gutter);
  font-size: var(--size-step-0);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  line-height: var(--leading-fine);
}

.brand[href]:focus-visible .brand__supporting-text,
.brand[href]:hover .brand__supporting-text {
  color: var(--color-inclusive);
}

/* Logo fixed dimensions for max control */

.brand svg {
  width: 120px;
  height: 46px;
}

@media (min-width: 1300px) {
  .brand {
    /* This is how wide the mark + gutter is. The idea is to align the start of the type on the inline-start line */
    transform: translateX(-60px);
    max-width: unset;
  }

  .brand svg {
    width: 166px;
    height: 64px;
    transform: translateY(-5px);
  }
}

.contact-panel {
  --flow-space: var(--space-s);

  /* This gives the illusion that the .contact-panel "pops over" the other content, but it's in-fact, just another region */
  background: linear-gradient(
    0deg,
    var(--color-light) 50%,
    var(--color-primary-bright) 50%
  );
}

.contact-panel b {
  color: currentColor;
}

.contact-panel.region {
  /* Remove the auto high contrast border that's applied to .region */
  border: none;
}

.contact-panel__inner {
  background-color: var(--color-primary);
  background-image: var(--gradient-standard);
  background-size: cover;
  color: var(--color-light);
  padding: var(--space-l-xl) var(--space-m-l);
  position: relative;
  overflow: hidden;
  border: var(--stroke-high-contrast);

  /* Full bleed layout for smaller viewports */
  width: 100vw;
  margin-inline-start: 50%;
  transform: translateX(-50%);

  /* Alignment for the sidebar layout */
  align-items: center;
}

/* The .contact-panel decor sits on z-index: 0, so all content needs knocking up a level */

.contact-panel__inner :not(.contact-panel__decor) {
  position: relative;
  z-index: 1;
}

/* This is much larger than the element itself, but we use clamp to try to at least make that over-size, relative to the viewport */

.contact-panel__decor {
  position: absolute;
  width: clamp(1200px, 80vw, 1600px);
  height: auto;
  min-height: 100%;
  z-index: 0;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
}

.contact-panel__heading {
  color: currentColor;
  font-size: var(--size-step-5);
}

.contact-panel__summary {
  max-width: 50ch;
  text-wrap: pretty;
  font-size: var(--size-step-1);
}

@media (min-width: 780px) {
  .contact-panel__inner {
    width: 100%;
    margin-inline-start: 0;
    transform: none;
    border-radius: var(--radius-pinched);
  }
}

@media (prefers-contrast: more) {
  .contact-panel__decor {
    display: none;
  }
}

.cta {
  --cta-bg: var(--color-light);
  --cta-text: var(--color-dark);
  --focus-color: var(--color-light);

  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: var(--leading-flat);
  font-size: var(--size-step-0);
  font-weight: var(--font-bold);
  text-align: left;
  background: var(--cta-bg);
  gap: var(--space-s);
  padding: 1.1em 1.3em;
  color: var(--cta-text);
  text-decoration: none;
  border: var(--stroke-high-contrast);
  border-radius: var(--radius);
  cursor: pointer;
}

.cta:hover,
.cta:focus {
  --cta-bg: var(--color-primary-bright);
  outline: 2px solid var(--focus-color, currentColor);
  outline-offset: var(--focus-offset);
}

/* Add a subtle squish on tap */

.cta:active {
  transform: scale(0.99);
}

.cta svg {
  height: 1.4ch; /* Bug fix for ios white space wrapping when the ex unit is used */
  width: auto;
}

/* EXCEPTIONS */

.cta[data-cta-variant="secondary"] {
  --focus-color: var(--color-dark);
  --cta-bg: var(--color-bright);
  --cta-text: var(--color-dark);
}

.cta[data-cta-variant="secondary"]:focus-visible,
.cta[data-cta-variant="secondary"]:hover {
  --cta-bg: var(--color-bright-glare);
}

.cta[data-cta-variant="animation"] {
  --focus-color: var(--color-bright);
  --cta-bg: transparent;
  --cta-text: var(--color-bright);

  padding: 1.1em;
  gap: var(--space-xs);
}

.cta[data-cta-variant="animation"]:focus-visible,
.cta[data-cta-variant="animation"]:hover {
  --cta-text: var(--color-light);
}

/*
  IMPORTANT 

  This is a re-skin of the existing disclosure widget from the previous design. All the 
  existing short codes and front-end JS code will work exactly the same. 
*/

.tl-disclosure__control,
.tl-disclosure__placeholder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--space-xs);
  border: var(--stroke);
  line-height: var(--leading-compact);
  padding: var(--space-s);
  background: var(--color-light);
  font-weight: var(--font-medium);
  font-size: var(--size-step-0);
  color: var(--color-primary);
  text-align: left;
  cursor: pointer;
}

.tl-disclosure__control:focus-visible,
.tl-disclosure__control:hover {
  background: var(--color-light-shade);
}

.tl-disclosure__control:not([aria-expanded="false"]):not([aria-expanded="true"])
  .tl-disclosure__icon {
  display: none;
}

.tl-disclosure__control svg {
  height: auto;
  width: 1.5ch;

  color: var(--color-inclusive);
}

.tl-disclosure__control path {
  stroke-width: 3px;
}

/* Increase icon contrast in HCM */

@media (prefers-contrast: more) {
  .tl-disclosure__control svg {
    color: LinkText;
  }
}

button.tl-disclosure__control[aria-expanded="true"] svg {
  transform: rotate(-180deg);
}

button.tl-disclosure__control[aria-expanded="false"] + .tl-disclosure__content {
  display: none;
}

.tl-disclosure__icon {
  stroke: var(--color-inclusive);
  border: none !important; /* Styles are inherited from a more specific prose selector. This is preferred to generating a higher specificity selector */
}

.tl-disclosure__content {
  margin: 0;
  padding: var(--space-s);
}

.tl-disclosure__content:has(iframe) {
  padding: 0;
}

@media (min-width: 1400px) {
  .tl-disclosure__content .stack-nav a {
    padding-block-start: var(--space-xs);
    padding-block-end: var(--space-xs);
  }
}

.emphasise {
  position: relative;
  font-style: normal;
}

.emphasise::after {
  content: '';
  display: block;
  height: 0.5ch;
  pointer-events: none;
  background-image: url(/_images/swoosh.svg);
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.1em;
}

.facts-box {
  --facts-box-marker-size: 1.2em;
  --spot-color: var(--color-ethical);
  position: relative;
  padding: var(--space-m-l);
  border-radius: var(--radius-pinched);
  background-color: var(--color-light);
  background-image: var(--gradient-light-grey);
  color: var(--color-primary);
  /*border:1px solid var(--color-primary);*/
  border:1px solid var(--color-inclusive);
}

.facts-box h2,
.facts-box h3 {
  color: var(--color-primary);
}

.facts-box ::marker {
  color: var(--color-primary);
}

.facts-box::before {
  inset: var(--space-m) auto auto var(--space-m);
}

.facts-box::after {
  inset: auto var(--space-m) var(--space-m) auto;
  transform: rotate(180deg);
}

/* Colour variants */

.facts-box[data-facts-box-variant="bold"] {
  background-color: var(--color-primary);
  background-image: var(--gradient-standard);
  border: none;
}

.facts-box[data-facts-box-variant="flat"] {
  --spot-color: var(--color-bright);
  background: var(--color-inclusive);
  border: none;
}

.facts-box[data-facts-box-variant="bold"],
.facts-box[data-facts-box-variant="flat"] {
  color: var(--color-light);
}

.facts-box[data-facts-box-variant="bold"] h2,
.facts-box[data-facts-box-variant="flat"] h2,
.facts-box[data-facts-box-variant="bold"] h3,
.facts-box[data-facts-box-variant="flat"] h3,
.facts-box[data-facts-box-variant="bold"] ::marker,
.facts-box[data-facts-box-variant="flat"] ::marker {
  color: var(--color-light);
}

/* Media query adjustments */

@media (min-width: 1400px) {
  .facts-box {
    padding: var(--space-xl);
  }

  /* 
    Outdent exception
  
    The container query determines if its container is not stacked by determining if 
    that container is less than 35vw. This guarantees the screen is large enough to deal with this blowout. 
    Ideally, we'd use the --wrapper-width custom property to determine the query, but that's not currently available.
  */
  .facts-box[data-outdent] {
    width: clamp(120%, 35vw, 130%);
  }
}

.feed {
  --sidebar-target-width: 15rem;
  --sidebar-content-min-width: 60%;
  --gutter: var(--space-l-2xl);
}

.feed > * {
  container-type: inline-size;
}

.feed__sidebar {
  height: 100%;
  border-block-end: var(--stroke);
  padding: 0 0 var(--space-m) 0;
}

.feed__sidebar h2 {
  font-size: var(--size-step-2);
  line-height: var(--leading-loose);
}

@container (max-width: 40vw) {
  .feed__sidebar {
    border-inline-end: var(--stroke);
    border-block-end: none;
    padding: 0 var(--space-m) 0 0;
  }
}

.headline {
  --flow-space: var(--space-s-m);

  color: var(--color-primary);
}

.headline a {
  color: currentColor;
}

.headline p {
  font-size: var(--size-step-00);
}

/* A tighter flow space for heading levels below h1 */

.headline :is(h2, h3, h4) + * {
  --flow-space: var(--space-xs-s);
}

.hero {
  font-size: var(--size-step-1);
  background: var(--color-primary);
  color: var(--color-light);
  padding: var(--space-xl-2xl) 0 var(--space-xl-3xl) 0;
}

.hero b {
  color: currentColor;
}

.hero__heading {
  font-size: var(--size-step-6);
  color: currentColor;
}

.hero .sidebar {
  --sidebar-target-width: 28rem;
  --sidebar-content-min-width: 60%;
  --gutter: var(--space-l) var(--space-l-xl);
  align-items: center;
}

.hero .lede {
  --flow-space: 1em;
}

.hero .hero__animation {
  flex-basis: 20rem !important;
}

.hero svg.shapes-animation {
  display: block;
  max-width: 100%;
  height: auto;
}

@media (min-width: 780px) {
  .hero__heading {
    font-size: var(--size-step-7);
  }
}

@media (min-width: 1300px) {
  .hero svg.shapes-animation {
    width: unset;
    height: auto;
    width: 100%;
    max-width: 25rem;
  }
}

@media (min-width: 1400px) {
  .hero__heading {
    font-size: var(--size-step-8);
  }

}

@media (min-width: 1500px) {
  .hero__animation {
    transform: translateX(10%);
  }

  .hero__animation .cta {
    position: absolute;
    bottom: -5rem;
    right: 0;
  }
}

.icon-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0 var(--space-xs);
  padding-block-start: var(--space-s);
  padding-block-end: var(--space-s);
  font-size: var(--size-step-0);
  color: currentColor;
}

.icon-link svg {
  height: 1.5ex;
  width: auto;
  transform: translateY(0.2ex);
}

.icon-link:focus-visible,
.icon-link:hover {
  text-underline-offset: 0.2ex;
}

.icon-link[data-icon-link-large] svg {
  height: 1.75ex;
}

@media (min-width: 1300px) {
  .icon-link {
    padding-block-start: var(--space-xs);
    padding-block-end: var(--space-xs);
  }
}

p:has(.inline-image),
svg.inline-image,
legend:has(.inline-image) {
  container-type: normal;
  display: block;
  float: right;
  margin: 1em;
  position: relative;
}

figure.inline-image__container {
  float: right;
  height: max-content;
  margin: 0;
  max-height: max-content;
  padding: 0.25em;
  width: max-content;
}

.inline-image__container > .inline-image {
  float: none;
  margin: 1em 1em 0.5em 1em;
}

p:has(.inline-image.inline-image__left-float) {
  float: left !important;
}

/* .inline-image__outlined {
  border: 0.25em solid var(--color-primary-glare) !important;
}

.inline-image__rounded {
  border-radius: 0 var(--radius-xl) 0 var(--radius-xl);
}

.inline-image__branded {
  border: 0.25em solid var(--color-primary-glare) !important;
  border-radius: 0 var(--radius-xl) 0 var(--radius-xl);
  position: relative;
}

p:has(.inline-image__branded)::before {
  background-color: rgb(246 243 248 / var(--tw-bg-opacity));
  border: 0.5rem solid var(--color-ethical, currentColor);
  border-radius: 100%;
  content: "";
  display: block;
  height: 2.5rem;
  left: calc(0% - 1rem);
  position: absolute;
  top: calc(0% - 1rem);
  width: 2.5rem;
  z-index: 1;
}

p:has(.inline-image__branded)::after {
  background-color: rgb(246 243 248 / var(--tw-bg-opacity));
  border: 0.5rem solid var(--color-inclusive, currentColor);
  border-radius: 100%;
  content: "";
  display: block;
  height: 2.5rem;
  left: calc(100% - 1.5rem);
  position: absolute;
  top: calc(100% - 1.5rem);
  width: 2.5rem;
  z-index: 1;
} */

@media (max-width:35rem) {
  p:has(.inline-image),
  svg.inline-image,
  figure.inline-image__container {
    float: none;
    margin: var(--flow-space, 1em) auto;
    max-width: max-content !important;
  }
}

.lede {
  --flow-space: 0.8em;

  font-weight: var(--font-bold);
  font-size: var(--size-step-2);
  line-height: var(--leading-compact);
}

.listing-item {
  --sidebar-target-width: clamp(80px, 15vw, 120px);
  --sidebar-content-min-width: 70%;
  --gutter: var(--space-s) var(--space-l);
}

/* Adds plenty of space between items */

.listing-item {
  --flow-space: var(--space-l-xl);
}

.listing-item + .listing-item {
  border-block-start: var(--stroke);
  padding-block-start: var(--flow-space);
}

.listing-item__heading {
  font-size: var(--size-step-3);
}

.listing-item__heading a {
  color: currentColor;
}

.listing-item__header {
  font-size: var(--size-step-0);
}

.listing-item__header p {
  margin-block-start: var(--space-xs);
}

.listing-item__content {
  --flow-space: var(--space-m);
}

.listing-item__footer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  font-size: var(--size-step-0);
  gap: var(--space-xs);
}

.listing-item__categories {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  font-size: var(--size-step-0);
  gap: var(--space-xs);
  list-style-type: '';
  padding: 0;
  margin: 0;
}

/* When the sidebar stacks, we don't want the avatar to blow out */

.listing-item .avatar {
  max-width: var(--sidebar-target-width);
}

/* Ensure the focus style fully wraps the svg in the listing item indent */

.listing-item__indent svg {
  display: block;
}

@media (max-width: 799px) {
  .listing-item[data-reversed]:not(:has(> :empty)) {
    flex-direction: column-reverse;
  }

  .listing-item[data-reversed][data-direction="rtl"] > :last-child {
    flex-basis: 0;
  }
}

.logo-wall {
  --gutter: var(--space-s-l);
  --grid-min-item-size: clamp(4rem, 16%, 7rem);
  --grid-placement: auto-fit;
}

.logo-wall li {
  display: grid;
  place-items: center;
  justify-content: center;
  align-content: center;
  background: var(--color-light);
  aspect-ratio: 1/0.75;
  border-radius: var(--radius-pinched);
  border: var(--stroke-high-contrast);
}

.logo-wall img {
  max-width: 50%;
  object-fit: cover;
  filter: grayscale(1) contrast(2);
}

/* remove naive SVG high contrast rule

@media (prefers-contrast: more) {
  .logo-wall img[src*=".svg"] {
    filter: brightness(0) invert(1);
  }
}

*/

@media (min-width: 1400px) {
  .logo-wall img {
    max-width: 60%;
  }
}

.mc-success-message,
.mc-error-message {
  color: var(--color-light);
  background: var(--color-primary);
  padding: var(--space-s) var(--space-m);
}

.mc-success-message:focus-visible,
.mc-error-message:focus-visible {
  outline: 2px solid var(--focus-color, currentColor);
}

.navigation {
  --tap-size-horizontal-padding: 0.5em;
  line-height: var(--leading-flat);
}

.navigation .cluster {
  --gutter: var(--space-xs-s);
}

.navigation li a {
  padding: var(--space-s) var(--tap-size-horizontal-padding);
  color: var(--color-primary);
  font-weight: var(--font-bold);
  text-decoration: underline;
  text-decoration-color: rgba(66, 0, 101, 0.5);
  text-underline-offset: 0.3ex !important;
}

.navigation li a:focus-visible,
.navigation li a:hover,
.navigation li a[aria-current="page"],
.navigation li a[aria-current="true"] {
  color: var(--color-inclusive-shade);
}

.navigation li a[aria-current="page"],
.navigation li a[aria-current="true"] {
  text-decoration-color: currentColor;
  text-decoration-thickness: 0.35ex;
  text-underline-offset: 0.2ex !important;
}

@media (max-width: 799px) {
  .navigation li a {
    display: inline-block;
  }
}

.pagination {
  --gutter: var(--space-xs);
  --grid-min-item-size: 3.7rem;
  --focus-color: var(--color-inclusive-shade);
}

.pagination a {
  display: block;
  line-height: var(--leading-flat);
  font-size: var(--size-step-1);
  text-decoration: none;
  text-align: center;
  background: var(--color-inclusive-shade);
  color: var(--color-light);
  padding: 0.7em 0;
  outline-offset: 2px;
}

.pagination a[aria-current="page"] {
  background: var(--color-primary);
  font-weight: var(--font-bold);
  text-decoration: underline;
  text-decoration-thickness: 0.3ex;
}

.pagination a[aria-current="page"] b {
  color: currentColor;
}

.pagination a:focus-visible,
.pagination a:hover {
  background: var(--focus-color);
}

.prose {
  --flow-space: var(--space-l);

  line-height: var(--leading-loose);
  font-size: var(--size-step-1);
}

.prose h1 {
  max-width: 35ch;
}

.prose h1, h2 {
  overflow-wrap: anywhere;
}

/* Increase legibility by limiting line lengths */

.prose :is(p, li, dl, figcaption) {
  max-width: 65ch;
}

.prose blockquote {
  max-width: 60ch;
}

.prose .unconstrained {
  max-width: unset !important; /* Override utility class */
}

/* Heading flow for elements that follow them */

.prose :is(h1, h2, h3, h4, h5, h6) + *:not([class]) {
  --flow-space: var(--space-m);
}

/* Add more space for figures and tables etc */

.prose :is(figure, table),
.prose :is(figure, table) + * {
  --flow-space: var(--space-xl-2xl);
}

/* Add more space to headings on block start */

.prose * + :is(h1, h2, h3, h4):not([class]) {
  --flow-space: var(--space-xl);
}

/* Flow for list items */

.prose :is(ul, ol):not([class]) li + li,
.prose :is(ul, ol):not([class]) li > :is(ol, ul) {
  margin-block-start: var(--space-xs);
}

/* Add a subtle stroke to media in case the background blends with the prose container */

.prose :is(img, picture, video, svg[width][height]) {
  border: 1px solid var(--color-mid-glare);
}

/* Reset global SVG rules for prose SVGs because they're likely a diagram etc */

.prose svg[width][height] {
  width: unset;
  height: unset;
  max-width: 100%;
  padding: var(--space-xs);
}

/* Currently doesn't work, as also catches list items with a link and text nodes
.prose ul:not(.text-inclusive) li *:only-child:is(a) {
  max-width: max-content;
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
}
*/

/* Add lots of space for horizontal rules */

hr {
  --flow-space: var(--space-xl-2xl);
}

/* If the prose block is a child element of bg-primary-bright, we need to adjust the pseudo-element bg */

.bg-primary-bright .prose hr::after {
  background: var(--color-primary-bright);
}

/* Make the same adjustment for table wrapper */

.bg-primary-bright .prose .table-wrapper {
  --table-wrapper-background: var(--color-primary-bright);
}

@media (min-width: 780px) {
  .prose h1 {
    overflow-wrap: unset;
  }
}

.pull-quote {
  --pull-quote-marker-size: 1.2em;
  --spot-color: var(--color-ethical);
  --pull-quote-decor-color: var(--color-light);
  --pull-quote-decor-opacity: 5%;

  position: relative;
  max-width: 60ch;
  background-color: var(--color-primary);
  background-image: var(--gradient-standard);
  color: var(--color-light);
  padding: var(--space-m-l);
  font-weight: var(--font-medium);
  border-radius: var(--radius-pinched);
  border: var(--stroke-high-contrast);
}

.pull-quote blockquote {
  padding: 0;
  border: 0;
}

.pull-quote__caption {
  display: flex;
  gap: var(--space-s);
  align-items: center;
  font-family: var(--font-base);
  font-weight: var(--font-bold);
  text-align: left;
  padding: 0;
  margin-block-start: var(--space-m);
}

/* This is the little circular mark that prefixes the quote author */

.pull-quote__caption::before {
  content: "";
  display: block;
  position: relative;
  width: var(--pull-quote-marker-size);
  height: var(--pull-quote-marker-size);
  border: 4px solid var(--spot-color, currentColor);
  border-radius: var(--pull-quote-marker-size);
  z-index: 1;
  flex: none;
}

.pull-quote :is(blockquote, .pull-quote__caption) {
  position: relative;
  z-index: 1;
}

/* Quote mark decoration */

.pull-quote::before,
.pull-quote::after {
  content: "";
  background: var(--pull-quote-decor-color);
  opacity: var(--pull-quote-decor-opacity);
  display: block;
  width: 18%;
  aspect-ratio: 1/0.8;
  position: absolute;
  z-index: 0;
  /* This clip path gives us the quote mark shape */
  /* prettier-ignore */
  clip-path: polygon( 58.404% 99.982%,58.404% 58.929%,58.404% 58.929%,58.861% 49.735%,60.196% 41.188%,62.353% 33.318%,65.277% 26.161%,68.913% 19.747%,73.205% 14.111%,78.098% 9.286%,83.538% 5.303%,89.468% 2.197%,95.833% 0%,99.979% 11.948%,99.979% 11.948%,97.051% 13.764%,94.357% 16.104%,91.915% 18.891%,89.742% 22.047%,87.856% 25.497%,86.274% 29.162%,85.014% 32.966%,84.092% 36.831%,83.526% 40.68%,83.333% 44.437%,100% 44.437%,100% 99.982%,58.404% 99.982%,0% 99.982%,41.596% 99.982%,41.596% 44.437%,25% 44.437%,25.192% 40.68%,25.758% 36.831%,26.68% 32.966%,27.941% 29.162%,29.523% 25.497%,31.41% 22.047%,33.583% 18.891%,36.026% 16.104%,38.72% 13.764%,41.65% 11.948%,41.65% 11.948%,37.5% 0%,31.132% 2.197%,25.197% 5.303%,19.749% 9.286%,14.846% 14.111%,10.544% 19.747%,6.898% 26.161%,3.964% 33.318%,1.799% 41.188%,0.459% 49.735%,0% 58.929%,0% 58.929%,0% 99.982% );
}

.pull-quote::before {
  inset: var(--space-m) auto auto var(--space-m);
}

.pull-quote::after {
  inset: auto var(--space-m) var(--space-m) auto;
  transform: rotate(180deg);
}

/* Colour variants */

.pull-quote[data-pull-quote-variant="light"] {
  --pull-quote-decor-color: var(--color-primary);
  --pull-quote-decor-opacity: 3%;

  background-color: var(--color-light);
  background-image: var(--gradient-light);
  color: var(--color-primary);
}

.pull-quote[data-pull-quote-variant="muted"] {
  background-color: var(--color-primary);
  background-image: var(--gradient-deep);
}

.pull-quote[data-pull-quote-variant="flat"] {
  --spot-color: var(--color-bright);
  --pull-quote-decor-opacity: 7%;
  background: var(--color-inclusive);
}

/* Media query adjustments */

@media (min-width: 1400px) {
  .pull-quote {
    padding: var(--space-xl);
  }

  /* 
    Outdent exception
  
    The container query determines if its container is not stacked by determining if 
    that container is less than 35vw. This guarantees the screen is large enough to deal with this blowout. 
    Ideally, we'd use the --wrapper-width custom property to determine the query, but that's not currently available.
  */
  .pull-quote[data-outdent] {
    width: clamp(120%, 35vw, 130%);
  }
}

.services {
  --sidebar-target-width: 30rem;

  background: var(--color-primary);
  color: var(--color-light);
}

.services b {
  color: currentColor;
}

.services__item {
  --gutter: var(--space-m) var(--space-l-2xl);
}

.services__item .icon-link {
  font-size: var(--size-step-1);
}

.services__heading {
  display: flex;
  align-items: flex-start;
  gap: var(--space-m);
  color: var(--color-light);
  font-size: var(--size-step-4);
  position: relative;
}

.services__icon {
  border: 0 !important;
  min-height: 5em;
  height: 100%;
  max-width: 100%;
  max-height: 10em;
  --flow-space: var(--space-m-l);
}

.services__item .icon-link {
  padding-block-start: var(--space-xs);
  padding-block-end: var(--space-xs);
}

/* EXCEPTIONS */

.services[data-services-variant="light"] {
  background: var(--color-primary-bright);
  color: var(--color-charcoal);
}

.services[data-services-variant="light"] .services__heading {
  color: var(--color-primary);
}

.services[data-services-variant="light"] .services__icon {
  color: var(--color-inclusive);
}

@media (min-width: 1300px) {
  .services__item .icon-link {
    padding-block-start: var(--space-2xs);
    padding-block-end: var(--space-2xs);
  }
}

@media (min-width: 1500px) {
  .services__item {
    --sidebar-content-min-width: 30%;
  }

  .services__item.sidebar > :first-child {
    flex-grow: 0;
  }

  .services__item.sidebar > :last-child {
    max-width: 38rem;
    margin-inline-start: 0;
    margin-inline-end: auto;
  }

  .services__item.sidebar > :last-child p {
    text-wrap: balance;
  }
}

.sidebar-CTA {
  background:var(--color-dark);
  color:var(--color-light);
  padding: var(--space-m);
  border-radius: var(--radius-pinched-small);
  font-size: var(--size-step-0);
  margin-block-start: 1em;
  margin-block-end: 1em;

}

.sidebar-CTA h2 {
  color:var(--color-light);
}

.sidebar-CTA button {
  width:100%;
  margin-block-start: 1em;
}

/* Colour variants */

.sidebar-CTA[data-sidebar-CTA-variant="light"] {

  background-color: var(--color-light);
  background-image: var(--gradient-light-grey);
  color: var(--color-primary);
  border:1px solid var(--color-mid);
}

.sidebar-CTA[data-sidebar-CTA-variant="muted"] {
  background-color: var(--color-mid-shade);
  background-image:none;
}

.sidebar-CTA[data-sidebar-CTA-variant="flat"] {
  --spot-color: var(--color-bright);
  background: var(--color-inclusive);
}

.sidebar-CTA[data-sidebar-CTA-variant="light"] h2 {
  color:var(--color-primary);
}

.sidebar-callout {
  background:var(--color-dark);
  color:var(--color-light);
  padding: var(--space-m);
  border-radius: var(--radius-pinched-small);
  font-size: var(--size-step-0);
  margin-block-start: 3rem;
  margin-block-end: 3rem;

}

.sidebar-callout a,
.sidebar-callout h2,
.sidebar-callout h3 {
  color:var(--color-light);
  margin-block-end: 1rem;
}

.sidebar-callout h2 {
  font-size: 1.4rem;
}

/* Colour variants */

.sidebar-callout[data-sidebar-callout-variant="light"] {
  background-color: var(--color-light);
  background-image: var(--gradient-light-grey);
  color: var(--color-primary);
  border:1px solid var(--color-mid);
}

.sidebar-callout[data-sidebar-callout-variant="light"] a {
  color: var(--color-primary);
}

.sidebar-callout[data-sidebar-callout-variant="flat"] {
  --spot-color: var(--color-bright);
  background: var(--color-inclusive);
}

.sidebar-callout[data-sidebar-callout-variant="muted"] {
  background-color: var(--color-primary);
  background-image: var(--gradient-deep);
}

.sidebar-callout[data-sidebar-callout-variant="muted"] a {
  color:var(--color-light);
}

.site-foot {
  --tap-size-horizontal-padding: 0.5em;
  color: var(--color-primary);
  padding: 0 0 var(--space-l-xl) 0;
}

.site-foot__contact-item {
  display: flex;
  align-items: flex-start;
  font-weight: var(--font-bold);
  gap: var(--space-s);
}

.site-foot__contact-item svg {
  height: 1.1em;
  width: auto;
  transform: translateY(0.3ex);
}

.site-foot hr {
  --flow-space: var(--space-m-l);
}

.site-foot hr::after {
  display: none;
}

.site-foot__company-info {
  max-width: 35ch;
}

.site-foot__company-info ~ * > a {
  display: inline-block;
  min-height: 44px;
  padding-block: 0.5em;
}

.site-foot .navigation,
.site-foot .social-icons {
  margin-inline-start: calc(var(--tap-size-horizontal-padding) * -1);
}

@media (min-width: 780px) {
  .site-foot .social-icons {
    --flow-space: var(--space-s);
    width: max-content;
    margin-inline-start: auto;
  }

  .site-foot .navigation {
    margin-inline-end: calc(var(--tap-size-horizontal-padding) * -1);
    margin-inline-start: 0;
  }
}

@media (min-width: 1300px) {
  .site-foot__company-info {
    max-width: unset;
  }
}

.site-head {
  padding: var(--space-s-m) 0;
  position: relative;
  z-index: 2;
  border-block-end: var(--stroke-high-contrast);
}

.site-head .wrapper {
  container-type: inline-size;
  gap: var(--space-s);
}

.site-head .navigation {
  flex: auto;
}

@media (min-width: 780px) {
  .site-head .navigation {
    flex: unset;
  }
}

.skip-link {
  z-index: 1;
  outline-offset: var(--focus-offset);
  outline-width: 2px;
  margin-block-end: var(--space-m);
}

.skip-link:not(:focus) {
  display: inline-block;
  height: 1px;
  width: 1px;
  min-width: auto;
  max-width: fit-content;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute;
  right: 0;
  top: -1rem;
}

.social-icons {
  --gutter: var(--space-s);
  --tap-space: 0.55em;
  --icon-size: var(--space-m);
}

.social-icons a {
  color: var(--color-dark);
  display: block;
  padding: var(--tap-space);
}

.social-icons a:focus-visible,
.social-icons a:hover {
  color: var(--color-inclusive);
}

/* Helps to align these on a grid line by accounting for the extra tap space */

.social-icons li:last-of-type {
  margin-inline-end: calc(var(--tap-space) * -1);
}

.social-icons svg {
  width: var(--icon-size);
  height: auto;
}

/* Large variant */

.social-icons[data-si-size="large"] {
  --tap-space: 0;
  --icon-size: var(--space-l);
}

.stack-nav {
  font-size: var(--size-step-0);
  line-height: var(--leading-compact);
}

.stack-nav a {
  display: flex;
  justify-content: space-between;
  padding-block-start: var(--space-s);
  padding-block-end: var(--space-s);
}

.stack-nav a[aria-current="page"],
.stack-nav a[aria-current="true"] {
  text-decoration-thickness: 0.35ex;
}

@media (min-width: 1300px) {
  .stack-nav a {
    padding-block-start: var(--space-s);
    padding-block-end: var(--space-s);
  }
}

.stepper {
  --stepper-y-space: 1.4em;
  --stepper-modifier: 1.5ex;
  --stepper-line-width: 3px;
  --stepper-marker-size: 1.2em;

  color: var(--color-primary);
  font-size: var(--size-step-2);
  line-height: var(--leading-compact);
}

.stepper li {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-m-l);
}

.stepper li + li {
  margin-block-start: var(--space-l);
}

.stepper li::before,
.stepper li::after {
  content: "";
  display: block;
  border: var(--stepper-line-width) solid var(--color-primary-glare);
  position: absolute;
  left: calc((var(--stepper-marker-size) / 2) - var(--stepper-line-width));
}

/* Up line */

.stepper li::before {
  height: calc(var(--stepper-y-space) + var(--stepper-modifier));
  bottom: 50%;
}

/* Down line */

.stepper li::after {
  height: 100%;
  top: 50%;
}

/* Hides the first item's up line and the last item's down line */

.stepper li:last-of-type::after,
.stepper li:first-of-type::before {
  content: unset;
}

/* Decorative only element that acts as a marker */

.stepper__marker {
  display: block;
  position: relative;
  width: var(--stepper-marker-size);
  height: var(--stepper-marker-size);

  /* We need a background so the lines don't show through the circle */
  background: var(--color-light);
  border: 8px solid var(--spot-color, currentColor);
  border-radius: 1em;
  z-index: 1;
  flex: none;
}

.stepper p {
  max-width: 24ch;
}

/* EXCEPTIONS */

.stepper[data-stepper-variant="light"] {
  color: var(--color-light);
}

.stepper[data-stepper-variant="light"] .stepper__marker {
  background: var(--color-primary);
}

.stepper[data-stepper-variant="light"] .stepper__marker b {
  color: currentColor;
}

/* An automatically applied wrapper for table elements (via markdownit) that makes them much 
    more useful for smaller viewports */

.table-wrapper {
  --table-wrapper-background: var(--color-light);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;

  /* Creates a shadow when there is overflow content to see on both inline sides */
  background:
    linear-gradient(
      to right,
      var(--table-wrapper-background) 30%,
      rgb(255 255 255 / 0%)
    ),
    linear-gradient(
        to right,
        rgb(255 255 255 / 0%),
        var(--table-wrapper-background) 70%
      )
      0 100%,
    radial-gradient(farthest-side at 0% 50%, rgb(0 0 0 / 20%), rgb(0 0 0 / 0%)),
    radial-gradient(
        farthest-side at 100% 50%,
        rgb(0 0 0 / 20%),
        rgb(0 0 0 / 0%)
      )
      0 100%;
  background-repeat: no-repeat;
  background-size:
    40px 100%,
    40px 100%,
    14px 100%,
    14px 100%;
  background-position:
    0 0,
    100%,
    0 0,
    100%;
  background-attachment: local, local, scroll, scroll;
}

.table-wrapper table {
  min-width: 30rem;
  width: 100%;
}

.table-wrapper :is(td, th) {
  min-width: 8rem;
}

.table-wrapper :is([colspan], [rowspan]) {
  min-width: 15rem;
}

.table-wrapper:focus {
  outline: 2px solid var(--focus-color, currentColor);
  outline-offset: var(--focus-offset);
}

.tabs__triggers[role="tablist"] {
  display: flex;
  padding: 0;
  transform: translateY(1px);
}

.tabs__triggers[role="tablist"] a {
  --focus-offset: -6px;
  display: inline-block;
  position: relative;
  border: var(--stroke);
  background: var(--color-light-shade);
  text-decoration: none;
  padding: var(--space-s) var(--space-m);
}

.tabs__triggers[role="tablist"] a:not([aria-selected]) {
  color: var(--color-mid-shade);
}

.tabs__triggers[role="tablist"] a[aria-selected] {
  border: var(--stroke);
  background: var(--color-light);
  font-weight: var(--font-medium);
  z-index: 1;
}

/* Creates a "mask" to hide the bottom border, so the active tab looks like it's related to the panel */

.tabs__triggers[role="tablist"] a[aria-selected]::after {
  content: "";
  width: 100%;
  height: 1px;
  background: var(--color-light);
  position: absolute;
  bottom: -1px;
  left: 0;
}

.tabs__triggers[role="tablist"] li + li :is(a, a[aria-selected]) {
  border-left: 0;
}

.tabs__triggers[role="tablist"] [aria-selected] svg {
  display: none;
}

.tabs__panel[role="tabpanel"] {
  border: var(--stroke);
  padding: var(--space-m);
}

.tabs__panel:not([role="tabpanel"]) {
  margin-top: var(--space-l);
  border-top: var(--stroke);
  padding-top: var(--space-m);
}

@media (max-width: 799px) {
  .tabs__triggers[role="tablist"] {
    display: block;
  }

  .tabs__triggers[role="tablist"] a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: var(--stroke);
  }

  .tabs__triggers[role="tablist"] li + li :is(a, a[aria-selected]) {
    border-top: 0;
    border-left: var(--stroke);
  }

  .tabs__triggers[role="tablist"] [aria-selected] {
    position: static;
  }

  .tabs__triggers[role="tablist"] [aria-selected] svg {
    display: block;
    width: 1em;
    height: 1em;
  }

  .tabs__panel[role="tabpanel"] {
    border-top: 0;
  }
}

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

.team h2 {
  color: var(--color-light);
  font-size: var(--size-step-6);
}

.team h3 {
  color: var(--color-light);
  font-size: var(--size-step-2);
}

.team h3 a {
  color: var(--color-light);
  font-size: var(--size-step-2);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.team a:not([class]) {
  color: var(--color-bright);
  min-height: 44px;
}

.team b {
  color: currentColor;
}

.team .sidebar {
  --gutter: var(--space-m) var(--space-l-2xl);
  margin-block-start: var(--space-l-xl);
}

.team .lede {
  max-width: 30ch;
}

.team__members {
  --repel-vertical-alignment: flex-end;
  padding: var(--space-m-l);
  border-radius: var(--radius-pinched);
  border: var(--stroke-high-contrast);
  background: var(--gradient-subtle);
  background-repeat: no-repeat;
  max-width: 45rem;
}

.team__members p {
  max-width: 30ch;
}

.team__featured {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-m);
}

.watermark {
  pointer-events: none;
}

.watermark__shape {
  z-index: 0;
  position: absolute;
}

.watermark__shape path {
  opacity: 0.05;
}

.watermark__shape.tetra {
  width: 458px;
  height: auto;
  max-width: none;
  top: -25%;
  right: -60%;
}

.watermark__shape.circle {
  width: 264px;
  height: auto;
  max-width: none;
}

.watermark__shape.line {
  width: 354px;
  height: auto;
  max-width: none;
}

.watermark__shape[data-watermark-position="top-right"] {
  top: 0;
  right: 0;
}

.watermark__shape[data-watermark-position="top-left"] {
  top: 0;
  left: 0;
}

.watermark__shape[data-watermark-position="bottom-right"] {
  bottom: 0;
  right: 0;
}

.watermark__shape[data-watermark-position="bottom-left"] {
  bottom: 0;
  left: 0;
}

.watermark__shape[data-watermark-position="middle-left"] {
  top: 50%;
  left: 0;
}

.watermark__shape[data-watermark-position="middle-right"] {
  top: 50%;
  right: 0;
}

.watermark__shape[data-watermark-position="middle-left"][data-overlap-x="50-50"] {
  transform: translateY(-50%) translateX(-50%);
}

.watermark__shape[data-watermark-position="top-right"][data-watermark-overlap-y="30-70"][data-overlap-x="50-50"] {
  transform: translateY(-30%) translateX(50%);
}

.watermark__shape[data-watermark-position="top-left"][data-watermark-overlap-y="30-70"][data-overlap-x="50-50"] {
  transform: translateY(-30%) translateX(-50%);
}

.watermark__shape[data-watermark-position="bottom-left"][data-watermark-overlap-y="70-30"][data-overlap-x="50-50"] {
  transform: translateY(70%) translateX(-50%);
}

.watermark__shape[data-watermark-position="bottom-right"][data-watermark-overlap-y="30-70"][data-overlap-x="50-50"] {
  transform: translateY(70%) translateX(50%);
}

.watermark__shape[data-watermark-position="middle-right"][data-watermark-overlap-y="40-0"][data-overlap-x="50-50"] {
  transform: translateY(40%) translateX(50%);
}

.watermark__shape[data-watermark-position="top-right"][data-watermark-overlap-y="60-0"][data-overlap-x="50-50"] {
  transform: translateY(60%) translateX(50%);
}

.watermark__shape[data-watermark-position="bottom-left"][data-watermark-overlap-y="20-0"][data-overlap-x="50-50"] {
  transform: translateY(20%) translateX(-50%);
}

@media (min-width: 780px) {
  .watermark__shape.tetra {
    width: 758px;
    top: -50%;
    right: -15%;
  }

  .watermark__shape.circle {
    width: 564px;
  }

  .watermark__shape.line {
    width: 554px;
  }
}

@media (prefers-contrast: more) {
  .watermark {
    display: none;
  }
}

/*
CLUSTER
More info: https://every-layout.dev/layouts/cluster/
A layout that lets you distribute items with consitent
spacing, regardless of their size

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-s-m)): This defines the space
between each item.

--cluster-horizontal-alignment (flex-start) How items should align
horizontally. Can be any acceptable flexbox aligmnent value.

--cluster-vertical-alignment How items should align vertically.
Can be any acceptable flexbox alignment value.
*/

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-s-m));
  justify-content: var(--cluster-horizontal-alignment, flex-start);
  align-items: var(--cluster-vertical-alignment, center);
}

/* AUTO GRID
Related Every Layout: https://every-layout.dev/layouts/grid/
More info on the flexible nature: https://piccalil.li/tutorial/create-a-responsive-grid-layout-with-no-media-queries-using-css-grid/
A flexible layout that will create an auto-fill grid with
configurable grid item sizes

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-s-m)): This defines the space
between each item.

--grid-min-item-size (14rem): How large each item should be
ideally, as a minimum.

--grid-placement (auto-fill): Set either auto-fit or auto-fill
to change how empty grid tracks are handled */

.grid {
  display: grid;
  grid-template-columns: repeat(
    var(--grid-placement, auto-fill),
    minmax(var(--grid-min-item-size, 16rem), 1fr)
  );
  gap: var(--gutter, var(--space-s-l));
}

/* Three column grid layout */

.grid[data-grid-layout='thirds'] {
  --grid-placement: auto-fit;
  --grid-min-item-size: clamp(16rem, 33vw, 23rem);
}

/*
REPEL
A little layout that pushes items away from each other where
there is space in the viewport and stacks on small viewports

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-s-m)): This defines the space
between each item.

--repel-vertical-alignment How items should align vertically.
Can be any acceptable flexbox alignment value.
*/

.repel {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: var(--repel-vertical-alignment, center);
  gap: var(--gutter, var(--space-s-m));
}

/* 
SIDEBAR
More info: https://every-layout.dev/layouts/sidebar/
A layout that allows you to have a flexible main content area
and a "fixed" width sidebar that sits on the left or right.
If there is not enough viewport space to fit both the sidebar
width *and* the main content minimum width, they will stack
on top of each other

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-size-1)): This defines the space
between the sidebar and main content.

--sidebar-target-width (20rem): How large the sidebar should be

--sidebar-content-min-width(50%): The minimum size of the main content area

EXCEPTIONS
.sidebar[data-direction='rtl']: flips the sidebar to be on the right 
*/

.sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-s-l));
}

.sidebar > :first-child {
  flex-basis: var(--sidebar-target-width, 20rem);
  flex-grow: 1;
}

.sidebar > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: var(--sidebar-content-min-width, 50%);
}

.sidebar[data-direction="rtl"] > :last-child {
  flex-basis: var(--sidebar-target-width, 20rem);
  flex-grow: 1;
  min-width: unset;
}

.sidebar[data-direction="rtl"] > :first-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: var(--sidebar-content-min-width, 50%);
}

.sidebar[data-reversed] {
  flex-direction: row-reverse;
}

/*
SWITCHER
More info: https://every-layout.dev/layouts/switcher/
A layout that allows you to lay **2** items next to each other
until there is not enough horizontal space to allow that.

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-size-1)): This defines the space
between each item

--switcher-target-container-width (40rem): How large the container
needs to be to allow items to sit inline with each other

--switcher-vertical-alignment How items should align vertically.
Can be any acceptable flexbox alignment value.
*/

.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-s-l));
  align-items: var(--switcher-vertical-alignment, flex-start);
}

.switcher > * {
  flex-grow: 1;
  flex-basis: calc(
    (var(--switcher-target-container-width, 40rem) - 100%) * 999
  );
  container-type: inline-size;
}

/* 2-1 layout */

.switcher.layout-2-1 > :first-child {
  flex-grow: 2;
}

/* Max 2 items,
so anything greater than 2 is ful width */

.switcher > :nth-child(n + 3) {
  flex-basis: 100%;
}

.switcher--reversed {
  flex-direction: row-reverse !important;
}

/* 
FLOW UTILITY
Like the Every Layout stack: https://every-layout.dev/layouts/stack/
Info about this implementation: https://piccalil.li/quick-tip/flow-utility/ 
*/

.flow > * + * {
  margin-top: var(--flow-space, 1em);
}

.full-bleed {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
}

.full-bleed > * {
  width: 100%;
  max-width: none;
  height: auto;
}

/* 
REGION UTILITY
Consistent block padding for page sections
*/

.region {
  padding-block: var(--region-space, var(--space-l-2xl));
  border-block-start: var(--stroke-high-contrast);
}

.region[data-disable-space-start] {
  padding-block-start: 0;
}

.region[data-disable-space-bottom] {
  padding-block-end: 0;
}

/* 
VISUALLY HIDDEN UTILITY
Info: https://piccalil.li/quick-tip/visually-hidden/ 
*/

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

/*
WRAPPER UTILITY
A common wrapper/container
*/

.wrapper {
  --wrapper-min-width: 100%;
  margin-inline: auto;
  max-width: clamp(
    var(--wrapper-min-width),
    85vw,
    var(--wrapper-max-width, 1400px)
  );
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  position: relative;
}

.wrapper[data-wrapper-variant="narrow"] {
  --wrapper-max-width: 1065px;
}

@media (min-width: 780px) {
  .wrapper {
    --wrapper-min-width: 60rem;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.isolate {
  isolation: isolate;
}

.z-1 {
  z-index: 1;
}

.mb-xl {
  margin-bottom: clamp(3.375rem, 3.26rem + 0.56vw, 3.75rem);
}

.mt-l {
  margin-top: clamp(2.25rem, 2.18rem + 0.37vw, 2.5rem);
}

.mt-l-2xl {
  margin-top: clamp(2.25rem, 1.44rem + 4.07vw, 5rem);
}

.mt-l-xl {
  margin-top: clamp(2.25rem, 1.81rem + 2.22vw, 3.75rem);
}

.mt-m {
  margin-top: clamp(1.6875rem, 1.63rem + 0.28vw, 1.875rem);
}

.mt-m-l {
  margin-top: clamp(1.6875rem, 1.45rem + 1.20vw, 2.5rem);
}

.mt-s {
  margin-top: clamp(0.875rem, 0.86rem + 0.09vw, 0.9375rem);
}

.mt-xs {
  margin-top: clamp(0.5625rem, 0.54rem + 0.09vw, 0.625rem);
}

.block {
  display: block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.h-\[auto\] {
  height: auto;
}

.w-\[100\%\] {
  width: 100%;
}

.max-w-\[10rem\] {
  max-width: 10rem;
}

.max-w-\[40rem\] {
  max-width: 40rem;
}

.border-collapse {
  border-collapse: collapse;
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.resize {
  resize: both;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-baseline {
  align-items: baseline;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bg-bright {
  --tw-bg-opacity: 1;
  background-color: rgb(255 192 0 / var(--tw-bg-opacity));
}

.bg-bright-glare {
  --tw-bg-opacity: 1;
  background-color: rgb(255 200 34 / var(--tw-bg-opacity));
}

.bg-charcoal {
  --tw-bg-opacity: 1;
  background-color: rgb(34 34 34 / var(--tw-bg-opacity));
}

.bg-dark {
  --tw-bg-opacity: 1;
  background-color: rgb(44 0 67 / var(--tw-bg-opacity));
}

.bg-ethical {
  --tw-bg-opacity: 1;
  background-color: rgb(225 0 160 / var(--tw-bg-opacity));
}

.bg-ethical-glare {
  --tw-bg-opacity: 1;
  background-color: rgb(248 87 202 / var(--tw-bg-opacity));
}

.bg-inclusive {
  --tw-bg-opacity: 1;
  background-color: rgb(169 0 192 / var(--tw-bg-opacity));
}

.bg-inclusive-shade {
  --tw-bg-opacity: 1;
  background-color: rgb(127 35 139 / var(--tw-bg-opacity));
}

.bg-light {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.bg-light-shade {
  --tw-bg-opacity: 1;
  background-color: rgb(246 245 244 / var(--tw-bg-opacity));
}

.bg-mid {
  --tw-bg-opacity: 1;
  background-color: rgb(183 183 183 / var(--tw-bg-opacity));
}

.bg-mid-glare {
  --tw-bg-opacity: 1;
  background-color: rgb(212 212 212 / var(--tw-bg-opacity));
}

.bg-mid-shade {
  --tw-bg-opacity: 1;
  background-color: rgb(68 68 68 / var(--tw-bg-opacity));
}

.bg-original {
  --tw-bg-opacity: 1;
  background-color: rgb(245 111 0 / var(--tw-bg-opacity));
}

.bg-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(66 0 101 / var(--tw-bg-opacity));
}

.bg-primary-bright {
  --tw-bg-opacity: 1;
  background-color: rgb(246 243 248 / var(--tw-bg-opacity));
}

.bg-primary-glare {
  --tw-bg-opacity: 1;
  background-color: rgb(182 167 189 / var(--tw-bg-opacity));
}

.bg-sustainable {
  --tw-bg-opacity: 1;
  background-color: rgb(255 25 88 / var(--tw-bg-opacity));
}

.p-\[3px\] {
  padding: 3px;
}

.p-m {
  padding: clamp(1.6875rem, 1.63rem + 0.28vw, 1.875rem);
}

.py-m {
  padding-top: clamp(1.6875rem, 1.63rem + 0.28vw, 1.875rem);
  padding-bottom: clamp(1.6875rem, 1.63rem + 0.28vw, 1.875rem);
}

.pt-l {
  padding-top: clamp(2.25rem, 2.18rem + 0.37vw, 2.5rem);
}

.text-justify {
  text-align: justify;
}

.text-step-0 {
  font-size: clamp(1rem, 0.96rem + 0.19vw, 1.125rem);
}

.text-step-1 {
  font-size: clamp(1.1875rem, 1.11rem + 0.37vw, 1.4375rem);
}

.text-step-2 {
  font-size: clamp(1.4375rem, 1.34rem + 0.46vw, 1.75rem);
}

.text-step-4 {
  font-size: clamp(2.0625rem, 1.86rem + 1.02vw, 2.75rem);
}

.text-step-6 {
  font-size: clamp(2.5rem, 1.96rem + 2.69vw, 4.3125rem);
}

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

.capitalize {
  text-transform: capitalize;
}

.ordinal {
  --tw-ordinal: ordinal;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.leading-\[1\] {
  line-height: 1;
}

.text-bright {
  --tw-text-opacity: 1;
  color: rgb(255 192 0 / var(--tw-text-opacity));
}

.text-bright-glare {
  --tw-text-opacity: 1;
  color: rgb(255 200 34 / var(--tw-text-opacity));
}

.text-charcoal {
  --tw-text-opacity: 1;
  color: rgb(34 34 34 / var(--tw-text-opacity));
}

.text-dark {
  --tw-text-opacity: 1;
  color: rgb(44 0 67 / var(--tw-text-opacity));
}

.text-ethical {
  --tw-text-opacity: 1;
  color: rgb(225 0 160 / var(--tw-text-opacity));
}

.text-ethical-glare {
  --tw-text-opacity: 1;
  color: rgb(248 87 202 / var(--tw-text-opacity));
}

.text-inclusive {
  --tw-text-opacity: 1;
  color: rgb(169 0 192 / var(--tw-text-opacity));
}

.text-inclusive-shade {
  --tw-text-opacity: 1;
  color: rgb(127 35 139 / var(--tw-text-opacity));
}

.text-light {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.text-light-shade {
  --tw-text-opacity: 1;
  color: rgb(246 245 244 / var(--tw-text-opacity));
}

.text-mid {
  --tw-text-opacity: 1;
  color: rgb(183 183 183 / var(--tw-text-opacity));
}

.text-mid-glare {
  --tw-text-opacity: 1;
  color: rgb(212 212 212 / var(--tw-text-opacity));
}

.text-mid-shade {
  --tw-text-opacity: 1;
  color: rgb(68 68 68 / var(--tw-text-opacity));
}

.text-original {
  --tw-text-opacity: 1;
  color: rgb(245 111 0 / var(--tw-text-opacity));
}

.text-primary {
  --tw-text-opacity: 1;
  color: rgb(66 0 101 / var(--tw-text-opacity));
}

.text-primary-bright {
  --tw-text-opacity: 1;
  color: rgb(246 243 248 / var(--tw-text-opacity));
}

.text-primary-glare {
  --tw-text-opacity: 1;
  color: rgb(182 167 189 / var(--tw-text-opacity));
}

.text-sustainable {
  --tw-text-opacity: 1;
  color: rgb(255 25 88 / var(--tw-text-opacity));
}

.outline {
  outline-style: solid;
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.flow-space-xs {
  --flow-space: clamp(0.5625rem, 0.54rem + 0.09vw, 0.625rem);
}

.flow-space-s {
  --flow-space: clamp(0.875rem, 0.86rem + 0.09vw, 0.9375rem);
}

.flow-space-m {
  --flow-space: clamp(1.6875rem, 1.63rem + 0.28vw, 1.875rem);
}

.flow-space-s-m {
  --flow-space: clamp(0.875rem, 0.58rem + 1.48vw, 1.875rem);
}

.flow-space-m-l {
  --flow-space: clamp(1.6875rem, 1.45rem + 1.20vw, 2.5rem);
}

.flow-space-l-2xl {
  --flow-space: clamp(2.25rem, 1.44rem + 4.07vw, 5rem);
}

.flow-space-xl-2xl {
  --flow-space: clamp(3.375rem, 2.89rem + 2.41vw, 5rem);
}

.gutter-2xs {
  --gutter: clamp(0.25rem, 0.23rem + 0.09vw, 0.3125rem);
}

.gutter-xs {
  --gutter: clamp(0.5625rem, 0.54rem + 0.09vw, 0.625rem);
}

.gutter-s {
  --gutter: clamp(0.875rem, 0.86rem + 0.09vw, 0.9375rem);
}

.gutter-m {
  --gutter: clamp(1.6875rem, 1.63rem + 0.28vw, 1.875rem);
}

.gutter-s-m {
  --gutter: clamp(0.875rem, 0.58rem + 1.48vw, 1.875rem);
}

.gutter-l-xl {
  --gutter: clamp(2.25rem, 1.81rem + 2.22vw, 3.75rem);
}

.\!\[a-zA-Z\:_\] {
  a-z-a--z:  !important;
}