@cyber-dash-tech/revela 0.3.1 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,2284 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Summit — Climate Report 2026</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
10
+ <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
11
+ <style>
12
+ :root {
13
+ --bg-frame: #050505;
14
+ --bg-page: #f7f4ee;
15
+ --bg-page-alt: #efe9df;
16
+ --text-primary: #171411;
17
+ --text-secondary: #5e554c;
18
+ --text-muted: #8a7f73;
19
+ --line: rgba(23, 20, 17, 0.14);
20
+ --line-strong: rgba(23, 20, 17, 0.28);
21
+ --accent-earth: #8d6a49;
22
+ --accent-olive: #6f7562;
23
+ --accent-stone: #b9afa1;
24
+ --accent-gold: #c9992a;
25
+ --accent-danger: #b94a3c;
26
+ --shadow-soft: rgba(0, 0, 0, 0.18);
27
+ }
28
+
29
+ * { box-sizing: border-box; margin: 0; padding: 0; }
30
+
31
+ html {
32
+ scroll-snap-type: y mandatory;
33
+ overflow-y: scroll;
34
+ height: 100%;
35
+ }
36
+
37
+ body {
38
+ background: var(--bg-frame);
39
+ color: var(--text-primary);
40
+ font-family: 'Inter', ui-sans-serif, sans-serif;
41
+ -webkit-font-smoothing: antialiased;
42
+ height: 100%;
43
+ }
44
+
45
+ .slide {
46
+ min-height: 100dvh;
47
+ scroll-snap-align: start;
48
+ display: flex;
49
+ align-items: center;
50
+ justify-content: center;
51
+ overflow: hidden;
52
+ background: var(--bg-frame);
53
+ }
54
+
55
+ .slide-canvas {
56
+ width: 1920px;
57
+ height: 1080px;
58
+ flex-shrink: 0;
59
+ transform-origin: center center;
60
+ position: relative;
61
+ overflow: hidden;
62
+ padding: 72px 80px;
63
+ }
64
+
65
+ .page {
66
+ position: relative;
67
+ width: 100%;
68
+ height: 100%;
69
+ background: var(--bg-page);
70
+ color: var(--text-primary);
71
+ padding: 56px 64px 64px;
72
+ box-shadow: 0 24px 80px var(--shadow-soft);
73
+ display: flex;
74
+ flex-direction: column;
75
+ }
76
+
77
+ .page.alt {
78
+ background: var(--bg-page-alt);
79
+ }
80
+
81
+ .eyebrow,
82
+ .caption,
83
+ .meta-label {
84
+ font-size: 12px;
85
+ line-height: 1.4;
86
+ letter-spacing: 0.18em;
87
+ text-transform: uppercase;
88
+ color: var(--text-muted);
89
+ }
90
+
91
+ h1, h2, h3, h4 {
92
+ font-family: 'IBM Plex Sans Condensed', 'Inter', ui-sans-serif, sans-serif;
93
+ font-weight: 600;
94
+ letter-spacing: -0.02em;
95
+ color: var(--text-primary);
96
+ }
97
+
98
+ h1 { font-size: 88px; line-height: 0.96; }
99
+ h2 { font-size: 34px; line-height: 1.08; }
100
+ h3 { font-size: 24px; line-height: 1.14; }
101
+
102
+ p, li {
103
+ font-size: 14px;
104
+ line-height: 1.6;
105
+ color: var(--text-secondary);
106
+ }
107
+
108
+ .rule {
109
+ width: 100%;
110
+ height: 1px;
111
+ background: var(--line);
112
+ }
113
+
114
+ .rule.strong {
115
+ background: var(--line-strong);
116
+ }
117
+
118
+ .chevron-divider {
119
+ display: inline-flex;
120
+ align-items: center;
121
+ gap: 10px;
122
+ font-size: 11px;
123
+ letter-spacing: 0.18em;
124
+ text-transform: uppercase;
125
+ color: var(--text-muted);
126
+ }
127
+
128
+ .chevron-divider::before,
129
+ .chevron-divider::after {
130
+ content: '';
131
+ width: 18px;
132
+ height: 1px;
133
+ background: var(--line-strong);
134
+ }
135
+
136
+ .media-frame {
137
+ position: relative;
138
+ overflow: hidden;
139
+ }
140
+
141
+ .media-frame img {
142
+ width: 100%;
143
+ height: 100%;
144
+ display: block;
145
+ object-fit: cover;
146
+ }
147
+
148
+ .media-caption {
149
+ margin-top: 12px;
150
+ font-size: 12px;
151
+ line-height: 1.5;
152
+ letter-spacing: 0.14em;
153
+ text-transform: uppercase;
154
+ color: var(--text-muted);
155
+ }
156
+
157
+ .editorial-list {
158
+ list-style: none;
159
+ display: flex;
160
+ flex-direction: column;
161
+ gap: 14px;
162
+ }
163
+
164
+ .editorial-list li {
165
+ position: relative;
166
+ padding-left: 20px;
167
+ font-size: 14px;
168
+ line-height: 1.58;
169
+ color: var(--text-secondary);
170
+ }
171
+
172
+ .editorial-list li::before {
173
+ content: '';
174
+ position: absolute;
175
+ left: 0;
176
+ top: 8px;
177
+ width: 6px;
178
+ height: 6px;
179
+ background: var(--accent-earth);
180
+ }
181
+
182
+ .reveal {
183
+ opacity: 0;
184
+ transform: translateY(18px);
185
+ transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
186
+ transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
187
+ }
188
+
189
+ .reveal.visible {
190
+ opacity: 1;
191
+ transform: translateY(0);
192
+ }
193
+
194
+ /* ── full-bleed-media ─────────────────────────────────── */
195
+ .hero-field {
196
+ height: 100%;
197
+ position: relative;
198
+ }
199
+
200
+ .full-bleed-media {
201
+ width: 100%;
202
+ height: 100%;
203
+ position: relative;
204
+ overflow: hidden;
205
+ }
206
+
207
+ .full-bleed-media img {
208
+ width: 100%;
209
+ height: 100%;
210
+ display: block;
211
+ object-fit: cover;
212
+ }
213
+
214
+ /* ── report-text-panel ───────────────────────────────── */
215
+ .report-text-panel {
216
+ height: 100%;
217
+ padding: 56px 48px 34px;
218
+ display: flex;
219
+ flex-direction: column;
220
+ justify-content: space-between;
221
+ }
222
+
223
+ .report-text-panel--dark {
224
+ background: #2c2828;
225
+ color: #f3eee6;
226
+ }
227
+
228
+ .report-text-panel--light {
229
+ background: var(--bg-page-alt);
230
+ color: var(--text-primary);
231
+ }
232
+
233
+ .report-panel-footer {
234
+ display: flex;
235
+ justify-content: space-between;
236
+ align-items: end;
237
+ gap: 18px;
238
+ }
239
+
240
+ /* ── editorial modules ───────────────────────────────── */
241
+ .editorial-media {
242
+ width: 100%;
243
+ }
244
+
245
+ .editorial-module-body {
246
+ display: flex;
247
+ flex-direction: column;
248
+ gap: 12px;
249
+ }
250
+
251
+ .module-kicker-row {
252
+ display: inline-flex;
253
+ align-items: center;
254
+ gap: 8px;
255
+ }
256
+
257
+ .module-icon {
258
+ width: 15px;
259
+ height: 15px;
260
+ stroke-width: 1.6;
261
+ color: var(--accent-earth);
262
+ flex-shrink: 0;
263
+ }
264
+
265
+ .editorial-image-top {
266
+ display: flex;
267
+ flex-direction: column;
268
+ gap: 16px;
269
+ }
270
+
271
+ .editorial-image-top .editorial-media {
272
+ height: 240px;
273
+ }
274
+
275
+ .editorial-image-top .editorial-module-body h3 {
276
+ margin-top: 2px;
277
+ }
278
+
279
+ .editorial-text-top {
280
+ display: flex;
281
+ flex-direction: column;
282
+ gap: 16px;
283
+ }
284
+
285
+ .editorial-text-top .editorial-module-body {
286
+ padding-bottom: 2px;
287
+ }
288
+
289
+ .editorial-text-top .editorial-media {
290
+ height: 200px;
291
+ }
292
+
293
+ .editorial-text-top .media-caption {
294
+ margin-top: -4px;
295
+ }
296
+
297
+ .editorial-text-left {
298
+ display: flex;
299
+ flex-direction: column;
300
+ gap: 0;
301
+ height: 100%;
302
+ overflow: hidden;
303
+ }
304
+
305
+ .editorial-text-left-header {
306
+ flex-shrink: 0;
307
+ padding: 20px 24px 16px;
308
+ }
309
+
310
+ .editorial-text-left-content {
311
+ display: flex;
312
+ flex: 1;
313
+ min-height: 0;
314
+ }
315
+
316
+ .editorial-text-left-copy {
317
+ flex: 1.1;
318
+ min-width: 0;
319
+ padding: 16px 20px 20px 24px;
320
+ display: flex;
321
+ flex-direction: column;
322
+ justify-content: flex-start;
323
+ }
324
+
325
+ .editorial-text-left-visual {
326
+ flex: 1;
327
+ min-width: 0;
328
+ min-height: 0;
329
+ align-self: stretch;
330
+ overflow: hidden;
331
+ position: relative;
332
+ }
333
+
334
+ /* ── echart-panel ────────────────────────────────────── */
335
+ .echart-panel {
336
+ display: flex;
337
+ flex-direction: column;
338
+ justify-content: center;
339
+ height: 100%;
340
+ gap: 0;
341
+ padding: 40px 48px;
342
+ background: var(--bg-page);
343
+ }
344
+
345
+ .echart-panel-header {
346
+ flex-shrink: 0;
347
+ padding-bottom: 16px;
348
+ border-bottom: 1px solid var(--line);
349
+ margin-bottom: 20px;
350
+ }
351
+
352
+ .echart-panel-header h3 {
353
+ margin-top: 6px;
354
+ }
355
+
356
+ .chart-subtitle {
357
+ margin-top: 4px;
358
+ font-size: 13px;
359
+ color: var(--text-muted);
360
+ line-height: 1.4;
361
+ }
362
+
363
+ .echart-container {
364
+ flex: 0 0 auto;
365
+ height: 380px;
366
+ }
367
+
368
+ .chart-caption {
369
+ flex-shrink: 0;
370
+ margin-top: 12px;
371
+ font-size: 11px;
372
+ letter-spacing: 0.12em;
373
+ text-transform: uppercase;
374
+ color: var(--text-muted);
375
+ }
376
+
377
+ .narrative-hero-grid {
378
+ display: grid;
379
+ grid-template-columns: minmax(0, 4.2fr) minmax(0, 7.8fr);
380
+ grid-template-rows: minmax(0, 1fr);
381
+ height: 100%;
382
+ overflow: hidden;
383
+ }
384
+
385
+ .narrative-hero-grid--reversed {
386
+ grid-template-columns: minmax(0, 7.8fr) minmax(0, 4.2fr);
387
+ }
388
+
389
+ .narrative-hero-grid > * {
390
+ overflow: hidden;
391
+ min-height: 0;
392
+ min-width: 0;
393
+ }
394
+
395
+ .three-highlights-grid {
396
+ display: grid;
397
+ grid-template-columns: minmax(0, 3.8fr) minmax(0, 5.4fr) minmax(0, 3.8fr);
398
+ gap: 34px;
399
+ overflow: hidden;
400
+ }
401
+
402
+ .three-highlights-grid > * {
403
+ overflow: hidden;
404
+ min-height: 0;
405
+ }
406
+
407
+ /* ── split-dashboard ─────────────────────────────────── */
408
+ .split-dashboard {
409
+ display: grid;
410
+ grid-template-rows: auto minmax(0, 1fr);
411
+ height: 100%;
412
+ width: 100%;
413
+ }
414
+
415
+ .split-top {
416
+ max-height: 320px;
417
+ overflow: hidden;
418
+ padding-bottom: 36px;
419
+ border-bottom: 1px solid var(--line-strong);
420
+ }
421
+
422
+ .split-bottom {
423
+ display: grid;
424
+ grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
425
+ gap: 56px;
426
+ padding-top: 36px;
427
+ overflow: hidden;
428
+ }
429
+
430
+ .split-bottom > * {
431
+ overflow: hidden;
432
+ min-height: 0;
433
+ }
434
+
435
+ .split-table-col {
436
+ display: flex;
437
+ flex-direction: column;
438
+ }
439
+
440
+ .split-chart-col {
441
+ display: flex;
442
+ flex-direction: column;
443
+ }
444
+
445
+ .split-chart-col .echart-container {
446
+ flex: 1;
447
+ min-height: 0;
448
+ height: 100% !important;
449
+ }
450
+
451
+ /* ── flow-horizontal ─────────────────────────────────── */
452
+ .flow-horizontal {
453
+ display: flex;
454
+ align-items: flex-start;
455
+ width: 100%;
456
+ }
457
+
458
+ .flow-horizontal .flow-item {
459
+ flex: 1;
460
+ display: flex;
461
+ flex-direction: column;
462
+ gap: 18px;
463
+ padding-right: 40px;
464
+ margin-right: 40px;
465
+ }
466
+
467
+ .flow-horizontal .flow-item:last-child {
468
+ border-right: none;
469
+ padding-right: 0;
470
+ margin-right: 0;
471
+ }
472
+
473
+ .flow-horizontal .flow-number {
474
+ font-family: 'IBM Plex Sans Condensed', sans-serif;
475
+ font-size: 13px;
476
+ font-weight: 700;
477
+ letter-spacing: 0.12em;
478
+ color: var(--text-muted);
479
+ border: 1px solid var(--line-strong);
480
+ width: 34px;
481
+ height: 34px;
482
+ display: flex;
483
+ align-items: center;
484
+ justify-content: center;
485
+ flex-shrink: 0;
486
+ }
487
+
488
+ .flow-horizontal .flow-body h4 {
489
+ font-size: 20px;
490
+ font-weight: 600;
491
+ line-height: 1.14;
492
+ }
493
+
494
+ .flow-horizontal .flow-body p {
495
+ font-size: 14px;
496
+ line-height: 1.6;
497
+ color: var(--text-secondary);
498
+ }
499
+
500
+ /* ── flow-vertical ───────────────────────────────────── */
501
+ .flow-vertical {
502
+ display: flex;
503
+ flex-direction: column;
504
+ width: 100%;
505
+ }
506
+
507
+ .flow-vertical .flow-item {
508
+ display: flex;
509
+ gap: 28px;
510
+ align-items: flex-start;
511
+ }
512
+
513
+ .flow-vertical .flow-marker {
514
+ display: flex;
515
+ flex-direction: column;
516
+ align-items: center;
517
+ flex-shrink: 0;
518
+ }
519
+
520
+ .flow-vertical .flow-number {
521
+ font-family: 'IBM Plex Sans Condensed', sans-serif;
522
+ font-size: 13px;
523
+ font-weight: 700;
524
+ letter-spacing: 0.12em;
525
+ color: var(--text-muted);
526
+ border: 1px solid var(--line-strong);
527
+ width: 34px;
528
+ height: 34px;
529
+ display: flex;
530
+ align-items: center;
531
+ justify-content: center;
532
+ flex-shrink: 0;
533
+ }
534
+
535
+ .flow-vertical .flow-line {
536
+ width: 1px;
537
+ flex: 1;
538
+ min-height: 28px;
539
+ background: var(--line-strong);
540
+ margin: 6px 0;
541
+ }
542
+
543
+ .flow-vertical .flow-body {
544
+ padding-bottom: 32px;
545
+ }
546
+
547
+ .flow-vertical .flow-item.last .flow-body {
548
+ padding-bottom: 0;
549
+ }
550
+
551
+ .flow-vertical .flow-body h4 {
552
+ font-size: 20px;
553
+ font-weight: 600;
554
+ line-height: 1.14;
555
+ margin-top: 4px;
556
+ }
557
+
558
+ .flow-vertical .flow-body p {
559
+ margin-top: 8px;
560
+ font-size: 14px;
561
+ line-height: 1.6;
562
+ color: var(--text-secondary);
563
+ }
564
+
565
+ /* ── data-table ──────────────────────────────────────── */
566
+ .data-table-wrap {
567
+ width: 100%;
568
+ }
569
+
570
+ .data-table {
571
+ width: 100%;
572
+ border-collapse: collapse;
573
+ font-family: 'Inter', sans-serif;
574
+ font-size: 13px;
575
+ font-variant-numeric: tabular-nums;
576
+ color: var(--text-primary);
577
+ }
578
+
579
+ .data-table thead tr {
580
+ border-bottom: 1.5px solid var(--line-strong);
581
+ }
582
+
583
+ .data-table th {
584
+ padding: 0 12px 10px 0;
585
+ text-align: left;
586
+ font-size: 11px;
587
+ font-weight: 600;
588
+ letter-spacing: 0.1em;
589
+ text-transform: uppercase;
590
+ color: var(--text-muted);
591
+ }
592
+
593
+ .data-table th:not(:first-child),
594
+ .data-table td:not(:first-child) {
595
+ text-align: right;
596
+ }
597
+
598
+ .data-table tbody tr {
599
+ border-bottom: 1px solid var(--line);
600
+ }
601
+
602
+ .data-table td {
603
+ padding: 9px 12px 9px 0;
604
+ line-height: 1.4;
605
+ color: var(--text-secondary);
606
+ }
607
+
608
+ .data-table tr.subtotal td {
609
+ font-weight: 600;
610
+ color: var(--text-primary);
611
+ border-top: 1px solid var(--line-strong);
612
+ border-bottom: none;
613
+ }
614
+
615
+ .data-table .delta {
616
+ font-weight: 600;
617
+ }
618
+
619
+ .data-table .delta.positive {
620
+ color: var(--accent-olive);
621
+ }
622
+
623
+ .data-table .delta.negative {
624
+ color: var(--accent-danger);
625
+ }
626
+
627
+ .data-table .col-highlight {
628
+ color: var(--text-primary);
629
+ font-weight: 600;
630
+ }
631
+
632
+ .data-table thead .col-highlight {
633
+ color: var(--accent-earth);
634
+ }
635
+
636
+ .table-caption {
637
+ margin-top: 12px;
638
+ font-size: 11px;
639
+ letter-spacing: 0.1em;
640
+ text-transform: uppercase;
641
+ color: var(--text-muted);
642
+ }
643
+
644
+ /* ── dense-table ─────────────────────────────────────── */
645
+ .dense-table-wrap {
646
+ width: 100%;
647
+ overflow: hidden;
648
+ }
649
+
650
+ .dense-table-label {
651
+ font-size: 10px;
652
+ font-weight: 700;
653
+ letter-spacing: 0.14em;
654
+ text-transform: uppercase;
655
+ color: var(--text-muted);
656
+ margin-bottom: 8px;
657
+ }
658
+
659
+ .dense-table {
660
+ width: 100%;
661
+ border-collapse: collapse;
662
+ font-family: 'Inter', sans-serif;
663
+ font-size: 11px;
664
+ font-variant-numeric: tabular-nums;
665
+ color: var(--text-secondary);
666
+ }
667
+
668
+ .dense-table thead tr {
669
+ border-bottom: 1px solid var(--line-strong);
670
+ }
671
+
672
+ .dense-table th {
673
+ padding: 0 8px 7px 0;
674
+ text-align: left;
675
+ font-size: 10px;
676
+ font-weight: 600;
677
+ letter-spacing: 0.10em;
678
+ text-transform: uppercase;
679
+ color: var(--text-muted);
680
+ white-space: nowrap;
681
+ }
682
+
683
+ .dense-table th:not(:first-child),
684
+ .dense-table td:not(:first-child) {
685
+ text-align: right;
686
+ }
687
+
688
+ .dense-table th.col-highlight,
689
+ .dense-table td.col-highlight {
690
+ color: var(--text-primary);
691
+ background: rgba(247, 244, 238, 0.06);
692
+ padding-left: 6px;
693
+ padding-right: 8px;
694
+ }
695
+
696
+ .dense-table th.col-highlight {
697
+ color: rgba(247, 244, 238, 0.72);
698
+ }
699
+
700
+ .dense-table tbody tr {
701
+ border-bottom: 1px solid var(--line);
702
+ }
703
+
704
+ .dense-table tbody tr:last-child {
705
+ border-bottom: none;
706
+ }
707
+
708
+ .dense-table td {
709
+ padding: 6px 8px 6px 0;
710
+ line-height: 1.35;
711
+ white-space: nowrap;
712
+ }
713
+
714
+ .dense-table tr.subtotal td {
715
+ font-weight: 600;
716
+ color: var(--text-primary);
717
+ border-top: 1px solid var(--line-strong);
718
+ border-bottom: 1px solid var(--line-strong);
719
+ }
720
+
721
+ .dense-table .delta {
722
+ font-weight: 600;
723
+ white-space: nowrap;
724
+ }
725
+
726
+ .dense-table .delta.positive {
727
+ color: var(--accent-olive);
728
+ }
729
+
730
+ .dense-table .delta.negative {
731
+ color: var(--accent-danger);
732
+ }
733
+
734
+ .dense-table-caption {
735
+ margin-top: 8px;
736
+ font-size: 10px;
737
+ letter-spacing: 0.09em;
738
+ text-transform: uppercase;
739
+ color: var(--text-muted);
740
+ line-height: 1.4;
741
+ }
742
+
743
+ /* ── mini-chart-strip ────────────────────────────────── */
744
+ .mini-chart-strip {
745
+ display: flex;
746
+ align-items: flex-start;
747
+ width: 100%;
748
+ gap: 0;
749
+ }
750
+
751
+ .mini-chart-item {
752
+ flex: 1;
753
+ display: flex;
754
+ flex-direction: column;
755
+ gap: 6px;
756
+ padding-right: 24px;
757
+ border-right: 1px solid var(--line-strong);
758
+ margin-right: 24px;
759
+ }
760
+
761
+ .mini-chart-item:last-child {
762
+ border-right: none;
763
+ padding-right: 0;
764
+ margin-right: 0;
765
+ }
766
+
767
+ .mini-chart-title {
768
+ font-size: 10px;
769
+ font-weight: 600;
770
+ letter-spacing: 0.10em;
771
+ text-transform: uppercase;
772
+ color: var(--text-muted);
773
+ line-height: 1.3;
774
+ white-space: nowrap;
775
+ overflow: hidden;
776
+ text-overflow: ellipsis;
777
+ }
778
+
779
+ .mini-chart-container {
780
+ width: 100%;
781
+ height: 160px;
782
+ flex-shrink: 0;
783
+ }
784
+
785
+ .mini-chart-caption {
786
+ font-size: 9px;
787
+ letter-spacing: 0.08em;
788
+ text-transform: uppercase;
789
+ color: var(--text-muted);
790
+ opacity: 0.7;
791
+ line-height: 1.3;
792
+ }
793
+
794
+ /* ── data-brief ───────────────────────────────────────── */
795
+ .data-brief {
796
+ width: 100%;
797
+ height: 100%;
798
+ position: relative;
799
+ display: grid;
800
+ grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
801
+ grid-template-rows: minmax(0, 58fr) minmax(0, 42fr);
802
+ gap: 24px 48px;
803
+ background: #10131a;
804
+ color: #f7f4ee;
805
+ padding: 48px 56px 40px;
806
+ --text-primary: #f7f4ee;
807
+ --text-secondary: rgba(247, 244, 238, 0.75);
808
+ --text-muted: rgba(247, 244, 238, 0.45);
809
+ --line: rgba(247, 244, 238, 0.10);
810
+ --line-strong: rgba(247, 244, 238, 0.22);
811
+ --accent-earth: var(--accent-gold);
812
+ --accent-olive: #8faf7e;
813
+ }
814
+
815
+ .data-brief-narrative {
816
+ grid-column: 1;
817
+ grid-row: 1;
818
+ display: flex;
819
+ flex-direction: column;
820
+ overflow: hidden;
821
+ border: 1px solid var(--line-strong);
822
+ padding: 28px 32px;
823
+ }
824
+
825
+ .data-brief-data {
826
+ grid-column: 2;
827
+ grid-row: 1 / 3;
828
+ display: flex;
829
+ flex-direction: column;
830
+ overflow: hidden;
831
+ }
832
+
833
+ .data-brief-strip {
834
+ grid-column: 1;
835
+ grid-row: 2;
836
+ overflow: hidden;
837
+ padding-top: 20px;
838
+ border-top: 1px solid rgba(247, 244, 238, 0.14);
839
+ display: flex;
840
+ flex-direction: column;
841
+ }
842
+
843
+ .data-brief-strip .mini-chart-strip {
844
+ flex: 1;
845
+ min-height: 0;
846
+ align-items: stretch;
847
+ }
848
+
849
+ .data-brief-strip .mini-chart-item {
850
+ min-height: 0;
851
+ }
852
+
853
+ .data-brief-strip .mini-chart-container {
854
+ flex: 1;
855
+ min-height: 0;
856
+ height: auto;
857
+ }
858
+
859
+ /* ── brief-grid ───────────────────────────────────────── */
860
+ .brief-grid {
861
+ display: grid;
862
+ grid-template-rows: minmax(0, 11fr) minmax(0, 9fr);
863
+ gap: 20px;
864
+ height: 100%;
865
+ }
866
+
867
+ .brief-grid-top {
868
+ display: grid;
869
+ grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
870
+ gap: 24px;
871
+ overflow: hidden;
872
+ }
873
+
874
+ .brief-grid-top > * {
875
+ overflow: hidden;
876
+ min-height: 0;
877
+ }
878
+
879
+ .brief-grid-bottom {
880
+ display: grid;
881
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
882
+ gap: 24px;
883
+ overflow: hidden;
884
+ }
885
+
886
+ .brief-grid-bottom > * {
887
+ overflow: hidden;
888
+ min-height: 0;
889
+ }
890
+
891
+ .brief-grid-narrative {
892
+ display: flex;
893
+ flex-direction: column;
894
+ padding-right: 24px;
895
+ border-right: 1px solid var(--line-strong);
896
+ }
897
+
898
+ .brief-grid-feature {
899
+ display: flex;
900
+ flex-direction: column;
901
+ }
902
+
903
+ .brief-grid-feature .editorial-image-top {
904
+ display: flex;
905
+ flex-direction: column;
906
+ background: var(--bg-page-alt);
907
+ border-radius: 3px;
908
+ overflow: hidden;
909
+ height: 100%;
910
+ }
911
+
912
+ .brief-grid-feature .editorial-image-top .editorial-media {
913
+ flex: 1;
914
+ min-height: 0;
915
+ }
916
+
917
+ .brief-grid-card {
918
+ background: var(--bg-page-alt);
919
+ border-radius: 3px;
920
+ overflow: hidden;
921
+ display: flex;
922
+ flex-direction: column;
923
+ }
924
+
925
+ .brief-grid-card .editorial-text-left {
926
+ flex: 1;
927
+ min-height: 0;
928
+ height: 0;
929
+ }
930
+
931
+ /* ── page number ─────────────────────────────────────── */
932
+ .page-number {
933
+ position: absolute;
934
+ bottom: 36px;
935
+ right: 52px;
936
+ font-family: 'IBM Plex Sans Condensed', sans-serif;
937
+ font-size: 11px;
938
+ font-weight: 700;
939
+ letter-spacing: 0.18em;
940
+ color: var(--text-muted);
941
+ z-index: 10;
942
+ pointer-events: none;
943
+ }
944
+ .page-number--light {
945
+ color: rgba(247, 244, 238, 0.45);
946
+ }
947
+ /* ── cover-title-stack ─────────────────────────────────── */
948
+ .cover-title-stack {
949
+ position: relative;
950
+ z-index: 2;
951
+ height: 100%;
952
+ display: flex;
953
+ flex-direction: column;
954
+ justify-content: space-between;
955
+ padding: 72px 84px;
956
+ color: #f7f4ee;
957
+ }
958
+ .cover-brand-label { flex: 0 0 auto; }
959
+ .cover-body {
960
+ display: flex;
961
+ flex-direction: column;
962
+ gap: 22px;
963
+ max-width: 680px;
964
+ }
965
+ .cover-body h1 {
966
+ color: #f7f4ee;
967
+ font-size: 96px;
968
+ line-height: 0.92;
969
+ letter-spacing: -0.03em;
970
+ text-transform: uppercase;
971
+ }
972
+ .cover-eyebrow {
973
+ font-size: 11px;
974
+ font-weight: 700;
975
+ letter-spacing: 0.18em;
976
+ text-transform: uppercase;
977
+ color: rgba(247, 244, 238, 0.55);
978
+ }
979
+ .cover-subtitle {
980
+ font-size: 15px;
981
+ line-height: 1.56;
982
+ color: rgba(247, 244, 238, 0.72);
983
+ max-width: 460px;
984
+ }
985
+ .cover-footer {
986
+ display: flex;
987
+ justify-content: space-between;
988
+ align-items: flex-end;
989
+ }
990
+
991
+ /* ── closing-title-stack ───────────────────────────────── */
992
+ .closing-title-stack {
993
+ position: relative;
994
+ z-index: 2;
995
+ height: 100%;
996
+ display: flex;
997
+ flex-direction: column;
998
+ justify-content: space-between;
999
+ padding: 72px 84px;
1000
+ color: #f7f4ee;
1001
+ text-align: right;
1002
+ }
1003
+ .closing-brand-label { flex: 0 0 auto; }
1004
+ .closing-body {
1005
+ display: flex;
1006
+ flex-direction: column;
1007
+ gap: 20px;
1008
+ max-width: 860px;
1009
+ margin-left: auto;
1010
+ }
1011
+ .closing-body h1 {
1012
+ color: #f7f4ee;
1013
+ font-size: 100px;
1014
+ line-height: 0.9;
1015
+ letter-spacing: -0.03em;
1016
+ text-transform: uppercase;
1017
+ }
1018
+ .closing-subtitle {
1019
+ font-size: 16px;
1020
+ line-height: 1.56;
1021
+ color: rgba(247, 244, 238, 0.78);
1022
+ max-width: 520px;
1023
+ }
1024
+ .closing-footer {
1025
+ display: flex;
1026
+ justify-content: space-between;
1027
+ align-items: flex-end;
1028
+ gap: 24px;
1029
+ }
1030
+ </style>
1031
+ </head>
1032
+ <body>
1033
+
1034
+ <!-- ════════════════════════════════════════════════════════
1035
+ SLIDE 0 — COVER
1036
+ Layout: cover · slide-qa=false
1037
+ ═══════════════════════════════════════════════════════════ -->
1038
+ <section class="slide cover-slide" slide-qa="false" data-index="0">
1039
+ <div class="slide-canvas">
1040
+ <div class="page" style="padding:0;">
1041
+ <div class="hero-field" style="position:absolute;inset:0;z-index:0;">
1042
+ <div class="full-bleed-media" style="height:100%;">
1043
+ <img src="https://images.unsplash.com/photo-1511497584788-876760111969?q=80&w=1800&auto=format&fit=crop" alt="Snowline ridge under overcast alpine sky">
1044
+ </div>
1045
+ </div>
1046
+ <div style="position:absolute;inset:0;z-index:1;background:linear-gradient(105deg,rgba(5,5,5,0.95) 0%,rgba(5,5,5,0.72) 55%,rgba(5,5,5,0.10) 100%);"></div>
1047
+ <div class="cover-title-stack">
1048
+ <div class="cover-brand-label">
1049
+ <div class="chevron-divider reveal" style="color:rgba(247,244,238,0.55);">Summit</div>
1050
+ </div>
1051
+ <div class="cover-body">
1052
+ <p class="cover-eyebrow reveal">Climate Report 2026</p>
1053
+ <h1 class="reveal">Measured.<br>Accountable.<br>Moving.</h1>
1054
+ <p class="cover-subtitle reveal">Our fourth annual climate disclosure. Verified emissions data, updated targets, and a frank account of where we fell short.</p>
1055
+ </div>
1056
+ <div class="cover-footer">
1057
+ <p class="caption reveal" style="color:rgba(247,244,238,0.5);">summit.fieldnotes.com</p>
1058
+ <p class="caption reveal" style="color:rgba(247,244,238,0.5);">Summit Outdoor Co. · 2026</p>
1059
+ </div>
1060
+ </div>
1061
+ <div class="page-number page-number--light">00 / 11</div>
1062
+ </div>
1063
+ </div>
1064
+ </section>
1065
+
1066
+ <!-- ════════════════════════════════════════════════════════
1067
+ SLIDE 1 — TABLE OF CONTENTS
1068
+ Layout: toc · slide-qa=false
1069
+ ═══════════════════════════════════════════════════════════ -->
1070
+ <section class="slide" slide-qa="false" data-index="1">
1071
+ <div class="slide-canvas">
1072
+ <div class="page reveal" style="padding:0;overflow:hidden;">
1073
+ <div style="display:grid;grid-template-columns:8fr 4fr;height:100%;">
1074
+ <div class="hero-field" style="height:100%;">
1075
+ <div class="full-bleed-media" style="height:100%;">
1076
+ <img src="https://images.unsplash.com/photo-1522163182402-834f871fd851?q=80&w=1800&auto=format&fit=crop" alt="Climbers resting on a steep alpine wall at sunrise">
1077
+ </div>
1078
+ </div>
1079
+ <div style="background:var(--bg-page);height:100%;padding:42px 38px 30px;display:flex;">
1080
+ <div style="width:3px;background:var(--accent-gold);flex:0 0 3px;"></div>
1081
+ <div style="padding-left:22px;display:flex;flex-direction:column;justify-content:space-between;flex:1;">
1082
+ <div>
1083
+ <h2 style="font-size:34px;line-height:0.94;letter-spacing:-0.03em;text-transform:uppercase;max-width:220px;">Table of Contents</h2>
1084
+ <p style="margin-top:18px;font-size:11px;line-height:1.6;letter-spacing:0.06em;color:var(--text-secondary);max-width:255px;">Six sections mapping our progress against the commitments made in our 2022 baseline report.</p>
1085
+ <ol style="list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:26px;">
1086
+ <li style="display:grid;grid-template-columns:26px 1fr;gap:12px;font-size:11px;line-height:1.45;text-transform:uppercase;letter-spacing:0.06em;border-bottom:1px solid var(--line);padding-bottom:8px;"><span style="font-weight:700;">01</span><span>Climate Commitments &amp; 2030 Targets</span></li>
1087
+ <li style="display:grid;grid-template-columns:26px 1fr;gap:12px;font-size:11px;line-height:1.45;text-transform:uppercase;letter-spacing:0.06em;border-bottom:1px solid var(--line);padding-bottom:8px;"><span style="font-weight:700;">02</span><span>Material Transition &amp; Circular Design</span></li>
1088
+ <li style="display:grid;grid-template-columns:26px 1fr;gap:12px;font-size:11px;line-height:1.45;text-transform:uppercase;letter-spacing:0.06em;border-bottom:1px solid var(--line);padding-bottom:8px;"><span style="font-weight:700;">03</span><span>Field Programme Action Highlights</span></li>
1089
+ <li style="display:grid;grid-template-columns:26px 1fr;gap:12px;font-size:11px;line-height:1.45;text-transform:uppercase;letter-spacing:0.06em;border-bottom:1px solid var(--line);padding-bottom:8px;"><span style="font-weight:700;">04</span><span>Carbon Emissions — Scope 1, 2 &amp; 3</span></li>
1090
+ <li style="display:grid;grid-template-columns:26px 1fr;gap:12px;font-size:11px;line-height:1.45;text-transform:uppercase;letter-spacing:0.06em;border-bottom:1px solid var(--line);padding-bottom:8px;"><span style="font-weight:700;">05</span><span>Decarbonisation Roadmap 2026–2030</span></li>
1091
+ <li style="display:grid;grid-template-columns:26px 1fr;gap:12px;font-size:11px;line-height:1.45;text-transform:uppercase;letter-spacing:0.06em;"><span style="font-weight:700;">06</span><span>Emissions Data &amp; Assurance Tables</span></li>
1092
+ </ol>
1093
+ </div>
1094
+ <div style="display:flex;flex-direction:column;gap:14px;">
1095
+ <div class="rule"></div>
1096
+ <div>
1097
+ <p class="caption">Scope of report</p>
1098
+ <p style="margin-top:10px;font-size:11px;line-height:1.6;color:var(--text-secondary);max-width:255px;">Data covers fiscal year 2026 (Jan–Dec). Scope 3 figures are independently verified by Bureau Veritas.</p>
1099
+ </div>
1100
+ <div style="display:flex;justify-content:space-between;align-items:end;">
1101
+ <p class="caption">Summit Outdoor Co. · 2026</p>
1102
+ </div>
1103
+ </div>
1104
+ </div>
1105
+ </div>
1106
+ </div>
1107
+ <div class="page-number">01 / 11</div>
1108
+ </div>
1109
+ </div>
1110
+ </section>
1111
+
1112
+ <!-- ════════════════════════════════════════════════════════
1113
+ SLIDE 2 — CLIMATE COMMITMENTS
1114
+ Layout: narrative-hero-right · slide-qa=true
1115
+ ═══════════════════════════════════════════════════════════ -->
1116
+ <section class="slide" slide-qa="true" data-index="2">
1117
+ <div class="slide-canvas">
1118
+ <div class="page" style="padding:0;overflow:hidden;background:var(--bg-frame);">
1119
+ <div class="narrative-hero-grid">
1120
+ <div class="report-text-panel report-text-panel--dark reveal">
1121
+ <div style="max-width:420px;">
1122
+ <p class="eyebrow" style="color:rgba(243,238,230,0.6);">01 · Climate Commitments</p>
1123
+ <h2 style="margin-top:16px;font-size:58px;line-height:0.9;letter-spacing:-0.03em;text-transform:uppercase;color:#f7f4ee;max-width:360px;">Net Zero by 2030</h2>
1124
+ <div style="width:40px;height:2px;background:var(--accent-gold);margin:20px 0;"></div>
1125
+ <p style="margin-top:0;font-size:13px;line-height:1.6;color:rgba(243,238,230,0.84);max-width:390px;">In 2022 we set a binding commitment to reach net-zero greenhouse gas emissions across Scope 1, 2, and 3 by end of decade. This report marks our fourth annual review against that baseline.</p>
1126
+ <p style="margin-top:16px;font-size:13px;line-height:1.6;color:rgba(243,238,230,0.76);max-width:390px;">Scope 1 and 2 emissions have declined 38% since 2022, driven by our transition to renewable electricity across all owned facilities and the closure of our diesel-heated Vancouver distribution centre.</p>
1127
+ <p style="margin-top:16px;font-size:13px;line-height:1.6;color:rgba(243,238,230,0.76);max-width:390px;">Scope 3 — representing 84% of our total footprint — remains the hardest problem. Supply chain decarbonisation requires multi-year programmes with tier-2 and tier-3 suppliers in Southeast Asia, progress on which we detail in section five.</p>
1128
+ </div>
1129
+ <div class="report-panel-footer" style="color:rgba(243,238,230,0.5);">
1130
+ <p class="caption">Summit Outdoor Co. · Climate Report 2026</p>
1131
+ <p class="caption">05</p>
1132
+ </div>
1133
+ </div>
1134
+ <div class="hero-field reveal">
1135
+ <div class="full-bleed-media" style="height:100%;">
1136
+ <img src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=1800&auto=format&fit=crop" alt="Mountain meadow and stream under dramatic alpine sky">
1137
+ </div>
1138
+ </div>
1139
+ </div>
1140
+ <div class="page-number">02 / 11</div>
1141
+ </div>
1142
+ </div>
1143
+ </section>
1144
+
1145
+ <!-- ════════════════════════════════════════════════════════
1146
+ SLIDE 3 — MATERIAL TRANSITION
1147
+ Layout: narrative-hero-left · slide-qa=true
1148
+ ═══════════════════════════════════════════════════════════ -->
1149
+ <section class="slide" slide-qa="true" data-index="3">
1150
+ <div class="slide-canvas">
1151
+ <div class="page alt" style="padding:0;overflow:hidden;background:var(--bg-page-alt);">
1152
+ <div class="narrative-hero-grid narrative-hero-grid--reversed">
1153
+ <div class="hero-field reveal">
1154
+ <div class="full-bleed-media" style="height:100%;">
1155
+ <img src="https://images.unsplash.com/photo-1454496522488-7a8e488e8606?q=80&w=1800&auto=format&fit=crop" alt="Snow ridge landscape under alpine light">
1156
+ </div>
1157
+ </div>
1158
+ <div class="report-text-panel report-text-panel--light reveal">
1159
+ <div style="max-width:390px;">
1160
+ <p class="eyebrow" style="color:var(--text-muted);">02 · Material Transition</p>
1161
+ <h2 style="margin-top:16px;font-size:52px;line-height:0.9;letter-spacing:-0.03em;text-transform:uppercase;color:var(--text-primary);max-width:340px;">67% Recycled Fibre</h2>
1162
+ <div style="width:40px;height:2px;background:var(--accent-earth);margin:20px 0;"></div>
1163
+ <p style="margin-top:0;font-size:13px;line-height:1.6;color:var(--text-secondary);max-width:360px;">As of the 2026 product season, 67% of all fabric used across Summit's softshell, fleece, and base-layer categories is certified recycled or bio-based — up from 41% in 2022.</p>
1164
+ <p style="margin-top:16px;font-size:13px;line-height:1.6;color:var(--text-secondary);max-width:360px;">This transition was enabled by long-term contracts with Bluesign-certified mills in Portugal and Taiwan, and by a redesign of our technical shell programme to accept fabrics with a higher rPET content without compromising DWR performance.</p>
1165
+ <p style="margin-top:16px;font-size:13px;line-height:1.6;color:var(--text-secondary);max-width:360px;">Our virgin nylon and polyester volumes fell 29% by weight. The remaining 33% of virgin fibre is primarily structural components — webbing, buckles, and dyneema reinforcements — where recycled equivalents have not yet reached equivalent load ratings.</p>
1166
+ </div>
1167
+ <div class="report-panel-footer" style="color:var(--text-muted);">
1168
+ <p class="caption">Summit Outdoor Co. · Climate Report 2026</p>
1169
+ <p class="caption">07</p>
1170
+ </div>
1171
+ </div>
1172
+ </div>
1173
+ <div class="page-number">03 / 11</div>
1174
+ </div>
1175
+ </div>
1176
+ </section>
1177
+
1178
+ <!-- ════════════════════════════════════════════════════════
1179
+ SLIDE 4 — FIELD PROGRAMME HIGHLIGHTS
1180
+ Layout: three-highlights · slide-qa=true
1181
+ ═══════════════════════════════════════════════════════════ -->
1182
+ <section class="slide" slide-qa="true" data-index="4">
1183
+ <div class="slide-canvas">
1184
+ <div class="page">
1185
+ <p class="eyebrow reveal">03 · Field Programme</p>
1186
+ <h2 class="reveal" style="margin-top:12px;font-size:26px;line-height:1.0;letter-spacing:0.01em;text-transform:uppercase;max-width:560px;">Three Programmes Driving On-the-Ground Change</h2>
1187
+ <div class="rule" style="margin:18px 0 26px;"></div>
1188
+ <div class="three-highlights-grid" style="flex:1;min-height:0;">
1189
+
1190
+ <!-- Left column -->
1191
+ <div class="editorial-image-top reveal" style="padding-top:12px;border-top:1px solid var(--line-strong);">
1192
+ <div class="media-frame editorial-media">
1193
+ <img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?q=80&w=1200&auto=format&fit=crop" alt="Climber on alpine ridge">
1194
+ </div>
1195
+ <div class="editorial-module-body">
1196
+ <div class="module-kicker-row">
1197
+ <i data-lucide="leaf" class="module-icon"></i>
1198
+ <p class="caption">Alpine Stewardship</p>
1199
+ </div>
1200
+ <h3 style="font-size:18px;line-height:1.1;max-width:240px;">Trail Restoration · Chamonix Valley</h3>
1201
+ <p style="font-size:13px;line-height:1.52;max-width:248px;">Over three field seasons, Summit crews have restored 34 km of degraded high-altitude trails alongside the PGHM mountain rescue service, removing invasive species and stabilising eroded sections above 2,400 m.</p>
1202
+ <p class="media-caption">Chamonix Valley · 2024–2026</p>
1203
+ </div>
1204
+ </div>
1205
+
1206
+ <!-- Centre column -->
1207
+ <div class="editorial-text-top reveal" style="padding-top:12px;border-top:1px solid var(--line-strong);">
1208
+ <div class="editorial-module-body">
1209
+ <div class="module-kicker-row">
1210
+ <i data-lucide="recycle" class="module-icon"></i>
1211
+ <p class="caption">Circular Economy</p>
1212
+ </div>
1213
+ <h3 style="font-size:21px;line-height:1.06;max-width:360px;">Take-Back &amp; Repair — 18,400 Units Diverted</h3>
1214
+ <p style="font-size:13px;line-height:1.52;max-width:360px;">Summit's take-back programme — operational in 12 European markets — collected and assessed 18,400 end-of-life garments in 2026. Of those, 61% were repaired and returned to secondary market via our Refurbished line; 22% were downcycled into insulation fill; and 17% were recycled into raw fibre at our partner facility in Lyon.</p>
1215
+ <p style="margin-top:4px;font-size:13px;line-height:1.52;max-width:360px;">The programme prevented an estimated 112 tonnes CO₂e of production emissions by extending garment lifespans beyond the primary owner cycle. In 2027 we will expand the collection network to North America.</p>
1216
+ </div>
1217
+ <div class="media-frame editorial-media">
1218
+ <img src="https://images.unsplash.com/photo-1464823063530-08f10ed1a2dd?q=80&w=1200&auto=format&fit=crop" alt="Mountain landscape with distant ridge line">
1219
+ </div>
1220
+ <p class="media-caption">Lyon Recycling Facility · Partner Programme 2026</p>
1221
+ </div>
1222
+
1223
+ <!-- Right column -->
1224
+ <div class="editorial-image-top reveal" style="padding-top:12px;border-top:1px solid var(--line-strong);">
1225
+ <div class="media-frame editorial-media">
1226
+ <img src="https://images.unsplash.com/photo-1519904981063-b0cf448d479e?q=80&w=1200&auto=format&fit=crop" alt="Hiker in alpine basin">
1227
+ </div>
1228
+ <div class="editorial-module-body">
1229
+ <div class="module-kicker-row">
1230
+ <i data-lucide="droplets" class="module-icon"></i>
1231
+ <p class="caption">Watershed Programme</p>
1232
+ </div>
1233
+ <h3 style="font-size:18px;line-height:1.1;max-width:240px;">Glacial Meltwater Monitoring · Mont Blanc</h3>
1234
+ <p style="font-size:13px;line-height:1.52;max-width:245px;">Partnering with CNRS, Summit funds a network of 14 automated sensors measuring turbidity, flow rate, and mineral load in four glacial outwash streams on the Mont Blanc massif, generating data used in French government water management planning.</p>
1235
+ <p class="media-caption">Mont Blanc Massif · CNRS Partnership</p>
1236
+ </div>
1237
+ </div>
1238
+
1239
+ </div>
1240
+ <div class="page-number">04 / 11</div>
1241
+ </div>
1242
+ </div>
1243
+ </section>
1244
+
1245
+ <!-- ════════════════════════════════════════════════════════
1246
+ SLIDE 5 — DECARBONISATION PATHWAY (3 LEVERS)
1247
+ Layout: narrative-hero-right · slide-qa=true
1248
+ ═══════════════════════════════════════════════════════════ -->
1249
+ <section class="slide" slide-qa="true" data-index="5">
1250
+ <div class="slide-canvas">
1251
+ <div class="page" style="padding:0;overflow:hidden;background:var(--bg-frame);">
1252
+ <div class="narrative-hero-grid">
1253
+ <div class="report-text-panel report-text-panel--dark reveal" style="position:relative;overflow:hidden;">
1254
+ <img src="https://images.unsplash.com/photo-1483728642387-6c3bdd6c93e5?q=80&w=1200&auto=format&fit=crop" alt="Alpine ridge in morning fog" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;">
1255
+ <div style="position:absolute;inset:0;background:linear-gradient(160deg,rgba(23,18,14,0.82) 0%,rgba(23,18,14,0.72) 100%);z-index:1;"></div>
1256
+ <div style="position:relative;z-index:2;max-width:420px;">
1257
+ <p class="eyebrow" style="color:rgba(243,238,230,0.6);">Strategic Approach</p>
1258
+ <h2 style="margin-top:16px;font-size:52px;line-height:0.9;letter-spacing:-0.03em;text-transform:uppercase;color:#f7f4ee;max-width:380px;">Three Levers, One Deadline</h2>
1259
+ <div style="width:40px;height:2px;background:var(--accent-gold);margin:20px 0;"></div>
1260
+ <p style="margin-top:0;font-size:13px;line-height:1.6;color:rgba(243,238,230,0.84);max-width:390px;">Our net-zero strategy is built around three interdependent levers that must be pulled simultaneously. Each lever targets a distinct portion of our emissions inventory and requires a different organisational capability and investment horizon.</p>
1261
+ <p style="margin-top:16px;font-size:13px;line-height:1.6;color:rgba(243,238,230,0.76);max-width:390px;">The sequence is not linear. Operational efficiency gains fund supplier transition programmes; improved supplier traceability unlocks material substitution at scale; and permanent carbon removal is held as a last resort, not an offset mechanism.</p>
1262
+ </div>
1263
+ <div class="report-panel-footer" style="color:rgba(243,238,230,0.5);position:relative;z-index:2;">
1264
+ <p class="caption">Summit Outdoor Co. · Climate Report 2026</p>
1265
+ <p class="caption">11</p>
1266
+ </div>
1267
+ </div>
1268
+ <!-- Right side -->
1269
+ <div class="reveal" style="background:var(--bg-page);height:100%;display:flex;flex-direction:column;justify-content:center;padding:72px 80px;">
1270
+ <p class="eyebrow" style="margin-bottom:36px;">Decarbonisation Levers</p>
1271
+ <div class="flow-horizontal">
1272
+ <div class="flow-item">
1273
+ <div class="flow-number">01</div>
1274
+ <div class="flow-body">
1275
+ <h4>Operational Efficiency</h4>
1276
+ <p>Reduce direct energy consumption in owned and leased facilities. Target: 100% renewable electricity by end of 2026. Current status: 94% of global floor area on renewable tariffs or on-site generation.</p>
1277
+ <p style="margin-top:12px;font-size:13px;color:var(--text-muted);">Est. abatement: 4,200 tCO₂e / yr</p>
1278
+ </div>
1279
+ </div>
1280
+ <div class="flow-item">
1281
+ <div class="flow-number">02</div>
1282
+ <div class="flow-body">
1283
+ <h4>Supply Chain Transition</h4>
1284
+ <p>Require Scope 1 and 2 decarbonisation plans from all tier-1 suppliers by 2027, with binding reduction targets embedded in contract renewals. Provide technical and financial support for mill efficiency upgrades.</p>
1285
+ <p style="margin-top:12px;font-size:13px;color:var(--text-muted);">Est. abatement: 28,600 tCO₂e / yr</p>
1286
+ </div>
1287
+ </div>
1288
+ <div class="flow-item">
1289
+ <div class="flow-number">03</div>
1290
+ <div class="flow-body">
1291
+ <h4>Permanent Carbon Removal</h4>
1292
+ <p>Commission high-durability CDR (biochar, enhanced weathering) to address residual hard-to-abate emissions. No reliance on avoided-deforestation credits. Budget ring-fenced from 2028 onwards.</p>
1293
+ <p style="margin-top:12px;font-size:13px;color:var(--text-muted);">Target residual: &lt;3,000 tCO₂e</p>
1294
+ </div>
1295
+ </div>
1296
+ </div>
1297
+ </div>
1298
+ </div>
1299
+ <div class="page-number">05 / 11</div>
1300
+ </div>
1301
+ </div>
1302
+ </section>
1303
+
1304
+ <!-- ════════════════════════════════════════════════════════
1305
+ SLIDE 6 — DECARBONISATION ROADMAP
1306
+ Layout: narrative-hero-left · slide-qa=true
1307
+ ═══════════════════════════════════════════════════════════ -->
1308
+ <section class="slide" slide-qa="true" data-index="6">
1309
+ <div class="slide-canvas">
1310
+ <div class="page alt" style="padding:0;overflow:hidden;background:var(--bg-page-alt);">
1311
+ <div class="narrative-hero-grid narrative-hero-grid--reversed">
1312
+ <!-- Left side -->
1313
+ <div class="reveal" style="position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:56px 64px;">
1314
+ <img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?q=80&w=1800&auto=format&fit=crop" alt="Alpine trail at high altitude" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;">
1315
+ <div style="position:absolute;inset:0;background:linear-gradient(160deg,rgba(23,18,14,0.82) 0%,rgba(23,18,14,0.72) 100%);z-index:1;"></div>
1316
+ <div style="position:relative;z-index:2;">
1317
+ <p class="eyebrow" style="margin-bottom:8px;color:rgba(247,244,238,0.6);">05 · Decarbonisation Roadmap</p>
1318
+ <h2 style="font-size:36px;line-height:0.96;letter-spacing:-0.03em;text-transform:uppercase;margin-bottom:36px;max-width:520px;color:#f7f4ee;">Four Phases to Net Zero</h2>
1319
+ <div class="rule" style="margin-bottom:36px;background:rgba(247,244,238,0.2);"></div>
1320
+ <div class="flow-vertical">
1321
+ <div class="flow-item">
1322
+ <div class="flow-marker">
1323
+ <div class="flow-number" style="border-color:rgba(247,244,238,0.3);color:rgba(247,244,238,0.55);">01</div>
1324
+ <div class="flow-line" style="background:rgba(247,244,238,0.25);"></div>
1325
+ </div>
1326
+ <div class="flow-body">
1327
+ <h4 style="color:#f7f4ee;">Raw Material Audit · 2024–2025</h4>
1328
+ <p style="color:rgba(247,244,238,0.75);">Full lifecycle assessment of every material category above 500 kg annual volume. Identifies hotspots and establishes substitution priorities. Completed across 94% of SKU volume.</p>
1329
+ </div>
1330
+ </div>
1331
+ <div class="flow-item">
1332
+ <div class="flow-marker">
1333
+ <div class="flow-number" style="border-color:rgba(247,244,238,0.3);color:rgba(247,244,238,0.55);">02</div>
1334
+ <div class="flow-line" style="background:rgba(247,244,238,0.25);"></div>
1335
+ </div>
1336
+ <div class="flow-body">
1337
+ <h4 style="color:#f7f4ee;">Supply Chain Transition · 2025–2027</h4>
1338
+ <p style="color:rgba(247,244,238,0.75);">Binding emission reduction schedules embedded in tier-1 supplier contracts. Technical support programme active with 18 mills. Traceability platform deployed for 76% of fabric spend.</p>
1339
+ </div>
1340
+ </div>
1341
+ <div class="flow-item">
1342
+ <div class="flow-marker">
1343
+ <div class="flow-number" style="border-color:rgba(247,244,238,0.3);color:rgba(247,244,238,0.55);">03</div>
1344
+ <div class="flow-line" style="background:rgba(247,244,238,0.25);"></div>
1345
+ </div>
1346
+ <div class="flow-body">
1347
+ <h4 style="color:#f7f4ee;">Product Life Extension · 2026–2029</h4>
1348
+ <p style="color:rgba(247,244,238,0.75);">Standardised repairability specs mandated across all technical outerwear. Take-back programme expansion to North America and Japan. Resale revenue target: €12M by 2029.</p>
1349
+ </div>
1350
+ </div>
1351
+ <div class="flow-item last">
1352
+ <div class="flow-marker">
1353
+ <div class="flow-number" style="border-color:rgba(247,244,238,0.3);color:rgba(247,244,238,0.55);">04</div>
1354
+ </div>
1355
+ <div class="flow-body">
1356
+ <h4 style="color:#f7f4ee;">Carbon Removal &amp; Closure · 2028–2030</h4>
1357
+ <p style="color:rgba(247,244,238,0.75);">Ring-fenced budget for high-durability CDR to address hard-to-abate residual. Net-zero declaration scheduled for 2030 subject to third-party verification against Science Based Targets initiative criteria.</p>
1358
+ </div>
1359
+ </div>
1360
+ </div>
1361
+ </div>
1362
+ </div>
1363
+ <!-- Right side -->
1364
+ <div class="report-text-panel report-text-panel--light reveal">
1365
+ <div style="max-width:390px;">
1366
+ <p class="eyebrow" style="color:var(--text-muted);">Roadmap Rationale</p>
1367
+ <h2 style="margin-top:16px;font-size:44px;line-height:0.92;letter-spacing:-0.03em;text-transform:uppercase;color:var(--text-primary);max-width:340px;">Sequenced, Not Simultaneous</h2>
1368
+ <div style="width:40px;height:2px;background:var(--accent-earth);margin:20px 0;"></div>
1369
+ <p style="margin-top:0;font-size:13px;line-height:1.6;color:var(--text-secondary);max-width:360px;">The four phases are designed to compound. Each earlier phase builds the organisational capability, supplier relationships, and data infrastructure that the following phase depends on.</p>
1370
+ <p style="margin-top:16px;font-size:13px;line-height:1.6;color:var(--text-secondary);max-width:360px;">Attempting all four phases simultaneously would dilute attention and create conflicting investment priorities. The sequenced model also allows us to retire each phase formally, with verified outcomes, before proceeding — a structure our board-level Climate Committee reviews annually.</p>
1371
+ <p style="margin-top:16px;font-size:13px;line-height:1.6;color:var(--text-secondary);max-width:360px;">Independent progress reviews are conducted each August, with public disclosure in October. Phase 2 received its first formal midpoint review in August 2026; findings are referenced in the assurance annex.</p>
1372
+ </div>
1373
+ <div class="report-panel-footer" style="color:var(--text-muted);">
1374
+ <p class="caption">Summit Outdoor Co. · Climate Report 2026</p>
1375
+ <p class="caption">15</p>
1376
+ </div>
1377
+ </div>
1378
+ </div>
1379
+ <div class="page-number">06 / 11</div>
1380
+ </div>
1381
+ </div>
1382
+ </section>
1383
+
1384
+ <!-- ════════════════════════════════════════════════════════
1385
+ SLIDE 7 — EMISSIONS DATA TABLE
1386
+ Layout: narrative-hero-right · slide-qa=true
1387
+ ═══════════════════════════════════════════════════════════ -->
1388
+ <section class="slide" slide-qa="true" data-index="7">
1389
+ <div class="slide-canvas">
1390
+ <div class="page" style="padding:0;overflow:hidden;background:var(--bg-frame);">
1391
+ <div class="narrative-hero-grid">
1392
+ <div class="report-text-panel report-text-panel--dark reveal">
1393
+ <div style="max-width:420px;">
1394
+ <p class="eyebrow" style="color:rgba(243,238,230,0.6);">06 · Assurance Tables</p>
1395
+ <h2 style="margin-top:16px;font-size:52px;line-height:0.9;letter-spacing:-0.03em;text-transform:uppercase;color:#f7f4ee;max-width:380px;">Emissions by Scope 2022–2026</h2>
1396
+ <div style="width:40px;height:2px;background:var(--accent-gold);margin:20px 0;"></div>
1397
+ <p style="margin-top:0;font-size:13px;line-height:1.6;color:rgba(243,238,230,0.84);max-width:390px;">All figures independently verified by Bureau Veritas to ISAE 3000 (Revised) limited assurance standard. Prior-year figures have been restated for the 2026 logistics reclassification.</p>
1398
+ <p style="margin-top:16px;font-size:13px;line-height:1.6;color:rgba(243,238,230,0.76);max-width:390px;">Scope 3 categories included: purchased goods and services, upstream transportation, business travel, employee commuting, end-of-life treatment of sold products, and downstream leased assets.</p>
1399
+ <p style="margin-top:16px;font-size:13px;line-height:1.6;color:rgba(243,238,230,0.76);max-width:390px;">Year-on-year delta columns use 2022 as the baseline year. The marked improvement in Scope 2 from 2023 onwards reflects the full-year effect of renewable electricity agreements signed in Q4 2022.</p>
1400
+ </div>
1401
+ <div class="report-panel-footer" style="color:rgba(243,238,230,0.5);">
1402
+ <p class="caption">Summit Outdoor Co. · Climate Report 2026</p>
1403
+ <p class="caption">17</p>
1404
+ </div>
1405
+ </div>
1406
+ <!-- Right side -->
1407
+ <div class="reveal" style="background:var(--bg-page);height:100%;display:flex;flex-direction:column;justify-content:center;padding:56px 60px;">
1408
+ <p class="eyebrow" style="margin-bottom:24px;">GHG Inventory · kt CO₂e</p>
1409
+ <div class="data-table-wrap">
1410
+ <table class="data-table">
1411
+ <thead>
1412
+ <tr>
1413
+ <th style="min-width:160px;">Scope</th>
1414
+ <th>2022</th>
1415
+ <th>2023</th>
1416
+ <th>2024</th>
1417
+ <th>2025</th>
1418
+ <th>2026</th>
1419
+ <th>vs. 2022</th>
1420
+ </tr>
1421
+ </thead>
1422
+ <tbody>
1423
+ <tr>
1424
+ <td>Scope 1 — Direct combustion</td>
1425
+ <td>3.2</td>
1426
+ <td>2.9</td>
1427
+ <td>2.4</td>
1428
+ <td>2.1</td>
1429
+ <td>1.9</td>
1430
+ <td class="delta negative">−41%</td>
1431
+ </tr>
1432
+ <tr>
1433
+ <td>Scope 2 — Purchased electricity</td>
1434
+ <td>6.8</td>
1435
+ <td>4.1</td>
1436
+ <td>2.6</td>
1437
+ <td>1.8</td>
1438
+ <td>1.4</td>
1439
+ <td class="delta negative">−79%</td>
1440
+ </tr>
1441
+ <tr class="subtotal">
1442
+ <td>Scope 1+2 (net)</td>
1443
+ <td>10.0</td>
1444
+ <td>7.0</td>
1445
+ <td>5.0</td>
1446
+ <td>3.9</td>
1447
+ <td>3.3</td>
1448
+ <td class="delta negative">−67%</td>
1449
+ </tr>
1450
+ <tr>
1451
+ <td>Scope 3 — Purchased goods &amp; services</td>
1452
+ <td>28.4</td>
1453
+ <td>27.1</td>
1454
+ <td>25.8</td>
1455
+ <td>23.6</td>
1456
+ <td>21.2</td>
1457
+ <td class="delta negative">−25%</td>
1458
+ </tr>
1459
+ <tr>
1460
+ <td>Scope 3 — Upstream logistics</td>
1461
+ <td>5.6</td>
1462
+ <td>5.2</td>
1463
+ <td>4.8</td>
1464
+ <td>4.3</td>
1465
+ <td>3.9</td>
1466
+ <td class="delta negative">−30%</td>
1467
+ </tr>
1468
+ <tr>
1469
+ <td>Scope 3 — Business travel &amp; commute</td>
1470
+ <td>1.8</td>
1471
+ <td>1.6</td>
1472
+ <td>1.4</td>
1473
+ <td>1.2</td>
1474
+ <td>1.0</td>
1475
+ <td class="delta negative">−44%</td>
1476
+ </tr>
1477
+ <tr>
1478
+ <td>Scope 3 — End-of-life treatment</td>
1479
+ <td>2.4</td>
1480
+ <td>2.2</td>
1481
+ <td>2.0</td>
1482
+ <td>1.8</td>
1483
+ <td>2.0</td>
1484
+ <td class="delta negative">−17%</td>
1485
+ </tr>
1486
+ <tr class="subtotal">
1487
+ <td>Scope 3 total</td>
1488
+ <td>38.2</td>
1489
+ <td>36.1</td>
1490
+ <td>34.0</td>
1491
+ <td>30.9</td>
1492
+ <td>28.1</td>
1493
+ <td class="delta negative">−26%</td>
1494
+ </tr>
1495
+ <tr class="subtotal">
1496
+ <td>Total gross emissions</td>
1497
+ <td>48.2</td>
1498
+ <td>43.1</td>
1499
+ <td>39.0</td>
1500
+ <td>34.8</td>
1501
+ <td>31.4</td>
1502
+ <td class="delta negative">−35%</td>
1503
+ </tr>
1504
+ </tbody>
1505
+ </table>
1506
+ <p class="table-caption">Thousands of tonnes CO₂e · Bureau Veritas ISAE 3000 Limited Assurance · Restated for 2026 logistics reclassification</p>
1507
+ </div>
1508
+ </div>
1509
+ </div>
1510
+ <div class="page-number">07 / 11</div>
1511
+ </div>
1512
+ </div>
1513
+ </section>
1514
+
1515
+ <!-- ════════════════════════════════════════════════════════
1516
+ SLIDE 8 — CARBON PATHWAY: ACTION PLAN
1517
+ Layout: split-dashboard · slide-qa=true
1518
+ ═══════════════════════════════════════════════════════════ -->
1519
+ <section class="slide" slide-qa="true" data-index="8">
1520
+ <div class="slide-canvas">
1521
+ <div class="page" style="overflow:hidden;position:relative;">
1522
+ <!-- Full-page pine forest background -->
1523
+ <img
1524
+ src="https://images.unsplash.com/photo-1473773508845-188df298d2d1?q=80&w=1800&auto=format&fit=crop"
1525
+ alt=""
1526
+ style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 48%;z-index:0;"
1527
+ >
1528
+ <!-- Gradient overlay: dark forest overlay -->
1529
+ <div style="position:absolute;inset:0;z-index:1;background:rgba(14,12,10,0.72);"></div>
1530
+ <!-- Content above overlay -->
1531
+ <div class="split-dashboard" style="position:relative;z-index:2;color:#f7f4ee;">
1532
+
1533
+ <!-- Top band: flow-horizontal -->
1534
+ <div class="split-top">
1535
+ <p class="slide-eyebrow" style="font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:rgba(247,244,238,0.55);margin-bottom:24px;">Carbon Pathway 2026–2030</p>
1536
+ <div class="flow-horizontal">
1537
+ <div class="flow-item">
1538
+ <div class="flow-number" style="border-color:rgba(247,244,238,0.3);color:rgba(247,244,238,0.6);">01</div>
1539
+ <div class="flow-body">
1540
+ <h4 style="color:#f7f4ee;">Assess</h4>
1541
+ <p style="color:rgba(247,244,238,0.7);">Full-scope baseline audit across Tier 1–3 suppliers, owned manufacturing, retail operations, and last-mile logistics. Results form the binding 2026 emissions inventory submitted to Bureau Veritas for third-party assurance. All data collected against the GHG Protocol Corporate Standard, with market-based Scope 2 accounting applied across 14 countries.</p>
1542
+ </div>
1543
+ </div>
1544
+ <div class="flow-item">
1545
+ <div class="flow-number" style="border-color:rgba(247,244,238,0.3);color:rgba(247,244,238,0.6);">02</div>
1546
+ <div class="flow-body">
1547
+ <h4 style="color:#f7f4ee;">Reduce</h4>
1548
+ <p style="color:rgba(247,244,238,0.7);">Transition primary manufacturing sites to certified renewable electricity by 2027. Parallel workstream: packaging redesign targeting 40% virgin plastic elimination.</p>
1549
+ </div>
1550
+ </div>
1551
+ <div class="flow-item">
1552
+ <div class="flow-number" style="border-color:rgba(247,244,238,0.3);color:rgba(247,244,238,0.6);">03</div>
1553
+ <div class="flow-body">
1554
+ <h4 style="color:#f7f4ee;">Offset</h4>
1555
+ <p style="color:rgba(247,244,238,0.7);">High-integrity forest and blue carbon credits verified under Gold Standard VER. Capped at 15% of residual emissions — not a substitute for reduction.</p>
1556
+ </div>
1557
+ </div>
1558
+ <div class="flow-item">
1559
+ <div class="flow-number" style="border-color:rgba(247,244,238,0.3);color:rgba(247,244,238,0.6);">04</div>
1560
+ <div class="flow-body">
1561
+ <h4 style="color:#f7f4ee;">Certify</h4>
1562
+ <p style="color:rgba(247,244,238,0.7);">ISO 14064-3 third-party verification and Net Zero declaration by December 2030.</p>
1563
+ </div>
1564
+ </div>
1565
+ </div>
1566
+ </div><!-- /.split-top -->
1567
+
1568
+ <!-- Bottom zone -->
1569
+ <div class="split-bottom">
1570
+
1571
+ <!-- Left: data-table -->
1572
+ <div class="split-table-col">
1573
+ <div class="data-table-wrap" style="--text-primary:#f7f4ee;--text-secondary:rgba(247,244,238,0.7);--text-muted:rgba(247,244,238,0.45);--line:rgba(247,244,238,0.12);--line-strong:rgba(247,244,238,0.28);--accent-earth:var(--accent-gold);--accent-olive:#8faf7e;color:#f7f4ee;">
1574
+ <table class="data-table">
1575
+ <thead>
1576
+ <tr>
1577
+ <th>Category</th>
1578
+ <th>2024</th>
1579
+ <th>2025</th>
1580
+ <th class="col-highlight">2026</th>
1581
+ <th>YoY</th>
1582
+ </tr>
1583
+ </thead>
1584
+ <tbody>
1585
+ <tr>
1586
+ <td>Apparel</td>
1587
+ <td>18.4</td>
1588
+ <td>16.1</td>
1589
+ <td class="col-highlight">14.2</td>
1590
+ <td class="delta positive">−12%</td>
1591
+ </tr>
1592
+ <tr>
1593
+ <td>Footwear</td>
1594
+ <td>9.7</td>
1595
+ <td>8.4</td>
1596
+ <td class="col-highlight">7.3</td>
1597
+ <td class="delta positive">−13%</td>
1598
+ </tr>
1599
+ <tr>
1600
+ <td>Accessories</td>
1601
+ <td>4.2</td>
1602
+ <td>3.9</td>
1603
+ <td class="col-highlight">3.4</td>
1604
+ <td class="delta positive">−13%</td>
1605
+ </tr>
1606
+ <tr>
1607
+ <td>Logistics &amp; Ops</td>
1608
+ <td>5.1</td>
1609
+ <td>4.7</td>
1610
+ <td class="col-highlight">4.1</td>
1611
+ <td class="delta positive">−13%</td>
1612
+ </tr>
1613
+ <tr class="subtotal">
1614
+ <td>Total (kt CO₂e)</td>
1615
+ <td>37.4</td>
1616
+ <td>33.1</td>
1617
+ <td class="col-highlight">28.9</td>
1618
+ <td class="delta positive">−13%</td>
1619
+ </tr>
1620
+ </tbody>
1621
+ </table>
1622
+ <p class="table-caption" style="color:rgba(247,244,238,0.45);">Thousands of tonnes CO₂e · Scope 1+2+3 combined · Bureau Veritas assured</p>
1623
+ </div>
1624
+ </div>
1625
+
1626
+ <!-- Right: echart-panel (area) -->
1627
+ <div class="echart-panel split-chart-col" style="display:flex;flex-direction:column;height:100%;background:transparent;padding:0;color:#f7f4ee;">
1628
+ <div class="echart-header">
1629
+ <p class="echart-title" style="color:#f7f4ee;">Internal Carbon Price</p>
1630
+ <p class="echart-subtitle" style="color:rgba(247,244,238,0.55);">USD / tonne CO₂e · 2022–2026 monthly</p>
1631
+ </div>
1632
+ <div class="echart-container" id="chart-carbon-area" style="flex:1;min-height:0;height:100%;background:transparent;"></div>
1633
+ </div>
1634
+
1635
+ </div><!-- /.split-bottom -->
1636
+ </div><!-- /.split-dashboard -->
1637
+ <div class="page-number page-number--light">08 / 11</div>
1638
+ </div>
1639
+ </div>
1640
+ </section>
1641
+
1642
+ <!-- ════════════════════════════════════════════════════════
1643
+ SLIDE 9 — YEAR IN BRIEF
1644
+ Layout: brief-grid · slide-qa=true
1645
+ ═══════════════════════════════════════════════════════════ -->
1646
+ <section class="slide" slide-qa="true" data-index="9">
1647
+ <div class="slide-canvas">
1648
+ <div class="page brief-grid">
1649
+ <div class="brief-grid-top">
1650
+ <div class="brief-grid-narrative reveal">
1651
+ <p class="eyebrow">07 · Year In Brief</p>
1652
+ <h2 style="margin-top:14px;font-size:38px;line-height:0.96;letter-spacing:-0.02em;text-transform:uppercase;max-width:520px;">2026 in brief</h2>
1653
+ <div class="rule" style="margin:20px 0 22px;"></div>
1654
+ <ul class="editorial-list">
1655
+ <li style="font-size:13px;line-height:1.58;">67% of all fibre volume used in technical apparel now comes from recycled or bio-based inputs, up from 41% in the 2022 baseline year.</li>
1656
+ <li style="font-size:13px;line-height:1.58;">Renewable electricity contracts now cover 94% of owned and leased floor area, reducing market-based Scope 2 emissions by 79% versus 2022.</li>
1657
+ <li style="font-size:13px;line-height:1.58;">The repair and take-back programme processed 18,400 garments this year, diverting 112 tonnes CO₂e of production emissions through resale and refurbishment.</li>
1658
+ <li style="font-size:13px;line-height:1.58;">Supplier transition plans are active across 18 strategic mills, representing 76% of fabric spend and 63% of category emissions.</li>
1659
+ <li style="font-size:13px;line-height:1.58;">Our 2030 roadmap remains on track, but chemical finishes, trims, and high-load structural components remain the largest residual material challenge.</li>
1660
+ </ul>
1661
+ </div>
1662
+
1663
+ <div class="brief-grid-feature reveal">
1664
+ <div class="editorial-image-top">
1665
+ <div class="media-frame editorial-media" style="flex:1;min-height:0;">
1666
+ <img src="https://images.unsplash.com/photo-1511497584788-876760111969?q=80&w=1200&auto=format&fit=crop" alt="Summit shell program redesign hero image">
1667
+ </div>
1668
+ <div class="editorial-module-body" style="padding:20px 24px 16px;">
1669
+ <div class="module-kicker-row">
1670
+ <i data-lucide="mountain" class="module-icon"></i>
1671
+ <p class="caption">Feature programme</p>
1672
+ </div>
1673
+ <h3 style="margin-top:8px;font-size:20px;line-height:1.08;">Shell redesign programme enters commercial scale</h3>
1674
+ <p style="font-size:13px;line-height:1.5;margin-top:8px;color:var(--text-secondary);">A three-season redesign of our alpine shell platform enabled higher rPET content while preserving waterproof-breathable performance in cold-weather field tests.</p>
1675
+ </div>
1676
+ </div>
1677
+ </div>
1678
+ </div>
1679
+
1680
+ <div class="brief-grid-bottom">
1681
+ <div class="brief-grid-card reveal">
1682
+ <div class="editorial-text-left">
1683
+ <div class="editorial-text-left-header">
1684
+ <h3 style="font-size:18px;line-height:1.08;">Repair network expands to 42 service points</h3>
1685
+ </div>
1686
+ <div class="editorial-text-left-content">
1687
+ <div class="editorial-text-left-copy">
1688
+ <div class="module-kicker-row">
1689
+ <i data-lucide="refresh-ccw" class="module-icon"></i>
1690
+ <p class="caption">Circular systems</p>
1691
+ </div>
1692
+ <p style="font-size:13px;line-height:1.5;margin-top:10px;color:var(--text-secondary);">Lead times fell from 24 to 11 days as in-market repair hubs replaced centralized return handling across France, Germany, and the Nordics.</p>
1693
+ </div>
1694
+ <div class="editorial-text-left-visual">
1695
+ <div class="media-frame" style="width:100%;height:100%;">
1696
+ <img src="https://images.unsplash.com/photo-1522163182402-834f871fd851?q=80&w=900&auto=format&fit=crop" alt="Garment repair bench and technical apparel details">
1697
+ </div>
1698
+ </div>
1699
+ </div>
1700
+ </div>
1701
+ </div>
1702
+
1703
+ <div class="brief-grid-card reveal">
1704
+ <div class="editorial-text-left">
1705
+ <div class="editorial-text-left-header">
1706
+ <h3 style="font-size:18px;line-height:1.08;">Mill electrification pilots reduce heat-process intensity</h3>
1707
+ </div>
1708
+ <div class="editorial-text-left-content">
1709
+ <div class="editorial-text-left-copy">
1710
+ <div class="module-kicker-row">
1711
+ <i data-lucide="factory" class="module-icon"></i>
1712
+ <p class="caption">Supplier transition</p>
1713
+ </div>
1714
+ <p style="font-size:13px;line-height:1.5;margin-top:10px;color:var(--text-secondary);">Two strategic dyeing partners completed boiler retrofits and heat recovery pilots, cutting process emissions by 14% per metre of finished fabric.</p>
1715
+ </div>
1716
+ <div class="editorial-text-left-visual">
1717
+ <div class="media-frame" style="width:100%;height:100%;">
1718
+ <img src="https://images.unsplash.com/photo-1473448912268-2022ce9509d8?q=80&w=900&auto=format&fit=crop" alt="Industrial landscape representing supplier transition">
1719
+ </div>
1720
+ </div>
1721
+ </div>
1722
+ </div>
1723
+ </div>
1724
+ </div>
1725
+ <div class="page-number">09 / 11</div>
1726
+ </div>
1727
+ </div>
1728
+ </section>
1729
+
1730
+ <!-- ════════════════════════════════════════════════════════
1731
+ SLIDE 10 — DATA BRIEF
1732
+ Layout: data-brief · slide-qa=true
1733
+ ═══════════════════════════════════════════════════════════ -->
1734
+ <section class="slide" slide-qa="true" data-index="10">
1735
+ <div class="slide-canvas">
1736
+ <div class="data-brief">
1737
+ <div class="data-brief-narrative reveal">
1738
+ <div style="max-width:440px;">
1739
+ <p class="eyebrow" style="color:rgba(243,238,230,0.55);">08 · Climate data brief</p>
1740
+ <h2 style="margin-top:14px;font-size:52px;line-height:0.92;letter-spacing:-0.03em;text-transform:uppercase;color:#f7f4ee;max-width:420px;">Progress by source</h2>
1741
+ <div style="width:36px;height:2px;background:var(--accent-gold);margin:20px 0;"></div>
1742
+ <ul class="editorial-list" style="--list-color:rgba(243,238,230,0.80);">
1743
+ <li style="font-size:13px;line-height:1.58;color:rgba(243,238,230,0.80);">Direct operations continue to decarbonise fastest, with Scope 1 and 2 now representing just 11% of gross emissions.</li>
1744
+ <li style="font-size:13px;line-height:1.58;color:rgba(243,238,230,0.80);">Purchased goods and services remain the largest structural source, but intensity is falling as supplier transition plans move from reporting to equipment upgrades.</li>
1745
+ <li style="font-size:13px;line-height:1.58;color:rgba(243,238,230,0.80);">Logistics and downstream end-of-life impacts show smaller absolute shares, but they require separate operational levers rather than material substitution alone.</li>
1746
+ </ul>
1747
+ </div>
1748
+ <div style="margin-top:28px;padding-top:20px;border-top:1px solid rgba(247,244,238,0.14);max-width:440px;">
1749
+ <p class="eyebrow" style="color:rgba(243,238,230,0.45);margin-bottom:10px;">Forward looking</p>
1750
+ <p style="font-size:13px;line-height:1.58;color:rgba(243,238,230,0.70);">2027 focus shifts from quick operational wins to supplier-side energy, chemistry, and process redesign, where payback periods are longer but abatement potential is materially larger.</p>
1751
+ </div>
1752
+ </div>
1753
+
1754
+ <div class="data-brief-data reveal">
1755
+ <div class="dense-table-wrap">
1756
+ <p class="dense-table-label">Emissions by source — kt CO₂e</p>
1757
+ <table class="dense-table">
1758
+ <thead>
1759
+ <tr>
1760
+ <th>Category</th>
1761
+ <th>2022</th>
1762
+ <th>2023</th>
1763
+ <th>2024</th>
1764
+ <th class="col-highlight">2025</th>
1765
+ <th class="col-highlight">2026</th>
1766
+ <th>vs. 2022</th>
1767
+ </tr>
1768
+ </thead>
1769
+ <tbody>
1770
+ <tr>
1771
+ <td>Purchased goods &amp; services</td>
1772
+ <td>28.4</td>
1773
+ <td>27.1</td>
1774
+ <td>25.8</td>
1775
+ <td class="col-highlight">23.6</td>
1776
+ <td class="col-highlight">21.2</td>
1777
+ <td class="delta positive">-25%</td>
1778
+ </tr>
1779
+ <tr>
1780
+ <td>Upstream logistics</td>
1781
+ <td>5.6</td>
1782
+ <td>5.2</td>
1783
+ <td>4.8</td>
1784
+ <td class="col-highlight">4.3</td>
1785
+ <td class="col-highlight">3.9</td>
1786
+ <td class="delta positive">-30%</td>
1787
+ </tr>
1788
+ <tr>
1789
+ <td>Business travel &amp; commute</td>
1790
+ <td>1.8</td>
1791
+ <td>1.6</td>
1792
+ <td>1.4</td>
1793
+ <td class="col-highlight">1.2</td>
1794
+ <td class="col-highlight">1.0</td>
1795
+ <td class="delta positive">-44%</td>
1796
+ </tr>
1797
+ <tr class="subtotal">
1798
+ <td>Scope 3 total</td>
1799
+ <td>38.2</td>
1800
+ <td>36.1</td>
1801
+ <td>34.0</td>
1802
+ <td class="col-highlight">30.9</td>
1803
+ <td class="col-highlight">28.1</td>
1804
+ <td class="delta positive">-26%</td>
1805
+ </tr>
1806
+ </tbody>
1807
+ </table>
1808
+ </div>
1809
+ <div class="dense-table-wrap" style="margin-top:18px;">
1810
+ <p class="dense-table-label">Operational indicators</p>
1811
+ <table class="dense-table">
1812
+ <thead>
1813
+ <tr>
1814
+ <th>Indicator</th>
1815
+ <th>2022</th>
1816
+ <th>2023</th>
1817
+ <th>2024</th>
1818
+ <th class="col-highlight">2025</th>
1819
+ <th class="col-highlight">2026</th>
1820
+ <th>YoY</th>
1821
+ </tr>
1822
+ </thead>
1823
+ <tbody>
1824
+ <tr>
1825
+ <td>Renewable floor area %</td>
1826
+ <td>38</td>
1827
+ <td>61</td>
1828
+ <td>78</td>
1829
+ <td class="col-highlight">89</td>
1830
+ <td class="col-highlight">94</td>
1831
+ <td class="delta positive">+5pp</td>
1832
+ </tr>
1833
+ <tr>
1834
+ <td>Repair turnaround days</td>
1835
+ <td>29</td>
1836
+ <td>26</td>
1837
+ <td>18</td>
1838
+ <td class="col-highlight">14</td>
1839
+ <td class="col-highlight">11</td>
1840
+ <td class="delta positive">-3d</td>
1841
+ </tr>
1842
+ <tr>
1843
+ <td>Supplier plans active</td>
1844
+ <td>4</td>
1845
+ <td>7</td>
1846
+ <td>12</td>
1847
+ <td class="col-highlight">15</td>
1848
+ <td class="col-highlight">18</td>
1849
+ <td class="delta positive">+3</td>
1850
+ </tr>
1851
+ <tr class="subtotal">
1852
+ <td>Residual emissions intensity</td>
1853
+ <td>100</td>
1854
+ <td>92</td>
1855
+ <td>84</td>
1856
+ <td class="col-highlight">75</td>
1857
+ <td class="col-highlight">65</td>
1858
+ <td class="delta positive">-10 pts</td>
1859
+ </tr>
1860
+ </tbody>
1861
+ </table>
1862
+ </div>
1863
+ <div class="dense-table-wrap" style="margin-top:18px;">
1864
+ <p class="dense-table-label">Capital & Investment</p>
1865
+ <table class="dense-table">
1866
+ <thead>
1867
+ <tr>
1868
+ <th>Item</th>
1869
+ <th>2022</th>
1870
+ <th>2023</th>
1871
+ <th>2024</th>
1872
+ <th class="col-highlight">2025</th>
1873
+ <th class="col-highlight">2026</th>
1874
+ <th>YoY</th>
1875
+ </tr>
1876
+ </thead>
1877
+ <tbody>
1878
+ <tr>
1879
+ <td>Green capex (SEKm)</td>
1880
+ <td>1,240</td>
1881
+ <td>1,580</td>
1882
+ <td>2,140</td>
1883
+ <td class="col-highlight">2,870</td>
1884
+ <td class="col-highlight">3,410</td>
1885
+ <td class="delta positive">+19%</td>
1886
+ </tr>
1887
+ <tr>
1888
+ <td>R&amp;D spend (SEKm)</td>
1889
+ <td>8,400</td>
1890
+ <td>9,100</td>
1891
+ <td>10,200</td>
1892
+ <td class="col-highlight">11,600</td>
1893
+ <td class="col-highlight">13,100</td>
1894
+ <td class="delta positive">+13%</td>
1895
+ </tr>
1896
+ <tr>
1897
+ <td>Carbon offset purchased (kt)</td>
1898
+ <td>420</td>
1899
+ <td>380</td>
1900
+ <td>310</td>
1901
+ <td class="col-highlight">240</td>
1902
+ <td class="col-highlight">180</td>
1903
+ <td class="delta positive">-25%</td>
1904
+ </tr>
1905
+ <tr class="subtotal">
1906
+ <td>Total climate investment</td>
1907
+ <td>9,640</td>
1908
+ <td>10,680</td>
1909
+ <td>12,340</td>
1910
+ <td class="col-highlight">14,470</td>
1911
+ <td class="col-highlight">16,510</td>
1912
+ <td class="delta positive">+14%</td>
1913
+ </tr>
1914
+ </tbody>
1915
+ </table>
1916
+ </div>
1917
+ </div>
1918
+
1919
+ <div class="data-brief-strip reveal">
1920
+ <div class="mini-chart-strip">
1921
+ <div class="mini-chart-item">
1922
+ <p class="mini-chart-title">Scope 1+2</p>
1923
+ <div class="mini-chart-container" id="chart-brief-01"></div>
1924
+ <p class="mini-chart-caption">kt CO₂e · market based</p>
1925
+ </div>
1926
+ <div class="mini-chart-item">
1927
+ <p class="mini-chart-title">Scope 3 total</p>
1928
+ <div class="mini-chart-container" id="chart-brief-02"></div>
1929
+ <p class="mini-chart-caption">kt CO₂e</p>
1930
+ </div>
1931
+ <div class="mini-chart-item">
1932
+ <p class="mini-chart-title">Repair volumes</p>
1933
+ <div class="mini-chart-container" id="chart-brief-03"></div>
1934
+ <p class="mini-chart-caption">units processed</p>
1935
+ </div>
1936
+ <div class="mini-chart-item">
1937
+ <p class="mini-chart-title">Renewable share</p>
1938
+ <div class="mini-chart-container" id="chart-brief-04"></div>
1939
+ <p class="mini-chart-caption">% of floor area</p>
1940
+ </div>
1941
+ </div>
1942
+ </div>
1943
+ <div class="page-number page-number--light">10 / 11</div>
1944
+ </div>
1945
+ </div>
1946
+ </div>
1947
+ </section>
1948
+
1949
+ <!-- ════════════════════════════════════════════════════════
1950
+ SLIDE 11 — CLOSING
1951
+ Layout: closing · slide-qa=false
1952
+ ═══════════════════════════════════════════════════════════ -->
1953
+ <section class="slide" slide-qa="false" data-index="11">
1954
+ <div class="slide-canvas">
1955
+ <div class="page" style="padding:0;">
1956
+ <div class="hero-field" style="position:absolute;inset:0;">
1957
+ <div class="full-bleed-media" style="height:100%;">
1958
+ <img src="https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?q=80&w=1800&auto=format&fit=crop" alt="Snowy summit ridge at dusk">
1959
+ </div>
1960
+ </div>
1961
+ <div style="position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0.30) 0%,rgba(0,0,0,0.72) 100%);"></div>
1962
+ <div class="closing-title-stack">
1963
+ <div class="closing-brand-label">
1964
+ <div class="chevron-divider reveal" style="color:rgba(247,244,238,0.6);">Summit</div>
1965
+ </div>
1966
+ <div class="closing-body">
1967
+ <h1 class="reveal">The work continues<br>beyond the page.</h1>
1968
+ <p class="closing-subtitle reveal">Progress is verifiable. The targets are binding. We will report again in October 2027 with full Bureau Veritas verification of our 2027 emissions inventory.</p>
1969
+ </div>
1970
+ <div class="closing-footer">
1971
+ <p class="caption reveal" style="color:rgba(247,244,238,0.62);">summit.fieldnotes.com</p>
1972
+ <p class="caption reveal" style="color:rgba(247,244,238,0.62);">Climate Report 2026 · Summit Outdoor Co.</p>
1973
+ </div>
1974
+ </div>
1975
+ <div class="page-number page-number--light">11 / 11</div>
1976
+ </div>
1977
+ </div>
1978
+ </section>
1979
+
1980
+ <script src="https://unpkg.com/lucide@latest"></script>
1981
+ <script>
1982
+ class SlidePresentation {
1983
+ constructor() {
1984
+ this.slides = document.querySelectorAll('.slide');
1985
+ this.currentSlide = 0;
1986
+ this.setupScaling();
1987
+ this.setupIntersectionObserver();
1988
+ this.setupKeyboardNav();
1989
+ this.setupTouchNav();
1990
+ this.setupMouseWheel();
1991
+ }
1992
+
1993
+ setupScaling() {
1994
+ const canvases = document.querySelectorAll('.slide-canvas');
1995
+ const BASE_W = 1920;
1996
+ const BASE_H = 1080;
1997
+ const update = () => {
1998
+ const vw = window.innerWidth;
1999
+ const vh = window.innerHeight;
2000
+ const scale = Math.min(vw / BASE_W, vh / BASE_H);
2001
+ canvases.forEach((canvas) => {
2002
+ canvas.style.transform = `scale(${scale})`;
2003
+ });
2004
+ };
2005
+ window.addEventListener('resize', update);
2006
+ update();
2007
+ }
2008
+
2009
+ setupIntersectionObserver() {
2010
+ const observer = new IntersectionObserver((entries) => {
2011
+ entries.forEach((entry) => {
2012
+ if (entry.isIntersecting) {
2013
+ entry.target.querySelectorAll('.reveal').forEach((el) => el.classList.add('visible'));
2014
+ }
2015
+ });
2016
+ }, { threshold: 0.2 });
2017
+ this.slides.forEach((slide) => observer.observe(slide));
2018
+ }
2019
+
2020
+ setupKeyboardNav() {
2021
+ document.addEventListener('keydown', (event) => {
2022
+ if (['ArrowDown', 'ArrowRight', ' ', 'PageDown'].includes(event.key)) {
2023
+ event.preventDefault();
2024
+ this.goTo(this.currentSlide + 1);
2025
+ } else if (['ArrowUp', 'ArrowLeft', 'PageUp'].includes(event.key)) {
2026
+ event.preventDefault();
2027
+ this.goTo(this.currentSlide - 1);
2028
+ }
2029
+ });
2030
+ }
2031
+
2032
+ setupTouchNav() {
2033
+ let startY = 0;
2034
+ document.addEventListener('touchstart', (event) => {
2035
+ startY = event.touches[0].clientY;
2036
+ }, { passive: true });
2037
+ document.addEventListener('touchend', (event) => {
2038
+ const deltaY = startY - event.changedTouches[0].clientY;
2039
+ if (Math.abs(deltaY) > 40) {
2040
+ this.goTo(this.currentSlide + (deltaY > 0 ? 1 : -1));
2041
+ }
2042
+ }, { passive: true });
2043
+ }
2044
+
2045
+ setupMouseWheel() {
2046
+ let last = 0;
2047
+ document.addEventListener('wheel', (event) => {
2048
+ const now = Date.now();
2049
+ if (now - last < 800) return;
2050
+ last = now;
2051
+ this.goTo(this.currentSlide + (event.deltaY > 0 ? 1 : -1));
2052
+ }, { passive: true });
2053
+ }
2054
+
2055
+ goTo(index) {
2056
+ const clamped = Math.max(0, Math.min(this.slides.length - 1, index));
2057
+ this.slides[clamped].scrollIntoView({ behavior: 'smooth' });
2058
+ this.currentSlide = clamped;
2059
+ }
2060
+ }
2061
+
2062
+ const presentation = new SlidePresentation();
2063
+
2064
+ // Lucide icons
2065
+ lucide.createIcons();
2066
+
2067
+ // ECharts — slide 6 emissions chart
2068
+ const chartEl = document.getElementById('chart-emissions');
2069
+ if (chartEl) {
2070
+ const chart = echarts.init(chartEl);
2071
+ chart.setOption({
2072
+ grid: { top: 20, right: 40, bottom: 36, left: 60 },
2073
+ legend: {
2074
+ bottom: 0,
2075
+ textStyle: { fontSize: 12, color: '#8a7f73', fontFamily: 'Inter, sans-serif' },
2076
+ itemWidth: 14,
2077
+ itemHeight: 8,
2078
+ },
2079
+ tooltip: {
2080
+ trigger: 'axis',
2081
+ backgroundColor: '#2c2828',
2082
+ borderColor: 'rgba(243,238,230,0.12)',
2083
+ textStyle: { color: '#f3eee6', fontSize: 12, fontFamily: 'Inter, sans-serif' },
2084
+ formatter: (params) => {
2085
+ let out = `<div style="font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(243,238,230,0.6);margin-bottom:6px;">${params[0].name}</div>`;
2086
+ params.forEach(p => {
2087
+ out += `<div style="display:flex;justify-content:space-between;gap:24px;"><span>${p.marker} ${p.seriesName}</span><span style="font-weight:600;">${p.value} kt</span></div>`;
2088
+ });
2089
+ return out;
2090
+ },
2091
+ },
2092
+ xAxis: {
2093
+ type: 'category',
2094
+ data: ['2022', '2023', '2024', '2025', '2026'],
2095
+ axisLine: { lineStyle: { color: 'rgba(23,20,17,0.14)' } },
2096
+ axisTick: { show: false },
2097
+ axisLabel: { color: '#8a7f73', fontSize: 12, fontFamily: 'Inter, sans-serif', margin: 10 },
2098
+ },
2099
+ yAxis: {
2100
+ type: 'value',
2101
+ name: 'kt CO₂e',
2102
+ nameTextStyle: { color: '#8a7f73', fontSize: 11, fontFamily: 'Inter, sans-serif' },
2103
+ axisLine: { show: false },
2104
+ axisTick: { show: false },
2105
+ axisLabel: { color: '#8a7f73', fontSize: 12, fontFamily: 'Inter, sans-serif' },
2106
+ splitLine: { lineStyle: { color: 'rgba(23,20,17,0.1)', type: 'dashed' } },
2107
+ },
2108
+ series: [
2109
+ {
2110
+ name: 'Scope 1',
2111
+ type: 'line',
2112
+ data: [3.2, 2.9, 2.4, 2.1, 1.9],
2113
+ smooth: true,
2114
+ lineStyle: { color: '#8d6a49', width: 2 },
2115
+ itemStyle: { color: '#8d6a49' },
2116
+ symbol: 'circle',
2117
+ symbolSize: 7,
2118
+ },
2119
+ {
2120
+ name: 'Scope 2',
2121
+ type: 'line',
2122
+ data: [6.8, 4.1, 2.6, 1.8, 1.4],
2123
+ smooth: true,
2124
+ lineStyle: { color: '#6f7562', width: 2 },
2125
+ itemStyle: { color: '#6f7562' },
2126
+ symbol: 'circle',
2127
+ symbolSize: 7,
2128
+ },
2129
+ {
2130
+ name: 'Scope 3',
2131
+ type: 'bar',
2132
+ data: [38.2, 36.1, 34.0, 30.9, 28.1],
2133
+ itemStyle: { color: 'rgba(184,175,161,0.45)', borderColor: '#b9afa1', borderWidth: 1 },
2134
+ barMaxWidth: 64,
2135
+ },
2136
+ {
2137
+ name: 'Total',
2138
+ type: 'line',
2139
+ data: [48.2, 43.1, 39.0, 34.8, 31.4],
2140
+ smooth: true,
2141
+ lineStyle: { color: '#171411', width: 2, type: 'dashed' },
2142
+ itemStyle: { color: '#171411' },
2143
+ symbol: 'none',
2144
+ },
2145
+ ],
2146
+ });
2147
+ }
2148
+
2149
+ // ECharts — slide 8 internal carbon price (area)
2150
+ const carbonAreaEl = document.getElementById('chart-carbon-area');
2151
+ if (carbonAreaEl) {
2152
+ const carbonArea = echarts.init(carbonAreaEl, null, { renderer: 'canvas' });
2153
+ carbonArea.setOption({ backgroundColor: 'transparent' });
2154
+
2155
+ // Monthly data: [open, close, low, high] — internal carbon price USD/tonne CO2e
2156
+ // Simulated 2022–2026 with general upward trend (policy tightening)
2157
+ const months = [
2158
+ '2022-01','2022-02','2022-03','2022-04','2022-05','2022-06',
2159
+ '2022-07','2022-08','2022-09','2022-10','2022-11','2022-12',
2160
+ '2023-01','2023-02','2023-03','2023-04','2023-05','2023-06',
2161
+ '2023-07','2023-08','2023-09','2023-10','2023-11','2023-12',
2162
+ '2024-01','2024-02','2024-03','2024-04','2024-05','2024-06',
2163
+ '2024-07','2024-08','2024-09','2024-10','2024-11','2024-12',
2164
+ '2025-01','2025-02','2025-03','2025-04','2025-05','2025-06',
2165
+ '2025-07','2025-08','2025-09','2025-10','2025-11','2025-12',
2166
+ '2026-01','2026-02','2026-03','2026-04','2026-05','2026-06',
2167
+ '2026-07','2026-08','2026-09','2026-10','2026-11','2026-12',
2168
+ ];
2169
+ const ohlc = [
2170
+ [18,19,17,20],[19,18,16,21],[18,20,17,21],[20,21,18,22],[21,20,18,23],[20,22,19,23],
2171
+ [22,21,19,24],[21,23,20,24],[23,22,20,25],[22,24,21,25],[24,23,21,26],[23,25,22,27],
2172
+ [25,26,23,27],[26,25,23,28],[25,27,24,28],[27,28,25,29],[28,27,25,30],[27,29,26,30],
2173
+ [29,28,26,31],[28,30,27,31],[30,29,27,32],[29,31,28,33],[31,30,28,33],[30,32,29,34],
2174
+ [32,33,30,34],[33,32,30,35],[32,34,31,35],[34,35,32,36],[35,34,32,37],[34,36,33,37],
2175
+ [36,35,33,38],[35,37,34,38],[37,36,34,39],[36,38,35,40],[38,37,35,40],[37,39,36,41],
2176
+ [39,40,37,41],[40,39,37,42],[39,41,38,43],[41,42,39,43],[42,41,39,44],[41,43,40,45],
2177
+ [43,42,40,45],[42,44,41,46],[44,43,41,47],[43,45,42,47],[45,44,42,48],[44,46,43,49],
2178
+ [46,47,44,49],[47,46,44,50],[46,48,45,51],[48,49,46,51],[49,48,46,52],[48,50,47,53],
2179
+ [50,51,48,53],[51,50,48,54],[50,52,49,55],[52,53,50,55],[53,52,50,56],[52,54,51,57],
2180
+ ];
2181
+ const carbonPrice = ohlc.map(([, close]) => close);
2182
+
2183
+ carbonArea.setOption({
2184
+ grid: { top: 16, right: 16, bottom: 48, left: 52 },
2185
+ tooltip: {
2186
+ trigger: 'axis',
2187
+ axisPointer: { type: 'cross' },
2188
+ backgroundColor: '#2c2828',
2189
+ borderColor: 'rgba(243,238,230,0.12)',
2190
+ textStyle: { color: '#f3eee6', fontSize: 11, fontFamily: 'Inter, sans-serif' },
2191
+ formatter: (params) => {
2192
+ const p = params[0];
2193
+ return `<div style="font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(243,238,230,0.55);margin-bottom:6px;">${p.name}</div>` +
2194
+ `<div style="display:flex;justify-content:space-between;gap:18px;font-size:11px;">` +
2195
+ `<span style="color:rgba(243,238,230,0.6);">Carbon price</span><span style="font-weight:600;">$${p.value}</span>` +
2196
+ `</div>`;
2197
+ },
2198
+ },
2199
+ xAxis: {
2200
+ type: 'category',
2201
+ data: months,
2202
+ axisLine: { lineStyle: { color: 'var(--line-strong)' } },
2203
+ axisTick: { show: false },
2204
+ axisLabel: {
2205
+ fontFamily: 'Inter, sans-serif',
2206
+ fontSize: 10,
2207
+ color: '#8a7f73',
2208
+ interval: 5,
2209
+ formatter: (v) => v.slice(0, 7),
2210
+ },
2211
+ splitLine: { show: false },
2212
+ },
2213
+ yAxis: {
2214
+ type: 'value',
2215
+ min: 14,
2216
+ axisLine: { show: false },
2217
+ axisTick: { show: false },
2218
+ axisLabel: {
2219
+ fontFamily: 'Inter, sans-serif',
2220
+ fontSize: 10,
2221
+ color: '#8a7f73',
2222
+ formatter: (v) => '$' + v,
2223
+ },
2224
+ splitLine: { lineStyle: { color: 'rgba(23,20,17,0.08)', type: 'dashed' } },
2225
+ },
2226
+ series: [{
2227
+ type: 'line',
2228
+ data: carbonPrice,
2229
+ smooth: 0.3,
2230
+ symbol: 'none',
2231
+ lineStyle: {
2232
+ color: 'rgba(247,244,238,0.96)',
2233
+ width: 2,
2234
+ },
2235
+ areaStyle: {
2236
+ color: 'rgba(247,244,238,0.26)',
2237
+ },
2238
+ }],
2239
+ });
2240
+ }
2241
+
2242
+ const commonMiniDark = {
2243
+ backgroundColor: 'transparent',
2244
+ grid: { top: 8, right: 4, bottom: 22, left: 32, containLabel: false },
2245
+ xAxis: {
2246
+ type: 'category',
2247
+ data: ['22', '23', '24', '25', '26'],
2248
+ axisLine: { lineStyle: { color: 'rgba(247,244,238,0.18)' } },
2249
+ axisTick: { show: false },
2250
+ axisLabel: { color: 'rgba(247,244,238,0.45)', fontSize: 9, interval: 0 },
2251
+ },
2252
+ yAxis: [{
2253
+ type: 'value',
2254
+ axisLabel: { color: 'rgba(247,244,238,0.45)', fontSize: 9 },
2255
+ splitLine: { lineStyle: { color: 'rgba(247,244,238,0.08)' } },
2256
+ axisLine: { show: false },
2257
+ axisTick: { show: false },
2258
+ }],
2259
+ };
2260
+
2261
+ const briefCharts = [
2262
+ { id: 'chart-brief-01', data: [10.0, 7.0, 5.0, 3.9, 3.3], color: '#8d6a49' },
2263
+ { id: 'chart-brief-02', data: [38.2, 36.1, 34.0, 30.9, 28.1], color: '#6f7562' },
2264
+ { id: 'chart-brief-03', data: [6200, 8400, 11300, 15100, 18400], color: '#c9992a' },
2265
+ { id: 'chart-brief-04', data: [38, 61, 78, 89, 94], color: '#b9afa1' },
2266
+ ];
2267
+
2268
+ briefCharts.forEach(({ id, data, color }) => {
2269
+ const el = document.getElementById(id);
2270
+ if (!el) return;
2271
+ const chart = echarts.init(el);
2272
+ chart.setOption({
2273
+ ...commonMiniDark,
2274
+ series: [{
2275
+ type: 'bar',
2276
+ data,
2277
+ barMaxWidth: 18,
2278
+ itemStyle: { color },
2279
+ }],
2280
+ });
2281
+ });
2282
+ </script>
2283
+ </body>
2284
+ </html>