/* ==========================================================================
   AJAY BHATNAGAR
   CONTACT PAGE
   --------------------------------------------------------------------------
   File:
       public/css/contact.css

   Design:
       Executive Technology Leader
       Technology · Transformation · Delivery

   Purpose:
       Clean, stable, self-contained Contact page stylesheet.

   Important:
       This stylesheet intentionally does not depend on:
           --ab-*
           --home-*
           --color-*

       All Contact-page design tokens are defined locally.

       Global navigation and footer remain controlled by:
           navbar.css
           footer.css
   ========================================================================== */


/* ==========================================================================
   01. CONTACT DESIGN TOKENS
   ========================================================================== */

.contact-page {

    --contact-bg: #eef4f7;
    --contact-surface: #ffffff;
    --contact-surface-soft: #f7fafc;

    --contact-dark: #071421;
    --contact-dark-2: #0a1d2d;
    --contact-dark-3: #0d2638;

    --contact-text: #102b3d;
    --contact-text-soft: #29475b;
    --contact-muted: #587085;
    --contact-muted-light: #8297a7;

    --contact-white: #f4f8fb;

    --contact-blue: #42a3e7;
    --contact-blue-dark: #2187ca;
    --contact-blue-hover: #55afea;

    --contact-border: #d4e0e7;
    --contact-border-dark: rgba(110, 157, 187, .22);

    --contact-error: #b94a48;
    --contact-success: #287b54;

    --contact-radius: 8px;

    color: var(--contact-text);
    background: var(--contact-bg);

    isolation: isolate;
}


/* ==========================================================================
   02. CONTACT PAGE RESET
   ========================================================================== */

.contact-page *,
.contact-page *::before,
.contact-page *::after {
    box-sizing: border-box;
}


.contact-page img {
    max-width: 100%;
    height: auto;
}


.contact-page a {
    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}


/* ==========================================================================
   03. SHARED CONTAINER
   --------------------------------------------------------------------------
   Wider than the previous 1080px container to align the Contact page
   with the broader executive layout used across the website.
   ========================================================================== */

.contact-page > .container,
.contact-page .container {

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

    margin-inline: auto;
}


/* ==========================================================================
   04. SHARED EYEBROW
   ========================================================================== */

.contact-page .eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin: 0 0 20px;

    color: var(--contact-blue-dark) !important;

    font-size: 9px !important;

    line-height: 1.2;

    font-weight: 800 !important;

    letter-spacing: .18em;

    text-transform: uppercase;
}


.contact-page .eyebrow > span:first-child {

    display: inline-block;

    width: 26px;
    height: 2px;

    flex: 0 0 auto;

    background: var(--contact-blue) !important;
}


/* Dark-section eyebrow */

.contact-page .section--dark .eyebrow,
.contact-page .contact-engagement-section .eyebrow,
.contact-page .contact-section--closing .eyebrow {

    color: #60b7f5 !important;
}


.contact-page .section--dark .eyebrow > span:first-child,
.contact-page .contact-engagement-section .eyebrow > span:first-child,
.contact-page .contact-section--closing .eyebrow > span:first-child {

    background: #60b7f5 !important;
}


/* ==========================================================================
   05. CONTACT HERO
   ========================================================================== */

.contact-page .contact-section--hero {

    position: relative;

    overflow: hidden;

    padding: 105px 0 90px;

    background:
        radial-gradient(
            circle at 82% 20%,
            rgba(66, 163, 231, .13),
            transparent 30%
        ),
        radial-gradient(
            circle at 10% 80%,
            rgba(31, 135, 202, .10),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #071421 0%,
            #0a1d2d 58%,
            #0c2538 100%
        ) !important;

    color: var(--contact-white) !important;
}


.contact-page .contact-section--hero::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .55;

    background-image:
        linear-gradient(
            rgba(90, 154, 193, .035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(90, 154, 193, .035) 1px,
            transparent 1px
        );

    background-size: 90px 90px;
}


