/* =============================================================================
   CONTACT — page-specific sections
   =============================================================================
   Requires ax-system.css (loaded first): tokens, type scale, buttons, section
   shell, hero, header/footer, motion. This file styles ONLY this page's form and
   info column, reusing the shared tokens so Contact reads as one system with the
   rest of the site. No glow, no glass, no amber — quiet, editorial, form-first.

   The form markup (#contactForm, .cfield, .cfield-err, #cform-count,
   #cform-status, #cform-submit, .is-invalid/.is-sending/.is-done) is the contract
   for contact-validation.js and is styled here without changing those hooks.
   ============================================================================= */


/* HERO — the preserved trust/SLA line under the lead. */
.ctc-hero__sla {
    font-family: var(--ax-font-body);
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.5;
    color: var(--ax-text-3);
    margin: clamp(22px, 3vw, 30px) 0 0;
}


/* =============================================================================
   LAYOUT — form (left) + info column (right).
   ============================================================================= */
.ctc-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
    padding-top: clamp(48px, 6vw, 88px);
}

.ctc-formhead { margin-bottom: clamp(28px, 3.5vw, 40px); }

.ctc-formsub {
    font-family: var(--ax-font-body);
    font-size: clamp(15px, 1.3vw, 17px);
    line-height: 1.6;
    color: var(--ax-text-2);
    margin: 12px 0 0;
    max-width: 48ch;
}


/* =============================================================================
   FORM — editorial fields: hairline borders, surface fill, navy focus ring.
   ============================================================================= */
.cform { margin: 0; }

/* Honeypot — visually removed, available to bots. */
.cform-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.cform-row--2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(16px, 2vw, 22px);
}

.cfield {
    display: flex;
    flex-direction: column;
    margin-bottom: clamp(18px, 2.2vw, 24px);
}
/* The paired row owns the gap between its two fields and the bottom rhythm,
   so the inner .cfield margins don't need to be zeroed and re-added. */
.cform-row--2 .cfield { margin-bottom: 0; }
.cform-row--2 { margin-bottom: clamp(18px, 2.2vw, 24px); }

.cfield label {
    font-family: var(--ax-font-head);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.01em;
    color: var(--ax-text);
    margin-bottom: 9px;
}

.cfield .req { color: var(--ax-accent); font-weight: 600; }

.cfield input,
.cfield textarea,
.cselect select {
    font-family: var(--ax-font-body);
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--ax-text);
    background: var(--ax-surface);
    border: 1px solid var(--ax-border);
    border-radius: 10px;
    padding: 13px 15px;
    width: 100%;
    transition: border-color 0.2s var(--ax-ease), background 0.2s var(--ax-ease), box-shadow 0.2s var(--ax-ease);
    -webkit-appearance: none;
    appearance: none;
}

.cfield input::placeholder,
.cfield textarea::placeholder { color: var(--ax-text-3); }

.cfield input:hover,
.cfield textarea:hover,
.cselect select:hover { border-color: var(--ax-text-3); }

.cfield input:focus,
.cfield textarea:focus,
.cselect select:focus {
    outline: none;
    border-color: var(--ax-accent);
    background: var(--ax-bg);
    box-shadow: 0 0 0 3px rgba(33, 49, 100, 0.1);
}

.cfield textarea { resize: vertical; min-height: 132px; }

/* Select — custom chevron, no native arrow. */
.cselect { position: relative; }
.cselect__chev {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ax-text-3);
    font-size: 12px;
    pointer-events: none;
}
.cselect select { padding-right: 38px; cursor: pointer; }

/* Validation error state (contact-validation.js adds .is-invalid). */
.cfield.is-invalid input,
.cfield.is-invalid textarea,
.cfield.is-invalid .cselect select {
    border-color: var(--ax-red);
    background: var(--ax-bg);
}
.cfield.is-invalid input:focus,
.cfield.is-invalid textarea:focus,
.cfield.is-invalid .cselect select:focus {
    box-shadow: 0 0 0 3px rgba(236, 57, 37, 0.12);
}
.cfield.is-invalid label { color: var(--ax-red); }

/* Error text — present in the DOM always; collapses when empty (JS sets text). */
.cfield-err {
    font-family: var(--ax-font-body);
    font-size: 13px;
    line-height: 1.4;
    color: var(--ax-red);
    margin-top: 7px;
}
.cfield-err:empty { margin-top: 0; }

