/* TekFidelity Design System - VISUAL SYSTEM
   Generated verbatim from the approved prototype's <style> block, so the
   markup and the CSS can never disagree. Cascade order is the approved
   order. Scoped by .tf-home, which the page template supplies as an outer
   container. Do not hand-edit: change the prototype and regenerate. */

.tf-home *, .tf-home *::before, .tf-home *::after { box-sizing: border-box; }
.tf-home img, .tf-home svg { max-width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) { .tf-home *, .tf-home *::before, .tf-home *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }
.tf-home ::selection { background: var(--signal); color: #fff; }
.tf-home a { color: var(--signal); }
.tf-home a:focus-visible, .tf-home button:focus-visible, .tf-home input:focus-visible, .tf-home textarea:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; border-radius: 2px; }
.tf-home h1, .tf-home h2, .tf-home h3, .tf-home h4 { font-family: var(--serif); font-weight: 500; margin: 0; text-wrap: balance; letter-spacing: -.01em; }

.tf-skip-link { position: fixed; top: 8px; left: 8px; z-index: 9999; transform: translateY(-160%); padding: .75rem 1rem; border-radius: var(--r-sm); background: #fff; color: var(--obsidian); box-shadow: var(--shadow); text-decoration: none; font-weight: 600; font-size: .9rem; }
.tf-skip-link:focus { transform: translateY(0); }

.tf-wrap { width: min(100% - 2.5rem, var(--max)); margin-inline: auto; }
.tf-section { padding: clamp(3.5rem,7vw,7rem) 0; }
.tf-section.dark { background: var(--obsidian); color: var(--on-dark); }
.tf-section.dark p { color: var(--on-dark-soft); }
.tf-eyebrow { font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: var(--signal); margin: 0 0 1rem; }
.tf-body-copy { font-family: var(--sans); color: var(--ink-soft); line-height: 1.68; }
.tf-section.dark .tf-body-copy { color: var(--on-dark-soft); }

/* header */
/* Header absorbed into the hero canvas: transparent/gradient over the photo
   until the page scrolls past the hero, then becomes a normal solid fixed
   bar (.is-scrolled, toggled by the small scroll listener below) so nav
   stays reachable throughout the rest of the page. */
.tf-header { position: absolute; top: 0; left: 0; right: 0; z-index: 20; background: linear-gradient(180deg, rgba(5,5,5,.94) 0%, rgba(5,5,5,.72) 72%, rgba(5,5,5,0) 100%); border-bottom: 0; }
.tf-header.is-scrolled { position: fixed; background: rgba(9,9,9,.96); border-bottom: 1px solid rgba(255,255,255,.07); backdrop-filter: blur(12px); }
.tf-hd-bar { display: flex; align-items: center; gap: clamp(1rem,3vw,2.4rem); padding: .9rem clamp(1.25rem,3vw,2.5rem); }
.tf-hd-mark { display: flex; align-items: center; gap: .6rem; margin-right: auto; text-decoration: none; }
.tf-hd-mark img { display: block; height: 34px; width: auto; }
.tf-hd-mark .word { font-family: var(--sans); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; position: relative; display: inline-block; }
.tf-hd-mark .word .tek { color: var(--signal); }
.tf-hd-mark .word .fidelity { color: var(--on-dark); }
.tf-hd-mark .word::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 22px; height: 2px; background: var(--signal); border-radius: 1px; }
.tf-hd-mark .sub { display: block; margin-top: 8px; font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; color: var(--on-dark-soft); text-transform: uppercase; }
.tf-hd-nav { display: flex; align-items: center; gap: clamp(1.1rem,2.4vw,2rem); }
.tf-hd-nav a { font-family: var(--sans); font-size: .87rem; font-weight: 500; color: var(--on-dark-soft); text-decoration: none; white-space: nowrap; }
.tf-hd-nav a:hover { color: var(--signal); }
.tf-hd-cta { min-height: 42px; padding: .6rem 1.2rem; font-size: .85rem; flex: none; }
/* Header CTA — LOCKED as Option B: Porcelain surface, Obsidian text, thin
   Signal Red bottom edge at rest; inverts to solid Signal Red + white on
   hover. Header-only — every other primary CTA site-wide stays solid Signal
   Red. The `a` type selector keeps this strictly more specific than
   .tf-btn.tf-btn-primary regardless of source order — see the specificity
   note in the Correction Kit; this was a real bug once already. */
a.tf-btn.tf-hd-cta { min-height: 48px; padding: 0 1.6rem; font-size: .85rem; line-height: 1; flex: none; border-radius: 13px 13px 4px 4px; background: var(--porcelain); border: none; border-bottom: 2px solid var(--signal); color: var(--obsidian); box-shadow: none; }
a.tf-btn.tf-hd-cta:hover { background: var(--signal); border-bottom-color: var(--signal-deep); color: #fff; transform: none; box-shadow: none; }
.tf-hd-toggle { display: none; }

/* "What We Do" dropdown — CSS-only, opens on hover and on keyboard focus
   (:focus-within) so it works without a mouse, not just visually. */
.tf-hd-drop { position: relative; }
.tf-hd-drop-btn { font-family: var(--sans); font-size: .87rem; font-weight: 500; color: var(--on-dark-soft); background: none; border: none; padding: 0; margin: 0; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; }
.tf-hd-drop-btn:hover, .tf-hd-drop:focus-within .tf-hd-drop-btn { color: var(--signal); }
.tf-hd-drop-btn .car { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-top: -3px; transition: transform var(--fast) var(--ease); }
.tf-hd-drop:hover .tf-hd-drop-btn .car, .tf-hd-drop:focus-within .tf-hd-drop-btn .car { transform: rotate(225deg); margin-top: 2px; }
.tf-hd-drop-menu { position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%) translateY(-6px); width: 280px; background: var(--obsidian-2); border: 1px solid var(--hair-dark); border-radius: var(--r-md); padding: .4rem; box-shadow: var(--shadow); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease), visibility var(--fast); }
.tf-hd-drop:hover .tf-hd-drop-menu, .tf-hd-drop:focus-within .tf-hd-drop-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.tf-hd-drop-menu a { display: block; padding: .7rem .8rem; border-radius: var(--r-sm); font-size: .87rem; font-weight: 500; color: var(--on-dark); white-space: normal; }
.tf-hd-drop-menu a:hover, .tf-hd-drop-menu a:focus-visible { background: var(--obsidian-3); color: var(--signal); outline: none; }
/* Real mobile navigation — an editorial full-width panel, not a shrunk desktop
   drawer: generous type, one accordion for "What We Do", a full-width Let's
   Talk close. Touch-first (click/tap listeners, not :hover) and keyboard-
   accessible (focus trap, Escape, focus restored to the trigger on close). */
.tf-mobile-menu { position: absolute; top: 100%; left: 0; right: 0; background: var(--obsidian); border-top: 1px solid var(--hair-dark); max-height: calc(100vh - 100%); overflow-y: auto; }
.tf-mm-inner { padding: .5rem clamp(1.25rem,5vw,2rem) 1.75rem; display: flex; flex-direction: column; }
/* .tf-mobile-menu prefix, not bare .tf-mm-drop-btn: same Elementor kit-button
   collision as .tf-hd-drop-btn above -- ".elementor-kit-21 button" is (0,1,1)
   and a bare single-class selector (0,1,0) loses outright. This button is
   only hidden behind the closed mobile panel today, not actually fixed, so
   it would have surfaced red the moment someone opened the menu. */
.tf-mobile-menu .tf-mm-drop-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; background: none; border: none; border-bottom: 1px solid var(--hair-dark); padding: 0; font-family: var(--sans); font-size: 1.05rem; font-weight: 600; color: var(--on-dark); text-align: left; cursor: pointer; }
.tf-mm-drop-btn .car { width: 8px; height: 8px; border-right: 1.5px solid var(--on-dark-soft); border-bottom: 1.5px solid var(--on-dark-soft); transform: rotate(45deg); transition: transform var(--fast) var(--ease); flex: none; }
.tf-mm-drop-btn[aria-expanded="true"] .car { transform: rotate(225deg); }
.tf-mm-drop-btn[aria-expanded="true"] { color: var(--signal); }
.tf-mm-drop-panel { display: flex; flex-direction: column; padding-left: 1rem; }
.tf-mm-drop-panel[hidden] { display: none; }
.tf-mm-drop-panel a { display: flex; align-items: center; min-height: 52px; font-family: var(--sans); font-size: .95rem; color: var(--on-dark-soft); text-decoration: none; border-bottom: 1px solid var(--hair-dark); }
.tf-mm-drop-panel a:last-child { border-bottom: none; }
.tf-mm-drop-panel a:hover, .tf-mm-drop-panel a:focus-visible { color: var(--signal); }
.tf-mm-link { display: flex; align-items: center; min-height: 56px; font-family: var(--sans); font-size: 1.05rem; font-weight: 600; color: var(--on-dark); text-decoration: none; border-bottom: 1px solid var(--hair-dark); }
.tf-mm-link:hover, .tf-mm-link:focus-visible { color: var(--signal); }
.tf-mm-cta { width: 100%; margin-top: 1.5rem; }

