@layer defaults {
    html {
        scroll-behavior: smooth
    }

    * {
        box-sizing: border-box;
        margin: 0
    }

    ul, ol {
        padding: 0
    }

    iframe {
        border: none
    }

    button {
        background: transparent;
        border: none
    }

    html:focus-within {
        scroll-behavior: smooth
    }

    body {
        min-height: 100vh;
        line-height: 1.5
    }

    [id].jumplink {
        scroll-margin-top: 1.5rem
    }

    ul, ol {
        list-style: none
    }

    a[class] {
        text-decoration: none
    }

    a:not([class]) {
        text-decoration-skip-ink: auto;
        text-underline-offset: 1px
    }

    img, picture, video, svg {
        max-width: 100%;
        display: block
    }

    :where(img[width][height], video[width][height], svg[width][height]) {
        height: auto
    }

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

    img:not([alt]) {
        filter: blur(10px)
    }

    @media(prefers-reduced-motion: reduce) {
        html:focus-within {
            scroll-behavior: auto
        }

        *, :after, :before {
            animation-duration: 0ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: .01ms !important;
            scroll-behavior: auto !important
        }
    }
}

@layer defaults {
    :where(html) {
        --sticky-nav-height-mob: 62px;
        --sticky-nav-height: 109px;
        --font-family: "Poppins", sans-serif;
        --font-weight-1: 100;
        --font-weight-2: 200;
        --font-weight-3: 300;
        --font-weight-4: 400;
        --font-weight-5: 500;
        --font-weight-6: 600;
        --font-weight-7: 700;
        --font-weight-8: 800;
        --font-weight-9: 900;
        --text-italic: italic;
        --font-weight-normal: var(--font-weight-4);
        --font-weight-medium: var(--font-weight-5);
        --font-weight-semibold: var(--font-weight-6);
        --font-weight-bold: var(--font-weight-7);
        --font-letterspacing-0: -.05em;
        --font-letterspacing-1: .025em;
        --font-letterspacing-2: .050em;
        --font-letterspacing-3: .08em;
        --font-letterspacing-4: .150em;
        --font-letterspacing-5: .500em;
        --font-letterspacing-6: .750em;
        --font-letterspacing-7: 1em;
        --size-000: -.5rem;
        --size-00: -.25rem;
        --size-0: 0rem;
        --size-1: .25rem;
        --size-2: .5rem;
        --size-3: 1rem;
        --size-4: 1.25rem;
        --size-5: 1.5rem;
        --size-6: 1.75rem;
        --size-7: 2rem;
        --size-8: 3rem;
        --size-9: 4rem;
        --size-10: 5rem;
        --size-11: 7.5rem;
        --size-12: 10rem;
        --size-13: 15rem;
        --size-14: 20rem;
        --size-15: 30rem;
        --size-fluid-0: clamp(.25rem, .75vw, .75rem);
        --size-fluid-1: clamp(.5rem, 1vw, 1rem);
        --size-fluid-2: clamp(1rem, 2vw, 1.5rem);
        --size-fluid-3: clamp(1.5625rem, 1.1561rem + 1.7341vw, 2.5rem);
        --size-fluid-4: clamp(2rem, 4vw, 3rem);
        --size-fluid-5: clamp(4rem, 4.5vw, 5rem);
        --size-fluid-6: clamp(4rem, 7vw, 7.5rem);
        --size-fluid-7: clamp(6rem, 10vw, 10rem);
        --size-fluid-8: clamp(8rem, 20vw, 15rem);
        --size-fluid-9: clamp(10rem, 30vw, 20rem);
        --size-fluid-10: clamp(14rem, 40vw, 30rem);
        --size-fluid-section: clamp(4rem, 8vw, 9rem);
        --size-content-1: 15ch;
        --size-content-2: 20ch;
        --size-content-3: 40ch;
        --size-content-4: 50ch;
        --size-content-5: 60ch;
        --size-content-6: 72ch;
        --size-content-7: 80ch;
        --text-fluid-10: clamp(3rem, 2.1329rem + 3.6994vw, 5rem);
        --text-fluid-9: clamp(3rem, 2.5394rem + 1.9653vw, 4.0625rem);
        --text-fluid-8: clamp(1.75rem, 1.1539rem + 2.5434vw, 3.125rem);
        --text-fluid-7: clamp(1.375rem, 0.8331rem + 2.3121vi, 2.625rem);
        --text-fluid-6: clamp(1.375rem, 0.9957rem + 1.6185vw, 2.25rem);
        --text-fluid-55: clamp(1.375rem, 1.2124rem + 0.6936vw, 1.75rem);
        --text-fluid-5: clamp(1.125rem, 0.9624rem + 0.6936vw, 1.5rem);
        --text-fluid-4: clamp(1.125rem, 1.0166rem + 0.4624vi, 1.375rem);
        --text-fluid-3: clamp(1rem, 0.8374rem + 0.6936vi, 1.375rem);
        --text-fluid-2: clamp(1.125rem, 1.0708rem + 0.2312vi, 1.25rem);
        --text-fluid-1: clamp(1rem, 0.8916rem + 0.4624vi, 1.25rem);
        --text-fluid-0: clamp(1rem, 0.9458rem + 0.2312vi, 1.125rem);
        --text-fluid-00: clamp(0.875rem, 0.7305rem + 0.6163vw, 1.125rem);
        --text-fluid-000: clamp(0.875rem, 0.8208rem + 0.2312vw, 1rem);
        --text-11: 0.688rem;
        --text-12: 0.75rem;
        --text-13: 0.813rem;
        --text-14: 0.875rem;
        --text-15: 0.9375rem;
        --text-16: 1rem;
        --text-17: 1.063rem;
        --text-18: 1.125rem;
        --text-19: 1.188rem;
        --text-20: 1.25rem;
        --text-21: 1.313rem;
        --text-22: 1.375rem;
        --text-23: 1.438rem;
        --text-24: 1.5rem;
        --text-25: 1.563rem;
        --text-26: 1.625rem;
        --text-27: 1.688rem;
        --text-28: 1.75rem;
        --text-29: 1.813rem;
        --text-30: 1.875rem;
        --radius-fluid: clamp(0.625rem, 0.2639rem + 1.5408vw, 1.25rem);
        --radius-1: 3px;
        --radius-2: 8px;
        --radius-3: 10px;
        --radius-4: 20px;
        --radius-5: 30px;
        --radius-round: 100vmax;
        --transition-1: all .3s ease;
        --transition-2: color .3s ease, border-color .3s ease, background-color .3s ease;
        --transition-bezier: cubic-bezier(0.63, 0.06, 0.11, 1.32);
        --transition-bezier-2: cubic-bezier(0.16, 0.53, 0.31, 0.94);
        --lineheight-0: .8;
        --lineheight-1: 1;
        --lineheight-2: 1.2;
        --lineheight-3: 1.3;
        --lineheight-4: 1.4;
        --lineheight-5: 1.5;
        --lineheight-6: 1.6;
        --lineheight-7: 1.7;
        --ratio-square: 1;
        --ratio-landscape: 4/3;
        --ratio-landscape-2: 6/5;
        --ratio-portrait: 3/4;
        --ratio-widescreen: 16/9;
        --ratio-ultrawide: 18/5;
        --ratio-golden: 1.6180/1;
        --backdrop-blur-1: blur(8px);
        --shadow: 0 5px 15px hsl(210 0% 0% / 5%);
        --white: hsl(0 0% 100%);
        --navy: hsl(200, 86%, 14%);
        --purple: hsl(243, 94%, 67%);
        --turquoise: hsl(183, 100%, 34%);
        --dark-teal: hsl(183, 100%, 34%);
        --aqua: hsl(176, 65%, 55%);
        --aqua-2: hsl(175, 66%, 89%);
        --aqua-3: hsl(183, 53%, 93%);
        --pink: hsl(337, 100%, 63%);
        --light-pink: hsl(294, 76%, 83%);
        --light-pink-2: hsl(293, 69%, 95%);
        --light-pink-3: hsl(293, 69%, 97%);
        --oat: hsl(38, 81%, 92%);
        --oat-2: hsl(45, 62%, 95%);
        --oat-3: rgb(253, 251, 247);
        --dark-grey: hsl(0, 0%, 28%);
        --medium-grey: hsl(0, 0%, 46%);
        --light-grey: hsl(0, 0%, 82%);
        --red: hsl(358, 85%, 49%);
        --green: hsl(115, 91%, 28%);
        --black: hsl(210 0% 0%);
        --accent: var(--purple)
    }

    @supports(color: color(display-p3 1 1 1)) {
        :where(html) {
            --navy: oklch(28.3% 0.067805 228.9);
            --purple: oklch(58.9% 0.235485 278.6);
            --turquoise: oklch(64.6% 0.147193 198.9);
            --dark-teal: oklch(64.6% 0.147 198.9);
            --aqua: oklch(78.9% 0.165 187.5);
            --aqua-2: oklch(93.9% 0.051 190.1);
            --aqua-3: oklch(96% 0.023 199.2);
            --pink: oklch(69.5% 0.268 3.8);
            --light-pink: oklch(85.1% 0.125 326.3);
            --light-pink-2: oklch(95.5% 0.033 325.9);
            --light-pink-3: oklch(97.7% 0.017 325.8);
            --oat: oklch(95.4% 0.036 77.6);
            --oat-2: oklch(97.3% 0.018 86.1);
            --oat-3: oklch(98.8% 0.008 86);
            --red: oklch(60.7% 0.272 27.5);
            --green: oklch(53.1% 0.224 145.3);
            --slate: oklch(56.6% 0 0)
        }
    }
}

@layer defaults, composition, blocks, utilities;

@layer defaults {
    html {
        font-family: var(--font-family)
    }

    body {
        font-size: var(--text-16);
        font-style: normal;
        font-weight: var(--font-weight-4);
        -webkit-font-smoothing: antialiased;
        overflow-x: clip;
        color: var(--navy);
        background-color: var(--oat-3);
        -webkit-text-size-adjust: none
    }

    strong, .bold, button, .btn {
        font-weight: var(--font-weight-7, 700)
    }

    em, i {
        font-style: var(--text-body-italic, italic)
    }

    p {
        text-wrap: pretty
    }

    .skip-link {
        position: absolute !important;
        top: 1.25rem;
        left: 1.25rem;
        z-index: 50 !important;
        border: 0;
        clip: rect(0 0 0 0);
        height: auto;
        margin: 0;
        overflow: hidden;
        padding: 0;
        width: 1px;
        white-space: nowrap
    }

        .skip-link:focus {
            clip: auto;
            width: auto
        }

            .skip-link:focus:not(:focus-visible) {
                display: none
            }

        .skip-link:focus-visible {
            clip: auto;
            width: auto
        }

    .transition, button, .btn, a, input, select, textarea, details, details summary::after {
        transition: var(--transition-1)
    }

    button, .btn {
        cursor: pointer
    }

    a:not([class]), .text-link {
        --hover-mix-colour: #000;
        font-weight: var(--font-weight-bold);
        color: var(--accent);
        word-break: break-word
    }

        a:not([class]):hover, .text-link:hover {
            color: color-mix(in srgb, var(--accent), var(--hover-mix-colour) var(--mix-percent, 20%))
        }

    :is(.bg-navy,.bg-aqua) a:not([class]), :is(.bg-navy,.bg-aqua) .text-link {
        --hover-mix-colour: transparent;
        --accent: var(--navy)
    }

    .accent {
        color: var(--accent)
    }

    a, button, input, textarea, summary, select, [data-radio-type=button] {
        --outline-color: currentColor
    }

    :is(a:not(.btn),button:not(.btn),input:not(.btn),select,textarea,summary,[data-radio-type=button]) {
        --outline-size: max(2px, 0.08em)
    }

    :is(a:not(.btn),button:not(.btn),input:not(.btn),select,textarea,summary):focus {
        outline: var(--outline-size) solid var(--outline-color);
        outline-offset: var(--outline-size)
    }

    :is([data-radio-type=button] input):focus + label {
        outline: var(--outline-size) solid var(--outline-color);
        outline-offset: var(--outline-size)
    }

    :is(a:not(.btn),button:not(.btn),input:not(.btn),select,textarea,summary):focus-visible {
        outline: var(--outline-size) solid var(--outline-color);
        outline-offset: var(--outline-size)
    }

    :is(a:not(.btn),button:not(.btn),input:not(.btn),textarea,summary):focus:not(:focus-visible) {
        outline: none
    }

    :is([data-radio-type=button] input):focus:not(:focus-visible) + label {
        outline: none
    }

    .btn:is(:focus,:focus-visible) {
        outline: none
    }

    [data-width=readable] {
        max-width: var(--max-width, 101ch)
    }

    .bodycopy {
        line-height: 1.7
    }

        .bodycopy[data-width=readable], .bodycopy p, .bodycopy li {
            max-width: var(--max-width, 101ch)
        }

        .bodycopy :is(h1,h2,h3,h4,h5,h6):not(:first-child) {
            margin-top: 2rem
        }

        .bodycopy :is(h2,h3,h4,h5,h6):not([class]):has(+p) {
            margin-bottom: -0.5rem
        }

        .bodycopy > * + * {
            margin-top: 1.5rem
        }

        .bodycopy > :is(:first-child) {
            margin-top: 0
        }

        .bodycopy p:empty {
            display: none
        }

        .bodycopy table, .responsive-table {
            border-collapse: collapse;
            width: 100%;
            text-align: left
        }

            .bodycopy table thead, .responsive-table thead {
                color: var(--white);
                position: sticky;
                top: 0;
                z-index: 2
            }

            .bodycopy table th, .responsive-table th {
                background-color: var(--navy)
            }

            .bodycopy table th, .bodycopy table td, .responsive-table th, .responsive-table td {
                padding: var(--size-3) var(--size-3)
            }

            .bodycopy table :is(th,td):not(:first-child), .responsive-table :is(th,td):not(:first-child) {
                --border-colour: var(--white);
                border-left: 2px var(--border-colour) solid
            }

            .bodycopy table tr:nth-child(even), .responsive-table tr:nth-child(even) {
                background-color: var(--oat)
            }

    article > :is(h2,h3,h4,h5,h6) {
        font-weight: var(--font-weight-semibold)
    }

    article.bodycopy img {
        width: 100%
    }

    .article-copy [id] {
        scroll-margin-top: var(--scroll-offset, 4rem)
    }
}

@layer defaults {
    h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
        --size-modifier: 1;
        font-weight: var(--font-weight-7);
        line-height: var(--lineheight-3)
    }

    h1, .h1 {
        font-size: calc(var(--size-modifier)*var(--text-fluid-9))
    }

    h2, .h2 {
        font-size: calc(var(--size-modifier)*var(--text-fluid-6))
    }

    h3, .h3 {
        font-size: calc(var(--size-modifier)*var(--text-fluid-5))
    }

    h4, .h4 {
        font-size: calc(var(--size-modifier)*var(--text-fluid-2))
    }

    h5, .h5 {
        font-size: calc(var(--size-modifier)*var(--text-fluid-0))
    }

    h6, .h6 {
        font-size: calc(var(--size-modifier)*var(--text-fluid-0))
    }

    .display-1, .display-2, .display-3, .display-4 {
        line-height: var(--lineheight-2)
    }

    .display-1 {
        font-size: calc(var(--size-modifier)*var(--text-fluid-10))
    }

    .display-2 {
        font-size: calc(var(--size-modifier)*var(--text-fluid-9))
    }

    .display-3 {
        font-size: calc(var(--size-modifier)*var(--text-fluid-8))
    }

    .display-4 {
        font-size: calc(var(--size-modifier)*var(--text-fluid-7))
    }

    @media screen and (max-width: 340px) {
        h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
            --size-modifier: .75
        }
    }
}

@layer utilities {
    .p-0 {
        padding: 0
    }

    .pt-0 {
        padding-top: 0
    }

    .pb-0 {
        padding-bottom: 0
    }

    .pl-0 {
        padding-left: 0
    }

    .pr-0 {
        padding-right: 0
    }

    .px-0 {
        padding-inline: 0
    }

    .py-0 {
        padding-block: 0
    }

    .p-fluid {
        padding: var(--size-fluid-2)
    }

    .p-fluid-sm {
        padding: var(--size-fluid-1)
    }

    .p-fluid-md {
        padding: var(--size-fluid-3)
    }

    .p-fluid-lg {
        padding: var(--size-fluid-4)
    }

    .p-fluid-xl {
        padding: var(--size-fluid-5)
    }

    .pt-fluid {
        padding-top: var(--size-fluid-2)
    }

    .pt-fluid-sm {
        padding-top: var(--size-fluid-1)
    }

    .pt-fluid-md {
        padding-top: var(--size-fluid-3)
    }

    .pt-fluid-lg {
        padding-top: var(--size-fluid-4)
    }

    .pt-fluid-xl {
        padding-top: var(--size-fluid-5)
    }

    .pt-fluid-xxl {
        padding-top: var(--size-fluid-section)
    }

    .pb-fluid {
        padding-bottom: var(--size-fluid-2)
    }

    .pb-fluid-sm {
        padding-bottom: var(--size-fluid-1)
    }

    .pb-fluid-md {
        padding-bottom: var(--size-fluid-3)
    }

    .pb-fluid-lg {
        padding-bottom: var(--size-fluid-4)
    }

    .pb-fluid-xl {
        padding-bottom: var(--size-fluid-5)
    }

    .pb-fluid-xxl {
        padding-bottom: var(--size-fluid-section)
    }

    .pl-fluid {
        padding-left: var(--size-fluid-2)
    }

    .pl-fluid-sm {
        padding-left: var(--size-fluid-1)
    }

    .pl-fluid-md {
        padding-left: var(--size-fluid-3)
    }

    .pl-fluid-lg {
        padding-left: var(--size-fluid-4)
    }

    .pl-fluid-xl {
        padding-left: var(--size-fluid-5)
    }

    .pr-fluid {
        padding-right: var(--size-fluid-2)
    }

    .pr-fluid-sm {
        padding-right: var(--size-fluid-1)
    }

    .pr-fluid-md {
        padding-right: var(--size-fluid-3)
    }

    .pr-fluid-lg {
        padding-right: var(--size-fluid-4)
    }

    .pr-fluid-xl {
        padding-right: var(--size-fluid-5)
    }

    .px-fluid {
        padding-left: var(--size-fluid-2);
        padding-right: var(--size-fluid-2)
    }

    .px-fluid-sm {
        padding-left: var(--size-fluid-1);
        padding-right: var(--size-fluid-1)
    }

    .px-fluid-md {
        padding-left: var(--size-fluid-3);
        padding-right: var(--size-fluid-3)
    }

    .px-fluid-lg {
        padding-left: var(--size-fluid-4);
        padding-right: var(--size-fluid-4)
    }

    .px-fluid-xl {
        padding-left: var(--size-fluid-5);
        padding-right: var(--size-fluid-5)
    }

    .py-fluid {
        padding-top: var(--size-fluid-2);
        padding-bottom: var(--size-fluid-2)
    }

    .py-fluid-sm {
        padding-top: var(--size-fluid-1);
        padding-bottom: var(--size-fluid-1)
    }

    .py-fluid-md {
        padding-top: var(--size-fluid-3);
        padding-bottom: var(--size-fluid-3)
    }

    .py-fluid-lg {
        padding-top: var(--size-fluid-4);
        padding-bottom: var(--size-fluid-4)
    }

    .py-fluid-xl {
        padding-top: var(--size-fluid-5);
        padding-bottom: var(--size-fluid-5)
    }

    .py-fluid-xxl {
        padding-top: var(--size-fluid-section);
        padding-bottom: var(--size-fluid-section)
    }

    .p-1 {
        padding: var(--size-1)
    }

    .p-2 {
        padding: var(--size-2)
    }

    .p-3 {
        padding: var(--size-3)
    }

    .p-4 {
        padding: var(--size-4)
    }

    .p-5 {
        padding: var(--size-5)
    }

    .p-6 {
        padding: var(--size-6)
    }

    .p-7 {
        padding: var(--size-7)
    }

    .p-8 {
        padding: var(--size-8)
    }

    .p-9 {
        padding: var(--size-9)
    }

    .pt-1 {
        padding-top: var(--size-1)
    }

    .pt-2 {
        padding-top: var(--size-2)
    }

    .pt-3 {
        padding-top: var(--size-3)
    }

    .pt-4 {
        padding-top: var(--size-4)
    }

    .pt-5 {
        padding-top: var(--size-5)
    }

    .pt-6 {
        padding-top: var(--size-6)
    }

    .pt-7 {
        padding-top: var(--size-7)
    }

    .pt-8 {
        padding-top: var(--size-8)
    }

    .pt-9 {
        padding-top: var(--size-9)
    }

    .pb-1 {
        padding-bottom: var(--size-1)
    }

    .pb-2 {
        padding-bottom: var(--size-2)
    }

    .pb-3 {
        padding-bottom: var(--size-3)
    }

    .pb-4 {
        padding-bottom: var(--size-4)
    }

    .pb-5 {
        padding-bottom: var(--size-5)
    }

    .pb-6 {
        padding-bottom: var(--size-6)
    }

    .pb-7 {
        padding-bottom: var(--size-7)
    }

    .pb-8 {
        padding-bottom: var(--size-8)
    }

    .pb-9 {
        padding-bottom: var(--size-9)
    }

    .pl-1 {
        padding-left: var(--size-1)
    }

    .pl-2 {
        padding-left: var(--size-2)
    }

    .pl-3 {
        padding-left: var(--size-3)
    }

    .pl-4 {
        padding-left: var(--size-4)
    }

    .pl-5 {
        padding-left: var(--size-5)
    }

    .pl-6 {
        padding-left: var(--size-6)
    }

    .pl-7 {
        padding-left: var(--size-7)
    }

    .pl-8 {
        padding-left: var(--size-8)
    }

    .pl-9 {
        padding-left: var(--size-9)
    }

    .pr-1 {
        padding-right: var(--size-1)
    }

    .pr-2 {
        padding-right: var(--size-2)
    }

    .pr-3 {
        padding-right: var(--size-3)
    }

    .pr-4 {
        padding-right: var(--size-4)
    }

    .pr-5 {
        padding-right: var(--size-5)
    }

    .pr-6 {
        padding-right: var(--size-6)
    }

    .pr-7 {
        padding-right: var(--size-7)
    }

    .pr-8 {
        padding-right: var(--size-8)
    }

    .pr-9 {
        padding-right: var(--size-9)
    }

    .px-1 {
        padding-inline: var(--size-1)
    }

    .px-2 {
        padding-inline: var(--size-2)
    }

    .px-3 {
        padding-inline: var(--size-3)
    }

    .px-4 {
        padding-inline: var(--size-4)
    }

    .px-5 {
        padding-inline: var(--size-5)
    }

    .px-6 {
        padding-inline: var(--size-6)
    }

    .px-7 {
        padding-inline: var(--size-7)
    }

    .px-8 {
        padding-inline: var(--size-8)
    }

    .px-9 {
        padding-inline: var(--size-9)
    }

    .py-1 {
        padding-block: var(--size-1)
    }

    .py-2 {
        padding-block: var(--size-2)
    }

    .py-3 {
        padding-block: var(--size-3)
    }

    .py-4 {
        padding-block: var(--size-4)
    }

    .py-5 {
        padding-block: var(--size-5)
    }

    .py-6 {
        padding-block: var(--size-6)
    }

    .py-7 {
        padding-block: var(--size-7)
    }

    .py-8 {
        padding-block: var(--size-8)
    }

    .py-9 {
        padding-block: var(--size-9)
    }
}

