/* =============================================================
   pages/veloque-industrial.css
   Page-scoped layout for /projects/veloque/industrial-design ONLY.
   Loaded AFTER veloque.css; every rule is scoped to
   `.vq-page--industrial` so nothing here can leak to the other
   VELOQUE chapters.

   Layout language follows docs/veloque-augment-reference.md:
   full-rail grids, 1px hairline rules instead of cards, zero radius,
   zero shadow, asymmetric media+text rows, mono labels/captions.
   Colour comes exclusively from the --vq-* tokens in veloque.css.
   ============================================================= */

.vq-page--industrial {
  /* Hairline colour used by every gap:1px grid on this page. */
  --vqi-rule: var(--vq-border-2);
  --vqi-cell-pad: clamp(24px, 2.4vw, 40px);
}

/* ── 4-beat section opener ─────────────────────────────────────
   eyebrow → h2 → one-sentence lead → full-rail grid.
   The lead stays clamped so the measure never exceeds ~72ch even
   though the grids below it now span the full 1600px rail. */
.vq-page--industrial .vqi-lead {
  max-width: 768px;
  margin-bottom: 0;
}

/* Two-column opener (P1 #6): the eyebrow + h2 hold the narrow rail
   column while the lead prose fills the wide one, so the section
   header uses the whole 1600px rail instead of leaving the right
   half empty. Stacks below 1024px. */
.vq-page--industrial .vqi-opener {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.4vw, 32px);
  align-items: start;
}

.vq-page--industrial .vqi-opener .vq-section__label {
  margin-bottom: 20px;
}

.vq-page--industrial .vqi-opener .vq-section__title {
  margin-bottom: 0;
  max-width: 22ch;
}

.vq-page--industrial .vqi-opener .vqi-lead {
  max-width: 75ch;
}

@media (min-width: 1024px) {
  .vq-page--industrial .vqi-opener {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    column-gap: clamp(40px, 4.5vw, 88px);
  }
}

@media (max-width: 1023px) {
  .vq-page--industrial .vqi-opener .vq-section__title { max-width: 24ch; }
}

.vq-page--industrial .vqi-lead p + p {
  margin-top: 16px;
}

.vq-page--industrial .vqi-lead--after {
  margin-top: clamp(40px, 5vw, 64px);
}

/* Mono provenance caption above a stat strip (reference pattern D). */
.vq-page--industrial .vqi-provenance {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vq-text-muted);
  margin-top: clamp(40px, 5vw, 56px);
  margin-bottom: 20px;
}

/* Mono caption under a full-rail block. */
.vq-page--industrial .vqi-caption {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.06em;
  color: var(--vq-text-muted);
  margin-top: 16px;
}

/* Screen-reader-only text (matrix cell meaning). */
.vq-page--industrial .vqi-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* =============================================================
   B. Hairline grid — the signature pattern
   gap:1px over a rule-coloured parent, cells painted --vq-bg.
   Used by the four technologies (4-up) and the colourway bento.
   ============================================================= */
.vq-page--industrial .vqi-hairline {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--vqi-rule);
  border: 1px solid var(--vqi-rule);
  margin-top: clamp(48px, 6vw, 64px);
}

/* ── Technologies (pattern B, 4-up) ──────────────────────────── */
.vq-page--industrial .vqi-hairline .vq-tech-card {
  background: var(--vq-bg);
  border: none;
  padding: var(--vqi-cell-pad);
  gap: 20px;
  transition: background 0.18s ease-out;
}

.vq-page--industrial .vqi-hairline .vq-tech-card:hover {
  background: var(--vq-surface);
  border: none;
}

.vq-page--industrial .vqi-hairline .vq-tech-card__media {
  margin: calc(-1 * var(--vqi-cell-pad)) calc(-1 * var(--vqi-cell-pad)) 4px;
  aspect-ratio: 4 / 3;
  background: var(--vq-surface-2);
}

.vq-page--industrial .vqi-hairline .vq-tech-card__title {
  font-size: clamp(18px, 1.35vw, 22px);
  line-height: 1.2;
  letter-spacing: -0.014em;
}

