:root {
    --font-family-default: "AtkinsonHyperLegible", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --font-family-serif: "DMSerifDisplay", "Georgia", "Times New Roman", serif;
    --font-size-plus-9: 5rem;
    --font-size-plus-8: 3.75rem;
    --font-size-plus-7: 3.375rem;
    --font-size-plus-6: 3rem;
    --font-size-plus-5: 2.25rem;
    --font-size-plus-4: 1.75rem;
    --font-size-plus-3: 1.375rem;
    --font-size-plus-2: 1.25rem;
    --font-size-plus-1: 1.125rem;
    --font-size-baseline: 1rem;
    --font-size-minus-1: .875rem;
    --font-size-minus-2: .75rem;
    --baseline: 1rem;
    --gutter: 24px;
    --max-container-width: 1600px;
    --white: #fff;
    --light-grey-1: #f5f5f5;
    --light-grey-2: #e6e6e6;
    --light-grey-3: #ccc;
    --mid-grey-1: #b3b3b3;
    --mid-grey-2: #999;
    --mid-grey-3: grey;
    --dark-grey-1: #707070;
    --dark-grey-2: #4d4d4d;
    --dark-grey-3: #333;
    --off-black: #1a1a1a;
    --highlight: #ffb619;
    --error: #c01616;
    --brand-blue: #14133b;
    --brand-blue-80: #302f58;
    --brand-blue-50: #6e6b8e;
    --brand-blue-30: #a29fb9;
    --brand-blue-15: #d0cfdc;
    --brand-blue-10: #dddce7;
    --brand-burgundy: #470e27;
    --brand-burgundy-80: #643145;
    --brand-burgundy-30: #bda5ae;
    --brand-burgundy-15: #d9ccd2;
    --brand-burgundy-10: #e8dfe3;
    --brand-burgundy-hover: #4d2232;
    --brand-pink: #d268a5;
    --brand-pink-80: #d988b8;
    --brand-pink-30: #f0d6e9;
    --brand-pink-15: #fde5f6;
    --brand-pink-10: #faf2f8;
    --brand-cream: #dead95;
    --brand-cream-80: #e4bdaa;
    --brand-cream-50: #eed6ca;
    --brand-cream-30: #f5e6df;
    --brand-cream-15: #fef0ea;
    --brand-cream-10: #fcf7f5;
    --brand-red: #eb5b59;
    --brand-red-80: #f08277;
    --brand-red-30: #fad4cc;
    --brand-red-15: #ffe4dd;
    --brand-red-10: #fef1ee;
    --brand-grey: #373736;
    --text-tint: var(--brand-blue-50);
    --primary: var(--white);
    --primary-heading: var(--brand-blue);
    --primary-subheading: var(--brand-blue-50);
    --primary-text: var(--brand-blue);
    --accent: var(--brand-red);
    --text: var(--brand-blue);
    --btn-primary: var(--brand-blue-50);
    --btn-primary-text: var(--white);
    --btn-primary-hover: var(--brand-blue-80);
    --btn-tertiary: var(--brand-red-80);
    --btn-tertiary-text: var(--brand-blue);
    --btn-tertiary-hover: var(--brand-red);
    --btn-secondary: var(--light-grey-2);
    --btn-secondary-text: var(--brand-blue);
    --btn-secondary-hover: var(--mid-grey-2);
    --primary-border: var(--light-grey-3);
    --light-weight: 300;
    --regular-weight: 400;
    --semibold-weight: 600;
    --measure: 40em;
    --bp-xs: 480px;
    --bp-sm: 768px;
    --bp-md: 1024px;
    --bp-lg: 1200px;
    --notification-banner-height: 0px
}

.blue {
    --primary: var(--brand-blue);
    --primary-heading: var(--brand-cream);
    --primary-subheading: var(--white);
    --primary-text: var(--white);
    --accent: var(--brand-red);
    --text: var(--brand-blue);
    --primary-border: #5a5a76
}

.burgundy {
    --primary: var(--brand-burgundy);
    --primary-heading: var(--white);
    --primary-subheading: var(--white);
    --primary-text: var(--white);
    --accent: var(--white);
    --text: var(--brand-burgundy);
    --primary-border: #7e5668
}

.red {
    --primary: var(--brand-red);
    --primary-heading: var(--brand-blue);
    --primary-subheading: var(--brand-blue);
    --primary-text: var(--brand-blue);
    --accent: var(--brand-blue);
    --text: var(--brand-red);
    --primary-border: #ac4846
}

.pink {
    --primary: var(--brand-pink);
    --primary-heading: var(--brand-blue);
    --primary-subheading: var(--brand-blue);
    --primary-text: var(--brand-blue);
    --accent: var(--brand-blue);
    --text: var(--brand-blue);
    --primary-border: #a65583
}

.cream,
.cream-50 {
    --primary: var(--brand-cream);
    --primary-heading: var(--brand-blue);
    --primary-subheading: var(--brand-blue);
    --primary-text: var(--brand-blue);
    --accent: var(--brand-blue);
    --text: var(--brand-blue);
    --primary-border: #c29783
}

.cream-50 {
    --primary: var(--brand-cream-50)
}

.blue-10 {
    --primary: var(--brand-blue-10);
    --primary-heading: var(--brand-blue);
    --primary-subheading: var(--brand-burgundy-80);
    --primary-text: var(--brand-blue);
    --primary-border: #bcbbc4
}

.burgundy-10 {
    --primary: var(--brand-burgundy-10);
    --primary-heading: var(--brand-blue);
    --primary-subheading: var(--brand-burgundy-80);
    --primary-text: var(--brand-blue);
    --primary-border: #c5bdc0
}

.red-10 {
    --primary: var(--brand-red-10);
    --primary-heading: var(--brand-blue);
    --primary-subheading: var(--brand-burgundy-80);
    --primary-text: var(--brand-blue);
    --primary-border: #d7cdca
}

.pink-10 {
    --primary: var(--brand-pink-10);
    --primary-heading: var(--brand-blue);
    --primary-subheading: var(--brand-burgundy-80);
    --primary-text: var(--brand-blue);
    --primary-border: #d5cfd3
}

.cream-10 {
    --primary: var(--brand-cream-10);
    --primary-heading: var(--brand-blue);
    --primary-subheading: var(--brand-burgundy-80);
    --primary-text: var(--brand-blue);
    --accent: var(--brand-blue);
    --text: var(--brand-blue);
    --primary-border: #d5d1cf
}

.card--white {
    --card-primary: var(--white);
    --card-accent: var(--brand-blue);
    --card-text: var(--dark-grey-1)
}

.card--blue {
    --card-primary: var(--brand-blue);
    --card-accent: var(--brand-blue-30);
    --card-text: var(--white);
    --card-text-meta: var(--brand-blue-10);
    --card-primary-hover: var(--brand-blue-80);
    --card-border-hover: var(--brand-blue)
}

.card--blue-80 {
    --card-primary: var(--brand-blue-80);
    --card-accent: var(--brand-blue-30);
    --card-text: var(--white);
    --card-border-hover: var(--brand-blue)
}

.card--pink {
    --card-primary: var(--brand-pink);
    --card-accent: var(--brand-pink-30);
    --card-text: var(--brand-blue);
    --card-text-meta: var(--brand-blue);
    --card-primary-hover: var(--brand-pink-80);
    --card-border-hover: var(--brand-pink)
}

.card--pink-80 {
    --card-primary: var(--brand-pink-80);
    --card-accent: var(--brand-pink-30);
    --card-text: var(--brand-grey);
    --card-border-hover: var(--brand-pink)
}

.card--pink-30 {
    --card-primary: var(--brand-pink-30);
    --card-accent: var(--brand-pink);
    --card-text: var(--brand-grey);
    --card-border-hover: var(--brand-pink)
}

.card--red {
    --card-primary: var(--brand-red);
    --card-accent: var(--brand-red-30);
    --card-text: var(--brand-blue);
    --card-text-meta: var(--brand-blue);
    --card-primary-hover: var(--brand-red-80);
    --card-border-hover: var(--brand-red)
}

.card--red-80 {
    --card-primary: var(--brand-red-80);
    --card-accent: var(--brand-red-30);
    --card-text: var(--brand-grey);
    --card-border-hover: var(--brand-red)
}

.card--cream {
    --card-primary: var(--brand-cream);
    --card-accent: var(--brand-cream-30);
    --card-text: var(--brand-blue);
    --card-text-meta: var(--brand-blue-80);
    --card-primary-hover: var(--brand-cream-80);
    --card-border-hover: var(--brand-cream)
}

.card--cream-80 {
    --card-primary: var(--brand-cream-80);
    --card-accent: var(--brand-cream-30);
    --card-text: var(--brand-grey);
    --card-border-hover: var(--brand-cream)
}

.card--burgundy {
    --card-primary: var(--brand-burgundy);
    --card-accent: var(--brand-burgundy-30);
    --card-text: var(--white);
    --card-text-meta: var(--brand-burgundy-30);
    --card-primary-hover: var(--brand-burgundy-80);
    --card-border-hover: var(--brand-burgundy)
}

.card--burgundy-80 {
    --card-primary: var(--brand-burgundy-80);
    --card-accent: var(--brand-burgundy-30);
    --card-text: var(--white);
    --card-primary-hover: var(--brand-burgundy-hover);
    --card-border-hover: var(--brand-burgundy-10)
}

.card--pink-10 {
    --card-primary: var(--brand-pink-10);
    --card-accent: var(--brand-pink);
    --card-text: var(--brand-grey);
    --card-primary-hover: var(--brand-pink-15);
    --card-border-hover: var(--brand-pink-80)
}

.card--red-10 {
    --card-primary: var(--brand-red-10);
    --card-accent: var(--brand-red);
    --card-text: var(--brand-grey);
    --card-primary-hover: var(--brand-red-15);
    --card-border-hover: var(--brand-red-80)
}

.card--cream-10 {
    --card-primary: var(--brand-cream-10);
    --card-accent: var(--brand-cream);
    --card-text: var(--brand-blue);
    --card-primary-hover: var(--brand-cream-15);
    --card-border-hover: var(--brand-cream-80)
}

.card--burgundy-10 {
    --card-primary: var(--brand-burgundy-10);
    --card-accent: var(--brand-burgundy);
    --card-text: var(--brand-grey);
    --card-primary-hover: var(--brand-burgundy-15);
    --card-border-hover: var(--brand-burgundy-80)
}

.card--blue-10 {
    --card-primary: var(--brand-blue-10);
    --card-accent: var(--brand-blue);
    --card-text: var(--brand-grey);
    --card-primary-hover: var(--brand-blue-15);
    --card-border-hover: var(--brand-blue-80)
}

.card--cream,
.card--pink,
.card--red,
.pink .bg-primary,
.pink .header,
.red .bg-primary,
.red .header {
    --highlight: var(--white)
}

.blue-10 .bg-primary,
.blue-10 .header,
.burgundy-10 .bg-primary,
.burgundy-10 .header,
.card--blue-10,
.card--burgundy-10,
.card--cream,
.card--cream-10,
.card--cream-80,
.card--pink,
.card--pink-10,
.card--pink-30,
.card--pink-80,
.card--red,
.card--red-10,
.card--red-80,
.card--white,
.cream .bg-primary,
.cream .header,
.cream-10 .bg-primary,
.cream-10 .header,
.cream-50 .bg-primary,
.cream-50 .header,
.pink-10 .bg-primary,
.pink-10 .header,
.red-10 .bg-primary,
.red-10 .header {
    --highlight: var(--brand-blue)
}

.block--bg-cream,
.block--bg-cream-50,
.block--bg-pink,
.block--bg-red,
.card--blue,
.card--blue-80,
.card--burgundy,
.on--primary-sub-navigation .header,
.on--search .header {
    --highlight: #ffb619
}

.on--primary-navigation .header {
    @media (max-width: 1023px) {
        --highlight:#ffb619
    }
}

.blue-10 .header,
.burgundy-10 .header,
.cream-10 .header,
.pink-10 .header,
.red-10 .header {
    @media (min-width: 1024px) {
        .btn--primary {
            --highlight:var(--brand-red)
        }
    }
}

.blue .header .btn--primary,
.cream .bg-primary .btn,
.cream .header .btn {
    @media (min-width: 1024px) {
        --highlight:var(--white)
    }
}

.blue .header .btn--primary,
.burgundy .header .btn--primary {
    @media (min-width: 1024px) {
        --btn-primary:var(--white);
        --btn-primary-text: var(--brand-blue);
        --btn-primary-hover: var(--brand-blue-10)
    }
}

.burgundy .bg-primary {
    .image__figcaption {
        color: #fff
    }
}

.blue .bg-primary,
.cream .bg-primary,
.pink .bg-primary,
.red .bg-primary {
    .image__figcaption {
        color: var(--primary-heading)
    }
}

.bg-primary,
.blue,
.burgundy {
    .search__toggle {
        path,
        rect,
        svg {
            fill: var(--white)
        }
    }
    .primary-navigation__member-item {
        .btn--text {
            color: var(--white)
        }
    }
}

.on--primary-navigation,
.on--primary-sub-navigation {
    .bg-primary,
    .blue,
    .burgundy {
        .primary-navigation__member-item {
            .btn--text {
                color: var(--off-black)
            }
        }
        .search__toggle {
            path,
            rect,
            svg {
                fill: var(--off-black)
            }
        }
    }
}

.blue .bg-primary .btn--primary,
.burgundy .bg-primary .btn--primary {
    background: var(--white);
    border: 1px solid var(--white);
    color: var(--btn-secondary-text);
    &:active,
    &:hover {
        background: var(--btn-secondary-hover);
        border-color: var(--btn-secondary-hover)
    }
}

.on--primary-sub-navigation .btn--nav {
    background: var(--brand-blue);
    border: 1px solid var(--brand);
    color: var(--white);
    &:active,
    &:hover {
        background: var(--brand-blue-80);
        border-color: var(--brand-blue-80)
    }
}

@media (prefers-reduced-motion:no-preference) {
    @view-transition {
        navigation: auto
    }
}

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

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

body,
html {
    background-color: #fff;
    color: var(--off-black)
}

html {
    color-scheme: light dark;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    height: 100%;
    text-rendering: optimizeSpeed;
    &:focus-within {
        scroll-behavior: smooth
    }
}

html:has(.btn--top) {
    scroll-padding: 4rem
}

html:has(.guide-navigation) {
    scroll-padding: 6.5rem
}

html:has(.article-navigation__container) {
    scroll-padding: 11rem
}

body {
    color: var(--default-color);
    display: flex;
    flex-direction: column;
    font-size: 100%;
    line-height: 1.5;
    min-height: 100%;
    min-width: 100%
}

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

ol,
ul {
    list-style: none
}

ins {
    text-decoration: none
}

mark {
    font-style: italic;
    font-weight: var(--semibold-weight)
}

del {
    text-decoration: line-through
}

dfn {
    font-style: italic
}

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

td {
    vertical-align: top
}

hr {
    border: 0;
    display: block;
    height: 1px;
    margin: 0;
    padding: 0
}

[hidden] {
    display: none
}

:focus {
    outline: 0 none
}

:focus-visible {
    box-shadow: 0 0 0 4px var(--highlight);
    outline: 4px solid #0000
}

img {
    border: 0;
    display: block;
    height: auto;
    max-width: 100%
}

a {
    color: currentColor
}

a:active,
a:focus,
a:hover {
    text-decoration: none;
    text-decoration-skip-ink: auto
}

b,
strong {
    font-weight: var(--semibold-weight)
}

em,
i {
    font-style: italic
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: var(--regular-weight)
}

blockquote,
q {
    quotes: none
}

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

address {
    font-style: var(--regular-weight)
}

legend {
    border: 0;
    padding: 0;
    white-space: normal
}

figure {
    margin: 0
}

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

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

button,
input,
select {
    -moz-appearance: none;
    -webkit-appearance: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    vertical-align: middle
}

select::-ms-expand {
    display: none
}

input[type=search] {
    -moz-appearance: none;
    -webkit-appearance: none;
    border-radius: 0
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
    display: none
}

input[type=checkbox] {
    -moz-appearance: checkbox;
    -webkit-appearance: checkbox
}

input[type=radio] {
    -moz-appearance: radio;
    -webkit-appearance: radio
}

select {
    -moz-appearance: none;
    -webkit-appearance: none
}

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

button,
input,
select,
textarea {
    font: inherit;
    letter-spacing: inherit;
    word-spacing: inherit
}

button,
input[type=button],
input[type=reset],
input[type=submit] {
    -webkit-appearance: button;
    border: 0;
    cursor: pointer
}

a[disabled],
button[disabled],
input[disabled] {
    cursor: default;
    pointer-events: none
}

textarea {
    overflow: auto;
    resize: vertical;
    vertical-align: top;
    width: 100%
}

@media (prefers-reduced-motion:reduce) {
    html:focus-within {
        scroll-behavior: auto
    }
    *,
    :after,
    :before {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important
    }
}

.wrap {
    margin: 0 auto;
    max-width: var(--max-container-width);
    padding: 0 var(--gutter);
    width: 100%;
    @media(min-width: 768px) {
        padding:0 calc(var(--gutter))
    }
    @media(min-width:1024px) {
        padding: 0 calc(var(--gutter)*2)
    }
}

.grid {
    display: grid;
    gap: var(--baseline) var(--gutter);
    grid-template-columns: repeat(12, 1fr)
}

.xs-12 {
    grid-column: auto/span 12
}

.xs-6 {
    grid-column: auto/span 6
}

@media(min-width:768px) {
    .sm-12 {
        grid-column: auto/span 12
    }
    .sm-8 {
        grid-column: auto/span 8
    }
    .sm-6 {
        grid-column: auto/span 6
    }
    .sm-4 {
        grid-column: auto/span 4
    }
}

