/*
Theme Name: Third Rock Consulting
Theme URI: https://www.thirdrockconsulting.ca/
Author: Nuterra Labs
Author URI: https://nuterralabs.com/
Description: A classic WordPress theme for Third Rock Consulting — a strategy firm helping companies enter and scale within regulated aerospace, defence and space markets. Single-page front end with sectioned layout, Customizer-driven branding, and editable content model.
Version: 1.48.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: trc
Tags: business, one-column, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-width-template, threaded-comments, translation-ready, block-styles, wide-blocks
*/

/* =========================================================
   1. Tokens
   ========================================================= */
:root {
  /* Brand — sampled from thirdrockconsulting.ca, overridable in the Customizer */
  --trc-ink:        #1f1f1f;
  --trc-ink-2:      #2a2a2a;
  --trc-ink-3:      #3a3a3a;
  --trc-line:       rgba(255, 255, 255, 0.14);
  --trc-line-solid: #e2e2e2;
  --trc-paper:      #f5f5f5;
  --trc-paper-2:    #ffffff;
  --trc-text:       #4a4a4a;
  --trc-text-muted: #757575;
  --trc-on-dark:    #ffffff;
  --trc-on-dark-mut:rgba(255, 255, 255, 0.72);
  --trc-accent:     #7a1f1f;
  /* NOTE: every token in this block is a fallback only. The Customizer
     prints its colours into an inline :root block in the page head, and that
     wins over this file. To change a brand colour for real, change its
     default in inc/customizer.php, not here. */

  /* The accent for text, rules and outlines on the near-black bands.
     Oxblood does not survive here: dark enough to stay on brand and it
     goes muddy, light enough to read and it turns pink. So the dark bands
     get a warm bone neutral instead, and red is reserved for the light
     sections where it actually looks like oxblood. Hierarchy on dark comes
     from weight and opacity, not hue. */
  --trc-accent-2:   #ded5d1;

  /* Type — the live site is Inter throughout */
  --trc-font-head: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --trc-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --trc-fs-display: clamp(2.6rem, 6.2vw, 5.2rem);
  --trc-fs-h1:      clamp(2.4rem, 5vw, 4rem);
  --trc-fs-h2:      clamp(2.05rem, 3.8vw, 3.15rem);
  --trc-fs-h3:      clamp(1.35rem, 2.1vw, 1.75rem);
  --trc-fs-h4:      clamp(1.1rem, 1.5vw, 1.3rem);
  --trc-fs-lead:    clamp(1.05rem, 1.55vw, 1.3rem);
  --trc-fs-body:    1.0rem;
  --trc-fs-small:   0.875rem;
  --trc-fs-eyebrow: 0.75rem;

  /* Space */
  --trc-gutter:  clamp(1.25rem, 4vw, 2.5rem);
  --trc-max:     1200px;
  --trc-max-narrow: 780px;
  --trc-section: clamp(4rem, 9vw, 8.5rem);
  --trc-radius:  2px;
  --trc-radius-lg: 4px;
  --trc-radius-pill: 20px;

  --trc-shadow:    0 1px 2px rgba(11, 18, 32, 0.06), 0 8px 28px rgba(11, 18, 32, 0.07);
  --trc-shadow-lg: 0 2px 4px rgba(11, 18, 32, 0.06), 0 24px 60px rgba(11, 18, 32, 0.14);

  --trc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* =========================================================
   2. Reset / base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /*
   * scroll-behavior: smooth was here and has been removed. The front page is
   * around 14,000px tall, so an in-page link ran a scroll animation lasting
   * seconds, with the whole document sliding under the reader's finger. A tap
   * during that lands on whatever is passing, which is why the footer call to
   * action sometimes opened Calendly and sometimes an initiative page. The
   * padding below is the part that was wanted: it keeps an anchor from landing
   * with its heading hidden behind the fixed header.
   */
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--trc-paper-2);
  color: var(--trc-text);
  font-family: var(--trc-font-body);
  font-size: var(--trc-fs-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.trc-nav-open { overflow: hidden; }

img, svg, video { max-width: 100%; height: auto; display: block; }
/* Icons are stroke-drawn: never let a blanket fill collapse them into blobs. */
svg.trc-icon { fill: none; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--trc-font-head);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: var(--trc-fs-h1); }
h2 { font-size: var(--trc-fs-h2); }
h3 { font-size: var(--trc-fs-h3); }
h4 { font-size: var(--trc-fs-h4); }
h5, h6 { font-size: 1rem; letter-spacing: 0.02em; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; }
li { margin-bottom: 0.4em; }

strong, b { font-weight: 650; }

blockquote {
  margin: 2rem 0;
  padding-left: 1.5rem;
  border-left: 2px solid var(--trc-accent);
  font-family: var(--trc-font-head);
  font-size: var(--trc-fs-lead);
  font-style: normal;
}

hr {
  border: 0;
  height: 1px;
  background: var(--trc-line-solid);
  margin: 3rem 0;
}

table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
th, td { padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--trc-line-solid); text-align: left; }
th { font-family: var(--trc-font-head); font-size: var(--trc-fs-small); text-transform: uppercase; letter-spacing: 0.08em; }

code, pre, kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}
pre {
  background: var(--trc-ink);
  color: var(--trc-on-dark);
  padding: 1.25rem;
  border-radius: var(--trc-radius);
  overflow-x: auto;
}
code { background: rgba(11, 18, 32, 0.06); padding: 0.15em 0.4em; border-radius: 3px; }
pre code { background: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--trc-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--trc-accent); color: #fff; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus {
  position: fixed !important;
  top: 1rem; left: 1rem;
  width: auto; height: auto;
  clip: auto;
  z-index: 1000;
  padding: 0.75rem 1.25rem;
  background: var(--trc-ink);
  color: var(--trc-on-dark);
  border-radius: var(--trc-radius);
  font-size: var(--trc-fs-small);
}

/* =========================================================
   3. Layout primitives
   ========================================================= */
.trc-wrap {
  width: 100%;
  max-width: var(--trc-max);
  margin-inline: auto;
  padding-inline: var(--trc-gutter);
}
.trc-wrap--narrow { max-width: var(--trc-max-narrow); }

.trc-section { padding-block: var(--trc-section); position: relative; }
.trc-section--tight { padding-block: clamp(2.75rem, 5.5vw, 5rem); }

.trc-section--dark {
  background: var(--trc-ink);
  color: var(--trc-on-dark);
}
.trc-section--dark-2 { background: var(--trc-ink-2); color: var(--trc-on-dark); }
.trc-section--paper { background: var(--trc-paper); }
.trc-section--white { background: var(--trc-paper-2); }

.trc-section--dark h1, .trc-section--dark h2, .trc-section--dark h3,
.trc-section--dark-2 h1, .trc-section--dark-2 h2, .trc-section--dark-2 h3 { color: var(--trc-on-dark); }

.trc-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.trc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.trc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.trc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.trc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--trc-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  /* On light grounds the brackets are the only red part; the label itself
     takes body colour. Dark grounds swap the brackets to bone, below. */
  color: var(--trc-text);
  margin: 0 0 1.15rem;
}
.trc-eyebrow::before,
.trc-eyebrow::after { color: var(--trc-accent); font-weight: 700; }
.trc-eyebrow::before { content: "[\00a0"; }
.trc-eyebrow::after  { content: "\00a0]"; }

/* On the near-black bands the label goes white and the brackets take the
   bone neutral, so nothing red sits on black. */
.trc-section--dark .trc-eyebrow,
.trc-section--dark-2 .trc-eyebrow,
.trc-pagehero .trc-eyebrow,
.trc-band .trc-eyebrow { color: var(--trc-on-dark); }
.trc-section--dark .trc-eyebrow::before,
.trc-section--dark .trc-eyebrow::after,
.trc-section--dark-2 .trc-eyebrow::before,
.trc-section--dark-2 .trc-eyebrow::after,
.trc-pagehero .trc-eyebrow::before,
.trc-pagehero .trc-eyebrow::after,
.trc-band .trc-eyebrow::before,
.trc-band .trc-eyebrow::after { color: var(--trc-accent-2); }

.trc-section-head { max-width: 62ch; margin-bottom: clamp(2.25rem, 4.5vw, 3.75rem); }
.trc-section-head--center { margin-inline: auto; text-align: center; }

.trc-section-head h2 { font-size: var(--trc-fs-h2); margin-bottom: 0.7em; }
.trc-section-head p {
  font-size: var(--trc-fs-lead);
  color: var(--trc-text-muted);
  line-height: 1.55;
}
.trc-section--dark .trc-section-head p,
.trc-section--dark-2 .trc-section-head p { color: var(--trc-on-dark-mut); }

.trc-mission__text {
  font-size: var(--trc-fs-h2);
  line-height: 1.18;
  max-width: 34ch;
}

.trc-lead { font-size: var(--trc-fs-lead); line-height: 1.55; }
.trc-muted { color: var(--trc-text-muted); }
.trc-section--dark .trc-muted, .trc-section--dark-2 .trc-muted { color: var(--trc-on-dark-mut); }

/* Maroon is too dark to read on the near-black bands, so lift it there. */
.trc-footer h2, .trc-footer h3,
.trc-section--dark .trc-operate__col h3,
.trc-section--dark-2 .trc-operate__col h3,
.trc-section--dark .trc-step__num,
.trc-section--dark-2 .trc-step__num,
.trc-section--dark .trc-textlink,
.trc-section--dark-2 .trc-textlink,
.trc-initiative .trc-textlink,
.trc-cta__sub,
.trc-statement__a,
.trc-steps__note em,
.trc-pullquote__rule { color: var(--trc-accent-2); }

.trc-section--dark .trc-checklist li::before,
.trc-section--dark-2 .trc-checklist li::before { background: var(--trc-accent-2); }

/* These are leading numbers, not bullets: colour only, never a filled block. */
.trc-entry li::before {
  background: none !important;
  border: 0;
  border-radius: 0;
  width: auto;
  height: auto;
  color: var(--trc-accent-2);
}

/* =========================================================
   4. Buttons
   ========================================================= */
.trc-btn {
  --btn-bg: var(--trc-accent);
  --btn-fg: #ffffff;
  --btn-bd: var(--trc-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 1.2rem 2rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--trc-radius-pill);
  font-family: var(--trc-font-body);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.25s var(--trc-ease), background-color 0.25s var(--trc-ease),
              color 0.25s var(--trc-ease), border-color 0.25s var(--trc-ease);
}
.trc-btn:hover { transform: translateY(-2px); }
.trc-btn:active { transform: translateY(0); }
.trc-btn svg { width: 1em; height: 1em; }

.trc-btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--trc-accent);
  --btn-bd: rgba(122, 31, 31, 0.4);
}
.trc-btn--ghost:hover { --btn-bg: var(--trc-accent); --btn-fg: #fff; --btn-bd: var(--trc-accent); }

.trc-section--dark .trc-btn--ghost,
.trc-section--dark-2 .trc-btn--ghost,
.trc-band .trc-btn--ghost,
.trc-hero .trc-btn--ghost {
  --btn-fg: var(--trc-on-dark);
  --btn-bd: rgba(238, 241, 246, 0.34);
}
.trc-section--dark .trc-btn--ghost:hover,
.trc-section--dark-2 .trc-btn--ghost:hover,
.trc-band .trc-btn--ghost:hover,
.trc-hero .trc-btn--ghost:hover {
  --btn-bg: var(--trc-on-dark);
  --btn-fg: var(--trc-ink);
  --btn-bd: var(--trc-on-dark);
}

.trc-btn--lg { padding: 1.3rem 2.4rem; font-size: 1.0625rem; }

/* A long site name must not squeeze the header button onto two lines. */
.trc-header__cta .trc-btn,
.trc-nav__cta .trc-btn { white-space: nowrap; }

.trc-btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
}

.trc-textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--trc-font-head);
  font-size: var(--trc-fs-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--trc-accent);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--trc-ease), gap 0.25s var(--trc-ease);
}
.trc-textlink:hover { border-bottom-color: currentColor; gap: 0.75rem; }
.trc-textlink svg { width: 0.9em; height: 0.9em; }

/* =========================================================
   5. Site header
   ========================================================= */
.trc-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: transparent;
  transition: background-color 0.35s var(--trc-ease), box-shadow 0.35s var(--trc-ease),
              border-color 0.35s var(--trc-ease);
  border-bottom: 1px solid transparent;
}
.trc-header.is-stuck,
.trc-header.is-solid {
  background: rgba(31, 31, 31, 0.94);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom-color: var(--trc-line);
}

