/* ==========================================================================
   DIRECTION — "SWISS GRID"  ·  COMPANY PROFILE
   The token block, the type scale, the spacing module, the masthead, the
   chip, the flag, the pillar row, the rulelist, the quote, the stat, the
   buttons and the footer are lifted unchanged from the homepage
   (03-swiss-grid.html) so the two pages read as one site. Everything after
   the "PROFILE EXTENSIONS" rule below is new, and every new component is
   built out of the direction's existing vocabulary: rule weight, hatch,
   dashed edge, hairline, the empty column.

   The three decisions this page adds
   09  The pillar breakdown is the chip's confidence language turned on its
       side. Each row carries the pillar's own score as a numeral plus an
       ink bar (length, never hue), and a right-hand confidence rail whose
       rule weight repeats the chip exactly — 5px Moderate, hairline Low,
       dashed for a pillar with no publishable score — with the hatched
       field carried over onto the low-confidence scores. The rails stack
       into a single vertical rhythm down the right edge, so eight pillars
       are comparable at a glance without a table, a tint or a grid line.
   10  A pillar under its threshold has no numeral slot at all, exactly as
       the Insufficient chip has none: no zero, no greyed figure, no empty
       bar, no track behind the bar that a missing bar could read against.
       The row's own top rule turns dashed and full-strength ink, so the
       exception is the one row on the page that interrupts the hairline
       rhythm. Zero and unknown cannot look alike because unknown has no
       geometry a number could occupy.
   11  Context is the only block on the page with no enclosure, no spine,
       no tier tag and no full-strength ink. It hangs off column 5, well
       below and well away from the flags and the record, it is set in the
       secondary ink, and the sentence saying it never scores is set larger
       and darker than the material it introduces. It is not evidence, it
       is not beside a flag, and it arrives disclaimer first.

   Red is unchanged and still spent on four things only: the masthead rule,
   the active nav item, the section numerals, the focus ring. It touches no
   score, no pillar score, no confidence band and no flag anywhere here.
   ========================================================================== */

