/*
=========================================================
 PETER DENG — CONTACT PAGE V2
=========================================================
*/

body.page-id-116 {
    --cp-green-950: #052d19;
    --cp-green-900: #083b21;
    --cp-green-800: #14572f;
    --cp-green-700: #195227;

    --cp-gold: #d4b36a;

    --cp-ink: #112018;
    --cp-copy: #647069;
    --cp-soft: #f6f9f7;
    --cp-line: #dde6df;
}


/* =======================================================
   HERO
======================================================= */

body.page-id-116 .pd-contact-v2-hero {
    position: relative !important;
    overflow: hidden !important;
    min-height: 0 !important;
    padding-top: 34px !important;
    padding-bottom: 26px !important;
}

body.page-id-116 .pd-contact-v2-heading {
    max-width: 560px !important;
    margin: 0 0 12px !important;
    font-size: clamp(38px, 4.1vw, 58px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.04em !important;
    color: #fff !important;
}

body.page-id-116 .pd-contact-v2-lead {
    max-width: 560px !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.62 !important;
    color: rgba(255,255,255,.80) !important;
}

body.page-id-116 .pd-contact-v2-actions {
    margin-top: 16px !important;
}

body.page-id-116 .pd-contact-v2-quick-card {
    max-width: 380px !important;
    margin-left: auto !important;
}

body.page-id-116 .pd-contact-v2-quick-card h2,
body.page-id-116 .pd-contact-v2-quick-card h3 {
    font-size: clamp(20px, 2vw, 28px) !important;
    line-height: 1.08 !important;
}


/* =======================================================
   UNIQUE REPLACEMENT STRIP
======================================================= */

body.page-id-116 .pd-contact-v2-unique-strip {
    padding: 24px 0 18px !important;
    background: #f8fbf9 !important;
    border-top: 1px solid #edf2ee;
    border-bottom: 1px solid #edf2ee;
}

body.page-id-116 .pd-contact-v2-strip {
    width: min(calc(100% - 48px), 1180px);
    max-width: 1180px;
    margin: 0 auto;
}

body.page-id-116 .pd-contact-v2-strip-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

body.page-id-116 .pd-contact-v2-eyebrow {
    display: block;
    margin: 0 0 8px;
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--cp-green-700);
}

body.page-id-116 .pd-contact-v2-strip-head h2 {
    margin: 0 !important;
    font-size: clamp(26px, 2.6vw, 36px) !important;
    line-height: 1.04 !important;
    letter-spacing: -.035em !important;
    color: var(--cp-ink) !important;
}

body.page-id-116 .pd-contact-v2-strip-head p {
    max-width: 470px;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: var(--cp-copy) !important;
}

body.page-id-116 .pd-contact-v2-strip-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 16px;
}

body.page-id-116 .pd-contact-v2-item {
    position: relative;
    overflow: hidden;
    min-height: 170px;
    padding: 22px 20px 22px;
    border: 1px solid var(--cp-line);
    border-radius: 14px;
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f8fbf9 100%
        );
    box-shadow:
        0 10px 26px rgba(5,45,25,.035);
}

body.page-id-116 .pd-contact-v2-item::after {
    content: "";
    position: absolute;
    width: 170px;
    height: 170px;
    right: -100px;
    bottom: -100px;
    border-radius: 50%;
    border: 1px solid rgba(25,82,39,.05);
    box-shadow:
        0 0 0 16px rgba(25,82,39,.010),
        0 0 0 32px rgba(212,179,106,.012);
    pointer-events: none;
}

body.page-id-116 .pd-contact-v2-num {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-bottom: 14px;
    border: 1px solid rgba(25,82,39,.12);
    border-radius: 50%;
    background: #eff6f1;
    font-size: 10px;
    font-weight: 800;
    color: var(--cp-green-700);
}

body.page-id-116 .pd-contact-v2-item h3 {
    margin: 0 0 10px !important;
    font-size: 18px !important;
    line-height: 1.18 !important;
    letter-spacing: -.02em !important;
    color: var(--cp-ink) !important;
}

body.page-id-116 .pd-contact-v2-item p {
    margin: 0 !important;
    font-size: 13.5px !important;
    line-height: 1.68 !important;
    color: var(--cp-copy) !important;
}


/* =======================================================
   RESPONSIVE
======================================================= */