.contact-page .contact-section--hero::after {

    content: "CONTACT";

    position: absolute;

    right: 3%;
    bottom: -22px;

    color: rgba(91, 168, 219, .055);

    font-size: clamp(
        90px,
        15vw,
        190px
    );

    line-height: .8;

    font-weight: 900;

    letter-spacing: -.07em;

    pointer-events: none;
}


.contact-page .contact-section--hero .container {

    position: relative;

    z-index: 2;
}


.contact-page .contact-section--hero .contact-section__inner {

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(260px, .65fr);

    gap: 80px;

    align-items: end;
}


.contact-page .contact-section--hero .contact-section__content {

    min-width: 0;
}


/* Hero heading */

.contact-page .contact-section--hero h1 {

    max-width: 760px;

    margin: 0;

    color: #f4f8fb !important;

    font-size:
        clamp(
            48px,
            6vw,
            78px
        ) !important;

    line-height: .94;

    font-weight: 850;

    letter-spacing: -.055em;
}


.contact-page .contact-section--hero h1 em {

    color: #60b7f5 !important;

    font-style: normal;
}


/* Hero paragraph */

.contact-page .contact-section--hero .contact-copy {

    max-width: 690px;

    margin: 28px 0 0;

    color: #b5c8d7 !important;

    font-size: 14px;

    line-height: 1.8;
}


/* ==========================================================================
   06. CONTACT ACTION LINKS
   ========================================================================== */

.contact-page .contact-actions {

    display: grid;

    gap: 0;
}


.contact-page .contact-link {

    display: grid;

    gap: 6px;

    padding: 17px 0;

    border-top:
        1px solid
        rgba(130, 170, 196, .20);

    color: #e9f2f7 !important;

    text-decoration: none;
}


.contact-page .contact-link:last-child {

    border-bottom:
        1px solid
        rgba(130, 170, 196, .20);
}