@media(min-width:1024px) {
    .md-12 {
        grid-column: auto/span 12
    }
    .md-10 {
        grid-column: auto/span 10
    }
    .md-9 {
        grid-column: auto/span 9
    }
    .md-8 {
        grid-column: auto/span 8
    }
    .md-7 {
        grid-column: auto/span 7
    }
    .md-6 {
        grid-column: auto/span 6
    }
    .md-5 {
        grid-column: auto/span 5
    }
    .md-4 {
        grid-column: auto/span 4
    }
    .md-3 {
        grid-column: auto/span 3
    }
}

@media(min-width:1200px) {
    .lg-12 {
        grid-column: auto/span 12
    }
    .lg-10 {
        grid-column: auto/span 10
    }
    .lg-9 {
        grid-column: auto/span 9
    }
    .lg-8 {
        grid-column: auto/span 8
    }
    .lg-7 {
        grid-column: auto/span 7
    }
    .lg-6 {
        grid-column: auto/span 6
    }
    .lg-4 {
        grid-column: auto/span 4
    }
    .lg-3 {
        grid-column: auto/span 3
    }
    .lg-2 {
        grid-column: auto/span 2
    }
}

@media(min-width:1500px) {
    .xl-3 {
        grid-column: auto/span 3
    }
    .xl-4 {
        grid-column: auto/span 4
    }
    .xl-8 {
        grid-column: auto/span 8
    }
    .xl-9 {
        grid-column: auto/span 9
    }
}

.push-4-col {
    @media(min-width: 1024px) {
        grid-column-end:13;
        grid-column-start: 5
    }
    @media(min-width:1200px) {
        grid-column-end: 12
    }
}

.push-3-col {
    @media(min-width: 1024px) {
        grid-column-end:10;
        grid-column-start: 4
    }
}

.push-2-col {
    @media(min-width: 1024px) {
        grid-column-end:12;
        grid-column-start: 3
    }
    @media(min-width:1200px) {
        grid-column-end: 10
    }
}

.push-1-col {
    @media(min-width: 1024px) {
        grid-column-end:12;
        grid-column-start: 2
    }
}

@font-face {
    font-display: swap;
    font-family: AtkinsonHyperLegible;
    font-stretch: normal;
    font-style: normal;
    font-weight: 300;
    src: url(../fonts/AtkinsonHyperlegibleNext-Light.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: AtkinsonHyperLegible;
    font-stretch: normal;
    font-style: italic;
    font-weight: 300;
    src: url(../fonts/AtkinsonHyperlegibleNext-Light.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: AtkinsonHyperLegible;
    font-stretch: normal;
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/AtkinsonHyperlegibleNext-Regular.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: AtkinsonHyperLegible;
    font-stretch: normal;
    font-style: normal;
    font-weight: 600;
    src: url(../fonts/AtkinsonHyperlegibleNext-SemiBold.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: "DMSerifDisplay";
    font-stretch: normal;
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/-nFnOHM81r4j6k0gjAW3mujVU2B2G_5x0vrx52jJ3Q.woff2) format("woff2");
    unicode-range: u+0100-02ba, u+02bd-02c5, u+02c7-02cc, u+02ce-02d7, u+02dd-02ff, u+0304, u+0308, u+0329, u+1d00-1dbf, u+1e00-1e9f, u+1ef2-1eff, u+2020, u+20a0-20ab, u+20ad-20c0, u+2113, u+2c60-2c7f, u+a720-a7ff
}

@font-face {
    font-display: swap;
    font-family: "DMSerifDisplay";
    font-stretch: normal;
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/-nFnOHM81r4j6k0gjAW3mujVU2B2G_Bx0vrx52g.woff2) format("woff2");
    unicode-range: u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+0304, u+0308, u+0329, u+2000-206f, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd
}

@font-face {
    font-display: swap;
    font-family: "DM Serif Display";
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/dmserifdisplay/v15/-nFnOHM81r4j6k0gjAW3mujVU2B2G_5x0vrx52jJ3Q.woff2) format("woff2");
    unicode-range: u+0100-02ba, u+02bd-02c5, u+02c7-02cc, u+02ce-02d7, u+02dd-02ff, u+0304, u+0308, u+0329, u+1d00-1dbf, u+1e00-1e9f, u+1ef2-1eff, u+2020, u+20a0-20ab, u+20ad-20c0, u+2113, u+2c60-2c7f, u+a720-a7ff
}

body,
button,
input,
select,
textarea {
    font-family: var(--font-family-default);
    font-weight: var(--light-weight)
}

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

.push-top {
    margin-top: var(--baseline)
}

.push-top--half {
    margin-top: calc(var(--baseline)/2)
}

.push-top--double {
    margin-top: calc(var(--baseline)*2)
}

.push-top--triple {
    margin-top: calc(var(--baseline)*3)
}

.push-bottom {
    margin-bottom: var(--baseline)
}

.push-bottom--half {
    margin-bottom: calc(var(--baseline)/2)
}

.push-bottom--double {
    margin-bottom: calc(var(--baseline)*2)
}

.push-bottom--triple {
    margin-bottom: calc(var(--baseline)*3)
}

.bg-light {
    background-color: var(--light-grey-1)
}

.bg-primary {
    background-color: var(--primary)
}

.bg-dark {
    background-color: var(--dark-grey-3);
    color: #fff
}

.bg-primary--framed {
    margin-bottom: calc(var(--baseline)*2);
    padding-bottom: calc(var(--baseline)*2);
    @media(min-width: 1024px) {
        margin-bottom:calc(var(--baseline)*3);
        padding-bottom: calc(var(--baseline)*3)
    }
}

.skip {
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%
}

.skip__btn {
    height: 1px;
    left: -999em;
    position: relative;
    text-align: center
}

.skip__btn:focus {
    background-color: #fff;
    color: var(--off-black);
    display: block;
    height: auto;
    left: 0;
    margin: 0 auto;
    outline: 0;
    pointer-events: all;
    position: fixed;
    right: 0;
    text-align: center;
    top: 0;
    width: auto
}

.header {
    background-color: var(--primary);
    border-bottom: 1px solid var(--primary-border);
    color: var(--primary-text);
    position: sticky;
    top: 0;
    z-index: 3
}

.header--dark {
    background-color: var(--dark-grey-3);
    border-bottom: 1px solid #ffffff4d;
    color: #fff
}

.header__inner {
    flex-direction: row;
    min-height: 100px
}

.header__bd,
.header__inner {
    align-items: center;
    display: flex
}

.header__bd {
    flex-grow: 1;
    justify-content: flex-end
}

@media (max-width:1023px) {
    .on--primary-navigation .header {
        background-color: var(--white);
        border-bottom: 1px solid var(--light-grey-3);
        color: var(--primary-text);
        rect,
        svg {
            color: var(--off-black)
        }
        .header__logo-img {
            content: url(../img/logo.svg)
        }
    }
}

.on--primary-sub-navigation .header,
.on--search .header {
    background-color: var(--white);
    border-bottom: 1px solid var(--light-grey-3);
    color: var(--primary-text);
    path,
    rect,
    svg {
        color: var(--off-black)
    }
    .header__logo-img {
        content: url(../img/logo.svg)
    }
    .primary-navigation__item {
        color: var(--off-black)
    }
}

.primary-navigation__back-button,
.primary-navigation__secondary-nav {
    display: none
}

.primary-navigation__btn-icon {
    fill: var(--primary-text);
    color: var(--primary-text)
}

.primary-navigation__item,
.primary-navigation__member-item {
    color: var(--primary-text)
}

.primary-navigation__member-item {
    .btn {
        font-size: var(--font-size-baseline);
        @media(min-width: 1100px) {
            font-size:var(--font-size-plus-1);
            font-weight: var(--light-weight)
        }
    }
}

.primary-navigation__button {
    font-size: var(--font-size-baseline);
    @media(min-width: 1100px) {
        font-size:var(--font-size-plus-1)
    }
}

@media(max-width:1023px) {
    .primary-navigation {
        display: none
    }
    .on--primary-navigation,
    .on--primary-sub-navigation {
        .footer,
        .main,
        .search,
        .skip__btn {
            display: none !important;
            visibility: hidden !important
        }
    }
    .on--primary-sub-navigation {
        .primary-navigation__item:not(.is--active),
        .primary-navigation__member-item {
            display: none
        }
    }
    .primary-navigation__btn {
        align-items: center;
        background: #0000;
        display: flex;
        height: 44px;
        justify-content: center;
        padding: 0;
        width: 44px;
        &:focus-within {
            outline: 4px var(--highlight) solid
        }
    }
    .primary-navigation__btn--close {
        display: none
    }
    .primary-navigation__inner {
        background: #fff;
        left: 0;
        margin: 0;
        max-width: none;
        min-height: 100vh;
        overflow: auto;
        padding: 0 var(--gutter) var(--baseline) var(--gutter);
        position: fixed;
        width: 100vw
    }
    .primary-navigation__back-button {
        background: #fff;
        display: block;
        height: 44px;
        width: 24px;
        &:focus,
        &:hover {
            .primary-navigation__back-button-icon {
                opacity: 1;
                transform: translateX(-4px);
                transition: transform 60ms ease, opacity 60ms ease
            }
        }
    }
    .primary-navigation__back-button-icon {
        opacity: .5;
        transition: transform .12s ease, opacity .12s ease
    }
    .primary-navigation__list {
        background: #fff;
        left: 0;
        min-height: calc(100vh - 100px - var(--notification-banner-height));
        overflow-y: scroll;
        padding: calc(var(--baseline)*2) var(--gutter) calc(var(--baseline)*2) var(--gutter);
        position: absolute;
        width: 100vw;
        z-index: 1;
        @media(min-width: 768px) {
            padding:calc(var(--baseline)*2) calc(var(--gutter)*2) calc(var(--baseline)*2) calc(var(--gutter)*2)
        }
    }
    .primary-navigation__secondary-nav {
        display: none
    }
    .primary-navigation__secondary-list {
        padding-top: 0;
        z-index: 2
    }
    .primary-navigation__button,
    .primary-navigation__item-heading,
    .primary-navigation__link {
        align-items: center;
        background: #0000;
        border-bottom: 1px solid var(--light-grey-3);
        color: currentColor;
        display: flex;
        font-size: var(--font-size-plus-2);
        justify-content: space-between;
        padding-bottom: calc(var(--baseline)/2);
        padding-top: calc(var(--baseline)/2);
        text-align: left;
        text-decoration: none;
        width: 100%
    }
    .primary-navigation__button {
        &:not(.primary-navigation__button--link):after {
            background: url(../img/arrow.svg);
            background-size: cover;
            content: "";
            display: block;
            height: 15px;
            margin-left: calc(var(--gutter)/6);
            transition: transform .12s ease;
            width: 9px
        }
        &:focus,
        &:hover {
            &:not(.primary-navigation__button--link):after {
                transform: translateX(4px);
                transition: transform 60ms ease
            }
        }
    }
    .primary-navigation__item-heading-link {
        color: var(--off-black);
        text-decoration: none
    }
    .primary-navigation__member-item {
        display: inline-block;
        padding-top: calc(var(--baseline)*2);
        &+.primary-navigation__member-item {
            margin-left: calc(var(--gutter)/2)
        }
    }
    .on--primary-navigation,
    .on--primary-sub-navigation {
        overflow: hidden;
        .primary-navigation {
            background-color: #0009;
            bottom: 0;
            display: block;
            left: 0;
            overflow: auto;
            position: fixed;
            right: 0;
            top: calc(101px + var(--notification-banner-height));
            z-index: 200
        }
        .primary-navigation__btn--close {
            display: flex
        }
        .primary-navigation__btn--open {
            display: none
        }
    }
    .primary-navigation__item,
    .primary-navigation__member-item {
        color: var(--off-black)
    }
    .primary-navigation__item.is--active {
        background: #fff;
        left: 0;
        min-height: calc(100vh - 100px - var(--notification-banner-height));
        padding: calc(var(--baseline)*2) var(--gutter) calc(var(--baseline)*2) var(--gutter);
        position: absolute;
        top: 0;
        width: 100vw;
        z-index: 300;
        @media(min-width: 768px) {
            padding:calc(var(--baseline)*2) calc(var(--gutter)*2) calc(var(--baseline)*2) calc(var(--gutter)*2)
        }
        &>.primary-navigation__secondary-nav {
            display: block
        }
    }
    .primary-navigation__item.is--active>.primary-navigation__button {
        display: none
    }
}

@media(min-width:1024px) {
    .primary-navigation__btn {
        display: none
    }
    .on--primary-sub-navigation {
        .footer,
        .main {
            display: none !important;
            visibility: hidden !important
        }
    }
    .primary-navigation__list {
        display: flex
    }
    .primary-navigation__item,
    .primary-navigation__member-item {
        align-items: center;
        display: flex;
        height: 100px;
        position: relative
    }
    .primary-navigation__member-item {
        padding: 0 calc(var(--gutter)/2)
    }
    .primary-navigation__item+.primary-navigation__member-item {
        margin-left: calc(var(--gutter)/1.5)
    }
    .primary-navigation__button {
        align-items: center;
        background-color: initial;
        color: currentColor;
        display: flex;
        gap: calc(var(--gutter)/4);
        margin: 0 calc(var(--gutter)/4);
        padding: calc(var(--baseline)/2) calc(var(--gutter)/4);
        text-decoration: none;
        &:not(.primary-navigation__button--link) {
            &:after {
                border-bottom: 1px solid;
                border-right: 1px solid;
                content: "";
                display: block;
                height: 8px;
                position: relative;
                top: -2px;
                transform: rotate(45deg);
                width: 8px
            }
        }
        &:focus,
        &:hover {
            opacity: .75
        }
    }
    .primary-navigation__item.is--active {
        .primary-navigation__button {
            &:not(.primary-navigation__button--link) {
                &:after {
                    top: 3px;
                    transform: rotate(225deg)
                }
                &:before {
                    background-color: currentColor;
                    bottom: 0;
                    content: "";
                    height: 2px;
                    left: calc(var(--gutter)/4);
                    position: absolute;
                    right: calc(var(--gutter)/4)
                }
            }
        }
        &>.primary-navigation__secondary-nav {
            background-color: #fff;
            display: block;
            height: calc(100vh - 100px);
            left: 0;
            padding-top: calc(var(--baseline)*3);
            position: fixed;
            right: 0;
            top: calc(101px + var(--notification-banner-height));
            z-index: 300;
            .primary-navigation__item-heading,
            .primary-navigation__secondary-list {
                margin: 0 auto;
                max-width: var(--max-container-width);
                padding: 0 var(--gutter);
                width: 100%;
                @media(min-width: 768px) {
                    padding:0 calc(var(--gutter)*2)
                }
            }
            .primary-navigation__item-heading {
                margin-bottom: var(--baseline)
            }
            .primary-navigation__item-heading-link {
                align-items: center;
                background: #0000;
                color: var(--off-black);
                display: flex;
                font-size: var(--font-size-plus-6);
                font-weight: var(--light-weight);
                gap: var(--gutter);
                text-align: left;
                text-decoration: none;
                &:after {
                    background: url(../img/long-arrow.svg);
                    background-size: cover;
                    content: "";
                    display: block;
                    height: 18px;
                    margin-left: calc(var(--gutter)/4);
                    opacity: .5;
                    transition: transform .12s ease, opacity .12s ease;
                    width: 20px
                }
                &:focus,
                &:hover {
                    &:after {
                        opacity: 1;
                        transform: translateX(4px);
                        transition: transform 60ms ease, opacity 60ms ease
                    }
                }
            }
            .primary-navigation__secondary-list {
                display: grid;
                gap: var(--baseline) var(--gutter);
                grid-template-columns: repeat(12, 1fr)
            }
            .primary-navigation__sub-item {
                grid-column: auto/span 4
            }
            .primary-navigation__link {
                align-items: center;
                background: #0000;
                border-top: 1px solid var(--light-grey-3);
                color: var(--off-black);
                display: flex;
                font-size: var(--font-size-plus-2);
                justify-content: space-between;
                padding-bottom: var(--baseline);
                padding-top: calc(var(--baseline)/2);
                text-align: left;
                text-decoration: none;
                width: 100%;
                &:after {
                    background: url(../img/long-arrow.svg);
                    background-size: cover;
                    content: "";
                    display: block;
                    height: 18px;
                    margin-left: calc(var(--gutter)/4);
                    opacity: .5;
                    transition: transform .12s ease, opacity .12s ease;
                    width: 20px
                }
                &:focus,
                &:hover {
                    border-top-color: initial;
                    transition: border-top-color .12s ease;
                    &:after {
                        opacity: 1;
                        transform: translateX(4px);
                        transition: transform 60ms ease, opacity 60ms ease
                    }
                }
            }
        }
    }
}

.main {
    display: flex;
    flex-direction: column;
    flex-grow: 1
}

.example,
.main {
    position: relative
}

.example {
    background-color: #fff;
    padding: var(--baseline) var(--gutter)
}

.example__title {
    font-size: var(--font-size-plus-1);
    margin-bottom: calc(var(--baseline)/8)
}

.example__link {
    &:after {
        bottom: 0;
        content: "";
        display: block;
        left: 0;
        position: absolute;
        right: 0;
        top: 0
    }
}

.example--ghost {
    .example__title {
        height: 18px;
        margin-bottom: calc(var(--baseline)/2);
        width: 150px
    }
    .example__summary,
    .example__title {
        background-color: var(--light-grey-1)
    }
    .example__summary {
        height: 16px;
        width: 200px
    }
}

.example--empty {
    background-color: initial;
    border: 2px dotted var(--light-grey-2)
}

.example--error {
    background-color: #ffebeb
}

.pre-footer {
    background-color: var(--brand-blue-80);
    color: #fff;
    padding: calc(var(--baseline)*2) 0;
    position: relative
}

