/* ============================================================
   MILKY LANE · HOMEPAGE STYLES
   Extracted from index.html. Edit here, not inline.
   ============================================================ */
    /* ============================================================
       MILKY LANE · DESIGN TOKENS
       ============================================================ */
    :root {
      --ml-black: #050505;
      --ml-ink: #0E0E10;
      --ml-charcoal: #161618;
      --ml-pink: #FF8CE0;
      --ml-pink-bright: #FF8CE0;
      --ml-blue: #5BD0E6;
      --ml-blue-deep: #5BD0E6;
      --ml-yellow: #5BD0E6;
      --ml-cream: #FFF7E8;
  /* Brand pink is #FF8CE0, which is 1.96:1 on the #FDF7EF paper sections -
     unreadable. This is the same hue taken deeper until it clears 4.5:1
     on paper (4.59:1), so it covers body copy and display type both.
     Use it anywhere pink type sits on a light ground. */
  --ml-pink-on-paper: #BD3D9A;
      --ml-white: #FFFFFF;
      --ml-text-dim: #B7B7BD;      /* captions and meta ONLY - Hayley Cat. C */
      --ml-text:     #E9E9EE;      /* body copy: near-white on ink, 16.7:1 */
      --ml-border: rgba(255,255,255,0.08);

      --display: "Anton", "Bebas Neue", Impact, sans-serif;
      --script: "Driftline", "Brush Script MT", cursive;
      /* Driftline · the Milky Lane brand script face (eyebrows / accents) */
      --tag: "Anton", "Bebas Neue", Impact, sans-serif;
      --body: "Inter", system-ui, -apple-system, sans-serif;

      --radius: 18px;
      --radius-lg: 28px;
      /* Was rgba(255,140,224,.55) / rgba(91,208,230,.45). A pink shadow under
         a pink button reads as a halo, not depth - it is the same effect as a
         0 0 glow, just offset. Black keeps the lift and drops the bloom. The
         names stay so nothing downstream has to change. */
      --shadow-pink: 0 20px 60px -20px rgba(0,0,0,0.55);
      --shadow-blue: 0 20px 60px -20px rgba(0,0,0,0.45);

      --max: 1320px;
      --spray: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22816%22 viewBox=%220 0 612 792%22 height=%221056%22%3E%3Cdefs%3E%3CclipPath id=%2232c100188f%22%3E%3Cpath d=%22M 21 41.6 L 591 41.6 L 591 750 L 21 750 Z M 21 41.6 %22 clip-rule=%22nonzero%22/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path=%22url(%2332c100188f)%22%3E%3Cpath fill=%22%23000000%22 d=%22M 62.6 436.8 C 62.7 433.7 62.8 430.4 63 427.3 C 63 426.8 63.5 426.4 64 426.3 C 64.4 426.1 65.1 426.4 65.3 426.8 C 66 428 66.4 429.2 67.1 430.4 C 67.4 430.8 68.5 431.4 68.5 431.4 C 71.2 427.5 75.4 429.4 78.8 428.5 C 79.4 428.4 79.9 427.3 79.8 426.7 C 79.8 426.1 78.8 425.5 78.2 425.4 C 76.9 425.1 75.5 425.1 74.2 425.3 C 70.5 425.5 69 423.7 68.7 420.1 C 68.5 418.4 65.7 414.6 64 413.7 C 63.1 413.3 62 413.2 61 412.9 L 60.8 412.7 C 60 411.7 58.8 410.9 58.3 409.7 C 57.9 408.7 57.7 406.9 58.3 406.5 C 59.1 405.6 60.8 405.3 62.1 405.2 C 62.7 405 63.4 405.9 64.1 406.3 C 66 407.3 68.2 409.3 69.7 408.9 C 71.5 408.3 72.7 405.8 74.1 403.9 C 74.7 403.2 75.4 402.1 75.2 401.2 C 74.8 398.9 73.9 396.8 73.2 394.6 C 72.8 394.9 72.1 395.4 72.1 395.6 C 72.2 399.5 68.8 398.2 67.1 399.3 C 63.8 401.5 64.7 396.9 63 396.4 C 61.7 395.9 60.6 395.6 59.3 395.2 L 59.4 395.4 C 57.7 391.8 62.7 387.9 59.1 384.2 C 58.8 384 59.8 381.5 60.7 381.1 C 61.6 380.7 63.3 381.4 64.1 382.1 C 64.8 382.8 65.1 384.2 65.3 385.4 C 65.3 386 64.1 386.5 64 387.2 C 63.7 388.1 63.7 389.1 63.7 389.9 C 65 390.1 66.3 390.4 67.5 390.1 C 68.1 389.9 68.8 388.4 68.5 387.8 C 66.7 383.4 66.7 380.3 71.2 376.8 C 73.1 375.4 76.9 372 74.1 367.7 C 73.8 367.2 74.8 365.4 75.5 364.6 C 77.1 362.7 78.8 361.2 80.4 359.3 C 82.2 357 83.2 355.1 80.4 352.5 C 78.6 351.1 77.6 348.8 76.5 346.8 C 74.9 344.1 74.1 343.4 71.1 342.7 C 70.4 342.5 69.2 342.1 69.2 341.5 C 69.1 340.7 69.2 339.2 69.8 338.7 C 71.5 337 74.4 336.5 74.9 333.6 C 74.9 333.3 78.4 333.3 79.9 333.8 C 82.5 334.8 84.1 334.1 84.9 331.7 C 85.8 329 86 326.1 87 323.4 C 88 320.9 87.8 320.4 84.9 319.6 C 81.8 318.7 80.8 309.3 83.3 306.9 C 85.2 305.2 84.5 304.8 83.2 303.5 C 78.1 298.1 77.9 297.4 80.8 292.8 C 81.1 292.4 82.8 292.1 82.9 292.4 C 85.5 295.8 87.6 299.5 90.3 302.9 C 92.3 305.5 92.2 307.5 89.8 309.8 C 88.3 311.2 90 319 92 320 C 93.2 320.6 95.4 320.4 96 319.6 C 97.6 317.6 99.7 315.5 96.6 312.6 C 95.4 311.6 95.2 309.3 94.7 307.6 C 94.2 305.2 94.6 303.6 97.4 302.9 C 100 302.4 102.9 297.4 102.3 295.1 C 101.6 291.5 99.9 291.3 95.9 293 C 94.3 293.7 92.5 293.4 90.6 293.5 C 90.6 292.1 90.6 290.7 90.5 289.3 C 90.5 288.1 90.5 287 90.2 285.8 C 89.2 281.1 89.2 281.3 93.9 279.6 C 94.9 279.3 95.6 278.2 96.2 277.2 C 96.6 276.6 96 275.2 96.4 274.9 C 98 273.7 99.9 273 101.6 272 C 100 270.8 98.3 269.5 96.7 268.2 C 97.9 266.9 98.9 265.5 100.1 264.5 C 100.4 264.2 102.1 264.9 102.6 265.5 C 103.3 266.6 103.1 268 103.8 269.2 C 105 271.2 106.1 273.7 107.8 274.9 C 110.5 276.6 110.7 272.3 112.7 272 C 117.5 271.2 116.4 269.3 114.1 266.6 C 113.2 265.6 114.1 263.5 113.4 262.2 C 112.4 260.1 112 257.1 108 258.1 C 105.6 258.6 103.4 257.4 103.7 254.1 C 104 251.5 105.1 250.8 107.3 252 C 109.3 253.1 111.1 254.5 113.2 255.4 C 115.7 256.2 117.8 255.5 119.7 253.5 C 121.5 251.5 122.4 248.8 120.5 247.1 C 118.5 245.3 119.5 244.8 120.8 243.8 C 120.2 243.1 119.9 242.3 119.2 241.8 C 114.4 239 114.4 239 117.5 234.9 C 120.2 231.2 122.2 226.7 127.9 226.6 C 130.1 226.6 130.6 222 128.1 220.2 C 124.4 217.5 124.2 215.5 128.1 213.2 C 130.2 211.9 130.9 210.9 128.5 209.4 C 128.1 209.1 127.5 208.8 127.2 208.4 C 126.2 206.1 123.8 203.4 126.2 201.3 C 127.1 200.4 130.2 201.5 132 202.1 C 133 202.4 133.9 203.8 134.2 204.8 C 134.6 206.8 135.8 207.5 137.6 207.1 C 140.3 206.4 138.5 204.8 138.2 203.5 C 137.6 201.3 138.5 200 140.9 200 C 141.9 200 143 199.8 144 199.7 C 147.6 199.5 148.4 197.4 148.1 194.3 C 148.1 193.6 147.7 192.7 147.4 192 C 146.1 187.9 144.6 184.3 150.6 181.7 C 153.3 180.6 154.3 175.8 156.1 172.6 C 158.4 168.6 160.8 164.7 163.1 160.5 C 163.8 159.2 164.4 157.5 164.2 156.3 C 163.9 154.8 163.5 154.5 165.2 153.5 C 168.6 151.8 171.9 149.6 174.9 147 C 179.3 143.2 183.2 138.9 189 137.2 C 190.1 136.9 191.3 135.7 192.1 134.8 C 194.6 131.8 197.6 131.2 201.3 131.2 C 204.2 131.2 207.4 130.2 210.2 129.1 C 212.9 128.1 215.4 126.6 217.9 125.2 C 220.3 123.8 222.9 122.5 225 120.7 C 227.2 118.9 228.9 117.2 232 119.2 C 233.4 120.1 235.9 119.1 237.9 118.8 C 238.6 118.7 239.1 117.9 239.7 117.5 C 239.1 116.8 238.4 116.2 237.9 115.5 C 237 114.5 236.1 113.4 235.3 112.2 C 236.9 111.1 238.4 109.7 240.3 109.1 C 240.8 109 243 111 243 112 C 242.8 115.1 243.6 115.7 246.4 114.2 C 251.8 111.5 257.5 109.5 262.5 106.3 C 266.8 103.4 270.9 102.3 275.9 102.6 C 277.9 102.7 280.3 102.6 281.9 101.6 C 282.9 100.9 282.4 98.3 283 96.6 C 283.3 95.7 284.3 94.4 284.8 94.4 C 286 94.6 287.3 95.2 288.3 96 C 288.6 96.2 288.1 97.9 287.7 98.3 C 285.3 100.9 285.4 102.3 289.1 102.9 C 289.7 102.9 290.1 103.1 290.7 103.3 C 297.4 105.1 301.8 102.6 303.9 95.7 C 304.9 92.5 306.6 91.6 308.6 94.2 C 311.5 97.7 313.9 95.7 316.9 94.9 C 322.3 93.3 328 92.3 333.7 91.6 C 335.7 91.3 337.4 91.5 337.5 88.9 C 337.7 87 337.7 85.3 335.1 84.8 C 333.7 84.5 331.8 83.6 331.4 82.5 C 330.6 80.1 330.6 77.5 330.1 74.9 C 330.1 74.7 330.8 74.2 331.1 74.2 C 332.4 74.4 334.7 74.7 334.7 75.1 C 335 80.2 338.5 80.6 342.4 81.1 C 343.4 81.2 344.7 82.6 344.8 83.8 C 345.2 86 346.2 88.6 348.5 87.9 C 350.9 87.2 353.8 85.1 354.8 82.9 C 357.5 76.9 359.8 75.8 365.7 78.1 C 368 78.9 371.3 79.1 373.4 78.1 C 376.3 76.9 378 77.5 379.7 79.5 C 382.7 83.1 386.2 82.9 389.7 80.8 C 394.6 77.8 399.6 78.5 404.9 79.1 C 406.2 79.2 408.3 79.1 408.6 78.4 C 409.5 76.6 408.5 75.4 406.3 75.2 C 404.8 75.1 403.5 74.4 404.8 72.8 C 405.5 71.9 407.9 71.1 408.5 71.5 C 411.2 73.7 413.9 75.8 413.4 79.9 C 413.2 82.3 413.3 84.8 413.4 87 C 413.6 88.2 414.3 89.3 414.7 90.5 C 415.3 89 416.4 87.8 416.4 86.3 C 416.3 82.5 415 78.5 415.3 74.7 C 415.4 72.4 417.7 70.1 419.1 68 C 419.3 67.8 420.7 68.2 420.8 68.7 C 421.1 69.7 421 70.8 421.3 71.8 C 421.4 72.4 422.1 73.4 422.6 73.4 C 423.6 73.2 424.8 72.9 425.3 72.2 C 427.1 69.4 427 66.4 425.3 63.4 C 424.3 61.7 423.7 59.7 423.3 57.7 C 423.1 57 424 56 424.4 55.1 C 425 55.9 425.5 56.6 426 57.3 C 426.8 59.1 427.5 61 428.5 62.7 C 429.7 64.7 432.4 66.5 432.2 68.2 C 432.1 71.5 431 74.9 429.2 77.8 C 428.4 79.2 426.8 80.2 428.4 81.5 C 429.5 82.5 432 83.5 433.1 82.9 C 435.8 81.5 438.2 79.5 440.4 77.4 C 441.1 76.6 440.5 74.8 440.5 73.5 L 440.4 73.7 C 442.8 73.8 444.8 74.1 445.9 76.9 C 447.1 79.8 449 77.1 450.5 76.8 C 450.6 76.8 450.8 75.2 450.6 75.2 C 447.6 73.9 447.9 72.1 450.3 71 C 451.6 70.2 453.5 70.8 455 70.8 C 457.6 71 457.2 72.2 456.6 73.9 C 456.4 74.4 456.9 75.5 457.4 75.9 C 460.3 78.1 459.9 80.6 459.7 84.1 C 459.3 90 460.4 96 461.1 102.1 C 461.1 102.7 462 103.3 462.4 103.8 C 463.1 103.3 463.9 102.7 464.4 102 C 465 101.3 465.4 100.4 466 99.7 C 466.4 100.7 467.3 101.9 467.3 102.9 C 467.4 105.4 465.8 106.8 463.4 107 C 461 107.1 458.6 106.8 456.3 107.4 C 455.2 107.7 454.3 109.5 453.5 110.5 C 454.5 111 455.7 112.1 456.6 112 C 460 111.4 464.1 113.8 466.8 109.7 C 467.6 110.1 468.8 110.5 468.8 111.1 C 469.1 113.8 469.8 115.2 473.1 115.4 C 475.8 115.7 478.4 117.4 480.8 118.8 C 481.5 119.2 482.4 120.5 482.2 121.2 C 481.4 124.9 484.4 127.3 485.1 130.3 C 485.8 133.6 487.4 135.6 489.5 137.6 C 493 141 497.3 143.6 498.9 148.7 C 499.3 150 501 151.4 502.3 151.8 C 507.9 153.1 512.6 155.5 515.6 160.7 C 516.1 161.7 518.3 161.9 518.4 160 C 518.7 156 521.1 155 524.4 155.5 C 525.7 155.7 527.7 156.7 527.8 157.5 C 528.2 159.4 528.8 161.4 526.1 162.9 C 520.8 165.9 521.1 166.1 524.2 170.8 C 526.1 173.6 527.8 176.8 528.5 179.9 C 529.5 185.4 532.4 190.1 534.6 195.1 C 536.3 198.8 538.3 202.2 543.3 202 C 544 202 545.6 203.5 545.6 204.2 C 545.6 205.1 544.3 206.1 543.3 206.7 C 542.3 207.2 541 207.5 540 207.9 C 540.8 209.2 541 211.4 542 211.8 C 548.9 214.9 550.2 221.9 552.4 227.7 C 556.6 238.7 560.6 249.8 562.7 261.2 C 564.1 268.6 566.4 276 565.5 284 C 565 289.3 565 295 568.5 299.7 C 569.1 300.4 569 301.7 568.8 302.6 C 567.5 310.8 566.7 318.7 569 326.7 C 569.1 327.1 569.2 328.1 569 328.1 C 562.7 331.1 565.8 337.5 563.8 342.2 C 561.7 347.5 563.1 349.4 568.5 350.5 C 569.8 350.8 571.9 351.4 572.2 352.2 C 572.7 353.9 572.4 355.9 571.8 357.6 C 570.8 360.2 568.4 359.9 566.5 357.5 C 565.8 356.5 565 355.8 564.1 354.9 C 563.3 355.8 561.5 356.6 561.5 357.6 C 561.1 362.3 559.1 364.9 554 364.7 C 553.4 364.7 552.3 366.7 552.4 367.6 C 553.1 378.3 547.7 386.7 542.5 395.1 C 541 397.4 542.2 397.6 543.5 398.6 C 544.7 399.6 547.3 400.6 547.3 401.6 C 547.3 403.8 546.6 406.6 545.2 408 C 542.9 410 542 411.9 542.8 414.7 C 544.9 424.8 545.9 435.1 545.9 445.3 C 545.9 452.6 546.6 459.9 544.2 466.8 C 543.7 468.3 543.7 470.3 544.3 471.5 C 547.4 478.7 544.5 485.1 542.3 491.5 C 541 495.5 537.9 496.8 533.6 495.3 C 531.4 494.6 529.1 493.9 527.1 492.8 C 523.8 490.6 521.2 488.3 521.8 483.5 C 522.8 474.7 523 465.7 523.4 456.7 C 523.5 454.7 523 452.6 522.7 450.5 C 522.5 449.5 522.1 448 522.5 447.6 C 526.5 443.6 524.7 439.4 523.5 435.1 C 523.1 433.5 522.7 432 522.2 430.4 C 521.2 431.8 519.7 433.1 519.1 434.8 C 517.8 438.2 514 441.2 516.4 445.6 C 516.5 445.9 516 446.5 515.7 446.9 C 512.7 450.3 512.6 452.9 515 457 C 515.6 458 516.5 459.6 516.3 460.3 C 514.3 463.6 514.6 466.7 516.3 470 C 516.5 470.5 515.8 472.3 515.3 472.4 C 514.4 472.7 512.7 472.5 512.4 472 C 511.1 469.6 509.9 466.8 509 464.3 C 508.6 462.9 509 461.1 508.7 459.6 C 508.4 458.7 507.3 458.2 506.6 457.4 C 506.1 458.2 505.7 459 505.3 459.9 C 504.7 460.9 504.4 462.9 503.9 462.9 C 499.7 463.4 498.9 467 496.6 469.6 C 490.5 476.4 483.9 482.7 477.5 489.2 C 474.2 492.6 471.1 496.2 467.8 499.6 C 467.4 500 467.1 500.5 466.8 500.7 C 462.6 505 458.9 510.6 453.7 513.1 C 447.6 516.1 445.2 519.4 445.6 526.1 C 445.8 528.6 443.6 531.4 441.2 533.9 C 433.2 541.9 422.6 544.6 413 549.3 C 407.7 552 402.5 555.7 395.9 554.6 C 395.4 554.4 394.1 555 393.9 555.6 C 392.1 560.3 388.1 558.8 384.5 559.1 C 371.1 560.6 358.5 556.4 345.5 554.1 C 341 553.4 336.8 550.9 332.4 549.2 C 329.1 547.9 326 546.2 322 547.7 C 319.7 548.6 316.6 546.6 313.8 546.3 C 311.1 546 310.3 548.2 311.5 549.9 C 313.2 552.6 315.8 554.9 312 557.8 C 312.5 558.3 313 558.7 313.2 559.3 C 313.6 560.4 314.5 562.1 314 562.7 C 308.9 568.2 312.5 573.2 314.9 578.4 C 315.3 579.2 315 580.8 314.8 581.8 C 314.2 583.9 313.2 586 312.8 588.3 C 312 592.4 311.3 596.6 311.3 600.9 C 311.3 609.1 311.9 617.4 312.3 625.6 C 312.3 626.9 312.8 628.3 312.5 629.6 C 311.1 635.9 313 642 312.8 648.3 C 312.5 654.7 312.8 661.1 312.6 667.4 C 312.3 681.9 314.2 696.1 317 710.4 C 318.9 719.6 319 729 315.9 738.3 C 315 741 313.6 743.7 311.9 745.8 C 308.1 750.4 302.6 750.2 297.9 746.7 C 289 739.8 287.1 729.6 284.1 719.8 C 283.7 718.6 284.4 717.2 284.4 715.9 C 284.7 706.1 286.1 696.3 284.8 686.6 C 283.7 676.9 285 667.8 285.8 658.4 C 287 647.1 286.6 635.6 286.7 624.2 C 286.7 621.1 285.4 617.9 285.4 614.8 C 286.1 598.1 283.7 581.8 281.1 565.2 C 280.1 559 279.3 552.9 277.3 546.9 C 276.6 544.5 275.3 541.3 273.3 540.5 C 269.9 538.9 265.8 538.8 261.8 538.3 C 261.2 538.3 259.6 540 259.8 540.9 C 260.1 548.3 260.6 555.6 260.9 563 C 260.9 564.7 260.5 566.4 259.8 568 C 257.6 572.4 253.9 575.1 249.2 574.8 C 244.5 574.4 241 571.4 240.3 566.2 C 239.4 560.1 236.7 554.1 238.9 547.7 C 239.4 545.7 239 543.5 239.1 541.3 C 240 534.6 238.1 530.8 231.2 527.2 C 222.2 522.7 214.4 515.5 208.8 506.6 C 207.9 505.3 207.1 503.9 206 502.9 C 204.7 501.7 203.2 501.2 202.3 503.3 C 201.1 506 198.3 506 197 504.6 C 195.1 502.6 194 502.3 191.3 503 C 188.7 503.7 187.4 501.2 187.6 498.2 C 187.7 497.2 186.9 495.5 186.2 495.3 C 182 494.5 178 493.8 173.9 493.6 C 172.1 493.5 170.2 494.9 168.4 495.5 C 167.2 495.9 165.9 496.8 164.8 496.8 C 163.1 496.8 160.4 495.3 160.1 495.9 C 158.8 497.7 158.2 500.2 157.5 502.4 C 156.4 506.7 155.8 507.1 152.1 504.4 C 149.3 502.3 146.7 499.6 143.7 497.5 C 142.4 496.5 141 496.2 139.9 498.3 C 138.5 501 134.3 502.6 131.9 501.4 C 131.2 501.2 130.5 499.6 130.6 499 C 131.3 496.8 132.8 494.8 130.8 492.5 C 131.5 491.9 132.2 490.9 132.8 490.9 C 136.5 491.2 140 491.6 143.7 492.1 C 144.3 492.1 145 491.6 145.7 491.5 C 145 491.2 144.2 491.1 143.7 490.6 C 141.9 488.2 140.2 485.6 138.5 483.1 C 137.6 481.8 136.6 480.7 135.6 479.5 C 131.2 474.4 127.2 479.7 123.1 480.2 C 120.9 480.5 119.2 482.4 117.1 483.1 C 116.1 483.5 114.7 482.9 113.5 482.9 C 113.7 481.7 113.7 480.4 114.1 479.2 C 114.7 477.5 115.8 476 116.1 474.1 C 116.2 473.3 115.2 471.5 114.5 471.4 C 113.8 471.1 112.1 472.1 111.7 473 C 111 474.2 111.1 477 110.4 477.1 C 107.6 477.7 104.7 477.8 101.7 477.7 C 100.7 477.5 99.1 476.2 98.9 475.2 C 98.6 474.4 99.6 473 100.4 472.1 C 101.3 471.1 103.6 471.3 102.9 468.8 C 102.1 466.1 102 463.3 101.1 460.7 C 101 460.3 98.2 460.3 97 460.9 C 93.9 462.7 91.2 465.3 87.2 462.1 C 86 461.1 84.5 462.1 83.9 464.3 C 83.6 465.4 82.1 466.3 80.8 467.1 C 80.2 467.4 79.4 467.3 78.6 467.3 C 78.8 466.6 78.8 465.8 78.9 465.1 C 79.1 464.1 79.6 462.7 79.2 462.3 C 74.7 457.7 77.5 456.4 81.8 455.2 C 82.9 454.9 84.3 451.6 83.9 450.8 C 81.9 447.2 83.2 444.8 86 442.8 C 88 441.4 87.8 440.5 85.8 439.5 C 84.6 438.9 83.6 437.9 82.6 437.2 C 80.9 435.9 79.2 435.5 77.9 437.7 C 76.8 439.9 75.2 440.1 73.4 438.9 C 70.7 437.1 70.5 439.8 69.5 440.9 C 70.4 441.6 71.4 442.9 72.2 442.9 C 75.9 442.6 76.4 445.1 75.7 447.5 C 75.1 449.8 73.7 451.9 72.2 454 C 71.9 454.5 70 454 69.1 453.5 C 68.4 453 67.8 451 67.8 450.9 C 70.1 449.5 69 449.5 67.2 449 C 61.8 447.9 60.3 444.2 62.6 436.8 C 62.7 437.8 63 438.6 63.1 439.6 C 63.4 439.4 63.8 439.1 64.1 438.8 C 63.7 438.1 63.1 437.5 62.6 436.8 Z M 99.7 438.8 C 98.6 439.5 97.2 440.4 96 441.4 C 95.6 441.6 95.6 443.2 96 443.6 C 97.6 445.2 99.3 446.9 101.1 448 C 101.7 448.5 103.3 447.9 103.8 447.2 C 105.1 445.8 101.9 439.1 99.7 438.8 Z M 150.1 493.8 C 151 496 151 498.3 152.1 499 C 153.6 499.9 157.4 495.3 156.7 493.6 C 155.7 491.3 153.8 490.5 151.6 491.2 C 150.7 491.5 150.4 493 150.1 493.8 Z M 202.7 496.2 C 202.8 493 201.7 491.3 199.3 491.2 C 198.7 491.2 198 492.2 197.3 492.8 C 199 494.2 197 497.9 200.4 498 C 201.3 498 202.3 496.6 202.7 496.2 Z M 96.3 418.4 C 96 418.1 95.4 417.1 94.9 416.3 C 93.6 417.6 92.3 418.9 91.2 420.3 C 91 420.4 92.6 422.3 93.5 422.6 C 95.9 423 96.4 421.4 96.3 418.4 Z M 123.4 474.5 C 124.4 472 125.4 470.4 125.1 469.4 C 124.8 468.4 123.2 467.4 121.9 467 C 121.5 466.8 119.7 468.8 119.9 469.4 C 120.4 471 121.5 472.1 123.4 474.5 Z M 78.4 405.5 C 79.2 406.8 79.6 407.7 80.1 407.7 C 81.6 407.7 83.1 407.5 84.6 407.3 C 84.2 406.6 83.8 405.2 83.2 405.2 C 81.9 405 80.4 405.3 78.4 405.5 Z M 451.3 95.3 C 452 95.7 452.6 96 453.3 96.4 C 454 95.2 455 93.7 455.3 92.3 C 455.5 91.6 453.9 90.2 453 90.2 C 452.2 90 450.8 91.2 450.5 92 C 450.2 93 450.9 94.3 451.3 95.3 Z M 97.7 453.3 C 97.7 453.2 97.3 452.6 96.9 451.9 C 95.7 453.5 94.7 455 93.6 456.6 C 93.6 456.6 94.4 457.6 94.9 457.6 C 97.6 457.9 97.7 456 97.7 453.3 Z M 454.7 86.3 C 455.2 84.6 455.6 83.6 455.5 82.8 C 455.3 82.1 454.3 81.5 453.7 80.8 C 453.2 81.5 452 82.3 452.2 82.6 C 452.6 83.8 453.5 84.6 454.7 86.3 Z M 88.2 423.7 C 87.6 423 87.2 422.3 87 422.3 C 85.8 422.7 84.5 423.3 83.3 424 C 83.3 424 83.8 425.3 83.8 425.3 C 85.2 424.7 86.6 424.3 88.2 423.7 Z M 91.2 454.9 C 91 454.3 90.7 453.9 90.6 453.5 C 90.5 453.6 90.2 453.9 90.2 454 C 90.3 454.5 90.5 454.9 90.6 455.3 C 90.7 455.2 90.9 455 91.2 454.9 Z M 454.6 75.8 C 454.7 75.7 455 75.5 455.2 75.4 C 455 75.2 454.9 75.1 454.6 74.8 C 454.5 75.1 454.2 75.4 454 75.5 C 454.2 75.5 454.3 75.7 454.6 75.8 Z M 73.7 352.3 C 73.2 351.5 71.7 350.6 70.7 350.6 C 69.7 350.6 68 351.4 67.7 352.1 C 67.1 353.9 67 355.2 64.5 355.8 C 61.8 356.3 62.3 359.2 63 360.9 C 63.5 362.3 65.5 363 66.4 363.6 C 70.5 363.5 75.4 355.5 73.7 352.3 Z M 501 133.6 C 499.9 134 498.7 135.7 498.5 137 C 498.3 137.7 499.6 139.3 500.6 139.9 C 503.4 141.4 506.4 142.9 509.4 144.3 C 511.6 145.3 512.8 144.4 512.8 141.9 C 512.8 137.6 505.3 132 501 133.6 Z M 212.4 551 C 208.7 552.4 205 554.3 202.1 549.6 C 201.7 549.9 200.8 550.3 200.8 550.6 C 201.1 551.6 201.7 552.4 202.1 553.4 C 204.2 559.4 204.7 559.4 209.7 555.1 C 210.4 554.6 211.7 554.7 212.5 554.3 C 213.1 554 213.4 553.1 213.9 552.3 C 213.4 551.9 212.6 551 212.4 551 Z M 393.8 75.5 C 394.6 75.1 395.9 73.1 395.6 72.5 C 394.6 70.5 392.9 68.8 391.5 67 C 390.4 68.2 389.1 69.5 388 70.7 C 387.5 71.1 387.2 71.4 387 71.9 C 386.4 73.1 386 74.2 385.4 75.2 C 386.7 75.5 388 75.8 388.9 75.9 C 390.8 75.9 392.5 76.1 393.8 75.5 Z M 48.2 440.1 C 47.9 437.8 47.9 435.4 47.2 433.1 C 46.9 432.1 44.9 430.8 43.9 430.8 C 42.6 431 41 432.2 40.6 433.4 C 39.2 437.4 40.8 439.6 45.2 439.9 C 46.2 440.1 47.2 439.9 48.2 440.1 C 48.3 439.9 48.2 440.1 48.2 440.1 Z M 560.7 218.8 C 560 218.6 557.7 221.2 557.8 221.5 C 559 223.6 560.4 226 562.4 227.2 C 564.3 228.2 566.7 225.2 566.5 221.6 C 565 220.8 563 219.3 560.7 218.8 Z M 225 111.3 C 225.2 109.3 225.6 106.8 222.2 106.8 C 220.2 106.8 217.9 106.1 217.6 109.4 C 217.5 112.4 218.9 115 221.3 115.2 C 223.2 115.5 225 113.7 225 111.3 Z M 371.7 67 C 368.3 65.8 370 69.8 368.7 71.1 C 368.6 71.2 368.3 71.5 368.3 71.8 C 368.3 72.9 367.9 74.7 368.6 75.2 C 369.4 75.9 371.1 76.1 372.1 75.7 C 373.4 75.1 374.3 73.8 376 72.2 C 374.4 70.1 373.4 67.5 371.7 67 Z M 122.1 496.6 C 122.8 493.8 124.8 492.5 127.3 491.8 C 126.9 490.5 126.8 488.5 126.1 488.2 C 122.6 487.1 117.7 492.8 118.8 496.2 C 118.9 496.8 119.9 496.9 120.5 497.3 C 121.2 497 121.9 496.9 122.1 496.6 Z M 35.8 455.7 C 35.8 458 36.6 460.6 38.9 460.2 C 40.5 459.9 42 457.3 43 455.5 C 43.3 455 41.2 453.3 40.9 453 C 37.5 452.9 35.8 453 35.8 455.7 Z M 434.9 46 C 434.2 47.7 436.7 50.6 438.5 50 C 439.9 49.6 441.5 47.9 441.8 46.6 C 441.9 45.3 440.4 43.9 438.9 41.6 C 437.1 43.6 435.7 44.6 434.9 46 Z M 199.5 126.3 C 202.3 126.6 206.1 123.8 205.2 122.5 C 204.1 120.8 202.1 119.5 200.4 118.1 C 199.4 119.7 198.4 121.1 197.4 122.6 C 198.4 124.2 199 126.2 199.5 126.3 Z M 151.3 517.8 C 152.1 517 153 515.5 153 514.6 C 152.8 513.8 151 512.4 150.1 512.7 C 148.1 513.3 146.3 514.6 144.4 515.5 C 144.3 515.5 144.7 517.1 145.3 517.4 C 146.1 517.8 147.3 517.8 147.6 518 C 149.3 518 150.7 518.4 151.3 517.8 Z M 534.1 180.9 C 536.5 181.7 539.8 178.9 539.5 175.9 C 539.3 175.1 537.9 173.9 536.9 173.8 C 533.6 173.1 532.8 175.1 533.2 179.3 C 533.4 179 533.5 180.6 534.1 180.9 Z M 45.9 400.8 C 46.7 400.2 47.6 399.3 48.6 398.9 C 50.7 398.1 52.6 396.9 51.2 394.4 C 50.6 393.4 48.5 392.2 48.3 392.4 C 46.9 393.8 45.6 395.5 44.8 396.6 C 45.5 398.8 45.6 399.8 45.9 400.8 Z M 249.2 100.1 C 249.7 98.3 249.2 96.4 246.5 96.4 C 244.7 96.4 242.4 96.4 242.8 99 C 243.1 101 244.3 103 245.7 106.7 C 247.5 103.4 248.8 101.9 249.2 100.1 Z M 136.6 510.3 C 134.5 508.3 132.3 508.4 130.6 510.6 C 129.8 511.6 129.3 513 128.8 514.3 C 130.3 514 132 513.6 133.6 513.4 C 134.9 513.3 136.2 513.6 137.5 513.6 C 137.7 513.6 138.2 513.1 139.6 512 C 138.5 511.3 137.3 511 136.6 510.3 Z M 138.3 189.4 C 136.6 190.3 135.2 191.7 133.6 192.9 C 135 194.3 136.3 195.6 137.7 197 C 138.7 195.3 139.9 193.7 141.2 191.6 C 140 190.6 138.7 189.1 138.3 189.4 Z M 61 412.7 C 59.7 412.7 58.4 412.7 57.1 412.9 C 54.7 413 53.9 414.7 54.7 416.6 C 55.4 418.1 56.7 420.3 58 420.3 C 60.6 420.4 61.3 418.3 61.1 415.9 C 61 415 61 413.9 61 412.7 Z M 54 345.8 C 55 347.8 56.1 349.5 57.1 351.4 C 58.3 349.9 59.8 348.5 60.4 346.8 C 60.7 346.1 58.6 344.7 57.4 343.5 C 55.9 344.7 54 345.7 54 345.8 Z M 329.1 562 C 328.1 563.1 326.4 564.1 326.4 565.2 C 326.4 566.4 328.1 567.5 329 568.5 C 330 567.5 331.1 566.7 332.6 565.2 C 331.3 563.8 330.1 563 329.1 562 Z M 174.3 497.7 C 172.5 498.9 171.2 500.7 169.6 502.3 C 170.4 502.9 171.1 503.9 171.8 504 C 174.2 504.3 176.6 504.4 177.8 500.7 C 176.8 499.7 174.8 497.5 174.3 497.7 Z M 51.2 406.8 C 49.4 406.5 46.9 406.2 47.2 408.9 C 47.3 410.3 49.3 412.3 50.6 412.4 C 51.9 412.6 53.3 410.7 55.6 409 C 53.6 407.9 52.4 406.9 51.2 406.8 Z M 62.8 372.6 C 62.8 370.3 61.8 369.3 59.6 369.3 C 57.4 369.3 56.1 370.1 56 372.4 C 55.9 374.4 56.3 376.1 59 376 C 61.3 376.1 62.8 375.4 62.8 372.6 Z M 559.7 385.4 C 562.8 385.2 561.7 383.5 560.8 381.7 C 560.6 381.1 561.4 380.1 561.8 379.3 C 562.3 378.6 562.7 377.7 563.1 377 C 562.3 377.1 561 376.8 560.4 377.4 C 559.1 378.6 558 380.1 556.6 381.8 C 558 383.5 559 385.4 559.7 385.4 Z M 324.4 85.6 C 322.9 85.3 317.6 88.6 318.2 89.6 C 318.7 90.7 320 91.9 321.3 92 C 323.9 92.5 325.9 90 325.9 86.8 C 325.4 86.5 325 85.8 324.4 85.6 Z M 63.8 331.8 C 60.8 331.6 60.7 334.1 61 336.1 C 61.1 337.3 62.6 338.2 63.4 339.2 C 64.4 338.1 65.4 337.1 66.7 335.8 C 65.4 334 64.7 332 63.8 331.8 Z M 38.6 413 C 38.5 415.6 40.2 415.9 42.3 415.9 C 44.2 415.9 45.9 414.7 45 413.2 C 44.3 411.6 42.2 410.7 39.9 408.9 C 39.2 410.9 38.6 411.9 38.6 413 Z M 59.4 395.4 C 58.1 395.5 56.6 395.2 55.6 395.8 C 54.4 396.5 53.7 398.1 52.9 399.3 C 54.4 400.2 55.9 401.3 57.4 401.8 C 57.9 401.9 59.1 399.6 59.6 398.5 C 59.8 397.5 59.4 396.4 59.4 395.4 Z M 23.8 432.2 C 23 433 21.4 433.9 21.5 434.4 C 22.1 436.2 23.2 437.8 24.2 439.5 C 24.8 438.4 25.5 437.1 26.4 435.5 C 25.4 434.2 24.7 433.2 23.8 432.2 Z M 493.6 120.9 C 491.9 120.4 490.5 121.4 490.5 123.4 C 490.5 124.5 491.1 125.6 491.3 126.9 C 493 126.2 494.9 125.5 497.6 124.4 C 495.9 122.6 494.9 121.4 493.6 120.9 Z M 490.2 102.4 C 489.6 101.7 488.8 100.4 488.5 100.4 C 486.5 101.4 484.8 102.6 482.8 103.7 C 483.5 104.1 484.2 104.6 485.8 105.4 C 487.4 104.4 488.8 103.4 490.2 102.4 Z M 590.6 362.6 C 589.5 361.9 588.3 360.8 587 360.5 C 586.5 360.3 585.6 362 584.9 362.9 C 585.8 363.6 586.8 364.3 588 365.3 C 589 364.2 589.9 363.5 590.6 362.6 Z M 56 380.5 C 55.9 379.6 54.6 378.1 53.7 378.1 C 50.9 378.1 51.4 380.5 51.7 382.3 C 51.9 383.1 53.2 383.8 54.9 385.5 C 55.4 383.1 56.3 381.7 56 380.5 Z M 58.1 448.3 C 57.1 448 55.9 448.8 54.7 449.2 C 55.7 450.5 56.6 452 58 452.9 C 58.6 453.3 60 452.3 62.1 451.5 C 60.3 449.9 59.3 448.6 58.1 448.3 Z M 115.1 512.4 C 114.7 513.6 114.1 514.6 114.1 515.7 C 114.1 516.3 115.7 517.5 115.8 517.4 C 117.1 516.5 118.2 515.4 119.5 514.4 C 117.9 513.6 116.5 513 115.1 512.4 Z M 71.7 303.2 C 71 304.2 69.7 305.2 69.7 306.1 C 69.7 306.9 71.2 307.6 72.1 308.3 C 72.7 307.6 73.2 306.9 73.9 305.9 C 73.1 304.9 72.4 304.1 71.7 303.2 Z M 271.9 555.8 C 271.7 556.4 273.3 557.8 273.5 557.8 C 274.5 557.4 275.4 556.7 276 555.7 C 276.3 555.3 275.2 554.1 274.3 552.7 C 273.2 554.1 272.2 554.9 271.9 555.8 Z M 117.9 527.4 C 117.9 526.7 117.1 525.4 116.5 525.2 C 115.8 525.1 114.2 525.9 114.2 526.2 C 114.2 527.2 115 528.2 115.8 530.1 C 116.9 528.8 117.9 528.1 117.9 527.4 Z M 516.3 515.7 C 516.8 516.5 518 517.1 518.8 517.7 C 519.2 516.8 520.1 516 520.1 515.3 C 520.1 514.6 519 514 517.8 512.7 C 517.1 514.1 516.1 515.3 516.3 515.7 Z M 48.3 439.9 C 48.5 441.4 48.2 442.9 48.7 444.2 C 49 444.9 50.6 445.2 51.6 445.6 C 52 444.3 53 442.2 52.7 441.9 C 51.4 440.9 49.7 440.6 48.3 439.9 C 48.2 440.1 48.3 439.9 48.3 439.9 Z M 573.4 379.4 C 572.8 380.1 571.7 381 571.9 381.5 C 572.2 382.5 573.1 383.5 574.1 384 C 574.6 384.2 575.6 383.4 577.4 382.7 C 575.5 381.1 574.4 380.3 573.4 379.4 Z M 581.8 331.7 C 581.1 332 580.1 333 580.1 333.7 C 580.1 334.4 581.1 335.1 581.6 335.8 C 582.5 335.1 583.5 334.3 585.2 332.8 C 583.5 332.1 582.5 331.4 581.8 331.7 Z M 151.7 156.5 C 151.4 157.1 150.7 158.2 150.8 158.4 C 151.6 159.1 152.6 159.8 153.6 160.2 C 153.7 160.4 154.4 159.4 155.3 158.5 C 153.8 157.7 152.8 157.1 151.7 156.5 Z M 102.4 500.5 C 102.9 498.6 102 497.3 99.9 497.5 C 99.3 497.5 98.6 498.2 98 498.6 C 98.7 499.7 99.6 500.9 100.6 502.4 C 101.4 501.6 102.3 501 102.4 500.5 Z M 399.1 55.6 C 398.8 54.4 398.3 53.4 397.9 52.4 C 397.5 52.7 396.8 53 396.8 53.2 C 397.2 54.6 397.9 56 398.8 58.1 C 398.9 56.9 399.2 56.1 399.1 55.6 Z M 105 532.6 C 104.3 532.2 103.7 531.5 102.9 531.4 C 102.4 531.2 101.4 532.1 101.4 532.5 C 101.4 533.3 101.9 534.3 102.3 535.6 C 104 533.6 104.4 533.1 105 532.6 Z M 504.4 508.1 C 505 507.4 505.9 506.9 506 506.1 C 506.1 505.7 505.3 505 505 504.4 C 504.3 505 503.6 505.6 502.7 506.1 C 503.6 507 504 507.6 504.4 508.1 Z M 92.6 472.4 C 92.3 471.7 91.3 471.3 90.6 470.7 C 90.3 471.4 89.8 472 89.8 472.7 C 89.9 473.5 90.5 474.2 91.5 476.2 C 92.2 474 92.9 473 92.6 472.4 Z M 53.2 486.9 C 52.4 487.4 51.9 488.2 51.7 488.9 C 51.6 489.3 52.4 489.9 52.9 490.5 C 53.4 489.9 54 489.3 55.4 487.9 C 54.3 487.4 53.4 486.6 53.2 486.9 Z M 560.7 427.5 C 560.6 427.5 560.3 428.1 560.1 428.4 C 561 428.8 561.8 429.2 562.7 429.8 C 562.8 429.4 563.1 429 563.5 428.1 C 562.4 427.8 561.5 427.7 560.7 427.5 Z M 476.2 112 C 476.1 112.4 476.4 113 476.5 113.4 C 477.2 112.8 478.1 112.4 478.7 111.7 C 478.9 111.4 478.4 110.5 477.8 108.7 C 477 110.5 476.5 111.3 476.2 112 Z M 113.2 222.8 C 113.2 222.5 112.7 221.8 112.5 221.8 C 112 221.9 111.3 222.3 111.1 222.8 C 111 223.2 111.7 223.8 112.2 224.8 C 112.7 223.8 113.1 223.3 113.2 222.8 Z M 158.4 143.4 C 158.1 143.3 157.2 143.9 157.2 144 C 157.4 144.6 157.7 145.3 158 145.9 C 158.5 145.6 159.1 145.4 160.2 144.9 C 159.2 144.1 158.8 143.7 158.4 143.4 Z M 49.9 449.5 C 49.2 449.5 48.5 450.5 48.2 451.2 C 48 451.5 48.9 452.7 49.3 452.7 C 50 452.7 50.9 452.3 52.4 451.8 C 51.2 450.5 50.4 449.5 49.9 449.5 Z M 569.8 438.2 C 569.8 437.9 569.2 437.2 569.1 437.2 C 568.5 437.5 567.8 437.8 567.7 438.2 C 567.5 438.6 568.2 439.2 568.8 440.2 C 569.4 439.4 569.8 438.8 569.8 438.2 Z M 579.5 288.1 C 580.1 288.1 580.8 287.4 580.9 287 C 581.1 286.6 580.3 285.7 579.9 285.6 C 579.5 285.4 578.8 286 576.5 287.3 C 578.2 287.7 578.9 288.1 579.5 288.1 Z M 25 394.2 C 25 394.4 26.1 394.8 26.1 394.8 C 26.5 394.2 26.7 393.6 26.9 393.1 C 26.5 392.9 26.1 392.7 25.4 392.4 C 25.1 393.1 24.8 393.6 25 394.2 Z M 436.7 62.4 C 436.5 62.8 436.2 63.3 436.2 63.7 C 436.2 64 436.8 64.1 437.1 64.4 C 437.2 64 437.4 63.5 437.5 63.1 C 437.2 62.8 436.9 62.6 436.7 62.4 Z M 430.4 46.5 C 430.5 46.3 430.7 46 430.8 45.9 C 430.8 45.6 430.8 45.5 430.7 45.2 C 430.7 45.2 430.4 45.2 430.4 45.2 C 430.4 45.6 430.4 46 430.4 46.5 Z M 440.8 74.5 C 440.6 74.2 440.6 74.1 440.5 73.9 C 440.4 73.8 440.2 73.8 440.1 73.7 C 440.4 73.9 440.6 74.1 440.8 74.5 Z M 440.8 74.5 %22 fill-opacity=%221%22 fill-rule=%22nonzero%22/%3E%3C/g%3E%3C/svg%3E");
    }

    /* ============================================================
       RESET / BASE
       ============================================================ */
    /* B4 · Driftline is the Milky Lane script face (Brand Kit §4).
       Calgary Script retired 25 Aug 2026. Licence: BlackFridayFont, EUR2
       per-project commercial. Weight is set to 400 explicitly everywhere the
       face is used - leave it to the browser and it fakes a bold, which
       smears the brush strokes. */
    @font-face {
      font-family: "Driftline";
      src: url("fonts/Driftline.ttf") format("truetype");
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
    body {
      font-family: var(--body);
      background: var(--ml-black);
      color: var(--ml-white);
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

    .container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }

    /* ============================================================
       BUTTONS / CTA SYSTEM
       ============================================================ */
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 10px;
      padding: 16px 28px; border-radius: 999px;
      font-family: var(--display); font-size: 18px; letter-spacing: 1.5px;
      text-transform: uppercase; transition: transform .2s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
      white-space: nowrap;
    }
    .btn--primary { background: var(--ml-pink); color: var(--ml-ink, #0E0E10); box-shadow: var(--shadow-pink); }
    .btn--primary:hover { transform: translateY(-2px) scale(1.02); background: var(--ml-pink-bright); }
    .btn--secondary { background: transparent; color: var(--ml-white); border: 2px solid var(--ml-white); }
    .btn--secondary:hover { background: var(--ml-white); color: var(--ml-black); transform: translateY(-2px); }
    .btn--blue { background: var(--ml-blue); color: var(--ml-black); box-shadow: var(--shadow-blue); }
    .btn--blue:hover { transform: translateY(-2px) scale(1.02); background: #4DEEFF; }
    .btn--ghost { background: rgba(255,255,255,0.06); border: 1px solid var(--ml-border); color: var(--ml-white); padding: 12px 22px; font-size: 15px; }
    .btn--ghost:hover { background: rgba(255,255,255,0.12); }
    .btn--sm { padding: 12px 20px; font-size: 14px; }

    /* ============================================================
       HEADER
       ============================================================ */
    .site-header {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      transition: background .3s ease, backdrop-filter .3s ease, border-color .3s ease;
      border-bottom: 1px solid transparent;
    }
    .site-header.scrolled {
      /* background is fine on the header; backdrop-filter is NOT - it makes
         the header the containing block for the fixed .mobile-menu inside
         it. See the note at .site-header::before in ml-polish.css. */
      border-bottom-color: var(--ml-border);
    }
    .site-header.scrolled::before { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
    /* Compact mode (deeper scroll) · header shrinks, logo shrinks */
    .site-header .header-inner { transition: height .3s ease; }
    .site-header .logo img { transition: height .3s ease, filter .3s ease; }
    .site-header.compact .header-inner { height: 64px; }
    .site-header.compact .logo img { height: 44px; }

    /* Active section indicator (motion.js applies .is-active to in-view nav links) */
    .nav-main a.is-active { color: var(--ml-pink); opacity: 1; }
    .nav-main a.is-active::after { transform: scaleX(1); }
    .header-inner {
      display: flex; align-items: center; justify-content: space-between; gap: 24px;
      height: 80px; max-width: var(--max); margin: 0 auto; padding: 0 24px;
    }
    .logo { display: flex; align-items: center; gap: 10px; }
    .logo img { height: 56px; width: auto; filter: drop-shadow(0 4px 14px rgba(0,0,0,0.28)); }
    .nav-main { display: flex; gap: 6px; }
    .nav-main a {
      padding: 10px 14px; font-family: var(--display); font-size: 16px; letter-spacing: 1.4px;
      text-transform: uppercase; opacity: .9; transition: color .2s ease, opacity .2s ease;
      position: relative;
    }
    .nav-main a:hover { color: var(--ml-pink); opacity: 1; }

    /* "Build & Win" nav pill · cycles through brand colours with a
       subtle heartbeat scale to attract the eye. */
    .nav-main .nav-build-cta,
    .mobile-menu .nav-build-cta {
      font-family: var(--display);
      text-transform: uppercase; letter-spacing: .12em;
      font-size: 11px; line-height: 1;
      padding: 7px 12px; border-radius: 999px;
      display: inline-flex; align-items: center; gap: 5px;
      margin-left: 8px;
      background: #FF8CE0; color: var(--ml-ink, #0E0E10) !important; opacity: 1 !important;
      box-shadow: 0 6px 18px rgba(0,0,0,0.38);
      animation: navBuildCycle 6s ease-in-out infinite;
      will-change: background-color, color, transform, box-shadow;
    }
    @keyframes navBuildCycle {
      0%, 45% {
        background: #FF8CE0; color: var(--ml-ink, #0E0E10);
        box-shadow: 0 6px 22px rgba(0,0,0,0.45);
      }
      22% { transform: scale(1.06); }
      50%, 95% {
        background: #5BD0E6; color: #000;
        box-shadow: 0 6px 22px rgba(0,0,0,0.41);
      }
      72% { transform: scale(1.06); }
      100% {
        background: #FF8CE0; color: var(--ml-ink, #0E0E10);
        box-shadow: 0 6px 22px rgba(0,0,0,0.45);
      }
    }
    .nav-main .nav-build-cta:hover,
    .mobile-menu .nav-build-cta:hover {
      animation-play-state: paused;
      transform: translateY(-2px) scale(1.06);
      filter: brightness(1.08);
    }
    .nav-main .nav-build-cta::after { display: none !important; }
    .mobile-menu .nav-build-cta { margin: 8px 0 0 0; align-self: flex-start; }
    @media (max-width: 880px) {
      .nav-main .nav-build-cta { display: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      .nav-main .nav-build-cta,
      .mobile-menu .nav-build-cta { animation: none; }
    }
    .nav-main a::after {
      content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
      background: var(--ml-pink); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
    }
    .nav-main a:hover::after { transform: scaleX(1); }
    /* Menu dropdown (Food / Drinks) */
    .nav-dropdown { position: relative; }
    .nav-dropdown__trigger {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 10px 14px; background: none; border: 0; cursor: pointer;
      font-family: var(--display); font-size: 16px; letter-spacing: 1.4px;
      text-transform: uppercase; color: var(--ml-white); opacity: .9;
      transition: color .2s ease, opacity .2s ease;
      position: relative;
    }
    .nav-dropdown__trigger:hover, .nav-dropdown__trigger.is-active { color: var(--ml-pink); opacity: 1; }

    /* The More dropdown swallows Catering / Gift Cards / Franchising / About /
       Contact. When the page you are ON is one of those, the active state has
       to live on the trigger, or the header stops telling you where you are. */
    .nav-dropdown.is-current > .nav-dropdown__trigger { color: var(--ml-pink); opacity: 1; }
    .nav-dropdown__trigger::after {
      content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
      background: var(--ml-pink); transform: scaleX(0); transform-origin: left;
      transition: transform .25s ease;
    }
    .nav-dropdown__trigger:hover::after, .nav-dropdown__trigger.is-active::after { transform: scaleX(1); }
    .nav-dropdown__caret { width: 10px; height: 7px; transition: transform .2s ease; flex-shrink: 0; }
    .nav-dropdown:hover .nav-dropdown__caret,
    .nav-dropdown__trigger[aria-expanded="true"] .nav-dropdown__caret { transform: rotate(180deg); }
    .nav-dropdown__panel {
      position: absolute; top: 100%; left: 0; min-width: 200px;
      background: linear-gradient(180deg, #0E0E10 0%, #050505 100%);
      border: 1px solid var(--ml-border); border-radius: var(--radius);
      padding: 8px; margin-top: 6px;
      display: flex; flex-direction: column;
      opacity: 0; visibility: hidden; transform: translateY(-6px);
      transition: opacity .18s ease, transform .18s ease, visibility .18s;
      box-shadow: 0 18px 44px rgba(0,0,0,.6);
      z-index: 10;
    }
    .nav-dropdown:hover .nav-dropdown__panel,
    .nav-dropdown:focus-within .nav-dropdown__panel,
    .nav-dropdown.is-open .nav-dropdown__panel {
      opacity: 1; visibility: visible; transform: translateY(0);
    }
    .nav-dropdown__panel a {
      display: block; padding: 10px 14px; border-radius: 8px;
      font-family: var(--display); font-size: 14px; letter-spacing: 1.2px;
      text-transform: uppercase; color: var(--ml-white); text-decoration: none;
      transition: background .15s ease, color .15s ease;
    }
    .nav-dropdown__panel a:hover, .nav-dropdown__panel a.is-active {
      background: rgba(255,140,224,.12); color: var(--ml-pink);
    }
    .nav-dropdown__panel a::after { display: none; }

    /* Mobile: keep Menu visible with Food/Drinks nested below it */
    .mobile-menu .nav-dropdown { display: block; }
    .mobile-menu .nav-dropdown__trigger {
      display: block; width: 100%; text-align: left;
      padding: 16px 8px; background: none; border: 0;
      font-family: var(--display); font-size: 26px; letter-spacing: 1.5px;
      text-transform: uppercase; color: var(--ml-white);
      border-bottom: 1px solid var(--ml-border); cursor: default;
    }
    .mobile-menu .nav-dropdown__trigger::after { display: none; }
    .mobile-menu .nav-dropdown__caret { display: none; }
    .mobile-menu .nav-dropdown__panel {
      position: static; background: none; border: 0; padding: 0; margin: 0;
      display: flex; flex-direction: column; gap: 0;
      opacity: 1; visibility: visible; transform: none; box-shadow: none;
    }
    .mobile-menu .nav-dropdown__panel a {
      padding: 14px 24px; font-size: 22px;
      border-bottom: 1px solid var(--ml-border); border-radius: 0;
      color: rgba(255,255,255,.85);
    }
    .mobile-menu .nav-dropdown__panel a:hover, .mobile-menu .nav-dropdown__panel a.is-active {
      background: transparent; color: var(--ml-pink);
    }

    .header-ctas { display: flex; align-items: center; gap: 10px; }

    .menu-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; padding: 0; background: rgba(255,255,255,0.06); border: 1px solid var(--ml-border); border-radius: 10px; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.menu-toggle:hover, .menu-toggle.open { background: rgba(255,140,224,0.12); border-color: var(--ml-pink); }
    .menu-toggle span { width: 24px; height: 2px; background: var(--ml-white); transition: transform .25s ease, opacity .2s ease; }
    .menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .menu-toggle.open span:nth-child(2) { opacity: 0; }
    .menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .mobile-menu {
      position: fixed; inset: 80px 0 0 0; z-index: 95;
      background: var(--ml-black);
      padding: 24px 22px 40px; display: none; flex-direction: column; gap: 4px;
      border-top: 1px solid var(--ml-border);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .mobile-menu.open { display: flex; animation: fadeSlide .3s ease; }
    .mobile-menu a {
      padding: 16px 8px; font-family: var(--display); font-size: 26px; letter-spacing: 1.5px;
      text-transform: uppercase; border-bottom: 1px solid var(--ml-border);
    }
    .mobile-menu .mobile-ctas { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
    @keyframes fadeSlide { from { opacity: 0; transform: translateY(-10px);} to { opacity: 1; transform: none;} }

    /* ============================================================
       HERO
       ============================================================ */
    .hero {
      position: relative; min-height: 100vh; display: flex; align-items: center;
      padding: 120px 0 80px; overflow: hidden;
      background:
        radial-gradient(1200px 600px at 80% 20%, rgba(255,140,224,0.18), transparent 60%),
        radial-gradient(900px 500px at 10% 90%, rgba(91,208,230,0.14), transparent 60%),
        linear-gradient(180deg, #050505 0%, #0E0E10 100%);
    }
    /* ============================================================
       Atmospheric photo bands · subtle full-bleed venue energy
       between sections. Heavily darkened so they live as texture,
       not feature imagery.
       ============================================================ */


    /* Hero video underlay · full-bleed brand promo behind the headline.
       Heavily darkened on the left where text sits; lets through on the
       right where the burger floats. Falls back to a still poster if the
       video can't autoplay or the user prefers reduced motion. */
    .hero .hero-atmo {
      position: absolute; inset: 0; z-index: 0;
      overflow: hidden; pointer-events: none;
      background: #050505;
    }
    .hero .hero-atmo video {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      opacity: .85;
    }
    .hero .hero-atmo::after {
      content: ''; position: absolute; inset: 0;
      background:
        radial-gradient(900px 600px at 85% 25%, rgba(255,140,224,0.18), transparent 60%),
        linear-gradient(90deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0.28) 100%),
        linear-gradient(180deg, rgba(0,0,0,0.30) 0%, transparent 30%, rgba(14,14,16,0.85) 100%);
      pointer-events: none;
    }
    @media (max-width: 1024px) {
      /* On narrow screens the headline wraps below · even out the overlay. */
      .hero .hero-atmo::after {
        background:
          radial-gradient(800px 500px at 80% 20%, rgba(255,140,224,0.18), transparent 60%),
          linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.45) 50%, rgba(14,14,16,0.92) 100%);
      }
    }
    @media (prefers-reduced-motion: reduce) {
      /* Don't autoplay video for motion-sensitive users · show poster instead */
      .hero .hero-atmo video { display: none; }
      .hero .hero-atmo {
        background: url('images/atmosphere/dj-fire.jpg') center/cover no-repeat;
      }
    }
    .hero::before, .hero::after {
      content: ''; position: absolute; pointer-events: none; opacity: .6;
    }
    .hero::before {
      top: 14%; left: -60px; width: 240px; height: 240px;
      background: radial-gradient(closest-side, var(--ml-pink), transparent);
      filter: blur(40px); animation: float 8s ease-in-out infinite;
    }
    .hero::after {
      bottom: 8%; right: -80px; width: 320px; height: 320px;
      background: radial-gradient(closest-side, var(--ml-blue), transparent);
      filter: blur(50px); animation: float 10s ease-in-out infinite reverse;
    }
    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-30px)} }

    .hero-grid {
      display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center;
      max-width: var(--max); margin: 0 auto; padding: 0 24px; width: 100%; position: relative; z-index: 2;
    }
    /* Single-column hero variant · when there's no right-side art slot */
    .hero-grid--single { grid-template-columns: 1fr; }
    .hero-grid--single > div { max-width: 820px; }
    /* A grid item defaults to min-width:auto, which means it can NEVER be
       narrower than its own min-content. The rotator line "Loud. Loaded.
       Legendary." is white-space:nowrap in a 56px script face - 516px of
       min-content - so on a 390px phone this column stayed 530px wide and
       the headline, the lead and both buttons were cut off at the right
       edge, hidden by the section's overflow. */
    .hero-grid > * { min-width: 0; }
    .hero-eyebrow {
      display: inline-flex; align-items: center; gap: 14px;
      /* scales with the viewport: at 56px the longest tagline is 516px of
         unbreakable script, which does not fit a phone */
      font-family: var(--script); color: var(--ml-pink);
      font-size: clamp(30px, 9vw, 56px);
      letter-spacing: 0; line-height: 1; font-weight: 400;
      margin-bottom: 8px; transform: rotate(-3deg);
    }
    .hero-eyebrow::before { content: ''; width: 0; height: 0; }
    .hero h1 {
      font-family: var(--display); text-transform: uppercase;
      font-size: clamp(56px, 9vw, 140px); line-height: 0.88; letter-spacing: -1px;
      margin-bottom: 24px;
    }
    /* Per-character animated reveal (motion.js wraps each letter in <span class="char">) */
    .hero h1.split-chars { overflow: hidden; }
    .hero h1.split-chars .char {
      display: inline-block;
      transform: translateY(110%);
      opacity: 0;
      will-change: transform, opacity;
      animation: heroChar 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    }
    @keyframes heroChar {
      to { transform: translateY(0); opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
      .hero h1.split-chars .char {
        transform: none; opacity: 1; animation: none;
      }
    }
    .hero h1 .pink { color: var(--ml-pink); }
    .hero h1 .stroke { color: var(--ml-white); }
    .hero h1 .blue { color: var(--ml-blue); font-family: var(--tag); font-size: .55em; display: inline-block; transform: rotate(-4deg); }
    .hero p.lead {
      font-size: 19px; max-width: 520px; color: var(--ml-text); margin-bottom: 36px; font-weight: 500;
    }
    .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }

    .hero-art {
      position: relative; aspect-ratio: 1/1; max-width: 620px; margin-left: auto;
    }
    /* Legacy single burger image · kept as fallback */
    .hero-art .burger-img {
      width: 100%; height: 100%; object-fit: contain;
      filter: drop-shadow(0 60px 80px rgba(0,0,0,.6));
      animation: bob 6s ease-in-out infinite;
    }
    @keyframes bob { 0%,100%{transform: translateY(0) rotate(-2deg)} 50%{transform:translateY(-14px) rotate(2deg)} }
    /* Legacy yellow stamp · kept as fallback */
    .hero-stamp {
      position: absolute; right: 14px; top: 0; width: 160px; height: 160px;
      background: var(--ml-yellow); color: var(--ml-black); border-radius: 50%;
      display: flex; align-items: center; justify-content: center; text-align: center;
      font-family: var(--display); text-transform: uppercase; font-size: 18px; line-height: 1;
      transform: rotate(12deg); padding: 14px;
      box-shadow: 0 0 0 4px #fff, 0 8px 18px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.3);
      animation: spin 16s linear infinite;
    }
    @keyframes spin { to { transform: rotate(372deg); } }


    .hero-tickers {
      position: absolute; bottom: 0; left: 0; right: 0;
      border-top: 1px solid var(--ml-border); border-bottom: 1px solid var(--ml-border);
      background: rgba(0,0,0,0.4); overflow: hidden; padding: 14px 0;
    }
    .ticker-track { display: flex; gap: 60px; white-space: nowrap; animation: ticker 30s linear infinite; }
    .ticker-track span {
      font-family: var(--display); text-transform: uppercase; font-size: 22px; letter-spacing: 3px;
      color: var(--ml-white);
    }
    .ticker-track span.alt { color: var(--ml-pink); }
    @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

    /* ============================================================
       SECTION SHELL
       ============================================================ */
    section { padding: 120px 0; position: relative; }
    .section-head { text-align: center; max-width: 820px; margin: 0 auto 64px; }
    /* B10 · Brand Kit §4a · the script eyebrow is coloured by the
       rotation in tools/brand/apply-head-rotation.py and never matches
       the display head below it. Pink is the fallback only. */
    .section-eyebrow.pink  { color: var(--ml-pink); }
    .section-eyebrow.blue  { color: var(--ml-blue); }
    .section-eyebrow.white { color: var(--ml-white); }
    .section-eyebrow {
      font-family: var(--script); color: var(--ml-pink); letter-spacing: 0;
      font-size: 36px; line-height: 1; font-weight: 400;
      display: inline-block; margin-bottom: 6px; transform: rotate(-2deg);
    }
    .section-title {
      font-family: var(--display); text-transform: uppercase;
      font-size: clamp(42px, 6vw, 84px); line-height: 0.95; letter-spacing: -.5px;
    }
    .section-title .pink { color: var(--ml-pink); }
    .section-title .blue { color: var(--ml-blue); }
    .section-title .stroke { color: var(--ml-white); }
    .section-sub { color: var(--ml-text); margin-top: 16px; font-size: 17px; font-weight: 500; }

    /* ============================================================
       FEATURED MENU CAROUSEL
       ============================================================ */
    .menu-section { background: var(--ml-ink); }

    /* Drinks section · neon brick wall backdrop, matching the rest of the brand sections.
       Pink/blue glows on top, dark fade so the carousel cards stay readable. */
    .menu-section#drinks {
      background:
        radial-gradient(900px 500px at 90% 0%, rgba(255,140,224,0.22), transparent 60%),
        radial-gradient(700px 500px at 10% 100%, rgba(91,208,230,0.18), transparent 60%),
        linear-gradient(180deg, rgba(14,14,16,0.82) 0%, rgba(14,14,16,0.92) 100%),
        url('images/atmosphere/neon-brick.jpg') center/cover no-repeat fixed,
        var(--ml-ink);
    }
    @media (max-width: 760px) {
      .menu-section#drinks { background-attachment: scroll, scroll, scroll, scroll, scroll; }
    }
    .menu-carousel {
      display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min(300px, 100%), 320px);
      gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
      padding: 8px 24px 32px; margin: 0 -24px;
      scrollbar-width: thin; scrollbar-color: var(--ml-pink) transparent;
    }
    .menu-carousel::-webkit-scrollbar { height: 8px; }
    .menu-carousel::-webkit-scrollbar-thumb { background: var(--ml-pink); border-radius: 999px; }
    .menu-carousel::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); }

    .product-card {
      scroll-snap-align: start;
      background: linear-gradient(180deg, #1A1A1D 0%, #101012 100%);
      border: 1px solid var(--ml-border);
      border-radius: var(--radius-lg);
      padding: 24px 24px 28px;
      display: flex; flex-direction: column; gap: 16px;
      transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
      position: relative;
      /* overflow visible so corner stickers (Crowd Fave, etc.) can peek over the edge · image clipping moved to .img-wrap below */
      overflow: visible;
    }
    /* B5 · the pink-to-blue gradient hover is deleted. The Brand Kit
       bans blending the two, and the wash was rendering the card body
       copy unreadable (D1). The hover is now the neon perimeter glow
       lifting 35 per cent, which is the locked card behaviour (§10). */
    .product-card {
      --card-accent: 255,140,224;
      --card-glow: .28;
      box-shadow:
        0 0 0 1px rgba(var(--card-accent), calc(var(--card-glow) * .55));
    }
    .product-card.card-blue { --card-accent: 91,208,230; }
    /* exactly 35% more: .28 x 1.35 = .378 */
    .product-card:hover,
    .product-card:focus-within { --card-glow: .378; transform: translateY(-6px); }

    .product-card .img-wrap {
      aspect-ratio: 1/1;
      background: transparent;
      display: flex; align-items: center; justify-content: center; border-radius: var(--radius);
      /* Clip the image's hover scale + rotate inside the wrap so the card itself can stay overflow:visible */
      overflow: hidden;
    }
    .product-card .img-wrap img {
      width: 100%; height: 100%; object-fit: contain;
      /* Soft shadow only · kept subtle so it never reads as a dark box against the pink hover gradient */
      filter: drop-shadow(0 14px 22px rgba(0,0,0,0.35));
      transition: transform .35s ease, filter .3s ease;
    }
    .product-card:hover .img-wrap img {
      transform: scale(1.06) rotate(-3deg);
      /* On hover the card glows pink/blue, so swap the shadow to a coloured one that blends in */
      filter: drop-shadow(0 14px 26px rgba(0,0,0,0.28));
    }
    /* Branded fallback when a category doesn't have a hero image yet.
       Drop a real image into images/cocktails/<slug>.png and replace
       <div class="img-wrap placeholder" data-label="..."></div>
       with <div class="img-wrap"><img src="..."/></div>. */
    .product-card .img-wrap.placeholder {
      position: relative; overflow: hidden;
      background:
        linear-gradient(135deg, rgba(255,140,224,0.85), rgba(255,140,224,0.45)),
        url("images/brand/texture-graffiti.webp") center/420px repeat,
        #131316;
      background-blend-mode: multiply, normal, normal;
    }
    .product-card .img-wrap.placeholder::after {
      content: attr(data-label); position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--display); text-transform: uppercase;
      font-size: clamp(28px, 4vw, 44px); color: #fff; letter-spacing: 1.5px;
    }
    .product-card .tag {
      font-family: var(--script); color: var(--ml-pink);
      font-size: 30px; letter-spacing: 0; line-height: 1;
      transform: rotate(-2deg); display: inline-block; font-weight: 400;
      }
    .product-card h3 {
      font-family: var(--display); font-size: 32px; text-transform: uppercase; line-height: 1;
    }
    .product-card p { color: var(--ml-text); font-size: 15px; font-weight: 500; }
    .product-card .card-cta {
      margin-top: auto;
      display: inline-flex; align-items: center; gap: 8px;
      font-family: var(--display); text-transform: uppercase; letter-spacing: 1.5px;
      color: var(--ml-white); padding-top: 8px;
    }
    .product-card .card-cta .arrow { transition: transform .25s ease; }
    .product-card:hover .card-cta .arrow { transform: translateX(6px); }

    /* ============================================================
       WORLD OF MILKY LANE GRID
       ============================================================ */
    .world-section {
      background:
        radial-gradient(800px 500px at 50% 0%, rgba(255,140,224,0.12), transparent 60%),
        var(--ml-black);
    }
    .world-grid {
      display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px;
    }
    .tile {
      position: relative; border-radius: var(--radius-lg); overflow: hidden;
      min-height: 280px; isolation: isolate;
      background: #1a1a1d;
      transition: transform .35s ease, box-shadow .35s ease;
    }
    .tile:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,.5); }
    .tile img {
      position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
      transition: transform .8s ease, filter .35s ease;
      z-index: 0;
    }
    .tile:hover img { transform: scale(1.06); }
    .tile::before {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.85) 100%);
      z-index: 1;
    }
    .tile-content {
      position: relative; z-index: 2; padding: 24px;
      height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
    }
    .tile-eyebrow { font-family: var(--tag); color: var(--ml-blue); letter-spacing: 0; font-size: 22px; line-height: 1; transform: rotate(-2deg); display: inline-block; }
    .tile h3 {
      font-family: var(--display); text-transform: uppercase;
      font-size: clamp(24px, 2.4vw, 36px); line-height: 1;
    }
    .tile .tile-cta {
      font-family: var(--display); letter-spacing: 1.5px; text-transform: uppercase;
      font-size: 14px; color: var(--ml-pink); display: inline-flex; gap: 6px; align-items: center;
    }
    /* tile sizing */
    .tile.t-lg { grid-column: span 6; min-height: 420px; }
    .tile.t-md { grid-column: span 4; min-height: 320px; }
    .tile.t-sm { grid-column: span 3; min-height: 280px; }
    .tile.t-wide { grid-column: span 8; }
    .tile.t-tall { grid-column: span 4; min-height: 420px; }

    .world-cta-row { text-align: center; margin-top: 48px; }

    /* Sticker stamps moved to ml-polish.css on 26 Aug 2026. This file and
   menu-styles.css each carried a full copy of the component, on disjoint
   sets of pages, so a fix to one silently missed the other - which is how
   the five-drip version survived here after being changed elsewhere.
   ml-polish.css is loaded by every page that uses a sticker. */


    /* Presses on when the card is hovered */


    /* ============================================================
       FILM GRAIN · sitewide texture overlay (1.5% feel)
       ============================================================ */
    .film-grain {
      position: fixed; inset: 0; pointer-events: none;
      z-index: 9000;
      opacity: 0.06;
      mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 240px 240px;
    }
    @media (prefers-reduced-motion: reduce) { .film-grain { opacity: 0.04; } }

    /* ============================================================
       MARQUEE STRIPS · scrolling brand ribbons between sections
       ============================================================ */
    .marquee {
      position: relative; overflow: hidden;
      padding: 22px 0;
      border-top: 1px solid rgba(255,255,255,0.06);
      border-bottom: 1px solid rgba(255,255,255,0.06);
      background: var(--ml-black);
    }
    .marquee--pink {
      background: var(--ml-pink); border-color: rgba(0,0,0,0.15);
    }
    .marquee--blue {
      background: var(--ml-blue); border-color: rgba(0,0,0,0.15);
    }
    .marquee__track {
      display: flex; flex-wrap: nowrap; align-items: center;
      width: max-content;
      animation: marqueeScroll 40s linear infinite;
      font-family: var(--display); text-transform: uppercase;
      font-size: clamp(22px, 3vw, 38px);
      letter-spacing: .04em; line-height: 1;
      color: var(--ml-white);
      will-change: transform;
    }
    .marquee--pink .marquee__track { color: var(--ml-ink); }
    .marquee--blue .marquee__track { color: var(--ml-black); }
    .marquee__track > span {
      display: inline-flex; align-items: center;
      padding: 0 32px;
      white-space: nowrap;
    }
    /* Marquee separator · a real middot. The items run together without
       something between them, so this is a separator doing a job rather
       than decoration - which is why it survived the 30 Aug sweep that
       took the spray glyph off everything else. A middot is also what
       the Brand Kit already calls for at body-text midpoints. */
    .marquee__track > span::before {
      content: '\00b7'; margin-right: 32px; margin-left: 4px; opacity: .55;
    }
    .marquee:hover .marquee__track { animation-play-state: paused; }
    @keyframes marqueeScroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    @media (prefers-reduced-motion: reduce) {
      .marquee__track { animation: none; }
    }


    /* ============================================================
       MONTHLY SPECIALS · homepage drop grid
       Same visual treatment as week-cards: image as background,
       dark gradient overlay, text overlay at bottom, hover lift.
       Hero card spans 2 cols (3-col layout, 5 cards total).
       ============================================================ */
    .monthly-section {
      background:
        radial-gradient(900px 500px at 20% 0%, rgba(255,140,224,0.18), transparent 60%),
        radial-gradient(700px 400px at 90% 100%, rgba(91,208,230,0.10), transparent 60%),
        var(--ml-black);
    }
    .monthly-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
    }
    .monthly-card {
      position: relative; border-radius: var(--radius-lg); overflow: hidden;
      min-height: 320px; isolation: isolate;
      display: flex; align-items: flex-end;
      background: linear-gradient(180deg, #1A1A1D 0%, #0a0a0c 100%);
      text-decoration: none; color: inherit;

      /* Neon perimeter glow · Brand Kit §10 */
      --card-accent: 255,140,224;
      --card-glow: .28;
      box-shadow:
        0 0 0 1px rgba(var(--card-accent), calc(var(--card-glow) * .55));
      transition: box-shadow .22s ease, transform .35s ease;
    }
    .monthly-card.card-blue { --card-accent: 91,208,230; }
    .monthly-card.span-2 { grid-column: span 2; min-height: 420px; }
    /* exactly 35% more: .28 x 1.35 = .378 · focus-within matches for keyboard */
    .monthly-card:hover,
    .monthly-card:focus-within {
      --card-glow: .378;
      transform: translateY(-6px);
    }
    /* Tell 4 · full colour at rest. Desaturated-until-hover is a
       generated-UI reflex and it is backwards commercially – the
       photography is the thing that sells. Hover is the glow lift. */
    .monthly-card .bg {
      position: absolute; inset: 0; width: 100%; height: 100%;
      object-fit: cover;
      opacity: .85; mix-blend-mode: normal;
      transition: transform .8s ease;
      z-index: 0;
    }
    .monthly-card:hover .bg { transform: scale(1.06); }
    /* Pink corner glow + dark bottom gradient so text reads cleanly */
    .monthly-card::before {
      content: ''; position: absolute; inset: 0; z-index: 1;
      background:
        radial-gradient(closest-side at 80% 10%, rgba(255,140,224,0.30), transparent 60%),
        linear-gradient(180deg, transparent 30%, rgba(0,0,0,.94) 100%);
      pointer-events: none;
    }
    .monthly-card .content {
      position: relative; z-index: 2;
      padding: 22px 24px 26px;
      display: flex; flex-direction: column; gap: 6px; width: 100%;
    }
    .monthly-card.span-2 .content { padding: 28px 32px 32px; gap: 8px; }
    .monthly-card .tag {
      display: inline-block; align-self: flex-start;
      font-family: var(--display); letter-spacing: .12em; font-size: 11px;
      background: var(--ml-pink); color: var(--ml-ink, #0E0E10);
      padding: 5px 10px; border-radius: 999px;
      margin-bottom: 4px;
    }
    .monthly-card h3 {
      font-family: var(--display); text-transform: uppercase;
      font-size: clamp(22px, 2vw, 30px); line-height: .9; letter-spacing: 0.5px;
      color: var(--ml-white);
    }
    .monthly-card.span-2 h3 { font-size: clamp(34px, 4vw, 52px); line-height: 0.95; }
    .monthly-card h3 .pink { color: var(--ml-pink); }
    .monthly-card .meta {
      font-family: var(--script); color: var(--ml-blue); font-size: 20px;
      transform: rotate(-2deg); display: inline-block;
      margin: 2px 0 4px; font-weight: 400;
      }
    .monthly-card.span-2 .meta { font-size: 24px; }
    .monthly-card p {
      color: rgba(255,255,255,0.85);
      font-size: 13px; line-height: 1.45;
      margin-top: 2px;
    }
    .monthly-card.span-2 p { font-size: 14px; line-height: 1.5; }
    .monthly-card .card-cta {
      font-family: var(--display); letter-spacing: 1.5px; text-transform: uppercase;
      font-size: 13px; color: var(--ml-pink);
      display: inline-flex; gap: 6px; align-items: center;
      margin-top: 10px;
      padding: 5px 12px; border-radius: 999px;
      background: rgba(0,0,0,0.6); backdrop-filter: blur(6px);
      align-self: flex-start;
      border: 1px solid rgba(255,140,224,0.35);
    }

    /* ============================================================
       MAY SPECIALS · PAPA MACROS
       ============================================================ */
    .may-section {
      background:
        radial-gradient(900px 500px at 50% 0%, rgba(255,140,224,0.18), transparent 60%),
        radial-gradient(700px 400px at 90% 90%, rgba(91,208,230,0.14), transparent 60%),
        var(--ml-black);
    }
    .may-grid {
      display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px;
    }
    .may-card {
      grid-column: span 2;
      position: relative; border-radius: var(--radius-lg); overflow: hidden;
      background: #131316; border: 1px solid var(--ml-border);
      display: flex; flex-direction: column; min-height: 360px;
      transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
    }
    .may-card:hover { transform: translateY(-6px); border-color: var(--ml-pink); box-shadow: var(--shadow-pink); }
    .may-card.may-feature { grid-column: span 3; min-height: 520px; }
    .may-card.may-feature + .may-card { grid-column: span 3; }

    .may-card img {
      width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
      transition: transform .6s ease;
    }
    .may-card:hover img { transform: scale(1.04); }

    .may-meta {
      position: absolute; top: 14px; left: 14px; right: 14px;
      display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
      pointer-events: none;
    }
    .may-badge {
      background: var(--ml-pink); color: var(--ml-ink, #0E0E10);
      font-family: var(--display); text-transform: uppercase; letter-spacing: 1.5px; font-size: 13px;
      padding: 8px 14px; border-radius: 999px; box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    }
    .may-badge.may-blue { background: var(--ml-blue); color: var(--ml-black); box-shadow: 0 8px 20px rgba(0,0,0,0.28); }
    .may-price {
      background: var(--ml-yellow); color: var(--ml-black);
      font-family: var(--script); font-size: 22px; line-height: 1;
      padding: 12px 14px; border-radius: 999px;
      transform: rotate(8deg);
      box-shadow: 0 8px 20px rgba(0,0,0,0.28); font-weight: 400;
      }
    .may-body {
      padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1;
    }
    .may-body h3 {
      font-family: var(--display); text-transform: uppercase;
      font-size: clamp(24px, 1.8vw, 30px); line-height: 1; letter-spacing: 0.5px;
    }
    .may-body p { color: var(--ml-text); font-size: 14px; flex: 1; }
    .may-cta {
      font-family: var(--display); letter-spacing: 1.5px; text-transform: uppercase;
      font-size: 14px; color: var(--ml-pink);
    }
    .may-card:hover .may-cta { color: var(--ml-blue); }

    /* ============================================================
       BUILD YOUR OWN · homepage promo section
       ============================================================ */
    .build-promo {
      position: relative; isolation: isolate; overflow: hidden;
      background: var(--ml-black);
      padding: 80px 0;
    }
    .build-promo__bg {
      position: absolute; inset: 0; z-index: 0;
      background:
        radial-gradient(900px 500px at 80% 20%, rgba(255,140,224,0.30), transparent 60%),
        radial-gradient(700px 500px at 10% 80%, rgba(91,208,230,0.22), transparent 60%),
        linear-gradient(180deg, rgba(14,14,16,0.78) 0%, rgba(14,14,16,0.90) 100%),
        url('images/atmosphere/neon-brick.jpg') center/cover no-repeat,
        url('images/brand/ml-graffiti-pattern.jpg') center/600px repeat,
        var(--ml-black);
      pointer-events: none;
    }
    .build-promo__inner {
      position: relative; z-index: 2;
      display: grid; grid-template-columns: 1.2fr 1fr;
      gap: 60px; align-items: center;
    }

    .build-promo__eyebrow {
      font-family: var(--script); color: var(--ml-pink);
      font-size: 28px; transform: rotate(-2deg);
      display: inline-block; margin-bottom: 4px; font-weight: 400;
      }
    .build-promo__title {
      font-family: var(--display); text-transform: uppercase;
      font-size: clamp(48px, 7vw, 88px); line-height: 0.92; letter-spacing: -1px;
      margin-bottom: 18px;
    }
    .build-promo__title .pink { color: var(--ml-pink); }
    .build-promo__lead {
      font-size: 17px; color: var(--ml-text);
      line-height: 1.55; max-width: 560px;
      margin-bottom: 26px; font-weight: 500;
    }

    /* Three-up prize bar */
    .build-promo__bar {
      display: inline-flex; align-items: stretch; gap: 14px;
      padding: 18px 22px;
      background: rgba(255,221,0,0.08);
      border: 1px solid rgba(255,221,0,0.35);
      border-radius: var(--radius-lg);
      backdrop-filter: blur(6px);
      margin-bottom: 26px;
    }
    .build-promo__bar-item {
      display: flex; flex-direction: column; align-items: center; gap: 4px;
      min-width: 110px;
    }
    .build-promo__bar-val {
      font-family: var(--display);
      font-size: clamp(34px, 4.5vw, 50px); line-height: 1;
      color: var(--ml-yellow); letter-spacing: -1px;
    }
    .build-promo__bar-val--blue { color: var(--ml-blue); }
    .build-promo__bar-lbl {
      font-family: var(--display); text-transform: uppercase;
      letter-spacing: .12em; font-size: 10px; color: rgba(255,255,255,0.85);
      text-align: center;
    }
    .build-promo__bar-plus {
      align-self: center;
      font-family: var(--display); font-size: 22px;
      color: var(--ml-text-dim); margin: 0 4px;
    }

    .build-promo__cta-row {
      display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    }
    .build-promo__cta {
      font-size: 15px; padding: 16px 28px;
      box-shadow: 0 18px 40px rgba(0,0,0,0.3);
    }
    .build-promo__cta:hover { transform: translateY(-3px); }
    .build-promo__deadline {
      font-family: 'Inter', sans-serif; font-size: 13px;
      color: var(--ml-text-dim);
    }

    /* Art side · "Recent winner" polaroid showcase, clickable */
    .build-promo__art {
      position: relative;
      width: 100%; max-width: 440px; margin-left: auto;
      display: flex; align-items: center; justify-content: center;
      text-decoration: none;
      animation: bpFloat 6.5s ease-in-out infinite;
      transform-origin: center;
    }
    @keyframes bpFloat {
      0%, 100% { transform: translateY(0) rotate(-2deg); }
      50%      { transform: translateY(-12px) rotate(1.5deg); }
    }

    /* White polaroid frame */
    .bp-polaroid {
      position: relative;
      width: 100%;
      background: linear-gradient(180deg, #fdfdfd 0%, #f1f1ef 100%);
      padding: 18px 18px 64px;       /* slightly chunkier bottom for the caption */
      border-radius: 4px;
      box-shadow:
        0 4px 0 rgba(255,255,255,0.6) inset, 0 22px 50px rgba(0,0,0,0.6);
      transform: rotate(-3deg);
      transition: transform .45s cubic-bezier(.2,.7,.2,1);
    }
    .build-promo__art:hover .bp-polaroid {
      transform: rotate(-1deg) translateY(-4px) scale(1.02);
    }
    /* Tape strip top-left */
    .bp-polaroid::before {
      content: ''; position: absolute;
      top: -10px; left: 18%;
      width: 88px; height: 22px;
      background: linear-gradient(180deg, rgba(255,255,255,0.65) 0%, rgba(220,220,220,0.55) 100%);
      box-shadow: 0 3px 8px rgba(0,0,0,0.25);
      transform: rotate(-4deg);
      z-index: 3;
    }

    /* The photo "window" of the polaroid */
    .bp-polaroid__photo {
      position: relative;
      width: 100%; aspect-ratio: 1/1;
      background:
        radial-gradient(circle at 50% 60%, rgba(0,0,0,0.10), transparent 70%),
        url('images/atmosphere/neon-brick.jpg') center / cover no-repeat;
      border-radius: 2px;
      overflow: hidden;
      isolation: isolate;
    }
    /* Brand wash over the brick so the burger pops */
    .bp-polaroid__photo::before {
      content: ''; position: absolute; inset: 0;
      background:
        radial-gradient(420px 320px at 50% 70%, rgba(255,140,224,0.32), transparent 70%),
        radial-gradient(380px 280px at 22% 22%, rgba(91,208,230,0.18), transparent 70%),
        linear-gradient(180deg, rgba(0,0,0,0.30) 0%, transparent 30%, rgba(0,0,0,0.40) 100%);
      z-index: 0;
    }

    /* Stacked burger · 7 layers, natural flow with aggressive negative margins so the
       whole stack fits inside the polaroid's 1:1 photo area. Each ingredient PNG has
       roughly 2:1 aspect, so at width 100% of the container each renders ~50% tall;
       margin-top ~-32% per layer brings the total stack height down to ~85% of the
       photo height · a clean fit with a small breathing margin above + below. */
    .bp-burger {
      position: absolute; left: 50%; bottom: 4%;
      width: 64%; transform: translateX(-50%);
      display: flex; flex-direction: column; align-items: stretch;
      z-index: 1;
      pointer-events: none;
    }
    .bp-burger img {
      display: block; width: 100%; height: auto;
      filter: drop-shadow(0 5px 10px rgba(0,0,0,0.45));
      position: relative;
    }
    /* Top bun sits at full size; every layer below pulls up with a negative top margin.
       Percentages here refer to container width (CSS spec) · same units across all layers. */
    .bp-burger .l-bun-top    { z-index: 10; }
    .bp-burger .l-tomato     { z-index: 9;  margin-top: -28%; }
    .bp-burger .l-lettuce    { z-index: 8;  margin-top: -30%; }
    .bp-burger .l-cheese-a   { z-index: 7;  margin-top: -32%; }
    .bp-burger .l-patty-a    { z-index: 6;  margin-top: -34%; }
    .bp-burger .l-bacon      { z-index: 5;  margin-top: -34%; }
    .bp-burger .l-bun-bottom { z-index: 0;  margin-top: -34%; }

    /* Soft elliptical shadow under the bottom bun for grounding */
    .bp-burger::after {
      content: ''; position: absolute;
      left: 6%; right: 6%; bottom: -14px;
      height: 18px;
      background: radial-gradient(ellipse at center, rgba(0,0,0,0.55), transparent 70%);
      filter: blur(8px);
      z-index: -1;
    }

    /* Caption below the photo */
    .bp-polaroid__caption {
      position: absolute;
      left: 0; right: 0; bottom: 14px;
      text-align: center;
      padding: 0 18px;
    }
    .bp-polaroid__name {
      display: block;
      font-family: var(--script);  /* Driftline · brand script */
      font-size: 32px; line-height: 1; color: #1a1a1a;
      letter-spacing: 0;
      transform: rotate(-2deg); font-weight: 400;
      }
    .bp-polaroid__author {
      display: block;
      font-family: 'Inter', sans-serif;
      font-size: 11px; font-weight: 700;
      color: #6a6a6a; letter-spacing: .12em; text-transform: uppercase;
      margin-top: 4px;
    }
    .bp-polaroid__author span { color: var(--ml-pink); }

    /* WINNER stamp top-right corner */
    .bp-polaroid__stamp {
      position: absolute;
      top: 30px; right: 12px;
      z-index: 4;
      width: 84px; height: 84px;
      background: var(--ml-pink);
      color: var(--ml-ink);
      border: 3px solid #fff;
      border-radius: 50%;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      font-family: var(--display); text-transform: uppercase;
      box-shadow: 0 0 0 4px #fff, 0 8px 18px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.3);
      transform: rotate(14deg);
      animation: bpStampPulse 2.4s ease-in-out infinite;
    }
    .bp-polaroid__stamp .big   { font-size: 16px; letter-spacing: .14em; line-height: 1; }
    .bp-polaroid__stamp .small { font-size: 9px; letter-spacing: .14em; margin-top: 4px; opacity: 0.9; }
    @keyframes bpStampPulse {
      0%, 100% { transform: rotate(14deg) scale(1);    box-shadow: 0 12px 28px rgba(0,0,0,0.3), 0 12px 28px rgba(0,0,0,0.28); }
      50%      { transform: rotate(12deg) scale(1.06); box-shadow: 0 16px 34px rgba(0,0,0,0.45), 0 16px 34px rgba(0,0,0,0.3); }
    }

    /* ENTER sticker (kept, repositioned) */
    .build-promo__sticker {
      position: absolute; bottom: 14px; left: 14px;
      width: 96px; height: 96px;
      border-radius: 50%;
      background: var(--ml-blue); color: var(--ml-black);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--display); text-transform: uppercase;
      font-size: 14px; letter-spacing: .14em;
      transform: rotate(-12deg);
      box-shadow: 0 0 0 4px #fff, 0 8px 18px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.3);
      animation: bpSpin 16s linear infinite;
      z-index: 5;
      border: 3px solid #fff;
    }
    @keyframes bpSpin { to { transform: rotate(348deg); } }

    @media (prefers-reduced-motion: reduce) {
      .build-promo__art,
      .bp-polaroid__stamp,
      .build-promo__sticker { animation: none !important; }
    }

    @media (max-width: 1024px) {
      .build-promo__inner { grid-template-columns: 1fr; gap: 40px; text-align: center; }
      .build-promo__lead { margin: 0 auto 26px; }
      .build-promo__bar { flex-wrap: wrap; gap: 10px; }
      .build-promo__bar-plus { display: none; }
      .build-promo__cta-row { align-items: center; }
      .build-promo__art { margin: 0 auto; max-width: 340px; }
    }
    @media (max-width: 540px) {
      .build-promo { padding: 60px 0; }
      .build-promo__bar { padding: 14px 16px; }
      .build-promo__bar-val { font-size: 30px; }
    }

    /* ============================================================
       SOCIAL PROOF · "The Loud Crowd"
       Latest 4 IG posts + rating + Find Us Online + press strip.
       ============================================================ */
    .crowd-section {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      background: var(--ml-ink);
    }
    /* Background photo layer (girl holding phone with our IG up).
       Gets dropped in once the image lands; layered with brand glows. */
    .crowd-bg {
      position: absolute; inset: 0; z-index: 0;
      background-image:
        radial-gradient(900px 500px at 10% 0%, rgba(91,208,230,0.18), transparent 60%),
        radial-gradient(700px 500px at 90% 100%, rgba(255,140,224,0.20), transparent 60%),
        linear-gradient(180deg, rgba(14,14,16,0.78) 0%, rgba(14,14,16,0.92) 100%),
        url('images/atmosphere/social-phone.jpg');
      background-position: center; background-size: cover, cover, cover, cover;
      background-repeat: no-repeat;
      pointer-events: none;
    }
    .crowd-section .container { position: relative; z-index: 2; }

    /* Centred crowd headline · graffiti-leaning, sized down for compactness */
    .crowd-section { padding: 70px 0 60px; }
    .crowd-head { margin-bottom: 28px; }
    .crowd-head .section-title {
      font-size: clamp(44px, 6.5vw, 88px);
      line-height: .9;
    }
    .crowd-section .crowd-rating { margin-bottom: 32px; padding: 18px 24px; }

    /* Live indicator above the post grid */
    .insta-live {
      display: inline-flex; align-items: center; gap: 10px;
      margin: 0 auto 16px; padding: 7px 16px;
      background: rgba(0,0,0,0.55);
      border: 1px solid rgba(255,140,224,0.45);
      border-radius: 999px;
      font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
      color: rgba(255,255,255,0.92); letter-spacing: 0.02em;
      backdrop-filter: blur(6px);
    }
    .insta-live__dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--ml-pink);
      box-shadow: 0 0 0 0 rgba(255,140,224,0.7);
      animation: pulseDot 1.6s ease-out infinite;
    }
    @keyframes pulseDot {
      0% { box-shadow: 0 0 0 0 rgba(255,140,224,0.7); }
      70% { box-shadow: 0 0 0 8px rgba(255,140,224,0); }
      100% { box-shadow: 0 0 0 0 rgba(255,140,224,0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .insta-live__dot { animation: none; }
    }
    .insta-live__handle {
      font-family: var(--display); text-transform: uppercase; letter-spacing: .06em;
      color: var(--ml-white); font-size: 13px;
    }
    .insta-live__sep { color: rgba(255,255,255,0.35); }
    .insta-live__label { font-weight: 500; color: rgba(255,255,255,0.7); }

    /* "Find Us Online" · slimmer */
    .find-us {
      margin: 32px 0 24px;
      padding: 28px 28px 24px;
      border-radius: var(--radius-lg);
      position: relative; overflow: hidden;
      background:
        radial-gradient(800px 400px at 0% 0%, rgba(255,140,224,0.18), transparent 60%),
        radial-gradient(700px 400px at 100% 100%, rgba(91,208,230,0.16), transparent 60%),
        linear-gradient(180deg, rgba(20,20,22,0.7), rgba(8,8,10,0.85));
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,0.08);
    }
    .find-us__header { text-align: center; max-width: 640px; margin: 0 auto 20px; }
    .find-us__eyebrow {
      font-family: var(--script); color: var(--ml-pink); font-size: 22px;
      transform: rotate(-2deg); display: inline-block; margin-bottom: 2px; font-weight: 400;
      }
    .find-us__title {
      font-family: var(--display); text-transform: uppercase;
      font-size: clamp(26px, 3.6vw, 44px); line-height: 0.95; letter-spacing: -0.3px;
    }
    .find-us__title .blue { color: var(--ml-blue); }
    .find-us__sub {
      color: var(--ml-text); font-size: 14px; margin-top: 8px; line-height: 1.5; font-weight: 500;
    }
    .crowd-rating {
      display: flex; align-items: center; gap: 24px;
      justify-content: center; flex-wrap: wrap;
      max-width: 720px; margin: 0 auto 56px;
      padding: 26px 36px;
      background: rgba(255,255,255,0.03);
      border: 1px solid var(--ml-border);
      border-radius: var(--radius-lg);
    }
    .crowd-rating .stars {
      color: var(--ml-yellow); font-size: 26px; letter-spacing: 4px;
    }
    .crowd-rating .rating-num {
      font-family: var(--display); font-size: 60px; line-height: 1;
      color: var(--ml-pink);
    }
    .crowd-rating .rating-label {
      color: var(--ml-text-dim); font-size: 14px;
      max-width: 320px; line-height: 1.45;
    }
    .crowd-rating .rating-label strong { color: var(--ml-white); font-weight: 700; }

    /* ---------- Latest 4 Instagram posts (compact width) ---------- */
    .insta-posts {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
      max-width: 860px; margin: 0 auto 16px;
    }
    .insta-tile {
      position: relative; aspect-ratio: 1/1;
      border-radius: var(--radius); overflow: hidden;
      background: #131316; display: block;
      transition: transform .35s ease, box-shadow .35s ease;
    }
    .insta-tile:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(0,0,0,0.28); }
    .insta-tile img {
      width: 100%; height: 100%; object-fit: cover;
      transition: transform .8s ease, filter .35s ease;
      filter: saturate(0.95);
    }
    .insta-tile:hover img { transform: scale(1.06); filter: saturate(1.1); }
    .insta-tile__overlay {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      gap: 10px;
      background: linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.85) 100%);
      opacity: 0;
      font-family: var(--display); text-transform: uppercase;
      letter-spacing: 1.5px; font-size: 14px; color: #fff;
      transition: opacity .3s ease;
      backdrop-filter: blur(0);
      pointer-events: none;
    }
    .insta-tile:hover .insta-tile__overlay { opacity: 1; }
    .insta-tile__icon { width: 22px; height: 22px; }

    .insta-feed-cta { text-align: center; margin: 0 0 24px; }
    .insta-feed-cta .btn { font-size: 13px; padding: 10px 18px; }

    /* ============================================================
       FOLLOW ROW  ·  .follow-card
       ------------------------------------------------------------
       Three portrait cards, one per platform. Christian, 30 Aug:
       "can you make each of these look a whole lot better. Make a
       transparent image (hero) in each or even a video for tik tok.
       Make them more like the portrait version."

       What was here: three landscape cards, each a flat saturated
       gradient slab with a count, a handle and a pill. No product,
       nothing of the brand in them, and the three gradients fought
       both each other and the dark page around them.

       What it is now, and why:

       · PORTRAIT. A social post is portrait. The card is 3:4 and
         the whole composition is built for that shape.

       · A REAL PRODUCT IN EACH. The cut-outs come from
         "Hero Shots - Advertising 2026/01 Master Files" - the
         studio masters, trimmed to their alpha bounding box so the
         product fills the card instead of floating inside a box of
         empty transparency. Instagram gets the loaded shake (the
         pack's own note: "Portrait. Best of the set for Stories and
         Reels"), Facebook gets Big Poppa.

       · TIKTOK GETS THE VIDEO. videos/socials/tiktok-loop.mp4 - 8
         seconds cut from drip-saturdays.mp4, which was already shot
         vertical at 720x1280. Framed as a phone rather than as a
         cut-out, because that is what the platform is. Muted, looped
         and playsinline, same as every other autoplaying clip on
         this site, and it holds still for prefers-reduced-motion.

       · THE HERO BREAKS THE TOP EDGE. That is the whole reason the
         card has no overflow:hidden. Everything that must be clipped
         - the glow, the halftone, the scrim - is clipped by its own
         border-radius instead.

       · Platform colour is a GLOW, not a fill. The card stays close
         to ink so it belongs to this site; the platform reads from
         the light behind the product, the accent line and the chip.

       SIZING RULE: every dimension inside the card is a percentage
       of the card. Fixed pixel heights were tried first and blew the
       layout apart at every breakpoint - at 420px wide the heroes
       were still 400px tall and covered the copy. Percentages of a
       fixed aspect-ratio box scale on their own and need no
       breakpoint of their own.
       ============================================================ */
    .follow-row{
      display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
      /* the heroes stand proud of the top edge - this is their room */
      margin-top:clamp(76px,9vw,104px);
    }

    .follow-card{
      container-type:inline-size;   /* cqw below sizes type off the card, not the page */
      position:relative; display:flex; flex-direction:column; justify-content:flex-end;
      aspect-ratio:3/4;
      border-radius:22px;
      text-decoration:none; color:inherit;
      isolation:isolate;
      background:
        radial-gradient(88% 58% at 50% 6%,  var(--glow-a) 0%, transparent 62%),
        radial-gradient(120% 78% at 50% -8%, var(--glow-b) 0%, transparent 66%),
        linear-gradient(180deg,#16161B 0%, #101014 58%, #131318 100%);
      box-shadow:0 26px 62px rgba(0,0,0,.62),
                 inset 0 0 0 1px var(--edge),
                 inset 0 1px 0 rgba(255,255,255,.07);
      transition:transform .4s cubic-bezier(.2,.8,.25,1), box-shadow .4s ease;
    }
    /* the accent line across the top edge · BEHIND the phone (z-index 1), or
       it draws a bright rule straight across the screen of it */
    .follow-card::before{
      content:''; position:absolute; left:20%; right:20%; top:0; height:2px; border-radius:2px;
      background:linear-gradient(90deg,transparent,var(--accent),transparent);
      opacity:.85; z-index:1;
    }
    /* halftone · the same dot screen as the stickers, so the fill has print
       texture rather than reading as a flat panel */
    .follow-card::after{
      content:''; position:absolute; inset:0; border-radius:inherit; z-index:1; pointer-events:none;
      background:radial-gradient(circle at 1.2px 1.2px, rgba(255,255,255,.05) 0 1px, transparent 1.1px)
                 0 0 / 4px 4px;
    }

    /* the platform name, ghosted behind the product, for depth */
    .follow-card__ghost{
      position:absolute; left:0; right:0; top:26%; z-index:1; pointer-events:none;
      font-family:var(--display); text-transform:uppercase; text-align:center;
      font-size:16cqw; line-height:.9; letter-spacing:.02em;
      color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.075);
    }

    /* ---- the hero · a phone, running the app ---- */
    .follow-card__phone{
      position:absolute; left:50%; transform:translateX(-50%);
      bottom:41%; width:48%;
      z-index:2; pointer-events:none;
      /* THIS IS A CONTAINER, AND IT HAS TO BE.
         .pf is a container, so everything INSIDE it sizes off the phone -
         but .pf's OWN cqw values could not, because an element never
         queries itself. They were resolving against .follow-card instead,
         and the phone is 48% of the card, so every length .pf set for
         itself came out 2.08x too big:
           border-radius  14cqw -> 52.6px on a 180px phone, not 25.2px
           padding        1.5cqw -> 5.6px, not 2.7px
           box-shadow     double
         The casing was drawn with a 52.6px corner while the screen inside
         it had a correct 21.3px one, so the screen's squarer corners came
         out THROUGH the casing's rounded ones. Christian, 30 Aug: "see how
         the screen is larger than the phone casing?"
         This wrapper is exactly .pf's width, so with it as the container
         the casing and its screen finally measure in the same space. */
      container-type:inline-size;
    }

    /* ---- the scrim · guarantees the words always land on ink ---- */
    .follow-card__scrim{
      position:absolute; left:0; right:0; bottom:0; height:46%; z-index:3; pointer-events:none;
      border-radius:0 0 22px 22px;
      background:linear-gradient(180deg,rgba(11,11,14,0) 0%, rgba(11,11,14,.35) 26%,
                                 rgba(11,11,14,.93) 52%, rgba(13,13,17,.99) 68%, #121217 100%);
    }

    /* ---- the chip ---- */
    .follow-card__icon{
      position:absolute; top:16px; left:16px; z-index:4;
      width:38px; height:38px; border-radius:12px;
      display:grid; place-items:center;
      background:rgba(255,255,255,.07);
      border:1px solid rgba(255,255,255,.16);
      -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    }
    .follow-card__icon svg{width:19px; height:19px; color:#fff}
    .follow-card--instagram .follow-card__icon{
      background:conic-gradient(from 210deg,#F58529,#DD2A7B,#8134AF,#F58529); border-color:transparent}
    .follow-card--tiktok   .follow-card__icon{background:#0A0A0C; border-color:rgba(37,244,238,.5)}
    .follow-card--facebook .follow-card__icon{background:#1877F2; border-color:transparent}

    /* ---- the words ---- */
    .follow-card__body{position:relative; z-index:4; padding:0 clamp(14px,5%,20px) clamp(14px,5%,20px)}
    .follow-card__count{
      display:block; font-family:var(--display); font-size:clamp(34px,15cqw,54px);
      line-height:.86; color:#fff; letter-spacing:-.01em; text-shadow:none}
    .follow-card__platform{
      display:block; font-weight:700; font-size:clamp(8.5px,2.9cqw,10px); letter-spacing:.2em; text-transform:uppercase;
      color:var(--accent); margin-top:7px}
    .follow-card__handle{
      display:block; font-size:clamp(11px,3.7cqw,12.5px); color:var(--ml-text-dim,#B7B7BD); margin-top:3px}
    .follow-card__cta{
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      margin-top:clamp(11px,4%,16px); padding:9px 15px; border-radius:999px;
      font-family:var(--display); text-transform:uppercase; font-size:clamp(12px,4.1cqw,14px); letter-spacing:.04em;
      color:#fff; background:rgba(255,255,255,.10);
      border:1px solid rgba(255,255,255,.28);
      transition:background .25s ease, color .25s ease, border-color .25s ease}
    .follow-card__cta span{font-size:15px; line-height:1}

    /* ---- per platform ---- */
    .follow-card--instagram{--glow-a:rgba(221,42,123,.42); --glow-b:rgba(129,52,175,.32);
      --accent:#F2739E; --edge:rgba(221,42,123,.34)}
    .follow-card--tiktok{--glow-a:rgba(254,44,85,.44); --glow-b:rgba(37,244,238,.3);
      --accent:#25F4EE; --edge:rgba(37,244,238,.3)}
    .follow-card--facebook{--glow-a:rgba(24,119,242,.42); --glow-b:rgba(11,95,206,.3);
      --accent:#5FA3FF; --edge:rgba(24,119,242,.36)}

    /* ---- hover ---- */
    .follow-card:hover{transform:translateY(-8px);
      box-shadow:0 34px 74px rgba(0,0,0,.68), inset 0 0 0 1px var(--accent)}
    .follow-card:hover .follow-card__phone{transform:translateX(-50%) translateY(-9px)}
    .follow-card__phone{transition:transform .45s cubic-bezier(.2,.8,.25,1)}
    .follow-card--instagram:hover .follow-card__cta{background:#DD2A7B; color:#fff; border-color:#DD2A7B}
    .follow-card--tiktok:hover   .follow-card__cta{background:#25F4EE; color:#04262A; border-color:#25F4EE}
    .follow-card--facebook:hover .follow-card__cta{background:#1877F2; color:#fff; border-color:#1877F2}


    /* ============================================================
       THE PHONE  ·  .pf
       ------------------------------------------------------------
       A device shell with the real app running in it. One shell,
       three apps. Christian, 30 Aug: "Lets make them the apps on
       phones with a Hero Milky Reel or tik tok or Facebook post.
       Look at the accounts and replicate."

       The accounts were opened and read, and what is on screen is
       what is on them: the handles, the display names, the blue
       ticks, the avatar all three accounts actually use, and a
       real Facebook caption. The footage is Milky Lane's own -
       loaded-thursdays.mp4 in the Reel, drip-saturdays.mp4 in the
       TikTok.

       NO INVENTED ENGAGEMENT. The like and comment rails carry
       icons and no counts, because a per-post number would be a
       figure nobody can stand behind on a public page. The three
       counts under the phones are real and were read off the
       accounts.

       HOW IT IS SIZED
       ---------------
       .pf is its own container, so every cqw inside is a
       percentage of the PHONE, not of the card. That lets the UI
       be written at true iOS proportions - a 390pt iPhone with a
       26px icon is 26/390 = 6.7cqw - and it holds whether the
       phone renders at 210px or at 120px. Sized off the card
       instead, which is what it did first, every icon grew as the
       phone shrank.

       Reference device: 390 x 844pt, hence aspect-ratio 9/19.5
       and a 14% corner radius.

       EVERY BOX IN HERE IS A <span>, because the card is one <a>
       and an <a> may not contain a <div>. Spans are inline by
       default, so aspect-ratio, height and padding are all
       ignored until each one is told to be a block. Without the
       first rule below the phone collapses to a strip.
       ============================================================ */
    .follow-card__phone, .pf, .pf__island, .app__media, .app__foot, .app__cap,
    .app__bar, .app__disc, .app__me, .fb__post, .fb__cap, .fb__dots, .fb__id,
    .fb__feed, .fb__track, .ig__bio, .ig__name, .ig__desc, .ig__grid, .ig__reel,
    .ig__stat, .ig__tabs{
      display:block;
    }
    .app__follow{display:inline-block}

    .pf{
      container-type:inline-size;
      position:relative; width:100%;
      aspect-ratio:9/19.5;
      /* NESTED ROUNDED RECTANGLES ONLY LOOK RIGHT WHEN
             inner radius = outer radius - frame thickness
         so these three numbers move together: 15 - 2.2 = 12.8 below.
         Change one and change the others. */
      border-radius:15cqw;
      padding:2.2cqw;                       /* the bezel */
      background:linear-gradient(150deg,#43434d 0%,#101015 20%,#0a0a0d 76%,#3a3a44 100%);
      box-shadow:0 8cqw 18cqw rgba(0,0,0,.66), 0 2cqw 5cqw rgba(0,0,0,.5),
                 inset 0 0 0 .7cqw rgba(255,255,255,.18);
    }
    .pf__screen{
      position:relative; height:100%; width:100%;
      box-shadow:inset 0 0 0 .3cqw rgba(0,0,0,.85);
      /* The casing's inner corner is 15 - 2.2 = 12.8% of the PHONE. This
         element measures in a different space: container-type sizes off
         .pf's CONTENT box, so 1cqw here is 1% of the SCREEN, and the
         screen is 100 - 2(2.2) = 95.6% of the phone.
             12.8 / 0.956 = 13.39
         Verified: casing radius 27.05px - 3.97px bezel = 23.08px, and this
         resolves to 23.08px. They are the same curve. */
      border-radius:13.39cqw; overflow:hidden;
      background:#000; color:#fff;
      font-family:-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif;
      display:flex; flex-direction:column;
    }
    .pf__island{
      position:absolute; top:2.8cqw; left:50%; transform:translateX(-50%);
      width:32cqw; height:9.2cqw; border-radius:5cqw; background:#000; z-index:9;
    }
    .pf__status{
      position:absolute; top:4.4cqw; left:0; right:0; z-index:8;
      display:flex; justify-content:space-between; align-items:center;
      padding:0 8cqw; font-size:3.4cqw; font-weight:600; pointer-events:none;
    }
    .pf__status svg{width:4.4cqw; height:3.2cqw; display:block}
    .pf__bars{display:flex; align-items:center; gap:1.4cqw}

    .app{position:relative; flex:1; min-height:0; display:flex; flex-direction:column}
    .app__media{position:absolute; inset:0; z-index:0}
    .app__media img,.app__media video{width:100%; height:100%; object-fit:cover; display:block}
    /* veils top and bottom so the chrome always reads over the footage */
    .app__media::after{
      content:''; position:absolute; inset:0;
      background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,transparent 20%,
                 transparent 48%,rgba(0,0,0,.72) 86%,rgba(0,0,0,.88) 100%);
    }
    .ic{width:6.7cqw; height:6.7cqw; display:block; stroke:currentColor; stroke-width:1.7;
        fill:none; stroke-linecap:round; stroke-linejoin:round}

    .app__top{
      position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between;
      padding:14cqw 4.6cqw 0; font-size:4.4cqw; font-weight:700;
    }
    .app__rail{
      position:absolute; right:3.4cqw; bottom:20cqw; z-index:3;
      display:flex; flex-direction:column; align-items:center; gap:5.6cqw;
    }
    .app__foot{position:absolute; left:4.4cqw; right:20cqw; bottom:16cqw; z-index:3}
    .app__who{display:flex; align-items:center; gap:2.2cqw; font-size:3.6cqw; font-weight:600}
    .app__who img{width:8.2cqw; height:8.2cqw; border-radius:50%; display:block}
    .app__cap{margin-top:2.4cqw; font-size:3.4cqw; line-height:1.34; opacity:.96}
    .app__audio{
      margin-top:2.6cqw; display:flex; align-items:center; gap:1.8cqw;
      font-size:3.1cqw; opacity:.88; white-space:nowrap; overflow:hidden;
    }
    .app__audio .ic{width:4cqw; height:4cqw; flex:0 0 auto}
    .app__nav{
      position:absolute; left:0; right:0; bottom:0; z-index:4;
      display:flex; justify-content:space-around; align-items:center;
      padding:3cqw 4cqw 5.4cqw;
    }
    .app__nav .ic{width:6.4cqw; height:6.4cqw; opacity:.92}
    .app__bar{position:absolute; left:50%; transform:translateX(-50%); bottom:2cqw; z-index:6;
      width:36cqw; height:1.3cqw; border-radius:1cqw; background:rgba(255,255,255,.85)}

    /* ---------- INSTAGRAM · Reels ---------- */

    /* ---------- TIKTOK · For You ---------- */
    .app--tt .app__nav{background:#000}
    .app--tt .app__tabs{display:flex; gap:5cqw; font-size:4.2cqw; font-weight:600; opacity:.6}
    .app--tt .app__tabs b{opacity:1; position:relative; font-weight:700}
    .app--tt .app__tabs b::after{
      content:''; position:absolute; left:10%; right:10%; bottom:-2.4cqw; height:1cqw;
      border-radius:1cqw; background:#fff;
    }
    .app--tt .app__me{position:relative; margin-bottom:2.4cqw}
    .app--tt .app__me img{width:11.3cqw; height:11.3cqw; border-radius:50%;
      border:.5cqw solid #fff; display:block}
    .app--tt .app__plus{
      position:absolute; left:50%; bottom:-2.4cqw; transform:translateX(-50%);
      width:4.8cqw; height:4.8cqw; border-radius:50%; background:#FE2C55; color:#fff;
      display:grid; place-items:center; font-size:3.4cqw; font-weight:700; line-height:1;
    }
    .app--tt .app__rec{
      width:11cqw; height:11cqw; border-radius:50%; margin-top:2cqw;
      background:conic-gradient(from 0deg,#1f1f24,#3f3f4a,#131317,#3f3f4a,#1f1f24);
      display:grid; place-items:center;
      animation:pf-spin 6s linear infinite;
    }
    .app--tt .app__rec span{
      width:4.2cqw; height:4.2cqw; border-radius:50%;
      background:radial-gradient(circle at 40% 35%,#ffb0e6,#FF8CE0 60%,#c4589f);
      box-shadow:0 0 0 .5cqw rgba(0,0,0,.55);
    }
    @keyframes pf-spin{to{transform:rotate(360deg)}}

    /* ---------- FACEBOOK · feed, dark mode ---------- */
    .app--fb{background:#18191A}
    .app--fb .app__top{padding:14cqw 4.4cqw 3cqw; background:#242526; flex:0 0 auto}
    .app--fb .fb__logo{font-size:7cqw; font-weight:800; color:#0866FF; letter-spacing:-.05em}
    .app--fb .fb__tools{display:flex; gap:2.6cqw}
    .app--fb .fb__tool{
      width:9cqw; height:9cqw; border-radius:50%; background:#3A3B3C;
      display:grid; place-items:center; color:#E4E6EB;
    }
    .app--fb .fb__tool .ic{width:5cqw; height:5cqw}
    /* the post is a flex column and the PHOTO is the flexible part, so the
       caption, the reactions and the Like/Comment/Share row are never the
       things pushed off the bottom of the screen */
    .app--fb .fb__post{
      position:relative; z-index:2; background:#242526; margin-bottom:1.6cqw;
      padding:4cqw 0 0;
    }
    .app--fb .fb__head{display:flex; align-items:center; gap:2.6cqw; padding:0 4.4cqw}
    .app--fb .fb__head img{width:11cqw; height:11cqw; border-radius:50%; display:block}
    .app--fb .fb__name{font-size:4cqw; font-weight:700; display:flex; align-items:center; gap:1.4cqw}
    .app--fb .fb__meta{font-size:3.2cqw; color:#B0B3B8; margin-top:.6cqw;
      display:flex; align-items:center; gap:1.2cqw}
    .app--fb .fb__meta .ic{width:3.4cqw; height:3.4cqw}
    .app--fb .fb__dots{margin-left:auto; color:#B0B3B8}
    .app--fb .fb__dots .ic{width:5.4cqw; height:5.4cqw}
    .app--fb .fb__cap{
      padding:3cqw 4.4cqw 3.2cqw; font-size:3.6cqw; line-height:1.34;
      /* EXACTLY two lines, always. The feed steps one post per keyframe, so
         every post has to be the same height or the dwell lands mid-post.
         A caption is the only thing here that can run long. */
      display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
      overflow:hidden; height:15.9cqw; box-sizing:border-box;
    }
    .app--fb .fb__photo{display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover}
    .app--fb .fb__n{font-weight:600; color:#B0B3B8}
    .app--fb .fb__sub{margin-left:auto}
    .app--fb .fb__counts{
      display:flex; align-items:center; gap:1.6cqw; padding:2.8cqw 4.4cqw; flex:0 0 auto;
      font-size:3.2cqw; color:#B0B3B8;
    }
    .app--fb .fb__react{display:flex}
    .app--fb .fb__react i{
      width:5.2cqw; height:5.2cqw; border-radius:50%; display:grid; place-items:center;
      font-style:normal; font-size:3cqw; border:.35cqw solid #242526; margin-left:-1.2cqw;
    }
    .app--fb .fb__react i:first-child{margin-left:0; background:#0866FF}
    .app--fb .fb__react i:last-child{background:#F3425F}
    .app--fb .fb__acts{
      display:flex; justify-content:space-around; align-items:center; flex:0 0 auto;
      border-top:.35cqw solid #3A3B3C; padding:2.8cqw 2cqw;
      font-size:3.4cqw; font-weight:600; color:#B0B3B8;
    }
    .app--fb .fb__act{display:flex; align-items:center; gap:1.6cqw}
    .app--fb .fb__act .ic{width:5cqw; height:5cqw}
    .app--fb .app__nav{background:#242526; border-top:.35cqw solid #3A3B3C; color:#B0B3B8}
    .app--fb .app__bar{background:rgba(255,255,255,.5)}



    /* ============================================================
       THE FEEDS SCROLL  ·  .fb__track  /  .ig__track
       ------------------------------------------------------------
       Christian, 30 Aug: "for the face book phone on the socials can
       you please have it scrolling and looking at the best posts we
       have done... Could you do the same with the gram scrolling the
       grid and looking at the best of images".

       ONE TRICK, USED TWICE, AND IT IS WORTH STATING ONCE.
       Each track holds TWO IDENTICAL COPIES of its content and
       animates to translateY(-50%). -50% is half the track's OWN
       height, which is exactly one copy - so the last frame of the
       loop is pixel-identical to the first and there is no seam and
       no jump. Nothing has to know how tall a post is, which is why
       the posts keep their natural height instead of being pinned to
       a magic number that breaks the moment a caption runs to three
       lines.

       THE MOTION IS STEPPED, NOT LINEAR. A constant crawl reads as a
       stock ticker. A feed is flick, read, flick: every keyframe pair
       below is a fast move followed by a dwell long enough to
       actually look at what landed. The easing is on the animation,
       so each move eases out the way a thumb-flick decelerates.

       Both hold still for prefers-reduced-motion - a looping scroll
       is exactly the kind of motion that rule exists for.
       ============================================================ */
    .app--fb .fb__feed, .app--ig .ig__grid{
      position:relative; flex:1; min-height:0; overflow:hidden;
    }
    .pf__screen{contain:paint}
    /* No will-change here. It was the promotion hint that put the track on
       its own layer, and a layer is what escaped the screen's rounded clip.
       contain:paint makes the scroller a hard paint boundary, so anything
       the browser does decide to promote still cannot draw outside it. */
    .app--fb .fb__feed, .app--ig .ig__grid{contain:paint}

    /* eight posts in the track = two copies of four, so one post is
       12.5% of it */
    .app--fb .fb__track{animation:pf-feed 26s cubic-bezier(.33,.9,.2,1) infinite}
    @keyframes pf-feed{
      0%,9%    {transform:translateY(0)}
      15%,34%  {transform:translateY(-12.5%)}
      40%,59%  {transform:translateY(-25%)}
      65%,84%  {transform:translateY(-37.5%)}
      90%,100% {transform:translateY(-50%)}
    }

    /* ---------- Instagram · the profile ----------
       The grid is ONE image, not eighteen. Eighteen tiles at 56 CSS px
       each is eighteen requests and eighteen sets of gap arithmetic to
       get wrong; one 540px webp is a single request, the gaps are baked
       in at the right ratio, and it stacks against a copy of itself
       without a seam because the trailing gap row is part of the file.  */
    .app--ig{background:#000}
    .app--ig .app__top{padding:14cqw 4.2cqw 2.6cqw; font-size:4.4cqw}
    .app--ig .ig__user{display:flex; align-items:center; gap:1.4cqw; font-weight:700}
    .app--ig .ig__user svg{width:3.6cqw; height:3.6cqw}
    .app--ig .ig__bio{padding:0 4.2cqw 2.8cqw; flex:0 0 auto}
    .app--ig .ig__row{display:flex; align-items:center; gap:4cqw}
    .app--ig .ig__avatar{width:19cqw; height:19cqw; border-radius:50%; display:block; object-fit:cover}
    .app--ig .ig__stats{display:flex; flex:1; justify-content:space-around; text-align:center}
    .app--ig .ig__stat b{display:block; font-size:3.9cqw; font-weight:700; line-height:1.15}
    .app--ig .ig__stat i{display:block; font-style:normal; font-size:2.9cqw; color:#A8A8A8}
    .app--ig .ig__name{font-size:3.4cqw; font-weight:600; margin-top:2.6cqw}
    .app--ig .ig__desc{font-size:3.2cqw; color:#DBDBDB; margin-top:.5cqw; line-height:1.32}
    .app--ig .ig__btns{display:flex; gap:1.6cqw; margin-top:2.8cqw}
    .app--ig .ig__btns b{
      flex:1; text-align:center; font-size:3.1cqw; font-weight:600;
      padding:1.7cqw 0; border-radius:1.8cqw; background:#262628;
    }
    .app--ig .ig__tabs{display:flex; flex:0 0 auto; border-top:.3cqw solid #262628}
    .app--ig .ig__tabs i{flex:1; display:grid; place-items:center; padding:2.2cqw 0; opacity:.45}
    .app--ig .ig__tabs i.on{opacity:1; box-shadow:inset 0 -.55cqw 0 #fff}
    .app--ig .ig__tabs .ic{width:5.2cqw; height:5.2cqw}
    /* THE GRID IS A REPEATING BACKGROUND, NOT TWO STACKED IMAGES.
       ------------------------------------------------------------
       It was a .ig__track holding two copies of the grid image, moved with
       an animated transform and will-change:transform. That promotes the
       track to its own compositing layer, and on Christian's machine that
       layer painted its own bounds - a white rectangle wider than the
       screen, spilling over the phone's bezel and its rounded corners,
       with only the strip where the image had actually painted showing
       through. "See how the phone screen isnt fitting inside the phone?"

       Nothing here is promoted now. One element, one background, repeat-y
       so it tiles forever, and background-position steps it. There is no
       second copy to get out of step, no transform, no layer, and nothing
       that can paint outside the box - the background is clipped by the
       element's own padding box by definition.

       THE ARITHMETIC, so it can be re-derived:
         .pf is the container, so 1cqw is 1% of the PHONE's width.
         the screen is the phone less its 1.5cqw bezel on each side = 97cqw
         the file is 540x1086 -> rendered height 97 x (1086/540) = 195.08cqw
         6 rows of 178px + 6 gaps of 3px = 1086px, so two rows is exactly
         a third of the file = 65.03cqw
       A full cycle is 195.08cqw, which with repeat-y is pixel-identical to
       0 - so the loop has no seam, same as before.
       IF THE FILE OR THE BEZEL CHANGES, RE-DERIVE THESE. */
    /* The nav is the bottom of the SCREEN, so it has to be opaque. Left
       transparent, the grid ran under it to the phone's bottom edge and the
       whole thing read as the app spilling out of the frame rather than as a
       screen sitting inside one - Christian, 30 Aug: "the screens are not
       fitting in the phones". The real app's nav is solid black too. */
    .app--ig .app__nav{background:#000; border-top:.3cqw solid #1F1F21}
    .app--ig .app__bar{background:rgba(255,255,255,.85)}
    /* twelve rows in the track = two copies of six, so two rows is 16.667% */
    /* .ig__grid is its own container, so 1cqw inside it is 1% of the GRID's
       width - not the phone's. That is what makes the numbers below exact
       and keeps them exact if the bezel ever changes: they no longer have
       to know anything about the phone. */
    .app--ig .ig__grid{container-type:inline-size}
    .app--ig .ig__reel{
      position:absolute; inset:0; display:block;
      background-image:url('images/socials-drip/ig-grid.webp');
      background-repeat:repeat-y;
      background-size:100% auto;
      background-position:0 0;
      animation:pf-grid 21s cubic-bezier(.33,.9,.2,1) infinite;
    }
    /* the file is 540x1086, so rendered at 100cqw wide it is 201.11cqw tall;
       6 rows and 6 gaps make 1086px, so two rows is exactly a third of it */
    @keyframes pf-grid{
      0%,11%   {background-position-y:0}
      18%,45%  {background-position-y:-67.04cqw}
      52%,79%  {background-position-y:-134.07cqw}
      86%,100% {background-position-y:-201.11cqw}
    }

    @media (prefers-reduced-motion:reduce){
      /* these need the .app-- prefix to out-specify the rules that set them;
         a media query adds no specificity of its own */
      .app--tt .app__rec, .app--fb .fb__track, .app--ig .ig__reel{animation:none}
    }

    /* ---- responsive · only the grid changes, never the card's insides ---- */
    @media (max-width: 1024px) {
      .insta-posts { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width:980px){
      /* the cards get narrower but the heroes keep their proportion, so they
         reach higher above the row - the top margin and the row gap both grow
         with them or the shake lands on the sub-heading */
      .follow-row{grid-template-columns:repeat(2,1fr);
                  column-gap:18px; row-gap:clamp(80px,12vw,110px);
                  margin-top:clamp(96px,13vw,124px)}
      /* three cards in two columns leaves an orphan · centre it at column width
         rather than letting it stretch to twice the size of its siblings */
      .follow-card:nth-child(3){grid-column:1 / -1; justify-self:center; width:calc(50% - 9px)}
    }
    @media (max-width:620px){
      .follow-row{grid-template-columns:1fr; gap:clamp(74px,17vw,96px); max-width:330px; margin-inline:auto}
      /* justify-self:center from the block above shrink-wraps the card to its
         content, and its content is absolutely positioned - so it collapses to
         nothing unless stretch is put back with it. */
      .follow-card:nth-child(3){grid-column:auto; width:auto; justify-self:stretch}
    }
    @media (max-width: 540px) {
      .find-us { padding: 32px 22px 24px; margin: 56px 0 32px; }
    }

    @media (prefers-reduced-motion:reduce){
      .follow-card{transition:none}
      .follow-card:hover{transform:none}
    }

    .press-strip {
      border-top: 1px solid var(--ml-border);
      border-bottom: 1px solid var(--ml-border);
      padding: 28px 0; text-align: center; margin-bottom: 40px;
    }
    .press-strip .press-label {
      display: block;
      font-family: var(--display); text-transform: uppercase; letter-spacing: .16em;
      color: var(--ml-text-dim); font-size: 11px;
      margin-bottom: 14px;
    }
    .press-strip .press-list {
      display: flex; flex-wrap: wrap; gap: 36px;
      justify-content: center; align-items: center;
      font-family: var(--display); text-transform: uppercase; letter-spacing: .08em;
      font-size: 17px; color: rgba(255,255,255,0.55);
    }
    .press-strip .press-list > span {
      transition: color .25s ease, transform .25s ease; cursor: default;
    }
    .press-strip .press-list > span:hover {
      color: var(--ml-pink); transform: translateY(-2px);
    }

    @media (max-width: 1024px) {
      .crowd-grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 720px) {
      .crowd-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
      .crowd-rating { padding: 22px 18px; gap: 14px; }
      .crowd-rating .rating-num { font-size: 48px; }
      .crowd-rating .rating-label { text-align: center; max-width: 100%; }
      .press-strip .press-list { gap: 18px; font-size: 13px; }
    }

    /* ============================================================
       LOCATIONS
       ============================================================ */
    .locations-section {
      background: #050505;
      position: relative;
      isolation: isolate;
      overflow: hidden;
    }
    /* Store-aware photo layer · fills the section behind the headline
       and search. Crossfades when the user changes store via the pill. */
    .locations-section .loc-bg-photo {
      position: absolute; inset: 0; z-index: 0;
      background-position: center; background-size: cover; background-repeat: no-repeat;
      opacity: 0;
      transition: opacity 0.6s ease;
      filter: saturate(1.05);
    }
    .locations-section .loc-bg-photo.has-photo { opacity: 0.45; }
    .locations-section .loc-bg-overlay {
      position: absolute; inset: 0; z-index: 1;
      background:
        radial-gradient(800px 400px at 20% 0%, rgba(255,140,224,0.22), transparent 60%),
        radial-gradient(700px 400px at 90% 100%, rgba(91,208,230,0.18), transparent 60%),
        linear-gradient(180deg, rgba(5,5,5,0.55) 0%, rgba(14,14,16,0.92) 100%);
      pointer-events: none;
    }
    .locations-section .container { position: relative; z-index: 2; }

    /* "Now Showing · [store]" pill under the section header */
    .loc-now-showing {
      display: inline-flex; align-items: center; gap: 10px;
      margin-top: 16px; padding: 8px 14px;
      background: rgba(255,140,224,0.16);
      border: 1px solid rgba(255,140,224,0.45);
      border-radius: 999px;
    }
    .loc-now-showing[hidden] { display: none; }
    .loc-now-showing__label {
      font-family: var(--display); letter-spacing: .14em; text-transform: uppercase;
      font-size: 10px; color: var(--ml-pink);
    }
    .loc-now-showing__name {
      font-family: var(--display); text-transform: uppercase;
      letter-spacing: .04em; font-size: 14px; color: #fff;
    }
    .loc-finder {
      max-width: 740px; margin: 0 auto 56px;
      background: var(--ml-charcoal); border: 1px solid var(--ml-border);
      border-radius: var(--radius-lg); padding: 14px;
      display: flex; gap: 10px; align-items: center;
    }
    .loc-finder input {
      flex: 1; background: transparent; border: 0; color: var(--ml-white);
      padding: 16px 18px; font-size: 17px; font-family: var(--body); outline: none;
    }
    .loc-finder input::placeholder { color: var(--ml-text-dim); }
    .loc-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 18px;
    }
    .loc-card {
      background: #131316; border: 1px solid var(--ml-border);
      border-radius: var(--radius); overflow: hidden;
      display: flex; flex-direction: column;
      transition: transform .3s ease, border-color .3s ease;
    }
    .loc-card:hover { transform: translateY(-4px); border-color: var(--ml-pink); }
    .loc-card .loc-img {
      aspect-ratio: 16/10; background: #0a0a0a; position: relative; overflow: hidden;
    }
    .loc-card .loc-img img {
      width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease;
    }
    .loc-card:hover .loc-img img { transform: scale(1.05); }
    .loc-card .loc-img.placeholder {
      display: flex; align-items: center; justify-content: center;
      background:
        radial-gradient(closest-side, rgba(255,140,224,0.25), transparent 70%),
        repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 12px, transparent 12px 24px),
        #131316;
      font-family: var(--display); font-size: 32px; color: var(--ml-pink); text-transform: uppercase;
    }
    .loc-card .loc-body { padding: 18px 20px 22px; }
    .loc-card h4 {
      font-family: var(--display); text-transform: uppercase;
      font-size: 24px; letter-spacing: 1px;
    }
    .loc-card .loc-meta { color: var(--ml-text-dim); font-size: 14px; margin-top: 4px; }
    .loc-card .loc-state {
      display: inline-block; font-family: var(--tag); color: var(--ml-blue); font-size: 20px; letter-spacing: 0; line-height: 1; transform: rotate(-2deg);
    }
    .loc-card .loc-actions {
      display: flex; gap: 10px; margin-top: 14px;
    }

    /* ============================================================
       7 DAYS · 7 SPECIALS
       ============================================================ */
    .specials-section {
      background:
        radial-gradient(900px 500px at 90% 0%, rgba(255,140,224,0.22), transparent 60%),
        radial-gradient(700px 400px at 10% 100%, rgba(91,208,230,0.20), transparent 60%),
        linear-gradient(180deg, rgba(14,14,16,0.84) 0%, rgba(14,14,16,0.92) 100%),
        url('images/atmosphere/neon-brick.jpg') center/cover no-repeat fixed,
        var(--ml-ink);
    }
    @media (max-width: 760px) {
      /* background-attachment: fixed has perf issues on mobile · pin it normal */
      .specials-section { background-attachment: scroll, scroll, scroll, scroll; }
    }
    .week-grid {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
      grid-auto-flow: dense; /* let span-1 cards backfill empty slots left by fri/sat span-2 */
    }
    .week-card {
      position: relative; border-radius: var(--radius-lg); overflow: hidden;
      min-height: 340px; isolation: isolate;
      display: flex; align-items: flex-end;
      background: linear-gradient(180deg, #1A1A1D 0%, #0a0a0c 100%);

      /* Neon perimeter glow · Brand Kit §10. One variable drives all
         three shadow layers, so hover is a single intensity change and
         never a colour or size change. The ring layer replaces the old
         1px border; the 46px bloom is what makes it read as light in a
         room rather than as an outline. Accent follows the day colour. */
      --card-accent: var(--day-rgb, 255,140,224);
      --card-glow: .28;
      box-shadow:
        0 0 0 1px rgba(var(--card-accent), calc(var(--card-glow) * .55));
      transition: box-shadow .22s ease, transform .45s cubic-bezier(.2,.7,.2,1);
    }
    /* exactly 35% more: .28 x 1.35 = .378 · focus-within matches for keyboard */
    .week-card:hover,
    .week-card:focus-within {
      --card-glow: .378;
      transform: translateY(-6px);
    }
    @media (prefers-reduced-motion: reduce) {
      .week-card { transition: none; }
      .week-card:hover, .week-card:focus-within { transform: none; }
    }
    /* D2 · Full colour at rest. The grid is one of the highest
       commercial-intent blocks on the site; greyscale-until-hover
       stopped it selling and is a generated-UI reflex (Tell 4).
       The only hover change is the glow lift plus a slow image push. */
    .week-card .bg {
      position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
      transition: transform .8s ease;
      opacity: 1; filter: saturate(1.04) contrast(1.02);
      z-index: 0;
    }
    .week-card:hover .bg { transform: scale(1.04); }

    /* Video bg · full colour at rest, autoplay runs silently throughout */
    .week-card .bg-video {
      opacity: 1; mix-blend-mode: normal;
      pointer-events: none;
      filter: saturate(1.04) contrast(1.02);
      transition: transform .6s ease;
    }
    .week-card.has-hover-video:hover .bg-video,
    .week-card:hover .bg-video { transform: scale(1.04); }

    /* Day-art-style overlay videos (Biggie / Drip) · chroma-keyed to black,
       lifted to transparent via mix-blend-mode: screen */
    .week-card .bg-overlay {
      position: absolute; inset: 0; z-index: 1;
      width: 100%; height: 100%;
      object-fit: contain;
      object-position: center;
      transform: translateY(18%) scale(0.85);
      opacity: 0.55;
      mix-blend-mode: screen;
      pointer-events: none;
      transition: opacity .35s ease, transform .55s cubic-bezier(.2,.7,.2,1);
    }
    .week-card:hover .bg-overlay { opacity: 0.78; transform: translateY(16%) scale(0.92); }

    /* Stronger gradient on video cards so the headline keeps reading */
    .week-card.has-hover-video::before {
      background:
        radial-gradient(closest-side at 80% 10%, color-mix(in srgb, var(--day-color) 35%, transparent), transparent 60%),
        linear-gradient(180deg, rgba(0,0,0,0.30) 0%, transparent 35%, rgba(0,0,0,0.94) 100%);
    }
    .week-card::before {
      content: ''; position: absolute; inset: 0; z-index: 1;
      background:
        radial-gradient(closest-side at 80% 10%, color-mix(in srgb, var(--day-color) 40%, transparent), transparent 60%),
        linear-gradient(180deg, transparent 30%, rgba(0,0,0,.92) 100%);
    }
    .week-card .content {
      position: relative; z-index: 2; padding: 22px 24px 26px;
      display: flex; flex-direction: column; gap: 6px; width: 100%;
    }
    .week-card .day-tag {
      font-family: var(--script); font-size: 26px; line-height: 1;
      color: var(--day-color, var(--ml-pink));
      transform: rotate(-2deg); align-self: flex-start; margin-bottom: 4px;
      transition: transform .35s cubic-bezier(.2,.7,.2,1); font-weight: 400;
      }
    .week-card:hover .day-tag { transform: rotate(-4deg) translateY(-2px); }
    .week-card h3 {
      font-family: var(--display); text-transform: uppercase;
      font-size: clamp(28px, 2.6vw, 38px); line-height: .9; letter-spacing: 0.5px;
      color: var(--ml-white);
      transition: transform .35s cubic-bezier(.2,.7,.2,1);
    }
    .week-card:hover h3 { transform: translateY(-2px); }
    .week-card p {
      color: rgba(255,255,255,0.88); font-size: 13px; line-height: 1.45;
      margin-top: 6px;
    }
    /* Sticker-style time pill · slight tilt, brand-coloured shadow */
    .week-card .time {
      font-family: var(--display); text-transform: uppercase; letter-spacing: 1.5px;
      font-size: 12px; color: var(--ml-ink, #0E0E10);
      padding: 6px 14px; border-radius: 999px;
      background: color-mix(in srgb, var(--day-color, var(--ml-pink)) 90%, transparent);
      align-self: flex-start; margin-top: 10px;
      border: 1.5px solid #fff;
      box-shadow: 0 4px 14px rgba(0,0,0,0.55);
      transform: rotate(-3deg);
      transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
    }
    .week-card:hover .time {
      transform: rotate(-1deg) scale(1.06);
      box-shadow: 0 8px 22px rgba(0,0,0,0.55);
    }

    /* Featured day cards span 2 cols on wider layouts, with a soft always-on pulse */
    .week-card.fri,
    .week-card.sat { grid-column: span 2; }
    .week-card.fri,
    .week-card.sat {
      animation: ml-featured-pulse 3.6s ease-in-out infinite;
    }
    @keyframes ml-featured-pulse {
      0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--day-color, var(--ml-pink)) 0%, transparent); }
      50%      { box-shadow: none; }
    }
    .week-card.fri:hover,
    .week-card.sat:hover { animation: none; }

    @media (prefers-reduced-motion: reduce) {
      .week-card .bg,
      .week-card.fri,
      .week-card.sat { animation: none !important; }
    }

    /* Milky Hour & Lunch Saver share the week-card class ·
       no extra CSS needed; the .hour / .lunch classes are
       just hooks if we ever want to override per-card colour. */

    /* ============================================================
       FUNCTIONS
       ============================================================ */
    .functions-section {
      position: relative;
      background:
        radial-gradient(900px 500px at 0% 0%, rgba(91,208,230,0.18), transparent 60%),
        radial-gradient(800px 500px at 100% 100%, rgba(255,140,224,0.15), transparent 60%),
        linear-gradient(180deg, rgba(10,10,12,0.86) 0%, rgba(14,14,18,0.92) 100%),
        url('images/atmosphere/neon-brick.jpg') center/cover no-repeat;
    }
    @media (max-width: 760px) {
      .functions-section { background-attachment: scroll; }
    }
    .functions-grid {
      display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center;
    }
    .functions-art {
      position: relative; aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow: hidden;
      background: var(--ml-charcoal);
    }
    .functions-art img { width: 100%; height: 100%; object-fit: cover; }
    .functions-art .stamp {
      position: absolute; right: 18px; top: 18px;
      background: var(--ml-pink); color: var(--ml-ink, #0E0E10); border-radius: 999px;
      padding: 10px 18px; font-family: var(--display); text-transform: uppercase; letter-spacing: 1.5px;
      box-shadow: var(--shadow-pink);
    }
    .functions-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 32px; }
    .pill {
      padding: 10px 16px; border-radius: 999px; border: 1px solid var(--ml-border);
      background: rgba(255,255,255,0.03); font-family: var(--display); letter-spacing: 1.5px;
      font-size: 14px; text-transform: uppercase;
    }
    .pill.b { background: var(--ml-blue); color: var(--ml-black); border-color: var(--ml-blue); }
    .pill.p { background: var(--ml-pink); color: var(--ml-ink, #0E0E10); border-color: var(--ml-pink); }

    /* ============================================================
       COMMUNITY · Local Partnerships
       Pulled in to mirror Dave & Buster's "Proudly Supporting Our
       Community" section but reworked in Milky Lane's signature
       black + pink/blue glow art direction. Headline mixes solid +
       pink + stroke like the rest of the site's section titles.
       ============================================================ */
    .community-section {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      padding: 110px 0 100px;
      background: var(--ml-black);
      color: var(--ml-white);
    }
    /* ============================================================
       COMMUNITY · the clubs are the background now
       ------------------------------------------------------------
       Christian, 31 Aug: "ok add these somewhere to the community
       page maybe behind these as transparents?"

       This was a nightclub crowd shot - atmospheric, and completely
       off-message for a page about junior sport, schools and local
       groups. It is now three Bunbury United players, each in a
       Milky Lane jersey, ghosted behind the pillars.

       The montage is built so all three badges land at the same
       height - 34% down each panel - so the eye reads them as a row
       rather than three unrelated crops.

       It is a BAND, not a cover fill: at 100% width the strip is
       about 40% of the section's height, sitting behind the cards,
       and the gradients carry the rest. cover would have scaled a
       2.3:1 image over a 1600px-tall section and shown nothing but
       the middle player's shirt.

       No background-attachment:fixed. It was there before and it is
       a known iOS Safari failure - the layer either judders or drops
       out entirely, and this is a mobile-first page.
       ============================================================ */
    .community-section .comm-bg {
      position: absolute; inset: 0; z-index: 0; pointer-events: none;
      background:
        radial-gradient(900px 600px at 88% 12%, rgba(255,140,224,0.30), transparent 62%),
        radial-gradient(800px 500px at 8% 92%,  rgba(91,208,230,0.24), transparent 62%),
        linear-gradient(180deg, rgba(5,5,5,0.50) 0%, rgba(5,5,5,0.66) 42%, rgba(5,5,5,0.90) 68%, #050505 88%),
        url('images/community/community-clubs-1600w.webp');
      background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
      /* 140%, not 100%: at full width the strip's bottom edge landed at 40%
         of the section, where the scrim is still light, and cut off in a hard
         horizontal line. At 140% the players are half again as big AND the
         edge falls at ~71%, by which point the gradient is at 0.90 and hides
         it. */
      background-size: auto, auto, auto, 140% auto;
      background-position: center, center, center, center 4%;
      filter: saturate(1.05);
    }
    @media (min-width: 1500px) {
      .community-section .comm-bg {
        background-image:
          radial-gradient(900px 600px at 88% 12%, rgba(255,140,224,0.30), transparent 62%),
          radial-gradient(800px 500px at 8% 92%,  rgba(91,208,230,0.24), transparent 62%),
          linear-gradient(180deg, rgba(5,5,5,0.50) 0%, rgba(5,5,5,0.66) 42%, rgba(5,5,5,0.90) 68%, #050505 88%),
          url('images/community/community-clubs-2496w.webp');
      }
    }
    @media (max-width: 800px) {
      /* one panel at a time on a phone - three across would be 270px each
         and the badges would be specks */
      .community-section .comm-bg {
        background-size: auto, auto, auto, 330% auto;
        background-position: center, center, center, 32% 4%;
      }
    }
    .community-section .container { position: relative; z-index: 1; }

    /* HEAD */
    .comm-head { text-align: center; max-width: 980px; margin: 0 auto 56px; }
    .comm-eyebrow {
      display: inline-block;
      font-family: var(--display);
      font-size: 13px; letter-spacing: .32em; text-transform: uppercase;
      color: var(--ml-pink);
      padding: 8px 16px;
      background: rgba(255,140,224,0.10);
      border: 1px solid rgba(255,140,224,0.35);
      border-radius: 999px;
      margin-bottom: 18px;
    }
    .comm-title {
      font-family: var(--display); text-transform: uppercase;
      font-size: clamp(48px, 7.5vw, 108px); line-height: .88;
      letter-spacing: -1px;
    }
    .comm-title .pink   { color: var(--ml-pink); }
    .comm-title .stroke {
      color: var(--ml-white);
    }
    .comm-sub {
      font-size: 18px; line-height: 1.6; color: var(--ml-text);
      max-width: 720px; margin: 24px auto 0; font-weight: 500;
    }

    /* STATS row */
    .comm-stats {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 24px; max-width: 880px; margin: 40px auto 0;
    }
    .comm-stats .stat {
      text-align: center;
      padding: 18px 12px;
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--ml-border);
      border-radius: var(--radius);
      backdrop-filter: blur(6px);
    }
    .comm-stats .stat .num {
      font-family: var(--display); font-size: 44px; line-height: 1;
      color: var(--ml-white);
    }
    .comm-stats .stat:nth-child(1) .num { color: var(--ml-pink); }
    .comm-stats .stat:nth-child(2) .num { color: var(--ml-blue); }
    .comm-stats .stat:nth-child(3) .num { color: var(--ml-pink); }
    .comm-stats .stat:nth-child(4) .num { color: var(--ml-blue); }
    .comm-stats .stat .lbl {
      font-family: var(--tag); font-size: 18px; line-height: 1;
      color: var(--ml-text-dim);
      margin-top: 8px; display: inline-block;
      transform: rotate(-1.5deg);
    }

    /* BODY GRID · form on left, pillars on right */
    .comm-grid {
      display: grid; grid-template-columns: 1.05fr .95fr;
      gap: 48px; align-items: start;
      margin-top: 64px;
    }

    /* FORM column */
    .comm-form {
      background: linear-gradient(180deg, #0E0E10 0%, #050505 100%);
      border: 1px solid var(--ml-border);
      border-radius: var(--radius-lg);
      padding: 36px;
      box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
    }
    .comm-form .form-head { margin-bottom: 22px; }
    .comm-form .form-eyebrow {
      font-family: var(--tag); color: var(--ml-pink); font-size: 22px;
      letter-spacing: 0; transform: rotate(-2deg); display: inline-block;
      margin-bottom: 8px;
    }
    .comm-form .form-title {
      font-family: var(--display); text-transform: uppercase;
      font-size: clamp(30px, 3.5vw, 44px); line-height: .9; letter-spacing: -.5px;
    }
    .comm-form .form-title .blue { color: var(--ml-blue); }
    .comm-form .form-sub {
      color: var(--ml-text-dim); font-size: 15px; line-height: 1.55;
      margin-top: 10px; max-width: 480px;
    }

    .comm-form .form-row {
      display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
      margin-bottom: 14px;
    }
    .comm-form .field { display: flex; flex-direction: column; gap: 6px; }
    .comm-form .field--full { display: block; margin: 4px 0 14px; }
    .comm-form .field--full input,
    .comm-form .field--full textarea { width: 100%; }
    .comm-form .field-label {
      font-family: var(--display); font-size: 12px;
      letter-spacing: .22em; text-transform: uppercase;
      color: var(--ml-pink);
    }
    .comm-form input,
    .comm-form select,
    .comm-form textarea {
      font-family: var(--body); font-size: 15px;
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--ml-border);
      border-radius: 12px;
      color: var(--ml-white);
      padding: 12px 14px;
      width: 100%;
      transition: border-color .2s ease, background .2s ease;
    }
    .comm-form select {
      appearance: none;
      background-image: linear-gradient(45deg, transparent 50%, var(--ml-pink) 50%),
                        linear-gradient(135deg, var(--ml-pink) 50%, transparent 50%);
      background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
      background-size: 6px 6px;
      background-repeat: no-repeat;
      padding-right: 36px;
    }
    .comm-form input::placeholder,
    .comm-form textarea::placeholder { color: rgba(255,255,255,0.35); }
    .comm-form input:focus,
    .comm-form select:focus,
    .comm-form textarea:focus {
      outline: 0;
      border-color: var(--ml-pink);
      background: rgba(255,140,224,0.06);
    }
    .comm-form textarea { resize: vertical; min-height: 86px; }
    .comm-form .form-note {
      font-size: 13px; color: var(--ml-text-dim);
      margin: 6px 0 18px;
    }
    .comm-form .form-submit {
      width: 100%;
      font-size: 16px; letter-spacing: 1.6px;
      padding: 18px 28px;
      border-radius: 999px;
    }

    /* PILLARS column */
    .comm-pillars {
      display: flex; flex-direction: column; gap: 18px;
    }
    .pillar {
      position: relative;
      padding: 28px 28px 26px;
      border-radius: var(--radius-lg);
      overflow: hidden;
      color: var(--ml-black);
    }
    .pillar--pink { background: var(--ml-pink); }
    .pillar--blue { background: var(--ml-blue); }
    .pillar::before {
      /* B3 / Brand Kit §12 - the star is retired in every role, decorative
         included. Same confetti weight, drawn as the spray drip mark. */
      content: '';
      position: absolute;
      bottom: 14px; right: 22px;
      width: 42px; height: 52px;
      background-color: rgba(5,5,5,0.10);
      -webkit-mask: var(--spray) center / contain no-repeat;
              mask: var(--spray) center / contain no-repeat;
      pointer-events: none;
    }
    .pillar-num {
      display: inline-block;
      font-family: var(--display); font-size: 14px;
      letter-spacing: .24em;
      background: var(--ml-black); color: var(--ml-white);
      padding: 6px 12px;
      border-radius: 999px;
      margin-bottom: 14px;
    }
    .pillar-title {
      font-family: var(--display); text-transform: uppercase;
      font-size: 32px; line-height: 1; letter-spacing: -.4px;
    }
    .pillar-body {
      font-size: 15px; line-height: 1.55; margin-top: 10px;
      color: rgba(5,5,5,0.85);
      max-width: 420px;
    }
    .pillar-list {
      list-style: none; padding: 0; margin: 14px 0 0;
      display: flex; flex-wrap: wrap; gap: 8px;
    }
    .pillar-list li {
      font-family: var(--display); font-size: 13px;
      letter-spacing: .14em; text-transform: uppercase;
      background: rgba(5,5,5,0.10);
      border: 1px solid rgba(5,5,5,0.20);
      padding: 6px 12px;
      border-radius: 999px;
    }

    /* TRUST row at bottom */
    .comm-trust {
      margin-top: 48px;
      text-align: center;
      padding: 32px 24px;
      border-top: 1px solid var(--ml-border);
      border-bottom: 1px solid var(--ml-border);
    }
    .trust-eyebrow {
      display: inline-block;
      font-family: var(--display); font-size: 13px;
      letter-spacing: .32em; text-transform: uppercase;
      color: var(--ml-blue);
      margin-bottom: 12px;
    }
    .trust-line {
      font-family: var(--body); font-weight: 700;
      font-size: 15px; letter-spacing: .04em;
      color: var(--ml-text);
      max-width: 920px; margin: 0 auto; line-height: 1.7;
    }

    /* RESPONSIVE */
    @media (max-width: 980px) {
      .community-section { padding: 80px 0 70px; }
      .comm-stats { grid-template-columns: repeat(2, 1fr); gap: 14px; }
      .comm-grid { grid-template-columns: 1fr; gap: 32px; }
      .comm-form { padding: 26px; }
      .comm-form .form-row { grid-template-columns: 1fr; }
    }
    @media (max-width: 540px) {
      .comm-eyebrow { font-size: 11px; }
      .comm-title { font-size: clamp(36px, 10vw, 56px); }
      .comm-stats .stat .num { font-size: 32px; }
      .pillar { padding: 22px; }
      .pillar-title { font-size: 26px; }
    }

    /* ============================================================
       FRANCHISE
       ============================================================ */
    .franchise-section {
      /* D1 / Brand Kit §3 · white on this pink measured 2.08:1 and failed
         outright. Anything on a pink or blue fill is set in Ink Black,
         which measures 9.26:1 (AAA). The gradient's dark end (#C30A65)
         is off-palette, so the fill is flattened to Milky Pink and the
         type flipped, matching what about, contact and careers already do. */
      background: var(--ml-pink);
      color: var(--ml-ink); padding: 100px 0; position: relative; overflow: hidden;
    }
    /* ------------------------------------------------------------
       CAREERS SITS ON INK, NOT PINK
       26 Aug 2026. #franchise and #careers are both .franchise-section,
       so they painted the same pink ground back to back and read as one
       continuous slab - no edge, no rhythm, and "Join The Crew." was
       white on pink at 2.08:1 into the bargain. Flipping careers to ink
       separates the two and puts the alternation back.
       ------------------------------------------------------------ */
    .franchise-section.careers-teaser {
      background: var(--ml-ink);
      color: var(--ml-text);
      border-top: 1px solid rgba(255,255,255,.08);
    }
    .franchise-section.careers-teaser::before { opacity: .16; mix-blend-mode: screen; }
    .franchise-section.careers-teaser .btn--secondary {
      border-color: var(--ml-blue); color: var(--ml-text);
    }
    .franchise-section.careers-teaser .btn--secondary:hover { border-color: var(--ml-pink); }

    .franchise-section::before {
      content: ''; position: absolute; inset: 0;
      background: url("images/brand/texture-graffiti.webp") center/480px repeat;
      mix-blend-mode: multiply;
      opacity: 0.35;
      pointer-events: none;
    }

    /* ============================================================
       COMMUNITY BAND · the photo behind the pink
       ------------------------------------------------------------
       Christian, 31 Aug: "lets try this image in there. Need to make
       sure the milky lane logo is very prominent."

       The shot is a real sponsored club side - the Milky Lane badge is
       on the red player's sleeve, and that badge is the whole point of
       the picture. Everything here protects it:

       · the crop puts it at 60% across and 66% down, right of centre
       · the pink scrim is SOLID to 38% and fully clear by 54%, so it
         never reaches the badge - the headline keeps its black-on-pink
         contrast and the badge keeps full colour
       · background-position sits at 62% so the player, not the empty
         sky, is what survives the crop as the band narrows
       IF THE CROP CHANGES, CHECK THE SCRIM STILL CLEARS THE BADGE.
       ============================================================ */
    .community-teaser {
      /* plain url FIRST, image-set second - the later valid declaration wins,
         so a browser that knows image-set gets the 2x file and one that does
         not falls back to the 1600w */
      background-image:
        linear-gradient(96deg,
          var(--ml-pink) 0%, var(--ml-pink) 38%,
          rgba(255,140,224,.86) 45%,
          rgba(255,140,224,.42) 50%,
          rgba(255,140,224,0) 54%),
        url('images/community/community-locals-1600w.webp');
      background-image:
        linear-gradient(96deg,
          var(--ml-pink) 0%, var(--ml-pink) 38%,
          rgba(255,140,224,.86) 45%,
          rgba(255,140,224,.42) 50%,
          rgba(255,140,224,0) 54%),
        image-set(url('images/community/community-locals-1600w.webp') 1x,
                  url('images/community/community-locals-2560w.webp') 2x);
      background-size: cover, cover;
      background-position: center, 62% center;
      background-repeat: no-repeat, no-repeat;
    }
    /* the pattern is the pink fill's texture, so it stops where the pink does */
    .community-teaser .comm-bg,
    .community-teaser::after { opacity: .5; }

    /* The CTA moves under the copy. Right-aligned it sat on the player's
       shirt, and an ink-outlined button on a sunlit photo is unreadable. */
    .community-teaser .franchise-inner { grid-template-columns: 1fr; }
    /* the copy is capped so it wraps BEFORE the scrim clears - no line of
       black display type ever crosses onto the sunlit half of the photo */
    .community-teaser .franchise-inner > div { max-width: 660px; }
    .community-teaser .franchise-inner > div:last-child { text-align: left !important; }
    .community-teaser .franchise-inner > div:last-child .btn {
      background: var(--ml-ink); color: var(--ml-white) !important;
      border-color: var(--ml-ink) !important;
    }

    @media (max-width: 900px) {
      /* ON A PHONE THE PHOTO IS A STRIP UNDER THE COPY, NOT A BACKDROP.
         The band goes tall and narrow here, and the copy runs to about 64%
         of it - so there is no height at which the badge is both below the
         type and still in frame. Stacking them solves it: solid pink behind
         every line of copy, then 300px of photograph beneath, framed on her
         torso so the badge lands in the middle of it. */
      .community-teaser {
        background-image:
          linear-gradient(180deg,
            var(--ml-pink) 0%, var(--ml-pink) 64%,
            rgba(255,140,224,.72) 70%,
            rgba(255,140,224,0) 76%),
          /* 1600w, not 1200w: at 340px tall the strip renders 884px wide,
             which is 1768 device px on a 2x phone - the 1200 would upscale */
          url('images/community/community-locals-1600w.webp');
        background-size: cover, auto 340px;
        background-position: center, 58% bottom;
        padding-bottom: 340px;
      }

        .franchise-inner {
      display: grid; grid-template-columns: 1.2fr .8fr; gap: 60px; align-items: center;
      position: relative;
    }
    .franchise-section h2 {
      font-family: var(--display); text-transform: uppercase;
      font-size: clamp(46px, 6.5vw, 96px); line-height: .9;
    }
    .franchise-section h2 .stroke { color: var(--ml-ink); }
    /* The head rotation paints eyebrows pink or blue, which is correct on ink
       and unreadable on a pink fill. On this ground everything goes to ink. */
    /* The element selector raises specificity above the rotation rule in
       ml-round2.css. Both are !important, and that file loads last, so equal
       specificity would lose on source order alone. */
    section.franchise-section:not(:where(.careers-teaser)) [class*="eyebrow"],
    section.franchise-section:not(:where(.careers-teaser)) .lbl,
    section.franchise-section:not(:where(.careers-teaser)) .num { color: var(--ml-ink) !important; }
    /* .careers-teaser reuses .franchise-section but sits on ink, not pink, so
       forcing ink there made the eyebrow invisible. The exclusion is inside
       :where() so it does not inflate specificity - the same trap that made the
       rotation rule in ml-round2.css unbeatable. */
    /* !important is not decoration here. The rotation rule in ml-round2.css is
       `.a-blue [class*="eyebrow"] { color: var(--ml-blue) !important }`, so a
       ground-specific correction has to match it or it loses. Without this the
       eyebrow rendered blue on the pink fill at 1.15:1. Any section that paints
       a brand colour behind its type needs the same treatment. */
    .franchise-section p { font-size: 18px; max-width: 520px; opacity: .95; margin-top: 16px; }
    .franchise-stats { display: flex; gap: 32px; flex-wrap: wrap; margin-top: 24px; }
    /* 26 Aug 2026 · Christian: "the 9 looks weird here. Do it in the thick
       font." It was set in var(--script) - Driftline - whose numerals are
       swashes built to sit inside a word, not to carry a stat on their own.
       Anton is what every other number on the site uses. Slightly larger and
       tightened, because Anton reads smaller than the script at equal px.
       .comm-stats overrides this to var(--display) already, so this rule now
       only reaches the franchise stat it was written for. */
    .stat .num {
      font-family: var(--display);
      font-size: 64px; line-height: .95; letter-spacing: -1px;
      font-weight: 400;
    }
    .stat .lbl { font-family: var(--tag); letter-spacing: 0; font-size: 22px; line-height: 1; opacity: .9; transform: rotate(-2deg); display: inline-block; }

    /* ============================================================
       CAREERS
       ============================================================ */
    .careers-section {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      padding-top: 140px;
      background:
        radial-gradient(900px 500px at 10% 20%, rgba(255,140,224,0.22), transparent 60%),
        radial-gradient(700px 400px at 90% 80%, rgba(91,208,230,0.18), transparent 60%),
        linear-gradient(180deg, rgba(5,5,5,0.78) 0%, rgba(5,5,5,0.92) 100%),
        url('images/atmosphere/crew.jpg') center/cover no-repeat,
        var(--ml-black);
    }
    .careers-section .container { position: relative; z-index: 2; }
    @media (max-width: 760px) {
      /* Slightly darker overlay on mobile so the smaller fonts still pop */
      .careers-section {
        background:
          radial-gradient(700px 400px at 50% 0%, rgba(255,140,224,0.20), transparent 60%),
          linear-gradient(180deg, rgba(5,5,5,0.88) 0%, rgba(5,5,5,0.95) 100%),
          url('images/atmosphere/crew.jpg') center/cover no-repeat,
          var(--ml-black);
      }
    }
    /* Centered head */
    .careers-head { text-align: center; max-width: 760px; margin: 0 auto 48px; }
    .careers-head .section-title { font-size: clamp(48px, 7vw, 96px); }

    /* Perks row · full width, 4 across */
    .careers-perks {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
      margin: 0 0 80px;
    }
    .perk {
      padding: 18px; border: 1px solid var(--ml-border); border-radius: var(--radius);
      background: rgba(255,255,255,0.03);
    }
    .perk .icon {
      width: 40px; height: 40px; border-radius: 12px; background: var(--ml-pink);
      display: flex; align-items: center; justify-content: center; margin-bottom: 10px;
      font-family: var(--display); font-size: 18px;
    }
    .perk h4 { font-family: var(--display); text-transform: uppercase; font-size: 18px; letter-spacing: 1px; }
    .perk p { color: var(--ml-text); font-size: 14px; margin-top: 4px; font-weight: 500; }

    /* Open roles head */
    .careers-roles-head {
      text-align: center; max-width: 720px; margin: 0 auto 32px;
    }
    .careers-roles-title {
      font-family: var(--display); text-transform: uppercase;
      font-size: clamp(28px, 3.5vw, 44px); line-height: .95; letter-spacing: -.5px;
      margin-top: 6px;
    }
    .careers-roles-title .pink { color: var(--ml-pink); }

    /* Roles grid */
    .roles-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
      margin-bottom: 48px;
    }
    .role-card {
      position: relative;
      padding: 24px 24px 22px;
      background: linear-gradient(180deg, rgba(20,20,22,0.85) 0%, rgba(10,10,12,0.92) 100%);
      backdrop-filter: blur(8px);
      border: 1px solid var(--ml-border);
      border-radius: var(--radius);
      display: flex; flex-direction: column; gap: 10px;
      transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    }
    .role-card:hover {
      transform: translateY(-4px);
      border-color: rgba(255,140,224,0.5);
      box-shadow: 0 18px 38px -16px rgba(0,0,0,0.3);
    }
    .role-card__top {
      display: flex; flex-wrap: wrap; gap: 8px;
      font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600;
      letter-spacing: .04em;
    }
    .role-card__type {
      padding: 4px 10px; border-radius: 999px;
      background: rgba(255,140,224,0.12);
      color: var(--ml-pink);
      border: 1px solid rgba(255,140,224,0.35);
      text-transform: uppercase;
    }
    .role-card__location {
      padding: 4px 10px; border-radius: 999px;
      background: rgba(91,208,230,0.08);
      color: rgba(91,208,230,0.95);
      border: 1px solid rgba(91,208,230,0.30);
    }
    .role-card__title {
      font-family: var(--display); text-transform: uppercase;
      font-size: 22px; line-height: 1.05; letter-spacing: 0.5px;
      color: var(--ml-white);
      margin: 4px 0 0;
    }
    .role-card__desc {
      color: var(--ml-text);
      font-size: 14px; line-height: 1.5; flex: 1; font-weight: 500;
    }
    .role-card__cta {
      align-self: flex-start;
      font-family: var(--display); text-transform: uppercase;
      letter-spacing: 1.4px; font-size: 13px;
      color: var(--ml-pink);
      display: inline-flex; align-items: center; gap: 6px;
      margin-top: 4px;
    }
    .role-card__cta .arrow { transition: transform .2s ease; }
    .role-card:hover .role-card__cta .arrow { transform: translateX(4px); }

    /* ========== Careers · Application form ========== */
    .careers-apply {
      margin: 60px auto 0;
      max-width: 880px;
      background: linear-gradient(180deg, #131316 0%, #0A0A0C 100%);
      border: 1px solid var(--ml-border);
      border-radius: var(--radius-lg);
      padding: 44px 44px 40px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    }
    .careers-apply__head { text-align: center; margin-bottom: 32px; }
    .careers-apply__title {
      font-family: var(--display); text-transform: uppercase;
      font-size: clamp(34px, 4.5vw, 54px); line-height: 0.95; letter-spacing: -.3px;
      margin: 10px 0 8px;
    }
    .careers-apply__title .pink { color: var(--ml-pink); }
    .careers-apply__sub { color: var(--ml-text); font-size: 15px; max-width: 580px; margin: 0 auto; font-weight: 500; }

    .careers-form__grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px;
      margin-bottom: 20px;
    }
    .careers-form__field { display: flex; flex-direction: column; gap: 6px; }
    .careers-form__field--full { grid-column: 1 / -1; }
    .careers-form__label {
      font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700;
      letter-spacing: .14em; text-transform: uppercase;
      color: var(--ml-text-dim);
    }
    .careers-form input[type=text],
    .careers-form input[type=email],
    .careers-form input[type=tel],
    .careers-form input[type=date],
    .careers-form select,
    .careers-form textarea {
      width: 100%; padding: 12px 14px;
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--ml-border); border-radius: 10px;
      color: #fff; font-family: 'Inter', sans-serif; font-size: 14px;
      transition: border-color .25s ease, background .25s ease;
    }
    .careers-form input::placeholder,
    .careers-form textarea::placeholder { color: rgba(255,255,255,0.35); }
    .careers-form input:focus,
    .careers-form select:focus,
    .careers-form textarea:focus {
      outline: none; border-color: var(--ml-pink);
      background: rgba(255,140,224,0.06);
    }
    .careers-form select { appearance: none; -webkit-appearance: none;
      background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%);
      background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
      background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
      padding-right: 38px;
    }
    .careers-form textarea { resize: vertical; min-height: 100px; }

    .careers-form__fieldset {
      border: 1px solid var(--ml-border); border-radius: 12px;
      padding: 14px 16px; margin: 0 0 18px;
    }
    .careers-form__fieldset legend { padding: 0 8px; }
    .careers-form__pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
    .careers-form__pill {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 7px 12px; border-radius: 999px;
      background: rgba(255,255,255,0.04); border: 1px solid var(--ml-border);
      font-family: 'Inter', sans-serif; font-size: 13px; color: #fff;
      cursor: pointer;
      transition: background .25s ease, border-color .25s ease, transform .25s ease;
    }
    .careers-form__pill input { accent-color: var(--ml-pink); cursor: pointer; }
    .careers-form__pill:hover { border-color: var(--ml-pink); transform: translateY(-1px); }
    .careers-form__pill:has(input:checked) {
      background: rgba(255,140,224,0.15); border-color: var(--ml-pink);
    }

    /* File input · custom upload area */
    .careers-form__file { position: relative; }
    .careers-form__file input[type=file] {
      width: 100%; padding: 14px;
      background: rgba(255,255,255,0.04);
      border: 1.5px dashed var(--ml-border); border-radius: 12px;
      color: #fff; font-family: 'Inter', sans-serif; font-size: 13px;
      cursor: pointer;
      transition: border-color .25s ease, background .25s ease;
    }
    .careers-form__file input[type=file]:hover,
    .careers-form__file input[type=file]:focus {
      border-color: var(--ml-pink); background: rgba(255,140,224,0.05);
      outline: none;
    }
    .careers-form__file input[type=file]::file-selector-button {
      margin-right: 12px; padding: 8px 14px; border-radius: 8px;
      background: var(--ml-pink); color: var(--ml-ink, #0E0E10); border: 0;
      font-family: var(--display); font-size: 12px; letter-spacing: .12em;
      cursor: pointer;
    }
    .careers-form__file-hint {
      display: block; margin-top: 6px;
      color: var(--ml-text-dim); font-size: 11px;
    }

    .careers-form__cta-row {
      display: flex; flex-direction: column; align-items: center; gap: 10px;
      margin-top: 22px; text-align: center;
    }
    .careers-form__submit { min-width: 240px; }
    .careers-form__fine { color: var(--ml-text-dim); font-size: 11px; max-width: 480px; line-height: 1.4; }

    .careers-form__success {
      margin-top: 20px; padding: 14px 18px; border-radius: 10px;
      background: rgba(91,208,230,0.08); border: 1px solid var(--ml-blue);
      color: var(--ml-blue); font-size: 14px;
    }
    .careers-form__success strong { color: #fff; }
    .careers-form__error {
      margin-top: 20px; padding: 14px 18px; border-radius: 10px;
      background: rgba(255,80,80,0.08); border: 1px solid rgba(255,80,80,0.5);
      color: #ff9b9b; font-size: 14px;
    }
    .careers-form__error a { color: var(--ml-pink); }

    @media (max-width: 1024px) {
      .careers-perks { grid-template-columns: repeat(2, 1fr); }
      .roles-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 640px) {
      .careers-perks, .roles-grid { grid-template-columns: 1fr; }
      .role-card { padding: 20px; }
      .careers-apply { padding: 32px 22px 28px; }
      .careers-form__grid { grid-template-columns: 1fr; }
    }

    /* ============================================================
       FOOTER
       ============================================================ */
    .site-footer {
      background: #030303; padding: 80px 0 32px; border-top: 1px solid var(--ml-border);
    }
    .footer-grid {
      display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 56px;
    }
    .footer-brand img { height: 64px; margin-bottom: 18px; }
    .footer-brand p { color: var(--ml-text); font-size: 14px; max-width: 320px; }
    .footer-col h4 {
      font-family: var(--display); text-transform: uppercase; letter-spacing: 1.5px; font-size: 16px;
      margin-bottom: 14px; color: var(--ml-pink);
    }
    .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
    .footer-col a { color: var(--ml-text-dim); font-size: 14px; transition: color .2s ease; }
    .footer-col a:hover { color: var(--ml-white); }

    .footer-bottom {
      display: flex; justify-content: space-between; align-items: center;
      padding-top: 24px; border-top: 1px solid var(--ml-border);
      color: var(--ml-text-dim); font-size: 13px; flex-wrap: wrap; gap: 14px;
    }
    .footer-socials { display: flex; gap: 10px; }
    .footer-socials a {
      width: 40px; height: 40px; border-radius: 50%;
      border: 1px solid var(--ml-border); display: flex; align-items: center; justify-content: center;
      transition: background .2s ease, border-color .2s ease;
    }
    .footer-socials a:hover { background: var(--ml-pink); border-color: var(--ml-pink); }
    .footer-legal { display: flex; gap: 16px; }

    /* ============================================================
       SCROLL REVEAL
       ============================================================ */
    .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
    .reveal.in { opacity: 1; transform: none; }

    /* ============================================================
       RESPONSIVE
       ============================================================ */
    @media (max-width: 1024px) {
      .hero-grid { grid-template-columns: 1fr; gap: 40px; }
      .hero-art { max-width: 480px; margin: 0 auto; }
      .hero { padding-top: 110px; min-height: auto; }
      .functions-grid, .careers-grid, .franchise-inner { grid-template-columns: 1fr; gap: 40px; }
      .week-grid { grid-template-columns: repeat(2, 1fr); }
      .week-card.fri, .week-card.sat { grid-column: span 1; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .tile.t-lg, .tile.t-md, .tile.t-sm, .tile.t-wide, .tile.t-tall { grid-column: span 6; min-height: 260px; }
      .may-grid { grid-template-columns: repeat(2, 1fr); }
      .may-card, .may-card.may-feature, .may-card.may-feature + .may-card { grid-column: span 1; min-height: 380px; }
      .monthly-grid { grid-template-columns: repeat(2, 1fr); }
      .monthly-card.span-2 { grid-column: span 2; }
    }
    @media (max-width: 720px) {
      section { padding: 80px 0; }
      .week-grid { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
      .tile.t-lg, .tile.t-md, .tile.t-sm, .tile.t-wide, .tile.t-tall { grid-column: span 12; min-height: 240px; }
      .may-grid { grid-template-columns: 1fr; }
      .may-card, .may-card.may-feature, .may-card.may-feature + .may-card { grid-column: span 1; min-height: 360px; }
      .monthly-grid { grid-template-columns: 1fr; }
      .monthly-card, .monthly-card.span-2 { grid-column: span 1; min-height: 320px; }
      .monthly-card.span-2 h3 { font-size: clamp(28px, 8vw, 40px); }
      .hero-stamp { width: 110px; height: 110px; font-size: 13px; }
      .hero h1 { font-size: clamp(48px, 13vw, 72px); }
      .careers-perks { grid-template-columns: 1fr; }
      .footer-bottom { flex-direction: column; align-items: flex-start; }
    }
    @media (min-width: 961px) { .header-ctas .btn--mobile { display: none; } }

/* ============================================================
   MOBILE NAV REWORK · added for cleaner mobile experience
   ============================================================ */
/* Tablet · narrow CTAs, keep main nav */
@media (max-width: 1100px) {
  .header-ctas .btn--secondary,
  .header-ctas .btn--ghost { display: none; }
}
/* Switch to hamburger nav early enough for iPad portrait + tablets */
@media (max-width: 960px) {
  .nav-main { display: none; }
  .header-ctas .btn--secondary,
  .header-ctas .btn--primary { display: none; }
  .header-ctas .btn--mobile { display: inline-flex; padding: 10px 16px; font-size: 14px; }
  .menu-toggle { display: flex; }
  .header-inner { gap: 12px; padding: 0 16px; }
  .logo img { height: 48px; }
  .site-header.compact .logo img { height: 40px; }
}
@media (max-width: 480px) {
  .header-inner { height: 70px; padding: 0 14px; }
  .logo img { height: 42px; }
  .site-header.compact .header-inner { height: 58px; }
  .site-header.compact .logo img { height: 36px; }
  .header-ctas .btn--mobile { padding: 8px 12px; font-size: 13px; letter-spacing: 1px; }
  .menu-toggle { width: 42px; height: 42px; }
  .mobile-menu { inset: 70px 0 0 0; padding: 20px 18px 40px; }
  .mobile-menu a { font-size: 22px; padding: 14px 6px; letter-spacing: 1.2px; }
  .mobile-menu .nav-dropdown__trigger { font-size: 22px; padding: 14px 6px; }
  .mobile-menu .nav-dropdown__panel a { font-size: 18px; padding: 12px 20px; }
}

/* ============================================================
   TOUCH-DEVICE HOVER-ON-SCROLL
   When the device has no hover (phones / tablets), the JS marks
   <body class="is-touch"> and toggles .in-view on cards as they
   centre in the viewport. Mirror the :hover treatments to .in-view
   so the lift / scale / glow animations play during scroll.
   ============================================================ */
@media (hover: none) {
  /* Card lift + pink border + glow */
  body.is-touch .sd-card.in-view,
  body.is-touch .burger-card.in-view,
  body.is-touch .shake-card.in-view,
  body.is-touch .product-card.in-view,
  body.is-touch .item-card.in-view,
  body.is-touch .week-card.in-view,
  body.is-touch .may-card.in-view,
  body.is-touch .monthly-card.in-view,
  body.is-touch .tile.in-view,
  body.is-touch .insta-tile.in-view,
  body.is-touch .loc-card.in-view,
  body.is-touch .role-card.in-view,
  body.is-touch .follow-card.in-view,
  body.is-touch .platter-card.in-view,
  body.is-touch .feature-card.in-view,
  body.is-touch .has-hover-video.in-view {
    transform: translateY(-6px);
    border-color: var(--ml-pink);
    box-shadow: var(--shadow-pink);
  }

  /* Image zoom inside cards with .art / .img wrapper */
  body.is-touch .sd-card.in-view .art img,
  body.is-touch .burger-card.in-view .art img,
  body.is-touch .shake-card.in-view .art img,
  body.is-touch .product-card.in-view .art img,
  body.is-touch .product-card.in-view .img-wrap img,
  body.is-touch .item-card.in-view .art img,
  body.is-touch .item-card.in-view .img-wrap img,
  body.is-touch .may-card.in-view img,
  body.is-touch .monthly-card.in-view img,
  body.is-touch .tile.in-view img,
  body.is-touch .insta-tile.in-view img,
  body.is-touch .loc-card.in-view img {
    transform: scale(1.05);
  }
  /* Mirror the desktop hover shadow swap on touch · black shadows look like
     dark boxes once the card lifts into its pink/blue glow state */
  body.is-touch .product-card.in-view .img-wrap img,
  body.is-touch .item-card.in-view .img-wrap img {
    filter: drop-shadow(0 14px 26px rgba(0,0,0,0.28));
  }

  /* Order arrow slide */
  body.is-touch .sd-card.in-view .order .arrow,
  body.is-touch .burger-card.in-view .order .arrow,
  body.is-touch .shake-card.in-view .order .arrow {
    transform: translateX(4px);
  }

  /* Wing flavour tiles · gentle scale */
  body.is-touch .wing-card.in-view {
    transform: translateY(-3px);
    border-color: var(--ml-pink);
  }

  /* Beer / text row hover background */
  body.is-touch .beer-row.in-view,
  body.is-touch .text-row.in-view {
    background: rgba(255,140,224,0.06);
  }

  /* Build promo art parallax-like lift */
  body.is-touch .build-promo__art.in-view {
    transform: translateY(-4px);
  }
}


    /* ---------- Careers form · blocks, errors, consent ----------
       Added 26 Aug 2026 with the application rewrite. The form was
       previously one flat grid; at six sections that reads as a
       wall, so each section is a titled block with a step number.
       Error styling is here too: the old markup had a red success
       and error paragraph but nothing that could mark a single
       field, because no validation existed to mark one. */
    .careers-form__block {
      border: 1px solid var(--ml-border);
      border-radius: 14px;
      padding: 18px 20px 20px;
      margin: 0 0 18px;
    }
    .careers-form__legend {
      display: flex; align-items: center; gap: 10px;
      padding: 0 10px;
      font-family: var(--display); text-transform: uppercase;
      font-size: 15px; letter-spacing: .1em;
      color: var(--ml-text);
    }
    .careers-form__step {
      display: inline-flex; align-items: center; justify-content: center;
      width: 22px; height: 22px; border-radius: 999px;
      background: var(--ml-pink, #FF8CE0);
      color: var(--ml-ink, #0E0E10);        /* D1 · ink on pink, 9.26:1 */
      font-size: 12px; line-height: 1;
    }
    .careers-form__hint {
      display: block; margin-top: 4px;
      color: var(--ml-text-dim); font-size: 11.5px; line-height: 1.45;
    }
    .careers-form__hint--block { margin: 2px 0 12px; }

    /* The asterisk is decorative - every required field also says so in its
       error text, so a screen reader is never left guessing at a symbol. */
    .careers-form .req { color: var(--ml-pink, #FF8CE0); font-weight: 700; }

    .careers-form__conditional[hidden] { display: none; }

    .careers-form__consent {
      display: flex; align-items: flex-start; gap: 10px;
      margin-top: 16px;
      font-family: 'Inter', sans-serif; font-size: 13.5px; line-height: 1.5;
      color: var(--ml-text);
    }
    .careers-form__consent input { margin-top: 3px; accent-color: var(--ml-pink); flex: 0 0 auto; }

    /* Invalid state · a red border alone fails on its own (colour as the only
       cue), so every one of these also carries a written message. */
    .careers-form .is-invalid input,
    .careers-form .is-invalid select,
    .careers-form .is-invalid textarea { border-color: #FF6B6B; background: rgba(255,107,107,.07); }
    .careers-form fieldset.is-invalid { border-color: #FF6B6B; }
    .careers-form__err {
      display: block; margin-top: 5px;
      color: #FF9E9E; font-size: 12px; font-weight: 600;
    }
    .careers-form__summary {
      margin: 14px 0 0; padding: 12px 14px;
      border: 1px solid #FF6B6B; border-radius: 10px;
      background: rgba(255,107,107,.08);
      color: #FFC9C9; font-size: 13.5px; font-weight: 600;
    }
    .careers-form__success[hidden], .careers-form__error[hidden],
    .careers-form__summary[hidden] { display: none; }

    @media (max-width: 640px) {
      .careers-form__grid { grid-template-columns: 1fr; }
      .careers-form__block { padding: 14px 14px 16px; }
    }
/* .atmo-band retired 26 Aug 2026 · those bands are ordinary .ml-divider
   elements now, so the whole site reveals the same way. The component was
   duplicated here and in the other stylesheet, on disjoint page sets -
   the third component in this codebase found in two places at once. */