/* ==========================================================================
   Minuk Digital — site.css
   One stylesheet for every page. Sections:
   01 tokens · 02 base · 03 motion · 04 header + mega menu · 05 buttons
   06 hero · 07 stats · 08 bento · 09 services · 10 panel + charts
   11 diagram · 12 cases · 13 about · 14 steps · 15 faq · 16 contact
   17 blog · 18 TOC island · 19 footer · 20 reduced motion

   THE SYSTEM, IN THREE RULES
   1. Place.  Winnipeg is the confluence of the Assiniboine and the Red, which
      is also the argument this site makes: channels only pay off once they
      converge. That watercourse is --confluence, drawn by _src/gen_graphics.py,
      and it is the ground under every top-of-page.
   2. Signal. --acc (brass) marks one thing only: something measured, rising,
      or live. Chart lines, deltas, the junction, focus. Never a large fill,
      never navigation. It works because it is scarce.
   3. Voice.  --fd carries the argument (headings), --f carries the reading
      (body, and the wordmark, which does not change), --fm carries anything
      attached to a number. A label with no number does not get mono.
   4. Motion. One idea, used everywhere: warm light travelling through a
      channel. The headline inks in from its own outline, a sheen sweeps the
      hero rivers, a glow runs the revenue line, and nine of them move through
      the ecosystem at once. Every one is a soft radial or linear light clipped
      by a mask of the thing it is travelling along, so it reads as light
      inside the channel rather than a dot on top of it. All of it degrades to
      a finished static state under prefers-reduced-motion.
   ========================================================================== */

