/* ============================================
   SECTION: Get in Touch — headline + intake form
   Centered header over a two-column layout: contact
   cards on the left, the embedded Salesforce FastForms
   intake form restyled to match ANNA branding on the right.
   ============================================ */

.contact-page {
    --contact-field-radius: 10px;
    --contact-field-border: #eadfe3;
    --contact-field-bg: #fff;
    --contact-field-focus: var(--color-primary);
    position: relative;
    padding: 84px var(--section-side-padding) 110px;
    background:
        radial-gradient(ellipse 80% 50% at 10% 0%, rgba(255, 100, 133, 0.12), transparent 55%),
        radial-gradient(ellipse 60% 40% at 95% 15%, rgba(255, 219, 140, 0.35), transparent 50%),
        linear-gradient(180deg, #fff7f9 0%, #fdf8eb 42%, #fff5f8 100%);
    overflow-x: clip;
}

.contact-page__inner {
    position: relative;
    z-index: 1;
    max-width: var(--container-max);
    margin-inline: auto;
}

/* ----- Header ----- */
.contact-page__header {
    max-width: 640px;
    margin: 0 auto 56px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.contact-page__header .eyebrow {
    margin: 0;
}

.contact-page__heading {
    font-family: var(--font-display);
    font-size: 56px;
    font-weight: var(--font-weight-normal);
    line-height: 58px;
    letter-spacing: -2px;
    color: var(--color-text-heading);
    margin: 0;
}
.contact-page__heading .accent-script {
    font-size: 56px;
    line-height: 58px;
    letter-spacing: -0.03em;
    color: var(--color-primary);
}

.contact-page__sub {
    font-size: 21px;
    font-weight: var(--font-weight-medium);
    line-height: 30px;
    color: var(--color-text-heading);
    margin: 0;
}

.contact-page__lede {
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text-body);
    margin: 0;
}

/* ----- Two-column layout ----- */
.contact-page__grid {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

/* ----- Contact cards (left) ----- */
.contact-page__aside {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: sticky;
    top: 24px;
}

.contact-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: rgba(255, 255, 255, 0.92);
    border: 2px solid var(--color-primary-light);
    border-radius: 14px;
    text-decoration: none;
    backdrop-filter: blur(6px);
    transition:
        box-shadow var(--transition-fast),
        transform var(--transition-fast),
        border-color var(--transition-fast);
}
.contact-card:hover {
    box-shadow: var(--shadow-card-hover);
    border-color: rgba(255, 100, 133, 0.45);
    transform: translateY(-2px);
}

.contact-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: var(--color-primary-light);
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.contact-card__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.contact-card__label {
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    line-height: 20px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-body);
}
.contact-card__value {
    font-family: var(--font-display);
    font-size: 16px;
    line-height: 24px;
    color: var(--color-text-heading);
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Fallback notice — prominent, above the form */
.contact-page__alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 28px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #fffbf1 0%, #fff5f8 100%);
    border: 2px solid var(--color-accent-yellow-border);
    border-radius: 12px;
    font-size: 15px;
    font-weight: var(--font-weight-medium);
    line-height: 24px;
    color: var(--color-text-heading);
}
.contact-page__alert img {
    flex-shrink: 0;
    margin-top: -2px;
}
.contact-page__alert a {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    overflow-wrap: anywhere;
}
.contact-page__alert a:hover {
    text-decoration: underline;
}

/* ----- Form card (right) ----- */
.contact-page__form-card {
    position: relative;
    background: var(--color-white);
    border: 1px solid rgba(255, 100, 133, 0.14);
    border-radius: 20px;
    box-shadow:
        0 1px 0 rgba(255, 100, 133, 0.06),
        0 18px 40px rgba(234, 98, 126, 0.12);
    padding: 36px 40px 40px;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.contact-page__form-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--color-primary) 0%, #ff98c6 55%, var(--color-accent-yellow) 100%);
}

.contact-page__form {
    min-height: 320px;
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
}

.contact-page__fineprint {
    margin: 24px 0 0;
    font-size: 13px;
    line-height: 20px;
    color: var(--color-text-body);
    text-align: center;
}
.contact-page__fineprint a {
    color: var(--color-primary);
    text-decoration: none;
}
.contact-page__fineprint a:hover {
    text-decoration: underline;
}

