/* ==========================================================================
   Enetsec – Cybercrime & Digital Forensics
   pillar.css — Tier 2 pillar template layer

   Loaded AFTER site.css. Two parts:

   PART A — SHARED PRIMITIVES (unscoped).
     Every selector in Part A is deliberately unscoped. These are either
     genuinely new system primitives, or primitives that already exist in
     site.css but are trapped behind `.page-home` (.aeo-nugget, .chip, .faq*,
     .hex-divider*, .cta-title/.cta-text/.cta-actions/.cta-trust). This file
     does not restate the `.page-home` rules; it defines the shared-layer
     versions those pages should have been built on. Because `.page-home .x`
     (0,2,0) outranks `.x` (0,1,0), the homepage is unaffected.
     Promotion path: cut Part A into site.css section 4 and delete it here.

   PART B — PAGE LAYER (.page-pillar).
     Section grounds, rhythm, and the two prefixed components the build spec
     mandates: .cred- (credential accordion) and .cv-card- (credential rail).

   Every var() below is defined in site.css section 1. No new tokens.
   ========================================================================== */


/* ==========================================================================
   PART A — SHARED PRIMITIVES (promotion candidates)
   ========================================================================== */

/* --- A.1 Prose ------------------------------------------------------------
   The body-copy primitive. Content pages are 1,500+ words; site.css has no
   paragraph style below .section-lede. This is the single most reusable
   thing in this file. */
.prose {
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  max-width: 68ch;
}

.prose p {
  margin: 0;
  text-wrap: pretty;
}

.prose p + p { margin-top: var(--space-9); }

.prose strong,
.prose b { color: var(--color-text-strong); font-weight: 700; }

.prose em { font-style: italic; }

.prose a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-border-hard);
  transition: color var(--dur-hover) ease, text-decoration-color var(--dur-hover) ease;
}

.prose a:hover,
.prose a:focus-visible {
  color: var(--color-accent-hover);
  text-decoration-color: var(--color-accent);
}

/* dark-ground variant */
.prose--dark { color: var(--color-on-dark-body-2); }
.prose--dark strong,
.prose--dark b { color: var(--color-on-dark-strong); }

.prose--dark a {
  color: var(--color-on-dark-strong);
  text-decoration-color: var(--color-border-dark-lift);
}

.prose--dark a:hover,
.prose--dark a:focus-visible {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

/* --- A.2 Breadcrumb -------------------------------------------------------
   Every page below the homepage needs one. Mirrors the BreadcrumbList node. */
.breadcrumb { margin: 0 0 var(--space-14); }

.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-xl);
  color: var(--color-text);
}

.breadcrumb-item { display: inline-flex; align-items: center; gap: var(--space-4); }

.breadcrumb-item + .breadcrumb-item::before {
  content: "\002F";
  color: var(--color-border-hard);
}

.breadcrumb-item a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--dur-hover) ease;
}

.breadcrumb-item a:hover,
.breadcrumb-item a:focus-visible { color: var(--color-accent-hover); }

.breadcrumb-item[aria-current="page"] { color: var(--color-heading); font-weight: 500; }

/* --- A.3 Page hero --------------------------------------------------------
   The typographic hero for every page that is not the front door. No canvas,
   no portrait plate, no evidence field. */
.page-hero { max-width: 940px; }

.page-hero-kicker {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin: 0 0 var(--space-9);
  font-family: var(--font-mono);
  font-size: var(--text-kicker);
  letter-spacing: var(--track-4xl);
  font-weight: 600;
  color: var(--color-accent-hover);
}

.page-hero-kicker::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--color-accent);
  flex: none;
}

.page-hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.012em;
  color: var(--color-heading);
  max-width: 18ch;
  text-wrap: balance;
}

.page-hero-lede {
  margin: var(--space-11) 0 0;
  font-family: var(--font-display);
  font-size: var(--text-tagline);
  line-height: 1.45;
  color: var(--color-ink-mid);
  max-width: 42ch;
  text-wrap: balance;
}

.page-hero-actions {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-top: var(--space-14);
}

.page-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-10);
  margin: var(--space-15) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-md);
  letter-spacing: var(--track-lg);
  color: var(--color-text);
}

.page-hero-meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.page-hero-meta-item::before {
  content: "\25AA";
  color: var(--color-accent);
}

/* --- A.4 AEO nugget (shared-layer version) -------------------------------- */
.aeo-nugget {
  margin: var(--space-13) 0 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-left: 3px solid var(--color-accent);
  padding: var(--space-7) var(--space-9);
  max-width: 640px;
  box-shadow: var(--shadow-nugget);
}

.aeo-nugget-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.aeo-nugget-kicker {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-5xl);
  color: var(--color-accent-hover);
  font-weight: 600;
}

.aeo-nugget-ref {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-xl);
  color: var(--color-on-dark-muted-2);
}

.aeo-nugget-body {
  margin: 0;
  font-size: var(--text-base-plus);
  line-height: 1.65;
  color: var(--color-text-strong);
  text-wrap: pretty;
}

/* --- A.5 Split: content column + rail ------------------------------------- */
.split {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-19);
  align-items: flex-start;
}

.split-main { flex: 2.1 1 480px; min-width: 0; }
.split-rail { flex: 1 1 300px; min-width: 0; }

/* --- A.6 Chip (shared-layer version) -------------------------------------- */
.chip {
  display: inline-block;
  border: 1px solid var(--color-border-dark);
  padding: 7px var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-3xl);
  color: var(--color-on-dark-body);
}

.chip--accent {
  border-color: var(--color-accent-edge);
  background: var(--color-accent-wash-2);
  color: var(--color-accent-tint);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

/* --- A.7 Numbered stage sequence ------------------------------------------
   The homepage's step/exhibit language without the lab-console machinery. */
.stage-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}

.stage {
  display: flex;
  gap: var(--space-11);
  align-items: flex-start;
  padding: var(--space-15) 0;
  border-bottom: 1px solid var(--color-border);
}

.stage-no {
  flex: none;
  width: 58px;
  font-family: var(--font-mono);
  font-size: var(--text-stat-sm);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--track-xs);
  color: var(--color-accent);
  padding-top: 3px;
  border-top: 2px solid var(--color-accent);
}

.stage-body { flex: 1 1 auto; min-width: 0; max-width: 72ch; }

.stage-lead {
  font-family: var(--font-display);
  font-size: var(--text-quote);
  font-weight: 700;
  color: var(--color-heading);
  letter-spacing: var(--track-xs);
}

/* --- A.8 Link card grid ---------------------------------------------------
   The standard "deeper pages live here" teaser. Every pillar needs it. */
.link-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
}

.link-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  padding: var(--space-15) var(--space-14) var(--space-17);
  text-decoration: none;
  overflow: hidden;
  transition: background var(--dur-hover) ease, transform var(--dur-hover) ease, box-shadow var(--dur-hover) ease;
}

.link-card:hover,
.link-card:focus-visible {
  background: var(--color-surface-warm);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  z-index: 1;
}

.link-card-no {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-4xl);
  color: var(--color-accent-hover);
  font-weight: 600;
}

.link-card-title {
  margin: var(--space-6) 0 var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 600;
  line-height: 1.22;
  color: var(--color-heading);
  text-wrap: balance;
}

.link-card-text {
  margin: 0 0 var(--space-10);
  font-size: var(--text-base-plus);
  line-height: 1.65;
  color: var(--color-text);
  text-wrap: pretty;
  flex: 1;
}

.link-card-action {
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--color-text-strong);
  border-top: 1px dashed var(--color-border-strong);
  padding-top: var(--space-7);
}

.link-card-go {
  position: absolute;
  right: var(--space-14);
  bottom: var(--space-13);
  font-family: var(--font-mono);
  font-size: var(--text-lead);
  color: var(--color-accent);
  transition: transform var(--dur-hover) ease;
}

.link-card:hover .link-card-go,
.link-card:focus-visible .link-card-go { transform: translateX(5px); }

/* --- A.9 Callout ----------------------------------------------------------
   The bordered aside for a limit, a caveat, or a named case. */
.callout {
  position: relative;
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-tint);
  padding: var(--space-13) var(--space-14);
  box-shadow: var(--shadow-limit);
}

.callout-kicker {
  margin: 0 0 var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-5xl);
  color: var(--color-accent-hover);
  font-weight: 600;
}

.callout-text--emphatic {
  font-family: var(--font-display);
  font-size: var(--text-quote);
  line-height: 1.55;
}

.callout--dark {
  border-color: var(--color-border-dark);
  background: var(--color-ink-panel);
  box-shadow: none;
}

.callout--dark .callout-kicker { color: var(--color-accent); }
.callout--dark .callout-text--emphatic { color: var(--color-on-dark-strong); }

/* --- A.10 FAQ (shared-layer version) -------------------------------------- */
.faq {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card-xs);
}

.faq-q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  padding: var(--space-9) var(--space-12);
}

.faq-q::-webkit-details-marker { display: none; }

.faq-no {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-3xl);
  color: var(--color-accent-hover);
  font-weight: 600;
  flex: none;
}

.faq-text {
  font-family: var(--font-display);
  font-size: var(--text-title-sm);
  font-weight: 600;
  color: var(--color-heading);
  flex: 1;
  text-wrap: pretty;
}

.faq-sign {
  font-family: var(--font-mono);
  color: var(--color-accent);
  flex: none;
  transition: transform var(--dur-hover) ease;
}

.faq-item[open] .faq-sign { transform: rotate(45deg); }

.faq-a {
  margin: 0;
  padding: 0 var(--space-12) var(--space-10) 84px;
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  text-wrap: pretty;
}

.faq-a a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-border-hard);
}

.faq-a a:hover,
.faq-a a:focus-visible {
  color: var(--color-accent-hover);
  text-decoration-color: var(--color-accent);
}

/* --- A.11 Hex divider (shared-layer version) ------------------------------ */
.hex-divider {
  background: var(--color-ink);
  border-top: 2px solid var(--color-accent);
  overflow: hidden;
  padding: var(--space-8) 0;
  position: relative;
}

.hex-divider-stream {
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--text-md);
  letter-spacing: var(--track-8xl);
  color: var(--color-hexline);
  text-align: center;
}

.hex-word {
  color: var(--color-accent);
  background: var(--color-accent-wash-3);
  padding: 2px var(--space-1);
}

.hex-word--cool { color: var(--color-hexline-lit); background: none; }

/* --- A.12 Closing CTA block (shared-layer version) ------------------------ */
.cta-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-closing);
  line-height: 1.08;
  color: var(--color-on-dark-strong);
  margin: 0 0 var(--space-9);
  max-width: 20ch;
  text-wrap: balance;
}

.cta-text {
  margin: 0 0 var(--space-16);
  font-size: var(--text-lead);
  line-height: var(--leading-relaxed);
  color: var(--color-on-dark-body-2);
  max-width: 58ch;
  text-wrap: pretty;
}

.cta-actions {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.cta-trust {
  display: flex;
  gap: var(--space-5) var(--space-10);
  flex-wrap: wrap;
  margin-top: 34px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-xl);
  color: var(--color-on-dark-mono);
}

.cta-trust-sep { color: var(--color-border-dark-lift); }


/* ==========================================================================
   PART B — PAGE LAYER (.page-pillar)
   ========================================================================== */

/* --- B.1 Section grounds and rhythm --------------------------------------- */
.page-pillar .s-hero {
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-tint-2) 72%, var(--color-bg-tint) 100%);
  border-bottom: 1px solid var(--color-border-faint);
}

.page-pillar .s-hero .wrap {
  padding-top: var(--space-19);
  padding-bottom: var(--space-23);
}

.page-pillar .page-intro {
  margin-top: var(--space-20);
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-border);
}

.page-pillar .s-credentials { background: var(--color-bg); }

.page-pillar .s-credentials .wrap,
.page-pillar .s-stages .wrap,
.page-pillar .s-challenge .wrap,
.page-pillar .s-practice .wrap,
.page-pillar .s-faq .wrap {
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
}

.page-pillar .exhibit-thread--short,
.page-pillar .exhibit-thread { margin-top: calc(-1 * var(--space-24)); }

.page-pillar .s-hero .exhibit-thread,
.page-pillar .s-hero .exhibit-thread--short { margin-top: 0; }

.page-pillar .section-title { max-width: 22ch; }

.page-pillar .section-lede {
  margin-top: var(--space-8);
  max-width: 62ch;
}

.page-pillar .s-credentials .split { margin-top: var(--space-19); }
.page-pillar .s-stages .stage-list { margin-top: var(--space-19); }
.page-pillar .s-practice .link-card-grid { margin-top: var(--space-19); }
.page-pillar .s-faq .faq { margin-top: var(--space-18); }
.page-pillar .s-challenge .prose { margin-top: var(--space-14); }
.page-pillar .s-challenge .chip-row { margin-top: var(--space-16); }
.page-pillar .s-challenge .callout { margin-top: var(--space-16); }

.page-pillar .s-practice { background: var(--color-bg-tint); }

/* --- B.2 Credential accordion (.cred-) -----------------------------------
   CSS-only <details>/<summary>. No JS. All panel content is in the DOM on
   load; <details> only hides it visually, so it stays crawlable and prints. */
.page-pillar .cred-stack {
  border: 1px solid var(--color-border);
  border-bottom: none;
  background: var(--color-surface);
  box-shadow: var(--shadow-card-xs);
}

.page-pillar .cred-item { border-bottom: 1px solid var(--color-border); }

.page-pillar .cred-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  padding: var(--space-9) var(--space-12);
  transition: background var(--dur-hover) ease;
}

.page-pillar .cred-summary::-webkit-details-marker { display: none; }

.page-pillar .cred-summary:hover,
.page-pillar .cred-summary:focus-visible { background: var(--color-surface-warm); }

.page-pillar .cred-no {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-3xl);
  color: var(--color-accent-hover);
  font-weight: 600;
}

.page-pillar .cred-title {
  flex: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-title-sm);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-heading);
}

.page-pillar .cred-sign {
  flex: none;
  font-family: var(--font-mono);
  color: var(--color-accent);
  transition: transform var(--dur-hover) ease;
}

.page-pillar .cred-item[open] .cred-summary { background: var(--color-bg-tint-2); }
.page-pillar .cred-item[open] .cred-sign { transform: rotate(45deg); }

.page-pillar .cred-body {
  padding: 0 var(--space-12) var(--space-12) 66px;
  max-width: 64ch;
}

.page-pillar .cred-aside-title {
  margin: var(--space-20) 0 var(--space-9);
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-heading);
}

/* --- B.3 Credential rail (.cv-card-) --------------------------------------
   Static. The gated CV download specified in the brief is deferred: no CRM
   endpoint exists, and a form that posts nowhere is worse than no form. */
.page-pillar .split-rail { position: sticky; top: var(--space-25); }

.page-pillar .cv-card {
  position: relative;
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-tint);
  padding: var(--space-13) var(--space-13) var(--space-14);
  box-shadow: var(--shadow-card);
}

.page-pillar .cv-card-kicker {
  margin: 0 0 var(--space-7);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-5xl);
  color: var(--color-accent-hover);
  font-weight: 600;
}

