.radio-label:has(input:disabled) {
    opacity: 0.4;
    cursor: not-allowed;
}


.section-divider {
    width: calc(100% - 64px);
    max-width: 1200px;

    height: 2px;

    margin: 120px auto 100px;

    background: var(--charcoal);
}


/* ============================================================
   SITE CONTENT
   ============================================================ */

.site-content {
    width: 94%;
    max-width: 1400px;

    margin-left: 3%;
    margin-right: auto;
}


body {
    position: relative;
}


/* ============================================================
   BACKGROUND SHAPES
   ============================================================ */

.background-shapes {
    position: absolute;

    top: -50px;
    left: 0;
    right: 0;
    bottom: -500px;

    width: 100%;

    overflow: hidden;

    z-index: -1;

    pointer-events: none;

    display: block;
}


.background-shapes img {
    position: absolute;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ============================================================
   CONTACT SECTION
   ============================================================ */

.contact {
    position: relative;

    max-width: 1200px;

    margin: 24px auto 0;

    padding: 70px 100px 90px;

    box-sizing: border-box;

    background: var(--pissy-cream);

    border-radius: 14px;

    box-shadow:
        20px 20px 0 var(--charcoal),
        0 0 20px var(--shadow-halo);
}


/* ============================================================
   BACK TO HOME
   ============================================================ */

.back-home-link {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 40px;

    font-family: var(--secondary-font);
    font-size: 13px;
    font-weight: 400;

    color: var(--charcoal);

    text-decoration: underline;
    text-underline-offset: 3px;

    transition: color 0.2s ease;
}


.back-home-link:hover {
    color: var(--charcoal-hover);
}


/* ============================================================
   HEADING / INTRO
   ============================================================ */

.contact h2 {
    margin: 0;

    max-width: 480px;

    font-family: inherit;

    font-size: clamp(30px, 3vw, 40px);
    font-weight: 400;

    line-height: 1.1;
    letter-spacing: -0.8px;

    color: var(--black);
}


.contact-intro {
    margin: 24px 0 0;

    font-family: var(--secondary-font);
    font-size: 15px;
    font-weight: 400;

    line-height: 1.6;

    color: var(--warm-grey);
}


/* ============================================================
   FORM LAYOUT
   ============================================================ */

#contact-form {
    display: flex;
    flex-direction: column;

    gap: 34px;

    margin-top: 48px;
}


.form-row {
    display: flex;
    flex-direction: column;

    gap: 9px;

    border: none;

    padding: 0;
    margin: 0;
}


.form-row:has(#heard-about) {
    gap: 20px;

    padding: 10px 0 20px;
}


.form-row legend {
    padding: 0;

    font-family: var(--secondary-font);
    font-size: 14px;

    color: var(--charcoal);
}


.form-row label:not(.radio-label):not(.checkbox-label) {
    font-family: var(--secondary-font);
    font-size: 14px;

    color: var(--charcoal);
}


/* ============================================================
   INPUTS
   ============================================================ */

.contact input[type="text"],
.contact input[type="email"],
.contact input[type="tel"],
.contact select,
.contact textarea {
    width: 100%;

    padding: 12px 0;

    box-sizing: border-box;

    background: transparent;

    border: none;
    border-bottom: 1px solid var(--warm-grey);

    font-family: var(--secondary-font);
    font-size: 15px;

    color: var(--charcoal);

    transition:
        border-color 0.25s ease,
        background-color 0.25s ease;
}


.contact select {
    appearance: none;
    -webkit-appearance: none;

    cursor: pointer;
}


.contact textarea {
    resize: vertical;

    min-height: 100px;

    line-height: 1.6;
}


.contact input:focus,
.contact select:focus,
.contact textarea:focus {
    outline: none;

    border-bottom-color: var(--sage-dark);

    background-color: var(--pale-nothing);
}


/* ============================================================
   PREFERRED CONTACT
   ============================================================ */

.preferred-contact {
    gap: 12px;
}


.preferred-contact-options {
    display: flex;

    justify-content: center;

    gap: clamp(20px, 5vw, 70px);

    margin-top: 4px;
}


.radio-label {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    font-family: var(--secondary-font);
    font-size: 14px;

    color: var(--charcoal);

    cursor: pointer;
}


