/* @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); */

@font-face {
    font-family: 'Mona Sans';
    src:
      url('/fonts/Mona-Sans.woff2') format('woff2 supports variations'),
      url('/fonts/Mona-Sans.woff2') format('woff2-variations');
    font-weight: 200 900;
    font-stretch: 75% 125%;
  }

  /* html {
    font-family: 'Mona Sans';
  } */

/* Mobile first CSS */



:root {
    /* Colours */
    /* --primary: #3d7a91; */

     --primary: #3d7a91;

    --primary-alpha: #3d7a9100;
    --primary-dark: #002e3f7f;
    --primary-hover: #1f095a;
    --marker: #8dc001;
    --alertz: #F2EC40;
    --secondary: #C35346;
    --secondary-alpha: #ae198400;
    --midAccent: #b0b0b0;
    --slightAccent: #f2f2f2;

    --accentOne: #36aecc;
    --accentTwo: #4b889e;
    --accentThree: #25586b;
    --accentFour:rgb(154, 224, 242);
    --accentFive:rgb(214, 247, 255);
    --accentSix: #72b3cb;

    --tertiary: #E1E2D5;

    /* --bgcolour: #DBD3F0; */ 
    /* --bgcolour: #dbe9fc; */
    /* --bgcolour: #E3E5EA; */
    --bgcolour: #f7f8f8;
    /* --bgDark: #220B84; */
    --bgDark: #31697e;
    
    --required: #d71111;
    --fs-bg: #e6f1f4;
    --fs-bg-dark: #c0e5ef;




    --text: #313131;
    --headtext: #616179;
    --white: #fff;
    --halfwhite: rgba(255,255,255,0.5);
    --mainlywhite: rgba(255,255,255,0.75);
    --mostlywhite: rgba(255,255,255,0.95);
    --lightBg: #F1EEF8;

    /* Break points */
    --xxl: 1400px;
    --xl: 1200px;
    --lg: 992px;
    --md: 768px;
    --sm: 576px;

    /* Login UI top offset */
    --adminUiOffset: 32px;

    /* Typography */
    --oneSpace: .05rem;
    /* //--font-mainFont: Rubik; */
    /* --font-mainFont: Kollektif Bold; */
    --font-mainFont: "Poppins", sans-serif;
    --font-subFont: Mona Sans, -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;

    /* Border-radius */
    --tightCorners: 10px;
    --corners: 20px;
    --panelShadow: 1px 2px 2px 0px rgba(0,0,0,0.25);
    --navShadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
    --lightShadow: 4px 4px 6px 0px rgba(0,0,0,0.25);
    --headlineShadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5);
}

.grad-background {
    /* background-color: var(--secondary);
    background-image: linear-gradient(45deg, var(--secondary), var(--primary));
    background-size: 100%;
        --accentOne: #9254CC;
    --accentTwo: #3C4CD1;
    --accentThree: #240B8F;
    
    */

    background-color: var(--primary);
    background-image: linear-gradient(45deg, var(--accentThree), var(--accentTwo), var(--accentOne));
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
/* 
    background: linear-gradient(16deg, rgba(225, 107, 70, 0.50) 5.58%, rgba(13, 10, 22, 0.50) 21.01%, rgba(17, 10, 40, 0.50) 30.93%, rgba(37, 10, 120, 0.50) 63.54%, rgba(53, 66, 165, 0.50) 79.39%, rgba(107, 70, 153, 0.50) 96.12%), linear-gradient(16deg, #E16B46 5.58%, #0D0A16 21.01%, #110A28 30.93%, #250A78 63.54%, #3542A5 79.39%, #6B4699 96.12%), #0F0F0F;
    background-blend-mode: color-dodge, normal, normal; */
}

.heada {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;

    .top-frame {
        text-align: center;
        align-items: center;

        h2 {
            width: 100%;
        }
    }

    p {
        text-align: center;
        width: 85%;
        text-wrap: balance;
    }
}

