/* ERNIX — sections.css
   Statement, capabilities, experience, contact and the
   responsive refinements layered on top. Loads last: it overrides. */

/* Shapes are targeted by element, not by [pathLength]: Chrome does not
   restyle SVG children when a class change should newly match a
   camelCase attribute selector, so the plot animation never started. */

/* ══════════════════════════════════════════════════════════
   3D — five treatments

   Everything here is CSS 3D on the three discipline layers
   that already exist. No renderer, no library — the marks
   stay line drawings, they just gain a Z.
   ══════════════════════════════════════════════════════════ */

.mark-sm { transition: transform 0.5s var(--ease); transform-style: preserve-3d; }
.legspec-btn:hover .mark-sm,
.legspec-btn[aria-expanded="true"] .mark-sm { transform: rotateX(52deg) rotateZ(-36deg); }

.legspec-code {
  font-size: 10px; font-weight: 700; letter-spacing: var(--track-md);
  color: var(--g400); font-variant-numeric: tabular-nums;
}
.legspec-btn[aria-expanded="true"] .legspec-code { color: var(--black); }

.legspec-name { font-size: 15px; font-weight: 700; letter-spacing: var(--track-tight); line-height: 1.3; }
.legspec-text { font-size: 13px; line-height: 1.7; color: var(--g600); }

.legspec-plus {
  inline-size: 22px; block-size: 22px;
  display: grid; place-items: center;
  font-size: 14px; color: var(--g400);
  justify-self: end;
}
.legspec-btn[aria-expanded="true"] .legspec-plus { color: var(--black); }
.legspec-plus::before { content: '+'; }
.legspec-btn[aria-expanded="true"] .legspec-plus::before { content: '−'; }

/* The clause */
.legspec-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease);
}
.legspec-panel.is-open { grid-template-rows: 1fr; }
.legspec-panel > div { overflow: hidden; }

.legspec-subs {
  list-style: none;
  padding-block: 4px 26px;
  padding-inline-start: calc(62px + 26px);
  max-inline-size: 76ch;
}
.legspec-sub {
  display: grid; grid-template-columns: 58px 1fr; gap: 18px;
  padding-block: 7px;
  font-size: 12.5px; line-height: 1.6; color: var(--g600);
  border-block-start: 1px solid var(--g100);
}
.legspec-sub:first-child { border-block-start: 0; }
.legspec-sub-no {
  font-size: 10px; font-weight: 500; letter-spacing: var(--track-xs);
  color: var(--g400); font-variant-numeric: tabular-nums; padding-block-start: 2px;
}

/* ══════════════════════════════════════════════════════════
   CAPABILITIES — AXO SCHEDULE
   The four capabilities read as model categories, with one
   shared exploded axo alongside that answers to whichever row
   you are on.
   ══════════════════════════════════════════════════════════ */
.layersched {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 1px;
  background: var(--g200);
  border-block: 1px solid var(--g200);
}
.layersched-list, .layersched-view { background: var(--white); }
.layersched-list { padding-block: 8px; }

.layer-row {
  inline-size: 100%;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 16px;
  align-items: start;
  padding: 22px var(--pad-x);
  text-align: start;
  border-block-end: 1px solid var(--g200);
  transition: background 0.2s;
}
.layer-row:last-child { border-block-end: 0; }
.layer-row:hover,
.layer-row[aria-current="true"] { background: var(--g50); }

.layer-code {
  font-size: 10px; font-weight: 700; letter-spacing: var(--track-md);
  color: var(--g400); font-variant-numeric: tabular-nums; padding-block-start: 3px;
}
.layer-row[aria-current="true"] .layer-code { color: var(--black); }
.layer-name { font-size: 15px; font-weight: 700; letter-spacing: var(--track-tight); margin-block-end: 6px; }
.layer-text { font-size: 13px; line-height: 1.7; color: var(--g600); }

.layersched-view {
  display: grid; place-items: center;
  background: #12161f;
  min-block-size: 400px;
  perspective: 900px;
  position: relative;
  overflow: hidden;
}
.layersched-view::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}
.sched-stack {
  position: relative;
  inline-size: 190px; block-size: 190px;
  transform-style: preserve-3d;
  transform: rotateX(56deg) rotateZ(-38deg);
  z-index: 1;
}
.sched-plate {
  position: absolute; inset: 0;
  color: rgba(255,255,255,0.24);
  transition: color 0.3s var(--ease), transform 0.45s var(--ease);
}
.sched-plate.is-active { color: rgba(255,255,255,0.95); }
.sched-plate:nth-child(1) { transform: translateZ(66px); }
.sched-plate:nth-child(2) { transform: translateZ(22px); }
.sched-plate:nth-child(3) { transform: translateZ(-22px); }
.sched-plate:nth-child(4) { transform: translateZ(-66px); }

