/* ==========================================================================
   Contact Us (Corporate/ContactUs.aspx) — page-scoped.

   Linked from the page body with its own ?v= so it can change without the
   shared corporate-modern.css cache-bust in CorporateMaster.master.

   Colours come only from the --hre-color-* tokens in hre-design-system.css,
   which already flip for [data-theme="dark"] AND the default
   [data-theme="system"].hre-prefers-dark, so this file needs no dark block.
   The few !important rules below exist to beat corporate-modern.css's global
   `h1..h6 { font-size/weight/margin !important }` and its global
   `.form-control { font-size:14px !important }`, plus the inline display a
   WebForms validator writes on itself — nothing else.

   px, never rem: bootstrap 3 sets html{font-size:10px} on this site.
   ========================================================================== */

/* No background of its own: #wrapper already paints the page ground in both
   themes, and a second shade here showed as a band above the footer.
   Bottom padding is small because #wrapper adds 60px of its own. */
.hre-cx {
    padding-block: 32px 12px;
    color: var(--hre-color-text);
}

/* Mobile first: headline, then the form, then the reasons to trust it. */
.hre-cx__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "intro"
        "form"
        "trust";
    gap: 28px;
}

.hre-cx__intro { grid-area: intro; }
.hre-cx__form  { grid-area: form; }
.hre-cx__trust { grid-area: trust; }

/* Desktop: the form takes the right column from the top of the page, so the
   first field is above the fold; the left column carries headline + proof.
   `auto 1fr` rows keep the proof tight under the headline instead of letting
   the taller form stretch a gap between them. */
@media (min-width: 992px) {
    .hre-cx { padding-block: 56px 24px; }

    .hre-cx__grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "intro form"
            "trust form";
        column-gap: 56px;
        row-gap: 32px;
        align-items: start;
    }
}

/* ---------- Intro ---------- */
.hre-cx .hre-eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--hre-color-accent);
    margin-bottom: 12px;
}

.hre-cx__intro h1 {
    font-size: 32px !important;
    font-weight: 800 !important;
    line-height: 1.15;
    letter-spacing: -0.02em !important;
    color: var(--hre-color-text-strong);
    margin: 0 0 16px !important;
    border: 0 !important;
}

.hre-cx__promise {
    font-size: 17px;
    line-height: 1.6;
    color: var(--hre-color-text-muted);
    margin: 0;
    max-width: 46ch;
}

@media (min-width: 768px) {
    .hre-cx__intro h1 { font-size: 40px !important; }
}

@media (min-width: 992px) {
    .hre-cx__intro { padding-top: 16px; }
    .hre-cx__intro h1 { font-size: 42px !important; }
}

/* ---------- Form card ---------- */
.hre-cx-card {
    background: var(--hre-color-surface-raised);
    border: 1px solid var(--hre-color-border);
    border-radius: var(--hre-radius-lg);
    box-shadow: var(--hre-shadow-2);
    padding: 24px 20px;
}

@media (min-width: 600px) {
    .hre-cx-card { padding: 32px; }
}

@media (min-width: 1200px) {
    .hre-cx-card { padding: 36px 40px; }
}

.hre-cx-card h2 {
    font-size: 21px !important;
    font-weight: 700 !important;
    line-height: 1.3;
    margin: 0 0 4px !important;
    border: 0 !important;
}

.hre-cx-card__note {
    font-size: 13px;
    color: var(--hre-color-text-muted);
    margin: 0 0 20px;
}

.hre-cx-form .hre-form-alert h4 {
    /* lblError wraps its message in <h4>; keep it body text in the alert's colour. */
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.5;
    margin: 0 !important;
    color: inherit !important;
}

.hre-cx-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px 20px;
}

@media (min-width: 600px) {
    .hre-cx-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hre-cx-field--full { grid-column: 1 / -1; }
}

.hre-cx-field { min-width: 0; }

.hre-cx-form label,
.hre-cx-group legend {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--hre-color-text);
    margin: 0 0 6px;
}

.hre-cx-req {
    color: var(--hre-status-danger-text);
    font-weight: 700;
}

.hre-cx-optional {
    font-size: 12px;
    font-weight: 500;
    color: var(--hre-color-text-muted);
    margin-left: 4px;
}

/* 16px text so iOS does not zoom the page when a field takes focus. Needs
   !important: corporate-modern.css forces every .form-control to 14px. */
.hre-cx-form .form-control {
    display: block;
    width: 100%;
    height: 46px;
    padding: 10px 14px;
    font-size: 16px !important;
    line-height: 1.4;
    color: var(--hre-color-text);
    background-color: var(--hre-color-bg);
    border: 1px solid var(--hre-color-border-strong);
    border-radius: var(--hre-radius-sm);
    box-shadow: none;
    transition: border-color var(--hre-motion-fast) var(--hre-ease-standard),
                box-shadow var(--hre-motion-fast) var(--hre-ease-standard);
}

.hre-cx-form textarea.form-control {
    height: auto;
    min-height: 112px;
    resize: vertical;
}

.hre-cx-form .form-control:focus {
    border-color: var(--hre-color-accent);
    box-shadow: 0 0 0 3px var(--hre-color-focus-ring);
    outline: none;
}