.page-pillar .cv-card-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-heading);
}

.page-pillar .cv-card-role {
  margin: var(--space-4) 0 var(--space-11);
  font-family: var(--font-mono);
  font-size: var(--text-sm-plus);
  letter-spacing: var(--track-md);
  line-height: var(--leading-normal);
  color: var(--color-text);
}

.page-pillar .cv-card-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border-strong);
}

.page-pillar .cv-card-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-7);
  padding: var(--space-6) 0;
  border-bottom: 1px dashed var(--color-border-strong);
}

.page-pillar .cv-card-row dt {
  flex: none;
  width: 92px;
  font-family: var(--font-mono);
  font-size: var(--text-xs-plus);
  letter-spacing: var(--track-lg);
  text-transform: uppercase;
  color: var(--color-text);
  padding-top: 2px;
}

.page-pillar .cv-card-row dd {
  flex: 1 1 140px;
  min-width: 0;
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--color-text-strong);
  font-weight: 500;
}

.page-pillar .cv-card-note {
  margin: var(--space-11) 0 var(--space-11);
  font-size: var(--text-lg-plus);
  line-height: var(--leading-normal);
  color: var(--color-text);
  text-wrap: pretty;
}

.page-pillar .cv-card-cta {
  width: 100%;
  justify-content: center;
  text-align: center;
  font-size: var(--text-base);
  padding: var(--space-7) var(--space-9);
}

/* --- B.4 Closing CTA ground ----------------------------------------------- */
.page-pillar .s-cta {
  position: relative;
  background: linear-gradient(180deg, var(--color-ink) 0%, var(--color-ink-strong) 100%);
  overflow: hidden;
}

.page-pillar .s-cta .wrap {
  padding-top: var(--space-23);
  padding-bottom: var(--space-25);
}

.page-pillar .s-cta .exhibit-thread--short { margin-top: calc(-1 * var(--space-23)); }

.page-pillar .cta-routes {
  margin-top: var(--space-16);
  margin-bottom: 0;
  font-size: var(--text-base-plus);
  color: var(--color-on-dark-body);
}

.page-pillar .cta-routes a {
  color: var(--color-on-dark-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-border-dark-lift);
  transition: color var(--dur-hover) ease, text-decoration-color var(--dur-hover) ease;
}

.page-pillar .cta-routes a:hover,
.page-pillar .cta-routes a:focus-visible {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}


/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .page-pillar .split-rail { position: static; }
}

@media (max-width: 900px) {
  .page-pillar .s-credentials .wrap,
  .page-pillar .s-stages .wrap,
  .page-pillar .s-challenge .wrap,
  .page-pillar .s-practice .wrap,
  .page-pillar .s-faq .wrap {
    padding-top: var(--space-21);
    padding-bottom: var(--space-21);
  }

  .page-pillar .exhibit-thread,
  .page-pillar .exhibit-thread--short { margin-top: calc(-1 * var(--space-21)); }
  .page-pillar .s-hero .exhibit-thread,
  .page-pillar .s-hero .exhibit-thread--short { margin-top: 0; }
  .page-pillar .s-cta .exhibit-thread--short { margin-top: calc(-1 * var(--space-21)); }

  .page-pillar .s-cta .wrap {
    padding-top: var(--space-21);
    padding-bottom: var(--space-22);
  }

  .page-pillar .cred-body { padding-left: var(--space-12); }

  .faq-a { padding-left: var(--space-12); }

  .stage { gap: var(--space-8); }
  .stage-no { width: 44px; font-size: var(--text-title-sm); }
}

@media (max-width: 600px) {
  .page-pillar .cred-summary,
  .faq-q { padding-left: var(--space-9); padding-right: var(--space-9); }

  .page-pillar .cred-body { padding-left: var(--space-9); padding-right: var(--space-9); }

  .faq-a { padding-left: var(--space-9); padding-right: var(--space-9); }

  .stage {
    flex-direction: column;
    gap: var(--space-7);
  }

  .page-pillar .cv-card { padding: var(--space-11); }
  .page-pillar .cv-card-row dt { width: 100%; }

  .link-card { padding: var(--space-13) var(--space-11) var(--space-16); }
  .link-card-go { right: var(--space-11); bottom: var(--space-10); }
}


/* ==========================================================================
   Reduced motion — the accordion and cards are the only moving parts here
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .page-pillar .cred-summary,
  .page-pillar .cred-sign,
  .faq-sign,
  .link-card,
  .link-card-go {
    transition: none;
  }

  .link-card:hover,
  .link-card:focus-visible { transform: none; }

  .link-card:hover .link-card-go,
  .link-card:focus-visible .link-card-go { transform: none; }
}


/* ==========================================================================
   APPENDED BLOCK — Tier 2 siblings:
     /services-for-legal-purposes/   (Digital Forensic Services for Legal Purposes)
     /legal-consultancy-services/    (Digital Forensics Consultancy for Legal Teams)

   Append-only. Nothing above this line is modified. These two pages are
   longer than the pillar (five to six exhibits each), so they need more
   section grounds than the pillar's five section classes provide, plus two
   genuinely new primitives: a heading-level variant of .stage-lead, and a
   testimonial block. Every var() below is already defined in site.css §1.
   ========================================================================== */

/* --- C.1 Additional section grounds and rhythm ----------------------------
   Same padding contract as .page-pillar .s-credentials et al. */
.page-pillar .s-sources .wrap,
.page-pillar .s-process .wrap,
.page-pillar .s-matters .wrap,
.page-pillar .s-voice .wrap,
.page-pillar .s-examiner .wrap,
.page-pillar .s-advisory .wrap,
.page-pillar .s-structure .wrap {
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
}

.page-pillar .s-process,
.page-pillar .s-advisory,
.page-pillar .s-examiner { background: var(--color-bg); }

.page-pillar .s-voice { background: var(--color-bg-tint); }

.page-pillar .s-process .stage-list,
.page-pillar .s-advisory .stage-list { margin-top: var(--space-19); }

.page-pillar .s-sources .wrap > .prose,
.page-pillar .s-structure .wrap > .prose { margin-top: var(--space-14); }

.page-pillar .s-sources .chip-row,
.page-pillar .s-structure .chip-row { margin-top: var(--space-16); }

.page-pillar .s-structure .callout { margin-top: var(--space-16); }

.page-pillar .s-sources .sources-close,
.page-pillar .s-structure .structure-close { margin-top: var(--space-16); }

.page-pillar .s-matters .wrap > .prose { margin-top: var(--space-16); }
.page-pillar .matters-callout { margin-top: var(--space-17); }

.page-pillar .intro-callout { margin-top: var(--space-16); max-width: var(--measure-narrow); }

.page-pillar .s-examiner .split { margin-top: var(--space-19); }

.page-pillar .voice-intro { margin-top: var(--space-14); }
.page-pillar .voice-close { margin-top: var(--space-16); }

/* --- C.2 Stage heading ----------------------------------------------------
   .stage-lead is an inline <b> that opens a paragraph. These pages carry a
   real H3 per stage, so the same typographic weight is needed as a block
   heading. Styling matches .stage-lead exactly; only the box changes. */
.stage-title {
  margin: 0 0 var(--space-7);
  font-family: var(--font-display);
  font-size: var(--text-quote);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: var(--track-xs);
  color: var(--color-heading);
  text-wrap: balance;
}

/* --- C.3 Testimonial block ------------------------------------------------
   A named client quotation on a light ground. The homepage has .review-*,
   but it is a dark-ground docket card scoped to .page-home and carries
   redaction furniture these pages do not use. */
.quote-block {
  position: relative;
  margin: var(--space-14) 0 0;
  max-width: 72ch;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-left: 3px solid var(--color-accent);
  padding: var(--space-13) var(--space-14);
  box-shadow: var(--shadow-card-sm);
}

.quote-kicker {
  margin: 0 0 var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-5xl);
  color: var(--color-accent-hover);
  font-weight: 600;
}

.quote-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-pull);
  line-height: 1.5;
  color: var(--color-heading);
  text-wrap: pretty;
}

.quote-attrib {
  margin-top: var(--space-10);
  padding-top: var(--space-7);
  border-top: 1px dashed var(--color-border-strong);
  font-family: var(--font-mono);
  font-size: var(--text-sm-plus);
  letter-spacing: var(--track-lg);
  color: var(--color-text);
}

/* --- C.4 Responsive -------------------------------------------------------
   Mirrors the 900px contract above so the custody thread still meets the
   section edge once section padding shortens. */
@media (max-width: 900px) {
  .page-pillar .s-sources .wrap,
  .page-pillar .s-process .wrap,
  .page-pillar .s-matters .wrap,
  .page-pillar .s-voice .wrap,
  .page-pillar .s-examiner .wrap,
  .page-pillar .s-advisory .wrap,
  .page-pillar .s-structure .wrap {
    padding-top: var(--space-21);
    padding-bottom: var(--space-21);
  }
}

@media (max-width: 600px) {
  .quote-block { padding: var(--space-11); }
}


/* ==========================================================================
   TIER 3 SUB-PAGE LAYER (.page-sub)

   Added by the Expert Witness sub-page batch:
     /digital-forensics-expert-witness/deposition-and-trial-testimony/
     /digital-forensics-expert-witness/daubert-challenges-and-admissibility/
     /digital-forensics-expert-witness/rebuttal-and-report-review/

   APPEND-ONLY BLOCK. Nothing above this line was edited or reordered.

   A Tier 3 page is a chapter of its pillar, not a smaller clone of it:
   lighter hero, tighter vertical rhythm, one narrower measure, and a visible
   link back to the parent practice. Everything here either reuses a Part A
   primitive (.prose, .breadcrumb, .page-hero-*, .aeo-nugget, .chip, .faq-*,
   .callout, .stage-*, .hex-divider, .cta-*) or is a new rule scoped to
   .page-sub so it cannot touch .page-home or .page-pillar.

   Every var() below is defined in site.css section 1. No new tokens.
   ========================================================================== */

/* --- S.1 Grounds and rhythm ----------------------------------------------
   Sub-page sections breathe at --space-22, one step under the pillar's
   --space-24. Grounds are chosen per page from the existing vocabulary:
   .band-plain (white), bare section (page tint), .band-dots, .band-dark. */
.page-sub .band-plain { background: var(--color-bg); }

.page-sub main > section > .wrap {
  padding-top: var(--space-22);
  padding-bottom: var(--space-22);
}

.page-sub .exhibit-thread,
.page-sub .exhibit-thread--short { margin-top: calc(-1 * var(--space-22)); }

/* Small mono text on a light ground takes --color-accent-hover (4.9:1), not
   --color-accent (3.5:1). On the dark bands the brighter accent is correct. */
.page-sub .exhibit-label { color: var(--color-accent-hover); }

.page-sub .band-dark .exhibit-label,
.page-sub .s-cta .exhibit-label { color: var(--color-accent); }

.page-sub .s-hero {
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-tint-2) 70%, var(--color-bg-tint) 100%);
  border-bottom: 1px solid var(--color-border-faint);
}

.page-sub .s-hero .wrap {
  padding-top: var(--space-17);
  padding-bottom: var(--space-21);
}

.page-sub .s-hero .exhibit-thread,
.page-sub .s-hero .exhibit-thread--short { margin-top: 0; }

/* lighter hero type than the pillar */
.page-sub .page-hero-title {
  font-size: clamp(32px, 3.6vw, 50px);
  max-width: 20ch;
}

.page-sub .page-hero-lede {
  font-size: var(--text-pull);
  max-width: 40ch;
}

.page-sub .page-intro {
  margin-top: var(--space-17);
  padding-top: var(--space-14);
  border-top: 1px solid var(--color-border);
}

.page-sub .section-title {
  font-size: clamp(27px, 2.8vw, 38px);
  max-width: 24ch;
}

.page-sub .section-lede {
  margin-top: var(--space-8);
  max-width: 62ch;
}

/* The only two flow rules the page layer needs: a prose block that follows a
   section heading or lede. Everything else carries its own margin. */
.page-sub .section-title + .prose,
.page-sub .section-lede + .prose { margin-top: var(--space-14); }

.page-sub .section-h3 {
  margin: var(--space-18) 0 var(--space-9);
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-heading);
}

.page-sub .band-dark .section-h3 { color: var(--color-on-dark-strong); }

.page-sub .chip-row { margin-top: var(--space-16); }
.page-sub .callout { margin-top: var(--space-16); }
.page-sub .stage-list { margin-top: var(--space-16); }
.page-sub .s-faq .faq { margin-top: var(--space-16); }

/* closing CTA ground, matching the pillar's */
.page-sub .s-cta {
  position: relative;
  background: linear-gradient(180deg, var(--color-ink) 0%, var(--color-ink-strong) 100%);
  overflow: hidden;
}

.page-sub .s-cta .wrap {
  padding-top: var(--space-21);
  padding-bottom: var(--space-23);
}

.page-sub .s-cta .exhibit-thread--short { margin-top: calc(-1 * var(--space-21)); }

.page-sub .cta-routes {
  margin-top: var(--space-16);
  margin-bottom: 0;
  font-size: var(--text-base-plus);
  color: var(--color-on-dark-body);
}

.page-sub .cta-routes a {
  color: var(--color-on-dark-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-border-dark-lift);
  transition: color var(--dur-hover) ease, text-decoration-color var(--dur-hover) ease;
}

.page-sub .cta-routes a:hover,
.page-sub .cta-routes a:focus-visible {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

/* --- S.2 Parent-practice marker (.sub-parent) -----------------------------
   The visible "this is part of a larger practice" relationship, sitting above
   the hero kicker. Every Tier 3 page carries one. */
.page-sub .sub-parent {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin: 0 0 var(--space-9);
  padding: var(--space-3) var(--space-7);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-left: 3px solid var(--color-accent);
}

.page-sub .sub-parent-label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-5xl);
  color: var(--color-text);
}

.page-sub .sub-parent-link {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--dur-hover) ease;
}

.page-sub .sub-parent-link:hover,
.page-sub .sub-parent-link:focus-visible {
  color: var(--color-accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- S.3 Scope note (.page-note) ------------------------------------------
   For the standing qualifier a page states before its body, e.g. that a legal
   standard is described as background rather than as legal advice. */
.page-sub .page-note {
  margin: var(--space-14) 0 0;
  padding-left: var(--space-9);
  border-left: 2px solid var(--color-border-strong);
  font-style: italic;
  font-size: var(--text-base-plus);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  max-width: 68ch;
  text-wrap: pretty;
}

/* --- S.4 Cross-examination pattern cards (.dep-attack-) -------------------
   deposition-and-trial-testimony. CSS-only flip, no JS: a visually-hidden but
   focusable checkbox drives a rotateY on the inner wrapper. Both faces live in
   one grid cell, so the card is as tall as its taller face and nothing jumps.
   All text is in the DOM at all times. */
.page-sub .dep-attack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(258px, 100%), 1fr));
  gap: var(--space-6);
  margin-top: var(--space-16);
}

.page-sub .dep-attack { perspective: 1400px; }

.page-sub .dep-attack-inner {
  display: grid;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.55s var(--ease-out);
}

.page-sub .dep-attack-input:checked ~ .dep-attack-inner { transform: rotateY(180deg); }

