/* ============================================================
   Industries — a research publication.
   Big serif, wide margins, cited figures, charts instead of cards.
   Deliberately unlike Solutions (case study) and Products (demo).
   ============================================================ */

:root{
  /* Chart hues, validated with the dataviz palette checker against the page
     surface: light pair ΔE 30.6 (protan), dark pair ΔE 25.3. Both sit inside
     their mode's OKLCH lightness band and clear 3:1 contrast. */
  --c-neg:#C2611F;
  --c-pos:#2F4FE0;
  --c-grid:#E0E4DF;
  --c-axis:#B6BDB6;
}
:root[data-theme="dark"]{
  --c-neg:#C87F42;
  --c-pos:#6E86EE;
  --c-grid:#282C28;
  --c-axis:#4A504A;
}

/* ---------- hero ---------- */
.ind-hero{padding-top:clamp(8rem,13vw,11.5rem);padding-bottom:clamp(2rem,4vw,3rem)}
.ind-hero-tag{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--s);font-size:.72rem;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)}
.ind-hero-tag .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
/* The insight headline is the page's thesis — it runs larger than a normal h1. */
.ind-hero h1{margin-top:1.2rem;max-width:15ch;font-size:clamp(2.7rem,6.4vw,5.1rem);line-height:1.02}
.ind-hero .lead{margin-top:1.5rem;max-width:46ch;font-size:clamp(1.08rem,1.6vw,1.3rem)}

/* ---------- outlook ---------- */
.ind-outlook{border-top:1px solid var(--line);padding-top:clamp(2.2rem,4.5vw,3.4rem);
  display:grid;grid-template-columns:13rem 1fr;gap:clamp(1.2rem,3vw,3rem)}
@media(max-width:800px){.ind-outlook{grid-template-columns:1fr;gap:1rem}}
.ind-label{font-family:var(--s);font-size:.72rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint);padding-top:.5rem}
.ind-outlook-body{max-width:60ch}
.ind-outlook-body p{font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--soft);line-height:1.68}
.ind-outlook-body p+p{margin-top:1.1rem}
.ind-outlook-body b{color:var(--ink);font-weight:600}

/* ---------- the oversized statistic ---------- */
.figure{border-top:1px solid var(--line);margin-top:clamp(2.5rem,5vw,4rem);
  padding-top:clamp(2.2rem,4.5vw,3.4rem)}
.figure-lead{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:end}
@media(max-width:840px){.figure-lead{grid-template-columns:1fr;gap:1.5rem}}
.figure-num{font-family:var(--d);font-weight:440;line-height:.86;letter-spacing:-.02em;
  font-size:clamp(4.5rem,15vw,11rem);color:var(--ink);font-variant-numeric:tabular-nums}
.figure-num .u{font-size:.42em;color:var(--soft);letter-spacing:0}
.figure-num.neg{color:var(--c-neg)}
.figure-say{font-size:clamp(1.05rem,1.6vw,1.28rem);color:var(--ink);line-height:1.5;max-width:26ch;
  font-family:var(--d);font-weight:440}
.figure-src{margin-top:1.1rem;font-family:var(--s);font-size:.78rem;color:var(--faint);line-height:1.5}

/* ---------- charts ---------- */
.chart{margin-top:clamp(1.8rem,3.5vw,2.6rem);overflow-x:auto}
.chart svg{display:block;width:100%;height:auto;min-width:340px}
.chart-title{font-family:var(--s);font-size:.88rem;font-weight:600;color:var(--ink)}
.chart-sub{margin-top:.3rem;font-family:var(--s);font-size:.8rem;color:var(--soft);max-width:56ch;line-height:1.5}
.c-label{font-family:var(--s);font-size:13px;font-weight:500;fill:var(--soft)}
.c-value{font-family:var(--s);font-size:15px;font-weight:700;fill:var(--ink)}
.c-tick{font-family:var(--s);font-size:11px;fill:var(--faint)}
.c-grid{stroke:var(--c-grid);stroke-width:1}
.c-axis{stroke:var(--c-axis);stroke-width:1}
/* Bars grow from their baseline once the chart scrolls into view. scaleX on a
   group is transform-only, so it can't reflow, and the resting state is the
   finished chart — if the observer never fires the figures still read. */
