/* ==========================================================================
   SAN Media Solution — Section 4b · Our Approach
   Built to `Section 4 reference 2.PNG`. `--g` is one pixel of that 1536 × 1024
   artboard, fitted to the viewport under the header, because the stage pins
   while the reader scrolls and the story (grow.js) follows their scroll.
   ========================================================================== */

.grow {
  --g: min(calc(100vw / 1536), calc((100vh - 94 * var(--u)) / 1024));
  --span: 240vh;                          /* how far the reader scrolls through the story */
  position: relative;
  container-type: inline-size;
  height: calc(100vh + var(--span));
  background: #fcfcfc;
  color: #111;
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
@supports (width: 1cqw) {
  .grow { --g: min(calc(1cqw / 15.36), calc((100vh - 94 * var(--u)) / 1024)); }
}
.grow__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: calc(94 * var(--u));
  overflow: clip;
}
.grow__art {
  position: relative;
  width: calc(1536 * var(--g));
  height: calc(1024 * var(--g));
  flex: none;
}

/* ── the ground ────────────────────────────────────────────────────────── */
.grow__glow, .grow__swoosh { position: absolute; display: block; height: auto; pointer-events: none; }
.grow__glow {
  left: calc(1352 * var(--g)); top: 0; width: calc(184 * var(--g));
  -webkit-mask-image: linear-gradient(to right, transparent, #000 30%), linear-gradient(to top, transparent, #000 35%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 30%), linear-gradient(to top, transparent, #000 35%);
  mask-composite: intersect;
}
.grow__swoosh { left: 0; top: calc(240 * var(--g)); width: calc(92 * var(--g)); }

/* ── the copy, top left ────────────────────────────────────────────────── */
.grow__copy { position: absolute; left: calc(84 * var(--g)); top: calc(89 * var(--g)); width: calc(720 * var(--g)); z-index: 3; }
.grow__kicker {
  display: flex; align-items: center; gap: calc(17 * var(--g));
  margin: 0;
  font-size: max(calc(11.5 * var(--g)), 9px); font-weight: 500; letter-spacing: .38em; text-transform: uppercase; line-height: 1;
  color: #4a4a4e;
}
.grow__kicker i { display: block; width: calc(43 * var(--g)); height: calc(2 * var(--g)); background: var(--lime); }
.grow__title {
  margin: calc(25 * var(--g)) 0 0;
  font-size: calc(69 * var(--g)); font-weight: 900; line-height: calc(59 * var(--g)); letter-spacing: -.05em; text-transform: uppercase;
  color: #0a0a0a;
}
.grow__title span { display: block; white-space: nowrap; }
.grow__title em { font-style: normal; color: var(--lime); }
.grow__lede {
  margin: calc(12 * var(--g)) 0 0;
  font-size: calc(18.5 * var(--g)); font-weight: 400; line-height: calc(25 * var(--g)); letter-spacing: -.012em;
  color: #4a4a4e; white-space: nowrap;
}

/* ── the mountain, the path, the man ───────────────────────────────────── */
.grow__mtn {
  position: absolute;
  left: calc(300 * var(--g)); top: calc(645 * var(--g));
  width: calc(1020 * var(--g)); height: calc(379 * var(--g));
  margin: 0; z-index: 1;
}
.grow__rock {
  display: block; width: 100%; height: 100%;
  /* the lifted photograph's top-right corner is bare paper under the statistics: let it go */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0 66%, #000 74%), linear-gradient(to left, transparent 0 26%, #000 32%),
    linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 9%);
  -webkit-mask-composite: source-over, source-in, source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0 66%, #000 74%), linear-gradient(to left, transparent 0 26%, #000 32%),
    linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 9%);
  mask-composite: add, intersect, intersect;
}
.grow__path { position: absolute; left: calc(380 * var(--g)); top: calc(121 * var(--g)); width: calc(364 * var(--g)); height: calc(240 * var(--g)); overflow: visible; }
.grow__man { position: absolute; left: calc(424 * var(--g)); top: calc(3 * var(--g)); width: calc(86 * var(--g)); height: auto; transform-origin: 50% 100%; }