.contact-page .contact-link span {

    color: #60b7f5 !important;

    font-size: 8px;

    line-height: 1.3;

    font-weight: 800;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.contact-page .contact-link strong {

    color: #e9f2f7 !important;

    font-size: 13px;

    line-height: 1.4;

    font-weight: 700;
}


.contact-page .contact-link:hover {

    color: #ffffff !important;

    transform: translateX(3px);
}


.contact-page .contact-link:hover strong {

    color: #ffffff !important;
}


/* ==========================================================================
   07. LIGHT CONTACT FORM SECTION
   ========================================================================== */

.contact-page .contact-form-section {

    position: relative;

    overflow: hidden;

    padding: 100px 0 115px;

    background:
        var(--contact-bg) !important;

    color:
        var(--contact-text) !important;
}


.contact-page .contact-form-section,
.contact-page .contact-form-section h1,
.contact-page .contact-form-section h2,
.contact-page .contact-form-section h3,
.contact-page .contact-form-section h4,
.contact-page .contact-form-section p,
.contact-page .contact-form-section label {

    text-shadow: none;
}


.contact-page .contact-form-section > .container {

    position: relative;

    z-index: 2;
}


/* ==========================================================================
   08. FORM SECTION HEADING
   ========================================================================== */

.contact-page .contact-form-section .section-heading {

    display: block;

    margin: 0 0 55px;

    padding: 0;

    text-align: left;
}


.contact-page .contact-form-section .section-heading h2 {

    max-width: 760px;

    margin: 0;

    color:
        var(--contact-text) !important;

    font-size:
        clamp(
            44px,
            5.2vw,
            70px
        ) !important;

    line-height: .96;

    font-weight: 850;

    letter-spacing: -.055em;
}


.contact-page .contact-form-section .section-heading h2 em {

    color:
        var(--contact-blue-dark) !important;

    font-style: normal;
}


/* ==========================================================================
   09. FORM GRID
   ========================================================================== */

.contact-page .contact-form-section > .container > .row {

    --bs-gutter-x: 4.5rem;
    --bs-gutter-y: 3rem;

    align-items: start;
}


/* ==========================================================================
   10. CONTACT INFORMATION COLUMN
   ========================================================================== */

.contact-page .contact-info {

    padding-top: 3px;
}


.contact-page .contact-info .section-copy {

    max-width: 540px;

    margin: 0;

    color:
        var(--contact-text-soft) !important;

    font-size: 15px;

    line-height: 1.8;
}


/* ==========================================================================
   11. CONTACT DETAILS
   ========================================================================== */

.contact-page .contact-details {

    display: grid;

    gap: 0;

    margin-top: 32px !important;
}


.contact-page .contact-detail {

    display: grid;

    gap: 6px;

    padding: 16px 0;

    border-top:
        1px solid
        rgba(16, 43, 61, .12);
}


.contact-page .contact-detail:last-child {

    border-bottom:
        1px solid
        rgba(16, 43, 61, .12);
}


.contact-page .contact-detail > span {

    color:
        var(--contact-blue-dark) !important;

    font-size: 8px;

    line-height: 1.3;

    font-weight: 800;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.contact-page .contact-detail > a,
.contact-page .contact-detail > strong {

    color:
        var(--contact-text) !important;

    font-size: 13px;

    line-height: 1.5;

    font-weight: 700;

    text-decoration: none;
}


.contact-page .contact-detail > a:hover {

    color:
        var(--contact-blue-dark) !important;
}


/* ==========================================================================
   12. FORM CARD
   ========================================================================== */

.contact-page .contact-form {

    position: relative;

    padding: 34px;

    background:
        var(--contact-surface) !important;

    border:
        1px solid
        var(--contact-border) !important;

    border-radius:
        0 !important;

    box-shadow:
        0 18px 50px
        rgba(16, 43, 61, .075) !important;
}


/* ==========================================================================
   13. FORM LABELS
   ========================================================================== */

.contact-page .contact-form .form-label {

    display: block;

    margin: 0 0 8px;

    color:
        var(--contact-text) !important;

    font-size: 9px !important;

    line-height: 1.3;

    font-weight: 800 !important;

    letter-spacing: .08em;

    text-transform: uppercase;
}


/* ==========================================================================
   14. FORM CONTROLS
   ========================================================================== */

.contact-page .contact-form .form-control,
.contact-page .contact-form .form-select {

    width: 100%;

    min-height: 48px;

    padding: 11px 13px;

    color:
        var(--contact-text) !important;

    background:
        #ffffff !important;

    border:
        1px solid
        var(--contact-border) !important;

    border-radius:
        var(--contact-radius) !important;

    font-family: inherit;

    font-size: 13px !important;

    line-height: 1.45;

    box-shadow: none !important;

    outline: none;
}


.contact-page .contact-form textarea.form-control {

    min-height: 165px;

    resize: vertical;
}


.contact-page .contact-form .form-control::placeholder {

    color:
        #91a2ae !important;

    opacity: 1;
}


.contact-page .contact-form .form-select {

    cursor: pointer;
}


.contact-page .contact-form .form-control:focus,
.contact-page .contact-form .form-select:focus {

    color:
        var(--contact-text) !important;

    background:
        #ffffff !important;

    border-color:
        rgba(66, 163, 231, .72) !important;

    box-shadow:
        0 0 0 3px
        rgba(66, 163, 231, .10) !important;
}


/* File input */

.contact-page .contact-form .form-control[type="file"] {

    padding-top: 10px;

    padding-bottom: 10px;
}


/* ==========================================================================
   15. FORM HELP TEXT
   ========================================================================== */

.contact-page .contact-form .form-text {

    margin-top: 7px;

    color:
        var(--contact-muted) !important;

    font-size: 10px !important;

    line-height: 1.5;

    opacity: 1 !important;
}


/* ==========================================================================
   16. VALIDATION
   ========================================================================== */

.contact-page .contact-form .is-invalid {

    border-color:
        rgba(185, 74, 72, .70) !important;
}


.contact-page .contact-form .is-invalid:focus {

    border-color:
        rgba(185, 74, 72, .82) !important;

    box-shadow:
        0 0 0 3px
        rgba(185, 74, 72, .08) !important;
}


.contact-page .contact-form .invalid-feedback {

    margin-top: 6px;

    color:
        var(--contact-error) !important;

    font-size: 10px;

    line-height: 1.5;
}


/* ==========================================================================
   17. FORM ALERTS
   ========================================================================== */

.contact-page .contact-form-section .alert {

    margin-bottom: 25px;

    border-radius:
        var(--contact-radius);

    font-size: 12px;

    line-height: 1.6;
}


.contact-page .contact-form-section .alert ul {

    margin-bottom: 0;

    padding-left: 18px;
}


/* ==========================================================================
   18. FORM SUBMIT AREA
   ========================================================================== */

.contact-page .contact-form .small.text-muted {

    max-width: 470px;

    margin: 0;

    color:
        var(--contact-muted) !important;

    font-size: 10px !important;

    line-height: 1.65;

    opacity: 1 !important;
}


/* ==========================================================================
   19. SEND ENQUIRY BUTTON
   ========================================================================== */

.contact-page .contact-form .btn--primary {

    display: inline-flex !important;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-width: 165px;

    min-height: 50px;

    padding: 0 23px;

    border:
        1px solid
        var(--contact-blue) !important;

    border-radius:
        0 !important;

    background:
        var(--contact-blue) !important;

    color:
        #ffffff !important;

    font-family: inherit;

    font-size: 9px !important;

    line-height: 1;

    font-weight: 800 !important;

    letter-spacing: .08em;

    text-transform: uppercase;

    text-decoration: none;

    opacity: 1 !important;

    visibility: visible !important;

    cursor: pointer;

    box-shadow:
        0 8px 24px
        rgba(66, 163, 231, .18) !important;
}


.contact-page .contact-form .btn--primary:hover {

    background:
        var(--contact-blue-hover) !important;

    border-color:
        var(--contact-blue-hover) !important;

    color:
        #ffffff !important;

    transform:
        translateY(-2px);

    box-shadow:
        0 13px 30px
        rgba(66, 163, 231, .24) !important;
}


.contact-page .contact-form .btn--primary:active {

    transform:
        translateY(0);

    box-shadow:
        0 5px 15px
        rgba(66, 163, 231, .16) !important;
}


.contact-page .contact-form .btn--primary span {

    display: inline-block;

    color:
        #ffffff !important;

    font-size: 15px;

    line-height: 1;

    transition:
        transform .2s ease;
}


.contact-page .contact-form .btn--primary:hover span {

    transform:
        translateX(4px);
}


/* ==========================================================================
   20. DARK ENGAGEMENT SECTION
   ========================================================================== */

.contact-page .contact-engagement-section {

    position: relative;

    overflow: hidden;

    padding:
        105px
        0
        110px !important;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(66, 163, 231, .09),
            transparent 30%
        ),
        radial-gradient(
            circle at 15% 85%,
            rgba(31, 135, 202, .07),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #07121f,
            #091827 60%,
            #07131f
        ) !important;

    color:
        #e9f2f7 !important;
}


/* Dark section heading */

.contact-page .contact-engagement-section .section-heading {

    margin-bottom: 52px;
}


.contact-page .contact-engagement-section .section-heading h2 {

    color:
        #f4f8fb !important;

    font-size:
        clamp(
            42px,
            5vw,
            66px
        ) !important;

    line-height: .96;

    font-weight: 850;

    letter-spacing: -.05em;
}


.contact-page .contact-engagement-section .section-heading h2 em {

    color:
        #60b7f5 !important;

    font-style: normal;
}


/* Intro text */

.contact-page .contact-engagement-section .section-heading__intro {

    max-width: 620px;

    color:
        #aabfce !important;

    font-size: 14px;

    line-height: 1.8;
}


/* ==========================================================================
   21. ENGAGEMENT CARDS
   ========================================================================== */

.contact-page .contact-engagement-section .capability-grid {

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 14px;
}


.contact-page .contact-engagement-section .capability-card {

    position: relative;

    min-height: 235px;

    padding: 28px;

    border:
        1px solid
        var(--contact-border-dark);

    background:
        rgba(255, 255, 255, .018);

    color:
        #e9f2f7;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background-color .2s ease;
}


.contact-page .contact-engagement-section .capability-card:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(74, 169, 237, .42);

    background:
        rgba(74, 169, 237, .045);
}