@layer utilities {
    .m-0 {
        margin: 0
    }

    .mt-0 {
        margin-top: 0
    }

    .mb-0 {
        margin-bottom: 0
    }

    .ml-0 {
        margin-left: 0
    }

    .mr-0 {
        margin-right: 0
    }

    .m-auto {
        margin: auto
    }

    .ml-auto {
        margin-left: auto
    }

    .mr-auto {
        margin-right: auto
    }

    .mt-auto {
        margin-top: auto
    }

    .mb-auto {
        margin-bottom: auto
    }

    .mx-auto {
        margin-left: auto;
        margin-right: auto
    }

    .my-auto {
        margin-top: auto;
        margin-bottom: auto
    }

    .m-fluid {
        margin: var(--size-fluid-2)
    }

    .m-fluid-sm {
        margin: var(--size-fluid-1)
    }

    .m-fluid-md {
        margin: var(--size-fluid-3)
    }

    .m-fluid-lg {
        margin: var(--size-fluid-4)
    }

    .m-fluid-xl {
        margin: var(--size-fluid-5)
    }

    .mt-fluid {
        margin-top: var(--size-fluid-2)
    }

    .mt-fluid-sm {
        margin-top: var(--size-fluid-1)
    }

    .mt-fluid-md {
        margin-top: var(--size-fluid-3)
    }

    .mt-fluid-lg {
        margin-top: var(--size-fluid-4)
    }

    .mt-fluid-xl {
        margin-top: var(--size-fluid-5)
    }

    .mt-fluid-xxl {
        margin-top: var(--size-fluid-section)
    }

    .mb-fluid {
        margin-bottom: var(--size-fluid-2)
    }

    .mb-fluid-sm {
        margin-bottom: var(--size-fluid-1)
    }

    .mb-fluid-md {
        margin-bottom: var(--size-fluid-3)
    }

    .mb-fluid-lg {
        margin-bottom: var(--size-fluid-4)
    }

    .mb-fluid-xl {
        margin-bottom: var(--size-fluid-5)
    }

    .mb-fluid-xxl {
        margin-bottom: var(--size-fluid-section)
    }

    .ml-fluid {
        margin-left: var(--size-fluid-2)
    }

    .ml-fluid-sm {
        margin-left: var(--size-fluid-1)
    }

    .ml-fluid-md {
        margin-left: var(--size-fluid-3)
    }

    .ml-fluid-lg {
        margin-left: var(--size-fluid-4)
    }

    .ml-fluid-xl {
        margin-left: var(--size-fluid-5)
    }

    .mr-fluid {
        margin-right: var(--size-fluid-2)
    }

    .mr-fluid-sm {
        margin-right: var(--size-fluid-1)
    }

    .mr-fluid-md {
        margin-right: var(--size-fluid-3)
    }

    .mr-fluid-lg {
        margin-right: var(--size-fluid-4)
    }

    .mr-fluid-xl {
        margin-right: var(--size-fluid-5)
    }

    .mx-fluid {
        margin-left: var(--size-fluid-2);
        margin-right: var(--size-fluid-2)
    }

    .mx-fluid-sm {
        margin-left: var(--size-fluid-1);
        margin-right: var(--size-fluid-1)
    }

    .mx-fluid-md {
        margin-left: var(--size-fluid-3);
        margin-right: var(--size-fluid-3)
    }

    .mx-fluid-lg {
        margin-left: var(--size-fluid-4);
        margin-right: var(--size-fluid-4)
    }

    .mx-fluid-xl {
        margin-left: var(--size-fluid-5);
        margin-right: var(--size-fluid-5)
    }

    .my-fluid {
        margin-top: var(--size-fluid-2);
        margin-bottom: var(--size-fluid-2)
    }

    .my-fluid-sm {
        margin-top: var(--size-fluid-1);
        margin-bottom: var(--size-fluid-1)
    }

    .my-fluid-md {
        margin-top: var(--size-fluid-3);
        margin-bottom: var(--size-fluid-3)
    }

    .my-fluid-lg {
        margin-top: var(--size-fluid-4);
        margin-bottom: var(--size-fluid-4)
    }

    .my-fluid-xl {
        margin-top: var(--size-fluid-5);
        margin-bottom: var(--size-fluid-5)
    }

    .my-fluid-xxl {
        margin-top: var(--size-fluid-section);
        margin-bottom: var(--size-fluid-section)
    }

    .m-1 {
        margin: var(--size-1)
    }

    .m-2 {
        margin: var(--size-2)
    }

    .m-3 {
        margin: var(--size-3)
    }

    .m-4 {
        margin: var(--size-4)
    }

    .m-5 {
        margin: var(--size-5)
    }

    .m-6 {
        margin: var(--size-6)
    }

    .m-7 {
        margin: var(--size-7)
    }

    .m-8 {
        margin: var(--size-8)
    }

    .m-9 {
        margin: var(--size-9)
    }

    .mt-1 {
        margin-top: var(--size-1)
    }

    .mt-2 {
        margin-top: var(--size-2)
    }

    .mt-3 {
        margin-top: var(--size-3)
    }

    .mt-4 {
        margin-top: var(--size-4)
    }

    .mt-5 {
        margin-top: var(--size-5)
    }

    .mt-6 {
        margin-top: var(--size-6)
    }

    .mt-7 {
        margin-top: var(--size-7)
    }

    .mt-8 {
        margin-top: var(--size-8)
    }

    .mt-9 {
        margin-top: var(--size-9)
    }

    .mb-1 {
        margin-bottom: var(--size-1)
    }

    .mb-2 {
        margin-bottom: var(--size-2)
    }

    .mb-3 {
        margin-bottom: var(--size-3)
    }

    .mb-4 {
        margin-bottom: var(--size-4)
    }

    .mb-5 {
        margin-bottom: var(--size-5)
    }

    .mb-6 {
        margin-bottom: var(--size-6)
    }

    .mb-7 {
        margin-bottom: var(--size-7)
    }

    .mb-8 {
        margin-bottom: var(--size-8)
    }

    .mb-9 {
        margin-bottom: var(--size-9)
    }

    .ml-1 {
        margin-left: var(--size-1)
    }

    .ml-2 {
        margin-left: var(--size-2)
    }

    .ml-3 {
        margin-left: var(--size-3)
    }

    .ml-4 {
        margin-left: var(--size-4)
    }

    .ml-5 {
        margin-left: var(--size-5)
    }

    .ml-6 {
        margin-left: var(--size-6)
    }

    .ml-7 {
        margin-left: var(--size-7)
    }

    .ml-8 {
        margin-left: var(--size-8)
    }

    .ml-9 {
        margin-left: var(--size-9)
    }

    .mr-1 {
        margin-right: var(--size-1)
    }

    .mr-2 {
        margin-right: var(--size-2)
    }

    .mr-3 {
        margin-right: var(--size-3)
    }

    .mr-4 {
        margin-right: var(--size-4)
    }

    .mr-5 {
        margin-right: var(--size-5)
    }

    .mr-6 {
        margin-right: var(--size-6)
    }

    .mr-7 {
        margin-right: var(--size-7)
    }

    .mr-8 {
        margin-right: var(--size-8)
    }

    .mr-9 {
        margin-right: var(--size-9)
    }

    .mx-1 {
        margin-inline: var(--size-1)
    }

    .mx-2 {
        margin-inline: var(--size-2)
    }

    .mx-3 {
        margin-inline: var(--size-3)
    }

    .mx-4 {
        margin-inline: var(--size-4)
    }

    .mx-5 {
        margin-inline: var(--size-5)
    }

    .mx-6 {
        margin-inline: var(--size-6)
    }

    .mx-7 {
        margin-inline: var(--size-7)
    }

    .mx-8 {
        margin-inline: var(--size-8)
    }

    .mx-9 {
        margin-inline: var(--size-9)
    }

    .my-1 {
        margin-block: var(--size-1)
    }

    .my-2 {
        margin-block: var(--size-2)
    }

    .my-3 {
        margin-block: var(--size-3)
    }

    .my-4 {
        margin-block: var(--size-4)
    }

    .my-5 {
        margin-block: var(--size-5)
    }

    .my-6 {
        margin-block: var(--size-6)
    }

    .my-7 {
        margin-block: var(--size-7)
    }

    .my-8 {
        margin-block: var(--size-8)
    }

    .my-9 {
        margin-block: var(--size-9)
    }
}

@layer defaults {
    .flow > * + * {
        margin-top: var(--flow-space, 1.5rem)
    }

    .ktc-rich-text-wrapper .fr-element > * + * {
        margin-top: var(--flow-space, 1.5rem)
    }

    .flow-spacing-00 {
        --flow-space: var(--size-0)
    }

    .flow-spacing-0 {
        --flow-space: var(--size-2)
    }

    .flow-spacing-100 {
        --flow-space: var(--size-3)
    }

    .flow-spacing-200 {
        --flow-space: var(--size-6)
    }

    .flow-spacing-300 {
        --flow-space: var(--size-7)
    }

    .flow-spacing-400 {
        --flow-space: var(--size-8)
    }

    .flow-spacing-fluid {
        --flow-space: var(--size-fluid-2)
    }

    .flow-spacing-fluid-xs {
        --flow-space: var(--size-fluid-2)
    }

    .flow-spacing-fluid-sm {
        --flow-space: var(--size-fluid-1)
    }

    .flow-spacing-fluid-md {
        --flow-space: var(--size-fluid-3)
    }

    .flow-spacing-fluid-lg {
        --flow-space: var(--size-fluid-4)
    }

    .flow-spacing-fluid-xl {
        --flow-space: var(--size-fluid-5)
    }
}

@layer defaults {
    :where(html) {
        --card-sparkle: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="18" fill="none"><path fill="%23052E42" d="M2.992 13.282c-.25.102-.46.26-.626.475-.043.072-.101.132-.153.197-.03.024-.062.048-.094.07-.03.014-.06.026-.091.038a1.95 1.95 0 0 1-.13.017c-.021-.003-.043-.002-.064-.005a1.138 1.138 0 0 0-.57.048c-.194.034-.37.114-.526.24-.172.12-.301.274-.388.46a1.12 1.12 0 0 0-.2.55c-.032.381.039.794.289 1.097l.284.287c.215.165.457.265.726.301.098.016.196.025.296.026.216.002.437.012.653-.02.21-.031.42-.093.622-.152.095-.028.189-.063.278-.105.195-.09.384-.2.565-.315a1.92 1.92 0 0 0 .238-.178c.238-.21.482-.441.646-.718.133-.16.216-.338.251-.538.066-.184.083-.376.05-.573-.018-.2-.083-.38-.193-.542a1.132 1.132 0 0 0-.38-.456c-.318-.224-.716-.37-1.11-.301l-.373.097ZM5.247 4.904l-.1.377c-.032.26 0 .513.098.756.083.253.22.478.354.707.074.128.16.247.26.356.179.195.367.397.583.555.056.04.114.078.174.113.174.103.348.212.534.295.184.083.373.116.57.1a1.14 1.14 0 0 0 .564-.098c.192-.07.353-.18.483-.333.157-.131.273-.295.345-.491.13-.36.165-.776.002-1.134l-.192-.34a1.513 1.513 0 0 0-.538-.434c-.065-.041-.123-.092-.183-.14a1.918 1.918 0 0 1-.102-.134c-.02-.05-.048-.098-.066-.15a1.119 1.119 0 0 0-.333-.483 1.139 1.139 0 0 0-.491-.345 1.129 1.129 0 0 0-.57-.1 1.137 1.137 0 0 0-.564.098c-.36.163-.691.442-.828.825ZM16.128 2.852a1.132 1.132 0 0 0-.1.57c-.016.194.017.382.098.564.07.193.18.353.334.483.13.158.294.273.49.345.36.13.777.166 1.135.002l.339-.191c.22-.168.383-.379.489-.633l.468-1.64c.082-.183.116-.373.1-.57a1.136 1.136 0 0 0-.098-.564 1.12 1.12 0 0 0-.334-.483 1.139 1.139 0 0 0-.491-.345c-.36-.129-.776-.165-1.134-.002l-.34.192c-.219.167-.382.378-.488.633l-.468 1.64Z" style="fill:%23052E42;fill:color(display-p3 .0196 .1804 .2588);fill-opacity:1"/></svg>');
        --nav-arrow: url('data:image/svg+xml,<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.26595 16.8562V18.1582C7.26595 18.7602 7.75595 19.2642 8.37195 19.2642H22.274L17.486 23.8842C17.052 24.3042 17.038 25.0042 17.458 25.4382L18.354 26.3762C18.774 26.8102 19.474 26.8242 19.908 26.4042L28.266 18.3262C28.728 17.8782 28.728 17.1502 28.266 16.7022L19.922 8.63823C19.474 8.20423 18.76 8.21823 18.34 8.66623L17.472 9.56223C17.038 10.0102 17.052 10.7242 17.5 11.1582L22.274 15.7642H8.35795C7.75595 15.7642 7.25195 16.2542 7.25195 16.8702L7.26595 16.8562Z" fill="%23655EFA"/></svg>');
        --ui-chevron-icon-mask: url('data:image/svg+xml,<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.8595 9.54798L12.7135 8.66598C13.1475 8.21798 13.8615 8.20398 14.3095 8.63798L22.6535 16.702C23.1155 17.15 23.1155 17.878 22.6535 18.326L14.3095 26.39C13.8615 26.824 13.1475 26.81 12.7135 26.362L11.8595 25.48C11.4255 25.032 11.4395 24.318 11.8875 23.884L18.4675 17.528L11.8875 11.172C11.4395 10.738 11.4255 10.024 11.8595 9.57598V9.54798Z" fill="%23655EFA"/></svg>');
        --underline: url('data:image/svg+xml,<svg viewBox="0 0 480 13" fill="none" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M476.913 7.71943C382.367 0.916643 286.221 4.67935 191.437 3.4545C128.76 2.63499 66.0795 0.66109 3.44851 0.000197655C1.57074 -0.0174261 0.0263862 1.14571 0.000305986 2.60848C-0.0246403 4.07126 1.47892 5.26971 3.35556 5.28734C65.9798 5.94823 128.654 7.92213 191.323 8.74164C285.938 9.96649 381.902 6.19495 476.278 12.9889C478.149 13.1211 479.804 12.0549 479.986 10.6009C480.156 9.14697 478.773 7.86042 476.913 7.71943Z" fill="%23000000"/></svg>');
        --ui-play-button: url('data:image/svg+xml,<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.5013 22.5C18.0166 22.5 22.4987 18.014 22.4987 12.5025C22.4987 6.98978 18.0166 2.5 12.5013 2.5C6.98597 2.5 2.5 6.98724 2.5 12.4987C2.5 18.0102 6.98597 22.5 12.5013 22.5ZM10.275 8.79667C10.275 8.33033 10.7922 8.05378 11.1829 8.30801L16.7776 12.0002C17.1273 12.2321 17.1273 12.7431 16.7776 12.975L11.1842 16.6733C10.7972 16.93 10.2763 16.651 10.2763 16.1846L10.275 8.79667Z" fill="black"/></svg>');
        --ui-search-icon-mask: url('data:image/svg+xml,<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.5042 9.32812C12.918 9.32812 9.2002 13.046 9.2002 17.6321C9.2002 22.2183 12.918 25.9361 17.5042 25.9361C22.0904 25.9361 25.8082 22.2183 25.8082 17.6321C25.8082 13.046 22.0904 9.32812 17.5042 9.32812ZM5.2002 17.6321C5.2002 10.8368 10.7089 5.32812 17.5042 5.32812C24.2995 5.32812 29.8082 10.8368 29.8082 17.6321C29.8082 24.4274 24.2995 29.9361 17.5042 29.9361C10.7089 29.9361 5.2002 24.4274 5.2002 17.6321Z" fill="%23052E42" style="fill:%23052E42;fill:color(display-p3 0.0196 0.1804 0.2588);fill-opacity:1;"/><path fill-rule="evenodd" clip-rule="evenodd" d="M23.4813 23.3539C24.2623 22.5728 25.5287 22.5728 26.3097 23.3539L34.2137 31.2579C34.9948 32.0389 34.9948 33.3052 34.2137 34.0863C33.4327 34.8673 32.1663 34.8673 31.3853 34.0863L23.4813 26.1823C22.7002 25.4012 22.7002 24.1349 23.4813 23.3539Z" fill="%23052E42" style="fill:%23052E42;fill:color(display-p3 0.0196 0.1804 0.2588);fill-opacity:1;"/></svg>');
        --ui-check-icon-mask: url('data:image/svg+xml,<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M28.6495 13.8674L27.0979 12.3159C26.8921 12.1103 26.6131 11.9949 26.3222 11.9949C26.0313 11.9949 25.7523 12.1103 25.5464 12.3159L15.6621 22.2002L12.3947 18.9328C12.1889 18.7272 11.9099 18.6118 11.619 18.6118C11.3281 18.6118 11.0491 18.7272 10.8432 18.9328L9.29169 20.4843C9.08615 20.6902 8.9707 20.9692 8.9707 21.2601C8.9707 21.551 9.08615 21.83 9.29169 22.0358L13.3348 26.079C13.3348 26.079 13.3348 26.0809 13.3367 26.0809L14.8883 27.6324C15.0941 27.838 15.3731 27.9534 15.664 27.9534C15.9549 27.9534 16.2339 27.838 16.4398 27.6324L28.6514 15.4208C29.0775 14.9909 29.0775 14.2954 28.6495 13.8674V13.8674Z" fill="black" style="fill:black;fill-opacity:1;"/></svg>');
        --ui-cross-icon-mask: url('data:image/svg+xml,<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.3867 27.5156L11.4844 28.6133C12 29.1289 12.815 29.1289 13.3306 28.6133L20 21.9439L26.6694 28.6133C27.185 29.1289 28 29.1289 28.5156 28.6133L29.6133 27.5156C30.1289 27 30.1289 26.185 29.6133 25.6694L22.9439 19L29.6133 12.3306C30.1289 11.815 30.1289 11 29.6133 10.4844L28.5156 9.38669C28 8.8711 27.185 8.8711 26.6694 9.38669L20 16.0561L13.3306 9.38669C12.815 8.8711 12 8.8711 11.4844 9.38669L10.3867 10.4844C9.8711 11 9.8711 11.815 10.3867 12.3306L17.0561 19L10.3867 25.6694C9.8711 26.185 9.8711 27 10.3867 27.5156Z" fill="black" style="fill:black;fill-opacity:1;"/></svg>')
    }
}

@layer defaults {
    @view-transition {
        navigation: auto
    }

    a:not([class]), .text-link {
        --accent: var(--navy)
    }

        a:not([class]):hover, .text-link:hover {
            color: var(--purple)
        }

    .bodycopy :is(h1,h2,h3,h4,h5,h6):not(:first-child) {
        margin-top: var(--heading-spacing, 2rem)
    }

    .bodycopy[data-heading-spacing=lg] {
        --heading-spacing: var(--size-9)
    }

    .bodycopy blockquote {
        font-style: italic
    }

        .bodycopy blockquote p:first-of-type::before {
            content: open-quote
        }

        .bodycopy blockquote p:last-of-type::after {
            content: close-quote
        }
}

@layer defaults {
    :where(html) {
        --size-fluid-section: clamp(4rem, 8vw, 8rem)
    }
}

@layer composition {
    .benefit-chip-container {
        display: flex;
        gap: var(--size-4);
        flex-wrap: wrap
    }

    @media screen and (max-width: 767px) {
        .benefit-chip-container[data-mobile-background] {
            background-color: color-mix(in srgb, var(--white), transparent 40%);
            border-radius: var(--radius-4);
            padding: var(--size-3)
        }
    }
}

@media screen and (min-width: 1025px) {
    .hub-card-container::before {
        content: "";
        position: absolute;
        background: var(--bg-colour, var(--oat-3));
        width: 100vw;
        inset: -1rem calc(100% + 2px) 0 auto;
        z-index: 2
    }

    .hub-card-container .swiper {
        overflow: visible
    }

        .hub-card-container .swiper.generic:not(.swiper-initialized) .swiper-wrapper {
            gap: 35px
        }

            .hub-card-container .swiper.generic:not(.swiper-initialized) .swiper-wrapper .swiper-slide {
                width: calc(52.5% - 36px)
            }
}

@layer composition {
    .hub-grid-article-container {
        --col-gap: var(--size-fluid-4);
        --row-gap: var(--size-fluid-4);
        display: grid;
        grid-column-gap: var(--col-gap);
        grid-row-gap: var(--row-gap);
        max-width: var(--max-width, auto)
    }

        .hub-grid-article-container > * {
            display: flex
        }

    @media screen and (min-width: 768px) {
        .hub-grid-article-container {
            --column-count: 2;
            --minmax: minmax(0, 1fr);
            grid-template-columns: repeat(var(--column-count), var(--minmax))
        }
    }

    @media screen and (min-width: 1024px) {
        .hub-grid-article-container {
            --column-count: 3
        }
    }
}

@layer blocks {
    .hub-filters {
        display: flex;
        flex-wrap: wrap;
        gap: var(--size-fluid-3)
    }

        .hub-filters .pill-container {
            flex: none;
            margin-right: auto
        }

        .hub-filters .search-container {
            display: flex;
            gap: var(--size-4);
            flex-wrap: wrap
        }

            .hub-filters .search-container > *:not(.multi-tag-toggle) {
                flex: 1 1 140px
            }

    @media screen and (max-width: 1023px) {
        .hub-filters .scroll-snap-container {
            width: 100vw
        }
    }

    @media screen and (min-width: 1024px) {
        .hub-filters #category-pills-panel {
            scroll-margin: 100px
        }
    }
}

.hub-grid-header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-fluid-1);
    justify-content: space-between
}

    .hub-grid-header > * {
        display: flex;
        align-items: center;
        gap: var(--size-1)
    }

        .hub-grid-header > *:first-child {
            min-width: 250px
        }

@media screen and (max-width: 767px) {
    .featured-hub-card-container .swiper-wrapper {
        padding: 0
    }

    .featured-hub-card-container .swiper {
        margin: 0
    }

        .featured-hub-card-container .swiper.generic .swiper-wrapper {
            padding: 0;
            display: grid;
            gap: var(--size-fluid-3)
        }

            .featured-hub-card-container .swiper.generic .swiper-wrapper .swiper-slide {
                width: 100%
            }

    .featured-hub-card-container .pagination-container {
        display: none
    }
}

@media screen and (max-width: 1024px) {
    .featured-hub-card-container .swiper .swiper-slide {
        --min-width: min(750px, 80vw)
    }
}

@media screen and (min-width: 1025px) {
    .featured-hub-card-container .swiper {
        overflow: visible
    }

        .featured-hub-card-container .swiper.generic:not(.swiper-initialized) .swiper-wrapper {
            gap: 35px
        }

            .featured-hub-card-container .swiper.generic:not(.swiper-initialized) .swiper-wrapper .swiper-slide {
                width: 100%
            }
}

@layer composition {
    .hub-article-page-columns {
        display: flex;
        flex-direction: column;
        gap: var(--size-fluid-3) var(--size-fluid-5)
    }

        .hub-article-page-columns aside {
            display: flex;
            flex-direction: column;
            gap: var(--size-fluid-4)
        }

    @media screen and (min-width: 1024px) {
        .hub-article-page-columns {
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start
        }

            .hub-article-page-columns > *:first-child {
                flex: 999 1 auto;
                max-width: 900px
            }

            .hub-article-page-columns > aside {
                position: sticky;
                top: calc(110px + var(--size-fluid-4));
                flex: none;
                width: min(360px,100%)
            }

            .hub-article-page-columns aside .aside-search {
                order: -1
            }

            .hub-article-page-columns aside .aside-related {
                order: 3
            }

                .hub-article-page-columns aside .aside-related .scroll-snap-container {
                    display: grid;
                    gap: var(--size-fluid-2)
                }
    }
}