.pre-footer__title {
    font-family: var(--font-family-serif);
    font-size: var(--font-size-plus-2);
    margin-bottom: var(--baseline);
    @media(min-width: 768px) {
        font-size:var(--font-size-plus-3)
    }
}

.pre-footer__item {
    align-items: center;
    border-top: 1px solid #ffffff26;
    display: flex;
    flex-direction: row;
    padding: calc(var(--baseline)/2) 0
}

.pre-footer__link {
    align-items: center;
    color: #fff;
    display: flex;
    font-size: var(--font-size-plus-3);
    font-weight: var(--light-weight);
    line-height: 1.2;
    padding-right: calc(var(--gutter)*1.5);
    position: relative;
    text-decoration: none;
    transition: color 60ms ease;
    width: 100%;
    @media(min-width: 768px) {
        font-size:var(--font-size-plus-5)
    }
    &:after {
        border-right: 1px solid #fff9;
        border-top: 1px solid #fff9;
        content: "";
        height: 12px;
        position: absolute;
        right: 24px;
        top: 12px;
        transform: rotate(45deg);
        transition: border-color 60ms ease, right 60ms ease;
        width: 12px;
        @media(min-width: 768px) {
            height:16px;
            width: 16px
        }
    }
    &:hover {
        color: var(--brand-blue-30);
        transition: color .12s ease;
        &:after {
            border-color: var(--brand-blue-30);
            right: 20px;
            transition: border-color .12s ease, right .12s ease
        }
    }
}

.footer {
    background-color: var(--brand-blue);
    color: #fff
}

.footer__inner {
    padding-bottom: calc(var(--baseline)*2);
    padding-top: calc(var(--baseline)*2)
}

.footer__logo {
    width: auto
}

.footer__item {
    margin-bottom: calc(var(--baseline)/6)
}

.footer__link {
    color: #fff;
    display: inline-block;
    font-size: var(--font-size-minus-1);
    line-height: 1.5;
    text-decoration: none;
    svg {
        display: block;
        transition: transform .12s ease
    }
    &:hover {
        text-decoration: underline;
        svg {
            transform: scale(1.1)
        }
    }
}

.footer__bottom {
    border-top: 1px solid #ffffff26;
    font-size: var(--font-size-minus-1);
    margin-top: calc(var(--baseline)*2);
    padding-top: calc(var(--baseline)/2)
}

.social {
    display: flex;
    flex-direction: row;
    gap: calc(var(--gutter)/4);
    @media(min-width: 1200px) {
        justify-content:flex-end
    }
}

.no-outline * {
    box-shadow: none !important;
    outline: 0 none !important
}

.breadcrumb {
    padding-top: calc(var(--baseline)/2);
    @media(min-width: 768px) {
        padding-top:calc(var(--baseline))
    }
}

.breadcrumb__item {
    color: var(--dark-grey-1);
    display: none;
    &:not(:last-child) {
        margin-right: calc(var(--baseline)*.666);
        padding-right: calc(var(--baseline)*.666);
        position: relative
    }
    &:not(:last-child):after {
        border-bottom: 1px solid var(--mid-grey-2);
        border-right: 1px solid var(--mid-grey-2);
        content: "";
        display: inline-block;
        height: .5rem;
        position: absolute;
        right: 0;
        top: calc(50% - .25rem);
        transform: rotate(-45deg);
        width: .5rem
    }
    &:first-child:nth-last-child(2),
    &:first-child:nth-last-child(2)~&,
    &:nth-last-child(2),
    &:nth-last-child(3) {
        display: inline-block
    }
    &:nth-last-child(2):after {
        display: none
    }
    &:first-child:nth-last-child(2) {
        &:after {
            display: block
        }
    }
    @media(min-width:1024px) {
        display: inline-block;
        &:nth-last-child(2):after {
            display: block
        }
    }
}

.blue .breadcrumb__link {
    color: var(--white)
}

.breadcrumb__link {
    color: var(--dark-grey-1);
    text-decoration: none;
    &:hover {
        text-decoration: underline
    }
}

.bg-dark {
    .breadcrumb,
    .breadcrumb__item {
        border-color: #ffffff1a !important
    }
    .breadcrumb__item {
        color: #ffffff1a
    }
    .breadcrumb__link {
        color: #fff
    }
}

.bg-primary {
    .breadcrumb__item,
    .breadcrumb__link {
        color: var(--primary-heading)
    }
    .breadcrumb__item:after {
        border-color: var(--primary-heading)
    }
}


@media only screen and (max-width: 60em) {

	.btn {
		background: #0000;
		border: 2px solid #0000;
		border-radius: 100px;
		color: currentColor;
		width: 90%;
		max-width: 380px;
		cursor: pointer;
	 //   display: inline-block;
		display: block;
		font-size: var(--font-size-plus-1);
		font-weight: var(--regular-weight);
	//    padding: calc(var(--baseline)/3) calc(var(--baseline)*1.25);
		padding: clamp(4px,1.5vw, 12px) clamp(24px, 4vw, 40px); /* Responsive padding */
		position: relative;
		text-align: center;
		text-decoration: none;
		transition: background-color .25s ease-in-out, border-color .25s ease-in-out;
		&:focus {
			outline: none
		}
		&:focus-visible {
			outline: 4px solid var(--highlight)
		}

		
	}

}


@media only screen and (min-width: 60em) {

	.btn {
		background: #0000;
		border: 2px solid #0000;
		border-radius: 100px;
		color: currentColor;
	//	width: 90%;
		cursor: pointer;
	 //   display: inline-block;
		display: block;
		font-size: var(--font-size-plus-1);
		font-weight: var(--regular-weight);
	    padding: calc(var(--baseline)/3) calc(var(--baseline)*1.25);
	//	padding: clamp(4px,1.5vw, 12px) clamp(24px, 4vw, 40px); /* Responsive padding */
		position: relative;
		text-align: center;
		text-decoration: none;
		transition: background-color .25s ease-in-out, border-color .25s ease-in-out;
		&:focus {
			outline: none
		}
		&:focus-visible {
			outline: 4px solid var(--highlight)
		}

		
	}

}

.btn--primary {
    background: var(--btn-primary);
    border: 1px solid var(--btn-primary);
    color: var(--btn-primary-text);
    &:active,
    &:hover {
        background: var(--btn-primary-hover);
        border-color: var(--btn-primary-hover)
    }
}

.btn--secondary {
    background: var(--btn-secondary);
    border: 1px solid var(--btn-secondary);
    color: var(--btn-secondary-text);
    &:active,
    &:hover {
        background: var(--btn-secondary-hover);
        border-color: var(--btn-secondary-hover)
    }
}

.btn--tertiary {
    background: var(--btn-tertiary);
    border: 1px solid var(--btn-tertiary);
    color: var(--btn-tertiary-text);
    &:active,
    &:hover {
        background: var(--btn-tertiary-hover);
        border-color: var(--btn-tertiary-hover)
    }
}

.btn--outline-dark {
    background-color: initial;
    border-color: var(--brand-blue);
    color: var(--brand-blue);
    transition: color .18s ease-in-out, background-color .18s ease-in-out, border-color .18s ease-in-out;
    &:active,
    &:hover {
        background: var(--brand-blue);
        border-color: var(--brand-blue);
        color: #fff
    }
}

.btn--outline-light {
    background-color: initial;
    border-color: var(--white);
    color: var(--white);
    transition: color .18s ease-in-out, background-color .18s ease-in-out, border-color .18s ease-in-out;
    &:active,
    &:hover {
        background: var(--white);
        border-color: var(--white);
        color: var(--off-black)
    }
}

.btn--ghost {
    background-color: initial;
    border-color: #0000;
    color: currentColor;
    transition: color .18s ease-in-out, background-color .18s ease-in-out, border-color .18s ease-in-out;
    &:active,
    &:hover {
        background: var(--off-black);
        border-color: var(--off-black);
        color: #fff
    }
}

.btn--text {
    background-color: initial;
    border-color: #0000;
    color: var(--off-black);
    padding: 0;
    &:active,
    &:hover {
        background-color: initial;
        border-color: #0000;
        color: var(--off-black);
        opacity: .75
    }
}

.block {
    margin-top: calc(var(--baseline)*2);
    &:first-child {
        margin-top: 0
    }
    &:last-child {
        margin-bottom: calc(var(--baseline)*2)
    }
    @media(min-width:1024px) {
        margin-top: calc(var(--baseline)*3);
        &:last-child {
            margin-bottom: calc(var(--baseline)*3)
        }
    }
}

.block__header {
    border-top: 1px solid var(--dark-grey-3);
    display: flex;
    flex-wrap: wrap;
    margin-bottom: var(--baseline);
    padding-top: calc(var(--baseline)/2);
    position: relative;
    @media(min-width: 1024px) {
        margin-bottom:calc(var(--baseline)*1.5)
    }
}

.block--bg {
    padding: calc(var(--baseline)*2) 0;
    @media(min-width: 1024px) {
        padding:calc(var(--baseline)*3) 0
    }
}

.block--bg:last-child {
    margin-bottom: 0
}

.block--bg+.block--bg {
    margin: 0;
    .block__header {
        border-top: 1px solid var(--text);
        padding-top: calc(var(--baseline)/2)
    }
}

.block--bg-light {
    background-color: var(--light-grey-1);
    +.block--bg-light {
        padding-top: 0
    }
}

.block--bg-dark {
    background-color: var(--light-grey-2);
    +.block--bg-dark {
        padding-top: 0
    }
}

.block--bg-cream {
    background: var(--brand-cream);
    +.block--bg-cream {
        padding-top: 0
    }
}

.block--bg-cream-10 {
    background: var(--brand-cream-10);
    +.block--bg-cream-10 {
        padding-top: 0
    }
}

.block--bg-cream-30 {
    background: var(--brand-cream-30);
    +.block--bg-cream-30 {
        padding-top: 0
    }
}

.block--bg-cream-50 {
    background: var(--brand-cream-50);
    +.block--bg-cream-50 {
        padding-top: 0
    }
}

.block--bg-burgundy {
    background: var(--brand-burgundy);
    +.block--bg-burgundy {
        padding-top: 0
    }
}

.block--bg-pink {
    background: var(--brand-pink);
    +.block--bg-pink {
        padding-top: 0
    }
}

.block--bg-blue {
    background: var(--brand-blue);
    +.block--bg-blue {
        padding-top: 0
    }
}

.block--bg-red {
    background: var(--brand-red);
    +.block--bg-red {
        padding-top: 0
    }
}

.block__title {
    color: var(--brand-blue);
    font-family: var(--font-family-serif);
    font-size: var(--font-size-plus-4);
    line-height: 1.1;
    margin-bottom: calc(var(--baseline)/2);
    text-wrap: pretty;
    &:has(+.block__title-link) {
        width: 100%;
        @media(min-width: 1024px) {
            margin-right:var(--gutter);
            width: auto
        }
    }
    @media(min-width:1024px) {
        font-size: var(--font-size-plus-5);
        line-height: 1.1;
        margin-bottom: 0
    }
    @media(min-width:1820px) {
        font-size: var(--font-size-plus-6)
    }
    .slider & {
        @media(max-width: 767px) {
            padding-right:calc(var(--baseline)*3.5)
        }
    }
}

.block__header--section {
    .block__title {
        font-size: var(--font-size-plus-4)
    }
}

.block__title-link {
    align-items: flex-end;
    color: var(--brand-blue);
    display: flex;
    font-size: var(--font-size-plus-1);
    text-decoration: none;
    &:hover {
        text-decoration: underline
    }
    @media(min-width:1024px) {
        font-size: var(--font-size-plus-2);
        line-height: 1.3
    }
    &:after {
        background: url(../img/long-arrow.svg);
        background-size: cover;
        content: "";
        display: block;
        height: 14px;
        margin-left: calc(var(--gutter)/4);
        position: relative;
        top: -6px;
        transition: transform .12s ease;
        width: 15px
    }
    &:hover {
        &:after {
            transform: translateX(4px);
            transition: transform 60ms ease
        }
    }
}

.bg-dark {
    .block__title-link {
        filter: brightness(0) invert(1)
    }
}

.block-list {
    >:last-child {
        margin-bottom: calc(var(--baseline));
        @media(min-width: 1024px) {
            margin-bottom:calc(var(--baseline)*2)
        }
        &.block--bg {
            margin-bottom: 0
        }
    }
}

.block__list--soft {
    padding: calc(var(--baseline)*1.25) 0;
    @media(min-width: 1024px) {
        padding:calc(var(--baseline)*3) 0
    }
}

.block__header--tabs {
    margin-bottom: calc(var(--baseline)/2);
    .block__title {
        margin-bottom: 0
    }
}

.block__header--join {
    border-top: 1px solid #ffffff4d;
    ;
    .block__title {
        padding-top: calc(var(--baseline)/2)
    }
}

.block__header--summary {
    flex-direction: column;
    margin-bottom: calc(var(--baseline)*2.5);
    padding-top: var(--baseline);
    @media(min-width: 1024px) {
        flex-direction:row;
        justify-content: space-between;
        margin-bottom: calc(var(--baseline)*4)
    }
    .block__title-summary {
        align-self: start;
        color: var(--text);
        font-size: var(--font-size-plus-2);
        line-height: 1.3;
        @media(min-width: 1024px) {
            font-size:var(--font-size-plus-3);
            margin-top: calc(var(--baseline)/2);
            width: calc(49.9995% - 16px)
        }
        @media(min-width:1500px) {
            width: calc(33.333% - 16px)
        }
    }
}

.block__header--hero {
    .block__title {
        font-size: var(--font-size-plus-5);
        @media(min-width: 768px) {
            font-size:var(--font-size-plus-6);
            line-height: 1.2
        }
        @media(min-width:1024px) {
            font-size: var(--font-size-plus-7)
        }
        @media(min-width:1200px) {
            font-size: var(--font-size-plus-8)
        }
        @media(min-width:1400px) {
            font-size: var(--font-size-plus-9)
        }
    }
}

.bg-primary {
    .block__header {
        border-top: 1px solid var(--primary-border)
    }
    .block__title {
        color: var(--primary-text)
    }
    .block__title-link {
        color: var(--primary-text);
        &:after {
            filter: invert(100%);
            -webkit-filter: invert(100%)
        }
    }
    .block__header--membership {
        border-top: 1px solid var(--primary-border);
        .block__title {
            color: var(--primary-heading)
        }
    }
}

.cream-10 {
    .block.block--bg-cream-10 {
        &:first-child {
            padding-top: 0
        }
    }
}

.block:has(.cards)+.block:has(.cards):not(:has(.block__title)) {
    @media(min-width: 768px) {
        margin-top:calc(var(--gutter)*1.5)
    }
}

.page-header {
    padding: calc(var(--baseline)*1.25) 0 calc(var(--baseline)*2) 0;
    row-gap: calc(var(--baseline)/2);
    @media(min-width: 768px) {
        padding:calc(var(--baseline)*2) 0 calc(var(--baseline)*3) 0
    }
    @media(min-width:1200px) {
        padding: calc(var(--baseline)*3) 0 calc(var(--baseline)*3) 0
    }
}

.page-header--sm {
    padding: calc(var(--baseline)*2) 0 var(--baseline) 0;
    @media(min-width: 768px) {
        padding:calc(var(--baseline)*2) 0 var(--baseline) 0
    }
}

.page-header--hr {
    border-bottom: 1px solid var(--light-grey-2);
    margin-bottom: calc(var(--baseline)*2);
    padding: calc(var(--baseline)*2) 0;
    @media(min-width: 1024px) {
        margin-bottom:calc(var(--baseline)*3);
        padding: calc(var(--baseline)*3) 0
    }
}

.page-header__title {
    color: var(--primary-heading);
    font-family: var(--font-family-serif);
    font-size: var(--font-size-plus-5);
    line-height: 1.1;
    margin-bottom: calc(var(--baseline)/4);
    max-width: 70rem;
    @media(min-width: 768px) {
        font-size:var(--font-size-plus-6)
    }
    @media(min-width:1024px) {
        font-size: var(--font-size-plus-7);
        padding-right: calc(var(--gutter)*2)
    }
    @media(min-width:1200px) {
        font-size: var(--font-size-plus-8);
        line-height: 1
    }
    @media(min-width:1400px) {
        font-size: var(--font-size-plus-9)
    }
}

.page-header__subtitle {
    color: var(--primary-subheading);
    font-family: var(--font-family-serif);
    font-size: var(--font-size-plus-5);
    line-height: 1.1;
    margin-bottom: calc(var(--baseline)/4);
    @media(min-width: 768px) {
        font-size:var(--font-size-plus-6)
    }
    @media(min-width:1200px) {
        font-size: var(--font-size-plus-7)
    }
}

.page-header__cta {
    margin-top: calc(var(--baseline)*2);
    @media(min-width: 1024px) {
        margin-top:calc(var(--baseline)*3)
    }
}

.page-header__bd {
    color: var(--primary-text);
    font-size: var(--font-size-plus-2);
    line-height: 1.3;
    margin-top: var(--baseline);
    @media(min-width: 768px) {
        font-size:var(--font-size-plus-3)
    }
    @media(min-width:1024px) {
        font-size: var(--font-size-plus-4)
    }
}

.page-header__aside {
    border-top: 1px solid var(--light-grey-2);
    display: flex;
    flex-direction: column;
    gap: calc(var(--baseline)/2) var(--gutter);
    justify-content: start;
    margin-top: var(--baseline);
    padding-top: calc(var(--baseline)/2);
    @media(min-width: 1024px) {
        border-left-color:var(--light-grey-2);
        border-left-style: solid;
        border-left-width: 1px;
        border-top: 0;
        margin-top: 0;
        padding-left: var(--gutter);
        padding-top: 0
    }
}

