/* Industries — page-specific styles (industries.html) */

/* "The Numbers Behind the Work" footprint band — ported verbatim (design,
   placement, fonts) from the service pages' own footprint band (see
   .svc-footprint-* in assets/svc-page.css / .csg-footprint-* in
   assets/cs-page.css for the source pattern). */
.ind-footprint-grid{
  display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;
}
.ind-footprint-heading{
  margin-bottom:20px;font-size:clamp(1.4rem,2.4vw,1.9rem);white-space:nowrap;
}
.ind-footprint-band .company-stats{
  background:transparent;padding:0;
  grid-template-columns:repeat(2,1fr);gap:28px 32px;
}
.ind-trust-plain{background:transparent;padding:0}
.ind-trust-plain .trust-label{
  font-size:.86rem;font-weight:500;letter-spacing:normal;text-transform:none;
  color:var(--mut-dark);display:block;margin-bottom:10px;
}
.ind-trust-plain .trust-label::before{content:none}
.ind-trust-plain .trust-names{
  flex-wrap:nowrap;white-space:nowrap;justify-content:flex-start;gap:0;
}
.ind-trust-plain .trust-names strong{font-size:.92rem;white-space:nowrap}
.ind-trust-plain .trust-names i{margin:0 9px}

@media(max-width:1240px){
  .ind-footprint-heading{white-space:normal}
  .ind-trust-plain .trust-names{flex-wrap:wrap;white-space:normal}
  .ind-trust-plain .trust-names strong{white-space:normal}
}
@media(max-width:820px){
  .ind-footprint-grid{grid-template-columns:1fr;gap:36px}
  .ind-footprint-band .company-stats{grid-template-columns:1fr 1fr}
}

/* Section headings that should sit on one line at desktop widths — the
   sitewide .section-head max-width (720px) is what wraps these onto two
   lines; widen just the heading here, keep the lead paragraph narrow. */
#retail-sectors .section-head,
#technology-ecosystem .section-head{max-width:960px}
#retail-sectors .section-head .lead{max-width:680px}
@media(min-width:1160px){
  #retail-sectors .section-head h2,
  #technology-ecosystem .section-head h2{white-space:nowrap}
}

/* Recent Work — reused wholesale from Retail Data & AI (same cases, same
   3-visible sliding-window carousel, same semi-transparent-photo treatment;
   see .rda-case-* in assets/rda-page.css for the source pattern). */
.ind-case-carousel{position:relative;margin-top:8px}
.ind-case-track{margin:0}
.ind-case-arrow{position:absolute;top:36%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);background:var(--paper);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;transition:background .15s ease,border-color .15s ease,transform .15s ease;color:var(--ink)}
.ind-case-arrow:hover{background:var(--bone);border-color:var(--ink)}
.ind-case-arrow-left{left:-23px}
.ind-case-arrow-right{right:-23px}
.ind-case-dots{display:flex;justify-content:center;gap:10px;margin-top:32px}
.ind-case-dot{width:9px;height:9px;border-radius:50%;background:var(--line);border:none;padding:0;cursor:pointer;transition:background .15s ease,transform .15s ease}
.ind-case-dot.active{background:var(--yellow);transform:scale(1.25)}
@media(max-width:900px){
  .ind-case-arrow{display:none}
}

.ind-case-link{color:inherit;text-decoration:none}
.ind-case-link .case-metric{
  position:relative;overflow:hidden;isolation:isolate;
  height:144px;display:flex;flex-direction:column;justify-content:center;
}
.ind-case-link .case-metric-visual{
  position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
  opacity:.22;
}
.ind-case-link .case-metric b{
  position:relative;z-index:1;line-height:1.28;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.ind-case-link .case-metric-industry{position:relative;z-index:1;margin-top:8px;display:block}

/* "Meet the people behind the work" — peek-carousel: 3 experts visible,
   arrows/dots cycle through the full roster (same interaction pattern as
   the Recent Work carousel above). */
.ind-expert-carousel{position:relative;margin-top:44px;display:flex;align-items:center;gap:0}
.ind-expert-track{flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch;min-width:0}
.ind-expert-card{border:1px solid var(--line);border-radius:var(--radius);padding:26px;background:var(--paper);display:flex;flex-direction:column;height:100%;min-width:0}
.ind-expert-photo{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius-sm);background:var(--bone);margin-bottom:18px}
.ind-expert-card h3{font-size:1.12rem;font-weight:750;margin:0 0 4px;letter-spacing:-.01em}
.ind-expert-role{font-size:.88rem;color:var(--mut);margin:0 0 14px}
.ind-expert-card .verify{display:inline-flex;white-space:normal;text-align:left;margin-bottom:12px}
.ind-expert-card a{margin-top:auto;font-size:.82rem;font-weight:700;text-decoration:underline;text-underline-offset:4px}

.ind-expert-arrow{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--line);background:var(--paper);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;transition:background .15s var(--ease),transform .15s var(--ease);z-index:2}
.ind-expert-arrow:hover{background:var(--bone);transform:translateY(-2px)}
.ind-expert-arrow.left{margin-right:-26px}
.ind-expert-arrow.right{margin-left:-26px}
.ind-expert-arrow svg{width:16px;height:16px;color:var(--ink)}
.ind-expert-dots{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:36px}
.ind-expert-dots button{width:9px;height:9px;border-radius:50%;background:var(--line);padding:0;border:0;cursor:pointer;transition:background .15s var(--ease),transform .15s var(--ease)}
.ind-expert-dots button.active{background:var(--yellow);transform:scale(1.25)}

@media(max-width:1024px){
  .ind-expert-track{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ind-expert-arrow.left{margin-right:0}
  .ind-expert-arrow.right{margin-left:0}
}
@media(max-width:640px){
  .ind-expert-track{grid-template-columns:1fr}
}

/* FAQ: white background so it contrasts with the bone-colored contact
   form section directly below it (both were the same --bone tone). */
#faq{background:var(--paper)}