/* ==========================================================================
   GFC v2 - form, PIN, profile & utility pages
   Wide two-column form shell: sticky section sidebar + content column.
   ========================================================================== */

/* ------------------------------------------------------- topbar extras */

.topbar__logo .logo-desktop { display: block; max-height: 42px; }
.topbar__logo .logo-mobile { display: none; max-height: 38px; }
@media (max-width: 820px) {
    .topbar__logo .logo-desktop { display: none; }
    .topbar__logo .logo-mobile { display: block; }
}

/* One control cluster in the bar: save state, progress, SUBMIT, log out.
   ⚠ Every child is the SAME height. The progress chip used to be padding-sized
   while the button next to it was font-sized, so on a phone the two sat at
   different heights against a shared baseline and looked broken. --ctl-h is the
   single source of that height. */
.topbar__tools {
    --ctl-h: 36px;
    display: flex; align-items: center; gap: 9px; min-width: 0;
}
.topbar__tools > * { flex: 0 0 auto; }
.topbar__tools .btn,
.topbar__tools .topbar__logout,
.topbar__progress {
    height: var(--ctl-h);
    display: inline-flex; align-items: center;
    padding-top: 0; padding-bottom: 0;
}

.topbar__progress {
    font-size: .78rem; font-weight: 700; color: var(--success);
    background: var(--success-soft); border-radius: var(--radius);
    padding: 0 12px; white-space: nowrap;
}

/* The space in " COMPLETE" collapses at the inline edge, so it rendered as
   "92%COMPLETE". Own the gap in CSS instead of relying on markup whitespace. */
.topbar__progress-word { margin-left: .3em; }

/* The saved-at line lives under the section nav now (.form-side__saved), so
   the chip in the bar is free to carry the live state on its own: "Saving..."
   while in flight, "Saved" after. */

/* Account glyph + its menu. */
.topbar__account { position: relative; display: inline-flex; }
.topbar__account-btn {
    width: var(--ctl-h); height: var(--ctl-h); padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-muted); background: transparent;
    border: 1px solid var(--border); border-radius: var(--radius);
    cursor: pointer;
}
.topbar__account-btn:hover,
.topbar__account-btn[aria-expanded="true"] { background: var(--hover); color: var(--text-strong); }
.topbar__account-btn svg { width: 16px; height: 16px; }

.topbar__menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 120;
    min-width: 210px; padding: 6px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: 0 12px 30px rgba(16, 24, 40, .14);
}
.topbar__menu-email {
    display: block; padding: 7px 10px 9px;
    font-size: .72rem; color: var(--text-faint);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    border-bottom: 1px solid var(--border-light); margin-bottom: 5px;
}
.topbar__menu-item {
    display: flex; align-items: center; gap: 8px; width: 100%;
    font-family: inherit; font-size: .8rem; font-weight: 600; text-align: left;
    color: var(--text); background: transparent; border: 0;
    border-radius: var(--radius); padding: 9px 10px; cursor: pointer;
}
.topbar__menu-item:hover { background: var(--hover); }

/* Progress as a 2px rule along the bottom of the bar - what the sidebar card
   used to show, with none of its footprint. */
.topbar__progressline {
    position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: transparent; pointer-events: none;
}
.topbar__progressline .js-progress-fill {
    display: block; height: 100%; width: 0;
    background: var(--accent); transition: width .18s ease;
}
.topbar__progressline .js-progress-fill.is-full { background: var(--success); }
.page-form .topbar { position: sticky; }