/* Push the mono tag to the bottom edge so every cell in a row
   ends on the same baseline regardless of copy length. */
.vq-page--industrial .vqi-hairline .vq-tech-card__research {
  margin-top: auto;
}

/* When the provenance caption introduces the grid, the caption owns the
   vertical gap so the two margins do not stack. */
.vq-page--industrial .vqi-provenance + .vqi-hairline {
  margin-top: 0;
}

/* ── Mixed-ratio media in the technology cells ────────────────
   The four source photos are near-square, 5:4, 2:3 portrait and a
   3:2 product shot. The cell media height is uniform (set above);
   only the framing changes per image. */
.vq-page--industrial .vqi-hairline .vq-tech-card__media img {
  object-position: center;
}

/* Portrait source (2:3): bias the crop upward so the hem detail and
   the mark stay inside a square cell instead of being cut at the top. */
.vq-page--industrial .vqi-tech-media--portrait img {
  object-position: center 38%;
}

/* Wide product shot (3:2): cover would cut the machine at both ends,
   so it sits contained on a surface plate. */
.vq-page--industrial .vqi-tech-media--plate {
  /* The source photo is shot on pure black, so the plate stays --vq-bg:
     a --vq-surface-2 plate reads as a grey frame around a black box. */
  background: var(--vq-bg);
  display: grid;
  place-items: center;
}

.vq-page--industrial .vqi-tech-media--plate img {
  object-fit: contain;
  max-height: 100%;
}

/* ── Eco signal (deliberate, approved exception to grayscale) ──
   ONE muted green, used only on the eco-solvent card title and its
   leaf icon. 9.7:1 on #000, 8.8:1 on the hovered #111 cell. */
.vq-page--industrial {
  --vqi-eco: #7FBF8A;
}

.vq-page--industrial .vqi-tech-title--eco {
  color: var(--vqi-eco);
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.vq-page--industrial .vqi-tech-title__icon {
  color: var(--vqi-eco);
  font-size: 1.05em;
  line-height: 1;
  flex: 0 0 auto;
  transform: translateY(0.08em);
}

@media (min-width: 768px) {
  .vq-page--industrial .vqi-hairline--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  .vq-page--industrial .vqi-hairline--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vq-page--industrial .vqi-hairline .vq-tech-card__media { aspect-ratio: 1 / 1; }
}

/* =============================================================
   D. Stat strip — rules top and bottom only, no cards
   ============================================================= */
.vq-page--industrial .vqi-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 56px) clamp(24px, 3vw, 48px);
  background: transparent;
  border: none;
  border-block: 1px solid var(--vq-border);
  padding-block: clamp(32px, 4vw, 48px);
  margin: 0;
  overflow: visible;
}

.vq-page--industrial .vqi-stats .vq-stat {
  background: transparent;
  padding: 0;
  gap: 14px;
}

.vq-page--industrial .vqi-stats .vq-stat__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
}

@media (min-width: 768px) {
  .vq-page--industrial .vqi-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Full-rail figure: single testing photo + mono caption ────── */
.vq-page--industrial .vqi-testing {
  margin: clamp(48px, 6vw, 72px) 0 0;
}
.vq-page--industrial .vqi-testing img {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: center 40%;
  border: 1px solid var(--vqi-rule);
}
@media (max-width: 767px) {
  .vq-page--industrial .vqi-testing img { aspect-ratio: 4 / 3; }
}
.vq-page--industrial .vqi-testing__caption {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vq-text-muted);
}

@media (min-width: 1280px) {
  /* The pipeline arrows sit on the shared hairline, so the cell needs
     room underneath for the 30px glyph. */
  .vq-page--industrial .vqi-steps--5 .vq-timeline__step {
    padding-bottom: 40px;
  }
}

/* =============================================================
   The Range — two editorial halves (Essentials / Limited Drops)
   Hairline 2-up, no radius, no shadow. Stacks below 900px.
   ============================================================= */
