/* ============================================================
   CONTACT US
   Single gradient card with left contact info + right form.
   Reuses the gwp-homepage design system (--gwp-* tokens).
   ============================================================ */

.cu-page {
    background-color: #ffffff;
    padding: 100px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 1440px) {
    .cu-page { padding: 100px 64px; }
}

.cu-page__container {
    width: 100%;
    max-width: 1290px;
    margin: 0 auto;
}

/* ---- The gradient card ---- */
.cu-card {
    position: relative;
    overflow: hidden;
    border: 2px solid #f2f6ff;
    border-radius: 32px;
    background: linear-gradient(102.48deg, #31356e 22.43%, #585fbe 95.03%);
    padding: 38px 55px;
    min-height: 691px;
    color: #ffffff;
}

/* ---- Decorative ring outlines ----
   Reuses .gwp-form__ring from style-homepage-gwp.css; only positions,
   sizes and opacities are overridden to match the contact card. */
.cu-card__ring--tl {
    position: absolute;
    box-sizing: border-box;
    width: 497px;
    height: 497px;
    top: -126px;
    left: -167px;
    border-width: 74.55px;
    border-color: rgba(255, 255, 255, 0.05);
}

.cu-card__ring--br {
    position: absolute;
    box-sizing: border-box;
    width: 529px;
    height: 529px;
    top: 328px;
    left: 910px;
    border-width: 79.35px;
    border-color: rgba(255, 255, 255, 0.1);
}

/* ---- Inner two-column layout ---- */
.cu-card__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 60px;
    flex-wrap: nowrap;
    min-width: 0;
}

@media (min-width: 1400px) {
    .cu-card__inner { gap: 137px; }
}

/* LEFT COLUMN — Contact info */

.cu-card__info {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 604px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    min-height: 614px;
    justify-content: center;
}

/* Allow the info column and its rows to shrink inside their flex parents so long
   strings (like the address) can wrap instead of pushing the card wider. */
.cu-info-block { min-width: 0; max-width: 100%; }
.cu-info-block__row { min-width: 0; max-width: 100%; }

.cu-card__mascot {
    width: 130px;
    height: 129px;
    display: block;
    object-fit: contain;
    flex-shrink: 0;
    max-width: none;
}

.cu-info-block {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* ---- Rows of contact items — flex packed left ---- */
.cu-info-block__row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    column-gap: 30px;
    row-gap: 20px;
}

.cu-info-block__row--wide {
    column-gap: 90px;
}

.cu-info-block__row > .cu-info__item { min-width: 0; }

/* ---- Single contact item ---- */
.cu-info__item {
    display: inline-flex;
    align-items: center;
    gap: 22px;
    text-decoration: none;
    color: #ffffff;
    min-width: 0;
}

.cu-info__item--address {
    align-items: center;
    gap: 22px;
}

/* Address text is the only wrapping label — allow it to shrink inside its flex parent */
.cu-info__item--address .cu-info__text--plain { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }

/* ---- Icon badge ---- */
.cu-info__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 128px;
    background-color: #585fbe;
    border: 1px solid #ffffff;
    color: var(--gwp-primary);
    flex-shrink: 0;
}

.cu-info__icon .bi {
    font-size: 22px;
    line-height: 1;
}

/* Live Chat icon has no filled circle */
.cu-info__icon--plain {
    background-color: transparent;
    border: none;
    width: 50px;
    height: 50px;
    color: var(--gwp-primary);
}

.cu-info__icon--plain .bi {
    font-size: 34px;
}

/* ---- Link text ---- */
.cu-info__text {
    font-family: 'Plus Jakarta Sans', var(--gwp-font-title);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.2;
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-transform: capitalize;
    white-space: nowrap;
}

.cu-info__text--plain {
    font-weight: 600;
    text-decoration: none;
    white-space: normal;
}

.cu-info__item:hover .cu-info__text {
    color: var(--gwp-primary);
}

/* Social platforms */

.cu-social {
    display: flex;
    flex-direction: column;
    gap: 19px;
    margin-top: 20px;
}