@layer composition {
    .section-padding {
        overflow-x: clip;
        padding-block: var(--size-fluid-section)
    }

        .section-padding .bodycopy.centered {
            display: flex;
            flex-direction: column;
            align-items: center;
            max-width: 110ch;
            margin-inline: auto;
            text-align: center
        }

            .section-padding .bodycopy.centered .section-heading {
                justify-content: center
            }

            .section-padding .bodycopy.centered.flow .illustration-icon + * {
                margin-top: 0
            }

        .section-padding .section-heading {
            text-wrap: balance
        }

            .section-padding .section-heading:has(img) {
                display: flex;
                align-items: center;
                column-gap: var(--size-fluid-1);
                flex-wrap: wrap
            }

            .section-padding .section-heading.text-fluid-8 img {
                height: var(--text-fluid-7);
                width: auto;
                margin-block: var(--size-2)
            }

        .section-padding:not([class*=bg-]) + .section-padding:not([class*=bg-]) {
            padding-block-start: 0
        }

    @media screen and (max-width: 767px) {
        .section-padding:has(.wrapper>[class*=bg-]):last-child {
            padding-bottom: 0
        }
    }

    @media screen and (min-width: 1024px) {
        .bodycopy :is(.section-heading,p):has(+.cta-container) {
            margin-bottom: -0.6rem
        }

        .section-padding .bodycopy.centered-desktop {
            display: flex;
            flex-direction: column;
            align-items: center;
            max-width: 110ch;
            margin-inline: auto;
            text-align: center
        }

            .section-padding .bodycopy.centered-desktop .section-heading {
                justify-content: center
            }
    }
}

@layer composition {
    @media screen and (max-width: 767px) {
        .panel {
            margin-inline: calc(-1*var(--size-5));
            padding-inline: var(--size-5)
        }

            .panel:not(.transparent,.cta-strip) {
                padding-block: var(--size-fluid-section)
            }

            .panel.cta-strip {
                padding-block: var(--size-fluid-5)
            }
    }

    @media screen and (min-width: 768px) {
        .panel {
            border-radius: var(--radius-5)
        }

            .panel:not(.transparent,.cta-strip) {
                padding: calc(.75*var(--size-fluid-section)) var(--size-fluid-5)
            }

            .panel.cta-strip {
                padding: var(--size-fluid-3) var(--size-fluid-4)
            }
    }
}

@layer composition {
    .panel-columns {
        --min: 360px;
        --max: 474px;
        --y-gap: var(--size-fluid-5);
        --x-gap: clamp(2rem, 4vw, 5rem);
        display: flex;
        gap: var(--y-gap) var(--x-gap);
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap
    }

        .panel-columns > * {
            flex: 1;
            min-width: min(var(--min),100%);
            position: relative;
            margin-inline: auto
        }

            .panel-columns > *:first-child {
                max-width: min(var(--max),100%)
            }

    @media screen and (min-width: 1024px) {
        .panel-columns:not([data-variant=flipped]) > *:first-child {
            order: 2
        }

        .panel-columns:not([data-columns=uneven]) > *:first-child {
            --max: 100%
        }
    }
}

@layer composition {
    .scroll-snap-container + .pagination {
        display: none
    }

    @media screen and (max-width: 1023px) {
        .wrapper:has(.scroll-snap-container) {
            container-type: inline-size
        }

        .scroll-snap-container {
            --item-spacing: var(--size-5);
            scroll-padding: var(--item-spacing);
            scroll-snap-type: x mandatory;
            overflow-x: scroll;
            scrollbar-width: none;
            width: calc(100cqw + var(--item-spacing) + var(--item-spacing));
            margin-left: calc(-1*var(--item-spacing));
            display: flex;
            flex-wrap: nowrap;
            padding: 7px var(--item-spacing) 7px var(--item-spacing);
            gap: var(--item-gap, var(--size-fluid-3));
            scroll-behavior: smooth
        }

            .scroll-snap-container > * {
                flex: none;
                display: flex;
                scroll-snap-align: start;
                width: var(--min-width, min(370px, 75vw))
            }

            .scroll-snap-container + .pagination {
                margin-top: var(--size-1);
                display: flex;
                gap: var(--size-3);
                padding: 0 var(--item-spacing);
                align-items: center;
                justify-content: space-between
            }

                .scroll-snap-container + .pagination .pagination-dots {
                    display: flex;
                    gap: var(--size-3);
                    flex-wrap: wrap
                }

                    .scroll-snap-container + .pagination .pagination-dots .dot {
                        width: 12px;
                        aspect-ratio: 1;
                        border-radius: var(--radius-round);
                        background-color: var(--purple)
                    }

                        .scroll-snap-container + .pagination .pagination-dots .dot:not(.active) {
                            background-color: var(--black);
                            opacity: .2
                        }

                .scroll-snap-container + .pagination .pagination-arrows {
                    display: flex;
                    gap: var(--size-3);
                    align-items: center
                }

                    .scroll-snap-container + .pagination .pagination-arrows > * {
                        width: clamp(2.5rem,2.229rem + 1.1561vw,3.125rem);
                        aspect-ratio: 1;
                        margin: 0;
                        height: auto;
                        border-radius: var(--radius-round);
                        background-color: var(--purple);
                        transition: var(--transition-1)
                    }

                        .scroll-snap-container + .pagination .pagination-arrows > *.disabled {
                            background-color: var(--medium-grey)
                        }

                        .scroll-snap-container + .pagination .pagination-arrows > *:hover:not(.disabled) {
                            background-color: color-mix(in srgb, var(--purple), var(--black) 10%)
                        }

                    .scroll-snap-container + .pagination .pagination-arrows .arrow-prev::before, .scroll-snap-container + .pagination .pagination-arrows .arrow-next::before {
                        display: block;
                        content: "";
                        width: 100%;
                        aspect-ratio: 1;
                        mask-image: var(--iconimg);
                        mask-size: 80%;
                        mask-repeat: no-repeat;
                        mask-position: center;
                        background-color: var(--white)
                    }

                    .scroll-snap-container + .pagination .pagination-arrows .arrow-next {
                        scale: -1 1
                    }
    }
}

@layer composition {
    @media screen and (min-width: 768px) {
        .product-card-container {
            display: flex;
            justify-content: center;
            gap: var(--size-fluid-4);
            flex-wrap: wrap
        }

            .product-card-container > * {
                width: min(380px,47%);
                display: flex
            }
    }
}

@layer composition {
    .sticky-columns-panel {
        --min: 400px;
        --max: 539px;
        --y-gap: var(--size-fluid-4);
        --x-gap: 4rem;
        display: flex;
        flex-direction: column;
        gap: var(--y-gap) var(--x-gap);
        align-items: flex-start;
        justify-content: space-between
    }

        .sticky-columns-panel > * {
            flex: 1;
            width: 100%;
            position: relative
        }

            .sticky-columns-panel > *:has(>.cover-benefits-card) {
                width: 100%;
                display: grid;
                gap: var(--size-5)
            }

    @media screen and (min-width: 900px) {
        .sticky-columns-panel {
            flex-direction: row
        }

            .sticky-columns-panel > *:first-child {
                position: sticky;
                top: calc(2rem + var(--sticky-nav-height));
                max-width: min(var(--max),100%);
                min-width: min(var(--min),100%)
            }
    }
}

@layer composition {
    .filter-panel .filter-results > *:not([hidden],.hidden) {
        display: flex
    }

    .filter-panel .filter-results > *:is([hidden],.hidden) {
        display: none
    }

    .filter-panel .filter-results > * > * {
        width: 100%;
        transition: all .5s ease allow-discrete
    }

    .filter-panel .filter-results > *:is([hidden],.hidden) > * {
        opacity: 0;
        display: none;
        visibility: hidden;
        transition: all .5s ease
    }

    .filter-panel .filter-rows .filter-results {
        width: 100%;
        display: grid;
        gap: var(--size-5)
    }

    @starting-style {
        .filter-panel .filter-results > * > * {
            opacity: 0
        }
    }

    @media screen and (max-width: 1023px) {
        .filter-panel.assistance-panel .filter-results:not(:has(>[hidden])) > div:not(:first-child) {
            display: flex
        }
    }
}

@layer composition {
    .filter-buttons-container {
        display: flex;
        gap: var(--size-6) var(--size-fluid-4);
        flex-wrap: wrap
    }

    @media screen and (min-width: 1024px) {
        .filter-buttons-container[data-desktop=centered] {
            justify-content: center
        }
    }
}

@layer composition {
    @media screen and (max-width: 767px) {
        .cover-product-card-container .btn {
            order: 2
        }
    }

    @media screen and (min-width: 768px) {
        .cover-product-card-container .swiper.generic:not(.swiper-initialized) .swiper-wrapper {
            display: flex;
            flex-wrap: nowrap;
            gap: var(--size-fluid-3);
            gap: 35px
        }
    }

    @media screen and (min-width: 1024px) {
        .cover-product-card-container .swiper {
            overflow: visible
        }

            .cover-product-card-container .swiper.generic:not(.swiper-initialized) .swiper-wrapper {
                gap: 48px
            }

                .cover-product-card-container .swiper.generic:not(.swiper-initialized) .swiper-wrapper .swiper-slide[style] {
                    margin-right: 0 !important
                }
    }
}

@layer composition {
    @media screen and (min-width: 768px) {
        .ancillaries-card-container {
            overflow: visible;
            width: 100%;
            display: grid;
            gap: var(--size-fluid-3);
            margin: 0;
            padding: 0
        }

            .ancillaries-card-container > *, .ancillaries-card-container > * > * {
                width: 100%
            }
    }

    @media screen and (min-width: 1400px) {
        .ancillaries-card-container {
            grid-template-columns: 1fr 1fr
        }

            .ancillaries-card-container > * {
                display: flex
            }

            .ancillaries-card-container .product-card {
                aspect-ratio: 1;
                width: 100%
            }
    }
}

@layer composition {
    .assistance-panel {
        display: flex;
        flex-direction: column;
        gap: var(--size-fluid-4)
    }

    @media screen and (max-width: 1023px) {
        .assistance-panel > *:first-child {
            display: none
        }
    }

    @media screen and (min-width: 1024px) {
        .assistance-panel {
            flex-direction: row
        }

            .assistance-panel > * {
                display: flex
            }

                .assistance-panel > *:first-child {
                    position: sticky;
                    top: calc(2rem + var(--sticky-nav-height));
                    align-self: flex-start
                }

                .assistance-panel > *:last-child {
                    flex: 1
                }
    }
}

