/* Razorbill GTM register — same token system as style.css (loaded first on
   every gtm page; tokens cascade from its :root). Consulting-brief register:
   hairline rules, sharp corners, ink masthead, single steel-blue accent. */

body.gtm {
  margin: 0;
  padding-top: var(--header-h);
  background: var(--paper-2);   /* solid fallback under the port backdrop */
  font-family: var(--sans);
  color: var(--body-ink);
  line-height: var(--lh-base);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
body.gtm .wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--s-4); }
body.gtm h1, body.gtm h2, body.gtm h3 {
  font-family: var(--sans);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: var(--track-tight);
  line-height: var(--lh-tight);
}
body.gtm h1 { font-size: var(--t-xl); font-weight: 800; margin: 0 0 var(--s-3); max-width: 24ch; }
body.gtm h2 { font-size: var(--t-l); margin: var(--s-6) 0 var(--s-3); border: 0; padding: 0; }
body.gtm h3 { font-size: var(--t-m); margin: 0 0 var(--s-2); }
body.gtm p { margin: 0 0 var(--s-4); max-width: var(--measure); }
body.gtm .lead { font-size: var(--t-m); line-height: var(--lh-open); color: var(--body-ink); }
body.gtm .muted { color: var(--muted); }
body.gtm .cite { color: var(--muted); font-size: var(--t-s); }
body.gtm .src { color: var(--muted); font-size: var(--t-xs); margin-top: var(--s-2); }
body.gtm a { color: var(--accent-blue); }
body.gtm a:hover { color: var(--ink); }

/* masthead — fixed ink band, condenses on scroll (style.css governs
   header.site; this mirrors it for header.gtm) */
body.gtm header.gtm {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  height: var(--header-h);
  background: var(--ink);
  border-bottom: 1px solid transparent;
  transition: height var(--dur-set) var(--ease-settle),
              border-color var(--dur-set) var(--ease-settle);
}
body.gtm header.gtm .wrap {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: nowrap; gap: var(--s-5); height: 100%;
}
body.gtm header.gtm .brand { flex: 0 0 auto; }
body.gtm header.gtm nav { flex: 0 1 auto; min-width: 0; }
.condensed header.gtm {
  height: var(--header-h-condensed);
  border-bottom-color: var(--accent-blue);
}
body.gtm .brand {
  display: flex; align-items: center; gap: var(--s-3); text-decoration: none;
  color: #fff; font-weight: 800; letter-spacing: -0.01em; font-size: var(--t-m);
}
body.gtm .brand img {
  height: 0.72em; width: auto; display: block;
  transform-origin: left center;
  transition: transform var(--dur-set) var(--ease-settle);
}
.condensed body.gtm .brand img, .condensed header.gtm .brand img { transform: scale(0.82); }
body.gtm nav.gtm {
  display: flex; align-items: center; gap: var(--s-4);
  overflow-x: auto; scrollbar-width: none; max-width: 100%;
}
body.gtm nav.gtm::-webkit-scrollbar { display: none; }
body.gtm nav.gtm a {
  color: var(--paper-on-ink); text-decoration: none; margin-left: 0;
  font-size: var(--t-s); white-space: nowrap;
  padding: var(--s-1) 0; border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-settle),
              border-color var(--dur-fast) var(--ease-settle);
}
body.gtm nav.gtm a:hover { color: #fff; border-bottom-color: var(--accent-blue); }

/* hero — the evidence frame is the centrepiece over the treated photograph;
   copy left-set over the duotone, never centered */
body.gtm .hero {
  position: relative;
  background: transparent;   /* the fixed port backdrop shows through */
  border: 0;
}
body.gtm .hero .wrap { padding: var(--s-7) var(--s-4) var(--s-6); }
@media (prefers-reduced-motion: reduce) {
  /* backdrop hidden -> the hero's light type needs its own dark ground */
  body.gtm .hero { background: var(--ink); }
}
body.gtm .hero h1 { color: #ffffff; }
body.gtm .hero .lead { color: #dfe6ec; }
body.gtm .hero .cite { color: #dfe6ec; }
body.gtm .hero .muted { color: #dfe6ec; }
body.gtm .hero .cta {
  background: var(--accent-blue); color: #fff;
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.35);
}
body.gtm .hero .cta:hover { background: var(--accent-dark); }
body.gtm .hero .cta.ghost {
  background: transparent; color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.65); box-shadow: none;
}
body.gtm .hero .cta.ghost:hover { background: rgba(255, 255, 255, 0.12); }
/* the evidence frame sits on its own paper panel over the photograph */
body.gtm .hero .hero-frame {
  background: var(--paper); border: 1px solid var(--rule);
  padding: var(--s-4);
}
@media (max-width: 700px) {
  /* shorter photo band on small screens; same bounded-contrast treatment */
  body.gtm .hero .wrap { padding: var(--s-6) var(--s-4) var(--s-5); }
}
body.gtm .cta {
  display: inline-block; background: var(--ink); color: #fff;
  text-decoration: none; font-weight: 600;
  padding: var(--s-3) var(--s-5); border-radius: 1px;
  margin: var(--s-2) var(--s-3) var(--s-2) 0;
  box-shadow: inset 0 -2px 0 var(--accent-blue);
  transition: background-color var(--dur-fast) var(--ease-settle),
              transform var(--dur-fast) var(--ease-settle),
              box-shadow var(--dur-fast) var(--ease-settle);
}
body.gtm .cta:hover { background: var(--ink-2); color: #fff;
  box-shadow: inset 0 -3px 0 var(--accent-blue); }
body.gtm .cta:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 var(--accent-blue); }
body.gtm .cta.ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--ink); box-shadow: none;
}
body.gtm .cta.ghost:hover { background: var(--paper-2); }