.vq-page--industrial .vqi-range-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--vqi-rule);
  border: 1px solid var(--vqi-rule);
  margin-top: clamp(48px, 6vw, 64px);
}

@media (min-width: 900px) {
  .vq-page--industrial .vqi-range-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.vq-page--industrial .vqi-range-half {
  background: var(--vq-bg);
  padding: var(--vqi-cell-pad);
}

.vq-page--industrial .vqi-range-half__idx {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vq-text-muted);
  margin-bottom: clamp(20px, 2.4vw, 28px);
}

.vq-page--industrial .vqi-range-half__title {
  font-family: var(--font-headings);
  font-size: clamp(24px, 2.2vw, 34px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--vq-text);
  max-width: 22ch;
  margin-bottom: clamp(16px, 1.6vw, 22px);
}

.vq-page--industrial .vqi-range-half__body p {
  color: var(--vq-text-mid);
  max-width: 60ch;
}

.vq-page--industrial .vqi-range-half__body p + p { margin-top: 16px; }

/* =============================================================
   Range tree — real nested <ul>, hairline connectors via ::before
   Horizontal (root left, leaves right) at >=1024px, indented
   vertical list below that. Mono labels, grayscale, radius 0.
   ============================================================= */
.vq-page--industrial .vqi-tree {
  margin-top: clamp(56px, 7vw, 88px);
  overflow-x: auto;
  padding-bottom: 4px;
}

.vq-page--industrial .vqi-tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vq-page--industrial .vqi-tree li { position: relative; }

.vq-page--industrial .vqi-tree__node,
.vq-page--industrial .vqi-tree__leaf {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.06em;
  line-height: 1.4;
  color: var(--vq-text-soft);
  background: var(--vq-bg);
  border: 1px solid var(--vqi-rule);
  padding: 10px 14px;
  margin: 0;
}

.vq-page--industrial .vqi-tree__node--root,
.vq-page--industrial .vqi-tree__node--l1 {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--vq-text);
  border-color: var(--vq-border-strong);
}

.vq-page--industrial .vqi-tree__meta {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-11);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vq-text-dim);
}

.vq-page--industrial .vqi-tree__chips {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}

.vq-page--industrial .vqi-tree__chip {
  width: 14px;
  height: 14px;
  border: 1px solid var(--vq-border);
}

.vq-page--industrial .vqi-tree__tag {
  display: block;
  margin-top: 5px;
  font-size: var(--fs-11);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vq-text-muted);
}

/* ── Phone / tablet: indented vertical list ─────────────────── */
@media (max-width: 1023px) {
  .vq-page--industrial .vqi-tree__node,
  .vq-page--industrial .vqi-tree__leaf {
    width: fit-content;
    min-width: min(260px, 100%);
    max-width: 100%;
  }
  .vq-page--industrial .vqi-tree li > ul {
    margin: 8px 0 8px 16px;
    padding-left: 16px;
    border-left: 1px solid var(--vqi-rule);
  }
  .vq-page--industrial .vqi-tree li > ul > li + li { margin-top: 8px; }
  /* Short tick from the spine into each item. */
  .vq-page--industrial .vqi-tree li > ul > li::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 20px;
    width: 16px;
    border-top: 1px solid var(--vqi-rule);
  }
}

