/* Industries page only. Shared rules live in css/style.css. */

/* Strip caption keeps the page gutter (style.css resets its padding) */
.strip figcaption.wrap{padding-left:var(--gutter);padding-right:var(--gutter)}

/* Six industries: full-width ruled rows, photo 3:2 at 30% left, text right */
.ind{list-style:none;border-top:1px solid var(--rule)}
.ind>li{display:grid;grid-template-columns:3fr 7fr;gap:64px;padding:48px 0;border-bottom:1px solid var(--rule);align-items:start}
.ind img{width:100%;aspect-ratio:3/2;object-fit:cover}
.ind h3{font-size:30px;letter-spacing:-.025em;line-height:1.1;max-width:18ch}
.ind .desc{color:var(--dim);font-size:19px;margin-top:16px;max-width:56ch}
.ind .bullets{margin-top:28px;max-width:64ch;list-style:none}
.ind .bullets li{color:var(--text)}

/* Where we have done it: five sector cells, client names under each */
.sectors{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--rule)}
.sectors>div{padding:28px 24px 32px 0}
.sectors>div+div{border-left:1px solid var(--rule);padding-left:24px}
.sectors dt{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.sectors dd{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-top:12px}
.sectors dd+dd{margin-top:6px}

@media (max-width:1024px){
  .ind>li{grid-template-columns:2fr 3fr;gap:40px}
  .sectors{grid-template-columns:repeat(2,1fr)}
  .sectors>div{border-top:1px solid var(--rule);padding-left:0}
  .sectors>div+div{border-left:0}
  .sectors>div:nth-child(even){border-left:1px solid var(--rule);padding-left:24px}
  .sectors>div:first-child,.sectors>div:nth-child(2){border-top:0}
}
@media (max-width:767px){
  .ind>li{grid-template-columns:1fr;gap:24px;padding:36px 0}
  .ind h3{font-size:26px}
  .ind .desc{font-size:17px}
  .sectors{grid-template-columns:1fr}
  .sectors>div:nth-child(n){border-left:0;padding:24px 0;border-top:1px solid var(--rule)}
  .sectors>div:first-child{border-top:0}
  .sectors dd{font-size:22px}
}

/* Hero band: bring the strip in a little sooner than the shared band padding */
.hero-band{padding-bottom:60px}
@media (max-width:767px){.hero-band{padding-bottom:40px}}