/*
Theme Name: Versatile House
Theme URI: https://www.versatile.group/
Description: The group layer for versatile.group. Paper with a sand grain in it,
             a chromatic navy pulled down from the Versatile blue, an ember accent
             rationed to index numerals and graduated rules, and Source Serif 4 for
             anything the group says in its own voice. Fonts are self-hosted, so no
             request leaves the site to render a page.
Author: Versatile Equipments Pvt Ltd
Template: twentytwentyfive
Version: 1.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Text Domain: versatile-house
*/

/* ==================================================================
 * Versatile Group - "House", second pass
 *
 * The first pass was elegant and inert: warm white, a serif, hairlines,
 * one photograph and a logo wall with the colour drained out of it. Six
 * of the most interesting things in the group were set as paragraphs.
 *
 * What changed:
 *   - the group's own colour is a blue instrument in a dark foundry, so
 *     the heavy band is a chromatic navy rather than a neutral one, and
 *     the blue is allowed to appear at size.
 *   - brass gave way to ember. Brass was polite; a foundry runs on heat
 *     and the accent should say so.
 *   - every company and every platform now carries a real picture.
 *   - companies and platforms are set differently on purpose. Companies
 *     are three long editorial rows; platforms are a tighter grid,
 *     because a suite of software should read as a set.
 *
 * The rules that survived: nothing is boxed on paper, structure comes
 * from hairlines and alignment, and the accent is rationed.
 * ================================================================== */


:root {
  --paper:   #FBF9F5;
  --panel:   #FFFFFF;
  --tint:    #F1EDE4;

  --ink:     #16191C;
  --body:    #454B50;
  --muted:   #666C72;

  /* Versatile blue from the brand kit, plus the two steps around it the
     interface needs. */
  --blue:      #29629C;
  --blue-deep: #1B4778;
  --blue-lift: #8FC2F0;

  /* The heavy band. Pulled down from the brand blue rather than taken
     from a neutral, so it is recognisably the same family as the mark
     and as the machines in the photographs. */
  --night:   #0E2C4C;
  --night-2: #09203A;

  /* Ember. Rationed to index numerals, section rules and one hover
     state; never a fill, never body text. */
  --ember:      #B24D1C;
  --ember-lift: #E08A55;

  --rule:      #E2DCD0;
  --rule-dark: rgba(255,255,255,.16);

  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:  Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cond:  'Roboto Condensed', 'Arial Narrow', system-ui, sans-serif;

  --grain: url('/wp-content/themes/versatile-house/assets/img/grain.png');

  --wrap: 1240px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* No serif is loaded for Japanese, so headings there are handed to the
   reader's system rather than to a fallback that pairs badly. */
:lang(ja) { --serif: 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif; }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* width/height attributes are presentational hints, and they beat
   aspect-ratio unless one dimension is auto. The prototype markup
   carried no attributes so this never showed; the block markup does,
   and every framed image rendered at its full pixel height. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-deep); text-decoration: underline; text-underline-offset: .18em; }
::selection { background: var(--blue); color: #fff; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -.012em;
  margin: 0;
}
h1 { font-size: clamp(2.5rem, 4.6vw, 3.9rem); line-height: 1.1; }
h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.16; }
h3 { font-size: 1.5rem; line-height: 1.25; }
p  { margin: 0; }

/* --- measure -------------------------------------------------------- */
.vh-wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.vh-prose { max-width: min(62ch, 100%); }
.vh-prose p + p { margin-top: 1.05em; }

.vh-band { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.vh-band--night { color: #BFD0E0; }
.vh-band--night h1, .vh-band--night h2, .vh-band--night h3 { color: #F2F7FC; }
.vh-band--night a { color: var(--blue-lift); }
.vh-band--night a:hover { color: #fff; }

/* --- section label --------------------------------------------------
 * An index number in ember, the section's name, and a rule running out
 * to the margin. The number is what makes the page read as a document
 * with parts rather than a scroll of unrelated blocks.               */
.vh-label {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--cond);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}
.vh-label__no { color: var(--ember); font-variant-numeric: tabular-nums; }
.vh-label::after {
  content: "";
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, var(--ember) 0 3.5rem, var(--rule) 3.5rem);
  transform: translateY(-.3em);
}
.vh-band--night .vh-label { color: #EAF1F8; }
.vh-band--night .vh-label__no { color: var(--ember-lift); }
.vh-band--night .vh-label::after {
  background: linear-gradient(90deg, var(--ember-lift) 0 3.5rem, var(--rule-dark) 3.5rem);
}

/* --- masthead ------------------------------------------------------- */
.vh-mast {
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 40;
}
.vh-mast__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 1.15rem;
}
.vh-brand { display: flex; align-items: center; gap: .85rem; }
.vh-brand img { height: 30px; width: auto; }
.vh-brand__rule { width: 1px; height: 22px; background: var(--rule); }
.vh-brand__group {
  font-family: var(--cond);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
  padding-left: .1em;
}
.vh-nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2rem); }
.vh-nav a {
  font-family: var(--cond);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink);
  padding-block: .35rem;
  box-shadow: inset 0 -2px 0 transparent;
  transition: box-shadow .18s var(--ease);
}
.vh-nav a:hover { color: var(--ink); text-decoration: none; box-shadow: inset 0 -2px 0 var(--ember); }
.vh-nav a.is-current { box-shadow: inset 0 -2px 0 var(--ember); }

