/* Industries page. Same tokens, same type, same frame and band as the homepage.
   A centred grid of framed photos with a name band under each. No other copy. */

.ipage{
  min-height:100dvh;
  padding:clamp(88px,14dvh,132px) clamp(20px,5vw,64px) clamp(40px,7dvh,88px);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:linear-gradient(180deg,var(--black) 0%,#04101D 30%,#051723 72%,#061423 100%);
}
.ipage__h{font-size:clamp(38px,6.4vw,92px);color:var(--paper)}

.igrid{
  margin-top:clamp(22px,4dvh,48px);
  width:100%;max-width:1180px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  align-items:start;
}
/* r8: every card takes its own photograph's ratio, so nothing is cropped.
   That means the name bands no longer sit on one baseline across a row. */
.icard{--bandh:46px;height:auto}
.icard--pair{grid-column:span 2}
.icard__ph{
  position:relative;display:block;width:100%;
  aspect-ratio:var(--ratio,16/9);
  background-size:contain;background-repeat:no-repeat;background-position:center;
}
.icard__pair{display:grid;grid-template-columns:1fr 1fr;gap:1px}
.icard .band{position:relative;height:var(--bandh)}

.ipage__cta{margin-top:clamp(26px,4.4dvh,48px)}

@media (max-width:900px){
  .igrid{grid-template-columns:repeat(2,1fr)}
  .icard--pair{grid-column:span 2}
}
@media (max-width:560px){
  .igrid{grid-template-columns:1fr}
  .icard--pair{grid-column:span 1}
  .icard__pair{grid-template-columns:1fr}
}