/* structure: contained document sheets laid over the port, alternating
   white / cool band, hairline-edged, with the photograph visible in the
   gaps between them */
body.gtm section {
  padding: var(--s-6) 0;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--rule);
  max-width: 1160px;
  margin: 0 auto var(--s-4);
}
body.gtm section.hero {
  background: transparent; border: 0; max-width: none; margin: 0;
}
body.gtm section:nth-of-type(even) { background: rgba(237, 241, 245, 0.97); }
body.gtm .panel {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 1px;
  border-top: 2px solid var(--ink);
  padding: var(--s-4) var(--s-4); margin: var(--s-3) 0;
  transition: border-color var(--dur-fast) var(--ease-settle);
}
body.gtm .panel:hover { border-top-color: var(--accent-blue); }
body.gtm .grid { display: grid; gap: var(--s-4); }
@media (min-width: 720px) {
  body.gtm .grid.c3 { grid-template-columns: repeat(3, 1fr); }
  body.gtm .grid.c2 { grid-template-columns: repeat(2, 1fr); }
}
body.gtm .mark-note { color: var(--muted); font-size: var(--t-xs); }

/* three-clock timeline */
body.gtm .clock { display: grid; gap: var(--s-3); }
@media (min-width: 720px) { body.gtm .clock { grid-template-columns: repeat(4, 1fr); } }
body.gtm .clock .step {
  border: 1px solid var(--rule); border-radius: 1px;
  padding: var(--s-3); background: var(--paper);
}
body.gtm .clock .step.hl {
  border-color: var(--accent-blue); box-shadow: inset 3px 0 0 var(--accent-blue);
}
body.gtm .clock .step .t {
  font-family: var(--mono); font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* 20-point chips — set like ledger column heads, not pills */
body.gtm .chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
body.gtm .chip {
  border: 1px solid var(--rule); border-radius: 1px;
  padding: var(--s-1) var(--s-3); background: var(--paper);
  font-family: var(--mono); font-size: var(--t-s);
  font-variant-numeric: tabular-nums;
}
body.gtm .chip b { color: var(--ink); font-weight: 600; }

/* numbered steps — mono counters on a gold rule, not circles */
/* 4B (A-26): a connected sequence — mono markers on one continuous rule */
body.gtm ol.steps { counter-reset: s; list-style: none; padding: 0; }
body.gtm ol.steps li {
  counter-increment: s; border: 0; background: transparent;
  padding: 0 0 var(--s-5) var(--s-6); margin: 0; position: relative;
}
body.gtm ol.steps li::before {
  content: counter(s, decimal-leading-zero); position: absolute;
  left: 0; top: 0; z-index: 1;
  width: var(--s-5); height: var(--s-5);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: var(--t-s); font-weight: 600;
  color: var(--accent-blue); background: var(--paper);
  border: 1px solid var(--accent-blue); border-radius: 1px;
}
body.gtm ol.steps li::after {
  content: ""; position: absolute;
  left: calc(var(--s-5) / 2); top: var(--s-5); bottom: 0;
  width: 1px; background: var(--rule);
}
body.gtm ol.steps li:last-child { padding-bottom: 0; }
body.gtm ol.steps li:last-child::after { display: none; }

/* trust bullets + faq */
body.gtm ul.trust { padding-left: 1.1rem; }
body.gtm ul.trust li { margin: var(--s-2) 0; max-width: var(--measure); }
body.gtm details { border-bottom: 1px solid var(--rule); padding: var(--s-3) 0; }
body.gtm summary {
  cursor: pointer; font-weight: 600; color: var(--ink);
  transition: color var(--dur-fast) var(--ease-settle);
}
body.gtm summary:hover { color: var(--accent-blue); }
body.gtm details p { margin: var(--s-3) 0 0; }

/* the standing not-a-law-firm strip — visible, not buried */
body.gtm .disclaimer {
  background: var(--paper); border: 1px solid var(--rule);
  border-left: 2px solid var(--muted); border-radius: 1px;
  padding: var(--s-3) var(--s-4); color: var(--body-ink);
  font-size: var(--t-s); margin: var(--s-4) 0;
  max-width: var(--measure);
}

/* footer */
body.gtm footer.gtm {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--rule);
  max-width: 1160px; margin: var(--s-5) auto;
}
body.gtm footer.gtm .wrap {
  padding: var(--s-5) var(--s-4); color: var(--muted); font-size: var(--t-s);
}
body.gtm footer.gtm a { color: var(--muted); }
body.gtm footer.gtm a:hover { color: var(--accent-blue); }
body.gtm footer.gtm .foot-mark { height: 0.9em; width: auto; vertical-align: -0.08em; }

