/* =========================================================================
   McMURRY & HUGHES — components.css
   The system's own objects. Every one of them exists to carry the same
   argument: the market continues past the edge of the search.

   THE WINDOW      the mark, made physical — frame, searched field, one person
   THE MAP         the signature artefact, live
   THE LEDGER      counted facts, set as a table, never as cards
   THE PLATE       photography, always cut by an edge
   THE SHEET       real working documents, on paper, that lift when touched
   ========================================================================= */

/* ── 01 · THE WINDOW ───────────────────────────────────────────────────── */
/* The market window, drawn flat — the brand's own device. The frame is the
   boundary of what a company can see. The grey block, lower left, is the
   market it is searching. The red squares sit beyond it, and two more sit
   past the frame's right edge: the market continues beyond the search.
   The frame never moves and does not react to the pointer. The people in it
   always do — each drifts on its own path, quick enough to read as people
   rather than dots. This is the one continuous motion on the site, confined
   to the hero, and it stops under prefers-reduced-motion. */

.window{position:relative;margin-right:clamp(0px,4vw,56px)}
.window__obj{
  position:relative;width:100%;aspect-ratio:3 / 2;
  /* the frame is the edge of the view: a drifting person never crosses it */
  overflow:hidden;
  box-shadow:0 1px 1px rgba(14,15,18,.04),0 18px 46px rgba(14,15,18,.10);
}

/* the measure along the foot of the frame: the search has an extent, and it
   is a stated one */
