/* ==========================================================================
   industries.html — page-specific rules (tokens only, no new colours)
   ========================================================================== */

/* Industry rows: outlined number in column 1, wide body in columns 2–4
   (long display titles such as "Gaming & entertainment" need the width) */
.industry-rows .row__num { grid-column: 1; }
.industry-rows .row__body { grid-column: 2 / -1; }

/* Inside the body: needs in two columns, "Covered by" links in the third */
.industry { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); margin-top: 24px; }
.industry__text { grid-column: 1 / 3; }
.industry__text .row__text { margin-top: 0; }
.industry__text .row__text + .row__text { margin-top: 14px; }
.industry__services { grid-column: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 2px; }
.industry__caption { font-size: 12px; font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-75); margin-bottom: 4px; }
.industry__services .link-arrow { line-height: 1.2; }

/* Dark band: marquee bleeds full width, stats sit in columns 2–4 */
.scale .marquee { color: var(--white); }
.scale .stats { row-gap: 0; }

@media (max-width: 1023px) {
  /* Monument titles such as "& entertainment" (13em) need the full width on tablets:
     number above, body below — the phone layout starts here for this page */
  .industry-rows .row { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .industry-rows .row__num, .industry-rows .row__body { grid-column: auto; }
  .industry { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .industry__text, .industry__services { grid-column: auto; }
  .scale .stats { row-gap: 20px; }
}

@media (max-width: 639px) {
  /* 13em titles must fit a 320px container on 360px phones → ≤ 24px there, 32px from 485px up */
  .industry-rows .row__title { font-size: clamp(20px, 6.6vw, 32px); }
  .industry { margin-top: 16px; row-gap: 24px; }
  .industry__services { gap: 14px; }
  /* keep "Not sure / which fits?" on two lines on narrow phones */
  .fit__title { font-size: clamp(30px, 8.8vw, 44px); }
}