/* Production hero: static campaign photography with a light 2D brand motion. */
.section.hero-section {
    position: relative;
    width: 100% !important;
    height: 100vh !important;
    min-height: 620px;
    overflow: hidden;
    background: #eda7b9;
}

.hero-static-media,
.hero-static-media img,
.hero-static-shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-static-media {
    z-index: 1;
    margin: 0;
}

.hero-static-media img {
    display: block;
    object-fit: cover;
    object-position: center center;
}

.hero-static-shade {
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(239, 166, 188, .54) 0%, rgba(239, 166, 188, .08) 48%, rgba(26, 24, 33, .04) 100%);
}

.hero-content-overlay {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hero-content-overlay .header,
.hero-content-overlay .footer,
.hero-content-overlay a,
.hero-content-overlay button {
    pointer-events: auto;
}

.hero-static-content .header a.logo svg {
    display: block;
    width: 250px;
    height: 85px;
}

.hero-static-content .hero-text-container {
    height: calc(100% - var(--header-height, 110px));
}

.hero-static-row {
    min-height: 82vh;
    justify-content: center;
}

.hero-static-copy {
    color: #1e1d27;
    text-align: left;
    padding-top: 2rem;
    padding-left: 15px;
    transform: none;
}

.hero-main-title {
    max-width: 15ch;
    margin: 0 0 .35em;
    color: inherit;
    font-size: clamp(2rem, 3vw, 3.3rem);
    font-weight: 700;
    line-height: 1.05;
    opacity: 0;
    transform: translateY(18px);
    animation: cocodiaHeroCopyIn .8s cubic-bezier(.2,.7,.2,1) .2s forwards;
}

.hero-static-copy .hero-main-title {
    margin-inline: auto;
}

.hero-main-subtitle {
    max-width: 28rem;
    color: inherit;
    font-size: clamp(1.1rem, 1.65vw, 1.55rem);
    line-height: 1.45;
    opacity: 0;
    transform: translateY(14px);
    animation: cocodiaHeroCopyIn .8s cubic-bezier(.2,.7,.2,1) .42s forwards;
}

.section.hero-section .hero-main-subtitle {
    padding-inline: 0 !important;
    margin-inline: auto !important;
}

.hero-main-subtitle p {
    margin: 0;
}

/* Disable the legacy cursor injected by the site's Additional CSS. */
.section.hero-section .hero-main-subtitle::before,
.section.hero-section .hero-main-subtitle::after {
    content: none !important;
    animation: none !important;
}

.hero-main-subtitle p:last-child::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: .95em;
    margin-inline-start: .35em;
    vertical-align: -.08em;
    position: relative;
    top: 1px;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 0 8px rgba(255, 255, 255, .28);
    animation: cocodiaCaretBlink 1.5s steps(1, end) infinite;
}

.hero-brand-mark {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: clamp(2.4rem, 6vh, 5.6rem);
    width: min(60vw, 850px);
    transform: translate(-50%, 24px) scale(.97);
    opacity: 0;
    filter: drop-shadow(0 14px 22px rgba(32, 25, 29, .18));
    animation: cocodiaBrandIn 1.05s cubic-bezier(.16,.75,.2,1) .55s forwards;
}

.hero-brand-mark img {
    display: block;
    width: 100%;
    height: auto;
}

@keyframes cocodiaHeroCopyIn {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes cocodiaBrandIn {
    to { opacity: .92; transform: translate(-50%, 0) scale(1); }
}

@keyframes cocodiaCaretBlink {
    0%, 48% { opacity: 1; }
    49%, 100% { opacity: 0; }
}

@media (max-width: 767.98px) {
    .section.hero-section { min-height: 560px; }
    .hero-static-media img { object-position: 58% center; }
    .hero-static-shade {
        background: linear-gradient(180deg, rgba(239, 166, 188, .38), rgba(239, 166, 188, .05) 55%, rgba(239, 166, 188, .28));
    }
    .hero-static-row { align-items: flex-start !important; min-height: 78vh; padding-top: 26vh; }
    .hero-static-row { justify-content: flex-start; }
    .hero-static-copy { padding-left: 15px; padding-right: 20%; text-align: left; transform: none; }
    .hero-static-copy .hero-main-title,
    .section.hero-section .hero-main-subtitle { margin-inline: 0 !important; }
    .hero-main-title { font-size: clamp(1.75rem, 8vw, 2.5rem); }
    .hero-brand-mark { width: 88vw; bottom: 8vh; }
    .hero-static-content .header a.logo svg { width: 180px; height: auto; }
}

@media (min-width: 768px) {
    .hero-static-row {
        align-items: flex-start !important;
        justify-content: flex-start;
        padding-top: clamp(70px, 8vh, 100px);
    }

    .hero-brand-mark {
        bottom: calc(clamp(2.4rem, 6vh, 5.6rem) - 40px);
    }

    .hero-static-copy {
        flex: 0 0 600px;
        max-width: 600px;
        transform: translate(110px, 20px);
    }

    .hero-static-copy .hero-main-title,
    .section.hero-section .hero-static-copy .hero-main-subtitle {
        width: 100%;
        max-width: none;
        margin-inline: 0 !important;
    }

    /* Keep the Arabic hero copy in the same physical position as EN. */
    body.rtl .hero-static-row {
        direction: ltr;
    }

    body.rtl .hero-static-copy {
        direction: rtl;
        text-align: right;
        transform: translate(-40px, 20px);
    }

    body.rtl .hero-static-copy .hero-main-title,
    body.rtl .hero-static-copy .hero-main-subtitle,
    body.rtl .hero-static-copy .hero-main-subtitle p {
        text-align: right;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-main-title,
    .hero-main-subtitle,
    .hero-brand-mark {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .hero-brand-mark { transform: translateX(-50%); }
    .hero-main-subtitle p:last-child::after { animation: none; }
}