@media (max-width: 900px) {
  .tf-main-nav { display: none; }
  .tf-site-header a.tf-header-talk { display: none; }
  .tf-site-header-bar { grid-template-columns: 1fr auto; min-height: 72px; padding-left: 20px; padding-right: 14px; column-gap: 12px; }
  .tf-site-header.is-scrolled .tf-site-header-bar { min-height: 64px; }
  .tf-mobile-menu[hidden] { display: none; }
  /* .tf-site-header prefix for the same reason as the two fixes above. */
  .tf-site-header .tf-hd-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: none; }
  .tf-hd-toggle .bar { width: 22px; height: 18px; position: relative; }
  .tf-hd-toggle .bar span { position: absolute; left: 0; right: 0; height: 2px; background: var(--on-dark); transition: transform var(--fast) var(--ease), opacity var(--fast) var(--ease); }
  .tf-hd-toggle .bar span:nth-child(1){top:0} .tf-hd-toggle .bar span:nth-child(2){top:8px} .tf-hd-toggle .bar span:nth-child(3){top:16px}
  .tf-hd-toggle.is-open .bar span:nth-child(1) { top: 8px; transform: rotate(45deg); }
  .tf-hd-toggle.is-open .bar span:nth-child(2) { opacity: 0; }
  .tf-hd-toggle.is-open .bar span:nth-child(3) { top: 8px; transform: rotate(-45deg); }
}
@media (min-width: 901px) { .tf-mobile-menu { display: none; } }

/* buttons / forms */
.tf-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 56px; padding: 0 24px; border-radius: 5px; font-weight: 600; font-size: .9rem; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease); }
.tf-btn.tf-btn-primary { background: var(--signal); color: #fff; }
.tf-btn.tf-btn-primary:hover { background: var(--signal-deep); color: #fff; }
.tf-btn.tf-btn-ghost { background: transparent; border-color: currentColor; color: inherit; }
.tf-btn.tf-btn-ghost:hover { border-color: currentColor; background: rgba(127,127,127,.06); }
.tf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; }
.tf-home input, .tf-home textarea { width: 100%; min-height: 50px; padding: .8rem .95rem; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--card); color: var(--ink); font: inherit; font-size: 1rem; }
.tf-home label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: .4rem; }

/* =========================================
   HERO — LOCKED EDITORIAL COMPOSITION
   Desktop line breaks are explicit art direction (.tf-hero-line spans,
   white-space:nowrap), not a byproduct of max-width/ch/grid math -- that
   was the actual bug behind three rounds of headline-wrap chasing. Mobile
   releases the forced breaks entirely rather than trying to preserve
   desktop typography down to a narrow screen.
   ========================================= */
.tf-hero { position: relative; min-height: 100svh; overflow: hidden; background: #090909; color: #fff; }
.tf-hero-media, .tf-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.tf-hero-media img { object-fit: cover; object-position: 54% center; filter: saturate(.96) contrast(1.05); }
.tf-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(5,5,5,.96) 0%, rgba(5,5,5,.84) 25%, rgba(5,5,5,.55) 43%, rgba(5,5,5,.18) 62%, rgba(5,5,5,.02) 82%); }
.tf-hero-inner { position: relative; z-index: 2; width: min(1500px, calc(100% - 96px)); min-height: 100svh; margin: 0 auto; display: flex; align-items: center; padding-top: 108px; padding-bottom: 72px; }
.tf-hero-copy { width: auto; max-width: none; position: relative; z-index: 3; }
.tf-hero-domain { color: var(--signal); font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; opacity: .88; margin: 0; }
.tf-hero-kicker { margin: 21px 0 0; color: rgba(246,243,239,.88); font-family: var(--mono); font-size: .78rem; letter-spacing: .05em; }
.tf-hero-title { margin: 18px 0 0; font-family: var(--serif); font-size: clamp(4.25rem,5.25vw,6.15rem); font-weight: 500; line-height: .93; letter-spacing: -.035em; color: #f6f3ef; }
.tf-hero-line { display: block; white-space: nowrap; }
.tf-hero-line--accent { color: var(--signal); font-style: italic; margin-top: .03em; }
.tf-hero-lead { width: min(620px,90%); margin-top: 32px; font-family: var(--sans); font-size: 1.08rem; line-height: 1.7; color: rgba(246,243,239,.78); }
.tf-hero .tf-actions { margin-top: 2.2rem; }
.tf-hero .tag-line { margin-top: 2.4rem; display: flex; align-items: center; gap: .7rem; font-family: var(--mono); font-size: .76rem; letter-spacing: .04em; color: rgba(246,243,239,.7); }
.tf-hero .tag-line::before { content: ""; width: 2px; height: 14px; background: var(--signal); flex: none; }
.tf-btn-arrow { margin-left: .2rem; }
/* Quote relocated onto the dark concrete rather than the bright opening --
   a deliberate editorial position, not competing with the figure/light as
   the visual destination. A restrained panel this time (left rule, soft
   fill), not bare text -- explicit per this composition. */
.tf-hero-quote { position: absolute; z-index: 4; top: 21%; right: 12%; width: 285px; padding: 22px 22px 20px 24px; background: rgba(8,8,8,.46); border-left: 1px solid rgba(193,39,45,.9); backdrop-filter: blur(7px); color: #f6f3ef; }
.tf-hero-quote::before { content: ""; display: block; width: 30px; height: 2px; margin-bottom: 16px; background: var(--signal); }
.tf-hero-quote strong { display: block; font-family: var(--serif); font-size: 1.1rem; line-height: 1.4; font-weight: 500; }
.tf-hero-quote p { margin: 15px 0 0; color: rgba(246,243,239,.62); font-size: .88rem; line-height: 1.5; }
@media (max-width: 900px) {
  .tf-hero-inner { width: calc(100% - 40px); min-height: auto; padding: 64px 0 72px; }
  .tf-hero-title { font-size: clamp(3rem,10vw,4.5rem); }
  .tf-hero-line { display: inline; white-space: normal; }
  .tf-hero-line + .tf-hero-line::before { content: " "; }
  .tf-hero-quote { position: relative; top: auto; right: auto; width: min(100%,360px); margin-top: 42px; }
}

/* ===========================================
   TEKFIDELITY HERO — APPROVED VISUAL REFERENCE
   Exact reproduction pass -- do not reinterpret. The block above (tf-hero,
   tf-hero-media, tf-hero-quote, etc.) is now dead/unused CSS, left in place
   rather than risk a scattered deletion; clean up once this composition is
   confirmed against the reference.
   =========================================== */

.tf-hero-final {
  --red: #c1272d;
  --red-dark: #981f24;
  --white: #f7f4ef;
  --soft: #c9c3bd;
  --black: #070707;

  position: relative;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;

  background: var(--black);
  color: var(--white);
}

.tf-hero-bg {
  position: absolute;
  inset: 0;


  /* Supplied by the token so the Media Library swap works. An inline
     style on the element would override this and silently disable it. */
  background-image: var(--tf-hero-image);
  background-size: cover;
  background-position: 67% center;
  background-repeat: no-repeat;

  /* Opens ~25px more separation between the headline and the red diagonal.
     Done as a pixel transform because `cover` gives this image no horizontal
     overflow at desktop widths, making background-position X% inert. */
  transform: translateX(34px) scale(1.045);

  z-index: 0;
}

.tf-hero-shade {
  position: absolute;
  inset: 0;
  z-index: 1;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.93) 0%,
      rgba(0,0,0,.84) 21%,
      rgba(0,0,0,.66) 37%,
      rgba(0,0,0,.30) 53%,
      rgba(0,0,0,.08) 69%,
      rgba(0,0,0,0) 82%
    );
}

/* ONE header, two visual states. The header lives outside the hero in the DOM
   (single nav system: one focus order, one set of active links, one mobile
   menu) but is fixed-positioned so at scrollTop it overlays the hero exactly
   as the frozen composition expects. `.is-scrolled` swaps it to the compact
   solid Obsidian state. The hero's own top spacing is compensated below so
   pulling the header out of flow does NOT move the frozen hero content.
   --red/--white are redeclared here because they were previously inherited
   from .tf-hero-final, which is no longer an ancestor. */
.tf-site-header {
  --red: #c1272d;
  --red-dark: #981f24;
  --white: #f7f4ef;

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;

  background: linear-gradient(180deg, rgba(5,5,5,.82) 0%, rgba(5,5,5,.55) 55%, rgba(5,5,5,0) 100%);
  border-bottom: 1px solid transparent;

  transition: background var(--base) var(--ease), border-color var(--base) var(--ease);
}

.tf-site-header-bar {
  /* IMPORTANT: no restrictive max-width -- CTA must reach the far right */
  width: 100%;

  min-height: 96px;

  padding-left: 48px;
  padding-right: 40px;

  display: grid;
  grid-template-columns: auto 1fr auto;

  align-items: center;
  column-gap: 38px;

  transition: min-height var(--base) var(--ease);
}

/* Compact solid sticky state, past the hero threshold. */
.tf-site-header.is-scrolled {
  /* Fully opaque: at .97 large headings ghosted through while scrolling. */
  background: #0a0a0a;
  border-bottom-color: rgba(255,255,255,.08);
}

