/* hire74: route-scoped editorial layouts. Shared -74 type, frame, grounds and v6f cards stay in their own modules. */
html body[data-page=hire]{
  --hire-gutter:4vw;
  --hire-gap:2vw;
  --hire-panel:color-mix(in oklab,var(--g-warm-grey) 94%,var(--g-warm-grey-ink));
  --on:var(--g-warm-grey-ink);
  --gt:var(--g-warm-grey);
  --wall:var(--g-warm-grey);
  --wall-on:var(--g-warm-grey-ink);
  --r-panel:16px;
  background:transparent;
  color:var(--g-warm-grey-ink);
}
html body[data-page=hire] main>section,
html body[data-page=hire] #footer{
  --cool-ground:var(--g-warm-grey);
  --cool-ink:var(--g-warm-grey-ink);
  --cool-muted:var(--g-warm-grey-muted);
  --cool-quiet:var(--g-warm-grey-quiet);
  --cool-line:color-mix(in oklab,var(--g-warm-grey),var(--g-warm-grey-ink) 20%);
  --cool-chip:color-mix(in oklab,var(--g-warm-grey),var(--g-warm-grey-ink) 8%);
  --cool-card:var(--g-warm-grey);
  --paper:var(--cool-ground);
  --ink:var(--cool-ink);
  --muted:var(--cool-muted);
  --line:var(--cool-line);
  --surface:var(--cool-ground);
  --raised:var(--cool-card);
  --hero-ink:var(--cool-ink);
  --ui-bg:var(--cool-ink);
  --ui-fg:var(--cool-ground);
  color:var(--cool-ink);
}
html body[data-page=hire] main>section:not(.hire-hero){background:var(--cool-ground)}
html body[data-page=hire] main{overflow:clip}
html body[data-page=hire] h1,html body[data-page=hire] h2,html body[data-page=hire] h3,html body[data-page=hire] h4,html body[data-page=hire] p,html body[data-page=hire] li{min-width:0}
html body[data-page=hire] h1,html body[data-page=hire] h2,html body[data-page=hire] h3,html body[data-page=hire] h4{text-wrap:balance}
html body[data-page=hire] ::selection{background:var(--cool-ink);color:var(--cool-ground)}

/* The 12-column grid: 4vw margins, 2vw gutters; column lines at 4vw + n × 7.8333vw. */
@media (min-width:1101px){
  html body[data-page=hire] .hire-hero-grid,html body[data-page=hire] .hire-section-head,html body[data-page=hire] .hire-capability,html body[data-page=hire] .hire-close{
    display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--hire-gap);
  }
  html body[data-page=hire] .hire-section-head>h2{grid-column:1/span 7}
  html body[data-page=hire] .hire-section-head>p,
  html body[data-page=hire] .hire-section-head>.hire-ai-copy{grid-column:9/span 4;align-self:end}
}

/* Hero: one display dominant, the proposition hanging in the staircase it leaves. */
html body[data-page=hire] .hire-hero.work-section:not(#_h){
  position:relative;
  min-height:100svh;
  margin:0;
  padding:clamp(132px,16svh,176px) var(--hire-gutter) clamp(104px,12svh,136px);
  background:transparent;
}
html body[data-page=hire] .hire-hero-grid{align-items:end;row-gap:48px}
html body[data-page=hire] .hire-hero h1:not(#_h){
  grid-column:1/span 10;
  font-size:clamp(36px,11.28vw,128px)!important;
  line-height:.94!important;
  letter-spacing:var(--t-track-l)!important;
  white-space:normal!important;
  text-wrap:normal!important;
}
html body[data-page=hire] .hire-hero-side{grid-column:9/span 4;align-self:end;padding-bottom:.35em}
html body[data-page=hire] .hire-hero-intro{
  max-width:34em;
  font-family:var(--t-mono);
  font-size:var(--t-lede-mono);
  line-height:1.48;
  letter-spacing:0;
  text-wrap:pretty;
}
html body[data-page=hire] .hire-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
html body[data-page=hire] .hire-actions .text-button{white-space:nowrap}
html body[data-page=hire] .hire-primary:not(#_u):not(#_v):not(#_w){
  background:var(--cool-ink)!important;
  color:var(--cool-ground)!important;
  border-color:var(--cool-ink)!important;
  --mi-fill:var(--cool-ground);
}
html body[data-page=hire] .hire-primary.mi-on:not(#_u):not(#_v):not(#_w){
  background:transparent!important;
  color:var(--cool-ink)!important;
}