/* --- opening -------------------------------------------------------- */
.vh-open { padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2.5rem, 5vw, 4rem); }
.vh-open__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: end;
}
.vh-open h1 { max-width: min(16ch, 100%); }
.vh-open__lead {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.7vw, 1.42rem);
  line-height: 1.55;
  color: var(--body);
  max-width: min(46ch, 100%);
  margin-bottom: .3rem;
}
.vh-open__since {
  font-family: var(--cond);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 1.4rem;
}

/* Full bleed. The plate is the page's one moment of scale, and a 21:9
   photograph inside the measure just reads as letterboxed. */
.vh-plate { margin: clamp(2.5rem, 5vw, 4rem) 0 0; }
.vh-plate img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.vh-plate figcaption {
  font-family: var(--cond);
  font-size: .86rem;
  letter-spacing: .05em;
  color: var(--muted);
  margin-top: .85rem;
}
.vh-plate figcaption::before {
  content: "";
  display: inline-block;
  width: 1.6rem;
  height: 2px;
  background: var(--ember);
  margin-right: .6rem;
  vertical-align: .25em;
}

/* --- figures -------------------------------------------------------- */
.vh-figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  border-top: 2px solid var(--rule);
  padding-top: 1.6rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.vh-figure__v {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  display: block;
}
.vh-figure__l {
  font-family: var(--cond);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .6rem;
  display: block;
}
.vh-band--night .vh-figures { border-top-color: var(--rule-dark); }
.vh-band--night .vh-figure__v { color: #fff; }
.vh-band--night .vh-figure__l { color: #93A8BC; }

/* --- companies: three long rows -------------------------------------
 * A machining company and a foundry instrument works each get a picture
 * and room to say what they do. The picture side alternates so the eye
 * is not walked down a column of identical rows.                     */
.vh-rows { border-top: 1px solid var(--rule); }
.vh-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(1.5rem, 4vw, 3.75rem);
  padding-block: clamp(2.25rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--rule);
  align-items: center;
}
.vh-row__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--tint);
}
.vh-row--flip .vh-row__media { order: 2; }
.vh-row__no {
  font-family: var(--cond);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ember);
  display: block;
  margin-bottom: .7rem;
}
.vh-row__kind {
  font-family: var(--cond);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .5rem;
  display: block;
}
.vh-row__body { margin-top: 1.1rem; max-width: min(54ch, 100%); }
.vh-row h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); }

/* --- platforms: a set ------------------------------------------------
 * Four pieces of software, so they are set as a grid rather than as
 * more long rows. On the navy the cards are a barely-raised panel with
 * a hairline, which gives them edges without putting a box on paper. */
.vh-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.vh-card {
  background: rgba(255,255,255,.045);
  border: 1px solid var(--rule-dark);
  display: flex;
  flex-direction: column;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.vh-card:hover { background: rgba(255,255,255,.075); border-color: rgba(255,255,255,.28); }
.vh-card__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-bottom: 1px solid var(--rule-dark);
}
.vh-card__in { padding: clamp(1.4rem, 2.4vw, 2rem); display: flex; flex-direction: column; flex: 1; }
.vh-card__no {
  font-family: var(--cond);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--ember-lift);
  display: block;
  margin-bottom: .6rem;
}
.vh-card__kind {
  font-family: var(--cond);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8FA3B8;
  margin-top: .45rem;
  display: block;
}
.vh-card p { margin-top: 1rem; font-size: 1rem; }
.vh-card__go {
  font-family: var(--cond);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: auto;
  padding-top: 1.4rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  align-self: flex-start;
}
.vh-card__go::after {
  content: ""; width: 1.5rem; height: 1px; background: currentColor;
  transition: width .25s var(--ease);
}
.vh-card__go:hover { text-decoration: none; }
.vh-card__go:hover::after { width: 2.4rem; }
.vh-card__host {
  font-family: var(--cond);
  font-size: .82rem;
  letter-spacing: .04em;
  color: #8C9DB0;
  margin-top: .4rem;
}

/* --- go link on paper ----------------------------------------------- */
.vh-go {
  font-family: var(--cond);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: 1.2rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.vh-go::after {
  content: ""; width: 1.5rem; height: 1px; background: currentColor;
  transition: width .25s var(--ease);
}
.vh-go:hover { text-decoration: none; }
.vh-go:hover::after { width: 2.4rem; }

/* --- proof -----------------------------------------------------------
 * The customer wall, brought over from sandtesting.com as designed there:
 * the same 34 brands in colour, prepared at a common optical weight so no
 * one mark shouts, in a centred flow rather than a rigid grid so a short
 * final row sits under the middle. Full colour at rest; on hover a logo
 * drops to grey and fades, which lifts the rest of the wall by contrast.
 * The marks are landscape (300x110), so they are sized by a fixed box and
 * contain-fitted, not stretched to a column.                          */
.vh-marks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(.75rem, 2vw, 1.5rem) clamp(1.25rem, 3vw, 2.5rem);
}
.vh-marks img {
  width: clamp(96px, 11vw, 138px);
  height: clamp(35px, 4vw, 50px);
  object-fit: contain;
  filter: grayscale(0);
  opacity: 1;
  transition: filter .3s var(--ease), opacity .3s var(--ease);
}
.vh-marks img:hover { filter: grayscale(1); opacity: .55; }

