﻿:root {
    --primary-tint-ochre: #FAC08F;
    --primary-tint-faint-ocean: #F1F2F9;
    --primary-tint-faint-ochre: #FFF6ED;
    /* Spacing System (8px Grid) */
    --cmca-space-xxs: 4px;
    --cmca-space-xs: 8px;
    --cmca-space-sm: 12px;
    --cmca-space-md: 16px;
    --cmca-space-lg: 24px;
    --cmca-space-xl: 32px;
    --cmca-space-xxl: 40px;
    --cmca-space-xxxl: 48px;
    /* Brand Colours */
    --cmca-brand-dark: #102B45;
    --cmca-brand-light: #4876BA;
    --cmca-brand-light-tint: #9CADD9;
    --cmca-brand-accent: #F58220;
    /* Text Colours */
    --cmca-neutral800: #44546F;
    --cmca-dark-neutral800: #9FADBC;
    --cmca-dark-neutral1000: #C7D1DB;
    --cmca-neutral400a: #091E424F;
    --cmca-dark-neutral900: #B6C2CF;
    --cmca-dark-neutral1100: #DEE4EA;
    --cmca-neutral0: #FFFFFF;
    /* Light mode */
    --cmca-text: var(--cmca-neutral1000);
    --cmca-text-subtle: var(--cmca-neutral800);
    --cmca-text-disabled: var(--cmca-neutral400a);
    --cmca-text-inverse: var(--cmca-neutral0);
    --cmca-neutral1000: #172B4D;
    --cmca-neutral300a: #091E4224;
    --cmca-neutral400a: #091E424F;
    --cmca-purple-800: #5E4DB2;
    --cmca-blue-700: #0C66E4;
    --cmca-hover: var(--cmca-neutral300a);
    --cmca-pressed: var(--cmca-neutral400a);
    --cmca-link: var(--cmca-blue-700);
    --cmca-focus: #0085B3;
    --cmca-visited: var(--cmca-purple-800);
    --cmca-neutral100: #F7F8F9;
    --cmca-neutral200: #F1F2F4;
    --card-rest: #F9F9FD;
    --card-hover: #F1F0F4;
    /* Font Sizes */
    --cmca-font-h1: 3.27rem;
    --cmca-font-h2: 2.26rem;
    --cmca-font-h3: 1.86rem;
    --cmca-font-h4: 1.53rem;
    --cmca-font-h5: 1.27rem;
    --cmca-font-body: 1.06rem;
    --cmca-font-quote: 1.2rem;
    --cmca-font-hero-quote: 1.34rem;
    --cmca-font-body-small: 0.875rem;
    --cmca-font-body-large: 1.2rem;
    --cmca-font-button: 1rem;
    --cmca-font-label: 0.875rem;
    --cmca-font-callout: 1.3rem;
    /* Font Weights */
    --cmca-font-weight-bold: 700;
    --cmca-font-weight-semibold: 600;
    --cmca-font-weight-medium: 500;
    --cmca-font-weight-regular: 400;
    --cmca-font-weight-light: 300;
    /* Dynamic Spacing Based on Font Size */
    --cmca-space-dynamic-h1: calc(var(--cmca-font-h1) * 0.5);
    --cmca-space-dynamic-h2: calc(var(--cmca-font-h2) * 0.5);
    --cmca-space-dynamic-h3: calc(var(--cmca-font-h3) * 0.5);
    --cmca-space-dynamic-h4: calc(var(--cmca-font-h4) * 0.5);
    --cmca-space-dynamic-h5: calc(var(--cmca-font-h5) * 0.5);
    --cmca-space-dynamic-body: calc(var(--cmca-font-body) * 0.5);
    --cmca-space-dynamic-quote: calc(var(--cmca-font-quote) * 0.5);
    --cmca-space-dynamic-hero-quote: calc(var(--cmca-font-hero-quote) * 0.5);
    --cmca-space-dynamic-body-small: calc(var(--cmca-font-body-small) * 0.5);
    --cmca-space-dynamic-body-large: calc(var(--cmca-font-body-large) * 0.5);
    --cmca-space-dynamic-callout: calc(var(--cmca-font-callout) * 0.5);
    --cmca-space-dynamic-label: calc(var(--cmca-font-label) * 0.5);
    /* Content Container Widths */
    --cmca-content-container-xxs: 288px;
    --cmca-content-container-xs: 432px;
    --cmca-content-container-sm: 704px;
    --cmca-content-container-md: 944px;
    --cmca-content-container-lg: 1280px;
    --cmca-content-container-xl: 1608px;
    --cmca-animation-duration: 0.3s;
    --cmca-animation-easing: ease-out;
    --cmca-button-focus-scale: (1.02);
    --cmca-button-focus-shadow-light: 0 0 0 3px rgba(245, 130, 32, 0.4);
}