.js-submit { background: var(--sunken); color: var(--text-muted); border-color: var(--border); }
.js-submit.is-ready { background: var(--success); border-color: var(--success); color: #fff; }
.js-submit.is-ready:hover { background: var(--success); color: #fff; filter: brightness(.94); }

/* ⚠ There used to be a `@media (min-width:1200px)` rule hiding #progress_chip
   and #submit_candidature_btn here, because on desktop the sidebar card owned
   them. That card is gone, so hiding them left the whole top bar empty except
   the logo while the controls sat in three different places down the page. */

.topbar__avatar {
    width: 36px; height: 36px; flex: 0 0 auto;
    border-radius: var(--radius);
    background-size: cover; background-position: center;
    background-color: var(--sunken);
    border: 1px solid var(--border-light);
}
.topbar__who { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.topbar__who-name { font-size: .84rem; font-weight: 600; color: var(--text-strong); white-space: nowrap; }
.topbar__who-email {
    font-size: .76rem; color: var(--text-muted);
    background: var(--sunken); border: 1px solid var(--border-light);
    border-radius: var(--radius); padding: 3px 8px;
    overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 620px) { .topbar__who-email { display: none; } }

/* -------------------------------------------------------------- shell */

.form-wrap {
    width: 100%; max-width: 1560px; margin: 0 auto;
    padding: 28px 32px 60px;
    font-family: "Inter", "Poppins", sans-serif; font-size: 14.5px;
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.form-side {
    position: sticky; top: calc(var(--topbar-h) + 20px);
    display: flex; flex-direction: column; gap: 16px;
    max-height: calc(100vh - var(--topbar-h) - 40px);
    overflow-y: auto;
    scrollbar-width: thin;
}

.form-main { min-width: 0; }
.form-main form { display: flex; flex-direction: column; }

/* ------------------------------------------------------- section nav */

.form-tabs {
    display: flex; flex-direction: column; gap: 4px;
    background: var(--surface); border-radius: var(--radius);
    box-shadow: 0 0 20px 0 rgba(76, 87, 125, .05);
    padding: 10px;
}

.form-tabs__tab {
    display: flex; align-items: center; width: 100%;
    /* ⚠ `gap` is BOTH axes. With flex-wrap on, a plain `gap: 10px` also puts
       10px between the label row and the description row, on top of the
       description's own margin - so the blurb floated away from its title.
       Column gap only. */
    column-gap: 10px; row-gap: 0;
    flex-wrap: wrap;
    font-family: inherit; font-size: 13px; font-weight: 600; text-align: left;
    color: var(--text-muted); background: transparent;
    border: 0; border-radius: var(--radius);
    padding: 10px 11px; cursor: pointer; white-space: nowrap;
}

/* The description sits on its own wrapped line, indented to the label rather
   than to the tab edge - 24px letter + the 10px flex gap. */
.form-tabs__desc {
    flex: 0 0 100%;
    padding-left: 34px; margin-top: 3px;
    font-size: 11.5px; font-weight: 500; line-height: 1.35;
    color: var(--text-faint); white-space: normal;
}
.form-tabs__tab:hover .form-tabs__desc { color: var(--text-muted); }
.form-tabs__tab.is-active .form-tabs__desc { color: rgba(255, 255, 255, .66); }
.form-tabs__tab:hover { background: var(--hover); color: var(--text-strong); }
.form-tabs__tab.is-active { background: var(--navy); color: #fff; }

.form-tabs__letter {
    width: 24px; height: 24px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11.5px; font-weight: 700;
    background: var(--sunken); color: var(--text-muted);
    border: 1px solid var(--border-light); border-radius: var(--radius);
}
.form-tabs__tab.is-active .form-tabs__letter {
    background: rgba(255, 255, 255, .14); border-color: transparent; color: #fff;
}
.form-tabs__tab.is-done .form-tabs__letter {
    background: var(--success-soft); border-color: var(--success-soft); color: var(--success);
}
.form-tabs__tab.is-active.is-done .form-tabs__letter {
    background: rgba(255, 255, 255, .14); border-color: transparent; color: #7ee2b8;
}

.form-tabs__label-lg { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.form-tabs__label-sm { display: none; }

.form-tabs__check { display: none; color: var(--success); margin-left: auto; }
.form-tabs__tab.is-done .form-tabs__check { display: inline-flex; }
.form-tabs__tab.is-active .form-tabs__check { color: #7ee2b8; }

/* The sidebar progress card was removed on 2026-09-01 - its progress and
   SUBMIT are in the top bar now, and its .side-* rules with it. */

/* Desktop's save status, under the section nav: when it last saved, then the
   standing fact that it saves by itself. Phones get the footer copy instead -
   see .footer__autosave / .footer__saved. */
.form-side__status { padding: 2px 4px; text-align: center; }
.form-side__saved {
    margin: 0;
    font-size: .74rem; color: var(--text-faint);
}
.form-side__saved:empty { display: none; }
.form-side__autosave {
    margin: 3px 0 0;
    display: inline-flex; align-items: center; gap: 4px;
    /* Lighter and smaller than the timestamp: it never changes, so it should
       not compete with the line that does. */
    font-size: .68rem; font-weight: 400; color: var(--text-faint);
}
.form-side__autosave svg { width: 11px; height: 11px; color: var(--success); }
@media (max-width: 1199px) { .form-side__status { display: none; } }

/* ---------------------------------------------------------------- panes */

.form-pane { display: none; position: relative; padding: 30px 34px; }
.form-pane.is-active { display: block; }

.pane-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 24px; }
.pane-letter {
    width: 40px; height: 40px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: "Outfit", "Poppins", sans-serif;
    font-size: 17px; font-weight: 800;
    background: var(--accent-soft); color: var(--accent);
    border-radius: var(--radius);
}
.pane-head__text { min-width: 0; flex: 1; }
.pane-head__toprow { display: flex; align-items: center; gap: 10px; }
.pane-head__toprow .card__title { margin: 0; }
.pane-head__toprow .pane-status { align-self: center; }
.pane-head .card__title {
    font-family: "Outfit", "Poppins", sans-serif;
    font-size: 21px; font-weight: 700; letter-spacing: -.2px;
    color: var(--navy); line-height: 1.25;
}
.pane-head .card__subtitle { font-size: 13.5px; max-width: 720px; }

.pane-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px; align-items: start;
}
@media (min-width: 1400px) {
    .pane-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.field--wide, .reveal-pair { grid-column: 1 / -1; }

.pane-note { margin: 20px 0 0; font-size: 12.5px; color: var(--text-faint); }
.req { color: var(--danger); }

/* Bigger controls on the form page */
.form-wrap .field { gap: 7px; }
.form-wrap .field__label { font-size: 12px; }
.form-wrap .input { font-size: .95rem; padding: 11px 13px; }
.form-wrap .sel__trigger { font-size: .95rem; padding: 11px 13px; min-height: 44px; }
.form-wrap textarea.input { min-height: 110px; }

.reveal-pair {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px;
    background: var(--sunken); border: 1px solid var(--border-light);
    border-radius: var(--radius); padding: 16px;
}


/* ----------------------------------------------------- inline validation */

.form-wrap .input.is-invalid,
.form-wrap .input.is-invalid:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(226, 22, 54, .12);
}
.field__error {
    font-size: .74rem; font-weight: 500; color: var(--danger);
    display: flex; align-items: center; gap: 5px;
}
.field__error svg { width: 12px; height: 12px; flex: 0 0 auto; }

/* -------------------------------------------------- pane status pills */

.pane-status {
    margin-left: auto; flex: 0 0 auto; align-self: flex-start;
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 600; padding: 4px 10px;
    border-radius: var(--radius); white-space: nowrap;
}
.pane-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pane-status--done { background: var(--success-soft); color: var(--success); }
.pane-status--todo { background: var(--warning-soft); color: var(--warning-ink); }
.pane-status--optional { background: var(--sunken); color: var(--text-faint); }

/* -------------------------------------------------- save-state indicator */

.save-state {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .74rem; font-weight: 600; color: var(--text-faint);
}
.save-state svg { width: 13px; height: 13px; }
.save-state.is-saving { color: var(--text-muted); }
.save-state.is-saved { color: var(--success); }
.save-state--top { margin-right: 0; }
/* ⚠ .save-state / .save-state--top are no longer rendered anywhere on this
   page - the "Saving..." chip was removed on 2026-09-01. The rules are kept
   because the class is still used by the shared UI layer elsewhere; nothing on
   the candidate form emits one. Removing it also removed a real 320px bug: the
   chip overflowed the bar and pushed the ACCOUNT button (and therefore log-out)
   off-screen. */

.save-state .spin {
    width: 12px; height: 12px; flex: 0 0 auto;
    border: 2px solid var(--border-strong); border-top-color: var(--text-muted);
    border-radius: 50%;
    animation: gfc-spin .7s linear infinite;
}
@keyframes gfc-spin { to { transform: rotate(360deg); } }

/* -------------------------------------------------- pane Back/Continue */

.pane-nav {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: 28px; padding-top: 18px;
    border-top: 1px solid var(--border-light);
}
.pane-nav__next { padding: 11px 24px; }
.pane-nav__next svg { width: 14px; height: 14px; }
.pane-nav__back { color: var(--text-muted); padding: 11px 18px; }
.pane-nav__step { font-size: .74rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }


/* ------------------------------------------------ locked/readonly state */

.form-wrap.is-locked #submission_form { position: relative; }
.form-wrap.is-locked #submission_form::after {
    content: ''; position: absolute; inset: 0; z-index: 9;
    cursor: pointer; background: transparent;
}
.form-wrap.is-blurred .form-main,
.form-wrap.is-blurred .form-side { opacity: .35; pointer-events: none; filter: blur(4px); }

/* --------------------------------------------------------------- footer */

/* The "asterisk" note used to render HERE as well as in the pane, so below
   1200px the candidate was told twice on the same screen; the pane copy is the
   one that survived. "Save & log out" moved into the top bar's account menu. */
.footer { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }

/* Phones only: on desktop this pair sits under the section nav instead. */
.footer__autosave {
    display: none;
    align-items: center; gap: 5px;
    font-size: .72rem; font-weight: 400; color: var(--text-faint);
}
.footer__autosave svg { width: 11px; height: 11px; color: var(--success); }
@media (max-width: 1199px) { .footer__autosave { display: inline-flex; } }

/* Phones only: on desktop the same value sits under the section nav, and one
   page should never state it twice. */
.footer__saved { display: none; color: var(--text-faint); }
.footer__saved:empty { display: none; }
@media (max-width: 1199px) { .footer__saved { display: inline; } }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1199px) {
    .form-wrap {
        grid-template-columns: minmax(0, 1fr);
        padding: 0 16px 48px;
        gap: 0;
    }

    /* Sidebar becomes a sticky horizontal section bar */
    .form-side {
        position: sticky; top: var(--topbar-h); z-index: 40;
        background: var(--bg); padding: 10px 0 12px;
        flex-direction: column; gap: 0;
    }
    .form-tabs {
        flex-direction: row; overflow-x: auto; flex-wrap: nowrap;
        scrollbar-width: none; box-shadow: none; background: transparent;
        gap: 8px; padding: 2px 0; scroll-padding: 0 4px;
    }
    .form-tabs::-webkit-scrollbar { display: none; }
    /* Each section reads as a real, tappable chip - not plain text */
    .form-tabs__tab {
        width: auto; flex: 0 0 auto; padding: 7px 12px 7px 8px; font-size: 12.5px;
        background: var(--surface); border: 1px solid var(--border);
        border-radius: 999px; box-shadow: 0 1px 2px rgba(76, 87, 125, .06);
    }
    .form-tabs__tab:hover { background: var(--surface); }
    .form-tabs__tab.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
    .form-tabs__tab.is-done {
        background: var(--success-soft); border-color: #bfe6d5; color: var(--success);
    }
    .form-tabs__tab.is-done .form-tabs__letter {
        background: #fff; border-color: transparent; color: var(--success);
    }
    /* The active chip is always navy-dominant, even once its section is done,
       so the current step is never mistaken for just another completed one. */
    .form-tabs__tab.is-active.is-done {
        background: var(--navy); border-color: var(--navy); color: #fff;
    }
    .form-tabs__tab.is-active.is-done .form-tabs__letter {
        background: rgba(255, 255, 255, .16); color: #7ee2b8;
    }
    .form-tabs__letter { width: 21px; height: 21px; font-size: 10.5px; }
    /* Show the tick inside a completed chip so "done" is unmistakable */
    .form-tabs__check { display: none; margin-left: 2px; }
    .form-tabs__tab.is-done .form-tabs__check { display: inline-flex; }
    .form-tabs__tab.is-active.is-done .form-tabs__check { color: #7ee2b8; }
    /* Horizontal strip below 1200px: no room for the per-section blurb, and
       nowhere sensible for the saved-at line. */
    .form-tabs__desc { display: none; }
    .form-side__saved { display: none; }
    .form-tabs__tab { flex-wrap: nowrap; }
    .form-pane { padding: 24px 20px; }
}

@media (max-width: 992px) {
    .form-tabs__label-lg { display: none; }
    .form-tabs__label-sm { display: inline; }
}

@media (max-width: 760px) {
    .pane-grid { grid-template-columns: minmax(0, 1fr); }
    .reveal-pair { grid-template-columns: minmax(0, 1fr); }
    .form-pane { padding: 20px 16px; }

    /* Badge stays on the same line as the title; subtitle drops below.
       The status pill rides with the title (inline, or wrapped left-aligned
       beneath it) - never orphaned and indented under the description. */
    .pane-head { gap: 11px; flex-wrap: nowrap; align-items: flex-start; margin-bottom: 20px; }
    .pane-letter { width: 34px; height: 34px; font-size: 15px; }
    .pane-head .card__title { font-size: 18px; }
    .pane-head__toprow { flex-wrap: wrap; gap: 7px 9px; }
    .pane-head__toprow .pane-status { margin-left: 0; }
    .pane-head .card__subtitle { margin-top: 7px; }

    /* Declutter the top bar: drop the "COMPLETE" word and the log-out label,
       shrink the control height - but keep every control the SAME height, which
       is the whole point of --ctl-h. The chip used to be 30px against a 34px
       button and the mismatch was the first thing you saw on a phone. */
    .page-form .topbar { gap: 8px; padding: 0 12px; }
    .topbar__tools { --ctl-h: 34px; gap: 7px; }
    .page-form .topbar__saved { display: none; }
    .page-form .topbar__progress { padding: 0 10px; font-size: .74rem; }
    .page-form .topbar__progress-word { display: none; }
    .page-form #submit_candidature_btn { padding: 0 14px; }
    .topbar__logout-text { display: none; }
    .topbar__logout { padding: 0 10px; }
    .topbar__logo .logo-mobile { max-height: 30px; }

    /* Section nav becomes a tidy footer: centered step caption, then a
       full-width Back / Continue row. */
    .pane-nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "step step" "back next";
        gap: 12px; margin-top: 24px;
    }
    .pane-nav__step { grid-area: step; text-align: center; font-weight: 600; font-size: .78rem; }
    .pane-nav__back { grid-area: back; min-height: 48px; width: 100%; }
    .pane-nav__next { grid-area: next; min-height: 48px; width: 100%; max-width: none; }

    /* ⚠ Section 1 has no Back. It was `visibility:hidden`, which still occupies
       its grid cell, so Continue was stranded in the right-hand column under a
       centred caption - the lopsided layout that read as broken. With no Back
       to place, Continue takes the whole row. */
    .pane-nav.is-first { grid-template-areas: "step step" "next next"; }
    .pane-nav.is-first .pane-nav__back { display: none; }
}

/* ------------------------------------------------------- PIN page card */

.center-card-wrap {
    flex: 1; display: flex; align-items: flex-start; justify-content: center;
    padding: 48px 16px;
}
.center-card { width: 100%; max-width: 440px; text-align: center; }
.center-card .card__title { margin-bottom: 6px; }
.center-card .card__subtitle { margin-bottom: 22px; }

.pin-input {
    font-size: 26px; font-weight: 700; letter-spacing: .35em; text-align: center;
    font-variant-numeric: tabular-nums;
}
.center-card .btn { width: 100%; margin-top: 16px; padding: 11px 18px; }
.center-card__support {
    margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-light);
    font-size: .78rem; color: var(--text-muted);
}

/* --------------------------------------------------------- profile page */

.profile-wrap { width: 100%; max-width: 640px; margin: 0 auto; padding: 32px 16px; }

.profile-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.profile-head__avatar {
    width: 74px; height: 74px; flex: 0 0 auto;
    border-radius: var(--radius);
    background-size: cover; background-position: center;
    background-color: var(--sunken);
    border: 1px solid var(--border-light);
}
.profile-head__name {
    margin: 0; font-family: "Outfit", "Poppins", sans-serif;
    font-size: 26px; font-weight: 800; letter-spacing: -.3px; color: var(--navy);
    line-height: 1.2;
}
.profile-head__meta { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); }

.profile-views {
    display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
    font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--text-muted); background: var(--sunken);
    border: 1px solid var(--border-light); border-radius: var(--radius);
    padding: 6px 10px; white-space: nowrap;
}
.profile-views strong { font-size: 15px; color: var(--text-strong); }

