/* Low-fidelity mockup register for the engineering vertical.

   Governed by knowledge/decisions/surfaces-carry-hierarchy-not-frames:
   hierarchy comes from typography, negative space, and ink level. No frames,
   panels, cells, corner marks, ticks, or drafting motifs.

   What carries the design here instead:
   - a large scale jump between the statement and the record
   - one strict baseline the credentials all sit on
   - three ink levels standing in for every border that is not there
   - exactly one accent event on the page

   Scaffolding for judgement; ENG-003 replaces it. */

.mk {
  margin: 0;
  background: var(--bv-color-paper-bright);
  color: var(--bv-color-ink);
  font-family: var(--bv-font-body);
  -webkit-font-smoothing: antialiased;
}

.mk * { box-sizing: border-box; }

.mk-banner {
  /* Overlaid rather than stacked: this is temporary scaffolding and it must not
     shorten the hero it sits above. Removing it later changes nothing.
     Pinned to the foot, because the site header now owns the top edge. */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: baseline;
  padding: 10px clamp(20px, 4vw, 56px);
  background: var(--bv-color-ink);
  color: var(--bv-color-paper-raised);
  font-family: var(--bv-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mk-banner span { color: #b0a79f; letter-spacing: 0.06em; text-transform: none; }

/* ================= site chrome =================
   The vertical carries the landing page's header, using the same classes the
   Library reuses. The styles are scoped here rather than pulled in from
   home.css, so this page keeps loading exactly two stylesheets. Tokens are
   remapped to the --bv-* set, since case.css (which defines --ink, --paper and
   --ease-out) is not loaded here. */

.mk {
  --eng-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

.home-header {
  --header-bg: rgb(from var(--bv-color-paper-bright) r g b / 0);
  --header-bg-scrolled: rgb(from var(--bv-color-paper-bright) r g b / 0.82);
  --header-border-scrolled: rgb(from var(--bv-color-ink) r g b / 0.08);
  --header-fg: var(--bv-color-ink);
  --portal-bg: var(--bv-color-ink);
  --portal-fg: var(--bv-color-paper-bright);
  --portal-hover-bg: var(--bv-color-paper-bright);
  --portal-hover-fg: var(--bv-color-ink);
  --portal-outline: var(--bv-color-ink);
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 30px);
  padding: clamp(14px, 1.7vw, 20px) clamp(20px, 2.4vw, 30px);
  border-bottom: 1px solid transparent;
  background: var(--header-bg);
  color: var(--header-fg);
  transform: translate3d(0, 0, 0);
  transition:
    transform 760ms cubic-bezier(0.19, 1, 0.22, 1),
    background-color 420ms var(--eng-ease-out),
    border-color 420ms var(--eng-ease-out),
    color 420ms var(--eng-ease-out),
    backdrop-filter 420ms var(--eng-ease-out);
  will-change: transform, background-color;
}

body.header-scrolled .home-header {
  border-bottom-color: var(--header-border-scrolled);
  background: var(--header-bg-scrolled);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

body.header-hidden .home-header {
  transform: translate3d(0, calc(-100% - 14px), 0);
}

.home-brand,
.home-nav,
.home-menu-toggle {
  opacity: 0;
  transform: translateY(-12px);
}

body.is-loaded .home-brand { animation: engEnterSoft 760ms var(--eng-ease-out) 320ms forwards; }
body.is-loaded .home-menu-toggle { animation: engEnterSoft 760ms var(--eng-ease-out) 460ms forwards; }
body.is-loaded .home-nav { animation: engEnterSoft 760ms var(--eng-ease-out) 520ms forwards; }

@keyframes engEnterSoft {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

.home-brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--bv-font-mono);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.home-brand img {
  height: clamp(33px, 1.55vw + 27px, 57px);
  width: auto;
  object-fit: contain;
}

.home-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px clamp(18px, 1.8vw, 34px);
  width: auto;
  max-width: min(760px, calc(100vw - 260px));
  color: inherit;
  font-family: var(--bv-font-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.home-nav a {
  position: relative;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.home-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms var(--eng-ease-out);
}

.home-nav a:hover::after,
.home-nav a:focus-visible::after,
.home-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* qualified with `a`, or `.home-nav a` outranks it and the label goes ink on
   ink — the button reads as an empty black block */
.home-nav a.home-nav__portal {
  min-width: 118px;
  padding-inline: 18px;
  background: var(--portal-bg);
  color: var(--portal-fg);
  transition:
    background-color 260ms var(--eng-ease-out),
    color 260ms var(--eng-ease-out),
    transform 260ms var(--eng-ease-out);
}

.home-nav__portal::after { display: none; }

.home-nav a.home-nav__portal:hover,
.home-nav a.home-nav__portal:focus-visible {
  background: var(--portal-hover-bg);
  color: var(--portal-hover-fg);
  outline-color: var(--portal-outline);
  transform: translateY(-1px);
}

.home-menu-toggle {
  display: none;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--header-fg);
  cursor: pointer;
}

.home-menu-toggle span {
  display: block;
  width: 22px;
  height: 1px;
  background: currentColor;
  transition:
    transform 260ms var(--eng-ease-out),
    opacity 220ms var(--eng-ease-out);
}

.home-menu-toggle span + span { margin-top: 7px; }

body.nav-open .home-menu-toggle span:first-child { transform: translateY(4px) rotate(35deg); }
body.nav-open .home-menu-toggle span:last-child { transform: translateY(-4px) rotate(-35deg); }

@media (max-width: 1040px) {
  .home-nav {
    gap: 8px 16px;
    max-width: min(680px, calc(100vw - 230px));
    font-size: 11.5px;
  }
}

@media (max-width: 820px) {
  .home-header { align-items: center; }

  .home-menu-toggle {
    position: relative;
    z-index: 22;
    display: block;
    padding: 14px 8px;
  }

  .home-nav {
    position: fixed;
    top: 72px;
    left: clamp(16px, 4vw, 28px);
    right: clamp(16px, 4vw, 28px);
    z-index: 21;
    display: grid;
    /* the base rule ends flex-end; in grid that pushes the whole track right
       and the panel reads as a column of right-aligned scraps */
    grid-template-columns: 1fr;
    justify-content: stretch;
    max-width: none;
    gap: 0;
    padding: 12px;
    border: 1px solid var(--header-border-scrolled);
    background: var(--bv-color-paper-bright);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition:
      opacity 260ms var(--eng-ease-out),
      transform 260ms var(--eng-ease-out);
  }

  body.nav-open .home-nav {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  /* start, not stretch: a full-width anchor drags its underline across the
     whole panel and the current-page rule reads as a divider */
  .home-nav a {
    justify-self: start;
    justify-content: flex-start;
    min-height: 48px;
    padding: 0 12px;
  }

  .home-nav a.home-nav__portal {
    justify-self: stretch;
    justify-content: center;
    margin-top: 8px;
  }
}

@media (max-width: 560px) {
  .home-brand {
    gap: 10px;
    font-size: 12px;
    letter-spacing: 0.13em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-brand,
  .home-nav,
  .home-menu-toggle {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .home-header { transition: none; }
}

.mk-label {
  padding: 46px clamp(20px, 4vw, 56px) 0;
  color: rgb(from var(--bv-color-ink) r g b / 0.38);
  font-family: var(--bv-font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.mk-foot {
  padding: 40px clamp(20px, 4vw, 56px) 80px;
  color: rgb(from var(--bv-color-ink) r g b / 0.45);
  font-family: var(--bv-font-mono);
  font-size: 12px;
  line-height: 1.75;
}

/* ================= the section ================= */

.eng {
  padding: clamp(76px, 11vh, 148px) clamp(20px, 5vw, 72px) clamp(64px, 9vh, 120px);
  text-align: center;
}

.eng__statement { width: min(1080px, 100%); margin: 0 auto; }

.eng-kicker {
  margin: 0 0 clamp(26px, 3.4vh, 40px);
  color: rgb(from var(--bv-color-ink) r g b / 0.42);
  font-family: var(--bv-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.eng-title {
  margin: 0 auto clamp(24px, 3vh, 34px);
  max-width: 19ch;
  font-size: clamp(40px, 5.6vw, 82px);
  font-weight: 800;
  letter-spacing: -0.052em;
  line-height: 0.96;
  text-wrap: balance;
}

.eng-support {
  margin: 0 auto;
  max-width: 50ch;
  color: rgb(from var(--bv-color-ink) r g b / 0.66);
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.55;
  text-wrap: pretty;
}

/* ---------- actions ---------- */

.eng-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: clamp(38px, 5vh, 58px);
}

.eng-btn {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 0 30px;
  border: 1px solid var(--bv-color-ink);
  background: var(--bv-color-ink);
  color: var(--bv-color-paper-raised);
  font-family: var(--bv-font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-decoration: none;
  text-transform: uppercase;
}
.eng-btn--ghost { background: transparent; color: var(--bv-color-ink); }

/* ================= the record =================
   Aligned typographic columns. Grouping is space and baseline, not cells. */

.eng-record {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(30px, 5vw, 76px);
  width: min(1080px, 100%);
  margin: clamp(74px, 11vh, 132px) auto 0;
  text-align: left;
}

.eng-record__item { display: block; }

.eng-record__label {
  display: block;
  margin-bottom: 7px;
  color: rgb(from var(--bv-color-ink) r g b / 0.4);
  font-family: var(--bv-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.eng-record__value {
  display: block;
  font-family: var(--bv-font-mono);
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.eng-record__item.is-pending .eng-record__value { color: var(--bv-color-accent); }

.eng-record__note {
  display: block;
  margin-top: 4px;
  color: rgb(from var(--bv-color-ink) r g b / 0.38);
  font-family: var(--bv-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eng-origin {
  margin: clamp(38px, 5vh, 60px) 0 0;
  color: rgb(from var(--bv-color-ink) r g b / 0.36);
  font-family: var(--bv-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ================= variant: single record line ================= */

.eng-line {
  width: min(1080px, 100%);
  margin: clamp(74px, 11vh, 132px) auto 0;
  color: rgb(from var(--bv-color-ink) r g b / 0.5);
  font-family: var(--bv-font-mono);
  font-size: clamp(11px, 0.92vw, 13px);
  font-weight: 600;
  letter-spacing: 0.13em;
  line-height: 2.3;
  text-transform: uppercase;
}
.eng-line b { color: var(--bv-color-ink); font-weight: 600; }
.eng-line em { color: var(--bv-color-accent); font-style: normal; }
.eng-line i {
  color: rgb(from var(--bv-color-ink) r g b / 0.22);
  font-style: normal;
  padding: 0 clamp(8px, 1vw, 16px);
}

@media (max-width: 720px) {
  .eng-record { gap: 26px 34px; }
}

/* ================= shared section furniture =================
   Held in common by every section below. Each section still keeps its own
   measure and composition; only the lead block and the closing line are
   shared. */

.eng--left { text-align: left; }

.eng__lead { width: min(1080px, 100%); margin: 0 auto; text-align: center; }

.eng-h2 {
  margin: 0 auto clamp(20px, 2.6vh, 30px);
  max-width: 20ch;
  font-size: clamp(32px, 4vw, 58px);
  font-weight: 800;
  letter-spacing: -0.048em;
  line-height: 1;
  text-wrap: balance;
}

.eng-close {
  width: min(1080px, 100%);
  margin: clamp(56px, 7vh, 88px) auto 0;
  color: rgb(from var(--bv-color-ink) r g b / 0.5);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.6;
  text-align: center;
  text-wrap: pretty;
}

/* ================= section 03: method as proof =================
   The spine. Five mechanisms, each naming what it produces and what the buyer
   can inspect (D-007). Asymmetric rows: the claim on the left at scale, the
   mechanism and its artifact on the right at body and mono.

   Separation between rows is vertical space and a shift in ink, never a rule.
   The index numerals are the only structural landmark, and they are the one
   thing that moves on hover. */

.eng-method {
  width: min(1080px, 100%);
  margin: clamp(64px, 9vh, 104px) auto 0;
  text-align: left;
}

.eng-method__row {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(20px, 4vw, 64px);
  padding: clamp(30px, 4.2vh, 52px) 0;
}

.eng-method__index {
  display: block;
  margin-bottom: clamp(9px, 1.2vh, 14px);
  color: rgb(from var(--bv-color-ink) r g b / 0.22);
  font-family: var(--bv-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  transition: color 0.32s ease;
}

.eng-method__row:hover .eng-method__index,
.eng-method__row:focus-within .eng-method__index {
  color: var(--bv-color-accent);
}

.eng-method__name {
  margin: 0;
  max-width: 15ch;
  font-size: clamp(23px, 2.45vw, 35px);
  font-weight: 800;
  letter-spacing: -0.042em;
  line-height: 1.06;
  text-wrap: balance;
}

.eng-method__how {
  margin: 0;
  color: rgb(from var(--bv-color-ink) r g b / 0.7);
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.62;
  text-wrap: pretty;
}

.eng-method__artifact {
  margin: clamp(14px, 1.9vh, 22px) 0 0;
  color: rgb(from var(--bv-color-ink) r g b / 0.5);
  font-family: var(--bv-font-mono);
  font-size: 12px;
  line-height: 1.62;
}

.eng-method__artifact b {
  display: block;
  margin-bottom: 5px;
  color: rgb(from var(--bv-color-ink) r g b / 0.3);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

@media (max-width: 820px) {
  .eng-method__row { grid-template-columns: 1fr; gap: 16px; }
  .eng-method__name { max-width: none; }
}

/* ================= build-state divider ================= */

.mk-stage {
  margin: 0;
  padding: clamp(54px, 8vh, 92px) clamp(20px, 4vw, 56px) clamp(26px, 4vh, 42px);
  color: rgb(from var(--bv-color-ink) r g b / 0.36);
  font-family: var(--bv-font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ================= section 04: capability detail =================
   Answers "do you do this work, under my NAICS?". The codes are the reader's
   entry point, so they lead; the competencies answer underneath.

   The interaction is a cross-filter between the two groups, which is the
   section's actual subject. It reuses section 02's ink-withdrawal grammar on a
   different axis rather than inventing a second visual language. */

/* ---------- the layout ----------
   Same division as 03: the claim takes the wide half, the illustration the
   narrow one. align-items: start, not center — an expanding column re-centres
   a centred grid and drags the whole illustration with it. */

.eng-index {
  display: grid;
  grid-template-columns: minmax(0, 1.24fr) minmax(0, 0.76fr);
  align-items: start;
  gap: clamp(30px, 4vw, 76px);
  width: min(1280px, 100%);
  margin: clamp(44px, 6vh, 84px) auto 0;
  text-align: left;
}

/* ---------- the cross-filter ---------- */

.is-mapping .eng-cap { color: rgb(from var(--bv-color-ink) r g b / 0.18); }
.is-mapping .eng-cap.is-hit { color: var(--bv-color-ink); }

.is-mapping .eng-shelf__vol { opacity: 0.14; }
.is-mapping .eng-shelf__vol.is-out { opacity: 1; }

/* ---------- the code shelf ----------
   The five registered codes as bound volumes, spines out. Taking a competency
   draws every code it is bid under; taking a volume answers the other
   direction, which is the one an evaluator arrives with. */

.eng-shelf { display: block; width: 100%; height: auto; color: var(--bv-color-ink); }
.eng-shelf__figure { margin: 0; }

.eng-shelf__vol {
  opacity: 0.5;
  cursor: pointer;
  /* the beat before it moves, then a long travel — the volume is heavier than
     the sentence that describes it */
  transition:
    transform 0.52s cubic-bezier(0.22, 0.61, 0.36, 1) 0.13s,
    opacity 0.3s ease;
}
.eng-shelf__vol.is-out { transform: translateY(-38px); }
.eng-shelf__vol:focus-visible .eng-shelf__label { stroke: var(--bv-color-accent); stroke-width: 2.5; }
.eng-shelf__vol:focus { outline: none; }

.eng-shelf__solid { fill: currentColor; }
.eng-shelf__hatched { fill: url(#engShelfHatch); stroke: currentColor; stroke-width: 1.6; }
.eng-shelf__label { fill: var(--bv-color-paper-bright); }
.eng-shelf__ground { stroke: currentColor; stroke-width: 2.5; fill: none; }

.eng-shelf__code {
  fill: var(--bv-color-ink);
  font-family: var(--bv-font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-anchor: middle;
}

@media (max-width: 940px) {
  .eng-index { grid-template-columns: 1fr; }
  .eng-shelf__figure { order: -1; max-width: 420px; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .eng-shelf__vol { transition: opacity 0.2s ease; }
  .eng-shelf__vol.is-out { transform: none; }
}

/* ---------- the competencies ---------- */

.eng-caps {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vh, 36px);
}

.eng-cap { transition: color 0.3s ease; }

.eng-cap__index {
  display: block;
  margin-bottom: clamp(8px, 1vh, 12px);
  color: rgb(from var(--bv-color-ink) r g b / 0.26);
  font-family: var(--bv-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  transition: color 0.3s ease;
}
.eng-cap.is-hit .eng-cap__index { color: var(--bv-color-accent); }

.eng-cap__name {
  margin: 0 0 clamp(9px, 1.2vh, 13px);
  font-size: clamp(22px, 2.05vw, 32px);
  font-weight: 800;
  letter-spacing: -0.036em;
  line-height: 1.1;
}

/* collapsed until the competency is attended to, same as the mechanisms in
   03. At rest the column is five names and their codes, which is the reference
   an evaluator scans; the description is the answer to attending to one. */
.eng-cap__detail {
  display: block;
  overflow: hidden;
  max-height: 0;
  margin: 0;
  max-width: 46ch;
  color: inherit;
  font-size: clamp(15px, 1.12vw, 17.5px);
  line-height: 1.6;
  opacity: 0;
  text-wrap: pretty;
}

.eng-cap.is-open .eng-cap__detail {
  max-height: 8em;
  margin-top: clamp(8px, 1vh, 12px);
  opacity: 0.72;
}

.eng-cap__codes {
  margin: clamp(11px, 1.5vh, 15px) 0 0;
  color: inherit;
  font-family: var(--bv-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  opacity: 0.45;
}

.eng-psc {
  width: min(1080px, 100%);
  margin: clamp(52px, 7vh, 84px) auto 0;
  color: rgb(from var(--bv-color-ink) r g b / 0.4);
  font-family: var(--bv-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
}
.eng-psc b { color: rgb(from var(--bv-color-ink) r g b / 0.62); font-weight: 600; }

/* ================= section 05: past performance =================
   The section most sites omit. A compliance reviewer finds the gap anyway, so
   the gap is stated outright, at the largest scale on the page, with nothing
   else in the section at all.

   Design by subtraction: the declaration IS the section. It carries no
   illustration and no controls on purpose — every neighbour is dense, and the
   admission lands harder in silence than it would with something to look at.

   The one piece of motion is the beat between the two clauses. The date
   arrives, then the admission arrives after it, so the reader feels it drop
   rather than reading it as one flat line. */

.eng-declare {
  width: min(1080px, 100%);
  margin: clamp(46px, 6.5vh, 76px) auto 0;
  font-size: clamp(28px, 3.5vw, 52px);
  font-weight: 800;
  letter-spacing: -0.044em;
  line-height: 1.1;
  text-wrap: balance;
}

.eng-declare span {
  display: block;
  opacity: 0;
  transform: translateY(20px);
}

.is-in .eng-declare span {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.46s ease,
    transform 0.62s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* the admission lands a beat after the fact that sets it up */
.is-in .eng-declare span + span {
  transition-delay: 0.36s;
}

@media (prefers-reduced-motion: reduce) {
  .eng-declare span { opacity: 1; transform: none; }
}

/* ================= section 06: key personnel =================
   Credentials, not prose. The quantity is the claim in each line, so the
   quantity is set at display scale and the description runs small beside it —
   a reader scanning for "how much experience" reads a column of numbers.

   Attending to one withdraws ink from the rest, the same grammar as 02 to 04.
   Only the world.com line has anything to expand; the others still respond, so
   the row never feels dead under the pointer. */

.eng-creds {
  display: grid;
  gap: clamp(22px, 3vh, 38px);
  width: min(620px, 100%);
  margin: clamp(54px, 7vh, 86px) auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.eng-cred {
  /* The slab colour travels as a variable rather than currentColor. The slab
     needs the ROW's ink for its background while its own text stays
     paper-bright, and a currentColor background would resolve against that
     paper colour instead and disappear. */
  --slab: var(--bv-color-ink);
  display: grid;
  grid-template-columns: minmax(84px, 0.17fr) minmax(0, 1fr);
  align-items: baseline;
  column-gap: clamp(16px, 2.2vw, 34px);
  row-gap: 0;
  cursor: pointer;
  color: var(--bv-color-ink);
  transition: color 0.25s ease;
}

.is-listing .eng-cred { color: rgb(from var(--bv-color-ink) r g b / 0.22); }
.is-listing .eng-cred.is-on { color: var(--bv-color-ink); }
.eng-cred.is-on { --slab: var(--bv-color-accent); }

.is-listing .eng-cred:not(.is-on) .eng-cred__label .eng-mark {
  background: transparent;
  color: inherit;
}

.eng-cred__value {
  font-size: clamp(40px, 4.4vw, 68px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.94;
  text-align: right;
  transition: color 0.25s ease;
}
.eng-cred.is-on .eng-cred__value { color: var(--bv-color-accent); }

/* The term carrying the claim is knocked out of a printed slab — the same move
   as the code spines in 04 and the beam lettering before it. Attending to a
   row flips its slab to accent, which is what gives every row something to
   answer with even when it has nothing to expand. */
.eng-cred__label .eng-mark {
  display: inline-block;
  text-decoration: none;
  padding: 0.1em 0.34em 0.18em;
  background: var(--slab);
  color: var(--bv-color-paper-bright);
  font-weight: 800;
  letter-spacing: -0.03em;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.eng-cred__label {
  align-self: baseline;
  font-size: clamp(17px, 1.35vw, 22px);
  font-weight: 600;
  letter-spacing: -0.026em;
  line-height: 1.35;
}

.eng-cred__body {
  display: block;
  grid-column: 2;
  overflow: hidden;
  max-height: 0;
  max-width: 52ch;
  color: rgb(from var(--bv-color-ink) r g b / 0.72);
  font-size: clamp(14.5px, 1.05vw, 16.5px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.6;
  opacity: 0;
  text-wrap: pretty;
}
.eng-cred.is-on .eng-cred__body {
  max-height: 14em;
  margin-top: clamp(9px, 1.2vh, 13px);
  opacity: 1;
}

.eng-cred:focus-visible { outline: 2px solid var(--bv-color-accent); outline-offset: 8px; }

.eng-mark[data-peek] { cursor: pointer; }
.eng-mark:focus-visible { outline: 2px solid var(--bv-color-accent); outline-offset: 4px; }

/* ---------- the peek ----------
   A preview of the place a highlighted term points at, floating off the term
   itself. Split in two on purpose: JS writes the outer transform every frame
   so the card can drift with the pointer, and CSS owns the entrance on the
   inner plate — put both on one element and the per-frame writes fight the
   transition and the card judders.

   pointer-events: none throughout. The card must never be a hover target
   itself, or moving toward it would re-enter and re-anchor it. */

.eng-peek {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  pointer-events: none;
  will-change: transform;
}

.eng-peek__plate {
  display: block;
  visibility: hidden;
  opacity: 0;
  transform: scale(0.94) rotate(-1.6deg);
  /* it grows out of the cursor, which sits off its lower-left corner */
  transform-origin: 0% 100%;
  transition:
    opacity 0.19s ease,
    visibility 0s linear 0.19s,
    transform 0.34s cubic-bezier(0.22, 0.9, 0.35, 1);
}
.eng-peek.is-up .eng-peek__plate {
  visibility: visible;
  transition-delay: 0s;
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.eng-dream-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* A printed plate seen through heat haze. The turbulence displaces the whole
   plate, ink edge included, so it ripples as one object rather than looking
   like a sharp frame around a wobbling picture — which is what happens if the
   filter goes on the image alone inside a bordered wrapper. */
.eng-peek__img {
  display: block;
  width: clamp(210px, 21vw, 300px);
  height: auto;
  border: 4px solid var(--bv-color-ink);
  background: var(--bv-color-paper-bright);
}

.eng-peek.is-up .eng-peek__img { filter: url(#engDream); }

/* and it never quite settles */
.eng-peek.is-up .eng-peek__plate {
  animation: engDrift 6.5s ease-in-out infinite alternate;
}

@keyframes engDrift {
  from { translate: 0 0; rotate: -0.7deg; }
  to   { translate: 0 -7px; rotate: 0.7deg; }
}

@media (prefers-reduced-motion: reduce) {
  .eng-peek__plate { transform: none; transition: opacity 0.15s ease; }
  .eng-peek.is-up .eng-peek__plate { transform: none; animation: none; }
  /* The filter is only legible as motion; frozen, it is just a warped image.
     This has to match the is-up gate selector for selector, or it loses. */
  .eng-peek.is-up .eng-peek__img { filter: none; }
}

/* coarse pointers have no hover, so the peek can never be dismissed */
@media (hover: none) {
  .eng-peek { display: none; }
}

/* the rows arrive in order, so the column of numbers assembles itself */
.eng-cred { opacity: 0; transform: translateY(16px); }
.is-in .eng-cred {
  opacity: 1;
  transform: none;
  transition: opacity 0.4s ease, transform 0.52s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.25s ease;
}
.is-in .eng-cred:nth-child(2) { transition-delay: 0.09s; }
.is-in .eng-cred:nth-child(3) { transition-delay: 0.18s; }

@media (max-width: 620px) {
  .eng-cred { grid-template-columns: 1fr; gap: 4px; }
  .eng-cred__value { text-align: left; }
  /* one column here, so column 2 would be an implicit track off to the side */
  .eng-cred__body { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .eng-cred { opacity: 1; transform: none; }
}

/* ================= section 07: registration reference block =================
   This section exists to be transcribed into a prime's vendor form, so it is
   built for accuracy first. A real <table> because it is real tabular data.

   No rules and no zebra fill, which the register forbids. Reading across a row
   is instead solved by isolation: hovering any row withdraws ink from the
   others, which is what striping was trying to do and does it better. Pure CSS,
   so it works before any script runs.

   D-004 is enforced structurally rather than by styling: a pending credential
   has no value to render and no button to press, so it cannot be copied as
   though it were confirmed. */

.eng-reg__wrap {
  width: min(1080px, 100%);
  margin: clamp(54px, 7.5vh, 88px) auto 0;
  overflow-x: auto;
  /* the table is narrower than the wrap now, so centre it inside */
  display: flex;
  justify-content: center;
}

.eng-reg {
  width: auto;
  border-collapse: collapse;
  text-align: center;
}

.eng-reg th {
  padding: 0 clamp(10px, 1.3vw, 22px) clamp(20px, 2.6vh, 30px);
  color: rgb(from var(--bv-color-ink) r g b / 0.3);
  font-family: var(--bv-font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}

.eng-reg td {
  padding: clamp(17px, 2.4vh, 28px) clamp(10px, 1.3vw, 22px);
  font-family: var(--bv-font-mono);
  vertical-align: baseline;
  transition: color 0.28s ease;
}

.eng-reg th:first-child,
.eng-reg td:first-child { padding-left: 0; }
.eng-reg th:last-child,
.eng-reg td:last-child { padding-right: 0; }

.eng-reg__field {
  color: rgb(from var(--bv-color-ink) r g b / 0.52);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
}

.eng-reg__value {
  color: var(--bv-color-ink);
  font-size: clamp(15px, 1.25vw, 19px);
  font-weight: 600;
  letter-spacing: -0.004em;
  white-space: nowrap;
}

.eng-reg__auth {
  color: rgb(from var(--bv-color-ink) r g b / 0.42);
  font-size: 11.5px;
  letter-spacing: 0.04em;
}

.eng-reg__status {
  color: rgb(from var(--bv-color-ink) r g b / 0.3);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  white-space: nowrap;
}

.eng-reg tr.is-pending .eng-reg__status { color: var(--bv-color-accent); }
.eng-reg tr.is-pending .eng-reg__value { color: rgb(from var(--bv-color-ink) r g b / 0.26); }

/* row isolation instead of striping */
/* ---------- the reading line ----------
   One row is live: whichever sits nearest the middle of the viewport. It comes
   to full strength and enlarges; every other row drops to one flat grey. Not a
   gradient — a falloff reads as a soft-focus effect, a single hard switch
   reads as a position, and a position is what a reference table wants.

   Timing is doing most of the work. A quick swap looks like a hover state; a
   long ease-out-quart makes it feel like the page is following the reader
   rather than reacting to them.

   Our own departure from the reference: it animates padding and margin too, so
   its live item gains space. We cannot — the live row is chosen by which one
   is nearest the centre, so any height change moves the rows, which changes
   which one is nearest, which resizes a different row. Enlarging by transform
   keeps it out of layout and the loop cannot start. */

/* ---------- row emphasis ----------
   Plain and readable. Every row is legible at rest; attending to one lifts it.
   No scroll-driven state and no dimming — this is a table someone transcribes
   from, and hiding the rows they are not currently pointing at gets in the way
   of the one job it has. Everything here is additive. */

.eng-reg__row td {
  transition:
    color 0.24s ease,
    transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.eng-reg__row:hover .eng-reg__field,
.eng-reg__row.is-on .eng-reg__field { color: var(--bv-color-accent); }
.eng-reg__row:hover .eng-reg__auth,
.eng-reg__row.is-on .eng-reg__auth { color: rgb(from var(--bv-color-ink) r g b / 0.62); }

/* the row leans a little toward its value — space, not a mark */
.eng-reg__row:hover .eng-reg__field,
.eng-reg__row.is-on .eng-reg__field { transform: translateX(5px); }
.eng-reg__row:hover .eng-reg__auth,
.eng-reg__row.is-on .eng-reg__auth { transform: translateX(-3px); }

/* ---------- the entrance ----------
   Rows arrive in order once, the same staggered grammar the gears and the
   credentials use. Delay is set per row from script rather than with
   nth-child, so adding a registration cannot silently break the sequence. */

.eng-reg__row {
  opacity: 0;
  transform: translateY(14px);
}

.is-in .eng-reg__row {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.42s ease,
    transform 0.56s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .eng-reg__row { opacity: 1; transform: none; }
  .eng-reg__row td { transition: color 0.24s ease; }
  .eng-reg__row:hover .eng-reg__field,
  .eng-reg__row.is-on .eng-reg__field,
  .eng-reg__row:hover .eng-reg__auth,
  .eng-reg__row.is-on .eng-reg__auth { transform: none; }
}


.eng-copy {
  appearance: none;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
}

.eng-copy::after {
  content: attr(data-hint);
  display: inline-block;
  margin-left: 12px;
  color: rgb(from var(--bv-color-ink) r g b / 0.34);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.22s ease;
  vertical-align: baseline;
}

.eng-copy:hover::after,
.eng-copy:focus-visible::after { opacity: 1; }

.eng-copy[data-state="copied"]::after {
  content: "Copied";
  color: var(--bv-color-accent);
  opacity: 1;
}

/* The value itself acknowledges the copy. Without this the only feedback is a
   word appearing beside a value the reader has just looked away from, which is
   easy to miss at the exact moment it matters. */
.eng-copy[data-state="copied"] { animation: engCopied 0.62s cubic-bezier(0.22, 0.61, 0.36, 1); }

@keyframes engCopied {
  0%   { color: var(--bv-color-accent); transform: translateY(-3px); }
  55%  { color: var(--bv-color-accent); transform: translateY(0); }
  100% { color: inherit; transform: translateY(0); }
}

.eng-copy {
  display: inline-block;
  transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.eng-copy:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .eng-copy[data-state="copied"] { animation: none; color: var(--bv-color-accent); }
  .eng-copy:hover { transform: none; }
}

.eng-copy[data-state="failed"]::after {
  content: "Select and copy";
  color: var(--bv-color-accent);
  opacity: 1;
}

.eng-copy:focus-visible { outline: 2px solid var(--bv-color-accent); outline-offset: 5px; }

.eng-reg__note {
  width: min(1080px, 100%);
  margin: clamp(40px, 5vh, 60px) auto 0;
  color: rgb(from var(--bv-color-ink) r g b / 0.42);
  font-family: var(--bv-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  line-height: 1.7;
  text-align: center;
}

/* ================= section 08: teaming intake =================
   The primary conversion, and deliberately not a discovery-call funnel. It asks
   for a specific opportunity so the first reply can be substantive.

   Fields carry one baseline rule and nothing else. That is a rule, not an
   enclosure, and an input genuinely needs a boundary to read as writable — a
   box around it would not.

   The interaction answers the hesitation the form actually produces. A
   subcontract manager pauses before typing a pre-award notice number into a
   stranger's website, so the two sensitive fields state their handling at the
   moment of focus rather than in small print underneath. */

/* An explicit six-column track rather than auto-fit. The notice ID is the one
   thing this section is asking for, so it has to be able to take the full
   width and the three qualifiers have to sit three-up beneath it — auto-fit
   packs them two-up and makes every field look equally important. */
.eng-form {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(30px, 3.6vw, 52px) clamp(30px, 4vw, 64px);
  width: min(880px, 100%);
  margin: clamp(54px, 7.5vh, 88px) auto 0;
  text-align: left;
}

.eng-field--wide { grid-column: 1 / -1; }
.eng-field--hero { grid-column: 1 / -1; }
.eng-field--third { grid-column: span 2; }
.eng-field--half { grid-column: span 3; }

/* the opportunity itself, set at the scale of the ask */
.eng-field--hero .eng-field__label { font-size: 11px; }
.eng-field--hero .eng-field__input {
  padding-bottom: clamp(14px, 1.8vh, 20px);
  border-bottom-width: 2px;
  font-family: var(--bv-font-mono);
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.eng-field--hero .eng-field__input:focus { border-bottom-width: 3px; }
.eng-field--hero .eng-field__input::placeholder {
  font-size: clamp(18px, 1.8vw, 25px);
  letter-spacing: 0.02em;
}

@media (max-width: 760px) {
  .eng-form { grid-template-columns: 1fr; }
  .eng-field--third,
  .eng-field--half { grid-column: 1 / -1; }
}

.eng-field__label {
  display: block;
  margin-bottom: clamp(9px, 1.2vh, 13px);
  color: rgb(from var(--bv-color-ink) r g b / 0.45);
  font-family: var(--bv-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: color 0.26s ease;
}

.eng-field__input {
  display: block;
  width: 100%;
  padding: 0 0 clamp(10px, 1.3vh, 14px);
  border: 0;
  border-bottom: 1px solid rgb(from var(--bv-color-ink) r g b / 0.2);
  border-radius: 0;
  background: none;
  color: var(--bv-color-ink);
  font-family: var(--bv-font-body);
  font-size: clamp(16px, 1.2vw, 18px);
  font-weight: 500;
  letter-spacing: -0.014em;
  transition: border-color 0.26s ease;
}

textarea.eng-field__input {
  min-height: 104px;
  line-height: 1.55;
  resize: vertical;
}

.eng-field__input::placeholder { color: rgb(from var(--bv-color-ink) r g b / 0.26); }

/* Outline is replaced, not removed: focus shows a doubled accent rule, an
   accent label, and — on the sensitive fields — a disclosure that unfurls.
   Three simultaneous signals, all non-colour-dependent except the rule weight. */
.eng-field__input:focus {
  border-bottom-width: 2px;
  border-bottom-color: var(--bv-color-accent);
  outline: none;
}

.eng-field:focus-within .eng-field__label { color: var(--bv-color-accent); }

.eng-field__note {
  display: block;
  overflow: hidden;
  max-height: 0;
  margin-top: 0;
  color: rgb(from var(--bv-color-ink) r g b / 0.5);
  font-family: var(--bv-font-mono);
  font-size: 10px;
  letter-spacing: 0.11em;
  line-height: 1.6;
  opacity: 0;
  transition:
    max-height 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
    margin-top 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.26s ease;
}

.eng-field:focus-within .eng-field__note {
  max-height: 4em;
  margin-top: 10px;
  opacity: 1;
}

.eng-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  grid-column: 1 / -1;
  margin-top: clamp(10px, 1.6vh, 18px);
}

.eng-form__status {
  grid-column: 1 / -1;
  margin: 0;
  min-height: 1.4em;
  color: rgb(from var(--bv-color-ink) r g b / 0.5);
  font-family: var(--bv-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  line-height: 1.5;
}
/* the readout is the only thing on this form that changes as you fill it, so
   it earns the accent when it turns from "still needed" into "ready" */
.eng-form__status[data-state="ready"] { color: var(--bv-color-accent); }
.eng-form__status[data-state="missing"] { color: var(--bv-color-accent); }

.eng-form__privacy {
  width: min(880px, 100%);
  margin: clamp(40px, 5vh, 62px) auto 0;
  color: rgb(from var(--bv-color-ink) r g b / 0.42);
  font-family: var(--bv-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  line-height: 1.75;
  text-align: center;
}

/* ================= illustration register =================
   Carries the main site's icon system so the vertical reads as one house:
   stroke-only line art in currentColor, four ink levels, square caps, miter
   joins, and one soft diagonal cutting each composition.

   Deliberately no vector-effect: non-scaling-stroke here. That makes
   stroke-dasharray screen-space while getTotalLength() reports user-space, and
   the two silently disagree the moment the viewBox is scaled — which is exactly
   how a draw-on animation ends up truncated. Stroke widths are authored in
   user units instead and scale with the art. */

.eng-art {
  display: block;
  width: 100%;
  height: auto;
  color: var(--bv-color-ink);
  overflow: visible;
}

.eng-art :is(path, rect, circle, line, polyline, polygon) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.eng-art .is-heavy { stroke-width: 3.2; }
.eng-art .is-muted { opacity: 0.42; }
.eng-art .is-soft { opacity: 0.18; }
.eng-art .is-fill { fill: currentColor; stroke: none; }
.eng-art .is-accent { stroke: var(--bv-color-accent); }

/* ---------- draw-on ---------- */

.eng-art [data-draw] {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  transition: stroke-dashoffset 1.15s cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0ms);
}

.is-drawn .eng-art [data-draw] { stroke-dashoffset: 0; }

/* fills arrive after the line that contains them, never combined with is-muted */
.eng-art .is-fill {
  opacity: 0;
  transition: opacity 0.45s ease var(--d, 0ms);
}
.is-drawn .eng-art .is-fill { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .eng-art [data-draw] { stroke-dashoffset: 0; transition: none; }
  .eng-art .is-fill { opacity: 1; transition: none; }
}

/* ================= section 01: the interface assembly =================
   A flange is the fitting where two systems bolt together, which is the whole
   proposition of the page: our scope bolts into somebody else's contract. The
   drawing is generated offline and baked in — four concentric rings, seven
   paths, no runtime geometry.

   Motion: each ring starts at its own angle and eases to zero over 2.4s, so
   the assembly spins up and settles like something with mass. A second,
   nested group carries a very slow perpetual drift afterwards. Two nested
   groups rather than one element, because two animations cannot both drive
   `rotate` on the same element — nesting composes the transforms instead of
   letting the later one win. The core never turns, so the mark stays upright. */

.eng-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  /* top padding clears the fixed header, which is ~97px at its tallest */
  padding-top: clamp(128px, 15vh, 176px);
  padding-bottom: clamp(96px, 13vh, 150px);
  overflow: hidden;
  text-align: left;
}

.eng-hero__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  width: min(1440px, 100%);
  margin: 0 auto;
}

.eng-hero__lead { text-align: right; }
.eng-hero__lead .eng-kicker { margin-bottom: clamp(18px, 2.4vh, 28px); }

.eng-hero .eng-title {
  margin: 0 0 0 auto;
  max-width: 13ch;
  font-size: clamp(34px, 3.3vw, 54px);
  line-height: 1;
  letter-spacing: -0.045em;
}

.eng-hero__act {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(26px, 3.4vh, 38px);
}

.eng-hero .eng-support { margin: 0; max-width: 34ch; }
.eng-hero .eng-actions { margin-top: 0; justify-content: flex-start; }
.eng-hero .eng-line { text-align: center; }

/* ---------- the assembly ---------- */

.eng-flange {
  position: relative;
  width: min(34vw, 460px);
  aspect-ratio: 1;
}

.eng-flange svg { display: block; width: 100%; height: 100%; }

.eng-flange__mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 31%;
  height: auto;
  transform: translate(-50%, -50%);
}

/* ---------- the four rings ---------- */

.eng-flange__body { fill: var(--bv-color-ink); }
.eng-flange__index { fill: var(--bv-color-accent); }
.eng-flange__seg { fill: var(--bv-color-ink); }
.eng-flange__seg--hatch {
  fill: url(#engFlangeHatch);
  stroke: var(--bv-color-ink);
  stroke-width: 2;
}
/* currentColor does not follow the referencing element into a pattern, so the
   hatch strokes are coloured on the pattern's own line */
#engFlangeHatch line {
  stroke: var(--bv-color-ink);
  stroke-width: 1.2;
  opacity: 0.5;
}

.eng-flange__tick {
  fill: none;
  stroke: var(--bv-color-ink);
  stroke-width: 2;
  opacity: 0.55;
}
.eng-flange__rim {
  fill: none;
  stroke: var(--bv-color-ink);
  stroke-width: 1.6;
  opacity: 0.3;
}
.eng-flange__index-ring {
  fill: none;
  stroke: var(--bv-color-ink);
  stroke-width: 2.4;
  stroke-dasharray: 11 9;
  opacity: 0.75;
}
.eng-flange__core {
  fill: var(--bv-color-paper-bright);
  stroke: var(--bv-color-ink);
  stroke-width: 3;
}

.eng-flange__ring,
.eng-flange__drift {
  transform-box: view-box;
  transform-origin: 300px 300px;
}

.eng-flange__ring { animation: engFlangeIn 2.4s cubic-bezier(0.14, 0.74, 0.16, 1) both; }
.eng-flange__drift { animation: engFlangeDrift var(--rev) linear 2.4s infinite; }

@keyframes engFlangeIn {
  from { rotate: var(--from); }
  to { rotate: 0deg; }
}

@keyframes engFlangeDrift {
  to { rotate: calc(var(--dir) * 360deg); }
}

/* ---------- sheet annotations ---------- */

@media (prefers-reduced-motion: reduce) {
  .eng-flange__ring,
  .eng-flange__drift { animation: none; }
}

@media (max-width: 1200px) {
  .eng-hero__grid {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: clamp(34px, 5vh, 56px);
  }
  .eng-hero__lead { text-align: center; }
  .eng-hero .eng-title { margin-inline: auto; max-width: 16ch; }
  .eng-hero__act { align-items: center; text-align: center; }
  .eng-hero .eng-actions { justify-content: center; }
  .eng-flange { order: -1; width: min(64vw, 380px); }
}

@media (max-width: 720px) {
  .eng-hero { min-height: 100svh; }
}

/* ================= section 02: the envelope =================
   The scope envelope drawn as a parcel of ground, in the same projection as
   the hero terrain — so this reads as a zoom into the one cell the hero singles
   out, and the two sections share a world instead of each inventing a shape.

   The boundary is a projected rectangle: a form with a reason, planar and
   hard-edged, matching the mark and DESIGN.md's line grids and clipped
   geometry. Markers lie flat on the plane and foreshorten with it.

   The geometry claims exactly one thing: inside is scope we take, outside is
   scope we decline. Arrangement within each group carries no meaning, and the
   grid makes that obvious — it reads as ground, not as a plot.

   Both kinds of marker are drawn identically. Only which side of the boundary
   they sit on separates them, which is D-008 enforced by geometry rather than
   asserted in a caption. */

.eng-envelope {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  align-items: center;
  gap: clamp(32px, 4.5vw, 80px);
  width: min(1140px, 100%);
  margin: clamp(52px, 7vh, 88px) auto 0;
  text-align: left;
}

/* figure carries a 40px UA margin that was quietly shrinking the graphic */
.eng-env__figure { margin: 0; }

/* clipped to its own frame: with overflow visible the ground plane ran out
   past the column and under the lists */
.eng-env {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
  color: var(--bv-color-ink);
}

/* the surrounding programme: ground the parcel is cut out of */
.eng-env__ground {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.16;
  vector-effect: non-scaling-stroke;
}

.eng-env__ring {
  fill: rgb(from var(--bv-color-ink) r g b / 0.035);
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linejoin: miter;
  opacity: 0.8;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  transition:
    stroke-dashoffset 1.5s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.4s ease;
}

.is-drawn .eng-env__ring { stroke-dashoffset: 0; }
.is-focused .eng-env__ring { opacity: 0.68; }

.eng-env__dot {
  fill: currentColor;
  stroke: none;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  cursor: default;
  transition:
    opacity 0.36s ease var(--d, 0ms),
    transform 0.36s cubic-bezier(0.22, 0.61, 0.36, 1),
    fill 0.3s ease;
}

.is-drawn .eng-env__dot { opacity: 0.5; }
.is-focused .eng-env__dot { opacity: 0.16; }

.eng-env__dot.is-on {
  opacity: 1;
  transform: scale(1.9);
  transition-delay: 0ms;
}
.eng-env__dot--decline.is-on { fill: var(--bv-color-accent); }

@media (prefers-reduced-motion: reduce) {
  .eng-env__ring { stroke-dashoffset: 0; transition: opacity 0.2s ease; }
  .eng-env__dot { opacity: 0.26; transition: opacity 0.2s ease, fill 0.2s ease; }
}

@media (max-width: 900px) {
  .eng-envelope { grid-template-columns: 1fr; gap: clamp(28px, 5vh, 48px); }
  .eng-envelope > figure { max-width: 380px; margin: 0 auto; }
}

/* the two lists sit together in the right column now, not in split columns */
.eng-envelope .eng-scope li { font-size: clamp(17px, 1.32vw, 21px); line-height: 1.5; }

.eng-envelope .eng-cols {
  grid-template-columns: 1fr;
  gap: clamp(28px, 3.4vh, 44px);
  width: 100%;
  margin: 0;
}

/* ================= section 03: the evidence shelf =================
   Five mechanisms, each producing an artifact the prime can demand during
   performance. The graphic is that shelf of artifacts, in the library page's
   vocabulary: solid masses, one hatch material, knockout bands, chunky
   strokes, and a ground rule with end ticks.

   Picking a mechanism pulls its volume out of the row — which is the gesture
   the section is describing. Text answers instantly; the volume takes a beat
   to travel, the same division of labour as the scope in 02.

   At rest the list is names only. Showing all five details at once was what
   made this section read as five identical rows. */

.eng-proof {
  display: grid;
  /* The mechanisms are the section. The shelf illustrates them, so it takes
     the narrower half and the type takes the room it needs to be read. */
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.68fr);
  /* start, not center: an expanding mechanism grows this column, and centring
     made the shelf slide every time one opened. */
  align-items: start;
  gap: clamp(30px, 4vw, 76px);
  width: min(1280px, 100%);
  margin: clamp(44px, 6vh, 84px) auto 0;
  text-align: left;
}

/* ---------- the mechanisms ---------- */

.eng-mechs { margin: 0; padding: 0; list-style: none; }

.eng-mech {
  padding: clamp(15px, 2vh, 22px) 0;
  cursor: pointer;
  color: var(--bv-color-ink);
  transition: color 0.2s ease;
}

.is-picking .eng-mech { color: rgb(from var(--bv-color-ink) r g b / 0.22); }
.is-picking .eng-mech.is-on { color: var(--bv-color-ink); }

.eng-mech__index {
  display: block;
  margin-bottom: 7px;
  color: rgb(from var(--bv-color-ink) r g b / 0.3);
  font-family: var(--bv-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  transition: color 0.2s ease;
}
.eng-mech.is-on .eng-mech__index { color: var(--bv-color-accent); }

.eng-mech__name {
  display: block;
  font-size: clamp(24px, 2.35vw, 37px);
  font-weight: 800;
  letter-spacing: -0.042em;
  line-height: 1.08;
}

/* detail and artifact are instant — the answer should be there on contact */
.eng-mech__detail,
.eng-mech__artifact {
  display: block;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
}

.eng-mech.is-on .eng-mech__detail {
  max-height: 8em;
  margin-top: 8px;
  opacity: 1;
}

.eng-mech.is-on .eng-mech__artifact {
  max-height: 8em;
  margin-top: 9px;
  opacity: 1;
}

.eng-mech__detail {
  color: rgb(from var(--bv-color-ink) r g b / 0.68);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.58;
  max-width: 46ch;
  text-wrap: pretty;
}

.eng-mech__artifact {
  color: rgb(from var(--bv-color-ink) r g b / 0.5);
  font-family: var(--bv-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1.6;
  max-width: 46ch;
}
/* its own line: run inline, the label and the artifact read as one sentence */
.eng-mech__artifact b {
  display: block;
  margin-bottom: 2px;
  color: rgb(from var(--bv-color-ink) r g b / 0.32);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.eng-mech:focus-visible { outline: 2px solid var(--bv-color-accent); outline-offset: 6px; }

/* ---------- the gear train ----------
   Generated, not drawn: adjacent gears sit exactly (r_i + r_j) apart and share
   one module, which is the only reason the teeth actually interleave. If the
   geometry is ever edited by hand it will stop meshing, and a gear train that
   does not mesh is a picture of a machine that cannot run — the opposite of
   what this section claims.

   The train is rigid. One drive angle turns every gear, each by its own ratio
   (data-ratio in the markup, N0/Ni with alternating sign), so no gear can be
   moved on its own. That is the argument: engage one mechanism and the rest
   turn with it. */

.eng-train { display: block; width: 100%; height: auto; color: var(--bv-color-ink); }
.eng-train__figure { margin: 0; }

/* solid at rest, not a tint. The library register is solid masses; a gear
   held at 0.6 reads as a printing fault rather than a decision. */
.eng-gear {
  opacity: 1;
  transition: opacity 0.3s ease, color 0.3s ease;
}
/* not the 0.14 the shelf uses. The claim here is that the gears are ONE train,
   so the unchosen four have to stay visible enough to read as connected — dim
   them to a whisper and the section argues the opposite of what it says. */
.is-picking .eng-gear { opacity: 0.3; }
.is-picking .eng-gear.is-driving { opacity: 1; }
.eng-gear.is-driving { color: var(--bv-color-accent); }

.eng-gear__body { fill: currentColor; }
.eng-gear__body.is-hatched {
  fill: url(#engGearHatch);
  stroke: currentColor;
  stroke-width: 1.7;
}
/* the chosen gear goes solid, hatched or not. A hatched gear picked out in
   accent outline alone reads as a weaker choice than a solid one, and the five
   mechanisms do not rank. */
.eng-gear.is-driving .eng-gear__body.is-hatched { fill: currentColor; }

.eng-gear__hub { fill: none; stroke: currentColor; stroke-width: 2.2; }

/* the hub is a knockout, so the number sits on paper and stays legible when
   the gear goes solid accent */
.eng-gear__num {
  fill: currentColor;
  font-family: var(--bv-font-mono);
  /* sized per gear in the markup — the number is engraved on the part, so it
     scales with the part */
  font-weight: 700;
  letter-spacing: 0.03em;
  text-anchor: middle;
}

.eng-gear:focus-visible { outline: none; }

@media (max-width: 940px) {
  .eng-proof { grid-template-columns: 1fr; }
  .eng-train__figure { order: -1; max-width: 360px; margin: 0 auto; }
}

/* ================= proposed: capability as a ledger =================
   Five competencies is an awkward count for an auto-fit grid: at three
   columns the last row orphans two items against dead space. Stacked rows
   in aligned columns remove the orphan and put the code mapping — the thing
   a capture manager starts from — in a fixed column they can run down.
   Grouping stays space and baseline, never a rule or a cell. */

.eng-led {
  display: grid;
  gap: clamp(34px, 4.4vh, 54px);
  width: min(1080px, 100%);
  margin: clamp(60px, 8.5vh, 104px) auto 0;
  text-align: left;
}

.eng-led__row {
  display: grid;
  grid-template-columns: 3.5ch minmax(0, 19ch) minmax(0, 1fr) minmax(0, 17ch);
  gap: clamp(12px, 2vw, 32px);
  align-items: baseline;
  transition: color 0.3s ease;
}

.eng-led__index {
  color: rgb(from var(--bv-color-ink) r g b / 0.26);
  font-family: var(--bv-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  transition: color 0.3s ease;
}
.eng-led__row.is-hit .eng-led__index { color: var(--bv-color-accent); }

.eng-led__name {
  margin: 0;
  font-size: clamp(18px, 1.5vw, 24px);
  font-weight: 800;
  letter-spacing: -0.036em;
  line-height: 1.12;
  text-wrap: balance;
}

.eng-led__detail {
  margin: 0;
  color: inherit;
  font-size: clamp(14.5px, 1.05vw, 16.5px);
  line-height: 1.6;
  opacity: 0.72;
  text-wrap: pretty;
}

.eng-led__codes {
  margin: 0;
  color: rgb(from var(--bv-color-ink) r g b / 0.4);
  font-family: var(--bv-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.9;
}

.is-mapping .eng-led__row { color: rgb(from var(--bv-color-ink) r g b / 0.18); }
.is-mapping .eng-led__row.is-hit { color: var(--bv-color-ink); }

/* Stops the flex row stretching each button to the tallest label, which
   vertically centres a two-line label and drops its code 7px below the
   rest of the row. */
.eng-codes { align-items: start; }

/* ================= proposed: the limits section =================
   Two registers that read differently on purpose. A decline is a door that
   is closed; a standing limit is a wall that stands inside every engagement
   we do take. Each carries the structural fact behind it, so a prime learns
   whether it could ever change rather than only that the answer is no. */

.eng-lim {
  display: grid;
  gap: clamp(26px, 3.4vh, 40px);
  width: min(940px, 100%);
  margin: clamp(52px, 7vh, 86px) auto 0;
  text-align: left;
}

.eng-lim__label {
  margin: 0;
  color: rgb(from var(--bv-color-ink) r g b / 0.34);
  font-family: var(--bv-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.eng-lim__label--decline { color: var(--bv-color-accent); }

.eng-lim__row {
  display: grid;
  grid-template-columns: minmax(0, 21ch) minmax(0, 1fr);
  gap: clamp(10px, 2vw, 30px);
  align-items: baseline;
}

.eng-lim__name {
  margin: 0;
  font-size: clamp(17px, 1.35vw, 21px);
  font-weight: 800;
  letter-spacing: -0.032em;
  line-height: 1.15;
  text-wrap: balance;
}

.eng-lim__fact {
  margin: 0;
  color: rgb(from var(--bv-color-ink) r g b / 0.58);
  font-size: clamp(14px, 1vw, 15.5px);
  line-height: 1.65;
  text-wrap: pretty;
}

.eng-lim__new {
  margin-left: 9px;
  color: var(--bv-color-accent);
  font-family: var(--bv-font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .eng-led__row,
  .eng-lim__row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .eng-led__codes { line-height: 1.7; }
}

/* Compact navigation owns its visibility independently of the header entrance. */
@media (max-width: 820px) {
  body.is-loaded .home-nav { animation: none; }
  .home-nav { visibility: hidden; max-height: calc(100dvh - 88px); overflow-y: auto; }
  body.nav-open .home-nav { visibility: visible; }
}

@media (max-width: 820px) {
  .eng-field__input { min-height: 44px; }
}

/* Content-led composition: shared measure, readable type, natural section heights. */
.eng { padding-inline: max(24px, calc((100vw - 1360px) / 2)); }
.eng:not(.eng-hero) {
  padding-block: clamp(56px, 4.5vw, 80px);
  min-height: 0;
  text-align: left;
  scroll-margin-top: 90px;
}
.eng__lead { width: 100%; text-align: left; }
.eng-kicker { margin-bottom: 18px; }
.eng-h2 { margin: 0 0 20px; max-width: 22ch; font-size: clamp(36px, 4.4vw, 66px); }
.eng-support { margin: 0; font-size: clamp(18px, 1.5vw, 22px); max-width: 52ch; }
.eng-index, .eng-proof {
  width: 100%;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(40px, 5vw, 80px);
  margin-top: 44px;
  align-items: center;
}
.eng-shelf__figure, .eng-train__figure { width: 100%; max-width: 480px; margin: 0; justify-self: center; }
.eng-shelf, .eng-train { width: 100%; height: 460px; }
.eng-caps { gap: 16px; }
.eng-cap { position: relative; padding-left: 40px; }
.eng-cap__index { position: absolute; left: 0; top: 8px; font-size: 12px; }
.eng-cap__name { font-size: clamp(25px, 2.6vw, 40px); margin-bottom: 8px; }
.eng-cap__detail, .eng-cap.is-open .eng-cap__detail {
  max-height: none; opacity: .72; margin: 0; font-size: clamp(17px, 1.3vw, 20px);
}
.eng-cap__codes { margin-top: 8px; font-size: 12px; }
.eng-psc { width: 100%; margin: 32px 0 0; text-align: left; line-height: 1.8; }
.eng-mech { padding: 18px 0; }
.eng-mech__name { font-size: clamp(27px, 2.9vw, 44px); }
.eng-mech__detail { font-size: clamp(18px, 1.4vw, 21px); }
.eng-mech__artifact { font-size: 13px; }
.eng[data-creds] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(40px, 6vw, 96px);
  row-gap: 24px;
  align-content: start;
}
[data-creds] .eng__lead { grid-column: 1; }
[data-creds] > .eng-support { grid-column: 1; font-size: 17px; }
.eng-creds { grid-column: 2; grid-row: 1 / span 2; width: 100%; margin: 0; gap: 32px; align-self: center; }
.eng-cred__label { font-size: clamp(19px, 1.6vw, 24px); }
.eng-cred__body { font-size: 17px; }
.eng-reg__wrap { width: 100%; margin-top: 36px; justify-content: flex-start; }
.eng-reg { width: 100%; text-align: left; }
.eng-reg td { padding-block: 16px; }
.eng-reg__value { font-size: clamp(16px, 1.4vw, 21px); }
.eng-reg__note { margin: 24px 0 0; text-align: left; }
.eng:not(.eng-hero) > .eng-actions { justify-content: flex-start; margin-top: 28px; }
.eng-hero { min-height: min(850px, 100svh); padding-block: 160px 72px; }
.eng-hero__grid {
  width: 100%; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  column-gap: clamp(40px, 5vw, 80px); row-gap: 28px; justify-items: stretch;
}
.eng-hero__lead { grid-column: 1; text-align: left; align-self: end; }
.eng-hero .eng-title { font-size: clamp(52px, 6.4vw, 94px); max-width: 13ch; margin: 0; }
.eng-hero .eng-flange { grid-column: 2; grid-row: 1 / span 2; width: 100%; max-width: 480px; order: 0; justify-self: center; }
.eng-hero__act { grid-column: 1; align-self: start; align-items: flex-start; text-align: left; gap: 28px; }
.eng-hero .eng-support { max-width: 37ch; }
.eng-hero .eng-actions { justify-content: flex-start; gap: 12px; }
.eng-hero .eng-line { width: 100%; margin-top: 56px; text-align: center; font-size: 11px; }
@media (max-width: 760px) {
  .eng { padding-inline: 24px; }
  .eng:not(.eng-hero) { padding-block: 56px; }
  .eng-index, .eng-proof { grid-template-columns: 1fr; gap: 32px; margin-top: 32px; }
  .eng-shelf__figure, .eng-train__figure { max-width: 280px; order: 0; }
  .eng-shelf, .eng-train { height: 300px; }
  .eng-cap { padding-left: 32px; }
  .eng[data-creds] { grid-template-columns: 1fr; gap: 24px; }
  .eng-creds { grid-column: 1; grid-row: auto; margin-top: 12px; }
  .eng-hero { min-height: 0; padding-block: 132px 48px; }
  .eng-hero__grid { grid-template-columns: 1fr; gap: 24px; }
  .eng-hero__lead, .eng-hero__act { grid-column: 1; }
  .eng-hero .eng-flange { grid-column: 1; grid-row: 3; width: min(70vw, 300px); margin-top: 12px; }
  .eng-hero .eng-title { font-size: clamp(48px, 10vw, 72px); }
  .eng-hero .eng-line { margin-top: 32px; }
}

/* Desktop chapters occupy one viewport; extra content remains readable at zoom. */
@media (min-width: 1000px) {
  .eng { padding-inline: clamp(32px, 4vw, 88px); }
  .eng:not(.eng-hero) {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: clamp(40px, 6vh, 72px);
  }
  .eng-hero { min-height: 100svh; padding-block: clamp(110px, 14vh, 160px) 48px; }
  .eng-hero__grid { flex: 1; align-content: center; grid-template-rows: auto auto; }
  .eng-hero .eng-flange { max-width: min(520px, 55vh); }
  .eng-hero .eng-line { margin-top: 32px; margin-bottom: 0; }
  .eng__lead { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); column-gap: 5vw; align-items: end; }
  .eng__lead .eng-kicker { grid-column: 1 / -1; margin-bottom: 14px; }
  .eng__lead .eng-h2 { margin-bottom: 0; font-size: clamp(40px, 3.8vw, 64px); }
  .eng-index, .eng-proof { margin-top: clamp(28px, 4vh, 44px); gap: 5vw; }
  .eng-index { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .eng-caps { gap: clamp(12px, 1.8vh, 22px); }
  .eng-cap { display: block; }
  .eng-cap__name { font-size: clamp(26px, 2.35vw, 40px); }
  .eng-cap__codes { margin-top: 6px; letter-spacing: .04em; }
  .eng-cap__detail { grid-column: 1 / -1; max-width: none; }
  .eng-shelf, .eng-train { height: clamp(300px, 48vh, 540px); }
  .eng-mech { padding-block: clamp(9px, 1.35vh, 16px); }
  .eng-mech__name { font-size: clamp(28px, 2.6vw, 42px); }
  .eng-mech__detail, .eng-mech__artifact { max-width: none; }
  .eng-mech__artifact b { display: inline; margin-right: 10px; }
  .eng[data-creds] { display: grid; align-content: center; }
  [data-creds] .eng__lead { display: block; }
  [data-creds] .eng-h2 { margin-bottom: 20px; }
  .eng-reg__wrap { margin-top: 28px; }
  .eng-reg th { padding-bottom: 14px; }
  .eng-reg td { padding-block: clamp(9px, 1.4vh, 16px); }
  .eng-reg__note, .eng-psc { margin-top: 22px; }
}

/* The mechanism is a focal illustration; the closing invitation is display type. */
.eng[aria-labelledby="eng-07"] .eng__lead { display: block; }
.eng[aria-labelledby="eng-07"] .eng-h2 {
  font-size: clamp(52px, 7.6vw, 128px);
  max-width: 15ch;
  line-height: .98;
  margin-bottom: 28px;
}
.eng[aria-labelledby="eng-07"] .eng-support { max-width: 46ch; font-size: clamp(19px, 1.7vw, 26px); }
.eng[aria-labelledby="eng-07"] > .eng-actions { margin-top: 32px; }
@media (min-width: 1000px) {
  .eng-proof { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .eng-train__figure, .eng-shelf__figure { max-width: 660px; }
  .eng-train, .eng-shelf { height: clamp(400px, 61vh, 700px); }
}