.cu-social__label {
    font-family: 'Plus Jakarta Sans', var(--gwp-font-title);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.2;
    color: #ffffff;
    margin: 0;
    text-transform: capitalize;
}

.cu-social__list {
    display: flex;
    align-items: center;
    gap: 14.65px;
    padding: 0;
    margin: 0;
}

.cu-social__list li { list-style: none; }

.cu-social__list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--gwp-primary);
    text-decoration: none;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.cu-social__list a .bi {
    font-size: 28px;
    line-height: 1;
}

.cu-social__list a:hover { opacity: 0.85; transform: translateY(-1px); color: var(--gwp-primary); }

/* RIGHT COLUMN — White form card */

.cu-card__form-wrap {
    flex: 0 0 442px;
    max-width: 442px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cu-form {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.cu-form__title {
    font-family: 'Plus Jakarta Sans', var(--gwp-font-title);
    font-weight: 700;
    font-size: 22px !important;
    line-height: 1.2;
    color: var(--gwp-heading);
    opacity: 0.9;
    margin: 0;
}

.cu-form__fields {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cu-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: end;
}

.cu-form__row > .cu-form__field { min-width: 0; }

.cu-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ---- Field label — semibold 12 #31356e ---- */
.cu-form__label {
    font-family: 'Plus Jakarta Sans', var(--gwp-font-title);
    font-weight: 600;
    font-size: var(--gwp-fs-base);
    line-height: 1.2;
    color: var(--gwp-heading);
    margin: 0;
}

.cu-form__label .req { color: var(--gwp-heading); margin-left: 2px; }

/* ---- Field input ---- */
.cu-form__input,
.cu-form__textarea {
    height: 38px;
    padding: 10px 12px;
    background-color: transparent;
    border: none;
    border-bottom: 0.6px solid #666666;
    border-radius: 0;
    font-family: 'Be Vietnam Pro', 'Inter', var(--gwp-font-body);
    font-weight: 300;
    font-size: var(--gwp-fs-base);
    line-height: 1.2;
    color: var(--gwp-text-body);
    outline: none;
    box-shadow: none;
    width: 100%;
    display: block;
}

.cu-form__textarea {
    height: 38px;
    min-height: 38px;
    resize: vertical;
}

.cu-form__input::placeholder,
.cu-form__textarea::placeholder {
    color: #666666;
    font-weight: 300;
}

.cu-form__input:focus,
.cu-form__textarea:focus {
    border-bottom-color: #4a7ae5;
}

.cu-form__input[readonly] {
    background-color: transparent;
    color: var(--gwp-text-body);
    opacity: 0.9;
}

/* ---- Inline validation error ---- */
.cu-form__error {
    font-size: var(--gwp-fs-base);
    color: #d8453f;
    margin-top: 2px;
    display: inline-block;
}

/* CTA — Submit + consent */

.cu-form__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

/* Yellow Submit button */
/* Submit button — mirrors the shared .gwp-btn .gwp-btn--primary .gwp-form__cta-btn
   system (sheen sweep, glass overlay, gold lift, press feedback) from
   style-homepage-gwp.css. Kept here so it works whether the Razor view has been
   recompiled with the gwp classes or not. */
.cu-form__submit {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 50px;
    padding: 10px;
    border-radius: 12px;
    background-color: var(--gwp-primary);
    color: var(--gwp-heading);
    border: none;
    font-family: 'Plus Jakarta Sans', var(--gwp-font-title);
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.18s ease,
                color 0.18s ease;
}

.cu-form__submit::before {
    content: "";
    position: absolute;
    top: 0;
    left: -85%;
    width: 55%;
    height: 100%;
    background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%);
    transform: skewX(-22deg);
    transition: left 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.cu-form__submit:hover::before,
.cu-form__submit:focus-visible::before {
    left: 130%;
}

.cu-form__submit::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.18) 18%, rgba(255, 255, 255, 0.04) 35%, transparent 55%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        inset 0 0 0 1px rgba(255, 255, 255, 0.20),
        inset 0 -1px 0 rgba(255, 255, 255, 0.12),
        inset 0 12px 24px -10px rgba(255, 255, 255, 0.30);
}

.cu-form__submit:hover::after,
.cu-form__submit:focus-visible::after {
    opacity: 1;
}

