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

.edge-asj {
    --edge-asj-bg: #c9d8ca;
    --edge-asj-scroll-height: 300vh;
    --edge-asj-sticky-offset: 0px;
    --edge-asj-motion-height: 100%;
    --edge-asj-motion-top: 0%;
    --edge-asj-intro-width: 46%;
    --edge-asj-item-width: 22vw;
    --edge-asj-item-ratio: 4 / 3;
    --edge-asj-item-gap: 28px;
    --edge-asj-fallback-gap: 72px;
    --edge-asj-fallback-columns: 2;
    background: var(--edge-asj-bg);
    color: #111313;
    isolation: isolate;
    overflow: clip;
    position: relative;
    width: 100%;
}

.edge-asj img {
    border: 0;
    display: block;
    max-width: none;
}

.edge-asj a {
    -webkit-tap-highlight-color: transparent;
}

.edge-asj a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 5px;
}

.edge-asj__scene {
    min-height: 760px;
    padding: 72px;
    position: relative;
    width: 100%;
}

.edge-asj__intro {
    max-width: 820px;
    position: relative;
    width: var(--edge-asj-intro-width);
    z-index: 3;
}

.edge-asj__eyebrow {
    color: #506453;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1.2;
    margin: 0 0 18px;
    text-transform: uppercase;
}

.edge-asj__heading {
    color: #111313;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(42px, 4.35vw, 78px);
    font-weight: 400;
    letter-spacing: -0.035em;
    line-height: 0.98;
    margin: 0;
    max-width: 12ch;
}

.edge-asj__body {
    color: #303532;
    font-size: clamp(16px, 1.25vw, 22px);
    line-height: 1.45;
    margin-top: clamp(26px, 3vw, 50px);
    max-width: 780px;
}

.edge-asj__body > :first-child { margin-top: 0; }
.edge-asj__body > :last-child { margin-bottom: 0; }

.edge-asj__motion-layer {
    height: var(--edge-asj-motion-height);
    left: 0;
    position: absolute;
    top: var(--edge-asj-motion-top);
    width: 100%;
    z-index: 2;
}

.edge-asj__path-field,
.edge-asj__items-wrap {
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;
}

.edge-asj__path-field {
    pointer-events: none;
    z-index: 0;
}

.edge-asj__items-wrap {
    z-index: 1;
}

.edge-asj__decorations {
    height: 100%;
    inset: 0;
    pointer-events: none;
    position: absolute;
    width: 100%;
    z-index: 2;
}

.edge-asj__decoration {
    left: 0;
    position: absolute;
    top: 0;
    transform-origin: 50% 50%;
}

.edge-asj__decoration img {
    display: block;
    height: auto !important;
    max-width: none !important;
    width: 100% !important;
}

.edge-asj__path-svg {
    display: block;
    height: 100%;
    overflow: visible;
    width: 100%;
}

.edge-asj__path-line,
.edge-asj__path-motion {
    fill: none;
    stroke: transparent;
    vector-effect: non-scaling-stroke;
}

.edge-asj--show-path .edge-asj__path-line {
    stroke: rgba(17, 19, 19, 0.25);
    stroke-dasharray: 3 10;
    stroke-linecap: round;
    stroke-width: 2px;
}

.edge-asj__items,
.edge-asj__item {
    list-style: none;
    margin: 0;
    padding: 0;
}

.edge-asj__item {
    align-items: stretch;
    display: flex;
    gap: var(--edge-asj-item-gap);
    position: relative;
}

.edge-asj__visual,
.edge-asj__visual:link,
.edge-asj__visual:visited,
.edge-asj__visual:hover,
.edge-asj__visual:focus,
.edge-asj__visual:active {
    aspect-ratio: var(--edge-asj-item-ratio);
    background: #e8eee8;
    border: 0;
    box-shadow: none;
    color: inherit;
    display: block;
    flex: 0 0 auto;
    overflow: hidden;
    padding: 0;
    position: relative;
    text-decoration: none;
    width: max(var(--edge-asj-item-width), 12rem);
}

.edge-asj__visual--link {
    cursor: pointer;
}

.edge-asj__image {
    height: 100% !important;
    inset: 0;
    max-height: none !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center;
    position: absolute;
    transition: transform 350ms cubic-bezier(0.2, 0.8, 0.2, 1);
    width: 100% !important;
}

.edge-asj__visual--link:hover .edge-asj__image,
.edge-asj__visual--link:focus-visible .edge-asj__image {
    transform: scale(1.025);
}

.edge-asj__item-details {
    align-items: flex-start;
    display: flex;
    flex-flow: column;
    gap: 12px;
    justify-content: center;
    padding-top: 0;
    white-space: nowrap;
}

.edge-asj__skip,
.edge-asj__skip:hover,
.edge-asj__skip:focus,
.edge-asj__skip:active {
    appearance: none;
    background-color: #6e836a;
    border: 0;
    border-radius: 999px;
    bottom: 32px;
    box-shadow: none;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    left: max(5%, 28px);
    line-height: 1;
    margin: 0;
    padding: 12px 18px;
    position: absolute;
    text-decoration: none;
    transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
    z-index: 50;
}

.edge-asj__skip:hover,
.edge-asj__skip:focus-visible {
    background-color: #52664f;
    color: #fff;
    transform: translateY(-2px);
}

.edge-asj--complete .edge-asj__skip,
.edge-asj--skipped .edge-asj__skip {
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
}

.edge-asj__skip:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

.edge-asj__item-label {
    background-color: #fff;
    border-radius: 100em;
    color: #303532;
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    padding: 8px 12px;
}

.edge-asj__item-title {
    color: #111313;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(24px, 2vw, 34px);
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1;
    margin: 0;
}