.tf-site-header.is-scrolled .tf-site-header-bar { min-height: 70px; }
.tf-site-header.is-scrolled .tf-brand-mark { width: 36px; height: 36px; }
.tf-site-header.is-scrolled .tf-brand-name { font-size: 1.04rem; }
.tf-site-header.is-scrolled .tf-brand-tag { font-size: .58rem; margin-top: 6px; }
.tf-site-header.is-scrolled a.tf-header-talk { height: 44px; background: rgba(9,9,9,.55); }
.tf-site-header.is-scrolled .tf-main-nav > a,
.tf-site-header.is-scrolled .tf-hd-drop-btn { text-shadow: none; }

.tf-brand-mark,
.tf-brand-name,
.tf-brand-tag,
a.tf-header-talk {
  transition: width var(--base) var(--ease), height var(--base) var(--ease), font-size var(--base) var(--ease);
}

/* Anchored sections must not land under the fixed header. */
html { scroll-padding-top: 92px; }

.tf-site-header .tf-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.tf-brand-mark {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.tf-brand-copy {
  display: flex;
  flex-direction: column;
}

.tf-brand-name {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.18rem;
  line-height: 1;
  color: #fff;
}

.tf-brand-name span {
  color: var(--red);
}

.tf-brand-tag {
  margin-top: 8px;

  font-family: "IBM Plex Mono", monospace;
  font-size: .67rem;
  line-height: 1;
  letter-spacing: .12em;

  color: rgba(255,255,255,.68);
}

.tf-main-nav {
  justify-self: end;

  display: flex;
  align-items: center;
  gap: 36px;

  margin-right: 18px;

  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: .91rem;
  font-weight: 500;
}

.tf-site-header .tf-main-nav > a {
  color: rgba(255,255,255,.84);
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(5,5,5,.9), 0 2px 14px rgba(5,5,5,.85);

  font-size: .99rem;
  /* IBM Plex Sans is loaded at 400/500/600/700, so 550 resolves to 600 by
     CSS font matching -- declared explicitly for predictability. */
  font-weight: 600;

  /* >=44px interactive height without changing the 36px nav gap. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.tf-site-header .tf-main-nav > a:hover {
  color: #fff;
}

/* The dropdown trigger is a <button>, so it needs the approved nav-link
   appearance applied explicitly to sit flush with its sibling links.
   It ALSO needs its raw <button> chrome explicitly zeroed here: Elementor's
   kit CSS carries ".elementor-kit-21 button{background:...;border:...;
   border-radius:...}" at (0,1,1), which beats a bare ".tf-hd-drop-btn"
   (0,1,0) outright -- not even a tie this time. Confirmed live: without this,
   the trigger rendered as a solid red button with a red border and rounded
   corners instead of plain nav-link text. This compound selector is already
   (0,2,0), so it wins regardless of what Elementor's kit sets. */
.tf-site-header .tf-hd-drop-btn {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: .99rem;
  font-weight: 600;
  color: rgba(255,255,255,.84);
  text-shadow: 0 1px 2px rgba(5,5,5,.9), 0 2px 14px rgba(5,5,5,.85);

  background: none;
  border: none;
  border-radius: 0;
  min-height: 44px;
}
.tf-site-header .tf-hd-drop-btn:hover,
.tf-site-header .tf-hd-drop:focus-within .tf-hd-drop-btn { color: #fff; }
.tf-site-header .tf-hd-drop-menu { text-shadow: none; }
.tf-site-header .tf-hd-drop-menu a { text-decoration: none; }

/* --------------------------------------------------------------------------
   Elementor kit collisions, round 9. The kit styles `.elementor-kit-21 a`
   and `.elementor-kit-21 button` at specificity (0,1,1) from a stylesheet
   that loads AFTER this one, so any single-class selector of ours either
   loses outright or ties and loses on order. Every rule below is therefore
   compounded to outrank it -- never !important, which would only move the
   fight somewhere harder to reason about.

   Found by the desktop parity pass 2026-08-29: the nav dropdown, the mobile
   panel links and the mobile nav links were all rendering Signal Red instead
   of Porcelain, i.e. the kit's link colour was winning on every one of them.
   -------------------------------------------------------------------------- */
.tf-site-header .tf-hd-drop-menu a { color: var(--on-dark); }
.tf-site-header .tf-hd-drop-menu a:hover,
.tf-site-header .tf-hd-drop-menu a:focus-visible { color: var(--signal); }

.tf-site-header .tf-mm-drop-panel a { color: var(--on-dark-soft); }
.tf-site-header .tf-mm-drop-panel a:hover,
.tf-site-header .tf-mm-drop-panel a:focus-visible { color: var(--signal); }

.tf-site-header a.tf-mm-link { color: var(--on-dark); }
.tf-site-header a.tf-mm-link:hover,
.tf-site-header a.tf-mm-link:focus-visible { color: var(--signal); }

/* The kit also sets a `color` on the body element itself via `.elementor-kit-21`,
   which is (0,1,0) -- exactly the same weight as our own `.tf-home` scope, so it
   won purely on load order and every element that INHERITS its colour rendered
   pure #000 instead of the design system's warm off-black #1A1817. Qualifying
   with the element name takes this to (0,1,1) and settles it. */
body.tf-home { color: var(--ink); }

/* Same story on the hamburger: harmless at desktop because the base rule hides
   it, but the kit's button background/border would show through the moment the
   element is displayed, so reset them on the base rule rather than relying on
   the mobile media query alone. */
.tf-hd-toggle { background: none; border: none; }

.tf-chevron {
  margin-left: 4px;
  opacity: .65;
}

/* Architectural ghost, not a filled control. The previous solid Porcelain
   rectangle read as a generic form button sitting ON the hero photograph;
   this sits INSIDE the architecture -- transparent ground, Porcelain rule,
   one Signal Red edge picking up the diagonal in the image behind it. It is
   deliberately quieter than the primary Assessment CTA in the hero body. */
.tf-site-header a.tf-header-talk {
  justify-self: end;

  height: 48px;
  min-width: 146px;
  padding-inline: 20px;
  margin: 0;

  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;

  border-radius: 9px;
  border: 1px solid rgba(247,244,240,.55);
  border-right: 2px solid var(--red);

  background: rgba(9,9,9,.28);
  color: #F7F4F0;

  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-weight: 600;
  font-size: .92rem;

  text-decoration: none;
  transition: background-color 180ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease);
}
.tf-site-header a.tf-header-talk .arw { font-size: .95em; line-height: 1; transition: transform 180ms var(--ease); }
.tf-site-header a.tf-header-talk:hover,
.tf-site-header a.tf-header-talk:focus-visible {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.tf-site-header a.tf-header-talk:hover .arw { transform: translateX(3px); }
.tf-site-header a.tf-header-talk:focus-visible { outline: 2px solid #F7F4F0; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .tf-site-header a.tf-header-talk, .tf-site-header a.tf-header-talk .arw { transition: none; }
}

.tf-hero-content {
  position: relative;
  z-index: 4;

  width: min(1440px, calc(100% - 96px));
  margin-inline: auto;

  /* +96px replaces the header height that used to sit in the hero flow,
     so the frozen hero content stays at exactly the same Y position. */
  padding-top: calc(96px + clamp(180px, 19vh, 235px));
  padding-bottom: 70px;
}

.tf-hero-domains {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;

  color: var(--red);

  font-family: "IBM Plex Mono", monospace;
  font-size: .69rem;
  line-height: 1;
  letter-spacing: .13em;

  text-transform: uppercase;

  margin-bottom: 31px;
}

.tf-hero-domains i {
  display: inline-block;

  width: 3px;
  height: 3px;

  margin: 0 15px;

  border-radius: 50%;

  background: var(--red);
}

.tf-hero-principle {
  margin-bottom: 25px;

  font-family: "IBM Plex Mono", monospace;
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .13em;

  color: rgba(255,255,255,.68);
}

/* THIS IS THE APPROVED COMPOSITION. DO NOT CHANGE IT TO 3 LINES. */
.tf-hero-heading {
  margin: 0;

  width: 690px;
  max-width: 45vw;

  font-family: "Newsreader", Georgia, serif;
  font-weight: 500;

  font-size: clamp(4.2rem, 5vw, 5.75rem);
  line-height: .92;
  letter-spacing: -.035em;

  color: var(--white);
}

.tf-hero-heading > span {
  display: block;
  white-space: nowrap;
}

.tf-hero-heading .tf-direction {
  margin-top: .06em;

  color: var(--red);
  font-style: italic;
  font-weight: 500;
}

.tf-hero-summary {
  width: 540px;
  max-width: 42vw;

  margin: 31px 0 0;

  color: rgba(255,255,255,.69);

  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
}

.tf-hero-actions {
  display: flex;
  align-items: center;

  gap: 18px;

  margin-top: 36px;
}

.tf-action {
  min-height: 56px;

  padding: 0 24px;

  display: inline-flex;
  align-items: center;
  justify-content: space-between;

  gap: 28px;

  border-radius: 5px;

  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: .9rem;
  font-weight: 600;

  text-decoration: none;
}

a.tf-action-primary {
  min-width: 365px;

  background: var(--red);
  border: 1px solid var(--red);

  color: #fff !important;
}

a.tf-action-primary span {
  color: #fff !important;
}

a.tf-action-primary:hover {
  background: var(--red-dark);
  border-color: var(--red-dark);
}

a.tf-action-secondary {
  min-width: 285px;

  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.62);

  color: #f7f4ef !important;
}

a.tf-action-secondary span {
  color: #f7f4ef !important;
}

a.tf-action-secondary:hover {
  border-color: #fff;
  background: rgba(255,255,255,.035);
}

.tf-hero-foundation {
  position: relative;

  margin-top: 64px;
  padding-left: 24px;

  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem;
  letter-spacing: .15em;

  color: rgba(255,255,255,.58);
}

.tf-hero-foundation::before {
  content: "";

  position: absolute;
  left: 0;
  top: -5px;

  width: 2px;
  height: 46px;

  background: var(--red);
}

.tf-truth {
  position: absolute;
  z-index: 6;

  top: 19%;
  right: 18%;

  display: flex;
  align-items: flex-start;
  gap: 24px;

  width: 295px;

  background: none;
  border: 0;
  padding: 0;
}

.tf-truth::before {
  content: "";

  width: 1px;
  height: 126px;

  flex: 0 0 auto;

  background: rgba(255,255,255,.26);
}

.tf-truth-copy {
  position: relative;
}

.tf-truth-red-rule {
  position: absolute;

  width: 34px;
  height: 2px;

  top: -30px;
  left: 25px;

  background: var(--red);
}

.tf-truth strong {
  display: block;

  color: rgba(255,255,255,.92);

  font-family: "Newsreader", Georgia, serif;
  font-size: 1.13rem;
  line-height: 1.43;
  font-weight: 500;
}

.tf-truth p {
  margin: 24px 0 0;

  color: rgba(255,255,255,.50);

  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: .91rem;
  line-height: 1.55;
}

/* ---- Hero, small screens ----------------------------------------------
   The desktop composition is frozen and untouched above. Below 900px the
   forced line breaks are released (nowrap at 690px would overflow a 320px
   viewport), the CTAs stack full-width (primary has a 365px min-width on
   desktop), and the quote returns to normal flow under the copy. */
@media (max-width: 900px) {
  .tf-hero-final { min-height: auto; }

  .tf-hero-bg { transform: none; background-position: 62% center; }

  .tf-hero-shade {
    background: linear-gradient(180deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.72) 45%, rgba(0,0,0,.90) 100%);
  }

  .tf-hero-content {
    width: calc(100% - 40px);
    padding-top: calc(72px + 54px);
    padding-bottom: 56px;
  }

  .tf-hero-heading {
    width: auto;
    max-width: none;
    font-size: clamp(2.5rem, 10.5vw, 4rem);
  }

  .tf-hero-heading > span { display: inline; white-space: normal; }
  .tf-hero-heading > span + span::before { content: " "; }
  .tf-hero-heading .tf-direction { display: inline; }

  .tf-hero-summary { width: auto; max-width: none; }

  .tf-hero-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .tf-hero-actions .tf-action { min-width: 0; width: 100%; }

  .tf-truth {
    position: static;
    width: auto;
    margin-top: 40px;
    padding-left: 0;
  }
  .tf-truth::before { display: none; }
  .tf-truth-red-rule { position: static; display: block; margin-bottom: 14px; }
}

/* diagnostic — ONE continuous instrument, not six cards. The six domains
   share a single signal field: each red marker drops from its own domain
   into the same waveform, so the composition reads as one diagnostic
   surface rather than a row of services. Light on purpose — this is the
   eye's reset between the cinematic hero and the assessment. */
.tf-diag { background: var(--porcelain); color: var(--ink); padding-bottom: clamp(1.25rem,2.5vw,2.5rem); }   /* -40.5%: the waveform has to read as leading INTO the assessment */
.tf-diag-head { display: grid; grid-template-columns: minmax(0,26ch) minmax(0,1fr); gap: clamp(2rem,7vw,6rem); align-items: start; }
.tf-diag-head h2 { margin: 0; font-family: var(--mono); font-size: clamp(.84rem,1.3vw,1rem); font-weight: 600; letter-spacing: .17em; line-height: 1.75; text-transform: uppercase; color: var(--ink); }
.tf-diag-rule { display: block; width: 46px; height: 2px; margin-top: 1.05rem; background: var(--signal); }
.tf-diag-note { margin: 0; font-family: var(--sans); font-size: 1rem; line-height: 1.62; color: var(--ink-soft); max-width: 32ch; }

.tf-diag-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: clamp(1.1rem,2.3vw,2.1rem); margin-top: clamp(2.4rem,4.8vw,3.9rem); }
.tf-diag-domain { display: flex; flex-direction: column; }
.tf-diag-icon { color: var(--ink); }
.tf-diag-icon svg { display: block; width: 38px; height: 38px; }
.tf-diag-name { margin-top: clamp(1rem,1.9vw,1.55rem); font-family: var(--mono); font-size: .7rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--signal); }
.tf-diag-domain p { margin: .6rem 0 0; font-family: var(--sans); font-size: .89rem; line-height: 1.6; color: var(--ink-soft); max-width: 21ch; }