@layer composition {
    .at-only:not(:focus):not(:active) {
        clip: rect(0 0 0 0);
        clip-path: inset(100%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px
    }

    [data-modal-open][hidden] {
        display: none
    }

    body:has([data-modal]):before {
        content: "";
        pointer-events: none;
        display: block;
        position: fixed;
        background: rgba(0,0,0,.6);
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0;
        transition: opacity .5s ease;
        z-index: 98
    }

    body.modal-open {
        overflow: hidden
    }

        body.modal-open:before {
            opacity: 1;
            pointer-events: initial
        }

    .modal, .modal p, .modal summary {
        font-size: .9375rem
    }

    .js [data-modal], .a11y-modal {
        --modal-padding: min(2.25rem, 6vw);
        -webkit-overflow-scrolling: touch;
        margin: auto;
        max-height: 100%;
        width: 100%;
        max-width: 1100px;
        overflow-x: clip;
        overflow-y: auto;
        overscroll-behavior: contain;
        width: min(100vw,1100px);
        opacity: 1;
        padding: var(--modal-padding);
        position: fixed;
        inset: 0;
        transform: translateY(0%);
        transition: all .5s var(--transition-bezier-2);
        visibility: visible;
        z-index: 99
    }

        .js [data-modal] body.modal-open, .a11y-modal body.modal-open {
            transition-delay: .35s
        }

        .js [data-modal]:focus, .a11y-modal:focus {
            outline: none
        }

        .js [data-modal] h1, .a11y-modal h1 {
            margin-right: var(--size-7)
        }

        .js [data-modal] > .inner, .a11y-modal > .inner {
            width: 100%
        }

        .js [data-modal] .underscore-link, .a11y-modal .underscore-link {
            position: absolute;
            right: var(--modal-padding);
            top: var(--modal-padding)
        }

    .slide-in-modal.a11y-modal {
        min-height: 100vh;
        min-height: 100dvh;
        max-width: 750px;
        transform: translateX(0%);
        margin: 0 0 0 auto;
        box-shadow: -5px 0 30px rgba(0,0,0,.15)
    }

        .slide-in-modal.a11y-modal:has(#apply) {
            padding-bottom: calc(var(--modal-padding) + var(--modal-padding) + 52px)
        }

            .slide-in-modal.a11y-modal:has(#apply) #apply {
                position: absolute;
                inset: auto var(--modal-padding) var(--modal-padding) var(--modal-padding)
            }

    .modal-heading {
        margin-right: 1rem
    }

    .js [data-modal][hidden], .a11y-modal[hidden] {
        display: flex;
        pointer-events: none;
        transform: translateY(-6vh);
        visibility: hidden
    }

    .slide-in-modal.a11y-modal[hidden] {
        transform: translateX(calc(100% + 40px))
    }

    .a11y-modal__close-btn {
        border: none
    }

    .is-icon-btn {
        background: transparent;
        border: none;
        height: 2.5em;
        padding: 0;
        position: absolute;
        left: var(--modal-padding);
        top: var(--modal-padding);
        width: 2.5em;
        border-radius: 50%;
        cursor: pointer;
        transition: opacity .5s linear,transform .5s var(--bezier-transition, cubic-bezier(0.16, 0.53, 0.31, 0.94))
    }

    [data-modal-x] {
        border-right: 2px solid;
        bottom: 0;
        display: block;
        height: 1.5em;
        left: 0;
        margin: auto;
        pointer-events: none;
        position: relative;
        right: 0;
        top: 0;
        transform: rotate(45deg);
        width: 2px;
        color: var(--bg-black, black)
    }

        [data-modal-x]:after {
            border-right: 2px solid;
            content: "";
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            transform: rotate(-90deg);
            width: 100%
        }

    .is-icon-btn:hover [data-modal-x], .is-icon-btn:focus [data-modal-x] {
        color: var(--grey-6);
        transition: color .2s ease-in-out
    }

    @media screen and (max-width: 499px) {
        .slide-in-modal.a11y-modal[hidden][data-mobile=slide-up] {
            transform: translateY(calc(100% + 40px))
        }

        .slide-in-modal.a11y-modal[data-mobile=slide-up] {
            min-height: 30vh;
            inset: auto 0 0 0;
            box-shadow: 0 -5px 30px rgba(0,0,0,.15)
        }
    }

    @media screen and (min-height: 440px)and (min-width: 500px) {
        .js [data-modal][hidden]:not(.slide-in-modal), .a11y-modal[hidden]:not(.slide-in-modal) {
            transform: translateY(-90%)
        }

        .js [data-modal], .a11y-modal {
            bottom: auto;
            top: 50%;
            transform: translateY(-50%)
        }

        .slide-in-modal.a11y-modal {
            transform: translateX(0%);
            top: 0;
            box-shadow: -10px 0 40px rgba(0,0,0,.15)
        }

        .modal, .modal p, .modal summary {
            font-size: var(--text-16)
        }
    }
}

@layer composition {
    .support-panel {
        --max: 100%
    }
}

@layer composition {
    .lozenge-btn-container {
        display: grid;
        gap: var(--size-4)
    }

    *:has(>.lozenge-btn-container) {
        container-type: inline-size
    }

    @container (min-width: 768px) {
        .lozenge-btn-container {
            grid-template-columns: 1fr 1fr
        }
    }
}

@layer composition {
    .more-help-container {
        max-width: 1200px;
        margin: 0 auto
    }

        .more-help-container ul {
            display: grid;
            gap: var(--size-fluid-3)
        }

            .more-help-container ul li .benefit-card {
                width: 100%
            }

    @media screen and (min-width: 900px) {
        .more-help-container ul:has(>*:nth-child(2)) {
            grid-template-columns: 1fr 1fr
        }

        .more-help-container ul:has(>*:nth-child(3)) {
            grid-template-columns: 1fr 1fr 1fr
        }
    }
}

@layer composition {
    .workplace-award-card-container {
        display: grid;
        gap: var(--size-fluid-3)
    }

        .workplace-award-card-container > * {
            display: flex
        }

    @media screen and (min-width: 900px) {
        .workplace-award-card-container {
            grid-template-columns: 1fr 1fr
        }
    }
}

@layer composition {
    .insurance-documents-container {
        display: grid;
        gap: var(--size-fluid-5);
        align-items: flex-start
    }

        .insurance-documents-container .document-filter-results {
            display: grid
        }

            .insurance-documents-container .document-filter-results:has(.results-section h3) {
                gap: var(--size-fluid-5)
            }

            .insurance-documents-container .document-filter-results > *:is([hidden],.hidden) {
                opacity: 0;
                display: none;
                visibility: hidden;
                transition: all .5s ease
            }

            .insurance-documents-container .document-filter-results .results-section > [data-content-type] {
                border-bottom: 1px var(--navy) solid
            }

    @media screen and (min-width: 1024px) {
        .insurance-documents-container {
            grid-template-columns: 1fr 1fr
        }

            .insurance-documents-container > *:first-child {
                position: sticky;
                top: calc(1rem + var(--sticky-nav-height))
            }
    }

    .insurance-documents-container > * {
        transition: all .5s ease allow-discrete
    }

    @starting-style {
        .insurance-documents-container > * {
            opacity: 0
        }
    }
}

@layer composition {
    .pill-container:not(.scroll-snap-container) {
        display: flex;
        gap: var(--size-3);
        flex-wrap: wrap
    }

    @media screen and (max-width: 1023px) {
        .pill-container.scroll-snap-container {
            --item-gap: var(--size-4);
            --min-width: auto
        }
    }

    @media screen and (min-width: 1024px) {
        .pill-container.scroll-snap-container {
            display: flex;
            gap: var(--size-3);
            flex-wrap: wrap
        }
    }
}

@layer composition {
    .sticky-columns-panel > * {
        container-type: inline-size
    }

        .sticky-columns-panel > *:has(.cover-benefits-card,.benefit-card) {
            width: 100%;
            display: grid;
            gap: var(--size-5)
        }
}

@layer composition {
    .section-padding .section-heading_subheading {
        display: block
    }
}

@layer composition {
    @media screen and (min-width: 768px) {
        .product-card-container:has(li:nth-child(4):last-child) {
            max-width: 1200px;
            margin-inline: auto
        }
    }
}

@media screen and (min-width: 1025px) {
    .generic-swiper-container .swiper {
        overflow: visible
    }

        .generic-swiper-container .swiper.generic:not(.swiper-initialized) .swiper-wrapper {
            gap: 35px
        }

            .generic-swiper-container .swiper.generic:not(.swiper-initialized) .swiper-wrapper .swiper-slide {
                width: calc(33.5% - 25px)
            }
}

@media screen and (min-width: 1200px) {
    .generic-swiper-container .swiper.generic:not(.swiper-initialized) .swiper-wrapper .swiper-slide {
        width: calc(25% - 26px)
    }

    .generic-swiper-container[data-desktop-columns="3"] .swiper.generic:not(.swiper-initialized) .swiper-wrapper .swiper-slide {
        width: calc(33.33333% - 23px)
    }
}

@layer composition {
    .team-grid {
        --min: 23rem;
        --col-gap: var(--size-fluid-6);
        --row-gap: var(--size-fluid-5);
        display: grid;
        grid-column-gap: var(--col-gap);
        grid-row-gap: var(--row-gap);
        grid-template-columns: repeat(auto-fit, minmax(min(var(--min), 100%), 1fr));
        max-width: var(--max-width, auto)
    }
}

@layer blocks {
    .site-head {
        --sticky-underlap: 1px;
        --border-width: 2px;
        position: sticky;
        top: calc(var(--sticky-underlap)*-1);
        z-index: 11;
        background-color: var(--white);
        transition: var(--transition-1)
    }

    body:has(main>:first-child.bg-aqua) .site-head:not(.is-pinned) {
        background-color: var(--aqua)
    }

        body:has(main>:first-child.bg-aqua) .site-head:not(.is-pinned) .site-head_logo .prefix * {
            fill: var(--white)
        }

        body:has(main>:first-child.bg-aqua) .site-head:not(.is-pinned) .site-head_logo .body * {
            fill: var(--navy)
        }

    body:has(main>:first-child.bg-oat-3) .site-head:not(.is-pinned) {
        box-shadow: none;
        background-color: var(--oat-3)
    }

    body:has(main>:first-child:not(.bg-aqua)) .site-head, .site-head.is-pinned {
        box-shadow: 0 0 20px color-mix(in srgb, var(--black), transparent 80%)
    }

        body:has(main>:first-child:not(.bg-aqua)) .site-head .site-head_logo .prefix *, .site-head.is-pinned .site-head_logo .prefix * {
            fill: var(--aqua)
        }

        body:has(main>:first-child:not(.bg-aqua)) .site-head .site-head_logo .body *, .site-head.is-pinned .site-head_logo .body * {
            fill: var(--navy)
        }

    .site-head[data-mobile-toggled=false] .mobile-menu {
        background: transparent
    }

        .site-head[data-mobile-toggled=false] .mobile-menu em, .site-head[data-mobile-toggled=false] .mobile-menu em:before, .site-head[data-mobile-toggled=false] .mobile-menu em:after {
            background: var(--navy)
        }

    .site-head_inner {
        padding: calc(var(--size-3) + var(--sticky-underlap)) 0 var(--size-3) 0;
        display: flex;
        align-items: center
    }

        .site-head_inner .mobile-menu {
            border: none;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            width: 30px;
            height: 30px;
            margin-left: auto;
            background: transparent
        }

            .site-head_inner .mobile-menu em {
                transform: scale(0.8)
            }

                .site-head_inner .mobile-menu em, .site-head_inner .mobile-menu em:before, .site-head_inner .mobile-menu em:after {
                    display: block;
                    height: 3px;
                    background-color: transparent;
                    width: 100%;
                    background-color: var(--black);
                    position: relative;
                    transition: var(--transition-1)
                }

                    .site-head_inner .mobile-menu em:before, .site-head_inner .mobile-menu em:after {
                        content: "";
                        position: absolute;
                        top: 0;
                        transform-origin: center;
                        border-radius: 5px
                    }

                    .site-head_inner .mobile-menu em:before {
                        top: -9px
                    }

                    .site-head_inner .mobile-menu em:after {
                        top: 9px
                    }

            .site-head_inner .mobile-menu[aria-expanded=true] em {
                background-color: transparent
            }

                .site-head_inner .mobile-menu[aria-expanded=true] em:before {
                    transform: rotate(-45deg);
                    top: 0
                }

                .site-head_inner .mobile-menu[aria-expanded=true] em:after {
                    transform: rotate(45deg);
                    top: 0
                }

        .site-head_inner .site-head_logo svg {
            width: clamp(138px,13vw,223px)
        }

        .site-head_inner .site-head_navigation .nav-subhead {
            padding: var(--size-4) 0
        }

        .site-head_inner .site-head_navigation .nav-cta_card {
            padding: var(--size-4);
            border-radius: var(--radius-3)
        }

        .site-head_inner .site-head_navigation .nav-cta_card-heading {
            display: flex;
            align-items: center;
            text-wrap: pretty;
            gap: var(--size-fluid-1)
        }

            .site-head_inner .site-head_navigation .nav-cta_card-heading::before {
                content: "";
                width: 35px;
                height: 35px;
                background-image: var(--nav-arrow);
                background-repeat: no-repeat;
                background-position: center
            }

        .site-head_inner .site-head_navigation .product-button-container {
            --border-width: 1px;
            width: min(600px,100%);
            margin-bottom: var(--size-8)
        }

    @media screen and (max-width: 767px) {
        .site-head_navigation .product-button-container {
            flex-direction: column
        }
    }

    @media screen and (min-width: 768px) {
        .site-head_navigation .product-button-container .product-btn {
            max-width: 180px
        }
    }

    .site-head_navigation {
        flex-grow: 1
    }

        .site-head_navigation .nav-btn:not(.btn), .site-head_navigation .mobile-breadcrumb span, .site-head_navigation a:not([class]) {
            font-size: var(--text-fluid-1);
            border: none;
            cursor: pointer;
            display: block;
            color: var(--navy);
            background: transparent;
            font-weight: var(--font-weight-6);
            line-height: var(--lineheight-3)
        }

        .site-head_navigation nav ul {
            display: flex;
            flex-direction: column;
            list-style-type: none;
            padding: 0
        }

            .site-head_navigation nav ul .nav-btn:not(.btn), .site-head_navigation nav ul a:not([class]), .site-head_navigation nav ul .mobile-breadcrumb span {
                font-size: var(--text-fluid-2);
                color: var(--navy);
                text-decoration: none
            }

        .site-head_navigation nav ul {
            display: flex;
            flex-direction: column;
            list-style-type: none;
            padding: 0
        }

    @media screen and (max-width: 1023px) {
        body:has(.mobile-menu[aria-expanded=true]) {
            overflow: hidden
        }

        .mobile-menu[aria-expanded=true] + .site-head_navigation {
            display: block
        }

        body:has(.site-head[data-mobile-toggled=true]:not(.is-pinned)) .notifications {
            position: absolute;
            top: -100%
        }

        .site-head_navigation {
            --nav-bg: var(--white);
            --nav-height: 62px;
            display: none;
            background: var(--nav-bg);
            width: 100vw;
            margin-left: calc(50% - 50vw);
            padding: var(--size-5);
            height: calc(100dvh - var(--nav-height) - var(--notifications-height, 0px));
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            position: absolute;
            top: var(--nav-height);
            left: 0
        }

            .site-head_navigation .nav-btn:not(.btn) {
                background: transparent;
                padding: var(--size-4) 0;
                text-align: left;
                position: relative
            }

                .site-head_navigation .nav-btn:not(.btn)[aria-haspopup=true]:after, .site-head_navigation .mobile-breadcrumb button:before {
                    width: 36px;
                    position: absolute;
                    inset: calc(50% - 18px) 0 auto auto;
                    content: "";
                    transition: var(--transition-1);
                    background: var(--purple);
                    aspect-ratio: 1;
                    mask-image: var(--ui-chevron-icon-mask);
                    mask-size: 100%;
                    mask-repeat: no-repeat;
                    mask-position: center
                }

            .site-head_navigation .btn {
                width: 100%
            }

            .site-head_navigation li.flex-column:has(.btn) {
                margin-top: var(--size-4)
            }

            .site-head_navigation .nav-sub:has(li>.btn) {
                display: grid;
                gap: var(--size-4);
                margin: var(--size-4) 0
            }

            .site-head_navigation .nav-btn:not(.btn), .site-head_navigation .nav-sub > li > a:not(.nav-card,.btn) {
                background: transparent;
                padding: var(--size-4) 0;
                text-align: left;
                position: relative;
                border-bottom: 2px var(--black) solid;
                width: 100%
            }

            .site-head_navigation ul:has(+.hidden-desktop) li:last-child a, .site-head_navigation li:has(+li.flex-column) a.nav-btn:not(.btn) {
                border-bottom: 0
            }

            .site-head_navigation .nav-sub a:not(.btn,.nav-card) {
                display: block
            }

            .site-head_navigation .dropdownmenu {
                padding: var(--size-3);
                background: var(--nav-bg);
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: calc(100% + 20px);
                transform: translateX(0);
                box-shadow: 0 0 20px rgba(0,0,0,.15);
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                z-index: 10;
                overscroll-behavior: contain;
                transition: transform .6s cubic-bezier(0.16, 0.53, 0.31, 0.94)
            }

            .site-head_navigation .nav-btn[aria-expanded=true] + .dropdownmenu {
                transform: translateX(calc(-100% - 20px))
            }

            .site-head_navigation .mobile-breadcrumb {
                padding: var(--size-4) 0;
                font-size: .875rem;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                display: flex;
                justify-content: center;
                position: relative
            }

                .site-head_navigation .mobile-breadcrumb button {
                    position: absolute;
                    padding: 0;
                    background: none;
                    border: none;
                    left: 0;
                    width: 40px;
                    height: 40px;
                    top: 50%;
                    translate: 0 -20px
                }

                    .site-head_navigation .mobile-breadcrumb button::before {
                        transform: rotate(180deg);
                        right: auto;
                        left: 0
                    }

            .site-head_navigation .hidden-mobile {
                display: none
            }
    }

    @media screen and (min-width: 1024px) {
        .site-head_inner {
            padding: calc(var(--size-6) + var(--sticky-underlap)) 0 var(--size-6) 0;
            justify-content: space-between;
            position: relative
        }

            .site-head_inner .mobile-menu {
                display: none
            }

        .mobile-menu, .mobile-breadcrumb {
            display: none
        }

        .site-head_navigation .nav-btn:not(.btn) {
            padding-inline: 0;
            position: relative;
            z-index: 1;
            transition: var(--transition-1)
        }

            .site-head_navigation .nav-btn:not(.btn):after {
                opacity: 0;
                content: "";
                position: absolute;
                transform: none;
                display: block;
                width: 100%;
                top: 99%;
                height: 7px;
                transition: var(--transition-1);
                background-color: var(--underline-color, var(--purple));
                -webkit-mask-image: var(--underline);
                mask-image: var(--underline);
                mask-size: 100% 100%;
                mask-repeat: no-repeat;
                mask-position: center
            }

            .site-head_navigation .nav-btn:not(.btn):focus-visible {
                outline: none
            }

                .site-head_navigation .nav-btn:not(.btn):hover::after, .site-head_navigation .nav-btn:not(.btn):focus-visible::after, .site-head_navigation .nav-btn:not(.btn)[aria-expanded=true]::after {
                    opacity: 1
                }

            .site-head_navigation .nav-btn:not(.btn)[aria-expanded=true] {
                color: var(--purple)
            }

        .site-head_navigation .nav-btn + .dropdownmenu {
            visibility: hidden;
            opacity: 0;
            transition: all .3s ease;
            transition: all .3s ease allow-discrete
        }

        .site-head_navigation .nav-btn[aria-expanded=true] + .dropdownmenu {
            visibility: visible;
            opacity: 1
        }

        .site-head_navigation .dropdownmenu {
            position: absolute;
            width: 100%;
            left: 0;
            top: 100%;
            padding: var(--size-8) 0;
            min-height: 300px;
            z-index: 1;
            display: block
        }

            .site-head_navigation .dropdownmenu .inner-content {
                display: flex;
                gap: min(5rem,6%)
            }

            .site-head_navigation .dropdownmenu:before, .site-head_navigation .dropdownmenu:after {
                content: "";
                position: absolute;
                width: 100vw;
                height: 100%;
                left: 0;
                margin-left: calc(50% - 50vw);
                bottom: 0;
                z-index: -1;
                background: var(--white)
            }

            .site-head_navigation .dropdownmenu:after {
                height: 50%;
                z-index: -2;
                box-shadow: 0 10px 20px rgba(0,0,0,.1)
            }

        .site-head_navigation > nav {
            margin-left: var(--size-5);
            display: flex;
            justify-content: flex-end
        }

            .site-head_navigation > nav > ul {
                flex-direction: row;
                gap: var(--size-fluid-4);
                align-items: center
            }

        .site-head_navigation .nav-sub {
            flex: 0 1 auto
        }

            .site-head_navigation .nav-sub.nav-cta {
                margin-left: auto;
                max-width: min(416px,30%)
            }

            .site-head_navigation .nav-sub a:not(.btn,.nav-card) {
                padding: var(--size-1) 0;
                margin: var(--size-1) 0;
                display: inline-flex;
                flex-direction: column
            }

                .site-head_navigation .nav-sub a:not(.btn,.nav-card):after {
                    opacity: 0;
                    content: "";
                    margin-top: -2px;
                    width: 100%;
                    height: 7px;
                    transition: var(--transition-1);
                    transition: var(--transition-1);
                    background-color: var(--underline-color, var(--purple));
                    -webkit-mask-image: var(--underline);
                    mask-image: var(--underline);
                    mask-size: 100% 100%;
                    mask-repeat: no-repeat;
                    mask-position: center
                }

                .site-head_navigation .nav-sub a:not(.btn,.nav-card):is(:hover,:focus-visible):after {
                    opacity: 1
                }

        .site-head_navigation .section-title {
            font-size: 1.125rem;
            padding: var(--size-3) 0
        }

        .site-head_navigation .hidden-desktop {
            display: none
        }
    }

    @media screen and (min-width: 1200px) {
        .site-head_navigation .btn[data-shadow] {
            min-width: 200px
        }

        .site-head_navigation > nav > ul {
            gap: var(--size-fluid-5)
        }

            .site-head_navigation > nav > ul > li:last-of-type .btn {
                margin-left: calc(-1.25*var(--size-fluid-3))
            }
    }
}

@layer blocks {
    .btn {
        --outline-color: var(--navy);
        font-size: var(--text-16);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--size-2);
        background-color: var(--btn-bg, var(--navy));
        color: var(--btn-text, var(--white));
        padding: calc(var(--size-3) - var(--border-width, 0px)) var(--size-fluid-3);
        line-height: var(--lineheight-3);
        border: var(--border-width, 0px) var(--border-colour, transparent) solid;
        border-radius: var(--radius-3);
        box-shadow: var(--shadow-size, 0px) var(--shadow-size, 0px) 0px var(--shadow-bg, var(--navy));
        text-align: center;
        transition: none
    }

    @media screen and (max-width: 767px) {
        .btn[data-full-width-mobile=true] {
            width: 100%
        }
    }

    @media screen and (min-width: 1300px) {
        .btn {
            min-width: var(--btn-min-width, 250px)
        }
    }

    .btn .icon {
        pointer-events: none
    }

    .btn:is(:hover,:focus-visible):not(.active) {
        color: var(--btn-text-hover, var(--white));
        background-color: var(--btn-bg-hover, var(--navy));
        border-color: var(--border-colour-hover, transparent);
        box-shadow: var(--shadow-size-hover, 0px) var(--shadow-size-hover, 0px) 0px var(--shadow-bg, color-mix(in srgb, var(--navy), transparent 80%))
    }

    .btn[data-size=sm] {
        padding: calc(var(--size-3) - var(--border-width, 0px)) var(--size-3)
    }

    .btn[data-variant=aqua] {
        --btn-text: var(--navy);
        --btn-text-hover: var(--navy);
        --btn-bg: var(--aqua);
        --btn-bg-hover: var(--aqua);
        --border-colour: var(--navy);
        --border-colour-hover: var(--navy);
        --border-width: 2px
    }

    .btn[data-variant=oat] {
        --btn-text: var(--navy);
        --btn-text-hover: var(--navy);
        --btn-bg: var(--oat);
        --btn-bg-hover: var(--oat);
        --border-colour: var(--navy);
        --border-colour-hover: var(--navy);
        --border-width: 2px
    }

    .btn[data-variant=purple] {
        --btn-bg: var(--purple);
        --btn-bg-hover: var(--purple);
        --border-colour: var(--navy);
        --border-colour-hover: var(--navy);
        --border-width: 2px
    }

    .btn[data-variant=white] {
        --btn-text: var(--navy);
        --btn-text-hover: var(--navy);
        --btn-bg: var(--white);
        --btn-bg-hover: var(--oat);
        --border-colour: var(--white);
        --border-colour-hover: var(--oat)
    }

    .btn[data-variant=transparent] {
        --btn-text: var(--navy);
        --btn-text-hover: var(--navy);
        --btn-bg: transparent;
        --btn-bg-hover: var(--oat);
        --border-width: 0px
    }

    .btn[data-active=aqua].active {
        --btn-text: var(--navy);
        --btn-bg: var(--aqua)
    }

    .btn[data-active=oat].active {
        --btn-text: var(--navy);
        --btn-bg: var(--oat)
    }

    .btn[data-active=purple].active {
        --btn-text: var(--white);
        --btn-bg: var(--purple)
    }

    .btn[data-active=white].active {
        --btn-text: var(--navy);
        --btn-bg: var(--white);
        --border-colour: var(--white)
    }

    .btn[data-shadow=default] {
        --shadow-size: 5px
    }

    .btn[data-shadow=hover] {
        --shadow-size-hover: 5px
    }

    .btn[data-shadow-colour=aqua] {
        --shadow-bg: var(--aqua)
    }

    .btn[data-shadow-colour=purple] {
        --shadow-bg: var(--purple)
    }

    .btn[data-shadow-colour=pink] {
        --shadow-bg: var(--pink)
    }

    .btn[data-shadow-colour=light-pink] {
        --shadow-bg: var(--light-pink)
    }

    .btn[data-shadow-colour=dark-teal] {
        --shadow-bg: var(--dark-teal)
    }
}

@layer blocks {
    .bg-navy .icon:focus-visible {
        color: var(--white)
    }

    .icon {
        position: relative;
        display: flex;
        align-items: center;
        padding: 0;
        width: fit-content;
        gap: var(--size-2);
        border-radius: var(--radius-round)
    }

        .icon[data-position=start] {
            order: -1
        }

        .icon::before {
            content: "";
            width: var(--icon-size, 38px);
            aspect-ratio: 1;
            background-color: var(--bg-color, var(--navy));
            -webkit-mask-image: var(--iconimg);
            mask-image: var(--iconimg);
            mask-size: cover;
            mask-repeat: no-repeat;
            mask-position: center;
            transition: var(--transition-1);
            flex: none
        }

        .icon[data-colour=navy], .icon[data-hover=navy]:hover {
            --bg-color: var(--navy)
        }

        .icon[data-colour=white], .icon[data-hover=white]:hover {
            --bg-color: var(--white)
        }

        .icon[data-colour=purple], .icon[data-hover=purple]:hover {
            --bg-color: var(--purple)
        }

        .icon[data-colour=aqua], .icon[data-hover=aqua]:hover {
            --bg-color: var(--aqua)
        }

        .icon[data-colour=dark-teal], .icon[data-hover=dark-teal]:hover {
            --bg-color: var(--dark-teal)
        }

        .icon[data-variant=social-facebook] {
            --iconimg: var(--social-facebook-icon-mask)
        }

        .icon[data-variant=social-x] {
            --iconimg: var(--social-x-icon-mask)
        }

        .icon[data-variant=social-instagram] {
            --iconimg: var(--social-instagram-icon-mask)
        }

        .icon[data-variant=ui-search] {
            --iconimg: var(--ui-search-icon-mask)
        }

        .icon[data-variant=ui-filter] {
            --iconimg: var(--ui-filter-icon-mask)
        }

        .icon[data-variant=ui-chevron], .icon[data-variant=ui-chevron-back] {
            --iconimg: var(--ui-chevron-icon-mask)
        }

            .icon[data-variant=ui-chevron-back]::before {
                rotate: 180deg
            }

        .icon[data-variant=ui-check] {
            --iconimg: var(--ui-check-icon-mask)
        }

        .icon[data-variant=ui-cross] {
            --iconimg: var(--ui-cross-icon-mask)
        }

        .icon[data-variant=ui-play-button] {
            --iconimg: var(--ui-play-button)
        }

        .icon[data-size=xs] {
            --icon-size: 20px
        }

        .icon[data-size=sm] {
            --icon-size: 28px
        }

        .icon[data-size=md] {
            --icon-size: min(50px, 12vw)
        }

        .icon[data-size=lg] {
            --icon-size: min(100px, 20vw)
        }

    [data-hover-parent]:hover .icon[data-hover=navy] {
        --bg-color: var(--navy)
    }

    [data-hover-parent]:hover .icon[data-hover=white] {
        --bg-color: var(--white)
    }

    [data-hover-parent]:hover .icon[data-hover=purple] {
        --bg-color: var(--purple)
    }

    [data-hover-parent]:hover .icon[data-hover=aqua] {
        --bg-color: var(--aqua)
    }

    [data-hover-parent]:hover .icon[data-hover=dark-teal] {
        --bg-color: var(--dark-teal)
    }

    a.pill.active .icon {
        --bg-color: var(--white)
    }
}

@layer blocks {
    .illustration-icon {
        width: var(--icon-size, 100px);
        aspect-ratio: 1;
        display: grid;
        grid-template-areas: "stack"
    }

        .illustration-icon > * {
            width: 100%;
            grid-area: stack;
            transition: all .3s ease;
            aspect-ratio: 1;
            object-fit: contain
        }

        .illustration-icon[data-hover]:hover > *, .illustration-icon[data-hover]:focus-visible > * {
            scale: 1.1
        }

            .illustration-icon[data-hover]:hover > *:nth-child(2), .illustration-icon[data-hover]:focus-visible > *:nth-child(2) {
                opacity: 1
            }

    @media(hover: hover) {
        .illustration-icon:has(>:nth-child(2)) > *:nth-child(2) {
            opacity: 0
        }
    }

    [data-hover-parent]:hover .illustration-icon[data-hover] > *, [data-hover-parent]:focus-visible .illustration-icon[data-hover] > * {
        scale: 1.1
    }

        [data-hover-parent]:hover .illustration-icon[data-hover] > *:nth-child(2), [data-hover-parent]:focus-visible .illustration-icon[data-hover] > *:nth-child(2) {
            opacity: 1
        }
}

@layer blocks {
    .form {
        display: grid;
        gap: var(--form-gap, var(--size-5));
        align-content: flex-start
    }

    .form-group {
        display: flex
    }

        .form-group:not(.form-group-inline) {
            flex-direction: column;
            align-items: flex-start
        }

        .form-group:has(>.radio-group) {
            gap: var(--size-3)
        }

    fieldset {
        margin: 0;
        padding: 0;
        border: none
    }

    label, legend {
        font-size: var(--text-15);
        padding: 0
    }

    legend {
        font-size: var(--text-16);
        font-weight: var(--font-weight-semibold)
    }

    .form-text {
        font-size: var(--text-13);
        margin-top: var(--size-1)
    }

    .form-control, .autocomplete__input, .autocomplete__hint {
        --outline-size: 0;
        --border-width: 1px;
        display: block;
        color: var(--input-text, inherit);
        line-height: var(--lineheight-3);
        padding: calc(var(--size-3) - var(--border-width)) var(--size-3);
        border: var(--border-width) var(--navy) solid;
        width: var(--input-width, 100%);
        font-size: var(--text-fluid-form);
        background-color: var(--input-bg, var(--white));
        border-radius: var(--radius-3);
        box-shadow: var(--shadow-size, 0px) var(--shadow-size, 0px) 0px var(--shadow-bg, var(--navy));
        transition: var(--transition-2);
        font-weight: var(--font-weight-normal)
    }

    .form-group:has(.icon[data-variant]) {
        position: relative
    }

        .form-group:has(.icon[data-variant]) .form-control {
            padding-right: calc(var(--size-3) + var(--icon-size, 32px) + var(--size-1))
        }

        .form-group:has(.icon[data-variant]) .icon {
            position: absolute;
            inset: 50% var(--size-3) auto auto;
            translate: 0 -50%;
            z-index: 10
        }

    .form-control[data-shadow=hover] {
        --shadow-size-hover: 5px
    }

        .form-control[data-shadow=hover]:is(:hover,:focus), .form-control[data-shadow=hover]:has(+.icon:is(:hover,:focus)) {
            box-shadow: var(--shadow-size-hover, 0px) var(--shadow-size-hover, 0px) 0px color-mix(in srgb, var(--navy), transparent 80%)
        }

    .autocomplete__input, .autocomplete__hint {
        --border-width: 1px;
        background-color: transparent
    }

    .form-select {
        -webkit-appearance: none;
        appearance: none;
        background-image: url('data:image/svg+xml,<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.4834 19.5924L22.5972 13.4059C23.1343 12.8623 23.1343 11.9671 22.5972 11.4236C22.06 10.8801 21.1754 10.8801 20.6382 11.4236L15.5039 16.603L10.3697 11.4076C9.83254 10.8641 8.94787 10.8641 8.41074 11.4076C8.14218 11.6794 8 12.0471 8 12.3988C8 12.7504 8.14218 13.1181 8.41074 13.3899L14.5245 19.5924C15.0616 20.1359 15.9463 20.1359 16.4834 19.5924Z" fill="%23052E42" style="fill:%23052E42;fill:color(display-p3 0.0196 0.1804 0.2588);fill-opacity:1;"/></svg>');
        background-position: calc(100% - 5px) center;
        background-size: 30px;
        background-repeat: no-repeat;
        padding-right: calc(var(--size-3) + 25px)
    }

    .is-invalid, .is-invalid + .form-text, input[type=radio].is-invalid, input[type=checkbox].is-invalid, input[type=radio].is-invalid + label, input[type=checkbox].is-invalid + label {
        color: var(--warning);
        border-color: var(--warning)
    }

    .radio-group {
        display: flex;
        align-items: center
    }

        .radio-group label {
            font-size: var(--text-fluid-0);
            font-weight: var(--font-weight-semibold)
        }

            .radio-group label:has(input) {
                display: flex;
                align-items: center
            }

        .radio-group input[type=radio], .radio-group input[type=checkbox] {
            margin: 0 .75rem 0 0;
            width: 20px;
            height: 20px
        }

        .radio-group input[type=radio], .radio-group input[type=checkbox] {
            appearance: none;
            background-color: var(--white);
            width: 30px;
            height: 30px;
            border-radius: var(--radius-2);
            border: 2px var(--navy) solid;
            background-position: center;
            background-repeat: no-repeat;
            background-size: 70%
        }

            .radio-group input[type=radio]:checked, .radio-group input[type=checkbox]:checked {
                background-color: var(--purple);
                background-image: url('data:image/svg+xml,<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.2269 2.12104L15.9081 0.881455C15.7332 0.717236 15.496 0.625 15.2487 0.625C15.0015 0.625 14.7643 0.717236 14.5893 0.881455L6.18771 8.77847L3.41044 6.16801C3.23546 6.00379 2.9983 5.91156 2.75104 5.91156C2.50377 5.91156 2.26661 6.00379 2.09164 6.16801L0.772843 7.4076C0.59813 7.57206 0.5 7.79498 0.5 8.02739C0.5 8.2598 0.59813 8.48272 0.772843 8.64718L4.20951 11.8774C4.20951 11.8774 4.20951 11.879 4.21113 11.879L5.52993 13.1185C5.7049 13.2828 5.94206 13.375 6.18933 13.375C6.43659 13.375 6.67375 13.2828 6.84873 13.1185L17.2286 3.36215C17.5907 3.01867 17.5907 2.463 17.2269 2.12104Z" fill="white" style="fill:white;fill-opacity:1;"/></svg>')
            }

    .form-group[data-radio-type=button] {
        --outline-color: var(--navy)
    }

        .form-group[data-radio-type=button] .radio-group {
            flex: 1;
            max-width: 150px;
            position: relative
        }

            .form-group[data-radio-type=button] .radio-group input[type=radio] {
                position: absolute;
                clip: rect(0, 0, 0, 0);
                pointer-events: none
            }

            .form-group[data-radio-type=button] .radio-group label {
                flex: 1;
                color: var(--navy);
                background-color: var(--oat);
                border-radius: var(--radius-3);
                padding: var(--size-3) var(--size-5);
                border: 2px var(--navy) solid;
                font-size: 1rem;
                font-weight: var(--font-weight-bold);
                text-align: center
            }

                .form-group[data-radio-type=button] .radio-group label:hover {
                    background-color: var(--oat);
                    box-shadow: 5px 5px 0px color-mix(in srgb, var(--navy), transparent 80%)
                }

            .form-group[data-radio-type=button] .radio-group input[type=radio]:checked + label {
                background-color: var(--navy);
                color: var(--white)
            }

    .form-group[data-radio-type=pill] .radio-group {
        position: relative
    }

        .form-group[data-radio-type=pill] .radio-group label {
            font-size: var(--text-16);
            color: var(--filter-pill-colour, var(--navy));
            padding: calc(var(--size-3) - 3px) var(--size-4) calc(var(--size-3) - 3px) var(--size-3);
            background-color: var(--filter-pill-bg, var(--white));
            border: var(--filter-pill-border-width, 2px) var(--filter-pill-border-colour, var(--navy)) solid;
            border-radius: var(--radius-round);
            display: flex;
            gap: var(--size-2);
            transition: var(--transition-2);
            cursor: pointer
        }

        .form-group[data-radio-type=pill] .radio-group input[type=radio] {
            position: absolute;
            clip: rect(0, 0, 0, 0);
            pointer-events: none
        }

            .form-group[data-radio-type=pill] .radio-group input[type=radio]:not(:checked) + label {
                font-weight: var(--font-weight-normal)
            }

            .form-group[data-radio-type=pill] .radio-group input[type=radio]:checked + label {
                --filter-pill-border-colour: var(--purple);
                --filter-pill-colour: var(--white);
                --filter-pill-bg: var(--purple)
            }

                .form-group[data-radio-type=pill] .radio-group input[type=radio]:checked + label .icon {
                    --bg-color: var(--white)
                }

            .form-group[data-radio-type=pill] .radio-group:hover input[type=radio]:not(:checked) + label, .form-group[data-radio-type=pill] .radio-group input[type=radio]:focus:not(:hover,:checked) + label {
                box-shadow: 5px 5px 0px color-mix(in srgb, var(--navy), transparent 80%)
            }

    .switch-input {
        --switch-input-thumb-size: 30px;
        --switch-input-thumb-bg: #ffffff;
        --switch-input-thumb-stroke: 1px solid transparent;
        --switch-input-off-bg: var(--grey-4);
        --switch-input-off-text: #ffffff;
        --switch-input-on-bg: #00a878;
        --switch-input-on-text: var(--white);
        --switch-input-gutter: 4px;
        --switch-input-decor-space: var(--switch-input-gutter) 1.25ch;
        --switch-input-focus-stroke: 2px dashed var(--black);
        --switch-input-font-weight: var(--font-weight-6t);
        --switch-input-font-family: inherit;
        --switch-input-font-size: 18cqw;
        --switch-input-transition: inset 50ms linear;
        width: calc(var(--switch-input-thumb-size)*2 + var(--switch-input-gutter)*3);
        height: calc(var(--switch-input-thumb-size) + var(--switch-input-gutter)*2);
        border-radius: calc(var(--switch-input-thumb-size) + var(--switch-input-gutter));
        padding: var(--switch-input-gutter);
        margin-top: var(--size-1);
        background: var(--switch-input-off-bg);
        color: var(--switch-input-off-text);
        text-align: left;
        font-family: var(--switch-input-font-family);
        font-weight: var(--switch-input-font-weight);
        position: relative;
        cursor: pointer;
        container-type: inline-size
    }

    .switch-input__decor {
        position: absolute;
        inset-block: 0;
        inset-inline-start: 0;
        padding: var(--switch-input-decor-space);
        font-size: var(--switch-input-font-size);
        display: flex;
        width: 100%;
        align-items: center;
        user-select: none
    }

        .switch-input__decor[data-switch-input-state=off] {
            justify-content: flex-end
        }

    .switch-input__thumb {
        display: block;
        width: var(--switch-input-thumb-size);
        height: var(--switch-input-thumb-size);
        border-radius: var(--switch-input-thumb-size);
        background: var(--switch-input-thumb-bg);
        border: var(--switch-input-thumb-stroke);
        z-index: 1;
        position: absolute;
        inset-block-start: var(--switch-input-gutter);
        inset-inline-start: var(--switch-input-gutter);
        transition: var(--switch-input-transition)
    }

    .switch-input:has(:focus-visible) .switch-input__thumb {
        outline: var(--switch-input-focus-stroke)
    }

    .switch-input:has(:checked) {
        background: var(--switch-input-on-bg);
        color: var(--switch-input-on-text)
    }

        .switch-input:has(:checked) .switch-input__thumb {
            inset-inline-start: calc(var(--switch-input-thumb-size) + var(--switch-input-gutter)*2)
        }

    @media screen and (min-width: 768px) {
        .form[data-variant=two-col] {
            grid-template-columns: 1fr 1fr
        }

        .form[data-variant=two-col] {
            grid-template-columns: 1fr 1fr
        }

        .form-group[data-group-width=full] {
            grid-column: 1/-1
        }
    }
}