.page-header__aside--author {
    align-items: flex-start;
    flex-direction: row;
    justify-content: flex-start;
    .page-header__aside-item+.page-header__aside-item {
        margin-top: 0;
        padding-top: calc(var(--baseline)/3)
    }
}

.page-header__aside--notice {
    color: var(--text);
    gap: 0
}

.page-header__portrait-img {
    border-radius: 100px
}

.page-header__aside-item {
    font-size: var(--font-size-plus-1);
    line-height: 1.3
}

.page-header__aside-title {
    color: var(--dark-grey-1)
}

.page-header__aside-bd,
.page-header__aside-title {
    font-size: var(--font-size-baseline)
}

.page-header__summary {
    color: var(--primary-text);
    font-size: var(--font-size-plus-2);
    line-height: 1.3;
    @media(min-width: 1024px) {
        font-size:var(--font-size-plus-2);
        margin-top: calc(var(--baseline)/2)
    }
    @media(min-width:1200px) {
        font-size: var(--font-size-plus-2)
    }
}

.page-header__notice-headline {
    font-family: var(--font-family-serif);
    font-size: var(--font-size-plus-3);
    line-height: 1.2;
    margin-bottom: calc(var(--baseline)/2);
    @media(min-width: 1024px) {
        font-size:var(--font-size-plus-5)
    }
}

.page-header__notice-bd {
    font-size: var(--font-size-baseline);
    text-wrap: pretty;
    @media(min-width: 1200px) {
        font-size:var(--font-size-plus-1)
    }
}

.page-header__meta {
    margin-top: calc(var(--baseline));
    @media(min-width: 768px) {
        margin-top:calc(var(--baseline)*3)
    }
}

.page-header__meta-item {
    border-top: 1px solid var(--primary-border);
    color: var(--primary-heading)
}

.page-header__meta-label {
    font-size: var(--font-size-minus-1);
    padding-top: calc(var(--baseline)/4)
}

.page-header__meta-value {
    display: flex;
    font-size: var(--font-size-plus-1);
    justify-content: space-between;
    line-height: 1.1
}

.page-header__meta-cta {
    line-height: 1.5;
    margin-left: calc(var(--baseline)/2);
    position: relative;
    top: calc(var(--baseline)*-.75);
    white-space: nowrap
}

.page-header__meta-link {
    color: var(--primary-heading);
    font-size: var(--font-size-plus-1);
    line-height: 1.1
}

.bg-primary {
    .page-header__aside-title {
        color: var(--primary-subheading)
    }
    .page-header__aside {
        border-color: var(--primary-border)
    }
}

.cta-block {
    border-top: 1px solid var(--dark-grey-3);
    padding-top: var(--baseline)
}

.cta-block__bd {
    align-content: flex-end;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    grid-column: auto/span 12;
    padding-bottom: var(--baseline);
    @media(max-width: 767px) {
        order:1
    }
    @media(min-width:1024px) {
        grid-column: auto/span 4;
        padding-right: calc(var(--gutter)*.75)
    }
}

.cta-block__img-container {
    border-radius: 12px;
    grid-column: auto/span 12;
    overflow: hidden;
    @media(max-width: 767px) {
        order:2
    }
    @media(min-width:1024px) {
        grid-column: auto/span 8;
        &+.cta-block__bd {
            padding-left: calc(var(--gutter)*.75);
            padding-right: 0
        }
    }
}

.cta-block__title {
    color: var(--brand-blue);
    font-family: var(--font-family-serif);
    font-size: var(--font-size-plus-4);
    line-height: 1;
    margin-bottom: var(--baseline);
    text-wrap: pretty;
    @media(min-width: 1024px) {
        font-size:var(--font-size-plus-5);
        padding-right: calc(var(--baseline)*3)
    }
    @media(min-width:1280px) {
        font-size: var(--font-size-plus-6)
    }
}

.cta-block__body {
    align-content: flex-end;
    flex-grow: 1;
    font-size: var(--font-size-plus-2);
    line-height: 1.3;
    margin-bottom: var(--baseline);
    @media(min-width: 1280px) {
        font-size:var(--font-size-plus-3)
    }
}

.cta-block__link {
    align-items: center;
    color: inherit;
    display: flex;
    font-size: var(--font-size-plus-2);
    font-weight: var(--regular-weight);
    text-decoration: none;
    &:after {
        background: url(../img/long-arrow.svg);
        background-size: cover;
        content: "";
        display: block;
        height: 14px;
        margin-left: calc(var(--gutter)/4);
        transition: transform .12s ease;
        width: 15px
    }
    &:hover {
        &:after {
            transform: translateX(4px);
            transition: transform 60ms ease
        }
    }
}

.slider-container {
    overflow-x: hidden;
    overflow-y: hidden;
    width: 100%
}

.slider__navigation {
    align-items: flex-end;
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    justify-content: flex-end;
    margin-bottom: calc(var(--baseline)/2);
    opacity: 0;
    position: absolute;
    right: -12px;
    top: 3px
}

.slider__button {
    background: 0;
    color: var(--brand-blue);
    display: flex;
    padding: calc(var(--baseline)/2) calc(var(--gutter)/2);
    &:hover {
        color: var(--brand-blue-50)
    }
}

.slider__button-icon path {
    stroke: currentColor
}

.swiper-button-disabled {
    opacity: .5
}

@at-root {
    :root {
        --swiper-preloader-color: var(--swiper-theme-color);
        --swiper-wrapper-transition-timing-function: initial
    }
}

.swiper,
.swiper-container {
    display: block;
    list-style: none;
    margin-left: auto;
    margin-right: auto;
    overflow-x: visible;
    padding: 0;
    position: relative;
    z-index: 1
}

.swiper-vertical>.swiper-wrapper {
    flex-direction: column
}

.swiper-wrapper {
    box-sizing: initial;
    display: flex;
    gap: 24px;
    height: 100%;
    position: relative;
    transition-property: transform, opacity;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
    width: 100%;
    z-index: 1
}

.swiper-android .swiper-slide,
.swiper-wrapper {
    transform: translateZ(0)
}

.swiper-horizontal {
    touch-action: pan-y
}

.swiper-slide {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    .card {
        height: 100%
    }
}

.swiper-initialized {
    &.slider__navigation {
        opacity: 1;
        transition: opacity .12s ease
    }
    .swiper-wrapper {
        display: flex;
        gap: 0
    }
    .swiper-slide {
        flex-shrink: 0;
        min-width: auto;
        position: relative;
        transition-property: transform, opacity;
        width: 100%
    }
    &.swiper--2-col .swiper-slide,
    &.swiper--3-col .swiper-slide {
        min-width: 0
    }
}

.swiper-slide>* {
    width: 100%
}

.swiper--2-col .swiper-slide {
    min-width: 100%;
    @media(min-width: 620px) {
        min-width:calc(50vw - 48px)
    }
}

.swiper--3-col .swiper-slide {
    min-width: 100%;
    @media(min-width: 620px) {
        min-width:calc(50vw - 48px)
    }
    @media(min-width:1024px) {
        min-width: calc(33.33333vw - 40px)
    }
}

.swiper-slide-invisible-blank {
    visibility: hidden
}

.swiper-backface-hidden .swiper-slide {
    backface-visibility: hidden;
    transform: translateZ(0)
}

.slider-gallery {
    border-top: 1px solid var(--brand-burgundy);
    margin-top: calc(var(--baseline)*2);
    padding-top: calc(var(--baseline)*2);
    @media (min-width: 1024px) {
        margin-top:calc(var(--baseline)*5)
    }
    .slider-gallery__gallery {
        display: flex;
        margin-top: calc(var(--baseline)*2)
    }
    .slider-gallery__title {
        @media (min-width: 1024px) {
            font-size:var(--font-size-plus-6);
            line-height: 1;
            margin-top: -6px;
            max-width: 10ch
        }
        @media (min-width:1200px) {
            font-size: var(--font-size-plus-7)
        }
    }
    .slider-gallery--summary {
        @media(max-width: 1023px) {
            gap:0 var(--gutter)
        }
    }
    .slider-gallery__title-summary {
        color: var(--text);
        font-size: var(--font-size-plus-2);
        line-height: 1.3;
        @media(min-width: 1024px) {
            font-size:var(--font-size-plus-3)
        }
    }
    .slider-gallery__cta-link {
        margin-top: var(--baseline)
    }
    .slider {
        position: relative
    }
    .slider__navigation {
        border-top: 1px solid var(--light-grey-3);
        justify-content: flex-start;
        margin-bottom: var(--baseline);
        margin-left: -12px;
        margin-right: 0;
        position: static;
        @media (min-width: 1024px) {
            border:0;
            bottom: 0;
            left: 0;
            margin-bottom: 0;
            position: absolute;
            z-index: 2
        }
    }
    .slider-gallery__image-container {
        align-items: flex-end;
        display: flex;
        justify-content: flex-end;
        justify-self: flex-end
    }
    .slider-gallery__image-details {
        color: var(--text);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        @media (min-width: 1024px) {
            border-bottom-color:var(--light-grey-3);
            border-bottom-style: solid;
            border-bottom-width: 1px;
            justify-content: flex-end;
            margin-bottom: calc(var(--baseline)*2.5);
            padding-bottom: calc(var(--baseline))
        }
        .slider-gallery__image-heading {
            font-size: var(--font-size-plus-2);
            font-weight: var(--semibold-weight);
            @media (min-width: 768px) {
                font-size:var(--font-size-plus-3)
            }
        }
        .slider-gallery__image-description {
            font-size: var(--font-size-plus-1);
            line-height: 1.3;
            margin-top: calc(var(--baseline)/2);
            @media (min-width: 768px) {
                font-size:var(--font-size-plus-2)
            }
            @media (min-width:1024px) {
                font-size: var(--font-size-plus-2);
                max-width: 32ch
            }
        }
    }
    img {
        border-radius: 10px
    }
    .grid {
        flex-grow: 1;
        justify-content: space-between
    }
}

.bg-primary {
    .slider__button {
        color: var(--primary-text)
    }
    .block__header--membership {
        .slider__button {
            color: var(--primary-heading)
        }
    }
}

.cards {
    display: grid;
    grid-auto-rows: 1fr
}

.cards--2-col,
.cards--3-col,
.cards--4-col {
    gap: var(--gutter);
    grid-template-columns: 1fr
}

.cards--2-col {
    @media(min-width: 768px) {
        grid-template-columns:repeat(2, 1fr)
    }
}

.cards--3-col {
    @media(min-width: 768px) {
        grid-template-columns:repeat(3, 1fr)
    }
    @media(min-width:1024px) {
        grid-template-columns: repeat(3, 1fr)
    }
}

.cards--4-col {
    @media(min-width: 768px) {
        grid-template-columns:repeat(2, 1fr)
    }
    @media(min-width:1024px) {
        grid-template-columns: repeat(4, 1fr)
    }
}

.cards__title {
    color: var(--dark-grey-3);
    font-size: var(--font-size-plus-2);
    font-weight: var(--regular-weight);
    line-height: 1.3;
    @media(min-width: 1024px) {
        font-weight:var(--regular-weight);
        padding-right: calc(12.49988% - var(--gutter))
    }
    @media(min-width:1200px) {
        padding-right: calc(16.6665% - var(--gutter))
    }
    @media(min-width:1820px) {
        font-size: var(--font-size-plus-3);
        line-height: 1.2;
        margin-bottom: calc(var(--font-size-plus-3)*1.15)
    }
}

.cards__title-link {
    color: var(--dark-grey-1);
    display: inline-block;
    font-size: var(--font-size-minus-1);
    font-weight: var(--regular-weight);
    line-height: 1.3;
    margin-left: calc(var(--baseline)/2);
    @media(min-width: 1024px) {
        font-size:var(--font-size-baseline)
    }
    &:hover {
        color: var(--dark-grey-3);
        text-decoration: none
    }
}

.card {
    background-color: var(--card-primary);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    border-top: 3px solid var(--card-accent);
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    overflow: hidden;
    padding: 0;
    position: relative;
    transition: background-color .25s ease-in-out, border-color .25s ease-in-out;
    ;
    &:not(:has(.card__img)) {
        .card__content {
            min-height: 240px
        }
        .card__summary {
            margin-bottom: calc(var(--baseline)/2);
            @media (min-width: 1024px) {
                flex-grow:0
            }
        }
    }
    &:hover {
        background-color: var(--card-primary-hover);
        border-color: var(--card-border-hover);
        transition: background-color .25s ease
    }
}

.block--bg .card {
    background-color: var(--card-primary);
    &:hover {
        background-color: var(--card-primary-hover);
        border-color: var(--card-border-hover)
    }
}

.card__content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 100px;
    padding: calc(var(--baseline)/1.5) calc(var(--baseline)/2)
}

.card__label {
    color: var(--card-text);
    font-size: var(--font-size-baseline);
    font-weight: var(--regular-weight);
    margin-bottom: calc(var(--baseline)/4)
}

.card__title {
    color: var(--card-text);
    flex-grow: 1;
    font-size: var(--font-size-plus-2);
    line-height: 1.2;
    margin-bottom: calc(var(--baseline)/2);
    @media (min-width: 768px) {
        font-size:var(--font-size-plus-1)
    }
    @media (min-width:980px) {
        font-size: var(--font-size-plus-3)
    }
}

.card__meta {
    color: var(--card-text-meta);
    font-size: var(--font-size-baseline);
    @media (min-width: 1024px) {
        font-size:var(--font-size-plus-1)
    }
    margin-top:calc(var(--baseline)*1.75);
    &+.card__meta {
        margin-top: 0
    }
}

.card__availability {
    color: var(--card-text);
    font-size: var(--font-size-plus-1);
    line-height: 1.2;
    margin-top: calc(var(--baseline)/2);
    @media (min-width: 768px) {
        margin-bottom:calc(var(--baseline))
    }
}

.card__badge {
    background-color: var(--dark-grey-3);
    color: #fff;
    left: 0;
    padding: calc(var(--baseline)/2) var(--gutter);
    position: absolute
}

.card__link {
    color: var(--card-text);
    text-decoration: none;
    &:hover {
        text-decoration: underline
    }
    &:after {
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 1
    }
}

.card__summary {
    align-content: flex-start;
    color: var(--card-text);
    font-size: var(--font-size-plus-1);
    line-height: 1.3;
    padding-top: calc(var(--baseline))
}

.card__img:not(.card__img--resource) {
    align-self: end;
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    width: 100%
}

.card--tall .card__img {
    padding-bottom: 150%;
    @media (min-width: 480px) and (max-width:768px) {
        padding-bottom:67.5%
    }
}

.card--membership .card__img {
    border-radius: 12px
}

.card__img:not(.card__img--resource) .card__image {
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: scale(1);
    transition: transform .5s cubic-bezier(.49, .48, .2, .9);
    @media (max-width: 767px) {
        display:flex;
        justify-content: center
    }
}

.card:not(.card--resource):hover .card__image {
    transform: scale(1.05)
}

.card--membership,
.card--resource {
    background-color: initial;
    border-top-width: 1px;
    .card__content {
        background-color: initial;
        min-height: 0;
        padding-left: 0;
        padding-right: 0
    }
    .card__content,
    .card__summary {
        padding-top: calc(var(--baseline)/2)
    }
    .card__summary {
        color: var(--primary-text)
    }
}

.card--resource {
    border-radius: 0
}

.card__img--resource {
    aspect-ratio: 1/1;
    background-color: var(--brand-cream-10);
    display: flex;
    justify-content: center;
    padding: calc(var(--baseline)/2) calc(var(--gutter)/2);
    .card__image {
        align-self: center
    }
    img {
        @media (min-width: 768px) {
            max-height:170px
        }
        @media (min-width:1024px) {
            max-height: 260px
        }
        @media (min-width:1200px) {
            max-height: 290px
        }
    }
}

.card--membership {
    border-top-color: #ffffff4d;
    .card__link,
    .card__title {
        color: var(--primary-heading)
    }
    &:hover {
        background-color: initial;
        border-top-color: #ffffff4d
    }
}

.card--sm {
    .card__content {
        min-height: 0
    }
}

.card--white {
    .card__link {
        color: var(--brand-blue)
    }
}

.bg-dark {
    .card--join {
        border-top-color: #ffffff4d
    }
}

.bg-primary {
    .block__header--membership+.swiper {
        .card {
            border-top: 1px solid var(--primary-border)
        }
        .card__link {
            color: var(--primary-heading)
        }
        .card__image img {
            border-radius: 10px
        }
    }
}

.card--featured {
    @media(min-width: 768px) {
        flex-direction:row;
        .card__content {
            width: calc(33.33% + 12px)
        }
        .card__title {
            flex-grow: 0
        }
        .card__img {
            padding-bottom: 36.33%;
            width: 66.66%;
            img {
                width: 100%
            }
        }
    }
    @media(min-width:1024px) {
        .card__summary {
            padding-right: calc(var(--baseline))
        }
    }
}

.text-block--section {
    border-top: 1px solid var(--text);
    color: var(--brand-blue);
    padding-top: calc(var(--baseline)/2)
}

.text-block--join {
    border-top: 1px solid var(--primary-border);
    .text-block__title {
        color: var(--primary-heading)
    }
    .join-tasks__link {
        color: var(--brand-cream);
        &:hover {
            color: var(--brand-cream-80)
        }
    }
}

.text-block__title {
    font-family: var(--font-family-serif);
    font-size: var(--font-size-plus-4);
    line-height: 1.3;
    @media(min-width: 1024px) {
        line-height:1.2;
        padding-right: calc(var(--baseline)*2)
    }
    @media(min-width:1200px) {
        padding-right: calc(var(--baseline)*4)
    }
}

.text-block__title--large {
    color: var(--brand-blue);
    font-size: var(--font-size-plus-4);
    line-height: 1.1;
    margin-bottom: 0;
    text-wrap: pretty;
    @media(min-width: 1024px) {
        font-size:var(--font-size-plus-5)
    }
    @media(min-width:1820px) {
        font-size: var(--font-size-plus-6)
    }
}