/* the shared signal field: canvas terrain + the six markers that tie each
   domain to it. Markers live in their own 6-col grid so they land on the
   same column edges as the text above them. */
.tf-diag-signal { position: relative; height: clamp(118px,15vw,200px); margin-top: clamp(.4rem,1.3vw,1.1rem); }
.tf-diag-signal canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tf-diag-marks { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6,1fr); pointer-events: none; }
.tf-diag-marks i { position: relative; justify-self: start; width: 1.6px; height: var(--len,70px); background: var(--signal); transform-origin: top center; transform: scaleY(0); transition: transform 620ms cubic-bezier(.22,.61,.36,1); transition-delay: var(--d,0ms); }
.tf-diag-marks i::after { content: ""; position: absolute; left: 50%; bottom: -2px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--signal); }
.tf-diag.is-live .tf-diag-marks i { transform: scaleY(1); }
/* Current diagnostic region. The marker does NOT extend: an earlier version
   scaled it to 1.5x, which made the red stems read as the subject of the
   animation when the signal FIELD is the subject -- the stems are fixed
   anchors the field moves through. All that remains is a faint opacity
   firm-up as the reading passes, which is felt rather than watched.
   transform/opacity only, so it never triggers layout. */
.tf-diag.is-live .tf-diag-marks i.is-active { transform: scaleY(1); }
.tf-diag-marks i { opacity: .5; transition: transform 620ms cubic-bezier(.22,.61,.36,1), opacity 520ms cubic-bezier(.22,.61,.36,1); transition-delay: var(--d,0ms); }
.tf-diag-marks i.is-active { opacity: .74; }
.tf-diag-marks i.is-active::after { transform: scale(1.1); }
.tf-diag-marks i::after { transition: transform 520ms cubic-bezier(.22,.61,.36,1); }

@media (max-width: 1040px) {
  .tf-diag-head { grid-template-columns: 1fr; gap: 1.3rem; }
  .tf-diag-grid { grid-template-columns: repeat(3,1fr); row-gap: clamp(1.9rem,4.2vw,2.7rem); }
  .tf-diag-marks { grid-template-columns: repeat(3,1fr); }
  .tf-diag-marks i:nth-child(n+4) { display: none; }
}
@media (max-width: 620px) {
  .tf-diag-grid { grid-template-columns: repeat(2,1fr); }
  .tf-diag-domain p { max-width: none; }
  .tf-diag-marks { grid-template-columns: repeat(2,1fr); }
  .tf-diag-marks i:nth-child(n+3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tf-diag-marks i, .tf-diag-marks i::after { transition: none; transform: scaleY(1); opacity: 1; }
  .tf-diag-marks i.is-active { transform: scaleY(1); }
  .tf-diag-marks i.is-active::after { transform: none; }
}

/* signal thread — persistent, page-scoped */
/* Deliberately quiet: a single connective thread across the diagnostic->decision
   arc only (2 states), not a persistent per-section marker — small dot, muted
   label, soft opacity. It should read as an architectural detail, not a UI chip. */
.tf-thread-rail { position: fixed; left: clamp(.75rem,2.2vw,2.2rem); top: 50%; transform: translateY(-50%); z-index: 60; display: flex; flex-direction: column; align-items: center; gap: .9rem; pointer-events: none; opacity: 0; transition: opacity var(--base) var(--ease); }
.tf-thread-rail.active { opacity: .8; }
.tf-thread-line { position: relative; width: 1px; height: 110px; background: rgba(255,255,255,.12); }
.tf-thread-line.on-light { background: var(--border); }
.tf-thread-dot { position: absolute; left: 50%; top: 0; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 8px rgba(193,39,45,.4); }
@media (prefers-reduced-motion: no-preference) { .tf-thread-dot { transition: top .15s linear; } }
.tf-thread-phrase { writing-mode: vertical-rl; text-orientation: mixed; font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-soft); max-height: 160px; }
.tf-thread-phrase.on-light { color: var(--ink-soft); }
@media (max-width: 960px) { .tf-thread-rail { display: none; } }

/* capabilities — image-led filmstrip. Only the Infrastructure tile carries a
   real photograph (the Wi-Fi heatmap); the rest are deliberate dark
   typographic panels rather than stock or invented screenshots. */