/* --- a said thing ---------------------------------------------------- */
.vh-said__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: clamp(2rem, 5vw, 4.5rem); }
.vh-said__body > blockquote { grid-column: 2; }
.vh-said__body blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: 1.45;
  color: var(--ink);
}
.vh-band--night .vh-said__body blockquote { color: #EDF2F7; }
.vh-said__body cite {
  display: block;
  font-family: var(--cond);
  font-style: normal;
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  border-top: 2px solid var(--ember);
  max-width: 26rem;
}

/* --- call ------------------------------------------------------------ */
.vh-say { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.vh-button {
  display: inline-block;
  font-family: var(--cond);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--blue);
  padding: .95em 2.1em;
  border: 0;
  transition: background .2s var(--ease);
}
.vh-button:hover { background: var(--blue-deep); color: #fff; text-decoration: none; }
.vh-button--ghost { background: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
.vh-button--ghost:hover { background: none; color: var(--ember); box-shadow: inset 0 0 0 1px var(--ember); }
.vh-band--night .vh-button--ghost { color: #fff; box-shadow: inset 0 0 0 1px var(--rule-dark); }
.vh-band--night .vh-button--ghost:hover { color: #fff; box-shadow: inset 0 0 0 1px var(--ember-lift); }
.vh-calls { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: clamp(1.75rem, 3vw, 2.5rem); }

/* --- footer ---------------------------------------------------------- */
.vh-foot { background: var(--night-2); color: #9CB0C4; padding-block: clamp(3rem, 5vw, 4.5rem) 2rem; }
.vh-foot a { color: #C8D6E4; }
.vh-foot a:hover { color: #fff; }
.vh-foot__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}
.vh-foot__brand img { height: 22px; width: auto; margin-bottom: 1.25rem; }
.vh-foot h4 {
  font-family: var(--cond);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #E6EDF4;
  margin-bottom: 1.1rem;
}
.vh-foot ul { list-style: none; margin: 0; padding: 0; }
.vh-foot li + li { margin-top: .6rem; }
.vh-foot__base {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-dark);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: .88rem;
}
.vh-langs { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; list-style: none; margin: 0; padding: 0; font-family: var(--cond); font-size: .88rem; letter-spacing: .03em; }

/* --- narrow ---------------------------------------------------------- */
@media (max-width: 960px) {
  .vh-open__grid, .vh-say { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .vh-open__lead { margin-top: 1.5rem; margin-bottom: 0; }
  .vh-said__body { grid-template-columns: minmax(0, 1fr); }
  .vh-said__body > blockquote { grid-column: 1; }
  .vh-row { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .vh-row--flip .vh-row__media { order: 0; }
  .vh-cards { grid-template-columns: minmax(0, 1fr); }
  .vh-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vh-nav { display: none; }
}
@media (max-width: 600px) {
  .vh-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .vh-plate img { aspect-ratio: 4 / 3; }
}

/* ==================================================================
 * Art direction
 *
 * The layout was competent and had no idea in it. The idea is the one
 * the group already registered: granular precision. Everything below
 * comes from that, and nothing below is ornament for its own sake.
 *
 *   - the paper carries an actual grain, generated from the sand the
 *     whole business is built on, so the ground is a material rather
 *     than a fill.
 *   - rules are graduated. A section rule is a scale with ticks on it,
 *     which is what a sieve deck and a dial have in common.
 *   - the opening is typeset over the plant rather than beside it.
 *   - one oversized numeral per company row, set in the margin, gives
 *     the page the scale contrast it was missing.
 * ================================================================== */

/* --- ground --------------------------------------------------------- */
body { background-image: var(--grain); background-repeat: repeat; }
.vh-band { background-color: var(--paper); background-image: var(--grain); background-repeat: repeat; }
.vh-band--tint  { background-color: var(--tint); }
.vh-band--panel { background-color: var(--panel); }
/* the grain belongs to paper; the dark bands are lit, not printed */
.vh-band--night { background-color: var(--night); background-image: none; }

/* --- graduated rule -------------------------------------------------
 * The section rule is drawn as a scale: an ember lead-in, then a hairline
 * carrying fine ticks. It is the sieve deck and the dial face, reduced to
 * two pixels of height.                                                */
.vh-label::after {
  height: 9px;
  transform: translateY(-.06em);
  background:
    linear-gradient(90deg, var(--ember) 0 3.5rem, var(--rule) 3.5rem) 0 0 / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 9px) 0 3px / 100% 5px no-repeat;
}
.vh-band--night .vh-label::after {
  background:
    linear-gradient(90deg, var(--ember-lift) 0 3.5rem, var(--rule-dark) 3.5rem) 0 0 / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, var(--rule-dark) 0 1px, transparent 1px 9px) 0 3px / 100% 5px no-repeat;
}

/* --- the opening ----------------------------------------------------
 * A dark band the height of the window, the plant behind it, and the
 * claim set over the top. The scrim is a gradient rather than a flat
 * wash so the picture keeps its strength on the right while the type
 * side stays comfortably above 4.5:1.                                 */
.vh-hero {
  position: relative;
  min-height: min(78vh, 720px);
  display: flex;
  align-items: flex-end;
  background: var(--night-2);
  overflow: hidden;
  isolation: isolate;
}
.vh-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 38% 62%;
  z-index: -2;
}
.vh-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(6,17,30,.90) 0%, rgba(6,17,30,.74) 38%, rgba(6,17,30,.26) 72%, rgba(6,17,30,.10) 100%),
    linear-gradient(0deg, rgba(6,17,30,.72) 0%, rgba(6,17,30,0) 46%);
}
.vh-hero__in { padding-block: clamp(3rem, 8vw, 5.5rem); width: 100%; }
.vh-hero h1 {
  color: #fff;
  max-width: min(15ch, 100%);
  font-size: clamp(2.6rem, 5.6vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -.018em;
}
.vh-hero__lead {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  line-height: 1.55;
  color: #D6E1EC;
  max-width: min(50ch, 100%);
  margin-top: 1.5rem;
}
.vh-hero__since {
  font-family: var(--cond);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ember-lift);
  margin-bottom: 1.3rem;
  display: flex;
  align-items: center;
  gap: .85rem;
}
.vh-hero__since::before {
  content: "";
  width: 2.4rem;
  height: 2px;
  background: var(--ember);
  flex: none;
}
/* the caption belongs to the picture, so it sits on the picture side */
.vh-hero__credit {
  position: absolute;
  right: clamp(1.25rem, 4vw, 2.5rem);
  bottom: clamp(1.1rem, 2vw, 1.6rem);
  font-family: var(--cond);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  z-index: 1;
  text-align: right;
  max-width: min(46ch, 46vw);
}

/* --- figures, on the navy under the opening ------------------------- */
.vh-figures--hero {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.vh-figures--hero > div {
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1rem, 2vw, 1.75rem);
  border-left: 1px solid var(--rule-dark);
}
.vh-figures--hero > div:first-child { border-left: 0; padding-left: 0; }
.vh-band--figures { padding-block: 0; background: var(--night); }

/* --- scale contrast in the company rows -----------------------------
 * One large numeral per row, set in the margin and cropped by the row's
 * own edge. It is the only thing on the page allowed to be big for its
 * own sake, and it stops three equal rows from reading as a list.     */
.vh-row { position: relative; }
.vh-row__no {
  font-family: var(--serif);
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  font-weight: 300;
  line-height: .78;
  letter-spacing: -.03em;
  color: var(--ember);
  opacity: .38;
  font-variant-numeric: tabular-nums;
  margin-bottom: .55rem;
  display: block;
}

/* ==================================================================
 * WordPress adaptation
 *
 * The prototype was hand-written markup. In the theme the same design is
 * carried by core blocks so the copy stays editable, which brings two
 * things with it: a wrapper element around anything that used to be a
 * bare div, and core's flow layout putting a uniform margin between
 * every sibling. The components below manage their own spacing, so that
 * margin is cleared inside them and nowhere else.
 * ================================================================== */

:where(.vh-hero__in) > *,
:where(.vh-row__text) > *,
:where(.vh-card__in) > *,
:where(.vh-say) > *,
:where(.vh-say__right) > *,
:where(.vh-mast__row) > *,
:where(.vh-foot__base) > * { margin-block-start: 0; margin-block-end: 0; }

:where(.vh-hero, .vh-band, .vh-mast) .wp-block-group { margin-block: 0; }

/* core adds .wp-block-heading; the house h-rules are on the tags themselves */
:where(.wp-block-heading) { margin: 0; }

/* the row's text column is a group now, not a bare div */
.vh-row__text { display: block; }
.vh-row__cta { margin-top: 1.2rem; }
.vh-row__cta .vh-go { margin-top: 0; }

/* the card's link is wrapped in a paragraph, so the paragraph is the flex
   item that has to be pushed to the bottom of the card */
.vh-card__body { margin-top: 1rem; }
.vh-card__cta { margin-top: auto; padding-top: 1.4rem; }
.vh-card__cta .vh-card__go { margin-top: 0; padding-top: 0; }
.vh-card__host { margin-top: .4rem; }

.vh-h2-tight { max-width: min(22ch, 100%); }
.vh-lede-gap { margin-top: 1.4rem; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }

.vh-say__right { display: block; }
.vh-mast__end { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.75rem); }

/* the language switcher, dressed to sit quietly beside the navigation */
.vh-mast__end .wp-block-polylang-language-switcher select,
.pll-switcher-select {
  font-family: var(--cond);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--body);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: .5rem 1.7rem .5rem .7rem;
  line-height: 1;
  cursor: pointer;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) center, calc(100% - 9px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.vh-mast__end .wp-block-polylang-language-switcher select:hover { border-color: var(--ember); }

/* Polylang puts its class on the <ul> itself, so a descendant selector
   matches nothing and the bullets stay. */
ul.wp-block-polylang-language-switcher {
  display: flex; flex-wrap: wrap; gap: .4rem 1.1rem;
  list-style: none; margin: 0; padding: 0;
  font-family: var(--cond); font-size: .88rem; letter-spacing: .03em;
}
ul.wp-block-polylang-language-switcher li { margin: 0; }
.vh-foot ul.wp-block-polylang-language-switcher .current-lang > a { color: #fff; }

/* the parent theme sets nav font on the anchor, so a child rule has to
   match that specificity to win */
.vh-nav a.wp-block-navigation-item__content,
.vh-nav .wp-block-navigation-item__content {
  font-family: var(--cond);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .04em;
  color: var(--ink);
}
.vh-nav a.wp-block-navigation-item__content:hover { color: var(--ink); }
.vh-nav .wp-block-navigation__submenu-container {
  border: 1px solid var(--rule);
  background: var(--panel);
  box-shadow: 0 12px 38px rgba(20, 24, 28, .12);
}

/* --- what the group buys --------------------------------------------
 * Set like the figures band: three columns divided by hairlines rather
 * than three cards. A supplier reading this wants the categories and a
 * way in, not decoration.                                             */
.vh-buys {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 2px solid var(--rule);
}
.vh-buy {
  padding: clamp(1.5rem, 2.6vw, 2.2rem) clamp(1rem, 2vw, 2rem);
  border-left: 1px solid var(--rule);
}
.vh-buy:first-child { border-left: 0; padding-left: 0; }
.vh-buy__name { font-size: clamp(1.3rem, 1.9vw, 1.6rem); margin: 0; }
.vh-buy__note { margin-top: .7rem; font-size: .99rem; color: var(--body); }
.vh-buys + .vh-calls { margin-top: clamp(2rem, 3.5vw, 2.75rem); }

/* --- supplier registration ------------------------------------------
 * A plain, wide form. Suppliers fill this in on a phone in a workshop
 * office, so the fields are large, the labels sit above them, and
 * nothing depends on a placeholder that disappears when typing starts. */
.vh-form { max-width: 46rem; margin-top: clamp(2rem, 4vw, 3rem); }
.vh-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.vh-form__row + .vh-form__row, .vh-form__field + .vh-form__field,
.vh-form__row + .vh-form__field, .vh-form__field + .vh-form__row { margin-top: 1.25rem; }
.vh-form__field label, .vh-form__legend {
  display: block;
  font-family: var(--cond);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: .5rem;
}
.vh-form input[type=text], .vh-form input[type=email], .vh-form input[type=tel],
.vh-form textarea, .vh-form select, .vh-form input[type=file] {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: .8rem .9rem;
}
.vh-form input:focus, .vh-form textarea:focus, .vh-form select:focus {
  outline: 2px solid var(--blue);
  outline-offset: -1px;
  border-color: var(--blue);
}
.vh-form textarea { min-height: 8rem; resize: vertical; }
.vh-form__checks { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; }
.vh-form__checks label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--body);
  margin: 0;
}
.vh-form__hint { font-size: .92rem; color: var(--muted); margin-top: .45rem; }
.vh-form__req { color: var(--ember); }
/* the honeypot is for machines; it must never be reachable by anyone else */
.vh-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vh-form button { margin-top: 1.75rem; cursor: pointer; }
.vh-note {
  border-left: 3px solid var(--ember);
  padding: 1rem 0 1rem 1.25rem;
  margin-bottom: 2rem;
  background: none;
}
.vh-note--bad { border-left-color: #B3261E; }

@media (max-width: 1040px) {
  .vh-buys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vh-buy:nth-child(odd) { border-left: 0; padding-left: 0; }
  .vh-buy:nth-child(n+3) { border-top: 1px solid var(--rule); }
}
@media (max-width: 700px) {
  .vh-buys { grid-template-columns: minmax(0, 1fr); }
  .vh-buy { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; }
  .vh-buy:first-child { border-top: 0; }
  .vh-form__row { grid-template-columns: minmax(0, 1fr); }
}

/* --- inner pages -----------------------------------------------------
 * A page that brings its own bands is rendered flat, so the bands run
 * edge to edge. A page that does not gets a heading band and its content
 * held to a reading measure. The parent theme constrains post content to
 * its own contentSize, which is what stranded the first supplier page in
 * a 760px column with the design's full-width bands inside it.        */
.vh-band--head { padding-block: clamp(2.75rem, 5vw, 4.5rem); }
.vh-band--head .wp-post-title, .vh-band--head h1 { max-width: min(20ch, 100%); margin: 0; }

.vh-page :where(.wp-block-post-content) > * { max-width: 68ch; }
.vh-page :where(.wp-block-post-content) > .alignwide,
.vh-page :where(.wp-block-post-content) > .alignfull { max-width: none; }
.vh-page h2 { margin-top: 2.5em; }
.vh-page h3 { margin-top: 2em; }
.vh-page p + p, .vh-page ul, .vh-page ol { margin-top: 1.05em; }

/* --- text beside a photograph ---------------------------------------- */
.vh-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.75rem);
  align-items: center;
}
.vh-split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.vh-split__text p + p { margin-top: 1.05em; }
.vh-split__text p { max-width: min(52ch, 100%); }

