/* -----------------------------------------------------------------------------
   WHY EVERY COLOUR BELOW IS A LITERAL, AND NOT A BRAND TOKEN.
   -----------------------------------------------------------------------------
   `--vh-cream` and `--vh-ink` are NOT colour constants. They are contextual: they
   mean "the foreground" and "the background" of whatever scope they are read in,
   and velaire.css redefines `--vh-cream` ELEVEN times. In light mode both resolve
   to the same value:

       [data-theme="light"]   --vh-cream  ->  #201a1d
                              --vh-ink    ->  #201a1d

   So `background: var(--vh-ink); color: var(--vh-cream)` -- which is how the two
   wine bands were first written -- rendered #201a1d text on a #201a1d ground in
   light mode. 1:1. Qasim found it: the whole "What it handles" band was a dark
   rectangle with gold bullets and no words.

   These two bands are dark in BOTH themes on purpose, so they cannot be built from
   tokens that flip. Literals here; tokens only where theme-following is wanted.

   COLOUR ONLY. The first version of this pass stripped `--vh-font-display` and
   `--vh-font-mono` as well, which was wrong: font tokens do not flip between
   themes. Every kicker, numeral and tag silently fell back to system monospace
   instead of the template's Roboto, and the headings to `inherit`. Qasim spotted
   it: "the fonts we are using the template ones?" They were not. Restored.
   ----------------------------------------------------------------------------- */

/* =============================================================================
   Industry page rhythm — preview only.
   =============================================================================

   Loaded ONLY by /v2-velaire-health-website/preview/industry/[slug]. It is a
   separate file on purpose: `npm run v2:collisions` is a GENERATOR that rewrites
   public/v2/css/velaire.css and has deleted a hand-written block there before, so
   nothing hand-authored should live in that file.

   What this fixes, measured on /solutions/medical-aesthetics at 1440x900 on
   18-Sep-2026:

   - All four narrative images rendered inside ONE band (2.71 screens); the eight
     bands after it had no image at all. Here every argument band carries at most
     one image, and they alternate sides.
   - Those four images were 89% / 59% / 29% / 37% of the viewport wide, starting at
     6% / 5% / 66% / 58% from the left. Nothing shared a column. Here there are TWO
     widths only -- full measure, or one half of the split -- and both snap to the
     same container.
   - Three painted grounds, all between 0.90 and 1.00 luminance, and no dark band
     with real coverage. Here two bands are wine and are never adjacent.
   - The hero h1 sat on an unscrimmed photograph with no text-shadow. Here the
     photograph carries a gradient scrim sized to the text, not a flat wash.
   ============================================================================= */

.vh-ind {
  --vh-ind-gutter: clamp(20px, 5vw, 72px);
  --vh-ind-measure: 1200px;
  --vh-ind-gap: clamp(28px, 4vw, 72px);
}

/* ---- bands -------------------------------------------------------------- */

.vh-ind-band {
  padding-block: clamp(56px, 8vw, 120px);
  /* EXPLICIT, and the fix for the defect Qasim caught on "What we build".
     Without it the band is transparent and inherits the v2 layout's ground, which
     is WINE (rgb(74,31,45)) -- so `--vh-ink` titles landed at 1.24:1 and the ledes
     at 2.16:1 on four bands. A band must own its ground; it must never borrow one. */
  background: #fdf9f8;
  color: #201a1d;
}

.vh-ind-band__inner {
  max-width: var(--vh-ind-measure);
  margin-inline: auto;
  padding-inline: var(--vh-ind-gutter);
}

/* The two dark bands. Never adjacent -- see the band order in industry-page.tsx. */
.vh-ind-band--dark {
  background: #201a1d;
  color: #efe3e4;
}

.vh-ind-band--paper {
  background: #f8f2f1;
}

/* Links on a LIGHT band.
   The v2 theme is dark, so its link colour is cream (rgb(239,227,228)). On these
   light bands that measured 1.2:1 -- the five practice-type links in "Other
   practice types" were effectively invisible. Wine at 11.46:1 on cream instead.
   `.vh-ind-btn` is excluded: both button faces set their own colour. */
.vh-ind-band:not(.vh-ind-band--dark) a:not(.vh-ind-btn) {
  color: #5c2338;
}

.vh-ind-band:not(.vh-ind-band--dark) a:not(.vh-ind-btn):hover {
  color: #3d1725;
}

/* ---- headings ----------------------------------------------------------- */