.trc-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 78px;
}

.trc-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex: 0 0 auto;
  color: var(--trc-on-dark);
  font-family: var(--trc-font-head);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.trc-brand img, .trc-brand__logo { max-height: 48px; width: auto; }
.trc-brand__text {
  font-size: 1.0625rem;
  white-space: nowrap;
}
.trc-brand__mark {
  width: 34px; height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #b83535 0%, var(--trc-accent) 45%, #2a2a2a 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 18px rgba(122, 31, 31, 0.35);
}
.trc-brand__tagline {
  display: block;
  font-family: var(--trc-font-body);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--trc-on-dark-mut);
  margin-top: 0.2rem;
}

/* Desktop nav */
.trc-nav { display: flex; align-items: center; gap: 2rem; }
.trc-nav { min-width: 0; }
.trc-nav ul {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(0.7rem, 1.2vw, 1.4rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.trc-nav li { margin: 0; position: relative; }
.trc-nav a {
  display: inline-block;
  padding: 0.4rem 0;
  color: var(--trc-on-dark);
  font-size: clamp(0.8125rem, 0.95vw, 0.9375rem);
  font-weight: 500;
  white-space: nowrap;
  position: relative;
}
/* The in-drawer CTA is for the mobile menu only. */
.trc-nav__cta { display: none; }
.trc-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--trc-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--trc-ease);
}
.trc-nav a:hover::after,
.trc-nav .current-menu-item > a::after { transform: scaleX(1); }

/* Sub-menus */
.trc-nav .sub-menu {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 220px;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0.5rem;
  background: var(--trc-ink-2);
  border: 1px solid var(--trc-line);
  border-radius: var(--trc-radius);
  box-shadow: var(--trc-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--trc-ease), transform 0.25s var(--trc-ease), visibility 0.25s;
}
.trc-nav li:hover > .sub-menu,
.trc-nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.trc-nav .sub-menu a { display: block; padding: 0.6rem 0.85rem; border-radius: 3px; font-size: 0.9rem; }
.trc-nav .sub-menu a::after { display: none; }
.trc-nav .sub-menu a:hover { background: rgba(255, 255, 255, 0.07); }

.trc-header__cta { display: inline-flex; flex: 0 0 auto; }

/* Mobile toggle */
.trc-navtoggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid rgba(238, 241, 246, 0.3);
  border-radius: var(--trc-radius);
  color: var(--trc-on-dark);
  cursor: pointer;
  padding: 0;
}
.trc-navtoggle__bars { display: block; width: 18px; height: 12px; position: relative; }
.trc-navtoggle__bars span {
  position: absolute;
  left: 0;
  width: 100%; height: 1.5px;
  background: currentColor;
  transition: transform 0.3s var(--trc-ease), opacity 0.2s var(--trc-ease);
}
.trc-navtoggle__bars span:nth-child(1) { top: 0; }
.trc-navtoggle__bars span:nth-child(2) { top: 5.25px; }
.trc-navtoggle__bars span:nth-child(3) { top: 10.5px; }
.trc-navtoggle[aria-expanded="true"] .trc-navtoggle__bars span:nth-child(1) { transform: translateY(5.25px) rotate(45deg); }
.trc-navtoggle[aria-expanded="true"] .trc-navtoggle__bars span:nth-child(2) { opacity: 0; }
.trc-navtoggle[aria-expanded="true"] .trc-navtoggle__bars span:nth-child(3) { transform: translateY(-5.25px) rotate(-45deg); }

/* =========================================================
   6. Hero
   ========================================================= */
.trc-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(92vh, 900px);
  padding-block: clamp(9rem, 18vh, 12rem) clamp(4.5rem, 10vh, 7rem);
  background: var(--trc-ink);
  color: var(--trc-on-dark);
  overflow: hidden;
  isolation: isolate;
}
.trc-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  opacity: 0.78;
}
.trc-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 520px at 78% 18%, rgba(122, 31, 31, 0.34), transparent 62%),
    radial-gradient(700px 420px at 10% 88%, rgba(255, 255, 255, 0.06), transparent 60%),
    linear-gradient(100deg, rgba(18, 18, 18, 0.86) 0%, rgba(20, 20, 20, 0.52) 48%, rgba(28, 28, 28, 0.24) 100%),
    linear-gradient(180deg, rgba(20, 20, 20, 0.06) 0%, rgba(28, 28, 28, 0.34) 74%, rgba(31, 31, 31, 0.92) 100%);
}
.trc-hero__inner { position: relative; max-width: 60ch; }
.trc-hero__title {
  font-size: var(--trc-fs-display);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 1.1rem;
}
.trc-hero__tagline {
  font-family: var(--trc-font-head);
  font-size: clamp(1.15rem, 2.2vw, 1.75rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--trc-on-dark);
  margin: 0 0 1.5rem;
}
.trc-hero__text {
  font-size: var(--trc-fs-lead);
  line-height: 1.6;
  color: var(--trc-on-dark-mut);
  max-width: 52ch;
  margin: 0 0 2.5rem;
}
.trc-hero__scroll {
  position: absolute;
  left: auto;
  right: var(--trc-gutter);
  bottom: 2rem;
  transform: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--trc-font-head);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--trc-on-dark-mut);
}
/* On a short viewport the cue would sit on top of the button row. */
@media (max-height: 860px) {
  .trc-hero__scroll { display: none; }
}

.trc-hero__scroll i {
  display: block;
  width: 1px; height: 44px;
  background: linear-gradient(to bottom, transparent, var(--trc-accent-2));
  animation: trc-drop 2.2s var(--trc-ease) infinite;
}
@keyframes trc-drop {
  0%, 100% { transform: scaleY(0.35); opacity: 0.4; transform-origin: top; }
  50%      { transform: scaleY(1);    opacity: 1;   transform-origin: top; }
}

/* Starfield */
.trc-stars { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.trc-stars i {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.5;
  animation: trc-twinkle 4s ease-in-out infinite;
}
@keyframes trc-twinkle {
  0%, 100% { opacity: 0.15; }
  50%      { opacity: 0.85; }
}

/* =========================================================
   7. Statement band
   ========================================================= */
.trc-statement { text-align: center; }
.trc-statement__q {
  font-family: var(--trc-font-head);
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: -0.02em;
  max-width: 30ch;
  margin: 0 auto 1.5rem;
}
.trc-statement__a {
  display: inline-block;
  font-size: var(--trc-fs-lead);
  color: var(--trc-accent-2);
  font-family: var(--trc-font-head);
  font-weight: 600;
}

.trc-pullquote {
  text-align: center;
  padding-block: clamp(3rem, 7vw, 6rem);
  background: var(--trc-ink-2);
  color: var(--trc-on-dark);
}
.trc-pullquote blockquote {
  border: 0;
  padding: 0;
  margin: 0 auto;
  max-width: 26ch;
  font-size: clamp(1.6rem, 3.6vw, 2.75rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.trc-pullquote__rule {
  width: 46px; height: 2px;
  background: var(--trc-accent-2);
  margin: 0 auto 2rem;
}

/* =========================================================
   8. Split / media rows
   ========================================================= */
.trc-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.trc-split--wide-left { grid-template-columns: 1.15fr 0.85fr; }
.trc-split__media { position: relative; }
.trc-split__media img {
  width: 100%;
  height: auto;
  max-height: 27rem;
  object-fit: cover;
  border-radius: var(--trc-radius-lg);
}
.trc-split__figure {
  background:
    radial-gradient(520px 320px at 24% 22%, rgba(122, 31, 31, 0.5), transparent 60%),
    radial-gradient(420px 300px at 82% 78%, rgba(255, 255, 255, 0.08), transparent 62%),
    linear-gradient(135deg, var(--trc-ink-3), var(--trc-ink));
  border: 1px solid var(--trc-line);
  display: grid;
  place-items: center;
}
.trc-split__figure svg { width: 34%; max-width: 160px; height: auto; color: rgba(255,255,255,0.5); }
.trc-split--reverse .trc-split__media { order: 2; }

/* Checklist */
.trc-checklist { list-style: none; margin: 0; padding: 0; }
.trc-checklist li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.9rem;
  line-height: 1.5;
}
.trc-checklist li::before,
.trc-checklist--arrow li::before,
.trc-service .trc-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 7px;
  height: 7px;
  border: 0;
  border-radius: 50%;
  background: var(--trc-accent);
  transform: none;
}
.trc-section--dark .trc-checklist li::before,
.trc-section--dark-2 .trc-checklist li::before { background: var(--trc-accent-2); }

/* =========================================================
   9. Numbered cards (journey / process)
   ========================================================= */
.trc-steps {
  counter-reset: trcstep;
  position: relative;
  padding-top: 4rem;
  --trc-badge-bg: var(--trc-paper-2);
}
.trc-section--paper .trc-steps { --trc-badge-bg: var(--trc-paper); }
.trc-section--dark .trc-steps { --trc-badge-bg: var(--trc-ink); }
.trc-section--dark-2 .trc-steps { --trc-badge-bg: var(--trc-ink-2); }

/* The path itself: one line through all three markers. */
.trc-steps::before {
  content: "";
  position: absolute;
  top: 1.4rem;
  left: 16.66%;
  right: 16.66%;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--trc-accent) 0 10px,
    transparent 10px 18px
  );
  opacity: 0.55;
}
.trc-section--dark .trc-steps::before,
.trc-section--dark-2 .trc-steps::before {
  background: repeating-linear-gradient(
    90deg,
    var(--trc-accent-2) 0 10px,
    transparent 10px 18px
  );
  opacity: 0.7;
}
.trc-step {
  position: relative;
  margin-top: 0;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--trc-paper-2);
  border: 1px solid var(--trc-line-solid);
  border-radius: var(--trc-radius-lg);
  transition: transform 0.35s var(--trc-ease), box-shadow 0.35s var(--trc-ease),
              border-color 0.35s var(--trc-ease);
  overflow: visible;
}
.trc-step::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  border-radius: var(--trc-radius-lg) var(--trc-radius-lg) 0 0;
  height: 2px;
  background: linear-gradient(90deg, var(--trc-accent), transparent);
  opacity: 0;
  transition: opacity 0.35s var(--trc-ease);
}
.trc-step:hover { transform: translateY(-4px); box-shadow: var(--trc-shadow); border-color: rgba(122, 31, 31, 0.45); }
.trc-step:hover::before { opacity: 1; }
.trc-step__num {
  position: absolute;
  top: -4rem;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: var(--trc-badge-bg);
  border: 2px solid var(--trc-accent);
  font-family: var(--trc-font-head);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--trc-accent);
}
.trc-section--dark .trc-step__num,
.trc-section--dark-2 .trc-step__num {
  border-color: var(--trc-accent-2);
  color: var(--trc-accent-2);
}
.trc-step h3 { font-size: var(--trc-fs-h3); margin-bottom: 0.55em; }
.trc-step p { color: var(--trc-text-muted); margin: 0; }

.trc-section--dark .trc-step,
.trc-section--dark-2 .trc-step {
  background: rgba(255, 255, 255, 0.035);
  border-color: var(--trc-line);
}
.trc-section--dark .trc-step p,
.trc-section--dark-2 .trc-step p { color: var(--trc-on-dark-mut); }

.trc-steps__note {
  margin-top: clamp(2rem, 4vw, 3rem);
  text-align: center;
  font-size: var(--trc-fs-lead);
  color: var(--trc-text-muted);
  max-width: 60ch;
  margin-inline: auto;
}
.trc-section--dark .trc-steps__note,
.trc-section--dark-2 .trc-steps__note { color: var(--trc-on-dark-mut); }
.trc-steps__note em { color: var(--trc-accent-2); font-style: normal; font-weight: 600; }

/* =========================================================
   10. Service blocks
   ========================================================= */
.trc-service {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--trc-paper-2);
  border: 1px solid var(--trc-line-solid);
  border-radius: var(--trc-radius-lg);
  height: 100%;
  transition: transform 0.35s var(--trc-ease), box-shadow 0.35s var(--trc-ease);
}
.trc-service:hover { transform: translateY(-4px); box-shadow: var(--trc-shadow); }
.trc-service__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--trc-radius);
  background: rgba(122, 31, 31, 0.09);
  color: var(--trc-accent);
  margin-bottom: 1.35rem;
}
.trc-service__icon svg { width: 22px; height: 22px; }
.trc-service h3 { font-size: var(--trc-fs-h3); margin-bottom: 0.5em; }
.trc-service__intro { color: var(--trc-text-muted); margin-bottom: 1.35rem; }
.trc-service .trc-checklist li { font-size: 0.9375rem; }