.window__scale{
  position:absolute;left:0;right:0;bottom:0;height:9px;
  background-image:repeating-linear-gradient(90deg,var(--hair) 0 1px,transparent 1px 4.1666%);
  -webkit-mask-image:linear-gradient(90deg,#000 0 38%,rgba(0,0,0,.25) 38.2%,rgba(0,0,0,.25) 100%);
          mask-image:linear-gradient(90deg,#000 0 38%,rgba(0,0,0,.25) 38.2%,rgba(0,0,0,.25) 100%);
}

.window__plane{position:absolute;inset:0;transform-style:preserve-3d}

/* the boundary of the search */
.window__frame{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  border:1px solid var(--ink);
  background:none;            /* the frame is a boundary, not a surface —
                                 an opaque plane here would hide the market
                                 sitting behind it */
}
.section--ink .window__frame{border-color:rgba(252,252,250,.55);box-shadow:none}

/* the market already in view — grey is allowed here, this is what it means */
/* Kept on the frame's own plane. Given any depth at all it swings outside
   the boundary when the object turns — a searched market sticking out past
   the edge of the search reads as the opposite of what it means. */
.window__searched{
  position:absolute;left:0;bottom:0;width:38%;height:44%;
  background:var(--field);
  border-top:2px solid var(--ink);
  border-right:2px solid var(--ink);
  overflow:hidden;
}
/* the people already inside that market: same squares, grey, because that is
   what grey means here */
.window__insiders{position:absolute;inset:0}
.window__insiders .person{background:var(--grey);opacity:1}
.section--ink .window__searched{
  background:rgba(252,252,250,.16);
  border-color:var(--paper);
}
.window__searchedlab{
  position:absolute;left:0;bottom:0;
  /* never wider than the block it names: it wraps rather than cross the edge */
  width:38%;padding:0 10px 14px 14px;line-height:1.5;
}
.window__searchedlab b{display:block;font-weight:400;color:var(--ink)}

/* one person outside the search */
.window__people{position:absolute;inset:0}
.person{
  position:absolute;
  width:10px;height:10px;
  background:var(--verm);
}
.person--lg{width:14px;height:14px}
.person--sm{width:7px;height:7px}

/* THE DRIFT. Each person wanders a three-point loop (--ax/--ay, --bx/--by:
   in the hero 3.5–7px inside the search and 7.5–15px outside it), in
   4.6–6.8s, starting mid-loop (--dl) so no two are in step and the field
   never pulses. Transform only, compositor-run. Sine in-out (easings.net),
   so there is no visible corner at the turning points. */
@keyframes mh-wander{
  0%,100%{transform:translate3d(0,0,0)}
  33%    {transform:translate3d(var(--ax,0px),var(--ay,0px),0)}
  66%    {transform:translate3d(var(--bx,0px),var(--by,0px),0)}
}
/* Every person square on the site drifts: the hero, the step diagrams, the
   demonstration, the market map and the document thumbnails. Paths are
   seeded by drift() in motion.js, so
   the same market moves the same way on every visit; every leg covers at
   least half its range, so no square ever looks still. A field that is off
   screen stops (.is-still). Nothing here changes what a square means: it
   never leaves the neighbourhood it was placed in, and a square inside the
   search stays inside it. */
@media (prefers-reduced-motion:no-preference){
  .window .person,.drift{
    animation:mh-wander var(--dur,6s) cubic-bezier(.37,0,.63,1) var(--dl,0s) infinite;
  }
  .is-still .person,.is-still .drift{animation-play-state:paused}
}

.window__beyondlab{position:absolute}

.window__cap{
  display:flex;flex-wrap:wrap;gap:6px 22px;
  margin-top:14px;padding-top:10px;border-top:1px solid var(--hairsoft);
}
.window__cap .caption{white-space:nowrap}
.window__capr{margin-left:auto}
.section--ink .window__cap{border-top-color:var(--hairsoft-rev)}

/* ── 02 · HERO ─────────────────────────────────────────────────────────── */

.hero{
  position:relative;
  padding-top:clamp(112px,14vh,168px);
  padding-bottom:clamp(24px,4vh,48px);
  min-height:min(100svh,900px);
  overflow-x:clip;          /* the market runs past the frame, never past the page */
  display:flex;flex-direction:column;justify-content:center;
}
.hero__grid{
  display:grid;gap:clamp(36px,5vw,80px);
  grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  align-items:center;
}
/* The statement scale tops out at 88px in print. On the home page the
   statement shares the screen with the window, so it is set a step down —
   the two objects are meant to be read together, not one after the other. */
.hero__say{max-width:16ch;font-size:clamp(34px,4.9vw,70px)}
.hero__sub{margin-top:clamp(22px,3vw,34px);max-width:46ch}
/* Two blocks in the hero and no more: the line, and one sentence that says
   what the company is. Anything else belongs further down the page. */
.hero__act{margin-top:clamp(28px,3.4vw,44px)}
.hero__foot{
  margin-top:clamp(44px,6vh,86px);padding-top:10px;border-top:1px solid var(--ink);
  display:flex;flex-wrap:wrap;gap:4px 40px;align-items:center;
}
/* the job seeker's route: set apart at the far end of the rule */
.hero__seek{margin-left:auto}

/* ── 03 · THE COMPARISON ───────────────────────────────────────────────── */
/* Two fields, one control. The reader moves the boundary of the search and
   watches the count change. It is the whole argument in one interaction. */

.compare{border:1px solid var(--ink);background:var(--paper)}
.compare__head,
.compare__foot{
  display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;
  padding:16px 20px;
}
.compare__head{justify-content:space-between;align-items:flex-end}
.compare__say{margin-top:8px;font-size:15px;line-height:1.5;max-width:60ch}
.compare__ctl{display:flex;flex-direction:column;gap:2px;flex:0 1 320px}
.compare__n{font-family:var(--M);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate)}
.compare__n b{font-weight:500;font-size:18px;letter-spacing:0;color:var(--ink);margin-left:6px}
.compare__n--v b{color:var(--verm)}
.compare__note{margin-left:auto;color:var(--slate)}
.compare__head{border-bottom:1px solid var(--hairsoft)}
.compare__foot{border-top:1px solid var(--hairsoft)}
.compare__plot{position:relative;height:clamp(240px,34vw,380px);overflow:hidden}
.compare__searched{
  position:absolute;left:0;bottom:0;
  background:var(--field);
  border-top:2px solid var(--ink);border-right:2px solid var(--ink);
  transition:width var(--t) var(--ease),height var(--t) var(--ease);
}
/* while the boundary widens on its own the frame loop drives it directly */
.compare.is-widening .compare__searched{transition:none}
/* The plot carries no labels of its own. They repeated the footer, and at
   narrow widths the grey block is too small to hold one: a caption was
   landing on top of the people it was describing. The footer says it
   instead, in words, at every width. */
/* A person outside the search is vermilion. The same person, once the search
   widens far enough to include them, becomes part of the market being
   searched — and turns grey. Nothing moves; only the meaning changes. */
.compare__dot{
  position:absolute;width:9px;height:9px;background:var(--verm);
  /* reached by the search: it turns grey over 200 ms. It never moves. */
  transition:background-color .2s linear;
}
.compare__dot[data-in="true"]{background:var(--grey)}

.slider{
  -webkit-appearance:none;appearance:none;
  width:100%;max-width:340px;height:44px;background:none;cursor:ew-resize;
}
.slider:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.slider::-webkit-slider-runnable-track{height:1px;background:var(--ink)}
.slider::-moz-range-track{height:1px;background:var(--ink)}
/* the handle is the edge of the search, so it is ink, like every boundary */
.slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:14px;height:22px;background:var(--ink);border:0;border-radius:0;margin-top:-11px;
}
.slider::-moz-range-thumb{width:14px;height:22px;background:var(--ink);border:0;border-radius:0}

