/* it-ih-v2: rhythm pass for the trade pages.
   The page had five card grids in a row, 33 boxed cards, and every section set
   to the same heading, lede, grid beat. Nothing was wrong with any one section;
   the sameness was the problem. This layer gives three of them their own shape
   and takes the boxes off where a box was carrying no hierarchy. Same words,
   same brand, same colour. */

/* one radius scale on this page: 14 for surfaces, full for pills */
.ih-v2 .ih-doc,.ih-v2 .ih-tpls>a img,.ih-v2 .sc{border-radius:14px}

/* 1 the six documents: a rail, not six boxes.
   They are six links of equal weight, so they read better as a list with
   hairlines than as six raised cards competing with each other. */
.ih-v2 .ih-docs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;border-top:1px solid var(--ih-line);border-left:1px solid var(--ih-line);
  border-radius:14px;overflow:hidden;background:var(--ih-line)}
.ih-v2 .ih-doc{background:#fff;border:0;border-right:1px solid var(--ih-line);
  border-bottom:1px solid var(--ih-line);border-radius:0;box-shadow:none;
  align-items:flex-start;text-align:left;padding:20px 20px 18px;gap:8px;
  transition:background .18s ease}
.ih-v2 .ih-doc:hover{background:#FFFBF7;transform:none;box-shadow:none}
.ih-v2 .ih-doc .ico{width:34px;height:34px;border-radius:9px;background:var(--ih-cream);
  display:grid;place-items:center;color:var(--rp-orange)}
.ih-v2 .ih-doc .ico svg{width:18px;height:18px}
.ih-v2 .ih-doc h3{margin:2px 0 0;font-size:15px}
.ih-v2 .ih-doc .go{margin-top:auto;padding-top:8px;font-size:12.5px;color:var(--rp-orange)}
@media (max-width:820px){.ih-v2 .ih-docs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ih-v2 .ih-docs{grid-template-columns:1fr}}

/* 2 how carpenters bill: the figure is the point, so pull it out.
   Three assumptions, not a sequence, so no numbering. Hairline rows, the
   money set large in the margin. */
.ih-v2 .ih-bill{display:block}
.ih-v2 .ih-bill>div{display:grid;grid-template-columns:minmax(0,1fr) 168px;
  gap:18px;align-items:start;padding:22px 0;border-top:1px solid var(--ih-line);
  background:none;border-radius:0;box-shadow:none}
.ih-v2 .ih-bill>div:last-child{border-bottom:1px solid var(--ih-line)}
.ih-v2 .ih-bill .big-ico{display:none}
.ih-v2 .ih-bill h3{margin:0 0 6px;font-size:17px;letter-spacing:-.01em}
.ih-v2 .ih-bill p{margin:0;max-width:56ch}
.ih-v2 .ih-billfig{align-self:center;text-align:right;font-weight:800;
  font-size:clamp(20px,2.4vw,27px);letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1.1}
.ih-v2 .ih-billfig small{display:block;font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-top:5px}
@media (max-width:700px){
  .ih-v2 .ih-bill>div{grid-template-columns:1fr;gap:10px}
  .ih-v2 .ih-billfig{text-align:left;order:-1}
  .ih-v2 .ih-billfig small{display:inline;margin-left:8px}
}

/* 3 nothing to install: three short facts, so one line with rules between,
   no boxes at all. */
.ih-v2 .ih-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border:1px solid var(--ih-line);border-radius:14px;background:#fff;overflow:hidden}
.ih-v2 .ih-trio>div{padding:22px 22px;background:none;border:0;border-right:1px solid var(--ih-line);
  border-radius:0;box-shadow:none}
.ih-v2 .ih-trio>div:last-child{border-right:0}
.ih-v2 .ih-trio .big-ico{width:30px;height:30px;border-radius:8px;margin-bottom:10px;
  background:var(--ih-cream);border-color:var(--ih-line);color:var(--rp-orange)}
.ih-v2 .ih-trio .big-ico svg{width:16px;height:16px}
.ih-v2 .ih-trio h3{font-size:15px;margin:0 0 5px}
@media (max-width:760px){
  .ih-v2 .ih-trio{grid-template-columns:1fr}
  .ih-v2 .ih-trio>div{border-right:0;border-bottom:1px solid var(--ih-line)}
  .ih-v2 .ih-trio>div:last-child{border-bottom:0}
}

/* icons keep their paint when the surrounding card styles change */
.ih-v2 .ih-doc .ico svg .s,.ih-v2 .ih-trio .big-ico svg .s{fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ih-v2 .ih-doc .ico svg .f,.ih-v2 .ih-trio .big-ico svg .f{fill:currentColor;opacity:.15;stroke:none}
/* the open link is a link, not a heavy pill, now that the box is gone */
.ih-v2 .ih-doc .go{background:none;border:0;padding:0;color:var(--rp-orange);font-weight:700;
  display:inline-flex;align-items:center;gap:5px}
.ih-v2 .ih-doc .go svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.ih-v2 .ih-doc:hover .go{gap:9px;transition:gap .18s ease}
/* explicit placement so the copy stays in the wide column and the figure in its own */
.ih-v2 .ih-bill>div h3,.ih-v2 .ih-bill>div p{grid-column:1}
.ih-v2 .ih-billfig{grid-column:2;grid-row:1 / span 2}
@media (max-width:700px){
  .ih-v2 .ih-bill>div h3,.ih-v2 .ih-bill>div p,.ih-v2 .ih-billfig{grid-column:1;grid-row:auto}
}

/* a row with no figure of its own runs the full width rather than leaving a gap */
.ih-v2 .ih-bill>div.ih-bill-wide{grid-template-columns:1fr}
.ih-v2 .ih-bill>div.ih-bill-wide h3,.ih-v2 .ih-bill>div.ih-bill-wide p{grid-column:1}