:root {
    --birthday-gold: #af8b39;
    --birthday-ink: #010101;
    --birthday-field: #efefef;
    --birthday-field-text: #777474;
}

* { box-sizing: border-box; }

html { background: #fff; }

body {
    min-width: 320px;
    margin: 0;
    background: #fff;
    color: var(--birthday-ink);
    font-family: 'Montserrat', Arial, sans-serif;
}

button,
input,
textarea { font: inherit; }

button { cursor: pointer; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--birthday-gold);
    outline-offset: 3px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.birthday-page { overflow: hidden; }

.birthday-intro {
    position: relative;
    isolation: isolate;
    height: 1204px;
    overflow: hidden;
}

.birthday-intro__fade {
    position: absolute;
    z-index: 1;
    right: 0;
    left: 0;
    content: '';
    pointer-events: none;
}

.birthday-intro__fade--top {
    top: 0;
    height: 650px;
    background: linear-gradient(to bottom, #fff 0 25%, rgba(255, 255, 255, 0) 100%);
}

.birthday-intro__fade--bottom {
    top: 726px;
    height: 434px;
    background: linear-gradient(to top, #fff 0 25%, rgba(255, 255, 255, 0) 100%);
}

.birthday-header {
    position: relative;
    z-index: 2;
    height: 100%;
}

.anniversary-logo {
    position: absolute;
    top: 46px;
    left: 50%;
    width: 216px;
    height: 46px;
    transform: translateX(-50%);
}

.anniversary-logo img { position: absolute; display: block; }
.anniversary-logo__finex { top: 0; left: 0; width: 124.88px; height: 45.03px; }
.anniversary-logo__divider { position: absolute; top: 0; left: 146px; width: 1px; height: 45px; background: var(--birthday-gold); }
.anniversary-logo__mark { top: 0; left: 166.8px; width: 23.29px; height: 33.72px; }
.anniversary-logo__year { top: 0; left: 190.6px; width: 25.35px; height: 45px; }
.anniversary-logo__caption { top: 39.9px; left: 172.1px; width: 16.34px; height: 6.06px; }

.birthday-header__line {
    position: absolute;
    top: 137px;
    left: 50%;
    width: min(1399px, calc(100% - 80px));
    height: 1px;
    transform: translateX(-50%);
    background: #000;
}

.birthday-header h1 {
    position: absolute;
    top: 182px;
    left: 50%;
    width: min(100% - 40px, 900px);
    margin: 0;
    transform: translateX(-50%);
    color: var(--birthday-gold);
    font-size: 36px;
    font-weight: 400;
    letter-spacing: 2.88px;
    line-height: 50px;
    text-align: center;
    text-transform: uppercase;
}

.birthday-intro__hero {
    position: absolute;
    z-index: 0;
    top: 70px;
    left: 50%;
    width: max(100%, 1920px);
    height: 1075px;
    transform: translateX(-50%);
}

.birthday-intro__hero img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.birthday-intro__text {
    position: absolute;
    z-index: 2;
    top: 1020px;
    left: 50%;
    width: min(1283px, calc(100% - 48px));
    margin: 0;
    transform: translateX(-50%);
    color: #010101;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 1.92px;
    line-height: normal;
    text-align: center;
}

.gift-section {
    width: 1280px;
    margin: 0 auto;
    padding-bottom: 51px;
}

.gift-grid {
    display: grid;
    grid-template-columns: repeat(3, 400px);
    gap: 48px 40px;
}

.gift-card {
    position: relative;
    display: flex;
    height: 733px;
    min-width: 0;
    flex-direction: column;
}

.gift-card:nth-child(4) { transform: translateX(175px); }
.gift-card:nth-child(5) { transform: translateX(264px); }

.gift-card__visual {
    position: relative;
    width: 400px;
    height: 519px;
    overflow: hidden;
    border-radius: 10px;
    background: #28231d;
}

.gift-card__visual > img {
    position: absolute;
    display: block;
    max-width: none;
}

.gift-card--yacht-photo .gift-card__visual > img { top: -26.01%; left: 0; width: 111%; height: 152.09%; }
.gift-card--charity .gift-card__visual > img { top: -.06%; left: -27.07%; width: 194.32%; height: 100.06%; }
.gift-card--interior-photo .gift-card__visual > img { top: -9.93%; left: 0; width: 100%; height: 115.29%; }
.gift-card--excursion .gift-card__visual > img { top: -17.11%; left: -123.14%; width: 292.01%; height: 119.44%; }
.gift-card--d13-meeting-room .gift-card__visual > img { top: 0; left: -54.27%; width: 181.63%; height: 100%; }

.gift-card__shade {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 225px;
    border-radius: 10px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000);
}

.gift-card h2 {
    position: absolute;
    right: 15px;
    bottom: 21px;
    left: 19px;
    z-index: 1;
    margin: 0;
    color: #fff;
    font-size: 21px;
    font-weight: 400;
    letter-spacing: 1.68px;
    line-height: 24px;
    text-transform: uppercase;
}

.gift-card--yacht-photo h2 { line-height: 21px; }

.gift-card__button {
    width: 400px;
    height: 40px;
    margin-top: 20px;
    border: 0;
    background: var(--birthday-gold);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .88px;
    line-height: 1;
    text-transform: uppercase;
}

.gift-card__button:hover { background: #9b792e; }

.gift-card__description {
    width: 397px;
    height: 135px;
    margin: 19px 0 0;
    color: #000;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .96px;
    line-height: normal;
}

.birthday-page.is-claimed .gift-card__button {
    cursor: not-allowed;
    opacity: .62;
}

.modal {
    position: fixed;
    z-index: 30;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal.is-open { display: flex; }

.modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .35);
}

.modal__dialog {
    position: relative;
    z-index: 1;
    width: 550px;
    max-width: 100%;
    background: #fff;
    box-shadow: 0 16px 45px rgba(0, 0, 0, .12);
}

.modal__dialog--form {
    min-height: 434px;
    padding: 25px 50px 30px;
}

.modal__close {
    display: none;
    border: 0;
    background: transparent;
    padding: 0;
}

.modal__close img { display: block; width: 100%; height: 100%; }

.birthday-form h2 {
    min-height: 17px;
    margin: 0 0 27px;
    color: var(--birthday-gold);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1.12px;
    line-height: 17px;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.birthday-form__field {
    position: relative;
    display: block;
    height: 30px;
    margin-top: 18px;
}

.birthday-form__field:first-of-type { margin-top: 0; }

.birthday-form__field input,
.birthday-form__field textarea {
    display: block;
    width: 100%;
    height: 30px;
    padding: 0 20px;
    border: 0;
    border-radius: 0;
    background: var(--birthday-field);
    color: var(--birthday-field-text);
    font-family: 'Albert Sans', Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .96px;
    line-height: 30px;
    outline: 0;
}

.birthday-form__field input::placeholder,
.birthday-form__field textarea::placeholder { color: var(--birthday-field-text); opacity: 1; }

.birthday-form__field--comment { height: 66px; }

.birthday-form__field--comment textarea {
    height: 66px;
    padding-top: 8px;
    line-height: normal;
    resize: none;
}

.birthday-form__field input[type='date'] { color: transparent; }
.birthday-form__field input[type='date']:valid { color: var(--birthday-field-text); }
.birthday-form__date-placeholder {
    position: absolute;
    top: 0;
    left: 20px;
    color: var(--birthday-field-text);
    font-family: 'Albert Sans', Arial, sans-serif;
    font-size: 12px;
    letter-spacing: .96px;
    line-height: 30px;
    pointer-events: none;
}
.birthday-form__field input[type='date']:valid + .birthday-form__date-placeholder { display: none; }

.birthday-form__consent {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    color: #aaa;
    cursor: pointer;
    font-family: 'Albert Sans', Arial, sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .8px;
    line-height: 12px;
}

.birthday-form__consent input {
    position: relative;
    width: 10px;
    height: 10px;
    margin: 0;
    border: 1px solid #aaa;
    border-radius: 0;
    appearance: none;
    background: transparent;
}

.birthday-form__consent input:checked::after {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 4px;
    height: 4px;
    content: '';
    background: #aaa;
}

.birthday-form__error {
    display: none;
    margin: 6px 0 -6px;
    color: #b12323;
    font-family: 'Albert Sans', Arial, sans-serif;
    font-size: 10px;
    line-height: 12px;
}

.birthday-form__error:not(:empty) { display: block; }

.birthday-form__submit {
    width: 108px;
    height: 30px;
    margin-top: 17px;
    border: 0;
    background: var(--birthday-gold);
    color: #fff;
    font-family: 'Manrope', Arial, sans-serif;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: .34px;
    line-height: 30px;
    text-align: center;
}

.birthday-form__submit:hover { background: #9b792e; }
.birthday-form__submit:disabled { cursor: wait; opacity: .6; }

.modal__dialog--message {
    display: flex;
    width: 550px;
    min-height: 222px;
    padding: 40px 45px 34px;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.modal__dialog--message h2 {
    margin: 0;
    color: var(--birthday-field-text);
    font-family: 'Albert Sans', Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .96px;
    line-height: normal;
}

.modal__dialog--message .birthday-form__submit { margin-top: 22px; }

.modal__dialog--claimed h2 {
    color: var(--birthday-gold);
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.modal__dialog--claimed p {
    margin: 16px 0 0;
    color: var(--birthday-field-text);
    font-family: 'Albert Sans', Arial, sans-serif;
    font-size: 12px;
    letter-spacing: .8px;
    line-height: 1.35;
}

.birthday-footer {
    height: 49px;
    background: #efefef url('/birthday-20/img/footer.svg') center / 100% 100% no-repeat;
}

.birthday-footer__inner {
    display: flex;
    width: 1280px;
    height: 100%;
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
}

.birthday-footer p {
    margin: 0;
    color: #17161c;
    font-family: 'Manrope', Arial, sans-serif;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 1.36px;
}

.birthday-footer__socials {
    display: flex;
    margin-right: 76px;
    align-items: center;
    gap: 18px;
}

.birthday-footer__socials a { display: block; height: 30px; }
.birthday-footer__socials img { display: block; height: 30px; }
.birthday-footer__socials a:first-child img { width: 52px; }
.birthday-footer__socials a:last-child img { width: 30px; }

@media (max-width: 1400px) and (min-width: 761px) {
    .birthday-intro { height: 900px; }
    .birthday-header h1 { top: 135px; font-size: 28px; line-height: 38px; }
    .birthday-header__line { top: 108px; }
    .anniversary-logo { top: 30px; transform: translateX(-50%) scale(.78); transform-origin: top center; }
    .birthday-intro__hero { top: 50px; height: 760px; }
    .birthday-intro__fade--top { height: 460px; }
    .birthday-intro__fade--bottom { top: 514px; height: 307px; }
    .birthday-intro__text { top: 758px; font-size: 17px; letter-spacing: 1.36px; }
    .gift-section { width: 840px; }
    .gift-grid { grid-template-columns: repeat(2, 400px); }
    .gift-card:nth-child(4), .gift-card:nth-child(5) { transform: none; }
    .birthday-footer__inner { width: 840px; }
}

@media (max-width: 760px) {
    .birthday-intro { height: 470px; }
    .anniversary-logo {
        top: 47px;
        width: 166px;
        height: 36px;
        transform: translateX(-50%) scale(.7685);
        transform-origin: top center;
    }
    .birthday-header__line { top: 117px; width: calc(100% - 40px); }
    .birthday-header h1 {
        top: 136px;
        width: calc(100% - 40px);
        font-size: 12px;
        letter-spacing: .96px;
        line-height: 16px;
    }
    .birthday-intro__hero {
        top: 158px;
        width: 100%;
        height: 210px;
    }
    .birthday-intro__fade--top { top: 136px; height: 147px; }
    .birthday-intro__fade--bottom { top: 231px; height: 137px; }
    .birthday-intro__text {
        top: 348px;
        width: calc(100% - 40px);
        font-size: 10px;
        letter-spacing: .8px;
        line-height: normal;
    }
    .birthday-intro__desktop-break { display: none; }
    .gift-section { width: 280px; padding-bottom: 54px; }
    .gift-grid { display: block; }
    .gift-card {
        height: auto;
        margin-bottom: 30px;
        transform: none !important;
    }
    .gift-card__visual { width: 280px; height: 364px; }
    .gift-card__shade { height: 158px; }
    .gift-card h2 {
        right: 9px;
        bottom: 22px;
        left: 14px;
        font-size: 16px;
        letter-spacing: 1.28px;
        line-height: 21px;
    }
    .gift-card__button { width: 280px; height: 28px; margin-top: 15px; font-size: 11px; line-height: 28px; }
    .gift-card__description {
        width: 279px;
        height: auto;
        min-height: 0;
        margin-top: 12px;
        font-size: 10px;
        letter-spacing: .8px;
        line-height: normal;
    }
    .gift-card--interior-photo .gift-card__description,
    .gift-card--d13-meeting-room .gift-card__description { font-size: 12px; letter-spacing: .96px; }
    .modal { padding: 10px; }
    .modal__dialog--form {
        width: 334px;
        max-width: calc(100vw - 41px);
        min-height: 442px;
        padding: 25px 21px 19px;
    }
    .modal__close {
        position: absolute;
        z-index: 1;
        top: 25px;
        right: 13px;
        display: block;
        width: 14px;
        height: 14px;
    }
    .birthday-form h2 {
        min-height: 34px;
        margin-bottom: 26px;
        line-height: 17px;
    }
    .birthday-form__field { width: 288px; max-width: 100%; }
    .birthday-form__consent { margin-top: 21px; }
    .birthday-form__field input,
    .birthday-form__field textarea { padding-right: 12px; padding-left: 12px; }
    .birthday-form__date-placeholder { left: 12px; }
    .modal__dialog--message { min-height: 210px; padding: 30px 25px; }
    .modal__dialog--message:not(.modal__dialog--claimed) {
        width: 334px;
        max-width: calc(100vw - 42px);
        min-height: 208px;
        height: 208px;
        padding: 37px 20px 27px;
        justify-content: flex-start;
    }
    .modal__dialog--message:not(.modal__dialog--claimed) .birthday-form__submit { margin-top: 43px; }
    .birthday-footer {
        height: 79px;
        margin-top: 0;
        background-size: auto 100%;
    }
    .birthday-footer__inner {
        width: calc(100% - 40px);
        padding-top: 34px;
        align-items: flex-start;
        justify-content: space-between;
    }
    .birthday-footer p { font-size: 17px; letter-spacing: 1.36px; }
    .birthday-footer__socials { margin-right: 0; gap: 25px; }
    .birthday-footer__socials a { height: 25px; }
    .birthday-footer__socials img { height: 25px; }
    .birthday-footer__socials a:first-child img { width: 43px; }
    .birthday-footer__socials a:last-child img { width: 25px; }
}