@charset "UTF-8";
/*------------------------------------*\
    #Amplify: core styles for all browsers
\*------------------------------------*/
/*------------------------------------*\
    #Settings
\*------------------------------------*/
/*------------------------------------*\
    #Breakpoints

    The measurements presented here are for guidance only
    and should be updated to reflect the design/content needs.

    1. Sets a max-inline-size for improved readability
\*------------------------------------*/
/* 1 */
/*------------------------------------*\
    #Colors

    Review and edit these default colours, then add further colors
    as required for your project.

    The ideal color contrast range for meeting WCAG AAA is 7:1 - 15:1

    1. A contrast higher than 15:1 can be triggering, which is why we
    avoid using pure white with pure black.
\*------------------------------------*/
/**
Brand
 */
/**
Accent
 */
/**
Neutrals
 */
/* 1 */
/* 1 */
/**
Links
 */
/**
Focus
 */
/**
Borders
 */
/**
Semantics - used sparingly and purposefully
 */
/*------------------------------------*\
    #Fonts
\*------------------------------------*/
/* nunito-regular - latin */
@font-face {
  font-display: fallback;
  font-family: Nunito;
  font-style: normal;
  font-weight: 400;
  src: local(""), url("../fonts/nunito-v20-latin-regular.woff2") format("woff2"), url("../fonts/nunito-v20-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* nunito-700 - latin */
@font-face {
  font-display: fallback;
  font-family: Nunito;
  font-style: normal;
  font-weight: 700;
  src: local(""), url("../fonts/nunito-v20-latin-700.woff2") format("woff2"), url("../fonts/nunito-v20-latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* nunito-italic - latin */
@font-face {
  font-display: fallback;
  font-family: Nunito;
  font-style: italic;
  font-weight: 400;
  src: local(""), url("../fonts/nunito-v20-latin-italic.woff2") format("woff2"), url("../fonts/nunito-v20-latin-italic.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* nunito-700italic - latin */
@font-face {
  font-display: fallback;
  font-family: Nunito;
  font-style: italic;
  font-weight: 700;
  src: local(""), url("../fonts/nunito-v20-latin-700italic.woff2") format("woff2"), url("../fonts/nunito-v20-latin-700italic.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/*------------------------------------*\
    #Typesetting
\*------------------------------------*/
/**
Use https://www.cssfontstack.com/ and https://meowni.ca/font-style-matcher/ to pick
system fonts that are reasonably close to any web fonts needed for the project.

This improves performance, avoids Flash Of Invisible Text (FOIT) and minimises
Flash of Unstyled Text (FOUT) - see https://www.filamentgroup.com/lab/font-events.html

Be sure to include fonts for both Mac OS and Windows. Use quote marks around
fonts with white space in their name.

When Font Face Observer has detected that the @font-face files are loaded, then we
can safely use the web fonts instead of the system fonts.
 */
/*------------------------------------*\
    #Functions
\*------------------------------------*/
/*------------------------------------*\
    #CSS unit functions
\*------------------------------------*/
/**
 #em
 */
/**
 #rem
 */
/**
 #px
 */
/**
 #Return a number without a unit
 */
/**
 #Remove any unit present to return a unitless number
 */
/*------------------------------------*\
    #Mixins
\*------------------------------------*/
/*------------------------------------*\
    #Font sizes

    Base uses a Major Second scale
    Fluid type calculations generated using https://utopia.fyi/type/calculator at 320px and 1120px widths

    1. Fallback for browsers not supporting clamp().
\*------------------------------------*/
/* 32px → 40px */
/* 28px → 36px */
/* 25px → 32px */
/* 22px → 28px */
/* 20px → 25px */
/* 18px → 22px */
/* 16px → 20px */
/* 14px → 17px */
/*------------------------------------*\
    #Media query
\*------------------------------------*/
/*------------------------------------*\
    #Stack
\*------------------------------------*/
/**
This mixin allows us to add vertical spacing between a container's direct children,
much like the 'axiomatic owl' technique but limited to specific use cases.

By applying Flexbox to the parent container, we can use auto margin on a specific
child element. This way, we can choose to group elements inside the stack to the
top/bottom of the vertical space, which is useful for card-like components.

Use with a specific measure, or without for the default measure, e.g.

main {
	@include stack(4rem);
}

article {
	@include stack;
}
 */
/*------------------------------------*\
    #Base
\*------------------------------------*/
/*------------------------------------*\
    #Box-sizing resets

    1. Use a more intuitive box-sizing model
    2. Ensure elements use font styles as defined in Amplify
    3. Reset margins
    4. Avoid text overflows
\*------------------------------------*/
*, *::before, *::after {
  box-sizing: border-box; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
  overflow-wrap: break-word; /* 4 */
}

/*------------------------------------*\
    #Body

    1. Prevent font size inflation with change of orientation
    2. Needed for sticky footer
    3. Equivalent `overflow-inline` logical property not currently well supported
\*------------------------------------*/
html {
  block-size: 100%;
  -webkit-text-size-adjust: none;
     -moz-text-size-adjust: none;
          text-size-adjust: none; /* 1 */
}

/**
 Typographical styles for fonts are in 30-base/_typography.scss
 */
body {
  background-color: #fcfcfc;
  color: #252525;
  display: grid; /* 2 */
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  grid-template-columns: 100%;
  grid-template-rows: 1fr auto; /* 2 */
  min-block-size: 100%;
  overflow-x: hidden; /* 3 */
}

/*------------------------------------*\
    #Typography

    1. Fallback for browsers not supporting clamp().
    2. A minimum line-height of 1.5 is needed for accessibility.
    A generous line-height of 1.7 allows space for borders on the bottom of
    links, but will need to be set explicitly on many elements.
\*------------------------------------*/
body {
  font-size: 1.25rem; /* 1 */
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  font-family: "Arial MT Rounded Bold", arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.7; /* 2 */
}

p {
  margin: 1rem 0; /* 1 */
  margin: clamp(0.5rem, 0.3rem + 1vw, 1rem) 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  margin: 0;
  -webkit-margin-after: 1rem;
          margin-block-end: 1rem; /* 1 */
  -webkit-margin-after: clamp(0.5rem, 0.3rem + 1vw, 1rem);
          margin-block-end: clamp(0.5rem, 0.3rem + 1vw, 1rem);
}

h1, h2, h3, h4 {
  text-wrap: balance;
}

h2, h3, h4, h5, h6 {
  -webkit-margin-before: 2rem;
          margin-block-start: 2rem;
}

h1,
.text-40 {
  font-size: 2.5rem; /* 1 */
  font-size: clamp(2rem, 1.8rem + 1vw, 2.5rem);
  line-height: 1.3;
}

h2,
.text-36 {
  font-size: 2.25rem; /* 1 */
  font-size: clamp(1.75rem, 1.55rem + 1vw, 2.25rem);
  line-height: 1.3;
}

h3,
.text-32 {
  font-size: 2rem; /* 1 */
  font-size: clamp(1.5625rem, 1.3875rem + 0.875vw, 2rem);
  line-height: 1.3;
}

h4,
.text-28 {
  font-size: 1.75rem; /* 1 */
  font-size: clamp(1.375rem, 1.225rem + 0.75vw, 1.75rem);
  line-height: 1.3;
}

h5,
.text-25 {
  font-size: 1.5625rem; /* 1 */
  font-size: clamp(1.25rem, 1.125rem + 0.625vw, 1.5625rem);
  line-height: 1.3;
}

h6,
.text-22 {
  font-size: 1.375rem; /* 1 */
  font-size: clamp(1.125rem, 1.025rem + 0.5vw, 1.375rem);
  line-height: 1.5;
}

.text-17 {
  font-size: 1.0625rem; /* 1 */
  font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1.0625rem);
  line-height: 1.5;
  margin-top: 1rem;
}

.lead {
  font-size: 1.75rem; /* 1 */
  font-size: clamp(1.375rem, 1.225rem + 0.75vw, 1.75rem);
  line-height: 1.3;
  -webkit-margin-after: 3rem;
          margin-block-end: 3rem; /* 1 */
  -webkit-margin-after: clamp(2.5rem, 2.3rem + 1vw, 3rem);
          margin-block-end: clamp(2.5rem, 2.3rem + 1vw, 3rem);
}

/**
When Font Face Observer has detected that the @font-face files are loaded, then we
can safely use the web fonts instead of the system fonts.
 */
.fonts-loaded body {
  font-family: "Nunito", "Arial MT Rounded Bold", arial, sans-serif;
}

/*------------------------------------*\
    #Media

    Resets for consistent base display
\*------------------------------------*/
audio, canvas, embed, iframe, img, object, picture, video {
  display: block;
}

audio, canvas, img, picture, svg, video {
  block-size: auto;
  max-inline-size: 100%;
}

iframe {
  border: 0;
}

/*------------------------------------*\
    #Hide and show items inclusively

    See https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html
\*------------------------------------*/
/*
 * Hide from everybody and remove from the document flow, using the hidden
 * attribute.
 *
 * Use if a component should remain hidden regardless of CSS being
 * available or not (the style below provides support for legacy browsers).
 */
[hidden] {
  display: none !important;
}

/*
 * Hide from everybody and remove from the document flow, using the %hidden
 * placeholder (extend the placeholder with Sass to avoid it appearing
 * repeatedly in your markup).
 *
 * Use if a component requires a basic show and hide interaction, and the
 * content should become available were CSS to fail.
 */
/*
 * Hide from everybody while maintaining layout, using the %invisible
 * placeholder (extend the placeholder with Sass to avoid it appearing
 * repeatedly in your markup).
 *
 * Use if a more complex transition is required, like when transitioning an
 * off-screen navigation into the viewport. Best paired with other CSS
 * properties that negate its position in the DOM e.g. `position: absolute;`
 */
/*
 * Hide visually only - remains available to Assistive Technology -
 * using the %visually-hidden placeholder (extend the placeholder with
 * Sass to avoid it appearing repeatedly in your markup).
 */
.visuallyhidden:not(:focus, :active), .skip-link:not(:focus, :active) {
  block-size: 1px;
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(100%);
          clip-path: inset(100%);
  inline-size: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
}

/*
 *The :not portions of the following selector allow a means for any
 * focusable element to become visible when focused/active by a user.
 */
br {
  -webkit-margin-before: 0;
          margin-block-start: 0;
}

/*
 * Restore an element that has been visually hidden, using the %visually-hidden
 * placeholder (extend the placeholder with Sass to avoid it appearing
 * repeatedly in your markup).
 */
/*------------------------------------*\
    #Flow elements
\*------------------------------------*/
abbr {
  -webkit-text-decoration-skip: auto;
          text-decoration-skip: auto;
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

address {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin: 1rem 0; /* 1 */
  margin: clamp(0.5rem, 0.3rem + 1vw, 1rem) 0;
}
address > * + * {
  -webkit-margin-before: 1rem;
          margin-block-start: 1rem;
}
address > * {
  font-style: normal;
}

dfn {
  font-style: normal;
  font-weight: 600;
}

b,
strong,
.bold {
  font-weight: 600;
}

em,
i {
  font-style: italic;
}

small,
.small,
.small-caps {
  font-size: 1.0625rem; /* 1 */
  font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1.0625rem);
  line-height: 1.5;
}

.small-caps {
  text-shadow: 0 0 0 #252525;
  text-transform: uppercase;
}

hr {
  block-size: 0;
  border: 0;
  -webkit-border-before: 1px solid #c6c6c6;
          border-block-start: 1px solid #c6c6c6;
  margin: 2rem 0;
  overflow: visible;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  inset-block-end: -0.25em;
}

sup {
  inset-block-start: -0.5em;
}

pre {
  margin-block: 2rem;
  white-space: pre-wrap;
}

code,
kbd,
samp,
pre {
  font-family: monaco, "Lucida Console", "Courier New", monospace;
  -webkit-hyphens: none;
          hyphens: none;
  orphans: 3;
  page-break-before: avoid;
  text-transform: none;
  widows: 3;
}

code,
kbd {
  padding-block: 0.125rem;
  padding-inline: 0.25rem;
}

code,
kbd,
samp {
  font-size: 0.8em;
}

code {
  background-color: #262626;
  border-radius: 0.25rem;
  color: #f4f4f4;
}

kbd {
  border: solid 0.0625rem;
}

samp kbd {
  font-size: 1em;
}

pre code {
  display: block;
  overflow-x: auto;
  padding: 1em;
  tab-size: 4;
  white-space: pre;
}

/*------------------------------------*\
    #Buttons and links

    1. Don't rely on colour alone for styling links - see
    https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html

    2. Remove outline on focused links when they're also active/hovered.

    3. Remove text underline from links styled as buttons.

    4. Prevent `.button` going full-width if a child of a flex column.

    5. Meet WCAG AAA target size requirements - see
    https://www.w3.org/WAI/WCAG21/Understanding/target-size.html
\*------------------------------------*/
a:not([class]),
a.with-icon--before,
a.with-icon--after {
  border: none;
  color: #1371c2;
  cursor: pointer;
  text-decoration: underline; /* 1 */
  -webkit-text-decoration-skip: auto;
          text-decoration-skip: auto;
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}
a:not([class]):visited,
a.with-icon--before:visited,
a.with-icon--after:visited {
  color: #063a69;
}
a:not([class]):hover,
a.with-icon--before:hover,
a.with-icon--after:hover {
  color: #0b80e5;
}
a:not([class]):active,
a.with-icon--before:active,
a.with-icon--after:active {
  color: #0c5492;
  outline: none; /* 2 */
  text-decoration: underline; /* 1 */
  -webkit-text-decoration-skip: auto;
          text-decoration-skip: auto;
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

button {
  line-height: 1.15;
}

.button {
  text-decoration: none; /* 3 */
}

button,
.button,
input[type=submit].button {
  align-items: center;
  align-self: start; /* 4 */
  background-color: #da0067;
  border: solid 2px #da0067;
  border-radius: 0.375rem;
  color: #fcfcfc;
  display: inline-flex;
  justify-content: center;
  min-block-size: 2.75rem; /* 5 */
  padding-block: 0.25em;
  padding-inline: 0.75em;
}
button:hover,
.button:hover,
input[type=submit].button:hover {
  background-color: #bf0059;
  border-color: #bf0059;
}
button:active,
.button:active,
input[type=submit].button:active {
  background-color: #760035;
  border-color: #760035;
  color: #fcfcfc;
}

.button--wide.button--wide {
  inline-size: 100%;
}

.button--alt.button--alt {
  background-color: #fcfcfc;
  color: #da0067;
}
.button--alt.button--alt:hover {
  background-color: #bf0059;
  color: #fcfcfc;
}
.button--alt.button--alt:active {
  background-color: #760035;
  border-color: #760035;
  color: #fcfcfc;
}

.button--ghost.button--ghost {
  background-color: transparent;
  border-color: transparent;
  color: #000;
  min-inline-size: 2.75rem; /* 5 */
  padding: 0;
}
.button--ghost.button--ghost:hover {
  background-color: transparent;
  border-color: transparent;
}

button[disabled],
.button[disabled],
.button.js-disabled {
  background-color: #8d8d8d;
  border-color: #8d8d8d;
  color: #252525;
  cursor: not-allowed;
}

/*------------------------------------*\
    #Skip link
\*------------------------------------*/
.skip-link.skip-link {
  background-color: #ffdc00;
  box-shadow: inset 0 0 0 2px #000;
  color: #000;
  padding-block: 0.625em;
  padding-inline: 0.9375em;
  position: absolute;
  text-decoration: none;
  z-index: 999;
}
.skip-link.skip-link:focus {
  inset-block-start: 2px;
  inset-inline-start: 2px;
}

/*------------------------------------*\
    #Details and summary elements
\*------------------------------------*/
details {
  margin-block: 1rem;
}

summary {
  color: #1371c2;
  cursor: pointer;
  display: inline-block;
  -webkit-padding-start: 1.5625rem;
          padding-inline-start: 1.5625rem;
  position: relative;
}
summary::before {
  block-size: 0;
  border-color: transparent;
  border-inline-start-color: inherit;
  border-style: solid;
  border-width: 7px 0 7px 12.124px;
  content: "";
  display: block;
  inline-size: 0;
  inset-block: -0.0625rem 0;
  inset-inline-start: 0;
  margin: auto;
  position: absolute;
}
summary::-webkit-details-marker {
  display: none;
}
summary:hover {
  color: #0b80e5;
}
summary span {
  display: inline-block;
  padding-block: 0.625rem;
  text-decoration: underline;
  -webkit-text-decoration-skip: auto;
          text-decoration-skip: auto;
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

[dir=rtl] summary::before {
  border-width: 7px 12.124px 7px 0;
}

details[open] > summary {
  -webkit-margin-after: 1rem;
          margin-block-end: 1rem;
}

details[open] > summary::before {
  transform: rotate(90deg);
}

[dir=rtl] details[open] > summary::before {
  transform: rotate(-90deg);
}

/*------------------------------------*\
    #SVG
\*------------------------------------*/
svg {
  fill: currentcolor;
}

/*------------------------------------*\
    #Icons

    1. Make SVG using currentColor pick up correct Windows High Contrast Mode color
    See: https://www.smashingmagazine.com/2022/06/guide-windows-high-contrast-mode/
\*------------------------------------*/
/**
Icons are sized relative to font size, thanks to the em unit.
 */
.icon {
  block-size: 0.75em;
  inline-size: 0.75em;
}
.icon svg {
  forced-color-adjust: auto; /* 1 */
}

.icon--24 {
  block-size: 1.5rem;
  inline-size: 1.5rem;
}

/**
Use the `with-icon--before` or `with-icon--after` class
on the icon's parent if there is a need to specify the spacing
between text and icon. Pay attention to whether the icon comes
before the text or after.

Use `margin-inline-end` for spacing irrespective of text direction
 */
.with-icon--before,
.with-icon--after {
  align-items: center;
  display: inline-flex;
}
.with-icon--before .icon,
.with-icon--after .icon {
  flex: 0 0 auto;
}

.with-icon--before .icon {
  -webkit-margin-end: 0.625rem;
          margin-inline-end: 0.625rem;
}

.with-icon--after .icon {
  -webkit-margin-start: 0.625rem;
          margin-inline-start: 0.625rem;
}

/*------------------------------------*\
    #Lists
\*------------------------------------*/
ul,
ol {
  margin-block: 1rem;
  -webkit-padding-start: 2rem;
          padding-inline-start: 2rem;
}
ul li,
ol li {
  -webkit-padding-start: 0.25rem;
          padding-inline-start: 0.25rem;
}
ul > * + *,
ul li ul,
ul li ol,
ol > * + *,
ol li ul,
ol li ol {
  -webkit-margin-before: 0.75rem;
          margin-block-start: 0.75rem;
}

ol:not([start]) {
  counter-reset: list-item;
}

ol li {
  counter-increment: list-item;
}

ol ::marker {
  content: counters(list-item, ".") ". ";
}

/**
List without bullets, numbers or indentation. Bear in mind that this
removes list semantics in some WebKit browsers. If it's important that
the number of items in a list is announced, add role="list" to the <ul>
 */
.clean-list {
  list-style: none;
  padding: 0;
}
.clean-list li,
.clean-list ol,
.clean-list ul {
  padding: 0;
}

/**
Description lists / Definition lists
 */
dl {
  margin-block: 1rem;
}
dl dt {
  font-weight: bold;
}
dl dd + dt {
  -webkit-margin-before: 0.5rem;
          margin-block-start: 0.5rem;
}
dl dt + dd,
dl dd + dd {
  -webkit-margin-before: 0.25rem;
          margin-block-start: 0.25rem;
}

@supports (grid-row-start: auto) {
  dl.grid {
    display: grid;
    gap: 1rem;
    -ms-grid-columns: min-content;
    -ms-grid-rows: 1fr;
    grid-template-columns: -webkit-min-content;
    grid-template-columns: min-content;
    grid-template-rows: 1fr;
  }
  dl.grid dt {
    grid-column: 1/2;
    -ms-grid-column-span: 1;
  }
  dl.grid dd {
    grid-column: 2/3;
    -ms-grid-column-span: 1;
  }
  dl.grid dd + dt,
  dl.grid dt + dd,
  dl.grid dd + dd {
    -webkit-margin-before: 0;
            margin-block-start: 0;
  }
}

/*------------------------------------*\
    #Quotes
\*------------------------------------*/
blockquote {
  font-size: 1.5625rem; /* 1 */
  font-size: clamp(1.25rem, 1.125rem + 0.625vw, 1.5625rem);
  line-height: 1.3;
  margin-block: 1rem;
  -webkit-margin-start: 1.5625rem;
          margin-inline-start: 1.5625rem;
  padding: 0.625rem;
  position: relative;
}
blockquote::before {
  background-color: #8d8d8d;
  block-size: 100%;
  content: "";
  inline-size: 0.1875rem;
  inset-block-start: 0;
  inset-inline-start: -0.1875rem;
  position: absolute;
}
blockquote > *:first-child {
  -webkit-margin-before: 0;
          margin-block-start: 0;
}
blockquote cite {
  font-size: 1.0625rem; /* 1 */
  font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1.0625rem);
  line-height: 1.5;
  font-style: normal;
  font-weight: normal;
}

/*------------------------------------*\
    #Tables

    1. See https://daverupert.com/2023/08/animation-timeline-scroll-shadows/
\*------------------------------------*/
table {
  border: 1px solid #c6c6c6;
  border-collapse: collapse;
  inline-size: 100%;
  margin-block: 1rem;
}

th,
td,
table caption {
  padding: 0.75rem;
  text-align: start;
}

tbody tr:nth-of-type(odd) {
  background-color: rgba(198, 198, 198, 0.5);
}

th,
td {
  border: 1px solid #c6c6c6;
  vertical-align: text-top;
}

th {
  font-weight: 600;
}

/**
Responsive tables:
https://adrianroselli.com/2020/11/under-engineered-responsive-tables.html
 */
@media screen {
  [data-component=table-wrap] {
    border: 1px solid #c6c6c6;
    margin-block: 1rem;
    max-inline-size: 100% !important;
  }
  [data-component=table-wrap][role][tabindex] {
    animation: scroll-shadow-inset linear; /* 1 */
    animation-timeline: scroll(self inline); /* 1 */
    overflow: auto;
  }
  [data-component=table-wrap] table {
    border: 0;
    margin-block: 0;
  }
  [data-component=table-wrap] table caption {
    border-bottom: 1px solid #c6c6c6;
  }
  [data-component=table-wrap] th,
  [data-component=table-wrap] thead td,
  [data-component=table-wrap] th[scope=row] ~ td {
    border-top: 0;
  }
  [data-component=table-wrap] tr th:first-child,
  [data-component=table-wrap] tr td:first-child {
    border-left: 0;
  }
  [data-component=table-wrap] tr th:last-child,
  [data-component=table-wrap] tr td:last-child {
    border-right: 0;
  }
  [data-component=table-wrap] tr:last-of-type th[scope=row],
  [data-component=table-wrap] tbody tr:last-of-type td {
    border-bottom: 0;
  }
}
/*------------------------------------*\
    #Animation

    'scroll-shadow-inset' improves visual affordance of horizontally scrolling tables
\*------------------------------------*/
/*
 * Respect the choices of users who do not want animations.
 */
@media screen and (prefers-reduced-motion: reduce), (update: slow) {
  *,
  ::before,
  ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-delay: 0s !important;
    transition-duration: 0.001ms !important;
  }
}
@keyframes scroll-shadow-inset {
  /* start with inset shadow on right */
  from {
    box-shadow: inset -10px -10px 15px 0 rgba(0, 0, 0, 0.3);
  }
  /* end with inset shadow on left */
  to {
    box-shadow: inset 10px -10px 15px 0 rgba(0, 0, 0, 0.3);
  }
}
/*------------------------------------*\
    #Global focus styles incorporating a reset for :focus-visible

    1. If a link breaks over multiple lines, copy focus styles over all lines.
    See https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break
    2. Windows High Contrast/forced-color modes tend to eliminate background-color and box-shadow.
    We retain an outline - even if it's transparent - to ensure an accessible focus indicator.
\*------------------------------------*/
:focus {
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone; /* 1 */
  box-shadow: 0 0 0 4px #000;
  outline: 2px solid #ffdc00; /* 2 */
  outline-offset: 0; /* 2 */
  text-decoration: none;
}

/**
Unset focus styles (apart from transparent outline) where the browser wouldn't set a visible focus
 */
:focus:not(:focus-visible) {
  box-shadow: none;
  outline-color: transparent;
}

/**
Where focus is programmatically moved to a target element that is not interactive, we
suppress the focus styles. See https://github.com/twbs/bootstrap/issues/29875#issuecomment-582648069
 */
main:focus,
#main:focus,
[tabindex="-1"]:focus {
  box-shadow: none;
  outline: none;
}

/*------------------------------------*\
    #Forms
\*------------------------------------*/
/*------------------------------------*\
    #Forms
\*------------------------------------*/
/**
Start of resets for the fieldset element
https://thatemil.com/blog/2015/01/03/reset-your-fieldset/
 */
fieldset {
  border: 0;
  margin: 0;
  min-inline-size: 0;
  padding: 0;
  -webkit-padding-before: 0.01em;
          padding-block-start: 0.01em;
}

body:not(:-moz-handler-blocked) fieldset {
  display: table-cell;
}

/**
End of resets for the fieldset element
 */
form > * + *,
fieldset > * + *,
.field-group > * + * {
  -webkit-margin-before: 1.75rem;
          margin-block-start: 1.75rem;
}

.field-group + .field-group {
  -webkit-margin-before: 2.5rem;
          margin-block-start: 2.5rem;
}

legend,
.field-group__heading {
  font-size: 1.375rem; /* 1 */
  font-size: clamp(1.125rem, 1.025rem + 0.5vw, 1.375rem);
  line-height: 1.5;
  font-weight: 600;
}

/**
Group inputs to line up side-by-side
 */
.input-group {
  align-items: center;
  display: flex;
}

.input-group > * + * {
  -webkit-margin-start: 1.875rem;
          margin-inline-start: 1.875rem;
}

.field {
  max-inline-size: 41.25rem;
}

label,
.field-label,
.field-hint,
.field-error-msg,
.faux-label {
  display: block;
}

.field-label,
.faux-label {
  -webkit-margin-after: 0.25rem;
          margin-block-end: 0.25rem;
}

.field-hint {
  font-size: 1.0625rem; /* 1 */
  font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1.0625rem);
  line-height: 1.5;
  color: #525252;
  -webkit-margin-after: 0.25rem;
          margin-block-end: 0.25rem;
  max-inline-size: 41.25rem;
}

.field-label,
.group-legend {
  font-weight: bold;
}
.field-label + .field-hint,
.group-legend + .field-hint {
  -webkit-margin-before: 0.25rem;
          margin-block-start: 0.25rem;
}

input, optgroup {
  line-height: 1.15;
}

textarea,
[type=date],
[type=email],
[type=file],
[type=number],
[type=password],
[type=search],
[type=tel],
[type=text],
[type=time],
[type=url] {
  -webkit-appearance: none;
          appearance: none;
  background-color: #fcfcfc;
  border: 2px solid #8d8d8d;
  border-radius: 0;
  inline-size: 100%;
  line-height: 1.25;
  padding: 0.3125rem;
}

[type=date],
[type=email],
[type=number],
[type=password],
[type=search],
[type=tel],
[type=text],
[type=time],
[type=url] {
  block-size: 2.75rem;
}

[type=file] {
  border-color: transparent;
}

/**
Search
 */
[type=search]::-webkit-search-decoration,
[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
          appearance: none;
}

/**
Textarea
 */
textarea {
  block-size: 10em;
  resize: vertical;
}

/**
Fixed input widths
 */
.input-width-30 {
  max-inline-size: 59ex;
}

.input-width-20 {
  max-inline-size: 41ex;
}

.input-width-10 {
  max-inline-size: 23ex;
}

.input-width-5 {
  max-inline-size: 10.8ex;
}

.input-width-4 {
  max-inline-size: 9ex;
}

.input-width-3 {
  max-inline-size: 7.2ex;
}

.input-width-2 {
  max-inline-size: 5.4ex;
}

/**
Error styles
 */
[data-component=error-summary] li a {
  color: #a4141b;
  display: inline-block;
  font-weight: bold;
  padding-block: 0.625rem;
}
[data-component=error-summary] li a:hover, [data-component=error-summary] li a:visited {
  color: #a4141b;
}

.field--error {
  -webkit-border-start: solid 0.3125rem #a4141b;
          border-inline-start: solid 0.3125rem #a4141b;
  -webkit-padding-start: 0.9375rem;
          padding-inline-start: 0.9375rem;
}
.field--error input:not([type=file]),
.field--error textarea:not(:focus) {
  border-color: #a4141b;
}
.field--error input:focus,
.field--error textarea:focus {
  border-color: #8d8d8d;
}

.field-error-msg {
  color: #a4141b;
  font-weight: bold;
  -webkit-margin-before: 0.9375rem;
          margin-block-start: 0.9375rem;
}

/*------------------------------------*\
    #Forms - checkbox and radio inputs

    1. Windows High Contrast/forced-color modes tend to eliminate background-color and box-shadow.
    We retain an outline - even if it's transparent - to ensure an accessible focus indicator.
\*------------------------------------*/
.radio-item,
.checkbox-item {
  clear: left;
  float: left;
  -webkit-margin-before: 0.25rem;
          margin-block-start: 0.25rem;
  -webkit-padding-start: 2.125rem;
          padding-inline-start: 2.125rem;
  position: relative;
}
.radio-item::after,
.checkbox-item::after {
  clear: both;
  content: "";
  display: block;
}

[dir=rtl] .radio-item,
[dir=rtl] .checkbox-item {
  clear: right;
  float: right;
}

.radio-item input,
.checkbox-item input {
  block-size: 2.75rem;
  cursor: pointer;
  inline-size: 2.75rem;
  inset-block-start: -0.125rem;
  inset-inline-start: -0.625rem;
  margin: 0;
  opacity: 0;
  position: absolute;
  z-index: 1;
}

.radio-item label,
.checkbox-item label {
  cursor: pointer;
  display: inline-block;
  -webkit-margin-before: -0.125rem;
          margin-block-start: -0.125rem;
  margin-bottom: 0;
  padding-block: 0.375rem;
  padding-inline: 0.0625rem 0.9375rem;
  touch-action: manipulation;
}
.radio-item label::before, .radio-item label::after,
.checkbox-item label::before,
.checkbox-item label::after {
  content: "";
  position: absolute;
}
.radio-item label::before,
.checkbox-item label::before {
  background: transparent;
  block-size: 1.5rem;
  border: 2px solid #8d8d8d;
  inline-size: 1.5rem;
  inset-block-start: 0.5rem;
  inset-inline-start: 0;
}

.radio-item label::before, .radio-item label::after {
  border-radius: 50%;
}
.radio-item label::after {
  background: currentcolor;
  block-size: 0;
  border: 5px solid;
  inline-size: 0;
  inset-block-start: 0.9375rem;
  inset-inline-start: 0.4375rem;
  opacity: 0;
}

.checkbox-item label::after {
  background: transparent;
  block-size: 0.40625rem;
  border: solid;
  border-block-start-color: transparent;
  border-width: 0 0 3px 3px;
  inline-size: 0.75rem;
  inset-block-start: 0.9375rem;
  inset-inline-start: 0.375rem;
  opacity: 0;
  transform: rotate(-45deg);
}

.checkbox-group--cluster .checkbox-item {
  clear: none;
  -webkit-margin-end: 0.75rem;
          margin-inline-end: 0.75rem;
}

.radio-item:hover input:not(:disabled) + label::before,
.checkbox-item:hover input:not(:disabled) + label::before {
  box-shadow: 0 0 0 4px #063a69;
}

/* stylelint-disable no-descending-specificity */
.radio-item input:focus + label::before,
.checkbox-item input:focus + label::before {
  box-shadow: 0 0 0 4px #000;
  outline: 2px solid #ffdc00; /* 1 */
  outline-offset: 0; /* 1 */
}

/* stylelint-enable no-descending-specificity */
.radio-item:hover input:focus + label::before,
.checkbox-item:hover input:focus + label::before {
  box-shadow: 0 0 0 4px #000;
  outline: 2px solid #ffdc00; /* 1 */
  outline-offset: 0; /* 1 */
}

.radio-item input:checked + label::after,
.checkbox-item input:checked + label::after {
  opacity: 1;
}

[type=radio]:disabled,
[type=radio]:disabled + label,
[type=checkbox]:disabled,
[type=checkbox]:disabled + label {
  cursor: default;
}

[type=radio]:disabled + label,
[type=checkbox]:disabled + label {
  opacity: 0.5;
}

/*------------------------------------*\
    #Memorable dates (e.g. date of birth)
\*------------------------------------*/
.memorable-date {
  display: inline-block;
  -webkit-margin-before: 0;
          margin-block-start: 0;
}

.memorable-date + .memorable-date {
  -webkit-margin-start: 1rem;
          margin-inline-start: 1rem;
}

/*------------------------------------*\
    #Forms - segmented options

    Can use either radio or checkbox inputs.
    The purpose is to show all available options outright,
    rather than hide them behind a <select>
\*------------------------------------*/
.segmented-group-wrapper {
  max-inline-size: none;
}

.segmented-group.l-switcher {
  -webkit-margin-before: 0;
          margin-block-start: 0;
}
.segmented-group.l-switcher > * > * {
  max-inline-size: 100%;
  min-inline-size: 33.333%;
  position: relative;
}
.segmented-group.l-switcher label {
  border: 2px solid #8d8d8d;
  cursor: pointer;
  display: block;
  margin: 0.125rem;
}
.segmented-group.l-switcher label::before, .segmented-group.l-switcher label::after {
  content: "";
  position: absolute;
}
.segmented-group.l-switcher label::before {
  background: transparent;
  block-size: 1.5rem;
  inline-size: 1.5rem;
  inset-block-start: 0.625rem;
  inset-inline-end: 0.625rem;
}
.segmented-group.l-switcher label::after {
  background: transparent;
  block-size: 0.40625rem;
  border: solid;
  border-block-start-color: transparent;
  border-width: 0 0 3px 3px;
  inline-size: 0.75rem;
  inset-block-start: 1.0625rem;
  inset-inline-end: 1rem;
  opacity: 0;
  transform: rotate(-45deg);
}
.segmented-group.l-switcher input {
  block-size: 2.75rem;
  cursor: pointer;
  inline-size: 2.75rem;
  inset-block-start: 0;
  inset-inline-end: 0;
  margin: 0;
  opacity: 0;
  position: absolute;
  z-index: 1;
}
.segmented-group.l-switcher .segmented-label {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  display: block;
  padding: 0.625rem;
  -webkit-padding-end: 2.75rem;
          padding-inline-end: 2.75rem;
}
.segmented-group.l-switcher .segmented-label > * + * {
  -webkit-margin-before: 0.5em;
          margin-block-start: 0.5em;
}
.segmented-group.l-switcher .segmented-label span {
  display: block;
}
.segmented-group.l-switcher .segmented-label span:first-of-type {
  font-weight: bold;
}
.segmented-group.l-switcher > * > *:hover label {
  background-color: #c6c6c6;
}
.segmented-group.l-switcher input:focus + label {
  border-color: #000;
  box-shadow: inset 0 0 0 4px #8d8d8d;
  outline: 2px solid #ffdc00; /* 1 */
  outline-offset: -4px; /* 1 */
}
.segmented-group.l-switcher input:checked + label::after {
  opacity: 1;
}

/*------------------------------------*\
    #Select
\*------------------------------------*/
select {
  background-color: #fcfcfc;
  block-size: 2.75rem;
  border: 2px solid #8d8d8d;
  border-radius: 0;
  inline-size: 100%;
  line-height: 1.25;
  padding: 0.3125rem;
}

optgroup {
  line-height: 1.25;
}

/**
Optional select with custom arrow icon matching the SVG used for accessible autocomplete
 */
@supports ((-webkit-appearance: none) or (appearance: none)) {
  select {
    -webkit-appearance: none;
            appearance: none;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"%3E%3Cpath fill="none" d="M0 0h24v24H0z"/%3E%3Cpath d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"/%3E%3C/svg%3E');
    background-position: center right 0.3125rem;
    background-repeat: no-repeat;
    -webkit-padding-end: 2.125rem;
            padding-inline-end: 2.125rem;
  }
  [dir=rtl] select {
    background-position: center left 0.3125rem;
  }
}
/*------------------------------------*\
    #Layout helpers
\*------------------------------------*/
/*------------------------------------*\
    #Box layout helper

    From https://absolutely.every-layout.dev/layouts/box/

    `.l-box` should have borders and/or padding on all sides, or
    none at all. Otherwise it's not a box, but something more specific.

    1. High contrast themes tend to eliminate background-color. If no
    border is set on the box, we need to apply a transparent outline to
    maintain the box shape. The negative outline-offset moves the outline
    inside the perimeter so it behaves like a border and doesn't add to
    the overall size.
\*------------------------------------*/
.l-box {
  border: 1px solid;
  display: block;
  padding: 1.5rem;
}

.l-box--no-padding {
  padding: 0;
}

.l-box--no-border {
  border: none;
  outline: 1px solid transparent; /* 1 */
  outline-offset: -1px; /* 1 */
}

/*------------------------------------*\
    #Center layout helper

    From https://absolutely.every-layout.dev/layouts/center/

    `.l-center` creates a horizontally centered container.

    1. We use left and right padding to add some minimum space between the
    contents of `.l-center` and the edges of the parent element or viewport.
    To avoid making the content narrower than intended, we add an exception
    to our global box-sizing rule (defined in 30-base/_reset.scss).
\*------------------------------------*/
.l-center {
  box-sizing: content-box;
  margin-inline: auto;
  max-inline-size: 70rem;
  padding-inline: 5vw;
}

/*------------------------------------*\
    #Cover layout helper

    From https://absolutely.every-layout.dev/layouts/cover/

    `.l-cover` uses Flexbox to vertically center a principal item
    of content. It is given a min-block-size value to achieve this
    which could be 100vh, or less.

    Horizontal centering of content can be achieved using the `.l-center`
    layout within `.l-cover`, or with the `.u-center` utility found in
    /90-utilities/layout
\*------------------------------------*/
.l-cover {
  display: flex;
  flex-direction: column;
  min-block-size: 30vh;
  padding: 1rem;
}

.l-cover > * {
  margin-block: 1rem;
}

.l-cover > .principal {
  margin-block: auto;
}

/**
These styles space out an optional header/footer area without
disturbing the vertically centered element.
 */
.l-cover > :first-child:not(.principal) {
  -webkit-margin-before: 0;
          margin-block-start: 0;
}

.l-cover > :last-child:not(.principal) {
  -webkit-margin-after: 0;
          margin-block-end: 0;
}

/*------------------------------------*\
    #Cluster layout helper

    From https://absolutely.every-layout.dev/layouts/cluster/

    `.l-cluster` suits any groups of elements that differ in length and
    are liable to wrap. Use the Cluster to align any groups of horizontally
    laid out elements to the left or right, or in the center, with even
    spacing between elements.
\*------------------------------------*/
/**
Suppress horizontal scrolling caused by the negative margin
in some circumstances.
 */
.l-cluster {
  overflow: hidden;
}

/**
We use flexbox to configure the elements into clusters without creating
white space. We can control how we align items within the cluster,
by using 'align-items` and `justify-content`.
 */
.l-cluster > * {
  display: flex;
  flex-flow: row wrap;
  margin: -0.625rem;
}

/**
We apply an even, symmetrical margin to the elements that we wish to space
out, but halve it to to account for 'doubling up' at the edges.
 */
.l-cluster.l-cluster > * > * {
  margin: 0.625rem;
}

/*------------------------------------*\
    #Frame layout helper

    From https://absolutely.every-layout.dev/layouts/frame/

    `.l-frame` is most useful for cropping media (images
    and video) to a specific aspect ratio.

    It is not recommended to apply the `.l-frame` class to the
    <figure> element, as it will interfere with the <figcaption>.
    Instead, place it on <picture> or a <div> inside of <figure>.
\*------------------------------------*/
.l-frame {
  display: block;
  overflow: hidden;
  position: relative;
}

.l-frame > * {
  align-items: center;
  display: flex;
  inset-block: 0;
  inset-inline: 0;
  justify-content: center;
  position: absolute;
}

.l-frame > iframe,
.l-frame > img,
.l-frame > video {
  block-size: 100%;
  inline-size: 100%;
}

.l-frame > iframe {
  border: 0;
}

.l-frame > img,
.l-frame > video {
  object-fit: cover;
}

/* Common aspect ratios */
.l-frame--16-9 {
  -webkit-padding-after: 56.25%;
          padding-block-end: 56.25%;
}

.l-frame--3-2 {
  -webkit-padding-after: 66.67%;
          padding-block-end: 66.67%;
}

.l-frame--4-3 {
  -webkit-padding-after: 75%;
          padding-block-end: 75%;
}

.l-frame--square {
  -webkit-padding-after: 100%;
          padding-block-end: 100%;
}

/*------------------------------------*\
    #Sidebar layout helper

    From https://absolutely.every-layout.dev/layouts/sidebar/

    `.l-sidebar` creates a container for a larger panel next to
    a smaller - sidebar - panel.

    When there is enough horizontal space for them to sit alongside
    each other, they do so. Otherwise they stack vertically. The
    point at which this happens is determined by setting a flex-basis
    on the sidebar panel and a min-inline-size on the other panel.

    N.B: because this layout uses Flexbox, we can use the `order`
    property on either `.not-sidebar` or `.sidebar` (depending upon
    the source order of the HTML) to determine whether the sidebar
    sits on the left or right side.
\*------------------------------------*/
/**
Suppress horizontal scrolling caused by the negative margin
in some circumstances.
 */
.l-sidebar {
  overflow: hidden;
}

/**
We target the intermediary wrapper and give it a negative margin
to create a gutter between the `.sidebar` and `.not-sidebar`.
 */
.l-sidebar > * {
  display: flex;
  flex-flow: row wrap;
  flex-wrap: wrap;
  margin: -0.75rem;
}

/**
We apply an even, symmetrical margin to `.sidebar` and `.not-sidebar`,
but halve it to to account for 'doubling up' at the edges.
 */
.l-sidebar > * > * {
  margin: 0.75rem;
}

/**
Flex-basis determines the ideal width of the `.sidebar`. This can be
omitted to let the contents of `.sidebar` determine the width of
`.sidebar` (e.g. an image with a specified max-inline-size).
 */
.l-sidebar .sidebar {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex-basis: 20rem;
  flex-grow: 1;
}
.l-sidebar .sidebar > * + * {
  -webkit-margin-before: 1em;
          margin-block-start: 1em;
}

/**
The min-inline-size determines the point at which `.sidebar` and `.not-sidebar`
will sit side-by-side rather than vertically. This negates the use of a viewport
media query.
 */
.l-sidebar .not-sidebar {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: calc(55% - 1.5rem);
}
.l-sidebar .not-sidebar > * + * {
  -webkit-margin-before: 1em;
          margin-block-start: 1em;
}

.l-sidebar--expanded {
  inline-size: 100%;
}

.l-sidebar .sidebar.sidebar--compact {
  flex-basis: 11.25rem;
}

/*------------------------------------*\
    #Switcher layout helper

    Uses this to switch between vertical and horizontal layouts:
    https://www.freecodecamp.org/news/the-fab-four-technique-to-create-responsive-emails-without-media-queries-baf11fdfa848/

    `.l-switcher` switches a Flexbox context between a horizontal and a
    vertical layout at a given, CONTAINER-BASED breakpoint, rather than
    using viewport media queries.

    The child elements in the horizontal configuration will be of equal
	width.

	For gutter spacing, apply padding to the flex items and an equal
    negative margin to the flex container. This will double up,
    so use half the intended value.
\*------------------------------------*/
.l-switcher {
  overflow: hidden;
}

.l-switcher > * {
  display: flex;
  flex-flow: row wrap;
}

/**
1. Determines the item width in the single column, vertical configuration

2. Determines how many items will be in a row in the horizontal configuration

3. The 690 value matches the desired breakpoint value. The 100% corresponds to
the width of the columns' parent container. This calculation will create a
value that's either bigger than the max-inline-size or smaller than the
min-inline-size, so that either of these properties is applied instead.
 */
.l-switcher > * > * {
  inline-size: calc(476100px - 69000%); /* 3 */
  max-inline-size: 100%; /* 1 */
  min-inline-size: 50%; /* 2 */
}

/*------------------------------------*\
    #Core components
\*------------------------------------*/
/*------------------------------------*\
    #Global header
\*------------------------------------*/
.global-header {
  color: #252525;
}
.global-header form {
  background: #032749;
  box-shadow: #BBB 15px 5px 10px;
  color: #fcfcfc;
  display: flex;
  justify-content: right;
  padding: 10px;
  padding-right: 1rem;
}
.global-header form label {
  font-size: 1.1rem;
  font-weight: bold;
  padding: 1px 1rem 0 0;
}
.global-header form input {
  block-size: 2rem;
  -webkit-margin-before: 0;
          margin-block-start: 0;
  width: 200px;
}

.content-wrap {
  display: grid;
  -ms-grid-columns: 15% 85%;
  -ms-grid-rows: 1fr;
  grid-template-columns: 15% 85%;
  grid-template-rows: 1fr;
}

.content-wrap > *:first-child {
  grid-column: 1/2;
  grid-column: 1;
  grid-row: 1;
}

.example + .example {
  -webkit-margin-before: 1rem;
          margin-block-start: 1rem;
}

.l-switcher.teasers {
  overflow: visible;
}

.l-switcher.teasers > * {
  margin: -0.75rem;
}

.l-switcher.teasers > * > * {
  min-inline-size: 33%;
  padding: 0.75rem;
}

.l-switcher.teasers .card {
  padding: 1.5rem;
}

.search-bar .not-sidebar {
  min-inline-size: 70%;
}

.search-bar button {
  flex-grow: 1;
}

/*------------------------------------*\
    #Logo
\*------------------------------------*/
/*------------------------------------*\
    #Navigation core
\*------------------------------------*/
.sidebar {
  background: #032749;
  box-shadow: #BBB 5px 0 10px;
  min-height: 100vh;
}
.sidebar svg {
  display: block;
  fill: #fcfcfc;
  margin: 2rem auto;
  max-width: 70px;
  width: 50%;
}

nav ul,
nav ul * + * {
  margin: 0;
}

[data-nav=submenu] {
  -webkit-padding-start: 1.25rem;
          padding-inline-start: 1.25rem;
}

.sidebar a.nav-link {
  color: #fcfcfc;
  display: block;
  line-height: normal;
  padding: 0.5625rem 0.875rem;
  text-decoration: none;
}
.sidebar a.nav-link:hover {
  background: #063a69;
  color: #fcfcfc;
  outline-width: 0; /* 2 */
  text-decoration: underline;
}
.sidebar a.nav-link:active {
  color: #fcfcfc;
  outline-width: 0; /* 2 */
}

/*------------------------------------*\
    #Breadcrumbs
    See: https://scottaohara.github.io/a11y_breadcrumbs/
\*------------------------------------*/
.breadcrumbs {
  padding-block: 0.625rem 0.9375rem;
}
.breadcrumbs .l-cluster > * {
  margin: 0;
}
.breadcrumbs .l-cluster > * > * {
  margin-block: 0;
  margin-inline: 0;
  padding-inline: 0 2em;
  position: relative;
}

.breadcrumbs ol ::marker {
  content: "" !important;
}

.breadcrumbs a {
  color: #252525;
  display: block;
  padding-block: 0.3125rem;
}
.breadcrumbs a:visited, .breadcrumbs a:hover, .breadcrumbs a:active {
  color: #252525;
}

.breadcrumbs [aria-current] {
  font-weight: 600;
  text-decoration: none;
}
.breadcrumbs [aria-current]:focus {
  outline-color: #252525;
}

/**
Separator chevron - see https://codepen.io/jonneal/pen/kptBs
*/
.breadcrumbs li:not(:last-child)::after {
  block-size: 0.5em;
  border-block-end-width: 0;
  border-block-start-width: 0.1em;
  border-inline-end-width: 0.1em;
  border-inline-start-width: 0;
  border-style: solid;
  content: "";
  display: block;
  inline-size: 0.5em;
  inset-block-start: 50%;
  inset-inline-end: 1.25em;
  position: absolute;
  transform: rotate(45deg) translateY(-50%);
}

[dir=rtl] .breadcrumbs li:not(:last-child)::after {
  transform: rotate(-45deg) translateY(-50%);
}

/*------------------------------------*\
    #Main
\*------------------------------------*/
/**
1. We use left and right padding to add some minimum space between the
contents of <main> and the edges of the parent element or viewport.
To avoid making the content narrower than intended, we add an exception
to our global box-sizing rule.
 */
main,
#main {
  box-sizing: content-box;
  margin-inline: auto;
  max-inline-size: 70rem;
  padding-block: 1.5rem 6.25rem;
  padding-inline: 5vw;
}

.component + .component {
  -webkit-margin-before: 1.5rem;
          margin-block-start: 1.5rem;
}
@media screen and (min-width: 48em) {
  .component + .component {
    -webkit-margin-before: 3rem;
            margin-block-start: 3rem;
  }
}

/*------------------------------------*\
    #Text component
\*------------------------------------*/
.component--text > * {
  max-inline-size: 41.25rem;
}

/*------------------------------------*\
    #Quotes
\*------------------------------------*/
.component--quote {
  -webkit-margin-start: 0;
          margin-inline-start: 0;
  padding: 1.25rem;
  -webkit-padding-start: 1.875rem;
          padding-inline-start: 1.875rem;
  position: relative;
}
.component--quote::before {
  background-color: #1371c2;
  block-size: 100%;
  border-radius: 0.3125rem;
  content: "";
  inline-size: 0.625rem;
  inset-block-start: 0;
  inset-inline-start: 0;
  position: absolute;
}
.component--quote > *:not(footer) {
  color: #1371c2;
  font-weight: bold;
}
.component--quote footer {
  font-size: 1rem;
  font-style: normal;
}

/*------------------------------------*\
    #Image component
\*------------------------------------*/
.component--image {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.component--image > * + * {
  -webkit-margin-before: 1em;
          margin-block-start: 1em;
}
.component--image figcaption {
  font-size: 1.0625rem; /* 1 */
  font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1.0625rem);
  line-height: 1.5;
}
.component--image figcaption > * {
  -webkit-margin-before: 0;
          margin-block-start: 0;
  max-inline-size: 33.75rem;
}
.component--image figcaption > a {
  display: inline-block;
  margin: 0;
  padding-block: 0.625rem;
}

/*------------------------------------*\
    #Avatars
\*------------------------------------*/
.avatar {
  background-color: #fcfcfc;
  block-size: 6.25rem;
  border: solid 1px #1371c2;
  border-radius: 50%;
  inline-size: 6.25rem;
  overflow: hidden;
}
.avatar img {
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover;
}

.avatar--med {
  block-size: 3.125rem;
  inline-size: 3.125rem;
}

.avatar--small {
  block-size: 2rem;
  inline-size: 2rem;
}

/*------------------------------------*\
    #Video component
\*------------------------------------*/
.component--video figcaption {
  font-size: 1.0625rem; /* 1 */
  font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1.0625rem);
  line-height: 1.5;
  -webkit-margin-before: 1em;
          margin-block-start: 1em;
}
.component--video figcaption > * {
  -webkit-margin-before: 0;
          margin-block-start: 0;
  max-inline-size: 33.75rem;
}
.component--video figcaption > a {
  display: inline-block;
  margin: 0;
  padding-block: 0.625rem;
}

/*------------------------------------*\
    #Notes
\*------------------------------------*/
.note {
  background-position: 1.5rem 1.5rem;
  background-repeat: no-repeat;
  background-size: 2rem;
  border: solid 1px;
  border-inline-start-width: 4px;
  padding: 1.5rem;
  -webkit-padding-start: 4.5rem;
          padding-inline-start: 4.5rem;
}
.note > * {
  max-inline-size: 41.25rem;
}
.note > *:first-child {
  -webkit-margin-before: 0;
          margin-block-start: 0;
}
.note > *:last-child,
.note > * li:last-child {
  -webkit-margin-after: 0;
          margin-block-end: 0;
}

.note--error {
  background-color: #fef1f1;
  background-image: url("../svg/note-bg-error.svg");
  border-color: #f85156;
  color: #a4141b;
}

.note--info {
  background-color: #e9f6ff;
  background-image: url("../svg/note-bg-info.svg");
  border-color: #1b90f4;
  color: #063a69;
}

.note--success {
  background-color: #d6fedc;
  background-image: url("../svg/note-bg-success.svg");
  border-color: #2dc158;
  color: #115f28;
}

.note--warning {
  background-color: #fef3da;
  background-image: url("../svg/note-bg-warning.svg");
  border-color: #c3a62c;
  color: #605111;
}

/*------------------------------------*\
    #Cards

    1. The `stack` mixin applies flexbox in the column direction,
    so we need to prevent things like buttons and links
    from stretching horizontally
\*------------------------------------*/
.card {
  background-color: #fcfcfc;
  border-radius: 0.25rem;
  box-shadow: -1px 1px 4px 0 rgba(55, 70, 95, 0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.card__text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex-grow: 1;
  order: 1;
  -webkit-padding-before: 1rem;
          padding-block-start: 1rem;
}
.card__text > * + * {
  -webkit-margin-before: 1em;
          margin-block-start: 1em;
}

/**
"Neat cards": for a row of cards of equal height and with the last item
(e.g. CTA or tag list) always pushed to the bottom edge.
 */
.card--neat {
  block-size: 100%;
}

.card--neat .card__text > :nth-last-child(2) {
  -webkit-margin-after: 1em;
          margin-block-end: 1em;
}
.card--neat .card__text > :last-child {
  -webkit-margin-before: auto;
          margin-block-start: auto;
}

.card__text > a:not([class]) {
  align-self: flex-start; /* 1 */
  -webkit-margin-before: 0.375rem;
          margin-block-start: 0.375rem;
  padding-block: 0.625rem;
}

.card__heading {
  font-size: 1.5625rem; /* 1 */
  font-size: clamp(1.25rem, 1.125rem + 0.625vw, 1.5625rem);
  line-height: 1.3;
  -webkit-margin-before: 0;
          margin-block-start: 0;
}

.card__link {
  border: 0;
  color: #252525;
  text-decoration: none;
}
.card__link:hover {
  text-decoration: underline; /* 1 */
  -webkit-text-decoration-skip: auto;
          text-decoration-skip: auto;
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

/*------------------------------------*\
    #Shelves
    (Used for organising groups of cards, etc.)
\*------------------------------------*/
.component--shelves {
  overflow: hidden;
}

.component--shelves__intro {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  -webkit-margin-after: 1.875rem;
          margin-block-end: 1.875rem;
  max-inline-size: 41.25rem;
}
.component--shelves__intro > * + * {
  -webkit-margin-before: 1rem;
          margin-block-start: 1rem;
}

@media screen and (min-width: 48em) {
  .component--shelves__items {
    display: flex;
    flex-wrap: wrap;
    margin: -1.5%;
  }
}

@media screen and (min-width: 48em) {
  .component--shelves__items > li {
    flex: 1 0 33%;
    max-inline-size: 50%;
    padding: 1.5%;
  }
}

.component--shelves__items > * + * {
  -webkit-margin-before: 1.25rem;
          margin-block-start: 1.25rem;
}
@media screen and (min-width: 48em) {
  .component--shelves__items > * + * {
    -webkit-margin-before: 0;
            margin-block-start: 0;
  }
}

/*------------------------------------*\
    #Progress bar

    Typically used on multi-step forms
\*------------------------------------*/
.progress-list {
  -webkit-margin-after: 1.875rem;
          margin-block-end: 1.875rem;
}
@media screen and (min-width: 48em) {
  .progress-list {
    display: flex;
    flex-wrap: wrap;
  }
}

.progress-list ::marker {
  content: "" !important;
}

.progress-list li {
  position: relative;
}
.progress-list li::after {
  background-color: #525252;
  block-size: 0.8125rem;
  content: "";
  inline-size: 0.1875rem;
  inset-block-end: -1rem;
  inset-inline-start: 1.1875rem;
  position: absolute;
}
@media screen and (min-width: 48em) {
  .progress-list li::after {
    block-size: 0.1875rem;
    inline-size: 100%;
    inset-block: 2rem auto;
    inset-inline-start: 50%;
    z-index: -1;
  }
}
.progress-list li + li {
  -webkit-margin-before: 1.25rem;
          margin-block-start: 1.25rem;
}
@media screen and (min-width: 48em) {
  .progress-list li + li {
    -webkit-margin-before: 0;
            margin-block-start: 0;
  }
}

.progress-list li.complete::after {
  background-color: #063a69;
}

.progress-list li:last-child::after {
  display: none;
}

.progress-step__inner {
  align-items: center;
  display: flex;
}
@media screen and (min-width: 48em) {
  .progress-step__inner {
    flex-direction: column;
    -webkit-padding-before: 0.625rem;
            padding-block-start: 0.625rem;
    text-align: center;
  }
}
.progress-step__inner > span {
  font-size: 1.0625rem; /* 1 */
  font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1.0625rem);
  line-height: 1.5;
  padding: 0.625rem;
}
@media screen and (min-width: 48em) {
  .progress-step__inner > span {
    inline-size: 9.375rem;
  }
}

.progress-step__marker {
  align-items: center;
  background-color: #fcfcfc;
  block-size: 2.75rem;
  border: solid 3px #525252;
  border-radius: 50%;
  display: flex;
  inline-size: 2.75rem;
  justify-content: center;
}
@media screen and (min-width: 48em) {
  .progress-step__marker {
    box-shadow: 0 0 0 0.625rem #fcfcfc;
  }
}

.progress-step__marker.complete {
  background-color: #063a69;
  border-color: #063a69;
  color: #fcfcfc;
  position: relative;
}
.progress-step__marker.complete::before, .progress-step__marker.complete::after {
  background-color: #063a69;
  content: "";
  position: absolute;
}
.progress-step__marker.complete::before {
  block-size: 2.375rem;
  border-radius: 50%;
  inline-size: 2.375rem;
  inset-block-start: 0;
  inset-inline-start: 0;
}
.progress-step__marker.complete::after {
  block-size: 0.5625rem;
  border: solid;
  border-block-start-color: transparent;
  border-width: 0 0 3px 3px;
  inline-size: 1.125rem;
  inset-block-start: 0.8125rem;
  inset-inline-start: 0.625rem;
  transform: rotate(-45deg);
}

.progress-list a {
  color: #525252;
  -webkit-text-decoration-skip: auto;
          text-decoration-skip: auto;
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}
.progress-list a:visited {
  color: #063a69;
}
.progress-list a:hover {
  color: #0b80e5;
}
.progress-list a:active {
  color: #000;
}

/*------------------------------------*\
    #Tag list

    1. High contrast themes tend to eliminate background-color, so we need a border
    to mark the shape and boundaries of each tag. Match the border-color to the
    background-color if you do not want the border to be obvious.

    2. Meet WCAG AAA target size requirements for this font size - see
    https://www.w3.org/WAI/WCAG21/Understanding/target-size.html
\*------------------------------------*/
.tag-list.tag-list {
  margin: -0.625rem;
}
.tag-list.tag-list li {
  margin: 0.625rem;
}

.tag {
  font-size: 1.0625rem; /* 1 */
  font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1.0625rem);
  line-height: 1.5;
  background-color: #6f6f6f;
  border: solid 1px #6f6f6f; /* 1 */
  border-radius: 0.25rem;
  color: #fff;
  display: inline-block;
  padding: 0.5625rem; /* 2 */
  text-decoration: none;
}
.tag:hover {
  text-decoration: underline;
  -webkit-text-decoration-skip: auto;
          text-decoration-skip: auto;
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

/*------------------------------------*\
    #Collapsible sections

    1. Restrict line-length for readability
\*------------------------------------*/
.component--collapsibles {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.component--collapsibles > * + * {
  -webkit-margin-before: 1em;
          margin-block-start: 1em;
}

[data-heading=collapsibles] {
  font-size: 1.375rem; /* 1 */
  font-size: clamp(1.125rem, 1.025rem + 0.5vw, 1.375rem);
  line-height: 1.5;
  margin: 0;
}

.component--collapsibles__panel {
  background-color: #fcfcfc;
  border-radius: 0.375rem;
  box-shadow: -0.0625rem 0.0625rem 0.25rem rgba(55, 70, 95, 0.12);
  padding: 1.5625rem;
}

.component--collapsibles__panel__content > * {
  max-inline-size: 41.25rem; /* 1 */
}

/*------------------------------------*\
    #Carousel - no-js customisation of Splide
\*------------------------------------*/
/*
 Splide hides the entire carousel if there is no JS.
 Amplify prefers to keep the slides visible and stacked vertically.
 */
.no-js .splide {
  visibility: visible;
}
.no-js .splide__list {
  display: block;
}
.no-js .splide__list > * + * {
  margin-top: 1rem;
}

/*------------------------------------*\
    #Search
\*------------------------------------*/
input[type=search] {
  max-inline-size: none;
  position: relative;
  z-index: 1;
}

.l-sidebar.search {
  overflow: visible;
}

.l-sidebar.search > * {
  margin: -0.75rem;
}

.l-sidebar.search > * > * {
  margin: 0.75rem;
}

.l-sidebar.search form .sidebar {
  flex-basis: auto;
}

.l-sidebar.search form .not-sidebar {
  min-inline-size: 70%;
}

.l-sidebar.search input[type=search] {
  max-inline-size: none;
}

@supports ((-webkit-padding-start: 1em) or (padding-inline-start: 1em)) {
  input[type=search] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cdefs/%3E%3Cpath d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'/%3E%3C/svg%3E");
    background-position: center left 0.5em;
    background-repeat: no-repeat;
    background-size: 1.25rem;
    -webkit-padding-start: 2.5rem;
            padding-inline-start: 2.5rem;
  }
  [dir=rtl] input[type=search] {
    background-position: center right 0.5em;
  }
}
/*------------------------------------*\
    #Pagination
\*------------------------------------*/
.pagination {
  -webkit-margin-before: 2.5rem;
          margin-block-start: 2.5rem;
}

.l-cluster.pagination > * {
  margin-block: 0;
}

.l-cluster.pagination > * > * {
  margin-block: 0;
}

.pagination__list a {
  font-size: 1.0625rem; /* 1 */
  font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1.0625rem);
  line-height: 1.5;
  color: #000;
  display: block;
  padding-block: 0.6875rem;
  padding-inline: 1.125rem;
  text-decoration: none;
}
.pagination__list a:visited {
  color: #000;
}
.pagination__list a[href]:hover {
  text-decoration: underline;
  -webkit-text-decoration-skip: auto;
          text-decoration-skip: auto;
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}
.pagination__list a[href][aria-current] {
  background-color: #1371c2;
  color: #fcfcfc;
  font-weight: bold;
}
.pagination__list a[href][aria-current]:hover {
  color: #fcfcfc;
  text-decoration: none;
}

/*------------------------------------*\
    #Global footer

    1. Needed for sticky footer
    2. Because autoprefixer does not cover IE grid

    Amplify uses the grid implementation of the sticky footer
    from https://css-tricks.com/couple-takes-sticky-footer/ -

   The footer isn't sticky in IE, but the flexbox alternative
   results in display issues, caused by components with overflow
   not set to visible (e.g. carousels) if used within the sidebar layout.

\*------------------------------------*/
.global-footer {
  grid-row: 2/3; /* 1 */
  -ms-grid-row-span: 1; /* 2 */
  padding-block: 1.25rem 1.5625rem;
  padding-inline: 0;
}
.global-footer .l-center {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.global-footer .l-center > * + * {
  -webkit-margin-before: 1rem;
          margin-block-start: 1rem;
}
.global-footer a,
.global-footer .copyright {
  font-size: 1.0625rem; /* 1 */
  font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1.0625rem);
  line-height: 1.5;
}
.global-footer a {
  color: #252525;
}
.global-footer a:visited, .global-footer a:hover, .global-footer a:active {
  color: #252525;
}

/*------------------------------------*\
    #Templates
\*------------------------------------*/
/*------------------------------------*\
    #Amplify

    1. Used purely for the static Amplify site
\*------------------------------------*/
/*------------------------------------*\
    #Utilities
\*------------------------------------*/
/*------------------------------------*\
    #Alignment utilities

    1. Allows text-direction to change with writing direction
\*------------------------------------*/
.u-float-left {
  float: left;
  float: inline-start; /* 1 */
}

.u-float-right {
  float: right;
  float: inline-end; /* 1 */
}

.u-text-center {
  text-align: center;
}

.u-text-left {
  text-align: left;
  text-align: start; /* 1 */
}

.u-text-right {
  text-align: right;
  text-align: end; /* 1 */
}

/**
Change text-alignment at the "laptop" breakpoint,
as defined in /10-settings/breakpoints

1. Logical property allows text-direction to change with `ltr`
 */
@media screen and (min-width: 80em) {
  .u-text-left-from-lap {
    text-align: start;
  }
}

@media screen and (min-width: 80em) {
  .u-text-center-from-lap {
    text-align: center;
  }
}

@media screen and (min-width: 80em) {
  .u-text-right-from-lap {
    text-align: end;
  }
}

/*------------------------------------*\
    #Clearfix utility

    https://css-tricks.com/snippets/css/clear-fix/

    Extend the clearfix placeholder with Sass to avoid
    having it appear over and over in your markup.
\*------------------------------------*/
/*------------------------------------*\
    #Layout utilities
\*------------------------------------*/
/**
For a full-viewport-width element inside a limited width parent.
The parent must be exactly centered in the browser in order for this
to work - see https://css-tricks.com/full-width-containers-limited-width-parents/
 */
.u-full-width {
  inline-size: 100vw;
  inset-inline: 50%;
  margin-inline: -50vw;
  position: relative;
}

/**
To horizontally center a block-level item
 */
.u-center {
  margin-inline: auto;
  position: relative;
}

/*------------------------------------*\
    #Margin utilities

    Double specificity in classname avoids use of !important
\*------------------------------------*/
.u-no-margin.u-no-margin {
  margin: 0;
}

.u-no-margin-top.u-no-margin-top {
  -webkit-margin-before: 0;
          margin-block-start: 0;
}