.page-sub .dep-attack-input:focus-visible ~ .dep-attack-inner {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.page-sub .dep-attack-face {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: var(--space-13) var(--space-11) var(--space-9);
  box-shadow: var(--shadow-card-xs);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.page-sub .dep-attack-face--back {
  transform: rotateY(180deg);
  background: var(--color-bg-tint-2);
  border-color: var(--color-border-strong);
}

.page-sub .dep-attack-no {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-4xl);
  color: var(--color-accent-hover);
  font-weight: 600;
}

.page-sub .dep-attack-title {
  margin: var(--space-6) 0 var(--space-6);
  font-family: var(--font-display);
  font-size: var(--text-title-sm);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-heading);
}

.page-sub .dep-attack-q {
  margin: 0 0 var(--space-11);
  flex: 1;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-quote);
  line-height: 1.45;
  color: var(--color-ink-mid);
  text-wrap: pretty;
}

.page-sub .dep-attack-a {
  margin: var(--space-6) 0 var(--space-11);
  flex: 1;
  font-size: var(--text-base-plus);
  line-height: 1.65;
  color: var(--color-text);
  text-wrap: pretty;
}

.page-sub .dep-attack-cue {
  cursor: pointer;
  display: block;
  border-top: 1px dashed var(--color-border-strong);
  padding-top: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-md);
  letter-spacing: var(--track-lg);
  font-weight: 600;
  color: var(--color-accent-hover);
}

/* --- S.5 Engagement mode selector (.dep-mode-) ----------------------------
   Native radios plus :checked sibling selectors. Keyboard semantics come free
   and there is no JS to fail. Panels share one grid cell so switching mode
   does not move the page. */
.page-sub .dep-mode { margin-top: var(--space-16); }
.page-sub .dep-mode + .prose { margin-top: var(--space-14); }

.page-sub .dep-mode-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
}

.page-sub .dep-mode-btn {
  flex: 1 1 150px;
  cursor: pointer;
  text-align: center;
  background: var(--color-surface);
  padding: var(--space-7) var(--space-9);
  font-family: var(--font-mono);
  font-size: var(--text-md);
  letter-spacing: var(--track-lg);
  font-weight: 600;
  color: var(--color-text-strong);
  transition: background var(--dur-hover) ease, color var(--dur-hover) ease;
}

.page-sub .dep-mode-btn:hover { background: var(--color-surface-warm); color: var(--color-accent-hover); }

.page-sub #dep-mode-consulting:checked ~ .dep-mode-bar [for="dep-mode-consulting"],
.page-sub #dep-mode-report:checked ~ .dep-mode-bar [for="dep-mode-report"],
.page-sub #dep-mode-testifying:checked ~ .dep-mode-bar [for="dep-mode-testifying"] {
  background: var(--color-accent-hover);
  color: var(--color-on-dark-strong);
}

.page-sub #dep-mode-consulting:focus-visible ~ .dep-mode-bar [for="dep-mode-consulting"],
.page-sub #dep-mode-report:focus-visible ~ .dep-mode-bar [for="dep-mode-report"],
.page-sub #dep-mode-testifying:focus-visible ~ .dep-mode-bar [for="dep-mode-testifying"] {
  outline: 2px solid var(--color-accent);
  outline-offset: -4px;
}

.page-sub .dep-mode-panels {
  display: grid;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: none;
  box-shadow: var(--shadow-card-xs);
}

.page-sub .dep-mode-panel {
  grid-area: 1 / 1;
  visibility: hidden;
  margin: 0;
  padding: var(--space-13) var(--space-12);
  font-family: var(--font-display);
  font-size: var(--text-quote);
  line-height: 1.5;
  color: var(--color-heading);
  text-wrap: pretty;
}

.page-sub #dep-mode-consulting:checked ~ .dep-mode-panels .dep-mode-panel--consulting,
.page-sub #dep-mode-report:checked ~ .dep-mode-panels .dep-mode-panel--report,
.page-sub #dep-mode-testifying:checked ~ .dep-mode-panels .dep-mode-panel--testifying { visibility: visible; }

/* --- S.6 Daubert factor grid (.dau-factor-) -------------------------------
   daubert-challenges-and-admissibility. Static, no JS, hover border only. */
.page-sub .dau-factor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(238px, 100%), 1fr));
  gap: var(--space-6);
  margin: var(--space-16) 0;
  padding: 0;
  list-style: none;
  counter-reset: dau-factor;
}

.page-sub .dau-factor {
  counter-increment: dau-factor;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: var(--space-13) var(--space-11);
  box-shadow: var(--shadow-card-xs);
  transition: border-color var(--dur-hover) ease;
}

.page-sub .dau-factor:hover { border-color: var(--color-accent); }

.page-sub .dau-factor::before {
  content: "FACTOR " counter(dau-factor, decimal-leading-zero);
  display: block;
  margin-bottom: var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-4xl);
  color: var(--color-accent-hover);
  font-weight: 600;
}

.page-sub .dau-factor-text {
  margin: 0;
  font-size: var(--text-base-plus);
  line-height: 1.6;
  color: var(--color-text-strong);
  text-wrap: pretty;
}

/* --- S.7 Recurring-failure accordion (.reb-fail-) -------------------------
   rebuttal-and-report-review. Native <details>, same treatment as the
   pillar's credential stack. All panel content is in the DOM on load. */
.page-sub .reb-fail-stack {
  margin-top: var(--space-16);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-bottom: none;
  box-shadow: var(--shadow-card-xs);
}

.page-sub .reb-fail { border-bottom: 1px solid var(--color-border); }

.page-sub .reb-fail-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  padding: var(--space-9) var(--space-12);
  transition: background var(--dur-hover) ease;
}

.page-sub .reb-fail-summary::-webkit-details-marker { display: none; }

.page-sub .reb-fail-summary:hover,
.page-sub .reb-fail-summary:focus-visible { background: var(--color-surface-warm); }

.page-sub .reb-fail-no {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-3xl);
  color: var(--color-accent-hover);
  font-weight: 600;
}

.page-sub .reb-fail-title {
  flex: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-title-sm);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-heading);
}

.page-sub .reb-fail-sign {
  flex: none;
  font-family: var(--font-mono);
  color: var(--color-accent);
  transition: transform var(--dur-hover) ease;
}

.page-sub .reb-fail[open] .reb-fail-summary { background: var(--color-bg-tint-2); }
.page-sub .reb-fail[open] .reb-fail-sign { transform: rotate(45deg); }

.page-sub .reb-fail-body {
  margin: 0;
  padding: 0 var(--space-12) var(--space-12) 66px;
  max-width: 64ch;
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  text-wrap: pretty;
}

/* --- S.8 Silo navigation (.silo-) -----------------------------------------
   Closes the silo: parent practice plus the sibling sub-pages. Shared by every
   Tier 3 page in this batch and intended for the ones that follow. */
.page-sub .s-silo {
  border-top: 1px solid var(--color-border-faint);
  border-bottom: 1px solid var(--color-border-faint);
}

.page-sub .silo-nav-title {
  margin: 0 0 var(--space-13);
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-heading);
}

.page-sub .silo-nav-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(258px, 100%), 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--color-border);
  border: 1px solid var(--color-border);
}

.page-sub .silo-nav-list > li { display: flex; }

.page-sub .silo-link {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--color-surface);
  padding: var(--space-12) var(--space-11) var(--space-16);
  text-decoration: none;
  transition: background var(--dur-hover) ease, transform var(--dur-hover) ease, box-shadow var(--dur-hover) ease;
}

.page-sub .silo-link:hover,
.page-sub .silo-link:focus-visible {
  background: var(--color-surface-warm);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  z-index: 1;
}

.page-sub .silo-link--parent {
  background: var(--color-bg-tint-2);
  border-left: 3px solid var(--color-accent);
}

.page-sub .silo-link-label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-4xl);
  color: var(--color-accent-hover);
  font-weight: 600;
}

.page-sub .silo-link-title {
  font-family: var(--font-display);
  font-size: var(--text-title-sm);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-heading);
  text-wrap: balance;
}

.page-sub .silo-link-go {
  position: absolute;
  right: var(--space-11);
  bottom: var(--space-9);
  font-family: var(--font-mono);
  font-size: var(--text-lead);
  color: var(--color-accent);
  transition: transform var(--dur-hover) ease;
}

.page-sub .silo-link:hover .silo-link-go,
.page-sub .silo-link:focus-visible .silo-link-go { transform: translateX(5px); }

/* --- S.9 Responsive -------------------------------------------------------- */
@media (max-width: 900px) {
  .page-sub main > section > .wrap {
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
  }

  .page-sub .exhibit-thread,
  .page-sub .exhibit-thread--short { margin-top: calc(-1 * var(--space-20)); }

  .page-sub .s-hero .exhibit-thread,
  .page-sub .s-hero .exhibit-thread--short { margin-top: 0; }

  .page-sub .s-cta .wrap {
    padding-top: var(--space-20);
    padding-bottom: var(--space-21);
  }

  .page-sub .s-cta .exhibit-thread--short { margin-top: calc(-1 * var(--space-20)); }

  .page-sub .reb-fail-body { padding-left: var(--space-12); }
}

@media (max-width: 720px) {
  .page-sub .dau-factor-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .page-sub .reb-fail-summary { padding-left: var(--space-9); padding-right: var(--space-9); }
  .page-sub .reb-fail-body { padding-left: var(--space-9); padding-right: var(--space-9); }

  .page-sub .dep-attack-face { padding: var(--space-11) var(--space-9) var(--space-8); }
  .page-sub .dep-mode-btn { flex: 1 1 100%; }
  .page-sub .dep-mode-panel { padding: var(--space-11) var(--space-9); }

  .page-sub .silo-link { padding: var(--space-11) var(--space-9) var(--space-15); }
  .page-sub .silo-link-go { right: var(--space-9); bottom: var(--space-7); }
}

/* --- S.10 Reduced motion ---------------------------------------------------
   The attack cards stop flipping and render both faces stacked, with the flip
   cue removed. Everything else simply stops transitioning. */
@media (prefers-reduced-motion: reduce) {
  .page-sub .dep-attack { perspective: none; }

  .page-sub .dep-attack-inner {
    display: block;
    transform: none !important;
    transition: none;
  }

  .page-sub .dep-attack-face {
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
  }

  .page-sub .dep-attack-face--back {
    transform: none;
    border-top: none;
  }

  .page-sub .dep-attack-q,
  .page-sub .dep-attack-a { flex: 0 1 auto; }

  .page-sub .dep-attack-cue { display: none; }

  .page-sub .dep-attack-face--back .dep-attack-no { display: none; }

  .page-sub .dep-mode-btn,
  .page-sub .dau-factor,
  .page-sub .reb-fail-summary,
  .page-sub .reb-fail-sign,
  .page-sub .sub-parent-link,
  .page-sub .silo-link,
  .page-sub .silo-link-go { transition: none; }

  .page-sub .silo-link:hover,
  .page-sub .silo-link:focus-visible { transform: none; }

  .page-sub .silo-link:hover .silo-link-go,
  .page-sub .silo-link:focus-visible .silo-link-go { transform: none; }
}


/* ==========================================================================
   APPENDED BLOCK — Tier 2 service pages, two silos:

   INCIDENT RESPONSE silo
     /incident-response-for-ransomware/                  (silo pillar)
     /identification-of-the-origin-of-internet-attacks/
     /digital-security/

   REPUTATION silo
     /management-and-interruption-of-defamatory-crises/  (silo pillar)
     /removal-of-inappropriate-content/

   APPEND-ONLY BLOCK. Nothing above this line was edited, reordered or
   removed. All five pages are `.page-pillar`.

   These are the longest pages in the build (2,700 to 4,100 words each), so
   they carry more sections than the pillar's five named grounds provide.
   Rather than add a section class per heading, every body section carries
   `.sec-flow`, which supplies the pillar's padding contract and the spacing
   between a section title and whatever primitive follows it. Grounds are
   then chosen per section from the existing vocabulary: `.band-plain`
   (white), bare section (page tint), `.band-dots`, `.band-dark`.

   Three things here are genuinely new: list styling inside `.prose`, a
   persistent emergency call bar for the ransomware pillar, and a quick-exit
   control for the non-consensual content page. Everything else either
   reuses a Part A primitive or aliases an existing `.page-sub` rule onto
   `.page-pillar` without touching the original.

   Every var() below is defined in site.css section 1. No new tokens.
   ========================================================================== */

/* --- D.1 Section flow (.sec-flow) -----------------------------------------
   Same padding contract as `.page-pillar .s-credentials` et al. */
.page-pillar .sec-flow > .wrap {
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
}

.page-pillar .sec-flow .section-title + .prose,
.page-pillar .sec-flow .section-lede + .prose { margin-top: var(--space-14); }

.page-pillar .sec-flow .prose + .prose { margin-top: var(--space-14); }

.page-pillar .sec-flow .chip-row { margin-top: var(--space-16); }
.page-pillar .sec-flow .callout { margin-top: var(--space-16); }
.page-pillar .sec-flow .quote-block { margin-top: var(--space-16); }
.page-pillar .sec-flow .stage-list { margin-top: var(--space-19); }
.page-pillar .sec-flow .link-card-grid { margin-top: var(--space-19); }
.page-pillar .sec-flow .split { margin-top: var(--space-19); }

/* --- D.2 Grounds ----------------------------------------------------------
   `.band-plain` already exists for `.page-sub`; the white ground is needed
   here too. The page tint is the body background, so a bare section needs
   no rule, and `.band-dots` and `.band-dark` come from site.css unchanged. */
.page-pillar .band-plain { background: var(--color-bg); }

/* --- D.3 Lists inside .prose ----------------------------------------------
   The preservation instructions on /removal-of-inappropriate-content/ are
   the first list in approved body copy anywhere in this build. Marker is a
   square accent node, matching the exhibit furniture rather than a bullet. */
.page-pillar .prose ul {
  margin: var(--space-9) 0 0;
  padding: 0;
  list-style: none;
}

.page-pillar .prose ul > li {
  position: relative;
  padding-left: var(--space-10);
  text-wrap: pretty;
}

.page-pillar .prose ul > li + li { margin-top: var(--space-6); }

.page-pillar .prose ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  background: var(--color-accent);
}

.page-pillar .prose--dark ul > li::before { background: var(--color-accent); }

/* --- D.4 Section H3 (.section-h3) -----------------------------------------
   Aliases the `.page-sub` rule onto `.page-pillar` with identical values.
   Used by the GDPR/CCPA and LGPD sub-headings on /digital-security/. */
.page-pillar .section-h3 {
  margin: var(--space-18) 0 var(--space-9);
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-heading);
}

.page-pillar .band-dark .section-h3 { color: var(--color-on-dark-strong); }

/* --- D.5 Silo navigation (.silo-) on .page-pillar --------------------------
   The silo-nav pattern was written for Tier 3. These two silos close at
   Tier 2, so the same rules are aliased onto `.page-pillar`. Values are
   identical to the `.page-sub` block above; nothing there is modified. */