.text-block__bd {
    padding-top: calc(var(--baseline)/3)
}

.bg-dark {
    .text-block--section {
        border-top-color: #ffffff4d
    }
}

.tags {
    margin-bottom: calc(var(--baseline)*1.5)
}

.tags__list {
    align-items: center;
    display: flex;
    flex-wrap: wrap
}

.tags__item {
    display: inline-block;
    margin-bottom: calc(var(--baseline)/2);
    margin-right: calc(var(--baseline)/2)
}

.tags__link {
    background: #fff;
    border: 2px solid var(--mid-grey-2);
    border-radius: 100px;
    color: var(--dark-grey-2);
    display: inline-block;
    font-size: var(--font-size-plus-1);
    line-height: 1;
    padding: calc(var(--baseline)/2.5) calc(var(--baseline)*1.5) calc(var(--baseline)/2.5) calc(var(--baseline));
    position: relative;
    text-decoration: none;
    &:after {
        content: "\00D7";
        font-size: var(--font-size-plus-3);
        line-height: 0;
        position: absolute;
        right: 12px;
        top: 18px
    }
    &:hover {
        border-color: var(--off-black);
        color: var(--off-black)
    }
}

.join-cta-block {
    align-items: center;
    color: var(--primary-heading);
    gap: calc(var(--baseline)*2) 0;
    grid-auto-flow: row;
    @media screen and (min-width: 1024px) {
        grid-auto-flow:column
    }
}

.join-cta-block__content {
    grid-column: auto/span 12
}

.join-cta-block__content:has(+.join-cta-block__image-container) {
    grid-column: auto/span 12;
    @media(min-width: 768px) {
        grid-column:span 7;
        .join-cta-block__title {
            grid-column: auto/span 12
        }
    }
    @media(min-width:1024px) {
        grid-column: span 8;
        .join-cta-block__title {
            grid-column: auto/span 12
        }
    }
}

.join-cta-block__image-container {
    grid-column: auto/span 12;
    @media screen and (min-width: 768px) {
        grid-column:span 5
    }
    @media screen and (min-width:1024px) {
        grid-column: span 4
    }
}

.join-cta-block__bd {
    grid-column: auto/span 12;
    @media(min-width: 1024px) {
        padding-right:calc(var(--gutter)*4)
    }
}

.join-cta-block__title {
    grid-column: auto/span 12;
    @media(min-width: 1024px) {
        align-items:center;
        display: flex;
        grid-column: auto/span 8;
        padding-right: calc(var(--gutter)*4)
    }
}

.join-cta-block__heading {
    font-family: var(--font-family-serif);
    font-size: var(--font-size-plus-5);
    line-height: 1;
    text-wrap: balance;
    @media(min-width: 768px) {
        font-size:var(--font-size-plus-6)
    }
    @media(min-width:1024px) {
        font-size: var(--font-size-plus-8)
    }
    @media(min-width:1400px) {
        font-size: var(--font-size-plus-9)
    }
}

.join-cta-block__body {
    align-content: flex-end;
    flex-grow: 1;
    font-size: var(--font-size-plus-2);
    line-height: 1.3;
    margin-bottom: calc(var(--baseline)*2);
    @media(min-width: 768px) {
        padding-right:calc(var(--baseline))
    }
    @media(min-width:1024px) {
        max-width: calc(58.33333vw - 52px);
        padding-right: 0
    }
    @media(min-width:1820px) {
        font-size: var(--font-size-plus-3)
    }
}

.join-cta-block__image {
    margin: 0 auto;
    max-height: 400px;
    @media(min-width: 1024px) {
        max-height:450px
    }
}

.join-cta-block__link {
    background: var(--btn-primary);
    border-color: var(--btn-primary);
    color: var(--btn-primary-text);
    &:hover {
        background: var(--brand-blue-80);
        border-color: var(--brand-blue-80)
    }
}

.cream-50 .join-cta-block__link {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
    color: var(--brand-cream-50);
    &:hover {
        background: var(--brand-blue-80);
        border-color: var(--brand-blue-80)
    }
}

.support-cta-block {
    color: var(--white);
    padding-bottom: calc(var(--baseline));
    padding-top: var(--baseline)
}

.support-cta-block__bd {
    grid-column: auto/span 12;
    @media(min-width: 1024px) {
        grid-column:auto/span 7;
        padding-left: calc(var(--gutter)*2);
        padding-top: calc(var(--baseline)*1)
    }
    @media(min-width:1280px) {
        grid-column: auto/span 6
    }
}

.support-cta-block__title {
    grid-column: auto/span 12;
    @media(min-width: 1024px) {
        align-items:start;
        display: flex;
        grid-column: auto/span 5
    }
    @media(min-width:1280px) {
        grid-column: auto/span 6
    }
}

.support-cta-block__heading {
    font-family: var(--font-family-serif);
    font-size: var(--font-size-plus-5);
    line-height: 1.2;
    margin-bottom: 0;
    text-wrap: balance;
    @media (min-width: 768px) {
        font-size:var(--font-size-plus-7)
    }
    @media(min-width:1024px) {
        font-size: var(--font-size-plus-8);
        line-height: 1.2;
        margin-bottom: 0
    }
}

.support-cta-block__body {
    align-content: flex-end;
    flex-grow: 1;
    font-size: var(--font-size-plus-2);
    line-height: 1.3;
    margin-bottom: var(--baseline);
    @media(min-width: 1024px) {
        max-width:calc(58.33333vw - 52px)
    }
    @media(min-width:1820px) {
        font-size: var(--font-size-plus-3)
    }
}

.learn-cta-block {
    align-items: center;
    gap: calc(var(--baseline)*2) 0;
    grid-auto-flow: row;
    padding: var(--baseline) 0;
    @media screen and (min-width: 1024px) {
        grid-auto-flow:column;
        padding-bottom: 0
    }
}

.learn-cta-block__content {
    color: var(--white);
    grid-column: auto/span 12;
    @media(min-width: 768px) {
        padding-right:var(--baseline)
    }
}

.learn-cta-block__content:has(+.learn-cta-block__image-container) {
    grid-column: auto/span 12;
    @media(min-width: 768px) {
        grid-column:span 7;
        .learn-cta-block__title {
            grid-column: auto/span 12
        }
    }
    @media(min-width:1024px) {
        grid-column: span 6
    }
}

.learn-cta-block__image-container {
    grid-column: auto/span 12;
    @media(min-width: 768px) {
        grid-column:span 5
    }
    @media screen and (min-width:1024px) {
        grid-column: span 6;
        justify-self: center
    }
}

.learn-cta-block__image {
    margin: 0 auto
}

.learn-cta-block__bd {
    grid-column: auto/span 12;
    padding-bottom: var(--baseline);
    @media(min-width: 1024px) {
        padding-right:calc(var(--gutter)*4)
    }
}

.learn-cta-block__title {
    grid-column: auto/span 12;
    @media(min-width: 1024px) {
        align-items:center;
        display: flex;
        grid-column: auto/span 8;
        padding-right: calc(var(--gutter)*4)
    }
}

.learn-cta-block__heading {
    font-family: var(--font-family-serif);
    font-size: var(--font-size-plus-5);
    line-height: 1.2;
    margin-bottom: var(--baseline);
    text-wrap: balance;
    @media(min-width: 768px) {
        font-size:var(--font-size-plus-7);
        line-height: 1
    }
    @media(min-width:1024px) {
        font-size: var(--font-size-plus-8)
    }
    @media(min-width:1400px) {
        font-size: var(--font-size-plus-9)
    }
}

.learn-cta-block__body {
    align-content: flex-end;
    flex-grow: 1;
    font-size: var(--font-size-plus-2);
    margin-bottom: calc(var(--baseline)*2);
    @media(min-width: 1024px) {
        max-width:calc(58.33333vw - 52px)
    }
    @media(min-width:1820px) {
        font-size: var(--font-size-plus-3)
    }
}

.learn-cta-block__image {
    border-radius: 50%;
    max-height: 550px
}

.research-cta-block {
    color: var(--brand-blue);
    padding-bottom: calc(var(--baseline)*2);
    padding-top: var(--baseline)
}

.research-cta-block__bd {
    grid-column: auto/span 12;
    @media(min-width: 1024px) {
        grid-column:auto/span 7;
        padding-left: calc(var(--gutter)*2)
    }
}

.research-cta-block__title {
    grid-column: auto/span 12;
    @media(min-width: 1024px) {
        display:flex;
        grid-column: auto/span 5
    }
}

.research-cta-block__heading {
    font-family: var(--font-family-serif);
    font-size: var(--font-size-plus-7);
    line-height: 1.2;
    text-wrap: balance;
    @media(min-width: 1024px) {
        font-size:var(--font-size-plus-8);
        line-height: 1
    }
}

.research-cta-block__body {
    align-content: flex-end;
    flex-grow: 1;
    font-size: var(--font-size-plus-2);
    line-height: 1.3;
    margin-bottom: var(--baseline);
    @media(min-width: 1024px) {
        max-width:calc(58.33333vw - 52px)
    }
    @media(min-width:1820px) {
        font-size: var(--font-size-plus-3)
    }
}

.research-cta-block__footer {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--baseline) var(--gutter)
}

.research-cta-block__link {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
    color: var(--white);
    &:hover {
        background: var(--brand-blue-80);
        border-color: var(--brand-blue-80)
    }
}

.research-cta-block__secondary-link {
    font-size: var(--font-size-plus-1)
}

.hr {
    .block--bg-dark & {
        background-color: var(--dark-grey-2)
    }
}

.blockquote {
    border-bottom: 1px solid var(--light-grey-3);
    border-top: 1px solid var(--light-grey-3);
    grid-column: auto/span 12;
    padding-bottom: calc(var(--baseline)*2);
    padding-left: calc(8.33333% + 24px);
    padding-top: calc(var(--baseline)*2);
    position: relative;
    @media(min-width: 1024px) {
        padding-bottom:calc(var(--baseline)*3);
        padding-top: calc(var(--baseline)*3)
    }
    &:before {
        background-color: var(--brand-red);
        content: "";
        height: 25px;
        left: 0;
        -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzOS4wMjMiIGhlaWdodD0iMzEuNjk5IiB2aWV3Qm94PSIwIDAgMzkuMDIzIDMxLjY5OSI+PHBhdGggZmlsbD0iIzFhMWExYSIgZD0iTTE3LjM0NCAzLjUxNHEtMi43NTQgMS41ODItNC40NTMgMi43MjVhMjAuNSAyMC41IDAgMCAwLTMuNDU3IDMuMDE4IDEzLjggMTMuOCAwIDAgMC0yLjUyIDMuNjkxIDE2LjkgMTYuOSAwIDAgMC0xLjIzIDQuOThoMi44MTNhOC40OCA4LjQ4IDAgMCAxIDUuNzEyIDEuNzg2IDYuNTMgNi41MyAwIDAgMSAyLjA4IDUuMjQ0IDYuOTIgNi45MiAwIDAgMS0xLjg0NiA0LjYgNi4zNCA2LjM0IDAgMCAxLTUuMDcyIDIuMTQxcS01LjAzOSAwLTcuMjA3LTMuMzExYTE1LjY1IDE1LjY1IDAgMCAxLTIuMTY4LTguNyAxNC43NCAxNC43NCAwIDAgMSAxLjY0NS02Ljk0NCAyNC42IDI0LjYgMCAwIDEgMy45ODQtNS42IDI4LjggMjguOCAwIDAgMSA1LjEtNC4yNzdxMi43LTEuNzU4IDQuNTEyLTIuODcxWm0yMS42OCAwcS0yLjc1MyAxLjU4NC00LjQ1MyAyLjcyNmEyMC41IDIwLjUgMCAwIDAtMy40NTcgMy4wMTggMTMuNiAxMy42IDAgMCAwLTIuNTQ5IDMuNzIxIDE3LjIgMTcuMiAwIDAgMC0xLjIgNC45NTFoMi44MDZhOC40OCA4LjQ4IDAgMCAxIDUuNzE4IDEuNzg0IDYuNTMgNi41MyAwIDAgMSAyLjA4IDUuMjQ0IDYuOTIgNi45MiAwIDAgMS0xLjg0NiA0LjYgNi4zNCA2LjM0IDAgMCAxLTUuMDY4IDIuMTM5cS01LjAzOSAwLTcuMjA3LTMuMzExYTE1LjY1IDE1LjY1IDAgMCAxLTIuMTY4LTguNyAxNC43NCAxNC43NCAwIDAgMSAxLjY0MS02Ljk0MyAyNC42IDI0LjYgMCAwIDEgMy45ODQtNS42IDI4LjggMjguOCAwIDAgMSA1LjEtNC4yNzdxMi43LTEuNzU4IDQuNTEyLTIuODcxWiIgZGF0YS1uYW1lPSJQYXRoIDk5OTUiLz48L3N2Zz4=");
        mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzOS4wMjMiIGhlaWdodD0iMzEuNjk5IiB2aWV3Qm94PSIwIDAgMzkuMDIzIDMxLjY5OSI+PHBhdGggZmlsbD0iIzFhMWExYSIgZD0iTTE3LjM0NCAzLjUxNHEtMi43NTQgMS41ODItNC40NTMgMi43MjVhMjAuNSAyMC41IDAgMCAwLTMuNDU3IDMuMDE4IDEzLjggMTMuOCAwIDAgMC0yLjUyIDMuNjkxIDE2LjkgMTYuOSAwIDAgMC0xLjIzIDQuOThoMi44MTNhOC40OCA4LjQ4IDAgMCAxIDUuNzEyIDEuNzg2IDYuNTMgNi41MyAwIDAgMSAyLjA4IDUuMjQ0IDYuOTIgNi45MiAwIDAgMS0xLjg0NiA0LjYgNi4zNCA2LjM0IDAgMCAxLTUuMDcyIDIuMTQxcS01LjAzOSAwLTcuMjA3LTMuMzExYTE1LjY1IDE1LjY1IDAgMCAxLTIuMTY4LTguNyAxNC43NCAxNC43NCAwIDAgMSAxLjY0NS02Ljk0NCAyNC42IDI0LjYgMCAwIDEgMy45ODQtNS42IDI4LjggMjguOCAwIDAgMSA1LjEtNC4yNzdxMi43LTEuNzU4IDQuNTEyLTIuODcxWm0yMS42OCAwcS0yLjc1MyAxLjU4NC00LjQ1MyAyLjcyNmEyMC41IDIwLjUgMCAwIDAtMy40NTcgMy4wMTggMTMuNiAxMy42IDAgMCAwLTIuNTQ5IDMuNzIxIDE3LjIgMTcuMiAwIDAgMC0xLjIgNC45NTFoMi44MDZhOC40OCA4LjQ4IDAgMCAxIDUuNzE4IDEuNzg0IDYuNTMgNi41MyAwIDAgMSAyLjA4IDUuMjQ0IDYuOTIgNi45MiAwIDAgMS0xLjg0NiA0LjYgNi4zNCA2LjM0IDAgMCAxLTUuMDY4IDIuMTM5cS01LjAzOSAwLTcuMjA3LTMuMzExYTE1LjY1IDE1LjY1IDAgMCAxLTIuMTY4LTguNyAxNC43NCAxNC43NCAwIDAgMSAxLjY0MS02Ljk0MyAyNC42IDI0LjYgMCAwIDEgMy45ODQtNS42IDI4LjggMjguOCAwIDAgMSA1LjEtNC4yNzdxMi43LTEuNzU4IDQuNTEyLTIuODcxWiIgZGF0YS1uYW1lPSJQYXRoIDk5OTUiLz48L3N2Zz4=");
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        mask-size: contain;
        position: absolute;
        top: calc(var(--baseline)*2);
        width: 30px
    }
    @media(min-width:1024px) {
        &:before {
            height: 37.5px;
            top: calc(var(--baseline)*3);
            width: 50px
        }
    }
}

.blockquote__quote {
    font-family: var(--font-family-serif);
    font-size: var(--font-size-plus-4);
    line-height: 1.2;
    margin-bottom: var(--baseline);
    @media(min-width: 768px) {
        font-size:var(--font-size-plus-6);
        line-height: 1.1
    }
    @media(min-width:1024px) {
        font-size: var(--font-size-plus-7);
        line-height: 1.1
    }
}

.blockquote__footer {
    align-items: center;
    display: flex;
    gap: calc(var(--baseline)/2);
    margin-top: var(--baseline);
    position: relative
}

.blockquote__author {
    color: var(--dark-grey-3);
    display: block;
    font-size: var(--font-size-plus-1);
    font-weight: var(--regular-weight);
    line-height: 1.2
}

.blockquote__author-title {
    color: var(--dark-grey-2);
    display: block;
    font-size: var(--font-size-plus-1);
    font-style: normal;
    a {
        color: inherit;
        &:hover {
            text-decoration: underline
        }
    }
}

.blockquote__author-portrait {
    display: none;
    @media(min-width: 768px) {
        display:block
    }
}

.blockquote__author-portrait-img {
    border-radius: 100px
}

.blockquote--indent {
    @media(min-width: 1024px) {
        grid-column-end:13;
        grid-column-start: 5;
        &.blockquote {
            padding-left: 0
        }
        &:before {
            left: -68px
        }
    }
}

.image {
    img {
        border-radius: 12px;
        overflow: hidden
    }
}

.image__figcaption {
    color: var(--brand-grey);
    padding-bottom: calc(var(--baseline)/2);
    padding-top: calc(var(--baseline)/4)
}