/* ---------- 01 tokens ---------- */
:root{
  --bg:#000;
  --panel:#08080a;
  --panel-2:#0c0c0f;
  --line:rgba(255,255,255,.11);
  --line-soft:rgba(255,255,255,.065);
  --fg:#fff;
  --muted:#a4a4a9;
  --dim:#8b8b91;
  --label:#8f8f96;

  /* Signal — brass. Used only where something is measured, rising, or live.
     Never as a large fill; the page stays black and the signal stays scarce. */
  --acc:#e9b44c;
  --acc-hi:#f4c86e;
  --acc-line:rgba(233,180,76,.45);
  --acc-soft:rgba(233,180,76,.14);
  --acc-glow:rgba(233,180,76,.10);
  /* Flow — river ice. Tributary linework only, always under 50% opacity. */
  --flow:#8fb4ce;
  --flow-line:rgba(143,180,206,.34);

  /* Three voices, three jobs. Display carries the argument, Inter carries the
     reading, mono carries anything attached to a number. Inter also sets the
     footer wordmark, because it is close to the supplied logo — the header
     carries that logo itself, as artwork, unaltered. */
  --fd:'Schibsted Grotesk','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  /* Inter stays as the reading voice because the logo's own letterforms are
     close to it. The display voice above is what carries the brand. */
  --f:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; /* impeccable-disable-line overused-font */
  --fm:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --navh:68px;
  --wrap:1120px;
  --wrap-wide:1280px;
  --pad:clamp(20px,5vw,40px);
  --sec:clamp(88px,12vw,168px);
  --r:14px;
  --r-lg:22px;
  /* Winnipeg's confluence: six channels narrowing to one point.
     Generated by _src/gen_graphics.py — regenerate, do not hand-edit. */
  --confluence:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='xMidYMid meet'><g fill='none' stroke-linecap='round' stroke-linejoin='round'><path d=%22M817,1221 C812,1208 794,1166 788,1143 C782,1120 778,1085 780,1083 C781,1082 794,1125 797,1135 C800,1145 786,1131 796,1143 C806,1155 841,1189 859,1206 C876,1222 892,1237 902,1243 C913,1249 919,1243 920,1243 C920,1244 918,1249 907,1246 C897,1244 873,1235 854,1230 C835,1225 829,1233 794,1214 C759,1196 681,1152 645,1120 C609,1087 589,1037 578,1020 C567,1004 588,1039 578,1020 C569,1001 533,949 521,907 C510,865 511,799 509,768 C508,737 512,729 513,722 C514,715 514,718 515,725 C516,731 512,742 519,761 C527,780 551,824 559,840 C567,856 565,856 567,859 C569,862 564,852 572,857 C580,862 613,886 614,888 C614,891 602,888 577,871 C552,853 499,830 465,785 C431,740 388,654 373,600 C357,546 371,492 372,459 C374,426 380,416 382,402 C385,387 386,390 390,373 C393,356 401,309 404,300 C408,290 408,290 410,314 C412,337 412,412 417,440 C422,468 428,467 438,482 C448,496 478,523 479,527 C481,532 458,517 447,508 C437,500 430,490 414,476 C398,462 372,449 351,425 C330,402 306,363 289,336 C272,309 260,307 249,263 C238,218 219,122 221,69 C223,16 248,-27 258,-56 C268,-85 274,-93 279,-103 C284,-114 288,-122 288,-119 C288,-115 281,-92 279,-83 C277,-74 276,-72 276,-65 C276,-58 277,-54 281,-42 C284,-30 292,-3 295,7 C299,18 303,20 302,20 C301,20 293,9 291,7%22 stroke=%22%23ffffff%22 stroke-opacity=%220.026%22 stroke-width=%221%22 fill=%22none%22/><path d=%22M901,1184 C897,1174 883,1140 878,1121 C872,1101 870,1073 871,1069 C871,1065 880,1093 881,1098 C882,1102 870,1091 876,1097 C882,1103 907,1125 918,1135 C929,1145 936,1156 941,1159 C945,1163 948,1156 946,1155 C943,1155 937,1158 926,1156 C915,1154 895,1146 878,1141 C862,1137 854,1142 826,1128 C798,1114 738,1081 711,1056 C683,1030 668,991 659,977 C650,963 664,986 655,970 C647,954 619,915 610,882 C601,849 602,798 601,772 C600,746 604,737 605,728 C606,720 606,719 607,720 C607,722 604,727 608,738 C613,749 630,777 634,787 C639,797 634,796 634,796 C634,796 629,786 633,788 C637,790 658,806 656,807 C654,807 642,804 622,790 C601,776 560,758 534,724 C507,689 475,624 463,582 C451,540 462,498 464,471 C465,444 470,434 472,420 C475,407 477,405 480,390 C483,374 488,338 492,328 C495,317 499,314 501,328 C503,341 502,393 504,410 C506,427 510,424 515,432 C521,440 540,456 538,457 C536,458 515,445 505,436 C494,428 488,418 473,405 C459,393 435,381 417,362 C400,342 382,311 369,289 C355,267 344,263 334,228 C325,193 311,121 312,80 C314,38 335,4 343,-20 C351,-44 358,-54 363,-65 C368,-76 373,-85 374,-86 C375,-87 371,-73 370,-70 C369,-66 368,-68 368,-66 C368,-64 369,-64 371,-59 C373,-53 377,-36 379,-32 C380,-27 381,-28 379,-30 C376,-33 367,-45 365,-48%22 stroke=%22%23ffffff%22 stroke-opacity=%220.034%22 stroke-width=%221%22 fill=%22none%22/><path d=%22M980,1150 C977,1142 965,1116 961,1100 C957,1084 956,1061 955,1055 C955,1049 960,1063 960,1063 C959,1063 948,1053 950,1054 C953,1056 969,1065 973,1069 C977,1074 977,1080 976,1081 C976,1081 976,1074 971,1073 C965,1071 955,1074 943,1072 C932,1070 916,1063 902,1059 C887,1055 877,1058 855,1047 C834,1037 793,1014 773,996 C752,977 743,948 735,936 C728,924 735,936 728,923 C720,910 699,883 692,859 C686,834 687,797 687,776 C687,755 690,744 690,734 C691,724 692,719 692,716 C693,713 690,713 692,716 C694,720 704,734 705,738 C706,741 699,739 696,737 C694,734 690,725 690,724 C690,722 700,732 695,730 C691,729 679,725 663,715 C647,704 617,692 598,667 C579,642 556,596 547,566 C539,535 547,504 549,483 C550,461 554,451 557,438 C559,425 562,420 564,406 C567,392 570,365 574,354 C577,343 584,336 586,341 C588,346 585,375 585,382 C585,390 586,384 588,385 C589,387 599,394 594,391 C589,388 569,378 558,369 C547,360 541,350 528,339 C515,328 494,318 480,302 C465,287 454,263 443,245 C432,227 421,222 414,196 C407,170 396,120 398,90 C399,59 415,32 422,13 C430,-7 436,-17 441,-29 C446,-40 452,-51 454,-55 C457,-60 456,-56 456,-58 C455,-59 454,-64 454,-67 C454,-70 455,-74 456,-74 C456,-74 457,-67 456,-68 C456,-69 454,-73 450,-78 C447,-83 437,-96 434,-99%22 stroke=%22%23ffffff%22 stroke-opacity=%220.042%22 stroke-width=%221%22 fill=%22none%22/><path d=%22M1261,1029 C1261,1029 1259,1031 1258,1027 C1258,1023 1261,1021 1258,1007 C1254,992 1246,956 1240,939 C1233,922 1228,920 1216,902 C1205,885 1189,852 1170,835 C1151,818 1122,812 1103,802 C1084,793 1074,784 1058,779 C1042,774 1017,775 1005,772 C993,770 992,766 984,764 C977,762 960,757 961,760 C962,763 985,777 992,783 C999,788 1006,796 1005,792 C1003,787 987,759 984,757 C981,754 986,771 987,776 C989,782 991,793 993,790 C994,786 995,771 996,756 C997,741 999,720 998,701 C997,681 995,662 988,639 C981,616 967,580 955,562 C944,543 929,538 919,527 C908,515 907,506 893,494 C879,483 849,466 835,458 C822,450 812,446 811,447 C810,448 821,454 827,464 C833,474 843,497 848,507 C852,516 851,524 852,523 C854,522 854,510 856,500 C858,490 864,472 865,463 C867,454 861,460 865,448 C869,435 887,415 889,387 C890,360 882,311 875,282 C867,254 859,240 845,219 C831,198 807,172 791,157 C775,142 759,138 748,129 C737,121 732,111 725,104 C717,98 704,93 701,91 C698,88 706,91 706,89 C705,88 698,75 698,81 C697,87 701,116 702,125 C703,133 702,135 705,131 C708,127 713,113 719,100 C725,87 733,73 740,54 C747,35 755,6 758,-14 C762,-35 760,-52 760,-71 C760,-90 761,-108 757,-130 C752,-151 742,-178 734,-197 C725,-217 715,-232 706,-246 C697,-261 684,-276 679,-282%22 stroke=%22%23ffffff%22 stroke-opacity=%220.041%22 stroke-width=%221%22 fill=%22none%22/><path d=%22M1337,997 C1337,998 1338,1008 1338,1007 C1338,1007 1342,1011 1339,994 C1335,977 1323,928 1314,906 C1306,884 1303,884 1287,862 C1272,839 1248,795 1223,772 C1198,750 1160,740 1137,728 C1113,716 1101,707 1082,701 C1062,695 1034,695 1022,692 C1009,689 1012,687 1007,685 C1001,684 982,676 989,683 C997,690 1036,714 1051,726 C1066,737 1077,755 1077,753 C1077,751 1055,712 1053,712 C1051,712 1063,741 1066,754 C1070,768 1073,792 1075,793 C1077,795 1077,778 1077,762 C1078,746 1082,721 1080,697 C1078,673 1077,649 1067,618 C1057,588 1037,539 1022,514 C1007,490 991,484 978,470 C966,457 965,447 947,433 C930,419 889,395 873,385 C857,376 848,371 851,375 C853,379 876,390 889,410 C902,429 921,470 928,491 C936,511 932,530 933,534 C935,538 935,526 937,517 C939,507 945,486 946,478 C947,471 939,486 943,473 C947,460 968,436 970,400 C971,364 961,293 952,256 C943,218 932,201 913,174 C895,148 862,112 843,94 C824,76 810,74 799,65 C788,56 784,47 777,41 C771,36 760,33 760,34 C760,35 774,45 776,47 C779,50 772,35 774,50 C775,64 782,115 783,134 C784,153 779,162 780,162 C782,162 787,147 793,134 C799,121 809,106 817,83 C825,60 835,23 840,-3 C844,-29 842,-48 842,-72 C841,-96 843,-118 837,-144 C832,-171 819,-207 808,-232 C798,-256 785,-275 774,-292 C764,-308 750,-325 745,-331%22 stroke=%22%23ffffff%22 stroke-opacity=%220.034%22 stroke-width=%221%22 fill=%22none%22/><path d=%22M1416,963 C1417,967 1420,984 1421,987 C1423,990 1428,999 1423,980 C1419,961 1403,898 1393,871 C1383,844 1381,847 1362,819 C1343,792 1310,735 1278,706 C1246,678 1201,664 1172,649 C1144,635 1129,625 1106,619 C1084,612 1052,610 1039,608 C1026,605 1033,603 1030,602 C1026,601 1005,592 1019,602 C1033,613 1090,647 1113,666 C1135,684 1151,713 1153,713 C1155,712 1126,662 1125,665 C1125,668 1143,709 1149,731 C1155,753 1158,791 1161,797 C1163,803 1162,786 1163,768 C1164,751 1168,721 1166,692 C1164,664 1163,634 1150,597 C1138,559 1111,496 1093,465 C1074,434 1056,427 1041,411 C1026,395 1026,386 1004,369 C983,352 931,320 912,309 C893,297 885,293 892,300 C899,307 933,324 953,353 C973,382 1002,442 1012,474 C1023,506 1017,535 1019,546 C1020,556 1019,543 1021,534 C1023,526 1029,500 1030,494 C1031,488 1021,512 1025,499 C1029,485 1053,458 1055,413 C1056,368 1045,275 1033,228 C1022,180 1008,161 986,128 C963,95 921,50 899,28 C877,7 864,6 853,-2 C842,-11 837,-21 832,-25 C827,-28 819,-30 822,-25 C825,-21 845,-4 850,4 C856,11 850,-6 853,18 C856,41 868,114 869,144 C870,174 859,191 860,195 C860,200 865,184 871,170 C877,157 888,140 897,113 C906,87 920,40 925,9 C930,-22 928,-45 928,-73 C927,-101 929,-127 922,-160 C915,-192 899,-238 886,-268 C873,-298 858,-320 846,-339 C834,-358 819,-375 814,-382%22 stroke=%22%23ffffff%22 stroke-opacity=%220.026%22 stroke-width=%221%22 fill=%22none%22/><path d=%22M1496,928 C1498,934 1504,959 1507,966 C1509,972 1516,988 1510,966 C1505,944 1486,867 1474,836 C1462,804 1461,808 1438,775 C1415,743 1373,673 1335,639 C1296,605 1243,587 1209,569 C1175,552 1157,542 1131,534 C1106,526 1070,524 1057,522 C1044,519 1055,518 1054,518 C1052,517 1029,505 1049,520 C1070,534 1146,579 1176,604 C1206,630 1227,669 1230,671 C1234,673 1199,611 1199,617 C1200,623 1225,677 1234,707 C1242,738 1246,790 1249,801 C1251,812 1250,793 1251,775 C1252,756 1256,721 1254,688 C1251,655 1250,620 1235,574 C1221,529 1186,452 1165,414 C1143,377 1122,369 1105,351 C1088,332 1088,323 1063,303 C1037,283 974,244 952,231 C931,217 924,212 935,223 C946,233 992,255 1019,294 C1046,333 1084,413 1099,457 C1113,501 1105,541 1106,557 C1107,573 1105,560 1107,552 C1109,544 1116,515 1117,511 C1117,506 1105,540 1109,526 C1113,512 1140,481 1142,426 C1143,372 1130,257 1117,199 C1103,141 1086,120 1060,80 C1033,40 981,-14 955,-39 C930,-64 919,-62 907,-71 C896,-80 892,-90 889,-92 C885,-95 880,-95 886,-86 C892,-78 918,-53 926,-41 C934,-29 930,-48 935,-15 C940,17 955,113 956,154 C957,195 942,221 941,229 C940,238 945,221 951,207 C957,193 969,176 979,145 C989,114 1006,58 1012,22 C1018,-15 1016,-41 1016,-74 C1015,-107 1017,-137 1008,-176 C1000,-214 981,-270 966,-305 C951,-341 933,-366 919,-388 C906,-409 890,-427 885,-435%22 stroke=%22%23ffffff%22 stroke-opacity=%220.019%22 stroke-width=%221%22 fill=%22none%22/><path d=%22M-171,215 C-171,216 -167,219 -169,219 C-171,220 -186,220 -182,218 C-177,216 -157,210 -142,208 C-127,205 -117,205 -93,203 C-69,201 -28,192 1,196 C29,199 54,216 75,222 C97,229 106,225 128,236 C151,247 191,274 210,287 C229,301 231,310 242,318 C253,327 268,332 275,338 C282,344 285,352 285,353 C284,354 274,344 275,343 C275,342 291,347 290,348 C289,350 271,351 269,351 C266,350 265,351 276,345 C288,340 316,325 336,318 C355,311 371,310 393,305 C414,300 432,288 463,287 C495,286 551,292 582,299 C613,306 631,322 649,330 C666,338 673,342 685,348 C697,354 714,362 722,366 C729,371 727,372 730,373 C734,374 740,372 742,372%22 stroke=%22%23ffffff%22 stroke-opacity=%220.032%22 stroke-width=%221%22 fill=%22none%22/><path d=%22M-197,297 C-194,298 -184,304 -179,305 C-174,306 -177,305 -168,303 C-160,301 -142,295 -127,292 C-113,290 -101,290 -82,288 C-62,286 -32,278 -11,281 C11,283 30,298 47,304 C65,309 76,307 94,315 C112,324 140,342 156,354 C172,366 178,377 189,386 C200,395 215,400 224,407 C233,414 239,426 244,429 C250,432 250,426 256,427 C262,428 276,433 281,434 C287,435 283,436 288,435 C292,433 298,430 311,424 C324,418 346,405 364,399 C381,393 396,393 414,388 C432,384 449,373 472,372 C496,371 534,375 556,381 C579,387 595,400 610,407 C625,415 634,419 647,425 C659,431 674,439 684,444 C693,449 698,453 705,455 C713,457 725,457 729,457%22 stroke=%22%23ffffff%22 stroke-opacity=%220.042%22 stroke-width=%221%22 fill=%22none%22/><path d=%22M-264,511 C-254,513 -227,525 -205,527 C-183,529 -152,526 -133,524 C-113,522 -102,515 -89,513 C-76,511 -61,512 -53,510 C-45,508 -45,502 -41,503 C-36,504 -33,512 -25,515 C-18,518 -1,519 5,521 C12,523 8,522 16,529 C23,536 39,554 52,563 C64,573 75,576 90,587 C105,597 120,617 140,627 C160,637 188,641 208,646 C228,651 239,656 260,657 C282,658 314,658 337,653 C360,648 385,636 401,629 C418,622 425,615 437,611 C448,607 460,608 470,605 C480,603 493,597 496,595 C500,593 487,593 490,595 C492,597 500,602 510,608 C519,613 535,619 548,626 C560,632 570,637 585,645 C600,652 621,663 639,669 C657,675 685,677 695,679%22 stroke=%22%23ffffff%22 stroke-opacity=%220.041%22 stroke-width=%221%22 fill=%22none%22/><path d=%22M-290,593 C-278,596 -244,610 -215,613 C-187,615 -142,611 -119,609 C-96,606 -87,600 -74,598 C-62,596 -45,597 -41,595 C-38,594 -50,588 -52,588 C-54,588 -57,595 -53,597 C-49,599 -31,600 -29,600 C-26,600 -43,591 -38,596 C-34,601 -14,621 -1,631 C12,641 22,644 39,656 C56,668 75,691 100,703 C125,716 164,723 189,730 C214,736 224,741 252,743 C280,744 325,743 356,737 C387,731 418,715 436,708 C454,700 455,696 465,692 C474,689 484,691 491,689 C498,687 510,682 505,681 C501,679 470,676 464,677 C458,678 464,680 471,684 C479,689 497,696 510,703 C522,709 530,714 547,722 C564,730 591,744 614,751 C636,758 670,762 682,764%22 stroke=%22%23ffffff%22 stroke-opacity=%220.031%22 stroke-width=%221%22 fill=%22none%22/><path d=%22M1672,937 C1663,942 1639,958 1618,965 C1596,972 1563,977 1541,979 C1520,981 1508,978 1490,977 C1473,976 1448,976 1436,974 C1424,972 1414,967 1417,965 C1420,962 1451,957 1455,958 C1460,959 1448,966 1442,971 C1437,975 1428,977 1421,983 C1414,988 1412,994 1401,1004 C1390,1014 1372,1032 1355,1043 C1338,1055 1324,1066 1299,1076 C1274,1085 1236,1100 1206,1101 C1176,1102 1139,1089 1120,1084 C1101,1079 1094,1075 1091,1073 C1089,1071 1103,1071 1104,1072 C1105,1073 1100,1077 1097,1078 C1094,1079 1089,1077 1086,1078 C1083,1079 1082,1084 1081,1085%22 stroke=%22%23ffffff%22 stroke-opacity=%220.033%22 stroke-width=%221%22 fill=%22none%22/><path d=%22M1640,880 C1633,883 1613,897 1596,903 C1579,908 1555,912 1538,913 C1521,914 1509,912 1493,911 C1478,910 1459,911 1447,909 C1434,907 1422,900 1419,899 C1415,897 1428,896 1425,899 C1423,902 1413,911 1405,916 C1397,922 1387,925 1379,931 C1371,938 1366,947 1355,957 C1345,966 1331,980 1317,990 C1303,1000 1290,1008 1271,1016 C1253,1023 1227,1034 1205,1035 C1183,1036 1156,1025 1140,1021 C1123,1016 1113,1011 1106,1009 C1099,1006 1102,1005 1097,1006 C1092,1008 1085,1013 1078,1015 C1072,1017 1063,1016 1057,1018 C1051,1021 1044,1030 1041,1033%22 stroke=%22%23ffffff%22 stroke-opacity=%220.043%22 stroke-width=%221%22 fill=%22none%22/><path d=%22M1558,729 C1555,731 1544,738 1539,740 C1535,742 1535,741 1529,741 C1523,741 1510,740 1501,739 C1492,739 1488,741 1475,739 C1462,737 1445,726 1424,727 C1402,728 1367,738 1348,746 C1328,754 1320,766 1307,775 C1294,783 1282,789 1271,798 C1259,808 1246,823 1237,832 C1228,841 1223,845 1217,850 C1211,855 1202,857 1200,859 C1198,862 1204,864 1202,863 C1200,863 1200,860 1190,856 C1181,853 1163,844 1144,841 C1125,837 1097,834 1077,836 C1058,837 1045,846 1029,850 C1013,855 997,856 982,864 C966,871 944,891 937,896%22 stroke=%22%23ffffff%22 stroke-opacity=%220.042%22 stroke-width=%221%22 fill=%22none%22/><path d=%22M1525,669 C1524,670 1517,675 1517,676 C1517,677 1528,674 1525,673 C1523,672 1510,671 1504,671 C1497,671 1499,674 1486,672 C1473,670 1454,657 1425,659 C1397,661 1343,675 1317,685 C1291,695 1283,709 1269,719 C1254,729 1241,735 1228,745 C1215,756 1198,774 1190,783 C1182,791 1180,792 1177,795 C1174,797 1168,797 1172,797 C1176,798 1194,796 1201,795 C1207,794 1217,795 1210,792 C1204,788 1183,778 1159,775 C1136,771 1095,766 1070,768 C1045,770 1029,779 1010,785 C990,791 971,793 952,803 C933,812 905,835 895,842%22 stroke=%22%23ffffff%22 stroke-opacity=%220.032%22 stroke-width=%221%22 fill=%22none%22/><path d=%22M1596,799 C1591,802 1576,812 1566,816 C1555,819 1545,820 1533,821 C1522,821 1509,819 1497,818 C1485,818 1474,819 1462,817 C1449,815 1435,806 1421,805 C1408,805 1395,810 1383,815 C1371,821 1362,832 1352,839 C1341,846 1330,850 1320,858 C1309,867 1300,879 1290,888 C1281,897 1272,906 1262,913 C1252,920 1242,925 1232,929 C1222,934 1214,940 1203,940 C1193,940 1181,934 1168,929 C1155,925 1141,918 1127,915 C1114,912 1099,910 1086,911 C1073,912 1063,919 1051,923 C1039,926 1026,926 1015,932 C1003,937 988,952 982,956%22 stroke=%22%23ffffff%22 stroke-opacity=%220.108%22 stroke-width=%221.1%22 fill=%22none%22/><path d=%22M1604,813 C1598,816 1583,827 1571,831 C1559,835 1546,837 1534,838 C1522,838 1509,836 1497,836 C1484,836 1471,837 1459,835 C1446,833 1432,824 1421,824 C1410,824 1401,827 1392,833 C1382,838 1373,848 1363,855 C1353,862 1342,866 1333,874 C1323,882 1314,894 1305,903 C1295,913 1285,923 1274,930 C1264,938 1253,944 1241,949 C1229,955 1217,962 1204,962 C1190,963 1175,956 1161,952 C1147,948 1134,941 1122,938 C1110,935 1099,934 1089,935 C1078,936 1068,943 1058,947 C1047,950 1036,949 1026,954 C1016,959 1003,973 998,976%22 stroke=%22%23ffffff%22 stroke-opacity=%220.108%22 stroke-width=%221.1%22 fill=%22none%22/><path d=%22M1600,806 C1595,809 1579,820 1568,823 C1557,827 1546,828 1534,829 C1522,830 1509,828 1497,827 C1485,827 1473,828 1460,826 C1448,824 1433,815 1421,815 C1409,814 1398,819 1387,824 C1377,829 1367,840 1357,847 C1347,854 1336,858 1326,866 C1316,874 1307,887 1298,896 C1288,905 1278,914 1268,921 C1258,929 1247,934 1237,939 C1226,944 1215,951 1203,951 C1191,951 1178,945 1164,941 C1151,936 1137,930 1125,927 C1112,924 1099,922 1087,923 C1076,924 1065,931 1054,935 C1043,938 1031,938 1020,943 C1009,948 995,962 990,966%22 stroke=%22%23ffffff%22 stroke-opacity=%220.035%22 stroke-width=%221%22 fill=%22none%22 stroke-dasharray=%222 8%22/><path d=%22M-234,414 C-227,417 -207,426 -193,427 C-179,429 -163,427 -149,425 C-134,423 -120,417 -106,414 C-92,412 -79,413 -66,411 C-52,409 -40,402 -28,404 C-16,406 -5,417 7,422 C19,426 33,425 45,430 C56,435 66,443 77,452 C89,461 100,476 112,485 C124,495 136,499 149,508 C161,517 172,534 186,541 C199,548 215,547 229,550 C243,554 255,559 269,560 C284,562 300,562 316,559 C331,555 347,547 362,540 C377,534 391,525 405,520 C419,515 432,516 446,512 C459,509 474,501 486,500 C498,498 507,500 518,504 C529,508 540,516 552,522 C564,529 577,534 590,540 C602,547 614,553 627,560 C640,566 653,574 667,579 C681,583 702,585 709,586%22 stroke=%22%23ffffff%22 stroke-opacity=%220.129%22 stroke-width=%221.1%22 fill=%22none%22/><path d=%22M-226,390 C-220,391 -202,399 -190,401 C-178,402 -166,400 -153,398 C-140,396 -125,390 -111,387 C-97,385 -84,385 -69,383 C-55,381 -38,374 -24,376 C-9,377 3,389 16,394 C30,398 43,397 57,402 C70,408 84,418 96,428 C109,438 119,452 131,461 C143,470 156,474 168,482 C179,491 189,506 201,512 C212,518 224,516 236,518 C248,521 261,526 273,527 C285,528 295,528 308,525 C321,522 334,515 348,509 C363,502 379,492 394,487 C408,481 422,481 437,477 C452,474 467,465 482,464 C498,462 515,464 529,468 C544,473 556,482 569,489 C582,495 594,500 607,506 C619,512 632,519 644,525 C656,531 667,538 678,541 C690,545 709,545 715,546%22 stroke=%22%23ffffff%22 stroke-opacity=%220.129%22 stroke-width=%221.1%22 fill=%22none%22/><path d=%22M-230,402 C-224,404 -205,413 -192,414 C-178,416 -165,414 -151,411 C-137,409 -122,403 -108,401 C-95,398 -81,399 -67,397 C-54,395 -39,388 -26,390 C-13,392 -1,403 12,408 C24,412 38,411 51,416 C63,422 75,431 87,440 C99,450 110,464 122,473 C133,482 146,486 158,495 C170,504 181,520 193,526 C206,533 219,531 232,534 C245,537 258,542 271,544 C284,545 298,545 312,542 C326,539 341,531 355,525 C370,518 385,508 399,503 C414,498 427,498 441,495 C455,491 470,483 484,482 C498,480 511,482 524,486 C536,490 548,499 561,506 C573,512 586,517 598,523 C611,529 623,536 635,542 C648,548 660,556 673,560 C685,564 705,565 712,566%22 stroke=%22%23ffffff%22 stroke-opacity=%220.041%22 stroke-width=%221%22 fill=%22none%22 stroke-dasharray=%222 8%22/><path d=%22M1136,1083 C1134,1079 1128,1069 1125,1060 C1123,1050 1125,1039 1123,1028 C1121,1017 1119,1004 1115,994 C1111,984 1104,979 1098,970 C1093,961 1091,946 1083,939 C1074,931 1057,930 1047,925 C1036,921 1031,912 1019,909 C1008,905 990,907 978,904 C966,902 959,897 948,893 C938,890 923,889 915,886 C906,883 901,881 896,876 C892,871 891,863 887,855 C883,847 877,836 873,829 C868,822 861,820 859,812 C857,805 860,795 860,784 C861,773 863,760 864,747 C865,734 867,720 866,707 C866,695 863,684 860,672 C857,660 854,646 848,637 C841,628 830,624 823,617 C817,609 814,600 806,592 C798,585 785,580 775,574 C766,569 757,566 748,561 C740,556 729,548 725,546%22 stroke=%22%23ffffff%22 stroke-opacity=%220.138%22 stroke-width=%221.1%22 fill=%22none%22/><path d=%22M1104,1097 C1102,1092 1095,1078 1092,1068 C1089,1057 1090,1044 1088,1034 C1087,1024 1086,1016 1082,1009 C1079,1001 1071,995 1067,988 C1063,981 1065,972 1059,967 C1053,962 1040,963 1031,960 C1023,956 1019,948 1009,945 C998,942 982,944 970,942 C958,940 949,934 937,931 C926,928 913,928 901,923 C889,919 875,912 867,904 C859,896 856,883 851,874 C846,866 843,860 838,852 C832,843 822,835 819,824 C815,812 817,795 818,782 C818,768 820,756 820,744 C821,732 823,720 822,710 C822,700 819,691 817,683 C815,676 815,669 811,663 C806,657 796,654 790,648 C784,642 782,632 776,627 C770,622 762,620 754,616 C746,612 734,608 725,603 C716,598 703,589 699,586%22 stroke=%22%23ffffff%22 stroke-opacity=%220.138%22 stroke-width=%221.1%22 fill=%22none%22/><path d=%22M1120,1090 C1118,1086 1111,1074 1109,1064 C1106,1054 1107,1042 1106,1031 C1104,1021 1103,1010 1099,1001 C1095,993 1087,987 1082,979 C1078,971 1078,959 1071,953 C1064,947 1049,947 1039,943 C1030,938 1025,930 1014,927 C1003,924 986,926 974,923 C962,921 954,915 943,912 C932,909 918,908 908,905 C898,901 888,896 882,890 C875,883 873,873 869,865 C865,856 860,848 855,840 C850,833 842,828 839,818 C836,808 838,795 839,783 C840,771 841,758 842,745 C843,733 845,720 844,708 C844,697 841,687 839,678 C836,668 834,658 829,650 C824,643 813,639 807,632 C800,626 798,616 791,610 C784,604 774,600 765,595 C756,590 746,587 737,582 C728,577 716,569 712,566%22 stroke=%22%23ffffff%22 stroke-opacity=%220.044%22 stroke-width=%221%22 fill=%22none%22 stroke-dasharray=%222 8%22/><path d=%22M746,548 C744,545 735,536 734,529 C733,522 736,517 738,508 C740,499 742,488 744,477 C747,466 751,452 753,442 C755,431 753,425 757,413 C761,401 775,386 777,370 C779,355 772,334 768,319 C764,304 758,293 750,280 C742,267 730,253 719,242 C707,232 690,225 679,217 C668,208 663,198 653,190 C644,181 628,174 621,167 C614,160 615,153 611,145 C607,138 599,127 596,122 C593,116 592,118 593,112 C595,107 600,98 605,89 C609,79 615,67 620,54 C626,42 634,29 639,15 C645,1 650,-15 652,-30 C654,-44 653,-56 653,-70 C653,-83 655,-96 652,-110 C649,-124 644,-140 638,-153 C632,-166 625,-177 618,-188 C611,-199 599,-214 595,-219%22 stroke=%22%23ffffff%22 stroke-opacity=%220.150%22 stroke-width=%221.1%22 fill=%22none%22/><path d=%22M678,584 C675,577 662,558 659,544 C656,529 660,512 661,498 C662,484 665,473 667,461 C669,449 672,439 675,427 C677,415 677,400 680,388 C684,377 694,365 696,358 C698,351 693,351 690,346 C687,341 685,332 680,325 C676,319 673,314 664,307 C655,300 637,292 626,283 C615,275 610,265 598,256 C587,246 569,238 558,227 C548,216 543,202 536,190 C528,178 519,170 514,155 C508,141 503,119 504,102 C505,85 515,68 521,54 C526,40 532,28 537,16 C543,4 549,-8 553,-18 C557,-28 559,-34 560,-43 C561,-51 559,-60 559,-68 C558,-77 560,-86 558,-93 C557,-100 554,-105 551,-112 C547,-119 542,-127 537,-135 C531,-143 520,-156 517,-161%22 stroke=%22%23ffffff%22 stroke-opacity=%220.150%22 stroke-width=%221.1%22 fill=%22none%22/><path d=%22M712,566 C709,561 699,547 697,536 C694,526 698,514 700,503 C701,492 703,480 706,469 C708,457 712,446 714,434 C716,423 715,412 719,400 C722,389 735,375 736,364 C738,353 732,343 729,333 C725,322 722,312 715,303 C709,293 702,283 691,275 C681,266 664,259 653,250 C642,241 636,231 626,223 C615,214 598,206 590,197 C581,188 579,177 573,168 C568,158 559,149 555,139 C551,129 547,118 549,107 C550,96 558,83 563,71 C568,59 573,47 579,35 C584,23 592,11 596,-1 C601,-13 604,-25 606,-36 C608,-47 606,-58 606,-69 C606,-80 607,-91 605,-102 C603,-112 599,-122 594,-132 C590,-142 584,-152 577,-162 C571,-171 560,-185 556,-190%22 stroke=%22%23ffffff%22 stroke-opacity=%220.048%22 stroke-width=%221%22 fill=%22none%22 stroke-dasharray=%222 8%22/><path d=%22M712,566 C709,561 699,547 697,536 C694,526 698,514 700,503 C701,492 703,480 706,469 C708,457 712,446 714,434 C716,423 715,412 719,400 C722,389 735,375 736,364 C738,353 732,343 729,333 C725,322 722,312 715,303 C709,293 702,283 691,275 C681,266 664,259 653,250 C642,241 636,231 626,223 C615,214 598,206 590,197 C581,188 579,177 573,168 C568,158 559,149 555,139 C551,129 547,118 549,107 C550,96 558,83 563,71 C568,59 573,47 579,35 C584,23 592,11 596,-1 C601,-13 604,-25 606,-36 C608,-47 606,-58 606,-69 C606,-80 607,-91 605,-102 C603,-112 599,-122 594,-132 C590,-142 584,-152 577,-162 C571,-171 560,-185 556,-190%22 stroke=%22%23e9b44c%22 stroke-opacity=%220.300%22 stroke-width=%221.4%22 fill=%22none%22/><circle cx=%22712%22 cy=%22566%22 r=%223%22 fill=%22%23e9b44c%22 fill-opacity=%22.92%22/><circle cx=%22712%22 cy=%22566%22 r=%2210.5%22 fill=%22none%22 stroke=%22%23e9b44c%22 stroke-opacity=%22.28%22 stroke-width=%221%22/></g></svg>");
  --confluence-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='xMidYMid meet'><g fill='none' stroke-linecap='round' stroke-linejoin='round'><path d=%22M1596,799 C1591,802 1576,812 1566,816 C1555,819 1545,820 1533,821 C1522,821 1509,819 1497,818 C1485,818 1474,819 1462,817 C1449,815 1435,806 1421,805 C1408,805 1395,810 1383,815 C1371,821 1362,832 1352,839 C1341,846 1330,850 1320,858 C1309,867 1300,879 1290,888 C1281,897 1272,906 1262,913 C1252,920 1242,925 1232,929 C1222,934 1214,940 1203,940 C1193,940 1181,934 1168,929 C1155,925 1141,918 1127,915 C1114,912 1099,910 1086,911 C1073,912 1063,919 1051,923 C1039,926 1026,926 1015,932 C1003,937 988,952 982,956%22 stroke=%22%23ffffff%22 stroke-opacity=%220.550%22 stroke-width=%221.6%22 fill=%22none%22/><path d=%22M1604,813 C1598,816 1583,827 1571,831 C1559,835 1546,837 1534,838 C1522,838 1509,836 1497,836 C1484,836 1471,837 1459,835 C1446,833 1432,824 1421,824 C1410,824 1401,827 1392,833 C1382,838 1373,848 1363,855 C1353,862 1342,866 1333,874 C1323,882 1314,894 1305,903 C1295,913 1285,923 1274,930 C1264,938 1253,944 1241,949 C1229,955 1217,962 1204,962 C1190,963 1175,956 1161,952 C1147,948 1134,941 1122,938 C1110,935 1099,934 1089,935 C1078,936 1068,943 1058,947 C1047,950 1036,949 1026,954 C1016,959 1003,973 998,976%22 stroke=%22%23ffffff%22 stroke-opacity=%220.550%22 stroke-width=%221.6%22 fill=%22none%22/><path d=%22M-234,414 C-227,417 -207,426 -193,427 C-179,429 -163,427 -149,425 C-134,423 -120,417 -106,414 C-92,412 -79,413 -66,411 C-52,409 -40,402 -28,404 C-16,406 -5,417 7,422 C19,426 33,425 45,430 C56,435 66,443 77,452 C89,461 100,476 112,485 C124,495 136,499 149,508 C161,517 172,534 186,541 C199,548 215,547 229,550 C243,554 255,559 269,560 C284,562 300,562 316,559 C331,555 347,547 362,540 C377,534 391,525 405,520 C419,515 432,516 446,512 C459,509 474,501 486,500 C498,498 507,500 518,504 C529,508 540,516 552,522 C564,529 577,534 590,540 C602,547 614,553 627,560 C640,566 653,574 667,579 C681,583 702,585 709,586%22 stroke=%22%23ffffff%22 stroke-opacity=%220.800%22 stroke-width=%221.6%22 fill=%22none%22/><path d=%22M-226,390 C-220,391 -202,399 -190,401 C-178,402 -166,400 -153,398 C-140,396 -125,390 -111,387 C-97,385 -84,385 -69,383 C-55,381 -38,374 -24,376 C-9,377 3,389 16,394 C30,398 43,397 57,402 C70,408 84,418 96,428 C109,438 119,452 131,461 C143,470 156,474 168,482 C179,491 189,506 201,512 C212,518 224,516 236,518 C248,521 261,526 273,527 C285,528 295,528 308,525 C321,522 334,515 348,509 C363,502 379,492 394,487 C408,481 422,481 437,477 C452,474 467,465 482,464 C498,462 515,464 529,468 C544,473 556,482 569,489 C582,495 594,500 607,506 C619,512 632,519 644,525 C656,531 667,538 678,541 C690,545 709,545 715,546%22 stroke=%22%23ffffff%22 stroke-opacity=%220.800%22 stroke-width=%221.6%22 fill=%22none%22/><path d=%22M1136,1083 C1134,1079 1128,1069 1125,1060 C1123,1050 1125,1039 1123,1028 C1121,1017 1119,1004 1115,994 C1111,984 1104,979 1098,970 C1093,961 1091,946 1083,939 C1074,931 1057,930 1047,925 C1036,921 1031,912 1019,909 C1008,905 990,907 978,904 C966,902 959,897 948,893 C938,890 923,889 915,886 C906,883 901,881 896,876 C892,871 891,863 887,855 C883,847 877,836 873,829 C868,822 861,820 859,812 C857,805 860,795 860,784 C861,773 863,760 864,747 C865,734 867,720 866,707 C866,695 863,684 860,672 C857,660 854,646 848,637 C841,628 830,624 823,617 C817,609 814,600 806,592 C798,585 785,580 775,574 C766,569 757,566 748,561 C740,556 729,548 725,546%22 stroke=%22%23ffffff%22 stroke-opacity=%220.850%22 stroke-width=%221.6%22 fill=%22none%22/><path d=%22M1104,1097 C1102,1092 1095,1078 1092,1068 C1089,1057 1090,1044 1088,1034 C1087,1024 1086,1016 1082,1009 C1079,1001 1071,995 1067,988 C1063,981 1065,972 1059,967 C1053,962 1040,963 1031,960 C1023,956 1019,948 1009,945 C998,942 982,944 970,942 C958,940 949,934 937,931 C926,928 913,928 901,923 C889,919 875,912 867,904 C859,896 856,883 851,874 C846,866 843,860 838,852 C832,843 822,835 819,824 C815,812 817,795 818,782 C818,768 820,756 820,744 C821,732 823,720 822,710 C822,700 819,691 817,683 C815,676 815,669 811,663 C806,657 796,654 790,648 C784,642 782,632 776,627 C770,622 762,620 754,616 C746,612 734,608 725,603 C716,598 703,589 699,586%22 stroke=%22%23ffffff%22 stroke-opacity=%220.850%22 stroke-width=%221.6%22 fill=%22none%22/><path d=%22M746,548 C744,545 735,536 734,529 C733,522 736,517 738,508 C740,499 742,488 744,477 C747,466 751,452 753,442 C755,431 753,425 757,413 C761,401 775,386 777,370 C779,355 772,334 768,319 C764,304 758,293 750,280 C742,267 730,253 719,242 C707,232 690,225 679,217 C668,208 663,198 653,190 C644,181 628,174 621,167 C614,160 615,153 611,145 C607,138 599,127 596,122 C593,116 592,118 593,112 C595,107 600,98 605,89 C609,79 615,67 620,54 C626,42 634,29 639,15 C645,1 650,-15 652,-30 C654,-44 653,-56 653,-70 C653,-83 655,-96 652,-110 C649,-124 644,-140 638,-153 C632,-166 625,-177 618,-188 C611,-199 599,-214 595,-219%22 stroke=%22%23ffffff%22 stroke-opacity=%221.000%22 stroke-width=%221.6%22 fill=%22none%22/><path d=%22M678,584 C675,577 662,558 659,544 C656,529 660,512 661,498 C662,484 665,473 667,461 C669,449 672,439 675,427 C677,415 677,400 680,388 C684,377 694,365 696,358 C698,351 693,351 690,346 C687,341 685,332 680,325 C676,319 673,314 664,307 C655,300 637,292 626,283 C615,275 610,265 598,256 C587,246 569,238 558,227 C548,216 543,202 536,190 C528,178 519,170 514,155 C508,141 503,119 504,102 C505,85 515,68 521,54 C526,40 532,28 537,16 C543,4 549,-8 553,-18 C557,-28 559,-34 560,-43 C561,-51 559,-60 559,-68 C558,-77 560,-86 558,-93 C557,-100 554,-105 551,-112 C547,-119 542,-127 537,-135 C531,-143 520,-156 517,-161%22 stroke=%22%23ffffff%22 stroke-opacity=%221.000%22 stroke-width=%221.6%22 fill=%22none%22/><path d=%22M901,1184 C897,1174 883,1140 878,1121 C872,1101 870,1073 871,1069 C871,1065 880,1093 881,1098 C882,1102 870,1091 876,1097 C882,1103 907,1125 918,1135 C929,1145 936,1156 941,1159 C945,1163 948,1156 946,1155 C943,1155 937,1158 926,1156 C915,1154 895,1146 878,1141 C862,1137 854,1142 826,1128 C798,1114 738,1081 711,1056 C683,1030 668,991 659,977 C650,963 664,986 655,970 C647,954 619,915 610,882 C601,849 602,798 601,772 C600,746 604,737 605,728 C606,720 606,719 607,720 C607,722 604,727 608,738 C613,749 630,777 634,787 C639,797 634,796 634,796 C634,796 629,786 633,788 C637,790 658,806 656,807 C654,807 642,804 622,790 C601,776 560,758 534,724 C507,689 475,624 463,582 C451,540 462,498 464,471 C465,444 470,434 472,420 C475,407 477,405 480,390 C483,374 488,338 492,328 C495,317 499,314 501,328 C503,341 502,393 504,410 C506,427 510,424 515,432 C521,440 540,456 538,457 C536,458 515,445 505,436 C494,428 488,418 473,405 C459,393 435,381 417,362 C400,342 382,311 369,289 C355,267 344,263 334,228 C325,193 311,121 312,80 C314,38 335,4 343,-20 C351,-44 358,-54 363,-65 C368,-76 373,-85 374,-86 C375,-87 371,-73 370,-70 C369,-66 368,-68 368,-66 C368,-64 369,-64 371,-59 C373,-53 377,-36 379,-32 C380,-27 381,-28 379,-30 C376,-33 367,-45 365,-48%22 stroke=%22%23ffffff%22 stroke-opacity=%220.300%22 stroke-width=%221.2%22 fill=%22none%22/><path d=%22M980,1150 C977,1142 965,1116 961,1100 C957,1084 956,1061 955,1055 C955,1049 960,1063 960,1063 C959,1063 948,1053 950,1054 C953,1056 969,1065 973,1069 C977,1074 977,1080 976,1081 C976,1081 976,1074 971,1073 C965,1071 955,1074 943,1072 C932,1070 916,1063 902,1059 C887,1055 877,1058 855,1047 C834,1037 793,1014 773,996 C752,977 743,948 735,936 C728,924 735,936 728,923 C720,910 699,883 692,859 C686,834 687,797 687,776 C687,755 690,744 690,734 C691,724 692,719 692,716 C693,713 690,713 692,716 C694,720 704,734 705,738 C706,741 699,739 696,737 C694,734 690,725 690,724 C690,722 700,732 695,730 C691,729 679,725 663,715 C647,704 617,692 598,667 C579,642 556,596 547,566 C539,535 547,504 549,483 C550,461 554,451 557,438 C559,425 562,420 564,406 C567,392 570,365 574,354 C577,343 584,336 586,341 C588,346 585,375 585,382 C585,390 586,384 588,385 C589,387 599,394 594,391 C589,388 569,378 558,369 C547,360 541,350 528,339 C515,328 494,318 480,302 C465,287 454,263 443,245 C432,227 421,222 414,196 C407,170 396,120 398,90 C399,59 415,32 422,13 C430,-7 436,-17 441,-29 C446,-40 452,-51 454,-55 C457,-60 456,-56 456,-58 C455,-59 454,-64 454,-67 C454,-70 455,-74 456,-74 C456,-74 457,-67 456,-68 C456,-69 454,-73 450,-78 C447,-83 437,-96 434,-99%22 stroke=%22%23ffffff%22 stroke-opacity=%220.300%22 stroke-width=%221.2%22 fill=%22none%22/><path d=%22M1261,1029 C1261,1029 1259,1031 1258,1027 C1258,1023 1261,1021 1258,1007 C1254,992 1246,956 1240,939 C1233,922 1228,920 1216,902 C1205,885 1189,852 1170,835 C1151,818 1122,812 1103,802 C1084,793 1074,784 1058,779 C1042,774 1017,775 1005,772 C993,770 992,766 984,764 C977,762 960,757 961,760 C962,763 985,777 992,783 C999,788 1006,796 1005,792 C1003,787 987,759 984,757 C981,754 986,771 987,776 C989,782 991,793 993,790 C994,786 995,771 996,756 C997,741 999,720 998,701 C997,681 995,662 988,639 C981,616 967,580 955,562 C944,543 929,538 919,527 C908,515 907,506 893,494 C879,483 849,466 835,458 C822,450 812,446 811,447 C810,448 821,454 827,464 C833,474 843,497 848,507 C852,516 851,524 852,523 C854,522 854,510 856,500 C858,490 864,472 865,463 C867,454 861,460 865,448 C869,435 887,415 889,387 C890,360 882,311 875,282 C867,254 859,240 845,219 C831,198 807,172 791,157 C775,142 759,138 748,129 C737,121 732,111 725,104 C717,98 704,93 701,91 C698,88 706,91 706,89 C705,88 698,75 698,81 C697,87 701,116 702,125 C703,133 702,135 705,131 C708,127 713,113 719,100 C725,87 733,73 740,54 C747,35 755,6 758,-14 C762,-35 760,-52 760,-71 C760,-90 761,-108 757,-130 C752,-151 742,-178 734,-197 C725,-217 715,-232 706,-246 C697,-261 684,-276 679,-282%22 stroke=%22%23ffffff%22 stroke-opacity=%220.300%22 stroke-width=%221.2%22 fill=%22none%22/><path d=%22M1337,997 C1337,998 1338,1008 1338,1007 C1338,1007 1342,1011 1339,994 C1335,977 1323,928 1314,906 C1306,884 1303,884 1287,862 C1272,839 1248,795 1223,772 C1198,750 1160,740 1137,728 C1113,716 1101,707 1082,701 C1062,695 1034,695 1022,692 C1009,689 1012,687 1007,685 C1001,684 982,676 989,683 C997,690 1036,714 1051,726 C1066,737 1077,755 1077,753 C1077,751 1055,712 1053,712 C1051,712 1063,741 1066,754 C1070,768 1073,792 1075,793 C1077,795 1077,778 1077,762 C1078,746 1082,721 1080,697 C1078,673 1077,649 1067,618 C1057,588 1037,539 1022,514 C1007,490 991,484 978,470 C966,457 965,447 947,433 C930,419 889,395 873,385 C857,376 848,371 851,375 C853,379 876,390 889,410 C902,429 921,470 928,491 C936,511 932,530 933,534 C935,538 935,526 937,517 C939,507 945,486 946,478 C947,471 939,486 943,473 C947,460 968,436 970,400 C971,364 961,293 952,256 C943,218 932,201 913,174 C895,148 862,112 843,94 C824,76 810,74 799,65 C788,56 784,47 777,41 C771,36 760,33 760,34 C760,35 774,45 776,47 C779,50 772,35 774,50 C775,64 782,115 783,134 C784,153 779,162 780,162 C782,162 787,147 793,134 C799,121 809,106 817,83 C825,60 835,23 840,-3 C844,-29 842,-48 842,-72 C841,-96 843,-118 837,-144 C832,-171 819,-207 808,-232 C798,-256 785,-275 774,-292 C764,-308 750,-325 745,-331%22 stroke=%22%23ffffff%22 stroke-opacity=%220.300%22 stroke-width=%221.2%22 fill=%22none%22/><path d=%22M-197,297 C-194,298 -184,304 -179,305 C-174,306 -177,305 -168,303 C-160,301 -142,295 -127,292 C-113,290 -101,290 -82,288 C-62,286 -32,278 -11,281 C11,283 30,298 47,304 C65,309 76,307 94,315 C112,324 140,342 156,354 C172,366 178,377 189,386 C200,395 215,400 224,407 C233,414 239,426 244,429 C250,432 250,426 256,427 C262,428 276,433 281,434 C287,435 283,436 288,435 C292,433 298,430 311,424 C324,418 346,405 364,399 C381,393 396,393 414,388 C432,384 449,373 472,372 C496,371 534,375 556,381 C579,387 595,400 610,407 C625,415 634,419 647,425 C659,431 674,439 684,444 C693,449 698,453 705,455 C713,457 725,457 729,457%22 stroke=%22%23ffffff%22 stroke-opacity=%220.300%22 stroke-width=%221.2%22 fill=%22none%22/><path d=%22M-264,511 C-254,513 -227,525 -205,527 C-183,529 -152,526 -133,524 C-113,522 -102,515 -89,513 C-76,511 -61,512 -53,510 C-45,508 -45,502 -41,503 C-36,504 -33,512 -25,515 C-18,518 -1,519 5,521 C12,523 8,522 16,529 C23,536 39,554 52,563 C64,573 75,576 90,587 C105,597 120,617 140,627 C160,637 188,641 208,646 C228,651 239,656 260,657 C282,658 314,658 337,653 C360,648 385,636 401,629 C418,622 425,615 437,611 C448,607 460,608 470,605 C480,603 493,597 496,595 C500,593 487,593 490,595 C492,597 500,602 510,608 C519,613 535,619 548,626 C560,632 570,637 585,645 C600,652 621,663 639,669 C657,675 685,677 695,679%22 stroke=%22%23ffffff%22 stroke-opacity=%220.300%22 stroke-width=%221.2%22 fill=%22none%22/></g></svg>");
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.22,.61,.36,1);
  --spring:cubic-bezier(.19,1,.22,1);   /* ease-out-expo, no overshoot */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto;overflow-x:hidden}