.page-pillar .s-silo {
  border-top: 1px solid var(--color-border-faint);
  border-bottom: 1px solid var(--color-border-faint);
}

.page-pillar .silo-nav-title {
  margin: 0 0 var(--space-13);
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-heading);
}

.page-pillar .silo-nav-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(258px, 100%), 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--color-border);
  border: 1px solid var(--color-border);
}

.page-pillar .silo-nav-list > li { display: flex; }

.page-pillar .silo-link {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--color-surface);
  padding: var(--space-12) var(--space-11) var(--space-16);
  text-decoration: none;
  transition: background var(--dur-hover) ease, transform var(--dur-hover) ease, box-shadow var(--dur-hover) ease;
}

.page-pillar .silo-link:hover,
.page-pillar .silo-link:focus-visible {
  background: var(--color-surface-warm);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  z-index: 1;
}

.page-pillar .silo-link--parent {
  background: var(--color-bg-tint-2);
  border-left: 3px solid var(--color-accent);
}

.page-pillar .silo-link-label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-4xl);
  color: var(--color-accent-hover);
  font-weight: 600;
}

.page-pillar .silo-link-title {
  font-family: var(--font-display);
  font-size: var(--text-title-sm);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-heading);
  text-wrap: balance;
}

.page-pillar .silo-link-go {
  position: absolute;
  right: var(--space-11);
  bottom: var(--space-9);
  font-family: var(--font-mono);
  font-size: var(--text-lead);
  color: var(--color-accent);
  transition: transform var(--dur-hover) ease;
}

.page-pillar .silo-link:hover .silo-link-go,
.page-pillar .silo-link:focus-visible .silo-link-go { transform: translateX(5px); }

/* --- D.6 Emergency call bar (.ir-callbar) ---------------------------------
   /incident-response-for-ransomware/ only. The approved copy specifies a
   persistent call bar carrying a single `tel:` anchor and no form.

   Built with `position: sticky; bottom: 0` on a direct child of <main>, so
   it rides the viewport bottom for the length of the page and then stops at
   the end of main without ever covering the footer. No scroll listener, no
   script, nothing to hydrate. z-index sits under the sticky site header. */
.page-pillar .ir-callbar {
  position: sticky;
  bottom: 0;
  z-index: 40;
  background: var(--color-ink-strong);
  border-top: 2px solid var(--color-accent);
  box-shadow: var(--shadow-on-dark-deep);
}

.page-pillar .ir-callbar .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-2) var(--space-9);
  padding-top: var(--space-6);
  padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  text-align: center;
}

.page-pillar .ir-callbar-link {
  font-family: var(--font-display);
  font-size: var(--text-lg-plus);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-on-dark-strong);
  text-decoration: none;
  transition: color var(--dur-hover) ease;
}

.page-pillar .ir-callbar-link:hover,
.page-pillar .ir-callbar-link:focus-visible {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-pillar .ir-callbar-note {
  font-family: var(--font-mono);
  font-size: var(--text-xs-plus);
  letter-spacing: var(--track-lg);
  color: var(--color-on-dark-body);
}

/* --- D.7 Quick exit control (.rem-exit) -----------------------------------
   /removal-of-inappropriate-content/ only. A safety control, not an
   engagement device: it is the first focusable thing after the skip link
   and it reads as a plain outbound link. */
.page-pillar .rem-exit {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.page-pillar .rem-exit .wrap {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}

.page-pillar .rem-exit-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  padding: var(--space-5) var(--space-9);
  font-family: var(--font-mono);
  font-size: var(--text-xs-plus);
  letter-spacing: var(--track-xl);
  text-transform: uppercase;
  color: var(--color-text-strong);
  text-decoration: none;
  transition: background var(--dur-hover) ease, border-color var(--dur-hover) ease;
}

.page-pillar .rem-exit-btn:hover,
.page-pillar .rem-exit-btn:focus-visible {
  background: var(--color-surface-warm);
  border-color: var(--color-accent);
}

/* --- D.8 Responsive -------------------------------------------------------
   Mirrors the 900px contract above so the custody thread still meets the
   section edge once section padding shortens. */
@media (max-width: 900px) {
  .page-pillar .sec-flow > .wrap {
    padding-top: var(--space-21);
    padding-bottom: var(--space-21);
  }
}

@media (max-width: 600px) {
  .page-pillar .silo-link { padding: var(--space-11) var(--space-9) var(--space-15); }
  .page-pillar .silo-link-go { right: var(--space-9); bottom: var(--space-7); }
  .page-pillar .ir-callbar .wrap { gap: var(--space-1) var(--space-7); }
}

/* --- D.9 Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .page-pillar .silo-link,
  .page-pillar .silo-link-go,
  .page-pillar .ir-callbar-link,
  .page-pillar .rem-exit-btn { transition: none; }

  .page-pillar .silo-link:hover,
  .page-pillar .silo-link:focus-visible { transform: none; }

  .page-pillar .silo-link:hover .silo-link-go,
  .page-pillar .silo-link:focus-visible .silo-link-go { transform: none; }
}

/* --- D.10 Links inside the closing CTA paragraph --------------------------
   The approved copy for these five pages carries an inline link to the
   contact page inside the closing paragraph itself, not only in the routes
   line beneath it. Same treatment as `.page-pillar .cta-routes a`. */
.page-pillar .s-cta .cta-text a {
  color: var(--color-on-dark-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-border-dark-lift);
  transition: color var(--dur-hover) ease, text-decoration-color var(--dur-hover) ease;
}

.page-pillar .s-cta .cta-text a:hover,
.page-pillar .s-cta .cta-text a:focus-visible {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}


/* ==========================================================================
   APPENDED BLOCK — INDIVIDUALS & FAMILIES SILO (Tier 2, .page-pillar)

     /family-tech-support/                                      silo pillar
     /digital-forensics-training/
     /corporate-personal-appointment-with-wanderson-castilho/   conversion

   APPEND-ONLY. Nothing above this line was edited, reordered or removed.

   REGISTER. Roughly half the caseload is individuals and families, and the
   people on these pages are frightened and non-technical. They get the same
   design system as the attorney-facing pages and a different pace: a longer
   section rhythm (--space-25 against the pillar's --space-24), light grounds
   almost throughout, one idea per section, and the dark band reserved for
   the closing block. No new colours, no new type treatment, no new
   components: every rule below is either a ground, a spacing contract, a
   .page-pillar alias of a pattern that already exists under .page-sub, or a
   small card built from the existing surface, border and shadow vocabulary.

   Every var() below is defined in site.css section 1. No new tokens.
   ========================================================================== */

/* --- F.1 Section grounds and rhythm ---------------------------------------
   These sections breathe one step wider than the pillar's. The custody
   thread offset is restated per section so it still meets the section edge. */
.page-pillar .s-help .wrap,
.page-pillar .s-boundary .wrap,
.page-pillar .s-run .wrap,
.page-pillar .s-fits .wrap,
.page-pillar .s-modules .wrap,
.page-pillar .s-audience .wrap,
.page-pillar .s-instructor .wrap,
.page-pillar .s-who .wrap,
.page-pillar .s-happens .wrap,
.page-pillar .s-prepare .wrap,
.page-pillar .s-about .wrap {
  padding-top: var(--space-25);
  padding-bottom: var(--space-25);
}

.page-pillar .s-help .exhibit-thread,
.page-pillar .s-help .exhibit-thread--short,
.page-pillar .s-boundary .exhibit-thread,
.page-pillar .s-run .exhibit-thread,
.page-pillar .s-fits .exhibit-thread,
.page-pillar .s-modules .exhibit-thread,
.page-pillar .s-modules .exhibit-thread--short,
.page-pillar .s-audience .exhibit-thread,
.page-pillar .s-instructor .exhibit-thread,
.page-pillar .s-who .exhibit-thread,
.page-pillar .s-who .exhibit-thread--short,
.page-pillar .s-happens .exhibit-thread,
.page-pillar .s-prepare .exhibit-thread,
.page-pillar .s-about .exhibit-thread { margin-top: calc(-1 * var(--space-25)); }

.page-pillar .s-help,
.page-pillar .s-run,
.page-pillar .s-modules,
.page-pillar .s-instructor,
.page-pillar .s-happens,
.page-pillar .s-about { background: var(--color-bg); }

.page-pillar .s-boundary,
.page-pillar .s-fits,
.page-pillar .s-who,
.page-pillar .s-prepare { background: var(--color-bg-tint); }

/* --- F.2 Block subheading (.section-h3) -----------------------------------
   The .page-pillar alias of the heading .page-sub already carries. Pages
   that do not use the class are unaffected. */
.page-pillar .section-h3 {
  margin: var(--space-20) 0 var(--space-9);
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-heading);
  text-wrap: balance;
}

.page-pillar .s-help .section-title + .section-h3 { margin-top: var(--space-18); }
.page-pillar .s-help .section-h3 + .prose { margin-top: 0; }

/* --- F.3 Flow for the new sections ---------------------------------------- */
.page-pillar .boundary-callout { margin-top: var(--space-16); }
.page-pillar .boundary-close { margin-top: var(--space-17); }
.page-pillar .s-run .stage-list { margin-top: var(--space-18); }
.page-pillar .s-fits .link-card-grid { margin-top: var(--space-18); }
.page-pillar .s-modules .stage-list { margin-top: var(--space-18); }
.page-pillar .s-audience .prose { margin-top: var(--space-14); }
.page-pillar .s-audience .chip-row { margin-top: var(--space-16); }
.page-pillar .instructor-prose { margin-top: var(--space-14); }
.page-pillar .instructor-links { margin-top: var(--space-18); }
.page-pillar .happens-prose,
.page-pillar .prepare-prose,
.page-pillar .about-prose { margin-top: var(--space-14); }
.page-pillar .prepare-callout { margin-top: var(--space-17); }

.page-pillar .about-route {
  display: flex;
  gap: var(--space-5);
  align-items: baseline;
}

.page-pillar .about-route-mark {
  font-family: var(--font-mono);
  color: var(--color-accent-hover);
  flex: none;
}

/* --- F.4 Review translation line ------------------------------------------
   The Portuguese text in .quote-text is the reviewer's own wording. This is
   the labelled English rendering that sits under it, set quieter than the
   quotation so the two can never be mistaken for each other. */
.quote-translation {
  margin: var(--space-9) 0 0;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  text-wrap: pretty;
}

/* --- F.5 Audience cards (.appt-who-) --------------------------------------
   Four short blocks on the conversion page, so the reader can find their own
   case at a glance instead of reading four paragraphs to locate it. Same
   surface, border and shadow as every other card in the system. */
.page-pillar .appt-who-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--space-6);
  margin-top: var(--space-18);
}

.page-pillar .appt-who {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  padding: var(--space-13) var(--space-12) var(--space-14);
  box-shadow: var(--shadow-card-xs);
}

.page-pillar .appt-who-title {
  margin: 0 0 var(--space-7);
  font-family: var(--font-display);
  font-size: var(--text-title-sm);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-heading);
  text-wrap: balance;
}

/* --- F.6 Availability panel (.appt-cal-) ----------------------------------
   The static facade the engagement brief specifies, shipped on its own while
   no scheduler is provisioned. Dark-ground sibling of .cv-card. */
.page-pillar .appt-cal-panel {
  position: relative;
  margin: 0 0 var(--space-16);
  max-width: 620px;
  border: 1px solid var(--color-border-dark);
  background: var(--color-ink-panel);
  padding: var(--space-13) var(--space-13) var(--space-14);
}

.page-pillar .appt-cal-kicker {
  margin: 0 0 var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-5xl);
  color: var(--color-accent);
  font-weight: 600;
}

.page-pillar .appt-cal-hours {
  margin: 0 0 var(--space-11);
  font-family: var(--font-display);
  font-size: var(--text-quote);
  line-height: 1.4;
  color: var(--color-on-dark-strong);
}

.page-pillar .appt-cal-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border-dark);
}

.page-pillar .appt-cal-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-7);
  padding: var(--space-6) 0;
  border-bottom: 1px dashed var(--color-border-dark);
}

.page-pillar .appt-cal-row dt {
  flex: none;
  width: 92px;
  font-family: var(--font-mono);
  font-size: var(--text-xs-plus);
  letter-spacing: var(--track-lg);
  text-transform: uppercase;
  color: var(--color-on-dark-body);
  padding-top: 2px;
}

.page-pillar .appt-cal-row dd {
  flex: 1 1 180px;
  min-width: 0;
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--color-on-dark-body-2);
  font-weight: 500;
}

.page-pillar .appt-cal-cta {
  width: 100%;
  justify-content: center;
  text-align: center;
  margin-top: var(--space-13);
  font-size: var(--text-base);
  padding: var(--space-7) var(--space-9);
}

.page-pillar .appt-cal-note {
  margin: var(--space-9) 0 0;
  font-size: var(--text-lg-plus);
  line-height: var(--leading-normal);
  color: var(--color-on-dark-body);
  text-wrap: pretty;
}

.page-pillar .appt-cal-actions { margin-bottom: 0; }

/* --- F.7 Click-to-call bar (.fts-call-) -----------------------------------
   Phone widths only, CSS-only: no JS, no scroll listener, no interaction
   cost. Desktop placements are the hero and the closing block. The footer
   gains matching bottom room so the bar never covers the last line. */
.fts-call-bar { display: none; }

@media (max-width: 767px) {
  .fts-call-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    background: var(--color-accent);
    border-top: 1px solid var(--color-accent-hover);
    padding: var(--space-5) var(--space-7) var(--space-6);
    box-shadow: var(--shadow-on-dark);
  }

  .fts-call-link {
    font-size: var(--text-lead);
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--color-on-dark-strong);
    text-decoration: none;
  }

  .fts-call-hours {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    letter-spacing: var(--track-lg);
    color: var(--color-on-dark-strong);
  }

  .fts-call-bar ~ .site-footer .footer-legal { padding-bottom: var(--space-23); }
}

/* --- F.8 Silo navigation (.page-pillar alias) -----------------------------
   The Tier 3 batch defined .silo- under .page-sub. This silo closes between
   three Tier 2 pages, so the same pattern is restated under .page-pillar.
   Declarations are identical to S.8 on purpose: one pattern, two page
   layers. Pages that do not use the classes are unaffected. */
.page-pillar .s-silo {
  background: var(--color-bg);
  border-top: 1px solid var(--color-border-faint);
  border-bottom: 1px solid var(--color-border-faint);
}

.page-pillar .s-silo .wrap {
  padding-top: var(--space-22);
  padding-bottom: var(--space-22);
}

.page-pillar .silo-nav-title {
  margin: 0 0 var(--space-13);
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-heading);
}

.page-pillar .silo-nav-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(258px, 100%), 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--color-border);
  border: 1px solid var(--color-border);
}

.page-pillar .silo-nav-list > li { display: flex; }

.page-pillar .silo-link {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--color-surface);
  padding: var(--space-12) var(--space-11) var(--space-16);
  text-decoration: none;
  transition: background var(--dur-hover) ease, transform var(--dur-hover) ease, box-shadow var(--dur-hover) ease;
}

.page-pillar .silo-link:hover,
.page-pillar .silo-link:focus-visible {
  background: var(--color-surface-warm);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  z-index: 1;
}