@media (max-width: 900px) {

    body.page-id-116 .pd-contact-v2-heading {
        font-size: clamp(34px, 5vw, 46px) !important;
        max-width: 100% !important;
    }

    body.page-id-116 .pd-contact-v2-strip-head {
        display: block;
    }

    body.page-id-116 .pd-contact-v2-strip-head h2 {
        margin-bottom: 10px !important;
    }

    body.page-id-116 .pd-contact-v2-strip-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 650px) {

    body.page-id-116 .pd-contact-v2-hero {
        padding-top: 24px !important;
        padding-bottom: 18px !important;
    }

    body.page-id-116 .pd-contact-v2-heading {
        font-size: 34px !important;
        line-height: 1.04 !important;
    }

    body.page-id-116 .pd-contact-v2-lead {
        font-size: 13.5px !important;
    }

    body.page-id-116 .pd-contact-v2-quick-card {
        max-width: 100% !important;
        margin-top: 12px !important;
    }

    body.page-id-116 .pd-contact-v2-unique-strip {
        padding: 18px 0 12px !important;
    }

    body.page-id-116 .pd-contact-v2-strip {
        width: min(calc(100% - 30px), 1180px);
    }

    body.page-id-116 .pd-contact-v2-strip-grid {
        grid-template-columns: 1fr;
    }

    body.page-id-116 .pd-contact-v2-item {
        min-height: 0;
    }
}


/* =======================================================
   CONTACT PAGE — FINAL HERO COMPACTING
======================================================= */

/*
 * Actual live hero.
 */
body .contact-premium-hero {
    min-height: 0 !important;
    height: auto !important;

    padding-top: 32px !important;
    padding-bottom: 32px !important;
}


/* =======================================================
   HERO GRID
======================================================= */

body .contact-premium-hero-grid {
    width:
        min(calc(100% - 48px), 1180px) !important;

    max-width:
        1180px !important;

    margin:
        0 auto !important;

    display:
        grid !important;

    grid-template-columns:
        minmax(0, 1.22fr)
        minmax(300px, .78fr)
        !important;

    gap:
        52px !important;

    align-items:
        center !important;
}


/* =======================================================
   LEFT COPY
======================================================= */

body .contact-premium-intro {
    padding:
        0 !important;

    margin:
        0 !important;
}


body .contact-premium-intro h1 {
    max-width:
        560px !important;

    margin:
        0
        0
        13px !important;

    font-size:
        clamp(36px, 3.8vw, 50px) !important;

    line-height:
        1.01 !important;

    letter-spacing:
        -.042em !important;

    color:
        #fff !important;
}


body .contact-premium-intro > p {
    max-width:
        550px !important;

    margin:
        0 !important;

    font-size:
        14px !important;

    line-height:
        1.6 !important;
}


body .contact-hero-actions {
    margin-top:
        18px !important;
}


/* =======================================================
   RIGHT QUICK-CONTACT CARD
======================================================= */

body .contact-hero-panel {
    width:
        100% !important;

    max-width:
        360px !important;

    margin:
        0
        0
        0
        auto !important;

    padding:
        24px
        25px !important;

    border-radius:
        15px !important;
}


body .contact-hero-panel h2 {
    margin:
        5px
        0
        14px !important;

    font-size:
        23px !important;

    line-height:
        1.1 !important;
}


body .contact-hero-panel > a {
    min-height:
        52px !important;

    padding:
        10px
        0 !important;
}


body .contact-hero-panel > a + a {
    border-top:
        1px solid
        #e1e8e3;
}


body .contact-panel-icon {
    width:
        34px !important;

    height:
        34px !important;
}


/* =======================================================
   BANKNOTE BACKGROUND
======================================================= */

body .contact-premium-hero > .pd-banknote-art {
    background-size:
        100% auto !important;

    background-position:
        52% 58% !important;

    opacity:
        .18 !important;
}


/* =======================================================
   WHAT TO EXPECT
======================================================= */

/*
 * Keep the replacement section compact so it acts as
 * a transition, not a second hero.
 */
body .pd-contact-v2-unique-strip {
    padding-top:
        28px !important;

    padding-bottom:
        30px !important;
}


body .pd-contact-v2-strip-head {
    margin-bottom:
        18px !important;
}


body .pd-contact-v2-strip-grid {
    gap:
        14px !important;
}


body .pd-contact-v2-item {
    min-height:
        145px !important;

    padding:
        20px !important;
}


/* =======================================================
   TABLET
======================================================= */

@media (max-width: 900px) {

    body .contact-premium-hero {
        padding:
            30px
            0 !important;
    }

    body .contact-premium-hero-grid {
        grid-template-columns:
            minmax(0, 1fr)
            330px
            !important;

        gap:
            32px !important;
    }

    body .contact-premium-intro h1 {
        font-size:
            clamp(34px, 5vw, 44px) !important;
    }
}


/* =======================================================
   MOBILE
======================================================= */

@media (max-width: 650px) {

    body .contact-premium-hero {
        padding:
            22px
            0
            26px !important;
    }

    body .contact-premium-hero-grid {
        width:
            min(calc(100% - 30px),1180px)
            !important;

        grid-template-columns:
            1fr !important;

        gap:
            22px !important;
    }

    body .contact-premium-intro h1 {
        max-width:
            100% !important;

        font-size:
            34px !important;
    }

    body .contact-premium-intro > p {
        font-size:
            13.5px !important;
    }

    body .contact-hero-panel {
        max-width:
            100% !important;

        margin:
            0 !important;

        padding:
            22px !important;
    }

    body .pd-contact-v2-unique-strip {
        padding:
            22px
            0
            25px !important;
    }
}



