.bb-contact {

    min-height: 100vh;

    background: #070707;

    color: #fffaf0;

}


.bb-contact-container {

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

    margin-inline: auto;

}


.bb-contact-hero {

    padding: 10px 0 90px;

}


.bb-contact-eyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 22px;

    color: var(--bb-gold);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.16em;

    text-transform: uppercase;

}


.bb-contact-eyebrow span {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: var(--bb-gold);

}


.bb-contact-hero h1 {

    max-width: 760px;

    margin: 0;

    font-size: clamp(52px, 7vw, 92px);

    line-height: 0.98;

    letter-spacing: -0.05em;

}


.bb-contact-hero h1 em {

    display: block;

    color: var(--bb-gold);

    font-style: normal;

}


.bb-contact-hero p {

    max-width: 650px;

    margin-top: 28px;

    color: rgba(255, 250, 240, 0.68);

    font-size: 18px;

    line-height: 1.7;

}


.bb-contact-section {

    padding: 0px 0 120px;

}


.bb-contact-grid {

    display: grid;

    grid-template-columns: minmax(0, 0.8fr) minmax(420px, 1.2fr);

    align-items: start;

    gap: clamp(50px, 8vw, 100px);

}


.bb-contact-details {

    position: sticky;

    top: 130px;

}


.bb-contact-kicker {

    display: block;

    margin-bottom: 18px;

    color: var(--bb-gold);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.16em;

    text-transform: uppercase;

}


.bb-contact-details h2 {

    margin: 0;

    color: #fffaf0;

    font-size: clamp(38px, 4.5vw, 62px);

    line-height: 1.04;

    letter-spacing: -0.045em;

}


.bb-contact-details > p {

    margin: 24px 0 0;

    color: rgba(255, 250, 240, 0.68);

    font-size: 16px;

    line-height: 1.75;

}


.bb-contact-info {

    display: grid;

    gap: 14px;

    margin-top: 36px;

}


.bb-contact-info a,

.bb-contact-info div {

    display: flex;

    flex-direction: column;

    gap: 5px;

    padding: 18px 20px;

    border: 1px solid rgba(223, 188, 106, 0.25);

    border-radius: 18px;

    color: inherit;

    background: rgba(255, 255, 255, 0.025);

    text-decoration: none;

}


.bb-contact-info span {

    color: rgba(255, 250, 240, 0.5);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.1em;

    text-transform: uppercase;

}


.bb-contact-info strong {

    color: var(--bb-gold);

    font-size: 15px;

}


.bb-contact-form {

    display: grid;

    gap: 22px;

    padding: clamp(28px, 5vw, 48px);

    border: 1px solid rgba(223, 188, 106, 0.4);

    border-radius: 30px;

    background:

        radial-gradient(

            circle at 85% 12%,

            rgba(223, 188, 106, 0.1),

            transparent 28%

        ),

        #0b0b0b;

    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);

}


.bb-contact-form__row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

}


.bb-contact-field {

    display: grid;

    gap: 9px;

}


.bb-contact-field label {

    color: #fffaf0;

    font-size: 13px;

    font-weight: 750;

}


.bb-contact-field input,

.bb-contact-field select,

.bb-contact-field textarea {

    width: 100%;

    border: 1px solid rgba(223, 188, 106, 0.24);

    border-radius: 15px;

    color: #fffaf0;

    background: rgba(255, 255, 255, 0.035);

    font: inherit;

    outline: none;

    transition:

        border-color 180ms ease,

        background 180ms ease,

        box-shadow 180ms ease;

}


.bb-contact-field input,

.bb-contact-field select {

    min-height: 54px;

    padding: 0 16px;

}


.bb-contact-field textarea {

    min-height: 170px;

    padding: 16px;

    resize: vertical;

}


.bb-contact-field input:focus,

.bb-contact-field select:focus,