.radio-label input[type="radio"] {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.radio-label::before {
    content: "";

    width: 18px;
    height: 18px;

    flex-shrink: 0;

    box-sizing: border-box;

    border: 1.5px solid var(--charcoal);

    border-radius: 5px;

    background: transparent;

    transition: transform 0.2s ease;
}


.radio-label:has(input[type="radio"]:checked)::before {
    background:
        linear-gradient(
            45deg,
            transparent 46%,
            var(--charcoal) 46%,
            var(--charcoal) 54%,
            transparent 54%
        ),
        linear-gradient(
            -45deg,
            transparent 46%,
            var(--charcoal) 46%,
            var(--charcoal) 54%,
            transparent 54%
        );
}


.radio-label:hover::before {
    transform: scale(1.08);
}


.radio-label:has(input[type="radio"]:focus-visible)::before {
    outline: 2px solid var(--sage-dark);
    outline-offset: 3px;
}


/* ============================================================
   PREFERRED CONTACT HELPER
   ============================================================ */

.contact-preference-help {
    --help-arrow-position: 50%;

    position: relative;

    align-self: center;

    width: min(420px, 100%);
    height: 52px;

    box-sizing: border-box;

    padding: 8px 24px;

    display: flex;

    align-items: center;
    justify-content: center;

    font-family: var(--secondary-font);
    font-size: 11px;

    line-height: 1.4;

    text-align: center;

    color: var(--charcoal);

    background: var(--cream-light);

    border-radius: 999px;

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}


.contact-preference-help::before {
    content: "";

    position: absolute;

    top: -5px;
    left: var(--help-arrow-position);

    width: 10px;
    height: 10px;

    background: var(--cream-light);

    transform: translateX(-50%) rotate(45deg);
}


.contact-preference-help.is-changing {
    transform: translateY(-3px);
}


/* ============================================================
   MESSAGE CHARACTER COUNT
   ============================================================ */

#message-count {
    transition: color 0.2s ease;
}


#message-count.character-count-warning {
    color: var(--finally-some-colour-orange);
}


/* ============================================================
   REQUIRED ASTERISKS
   ============================================================ */

.required-star {
    color: var(--finally-some-colour-orange);
}


/* ============================================================
   HONEYPOT
   ============================================================ */

.hp-field {
    position: absolute;

    left: -9999px;

    width: 1px;
    height: 1px;

    overflow: hidden;
}


/* ============================================================
   CONSENT CHECKBOX
   ============================================================ */

.consent-row {
    margin-top: 4px;
}


.checkbox-label {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    font-family: var(--secondary-font);
    font-size: 13px;

    line-height: 1.6;

    color: var(--warm-grey);

    cursor: pointer;
}


.checkbox-label input {
    margin-top: 3px;

    flex-shrink: 0;
}


.checkbox-label input:focus-visible {
    outline: 2px solid var(--sage-dark);
    outline-offset: 3px;
}


.checkbox-label a {
    color: var(--charcoal);

    text-decoration: underline;
    text-underline-offset: 2px;
}


/* ============================================================
   SUBMIT BUTTON
   ============================================================ */

.submit-button {
    align-self: flex-start;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    margin: auto;

    min-height: 48px;

    padding: 0 28px;

    box-sizing: border-box;

    background: var(--charcoal);

    border: 1px solid var(--charcoal);
    border-radius: 20px;

    color: var(--white);

    font-family: inherit;
    font-size: 13px;
    font-weight: 500;

    cursor: pointer;

    transition:
        background-color 0.25s ease,
        opacity 0.25s ease;
}


.submit-button:hover {
    background: var(--charcoal-hover);
}


.submit-button:disabled {
    opacity: 0.6;

    cursor: default;
}


/* ============================================================
   STATUS MESSAGE
   ============================================================ */

.form-status {
    min-height: 20px;

    margin: 4px 0 0;

    font-family: var(--secondary-font);
    font-size: 13px;

    color: var(--sage-dark);
}


.form-status--error {
    color: var(--finally-some-colour-orange);
}


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

@media (max-width: 1150px) {

    .site-content {
        width: 100%;
        max-width: 1400px;

        margin-left: auto;
        margin-right: auto;
    }


    .contact {
        width: calc(100% - 24px);

        margin: 16px auto 0;

        padding: 56px 24px 60px;

        border-radius: 12px;

        box-shadow:
            0 0 0 5px var(--charcoal),
            0 10px 120px var(--shadow-halo);
    }


    .contact h2 {
        max-width: none;

        font-size: 30px;
    }


    .submit-button {
        width: 100%;
    }

}


@media (max-width: 480px) {

    .contact textarea {
        min-height: 200px;
    }


    .h-captcha {
        width: 100%;
        max-width: 100%;

        overflow: hidden;
    }


    .h-captcha iframe {
        max-width: 100%;
    }

}
/* ============================================================
   DARK MODE
   ============================================================ */