/* ============================================
   Salesforce FastForms — brand overrides
   Force stacked labels + responsive field grid
   and restyle controls to match ANNA inputs.
   ============================================ */

.contact-page__form #dvFastForms,
.contact-page__form .ff-form-main,
.contact-page__form .ff-form-main > div,
.contact-page__form form {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-family: var(--font-body) !important;
    color: var(--color-text-heading);
}

.contact-page__form .ff-form-main,
.contact-page__form .ff-page-row,
.contact-page__form .ff-group-row {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Field grid: two columns on desktop, labels stacked above controls */
.contact-page__form .ff-group-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px 18px !important;
}

/* Default field cell: label above control */
.contact-page__form .ff-item-row,
.contact-page__form .ff-group-row > .ff-item-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    float: none !important;
    clear: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    vertical-align: top !important;
    overflow: visible !important;
    min-width: 0 !important;
}

/* Full-width rows: title, checkbox groups, notes, submit */
.contact-page__form .ff-item-row:has(.ff-section-header),
.contact-page__form .ff-item-row:has(.ff-select-to-checkbox-ul),
.contact-page__form .ff-item-row:has(.ff-textarea),
.contact-page__form .ff-item-row:has(textarea),
.contact-page__form .ff-group-row > .ff-item-row:has(.ff-section-header),
.contact-page__form .ff-group-row > .ff-item-row:has(.ff-select-to-checkbox-ul),
.contact-page__form .ff-group-row > .ff-item-row:has(.ff-textarea),
.contact-page__form .ff-group-row > .ff-item-row:has(textarea),
.contact-page__form .ff-submit-btn,
.contact-page__form .ff-footer-row,
.contact-page__form .ff-footer-group {
    width: 100% !important;
    grid-column: 1 / -1 !important;
    flex: 1 1 100% !important;
}

.contact-page__form .ff-item-row[style*="display: none"],
.contact-page__form .ff-item-row[style*="display:none"] {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.contact-page__form .ff-label-col,
.contact-page__form .ff-field-col,
.contact-page__form .ff-col-1,
.contact-page__form .ff-col-2,
.contact-page__form .ff-section-col {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
}

.contact-page__form .ff-label-col {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 4px !important;
}

.contact-page__form .ff-section-header,
.contact-page__form label.ff-section-header,
.contact-page__form .sectionHeader:not(.ff-btn-submit) {
    display: block !important;
    width: 100% !important;
    margin: 0 0 4px !important;
    padding: 0 0 14px !important;
    border-bottom: 1px solid rgba(255, 100, 133, 0.18);
    font-family: var(--font-display) !important;
    font-size: 24px !important;
    font-weight: var(--font-weight-semibold) !important;
    line-height: 1.3 !important;
    letter-spacing: -0.4px !important;
    color: var(--color-text-heading) !important;
    background: none !important;
}

.contact-page__form .ff-label,
.contact-page__form label.ff-label {
    display: inline !important;
    margin: 0 !important;
    font-family: var(--font-label) !important;
    font-size: 13px !important;
    font-weight: var(--font-weight-semibold) !important;
    line-height: 1.4 !important;
    letter-spacing: 0.02em !important;
    color: var(--color-text-heading) !important;
}

.contact-page__form .ff-required-mark,
.contact-page__form .requiredSpan {
    color: var(--color-primary) !important;
    font-weight: var(--font-weight-bold) !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

/* Text / select / textarea controls */
.contact-page__form input.ff-type-text,
.contact-page__form input.ff-input-type,
.contact-page__form input[type="textbox"],
.contact-page__form input[type="text"],
.contact-page__form input[type="email"],
.contact-page__form input[type="tel"],
.contact-page__form input[type="number"],
.contact-page__form select.ff-select-type:not(.custom-select-offscreen):not(.ff-multipicklist),
.contact-page__form select.ff-singlepicklist,
.contact-page__form .ff-field-col > select:not(.custom-select-offscreen):not(.ff-multipicklist),
.contact-page__form textarea.ff-textarea,
.contact-page__form textarea {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 1.5px solid var(--contact-field-border) !important;
    border-radius: var(--contact-field-radius) !important;
    background-color: var(--contact-field-bg) !important;
    box-shadow: inset 0 1px 2px rgba(12, 39, 51, 0.03) !important;
    font-family: var(--font-body) !important;
    font-size: 16px !important; /* prevents iOS zoom on focus */
    font-weight: var(--font-weight-normal) !important;
    line-height: 1.4 !important;
    color: var(--color-text-heading) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background-color var(--transition-fast) !important;
    box-sizing: border-box !important;
}

.contact-page__form select.ff-select-type:not(.custom-select-offscreen):not(.ff-multipicklist),
.contact-page__form select.ff-singlepicklist,
.contact-page__form .ff-field-col > select:not(.custom-select-offscreen):not(.ff-multipicklist) {
    padding-right: 40px !important;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--color-text-body) 50%),
        linear-gradient(135deg, var(--color-text-body) 50%, transparent 50%) !important;
    background-position:
        calc(100% - 18px) calc(50% - 2px),
        calc(100% - 12px) calc(50% - 2px) !important;
    background-size: 6px 6px, 6px 6px !important;
    background-repeat: no-repeat !important;
    cursor: pointer !important;
}

