/*
  trubetech.com redesign — design system v2
  Built 2026-08-20, revised same day. See /notes/redesign-proposal.md for the
  full reasoning trail -- this file states the decisions, that one states why.

  ---------------------------------------------------------------------------
  REVISION 2026-08-20 -- full direction change, Brandon direct: "I don't want
  it to look generic. I'm a technology company. It should look modern or
  futuristic... I am technology incarnate... put the AI in Availability. Or
  Mainframe." The v1 system (warm off-white, serif display, editorial/law-
  firm register) was a real, coherent design -- it was just the wrong one for
  a technology company. This version keeps the brand-mandated colors and the
  underlying discipline (one accent, real type system, no page-builder
  defaults) and rebuilds everything else around a "systems, not stories"
  concept: dark-mode-first, monospace display type, schematic/bracket motifs,
  status-indicator language. IBM Plex Mono isn't a "futuristic" font chosen
  for vibes -- it's literally the typeface IBM drew for its own systems, which
  is the actual word Brandon used ("mainframe"). Kept flat, not glowing: no
  box-shadow glow on the red accent and no gradients anywhere, specifically
  so this doesn't collapse into the generic "near-black + neon accent" AI-
  template look -- the real differentiators are the mono display type, the
  three-level dark palette (not one flat black), and the bracket/grid/status-
  dot vocabulary below, not the palette alone.

  Still inherits the DISCIPLINE proven on borgiaexecutive.com: a real design
  system in CSS, one accent used sparingly, no carousels/counters/parallax.
  Still deliberately not Borgia's own palette or type pair -- Brandon owns
  both companies, and this needed to read as a distinct brand on its own
  terms, not a copy of the last project.
*/

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Public+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Dark-mode-first, fixed -- not adaptive to visitor OS preference. This is
     a brand choice (see above), the same way Borgia's own near-black ground
     never lightens for a visitor's light-mode setting. Three levels, not one
     flat black, so panels read as real depth rather than a single dark wash:
     --bg (page ground) < --bg-raised (contrast sections, cards) < --bg-inset
     (deepest -- reserved for the highest-emphasis blocks: testimonial,
     contact CTA, the Borgia trust section). A slight cool bias, not neutral
     charcoal -- reads as "instrument panel," not "dimmed browser tab." */
  --bg: #0E1013;
  --bg-raised: #17191D;
  --bg-inset: #0A0B0D;
  --line: rgba(242, 240, 236, 0.10);
  --line-strong: rgba(242, 240, 236, 0.22);
  --grid-line: rgba(242, 240, 236, 0.05);

  /* Brand-mandated, from Branding 2026/brand-colors.md -- authoritative,
     do not adjust either value without updating that file first. --ink is
     repurposed here as the primary LIGHT foreground (the brand's dark-grey
     value was always meant to pair with its light-ground logo lockup; on
     this dark ground the light lockup -- trube_tech_light_500.png -- is the
     correct one, and this token now names that same relationship in reverse.
     The hex values below are the brand's own off-white/foreground pairing,
     not an invented dark-mode palette.) */
  --ink: #F2F0EC;
  --ink-muted: rgba(242, 240, 236, 0.68);
  --ink-faint: rgba(242, 240, 236, 0.42);
  --red: #F31617;

  /* The brand red is a mark and accent color, never body text, and never a
     glow -- no box-shadow uses it. It fills, borders, underlines, and marks
     status. Nothing in this file sets red as a text color against a ground
     it fails contrast on, and nothing gives it a soft-focus halo -- flat and
     precise, the "instrument light," not a neon sign. */

  /* Display type carries the actual "systems/mainframe" idea -- see header
     comment. Public Sans stays as body copy: still clean and modern, and the
     earlier "very WordPress" critique was never about this face, it was
     rounded cards + drop shadows + a warm serif pairing. Swapping only the
     display face and the palette is a real, surgical fix, not a rebuild for
     its own sake. */
  --mono: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;
  --sans: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Sharp corners, still not literal zero -- see v1 reasoning, still holds:
     a true 0 on small UI elements can read as a rendering bug rather than a
     choice. 2px reads as precision, not as a missed default. */
  --radius-sm: 2px;
  --radius-md: 2px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Links: never red text (fails contrast, and the brand file says so
   explicitly) -- ink with a red underline instead. */