/* Entry points */
.trc-entry {
  padding: clamp(1.6rem, 2.6vw, 2.25rem);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--trc-line);
  border-radius: var(--trc-radius-lg);
  height: 100%;
}
.trc-entry h3 {
  font-size: var(--trc-fs-h4);
  letter-spacing: 0;
  padding-bottom: 0.9rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--trc-line);
}
.trc-entry ol { list-style: none; margin: 0; padding: 0; counter-reset: entry; }
.trc-entry li {
  counter-increment: entry;
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.75rem;
  color: var(--trc-on-dark-mut);
  font-size: 0.9375rem;
}
.trc-entry li::before {
  content: counter(entry, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0;
  font-family: var(--trc-font-head);
  font-size: 0.8125rem;
  font-weight: 700;
  /* On-dark tint, not the base accent: these sit on a near-black card. */
  color: var(--trc-accent-2);
  line-height: 1.7;
}

/* =========================================================
   11. Where we operate
   ========================================================= */
.trc-operate { display: grid; gap: clamp(1.75rem, 3.5vw, 3rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.trc-operate__col h3 {
  font-family: var(--trc-font-head);
  font-size: var(--trc-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--trc-accent);
  padding-bottom: 0.85rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--trc-line-solid);
}
.trc-section--dark .trc-operate__col h3,
.trc-section--dark-2 .trc-operate__col h3 { border-bottom-color: var(--trc-line); }
.trc-taglist { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.trc-taglist li {
  margin: 0;
  padding: 0.45rem 0.85rem;
  font-family: var(--trc-font-head);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid var(--trc-line-solid);
  border-radius: 999px;
}
.trc-section--dark .trc-taglist li,
.trc-section--dark-2 .trc-taglist li { border-color: var(--trc-line); }
.trc-plainlist { list-style: none; margin: 0; padding: 0; }
.trc-plainlist li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--trc-line-solid);
  font-size: 0.9375rem;
  margin: 0;
}
.trc-section--dark .trc-plainlist li,
.trc-section--dark-2 .trc-plainlist li { border-bottom-color: var(--trc-line); }
.trc-plainlist li:last-child { border-bottom: 0; }

/* =========================================================
   12. Audience cards
   ========================================================= */
.trc-audience {
  padding: clamp(1.6rem, 2.6vw, 2.25rem);
  background: var(--trc-paper-2);
  border: 1px solid var(--trc-line-solid);
  border-radius: var(--trc-radius-lg);
  border-top: 2px solid var(--trc-accent);
  height: 100%;
}
.trc-audience h3 { font-size: var(--trc-fs-h4); margin-bottom: 0.6em; }
.trc-audience p { color: var(--trc-text-muted); font-size: 0.9375rem; margin: 0; }

/* =========================================================
   13. Initiatives
   ========================================================= */
.trc-initiative {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 380px;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  border-radius: var(--trc-radius-lg);
  overflow: hidden;
  isolation: isolate;
  color: var(--trc-on-dark);
  background: linear-gradient(135deg, var(--trc-ink-3), var(--trc-ink));
  border: 1px solid var(--trc-line);
}
.trc-initiative__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 0.6s var(--trc-ease);
}
.trc-initiative::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(20, 20, 20, 0.3) 0%, rgba(20, 20, 20, 0.9) 72%);
}
.trc-initiative:hover .trc-initiative__media { transform: scale(1.07); }
.trc-initiative h3 { font-size: var(--trc-fs-h3); margin-bottom: 0.6em; }
.trc-initiative p { color: var(--trc-on-dark-mut); margin-bottom: 1.5rem; }

/* The entire card is the hit area, using the link that is already there so
   there is still exactly one link and one accessible name. */
.trc-initiative .trc-textlink::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
}
.trc-initiative:hover .trc-textlink,
.trc-initiative:focus-within .trc-textlink { color: #fff; }
.trc-initiative:focus-within {
  outline: 2px solid var(--trc-accent-2);
  outline-offset: 3px;
}

/* =========================================================
   14. People
   ========================================================= */
.trc-person {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.trc-person__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--trc-radius-lg);
  overflow: hidden;
  margin-bottom: 1.25rem;
  background: linear-gradient(135deg, var(--trc-ink-3), var(--trc-ink));
  border: 1px solid var(--trc-line);
}
.trc-person__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.trc-person__photo--empty { display: grid; place-items: center; }
.trc-person__initials {
  font-family: var(--trc-font-head);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(238, 241, 246, 0.5);
}
.trc-person h3 { font-size: var(--trc-fs-h4); margin-bottom: 0.25em; }
.trc-person__role {
  font-family: var(--trc-font-head);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--trc-accent);
  margin-bottom: 0.85rem;
}
.trc-person__bio { font-size: 0.9375rem; color: var(--trc-text-muted); margin-bottom: 1rem; }
.trc-section--dark .trc-person__bio,
.trc-section--dark-2 .trc-person__bio { color: var(--trc-on-dark-mut); }
.trc-person__li {
  /* accent, readable on white */
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  font-size: 0.8125rem;
  font-family: var(--trc-font-head);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--trc-accent);
}
.trc-person__li:hover { text-decoration: underline; text-underline-offset: 3px; }
.trc-person__li svg { width: 15px; height: 15px; }

.trc-principal { display: grid; grid-template-columns: 300px 1fr; gap: clamp(1.75rem, 4vw, 3.25rem); align-items: center; }
.trc-principal .trc-person__photo { margin-bottom: 0; }
.trc-principal h3 { font-size: var(--trc-fs-h3); }
.trc-principal .trc-person__bio { font-size: var(--trc-fs-lead); line-height: 1.55; }

.trc-advisors-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin: clamp(3rem, 6vw, 5rem) 0 clamp(1.75rem, 3.5vw, 2.75rem);
}
.trc-advisors-head h3 {
  font-family: var(--trc-font-head);
  font-size: var(--trc-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--trc-accent);
  margin: 0;
  white-space: nowrap;
}
.trc-advisors-head i { flex: 1; height: 1px; background: var(--trc-line); }

/* =========================================================
   14b. Case outcomes, credentials, forms
   ========================================================= */
.trc-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 44rem) { .trc-cases { grid-template-columns: 1fr; } }

.trc-case {
  --trc-case-pad: clamp(1.6rem, 2.6vw, 2.25rem);
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--trc-case-pad);
  background: var(--trc-paper-2);
  border: 1px solid var(--trc-line-solid);
  border-radius: var(--trc-radius-lg);
  border-top: 3px solid var(--trc-accent);
}
.trc-case__discipline {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--trc-accent);
  margin: 0 0 0.85rem;
}
/* The client descriptor now carries the card: a reader recognises
   themselves before they read the number. */
.trc-case__client {
  font-size: var(--trc-fs-h3);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.18;
  color: var(--trc-ink);
  margin: 0 0 0.7rem;
}
.trc-case__result {
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--trc-accent);
  margin: 0 0 0.45rem;
}
.trc-case__metric {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--trc-text);
  margin: 0 0 1.25rem;
}
.trc-case__detail {
  margin: 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--trc-line-solid);
}
.trc-case__detail dt {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--trc-accent);
  margin-bottom: 0.35rem;
}
.trc-case__detail dd {
  margin: 0 0 1.05rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--trc-text);
}
.trc-case__detail dd:last-child { margin-bottom: 0; }

/* ---------- auto-scrolling bar ---------- */
.trc-marquee {
  margin-block: clamp(1.5rem, 3vw, 2.5rem);
  position: relative;
}
.trc-marquee::before,
.trc-marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(1.5rem, 6vw, 5rem);
  z-index: 2;
  pointer-events: none;
}
.trc-marquee::before { left: 0; background: linear-gradient(90deg, var(--trc-paper), transparent); }
.trc-marquee::after { right: 0; background: linear-gradient(270deg, var(--trc-paper), transparent); }

.trc-marquee__viewport { overflow-x: auto; scrollbar-width: none; }
.trc-marquee__viewport::-webkit-scrollbar { display: none; }
.trc-marquee__viewport:focus-visible { outline: 2px solid var(--trc-accent); outline-offset: 4px; }

.trc-marquee__track {
  display: flex;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0.25rem var(--trc-gutter);
  width: max-content;
  animation: trc-scroll 64s linear infinite;
}
.trc-marquee__item { margin: 0; flex: 0 0 clamp(19rem, 27vw, 25rem); display: flex; }
.trc-marquee__item > .trc-case { width: 100%; }

@keyframes trc-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.3333%); }
}

/* Pause for anyone reading, hovering or tabbing through. Applies only to
   the no-JS fallback: once JS takes over, pausing is handled there, because
   a touch device leaves :hover stuck after a tap and would otherwise stop
   the loop for good. */
.trc-marquee:not(.is-live):hover .trc-marquee__track,
.trc-marquee:not(.is-live):focus-within .trc-marquee__track { animation-play-state: paused; }

/* JS drives the loop from scrollLeft, so the transform must stand down or
   the two fight each other the moment anybody swipes. */
.trc-marquee.is-live .trc-marquee__track { animation: none; }

.trc-marquee__viewport {
  scroll-behavior: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

@media (prefers-reduced-motion: reduce) {
  .trc-marquee__track { animation: none; }
}

.trc-cta-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.75rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.trc-cta-inline p { margin: 0; font-size: var(--trc-fs-lead); color: var(--trc-text); }

/* ---------- client logo strip ---------- */
.trc-clients__label {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--trc-text-muted);
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
}
.trc-clients {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.trc-clients__item { margin: 0; }
.trc-clients__item img {
  max-height: 3rem;
  width: auto;
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 0.3s var(--trc-ease), opacity 0.3s var(--trc-ease);
}
.trc-clients__item a:hover img,
.trc-clients__item a:focus-visible img { filter: none; opacity: 1; }
.trc-clients__name {
  font-family: var(--trc-font-head);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--trc-text-muted);
}

/* ---------- mid-page booking band ---------- */
.trc-band { background: var(--trc-ink-2); color: var(--trc-on-dark); }
.trc-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
}
.trc-band h2 { font-size: var(--trc-fs-h3); margin: 0 0 0.4em; color: var(--trc-on-dark); }
.trc-band p { margin: 0; color: var(--trc-on-dark-mut); max-width: 52ch; }

/* ---------- contact section on the front page ---------- */
.trc-contact__intro h2 { font-size: var(--trc-fs-h2); }
.trc-contact__ways {
  list-style: none;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.trc-contact__ways li { margin: 0; }

/* ---------- playbook giveaway ---------- */
.trc-playbook__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
@media (min-width: 58rem) { .trc-playbook__grid { grid-template-columns: 1.05fr 0.95fr; } }

.trc-playbook__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--trc-accent-2);
  margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 1.1rem;
}
.trc-playbook__list { columns: 2; column-gap: 2rem; }
.trc-playbook__list li { break-inside: avoid; color: var(--trc-on-dark-mut); font-size: 0.9375rem; }
@media (max-width: 44rem) { .trc-playbook__list { columns: 1; } }

.trc-playbook__panel {
  background: var(--trc-paper-2);
  color: var(--trc-text);
  border-radius: var(--trc-radius-lg);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: var(--trc-shadow-lg);
}
.trc-playbook__panel h3 { font-size: var(--trc-fs-h4); margin-bottom: 1.25rem; color: var(--trc-ink); }
.trc-playbook__cover {
  width: 100%;
  max-height: 15rem;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--trc-line-solid);
  border-radius: var(--trc-radius);
  margin-bottom: 1.5rem;
}
.trc-form--compact input { margin-bottom: 0.9rem; }
.trc-form--compact .trc-btn { width: 100%; margin-top: 0.35rem; }