@layer blocks {
    section:has(.hero-img,.hero-icon) {
        min-height: 460px;
        display: flex;
        align-items: center
    }

    .hero {
        --min: 409px;
        --y-gap: var(--size-fluid-5);
        --x-gap: clamp(2rem, 4vw, 4rem);
        display: flex;
        gap: var(--y-gap) var(--x-gap);
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap
    }

        .hero .subheading {
            display: block;
            font-size: var(--text-fluid-4);
            font-weight: var(--font-weight-semibold);
            margin-top: 0;
            margin-bottom: var(--size-1)
        }

            .hero .subheading + * {
                margin-top: 0
            }

        .hero:has(.hero-img) p {
            max-width: 700px
        }

        .hero:has(.hero-icon) {
            --y-gap: 0
        }

        .hero:has(.product-button-container) p {
            width: min(558px,100%)
        }

        .hero > * {
            flex: 1;
            min-width: min(var(--min),100%);
            position: relative;
            margin-inline: auto
        }

            .hero > *:last-child {
                max-width: var(--max-width, 608px)
            }

        .hero .hero-img_graphic {
            --icon-size: min(300px, 20vw);
            position: relative;
            max-width: min(530px,80vw);
            margin-inline: auto
        }

            .hero .hero-img_graphic:has(picture:nth-child(2)) picture:nth-child(2) {
                display: none
            }

        .hero .trustpilot-box {
            position: absolute;
            inset: auto 0 -1rem auto;
            width: min(377px,100%);
            background-color: var(--white);
            padding: var(--size-fluid-2);
            border-radius: var(--radius-4);
            box-shadow: var(--shadow)
        }

            .hero .trustpilot-box .trustpilot-widget {
                scale: 1.2;
                margin-top: 4px
            }

    @media screen and (max-width: 340px) {
        .hero .trustpilot-box .trustpilot-widget {
            scale: 1.1
        }
    }

    .hero .cta-container {
        display: flex;
        gap: var(--size-5);
        flex-wrap: wrap;
        align-items: center
    }

    .hero .hero-icon {
        --icon-size: min(80%, 40vw)
    }

    .hero[data-columns=uneven] > *:last-child {
        margin-inline: 0
    }

    @media screen and (max-width: 767px) {
        .hero .cta-container .btn {
            width: 100%
        }

            .hero .cta-container .btn:first-of-type {
                --btn-text: var(--white);
                --btn-text-hover: var(--white);
                --btn-bg: var(--purple);
                --btn-bg-hover: var(--purple);
                --border-colour: var(--navy);
                --border-colour-hover: var(--navy)
            }

        .hero > *:last-child:has(.trustpilot-box) {
            margin-bottom: var(--size-4)
        }

        .hero .benefit-chip-container[data-hide=mobile] {
            display: none
        }

        .hero[data-variant=flipped] > *:last-child {
            order: -1
        }
    }

    @media screen and (min-width: 768px) {
        .hero .cta-container:has(.btn:nth-of-type(2)) .btn:nth-of-type(1) {
            display: none
        }

        .hero .hero-img_graphic:has(picture:nth-child(2)) picture:nth-child(2) {
            display: block
        }

        .hero .hero-img_graphic:has(picture:nth-child(2)) picture:nth-child(1) {
            display: none
        }
    }

    @media screen and (min-width: 1024px) {
        .hero.centred-desktop {
            text-align: center
        }
    }

    @media screen and (min-width: 1025px) {
        .hero .benefit-chip-container {
            display: flex
        }

        .hero[data-columns=uneven] > *:last-child {
            --max-width: 350px;
            margin-inline: 0;
            min-width: 0
        }
    }
}

@layer blocks {
    .product-btn {
        --icon-size: min(77%, 19vw);
        border-radius: var(--radius-fluid);
        background-color: var(--card-bg, var(--white));
        border: var(--border-width, 1px) var(--border-colour, var(--navy)) solid;
        box-shadow: 6px 6px 0 0 var(--shadow-bg, transparent);
        outline: var(--border-outline-width, 1px) var(--border-outline-colour, transparent) solid;
        padding: 0 var(--size-fluid-1) var(--size-fluid-2) var(--size-fluid-1);
        display: grid;
        justify-items: center;
        align-content: center;
        text-align: center;
        transition: var(--transition-1);
        aspect-ratio: 1;
        position: relative
    }

    @media screen and (max-width: 767px) {
        .product-btn[data-variant=nav] {
            --icon-size: min(100%, 15vw);
            display: flex;
            gap: var(--size-3);
            padding: var(--size-fluid-1);
            align-items: center;
            aspect-ratio: initial
        }
    }

    .product-btn::before {
        content: "";
        transition: var(--transition-1);
        position: absolute
    }

    .product-btn::before {
        --sparkle-inset: -.75rem;
        width: min(20px,5vw);
        aspect-ratio: 20/18;
        background: var(--card-sparkle) no-repeat center/contain;
        inset: var(--sparkle-inset) auto auto var(--sparkle-inset);
        opacity: 0;
        pointer-events: none
    }

    .product-btn_heading {
        font-size: var(--text-fluid-00);
        color: var(--navy)
    }

    .product-btn[data-variant=nav] {
        --border-outline-width: 2px;
        --border-colour: transparent;
        --card-bg: var(--oat)
    }

    @media(hover: hover) {
        .product-btn:is(:hover,:focus-visible) {
            --outline-size: 0;
            --border-outline-colour: var(--navy);
            --card-bg: var(--oat);
            --shadow-bg: color-mix(in srgb, var(--navy), transparent 80%)
        }

            .product-btn:is(:hover,:focus-visible)::before {
                opacity: 1
            }

        .product-btn[data-variant=nav]:is(:hover,:focus-visible) {
            --border-outline-colour: var(--navy)
        }
    }
}

@layer blocks {
    .benefit-chip {
        display: flex;
        align-items: center;
        gap: var(--size-2);
        padding: var(--size-2) var(--size-4) var(--size-2) var(--size-3);
        background-color: var(--white);
        border-radius: var(--radius-round);
        font-weight: var(--font-weight-7);
        font-size: var(--text-14);
        background-color: color-mix(in srgb, var(--white), transparent 40%);
        color: var(--navy)
    }

        .benefit-chip[data-variant=oat] {
            background-color: var(--oat)
        }

        .benefit-chip[data-variant=white] {
            background-color: var(--white)
        }

    @media screen and (max-width: 767px) {
        .benefit-chip {
            font-weight: var(--font-weight-6)
        }

            .benefit-chip[data-mobile-minimal=true] {
                background-color: transparent;
                padding: 0
            }
    }
}

@layer blocks {
    .benefit-card {
        --btn-min-width: 0;
        --icon-size: min(110px, 30vw);
        border-radius: var(--radius-fluid);
        background-color: var(--card-bg, var(--white));
        border: var(--border-width, 1px) var(--border-colour, var(--navy)) solid;
        outline: 1px var(--border-outline-colour, transparent) solid;
        padding: var(--size-fluid-2);
        display: flex;
        flex-direction: column;
        transition: var(--transition-1);
        position: relative;
        box-shadow: 6px 6px 0 0 var(--shadow-bg, transparent)
    }

        .benefit-card:has(.illustration-icon) {
            padding-top: var(--size-fluid-1)
        }

            .benefit-card:has(.illustration-icon) .benefit-card_copy {
                margin-top: var(--size-2)
            }

        .benefit-card:has(a)::before {
            content: "";
            transition: var(--transition-1);
            position: absolute
        }

        .benefit-card:has(a) .benefit-card_copy:has(+a) {
            margin-bottom: var(--size-fluid-3)
        }

        .benefit-card:not([data-variant=help]):before {
            --sparkle-inset: -.75rem;
            width: min(20px,5vw);
            aspect-ratio: 20/18;
            background: var(--card-sparkle) no-repeat center/contain;
            inset: var(--sparkle-inset) auto auto var(--sparkle-inset);
            opacity: 0;
            pointer-events: none
        }

    .benefit-card_copy {
        color: var(--navy)
    }

        .benefit-card_copy .benefit-heading {
            font-size: var(--text-18);
            margin-bottom: var(--size-2);
            display: flex;
            align-items: center;
            gap: var(--size-2);
            flex-wrap: wrap
        }

    .benefit-card a:not([class]) {
        font-weight: var(--font-weight-normal);
        position: relative;
        z-index: 2
    }

    .benefit-card a.btn {
        margin-top: auto
    }

        .benefit-card a.btn::before {
            content: "";
            position: absolute;
            inset: 0
        }

    .benefit-card[data-variant=help] {
        padding: var(--size-fluid-2)
    }

        .benefit-card[data-variant=help] .secondary-icon {
            margin-left: auto;
            flex: none
        }

            .benefit-card[data-variant=help] .secondary-icon img {
                width: 72px;
                aspect-ratio: 1;
                object-fit: contain
            }

    .benefit-card[data-variant=horizontal] .logo {
        flex: none;
        margin-bottom: var(--size-4)
    }

        .benefit-card[data-variant=horizontal] .logo img {
            height: 130px
        }

    @media(hover: hover) {
        .benefit-card:has(a):hover, .benefit-card:has(a):has(a:focus-visible) {
            --border-outline-colour: var(--navy);
            --border-colour: var(--navy);
            --shadow-bg: color-mix(in srgb, var(--navy), transparent 80%);
            --outline-size: 0;
            --border-colour: var(--navy);
            --card-bg: var(--oat);
            --shadow-bg: color-mix(in srgb, var(--navy), transparent 80%)
        }

            .benefit-card:has(a):hover::before, .benefit-card:has(a):has(a:focus-visible)::before {
                opacity: 1
            }
    }

    @media screen and (min-width: 768px) {
        .benefit-card[data-variant=horizontal] {
            flex-direction: row
        }

            .benefit-card[data-variant=horizontal] .logo {
                margin: 0 var(--size-4) 0 0
            }
    }
}

.blog-article-card {
    --card-radius: var(--radius-4);
    background-color: var(--navy);
    border-radius: var(--radius-4);
    outline: 2px var(--border-outline-colour, transparent) solid;
    color: var(--white);
    position: relative;
    display: grid;
    align-content: flex-start;
    box-shadow: 6px 6px 0 0 var(--shadow-bg, transparent);
    transition: var(--transition-1);
    width: 100%
}

.blog-article-card_img {
    border-radius: var(--card-radius) var(--card-radius) 0 0;
    overflow: hidden;
    aspect-ratio: 359/180
}

    .blog-article-card_img :is(picture,img) {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .blog-article-card_img .category-pill {
        background-color: var(--white);
        border-radius: var(--radius-round);
        position: absolute;
        inset: 1rem auto auto 1rem;
        font-size: var(--text-14);
        color: var(--navy);
        display: flex;
        align-items: center;
        gap: var(--size-1);
        padding: var(--size-1) var(--size-3);
        line-height: var(--lineheight-2)
    }

        .blog-article-card_img .category-pill .icon {
            margin-left: -0.25rem
        }

.blog-article-card_copy {
    color: inherit;
    padding: var(--size-fluid-2)
}

    .blog-article-card_copy::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2
    }

    .blog-article-card_copy .article-heading {
        font-size: var(--text-18);
        margin-bottom: var(--size-1)
    }

    .blog-article-card_copy p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        overflow: hidden
    }

.blog-article-card_footer {
    padding: var(--size-fluid-2);
    padding-top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: min(var(--size-fluid-2),2vw);
    font-size: var(--text-12)
}

    .blog-article-card_footer > * {
        display: flex;
        gap: var(--size-2);
        align-items: center
    }

    .blog-article-card_footer .flourish {
        margin-left: auto
    }

@media(hover: hover) {
    .blog-article-card:hover, .blog-article-card:has(a:focus-visible) {
        --border-outline-colour: var(--border-colour);
        --border-colour: var(--navy);
        --shadow-bg: color-mix(in srgb, var(--navy), transparent 80%)
    }

        .blog-article-card:hover a, .blog-article-card:has(a:focus-visible) a {
            outline: none
        }
}

.blog-article-card[data-featured] .blog-article-card_footer {
    gap: min(var(--size-fluid-3),2vw)
}

@media screen and (max-width: 767px) {
    .blog-article-card[data-mobile=horizontal] {
        grid-template-columns: 45% 55%;
        gap: 0;
        grid-template-areas: "image copy" "image footer";
        align-items: stretch;
        min-height: 155px
    }

        .blog-article-card[data-mobile=horizontal] .blog-article-card_img {
            grid-area: image;
            border-radius: var(--card-radius) 0 0 var(--card-radius);
            width: 100%;
            height: 100%;
            aspect-ratio: 147/174;
            position: relative
        }

            .blog-article-card[data-mobile=horizontal] .blog-article-card_img .category-pill {
                max-width: calc(100% - 2rem);
                font-size: var(--text-12)
            }

        .blog-article-card[data-mobile=horizontal] .blog-article-card_copy {
            grid-area: copy
        }

            .blog-article-card[data-mobile=horizontal] .blog-article-card_copy .article-heading {
                font-size: var(--text-16)
            }

            .blog-article-card[data-mobile=horizontal] .blog-article-card_copy p {
                font-size: var(--text-14);
                -webkit-line-clamp: 2;
                line-clamp: 2
            }

        .blog-article-card[data-mobile=horizontal] .blog-article-card_footer {
            grid-area: footer
        }

        .blog-article-card[data-mobile=horizontal] .flourish {
            display: none
        }

    .blog-article-card[data-featured] .flourish {
        display: none
    }
}

@media screen and (min-width: 768px) {
    .blog-article-card:not([data-featured]) {
        display: flex;
        flex-direction: column
    }

        .blog-article-card:not([data-featured]) .blog-article-card_footer {
            margin-top: auto
        }

    .blog-article-card[data-featured] {
        grid-template-columns: 45% 55%;
        gap: 0;
        grid-template-areas: "image copy" "image footer";
        align-items: stretch;
        align-content: stretch;
        min-height: 330px
    }

        .blog-article-card[data-featured] .blog-article-card_img {
            grid-area: image;
            border-radius: var(--card-radius) 0 0 var(--card-radius);
            width: 100%;
            height: 100%;
            aspect-ratio: 632/421
        }

        .blog-article-card[data-featured] .blog-article-card_copy {
            grid-area: copy
        }

            .blog-article-card[data-featured] .blog-article-card_copy .article-heading {
                font-size: var(--text-26)
            }

        .blog-article-card[data-featured] .blog-article-card_footer {
            grid-area: footer;
            align-self: flex-end;
            font-size: var(--text-14)
        }
}

@layer blocks {
    .hub-article a:not([class]), .hub-article .text-link {
        --accent: var(--navy);
        --hover-mix-colour: var(--purple);
        --mix-percent: 100%;
        font-weight: var(--font-weight-semibold)
    }

    .hub-article h2, .hub-article h3, .hub-article h4, .hub-article h5, .hub-article h6 {
        font-weight: var(--font-weight-bold)
    }

    .hub-article h2 {
        font-size: var(--text-fluid-5)
    }

    .hub-article h3 {
        font-size: var(--text-fluid-2)
    }

    .hub-article h4, .hub-article h5, .hub-article h6 {
        font-size: var(--text-fluid-0)
    }

    .hub-article img {
        border-radius: var(--radius-4)
    }

    .hub-article .article-img {
        width: calc(100% + var(--size-5) + var(--size-5));
        margin-block: 2.5rem;
        margin-inline-start: calc(-1*var(--size-5));
        max-width: none;
        border-radius: 0
    }

    .hub-article figcaption {
        font-size: var(--text-15);
        font-style: italic;
        margin-top: var(--size-3)
    }

    @media(min-width: 926px) {
        .hub-article .article-img {
            width: 100%;
            margin-inline-start: 0;
            border-radius: var(--radius-4)
        }
    }
}

:root {
    --cta-bar-min-height: 60px
}

@layer blocks {
    .article-cta-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: var(--size-3) var(--size-5);
        z-index: 10;
        min-height: var(--cta-bar-min-height)
    }

        .article-cta-bar > * {
            display: flex;
            gap: var(--size-5);
            justify-content: space-between;
            align-items: center
        }

    @media screen and (max-width: 1023px) {
        body:has(.article-cta-bar) #CXUI_extButtonContainer {
            bottom: calc(var(--cta-bar-min-height) + 25px) !important
        }
    }

    @media screen and (min-width: 1024px) {
        .article-cta-bar {
            display: none
        }
    }
}