/* --- typeface ------------------------------------------------------------ */
/* One variable file, 100-900. Relative URL so it resolves under file://. */
@font-face{
  font-family:'Archivo';
  src:url('fonts/archivo-var-latin.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* --- tokens ------------------------------------------------------------- */
:root{
  color-scheme: light;

  --paper:#ffffff;
  --ink:#0b0b0b;
  --ink-2:#3a3a3a;
  --ink-3:#6e6e6e;
  --rule:#c9c9c9;
  --hatch:#d8d8d8;
  /* the single signal colour. Identity only — never a verdict on a company. */
  --red:#C1121F;

  --cols:12;
  --margin:40px;
  --gutter:32px;

  --s-label:12px;
  --s-body:17px;
  --s-head:clamp(30px,4.4vw,44px);
  --s-h1:clamp(38px,7.2vw,76px);
  --s-display:clamp(72px,9.5vw,128px);

  --font:'Archivo',system-ui,-apple-system,Arial,sans-serif;
}

/* --- reset -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:var(--s-body);
  line-height:24px;
  font-weight:400;
  letter-spacing:-0.006em;
  overflow-x:hidden;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit}
img,svg{max-width:100%}

:focus-visible{
  outline:2px solid var(--red);
  outline-offset:2px;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:20;
  background:var(--ink);color:var(--paper);
  font-size:var(--s-label);font-weight:700;letter-spacing:.02em;
  padding:16px 24px;text-decoration:none;
}
.skip:focus{left:0}

/* --- the undrawn field -------------------------------------------------- */
.sheet{
  position:relative;
  max-width:1440px;
  margin:0 auto;
  padding-inline:var(--margin);
}

.row{
  display:grid;
  grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  column-gap:0;
}
.row > *{min-width:0;padding-right:var(--gutter)}
/* The trailing gutter is dead space against the container's own padding, and
   it made every row's right edge sit one gutter inside its left edge. */
.row > *:last-child{padding-right:0}

/* A section's content is nested one page gutter inside the numeral, which
   hangs on the page's own margin. With a 40px page gutter the numeral sits at
   40 and the content at 80, so the content reads as belonging to the section
   rather than sitting on the same axis as its marker. The head row — numeral
   and section title — is deliberately not nested. */
.band > .row:not(.band__head){padding-inline:var(--margin)}

.s1-2{grid-column:1/2}  .s1-3{grid-column:1/3}  .s1-11{grid-column:1/11}  .s1-12{grid-column:1/12}
.s3-13{grid-column:3/13}  .s4-13{grid-column:4/13}  .s6-13{grid-column:6/13}  .s7-13{grid-column:7/13}
/* column utilities. Content rows start on column 1; the field now sets
   width, not indent, because the section's inset is a padding on the row. */
.s1-4{grid-column:1/4}  .s1-5{grid-column:1/5}  .s1-6{grid-column:1/6}  .s1-7{grid-column:1/7}
.s1-8{grid-column:1/8}  .s1-9{grid-column:1/9}  .s1-10{grid-column:1/10}  .s1-13{grid-column:1/13}
.s4-7{grid-column:4/7}  .s5-9{grid-column:5/9}  .s5-13{grid-column:5/13}  .s7-10{grid-column:7/10}
.s8-13{grid-column:8/13}  .s9-13{grid-column:9/13}  .s10-13{grid-column:10/13}

/* two more hangs the profile needs; same field, columns not yet used */

/* spans the flush-left field needs that the original hanging field did not */

/* Contents. The numerals are the section numerals, so they are Roman — and
   this is the one list on the page that is genuinely a sequence. */
.toc li{border-top:1px solid var(--rule)}
.toc li:last-child{border-bottom:1px solid var(--rule)}
.toc a{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  column-gap:16px;
  padding:11px 0;
  text-decoration:none;
}
.toc__n{
  font-size:var(--s-label);line-height:20px;font-weight:700;letter-spacing:.04em;
  color:var(--ink-3);
}
.toc__t{font-size:var(--s-body);line-height:20px;font-weight:500;color:var(--ink)}
.toc a:hover .toc__t{text-decoration:underline;text-underline-offset:3px}
section[id]{scroll-margin-top:24px}

/* --- type --------------------------------------------------------------- */
/* Labels are sentence case, not uppercase. The rank is carried by the size
   step (12px against 17px body), the weight (700 against 400) and the tone;
   the tracking is cut to what lowercase wants, 0.03em, not what caps want. */
.label{
  font-size:var(--s-label);
  line-height:16px;
  font-weight:700;
  letter-spacing:.03em;
}
.label--mute{color:var(--ink-3);letter-spacing:.03em;font-weight:600}

h1{
  font-size:var(--s-h1);
  line-height:1.03;
  font-weight:700;
  letter-spacing:-0.02em;
  /* The measure is re-cut for Archivo, not inherited from Inter. 16ch is the
     narrowest measure that sets the hero line in four full lines at every
     width: below it "it." falls to a line of its own, and above it the em dash
     starts line three. A company name is one line at any width, so the value
     carries across to the profiles unchanged and simply never binds. */
  max-width:16ch;
  /* the display line gets its own clearance beneath it; the type stays tight */
  margin-bottom:16px;
}
.head{
  font-size:var(--s-head);
  line-height:1.06;
  font-weight:700;
  /* Archivo carries a smaller cap-height than Inter at the same px, so it wants
     roughly 0.008em less tightening to read at the same density: -0.016em here
     against the -0.024em this rule held for Inter. */
  letter-spacing:-0.016em;
}
.body{font-size:var(--s-body);line-height:24px}
.body--lead{font-weight:500}
.body--mute{color:var(--ink-2)}
.small{font-size:var(--s-label);line-height:16px;letter-spacing:.01em;color:var(--ink-2);text-transform:none;font-weight:400}
.num{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1}

.mt-1{margin-top:8px}  .mt-2{margin-top:16px} .mt-3{margin-top:24px}
.mt-4{margin-top:32px} .mt-6{margin-top:48px} .mt-8{margin-top:64px}

/* --- masthead ----------------------------------------------------------- */
.masthead{padding-top:32px}
.wordmark{
  display:block;
  font-size:var(--s-body);
  line-height:24px;
  font-weight:700;
  letter-spacing:-0.02em;
  text-decoration:none;
}
/* The nav is set hard right, on the same right boundary as the red rule and
   every other block on the sheet: the gutter is cancelled so the last link
   ends exactly on the margin. The gap is 16px rather than 24px so the run
   holds a single line one breakpoint longer; when it does wrap, every line
   packs to the right edge, so the rag falls on the left and the right stays
   true. */
.masthead__nav{padding-right:0}
.nav__list{display:flex;flex-wrap:wrap;justify-content:flex-end;column-gap:16px;row-gap:8px}
.nav__list a{
  display:block;
  font-size:var(--s-label);
  line-height:16px;
  font-weight:600;
  letter-spacing:.02em;
  text-decoration:none;
  padding-bottom:4px;
  border-bottom:1px solid transparent;
}
.nav__list a:hover{border-bottom-color:var(--ink)}
.nav__list a[aria-current="page"]{
  color:var(--red);
  border-bottom-color:var(--red);
  border-bottom-width:2px;
}
/* the one red rule on the page */
.masthead__rule{height:6px;background:var(--red);padding-right:0;margin-top:24px}

/* --- homepage hero ------------------------------------------------------ */
/* Outside the numbered sequence, so it takes no numeral and no top rule. Its
   rows are not nested one gutter in the way a band's are: nesting says "this
   belongs to the section above it", and there is nothing above this. The rule
   under it is the first band's own. */
.hero{padding-top:64px;padding-bottom:96px}
@media (max-width:760px){.hero{padding-top:40px;padding-bottom:64px}}

/* --- bands -------------------------------------------------------------- */
/* The band is the unit of separation on every page, so it carries the space:
   a rule, then air, then the head, then more air before anything the head is
   naming. The gap under the head is deliberately the larger of the two — the
   numeral and its title label the whole section, and sitting them tight on the
   heading made them read as that heading's kicker instead. */
.band{border-top:1px solid var(--rule);padding-top:56px;padding-bottom:160px}
.band--open{border-top:0;padding-top:64px}
/* Section numerals are Roman. Digits on this site mean a score, a count or a
   weight; a big red 01 above a heading is the one thing on the page that
   counts without measuring anything, so it is set in letters instead. */
.band__num{
  white-space:nowrap;
  font-size:var(--s-head);
  line-height:1;
  font-weight:700;
  letter-spacing:0.005em;
  margin-left:-0.015em;
  color:var(--red);
}
/* The full point is what makes it a numeral. Alone at this size a Roman I is
   just a red bar -- indistinguishable from the marks the page already uses --
   and the stop settles it before the reader has to work it out. */
.band__num::after{content:"."}
/* Numeral and section title, simply side by side. This row does not use the
   field at all — the numeral hangs on the page margin and the title sits
   directly next to it, aligned on their last baselines so the small type rests
   on the numeral's baseline rather than floating at the top of its mass. */
/* First baseline, not last. For a title that fits on one line the two are the
   same thing — it rests on the numeral's baseline either way. For one that
   wraps, and at 360px most of them do, last-baseline hangs the numeral off the
   title's *second* line and leaves the first line floating above it. */
.row.band__head{
  display:flex;
  align-items:baseline;
  column-gap:24px;
  margin-bottom:96px;
}
.row.band__head > *{padding-right:0}
/* The section title sits at body size, not label size. Against a numeral this
   large a 12px label read as a caption on the numeral rather than as the name
   of the section; at 17px it is the other half of a pair. The tracking comes
   back to nothing — .03em is what 12px wants, not what 17px wants. */
.band__title{
  font-size:var(--s-body);
  line-height:24px;
  font-weight:700;
  letter-spacing:0;
}

/* --- score chip --------------------------------------------------------- */
/* Only a box in a card column stretches. Elsewhere — the hero, where the chip
   shares its column with the Watch status — it keeps its natural height, or it
   would push whatever follows it out of the column. */
.row > .b.card{display:flex;flex-direction:column}
.row > .b.card > .chip{flex:1}

/* Score boxes standing side by side must be one height and their numerals must
   sit on one line, or the eye has to re-find the number in every box. The box
   stretches to its row; the numeral slot is a fixed height so a box with no
   number still holds the line; and anything that only some boxes carry is
   pinned to the bottom rather than pushing the rest out of alignment. */
.chip{
  display:flex;
  flex-direction:column;
  border:1px solid var(--ink);
  border-top-width:1px;
  padding:16px 16px 16px;
  background:var(--paper);
}
/* The top rule's weight is the confidence encoding, so it varies — but a
   thicker rule would otherwise push the numeral down inside its own box and
   the numerals would not line up across a row. The top padding gives back
   exactly what the border takes, so content always starts 17px in. */
.chip--high{border-top-width:12px;padding-top:5px}
.chip--moderate{border-top-width:5px;padding-top:12px}
.chip--low{border-top-width:1px;padding-top:16px}
.chip--none{border-style:dashed;border-width:1px;padding-top:16px}

.chip__field{
  margin-top:8px;
  padding:8px 0;
  /* the display numeral's own line box, so every field is the same height
     whether or not it contains one */
  min-height:calc(var(--s-display) * 0.82);
  display:flex;
  align-items:flex-start;
}
/* Low confidence is hatched — a physical texture, not a hue. The numeral
   keeps the same left edge as the unit line beneath it. */
.chip--low .chip__field{
  background-image:repeating-linear-gradient(45deg,var(--hatch) 0 1px,transparent 1px 7px);
  margin-left:-16px;
  margin-right:-16px;
  padding:8px 16px;
}
/* Where the field is the first thing in the box — a card, with no scale
   caption above it — the hatch runs up to the top rule instead of starting a
   gap below it. It is painted by a pseudo-element rather than by moving the
   field, because the field is a flex item and shifting it would take the
   numeral with it, out of line with the numerals beside it. */
.chip--low .chip__field:first-child{
  background-image:none;
  position:relative;
}
.chip--low .chip__field:first-child::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-24px;        /* the box's top padding, plus the field's own margin */
  bottom:0;
  background-image:repeating-linear-gradient(45deg,var(--hatch) 0 1px,transparent 1px 7px);
}
.chip--low .chip__field:first-child > *{position:relative}
/* Low confidence carries two independent signals, not one. The hatch behind
   the field reads at a glance; the numeral itself is cut to hairline so the
   figure reads as provisional at reading distance too, and so the state
   survives a greyscale print of the field texture. Weight, not colour, and
   not a smaller size — a shrunken number would say "less important" when what
   is meant is "less certain". */
.chip--low .chip__num{font-weight:200}
/* the numeral is optically aligned to the unit line beneath it: the
   negative margin cancels the side bearing at display size */
.chip__num{
  font-size:var(--s-display);
  line-height:.82;
  font-weight:700;
  letter-spacing:-0.05em;
  margin-left:-0.045em;
  color:var(--ink);
  font-variant-numeric:tabular-nums lining-nums;
}
/* The band the score falls in, between the numeral and the unit line. It
   carries its range: the unit line beneath it opens with the confidence
   rating, and the two are different scales. */
.chip__grade{
  margin-top:14px;
  font-size:var(--s-body);
  line-height:1.15;
  font-weight:700;
  letter-spacing:-0.01em;
  color:var(--ink);
}
.chip__grade span{color:var(--ink-3);font-weight:600}
.chip__unit{
  margin-top:16px;
  font-size:var(--s-label);
  line-height:16px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--ink);
  font-variant-numeric:tabular-nums lining-nums;
}
/* The caveat sits at the foot of the box. Where a box has slack — the boxes
   in a row are one height, so one of them always will — the slack falls above
   this rather than below it, which reads as the caveat being anchored rather
   than as a gap after it. */
