/* ═══════════════════════════════════════════════════════════════
   TRM Solutions — shared design system for standalone pages
   (services, tools, and vertical landing pages)
   Serif display · sans body · mono utility · restrained accent
   ═══════════════════════════════════════════════════════════════ */

/* Design tokens now live in css/tokens.css, loaded before this file. */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--blue); color: #04091a; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.015em; line-height: 1.14; color: var(--white); }
a { color: var(--text-bright); }

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--blue-bright); outline-offset: 3px; border-radius: 3px;
}

/* ── Nav ── */
.nav { position: sticky; top: 0; z-index: 100; background: rgba(4,9,26,0.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hairline); }
.nav-inner { max-width: var(--container-max); margin: 0 auto; padding: 16px clamp(20px, 5vw, 48px); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { display: flex; align-items: center; gap: 4px; text-decoration: none; }
.logo-text { font-family: var(--font-body); font-weight: 700; font-size: 22px; letter-spacing: 4px; color: var(--white); text-transform: uppercase; }
.logo-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); margin-left: 2px; }
.nav-center { display: flex; gap: 30px; }
.nav-center a { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); text-decoration: none; transition: color var(--motion-duration) var(--motion-ease); }
.nav-center a:hover, .nav-center a[aria-current="page"] { color: var(--white); }
/* Matches the homepage treatment exactly. These previously differed in size,
   weight, letter-spacing, casing, padding and radius, so the same button
   changed shape as a visitor moved between pages. */
.nav-cta { flex-shrink: 0; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 12px 32px; border-radius: 6px; background: var(--blue); color: var(--bg); text-decoration: none; white-space: nowrap; transition: background-color var(--motion-duration) var(--motion-ease); box-shadow: none; }
.nav-cta:hover { background: var(--blue-bright); }
.nav-cta:active { box-shadow: none; }

/* ── Mobile nav drawer ──
   Ported verbatim from index.html so the two implementations cannot drift.
   Breakpoint aligned to 768px to match the homepage exactly; previously
   .nav-center hid at 820px here with no hamburger to replace it, which left
   these pages with no navigation at all on a phone. */
.nav-hamburger {
  display: none;
  /* Without flex-shrink:0 the nav's flex layout squeezes this to 20px at
     375px, half the intended tap target. */
  flex-shrink: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid var(--blue-border);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.2s;
}
.nav-hamburger:hover { border-color: var(--blue-border-hover); }
.nav-hamburger span {
  display: block;
  width: 18px; height: 2px;
  background: var(--text-secondary);
  border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
}
.nav-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-drawer {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 99;
  background: rgba(3,8,22,0.97);
  backdrop-filter: blur(24px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16,1,0.3,1);
}
.mobile-drawer.is-open { opacity: 1; pointer-events: auto; }
.mobile-drawer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 8px;
  padding: 80px 24px 40px;
}
.mobile-drawer-inner a {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 8px;
  width: 100%;
  max-width: 280px;
  text-align: center;
  transition: color 0.2s, background 0.2s;
}
.mobile-drawer-inner a:hover { color: var(--white); background: rgba(59,139,255,0.08); }
.mobile-drawer-cta {
  margin-top: 16px;
  background: linear-gradient(135deg, var(--blue), #2468d6) !important;
  color: #fff !important;
  box-shadow: 0 4px 20px var(--blue-glow);
  font-size: 16px !important;
}

@media (max-width: 1024px) { .nav-cta { padding: 10px 20px; font-size: 11px; letter-spacing: 1px; } }
@media (max-width: 900px)  { .nav-cta { padding: 9px 16px; font-size: 10px; } }

@media (max-width: 768px) {
  .nav-center { display: none; }
  .nav-hamburger { display: flex; }
  .mobile-drawer { display: block; }
  /* Without these the nav row totals 400px inside a 375px viewport and pushes
     the hamburger past the edge: logo 71 + gap 24 + CTA 201 + gap 24 + burger
     40 + padding 40. Mirrors index.html's mobile CTA scaling. */
  .nav-cta { padding: 10px 14px; font-size: 11px; letter-spacing: 1px; }
  .nav-inner { gap: 10px; }
}

/* ── Buttons ── */
.btn-solid { display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; border: none; border-radius: 8px; cursor: pointer; font-family: var(--font-body); font-size: 15px; font-weight: 600; background: var(--blue); color: #04091a; text-decoration: none; transition: background-color var(--motion-duration) var(--motion-ease); }
.btn-solid:hover { background: var(--blue-bright); }
/* Underline attached to the text rather than drawn as a border on the box, so
   it cannot drift from the baseline when the row is aligned. Matches index.html. */
.btn-text { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--text-bright); padding: 10px 4px; text-decoration: underline; text-decoration-color: rgba(150,175,220,0.35); text-decoration-thickness: 1px; text-underline-offset: 6px; transition: color 0.2s, text-decoration-color 0.2s; }
.btn-text:hover { color: var(--white); text-decoration-color: var(--text-secondary); }

/* ── Sections & type ── */
.section { padding: var(--section-pad) 0; }
.eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.13em; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--hairline); display: inline-block; }
/* 18ch forced the sector headlines to five lines in a 1200px container, which is
   what made the heroes read as a missing column rather than a chosen one: 39%
   fill and 754px tall on law-firms. Measured at 18/21/24/27ch: 24ch takes every
   sector headline to three lines and lifts fill to 46-52%; 27ch lifts it further
   but breaks the line count apart between pages (saas drops to two while the
   others hold three), so cross-page rhythm goes. 24ch is the last value where
   all three still agree. */
