.contact-section { padding: var(--section-y) 0; }
.contact-bill-pay { margin: 0 0 12px; }
.contact-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 11%; align-items: start; }
.contact-office h2, .contact-form-wrap h2 { margin-bottom: 32px; font-size: clamp(2rem, 3.2vw, 3rem); font-weight: 700; }
.contact-office > p { margin-bottom: 26px; color: var(--ink-soft); }
.contact-office a { color: var(--ink); text-underline-offset: 4px; }
/* .contact-office a outranks .btn-action, so restate the button's own text colour. */
.contact-office .contact-bill-pay, .contact-office .contact-bill-pay:hover { color: var(--paper); text-decoration: none; }
.contact-quickpay { margin-bottom: 26px; font-size: .92rem; }
.service-note { margin-top: 54px; padding-top: 28px; border-top: 1px solid var(--rule); }
.service-note h3 { margin-bottom: 12px; font-size: 1.18rem; }
.service-note p { margin-bottom: 18px; color: var(--ink-soft); }
.contact-form { border-top: 1px solid var(--ink); }
.field-row { display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.field-row label { padding-top: 11px; font-family: var(--font-heading); font-size: .86rem; font-weight: 700; }
.field-row label span { color: var(--ink-soft); font-family: var(--font-body); font-weight: 400; }
.field-row input, .field-row select, .field-row textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--ink-soft); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); font: inherit; }
.field-row textarea { resize: vertical; }
.contact-form button { margin-top: 28px; min-height: 50px; padding: 0 30px; border: 0; border-radius: var(--radius-pill); background: var(--blue); color: var(--npt-white); font: 700 .84rem var(--font-heading); cursor: pointer; box-shadow: var(--shadow-action); transition: background .2s ease, transform .2s var(--ease), box-shadow .2s ease; }
.contact-form button:hover { background: var(--blue-dark); transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(6, 99, 175, .5); }
.contact-form button:disabled { background: var(--ink-soft); }
.honeypot { position: absolute; left: -9999px; }
.field-note {
    margin: 18px 0 0;
    padding: 14px 16px;
    border-left: 4px solid var(--blue);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink-soft);
    font-size: .92rem;
    line-height: 1.55;
}
.field-note a { color: var(--ink); text-underline-offset: 3px; }
.field-note[hidden] { display: none; }
.form-privacy-notice { max-width: 620px; }
.success-state { padding: 44px 0; border-top: 1px solid var(--ink); }
.success-state h3 { margin-bottom: 12px; font-size: 2rem; }
.success-state p { margin-bottom: 18px; color: var(--ink-soft); }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; gap: 70px; } .field-row { grid-template-columns: 1fr; gap: 8px; } .field-row label { padding-top: 0; } }

/* --- Contact router -------------------------------------------------------
   Service requests go to the operating company first. Same ledger-row
   vocabulary as the homepage company list: one row per need, the owning
   company's colour as a 4px left rule, destination named on the right.
   (Classes are contact-route-*; .router-* belongs to the sitewide modal.) */
.contact-router { padding: var(--section-y) 0; }
.contact-route-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8%; align-items: start; }
.contact-route-intro h2 { margin-bottom: 24px; font-size: clamp(2rem, 3.2vw, 3rem); font-weight: 700; }
.contact-route-intro p { max-width: 40ch; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.7; }
.contact-route-intro strong { color: var(--ink); }

.contact-routes { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.contact-routes li { border-bottom: 1px solid var(--rule); }
/* On hover/focus the 4px company rule sweeps across the whole row and the
   text turns white. The fill uses each brand's "-dark" shade where the base
   colour can't hold white text at 4.5:1 (CFN 4.1, APG 3.2, Simplify 2.2);
   QC's red passes (4.8) and is used as-is. */
.contact-route {
    --route-color: var(--blue);
    --route-fill: var(--blue);
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 1fr auto 20px;
    align-items: center;
    gap: 20px;
    width: 100%;
    min-height: 68px;
    padding: 18px 20px 18px 28px;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.contact-route::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    z-index: -1;
    width: 4px;
    background: var(--route-color);
    transition: width .25s ease-out, background-color .25s ease-out;
}
.contact-route:hover::before, .contact-route:focus-visible::before { width: 100%; background: var(--route-fill); }
.contact-route::after { content: '\203A'; justify-self: end; color: var(--ink-soft); font-size: 1.5rem; line-height: 1; transition: transform .2s ease, color .2s ease; }
.contact-route-name { font-family: var(--font-heading); font-size: 1.12rem; font-weight: 700; transition: color .2s ease; }
.contact-route-dest { color: var(--ink-soft); font-size: .92rem; text-align: right; transition: color .2s ease; }
.contact-route:hover .contact-route-name, .contact-route:focus-visible .contact-route-name,
.contact-route:hover .contact-route-dest, .contact-route:focus-visible .contact-route-dest,
.contact-route:hover::after, .contact-route:focus-visible::after { color: var(--card); }
.contact-route:hover::after, .contact-route:focus-visible::after { transform: translateX(3px); }
.contact-route:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.contact-route--cfn { --route-color: var(--cfn); --route-fill: var(--cfn-dark); }
.contact-route--qc { --route-color: var(--qc); --route-fill: var(--qc); }
.contact-route--apg { --route-color: var(--apg); --route-fill: var(--apg-dark); }
.contact-route--simplify { --route-color: var(--simplify); --route-fill: var(--simplify-dark); }
.contact-route--npt { --route-color: var(--ink); --route-fill: var(--ink); }
/* Billing is NPTech's own team, so it takes the house blue (6.2:1 with white). */
.contact-route--billing { --route-color: var(--blue); --route-fill: var(--blue); }
button.contact-route[aria-expanded="true"]::after,
button.contact-route[aria-expanded="true"]:hover::after { transform: rotate(90deg); }

.contact-section[hidden] { display: none; }
.contact-router ~ .contact-section { padding-top: 0; }
.success-state[hidden] { display: none; }
.field-error-summary { margin: 22px 0 0; padding: 14px 16px; border-left: 4px solid var(--danger); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); font-weight: 700; }
.field-error-summary:focus { outline: 3px solid var(--blue); outline-offset: 2px; }
.field-error-summary[hidden] { display: none; }
#billing-title:focus { outline: none; }
#message-title:focus { outline: none; }

@media (max-width: 820px) {
    .contact-route-grid { grid-template-columns: 1fr; gap: 32px; }
    .contact-route { grid-template-columns: 1fr 20px; row-gap: 4px; padding: 16px 16px 16px 22px; }
    .contact-route-dest { grid-column: 1; grid-row: 2; text-align: left; }
    .contact-route::after { grid-column: 2; grid-row: 1 / 3; }
}
@media (prefers-reduced-motion: reduce) {
    .contact-route::before, .contact-route::after,
    .contact-route-name, .contact-route-dest { transition: none; }
}