/* HP Cairo contacts/map block
   File: assets/css/contacts.css
   Version: 0.1.58
*/

.hpc-contacts {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 0%, rgba(226, 181, 104, 0.075), transparent 34%),
        linear-gradient(180deg, #050303 0%, #0b0604 50%, #050303 100%);
    color: #fff6e5;
    padding: clamp(44px, 5vw, 76px) 0 0;
    border-top: 1px solid rgba(232, 190, 115, 0.10);
}

.hpc-contacts::before {
    content: "CAIRO";
    position: absolute;
    z-index: -2;
    right: -0.08em;
    top: 22px;
    color: rgba(255, 226, 162, 0.020);
    -webkit-text-stroke: 1px rgba(255, 226, 162, 0.035);
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
    font-size: clamp(96px, 18vw, 280px);
    font-weight: 900;
    line-height: 0.92;
    letter-spacing: 0.06em;
    pointer-events: none;
}

.hpc-contacts::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(232, 190, 115, 0.06), transparent 19%, transparent 81%, rgba(232, 190, 115, 0.06)),
        radial-gradient(circle at 50% 0%, rgba(255, 226, 162, 0.08), transparent 36%);
}

.hpc-contacts__inner {
    width: min(100% - 72px, 1500px);
    margin: 0 auto;
}

.hpc-contacts__head {
    display: grid;
    justify-items: center;
    text-align: center;
    max-width: 1040px;
    margin: 0 auto 30px;
}

.hpc-contacts__title {
    position: relative;
    width: min(100%, 980px);
    margin: 0;
    display: grid;
    grid-template-columns: minmax(44px, 1fr) auto minmax(44px, 1fr);
    align-items: center;
    gap: clamp(16px, 2.6vw, 34px);
    color: #fffaf0;
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
    font-size: clamp(34px, 3.55vw, 56px);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.043em;
    text-shadow: 0 5px 28px rgba(0,0,0,0.85), 0 0 28px rgba(232,190,115,0.10);
}

.hpc-contacts__title::before,
.hpc-contacts__title::after {
    content: "";
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232,190,115,0.34));
    box-shadow: 0 0 18px rgba(232,190,115,0.12);
}

.hpc-contacts__title::after {
    background: linear-gradient(90deg, rgba(232,190,115,0.34), transparent);
}

.hpc-contacts__statement {
    width: min(100%, 820px);
    margin: 18px auto 0;
    display: grid;
    gap: 8px;
}

.hpc-contacts__eyebrow {
    color: #f1d39a;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hpc-contacts__statement p {
    margin: 0;
    color: rgba(255, 244, 223, 0.86);
    font-size: clamp(15px, 1.18vw, 18px);
    font-weight: 600;
    line-height: 1.55;
    text-wrap: balance;
}

.hpc-contacts__mapShell {
    position: relative;
    min-height: 440px;
    border-top: 1px solid rgba(232, 190, 115, 0.14);
    background: #050303;
}

.hpc-contacts__mapShell::before,
.hpc-contacts__mapShell::after {
    content: "";
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    height: 72px;
    pointer-events: none;
}

.hpc-contacts__mapShell::before {
    top: 0;
    background: linear-gradient(180deg, rgba(5,3,3,0.92), transparent);
}

.hpc-contacts__mapShell::after {
    bottom: 0;
    background: linear-gradient(0deg, rgba(5,3,3,0.92), transparent);
}

.hpc-contacts__mapFrame {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 440px;
    overflow: hidden;
    background: #050303;
}

.hpc-contacts__mapFrame iframe {
    display: block;
    width: 100%;
    height: 440px;
    border: 0;
    filter: grayscale(1) invert(0.88) brightness(0.48) contrast(1.08) saturate(0.55);
}

.hpc-contacts__mapCard {
    position: absolute;
    z-index: 4;
    left: max(36px, calc((100vw - 1500px) / 2 + 36px));
    top: 50%;
    width: min(390px, calc(100% - 72px));
    transform: translateY(-50%);
    padding: 26px 26px 24px;
    border: 1px solid rgba(232,190,115,0.24);
    border-radius: 5px;
    background:
        radial-gradient(circle at 12% 0%, rgba(232,190,115,0.12), transparent 36%),
        linear-gradient(145deg, rgba(255,255,255,0.050), rgba(255,255,255,0.014)),
        rgba(6, 4, 3, 0.88);
    box-shadow: 0 30px 90px rgba(0,0,0,0.48), inset 0 1px 0 rgba(255,255,255,0.045);
    backdrop-filter: blur(8px);
}

.hpc-contacts__mapCard::before {
    content: "";
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(232,190,115,0.09);
    border-radius: 4px;
    pointer-events: none;
}

.hpc-contacts__cardKicker {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 14px;
    border: 1px solid rgba(232,190,115,0.18);
    border-radius: 999px;
    background: rgba(0,0,0,0.22);
    color: #f1d39a;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.hpc-contacts__mapCard h3 {
    margin: 18px 0 0;
    color: #fffaf0;
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.035em;
}

.hpc-contacts__mapCard p {
    margin: 14px 0 0;
    color: rgba(255,244,223,0.78);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
}

.hpc-contacts__facts {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.hpc-contacts__fact {
    display: grid;
    gap: 4px;
    padding-top: 12px;
    border-top: 1px solid rgba(232,190,115,0.10);
}

.hpc-contacts__fact span {
    color: rgba(241,211,154,0.86);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hpc-contacts__fact a,
.hpc-contacts__fact strong {
    color: #fff7e7;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.45;
    text-decoration: none;
}

.hpc-contacts__actions {
    display: grid;
    grid-template-columns: 1fr 0.72fr;
    gap: 10px;
    margin-top: 20px;
}

.hpc-contacts__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid rgba(232,190,115,0.24);
    border-radius: 4px;
    background: rgba(0,0,0,0.22);
    color: #fff3da;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.hpc-contacts__button--primary {
    border-color: rgba(232,190,115,0.42);
    box-shadow: 0 0 28px rgba(232,190,115,0.08);
}

.hpc-contacts__button:hover {
    background: rgba(232,190,115,0.08);
    border-color: rgba(255,226,162,0.54);
    transform: translateY(-1px);
}

.hpc-contacts__button svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

@media (max-width: 900px) {
    .hpc-contacts__mapShell {
        display: grid;
        min-height: 0;
    }

    .hpc-contacts__mapCard {
        position: relative;
        left: auto;
        top: auto;
        width: min(100% - 28px, 560px);
        transform: none;
        margin: 0 auto 18px;
        order: 1;
    }

    .hpc-contacts__mapFrame {
        height: 360px;
        order: 2;
    }

    .hpc-contacts__mapFrame iframe {
        height: 360px;
    }
}

@media (max-width: 640px) {
    .hpc-contacts {
        padding-top: 46px;
    }

    .hpc-contacts__inner {
        width: min(100% - 28px, 560px);
    }

    .hpc-contacts__title {
        font-size: clamp(30px, 8.8vw, 42px);
        letter-spacing: -0.045em;
        gap: 12px;
        grid-template-columns: minmax(16px, 1fr) auto minmax(16px, 1fr);
    }

    .hpc-contacts__statement p {
        font-size: 14px;
    }

    .hpc-contacts__mapCard {
        padding: 22px 18px;
    }

    .hpc-contacts__mapCard h3 {
        font-size: 24px;
    }

    .hpc-contacts__actions {
        grid-template-columns: 1fr;
    }

    .hpc-contacts__mapFrame,
    .hpc-contacts__mapFrame iframe {
        height: 340px;
    }
}