@media (max-width: 1100px) {
  .layersched { grid-template-columns: 1fr; }
  .layersched-view { min-block-size: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .sched-plate { transition: none; }
}
@media print {
  .layersched-view { display: none; }
  .layersched { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   EXPERIENCE — PROGRAMME WITH DEPTH
   Employed work sits on the front plane, consulting behind it.
   The overlaps stop being a collision and become two layers,
   which is what they actually were.
   ══════════════════════════════════════════════════════════ */
.programme { padding-inline: var(--pad-x); }

.prog-toolbar {
  display: flex; align-items: baseline; gap: 18px;
  flex-wrap: wrap; padding-block-end: 18px;
}
.prog-view-label {
  font-size: 10px; font-weight: 500; letter-spacing: var(--track-xl);
  text-transform: uppercase; color: var(--g400);
}
.prog-view {
  font-size: 11px; font-weight: 500; letter-spacing: var(--track-sm);
  text-transform: uppercase; color: var(--g400); padding: 0;
}
.prog-view::before { content: '+'; margin-inline-end: 5px; }
.prog-view:hover { color: var(--black); }
.prog-view[aria-checked="true"] { color: var(--black); font-weight: 700; }

.prog-stage { perspective: 2200px; perspective-origin: 50% 40%; }

.prog-deck {
  transform-style: preserve-3d;
  transition: transform 0.7s var(--ease);
}
.is-axo .prog-deck { transform: rotateX(34deg) rotateZ(-8deg); }

.prog-axis {
  display: flex;
  border-block-end: 1.5px solid var(--black);
  margin-inline-start: 250px;
}
.prog-year {
  flex: 1;
  font-size: 9px; font-weight: 700; letter-spacing: var(--track-md);
  color: var(--g400); font-variant-numeric: tabular-nums;
  padding-block-end: 8px; padding-inline-start: 5px;
  border-inline-start: 1px solid var(--g200);
}

.prog-row {
  display: grid;
  grid-template-columns: 250px 1fr;
  align-items: center;
  padding-block: 10px;
  border-block-end: 1px solid var(--g200);
  transform-style: preserve-3d;
}
.prog-row:hover { background: var(--g50); }

.prog-label { padding-inline-end: 24px; }
.prog-role { font-size: 13px; font-weight: 700; letter-spacing: var(--track-tight); line-height: 1.3; }
.prog-firm { font-size: 11px; color: var(--g400); margin-block-start: 2px; }

.prog-track { position: relative; block-size: 32px; transform-style: preserve-3d; }
.prog-grid { position: absolute; inset: 0; display: flex; pointer-events: none; }
.prog-grid span { flex: 1; border-inline-start: 1px solid var(--g100); }

.prog-bar {
  position: absolute;
  inset-block: 7px;
  display: flex; align-items: center;
  padding-inline: 9px;
  min-inline-size: 36px;
  background: var(--black);
  transform-style: preserve-3d;
  transition: transform 0.45s var(--ease);
  transform: translateZ(0);
}

/* The extruded underside — what makes it a slab, not a rectangle */
.prog-bar::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 10px;
  background: var(--g600);
  transform-origin: 50% 100%;
  transform: rotateX(-90deg);
  pointer-events: none;
}

/* Consulting work sits on a plane behind the employed bars */
.prog-bar--freelance {
  background: var(--white);
  border: 1px dashed var(--g400);
  transform: translateZ(-34px);
}
.prog-bar--freelance::after { background: var(--g200); }

.prog-row:hover .prog-bar { transform: translateZ(30px); }
.prog-row:hover .prog-bar--freelance { transform: translateZ(-6px); }

.prog-bar-txt {
  font-size: 9px; font-weight: 700; letter-spacing: var(--track-md);
  color: var(--white); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.prog-bar--freelance .prog-bar-txt { color: var(--g600); }

.prog-key {
  display: flex; flex-wrap: wrap; gap: 26px;
  padding-block-start: 22px;
  font-size: 10px; letter-spacing: var(--track-xs); color: var(--g400);
}
.prog-key-item { display: inline-flex; align-items: center; gap: 8px; }
.prog-swatch { inline-size: 22px; block-size: 8px; flex: none; }
.prog-swatch--staff { background: var(--black); }
.prog-swatch--free { border: 1px dashed var(--g400); }

.prog-note {
  padding-block-start: 10px;
  font-size: 11px; line-height: 1.6; color: var(--g400); max-inline-size: 62ch;
}

/* ── Responsive: the depth is the first thing to go ──────
   Below 900px there is no room for a 12-year axis beside a
   250px label column, so the chart becomes a list of spans
   with a bar under each — same data, no axis to misread.
*/
@media (max-width: 900px) {
  .prog-stage { perspective: none; }
  .is-axo .prog-deck { transform: none; }
  .prog-toolbar { display: none; }
  .prog-axis { margin-inline-start: 0; }
  .prog-year:nth-child(even) { color: transparent; }
  .prog-row { grid-template-columns: 1fr; }
  .prog-label { padding-block-end: 8px; padding-inline-end: 0; }
  .prog-bar { transition: none; transform: none !important; }
  .prog-bar::after { display: none; }
  .prog-bar--freelance { transform: none; }
}

@media (max-width: 560px) {
  .prog-axis { display: none; }
  .prog-track { block-size: 24px; }
  .prog-grid { display: none; }
  .prog-bar { inset-block: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .prog-deck, .prog-bar, .legspec-panel, .legspec-sym .mark-sm { transition: none; }
  .is-axo .prog-deck { transform: none; }
  .prog-row:hover .prog-bar { transform: translateZ(0); }
}

/* ══════════════════════════════════════════════════════════
   CONTACT — DATUM TERMINUS
   The datum runs out of the projects, carries a closing
   chainage, and stops. Everything else hangs off that line.
   ══════════════════════════════════════════════════════════ */
.terminus { background: var(--white); color: var(--black); padding-block: 104px 0; }
.terminus-inner { padding-inline: var(--pad-x); }

.terminus-eyebrow {
  font-size: 10px; font-weight: 500; letter-spacing: var(--track-xl);
  text-transform: uppercase; color: var(--g400); margin-block-end: 22px;
}

.terminus-head {
  font-size: clamp(34px, 5.2vw, 78px); font-weight: 900;
  letter-spacing: var(--track-display); line-height: 0.94;
  margin-block-end: 52px; max-inline-size: 15ch;
}

/* Dimensioned phrase, same device as the landing */
.terminus-head .dim-term {
  position: relative; display: inline-block; padding-block-end: 0.3em;
}
.terminus-head .dim-term::before {
  content: ''; position: absolute;
  inset-block-end: 0.14em; inset-inline: 0;
  border-block-end: 1px solid var(--g400);
}
.terminus-head .dim-term::after {
  content: attr(data-label);
  position: absolute; inset-block-end: -0.5em; inset-inline: 0;
  text-align: center;
  font-size: 9px; font-weight: 700; letter-spacing: var(--track-md);
  text-transform: uppercase; color: var(--g400); white-space: nowrap;
}
.terminus-head .dim-tick {
  position: absolute; inset-block-end: 0.14em;
  inline-size: 1px; block-size: 9px; background: var(--g400);
}
.terminus-head .dim-tick--s { inset-inline-start: 0; }
.terminus-head .dim-tick--e { inset-inline-end: 0; }

/* The line itself: start tick, chainage, end tick */
.terminus-datum {
  position: relative;
  border-block-start: 1.5px solid var(--black);
  margin-block-end: 34px;
}
.terminus-datum::before,
.terminus-datum::after {
  content: '';
  position: absolute; inset-block-start: -9px;
  inline-size: 1.5px; block-size: 18px; background: var(--black);
}
.terminus-datum::before { inset-inline-start: 0; }
.terminus-datum::after  { inset-inline-end: 0; }

.terminus-chainage {
  position: absolute;
  inset-block-start: 10px; inset-inline-end: 0;
  font-size: 9px; font-weight: 700; letter-spacing: var(--track-lg);
  text-transform: uppercase; color: var(--g400);
  font-variant-numeric: tabular-nums;
}

.terminus-body {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  padding-block-start: 34px;
}

.terminus-lead { font-size: 14px; line-height: 1.75; color: var(--g600); max-inline-size: 48ch; margin-block-end: 30px; }

.terminus-cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: var(--track-md);
  text-transform: uppercase; color: var(--black);
  padding: 13px 20px; border: 1.5px solid var(--black); border-radius: var(--r);
  transition: background 0.2s, color 0.2s;
}
.terminus-cta:hover { background: var(--black); color: var(--white); }
.terminus-cta::after { content: '→'; }

.terminus-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--g200);
  border: 1px solid var(--g200);
  align-self: start;
}
.terminus-cell { background: var(--white); padding: 18px 20px; }
.terminus-key {
  font-size: 8.5px; font-weight: 500; letter-spacing: var(--track-xl);
  text-transform: uppercase; color: var(--g400); margin-block-end: 7px;
}
.terminus-val { font-size: 13px; font-weight: 700; letter-spacing: var(--track-xs); }
.terminus-val a:hover { opacity: 0.6; }
.terminus-val--live {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--black);
}
.terminus-val--live .footer-avail-dot { background: #2E9E5B; }

.terminus-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px;
  margin-block-start: 72px;
  padding-block: 20px;
  padding-inline: var(--pad-x);
  border-block-start: 1px solid var(--g200);
  font-size: 10px; letter-spacing: var(--track-sm);
  text-transform: uppercase; color: var(--g400);
}