/* ── Desktop: horizontal tree, root left to leaves right ────── */
@media (min-width: 1024px) {
  .vq-page--industrial .vqi-tree__root { display: inline-block; min-width: 100%; }

  .vq-page--industrial .vqi-tree li {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .vq-page--industrial .vqi-tree__node,
  .vq-page--industrial .vqi-tree__leaf {
    flex: 0 0 auto;
    width: clamp(180px, 14vw, 240px);
    padding: 12px 16px;
  }

  .vq-page--industrial .vqi-tree__leaf {
    flex: 1 1 auto;
    width: auto;
    min-width: clamp(180px, 14vw, 240px);
    max-width: 320px;
  }

  .vq-page--industrial .vqi-tree__node--root,
  .vq-page--industrial .vqi-tree__node--l1 { align-self: center; }

  .vq-page--industrial .vqi-tree li > ul {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: clamp(32px, 3vw, 56px);
    flex: 1 1 auto;
  }

  /* Stub from the parent node to the children spine. */
  .vq-page--industrial .vqi-tree li > ul::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 50%;
    max-width: clamp(16px, 1.5vw, 28px);
    border-top: 1px solid var(--vqi-rule);
  }

  .vq-page--industrial .vqi-tree li > ul > li + li { margin-top: 10px; }

  /* Horizontal segment into each child. */
  .vq-page--industrial .vqi-tree li > ul > li::before {
    content: "";
    position: absolute;
    left: calc(-1 * clamp(16px, 1.5vw, 28px));
    top: 50%;
    width: clamp(16px, 1.5vw, 28px);
    border-top: 1px solid var(--vqi-rule);
  }

  /* Vertical spine linking the children of one node. */
  .vq-page--industrial .vqi-tree li > ul > li::after {
    content: "";
    position: absolute;
    left: calc(-1 * clamp(16px, 1.5vw, 28px));
    top: 0;
    bottom: 0;
    border-left: 1px solid var(--vqi-rule);
  }
  .vq-page--industrial .vqi-tree li > ul > li:first-child::after { top: 50%; }
  .vq-page--industrial .vqi-tree li > ul > li:last-child::after { bottom: 50%; }
  .vq-page--industrial .vqi-tree li > ul > li:only-child::after { display: none; }
}

/* =============================================================
   Colourway bento — one hairline cell per colourway
   5 cells: 1-up phone, 2-up tablet (last cell spans both),
   3-up desktop (last cell spans two columns) so no row is left
   with an orphan gap.
   ============================================================= */
.vq-page--industrial .vqi-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--vqi-rule);
  border: 1px solid var(--vqi-rule);
  margin-top: clamp(48px, 6vw, 64px);
}

.vq-page--industrial .vqi-bento .vq-swatch-group {
  background: var(--vq-bg);
  padding: var(--vqi-cell-pad);
  margin-bottom: 0;
}

.vq-page--industrial .vqi-bento .vq-swatches {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}

.vq-page--industrial .vqi-bento .vqi-swatch-group--wide .vq-swatches {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vq-page--industrial .vqi-bento .vq-swatch__color {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}

/* The wide Essentials cell holds 3 chips across a 2-column span, so
   its swatches are capped to keep every chip the same size as the
   3-chip cells beside it. */
@media (min-width: 768px) {
  .vq-page--industrial .vqi-bento--colors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vq-page--industrial .vqi-bento--colors .vqi-swatch-group--wide { grid-column: 1 / -1; }
  .vq-page--industrial .vqi-bento .vqi-swatch-group--wide .vq-swatches {
    max-width: 560px;
  }
}

@media (min-width: 1280px) {
  .vq-page--industrial .vqi-bento--colors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vq-page--industrial .vqi-bento--colors .vqi-swatch-group--wide { grid-column: span 2; }
}

/* On the full 1600px rail the five colourway cells fit one row, so the
   Essentials cell stops spanning and every palette gets equal weight. */
@media (min-width: 1440px) {
  .vq-page--industrial .vqi-bento--colors { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .vq-page--industrial .vqi-bento--colors .vqi-swatch-group--wide { grid-column: auto; }
  .vq-page--industrial .vqi-bento .vqi-swatch-group--wide .vq-swatches { max-width: none; }
}

/* =============================================================
   G. Stepped hairline grid — no connector lines, mono indices
   Used by the development process (6 steps) and the production
   pipeline (3 stages).
   ============================================================= */
.vq-page--industrial .vqi-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--vqi-rule);
  border: 1px solid var(--vqi-rule);
  margin-top: clamp(48px, 6vw, 64px);
  /* Undo the vertical-timeline chrome from veloque.css. */
  border-left: 1px solid var(--vqi-rule);
  padding-left: 0;
}