/* Reading sections: generous pauses, no eyebrow rows and no decorative rules. */
html body[data-page=hire] .hire-capabilities.work-section:not(#_h),html body[data-page=hire] .hire-proof.work-section:not(#_h),html body[data-page=hire] .hire-ai.work-section:not(#_h),html body[data-page=hire] .hire-process.work-section:not(#_h){
  margin:0;
  padding:clamp(112px,12vw,176px) var(--hire-gutter);
}
html body[data-page=hire] .hire-proof.work-section:not(#_h){padding-top:clamp(64px,7vw,104px)}
html body[data-page=hire] .hire-section-head{align-items:last baseline;row-gap:32px;margin-bottom:clamp(64px,7vw,104px)}
html body[data-page=hire] .hire-section-head>h2{
  margin:0;
  font-family:var(--t-display);
  font-size:var(--t-l);
  font-weight:400;
  line-height:var(--t-lh-l);
  letter-spacing:var(--t-track-l);
}
html body[data-page=hire] .hire-section-head>p,
html body[data-page=hire] .hire-ai-copy{
  max-width:34em;
  margin:0;
  font-size:var(--t-body);
  line-height:1.5;
  color:var(--cool-muted);
}
html body[data-page=hire] .hire-ai-copy{display:grid;gap:16px}
html body[data-page=hire] .hire-ai-copy>p:last-child{font-size:var(--t-small);line-height:1.45}

/* Capabilities: a staircase «from logic to interface» (31 Oct 2026, run 6; the owner: «/hire feels generic»). The heading
   names the direction, so the four practices take it on the grid: each step starts two columns further right (1, 3, 5,
   7 from 1101 px; a share of the measure below), product logic first and the checked interface last, the name and its
   note hanging from one axis. The page's one diagonal, drawn by the grid alone: no line, number or marker. DOM order,
   headings and reading order are unchanged. */
html body[data-page=hire] .hire-capability-list{display:grid;gap:clamp(40px,4.4vw,64px)}
html body[data-page=hire] .hire-capability{display:grid;align-items:start;row-gap:16px}
html body[data-page=hire] .hire-capability:nth-child(2){--step:1}
html body[data-page=hire] .hire-capability:nth-child(3){--step:2}
html body[data-page=hire] .hire-capability:nth-child(4){--step:3}
html body[data-page=hire] .hire-capability>h3{
  font-family:var(--t-display);
  font-size:var(--t-m);
  font-weight:400;
  line-height:var(--t-lh-m);
  letter-spacing:var(--t-track-m);
}
html body[data-page=hire] .hire-capability>p{max-width:34em;font-size:var(--t-body);line-height:1.55;color:var(--cool-muted);text-wrap:pretty}
@media (min-width:1101px){
  html body[data-page=hire] .hire-capability>h3{grid-row:1;grid-column:1/span 6}
  html body[data-page=hire] .hire-capability>p{grid-row:2;grid-column:1/span 5}
  html body[data-page=hire] .hire-capability:nth-child(2)>h3{grid-column:3/span 6}
  html body[data-page=hire] .hire-capability:nth-child(2)>p{grid-column:3/span 5}
  html body[data-page=hire] .hire-capability:nth-child(3)>h3{grid-column:5/span 6}
  html body[data-page=hire] .hire-capability:nth-child(3)>p{grid-column:5/span 5}
  html body[data-page=hire] .hire-capability:nth-child(4)>h3{grid-column:7/span 6}
  html body[data-page=hire] .hire-capability:nth-child(4)>p{grid-column:7/span 5}
}
@media (max-width:1100px){
  html body[data-page=hire] .hire-capability-list{--stair:9%}
  html body[data-page=hire] .hire-capability{margin-inline-start:calc(var(--step,0) * var(--stair))}
}

/* Four v6f proof links; the real cover remains the no-JS and pre-print fallback. */
html body[data-page=hire] #projects .gw-grid{gap:12px}
html body[data-page=hire] #projects .gw-card{min-width:0}
html body[data-page=hire] #projects .gw-card a{min-width:0}
html body[data-page=hire] #projects .gw-field{isolation:isolate}
html body[data-page=hire] #projects .gw-field::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--cover-image);background-size:cover;background-position:center;
  transition:opacity 180ms linear;
}
html.hire-covers-ready body[data-page=hire] #projects .gw-field::before{opacity:0}
html body[data-page=hire] #projects .gw-field canvas{z-index:1}
html body[data-page=hire] #projects .gw-year{z-index:2}
html body[data-page=hire] #projects .gw-plate{min-height:112px}
html body[data-page=hire] #projects .gw-plate p{text-wrap:pretty}
html body[data-page=hire] #projects .gw-plate img{margin-top:2px}
@media (max-width:1100px){html body[data-page=hire] #projects .gw-grid[data-view="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* The single interactive scene: accessible DOM first, enhanced layout second. */
html body[data-page=hire] .hire-system{
  padding:clamp(24px,3.3vw,48px);
  border-radius:16px;
  background:var(--hire-panel);
}
html body[data-page=hire] .hire-system-toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:clamp(40px,5vw,64px)}
html body[data-page=hire] .hire-system-toolbar>p{max-width:34em;font-size:var(--t-body);line-height:1.5;color:var(--cool-muted)}
html body[data-page=hire] .hire-system-toggle{flex:none}
html body[data-page=hire] .hire-system-toggle.mi-on:not(#_u):not(#_v):not(#_w){background:var(--cool-ink)!important;color:var(--cool-ground)!important}
html:not(.hire-js) body[data-page=hire] .hire-system-toggle:not(#_u):not(#_v):not(#_w){display:none!important}
html body[data-page=hire] .hire-system-stage{position:relative;isolation:isolate}
/* The relay (run 6): the links are drawn in both views (the compact row's «→» glyphs beside the names are gone), the work
   going forward in a solid line and the way back, review to issues to the specialist, in round dots, the hero ovals'
   pairing of one dotted and one solid line given a meaning. One ring-and-dot glyph, the print's fullest d16 cell, carries
   a task through the links once (js/hire74.js): straight across in the compact row, round the return loop in the system
   view, as the note above says. Never under reduced motion, never looping. */
html body[data-page=hire] .hire-connections{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;overflow:visible;
  color:var(--cool-muted);opacity:0;pointer-events:none;
}
html.hire-js body[data-page=hire] .hire-connections{opacity:1}
html body[data-page=hire] .hire-connections path{fill:none;stroke:currentColor;stroke-width:1;stroke-opacity:1;vector-effect:non-scaling-stroke}
html body[data-page=hire] .hire-connections [data-link="review-issues"],html body[data-page=hire] .hire-connections [data-link="issues-specialists"]{stroke-width:2.25;stroke-linecap:round;stroke-dasharray:.01 7}
html body[data-page=hire] .hire-connections marker path{fill:currentColor;stroke:none}
html body[data-page=hire] .hire-relay{color:var(--cool-ink);opacity:0}
html body[data-page=hire] .hire-relay circle:first-child{fill:currentColor;stroke:none}   /* (cm3c) the hero cell: a whole disc */
html body[data-page=hire] .hire-relay circle:last-child{fill:var(--back,currentColor);stroke:none;r:3.45px}   /* the next ink's dot */
html body[data-page=hire] .hire-flow{
  position:relative;z-index:1;
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;
  align-items:start;
}
html body[data-page=hire] .hire-node{position:relative;min-width:0}
html body[data-page=hire] .hire-node-task{grid-column:1;grid-row:1}
html body[data-page=hire] .hire-node-specialists{grid-column:2;grid-row:1}
html body[data-page=hire] .hire-node-review{grid-column:3;grid-row:1}
html body[data-page=hire] .hire-node-shipped{grid-column:4;grid-row:1}
html body[data-page=hire] .hire-return{grid-column:2/span 2;grid-row:2}
html body[data-page=hire] .hire-node-head{display:flex;align-items:baseline;justify-content:flex-start;gap:16px}
html body[data-page=hire] .hire-node-head>h3,
html body[data-page=hire] .hire-return>h3{
  margin-bottom:16px;
  font-family:var(--t-display);
  font-size:clamp(30px,3vw,44px);
  font-weight:400;
  line-height:1;
  letter-spacing:var(--t-track-m);
}
html body[data-page=hire] .hire-node>p,
html body[data-page=hire] .hire-return>p,
html body[data-page=hire] :is(.hire-specialist-list,.hire-task-list) p{font-size:var(--t-small);line-height:1.5;color:var(--cool-muted);text-wrap:pretty}
html body[data-page=hire] .hire-node>p+p{margin-top:12px}
html body[data-page=hire] .hire-specialist-list,html body[data-page=hire] .hire-task-list{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:20px}
html body[data-page=hire] :is(.hire-specialist-list,.hire-task-list) h4{margin-bottom:8px;font-size:var(--t-body);font-weight:400;line-height:1.3}
html body[data-page=hire] .hire-return{padding-top:4px}
html body[data-page=hire] .hire-return>h3{font-size:var(--t-lead);font-family:var(--t-text);letter-spacing:0}
html body[data-page=hire] .hire-system[data-view="system"] .hire-node>p[data-handoff-copy]{display:none}
html body[data-page=hire] .hire-system[data-view="system"] .hire-node-specialists .hire-node-head>h3{font-size:32px}
@media (min-width:901px){
  html body[data-page=hire] .hire-system[data-view="system"] .hire-flow{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto auto;gap:48px 24px;align-items:center}
  html body[data-page=hire] .hire-system[data-view="system"] .hire-node-task{grid-column:1/span 3;grid-row:1/span 3;align-self:center}
  html body[data-page=hire] .hire-system[data-view="system"] .hire-node-specialists{grid-column:4/span 6;grid-row:1}
  html body[data-page=hire] .hire-system[data-view="system"] .hire-node-review{grid-column:5/span 4;grid-row:2;text-align:center}
  html body[data-page=hire] .hire-system[data-view="system"] .hire-return{grid-column:4/span 6;grid-row:3;text-align:center;max-width:62ch;justify-self:center}
  html body[data-page=hire] .hire-system[data-view="system"] .hire-node-shipped{grid-column:10/span 3;grid-row:1/span 3;align-self:center;text-align:right}
  html body[data-page=hire] .hire-system[data-view="system"] .hire-specialist-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
}
/* Review is the centre by its size, not by a box (the outline frame round it went in run 6): the four specialists' links
   meet a name set at the display M, the step where Dmytro integrates and decides. */
html body[data-page=hire] .hire-system[data-view="system"] .hire-node-review .hire-node-head>h3{font-family:var(--t-display);font-size:var(--t-m);line-height:var(--t-lh-m);letter-spacing:var(--t-track-m)}
/* the head stays a flex box (its name's margin inside it: js/hire74.js measures the Specialists' head for the return
   loop); with the arrow gone each name takes its node's alignment */
@media (min-width:901px){
  html body[data-page=hire] .hire-system[data-view="system"] .hire-node-review .hire-node-head{justify-content:center}
  html body[data-page=hire] .hire-system[data-view="system"] .hire-node-shipped .hire-node-head{justify-content:flex-end}
}

/* Process and the direct close. «A short process» is set short (run 6): the four steps stand as one dense block, two by
   two from 701 px (from 1101 px on column lines 1 and 7), against the staircase's long diagonal above, the grid's
   dense-versus-short contrast (DESIGN.md, Grid: E06); one column on phones. No numbers: the order is the reading order. */
html body[data-page=hire] .hire-process-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:max(24px,var(--hire-gap));row-gap:clamp(40px,4.4vw,64px)}
html body[data-page=hire] .hire-process-list>li{display:grid;align-content:start;row-gap:16px;min-width:0}
html body[data-page=hire] .hire-process-list h3{
  font-family:var(--t-display);
  font-size:var(--t-m);
  font-weight:400;
  line-height:var(--t-lh-m);
  letter-spacing:var(--t-track-m);
}
html body[data-page=hire] .hire-process-list p{max-width:30em;font-size:var(--t-body);line-height:1.55;color:var(--cool-muted);text-wrap:pretty}
html body[data-page=hire] .hire-close{align-items:center;row-gap:24px;margin-top:clamp(80px,9vw,128px)}
html body[data-page=hire] .hire-close>p{grid-column:1/span 6;max-width:38em;font-size:var(--t-lead);line-height:1.35}
html body[data-page=hire] .hire-close>.text-button{grid-column:9/span 3;justify-self:start}
/* (award-finish, 2 Nov) the year line took the old #5e6167 of redesign.css: 2.96:1 on the Hire ground at rest */
html body[data-page=hire] #footer .footer-bottom{border-top:0;color:var(--cool-muted)}
html body[data-page=hire] .contact-dialog .contact-portrait[data-surface=dark]{display:none}
html[data-theme=dark] body[data-page=hire] .contact-dialog .contact-portrait[data-surface=dark]{display:block}
html[data-theme=dark] body[data-page=hire] .contact-dialog .contact-portrait[data-surface=light]{display:none}
html body[data-page=hire] .contact-dialog .contact-heading>p{min-width:0}

/* A vertical system on phones and narrow tablets; no horizontal rail and no scroll capture. */
@media (max-width:900px){
  html body[data-page=hire]{--hire-gutter:5vw}
  html body[data-page=hire] .hire-hero-grid,
  html body[data-page=hire] .hire-section-head,
  html body[data-page=hire] .hire-close{display:grid;grid-template-columns:1fr;row-gap:28px}
  html body[data-page=hire] .hire-capability{grid-template-columns:minmax(0,1fr)}
  html body[data-page=hire] :where(h1):is(.hire-hero h1,.hire-hero-side,.hire-section-head>h2,.hire-section-head>p,.hire-section-head>.hire-ai-copy,.hire-capability>h3,.hire-capability>p,.hire-process-list h3,.hire-process-list p,.hire-close>p,.hire-close>.text-button),html body[data-page=hire] .hire-hero-side:not(._pz),html body[data-page=hire] :where(h2):is(.hire-hero h1,.hire-hero-side,.hire-section-head>h2,.hire-section-head>p,.hire-section-head>.hire-ai-copy,.hire-capability>h3,.hire-capability>p,.hire-process-list h3,.hire-process-list p,.hire-close>p,.hire-close>.text-button),html body[data-page=hire] :where(p):is(.hire-hero h1,.hire-hero-side,.hire-section-head>h2,.hire-section-head>p,.hire-section-head>.hire-ai-copy,.hire-capability>h3,.hire-capability>p,.hire-process-list h3,.hire-process-list p,.hire-close>p,.hire-close>.text-button),html body[data-page=hire] :where(.hire-ai-copy):is(.hire-section-head>.hire-ai-copy),html body[data-page=hire] :where(h3):is(.hire-hero h1,.hire-hero-side,.hire-section-head>h2,.hire-section-head>p,.hire-section-head>.hire-ai-copy,.hire-capability>h3,.hire-capability>p,.hire-process-list h3,.hire-process-list p,.hire-close>p,.hire-close>.text-button),html body[data-page=hire] :where(.text-button):is(.hire-close>.text-button){grid-column:1!important;grid-row:auto!important}
  html body[data-page=hire] .hire-hero-side{max-width:38em}
  html body[data-page=hire] .hire-section-head>p,
  html body[data-page=hire] .hire-section-head>.hire-ai-copy{max-width:38em}
  html body[data-page=hire] .hire-capability>p,
  html body[data-page=hire] .hire-process-list p{max-width:42em}
  html body[data-page=hire] .hire-flow{grid-template-columns:1fr;gap:32px}
  html body[data-page=hire] .hire-flow>.hire-node,
  html body[data-page=hire] .hire-flow>.hire-return{grid-column:1;grid-row:auto;max-width:52ch;text-align:left}
  html body[data-page=hire] .hire-specialist-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  html body[data-page=hire] .hire-system[data-view="system"] .hire-node>p[data-handoff-copy]{display:none}
  html body[data-page=hire] .hire-close>.text-button{justify-self:start}
}

@media (max-width:700px){
  html body[data-page=hire] .hire-hero.work-section:not(#_h){
    min-height:100svh;
    padding:112px 22px calc(104px + env(safe-area-inset-bottom,0px));
  }
  html body[data-page=hire] .hire-hero-grid{align-content:start;row-gap:36px}
  html body[data-page=hire] .hire-hero h1:not(#_h){font-size:clamp(36px,11.28vw,52px)!important;line-height:.96!important}
  html body[data-page=hire] .hire-hero-side{padding-bottom:0}
  html body[data-page=hire] .hire-hero-intro{font-size:16px;line-height:1.5}
  html body[data-page=hire] .hire-actions{gap:10px;margin-top:24px}
  html body[data-page=hire] .hire-capabilities.work-section:not(#_h),html body[data-page=hire] .hire-proof.work-section:not(#_h),html body[data-page=hire] .hire-ai.work-section:not(#_h),html body[data-page=hire] .hire-process.work-section:not(#_h){padding:88px 22px}
  html body[data-page=hire] .hire-proof.work-section:not(#_h){padding-top:48px}
  html body[data-page=hire] .hire-section-head{margin-bottom:56px;row-gap:24px}
  html body[data-page=hire] .hire-section-head>h2{font-size:var(--t-l)}
  html body[data-page=hire] .hire-capability-list{gap:48px;--stair:6%}
  html body[data-page=hire] .hire-capability{row-gap:16px}
  html body[data-page=hire] .hire-process-list{grid-template-columns:minmax(0,1fr)}
  html body[data-page=hire] #projects .gw-grid[data-view="4"]{gap:8px}
  html body[data-page=hire] #projects .gw-plate{min-height:124px;padding:12px 4px 6px}
  html body[data-page=hire] #projects .gw-plate img{display:none}
  html body[data-page=hire] #projects .gw-plate p{font-size:14px;line-height:1.35}
  html body[data-page=hire] #projects .gw-year{font-size:13px}
  html body[data-page=hire] .hire-system{padding:20px}
  html body[data-page=hire] .hire-system[data-view="system"] .hire-system-stage{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  html body[data-page=hire] .hire-system-toolbar{align-items:flex-start;flex-direction:column;margin-bottom:40px}
  html body[data-page=hire] .hire-system-toggle{width:100%}
  html body[data-page=hire] .hire-node>h3{font-size:32px}
  html body[data-page=hire] .hire-specialist-list{gap:20px}
  html body[data-page=hire] .hire-process-list{gap:40px}
  html body[data-page=hire] .hire-close{margin-top:64px}
  html body[data-page=hire] .hire-close>p{font-size:var(--t-lead)}
}

@media (max-width:370px){
  html body[data-page=hire] .hire-specialist-list{grid-template-columns:1fr}
  html body[data-page=hire] .hire-actions{flex-direction:column;align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  html body[data-page=hire] *,
  html body[data-page=hire] *::before,
  html body[data-page=hire] *::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html body[data-page=hire] .hire-relay{display:none}
}

@media (forced-colors:active){
  html body[data-page=hire] .hire-system{outline:1px solid CanvasText;outline-offset:8px}
  html body[data-page=hire] .hire-connections{color:CanvasText}
}

/* (opus-run11, 1 Nov 2026; the owner: «strongly dislikes the current arrows… redesign the whole scene and connections with
   creative care, not a glyph substitution»; Codex's actual 75y captures: hairline arrows on a flat panel, a dead gap after it)
   The route in the site's one grammar: every link a line of round d16 dots in the family's ink, flowing slowly the way the
   work goes; the way back (review to issues to the specialist) in the family's cool r2, flowing back faster: the one
   coloured motion on the panel is «review sends something back», as the note above says. Chevrons of five dots instead of
   the hairline's triangle. Each step's name stands on a station, the ring-and-dot glyph of the print's fullest cell; Review,
   where Dmytro decides, wears the cool r2. The flow runs only while the panel is on screen (js/hire74.js .is-live) and never
   under reduced motion. The pause after the panel is one section's, not two. */
html body[data-page=hire] .hire-system{--route:var(--cool-ink);--back:var(--g-warm-grey-r2,#526170)}
html body[data-page=hire] .hire-connections:not(#_r11) path{stroke:var(--route);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:0 9;opacity:.8}
html body[data-page=hire] .hire-connections:not(#_r11) [data-link="review-issues"],html body[data-page=hire] .hire-connections:not(#_r11) [data-link="issues-specialists"]{stroke:var(--back);stroke-width:3.8;stroke-dasharray:0 8;opacity:1}
html body[data-page=hire] .hire-connections:not(#_r11) .hire-chevron circle{fill:var(--route);stroke:none}
html body[data-page=hire] .hire-connections:not(#_r11) .hire-chevron.is-back circle{fill:var(--back)}
@keyframes hire-route{to{stroke-dashoffset:-18}}
@keyframes hire-back{to{stroke-dashoffset:-16}}
@media (prefers-reduced-motion:no-preference){
 html body[data-page=hire] .hire-system.is-live .hire-connections:not(#_r11) path{animation:hire-route 2.2s linear infinite}
 html body[data-page=hire] .hire-system.is-live .hire-connections:not(#_r11) [data-link="review-issues"],html body[data-page=hire] .hire-system.is-live .hire-connections:not(#_r11) [data-link="issues-specialists"]{animation:hire-back 1.1s linear infinite}
}
html body[data-page=hire] :where(h3):is(.hire-node-head>h3):not(#_r11)::before,html body[data-page=hire] :where(h3):is(.hire-return>h3):not(#_r11)::before{content:'';display:inline-block;width:.4em;height:.4em;margin-right:.3em;vertical-align:.08em;border-radius:50%;
 background:radial-gradient(circle,var(--station-dot,var(--back)) 0 35%,currentColor 36% 66%,transparent 67%)}   /* (cm3c) the hero cell: a whole disc, the next ink's dot */
html body[data-page=hire] .hire-node-review .hire-node-head>h3:not(#_r11)::before,html body[data-page=hire] .hire-return>h3:not(#_r11)::before{color:var(--back);--station-dot:var(--route)}
html body[data-page=hire] .hire-system[data-view="system"] .hire-specialist-list h4:not(#_r11)::before{content:'';display:inline-block;width:.42em;height:.42em;margin-right:.36em;vertical-align:.06em;border-radius:50%;background:currentColor;opacity:.75}
html body[data-page=hire] .hire-ai.work-section:not(#_h):not(#_r11){padding-bottom:clamp(56px,6vw,96px)}
@media (forced-colors:active){html body[data-page=hire] :where(h3):is(.hire-node-head>h3):not(#_r11)::before,html body[data-page=hire] :where(h3):is(.hire-return>h3):not(#_r11)::before{background:CanvasText}}

/* ===================== opus-run11b (1 Nov 2026): the owner's addendum on /hire ===================== */
/* #12 the plate's miniature preview is gone from the markup (hire.html, as /work hides it): the plate is its two lines, no
   reserved height under them */
html body[data-page=hire] #projects .gw-plate:not(#_r11b){min-height:0!important;padding-bottom:10px}

/* #14/#15 «keep the footer in the Hire colour family»; «the strange gradient: an abrupt pale blue-grey band fading into warm
   grey … investigate family/transition ownership». Cause: every /hire chapter is a flat sheet of its family ground (#34
   above), the footer painted nothing, so the dawn layer's dissolving top showed the world's own pale ground in the gap, and
   the layer itself wore the family's horizontal band, not the sheets' flat ground. The footer now owns the page's ground
   from its first pixel, the dawn's layer the same, so the section above runs into the footer without a seam and the dawn's
   cells stand on Hire's warm grey in both themes. */
html.ground body[data-page=hire] #footer:not(#_r11b){background:var(--cool-ground)}
html.ground body[data-page=hire] #footer .footer-top:not(#_u)>.footer-dawn:not(#_r11b){background:var(--cool-ground)}

/* #16 «.hire-close: Discuss a project is glued to the preceding paragraph»: the close is one group at every width, a rule
   above it, the invitation and its action stacked with a fixed breath between them */
html body[data-page=hire] .hire-close:not(#_r11b){display:flex!important;flex-direction:column;align-items:flex-start;gap:clamp(28px,3vw,40px);
 margin-top:clamp(72px,8vw,120px)!important;padding-top:clamp(28px,3vw,40px);border-top:1px solid color-mix(in oklab,var(--cool-ink) 22%,transparent)}
html body[data-page=hire] .hire-close:not(#_r11b)>p{max-width:30em;margin:0!important;grid-column:auto}
html body[data-page=hire] .hire-close:not(#_r11b)>.text-button{margin:0!important;grid-column:auto}

/* #17/#18 «.hire-process-list: blocks are glued together … the process deserves a much more beautiful composition». The four
   steps become one route read left to right: one rule runs under the head and the steps' own numbers stand on it as its
   stations (the order is the information; Codex H3: no ornament dots), each step's name below with room, then its account at a reading measure. Four across from 901 px (the owner's 1052 reads one route), two by two from 701 (a full row between the
   pairs), a vertical route on phones. The route draws itself as the list comes in and the stations light in turn; the words
   are never hidden (they only rise 12 px from .35), reduced motion and older engines see the composed route at rest. */
html body[data-page=hire] .hire-process-list:not(#_r11b){counter-reset:hp;grid-template-columns:repeat(4,minmax(0,1fr))!important;column-gap:clamp(24px,2.6vw,40px)!important;row-gap:56px!important;
 position:relative;padding-top:clamp(40px,4vw,56px)!important;margin-top:clamp(40px,5vw,72px)!important}
html body[data-page=hire] .hire-process-list:not(#_r11b)::before{content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:color-mix(in oklab,var(--cool-ink) 30%,transparent);transform-origin:0 50%}
html body[data-page=hire] .hire-process-list:not(#_r11b)>li{counter-increment:hp;position:relative;display:grid;align-content:start;row-gap:0!important;padding-top:0}
html body[data-page=hire] .hire-process-list:not(#_r11b)>li::before{content:none}
html body[data-page=hire] .hire-process-list:not(#_r11b)>li::after{content:counter(hp,decimal-leading-zero);position:absolute;left:0;top:calc(-1 * clamp(40px,4vw,56px) + .5px);padding-right:12px;
 font:500 14px/17px var(--t-mono,"Chivo Mono",ui-monospace,monospace);letter-spacing:.04em;color:var(--cool-ink);background:var(--cool-ground)}
html body[data-page=hire] .hire-process-list:not(#_r11b) h3{margin:0 0 clamp(14px,1.4vw,20px)!important;text-wrap:balance}
html body[data-page=hire] .hire-process-list:not(#_r11b) p{max-width:26em;margin:0!important}
@media (min-width:701px) and (max-width:900px){
 html body[data-page=hire] .hire-process-list:not(#_r11b){grid-template-columns:repeat(2,minmax(0,1fr))!important;row-gap:clamp(64px,8vw,88px)!important;padding-top:0!important}
 html body[data-page=hire] .hire-process-list:not(#_r11b)::before{display:none}
 html body[data-page=hire] .hire-process-list:not(#_r11b)>li{border-top:1px solid color-mix(in oklab,var(--cool-ink) 30%,transparent);padding-top:clamp(36px,4vw,48px)}
 html body[data-page=hire] .hire-process-list:not(#_r11b)>li::after{top:-9px}
}
@media (max-width:700px){
 html body[data-page=hire] .hire-process-list:not(#_r11b){grid-template-columns:minmax(0,1fr)!important;row-gap:44px!important;padding-top:0!important;padding-left:40px!important}
 html body[data-page=hire] .hire-process-list:not(#_r11b)::before{left:9px;right:auto;top:10px;bottom:10px;width:1px;height:auto;transform-origin:50% 0}
 html body[data-page=hire] .hire-process-list:not(#_r11b)>li::after{left:-40px;top:0;padding:0 0 4px;width:21px;text-align:center}
}
@keyframes r11b-route{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes r11b-route-v{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes r11b-station{from{scale:.2;opacity:0}to{scale:1;opacity:1}}
@keyframes r11b-rise{from{translate:0 12px;opacity:.35}to{translate:0 0;opacity:1}}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
 html body[data-page=hire] .hire-process-list:not(#_r11b){view-timeline:--hp block}
 html body[data-page=hire] .hire-process-list:not(#_r11b)::before{animation:r11b-route linear both;animation-timeline:--hp;animation-range:entry 20% cover 45%}
 html body[data-page=hire] .hire-process-list:not(#_r11b)>li::after{animation:r11b-station linear both;animation-timeline:--hp}
 html body[data-page=hire] .hire-process-list:not(#_r11b)>li>*{animation:r11b-rise linear both;animation-timeline:--hp}
 html body[data-page=hire] .hire-process-list:not(#_r11b)>li:nth-child(1)>*,html body[data-page=hire] .hire-process-list:not(#_r11b)>li:nth-child(1)::after{animation-range:entry 22% cover 28%}
 html body[data-page=hire] .hire-process-list:not(#_r11b)>li:nth-child(2)>*,html body[data-page=hire] .hire-process-list:not(#_r11b)>li:nth-child(2)::after{animation-range:entry 30% cover 33%}
 html body[data-page=hire] .hire-process-list:not(#_r11b)>li:nth-child(3)>*,html body[data-page=hire] .hire-process-list:not(#_r11b)>li:nth-child(3)::after{animation-range:entry 38% cover 38%}
 html body[data-page=hire] .hire-process-list:not(#_r11b)>li:nth-child(4)>*,html body[data-page=hire] .hire-process-list:not(#_r11b)>li:nth-child(4)::after{animation-range:entry 46% cover 43%}
 @media (max-width:700px){html body[data-page=hire] .hire-process-list:not(#_r11b)::before{animation-name:r11b-route-v}}
}}

/* #11 «.hire-capabilities: stronger dynamics; the static indented stair lacks motion and deliberate development». The stair
   becomes a descent the reader walks: a riser of the
   family's ink drops from the step above into it (1101 px and up, where the stair is on the grid), and as the reader
   reaches a step its name wipes in from the riser and its account follows, one step after another down the stair
   (scroll-tied, both ways). At rest and under reduced motion it is the readable stair it was. */
html body[data-page=hire] .hire-capability:not(#_r11b){position:relative}
/* (no ornament dot before the names: the stair's connectors carry the descent; Codex H3 on decorative dots) */
@media (min-width:1101px){
 html body[data-page=hire] .hire-capability:not(#_r11b):not(:first-child)::before{content:"";position:absolute;box-sizing:border-box;pointer-events:none;
  top:calc(-1 * clamp(40px,4.4vw,64px) * .62);height:calc(clamp(40px,4.4vw,64px) * .62 + .55em);width:calc(2 * (100% + var(--hire-gap,24px)) / 12 - .1em);
  left:calc((var(--step,1) - 1) * 2 * (100% + var(--hire-gap,24px)) / 12 + .16em);font-size:var(--t-m,32px);
  border-left:1px solid color-mix(in oklab,var(--cool-ink) 36%,transparent);border-bottom:1px solid color-mix(in oklab,var(--cool-ink) 36%,transparent);border-bottom-left-radius:10px}
}
@keyframes r11b-wipe{from{clip-path:inset(-.3em 100% -.3em -.3em)}to{clip-path:inset(-.3em -.3em -.3em -.3em)}}
@keyframes r11b-drop{from{clip-path:inset(0 100% 100% 0)}50%{clip-path:inset(0 calc(100% - 2px) 0 0)}to{clip-path:inset(0 0 0 0)}}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
 html body[data-page=hire] .hire-capability:not(#_r11b)>h3{animation:r11b-wipe linear both;animation-timeline:view();animation-range:entry 30% cover 34%}
 html body[data-page=hire] .hire-capability:not(#_r11b)>p{animation:r11b-rise linear both;animation-timeline:view();animation-range:entry 40% cover 40%}
 html body[data-page=hire] .hire-capability:not(#_r11b)::before{animation:r11b-drop linear both;animation-timeline:view();animation-range:entry 10% cover 26%}
}}
@media (forced-colors:active){html body[data-page=hire] .hire-capability::before{border-color:CanvasText}}
/* opus-223C (1 Nov 2026; Codex 223 review P2: at /hire 820x760 the footer name stayed one static word, no wordmark-sliced and no
   strips, while the home's replayed). The page now runs the shared lifecycle (js/portfolio-craft.js, eight strips in from
   alternate sides that settle into the whole name, replayed after the name has left the view, whole under reduced motion);
   its strip geometry and rest are copied from css/portfolio-craft.css and css/portfolio-v36.css, which this page does not load */
html body[data-page=hire] .footer-wordmark .wordmark-name{display:inline-block;font-size:1em;line-height:inherit;letter-spacing:inherit;margin:0;padding:0}
html body[data-page=hire] .footer-wordmark .wordmark-base{display:block;font:inherit;letter-spacing:inherit;line-height:inherit;visibility:hidden;margin:0;padding:0}
html body[data-page=hire] .footer-wordmark .wordmark-name.wordmark-sliced{position:relative}
html body[data-page=hire] .footer-wordmark .wordmark-slice{position:absolute;inset:0;display:block;font:inherit;line-height:inherit;letter-spacing:inherit;margin:0;padding:0}
html body[data-page=hire] .wordmark-name.is-settled .wordmark-base{visibility:visible}
html body[data-page=hire] .wordmark-name.is-settled .wordmark-slice{visibility:hidden}
@media (prefers-reduced-motion:reduce){html body[data-page=hire] .wordmark-name .wordmark-base{visibility:visible}html body[data-page=hire] .wordmark-name .wordmark-slice{visibility:hidden}}
/* opus-223E (1 Nov 2026; the owner, addendum 223E-4: «many text sections feel glued … Hire»; b0-hire-dark-07: at 1052 the
   process lede sat 15 px under «One person accountable.»). From 901 to 1100 px the section heads were plain blocks (the grid
   with its row gap starts at 1101, the one-column grid ends at 900), so every lede and close touched its heading: one column
   with the same gap as the phones', a little more at this display size */
@media (min-width:901px) and (max-width:1100px){
 html body[data-page=hire] .hire-section-head:not(#_e223){display:grid;grid-template-columns:minmax(0,1fr);row-gap:clamp(28px,3vw,36px)}
 html body[data-page=hire] .hire-section-head:not(#_e223)>p{max-width:34em}
}
/* opus-223E: the process route without numbers (owner rule 2: no «01 / 10» numbering, no decorative hairlines; Codex H3 on
   station ornaments). The order is the information, so the steps stand on one route drawn in the site's round cells, the
   same dotted line the system above uses for work going forward; it draws itself as the list comes in (the r11b timeline)
   and the steps rise in turn. No counter, no plain rule; reduced motion and older engines show the drawn route at rest */
html body[data-page=hire] .hire-process-list:not(#_r11b):not(#_e223)>li::after{content:none!important;display:none!important}
html body[data-page=hire] .hire-process-list:not(#_r11b):not(#_e223)::before{top:4px;height:10px;background:radial-gradient(circle,color-mix(in oklab,var(--cool-ink) 62%,transparent) 0 1.7px,transparent 2.3px) 0 50%/10px 10px repeat-x}
html body[data-page=hire] .hire-process-list:not(#_r11b):not(#_e223) h3{margin:0 0 clamp(16px,1.6vw,24px)!important}
@media (min-width:701px) and (max-width:900px){
 html body[data-page=hire] .hire-process-list:not(#_r11b):not(#_e223)>li{border-top:0;background:radial-gradient(circle,color-mix(in oklab,var(--cool-ink) 62%,transparent) 0 1.7px,transparent 2.3px) 0 0/10px 10px repeat-x}
}
@media (max-width:700px){
 html body[data-page=hire] .hire-process-list:not(#_r11b):not(#_e223)::before{left:4px;width:10px;height:auto;background:radial-gradient(circle,color-mix(in oklab,var(--cool-ink) 62%,transparent) 0 1.7px,transparent 2.3px) 50% 0/10px 10px repeat-y}
 html body[data-page=hire] .hire-process-list:not(#_r11b):not(#_e223){padding-left:36px!important}
}

/* opus-unify (1 Nov 2026; the owner: «one coherent aesthetic … consistency»): the hero stands on the world's own sky and
   the sections under it on the page's ground, a shade apart, so the hero's foot met them in a hard horizontal edge that
   ran through the print as the page scrolled. The hero's last stretch now settles into the ground, under its copy and
   over the world (the print dissolves into tone, as every scene develops), so the page is one ground from the hero on */
html body[data-page=hire] .hire-hero.work-section:not(#_h)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:min(34%,320px);z-index:-1;pointer-events:none;
 background:linear-gradient(to bottom,color-mix(in oklab,var(--cool-ground) 0%,transparent),color-mix(in oklab,var(--cool-ground) 70%,transparent) 55%,var(--cool-ground))}