/* ── 04 · THE MARKET MAP ───────────────────────────────────────────────── */
/* Not a geographic map. A counted field: distance from the client's own
   market on x, depth of experience on y. Filters change the count and the
   state of the markers. Markers never move, slide, fly or bounce. */

.map{border:1px solid var(--ink);background:var(--paper)}
.map__head{
  display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;
  padding:14px 20px;border-bottom:1px solid var(--hairsoft);
}
.map__filters{display:flex;flex-wrap:wrap;gap:8px}
.filter{
  font-family:var(--M);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--slate);background:none;border:1px solid var(--hair);border-radius:0;
  padding:0 14px;min-height:44px;cursor:pointer;
  transition:color var(--t-fast) linear,border-color var(--t-fast) linear,background-color var(--t-fast) linear;
}
.filter:hover{color:var(--ink);border-color:var(--ink)}
.filter[aria-pressed="true"]{color:var(--paper);background:var(--ink);border-color:var(--ink)}
.map__key{margin-top:6px}
.map__keyg{margin-right:14px}

.map__plotwrap{position:relative;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain}
/* said only where it is true: the wrapper adds this class itself when the
   plot is wider than the screen */
.map__hint{display:none}
.map__plotwrap.is-scrollable ~ .map__foot .map__hint{display:inline}
.map__plot{
  position:relative;overflow:hidden;   /* a drifting person never leaves the field */
  height:clamp(300px,44vw,500px);
  min-width:680px;
}
/* the market the client is already searching */
.map__searched{
  position:absolute;left:0;bottom:0;width:26%;height:38%;
  background:var(--field);
  border-top:2px solid var(--ink);border-right:2px solid var(--ink);
  /* the base plane of the scene. Everything inside the searched market sits
     on it or just in front of it, never behind it — a person we have counted
     inside this block must be visible inside this block. */
}
/* the block names itself, inside its own edges. It is the one label on the
   map that must never run past the boundary it describes, because the
   boundary is the argument. */
.map__searchedlab{
  position:absolute;left:14px;right:12px;bottom:11px;z-index:2;
  line-height:1.5;text-wrap:balance;
}
.map__searchedlab b{
  display:block;font-weight:400;color:var(--ink);letter-spacing:.2em;
}
.map__axis{
  position:absolute;font-family:var(--M);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--slate);
}
.map__axis--x{right:20px;bottom:12px}
.map__axis--y{left:14px;top:16px}