/* ---------- events ---------- */
.trc-events {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 62rem) { .trc-events { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .trc-events { grid-template-columns: 1fr; } }

.trc-event {
  margin: 0;
  background: var(--trc-paper-2);
  border: 1px solid var(--trc-line-solid);
  border-radius: var(--trc-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.trc-event__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--trc-paper); }
.trc-event__media img { width: 100%; height: 100%; object-fit: cover; }
.trc-event__body { padding: clamp(1.15rem, 2vw, 1.6rem); }
.trc-event__body h3 { font-size: var(--trc-fs-h4); margin-bottom: 0.4em; }
.trc-event__meta {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--trc-accent);
  margin: 0 0 0.7rem;
}
.trc-event__text { font-size: 0.9375rem; color: var(--trc-text-muted); margin: 0; }

/* Credentials strip/* ---------- playbook giveaway ---------- */
.trc-playbook__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
@media (min-width: 58rem) { .trc-playbook__grid { grid-template-columns: 1.05fr 0.95fr; } }

.trc-playbook__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--trc-accent-2);
  margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 1.1rem;
}
.trc-playbook__list { columns: 2; column-gap: 2rem; }
.trc-playbook__list li { break-inside: avoid; color: var(--trc-on-dark-mut); font-size: 0.9375rem; }
@media (max-width: 44rem) { .trc-playbook__list { columns: 1; } }

.trc-playbook__panel {
  background: var(--trc-paper-2);
  color: var(--trc-text);
  border-radius: var(--trc-radius-lg);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: var(--trc-shadow-lg);
}
.trc-playbook__panel h3 { font-size: var(--trc-fs-h4); margin-bottom: 1.25rem; color: var(--trc-ink); }
.trc-playbook__cover {
  width: 100%;
  max-height: 15rem;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--trc-line-solid);
  border-radius: var(--trc-radius);
  margin-bottom: 1.5rem;
}
.trc-form--compact input { margin-bottom: 0.9rem; }
.trc-form--compact .trc-btn { width: 100%; margin-top: 0.35rem; }

/* ---------- events ---------- */
.trc-events {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 62rem) { .trc-events { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .trc-events { grid-template-columns: 1fr; } }

.trc-event {
  margin: 0;
  background: var(--trc-paper-2);
  border: 1px solid var(--trc-line-solid);
  border-radius: var(--trc-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.trc-event__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--trc-paper); }
.trc-event__media img { width: 100%; height: 100%; object-fit: cover; }
.trc-event__body { padding: clamp(1.15rem, 2vw, 1.6rem); }
.trc-event__body h3 { font-size: var(--trc-fs-h4); margin-bottom: 0.4em; }
.trc-event__meta {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--trc-accent);
  margin: 0 0 0.7rem;
}
.trc-event__text { font-size: 0.9375rem; color: var(--trc-text-muted); margin: 0; }

/* Credentials strip — footer and contact sidebar */
.trc-creds { padding-block: clamp(1.5rem, 3vw, 2.25rem); border-top: 1px solid var(--trc-line); }
.trc-creds__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem 1.75rem;
  margin: 0;
}
.trc-creds__item dt {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--trc-accent-2);
  margin-bottom: 0.25rem;
}
.trc-creds__item dd { margin: 0; font-size: 0.9rem; color: var(--trc-on-dark-mut); }
.trc-contact__aside .trc-creds { border-top-color: var(--trc-line-solid); margin-top: 1.5rem; }
.trc-contact__aside .trc-creds__item dt { color: var(--trc-accent); }
.trc-contact__aside .trc-creds__item dd { color: var(--trc-text-muted); }

/* Contact layout + form */
.trc-contact { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 60rem) { .trc-contact { grid-template-columns: 1.5fr 1fr; } }
.trc-contact__form {
  background: var(--trc-paper-2);
  border: 1px solid var(--trc-line-solid);
  border-radius: var(--trc-radius-lg);
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
}
.trc-contact__aside h2 { font-size: var(--trc-fs-h4); margin-bottom: 1rem; }
.trc-contact__aside p { margin-bottom: 0.75rem; }

.trc-form__row { display: grid; gap: 0 1.25rem; }
@media (min-width: 34rem) { .trc-form__row { grid-template-columns: 1fr 1fr; } }
.trc-form label { display: block; font-size: var(--trc-fs-small); font-weight: 600; margin-bottom: 0.35rem; color: var(--trc-text); }
.trc-form input[type="text"],
.trc-form input[type="email"],
.trc-form select,
.trc-form textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  margin-bottom: 1.15rem;
  background: var(--trc-paper-2);
  border: 1px solid var(--trc-line-solid);
  border-radius: var(--trc-radius);
  font: inherit;
  color: inherit;
}
.trc-form textarea { resize: vertical; min-height: 8rem; }
.trc-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.trc-form__fine { margin-top: 1rem; font-size: 0.8125rem; color: var(--trc-text-muted); }
.trc-form__fine a { color: var(--trc-accent); border-bottom: 1px solid currentColor; }

.trc-formnote {
  padding: 1rem 1.15rem;
  margin-bottom: 1.5rem;
  border-radius: var(--trc-radius);
  border-left: 3px solid var(--trc-accent);
  background: rgba(122, 31, 31, 0.06);
  font-size: 0.9375rem;
}
.trc-formnote--ok { border-left-color: #2f6f4f; background: rgba(47, 111, 79, 0.08); }
.trc-formnote--warn { border-left-color: #b26a00; background: rgba(178, 106, 0, 0.09); }
.trc-formnote--warn a { color: inherit; }
.trc-formnote p { margin: 0; }

.trc-footer__privacy { font-size: var(--trc-fs-small); }

/* =========================================================
   15. Final CTA
   ========================================================= */
.trc-cta { position: relative; text-align: center; overflow: hidden; isolation: isolate; }
.trc-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(760px 420px at 50% 0%, rgba(122, 31, 31, 0.38), transparent 64%),
    radial-gradient(620px 380px at 50% 100%, rgba(255, 255, 255, 0.05), transparent 60%);
}
.trc-cta h2 { font-size: var(--trc-fs-h1); margin-bottom: 0.5em; }
.trc-cta__sub {
  font-family: var(--trc-font-head);
  font-size: var(--trc-fs-lead);
  color: var(--trc-accent);
  margin-bottom: 1.1rem;
}
.trc-cta__text {
  font-size: var(--trc-fs-lead);
  color: var(--trc-on-dark-mut);
  max-width: 46ch;
  margin: 0 auto 2.5rem;
}
.trc-cta .trc-btn-row { justify-content: center; }
.trc-cta__alt { margin-top: 1.75rem; font-size: var(--trc-fs-small); color: var(--trc-on-dark-mut); }
.trc-cta__alt a { color: var(--trc-accent-2); border-bottom: 1px solid rgba(222, 213, 209, 0.45); }
.trc-cta__alt a:hover { border-bottom-color: currentColor; }

/* =========================================================
   16. Footer
   ========================================================= */
.trc-footer { background: var(--trc-ink); color: var(--trc-on-dark); border-top: 1px solid var(--trc-line); }
.trc-footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.trc-footer__about p { color: var(--trc-on-dark-mut); font-size: 0.9375rem; max-width: 40ch; margin-top: 1.25rem; }
.trc-footer h2, .trc-footer h3 {
  font-family: var(--trc-font-head);
  font-size: var(--trc-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--trc-accent);
  margin-bottom: 1.25rem;
}
.trc-footer ul { list-style: none; margin: 0; padding: 0; }
.trc-footer li { margin-bottom: 0.6rem; }
.trc-footer a { color: var(--trc-on-dark-mut); font-size: 0.9375rem; }
.trc-footer a:hover { color: var(--trc-on-dark); }

.trc-social { display: flex; gap: 0.6rem; margin-top: 1.5rem; }
.trc-social a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--trc-line);
  border-radius: var(--trc-radius);
  color: var(--trc-on-dark-mut);
  transition: color 0.25s var(--trc-ease), border-color 0.25s var(--trc-ease), background-color 0.25s var(--trc-ease);
}
.trc-social a:hover { color: #fff; background: var(--trc-accent); border-color: var(--trc-accent); }
.trc-social svg { width: 17px; height: 17px; }

.trc-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.65rem;
  border-top: 1px solid var(--trc-line);
  font-size: var(--trc-fs-small);
  color: var(--trc-on-dark-mut);
}
.trc-footer__bottom p { margin: 0; }
.trc-tothetop {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--trc-font-head);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--trc-on-dark-mut);
}
.trc-tothetop:hover { color: var(--trc-accent); }
.trc-tothetop svg { width: 14px; height: 14px; }

/* =========================================================
   17. Inner pages, posts, comments
   ========================================================= */
.trc-pagehero {
  /*
   * background-color, not the background shorthand. The shorthand reset
   * size, repeat and position to their initial values, and the photograph
   * arrives as an inline background-image with nothing to size it — so
   * every page hero tiled the picture at its natural size instead of
   * filling the band.
   */
  background-color: var(--trc-ink);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--trc-on-dark);
  padding-block: clamp(8rem, 16vh, 11rem) clamp(3rem, 6vw, 4.5rem);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.trc-pagehero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Bottom-weighted so the headline block always sits on near-black no
     matter how busy or bright the photograph behind it is. */
  background:
    linear-gradient(180deg, rgba(18, 18, 18, 0.5) 0%, rgba(18, 18, 18, 0.78) 55%, rgba(18, 18, 18, 0.94) 100%);
}
.trc-pagehero h1 { font-size: var(--trc-fs-h1); margin-bottom: 0.4em; max-width: 34ch; }
.trc-pagehero p { color: var(--trc-on-dark-mut); font-size: var(--trc-fs-lead); max-width: 58ch; margin: 0; }

.trc-breadcrumb {
  font-size: var(--trc-fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--trc-on-dark-mut);
  margin-bottom: 1.1rem;
}
/* Bone, not oxblood: this sits on a photograph over near-black. */
.trc-pagehero .trc-breadcrumb a { color: var(--trc-accent-2); }
.trc-pagehero .trc-breadcrumb a:hover { color: #fff; }
.trc-breadcrumb a { color: var(--trc-accent); }

.trc-content { padding-block: clamp(2.75rem, 5.5vw, 4.5rem); }
/* Inner-page body copy. Slightly larger than the front page's, because here
   it is the whole point rather than a caption to a photograph. */
.trc-prose {
  max-width: 68ch;
  font-size: 1.0625rem;
  line-height: 1.7;
}
.trc-prose > * + * { margin-top: 1.1em; }
/* Never stack a heading's top margin on top of the section padding. */
.trc-prose > :first-child { margin-top: 0; }
/* The page title is the h1. Section headings inside the copy step down from
   it rather than competing with it, which is what the h2 display size did. */
.trc-prose h2 { font-size: var(--trc-fs-h3); margin-top: 1.9em; margin-bottom: 0.15em; }
.trc-prose h3 { font-size: var(--trc-fs-h4); margin-top: 1.6em; margin-bottom: 0.15em; }
.trc-prose img, .trc-prose figure { border-radius: var(--trc-radius-lg); }
.trc-prose figcaption { font-size: var(--trc-fs-small); color: var(--trc-text-muted); margin-top: 0.6rem; }
.trc-prose a:not(.trc-btn) {
  color: var(--trc-text);
  border-bottom: 1px solid var(--trc-accent);
}
.trc-prose a:not(.trc-btn):hover { color: var(--trc-accent); }

.alignleft  { float: left;  margin: 0.4rem 1.75rem 1.25rem 0; }
.alignright { float: right; margin: 0.4rem 0 1.25rem 1.75rem; }
.aligncenter{ margin-inline: auto; }
.alignwide  { width: min(100vw - 2 * var(--trc-gutter), 1100px); margin-inline: auto; }
.alignfull  { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }
.wp-caption-text, .gallery-caption { font-size: var(--trc-fs-small); color: var(--trc-text-muted); }
.sticky .trc-card__title::after { content: " ★"; color: var(--trc-accent); }

.trc-postgrid { display: grid; gap: clamp(1.75rem, 3.5vw, 2.75rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.trc-card {
  display: flex;
  flex-direction: column;
  background: var(--trc-paper-2);
  border: 1px solid var(--trc-line-solid);
  border-radius: var(--trc-radius-lg);
  overflow: hidden;
  transition: transform 0.35s var(--trc-ease), box-shadow 0.35s var(--trc-ease);
}
.trc-card:hover { transform: translateY(-4px); box-shadow: var(--trc-shadow); }
.trc-card__thumb { aspect-ratio: 16 / 10; overflow: hidden; background: var(--trc-ink-3); }
.trc-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.trc-card__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.trc-card__meta {
  font-family: var(--trc-font-head);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--trc-text-muted);
  margin-bottom: 0.75rem;
}
.trc-card__title { font-size: var(--trc-fs-h4); margin-bottom: 0.6em; }
.trc-card__excerpt { font-size: 0.9375rem; color: var(--trc-text-muted); margin-bottom: 1.25rem; }
.trc-card .trc-textlink { margin-top: auto; }

.trc-pagination { margin-top: clamp(2.5rem, 5vw, 4rem); }
.trc-pagination .page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 42px; height: 42px;
  padding: 0 0.6rem;
  margin-right: 0.4rem;
  border: 1px solid var(--trc-line-solid);
  border-radius: var(--trc-radius);
  font-family: var(--trc-font-head);
  font-size: 0.875rem;
  font-weight: 600;
}
.trc-pagination .page-numbers.current,
.trc-pagination .page-numbers:hover { background: var(--trc-accent); border-color: var(--trc-accent); color: #fff; }

.trc-postnav { display: flex; justify-content: space-between; gap: 1.5rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--trc-line-solid); }
.trc-postnav a { font-family: var(--trc-font-head); font-weight: 600; font-size: 0.9375rem; }
.trc-postnav a:hover { color: var(--trc-accent); }

.trc-comments { margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--trc-line-solid); max-width: 72ch; }
.trc-comments h2 { font-size: var(--trc-fs-h3); }
.comment-list { list-style: none; margin: 0 0 2.5rem; padding: 0; }
.comment-list ol.children { list-style: none; margin: 1.5rem 0 0; padding-left: clamp(1rem, 3vw, 2.5rem); }
.comment-body { padding: 1.35rem 0; border-bottom: 1px solid var(--trc-line-solid); }
.comment-author { display: flex; align-items: center; gap: 0.75rem; font-family: var(--trc-font-head); font-weight: 600; }
.comment-author img { border-radius: 50%; }
.comment-metadata { font-size: var(--trc-fs-small); color: var(--trc-text-muted); margin-bottom: 0.75rem; }
.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"],
.comment-respond textarea,
.trc-prose input[type="text"],
.trc-prose input[type="email"],
.trc-prose input[type="tel"],
.trc-prose textarea,
.trc-prose select,
.search-form input[type="search"] {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--trc-paper-2);
  border: 1px solid var(--trc-line-solid);
  border-radius: var(--trc-radius);
  font: inherit;
  color: inherit;
  margin-bottom: 1rem;
}
.comment-respond label, .trc-prose label { display: block; font-size: var(--trc-fs-small); font-weight: 600; margin-bottom: 0.35rem; }
input[type="submit"], button[type="submit"], .wp-block-search__button {
  padding: 1.2rem 2rem;
  background: var(--trc-accent);
  color: #fff;
  border: 1px solid var(--trc-accent);
  border-radius: var(--trc-radius-pill);
  font-family: var(--trc-font-body);
  font-size: 1rem;
  font-weight: 400;
  cursor: pointer;
}