.hre-cx-error {
    display: block;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--hre-status-danger-text);
    margin-top: 6px;
}

/* A Display="Dynamic" validator shows itself client-side by writing
   style="display: inline" on the span, which beats the rule above, so the 6px
   gap never appeared. Hidden validators carry display:none and do not match. */
.hre-cx-error[style*="inline"] {
    display: block !important;
}

.hre-cx-hint {
    font-size: 13px;
    line-height: 1.4;
    color: var(--hre-color-text-muted);
    margin: 6px 0 0;
}

.hre-cx-group {
    margin: 24px 0 0;
    padding: 20px 0 0;
    border: 0;
    border-top: 1px solid var(--hre-color-border);
    min-width: 0;
}

.hre-cx-group legend {
    float: left;          /* keeps the legend inside the border-top padding box */
    width: 100%;
    padding: 0;
    border: 0;
    font-size: 15px;
    margin-bottom: 14px;
}

.hre-cx-group legend + .hre-cx-fields { clear: both; }

.hre-cx-group + .hre-cx-fields {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--hre-color-border);
}

.hre-cx-submit {
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 15px 24px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--hre-color-on-brand);
    background: var(--hre-color-brand);
    border: 0;
    border-radius: var(--hre-radius-sm);
    box-shadow: var(--hre-shadow-1);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color var(--hre-motion-fast) var(--hre-ease-standard),
                box-shadow var(--hre-motion-fast) var(--hre-ease-standard),
                transform var(--hre-motion-fast) var(--hre-ease-standard);
}

.hre-cx-submit:hover {
    background: var(--hre-color-brand-hover);
    box-shadow: var(--hre-shadow-2);
    transform: translateY(-1px);
}

.hre-cx-submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--hre-color-focus-ring);
}

/* ---------- Trust column ---------- */
/* Specificity (0,3,1) ties the dark theme's
   `:root[data-theme="system"].hre-prefers-dark h2` and wins on source order
   (this sheet loads last); without it the quiet label turns bright white. */
.hre-cx .hre-cx__trust h2.hre-cx-subhead {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase;
    color: var(--hre-color-text-muted) !important;
    margin: 0 0 16px !important;
    border: 0 !important;
}

.hre-cx-steps {
    list-style: none;
    counter-reset: hre-cx-step;
    margin: 0;
    padding: 0;
}

.hre-cx-steps li {
    counter-increment: hre-cx-step;
    position: relative;
    padding: 0 0 18px 44px;
}

.hre-cx-steps li:last-child { padding-bottom: 0; }

.hre-cx-steps li::before {
    content: counter(hre-cx-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--hre-radius-pill);
    background: var(--hre-color-accent-soft);
    color: var(--hre-color-accent);
    font-size: 14px;
    font-weight: 700;
    line-height: 28px;
    text-align: center;
}

.hre-cx-steps strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 28px;
    color: var(--hre-color-text-strong);
}

.hre-cx-steps span {
    display: block;
    font-size: 15px;
    line-height: 1.5;
    color: var(--hre-color-text-muted);
}

.hre-cx-proof {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 28px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--hre-color-border);
}

.hre-cx-proof strong {
    display: block;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--hre-color-text-strong);
    margin-bottom: 4px;
}

.hre-cx-proof span {
    display: block;
    font-size: 13px;
    line-height: 1.4;
    color: var(--hre-color-text-muted);
}

@media (max-width: 479px) {
    .hre-cx-proof { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .hre-cx-proof li { display: flex; align-items: baseline; gap: 10px; }
    .hre-cx-proof strong { flex: 0 0 auto; margin: 0; font-size: 20px; }
}

.hre-cx-quote {
    margin: 28px 0 0;
    padding: 20px 22px;
    background: var(--hre-color-surface-raised);
    border: 1px solid var(--hre-color-border);
    border-left: 4px solid var(--hre-color-accent);
    border-radius: var(--hre-radius-sm);
}

.hre-cx-quote blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: var(--hre-font-sans);
    font-size: 16px;
    font-style: normal;
    letter-spacing: normal;   /* the template's blockquote sets -1px */
    line-height: 1.6;
    color: var(--hre-color-text);
}

.hre-cx-quote blockquote::before { content: "\201C"; }
.hre-cx-quote blockquote::after  { content: "\201D"; }

.hre-cx-quote figcaption {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--hre-color-text-muted);
}

.hre-cx-direct {
    margin-top: 28px;
}

.hre-cx-direct__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--hre-color-text-strong);
    margin: 0 0 10px;
}

.hre-cx-direct ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hre-cx-direct li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    font-size: 15px;
    color: var(--hre-color-text);
}

.hre-cx-direct .fa {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: var(--hre-radius-pill);
    background: var(--hre-color-accent-soft);
    color: var(--hre-color-accent);
    font-size: 15px;
    line-height: 32px;
    text-align: center;
}

.hre-cx-direct a {
    font-weight: 600;
    color: var(--hre-color-accent);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.hre-cx-direct a:hover,
.hre-cx-direct a:focus {
    color: var(--hre-color-accent-hover);
    text-decoration: underline;
}