.page-pillar .silo-link--parent {
  background: var(--color-bg-tint-2);
  border-left: 3px solid var(--color-accent);
}

.page-pillar .silo-link-label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-4xl);
  color: var(--color-accent-hover);
  font-weight: 600;
}

.page-pillar .silo-link-title {
  font-family: var(--font-display);
  font-size: var(--text-title-sm);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-heading);
  text-wrap: balance;
}

.page-pillar .silo-link-go {
  position: absolute;
  right: var(--space-11);
  bottom: var(--space-9);
  font-family: var(--font-mono);
  font-size: var(--text-lead);
  color: var(--color-accent);
  transition: transform var(--dur-hover) ease;
}

.page-pillar .silo-link:hover .silo-link-go,
.page-pillar .silo-link:focus-visible .silo-link-go { transform: translateX(5px); }

/* --- F.9 Responsive --------------------------------------------------------
   Mirrors the 900px contract this file already sets for the pillar, one step
   down from the wider desktop rhythm above. */
@media (max-width: 900px) {
  .page-pillar .s-help .wrap,
  .page-pillar .s-boundary .wrap,
  .page-pillar .s-run .wrap,
  .page-pillar .s-fits .wrap,
  .page-pillar .s-modules .wrap,
  .page-pillar .s-audience .wrap,
  .page-pillar .s-instructor .wrap,
  .page-pillar .s-who .wrap,
  .page-pillar .s-happens .wrap,
  .page-pillar .s-prepare .wrap,
  .page-pillar .s-about .wrap {
    padding-top: var(--space-22);
    padding-bottom: var(--space-22);
  }

  .page-pillar .s-help .exhibit-thread,
  .page-pillar .s-help .exhibit-thread--short,
  .page-pillar .s-boundary .exhibit-thread,
  .page-pillar .s-run .exhibit-thread,
  .page-pillar .s-fits .exhibit-thread,
  .page-pillar .s-modules .exhibit-thread,
  .page-pillar .s-modules .exhibit-thread--short,
  .page-pillar .s-audience .exhibit-thread,
  .page-pillar .s-instructor .exhibit-thread,
  .page-pillar .s-who .exhibit-thread,
  .page-pillar .s-who .exhibit-thread--short,
  .page-pillar .s-happens .exhibit-thread,
  .page-pillar .s-prepare .exhibit-thread,
  .page-pillar .s-about .exhibit-thread { margin-top: calc(-1 * var(--space-22)); }

  .page-pillar .s-silo .wrap {
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
  }

  .page-pillar .section-h3 { margin-top: var(--space-18); }
}

@media (max-width: 600px) {
  .page-pillar .appt-who { padding: var(--space-11) var(--space-9) var(--space-12); }
  .page-pillar .appt-cal-panel { padding: var(--space-11); }
  .page-pillar .appt-cal-row dt { width: 100%; }
  .page-pillar .silo-link { padding: var(--space-11) var(--space-9) var(--space-15); }
  .page-pillar .silo-link-go { right: var(--space-9); bottom: var(--space-7); }
}

/* --- F.10 Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .page-pillar .silo-link,
  .page-pillar .silo-link-go { transition: none; }

  .page-pillar .silo-link:hover,
  .page-pillar .silo-link:focus-visible { transform: none; }

  .page-pillar .silo-link:hover .silo-link-go,
  .page-pillar .silo-link:focus-visible .silo-link-go { transform: none; }
}

/* --- F.11 Ground correction -----------------------------------------------
   /family-tech-support/ runs .s-voice (tinted, from block C) straight into
   .s-fits. Two tinted grounds in a row flatten the rhythm there, so the
   link-card section takes the white ground instead. Stated here, after F.1,
   rather than by editing F.1 in place. */
.page-pillar .s-fits { background: var(--color-bg); }


/* ==========================================================================
   APPENDED BLOCK — DIGITAL FORENSICS CORE SILO (Tier 2)

     /digital-forensics-services/                      (silo pillar)
     /digital-forensics-lab/
     /private-investigations-into-digital-incidents/
     /background-checks/
     /missing-person-digital-investigation/

   APPEND-ONLY. Nothing above this line was edited, reordered or removed.

   These five pages are siblings of the approved Tier 2 template and reuse its
   vocabulary wholesale: .page-hero-*, .aeo-nugget, .prose, .chip, .callout,
   .stage-*, .cred-* (as the six-step process accordion), .quote-block,
   .link-card-*, .faq-*, .hex-divider and .cta-*. What is added below is only
   what did not already exist:

     D.1  flow and grounds for the two section classes this silo needs
          (.s-quote, .s-silo) plus the margin contracts for primitives
          appearing in sections that did not previously carry them
     D.2  .section-h3 promoted to the .page-pillar scope (it existed only
          under .page-sub, and three of these pages carry H3s inside a
          section)
     D.3  .silo-* navigation promoted to the .page-pillar scope, so the
          Digital Forensics silo closes exactly as the Expert Witness Tier 3
          pages do
     D.4  .enetsec-urgent, the no-JavaScript urgent contact path the approved
          copy mandates on /missing-person-digital-investigation/
     D.5  responsive, print and reduced-motion contracts for the above

   Every var() below is defined in site.css section 1. No new tokens.
   ========================================================================== */

/* --- D.1 Grounds, flow and margin contracts -------------------------------
   Same padding contract as .page-pillar .s-credentials et al. */
.page-pillar .s-quote .wrap,
.page-pillar .s-silo .wrap {
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
}

.page-pillar .s-quote { background: var(--color-bg); }

.page-pillar .s-silo {
  background: var(--color-bg);
  border-top: 1px solid var(--color-border-faint);
  border-bottom: 1px solid var(--color-border-faint);
}

/* A prose block that directly follows a section heading. The .page-sub layer
   already carries this contract; these pages need the same one. */
.page-pillar .section-title + .prose,
.page-pillar .section-lede + .prose { margin-top: var(--space-14); }

/* Primitives used in sections that did not previously host them. */
.page-pillar .s-process .cred-stack { margin-top: var(--space-19); }

.page-pillar .s-process .chip-row,
.page-pillar .s-advisory .chip-row { margin-top: var(--space-16); }

.page-pillar .s-process .callout,
.page-pillar .s-advisory .callout,
.page-pillar .s-sources .callout { margin-top: var(--space-17); }

.page-pillar .s-matters .stage-list,
.page-pillar .s-sources .stage-list { margin-top: var(--space-19); }

/* --- D.2 Section-level H3 (.section-h3) -----------------------------------
   Identical to the .page-sub rule; only the scope differs. */
.page-pillar .section-h3 {
  margin: var(--space-18) 0 var(--space-9);
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-heading);
}

.page-pillar .band-dark .section-h3 { color: var(--color-on-dark-strong); }

/* --- D.3 Silo navigation (.silo-) -----------------------------------------
   Closes the silo: the pillar links down to all four children, each child
   links back up to the pillar and sideways to its three siblings. Visually
   identical to the Tier 3 treatment in S.8 so the two silos read as one
   system; only the scope differs. */
.page-pillar .silo-nav-title {
  margin: 0 0 var(--space-13);
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-heading);
}

.page-pillar .silo-nav-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(258px, 100%), 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--color-border);
  border: 1px solid var(--color-border);
}

.page-pillar .silo-nav-list > li { display: flex; }

.page-pillar .silo-link {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--color-surface);
  padding: var(--space-12) var(--space-11) var(--space-16);
  text-decoration: none;
  transition: background var(--dur-hover) ease, transform var(--dur-hover) ease, box-shadow var(--dur-hover) ease;
}

.page-pillar .silo-link:hover,
.page-pillar .silo-link:focus-visible {
  background: var(--color-surface-warm);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  z-index: 1;
}

.page-pillar .silo-link--parent {
  background: var(--color-bg-tint-2);
  border-left: 3px solid var(--color-accent);
}

.page-pillar .silo-link-label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-4xl);
  color: var(--color-accent-hover);
  font-weight: 600;
}

.page-pillar .silo-link-title {
  font-family: var(--font-display);
  font-size: var(--text-title-sm);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-heading);
  text-wrap: balance;
}

.page-pillar .silo-link-go {
  position: absolute;
  right: var(--space-11);
  bottom: var(--space-9);
  font-family: var(--font-mono);
  font-size: var(--text-lead);
  color: var(--color-accent);
  transition: transform var(--dur-hover) ease;
}

.page-pillar .silo-link:hover .silo-link-go,
.page-pillar .silo-link:focus-visible .silo-link-go { transform: translateX(5px); }

/* --- D.4 Urgent contact path (.enetsec-urgent) ----------------------------
   /missing-person-digital-investigation/. The approved copy requires that the
   primary engagement on this page be a telephone path and not a form, that it
   sit directly beneath the H1, that it repeat at the page foot, and that it
   become a fixed, non-dismissible bar on narrow viewports. There is no
   JavaScript here at all, so it works before the page has finished loading.
   The call target is a 56px minimum tap area. */
.page-pillar .enetsec-urgent {
  margin: var(--space-16) 0 0;
  max-width: 560px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-left: 3px solid var(--color-accent);
  padding: var(--space-11) var(--space-12);
  box-shadow: var(--shadow-card-sm);
}

.page-pillar .enetsec-urgent-first {
  margin: 0 0 var(--space-7);
  font-family: var(--font-mono);
  font-size: var(--text-md-plus);
  letter-spacing: var(--track-md);
  font-weight: 600;
  color: var(--color-accent-hover);
  text-transform: uppercase;
}

.page-pillar .enetsec-urgent-cta {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
}

.page-pillar .enetsec-urgent-hours {
  margin: var(--space-7) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm-plus);
  letter-spacing: var(--track-lg);
  color: var(--color-text);
}

.page-pillar .s-cta .enetsec-urgent {
  background: transparent;
  border-color: var(--color-border-dark);
  box-shadow: none;
}

.page-pillar .s-cta .enetsec-urgent-first { color: var(--color-accent); }
.page-pillar .s-cta .enetsec-urgent-hours { color: var(--color-on-dark-body); }

/* --- D.5 Responsive, print and reduced motion ----------------------------- */
@media (max-width: 900px) {
  .page-pillar .s-quote .wrap,
  .page-pillar .s-silo .wrap {
    padding-top: var(--space-21);
    padding-bottom: var(--space-21);
  }
}

@media (max-width: 768px) {
  .page-pillar .enetsec-urgent--fixed {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    margin: 0;
    max-width: none;
    border: none;
    border-top: 1px solid var(--color-border-plate);
    background: var(--color-surface);
    padding: var(--space-5) var(--gutter) calc(var(--space-5) + env(safe-area-inset-bottom));
    text-align: center;
  }

  .page-pillar .enetsec-urgent--fixed .enetsec-urgent-hours { display: none; }

  /* Reserve the bar's height so the page foot is never covered by it. */
  body:has(.enetsec-urgent--fixed) main { padding-bottom: 150px; }
}

@media (max-width: 600px) {
  .page-pillar .silo-link { padding: var(--space-11) var(--space-9) var(--space-15); }
  .page-pillar .silo-link-go { right: var(--space-9); bottom: var(--space-7); }
  .page-pillar .enetsec-urgent { padding: var(--space-9); }
}

/* The brief for /missing-person-digital-investigation/ asks for a printable
   first-hours card. Printing the page yields exactly that: site chrome and
   every other section are suppressed, so the six actions and the telephone
   number come out on one clean page. No print button and no script needed. */
@media print {
  body:has(.enetsec-firsthours) .site-header,
  body:has(.enetsec-firsthours) .site-footer,
  body:has(.enetsec-firsthours) .hex-divider,
  body:has(.enetsec-firsthours) main > section:not(.enetsec-firsthours),
  body:has(.enetsec-firsthours) .enetsec-urgent--fixed { display: none; }

  .page-pillar .enetsec-firsthours .exhibit { display: none; }
  .page-pillar .enetsec-firsthours .wrap { padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .page-pillar .silo-link,
  .page-pillar .silo-link-go { transition: none; }

  .page-pillar .silo-link:hover,
  .page-pillar .silo-link:focus-visible { transform: none; }

  .page-pillar .silo-link:hover .silo-link-go,
  .page-pillar .silo-link:focus-visible .silo-link-go { transform: none; }
}

/* ==========================================================================
   PART C — HERO INSTRUMENT SYSTEM
   Added 2026-10-04.

   The problem this solves: every page below the homepage had a purely
   typographic hero. Nineteen service pages in a row of kicker / title /
   lede / nugget / buttons read as one page repeated, and the silos were
   indistinguishable above the fold.

   The fix is one instrument per silo, not one per page. Five signatures:

     .instr--register   Expert Witness & Litigation   deposition tally
     .instr--hash       Digital Forensics             SHA-256 verification
     .instr--decay      Incident Response             volatile-evidence ramp
     .instr--sequence   Reputation & Removal          removal sequence
     .instr--doors      Individuals & Families        entry points

   Pages in the same silo share an instrument, so the silo is legible at a
   glance and a visitor moving between siblings sees one family.

   Rules this system obeys:
   - No photography. None exists that can be published.
   - No invented numbers. Every figure shown is sourced copy already on the
     page. The decay ramp is deliberately ORDINAL, not percentage, because
     retention percentages would be fabricated and an expert witness does
     not publish fabricated figures.
   - No JavaScript. Pure CSS, present in the DOM, works with JS off.
   - No new tokens. Everything below resolves against site.css.
   -------------------------------------------------------------------------- */

/* --- C.1 Hero layout with instrument -------------------------------------- */

.page-hero--instr { max-width: none; }
.page-hero-copy { min-width: 0; max-width: 940px; }

@media (min-width: 1060px) {
  .page-hero--instr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 392px;
    column-gap: var(--space-22);
    align-items: start;
  }
  .page-hero--instr .page-hero-copy { max-width: none; }
  .page-hero--instr .page-hero-title { max-width: 18ch; }
  .page-hero--instr .page-hero-lede { max-width: 38ch; }
}

/* --- C.2 Instrument shell -------------------------------------------------- */

.instr {
  position: relative;
  margin: var(--space-11) 0 0;
  padding: var(--space-13) var(--space-14) var(--space-14);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-card);
}

@media (min-width: 1060px) {
  .instr { margin-top: var(--space-4); }
}

.instr::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 56px;
  height: 3px;
  background: var(--color-accent);
}

.instr-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid var(--color-border-faint);
}

.instr-label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: var(--track-5xl);
  color: var(--color-heading);
}

.instr-ref {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-2xl);
  color: var(--color-text);
}

.instr-body { margin-top: var(--space-12); }

.instr-foot {
  margin: var(--space-12) 0 0;
  padding-top: var(--space-7);
  border-top: 1px solid var(--color-border-faint);
  font-family: var(--font-mono);
  font-size: var(--text-md);
  letter-spacing: var(--track-sm);
  line-height: var(--leading-normal);
  color: var(--color-text);
}

/* --- C.3 Register: deposition tally (Expert Witness & Litigation) ---------- */

.instr-figure {
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
  margin: 0;
}

.instr-figure-num {
  font-family: var(--font-display);
  font-size: var(--text-stat);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-heading);
}