@layer blocks {
    .multi-tag-toggle {
        padding: var(--size-2) var(--size-3);
        background-color: var(--navy);
        color: var(--white);
        border-radius: var(--radius-2);
        visibility: visible;
        display: flex;
        align-items: center;
        gap: var(--size-2)
    }

        .multi-tag-toggle .icon:last-child {
            transition: var(--transition-1)
        }

        .multi-tag-toggle[aria-expanded=true] {
            background-color: var(--purple)
        }

            .multi-tag-toggle[aria-expanded=true] .icon:last-child {
                rotate: 45deg
            }

    .multi-tag-container {
        --item-spacing: var(--size-5);
        width: 100%;
        background-color: var(--oat);
        padding: var(--size-5);
        flex: none;
        display: flex;
        gap: var(--size-fluid-3)
    }

        .multi-tag-container:not(.active) {
            display: none
        }

        .multi-tag-container > * {
            flex: 1;
            display: flex
        }

        .multi-tag-container .form-group {
            flex: 1
        }

            .multi-tag-container .form-group select {
                min-height: 53px
            }

        .multi-tag-container .multi-tag-selector {
            position: relative
        }

            .multi-tag-container .multi-tag-selector .tag-container {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                min-height: 53px;
                padding-block: var(--size-2)
            }

                .multi-tag-container .multi-tag-selector .tag-container:empty::before {
                    content: "All"
                }

            .multi-tag-container .multi-tag-selector .tag {
                background: var(--purple);
                color: var(--white);
                font-weight: var(--font-weight-semibold);
                padding: 2px 8px;
                border-radius: var(--radius-2);
                margin: 2px;
                display: flex;
                align-items: center
            }

                .multi-tag-container .multi-tag-selector .tag .remove {
                    margin-left: 5px;
                    cursor: pointer;
                    color: var(--white)
                }

            .multi-tag-container .multi-tag-selector .more-tags {
                margin-left: 5px
            }

        .multi-tag-container .dropdown > * {
            display: flex;
            flex-direction: column;
            gap: var(--size-7);
            align-items: flex-start;
            flex: 1
        }

        .multi-tag-container .dropdown .radio-group label {
            font-weight: var(--font-weight-normal);
            font-size: var(--text-16)
        }

    @media screen and (max-width: 1023px) {
        .multi-tag-container {
            width: 100vw;
            margin-left: calc(-1*var(--item-spacing));
            flex-direction: column
        }

            .multi-tag-container .clear-filter {
                position: absolute;
                inset: var(--modal-padding) var(--modal-padding) auto auto
            }

            .multi-tag-container .dropdown {
                --modal-padding: min(2.25rem, 6vw);
                position: fixed;
                -webkit-overflow-scrolling: touch;
                overflow-x: clip;
                overflow-y: auto;
                overscroll-behavior: contain;
                width: min(100vw,550px);
                opacity: 1;
                padding: var(--modal-padding) var(--modal-padding) 0 var(--modal-padding);
                inset: 0;
                transition: all .5s var(--transition-bezier-2);
                visibility: visible;
                z-index: 99;
                min-height: 100vh;
                min-height: 100dvh;
                transform: translateX(110%);
                box-shadow: -5px 0 30px rgba(0,0,0,.15);
                background-color: var(--oat-3);
                margin-left: auto;
                display: flex;
                flex-direction: column
            }

                .multi-tag-container .dropdown:is(.active) {
                    transform: translateX(0%)
                }

                .multi-tag-container .dropdown .form {
                    flex: 1
                }

                .multi-tag-container .dropdown .close-button-footer {
                    position: sticky;
                    bottom: 0;
                    padding: var(--modal-padding);
                    width: calc(100% + var(--modal-padding) + var(--modal-padding));
                    margin-left: calc(-1*var(--modal-padding));
                    background-color: var(--oat-3);
                    flex-grow: 0
                }

        body:has(.multi-tag-container .dropdown.active) {
            overflow: hidden
        }
    }

    @media screen and (min-width: 1024px) {
        .multi-tag-container {
            border-radius: var(--radius-4)
        }

            .multi-tag-container .close-button-header, .multi-tag-container .close-button-footer {
                display: none
            }

            .multi-tag-container .dropdown {
                border-radius: var(--radius-3);
                position: absolute;
                top: calc(100% + 1rem);
                left: 0;
                width: 100%;
                border: 1px solid var(--navy);
                background: var(--white);
                max-height: 300px;
                overflow-y: auto;
                display: none;
                z-index: 99;
                padding: var(--size-3)
            }

                .multi-tag-container .dropdown h4 {
                    display: none
                }

                .multi-tag-container .dropdown .radio-group input[type=checkbox] {
                    width: 24px;
                    height: 24px
                }

                .multi-tag-container .dropdown.active {
                    display: block
                }
    }
}

@layer blocks {
    .share-box_items {
        display: flex;
        gap: min(var(--size-4),4vw);
        justify-content: space-between;
        max-width: 400px
    }

        .share-box_items > * {
            background-color: var(--navy);
            border-radius: var(--radius-3)
        }

            .share-box_items > * a {
                padding: min(var(--size-3),2.5vw)
            }
}

@layer blocks {
    .breadcrumb-list {
        display: flex;
        gap: var(--size-1);
        font-size: var(--text-fluid-000);
        flex-wrap: wrap
    }

        .breadcrumb-list > * {
            display: flex;
            align-items: center;
            gap: var(--size-1);
            overflow: hidden;
            text-overflow: ellipsis
        }

            .breadcrumb-list > *:last-of-type .icon {
                display: none
            }

            .breadcrumb-list > * a {
                text-decoration: none;
                color: inherit;
                line-height: var(--lineheight-3);
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden
            }

                .breadcrumb-list > * a:not([aria-current=page]) {
                    font-weight: var(--font-weight-semibold)
                }
}

@layer blocks {
    .product-card {
        --card-radius: var(--radius-4);
        --icon-size: min(130px, 26vw);
        color: var(--card-text-colour, var(--navy));
        background-color: var(--card-bg, var(--oat));
        border-radius: var(--radius-4);
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        outline: 2px var(--border-colour, transparent) solid;
        transition: var(--transition-1);
        padding: var(--size-fluid-3);
        box-shadow: 7px 7px 0 0 var(--shadow-bg, transparent)
    }

        .product-card[data-illustration-size=sm] {
            --icon-size: min(100px, 26vw)
        }

        .product-card:has(.illustration-icon) {
            padding-top: var(--size-fluid-1)
        }

    .product-card_copy {
        color: inherit;
        padding-bottom: var(--size-fluid-1)
    }

        .product-card_copy::after {
            content: "";
            position: absolute;
            inset: 0
        }

        .product-card_copy .product-heading {
            color: var(--card-heading-colour, inherit);
            font-size: var(--text-26);
            margin-bottom: var(--size-3);
            display: flex;
            flex-wrap: wrap;
            column-gap: var(--size-2);
            align-items: center
        }

            .product-card_copy .product-heading img {
                height: 26px
            }

    .product-card .logo img {
        height: 40px
    }

    .product-card .logo[data-size=lg] img {
        height: 80px
    }

    .product-card .logo + .product-card_copy {
        padding-top: var(--size-fluid-2)
    }

    .product-card:has(.logo) .product-heading {
        font-size: var(--text-18)
    }

    .illustration-icon + .product-card_copy {
        padding-top: var(--size-1)
    }

    .product-card_footer {
        display: flex;
        justify-content: flex-end;
        margin: auto 0 0 auto
    }

    @media(hover: hover) {
        .product-card:has(a):hover, .product-card:has(a:focus-visible) {
            --border-colour: var(--navy);
            --shadow-bg: color-mix(in srgb, var(--navy), transparent 80%);
            background-color: var(--card-bg-hover, var(--oat))
        }

            .product-card:has(a):hover a, .product-card:has(a:focus-visible) a {
                outline: none
            }
    }

    .product-card[data-variant=white] {
        --card-bg: var(--white)
    }

    .product-card[data-variant=aqua] {
        --card-bg-hover: var(--aqua);
        --card-bg: var(--aqua)
    }

    .product-card[data-variant=pink] {
        --card-bg-hover: var(--light-pink);
        --card-bg: var(--light-pink)
    }

    .product-card[data-variant=navy] {
        --card-heading-colour: var(--aqua);
        --card-text-colour: var(--white);
        --card-bg-hover: var(--navy);
        --card-bg: var(--navy)
    }

        .product-card[data-variant=navy] .flourish svg * {
            stroke: var(--aqua)
        }

        .product-card[data-variant=navy] .flourish .icon {
            --bg-color: var(--aqua)
        }

    .product-card[data-variant=purple] {
        --card-text-colour: var(--white);
        --card-bg-hover: var(--purple);
        --card-bg: var(--purple)
    }

        .product-card[data-variant=purple] .flourish svg * {
            stroke: var(--white)
        }

        .product-card[data-variant=purple] .flourish .icon {
            --bg-color: var(--white)
        }

    @media screen and (min-width: 768px) {
        .product-card {
            aspect-ratio: 1;
            width: 100%
        }

        :is(.ancillaries-card-container,.filter-results) .product-card {
            aspect-ratio: initial
        }
    }
}

@layer composition {
    .flourish {
        position: relative;
        pointer-events: none
    }

        .flourish svg {
            position: absolute;
            width: 60px;
            height: 50px;
            max-width: none;
            top: 50%;
            left: 50%;
            translate: -50% -50%;
            stroke-dasharray: 150;
            stroke-dashoffset: 150;
            transition: var(--transition-1)
        }

    @media(hover: hover) {
        [data-hover-parent]:hover .flourish svg, [data-hover-parent]:has(a:focus-visible) .flourish svg {
            opacity: 1;
            animation: drawto .5s ease forwards
        }

        @keyframes drawto {
            to {
                stroke-dashoffset: 0
            }
        }

        section:has([data-hover-parent] .flourish):not(:hover) .flourish svg {
            opacity: 0
        }
    }
}

@layer composition {
    .swiper .swiper-wrapper {
        --swiper-wrapper-transition-timing-function: var(--transition-bezier)
    }

        .swiper .swiper-wrapper .swiper-slide:not([hidden]) {
            height: auto;
            display: flex;
            scroll-snap-align: start
        }

        .swiper .swiper-wrapper .swiper-slide[hidden] {
            scroll-snap-align: none
        }

    .swiper .pagination-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: var(--size-5)
    }

        .swiper .pagination-container .swiper-pagination {
            --swiper-pagination-color: var(--purple);
            --swiper-pagination-bullet-width: calc(var(--size-3) * var(--pagination-scaling, 1));
            --swiper-pagination-bullet-height: calc(var(--size-3) * var(--pagination-scaling, 1));
            --swiper-pagination-bullet-horizontal-gap: 0;
            position: static;
            width: auto;
            display: flex;
            flex-wrap: wrap;
            gap: var(--size-3);
            max-width: calc(100% - var(--size-5) - 96px)
        }

        .swiper .pagination-container .pagination-arrows {
            display: flex;
            gap: var(--size-3)
        }

            .swiper .pagination-container .pagination-arrows > * {
                width: clamp(2.5rem,2.229rem + 1.1561vw,3.125rem);
                aspect-ratio: 1;
                margin: 0;
                height: auto;
                border-radius: var(--radius-round);
                background-color: var(--purple);
                transition: var(--transition-1)
            }

                .swiper .pagination-container .pagination-arrows > *.swiper-button-disabled {
                    opacity: 1;
                    background-color: var(--medium-grey)
                }

                .swiper .pagination-container .pagination-arrows > *:hover:not(.swiper-button-disable) {
                    background-color: color-mix(in srgb, var(--purple), var(--black) 10%)
                }

            .swiper .pagination-container .pagination-arrows .swiper-button-prev, .swiper .pagination-container .pagination-arrows .swiper-button-next {
                position: static
            }

                .swiper .pagination-container .pagination-arrows .swiper-button-prev::before, .swiper .pagination-container .pagination-arrows .swiper-button-next::before {
                    content: "";
                    width: 100%;
                    aspect-ratio: 1;
                    mask-image: var(--iconimg);
                    mask-size: 80%;
                    mask-repeat: no-repeat;
                    mask-position: center;
                    background-color: var(--white)
                }

                .swiper .pagination-container .pagination-arrows .swiper-button-prev::after, .swiper .pagination-container .pagination-arrows .swiper-button-next::after {
                    font-family: inherit;
                    font-size: 1px;
                    opacity: 0;
                    width: 0;
                    height: 0
                }

            .swiper .pagination-container .pagination-arrows .swiper-button-next {
                scale: -1 1
            }

    .swiper.generic {
        margin: 0 calc(-1*var(--size-5))
    }

        .swiper.generic .pagination-container:not(:has(.swiper-pagination-lock)) {
            margin: var(--size-fluid-3) var(--size-5) 0 var(--size-5)
        }

        .swiper.generic .pagination-container:has(.swiper-pagination-lock+.btn) .btn {
            margin-top: var(--size-3)
        }

    .swiper:has(.pagination-container .btn) {
        padding-bottom: var(--size-2)
    }

    @media screen and (max-width: 1024px) {
        .swiper.generic .swiper-wrapper {
            padding-inline: var(--size-5);
            padding-block: 7px;
            scroll-padding-inline: var(--size-5);
            box-sizing: border-box;
            scroll-snap-type: x mandatory;
            overflow-x: scroll
        }

            .swiper.generic .swiper-wrapper .swiper-slide {
                width: var(--min-width, min(370px, 75vw))
            }

        .swiper:not(:has(.quote-card+.inner)) .pagination-container .swiper-pagination {
            --pagination-scaling: .75
        }

        .swiper:not(:has(.quote-card+.inner)) .pagination-container .swiper-pagination, .swiper:not(:has(.quote-card+.inner)) .pagination-container .pagination-arrows {
            display: none
        }
    }

    @media screen and (max-width: 767px) {
        .swiper.generic .swiper-wrapper {
            display: flex;
            flex-wrap: nowrap;
            gap: var(--size-fluid-3)
        }

            .swiper.generic .swiper-wrapper .swiper-slide[style] {
                margin-right: 0 !important
            }
    }

    @media screen and (min-width: 1025px) {
        .swiper.generic {
            padding: 0 var(--size-5);
            padding-inline: var(--size-5)
        }

            .swiper.generic .swiper-wrapper {
                padding-inline: 0;
                padding-block-end: var(--size-5)
            }

                .swiper.generic .swiper-wrapper:has(.benefit-card) {
                    padding-block-start: var(--size-5)
                }

            .swiper.generic .pagination-container {
                margin-inline: 0
            }
    }
}

@layer blocks {
    .text-img-panel > *:first-child picture {
        max-width: min(100%,80vw);
        margin-inline: auto
    }

    .text-img-panel .cta-container {
        container-type: inline-size;
        display: flex;
        flex-wrap: wrap;
        gap: var(--size-5);
        align-items: center;
        max-width: min(100%,600px)
    }

        .text-img-panel .cta-container .btn {
            white-space: nowrap
        }

        .text-img-panel .cta-container img {
            max-height: 60px;
            width: auto
        }

    .text-img-panel .section-heading {
        text-wrap: wrap
    }

    @media screen and (max-width: 767px) {
        .text-img-panel .cta-container:has(a:nth-child(2) img) {
            flex-wrap: nowrap
        }
    }

    @media screen and (min-width: 768px) {
        .text-img-panel .cta-container:has(.btn:nth-of-type(2)) > * {
            flex: 1
        }
    }

    @container (max-width: 500px) {
        .text-img-panel .cta-container:has(.btn:nth-of-type(2)) > * {
            flex: none;
            width: 100%
        }
    }
}

@layer blocks {
    .columns-panel {
        --min: 360px;
        --max: 539px;
        --y-gap: var(--size-fluid-4);
        --x-gap: clamp(5rem, 12vw, 7rem);
        display: flex;
        gap: var(--y-gap) var(--x-gap);
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap
    }

        .columns-panel > * {
            flex: 1;
            min-width: min(var(--min),100%);
            position: relative
        }

            .columns-panel > *:first-child {
                max-width: min(var(--max),100%);
                position: relative;
                z-index: 3
            }
}

@layer blocks {
    .filter-buttons {
        display: flex;
        gap: var(--size-3);
        flex-wrap: wrap
    }

    .filter-buttons_heading {
        font-size: var(--text-16);
        font-weight: var(--font-weight-semibold);
        width: 100%
    }

    .filter-buttons:not([data-variant=pills]) .filter-buttons_filter-block {
        display: flex;
        justify-content: space-between;
        gap: var(--size-2);
        border-radius: var(--radius-round);
        border: 2px var(--navy) solid;
        padding: 3px;
        background-color: var(--white)
    }

        .filter-buttons:not([data-variant=pills]) .filter-buttons_filter-block button {
            --outline-color: var(--navy);
            color: var(--navy);
            border-radius: var(--radius-round);
            padding: var(--size-2) var(--size-3);
            font-size: var(--text-fluid-000);
            line-height: var(--lineheight-5);
            text-wrap: balance;
            transition: var(--transition-2)
        }

            .filter-buttons:not([data-variant=pills]) .filter-buttons_filter-block button:not([aria-pressed=true]) {
                font-weight: var(--font-weight-medium)
            }

            .filter-buttons:not([data-variant=pills]) .filter-buttons_filter-block button:hover:not([aria-pressed=true]) {
                background-color: var(--oat)
            }

            .filter-buttons:not([data-variant=pills]) .filter-buttons_filter-block button[aria-pressed=true] {
                color: var(--active-text, var(--white));
                background-color: var(--active-colour, var(--purple))
            }

    .filter-buttons[data-variant=pills] .filter-buttons_filter-block {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--size-1)
    }

        .filter-buttons[data-variant=pills] .filter-buttons_filter-block button {
            font-size: var(--text-fluid-0);
            padding: var(--size-3) var(--size-4) var(--size-3) var(--size-3);
            background-color: var(--filter-pill-bg, transparent);
            border: var(--filter-pill-border-width, 1px) var(--filter-pill-border-colour, transparent) solid;
            border-radius: var(--radius-round);
            display: flex;
            gap: var(--size-2);
            transition: var(--transition-1)
        }

            .filter-buttons[data-variant=pills] .filter-buttons_filter-block button .underline-link {
                position: relative
            }

                .filter-buttons[data-variant=pills] .filter-buttons_filter-block button .underline-link::after {
                    position: absolute;
                    top: 100%;
                    left: 0
                }

            .filter-buttons[data-variant=pills] .filter-buttons_filter-block button[aria-pressed=true] {
                --filter-pill-bg: var(--white);
                --filter-pill-border-colour: var(--navy);
                box-shadow: 0 5px 15px rgba(0,0,0,.05)
            }

                .filter-buttons[data-variant=pills] .filter-buttons_filter-block button[aria-pressed=true] .underline-link::after {
                    --underline-color: transparent
                }

    .filter-panel:not(.sticky-columns-panel) .filter-buttons {
        justify-content: center
    }
}

@layer blocks {
    .cover-benefits-card {
        display: grid;
        gap: var(--size-2);
        background-color: var(--card-bg, var(--white));
        padding: var(--size-fluid-3);
        border-radius: var(--radius-4);
        border: 1px var(--card-border, var(--navy)) solid;
        position: relative
    }

    .cover-benefits-card_heading {
        font-size: var(--text-fluid-2);
        display: flex;
        gap: var(--size-2);
        align-items: center
    }

    .cover-benefits-card .text-icon {
        font-size: var(--text-fluid-6);
        font-weight: var(--font-weight-bold);
        color: var(--purple)
    }

    @media screen and (min-width: 768px) {
        .cover-benefits-card {
            padding-right: calc(var(--size-fluid-3) + var(--size-fluid-3) + 70px)
        }

            .cover-benefits-card .icon, .cover-benefits-card .text-icon {
                --icon-size: 70px;
                position: absolute;
                inset: 50% var(--size-fluid-2) auto auto;
                translate: 0 -50%
            }
    }
}

@layer blocks {
    .cover-product-card {
        width: 100%;
        background-color: var(--bg, var(--white));
        border: 1px var(--card-border, var(--navy)) solid;
        border-radius: var(--radius-3);
        overflow: hidden;
        display: flex;
        flex-direction: column
    }

        .cover-product-card > * {
            padding: var(--size-fluid-3)
        }

    .cover-product-card_header {
        display: grid;
        gap: var(--size-2);
        min-height: 190px
    }

        .cover-product-card_header p {
            color: var(--medium-grey)
        }

        .cover-product-card_header img {
            height: 50px;
            margin-bottom: var(--size-1)
        }

    .cover-product-card_table {
        color: var(--table-text-colour, var(--white));
        background-color: var(--table-bg, var(--navy));
        flex: 1
    }

        .cover-product-card_table .subheader {
            font-size: var(--text-16)
        }

        .cover-product-card_table ul {
            display: grid;
            gap: var(--size-3)
        }

            .cover-product-card_table ul li {
                display: flex;
                gap: var(--size-3);
                align-items: flex-start
            }

                .cover-product-card_table ul li .icon {
                    margin-top: 2px;
                    gap: 0;
                    font-size: 0
                }

    .rac-cover .cover-product-card_header {
        min-height: 0
    }
}

@layer blocks {
    details {
        --flow-space: 1rem;
        padding: 0;
        width: 100%;
        position: relative;
        border-bottom: var(--details-border-width, 1px) var(--navy) solid;
        border-radius: 0px
    }

        details:only-child {
            --details-border-width: 0px
        }

        details + details {
            margin-top: 0
        }

        details > div {
            padding: 0 0 var(--size-6) 0
        }

    summary {
        --arrow-size: 40px;
        width: 100%;
        padding: var(--details-padding-y, var(--size-5)) calc(var(--size-1) + var(--arrow-size)) var(--details-padding-y, var(--size-5)) 0;
        display: block;
        position: relative;
        font-size: var(--font-size, var(--text-fluid-0));
        font-weight: var(--font-weight-semibold);
        cursor: pointer;
        transition: var(--transition-1)
    }

        summary::after {
            content: "";
            width: var(--arrow-size);
            aspect-ratio: 1;
            position: absolute;
            inset: 50% 0 auto auto;
            translate: 0 -50%;
            transition: var(--transition-1);
            background: var(--purple);
            mask-image: var(--ui-chevron-icon-mask);
            mask-size: 85%;
            mask-repeat: no-repeat;
            mask-position: center;
            rotate: 90deg
        }

    [open] summary::after {
        rotate: -90deg
    }

    summary::-webkit-details-marker {
        display: none
    }
}

@layer blocks {
    details[data-variant=modal-toggle] {
        --font-size: var(--text-16);
        --details-border-width: 0px;
        --details-padding-y: var(--size-2);
        --toggle-copy-bg: var(--light-pink-2);
        --notch-height: 25px;
        --notch-width: 40px
    }

        details[data-variant=modal-toggle] .cover-title {
            display: flex;
            gap: var(--size-3);
            align-items: center
        }

        details[data-variant=modal-toggle] > div {
            position: relative;
            margin-top: var(--notch-height);
            background-color: var(--toggle-copy-bg);
            padding: var(--size-fluid-2) var(--size-fluid-3);
            margin-bottom: var(--size-3)
        }

            details[data-variant=modal-toggle] > div::before {
                content: "";
                width: var(--notch-width);
                height: var(--notch-height);
                background-color: var(--toggle-copy-bg);
                position: absolute;
                inset: calc(-1*var(--notch-height)) auto auto calc(50% - var(--notch-width)/2);
                clip-path: polygon(50% 0, 85% 100%, 15% 100%)
            }
}

@layer blocks {
    ul:not([class]):not([role]), ol:not([class]):not([role]) {
        padding-left: var(--size-3)
    }

        ul:not([class]):not([role]) li + li, ol:not([class]):not([role]) li + li {
            margin-top: .75rem
        }

        ul:not([class]):not([role]) li::marker {
            color: var(--navy);
            font-size: .75em
        }

    ul:not([class]):not([role]) {
        list-style-type: disc
    }

    ol:not([class]):not([role]) {
        list-style-type: numeric
    }
}

@layer blocks {
    .styled-number-list {
        --roundel-width: var(--size-6);
        counter-reset: num;
        display: grid;
        gap: var(--size-4)
    }

        .styled-number-list > li {
            counter-increment: num;
            position: relative
        }

            .styled-number-list > li:not(.flow) .list-heading {
                margin-bottom: var(--size-2)
            }

            .styled-number-list > li > * {
                padding-left: calc(var(--roundel-width) + var(--size-2))
            }

            .styled-number-list > li .list-heading {
                font-size: var(--text-fluid-2)
            }

                .styled-number-list > li .list-heading::before {
                    position: absolute;
                    content: counter(num);
                    border-radius: var(--radius-round);
                    background-color: var(--purple);
                    color: var(--white);
                    width: var(--roundel-width);
                    aspect-ratio: 1;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: var(--text-16);
                    font-weight: var(--font-weight-semibold);
                    flex: none;
                    top: 3px;
                    left: 0;
                    line-height: 1
                }

        .styled-number-list[data-variant=step-process] > li:last-of-type .list-heading::before {
            content: "";
            background-color: var(--aqua);
            background-image: var(--ui-check-icon-mask);
            background-position: center;
            background-repeat: no-repeat;
            background-size: 90%
        }

        .styled-number-list[data-size=lg] {
            --roundel-width: var(--size-7);
            gap: var(--size-fluid-5)
        }

            .styled-number-list[data-size=lg] > li .list-heading {
                gap: var(--size-4);
                font-size: var(--text-fluid-55)
            }

                .styled-number-list[data-size=lg] > li .list-heading::before {
                    top: 0px;
                    width: var(--roundel-width);
                    font-size: var(--text-fluid-55)
                }

            .styled-number-list[data-size=lg] > li > * {
                padding-left: calc(var(--size-4) + var(--roundel-width))
            }

    @media screen and (min-width: 768px) {
        .styled-number-list[data-size=lg] {
            --roundel-width: var(--size-8)
        }

            .styled-number-list[data-size=lg] > li .list-heading::before {
                top: -3px
            }
    }
}