.bb-contact-field textarea:focus {

    border-color: var(--bb-gold);

    background: rgba(255, 255, 255, 0.055);

    box-shadow: 0 0 0 4px rgba(223, 188, 106, 0.08);

}


.bb-contact-field select option {

    color: #111;

}


.bb-contact-consent {

    display: grid;

    grid-template-columns: auto 1fr;

    align-items: start;

    gap: 11px;

    color: rgba(255, 250, 240, 0.62);

    font-size: 13px;

    line-height: 1.55;

}


.bb-contact-consent input {

    width: 17px;

    height: 17px;

    margin-top: 2px;

    accent-color: var(--bb-gold);

}


.bb-contact-submit {

    position: relative;

    display: inline-flex;

    width: fit-content;

    min-height: 54px;

    align-items: center;

    justify-content: center;

    padding: 0 56px;

    border: 1px solid var(--bb-gold);

    border-radius: 999px;

    color: #111;

    background: linear-gradient(135deg, #f1d58d, #dfbc6a);

    font: inherit;

    font-weight: 800;

    cursor: pointer;

    transition:

        transform 180ms ease,

        box-shadow 180ms ease;

}


.bb-contact-submit:hover,

.bb-contact-submit:focus-visible {

    transform: translateY(-2px);

    box-shadow: 0 16px 38px rgba(223, 188, 106, 0.28);

}


@media screen and (max-width: 900px) {

    .bb-contact-grid {

        grid-template-columns: 1fr;

    }


    .bb-contact-details {

        position: static;

    }

}


@media screen and (max-width: 600px) {

    .bb-contact-hero {

        padding: 0px 0 65px;

    }


    .bb-contact-section {

        padding-bottom: 80px;

    }


    .bb-contact-form__row {

        grid-template-columns: 1fr;

    }


    .bb-contact-form {

        padding: 25px 20px;

        border-radius: 24px;

    }


    .bb-contact-submit {

        width: 100%;

    }

}


/* =========================================================

   FORM STATES / FEEDBACK

   ========================================================= */


.bb-contact-form-wrap {

    min-width: 0;

}


.bb-contact-alert {

    margin-bottom: 18px;

    padding: 17px 20px;

    border-radius: 16px;

    font-size: 14px;

    font-weight: 700;

    line-height: 1.55;

}


.bb-contact-alert--success {

    border: 1px solid rgba(110, 210, 140, 0.45);

    color: #bff3cc;

    background: rgba(66, 170, 98, 0.12);

}


.bb-contact-alert--error {

    border: 1px solid rgba(235, 115, 115, 0.45);

    color: #ffd0d0;

    background: rgba(190, 60, 60, 0.12);

}


.bb-contact-error {

    display: block;

    color: #ffb5b5;

    font-size: 12px;

    font-weight: 650;

    line-height: 1.45;

}


.bb-contact-field input[aria-invalid="true"],

.bb-contact-field select[aria-invalid="true"],

.bb-contact-field textarea[aria-invalid="true"] {

    border-color: rgba(245, 110, 110, 0.75);

    box-shadow: 0 0 0 4px rgba(220, 70, 70, 0.08);

}


.bb-field-extra {

    position: absolute !important;

    left: -10000px !important;

    width: 1px !important;

    height: 1px !important;

    overflow: hidden !important;

}


.bb-contact-success-card {

    display: flex;

    min-height: 480px;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    padding: clamp(34px, 6vw, 65px);

    border: 1px solid rgba(223, 188, 106, 0.42);

    border-radius: 30px;

    background:

        radial-gradient(

            circle at 85% 12%,

            rgba(223, 188, 106, 0.12),

            transparent 30%

        ),

        #0b0b0b;

    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);

}


.bb-contact-success-card > span {

    display: grid;

    width: 68px;

    height: 68px;

    margin-bottom: 25px;

    place-items: center;

    border: 1px solid rgba(223, 188, 106, 0.45);

    border-radius: 20px;

    background: rgba(223, 188, 106, 0.1);

    font-size: 28px;

}