.c-grow{transform-origin:var(--ox) center;transform:scaleX(1);
  transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.rv:not(.in) .c-grow{transform:scaleX(.001)}
@media(prefers-reduced-motion:reduce){.rv:not(.in) .c-grow{transform:none}}

/* ---------- challenges ---------- */
.probs{counter-reset:prob;margin-top:clamp(2rem,4vw,3rem)}
.prob{border-top:1px solid var(--line);padding-block:clamp(2.4rem,5vw,4rem);
  display:grid;grid-template-columns:5.5rem 1fr;gap:clamp(1rem,3vw,2.5rem)}
@media(max-width:760px){.prob{grid-template-columns:1fr;gap:1rem}}
.prob-num{counter-increment:prob;font-family:var(--s);font-size:.8rem;font-weight:700;
  letter-spacing:.1em;color:var(--faint);padding-top:.7rem}
.prob-num::before{content:counter(prob,decimal-leading-zero)}
.prob-body{max-width:60ch}
.prob h3{font-family:var(--d);font-weight:500;font-size:clamp(1.55rem,3.2vw,2.25rem);
  line-height:1.08;max-width:20ch;color:var(--ink)}
.prob-lead{margin-top:1.05rem;font-size:clamp(1rem,1.4vw,1.12rem);color:var(--soft);line-height:1.68}
.prob-body p+p{margin-top:1rem}

/* ---------- how leaders are responding ---------- */
.leaders{background:var(--mint);border-radius:var(--r-lg);
  padding:clamp(2rem,4.5vw,3.6rem) clamp(1.4rem,4vw,3.4rem);margin-top:clamp(2.5rem,5vw,4rem)}
.leaders h2{max-width:19ch;margin-top:.8rem}
.leaders-body{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);
  margin-top:clamp(1.6rem,3vw,2.4rem);align-items:start}