.trc-404 { text-align: center; padding-block: clamp(6rem, 14vh, 10rem); }
.trc-404__code {
  font-family: var(--trc-font-head);
  font-size: clamp(4rem, 14vw, 9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--trc-accent);
  margin-bottom: 1rem;
}

/* =========================================================
   18. Reveal on scroll
   ========================================================= */
.trc-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--trc-ease), transform 0.7s var(--trc-ease); }
.trc-reveal.is-in { opacity: 1; transform: none; }
.trc-reveal[data-delay="1"] { transition-delay: 0.08s; }
.trc-reveal[data-delay="2"] { transition-delay: 0.16s; }
.trc-reveal[data-delay="3"] { transition-delay: 0.24s; }
.no-js .trc-reveal, .trc-no-motion .trc-reveal { opacity: 1; transform: none; }

/* =========================================================
   19. Responsive
   ========================================================= */
@media (max-width: 1080px) {
  .trc-footer__top { grid-template-columns: 1fr 1fr; }
  .trc-footer__about { grid-column: 1 / -1; }
}

@media (max-width: 1240px) {
  .trc-header__cta { display: none; }
  .trc-navtoggle { display: inline-flex; }
  .trc-nav__cta { display: block; }

  .trc-nav {
    position: fixed;
    inset: 0;
    display: block;
    padding: 6.5rem var(--trc-gutter) 2.5rem;
    background: var(--trc-ink);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.3s var(--trc-ease), transform 0.35s var(--trc-ease), visibility 0.35s;
  }
  .trc-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .trc-nav ul { display: block; }
  .trc-nav li { border-bottom: 1px solid var(--trc-line); }
  .trc-nav a { display: block; padding: 1.05rem 0; font-size: 1.125rem; font-family: var(--trc-font-head); }
  .trc-nav a::after { display: none; }
  .trc-nav .sub-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0 0 0.75rem 1rem;
    min-width: 0;
  }
  .trc-nav .sub-menu a { padding: 0.6rem 0; font-size: 1rem; }
  .trc-nav__cta { margin-top: 2rem; }
  .trc-nav__cta .trc-btn { width: 100%; }

  .trc-grid--3, .trc-grid--4, .trc-operate, .trc-postgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trc-steps::before { left: 25%; right: 25%; }
  .trc-split, .trc-split--wide-left { grid-template-columns: 1fr; }
  /* Stacked, a section photograph should stay a band, not a full screen. */
  .trc-split__media img { max-height: 22rem; width: 100%; object-fit: cover; }
  .trc-split--reverse .trc-split__media { order: 0; }
  .trc-principal { grid-template-columns: 1fr; }
  .trc-principal .trc-person__photo { max-width: 260px; }
}

@media (max-width: 640px) {
  .trc-grid--2, .trc-grid--3, .trc-grid--4, .trc-operate, .trc-postgrid { grid-template-columns: 1fr; }

  /* Single column: the connector would run nowhere, so the markers sit
     inline at the top of each card instead. */
  .trc-steps { padding-top: 0; }
  .trc-steps::before { display: none; }
  .trc-step__num { position: static; transform: none; margin-bottom: 1.1rem; }

  .trc-band__inner { flex-direction: column; align-items: flex-start; }
  .trc-cta-inline { flex-direction: column; text-align: center; }
  .trc-hero { min-height: auto; }
  .trc-hero__scroll { display: none; }
  .trc-footer__top { grid-template-columns: 1fr; }
  .trc-brand__tagline { display: none; }
  .trc-btn { width: 100%; }
  .trc-btn-row { flex-direction: column; align-items: stretch; }
}

/* =========================================================
   20. Motion & print
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .trc-reveal { opacity: 1; transform: none; }
}

@media print {
  .trc-header, .trc-footer, .trc-hero__scroll, .trc-navtoggle, .trc-cta { display: none !important; }
  body { background: #fff; color: #000; }
  .trc-section { padding-block: 1.5rem; }
}

/* =========================================================
   20. On-dark accent, authoritative
   -----------------------------------------------------------
   Red does not work as text, rules or outlines on the near-black
   bands, so every accent of that kind on a dark surface takes the
   bone neutral in --trc-accent-2 instead.

   This block sits at the END of the file on purpose. The same fix
   further up kept losing to component rules declared after it,
   which is how the footer labels and the entry counters stayed
   oxblood on black through two rounds of "fixed". Anything added
   here cannot be beaten by source order.

   Filled buttons are deliberately absent: solid oxblood with white
   type on it reads correctly and stays the brand's call to action.
   ========================================================= */

/* Section labels and eyebrow brackets */
.trc-footer h2,
.trc-footer h3,
.trc-playbook__label,
.trc-section--dark .trc-creds__item dt,
.trc-section--dark-2 .trc-creds__item dt,
.trc-footer .trc-creds__item dt,
/* Emphasis and inline links */
.trc-cta__sub,
.trc-statement__a,
.trc-steps__note em,
.trc-cta__alt a,
.trc-section--dark .trc-textlink,
.trc-section--dark-2 .trc-textlink,
.trc-band .trc-textlink,
.trc-initiative .trc-textlink,
.trc-pagehero .trc-breadcrumb a,
/* Counters and numbering */
.trc-entry li::before,
.trc-section--dark .trc-step__num,
.trc-section--dark-2 .trc-step__num,
/* Hover states that reached for red on black */
.trc-tothetop:hover,
.trc-footer a:hover {
  color: var(--trc-accent-2);
}

/* Outlines, rules and bullets */
.trc-section--dark .trc-step__num,
.trc-section--dark-2 .trc-step__num { border-color: var(--trc-accent-2); }

.trc-pullquote__rule,
.trc-section--dark .trc-checklist li::before,
.trc-section--dark-2 .trc-checklist li::before,
.trc-band .trc-checklist li::before,
.trc-footer .trc-checklist li::before { background: var(--trc-accent-2); }

.trc-section--dark .trc-steps::before,
.trc-section--dark-2 .trc-steps::before {
  background: repeating-linear-gradient(
    90deg,
    var(--trc-accent-2) 0 10px,
    transparent 10px 18px
  );
  opacity: 0.55;
}

/* The entry counters are leading numbers, never a filled block. */
.trc-entry li::before {
  background: none !important;
  border: 0;
  border-radius: 0;
  width: auto;
  height: auto;
}

/* =========================================================
   21. Brackets, always red
   -----------------------------------------------------------
   The [ ] around an eyebrow are the brand's one red mark and
   they stay red on every ground, light or dark. Section 20
   swept them into the bone neutral along with everything else
   on the dark bands, which was too broad a brush.

   Light grounds get the primary oxblood. Dark grounds get the
   lifted red from --trc-accent-3, because #7a1f1f simply does
   not register against near-black. Both are Customizer colours.
   ========================================================= */
.trc-eyebrow::before,
.trc-eyebrow::after { color: var(--trc-accent); }

.trc-section--dark .trc-eyebrow::before,
.trc-section--dark .trc-eyebrow::after,
.trc-section--dark-2 .trc-eyebrow::before,
.trc-section--dark-2 .trc-eyebrow::after,
.trc-pagehero .trc-eyebrow::before,
.trc-pagehero .trc-eyebrow::after,
.trc-band .trc-eyebrow::before,
.trc-band .trc-eyebrow::after,
.trc-footer .trc-eyebrow::before,
.trc-footer .trc-eyebrow::after,
.trc-hero .trc-eyebrow::before,
.trc-hero .trc-eyebrow::after,
.trc-pullquote .trc-eyebrow::before,
.trc-pullquote .trc-eyebrow::after { color: var(--trc-accent-3); }

/* =========================================================
   22. Quote band with a photograph
   -----------------------------------------------------------
   Optional. With no image set the band stays a flat dark panel
   exactly as before; set one and it becomes a full-bleed photo
   with a scrim heavy enough that the quote never fights it.
   ========================================================= */
.trc-pullquote--media {
  position: relative;
  isolation: isolate;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-block: clamp(4.5rem, 11vw, 9rem);
}
.trc-pullquote--media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Weighted to the middle, where the quote sits, so the type stays clean
     without flattening the photograph into a grey panel. */
  background: linear-gradient(
    180deg,
    rgba(18, 18, 18, 0.34) 0%,
    rgba(18, 18, 18, 0.62) 46%,
    rgba(18, 18, 18, 0.70) 100%
  );
}
.trc-pullquote--media blockquote { text-shadow: 0 1px 24px rgba(0, 0, 0, 0.6); }

/* =========================================================
   23. Rocky's review, 16 Sep 2026
   ========================================================= */

/* ---------- Header: the CTA could ride over the last nav item ----------
   Three fixed-width things share one row: brand, nav, button. The list could
   not shrink (nowrap list, nowrap links) and the brand could not shrink at
   all, so past a certain width the nav simply overflowed and painted over the
   button. Letting the nav own the slack is necessary but not sufficient, the
   list still has a hard floor, so the brand is capped and the decorative
   parts stand down before anything can collide. */
.trc-header__inner { flex-wrap: nowrap; }

.trc-nav {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
}
.trc-nav ul { min-width: 0; }
.trc-header__cta { flex: 0 0 auto; margin-left: auto; }

/* A generous logo must not be allowed to push the nav off the row. */
.trc-brand { max-width: min(30vw, 260px); }
.trc-brand img, .trc-brand__logo { max-height: 44px; }

@media (max-width: 1600px) {
  .trc-nav { gap: 1.1rem; }
  .trc-nav ul { gap: clamp(0.55rem, 0.95vw, 1rem); }
}