/* --- the history ------------------------------------------------------
 * A rule with the years marked on it. The same graduated language as the
 * section rules, at the size of a page section: what a group has that a
 * new company does not is a date, so the date is the structure.       */
.vh-time { border-top: 2px solid var(--rule); margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.vh-mark {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.5rem, 2.6vw, 2.25rem);
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.vh-mark__when {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1;
  color: var(--ember);
  font-variant-numeric: tabular-nums;
}
.vh-mark__what { max-width: min(62ch, 100%); }
.vh-mark__what strong { color: var(--ink); font-weight: 500; }

/* --- standards -------------------------------------------------------- */
.vh-stds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 2px solid var(--rule);
}
.vh-std { padding: clamp(1.5rem, 2.6vw, 2.2rem) clamp(1rem, 2vw, 2rem); border-left: 1px solid var(--rule); }
.vh-std:first-child { border-left: 0; padding-left: 0; }
.vh-std__name { font-family: var(--serif); font-size: clamp(1.2rem, 1.8vw, 1.5rem); color: var(--ink); margin: 0; }
.vh-std__note { margin-top: .6rem; font-size: .99rem; }

/* --- the people -------------------------------------------------------
 * Square, on the same tint the portraits were composited onto, so the
 * cut-outs have no visible edge. No border: a hairline round a face is
 * what made the old page read as a staff directory.                   */