.prose a, .body-copy a {
  color: var(--ink);
  border-bottom: 1.5px solid var(--red);
  transition: opacity 0.15s ease;
}
.prose a:hover, .body-copy a:hover { opacity: 0.7; }

.shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 28px;
}
@media (max-width: 640px) { .shell { padding: 0 20px; } }

/* ---------- Type ---------- */

h1, h2, h3, .display {
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.14;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.2rem, 4.6vw, 3.3rem); font-weight: 600; }
h2 { font-size: clamp(1.55rem, 3vw, 2.05rem); font-weight: 600; }
h3 { font-size: 1.15rem; font-weight: 600; }

/* Bracketed labels -- the one recurring structural motif, standing in for
   the page-builder rounded-badge eyebrow. Brackets are added here, not in
   copy, so every eyebrow across both pages gets the treatment for free and
   a color override (e.g. on-ink sections setting --red explicitly) carries
   through automatically via currentColor. */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 0.9rem;
}
.eyebrow::before { content: "[ "; }
.eyebrow::after { content: " ]"; }

.lede {
  font-size: 1.16rem;
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 62ch;
}

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); font-size: 0.92rem; }

/* A small square status-mark -- not a circle, which reads as a generic
   bullet. Square reads as a pixel/indicator light. Used sparingly, next to
   claims that are genuinely a live-status fact (someone answers, something
   is active) -- not decoration on every line. */
.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--red);
  margin-right: 9px;
  vertical-align: middle;
  position: relative;
  top: -1px;
  animation: statusPulse 2.6s ease-in-out infinite;
}
/* The one place motion earns its keep: a slow, faint breathe reading as "live,"
   the way a monitoring dashboard's status light does -- not decoration, a real
   signal, and small enough to sit well inside the "one motion effect, used
   sparingly" rule. Considered and rejected: a glowing light traveling across a
   divider rule (a real idea, floated 2026-08-20) -- decorative motion with no
   informational job, and specifically the neon-scanline move this palette was
   built to avoid reading as. See style.css's own header comment. */
@keyframes statusPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* The "AI in availability" mark -- Brandon's own line, used once, placed
   with restraint rather than repeated as a gimmick. */
.ai-mark { color: var(--red); font-weight: 700; }

/* ---------- Header ---------- */

.site-header {
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.site-header .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
}
/* trube_tech_light_500.png -- light-colored lockup (#F2F0EC text + #F31617
   mark, real alpha transparency, confirmed by direct pixel sampling, not
   filename) -- the correct lockup now that the ground is dark. The v1 build
   used trube_tech_dark_500.png for a light ground; that file is no longer
   used in the header/footer under this palette. 52px height kept from the
   "logo seems small" fix -- that critique was about presence, not warmth,
   and still applies here. */
.brand img { height: 52px; width: auto; }
.site-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.site-nav a { color: var(--ink-muted); }
.site-nav a:hover, .site-nav a.current { color: var(--ink); }
.site-nav a.current { border-bottom: 2px solid var(--red); padding-bottom: 2px; }
@media (max-width: 640px) {
  .site-nav { display: none; }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 14px 26px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
}
.btn-primary {
  background: var(--red);
  color: #fff;
}
.btn-primary:hover { background: #d81315; }

/* Not a second boxed button -- two side-by-side rounded-rectangle buttons
   is the exact "generic landing page hero" pattern being corrected for.
   A quiet action reads as a plain underlined link instead, the same
   device already used for body-copy links elsewhere on the page. */
.btn-quiet {
  background: none;
  padding: 14px 0;
  font-family: var(--mono);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-muted);
  border-bottom: 1.5px solid var(--line-strong);
  border-radius: 0;
}
.btn-quiet:hover { color: var(--ink); border-bottom-color: var(--red); }

/* ---------- Sections ---------- */

section { padding: 80px 0; }
section.tight { padding: 56px 0; }
@media (max-width: 640px) { section { padding: 52px 0; } }

.section-head { max-width: 720px; margin-bottom: 44px; }

hr.rule {
  border: none;
  border-top: 1px solid var(--line);
  margin: 0;
}