.tf-capabilities-top { display: flex; justify-content: space-between; align-items: flex-end; gap: clamp(2rem,5vw,4rem); flex-wrap: wrap; margin-bottom: clamp(2.2rem,4vw,3rem); }
.tf-capabilities-top p { max-width: 40ch; font-family: var(--sans); color: var(--on-dark-soft); font-size: .96rem; margin: 0; }
.tf-cap-film { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px,1fr); gap: 1rem; overflow-x: auto; padding-bottom: .9rem; scrollbar-width: thin; }
.tf-cap-tile { position: relative; min-height: 380px; border-radius: var(--r-md); overflow: hidden; background: linear-gradient(155deg, var(--obsidian-3), var(--obsidian-2)); border: 1px solid var(--hair-dark); }
.tf-cap-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.75) brightness(.62); }
.tf-cap-tile.has-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 32%, rgba(9,9,9,.86)); }
.tf-cap-tile:not(.has-image) { background-image: radial-gradient(circle at 18% 12%, rgba(193,39,45,.14), transparent 42%); }
.tf-cap-art { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }
.tf-cap-copy { position: absolute; z-index: 2; left: 1.4rem; right: 1.4rem; bottom: 1.4rem; }
.tf-cap-copy small { display: block; font-family: var(--mono); font-size: .66rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: #E3DAD2; }
.tf-cap-copy h3 { margin: .55rem 0 0; font-size: 1.4rem; line-height: 1.1; color: var(--on-dark); }
@media (max-width: 767px) { .tf-cap-tile { min-height: 320px; } }

/* offer / assessment -- full-width editorial diagnostic PLATE.
   Replaces the previous bordered card + 50/50 split. The earlier layout
   placed copy in columns 1-7 and the visual in 6-13; a one-column overlap
   is still two adjacent columns and read as a split with a visible seam
   down the centre. Head and instrument now share grid ROWS and overlap
   across a third of the width, so the axis labels land in the negative
   space around the type instead of a separate right-hand zone.

   Every selector is scoped under .tf-plate: the plate uses generic names
   (.wrap, .band, .eyebrow, .lead, .ring, .spoke, .shape, .pt, a.cta) that
   would otherwise collide with the rest of the system. */
.tf-plate { padding: clamp(1.93rem, 3.85vw, 3.85rem) 0 clamp(2rem, 4vw, 3rem); }   /* top -30%; bottom unchanged */
.tf-plate-wrap { width: min(1320px, calc(100% - clamp(2rem, 6vw, 6rem))); margin-inline: auto; }

/* --------------------------------------------------------------------------
   The composition grid.
   An earlier version placed copy in columns 1-7 and the chart in 6-13. A
   one-column overlap is still two adjacent columns, and it read as a
   left/right split with an invisible seam down the centre. The blocks now
   share rows and overlap across a third of the width instead.
   -------------------------------------------------------------------------- */
.tf-plate .plate-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1rem, 2.5vw, 2.5rem);
  align-items: start;
}

/* The instrument shares ROWS with the editorial content rather than sitting
   in its own right-hand column -- that adjacency is what read as a split.
   Head spans 1-9 and the chart spans 4-13 across the same rows, so they
   genuinely overlap through columns 4-9 and the axis labels fall into the
   negative space around the type instead of a separate visual zone. */
.tf-plate .plate-head {
  grid-column: 1 / 9; grid-row: 1;
  position: relative; z-index: 3;
  padding-top: clamp(.25rem, 2vw, 2.25rem);
  pointer-events: none;                 /* the chart beneath stays reachable */
}
.tf-plate .plate-head > * { pointer-events: auto; }

.tf-plate .plate-examine {
  /* Stops at column 6: the instrument's left axis labels now occupy the
     negative space from about column 5 outward, and a wider register
     collided with "Execution Readiness". */
  grid-column: 1 / 6; grid-row: 2;
  position: relative; z-index: 3;
  margin-top: clamp(1rem, 2vw, 1.6rem);
  pointer-events: none;
}
.tf-plate .plate-examine > * { pointer-events: auto; }

.tf-plate .plate-chart {
  grid-column: 4 / 13; grid-row: 1 / 4;
  position: relative; z-index: 1;
  /* pushed down so it interlocks below the headline's right edge instead of
     printing over the words */
  margin-top: clamp(3rem, 11.6vw, 12.5rem);
}

.tf-plate .eyebrow {
  margin: 0 0 1.1rem;
  font-family: var(--mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--signal);
}

.tf-plate h1 {
  margin: 0;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.5rem, 4.6vw, 4.3rem);
  line-height: 1.02; letter-spacing: -.028em;
  color: var(--graphite);
  text-wrap: balance;
}

.tf-plate .lead {
  margin: 1.5rem 0 0; max-width: 40ch;
  font-size: 1.06rem; line-height: 1.62; color: var(--graphite-mute);
}

/* A narrow horizontal register beneath the title -- label and line on one
   baseline, not a stacked left-column block. */
.tf-plate .examine { padding-top: .85rem; border-top: 1px solid var(--hair); display: flex; flex-direction: column; gap: .55rem; }
.tf-plate .examine-label {
  flex: none;
  font-family: var(--mono); font-size: .62rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--graphite-mute);
}
.tf-plate .examine-line { margin: 0; max-width: 34ch; font-family: var(--sans); font-size: .92rem; line-height: 1.55; color: var(--graphite); }
.tf-plate .examine-line i { font-style: normal; color: var(--titanium); padding: 0 .45rem; }

/* --------------------------------------------------------------------------
   The instrument. Free-standing on the Porcelain -- no border, no card,
   no shadow. The six dimensions are positioned around the geometry as part
   of the visualization, not listed beside it.
   -------------------------------------------------------------------------- */
.tf-plate .instrument { position: relative; width: 100%; max-width: 680px; margin-inline: auto; aspect-ratio: 1 / 1; }
.tf-plate .instrument svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.tf-plate .ring { fill: none; stroke: rgba(26,24,23,.10); }
.tf-plate .ring.outer { stroke: rgba(26,24,23,.18); }
.tf-plate .spoke { stroke: rgba(26,24,23,.12); transition: stroke .22s var(--ease), stroke-width .22s var(--ease); }
.tf-plate .spoke.is-hot { stroke: var(--signal); stroke-width: 1.6; }
.tf-plate .shape { fill: rgba(193,39,45,.10); stroke: var(--signal); stroke-width: 1.6; stroke-linejoin: round; }
.tf-plate .pt { fill: var(--signal); }
.tf-plate .pt.is-hot { r: 5.5; }

/* Dimension labels: real buttons, absolutely positioned at the hexagon
   vertices, so they are keyboard reachable and screen-reader announced
   while still reading as part of the chart. */
.tf-plate .dim {
  position: absolute; transform: translate(-50%, -50%);
  display: block; max-width: 11rem; padding: .35rem .4rem;
  background: none; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: .655rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.5;
  color: var(--graphite-mute);
  transition: color .22s var(--ease);
}
.tf-plate .dim:hover, .tf-plate .dim:focus-visible, .tf-plate .dim.is-hot { color: var(--signal); }
.tf-plate .dim:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; }

/* Pulled in from the container edges toward the hexagon vertices so the
   labels read as PART of the instrument rather than captions floating in
   the whitespace around it. The chart itself is drawn at r=205/600 (~34%),
   so these sit just outside the outer ring, not at the container bounds. */
.tf-plate .dim-n { top: 3%;   left: 50%;  text-align: center; }
.tf-plate .dim-ne { top: 27%;  left: 88%;  text-align: left;   transform: translate(-24%, -50%); }
.tf-plate .dim-se { top: 73%;  left: 88%;  text-align: left;   transform: translate(-24%, -50%); }
.tf-plate .dim-s { top: 97%;  left: 50%;  text-align: center; }
.tf-plate .dim-sw { top: 73%;  left: 12%;  text-align: right;  transform: translate(-76%, -50%); }
.tf-plate .dim-nw { top: 27%;  left: 12%;  text-align: right;  transform: translate(-76%, -50%); }

/* One fixed read-out inside the geometry, so the explanation appears without
   a tooltip that jumps around under the cursor. */
/* Read-out sits BELOW the instrument, not inside it: text over the shape
   fill was unreadable and left a permanent grey smudge in the middle of the
   chart. Reserves its own height so nothing shifts when a line appears. */
.tf-plate .readout { margin-top: .1rem; min-height: 1.35em; text-align: center; pointer-events: none; }
.tf-plate .readout p {
  margin: 0 auto; max-width: 34ch;
  font-family: var(--sans); font-size: .85rem; line-height: 1.5;
  color: var(--graphite); opacity: 0; transition: opacity .24s var(--ease);
}
.tf-plate .readout p.is-shown { opacity: 1; }

.tf-plate .chart-caption {
  margin: .2rem 0 0; text-align: center;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .07em;
  color: #9a938c;
}

/* --------------------------------------------------------------------------
   Lower decision band. One horizontal register across the full plate.
   -------------------------------------------------------------------------- */
/* One continuous horizontal conclusion: label, the roadmap sentence, and the
   paired actions all sit on a single baseline register rather than stacking
   into a second block. */