.hero {
        display: inline-flex;
        width: 100%;
        min-height: 800px;
        /* background-color: var(--primary); */
        /* border: 1px solid red; */
        /* padding-top: 150px; */
       /* border: 1px solid red; */
       justify-content: center;
        height: unset;
        max-width: unset !important;
        margin: unset !important;
        justify-content: flex-start;
        /* margin-bottom: -300px !important; */
        /* background-image: url('/assets/bench-bg.svg'); */

/*
* Created with https://www.css-gradient.com
* Gradient link: https://www.css-gradient.com/?c1=a0c9ff&c2=fcd0ff&gt=r&gd=dtl
*/
/* background: #A0C9FF;
background: radial-gradient(at left top, #A0C9FF, #FCD0FF); */

/*
* Created with https://www.css-gradient.com
* Gradient link: https://www.css-gradient.com/?c1=86b9fd&c2=d5bcff&gt=r&gd=dtl
*/

/* background: radial-gradient(at left top, #86B9FD, #D5BCFF); */

/*
* Created with https://www.css-gradient.com
* Gradient link: https://www.css-gradient.com/?c1=86b9fd&c2=d0b7fb99&gt=r&gd=dtl
*/
/* background: #86B9FD;
background: radial-gradient(at left top, #86B9FD, #D0B7FB99); */

      background-image: url('/assets/bg-curve.svg'), url('/assets/ecsendant-logo-icon-green-15.png'), linear-gradient(360deg,  #C5EBF0, #C5EBF0, #84c1d1, #457D92); 
      background-color: var(--bgcolour);
        /* background-image: url('/assets/grad.png'), radial-gradient(at left top, #87b7f6bb,  white 60%, #d0b7fbc3);  */

        
        background-repeat:  no-repeat, no-repeat, no-repeat;
        background-position: center 260px, right -60px center, 50% 50%;
        background-size: cover, 400px, cover;


        /* padding-top: 0px; */
        /* linear-gradient(white, var(--bgcolour)) */
        /* background-image: url('/assets/hero-new.webp'), linear-gradient(white, var(--bgcolour));

        background-repeat: no-repeat;
        background-size: clamp(800px, 100%, 1700px) auto, cover;
        background-position: 50% 50%; */
        /* background-attachment:fixed; */
        
        .heada {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.8rem;

            .top-frame {
                text-align: center;
                align-items: center;
            }
    
            p {
                text-align: center;
                width: 88%;
                text-wrap: balance;
            }
        }



        .container {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            /* margin-top: -300px; */
            position: relative;
            /* //border: 1px solid red; */
            margin-top: 3rem;
            gap: 0.6rem;
        }

        .text-frame {
            width: 45%;
            display: flex;
            flex-direction: column;
        }

        /* h1, p {
            color: var(--text);
        } */




        .hero-image {
            /* width: 500px; */
            margin: 0px 0px 0px;
            position: absolute;
            z-index: 4;
            right:0;
            /* left: 100; */
            bottom: 0;
            top: 360px;
            margin-bottom: unset;
        }
        .hero-engram-one {
            position: absolute;
            z-index: 3;
            right: 0;
            bottom: 0;
            top: 300px;
            width: 560px;
            /* opacity: 0; */
           /* visibility: hidden; */
            animation: myAnim 5s ease-in-out 1s infinite normal forwards;
        }

        .visible {
            /* visibility: visible;
            opacity: 1;
            top: 240px;
            transition: all 1.4s linear; */
            animation: myAnim 4s ease-in-out 1s infinite normal forwards;
        }

        .visibleOut {
            visibility: visible;
            opacity: 0;
            top: 300px;
            transition: all .6s linear;
        }



    }
.hero-trip {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    margin-top: 40px;
    align-items: center;
    gap: 0px;

    img {
        margin-bottom: 0px;
        height: auto;
        min-width: 200px;

        /* &:first-of-type, &:last-of-type{
           height: 70%;
        } */
    }
}

/* Hero images fade in one after the other, once, on page load. */
@keyframes hero-trip-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Animate the flex children themselves, not the images: child 1 is a
   <picture>, whose <img> sits after the <source> tags and so cannot be
   addressed by position alongside the plain <img> siblings. */
.hero-trip > * {
    opacity: 0;
    animation: hero-trip-fade-in 0.8s ease-out forwards;
}

.hero-trip > :nth-child(1) {
    animation-delay: 0.2s;
}

.hero-trip > :nth-child(2) {
    animation-delay: 1s;
}

.hero-trip > :nth-child(3) {
    animation-delay: 1.8s;
}

@media (prefers-reduced-motion: reduce) {
    .hero-trip > * {
        opacity: 1;
        animation: none;
    }
}

/* On phones the trio stacks into a very tall column, so the third image is
   dropped and only the first two run through the fade sequence. */
.hero-trip > :nth-child(3) {
    display: none;
}

@media (min-width: 768px) {
    .hero-trip {
        gap: 24px;
        flex-direction: row;
        align-items: flex-end;
    }
     

    .hero-trip > :nth-child(3) {
        display: block;
    }
}


.shadow-text {
  
    background-color: white;
    background-image: linear-gradient(45deg, var(--slightAccent), var(--bgcolour));
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    /* -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent; */
    text-shadow: var(--headlineShadow);
    color: white !important;
}


ul.instruct-list {
    padding: 0px 0px 0px 0px !important;
    display: flex;
    gap: 24px !important;
    flex-direction: column;

    li {
        display: flex;
        align-items: center;
        gap: 20px;
        width: 100%;
        text-transform: none !important;

        img {
            width: 76px;
            height: auto;
        }

        &:after {
            display: none !important;
        }
    }
}

 @media (min-width: 768px) {
    ul.instruct-list {
    padding: 0px 0px 0px 0px !important;
    display: flex;
    flex-direction: row;
    gap: 24px !important;

    li {
        display: flex;
        align-items: center;
        gap: 20px;
        width: 33%;

        img {
            width: 76px;
            height: auto;
        }

        &:after {
            display: none !important;
        }
    }
}

 }

.image-group {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 20px 0px;   

    .image-group--snap {
        border-radius: 10px;
        max-width: 160px;
        border: 2px solid white;
        box-shadow: var(--lightShadow);
        transform: rotate(8deg);
        height: auto;
        width: 25%;

        &:nth-of-type(odd) {
             transform: rotate(-8deg) translateY(24px);
        
        }
    }
}

a, button {
    color: var(--primary);
    transition: all .2s ease-in-out;


    &:focus-visible {
        outline-offset: 6px;
        outline: 3px dotted var(--primary);
    }
}

.mobile-only {
    display: inline-block;
}

.desktop-only {
    display: none;
}

.blog-bg {
    background-image: linear-gradient(180deg, var(--bgcolour), #fff);
}

.blog-post {
    padding: 60px 0px;

    .items-center{
        div {
            display: flex;
            flex-direction: column;
        }
    }

    h1 {
        font-size: 4rem;
        line-height: 4.6rem;
    }

    .blog-excerpt {
        font-size: 1.15rem;
        margin: 20px 0px;
    }

    .blog-width {
        max-width: 860px;
        width: 70%;
        margin: 0px auto;
    }
    .cover-image {
        border-radius: var(--corners);
        margin: 20px auto 40px;
        width: 100%;
        max-width: 1100px;
        height: auto;
        aspect-ratio: 16 / 8;
        object-fit: cover;
    }
}

.support-post {
    padding: 0px 0px 40px;

    .markdown {
        /* max-width: 1015px;
        width: 90%; */
        margin: 0px auto;
        background-color: var(--white);
        /* border: 1px solid red; */
        padding: 10px 20px 10px 20px;
        border-radius: var(--corners);
        box-shadow: var(--panelShadow);
        margin-top: 20px;

        ul:first-of-type {
            margin: 20px 0px 40px;
        }

        h2, h3 {
            margin-top: 36px;
        }

        h4 {margin-bottom: 4px;}



        img {
            float: unset;
            margin: 16px 0px;
        }
    }
}


.fade-in-section {
    opacity: 0;
    transform: translateY(16vh);
    visibility: hidden;
    transition: opacity 0.6s ease-out, transform .8s ease-out;
    will-change: opacity, visibility;
  }
  .fade-in-section.is-visible {
    opacity: 1;
    transform: none;
    visibility: visible;
  }


.wp-block-post-title {
    width: 100%;
    background-color: var(--secondary);
    background-image: linear-gradient(45deg, var(--secondary), var(--primary));
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
}


    .width-3-5 {
        width: calc(100% - 10px);
    }

    .width-4-5 {
        width: calc(100% - 30px);
    }

    .width-2-5 {
        width: calc(100% - 30px);

        > h3 {
            margin-top: 0px;
        }

        form.contact-form {
            margin: 0px 0px;
        }
    }

.width-halfbreak {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    margin: 20px 0px;

    > * {
        width: calc(50% - 20px);
    }

}

.entry-content {
    width: 100%;
}


.element {
    width: 300px;
    height: 100px;
    border-radius: 20px;
    background: linear-gradient(265.27deg, #0000 20.55%, #00F27E 94.17%);
    background-color: #00F27E;
    transition: all 400ms ease-in;
  }

  .element:hover {
    background-color: #00FFE0;
  }

.button-primary {
    color: var(--white);
    border-radius: 30px;
    padding: 8px 30px;
    display: inline-flex;
    text-align: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.45rem;
    transition: all .4s ease-in-out;
    text-wrap: nowrap;
    font-family: var(--font-mainFont);
    text-decoration: none;
    cursor: pointer;
    border: 0px;
    align-items: center;
    background: linear-gradient(45deg, var(--secondary) 0%,  var(--secondary) 100%);
    background-color:  var(--secondary) !important; 

    &:hover {
        background: linear-gradient(45deg, var(--primary-alpha) 0%,  var(--secondary) 100%);
        background-color: var(--primary) !important;
    }
}

.section.container {
    /*padding-top: 60px;*/
    flex-direction: column;
    align-items: flex-start;

    &.mason{
      h1 {
        width: 100%;
      }

      section.blocks {
        margin-bottom: 60px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

   
      }
    }


}

table {
    font-family: var(--font-mainFont);
    text-align: left;
    font-size: 1rem;
    line-height: 1.6rem;
    color: var(--text);
    margin: 20px 0px 100px 0px;

    thead {
        tr {
            background-color: var(--bgDark);

            th {
                padding: 10px;
                color: var(--white);

                &:first-of-type {
                    width: 75%;
                }
            }
        }
    }

    tbody {
        tr {
            td {
                padding: 20px 20px 20px 10px;
                color: var(--text);
                border-bottom: 2px solid var(--bgDark);

                &:first-of-type {
                    width: 75%;
                }
            }
        }
    }
/* 
    caption {
        display: none;
    } */
}

.header-large {
    font-size: 4rem;
    letter-spacing: -4px;
}

/* .box {
    --c:red;
    cursor:pointer;
    width:250px;
    height:200px;
    margin:15px;
    display:inline-block;
    transition:--c 0.5s;
    background:linear-gradient(var(--c),blue);
  }
  .box:hover {
    --c:green;
  } */

.button-tertiary {
    background-color: var(--white);
    color: var(--text);
    border-radius: 30px;
    padding: 8px 30px;
    display: inline-flex;
    text-align: center;
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.45rem;
    transition: all .4s ease-in-out;
    text-wrap: nowrap;
    font-family: var(--font-mainFont);
    text-decoration: none;
    border: 2px solid var(--primary);
    text-wrap: balance;

    &:hover {
       /* background: linear-gradient(45deg, var(--secondary), var(--primary)); */
       background-color: var(--secondary);
    }


    &:hover {
        /* //background-color: var(--primary-hover); */
        background-image: linear-gradient(45deg, var(--secondary), var(--primary));
        color: var(--white);
    }


}
.split-holder {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 20px;
    align-items: center;
    gap: 20px;
}

.button-secondary {

    color: var(--primary);
    padding: 8px 30px;
    display: inline-flex;
    text-align: center;
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.45rem;
    transition: all .4s ease-in-out;
    text-wrap: nowrap;
    font-family: var(--font-mainFont);
    text-decoration: none;
    position: relative;
    border-radius: 30px;
    border: 1px solid var(--accentSix);

     &:after {
          
            display: none;
        }


    &:hover {
        &:after {
            right: -20px;
            display: none;
        }
       background-color: var(--fs-bg-dark);
    }

    &:after {
        background-image: url('/assets/blue-arrow-right.svg');
        background-repeat: no-repeat;
        background-size: contain;
        width: 30px;
        height: 30px;
        content: ' ';
        position: absolute;
        right: -10px;
        top: auto;
        bottom: auto;
        /* border: 1px solid red; */
        margin-top: -3px;
        transition: right .4s ease-in-out;
    }
}

img {
    &.roundal {
        /* border-radius: var(--corners);*/
        border-radius: 10px;  
        border: 2px solid var(--primary);
        margin: 0px 10px 26px 10px;
        width: clamp(320px, 25vw, 380px);
        
    }
}


body {
    border: 0px;
    background-color: var(--bgcolour);

    &.hide-header-footer .site-header,
    &.hide-header-footer .footer,
    &.hide-header-footer .container > ul.breadcrumb li {
      display: none;
      /* border: 1px solid red; */
    }

    &:has(> .locked) {
        overflow: hidden;
      }

    &.locked-scroll {
        overflow: hidden;
    }

    &#holding {
        background-color: var(--bgcolour);
       
        /* min-height: unset; */
    
        /* background-image: url('/assets/engram-three-d.png');
        background-size: cover;
        background-repeat: no-repeat; */
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 0px;

        > main {
            background-color: unset;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            /* height: unset;
            min-height: unset; */
            grid-row: span 2 / span 2;

           

            > .container {
                /* height: calc(100vh - 415px); */
                /* flex-direction: column;
                justify-content: center;
              
                position: relative;
                align-items: center;
                height: 100%; */
                /* border: 1px solid green; */
                /* display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center; */
                display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            margin: auto;
            gap: 50px;

                .card {
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    gap: 30px;
                    position: relative;
                    /* width: 50%; */
                    max-height: 200px;
                    /* z-index: 10; */
                    /* padding: clamp(40px, 12vh, 60px) clamp(70px, 10vw, 100px); */
                    padding: clamp(10px, 9vh, 100px) clamp(30px, 10vw, 130px);
                    /* backdrop-filter: blur(10px); */
                    background-color: rgba(255, 255, 255);
                    
                    img {
                        height: clamp(40px, 8vw, 60px);
                        max-width: unset;
                    }

                    &:after, &:before {
                        content: ' ';
                        position: absolute;
                        z-index: -1;
                        background-image: url('/assets/engram-three-d.png');
                        background-size: cover;
                        background-repeat: no-repeat;
                        inset: 0px 0px 0px 0px;
                        backdrop-filter: unset;

                    }

                    &:after {
                        width: 210px;
                        height: 210px;
                        left: calc(100% - 50px);
                        top: calc(0% - 100px);
                    }

                    &:before {
                        width: 200px;
                        height: 200px;
                        left: calc(0% - 170px);
                        top: calc(100% - 70px);
                    }

                    @media (min-width: 768px) {
                        &:after {
                            width: 120px;
                            height: 120px;
                            left: calc(100% - 90px);
                            top: calc(0% - 30px);
                        }
    
                        &:before {
                            width: 100px;
                            height: 100px;
                            left: calc(0% - 30px);
                            top: calc(100% - 80px);
                        }
                    }
                }

                /* img.float-icon {
                    position: absolute;
                    z-index: 8;
                    max-width: 120px;

                    &.top-right {
                        right: 0%;
                    }

                    &.bottom-left {
                        left: 10%;
                        top: 
                    }
                } */

                h1 {
                    font-size: clamp(1.5rem, 8vw, 2.1rem);
                    line-height: clamp(2.1rem, 12vw, 3.1rem);
                    text-align: center;
                    color: var(--headtext);
                    padding-left:  5%;
                }
            }
        }

        > footer {
            /* position: absolute; */
            bottom: 0px;
            grid-row-start: 3;
        }
    }
}

body.logged-in {
    header {
        top: var(--adminUiOffset);
    }

    /* main {
        margin-top: calc(108px + var(--adminUiOffset));
    } */

}

hr {
    /* height: 26px; */
    margin: 20px 0px 30px;
    height: 1px;
    color: #fffefe;
    background-color: var(--primary);
    font-size: 0;
    border: 1px dashed;
    width: 100%;
}

.eyebrow {
    color: var(--accentFour);
}

/* Every .eyebrow on the site sits in a .top-frame alongside the heading
   that follows it. The wrapper exists only to own the one canonical
   eyebrow-to-heading gap, so the spacing is identical in every band.
   `align-items: inherit` keeps the pair aligned exactly as it was when
   the two sat directly in the parent flex column. */
.top-frame {
    display: flex;
    flex-direction: column;
    align-items: inherit;
    gap: 2.6rem;
    width: 100%;
}

/* Nothing may stack on top of the gap — the headings carry UA top
   margins and per-band margins that would otherwise add to it. */
.top-frame > .eyebrow {
    margin-bottom: 0px;
}

.top-frame > .eyebrow + * {
    margin-top: 0px;
}

h1, h2, h3, h4, h6{
    font-family: var(--font-mainFont);
    color: var(--text);
    margin-bottom: 0px;

    > a {
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }
}

h1, h1.section-title {
    font-size: clamp(2.4rem, 10vw, 4rem);
    line-height: clamp(3.2rem, 12vw, 4.8rem);
    margin: 0px 0px 10px;
    font-weight: 600;
    letter-spacing: -0.05rem;
    text-align: center;

    /* > span {
        
        font-size: clamp(1.8rem, 8vw, 2.2rem);
        line-height: clamp(1.8rem, 10vw, 2.8rem);
    } */

    &.spacer {

            margin-bottom: 40px;
 
    }


}

.blank-space {
    min-height: 140px;
    width: 100%;
}

h2, h3, h4{
    margin-bottom: 0px;
}

h2{
    /* font-size: 2.2rem;
    line-height: 2.8rem; */

    font-size: clamp(2rem, 7vw, 2.6rem);
    line-height: clamp(2.8rem, 7vw, 3.4rem);

    /* font-size: clamp(2rem, 10vw, 2.2rem);
    line-height: clamp(2.2rem, 12vw, 2.8rem); */
    font-weight: 600;
    /* margin: 24px 0px 14px; */
    /* margin: clamp(2rem, 10vw, 2.2rem) 0px clamp(2rem, 10vw, 2.2rem); */
    margin: clamp(.8rem, 4vw, 1rem) 0px clamp(.4rem, 4vw, .6rem);
    /* width: 80%; */
}

h3{
    font-size: 1.4rem;
    line-height: 2rem;
    font-weight: 600;
    margin: clamp(1.2rem, 4vw, 2rem) 0px clamp(.2rem, 4vw, .4rem);
}

/* h3{
    line-height: 3.6rem;
    font-weight: 700;
} */

h4{
    font-weight: 600;
    line-height: 1.7rem;
}

h6 {
    font-size: 0.9rem;
    line-height: 1.4rem;
    font-weight: 400;
    letter-spacing: 0.12rem;
}

p, ul, ol, table{
    font-family: var(--font-subFont);
    /* font-family: "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif"; */
}



  

p:has(+ul), p:has(+ol) {
    margin: 4px 0px 10px 0px;
}
ul, ol {
    font-size: 1rem;
    line-height: 1.6rem;
    color: var(--text);
    margin: 0px 0px 20px 0px;
    

    li {
        margin-bottom: 10px;

        &:last-of-type {
            margin-bottom: 2px;
        }
    }

    .bully-list {
        list-style-type: disc;
        list-style-position: outside;
        padding: 6px 0px 0px 16px;
    
        li {
            margin-bottom: 6px;
        }
    }
    
}

button:disabled {
    opacity: 0.5;
    cursor: auto;
}
.main-panel {
    width: 100%;
    /* border: 1px solid red; */
    display: flex;
    flex-direction: column;
    background-color: var(--white);
    border-radius: var(--corners);
    box-shadow: var(--panelShadow);
    gap: 10px;
    /* padding: 10px 0px; */
    margin: 20px 0px;

    & > .head,  & > .main {
        margin: 0px 0px 0px 0px;
    }
}

section.gradback {
    background-image: linear-gradient(360deg, var(--bgcolour), var(--bgcolour), var(--tertiary));

    &.secondgrad {
        background-image: linear-gradient(360deg, var(--white), var(--accentFive), var(--accentSix));

        .eyebrow {
            color: var(--secondary) !important;
        }

        /* p {
            color: var(--white) !important;
        } */
    }

    &.solidback {
         /* background-image: unset !important; */
         background-image: linear-gradient(360deg, var(--white), var(--fs-bg), var(--fs-bg-dark));
        /* background-color: var(--fs-bg) !important; */
       

        .eyebrow {
            color: var(--secondary) !important;
        }


    } 

    .container {
        padding: 2rem 20px 4rem 20px;

        .heada {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            gap: 10px;
            justify-content: center;
            padding: 30px 0px;

            h6 {
                color:var(--primary);
            }

       

            h2, h6, p {
                text-align: center;
            }
        }
    }
}

section.main-panel {
    /* flex-direction: row;
    align-items: center; */
    /* gap: 30px; */

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(1, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 20px;


    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 8px;

    padding: 20px;

    /* & > .head,  & > .main {
        margin: 0px 0px 0px 20px;
    } */

    & > .main {
        grid-column: span 2 / span 2;
       /* h2 {
            margin-bottom: 0px;
        } */
        h3 {
            margin-bottom: 20px;
        }
    }

    &.screen-section {
        /* flex-direction: row-reverse;
       
        align-items: flex-end; */
        /* margin-bottom: 0px; */

        /* display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(1, 1fr);
        gap: 0px;
        padding-bottom: 0px; */
        padding-bottom: 0px;
        display: flex;
        align-items: center;

        &.flip-order{
            flex-direction: column-reverse;
        }

        &:last-of-type {
            margin-bottom: 60px;
        }
       

        & > .main {
            margin-bottom: 30px;
            height: 100%;
            
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        /* img {
            max-width: 320px;
            width: 100%;
            aspect-ratio: 320 / 400;
            object-fit: cover;  
            vertical-align: middle;
            object-position:0px 0%;  
            margin-bottom: 0px;
            overflow-clip-margin: content-box;
            overflow: clip;
         } */
    }
}

.blank-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 50px 10px 70px;

    h2 {
        width: unset;
        text-align: center;
    }

    p {
        text-align: center;
    }

}
a.long-card-link {
    /* width: 100%; */
    /* border: 1px solid blue; */
    display: flex;
    width: 100%;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
    padding: 10px 20px 10px 20px;
    border-radius: var(--tightCorners);
    text-decoration: none;

    background-image: url("assets/Icons/right-caret.svg");
    background-size: 12px 12px;
    background-position: right 20px center;
    background-repeat: no-repeat;
    gap: 20px;
   

    img {
        max-width: 20px;
        opacity: 0.4;
        filter: invert(13%) sepia(45%) saturate(7486%) hue-rotate(256deg) brightness(87%) contrast(103%);
    }

    .text-content {
        display: flex;
        flex-direction: column;

        h4 {
            color: var(--headtext);
        }
        p {
            color: var(--text);
        }
    }


    &:hover, &:focus {
        background-color: var(--slightAccent);
        background-position: right 20px center;
    }

    p {
        margin: 0px 0px 0px 0px;
    }
}
/* table {
    thead {
        tr th {
            background-color: var(--primary);
            color: var(--white);
            padding: 10px 0px;
        }
    }

    tbody {
        tr td {
            padding: 10px 20px 0px 0px;
            border-bottom: 1px solid var(--primary);
        }
    }
} */
p{
    font-size: 1rem;
    line-height: 1.6rem;
    color: var(--text);
    margin: 4px 0px 20px 0px;
    font-weight: 400;

    &.smaller {
        color: var(--required);
        font-size: .8rem;
        text-align: right;
        margin: 4px 0px 4px;
    }

    &.intro-copy {
        font-size: 1.5rem;
        line-height: 2.2rem;
        font-weight: 450;
        margin: -4px 0px 30px;
        /* width: 66%; */
       /* // text-wrap: balance; */

        /* &::first-letter {
            -webkit-initial-letter: 1.5;
            initial-letter: 1.5;
        } */
    }

    a {
        color: var(--primary);
    }
}
.markdown {
    display: inline-block;

    ol, ul {
        list-style-position: outside;
        padding: 0px 0px 0px 20px;
    }

    ol li {
        padding: 0px 0px 0px 10px;
        border: 0px solid red;
        position: relative;
        display: list-item;
        
        &::marker {
            font-weight: bold;
        }
    }
}
video {
    &.guide-vid {
        border-radius: var(--tightCorners);
        border: 1px solid var(--midAccent);
        width: clamp(270px, 10vw, 300px);
        width: 100%;
        height: auto;
        max-width: 300px;
        /* clear: left;
        float: inline-start; */
        box-shadow: var(--lightShadow);
        position: relative;
        z-index: 2;
   
        margin: 10px 0px 10px 0px;
    }
}

.page-header {

    background-image: url('/assets/grad.png'), linear-gradient(to right, #fff3fc, #faf1fc, #f5eefd, #eeedfd, #e6ebfd, #e3eafd, #e1e9fe, #dee8fe, #e1e7ff, #e4e6ff, #e7e5ff, #ebe4ff);
    background-repeat:  repeat-x,  no-repeat;
    background-position: bottom -6px left,  50% 50%;
    background-size: 60px, cover;

    .container {
        min-height: 400px;
        padding: 20px 32px;
        /* flex-direction: column;
        align-items: flex-start; */
    }
}

details {
    /* border-top: 1px solid var(--primary); */
    border-bottom: 1px solid var(--primary);
    padding: 1rem 0px;
    width: 100%;
    font-family: var(--font-mainFont);
    font-weight: 300 !important;
    font-size: 1.2rem;
    /* display: flex;
    gap: 20px; */
    cursor: pointer;

    &:open {
         padding: 1rem 0px 0.25rem;

        summary {
            &::marker {

                transition: rotate .4s ease-in-out;
            }
        }

    }

    strong {
         font-weight: 500 !important;
         color: var(--primary);
         padding-left: 16px;
    }

    summary {

        &::marker {
            width: 20px;
            height: 20px;
            background-color: var(--primary);
            /* border-radius: 50%; */
            margin-right: 20px;
            color: var(--primary);
        }
    }

    ul  {
        font-weight: 400;
    }
   
}
form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;

    &.contact-form, &.signup-form {
       
        margin:20px 0px;
        
        fieldset {
            display: flex;
            flex-direction: column;
            width: 100%;
            padding: 0px 0px;
            border: 0px;
            gap: 6px;

            &.radios {
                display: flex;
                flex-direction: column;


                legend {
                    margin-bottom: 20px;
                    display: flex;
                    flex-direction: row;

                    span {
                        color: red;
                    }

                 
                }

                label {
                    display: flex;
                    flex-direction: row;
                    gap: 10px;
                    margin-bottom: 14px;

                    &:has(>input:required):after {
                        content: '';
                        color: var(--required);
                        position: absolute;
                        right: -10px;
                     }
                }
            }

            &.double-input {
                flex-direction: column;


                & > div{
                    width: 100%;
                    margin-bottom: 20px;


                    

                    input {
                        width: 100%;
                    }

                    &:last-of-type {
                        margin-bottom: 0px;
                    }
                }
            }
        }

        textarea {
            height: 180px;
        }
    }

    &.signup-form {
        align-items: center;
        justify-content: center;
     

        & > div {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            border: 0px solid red;
            justify-content: center;
            align-items: flex-end;
            gap: 20px;
            width: 100%;
            /* display: unset; */
        

            fieldset {
                width: 100%;
                border: 0px solid blue;
            }
        }

        /* .button-primary {
            height: 40px;
            line-height: 0px;
            padding: 0px 0px;

        } */
    }
   
}



.visually-hidden {
    position: absolute;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

fieldset {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0px 0px;
    border: 0px;
    gap: 6px;
}

label, legend{
    font-family: var(--font-subFont);
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-weight: 500;
    position: relative;
    width:fit-content;
    margin: 0px 0px 0px 0px;
    font-size: 1rem;

    &:has(+input:required):after {
       content: '*';
       color: var(--required);
       position: absolute;
       right: -10px;
    }

    &:has(>input:required):after {
        content: '*';
        color: var(--required);
        position: absolute;
        right: -10px;
     }
}
.required {
    color: var(--required) !important;
    font-size: 0.8rem;
}
label {
    /* &[for="firstname"], &[for="surname"] {
        width: 100%;
    } */
}

input, textarea, select {
    border: 1px solid var(--primary);
    font-family: var(--font-mainFont);
    border-radius: var(--tightCorners);
    padding: 8px;
    font-weight: 300;
    font-size: 0.9rem;
    width: 100%;

    &:disabled {
        opacity: 0.5;
    }

   
   
    
   

    &.large-input {
        width: 100%;
        padding: 10px 10px 10px 50px;

        &[type=search] {
            background-image: url('/assets/icons/search.svg');
            background-repeat: no-repeat;
            background-size: 30px;
            background-position: left 10px center;

            &::-webkit-search-cancel-button {
                -webkit-appearance: none;

                /* Now your own custom styles */
                height: 26px;
                width: 26px;
                border: 0px solid red;
                cursor: pointer;
                background-image: url('assets/Icons/close-circle.svg');
                background-repeat: no-repeat;
                background-size: contain;

                /* Will place small red box on the right of input (positioning carries over) */
              }
        }

    }

    &::placeholder {
        color: var(--midAccent);
        /* color: red; */
    }

  
}

input:where([type="checkbox"], [type="radio"]) {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    vertical-align: top;
    margin: calc(0.75em - 11px) 0.25rem 0 0;
    border: 1px solid var(--primary);
    border-radius: 4px;
    background: #fff no-repeat center center;
    outline: 1px solid var(--primary);
    cursor: pointer;
  }
  
  input[type="radio"] {
    border-radius: 50%;
  }
  
  input:where([type="checkbox"], [type="radio"]):where(:active:not(:disabled), :focus) {
    border-color: var(--primary);
    outline: none;
  }
  
  input:where([type="checkbox"], [type="radio"]):disabled {
    background: #eee;
  }
  
  /* A white tick on the brand fill. The mark is a background image rather
     than a pseudo-element because `appearance: none` inputs are replaced
     elements and so can't carry ::before/::after. */
  input[type="checkbox"]:checked {
    background-color: var(--primary);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='m5 13 4.5 4.5L19 7'/></svg>");
    background-size: 15px;
    background-position: center center;
    background-repeat: no-repeat;
    border: 1px solid var(--primary);
    outline: 1px solid var(--primary);
  }

  /* Ticked but locked — e.g. the strictly-necessary cookie category. The
     plain :disabled rule above loses to :checked, so state it here. */
  input[type="checkbox"]:checked:disabled {
    background-color: var(--midAccent);
    border-color: var(--midAccent);
    outline-color: var(--midAccent);
    cursor: not-allowed;
  }
  
  input[type="radio"]:checked {
    background: var(--primary);
    border: 4px solid #fff;
    outline: 1px solid var(--primary);
  
  }

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23431BB1'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
    background-size: 12px;
    background-position: calc(100% - 10px) 16px;
    background-repeat: no-repeat;
    background-color: #ffffff;
}

.table-wrap {
    width: 100%;
    max-width: 100%;
    align-self: stretch;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    table {
        min-width: 460px;
    }
}
.content-pic {
    margin: 10px 0px 30px;
}

.corner-rounded {
    border-radius: var(--corners);
}

ul.in-page-list {
    /* width: 100%; */
    border: 1px solid var(--primary);
    border-radius: var(--corners);
    padding: 20px 20px 20px 30px;
    box-shadow: var(--panelShadow);
    list-style-position: outside;
    position: sticky;
    top: 120px;
    z-index: 2;
    margin-top: 92px !important;

    > li {
        padding: 0px 0px 0px 6px;
        list-style-type: disc;
        margin-bottom: 10px !important;
        font-size: 1.1rem !important;
        line-height: 1.6rem !important;

        &:first-of-type {
            font-weight: 600;
            font-size: 1.6rem !important;
            line-height: 2rem !important;
            list-style-type: none;
            margin-left: -20px;
        }
    }
}


.container {
    max-width: var(--xl);
    /* border: 1px solid red; */
    margin: 0px auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* width: 100%; */
    /* padding: 0px 20px; */
    flex-direction: column;

    &.legaleaze {
        /* border: 1px solid red; */
        padding: 0px 20px 30px 20px;
    
        hr {
            margin: 20px 0px !important;
        }
    
        h2 {
            font-size: 1.6rem;
            line-height: 2rem;
            color: var(--bgDark);
            font-weight: 600;
            margin: 10px 0px 6px 0px;
        }
       p:has( + ol.simplelist) {
            margin: 4px 0px -10px 0px;
            border: 0px solid red;
        }
        
        ol.simplelist, ul.simplelist {
            margin: 0px 0px 20px 40px;
            li {
                font-size: 1rem;
                line-height: 1.6rem;
                color: var(--text);
                font-weight: 400;
            }
        }

        ul.simplelist {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0px;
            li {
                
                margin: 0px 0px 10px 0px;
                padding-left: 16px;
                font-size: 1rem;
                color: var(--text);
                font-weight: 400;
                line-height: 1.6rem;
                position: relative;
                text-transform: unset;
                display: inline-block;

                strong {
                    display: inline-block;
                    width: unset;
                }

                &:after {
                    content: none;
                    display: none;
                }

                &:before {
                    display: inline-block;
                    /* //content: '•'; */
                    color: var(--primary);
                    content: "•"; counter-increment: none; width: 10px; height: 10px;
                    left: -20px;
                    top: -3px;
                    font-size: 30px;
                    position: absolute;
                }

              
                  
                      
                    a:last-of-type{
                            opacity: 1;
                            cursor: pointer;
                            pointer-events: unset;
                    }
                 
            }
        
        }

    
        ol { counter-reset: item;
            padding: 20px 0px 0px 40px;
            margin: 0px 0px;
            width: 100%;
            /* border: 1px solid blue; */
            li { display: block;
                font-size: 1.6rem;
                line-height: 2rem;
                color: var(--bgDark);
                font-weight: 600;
                position: relative;
    
                &:before { 
                    content: counters(item, ".") "  "; 
                    counter-increment: item;
                    position: absolute;
                    left: -40px;
                }
    
                ol {
                    padding: 0px 0px 0px 0px;
                    margin: 16px 0px 32px 0px;
                
                  
    
                    li {
                        font-size: 1rem;
                        line-height: 1.6rem;
                        color: var(--text);
                        font-weight: 400;
                    }
    
                    ol {
                        margin: 2px 0px 14px;
                        padding: 0px 0px 0px 50px;
    
    
                        &.alpha-list {
                            list-style-type: lower-alpha;
                            padding: 0px 0px 0px 40px;
        
                            li {
                                &:before {
                                    content: counter(item, lower-alpha) ") ";
                                    position: absolute;
                                    left: -30px;
                                }
                            }
                        }
    
                        li {
                            font-size: 1rem;
                            color: var(--text);
                            font-weight: 400;
    
                            &:before { 
                                left: -50px;
                           }
                        }
                    }
                }
    
                ul {
                    padding: 0px 0px 0px 44px;
                    margin: 16px 0px 36px 0px;
                    li {
                        font-size: 1rem;
                        color: var(--text);
                        font-weight: 400;
                        line-height: 1.6rem;
    
                       &:before { 
                        content: "•"; counter-increment: none; width: 10px; height: 10px;
                        left: -30px;
                        }
                    }
                }
            }
        }



        table {
            /* border: 1px solid red; */
            margin-bottom: 40px;


            

            thead {
                tr {
                    th:nth-of-type(1) {
                    
                        width: 25%;
                    }
                }
            } 

            tbody {
                tr {
                    td:nth-of-type(1) {
                      
                        width: 25%;
                    }
                }
            }
        }
    }
    

    &.grid-layout {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 20px 20px;

        .card {
            aspect-ratio: 1/1;
        }
    }

    &.top-align {
        align-items: flex-start;
    }

    &.card-style {
        background-color: var(--white);
        border-radius: var(--corners);
        box-shadow: var(--panelShadow);
        padding: 30px 30px 40px;
        flex-wrap: wrap;
    }

}

.col {
    /* border: 1px solid red; */
    width: 100%;
}


/* header, header.site-header {
    background-color: var(--mainlywhite);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 2px solid var(--primary);
    font-family: var(--font-primary);
   
    align-items: center;
    position: sticky;
    z-index: 10;
    top: 0;

    padding: 0px 10px 0px 0px;

    .container {
        gap: 20px;
        height: 100%;
        min-height: 90px;
        position: relative;
        z-index: 10;
        flex-direction: row;
        align-items: center;
    }

    a {
        &.home-link {
            img {
                width: 100%;
                min-width: 60px;
                max-height: 46px;
                height: auto;
            }
        }
    }
} */
.container > ul.breadcrumb {
    /* background-color: var(--bgcolour); */
    font-family: var(--font-mainFont);
    font-size: 0.85rem;
    /* background-image: url('/assets/quotes-top.svg'); */
    display: flex;
    list-style-type: none;
    border-bottom: 0px solid grey;
    gap: 20px;
    margin: 0px 0px clamp(20px, 6vw, 40px) !important;
    padding: 0px 4px;

        li {
            border: 0px solid red;
            margin: 0px 0px;

            a {
                display: flex;
                padding: 20px 0px;
            }
        }

        &.reversed {
            li {
                 &:after {
                    background-image: url('/assets/Icons/right-caret-white.svg');
                }
                a {
                    color: var(--white);
                }
            }
            
        }
    }

    &.mark {
        .container {
            background-image: url('/assets/ecsendant-logo-icon-nav-pointone.svg');
            background-repeat: no-repeat;
            background-position: top -60px right 70px;
            background-size: 300px;
        }
    }




    .container {
        /* /assets/hero-bg.webp */
        align-items: flex-start;
        justify-content: space-between;
        flex-direction: column;

        hr {
            margin: 0px auto 0px;
            background-color: white;
            font-size: 1px;
            width: calc(100% - 20px);
            box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.25);
          }


        > ul {
            list-style-type: none;
            display: flex;
            align-items: center;
            gap: 16px;
            /* border: 1px solid red; */
            padding: 0px 16px;
            margin: 40px 0px 36px 0px;

            li {
                list-style-type: none;
                display: flex;
                align-items: center;
                text-transform: capitalize;


                &:after {
                    content: ' ';
                    width: 8px;
                    height: 16px;
                    display: inline-block;
                    /* border: 1px solid red; */
                    background-image: url('/assets/Icons/right-caret.svg');
                    background-size: contain;
                    background-repeat: no-repeat;
                    margin: 0px 0px 0px 16px;
                    padding: 0px;
                    opacity: 0.75
                }

                a {
                    /* border: 1px solid red; */
                    text-decoration: none;
                    color: var(--primary);

                    &:hover {
                        text-decoration: underline;
                    }

                    img {
                        width: 16px;
                        border: 0px solid red;
                        margin: 0px 6px 0px 0px;
                        padding: 0px 0px 0px 0px;
                    }
                }

                &:last-of-type {
                    &::after {
                        display: none;
                    }

                    a {
                        opacity: 0.5;
                        pointer-events: none;
                        cursor: default;
                    }
                }
            }

          
        }
    }



.wp-site-blocks {
    width: 100%;
}

/* .hero {
    display: inline-flex;
    width: 100%;
    min-height: unset;
    height: unset;

    max-width: unset !important;
    margin: unset !important;
    border: 0px solid red;
    align-items: flex-start;
    position: relative;
    flex-direction: column;
  

    img.hero-image {
        position: relative;
        top: 0px;
        max-width: 525px;
        width: 100%;
        right: 0%;
        margin: 0px auto;
    }

    h1 {
        margin: 40px 0px 20px;
        width: 100%;
        text-align: center;
        font-size: clamp(2.2rem, 10vw, 3.3rem);
        line-height: clamp(2.6rem, 12vw, 3.6rem);
    }

    p {
        width: 100%; 
        
    }


    .container {
        flex-direction: column;
        justify-content: flex-start;

    }

    .text-frame {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    h1 {
 
        font-weight: 600;
        color: var(--headtext);
        width: 100%;
       

        > span {
            font-weight: 500;
        }
    }

    p {
        color: var(--text);
    }

    h1 > span {
        color: var(--secondary);
    }

    .split-holder {
        align-items: flex-start;

        .button-secondary {
            padding-left: 4px;
        }
    }

    .hero-image {
        width: 90%;
        margin: 10px;
    }


} */
#use-cases {
    /* border: 1px solid red; */
}

.features {
    .container {
        background-color: var(--white);
        border-radius: var(--corners);
        display: flex;
        flex-direction: column;
        box-shadow: var(--panelShadow);
        padding-top: 20px;

        .header {
            padding-top: 16px;
            h2, p {
                text-align: center;
            }

            h2 {
                font-size: 2.8rem;
                line-height: 2.9rem;
                margin-bottom: 20px;

            }

            p {
                margin: 0px auto 20px;
                text-wrap: balance;
               
            }
        }
    }

    section {
        width: 100%;

            

            a.circle-button {
                display: none;
            }

        > nav {
            display: flex;
            gap: 10px 6px;
            font-family: var(--font-mainFont);
            /* border-bottom: 2px solid #CDCDD2; */
            /* padding: 0px 36px; */
            padding: 20px 0px 30px;
            margin: 40px 0px 0px;
            position: sticky;
            top: 92px;
            flex-direction: row;
            flex-wrap: wrap;
            /* background-color: var(--white); */
            z-index: 3;
            background-image: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 88%, rgba(255,255,255,0) 100%);



            a {
                /* width: calc(100%); */
                border: 1px solid #CDCDD2;
                /* border-bottom: 0px; */
                text-align: center;
                /* border-radius: 28px 28px 0px 0px; */
                border-radius: 12px;
                font-size: 1rem;
                font-weight: 600;
                color: var(--text);
                text-decoration: none;
                padding: 6px 10px;
                background-color: #E1E9F4;

                &[aria-selected="true"] {
                  background-color: var(--white);
                  /* border-bottom: 2px solid var(--white); */
                  margin-bottom: 0px;
                }

            }

            /* &:before {
                content: ' ';
                width: 40px;
                height: 50px;
                position: absolute;
                left: 0px;
                background: rgb(255,255,255);
                background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
            }

            &:after {
                content: ' ';
                width: 40px;
                height: 50px;
                position: absolute;
                right: 0px;
                background: rgb(255,255,255);
                background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
            } */
        }

        > article {
            /* padding: 20px 36px 20px; */
            padding: 20px 10px 20px;
          
            display: none;
            visibility: visible;
            flex-direction: column;

            .main {
                width: 100%;
                padding: 0px 0px 30px;

                h3 {
                    font-size: 2rem;
                    font-weight: 600;
                    line-height: 2.2rem;
                    position: relative;
                    padding-left: 80px;
                    margin: 16px 0px;

                    img {
                        position: absolute;
                        width: 64px;
                        height: auto;
                        left: 0px;
                    }

                    span {
                        font-size: 1.6rem;
                        line-height: 1.7rem;
                    }
                }

                h4.drop-bottom {
                    /* margin-bottom: -30px; */
                    margin-bottom: 0px;
                }

                img {
                    width: 100%;
                    height: auto;
                    margin-bottom: 20px;

                    &.rounded {
                        border-radius: var(--corners);
                    }

                    &.float-right {
                        /* max-width: 300px; */
                        height: auto;
                        float: right;
                        margin: 10px 0px 10px 0px;
                    }
                }

                .button-primary, .button-secondary {
                    font-weight: 500;
                    font-size: 0.95rem;

                    &:disabled {
                        opacity: 0.5;
                    }
                }

            }

            video {
                width: 100%;
                height: auto;
                margin-top: 12px;
            }

            &[aria-hidden="true"] {
                display: none;
                visibility: hidden;
            }

            &.active {
                display: flex;
            }
        }
    }
}