.vh-people {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.75rem);
}
.vh-person__media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 12%;
  background: var(--tint);
}
.vh-person__name { margin-top: 1.1rem; font-size: 1.35rem; }
.vh-person__role {
  font-family: var(--cond);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .45rem;
}

/* --- ways in ----------------------------------------------------------
 * Contact as a set of labelled routes rather than one address and a
 * hope. Somebody selling to the group and somebody buying from it want
 * different people, and the page should say which.                    */
.vh-routes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 2px solid var(--rule);
}
.vh-route {
  padding: clamp(1.5rem, 2.6vw, 2.25rem) clamp(1rem, 2.5vw, 2.5rem);
  border-bottom: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.vh-route:nth-child(odd) { border-left: 0; padding-left: 0; }
.vh-route__label {
  font-family: var(--cond);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ember);
  display: block;
  margin-bottom: .6rem;
}
.vh-route__name { font-family: var(--serif); font-size: 1.35rem; color: var(--ink); margin: 0; }
.vh-route__note { margin-top: .6rem; font-size: .99rem; max-width: min(46ch, 100%); }
.vh-route__how { margin-top: .9rem; font-family: var(--cond); font-size: 1rem; letter-spacing: .02em; }

/* --- the works --------------------------------------------------------- */
.vh-works { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.vh-works__label {
  font-family: var(--cond);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: .7rem;
}

@media (max-width: 900px) {
  .vh-split { grid-template-columns: minmax(0, 1fr); }
  .vh-stds, .vh-people, .vh-works { grid-template-columns: minmax(0, 1fr); }
  .vh-std { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; }
  .vh-std:first-child { border-top: 0; }
  .vh-routes { grid-template-columns: minmax(0, 1fr); }
  .vh-route { border-left: 0; padding-left: 0; }
  .vh-mark { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
}

/* ==================================================================
 * The catalogue
 *
 * WooCommerce brings its own opinions: a float-and-percentage product
 * grid, a price slot, a cart button, tabs. This site is a showcase
 * rather than a shop, so the money furniture is gone and what remains
 * is dressed to match the rest of the house.
 * ================================================================== */

/* --- breadcrumb strip ------------------------------------------------ */
.vh-crumbstrip {
  background: var(--night);
  padding-block: .9rem;
  font-family: var(--cond);
  font-size: .88rem;
  letter-spacing: .03em;
}
.vh-crumbstrip, .vh-crumbstrip a { color: #B7C7D7; }
.vh-crumbstrip a:hover { color: #fff; }
.vh-crumbstrip .wc-block-breadcrumbs { margin: 0; }
.vh-crumbstrip .woocommerce-breadcrumb { margin: 0; color: #B7C7D7; }

/* --- shop head ------------------------------------------------------- */
.vh-shopbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1.1rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  font-family: var(--cond);
  font-size: .92rem;
  letter-spacing: .04em;
  color: var(--muted);
}
.vh-shopbar p, .vh-shopbar .woocommerce-result-count { margin: 0; }
.vh-shopbar select, .wc-block-catalog-sorting select {
  font-family: var(--cond);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: .55rem 1.9rem .55rem .8rem;
  line-height: 1;
  cursor: pointer;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) center, calc(100% - 10px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* --- the grid --------------------------------------------------------
 * WooCommerce lays products out with floats and percentage widths, and
 * the arithmetic stops adding up the moment a card carries a border or
 * padding: rows break to three with a stranded fourth. A grid does not
 * need the arithmetic to work out.                                    */
.wp-block-woocommerce-product-collection .wp-block-post-template,
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none; }
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
}
.wp-block-woocommerce-product-collection .wp-block-post-template > li,
.woocommerce ul.products li.product { background: none; padding: 0; border: 0; }

/* the photographs come from different shoots at different crops, so one
   ratio on a panel steadies the row */
.wp-block-woocommerce-product-collection .wc-block-components-product-image img,
.woocommerce ul.products li.product img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--panel);
  border: 1px solid var(--rule);
  padding: clamp(.75rem, 1.6vw, 1.25rem);
  transition: border-color .2s var(--ease);
}
.wp-block-woocommerce-product-collection li:hover .wc-block-components-product-image img,
.woocommerce ul.products li.product:hover img { border-color: var(--blue); }

.wp-block-woocommerce-product-collection .wp-block-post-title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--cond) !important;
  font-weight: 700;
  font-size: 1.02rem !important;
  line-height: 1.3;
  letter-spacing: .01em;
  margin: .9rem 0 0 !important;
}
.wp-block-woocommerce-product-collection .wp-block-post-title a,
.woocommerce ul.products li.product .woocommerce-loop-product__title a { color: var(--ink); }
.wp-block-woocommerce-product-collection .wp-block-post-title a:hover { color: var(--blue); }