.profile-row {
    display: flex; align-items: center; gap: 16px;
    padding: 13px 4px; border-bottom: 1px dashed var(--border);
}
.profile-row:last-child { border-bottom: 0; }
.profile-row__label {
    flex: 0 0 150px; font-size: .82rem; font-weight: 600; color: var(--text-muted);
}
.profile-row__value { font-size: .86rem; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) {
    .profile-row { flex-direction: column; align-items: flex-start; gap: 4px; }
    .profile-row__label { flex: none; }
}

.profile-actions { display: flex; gap: 8px; margin-top: 22px; flex-wrap: wrap; }

/* ------------------------------------------------------- plain messages */

.plain-hero {
    flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px 16px;
}

/* The uploader is a GRID ITEM of .pane-grid, not a block after it — that is
   the only way its right edge lines up with the field above at every
   breakpoint. .pane-grid is 2 columns, 3 at >=1400px, 1 at <=760px, so:
     3 cols -> span 2  (flush with URL 2's right edge)
     2 cols -> 1 / -1  (full width; URL 1 + URL 2 are that same row)
     1 col  -> 1 / -1  (full width)
   `span 2` in a one-column grid would invent an implicit column, so the
   full-width forms are spelled out rather than left to `span`. */
.up-slot { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 1400px) { .up-slot { grid-column: span 2; } }
@media (max-width: 760px)  { .up-slot { grid-column: 1 / -1; } }
.up-slot .up { max-width: none; }