/* A person. It never slides and never scales (brand book, part eight). The
   hit area is larger than the square — a 9px target is too small to touch —
   and the one being read is marked by an ink ring, not by growing. */
.marker{
  position:absolute;width:9px;height:9px;padding:0;
  background:var(--verm);border:0;border-radius:0;cursor:pointer;
  transition:opacity var(--t) var(--ease);
  opacity:0;
}
.marker::before{content:"";position:absolute;inset:-9px}
.map__plot.is-plotted .marker{opacity:1}
.marker[hidden]{display:none}
/* a marker a filter has excluded stops answering — it is still part of the
   market, it is just not part of the question */
.map__plot.is-plotted .marker[data-state="out"]{opacity:.14;pointer-events:none}
.marker:focus{outline:none}
.marker:hover,.marker.is-read,.marker:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* a person inside the searched market is drawn ON the block, never behind
   it: grey on grey needs its own edge to stay countable. */
.marker--searched{background:var(--grey);box-shadow:0 0 0 1px var(--paper)}

.map__read{
  position:absolute;z-index:6;width:250px;
  background:var(--ink);color:var(--paper);
  padding:16px 18px;pointer-events:none;
  opacity:0;
  transition:opacity var(--t-fast) var(--ease);
}
.map__read.is-open{opacity:1}
.map__read dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin-top:10px}
.map__read dt{font-family:var(--M);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(252,252,250,.62)}
.map__read dd{margin:0;font-size:14px;line-height:1.45}
.map__read .unknown{color:rgba(252,252,250,.72)}
.map__read .map__readlab{color:rgba(252,252,250,.72)}
.map__how{margin-left:auto}
.map__foot{
  display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;
  padding:14px 20px;border-top:1px solid var(--hairsoft);
}
.map__count{font-family:var(--M);font-weight:500;font-size:22px;font-variant-numeric:tabular-nums}

/* the hatch: a field we have not measured */
.hatch{
  background-image:repeating-linear-gradient(45deg,var(--grey) 0 1px,transparent 1px 5px);
  opacity:.5;
}

/* ── 05 · THE LEDGER ───────────────────────────────────────────────────── */

.ledger{width:100%;border-collapse:collapse;text-align:left}
.ledger caption,.jobs caption{display:table-caption;caption-side:top;text-align:left}
.ledger th{
  font-family:var(--M);font-weight:400;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--slate);
  padding:0 24px 12px 0;border-bottom:1px solid var(--ink);vertical-align:bottom;
}
.ledger td{
  padding:18px 24px 18px 0;border-bottom:1px solid var(--hairsoft);
  vertical-align:top;font-size:16px;line-height:1.5;color:var(--slate);
}
.ledger td:last-child,.ledger th:last-child{padding-right:0}
.ledger td b{font-weight:600;color:var(--ink)}
.ledger .t{
  font-family:var(--M);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);width:30%;
}
.ledger .n{font-family:var(--M);font-weight:500;font-size:12px;color:var(--verm);width:56px}
.ledger .q{font-family:var(--M);font-variant-numeric:tabular-nums;color:var(--ink);text-align:right;white-space:nowrap}
.ledger tr:last-child td{border-bottom:0}
.ledger--rows td:first-child{color:var(--ink);font-weight:600}

/* figures, set — never animated, never counted up */
.figs{display:flex;flex-wrap:wrap;gap:28px 56px;padding-top:26px;border-top:1px solid var(--ink)}
.fig__n{font-family:var(--M);font-weight:500;font-size:clamp(30px,3.4vw,44px);line-height:1;font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.02em}
.fig__l{margin-top:10px;max-width:22ch}

/* the concentration, drawn: 29 records, 20 of them one client.
   Ink and hairline only — this is not a market, so no grey and no vermilion. */
.tally{display:flex;flex-wrap:wrap;gap:6px;max-width:420px}
.tally i{width:16px;height:16px;border:1px solid var(--ink);display:block}
.tally i[data-one="true"]{background:var(--ink)}