.contact-page .contact-engagement-section .card-number {

    display: block;

    color:
        #4aa9ed;

    font-size: 9px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: .12em;
}


.contact-page .contact-engagement-section .capability-card h3 {

    margin:
        45px
        0
        12px;

    color:
        #f2f7fb !important;

    font-size: 17px;

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: -.02em;
}


.contact-page .contact-engagement-section .capability-card p {

    margin: 0;

    color:
        #91aabd !important;

    font-size: 11px;

    line-height: 1.7;
}


/* ==========================================================================
   22. FINAL CLOSING CTA
   --------------------------------------------------------------------------
   IMPORTANT:
       The actual Blade selector is:
           .contact-section--closing

       Do not rename this to:
           .contact-final-cta

       unless the Blade markup is intentionally changed.
   ========================================================================== */

.contact-page .contact-section--closing {

    position: relative;

    overflow: hidden;

    min-height: 390px;

    display: flex;

    align-items: center;

    padding:
        105px
        0
        95px;

    background:
        radial-gradient(
            circle at 80% 25%,
            rgba(66, 163, 231, .13),
            transparent 34%
        ),
        #eef4f7 !important;

    color:
        var(--contact-text) !important;
}


.contact-page .contact-section--closing .container {

    position: relative;

    z-index: 2;
}