/* The tagline is decoration. It goes before the navigation does. */
@media (max-width: 1480px) {
  .trc-brand__tagline { display: none; }
  .trc-brand { max-width: min(26vw, 220px); }
}

/* Last resort before the drawer: a shorter button label. */
@media (max-width: 1340px) {
  .trc-header__cta .trc-btn { padding-inline: 1.35rem; font-size: 0.875rem; }
  .trc-nav ul { gap: 0.5rem; }
  .trc-nav a { font-size: 0.8125rem; }
}

/* ---------- Journey: a clear split before the closing line ---------- */
.trc-steps__punch {
  display: block;
  margin-top: 1.5rem;
  font-style: normal;
  font-weight: 600;
}

/* ---------- Booking band: a callout, not another dark section ----------
   It sat on --trc-ink-2, the same ground as the section above it, so the two
   read as one blurred block. Oxblood makes it unmistakably an interruption. */
.trc-band {
  background: var(--trc-accent);
  color: var(--trc-on-dark);
}
.trc-band h2,
.trc-band p { color: var(--trc-on-dark); }
.trc-band p { opacity: 0.88; }
/* Brackets would vanish into their own colour here, so they go white. */
.trc-band .trc-eyebrow::before,
.trc-band .trc-eyebrow::after { color: var(--trc-on-dark); }
/* A solid oxblood button on oxblood is invisible: invert it. */
.trc-band .trc-btn {
  --btn-bg: var(--trc-on-dark);
  --btn-fg: var(--trc-accent);
  --btn-bd: var(--trc-on-dark);
}
.trc-band .trc-btn:hover {
  --btn-bg: transparent;
  --btn-fg: var(--trc-on-dark);
  --btn-bd: var(--trc-on-dark);
}
.trc-band .trc-btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--trc-on-dark);
  --btn-bd: rgba(255, 255, 255, 0.5);
}
.trc-band .trc-btn--ghost:hover {
  --btn-bg: var(--trc-on-dark);
  --btn-fg: var(--trc-accent);
  --btn-bd: var(--trc-on-dark);
}

/* Return path off an initiative page, at the foot as well as the head. */
.trc-content--tight { padding-block: 0 clamp(2rem, 4vw, 3rem); }
.trc-content--tight .trc-textlink svg { transform: rotate(180deg); }

/* ---------- Case studies: a picture per card ----------
   A column of prose cards reads as a wall. Where a case study has a
   photograph it sits at the top, full bleed to the card edges. */
.trc-case--media { padding-top: 0; overflow: hidden; }
.trc-case__media {
  /* max-width:100% is set on every img globally, which silently capped this
     at the card's content width while the negative margin still pulled it
     left, leaving the picture flush on one side and short on the other.
     Both edges now come from the same token, so it cannot drift. */
  max-width: none;
  width: calc(100% + 2 * var(--trc-case-pad));
  margin-inline: calc(-1 * var(--trc-case-pad));
  margin-block: 0 clamp(1.3rem, 2vw, 1.6rem);
  height: clamp(9rem, 14vw, 12rem);
  object-fit: cover;
  object-position: center;
}

/* ---------- Compact playbook prompt, high on the page ----------
   A thin oxblood-edged strip, not another full band: it names the giveaway
   early and sends the reader to the form rather than competing with it. */
.trc-pbbar {
  background: var(--trc-ink-2);
  color: var(--trc-on-dark);
  border-block: 1px solid var(--trc-line);
}
.trc-pbbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-block: clamp(1.1rem, 2.2vw, 1.6rem);
}
.trc-pbbar__text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.9rem;
  margin: 0;
  min-width: 0;
}
.trc-pbbar__tag {
  flex: 0 0 auto;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--trc-accent-3);
}
.trc-pbbar__title {
  font-family: var(--trc-font-head);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.trc-pbbar .trc-btn--ghost {
  --btn-fg: var(--trc-on-dark);
  --btn-bd: rgba(255, 255, 255, 0.34);
  flex: 0 0 auto;
}
.trc-pbbar .trc-btn--ghost:hover {
  --btn-bg: var(--trc-on-dark);
  --btn-fg: var(--trc-ink);
  --btn-bd: var(--trc-on-dark);
}

/* =========================================================
   24. Narrow screens: the step path runs top to bottom
   -----------------------------------------------------------
   The horizontal dashed path and the badges hanging above each
   card only make sense at exactly three across. Between 640 and
   1180px the grid went two-up while the path and badges stayed
   put, which parked marker 03 in the middle of card 01.

   Below three across the whole thing becomes a vertical
   timeline instead: one card per row, markers threaded down a
   line on the left. Same metaphor, read top to bottom.
   ========================================================= */
@media (max-width: 1240px) {
  .trc-grid--3.trc-steps { grid-template-columns: 1fr; }

  .trc-steps {
    padding-top: 0;
    padding-left: 3.6rem;
    gap: 1.5rem;
  }

  .trc-steps::before {
    top: 1.4rem;
    bottom: 1.4rem;
    left: 1.4rem;
    right: auto;
    width: 2px;
    height: auto;
    background: repeating-linear-gradient(
      180deg,
      var(--trc-accent) 0 10px,
      transparent 10px 18px
    );
  }
  .trc-section--dark .trc-steps::before,
  .trc-section--dark-2 .trc-steps::before {
    background: repeating-linear-gradient(
      180deg,
      var(--trc-accent-2) 0 10px,
      transparent 10px 18px
    );
  }

  .trc-step__num {
    position: absolute;
    top: 1.4rem;
    left: -3.6rem;
    transform: none;
    margin-bottom: 0;
  }

  /* Lifting on hover would drag the card off its own marker. */
  .trc-step:hover { transform: none; }
}

@media (max-width: 520px) {
  .trc-steps { padding-left: 3rem; }
  .trc-step__num {
    left: -3rem;
    width: 2.4rem;
    height: 2.4rem;
    font-size: 0.75rem;
  }
  .trc-steps::before { left: 1.2rem; }
}

/* =========================================================
   25. Quote band: keep Earth in the frame
   -----------------------------------------------------------
   The photograph is square and the band is a wide strip, so a
   centred crop showed the middle of the image, which is empty
   black sky with a small astronaut. Earth sits in the bottom
   third. Anchoring low and giving the band real height brings
   the horizon back, which is the part worth showing.
   ========================================================= */
.trc-pullquote--media {
  /* The astronaut sits around a third of the way down the square and the
     horizon around two thirds, so the frame has to be deep enough to hold
     both, and positioned between them rather than at either end. */
  background-position: center 53%;
  min-height: clamp(19rem, 46vw, 44rem);
  display: grid;
  align-items: center;
}

/* =========================================================
   26. Section separation
   -----------------------------------------------------------
   Every section must sit on a different ground from the one
   above it, so the page reads as distinct blocks rather than
   one continuous slab. Two things were breaking that:

   1. The opening statement and the playbook strip immediately
      below it both used --trc-ink-2, so they merged.
   2. The two light tones were four percent apart, which is not
      a visible step. --trc-paper is now a real tone away from
      white (see the Customizer default).

   A hairline is added between any two light sections as well,
   so even a client who sets the two light tones close together
   still gets a boundary.
   ========================================================= */

/* The strip sits between a --ink-2 statement and a white Mission,
   so it takes the deeper ink and separates from both. */
.trc-pbbar {
  background: var(--trc-ink);
  border-block: 0;
}

/* Belt and braces: a boundary between adjacent light sections even
   if the two light tones are set close together. */
.trc-section--paper + .trc-section--paper,
.trc-section--white + .trc-section--white,
.trc-section--paper + .trc-section--white,
.trc-section--white + .trc-section--paper {
  border-top: 1px solid var(--trc-line-solid);
}

/* =========================================================
   27. The Third Rock group strip
   -----------------------------------------------------------
   A router, not a sales section. It sits between the hero and
   the statement, so the page still opens on the consulting
   pitch, but a visitor who came for a different company can
   leave for the right one in a single click.
   ========================================================= */
.trc-divisions {
  /* Must differ from BOTH neighbours: the hero above is --ink and the
     statement below is --ink-2, so this takes the third dark step. */
  background: var(--trc-ink-3);
  color: var(--trc-on-dark);
  border-block: 1px solid var(--trc-line);
}
.trc-divisions__lead {
  font-family: var(--trc-font-head);
  font-size: var(--trc-fs-lead);
  font-weight: 500;
  color: var(--trc-on-dark);
  max-width: 54ch;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
}
.trc-divisions__grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.trc-division {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--trc-line);
  border-radius: var(--trc-radius-lg);
  color: var(--trc-on-dark);
  transition: transform 0.3s var(--trc-ease), border-color 0.3s var(--trc-ease),
              background-color 0.3s var(--trc-ease);
}
.trc-division:hover,
.trc-division:focus-visible {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--trc-accent-3);
}

/* The question the visitor is actually asking leads the card. */
.trc-division__prompt {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--trc-accent-3);
}
.trc-division__name {
  font-family: var(--trc-font-head);
  font-size: var(--trc-fs-h4);
  font-weight: 600;
  letter-spacing: -0.01em;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
}
.trc-division__note {
  font-style: normal;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--trc-on-dark-mut);
  border: 1px solid var(--trc-line);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
}
.trc-division__text {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--trc-on-dark-mut);
}
.trc-division__go {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--trc-accent-2);
}
.trc-division:hover .trc-division__go { color: #fff; }
.trc-division__go svg { width: 15px; height: 15px; }

/* =========================================================
   28. LinkedIn, folded into Insights
   -----------------------------------------------------------
   There is no separate LinkedIn section: it read the same posts
   as Insights, so the two showed the same thing twice. A post
   that also ran on LinkedIn carries a link on its card, and the
   embed lives on the post itself, where it is the conversation
   under the piece rather than a tile in a grid.
   ========================================================= */
.trc-card__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.15rem;
  margin: 0;
}
.trc-card__li {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--trc-text-muted);
  border-bottom: 1px solid currentColor;
}
.trc-card__li:hover { color: var(--trc-accent); }

.trc-insights__more {
  justify-content: center;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

/* The original, under the piece on a single post. */
.trc-origin {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--trc-line-solid);
}
.trc-origin__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--trc-text-muted);
  margin: 0 0 1rem;
}
.trc-origin__embed {
  margin: 0 0 1.1rem;
  border-radius: var(--trc-radius);
  overflow: hidden;
  background: var(--trc-line-solid);
  max-width: 34rem;
}
.trc-origin__embed iframe { display: block; width: 100%; border: 0; }

/* =========================================================
   29. Division pages
   -----------------------------------------------------------
   Built from the components the front page already uses. The
   one new piece is the facts strip, which is deliberately flat:
   a rule, a label, a value. No cards, no tinted panels, no
   second design language.
   ========================================================= */
.trc-facts {
  background: var(--trc-ink-2);
  color: var(--trc-on-dark);
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
}
.trc-facts__grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin: 0;
}
.trc-fact {
  border-top: 2px solid var(--trc-accent-3);
  padding-top: 0.9rem;
}
.trc-fact dt {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--trc-on-dark-mut);
  margin: 0 0 0.35rem;
}
.trc-fact dd {
  margin: 0;
  font-family: var(--trc-font-head);
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--trc-on-dark);
}

/* The first paragraph of a division page carries the argument, so it is
   sized as a lead rather than as body copy. */
.trc-prose--lead > p:first-of-type,
.trc-prose--lead > h2:first-child + p {
  font-size: clamp(1.15rem, 1.8vw, 1.375rem);
  line-height: 1.55;
  color: var(--trc-ink);
}
.trc-prose--lead h2 {
  padding-top: 1.9rem;
  border-top: 1px solid var(--trc-line-solid);
}
.trc-prose--lead > :first-child { padding-top: 0; border-top: 0; }

