/* ═══════════════════════════════════════════════════════════════
   INDUSTRY PAGE TEMPLATE
   ═══════════════════════════════════════════════════════════════
   Loads after css/style.css, css/page-kit.css and css/service-page.css.

   An industry page reuses most of the service template. It swaps two things:
   tiers become a services grid (the sector does not buy one service, it buys a
   combination), and a "what this sector needs" block sits where positioning
   would normally be, because the argument has to be about them before it is
   about us.
   ═══════════════════════════════════════════════════════════════ */

/* ═══ SECTOR NEEDS ════════════════════════════════════════════ */

.ind-needs { border-bottom: 1px solid var(--border); }

.ind-needgrid {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.ind-need { padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--bg); }
.ind-need-num {
  display: block;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--primary-lift);
  margin-bottom: 1rem;
}
.ind-need h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  margin-bottom: 0.75rem;
}
.ind-need p {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.6);
}


/* ═══ SERVICES GRID ═══════════════════════════════════════════ */
/*  Replaces the tier table. A sector buys a combination of services, not one
    package, so this routes into the service pages rather than pricing here.  */

.ind-services { border-bottom: 1px solid var(--border); }

.ind-svcgrid { display: grid; gap: 1rem; }

.ind-svc {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color 0.25s, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.ind-svc:hover { border-color: var(--primary); transform: translateY(-3px); }
.ind-svc h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.ind-svc p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 1.25rem;
}
.ind-svc-go {
  margin-top: auto;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-lift);
}
.ind-svc-go::after { content: ' \\2192'; }


/* ═══ RESPONSIVE ══════════════════════════════════════════════ */

@media (min-width: 640px) {
  .ind-needgrid { grid-template-columns: repeat(2, 1fr); }
  .ind-svcgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .ind-needgrid { grid-template-columns: repeat(4, 1fr); }
  .ind-svcgrid { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .ind-svc { transition: none; }
  .ind-svc:hover { transform: none; }
}

/* A child service that is not live yet: same card, no link, no hover lift. */
.ind-svc--static { cursor: default; }
.ind-svc--static:hover { border-color: var(--border); transform: none; }