:root {
    --color-red: #db2020;
    --color-dark-red: #780000;
    --color-cream: #faf9f6;
    --color-dark-blue: #003049;
    --color-light-blue: #669bbc;
    --color-white: #fff;
    --color-gray-50: #f9fafb;
    --color-gray-200: #e5e7eb;
    --shadow-hard: 4px 4px 0 0 var(--color-dark-blue)
}

@keyframes heroReveal {
    0 {
        opacity: 0;
        transform: translateY(30px) scale(0.98);
        filter: blur(10px)
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0)
    }
}

@keyframes slideInRight {
    0 {
        opacity: 0;
        transform: translateX(30px)
    }

    100% {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes popIn {
    0 {
        opacity: 0;
        transform: translateY(20px)
    }

    60% {
        transform: translateY(-5px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes cardEntrance {
    0 {
        opacity: 0;
        transform: translateY(60px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

#primeagile__43654 {
    margin: 0 auto;
    margin-top: 6rem;
    margin-bottom: 2rem;
    place-content: center;
}

.success-icon-large {
    background: #8ed48e;
    padding: 1rem;
    width: max-content;
    border-radius: 100%;
    margin-bottom: 1.5rem
}

.success-icon-large>svg {
    color: #317431
}

.hero-section {
    margin-bottom: 3rem
}

.hero-title {
    font-family: var(--font-headline);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-dark-blue);
    margin-bottom: 1.5rem;
    opacity: 0;
    animation: heroReveal 1s cubic-bezier(0.16,1,0.3,1) forwards
}

.hero-title .highlight {
    color: var(--color-red)
}

.hero-subtitle {
    font-size: 1.125rem;
    color: rgba(0,48,73,0.8);
    max-width: 42rem;
    line-height: 1.6;
    opacity: 0;
    animation: heroReveal 1s cubic-bezier(0.16,1,0.3,1) .15s forwards
}

.section-header {
    border-bottom: 1px solid rgba(0,48,73,0.2);
    padding-bottom: 1rem;
    margin-bottom: 2rem;
    opacity: 0;
    animation: slideInRight .8s ease-out .3s forwards
}

.section-title {
    font-family: var(--font-headline);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-dark-blue)
}

.feature-list {
    display: flex;
    flex-direction: column;
    gap: 2rem
}

.feature-item {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    opacity: 0;
    animation: popIn .6s cubic-bezier(0.25,0.46,0.45,0.94) forwards
}

.feature-item:nth-child(1) {
    animation-delay: .4s
}

.feature-item:nth-child(2) {
    animation-delay: .55s
}

.feature-item:nth-child(3) {
    animation-delay: .7s
}

.feature-item:nth-child(4) {
    animation-delay: .85s
}

.icon-circle {
    flex-shrink: 0;
    margin-top: .25rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-cream);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05)
}

.icon-circle.red {
    background-color: var(--color-red)
}

.icon-circle.blue {
    background-color: var(--color-light-blue)
}

.icon-circle.dark {
    background-color: var(--color-dark-blue)
}

.feature-text h3 {
    font-family: var(--font-headline);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-dark-blue);
    margin-bottom: .5rem
}

.feature-text p {
    color: rgba(0,48,73,0.7);
    font-size: .95rem;
    line-height: 1.6
}

.case-study-card {
    margin-top: 3rem;
    border: 1px solid rgba(0,48,73,0.1);
    padding: 1.5rem;
    opacity: 0;
    animation: cardEntrance .9s cubic-bezier(0.22,1,0.36,1) 1s forwards
}

.case-study-title {
    font-family: var(--font-headline);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-dark-blue);
    margin-bottom: 1.5rem
}

.case-study-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem
}

.overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0,0,0,0.2);
    transition: background-color .2s ease
}

.case-study-details {
    width: 100%
}

.tag-success {
    font-size: .75rem;
    font-weight: 700;
    color: var(--color-light-blue);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .5rem
}

.result-heading {
    font-family: var(--font-headline);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-dark-blue);
    margin-bottom: .75rem
}

.link-button {
    color: var(--color-light-blue);
    font-weight: 700;
    font-size: .875rem;
    background: 0;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .25rem
}

.link-button:hover {
    color: var(--color-dark-blue)
}

form#primeagile__43658 {
    display: block;
    position: sticky;
    top: 5rem;
    border: 1px solid rgba(0,48,73,0.1);
    padding: 2rem;
    box-shadow: 4px 4px 0 0 #003049;
    opacity: 0;
    transform-origin: top center;
    animation: cardEntrance 1.1s cubic-bezier(0.19,1,0.22,1) .5s forwards
}

#primeagile__43659 {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    color: #003049;
    margin-bottom: 1.5rem
}

#primeagile__43658>div>div {
    margin-bottom: 1rem
}

#primeagile__43658 label,#primeagile__43658 span {
    font-size: .75rem;
    font-weight: 700;
    color: rgba(0,48,73,0.6);
    margin-bottom: .25rem
}

#primeagile__43660,#primeagile__43661,#primeagile__43662 {
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: .375rem;
    padding: .75rem;
    width: 100%;
    font-size: .875rem;
    font-family: 'Cabinet Grotesk',sans-serif;
    color: #003049;
    transition: all .2s
}

#primeagile__43660:focus,#primeagile__43661:focus,#primeagile__43662:focus {
    outline: 0;
    border-color: #669bbc;
    box-shadow: 0 0 0 1px #669bbc
}

iframe {
    border-radius: .5rem
}

.fullWidthBlueBar {
    display: none
}

#primeagile__43663 {
    width: 100%;
    background-color: #db2020;
    color: white;
    padding: 1rem;
    border: 0;
    font-weight: 700;
    text-transform: uppercase;
    transition: background-color .2s;
    margin-top: 1rem
}

#primeagile__43663:hover {
    background-color: #780000
}

@media(max-width: 768px) {
    #primeagile__43654 {
        margin-top:8rem;
        padding: 2rem
    }

    iframe {
        width: 100%;
        height: 100%
    }

    .case-study-content {
        flex-direction: column
    }
}

#primeagile__43662 {
    height: 50px
}

#primeagile__43659 span {
    font-size: .75rem;
    font-weight: 700;
    color: rgba(0,48,73,0.6);
    margin-bottom: .25rem
}