.tf-plate .band {
  margin-top: clamp(.9rem, 1.7vw, 1.5rem);
  padding-top: clamp(.85rem, 1.5vw, 1.15rem);
  border-top: 1px solid var(--titanium);
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, auto);
  gap: clamp(1.5rem, 4vw, 4.5rem);
  align-items: center;
}
.tf-plate .band-label {
  display: block; margin-bottom: .8rem;
  font-family: var(--mono); font-size: .64rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--graphite-mute);
}
.tf-plate .band-copy { margin: 0; font-family: var(--serif); font-size: clamp(1.05rem, 1.6vw, 1.32rem); line-height: 1.6; color: var(--graphite); }
.tf-plate .band-copy b { font-weight: 500; color: var(--signal); }

/* Paired, not stacked: the primary CTA and the self-assessment link read as
   two deliberate options on one line, sharing a baseline. */
.tf-plate .band-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.75rem; justify-content: flex-end; }
.tf-plate a.cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 2.2rem;
  background: var(--signal); color: #fff;
  border-radius: 999px; text-decoration: none;
  font-family: var(--sans); font-size: .97rem; font-weight: 600;
  transition: background .18s var(--ease);
}
.tf-plate a.cta:hover { background: var(--signal-deep); }
.tf-plate a.cta:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }

.tf-plate a.quiet {
  display: inline-flex; align-items: center; gap: .5rem; line-height: 1;
  font-family: var(--sans); font-size: .9rem; font-weight: 600;
  color: var(--signal); text-decoration: none;
  border-bottom: 1px solid rgba(193,39,45,.32); padding-bottom: 2px;
  transition: border-color .18s var(--ease);
}
.tf-plate a.quiet:hover { border-bottom-color: var(--signal); }
.tf-plate a.quiet:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

.tf-plate .scope { margin: 1rem 0 0; font-size: .78rem; line-height: 1.6; color: var(--graphite-mute); max-width: 52ch; }

@media (max-width: 1040px) {
  .band { grid-template-columns: 1fr; }
  .band-actions { justify-content: flex-start; }
  /* Below the interlock width there is not enough room to overlap without
     collision, so the three blocks stack in reading order. */
  .plate-head    { grid-column: 1 / 13; grid-row: 1; }
  .plate-examine { grid-column: 1 / 13; grid-row: 2; }
  .plate-chart   { grid-column: 1 / 13; grid-row: 3; margin-top: clamp(2rem, 5vw, 3rem); }
}
@media (max-width: 620px) {
  .instrument { max-width: 100%; }
  .dim { font-size: .58rem; max-width: 7.5rem; }
  .readout { width: 62%; }
}
@media (prefers-reduced-motion: reduce) {
  .dim, .spoke, .readout p, a.cta, a.quiet { transition: none; }
}

/* senior access — direct-access philosophy and the founder's real credentials
   in one composition, instead of two sections repeating the same point. */
/* Compositional cue, same device as the friction field: a partial rule that
   carries down past the copy so the space below reads as deliberate. */

/* engineering / proof */

/* final CTA — obsidian, not a red flood fill: red stays a signal (radial
   glow, one italic word, the button) exactly as the design system's own
   rule says. */

/* footer */
.tf-footer { background: var(--obsidian); color: var(--on-dark-soft); padding: clamp(4rem,7vw,6rem) 0 0; font-size: .92rem; }
/* footer.tf-footer, not .tf-footer alone: Elementor's own kit CSS carries
   .elementor-kit-21 a { color: var(--e-global-color-primary) } at the SAME
   (0,1,1) specificity in a separate, later-loaded stylesheet, so a tie is
   decided by load order rather than by us -- the 4th time this exact
   collision has hit this project. The extra type selector makes this
   (0,1,2), a genuine win regardless of what Elementor enqueues or in what
   order, with no !important needed. */
footer.tf-footer a { color: var(--on-dark-soft); text-decoration: none; transition: color var(--fast) var(--ease); }
footer.tf-footer a:hover, footer.tf-footer a:focus-visible { color: var(--signal); }

/* Three columns: brand gets the most room, the two link columns stay tight
   -- lots of whitespace between them rather than a dense multi-column grid. */
.tf-footer-grid { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr); gap: clamp(2.5rem,6vw,5rem); padding-bottom: clamp(3rem,6vw,4.5rem); }

.tf-footer-mark { margin: 0 0 1.1rem; font-family: var(--serif); font-weight: 600; font-size: 1.35rem; color: var(--on-dark); letter-spacing: -.01em; }
.tf-footer-mark span { font-size: .6em; vertical-align: super; color: var(--on-dark-soft); }
.tf-footer-position { margin: 0; max-width: 34ch; font-size: .95rem; line-height: 1.65; color: var(--on-dark); }
.tf-footer-sub { margin: .9rem 0 0; max-width: 34ch; font-size: .82rem; line-height: 1.6; color: var(--on-dark-soft); }

.tf-footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: .85rem; }
.tf-footer-heading { margin-bottom: .3rem; font-family: var(--mono); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--signal); }
.tf-footer-col a { font-size: .89rem; line-height: 1.4; }

.tf-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .85rem; padding: 1.5rem 0; border-top: 1px solid var(--hair-dark); font-family: var(--mono); font-size: .72rem; color: var(--on-dark-soft); }
.tf-footer-close { color: var(--on-dark-soft); }

@media (max-width: 900px) {
  .tf-footer-grid { grid-template-columns: 1fr 1fr; }
  .tf-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .tf-footer-grid { grid-template-columns: 1fr; }
  .tf-footer-bottom { flex-direction: column; }
}

@media (max-width: 767px) {
  .tf-wrap { width: min(100% - 1.75rem, var(--max)); }
  .tf-section { padding: clamp(3rem,10vw,4rem) 0; }
  .tf-actions { align-items: stretch; flex-direction: column; }
  .tf-btn { width: 100%; min-height: 52px; }
}

/* ==========================================================================
   ENGINEERING EVIDENCE PLATE
   One integrated composition. The statement occupies columns 1-7 and the
   survey artifact columns 5-13 of the SAME grid rows, so they overlap by
   three columns and the artifact's masked edge dissolves under the type.
   There is no seam to find, and the plate bleeds off the right viewport edge,
   which a card cannot do.

   The survey is masked on ALL FOUR edges. An earlier pass masked only the left
   and bottom, which left hard top and right edges and it still read as a
   rectangle -- the exact failure being designed out. It is also desaturated
   and set below full opacity so it sits UNDER the argument as evidence rather
   than competing with it as a picture.
   ========================================================================== */
.tf-section.eng{ position:relative; padding:clamp(2.5rem,5vw,4.25rem) 0 clamp(2rem,4vw,3rem); overflow:hidden; }
.eng-wrap{ width:min(1240px,calc(100% - clamp(2rem,6vw,6rem))); margin-inline:auto; }

.eng-sheet{ display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  padding-bottom:.7rem; border-bottom:1px solid var(--hair); }
.eng-eyebrow{ margin:0; font-family:var(--mono); font-size:.7rem; font-weight:600;
  letter-spacing:.19em; text-transform:uppercase; color:var(--signal); }
.eng-record{ margin:0; font-family:var(--mono); font-size:.65rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--graphite-mute); }

.eng-grid{ display:grid; grid-template-columns:repeat(12,1fr);
  column-gap:clamp(1rem,2vw,1.75rem); align-items:start; }

.eng-statement{ grid-column:1 / 8; grid-row:1; z-index:3; pointer-events:none;
  padding-top:clamp(1.75rem,3.4vw,2.9rem); }
.eng-statement h2{ margin:0; font-family:var(--serif); font-weight:400;
  font-size:clamp(1.95rem,4.3vw,3.3rem); line-height:1.07; letter-spacing:-.015em;
  text-wrap:balance; color:var(--graphite); }

.eng-body{ grid-column:1 / 6; grid-row:2; z-index:3; margin-top:clamp(1.3rem,2.6vw,2rem); }
.eng-body p{ margin:0; font-size:.96rem; line-height:1.66; color:var(--graphite-mute); max-width:37ch; }
.eng-body p b{ font-weight:600; color:var(--graphite); }

/* --- survey artifact ------------------------------------------------------ */
.eng-artifact{ grid-column:5 / 13; grid-row:1 / 4; position:relative; z-index:1;
  margin-top:clamp(3.5rem,7vw,6.5rem);
  margin-right:calc(-1 * (50vw - min(1240px,100vw - clamp(2rem,6vw,6rem))/2)); }