.vq-page--industrial .vqi-steps .vq-timeline__step {
  background: var(--vq-bg);
  padding: var(--vqi-cell-pad);
  padding-bottom: var(--vqi-cell-pad);
  transition: background 0.18s ease-out;
}

.vq-page--industrial .vqi-steps .vq-timeline__step:last-child {
  padding-bottom: var(--vqi-cell-pad);
}

.vq-page--industrial .vqi-steps .vq-timeline__step:hover {
  background: var(--vq-surface);
}

/* No connector dots in the stepped grid. */
.vq-page--industrial .vqi-steps .vq-timeline__step::before {
  display: none;
}

.vq-page--industrial .vqi-steps .vq-timeline__num {
  letter-spacing: 0.18em;
  margin-bottom: 14px;
}

.vq-page--industrial .vqi-steps .vq-timeline__title {
  font-size: clamp(18px, 1.35vw, 22px);
  line-height: 1.25;
  margin-bottom: 10px;
}

@media (min-width: 768px) {
  .vq-page--industrial .vqi-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 3-cell variant at 2-up would leave an orphan cell on the second
   row, so the last stage spans the full width between 768 and 1279. */
@media (min-width: 768px) and (max-width: 1279px) {
  .vq-page--industrial .vqi-steps--3 .vq-timeline__step:last-child,
  .vq-page--industrial .vqi-steps--5 .vq-timeline__step:last-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1280px) {
  .vq-page--industrial .vqi-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =============================================================
   Production preparation & tech packs
   Head/body pair on a hairline rule, then the work-sheet image at
   full rail width and natural aspect (no crop).
   ============================================================= */
.vq-page--industrial .vqi-prep {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.5vw, 40px);
  margin-top: clamp(56px, 7vw, 88px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--vqi-rule);
}

.vq-page--industrial .vqi-prep__title {
  font-family: var(--font-headings);
  font-weight: 500;
  font-size: clamp(24px, 2.4vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--vq-text);
  margin: 12px 0 0;
}

.vq-page--industrial .vqi-prep__body p {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.7;
  color: var(--vq-text-soft, var(--vq-text-muted));
  max-width: 68ch;
  margin: 0 0 16px;
}

.vq-page--industrial .vqi-prep__body p:last-child { margin-bottom: 0; }

@media (min-width: 1024px) {
  .vq-page--industrial .vqi-prep {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(40px, 5vw, 80px);
    align-items: start;
  }
}

.vq-page--industrial .vqi-prep-figure {
  margin: clamp(28px, 3.5vw, 48px) 0 0;
  max-width: none;
}

.vq-page--industrial .vqi-prep-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--vqi-rule);
}

.vq-page--industrial .vqi-prep-figure__caption {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vq-text-muted);
}

/* =============================================================
   Production pipeline — 5 stages, arrows in the hairline gaps,
   loop bracket returning the last stage to the first.
   ============================================================= */
.vq-page--industrial .vqi-pipeline {
  margin-top: clamp(48px, 6vw, 64px);
}

.vq-page--industrial .vqi-pipeline .vqi-steps {
  margin-top: 0;
}

.vq-page--industrial .vqi-steps--5 .vq-timeline__step {
  position: relative;
}

.vq-page--industrial .vqi-arrow {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: var(--vq-bg);
  color: var(--vq-text-muted);
  font-size: 15px;
  line-height: 1;
  /* Phone: 1-up column, the arrow points down into the next stage. */
  left: 50%;
  bottom: -1px;
  transform: translate(-50%, 50%) rotate(90deg);
}

/* Tablet: 2-up. Arrows point right inside the row, and down on the
   row-end cells so the reading order stays unambiguous. */
@media (min-width: 768px) {
  .vq-page--industrial .vqi-arrow {
    left: auto;
    right: -1px;
    top: 50%;
    bottom: auto;
    transform: translate(50%, -50%);
  }
  .vq-page--industrial .vqi-steps--5 .vq-timeline__step:nth-child(2n) .vqi-arrow {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -1px;
    transform: translate(-50%, 50%) rotate(90deg);
  }
}