.chip__warn{
  display:inline-block;
  align-self:flex-start;
  margin-top:auto;
  padding:4px 8px;
  border:2px solid var(--ink);
  font-size:var(--s-label);
  line-height:16px;
  font-weight:700;
  letter-spacing:.02em;
}
/* auto-margin absorbs slack but guarantees nothing, so the gap above the
   caveat is set on the line before it. Margins do not collapse in a flex
   column, so 20px is a floor rather than a suggestion. */
.chip--low .chip__sample,
.chip--low .chip__unit:last-of-type{margin-bottom:20px}
/* Insufficient. The numeral slot holds a question mark at the size a score
   would be: unknown, not zero. A dash was tried first and rejected — a short
   horizontal rule in the numeral slot is the one shape this state must never
   suggest, because an empty bar is exactly what a reader would take it for.
   Set lighter than a score so it reads as an absence rather than an emphatic
   mark, and it puts the label and the unit line on exactly the lines they
   occupy in every other box. */
.chip__num--none{
  font-size:var(--s-display);
  line-height:.82;
  font-weight:400;
  letter-spacing:0;
  color:var(--ink-3);
}
.chip__none{
  font-size:var(--s-body);
  line-height:24px;
  font-weight:600;
}
.chip__form{margin-top:16px}

/* --- flags -------------------------------------------------------------- */
.flag{
  position:relative;
  border:1px solid var(--ink);
  padding:16px 16px 16px 32px;
  margin-top:16px;
}
.flag::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;width:8px;
  background:var(--ink);
}
.flag--favourable::before{
  background-image:repeating-linear-gradient(0deg,var(--ink) 0 2px,transparent 2px 6px);
  background-color:transparent;
  border-right:1px solid var(--ink);
}
.flag__tag{
  display:inline-block;
  font-size:var(--s-label);
  line-height:16px;
  font-weight:700;
  letter-spacing:.03em;
  padding:4px 8px;
}
.flag--adverse .flag__tag{background:var(--ink);color:var(--paper)}
.flag--favourable .flag__tag{box-shadow:inset 0 0 0 2px var(--ink);color:var(--ink)}
.flag__body{margin-top:12px;font-size:var(--s-body);line-height:24px}