.card {
    background-color: var(--white);
    border-radius: var(--corners);
    box-shadow: var(--panelShadow);
    padding: 30px 30px 40px;
    display: flex;
        flex-direction: column;
        align-items: flex-start;
        /* width: 90%; */

    > h3 {
        margin: 4px 0px 16px;
        font-size: 2rem;
    }

    ul {
        margin: 0px 0px 20px 0px;

        li {
            font-size: 0.9rem;
            color: var(--text);
            margin: 0px 0px 4px 0px;
        }
    }



    a.button-primary, a.button-tertiary {
        margin: auto 0px 16px 0px;
    }

    a.button-secondary {
        padding-left: 0px;
        margin-bottom: 20px;
    }

    &.two-thirds {
       /* width: 90%; */
       width: unset;
    }

    &.usecases {
        /* background-image:url('/assets/photo-layers.png'); */
        background-repeat: no-repeat;
        background-position: bottom right -150px;
        background-size: cover;

        /* padding-right: 30%; */
        /* min-height: 300px; */

        /* p {
            width: 65%;
        } */

    }

    &.security {
        /* background-image:url('/assets/lock-icon.svg'); */
        background-repeat: no-repeat;
        background-position: bottom -20px right -20px;
        background-size: 300px;
        /* aspect-ratio: 1/1; */
        /* width: 100%; */

        /* p {
            width: 70%;
        } */

    }

    &.future {
        /* background-image:url('/assets/signpost-layers.png'); */
        background-repeat: no-repeat;
        background-position: bottom -200px right -160px;
        background-size: 1100px;
        /* aspect-ratio: 1/1; */
        /* width: 100%; */
    }
}

.other-pages {
    width: 100%;
    border: 0px solid red;
    margin: 50px 0px 70px;

    &.head {
        margin: 0px 0px 10px;
        h3 {
            /* border: 1px solid red; */
            font-size: 2rem;
            /* text-align: center; */
            margin: 0px 0px 20px;
        }
    }

    &.main {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 20px;
        margin: 0px;

        a {
            width: calc(33%);
            aspect-ratio: 16/9;

            .card {
                aspect-ratio: 16/9;
            }
        }
    }


}