/* a showcase does not take orders: no price slot, no cart button */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.wc-block-components-product-price,
.wp-block-woocommerce-product-button,
.woocommerce ul.products li.product a.button.add_to_cart_button { display: none !important; }

/* --- pagination ------------------------------------------------------ */
.vh-pagination {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  gap: .35rem;
  font-family: var(--cond);
  font-weight: 700;
  letter-spacing: .06em;
}
.vh-pagination a, .vh-pagination span {
  padding: .5rem .85rem;
  color: var(--ink);
  border: 1px solid transparent;
}
.vh-pagination a:hover { color: var(--blue); border-color: var(--rule); text-decoration: none; }
.vh-pagination .current { color: #fff; background: var(--blue); }

/* --- the product page ------------------------------------------------ */
.vh-product .product {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
}
.vh-product .woocommerce-product-gallery { width: auto !important; float: none !important; margin: 0 !important; }
.vh-product .woocommerce-product-gallery img { background: var(--panel); border: 1px solid var(--rule); }
.vh-product .summary { width: auto !important; float: none !important; margin: 0 !important; }
.vh-product .product > .woocommerce-tabs,
.vh-product .product > .related,
.vh-product .product > .up-sells { grid-column: 1 / -1; }

/* A product name is a name, not a page-opening statement. The display
   size that suits the home page heading turns "Universal Strength
   Machine VUD III" into three lines of nothing. */
.vh-product .product_title {
  font-size: clamp(1.9rem, 3vw, 2.6rem) !important;
  line-height: 1.14;
  margin: 0 0 1.1rem;
}
.vh-product .woocommerce-product-details__short-description { max-width: min(56ch, 100%); }
.vh-product .woocommerce-product-details__short-description p { margin: 0; }
.vh-product .vh-quote { margin-top: 1.6rem; }

.vh-product .product_meta {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-family: var(--cond);
  font-size: .9rem;
  letter-spacing: .03em;
  color: var(--muted);
}
.vh-product .product_meta .posted_in { display: block; }
.vh-product .product_meta a { color: var(--body); }
.vh-product .product_meta a:hover { color: var(--blue); }

/* One tab is not a tab. The description is the page, so it is set as a
   section of it rather than as a control that does nothing. */
.vh-product .woocommerce-tabs { margin-top: clamp(2.5rem, 5vw, 4rem); }
.vh-product .woocommerce-tabs ul.tabs { display: none; }
.vh-product .woocommerce-tabs .panel > h2:first-child { display: none; }
.vh-product .woocommerce-tabs .panel {
  border-top: 2px solid var(--rule);
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
}

/* --- the description prose -------------------------------------------
 * The copy came across from datasheets and carries its own 1.1 and 1.2
 * numbering, so the headings need rhythm rather than size, and the
 * measure has to be capped or a specification paragraph runs the full
 * 1240px.                                                             */
.vh-product .woocommerce-tabs .panel > * { max-width: min(72ch, 100%); }
.vh-product .woocommerce-tabs .panel h2 {
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  margin: 2.4em 0 .6em;
}
.vh-product .woocommerce-tabs .panel h3,
.vh-product .woocommerce-tabs .panel h4 {
  font-family: var(--cond);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 2.2em 0 .7em;
}
.vh-product .woocommerce-tabs .panel > :first-child { margin-top: 0; }
.vh-product .woocommerce-tabs .panel p { margin: 0 0 1.05em; }
.vh-product .woocommerce-tabs .panel ul { margin: 0 0 1.2em; padding-left: 1.15rem; }
.vh-product .woocommerce-tabs .panel li { margin: .3em 0; }

/* the imported datasheets hold their specification as a table */
.vh-product .woocommerce-tabs .panel table {
  width: 100%;
  border-collapse: collapse;
  font-size: .98rem;
  margin: 0 0 1.5em;
}
.vh-product .woocommerce-tabs .panel th,
.vh-product .woocommerce-tabs .panel td {
  text-align: left;
  vertical-align: top;
  padding: .6rem .9rem .6rem 0;
  border-bottom: 1px solid var(--rule);
}
.vh-product .woocommerce-tabs .panel th {
  font-family: var(--cond);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink);
  width: 34%;
}

