/* ==========================================================================
    FIRST SECTION
   ========================================================================== */


.df-hr__title {
    max-width: 37rem;
}

@media (min-width: 992px) {
    .df-hr__right {
        padding-top: clamp(2rem, 6vw, 5.5rem);
    }
}

.df-hr__media {
    display: block;
    width: 100%;
    border-radius: clamp(60px,9vw,120px);
    object-fit: cover;
}

.df-hr__media--dark {
    max-width: 860px;
    aspect-ratio: 860 / 560;
}

.df-hr__figure {
    width: 100%;
    max-width: 430px;
}

.df-hr__pink {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
}

.df-hr__pink-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: clamp(60px,9vw,120px);
    object-fit: cover;
}

.df-hr__dot {
    position: absolute;
    left: 30%;
    top: 70%;
    width: 14px;
    height: 14px;
    border-radius: var(--radius-full);
    background: var(--red-D11019);
    transform: translate(-50%, -50%);
    z-index: 2;
}

    .df-hr__dot::before {
        content: "";
        position: absolute;
        inset: -6px;
        border-radius: var(--radius-full);
        background: var(--neutral-FFFFFF);
        opacity: 0.25;
        animation: df-hr-pulse 2s ease-out infinite;
    }

@keyframes df-hr-pulse {
    0% {
        transform: scale(0.6);
        opacity: 0.45;
    }

    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}

.df-hr__line-v,
.df-hr__line-h {
    position: absolute;
    background: var(--red-F53D46);
    z-index: 1;
}

.df-hr__line-v {
    left: 30%;
    top: 70%;
    width: 2px;
    height: 48%;
    transform: translateX(-50%);
}

.df-hr__line-h {
    right: 47%;
    top: 118%;
    width: 23%;
    height: 2px;
    transform: translateY(-50%);
}

.df-hr__cta-dot {
    position: absolute;
    right: 46%;
    top: 118%;
    width: 9px;
    height: 9px;
    border-radius: var(--radius-full);
    background: var(--red-F53D46);
    transform: translate(-50%, -50%);
    z-index: 2;
}

.df-hr__cta {
    position: absolute;
    top: 118%;
    left: calc(54% + 14px);
    transform: translateY(-50%);
    white-space: nowrap;
    font-weight: var(--fw-semibold);
    text-decoration: underline;
    text-underline-offset: 4px;
    color: var(--red-F53D46);
}

    .df-hr__cta:hover {
        color: var(--neutral-1A1818);
    }

.df-hr__cta-space {
    width: 100%;
    aspect-ratio: 430 / 108;
}


/* ==========================================================================
   SECOND SECTION
   ========================================================================== */

.df-tl {
    padding-block: var(--section-md);
}

.df-tl__item + .df-tl__item {
    margin-top: clamp(2rem, 5vw, 3.5rem);
}

.df-tl__head {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    font-size: var(--df-text-fs-44);
    line-height: var(--lh-tight);
}

.df-tl__title {
    text-align: right;
    line-height: var(--lh-tight);
}

.df-tl__leader {
    flex: none;
    width: clamp(2.5rem, 8vw, 8.5rem);
    height: 1px;
    align-self: unset;
    background: repeating-linear-gradient(to right, var(--red-BF0D16) 0px, var(--red-BF0D16) 6px, transparent 6px, transparent 12px);
    margin-top: 0.58em;
    margin-inline: 0.85rem 0.6rem;
}

.df-tl__dot {
    flex: none;
    position: relative;
    width: 18px;
    height: 18px;
    border: 1px solid var(--red-BF0D16);
    border-radius: var(--radius-full);
    background: #f53d461a;
    margin-top: calc(0.58em - 0.525rem);
}

    .df-tl__dot::before {
        content: "";
        position: absolute;
        inset: 0;
        left: 1px;
        margin: auto;
        width: 0.4rem;
        height: 0.4rem;
        border-radius: var(--radius-full);
        background: var(--red-BF0D16);
    }

.df-tl__body p {
    font-size: var(--df-text-fs-18);
    line-height: var(--lh-relaxed);
}

    .df-tl__body p + p {
        margin-top: var(--space-5);
    }

@media (max-width: 991.98px) {
    .df-tl__head {
        justify-content: flex-start;
        margin-bottom: var(--space-3);
    }

    .df-tl__title {
        text-align: left;
    }

    .df-tl__title br {
        display:none;
    }

    .df-tl__leader{
        flex:1;
    }
}

.df-pl {
    margin-bottom: clamp(60px, 6vw, 120px);
}