.blog-width {
    blockquote {
    float: left;
    color: var(--text);
    /* margin-block-start: 10em;
    margin-block-end: 10em; */
    height: auto;
    width: 36%;
    display: flex;
    margin: 0px 20px 20px 0px !important;
        > p {
        font-size: 1.55rem;
        line-height: 2.2rem;
        font-family: var(--font-mainFont);
        font-weight: 600;
        font-style: italic;
        margin: 0px 0px 0px 0px;
        color: var(--primary);
        }
    }
}

.quotes {
    /* width: 35%; */
    padding: 0px;
    display: flex;
    blockquote {

        position: relative;
        /* padding: 20px 30px; */
        z-index: 2;
        margin-block-start: 2em;
        margin-block-end: 1em;
        /* margin-inline-start: 100px;
        margin-inline-end: 100px; */
        height: auto;
        width: 90%;
        max-height: 360px;
        animation: fade-in-out 10s ease-in-out;
        display: none;
        font-family: var(--font-subFont);

        > div {
            font-weight: 700;
            font-style: normal;
            cite {
                font-weight: 400;
                font-style: italic;

            }
        }
      

        > p {
            color: var(--text);
            font-size: 1.7rem;
            line-height: 2.1rem;
            font-family: var(--font-mainFont);
            font-weight: 600;
            font-style: italic;
        }

        &.fade-in-out {
            display: inline-block;
        }


        &:before, &:after {
            position: absolute;
            content: ' ';
            display: block;
            width: 90px;
            height: 80px;
            background-size: contain;
            background-repeat: no-repeat;
            z-index: -1;

        }
        &:before {
            background-image: url('/assets/quotes-top.svg');
            top: -3rem;
            left: -30px;
        }

        &:after {
            background-image: url('/assets/quotes.svg');
            bottom: -3rem;
            left: calc(100% - 40px);
        }

        > div {
            margin-top: 10px;
            font-size: 1rem;
            text-align: right;
            cite {

            }
        }
    }

    & > footer {
        background-color: unset;
    }

}

.signup {
    .container {
    padding: 90px 0px 100px;
    display: flex;
    flex-direction: column;
    gap: 20px;

    h3 {
        font-size: 3rem;
        font-weight: 600;
        margin: 0px;
        text-align: center;
    }

    p {
        text-align: center;
        text-wrap: balance;
        width: 99%;
    }
    }
}

.alert {
    background-color: var(--alertz);
    margin-bottom: 0px;
    text-align: center;


    .container {
        justify-content: center;
        min-height: 63px;
        padding: 4px 20px;
    }

    figcaption {
        text-align: center;
        color: var(--text);
        font-size: 1rem;
        font-family: var(--font-mainFont);
        a {
            color: var(--primary);
            font-weight: 600;
        }
    }
}

main {
background: var(--bgcolour);
/* background: linear-gradient(180deg, rgba(219,211,240,1) 0%, rgba(219,211,240,1) 3354px, rgba(237,237,237,1) 3354px, rgba(237,237,237,1) 100%); */
}
footer {
    /* background-color: var(--primary); */
    /* background: var(--gradCosmos);
    
    /* -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
    background-blend-mode: var(--blendMode);
    background-image: url('/assets/ecsendant-logo-icon-green.svg');
    background-repeat: no-repeat;
    background-position: bottom -100px right -100px; 
    background-size: 400px;
    background-color: var(--bgDark);
    min-height: 100px;
    padding: 50px 20px;
    width: 100%;
    /* position: fixed;
    bottom:0%; */

    .legal-list {
        margin-top: 4px !important; 
    }

    &.sticky-bottom {
        position: absolute;
        bottom: 0px;
    }

    a:focus-visible {
        outline-offset: 6px;
        outline: 3px dotted var(--white);
    }

    p {
        color: var(--white);
    }

    .container {
        gap: 20px;
        flex-wrap: wrap;
        align-items: flex-start;
        flex-direction: column;


        hr {
            width: 100%;
            margin-left: unset;
            border: 1px solid;
        }

         &:last-of-type {
           

            display: flex;
            align-items: center;
            justify-content: space-between;
            align-items: flex-start;
            flex-direction: column-reverse;

            p {font-size: 14.4px;}

            > ul {
                display: flex;
                padding: 0px 0px 0px 0px;
                margin: 10px 0px 0px 0px;
                gap: 10px 30px;
                flex-wrap: wrap;
                

                li {
                    padding: 0px 0px 0px 0px;
                    margin: 0px 0px 0px 0px;
                    text-transform: unset;
                    font-size: 14.4px;
                     
                    &:after {
                        display: none;
                    }

                    a {
                        padding: 0px 0px 0px 0px;
                        margin: 0px 0px 0px 0px;
                        color: var(--mostlywhite);
                        
                    }

                    &:last-of-type {
                        padding: 0px 0px 0px 0px;
                        margin: 0px 0px 0px 0px; 
                      

                        a {
                             opacity: 1;
                             cursor: pointer;
                             pointer-events: unset;
                        }
                    }
                }
            }
        }


        &:nth-of-type(2) {
            margin-top: 30px;
            /* border-top: 1px solid var(--white); */
            padding-top: 10px;
        }

        .col {


            ul {
                margin: 0px 0px 10px 0px;
                padding: 0px 0px;
                list-style-type: none;
                font-size: 0.9rem;
                /* font-size: 1.23rem;
                line-height: 1.5rem; */

                &.social-links {
                    display: flex;
                    gap: 26px;
                    margin: 0px 0px 0px 0px;
                }

                li {
                    margin-bottom: 2px;
                    color: var(--white);
                    a {
                        color: var(--white);
                        text-decoration: none;
                    }

                    ul {
                        margin: 6px 0px 10px 10px;
                        /* font-size: 1.05rem; */
                    }
                }
            }
        }
    }

    a {
        &.home-link {
            color: var(--white);

            img {
                /* min-width: 300px; */
                width: 80%;
                height: auto;
            }
        }
    }
}

/* Site footer - light layout (footer-alt.njk).
   Overrides the dark `footer` rules above via the .footer-alt class. */
footer.footer-alt {
  /* reset the site's default dark footer */
  background-color: #fff;
  background-image: none;
  background-blend-mode: normal;
  border-top: 1px solid #e0e0e0;
  min-height: 0;
  padding: 0;
  width: 100%;
  margin-top: auto;
}

footer.footer-alt.sticky-bottom {
  position: static;
}

.footer-alt .footer-alt__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 1rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

.footer-alt a:focus-visible {
  outline: 3px dotted #2b6d7d;
  outline-offset: 6px;
}

.footer-alt__brand {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  order: 1;
  padding-top: 42px;
}

.footer-alt__logo {
  width: auto;
  height: 54px;
  display: block;
}

.footer-alt .footer-alt__copy {
  color: #666;
  font-size: 0.875rem;
  margin: 0;
}

.footer-alt__column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-alt__heading {
  font-family: var(--font-mainFont);
  font-weight: 500;
  font-size: 1.125rem;
  color: #2b6d7d;
  text-decoration: none;
}

.footer-alt__links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-alt__links li {
  margin: 0;
}

.footer-alt__links li:after {
  display: none;
}

.footer-alt__link {
  color: #5a6b78;
  font-size: 1rem;
  text-decoration: none;
  transition: color 0.75s ease-in-out;
}

.footer-alt__link:hover {
  color: #2b6d7d;
}

.footer-alt__download {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  justify-content: space-between;
   display: none;
}

.footer-alt__qr {
  width: 140px;
  height: auto;
  aspect-ratio: 1 / 1;
}

.footer-alt .footer-alt__scan {
  color: #5b7c8a;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}

.footer-alt__badge {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-decoration: none;
}

.footer-alt__badge img {
  height: 48px;
  width: auto;
}

.footer-alt__social {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
   display: none;
}

.footer-alt__social li {
  margin: 0;
}

.footer-alt__social li:after {
  display: none;
}

.footer-alt__social a {
  display: block;
}

.footer-alt__social img {
  width: 24px;
  height: 24px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .footer-alt .footer-alt__inner {
    grid-template-columns: 1.6fr 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 4rem;
    padding: 4rem 2rem 1rem;
  }

  .footer-alt__brand {
    grid-column: 1;
    grid-row: 1 / 4;
    justify-content: space-between;
    order: unset;
    padding-top: 0;
  }

  .footer-alt__column {
    grid-row: 1;
  }

  .footer-alt__download {
    grid-column: 2 / 4;
    grid-row: 2;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 3rem;
    text-align: left;
  }

  .footer-alt .footer-alt__scan {
    text-align: left;
  }

  .footer-alt__social {
    grid-column: 2 / 4;
    grid-row: 3;
    justify-self: start;
    align-self: end;
  }
}

@media (min-width: 1024px) {
  .footer-alt .footer-alt__inner {
    grid-template-columns: 1.6fr 1fr 1fr auto;
    grid-template-rows: 1fr 0.3fr;
    gap: 1.5rem 4rem;
    padding: 4rem 2rem 1rem;
  }

  .footer-alt__brand {
    grid-column: 1;
    grid-row: 1 / 3;
    justify-content: space-between;
    order: unset;
    padding-top: 0;
  }

  .footer-alt__column {
    grid-row: 1;
    grid-column: 3;

    &:nth-of-type(2) {
      grid-column: 4;
    }
  }

  .footer-alt__download {
    grid-column: 4;
    grid-row: 1 / 3;
    align-items: flex-end;
    text-align: right;
    display: none;
  }

  .footer-alt .footer-alt__scan {
    text-align: center;
  }

  .footer-alt__social {
    grid-column: 2 / 4;
    grid-row: 2;
    align-self: end;
    display: none;
  }
}

a.anchor {
    scroll-margin-top: 130px;
}

a.home-link {
    /* border: 1px solid red; */
    display: inline-flex;
    margin-right:auto;
}

.underlay {
    width: 0%;
    height: 0vh;
    background-color: var(--primary-dark);
    /* display: none; */
    visibility: hidden;
    /* display: inline-flex; */
    position: relative;
    opacity: 0;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: opacity .4s ease-in-out;

    &.show-underlay {
       display: inline-flex;
        position: fixed;
        z-index: 3;
        visibility: visible;
        /* top:0;  */
        opacity: 1;
        left:0;
        width: 100%;
        height: 100vh;
    }
}

.nav-toggle {
    display: flex;
    color: var(--primary);
    /* font-size: 60px; */
    position: relative;
    width: 40px;
    height: 40px;
    border: 0px;
    background-color: unset;
    /* border: 1px solid red; */

    span.toggle-cell {
        width: 40px;
        height: 4px;
        background-color: var(--primary);
        position: absolute;
        top: 18px;
        left: 0px;
        bottom: 0px;
        right: 0px;
        border-radius: 2px;
        opacity: 1;
        transition: all .4s ease-in-out;

        &.close-icon {
            top: 0px;
            opacity: 0;
        }
    }

    &:after, &:before {
        position: absolute;
        content: ' ';
        width: 40px;
        height: 4px;
        background-color: var(--primary);
        border-radius: 2px;
        transform: rotate( 0deg );
        transition: all .4s ease-in-out;
    }

    &:before {
        top: 7px;
        left: 0px;
        transition: all .4s ease-in-out;
    }

    &:after {
        bottom: 7px;
        left: 0px;
        transition: all .4s ease-in-out;
    }
}

.nav-toggle:has(> span.close-icon) {

    &:before {
        transform: rotate( 45deg );
        transition: all .4s ease-in-out;
        transform-origin: center;
        top: 18px;
    }

    &:after {
        transform: rotate( -45deg );
        transition: all .4s ease-in-out;
        transform-origin: center;
        bottom: 18px;
    }

}

nav.main-nav {
    /* border: 1px solid red; */

    ul {
        margin: 0px;
        padding: 0px;
        /* border: 1px solid blue; */
        font-family: var(--font-mainFont);
        font-weight: 600;
        font-size: 1.15rem;
        letter-spacing: var(--oneSpace);
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        list-style-type: none;

        li {
            position: relative;
            margin-bottom: 0px;

            button {
               
                background-color: unset;
                display: none;
                cursor: pointer;
                
            }

           /* height: 90px; */

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

                &.top-level-nav {
                    display: none;
                }

                &.button-primary {
                    color: var(--white);
                }

              


            }




        }

        li:has(> button.active-nav) {
            &:before {
                content: ' ';
                width: 100%;
                height: 5px;
                background-color: var(--headtext);
                display: inline-block;
                position: absolute;
                top: -20px;
            }
        }

        li:has(> a:hover) {
            &:before {
                content: ' ';
                width: 100%;
                height: 5px;
                background-color: var(--headtext);
                display: inline-block;
                position: absolute;
                top: -30px;
            }
        }


    }
}



.mobile-toggle {
    border: 0px;
}
nav.mobile-nav {
    width: 80%;
    height: 100vh;
    background-color: var(--white);
    position: fixed;
    z-index: 20;
    /* left: 0px; */
    left: -100%;
   /* //display: none; */
    display: inline-block;
    padding: 20px;
    font-family: var(--font-mainFont);
    font-weight: 600;
    font-size: 1.2rem;
    transition: left .4s ease-in-out;


    ul {
        padding: 0;
        margin: 0;
        height: 68%;
        height: calc(100dvh - 200px);
        /* width: 80%; */
        overflow: hidden;
        overflow-y: scroll;
        margin-bottom: 10px;

       li {
        width: 100%;
        border-bottom: 1px solid grey;

        a {
            color: var(--text);
            text-decoration: none;
            /* width: 100%; */
            display: flex;
            justify-content: space-between;
            min-height: 60px;
            align-items: center;


            img {
                transform: rotate(180deg);
                transition: transform .4s ease-in-out;
            }

             &.active-nav {

                img {
                    transform: rotate(0deg);
                    transition: transform .4s ease-in-out;
                }
            }
        }

        &:last-of-type {
            border-bottom: 0px;
        }

        ul {
            height: unset;
            font-size: 1rem;
            display: none;
            margin: -10px 0px 0px 0px;

            &.show-mob-subnav {
                display: block;
            }


            li {
                padding-left: 20px;

                ul {
                    height: unset;
                    font-weight: 400;
                    display: block;
                    margin-bottom: 10px;

                    li {
                        padding-left: 20px;
                        border-bottom: 0px;

                        a{
                            min-height: 40px;
                        }
                    }
                }
            }
        }
        }
    }

   &.show-mob-nav {
    display: inline-block;
    left: 0px;
   }

   a.button-primary {
    width: calc(80% - 6px);
    text-align: center;
    align-items: center;
    justify-content: center;
   }
}

nav.sub-nav {
    position: absolute;
    /* top: -500px; */
    top: 0px;
    visibility: hidden;
    opacity: 0;
    background-color: var(--mostlywhite);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: none;
    width: 600px;
    left: 0px;
    top: 80px;
    padding: 0px 0px 0px;
    font-family: var(--font-mainFont);
    font-weight: 600;
    font-size: 0rem;
    letter-spacing: var(--oneSpace);
    z-index: 5;
    /* border: 1px solid var(--primary); */
    border-radius: 20px;


    .container {
        padding: 0px 20px;
        ul {
            width: 0px;
        }
    }


}
ul.dot-nav {

    margin: 0px auto 40px;
    display: flex;
    gap: 10px;
    list-style-type: none;
    padding: 0px 0px;
    li {
        /* width: 12px;
        height: 12px; */
        /* border: 1px solid red; */
        /* display: flex; */
        button.dot {
            width: 14px;
            height: 14px;
            border: 0px solid red;
            background-color: var(--primary);
            border-radius: 7px;
            transition: width .4s ease-in-out;
            cursor: pointer;
            font-size: 0px;
            /* animation: width duration timing-function delay iteration-count direction fill-mode; */
            &.active {
                width: 28px;
            }

        }
    }
}

.blog-carousel {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 30px;
    position: relative;


    h2 {
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: 0px;
    }
    a.circle-button {
        background-color: rgba(255,255,255,0.5);
        border-radius: 50%;
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        aspect-ratio: 1/1;
        position: absolute;
        top: 50%;
        bottom: 50%;
        z-index: 2;
        box-shadow: var(--panelShadow);

        > img {
            width: 10px;
            height: auto;
            max-width: unset;
            margin: 0px -20px 0px -20px;
            border: 0px solid red;
            pointer-events: none;
        }

        &.sit-left {
            left: calc(0% + 42px);
        }

        &.sit-right {
            right: calc(0% + 42px);
        }
    }

    .button-secondary {
        padding-left: 0px;
    }
    > .container {
        overflow: hidden;
        width: 90%;
        overflow-x: scroll;



    }
    .card-frame {
        display: flex;
        gap: 20px;
        /* flex-direction: column; */
        /* width: 900px; */
        .blog-card {
            background-color: var(--white);
            border-radius: var(--corners);
            box-shadow: var(--panelShadow);
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            padding-bottom: 12px;
            font-family: var(--font-mainFont);
            /* width: 25%; */
            width: 100%;

            img {
                border-radius: var(--corners) var(--corners) 0px 0px;
                width: 100%;
                height: auto;
                box-shadow: unset;
            }

            .blog-card-body, .blog-card-footer {
                padding: 10px 20px;

            }

            .blog-card-body {
                display: flex;
                margin: 10px 0px auto;


                h4 {
                    margin: 0px 0px 10px;
                    line-height: 1.6rem;
                    font-size: 1.3rem;
                }

                p {
                    font-size: 0.8rem;
                    line-height: 1.2rem;
                }
                a {
                    text-decoration: none;
                }
            }

            .blog-card-footer {
                p {
                    font-size: 0.76rem;
                }

            }
        }
    }
}