/* FastForms keeps a real <select> for checkbox multipicklists — keep it off-screen */
.contact-page__form select.custom-select-offscreen,
.contact-page__form select.ff-multipicklist {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    appearance: none !important;
}

.contact-page__form textarea.ff-textarea,
.contact-page__form textarea {
    min-height: 120px !important;
    resize: vertical !important;
}

.contact-page__form input.ff-type-text:hover,
.contact-page__form input.ff-input-type:hover,
.contact-page__form input[type="textbox"]:hover,
.contact-page__form select.ff-singlepicklist:hover,
.contact-page__form select.ff-select-type:not(.custom-select-offscreen):not(.ff-multipicklist):hover,
.contact-page__form textarea:hover {
    border-color: rgba(255, 100, 133, 0.45) !important;
}

.contact-page__form input.ff-type-text:focus,
.contact-page__form input.ff-input-type:focus,
.contact-page__form input[type="textbox"]:focus,
.contact-page__form select.ff-singlepicklist:focus,
.contact-page__form select.ff-select-type:not(.custom-select-offscreen):not(.ff-multipicklist):focus,
.contact-page__form textarea:focus {
    outline: none !important;
    border-color: var(--contact-field-focus) !important;
    box-shadow:
        0 0 0 4px rgba(255, 100, 133, 0.16),
        inset 0 1px 2px rgba(12, 39, 51, 0.03) !important;
    background-color: #fff !important;
}

/* Checkbox groups */
.contact-page__form .ff-select-to-checkbox-list,
.contact-page__form .custom-flex-control-container {
    width: 100% !important;
}

.contact-page__form .ff-select-to-checkbox-ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.contact-page__form .ff-checkbox-li {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 1.5px solid var(--contact-field-border) !important;
    border-radius: var(--contact-field-radius) !important;
    background: #fff !important;
    transition:
        border-color var(--transition-fast),
        background-color var(--transition-fast),
        box-shadow var(--transition-fast) !important;
    cursor: pointer !important;
}

.contact-page__form .ff-checkbox-li:hover {
    border-color: rgba(255, 100, 133, 0.4) !important;
    background: var(--color-primary-bg) !important;
}

.contact-page__form .ff-checkbox-li:has(.ff-ext-selected),
.contact-page__form .ff-checkbox-li:has([aria-checked="true"]) {
    border-color: rgba(255, 100, 133, 0.55) !important;
    background: var(--color-primary-bg) !important;
    box-shadow: 0 0 0 3px rgba(255, 100, 133, 0.1) !important;
}

.contact-page__form .ff-ext-checkbox-css {
    flex-shrink: 0 !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    border: 2px solid rgba(255, 100, 133, 0.55) !important;
    border-radius: 6px !important;
    background-color: #fff !important;
    background-image: none !important;
    background-size: auto !important;
    box-sizing: border-box !important;
    position: relative !important;
}

.contact-page__form .ff-ext-checkbox-css.ff-ext-selected,
.contact-page__form .ff-ext-checkbox-css[aria-checked="true"],
.contact-page__form .ff-ext-checkbox-css[data-ff-ext-checkbox-checked="true"] {
    background-color: var(--color-primary) !important;
    background-image: none !important;
    border-color: var(--color-primary) !important;
}