/* =======================================================
   CONTACT HERO — FINAL HEIGHT AUTHORITY
======================================================= */

body.page-id-116 .contact-premium-hero {
    min-height: 0 !important;
    height: auto !important;

    padding-top: 42px !important;
    padding-bottom: 42px !important;
}

body.page-id-116 .contact-premium-hero-grid {
    min-height: 0 !important;

    width:
        min(calc(100% - 48px), 1180px) !important;

    margin-left: auto !important;
    margin-right: auto !important;

    align-items: center !important;
}

body.page-id-116 .contact-premium-intro {
    margin: 0 !important;
    padding: 0 !important;
}

body.page-id-116 .contact-premium-intro h1 {
    max-width: 560px !important;

    margin: 0 0 14px !important;

    font-size:
        clamp(36px, 3.5vw, 48px) !important;

    line-height: 1.02 !important;
}

body.page-id-116 .contact-premium-intro > p {
    margin: 0 !important;

    max-width: 560px !important;

    font-size: 14px !important;
    line-height: 1.6 !important;
}

body.page-id-116 .contact-hero-actions {
    margin-top: 18px !important;
}

body.page-id-116 .contact-hero-panel {
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    max-width: 360px !important;
}

@media (max-width: 900px) {

    body.page-id-116 .contact-premium-hero {
        min-height: 0 !important;

        padding-top: 34px !important;
        padding-bottom: 34px !important;
    }
}

@media (max-width: 600px) {

    body.page-id-116 .contact-premium-hero {
        min-height: 0 !important;

        padding-top: 26px !important;
        padding-bottom: 28px !important;
    }
}



/* =======================================================
   CONTACT HERO — DECORATIVE FLOW FIX
======================================================= */

/*
 * CRITICAL:
 *
 * contact-blob-one and contact-blob-two are decorative
 * absolutely-positioned shapes. The global banknote stacking
 * rule previously changed them to position:relative, causing
 * them to occupy normal layout space and create the giant
 * empty area above the hero content.
 */

body.page-id-116 .contact-premium-hero {
    position: relative !important;

    min-height: 0 !important;
    height: auto !important;

    padding:
        38px
        0 !important;
}


/* Restore blobs to decoration-only positioning */

body.page-id-116
.contact-premium-hero
> .contact-blob {
    position: absolute !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 0 !important;

    pointer-events: none !important;
}


/*
 * Do NOT change top/right/bottom/left here.
 * Existing theme CSS retains its original blob locations.
 */

body.page-id-116
.contact-premium-hero
> .pd-banknote-art {
    position: absolute !important;

    inset: 0 !important;

    z-index: 0 !important;

    pointer-events: none !important;
}


/* Real content sits above decorative layers */

body.page-id-116
.contact-premium-hero
> .contact-premium-hero-grid {
    position: relative !important;

    z-index: 3 !important;

    width:
        min(calc(100% - 48px),1180px)
        !important;

    max-width:
        1180px !important;

    min-height: 0 !important;
    height: auto !important;

    margin:
        0
        auto !important;

    padding:
        0 !important;

    align-items:
        center !important;
}


/* =======================================================
   HERO PROPORTIONS
======================================================= */

body.page-id-116
.contact-premium-intro {
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}


body.page-id-116
.contact-premium-intro h1 {
    max-width:
        565px !important;

    margin:
        0
        0
        14px !important;

    font-size:
        clamp(38px,3.5vw,50px)
        !important;

    line-height:
        1.01 !important;

    letter-spacing:
        -.04em !important;
}


body.page-id-116
.contact-premium-intro > p {
    max-width:
        560px !important;

    margin:
        0 !important;

    font-size:
        14px !important;

    line-height:
        1.6 !important;
}


body.page-id-116
.contact-hero-actions {
    margin-top:
        18px !important;
}


/* =======================================================
   QUICK CONTACT CARD
======================================================= */

body.page-id-116
.contact-hero-panel {
    width:
        100% !important;

    max-width:
        360px !important;

    min-height:
        0 !important;

    height:
        auto !important;

    margin:
        0
        0
        0
        auto !important;

    transform:
        none !important;
}


/* =======================================================
   DESKTOP TARGET
======================================================= */

@media (min-width: 901px) {

    body.page-id-116
    .contact-premium-hero {
        padding-top:
            44px !important;

        padding-bottom:
            44px !important;
    }

}


/* =======================================================
   TABLET
======================================================= */

@media (max-width: 900px) {

    body.page-id-116
    .contact-premium-hero {
        padding:
            34px
            0 !important;
    }

}


/* =======================================================
   MOBILE
======================================================= */

@media (max-width: 600px) {

    body.page-id-116
    .contact-premium-hero {
        padding:
            26px
            0
            30px !important;
    }

    body.page-id-116
    .contact-premium-hero-grid {
        width:
            min(calc(100% - 28px),1180px)
            !important;
    }

}