@media (max-width: 900px) {
  .terminus-body { grid-template-columns: 1fr; gap: 36px; }
  .terminus-head { max-inline-size: none; }
}
@media (max-width: 560px) {
  .terminus-grid { grid-template-columns: 1fr; }
  .terminus-foot { flex-direction: column; gap: 6px; }
}

/* ══════════════════════════════════════════════════════════
   CAPABILITIES × 5   ·   EXPERIENCE × 5
   ══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   X4 · ROUTE
   Swimlanes by country, so the move north is the shape of it.
   ══════════════════════════════════════════════════════════ */
.route { padding-inline: var(--pad-x); }
.route-axis { display: flex; border-block-end: 1.5px solid var(--black); margin-inline-start: 168px; }
.route-year {
  flex: 1; font-size: 9px; font-weight: 700; letter-spacing: var(--track-md);
  color: var(--g400); font-variant-numeric: tabular-nums;
  padding-block-end: 8px; padding-inline-start: 5px; border-inline-start: 1px solid var(--g200);
}
.route-lane {
  display: grid; grid-template-columns: 168px 1fr;
  align-items: center;
  border-block-end: 1px solid var(--g200);
  min-block-size: 62px;
}
.route-place {
  font-size: 12px; font-weight: 700; letter-spacing: var(--track-tight);
  padding-inline-end: 20px;
}
.route-place span { display: block; font-size: 10px; font-weight: 500; color: var(--g400); margin-block-start: 2px; }
.route-track { position: relative; block-size: 100%; min-block-size: 62px; }
.route-grid { position: absolute; inset: 0; display: flex; pointer-events: none; }
.route-grid span { flex: 1; border-inline-start: 1px solid var(--g100); }
.route-bar {
  position: absolute; inset-block: 18px;
  background: var(--black);
  display: flex; align-items: center; padding-inline: 9px;
  min-inline-size: 34px;
}
.route-bar--free { background: var(--white); border: 1px dashed var(--g400); }
.route-bar-txt {
  font-size: 9px; font-weight: 700; letter-spacing: var(--track-md);
  color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.route-bar--free .route-bar-txt { color: var(--g600); }

/* ══════════════════════════════════════════════════════════
   X5 · COVERAGE
   Role against model detail. Blanks stay blank.
   ══════════════════════════════════════════════════════════ */
.cover { padding-inline: var(--pad-x); overflow-x: auto; }
.cover-inner { min-inline-size: 720px; }
.cover-head, .cover-row {
  display: grid;
  grid-template-columns: 1fr repeat(5, 74px) 104px;
  gap: 14px;
  align-items: center;
}
.cover-head {
  font-size: 9px; font-weight: 700; letter-spacing: var(--track-lg);
  text-transform: uppercase; color: var(--g400);
  padding-block: 12px; border-block-end: 1.5px solid var(--black);
  text-align: center;
}
.cover-head > :first-child { text-align: start; }
.cover-row { padding-block: 15px; border-block-end: 1px solid var(--g200); }
.cover-row:hover { background: var(--g50); }
.cover-role { font-size: 13px; font-weight: 700; letter-spacing: var(--track-tight); line-height: 1.3; }
.cover-firm { font-size: 11px; color: var(--g400); margin-block-start: 2px; }
.cover-mark {
  justify-self: center;
  inline-size: 20px; block-size: 20px;
  border: 1px solid var(--g200); border-radius: 50%;
}
.cover-mark--on { background: var(--black); border-color: var(--black); }
.cover-mark--unknown { border-style: dashed; border-color: var(--g300); }
.cover-years {
  font-size: 11px; color: var(--g400); text-align: end;
  font-variant-numeric: tabular-nums;
}
.cover-key {
  display: flex; flex-wrap: wrap; gap: 26px;
  padding-block-start: 20px;
  font-size: 10px; letter-spacing: var(--track-xs); color: var(--g400);
}
.cover-key-item { display: inline-flex; align-items: center; gap: 8px; }
.cover-key .cover-mark { inline-size: 13px; block-size: 13px; }

@media (max-width: 900px) {
  .callouts { grid-template-columns: 1fr; }
  .route-axis { margin-inline-start: 0; }
  .route-lane { grid-template-columns: 1fr; min-block-size: 0; padding-block: 10px; }
  .route-place { padding-block-end: 6px; }
  .route-track { min-block-size: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .callout-cell:hover .mark-sm { transform: none; }
}

/* ══════════════════════════════════════════════════════════
   EXPERIENCE — TABBED VIEWS
   Programme / Route / Coverage are three readings of one set
   of roles, so they share a header and a tab strip rather
   than sitting on the page as three sections.
   The tabs reuse the "+" chips from the projects control, so
   the two switchers on the page look like one idea.
   ══════════════════════════════════════════════════════════ */

.exp-panel[hidden] { display: none; }

.exp-panel {
  animation: expIn 0.32s var(--ease) both;
}
@keyframes expIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.exp-caption {
  padding-inline: var(--pad-x);
  padding-block-start: 18px;
  font-size: 11.5px; line-height: 1.65;
  color: var(--g400); max-inline-size: 68ch;
}

/* The programme's own flat/axo control sits inside its panel,
   so it only appears when the programme is on screen */
.prog-toolbar {
  display: flex; align-items: baseline; gap: 16px;
  flex-wrap: wrap; padding-block-end: 18px;
}
.prog-view-label {
  font-size: 10px; font-weight: 500; letter-spacing: var(--track-xl);
  text-transform: uppercase; color: var(--g400);
}
.prog-view {
  font-size: 11px; font-weight: 500; letter-spacing: var(--track-sm);
  text-transform: uppercase; color: var(--g400); padding: 0;
}
.prog-view::before { content: '+'; margin-inline-end: 5px; }
.prog-view:hover { color: var(--black); }
.prog-view[aria-checked="true"] { color: var(--black); font-weight: 700; }

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


/* ══════════════════════════════════════════════════════════
   D1 · EXPLODED AXONOMETRIC  (restored)
   Hover tips a project mark off the page and pulls the three
   disciplines apart in Z. Declared after section.css so it
   overrides the flat translateY hover there.
   ══════════════════════════════════════════════════════════ */
.glyph-stack { transform-style: preserve-3d; }
.glyph-layer { backface-visibility: visible; }

.d-axo .sec-glyphwrap { perspective: 900px; }
.d-axo .glyph-stack { transition: transform 0.65s var(--ease); }

.d-axo .sec-col:hover .glyph-stack,
.d-axo .sec-col:focus-visible .glyph-stack {
  transform: rotateX(56deg) rotateZ(-38deg);
}

.d-axo .glyph-layer { transition: transform 0.65s var(--ease), opacity 0.4s var(--ease); }
.d-axo .sec-col:hover .glyph-layer--arc,
.d-axo .sec-col:focus-visible .glyph-layer--arc { transform: translateZ(42px); }
.d-axo .sec-col:hover .glyph-layer--str,
.d-axo .sec-col:focus-visible .glyph-layer--str { transform: translateZ(0); opacity: 0.75; }
.d-axo .sec-col:hover .glyph-layer--mep,
.d-axo .sec-col:focus-visible .glyph-layer--mep { transform: translateZ(-42px); opacity: 0.5; }

@media (prefers-reduced-motion: reduce) {
  .d-axo .glyph-stack,
  .d-axo .glyph-layer { transition: none; transform: none !important; }
}

/* ══════════════════════════════════════════════════════════
   CAPABILITIES — aligned with the rest of the page
   Grid bubbles as on the section segments, a datum under the
   list, marks that tip into the same axo, and a viewport tag
   that matches the project viewport.
   ══════════════════════════════════════════════════════════ */
.layersched { position: relative; }

.layer-row {
  grid-template-columns: 34px 32px 1fr;
  align-items: start;
}

/* Same bubble the section segments carry */
.layer-bub {
  inline-size: 26px; block-size: 26px;
  display: grid; place-items: center;
  border: 1.5px solid var(--g300);
  border-radius: 50%;
  font-size: 10px; font-weight: 700; letter-spacing: 0;
  color: var(--g400);
  transition: border-color 0.2s, color 0.2s;
  margin-block-start: 1px;
}
.layer-row[aria-current="true"] .layer-bub { border-color: var(--black); color: var(--black); }

.layer-mark {
  inline-size: 26px; block-size: 26px;
  color: var(--g400);
  perspective: 500px;
  margin-block-start: 1px;
}
.layer-mark .mark-sm {
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease);
}
.layer-row:hover .layer-mark .mark-sm,
.layer-row[aria-current="true"] .layer-mark .mark-sm {
  transform: rotateX(52deg) rotateZ(-36deg);
}
.layer-row[aria-current="true"] .layer-mark { color: var(--black); }

.layer-code {
  font-size: 9px; letter-spacing: var(--track-md);
  margin-block-end: 4px; padding-block-start: 0;
}

/* The datum, closing the list the way it closes a column */
.layersched-list { padding-block: 8px 0; }
.layersched-rule {
  border-block-start: 1.5px solid var(--black);
  margin-inline: var(--pad-x);
  margin-block-start: 8px;
}
.layersched-caption {
  padding-inline: var(--pad-x);
  padding-block: 12px 22px;
  font-size: 11.5px; line-height: 1.65; color: var(--g400);
  max-inline-size: 52ch;
}

/* Viewport tag, matching the projects viewport */
.sched-tag {
  position: absolute;
  inset-block-start: 14px; inset-inline-start: 16px;
  font-size: 9px; font-weight: 700; letter-spacing: var(--track-xl);
  text-transform: uppercase; color: rgba(255,255,255,0.5);
  z-index: 2;
}

/* Plates draw themselves in, as the project marks do */
.sched-plate :is(path, rect, line, polyline, polygon, circle, ellipse) { stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-drawn .sched-plate :is(path, rect, line, polyline, polygon, circle, ellipse) { animation: plot 1.2s var(--ease) forwards; }
.is-drawn .sched-plate:nth-child(2) :is(path, rect, line, polyline, polygon, circle, ellipse) { animation-delay: 0.12s; }
.is-drawn .sched-plate:nth-child(3) :is(path, rect, line, polyline, polygon, circle, ellipse) { animation-delay: 0.24s; }
.is-drawn .sched-plate:nth-child(4) :is(path, rect, line, polyline, polygon, circle, ellipse) { animation-delay: 0.36s; }

/* The selected plate comes forward rather than only brightening */
.sched-plate { transform: translateZ(var(--z, 0px)); }
.sched-plate:nth-child(1) { --z: 66px; }
.sched-plate:nth-child(2) { --z: 22px; }
.sched-plate:nth-child(3) { --z: -22px; }
.sched-plate:nth-child(4) { --z: -66px; }
.sched-plate.is-active { --z: 96px; }

@media (prefers-reduced-motion: reduce) {
  .sched-plate :is(path, rect, line, polyline, polygon, circle, ellipse),
  .is-drawn .sched-plate :is(path, rect, line, polyline, polygon, circle, ellipse) { stroke-dashoffset: 0; animation: none; }
  .layer-mark .mark-sm { transition: none; }
}


/* ══════════════════════════════════════════════════════════
   CAPABILITIES — RESPONSIVE
   Three states rather than one shrinking layout:

   ≥1100px  list beside the axo panel
   700–1100 stacked, panel shortened and moved under the list
   <700px   panel dropped entirely; each row carries its own
            mark instead, and the selected row's mark tips —
            so the axo survives on a device with no hover
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .layersched { grid-template-columns: 1fr; }
  .layersched-view { min-block-size: 280px; order: 2; }
  .layer-row { padding-block: 20px; }
}

@media (max-width: 700px) {
  /* A dark box nobody can interact with is dead weight on a
     phone. The marks in the rows carry the identity instead. */
  .layersched-view { display: none; }
  .layersched { border-block-end: 0; }

  .layer-row {
    grid-template-columns: 26px 38px 1fr;
    gap: 14px;
    padding: 20px var(--pad-x);
  }
  .layer-mark { inline-size: 38px; block-size: 38px; }
  .layer-name { font-size: 14px; }
  .layer-text { font-size: 12.5px; }
  .layersched-caption { padding-block: 12px 20px; }
}

@media (max-width: 460px) {
  .layer-row { grid-template-columns: 22px 30px 1fr; gap: 11px; }
  .layer-mark { inline-size: 30px; block-size: 30px; }
  .layer-bub { inline-size: 22px; block-size: 22px; font-size: 9px; }
  .layer-code { font-size: 8.5px; }
}

/* ══════════════════════════════════════════════════════════
   CONTACT — restored, with the narrow cases tightened
   ══════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  .terminus { padding-block: 72px 0; }
  .terminus-head { margin-block-end: 38px; }
  .terminus-chainage {
    position: static;
    display: block;
    padding-block-start: 10px;
    text-align: start;
  }
  .terminus-cta { inline-size: 100%; justify-content: center; }
}


/* ══════════════════════════════════════════════════════════
   NAV — RESPONSIVE

   Four items compete for one 60px row: the brand, the link
   list, the location and the language toggle. Squeezing gaps
   only postpones the collision, so the nav changes shape
   instead.

   ≥1040px  brand · links · location + language
   760–1040 location drops, gaps tighten
   <760px   two rows — brand and language on top, the links
            below as a strip that scrolls edge to edge
   ══════════════════════════════════════════════════════════ */

/* Give the links somewhere to go before things collide */
@media (max-width: 1040px) {
  .nav-location { display: none; }
  .nav-links { gap: 22px; }
}

@media (max-width: 900px) {
  .nav-links { gap: 16px; }
  .nav-links a { font-size: 10px; letter-spacing: var(--track-xs); }
  .nav-brand { font-size: 11px; letter-spacing: var(--track-sm); }
}

/* ── Two-row nav ──────────────────────────────────────────
   --nav-h is redeclared so anchor offsets and the fixed
   header keep agreeing with each other.
*/
@media (max-width: 760px) {
  :root { --nav-h: 94px; }

  .nav {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: 52px 1fr;
    align-items: center;
    block-size: var(--nav-h);
    padding-block: 0;
    gap: 0;
  }

  .nav-brand { grid-area: 1 / 1; font-size: 12px; }
  .nav-end   { grid-area: 1 / 2; gap: 12px; }

  /* The strip bleeds to both edges, so links scroll out of
     view rather than being cut off mid-word */
  .nav-links {
    grid-area: 2 / 1 / 3 / 3;
    align-self: stretch;
    align-items: center;
    gap: 22px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    border-block-start: 1px solid var(--g200);
    margin-inline: calc(var(--pad-x) * -1);
    padding-inline: var(--pad-x);
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links li { flex: none; }
  .nav-links a { font-size: 10px; white-space: nowrap; }

  .lang-toggle { padding: 4px 8px; font-size: 10px; }
}

@media (max-width: 400px) {
  .nav-brand { font-size: 11px; letter-spacing: var(--track-xs); }
  .nav-links { gap: 18px; }
}

/* An anchor jump should never land under the fixed header */
html { scroll-padding-block-start: calc(var(--nav-h) + 16px); }


/* ══════════════════════════════════════════════════════════
   HERO — cleaned

   1. Only the two direct children stack. The per-word spans
      the hover splitter injects were being caught by
      `.hero-name span { display: block }`, which is why the
      name broke onto three lines.
   2. Sized so the longest word clears the viewport with room,
      rather than sitting on the edge of overflow.
   3. Hover reworked — see below.
   ══════════════════════════════════════════════════════════ */

.hero-name {
  font-size: clamp(38px, 8.2vw, 104px);
  line-height: 0.94;
}

/* the two lines of the name */
.hero-name > span {
  display: block;
  white-space: nowrap;
}

/* the words inside them */
.hero-name .split-word {
  display: inline-block;
  white-space: normal;
}

/* ── Hover ────────────────────────────────────────────────
   The scale-up was wrong here. At ~100px a word growing 18%
   shoves its neighbours and reads as a wobble, and because
   each line was its own hover scope, hovering "Ernest" left
   "Mandisodza" untouched.

   Now the whole name is one scope, and the unhovered words
   go to outline rather than dimming — the same move as a
   drawing dropping to line weight, and it shifts nothing.
*/
.hero-name .words-hover:hover .split-word,
.hero-name .words-hover:hover .split-word:hover {
  opacity: 1;
  transform: none;
}

.hero-name .split-word {
  transition: color 0.28s var(--ease), -webkit-text-stroke-color 0.28s var(--ease);
}

@supports (-webkit-text-stroke: 1px black) {
  .hero-name:hover .split-word {
    color: transparent;
    -webkit-text-stroke: 1.4px var(--black);
  }
  .hero-name .split-word:hover {
    color: var(--black);
    -webkit-text-stroke-color: transparent;
  }
}

/* Browsers without text-stroke keep the dim, minus the jump */
@supports not (-webkit-text-stroke: 1px black) {
  .hero-name:hover .split-word { opacity: 0.28; }
  .hero-name .split-word:hover { opacity: 1; }
}

/* ── Layout ─────────────────────────────────────────────── */
.hero {
  column-gap: 72px;
  align-items: end;
}
.hero-right { padding-block-end: 10px; }

@media (max-width: 1100px) {
  .hero { align-items: start; }
}

@media (max-width: 700px) {
  .hero-name { font-size: clamp(32px, 12vw, 60px); }
  .hero-tagline { margin-block-end: 30px; }
  .hero-stats { gap: 26px 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-name .split-word { transition: none; }
}


/* ══════════════════════════════════════════════════════════
   LANDING — statement
   Five arrangements. Each block below is static HTML: the
   switcher only shows and hides them, so the landing works
   with JavaScript off.
   ══════════════════════════════════════════════════════════ */

.stmt { display: none; }
.stmt.is-on { display: block; }

.stmt-inner {
  padding-inline: var(--pad-x);
  padding-block: calc(var(--nav-h) + 88px) 76px;
  position: relative;
}

.stmt-name {
  font-size: 11px; font-weight: 700;
  letter-spacing: var(--track-lg); text-transform: uppercase;
  margin-block-end: 30px;
}

.stmt-line {
  font-size: clamp(27px, 4.3vw, 56px);
  font-weight: 800;
  letter-spacing: var(--track-display);
  line-height: 1.38;
  max-inline-size: 21ch;
  margin-block-end: 42px;
}

/* Load-bearing phrases get dimensioned, as anything that
   matters on a drawing does */
.stmt-line .dim-term {
  position: relative;
  display: inline-block;
  padding-block-end: 0.34em;
}
.stmt-line .dim-term::before {
  content: '';
  position: absolute;
  inset-block-end: 0.16em; inset-inline: 0;
  border-block-end: 1px solid var(--g400);
}
.stmt-line .dim-term::after {
  content: attr(data-label);
  position: absolute;
  inset-block-end: -0.58em; inset-inline: 0;
  text-align: center;
  font-size: 9px; font-weight: 700;
  letter-spacing: var(--track-md); text-transform: uppercase;
  color: var(--g400); white-space: nowrap;
}
.stmt-line .dim-tick {
  position: absolute;
  inset-block-end: 0.16em;
  inline-size: 1px; block-size: 9px;
  background: var(--g400);
}
.stmt-line .dim-tick--s { inset-inline-start: 0; }
.stmt-line .dim-tick--e { inset-inline-end: 0; }

.stmt-sub {
  font-size: 14px; line-height: 1.75; color: var(--g600);
  max-inline-size: 56ch; margin-block-end: 40px;
}

.stmt-stats { display: flex; flex-wrap: wrap; gap: 44px; }
.stmt-stat-num {
  display: block; font-size: 24px; font-weight: 800;
  letter-spacing: var(--track-snug); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stmt-stat-label {
  display: block; font-size: 9px; font-weight: 500;
  letter-spacing: var(--track-md); text-transform: uppercase;
  color: var(--g400); margin-block-start: 6px;
}

/* The mark, plotting itself in */
.stmt-mark {
  position: absolute;
  inset-inline-end: 5vw; inset-block-start: 50%;
  transform: translateY(-50%);
  inline-size: min(27vw, 310px); block-size: min(27vw, 310px);
  color: var(--g200);
  pointer-events: none;
}
.stmt-mark .glyph-layer :is(path, rect, line, polyline, polygon, circle, ellipse) {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: plot 2.4s var(--ease) 0.3s forwards;
}
.stmt-mark .glyph-layer--str :is(path, rect, line, polyline, polygon, circle, ellipse) { animation-delay: 0.7s; }
.stmt-mark .glyph-layer--mep :is(path, rect, line, polyline, polygon, circle, ellipse) { animation-delay: 1.1s; }
.stmt-mark .glyph-layer--str { opacity: 0.6; }
.stmt-mark .glyph-layer--mep { opacity: 0.35; }

/* ── B · three columns ──────────────────────────────────── */
.stmt-tri {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--g200);
  border-block-start: 1px solid var(--g200);
}
.stmt-tri-col {
  background: var(--white);
  padding: 30px var(--pad-x) 34px;
  display: block;
  transition: background 0.2s;
}
.stmt-tri-col:hover { background: var(--g50); }
.stmt-tri-key {
  font-size: 9px; font-weight: 700;
  letter-spacing: var(--track-xl); text-transform: uppercase;
  color: var(--g400); margin-block-end: 14px;
}
.stmt-tri-col:hover .stmt-tri-key { color: var(--black); }
.stmt-tri-head {
  font-size: 16px; font-weight: 700;
  letter-spacing: var(--track-tight); line-height: 1.3;
  margin-block-end: 8px;
}
.stmt-tri-txt { font-size: 12.5px; line-height: 1.7; color: var(--g600); }
.stmt-tri-cue {
  display: inline-block; margin-block-start: 12px;
  font-size: 10px; font-weight: 700;
  letter-spacing: var(--track-md); text-transform: uppercase;
  color: var(--g400);
}
.stmt-tri-col:hover .stmt-tri-cue { color: var(--black); }
.stmt-tri-cue::after { content: ' \2192'; }

/* ── C · full screen ────────────────────────────────────── */
.stmt--full .stmt-inner {
  min-block-size: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: calc(var(--nav-h) + 40px) 96px;
}
.stmt--full .stmt-line {
  font-size: clamp(30px, 5.4vw, 74px);
  max-inline-size: 18ch;
}
.stmt-scroll {
  position: absolute;
  inset-block-end: 34px; inset-inline-start: var(--pad-x);
  font-size: 9px; font-weight: 700;
  letter-spacing: var(--track-lg); text-transform: uppercase;
  color: var(--g400);
}
.stmt-scroll::after { content: ' \2193'; }

/* ── D · on the datum ───────────────────────────────────── */
.stmt-datum {
  position: relative;
  border-block-start: 1.5px solid var(--black);
  margin-block-start: 44px;
}
.stmt-datum::before,
.stmt-datum::after {
  content: '';
  position: absolute; inset-block-start: -9px;
  inline-size: 1.5px; block-size: 18px; background: var(--black);
}
.stmt-datum::before { inset-inline-start: 0; }
.stmt-datum::after { inset-inline-end: 0; }
.stmt-chainage {
  position: absolute;
  inset-block-start: 11px; inset-inline-end: 0;
  font-size: 9px; font-weight: 700;
  letter-spacing: var(--track-lg); text-transform: uppercase;
  color: var(--g400); font-variant-numeric: tabular-nums;
}
.stmt--datum .stmt-stats { padding-block-start: 38px; }

/* ── E · statement beside the index ─────────────────────── */
.stmt--index .stmt-inner {
  display: grid;
  grid-template-columns: 1.4fr 340px;
  column-gap: 64px;
  align-items: end;
}
.stmt--index .stmt-mark { display: none; }
.stmt-idx-head {
  font-size: 9px; font-weight: 700;
  letter-spacing: var(--track-xl); text-transform: uppercase;
  color: var(--g400);
  padding-block-end: 10px; border-block-end: 1px solid var(--black);
}
.stmt-idx { list-style: none; }
.stmt-idx a {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 14px; align-items: baseline;
  padding-block: 13px;
  border-block-end: 1px solid var(--g200);
  transition: padding-inline-start 0.24s var(--ease);
}
.stmt-idx a:hover { padding-inline-start: 8px; }
.stmt-idx-no {
  font-size: 10px; font-weight: 700; letter-spacing: var(--track-md);
  color: var(--g400); font-variant-numeric: tabular-nums;
}
.stmt-idx-name { font-size: 13.5px; font-weight: 700; letter-spacing: var(--track-tight); }
.stmt-idx-count { font-size: 11px; color: var(--g400); font-variant-numeric: tabular-nums; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1000px) {
  .stmt--index .stmt-inner { grid-template-columns: 1fr; row-gap: 46px; }
}
@media (max-width: 860px) {
  .stmt-mark { display: none; }
  .stmt-line, .stmt--full .stmt-line { max-inline-size: none; }
  .stmt-tri { grid-template-columns: 1fr; }
  .stmt-tri-col { padding-block: 24px 26px; }
}
@media (max-width: 700px) {
  .stmt-inner { padding-block: calc(var(--nav-h) + 52px) 56px; }
  .stmt-line { line-height: 1.5; margin-block-end: 36px; }
  .stmt-stats { gap: 24px 34px; }
  .stmt-chainage {
    position: static; display: block;
    padding-block-start: 10px; text-align: start;
  }
  .stmt--full .stmt-inner { min-block-size: 92vh; }
}

@media (prefers-reduced-motion: reduce) {
  .stmt-mark .glyph-layer :is(path, rect, line, polyline, polygon, circle, ellipse) { stroke-dashoffset: 0; animation: none; }
  .stmt-idx a, .stmt-tri-col { transition: none; }
}

@media print {
  .stmt--full .stmt-inner { min-block-size: 0; }
  .stmt-mark, .stmt-scroll { display: none; }
}


/* ══════════════════════════════════════════════════════════
   ENTRANCE
   One orchestrated sequence: the sentence is written, then
   dimensioned. The annotation arrives after the line it
   measures, which is the whole point of the device.
   ══════════════════════════════════════════════════════════ */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes drawX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Statement ───────────────────────────────────────────── */
.js .stmt .stmt-name,
.js .stmt .stmt-line,
.js .stmt .stmt-sub,
.js .stmt .stmt-stats > div,
.js .stmt .stmt-tri-col { opacity: 0; }

.stmt.is-in .stmt-name { animation: riseIn 0.6s var(--ease) 0.05s both; }
.stmt.is-in .stmt-line { animation: riseIn 0.7s var(--ease) 0.15s both; }
.stmt.is-in .stmt-sub  { animation: riseIn 0.6s var(--ease) 0.32s both; }
.stmt.is-in .stmt-stats > div {
  animation: riseIn 0.55s var(--ease) both;
  animation-delay: calc(0.42s + var(--i, 0) * 0.07s);
}
.stmt.is-in .stmt-tri-col {
  animation: riseIn 0.6s var(--ease) both;
  animation-delay: calc(0.66s + var(--i, 0) * 0.09s);
}

/* The sentence is written first, then dimensioned — the
   annotation arrives after the line it measures. */
.js .stmt-line .dim-term::before { transform: scaleX(0); transform-origin: 0 50%; }
.js .stmt-line .dim-tick,
.js .stmt-line .dim-term::after { opacity: 0; }

.stmt.is-in .dim-term::before { animation: drawX 0.5s var(--ease) 0.95s both; }
.stmt.is-in .dim-tick { animation: fadeIn 0.3s var(--ease) 1.4s both; }
.stmt.is-in .dim-term::after { animation: fadeIn 0.4s var(--ease) 1.5s both; }

/* The mark keeps plotting on its own clock */
.stmt-mark .glyph-layer :is(path, rect, line, polyline, polygon, circle, ellipse) { animation-play-state: paused; }
.stmt.is-in .stmt-mark .glyph-layer :is(path, rect, line, polyline, polygon, circle, ellipse) { animation-play-state: running; }

@media (prefers-reduced-motion: reduce) {
  .stmt .stmt-name, .stmt .stmt-line, .stmt .stmt-sub,
  .stmt .stmt-stats > div, .stmt .stmt-tri-col,
  .stmt-line .dim-tick { opacity: 1; animation: none; }
  .stmt-line .dim-term::before { transform: scaleX(1); animation: none; }
  .stmt-line .dim-term::after { opacity: 1; animation: none; }
  .stmt-mark .glyph-layer :is(path, rect, line, polyline, polygon, circle, ellipse) { animation: none; stroke-dashoffset: 0; }
}

/* Code, name and tools each on their own line. They are spans inside a
   button, so without this they ran together on one line. */
.layer-code, .layer-name, .layer-text { display: block; }

/* ══════════════════════════════════════════════════════════
   SHADOWS
   Few and soft. Only things that sit above the sheet get one:
   the nav once the page moves under it, the dark drawing
   panels, the project sheet, and layers lifted in the axo.
   ══════════════════════════════════════════════════════════ */
:root {
  --shadow-hair:  0 1px 2px rgba(10, 10, 10, 0.05);
  --shadow-lift:  0 1px 2px rgba(10, 10, 10, 0.04), 0 10px 24px -12px rgba(10, 10, 10, 0.18);
  --shadow-panel: 0 1px 3px rgba(10, 10, 10, 0.05), 0 24px 48px -24px rgba(10, 10, 10, 0.24);
}

.nav { transition: box-shadow 0.3s var(--ease); }
.nav.is-scrolled { box-shadow: 0 1px 0 rgba(10, 10, 10, 0.04), 0 8px 20px -14px rgba(10, 10, 10, 0.22); }

/* dark drawing panels: callout, sheet and the capability stack */
.detail-canvas,
.layersched-view { box-shadow: var(--shadow-lift); }
.sheet-body { box-shadow: var(--shadow-panel); }

/* exploded axo: lifted layers cast onto the ones below */
.d-axo .sec-col:hover .glyph-layer--arc,
.d-axo .sec-col:focus-visible .glyph-layer--arc { filter: drop-shadow(0 10px 6px rgba(10, 10, 10, 0.14)); }
.d-axo .sec-col:hover .glyph-layer--str,
.d-axo .sec-col:focus-visible .glyph-layer--str { filter: drop-shadow(0 6px 4px rgba(10, 10, 10, 0.08)); }
.d-axo .glyph-layer { transition: transform 0.65s var(--ease), opacity 0.4s var(--ease), filter 0.65s var(--ease); }

/* the chosen capability and the timeline bars sit just proud */
.layer-row[aria-current="true"] { box-shadow: var(--shadow-hair); }
.prog-bar:not(.prog-bar--freelance) { box-shadow: var(--shadow-hair); }

/* buttons lift a little on hover */
.callout-more, .terminus-cta { transition: background 0.2s, color 0.2s, box-shadow 0.25s var(--ease); }
.callout-more:hover, .terminus-cta:hover { box-shadow: var(--shadow-lift); }

@media (prefers-reduced-motion: reduce) {
  .nav, .d-axo .glyph-layer, .callout-more, .terminus-cta { transition: none; }
}

/* On phones the bars are too short for their labels; the full dates
   already print under each role, so the bars go label-free. */
@media (max-width: 700px) {
  .prog-bar-txt { display: none; }
}

/* ── Language menu ───────────────────────────────────────────
   A native select: works with keyboard, screen readers and phone
   pickers. Hidden without JavaScript, since nothing would drive it. */
.lang-pick { display: none; }
.js .lang-pick { display: inline-flex; align-items: center; }
.lang-select {
  font-family: inherit;
  text-transform: none;
  background: transparent;
  cursor: pointer;
}

/* ── Right-to-left (Arabic) ──────────────────────────────────
   Layout mirrors through logical properties; arrows drawn as
   glyphs have to be turned round by hand. */
[dir="rtl"] .callout-more::after { content: ' ←'; }
[dir="rtl"] .sheet-back::before { content: '→ '; }
[dir="rtl"] .terminus-cta::after { content: '←'; }
[dir="rtl"] .sheet-step button { transform: scaleX(-1); }
[dir="rtl"] .stmt-tri-cue::after { content: ' \2190'; }

/* ── CV + vCard downloads ─────────────────────────────────── */
.nav-cv {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700;
  letter-spacing: var(--track-sm); text-transform: uppercase;
  color: var(--black);
  border: 1px solid var(--g300); border-radius: var(--r);
  padding: 5px 10px;
  transition: border-color 0.2s, background 0.2s;
}
.nav-cv::after { content: '↓'; font-weight: 500; }
.nav-cv:hover { border-color: var(--black); background: var(--g100); }

.terminus-files {
  list-style: none; margin: 0; padding: 0;
  margin-block-start: 22px;
  display: flex; flex-wrap: wrap; gap: 10px 28px;
}
.terminus-files a {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-size: 11px; font-weight: 700;
  letter-spacing: var(--track-md); text-transform: uppercase;
  color: var(--black);
  padding-block: 6px;
  border-block-end: 1px solid var(--g300);
  transition: border-color 0.2s;
}
.terminus-files a::before { content: '↓'; font-weight: 500; }
.terminus-files a:hover { border-color: var(--black); }
.terminus-files small {
  font-size: 9px; font-weight: 500;
  letter-spacing: var(--track-sm); color: var(--g400);
}
@media (max-width: 760px) {
  .nav-cv { padding: 5px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-cv, .terminus-files a { transition: none; }
}
@media (max-width: 400px) {
  .nav-end { gap: 8px; }
  .nav-cv::after { content: none; }
}

/* ══════════════════════════════════════════════════════════
   AI-ENABLED BUILDS — a lab register, download only
   ══════════════════════════════════════════════════════════ */
.builds { padding-block-end: 72px; }
.builds .section-header { align-items: flex-end; }
.builds-policy {
  font-size: 10px; font-weight: 500; letter-spacing: var(--track-md);
  text-transform: uppercase; color: var(--g400); max-inline-size: 30ch; text-align: end;
}
.builds-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px;
  padding-inline: var(--pad-x);
}
.builds-group { border-block-start: 2px solid var(--black); }
.builds-group-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-block: 14px 4px;
  font-size: 11px; font-weight: 800; letter-spacing: var(--track-xl); text-transform: uppercase;
}
.builds-count {
  font-size: 10px; font-weight: 500; color: var(--g400);
  border: 1px solid var(--g300); border-radius: 50%;
  inline-size: 22px; block-size: 22px; display: inline-grid; place-items: center;
  letter-spacing: 0;
}
.builds-group-note { font-size: 12px; color: var(--g600); padding-block-end: 14px; border-block-end: 1px solid var(--g200); }
.builds-group--wip .builds-group-head > span:first-child::before {
  content: ''; display: inline-block; inline-size: 7px; block-size: 7px; margin-inline-end: 8px;
  border: 1.5px dashed currentColor; border-radius: 50%; vertical-align: 1px;
}
.builds-group--deployed .builds-group-head > span:first-child::before {
  content: ''; display: inline-block; inline-size: 7px; block-size: 7px; margin-inline-end: 8px;
  background: #2E9E5B; border-radius: 50%; vertical-align: 1px;
}
.builds-list { list-style: none; margin: 0; padding: 0; }
.build {
  display: grid; grid-template-columns: 52px 1fr auto; gap: 4px 16px; align-items: start;
  padding-block: 18px; border-block-end: 1px solid var(--g200);
}
.build--empty { display: block; font-size: 12px; color: var(--g400); }
.build-ref { font-size: 10px; font-weight: 700; letter-spacing: var(--track-sm); color: var(--g400); padding-block-start: 2px; }
.build-name { font-size: 14px; font-weight: 800; letter-spacing: var(--track-xs); margin-block-end: 6px; }
.build-txt { font-size: 13px; line-height: 1.6; color: var(--g600); margin-block-end: 8px; max-inline-size: 52ch; }
.build-stack {
  font-size: 10px; font-weight: 500; letter-spacing: var(--track-sm); text-transform: uppercase; color: var(--g400);
  display: flex; flex-wrap: wrap; gap: 4px 14px;
}
.build-dl {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  min-inline-size: 104px; padding: 9px 12px;
  font-size: 10px; font-weight: 700; letter-spacing: var(--track-md); text-transform: uppercase;
  border: 1.5px solid var(--black); border-radius: var(--r); color: var(--black); text-align: center;
  transition: background 0.2s, color 0.2s;
}
a.build-dl span::before { content: '↓ '; }
a.build-dl:hover { background: var(--black); color: var(--white); }
.build-dl small { font-size: 9px; font-weight: 500; letter-spacing: var(--track-xs); color: inherit; opacity: 0.7; }
.build-dl--off { border: 1.5px dashed var(--g300); color: var(--g400); }

@media (max-width: 900px) {
  .builds-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 560px) {
  .builds .section-header { flex-direction: column; align-items: flex-start; }
  .builds-policy { text-align: start; }
  .build { grid-template-columns: 1fr; gap: 6px; }
  .build-dl { justify-self: start; flex-direction: row; gap: 8px; margin-block-start: 6px; }
}
@media (prefers-reduced-motion: reduce) { .build-dl { transition: none; } }