@scope (#hero) {

	h1 {
		padding-block: 80px 16px;
		color: var(--__oj2_color_orange);
    }

    .blurb {
		padding-bottom: 48px;
        max-width: 632px;
    }

	.breadcrumbs {
		padding-top: 8px;
		position: absolute;

		ol {
			flex-wrap: wrap;
			align-items: center;
			gap: 4px;
			display: flex;

			li {
				font-size: 14px;
				line-height: 20px;

				&.active { font-weight: 700 }

				a { color: inherit }

				&:not(:first-child) {
					padding-left: 26px;
					position: relative;

					&:before {
						content: "";
						background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.75002 7.41632C9.9781 7.18824 9.9781 6.81957 9.75002 6.59149L5.08335 1.92482L4.25852 2.74965L8.51277 7.0039L4.25852 11.2582L5.08335 12.083L9.75002 7.41632Z' fill='%23A69F98'/%3E%3C/svg%3E") 50% / contain no-repeat;
						place-items: center;
						width: 14px;
						height: 14px;
						display: inline-grid;
						position: absolute;
						top: 3px;
						left: 4px;
					}
				}
			}
		}
	}

	.hero-feature-box {
		color: white;
		z-index: 1;
		background-color: var(--__oj2_color_maroon_100);
		border-radius: 16px;
		flex-direction: column;
		gap: 24px;
		padding: 40px 32px;
		display: flex;
		position: absolute;
		transform: translateY(-186px);
		justify-self: flex-end;
		width: 386px;

        h4 {
            margin-top: 8px;
        }

		ul {
			display: flex;
			flex-direction: column;
			gap: 16px;

			li {
				display: flex;
				gap: 8px;

				h6 { font-weight: 700 }
			}
		}
	}

	.hero-img {
		min-height: 384px;
		background-image: url('/img/heros/md/bereavement-hero.webp');
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: cover;
        animation: heroZoom ease-in-out both;
        animation-timeline: scroll();
        animation-range: 0 100vh;
	}

    @keyframes heroZoom {
        from {
            background-size: 100%;
        }
        to {
            background-size: 108%;
        }
    }

    .blob {
        height: 64px;
        width: 165px;
        color: white;
        background: url('/_V2Container/assets/icons/blob.svg') 100% / contain no-repeat;
        font-size: 19px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-top: 24px;

        &:hover {
            filter: brightness(0.85);
        }
    }

	@media (max-width: 980px) {
		.hero-feature-box { transform: translateY(-24px) }
	}

	@media (max-width: 768px) {

		.hero-feature-box {
			width: 100%;
			position: relative;
			transform: translateY(0);
			margin-block: -8px -96px;
		}

		.hero-img { min-height: 234px }
	}
}

@scope (#steps) {
    padding-block: 120px;

    h2 {
        margin-block: 16px 96px;
    }

    .steps {
        display: flex;
        gap: 24px;
        flex-wrap: wrap;
        margin-bottom: 24px;

        p {
            max-width: 712px;
        }
    }

    .step {
        background-color: var(--__oj2_color_grey_10);
        padding: 32px 24px;
        display: flex;
        border-radius: 16px;
        flex-direction: column;
        gap: 24px;
        flex: 1 1 calc((100% - 48px) / 3);

        p {
            font-weight: 700;
        }
    }

    .button-group {
        width: 100%;
        display: none;
        gap: 16px;
        margin-top: 8px;

        a {
            font-weight: 700;
            border: 2px solid var(--__oj2_color_black);
            padding: 8px 16px;
            border-radius: 80px;
            color: inherit;
            text-align: center;
        }
     
        .default {
            background-color: var(--__oj2_color_black);
            color: white;
        }
    }

 
    
    .step-number {
        font-weight: 700;
        background-color: var(--__oj2_color_black);
        color: white;
        width: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 1;
        border-radius: 100%;
    }

    .footnote {
        font-size: 12px;
    }

    @media (max-width: 768px) {

        & {
            padding-block: 72px;
        }

        h2 {
            margin-bottom: 42px;
        }

        .button-group {
            display: grid;
        }
        
        .steps {
            margin-bottom: 0px;
        }
	}

}