@media (max-width: 900px) {
  .vh-product .product { grid-template-columns: minmax(0, 1fr); }
}

/* the data commitment sits where the data is asked for */
.vh-note--dark {
  border-left-color: var(--ember-lift);
  color: #DCE6F0;
  margin-top: 1.6rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  max-width: min(58ch, 100%);
}

/* --- flagship equipment grid -----------------------------------------
 * The instruments are set as an even grid of quiet cards, each the whole
 * link. A hairline, the model code in ember, the name in the serif, one
 * line on what it measures. No photographs: the range is varied enough
 * that eleven product shots at card size would read as clutter, and the
 * page is about the property measured, not the object.               */
.vh-eqgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.vh-eq {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  color: inherit;
  transition: background .2s var(--ease);
}
.vh-eq:hover { background: var(--paper); text-decoration: none; }
.vh-eq__code {
  font-family: var(--cond);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ember);
}
.vh-eq__name { font-size: 1.25rem; line-height: 1.25; margin: .55rem 0 0; }
.vh-eq__what { margin: .7rem 0 0; font-size: .99rem; color: var(--body); }
.vh-eq__go {
  margin-top: auto;
  padding-top: 1.25rem;
  font-family: var(--cond);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.vh-eq__go::after {
  content: ""; width: 1.4rem; height: 1px; background: currentColor;
  transition: width .25s var(--ease);
}
.vh-eq:hover .vh-eq__go { color: var(--blue-deep); }
.vh-eq:hover .vh-eq__go::after { width: 2.2rem; }

/* --- the home flagship card ------------------------------------------
 * A single wide card in the companies band that opens the equipment
 * landing, so the group home has one clear door into the range rather
 * than only the catalogue link buried in the Versatile row.          */
.vh-eqcard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  background: var(--night);
  color: #BFD0E0;
}
.vh-eqcard h3 { color: #F2F7FC; font-size: clamp(1.5rem, 2.4vw, 2rem); max-width: 22ch; }
.vh-eqcard p { margin-top: .8rem; max-width: 52ch; }
.vh-eqcard__codes {
  margin-top: 1.1rem;
  font-family: var(--cond);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: #8FA3B8;
}
.vh-eqcard .vh-button { white-space: nowrap; }

@media (max-width: 820px) {
  .vh-eqgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vh-eqcard { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .vh-eqgrid { grid-template-columns: minmax(0, 1fr); }
}

/* --- whole-row link --------------------------------------------------
 * The company rows read as one object, so the whole object should be
 * clickable, not just the small CTA. The primary link stretches an
 * invisible ::after over the entire row (valid HTML - no nested anchors,
 * since each row carries exactly one link). The image lifts a touch and
 * the CTA underline grows, so the hover still reads as a link.        */
.vh-row { cursor: pointer; }
.vh-stretch::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.vh-row__media img { transition: transform .35s var(--ease); }
.vh-row:hover .vh-row__media img { transform: scale(1.015); }
.vh-row:hover .vh-go::after { width: 2.4rem; }

/* marquee cards lead with the name (no model code), so the name sits at
   the top and the accent moves to a top rule that ties the row together */
.vh-eqgrid--marquee .vh-eq { border-top: 2px solid transparent; }
.vh-eqgrid--marquee .vh-eq:hover { border-top-color: var(--ember); }
.vh-eqgrid--marquee .vh-eq__name { margin-top: 0; font-size: clamp(1.3rem, 2vw, 1.6rem); }
.vh-eqgrid--marquee .vh-eq__go { color: var(--blue); }

/* marquee: self-bordered cards on a gap, so a short final row leaves blank
   paper rather than a filled empty cell */
.vh-eqgrid--marquee {
  background: transparent;
  border: 0;
  gap: clamp(1rem, 2vw, 1.5rem);
}
.vh-eqgrid--marquee .vh-eq { border: 1px solid var(--rule); }
.vh-eqgrid--marquee .vh-eq:hover { border-color: var(--blue); background: var(--panel); }

/* --- catalogue categories -------------------------------------------
 * A foundry knows which sand it runs before it knows which instrument it
 * needs, so the sands are the way in. Each entry carries its count, which
 * is why the name and the number are separated rather than run together.
 * Counts overlap between sands on purpose and the copy says so.               */
.vh-cat__head {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: clamp(1.8rem, 3vw, 2.6rem) 0 .9rem;
}
.vh-cat__head:first-of-type { margin-top: 0; }

.vh-cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .5rem;
}
.vh-cat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 1rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  text-decoration: none;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.vh-cat:hover { border-color: var(--blue); background: #fff; }
.vh-cat__name {
  font-family: var(--sans);
  font-size: .95rem;
  color: var(--ink);
}
.vh-cat__n {
  font-family: var(--sans);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.vh-cat:hover .vh-cat__n { color: var(--blue); }