.instr-figure-unit {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: var(--track-4xl);
  color: var(--color-accent-hover);
}

.instr-tally {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--space-4) var(--space-3);
  margin-top: var(--space-13);
}

.instr-tally i {
  display: block;
  width: 2px;
  height: 26px;
  background: var(--color-ink-mid);
  justify-self: center;
}

.instr-scale {
  display: flex;
  justify-content: space-between;
  margin: var(--space-9) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-faint);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-2xl);
  color: var(--color-text);
}

/* --- C.4 Hash: acquisition verification (Digital Forensics) ---------------- */

.instr-hash-row + .instr-hash-row { margin-top: var(--space-11); }

.instr-hash-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--track-4xl);
  color: var(--color-accent-hover);
}

.instr-hash-val {
  display: block;
  margin-top: var(--space-3);
  padding: var(--space-5) var(--space-6);
  background: var(--color-bg-plate);
  border-left: 2px solid var(--color-border-plate);
  font-family: var(--font-mono);
  font-size: var(--text-md);
  line-height: 1.7;
  letter-spacing: var(--track-xs);
  color: var(--color-ink-mid);
  word-break: break-all;
}

.instr-hash-state {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin: var(--space-12) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: var(--track-4xl);
  color: var(--color-heading);
}

.instr-hash-state::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  background: var(--color-accent);
  border-radius: var(--radius-circle);
  box-shadow: 0 0 0 4px var(--color-accent-wash-2);
}

/* --- C.5 Decay: volatile evidence ramp (Incident Response) ----------------- */

.instr-decay-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.instr-decay-row + .instr-decay-row { margin-top: var(--space-11); }

.instr-decay-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
}

.instr-decay-t {
  flex: none;
  width: 52px;
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: var(--track-2xl);
  color: var(--color-heading);
}

.instr-decay-k {
  flex: 1 1 auto;
  font-family: var(--font-mono);
  font-size: var(--text-md);
  letter-spacing: var(--track-sm);
  color: var(--color-text);
}

.instr-decay-s {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--track-2xl);
  color: var(--color-accent-hover);
}

.instr-decay-bar {
  display: block;
  margin-top: var(--space-4);
  height: 6px;
  background: var(--color-bg-plate);
}

.instr-decay-bar span {
  display: block;
  height: 100%;
  width: var(--fill, 100%);
  background: var(--color-accent);
}

.instr-decay-row:nth-child(n + 2) .instr-decay-bar span { background: var(--color-accent-tint); }
.instr-decay-row:nth-child(n + 3) .instr-decay-bar span { background: var(--color-border-hard); }

/* --- C.6 Sequence: removal order of operations (Reputation & Removal) ------
   Lighter register by silo decision: no accent fills, no dark ground. The
   rail is a line, not a bar chart. This silo is read by people in distress
   and the page should not shout at them. */

.instr--sequence { box-shadow: var(--shadow-card-xs); }

.instr-seq {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--space-15);
  position: relative;
}

.instr-seq::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--color-border-strong);
}

.instr-seq-step { position: relative; }
.instr-seq-step + .instr-seq-step { margin-top: var(--space-13); }

.instr-seq-step::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-15) + 1px);
  top: 5px;
  width: 9px;
  height: 9px;
  background: var(--color-surface);
  border: 2px solid var(--color-accent-hover);
  border-radius: var(--radius-circle);
}

.instr-seq-name {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: var(--track-4xl);
  color: var(--color-heading);
}

.instr-seq-text {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

/* --- C.7 Doors: entry points (Individuals & Families) ---------------------
   Carries the homepage door motif into the warmest silo, scoped to the
   situations this silo actually handles. */

.instr--doors { background: var(--color-surface-warm); }

.instr-doors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
}

.instr-door {
  padding: var(--space-9) var(--space-8) var(--space-10);
  background: var(--color-surface);
}

.instr-door-no {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--track-3xl);
  color: var(--color-accent-hover);
}

.instr-door-text {
  display: block;
  margin-top: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-base-plus);
  line-height: var(--leading-snug);
  color: var(--color-heading);
}

/* --- C.8 Narrow screens ---------------------------------------------------- */

@media (max-width: 1059px) {
  .instr {
    max-width: 520px;
    margin-top: var(--space-19);
  }
}

@media (max-width: 420px) {
  .instr { padding: var(--space-11) var(--space-9) var(--space-11); }
  .instr-tally { gap: var(--space-3) var(--space-2); }
  .instr-tally i { height: 22px; }
  .instr-doors { grid-template-columns: minmax(0, 1fr); }
  .instr-head { flex-wrap: wrap; }
}

/* ==========================================================================
   PART D — ENTITY PAGE (.page-entity)
   /about-us/wanderson-castilho/ — the canonical Person entity.
   Inherits the whole .page-sub layer; only the components below are new.
   ========================================================================== */

/* --- D.1 Portrait instrument ---------------------------------------------
   The sixth instrument in the hero system, and the only one that carries a
   photograph, because the portrait is the one real image asset we hold.
   It lives here and nowhere else: on a service page the silo instrument
   does more work than a headshot. */

.instr--portrait { padding-bottom: var(--space-12); }

.instr-portrait-img {
  display: block;
  width: 100%;
  height: auto;
  /* The shared portrait asset carries 56px of empty ground below the
     subject. Crop it HERE, on this element, rather than editing the file:
     the homepage hero is approved against the asset as it stands and a
     shared file is not the place to fix a one-page framing problem. */
  aspect-ratio: 428 / 669;
  object-fit: cover;
  object-position: top center;
  background: var(--color-bg-plate);
  border: 1px solid var(--color-border-plate);
  filter: grayscale(0.18) contrast(1.04);
}

.instr-portrait-name {
  margin: var(--space-11) 0 0;
  font-family: var(--font-display);
  font-size: var(--text-title-sm);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-heading);
}

.instr-portrait-role {
  margin: var(--space-3) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-md);
  letter-spacing: var(--track-lg);
  color: var(--color-accent-hover);
}

/* --- D.2 Shelf: published books ------------------------------------------
   The image brief calls for an overhead shot of the four covers. Those
   files are pending the Canva pull, so the shelf is typographic. When the
   covers land, a cover image slots in beside .shelf-no without a layout
   change. */

.shelf {
  list-style: none;
  margin: var(--space-19) 0 0;
  padding: 0;
  counter-reset: none;
}

.shelf-item {
  display: grid;
  grid-template-columns: 44px 92px minmax(0, 1fr);
  gap: var(--space-9);
  padding: var(--space-15) 0;
  border-top: 1px solid var(--color-border);
}

.shelf-item:last-child { border-bottom: 1px solid var(--color-border); }

.shelf-no {
  font-family: var(--font-mono);
  font-size: var(--text-title-sm);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--track-xs);
  color: var(--color-accent-hover);
}

.shelf-meta {
  margin: var(--space-4) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-md);
  letter-spacing: var(--track-2xl);
  color: var(--color-text);
}

.shelf-text {
  margin: var(--space-8) 0 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}

.shelf-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: var(--track-lg);
  color: var(--color-accent-hover);
  text-decoration: none;
  border-bottom: 1px solid var(--color-accent-wash-4);
  transition: border-color var(--dur-hover) ease;
}

.shelf-link:hover,
.shelf-link:focus-visible { border-bottom-color: var(--color-accent); }

/* --- D.3 Citation list ---------------------------------------------------- */

.cite-list {
  list-style: none;
  margin: var(--space-19) 0 0;
  padding: 0;
}

.cite-item {
  display: grid;
  grid-template-columns: 190px 110px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: baseline;
  padding: var(--space-11) 0;
  border-bottom: 1px solid var(--color-border-faint);
}

.cite-item:first-child { border-top: 1px solid var(--color-border-faint); }

.cite-src {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: var(--track-3xl);
  color: var(--color-heading);
}

.cite-date {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  letter-spacing: var(--track-2xl);
  color: var(--color-accent-hover);
}

.cite-text {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

/* --- D.4 Entity page rhythm ----------------------------------------------- */

.page-entity .s-credentials .wrap,
.page-entity .s-practice .wrap,
.page-entity .s-testimony .wrap,
.page-entity .s-service .wrap,
.page-entity .s-books .wrap,
.page-entity .s-rose .wrap,
.page-entity .s-press .wrap,
.page-entity .s-where .wrap {
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
}

.page-entity .callout { margin-top: var(--space-17); }
.page-entity .chip-row { margin-top: var(--space-17); }
.page-entity .silo-nav { margin-top: var(--space-21); }

/* Cover thumbnail column on the shelf, added when the real cover art
   arrived on 12 October. */
.shelf-cover { display: block; }

.shelf-cover picture { display: block; }

.shelf-cover-img {
  display: block;
  width: 92px;
  height: auto;
  background: var(--color-bg-plate);
  border: 1px solid var(--color-border);
}

@media (max-width: 700px) {
  .cite-item { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .shelf-item { grid-template-columns: 34px 68px minmax(0, 1fr); gap: var(--space-6); }
  .shelf-cover-img { width: 68px; }
}

/* The entity hero's portrait column is taller than the copy stack, so the
   page intro sits inside the copy column rather than below the grid. */
.page-entity .page-hero--instr .page-intro {
  margin-top: var(--space-20);
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-border);
}

/* ==========================================================================
   PART E — HERO INSTRUMENTS, SECOND SET
   Three more signatures for the silos completed in the final batch. Same
   rules as Part C: no photography, no invented figures, no JavaScript.
   /faq/, /our-policies/ and /code-of-ethics-business-conduct/ deliberately
   carry NO instrument. They are reference pages and a graphic beside the
   title would be decoration, not information.
   ========================================================================== */

/* --- E.1 Coverage: where the bench is (Location silo) ---------------------- */

.instr-geo-block + .instr-geo-block {
  margin-top: var(--space-12);
  padding-top: var(--space-11);
  border-top: 1px solid var(--color-border-faint);
}

.instr-geo-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--track-4xl);
  color: var(--color-accent-hover);
}

.instr-geo-addr {
  margin: var(--space-6) 0 0;
  font-family: var(--font-display);
  font-size: var(--text-base-plus);
  font-style: normal;
  line-height: var(--leading-snug);
  color: var(--color-heading);
}

.instr-geo-list {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
}

.instr-geo-list li {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) 0;
  font-family: var(--font-mono);
  font-size: var(--text-md);
  letter-spacing: var(--track-sm);
  color: var(--color-text-strong);
}

.instr-geo-list li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  background: var(--color-accent);
}

/* --- E.2 Ledger: the record (About) --------------------------------------- */

.instr-ledger {
  list-style: none;
  margin: 0;
  padding: 0;
}

.instr-ledger-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--space-7);
  align-items: baseline;
  padding: var(--space-9) 0;
  border-bottom: 1px solid var(--color-border-faint);
}

.instr-ledger-row:first-child { border-top: 1px solid var(--color-border-faint); }

.instr-ledger-when {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: var(--track-2xl);
  color: var(--color-accent-hover);
}

.instr-ledger-what {
  font-family: var(--font-body);
  font-size: var(--text-base-plus);
  line-height: var(--leading-snug);
  color: var(--color-heading);
}

/* --- E.3 Intake: preserve before you call (Contact) -----------------------
   Calmer shell. Somebody reading this page is usually mid-incident. */

.instr--intake { box-shadow: var(--shadow-card-xs); }

.instr-intake {
  list-style: none;
  margin: 0;
  padding: 0;
}

.instr-intake-row {
  display: grid;
  /* 46px could not hold CONCLUSION at this tracking and the verb ran into
     the sentence beside it. */
  grid-template-columns: 78px minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}

.instr-intake-row + .instr-intake-row {
  margin-top: var(--space-11);
  padding-top: var(--space-11);
  border-top: 1px solid var(--color-border-faint);
}

.instr-intake-verb {
  font-family: var(--font-mono);
  font-size: var(--text-sm-plus);
  font-weight: 600;
  letter-spacing: var(--track-lg);
  line-height: 1.5;
  color: var(--color-accent-hover);
  overflow-wrap: break-word;
}

.instr-intake-text {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--color-text-strong);
}

/* ===== page additions: /about-us/ (final batch) ===== */
/* ==========================================================================
   /about-us/ — page-scoped additions

   NONE. The page needed no new CSS.

   /about-us/ is built entirely from the existing vocabulary:

     .page-hero, .page-hero-kicker/-title/-actions/-meta, .aeo-nugget,
     .page-intro, .breadcrumb, .exhibit, .section-title--light/--dark,
     .prose, .prose--dark, .chip-row / .chip / .chip--accent,
     .stage-list / .stage / .stage-no / .stage-body / .stage-title,
     .callout / .callout-kicker / .callout-text--emphatic, .tick--tl,
     .silo-nav / .silo-nav-title / .silo-nav-list / .silo-link /
     .silo-link--parent / .silo-link-label / -title / -go,
     .link-card-grid / .link-card / .link-card-no / -title / -text / -go,
     .faq / .faq-item / .faq-q / .faq-no / .faq-text / .faq-sign / .faq-a,
     .hex-divider, .cta-title / .cta-text / .cta-routes / .cta-actions /
     .cta-trust, .btn--primary / --ghost / --onDark / --lg, .band-plain,
     .band-dots, .band-dark, .wrap, .wrap--narrow.

   The body class is `page-sub page-entity`, so the whole .page-sub layer
   plus PART D of pillar.css already applies, including the entity section
   rhythm on .s-credentials, .s-practice, .s-testimony, .s-service and
   .s-where, which are the section classes this page reuses.

   The hero is written plain. tools/apply-instruments.js wraps it in
   .page-hero-copy and injects the `ledger` instrument for this slug.

   This file is intentionally rule-free. Nothing to merge.
   ========================================================================== */

/* ===== page additions: /code-of-ethics-business-conduct/ (final batch) ===== */
/* ==========================================================================
   /code-of-ethics-business-conduct/ — reference document additions
   Scoped to .page-sub plus the .coe- prefix, which no other page uses. Same
   restraint as /our-policies/: an article number, a refusal stack, nothing
   else. Everything else reuses existing primitives (.page-hero-*,
   .aeo-nugget, .section-*, .prose, .callout, .cta-actions, .band-*).
   Every var() below is defined in the :root block of site.css. No new tokens.
   ========================================================================== */

/* --- E.1 Article number (.coe-article) -----------------------------------
   The companion to .pol-clause on /our-policies/, kept as its own prefixed
   rule so the two documents can diverge without touching each other. */
.page-sub .coe-article {
  margin: 0 0 var(--space-7);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-5xl);
  color: var(--color-accent-hover);
  max-width: 68ch;
}

/* --- E.2 Article rhythm --------------------------------------------------- */
.page-sub .s-coe > .wrap {
  padding-top: var(--space-19);
  padding-bottom: var(--space-19);
}

.page-sub .s-coe .section-title { max-width: 28ch; }
.page-sub .s-coe .section-lede { font-size: var(--text-lead); max-width: 66ch; }
.page-sub .s-coe .section-title + .prose,
.page-sub .s-coe .section-lede + .prose { margin-top: var(--space-13); }
.page-sub .s-coe .prose { max-width: 68ch; }