/* worker-report aggregates — deliberately unlike a flag: no box, no tag,
   no spine, hairline only, and the denominator inside the sentence. */
.ror{border-top:1px solid var(--rule);padding-top:8px;margin-top:16px}
.ror__stat{font-weight:700;font-variant-numeric:tabular-nums lining-nums}
.ror__where{color:var(--ink-3);font-weight:600;letter-spacing:.03em}

/* --- pillars ------------------------------------------------------------ */
.pillars{border-bottom:1px solid var(--rule)}
.pillar{
  display:grid;
  grid-template-columns:96px minmax(0,1fr) 176px;
  column-gap:24px;
  align-items:start;
  border-top:1px solid var(--rule);
  padding:16px 0 24px;
}
.pillar > *{min-width:0}
.pillar__w{
  font-size:var(--s-head);
  line-height:.9;
  font-weight:700;
  letter-spacing:-0.04em;
  margin-left:-0.04em;
  font-variant-numeric:tabular-nums lining-nums;
}
.pillar__name{font-size:var(--s-body);line-height:24px;font-weight:700}
.pillar__desc{font-size:var(--s-body);line-height:24px;color:var(--ink-2);margin-top:4px}
.pillar__bar{margin-top:8px}
.pillar__bar i{display:block;height:8px;background:var(--ink)}
.pillar__unit{margin-top:8px;color:var(--ink-3);font-weight:600;letter-spacing:.03em}