/* ── 06 · THE PLATE (photography) ──────────────────────────────────────── */
/* Always cut by an edge. No border, no radius, no shadow, no filter, never
   the mark on top of it, never vermilion over it. */

.plate{position:relative;overflow:hidden;background:var(--field)}
.plate img{width:100%;height:100%;object-fit:cover;display:block}
/* Full bleed without a transform. A transform here is fragile: any reveal
   rule that resets transform (and .is-in does) silently drops the plate half
   a screen to the right. Margins cannot be overridden by the motion layer. */
.plate--half{height:clamp(300px,54vh,640px)}
.plate--col{aspect-ratio:3/2}
.plate__cap{
  position:absolute;left:14px;bottom:18px;z-index:3;
  font-family:var(--M);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(252,252,250,.72);
  writing-mode:vertical-rl;transform:rotate(180deg);
}
.plate__cap--ink{color:var(--mid)}


/* ── 07 · THE SHEET (real documents) ───────────────────────────────────── */
/* A market map, a proposal, a candidate summary — the objects the client
   actually receives. Flat paper on the ground; hover inks the edge. */

.sheets{
  display:grid;gap:clamp(20px,2.6vw,40px);
  grid-template-columns:repeat(3,1fr);
  }
.sheet{
  position:relative;display:block;text-align:left;
  background:var(--paper);border:1px solid var(--hair);
  padding:22px 22px 20px;
  transition:box-shadow var(--t) var(--ease),border-color var(--t-fast) linear;
  box-shadow:0 1px 2px rgba(14,15,18,.04);
  cursor:default;
}
.sheet:hover,.sheet:focus-within{border-color:var(--ink)}
.sheet__body{min-height:150px;margin:18px 0;position:relative}
.sheet__ln{height:1px;background:var(--hairsoft);margin-bottom:9px}
.sheet__ln--w70{width:70%}.sheet__ln--w45{width:45%}.sheet__ln--w88{width:88%}
.sheet__mini{position:relative;height:104px;border:1px solid var(--hairsoft);overflow:hidden}
.sheet__mini .field{position:absolute;left:0;bottom:0;width:34%;height:42%;background:var(--field);border-top:1px solid var(--ink);border-right:1px solid var(--ink)}
.sheet__mini .person{position:absolute;width:6px;height:6px;background:var(--verm);transform:none}
.sheet__foot{display:flex;justify-content:space-between;gap:14px;align-items:baseline;border-top:1px solid var(--hairsoft);padding-top:12px}


/* ── 08 · TALENT ───────────────────────────────────────────────────────── */
/* Anonymous first. No name, no photograph, no current employer, no contact
   detail — on the page or in the markup. If a future build breaks this, it
   breaks the brand. */

.talent{
  display:grid;gap:clamp(16px,2vw,28px);
  grid-template-columns:repeat(3,1fr);
}
.tcard{
  display:flex;flex-direction:column;
  border:1px solid var(--hair);background:var(--paper);
  padding:24px 24px 20px;
  transition:border-color var(--t-fast) linear;
}
.talent__filters{align-items:end;gap:24px}
.talent__bar{display:flex;flex-wrap:wrap;gap:16px;align-items:baseline;margin:36px 0 28px;padding-bottom:14px;border-bottom:1px solid var(--ink)}
.tcard:hover,.tcard:focus-within{border-color:var(--ink)}
.tcard__role{font-weight:600;font-size:20px;letter-spacing:-.02em;line-height:1.15;margin-top:14px}
.tcard__meta{
  font-family:var(--M);font-size:13px;line-height:2;color:var(--slate);margin-top:14px;
  font-variant-numeric:tabular-nums;
}
.tcard__foot{
  margin-top:auto;padding-top:22px;
  /* stacked, never side by side: a short availability used to sit
     beside the action and a long one below it, so cards in the same
     row ended at different heights. */
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
}
.avail{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:var(--ink)}
.avail::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--confirmed);flex:none}
/* AVAILABILITY IS ALIVE. The green dot (Confirmed, the colour specification's
   interface-only availability dot) breathes: a soft ring swells out of it and
   fades, every 2.4s, each dot at its own phase so a grid never pulses in
   unison. Box-shadow and opacity only; still under reduced motion. */