.cfield-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}
.cform-count {
    font-family: var(--ax-font-body);
    font-size: 12.5px;
    color: var(--ax-text-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    margin-top: 7px;
}

/* Terms checkbox row. */
.cfield--checkbox {
    flex-direction: row;
    align-items: flex-start;
    gap: 11px;
    margin-top: 6px;
}
.cfield--checkbox input {
    /* The base .cfield input rule sets appearance:none + a 10px-radius padded
       box, which turns the checkbox into a large un-clickable box with no tick.
       Restore the native control so it renders and toggles normally. */
    -webkit-appearance: auto;
    appearance: auto;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 0;
    margin-top: 2px;
    flex: 0 0 auto;
    cursor: pointer;
    accent-color: var(--ax-accent);
}
.cfield--checkbox__body { display: flex; flex-direction: column; }
.cfield--checkbox label {
    font-family: var(--ax-font-body);
    font-weight: 500;
    font-size: 14px;
    color: var(--ax-text-2);
    margin-bottom: 0;
    line-height: 1.5;
    cursor: pointer;
}
.cfield--checkbox a {
    color: var(--ax-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Status banner (contact-validation.js toggles hidden + .is-success/.is-error). */
.cform-status {
    font-family: var(--ax-font-body);
    font-size: 14.5px;
    line-height: 1.55;
    border-radius: 10px;
    padding: 14px 16px;
    margin: clamp(20px, 2.4vw, 26px) 0 0;
    border: 1px solid var(--ax-border);
}
.cform-status.is-success {
    color: #1c5b2e;
    background: rgba(55, 179, 74, 0.08);
    border-color: rgba(55, 179, 74, 0.32);
}
.cform-status.is-error {
    color: #8a241a;
    background: rgba(236, 57, 37, 0.06);
    border-color: rgba(236, 57, 37, 0.3);
}
.cform-status a { color: inherit; text-decoration: underline; }

.cform-actions { margin-top: clamp(24px, 3vw, 32px); }

/* Submit extends the shared .ax-btn--solid; add spinner + sending/done states. */
#cform-submit { position: relative; }
.cbtn-spinner { display: none; }
.cform.is-sending #cform-submit { opacity: 0.75; cursor: progress; }
.cform.is-sending .cbtn-label { opacity: 0.6; }
.cform.is-sending .cbtn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    vertical-align: -2px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ctc-spin 0.7s linear infinite;
}
@keyframes ctc-spin { to { transform: rotate(360deg); } }

/* On success the JS adds .is-done — hide the inputs, keep the status banner. */
.cform.is-done .cform-row,
.cform.is-done .cfield,
.cform.is-done .cform-actions,
.cform.is-done .cform-fineprint { display: none; }
.cform.is-done .cform-status { margin-top: 0; }

.cform-fineprint {
    font-family: var(--ax-font-body);
    font-size: 13px;
    line-height: 1.5;
    color: var(--ax-text-3);
    margin: clamp(18px, 2vw, 22px) 0 0;
}


/* =============================================================================
   ASIDE — contact info, locations, promise, consult, trust line (preserved).
   ============================================================================= */
.ctc-aside {
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 3.4vw, 40px);
    padding-top: clamp(0px, 1vw, 8px);
}

.ctc-info__title {
    font-family: var(--ax-font-head);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ax-accent-soft);
    margin: 0 0 14px;
}

.ctc-info__email {
    font-family: var(--ax-font-head);
    font-weight: 600;
    font-size: clamp(18px, 1.8vw, 22px);
    letter-spacing: -0.02em;
    color: var(--ax-text);
    text-decoration: none;
    border-bottom: 1px solid var(--ax-border);
    transition: border-color 0.2s var(--ax-ease);
}
.ctc-info__email:hover { border-bottom-color: var(--ax-accent); }

/* Locations — quiet stacked address blocks, hairline separated. */
.ctc-loc {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 16px 0;
    border-top: 1px solid var(--ax-border);
}
.ctc-loc:first-of-type { border-top: none; padding-top: 0; }

.ctc-loc__city {
    display: block;
    font-family: var(--ax-font-head);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.015em;
    color: var(--ax-text);
    margin-bottom: 6px;
}
.ctc-loc__ext { color: var(--ax-accent-soft); font-size: 12px; }
.ctc-loc:hover .ctc-loc__city { color: var(--ax-accent); }

.ctc-loc__addr {
    font-family: var(--ax-font-body);
    font-style: normal;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ax-text-3);
    max-width: 40ch;
}

.ctc-info__serving {
    font-family: var(--ax-font-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--ax-text-2);
    margin: 16px 0 0;
}

.ctc-info__promise {
    font-family: var(--ax-font-body);
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ax-text-2);
    margin: 0;
    max-width: 42ch;
}

/* Consultation — a quiet bordered block, not a glossy card. */
.ctc-consult {
    padding: clamp(22px, 2.6vw, 28px);
    border: 1px solid var(--ax-border);
    border-radius: 14px;
    background: var(--ax-surface);
}
.ctc-consult__eyebrow {
    display: block;
    font-family: var(--ax-font-head);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ax-accent-soft);
    margin-bottom: 12px;
}
.ctc-consult__d {
    font-family: var(--ax-font-body);
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ax-text-2);
    margin: 0 0 18px;
    max-width: 42ch;
}

/* Trust line — replaces the legacy stat-card band; meaning kept, vanity dropped. */
.ctc-trustline {
    font-family: var(--ax-font-head);
    font-weight: 500;
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.45;
    letter-spacing: -0.015em;
    color: var(--ax-text);
    margin: 0;
    padding-top: clamp(24px, 3vw, 32px);
    border-top: 1px solid var(--ax-border);
    max-width: 38ch;
    text-wrap: balance;
}


/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 980px) {
    .ctc-grid { grid-template-columns: 1fr; gap: clamp(40px, 6vw, 56px); }
    .ctc-aside { padding-top: 0; }
}

@media (max-width: 640px) {
    /* Stacked: the two fields need vertical rhythm between them; the row's
       own bottom margin still spaces it from the next field. */
    .cform-row--2 { grid-template-columns: 1fr; gap: clamp(18px, 2.2vw, 24px); }
    .ctc-grid { padding-top: 40px; }
}