/* --- statement lists ---------------------------------------------------- */
/* No rule between items. A hairline every 60px chopped the set into a stack of
   unrelated slats and competed with the dash that already marks each item;
   the space does the separating, and the dashes carry the enumeration. */
.rulelist li{
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  column-gap:16px;
}
.rulelist li + li{margin-top:20px}
.rulelist li > *{min-width:0}
/* The hanging column carries a rule, not an ordinal: these items are a set,
   not a sequence, and nothing refers back to "rule 04". */
.rulelist__n{
  align-self:start;
  margin-top:11px;
  width:20px;height:2px;
  background:var(--ink-3);
}
.stack--always{border-top:1px solid var(--ink)}
.stack--never{border-top:6px solid var(--ink)}
.stack__title{margin-top:16px;margin-bottom:8px}

/* --- pull quote --------------------------------------------------------- */
.quote{border-top:6px solid var(--ink);padding-top:24px}
.quote p{font-size:var(--s-head);line-height:1.1;font-weight:500;letter-spacing:-0.012em}
.quote cite{
  display:block;margin-top:16px;font-style:normal;
  font-size:var(--s-label);line-height:16px;font-weight:700;letter-spacing:.03em;
}

/* --- big statistic ------------------------------------------------------ */
.stat{border-top:1px solid var(--ink);padding-top:16px}
.stat__n{
  font-size:var(--s-display);
  line-height:.82;
  font-weight:700;
  letter-spacing:-0.05em;
  margin-left:-0.045em;
  font-variant-numeric:tabular-nums lining-nums;
}
.stat__unit{
  margin-top:16px;
  font-size:var(--s-label);line-height:16px;font-weight:600;letter-spacing:.02em;
}

