/* =====================================================================
   SmarDac — Industry detail pages (/industries/<slug>)
   Loaded after industries.css, which supplies every `in2-` primitive
   (tokens, buttons, links, hero, CTA, reveal). This file only adds the
   sections that are unique to a single-industry page.
   ===================================================================== */

/* Sub-navigation: white pill bar overlapping the hero's lower edge */
.in2-subnav { position: relative; z-index: 5; margin-top: -30px; }
.in2-subnav__bar {
  display: flex; gap: 6px; padding: 6px; width: max-content; max-width: 100%;
  border-radius: 16px; background: #fff; border: 1px solid var(--in2-line);
  box-shadow: 0 24px 50px -28px rgba(9, 29, 62, .55);
  overflow-x: auto; scrollbar-width: none;
}
.in2-subnav__bar::-webkit-scrollbar { display: none; }
.in2-subnav a {
  display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 11px;
  font: 600 14px var(--in2-body); color: var(--in2-ink); text-decoration: none; white-space: nowrap;
  transition: background .3s, color .3s;
}
.in2-subnav a:hover { background: #eef6ff; color: var(--in2-p); text-decoration: none; }
.in2-subnav a.is-active, .in2-subnav a.is-active:hover { background: var(--in2-navy); color: #fff; }

/* ---------- Intro: copy + photo ---------- */
.in2-intro { padding: 100px 0 90px; background: #fff; }
.in2-intro__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 76px); align-items: center; }
.in2-intro__copy p + p { margin-top: 14px; }
.in2-intro__copy .in2-lead strong { color: var(--in2-ink); font-weight: 600; }
.in2-intro__media { position: relative; border-radius: 26px; overflow: hidden; background: #eef3f9; box-shadow: 0 40px 80px -36px rgba(9,29,62,.5); }
.in2-intro__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform 1.1s var(--in2-ease); }
.in2-intro__media:hover img { transform: scale(1.05); }
.in2-intro__media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(9,29,62,.06); pointer-events: none; }