.edge-asj__editor-empty {
    background: rgba(255, 255, 255, 0.72);
    border: 1px dashed rgba(17, 19, 19, 0.32);
    border-radius: 16px;
    color: #303532;
    margin-top: 52px;
    max-width: 620px;
    padding: 22px 24px;
    position: relative;
    z-index: 5;
}

/* The Osmo-style cinematic scene. */
.edge-asj--motion {
    height: var(--edge-asj-scroll-height);
}

.edge-asj--motion .edge-asj__scene {
    align-items: center;
    display: flex;
    height: calc(100svh - var(--edge-asj-sticky-offset));
    min-height: 680px;
    position: sticky;
    top: var(--edge-asj-sticky-offset);
}

.edge-asj--motion .edge-asj__intro {
    left: max(5%, 28px);
    position: absolute;
    top: clamp(56px, 8vh, 104px);
}

.edge-asj--motion .edge-asj__items,
.edge-asj--motion .edge-asj__item {
    left: 0;
    position: absolute;
    top: 0;
}

.edge-asj--motion .edge-asj__item {
    will-change: filter, opacity, transform;
}

.edge-asj--motion .edge-asj__decoration {
    will-change: opacity, transform;
}

/* Static final composition inside Elementor so editors can position the collage. */
.edge-asj--editor-final {
    height: auto;
}

.edge-asj--editor-final .edge-asj__scene {
    height: min(760px, 82svh);
    min-height: 680px;
    overflow: hidden;
    position: relative;
}

.edge-asj--editor-final .edge-asj__intro {
    left: max(5%, 28px);
    position: absolute;
    top: clamp(56px, 8vh, 104px);
}

.edge-asj--editor-final .edge-asj__items,
.edge-asj--editor-final .edge-asj__item {
    left: 0;
    position: absolute;
    top: 0;
}

.edge-asj--editor-final .edge-asj__skip,
.edge-asj--editor-final .edge-asj__path-field {
    display: none;
}

/* Static presentation in the editor, on mobile/tablet, for reduced motion and if GSAP cannot load. */
.edge-asj--static .edge-asj__scene,
.edge-asj--editor .edge-asj__scene,
.edge-asj--empty .edge-asj__scene,
.edge-asj--loading .edge-asj__scene {
    min-height: 0;
}

.edge-asj--static .edge-asj__motion-layer,
.edge-asj--editor .edge-asj__motion-layer,
.edge-asj--loading .edge-asj__motion-layer {
    height: auto;
    inset: auto;
    position: relative;
    width: 100%;
}

.edge-asj--static .edge-asj__path-field,
.edge-asj--editor .edge-asj__path-field,
.edge-asj--loading .edge-asj__path-field {
    display: none;
}

.edge-asj--static .edge-asj__decorations,
.edge-asj--editor .edge-asj__decorations,
.edge-asj--loading .edge-asj__decorations,
.edge-asj--static .edge-asj__skip,
.edge-asj--editor .edge-asj__skip,
.edge-asj--loading .edge-asj__skip {
    display: none;
}

.edge-asj--static .edge-asj__items-wrap,
.edge-asj--editor .edge-asj__items-wrap,
.edge-asj--loading .edge-asj__items-wrap {
    height: auto;
    inset: auto;
    position: relative;
    width: 100%;
}

.edge-asj--static .edge-asj__items,
.edge-asj--editor .edge-asj__items,
.edge-asj--loading .edge-asj__items {
    display: grid;
    gap: var(--edge-asj-fallback-gap);
    grid-template-columns: repeat(var(--edge-asj-fallback-columns), minmax(0, 1fr));
    margin-top: clamp(56px, 8vw, 120px);
    position: relative;
    z-index: 4;
}

.edge-asj--static .edge-asj__item,
.edge-asj--editor .edge-asj__item,
.edge-asj--loading .edge-asj__item {
    flex-direction: column;
    gap: 18px;
    opacity: 1 !important;
    position: relative;
    transform: none !important;
    visibility: visible !important;
    width: 100%;
}

.edge-asj--static .edge-asj__visual,
.edge-asj--editor .edge-asj__visual,
.edge-asj--loading .edge-asj__visual {
    width: 100%;
}

.edge-asj--static .edge-asj__item-details,
.edge-asj--editor .edge-asj__item-details,
.edge-asj--loading .edge-asj__item-details {
    opacity: 1 !important;
    padding-top: 0;
    transform: none !important;
    visibility: visible !important;
    white-space: normal;
}

@media (max-width: 1024px) {
    .edge-asj {
        --edge-asj-intro-width: 72%;
        --edge-asj-item-width: 34vw;
        --edge-asj-fallback-columns: 2;
    }

    .edge-asj__scene {
        padding: 52px 40px;
    }

    .edge-asj--static .edge-asj__item,
    .edge-asj--editor .edge-asj__item,
    .edge-asj--loading .edge-asj__item {
        align-items: flex-start;
    }
}

@media (max-width: 767px) {
    .edge-asj {
        --edge-asj-intro-width: 100%;
        --edge-asj-item-width: 100%;
        --edge-asj-fallback-columns: 1;
        --edge-asj-fallback-gap: 42px;
        overflow: hidden;
    }

    .edge-asj__scene {
        padding: 40px 20px;
    }

    .edge-asj__heading {
        font-size: clamp(38px, 12vw, 56px);
        max-width: 10ch;
    }

    .edge-asj__body {
        font-size: 16px;
        margin-top: 24px;
    }

    .edge-asj--static .edge-asj__items,
    .edge-asj--editor .edge-asj__items,
    .edge-asj--loading .edge-asj__items {
        margin-top: 52px;
    }

    .edge-asj__item-title {
        font-size: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .edge-asj *,
    .edge-asj *::before,
    .edge-asj *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}