.bb-contact-success-card h2 {

    margin: 0;

    color: #fffaf0;

    font-size: clamp(38px, 5vw, 62px);

    line-height: 1.05;

    letter-spacing: -0.045em;

}


.bb-contact-success-card p {

    max-width: 520px;

    margin: 20px 0 30px;

    color: rgba(255, 250, 240, 0.68);

    font-size: 16px;

    line-height: 1.75;

}


.bb-contact-consent a {

    color: var(--bb-gold);

    text-underline-offset: 3px;

}


/* =========================================================

   CONTACT HERO DOG

   ========================================================= */


.bb-contact-hero {

    overflow: hidden;

}


.bb-contact-hero__grid {

    display: grid;

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

    align-items: end;

    gap: clamp(30px, 5vw, 80px);

}


.bb-contact-hero__content {

    position: relative;

    z-index: 2;

}


.bb-contact-hero__dog {

    position: relative;

    align-self: end;

    min-height: 520px;

}


.bb-contact-hero__dog img {

    position: absolute;

    right: -20px;

    bottom: -35px;


    z-index: 2;


    width: min(100%, 520px);

    height: auto;


    filter:

        drop-shadow(0 25px 35px rgba(0, 0, 0, 0.45))

        drop-shadow(0 0 22px rgba(214, 176, 61, 0.10));

}


.bb-contact-hero__dog-glow {

    position: absolute;

    right: 17%;

    bottom: 6%;


    width: 70%;

    aspect-ratio: 1;


    border-radius: 50%;


    background: radial-gradient(

        circle,

        rgba(223, 188, 106, 0.16) 0%,

        rgba(223, 188, 106, 0.07) 35%,

        transparent 70%

    );


    filter: blur(22px);

    pointer-events: none;

}/* =========================================================

   SHARED GOLD BUTTON ARROW

   ========================================================= */


.bb-home-button--gold .bb-button-arrow {

    color: #0b0b0b;

    border-color: rgba(0, 0, 0, 0.35);

    background: rgba(0, 0, 0, 0.10);

    box-shadow: none;

}


/* Dark version for gold buttons */

.bb-home-button > .bb-button-arrow--dark {

    color: #090909;


    border-color: rgba(9, 9, 9, 0.28);


    background: rgba(9, 9, 9, 0.04);

}


/* =========================================================

   SHARED BUTTON ARROW

   ========================================================= */


.bb-button-arrow {

    width: 36px;

    height: 36px;

    min-width: 36px;


    display: inline-flex;

    align-items: center;

    justify-content: center;


    border-radius: 50%;


    font-size: 16px;

    line-height: 1;


    flex-shrink: 0;


    transition:

        transform 180ms ease,

        background 180ms ease,

        border-color 180ms ease;

}


.bb-button-arrow--dark {

    border: 1px solid rgba(10, 10, 10, 0.32);


    background: rgba(10, 10, 10, 0.04);


    color: #0a0a0a;

}


/* =========================================================

   TRUE INVERTED GOLD BUTTON

   ========================================================= */