@keyframes avail-glow{
  0%  {box-shadow:0 0 0 0 rgba(51,82,58,.45);opacity:1}
  60% {box-shadow:0 0 0 7px rgba(51,82,58,0);opacity:.85}
  100%{box-shadow:0 0 0 0 rgba(51,82,58,0);opacity:1}
}
@media (prefers-reduced-motion:no-preference){
  .avail::before{animation:avail-glow 2.4s cubic-bezier(.23,1,.32,1) infinite}
  .tcard:nth-child(3n+2) .avail::before{animation-delay:-.8s}
  .tcard:nth-child(3n+3) .avail::before{animation-delay:-1.6s}
}
.tcard[hidden]{display:none}

.count{font-family:var(--M);font-weight:500;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.empty{padding:40px 0;border-top:1px solid var(--hairsoft)}

/* ── 09 · STEPS ────────────────────────────────────────────────────────── */

.steps{display:grid;gap:clamp(24px,3vw,48px);grid-template-columns:repeat(3,1fr);counter-reset:s}
.steps--4{grid-template-columns:repeat(4,1fr)}
.step{padding-top:16px;border-top:1px solid var(--ink)}
.step__n{font-family:var(--M);font-weight:500;font-size:12px;letter-spacing:.2em;color:var(--verm)}
/* steps on an ink ground */
.steps--rev .step{border-top-color:rgba(252,252,250,.55)}
.steps--rev .step__n{color:var(--verm)}
.steps--rev .step p{color:rgba(252,252,250,.74)}
.step__h{font-weight:600;font-size:clamp(20px,1.7vw,25px);letter-spacing:-.025em;line-height:1.15;margin-top:14px;text-wrap:balance}
.step p{margin-top:12px;font-size:16px}

/* ── 10 · JOBS ─────────────────────────────────────────────────────────── */

.jobs{width:100%;border-collapse:collapse;text-align:left}
.jobs th{
  font-family:var(--M);font-weight:400;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--slate);padding:0 32px 14px 0;border-bottom:1px solid var(--ink);
}
.jobs td{padding:30px 32px 30px 0;border-bottom:1px solid var(--hairsoft);vertical-align:top;font-size:15px;line-height:1.55;color:var(--slate)}
.jobs td:last-child,.jobs th:last-child{padding-right:0}
.jobs .role{font-family:var(--A);font-weight:600;font-size:19px;letter-spacing:-.022em;color:var(--ink);line-height:1.2}
.jobs .pay{font-family:var(--M);font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.jobs tbody tr{transition:background-color var(--t-fast) var(--ease)}

.jobs tr[hidden]{display:none}
.jobs .act{white-space:nowrap}
.jobs__bar{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin-bottom:28px}
/* a general application, for when no listed role fits */
.jobs__general{
  display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between;
  margin-top:clamp(36px,4vw,56px);padding-top:24px;border-top:1px solid var(--ink);
}
.jobs__general .small{max-width:52ch}

/* ── 11 · FORMS ────────────────────────────────────────────────────────── */

.form{max-width:640px}
.field{margin-bottom:30px}
.field > label{display:block;margin-bottom:10px}
.field input,.field select,.field textarea{
  width:100%;background:none;border:0;border-bottom:1px solid var(--hair);border-radius:0;
  padding:12px 0;min-height:48px;font-size:17px;color:var(--ink);
  transition:border-color var(--t-fast) var(--ease);
}
.field textarea{min-height:110px;resize:vertical;line-height:1.5}
.field select{-webkit-appearance:none;appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 11px) 22px,calc(100% - 5px) 22px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--ink);border-bottom-width:2px}
.field input::placeholder,.field textarea::placeholder{color:var(--mid)}
.field__help{margin-top:8px;font-size:15px;color:var(--slate)}
.field--set{border:0;padding:0;margin-inline:0}
.field--set legend{margin-bottom:10px;padding:0}
/* how the form sends, said before the button, not after it */
.form__how{margin:4px 0 26px;font-size:15px;line-height:1.5;color:var(--slate);max-width:58ch}
.form__how b{color:var(--ink);font-weight:600}
.field__err{
  display:none;margin-top:8px;
  font-family:var(--M);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--error);
}
.field[data-invalid="true"] input,.field[data-invalid="true"] select{border-bottom-color:var(--error);border-bottom-width:2px}
.field[data-invalid="true"] .field__err{display:block}