.image__modal-btn {
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    &:after {
        background: #fff url(../img/expand.svg) no-repeat 50%;
        background-size: 30px 30px;
        border-radius: 50%;
        content: "";
        display: flex;
        height: 48px;
        position: absolute;
        right: var(--gutter);
        top: var(--baseline);
        transition: background-size .12s ease;
        width: 48px
    }
    &:hover {
        &:after {
            background-size: 34px 34px;
            transition: background-size .1s ease
        }
    }
}

.bg-primary {
    .image__figcaption {
        border-bottom: #0000
    }
}

.image--rounded-base {
    img {
        border-radius: 0 0 12px 12px
    }
}

.hr {
    background-color: var(--light-grey-3);
    display: block;
    height: 1px;
    .block--bg-dark & {
        background-color: var(--dark-grey-2)
    }
}

.hr--white {
    background-color: #fff
}

.rte {
    h2 {
        color: var(--dark-grey-3);
        font-size: 1.8rem;
        font-weight: var(--semibold-weight);
        line-height: 1.2;
        margin-bottom: calc(var(--baseline)/4);
        @media(min-width: 1024px) {
            font-size:2rem
        }
    }
    h3 {
        color: var(--dark-grey-3);
        font-size: 1.5rem;
        font-weight: var(--semibold-weight);
        line-height: 1.3;
        margin-bottom: calc(var(--baseline)/4);
        @media(min-width: 1024px) {
            font-size:1.6rem
        }
    }
    h4,
    h5,
    h6 {
        color: var(--dark-grey-3);
        font-size: var(--font-size-plus-2);
        font-weight: var(--semibold-weight);
        line-height: 1.3;
        margin-top: var(--baseline);
        @media(min-width: 1024px) {
            font-size:var(--font-size-plus-3)
        }
    }
    ul {
        list-style: none;
        list-style-type: none;
        margin-bottom: var(--baseline);
        li {
            color: var(--dark-grey-3);
            font-size: var(--font-size-plus-2);
            line-height: 1.3;
            margin-bottom: calc(var(--font-size-plus-2)/4);
            padding-left: var(--baseline);
            position: relative;
            @media(min-width: 1024px) {
                font-size:var(--font-size-plus-3);
                margin-bottom: calc(var(--font-size-plus-3)/2)
            }
            &:before {
                background-color: var(--dark-grey-3);
                border-radius: 50%;
                content: "";
                display: inline-block;
                height: 8px;
                left: 0;
                position: absolute;
                top: calc(var(--baseline)/2.5);
                width: 8px
            }
            &:last-child {
                margin-bottom: 0
            }
        }
    }
    ol {
        counter-reset: counter;
        list-style: none;
        list-style-type: none;
        margin-bottom: var(--baseline);
        li {
            color: var(--dark-grey-3);
            counter-increment: counter;
            font-size: var(--font-size-plus-2);
            line-height: 1.3;
            margin-bottom: calc(var(--font-size-plus-2)/4);
            padding-left: var(--baseline);
            position: relative;
            @media(min-width: 1024px) {
                font-size:var(--font-size-plus-3);
                margin-bottom: calc(var(--font-size-plus-3)/2)
            }
            &:before {
                color: var(--dark-grey-3);
                content: counter(counter) ". ";
                display: inline-block;
                left: 0;
                position: absolute
            }
            &:last-child {
                margin-bottom: 0
            }
        }
    }
    p {
        color: var(--dark-grey-3);
        font-size: var(--font-size-plus-2);
        font-weight: var(--light-weight);
        line-height: 1.4;
        margin-bottom: calc(var(--font-size-plus-2)*1.2);
        &:last-child {
            margin-bottom: 0
        }
        @media(min-width:1024px) {
            font-size: var(--font-size-plus-3);
            margin-bottom: calc(var(--font-size-plus-3)*1.2)
        }
    }
    a {
        color: var(--dark-grey-3)
    }
    ol+h2,
    p+h2,
    ul+h2 {
        margin-top: calc(var(--baseline)*2)
    }
    ol+h3,
    ol+h4,
    p+h3,
    p+h4,
    ul+h3,
    ul+h4 {
        margin-top: calc(var(--baseline)*1.25)
    }
    @media (forced-colors:active) {
        mark {
            color: initial
        }
        ul li:before {
            background-color: CanvasText
        }
    }
    &:last-child {
        margin-bottom: 0
    }
}

.rte+button {
    margin-top: calc(var(--baseline)*2)
}

.text-block+.text-block .rte {
    margin-top: var(--baseline)
}

.guide-grid {
    @media(min-width: 1024px) {
        gap:var(--baseline) calc(var(--gutter)*2)
    }
}

.guide-content {
    align-self: start;
    padding-bottom: calc(var(--baseline)*2)
}

.guide-content__title {
    color: var(--dark-grey-3);
    font-size: 1.8rem;
    font-weight: var(--semibold-weight);
    line-height: 1.2;
    margin-bottom: calc(var(--baseline)/4);
    @media(min-width: 1024px) {
        font-size:2rem
    }
}

.guide-content__inner {
    padding-top: var(--baseline);
    @media(min-width: 768px) {
        border-top-color:var(--dark-grey-1);
        border-top-style: solid;
        border-top-width: 1px
    }
}

.guide-content__section {
    &:not(:first-child) {
        margin-top: calc(var(--baseline))
    }
    *+.jwplayer,
    *+figure {
        margin-top: var(--baseline)
    }
    & figure:last-child {
        figcaption {
            padding-bottom: 0
        }
    }
    & figure+.text-block {
        margin-top: var(--baseline)
    }
}

.guide-header {
    border: none;
    margin: 0
}

.guide-navigation {
    background-color: #fff;
//    @media(min-width: 1024px) {
        align-self:start;
        border-top-color: var(--dark-grey-1);
        border-top-style: solid;
        border-top-width: 1px;
        padding-bottom: calc(var(--baseline)*2);
        padding-top: calc(var(--baseline));
        position: sticky;
        top: calc(var(--baseline)*3.5);
        @media (-ms-high-contrast: active), (-ms-high-contrast:none) {
            display:flex;
            flex-direction: column
//        }
    }
}

.guide-navigation__heading {
    color: var(--text);
    display: none;
    font-size: var(--font-size-plus-2);
    font-weight: var(--semibold-weight);
    margin-bottom: calc(var(--baseline)/2);
    @media(min-width: 1024px) {
        display:block
    }
}

.guide-navigation__btn {
    background-color: var(--light-grey-1);
    color: var(--text);
    color: var(--off-black);
    display: block;
    font-size: var(--font-size-plus-2);
    font-weight: var(--regular-weight);
    padding: calc(var(--baseline)/2);
    position: relative;
    text-align: left;
    width: 100%;
    @media(min-width: 1024px) {
        display:none
    }
    &:after {
        border-right: 2px solid;
        border-top: 2px solid;
        content: "";
        display: inline-block;
        height: 14px;
        margin-left: calc(var(--baseline));
        position: absolute;
        right: calc(var(--baseline));
        top: 16px;
        transform: rotate(135deg);
        width: 14px
    }
    .is--active & {
        margin-bottom: calc(var(--baseline));
        &:after {
            top: 22px;
            transform: rotate(-45deg)
        }
    }
}

/*
.guide-navigation__panel {
    @media (max-width: 1023px) {
        display:none;
        .is--active & {
            display: block
        }
    }
}
*/
.guide-navigation__list {
    margin-bottom: calc(var(--baseline))
}

.guide-navigation__item {
    margin-bottom: calc(var(--baseline)/2);
    position: relative
}

.guide-navigation__link {
    color: var(--text);
    font-size: var(--font-size-plus-3);
    text-decoration: none;
    &:hover {
        text-decoration: underline
    }
}

.back-to-contents {
    color: var(--dark-grey-2);
    display: none;
    font-size: var(--font-size-2);
    margin-top: 100vh;
    padding-bottom: 1rem;
    position: sticky;
    top: 85%;
    &:hover {
        text-decoration: underline
    }
    @media(min-width:1024px) {
        &.is--active {
            display: block
        }
        @media (-ms-high-contrast:active),
        (-ms-high-contrast:none) {
            bottom: var(--baseline);
            display: block;
            margin-top: auto;
            position: relative;
            top: auto
        }
    }
}

.back-to-contents--footnote {
    display: block;
    grid-column: auto/span 3;
    margin-left: calc(var(--gutter)*.5);
    margin-top: 0;
    min-width: fit-content;
    position: static;
    top: auto;
    @media(min-width: 1024px) {
        display:none
    }
}

.back-to-contents__icon {
    display: block;
    margin-right: calc(var(--baseline)/2)
}

.gallery__header {
    @media(max-width: 600px) {
        font-size:var(--font-size-minus-2)
    }
}

.gallery__total {
    @media(max-width: 600px) {
        padding-right:var(--gutter)
    }
}

.gallery__item {
    &.is--active {
        display: flex;
        flex-direction: column;
        width: 100%;
        &:focus {
            box-shadow: none !important;
            outline: 0 none !important
        }
    }
}

.gallery__next,
.gallery__previous {
    @media(min-width: 768px) {
        bottom:auto;
        top: calc(50% - 16px)
    }
}

.gallery__previous {
    @media(min-width: 768px) {
        left:calc(var(--gutter)/1.5)
    }
}

.gallery__next {
    @media(min-width: 768px) {
        right:calc(var(--gutter)/1.5)
    }
}

.gallery__main {
    @media(min-width: 768px) {
        width:calc(100% - 64px)
    }
}

.gallery__item-img-container {
    img {
        max-height: calc(100vh - 200px)
    }
}

.gallery__item-link {
    &:hover {
        text-decoration: none
    }
}

.gallery__item-tag {
    &+.gallery__item-tag {
        margin-left: var(--gutter)
    }
}

.gallery__item-tag-link {
    &:hover {
        background-color: var(--mid-grey-1);
        color: var(--dark-grey-3)
    }
}

.is--fullscreen {
    .gallery__item-footer,
    .gallery__next,
    .gallery__previous,
    .gallery__share,
    .gallery__total {
        display: none
    }
    .gallery__header {
        padding: calc(var(--baseline)/2) var(--gutter)
    }
    .gallery__item-img-container img {
        max-height: calc(100vh - 140px)
    }
}

.modal-gallery__container {
    display: none;
    padding: var(--baseline) 0;
    @media(min-width: 768px) {
        padding:var(--baseline) var(--gutter)
    }
    &.is--active {
        background-color: var(--off-black);
        bottom: 0;
        display: flex;
        height: auto;
        justify-content: center;
        left: 0;
        overflow: auto;
        padding-left: var(--gutter);
        padding-right: var(--gutter);
        position: fixed;
        right: 0;
        top: 0;
        width: auto;
        z-index: 400
    }
}

.modal-gallery {
    display: flex;
    position: relative;
    width: 100%
}

.modal-gallery__close {
    background-color: initial;
    color: var(--light-grey-1);
    padding: calc(var(--baseline)/4) calc(var(--gutter)/2);
    @media(max-width: 600px) {
        font-size:var(--font-size-minus-2)
    }
}

.modal-gallery__btn {
    background-color: initial;
    position: relative;
    img {
        border-radius: 12px
    }
}

.modal-gallery__btn-label {
    background: #fff;
    border-radius: 20px;
    color: var(--off-black);
    padding: calc(var(--baseline)/4) calc(var(--gutter)/1.25);
    position: absolute;
    right: 15px;
    top: 15px
}

.notification-banner {
    background: var(--off-black);
    font-size: var(--font-size-baseline);
    line-height: 1.4rem;
    padding: calc(var(--baseline)) 0;
    @media(min-width: 1024px) {
        font-size:var(--font-size-plus-1)
    }
}

.notification-banner a {
    color: var(--light-grey-2);
    font-weight: var(--semibold-weight);
    margin-left: calc(var(--baseline)/4);
    position: relative;
    text-decoration: underline;
    &:hover {
        text-decoration: none
    }
}

.notification-banner__content {
    align-items: flex-start;
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding-left: calc(var(--baseline)*2);
    position: relative
}

.notification-banner__icon {
    left: 0;
    position: absolute;
    top: -4px
}

.notification-banner__icon svg {
    height: 30px
}

.notification-banner p {
    color: var(--white)
}

.gallery {
    color: #fff;
    display: flex;
    flex-direction: column;
    width: 100%
}

.gallery__header {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    padding: 0 var(--gutter);
    @media(max-width: 600px) {
        font-size:var(--font-size-minus-2)
    }
}

.gallery__total {
    color: #fff;
    padding-right: calc(var(--gutter)*1.5);
    @media(max-width: 600px) {
        padding-right:var(--gutter)
    }
}

.gallery__item {
    display: none;
    &.is--active {
        display: flex;
        flex-direction: column;
        width: 100%;
        &:focus {
            box-shadow: none !important;
            outline: 0 none !important
        }
    }
}

.gallery__next,
.gallery__previous {
    background-color: initial;
    bottom: calc(var(--baseline)*2);
    position: fixed;
    fill: #fff;
    @media(min-width: 768px) {
        bottom:auto;
        top: calc(50% - 16px)
    }
}

.gallery__next-icon,
.gallery__previous-icon {
    display: block;
    height: 32px;
    width: 32px
}

.gallery__previous {
    left: calc(var(--gutter)/4);
    @media(min-width: 768px) {
        left:calc(var(--gutter)/1.5)
    }
}

.gallery__next {
    right: calc(var(--gutter)/4);
    @media(min-width: 768px) {
        right:calc(var(--gutter)/1.5)
    }
}

.gallery__main {
    display: flex;
    flex-grow: 1;
    margin: auto;
    width: 100%;
    @media(min-width: 768px) {
        width:calc(100% - 64px)
    }
}

.gallery__list {
    display: flex;
    width: 100%
}

.gallery__item-img-container {
    align-items: center;
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
    justify-content: center;
    img {
        max-height: calc(100vh - 200px)
    }
}

.gallery__item-caption {
    width: 100%
}

.gallery__item-link {
    color: var(--light-grey-1);
    text-decoration: underline;
    &:hover {
        text-decoration: none
    }
}

.gallery__item-tags {
    display: flex
}

.gallery__item-tag {
    &+.gallery__item-tag {
        margin-left: var(--gutter)
    }
}

.gallery__item-tag-link {
    border: 1px solid var(--mid-grey-2);
    border-radius: 18px;
    color: var(--light-grey-1);
    display: block;
    height: 36px;
    line-height: 36px;
    padding: 0 var(--gutter);
    text-decoration: none;
    &:hover {
        background-color: var(--mid-grey-1);
        color: var(--dark-grey-3)
    }
}

.is--fullscreen {
    .gallery__item-footer,
    .gallery__next,
    .gallery__previous,
    .gallery__share,
    .gallery__total {
        display: none
    }
    .gallery__header {
        padding: calc(var(--baseline)/2) var(--gutter)
    }
    .gallery__item-img-container img {
        max-height: calc(100vh - 140px)
    }
}

.filter {
    border-top: 1px solid var(--light-grey-3);
    display: flex;
    justify-content: space-between;
    margin-bottom: calc(var(--baseline)*2);
    padding-top: calc(var(--baseline)/2)
}

.filter__list {
    display: flex;
    gap: calc(var(--gutter)/2)
}

.filter__link {
    color: currentColor;
    font-size: var(--font-size-plus-1);
    text-decoration: none;
    &.is--active {
        font-weight: var(--semibold-weight)
    }
    &:hover {
        text-decoration: underline
    }
    @media(min-width:1024px) {
        font-size: var(--font-size-plus-2)
    }
}

.filter__container {
    display: none
}

.filter__close {
    background-color: initial;
    display: flex;
    padding: calc(var(--baseline)/2) calc(var(--gutter)/2);
    position: absolute;
    right: var(--gutter);
    top: var(--baseline);
    z-index: 300
}

.on--filter {
    .filter__container {
        background-color: #000000d9;
        bottom: 0;
        display: block;
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 300
    }
    .filter__form-container {
        background-color: #fff;
        bottom: 0;
        display: block;
        left: 0;
        overflow-y: auto;
        padding: 100px var(--gutter) var(--baseline) var(--gutter);
        position: fixed;
        right: 0;
        top: 0;
        @media(min-width: 1024px) {
            left:50%;
            padding: 100px calc(var(--gutter)*2) calc(var(--baseline)*2) calc(var(--gutter)*2)
        }
    }
    .filter__form-footer {
        align-items: center;
        display: flex;
        gap: calc(var(--gutter)/2);
        justify-content: flex-end;
        margin-bottom: var(--baseline);
        margin-top: var(--baseline)
    }
}

.filter__status {
    color: var(--brand-blue);
    font-family: var(--font-family-serif);
    font-size: var(--font-size-plus-4);
    line-height: 1.2;
    margin-bottom: calc(var(--baseline)*4);
    @media(min-width: 1024px) {
        font-size:var(--font-size-plus-5)
    }
}

.expandable-section {
    &.is--active {
        .expandable-section__btn:after {
            transform: rotate(180deg)
        }
        .expandable-section__bd {
            display: block;
            padding-bottom: var(--baseline);
            padding-top: calc(var(--baseline)/2)
        }
    }
}

.expandable-section__btn {
    align-items: center;
    background-color: initial;
    border-top: 1px solid var(--light-grey-2);
    color: var(--off-black);
    display: flex;
    font-size: var(--font-size-plus-2);
    justify-content: space-between;
    padding: calc(var(--baseline)/2) 0;
    width: 100%;
    &:after {
        background: url(../img/down-arrow.svg) no-repeat;
        background-size: contain;
        content: "";
        display: block;
        height: 12px;
        width: 23px
    }
}

.expandable-section__bd {
    display: none
}

.legend {
    font-size: var(--font-size-plus-3);
    line-height: 1.4;
    margin-bottom: calc(var(--baseline)/2)
}

.legend__text {
    display: block
}

.legend__hint {
    color: var(--dark-grey-1);
    display: block;
    font-size: var(--font-size-plus-1)
}