/* forms on gtm pages inherit form.lead rules from style.css */
body.gtm form label {
  display: block; font-weight: 600; margin: var(--s-3) 0 var(--s-1);
  font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: var(--track-caps); color: var(--muted);
}
body.gtm form input {
  width: 100%; padding: var(--s-3); border: 1px solid var(--rule);
  border-radius: 1px; font: inherit; background: #fff; color: var(--body-ink);
  transition: border-color var(--dur-fast) var(--ease-settle),
              box-shadow var(--dur-fast) var(--ease-settle);
}
body.gtm form input:focus-visible {
  outline: none; border-color: var(--ink);
  box-shadow: inset 2px 0 0 var(--accent-blue), 0 0 0 1px var(--ink);
}


/* ——— inline SVG infographics (A-26): palette tokens, legible at 320 ——— */
.viz { display: block; width: 100%; height: auto; margin: var(--s-4) 0 0; }
.viz text {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.viz .viz-label { fill: var(--muted); font-size: 11px; }
.viz .viz-strong { fill: var(--ink); font-size: 12px; font-weight: 600; }
.viz .viz-accent { fill: var(--accent-blue); font-size: 12px; font-weight: 600; }
.viz .viz-cell { fill: var(--paper); stroke: var(--rule); }
.viz .viz-span { fill: var(--paper-2); stroke: var(--muted); }
.viz .viz-defect { fill: var(--accent-blue); }
.viz .viz-daynum { fill: var(--body-ink); font-size: 11px; }
.viz .viz-daynum-inv { fill: #ffffff; font-size: 11px; font-weight: 600; }
.viz .viz-rule { stroke: var(--rule); stroke-width: 1; }

/* reduced-motion: the backdrop is hidden, so the hero's light type gets its
   own ink ground. Placed last (and at section.hero specificity) so the
   sheet-layout transparency cannot beat it in the cascade. */
@media (prefers-reduced-motion: reduce) {
  body.gtm section.hero, body.gtm .hero { background: var(--ink); }
}