.choice{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px;position:relative}
/* The input is hidden but still focusable; pointer-events are off so an
   absolutely positioned, invisible control can never swallow a click meant
   for something else on the page. */
.choice input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;clip-path:inset(50%)}
.choice label{
  display:inline-flex;align-items:center;min-height:48px;padding:0 20px;
  border:1px solid var(--hair);cursor:pointer;font-size:16px;
  transition:border-color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.choice input:checked + label{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.choice input:focus-visible + label{outline:2px solid var(--ink);outline-offset:3px}

.form__status{
  margin-top:26px;padding:20px 22px;border:1px solid var(--ink);
  display:none;font-size:16px;color:var(--slate);
}
.form__status b{color:var(--ink);font-weight:600}
.form__status.is-on{display:block}
.form__status[data-kind="error"]{border-color:var(--error);color:var(--error)}

/* ── 12 · DIALOG ───────────────────────────────────────────────────────── */

.dialog{
  border:0;padding:0;max-width:min(560px,92vw);width:100%;
  background:var(--paper);color:var(--ink);
}
.dialog::backdrop{background:rgba(14,15,18,.5)}
.dialog__in{border:1px solid var(--ink);padding:clamp(24px,3.4vw,44px)}
.dialog__close{
  position:absolute;top:14px;right:14px;min-height:44px;min-width:44px;
  background:none;border:0;cursor:pointer;
  font-family:var(--M);font-size:11px;letter-spacing:.18em;color:var(--slate);
}
.dialog__close:hover{color:var(--ink)}

/* ── 13 · QUIET STATEMENT ──────────────────────────────────────────────── */

.promise{display:flex;flex-direction:column;justify-content:center}
.promise .say{max-width:17ch}
.promise__act{margin-top:clamp(40px,6vh,72px)}
.promise__or{color:rgba(252,252,250,.74)}

/* ── 14 · PAGE HEAD ────────────────────────────────────────────────────── */

.phead{padding-top:clamp(128px,15vh,188px);padding-bottom:clamp(32px,5vh,60px)}
.phead .say{max-width:19ch}
.phead__sub{margin-top:24px;max-width:52ch}
.phead__meta{margin-top:clamp(34px,5vh,60px);padding-top:14px;border-top:1px solid var(--ink);display:flex;flex-wrap:wrap;gap:10px 40px}

/* ── 15 · THE ATTACHMENT ───────────────────────────────────────────────── */
/* A CV is a document, so it is treated like one: a hairline plate you can
   drop a file onto, which then shows the file as a stated fact — name, size,
   type — the way every other counted thing on this site is stated.
   Radius 0, no fill, no icon set, no progress theatre. */

.drop{
  position:relative;
  display:flex;flex-direction:column;justify-content:center;gap:8px;
  min-height:104px;padding:20px 22px;
  border:1px solid var(--hair);
  background:none;
  transition:border-color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease);
}
.drop input[type="file"]{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer;
}
.drop__msg{font-size:16px;color:var(--slate)}
.drop__msg b{font-weight:600;color:var(--ink);border-bottom:1px solid var(--ink)}
.drop__meta{font-family:var(--M);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate)}
.drop:hover,.drop:focus-within{border-color:var(--ink)}
.drop[data-over="true"]{border-color:var(--ink);border-width:2px}