.cu-form__submit:hover,
.cu-form__submit:focus-visible {
    background-color: #ffe066;
    color: var(--gwp-heading);
    transform: translateY(-3px);
    box-shadow: 0 14px 28px -10px rgba(245, 178, 9, 0.45),
                0 4px 10px rgba(49, 53, 110, 0.18);
}

.cu-form__submit:active {
    transform: translateY(-1px) scale(0.98);
    transition-duration: 0.08s;
}

.cu-form__submit:focus-visible {
    outline: 2px solid var(--gwp-primary);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .cu-form__submit,
    .cu-form__submit::before,
    .cu-form__submit::after {
        transition: none;
    }
}

/* Consent row */
.cu-form__consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
}

.cu-form__check {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin: 2px 0 0;
    background-color: #ffffff;
    border: 0.6px solid #31356e;
    border-radius: 4px;
    cursor: pointer;
    appearance: auto;
}

.cu-form__consent-text {
    font-family: 'Be Vietnam Pro', 'Inter', var(--gwp-font-body);
    font-weight: 400;
    font-size: var(--gwp-fs-base);
    line-height: 1.331;
    color: var(--gwp-heading);
    margin: 0;
    cursor: pointer;
}

.cu-form__consent-text a {
    color: var(--gwp-heading);
    text-decoration: underline;
}

.cu-form__consent-error {
    width: 100%;
    font-size: var(--gwp-fs-base);
    color: #d8453f;
}

/* ============================================================
   RESPONSIVE
   Bootstrap 4 breakpoints: 1279.98 / 1199.98 / 991.98 / 767.98 / 575.98
   ============================================================ */

/* Small desktop — tighten spacing so info + form don't fight for width */
@media (max-width: 1279.98px) {
    .cu-page { padding: 80px 40px; }
    .cu-card { padding: 36px 40px; }
    .cu-card__inner { gap: 40px; }
    .cu-info-block { gap: 26px; }
    .cu-info-block__row { column-gap: 20px; }
    .cu-info-block__row--wide { column-gap: 30px; }
}

/* Laptop — form column narrows to keep info readable */
@media (max-width: 1199.98px) {
    .cu-page { padding: 70px 32px; }
    .cu-card { padding: 32px 32px; min-height: 0; }
    .cu-card__info { max-width: 100%; min-height: 0; gap: 24px; }
    .cu-card__mascot { width: 110px; height: 109px; }

    .cu-info-block { gap: 22px; }
    .cu-info-block__row { column-gap: 16px; }
    .cu-info-block__row--wide { column-gap: 20px; }

    .cu-info__icon { width: 44px; height: 44px; }
    .cu-info__icon .bi { font-size: 20px; }
    .cu-info__item { gap: 16px; }
    .cu-info__text { font-size: var(--gwp-fs-base); }
    .cu-info__text--plain { font-size: var(--gwp-fs-base); }

    .cu-card__form-wrap { flex: 0 0 400px; max-width: 400px; }
    .cu-card__ring--tl { width: 420px; height: 420px; top: -110px; left: -150px; border-width: 62px; }
    .cu-card__ring--br { width: 460px; height: 460px; top: 260px; left: auto; right: -220px; border-width: 68px; }
}

/* Tablet — stack info above form */
@media (max-width: 991.98px) {
    .cu-page { padding: 60px 24px; }

    .cu-card {
        padding: 44px 32px;
        min-height: 0;
    }

    .cu-card__inner {
        flex-direction: column;
        flex-wrap: wrap;
        gap: 40px;
        align-items: center;
    }

    .cu-card__info {
        flex: 1 1 100%;
        max-width: 100%;
        min-height: 0;
        align-items: center;
        text-align: center;
        gap: 28px;
    }

    .cu-card__mascot { width: 120px; height: 119px; }

    .cu-info-block { width: 100%; align-items: center; gap: 24px; }

    .cu-info-block__row {
        justify-content: center;
        column-gap: 32px;
    }
    .cu-info-block__row--wide { column-gap: 32px; }

    .cu-info__icon { width: 48px; height: 48px; }
    .cu-info__icon .bi { font-size: 21px; }
    .cu-info__text { font-size: 18px; }
    .cu-info__text--plain { font-size: 16px; }

    .cu-info__item--address { justify-content: center; }

    /* Widen form so it fills the stacked card comfortably */
    .cu-card__form-wrap {
        flex: 1 1 100%;
        max-width: 560px;
        width: 100%;
    }

    .cu-card__ring--tl { width: 360px; height: 360px; top: -100px; left: -130px; border-width: 54px; }
    .cu-card__ring--br { width: 380px; height: 380px; top: auto; bottom: -160px; left: auto; right: -180px; border-width: 56px; }
}