.page-sub .s-coe-close > .wrap { padding-bottom: var(--space-22); }
.page-sub .coe-actions { margin-top: var(--space-16); }

/* --- E.3 The refusals (.coe-refusal-) ------------------------------------
   Five statements, each a bolded lead sentence and the explanation that makes
   it credible. The accent rule on the left is the only ornament on the page,
   and it is there because this is the section a reader should be able to find
   by scrolling without reading. */
.page-sub .coe-refusals {
  margin-top: var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.page-sub .coe-refusal {
  padding: var(--space-13) var(--space-14);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
}

.page-sub .coe-refusal-no {
  margin: 0 0 var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-5xl);
  color: var(--color-accent-hover);
}

.page-sub .coe-refusal .prose { max-width: 66ch; }

.page-sub .coe-refusal .prose strong {
  display: block;
  margin-bottom: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-title-sm);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-heading);
}

@media (max-width: 640px) {
  .page-sub .coe-refusal { padding: var(--space-11) var(--space-9); }
}

/* ===== page additions: /contact-us/ (final batch) ===== */
/* ==========================================================================
   /contact-us/ — page-scoped additions (.cu-)
   Appended to pillar.css by the orchestrator. Every selector is prefixed
   .cu- and scoped under .page-sub so it cannot reach any other page.

   Two components only:
     CU.1  .cu-office-   the NAP + contact-routes block
     CU.2  .cu-path-     the four intake-path cards

   Everything else on the page reuses the existing vocabulary: .page-hero,
   .aeo-nugget, .exhibit, .section-title, .prose, .faq, .cta-, .chip-,
   .hex-divider and the global .fts-call- click-to-call bar.

   No new custom properties. Every var() below is defined in site.css :root.
   ========================================================================== */

/* --- CU.1 Office block ----------------------------------------------------
   Address on the left, the four working contact routes on the right. The
   routes are a <dl>, because label/value is what they are. Collapses to one
   column at 760px. */

.page-sub .cu-office {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 1px;
  margin-top: var(--space-19);
  background: var(--color-border);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card-sm);
}

.page-sub .cu-office-panel {
  background: var(--color-surface);
  padding: var(--space-15) var(--space-14);
}

.page-sub .cu-office-panel--addr { background: var(--color-bg-tint-2); }

.page-sub .cu-office-label {
  display: block;
  margin: 0 0 var(--space-9);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--track-4xl);
  color: var(--color-accent-hover);
}

.page-sub .cu-office-addr {
  font-style: normal;
  font-family: var(--font-display);
  font-size: var(--text-quote);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--color-heading);
}

.page-sub .cu-office-name {
  /* was an inline <span>, so the margin below did nothing and the business
     name ran straight into the street address on one line */
  display: block;
  margin: 0 0 var(--space-5);
  font-size: var(--text-title-sm);
  font-weight: 700;
  line-height: 1.25;
}

.page-sub .cu-office-geo {
  display: block;
  margin-top: var(--space-9);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--track-lg);
  color: var(--color-text);
}

.page-sub .cu-detail { margin: 0; }

.page-sub .cu-detail-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: var(--space-9);
  align-items: baseline;
  padding: var(--space-9) 0;
  border-top: 1px solid var(--color-border-faint);
}

.page-sub .cu-detail-row:first-child { border-top: 0; padding-top: 0; }
.page-sub .cu-detail-row:last-child { padding-bottom: 0; }

.page-sub .cu-detail-k {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: var(--track-2xl);
  color: var(--color-text);
}

.page-sub .cu-detail-v {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--leading-snug);
  color: var(--color-text-strong);
  text-wrap: pretty;
}

.page-sub .cu-detail-v--lead {
  font-family: var(--font-display);
  font-size: var(--text-title-sm);
  font-weight: 700;
  line-height: 1.2;
}

.page-sub .cu-detail-v a {
  color: var(--color-accent-hover);
  text-decoration: none;
  border-bottom: 1px solid var(--color-accent-wash-4);
  transition: border-color var(--dur-hover) ease, color var(--dur-hover) ease;
}

.page-sub .cu-detail-v a:hover,
.page-sub .cu-detail-v a:focus-visible {
  color: var(--color-accent-hover);
  border-bottom-color: var(--color-accent);
}

/* --- CU.2 Intake paths ----------------------------------------------------
   Four cards, one per buyer type. Not a form: the approved four-path form
   needs a POST endpoint that is not provisioned, so each card states what to
   have ready and routes to the telephone. Two of the four also carry a link
   to the service page named in the approved copy. */

.page-sub .cu-path-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 1px;
  margin-top: var(--space-19);
  background: var(--color-border);
  border: 1px solid var(--color-border);
}

.page-sub .cu-path {
  position: relative;
  background: var(--color-surface);
  padding: var(--space-15) var(--space-14) var(--space-16);
}

.page-sub .cu-path-no {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: var(--track-4xl);
  color: var(--color-accent-hover);
}

.page-sub .cu-path-title {
  margin: var(--space-7) 0 var(--space-8);
  font-family: var(--font-display);
  font-size: var(--text-title-sm);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-heading);
  text-wrap: balance;
}

.page-sub .cu-path-text {
  margin: 0;
  max-width: 54ch;
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  text-wrap: pretty;
}

.page-sub .cu-path-text + .cu-path-text { margin-top: var(--space-7); }

.page-sub .cu-path-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-11);
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: var(--track-lg);
  color: var(--color-accent-hover);
  text-decoration: none;
  border-bottom: 1px solid var(--color-accent-wash-4);
  transition: border-color var(--dur-hover) ease;
}

.page-sub .cu-path-link:hover,
.page-sub .cu-path-link:focus-visible { border-bottom-color: var(--color-accent); }

/* --- CU.3 Responsive ------------------------------------------------------ */

@media (max-width: 760px) {
  .page-sub .cu-office { grid-template-columns: minmax(0, 1fr); }

  .page-sub .cu-office-panel { padding: var(--space-13) var(--space-11); }

  .page-sub .cu-detail-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }

  .page-sub .cu-detail-k { letter-spacing: var(--track-lg); }

  .page-sub .cu-path { padding: var(--space-13) var(--space-11) var(--space-15); }
}

/* ===== page additions: /digital-forensics-boca-raton/ (final batch) ===== */
/* ==========================================================================
   CSS ADDITIONS — /digital-forensics-boca-raton/  (CITY PAGE, THE LAB)
   Body class: .page-pillar

   This page is built almost entirely from vocabulary that already exists in
   site.css and pillar.css: .s-hero, .page-hero-*, .aeo-nugget-*, .page-intro,
   .prose, .callout, .callout-text--emphatic, .chip-row, .chip, .quote-block,
   .quote-kicker, .quote-text, .quote-attrib, .exhibit-*, .section-title,
   .faq-*, .hex-divider, .silo-nav-*, .silo-link-*, .appt-cal-* (the static
   scheduler facade), .enetsec-urgent--fixed (the sticky mobile call bar),
   .cta-*, .tick and .btn. No new component was needed.

   The single rule below is a spacing fix, not a new component. Every var()
   in it is defined in the :root block of site.css. No new tokens.
   -------------------------------------------------------------------------- */

/* --- 1. Chip row spacing inside .s-matters (.ens-boca-chips) --------------
   pillar.css gives .chip-row a top margin inside .s-process, .s-advisory,
   .s-challenge, .s-sources, .s-structure and .s-audience, but not inside
   .s-matters, and .chip-row itself carries no intrinsic margin. Rather than
   redefine .chip-row or add a .s-matters rule that every other page in the
   repository would inherit, the gap is set on a prefixed companion class
   carried alongside .chip-row on this one element. */

.page-pillar .ens-boca-chips { margin-top: var(--space-16); }

/* ===== page additions: /digital-forensics-fort-lauderdale/ (final batch) ===== */
/* ==========================================================================
   /digital-forensics-fort-lauderdale/  —  NO NEW CSS REQUIRED
   ==========================================================================

   This file is intentionally rule-free. The page was built entirely from
   the existing vocabulary in site.css and pillar.css:

     layout / flow   .page-pillar .sec-flow > .wrap   (padding contract)
                     .s-hero, .s-faq, .s-silo, .s-cta (already padded for
                                                       .page-pillar)
     grounds         .band-dark, .band-plain (white),
                     bare section (page tint)
     primitives      .page-hero*, .aeo-nugget*, .page-intro, .prose,
                     .prose--dark, .exhibit*, .section-title(--light/--dark),
                     .section-lede(--light/--dark), .callout, .callout-kicker,
                     .tick--tl/--tr, .quote-block, .quote-kicker,
                     .quote-text, .quote-attrib, .chip, .chip--accent,
                     .chip-row, .callout--dark, .faq*, .silo-*,
                     .hex-divider*, .btn*, .cta-*, .breadcrumb*

   Section class names used on this page (.s-ftl-marine, .s-ftl-recover,
   .s-ftl-breach, .s-ftl-circuit) are flow hooks only. They carry no rules
   here and need none: `.sec-flow` supplies padding and every component
   margin the page uses. The names are prefixed `s-ftl-` so that if a later
   pass ever does need a rule, it cannot collide with another agent's work.

   No var(--token) was authored for this page, so nothing here can reference
   a token that does not exist in the :root block of site.css.
   ========================================================================== */

/* ===== page additions: /digital-forensics-south-florida/ (final batch) ===== */
/* ==========================================================================
   CSS ADDITIONS — /digital-forensics-south-florida/  (LOCATION HUB)
   Body class: .page-pillar

   Scope: every selector below is prefixed .ens-area- or .ens-silo- and every
   rule is scoped under .page-pillar. Nothing here can reach .page-home,
   .page-sub or .page-entity, and no existing class is redefined.

   Everything else on this page reuses existing vocabulary: .s-hero,
   .page-hero-*, .aeo-nugget-*, .page-intro, .prose, .chip-row, .chip,
   .exhibit-*, .section-title, .section-lede, .callout, .cv-card-*,
   .silo-nav-*, .silo-link-*, .faq-*, .hex-divider, .cta-*, .tick, .btn.

   Every var() below is defined in the :root block of site.css. No new tokens.
   -------------------------------------------------------------------------- */

/* --- 1. Service area schematic (.ens-area-) -------------------------------
   The engagement brief asks for a clickable county map. This is a SCHEMATIC
   of the I-95 corridor, not a geographic map: hand-drawn county outlines
   would be invented geometry on a site where every published figure has to
   be defensible. Inline SVG, no mapping library, no tile requests. Hover and
   focus are CSS only; the nodes are real anchors, so keyboard reach needs no
   tabindex. Interaction cost is paint only. */

.page-pillar .ens-area {
  position: relative;
  margin: var(--space-19) 0 0;
  padding: var(--space-13) var(--space-13) var(--space-14);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-card-sm);
}

.page-pillar .ens-area-cap {
  margin: 0 0 var(--space-12);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--track-5xl);
  color: var(--color-accent-hover);
}

.page-pillar .ens-area-svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.page-pillar .ens-area-band {
  fill: var(--color-bg-tint);
  stroke: var(--color-border);
  stroke-width: 1;
}

.page-pillar .ens-area-corridor {
  stroke: var(--color-border-hard);
  stroke-width: 2;
  stroke-dasharray: 4 6;
}

.page-pillar .ens-area-county {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  fill: var(--color-accent-hover);
}

.page-pillar .ens-area-axis {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.2px;
  fill: var(--color-text);
}

.page-pillar .ens-area-city {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  fill: var(--color-heading);
}

.page-pillar .ens-area-city--quiet { fill: var(--color-text-strong); }

.page-pillar .ens-area-note {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.2px;
  fill: var(--color-text);
}

.page-pillar .ens-area-dot {
  fill: var(--color-surface);
  stroke: var(--color-border-hard);
  stroke-width: 2;
}

.page-pillar .ens-area-dot--quiet { stroke: var(--color-border-plate); }

.page-pillar .ens-area-mark {
  fill: var(--color-accent);
  stroke: none;
}

.page-pillar .ens-area-hit {
  fill: transparent;
  stroke: transparent;
  stroke-width: 2;
  transition: fill var(--dur-hover) ease, stroke var(--dur-hover) ease;
}

.page-pillar .ens-area-node { cursor: pointer; }

.page-pillar .ens-area-node:hover .ens-area-hit,
.page-pillar .ens-area-node:focus-visible .ens-area-hit {
  fill: var(--color-accent-wash-2);
  stroke: var(--color-accent-hover);
}

.page-pillar .ens-area-node:hover .ens-area-dot,
.page-pillar .ens-area-node:focus-visible .ens-area-dot {
  fill: var(--color-accent);
  stroke: var(--color-accent-hover);
}

.page-pillar .ens-area-node:hover .ens-area-city,
.page-pillar .ens-area-node:focus-visible .ens-area-city { fill: var(--color-accent-hover); }

/* Default focus ring is unreliable on SVG anchors across engines, so the hit
   rectangle above carries the visible focus state. This suppresses the
   doubled ring only where that replacement is already painted. */
.page-pillar .ens-area-node:focus { outline: none; }
.page-pillar .ens-area-node:focus-visible { outline: none; }

/* Below roughly 700px the viewBox would shrink the labels under 10px, so the
   figure scrolls inside its own panel rather than the page. The anchors stay
   focusable, and focusing one scrolls it into view. */
@media (max-width: 700px) {
  .page-pillar .ens-area {
    padding: var(--space-11) var(--space-9) var(--space-12);
    overflow-x: auto;
  }
  .page-pillar .ens-area-svg { min-width: 600px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-pillar .ens-area-hit { transition: none; }
}

/* --- 2. Coverage panel spacing (.ens-coverage-card) -----------------------
   The panel is a plain .cv-card. .cv-card carries no intrinsic margin and the
   section that hosts it here, .s-voice, has no .cv-card spacing rule, so the
   gap is set on a prefixed companion class rather than by redefining .cv-card
   or by adding a rule to .s-voice that another page might inherit. */

.page-pillar .ens-coverage-card { margin-top: var(--space-19); }

/* --- 3. Silo link supporting line (.ens-silo-note) ------------------------
   The approved "Choose your city" copy gives each city a sentence of its own.
   .silo-link is a flex column with a gap, so the note needs type only. */

.page-pillar .ens-silo-note {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  text-wrap: pretty;
}

/* ===== page additions: /digital-forensics-west-palm-beach/ (final batch) ===== */
/* ==========================================================================
   /digital-forensics-west-palm-beach/  —  NO NEW CSS REQUIRED
   ==========================================================================

   This file is intentionally rule-free. The page was built entirely from
   the existing vocabulary in site.css and pillar.css:

     layout / flow   .page-pillar .sec-flow > .wrap   (padding contract)
                     .s-hero, .s-faq, .s-silo, .s-cta (already padded for
                                                       .page-pillar)
     grounds         .band-plain (white), bare section (page tint),
                     .band-dots, .band-dark
     primitives      .page-hero*, .aeo-nugget*, .page-intro, .prose,
                     .prose--dark, .exhibit*, .section-title(--light/--dark),
                     .section-lede(--light), .callout, .callout-kicker,
                     .tick--tl/--tr, .quote-block, .quote-kicker,
                     .quote-text, .quote-attrib, .faq*, .silo-*,
                     .hex-divider*, .btn*, .cta-*, .breadcrumb*

   Section class names used on this page (.s-wpb-exclusion, .s-wpb-deposition,
   .s-wpb-rebuttal, .s-wpb-circuit) are flow hooks only. They carry no rules
   here and need none: `.sec-flow` supplies padding and every component
   margin the page uses. The names are prefixed `s-wpb-` so that if a later
   pass ever does need a rule, it cannot collide with another agent's work.

   No var(--token) was authored for this page, so nothing here can reference
   a token that does not exist in the :root block of site.css.
   ========================================================================== */

/* ===== page additions: /faq/ (final batch) ===== */
/* ==========================================================================
   /faq/ — answer engine hub additions
   Scoped to .page-sub plus the .faq-jump- / .faq-cat- prefixes, which no other
   page in the build uses. Everything else on the page reuses existing
   primitives (.page-hero-*, .aeo-nugget, .faq-*, .exhibit, .section-*, .prose,
   .cta-*, .hex-divider, .band-*).
   Every var() below is defined in the :root block of site.css. No new tokens.
   ========================================================================== */

/* --- F.1 Section index (.faq-jump-) --------------------------------------
   Static stand-in for the deferred live filter: five anchors to the five
   category sections. Plain links, no JS, no state. */
.page-sub .faq-jump {
  margin-top: var(--space-17);
  padding-top: var(--space-13);
  border-top: 1px solid var(--color-border);
}

.page-sub .faq-jump-label {
  margin: 0 0 var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-5xl);
  color: var(--color-accent-hover);
}

