:root {

    /* Brand */

    --colour-brand: #141025;
    --colour-brand-light: #3E2880;
    --colour-accent: #9C488B;
    --colour-accent-hover: #86407A;

    /* Neutrals */

    --colour-background: #FFFFFF;
    --colour-surface: #F7F8FC;
    --colour-border: #E4E8F0;

    --colour-heading: #141025;
    --colour-text: #5C667A;

    /* Background colours */
    --colour-text-dark-bg: #FFF;
    --colour-text-light-bg: #5C667A;


    /* Links - Light Backgrounds */

    --colour-link: #86407A;
    --colour-link-hover: #3E2880;

    /* Links - Dark Backgrounds */

    --colour-link-dark: #D9A0D0;
    --colour-link-dark-hover: #FFFFFF;

    /* Layout */

    --container: 1320px;

    /* Radius */

    --radius: 14px;
    --radius-large: 22px;

    /* Shadows */

    --shadow-sm: 0 2px 6px rgba(20,16,37,.04);
    --shadow: 0 12px 30px rgba(20,16,37,.08);

    /* Spacing */

    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;

}

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

html {
    scroll-behavior: smooth;

    overflow-x: clip;
}

body {
    margin: 0;

    overflow-x: clip;

    font-family: Inter, Arial, sans-serif;

    font-size: 18px;

    line-height: 1.65;

    color: var(--colour-text);

    background: var(--colour-background);
}

img{

    display:block;

    max-width:100%;

}

a {
    color: var(--colour-link);
    text-decoration: none;

    transition: color .2s ease;
}

a:not(.button):hover {
    color: var(--colour-link-hover);
}

h1,h2,h3,h4{

    margin:0 0 var(--space-5);

    color:var(--colour-heading);

    font-family:Manrope,Inter,sans-serif;

    font-weight:700;

    line-height:1.15;

}

h1{

    font-size:clamp(2.75rem,6vw,4.5rem);

}

h2{

    font-size:clamp(2rem,4vw,3rem);

}

p{

    margin:0 0 var(--space-5);

}


/* ==========================================================================
   Form Controls
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
select,
textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;

    border: 1px solid var(--colour-border);
    border-radius: var(--radius);

    background: var(--colour-background);
    color: var(--colour-text);

    font: inherit;
    line-height: 1.4;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background-color .2s ease;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
select {
    min-height: 52px;
    padding: .75rem 1rem;
}

textarea {
    min-height: 140px;
    padding: .85rem 1rem;
    resize: vertical;
}

input::placeholder,
textarea::placeholder {
    color: var(--colour-text);
    opacity: .65;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;

    border-color: var(--colour-accent);

    box-shadow:
        0 0 0 3px color-mix(
            in srgb,
            var(--colour-accent) 14%,
            transparent
        );
}

input:disabled,
select:disabled,
textarea:disabled {
    opacity: .65;
    cursor: not-allowed;
}

input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
    border-color: var(--colour-accent-hover);
}


p a,
li:not(.menu-item) a,
blockquote a {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}