/* --------------------------------------------- standalone contact page */

.contact-page {
    flex: 1; display: flex; justify-content: center;
    padding: 40px 16px 64px;
}
.contact-card { width: 100%; max-width: 640px; }
.contact-card__head { margin-bottom: 22px; }
.contact-card__head h1 {
    margin: 0 0 6px;
    font-family: "Outfit", "Poppins", sans-serif;
    font-size: 26px; font-weight: 800; letter-spacing: -.3px; color: var(--navy);
    line-height: 1.2;
}
.contact-card__head p { margin: 0; font-size: 14px; color: var(--text-muted); }
.contact-card .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.contact-card .field { margin-bottom: 16px; }
.contact-card #recaptcha_recruiting { margin: 4px 0 12px; }
.contact-card__foot {
    margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-light);
    display: flex; justify-content: flex-end;
}
.contact-card__foot .btn { min-width: 190px; padding: 12px 22px; }
.contact-topbar__cta { white-space: nowrap; }

@media (max-width: 620px) {
    .contact-page { padding: 24px 14px 48px; }
    .contact-card { padding: 22px 18px; }
    .contact-card .field-grid { grid-template-columns: 1fr; gap: 0; }
    .contact-card__foot { justify-content: stretch; }
    .contact-card__foot .btn { width: 100%; }
    .contact-card__head h1 { font-size: 22px; }
    .contact-topbar__cta { display: none; }
}