.on-bg-raised {
  background: var(--bg-raised);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* The deepest panel -- reserved for the highest-emphasis blocks (testimonial
   keystone, contact CTA, the named-trust sections). Carries the faint
   schematic grid (see below) as its one decorative flourish, deliberately
   not applied page-wide so it stays a considered accent instead of
   wallpaper. */
.on-ink {
  background: var(--bg-inset);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  color: var(--ink);
}
.on-ink .muted { color: var(--ink-muted); }
.on-ink a.prose-link, .on-ink .prose a { color: var(--ink); border-bottom-color: var(--red); }

/* ---------- Cards / grid ---------- */

.grid {
  display: grid;
  gap: 24px;
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 800px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* Reserved for genuinely bounded, package-like content (pricing tiers, a
   short enumerated fact-set) -- not the default wrapper for every content
   block. Most sections separate with a rule and whitespace instead of a
   box; see .procedure and .fact-pair below. */
.card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 28px;
}

/* Package-tier cards -- the one place a literal box is exactly correct,
   since a package genuinely is a bounded thing. Corner brackets instead of
   a drop shadow to lift it off the page: a schematic/blueprint crop-mark,
   not a page-builder shadow. */
.card-tier {
  position: relative;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  padding: 28px;
}
.card-tier::before,
.card-tier::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
}
.card-tier::before {
  top: -1px; left: -1px;
  border-top: 2px solid var(--line-strong);
  border-left: 2px solid var(--line-strong);
}
.card-tier::after {
  bottom: -1px; right: -1px;
  border-bottom: 2px solid var(--line-strong);
  border-right: 2px solid var(--line-strong);
}
.card-tier.is-featured {
  border-color: var(--red);
}
.card-tier.is-featured::before,
.card-tier.is-featured::after {
  border-color: var(--red);
}
.card-tier .tier-flag {
  position: absolute;
  top: -1px;
  right: -1px;
  background: var(--red);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
}

/* Plain rule-separated fact pairs -- replaces a bordered/shadowed card grid
   for content that isn't a literal "package." */
.fact-pair { border-top: 1px solid var(--line); padding-top: 22px; }

/* A flat scope-of-work list -- order doesn't carry meaning here (unlike
   .procedure), so a plain square mark instead of a numeral. Added 2026-08-20
   to carry over the old /packages/ page's "What We Handle" list, which had
   no equivalent anywhere in this rebuild. */
.scope-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 32px;
}
@media (max-width: 640px) { .scope-list { grid-template-columns: 1fr; } }
.scope-list li {
  position: relative;
  padding-left: 22px;
  color: var(--ink-muted);
  font-size: 0.98rem;
}
.scope-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  background: var(--red);
}

/* Procedure list -- the "replace claims with procedure" technique: short,
   concrete lines, no adjectives, a visual rhythm that reads as a sequence
   rather than a bullet dump. Large outline numerals in the mono face read
   as a step index on a system log, not a decorative badge. */
.procedure {
  list-style: none;
  margin: 0;
  padding: 0;
}
.procedure li {
  position: relative;
  padding: 4px 0 28px 64px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
  margin-top: 24px;
}
.procedure li:first-child { border-top: none; margin-top: 0; padding-top: 4px; }
.procedure li:last-child { padding-bottom: 0; }
.procedure { counter-reset: proc; }
.procedure li { counter-increment: proc; }
.procedure li::before {
  content: counter(proc, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 20px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--red);
  line-height: 1;
}
.procedure li:first-child::before { top: 0; }

/* Redaction bar -- what can't be said, made into the proof, same device
   the Borgia site uses for the same real constraint. A solid black bar,
   text set the same color as its own background -- the classic redacted-
   document convention, not an arbitrary color match. */
.redacted {
  display: inline-block;
  background: var(--bg-inset);
  color: var(--bg-inset);
  border-radius: 2px;
  padding: 0 8px;
  user-select: none;
}

blockquote {
  margin: 0;
  font-family: var(--mono);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink);
}
blockquote cite {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--ink-muted);
  margin-top: 14px;
}

.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.stat .n {
  display: block;
  font-family: var(--mono);
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--ink);
}
.stat .k {
  font-size: 0.86rem;
  color: var(--ink-muted);
}

/* Fade-in on load -- the one motion effect allowed, matching the "one slow
   fade on load, no carousels, no counters, no parallax" rule. */
.fade-in { animation: fadeIn 0.7s ease both; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Footer ---------- */

footer.site-foot {
  padding: 44px 0;
  border-top: 1px solid var(--line);
}
footer.site-foot .shell {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink-faint);
}
footer.site-foot a { color: var(--ink-muted); }
footer.site-foot a:hover { color: var(--ink); }
footer.site-foot .foot-links { display: flex; gap: 22px; }