/* ---------- 02 base ---------- */
body{
  margin:0;background:var(--bg);color:var(--fg);font-family:var(--f);
  font-size:17px;line-height:1.65;letter-spacing:-.011em;
  caret-color:var(--acc);text-underline-offset:.22em;text-decoration-thickness:1px;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-variant-numeric:proportional-nums lining-nums;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
::selection{background:var(--acc);color:#000}
::-moz-selection{background:var(--acc);color:#000}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:3px}
:root{accent-color:var(--acc);color-scheme:dark;scrollbar-color:rgba(255,255,255,.18) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:99px;
  border:3px solid #000;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28);background-clip:padding-box}
a,button,summary{-webkit-tap-highlight-color:var(--acc-soft)}

/* Material. Pure black is a void; grain makes it a surface.
   Deliberately no mix-blend-mode: a full-viewport blending layer forces the
   whole page into one compositing group and costs more than the effect is
   worth. A flat low-alpha overlay reads the same and stays cheap. */
body::after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;
  background-image:var(--grain);background-size:150px 150px;opacity:.05}
@media(min-resolution:2dppx){body::after{opacity:.038;background-size:110px 110px}}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:#fff;color:#000;
  padding:12px 18px;border-radius:0 0 8px 0;font-size:.875rem;font-weight:500}
.skip:focus{left:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
.wrap-wide{max-width:var(--wrap-wide);margin:0 auto;padding-inline:var(--pad)}
section{padding-block:var(--sec);position:relative}
/* Section rules read as a channel narrowing to a point, not a table border. */
.rule{height:1px;border:0;margin:0;
  background:linear-gradient(90deg,transparent 0%,var(--line-soft) 14%,
    rgba(255,255,255,.14) 50%,var(--line-soft) 86%,transparent 100%)}
.rule.mark{position:relative;overflow:visible}
.rule.mark::after{content:"";position:absolute;top:-2px;left:50%;width:5px;height:5px;
  margin-left:-2.5px;border-radius:99px;background:var(--acc);
  box-shadow:0 0 0 4px rgba(233,180,76,.10),0 2px 14px 2px var(--acc-glow)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

h1,h2,h3,h4{margin:0;font-weight:600;text-wrap:balance}
h1,h2,.case-n,.post-card h3,
.faq summary,.prose h2,.prose h3,.band h2,.hero .lede{font-family:var(--fd)}
/* Figures stay on Inter: its tabular set is narrow and keeps the decimal point
   tight, which matters because these numbers count up and must not reflow. */
.stat-n,.kpi-v,.metric-v{font-family:var(--f)}
.wm{font-family:var(--f)}
h1{font-size:clamp(2.6rem,7vw,5.1rem);letter-spacing:-.04em;line-height:1.03}
h2{font-size:clamp(1.95rem,4.4vw,3.3rem);letter-spacing:-.035em;line-height:1.08}
h3{font-size:1.0625rem;letter-spacing:-.015em;line-height:1.45}
p{margin:0;text-wrap:pretty}

/* The measurement layer. Mono is reserved for things that are counted,
   dated, or read off an instrument — never for decoration. */
/* Mono is the instrument readout: labels attached to a number, and nothing
   else. Not tags, not breadcrumbs, not sentences — that is costume. */
.mono,.kpi-l,.kpi-d,.stat-l,.metric-l,.spark-l,.spark-v,.cell-h,.panel-m,
.legend,.post-meta,.step-n,.bar-v,.article-head .byline{
  font-family:var(--fm);font-feature-settings:"tnum" 1;}
.kpi-v,.spark-v,.bar-v{font-variant-numeric:tabular-nums lining-nums}
.stat-n,.metric-v{font-variant-numeric:proportional-nums lining-nums}
.lede{font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.6;color:var(--muted);letter-spacing:-.015em}
.body{color:var(--muted)}
/* Replaces the old eyebrow. Used only where a section has no heading of its
   own — a list of related links, for instance — never stacked above an h2
   that already says the same words. */
.sublabel{font-size:.9375rem;font-weight:500;letter-spacing:-.012em;color:#fff;
  margin:0 0 22px;padding-top:20px;position:relative}
.sublabel::before{content:"";position:absolute;top:0;left:0;width:26px;height:1px;
  background:var(--acc)}
.measure{max-width:640px}
.mt-l{margin-top:clamp(44px,6vw,72px)}
.mt-xl{margin-top:clamp(64px,8vw,110px)}

/* ---------- 03 motion primitives ----------
   One authored moment: the hero. Everything below the fold settles rather than
   performs — short travel, quick ease-out, tight stagger. The page should feel
   already-arrived by the time you have finished reading the heading. */
.lines{overflow:hidden}
.ln{display:block;overflow:hidden}
.ln > span{display:block;will-change:transform}
.js .ln > span{transform:translateY(108%)}
.js .rv.in .ln > span,.js .ln.in > span{transform:translateY(0);transition:transform .62s var(--ease)}
/* the hero alone gets the long mask reveal */
.js .hero .rv.in .ln > span,.js .hero .ln.in > span,
.js .article-head .ln.in > span{transition:transform 1.05s var(--ease)}

.js .up{opacity:0;transform:translateY(9px);will-change:transform,opacity}
.js .rv.in .up,.js .up.in{opacity:1;transform:none;
  transition:opacity .46s var(--ease-soft),transform .52s var(--ease)}

/* The hero headline draws itself: the outline arrives first, then the letters
   ink in from the left. Real HTML text throughout — no SVG substitution, so the
   h1 an SEO consultant is ranking for stays a plain, crawlable h1. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .js .hero h1.lines,.js .hero h1 .ln{overflow:visible}
  .js .hero h1 .ln > span{
    transform:none;color:transparent;
    -webkit-text-stroke:.9px rgba(255,255,255,.32);
    /* Solid white at both stops — this is a wipe mechanism, not gradient text.
       The finished state is flat #fff. */
    background-image:linear-gradient(90deg,#fff 0,#fff 100%); /* impeccable-disable-line gradient-text */
    background-repeat:no-repeat;background-size:0% 100%;
    -webkit-background-clip:text;background-clip:text} /* impeccable-disable-line gradient-text */
  .js .hero.rv.in h1 .ln > span{
    background-size:100% 100%;
    -webkit-text-stroke-color:rgba(255,255,255,0);
    transition:background-size 1.45s var(--ease),
      -webkit-text-stroke-color .7s linear .95s}
  .js .hero.rv.in h1 .ln:nth-child(2) > span{transition-delay:.36s,1.28s}
}
/* Windows High Contrast and any forced-colors mode drop background images,
   which would leave a transparent-filled headline invisible. Hand the colour
   back and skip the effect entirely. */
@media (forced-colors: active){
  .js .hero h1 .ln > span{
    color:CanvasText!important;-webkit-text-stroke:0!important;
    background-image:none!important;-webkit-background-clip:border-box!important;
    background-clip:border-box!important}
}

/* blur reveal — the hero treatment, and nowhere else */
.js .blur{opacity:0;filter:blur(12px);transform:translateY(14px);will-change:transform,opacity,filter}
.js .rv.in .blur,.js .blur.in{opacity:1;filter:blur(0);transform:none;
  transition:opacity 1.1s var(--ease-soft),transform 1.2s var(--spring),filter 1.1s var(--ease-soft)}

/* Release the compositing hint once an element has arrived. Left on, this page
   would hold a hundred-odd promoted layers for the whole session. */
.js .rv.in .up,.js .up.in,.js .rv.in .blur,.js .blur.in,
.js .rv.in .ln > span,.js .ln.in > span{will-change:auto}

.draw{transform-origin:left center}
.js .draw{transform:scaleX(0)}
.js .in .draw,.js .draw.in{transform:scaleX(1);transition:transform 1.1s var(--ease)}

.js .zoom img{transform:scale(1.12);will-change:transform}
.js .zoom.in img{transform:scale(1);transition:transform 1.6s var(--ease)}

.js .rv.in .d1,.js .d1.in{transition-delay:.035s}
.js .rv.in .d2,.js .d2.in{transition-delay:.07s}
.js .rv.in .d3,.js .d3.in{transition-delay:.105s}
.js .rv.in .d4,.js .d4.in{transition-delay:.14s}
.js .rv.in .d5,.js .d5.in{transition-delay:.175s}
.js .rv.in .d6,.js .d6.in{transition-delay:.21s}
.js .rv.in .d7,.js .d7.in{transition-delay:.245s}
/* the hero keeps its full cadence */
.js .hero .blur.d3{transition-delay:.22s}
.js .hero .blur.d4{transition-delay:.32s}
.js .hero .blur.d5,.js .hero .up.d5{transition-delay:.42s}

.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:70;
  background:linear-gradient(90deg,var(--acc) 0%,var(--acc-hi) 60%,#fff 100%);
  transform:scaleX(0);transform-origin:left;pointer-events:none}

/* ---------- 04 header + mega menu ---------- */
/* Height is constant. A nav that resizes on scroll animates layout every
   frame and shifts everything under it; only the surface changes here. */
.nav{position:fixed;inset:0 0 auto;z-index:60;height:var(--navh);
  border-bottom:1px solid transparent;background:transparent;
  transition:background .45s var(--ease-soft),border-color .45s var(--ease-soft)}
.nav.stuck{background:rgba(0,0,0,.78);border-bottom-color:var(--line-soft);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)}
.nav-in{max-width:var(--wrap-wide);margin:0 auto;padding-inline:var(--pad);height:100%;
  display:flex;align-items:center;justify-content:space-between;gap:24px}
.wm{font-size:1.0625rem;font-weight:400;letter-spacing:-.028em;white-space:nowrap}
.wm b{font-weight:600}
/* The header carries the full lockup, wordmark over tagline, exactly as the
   logo was supplied — only the transparent margin around it is trimmed, so the
   height below is the artwork itself and nothing is redrawn or re-set. The nav
   grows to hold it: the tagline is set small in the mark, and at a wordmark-
   sized height it would stop being readable at all. */
.brand{display:flex;align-items:center;flex:none;
  transition:opacity .35s var(--ease-soft)}
.brand img{display:block;height:26px;width:auto}
.brand:hover{opacity:.82}
@media(min-width:720px){
  :root{--navh:72px}
  .brand img{height:35px}
}
.nav-left{display:flex;align-items:center;gap:36px}

.menu{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0}
.menu > li{position:relative}
.menu-link,.menu-trigger{position:relative;display:inline-flex;align-items:center;gap:6px;
  font-size:.875rem;color:#b9b9b9;letter-spacing:-.008em;padding-block:6px;
  background:none;border:0;cursor:pointer;transition:color .3s var(--ease-soft)}
.menu-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#fff;
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.menu-link:hover,.menu-trigger:hover,.menu-link[aria-current="page"]{color:#fff}
.menu-link:hover::after{transform:scaleX(1);transform-origin:left}
.menu-link[aria-current="page"]::after{transform:scaleX(1)}
.menu-trigger .chev{width:9px;height:9px;transition:transform .4s var(--ease);opacity:.75}
.menu > li.open .menu-trigger{color:#fff}
.menu > li.open .menu-trigger .chev{transform:rotate(180deg)}

.mega{position:absolute;top:calc(100% + 14px);left:-16px;z-index:5;
  background:rgba(6,6,6,.96);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid var(--line);border-radius:var(--r);padding:10px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.9);
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.985);transform-origin:top left;
  transition:opacity .32s var(--ease-soft),transform .38s var(--ease),visibility .38s}
.menu > li.open .mega{opacity:1;visibility:visible;transform:none}
.mega-svc{width:min(640px,calc(100vw - 48px))}
.mega-ind{width:min(560px,calc(100vw - 48px))}
.mega-co{width:min(430px,calc(100vw - 48px));left:-16px}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
/* The services menu now runs to eight rows. Four rows of two is still one
   glance; a single column would be a scroll. */
@media(max-width:1180px){.mega-svc{left:auto;right:-16px;transform-origin:top right}}
.mega-co .mega-grid{grid-template-columns:1fr}
.mega-item{display:flex;gap:12px;padding:11px;border-radius:10px;align-items:flex-start;
  transition:background .25s var(--ease-soft)}
.mega-item:hover{background:rgba(255,255,255,.05)}
.mega-item:hover .mega-ico{border-color:rgba(233,180,76,.38);background:rgba(233,180,76,.06)}
.mega-ico{transition:border-color .3s var(--ease-soft),background .3s var(--ease-soft)}
.mega-ico{flex:none;width:42px;height:42px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.02)}
.mega-ico .ico{width:19px;height:19px}
.mega-t{display:block;font-size:.9375rem;font-weight:500;letter-spacing:-.015em;line-height:1.3}
.mega-d{display:block;margin-top:3px;font-size:.75rem;color:var(--dim);line-height:1.45}
.mega-foot{margin-top:6px;padding:12px 11px 4px;border-top:1px solid var(--line-soft);
  font-size:.8125rem;color:var(--dim)}
.mega-foot a{color:#fff;font-weight:500;border-bottom:1px solid rgba(255,255,255,.3)}
.mega-foot a:hover{border-bottom-color:var(--acc);color:var(--acc-hi)}

.nav-cta{display:flex;align-items:center;gap:10px}
.nav .btn{height:40px;padding:0 20px;font-size:.875rem}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:9px;
  color:#fff;width:40px;height:40px;place-items:center;cursor:pointer}
.menu-btn svg{width:18px;height:18px}
.menu-btn .bar1,.menu-btn .bar2{transition:transform .35s var(--ease),opacity .25s ease}
.menu-btn[aria-expanded="true"] .bar1{transform:translateY(3.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .bar2{transform:translateY(-3.5px) rotate(-45deg)}

.mnav{position:fixed;inset:var(--navh) 0 0;z-index:59;background:rgba(0,0,0,.97);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border-top:1px solid var(--line-soft);overflow-y:auto;overscroll-behavior:contain;
  padding:22px var(--pad) 40px;opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .35s var(--ease-soft),transform .4s var(--ease),visibility .4s}
.mnav.open{opacity:1;visibility:visible;transform:none}
.mnav h4{font-size:.6875rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--label);margin:22px 0 8px}
.mnav h4:first-child{margin-top:0}
.mnav .mega-item{padding:10px 0}
/* Blog is its own top-level destination, not a Company row - the rule keeps
   it from reading as part of the list above it once the menu collapses. */
.mnav .mega-item.solo{margin-top:22px;padding-top:20px;
  border-top:1px solid var(--line-soft)}
.mnav .mega-item:hover{background:none}
.mnav .btn{width:100%;margin-top:24px}
@media(max-width:1040px){
  .menu{display:none}
  .menu-btn{display:grid;order:3}
  .nav-cta .btn{display:none}
}
@media(min-width:1041px){.mnav{display:none}}

/* ---------- 05 buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:50px;padding:0 28px;border-radius:999px;font-size:.9375rem;font-weight:500;
  letter-spacing:-.012em;border:1px solid transparent;cursor:pointer;white-space:nowrap;
  overflow:hidden;isolation:isolate;
  transition:transform .45s var(--ease),color .35s var(--ease-soft),border-color .35s var(--ease-soft)}
.btn > span{position:relative;z-index:2;display:inline-flex;align-items:center;gap:9px}
.btn::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;
  transform:translateY(101%);transition:transform .55s var(--ease)}
.btn-primary{background:#fff;color:#000}
.btn-primary::before{background:linear-gradient(180deg,#fff 0%,#f0dcb4 100%)}
.btn-primary:hover::before{transform:translateY(0)}
.btn-ghost{border-color:rgba(255,255,255,.24);color:#fff}
.btn-ghost::before{background:#fff}
.btn-ghost:hover{color:#000;border-color:#fff}
.btn-ghost:hover::before{transform:translateY(0)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.btn .arw{width:15px;height:15px;flex:none;transition:transform .4s var(--ease)}
.btn:hover .arw{transform:translateX(3px)}
.tlink{display:inline-flex;align-items:center;gap:8px;font-size:.9375rem;font-weight:500;
  color:#fff;border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:3px;
  transition:border-color .3s var(--ease-soft)}
.tlink:hover{border-bottom-color:var(--acc);color:var(--acc-hi)}
.tlink svg{width:14px;height:14px;transition:transform .4s var(--ease)}
.tlink:hover svg{transform:translateX(3px)}

/* ---------- hairline icons ---------- */
.ico{width:26px;height:26px;flex:none;color:#fff;overflow:visible}
.ico path,.ico circle,.ico rect,.ico line,.ico polyline{
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke}
.js .ico [data-draw]{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.js .in .ico [data-draw]{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s var(--ease)}

/* ---------- 06 hero ---------- */
.hero{position:relative;padding-block:clamp(132px,16vh,190px) var(--sec);overflow:hidden}
/* Three layers, three jobs: the contour field, the confluence bloom, the
   horizon. No rotated white blobs — that light belongs to no place. */
.hero-glow{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict}
.hero-glow i{position:absolute;display:block}
/* The waves. Five stacked sine curves on a canvas, lit in the brand's own
   colours and bent toward the pointer. Same argument the confluence map made —
   separate channels converging — but drawn as live light rather than a static
   picture, and sized to the hero box rather than the window, so it is correct
   at every breakpoint instead of only at the one it was generated for. */
.hero-waves{position:absolute;left:0;right:0;top:0;z-index:0;display:block;
  width:100%;height:min(104%,60rem);
  pointer-events:none;opacity:0;
  /* The hero also contains the report panel. The waves belong to the headline,
     so the canvas is capped to that band and faded out before it can wash
     under the chart. */
  -webkit-mask-image:linear-gradient(#000 0%,#000 54%,transparent 93%),
    radial-gradient(58% 32% at 50% 27%,rgba(0,0,0,.30) 0%,rgba(0,0,0,.72) 58%,#000 100%);
  mask-image:linear-gradient(#000 0%,#000 54%,transparent 93%),
    radial-gradient(58% 32% at 50% 27%,rgba(0,0,0,.30) 0%,rgba(0,0,0,.72) 58%,#000 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  transition:opacity 1.4s var(--ease-soft) .3s}
.js .hero.rv.in .hero-waves{opacity:1}
/* Interior pages carry the same water, quieter. */
.js .phero.rv.in .hero-waves{opacity:.62}
/* A tight warm lift exactly where the waves converge — small enough to read
   as light rather than as a stain. */
.hero-glow .hg-bloom{left:49.5%;top:63%;width:min(34rem,86%);height:22rem;z-index:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(50% 50% at 50% 50%,rgba(233,180,76,.085) 0,
    rgba(233,180,76,.022) 44%,transparent 72%)}
.hero-glow .hg-horizon{inset:auto -10% -22% -10%;height:38rem;z-index:1;
  background:radial-gradient(60% 100% at 50% 100%,rgba(255,255,255,.055) 0,rgba(255,255,255,.012) 52%,transparent 78%)}

@media(max-width:900px){
  .hero-glow .hg-horizon{display:none}
  .hero-waves{height:min(104%,44rem)}
}
.hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to bottom,transparent 0%,transparent 54%,rgba(0,0,0,.62) 80%,var(--bg) 100%),
    radial-gradient(148% 116% at 50% 6%,transparent 0%,transparent 52%,rgba(0,0,0,.72) 100%)}
.hero .wrap{position:relative;z-index:2}
.hero-copy{text-align:center;max-width:920px;margin:0 auto}
.hero h1{margin-top:32px;text-wrap:balance}
.hero .lede{margin:26px auto 0;max-width:54ch}
.hero .btn-row{margin-top:38px;justify-content:center}
.hero-note{margin-top:20px;font-size:.8125rem;color:#8b8b91}

.pill{display:inline-flex;align-items:center;gap:14px;padding:5px 6px 5px 14px;
  border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.035);
  font-size:.8125rem;color:#d6d6d6;letter-spacing:-.008em;
  box-shadow:0 8px 30px -12px rgba(0,0,0,.9);
  transition:background .35s var(--ease-soft),border-color .35s var(--ease-soft)}
.pill:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2)}
.pill::before{content:"";width:6px;height:6px;border-radius:99px;background:var(--acc);
  flex:none;box-shadow:0 0 0 3px rgba(233,180,76,.16)}
.pill .sep{width:1px;height:15px;background:rgba(255,255,255,.18)}
.pill .knob{width:24px;height:24px;border-radius:999px;background:rgba(255,255,255,.08);
  overflow:hidden;display:grid;place-items:center}
.pill .knob .slide{display:flex;width:48px;transform:translateX(-50%);
  transition:transform .5s var(--ease)}
.pill:hover .knob .slide{transform:translateX(0)}
.pill .knob span{width:24px;height:24px;display:grid;place-items:center}
.pill .knob svg{width:11px;height:11px}

.hero-frame{position:relative;margin-top:clamp(48px,7vw,84px);padding-inline:2px}
.hero-frame .fade{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(to bottom,transparent 0%,transparent 88%,rgba(0,0,0,.9) 100%)}
.hero-frame .shell{position:relative;max-width:1000px;margin:0 auto;border:1px solid var(--line);
  border-radius:var(--r-lg);background:rgba(255,255,255,.02);padding:9px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,1),0 0 0 1px rgba(255,255,255,.03)}
.hero-frame .shell > .panel{border-radius:calc(var(--r-lg) - 8px);margin:0}


/* ---------- 07 stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{position:relative;padding:clamp(28px,4vw,44px) clamp(16px,2.4vw,32px)}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--line-soft);
  transform-origin:top;transition:transform .8s var(--ease)}
.stat::after{content:"";position:absolute;left:0;top:0;width:22px;height:1px;background:var(--acc);
  opacity:0;transition:opacity .5s var(--ease-soft)}
.stats.in .stat::after{opacity:.75}
.js .stats:not(.in) .stat::before{transform:scaleY(0)}
.stat:first-child{padding-left:0}
.stat:first-child::before{display:none}
.stat-n{font-size:clamp(2.1rem,4.4vw,3.3rem);font-weight:600;letter-spacing:-.04em;line-height:1}
.stat-l{margin-top:12px;font-size:.75rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--label);line-height:1.5}
@media(max-width:760px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat{padding-inline:0}
  .stat::before{display:none}
  .stat:nth-child(2),.stat:nth-child(4){padding-left:24px;border-left:1px solid var(--line-soft)}
  .stat:nth-child(3),.stat:nth-child(4){border-top:1px solid var(--line-soft)}
}

/* ---------- 08 service grid ----------
   Six equal cards, icon left, copy right. Equal on purpose: these are six
   comparable choices, and the old bento's arbitrary 3/3/2/2/2/6 spans implied
   a hierarchy that does not exist. The weight now sits in the icon, which is a
   96px micro-scene rather than a glyph. */
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:clamp(40px,5vw,64px)}
@media(max-width:900px){.fgrid{grid-template-columns:1fr}}

.fcard{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(18px,2.2vw,26px);align-items:start;overflow:hidden;
  padding:clamp(22px,2.4vw,28px);
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);
  transition:border-color .45s var(--ease-soft),transform .55s var(--ease),
    background .45s var(--ease-soft)}
.fcard::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .45s var(--ease-soft);
  background:radial-gradient(120% 90% at 14% 0%,rgba(233,180,76,.08) 0,transparent 58%)}
.fcard:hover{border-color:rgba(233,180,76,.32);transform:translateY(-2px);background:#0a0a0d}
.fcard:hover::after{opacity:1}

.ficon{flex:none;width:clamp(72px,7vw,94px);aspect-ratio:1;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:20px;
  background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 12px 30px -18px rgba(0,0,0,.9);
  transition:border-color .45s var(--ease-soft),background .45s var(--ease-soft)}
.fcard:hover .ficon{border-color:rgba(233,180,76,.34);
  background:linear-gradient(160deg,rgba(233,180,76,.10),rgba(255,255,255,.012))}
.ficon .ico2{width:66%;height:66%}

/* ---------- 09b service tiles: 3D icon-tab motion ----------
   Lifted from the Airbnb-style icon tabs: each tile springs up out of nothing
   with a stagger as the row arrives, turns over under the pointer, and gives
   under a press. The overshoot curve is what makes it read as a spring rather
   than a fade — a linear ease here looks like a bug. */
.ficon{perspective:620px;transform-style:preserve-3d}
.js .fgrid .ficon{opacity:0;transform:scale(0)}
.js .fgrid.in .ficon{opacity:1;transform:scale(1);
  transition:opacity .3s var(--ease-soft),
    transform .52s cubic-bezier(.34,1.56,.64,1),
    border-color .45s var(--ease-soft),background .45s var(--ease-soft)}
.js .fgrid.in .fcard:nth-child(1) .ficon{transition-delay:0s}
.js .fgrid.in .fcard:nth-child(2) .ficon{transition-delay:.1s}
.js .fgrid.in .fcard:nth-child(3) .ficon{transition-delay:.2s}
.js .fgrid.in .fcard:nth-child(4) .ficon{transition-delay:.3s}
.js .fgrid.in .fcard:nth-child(5) .ficon{transition-delay:.4s}
.js .fgrid.in .fcard:nth-child(6) .ficon{transition-delay:.5s}
/* Hover and press drop the entrance delay, or the tile answers half a second
   after the pointer has already moved on. */
.js .fgrid.in .fcard:hover .ficon{transform:scale(1.08) rotateX(-7deg);transition-delay:0s}
.js .fgrid.in .fcard:active .ficon{transform:scale(.9) rotateX(0deg);transition-delay:0s;
  transition-duration:.22s}
/* And the glyph itself turns, the way the 3D tab icons twirl on selection. */
.ficon .ico2{transition:transform .85s cubic-bezier(.32,1.18,.5,1)}
.fcard:hover .ficon .ico2{transform:rotateY(360deg)}

.fbody{display:flex;flex-direction:column;min-height:100%}
.fk{font-size:.625rem;letter-spacing:.15em;text-transform:uppercase;color:var(--label)}
.ft{margin-top:10px;font-family:var(--fd);font-size:clamp(1.1rem,1.5vw,1.3rem);
  font-weight:600;letter-spacing:-.026em;line-height:1.25}
.fd{margin-top:10px;font-size:.9375rem;line-height:1.62;color:var(--muted)}
.fgo{margin-top:auto;padding-top:18px;display:inline-flex;align-items:center;gap:8px;
  font-size:.8125rem;color:#fff;opacity:.68;transition:opacity .35s ease,color .35s ease}
.fcard:hover .fgo{opacity:1;color:var(--acc-hi)}
.fgo .arw{width:14px;height:14px;transition:transform .4s var(--ease)}
.fcard:hover .fgo .arw{transform:translateX(4px)}
@media(max-width:560px){
  .fcard{grid-template-columns:1fr;gap:18px}
  .ficon{width:66px}
}

/* ---------- 05b service icons ----------
   Two states per icon, looping: what the service does, then the outcome. One
   rule holds them together — the structure is always fully drawn, and exactly
   one element performs. An icon that is half-invisible at any given frame
   reads as broken rather than as animated, which is what sank the first pass.
   Structure is dim; the outcome is the only warm mark.
   Paused by default, so nothing runs off-screen or inside a closed menu. */
.ico2{width:26px;height:26px;flex:none;color:#fff;overflow:visible}
.ico2 rect,.ico2 circle,.ico2 path,.ico2 line{
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico2 .i-col,.ico2 .i-ghost,.ico2 .i-rail,.ico2 .i-line,.ico2 .i-panel,
.ico2 .i-frame,.ico2 .i-box,.ico2 .i-flap,.ico2 .i-ring,.ico2 .i-slot,
.ico2 .i-blk{stroke:rgba(255,255,255,.44)}
.ico2 .i-slot{stroke:rgba(255,255,255,.22)}
.ico2 .i-ghost{stroke:rgba(255,255,255,.16)}
.ico2 .i-fill{fill:currentColor;stroke:none}
.ico2 .i-hit{stroke:var(--acc)}
.ico2 .i-fill.i-hit,.ico2 .i-hit.i-fill{fill:var(--acc);stroke:none}
.ico2-sm{width:22px;height:22px}
.ico2 .i-send,.ico2 .i-card,.ico2 .i-check,
.ico2 .i-spark,.ico2 .i-blk,.ico2 .i-flap{
  transform-box:view-box;transform-origin:20px 20px}
.ico2 .i-pin{transform-box:view-box;transform-origin:17px 17px}
.ico2 .i-click{transform-box:view-box;transform-origin:26px 22px}
.ico2 .i-rank{transform-box:view-box;transform-origin:20px 29px}
.ico2 .i-star{transform-box:view-box;transform-origin:29.8px 28.8px}
.ico2 .i-pulse{transform-box:view-box;transform-origin:25.6px 21.2px;stroke-width:1.6}

/* Every animated part starts paused. A grid scrolled into view, a hovered menu
   row, or a hovered feature panel is what starts it. */
.ico2 [class*="i-"]{
  animation-play-state:paused;animation-fill-mode:both}
.js .fgrid.in .ico2 [class*="i-"],
.mega-item:hover .ico2 [class*="i-"]{animation-play-state:running}

/* seo — the pin drops onto the search and settles. Local search in one move:
   somebody looks, and you are the place they find. */
.ico2 .i-pin{animation:seoPin 5s var(--ease) infinite}
@keyframes seoPin{
  0%,8%{transform:translateY(-13px);opacity:0}
  26%{transform:translateY(1.6px);opacity:1}
  36%,84%{transform:translateY(0);opacity:1}
  96%,100%{transform:translateY(-13px);opacity:0}}

/* ads — the click arrives on the ad and converts. The ring is the conversion,
   which is the only part of a paid campaign worth drawing. */
.ico2 .i-click{animation:adsClick 5s var(--ease) infinite}
.ico2 .i-pulse{animation:adsPulse 5s var(--ease) infinite}
@keyframes adsClick{
  0%,10%{transform:translate(7px,7px) scale(.72);opacity:0}
  30%{transform:translate(0,0) scale(1);opacity:1}
  40%{transform:translate(-1px,-1px) scale(.9);opacity:1}
  50%,86%{transform:translate(0,0) scale(1);opacity:1}
  100%{transform:translate(7px,7px) scale(.72);opacity:0}}
@keyframes adsPulse{
  0%,40%{transform:scale(.28);opacity:0}
  54%{transform:scale(1);opacity:.9}
  70%,100%{transform:scale(1.5);opacity:0}}

/* email — the message leaves. The envelope never moves; only the note does. */
.ico2 .i-send{animation:mailSend 5s var(--ease) infinite}
@keyframes mailSend{
  0%,18%{transform:translateY(8px);opacity:0}
  36%{transform:translateY(1px);opacity:1}
  64%{transform:translateY(-3px);opacity:1}
  84%,100%{transform:translateY(-10px);opacity:0}}

/* crm — the card crosses the pipeline and lands on Won. A ghost slot stays put
   so the first column never looks empty while the card is away. */
.ico2 .i-card{animation:crmCard 5s var(--ease) infinite}
.ico2 .i-check{animation:crmCheck 5s var(--ease) infinite}
@keyframes crmCard{
  0%,10%{transform:translate(0,0)}
  30%,40%{transform:translate(11.25px,0)}
  60%,86%{transform:translate(22.5px,0)}
  100%{transform:translate(0,0)}}
@keyframes crmCheck{
  0%,56%{opacity:0;transform:scale(.5)}
  70%{opacity:1;transform:scale(1.25)}
  80%,88%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(.5)}}

/* web — the page is always drawn; the speed bar is what fills */
.ico2 .i-speed{stroke-dasharray:24;stroke-dashoffset:24;
  animation:webSpeed 5s var(--ease) infinite}
@keyframes webSpeed{
  0%,28%{stroke-dashoffset:24}
  58%,88%{stroke-dashoffset:0}
  100%{stroke-dashoffset:24}}

/* ai — the answer is always there; the citation and the spark are the payoff */
.ico2 .i-cite{stroke-dasharray:6.4;animation:aiCite 5s var(--ease) infinite}
.ico2 .i-spark{animation:aiSpark 5s var(--ease) infinite}
@keyframes aiCite{
  0%,34%{stroke-dashoffset:6.4}
  54%,88%{stroke-dashoffset:0}
  100%{stroke-dashoffset:6.4}}
@keyframes aiSpark{
  0%,44%{opacity:0;transform:scale(.35) rotate(-45deg)}
  62%{opacity:1;transform:scale(1.2) rotate(0deg)}
  74%,88%{opacity:1;transform:scale(1) rotate(0deg)}
  100%{opacity:0;transform:scale(.35) rotate(-45deg)}}

/* local - the listing climbs the map pack. Same rhythm as the CRM card, because
   it is the same story told vertically: a thing you own moves up a board and
   stays there. The three slots stay drawn, so the pack never looks empty. */
.ico2 .i-rank{animation:localClimb 5s var(--ease) infinite}
@keyframes localClimb{
  0%,10%{transform:translateY(0)}
  32%,42%{transform:translateY(-5.6px)}
  64%,88%{transform:translateY(-11.2px)}
  100%{transform:translateY(0)}}

/* gbp - the profile is always drawn; the review is the only thing that arrives.
   It lands slightly oversized and settles, the way the seo pin does. */
.ico2 .i-star{animation:gbpStar 5s var(--ease) infinite}
@keyframes gbpStar{
  0%,10%{transform:translateY(7px) scale(.32);opacity:0}
  30%{transform:translateY(0) scale(1.18);opacity:1}
  42%,86%{transform:translateY(0) scale(1);opacity:1}
  100%{transform:translateY(7px) scale(.32);opacity:0}}

/* ---------- 09 services list ---------- */
.svc-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);
  gap:clamp(32px,6vw,88px);align-items:start}
@media(max-width:900px){.svc-grid{grid-template-columns:1fr;gap:44px}}
.svc-sticky{position:sticky;top:120px}
.svc-sticky h2,.case-side .case-n{font-size:clamp(1.55rem,2.5vw,2.15rem);letter-spacing:-.03em}
@media(max-width:900px){.svc-sticky{position:static}}

/* ---------- 10 report panel + charts ---------- */
.panel{position:relative;overflow:hidden;border:1px solid var(--line);background:var(--panel);
  border-radius:var(--r);padding:clamp(18px,2.6vw,30px)}
.panel-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-bottom:18px;margin-bottom:clamp(18px,2.4vw,24px);border-bottom:1px solid var(--line-soft)}
.panel-t{font-size:.9375rem;font-weight:500;letter-spacing:-.015em}
.panel-m{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:9px;overflow:hidden;
  margin-bottom:clamp(18px,2.4vw,24px)}
.kpi{background:var(--panel);padding:clamp(13px,1.8vw,18px)}
.kpi-l{font-size:.625rem;letter-spacing:.13em;text-transform:uppercase;color:var(--label)}
.kpi-v{margin-top:9px;font-size:clamp(1.1rem,2.1vw,1.55rem);font-weight:600;letter-spacing:-.03em;
  line-height:1}
.kpi-d{margin-top:7px;font-size:.6875rem;color:var(--dim);display:flex;align-items:flex-start;
  gap:5px;line-height:1.45}
.kpi-d svg{width:9px;height:9px;flex:none;color:var(--acc);margin-top:.34em}
@media(max-width:700px){.kpis{grid-template-columns:repeat(2,1fr)}}

.chart-wrap{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);border-radius:9px;overflow:hidden}
@media(max-width:820px){.chart-wrap{grid-template-columns:1fr}}
.chart-cell{background:var(--panel);padding:clamp(15px,2vw,22px);
  display:flex;flex-direction:column}
.chart-cell > .illus{margin-top:auto;padding-top:14px}
.cell-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:.625rem;letter-spacing:.13em;text-transform:uppercase;color:var(--label);margin-bottom:16px}
.legend{display:flex;align-items:center;gap:14px;font-size:.5625rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim)}
.legend i{display:inline-block;width:14px;height:0;border-top:1.5px solid var(--acc);
  margin-right:6px;vertical-align:middle}