@media (prefers-color-scheme: dark) {

    /* ── Contact card ───────────────────────────────────────── */

    .contact {
        background: var(--dark-bg);

        box-shadow:
            20px 20px 0 var(--dark-mode-shadow),
            0 0 20px var(--shadow-halo);
    }


    /* ── Back to home ───────────────────────────────────────── */

    .back-home-link {
        color: var(--pale-nothing);
    }

    .back-home-link:hover {
        color: var(--white);
    }


    /* ── Heading / intro ────────────────────────────────────── */

    .contact h2 {
        color: var(--pale-nothing);
    }


    .contact-intro {
        color: var(--sage);
    }


    /* ── Form labels ────────────────────────────────────────── */

    .form-row legend,
    .form-row label:not(.radio-label):not(.checkbox-label) {
        color: var(--pale-nothing);
    }


    /* ── Inputs ──────────────────────────────────────────────── */

    .contact input[type="text"],
    .contact input[type="email"],
    .contact input[type="tel"],
    .contact select,
    .contact textarea,
    .character-count {

        color: var(--pale-nothing);

        border-bottom-color: var(--spinning-plate-green);
    }


    .contact input::placeholder,
    .contact textarea::placeholder {
        color: var(--warm-grey);
    }


    .contact input:focus,
    .contact select:focus,
    .contact textarea:focus {

        border-bottom-color: var(--sage);

        background-color: rgba(181, 196, 177, 0.08);
    }


    /* ── Select option list ─────────────────────────────────── */

    .contact select option {
        background: var(--dark-bg);
        color: var(--pale-nothing);
    }


    /* ── Preferred contact ──────────────────────────────────── */

    .radio-label {
        color: var(--pale-nothing);
    }


    .radio-label::before {
        border-color: var(--sage);
    }


    .radio-label:has(input[type="radio"]:checked)::before {
        background:
            linear-gradient(
                45deg,
                transparent 46%,
                var(--sage) 46%,
                var(--sage) 54%,
                transparent 54%
            ),
            linear-gradient(
                -45deg,
                transparent 46%,
                var(--sage) 46%,
                var(--sage) 54%,
                transparent 54%
            );
    }


    .radio-label:has(input[type="radio"]:focus-visible)::before {
        outline-color: var(--sage);
    }


    /* ── Preferred contact helper ───────────────────────────── */

    .contact-preference-help {
        color: var(--dark-bg);

        background: var(--sage);
    }


    .contact-preference-help::before {
        background: var(--sage);
    }


    /* ── Consent ────────────────────────────────────────────── */

    .checkbox-label {
        color: var(--sage);
    }


    .checkbox-label input:focus-visible {
        outline-color: var(--sage);
    }


    .checkbox-label a {
        color: var(--pale-nothing);
    }


    /* ── Required markers / status ──────────────────────────── */

    .required-star {
        color: var(--finally-some-colour-orange);
    }


    .form-status {
        color: var(--sage);
    }


    .form-status--error {
        color: var(--finally-some-colour-orange);
    }


    /* ── Submit button ──────────────────────────────────────── */

    .submit-button {
        background: var(--pale-nothing);

        border-color: var(--pale-nothing);

        color: var(--dark-bg);
    }


    .submit-button:hover {
        background: var(--sage);

        border-color: var(--sage);
    }
    .section-divider {
        background-color: var(--pale-nothing);
    }

    


    /* ── Footer ──────────────────────────────────────────────── */

    footer {
        background: var(--dark-bg);

        box-shadow:
            20px 20px 0 var(--dark-mode-shadow),
            0 0 20px var(--shadow-halo);
    }


    .footer-brand h2 {
        color: var(--pale-nothing);
    }


    .footer-brand p {
        color: var(--sage);
    }


    .footer-links a {
        color: var(--pale-nothing);
    }


    .footer-links a:hover {
        color: var(--sage);
    }


    .footer-bottom p {
        color: var(--sage);
    }


    /* ── Contact CTA ────────────────────────────────────────── */

    /* ── Contact CTA ────────────────────────────────────────── */

    .contact-cta-content {
        background: var(--dark-bg);

        box-shadow:
            20px 20px 0 var(--dark-mode-shadow),
            0 0 20px var(--shadow-halo);
    }


    .contact-cta-text h2 {
        color: var(--pale-nothing);
    }


    .contact-cta-text p {
        color: var(--sage);
    }


    .contact-cta-button {
        background: var(--pale-nothing);

        color: var(--dark-bg);
    }


    .contact-cta-button:hover {
        background: var(--sage);

        color: var(--dark-bg);
    }

}