.label {
    color: var(--dark-grey-3);
    display: block;
    font-size: var(--font-size-plus-2);
    font-weight: var(--regular-weight);
    position: relative;
    @media(min-width: 1024px) {
        font-size:var(--font-size-plus-3)
    }
}

.label__help {
    color: var(--dark-grey-1);
    display: block;
    font-size: var(--font-size-plus-1);
    line-height: 1.3;
    margin-top: 0;
    position: relative
}

.feedback__panel .label__help {
    color: var(--off-black)
}

.label__help+.label__help {
    margin-top: calc(var(--baseline)/5)
}

.checkbox {
    position: relative;
    &:not(:last-child) {
        margin-bottom: calc(var(--baseline)/1.5)
    }
}

.checkbox__input {
    cursor: pointer;
    height: 24px;
    left: 0;
    margin: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 24px;
    z-index: 1
}

.checkbox__label {
    cursor: pointer;
    font-weight: var(--light-weight);
    min-height: 32px;
    padding-left: 44px;
    padding-top: 2px;
    &:before {
        background-color: initial;
        border: 2px solid var(--off-black);
        content: "";
        font-size: var(--font-size-baseline);
        height: 32px;
        left: 0;
        pointer-events: none;
        position: absolute;
        top: 0;
        width: 32px;
        z-index: 2
    }
}

.checkbox__input:checked+.checkbox__label {
    &:after {
        border-bottom: 4px solid #4d4d4d;
        border-left: 4px solid #4d4d4d;
        content: "";
        height: 10px;
        left: 6px;
        position: absolute;
        top: calc(50% - 7px);
        transform: rotate(-45deg);
        width: 20px;
        z-index: 3
    }
}

.checkbox__input:focus+.checkbox__label {
    &:before {
        outline: 4px solid var(--highlight)
    }
}

.radio {
    position: relative;
    &:not(:last-child) {
        margin-bottom: calc(var(--baseline)/1.5)
    }
}

.radio__input {
    cursor: pointer;
    height: 25px;
    left: 0;
    margin: 0;
    opacity: 0;
    position: absolute;
    top: -2px;
    width: 25px;
    z-index: 1;
    &:disabled {
        &+.radio__label {
            opacity: .7;
            pointer-events: none;
            &:before {
                background: var(--light-grey-2)
            }
        }
    }
}

.radio__label {
    align-items: center;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    font-weight: var(--light-weight);
    min-height: 32px;
    padding-left: 44px;
    position: relative;
    width: 100%;
    &:before {
        background: #fff;
        border: 2px solid var(--off-black);
        height: 32px;
        left: 0;
        top: 0;
        width: 32px
    }
    &:after,
    &:before {
        border-radius: 50%;
        content: "";
        position: absolute;
        z-index: 1
    }
    &:after {
        background: var(--off-black);
        height: 16px;
        left: calc(var(--baseline)/3);
        opacity: 0;
        top: 8px;
        width: 16px
    }
}

.radio__input:checked+.radio__label {
    &:after {
        opacity: 1
    }
}

.radio__input:focus+.radio__label {
    &:before {
        box-shadow: 0 0 0 4px var(--highlight)
    }
}

.radio__legend {
    display: block;
    font-size: var(--font-size-plus-2);
    font-weight: var(--regular-weight);
    line-height: 1.3;
    margin-bottom: calc(var(--baseline));
    width: 100%;
    @media(min-width: 1024px) {
        font-size:var(--font-size-plus-3)
    }
}

.radio__legend:has(~.is--invalid) {
    margin-bottom: calc(var(--baseline)/2)
}

.form__row {
    margin-bottom: calc(var(--baseline)*1.5)
}

.text__input,
.textarea__input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #fff;
    padding: calc(var(--gutter)/2)
}

.select__input,
.text__input,
.textarea__input {
    border: 2px solid var(--off-black);
    color: var(--off-black);
    display: block;
    font-size: var(--font-size-plus-2);
    line-height: 1.3;
    margin-bottom: calc(var(--baseline)/2);
    margin-top: calc(var(--baseline)/4);
    width: 100%
}

.select__input {
    background: var(--white) no-repeat;
    background-image: url(../img/select-arrow.svg);
    background-position: calc(100% - var(--baseline)/4);
    background-size: 32px 32px;
    padding: calc(var(--gutter)/2) 50px calc(var(--gutter)/2) calc(var(--gutter)/2);
    position: relative
}

.error-message,
.field-validation-error {
    color: var(--error);
    display: block;
    font-size: var(--font-size-plus-2);
    font-weight: var(--regular-weight);
    margin-bottom: calc(var(--baseline)/4)
}

.legend+.error-message {
    margin-top: calc(var(--baseline)/-2)
}

.tabs__tabslist {
    border-bottom: 1px solid var(--light-grey-3);
    display: flex;
    gap: var(--gutter);
    max-width: none;
    overflow-x: auto
}

.tabs__tab {
    color: var(--off-black);
    display: block;
    font-size: var(--font-size-plus-2);
    padding: calc(var(--baseline)/2) 0 calc(var(--baseline)/2) 0;
    position: relative;
    text-decoration: none;
    @media(min-width: 1024px) {
        font-size:var(--font-size-plus-3)
    }
    &.is--active {
        font-weight: var(--semibold-weight)
    }
    &.is--active:after {
        background-color: var(--dark-grey-3);
        bottom: 0;
        content: "";
        height: 1px;
        left: 0;
        position: absolute;
        width: 100%
    }
}

.tabs__tabpanel {
    padding-top: calc(var(--baseline)*1.5)
}

.table-container {
    overflow-x: auto;
    width: 100%
}

table {
    width: 100%;
    thead {
        border-top: 2px solid var(--dark-grey-3)
    }
    th {
        border-bottom: 1px solid var(--light-grey-3);
        color: var(--dark-grey-3);
        font-size: var(--font-size-baseline);
        font-weight: var(--medium-weight);
        vertical-align: bottom
    }
    td,
    th {
        line-height: 1.4;
        padding: calc(var(--baseline)/2) calc(var(--baseline)/2) calc(var(--baseline)/2) 0;
        text-align: left
    }
    td {
        font-size: var(--font-size-plus-1)
    }
    tr {
        border-bottom: 1px solid var(--light-grey-2);
        &:last-child {
            border-bottom: 0
        }
    }
    caption {
        font-size: var(--font-size-plus-2);
        font-weight: var(--medium-weight);
        line-height: 1.2;
        margin-bottom: var(--baseline);
        text-align: left
    }
}

.search {
    color: var(--off-black);
    @media(min-width: 1024px) {
        margin-left:calc(var(--gutter)/2)
    }
}

.search__inner {
    display: none
}

.search__toggle {
    align-items: center;
    background: #0000;
    display: flex;
    height: 44px;
    justify-content: center;
    padding: 0;
    width: 44px;
    &:focus-within {
        outline: 4px var(--highlight) solid
    }
    &:hover {
        opacity: .8
    }
    path,
    rect,
    svg {
        fill: var(--off-black)
    }
}

.search__toggle-close {
    display: none
}

.on--search {
    .footer,
    .main,
    .primary-navigation__wrapper,
    .skip__btn {
        display: none !important;
        visibility: hidden !important
    }
    .search__toggle-close {
        display: flex
    }
    .search__toggle-open {
        display: none
    }
    .search__inner {
        background-color: #fff;
        bottom: 0;
        display: block;
        left: 0;
        min-height: calc(100vh - var(--notification-banner-height));
        overflow: auto;
        position: fixed;
        right: 0;
        top: calc(101px + var(--notification-banner-height));
        z-index: 200
    }
    .search__heading {
        font-size: var(--font-size-plus-4);
        font-weight: var(--light-weight);
        margin-bottom: calc(var(--baseline));
        padding-top: calc(var(--baseline)*2);
        @media(min-width: 768px) {
            font-size:var(--font-size-plus-5)
        }
        @media(min-width:1024px) {
            font-size: var(--font-size-plus-6)
        }
    }
    .search__toggle {
        path,
        rect,
        svg {
            fill: var(--off-black)
        }
    }
}

.search__form {
    align-items: center;
    background-color: var(--light-grey-1);
    display: flex;
    padding: calc(var(--baseline)/4) calc(var(--gutter)/2) calc(var(--baseline)/4) calc(var(--gutter)/2);
    position: relative;
    width: 100%
}

.search__input {
    background-color: initial;
    display: block;
    flex-grow: 1;
    font-size: var(--font-size-plus-1);
    padding: calc(var(--baseline)/2) calc(var(--gutter)/2)
}

.search__button {
    align-items: center;
    background-color: initial;
    display: flex;
    height: 44px;
    justify-content: center;
    width: 44px
}

.search__text {
    font-size: var(--font-size-plus-2)
}

.search-results {
    margin-top: calc(var(--baseline)*1.5)
}

.search-results__summary {
    font-size: var(--font-size-plus-1);
    font-weight: var(--light-weight);
    @media(min-width: 768px) {
        font-size:var(--font-size-plus-2)
    }
}

.search-results__list {
    margin-top: calc(var(--baseline)*2);
    width: 100%
}

.search-results__item {
    border-top: 1px solid var(--light-grey-2);
    display: grid;
    gap: calc(var(--baseline)/4) var(--gutter);
    grid-template-columns: repeat(12, 1fr);
    margin-bottom: calc(var(--baseline)*2);
    padding-top: calc(var(--baseline)/2);
    position: relative;
    width: 100%
}

.search-results__item-bd {
    grid-column: auto/span 12;
    @media(min-width: 768px) {
        grid-column:auto/span 8
    }
}

.search-results__item-link {
    font-family: var(--font-family-serif);
    font-size: var(--font-size-plus-3);
    line-height: 1.3;
    text-decoration: none;
    &:after {
        bottom: 0;
        content: "";
        display: block;
        left: 0;
        position: absolute;
        right: 0;
        top: 0
    }
    &:hover {
        text-decoration: underline
    }
    @media(min-width:768px) {
        font-size: var(--font-size-plus-5);
        line-height: 1.2
    }
}

.search-results__item-summary {
    font-size: var(--font-size-plus-1);
    margin-top: calc(var(--baseline)/4);
    @media(min-width: 768px) {
        font-size:var(--font-size-plus-2)
    }
}

.pagination {
    align-items: center;
    border-top: 1px solid var(--light-grey-2);
    color: currentColor;
    display: flex;
    font-size: var(--font-size-plus-2);
    gap: 0 calc(var(--gutter)/4);
    justify-content: flex-start;
    margin-bottom: calc(var(--baseline)*3);
    margin-top: calc(var(--baseline)*2);
    padding-top: calc(var(--baseline)/2);
    @media(min-width: 768px) {
        font-size:var(--font-size-plus-3)
    }
}

.pagination__list {
    align-items: center;
    display: flex;
    gap: 0 calc(var(--gutter)/4);
    justify-content: flex-start;
    margin-left: calc(var(--gutter)*-.5)
}

.pagination__link {
    padding: calc(var(--baseline)/2) calc(var(--gutter)/2);
    text-decoration: none
}

.article-navigation__container {
    background: #fff;
    position: sticky;
    top: 100px;
    z-index: 2
}

.article-navigation {
    border-bottom: 1px solid var(--primary-border);
    border-top: 1px solid var(--primary-border);
    display: flex;
    padding-top: var(--baseline);
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    @media(max-width: 767px) {
        overflow-x:auto
    }
}

.article-navigation__list {
    display: flex;
    gap: var(--gutter);
    width: 100%
}

.article-navigation__item {
    padding-bottom: var(--baseline)
}

.article-navigation__link {
    color: var(--dark-grey-3);
    font-size: var(--font-size-plus-1);
    text-decoration: none;
    &:hover {
        text-decoration: underline
    }
    @media(min-width:1024px) {
        font-size: var(--font-size-plus-2)
    }
}

.opening-times {
    margin-top: 0 !important
}

.opening-times__item {
    display: flex;
    padding-left: 0 !important;
    &:before {
        display: none !important
    }
}

.opening-times__day {
    min-width: 180px
}

.join-tasks {
    margin-bottom: calc(var(--baseline)*2);
    @media (min-width: 768px) {
        margin-bottom:calc(var(--baseline)*4)
    }
}

.join-tasks__item {
    color: var(--white);
    font-size: var(--font-size-plus-2);
    margin-bottom: calc(var(--baseline)*2);
    position: relative;
    &:not(:first-child) {
        border-top: 1px solid #ffffff1a;
        padding-top: calc(var(--baseline)/2)
    }
}

.join-tasks__link {
    align-items: center;
    color: currentColor;
    display: flex;
    font-size: var(--font-size-plus-3);
    text-decoration: none;
    &:before {
        bottom: 0;
        left: 0;
        position: absolute;
        right: 0;
        top: 0
    }
    &:after,
    &:before {
        content: "";
        display: block
    }
    &:after {
        background: url(../img/long-arrow.svg);
        background-size: cover;
        filter: brightness(0) invert(1);
        flex-shrink: 0;
        height: 14px;
        margin-left: calc(var(--gutter)/4);
        transition: transform .12s ease;
        width: 15px
    }
    &:hover {
        &:after {
            transform: translateX(4px);
            transition: transform 60ms ease
        }
    }
}

.join-tasks__bd {
    margin-top: calc(var(--baseline)/4)
}

.summary {
    color: var(--brand-blue);
    margin-top: calc(var(--baseline)*1.5)
}

.summary__title {
    border-top: 1px solid var(--dark-grey-3);
    font-size: var(--font-size-plus-1);
    font-weight: var(--semibold-weight);
    padding-top: calc(var(--baseline)/2);
    @media(min-width: 768px) {
        font-size:var(--font-size-plus-2)
    }
}

.summary__bd {
    font-size: var(--font-size-plus-3);
    font-weight: var(--light-weight);
    line-height: 1.3;
    margin-bottom: calc(var(--baseline)*2);
    margin-top: calc(var(--baseline)*1.5);
    @media(min-width: 768px) {
        font-size:var(--font-size-plus-4);
        margin-bottom: calc(var(--baseline)*3)
    }
    @media(min-width:1200px) {
        font-size: var(--font-size-plus-5)
    }
}

.graphic--support {
    background-image: url(../img/nls-logo-bg-left.svg);
    background-position: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 700px;
    @media (max-width: 1023px) {
        background-size:900px
    }
}

.graphic--learn {
    background-image: url(../img/nls-logo-bg-right.svg);
    background-position: 100% 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 500px;
    @media (min-width: 480px) {
        background-size:600px
    }
    @media (min-width:768px) {
        background-size: 700px
    }
}

.graphic--join {
    background-image: url(../img/nls-logo-bg-cream.svg);
    background-position: 100% 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 380px;
    @media (min-width: 480px) {
        background-size:350px
    }
    @media (min-width:768px) {
        background-size: 350px
    }
    @media (min-width:1024px) {
        background-size: 450px
    }
    @media (min-width:1200px) {
        background-size: 550px
    }
    @media (min-width:1400px) {
        background-size: 600px
    }
}

.pink.graphic--join,
.red.graphic--join {
    background-image: url(../img/nls-logo-bg-blue.svg)
}

.blue.graphic--join,
.burgundy.graphic--join {
    background-image: url(../img/nls-logo-bg-cream-light.svg)
}

.cream-50.graphic--join {
    background-image: url(../img/nls-logo-bg-cream.svg)
}

.cream.graphic--join {
    background-image: url(../img/nls-logo-bg-red.svg)
}

.blue .graphic--home {
    background-image: url(../img/nls-logo-bg-cream-light.svg);
    background-position: 100% 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 380px;
    margin-bottom: calc(var(--baseline)*2);
    @media (min-width: 480px) {
        background-size:320px
    }
    @media (min-width:768px) {
        background-size: 350px;
        margin-bottom: calc(var(--baseline)*3)
    }
    @media (min-width:1024px) {
        background-size: 450px
    }
    @media (min-width:1200px) {
        background-size: 550px
    }
    @media (min-width:1400px) {
        background-size: 680px
    }
}

.btn--top {
    background: #fff;
    border: 2px solid var(--brand-blue);
    border-radius: 100px;
    bottom: 40px;
    color: var(--off-black);
    font-weight: var(--regular-weight);
    left: 40px;
    opacity: 0;
    padding: calc(var(--baseline)/2);
    position: fixed;
    text-decoration: none;
    transition: background-color .25s ease-in-out, visibility 0s, opacity .5s linear, background .2s;
    visibility: hidden;
    z-index: 1;
    span {
        display: inline-block;
        margin-left: calc(var(--baseline)/2)
    }
    svg {
        transform: rotate(-90deg)
    }
    &:hover {
        background-color: var(--light-grey-1)
    }
}

.btn--top.active {
    opacity: 1;
    visibility: visible
}

@media (max-width:1199px) {
    .btn--top {
        display: none
    }
}

.feedback__form {
    margin-top: calc(var(--baseline)/2);
    padding-bottom: calc(var(--baseline)/2)
}

.feedback__btn {
    background-color: var(--brand-blue-10);
    border-top: 1px solid var(--brand-blue-10);
    color: var(--off-black);
    font-size: var(--font-size-plus-3);
    font-weight: var(--regular-weight);
    line-height: 1.2;
    padding: calc(var(--baseline)*1.5) 0;
    text-align: left;
    width: 100%;
    .is--active & {
        background: #fff;
        border-top: 1px solid var(--light-grey-3)
    }
}

.feedback__btn-inner {
    display: block;
    padding-right: var(--baseline);
    position: relative
}

.feedback__btn-inner:after {
    border-right: 2px solid;
    border-top: 2px solid;
    content: "";
    display: inline-block;
    height: 10px;
    margin-left: calc(var(--baseline)/2);
    position: absolute;
    right: 0;
    top: 7px;
    transform: rotate(135deg);
    width: 10px
}