/* ── the growth curve and its six stages ───────────────────────────────── */
.grow__curve { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.grow__stages { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; z-index: 3; }
.gstage { position: absolute; left: calc(var(--x) * var(--g)); top: calc(var(--y) * var(--g)); width: calc(210 * var(--g)); }
.gstage__head { display: block; }
.gstage__head b { display: block; font-size: max(calc(12 * var(--g)), 10px); font-weight: 500; letter-spacing: .26em; line-height: 1; color: #9a9a9e; }
.gstage__head strong {
  display: block; margin-top: calc(3 * var(--g));
  font-size: calc(14.8 * var(--g)); font-weight: 800; letter-spacing: .04em; line-height: calc(19 * var(--g)); text-transform: uppercase;
  color: #0e0e10; white-space: nowrap;
}
.gstage--last .gstage__head strong { color: #86d80f; }
.gstage__head i { display: block; width: calc(21 * var(--g)); height: calc(2 * var(--g)); margin-top: calc(7 * var(--g)); background: var(--lime); }
.gstage__dot {
  position: absolute;
  left: calc((var(--cx) - var(--x) - 37) * var(--g)); top: calc((var(--cy) - var(--y) - 37) * var(--g));
  width: calc(74 * var(--g)); height: calc(74 * var(--g));
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 calc(1.5 * var(--g)) #cfe8b0;
  display: grid; place-items: center;
  color: #0a0a0a;
}
.gstage__dot svg { width: calc(42 * var(--g)); height: auto; fill: currentColor; }
.gstage--last .gstage__dot {
  width: calc(66 * var(--g)); height: calc(66 * var(--g));
  left: calc((var(--cx) - var(--x) - 33) * var(--g)); top: calc((var(--cy) - var(--y) - 33) * var(--g));
  background: #e9fbd2;
  box-shadow: 0 0 0 calc(2.5 * var(--g)) #8fe03a, 0 0 calc(26 * var(--g)) rgba(152, 240, 20, .75);
}
.gstage__d {
  position: absolute;
  left: 0; top: calc((var(--cy) - var(--y) + 47) * var(--g));
  margin: 0; width: calc(230 * var(--g));
  font-size: calc(14.5 * var(--g)); font-weight: 400; line-height: calc(18 * var(--g)); letter-spacing: -.012em;
  color: #4a4a4e; white-space: nowrap;
}

/* ── the copy, top right ───────────────────────────────────────────────── */
.grow__side { position: absolute; left: calc(1174 * var(--g)); top: calc(100 * var(--g)); width: calc(320 * var(--g)); z-index: 3; }
.grow__values {
  list-style: none; margin: 0; padding: 0;
  font-size: max(calc(11.5 * var(--g)), 9px); font-weight: 500; letter-spacing: .34em; text-transform: uppercase; line-height: calc(20 * var(--g));
  color: #4a4a4e;
}
.grow__values li:last-child { display: flex; align-items: center; gap: calc(14 * var(--g)); }
.grow__values i { display: block; width: calc(35 * var(--g)); height: calc(2 * var(--g)); background: var(--lime); }
.grow__why {
  margin: calc(20 * var(--g)) 0 0;
  font-size: calc(17.8 * var(--g)); font-weight: 400; line-height: calc(23 * var(--g)); letter-spacing: -.015em;
  color: #4a4a4e; white-space: nowrap;
}
.pill--grow {
  --u: var(--g);
  margin-top: calc(16 * var(--g)); margin-left: calc(-4 * var(--g));
  height: calc(46 * var(--g)); padding: 0 calc(20 * var(--g));
  font-size: calc(17 * var(--g)); font-weight: 700; letter-spacing: -.01em; text-decoration: none;
}
.pill--grow svg { width: calc(20 * var(--g)); stroke: var(--lime); }

/* ── bigger tomorrows and the statistics ───────────────────────────────── */
.grow__kpi { position: absolute; left: calc(1058 * var(--g)); top: calc(702 * var(--g)); width: calc(440 * var(--g)); z-index: 3; }
.grow__kpi-rule { position: absolute; left: 0; top: 0; width: calc(2 * var(--g)); height: calc(106 * var(--g)); background: var(--lime); }
.grow__same {
  margin: calc(13 * var(--g)) 0 0 calc(35 * var(--g));
  font-size: max(calc(11.5 * var(--g)), 9px); font-weight: 500; letter-spacing: .46em; text-transform: uppercase; line-height: 1;
  color: #4a4a4e; white-space: nowrap;
}
.grow__bigger {
  margin: calc(11 * var(--g)) 0 0 calc(35 * var(--g));
  font-size: calc(37 * var(--g)); font-weight: 900; line-height: calc(33 * var(--g)); letter-spacing: -.04em; text-transform: uppercase;
  color: #0a0a0a;
}
.grow__bigger span, .grow__bigger em { display: block; font-style: normal; }
.grow__bigger em { color: var(--lime); }
.grow__stats { display: flex; margin: calc(34 * var(--g)) 0 0 calc(35 * var(--g)); padding: 0; list-style: none; }
.grow__stats li { position: relative; padding-right: calc(20 * var(--g)); }
.grow__stats li:nth-child(1) { width: calc(83 * var(--g)); }
.grow__stats li:nth-child(2) { width: calc(107 * var(--g)); }
.grow__stats li:nth-child(3) { width: calc(90 * var(--g)); }
.grow__stats li + li { padding-left: calc(22 * var(--g)); }
.grow__stats li + li::before { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: calc(62 * var(--g)); background: #d6e6c4; }
.grow__stats b { display: block; font-size: calc(24 * var(--g)); font-weight: 800; letter-spacing: -.02em; line-height: calc(24 * var(--g)); color: #0c0c0c; white-space: nowrap; }
.grow__stats em { display: block; margin-top: calc(6 * var(--g)); font-size: max(calc(14 * var(--g)), 10px); font-style: normal; font-weight: 400; line-height: calc(20 * var(--g)); letter-spacing: -.012em; color: #6a6a6e; white-space: nowrap; }

/* ── the corner ───────────────────────────────────────────────────────── */
.grow__ink { position: absolute; left: calc(26 * var(--g)); top: calc(752 * var(--g)); width: calc(230 * var(--g)); height: auto; z-index: 3; }

/* ── while the story runs, grow.js writes the moving parts ─────────────── */
.grow.is-live [data-in], .grow.is-live [data-mtn], .grow.is-live [data-man],
.grow.is-live [data-pop], .grow.is-live [data-stat], .grow.is-live [data-late] { will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
  .grow { height: auto; }
  .grow__pin { position: static; height: auto; padding-top: 0; }
  .grow [data-in], .grow [data-mtn], .grow [data-man], .grow [data-pop], .grow [data-stat], .grow [data-late] { transform: none !important; opacity: 1 !important; }
  .grow [data-draw], .grow [data-curve] { stroke-dashoffset: 0 !important; }
}

/* ══ narrow screens: the story is told down the page instead ═══════════ */
@media (max-width: 1080px) {
  .grow { --pad: clamp(20px, 4vw, 48px); height: auto; padding-bottom: clamp(30px, 5vh, 56px); }
  .grow__pin { position: static; height: auto; display: block; padding-top: 0; overflow: visible; }
  .grow__art { width: auto; height: auto; }
  .grow__glow { left: auto; right: 0; width: clamp(180px, 30vw, 256px); }
  .grow__swoosh { display: none; }
  .grow__copy { position: static; width: auto; padding: clamp(30px, 6vh, 64px) var(--pad) 0; }
  .grow__kicker { font-size: clamp(10px, 1.3vw, 12px); }
  .grow__title { margin-top: 16px; font-size: clamp(38px, 8vw, 80px); line-height: .92; }
  .grow__title span { white-space: normal; }
  .grow__lede { margin-top: 16px; font-size: clamp(15px, 2.1vw, 19px); line-height: 1.34; white-space: normal; max-width: 40ch; }
  .grow__lede br { display: none; }

  .grow__mtn { position: relative; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: 1020 / 379; margin-top: clamp(24px, 4vh, 44px); }
  .grow__rock { position: absolute; inset: 0; }
  .grow__path { left: 37.25%; top: 31.9%; width: 35.7%; height: 63.3%; }
  .grow__man { left: 41.57%; top: .8%; width: 8.43%; }

  .grow__curve { display: none; }
  /* the six stages become a timeline with one line drawn down it */
  .grow__stages {
    position: relative; inset: auto;
    display: grid; gap: clamp(18px, 3vh, 28px);
    margin: clamp(28px, 5vh, 52px) var(--pad) 0; padding-left: 92px;
  }
  .grow__stages::before {
    content: ""; position: absolute; left: 36px; top: 20px; bottom: 20px; width: 2px;
    background: #9ad83c; transform-origin: 50% 0; transform: scaleY(var(--line, 1));
  }
  .gstage { position: relative; left: auto; top: auto; width: auto; min-height: 74px; }
  .gstage__dot { position: absolute; left: -92px; top: 0; width: 74px; height: 74px; box-shadow: 0 0 0 1.5px #cfe8b0; }
  .gstage--last .gstage__dot { left: -88px; top: 4px; width: 66px; height: 66px; box-shadow: 0 0 0 2.5px #8fe03a, 0 0 22px rgba(152, 240, 20, .7); }
  .gstage__dot svg { width: 32px; }
  .gstage__head b { font-size: 11px; }
  .gstage__head strong { margin-top: 5px; font-size: clamp(15px, 2vw, 17px); line-height: 1.2; }
  .gstage__head i { width: 21px; height: 2px; margin-top: 6px; }
  .gstage__d { position: static; margin-top: 8px; width: auto; max-width: 44ch; font-size: clamp(13.5px, 1.8vw, 15px); line-height: 1.3; white-space: normal; }
  .gstage__d br { display: none; }

  .grow__side { position: static; width: auto; padding: clamp(30px, 5vh, 56px) var(--pad) 0; }
  .grow__values { display: flex; flex-wrap: wrap; gap: 6px clamp(14px, 2.4vw, 28px); font-size: clamp(10px, 1.3vw, 11.5px); line-height: 1.6; }
  .grow__values li:last-child { gap: 12px; }
  .grow__values i { width: 35px; height: 2px; }
  .grow__why { margin-top: 18px; font-size: clamp(15px, 2.1vw, 18.5px); line-height: 1.34; white-space: normal; max-width: 46ch; }
  .grow__why br { display: none; }
  .pill--grow { margin: 20px 0 0; height: clamp(44px, 5.4vw, 50px); padding: 0 clamp(22px, 3vw, 28px); gap: clamp(9px, 1.2vw, 13px); font-size: clamp(14px, 1.8vw, 17px); box-shadow: 0 0 0 1.5px var(--lime), 0 0 14px 1px rgba(152, 240, 20, .55), 0 4px 16px rgba(0, 0, 0, .16); }
  .pill--grow svg { width: clamp(16px, 2vw, 20px); }

  .grow__kpi { position: relative; left: auto; top: auto; width: auto; margin: clamp(34px, 6vh, 60px) var(--pad) 0; padding-left: 24px; }
  .grow__kpi-rule { width: 2px; height: 96px; }
  .grow__same { margin: 8px 0 0; font-size: clamp(10px, 1.3vw, 11.5px); }
  .grow__bigger { margin: 10px 0 0; font-size: clamp(28px, 4.6vw, 40px); line-height: .95; }
  .grow__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px clamp(10px, 2vw, 24px); margin: 26px 0 0; }
  .grow__stats li { width: auto !important; padding: 0 !important; }
  .grow__stats li + li::before { display: none; }
  .grow__stats b { font-size: clamp(20px, 3vw, 24px); line-height: 1.1; }
  .grow__stats em { margin-top: 6px; font-size: clamp(12px, 1.6vw, 14px); line-height: 1.3; }

  .grow__ink { position: static; width: clamp(170px, 26vw, 230px); margin: clamp(26px, 4vh, 40px) 0 0 calc(var(--pad) - 10px); }
}
@media (max-width: 720px) {
  .grow__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grow__stages { padding-left: 76px; }
  .grow__stages::before { left: 28px; }
  .gstage__dot { left: -76px; width: 58px; height: 58px; }
  .gstage--last .gstage__dot { left: -72px; width: 52px; height: 52px; }
  .gstage__dot svg { width: 26px; }
}