/* ===== Contact / Open ticket page ===== */

.contact-wrap{padding:8px 0 40px}
.contact-grid{display:grid;grid-template-columns:1.35fr .92fr;gap:56px;align-items:start}

/* ---- ticket form card ---- */
.cform-card{
  border:1px solid var(--hairline);border-radius:var(--radius-lg);
  background:var(--bg-2);box-shadow:var(--shadow-sm);overflow:hidden;
}
.cform-head{padding:22px 28px;border-bottom:1px solid var(--hairline)}
.cform-head h2{margin:0;font-size:20px;font-weight:600;letter-spacing:-0.02em;color:var(--ink)}
.cform-head p{margin:7px 0 0;font-size:14px;line-height:1.55;color:var(--muted)}

.cform{padding:24px 28px 28px;display:flex;flex-direction:column;gap:18px}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cf-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.cf-field.full{grid-column:1 / -1}
.cf-field label{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-2);
}
.cf-field label .req{color:var(--blue)}
html[data-theme="dark"] .cf-field label .req{color:var(--blue-600)}

.cf-field input,
.cf-field select,
.cf-field textarea{
  font-family:'Inter Tight',-apple-system,sans-serif;font-size:14.5px;color:var(--ink);
  background:var(--bg);border:1px solid var(--hairline);border-radius:10px;padding:11px 13px;width:100%;
  transition:border-color .15s, box-shadow .15s;
}
.cf-field textarea{resize:vertical;min-height:140px;line-height:1.55}
.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus{
  outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px color-mix(in oklab,var(--blue) 18%, transparent);
}
.cf-field input::placeholder,
.cf-field textarea::placeholder{color:var(--muted-2)}
.cf-field select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:38px;
  /* long option labels ("Sales & Billing (during office hours)") would
     otherwise be hard-cut mid-word under the chevron */
  text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;
}

.cf-note{display:flex;gap:10px;font-size:12.5px;color:var(--muted);line-height:1.5}
.cf-note svg{flex:none;width:15px;height:15px;color:var(--blue);margin-top:1px}
html[data-theme="dark"] .cf-note svg{color:var(--blue-600)}
.cf-note code{
  font-family:'JetBrains Mono',monospace;font-size:11.5px;background:var(--bg);
  border:1px solid var(--hairline);padding:1px 5px;border-radius:5px;color:var(--ink-2);
  /* without this a wrapped pill loses its right border on the first fragment
     and its left border on the second — it reads as an unclosed box */
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.cform .btn{align-self:flex-start;margin-top:2px}

/* ---- aside: departments + channels ---- */
.contact-aside{display:flex;flex-direction:column;gap:16px}

.dept-card{
  display:block;border:1px solid var(--hairline);border-radius:var(--radius);
  background:var(--bg-2);padding:18px 20px;text-decoration:none;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.dept-card:hover{
  border-color:color-mix(in oklab,var(--blue) 42%, var(--hairline));
  box-shadow:var(--shadow-sm);transform:translateY(-1px);
}
.dept-card .dh{display:flex;align-items:center;gap:11px;margin-bottom:9px}
.dept-card .di{
  flex:none;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:var(--bg-tint);color:var(--blue);
}
html[data-theme="dark"] .dept-card .di{color:var(--blue-600)}
.dept-card .di svg{width:17px;height:17px}
.dept-card h3{margin:0;font-size:15px;font-weight:600;letter-spacing:-0.012em;color:var(--ink);flex:1}
.dept-card p{margin:0;font-size:13px;line-height:1.55;color:var(--muted)}
.dept-card .darr{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.06em;
  color:var(--blue);margin-top:11px;display:flex;align-items:center;gap:6px;
}
html[data-theme="dark"] .dept-card .darr{color:var(--blue-600)}

.chan-card{border:1px solid var(--hairline);border-radius:var(--radius);background:var(--bg-tint);padding:6px 20px 8px}
.chan-card .ct{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-2);padding:14px 0 4px;
}
.chan-row{
  display:flex;align-items:center;gap:11px;padding:12px 0;border-top:1px solid var(--hairline);
  font-size:13.5px;color:var(--ink-2);
}
.chan-row svg{flex:none;width:16px;height:16px;color:var(--blue)}
html[data-theme="dark"] .chan-row svg{color:var(--blue-600)}
.chan-row .lbl{margin-right:auto}
.chan-row b{color:var(--ink);font-weight:600}
.chan-row a{color:var(--blue);text-decoration:none}
html[data-theme="dark"] .chan-row a{color:var(--blue-600)}
.chan-row .pill{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.05em;
  color:var(--accent);background:color-mix(in oklab,var(--accent) 14%, transparent);
  padding:2px 7px;border-radius:20px;
}

/* company card lives in the narrow aside — 4 cols cram the cells and wrap
   "AS 25198" / "Open a ticket" onto two lines. Use 2 cols and keep the short
   values on one line (the wide address row may still wrap). */
.contact-aside .reg-grid{grid-template-columns:1fr 1fr}
.contact-aside .reg-grid .rg:nth-child(2n){border-right:0}
.contact-aside .reg-grid .rg.wide{grid-column:span 2;border-right:0}
.contact-aside .reg-grid .rg:not(.wide) .v{white-space:nowrap}

/* Between 961 and 1180 the form still sits in the narrow left track of the
   two-column layout, which is too tight for a 2-up field row (the department
   label was cut mid-word). Below 961 the form spans the whole page and the
   pairs fit comfortably again, so this must not leak past the breakpoint. */
@media (min-width:961px) and (max-width:1180px){
  .cf-row{grid-template-columns:1fr}
}

@media (max-width:960px){
  .contact-grid{grid-template-columns:1fr;gap:30px}
}

@media (max-width:600px){
  .cform-head{padding:18px 18px}
  .cform{padding:18px 18px 22px;gap:15px}
  /* iOS zooms the page on focus for any input under 16px. */
  .cf-field input,.cf-field select,.cf-field textarea{font-size:16px}
  .cf-field textarea{min-height:120px}
  .cform .btn{align-self:stretch;justify-content:center}
  .dept-card{padding:16px 16px}
  .chan-card{padding:4px 16px 6px}
  .cf-row{grid-template-columns:1fr}
  .chan-row{flex-wrap:wrap;gap:8px 10px}
  .chan-row .lbl{margin-right:auto}
  /* once the pill wraps onto its own line, margin-right:auto on the label no
     longer pushes it right — keep it on the value column's edge */
  .chan-row .pill{font-size:11px;margin-left:auto}
}

@media (max-width:480px){
  /* The 2-up company card wrapped "Open a ticket" and clipped the address. */
  .contact-aside .reg-grid{grid-template-columns:1fr}
  .contact-aside .reg-grid .rg{border-right:0}
  .contact-aside .reg-grid .rg.wide{grid-column:span 1}
  .contact-aside .reg-grid .rg:not(.wide) .v{white-space:normal}
}