.popout {
    padding: 10px;
    background-color: var(--white);
    border-radius: 20px;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    position: absolute;
    z-index: 4;
    width: 300px;
}
.scroll-demo {
    /* border: 1px solid red; */
    width: 500px;
    height: 500px;
    /* position: relative; */
    position: fixed;
    top: 200px;

    img {
        width: 500px;
        height: 500px;

        &.scroll-full {
            position: absolute;
            z-index: 2;
            opacity: 0;
        }
    }
}



/* iPad */
@media (min-width: 768px) {
    .container {
        padding: 0px 20px;

        &.legaleaze {
            padding: 0px clamp(20px, 6vw, 160px) 64px;
            align-items: flex-start;

            ol { 
                li { 

                    ol {
                        padding: 0px 0px 0px 44px;
                    }
                }
            }
        }
    }

    .mobile-only {
        display: none;
    }

    .desktop-only {
        display: inline-block;
    }


}
@keyframes myAnim {
    0% {
        opacity: 0;
        top: 300px;
        width: 500px;
    }

   30% {
        opacity: 1;
        top: 230px;
        width: 560px;
    }

    80% {
        opacity: 1;
        top: 230px;
        width: 560px;
    }

    100% {
        opacity: 0;
        top: 100px;
        width: 600px;
    }
}

@keyframes fade-in-out {
    0% {
        opacity: 0;
    }

   20% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* Small desktop */
@media (min-width: 992px) {
    img {
        &.roundal {
            float: right;
        }
    }

  


    .section.container {
        padding: 0px 20px; 
        flex-direction: column;
        align-items: flex-start;

        &.mason{
        h1 {
            width: 100%;
        }

        section.blocks {
            margin-bottom: 60px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        }
    }

    /* .hero {
        display: inline-flex;
        width: 100%;
        min-height: unset;
     
        max-width: unset !important;
        margin: unset !important;
        border: 0px solid red;
        align-items: flex-start;
        position: relative;
      
    
        img.hero-image {
            position: absolute;
    
          
            top: 40px;
           
            right: -3%;
        }
    
    
    
        .container {
            flex-direction: column;
            justify-content: flex-start;
    
        }
    
        .text-frame {
            width: 100%;
            display: flex;
            flex-direction: column;
        }
    
        h1 {
        
            font-weight: 600;
            color: var(--headtext);
            width: 75%;
            text-align: center;
    
            > span {
                font-weight: 500;
            }
        }
    
        p {
            color: var(--text);
            width: 65%;
        }
    
        h1 > span {
            color: var(--secondary);
        }
    
        .split-holder {
            align-items: flex-start;
    
            .button-secondary {
                padding-left: 4px;
            }
        }
    
        .hero-image {
            width: 90%;
            margin: 10px;
            right: 0%;
        }
    
    
    } */
    form {
        display: flex;
        flex-direction: column;
        gap: 20px;
        border: 0px solid red;
        width: 100%;
    
        &.contact-form, &.signup-form {
           
            margin: 50px 0px;
            
            fieldset {
                display: flex;
                flex-direction: column;
                width: 100%;
                padding: 0px 0px;
                border: 0px;
                gap: 16px;

                &.radios {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                }
    
                &.double-input {
                    flex-direction: row;
    
                    & > div{
                        width: 100%;
                        
    
                        input {
                            width: 100%;
                        }
                    }
                }
            }
    
            textarea {
                height: 180px;
            }
        }
    
        &.signup-form {
            align-items: center;
            justify-content: center;
    
            & > div {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                /* border: 1px solid red; */
                justify-content: center;
                align-items: flex-end;
                gap: 20px;
                width: 100%;
                /* display: unset; */
            
    
                fieldset {
                    width: 20%;
                    border: 0px solid blue;
                }
            }
    
            /* .button-primary {
                height: 40px;
                line-height: 0px;
                padding: 0px 0px;
    
            } */
        }
       
    }

    .main-panel { 
        gap: 10px;
        padding: 10px;
        margin: 20px 0px;
    }

    
    
    section.main-panel {
        /* flex-direction: row;
        align-items: center; */
        /* gap: 30px; */
    
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(1, 1fr);
        grid-column-gap: 30px;
        padding: 40px;
        align-items: center;
    
        /* & > .head,  & > .main {
            margin: 0px 0px 0px 20px;
        } */
    
        & > .main {
            grid-column: span 2 / span 2;
           /* h2 {
                margin-bottom: 0px;
            } */
            h3 {
                margin-bottom: 20px;
            }
        }
    
        &.screen-section {
            display: grid;
            /* flex-direction: row-reverse;
           
            align-items: flex-end; */
            /* margin-bottom: 0px; */
    
            /* display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(1, 1fr);
            gap: 0px;
            padding-bottom: 0px; */
            padding-bottom: 0px;
    
            & > .main {
                margin-bottom: 30px;
                height: 100%;
                
                display: flex;
                flex-direction: column;
                justify-content: center;

                h2 {
                    width: 100%;
                    text-wrap: balance;
                }
            }
    
            img {
                max-width: 540px;
                /* box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);      */
                /* -webkit-filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.25));
                filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.25));  */
                /* width: 1100px;   */
                /*  */
                /* width: 100%;
                height: 100%; */
                width: 540px;
                aspect-ratio: 590 / 440;
                object-fit: cover;  
                vertical-align: middle;
                object-position:0px 0%;  
                margin-bottom: 0px;
                overflow-clip-margin: content-box;
                overflow: clip;
             }
        }
    }





    a.long-card-link {
        padding: 10px 10px 10px 16px;
        background-position: right 16px center;
        gap: 20px;

        img {
            max-width: 24px;
        }

        &:hover, &:focus {
            background-position: right 26px center;
        }
    
    }

    video {
        &.guide-vid {
            float: inline-end;
            margin: 30px 0px 16px 40px;
        }
    }

    .support-post {
        .markdown {
            margin: 0px auto;
            background-color: var(--white);
            padding: 20px 25% 30px 30px;

            img {
                float: inline-end;
                margin: 0px 0px 16px 40px;
            }
        }

         
    }
    .nav-toggle {
        display: none;
    }

    .width-3-5 {
        width: calc(66% - 10px);
    }

    .width-4-5 {
        width: calc(80% - 10px);
    }

    .width-2-5 {
        width: calc(34% - 30px);
    }


    main {
        background: rgb(219,211,240);
        background-color: var(--bgcolour);
        /* background: linear-gradient(180deg, var(--bgcolour)0%, var(--bgcolour) 3932px, rgba(213, 213, 213, 1) 3932px, rgba(213, 213, 213, 1) 100%); */
        /* background-image: url('/assets/hero-bg.webp');
        background-repeat: no-repeat;
        background-size: 110%;
        background-position: 0px 0%; */

        }

    .quotes {
        width: 35%;
    }

    .blog-carousel {

        gap: 30px;
        margin-top: 110px;
        /* background-color: var(--bgcolour); */

       background: linear-gradient(180deg, var(--bgcolour)0%, var(--bgcolour) 292px, rgb(173, 173, 173) 100px, rgba(224, 224, 224, 1) 100%);
        /* background-image: url('/assets/hero-bg.webp');
        background-repeat: no-repeat;
        background-size: 110%;
        background-position: 0px 0%; */



        h2 {
        font-size: 3rem;
        font-weight: 600;
        margin-bottom: 0px;
        }

        .row-frame {
            display: flex;
            flex-direction: row;
            justify-content: space-between;

            p {
                width: 66%;
            }
        }

        .button-secondary {
            padding-left: 0px;
        }

        > .container {
            overflow: unset;
            width: 100%;
            overflow-x: unset;

            &.scroll {
                /* overflow-x: scroll; */
                /* border: 1px solid red; */
                /* width: calc(100% - 30px); */

                /* touch-action: pan-y;
                cursor: grabbing;
                cursor: -webkit-grabbing; */
                grid-area: main;
                padding: 0;
                overflow-x: hidden;
                overflow-y: hidden;


                .card-frame {
                    /* border: 1px solid red;
                    display: flex;
                    gap: 22px;
                    flex-direction: row;
                    -webkit-overflow-scrolling: touch;
                    overflow-scrolling: auto;
                    padding-bottom: 100px; */
                    position: relative;
                    width: 100%;
                    overflow-x: scroll;
                    overflow-y: hidden;
                    /* white-space: nowrap; */
                    /* transition: all 0.2s; */
                    /* transform: scale(0.98); */
                    /* will-change: transform; */
                    user-select: none;
                    /* cursor: pointer; */
                    scroll-snap-type: x mandatory;
                    padding: 0px 10px 20px;

                    &::-webkit-scrollbar {
                        display: none;
                      }

                    &.slides {
                        cursor: grabbing;
                        cursor: -webkit-grabbing;
                        /* transform: scale(1); */

                    }

                    .blog-card {
                        background-color: var(--white);
                        border-radius: var(--corners);
                        box-shadow: var(--panelShadow);
                        display: flex;
                        flex-direction: column;
                        flex-wrap: nowrap;
                        padding-bottom: 12px;
                        font-family: var(--font-mainFont);
                        /* width: 25%; */
                        /* width: 275px; */
                        scroll-snap-align: start;
                        min-height: 250px;
                        min-width: 24%;
                        /* margin: 2em 1em; */


                        img {
                            border-radius: var(--corners) var(--corners) 0px 0px;
                            width: 100%;
                            height: auto;
                            /* border: 1px solid red; */
                            aspect-ratio: 16/8;
                            object-fit: cover;
                        }

                        .blog-card-body, .blog-card-footer {
                            padding: 10px 20px;

                        }

                        .blog-card-body {
                            display: flex;
                            margin: 10px 0px auto;
                            flex-direction: column;


                            h4 {
                                margin: 0px 0px 10px;
                                line-height: 1.6rem;
                            }
                            a {
                                text-decoration: none;
                            }
                        }

                        .blog-card-footer {
                            p {
                                font-size: 0.76rem;
                            }

                        }
                    }
                }
            }

        }


    }

    .container {
        max-width: var(--xl);
        /* border: 1px solid red; */
        margin: 0px auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        /* width: 100%; */
        padding: 0px 20px;
        /* flex-direction: row; */

        &.top-align {
            align-items: flex-start;
        }

    }

    .card {
        background-color: var(--white);
        border-radius: var(--corners);
        box-shadow: var(--panelShadow);
        padding: 30px 30px 40px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: unset;
        transition: all .4s ease-in-out;

        &.full-width-card {
            width: 100%;
        }

        &.flex-row {
            flex-direction: row;
            align-items: stretch;
            gap: 30px;
        }

       > h3 {
            margin-top: 0px;
            font-size: 2rem;
        }

        ul {
            margin: 0px 0px 20px 0px;

            li {
                font-size: 0.9rem;
                color: var(--text);
                margin: 0px 0px 4px 0px;
            }
        }



        a.button-primary, a.button-tertiary {
            margin: auto 0px 16px 0px;
        }

        a.button-secondary {
            padding-left: 0px;
        }

        &.two-thirds {
            width: 60%;
        }

        &.usecases {
            background-image:url('/assets/photo-layers.png');
            background-repeat: no-repeat;
            background-position: bottom right -150px;
            background-size: 1180px;

            /* padding-right: 30%; */
            min-height: 300px;


            p {
                width: 60%;

                &:nth-of-type(2) {
                    width: 45%;
                }
            }

            &:hover {
                background-size: 1210px;
            }

        }

        &.security {
            background-image:url('/assets/lock-icon.svg');
            background-repeat: no-repeat;
            background-position: bottom -20px right -20px;
            background-size: 300px;
            aspect-ratio: 1/1;
            width: 50%;

            > p {
                width: 85%;

                /* &:nth-of-type(2) {
                    width: 50%;
                } */
            }

            &:hover {
                background-size: 310px;
            }

        }

        &.future {
            background-image:url('/assets/signpost-layers.png');
            background-repeat: no-repeat;
            background-position: bottom -200px right -160px;
            background-size: 1100px;
            aspect-ratio: 1/1;
            width: 50%;

            &:hover {
                background-size: 1117px;
            }

            > p {
                width: 80%;
            }
        }
    }

    .split-holder {
        flex-direction: row;
        justify-content: space-between;
        margin-top: 50px;
        gap: unset;
    }

    

    .container {
        width: 100%;
    }

    .col {
        /* border: 1px solid red; */
        width: calc(20% - 20px);

        &.two-col {
            width: calc(40% - 20px);
        }
    }

    /* nav.mobile-nav {
        width: 0%;
        height: 0%;
        left: 0px;
        display: none;
        }

       &.show-mob-nav {
        display: none;
       }
    } */

    nav.main-nav {
        /* border: 1px solid red; */


        ul {
            margin: 0px;
            padding: 0px;
            /* border: 1px solid blue; */
            font-family: var(--font-mainFont);
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 32px;
            list-style-type: none;

            li {
                button {
                    border: 0px solid red;
                    background-color: none;
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    padding: 10px 0px;
                }
                a, button {
                        color: var(--text);
                        text-decoration: none;
                        display: inline-block;
                        

                        &.button-primary {
                            color: var(--white);
                            /* margin-right: -32px; */
                        }

                        &.top-level-nav {
                            display: flex;
                            gap: 12px;
                            width: max-content;
                            padding: 10px 0px;

                            img {
                                -webkit-transform: rotateX(0deg);
                                transform: rotate(180deg);
                                transition: transform .4s ease-in-out;

                            }

                            &.active-nav {

                                img {
                                    transform: rotate(0deg);
                                    transition: transform .4s ease-in-out;
                                }
                            }
                        }

                        /* &.nav-toggle {
                            display: none;
                        } */
                }
            }
        }
    }

    nav.sub-nav {
        position: absolute;
        /* top: -500px; */
        top: 48px;
        visibility: hidden;
        opacity: 0;
        background-color: var(--mostlywhite);
        background-image: url('/assets/ecsendant-logo-icon-nav.svg');
        background-repeat: no-repeat;
        background-position: bottom -68px right -46px;
        background-size: 230px;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        /* display: inline-block; */
        /* display: none; */
        width: 460px;
        /* left: 0px; */
        /* left: 400px; */
        padding: 30px 0px 36px;
        font-family: var(--font-mainFont);
        font-weight: 600;
        font-size: 1.15rem;
        letter-spacing: var(--oneSpace);
        z-index: 5;
        /* transform: translate(0px, -480px);  */
        transition: all 1s ease-in-out;
        box-shadow: var(--navShadow);

        .container {
            align-items: flex-start;
            justify-content: flex-start;
            flex-direction: row;

             > ul {
                list-style-type: none;
                /* width: 160px; */
                width: 50%;
                padding: 0;
                margin: 0;
                flex-direction: column;
                gap: 10px;
                align-items: flex-start;



                li {
                    /* margin-bottom: 10px; */
                    width: 100%;
                    /* border: 1px solid red; */
                    box-sizing:border-box;
                    -webkit-box-sizing:border-box;

                    &.single {
                        &:has(> a:hover) {
                            border-bottom: 0px solid var(--primary);
                            margin-bottom: 0px;
                        }

                        a:hover {
                            border-bottom: 3px solid var(--primary);
                            margin-bottom: -3px;
                        }

                    }

                    &:has(> a:hover) {
                        &:before {
                            content: '';
                            width: 100%;
                            height: 5px;
                            background-color: var(--primary);
                            display: none;
                            position: absolute;
                            top: 30px;
                        }

                        /* &:after {
                            content: '';
                            width: 100%;
                            height: 5px;
                            background-color: var(--primary);
                            display: inline-block;
                            position: absolute;
                            top: 30px;
                            left: 0px;
                        } */
                       
                         border-bottom: 3px solid var(--primary);
                         margin-bottom: -3px;
                    }

                   

                    a {
                        color: var(--text);
                        text-decoration: none;
                        font-size: 0.95rem;
                        width: 100%;
                    }

                    ul {
                        position: relative;
                        top: unset;
                        columns: 1 auto;
                        margin-top: 0px;
                        flex-direction: column;
                        align-items: flex-start;
                        padding: 4px 0px 0px 20px;
                        gap: 10px;
                        /* height: 300px; */
                        /* border: 1px solid red; */
                        width: 100%;

                        li {
                            font-weight: 400;
                            /* font-size: 1rem;
                            margin-bottom: 6px; */
                            width: 100%;
                            display: inline-block;

                            a {
                                width: 100%;
                                display: inline-block;
                            }
                        }
                    }
                }
            }
        }

        &.show-nav {
            /* //top: 90px; */
            visibility: visible;
            opacity: 1;
            display: inline-block;
            /* top: 50px; */

            /* transform: translate(0px, 0px);  */
            transition: all 1s ease-in-out;
        }
    }

    .features {
        /* margin-top: -90px; */
        position: relative;

        .container {
            background-color: var(--white);
            border-radius: var(--corners);
            display: flex;
            flex-direction: column;
            box-shadow: var(--panelShadow);

            .header {
                h2, p {
                    text-align: center;
                }

                h2 {
                    font-size: 3.1rem;
                    line-height: 3.2rem;

                }

                p {
                    width: 80%;
                    margin: 0px auto 16px;
                    text-wrap: unset;
                }
            }
        }



        section {
            width: 100%;
            position: relative;

            a.circle-button {
                background-color: rgba(255,255,255,0.5);
                border-radius: 50%;
                padding: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 22px;
                height: 22px;
                aspect-ratio: 1/1;
                position: absolute;
                top: 50%;
                bottom: 50%;
                z-index: 2;
                box-shadow: var(--panelShadow);

                > img {
                    width: 10px;
                    height: auto;
                    max-width: unset;
                    margin: 0px -20px 0px -20px;
                    border: 0px solid red;
                    pointer-events: none;
                }

                &.sit-left {
                    left: calc(0% - 42px);
                }

                &.sit-right {
                    right: calc(0% - 42px);
                }
            }
            .shadow-cast {
                box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.125);
                padding: 16px 20px;
                width: 94%;
                border-radius: 40px !important;
                background-color: transparent;
                margin: 20px auto 10px;

            > nav {
                /* border-bottom: 2px solid #CDCDD2;
                padding: 0px 36px;
                gap: 0px 10px;
                flex-wrap: nowrap;
                display: relative;
                top: unset; */

                &.pill-list {
                    /*
                    border: 0px solid #CDCDD2;
                   
                    margin: 0px auto;
                    width: fit-content;
                    position: absolute; */
                    padding: 0px 0px;
                    font-family: var(--font-mainFont);
                    /* box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.2); */
                    border-radius: 40px !important;
                    margin: 0px auto;
                    display: grid;
                    max-width: calc(var(--count) * 200px);
                    /* width: 94%; */
                    grid-template-columns: repeat(var(--count), minmax(0, 1fr));
                    grid-column-gap: 10px;
                    /* background-color: rgb(15, 15, 15); */

                    position: relative;
                    overflow: hidden;
                    isolation: isolate;

                    &:has(a:nth-child(1)) {
                        --count: 1;
                      }
                     &:has(a:nth-child(2)) {
                        --count: 2;
                      }
                     &:has(a:nth-child(3)) {
                        --count: 3;
                      }
                    &:has(a:nth-child(4)) {
                        --count: 4;
                      }
                      &:has(a:nth-child(5)) {
                        --count: 5;
                      }
                    &:has(a:nth-child(6)) {
                        --count: 6;
                      }

                    a {

                        border: 1px solid #CDCDD2;
                        text-align: center;
                        border-radius: 28px;
                        font-size: 1.05rem;
                        font-weight: 550;
                        color: var(--text);
                        text-decoration: none;
                        padding: 6px 20px;
                        background-color: unset;

                        /* &[aria-selected="true"] {
                          background-color: unset;
                          border-bottom: 1px solid #CDCDD2;
                          margin-bottom: unset;
                        } */
                        width: unset;
                        flex-basis: 200px;



                    }

                    &:has(a:nth-child(1).active) {
                        --active: 0;
                      }

                     &:has(a:nth-child(2).active) {
                        --active: 1;
                      }

                     &:has(a:nth-child(3).active) {
                        --active: 2;
                      }

                      &:has(a:nth-child(4).active) {
                        --active: 3;
                      }

                     &:has(a:nth-child(5).active) {
                        --active: 4;
                      }

                     &:has(a:nth-child(6).active) {
                        --active: 5;
                      }

                    /* &:after, &:before {
                        display: none;
                        content: '';
                    } */
                    &:before {
                        display: none;
                        content: '';
                    }

                    &:after {
                        content: "";
                        position: absolute;
                        inset: 0px;
                        transform: scale(0.96, 1);
                        --width: calc((100% / var(--count)));
                        width: var(--width);
                        /* width: 100px; */
                        margin-left: calc(var(--active) * var(--width));
                        /* margin-left: 0; */
                        transition: margin-left 300ms;
                        background-color: var(--primary);
                        z-index: -1;
                        border-radius: inherit;
                        border-radius: 30px;
                        height: 40px;
                        margin-top: auto;
                        margin-bottom: auto;

                      }

                }


                a {
                    /* width: calc(16.6%);
                    border: 1px solid #CDCDD2;
                    border-bottom: 0px;
                    text-align: center;
                    border-radius: 28px 28px 0px 0px;
                    font-size: 1.1rem;
                    font-weight: 600;
                    color: var(--text);
                    text-decoration: none;
                    padding: 6px 10px;
                    background-color: #E1E9F4;
     */
                    &[aria-selected="true"] {
                      /* background-color: var(--white);
                      border-bottom: 2px solid var(--white);
                      margin-bottom: -2px; */
                      color: white;
                      border: 0px solid var(--primary);
                    }

                }

                /* &:before {
                    content: ' ';
                    width: 40px;
                    height: 50px;
                    position: absolute;
                    left: 0px;
                    background: rgb(255,255,255);
                    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
                }

                &:after {
                    content: ' ';
                    width: 40px;
                    height: 50px;
                    position: absolute;
                    right: 0px;
                    background: rgb(255,255,255);
                    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
                } */
            }
             }

            > article {
                padding: 20px 36px 20px;

                flex-direction: row;

                .main {
                    width: 70%;
                    h3 {
                        font-size: 2rem;
                        font-weight: 600;
                        line-height: 2.2rem;
                        position: relative;
                        padding-left: 80px;
                        margin-bottom: 16px;

                        img {
                            position: absolute;
                            width: 64px;
                            height: auto;
                            left: 0px;
                        }

                        span {
                            font-size: 1.6rem;
                        }
                    }

                    h4.drop-bottom {
                        margin-bottom: -30px;
                    }

                    img {
                        width: 100%;
                        height: auto;
                        margin-bottom: 20px;

                        &.rounded {
                            border-radius: var(--corners);
                        }

                        &.float-right {
                            max-width: 300px;
                            height: auto;
                            float: right;
                            margin: 10px 0px 10px 20px;
                        }
                    }

                    .button-primary, .button-secondary {
                        font-weight: 500;
                        font-size: 0.95rem;
                    }

                }

                video {
                    width: 534px;
                    height: auto;
                    margin-top: 12px;
                }

                &[aria-hidden="true"] {
                    display: none;
                    visibility: hidden;
                  }


            }
        }
    }



    footer {
    /* background-color: var(--primary); */
    min-height: 300px;
    padding: 50px 0px 70px;
    width: 100%;
    /* background-position: bottom -120px right -120px;
    background-size: 600px; */

    p {
        color: var(--white);
        margin-left: 60px;
        font-size: 14px;
    }

    .container {
        flex-direction: row;
        /* margin-bottom: 30px; */

        hr {
            width: 100%;
            margin-left: 60px;
        }


        &:nth-of-type(2) {
            /* margin-top: 30px; */
            /* border-top: 1px solid var(--white); */
            padding-top: 10px;


        }

        .col {

            &.two-col {
                margin-left: 80px;
                width: calc(40% - 120px);
            }
            ul {
                margin: 0px 0px 90px 0px;
                padding: 0px 0px;
                list-style-type: none;
                font-size: 1.18rem;
                line-height: 1.3rem;

                &.social-links {

                    margin: 0px 0px 0px -6px;
                }

                li {
                    margin-bottom: 14px;
                    color: var(--white);
                    text-align: end;
                    a {
                        color: var(--white);
                        text-decoration: none;
                    }

                    ul {
                        margin: 10px 0px 20px 30px;
                        font-size: 1rem;

                        li {
                            margin-bottom: 8px;
                        }
                    }
                }
            }
        }

        &:last-of-type {
           

            /* display: flex;
            align-items: center;
            justify-content: space-between; */
            flex-direction: row;

            > ul {
                display: flex;
                padding: 0px 0px 0px 0px;
                margin: 0px 0px 0px 0px;
                gap: 30px;

                li {
                    padding: 0px 0px 0px 0px;
                    margin: 0px 0px 0px 0px;
                    text-transform: unset;
                    font-size: 14px;
                     
                    &:after {
                        display: none;
                    }

                    a {
                        padding: 0px 0px 0px 0px;
                        margin: 0px 0px 0px 0px;
                        color: var(--mostlywhite);
                        
                    }

                    &:last-of-type {
                        padding: 0px 0px 0px 0px;
                        margin: 0px 0px 0px 0px; 
                      

                        a {
                             opacity: 1;
                             cursor: pointer;
                             pointer-events: unset;
                        }
                    }
                }
            }
        }
    }

}

}



/* ============================================================
   Use cases — tabbed card grid
   Markup: src/_includes/use-cases.njk
   Data:   src/_data/useCases.json
   Script: scripts.js ("Use cases" block)
   Mobile first: cards are one column, going to two at 768px.
   ============================================================ */

.use-cases {
    --uc-accent: var(--primary);
    --uc-kicker: var(--secondary);
    --uc-tint: #dceef6;
    --uc-border: #e3e6e6;
    --uc-media: 40%;
    --uc-media-max: 160px;

    width: 100%;
    padding: 30px 0px 50px;
    /* The tab marquee is wider than the container, so clip it here rather
       than letting it reach the page and add a horizontal scrollbar. */
    overflow-x: clip;
    background-image: linear-gradient(180deg, var(--tertiary), var(--bgcolour) 40%, var(--bgcolour));
}

.use-cases__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    width: 100%;
    padding: 20px 0px 26px;
    text-align: center;

    .eyebrow {
        color: var(--uc-kicker);
    }

    h2 {
        width: 100%;
        margin: 4px 0px 6px;
    }

    p {
        /* max-width: 46rem; */
        margin: 0px;
    }
}