.legend i.dash{border-top-style:dashed;border-color:#70707a}

.chart{width:100%;height:auto;display:block;overflow:visible}
.chart .grid-l{stroke:rgba(255,255,255,.06);stroke-width:1;vector-effect:non-scaling-stroke}
.chart .grid-l.base{stroke:rgba(255,255,255,.20)}
/* A phase marker is an event, not a gridline. It gets weight and a brass tint
   so the before/after split is the first thing the eye lands on. */
.chart .divider{stroke:var(--acc-line);stroke-width:1;stroke-dasharray:2 4;
  vector-effect:non-scaling-stroke}
.chart .axis-t{fill:#8b8b91;font-size:7.5px;font-family:var(--fm);letter-spacing:.02em}
.chart .axis-y{fill:#8b8b91;font-size:7.5px;font-family:var(--fm);text-anchor:end}
.chart .axis-t.phase{fill:var(--acc);letter-spacing:.08em}
/* The measured line is the loudest thing in the cell. Everything else -
   grid, comparison, axis - sits at least one step behind it. */
.chart .line{fill:none;stroke:var(--acc);stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round;vector-effect:non-scaling-stroke}
.chart .line.dim{stroke:#a2a2ac;stroke-width:1.4;stroke-dasharray:5 4;opacity:.9}
/* The comparison line runs through the tinted area fill, so it needs a
   little more weight than a normal secondary series would. */
.chart .area{fill:url(#fade);opacity:0}
.js .in .chart .area{opacity:1;transition:opacity 1.1s var(--ease) .5s}
.chart .dot{fill:#000;stroke:var(--acc);stroke-width:1.6;vector-effect:non-scaling-stroke}
.chart .dot-halo{fill:var(--acc);opacity:.16}
.js .chart .dot-halo{opacity:0}
.js .in .chart .dot-halo{opacity:.16;transition:opacity .5s ease 1.2s}
.chart .mark{fill:var(--acc)}
.js .chart [data-draw]{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.js .in .chart [data-draw]{stroke-dashoffset:0;transition:stroke-dashoffset 1.9s var(--ease)}
.js .chart .line.dim{opacity:0}
.js .in .chart .line.dim{opacity:.9;transition:opacity 1s var(--ease) .4s}
.js .chart .dot,.js .chart .lbl{opacity:0}
.js .in .chart .dot,.js .in .chart .lbl{opacity:1;transition:opacity .5s ease 1.2s}
.chart .lbl{fill:var(--acc);font-size:8.5px;font-family:var(--fm);font-weight:500}
/* Every line ends in a gutter rather than against the frame, with its value
   sitting beside the final point. The grid runs the full width of the box
   underneath, so nothing terminates in mid-air. */
/* Gutter scale labels — grey, because they are the axis, not the signal. */
.chart .axis-r{fill:#8b8b91;font-size:7.5px;font-family:var(--fm);letter-spacing:.02em}
.js .chart .axis-r{opacity:0}
.js .in .chart .axis-r{opacity:1;transition:opacity .5s ease 1.3s}
/* The origin of each line, so a series reads as bounded at both ends. */
.chart .dot-start{fill:none;stroke:rgba(255,255,255,.34);stroke-width:1.4;
  vector-effect:non-scaling-stroke}
.js .chart .dot-start{opacity:0}
.js .in .chart .dot-start{opacity:1;transition:opacity .5s ease .9s}
.js .in .chart.lit .glowdot{transition-delay:2.1s}
@media(max-width:760px){
  .chart .minor{display:none}
  .chart .axis-t{font-size:14px}
  .chart-rev .axis-y{display:none}
  .chart-rev .axis-t{font-size:18px;transform:translateY(-3px)}
  /* Type has to grow on a narrow screen, and at that size the callout no
     longer fits in the right gutter. So on mobile it goes back over the top of
     the endpoint, where the empty top-left of the plot gives it room, and the
     leader rule that pointed into the gutter is dropped. */
  .chart-rev .lbl{font-size:15px}
  /* The sparklines keep their gutter — their callouts are short enough. */
  .spark .chart .lbl{font-size:13px}
  .spark .chart .axis-r{font-size:11px}
}

.bars{display:flex;flex-direction:column;gap:15px}
.bar-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:baseline}
.bar-n{font-size:.8125rem;color:#c8c8c8}
.bar-v{font-size:.8125rem;color:var(--label);font-variant-numeric:tabular-nums}
/* The track has to be visible or the fills read as arbitrary dashes rather
   than shares of one whole. */
.bar-t{grid-column:1/-1;height:4px;background:rgba(255,255,255,.10);overflow:hidden;
  border-radius:2px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.bar-f{display:block;height:100%;border-radius:2px;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,rgba(233,180,76,.62),var(--acc))}
.js .in .bar-f{transform:scaleX(var(--w));transition:transform 1.3s var(--ease)}
.illus{margin-top:14px;font-size:.75rem;color:#8b8b91;letter-spacing:0}

/* ---------- 11 systems diagram ----------
   A board, not a mind map: modules wired into one chip on square traces. The
   module face is the .ficon treatment from the service grid, redrawn in SVG —
   on pure black a drop shadow does nothing, so the depth has to come from the
   surface itself: a face lit from the top left, a rim that fades as it comes
   down, one sheen across the upper half. */
.flow-scroll{margin-top:clamp(34px,5vw,54px);overflow-x:auto;overscroll-behavior-x:contain;
  padding-bottom:6px;-webkit-overflow-scrolling:touch}
.flow{display:block;width:100%;min-width:860px;height:auto;overflow:visible}

/* Weight encodes the argument: tributaries are thin, the run out of the site is
   the widest thing on the board, and the three links most people never build —
   the lead that skips the site, the email that brings them back, the customer
   who feeds the top again — are dashed. */
.flow .lnk{fill:none;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke}
.flow .k-in{stroke:rgba(255,255,255,.22);stroke-width:1}
.flow .k-core{stroke:rgba(255,255,255,.5);stroke-width:2}
.flow .k-out{stroke:rgba(255,255,255,.3);stroke-width:1.4}
.flow .k-cross{stroke:rgba(255,255,255,.14);stroke-width:1;stroke-dasharray:2 6}
/* The two return runs are warm, faintly: they are the only wires on the board
   that carry money back to the top, and nothing else should read as a frame. */
.flow .k-back,.flow .k-loop{stroke:rgba(233,180,76,.20);stroke-width:1;stroke-dasharray:3 7}

/* Travelling light. The glow is a soft radial blob clipped by a mask of the
   same stroke, so it reads as light moving inside the trace rather than a dot
   sliding along a line. Motion comes from SMIL animateMotion following the real
   path — no duplicated coordinates, no JS. */
/* Shared travelling-light dot. Named glowdot because .spark is already the
   sparkline panel in the case studies. */
.glowdot{opacity:0}
/* Each light now fades itself in and out at the ends of its own pass (SMIL, in
   the generated markup), so this only has to open the gate. */
.js .lit .glowdot{opacity:1;transition:opacity 1s var(--ease-soft)}

/* ---- modules ---- */
.flow .t-face{fill:url(#ecoFace);transition:fill .4s var(--ease-soft)}
.flow .t-gloss{fill:url(#ecoSheen)}
.flow .t-rim{fill:none;stroke:url(#ecoRim);stroke-width:1;
  vector-effect:non-scaling-stroke;transition:stroke .4s var(--ease-soft)}
/* The payoff module is the one warm rim on the board — same rule as the icon
   set: structure is dim, the outcome is the only warm mark. */
.flow .nd-acc .t-rim{stroke:url(#ecoRimAcc)}
.flow .nd .ico2{width:46px;height:46px}
.flow .core .ico2{width:46px;height:46px}
/* The service tiles' hover, translated: the module under the pointer lifts off
   the board and takes the signal colour. */
.flow .nd{transform-box:view-box;cursor:default;
  transition:transform .55s var(--ease)}
/* .js .in .flow .nd below sets the resting transform, so the hover state has to
   out-specify it or the lift never happens once the reveal has run. */
.flow .nd:hover,.js .in .flow .nd:hover{transform:translateY(-5px) scale(1.05)}
.flow .nd:hover .t-rim{stroke:var(--acc)}
.flow .nd:hover .t-face{fill:#151209}

/* ---- the chip ---- */
.flow .chip-face{fill:url(#ecoChip)}
.flow .chip-gloss{fill:url(#ecoSheen)}
.flow .chip-inner{fill:none;stroke:rgba(255,255,255,.055);stroke-width:1;
  vector-effect:non-scaling-stroke}
.flow .chip-rim{fill:none;stroke:var(--acc-line);stroke-width:1.3;
  vector-effect:non-scaling-stroke}
.flow .pin{fill:url(#ecoPin)}
.flow .pin-v{fill:url(#ecoPinV)}
.flow .halo{fill:none;stroke:var(--acc);stroke-opacity:.26;stroke-width:1;
  vector-effect:non-scaling-stroke;transform-box:view-box;transform-origin:520px 250px}
/* The chip breathes rather than blinking: one continuous 7s swell, no hard
   edge anywhere in the cycle to catch the eye. */
.js .flow.lit .halo{animation:junctionring 7s ease-in-out infinite}
@keyframes junctionring{
  0%,100%{transform:scale(1);stroke-opacity:.2}
  50%{transform:scale(1.035);stroke-opacity:.34}}

/* paint-order puts a black stroke behind the glyphs, so a label stays legible
   where a trace or a spark passes underneath it. The notes carry a fatter halo
   on purpose: each one sits on the wire it explains and knocks a gap in it. */
.flow text{paint-order:stroke fill;stroke:#000;stroke-width:3.5px;stroke-linejoin:round}
/* Type here is the page's type, at the page's weights. Names sit in the display
   voice at the heading's own tracking; everything under them is the same
   uppercase micro-label the service cards and case studies use — body face,
   .15em, --label — not mono. Mono is reserved for things attached to a number,
   and a label with no number in it wearing mono is how mono starts looking
   like a costume. */
.flow .lab{fill:#ededed;font-family:var(--fd);font-size:13px;font-weight:600;
  letter-spacing:-.024em}
.flow .lab-s{fill:var(--label);font-family:var(--f);font-size:8px;font-weight:500;
  letter-spacing:.15em}
.flow .lab-core{fill:#fff;font-size:15.5px;letter-spacing:-.026em}
.flow .lab-s-core{fill:var(--acc);fill-opacity:.9}
.flow .eco-note{fill:#7e7e86;stroke-width:5.5px}

/* ---- arrival ---- */
.js .flow [data-draw]{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
/* --dt and --dd come off the path itself: every wire draws at the same speed,
   so its duration is its own length, and they start in the order the system
   runs — in, through, out. */
.js .in .flow [data-draw]{stroke-dashoffset:0;
  transition:stroke-dashoffset var(--dt,1.5s) var(--ease) var(--dd,0s)}
/* The chip lands first — everything else is wired to it — then the modules pop
   in on the same spring the service tiles use. */
.js .flow .core{opacity:0;transform:scale(.9);transform-box:view-box;
  transform-origin:520px 250px}
.js .in .flow .core{opacity:1;transform:scale(1);
  transition:opacity .5s var(--ease-soft) .1s,transform .75s var(--ease) .1s}
.js .flow .nd{opacity:0;transform:scale(.72)}
.js .in .flow .nd{opacity:1;transform:scale(1);
  transition:opacity .55s var(--ease-soft),transform .72s var(--spring)}
.js .in .flow .nd:nth-of-type(1){transition-delay:.30s}
.js .in .flow .nd:nth-of-type(2){transition-delay:.42s}
.js .in .flow .nd:nth-of-type(3){transition-delay:.54s}
.js .in .flow .nd:nth-of-type(4){transition-delay:.70s}
.js .in .flow .nd:nth-of-type(5){transition-delay:.84s}
.js .in .flow .nd:nth-of-type(6){transition-delay:.96s}
.js .in .flow .nd:hover{transition:transform .55s var(--ease)}
.js .flow .mods text,.js .flow .eco-note{opacity:0}
.js .in .flow .mods text{opacity:1;transition:opacity .7s var(--ease) .74s}
/* The return links, and the notes that explain them, arrive once the system
   they close is on screen. */
.js .flow .k-cross,.js .flow .k-back,.js .flow .k-loop{opacity:0}
.js .in .flow .k-cross,.js .in .flow .k-back,.js .in .flow .k-loop{
  opacity:1;transition:opacity 1.1s var(--ease) 1.25s}
.js .in .flow .eco-note{opacity:1;transition:opacity .9s var(--ease) 1.55s}
/* The module glyphs run their own loop, but only once the board is lit. */
.js .flow.lit .ico2 [class*="i-"]{animation-play-state:running}
/* Two routes, one board. Above 900px the landscape one; below it the portrait
   one, which is a real re-route rather than the same board scaled down until
   the labels give out. Only one is ever in the layout, so neither needs a
   sideways scroll and the hint that used to apologise for one is gone. */
.flow-p{display:none}
.flow-p .halo{transform-origin:240px 325px}
/* Same surfaces, its own gradient ids — see eco_defs() in gen_graphics.py. */
.flow-p .t-face{fill:url(#pecoFace)}
.flow-p .t-gloss,.flow-p .chip-gloss{fill:url(#pecoSheen)}
.flow-p .t-rim{stroke:url(#pecoRim)}
.flow-p .nd-acc .t-rim{stroke:url(#pecoRimAcc)}
.flow-p .chip-face{fill:url(#pecoChip)}
.flow-p .pin{fill:url(#pecoPin)}
.flow-p .pin-v{fill:url(#pecoPinV)}
@media(max-width:899px){
  svg.flow:not(.flow-p){display:none}
  /* Phones get the board at whatever width they have; a tablet lets it grow
     a little rather than sitting as a narrow strip in a wide column. */
  .flow-p{display:block;min-width:0;max-width:clamp(440px,60vw,520px);
    margin-inline:auto}
  .flow-scroll{overflow-x:visible;margin-top:clamp(26px,6vw,44px)}
}

/* ---------- 12 case studies ---------- */
.case-grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.4fr);
  gap:clamp(28px,5vw,72px);align-items:start}
@media(max-width:900px){.case-grid{grid-template-columns:1fr;gap:26px}}
.case{position:relative;padding-top:clamp(36px,4vw,54px);margin-top:clamp(52px,6vw,80px)}
.case:first-of-type{margin-top:0}
.case > .bar{position:absolute;left:0;right:0;top:0;height:1px;background:var(--line-soft)}
.case-side{position:sticky;top:130px}
@media(max-width:900px){.case-side{position:static}}
.case-n{font-size:clamp(1.3rem,2.5vw,1.9rem);font-weight:600;letter-spacing:-.032em;line-height:1.2}
.case-loc{margin-top:10px;font-size:.6875rem;letter-spacing:.15em;text-transform:uppercase;color:var(--label)}
.case-tag{margin-top:16px;display:inline-flex;align-items:center;gap:7px;font-size:.6875rem;
  letter-spacing:.1em;text-transform:uppercase;color:#c8c8c8;border:1px solid var(--line);
  border-radius:999px;padding:5px 12px}
.case-p{color:var(--muted);font-size:.9375rem;line-height:1.68;max-width:64ch}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);
  margin-top:clamp(28px,4vw,44px)}
/* Values wrap to different line counts, so the three columns share rows rather
   than each stacking independently. Otherwise the sub-labels drift apart. */
.metrics > div{display:grid;grid-template-rows:subgrid;grid-row:span 3;align-content:start}
@supports not (grid-template-rows:subgrid){.metrics > div{display:block}}
@media(max-width:640px){.metrics{grid-template-columns:1fr;gap:24px}
  .metrics > div{display:block}}
.metric-l{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
.metric-v{margin-top:10px;font-size:clamp(1.5rem,2.8vw,2.1rem);font-weight:600;letter-spacing:-.035em;
  line-height:1.05}
.metric-s{margin-top:8px;font-size:.8125rem;color:var(--label);line-height:1.5}
.spark{margin-top:clamp(24px,3.2vw,34px);border:1px solid var(--line-soft);background:var(--panel);
  border-radius:9px;padding:16px 18px}
.spark-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.spark-l{font-size:.625rem;letter-spacing:.13em;text-transform:uppercase;color:var(--label)}
.spark-v{font-size:.6875rem;color:var(--acc);font-variant-numeric:tabular-nums}

/* ---------- 13 about / portrait ---------- */
.who{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(40px,7vw,96px);
  align-items:center}
@media(max-width:900px){.who{grid-template-columns:1fr;gap:44px}}
.portrait{position:relative;background:#000;aspect-ratio:1;max-width:460px;width:100%;
  overflow:hidden;border-radius:var(--r)}
.portrait img{width:100%;height:100%;object-fit:cover}
.portrait{border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.95)}
.portrait img{filter:grayscale(1) contrast(1.08) brightness(.97);object-position:50% 22%}
.portrait::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  border-radius:inherit;background-image:var(--grain);background-size:130px 130px;opacity:.11}
/* A warm rake from the top left and a quiet floor at the bottom — light, not
   a mask cut around the subject. */
.portrait::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(206deg,rgba(233,180,76,.16) 0%,rgba(233,180,76,.02) 34%,transparent 56%),
    linear-gradient(to top,rgba(0,0,0,.55) 0%,transparent 38%)}
/* The portrait ships finished: its own background, its own fade at the bottom.
   The panel adds nothing on top - no grayscale, no grain, no rake, no floor.
   Anything here that tints the pixels is a bug, not a style. */
/* The image fades to transparent at the bottom, so it cannot sit in a box: a
   panel, a border or a rounded clip would put a hard edge exactly where the
   photograph is dissolving. It floats on the section instead. */
.portrait.plain{aspect-ratio:1080/1350;background:none;border:0;border-radius:0;
  box-shadow:none;overflow:visible}
.portrait.plain img{filter:none;object-fit:contain;object-position:50% 50%}
.portrait.plain::before,.portrait.plain::after{content:none}

/* Bring the headshot in: it rises and settles out of a slight over-scale as it
   fades up. Driven by the parent .rv - .zoom was never in the reveal list, so
   the old scale-settle on this image could never run. */
.js .portrait.plain img{opacity:0;transform:translateY(26px) scale(1.06);
  will-change:transform,opacity}
.js .in .portrait.plain img{opacity:1;transform:none;
  transition:opacity .9s var(--ease-soft) .1s,transform 1.5s var(--ease) .1s}

.who-name{margin-top:22px;font-size:.9375rem;font-weight:500}
.who-role{font-size:.875rem;color:var(--label)}
.points{margin:32px 0 0;padding:0;list-style:none}
.points li{position:relative;padding-block:17px;color:var(--muted);font-size:.9375rem;line-height:1.6}
.points li .bar{position:absolute;left:0;right:0;top:0;height:1px;background:var(--line-soft)}
.points b{color:#fff;font-weight:500}

/* ---------- 14 process steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px)}
@media(max-width:820px){.steps{grid-template-columns:1fr;gap:34px}}
/* A four-phase plan is still one row on a desktop and pairs off before it
   stacks, so the reader never gets a 3+1 orphan. */
.steps.four{grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px)}
@media(max-width:1040px){.steps.four{grid-template-columns:1fr 1fr;gap:34px}}
@media(max-width:620px){.steps.four{grid-template-columns:1fr}}
.step{position:relative;padding-top:26px}
.step .bar{position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)}
.step-n{font-size:.75rem;letter-spacing:.14em;color:var(--label)}
.step h3{margin-top:16px}
.step p{margin-top:12px;color:var(--muted);font-size:.9375rem;line-height:1.62}

/* ---------- 15 faq ---------- */
.faq details{position:relative;border-top:1px solid var(--line-soft)}
.faq details:last-child{border-bottom:1px solid var(--line-soft)}
.faq summary{list-style:none;cursor:pointer;padding-block:26px;display:flex;gap:24px;
  align-items:baseline;justify-content:space-between;
  font-size:clamp(1.0625rem,1.7vw,1.2rem);font-weight:500;letter-spacing:-.022em;line-height:1.4;
  color:#e8e8e8;transition:color .35s var(--ease-soft)}
.faq summary:hover{color:#fff}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:13px;height:13px;position:relative;
  background:linear-gradient(currentColor,currentColor) center/100% 1px no-repeat,
             linear-gradient(currentColor,currentColor) center/1px 100% no-repeat;
  color:var(--label);transition:transform .5s var(--ease),color .35s ease}
.faq details[open] summary::after{transform:rotate(135deg);color:var(--acc)}
.faq details[open]{border-top-color:var(--acc-line)}
.faq .wrapx{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.faq details[open] .wrapx{grid-template-rows:1fr}
.faq .ans-in{overflow:hidden;min-height:0}
.faq .ans{padding:0 0 28px;max-width:70ch;color:var(--muted);font-size:.9375rem;line-height:1.7}
.faq .ans a{color:#fff;border-bottom:1px solid rgba(255,255,255,.3)}
.faq .ans a:hover{border-bottom-color:var(--acc);color:var(--acc-hi)}

/* ---------- 16 contact ---------- */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,88px);
  align-items:start}
@media(max-width:900px){.contact{grid-template-columns:1fr;gap:48px}}

/* The form is a panel, not loose fields on the page. Beside a column of
   argument it needs to read as one object with a hard edge, the same way the
   report panel and the post cards do — otherwise the right half of the
   section just looks like text that happens to be typeable. */
.form{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--panel);padding:clamp(22px,3vw,34px);overflow:hidden}
/* The same warm lift the CTA band gets, at a third of the strength: enough to
   seat the card in the page, not enough to read as decoration. */
.form::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%,rgba(233,180,76,.05) 0,transparent 58%)}
.form > *{position:relative}

.field{margin-top:18px;position:relative}
/* Rhythm lives on the row, not on the fields inside it. Zeroing both fields of
   a paired row keeps them aligned side by side on desktop, but the moment that
   row stacks on a phone the two would collide - so the row carries the gap and
   the fields carry none. */
.two .field{margin-top:0}
.two{margin-top:18px}
.form > *:first-child{margin-top:0}
.field label{display:block;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--label);margin-bottom:8px}
.field .inputwrap{position:relative}

/* Filled rather than underlined. On a panel an underline field reads as a
   caption with a rule under it; a filled well reads as somewhere to type. The
   fill is one step lighter than the card so the control sits inside it. */
.field input,.field select,.field textarea{width:100%;background:var(--panel-2);color:#fff;
  font-family:var(--f);font-size:.9375rem;letter-spacing:-.011em;line-height:1.5;
  border:1px solid var(--line-soft);border-radius:10px;padding:12px 14px;
  transition:border-color .3s var(--ease-soft),background .3s var(--ease-soft),
    box-shadow .3s var(--ease-soft)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--line)}
/* Focus is the one place brass belongs in a form: it marks the live field. */
.field input:focus,.field select:focus,.field textarea:focus{outline:0;
  border-color:var(--acc);background:#0e0e13;box-shadow:0 0 0 3px rgba(233,180,76,.17)}
/* Keyboard users get a stronger ring than pointer users, without the ring
   showing up on every click. */
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  box-shadow:0 0 0 3px rgba(233,180,76,.26)}
.field input::placeholder,.field textarea::placeholder{color:#76767e}
.field textarea{resize:vertical;min-height:112px}

.field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:38px}
.field select option{background:#0a0a0a;color:#fff}
/* Its own chevron, drawn in the label colour so the control reads as a control
   without competing with the brass focus state. */
.field .inputwrap:has(select)::after{content:"";position:absolute;right:15px;top:50%;
  width:8px;height:8px;margin-top:-6px;pointer-events:none;
  border-right:1.4px solid #8f8f96;border-bottom:1.4px solid #8f8f96;
  transform:rotate(45deg);transition:border-color .3s var(--ease)}
.field .inputwrap:has(select:focus)::after{border-color:var(--acc)}

/* Says the quiet part next to the field it belongs to, rather than making the
   label carry a parenthetical. */
.field .hint{margin-top:7px;font-size:.75rem;line-height:1.5;color:var(--dim)}

.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.two{grid-template-columns:1fr;gap:18px}}
.form .btn{margin-top:26px;width:100%}
.form-note{margin-top:14px;font-size:.75rem;color:#8b8b91;text-align:center}

.checks{margin:30px 0 0;padding:0;list-style:none}
.checks li{position:relative;padding-block:15px;color:var(--muted);font-size:.9375rem}
.checks li .bar{position:absolute;left:0;right:0;top:0;height:1px;background:var(--line-soft)}

/* ---------- 17 interior page hero + breadcrumb ---------- */
.phero{position:relative;overflow:hidden;padding-block:clamp(120px,15vh,168px) clamp(52px,7vw,84px)}
.phero .hero-waves{opacity:.62}
.phero .wrap{position:relative;z-index:2}
.phero h1{font-size:clamp(2.3rem,5.4vw,4rem);max-width:17ch}
.phero .lede{margin-top:26px;max-width:58ch}
.phero .btn-row{margin-top:36px}
.crumb{display:flex;align-items:center;gap:9px;font-size:.75rem;color:var(--dim);margin-bottom:26px;
  flex-wrap:wrap}
.crumb a:hover{color:#fff}
.crumb svg{width:9px;height:9px;opacity:.6}

/* ---------- 09c how-it-works rail ----------
   The six things a service actually consists of, stacked as a timeline rather
   than tiled as a grid. A grid says "six equal options"; a rail says "six parts
   of one job", which is what a service page is arguing. Structure per row:
   a bordered icon disc on the rail, then the number, the claim, the detail.

   The rail is one line drawn top to bottom behind the discs. It scales in from
   the top when the section reveals, so the eye is walked down the list in the
   order the copy is meant to be read. Brass stays scarce: it marks the step
   number and lights the disc the pointer is on, nothing else. */
.hiw{position:relative;margin-top:clamp(38px,4.8vw,60px);max-width:840px}
.hiw-item{position:relative;display:grid;grid-template-columns:auto 1fr;
  gap:clamp(18px,2.6vw,30px);padding-bottom:clamp(30px,4vw,46px)}
.hiw-item:last-child{padding-bottom:0}

/* the rail segment between this disc and the next */
.hiw-item:not(:last-child)::before{content:"";position:absolute;
  left:calc(var(--hiw-disc) / 2);top:var(--hiw-disc);bottom:0;width:1px;
  background:var(--line-soft);transform:scaleY(0);transform-origin:top;
  transition:transform .7s var(--ease-soft)}
.js .hiw.rv.in .hiw-item:not(:last-child)::before{transform:scaleY(1)}
.hiw{--hiw-disc:clamp(44px,5.2vw,54px)}
.js .hiw.rv.in .hiw-item:nth-child(2)::before{transition-delay:.10s}
.js .hiw.rv.in .hiw-item:nth-child(3)::before{transition-delay:.20s}
.js .hiw.rv.in .hiw-item:nth-child(4)::before{transition-delay:.30s}
.js .hiw.rv.in .hiw-item:nth-child(5)::before{transition-delay:.40s}

.hiw-disc{position:relative;z-index:1;width:var(--hiw-disc);height:var(--hiw-disc);
  border:1px solid var(--line);border-radius:50%;background:var(--panel);
  display:grid;place-items:center;
  transition:border-color .4s var(--ease-soft),background .4s var(--ease-soft)}
.hiw-disc .ico{width:21px;height:21px}
.hiw-item:hover .hiw-disc{border-color:var(--acc-line);background:var(--panel-2)}

.hiw-body{padding-top:calc((var(--hiw-disc) - 1.25rem) / 2 - .2rem)}
.hiw-n{font-family:var(--fm);font-size:.75rem;font-weight:500;letter-spacing:.12em;
  color:var(--dim);transition:color .4s var(--ease-soft)}
.hiw-item:hover .hiw-n{color:var(--acc)}
.hiw-body h3{margin-top:7px;font-family:var(--fd);font-size:1.0625rem;
  font-weight:600;letter-spacing:-.018em;line-height:1.35}
.hiw-body p{margin-top:10px;color:var(--muted);font-size:.9375rem;line-height:1.68;
  max-width:62ch}

@media(max-width:560px){
  .hiw{--hiw-disc:40px}
  .hiw-body p{font-size:.9063rem}
}
@media(prefers-reduced-motion:reduce){
  .hiw-item:not(:last-child)::before{transform:scaleY(1)}
}

/* CTA band */
.band{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--panel);padding:clamp(34px,5vw,62px);text-align:center}
.band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 120% at 50% 0%,rgba(233,180,76,.09) 0,transparent 60%)}
.band > *{position:relative}
.band h2{font-size:clamp(1.7rem,3.4vw,2.5rem);max-width:20ch;margin-inline:auto}
.band p{margin:20px auto 0;max-width:52ch;color:var(--muted);font-size:.9375rem;line-height:1.65}
.band .btn-row{margin-top:32px;justify-content:center}

/* related links */
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(32px,4vw,48px)}
@media(max-width:820px){.rel{grid-template-columns:1fr}}
.rel a{border:1px solid var(--line-soft);border-radius:var(--r);padding:22px;
  transition:border-color .4s var(--ease-soft),transform .5s var(--ease)}
.rel a:hover{border-color:rgba(233,180,76,.30);transform:translateY(-2px)}
.rel .k{font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
.rel .t{margin-top:12px;font-size:1rem;font-weight:500;letter-spacing:-.02em;line-height:1.35}
.rel .d{margin-top:8px;font-size:.8125rem;color:var(--muted);line-height:1.55}

/* ---------- 18 blog ---------- */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);
  margin-top:clamp(40px,5vw,64px)}
@media(max-width:980px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){.post-grid{grid-template-columns:1fr}}
.post-card{display:flex;flex-direction:column;border:1px solid var(--line-soft);
  border-radius:var(--r-lg);background:var(--panel);overflow:hidden;
  transition:border-color .45s var(--ease-soft),transform .55s var(--ease),
    background .45s var(--ease-soft)}
.post-card:hover{border-color:rgba(233,180,76,.30);transform:translateY(-4px);background:var(--panel-2)}

/* The art. Generated per post by _src/gen_covers.py, so it is markup rather
   than an image request — it themes with the page and costs no round trip.
   A slow scale on hover is the only motion; the composition does the rest. */
.post-card .cover{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;
  background:#08080a;border-bottom:1px solid var(--line-soft)}
.post-card .cover svg{position:absolute;inset:0;width:100%;height:100%;
  transition:transform .8s var(--ease)}
.post-card:hover .cover svg{transform:scale(1.045)}
/* Seats the art into the card instead of letting it end on a hard edge. */
.post-card .cover::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.34) 0%,transparent 34%,transparent 66%,rgba(0,0,0,.42) 100%)}

.badge{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;
  padding:4px 11px;font-size:.625rem;letter-spacing:.13em;text-transform:uppercase;color:#c8c8c8}
/* On the art the chip needs its own ground to stay legible over the linework. */
.post-card .cover .badge{position:absolute;left:14px;top:14px;z-index:1;
  background:rgba(8,8,10,.72);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  border-color:rgba(255,255,255,.16);color:#e4e4e4;
  transition:border-color .45s var(--ease-soft),color .45s var(--ease-soft)}
.post-card:hover .cover .badge{border-color:var(--acc-line);color:var(--acc-hi)}

.post-card .pc-in{padding:clamp(18px,2.2vw,24px);display:flex;flex-direction:column;flex:1}
.post-card h3{font-size:1.125rem;letter-spacing:-.025em;line-height:1.3;
  transition:color .4s var(--ease-soft)}
.post-card:hover h3{color:#fff}
.post-card .ex{margin-top:10px;font-size:.875rem;line-height:1.6;color:var(--muted);flex:1}

/* Byline row: who, when, how long — then the arrow, which is the only part
   that moves, so the eye is pulled to the affordance and not the metadata. */
.post-card .pc-foot{margin-top:18px;padding-top:14px;border-top:1px solid var(--line-soft);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:.75rem;color:var(--dim);line-height:1}
.post-card .pc-by{color:#c8c8c8}
.post-card .pc-sep{width:2px;height:2px;border-radius:50%;background:currentColor;opacity:.5;flex:none}
.post-card .more{margin-left:auto;display:inline-flex;align-items:center;color:#fff}
.post-card .more svg{width:13px;height:13px;transition:transform .4s var(--ease)}
.post-card:hover .more svg{transform:translateX(3px)}

/* article */
.article{max-width:720px;margin:0 auto}
/* Article heads carry the same river as every other top-of-page, breaking out
   of the 720px reading column so it reads as the page's ground rather than a
   panel behind the title. */
.article-head{position:relative;padding-block:clamp(112px,14vh,156px) 0;text-align:left}
.article-head::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  top:calc(-1 * clamp(112px,14vh,156px));left:50%;transform:translateX(-50%);
  width:100vw;height:clamp(420px,58vh,620px);
  background-image:var(--confluence);background-repeat:no-repeat;
  background-position:50% 0;background-size:cover;opacity:.5;
  -webkit-mask-image:linear-gradient(#000 0%,#000 42%,transparent 88%);
  mask-image:linear-gradient(#000 0%,#000 42%,transparent 88%)}
.article-head > *{position:relative}
.article-head h1{font-size:clamp(2.1rem,4.6vw,3.4rem);letter-spacing:-.04em;line-height:1.08;
  margin-top:22px;text-wrap:balance}
.article-head .dek{margin-top:22px;font-size:1.0625rem;color:var(--muted);line-height:1.6;max-width:60ch}
.article-head .byline{margin-top:28px;padding-top:22px;border-top:1px solid var(--line-soft);
  display:flex;align-items:center;gap:12px;font-size:.8125rem;color:var(--dim);flex-wrap:wrap}
.article-head .byline b{color:#fff;font-weight:500}
.article-head .byline .dotsep{width:3px;height:3px;border-radius:99px;background:var(--acc-line)}
.prose{padding-block:clamp(40px,5vw,60px) 0;color:#c4c4c4;font-size:1.0625rem;line-height:1.78}
.prose > * + *{margin-top:24px}
.prose h2{font-size:clamp(1.4rem,2.6vw,1.85rem);letter-spacing:-.03em;line-height:1.2;color:#fff;
  margin-top:clamp(44px,5vw,64px);padding-top:clamp(30px,3.4vw,40px);border-top:1px solid var(--line-soft);
  scroll-margin-top:100px}
.prose h3{font-size:1.125rem;color:#fff;margin-top:36px;scroll-margin-top:100px}
.prose strong,.prose b{color:#fff;font-weight:600}
.prose a{color:#fff;border-bottom:1px solid rgba(255,255,255,.3)}
.prose a:hover{border-bottom-color:var(--acc);color:var(--acc-hi)}
.prose ul,.prose ol{margin:22px 0 0;padding-left:22px}
.prose li{margin-top:11px;padding-left:4px}
.prose li::marker{color:var(--acc-line)}
.prose .callout{position:relative;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);padding:clamp(20px,2.6vw,28px);margin-top:36px;overflow:hidden}
.prose .callout::before{content:"";position:absolute;inset:0 auto 0 0;width:1px;background:var(--acc)}
.prose .callout .k{font-size:.625rem;letter-spacing:.15em;text-transform:uppercase;color:var(--label)}
.prose .callout p{margin-top:12px;font-size:.9375rem;line-height:1.7;color:var(--muted)}
.prose .lead{font-size:1.1875rem;line-height:1.7;color:#d8d8d8}

/* Point boxes. A run of "<strong>Named point.</strong> explanation" list items
   is not really a list — it is a set of parallel claims, and prose bullets
   make the reader do the work of noticing that. Boxed, each point gets its own
   ground, an icon to anchor it, and a heading the eye can scan without
   reading. Built from one hairline background showing through 1px gaps, so
   the dividers are shared rather than doubled at every seam.

   Two columns at most: these carry a sentence or two each, and three columns
   would set a measure too narrow to read inside an article. */
/* Key points. Authored per post, not derived from the prose - the block is a
   map of the argument placed after the lead, so a reader can decide whether to
   read on and a skimmer still leaves with the four things that matter. The
   body below it is untouched: lists stay lists. */
.prose .keypoints{margin-top:34px}
.prose .kp-label{font-family:var(--fm);font-size:.6875rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--label);margin-bottom:14px}
.prose .keypoints .pbox-grid{margin-top:0}

.prose .pbox-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);
  border-radius:var(--r);overflow:hidden;margin-top:32px}
@media(max-width:720px){.prose .pbox-grid{grid-template-columns:1fr}}
.prose .pbox{background:var(--panel);padding:clamp(18px,2.3vw,24px);
  transition:background .4s var(--ease-soft)}
.prose .pbox:hover{background:var(--panel-2)}
.prose .pbox .ico{width:20px;height:20px;color:#fff;opacity:.9}
.prose .pbox h4{margin-top:14px;font-family:var(--fd);font-size:.9375rem;font-weight:600;
  letter-spacing:-.014em;line-height:1.4;color:#fff}
.prose .pbox p{margin-top:8px;font-size:.875rem;line-height:1.65;color:var(--muted)}
/* An odd last box would otherwise leave a half-empty row. */
.prose .pbox-grid > .pbox:last-child:nth-child(odd){grid-column:1 / -1}
@media(max-width:720px){.prose .pbox-grid > .pbox:last-child:nth-child(odd){grid-column:auto}}

/* ---------- 19 dynamic island TOC ---------- */
.island-veil{position:fixed;inset:0;z-index:78;background:rgba(0,0,0,.45);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease-soft),visibility .45s}
.island-veil.on{opacity:1;visibility:visible}
.island{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:80}
/* The size change is the effect here, and contain:layout stops the reflow at
   this element's own box. */
.island-box{position:relative;overflow:hidden;contain:layout paint;
  width:290px;height:52px;border-radius:26px;
  border:1px solid rgba(255,255,255,.14);background:rgba(10,10,10,.92);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);color:#fff;cursor:pointer;
  box-shadow:0 26px 60px -18px rgba(0,0,0,1);
  transition:width .5s var(--ease),height .5s var(--ease),border-radius .5s var(--ease)} /* impeccable-disable-line layout-transition */
.island.open .island-box{width:min(348px,calc(100vw - 32px));height:min(420px,70vh);border-radius:24px;cursor:default}
.island-pill{position:absolute;inset:0;display:flex;align-items:center;gap:14px;padding:0 18px;
  transition:opacity .4s var(--ease-soft),filter .4s var(--ease-soft)}
.island.open .island-pill{opacity:0;filter:blur(4px);pointer-events:none}
.island-pill .dotm{width:7px;height:7px;border-radius:99px;background:#fff;flex:none}
.island-pill .now{flex:1;min-width:0;font-size:.8125rem;font-weight:500;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;text-align:left}
.ring{flex:none;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:2.5}
.ring .track{stroke:rgba(255,255,255,.18)}
.ring .val{stroke:#fff;stroke-linecap:round;transition:stroke-dashoffset .12s linear}
.island-full{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;
  pointer-events:none;transition:opacity .4s var(--ease-soft) .08s}
.island.open .island-full{opacity:1;pointer-events:auto}
.island-top{flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:18px 18px 10px}
.island-top span{font-size:.625rem;font-weight:600;letter-spacing:.11em;color:var(--label)}
.island-top button{background:none;border:0;color:var(--label);cursor:pointer;padding:2px;
  display:grid;place-items:center;transition:color .3s ease}
.island-top button:hover{color:#fff}
.island-top svg{width:17px;height:17px}
.island-list{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:0 10px 14px;
  display:flex;flex-direction:column;gap:2px}
.island-list button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:none;border:0;border-radius:9px;padding:9px 12px;font-size:.8125rem;color:rgba(255,255,255,.62);
  cursor:pointer;transition:background .3s ease,color .3s ease,transform .3s var(--ease)}
.island-list button:hover{background:rgba(255,255,255,.05);color:rgba(255,255,255,.85);transform:translateX(2px)}
.island-list button.on{background:rgba(255,255,255,.1);color:#fff;font-weight:500}
.island-list button .txt{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.island-list button .mk{width:6px;height:6px;border-radius:99px;background:#fff;flex:none;
  transform:scale(0);transition:transform .3s var(--ease)}
.island-list button.on .mk{transform:scale(1)}
@media(max-width:520px){.island-box{width:min(300px,calc(100vw - 32px))}}
@media print{.island,.island-veil{display:none}}

/* ---------- 20 footer ---------- */
footer{border-top:1px solid var(--line-soft);padding-block:60px 44px}
.foot{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:40px}
@media(max-width:1000px){.foot{grid-template-columns:1fr 1fr 1fr;gap:36px}
  .foot>div:first-child{grid-column:1/-1}}
@media(max-width:640px){.foot{grid-template-columns:1fr 1fr;gap:32px}}
.foot h4{margin:0 0 16px;font-size:.6875rem;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--label)}
/* The section headings point at the hub pages now, so they have to look
   clickable without becoming a fifth link in the list under them. */
.foot h4 a{display:inline;padding:0;font-size:inherit;color:inherit;
  border-bottom:1px solid transparent;transition:color .3s var(--ease-soft),
    border-color .3s var(--ease-soft)}
.foot h4 a:hover{color:#c8c8c8;border-bottom-color:var(--line);transform:none}
.foot-hours{font-size:.8125rem!important;color:var(--label)!important;margin-top:16px}
.foot a{display:block;padding-block:10px;font-size:.9375rem;color:var(--muted);
  transition:color .3s var(--ease-soft),transform .4s var(--ease)}
.foot a:hover{color:#fff;transform:translateX(4px)}
.foot p{color:var(--muted);font-size:.9375rem;line-height:1.65;max-width:40ch;margin-top:16px}
.foot .contactline{margin-top:20px;display:flex;flex-direction:column;gap:4px}
.foot .contactline a{display:inline-block;padding-block:5px;font-size:.875rem;color:#c8c8c8}
.copy{margin-top:48px;padding-top:24px;border-top:1px solid var(--line-soft);font-size:.8125rem;
  color:var(--label);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}

/* ---------- 22 prose blocks on commercial pages ----------
   The service and industry pages grew past what the six-item rail and the
   three-step row could hold: the copy now argues in paragraphs between those
   components. This is the reading column for that, set at the same measure as
   an article so the two page types read as one site. It is deliberately not
   `.prose`, because `.prose` carries the article's top-rule on every h2 and a
   service page already has section rules doing that job. */
.sprose{max-width:74ch;color:#c4c4c4;font-size:1.0625rem;line-height:1.76}
.sprose > * + *{margin-top:22px}
.sprose h3{font-family:var(--fd);font-size:1.125rem;font-weight:600;letter-spacing:-.02em;
  color:#fff;margin-top:34px;line-height:1.4}
.sprose h4{font-family:var(--fd);font-size:1rem;font-weight:600;letter-spacing:-.016em;
  color:#fff;margin-top:28px}
.sprose strong,.sprose b{color:#fff;font-weight:600}
.sprose a{color:#fff;border-bottom:1px solid rgba(255,255,255,.3)}
.sprose a:hover{border-bottom-color:var(--acc);color:var(--acc-hi)}
/* Robots directives and crawler names read as strings, and a reader has to be
   able to tell `nosnippet` the directive from nosnippet the word. Mono, because
   the rule everywhere else is that mono marks a thing you would type. No box:
   at body size a tinted chip on four words a paragraph turns the page spotty. */
.sprose code,.prose code,.faq .ans code,.hiw-body code,.sources code{
  font-family:var(--fm);font-size:.875em;
  color:#e4e4e4;letter-spacing:-.01em;
  border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:1px}
.sprose ul,.sprose ol{margin:20px 0 0;padding-left:22px}
.sprose li{margin-top:10px;padding-left:4px}
.sprose li::marker{color:var(--acc-line)}

/* ---------- 23 data table ----------
   The timeline and comparison tables the copy needs. Ruled rows, no vertical
   lines and no zebra: a border grid reads as a spreadsheet, and the thing
   being compared here is four rows, not four hundred. Numbers and durations
   are mono, because that is the rule everywhere else on the site — anything
   attached to a number gets the mono face. A wide table scrolls inside its own
   box rather than pushing the page sideways. */
.tscroll{margin-top:30px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line-soft);border-radius:var(--r)}
.dtable{width:100%;min-width:520px;border-collapse:collapse;background:var(--panel)}
.dtable caption{caption-side:bottom;padding:14px 18px 0;text-align:left;
  font-size:.8125rem;line-height:1.6;color:var(--dim)}
.dtable th,.dtable td{text-align:left;padding:14px 18px;vertical-align:top;
  border-bottom:1px solid var(--line-soft);font-size:.9375rem;line-height:1.6}
.dtable thead th{font-family:var(--fm);font-size:.6875rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--label);background:var(--panel-2);
  border-bottom-color:var(--line);white-space:nowrap}
.dtable tbody th{font-weight:500;color:#fff}
.dtable td{color:var(--muted)}
.dtable tbody tr:last-child th,.dtable tbody tr:last-child td{border-bottom:0}
.dtable tbody tr{transition:background .35s var(--ease-soft)}
.dtable tbody tr:hover{background:var(--panel-2)}
/* The measured column. `num` is the one place a table gets the mono face and
   the one place it may get brass, because it is the answer the row exists for. */
.dtable .num{font-family:var(--fm);font-size:.875rem;color:#fff;white-space:nowrap}
.dtable .num.hi{color:var(--acc-hi)}

/* ---------- 24 sources ----------
   Where a page states something as fact about how Google, Apple or Canadian
   law works, it links the primary source. Set quiet and small: this is
   apparatus, and a citation list styled to be noticed is arguing for credit
   rather than giving it. */
.sources{margin-top:clamp(40px,5vw,60px);padding-top:22px;border-top:1px solid var(--line-soft)}
.sources h2,.sources h3{font-family:var(--fm);font-size:.6875rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--label);margin:0 0 14px}
.sources ol{margin:0;padding-left:20px;max-width:78ch}
.sources li{margin-top:9px;font-size:.875rem;line-height:1.6;color:var(--dim)}
.sources li::marker{color:var(--label);font-family:var(--fm);font-size:.75rem}
.sources a{color:var(--muted);border-bottom:1px solid rgba(255,255,255,.16);
  word-break:break-word}
.sources a:hover{color:#fff;border-bottom-color:var(--acc)}

/* ---------- 25 author component ----------
   One block, same markup, at the foot of every commercial page and the head of
   every post. The name links to /about, which is where the Person node lives
   that every other page's schema references — so the visible attribution and
   the machine-readable one point at the same place. */
.author{display:flex;gap:16px;align-items:flex-start;
  margin-top:clamp(40px,5vw,60px);padding:clamp(18px,2.4vw,24px);
  border:1px solid var(--line-soft);border-radius:var(--r);background:var(--panel)}
.author .au-face{flex:none;width:40px;height:40px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:99px;background:rgba(255,255,255,.02)}
.author .au-face .ico{width:19px;height:19px;color:#c8c8c8}
.author .au-body{min-width:0}
.author .au-line{font-size:.9375rem;line-height:1.65;color:var(--muted);max-width:66ch}
.author .au-line a{color:#fff;border-bottom:1px solid rgba(255,255,255,.3)}
.author .au-line a:hover{border-bottom-color:var(--acc);color:var(--acc-hi)}
.author .au-contact{margin-top:9px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:.875rem;color:var(--muted)}
.author .au-contact a{color:#c8c8c8;border-bottom:1px solid rgba(255,255,255,.18)}
.author .au-contact a:hover{color:#fff;border-bottom-color:var(--acc)}
.author .au-contact .dotsep{width:3px;height:3px;border-radius:99px;background:var(--acc-line);
  flex:none}
/* Mono, because these are dates and dates are numbers. */
.author .au-dates{margin-top:10px;font-family:var(--fm);font-size:.75rem;letter-spacing:.02em;
  color:var(--label)}
@media(max-width:560px){.author{gap:14px}.author .au-face{display:none}}

/* Inside an article the block sits in the reading column and needs no second
   card edge under the byline rule. */
.article .author{margin-top:26px}

/* ---------- 26 footer trust block ----------
   Four commitments, above the copyright, on every commercial page. Set as a
   list rather than a paragraph because each line is a separate promise that a
   reader checks separately. No brass: these are undertakings, not measurements. */
.trust{margin-top:44px;padding-top:26px;border-top:1px solid var(--line-soft)}
.trust h4{margin:0 0 14px;font-size:.6875rem;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--label)}
.trust ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 40px;margin:0;padding:0;list-style:none}
@media(max-width:760px){.trust ul{grid-template-columns:1fr}}
.trust li{position:relative;padding-left:18px;font-size:.875rem;line-height:1.6;
  color:var(--muted);max-width:52ch}
.trust li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;
  background:var(--line);}

/* ---------- 21 reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .js .ln > span,.js .up,.js .blur,.js .draw,.js .zoom img{
    transform:none!important;opacity:1!important;filter:none!important}
  .js .portrait.plain img{transform:none!important;opacity:1!important}
  .js .stats .stat::before{transform:none!important}
  .js .ico [data-draw],.js .chart [data-draw]{stroke-dashoffset:0!important}
  .js .chart .line.dim{opacity:.9!important}
  .js .flow .k-cross,.js .flow .k-back,.js .flow .k-loop{opacity:1!important}
  .js .flow .nd,.js .flow .core{opacity:1!important;transform:none!important}
  .js .flow .mods text,.js .flow .eco-note{opacity:1!important}
  .js .chart .area,.js .chart .dot,.js .chart .lbl{opacity:1!important}
  .js .chart .axis-r,.js .chart .dot-start{opacity:1!important}
  .js .chart .dot-halo{opacity:.16!important}
  .bar-f{transform:scaleX(var(--w))!important}
  .glowdot{opacity:0!important}
  /* Icons stop on the payoff, not mid-story: listing at the top, deal on Won,
     page fast, answer cited. Static, but still saying the thing. */
  .js .fgrid .ficon,.js .fgrid.in .ficon{opacity:1!important;transform:none!important}
  .fcard:hover .ficon .ico2{transform:none!important}
  .ico2 [class*="i-"]{animation:none!important}
  .ico2 .i-pin{transform:none;opacity:1}
  .ico2 .i-click{transform:none;opacity:1}
  .ico2 .i-pulse{opacity:0}
  .ico2 .i-card{transform:translate(22.5px,0)}
  .ico2 .i-check,.ico2 .i-spark{opacity:1;transform:none}
  .ico2 .i-speed,.ico2 .i-cite{stroke-dashoffset:0}
  .ico2 .i-send{opacity:0}
  .ico2 .i-rank{transform:translateY(-11.2px)}
  .ico2 .i-star{transform:none;opacity:1}

  .js .hero.rv.in .hero-waves,.js .phero.rv.in .hero-waves{opacity:.75!important}
  .js .hero h1 .ln > span{background-size:100% 100%!important;
    -webkit-text-stroke-color:transparent!important}
  .js .flow.lit .halo{animation:none}
  .progress{display:none}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;
    animation-iteration-count:1!important}
}