/* --- buttons ------------------------------------------------------------ */
.btns{display:flex;flex-wrap:wrap;gap:8px}
.btn{
  display:inline-block;
  border:1px solid var(--ink);
  padding:12px 16px;
  font-size:var(--s-label);
  line-height:16px;
  font-weight:700;
  letter-spacing:.03em;
  text-decoration:none;
  background:var(--paper);
  color:var(--ink);
}
.btn--solid{background:var(--ink);color:var(--paper)}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn--solid:hover{background:var(--paper);color:var(--ink)}

/* --- footer ------------------------------------------------------------- */
.footer{border-top:4px solid var(--ink);padding-top:32px;padding-bottom:64px}
.footer h2{font-size:var(--s-label);line-height:16px;font-weight:700;letter-spacing:.03em}
.footer li{margin-top:8px}
.footer li a{
  font-size:var(--s-body);line-height:24px;text-decoration:none;
  border-bottom:1px solid var(--rule);
}
.footer li a:hover{border-bottom-color:var(--ink)}

/* ==========================================================================
   PROFILE EXTENSIONS
   Everything below is new to this page. No new colour token, no new type
   size, no new geometry that the direction does not already own.
   ========================================================================== */

/* --- the header unit ----------------------------------------------------
   On the canonical page the sample line is not a caption. It is set at body
   size in full ink, directly under the numeral, because the rule is that it
   is part of the number: never smaller, never grey-on-grey, never below the
   fold. The 12px setting is kept for the comparables, where the chip is the
   same object at the same size as it appears on the homepage. */
.chip__unit--lead{
  font-size:var(--s-body);
  line-height:24px;
  font-weight:600;
  letter-spacing:-0.006em;
}
.chip__sample{
  margin-top:8px;
  font-size:var(--s-body);
  line-height:24px;
  font-weight:400;
  color:var(--ink);
  font-variant-numeric:tabular-nums lining-nums;
}
/* Status. The chip__warn geometry at body size — a 2px ink frame — with no
   spine and no tag, so it cannot be read as a flag. */
.notice{
  display:block;
  border:2px solid var(--ink);
  padding:12px 16px;
  font-size:var(--s-body);
  line-height:24px;
  font-weight:600;
}

/* --- flags: the criterion line ------------------------------------------ */
.flag__crit{
  margin-top:8px;
  font-size:var(--s-label);
  line-height:16px;
  font-weight:600;
  letter-spacing:.03em;
  color:var(--ink-3);
}

/* --- pillars: score, bar, confidence rail --------------------------------
   Column 1 carries the pillar's own score; column 3 carries the rail. The
   rail's top rule repeats the chip border exactly (5px Moderate, 1px Low,
   dashed for a pillar with no publishable score) and the low-confidence
   score field carries the chip's 45-degree hatch. Nothing here is hue. */
.pillar{grid-template-columns:176px minmax(0,1fr) 176px}
/* the field is wider than the numeral needs, because the bar wants the range:
   the eight bars share a left axis and are read against each other, so the
   span from 41 to 74 has to be a difference you can see across a row gap. */
.pillar__field{padding-right:8px}
.pillar__score{
  font-size:var(--s-head);
  line-height:.9;
  font-weight:700;
  letter-spacing:-0.04em;
  margin-left:-0.04em;
  font-variant-numeric:tabular-nums lining-nums;
}
.pillar--low .pillar__field{
  background-image:repeating-linear-gradient(45deg,var(--hatch) 0 1px,transparent 1px 7px);
  padding:8px;
  margin:-8px 0 0 -8px;
}
/* A pillar carries the confidence rules independently of the headline, so the
   hairline stroke lands here too. See the note on .chip--low .chip__num. */
.pillar--low .pillar__score{font-weight:200}
/* A pillar under its threshold. No numeral, no bar, no track a missing bar
   could be measured against — the sentence is the whole rendering. The row
   rule turns dashed and full-strength, the only interruption in the page's
   hairline rhythm. */