/* Tabs — a single scrollable row on small screens, wrapping and
   centred once there is room for it. */
.use-cases__tabs {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 10px;
    margin: 0px -1.5em;
    padding: 4px 1.5em 16px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    justify-content: center;

    &::-webkit-scrollbar {
        display: none;
    }
}

.use-case-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border: 1px solid var(--uc-border);
    border-radius: 30px;
    background-color: var(--white);
    color: var(--text);
    font-family: var(--font-mainFont);
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
    text-wrap: nowrap;
    transition: all .25s ease-in-out;

    /* Inert for now: the pills are decorative while the row scrolls past, so
       they take no pointer at all. To give them back their behaviour, drop
       this line, uncomment the three state rules below, and flip
       UC_TABS_INTERACTIVE in scripts.js back to true. */
    pointer-events: none;

    /* scripts.js also disables the buttons outright, which would otherwise
       pick up the global button:disabled dimming. */
    &:disabled {
        opacity: 1;
    }

    /* The same tint circle the card badge carries (.use-case-card__icon),
       sized to sit inside a pill. The glyph stays currentColor so it keeps
       following the label rather than the badge. */
    .use-case-tab__icon {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: var(--uc-tint);
        color: currentColor;
    }

    svg {
        width: 20px;
        height: 20px;
    }

    /* &:hover {
        border-color: var(--uc-accent);
        color: var(--uc-accent);
    }

    &:focus-visible {
        outline: 2px solid var(--uc-accent);
        outline-offset: 2px;
    }

    &[aria-selected="true"],
    &.is-active {
        background-color: var(--uc-tint);
        border-color: var(--uc-accent);
        color: var(--uc-accent);
    } */
}

/* Auto-scrolling tab row. The wrapper, the track and the second
   (decorative) copy of the pills are all built by scripts.js — "Use cases —
   auto-scrolling tab row" — and only when the pills are wider than the
   screen, so on a roomy viewport they stay centred and still. The loop
   distance and duration come from the same script as --uc-marquee-shift and
   --uc-marquee-duration. */
.use-cases__marquee {
    position: relative;
    align-self: center;
    width: 100vw;
    max-width: 100vw;
    overflow: hidden;
    /* Fade the pills out at both edges instead of cutting them dead. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.use-cases__marquee-track {
    display: flex;
    width: max-content;
    gap: 10px;
    animation: uc-tabs-scroll var(--uc-marquee-duration, 40s) linear infinite;
    will-change: transform;
}

/* Hover, focus and scrolling out of view all park the row where it is. */
.use-cases__marquee.is-paused .use-cases__marquee-track {
    animation-play-state: paused;
}

/* Inside the track the row is one unbroken line, whatever the viewport. */
.use-cases__marquee .use-cases__tabs {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: auto;
    margin: 0px;
    padding: 4px 0px 26px;
    overflow: visible;
}

@keyframes uc-tabs-scroll {
    from {
        transform: translateX(0px);
    }

    to {
        transform: translateX(var(--uc-marquee-shift, -50%));
    }
}

@media (prefers-reduced-motion: reduce) {
    .use-cases__marquee-track {
        animation: none;
    }
}

.use-cases__panel {
    width: 100%;
}

.use-cases__grid {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 0px;
    padding: 0px 20px;
    list-style: none;

    > li {
        margin-bottom: 0px;
    }
}

.use-case-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 190px;
    padding: 20px 20px 20px 18px;
    background-color: var(--white);
    border: 1px solid var(--uc-border);
    /* border-left: 5px solid var(--uc-accent); */
    border-radius: var(--corners);
    box-shadow: var(--panelShadow);
    transition: box-shadow .3s ease-in-out;

    &:hover {
        box-shadow: var(--lightShadow);
    }
}

.use-case-card__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1 1 auto;
    max-width: calc(100% - var(--uc-media) + 4%);
}

/* Category mark at the head of the card. Falls back to the card's own
   `icon` in useCases.json when one is set, otherwise it is the category's,
   drawn in the tint-and-accent pairing the selected tab pill uses. */
.use-case-card__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0px 0px 28px;
    border-radius: 50%;
    background-color: var(--uc-tint);
    color: var(--uc-accent);

    svg {
        width: 22px;
        height: 22px;
    }
}

.use-case-card__kicker {
    color: var(--uc-kicker);
    font-family: var(--font-mainFont);
    font-size: 0.85rem;
    line-height: 1.3rem;
    margin: 0px 0px 6px;
}

.use-case-card__title {
    color: var(--uc-accent);
    font-size: 1.3rem;
    line-height: 1.75rem;
    font-weight: 600;
    margin: 0px;
}

.use-case-card__note {
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.4rem;
    margin: 20px 0px 0px;
}

/* The image sits over the right edge of the card and is clipped by it. */
.use-case-card__media {
    position: absolute;
    z-index: 0;
    top: 32px;
    right: -22px;
    aspect-ratio: 4 / 5;
    width: var(--uc-media);
    max-width: var(--uc-media-max);
    transform: rotate(4deg);
    pointer-events: none;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 16px;
        box-shadow: var(--lightShadow);
    }
}

.use-cases__grid > li:nth-child(even) .use-case-card__media {
    transform: rotate(-3deg);
}

@media (prefers-reduced-motion: reduce) {
    .use-case-card__media,
    .use-cases__grid > li:nth-child(even) .use-case-card__media {
        transform: none;
    }
}

@media (min-width: 480px) {
    .use-cases {
        --uc-media: 44%;
        --uc-media-max: 220px;
    }

    .use-case-card {
        min-height: 210px;
        padding: 22px 24px 22px 20px;
    }

    .use-case-card__title {
        font-size: 1.4rem;
        line-height: 1.9rem;
    }
}

@media (min-width: 768px) {
    .use-cases {
        padding: 40px 0px 70px;
    }
}

/* Two-up only once a column is wide enough to keep a title on two or three
   lines — below this the cards stay stacked. */
@media (min-width: 900px) {
    .use-cases__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .use-case-card {
        min-height: 220px;
    }

    /* Cards are a predictable height here, so let the image run past the
       bottom edge as well as the right. */
    .use-case-card__media {
        bottom: -16px;
        aspect-ratio: auto;
    }
}

@media (min-width: 992px) {
    .use-cases__tabs {
        flex-wrap: wrap;
        justify-content: center;
        margin: 0px;
        padding: 4px 0px 20px;
        overflow-x: visible;
    }
}