/* the file, once it is there: a record, not a chip */
.drop[data-has="true"]{border-color:var(--ink)}
.drop__file{display:none;gap:14px;align-items:baseline}
.drop[data-has="true"] .drop__file{display:flex;flex-wrap:wrap}
.drop[data-has="true"] .drop__msg{display:none}
.drop__name{font-weight:600;font-size:16px;color:var(--ink);word-break:break-all}
.drop__size{font-family:var(--M);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.drop__clear{
  position:relative;z-index:2;margin-left:auto;
  background:none;border:0;padding:6px 0;min-height:44px;cursor:pointer;
  font-family:var(--M);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);
  border-bottom:1px solid transparent;
}
.drop__clear:hover{color:var(--ink);border-bottom-color:var(--ink)}
.field[data-invalid="true"] .drop{border-color:var(--error)}

/* The drop field is used only when a form posts to an endpoint (README,
   "Forms"). While the forms hand a draft to the visitor's email program, a
   file field would promise something the page cannot do, so none is shown. */
.drop[data-has="true"]{box-shadow:0 10px 26px rgba(14,15,18,.08)}

/* ── 16 · DEPTH AND MOTION, CONTINUED ──────────────────────────────────── */


/* A row in the ledger does not move, shift, tint or grow under the pointer.
   The only thing that changes is the rule beneath it, from a hairline to
   ink — the way a finger under a line in a printed table works. Nothing is
   ever pushed around the words. */
.jobs tbody tr td{transition:border-color var(--t-fast) var(--ease)}
.jobs tbody tr:hover td,.jobs tbody tr:focus-within td{border-bottom-color:var(--ink)}

/* ── 17 · THE STEP DIAGRAMS ────────────────────────────────────────────── */
/* Three small market windows, one per stage, drawn exactly like the hero's
   so the page reads as one object seen three times: where the people are,
   the same market counted and dated, and one person introduced. Static —
   the only drifting squares on the site are in the hero. */

.step--fig{padding-top:0;border-top:0}
.step--fig .step__n{display:block;padding-top:16px;border-top:1px solid var(--ink)}
.mini{margin:0 0 22px}
.mini__obj{
  position:relative;aspect-ratio:3/2;border:1px solid var(--ink);background:var(--paper);overflow:hidden;
  box-shadow:0 1px 1px rgba(14,15,18,.04),0 14px 34px rgba(14,15,18,.08);
}
.mini__field{
  position:absolute;left:0;bottom:0;width:38%;height:44%;
  background:var(--field);border-top:2px solid var(--ink);border-right:2px solid var(--ink);overflow:hidden;
}
.mini__g,.mini__p{position:absolute;width:7px;height:7px;display:block}
.mini__g{background:var(--grey)}
.mini__p{background:var(--verm)}
.mini__tag{
  position:absolute;left:10px;top:9px;
  font-family:var(--M);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);
}
.mini__n{
  position:absolute;right:10px;bottom:8px;
  font-family:var(--M);font-weight:500;font-size:22px;color:var(--ink);
}
/* the map: the market is the same, now counted — a hatch marks what was not measured */
.mini--map .mini__obj::after{
  content:"";position:absolute;right:0;top:0;width:16%;height:100%;
  background:repeating-linear-gradient(45deg,var(--grey) 0 1px,transparent 1px 5px);opacity:.45;
}
/* the introduction: one person, the rest of the market still there */
.mini--intro .mini__p{opacity:.22}
.mini--intro .mini__p:nth-child(4){opacity:1;outline:2px solid var(--ink);outline-offset:3px}

/* ── 18 · THE DOCUMENTS ────────────────────────────────────────────────── */

.docs__head{align-items:end;margin-bottom:clamp(32px,4vw,56px)}

@media (max-width:768px){
  .mini{max-width:300px}
}

.talent__head{align-items:end;margin-bottom:clamp(32px,4vw,52px)}