.page-sub .faq-jump-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-sub .faq-jump-link {
  display: inline-block;
  padding: var(--space-3) var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-left: 3px solid var(--color-accent);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--dur-hover) ease, border-color var(--dur-hover) ease;
}

.page-sub .faq-jump-link:hover,
.page-sub .faq-jump-link:focus-visible {
  color: var(--color-accent-hover);
  border-color: var(--color-border-hard);
  border-left-color: var(--color-accent);
}

/* --- F.2 Category section intro (.faq-cat-intro) -------------------------
   A prose paragraph standing where a .section-lede would, for the two intros
   that carry links and therefore need prose link treatment. */
.page-sub .faq-cat-intro {
  margin-top: var(--space-8);
  max-width: 62ch;
}

/* --- F.3 Category rhythm --------------------------------------------------
   Twenty-two <details> in five stacks: the vertical rhythm is tightened one
   step from the sub-page default so the page scans as one document rather
   than five pages bolted together. */
.page-sub .s-faq-cat > .wrap {
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
}

.page-sub .s-faq-cat .exhibit-thread,
.page-sub .s-faq-cat .exhibit-thread--short { margin-top: calc(-1 * var(--space-20)); }

.page-sub .s-faq-cat .faq { margin-top: var(--space-16); }

/* An opened answer is the thing the reader came for: mark it. An inset shadow
   rather than a border, so opening a panel shifts no text sideways. */
.page-sub .faq-item[open] {
  box-shadow: inset 3px 0 0 0 var(--color-accent), var(--shadow-card-xs);
}

@media (max-width: 560px) {
  .page-sub .faq-jump-list { flex-direction: column; align-items: flex-start; }
  .page-sub .faq-jump-link { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .page-sub .faq-jump-link { transition: none; }
}

/* ===== page additions: /our-policies/ (final batch) ===== */
/* ==========================================================================
   /our-policies/ — reference document additions
   Scoped to .page-sub plus the .pol- prefix, which no other page uses.
   A policy page that looks like a sales page undermines the policy: the only
   new components here are a clause index and a clause number. Everything else
   reuses existing primitives (.page-hero-*, .aeo-nugget, .section-*, .prose,
   .callout, .cta-actions, .band-plain).
   Every var() below is defined in the :root block of site.css. No new tokens.
   ========================================================================== */

/* --- P.1 Clause index (.pol-index-) --------------------------------------
   Static stand-in for the deferred sticky rail. A numbered list, set as a
   document contents page rather than a pill row, because that is what the
   attorney reading this expects to see. */
.page-sub .pol-index {
  margin-top: var(--space-17);
  padding-top: var(--space-13);
  border-top: 1px solid var(--color-border);
}

.page-sub .pol-index-label {
  margin: 0 0 var(--space-7);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-5xl);
  color: var(--color-accent-hover);
}

.page-sub .pol-index-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pol;
  columns: 2;
  column-gap: var(--space-19);
  max-width: 68ch;
}

.page-sub .pol-index-list > li {
  counter-increment: pol;
  break-inside: avoid;
  padding: var(--space-2) 0;
}

.page-sub .pol-index-list > li::before {
  content: counter(pol, decimal-leading-zero) "  ";
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-3xl);
  color: var(--color-accent-hover);
}

.page-sub .pol-index-list a {
  font-size: var(--text-base-plus);
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-border-hard);
  transition: color var(--dur-hover) ease, text-decoration-color var(--dur-hover) ease;
}

.page-sub .pol-index-list a:hover,
.page-sub .pol-index-list a:focus-visible {
  color: var(--color-accent-hover);
  text-decoration-color: var(--color-accent);
}

/* --- P.2 Clause number (.pol-clause) -------------------------------------
   Replaces the .exhibit instrument the service pages use. One line of mono,
   no thread, no node: this document is numbered, not staged. */
.page-sub .pol-clause {
  margin: 0 0 var(--space-7);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-5xl);
  color: var(--color-accent-hover);
  max-width: 68ch;
}

/* --- P.3 Clause rhythm ----------------------------------------------------
   Long measure, generous leading, nothing competing with the text. */
.page-sub .s-pol > .wrap {
  padding-top: var(--space-19);
  padding-bottom: var(--space-19);
}

.page-sub .s-pol .section-title { max-width: 28ch; }
.page-sub .s-pol .section-lede { font-size: var(--text-lead); max-width: 66ch; }
.page-sub .s-pol .section-title + .prose { margin-top: var(--space-13); }
.page-sub .s-pol .prose { max-width: 68ch; }
.page-sub .s-pol .prose + .callout { margin-top: var(--space-16); }

.page-sub .s-pol-close > .wrap { padding-bottom: var(--space-22); }
.page-sub .pol-actions { margin-top: var(--space-16); }

@media (max-width: 720px) {
  .page-sub .pol-index-list { columns: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .page-sub .pol-index-list a { transition: none; }
}

/* ==========================================================================
   PART F — CONTACT FORM (.cf-)
   /contact-us/ only. Posts to the Pages Function at /api/contact.

   Works with JavaScript off: the Function 303s back with a hash and the
   .cf-flash blocks reveal themselves through :target. site.js then
   upgrades it to an inline fetch. No third-party script, no layout shift
   on the success state (the flash sits above the form, in flow).
   ========================================================================== */

.cf {
  margin-top: var(--space-19);
  /* A single-line name field 920px wide reads as an unfinished page. The
     form sits on its own measure inside the narrow wrap. */
  max-width: 760px;
}

/* Direct children only. Unscoped, `.cf-row + .cf-row` also matched the
   phone row inside .cf-pair, which pushed it a row-gap lower than the
   email beside it and broke the two-up alignment. */
.cf > .cf-row + .cf-row,
.cf > .cf-pair + .cf-row,
.cf > .cf-row + .cf-pair { margin-top: var(--space-16); }

.cf-pair > .cf-row + .cf-row { margin-top: 0; }

.cf-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16) var(--space-14);
}

.cf-label {
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: var(--track-3xl);
  color: var(--color-heading);
}

.cf-req,
.cf-opt {
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: var(--track-2xl);
}

.cf-req { color: var(--color-accent-hover); }
.cf-opt { color: var(--color-text); }

.cf-input {
  display: block;
  width: 100%;
  padding: var(--space-7) var(--space-9);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--text-lead);
  line-height: var(--leading-snug);
  color: var(--color-heading);
  transition: border-color var(--dur-hover) ease, box-shadow var(--dur-hover) ease;
  -webkit-appearance: none;
  appearance: none;
}

.cf-input::placeholder { color: var(--color-on-dark-faint); }

.cf-input:hover { border-color: var(--color-border-hard); }

.cf-input:focus-visible,
.cf-input:focus {
  outline: none;
  border-color: var(--color-accent-hover);
  box-shadow: 0 0 0 3px var(--color-accent-wash-2);
}

.cf-textarea {
  resize: vertical;
  min-height: 170px;
}

.cf-help {
  margin: var(--space-6) 0 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

/* Honeypot. Off-screen rather than display:none, because a bot that reads
   the stylesheet skips display:none and this one should not be skipped. */
.cf-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: var(--space-18);
}

.cf-note {
  margin: var(--space-16) 0 0;
  padding-top: var(--space-11);
  border-top: 1px solid var(--color-border-faint);
  font-family: var(--font-mono);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  letter-spacing: var(--track-xs);
  color: var(--color-text);
}

/* --- Result states -------------------------------------------------------- */

.cf-flash,
.cf-status {
  display: none;
  margin: var(--space-17) 0 0;
  padding: var(--space-12) var(--space-13);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-left: 3px solid var(--color-accent);
  font-family: var(--font-body);
  font-size: var(--text-body-plus);
  line-height: var(--leading-snug);
  color: var(--color-text-strong);
}

/* No-JS path: the Function sends the browser to #sent-ok and friends. */
.cf-flash:target { display: block; }

/* Enhanced path: site.js unhides this and writes the message into it. */
.cf-status[data-state] { display: block; }
.cf-status[data-state="bad"] { border-left-color: var(--color-ink-mid); }

.cf-flash--bad { border-left-color: var(--color-ink-mid); }

.cf-flash-label {
  display: block;
  margin-bottom: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--track-5xl);
  color: var(--color-accent-hover);
}

.cf-flash--bad .cf-flash-label { color: var(--color-ink-mid); }

.cf-flash a,
.cf-status a { color: var(--color-accent-hover); }

.cf[hidden] { display: none; }

.cf button[disabled] { opacity: 0.55; cursor: progress; }

@media (max-width: 640px) {
  .cf-pair { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   PART G — INSTRUMENT BODY PATTERNS, SECOND SET
   Added 2026-10-05.

   WHY THIS EXISTS. The first instrument system assigned one graphic per
   SILO. That meant six expert-witness pages carried an identical tally and
   five forensics pages an identical hash block, so sibling pages read as
   one template repeated. Rejected, correctly.

   The fix is one instrument per PAGE. The SHELL stays shared (.instr, head,
   body, foot) so the family still reads as one system; the BODY is unique
   to each page and drawn from that page's own content.

   Four new body patterns join the existing ones. Eleven patterns across
   twenty-five pages, never the same pattern on two adjacent siblings and
   never the same CONTENT twice.
   ========================================================================== */

/* --- G.1 Checklist: factors, tests, immediate actions --------------------- */

.instr-check { list-style: none; margin: 0; padding: 0; }

.instr-check-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}

.instr-check-row + .instr-check-row {
  margin-top: var(--space-9);
  padding-top: var(--space-9);
  border-top: 1px solid var(--color-border-faint);
}

.instr-check-mark {
  position: relative;
  top: 3px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--color-accent);
  background: var(--color-surface);
}

.instr-check-row--open .instr-check-mark {
  border-color: var(--color-border-hard);
  background: var(--color-bg-plate);
}

.instr-check-text {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--color-text-strong);
}

.instr-check-text b {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: var(--track-3xl);
  color: var(--color-heading);
  margin-bottom: var(--space-2);
}

/* --- G.2 Compare: two or three columns against one question --------------- */

.instr-cmp {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
}

.instr-cmp--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.instr-cmp--2 .instr-cmp-col { padding-left: var(--space-8); padding-right: var(--space-8); }
.instr-cmp--2 .instr-cmp-note { font-size: var(--text-base); }

.instr-cmp-col {
  padding: var(--space-9) var(--space-6) var(--space-10);
  background: var(--color-surface);
}

.instr-cmp-head {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-sm-plus);
  font-weight: 600;
  letter-spacing: var(--track-2xl);
  color: var(--color-heading);
  min-height: 2.4em;
}

.instr-cmp-val {
  display: block;
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-faint);
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: var(--track-lg);
  color: var(--color-accent-hover);
}

.instr-cmp-val--no { color: var(--color-text); }

.instr-cmp-note {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

/* --- G.3 Stack: layers of spread, or of jurisdiction ---------------------- */

.instr-stack { list-style: none; margin: 0; padding: 0; }

.instr-stack-layer {
  position: relative;
  padding: var(--space-8) var(--space-9);
  background: var(--color-bg-plate);
  border-left: 3px solid var(--color-accent);
}

.instr-stack-layer + .instr-stack-layer { margin-top: var(--space-3); }

.instr-stack-layer:nth-child(2) { margin-left: var(--space-7); border-left-color: var(--color-accent-tint); }
.instr-stack-layer:nth-child(3) { margin-left: var(--space-14); border-left-color: var(--color-border-hard); }
.instr-stack-layer:nth-child(4) { margin-left: var(--space-17); border-left-color: var(--color-border-plate); }

.instr-stack-name {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: var(--track-3xl);
  color: var(--color-heading);
}

.instr-stack-text {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

/* --- G.4 Ladder: the questions, numbered ---------------------------------- */

.instr-ladder { list-style: none; margin: 0; padding: 0; counter-reset: none; }

.instr-ladder-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: var(--space-7);
  align-items: baseline;
}

.instr-ladder-row + .instr-ladder-row {
  margin-top: var(--space-10);
  padding-top: var(--space-10);
  border-top: 1px solid var(--color-border-faint);
}

.instr-ladder-no {
  font-family: var(--font-mono);
  font-size: var(--text-lg-plus);
  font-weight: 600;
  letter-spacing: var(--track-xs);
  color: var(--color-accent-hover);
}

.instr-ladder-q {
  font-family: var(--font-display);
  font-size: var(--text-base-plus);
  line-height: var(--leading-snug);
  color: var(--color-heading);
}

@media (max-width: 420px) {
  .instr-cmp { grid-template-columns: minmax(0, 1fr); }
  .instr-stack-layer:nth-child(2),
  .instr-stack-layer:nth-child(3),
  .instr-stack-layer:nth-child(4) { margin-left: 0; }
}

/* ---- /about-us/ portraits (Oct 2026 studio set) ---------------------
   The 2021 studio frames are trimmed to the subject, so each carries its
   own aspect. Declared per file rather than cropped in CSS, because these
   assets have no dead ground to hide.                                  */
.instr-portrait-img--037 {
  aspect-ratio: 428 / 610;
  object-fit: contain;
  object-position: bottom center;
}

.page-entity .person-split {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: var(--space-13);
  align-items: start;
}

.page-entity .person-figure {
  margin: 0;
  min-width: 0;
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border);
  padding: var(--space-6);
}

.page-entity .person-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 428 / 628;
  object-fit: contain;
  object-position: bottom center;
}

@media (max-width: 860px) {
  .page-entity .person-split { grid-template-columns: 1fr; gap: var(--space-9); }
  .page-entity .person-figure { max-width: 320px; }
}