.bb-button--outline-gold {

    position: relative;


    display: inline-flex;

    align-items: center;

    justify-content: center;


    min-height: 54px;

    padding: 0 54px;


    border: 1px solid transparent;

    border-radius: 999px;


    background:

        linear-gradient(#0a0a0a, #0a0a0a) padding-box,

        linear-gradient(135deg, #f1d58d, #d8bb6d) border-box;


    color: #d8bb6d;


    font-weight: 800;

    text-decoration: none;


    transition:

        transform 180ms ease,

        color 180ms ease,

        background 180ms ease;

}


/* Arrow */


.bb-button--outline-gold .bb-button-arrow {

    position: absolute;


    right: 9px;

    top: 50%;


    width: 34px;

    height: 34px;


    display: grid;

    place-items: center;


    border: 1px solid #d8bb6d;

    border-radius: 50%;


    background: transparent;

    color: #d8bb6d;


    transform: translateY(-50%);

}


/* Hover flips back to the normal gold button */


.bb-button--outline-gold:hover {

    background:

        linear-gradient(135deg, #f1d58d, #d8bb6d);


    color: #0a0a0a;


    transform: translateY(-2px);

}


.bb-button--outline-gold:hover .bb-button-arrow {

    border-color: rgba(10, 10, 10, 0.28);


    background: rgba(10, 10, 10, 0.05);


    color: #0a0a0a;

}


/* =========================================================

   CONTACT SUBMIT BUTTON ARROW

   ========================================================= */


.bb-contact-submit > .bb-button-arrow {

    position: absolute;


    right: 9px;

    top: 50%;


    margin: 0;


    transform: translateY(-50%);

}


/* Keep arrow vertically centred on hover */


.bb-contact-submit:hover > .bb-button-arrow,

.bb-contact-submit:focus-visible > .bb-button-arrow {

    transform: translateY(-50%);

}


/* =========================================================

   781px - 950px

   KEEP DOG IN DESKTOP-STYLE POSITION

   ========================================================= */


/* =========================================================

   520px - 780px

   DOG HANGS OFF RIGHT SIDE

   ========================================================= */


/* =========================================================

   CONTACT DOG — LOCKED POSITION FOR 521px+

   ========================================================= */

/* =========================================================
   CONTACT HERO DOG — FINAL RESPONSIVE POSITIONING
   521px+ uses the approved desktop/tablet placement.
   520px and below preserves the existing mobile layout.
   ========================================================= */

@media screen and (min-width: 521px) {

    .bb-contact-hero {
        position: relative;
        overflow: hidden;
    }

    .bb-contact-hero__grid {
        position: relative;
        display: block;
        min-height: 500px;
    }

    .bb-contact-hero__content {
        position: relative;
        z-index: 3;
        max-width: 52%;
        padding-bottom: 0;
    }

    .bb-contact-hero__dog {
        position: absolute;
        top: 25px;
        right: 0;
        z-index: 1;
        width: clamp(320px, 43%, 500px);
        min-height: 0;
        margin: 0;
        opacity: 1;
        pointer-events: none;
    }

    .bb-contact-hero__dog img {
        position: static;
        display: block;
        width: 100%;
        max-width: none;
        height: auto;
        transform: none;
        filter:
            drop-shadow(0 25px 35px rgba(0, 0, 0, 0.45))
            drop-shadow(0 0 22px rgba(214, 176, 61, 0.10));
    }

    .bb-contact-hero__dog-glow {
        left: 50%;
        right: auto;
        bottom: 5%;
        transform: translateX(-50%);
    }
}

.bb-contact-hero__content {
    position: relative;
    z-index: 3;
}

.bb-contact-hero__dog {
    z-index: 1;
}

.bb-contact-hero__dog-glow {
    z-index: 0;
}

@media screen and (max-width: 520px) {

    .bb-contact-hero__grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .bb-contact-hero__content {
        padding-bottom: 0;
    }

    .bb-contact-hero__dog {
        min-height: 420px;
        margin-top: 10px;
    }

    .bb-contact-hero__dog img {
        right: 50%;
        bottom: -35px;
        width: min(85vw, 430px);
        transform: translateX(50%);
    }
}

@media screen and (max-width: 520px) {

    .bb-contact-hero__content {
        position: relative;
        z-index: 3;
    }

    .bb-contact-hero__dog {
        position: relative;

        z-index: 1;

        width: 100%;
        min-height: 420px;

        margin-top: 10px;

        opacity: 1;
    }

    .bb-contact-hero__dog img {
        position: absolute;

        right: 50%;
        bottom: -35px;

        width: min(85vw, 430px);
        height: auto;

        transform: translateX(50%);
    }

    .bb-contact-hero__dog-glow {
        z-index: 0;
    }
}