.contact-page__form .ff-ext-checkbox-css.ff-ext-selected::after,
.contact-page__form .ff-ext-checkbox-css[aria-checked="true"]::after,
.contact-page__form .ff-ext-checkbox-css[data-ff-ext-checkbox-checked="true"]::after {
    content: "" !important;
    position: absolute !important;
    left: 5px !important;
    top: 1px !important;
    width: 5px !important;
    height: 10px !important;
    border: solid #fff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}

.contact-page__form .ff-checkbox-li label,
.contact-page__form .ff-select-to-checkbox-ul label {
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: var(--font-weight-medium) !important;
    line-height: 1.4 !important;
    color: var(--color-text-heading) !important;
    cursor: pointer !important;
}

/* Footnote + submit */
.contact-page__form .ff-submit-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
}

.contact-page__form .footnoteDiv {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
}

.contact-page__form .ff-footnote-label,
.contact-page__form .footnoteDiv .ff-label {
    font-size: 13px !important;
    font-weight: var(--font-weight-medium) !important;
    color: var(--color-text-body) !important;
    letter-spacing: 0 !important;
}

.contact-page__form .btnDiv {
    display: flex !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    width: 100% !important;
}

.contact-page__form input.ff-btn-submit,
.contact-page__form .ff-btn-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 180px !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 14px 28px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 10px !important;
    background: var(--color-primary) !important;
    background-image: none !important;
    box-shadow: var(--shadow-pink-btn) !important;
    color: #fff !important;
    font-family: var(--font-body) !important;
    font-size: 16px !important;
    font-weight: var(--font-weight-semibold) !important;
    letter-spacing: -0.2px !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    transition:
        background-color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast) !important;
}

.contact-page__form input.ff-btn-submit:hover,
.contact-page__form .ff-btn-submit:hover {
    background: var(--color-primary-dark) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(234, 98, 126, 0.28) !important;
}

.contact-page__form input.ff-btn-submit:focus,
.contact-page__form .ff-btn-submit:focus {
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(255, 100, 133, 0.25) !important;
}

/* Hide leftover Salesforce chrome / select2 offscreen noise */
.contact-page__form .select2-container,
.contact-page__form .select2-drop,
.contact-page__form .select2-offscreen,
.contact-page__form .custom-select-offscreen {
    max-width: 100% !important;
}

.contact-page__form .ff-alink,
.contact-page__form .lookup-link,
.contact-page__form .lookup-clear {
    max-width: 100%;
}

/* ----- Responsive ----- */
@media (max-width: 1100px) {
    .contact-page__grid {
        grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
        gap: 20px;
    }
    .contact-page__form-card {
        padding: 32px 28px;
    }
}

@media (max-width: 960px) {
    .contact-page {
        padding: 56px var(--section-side-padding) 72px;
    }
    .contact-page__grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .contact-page__aside {
        order: 2;
        position: static;
        min-width: 0;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }
    .contact-page__form-card {
        order: 1;
        padding: 28px 22px;
    }
}

@media (max-width: 768px) {
    .contact-page__heading,
    .contact-page__heading .accent-script {
        font-size: 40px;
        line-height: 46px;
    }
    .contact-page__sub {
        font-size: 18px;
        line-height: 26px;
    }
    .contact-page__aside {
        grid-template-columns: 1fr;
    }
    .contact-page__form .ff-group-row {
        grid-template-columns: 1fr !important;
    }
    .contact-page__form .ff-item-row,
    .contact-page__form .ff-group-row > .ff-item-row {
        width: 100% !important;
        grid-column: auto !important;
    }
    .contact-page__form .ff-item-row:has(.ff-section-header),
    .contact-page__form .ff-item-row:has(.ff-select-to-checkbox-ul),
    .contact-page__form .ff-item-row:has(.ff-textarea),
    .contact-page__form .ff-item-row:has(textarea) {
        grid-column: 1 / -1 !important;
    }
    .contact-page__form .ff-section-header,
    .contact-page__form label.ff-section-header {
        font-size: 20px !important;
    }
    .contact-page__form input.ff-btn-submit,
    .contact-page__form .ff-btn-submit {
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    .contact-page__header {
        margin-bottom: 36px;
        gap: 12px;
    }
    .contact-page__form-card {
        padding: 22px 16px 24px;
        border-radius: 16px;
    }
    .contact-page__alert {
        padding: 14px 12px;
        font-size: 14px;
        line-height: 22px;
    }
    .contact-card {
        padding: 16px 18px;
    }
}

@media (max-width: 380px) {
    .contact-page__form-card {
        padding: 18px 12px 20px;
    }
}