/* ============================================================
   Talos Construction Hub — Bootstrap/HTML replica
   Loads AFTER bootstrap.min.css. Reproduces the design system
   (JetBrains Mono, bone/oxblood palette) and neutralises Reboot.
   ============================================================ */

:root {
  --bone: #F5F3EF;
  --putty: #EAE4DB;
  --hairline: #D8D2C8;
  --oxblood: #5E1A1D;
  --ink: #141210;
  --background: #F5F3EF;
  --foreground: #141210;
}

/* ---------- Reset (neutralise Bootstrap Reboot) ---------- */
*, *::before, *::after { box-sizing: border-box; border: 0 solid var(--hairline); }
html { -webkit-text-size-adjust: 100%; line-height: 1.5; }
.for-font {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
p, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; vertical-align: middle; }
button, input, select, textarea { font-family: inherit; font-size: 100%; line-height: inherit; color: inherit; margin: 0; }
button { background: transparent; text-transform: none; cursor: pointer; }
:focus { outline: none; }

/* ---------- Layout ---------- */
.wrap6 { max-width: 72rem; margin: 0 auto; padding-left: 20px; padding-right: 20px; }

/* ---------- Label / eyebrow ---------- */
.lbl { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--oxblood); }

/* ---------- Buttons ---------- */
.cta-primary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 24px; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--bone); background-color: var(--oxblood);
  transition: opacity 0.15s ease;
}
.cta-primary:hover { opacity: 0.9; }
.cta-outline {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 24px; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--oxblood); border: 1px solid var(--oxblood);
  background: transparent; transition: background-color 0.15s ease;
}
.cta-outline:hover { background-color: rgba(255,255,255,0.05); }
.cta-outline-light { color: var(--bone); border-color: var(--bone); }

/* ---------- Seamless bordered card grid (overlap 1px hairlines) ---------- */
.seam-card { border: 1px solid #d8d2c8; background: #fff; margin-top: -1px; }
.mlneg-sm { }
@media (min-width: 640px) { .mlneg-sm { margin-left: -1px; } }
.mlneg-lg { }
@media (min-width: 1024px) { .mlneg-lg { margin-left: -1px; } }

/* contact form card overlap */
.form-card { margin-top: -1px; }
@media (min-width: 1024px) { .form-card { margin-top: 0; margin-left: -1px; } }

/* Make left (direct channels) and right (message form) cards same height */
/* Bootstrap columns need a flex parent to stretch.
   The cards themselves should also stretch to the row height. */
section.wrap6 > .row { align-items: stretch; }
section.wrap6 > .row > [class*="col-"] { display: flex; }
section.wrap6 > .row > [class*="col-"] > .seam-card { flex: 1; }


/* ---------- Trust monogram grid (2 / 3 / 7 cols) ---------- */
.trust-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
@media (min-width: 640px) { .trust-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1024px) { .trust-grid { grid-template-columns: repeat(7, minmax(0,1fr)); } }

.monogram { display: flex; align-items: center; gap: 12px; border: 1px solid var(--hairline); background: #fff; padding: 12px 16px; }
.monogram-badge { display: grid; height: 32px; width: 32px; flex-shrink: 0; place-items: center; font-size: 11px; font-weight: 700; background-color: var(--oxblood); color: var(--bone); }

/* ---------- Form inputs ---------- */
.ch-input {
  margin-top: 8px; width: 100%; border: 1px solid #d8d2c8;
  background: var(--bone); padding: 12px; font-size: 13px; color: var(--ink);
}
.ch-input:focus { border-color: var(--ink); outline: none; }
textarea.ch-input { resize: vertical; }

.hover-underline:hover { text-decoration: underline; }
.hover-ink:hover { color: var(--ink); }