.cms {
    max-width: var(--cmca-content-container-sm);
    margin: 0 auto;
    padding: 0 var(--cmca-space-lg);
    background-color: transparent;
}

    .cms *, .fr-wrapper * {
        font-family: 'Poppins' !important;
    }

    .cms p, .fr-wrapper p, .cms a, .fr-wrapper a, .cms li, .fr-wrapper li {
        font-size: var(--cmca-font-body);
        font-weight: var(--cmca-font-weight-light);
        line-height: 1.6 !important;
    }

    .cms p, .fr-wrapper p {
        margin-top: var(--cmca-space-dynamic-body);
        margin-bottom: var(--cmca-space-dynamic-body);
    }

    .cms a, .fr-wrapper a {
        display: inline-block;
        border-radius: var(--cmca-space-xxs);
        text-decoration: none;
        color: var(--cmca-link);
        font-weight: 600;
        position: relative;
        cursor: pointer;
    }

        .cms a:hover, .fr-wrapper a:hover {
            background-color: var(--cmca-hover);
            text-decoration: underline;
        }

        .cms a:active, .fr-wrapper a:active {
            background-color: var(--cmca-pressed);
        }

        .cms a:visited, .fr-wrapper a:visited {
            color: var(--cmca-visited);
        }

        .cms a:focus-visible, .fr-wrapper a:focus-visible {
            outline: 1.5px solid var(--cmca-focus);
            outline-offset: 2px;
        }

        .cms a:focus:not(:focus-visible), .fr-wrapper a:focus:not(:focus-visible) {
            outline: none;
        }

    .cms .cms-button a, .fr-wrapper .cms-button a {
        font-family: 'Poppins', sans-serif;
        font-size: var(--cmca-font-button);
        font-weight: var(--cmca-font-weight-semibold);
        line-height: 1.4;
        padding: var(--cmca-space-xs) var(--cmca-space-md);
        margin-top: var(--cmca-space-dynamic-body);
        margin-bottom: var(--cmca-space-dynamic-body);
        border-radius: var(--cmca-space-lg);
        display: inline-block;
        text-align: center;
        text-decoration: none;
        border: none;
        cursor: pointer;
        transition: transform var(--cmca-animation-duration) var(--cmca-animation-easing), box-shadow var(--cmca-animation-duration) var(--cmca-animation-easing);
    }

        .cms .cms-button a:hover, .fr-wrapper .cms-button a:hover {
            box-shadow: 0 0 8px rgba(245, 130, 32, 0.3);
        }

        .cms .cms-button a:active, .fr-wrapper .cms-button a:active {
            transform: scale(1.02);
            box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.4);
        }

        .cms .cms-button a:disabled, .fr-wrapper .cms-button a:disabled, .cms-disabled {
            cursor: not-allowed;
            pointer-events: none;
        }

.fr-dropdown-list .cms-disabled {
    cursor: default;
    pointer-events: all;
}

.cms .cms-button a:focus-visible, .fr-wrapper .cms-button a:focus-visible {
    outline: 2px solid var(--cmca-brand-dark);
    outline-offset: 2px;
}

.cms .cms-button a:focus:not(:focus-visible), .fr-wrapper .cms-button a:focus:not(:focus-visible) {
    outline: none;
}

.cms .cms-button-primary a, .fr-wrapper .cms-button-primary a {
    background-color: var(--cmca-brand-accent);
    color: var(--cmca-brand-dark) !important;
    text-decoration: none !important;
}

    .cms .cms-button.cms-button-primary a:disabled, .cms .cms-button-primary.cms-disabled a, .cms .cms-button.cms-button-primary a:disabled *, .cms .cms-button-primary.cms-disabled a *, .fr-wrapper .cms-button.cms-button-primary a:disabled, .fr-wrapper .cms-button-primary.cms-disabled a, .fr-wrapper .cms-button.cms-button-primary a:disabled *, .fr-wrapper .cms-button-primary.cms-disabled a * {
        color: var(--cmca-text-disabled) !important;
        background-color: var(--cmca-neutral200);
    }

    .cms .cms-button-primary a:hover, .cms .cms-button-primary a:hover *, .fr-wrapper .cms-button-primary a:hover, .fr-wrapper .cms-button-primary a:hover * {
        background-color: #e65a00 !important;
        text-decoration: none !important;
    }

    .cms .cms-button-primary a:active, .fr-wrapper .cms-button-primary a:active {
        background-color: #cc5200;
        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2);
    }