/* Small tablet / large phone */
@media (max-width: 767.98px) {
    .cu-page { padding: 50px 20px; }
    .cu-card { padding: 36px 24px; border-radius: 28px; }
    .cu-card__inner { gap: 32px; }
    .cu-card__info { gap: 24px; }
    .cu-card__mascot { width: 110px; height: 109px; }

    .cu-info-block { gap: 20px; }
    .cu-info-block__row { column-gap: 24px; row-gap: 18px; }
    .cu-info-block__row--wide { column-gap: 24px; }

    .cu-card__form-wrap { max-width: 100%; }
    .cu-form { padding: 20px; }
}

/* Phone — info items stack, single-column form */
@media (max-width: 575.98px) {
    .cu-page { padding: 40px 14px; }

    .cu-card {
        padding: 28px 18px;
        border-radius: 24px;
    }

    .cu-card__inner { gap: 28px; }

    .cu-info-block__row {
        flex-direction: column;
        row-gap: 18px;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .cu-info-block__row--wide {
        row-gap: 18px;
        column-gap: 0;
    }

    .cu-info__item,
    .cu-info__item--address {
        justify-content: flex-start;
        gap: 16px;
    }

    /* Address uses CSS grid with a viewport-relative max-width so it can never
       overflow the card. The `1fr` text column then lets the address wrap. */
    .cu-info__item--address {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 16px;
        align-items: center;
        width: 100%;
        max-width: calc(100vw - 68px);
    }

    .cu-info__item--address .cu-info__text--plain {
        display: block;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: break-word;
        min-width: 0;
        max-width: 100%;
        width: 100%;
    }

    .cu-card__info { text-align: left; align-items: flex-start; gap: 22px; }
    .cu-info-block { align-items: flex-start; gap: 18px; }
    .cu-card__mascot { width: 100px; height: 99px; }

    .cu-info__icon { width: 42px; height: 42px; }
    .cu-info__icon .bi { font-size: 19px; }

    .cu-info__text { font-size: 16px; }

    .cu-social { margin-top: 4px; gap: 12px; }
    .cu-social__label { font-size: 17px; }

    .cu-form { padding: 16px; gap: 18px; }
    .cu-form__title { font-size: 20px !important; }
    .cu-form__fields { gap: 18px; }
    .cu-form__row {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    /* Keep rings decorative, off-canvas */
    .cu-card__ring--tl { width: 300px; height: 300px; top: -100px; left: -110px; border-width: 44px; }
    .cu-card__ring--br { width: 300px; height: 300px; top: auto; bottom: -140px; right: -140px; border-width: 44px; }
}

/* Narrow phone — address text scales down so the full string fits inside the card
   (real browsers will also wrap it via the grid rule above; this guarantees no
   clipping if wrap doesn't kick in). */
@media (max-width: 480px) {
    .cu-info__item--address .cu-info__text--plain {line-height: 1.4; }
}

/* Extra-small phone (iPhone SE, 320px) */
@media (max-width: 379.98px) {
    .cu-page { padding: 32px 8px; }
    .cu-card { padding: 24px 14px; border-radius: 22px; }
    .cu-info__text { font-size: 15px; letter-spacing: -0.2px; }
    .cu-info__icon { width: 40px; height: 40px; }
    .cu-info__icon .bi { font-size: 18px; }
    .cu-info__item, .cu-info__item--address { gap: 14px; }
    .cu-form__title { font-size: 18px !important; }
    .cu-form__consent-text { font-size: 9.5px; }
}