/* Evidence on a division page: same card, no scrolling bar. */
.trc-section .trc-cases { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

/* ---------- Steps as a vertical timeline at any count ----------
   The horizontal dashed path is drawn for exactly three across; a
   division page can have four or five stages, at which point the
   markers would sit above a row that is not there. This modifier
   forces the timeline treatment at every width, so the component
   is safe for any number of steps. */
.trc-steps--stack {
  grid-template-columns: 1fr;
  padding-top: 0;
  padding-left: 3.6rem;
  gap: 1.5rem;
}
.trc-steps--stack::before {
  top: 1.4rem;
  bottom: 1.4rem;
  left: 1.4rem;
  right: auto;
  width: 2px;
  height: auto;
  background: repeating-linear-gradient(
    180deg,
    var(--trc-accent-2) 0 10px,
    transparent 10px 18px
  );
}
.trc-steps--stack .trc-step__num {
  position: absolute;
  top: 1.4rem;
  left: -3.6rem;
  transform: none;
  margin-bottom: 0;
}
.trc-steps--stack .trc-step:hover { transform: none; }

@media (max-width: 520px) {
  .trc-steps--stack { padding-left: 3rem; }
  .trc-steps--stack::before { left: 1.2rem; }
  .trc-steps--stack .trc-step__num { left: -3rem; width: 2.4rem; height: 2.4rem; font-size: 0.75rem; }
}

/* A division page is an article: centre the measure rather than leaving
   half the row empty, and stop one evidence card stretching to fill. */
.trc-prose--lead { margin-inline: auto; }
.trc-section .trc-cases {
  grid-template-columns: repeat(auto-fit, minmax(17rem, 23rem));
  justify-content: start;
}

/* =========================================================
   30. The playbook strip goes light
   -----------------------------------------------------------
   Rocky asked for this strip on white. It sits between the
   opening statement (--ink-2) and the divisions router
   (--ink-3), so a white band between two dark ones separates
   them on its own and needs no border.

   Everything in it has to flip with the background. The tag
   drops from the lifted on-dark red back to the oxblood,
   which is the red that reads on light; the ghost button
   swaps its white outline for a dark one. Section 26 put this
   strip on --ink deliberately, so this block has to come
   after it in the file to win.
   ========================================================= */
.trc-pbbar {
  background: var(--trc-paper-2);
  color: var(--trc-ink);
  border-block: 0;
}
.trc-pbbar__tag { color: var(--trc-accent); }
.trc-pbbar__title { color: var(--trc-ink); }
.trc-pbbar .trc-btn--ghost {
  --btn-fg: var(--trc-ink);
  --btn-bd: rgba(31, 31, 31, 0.28);
}
.trc-pbbar .trc-btn--ghost:hover {
  --btn-bg: var(--trc-ink);
  --btn-fg: var(--trc-paper-2);
  --btn-bd: var(--trc-ink);
}

/* =========================================================
   31. What We Do absorbs the entry points
   -----------------------------------------------------------
   Rocky asked on 3 Oct 2026 for "How Companies Work with TRC"
   to sit inside What We Do rather than as its own section, so
   a reader sees the discipline and how an engagement in it
   starts without scrolling past a booking band to find out.

   The entry block is visually subordinate to the checklist
   above it: a hairline, a small caps label, then the numbered
   steps. It has to read as the tail of the card, not a second
   card inside the card.
   ========================================================= */
.trc-service__entry {
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--trc-line-solid);
}
.trc-service__entrylabel {
  margin: 0 0 0.3rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--trc-accent);
}
.trc-service__entrytitle {
  margin: 0 0 0.6rem;
  font-family: var(--trc-font-head);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--trc-ink);
}
.trc-service__steps {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.3rem;
  font-size: 0.9rem;
  color: var(--trc-text);
}
.trc-service__steps li { padding-left: 0.2rem; }

/* The cards stretch so the three entry blocks line up along the
   bottom even when the checklists above them differ in length. */
.trc-grid--3 > .trc-service {
  display: flex;
  flex-direction: column;
}

/* The positioning line that used to open the old section. */
.trc-service__note {
  margin: clamp(1.8rem, 3vw, 2.6rem) 0 0;
  text-align: center;
  font-family: var(--trc-font-head);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--trc-ink);
}
.trc-section--dark .trc-service__note,
.trc-section--dark-2 .trc-service__note { color: var(--trc-on-dark); }
.trc-section--dark .trc-service__entrytitle,
.trc-section--dark-2 .trc-service__entrytitle { color: var(--trc-on-dark); }
.trc-section--dark .trc-service__steps,
.trc-section--dark-2 .trc-service__steps { color: var(--trc-on-dark-mut); }
.trc-section--dark .trc-service__entrylabel,
.trc-section--dark-2 .trc-service__entrylabel { color: var(--trc-accent-3); }
.trc-section--dark .trc-service__entry,
.trc-section--dark-2 .trc-service__entry { border-top-color: var(--trc-line); }

/* =========================================================
   32. Initiatives dropdown, and the playbook strip in red
   -----------------------------------------------------------
   The nav gained one item rather than four: the initiative
   pages hang off it as a submenu, which the stylesheet
   already supports for an admin-built menu. The parent is a
   real link to the front-page section, so the menu still
   works for anyone who never hovers.
   ========================================================= */
.trc-menu__parent > a { display: inline-flex; align-items: center; gap: 0.4rem; }
.trc-menu__caret {
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.7;
  transition: transform 0.2s var(--trc-ease), opacity 0.2s var(--trc-ease);
}
.trc-menu__parent:hover > a .trc-menu__caret,
.trc-menu__parent:focus-within > a .trc-menu__caret {
  opacity: 1;
  transform: translateY(1px) rotate(225deg);
}

/* The submenu opens on hover, so give the pointer somewhere to
   travel. Without this the 0.75rem gap closes the menu as the
   cursor crosses it. */
.trc-nav .trc-menu__parent > .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.75rem;
  height: 0.75rem;
}

@media (max-width: 1240px) {
  /* In the drawer the submenu is always open, so the caret would
     point at nothing. */
  .trc-menu__caret { display: none; }
  .trc-nav .trc-menu__parent > .sub-menu::before { content: none; }
}

/* ---------- The playbook strip, in brand red ----------
   Replaces the white treatment from section 30. White read as
   a gap between two dark sections; the oxblood makes the strip
   the one place on the page that is brand red, which is the
   point of a giveaway nobody should scroll past. */
.trc-pbbar {
  background: var(--trc-accent);
  color: var(--trc-on-dark);
  border-block: 0;
}
.trc-pbbar__tag { color: rgba(255, 255, 255, 0.72); }
.trc-pbbar__title { color: var(--trc-on-dark); }
.trc-pbbar .trc-btn--ghost {
  --btn-fg: var(--trc-on-dark);
  --btn-bd: rgba(255, 255, 255, 0.45);
}
.trc-pbbar .trc-btn--ghost:hover {
  --btn-bg: var(--trc-on-dark);
  --btn-fg: var(--trc-accent);
  --btn-bd: var(--trc-on-dark);
}

/* =========================================================
   33. The header gets its own width budget
   -----------------------------------------------------------
   The nav was overflowing into the CTA on the live site while
   measuring clean locally. The cause was not a breakpoint: the
   header shares the 1200px content wrapper, and with seven
   items, the wordmark and the button the row only had about
   80px of slack. This container has no Inter installed, so it
   rendered the nav in a narrower fallback and that 80px looked
   like enough. In Inter it is not.

   A reading measure of 1200px is right for prose and wrong for
   a navigation bar, so the header now gets a wider wrapper of
   its own and a tighter item gap. Nothing else on the page
   changes, and the type does not shrink.
   ========================================================= */
.trc-header .trc-wrap { max-width: 1440px; }
.trc-nav ul.trc-menu { gap: 1.15rem; }

/* Links must never break mid-label while competing for room. */
.trc-nav ul.trc-menu > li > a { white-space: nowrap; }

@media (max-width: 1540px) {
  /* Below the wide wrapper the row is gutter-bound again, so buy
     the last of the room back before the drawer takes over. */
  .trc-nav ul.trc-menu { gap: 0.9rem; }
  .trc-nav ul.trc-menu > li > a { font-size: 0.9rem; }
}

/* A tap-opened dropdown, and a stacking guard.
   The submenu had no z-index of its own; it only stayed above the page by
   source order, which is a thin guarantee next to a sibling that creates
   its own stacking context. */
.trc-nav .sub-menu { z-index: 20; }
.trc-nav .trc-menu__parent.is-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.trc-menu__parent.is-open > a .trc-menu__caret {
  opacity: 1;
  transform: translateY(1px) rotate(225deg);
}

/* =========================================================
   34. The header collapses when it does not fit
   -----------------------------------------------------------
   Mirrors the drawer rules from section 19, but keyed on a
   class the page adds after measuring itself rather than on a
   guessed width. Section 19 still handles phones and tablets
   with no JavaScript involved; this catches the case a
   breakpoint cannot know about — a heavier font, a longer
   label, one more menu item.
   ========================================================= */
.trc-header.is-compact .trc-header__cta { display: none; }
.trc-header.is-compact .trc-navtoggle { display: inline-flex; }
.trc-header.is-compact .trc-nav__cta { display: block; }

.trc-header.is-compact .trc-nav {
  position: fixed;
  inset: 0;
  display: block;
  padding: 6.5rem var(--trc-gutter) 2.5rem;
  background: var(--trc-ink);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.3s var(--trc-ease), transform 0.35s var(--trc-ease), visibility 0.35s;
}
.trc-header.is-compact .trc-nav.is-open { opacity: 1; visibility: visible; transform: none; }
.trc-header.is-compact .trc-nav ul { display: block; }
.trc-header.is-compact .trc-nav li { border-bottom: 1px solid var(--trc-line); }
.trc-header.is-compact .trc-nav a { display: block; padding: 1.05rem 0; font-size: 1.125rem; font-family: var(--trc-font-head); }
.trc-header.is-compact .trc-nav a::after { display: none; }
.trc-header.is-compact .trc-nav .sub-menu {
  position: static;
  transform: none;
  opacity: 1;
  visibility: visible;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0 0 0.75rem 1rem;
  min-width: 0;
}
.trc-header.is-compact .trc-nav .sub-menu a { padding: 0.6rem 0; font-size: 1rem; }
.trc-header.is-compact .trc-menu__caret { display: none; }
.trc-header.is-compact .trc-nav__cta { margin-top: 2rem; }
.trc-header.is-compact .trc-nav__cta .trc-btn { width: 100%; }

/* The drawer, when it opens on a wide screen.
   It can now be triggered by the fit check rather than only by a phone
   breakpoint, and full-width rows across a 1500px window read as broken
   rather than deliberate. Bounding the content keeps it a menu. */
@media (max-width: 1240px) {
  .trc-nav > * { max-width: 34rem; }
}
/*
 * At phone widths the drawer is the whole screen, which is right. When the
 * fit check opens it on a 1500px monitor, a full-bleed black field with a
 * menu in one corner reads as a broken page rather than an open menu. So
 * there it becomes a panel of its own width, with everything behind it
 * dimmed — the shadow spread does the dimming, no extra element needed.
 */
.trc-header.is-compact .trc-nav {
  inset: 0 auto 0 0;
  width: min(30rem, 100%);
  border-right: 1px solid var(--trc-line);
  box-shadow: 0 0 0 100vmax rgba(10, 10, 10, 0.66);
  clip-path: inset(0 -100vmax 0 0);
}
.trc-header.is-compact .trc-nav > * { max-width: none; }

/* =========================================================
   35. Division wordmarks
   -----------------------------------------------------------
   A division with a logo shows it where its name in type would
   otherwise go — on the group card and at the top of its page.
   Both of those sit on a dark band, which is why the bundled
   asset is the light version of the lockup.

   The image stays inside the heading element with the division
   name as its alt text, so the document outline and anything
   reading the page are unaffected.
   ========================================================= */
.trc-division__logo {
  display: block;
  width: auto;
  /* The lockup stacks "CYBER" under the name, so roughly half its height is
     the sub-line. Sized to a single-line wordmark it reads as a thumbnail;
     this gives the name the same optical weight as a sibling card's heading. */
  height: clamp(3.1rem, 6vw, 4rem);
  margin-bottom: 0.25rem;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}
.trc-pagehero__title--logo { margin-bottom: 0.5em; }
.trc-pagehero__logo {
  display: block;
  width: auto;
  height: clamp(3.4rem, 7.5vw, 5.25rem);
  max-width: min(100%, 32rem);
  object-fit: contain;
  object-position: left center;
}

/* =========================================================
   36. Case-study carousel controls
   -----------------------------------------------------------
   The bar already advanced on its own and accepted a swipe or
   the arrow keys, but nothing on the page said so. These make
   it obvious it can be driven, and they move it a card at a
   time through the same wrap logic a swipe uses, so pressing
   back on the first card continues round rather than stopping.
   ========================================================= */