.h-display { font-size: clamp(32px, 5vw, 58px); letter-spacing: -0.02em; line-height: 1.06; color: var(--white); max-width: 24ch; }
.h-section { font-size: clamp(28px, 4vw, 46px); letter-spacing: -0.015em; line-height: 1.1; color: var(--white); max-width: 22ch; }
.lede { max-width: var(--measure); color: var(--text-primary); margin-top: 20px; font-size: 18px; }
.subhead { max-width: 60ch; color: var(--text-primary); margin-top: 18px; }

/* ── Page hero ── */
/* Vertical extent reduced from clamp(56,9vw,120)/clamp(40,6vw,72). The sector
   heroes carry 440-490px of ink in a 1200px container and have no second-column
   content that belongs there; inventing some would be decoration. Shortening the
   section is what makes the remaining space read as restraint rather than as a
   missing column. Horizontal fill is unchanged by this and cannot be changed by
   it: only /tools got a real element in the right region. */
.page-hero { padding: clamp(40px, 6vw, 84px) 0 clamp(32px, 4.5vw, 56px); border-bottom: 1px solid var(--hairline); }

/* ── Hero two-column layout ──────────────────────────────────────────────────
   Used by /tools, /services and the three sector pages.

   This previously read: "Only /tools uses this. The other page-heroes stay
   single-column ... because they have no second-column content that belongs
   there and inventing some would be decoration." That was correct when it was
   written and is now superseded, so it is restated rather than deleted: the
   sector pages have since acquired content that belongs in that space -- the
   named triggers that qualify a reader in four seconds -- and /services opens
   by naming three rungs in prose that the page then lists anyway. Measured
   before the change: 483px of the 1200px container empty on all four, 40%.

   The rule is unchanged in spirit. Nothing decorative goes here. The right
   column carries content the page already owns, at a higher altitude and in
   fewer words, and the section below keeps the full sentence. */
.hero-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.hero-layout > * { min-width: 0; }

/* The hero's right column. Deliberately quiet: a rule, a label, a line. It
   qualifies a reader rather than arguing with them, and it must never out-shout
   the headline beside it. */
.hero-aside { padding-top: 6px; }
.hero-aside .aside-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.13em; color: var(--text-muted); margin-bottom: 18px; }
.hero-aside .aside-row { padding: 15px 0; border-top: 1px solid var(--hairline); }
.hero-aside .aside-row:last-child { border-bottom: 1px solid var(--hairline); }
.hero-aside .aside-row h3,
.hero-aside .aside-row .aside-kicker {
  font-family: var(--font-display);
  font-size: var(--t-15);
  font-weight: 600;
  line-height: 1.35;
  color: var(--white);
  margin: 0 0 3px 0;
  letter-spacing: 0;
}
.hero-aside .aside-row p { font-size: 14px; line-height: 1.55; color: var(--text-secondary); margin: 0; }
.hero-aside .aside-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
  letter-spacing: 0.06em; margin-top: 4px; }
@media (max-width: 900px) { .hero-aside { padding-top: 0; } }

/* ── The documents-and-prices panel ──────────────────────────────────────────
   An information panel, not a promotional card: no gradient, no glow, no lift on
   hover. It reuses --surface, --hairline and the existing type steps. */
.hero-panel {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 26px 28px 24px;
}
.hp-head {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 14px;
}
.hp-list { list-style: none; margin: 0; padding: 0; }
.hp-row {
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--hairline);
}
.hp-row:last-child { border-bottom: 0; }
/* A button, not an anchor, because it opens the purchase dialog rather than
   navigating. .btn-text is not reused here: that class carries its own padding
   and underline offset built for a standalone action. */
.hp-name {
  background: transparent; border: 0; padding: 0; cursor: pointer; text-align: left;
  font-family: var(--font-body); font-size: 15px; line-height: 1.4;
  color: var(--text-bright);
  text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 4px; transition: color 0.2s, text-decoration-color 0.2s;
}
.hp-name:hover { color: var(--white); text-decoration-color: var(--text-secondary); }
.hp-price { font-family: var(--font-mono); font-size: 14px; color: var(--white); white-space: nowrap; }
/* The set is the only visually distinguished row. */
/* The separator above the bundle is one rule, not two. The row before it carries
   .hp-row's border-bottom and the bundle carries its own border-top, 6px apart:
   measured, and at 1x they read as a single thick line rather than as two.
   :last-child already removes the bundle's own bottom border, but nothing
   removed the preceding row's bottom border, which is the half that was never
   intended to be there.

   The stronger separation the bundle wants is carried by space -- 6px of margin
   plus 16px of padding against the rows' 11px, so the gap above the Set is
   roughly double a row gap -- rather than by a heavier rule. One rule at the
   list's own weight, and the space says it matters. */