@layer blocks {
    .arrow-list {
        --arrow-width: var(--size-6)
    }

        .arrow-list > li {
            position: relative;
            padding-left: calc(var(--size-3) + var(--arrow-width))
        }

            .arrow-list > li::before {
                content: "";
                left: 0;
                top: 0;
                position: absolute;
                width: var(--arrow-width);
                aspect-ratio: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: var(--arrow-colour, var(--purple));
                -webkit-mask-image: var(--iconimg, var(--nav-arrow));
                mask-image: var(--iconimg, var(--nav-arrow));
                mask-size: contain
            }

            .arrow-list > li[data-variant=cross] {
                --arrow-colour: var(--red);
                --iconimg: var(--ui-cross-icon-mask)
            }

            .arrow-list > li[data-variant=check] {
                --arrow-colour: var(--green);
                --iconimg: var(--ui-check-icon-mask)
            }

            .arrow-list > li + li {
                margin-top: 1rem
            }
}

@layer blocks {
    .assistance-card-toggle {
        width: 100%;
        background-color: var(--assistance-card-pill-bg, var(--white));
        border: var(--assistance-card-border-width, 1px) var(--assistance-card-border-colour, var(--navy)) solid;
        border-radius: var(--radius-4);
        padding: var(--size-fluid-2)
    }

    .assistance-card-toggle_button {
        --arrow-size: 40px;
        display: grid
    }

        .assistance-card-toggle_button button {
            padding: 0 40px 0 0;
            text-align: left;
            display: flex;
            gap: var(--size-2);
            align-items: center;
            position: relative;
            font-size: var(--text-fluid-5);
            color: var(--assistance-card-text-colour, var(--navy))
        }

            .assistance-card-toggle_button button span {
                visibility: visible
            }

    .assistance-card-toggle .assistance-card-toggle_content {
        margin-top: var(--size-3)
    }

        .assistance-card-toggle .assistance-card-toggle_content.hidden {
            display: none
        }

    .assistance-card-toggle_cta {
        display: flex;
        gap: var(--size-3);
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between
    }

    @media screen and (max-width: 1023px) {
        div[hidden]:has(>.assistance-card-toggle), div[hidden]:has(>.assistance-card-toggle) > * {
            opacity: 1;
            display: block;
            visibility: visible
        }

        .assistance-card-toggle:has([aria-expanded=true]) {
            box-shadow: 0 5px 15px rgba(0,0,0,.05)
        }

        .assistance-card-toggle_button button::after {
            content: "";
            width: var(--arrow-size);
            aspect-ratio: 1;
            position: absolute;
            inset: 50% calc(-1*var(--size-2)) auto auto;
            translate: 0 -50%;
            transition: var(--transition-1);
            background: var(--purple);
            mask-image: var(--ui-chevron-icon-mask);
            mask-size: 85%;
            mask-repeat: no-repeat;
            mask-position: center;
            rotate: 90deg
        }

        .assistance-card-toggle_button button[aria-expanded=true]::after {
            rotate: -90deg
        }
    }

    @media screen and (min-width: 1024px) {
        .assistance-card-toggle {
            display: grid;
            align-content: center;
            padding: var(--size-fluid-3)
        }

            .assistance-card-toggle:not([hidden]) {
                box-shadow: 0 5px 15px rgba(0,0,0,.05)
            }

            .assistance-card-toggle button {
                visibility: hidden;
                cursor: auto
            }

                .assistance-card-toggle button .icon {
                    display: none
                }

            .assistance-card-toggle .assistance-card-toggle_content.hidden {
                display: block
            }
    }
}

@layer blocks {
    .step-process {
        --icon-size: min(150px, 30vw);
        --min: 165px;
        --col-gap: var(--size-fluid-2);
        --row-gap: var(--size-fluid-2);
        display: grid;
        grid-column-gap: var(--col-gap);
        grid-row-gap: var(--row-gap);
        text-align: center;
        grid-template-columns: repeat(auto-fit, minmax(min(var(--min), 100%), 1fr));
        max-width: var(--max-width, auto)
    }

        .step-process > * {
            flex: 1;
            display: grid;
            justify-items: center;
            align-content: flex-start
        }
}

@layer blocks {
    .topic-card {
        display: grid;
        width: 100%;
        gap: var(--size-2);
        align-content: flex-start;
        padding: var(--size-fluid-2);
        border-radius: var(--radius-4);
        background-color: var(--card-bg, var(--oat));
        text-wrap: pretty;
        color: var(--navy);
        position: relative;
        border: var(--border-width, 2px) var(--border-colour, transparent) solid;
        box-shadow: var(--shadow-size, 5px) var(--shadow-size, 5px) 0px var(--shadow-bg, transparent);
        transition: var(--transition-1)
    }

        .topic-card > div {
            display: flex;
            align-items: center;
            gap: var(--size-2)
        }

        .topic-card:hover, .topic-card:focus-visible {
            --border-colour: var(--navy);
            --shadow-bg: color-mix(in srgb, var(--navy), transparent 80%);
            outline: none;
            background-color: var(--card-hover-bg, var(--oat))
        }
}

@layer blocks {
    .youtube-loader a[data-youtube] {
        position: relative;
        border-radius: var(--radius-4);
        overflow: hidden
    }

    .youtube-loader a[data-youtube], .youtube-loader iframe {
        width: 100%;
        display: flex;
        aspect-ratio: 16/9
    }

    .youtube-loader :is(picture,img) {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .youtube-loader a[data-youtube]::before {
        content: "";
        position: absolute;
        background-color: color-mix(in srgb, var(--navy), transparent 60%);
        inset: 0
    }

    .youtube-loader a[data-youtube] .icon {
        position: absolute;
        inset: 50% auto auto 50%;
        translate: -50% -50%;
        opacity: var(--button-opacity, 50%);
        transition: var(--transition-1)
    }

    .youtube-loader a:hover {
        --button-opacity: 1
    }

    .youtube-loader_message {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--size-2);
        margin-top: var(--size-3)
    }
}

@layer blocks {
    .lozenge-btn {
        display: flex;
        align-items: center;
        gap: var(--size-2);
        padding: var(--size-fluid-1) var(--size-fluid-2);
        border-radius: var(--radius-5);
        background-color: var(--card-bg, var(--oat));
        text-wrap: pretty;
        color: var(--navy);
        border: var(--border-width, 2px) var(--border-colour, transparent) solid;
        box-shadow: var(--shadow-size, 5px) var(--shadow-size, 5px) 0px var(--shadow-bg, transparent);
        transition: var(--transition-1);
        font-weight: var(--font-weight-semibold);
        font-size: var(--text-fluid-000)
    }

        .lozenge-btn > .icon:last-of-type {
            margin-left: auto
        }

        .lozenge-btn:hover, .lozenge-btn:focus-visible {
            --border-colour: var(--navy);
            --shadow-bg: color-mix(in srgb, var(--navy), transparent 80%);
            outline: none;
            background-color: var(--card-hover-bg, var(--oat))
        }
}

@layer blocks {
    .responsive-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }

    .responsive-table {
        width: 100%
    }
}

@layer blocks {
    .cta-strip {
        --icon-size: 120px;
        display: flex;
        flex-wrap: wrap;
        gap: var(--size-5);
        flex-direction: column
    }

    @media screen and (max-width: 767px) {
        .cta-strip .illustration-icon {
            display: none
        }
    }

    @media screen and (min-width: 900px) {
        .cta-strip {
            flex-direction: row;
            align-items: center
        }

            .cta-strip .bodycopy {
                flex: 1;
                min-width: min(100%,250px)
            }
    }
}

@layer blocks {
    .alert {
        position: relative;
        background-color: var(--alert-bg, var(--light-pink-2));
        padding: var(--size-3);
        border-radius: var(--radius-2);
        display: flex;
        gap: var(--size-3)
    }

        .alert:has(.icon[data-variant=ui-chevron]) {
            padding-right: var(--size-1)
        }

        .alert .icon {
            flex: none
        }

        .alert .alert-heading {
            font-weight: var(--font-weight-semibold);
            margin-bottom: var(--size-1)
        }

        .alert a {
            position: absolute;
            inset: 0
        }

    @media screen and (max-width: 767px) {
        .alert .icon:first-of-type {
            align-self: flex-start
        }
    }
}

@layer blocks {
    .document-filter-menu {
        --form-gap: var(--size-7);
        display: grid;
        gap: var(--form-gap)
    }

        .document-filter-menu .document-toggle-title {
            font-size: var(--text-fluid-1)
        }

            .document-filter-menu .document-toggle-title button {
                padding: 0;
                display: flex;
                align-items: center;
                gap: var(--size-2)
            }

                .document-filter-menu .document-toggle-title button span {
                    visibility: visible
                }

        .document-filter-menu .document-toggle-content:is(.active,:focus,:focus-visible) {
            outline: none
        }

        .document-filter-menu .form-group {
            margin-top: var(--size-3)
        }

    @media screen and (max-width: 1023px) {
        .document-filter-menu .document-toggle-content {
            --modal-padding: min(2.25rem, 6vw);
            position: fixed;
            -webkit-overflow-scrolling: touch;
            overflow-x: clip;
            overflow-y: auto;
            overscroll-behavior: contain;
            width: min(100vw,550px);
            opacity: 1;
            padding: var(--modal-padding) var(--modal-padding) 0 var(--modal-padding);
            position: fixed;
            inset: 0;
            transition: all .5s var(--transition-bezier-2);
            visibility: visible;
            z-index: 99;
            min-height: 100vh;
            min-height: 100dvh;
            transform: translateX(110%);
            box-shadow: -5px 0 30px rgba(0,0,0,.15);
            background-color: var(--oat-3);
            margin-left: auto;
            display: flex;
            flex-direction: column
        }

            .document-filter-menu .document-toggle-content:is(.active) {
                transform: translateX(0%)
            }

            .document-filter-menu .document-toggle-content .form {
                flex: 1
            }

        .document-filter-menu .document-toggle-title button {
            padding: var(--size-2) var(--size-3);
            background-color: var(--navy);
            color: var(--white);
            border-radius: var(--radius-2);
            visibility: visible
        }

            .document-filter-menu .document-toggle-title button .icon {
                --bg-color: var(--white)
            }

        .document-filter-menu .reset-button {
            position: absolute;
            inset: var(--modal-padding) var(--modal-padding) auto auto
        }

        .document-filter-menu .close-button-footer {
            position: sticky;
            bottom: 0;
            padding: var(--modal-padding);
            width: calc(100% + var(--modal-padding) + var(--modal-padding));
            margin-left: calc(-1*var(--modal-padding));
            background-color: var(--oat-3)
        }

        .document-filter-menu.filter-active .document-toggle-content {
            transform: translateX(0%)
        }
    }

    @media screen and (min-width: 1024px) {
        .document-filter-menu .document-toggle-title button {
            visibility: hidden;
            cursor: auto
        }

            .document-filter-menu .document-toggle-title button .icon {
                visibility: visible;
                --bg-color: var(--navy)
            }

        .document-filter-menu .mobile-only {
            display: none
        }
    }

    @media screen and (max-width: 1023px) {
        body:has(.document-toggle-content.active) {
            overflow: hidden
        }
    }
}

@layer blocks {
    .pill {
        display: flex;
        gap: var(--size-2);
        align-items: center;
        padding: var(--size-2) var(--size-3);
        border-radius: var(--radius-round);
        background-color: var(--pill-bg, var(--oat));
        font-size: var(--pill-font-size, var(--text-14));
        color: var(--pill-text, var(--navy));
        font-weight: var(--pill-font-weight, var(--font-weight-bold));
        width: fit-content;
        outline: var(--pill-outline-width, 2px) var(--pill-outline) solid;
        transition: none;
        box-shadow: var(--shadow-size, 4px) var(--shadow-size, 4px) 0px var(--pill-shadow-bg, transparent)
    }

        .pill[data-variant=aqua] {
            --pill-bg: var(--aqua)
        }

        .pill[data-variant=purple] {
            --pill-bg: var(--purple);
            --pill-text: var(--white)
        }

        .pill[data-variant=navy] {
            --pill-bg: var(--navy);
            --pill-text: var(--white)
        }

        .pill[data-variant=white] {
            --pill-bg: var(--white)
        }

        .pill[data-variant=white-outline] {
            --pill-bg: var(--white);
            --pill-outline-width: 1px;
            --pill-outline: var(--navy)
        }

        .pill:is(a[data-variant=white-outline]):hover {
            --pill-shadow-bg: color-mix(in srgb, var(--navy), transparent 80%)
        }

        .pill:is(a):hover {
            --pill-outline: var(--navy)
        }

        .pill:is(a.active) {
            --pill-font-weight: var(--font-weight-bold);
            --shadow-size: 0px;
            --pill-outline-width: 0px;
            --pill-bg: var(--purple);
            --pill-text: var(--white)
        }

        .pill[data-size=lg] {
            padding: var(--size-3) var(--size-4)
        }
}

@layer blocks {
    .page-footer :is(ul,.logo-block) {
        display: flex;
        flex-wrap: wrap
    }

    .page-footer ul {
        flex-direction: column;
        gap: var(--size-fluid-2)
    }

        .page-footer ul a {
            color: var(--white);
            text-decoration: none;
            font-weight: var(--font-weight-semibold)
        }

    .page-footer .logo-block {
        flex-wrap: wrap;
        gap: var(--size-fluid-4);
        justify-content: space-between
    }

    .page-footer .footer-logo svg {
        width: clamp(180px,16vw,223px);
        fill: var(--white)
    }

        .page-footer .footer-logo svg .prefix * {
            fill: var(--aqua)
        }

    @media screen and (min-width: 768px) {
        .page-footer ul {
            gap: var(--size-fluid-2) var(--size-fluid-4);
            flex-direction: row
        }
    }
}

@layer blocks {
    .site-head {
        background-color: var(--navy)
    }

        .site-head[data-mobile-toggled=false] .mobile-menu em, .site-head[data-mobile-toggled=false] .mobile-menu em:before, .site-head[data-mobile-toggled=false] .mobile-menu em:after {
            background: var(--white)
        }

    .site-head_inner .mobile-menu em, .site-head_inner .mobile-menu em:before, .site-head_inner .mobile-menu em:after {
        background-color: var(--white)
    }

    body:has(main>:first-child.bg-navy) .site-head:not(.is-pinned) {
        background-color: var(--navy)
    }

        body:has(main>:first-child.bg-navy) .site-head:not(.is-pinned) .site-head_logo .prefix * {
            fill: var(--aqua)
        }

        body:has(main>:first-child.bg-navy) .site-head:not(.is-pinned) .site-head_logo .body * {
            fill: var(--white)
        }

    body:has(main>:first-child:not(.bg-aqua)) .site-head, .site-head.is-pinned {
        box-shadow: none
    }

        body:has(main>:first-child:not(.bg-aqua)) .site-head .site-head_logo .body *, .site-head.is-pinned .site-head_logo .body * {
            fill: var(--white)
        }

    body:has(main>:first-child:is(.bg-oat-3)) .site-head:not(.is-pinned) .site-head_logo .body * {
        fill: var(--navy)
    }

    .site-head_inner .site-head_navigation .nav-cta_card-heading::before {
        display: none
    }

    .site-head_inner .site-head_logo svg {
        width: clamp(140px,13vw,160px)
    }

    @media screen and (max-width: 1023px) {
        .site-head_navigation {
            --nav-height: 82px
        }

            .site-head_navigation .nav-sub.nav-cta {
                margin-top: var(--size-4)
            }

        body:has(main>:first-child:is(.bg-oat-3)) .site-head:not(.is-pinned) .mobile-menu:not([aria-expanded=true]) em, body:has(main>:first-child:is(.bg-oat-3)) .site-head:not(.is-pinned) .mobile-menu em:before, body:has(main>:first-child:is(.bg-oat-3)) .site-head:not(.is-pinned) .mobile-menu em:after {
            background: var(--navy)
        }
    }

    @media screen and (min-width: 1024px) {
        .site-head_navigation nav ul .nav-btn:not(.btn) {
            color: var(--white)
        }

        .site-head_navigation .nav-btn:not(.btn)[aria-expanded=true] {
            color: var(--white)
        }

        .site-head_navigation .nav-sub.nav-cta {
            width: 100%
        }

        body:has(main>:first-child:is(.bg-oat-3)) .site-head:not(.is-pinned) .site-head_navigation nav ul .nav-btn:not(.btn) {
            color: var(--navy)
        }
    }

    @media screen and (min-width: 1200px) {
        .site-head_navigation > nav > ul {
            gap: var(--size-fluid-4)
        }
    }
}

@layer blocks {
    section:has(.hero>*:only-child p) {
        min-height: 460px;
        display: flex;
        align-items: center
    }

    @media screen and (max-width: 767px) {
        .hero .cta-container .btn:first-of-type:is([data-variant=aqua]) {
            --btn-text: var(--navy);
            --btn-text-hover: var(--navy);
            --btn-bg: var(--aqua);
            --btn-bg-hover: var(--aqua);
            --border-colour: var(--navy);
            --border-colour-hover: var(--navy);
            --border-width: 2px
        }
    }

    @media screen and (min-width: 768px) {
        .hero .cta-container:has(.btn:nth-of-type(2)) .btn:nth-of-type(1) {
            display: flex
        }
    }

    @media screen and (min-width: 1025px) {
        .hero[data-columns=uneven] > *:first-child {
            max-width: 900px;
            margin: 0
        }

        .hero[data-columns=uneven] > *:only-child {
            --max-width: 750px
        }
    }
}

@layer blocks {
    .page-footer .footer-logo svg {
        width: clamp(140px,13vw,160px);
        fill: var(--white)
    }

        .page-footer .footer-logo svg .prefix * {
            fill: var(--aqua)
        }
}

@layer blocks {
    .cover-benefits-card .text-icon {
        font-size: var(--text-fluid-55);
        color: var(--purple);
        width: min-content
    }

    .cover-benefits-card:has(.cover-benefits-card_img) {
        padding: var(--size-fluid-2)
    }

    .cover-benefits-card_img {
        margin: 0 0 var(--size-2) 0
    }

        .cover-benefits-card_img img {
            max-width: none;
            object-fit: contain;
            height: min(130px,24vw)
        }

    @media screen and (min-width: 768px) {
        .cover-benefits-card {
            padding: var(--size-fluid-3)
        }

            .cover-benefits-card .icon, .cover-benefits-card .text-icon {
                --icon-size: 38px;
                position: static;
                translate: 0
            }

        .cover-benefits-card_img {
            position: absolute;
            inset: var(--size-fluid-2) var(--size-fluid-2) auto auto
        }

            .cover-benefits-card_img img {
                max-width: 130px
            }

        .cover-benefits-card:has(.cover-benefits-card_img) {
            align-content: flex-start;
            padding-right: calc(var(--size-fluid-2) + var(--size-fluid-2) + 130px);
            min-height: calc(min(130px,24vw) + var(--size-fluid-2) + var(--size-fluid-2))
        }
    }

    @container (width > 700px) {
        .cover-benefits-card {
            padding-right: calc(var(--size-fluid-3) + var(--size-fluid-3) + 70px)
        }

            .cover-benefits-card .icon, .cover-benefits-card .text-icon {
                --icon-size: 70px;
                position: absolute;
                inset: 50% var(--size-fluid-2) auto auto;
                translate: 0 -50%
            }
    }
}

@layer blocks {
    .benefit-card .illustration-icon[data-img-type=logo] {
        height: min(110px,30vw);
        padding-block: var(--size-3);
        margin: 0;
        aspect-ratio: auto;
        width: auto
    }

        .benefit-card .illustration-icon[data-img-type=logo] img {
            height: calc(min(110px,30vw) - var(--size-3) - var(--size-3));
            width: auto;
            aspect-ratio: auto
        }

    .benefit-card[data-variant=horizontal] .logo {
        margin-right: var(--size-fluid-2)
    }

        .benefit-card[data-variant=horizontal] .logo img {
            max-width: 130px;
            object-fit: contain;
            height: min(130px,24vw)
        }

    @media screen and (min-width: 768px) {
        .benefit-card[data-variant=horizontal][data-flipped] .logo {
            margin: 0 0 0 var(--size-4);
            order: 2
        }
    }
}

@layer blocks {
    .stat-overlay {
        border-radius: var(--radius-4);
        padding: var(--size-4);
        position: relative
    }

        .stat-overlay .illustration-icon {
            position: absolute;
            inset: auto var(--size-2) 100% auto;
            translate: 0 50%
        }

    @media screen and (max-width: 899px) {
        .text-img-panel .stat-overlay {
            margin-top: calc(-1*var(--size-4))
        }
    }

    @media screen and (min-width: 900px) {
        .text-img-panel .stat-overlay {
            position: absolute;
            right: 0;
            bottom: calc(-1*var(--size-6));
            max-width: 310px
        }
    }
}

@media(prefers-reduced-motion: no-preference) {
    html.js .stat-overlay {
        opacity: 0 !important;
        translate: 0 -25%;
        transition: all 1s ease !important
    }

    html.js [data-animation=fade-in].active .stat-overlay {
        transition-delay: .75s !important;
        opacity: 1 !important;
        translate: 0 0
    }
}

@layer blocks {
    .number-sequence-panel {
        --roundel-width: var(--size-7)
    }

        .number-sequence-panel .sequence-heading {
            display: flex;
            gap: var(--size-5);
            align-items: center;
            position: relative
        }

            .number-sequence-panel .sequence-heading::before {
                content: attr(data-sequence-number);
                border-radius: var(--radius-round);
                background-color: var(--purple);
                color: var(--white);
                width: var(--roundel-width);
                aspect-ratio: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: var(--text-16);
                font-weight: var(--font-weight-semibold);
                flex: none;
                top: 3px;
                left: 0;
                line-height: 1;
                font-size: var(--text-fluid-55)
            }

    .xnumber-sequence-panel:has(.circle-stat-panel) + .number-sequence-panel:has(.circle-stat-panel) {
        margin-top: calc(-1*var(--size-fluid-section))
    }

    @media screen and (max-width: 767px) {
        .number-sequence-panel:has(.circle-stat-panel[class*=bg-]) + .number-sequence-panel:has(.circle-stat-panel[class*=bg-]) {
            margin-top: calc(-1*var(--size-fluid-section))
        }
    }

    @media screen and (min-width: 768px) {
        .number-sequence-panel {
            --leftpadding: calc(var(--roundel-width) + var(--size-5));
            --roundel-width: var(--size-9)
        }

        .number-sequence-panel_inner {
            padding-inline-start: var(--leftpadding)
        }

            .number-sequence-panel_inner .sequence-heading::before {
                position: absolute;
                right: calc(100% + var(--leftpadding));
                left: auto;
                translate: 100% 0
            }

        .xnumber-sequence-panel:has(.circle-stat-panel) + .number-sequence-panel:has(.circle-stat-panel) {
            margin-top: calc(-0.5*var(--size-fluid-section))
        }
    }
}