@media(max-width:840px){.leaders-body{grid-template-columns:1fr}}
.leaders-body p{font-size:1.02rem;color:var(--soft);line-height:1.68;max-width:52ch}
.leaders-body p+p{margin-top:1rem}
.leaders .chart-title,.leaders .c-value{color:var(--ink)}
[data-theme="dark"] .leaders{background:#131A16}

/* ---------- Zero One Alpha point of view ---------- */
.pov{background:var(--pine);color:#fff;border-radius:var(--r-lg);position:relative;overflow:hidden;
  padding:clamp(2.2rem,5vw,4rem) clamp(1.4rem,4vw,3.4rem);margin-top:clamp(2.5rem,5vw,4rem)}
.pov::before{content:'';position:absolute;width:460px;height:460px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.13);top:-250px;right:-170px;pointer-events:none}
.pov>*{position:relative}
.pov .ind-label{color:var(--peach);padding-top:0}
.pov h2{color:#fff;margin-top:.9rem;max-width:17ch}
.pov-body{margin-top:1.4rem;max-width:56ch}
.pov-body p{font-size:clamp(1.04rem,1.5vw,1.18rem);color:rgba(255,255,255,.84);line-height:1.7}
.pov-body p+p{margin-top:1rem}
.pov-body b{color:#fff;font-weight:600}
[data-theme="dark"] .pov{background:#0B2A24}

/* ---------- where we help today ---------- */
.helps{margin-top:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--line);
  padding-top:clamp(2rem,4vw,3rem)}
.helps-lead{max-width:58ch;font-size:1.05rem;color:var(--soft);line-height:1.68;margin-top:1rem}
.help-list{list-style:none;margin-top:clamp(1.6rem,3vw,2.4rem)}
.help{display:grid;grid-template-columns:1fr auto;gap:1rem 2rem;align-items:baseline;
  padding:clamp(1.1rem,2.2vw,1.5rem) 0;border-top:1px solid var(--line-soft,var(--line));
  transition:padding-left .3s ease}
.help:first-child{border-top:0}
a.help:hover{padding-left:.5rem}
.help-name{font-family:var(--d);font-weight:500;font-size:clamp(1.2rem,2.2vw,1.5rem);color:var(--ink)}
.help-what{grid-column:1;font-family:var(--s);font-size:.96rem;color:var(--soft);line-height:1.6;max-width:56ch}
.help-go{font-family:var(--s);font-size:.84rem;font-weight:600;color:var(--accent-text);white-space:nowrap}
a.help:hover .help-go{text-decoration:underline;text-underline-offset:3px}

/* ---------- close ---------- */
.ind-close{border-top:1px solid var(--line);padding-top:clamp(2.5rem,5vw,3.5rem)}
.ind-close h2{max-width:18ch}
.ind-close-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:clamp(1.6rem,3vw,2.2rem)}
@media(max-width:760px){.ind-close-grid{grid-template-columns:1fr}}
.ind-close-grid .xlink{margin-top:0}

/* ---------- industries index ---------- */
.ind-index{margin-top:clamp(2rem,4vw,3rem)}
.ind-card{display:grid;grid-template-columns:1fr .8fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
  border-top:1px solid var(--line);padding-block:clamp(2.6rem,5.5vw,4.5rem)}
.ind-card:last-child{border-bottom:1px solid var(--line)}
.ind-card.flip .ind-card-media{order:-1}
@media(max-width:860px){.ind-card{grid-template-columns:1fr}.ind-card.flip .ind-card-media{order:0}}
.ind-card-media{border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/3;background:var(--line)}
.ind-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.ind-card:hover .ind-card-media img{transform:scale(1.04)}
.ind-card h2{margin-top:.9rem;font-size:clamp(1.9rem,4vw,2.8rem);max-width:20ch}
.ind-card-problem{margin-top:1rem;font-size:1.05rem;color:var(--soft);line-height:1.65;max-width:46ch}
.ind-card-stat{margin-top:1.2rem;display:flex;align-items:baseline;gap:.6rem}
.ind-card-stat b{font-family:var(--d);font-weight:500;font-size:clamp(1.8rem,3.4vw,2.4rem);
  line-height:1;color:var(--c-pos);font-variant-numeric:tabular-nums}
.ind-card-stat span{font-family:var(--s);font-size:.84rem;color:var(--soft);line-height:1.4;max-width:24ch}
.ind-card-cta{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.4rem;font-family:var(--s);
  font-size:.94rem;font-weight:600;color:var(--accent-text)}
.ind-card-cta .a{transition:transform .25s}
.ind-card:hover .ind-card-cta .a{transform:translateX(5px)}
.ind-card.no-media{grid-template-columns:1fr}
.ind-card.no-media .ind-card-copy{display:grid;grid-template-columns:1fr 1fr;
  column-gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.ind-card.no-media .ind-hero-tag{grid-column:1/-1}
.ind-card.no-media h2{grid-column:1;grid-row:2;max-width:14ch}
.ind-card.no-media .ind-card-problem{grid-column:2;grid-row:2;margin-top:.6rem}
.ind-card.no-media .ind-card-stat{grid-column:2;grid-row:3;margin-top:1rem}
.ind-card.no-media .ind-card-cta{grid-column:2;grid-row:4;margin-top:1rem}
@media(max-width:860px){
  .ind-card.no-media .ind-card-copy{grid-template-columns:1fr}
  .ind-card.no-media h2,.ind-card.no-media .ind-card-problem,
  .ind-card.no-media .ind-card-stat,.ind-card.no-media .ind-card-cta{grid-column:1;grid-row:auto}
  .ind-card.no-media h2{max-width:20ch}
}