.hp-row:has(+ .hp-row-set) { border-bottom: 0; }
.hp-row-set { margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.hp-row-set .hp-name { color: var(--white); font-weight: 500; }
.hp-row-set .hp-price { color: var(--blue-pale); }

.hp-facts { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--hairline); }
.hp-facts dt {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-muted); margin-top: 12px;
}
.hp-facts dt:first-child { margin-top: 0; }
.hp-facts dd { margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-primary); }

/* Below 1200 the desktop link row is gone and two columns leave the price
   panel narrow enough that its right edge meets the window. Stack it under
   the copy. At 1200 and above the two columns share the 1200px measure. */
@media (max-width: 1199px) {
  .hero-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}
.page-hero .actions { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; margin-top: 34px; }

/* ── Catalog ── */
.catalog { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--hairline); margin-top: 40px; }
.cat-group-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.13em; color: var(--blue-pale); padding: 34px 0 6px; }
.cat-row { display: grid; grid-template-columns: 1fr 200px; gap: 30px; align-items: baseline; padding: 26px 0; border-bottom: 1px solid var(--hairline); }
.cat-row h3 { font-size: 22px; color: var(--white); margin-bottom: 8px; }
.cat-row p { color: var(--text-primary); font-size: 15px; max-width: 60ch; }
.cat-price { text-align: right; }
.cat-price .amt { font-family: var(--font-display); font-size: 22px; color: var(--white); display: block; }
.cat-price .per { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
@media (max-width: 720px) { .cat-row { grid-template-columns: 1fr; gap: 10px; } .cat-price { text-align: left; } }

/* ── Tool cards ── */
.tool-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 40px; }
.tool-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px; padding: 30px 28px; display: flex; flex-direction: column; }
.tool-card .price { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; color: var(--blue-pale); margin-bottom: 12px; }
.tool-card h3 { font-size: 20px; color: var(--white); margin-bottom: 10px; }
.tool-card p { color: var(--text-primary); font-size: 15px; flex: 1; }
.tool-card .btn-solid { margin-top: 22px; align-self: flex-start; }
.soon { background: var(--surface-2); }
.soon .soon-tag { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-secondary); }
@media (max-width: 720px) { .tool-grid { grid-template-columns: 1fr; } }

/* ── Light testimonial (vertical pages) ── */
.client-work { background: var(--paper); color: var(--ink); }
.client-work .eyebrow { color: var(--ink-soft); }
.client-work .eyebrow::before { background: var(--paper-hairline); }
.client-work .h-section { color: var(--ink); }
.cw-single { max-width: 760px; }
.cw-single .quote { font-family: var(--font-display); font-size: clamp(22px, 3vw, 30px); line-height: 1.35; color: var(--ink); letter-spacing: -0.01em; margin-top: 26px; }
.cw-single .attrib { margin-top: 22px; font-size: 14px; color: var(--ink-soft); }
.cw-single .attrib strong { color: var(--ink); }
.cw-single .result { margin-top: 20px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); }

/* ── Points ── */
.points { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
.points li { background: var(--bg); padding: 30px 28px; }
.points li h3 { font-size: 20px; color: var(--white); margin-bottom: 10px; }
.points li p { color: var(--text-primary); font-size: 15px; max-width: 46ch; }
@media (max-width: 720px) { .points { grid-template-columns: 1fr; } }

/* ── CTA band ── */
/* Same reasoning as .page-hero: a closing action carrying ~475px of ink does not
   need 104px of padding above and below it. */
.cta-band { border-top: 1px solid var(--hairline); padding: clamp(48px, 6vw, 76px) 0; }
.cta-band .actions { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; margin-top: 30px; }
.avail { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary); margin-top: 20px; }

/* Footer chrome lives in css/chrome.css so every page shares one grid. */
.disclaimer-note { border-top: 1px solid var(--hairline); }
.disclaimer-note p { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; color: var(--text-muted); line-height: 1.8; max-width: 90ch; }

/* ── Reveal ── */
.reveal { opacity: 1; transform: none; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}


/* ── Line length ─────────────────────────────────────────────────────────────
   Applied to the blocks measured over 75 real characters per line at 1440.
   Real characters, not `ch`: the count is text length divided by rendered line
   boxes, so it is what a reader actually sees. */
.terms p,
.kit-spec ul li,
.kit-body p,
.kit-cols p.kit-for,
.cat-row div p,
p.rungs-note { max-width: var(--measure-body); }