/* Desktop: single 5-up row, every arrow points right. */
@media (min-width: 1280px) {
  .vq-page--industrial .vqi-steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .vq-page--industrial .vqi-steps--5 .vq-timeline__step:nth-child(2n) .vqi-arrow {
    right: -1px;
    left: auto;
    top: 50%;
    bottom: auto;
    transform: translate(50%, -50%);
  }
}

/* ── Loop back to stage 01 ─────────────────────────────────── */
.vq-page--industrial .vqi-loop {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 20px;
}

.vq-page--industrial .vqi-loop__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--vqi-rule);
  color: var(--vq-text-muted);
  font-size: 15px;
}

.vq-page--industrial .vqi-loop__text {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--vq-text-muted);
}

/* From tablet up the loop reads as a bracket hanging off the grid and
   climbing back to the first stage. */
@media (min-width: 768px) {
  .vq-page--industrial .vqi-loop {
    position: relative;
    height: 56px;
    padding-top: 0;
    align-items: flex-end;
    border-left: 1px solid var(--vqi-rule);
    border-right: 1px solid var(--vqi-rule);
    border-bottom: 1px solid var(--vqi-rule);
  }
  .vq-page--industrial .vqi-loop__icon {
    position: absolute;
    left: -1px;
    top: -17px;
    width: 34px;
    height: 34px;
    font-size: 18px;
    color: var(--vq-text);
    border: none;
    background: var(--vq-bg);
  }
  .vq-page--industrial .vqi-loop__text {
    position: absolute;
    left: 50%;
    bottom: -1px;
    transform: translate(-50%, 50%);
    background: var(--vq-bg);
    padding: 0 14px;
    text-align: center;
    max-width: calc(100% - 96px);
  }
}

/* ── Phone tightening ───────────────────────────────────────── */
@media (max-width: 640px) {
  .vq-page--industrial {
    --vqi-cell-pad: 24px;
  }

  .vq-page--industrial .vqi-stats {
    gap: 32px 24px;
  }

}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .vq-page--industrial .vqi-hairline .vq-tech-card,
  .vq-page--industrial .vqi-steps .vq-timeline__step {
    transition: none;
  }
}

/* ── Hero video: taller band + lower focal point so the laser head and
   the cut line (mid-frame in the source) stay inside the crop. */
body.veloque-page:has(.vq-page--industrial) .vq-hero__image-wrap { height: 56vh; min-height: 400px; }
body.veloque-page:has(.vq-page--industrial) .vq-hero__image-wrap video { object-position: center 45%; }
body.veloque-page:has(.vq-page--industrial) .vq-hero__gradient {
  background: linear-gradient(to bottom, rgba(0,0,0,.15) 0%, transparent 40%, rgba(0,0,0,.5) 84%, #000 100%);
}

/* Printer photo card: pure black around the plate (was the grey media surface). */
.vq-page--industrial .vq-tech-card:has(.vqi-tech-media--plate) .vq-tech-card__media,
.vq-page--industrial .vqi-tech-media--plate,
.vq-page--industrial .vqi-tech-media--plate img { background: #000; }
.vq-page--industrial .vqi-tech-media--plate { width: 100%; height: 100%; }


/* ── Range gallery: four studio renders, hairline cells, portrait 3:4 ── */
.vq-page--industrial .vqi-provenance--gallery { margin-top: clamp(48px, 5vw, 72px); }
.vq-page--industrial .vqi-range-gallery {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--vqi-rule); border: 1px solid var(--vqi-rule);
}
@media (min-width: 900px) { .vq-page--industrial .vqi-range-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vq-page--industrial .vqi-range-gallery__item { margin: 0; background: var(--vq-bg); min-width: 0; }
.vq-page--industrial .vqi-range-gallery__item img {
  display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top;
}
.vq-page--industrial .vqi-range-gallery__cap {
  margin: 0; padding: 12px 14px 14px;
  font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--vq-text-muted);
}

/* Gallery captions: the range name as a visible title, brand burgundy for
   Limited Drops and gold for Essentials (approved colour exception; text
   tints chosen to pass AA on black: burgundy #B8476E 4.6:1, gold #C9A96E 8:1). */
.vq-page--industrial .vqi-range-gallery__cap { padding: 14px 16px 16px; }
.vq-page--industrial .vqi-range-gallery__line {
  display: block; font-family: var(--font-headings); font-size: clamp(18px, 1.4vw, 22px);
  font-weight: 500; letter-spacing: -0.01em; text-transform: none; line-height: 1.2; margin-bottom: 6px;
}
.vq-page--industrial .vqi-range-gallery__line--drop { color: #B8476E; }
.vq-page--industrial .vqi-range-gallery__line--ess  { color: #C9A96E; }
.vq-page--industrial .vqi-range-gallery__sub { display: block; }

/* ── Production photos: two workshop shots, hairline cells, 4:3 crop ── */
.vq-page--industrial .vqi-prod-figs {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--vqi-rule); border: 1px solid var(--vqi-rule); margin-top: 16px;
}
@media (min-width: 768px) { .vq-page--industrial .vqi-prod-figs { grid-template-columns: 1fr 1fr; } }
.vq-page--industrial .vqi-prod-fig { margin: 0; background: var(--vq-bg); min-width: 0; }
.vq-page--industrial .vqi-prod-fig img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 45%; }
.vq-page--industrial .vqi-prod-fig__cap {
  margin: 0; padding: 12px 14px 14px; font-family: var(--font-mono); font-size: var(--fs-11);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--vq-text-muted);
}