.trc-marquee { position: relative; }
.trc-marquee__nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-top: -1.375rem;
  padding: 0;
  border: 1px solid var(--trc-line-solid);
  border-radius: 50%;
  background: var(--trc-paper-2);
  color: var(--trc-ink);
  cursor: pointer;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.14);
  transition: background-color 0.2s var(--trc-ease), color 0.2s var(--trc-ease),
              border-color 0.2s var(--trc-ease), transform 0.2s var(--trc-ease);
}
.trc-marquee__nav svg { width: 1.1rem; height: 1.1rem; display: block; }
.trc-marquee__nav--prev { left: clamp(0.5rem, 2vw, 1.5rem); }
.trc-marquee__nav--next { right: clamp(0.5rem, 2vw, 1.5rem); }
.trc-marquee__nav:hover {
  background: var(--trc-accent);
  border-color: var(--trc-accent);
  color: var(--trc-on-dark);
}
.trc-marquee__nav:focus-visible {
  outline: 2px solid var(--trc-accent);
  outline-offset: 3px;
}
.trc-marquee__nav:active { transform: scale(0.94); }

/* On the dark bands the light button would shout; invert it. */
.trc-section--dark .trc-marquee__nav,
.trc-section--dark-2 .trc-marquee__nav {
  background: var(--trc-ink-3);
  border-color: var(--trc-line);
  color: var(--trc-on-dark);
}

@media (max-width: 640px) {
  /* A finger is the primary control at this size; keep the buttons but
     tuck them in so they do not sit on top of the card content. */
  .trc-marquee__nav { width: 2.35rem; height: 2.35rem; margin-top: -1.175rem; }
}

/* =========================================================
   37. Quote band: the rule stops bisecting the astronaut
   -----------------------------------------------------------
   The 46px rule sits above the quote. In the photograph the
   astronaut is a small figure around 39% down the frame, and
   on a narrow screen the cover crop puts him exactly where
   that rule lands, so the line appears to cut him in half.

   Below the quote the rule still reads as the break it is,
   and it cannot cross the figure above it.
   ========================================================= */
@media (max-width: 760px) {
  /*
   * And lift the crop. With cover on a narrow band the image is scaled to
   * the width, so a centred crop lands the astronaut at roughly the same
   * height as the quote. Anchoring the photograph to the bottom of the band
   * discards empty space from the top instead, which raises him clear of
   * the text and keeps the whole curve of the Earth in frame.
   */
  .trc-pullquote--media {
    background-position: center bottom;
    min-height: 24rem;
    display: flex;
    align-items: flex-end;
    padding-bottom: clamp(2rem, 7vw, 3rem);
  }
  .trc-pullquote--media .trc-wrap { width: 100%; }

  .trc-pullquote--media .trc-wrap > .trc-reveal {
    display: flex;
    flex-direction: column;
  }
  .trc-pullquote--media blockquote { order: 1; }
  .trc-pullquote--media .trc-pullquote__rule {
    order: 2;
    margin: 1.9rem auto 0;
  }
}


/* =========================================================
   38. Evidence cards line up, and stop leaving half a row empty
   -----------------------------------------------------------
   Two faults, both visible on the Third Rock Cyber page.

   One: the columns were capped at 23rem with justify-content:
   start, so three cards in a 1120px row could only fit two and
   the third dropped to a line of its own, leaving a hole beside
   it. Letting the track stretch puts them all on one row.

   Two: nothing lined up down the row. Card titles run from two
   lines to four, so the result line, the metric and the rule
   under them each started at a different height on every card.
   Subgrid hands the card's rows back to the parent grid, so the
   image, the title block, the result and the metric each sit on
   a shared row and align across the whole row no matter how long
   any one title runs. Browsers without subgrid keep the old flex
   stacking, which is untidy but not broken.
   ========================================================= */
.trc-section .trc-cases {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  justify-content: stretch;
  align-items: stretch;
}

/* An empty slot holds its place in the row without drawing anything. */
.trc-case__result:empty,
.trc-case__metric:empty { margin: 0; padding: 0; min-height: 0; }

.trc-case__discipline:empty { margin: 0; padding: 0; min-height: 0; }
.trc-case__detail:empty { margin: 0; padding: 0; border: 0; }

@supports (grid-template-rows: subgrid) {
  .trc-section .trc-cases > .trc-case--media {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 6;
    row-gap: 0;
  }
  /* Keep the card's own padding working now that it is a grid. */
  .trc-section .trc-cases > .trc-case--media > .trc-case__media      { grid-row: 1; }
  .trc-section .trc-cases > .trc-case--media > .trc-case__discipline { grid-row: 2; align-self: start; }
  .trc-section .trc-cases > .trc-case--media > .trc-case__client     { grid-row: 3; align-self: start; }
  .trc-section .trc-cases > .trc-case--media > .trc-case__result     { grid-row: 4; align-self: start; }
  .trc-section .trc-cases > .trc-case--media > .trc-case__metric     { grid-row: 5; align-self: start; }
  .trc-section .trc-cases > .trc-case--media > .trc-case__detail     { grid-row: 6; align-self: start; }
}

/* =========================================================
   39. The mobile drawer, and the button inside it
   -----------------------------------------------------------
   Two faults, both only visible after scrolling, which is why
   they survived earlier passes.

   One: the drawer collapsed to the height of the header and the
   page showed through underneath it. Cause is not the drawer at
   all. Once the page scrolls, the header gains .is-stuck, which
   applies backdrop-filter. An element with a backdrop-filter
   becomes the containing block for any position:fixed element
   inside it, so the drawer's `inset: 0` stopped meaning "the
   viewport" and started meaning "the header": a 390x144 box with
   the whole page visible below it. Unscrolled, there is no
   backdrop-filter and the drawer behaves, which is exactly the
   "it breaks as I scroll down" report.

   The filter is purely decorative and the drawer covers the
   header anyway, so it is dropped while the drawer is open. The
   explicit height is belt and braces: if anything else ever
   introduces a containing block, the drawer still fills the
   screen instead of collapsing.

   Two: "Start your strategy" sat hard left and lost its side
   padding. The drawer styles every anchor inside it as a block
   with `padding: 1.05rem 0`, and the call-to-action is an anchor,
   so it was restyled as a menu row: display:block defeated the
   button's own centring and the zero side padding squared off its
   text. The button is now exempted from the menu-row treatment.
   ========================================================= */
body.trc-nav-open .trc-header,
body.trc-nav-open .trc-header.is-stuck,
body.trc-nav-open .trc-header.is-solid {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (max-width: 1240px) {
  .trc-nav { height: 100vh; height: 100dvh; z-index: 90; }
}

.trc-header.is-compact .trc-nav { height: 100vh; height: 100dvh; z-index: 90; }

/* The call to action is a button, not a menu row. */
.trc-header .trc-nav .trc-nav__cta a.trc-btn,
.trc-header.is-compact .trc-nav .trc-nav__cta a.trc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1.15rem 1.75rem;
  font-family: var(--trc-font-body);
  font-size: 1rem;
  text-align: center;
}

/* =========================================================
   40. The close button, and a quiet craft pass
   ========================================================= */

/* ---------- The drawer's close button ----------
   The toggle already animates into an X when the menu opens; it was simply
   being painted over. Giving the drawer a z-index in the previous fix put it
   above its own siblings in the header bar, so the X and the wordmark
   disappeared underneath it and there was no visible way out of the menu.
   Both now sit above the drawer, which is also why the drawer carries 6.5rem
   of top padding: that space was always meant for the header bar. */
.trc-brand,
.trc-navtoggle { position: relative; z-index: 95; }

/* On a phone the X is the only way out, so make it unmissable rather than
   a hairline outline on a dark field. */
.trc-navtoggle[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(238, 241, 246, 0.55);
}

/* ---------- Headlines arriving a line at a time ----------
   Each line is a clipping window with the text sliding up inside it, so the
   words rise out of the line above rather than fading in place. The split is
   done in JS only when it can measure the real font; until then, and whenever
   motion is reduced, the heading is just a heading. */
.trc-lines.is-split { overflow: hidden; }
.trc-lines .trc-line {
  display: block;
  overflow: hidden;
  /* A descender sitting on the clip edge gets shaved, so pad and pull back. */
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.trc-lines .trc-line__in {
  display: block;
  transform: translateY(110%);
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.trc-lines.lines-in .trc-line__in { transform: none; }

/* ---------- Reading progress ----------
   One pixel, accent coloured, scaled from the left. Transform only, so it
   never costs a layout pass while scrolling. */
.trc-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--trc-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: 0;
  transition: opacity 0.3s var(--trc-ease);
  pointer-events: none;
}
.trc-header.is-stuck .trc-progress,
.trc-header.is-solid .trc-progress { opacity: 1; }

/* ---------- Anchor landings ----------
   The header is fixed, so an in-page link used to drop the reader with the
   section title hidden behind it. */
/* scroll-behavior: smooth is deliberately NOT set. The front page is around
   14,000px tall, and a smooth scroll across that distance runs for several
   seconds, during which the page is sliding under the reader's finger: a tap
   lands on whatever happens to be passing. That is what made the footer call
   to action sometimes open Calendly and sometimes an initiative page. The
   offset below is the part that was actually wanted, so in-page links stop
   landing with the heading hidden behind the fixed header. */
[id] { scroll-margin-top: 6rem; }

/* ---------- Focus ----------
   Visible on both the dark and the paper sections, and only for keyboard
   users, so it never flashes on a mouse click. */
:focus-visible {
  outline: 2px solid var(--trc-accent-2, #c9a227);
  outline-offset: 3px;
  border-radius: 2px;
}
.trc-section--dark :focus-visible,
.trc-section--dark-2 :focus-visible,
.trc-header :focus-visible { outline-color: #ffffff; }

/* ---------- Grain ----------
   A single tile of monochrome noise over the dark bands. At 3.5% it is not
   visible as texture; it stops large flat areas of near-black from banding
   on cheap panels and gives them the depth of printed ink. */
.trc-section--dark::after,
.trc-section--dark-2::after,
.trc-pullquote::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.trc-section--dark,
.trc-section--dark-2 { position: relative; }
/* Content keeps its own layer, or the grain would sit on top of the text. */
.trc-section--dark > *,
.trc-section--dark-2 > * { position: relative; z-index: 1; }

/* ---------- A very slow drift on the big photographs ----------
   Forty seconds for a six per cent scale: too slow to watch, enough that a
   still image does not feel like a dead rectangle behind live text. */
@keyframes trc-drift {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

@media (prefers-reduced-motion: no-preference) {
  .trc-pullquote--media { overflow: hidden; }
  .trc-pullquote--media::before {
    animation: trc-drift 40s ease-in-out infinite alternate;
    will-change: transform;
  }
}

/* A send in progress should look like one. */
.trc-form [type="submit"][disabled] { opacity: 0.65; cursor: progress; }

/* =========================================================
   41. The invisible menu that was swallowing the next tap
   -----------------------------------------------------------
   The drawer is a full-screen fixed panel that hides by fading its
   opacity to zero and then switching visibility. Because visibility is
   part of the transition, it stays "visible" for the whole 350ms fade
   and only flips to hidden at the end. Measured on a phone, that leaves
   roughly 420ms during which the drawer is completely transparent,
   covers the entire viewport, and still accepts taps.

   So: tap a button, the drawer closes, tap again within half a second,
   and the second tap lands on a menu item nobody can see. The middle of
   that list is the ISCE page, which is where a thumb naturally falls.
   It happened on every button on every page, which is exactly what was
   reported and why the earlier fixes never touched it.

   Opacity and visibility were doing the fading; nothing was stopping the
   panel catching taps on its way out. Now the closed drawer is inert and
   only the open one accepts them.
   ========================================================= */
@media (max-width: 1240px) {
  .trc-nav { pointer-events: none; }
  .trc-nav.is-open { pointer-events: auto; }
}

.trc-header.is-compact .trc-nav { pointer-events: none; }
.trc-header.is-compact .trc-nav.is-open { pointer-events: auto; }

/* Same trap, smaller: a closed dropdown panel on a touch screen. */
.trc-nav .sub-menu { pointer-events: none; }
.trc-nav li:hover > .sub-menu,
.trc-nav li:focus-within > .sub-menu,
.trc-nav .trc-menu__parent.is-open > .sub-menu,
.trc-header.is-compact .trc-nav .sub-menu { pointer-events: auto; }