.pillar--none{border-top:1px dashed var(--ink)}
.pillar__none{
  font-size:var(--s-body);
  line-height:24px;
  font-weight:700;
}
.pillar__weight{margin-top:4px;color:var(--ink-3);font-weight:600;letter-spacing:.03em}

.conf__rule{height:5px;background:var(--ink)}
.pillar--low .conf__rule{height:1px}
.pillar--none .conf__rule{height:0;background:transparent;border-top:1px dashed var(--ink)}
.conf__word{margin-top:8px;font-size:var(--s-body);line-height:24px;font-weight:700}
.conf__n{
  margin-top:4px;color:var(--ink-3);font-weight:600;letter-spacing:.03em;
  font-variant-numeric:tabular-nums lining-nums;
}

/* --- public record ------------------------------------------------------ */
.rec{
  text-decoration:none;
  border-bottom:1px solid var(--rule);
}
.rec:hover{border-bottom-color:var(--ink)}

/* --- context — the only unenclosed block on the page ---------------------
   No border, no spine, no tier tag, no full-strength ink, hung off a column
   nothing else on the page uses and separated from the record by an empty
   band. The disclaimer is set darker and heavier than the material it
   introduces, so the block reads caveat first and cannot function as a
   mitigation sitting beside a flag. */
.context{border-top:1px solid var(--rule);padding-top:24px;padding-left:32px}
/* the indent is the part of the distinction that survives the narrow field,
   where the column offset collapses: every other block on the sheet sits on
   the flush-left axis, so a block that steps off it reads as an aside at
   any width. */
@media (max-width:760px){.context{padding-left:20px}}
.context__lead{font-size:var(--s-body);line-height:24px;font-weight:500;color:var(--ink)}
.context__item{margin-top:24px;font-size:var(--s-body);line-height:24px;color:var(--ink-2)}

/* --- comparables -------------------------------------------------------- */
.alt__name{font-size:var(--s-body);line-height:24px;font-weight:700;margin-bottom:8px}

/* --- responsive: the field itself changes count ------------------------- */
@media (max-width:1100px){
  :root{--cols:8;--margin:32px;--gutter:24px}
  .row{row-gap:24px}
  .row > .b{grid-column:1 / -1}
  .row > .b.half{grid-column:span 4}
  .row > .b.quarter{grid-column:span 4}
  .row > .b.band__num{grid-column:1 / -1}
  .pillar{grid-template-columns:112px minmax(0,1fr);row-gap:8px}
  .pillar > :last-child{grid-column:2 / -1}
}

@media (max-width:760px){
  :root{--cols:4;--margin:20px;--gutter:16px}
  .row > .b.half,
  .row > .b.quarter{grid-column:1 / -1}
  /* the nav is no longer beside the wordmark but stacked under it, a full-width
     block of its own, so it returns to the page's flush-left axis */
  .nav__list{justify-content:flex-start}
  .band{padding-top:40px;padding-bottom:112px}
  /* .row.band__head, not .band__head: the base rule is written on both classes
     and outranks a single class here, so the phone override never landed. */
  .row.band__head{margin-bottom:56px}
  .footer{padding-bottom:48px}
  /* the pillar row unstacks completely: score, then the pillar, then the
     rail, each on the page's single flush-left axis */
  .pillar{grid-template-columns:minmax(0,1fr);row-gap:16px}
  .pillar > *,
  .pillar > :last-child{grid-column:1 / -1}
  .pillar__field{max-width:200px}
  .pillar--low .pillar__field{max-width:208px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}

/* ===== added for the multi-page site ==================================== */

/* The Standing List. A ruled table on the page's own field: score, band, the
   company with its whole unit inline, and movement as a band change. Every row
   carries its sample and its headcount in the row itself — never a footnote,
   never on hover. */
.slist{margin-top:8px}
.slist li{border-top:1px solid var(--rule)}
.slist li:last-child{border-bottom:1px solid var(--rule)}
.slist__row{
  display:grid;
  grid-template-columns:88px 168px minmax(0,1fr) 176px;
  column-gap:24px;
  align-items:start;
  padding:20px 0;
}
.slist__score{
  font-size:var(--s-h1);line-height:.9;font-weight:700;letter-spacing:-0.03em;
  margin-left:-0.03em;color:var(--ink);
  font-variant-numeric:tabular-nums lining-nums;
}
.slist__band{font-size:var(--s-body);line-height:20px;font-weight:700;color:var(--ink);padding-top:4px}
.slist__band span{display:block;font-size:var(--s-label);font-weight:400;color:var(--ink-3);margin-top:2px}
.slist__name{font-size:var(--s-body);line-height:22px;font-weight:700;color:var(--ink)}
.slist__name a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule)}
.slist__name a:hover{text-decoration-color:currentColor}
.slist__unit{
  margin-top:6px;font-size:var(--s-label);line-height:18px;color:var(--ink-2);
  font-variant-numeric:tabular-nums lining-nums;
}
.slist__move{
  font-size:var(--s-label);line-height:18px;font-weight:700;color:var(--ink-2);padding-top:6px;
}
.slist__move span{display:block;font-weight:400;margin-top:2px}
/* Confidence is form, never hue: a full-weight rule for High, and this list
   publishes nothing below High. */