/* ============================================================
   CTA banner — full-width gradient band for the foot of a page.
   Markup: src/_includes/cta-banner.njk
   The gradient and the logo mark are the same pair the .hero uses,
   minus the curve, so the two ends of a page bookend each other.
   Mobile first: always centred, the band just gains breathing room
   and pulls the logo mark further into view as the viewport grows.
   ============================================================ */

.cta-banner {
    display: flex;
    width: 100%;
    justify-content: center;
    /* background-color: var(--bgcolour);
    background-image: linear-gradient(360deg, #C5EBF0, #457D92);
    background-repeat: no-repeat;
    background-position: 50% 50%;

    background-size: cover; */

    background-color: var(--bgcolour);
    background-image: url('/assets/ecsendant-logo-icon-green-15.png'), linear-gradient(360deg,  #C5EBF0, #457D92);
    background-repeat: no-repeat, no-repeat;
    background-position: right -90px top 180px, 50% 50%;
    background-size: 400px, cover;

    .container {
        align-items: center;
        justify-content: center;
        gap: 4px;
        width: 100%;
        padding: 50px 20px 56px;
        text-align: center;
        position: relative;
    }

    .eyebrow {
        margin: 0px;
    }

    h2 {
        width: 100%;
        margin: 6px 0px 10px;
        font-size: clamp(2.2rem, 9vw, 3.2rem);
        line-height: clamp(2.6rem, 11vw, 3.8rem);
    }

    p {
        max-width: 46rem;
        margin: 0px;
        color: var(--text);
        text-wrap: balance;
    }

    .button-primary {
        margin-top: 26px;
    }
}

@media (min-width: 768px) {
    .cta-banner {
        /* background-position: 50% 50%;
        background-size: cover; */

        .container {
            padding: 8rem 20px 8.6rem;
        }
    }
}

/* ============================================================
   Feature split — large media panel bleeding off one edge of the
   page, with copy, an optional bullet list and a button alongside.
   Markup: src/_includes/feature-split.njk (macro)
   Data:   src/_data/featureSections.json
   Mobile first: one column with the copy on top and the media, fully
   in view, beneath it; the two-column bleeding layout starts at 900px.
   ============================================================ */

.feature-split {
    /* --fs-bg: #e6f1f4; */
    --fs-heading: var(--bgDark);
    --fs-eyebrow: var(--secondary);
    --fs-text: var(--text);
    --fs-bullet: var(--primary);
    --fs-media-width: 46%;
    --fs-media-max: 250px;
    --fs-media-bleed: 0px;
    /* How much of a cropped image's height stays in view. */
    --fs-media-crop: 0.64;

    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 40px 0px 50px;
    background-color: var(--fs-bg);

    .container {
        width: 100%;
        padding: 0px 20px;
        align-items: stretch;
    }
}

.feature-split--plain {
    --fs-bg: var(--bgcolour);
}

.feature-split--dark {
    --fs-bg: var(--bgDark);
    --fs-heading: var(--white);
    --fs-eyebrow: var(--accentFour);
    --fs-text: var(--white);
    --fs-bullet: var(--accentFour);
}

.feature-split__inner {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 30px;
}

.feature-split__media {
    order: 2;
    justify-self: center;
    width: 100%;
    max-width: var(--fs-media-max);

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

.feature-split__body {
    order: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    .eyebrow {
        color: var(--fs-eyebrow);
        margin: 0px;
    }

    h2 {
        color: var(--fs-heading);
        /* font-size: clamp(2rem, 7vw, 2.6rem);
        line-height: clamp(2.4rem, 8vw, 3rem);
        font-weight: 700; */
        letter-spacing: 0.03rem;
        /* margin: 8px 0px 16px; */
        text-wrap: balance;
    }

    p {
        color: var(--fs-text);
        margin: 0px 0px 16px;
        max-width: 34rem;
    }

    .button-primary {
        margin-top: 14px;
    }
}

.feature-split__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px 0px 10px;
    padding: 0px;
    list-style: none;

    > li {
        position: relative;
        margin: 0px;
        padding-left: 20px;
        color: var(--fs-text);
        font-family: var(--font-mainFont);
        font-size: 1rem;
        line-height: 1.6rem;

        &::before {
            content: "";
            position: absolute;
            top: 0.65rem;
            left: 2px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: var(--fs-bullet);
        }

        > strong {
            color: var(--fs-heading);
            font-weight: 600;
        }
    }
}

/* A cropped image keeps its top and loses its bottom to the edge of the
   section, so a phone mock reads as continuing beyond the band. In one
   column the media sits last, so the crop is done by shortening its box
   to a fraction of the image's own height and clipping the overflow; the
   section drops its bottom padding so the cut lands on its edge.
   --fs-media-w/h come from the macro, off the image's dimensions.
   ============================================================ */
.feature-split--crop {
    padding-bottom: 0px;
}

.feature-split--crop .feature-split__media {
    aspect-ratio: var(--fs-media-w, 560) / calc(var(--fs-media-h, 1000) * var(--fs-media-crop));
    overflow: hidden;
}

/* Two columns. The media sits at the outer edge of its column and can be
   pulled further out with --fs-media-bleed if a design wants it to run off
   the side of the page — the section clips whatever escapes.
   ============================================================ */
@media (min-width: 480px) {
    .feature-split {
        --fs-media-max: 300px;
    }
}

@media (min-width: 900px) {
    .feature-split {
        --fs-media-max: 520px;

        padding: 70px 0px 80px;
    }

    .feature-split__inner {
        grid-template-columns: var(--fs-media-width) 1fr;
        gap: 40px;
    }

    /* Back to DOM order once there are two columns to place them in. */
    .feature-split__media,
    .feature-split__body {
        order: 0;
    }

    .feature-split__media {
        justify-self: start;
        margin-left: calc(var(--fs-media-bleed) * -1);
    }

    /* Media on the right, and any bleed goes off that edge instead. */
    .feature-split--reverse .feature-split__inner {
        grid-template-columns: 1fr var(--fs-media-width);
    }

    .feature-split--reverse .feature-split__media {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        margin-left: 0px;
        margin-right: calc(var(--fs-media-bleed) * -1);
    }

    .feature-split--reverse .feature-split__body {
        grid-column: 1;
        grid-row: 1;
    }

    /* Two columns: the copy beside the image sets the height of the
       section, so the media box can add no height of its own and let the
       image overflow the bottom to be clipped by the section instead. */
    .feature-split--crop .feature-split__media {
        align-self: start;
        aspect-ratio: auto;
        height: 0px;
        overflow: visible;
    }
}

@media (min-width: 1200px) {
    .feature-split__inner {
        gap: 60px;
    }
}

/* ============================================================
   Sharing tiers — the sharing audience explainer: a column of tier
   cards beside a set of nested circles, one tier lit at a time.
   Markup: src/_includes/sharing-tiers.njk
   Data:   src/_data/sharingTiers.json
   Script: scripts.js ("Sharing tiers" block)
   Mobile first: the diagram sits under the copy, centred; the two
   column layout starts at 900px, as the feature splits do.
   Colours run as a ramp from --n1 (widest audience, palest) to --n4
   (private, the deepest), and the whole ramp is one blue family. The
   secondary red belongs to the highlight rather than to any one tier:
   whichever ring is currently lit is the one outlined in it.
   ============================================================ */

.sharing-tiers {
    --st-bg: var(--bgcolour);
    --st-eyebrow: var(--secondary);
    --st-heading: var(--bgDark);
    --st-border: #e3e6e6;
    /* The one colour that isn't per-tier: it marks the lit ring, wherever
       the highlight happens to be. */
    --st-ring-on: var(--secondary);
    --st-diagram-max: 360px;
    --st-diagram-bleed: 0px;

    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 40px 0px 50px;
    background-color: var(--st-bg);

    .container {
        box-sizing: border-box;
        width: 100%;
        padding: 0px 20px;
        align-items: stretch;
    }
}

/* The colour step for each tier. A card and its ring carry the same
   --n class, so lighting one lights the other in the same colour. */
.sharing-tier--n1,
.sharing-tiers__ring--n1 {
    --st-accent: #86b4c4;
    --st-accent-on: var(--primary);
    --st-fill: #eff7fa;
    --st-fill-on: #e4f2f8;
    --st-card-on: #eef6fa;
}

.sharing-tier--n2,
.sharing-tiers__ring--n2 {
    --st-accent: #6ba3b7;
    --st-accent-on: var(--accentTwo);
    --st-fill: #e2f0f6;
    --st-fill-on: #d3e9f2;
    --st-card-on: #eaf4f9;
}

.sharing-tier--n3,
.sharing-tiers__ring--n3 {
    --st-accent: #5795ab;
    --st-accent-on: var(--primary);
    --st-fill: #bcdeeb;
    --st-fill-on: #a8d5e7;
    --st-card-on: #e6f2f8;
}

.sharing-tier--n4,
.sharing-tiers__ring--n4 {
    --st-accent: #4588a0;
    --st-accent-on: var(--primary);
    --st-fill: #8ac3d5;
    --st-fill-on: #74b8cf;
    --st-card-on: #e2f0f7;
}

.sharing-tiers__inner {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 34px;
}

.sharing-tiers__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    .eyebrow {
        color: var(--st-eyebrow);
        margin: 0px;
    }

    h2 {
        color: var(--st-heading);
        letter-spacing: 0.03rem;
        width: 100%;
        max-width: 34rem;
    }

    p {
        color: var(--text);
        margin: 0px 0px 16px;
        max-width: 34rem;
    }
}

.sharing-tiers__list {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 34rem;
    gap: 12px;
    margin: 8px 0px 0px;
    padding: 0px;
    list-style: none;

    > li {
        margin-bottom: 0px;
    }
}

/* A card is a button so the cycle can be taken over by hand. The border
   stays 2px in both states and only changes colour, so nothing shifts
   as the highlight moves down the column. */
.sharing-tier {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    padding: 14px 20px 16px;
    border: 2px solid var(--st-border);
    border-radius: var(--tightCorners);
    background-color: var(--white);
    font-family: var(--font-mainFont);
    text-align: left;
    cursor: pointer;
    transition: border-color .4s ease-in-out, background-color .4s ease-in-out, box-shadow .4s ease-in-out;

    .sharing-tier__label {
        color: var(--st-accent);
        font-size: 0.9rem;
        line-height: 1.35rem;
        font-weight: 500;
        transition: color .4s ease-in-out;
    }

    .sharing-tier__text {
        color: var(--text);
        font-size: 1rem;
        line-height: 1.5rem;
    }

    &:hover {
        border-color: var(--st-accent-on);
    }

    &:focus-visible {
        outline: 2px solid var(--st-accent-on);
        outline-offset: 2px;
    }

    &.is-active {
        border-color: var(--secondary);
        background-color: var(--st-card-on);
        box-shadow: var(--panelShadow);

        .sharing-tier__label {
            color: var(--secondary);
        }
    }
}

.sharing-tiers__footnote {
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.4rem;
    margin: 20px 0px 0px !important;
}

.sharing-tiers__diagram {
    position: relative;
    justify-self: center;
    width: 100%;
    max-width: var(--st-diagram-max);
}

/* The diagram box. Every circle and label inside is placed as a percentage
   of this box, so the whole thing scales as one drawing. Square, because the
   circles are concentric on its centre. It is also the query container the
   label type is sized against — see the cqw sizes below. */
.sharing-tiers__rings {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 1;
    container-type: inline-size;
}

/* A ring is only a frame for its circle and label: it covers the whole box,
   so it must not take clicks itself. Its label doesn't either, which leaves
   a click on a label falling through to the circle drawn underneath it —
   always that label's own circle, since the label sits inside it. */
.sharing-tiers__ring {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Circles are laid out outermost first, so each one paints over the fill of
   the tier outside it while its label sits in the band above. Later in the
   stack also means the inner circles take the clicks inside their own area,
   leaving each tier only the band that is actually visible.

   left/top/width come from the template, off a shared centre and one radius.
   The clip is what keeps the click area honest: without it the corners of
   this square box would reach out over the ring outside it and swallow
   clicks that belong to the wider tier. */
.sharing-tiers__circle {
    position: absolute;
    box-sizing: border-box;
    aspect-ratio: 1;
    border: 1.5px solid var(--st-accent);
    border-radius: 50%;
    background-color: var(--st-fill);
    clip-path: circle(50%);
    pointer-events: auto;
    cursor: pointer;
    transition: background-color .4s ease-in-out, border-color .4s ease-in-out, border-width .4s ease-in-out;

   
    
    
}

/* Labels are centred on the y they were drawn at, as the SVG text was, and
   sized in cqw so 21px of a 600 unit wide drawing stays 21/600 of the box. */
.sharing-tiers__ring-label,
.sharing-tiers__ring-sub {
    position: absolute;
    left: 0px;
    right: 0px;
    transform: translateY(-50%);
    font-family: var(--font-mainFont);
    line-height: 1.15;
    /* Each label is laid across the full width of the box and centred, as
       the SVG text was, so there is room for a long one without it wrapping
       into the arc below. Held on one line for the same reason the SVG
       version was: a wrap would push the second line down into the ring. */
    text-align: center;
    white-space: nowrap;
    color: var(--st-accent-on);
    pointer-events: none;
    transition: color .4s ease-in-out;
}

.sharing-tiers__ring-label {
    font-size: 3cqw;
    font-weight: 600;
}

.sharing-tiers__ring-sub {
    font-size: 3cqw;
    font-weight: 500;
}

.sharing-tiers__circle:hover {
    border-color: var(--st-accent-on);
}

/* The lit ring, outlined in the one colour no tier owns. Its fill still
   steps up to that tier's own --st-fill-on, so the highlight reads as the
   same circle brightening rather than as a different circle. */
.sharing-tiers__ring.is-active .sharing-tiers__circle {
    border-color: var(--st-ring-on);
    border-width: 3.5px;
    background-color: var(--st-fill-on);
    box-shadow: var(--panelShadow);
}

/* The lit ring's label goes the same red as the outline it sits inside, so the
   highlight reads as one thing rather than as a ring that happens to have a
   label in it. Note these are siblings of the circle and not children of it —
   a ring is a frame holding all three — so this hangs off the ring rather than
   nesting inside the rule above. The colour transition is already declared on
   the labels themselves, so the change fades in step with the circle. */
.sharing-tiers__ring.is-active .sharing-tiers__ring-label,
.sharing-tiers__ring.is-active .sharing-tiers__ring-sub {
    color: var(--st-ring-on);
}

/* Optional portraits gridded behind the circles — see `faces` in the data
   file for the pictures and `faceGrid` / `faceCells` in the template for the
   lattice and which of its cells are filled. Purely decorative, and blurred
   so the labels stay readable.

   The layer shares its box with the rings, which is what lets the template
   place a cell in the same 600 unit drawing space the circles use; cells
   outside that box hang over the edge and are cut off by the section, which
   clips. It sits under the rings, so the grid runs behind the outer circle
   rather than over it. */
.sharing-tiers__faces {
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    /* Held back until the two column layout starts. The grid is half again as
       tall as the diagram it rings, and in one column that spare height is
       where the copy and the footnote are — so on a narrow screen the crowd
       would be reading through the text rather than sitting behind circles. */
    display: none;
}

/* Two elements per portrait, because the crowd is doing two things at once
   and they both want the transform: the wrapper holds the position and the
   slow float, the image inside holds the fade and the settle. Splitting them
   keeps one from overwriting the other. */
.sharing-tiers__face {
    position: absolute;
    aspect-ratio: 4 / 5;
    /* left/top from the template are the centre of the cell, so pull the
       portrait back by half of itself. */
    transform: translate(-50%, -50%);
    /* The idle life in the crowd is a brightness wave, not a drift: nothing
       moves, so every row and column stays exactly where the grid put it.
       One duration for every cell and only the start phase differing is what
       makes it a wave crossing the lattice rather than two dozen portraits
       flickering out of step. Alternating doubles the cycle to 18s, which is
       the span the template's six phase offsets divide up.

       This rides on the wrapper because the image below is already using its
       own opacity for the tier changes. The two multiply, so a cell breathes
       within its own faintness rather than towards a common one — the pale
       ones stay pale. */
    animation: st-face-pulse 9s var(--st-face-phase, 0s) ease-in-out infinite alternate;
}

.sharing-tiers__face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 3px;
    /* How soft and how faint a portrait is varies cell by cell — the template
       deals both out of the two short lists next to the grid. The fallbacks
       here are what the whole crowd used to be, and the ranges those lists
       cover are centred on them, so the section weighs the same overall. The
       greyness does not vary: one thing holding the crowd together while the
       other two scatter. */
    filter: blur(var(--st-face-blur, 2.5px)) grayscale(35%);
    /* Faces the highlight has passed shrink back and go, and the delay is
       per-cell so the change sweeps down the grid's diagonal instead of
       landing on every cell at the same instant. */
    opacity: 0;
    transform: scale(0.8);
    transition: opacity .55s ease-in-out, transform .55s cubic-bezier(.22, .61, .36, 1);
    transition-delay: var(--st-face-in, 0ms);
}