.cms .cms-button-secondary a, .fr-wrapper .cms-button-secondary a {
    border: 2px solid var(--cmca-brand-accent);
    transition: border-color 0.3s ease, color 0.3s ease;
}

    .cms .cms-button-secondary a, .cms .cms-button-secondary a *, .fr-wrapper .cms-button-secondary a, .fr-wrapper .cms-button-secondary a * {
        color: var(--cmca-brand-accent) !important;
        background-color: transparent;
    }

        .cms .cms-button.cms-button-secondary a:disabled, .cms .cms-button-secondary.cms-disabled a, .fr-wrapper .cms-button.cms-button-secondary a:disabled, .fr-wrapper .cms-button-secondary.cms-disabled a {
            border: 2px solid var(--cmca-text-disabled);
        }

            .cms .cms-button.cms-button-secondary a:disabled, .cms .cms-button-secondary.cms-disabled a, .cms .cms-button.cms-button-secondary a:disabled *, .cms .cms-button-secondary.cms-disabled a *, .fr-wrapper .cms-button.cms-button-secondary a:disabled, .fr-wrapper .cms-button-secondary.cms-disabled a, .fr-wrapper .cms-button.cms-button-secondary a:disabled *, .fr-wrapper .cms-button-secondary.cms-disabled a * {
                color: var(--cmca-text-disabled) !important;
                background-color: var(--cmca-neutral100);
            }

        .cms .cms-button-secondary a:hover, .fr-wrapper .cms-button-secondary a:hover {
            text-decoration: none !important;
            border-color: #e65a00;
        }

            .cms .cms-button-secondary a:hover, .cms .cms-button-secondary a:hover *, .fr-wrapper .cms-button-secondary a:hover, .fr-wrapper .cms-button-secondary a:hover * {
                color: #e65a00 !important;
                background-color: transparent;
            }

        .cms .cms-button-secondary a:active, .fr-wrapper .cms-button-secondary a:active {
            border-color: #cc5200;
            box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2);
        }

            .cms .cms-button-secondary a:active, .cms .cms-button-secondary a:active *, .fr-wrapper .cms-button-secondary a:active, .fr-wrapper .cms-button-secondary a:active * {
                color: #cc5200;
            }