/* Hero: eyebrow row with the video caption right-aligned on the same line. */
body.veloque-page:has(.vq-page--industrial) .vqi-hero-eyebrow-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap;
  max-width: calc(var(--vq-page-max) - 2 * var(--vq-page-pad-x));
}
body.veloque-page:has(.vq-page--industrial) .vqi-hero-videocap { text-align: right; }
/* Range gallery: images only, real gaps, no hairline frame. */
.vq-page--industrial .vqi-range-gallery { gap: clamp(12px, 1.4vw, 24px); background: transparent; border: 0; }

/* ── Learnings + availability note ── */
.vq-page--industrial .vqi-learnings { list-style: none; padding: 0; }
.vq-page--industrial .vqi-avail {
  margin-top: clamp(40px, 4vw, 64px); padding: clamp(28px, 3vw, 44px);
  border: 1px solid var(--vqi-rule); background: var(--vq-surface);
  display: grid; gap: 10px; max-width: 880px;
}
.vq-page--industrial .vqi-avail__label {
  margin: 0; font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: 0.14em; text-transform: uppercase; color: var(--vq-text-muted);
}
.vq-page--industrial .vqi-avail__title {
  margin: 0; font-family: var(--font-headings); font-size: clamp(22px, 2vw, 30px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; color: var(--vq-text);
}
.vq-page--industrial .vqi-avail__body { margin: 0; color: var(--vq-text-mid); font-size: var(--fs-15); line-height: 1.55; }
/* ── Café culture: machine figure + coffee carousel band ── */
.vq-page--industrial .vqi-cafe { margin-bottom: clamp(40px, 4vw, 64px); }
.vq-page--industrial .vqi-cafe-machine__fig { margin: 0; }
.vq-page--industrial .vqi-cafe-machine__fig img {
  display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid var(--vqi-rule);
}
.vq-page--industrial .vqi-cafe-machine__cap {
  margin-top: 14px; font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: 0.14em; text-transform: uppercase; color: var(--vq-text-muted);
}
.vqi-cafe-band { padding-top: clamp(48px, 5vw, 80px); }
.vqi-cafe-band .vq-carousel-header { margin-bottom: 28px; }
.vqi-cafe-band + .vq-detail { padding-top: clamp(48px, 6vh, 96px); }
.vqi-cafe-band .vq-carousel--natural .vq-carousel-item { flex: 0 0 auto; width: min(78vw, 440px); }
.vqi-cafe-band .vq-carousel--natural .vq-carousel-item__media { width: 100%; }