.slist__rule{height:4px;background:var(--ink);width:56px;margin-top:10px}

@media (max-width:1100px){
  .slist__row{grid-template-columns:80px minmax(0,1fr);row-gap:8px}
  .slist__band,.slist__move{grid-column:2}
  .slist__name{grid-column:2}
}
@media (max-width:760px){
  .slist__row{grid-template-columns:1fr;row-gap:6px}
  .slist__band,.slist__move,.slist__name{grid-column:1}
}

/* Company directory */
.dir{margin-top:8px}
.dir li{border-top:1px solid var(--rule);padding:24px 0}
.dir li:last-child{border-bottom:1px solid var(--rule)}
.dir__name{font-size:var(--s-head);line-height:1.06;font-weight:700;letter-spacing:-0.016em}
.dir__name a{text-decoration:none}
.dir__name a:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.dir__unit{margin-top:10px;font-size:var(--s-body);line-height:22px;font-weight:600;
  font-variant-numeric:tabular-nums lining-nums}
.dir__why{margin-top:6px;font-size:var(--s-label);line-height:18px;color:var(--ink-2)}

/* A plain prose measure for the argument pages, where there is no data to set
   against and the field would otherwise leave the line too long. */
.prose{max-width:34em}
.prose + .prose{margin-top:20px}

/* Active nav item. Red is identity, and the current page is a statement about
   the site rather than about any company, so it may take it. */
.nav__list a[aria-current="page"]{color:var(--red);text-decoration:none}

/* The weights table. It deliberately does NOT reuse the pillar specimen: that
   numeral slot means a score everywhere else on the site, and a weight of 18
   sitting in it — with a bar drawn to look nearly full — reads as a score of
   18. Here the weight is set at label scale and the bar is its true share of
   100, so nothing on the page can be mistaken for a company's number. */
.wt{margin-top:8px}
.wt li{
  display:grid;
  grid-template-columns:150px minmax(0,1fr) 200px;
  column-gap:24px;
  align-items:baseline;
  border-top:1px solid var(--rule);
  padding:18px 0;
}
.wt li:last-child{border-bottom:1px solid var(--rule)}
.wt__w{
  font-size:var(--s-body);line-height:22px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums lining-nums;
}
.wt__name{font-size:var(--s-body);line-height:22px;font-weight:700;color:var(--ink)}
.wt__bar{position:relative;height:8px;background:var(--rule);align-self:center}
.wt__bar i{display:block;height:8px;background:var(--ink)}
@media (max-width:760px){
  .wt li{grid-template-columns:1fr;row-gap:8px}
}

/* The one input on the site. Square, ruled, and the same ink as everything
   else — a field, not a card. */
.form{margin:0}
.form__field{
  display:block;width:100%;margin-top:10px;
  font:400 var(--s-body)/24px var(--sans);
  color:var(--ink);background:var(--paper);
  border:2px solid var(--ink);border-radius:0;
  padding:12px 14px;
}
.form__field::placeholder{color:var(--ink-3)}
.form__field:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.form__go{margin-top:16px}