.contact-page .contact-section--closing .contact-section__inner {

    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(250px, .65fr);

    gap: 80px;

    align-items: end;
}


/* Final CTA heading */

.contact-page .contact-section--closing h1,
.contact-page .contact-section--closing h2 {

    max-width: 760px;

    margin:
        0
        0
        28px;

    color:
        var(--contact-text) !important;

    font-size:
        clamp(
            52px,
            5.8vw,
            78px
        ) !important;

    line-height: .96;

    font-weight: 850;

    letter-spacing: -.045em;
}


.contact-page .contact-section--closing h1 em,
.contact-page .contact-section--closing h2 em {

    color:
        var(--contact-blue-dark) !important;

    font-style: normal;
}


/* Final CTA paragraph */

.contact-page .contact-section--closing .contact-copy {

    max-width: 650px;

    margin: 0;

    color:
        var(--contact-muted) !important;

    font-size: 14px;

    line-height: 1.75;
}


/* Closing contact links */

.contact-page .contact-section--closing .contact-link {

    border-color:
        rgba(16, 43, 61, .13);

    color:
        var(--contact-text) !important;
}


.contact-page .contact-section--closing .contact-link span {

    color:
        var(--contact-blue-dark) !important;
}


.contact-page .contact-section--closing .contact-link strong {

    color:
        var(--contact-text) !important;
}


/* ==========================================================================
   23. CLOSING DECORATIVE GLOW
   ========================================================================== */

.contact-page .contact-section__glow {

    position: absolute;

    width: 480px;
    height: 480px;

    top: -250px;
    right: -130px;

    border:
        1px solid
        rgba(76, 168, 244, .13);

    border-radius: 50%;

    box-shadow:
        0 0 0 60px
        rgba(76, 168, 244, .025),

        0 0 0 120px
        rgba(76, 168, 244, .015);

    pointer-events: none;
}