.cms .cms-button-link, .fr-wrapper .cms-button-link {
    background: none;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    .cms .cms-button-link, .cms .cms-button-link *, .fr-wrapper .cms-button-link, .fr-wrapper .cms-button-link * {
        color: var(--cmca-brand-accent) !important;
    }

        .cms .cms-button-link:hover, .fr-wrapper .cms-button-link:hover {
            text-decoration: underline;
            background-color: rgba(245, 130, 32, 0.15);
        }

            .cms .cms-button-link:hover, .cms .cms-button-link:hover *, .fr-wrapper .cms-button-link:hover, .fr-wrapper .cms-button-link:hover * {
                color: #e65a00 !important;
            }

        .cms .cms-button-link:active, .fr-wrapper .cms-button-link:active {
            background-color: rgba(245, 130, 32, 0.35);
            color: #cc5200 !important;
        }

.cms p.cms-hero-section, .fr-wrapper p.cms-hero-section {
    margin: 0 auto;
    text-align: center;
    background-color: var(--cmca-brand-light);
    height: 100px;
    color: white;
}

.cms p.cms-h1, .fr-wrapper p.cms-h1 {
    font-family: 'Lulo One', sans-serif !important;
    font-size: var(--cmca-font-h1);
    font-weight: var(--cmca-font-weight-bold);
    margin-top: var(--cmca-space-dynamic-h1);
    margin-bottom: var(--cmca-space-dynamic-h1);
}

    .cms p.cms-h1.alt, .fr-wrapper p.cms-h1.alt {
        color: var(--cmca-brand-light);
    }

.cms p.cms-h2, .fr-wrapper p.cms-h2 {
    line-height: 1.3 !important;
    text-transform: capitalize;
    font-size: var(--cmca-font-h2);
    font-weight: var(--cmca-font-weight-bold);
    margin-top: var(--cmca-space-dynamic-h2);
    margin-bottom: var(--cmca-space-dynamic-h2);
    color: var(--cmca-brand-dark);
}

.cms p.cms-h3, .fr-wrapper p.cms-h3 {
    font-size: var(--cmca-font-h3);
    font-weight: var(--cmca-font-weight-semibold);
    margin-top: var(--cmca-space-dynamic-h3);
    margin-bottom: var(--cmca-space-dynamic-h3);
    line-height: 1.3 !important;
    color: var(--cmca-brand-light);
}

    .cms p.cms-h3.highlight, .fr-wrapper p.cms-h3.highlight {
        color: var(--cmca-brand-accent);
    }

.cms p.cms-h4, .fr-wrapper p.cms-h4 {
    font-size: var(--cmca-font-h4);
    font-weight: var(--cmca-font-weight-medium);
    margin-top: var(--cmca-space-dynamic-h4);
    margin-bottom: var(--cmca-space-dynamic-h4);
    color: var(--cmca-text);
    line-height: 1.3 !important;
}

    .cms p.cms-h4.highlight, .fr-wrapper p.cms-h4.highlight {
        color: var(--cmca-brand-light);
    }

.cms p.cms-h5, .fr-wrapper p.cms-h5 {
    font-size: var(--cmca-font-h5);
    font-weight: var(--cmca-font-weight-regular);
    margin-top: var(--cmca-space-dynamic-h5);
    margin-bottom: var(--cmca-space-dynamic-h5);
    line-height: 1.4 !important;
}

.cms p.cms-label, .fr-wrapper p.cms-label {
    font-size: calc(var(--cmca-font-label) * 0.9);
}

.cms p.cms-large, .fr-wrapper p.cms-large {
    font-size: var(--cmca-font-body-large);
    margin-top: var(--cmca-space-dynamic-body-large);
    margin-bottom: var(--cmca-space-dynamic-body-large);
    line-height: 1.5 !important;
}

.cms p.cms-small, .fr-wrapper p.cms-small {
    font-size: var(--cmca-font-body-small);
    margin-top: var(--cmca-space-dynamic-body-small);
    margin-bottom: var(--cmca-space-dynamic-body-small);
    line-height: 1.5 !important;
}

.cms p.cms-quote, .fr-wrapper p.cms-quote {
    font-size: 26px;
    font-style: italic;
    font-weight: 300;
    line-height: 1.5 !important;
}

.cms p.cms-big-quote, .fr-wrapper p.cms-big-quote {
    font-size: 29px;
    font-style: italic;
    font-weight: 300;
    line-height: 1.5 !important;
}

.cms p.cms-quote, .fr-wrapper p.cms-quote, .cms p.cms-big-quote, .fr-wrapper p.cms-big-quote {
    position: relative;
    padding: var(--cmca-space-lg) var(--cmca-space-md);
    background-color: rgba(72, 118, 138, 0.1);
    border-left: 4px solid var(--cmca-brand-accent);
}

    .cms p.cms-quote::before, .fr-wrapper p.cms-quote::before, .cms p.cms-big-quote::before, .fr-wrapper p.cms-big-quote::before {
        content: '“';
        font-size: 2.5rem;
        font-weight: bold;
        color: var(--cmca-brand-dark);
        position: absolute;
        left: 12px;
        top: -4px;
    }

.cms p.cms-callout, .fr-wrapper p.cms-callout {
    font-size: var(--cmca-font-callout);
    font-weight: var(--cmca-font-weight-medium);
    margin-top: var(--cmca-space-dynamic-callout);
    margin-bottom: var(--cmca-space-dynamic-callout);
    padding: var(--cmca-space-md);
    border-left: 4px solid var(--cmca-brand-light);
    background: rgba(123, 175, 224, .35);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.cms p.cms-disabled, .fr-wrapper p.cms-disabled {
    color: var(--cmca-text-disabled);
    cursor: not-allowed;
}

.cms p.cms-muted, .fr-wrapper p.cms-muted {
    color: var(--cmca-text-subtle);
}

.cms ul, .fr-wrapper ul {
    margin-top: 0;
    margin-bottom: 1rem;
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    padding-inline-start: 40px;
    unicode-bidi: isolate;
}

.cms li, .fr-wrapper li {
    margin-bottom: 20px !important;
    list-style: disc;
}

.hero-section {
    margin: 0 auto;
    text-align: center;
    background-color: var(--cmca-brand-light);
    height: 100px;
}