#glossary {

    display: none;

    background-color: var(--__oj2_color_maroon_100);
    & * {
        color: white;
    }

    .accordion-button:after {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10' viewBox='0 0 18 10' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.414 0.29325C9.023-0.09775 8.391-0.09775 8 0.29325L0 8.29325L1.414 9.70725L8.707 2.41425L16 9.70725L17.414 8.29325L9.414 0.29325Z' fill='%23fff'/%3E%3C/svg%3E");
    }

    .accordion-item {
        border-color: rgba(255, 255, 255, 0.32);
    }
}

@scope (#resources) {

    background-color: var(--__oj2_color_grey_10);
    padding-block: 96px;

    h2 {
        margin-block: 16px 32px;
    }

    .resources {
        display: flex;
        gap: 24px;
        flex-wrap: wrap;
    
        h6 {
            font-weight: 700;
        }
    }

    .resource {
        background-color: white;
        padding: 24px;
        border-radius: 16px;
        flex: 1 1 calc((100% - 48px) / 3);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 32px;
        align-content: space-between;
        min-width: 296px;
        color: inherit;
        transition: 0.3s;

        p {
            margin-block: 16px 0;
            max-width: 888px;
        }

        &:hover {
            background-color: var(--__oj2_color_maroon_100);

            * {
                color: white;
            }

            .chevron {
                background-color: white;
            }
        }
    }

    .resource-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;    
    }

    .chevron {
        background-color: black;
        width: 40px;
        height: 40px;
        border-radius: 100%;
        align-self: center;
        margin-right: 8px;
        mask: url(/_V2Container/assets/icons/chevronRightFilled.svg) center/contain no-repeat, linear-gradient(#000 0 0);
        mask-composite: exclude;
        mask-size: 24px;
    }

    @media (max-width: 768px) {

        & {
            padding-block: 72px;
        }

	}

}



@scope (.accordion-section) {
    padding-block: 96px;

    h5 {
        margin: 0 0 24px 0px;
        color: var(--__oj2_color_grey_40);
        font-weight: 700;
    }

    .collapse {
        display: none;

        &.in {
            display: block;
        }
    }

    .collapsing {
        height: 0;
        overflow: hidden;
        -webkit-transition-property: height, visibility;
        transition-property: height, visibility;
        -webkit-transition-duration: .35s;
        transition-duration: .35s
    }

    .accordion-item {
        border-bottom: 1px solid var(--__oj2_color_grey_20);
        
        &:first-child {
            padding-top: 0;
        }

        &:last-child {
            border-bottom: none;
        }
    }

    .accordion-button {
        color: black;
        cursor: pointer;
        padding-right: 100px;
        font-family: ING Me;
        font-weight: 700;
        display: block;
        position: relative;
        padding: 24px;

        &:after {
            content: "";
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10' viewBox='0 0 18 10' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.414 0.29325C9.023-0.09775 8.391-0.09775 8 0.29325L0 8.29325L1.414 9.70725L8.707 2.41425L16 9.70725L17.414 8.29325L9.414 0.29325Z' fill='%23ff6200'/%3E%3C/svg%3E");
            background-position: 50%;
            background-repeat: no-repeat;
            background-size: contain;
            place-items: center;
            width: 18px;
            height: 10px;
            margin-top: auto;
            margin-bottom: auto;
            transition: transform .3s;
            display: grid;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 7px;
        }

        &.collapsed:after {
            transform: rotate(180deg);
        }
    }

    .accordion-content { 

        p:not(:first-child) {
            margin-top: 8px;
        }

        p a {
            color: var(--__oj2_color_violet_100);
            text-decoration: underline;
        }
    }

    .well {
        padding: 24px;
        padding-top: 0;
    }

    .container {
        display: flex;
        flex-direction: row;
        gap: 40px 56px;
    }

    .title {
        width: min(50%, 431px);
    }

    .accordion-wrapper {
        display: flex;
        flex-direction: column;
        flex: 1;
        gap: 48px;
    }

    ul {
        padding-left: 24px;
        margin-top: 8px;
        margin-bottom: 8px;
        list-style-type: disc;
    }

    @media (max-width: 980px) {
        .title {
            width: 212px;
        }
    }

    @media (max-width: 768px) {

        & {
            padding-block: 48px;
        }

        h5 {
            margin-left: 0;
        }

        .container {
            flex-direction: column;
            gap: 40px;
        }

        .title-cell {
            width: 100%;
        }

        .accordion-item, .well {
            padding-inline: 0;
        }
        
        .accordion-button {
            padding-left: 0;
        }
    }
}