@layer blocks {
    .stat-card {
        --card-radius: var(--radius-4);
        color: var(--card-text-colour, var(--navy));
        background-color: var(--card-bg, var(--oat));
        border-radius: var(--radius-4);
        position: relative;
        display: flex;
        flex-direction: column;
        outline: 2px var(--border-colour, transparent) solid;
        transition: var(--transition-1);
        padding: var(--size-fluid-2);
        box-shadow: 7px 7px 0 0 var(--shadow-bg, transparent);
        gap: var(--size-3)
    }

        .stat-card .stat-img img {
            width: 100%
        }

        .stat-card[data-img-position=bottom] .stat-img {
            order: 2
        }

    .stat-card_copy {
        color: inherit
    }

        .stat-card_copy .stat-heading {
            color: var(--card-heading-colour, inherit);
            font-size: var(--text-26);
            margin-bottom: var(--size-2);
            font-weight: var(--font-weight-4);
            text-wrap: pretty
        }

            .stat-card_copy .stat-heading strong {
                font-weight: var(--font-weight-7)
            }

    .stat-card_footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: auto;
        gap: var(--size-2);
        flex-wrap: wrap
    }

        .stat-card_footer .footer-number {
            color: var(--card-heading-colour, inherit);
            line-height: var(--lineheight-1)
        }

        .stat-card_footer > *:only-child {
            margin-left: auto
        }

        .stat-card_footer .footer-icon .icon::before {
            background-color: var(--card-heading-colour, var(--navy))
        }

        .stat-card_footer .footer-losenge {
            background-color: var(--losenge-bg, var(--purple));
            padding: var(--size-2) var(--size-3) var(--size-2) var(--size-2);
            border-radius: var(--radius-round);
            color: var(--losenge-colour, var(--white));
            display: flex;
            align-items: center
        }

            .stat-card_footer .footer-losenge .icon::before {
                background-color: var(--losenge-colour, var(--white))
            }

            .stat-card_footer .footer-losenge .icon[data-variant=increase] {
                rotate: -90deg
            }

            .stat-card_footer .footer-losenge .icon[data-variant=decrease] {
                rotate: 90deg
            }

    @media(hover: hover) {
        .stat-card:has(a):hover, .stat-card:has(a:focus-visible) {
            --border-colour: var(--navy);
            --shadow-bg: color-mix(in srgb, var(--navy), transparent 80%);
            background-color: var(--card-bg-hover, var(--oat))
        }

            .stat-card:has(a):hover a, .stat-card:has(a:focus-visible) a {
                outline: none
            }
    }

    .stat-card[data-variant=white] {
        --card-bg: var(--white);
        --border-colour: var(--navy)
    }

    .stat-card[data-variant=aqua] {
        --card-bg-hover: var(--aqua);
        --card-bg: var(--aqua)
    }

    .stat-card[data-variant=pink] {
        --card-bg-hover: var(--light-pink);
        --card-bg: var(--light-pink)
    }

    .stat-card[data-variant=navy] {
        --card-heading-colour: var(--white);
        --card-text-colour: var(--white);
        --card-bg-hover: var(--navy);
        --card-bg: var(--navy);
        --card-icon-colour: var(--aqua)
    }

    .stat-card[data-variant=purple] {
        --card-heading-colour: var(--white);
        --card-text-colour: var(--white);
        --card-bg-hover: var(--purple);
        --card-bg: var(--purple);
        --card-icon-colour: var(--white);
        --losenge-bg: var(--light-pink);
        --losenge-colour: var(--navy)
    }

    .stat-card[data-heading-colour=white] {
        --card-heading-colour: var(--white)
    }

    .stat-card[data-heading-colour=aqua] {
        --card-heading-colour: var(--aqua)
    }

    .stat-card[data-heading-colour=pink] {
        --card-heading-colour: var(--pink)
    }

    .stat-card[data-heading-colour=navy] {
        --card-heading-colour: var(--navy)
    }

    .stat-card[data-heading-colour=purple] {
        --card-heading-colour: var(--purple)
    }

    @media screen and (min-width: 768px) {
        .stat-card {
            aspect-ratio: 3/2;
            width: 100%
        }
    }
}

@layer blocks {
    .circle-stat-panel {
        --y-gap: var(--size-fluid-5);
        --x-gap: clamp(2rem, 4vw, 5rem);
        display: flex;
        gap: var(--y-gap) var(--x-gap);
        flex-direction: column
    }

        .circle-stat-panel > .bodycopy {
            display: grid;
            position: relative
        }

        .circle-stat-panel > * {
            flex: 1
        }

            .circle-stat-panel > *:last-child {
                max-width: 680px
            }

        .circle-stat-panel .squiggle {
            margin-left: auto;
            position: absolute;
            width: 100px;
            top: 100%
        }

    .circle-stat-panel_stat-grid {
        display: grid;
        grid-template-columns: repeat(20, 1fr);
        gap: var(--size-2);
        grid-template-rows: repeat(20, auto);
        container-type: inline-size;
        font-size: min(3.2cqw,1rem)
    }

        .circle-stat-panel_stat-grid > * {
            aspect-ratio: 1;
            background-color: var(--circle-colour, var(--white));
            color: var(--circle-text, var(--navy));
            border-radius: var(--radius-round);
            padding: var(--size-fluid-2);
            display: grid;
            place-items: center;
            align-content: center;
            text-align: center
        }

            .circle-stat-panel_stat-grid > * .stat-grid-heading {
                font-size: var(--stat-heading-size, min(8cqw, 50px))
            }

            .circle-stat-panel_stat-grid > * .stat-grid-subheading {
                font-weight: var(--font-weight-semibold);
                margin-bottom: min(var(--size-2),1vw)
            }

            .circle-stat-panel_stat-grid > *:nth-child(1) {
                --circle-colour: var(--aqua);
                grid-column: 1/12;
                grid-row: 7/14;
                margin-top: calc(-25cqw + var(--size-4))
            }

            .circle-stat-panel_stat-grid > *:nth-child(2) {
                --circle-colour: var(--purple);
                --circle-text: var(--white);
                grid-column: 10/21;
                grid-row: 1/7
            }

            .circle-stat-panel_stat-grid > *:nth-child(3) {
                --circle-colour: var(--oat);
                grid-column: 10/21;
                grid-row: 14/21;
                margin-top: calc(-25cqw + var(--size-4))
            }

    .circle-stat-panel.bg-aqua .circle-stat-panel_stat-grid > *:nth-child(1) {
        --circle-colour: var(--navy);
        --circle-text: var(--white)
    }

    .circle-stat-panel.bg-aqua .circle-stat-panel_stat-grid > *:nth-child(3) {
        --circle-colour: var(--light-pink)
    }

    .circle-stat-panel.transparent .circle-stat-panel_stat-grid > *:nth-child(3) {
        --circle-text: var(--white);
        --circle-colour: var(--navy)
    }

    .circle-stat-panel.bg-navy .squiggle {
        filter: invert(1) brightness(2)
    }

    @media screen and (max-width: 767px) {
        .section-padding:has(.circle-stat-panel[class*=bg-]) + .section-padding:has(.circle-stat-panel[class*=bg-]) {
            margin-top: calc(-1*var(--size-fluid-section))
        }
    }

    @media(max-width: 1199px) {
        .circle-stat-panel[data-variant=flipped] .squiggle {
            scale: -1 1;
            left: auto;
            right: 0
        }

        .circle-stat-panel[data-variant=flipped] .circle-stat-panel_stat-grid > *:nth-child(1) {
            grid-column: 10/21;
            grid-row: 7/14
        }

        .circle-stat-panel[data-variant=flipped] .circle-stat-panel_stat-grid > *:nth-child(2) {
            grid-column: 1/12;
            grid-row: 1/7
        }

        .circle-stat-panel[data-variant=flipped] .circle-stat-panel_stat-grid > *:nth-child(3) {
            grid-column: 1/12;
            grid-row: 14/21
        }
    }

    @media screen and (min-width: 1200px) {
        .circle-stat-panel {
            flex-direction: row;
            align-items: flex-start;
            justify-content: space-between
        }

            .circle-stat-panel > *:first-child {
                max-width: 30%
            }

            .circle-stat-panel .squiggle {
                position: static;
                width: 140px
            }

            .circle-stat-panel[data-variant=flipped] .squiggle {
                scale: -1 1;
                margin-left: 0
            }

            .circle-stat-panel[data-variant=flipped] > *:nth-child(1) {
                order: 2
            }

        .circle-stat-panel_stat-grid {
            gap: var(--size-3)
        }

            .circle-stat-panel_stat-grid > *:nth-child(1) {
                grid-column: 1/13;
                margin-top: calc(-34cqw + var(--size-4));
                margin-bottom: calc(-8cqw + var(--size-4))
            }

            .circle-stat-panel_stat-grid > *:nth-child(2) {
                grid-column: 12/21
            }

            .circle-stat-panel_stat-grid > *:nth-child(3) {
                grid-column: 12/20;
                margin-top: calc(-27cqw + var(--size-4))
            }
    }
}

@layer blocks {
    .team-member {
        position: relative;
        isolation: isolate;
        max-width: 400px;
        margin-inline: auto
    }

        .team-member::before {
            content: "";
            position: absolute;
            aspect-ratio: 1;
            inset: auto 0 0 0;
            background-color: var(--oat);
            border-radius: var(--radius-round);
            z-index: -1;
            transition: var(--transition-1)
        }

        .team-member img {
            -webkit-mask: url('data:image/svg+xml,<svg width="400" height="436" viewBox="0 0 400 436" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M400 0H0V238H0.00979297C1.08289 347.536 90.2105 436 200 436C309.789 436 398.917 347.536 399.99 238H400V0Z" fill="black" style="fill:black;fill-opacity:1;"/></svg>');
            mask: url('data:image/svg+xml,<svg width="400" height="436" viewBox="0 0 400 436" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M400 0H0V238H0.00979297C1.08289 347.536 90.2105 436 200 436C309.789 436 398.917 347.536 399.99 238H400V0Z" fill="black" style="fill:black;fill-opacity:1;"/></svg>');
            mask-size: 100%;
            aspect-ratio: 400/436;
            object-fit: contain;
            object-position: bottom center
        }

        .team-member .nameplate {
            position: absolute;
            inset: auto 0 0 0;
            border: 1px solid var(--navy);
            border-radius: var(--radius-3);
            background-color: var(--white);
            padding: var(--size-4);
            display: flex;
            align-items: center;
            gap: var(--size-1);
            justify-content: space-between
        }

            .team-member .nameplate .icon {
                --icon-size: 40px;
                transition: var(--transition-1)
            }

        .team-member button {
            position: absolute;
            inset: 0;
            opacity: 0
        }

        .team-member:has(button:focus-visible,button:hover,button:focus)::before {
            background-color: var(--aqua)
        }

        .team-member:has(button:focus-visible,button:hover,button:focus) .nameplate .icon {
            --bg-color: var(--aqua);
            rotate: 90deg
        }
}

@layer blocks {
    .team-modal {
        flex-direction: column;
        padding-bottom: 0
    }

        .team-modal:not([hidden]) {
            display: flex
        }

        .team-modal .inner {
            flex: 1;
            padding-block: var(--modal-padding)
        }

        .team-modal .team-member {
            width: min(330px,70vw);
            margin-inline: auto
        }

    .team-modal_member-switcher {
        --form-gap: var(--size-fluid-3)
    }

        .team-modal_member-switcher .logos {
            display: flex;
            justify-content: space-between;
            gap: var(--size-3);
            align-items: center
        }

            .team-modal_member-switcher .logos > * {
                height: min(60px,13vw)
            }

    .team-modal .close-button-container {
        position: sticky;
        bottom: 0;
        display: grid;
        padding: var(--modal-padding);
        width: calc(100% + var(--modal-padding) + var(--modal-padding));
        margin-left: calc(-1*var(--modal-padding));
        background: var(--white);
        box-shadow: 0 0 15px rgba(0,0,0,.05)
    }

    @media screen and (max-width: 767px) {
        .team-modal {
            max-height: 85dvh;
            min-height: auto;
            inset: auto 0 0 0;
            border-radius: var(--radius-4) var(--radius-4) 0 0
        }

            .team-modal.slide-in-modal.a11y-modal[hidden] {
                transform: translateY(calc(100% + 40px))
            }
    }
}

@layer blocks {
    .text-logo-block {
        display: grid;
        gap: var(--size-fluid-3)
    }

        .text-logo-block + .text-logo-block {
            margin-top: var(--size-fluid-5)
        }

        .text-logo-block img {
            max-width: min(170px,37vw)
        }

    @media screen and (min-width: 768px) {
        .text-logo-block {
            grid-template-columns: 1fr 170px
        }

            .text-logo-block > :first-child {
                order: 2
            }
    }
}

.icon-link-table {
    width: auto
}

    .icon-link-table thead {
        color: inherit;
        position: static
    }

    .icon-link-table th, .icon-link-table td {
        background-color: transparent;
        padding: 0
    }

    .icon-link-table :is(th,td):not(:first-child) {
        border: none
    }

    .icon-link-table tr:not(:first-of-type) td {
        padding-top: var(--size-3)
    }

    .icon-link-table tr:nth-child(even) {
        background-color: transparent
    }

    .icon-link-table .icon {
        margin-right: var(--size-2)
    }

.wrapper {
    width: min(100%,var(--container-max, 97rem));
    margin-inline: auto;
    padding-inline: var(--size-5)
}

    .wrapper[data-width=readable] {
        --container-max: 80ch
    }

    .wrapper[data-width=md] {
        --container-max: 60rem
    }

    .wrapper[data-width=sm] {
        --container-max: 40rem
    }

@media screen and (min-width: 1300px) {
    .wrapper {
        padding-inline: var(--size-fluid-5)
    }
}

article.wrapper {
    --container-max: var(--size-content-4)
}

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

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

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

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

.bg-dark-teal {
    background-color: var(--dark-teal)
}

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

.bg-aqua-2 {
    background-color: var(--aqua-2)
}

.bg-aqua-3 {
    background-color: var(--aqua-3)
}

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

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

.bg-light-pink-2 {
    background-color: var(--light-pink-2)
}

.bg-light-pink-3 {
    background-color: var(--light-pink-3)
}

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

.bg-oat-2 {
    background-color: var(--oat-2)
}

.bg-oat-3 {
    background-color: var(--oat-3)
}

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

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

.text-white {
    color: var(--white)
}

.text-black {
    color: var(--black)
}

.text-navy {
    color: var(--navy)
}

.text-purple {
    color: var(--purple)
}

.text-dark-teal {
    color: var(--dark-teal)
}

.text-aqua {
    color: var(--aqua)
}

.text-aqua-2 {
    color: var(--aqua-2)
}

.text-aqua-3 {
    color: var(--aqua-3)
}

.text-pink {
    color: var(--pink)
}

.text-pink {
    color: var(--pink)
}

.text-light-pink {
    color: var(--light-pink)
}

.text-light-pink-2 {
    color: var(--light-pink-2)
}

.text-light-pink-3 {
    color: var(--light-pink-3)
}

.text-oat {
    color: var(--oat)
}

.text-oat-2 {
    color: var(--oat-2)
}

.text-oat-3 {
    color: var(--oat-3)
}

.text-slate {
    color: var(--slate)
}

.text-red {
    color: var(--red)
}

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

.underline {
    display: inline-flex;
    flex-direction: column;
    white-space: nowrap;
    isolation: isolate;
    font-weight: var(--font-weight-bold)
}

    .underline:after {
        content: "";
        margin-top: -0.2em;
        width: 100%;
        height: 13px;
        z-index: -1;
        background-color: var(--underline-color, var(--dark-teal));
        -webkit-mask-image: var(--underline);
        mask-image: var(--underline);
        mask-size: 100% 100%;
        mask-repeat: no-repeat;
        mask-position: center
    }

.underline-link {
    display: inline-flex;
    flex-direction: column;
    font-weight: var(--font-weight-semibold);
    color: inherit;
    white-space: nowrap;
    transition: var(--transition-1)
}

    .underline-link:hover {
        color: var(--underscore-text-colour, var(--lilac))
    }

    .underline-link:after {
        content: "";
        margin-top: -2px;
        width: 100%;
        height: 7px;
        background-color: var(--underline-color, transparent);
        -webkit-mask-image: var(--underline);
        mask-image: var(--underline);
        mask-size: 100% 100%;
        mask-repeat: no-repeat;
        mask-position: center;
        transition: var(--transition-1)
    }

    .underline-link:not([data-showunderline=hover]) {
        --underline-color: var(--purple)
    }

    .underline-link[data-showunderline=hover]:hover {
        --underline-color: var(--purple)
    }

    .underline-link[data-variant=white] {
        color: var(--white)
    }

[data-hover-parent]:hover .underline-link {
    --underline-color: var(--purple)
}

.p-relative {
    position: relative
}

.p-absolute {
    position: absolute
}

.d-none {
    display: none
}

.d-flex {
    display: flex
}

.d-inline-flex {
    display: inline-flex
}

.flex-none {
    flex: none
}

.flex-column {
    flex-direction: column
}

.flex-wrap {
    flex-wrap: wrap
}

.flex-grow-0 {
    flex-grow: 0
}

.flex-grow-1 {
    flex-grow: 1
}

.flex-grow-2 {
    flex-grow: 2
}

.flex-shrink-0 {
    flex-shrink: 0
}

.flex-shrink-1 {
    flex-shrink: 1
}

.flex-shrink-2 {
    flex-shrink: 2
}

.pointer-events-none {
    pointer-events: none
}

.text-wrap-pretty {
    text-wrap: pretty
}

.text-wrap-balance {
    text-wrap: balance
}

.gap-1 {
    gap: var(--size-1)
}

.gap-2 {
    gap: var(--size-2)
}

.gap-3 {
    gap: var(--size-3)
}

.gap-4 {
    gap: var(--size-4)
}

.gap-5 {
    gap: var(--size-5)
}

.gap-6 {
    gap: var(--size-6)
}

.gap-7 {
    gap: var(--size-7)
}

.gap-8 {
    gap: var(--size-8)
}

.gap-9 {
    gap: var(--size-9)
}

.gap-10 {
    gap: var(--size-10)
}

.gap-y-1 {
    row-gap: var(--size-1)
}

.gap-y-2 {
    row-gap: var(--size-2)
}

.gap-y-3 {
    row-gap: var(--size-3)
}

.gap-y-4 {
    row-gap: var(--size-4)
}

.gap-y-5 {
    row-gap: var(--size-5)
}

.gap-y-6 {
    row-gap: var(--size-6)
}

.gap-y-7 {
    row-gap: var(--size-7)
}

.gap-y-8 {
    row-gap: var(--size-8)
}

.gap-y-9 {
    row-gap: var(--size-9)
}

.gap-y-10 {
    row-gap: var(--size-10)
}

.gap-fluid-1 {
    gap: var(--size-fluid-1)
}

.gap-fluid-2 {
    gap: var(--size-fluid-2)
}

.gap-fluid-3 {
    gap: var(--size-fluid-3)
}

.gap-fluid-4 {
    gap: var(--size-fluid-4)
}

.gap-fluid-5 {
    gap: var(--size-fluid-5)
}

.gap-y-fluid-1 {
    row-gap: var(--size-fluid-1)
}

.gap-y-fluid-2 {
    row-gap: var(--size-fluid-2)
}

.gap-y-fluid-3 {
    row-gap: var(--size-fluid-3)
}

.gap-y-fluid-4 {
    row-gap: var(--size-fluid-4)
}

.gap-y-fluid-5 {
    row-gap: var(--size-fluid-5)
}

.text-fluid-0 {
    font-size: var(--text-fluid-0)
}

.text-fluid-1 {
    font-size: var(--text-fluid-1)
}

.text-fluid-2 {
    font-size: var(--text-fluid-2)
}

.text-fluid-3 {
    font-size: var(--text-fluid-3)
}

.text-fluid-4 {
    font-size: var(--text-fluid-4)
}

.text-fluid-5 {
    font-size: var(--text-fluid-5)
}

.text-fluid-55 {
    font-size: var(--text-fluid-55)
}

.text-fluid-6 {
    font-size: var(--text-fluid-6)
}

.text-fluid-7 {
    font-size: var(--text-fluid-7)
}

.text-fluid-8 {
    font-size: var(--text-fluid-8)
}

.text-fluid-9 {
    font-size: var(--text-fluid-9)
}

.text-fluid-10 {
    font-size: var(--text-fluid-10)
}

.text-11 {
    font-size: var(--text-11)
}

.text-12 {
    font-size: var(--text-12)
}

.text-13 {
    font-size: var(--text-13)
}

.text-14 {
    font-size: var(--text-14)
}

.text-15 {
    font-size: var(--text-15)
}

.text-16 {
    font-size: var(--text-16)
}

.text-17 {
    font-size: var(--text-17)
}

.text-18 {
    font-size: var(--text-18)
}

.text-19 {
    font-size: var(--text-19)
}

.text-20 {
    font-size: var(--text-20)
}

.text-21 {
    font-size: var(--text-21)
}

.text-22 {
    font-size: var(--text-22)
}

.text-23 {
    font-size: var(--text-23)
}

.text-24 {
    font-size: var(--text-24)
}

.text-25 {
    font-size: var(--text-25)
}

.text-left {
    text-align: left
}

.text-center {
    text-align: center
}

.text-right {
    text-align: right
}

.text-uppercase {
    text-transform: uppercase
}

.text-lowercase {
    text-transform: none
}

.justify-content-center {
    justify-content: center
}

.justify-content-start {
    justify-content: flex-start
}

.justify-content-end {
    justify-content: flex-end
}

.justify-content-between {
    justify-content: space-between
}

.align-items-center {
    align-items: center
}

.align-items-start {
    align-items: flex-start
}

.align-items-end {
    align-items: flex-end
}

.overflow-hidden {
    overflow: hidden
}

.overflow-x-hidden {
    overflow-x: hidden
}

.overflow-clip {
    overflow: clip
}

.overflow-x-clip {
    overflow-x: clip
}

.w-25 {
    width: 25%
}

.w-50 {
    width: 50%
}

.w-75 {
    width: 75%
}

.w-100 {
    width: 100%
}

.h-25 {
    height: 25%
}

.h-50 {
    height: 50%
}

.h-75 {
    height: 75%
}

.h-100 {
    height: 100%
}

.text-normal {
    font-weight: var(--font-weight-4)
}

.text-medium {
    font-weight: var(--font-weight-5)
}

.text-semibold {
    font-weight: var(--font-weight-6)
}

.text-bold, .bold {
    font-weight: var(--font-weight-7)
}

.line-height-0 {
    line-height: var(--lineheight-0)
}

.line-height-1 {
    line-height: var(--lineheight-1)
}

.line-height-2 {
    line-height: var(--lineheight-2)
}

.line-height-3 {
    line-height: var(--lineheight-3)
}

.line-height-4 {
    line-height: var(--lineheight-4)
}

.line-height-5 {
    line-height: var(--lineheight-5)
}

.line-height-6 {
    line-height: var(--lineheight-6)
}

.line-height-7 {
    line-height: var(--lineheight-7)
}

@media screen and (max-width: 767px) {
    .hide-mobile {
        display: none
    }
}

@media screen and (min-width: 768px)and (max-width: 899px) {
    .hide-tablet-sm {
        display: none
    }
}

@media screen and (min-width: 900px)and (max-width: 1024px) {
    .hide-tablet {
        display: none
    }
}

@media screen and (min-width: 1025px) {
    .hide-desktop {
        display: none
    }
}
/*# sourceMappingURL=main.css.map */