.vh-ind-kicker {
  font-family: var(--vh-font-mono, ui-monospace, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 0.9rem;
  /* Light ground by default. #7a5c22 measures 5.94:1 on cream and 5.61:1 on paper;
     the brand's own --vh-gold-500 (#b08d4f) was 2.97:1 and 2.80:1 -- it is a gold
     for DARK grounds, and using it on light was the second defect here. */
  color: #7a5c22;
}

/* Same role, opposite ground: 5.52:1 on the wine bands and on the hero scrim. */
.vh-ind-band--dark .vh-ind-kicker,
.vh-ind-hero .vh-ind-kicker {
  color: #c9a668;   /* 5.52:1 on #201a1d */
}

.vh-ind-title {
  font-family: var(--vh-font-display, inherit);
  font-weight: 600;
  font-size: clamp(1.75rem, 3.2vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  text-wrap: balance;
  max-width: 20ch;
}

.vh-ind-band--dark .vh-ind-title { color: #efe3e4; }
.vh-ind-band:not(.vh-ind-band--dark) .vh-ind-title { color: #201a1d; }

.vh-ind-lede {
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  line-height: 1.6;
  max-width: 46ch;
  margin: 0 0 1.5rem;
}

.vh-ind-band--dark .vh-ind-lede { color: #d8c9cb; }   /* 10.1:1 on #201a1d */
/* 7.93:1 on cream, 7.49:1 on paper. */
.vh-ind-band:not(.vh-ind-band--dark) .vh-ind-lede { color: #5a4a51; }

/* ---- the split: ONE grid, two widths, alternating sides ------------------ */

.vh-ind-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--vh-ind-gap);
  align-items: center;
}

/* Flip puts the media first in VISUAL order only. The DOM order stays
   text-then-media on every band, so a screen reader and a keyboard get the same
   sequence down the page regardless of which side the picture is on. */
.vh-ind-split--flip .vh-ind-split__media { order: -1; }

.vh-ind-media {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: color-mix(in srgb, currentColor 8%, transparent);
}

.vh-ind-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Two aspect ratios only, tied to the role rather than to the file. */
.vh-ind-media--landscape { aspect-ratio: 16 / 10; }
.vh-ind-media--portrait  { aspect-ratio: 3 / 4; }

/* ---- hero --------------------------------------------------------------- */

.vh-ind-hero {
  position: relative;
  min-height: min(62vh, 560px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.vh-ind-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A gradient sized to the text, not a flat wash over the whole photograph: the
   picture stays legible at the top while the words get a real ground. The old
   hero had no scrim and no text-shadow at all, which is why an 88px near-white
   h1 dissolved into the two women behind it. */
.vh-ind-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(28, 11, 17, 0.92) 0%,
    rgba(28, 11, 17, 0.78) 28%,
    rgba(28, 11, 17, 0.38) 55%,
    rgba(28, 11, 17, 0.12) 100%
  );
}

.vh-ind-hero__inner {
  position: relative;
  max-width: var(--vh-ind-measure);
  margin-inline: auto;
  padding: var(--vh-ind-gutter);
  padding-block-end: clamp(40px, 6vw, 72px);
  width: 100%;
}

.vh-ind-hero__title {
  font-family: var(--vh-font-display, inherit);
  font-weight: 600;
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 0.6rem;
  max-width: 18ch;
  text-wrap: balance;
}

.vh-ind-hero__sub {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  max-width: 44ch;
}

/* ---- lists -------------------------------------------------------------- */

.vh-ind-points {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 2.4vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vh-ind-point { margin: 0; }

.vh-ind-point__t {
  font-weight: 600;
  font-size: 1.02rem;
  margin: 0 0 0.35rem;
}

.vh-ind-point__b {
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
  opacity: 0.82;
}

.vh-ind-rule {
  border: 0;
  border-top: 1px solid rgba(32, 26, 29, 0.12);
  margin: 0;
}

.vh-ind-band--dark .vh-ind-rule { border-top-color: rgba(255, 255, 255, 0.16); }

.vh-ind-calls {
  columns: 2;
  column-gap: var(--vh-ind-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vh-ind-calls li {
  break-inside: avoid;
  padding: 0.62rem 0 0.62rem 1.5rem;
  position: relative;
  font-size: 0.98rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.vh-ind-calls li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c9a668;
}

/* ---- phone ---------------------------------------------------------------
   One column, and the media goes BELOW its text on every band. `order` is reset
   so a flipped band does not put a picture above the heading it belongs to. */

@media (max-width: 860px) {
  .vh-ind-split { grid-template-columns: 1fr; }
  .vh-ind-split--flip .vh-ind-split__media { order: 0; }
  .vh-ind-points { grid-template-columns: 1fr; }
  .vh-ind-calls { columns: 1; }
  .vh-ind-media--portrait { aspect-ratio: 4 / 3; }
  .vh-ind-hero { min-height: 58vh; }
}

/* =============================================================================
   Cards, steps, tiers and buttons.
   =============================================================================
   Ported from the Cart Gaze industry rhythm (`ir-*` in that repo's cartgaze.css,
   PR #80) and retuned to Velaire's palette. The STRUCTURE is borrowed because it
   was measured and it works; the colour is not, because Cart Gaze is the agency
   brand and Velaire is a separate product brand. Forest green in, wine and gold
   out. Nothing here imports a Cart Gaze token.
   ============================================================================= */

/* ---- buttons: light face, near-black text ------------------------------- */
/* The look Qasim picked out. The double shadow is what stops a white button on a
   light ground reading as a flat rectangle: a soft drop below, and a hard inset
   line along the top edge that reads as a lit bevel. */

.vh-ind-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.97rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.vh-ind-btn--light {
  background: #fff;
  color: #1c0b11;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.14), 0 -3px 0 rgba(0, 0, 0, 0.10) inset;
}

.vh-ind-btn--light:hover { background: #f3e8ea; transform: translateY(-1px); }

.vh-ind-btn--ghost {
  background: transparent;
  border-color: currentColor;
  color: inherit;
  opacity: 0.86;
}

.vh-ind-btn--ghost:hover { opacity: 1; }

.vh-ind-cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

/* ---- the card ------------------------------------------------------------ */

.vh-ind-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 2.2vw, 26px);
  margin-top: 2.5rem;
}

.vh-ind-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--vh-hairline, rgba(42, 17, 25, 0.10));
  border-radius: 18px;
  padding: 30px 30px 0;
  display: flex;
  flex-direction: column;
}

/* The watermark. Large, almost invisible, bleeding off the right edge -- it gives
   the card depth without adding a second thing to read. */
.vh-ind-card__ghost {
  position: absolute;
  right: -44px;
  top: 34px;
  color: #2a1119;
  opacity: 0.045;
  pointer-events: none;
}

.vh-ind-card > *:not(.vh-ind-card__ghost) { position: relative; }

.vh-ind-card__top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.vh-ind-card__icon {
  flex: 0 0 auto;
  color: #8a6a2c;
  background: rgba(176, 141, 79, 0.09);
  border: 1px solid rgba(176, 141, 79, 0.22);
  border-radius: 13px;
  padding: 11px;
  box-sizing: content-box;
}

.vh-ind-card__num {
  font-family: var(--vh-font-mono, ui-monospace, monospace);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #7a6b6f;
  margin-left: auto;
}

.vh-ind-card h3 {
  font-family: var(--vh-font-display, inherit);
  font-size: 1.22rem;
  font-weight: 600;
  line-height: 1.3;
  color: #2a1119;
  margin: 0 0 0.6rem;
}

.vh-ind-card__body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #57504a;
  margin: 0 0 1.1rem;
}

.vh-ind-spec { list-style: none; margin: 0 0 1.4rem; padding: 0; }

.vh-ind-spec li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #2a1119;
  margin-bottom: 0.5rem;
}

.vh-ind-spec li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  border: 1.5px solid #b08d4f;
}

.vh-ind-card__fill { flex: 1 1 auto; }

/* The foot bleeds to the card edge, which is what makes it read as a footer
   rather than another paragraph. */
.vh-ind-card__foot {
  margin: 0 -30px;
  padding: 14px 30px;
  border-top: 1px solid var(--vh-hairline, rgba(42, 17, 25, 0.10));
  background: #faf6f5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* The service behind the card's claim, at the right end of the tag row. Same
   mono setting and the same gold as the neighbour cards' "See how it works",
   so the two kinds of link read as one system. #7a5c22 is 5.9:1 on the cream
   foot and 5.2:1 on the tinted one the light theme paints. Added 25-Sep when
   the rhythm was promoted onto /solutions: the old layout's service link-cards
   went with it, and a practice-type page with no way into /services is a leaf. */
.vh-ind-card__link {
  margin-left: auto;
  font-family: var(--vh-font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7a5c22;
  text-decoration: none;
  white-space: nowrap;
}
.vh-ind-card__link:hover,
.vh-ind-card__link:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

.vh-ind-tag {
  font-family: var(--vh-font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7a6b6f;
  background: #fff;
  border: 1px solid var(--vh-hairline, rgba(42, 17, 25, 0.10));
  border-radius: 6px;
  padding: 4px 9px;
}

/* ---- numbered step rail -------------------------------------------------- */

.vh-ind-steps { display: grid; gap: 1.5rem; margin-top: 2.25rem; }

.vh-ind-step { display: flex; gap: 1.1rem; align-items: flex-start; }

.vh-ind-step__n {
  flex: 0 0 44px;
  height: 44px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--vh-hairline, rgba(42, 17, 25, 0.12));
  display: grid;
  place-items: center;
  font-family: var(--vh-font-mono, ui-monospace, monospace);
  font-size: 13px;
  font-weight: 600;
  color: #8a6a2c;
}

.vh-ind-step b { display: block; font-size: 1.05rem; font-weight: 600; margin-bottom: 0.2rem; }
.vh-ind-step span { font-size: 0.95rem; line-height: 1.55; color: #57504a; }

/* ---- pricing tiers ------------------------------------------------------- */

.vh-ind-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
  margin-top: 2.5rem;
}

.vh-ind-tier {
  position: relative;
  background: #fff;
  border: 1px solid var(--vh-hairline, rgba(42, 17, 25, 0.10));
  border-radius: 18px;
  padding: 30px 28px 32px;
}

.vh-ind-tier--lead { border-color: #b08d4f; }

.vh-ind-tier__badge {
  position: absolute;
  top: -11px;
  left: 28px;
  font-family: var(--vh-font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: #b08d4f;
  color: #1c0b11;
  border-radius: 6px;
  padding: 4px 10px;
}

.vh-ind-tier__name { font-weight: 600; font-size: 1.05rem; color: #2a1119; }
.vh-ind-tier__price {
  font-family: var(--vh-font-display, inherit);
  font-size: 2.1rem;
  font-weight: 600;
  color: #2a1119;
  margin: 0.35rem 0 0.1rem;
}
.vh-ind-tier__period { font-size: 0.86rem; color: #7a6b6f; }
.vh-ind-tier__blurb {
  font-size: 0.93rem;
  line-height: 1.55;
  color: #57504a;
  margin: 0.9rem 0 1.1rem;
}
.vh-ind-tier__note {
  margin-top: 1.5rem;
  font-size: 0.86rem;
  opacity: 0.72;
}

@media (max-width: 860px) {
  .vh-ind-cards { grid-template-columns: 1fr; }
  .vh-ind-tiers { grid-template-columns: 1fr; }
  .vh-ind-card { padding: 26px 22px 0; }
  .vh-ind-card__foot { margin: 0 -22px; padding: 13px 22px; }
}

/* ---- neighbours: cards, not bare links ----------------------------------
   Qasim, 19-Sep: the text "does not look good". It was five links in a three
   column grid with no card around them, so each one wrapped to a different
   height, the baselines never lined up, and the two-item second row left a
   ragged hole. Same card language as "What we build", one row of three. */

/* Three columns assumes three or six cards: three neighbours on a detail page,
   three live services on /services, six practice types on /solutions. A fourth
   live service leaves one card alone on a second row -- give /services its own
   column count then, not this shared rule. */
.vh-ind-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
}

.vh-ind-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid rgba(32, 26, 29, 0.10);
  border-radius: 14px;
  padding: 22px 22px 20px;
  text-decoration: none;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.vh-ind-link:hover { border-color: #b08d4f; transform: translateY(-2px); }

.vh-ind-link__name {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.35;
  color: #5c2338;            /* 11.46:1 on the card */
  margin: 0 0 0.4rem;
  /* The names are long and two of them wrap. Reserving two lines keeps every
     card's body starting on the same baseline whether it wraps or not. */
  min-height: 2.7em;
}

.vh-ind-link__blurb {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #5a4a51;            /* 7.9:1 */
  margin: 0;
}

.vh-ind-link__go {
  margin-top: auto;
  padding-top: 0.9rem;
  font-family: var(--vh-font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7a5c22;            /* 5.9:1 */
}

@media (max-width: 860px) {
  .vh-ind-links { grid-template-columns: 1fr; }
  .vh-ind-link__name { min-height: 0; }
}

/* =============================================================================
   TYPOGRAPHY AND CRAFT PASS — 19-Sep-2026
   =============================================================================
   Qasim: "typography" and "too plain / not enough craft". Both are the same
   underlying fault — the first pass set sizes that were merely DIFFERENT rather
   than a scale, so every level sat within about 1.2x of its neighbour and the page
   read as one long undifferentiated voice. Craft is not ornament here; it is
   making the hierarchy unmistakable and then holding every edge to a grid.
   ============================================================================= */

/* ---- 1. A real scale ------------------------------------------------------
   Was: kicker .72 / title 1.75-2.9 / lede 1-1.18 / body .95 -- four sizes inside
   one octave. Now the display carries the page and the body gets out of its way. */

.vh-ind-title {
  font-size: clamp(2.05rem, 4vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.028em;
  max-width: 15ch;            /* two lines for almost every heading on this page */
  margin: 0 0 1.15rem;
}

/* The lede is a LEAD-IN, not body copy: larger, lighter, looser, and on its own
   measure. This is the single biggest readability change in the pass. */
.vh-ind-lede {
  font-size: clamp(1.12rem, 1.5vw, 1.34rem);
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: -0.006em;
  max-width: 40ch;
  margin: 0 0 1.9rem;
}

/* ---- 2. The kicker becomes an index -------------------------------------
   `01 —— THE PROBLEM`. An editorial device, and the cheapest way to make a page
   read as designed: the reader always knows which part of nine they are in. */

.vh-ind-kicker {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  margin: 0 0 1.4rem;
  font-variant-numeric: tabular-nums;
}

.vh-ind-kicker__n { opacity: 0.75; font-weight: 600; }

.vh-ind-kicker__rule {
  width: 34px;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
  flex: 0 0 auto;
}

/* ---- 3. An asymmetric split ---------------------------------------------
   1fr 1fr is the default of a page nobody art-directed. 7/5 gives the text a
   proper measure and stops the picture competing with the heading for weight. */

.vh-ind-split { grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 88px); }
.vh-ind-split--flip { grid-template-columns: 5fr 7fr; }

/* ---- 4. Hairlines ---------------------------------------------------------
   The pain points were four blocks floating in a grid. A rule above each one
   makes them a set, and gives the eye a horizontal to rest on. */

.vh-ind-points { gap: 0; }

.vh-ind-point {
  padding: 1.15rem 0 1.25rem;
  border-top: 1px solid rgba(32, 26, 29, 0.13);
}

.vh-ind-band--dark .vh-ind-point { border-top-color: rgba(255, 255, 255, 0.16); }

.vh-ind-points > .vh-ind-point:nth-child(-n + 2) { padding-top: 0; border-top: 0; }

.vh-ind-point__t { font-size: 1.05rem; letter-spacing: -0.008em; margin-bottom: 0.4rem; }
.vh-ind-point__b { font-size: 0.97rem; line-height: 1.6; opacity: 1; color: #5a4a51; }
.vh-ind-band--dark .vh-ind-point__b { color: #c3b3b7; }

/* On the two-column points grid the rule should span its own column only, so the
   gap between columns needs restoring separately from the row rhythm. */
.vh-ind-points { column-gap: clamp(28px, 3.5vw, 56px); }

/* ---- 5. Card depth --------------------------------------------------------
   A 1px border on white is a wireframe. A soft drop plus a one-pixel top
   highlight reads as a physical card without any visible ornament. */

.vh-ind-card {
  border-color: rgba(32, 26, 29, 0.09);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 1px 2px rgba(42, 17, 25, 0.04),
    0 8px 22px -12px rgba(42, 17, 25, 0.16);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.vh-ind-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 2px 4px rgba(42, 17, 25, 0.05),
    0 16px 34px -16px rgba(42, 17, 25, 0.22);
}

.vh-ind-card h3 {
  font-size: 1.26rem;
  line-height: 1.26;
  letter-spacing: -0.014em;
  max-width: 18ch;
}

/* ---- 6. Images sit IN the page, not on it --------------------------------
   An inset hairline stops a photograph floating as a pasted rectangle. */

.vh-ind-media {
  position: relative;
  border-radius: 16px;
  box-shadow: 0 18px 44px -26px rgba(42, 17, 25, 0.45);
}

.vh-ind-media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(42, 17, 25, 0.10) inset;
  pointer-events: none;
}

.vh-ind-band--dark .vh-ind-media::after { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset; }

/* ---- 7. Hero type --------------------------------------------------------- */

.vh-ind-hero__title {
  font-size: clamp(2.4rem, 5.4vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.032em;
  max-width: 15ch;
  margin-bottom: 0.8rem;
}

.vh-ind-hero__sub {
  font-size: clamp(1.1rem, 1.6vw, 1.32rem);
  line-height: 1.5;
  max-width: 38ch;
}

.vh-ind-hero { min-height: min(68vh, 620px); }

/* ---- 8. The call list ----------------------------------------------------- */

.vh-ind-calls li {
  font-size: 1rem;
  line-height: 1.45;
  padding: 0.78rem 0 0.78rem 1.6rem;
}

/* ---- 9. Steps ------------------------------------------------------------- */

.vh-ind-steps { gap: 0; }

.vh-ind-step {
  padding: 1.4rem 0;
  border-top: 1px solid rgba(32, 26, 29, 0.13);
  align-items: center;
}

.vh-ind-step:first-child { border-top: 0; padding-top: 0.6rem; }
.vh-ind-step b { font-size: 1.12rem; letter-spacing: -0.01em; margin-bottom: 0.25rem; }
.vh-ind-step span { font-size: 0.98rem; }

@media (max-width: 860px) {
  .vh-ind-split, .vh-ind-split--flip { grid-template-columns: 1fr; }
  .vh-ind-title { max-width: none; }
  .vh-ind-points > .vh-ind-point:nth-child(-n + 2) { padding-top: 1.15rem; border-top: 1px solid rgba(32, 26, 29, 0.13); }
  .vh-ind-points > .vh-ind-point:first-child { padding-top: 0; border-top: 0; }
}

/* =============================================================================
   NOT PARAGRAPHS — CARDS
   =============================================================================
   Qasim, 19-Sep: text should not read as paragraphs, it should sit in cards the
   way the template already does. Two blocks were still prose in a grid: the pain
   points and the call-type list. The hairline treatment above was a half-measure
   — it grouped them but still left four paragraphs floating on the ground.
   ============================================================================= */

/* ---- pain points become cards ------------------------------------------- */

.vh-ind-points {
  gap: clamp(14px, 1.6vw, 18px);
  column-gap: clamp(14px, 1.6vw, 18px);
}

.vh-ind-point {
  background: #fff;
  border: 1px solid rgba(32, 26, 29, 0.09);
  border-radius: 14px;
  padding: 20px 20px 22px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 6px 18px -14px rgba(42, 17, 25, 0.22);
}

/* The hairline rules from the pass above are now the card's own border. */
.vh-ind-points > .vh-ind-point,
.vh-ind-points > .vh-ind-point:nth-child(-n + 2) {
  border-top: 1px solid rgba(32, 26, 29, 0.09);
  padding-top: 20px;
}

/* On wine, the card inverts rather than disappearing. */
.vh-ind-band--dark .vh-ind-point,
.vh-ind-band--dark .vh-ind-points > .vh-ind-point {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.14);
  border-top-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}

.vh-ind-point__t { color: #201a1d; }
.vh-ind-band--dark .vh-ind-point__t { color: #efe3e4; }

/* ---- call types become tiles, not bullets -------------------------------- */

.vh-ind-calls {
  columns: auto;
  column-count: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.vh-ind-calls li {
  border-bottom: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 11px;
  padding: 0.85rem 0.95rem 0.85rem 2.1rem;
  font-size: 0.97rem;
  line-height: 1.4;
}

.vh-ind-calls li::before {
  left: 0.95rem;
  top: 1.22rem;
  width: 6px;
  height: 6px;
}

/* ---- the response band needs something other than one paragraph ---------- */

.vh-ind-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 1.9rem;
  padding: 0;
  list-style: none;
}

.vh-ind-fact {
  background: #fff;
  border: 1px solid rgba(32, 26, 29, 0.09);
  border-radius: 12px;
  padding: 16px 16px 18px;
}

.vh-ind-fact__n {
  display: block;
  font-family: var(--vh-font-mono, ui-monospace, monospace);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #7a5c22;
  margin-bottom: 0.25rem;
  font-variant-numeric: tabular-nums;
}

.vh-ind-fact__l {
  font-size: 0.86rem;
  line-height: 1.4;
  color: #5a4a51;
}

@media (max-width: 860px) {
  .vh-ind-calls { grid-template-columns: 1fr; }
  .vh-ind-facts { grid-template-columns: 1fr; }
}

/* =============================================================================
   SIZE — deliberately above the template
   =============================================================================
   Qasim, 19-Sep: "why texts so small still". Measured on the LIVE page: the
   template's own body is 14px (`.text-body-3`, and `main p`), with `.text-body-1`
   at 18px/600. So the smallness is Aigocy's, inherited, not something this
   preview introduced -- the first pass was already at 15-16px and still read small.

   14px is small for a marketing page a practice owner reads once, on a laptop, to
   decide whether to book a call. Everything below is set ABOVE the template on
   purpose. The display sizes were already right (hero 67px, section title 56px);
   this is entirely about the card interiors, which are the densest part of the
   page and were carrying the smallest type on it.
   ============================================================================= */

.vh-ind-card h3          { font-size: 1.4rem; line-height: 1.24; }     /* 20 -> 22.4 */
.vh-ind-card__body       { font-size: 1.06rem; line-height: 1.62; }    /* 15 -> 17 */
.vh-ind-spec li          { font-size: 1.02rem; line-height: 1.55; margin-bottom: 0.62rem; }  /* 15 -> 16.3 */
.vh-ind-point__t         { font-size: 1.18rem; font-weight: 600; line-height: 1.35; }        /* 17/450 -> 19/600 */
.vh-ind-point__b         { font-size: 1.06rem; line-height: 1.62; }    /* 16 -> 17 */
.vh-ind-calls li         { font-size: 1.06rem; line-height: 1.5; }     /* 16 -> 17 */
.vh-ind-step b           { font-size: 1.2rem; }                        /* 19 -> 19.2, held */
.vh-ind-step span        { font-size: 1.06rem; line-height: 1.6; }
.vh-ind-link__name       { font-size: 1.12rem; }
.vh-ind-link__blurb      { font-size: 1.02rem; line-height: 1.55; }
.vh-ind-fact__l          { font-size: 0.98rem; line-height: 1.45; }
.vh-ind-fact__n          { font-size: 1.85rem; }

/* 11px tracked at .18em is legible but mean. 12px carries the tracking better. */
.vh-ind-kicker           { font-size: 0.76rem; }
.vh-ind-tag              { font-size: 11.5px; }
.vh-ind-card__num        { font-size: 12.5px; }

/* The lede and hero sub were already at 21px and stay there -- the complaint was
   never about them. */

/* ---- two overrides, both fighting a template rule ------------------------ */

/* The point title asked for 600 and computed 450: the template sets weight on a
   more specific selector, so the class alone loses. Doubling the class wins
   without !important and without reaching outside this preview. */
.vh-ind-point .vh-ind-point__t.vh-ind-point__t {
  font-weight: 600;
}


/* =============================================================================
   ART-DIRECTED TYPE PASS — 19-Sep-2026. SUPERSEDES THE BLOCK ABOVE.
   =============================================================================
   The pass above set structure and then asked one type size to carry eight bands.
   Measured on the built page before this block existed:

     band titles     56px / 600 / 505px wide, x8 -- 7 of them wrapping to 3 lines
     weights in use  400, 450, 600
     weights LOADED  100-900, continuous
     body sizes      16.32 / 16.96 / 17px -- three sizes inside 4%
     scale gap       nothing at all between 29.6px and 56px

   That is the whole of what Qasim named as "typography" and "too plain". The page
   is not under-decorated; it is flat. One heading size repeated eight times gives
   a reader nothing to rank, three weights out of a nine-weight axis leaves most of
   the face unused, and three body sizes within 4% of each other are not a
   hierarchy -- they are an inconsistency the eye reads as carelessness.

   WHAT THIS PASS MAY NOT DO. Qasim ruled out length, copy and images, and the
   faces are locked by his 09-Sep instruction: "throughout the website the font
   should be followed by the fonts in template." So no serif, no third family, no
   new sections. Everything below is size, weight, measure, position and ground on
   Urbanist and Roboto -- the two faces already loaded.

   That constraint is the brief, and it is also the better answer: Urbanist is
   loaded as a VARIABLE face across 100-900 (see layout.tsx, fixed 10-Sep), so the
   whole axis is already paid for. Using it is free and nothing else on this site
   does.
   ============================================================================= */

/* ---- 1. THE FOLIO ---------------------------------------------------------
   The band number, promoted out of the kicker line and set large, light and
   recessive in the half of the band the text does not use. Every band was
   carrying ~695px of dead width beside a 505px heading; this is what goes there.

   It alternates sides with the pictures, so scrolling the page has a rhythm
   rather than a margin. `aria-hidden`, because it is wayfinding for the eye and
   "05" announced before every heading is noise.

   The alpha is deliberately low. Above about 0.2 it stops being a ground and
   starts competing with the heading, which is the failure mode of this device. */

.vh-ind-band__inner { position: relative; }

.vh-ind-folio {
  position: absolute;
  /* IN THE BAND'S TOP PADDING, not at the top of the content.
     At the content edge it collided: band 4 is a split whose portrait image is
     tall enough to reach the band top, and the folio (110px wide, right-aligned
     at the padding edge) had its left third behind the photograph. Seven bands
     were clean and one looked broken, which is worse than not having the device.
     -0.92em lifts it clear of every band's first element -- the box is 0.78em
     tall, so it ends just above the content -- and the offset is in `em` so it
     tracks the clamp rather than needing a breakpoint. */
  top: -0.92em;
  font-size: clamp(4rem, 7.5vw, 7.5rem);
  font-weight: 200;
  line-height: 0.78;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: rgba(92, 35, 56, 0.13);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.vh-ind-folio--right { right: 0; }
.vh-ind-folio--left  { left: 0; }

.vh-ind-band--dark .vh-ind-folio { color: rgba(201, 166, 104, 0.15); }

/* The folio sits UNDER the words in the rare case they meet. */
.vh-ind-kicker,
.vh-ind-title,
.vh-ind-lede {
  position: relative;
  z-index: 1;
}

/* ---- 2. THREE RANKS -------------------------------------------------------
   Rank follows the argument AND the column, and the column is the harder of the
   two: a split band holds its heading in a 7fr column about 600px wide, so the
   large rank would break to five lines there. Only the full-measure bands can
   carry it. See the comment on Head in industry-page.tsx for the assignment.

   Size and weight move TOGETHER. Rank c is smaller and lighter, so it steps down
   twice and reads as support rather than as a quieter shout. */

.vh-ind-title--a {
  font-size: clamp(2.6rem, 5vw, 4.5rem);
  font-weight: 620;
  letter-spacing: -0.034em;
  line-height: 1.0;
  max-width: 18ch;
}

.vh-ind-title--b {
  font-size: clamp(2.05rem, 3.7vw, 3.3rem);
  font-weight: 620;
  letter-spacing: -0.026em;
  line-height: 1.04;
  max-width: 15ch;
}

.vh-ind-title--c {
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  font-weight: 540;
  letter-spacing: -0.014em;
  line-height: 1.1;
  max-width: 24ch;
}

/* ---- 3. THE LIGHT END OF THE AXIS ----------------------------------------
   The lede was 400 against a 600 title -- a 200 step, which at 21px is barely a
   step at all. 360 against 620 is a real one, and it costs nothing: the weight is
   already in the file.

   On the dark bands it goes back up. Light type on a dark ground optically thins,
   so the same nominal weight reads lighter there than it does on cream. */

.vh-ind-lede { font-weight: 360; }
.vh-ind-band--dark .vh-ind-lede { font-weight: 400; letter-spacing: 0.002em; }

/* ---- 4. TWO BODY SIZES, NOT THREE ----------------------------------------
   16.32 / 16.96 / 17 were doing three different jobs at sizes nobody can tell
   apart. Now one reading size, and the spec list separates by WEIGHT instead --
   which is the distinction that actually survives being looked at. */

.vh-ind-card__body,
.vh-ind-point__b,
.vh-ind-calls li,
.vh-ind-step span,
.vh-ind-link__blurb { font-size: 1.0625rem; }

.vh-ind-spec li { font-size: 1rem; font-weight: 500; }

/* ---- 5. THE STATISTICS, SET AS STATISTICS --------------------------------
   24/7, < 48h and 0 are the most quotable things on this page and were the
   quietest: 1.85rem inside three identical white boxes, which is the stat-card
   pattern every SaaS page ships.

   The boxes are gone. A hairline above each figure makes them a set without
   drawing three containers, and the figure takes the light end of the axis at
   nearly twice the size. Tabular figures so the three columns align. */

.vh-ind-fact {
  background: none;
  border: 0;
  border-top: 1px solid rgba(32, 26, 29, 0.16);
  border-radius: 0;
  padding: 0.85rem 0 0;
}

.vh-ind-band--dark .vh-ind-fact { border-top-color: rgba(239, 227, 228, 0.22); }

.vh-ind-fact__n {
  font-family: inherit;
  font-size: clamp(2rem, 3vw, 2.7rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #2a1119;
  margin-bottom: 0.35rem;
}

.vh-ind-band--dark .vh-ind-fact__n { color: #efe3e4; font-weight: 340; }

.vh-ind-fact__l { font-size: 0.94rem; line-height: 1.45; color: #5a4a51; }
.vh-ind-band--dark .vh-ind-fact__l { color: #d8c9cb; }

/* ---- 6. THE KICKER, WITHOUT ITS NUMBER -----------------------------------
   The number left for the margin, so the rule leads the line now. Shorter, since
   it no longer has to separate two things. */

.vh-ind-kicker__rule { width: 26px; }

/* ---- 7. BELOW 860 --------------------------------------------------------
   The folio exists to fill a void that only exists on a wide screen. On a phone
   the column is the whole width, there is no margin to hang it in, and a 7.5rem
   numeral behind a heading is just noise. It goes away entirely. */

@media (max-width: 860px) {
  .vh-ind-folio { display: none; }
  .vh-ind-title--a { max-width: none; }
  .vh-ind-title--b { max-width: none; }
  .vh-ind-title--c { max-width: none; }
}

/* =============================================================================
   THE PAIN-POINT SET — 20-Sep-2026. Density, icons, surface.
   =============================================================================
   Qasim sent a reference feature grid beside a shot of this band. Measured, the
   difference was never typography:

                        reference          band 1 before
     items across       3, full width      2, in a 508px half-column
     item width         ~27% of measure    246px (24% -- the same!)
     row gap            ~11% of measure    16px
     icons              one per item       NONE
     body measure       ~38ch              24ch
     surface            none               white + 1px hairline

   So the item WIDTH was already right and the type was already right. What was
   missing was air, icons, and a surface that is not a bootstrap card. The set
   also moves out of the Split -- see industry-page.tsx -- because the air cannot
   come from a column the picture is using.
   ============================================================================= */

.vh-ind-points {
  /* THREE across, explicitly -- not auto-fit.
     auto-fit gave the four-item vertical FOUR columns at 225px each, which is
     narrower than the 246px half-column this set was moved out of: the fix made
     the measure worse. The reference runs its items at roughly 320px, which is
     what three columns of this measure gives. The one vertical with four pain
     points (aesthetics; the other five have three) takes a roomy 2x2 instead,
     with the body capped below so a 490px card does not produce 60ch lines. */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(24px, 3vw, 48px);
  row-gap: clamp(40px, 5vw, 72px);
  margin: clamp(48px, 6vw, 92px) 0 0;
  padding: 0;
  list-style: none;
}

/* ---- the surface -----------------------------------------------------------
   White plus a 1px hairline is the card every framework ships. The two
   references both do the same thing instead: a ground TINTED AWAY from the page,
   no border at all, a large radius, and an inset pillow rather than a drop
   shadow. cartgaze.com runs #eef2ec cards on an #f8fafc page at 40px radius.
   These are the same recipe in Velaire's cream and wine. */

.vh-ind-point {
  background: #f7f0ef;
  border: 0;
  border-radius: 22px;
  padding: 28px 26px 30px;
  box-shadow:
    0 3px 0 0 rgba(255, 255, 255, 0.75) inset,
    0 -6px 0 0 rgba(42, 17, 25, 0.045) inset;
}

/* The earlier pass gave the first row no top rule because the hairline treatment
   needed it. There is no hairline now, so every item is identical. */
.vh-ind-points > .vh-ind-point,
.vh-ind-points > .vh-ind-point:nth-child(-n + 2),
.vh-ind-points > .vh-ind-point:first-child {
  border-top: 0;
  padding-top: 28px;
}

.vh-ind-band--dark .vh-ind-point,
.vh-ind-band--dark .vh-ind-points > .vh-ind-point {
  background: rgba(255, 255, 255, 0.05);
  border: 0;
  box-shadow: 0 3px 0 0 rgba(255, 255, 255, 0.06) inset;
}

/* ---- the icon --------------------------------------------------------------
   A ring, not a filled chip: band 3's chips are the loud version of this and
   Qasim asked for that band to stay as it is, so these read as its quieter
   relative rather than competing with it.

   One gold, #7a5c22 — the value the light-ground kicker already uses. The page
   was carrying three near-identical golds and this set deliberately does not add
   a fourth. */

.vh-ind-point__i {
  display: grid;
  place-items: center;
  /* PROPORTION, measured off the references rather than guessed: both run the
     icon at roughly a quarter of the card's width. 54px in a 506px card was 11%,
     which read as a small badge instead of the first thing you see.

     FILLED, not a ring — the second reference fills its circle and it is visibly
     more confident. The fill is a 10% wash of the ONE gold rather than the solid
     accent: solid gold circles would have added ~20 more saturated-accent
     elements to a page already carrying three golds across 53 uses. Same shape
     and the same authority, without making the palette problem worse. */
  width: 66px;
  height: 66px;
  margin-bottom: 1.5rem;
  border: 0;
  border-radius: 50%;
  /* A WINE disc with a gold glyph, not a gold disc.
     A 14% gold wash read as a beige circle -- the reference's authority comes
     from contrast, and a pale tint has none. Saturated gold discs would have
     been the obvious fix and the wrong one: four per band, six bands, on a page
     already carrying three golds across 53 uses. Wine is the brand's primary and
     costs the accent budget nothing, so the gold stays only in the glyph.
     #e8c98d on #3a1722 is 8.4:1 -- decorative here, but it means the glyph is
     legible rather than merely present. */
  background: #3a1722;
  color: #e8c98d;
}

.vh-ind-point__i svg { width: 28px; height: 28px; }

.vh-ind-band--dark .vh-ind-point__i { background: rgba(255, 255, 255, 0.09); }

.vh-ind-band--dark .vh-ind-point__i {
  border-color: rgba(201, 166, 104, 0.42);
  color: #c9a668;
}

/* ---- the words -------------------------------------------------------------
   The measure went from 24ch to whatever the full-width column gives, which at
   1440 is about 34ch — close to the reference's 38 and far from four paragraphs
   stacked in a quarter of the page. */

.vh-ind-point__t {
  font-size: 1.22rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
  margin: 0 0 0.6rem;
}

/* Four across for the one vertical with four pain points -- the same 4-up the
   reference uses. This was a 2x2 while the titles were still full sentences; a
   two-word label fits 240px comfortably and 240/1056 is 23% of the measure,
   which is the reference's own card proportion. */
.vh-ind-points:has(> :nth-child(4)) { grid-template-columns: repeat(4, 1fr); }

.vh-ind-point__b {
  font-size: 1.0625rem;
  line-height: 1.62;
  margin: 0;
  max-width: 34ch;
}

@media (max-width: 900px) {
  .vh-ind-points,
  .vh-ind-points:has(> :nth-child(4)) { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .vh-ind-points { row-gap: 28px; margin-top: 36px; }
  .vh-ind-point { padding: 24px 22px 26px; }
  .vh-ind-point__b { max-width: none; }
}

/* ---- NO MORE SHAPE HACKS ---------------------------------------------------
   Qasim, 20-Sep: "the view should be properly with such icons etc rather than
   tick marks or low unprofessional feeels."

   Two markers on this page were CSS pseudo-elements pretending to be icons: an
   8px square with a 1.5px border on the spec lists, and a 7px filled circle on
   the call tiles. Both are drawn icons now, from the same library and at a stroke
   weight that matches the rings above, so the page has ONE icon system instead of
   an icon system plus two shapes.

   The rings are reserved for the two SETS (pain points, call types). A ring on
   every spec line would be twelve rings inside band 3, which is the band Qasim
   asked to leave alone. */

.vh-ind-spec li::before,
.vh-ind-calls li::before { content: none; }

.vh-ind-spec li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 0.6rem;
  align-items: start;
  padding-left: 0;
}

.vh-ind-spec__i {
  width: 15px;
  height: 15px;
  margin-top: 0.34em;
  color: #7a5c22;
}

.vh-ind-band--dark .vh-ind-spec__i { color: #c9a668; }

/* The call types take the full measure now, same as the pain points. */
.vh-ind-calls {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(24px, 3vw, 48px);
  row-gap: clamp(20px, 2.4vw, 32px);
  margin: clamp(48px, 6vw, 92px) 0 0;
  padding: 0;
  list-style: none;
}

.vh-ind-calls li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 1rem;
  align-items: start;
  background: rgba(255, 255, 255, 0.05);
  border: 0;
  border-radius: 18px;
  padding: 22px 24px 24px;
}

.vh-ind-calls__i {
  width: 22px;
  height: 22px;
  margin-top: 0.1em;
  color: #c9a668;
  justify-self: center;
}

.vh-ind-band:not(.vh-ind-band--dark) .vh-ind-calls li { background: #f7f0ef; }
.vh-ind-band:not(.vh-ind-band--dark) .vh-ind-calls__i { color: #7a5c22; }

@media (max-width: 900px) {
  .vh-ind-calls { grid-template-columns: 1fr; }
}

/* =============================================================================
   ONE SURFACE, ONE ICON SYSTEM — 20-Sep-2026, applied to the rest of the bands.
   =============================================================================
   Band 1 got the reference treatment and the other seven did not, which left the
   page with two card recipes and three icon treatments. Qasim: "apply this to the
   rest of the bands."

   THE SURFACE. White plus a 1px hairline was on .vh-ind-card, .vh-ind-link, the
   step numerals and the FAQ. Both references do the same thing instead — a ground
   tinted AWAY from the page, no border, a large radius, an inset pillow rather
   than a drop shadow. The tint has to change per band tone: #f7f0ef reads as a
   step down from cream but is invisible on paper, which is why this is a variable
   and not one value.

   THE ICONS. Three treatments became one: a wine disc with a gold glyph. Band 3's
   chip was a rounded square in a third gold (#8a6a2c), the step numerals were
   white circles with a hairline, band 1's were the new disc. Same disc everywhere
   now, sized to its context.

   BAND 3 IS INCLUDED, deliberately. Qasim asked for that band to be left alone on
   19-Sep and then asked for this treatment everywhere on 20-Sep; the later
   instruction wins. Its structure — numeral, watermark, specs, tag footer — is
   untouched. Only the surface and the icon change, and both are one revert away.
   ============================================================================= */

.vh-ind-band { --vh-ind-surface: #f7f0ef; }
.vh-ind-band--paper { --vh-ind-surface: #f2e9e8; }
.vh-ind-band--dark { --vh-ind-surface: rgba(255, 255, 255, 0.05); }

.vh-ind-point,
.vh-ind-card,
.vh-ind-link,
.vh-ind .accordion-asked-item {
  background: var(--vh-ind-surface);
  border: 0;
  border-radius: 22px;
  box-shadow:
    0 3px 0 0 rgba(255, 255, 255, 0.7) inset,
    0 -6px 0 0 rgba(42, 17, 25, 0.04) inset;
}

.vh-ind-band--dark .vh-ind-point,
.vh-ind-band--dark .vh-ind-card,
.vh-ind-band--dark .vh-ind-link,
.vh-ind-band--dark .vh-ind-points > .vh-ind-point {
  background: var(--vh-ind-surface);
  box-shadow: 0 3px 0 0 rgba(255, 255, 255, 0.06) inset;
}

/* The card keeps its own padding and clipping — the ghost watermark needs both. */
.vh-ind-card { padding: 30px 30px 0; overflow: hidden; }
.vh-ind-link { padding: 24px 24px 22px; }

/* Hover was a border-colour change on a card that no longer has a border. */
.vh-ind-link:hover {
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow:
    0 3px 0 0 rgba(255, 255, 255, 0.7) inset,
    0 -6px 0 0 rgba(42, 17, 25, 0.04) inset,
    0 14px 28px -18px rgba(42, 17, 25, 0.3);
}

/* ---- the one icon ---------------------------------------------------------- */

.vh-ind-card__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #3a1722;
  color: #e8c98d;
}

.vh-ind-card__icon svg { width: 24px; height: 24px; }

.vh-ind-band--dark .vh-ind-card__icon,
.vh-ind-band--dark .vh-ind-step__n { background: rgba(255, 255, 255, 0.09); color: #e8c98d; }

.vh-ind-step__n {
  flex: 0 0 46px;
  height: 46px;
  border: 0;
  background: #3a1722;
  color: #e8c98d;
  font-size: 13.5px;
}

/* ---- the FAQ, scoped ------------------------------------------------------
   `.accordion-asked-*` belongs to the shared Accordion component, which the blog
   and the live detail pages also render. Everything here is under `.vh-ind`, so
   only this page moves. */

.vh-ind .accordion-asked-item { margin-bottom: 14px; overflow: hidden; }
.vh-ind .accordion-asked-title { padding: 4px; }

.vh-ind .accordion-button {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 18px 20px;
  font-size: 1.08rem;
}

.vh-ind .accordion-asked-item .right-icon {
  background: #3a1722;
  color: #e8c98d;
  border: 0;
}

.vh-ind .accordion-body { padding: 0 20px 20px; font-size: 1.0625rem; line-height: 1.62; }

/* The template's divider between question and answer sits 14px into a 32px top
   padding (styles.css). This card has no top padding -- the button's own 18px does
   the separating -- so the divider was drawn straight through the first line of
   every open answer, on all thirteen service and six practice pages. Qasim spotted
   it on /solutions/medical-aesthetics, 27-Sep-2026. The card needs no rule. */
.vh-ind .accordion-body::before { display: none; }

/* ---- the card footer, after the surface change -----------------------------
   `.vh-ind-card__foot` painted #faf6f5 and the tags painted white, both of which
   were a step DOWN from a white card and are now a step UP from a tinted one: the
   footer read as a white strip welded to the bottom of every card in band 3. It
   takes a wash of the card's own ink instead, so it darkens whatever the surface
   is, and the tags lose their border for the same reason the cards did. */

.vh-ind-card__foot {
  background: rgba(42, 17, 25, 0.035);
  border-top: 1px solid rgba(42, 17, 25, 0.06);
}

.vh-ind-band--dark .vh-ind-card__foot {
  background: rgba(0, 0, 0, 0.16);
  border-top-color: rgba(255, 255, 255, 0.07);
}

.vh-ind-tag {
  background: rgba(42, 17, 25, 0.05);
  border: 0;
  color: #6a5b5f;
}

.vh-ind-band--dark .vh-ind-tag { background: rgba(255, 255, 255, 0.08); color: #c3b3b7; }

/* The card numeral was #7a6b6f, which measured 4.51:1 on white and 4.49:1 on the
   tinted surface — the 0.02 the surface change cost it put all four of band 3's
   numerals under AA. #6f6165 is 5.22:1 on #f7f0ef, so it holds with margin
   instead of sitting on the line. Caught by v2:contrast; it is not visible. */
.vh-ind-card__num { color: #6f6165; }

/* =============================================================================
   BAND 3: THE WATERMARK WAS UNDER THE WORDS, AND THE TICKS WERE BARE
   =============================================================================
   Qasim, 20-Sep: "there is backgroudn icons too ans then text is hard to read and
   also checkmarks are so simple too."

   Both measured rather than eyeballed. The ghost sat at `top: 34px` at 190px
   square, which put it directly behind the card body: the overlap between the
   watermark and the body copy was 6,132px squared on the first card. Faint or not,
   a line drawing crossing the middle of a paragraph is what makes the paragraph
   hard to read.
   ============================================================================= */

/* THE WATERMARK MOVES BELOW THE TEXT, not further into the background.
   Dropping the opacity would have been the easy fix and the wrong one -- the
   problem is position, and a watermark faint enough to be safe under text is too
   faint to be worth drawing. Pinned to the bottom-right corner instead, where the
   spec list is short and the column is empty, and clipped by the card's own
   overflow so it reads as a corner motif rather than a floating object. */
.vh-ind-card__ghost {
  top: auto;
  right: -28px;
  bottom: 64px;
  opacity: 0.05;
}

/* THE CHECKMARK BECOMES AN ICON.
   A bare 15px tick was the lightest mark on a page whose icon system is a wine
   disc with a gold glyph — it read as a leftover from the CSS squares it replaced
   rather than as part of the system. Same disc, sized down. */
.vh-ind-spec li { grid-template-columns: 24px 1fr; gap: 0.7rem; }

.vh-ind-spec__i {
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  margin-top: 0.16em;
  padding: 4px;
  border-radius: 50%;
  background: #3a1722;
  color: #e8c98d;
}

.vh-ind-band--dark .vh-ind-spec__i { background: rgba(255, 255, 255, 0.1); color: #e8c98d; }

/* ---- the watermark is gone -------------------------------------------------
   Qasim, 20-Sep: "remove the watermark". Moving it below the text fixed the
   legibility measurement and it still read as clutter beside the spec list. The
   card has a real icon now, so the ghost was a second drawing of the same thing
   competing with the words for no gain. The rule stays as a tombstone because the
   generator is not what emits it -- industry-page.tsx is -- and a future pass
   should know this was removed deliberately rather than lost. */
.vh-ind-card__ghost { display: none; }

/* ---- the neighbour card carries a picture ---------------------------------
   Qasim, 20-Sep: "put image too and make it in good view". Three cards that were
   a name, two lines and an arrow -- the flattest band on the page and the one
   asking a reader to go somewhere else. The image is that practice type's own
   reception, bled to the card's edges with the text inset below it. */

.vh-ind-link { padding: 0; overflow: hidden; }

.vh-ind-link__img {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: rgba(42, 17, 25, 0.06);
}

.vh-ind-link__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.vh-ind-link:hover .vh-ind-link__img img { transform: scale(1.04); }

/* The text block is inset now that the picture owns the card's top edge. */
.vh-ind-link__name { padding: 20px 22px 0; display: block; }
.vh-ind-link__blurb { padding: 8px 22px 0; display: block; }
.vh-ind-link__go { padding: 14px 22px 20px; display: block; margin-top: auto; }

@media (prefers-reduced-motion: reduce) {
  .vh-ind-link__img img,
  .vh-ind-link:hover .vh-ind-link__img img { transition: none; transform: none; }
  /* The hover lifts too (27-Sep-2026): only the zoom was guarded. Same
     specificity as the rules they undo, so this block stays below all of them. */
  .vh-ind-btn--light:hover,
  .vh-ind-link:hover,
  .vh-ind-card:hover { transform: none; }
}

/* ---- THE HERO TITLE'S WHITE NEVER APPLIED ----------------------------------
   Qasim, 20-Sep, on a light-mode screenshot: "text is not fine in balck here."
   It was worse than a tone problem — `.vh-ind-hero__title { color: #fff }` had
   never once won. The template sets

     [data-v2-velaire] h1, h2, ... { color: var(--primary) }

   which is (0,1,1) against this class's (0,1,0), so the heading has always taken
   `--primary`. That is cream in dark mode, which is why it looked right, and
   #201a1d in light mode — near-black over a photograph.

   Exactly the failure recorded in velaire-industry.css's own header: a band that
   must be light in BOTH themes cannot take a colour that flips. The scrim is a
   literal, so the words must be too.

   `[data-v2-velaire]` on the front makes this (0,2,0), which beats the template
   rule without !important. Everything else in the hero was already a literal at
   sufficient specificity and measured correct in both themes — only the h1 was
   reading a token.

   NO GATE CATCHES THIS. v2:contrast excludes the hero on purpose: its scrim is a
   SIBLING of the text, not an ancestor, so the ground-walk cannot resolve it.
   Both themes were verified by reading the computed colour instead. */
[data-v2-velaire] .vh-ind-hero__title { color: #fff; }
[data-v2-velaire] .vh-ind-hero .vh-ind-kicker { color: #c9a668; }
[data-v2-velaire] .vh-ind-hero__sub { color: rgba(255, 255, 255, 0.88); }

/* ---- the shell's hero, with this vertical's own photograph -----------------
   `[data-v2-velaire] .section-page-title` sets one shared reception shot with
   `!important`, which is right for /pricing and /security and wrong for a page
   whose whole point is a specific practice type. This is (0,3,0) against its
   (0,2,0), so it wins the !important contest on specificity rather than by
   shouting louder.

   The URL arrives as a custom property set inline per route, so there is one
   rule here instead of six, and adding a vertical needs no CSS. */
[data-v2-velaire] [data-ind-hero] .section-page-title {
  background-image:
    linear-gradient(180deg, rgba(46, 17, 25, 0.78) 0%, rgba(74, 31, 45, 0.88) 100%),
    var(--ind-hero-img) !important;
  background-size: cover;
  background-position: center;
}

/* The booking calendar, as its own band.
   720px was set when this held a four-field form; the Cal.com month grid plus its
   time column wants more than that and was rendering cramped. 920px gives the
   grid its natural width without letting it run the full 1056px measure. */
.vh-ind-form { max-width: 920px; margin-top: clamp(28px, 4vw, 48px); }

/* ---- THE STAGGER ----------------------------------------------------------
   Qasim, 20-Sep, pointing at /product's FeatureGrid: "add the stagger to the
   rebuilt cards, keep the icons."

   Worth recording that the thing he liked there is NOT a designed offset. Both
   of FeatureGrid's columns start at the same `top` with no margin, padding or
   transform; its cards drift apart because the left column's bodies run to two
   lines and the right column's to one. The rhythm is an accident of unequal
   heights, so it cannot be copied -- it has to be authored.

   Authored as an alternation rather than a diagonal. A progressive offset
   (0, +32, +64) reads as a broken grid as often as it reads as a designed one;
   every-other-card down gives the row a rhythm that is unmistakably deliberate
   and survives both the 3-up and the 4-up case.

   ABOVE 900px ONLY. Below that the grid is one column and an offset on alternate
   cards is not a stagger -- it is an uneven gap. */

@media (min-width: 901px) {
  .vh-ind-points > .vh-ind-point:nth-child(even) {
    margin-top: clamp(30px, 3.6vw, 58px);
  }
}

/* =============================================================================
   THE SERVICE PAGE (service-rhythm.tsx), added 25-Sep-2026.
   Everything above is shared with the practice-type page; this is only what a
   service page renders that a practice-type page does not.
   ============================================================================= */

/* ---- the status chip in the hero -------------------------------------------
   Rolling out / On the roadmap, on its own line above the two buttons. A live
   service has no chip: Qasim, 11-Sep, "Live today" appears nowhere (see
   service-status.ts). `.page-title-actions` is a wrapping flex row, so
   `flex-basis: 100%` is what puts it on a line of its own. It used to be inside
   the h1, which is how the heading read "Missed-Call RecoveryLive today".

   The chip carries its own translucent plate, so its contrast does not depend
   on which photograph sits behind it. The gold in the base rule was the live
   chip's (#e8c98d, about 9:1 on the scrim); both remaining states take the
   quieter cream below, and what tells them apart is the word, not a colour
   that has to be decoded. */
[data-v2-velaire] .vh-svc-status-line {
  flex-basis: 100%;
  text-align: center;
  margin-bottom: 4px;
}
[data-v2-velaire] .vh-svc-status {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--vh-font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e8c98d;
  background: rgba(32, 12, 20, 0.55);
  border: 1px solid rgba(232, 201, 141, 0.45);
}
[data-v2-velaire] .vh-svc-status[data-status="roadmap"],
[data-v2-velaire] .vh-svc-status[data-status="rolling-out"] {
  color: #f1e3e5;
  border-color: rgba(241, 227, 229, 0.35);
}

/* ---- the step rail on a dark band -------------------------------------------
   The practice-type page runs its rail on paper, so the rail's ink and hairline
   never had a dark variant. Band 02 of the service page is dark. The numeral
   already had one (above); the label, the sentence and the divider did not. */
.vh-ind-band--dark .vh-ind-step b { color: #efe3e4; }
.vh-ind-band--dark .vh-ind-step span { color: #d8c9cb; }   /* 10.1:1 on #201a1d, same as the lede */
.vh-ind-band--dark .vh-ind-step { border-top-color: rgba(255, 255, 255, 0.12); }

/* ---- the accordion inside a split -------------------------------------------
   Band 03 puts the FAQ in the text column of a Split, beside a portrait. The
   shared accordion's first item carries the same top margin as the rest; under a
   heading that margin doubles the gap, so it is removed for the first item only. */
.vh-svc .vh-ind-split__text .accordion-asked-item:first-child { margin-top: 0.75rem; }

/* The hedge under the step rail: the live page's footnote, small and quiet. On
   the dark band it takes the lede's dim cream (10.1:1); mono, like the folios
   and the kicker, so it reads as apparatus rather than as a fourth step. */
.vh-svc-footnote {
  margin: 1.6rem 0 0;
  font-family: var(--vh-font-mono, ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #57504a;
}
.vh-ind-band--dark .vh-svc-footnote { color: #d8c9cb; }

/* ---- the two hubs, /services and /solutions (26-Sep-2026) --------------------
   Both hubs reuse the detail pages' bands, heads, splits and link cards. These
   rules are only what a hub has that a detail page does not: a status rail of
   linked services on the paper band, and a "calls covered" line on a card. */

/* Ten roadmap items in one column was three screens of list; two columns halves
   it. The second item loses its top rule too, or the two columns start on
   different lines. */
@media (min-width: 861px) {
  .vh-hub-rail { grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 4vw, 64px); }
  .vh-hub-rail .vh-ind-step:nth-child(2) { border-top: 0; padding-top: 0.6rem; }
}
.vh-hub-rail .vh-ind-step { align-items: flex-start; }

.vh-hub-rail__link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(201, 166, 104, 0.45);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}
.vh-hub-rail__link:hover { text-decoration-color: #c9a668; }

.vh-ind-step span.vh-hub-rail__status {
  display: block;
  margin-top: 0.45rem;
  font-family: var(--vh-font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7a5c22;
}
.vh-ind-band--dark .vh-ind-step span.vh-hub-rail__status { color: #e8c98d; }  /* 10.5:1 on #201a1d */

.vh-hub-calls { margin-top: 0.6rem; }
.vh-hub-calls__k {
  font-family: var(--vh-font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7a5c22;            /* 5.9:1 on the card */
}

.vh-hub-cta { margin: 1.8rem 0 0; }

/* The sample call on the /services hub's dark band. Its caption is `.text-secondary`,
   which the light theme flips to a dark grey for cream grounds -- 2.68:1 here, because
   this band stays dark in both themes. Literal, like every other colour on a dark band
   in this file. */
[data-v2-velaire] .vh-ind-band--dark .v2-phone-caption { color: #d8c9cb !important; }   /* 10.1:1 on #201a1d */