/* ===============================
   CONTACT US BLOCK – GLOBAL-ALIGNED
=============================== */

.contact-us-block {
    background: var(--color-grey-mid);
    padding-top: var(--section-padding-y);
    padding-bottom: var(--section-padding-y);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Overlay */
.contact-us-block::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--overlay);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.15;
    pointer-events: none;
}

/* Inner wrapper */
.contact-us__inner {
    position: relative;
    z-index: 2;
    max-width: var(--container-narrow);
    margin: 0 auto;
    padding-left: var(--section-padding-x);
    padding-right: var(--section-padding-x);
}

/* Heading */
.contact-us__heading {
    font-family: var(--font-heading);
    font-size: var(--font-h2);
    font-weight: 700;
    color: var(--color-purple);
    text-align: center;
    margin-bottom: var(--space-sm);
}

/* Description */
.contact-us__desc,
.contact-us__desc p {
    font-family: var(--font-body-family);
    font-size: var(--font-body);
    line-height: var(--lh-relaxed);
    color: var(--color-black);
    text-align: center !important;
    margin: 0 auto var(--space-md) !important;
    max-width: 700px;
}

/* Button (inherits global system) */
.contact-us__button {
    display: inline-block;
    padding: var(--space-xs) var(--space-md);
    border: 2px solid var(--color-gold);
    background: var(--color-white);
    color: var(--color-purple);
    text-transform: uppercase;
    font-family: var(--font-heading);
    font-size: 16px; /* as requested for button text */
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s ease;
    letter-spacing: 1px;
    cursor: pointer;
}

/* Hover */
.contact-us__button:hover {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-white);
}

/* Mobile */
@media (max-width: 767px) {
    .contact-us-block { 
        padding-top: var(--space-lg);
        padding-bottom: var(--space-lg);
    }

    .contact-us__heading { 
        font-size: var(--font-h2);
        text-align: center;
    }
}

/* ==============================================
   FEATURES BLOCK — CTA BUTTON (GLOBAL MATCHED)
   Uses the same padding model as .contact-us__button
============================================== */

.features__button {
    /* Match global CTA padding */
    padding: var(--space-xs) var(--space-md) !important;

    /* Typography */
    font-family: var(--font-heading);
    font-size: 16px !important;   /* desktop size */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;

    /* Visual consistency */
    background: var(--color-white);
    border: 2px solid var(--color-gold);
    color: var(--color-purple);
    transition: all 0.25s ease;

    /* Behaviour */
    display: inline-flex !important;
    justify-content: center;
    align-items: center;

    /* Make button hug text */
    width: auto !important;
    min-width: 0 !important;
    max-width: fit-content !important;
    white-space: nowrap;

    /* Keep aligned at bottom of card */
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
}

/* Hover (same as Contact Us block) */
.features__button:hover {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-white);
}

/* ==============================================
   RESPONSIVE FONT SIZE (tablet + mobile)
============================================== */

@media (max-width: 1024px) {
    .features__button {
        font-size: 14px !important;
        padding: var(--space-xs) var(--space-md) !important;
    }
}

/* ============================================
   FEATURES CTA — add comfortable padding
============================================ */
.features__button {
    padding-top: 6px !important;
    padding-bottom: 6px !important;

    /* Slightly increase horizontal padding */
    padding-left: 16px !important;
    padding-right: 16px !important;

    font-size: 16px !important;
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;

    background: var(--color-white);
    border: 2px solid var(--color-gold);
    color: var(--color-purple);

    display: inline-flex !important;
    justify-content: center;
    align-items: center;

    width: auto !important;      /* shrink-to-fit */
    max-width: fit-content !important;
    white-space: nowrap;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1024px) {
    .features__button {
        font-size: 14px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }
}

/* DESKTOP — 900px */
.contact-us__desc,
.contact-us__desc p {
    max-width: 900px !important;
}

/* TABLET — 820px */
@media (max-width: 1024px) {
    .contact-us__desc,
    .contact-us__desc p {
        max-width: 820px !important;
    }
}

/* MOBILE — 705px */
@media (max-width: 767px) {
    .contact-us__desc,
    .contact-us__desc p {
        max-width: 705px !important;
    }
}