@media screen and (min-width:400px) {
    .feedback__btn-inner:after {
        right: unset
    }
}

.js-toggle__feedback {
    display: none
}

.is--active .feedback__panel {
    display: grid
}

.is--active .feedback__btn-inner:after {
    top: 12px;
    transform: rotate(-45deg)
}

.feedback__form.is--hidden {
    display: none
}

.feedback__success {
    display: none;
    padding-bottom: calc(var(--baseline)*1.5)
}

.feedback__success.is--visible {
    display: block
}

.feedback__title {
    color: var(--brand-blue);
    font-family: var(--font-family-serif);
    font-size: var(--font-size-plus-5);
    line-height: 1.2;
    @media(min-width: 1024px) {
        font-size:var(--font-size-plus-6)
    }
}

.feedback__description {
    font-size: var(--font-size-plus-2)
}

.block:has(.text-block--section)+.feedback__container {
    margin-top: calc(var(--baseline)*6)
}

.phase-banner {
    background: var(--primary);
    border-bottom: 1px solid var(--primary-border);
    font-size: var(--font-size-baseline);
    line-height: 1.4rem;
    padding: calc(var(--baseline)/1.5) 0;
    @media(min-width: 1024px) {
        font-size:var(--font-size-plus-1)
    }
}

.phase-banner a {
    color: var(--primary-text);
    font-weight: var(--semibold-weight);
    position: relative;
    text-decoration: underline;
    &:hover {
        text-decoration: none
    }
}

.phase-banner__content {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 12px;
    position: relative
}

.phase-banner__info {
    border: 1px solid var(--primary-text);
    padding: calc(var(--baseline)/4) calc(var(--baseline)/2)
}

.phase-banner p {
    color: var(--primary-text)
}

.jwplayer {
    background-color: #f1f1f1;
    margin-bottom: 1rem;
    padding-top: 56.25%;
    position: relative
}

.video {
    background-color: #0000000d;
    height: 0;
    padding-bottom: 56.25%;
    position: relative;
    iframe,
    video {
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%
    }
}

.video__message {
    align-items: center;
    bottom: 0;
    color: currentColor;
    display: flex;
    justify-content: center;
    left: 0;
    padding: 0 var(--gutter);
    position: absolute;
    right: 0;
    top: 0
}

.video__message-link {
    background-color: initial;
    color: currentColor;
    text-decoration: underline;
    transition: opacity .24s ease-in;
    &:hover {
        text-decoration: none
    }
}

ol.button-list {
  display: flex;
  flex-direction: column;
  align-items: stretch; /* Ensures each li takes full width of the container */
  width: 100%;   /* Shrinks to fit the widest li, or set a fixed width if you prefer */
  padding: 0;
  margin: 0;
}

ol.button-list li {
  list-style: none;     /* Removes default numbering if you want a cleaner look */
//  margin-bottom: 8px;   /* Optional: adds spacing between buttons */
}

ol.button-list a {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;   /* Center the text inside the button */
  padding: 12px 24px;   /* Adjust for desired button size */
  background: #0074d9;  /* Example button color */
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.2s;
}

ol.button-list a:hover {
  background: #005fa3;
}




/*# sourceMappingURL=styles.css.map */

#header {
    position: absolute;
	top: 0;
    font-size: 1.1em;
    line-height: 1.5em;
    height: 115px;
    width: 100%;
    padding: 5px 0 10px 10px;
    background-color: white;
    z-index: 100;
	 display: flex;
    justify-content: center;
}

@media only screen and (max-width: 60rem) {
	#header {
		height: 215px;
	     }
}

@media only screen and (max-width: 48rem) {
	#header {
		height: 215px;
	     }
}


@media only screen and (min-width: 65rem) {

#siteTitle {
    position: absolute;
    height: 58px;
    color: #13133b;
    font-size: 1.6em;
    border: none;
    white-space: nowrap;
    left: 20%;
    right: 30%;
	margin: auto;
    padding: 25px 0 0 0;
    width: 120px;
    min-width: 120px;
}

}


@media only screen and (max-width: 65rem) {
	#siteTitle  {
	position: absolute;
    height: 58px;
    color: #13133b;
    font-size: 1.6em;
    border: none;
    white-space: nowrap;
    left: 40%;
    right: 30%;
	margin: auto;
    padding: 25px 0 0 0;
    width: 120px;
    min-width: 120px;
	     }
}

@media only screen and (max-width: 40rem) {
	#siteTitle {
    	
		position: absolute;		
    	top:50px;
    	width: 160px;
        left: 30%;
		right: 30%;
        padding: 50px 16px 10px 15px;
		height: 58px;
		color: #13133b;
		font-size: 1.8em;
		font-style: bold;
		border: none;
		white-space: nowrap;
		margin: auto;
		width: 120px;
		min-width: 120px;
	}
}

@media only screen and (min-width: 48rem) {

#bar {
        position: absolute;
	top: 90px;
	width: 100%;
	border-top: 1px solid #CCCCD6;
	border-bottom: 1px solid #CCCCD6;
//	background-color: #faf2f8;
//	background-color: #F5E2ED;
	background-color: #faf2f8 !important;
	background-image: url(https://maps.nls.uk/assets/graphics/shade.png);
	padding: 2px 0 0 0;
	margin: 0;
	font-size: 0.9em !important;
	color: #707070;
	clear: both;
	max-height: 26px;
	overflow: hidden;
	z-index: 1000;
}

}

@media only screen and (max-width: 60rem) {
	#bar {
        position: absolute;
	top: 205px;
	width: 100%;
	border-top: 1px solid #CCCCD6;
	border-bottom: 1px solid #CCCCD6;
//	background-color: #faf2f8;
//	background-color: #F5E2ED;
	background-color: #faf2f8 !important;
	background-image: url(https://maps.nls.uk/assets/graphics/shade.png);
	padding: 2px 0 0 0;
	margin: 0;
	font-size: 0.9em !important;
	color: #707070;
	clear: both;
	max-height: 26px;
	overflow: hidden;
	z-index: 1000;
	     }
}




#header:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
* html #footerMenu,
* html #bar,
* html #header {
	height: 1%;
}

	#URHere {
		float: left;
	//	background-color: #faf2f8;
		margin: 1px 0 0 0;
		padding: 0 0 0 10px;
	}



#URHereContainer {
	max-width: 80% !important;
}

#URHere a {
	display: inline-block;
	color: #707070;
	text-decoration: none;
	margin: 0;
	padding: 0px 4px 2px 4px;
}

#URHere a:hover {
	text-decoration: underline;
}



* html #footerMenu,
* html #bar,
* html #header {
	height: 1%;
}

@media only screen and (min-width: 60rem) { 

		.headerSearchForm {
			position: absolute;
			right: 0;
			top: 0;
			margin: 26px 16px 0 0;
			padding:1px;
			width: 194px;
			height: 35px;
			color: #003;
			border: 1px solid #000;
			background-color: white;
		}

		#headerSearchFormSearchBox {
			float: right; 
			height: 25px;
			width: 106px;
		//	border: none;
			border: 1px solid #000;
			color: #666;
			margin: 4px 2px 2px 2px; !important;
			padding: 0 10px 0 3px;
			font-size: 0.7em;
			background-color: white;
			line-height: normal;
		}

		#headerSearchFormLabel  {
			margin: 5px 3px 0 0;
			float: left;
			font-size: 0.8em;
			border: none !important;
		}

		#headerSearchFormSubmitButton {
			float: left;
			height: 25px;
			width: 25px;
			background-image: url(/assets/graphics/search_icon.png);
			background-repeat: no-repeat;
			background-position: center;
			border: none;
			color: #666;
			margin: 5px 0 0 0;
			background-color: white;
			line-height: normal;
		}

}

@media only screen and (max-width: 60rem) { 
		.headerSearchForm {
	position: absolute;
			right: 20%;
			left: 20%;
			top: 135px;
//			margin-top: 50px;
			margin: 6px 16px 0 0;
			width: 224px;
			height: 35px;
			color: #003;
			border: 1px solid #000;
			background-color: white;
		}
}

@media only screen and (max-width: 60rem) { 

		#headerSearchFormSearchBox {
			float: right; 
			height: 25px;
			width: 126px;
		//	border: none;
			border: 1px solid #ccc;
			color: #666;
			margin: 4px 2px 2px 2px !important;
			padding: 0 10px 0 3px;
			font-size: 1em;
			background-color: white;
			line-height: normal;
		}

		#headerSearchFormLabel  {
			margin: 5px 3px 0 0;
			float: left;
			font-size: 0.8em;
			border: none !important;
		}

		#headerSearchFormSubmitButton {
			float: left;
			height: 25px;
			width: 25px;
			background-image: url(/assets/graphics/search_icon.png);
			background-repeat: no-repeat;
			background-position: center;
			border: none;
			color: #666;
			margin: 5px 0 0 0;
			background-color: white;
			line-height: normal;
		}

}

@media only screen and (min-width: 60rem) { 

		#NLSLogo {
			margin: 0.2em;

		}

}

@media only screen and (max-width: 60rem) { 

		#NLSLogo {
			// width: 50%;
			margin-left: auto !important;
			margin-right: auto !important;

		}

}

@media only screen and (max-width: 60rem) { 
  .main-wrapper {
    padding-top: 15.1875rem !important;
  }
}

.btn--secondary2 {
    background: #faf2f8;
    border: 1px solid #faf2f8;
    color: #3b1413;
    &:active,
    &:hover {
        background: #fde5f6;
        border-color: #fde5f6;
    }
}




	button, .button {
	  background-color: #131754;
	  border: 0;
	  box-shadow: none;
	  cursor: pointer;
	  -webkit-border-radius: 0;
	  border-radius: 0;
	  -webkit-appearance: none;
	  -moz-appearance: none;
	  -ms-appearance: none;
	  appearance: none;
	  display: inline-block;
	  padding: 0.9375em 1.5625em;
	  border-radius: 0;
	  -webkit-border-radius: 3;
	  border-radius: 3;
	  font-family: AtkinsonHyperLegible;
	  font-size: 0.9375rem;
	  font-weight: 300;
	  color: #fff;
	//  color: #141414;
	  text-align: center;
	  text-transform: none;
	  -moz-transition: all 0.3s ease-in-out;
	  -o-transition: all 0.3s ease-in-out;
	  -webkit-transition: all 0.3s ease-in-out;
	  transition: all 0.3s ease-in-out;
	  margin: 0.3em 0.9375em 0.3em 0;
	}






@media only screen and (min-width: 81.25em) {
  .main-wrapper {
    padding-top: 9.1875rem;
  }
}

.section, .main-header, .page-top-bar, .footer-section {
  font-family: AtkinsonHyperLegible;
}


.text-link-additions {

  width: 100%;
  max-width: 18.75rem;
  background-color: #f5badc; 
  text-decoration: none;
  text-align: center;
}

.text-link-additions  {
	text-decoration: none;
  background-color: #f5badc;
  border-top: 1px solid white;
  border-bottom: 0;
  display: inline-block;
  padding: 0.4375rem 0.625rem;
  color: black;
  font-size: 0.9375rem;
  line-height: 1.4;
  font-weight: 300;
  margin-bottom: 0.625em;
}


.text-link-additions:hover, .text-link-additions:active {
  background-color: #d988b8;
}

	.footer-section {
  background-color: #000033;
  color: #fff;
  padding: 2.5rem 0.625rem 1.875rem;

}

.footer-section .uppercase {
  text-transform: uppercase;
  font-weight: 300;
}

.footer-section ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.footer-section p, .footer-section li {
  margin: 0;
  font-size: 0.875rem;
 // font-family: AtkinsonHyperLegible;
  font-weight: 500;
}

.footer-section li {
  padding: 0.3125em 0;
}

.footer-section .heading-style-6, .footer-section p, .footer-section a { 
  color: #fff;
  line-height: 1.3;
}

.footer-section a {
  display: inline-block;
  border: 0;
}

.footer-section a:hover, .footer-section a:focus, .footer-section a:active {
	  color: #000000;
	  line-height: 1.3;
}

.footer-section .heading-style-6 {
  font-size: 0.9375rem;
  margin-bottom: 1.25rem;
  margin-top: 0;
  cursor: default;
}

.footer-section .heading-style-6.active {
  color: #faf2f8;
}

.footer-section .search-item .search-form {
  margin-bottom: 1.25rem;
}

.footer-section .search-item .search-form .search-field {
  max-width: 16.875rem;
  margin-bottom: 0.625rem;
}

.footer-section .search-item .search-form .options {
  display: inline-block;
  margin-bottom: 0.3125rem;
  text-align: center;
}

.footer-section .search-item .search-form .options:not(:last-child) {
  margin-right: 0.3125rem;
}

.footer-section .main-footer-nav .footer-nav-block {
  margin-bottom: 1.25em;
  padding-left: 1.25rem;
  border-left: 0.0625rem solid #fff;
}

.footer-section .main-footer-nav .footer-nav-block ul li {
  margin-bottom: 0.3125rem;
}

.footer-section .main-footer-nav .footer-nav-block:hover .heading-style-6 {
//  color: #faf2f8;
}

.footer-section .secondary-footer-nav #copyright {
  margin: 0.875rem 0;
  font-size: 0.8125rem;
}

.footer-section .secondary-footer-nav .social {
  text-align: right;
}

.footer-section .secondary-footer-nav .social li {

  font-size: 1.75rem;
  min-width: 2.5rem;
  position: relative;
  display: inline-block;
  padding: 0.3125rem 0.0625rem;
  text-align: center;
  margin-right: 0.125rem;
//  border: 0.0625rem solid #7d7d7d;
}



.footer-section .secondary-footer-nav .social li:hover, .footer-section .secondary-footer-nav .social li:focus, .footer-section .secondary-footer-nav .social li:active {
  border-color: #faf2f8;
}

.footer-section .secondary-footer-nav .social li:hover > a, .footer-section .secondary-footer-nav .social li:hover > button, .footer-section .secondary-footer-nav .social li:focus > a, .footer-section .secondary-footer-nav .social li:focus > button, .footer-section .secondary-footer-nav .social li:active > a, .footer-section .secondary-footer-nav .social li:active > button {
  color: #faf2f8;
}

.footer-section .secondary-footer-nav .social li.share {
  border-color: transparent;
}

.footer-section .secondary-footer-nav .social li button {
  padding: 0;
  margin: 0;
  background-color: transparent;
  height: 100%;
  width: 100%;
  font-size: 90%;
}

.footer-section .secondary-footer-nav .social li button.active {
  color: #faf2f8;
}

.footer-section .secondary-footer-nav .share-popup {
  position: absolute;
  bottom: 105%;
  right: 0;
  min-width: 11.25rem;
  padding: 0.625rem;
  padding-top: 1.5625rem;
  visibility: hidden;
  opacity: 0;
  background-color: #323232;
}

.footer-section .secondary-footer-nav .share-popup ul {
  margin: 0.625rem 0;
  overflow: hidden;
}

.footer-section .secondary-footer-nav .share-popup ul li {
  text-align: center;
  float: left;
  margin: 0.3125rem;
}

.footer-section .secondary-footer-nav .share-popup ul li a {
  cursor: pointer;
}

.footer-section .secondary-footer-nav .share-popup .close-popup {
  padding: 0.625rem;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  font-size: 0.9375rem;
  color: #fff;
}

.footer-section .secondary-footer-nav .share-popup .close-popup:hover, .footer-section .secondary-footer-nav .share-popup .close-popup:focus, .footer-section .secondary-footer-nav .share-popup .close-popup:active {
  color: #faf2f8;
}

.footer-section .secondary-footer-nav .share-popup p a, .footer-section .secondary-footer-nav .share-popup p button {
  color: #faf2f8;
}

.footer-section .secondary-footer-nav .share-popup p a:hover, .footer-section .secondary-footer-nav .share-popup p a:focus, .footer-section .secondary-footer-nav .share-popup p a:active, .footer-section .secondary-footer-nav .share-popup p button:hover, .footer-section .secondary-footer-nav .share-popup p button:focus, .footer-section .secondary-footer-nav .share-popup p button:active {
  color: #bb5b02;
}

.footer-section .secondary-footer-nav .share-popup.show {
  visibility: visible;
  opacity: 1;
}
/*
@media only screen and (max-width: 48em) {
  .footer-section .secondary-footer-nav #copyright, .footer-section .secondary-footer-nav .social {
    text-align: center;
  }
  .footer-section .secondary-footer-nav #copyright {
    margin-bottom: 0.9375rem;
  }
}
*/

	@media only screen and (max-width: 48em) {	  
	  .social {
		display: flex;
		justify-content: center;
	  }
	  .footer-section .secondary-footer-nav #copyright {
	    margin-bottom: 0.9375rem;
	  }
	}


@media only screen and (max-width: 37.5625em) {
  .footer-section .main-footer-nav .footer-nav-block {
    width: 100%;
  }
}

@media only screen and (max-width: 37.5em) {
  .footer-section .main-footer-nav .footer-nav-block {
    text-align: center;
    padding: 0;
    border: 0;
  }
  .footer-section .main-footer-nav .footer-nav-block .heading-style-6 {
    margin-bottom: 0;
  }
  .footer-section .main-footer-nav .footer-nav-block .heading-style-6.active {
    color: #faf2f8;
  }
  .footer-section .main-footer-nav .footer-nav-block ul {
    margin-top: 0.625rem;
  }
  .footer-section .main-footer-nav .footer-nav-block ul li {
    font-weight: 400;
  }
}

@media only screen and (min-width: 37.5em) {
  .footer-section .main-footer-nav {
    min-height: 100%;
  }
  .footer-section .main-footer-nav .footer-nav-block ul {
    display: block;
  }
}

@media only screen and (min-width: 48em) {
  .footer-section .main-footer-nav .footer-nav-block.large-2 {
    width: 20%;
  }
}