.contact-page .contact-section--closing .contact-section__glow {

    right: -180px;

    top: -260px;

    border-color:
        rgba(66, 163, 231, .12);
}


/* ==========================================================================
   24. EMPTY STATES
   ========================================================================== */

.contact-page .empty-state {

    padding: 30px;

    border:
        1px dashed
        rgba(16, 43, 61, .18);

    color:
        var(--contact-muted);
}


/* ==========================================================================
   25. RESPONSIVE — 1100px
   ========================================================================== */

@media (max-width: 1100px) {

    .contact-page > .container,
    .contact-page .container {

        width:
            min(
                calc(100% - 40px),
                1000px
            );
    }


    .contact-page .contact-section--hero .contact-section__inner {

        grid-template-columns:
            minmax(0, 1fr)
            300px;

        gap: 55px;
    }


    .contact-page .contact-section--hero h1 {

        font-size:
            clamp(
                48px,
                6.5vw,
                70px
            ) !important;
    }


    .contact-page .contact-engagement-section .capability-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


/* ==========================================================================
   26. RESPONSIVE — 991px
   ========================================================================== */

@media (max-width: 991px) {

    .contact-page > .container,
    .contact-page .container {

        width:
            min(
                calc(100% - 40px),
                760px
            );
    }


    .contact-page .contact-section--hero {

        padding:
            80px
            0
            75px;
    }


    .contact-page .contact-section--hero .contact-section__inner,
    .contact-page .contact-section--closing .contact-section__inner {

        grid-template-columns: 1fr;

        gap: 45px;

        align-items: start;
    }


    .contact-page .contact-section--hero .contact-actions,
    .contact-page .contact-section--closing .contact-actions {

        max-width: 500px;
    }


    .contact-page .contact-form-section {

        padding:
            80px
            0
            90px;
    }


    .contact-page .contact-form-section > .container > .row {

        --bs-gutter-x: 2rem;

        row-gap: 45px;
    }


    .contact-page .contact-form-section .section-heading {

        margin-bottom: 42px;
    }


    .contact-page .contact-form-section .section-heading h2 {

        font-size:
            clamp(
                42px,
                7vw,
                62px
            ) !important;
    }


    .contact-page .contact-section--closing {

        min-height: auto;

        padding:
            85px
            0
            80px;
    }


    .contact-page .contact-section--closing h1,
    .contact-page .contact-section--closing h2 {

        font-size:
            clamp(
                44px,
                8vw,
                64px
            ) !important;

        line-height: .96;
    }


    .contact-page .contact-section--closing .contact-copy {

        max-width: 650px;

        line-height: 1.7;
    }


    .contact-page .contact-engagement-section {

        padding:
            85px
            0
            90px !important;
    }

}


/* ==========================================================================
   27. RESPONSIVE — 768px
   ========================================================================== */

@media (max-width: 768px) {

    .contact-page > .container,
    .contact-page .container {

        width:
            calc(100% - 32px);
    }


    .contact-page .contact-section--hero {

        padding:
            72px
            0
            68px;
    }


    .contact-page .contact-section--hero h1 {

        font-size:
            clamp(
                46px,
                11vw,
                68px
            ) !important;
    }


    .contact-page .contact-section--hero .contact-copy {

        font-size: 13px;
    }


    .contact-page .contact-form {

        padding: 28px;
    }


    .contact-page .contact-form-section {

        padding:
            75px
            0
            85px;
    }


    .contact-page .contact-engagement-section {

        padding:
            78px
            0
            85px !important;
    }


    .contact-page .contact-section--closing {

        padding:
            75px
            0
            80px;
    }


    .contact-page .contact-section--closing h1,
    .contact-page .contact-section--closing h2 {

        font-size:
            clamp(
                40px,
                12vw,
                54px
            ) !important;

        line-height: .98;

        letter-spacing: -.045em;
    }


    .contact-page .contact-section--closing .contact-copy {

        max-width: none;

        font-size: 13px;

        line-height: 1.65;
    }

}


/* ==========================================================================
   28. RESPONSIVE — 600px
   ========================================================================== */

@media (max-width: 600px) {

    .contact-page .contact-section--hero {

        padding:
            65px
            0
            58px;
    }


    .contact-page .contact-section--hero h1 {

        font-size:
            clamp(
                43px,
                13vw,
                62px
            ) !important;

        line-height: .94;
    }


    .contact-page .contact-section--hero .contact-copy {

        font-size: 12px;

        line-height: 1.75;
    }


    .contact-page .contact-section__glow {

        width: 360px;
        height: 360px;

        right: -240px;

        opacity: .70;
    }


    .contact-page .contact-form-section {

        padding:
            68px
            0
            75px;
    }


    .contact-page .contact-form-section .section-heading {

        margin-bottom: 34px;
    }


    .contact-page .contact-form-section .section-heading h2 {

        font-size:
            clamp(
                40px,
                11vw,
                54px
            ) !important;

        line-height: .97;
    }


    .contact-page .contact-form {

        padding:
            24px
            18px;
    }


    .contact-page .contact-form .row {

        --bs-gutter-y: 1rem;
    }


    .contact-page .contact-form .btn--primary {

        width: 100%;

        min-height: 50px;
    }


    .contact-page .contact-form .small.text-muted {

        max-width: none;
    }


    .contact-page .contact-engagement-section .capability-grid {

        grid-template-columns: 1fr;
    }


    .contact-page .contact-engagement-section .capability-card {

        min-height: 200px;
    }


    .contact-page .contact-section--closing {

        padding:
            68px
            0
            75px;
    }


    .contact-page .contact-section--closing h1,
    .contact-page .contact-section--closing h2 {

        font-size:
            clamp(
                40px,
                11vw,
                56px
            ) !important;
    }


    .contact-page .contact-section--closing .contact-copy {

        font-size: 12px;

        line-height: 1.75;
    }

}


/* ==========================================================================
   29. RESPONSIVE — 480px
   ========================================================================== */

@media (max-width: 480px) {

    .contact-page > .container,
    .contact-page .container {

        width:
            calc(100% - 24px);
    }


    .contact-page .contact-section--hero {

        padding:
            58px
            0
            52px;
    }


    .contact-page .contact-section--hero h1 {

        font-size:
            clamp(
                40px,
                13.5vw,
                54px
            ) !important;
    }


    .contact-page .contact-form-section .section-heading h2 {

        font-size:
            clamp(
                37px,
                11.5vw,
                49px
            ) !important;
    }


    .contact-page .contact-form {

        padding:
            20px
            15px;
    }


    .contact-page .contact-form .form-label {

        font-size:
            8px !important;
    }


    .contact-page .contact-form .form-control,
    .contact-page .contact-form .form-select {

        min-height: 46px;

        font-size:
            12px !important;
    }


    .contact-page .contact-form textarea.form-control {

        min-height: 145px;
    }


    .contact-page .contact-form .small.text-muted {

        font-size:
            9px !important;
    }


    .contact-page .contact-form .btn--primary {

        min-height: 48px;

        font-size:
            8px !important;
    }


    .contact-page .contact-section--closing h1,
    .contact-page .contact-section--closing h2 {

        font-size:
            clamp(
                37px,
                11.5vw,
                52px
            ) !important;

        line-height: .98;
    }

}


/* ==========================================================================
   30. ACCESSIBILITY
   ========================================================================== */

.contact-page a:focus-visible,
.contact-page button:focus-visible,
.contact-page input:focus-visible,
.contact-page select:focus-visible,
.contact-page textarea:focus-visible {

    outline:
        2px solid
        var(--contact-blue);

    outline-offset: 3px;
}


/* ==========================================================================
   31. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .contact-page *,
    .contact-page *::before,
    .contact-page *::after {

        transition: none !important;

        animation: none !important;
    }

}