.sharing-tiers__face.is-on img {
    opacity: var(--st-face-opacity, 0.55);
    transform: scale(1);
}

@keyframes st-face-pulse {
    from { opacity: 0.72; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .sharing-tier,
    .sharing-tier .sharing-tier__label,
    .sharing-tiers__circle,
    .sharing-tiers__ring-label,
    .sharing-tiers__ring-sub {
        transition: none;
    }

    /* The headcount still tracks the tier — it is the pulse and the
       staggered fade that go. */
    .sharing-tiers__face {
        animation: none;
    }

    .sharing-tiers__face img {
        transition: none;
        transition-delay: 0ms;
        transform: none;
    }

    .sharing-tiers__face.is-on img {
        transform: none;
    }
}

@media (min-width: 480px) {
    .sharing-tiers {
        --st-diagram-max: 440px;
    }
}

/* Two columns, with the diagram at the outer edge of its own column and
   free to run off the side of the page — the section clips it. */
@media (min-width: 900px) {
    .sharing-tiers {
        --st-diagram-max: 560px;
        --st-diagram-bleed: 40px;

        padding: 100px 0px 110px;
    }

    .sharing-tiers__inner {
        grid-template-columns: 1fr 48%;
        gap: 40px;
    }

    .sharing-tiers__diagram {
        justify-self: end;
        margin-right: calc(var(--st-diagram-bleed) * -1);
    }

    /* Room either side of the diagram at last: the copy is beside it rather
       than above it, so the grid has somewhere to be. */
    .sharing-tiers__faces {
        display: block;
    }
}

@media (min-width: 1200px) {
    .sharing-tiers {
        --st-diagram-bleed: 60px;
    }

    .sharing-tiers__inner {
        gap: 60px;
    }
}

/* ============================================================
   Page head — banded title area for an interior page, sitting
   directly under the site header.
   Markup: src/_includes/page-head.njk
   Carries the same gradient and logo mark as the .hero and the
   CTA banner, and repeats the hero's curve at its foot. The curve
   is a mask rather than a picture so its fill tracks --bgcolour
   (i.e. whatever <main> is painted).
   Mobile first: the band tightens up and the logo mark pulls
   further off the right edge as the viewport narrows.
   ============================================================ */

.page-head {
    position: relative;
    display: flex;
    width: 100%;
    justify-content: center;
    background-color: var(--bgcolour);
    background-image: url('/assets/ecsendant-logo-icon-green-15.png'), linear-gradient(360deg, #a7d9e6, #84c1d1, #457D92);
    background-repeat: no-repeat, no-repeat;
    background-position: right -90px top 30px, 50% 50% !important;
    /* background-position: right -90px top -30px, 50% 50%; */
    background-size: 200px, cover;
    margin-bottom: clamp(40px, 8vw, 80px);

    .container {
        display: flex;
        flex-direction: column;
        /* The site-wide .container packs its children to the start on both
           axes; the band wants them full width so the title can centre. */
        align-items: stretch;
        justify-content: flex-start;
        width: 100%;
        padding: 14px 20px 60px;
        position: relative;
        z-index: 1;
    }

    /* The dip at the foot of the band. Sized in vw so the arc keeps
       roughly the proportions it was drawn at, and capped at the height
       of the source strip. */
    &:after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: clamp(18px, 2.8vw, 40px);
        background-color: var(--bgcolour);
        -webkit-mask: url('/assets/head-curve.svg') no-repeat center bottom / 100% 100%;
        mask: url('/assets/head-curve.svg') no-repeat center bottom / 100% 100%;
        pointer-events: none;
    }

    .page-head__body {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 8px;
        margin-bottom: 28px;
    }

    .eyebrow {
        margin: 0px;
    }

    h1 {
        width: 100%;
        margin: 6px 0px 8px;
        font-size: clamp(2.4rem, 10vw, 4rem);
        line-height: clamp(3rem, 12vw, 4.6rem);
    }

    p {
        max-width: 46rem;
        margin: 0px;
        color: var(--text);
        text-wrap: balance;
    }
}

.page-head--center {
    .page-head__body {
        align-items: center;
        text-align: center;

        p {
            font-size: 1.2rem;
            font-weight: 500;
            letter-spacing: 1px;
            color: var(--primary-dark);
        }
    }
}

.page-head--left {
    h1 {
        text-align: left;
    }
}

/* Breadcrumb. Deliberately not the site-wide .breadcrumb, which is
   painted for a light page rather than for the top of a dark band. */
.page-head__crumb {
    margin-bottom: clamp(14px, 4vw, 26px);

    ol {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        margin: 0px;
        padding: 0px;
        gap: 8px;
        font-family: var(--font-mainFont);
        font-size: 0.9rem;
        line-height: 1.4rem;
    }

    li {
        display: flex;
        align-items: center;
        gap: 8px;

        /* Separator sits before every crumb but the first. */
        &:not(:first-child):before {
            content: '\203A';
            color: var(--halfwhite);
        }
    }

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

        &:hover, &:focus {
            text-decoration: underline;
        }
    }

    [aria-current="page"] {
        color: var(--halfwhite);
    }
}

@media (min-width: 768px) {
    .page-head {
        background-position: right -60px top -40px, 50% 50%;
        background-size: 300px, cover;

        .container {
            padding: 20px 20px 78px;
        }
    }
}

@media (min-width: 992px) {
    .page-head {
        background-position: right -40px top -50px, 50% 50%;
        background-size: 380px, cover;

        .container {
            padding: 24px 20px 90px;
        }
    }
}

/* ============================================================
   Form split — a column of copy alongside a form, for pages whose
   job is to get something filled in.
   Markup: src/beta/index.njk
   Mobile first: one column with the copy above the form; the two
   columns start at 900px.
   ============================================================ */

.form-split {
    display: flex;
    width: 100%;
    justify-content: center;
    background-color: var(--bgcolour);

    .container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 40px;
        width: 100%;
        padding: 30px 20px 70px;
    }

    h2 {
        width: 100%;
        color: var(--primary);
        margin: 0px 0px 20px;
    }

    p {
        margin: 0px 0px 16px;
        color: var(--text);
    }
}

.form-split__media {
    width: 100%;
    max-width: 440px;
    height: auto;
    margin: 24px 0px 0px;
}

/* The form's own fields are a touch roomier and softer-edged than the
   site default, which is tuned for forms sat inside a text column. */
.form-split__form {
    order: -1;

    form {
        margin: 0px;
        gap: 18px;
    }

    fieldset {
        gap: 4px;
    }

    input, select, textarea {
        border-color: var(--midAccent);
        padding: 12px 14px;
        font-size: 1rem;
    }

    select {
        /* A chevron rather than the site's solid caret, to sit with the
           lighter field borders. */
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%233d7a91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m5 9 7 7 7-7'/></svg>");
        background-size: 20px;
        background-position: calc(100% - 12px) center;
        padding-right: 42px;
        color: var(--midAccent);

        /* Once a real band is picked the value should read as an answer,
           not as the prompt. */
        &:has(option:checked:not([value=""])) {
            color: var(--text);
        }
    }

    textarea {
        height: 150px;
        resize: vertical;
    }

    input:focus-visible, select:focus-visible, textarea:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 1px;
        border-color: var(--primary);
    }

    .button-primary {
        width: 100%;
        /* border-radius: var(--tightCorners); */
        padding: 12px 30px;
        margin-top: 6px;
    }
}

/* Consent checkbox — the site's labels stack their content in a column,
   so the marketing opt-in sets its own row layout and drops the bold. */
.request-form__consent {
    label {
        flex-direction: row;
        align-items: flex-start;
        gap: 10px;
        width: 100%;
        font-weight: 400;
        font-size: 0.9rem;
        line-height: 1.3rem;
        color: var(--text);
        cursor: pointer;
    }

    /* Opened in a new tab so a part-filled form isn't lost to the
       journey out to the policy and back. */
    a {
        color: var(--primary);
        text-decoration: underline;
        font-size: inherit;
    }

    /* The form-split fields carry generous padding, which a border-box
       checkbox would grow to fit — hold it at its square size. */
    input[type="checkbox"] {
        flex: 0 0 auto;
        width: 22px;
        height: 22px;
        padding: 0px;
        margin: 1px 0px 0px;
        border-color: var(--primary);
    }
}

.request-form__note {
    font-size: 0.8rem;
    line-height: 1.2rem;
    color: var(--clr-neutral-400);
    margin: 0px !important;
}

@media (min-width: 900px) {
    .form-split {
        .container {
            /* Narrower than the site default so neither the copy nor the
               fields run to an awkward measure once they sit side by side. */
            /* max-width: 64rem; */
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            padding: 50px 20px 100px;
            align-items: start;
        }

        .form-split__form {
            order: 1;
        }
    }
}

@media (min-width: 1200px) {
    .form-split {
        .container {
            gap: 80px;
        }
    }
}

/* ============================================================
   Features page — banded card sections: an overview row, the
   feature detail set, the audience benefit columns and the
   testimonial quotes.
   Markup: src/features/index.njk
   Cards themselves are the site-wide .card; only the band, the
   row and the quote treatment live here.
   Mobile first: cards are full width and stack, going two-up at
   768px and to the per-band count at 992px. A wrapping flex row
   rather than a grid so a short last row stretches to fill.
   ============================================================ */

.feature-band {
    width: 100%;
    padding: 40px 0px 50px;
    background-color: var(--bgcolour);

    .container {
        width: 100%;
        padding: 0px 20px;
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .heada {
        width: 100%;
    }
}

.feature-band--tint {
    background-color: var(--fs-bg);
}

/* A div rather than a ul: a direct `ul` child of .container picks up the
   nav list treatment further up this file, which title-cases every li. */
.feature-cards {
    --fc-gap: 20px;

    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: var(--fc-gap);
    margin: 0px;

    > .card {
        margin: 0px;
        padding: 26px 26px 30px;
        /* One card per row on phones. Widths for the wider layouts are set
           per breakpoint below; flex-grow lets a short last row fill out. */
        width: 100%;
        flex-grow: 1;

        > h3 {
            font-size: 1.5rem;
            color: var(--bgDark);
        }

        > p:last-child, > ul:last-child {
            margin-bottom: 0px;
        }
    }
}

/* Quote cards. The site-wide .quotes rotator is a single fading
   blockquote with its own quote-mark artwork, so these standing
   three get their own, quieter treatment. */
.card.testimonial {
    blockquote {
        margin: 0px;
        width: 100%;

        p {
            font-family: var(--font-mainFont);
            font-size: 1.15rem;
            line-height: 1.7rem;
            font-style: italic;
            font-weight: 600;
            color: var(--primary);
            margin: 0px 0px 16px 0px;
        }

        footer {
            font-size: 0.9rem;
            color: var(--text);

            cite {
                font-style: normal;
                font-weight: 700;
            }
        }
    }
}

@media (min-width: 768px) {
    .feature-band {
        padding: 60px 0px 70px;

        .container {
            gap: 40px;
        }
    }

    /* Two-up for every band. A card's share of the row is its
       fraction of the width, less its share of the gaps. */
    .feature-cards > .card {
        width: calc(50% - (var(--fc-gap) / 2));
    }
}

@media (min-width: 992px) {
    .feature-cards.feature-cards--three > .card {
        width: calc(33.333% - (var(--fc-gap) * 2 / 3));
    }

    .feature-cards.feature-cards--four > .card {
        width: calc(25% - (var(--fc-gap) * 3 / 4));
    }

    /* .feature-cards--two keeps the half-width it took at 768px. */
}


/* ============================================================
   Scroll reveal — a band fades and lifts into place the first
   time it is scrolled into view.
   Script: scripts.js ("Scroll reveal" block), which is what
   finds the bands, puts .reveal on them and takes .is-revealed
   off the shelf as each one arrives.
   Nothing here bites until that script has run, so a visit
   without JavaScript — or one under reduced motion, where the
   script stands aside — gets the plain, fully visible page.
   Only a band's children are moved, never the band itself.
   These sections carry full-width backgrounds, and sliding one
   down by even a few pixels opens a seam of page colour above
   it; fading the box while lifting its contents reads as a
   single movement and leaves the backgrounds where they are.
   ============================================================ */

/* Going out is instant and coming in is animated, which is why
   the timings below sit on the revealed state rather than here: a
   transition is read from the state being moved to, so one at
   this end would animate the hiding as well. That matters where a
   band is hidden after the page has already been painted — a tab
   opened in the background and looked at later, say, which is the
   one case where the script marks up a band that has been drawn
   once already. */
.reveal {
    --reveal-shift: 36px;
    --reveal-time: 0.7s;
    /* Quick off the mark and long on the settle, so a section
       arrives rather than sliding to a halt. */
    --reveal-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

    opacity: 0;
}

.reveal > * {
    transform: translateY(var(--reveal-shift));
}

.reveal.is-revealed {
    opacity: 1;
    transition: opacity var(--reveal-time) var(--reveal-ease);
}

.reveal.is-revealed > * {
    transform: none;
    transition: transform var(--reveal-time) var(--reveal-ease);
}

/* A safety net for the setting being turned on part way through a
   visit: the script only stands aside at load, so anything it has
   already hidden has to be given back. */
@media (prefers-reduced-motion: reduce) {

    .reveal,
    .reveal > * {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* ============================================================
   The Curator — a row of steps, each one a card that fades from
   a teal tint at the head to the page colour behind the phone
   screenshot at its foot.
   Markup: src/_includes/curator.njk
   Mobile first: one step per row, two-up at 768px and all four
   across at 992px. At the widest the cards give up their bottom
   border and their lower corners and sit on the section's own
   edge, so the row of phones reads as one band rather than four
   closed boxes — which is also why the section carries no
   bottom padding.
   ============================================================ */

.curator {
    --cur-border: #e3e6e6;
    --cur-tint: #e8f1f4;
    --cur-gap: 20px;

    width: 100%;
    padding: 40px 0px 0px;
    background-color: var(--white);

    .container {
        width: 100%;
        padding: 0px 20px;
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .heada {
        width: 100%;

        h2 {
            width: 100%;
            margin: 4px 0px 6px;
        }

        > p {
            /* The intro is the one line of prose in the section, so it is
               held well short of the 1200px container to keep it readable. */
            max-width: 920px;
            margin: 0px;
            text-wrap: balance;
        }
    }
}

/* A grid rather than the wrapping flex row the feature bands use: every
   step here is the same height as its neighbours, which is what lines the
   phones up along the bottom. */
.curator__steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cur-gap);
    width: 100%;
    margin: 0px;
    padding: 0px;
    list-style: none;
}

.curator__step {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    border: 1px solid var(--cur-border);
    border-radius: var(--corners);
    background-image: linear-gradient(to bottom, var(--cur-tint) 0%, var(--white) 60%);
    margin-bottom: 0px;

    &:last-of-type {
        margin-bottom: 0px;
    }
}

.curator__content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px;

    h3 {
        margin: 0px;
        font-size: 1.5rem;
        color: var(--bgDark);
    }

    p {
        margin: 0px;
        color: var(--text);
    }
}

.curator__media {
    overflow: hidden;

    img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* The screenshots are already cropped at the phone's mid-point, so
           any spare height is taken off the bottom, never the top. */
        object-position: center top;
    }
}

@media (min-width: 768px) {
    .curator {
        padding: 60px 0px 0px;

        .container {
            gap: 40px;
        }
    }

    .curator__steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .curator__steps {
        grid-template-columns: repeat(4, 1fr);
    }

    .curator__step {
        border-bottom: 0px;
        border-radius: var(--corners) var(--corners) 0px 0px;
    }
}


.no-top {
    margin-top: 0px;
    padding-top: 0px;
}

p.column-para {
    columns: 1;
}

@media (min-width: 768px) {
    p.column-para {
    columns: 2;
    }
}
/* ============================================================
   Add anything to your Engram — the Engram input types, a card
   each, with an icon at the head and the copy at the foot.
   Markup: src/_includes/engram-inputs.njk
   The band, the wrapping row and the cards are the features
   page's own .feature-band / .feature-cards / .card, so all that
   lives here is the icon and the footed copy.
   ============================================================ */

/* Sized on the span rather than the svg so a replacement icon of
   any intrinsic size still lands at the same 40px as the rest.
   No tint circle behind it — the glyph carries the colour, which
   is the one place the section names a colour at all. */
.engram-input__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0px 0px 12px 0px;
    color: var(--secondary);

    svg {
        width: 100%;
        height: 100%;
    }
}

/* The copy sits at the foot of the card, which lines the bodies of
   a row up with one another however tall the titles above them
   run. `align-self` because .card aligns its children to the
   start, and a paragraph left to shrink to its content wraps
   short of the card's edge. */
.engram-input > p {
    align-self: stretch;
    margin-top: auto;
    padding-top: 24px;
}