.eng-artifact img{ display:block; width:100%; height:auto; opacity:.88;
  filter:saturate(.62) contrast(.92) brightness(1.1);
  -webkit-mask-image:
    linear-gradient(to right,transparent 0%,#000 42%),
    linear-gradient(to left,transparent 0%,#000 14%),
    linear-gradient(to bottom,transparent 0%,#000 14%),
    linear-gradient(to top,transparent 0%,#000 12%);
  mask-image:
    linear-gradient(to right,transparent 0%,#000 42%),
    linear-gradient(to left,transparent 0%,#000 14%),
    linear-gradient(to bottom,transparent 0%,#000 14%),
    linear-gradient(to top,transparent 0%,#000 12%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
}
/* registration grid: the architectural-drawing cue, deliberately barely there */
.eng-artifact::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(to right,rgba(247,244,240,.2) 0 1px,transparent 1px 25%),
    repeating-linear-gradient(to bottom,rgba(247,244,240,.2) 0 1px,transparent 1px 33.333%);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 50%),linear-gradient(to left,transparent 0%,#000 16%);
  mask-image:linear-gradient(to right,transparent 0%,#000 50%),linear-gradient(to left,transparent 0%,#000 16%);
  -webkit-mask-composite:source-in; mask-composite:intersect; }

/* --- RSSI scale, drawn in our own type ------------------------------------
   The source screenshot carried the vendor's black scale panel. That block is
   a small copy of the "giant black rectangle" that was rejected, so it is
   cropped away and the scale rebuilt here: a hairline viridis ramp with mono
   ticks. Same information, and it now reads as instrumentation belonging to
   this sheet rather than a screenshot of someone else's UI.
   -------------------------------------------------------------------------- */
.eng-scale{ position:absolute; z-index:4; right:clamp(1rem,4vw,3.5rem); top:12%; bottom:22%;
  display:flex; align-items:stretch; gap:.55rem; }
.eng-scale .ramp{ width:3px; border-radius:2px;
  background:linear-gradient(to bottom,#FDE725 0%,#5EC962 28%,#21918C 52%,#3B528B 76%,#440154 100%); }
.eng-scale .ticks{ display:flex; flex-direction:column; justify-content:space-between;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.08em; color:var(--graphite-mute); }
.eng-scale .unit{ position:absolute; right:0; bottom:-1.55rem; font-family:var(--mono);
  font-size:.58rem; letter-spacing:.13em; text-transform:uppercase; color:var(--graphite-mute); white-space:nowrap; }

/* --- callouts: labels in the Porcelain, hairline leaders into the plan ----- */
.eng-call{ position:absolute; z-index:4; font-family:var(--mono); font-size:.62rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--graphite); white-space:nowrap; }
.eng-call::before{ content:""; position:absolute; background:var(--titanium); }
.eng-call::after{ content:""; position:absolute; width:3px; height:3px; border-radius:50%;
  background:var(--signal); }

.c1{ left:24%; top:-1.9rem; }
.c1::before{ left:0; top:1.05rem; width:1px; height:2.1rem; }
.c1::after{ left:-1px; top:3.05rem; }

.c2{ left:52%; top:-1.9rem; }
.c2::before{ left:0; top:1.05rem; width:1px; height:3.3rem; }
.c2::after{ left:-1px; top:4.25rem; }

.c3{ left:26%; bottom:-1.95rem; }
.c3::before{ left:0; bottom:1rem; width:1px; height:2.6rem; }
.c3::after{ left:-1px; bottom:3.5rem; }

.c4{ left:58%; bottom:-1.95rem; }
.c4::before{ left:0; bottom:1rem; width:1px; height:1.6rem; }
.c4::after{ left:-1px; bottom:2.5rem; }

/* --- colophon: credential and actions on one baseline, never a button pair - */
.eng-foot{ margin-top:clamp(3rem,6vw,5rem); padding-top:1rem; border-top:1px solid var(--hair);
  display:flex; align-items:center; justify-content:space-between; gap:1.25rem 2.5rem; flex-wrap:wrap; }
.eng-cred{ display:flex; align-items:center; gap:.85rem; }
.eng-cred img{ display:block; height:24px; width:auto; opacity:.7; filter:grayscale(1); }
.eng-cred span{ font-family:var(--mono); font-size:.67rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--graphite-mute); }
.eng-actions{ display:flex; align-items:center; gap:2rem; flex-wrap:wrap; }
.eng-actions a{ font-family:var(--sans); font-size:.9rem; font-weight:500; color:var(--graphite);
  text-decoration:none; border-bottom:1px solid var(--titanium); padding-bottom:2px;
  transition:border-color 180ms var(--ease), color 180ms var(--ease); }
.eng-actions a:hover, .eng-actions a:focus-visible{ color:var(--signal); border-bottom-color:var(--signal); }
.eng-actions a:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; border-radius:2px; }
.eng-actions .arw{ display:inline-block; margin-left:.35rem; transition:transform 180ms var(--ease); }
.eng-actions a:hover .arw{ transform:translateX(3px); }

/* --- responsive: the survey drops BELOW the type, never into a second column */
@media (max-width:900px){
  .eng-statement{ grid-column:1 / 13; grid-row:1; padding-top:1.5rem; }
  .eng-body{ grid-column:1 / 13; grid-row:2; }
  .eng-artifact{ grid-column:1 / 13; grid-row:3; margin-top:clamp(2.75rem,7vw,3.5rem);
    margin-right:calc(-1 * clamp(1rem,3vw,3rem)); }
  .eng-artifact img, .eng-artifact::after{
    -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 12%),linear-gradient(to left,transparent 0%,#000 10%),linear-gradient(to bottom,transparent 0%,#000 10%),linear-gradient(to top,transparent 0%,#000 9%);
    mask-image:linear-gradient(to right,transparent 0%,#000 12%),linear-gradient(to left,transparent 0%,#000 10%),linear-gradient(to bottom,transparent 0%,#000 10%),linear-gradient(to top,transparent 0%,#000 9%); }
  .c1{ left:10%; } .c2{ left:44%; } .c3{ left:12%; } .c4{ left:52%; }
}
@media (max-width:600px){
  .eng-call{ font-size:.55rem; letter-spacing:.1em; }
  .c2, .c4{ display:none; }
  .eng-scale{ display:none; }
  .eng-foot{ flex-direction:column; align-items:flex-start; }
  .eng-record{ font-size:.58rem; }
}
@media (prefers-reduced-motion:reduce){ .eng-actions a, .eng-actions .arw{ transition:none; } }

/* ==========================================================================
   CLOSING DECISION BAND
   The final section is an editorial close, not a second hero and not a
   conversion module. Three rules govern it:

   1. NO SPLIT. The headline runs across the composition and the decision line
      runs UNDER it to the action. There is no left column of copy facing a
      right column of decoration -- the previous version's right half was empty
      atmospheric glow doing no work.
   2. ONE dominant action. The Signal Red rule is the composition's spine: it
      enters from the viewport edge, crosses the full width, and terminates by
      becoming the primary action itself. The eye is led to exactly one place.
      The second action is demoted to a quiet line beneath, so the section
      stops reading as a two-button SaaS block.
   3. It BRIDGES. A red tick descends from the line to the section's bottom
      edge and meets the footer rule, so the page ends by continuing rather
      than stopping.

   Height is deliberately held near 520px: the argument has already been made
   upstream, so this only has to ask the question and offer the step.
   ========================================================================== */
.tf-close{ position:relative; background:var(--obsidian); color:var(--on-dark);
  padding:clamp(3rem,6vw,5rem) 0 clamp(1.5rem,3vw,2.25rem); overflow:hidden; }

/* A single, very low-contrast wash anchored to the line's origin. This is
   structure, not the large decorative glow that was rejected. */
.tf-close::before{ content:""; position:absolute; left:-10%; top:38%; width:60%; height:52%;
  background:radial-gradient(60% 60% at 30% 50%, rgba(193,39,45,.10), transparent 70%);
  pointer-events:none; }

.tf-close-wrap{ position:relative; z-index:2;
  width:min(1240px,calc(100% - clamp(2rem,6vw,6rem))); margin-inline:auto; }

.tf-close-eyebrow{ margin:0 0 clamp(1.1rem,2.2vw,1.6rem);
  font-family:var(--mono); font-size:.68rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--signal); }

.tf-close h2{ margin:0; max-width:26ch;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.1rem,5.6vw,4.35rem); line-height:1.04; letter-spacing:-.018em;
  text-wrap:balance; color:var(--on-dark); }

/* The register: the cost named in five words, set as instrumentation. */
.tf-close-register{ margin:clamp(1.2rem,2.4vw,1.7rem) 0 0; display:flex; flex-wrap:wrap;
  gap:.5rem .9rem; font-family:var(--mono); font-size:.7rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-soft); }
.tf-close-register i{ font-style:normal; color:var(--signal); }

/* --- the decision line ---------------------------------------------------
   Full-bleed from the left viewport edge, terminating in the action. The
   negative margin pulls it out of the content column to the screen edge so it
   reads as architecture rather than a border on a box.
   ------------------------------------------------------------------------ */
.tf-close-decision{ position:relative; margin-top:clamp(2.4rem,5vw,3.6rem);
  display:flex; align-items:center; gap:0; }   /* gap:0 -- the rule runs INTO the action */

.tf-close-rule{ position:relative; flex:1 1 auto; height:1px; background:var(--hair-dark);
  margin-left:calc(-1 * (50vw - min(1240px,100vw - clamp(2rem,6vw,6rem))/2)); }
.tf-close-rule::after{ content:""; position:absolute; inset:0; background:var(--signal);
  transform-origin:left center; }
/* Draw once as the section arrives. Scroll-driven animation only -- where it is
   not supported the line is simply already drawn, so there is no JS, no
   observer, and nothing to fail. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .tf-close-rule::after{ transform:scaleX(0);
      animation:tf-draw linear both; animation-timeline:view(); animation-range:entry 5% entry 90%; }
  }
}
@keyframes tf-draw{ to{ transform:scaleX(1); } }

.tf-close-primary{ flex:0 0 auto; display:inline-flex; align-items:center; gap:.9rem;
  padding:.82rem 1.5rem; background:var(--signal); color:#fff;   /* shorter: less box, more terminus */
  font-family:var(--sans); font-size:.95rem; font-weight:600; letter-spacing:.01em;
  text-decoration:none; border:0; border-radius:0;   /* squared: architectural, not a pill */
  transition:background-color 200ms var(--ease), transform 200ms var(--ease); }
.tf-close-primary .arw{ transition:transform 200ms var(--ease); }
.tf-close-primary:hover{ background:var(--signal-deep); }
.tf-close-primary:hover .arw{ transform:translateX(4px); }
.tf-close-primary:focus-visible{ outline:2px solid var(--on-dark); outline-offset:3px; }

/* Kit collision, round 10 -- see the header block for the full explanation.
   Caught by staging QA: the isolation artifact cannot reproduce this because
   the Elementor kit stylesheet is not present there. */
.tf-close a.tf-close-primary{ color:#fff; }
.tf-close a.tf-close-primary:hover, .tf-close a.tf-close-primary:focus-visible{ color:#fff; }
.tf-close .tf-close-alt a{ color:var(--on-dark); }
.tf-close .tf-close-alt a:hover, .tf-close .tf-close-alt a:focus-visible{ color:var(--signal); }

/* --- the quiet second action: a line, never a matching button ------------- */
.tf-close-alt{ margin:clamp(.7rem,1.4vw,1.05rem) 0 0;
  font-family:var(--sans); font-size:.92rem; color:var(--on-dark-soft); }
.tf-close-alt a{ color:var(--on-dark); text-decoration:none;
  border-bottom:1px solid rgba(242,236,229,.28); padding-bottom:2px;
  transition:color 180ms var(--ease), border-color 180ms var(--ease); }
.tf-close-alt a:hover, .tf-close-alt a:focus-visible{ color:var(--signal); border-bottom-color:var(--signal); }
.tf-close-alt a:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; }
.tf-close-alt .arw{ display:inline-block; margin-left:.3rem; transition:transform 180ms var(--ease); }
.tf-close-alt a:hover .arw{ transform:translateX(3px); }

/* --- bridge into the footer ---------------------------------------------- */
.tf-close-bridge{ position:absolute; left:0; bottom:calc(-1 * clamp(1.5rem,3vw,2.25rem)); width:1px;
  height:clamp(1.7rem,3.4vw,2.6rem); background:linear-gradient(to bottom,var(--signal),rgba(193,39,45,.15)); }

@media (max-width:820px){
  .tf-close-decision{ flex-direction:column; align-items:stretch; gap:1.6rem; }
  .tf-close-rule{ display:none; }           /* a stub rule above a full-width button reads as chrome */
  .tf-close-primary{ justify-content:space-between; }
  .tf-close h2{ max-width:none; }
}
@media (prefers-reduced-motion:reduce){
  .tf-close-primary, .tf-close-primary .arw, .tf-close-alt a, .tf-close-alt .arw{ transition:none; }
}

/* ==========================================================================
   SENIOR JUDGMENT — editorial manifesto
   The previous composition was still a split: the argument owned the left and
   a founder/credential panel owned the right, separated by a literal vertical
   divider. Rebuilt as ONE descending editorial field:

     - the statement spans the composition, it does not sit in a column
     - the AI line is promoted out of body copy into a pulled statement
     - Bevan John and the credentials are a SIGNATURE on that statement, the
       way a manifesto is signed, rather than a profile card beside it
     - the three principles cascade diagonally across the lower field at
       different indents and depths, so they read as editorial statements
       rather than three equal feature cards

   Every band is full-width and stacked. Nothing owns a side.
   ========================================================================== */
.tf-senior{ position:relative; background:var(--obsidian); color:var(--on-dark);
  /* bottom trimmed 15% -- the cascade left too much dead air under the third
     principle without that space doing anything for the asymmetry. */
  padding:clamp(3.25rem,6.5vw,5.5rem) 0 clamp(2.55rem,5.1vw,4.25rem); overflow:hidden; }
.tf-senior-wrap{ position:relative; z-index:2;
  width:min(1240px,calc(100% - clamp(2rem,6vw,6rem))); margin-inline:auto;
  display:grid; grid-template-columns:repeat(12,1fr); column-gap:clamp(1rem,2vw,1.75rem); }

.sj-eyebrow{ grid-column:1 / 10; margin:0 0 clamp(1.1rem,2.2vw,1.7rem);
  font-family:var(--mono); font-size:.68rem; font-weight:600; letter-spacing:.19em;
  text-transform:uppercase; color:var(--signal); }

.sj-head{ grid-column:1 / 11; margin:0;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.15rem,5.9vw,4.5rem); line-height:1.03; letter-spacing:-.02em;
  text-wrap:balance; color:var(--on-dark); }

.sj-lead{ grid-column:1 / 7; margin:clamp(1.4rem,2.8vw,2.1rem) 0 0;
  font-size:1rem; line-height:1.68; color:var(--on-dark-soft); }

/* --- the pulled statement + its signature -------------------------------- */
.sj-statement{ grid-column:3 / 12; margin:clamp(2.6rem,5.2vw,4rem) 0 0;
  padding-left:clamp(1.1rem,2.2vw,1.8rem); border-left:2px solid var(--signal); }
.sj-statement p{ margin:0; font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.3rem,2.6vw,2rem); line-height:1.32; letter-spacing:-.01em;
  color:var(--on-dark); text-wrap:balance; }

/* Signature, not a bio card: name set in the serif at reading scale, then the
   credentials as a single mono rule beneath it. */
.sj-sign{ grid-column:3 / 12; margin:clamp(1.3rem,2.4vw,1.8rem) 0 0;
  padding-left:clamp(1.1rem,2.2vw,1.8rem);
  display:flex; align-items:baseline; gap:.65rem 1.4rem; flex-wrap:wrap; }
.sj-name{ font-family:var(--serif); font-size:clamp(1.05rem,1.7vw,1.32rem);
  font-weight:500; color:var(--on-dark); }
.sj-creds{ font-family:var(--mono); font-size:.66rem; font-weight:500; letter-spacing:.13em;
  text-transform:uppercase; color:var(--on-dark-mute); }
.sj-creds i{ font-style:normal; color:var(--signal); padding:0 .4rem; }
.sj-link{ font-family:var(--mono); font-size:.66rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--signal); text-decoration:none;
  border-bottom:1px solid rgba(193,39,45,.4); padding-bottom:2px;
  transition:color 180ms var(--ease), border-color 180ms var(--ease); }
.sj-link:hover, .sj-link:focus-visible{ color:var(--on-dark); border-bottom-color:var(--on-dark); }
.sj-link:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; }
.sj-link .arw{ display:inline-block; margin-left:.3rem; transition:transform 180ms var(--ease); }
.sj-link:hover .arw{ transform:translateX(3px); }

/* --- the three principles, cascading --------------------------------------
   Deliberately NOT a three-column row. Each sits at a different indent and a
   different depth, so the eye travels diagonally down the field. A short red
   tick heads each one; no numbers, because these are stances held at once,
   not steps taken in order.
   -------------------------------------------------------------------------- */
.sj-principles{ grid-column:1 / 13; margin-top:clamp(3rem,6vw,5rem);
  display:grid; grid-template-columns:repeat(12,1fr); column-gap:clamp(1rem,2vw,1.75rem); }

.sj-p{ position:relative; padding-top:1.1rem; border-top:1px solid var(--hair-dark); }
.sj-p::before{ content:""; position:absolute; left:0; top:-1px; width:34px; height:1px; background:var(--signal); }
.sj-p h3{ margin:0 0 .5rem; font-family:var(--mono); font-size:.72rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--on-dark); }
.sj-p p{ margin:0; font-size:.94rem; line-height:1.62; color:var(--on-dark-soft); }

.sj-p1{ grid-column:1 / 6;  margin-top:0; }
.sj-p2{ grid-column:4 / 10; margin-top:clamp(2.2rem,4.4vw,3.6rem); }
.sj-p3{ grid-column:7 / 13; margin-top:clamp(4.4rem,8.8vw,7.2rem); }

@media (max-width:960px){
  .sj-head{ grid-column:1 / 13; }
  .sj-eyebrow{ grid-column:1 / 13; }
  .sj-lead{ grid-column:1 / 13; }
  .sj-statement, .sj-sign{ grid-column:1 / 13; }
  .sj-p1{ grid-column:1 / 9; }
  .sj-p2{ grid-column:3 / 12; margin-top:clamp(1.8rem,4vw,2.6rem); }
  .sj-p3{ grid-column:5 / 13; margin-top:clamp(1.8rem,4vw,2.6rem); }
}
@media (max-width:700px){
  .sj-p1, .sj-p2, .sj-p3{ grid-column:1 / 13; }
  .sj-p2, .sj-p3{ margin-top:2rem; }
  .sj-sign{ flex-direction:column; align-items:flex-start; gap:.5rem; }
}
@media (prefers-reduced-motion:reduce){ .sj-link, .sj-link .arw{ transition:none; } }