/* ---------- Challenges ---------- */
.in2-chall { padding: 0 0 100px; background: #fff; }
.in2-chall__head { max-width: 640px; margin: 0 0 40px; }
.in2-chall__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.in2-chall__item {
  display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px; border-radius: 18px;
  background: #fff; border: 1px solid var(--in2-line);
  transition: transform .4s var(--in2-ease), box-shadow .4s var(--in2-ease), border-color .3s;
}
.in2-chall__grid .in2-chall__item:hover { transform: translateY(-4px); border-color: rgba(0,146,255,.3); box-shadow: 0 24px 46px -26px rgba(9,29,62,.35); }
.in2-chall__item i {
  flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
  color: #e5484d; background: #fdecee; border: 1px solid #f8d3d6;
}
.in2-chall__item i svg { width: 17px; height: 17px; }
.in2-chall__item p { margin: 0; font: 500 15px/1.6 var(--in2-body); color: var(--in2-ink); padding-top: 5px; }

/* ---------- How SmarDac helps: one row per module ---------- */
.in2-help { padding: 100px 0; background: radial-gradient(900px 400px at 50% 0%, #eef6ff, #f6f9fd 60%, #fff); }
.in2-help__head { max-width: 680px; margin: 0 auto 48px; text-align: center; }
.in2-help__head .in2-eyebrow::before { display: none; }
.in2-help__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
/* Odd card count: the lone last row stretches instead of hanging half-empty. */
.in2-help__grid .in2-help__row:last-child:nth-child(odd) { grid-column: 1 / -1; }
.in2-help__row {
  position: relative; display: flex; gap: 18px; align-items: flex-start; padding: 24px 26px; border-radius: 20px;
  background: #fff; border: 1px solid var(--in2-line); text-decoration: none; overflow: hidden; isolation: isolate;
  transition: transform .45s var(--in2-ease), box-shadow .45s var(--in2-ease), border-color .4s;
}
.in2-help__row::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: linear-gradient(135deg, var(--in2-p2) 0%, var(--in2-p) 45%, rgba(0,146,255,0) 75%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  opacity: 0; transition: opacity .45s ease;
}
.in2-help__grid .in2-help__row:hover { transform: translateY(-6px); border-color: transparent; text-decoration: none; box-shadow: 0 30px 60px -28px rgba(0, 146, 255, .45); }
.in2-help__grid .in2-help__row:hover::before { opacity: 1; }
.in2-help__row:focus-visible { outline: 2px solid var(--in2-p); outline-offset: 4px; }
.in2-help__icon { flex: none; width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center; overflow: hidden; transition: transform .45s var(--in2-ease); }
.in2-help__icon img { width: 100%; height: 100%; display: block; object-fit: contain; }
.in2-help__grid .in2-help__row:hover .in2-help__icon { transform: rotate(-6deg) scale(1.06); }
.in2-help__row h4 { font: 700 16.5px var(--in2-head); text-transform: none; color: var(--in2-ink); margin: 3px 0 6px; transition: color .35s; }
.in2-help__grid .in2-help__row:hover h4 { color: var(--in2-p); }
.in2-help__row p { font: 400 14.5px/1.65 var(--in2-body); color: var(--in2-muted); margin: 0; }

/* ---------- Related industries ---------- */
.in2-rel { padding: 0 0 100px; background: #fff; }
.in2-rel__head { margin: 0 0 32px; }
.in2-rel__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.in2-rel__card {
  position: relative; display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-radius: 20px;
  background: linear-gradient(180deg, #f6f9fd, #fff); border: 1px solid var(--in2-line); text-decoration: none;
  transition: transform .45s var(--in2-ease), box-shadow .45s var(--in2-ease), border-color .3s;
}
.in2-rel__grid .in2-rel__card:hover { transform: translateY(-5px); border-color: rgba(0,146,255,.3); box-shadow: 0 28px 54px -28px rgba(0,146,255,.45); text-decoration: none; }
.in2-rel__thumb { flex: none; width: 82px; height: 62px; border-radius: 14px; overflow: hidden; background: #eef3f9; }
.in2-rel__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.in2-rel__card strong { display: block; font: 700 17px var(--in2-head); color: var(--in2-ink); margin-bottom: 3px; transition: color .3s; }
.in2-rel__grid .in2-rel__card:hover strong { color: var(--in2-p); }
/* The arrow button is a span too, so exclude it: this rule is one class +
   one type (0,1,1) and would otherwise beat `.in2-rel__go` (0,1,0). */
.in2-rel__card span:not(.in2-rel__go) { display: block; font: 400 14px/1.5 var(--in2-body); color: var(--in2-muted); }
span.in2-rel__go {
  margin-left: auto; flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center;
  -ms-flex-pack: center; justify-content: center; line-height: 0;
  color: var(--in2-p); background: #eef6ff;
  transition: background .3s, color .3s, transform .35s var(--in2-ease);
}
.in2-rel__go svg { width: 16px; height: 16px; display: block; flex: none; }
.in2-rel__grid .in2-rel__card:hover .in2-rel__go { background: var(--in2-p); color: #fff; transform: translateX(3px); }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .in2-intro { padding: 80px 0 70px; }
  .in2-intro__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .in2-chall { padding-bottom: 80px; }
  .in2-chall__grid { grid-template-columns: minmax(0, 1fr); }
  .in2-help { padding: 80px 0; }
  .in2-help__grid { grid-template-columns: minmax(0, 1fr); }
  .in2-rel { padding-bottom: 80px; }
  .in2-rel__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .in2-subnav { margin-top: -26px; }
  .in2-subnav__bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; overflow: visible; }
  .in2-subnav a { height: 42px; padding: 0 8px; font-size: 12.5px; justify-content: center; text-align: center; }
  .in2-intro { padding: 64px 0 56px; }
  .in2-chall__item { padding: 18px 18px; }
  .in2-help { padding: 64px 0; }
  .in2-help__row { padding: 20px 18px; gap: 14px; }
  .in2-rel__card { padding: 16px 18px; gap: 14px; }
  .in2-rel__thumb { width: 64px; height: 50px; }
}
@media (hover: none) {
  .in2-help__row:hover, .in2-rel__card:hover, .in2-chall__item:hover { transform: none; }
  .in2-intro__media:hover img { transform: none; }
}

/* ---------- Relevant solutions: compact link row ---------- */
.in2-relevant { margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--in2-line); }
.in2-relevant__title { font: 600 12px/1 var(--in2-body); letter-spacing: .18em; text-transform: uppercase; color: var(--in2-muted); margin: 0 0 18px; }
.in2-relevant__list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.in2-relevant__list a {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 12px;
  font: 600 14px var(--in2-body); color: var(--in2-ink); text-decoration: none;
  background: #fff; border: 1px solid var(--in2-line);
  transition: background .3s, color .3s, border-color .3s, transform .35s var(--in2-ease);
}
.in2-relevant__list a svg { width: 15px; height: 15px; opacity: .55; transition: transform .35s var(--in2-ease), opacity .3s; }
.in2-relevant__list a:hover { background: var(--in2-p); border-color: var(--in2-p); color: #fff; text-decoration: none; transform: translateY(-2px); }
.in2-relevant__list a:hover svg { opacity: 1; transform: translateX(3px); }

@media (max-width: 767px) {
  .in2-relevant { margin-top: 32px; padding-top: 24px; }
  .in2-relevant__list a { height: 38px; padding: 0 13px; font-size: 13px; }
}
@media (hover: none) { .in2-relevant__list a:hover { transform: none; } }