/* =========================================================
   Tailwater Fly Co. — design system
   Dark charcoal + warm off-white + orange spot accent.
   Reference language adapted from garnsgear.com (see design-brief.md)
   ========================================================= */

/* 8-bit face — used only for the header promo memo */
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");

/* ---------- Tokens ---------- */
:root {
  --bg:              #121212;
  --surface-1:       #1a1a1a;
  --surface-2:       #202020;
  --surface-inset:   #161616;

  --text:            #f5f1ea;
  --text-muted:      rgba(245, 241, 234, 0.70);
  --text-faint:      rgba(245, 241, 234, 0.48);

  --border:          rgba(245, 241, 234, 0.14);
  --border-strong:   rgba(245, 241, 234, 0.30);

  --accent:          #e8632a;
  --accent-bright:   #ff7a3d;
  --accent-dim:      rgba(232, 99, 42, 0.14);

  --cal-open:        #8fae90;                    /* available-day accent (sage) */
  --cal-open-dim:    rgba(143, 174, 144, 0.13);  /* available-day fill */

  --radius:          8px;
  --radius-sm:       4px;
  --radius-pill:     999px;
  --shadow:          0 20px 44px rgba(0, 0, 0, 0.35);
  --shadow-lg:       0 30px 80px rgba(0, 0, 0, 0.55);

  --container:       1400px;
  --gutter:          clamp(20px, 5vw, 72px);
  --section-pad:     clamp(56px, 9vw, 100px);
  --band-pad:        clamp(80px, 12vw, 140px);

  --font-display: "Oswald", "Koulen", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:       0.15s;
  --dur-mid:        0.3s;
  --dur-slow:       0.5s;

  /* faint contour-line texture used behind image placeholders */
  --topo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Cg fill='none' stroke='%23f5f1ea' stroke-opacity='0.06' stroke-width='1.4'%3E%3Cpath d='M0 70C140 20 420 120 560 66'/%3E%3Cpath d='M0 140C160 96 400 180 560 132'/%3E%3Cpath d='M0 210C120 260 440 150 560 214'/%3E%3Cpath d='M0 280C170 240 390 330 560 286'/%3E%3Cpath d='M0 350C140 400 430 300 560 356'/%3E%3Cpath d='M0 420C160 372 400 470 560 414'/%3E%3Cpath d='M0 490C120 540 440 430 560 496'/%3E%3Cpath d='M0 560C170 520 390 600 560 552'/%3E%3C/g%3E%3C/svg%3E");
  /* section-scoped, non-repeating contour fields (see also --topo-a/b/c) */
  --topo-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='760' viewBox='0 0 1200 760' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23f5f1ea' stroke-opacity='0.06' stroke-linecap='round'%3E%3Cpath d='M0 70.0 C25 72.5 100 80.6 150 85.0 C200 89.4 250 93.4 300 96.2 C350 99.0 400 100.7 450 101.9 C500 103.1 550 103.1 600 103.4 C650 103.8 700 103.5 750 103.9 C800 104.4 850 105.0 900 106.1 C950 107.2 1000 109.0 1050 110.4 C1100 111.9 1175 114.3 1200 115.1' stroke-width='0.80'/%3E%3Cpath d='M0 174.9 C25 176.2 100 181.1 150 182.7 C200 184.4 250 184.8 300 185.0 C350 185.2 400 184.4 450 184.2 C500 184.0 550 183.5 600 183.8 C650 184.1 700 184.8 750 185.9 C800 186.9 850 188.7 900 190.0 C950 191.4 1000 193.1 1050 194.0 C1100 194.8 1175 195.1 1200 195.3' stroke-width='0.94'/%3E%3Cpath d='M0 266.2 C25 266.0 100 265.8 150 265.3 C200 264.7 250 263.4 300 262.9 C350 262.4 400 262.0 450 262.4 C500 262.7 550 263.8 600 265.0 C650 266.1 700 268.0 750 269.4 C800 270.7 850 272.2 900 273.0 C950 273.8 1000 274.1 1050 274.2 C1100 274.3 1175 273.7 1200 273.6' stroke-width='1.09'/%3E%3Cpath d='M0 343.2 C25 342.7 100 340.7 150 340.3 C200 339.9 250 339.9 300 340.6 C350 341.3 400 342.8 450 344.3 C500 345.8 550 347.9 600 349.3 C650 350.8 700 352.2 750 353.1 C800 354.0 850 354.3 900 354.7 C950 355.1 1000 355.0 1050 355.7 C1100 356.4 1175 358.6 1200 359.2' stroke-width='1.23'/%3E%3Cpath d='M0 417.4 C25 417.8 100 418.2 150 419.4 C200 420.7 250 422.9 300 424.7 C350 426.6 400 429.0 450 430.7 C500 432.4 550 433.8 600 434.9 C650 436.1 700 436.5 750 437.5 C800 438.4 850 438.9 900 440.4 C950 442.0 1000 443.9 1050 446.8 C1100 449.8 1175 456.2 1200 458.1' stroke-width='1.37'/%3E%3Cpath d='M0 499.8 C25 501.0 100 504.6 150 506.9 C200 509.3 250 511.8 300 513.8 C350 515.8 400 517.3 450 518.7 C500 520.2 550 521.0 600 522.4 C650 523.9 700 525.2 750 527.5 C800 529.8 850 532.7 900 536.4 C950 540.0 1000 544.8 1050 549.4 C1100 554.0 1175 561.7 1200 564.1' stroke-width='1.51'/%3E%3Cpath d='M0 591.2 C25 592.5 100 596.7 150 598.9 C200 601.1 250 602.7 300 604.4 C350 606.1 400 607.3 450 609.3 C500 611.2 550 613.2 600 616.1 C650 619.1 700 622.7 750 626.8 C800 630.8 850 635.8 900 640.3 C950 644.7 1000 649.7 1050 653.4 C1100 657.1 1175 660.9 1200 662.4' stroke-width='1.66'/%3E%3Cpath d='M0 685.7 C25 686.6 100 689.6 150 691.5 C200 693.4 250 694.9 300 697.3 C350 699.6 400 702.2 450 705.4 C500 708.7 550 712.8 600 716.8 C650 720.8 700 725.6 750 729.4 C800 733.3 850 737.3 900 739.8 C950 742.4 1000 744.2 1050 744.8 C1100 745.5 1175 744.1 1200 743.9' stroke-width='1.80'/%3E%3C/g%3E%3C/svg%3E");
  --topo-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='760' viewBox='0 0 1200 760' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23f5f1ea' stroke-opacity='0.058' stroke-linecap='round'%3E%3Cpath d='M0 94.0 C20 95.4 80 100.5 120 102.7 C160 104.9 200 106.7 240 107.4 C280 108.1 320 107.9 360 106.8 C400 105.6 440 103.3 480 100.6 C520 97.9 560 94.1 600 90.5 C640 86.9 680 82.7 720 79.1 C760 75.5 800 71.8 840 68.8 C880 65.8 920 63.2 960 61.0 C1000 58.8 1040 57.1 1080 55.5 C1120 53.8 1180 51.7 1200 50.9' stroke-width='0.80'/%3E%3Cpath d='M0 150.0 C20 150.2 80 150.9 120 151.3 C160 151.6 200 152.0 240 151.9 C280 151.8 320 151.7 360 150.9 C400 150.2 440 149.0 480 147.4 C520 145.9 560 143.7 600 141.4 C640 139.2 680 136.4 720 133.7 C760 131.1 800 128.2 840 125.4 C880 122.7 920 119.9 960 117.2 C1000 114.6 1040 112.0 1080 109.4 C1120 106.9 1180 103.2 1200 102.0' stroke-width='0.90'/%3E%3Cpath d='M0 190.5 C20 190.9 80 192.1 120 193.3 C160 194.6 200 196.5 240 197.9 C280 199.3 320 201.0 360 201.8 C400 202.6 440 203.0 480 202.6 C520 202.1 560 200.9 600 199.1 C640 197.4 680 194.7 720 192.0 C760 189.3 800 185.9 840 182.8 C880 179.7 920 176.3 960 173.4 C1000 170.6 1040 167.8 1080 165.6 C1120 163.5 1180 161.5 1200 160.7' stroke-width='1.00'/%3E%3Cpath d='M0 241.6 C20 243.0 80 247.4 120 250.3 C160 253.2 200 256.7 240 259.2 C280 261.7 320 264.1 360 265.2 C400 266.3 440 266.7 480 266.1 C520 265.6 560 263.8 600 261.8 C640 259.9 680 256.8 720 254.2 C760 251.5 800 248.3 840 246.0 C880 243.6 920 241.4 960 240.0 C1000 238.7 1040 238.0 1080 238.1 C1120 238.1 1180 240.0 1200 240.4' stroke-width='1.10'/%3E%3Cpath d='M0 312.9 C20 314.5 80 320.0 120 322.9 C160 325.9 200 328.8 240 330.7 C280 332.6 320 334.0 360 334.5 C400 335.0 440 334.6 480 333.9 C520 333.2 560 331.5 600 330.1 C640 328.7 680 326.8 720 325.6 C760 324.3 800 323.2 840 322.7 C880 322.3 920 322.4 960 323.1 C1000 323.7 1040 325.1 1080 326.6 C1120 328.1 1180 331.1 1200 332.0' stroke-width='1.20'/%3E%3Cpath d='M0 392.2 C20 393.3 80 396.7 120 398.5 C160 400.3 200 401.8 240 403.0 C280 404.2 320 405.0 360 405.6 C400 406.1 440 406.3 480 406.5 C520 406.6 560 406.4 600 406.5 C640 406.5 680 406.4 720 406.6 C760 406.7 800 407.1 840 407.4 C880 407.8 920 408.4 960 408.7 C1000 409.1 1040 409.6 1080 409.6 C1120 409.5 1180 408.8 1200 408.7' stroke-width='1.30'/%3E%3Cpath d='M0 466.2 C20 466.8 80 468.5 120 469.8 C160 471.1 200 472.7 240 474.1 C280 475.5 320 477.0 360 478.3 C400 479.6 440 480.8 480 481.6 C520 482.4 560 483.0 600 483.2 C640 483.3 680 483.1 720 482.5 C760 481.9 800 480.9 840 479.4 C880 478.0 920 476.1 960 473.9 C1000 471.8 1040 469.1 1080 466.3 C1120 463.5 1180 458.7 1200 457.2' stroke-width='1.40'/%3E%3Cpath d='M0 533.4 C20 534.1 80 536.0 120 537.5 C160 539.1 200 541.0 240 542.5 C280 544.0 320 545.6 360 546.4 C400 547.1 440 547.6 480 547.2 C520 546.8 560 545.8 600 544.0 C640 542.3 680 539.7 720 536.8 C760 533.9 800 530.3 840 526.7 C880 523.2 920 519.1 960 515.4 C1000 511.8 1040 508.0 1080 504.8 C1120 501.6 1180 497.7 1200 496.3' stroke-width='1.50'/%3E%3Cpath d='M0 596.0 C20 596.5 80 598.4 120 599.2 C160 600.0 200 600.9 240 600.9 C280 601.0 320 600.6 360 599.5 C400 598.4 440 596.6 480 594.2 C520 591.9 560 588.7 600 585.6 C640 582.4 680 578.6 720 575.2 C760 571.8 800 568.2 840 565.4 C880 562.5 920 559.9 960 558.1 C1000 556.3 1040 555.1 1080 554.7 C1120 554.2 1180 555.2 1200 555.3' stroke-width='1.60'/%3E%3Cpath d='M0 651.8 C20 651.5 80 651.2 120 650.4 C160 649.6 200 648.3 240 646.8 C280 645.2 320 643.2 360 641.2 C400 639.1 440 636.7 480 634.6 C520 632.5 560 630.2 600 628.5 C640 626.9 680 625.4 720 624.7 C760 623.9 800 623.7 840 624.1 C880 624.5 920 625.7 960 627.1 C1000 628.6 1040 630.8 1080 632.9 C1120 635.1 1180 638.8 1200 640.0' stroke-width='1.70'/%3E%3Cpath d='M0 702.1 C20 701.5 80 699.4 120 698.1 C160 696.8 200 695.5 240 694.5 C280 693.6 320 692.8 360 692.6 C400 692.4 440 692.5 480 693.2 C520 693.9 560 695.1 600 696.7 C640 698.3 680 700.5 720 702.8 C760 705.0 800 707.8 840 710.3 C880 712.9 920 715.7 960 718.0 C1000 720.4 1040 722.7 1080 724.4 C1120 726.2 1180 727.9 1200 728.5' stroke-width='1.80'/%3E%3C/g%3E%3C/svg%3E");
  --topo-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='760' viewBox='0 0 1200 760' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23f5f1ea' stroke-opacity='0.055' stroke-linecap='round'%3E%3Cpath d='M0 48.8 C20 50.1 80 55.3 120 56.7 C160 58.0 200 58.1 240 57.0 C280 55.9 320 52.9 360 50.2 C400 47.4 440 43.5 480 40.3 C520 37.2 560 34.0 600 31.1 C640 28.2 680 25.8 720 22.7 C760 19.7 800 16.7 840 12.9 C880 9.1 920 4.6 960 0.2 C1000 -4.2 1040 -9.4 1080 -13.5 C1120 -17.6 1180 -22.4 1200 -24.2' stroke-width='0.80'/%3E%3Cpath d='M0 100.2 C20 98.1 80 92.6 120 87.7 C160 82.7 200 76.0 240 70.4 C280 64.8 320 58.8 360 54.2 C400 49.6 440 45.9 480 42.8 C520 39.7 560 38.0 600 35.7 C640 33.4 680 31.7 720 29.0 C760 26.4 800 23.2 840 19.9 C880 16.5 920 12.4 960 9.0 C1000 5.5 1040 2.0 1080 -0.8 C1120 -3.6 1180 -6.7 1200 -7.9' stroke-width='0.88'/%3E%3Cpath d='M0 107.7 C20 105.0 80 96.1 120 91.3 C160 86.6 200 82.2 240 79.3 C280 76.3 320 74.8 360 73.4 C400 71.9 440 71.9 480 70.8 C520 69.6 560 68.6 600 66.3 C640 64.0 680 60.6 720 57.0 C760 53.3 800 48.4 840 44.3 C880 40.3 920 35.9 960 32.6 C1000 29.3 1040 26.8 1080 24.7 C1120 22.6 1180 20.7 1200 19.9' stroke-width='0.97'/%3E%3Cpath d='M0 131.5 C20 130.3 80 126.1 120 124.2 C160 122.4 200 121.8 240 120.7 C280 119.6 320 119.3 360 117.7 C400 116.1 440 114.2 480 111.3 C520 108.4 560 104.1 600 100.3 C640 96.5 680 91.6 720 88.3 C760 85.0 800 81.9 840 80.6 C880 79.2 920 79.2 960 79.9 C1000 80.6 1040 82.8 1080 84.5 C1120 86.2 1180 89.2 1200 90.1' stroke-width='1.05'/%3E%3Cpath d='M0 179.2 C20 178.4 80 175.9 120 174.6 C160 173.3 200 172.7 240 171.4 C280 170.1 320 168.6 360 166.9 C400 165.1 440 162.6 480 160.9 C520 159.2 560 157.3 600 156.9 C640 156.5 680 157.0 720 158.7 C760 160.3 800 163.7 840 166.7 C880 169.7 920 174.1 960 176.7 C1000 179.4 1040 182.0 1080 182.9 C1120 183.7 1180 182.1 1200 182.0' stroke-width='1.13'/%3E%3Cpath d='M0 241.3 C20 241.8 80 243.3 120 244.3 C160 245.3 200 246.5 240 247.2 C280 248.0 320 248.2 360 248.7 C400 249.1 440 249.3 480 250.1 C520 251.0 560 252.3 600 253.7 C640 255.0 680 257.3 720 258.3 C760 259.3 800 260.5 840 259.7 C880 258.8 920 256.7 960 253.1 C1000 249.6 1040 243.9 1080 238.2 C1120 232.5 1180 222.2 1200 219.0' stroke-width='1.22'/%3E%3Cpath d='M0 338.5 C20 339.3 80 342.4 120 342.8 C160 343.3 200 342.4 240 341.1 C280 339.8 320 337.2 360 334.9 C400 332.6 440 330.0 480 327.3 C520 324.5 560 322.0 600 318.6 C640 315.2 680 311.5 720 306.7 C760 301.8 800 295.9 840 289.5 C880 283.2 920 275.4 960 268.7 C1000 261.9 1040 254.6 1080 249.2 C1120 243.8 1180 238.3 1200 236.1' stroke-width='1.30'/%3E%3Cpath d='M0 418.5 C20 416.0 80 409.1 120 403.4 C160 397.7 200 390.5 240 384.3 C280 378.2 320 371.8 360 366.4 C400 360.9 440 356.2 480 351.6 C520 347.0 560 343.0 600 338.6 C640 334.2 680 329.6 720 325.3 C760 320.9 800 316.0 840 312.3 C880 308.6 920 305.1 960 303.1 C1000 301.0 1040 300.2 1080 300.1 C1120 299.9 1180 301.7 1200 302.0' stroke-width='1.38'/%3E%3Cpath d='M0 437.7 C20 434.3 80 423.0 120 417.3 C160 411.7 200 407.0 240 403.7 C280 400.4 320 398.9 360 397.4 C400 395.9 440 395.8 480 394.9 C520 394.0 560 393.3 600 392.1 C640 391.0 680 389.3 720 388.0 C760 386.8 800 385.4 840 384.8 C880 384.2 920 384.3 960 384.4 C1000 384.6 1040 385.7 1080 385.9 C1120 386.1 1180 385.6 1200 385.6' stroke-width='1.47'/%3E%3Cpath d='M0 475.3 C20 475.1 80 473.5 120 474.0 C160 474.4 200 476.8 240 478.2 C280 479.7 320 481.9 360 482.6 C400 483.4 440 483.5 480 482.7 C520 482.0 560 479.9 600 478.3 C640 476.6 680 474.2 720 472.8 C760 471.4 800 470.4 840 469.9 C880 469.3 920 469.7 960 469.6 C1000 469.5 1040 469.7 1080 469.2 C1120 468.7 1180 467.1 1200 466.6' stroke-width='1.55'/%3E%3Cpath d='M0 571.2 C20 572.0 80 574.9 120 575.9 C160 576.9 200 577.9 240 577.4 C280 576.9 320 575.2 360 573.1 C400 571.1 440 567.6 480 565.1 C520 562.6 560 559.7 600 558.2 C640 556.8 680 556.3 720 556.3 C760 556.4 800 557.9 840 558.7 C880 559.5 920 560.9 960 561.2 C1000 561.4 1040 561.1 1080 560.1 C1120 559.2 1180 556.2 1200 555.4' stroke-width='1.63'/%3E%3Cpath d='M0 667.3 C20 666.9 80 666.3 120 664.9 C160 663.6 200 661.2 240 659.1 C280 656.9 320 653.9 360 652.0 C400 650.0 440 648.3 480 647.6 C520 647.0 560 647.6 600 648.0 C640 648.4 680 650.1 720 650.3 C760 650.5 800 650.7 840 649.1 C880 647.4 920 644.5 960 640.6 C1000 636.8 1040 631.2 1080 625.9 C1120 620.6 1180 611.8 1200 609.0' stroke-width='1.72'/%3E%3Cpath d='M0 751.9 C20 751.1 80 749.2 120 747.3 C160 745.4 200 742.7 240 740.6 C280 738.4 320 736.2 360 734.4 C400 732.5 440 731.4 480 729.6 C520 727.7 560 726.4 600 723.4 C640 720.4 680 716.7 720 711.7 C760 706.6 800 699.9 840 693.1 C880 686.4 920 678.1 960 671.2 C1000 664.4 1040 657.3 1080 651.9 C1120 646.6 1180 641.4 1200 639.3' stroke-width='1.80'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

html {
  overflow-x: hidden;
  overflow-x: clip;   /* clips fixed/abs descendants too, without killing sticky */
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.8;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}
body.is-locked { overflow: hidden; overscroll-behavior: none; }

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--accent); color: #fff; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: 0.02em;
}

.h-hero {
  font-size: clamp(1.5rem, 8vw, 5rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;   /* "Fly Fishing in Sedona" stays on one line */
}
.h-section {
  font-size: clamp(1.55rem, 3vw, 2.2rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
/* Quiet field-guide kicker. The orange that used to live in a dash here now
   rides the left border of the header block (.section-head / .pitch__head). */
.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--text-muted); }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-pad); }
.section--alt { background: var(--surface-2); }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: clamp(44px, 6vw, 72px);
}
.section-head > div {
  position: relative;
  flex: 1 1 auto;
  padding-left: clamp(0.9rem, 2vw, 1.2rem);
}
.section-head .h-section { margin-top: 0.35rem; }

/* ---------- Header rule: the orange line ----------
   A 2px accent rule, inset slightly from the block's edges, rounded, and
   fading out over its lower third so it dissolves rather than stops.
   Shared by the homepage section heads, the .pitch blocks, and the band. */
.section-head > div::before,
.pitch__head::before,
.band__inner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 2px;
  border-radius: 1px;
  background: linear-gradient(
    180deg,
    var(--accent) 0,
    var(--accent) 70%,
    color-mix(in srgb, var(--accent) 25%, transparent) 100%
  );
}
.section-head__intro { max-width: 34ch; padding-top: 0.3rem; }

/* ---------- Buttons ---------- */
.btn {
  --btn-fg: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.95em 2em;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--btn-fg);
  border: 1px solid var(--border-strong);
  background: linear-gradient(180deg, rgba(245, 241, 234, 0.10), rgba(245, 241, 234, 0.03));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform var(--dur-fast) var(--ease),
              background var(--dur-mid) var(--ease),
              border-color var(--dur-mid) var(--ease),
              color var(--dur-mid) var(--ease);
}
.btn:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  color: var(--accent-bright);
  background: linear-gradient(180deg, rgba(232, 99, 42, 0.18), rgba(232, 99, 42, 0.06));
}
.btn:active { transform: translateY(0); }

.btn--solid {
  background: var(--text);
  color: #14110d;
  border-color: var(--text);
}
.btn--solid:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btn--block { display: flex; width: 100%; }

/* quiet secondary action — arrow link, never a button */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  transition: gap var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.arrow-link .arrow { transition: transform var(--dur-fast) var(--ease); }
.arrow-link:hover { color: var(--accent-bright); gap: 0.85em; }
.arrow-link:hover .arrow { transform: translateX(3px); }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(18, 18, 18, 0.55);
  -webkit-backdrop-filter: blur(16px) saturate(115%);
  backdrop-filter: blur(16px) saturate(115%);
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  transition: background var(--dur-mid) var(--ease),
              box-shadow var(--dur-mid) var(--ease),
              -webkit-backdrop-filter var(--dur-mid) var(--ease),
              backdrop-filter var(--dur-mid) var(--ease);
}
.site-header.is-scrolled {
  /* translucent — the blurred hero image shows through */
  background: rgba(18, 18, 18, 0.5);
  /* soft depth instead of a visible edge line */
  box-shadow: 0 16px 32px -18px rgba(0, 0, 0, 0.6);
}

/* Promo memo — a thin marquee strip that rides the bottom edge of the
   header. Collapsed until the header enters its scrolled state, then it
   fades + expands in step with it. Text tracks right -> left. */
.header-memo {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  background: rgba(18, 18, 18, 0.5);
  -webkit-backdrop-filter: blur(16px) saturate(115%);
  backdrop-filter: blur(16px) saturate(115%);
  box-shadow: inset 0 1px 0 rgba(232, 99, 42, 0.30),
              0 16px 32px -18px rgba(0, 0, 0, 0.6);
  transition: opacity var(--dur-mid) var(--ease),
              height var(--dur-mid) var(--ease);
}
.site-header.is-scrolled .header-memo {
  height: 26px;
  opacity: 1;
}
/* the marquee would overlap the open mobile menu — fade it out until close */
body.nav-open .header-memo { opacity: 0; }
.header-memo__track {
  display: flex;
  align-items: center;
  width: max-content;
  height: 100%;
  white-space: nowrap;
  animation: memo-marquee 20s linear infinite;
}
.header-memo__item,
.header-memo__static {
  font-family: "Press Start 2P", ui-monospace, "Courier New", monospace;
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}
.header-memo__item {
  position: relative;
  padding-right: 3.9rem;
}
/* pixel-art dry fly, stands in for the separator between repeats */
.header-memo__item::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 20px;
  height: 14px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='14'%20shape-rendering='crispEdges'%3E%3Cg%20fill='%23e8632a'%3E%3Crect%20x='7'%20y='0'%20width='1'%20height='1'/%3E%3Crect%20x='6'%20y='1'%20width='3'%20height='4'/%3E%3Crect%20x='0'%20y='5'%20width='2'%20height='1'/%3E%3Crect%20x='0'%20y='6'%20width='1'%20height='1'/%3E%3Crect%20x='0'%20y='7'%20width='2'%20height='1'/%3E%3Crect%20x='2'%20y='5'%20width='12'%20height='1'/%3E%3Crect%20x='2'%20y='6'%20width='14'%20height='1'/%3E%3Crect%20x='3'%20y='7'%20width='11'%20height='1'/%3E%3Crect%20x='16'%20y='6'%20width='3'%20height='1'/%3E%3Crect%20x='13'%20y='8'%20width='2'%20height='1'/%3E%3Crect%20x='14'%20y='9'%20width='1'%20height='2'/%3E%3Crect%20x='10'%20y='11'%20width='4'%20height='1'/%3E%3Crect%20x='9'%20y='10'%20width='2'%20height='1'/%3E%3Crect%20x='8'%20y='9'%20width='2'%20height='1'/%3E%3Crect%20x='8'%20y='8'%20width='1'%20height='1'/%3E%3Crect%20x='10'%20y='9'%20width='1'%20height='1'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  image-rendering: pixelated;
}
.header-memo__static {
  display: block;
  width: 100%;
  text-align: center;
  line-height: 26px;
}
@keyframes memo-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .header-memo__track { animation: none; }
}

/* fixed hero logo — placed by JS, never moves or resizes */
.hero-morph-logo {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  display: none;
  line-height: 0;
  transform-origin: top left;
  will-change: transform;
}
.hero-morph-logo img {
  width: auto;
  display: block;
  filter: drop-shadow(0 8px 26px rgba(0, 0, 0, 0.5));
}
@media (min-width: 761px) {
  .hero-morph-logo { display: none !important; }
}
.nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: 82px;
  padding-block: 0.6rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  line-height: 0;
}
.brand__img {
  height: 52px;
  width: auto;
  display: block;
  transition: height var(--dur-mid) var(--ease);
}
.site-header.is-scrolled .brand__img { height: 42px; }
.nav__links {
  display: flex;
  gap: 1.6rem;
  margin-left: auto;
  list-style: none;
  padding: 0;
}
.nav__links a {
  position: relative;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-block: 0.4rem;
  transition: color var(--dur-fast) var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: translateY(4px);
  opacity: 0;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav__links a:hover,
.nav__links a[aria-current="page"] { color: var(--text); }
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { transform: translateY(0); opacity: 1; }

.nav__cta { margin-left: 0.4rem; padding: 0.6em 1.4em; font-size: 0.8rem; }

.nav__toggle {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.nav__toggle svg { width: 24px; height: 24px; }
.nav__toggle .i-close { display: none; }
.nav__toggle.is-open .i-bars { display: none; }
.nav__toggle.is-open .i-close { display: block; }

/* location-pin button — only shown on the mobile home header once compact */
.nav__loc {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--text);
}
.nav__loc svg { width: 24px; height: 24px; }

/* body-level element; hidden on desktop, becomes the bottom sheet on mobile */
.nav__sheet { display: none; }

.nav__scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s var(--ease);
}
.nav__scrim.is-open { opacity: 1; pointer-events: auto; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 92vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 8rem var(--gutter) 6rem;
  overflow: hidden;
  background: var(--bg);
}
/* faint topo field that fades in as the hero darkens toward the foot,
   continuing (viewport-locked) behind the sections below */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--topo-a) no-repeat 0 0 / 100% 100%;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(to bottom, transparent 44%, #000 84%);
          mask-image: linear-gradient(to bottom, transparent 44%, #000 84%);
  pointer-events: none;
}
/* image fills the whole hero, running edge to edge down to the
   "Guided Trips" section; its foot dissolves into var(--bg) */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block;
  /* muted, but left brighter than before so the scene reads */
  filter: grayscale(0.58) contrast(1.05) brightness(1);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  /* top-to-bottom wash — lighter through the image, still enough behind
     the headline; deepens into var(--bg) to meet the "Guided Trips"
     section with no seam */
  background:
    linear-gradient(to bottom,
      rgba(18, 18, 18, 0.32) 0%,
      rgba(18, 18, 18, 0.46) 28%,
      rgba(18, 18, 18, 0.72) 54%,
      rgba(18, 18, 18, 0.93) 78%,
      var(--bg) 100%);
}
.hero__inner {
  position: relative;
  z-index: 2;
  max-width: 62ch;
  display: grid;
  gap: 1.4rem;
  justify-items: center;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.6);
}
.hero__inner .eyebrow { color: var(--text-muted); }
.hero h1 { text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5); }
.hero__sub {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.1rem, 2.4vw, 1.7rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.hero__line { max-width: 46ch; color: var(--text-muted); }
/* key phrases: a quiet brightness lift, nothing else */
.hero__em { color: var(--text); }
.hero .btn { margin-top: 0.8rem; }

/* persistent "Book" tab pinned to the right edge (home only) —
   fades into place once you scroll past the hero */
.book-tab {
  position: fixed;
  right: 0;
  top: 50%;
  z-index: 40;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: 1rem 0.6rem 1.05rem;
  border: 1px solid rgba(245, 241, 234, 0.5);
  border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
  background: rgba(245, 241, 234, 0.16);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  color: var(--text);
  box-shadow: 0 12px 34px -14px rgba(0, 0, 0, 0.65);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(14px);
  transition: opacity var(--dur-mid) var(--ease),
              transform var(--dur-mid) var(--ease),
              background var(--dur-mid) var(--ease),
              color var(--dur-mid) var(--ease);
}
.book-tab.is-in {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}
.book-tab span {
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.book-tab svg { width: 16px; height: 16px; transform: rotate(90deg); }
.book-tab.is-in:hover,
.book-tab.is-in:focus-visible {
  background: rgba(245, 241, 234, 0.95);
  color: #161616;
  transform: translateY(-50%) translateX(-3px);
  outline: none;
}
@media (max-width: 760px) {
  /* sits lower so it clears the hero paragraph */
  .book-tab { top: 68%; gap: 0.4rem; padding: 0.8rem 0.5rem 0.85rem; }
  .book-tab span { font-size: 0.74rem; letter-spacing: 0.2em; }
  .book-tab svg { width: 14px; height: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .book-tab { transform: translateY(-50%); transition: opacity var(--dur-mid) var(--ease), background var(--dur-mid) var(--ease), color var(--dur-mid) var(--ease); }
  .book-tab.is-in { transform: translateY(-50%); }
  .book-tab.is-in:hover, .book-tab.is-in:focus-visible { transform: translateY(-50%); }
}

/* continuous faint topo behind the mid-homepage sections (Trips, Learn) */
.topo-bg { position: relative; }
.topo-bg > * { position: relative; z-index: 1; }
.topo-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 100%;
  opacity: 0.46;
  pointer-events: none;
}
#trips.topo-bg::before {
  background-image: var(--topo-b);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 100%);
}
#learn.topo-bg::before {
  background-image: var(--topo-c);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 56%, transparent 96%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 56%, transparent 96%);
}
#shop.topo-bg::before {
  background-image: var(--topo-a);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent);
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.8rem;
  z-index: 2;
  transform: translateX(-50%);
  color: var(--text-faint);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  animation: bob 2.4s var(--ease) infinite;
}
.scroll-cue svg { width: 16px; height: 16px; }
@keyframes bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }
/* a quiet grey breath — no hue shift */
@keyframes pin-pulse {
  0%   { color: #fff; animation-timing-function: cubic-bezier(0.25, 0.6, 0.3, 1); }
  20%  { color: rgba(245, 241, 234, 0.5); animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0.45); }
  100% { color: #fff; }
}

/* ---------- Slider ---------- */
.slider { position: relative; }
.slider__viewport {
  display: flex;
  gap: clamp(16px, 2.4vw, 28px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--gutter);
  padding-block: 6px 14px;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: none;
}
.slider__viewport::-webkit-scrollbar { display: none; }
.slider__viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; }

.slider__nav {
  position: absolute;
  top: -3.5rem;
  right: 0;
  display: flex;
  gap: 0.5rem;
}
.slider__btn {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              opacity var(--dur-fast) var(--ease);
}
.slider__btn:hover { border-color: var(--accent); color: var(--accent-bright); }
.slider__btn[disabled] { opacity: 0.3; pointer-events: none; }
.slider__btn svg { width: 18px; height: 18px; }

/* ---------- Service card ---------- */
.card {
  position: relative;
  flex: 0 0 min(88vw, 420px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--surface-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--dur-mid) var(--ease),
              border-color var(--dur-mid) var(--ease);
}
.card:hover { transform: translateY(-4px); border-color: var(--border-strong); }
.card:focus-within { border-color: var(--accent); }

.card__media {
  position: relative;
  aspect-ratio: 16 / 11;
  background:
    linear-gradient(180deg, rgba(18, 18, 18, 0.05), rgba(18, 18, 18, 0.6)),
    var(--topo) center / 300px repeat,
    var(--surface-1);
  overflow: hidden;
}
.card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* pull every shot toward the muted palette so they read as a set —
     kept light enough to let some colour through */
  filter: grayscale(0.25) brightness(0.92) contrast(1.02);
  transition: transform var(--dur-slow) var(--ease);
}
.card:hover .card__media img { transform: scale(1.05); }
/* consistent faint-black wash over every card photo */
.card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(18, 18, 18, 0.28);
  pointer-events: none;
}
.card__chip {
  position: absolute;
  z-index: 2;
  top: 0.9rem; left: 0.9rem;
  padding: 0.35em 0.8em;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(18, 18, 18, 0.78);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.4rem 1.4rem 0;
  flex: 1 1 auto;
}
.card__title {
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: color var(--dur-fast) var(--ease);
}
.card:hover .card__title { color: var(--accent-bright); }
.card__desc { color: var(--text-muted); font-size: 0.96rem; line-height: 1.65; }
.card__meta {
  margin-top: auto;
  padding-top: 0.9rem;
  font-size: 0.9rem;
  color: var(--text-faint);
  letter-spacing: 0.04em;
}
.card__price { color: var(--text); }
.card__price strong { color: var(--accent); font-weight: 600; }

.card__cta {
  margin-top: 1.2rem;
  padding: 0.95rem 1.4rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.card:hover .card__cta { color: var(--text); background: rgba(245, 241, 234, 0.03); }
.card__cta .arrow { transition: transform var(--dur-fast) var(--ease); }
.card:hover .card__cta .arrow { transform: translateX(4px); }

/* full-card click target */
.card__trigger { position: absolute; inset: 0; z-index: 2; font-size: 0; }
.card__trigger:focus-visible { outline-offset: -3px; }

/* ---------- Full-bleed guide band ---------- */
.band {
  position: relative;
  padding-block: var(--band-pad);
  overflow: hidden;
}
.band__media {
  position: absolute; inset: 0; z-index: -2;
  background:
    var(--topo) center / 460px repeat,
    linear-gradient(120deg, #211f1b, #141414);
}
.band__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 24%;
  /* same muted grade as the service card photos */
  filter: grayscale(0.25) brightness(0.92) contrast(1.02);
}
.band::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(15, 15, 15, 0.9), rgba(15, 15, 15, 0.6) 60%, rgba(15, 15, 15, 0.34));
}
.band__inner {
  position: relative;
  max-width: 52ch;
  display: grid;
  gap: 1.1rem;
  padding-left: clamp(0.9rem, 2vw, 1.2rem);
}
.band h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); text-transform: uppercase; }

/* ---------- Hatch guides / generic prose block ---------- */
.pitch { max-width: 60ch; display: grid; gap: 1.4rem; }
.pitch p { color: var(--text-muted); }
/* eyebrow + heading (+ intro copy) share the orange left rule; the CTA and
   any strip below it stay flush with the section edge */
.pitch__head {
  position: relative;
  display: grid;
  gap: 0.7rem;
  padding-left: clamp(0.9rem, 2vw, 1.2rem);
}

/* ---------- Newsletter ---------- */
.section--alt.newsletter { background: transparent; }
.newsletter {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
}
/* full-section photo backdrop — falls back to the contour texture until
   images/hatch-guide.jpg exists */
.newsletter::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    url("../images/hatch-guide.jpg") center / cover no-repeat,
    var(--topo) center / 440px,
    linear-gradient(120deg, #211f1b, #141414);
  filter: grayscale(0.45) brightness(0.6) contrast(1.04);
}
.newsletter::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(18, 18, 18, 0.74) 0%,
    rgba(18, 18, 18, 0.6) 45%,
    rgba(18, 18, 18, 0.88) 100%);
}
.newsletter .container { position: relative; z-index: 1; }
.newsletter__inner { max-width: 52ch; margin-inline: auto; display: grid; gap: 1rem; }
.newsletter h3 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); text-transform: uppercase; }
.newsletter form {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.6rem;
}
.newsletter input[type="email"] {
  flex: 1 1 auto;
  padding: 0.9em 1.1em;
  background: var(--surface-inset);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text);
}
.newsletter input::placeholder { color: var(--text-faint); }
.newsletter input:focus-visible { outline-offset: 1px; border-color: var(--accent); }
.newsletter__submit {
  flex: 0 0 auto;
  width: 3.2em;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.newsletter__submit:hover { background: var(--accent-bright); transform: translateX(2px); }
.newsletter__note { font-size: 0.85rem; color: var(--text-faint); }
.form-status { min-height: 1.4em; font-size: 0.9rem; color: var(--accent-bright); }
.form-status.is-bad { color: var(--text-muted); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  padding-block: clamp(48px, 7vw, 80px) 2rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 2.5rem;
}
.footer__brand { display: grid; gap: 1.1rem; align-content: start; justify-items: start; }
.footer__brand .brand__img { height: 52px; }
.footer__tag { color: var(--text-faint); font-size: 0.9rem; max-width: 28ch; }
.footer__social { display: flex; gap: 0.5rem; }
.footer__social a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.footer__social a:hover { border-color: var(--accent); color: var(--accent-bright); }
.footer__social svg { width: 18px; height: 18px; }
.footer__col h4 {
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 1rem;
}
.footer__col ul { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.footer__col a { color: var(--text-muted); font-size: 0.92rem; transition: color var(--dur-fast) var(--ease); }
.footer__col a:hover { color: var(--accent-bright); }
.footer__bar {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  font-size: 0.82rem;
  color: var(--text-faint);
}
.footer__bar a:hover { color: var(--accent-bright); }

/* ---------- Slide-over panel ---------- */
.panel-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-mid) var(--ease);
}
.panel-scrim.is-open { opacity: 1; pointer-events: auto; }

/* closed = fully out of layout, so the off-screen fixed box can't
   widen the page on mobile (author `.panel` display would otherwise
   defeat the [hidden] attribute) */
.panel[hidden],
.panel-scrim[hidden] { display: none; }

.panel {
  position: fixed;
  top: 0; right: 0;
  z-index: 100;
  height: 100dvh;
  width: min(760px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform var(--dur-mid) var(--ease);
}
.panel.is-open { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .panel { transition: opacity var(--dur-mid) var(--ease); transform: none; opacity: 0; pointer-events: none; }
  .panel.is-open { opacity: 1; pointer-events: auto; }
}

.panel__head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.3rem var(--gutter);
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
}
.panel__head h2 {
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.panel__close {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.panel__close:hover { color: var(--accent-bright); }
.panel__close svg { width: 16px; height: 16px; }

.panel__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 var(--gutter) 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.85rem;
  align-content: start;
}
.panel__body > * { min-width: 0; }
/* the Book chooser is sized to fit — trim the trailing scroll room */
.panel__body:has(.book-chooser) { padding-top: 0.5rem; padding-bottom: 0.6rem; }
.panel__media {
  aspect-ratio: 16 / 9;
  margin-inline: calc(var(--gutter) * -1);
  margin-top: 0;
  background:
    linear-gradient(180deg, rgba(18, 18, 18, 0.1), rgba(18, 18, 18, 0.6)),
    var(--topo) center / 340px repeat,
    var(--surface-inset);
}
.panel__media img { width: 100%; height: 100%; object-fit: cover; }

.panel__eyebrow { color: var(--text-faint); font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase; }
.panel__desc { color: var(--text-muted); }

.panel__section h3 {
  position: relative;
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.8rem;
  padding-left: 0.85rem;
}
/* orange tick the height of the text — gives narrative sections their own edge */
.panel__section h3::before,
.detail-main h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  bottom: 0.1em;
  width: 3px;
  border-radius: 1px;
  background: var(--accent);
}
/* reference lists, FAQ headers, and the booking blocks stay tickless */
.panel__section--flush h3,
.detail-main h2.h-flush {
  padding-left: 0;
}
.panel__section--flush h3::before,
.detail-main h2.h-flush::before {
  display: none;
}
.price-list, .check-list, .note-list { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.price-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.3rem 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}
.price-list .price-list__label { color: var(--text-muted); }
.price-list .price-list__value { color: var(--accent); font-weight: 500; text-align: right; }
.check-list li, .note-list li { position: relative; padding-left: 1.6rem; color: var(--text-muted); }
.check-list li a, .note-list li a { color: var(--accent); }
.check-list li a:hover, .note-list li a:hover { color: var(--accent-bright); }
.check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 8px; height: 8px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
}
.note-list li::before {
  content: "";
  position: absolute;
  left: 0.15rem; top: 0.72em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-faint);
}

/* Oak Creek rate picker — two sliding toggles + a live price */
.rate-picker { display: grid; gap: 0.85rem; }
.seg {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 4px;
  background: var(--surface-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  isolation: isolate;
}
.seg[data-n="3"] { grid-template-columns: repeat(3, 1fr); }
.seg[data-n="4"] { grid-template-columns: repeat(2, 1fr); gap: 4px; border-radius: var(--radius); }
.seg__glider {
  position: absolute;
  z-index: -1;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: var(--radius-pill);
  background: var(--accent);
  transition: transform var(--dur-mid) var(--ease);
}
.seg[data-n="3"] .seg__glider { width: calc((100% - 8px) / 3); }
.seg[data-active="1"] .seg__glider { transform: translateX(100%); }
.seg[data-active="2"] .seg__glider { transform: translateX(200%); }
/* four options: no glider, just fill the chosen cell */
.seg[data-n="4"] .seg__glider { display: none; }
.seg[data-n="4"] .seg__btn {
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.seg[data-n="4"] .seg__btn.is-active { background: var(--accent); color: #fff; }
.seg[data-n="4"] .seg__btn.is-active em { color: rgba(255, 255, 255, 0.8); }
@media (prefers-reduced-motion: reduce) { .seg__glider { transition: none; } }
.seg__btn {
  display: grid;
  gap: 0.08rem;
  justify-items: center;
  padding: 0.6em 0.4em;
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-radius: var(--radius-pill);
  transition: color var(--dur-fast) var(--ease);
}
.seg__btn em {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  transition: color var(--dur-fast) var(--ease);
}
.seg__btn.is-active { color: #fff; }
.seg__btn.is-active em { color: rgba(255, 255, 255, 0.78); }
/* party sizes that don't apply to the chosen water (e.g. Drift Boat = 1) */
.seg__btn.is-disabled,
.seg__btn:disabled { opacity: 0.32; pointer-events: none; }
.rate-out {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  padding-top: 0.35rem;
}
.rate-out--slim { padding-top: 0; }
.rate-out__price {
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--accent);
}
.rate-out__name {
  font-family: var(--font-display);
  font-size: 0.92rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
}
.rate-out__name:empty { display: none; }
.rate-out__meta { font-size: 0.82rem; color: var(--text-muted); }

/* the locked-in date, shown next to the price — looks tappable to change */
.rate-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.55rem 0.4rem 0.7rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.rate-chip[hidden] { display: none; }
.rate-chip svg { width: 14px; height: 14px; opacity: 0.75; }
.rate-chip__edit {
  padding-left: 0.5rem;
  border-left: 1px solid var(--border);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  transition: color var(--dur-fast) var(--ease);
}
.rate-chip:hover { border-style: solid; border-color: var(--accent); color: var(--accent-bright); }
.rate-chip:hover .rate-chip__edit { color: var(--accent); }
.rate-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* struck original next to the discounted price */
.rate-out__price s { color: var(--text-faint); text-decoration-thickness: 1px; margin-right: 0.15em; font-size: 0.62em; }

/* "Have a code?" — quiet until opened */
.rate-promo { display: grid; gap: 0.5rem; justify-items: start; }
.rate-promo__toggle {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  transition: color var(--dur-fast) var(--ease);
}
.rate-promo__toggle:hover { color: var(--accent-bright); }
.rate-promo.is-applied .rate-promo__toggle { color: var(--accent); }
.rate-promo__row { display: flex; gap: 0.5rem; width: min(100%, 340px); }
.rate-promo__row[hidden] { display: none; }
.rate-promo__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.6em 0.8em;
  background: var(--surface-inset);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rate-promo__input:focus-visible { border-color: var(--accent); outline: none; }
.rate-promo__apply {
  flex: 0 0 auto;
  padding: 0.55em 1.1em;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.rate-promo__apply:hover { border-color: var(--accent); color: var(--accent-bright); background: var(--accent-dim); }
.rate-promo__msg { font-size: 0.8rem; color: var(--text-muted); }
.rate-promo__msg:empty { display: none; }
.rate-promo__msg.is-ok { color: var(--accent-bright); }
.rate-promo__msg.is-bad { color: var(--text-muted); }

/* carried-code note atop the book chooser */
.book-promo-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius);
  background: var(--accent-dim);
}
.book-promo-note span {
  font-family: var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-bright);
}

/* themed month-grid date picker */
.rate-cal {
  background: var(--surface-inset);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.8rem 0.65rem;
  transition: border-color var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease);
}
.rate-cal.is-missing {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.rate-cal.is-focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.rate-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.rate-cal__month {
  font-family: var(--font-display);
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}
.rate-cal__nav {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.rate-cal__nav svg { width: 15px; height: 15px; }
.rate-cal__nav:hover:not(:disabled) { color: var(--accent-bright); border-color: var(--accent); }
.rate-cal__nav:disabled { opacity: 0.25; cursor: default; }
.rate-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.rate-cal__wd {
  text-align: center;
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-bottom: 0.25rem;
}
.rate-cal__pad { aspect-ratio: 1 / 1; }
.rate-cal__day {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
/* available: a soft sage tile that says "you can pick this" */
.rate-cal__day.is-open {
  color: var(--text);
  background: var(--cal-open-dim);
  border-color: rgba(143, 174, 144, 0.28);
}
.rate-cal__day.is-open:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent-bright);
}
/* booked: quietly struck through, no alarm colour */
.rate-cal__day.is-taken {
  color: var(--text-faint);
  text-decoration: line-through;
  text-decoration-color: var(--text-faint);
  cursor: not-allowed;
}
/* past: just faded away */
.rate-cal__day.is-past { color: var(--text-faint); opacity: 0.35; cursor: default; }
.rate-cal__day.is-selected,
.rate-cal__day.is-selected:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  text-decoration: none;
}
.rate-cal__legend {
  display: flex;
  gap: 1rem;
  margin-top: 0.6rem;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.rate-cal__key { display: inline-flex; align-items: center; gap: 0.4rem; }
.rate-cal__key::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.rate-cal__key--open::before {
  background: var(--cal-open-dim);
  border: 1px solid var(--cal-open);
}
.rate-cal__key--taken::before {
  background: repeating-linear-gradient(-45deg,
    var(--text-faint) 0 1px, transparent 1px 3px);
  border: 1px solid var(--border-strong);
  opacity: 0.7;
}
.rate-cal__hint {
  margin-top: 0.55rem;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--text-faint);
}
.rate-cal__hint.is-set { color: var(--text-muted); }
.rate-cal.is-missing .rate-cal__hint { color: var(--accent-bright); }

.btn.is-loading { opacity: 0.75; pointer-events: none; }

/* Across Arizona combined panel — water picker (2×2 seg) + swapping detail */
.seg--water .seg__btn { padding: 0.6em 0.5em; line-height: 1.2; }
.seg--water .seg__btn em {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.64rem;
  letter-spacing: 0.04em;
}
.aa-detail {
  margin-top: 0.95rem;
  padding-left: 0.85rem;
  border-left: 2px solid var(--accent);
}
.aa-detail__name {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}
.aa-detail__desc {
  margin-top: 0.35rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-muted);
}
.aa-detail__meta {
  margin-top: 0.45rem;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.aa-detail__photo {
  margin: 1.1rem 0 0.3rem;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(18, 18, 18, 0.1), rgba(18, 18, 18, 0.45)),
    var(--surface-inset);
}
.aa-detail__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* a little extra room so the combined panel feels unhurried */
.panel--aa .panel__body { gap: 2rem; padding-top: 1.25rem; }
.aa-sect { padding-bottom: 0.8rem; }

/* ---------- Oak Creek: the panel is the whole trip ---------- */
.panel--oc .panel__body { gap: 1.9rem; }

/* hero — full-bleed image behind the title */
.oc-hero {
  position: relative;
  isolation: isolate;
  margin-inline: calc(var(--gutter) * -1);
  min-height: clamp(240px, 46vw, 340px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.6rem var(--gutter) 1.5rem;
  overflow: hidden;
  background: var(--surface-inset);
}
.oc-hero__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.3) brightness(0.62) contrast(1.05);
}
.oc-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(18, 18, 18, 0.15) 0%,
    rgba(18, 18, 18, 0.45) 45%,
    rgba(18, 18, 18, 0.92) 100%);
}
.oc-hero.is-flat {
  background: var(--topo) center / 300px, linear-gradient(160deg, #221f1b, #131313);
}
/* photoless product hero — styled "coming soon" placeholder */
.oc-hero--soon {
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(232, 99, 42, 0.08), transparent 70%),
    var(--topo) center / 260px,
    linear-gradient(160deg, #221f1b, #131313);
}
.oc-hero--soon::after { display: none; }
.oc-hero__soon {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 5.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.1rem, 0.85rem + 1.4vw, 1.55rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.oc-hero__body { display: grid; gap: 0.6rem; }
.oc-hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.55rem, 1.1rem + 2.4vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.oc-hero__lead { color: var(--text-muted); font-size: 0.95rem; max-width: 46ch; }
.oc-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.oc-hero__meta span + span { padding-left: 0.9rem; border-left: 1px solid var(--border-strong); }

/* photo gallery — free-sliding strip (no snap) */
.oc-gallery { display: grid; gap: 0.7rem; }
.oc-gallery__track {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: none;
  cursor: grab;
}
.oc-gallery__track.is-dragging { cursor: grabbing; }
.oc-gallery__track.is-dragging img { pointer-events: none; }
.oc-gallery__track::-webkit-scrollbar { display: none; }
.oc-shot {
  flex: 0 0 min(66%, 240px);
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--topo) center / 200px, var(--surface-inset);
}
.oc-shot img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }

/* "The water" — a slim strip; the gallery above already shows the full frame */
.panel--oc .oc-water {
  aspect-ratio: auto;
  height: clamp(88px, 20vw, 132px);
  margin-bottom: 0.9rem;
}

/* 4-up grid — 2x2 in the narrow panel */
.panel--oc .creek-stats { grid-template-columns: 1fr 1fr; }
.panel--oc .creek-stat { padding: 1rem 1.05rem; }

/* booking zone — framed so it reads as the action, with room to breathe */
.oc-book {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-inset);
  padding: clamp(1.3rem, 4vw, 1.7rem);
  margin-block: clamp(0.6rem, 2vw, 1.1rem);
}
.oc-book > h3 { margin-bottom: 1.1rem; }
.oc-tl { margin-top: 1.3rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.oc-tl > summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.oc-tl > summary::-webkit-details-marker { display: none; }
.oc-tl > summary::after { content: "+"; color: var(--accent); font-size: 1.2rem; line-height: 1; margin-left: auto; }
.oc-tl[open] > summary::after { content: "\2013"; }
.oc-tl > summary:hover { color: var(--accent-bright); }
.oc-tl .day-tl { margin-top: 0.9rem; }

.oc-faq details { padding: 0.95rem 0; }

/* waders — Yes/No gate, then a compact size row per angler */
.oc-waders { margin-top: 1.3rem; display: grid; gap: 0.6rem; }
.oc-waders__q {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.oc-yn { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.oc-yn__btn {
  flex: 1 1 8rem;
  padding: 0.65em 1em;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 0.85rem;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.oc-yn__btn:hover { border-color: var(--accent); color: var(--text); }
.oc-yn__btn.is-active {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent-bright);
}
.oc-waderlist { display: grid; gap: 0.4rem; margin-top: 0.2rem; }
.oc-waderlist[hidden] { display: none; }
.oc-wader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.oc-wader__who {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.oc-wader__sel {
  flex: 0 0 auto;
  padding: 0.4em 2em 0.4em 0.7em;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-inset);
  color: var(--text);
  font-size: 0.85rem;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23e8632a' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7em center;
}
.oc-wader__sel:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- Lightbox (any gallery photo, full-screen) ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 3vw, 2rem);
  padding: clamp(1rem, 5vw, 3rem);
  background: rgba(8, 8, 8, 0.94);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease);
}
.lightbox.is-open { opacity: 1; }
.lightbox[hidden] { display: none; }
.lightbox__stage {
  margin: 0;
  max-width: min(1200px, 100%);
  max-height: 100%;
  display: flex;
}
.lightbox__img {
  max-width: 100%;
  max-height: 88vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}
.lightbox__close {
  position: absolute;
  top: clamp(0.75rem, 3vw, 1.5rem);
  right: clamp(0.75rem, 3vw, 1.5rem);
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  color: var(--text);
  background: rgba(0, 0, 0, 0.35);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.lightbox__close:hover { color: var(--accent-bright); border-color: var(--accent); }
.lightbox__close svg { width: 20px; height: 20px; }
.lightbox__nav {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  color: var(--text);
  background: rgba(0, 0, 0, 0.35);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.lightbox__nav:hover { color: var(--accent-bright); border-color: var(--accent); }
.lightbox__nav[hidden] { display: none; }
.lightbox__nav svg { width: 22px; height: 22px; }
@media (max-width: 560px) {
  .lightbox__nav {
    position: absolute;
    bottom: clamp(0.75rem, 4vw, 1.5rem);
    background: rgba(0, 0, 0, 0.5);
  }
  .lightbox__prev { left: clamp(0.75rem, 5vw, 1.5rem); }
  .lightbox__next { right: clamp(0.75rem, 5vw, 1.5rem); }
}

/* ---------- "Book a Day" chooser ---------- */
/* tuned to fill the panel without scrolling on a typical screen */
.book-chooser {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.55rem;
  margin-top: 0.35rem;
  min-width: 0;
}
.book-intro__kicker {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* one offering = a label tight above its sell block */
.book-group { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.4rem; min-width: 0; }
.book-group + .book-group {
  border-top: 1px solid var(--border);
  padding-top: 0.55rem;
}
.book-group__label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* an immersive sell block: a short photo strip with the name over it,
   a one-line pitch, an inline detail line, then the booking options */
.book-feature {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
  min-width: 0;
}
.book-feature__media {
  position: relative;
  isolation: isolate;
  min-height: clamp(44px, 9vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0.5rem 0.8rem 0.5rem;
}
.book-feature__media img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.35) brightness(0.68) contrast(1.03);
  transition: transform var(--dur-mid) var(--ease), filter var(--dur-mid) var(--ease);
}
.book-feature:hover .book-feature__media img { transform: scale(1.04); filter: grayscale(0.1) brightness(0.8); }
.book-feature__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(18, 18, 18, 0.05) 0%,
    rgba(18, 18, 18, 0.34) 44%,
    rgba(18, 18, 18, 0.9) 100%);
}
.book-feature__chip {
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.book-feature__title {
  margin-top: 0.1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, 0.9rem + 0.7vw, 1.25rem);
  line-height: 1.04;
  letter-spacing: 0.015em;
  text-transform: uppercase;
}
.book-feature__body {
  padding: 0.6rem 0.8rem 0.6rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.35rem;
  align-content: start;
  min-width: 0;
}
.book-feature__sell {
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.38;
}
.book-feature__note {
  font-size: 0.73rem;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--text-faint);
}

/* booking options — square tiles, side by side */
.book-options {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0.1rem;
  min-width: 0;
}
.book-options[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
.book-option {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.06rem;
  min-width: 0;
  min-height: 3.35rem;
  padding: 0.5rem 0.6rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-inset);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.book-option:hover { border-color: var(--accent); background: var(--accent-dim); }
.book-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.book-option__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-right: 1.1rem;
}
.book-option__sub {
  font-size: 0.72rem;
  color: var(--text-faint);
}
.book-option__price {
  margin-top: auto;
  padding-top: 0.25rem;
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--accent);
}
.book-option__meta {
  color: var(--text-faint);
  letter-spacing: 0.02em;
}
.book-option__go {
  position: absolute;
  right: 0.6rem;
  top: 0.5rem;
  color: var(--text-faint);
  transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.book-option:hover .book-option__go { color: var(--accent-bright); transform: translateX(3px); }
/* the single-option feature reads better as one wide row */
.book-options[data-n="1"] .book-option {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 0.8rem;
  min-height: 0;
  padding: 0.7rem 2.2rem 0.72rem 0.8rem;
}
.book-options[data-n="1"] .book-option__name { grid-column: 1; grid-row: 1; padding-right: 0; }
.book-options[data-n="1"] .book-option__sub  { grid-column: 1; grid-row: 2; padding-right: 0; }
.book-options[data-n="1"] .book-option__price {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  margin: 0;
  padding: 0;
  text-align: right;
  white-space: nowrap;
}
.book-options[data-n="1"] .book-option__go { top: 50%; transform: translateY(-50%); }
.book-options[data-n="1"] .book-option:hover .book-option__go { transform: translateY(-50%) translateX(3px); }
/* multi-option tiles (Oak Creek): price left, angler count right */
.book-options:not([data-n="1"]) .book-option__price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

/* image buttons out to everything else */
.book-index__more {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
  min-width: 0;
}
.book-index__more > span {
  grid-column: 1 / -1;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.book-more {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.05rem;
  min-width: 0;
  min-height: 2.6rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease);
}
.book-more img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.4) brightness(0.5) contrast(1.05);
  transition: transform var(--dur-mid) var(--ease), filter var(--dur-mid) var(--ease);
}
.book-more::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(18, 18, 18, 0.82), rgba(18, 18, 18, 0.45));
}
.book-more:hover { border-color: var(--accent); }
.book-more:hover img { transform: scale(1.05); filter: grayscale(0.15) brightness(0.62); }
.book-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.book-more__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.book-more__sub { font-size: 0.72rem; color: var(--text-muted); }

/* Book panel: just the header + two roomy cards, sitting close */
.panel--book .book-chooser { gap: 0.9rem; margin-top: 0.6rem; }
.panel--book .book-group + .book-group {
  margin-top: 0.4rem;
  padding-top: 0.9rem;
}
.panel--book .book-feature__media {
  min-height: clamp(120px, 30vw, 190px);
  padding: 1rem 1.1rem 0.95rem;
}
.panel--book .book-feature__chip { font-size: 0.64rem; }
.panel--book .book-feature__title { font-size: clamp(1.3rem, 1rem + 1.9vw, 1.95rem); }
.panel--book .book-feature__body { padding: 1rem 1.1rem 1.1rem; gap: 0.7rem; }
.panel--book .book-feature__sell { font-size: 0.9rem; line-height: 1.5; }
.panel--book .book-feature__note { font-size: 0.8rem; }
.panel--book .book-options { gap: 0.6rem; }
.panel--book .book-option { min-height: 5.2rem; padding: 0.75rem 0.85rem; }
.panel--book .book-option__name { font-size: 1rem; }
.panel--book .book-option__sub,
.panel--book .book-option__price { font-size: 0.82rem; }

/* Across Arizona full page: water picker slider inside the detail column */
.aa-waters { margin-top: 1.4rem; min-width: 0; overflow-x: clip; }
.aa-waters .slider__nav {
  position: static;
  justify-content: flex-end;
  margin: 0 0 0.9rem;
}
/* stay inside the detail column — no full-bleed here (it can overflow when nested) */
.aa-waters .slider__viewport { margin-inline: 0; padding-inline: 0; }
.aa-waters .card { flex-basis: min(82vw, 300px); }
/* let the final card settle fully into view (mandatory snap otherwise
   bounces it back because there's no trailing room) */
.aa-waters .slider__viewport::after { content: ""; flex: 0 0 0.75rem; }
.aa-waters .card:last-child { scroll-snap-align: end; }
.aa-waters .card__cta { cursor: pointer; }
.aa-waters .card:hover .card__cta { color: var(--text); background: rgba(245, 241, 234, 0.03); }
.aa-waters .card:hover .card__cta .arrow { transform: translateX(4px); }

.panel__foot {
  position: sticky;
  bottom: 0;
  display: grid;
  gap: 0.9rem;
  justify-items: center;
  padding: 1.2rem var(--gutter) 1.6rem;
  background: linear-gradient(180deg, rgba(26, 26, 26, 0), var(--surface-1) 22%);
  border-top: 1px solid var(--border);
}
/* product view — the quantity stepper sits right of "Add to cart",
   matched to its height */
.panel__foot--product {
  grid-template-columns: 1fr auto;
  justify-items: stretch;
  align-items: stretch;
  gap: 0.6rem;
}
.panel__foot--product #panelBook { width: auto; }
.foot-qty {
  align-self: stretch;
  border-color: var(--border-strong);
}
.foot-qty button { height: 100%; }
.foot-qty > span { display: flex; align-items: center; justify-content: center; }

/* liability agreement — appears above Book once the trip is fully picked */
.book-agree {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  width: 100%;
  padding: 0.5rem 0.15rem 0.15rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--text-muted);
  cursor: pointer;
}
.foot-agree { animation: agree-in var(--dur-mid) var(--ease); }
@keyframes agree-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .foot-agree { animation: none; } }
.book-agree input {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.12rem;
  accent-color: var(--text-muted);
  cursor: pointer;
}
.book-agree a { color: var(--accent); }
.book-agree a:hover { color: var(--accent-bright); }
.book-agree.is-missing { color: var(--accent-bright); }
.book-agree.is-missing input { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* Book button, dimmed until the box is ticked (still clickable — the click
   nudges the checkbox, see handleCheckout) */
.btn.is-gated { opacity: 0.45; }

/* ---------- Service detail page ---------- */
.page-hero {
  position: relative;
  padding: clamp(90px, 16vw, 200px) 0 clamp(48px, 8vw, 90px);
  overflow: hidden;
}
.page-hero__media {
  position: absolute; inset: 0; z-index: -2;
  background: var(--topo) center / 480px repeat, linear-gradient(160deg, #221f1b, #131313);
}
.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* toned back to sit with the palette, but light enough to read the scene */
  filter: grayscale(0.35) brightness(0.82) contrast(1.03);
}
.page-hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  /* lighter over the text zone so the photo shows; deepens into --bg at the foot */
  background: linear-gradient(180deg,
    rgba(15, 15, 15, 0.42) 0%,
    rgba(15, 15, 15, 0.5) 48%,
    rgba(18, 18, 18, 0.88) 82%,
    var(--bg) 100%);
}
.page-hero__inner { max-width: 52ch; display: grid; gap: 1rem; }
.page-hero__inner .eyebrow { color: var(--text-muted); }
.page-hero h1 {
  text-transform: uppercase;
  font-size: clamp(2.2rem, 6vw, 3.8rem);
  letter-spacing: 0.03em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}

.detail-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.detail-main { display: grid; gap: 2rem; min-width: 0; }
.detail-main > * { min-width: 0; }
.detail-main h2 {
  position: relative;
  font-size: 0.9rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint);
  margin-bottom: 0.8rem;
  padding-left: 0.85rem;
}
.detail-main p { color: var(--text-muted); }
.detail-aside { min-width: 0;
  position: sticky;
  top: 96px;
  background: var(--surface-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem;
  display: grid;
  gap: 1.2rem;
}
.detail-aside h2 { font-size: 0.85rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint); }

.detail-aside__note { font-size: 0.82rem; line-height: 1.5; color: var(--text-faint); }

.crumb { display: inline-flex; gap: 0.5em; align-items: center; color: var(--text-faint); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; }
.crumb:hover { color: var(--accent-bright); }

/* ---------- Oak Creek trip page ---------- */
:root {
  --creek-lines: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='420' viewBox='0 0 1200 420'%3E%3Cg fill='none' stroke='%23f5f1ea' stroke-opacity='0.11' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M0 70 C150 40 300 100 450 70 S750 40 900 70 S1150 100 1200 70'/%3E%3Cpath d='M0 140 C160 175 320 105 480 140 S780 175 960 140 S1140 110 1200 140'/%3E%3Cpath d='M0 215 C140 185 280 245 450 215 S760 180 920 215 S1120 250 1200 215'/%3E%3Cpath d='M0 290 C170 320 330 255 500 290 S800 325 980 290 S1150 262 1200 290'/%3E%3Cpath d='M0 360 C150 335 300 388 470 360 S780 330 950 360 S1140 385 1200 360'/%3E%3C/g%3E%3C/svg%3E");
  --fly-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8632a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3v6a6 6 0 0 0 6 6h3'/%3E%3Cpath d='M17 15l-2.5-2.5M17 15l-2.5 2.5'/%3E%3C/svg%3E");
}
.creek-flow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--creek-lines);
  background-repeat: repeat-x;
  background-position: 0 55%;
  background-size: 1200px auto;
  opacity: 0.6;
  -webkit-mask-image: linear-gradient(180deg, #000 0 38%, transparent 86%);
  mask-image: linear-gradient(180deg, #000 0 38%, transparent 86%);
  animation: creek-drift 42s linear infinite;
}
@keyframes creek-drift {
  from { background-position: 0 55%; }
  to { background-position: -1200px 55%; }
}
@media (prefers-reduced-motion: reduce) { .creek-flow { animation: none; } }
.creek-hero .container { position: relative; z-index: 1; }

.creek-hero-meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.9rem;
  align-items: center;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.creek-hero-meta span + span { padding-left: 0.9rem; border-left: 1px solid var(--border); }
.creek-hero-meta strong { color: var(--accent); font-weight: 600; }

.creek-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.creek-stat {
  background: var(--surface-inset);
  padding: 1.3rem 1.2rem;
  display: grid;
  gap: 0.4rem;
  align-content: start;
}
.creek-stat svg { width: 22px; height: 22px; color: var(--accent); }
.creek-stat__k {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1rem;
  color: var(--text);
}
.creek-stat__d { font-size: 0.82rem; line-height: 1.45; color: var(--text-muted); }
@media (max-width: 760px) { .creek-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .creek-stats { grid-template-columns: 1fr; } }

.creek-pull {
  max-width: 48ch;
  margin: 0 0 clamp(2rem, 5vw, 3.2rem);
  padding-left: 1.1rem;
  border-left: 2px solid var(--accent);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.3vw, 1.5rem);
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--text);
}

.day-tl { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.95rem; }
.day-tl__item { position: relative; padding-left: 1.4rem; }
.day-tl__item::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.45em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.day-tl__item::after {
  content: "";
  position: absolute;
  left: 5.5px;
  top: 1.4em;
  bottom: -0.95rem;
  width: 1px;
  background: var(--border-strong);
}
.day-tl__item:last-child::after { display: none; }
.day-tl__t {
  display: block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0.2rem;
}
.day-tl__item p { font-size: 0.85rem; line-height: 1.5; color: var(--text-muted); }

.creek-photo {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(18, 18, 18, 0.1), rgba(18, 18, 18, 0.45)),
    var(--topo) center / 320px repeat,
    var(--surface-inset);
}
.creek-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.creek-photo__cap {
  margin-top: 0.6rem;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--text-faint);
}

.check-list--fly li { padding-left: 1.9rem; }
.check-list--fly li::before {
  content: "";
  border: 0;
  transform: none;
  left: 0;
  top: 0.28em;
  width: 15px;
  height: 15px;
  background: var(--fly-mark) center / contain no-repeat;
}

.detail-aside[id] { scroll-margin-top: 100px; }

/* Included + Good to know share a row */
.creek-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem clamp(1.5rem, 4vw, 2.6rem);
}
.creek-two > div { min-width: 0; }
.creek-two h2 {
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.8rem;
}
@media (max-width: 520px) { .creek-two { grid-template-columns: 1fr; } }

/* FAQ sits full-width, below the whole booking block */
.creek-faq {
  margin-top: clamp(2rem, 5vw, 3rem);
}
.creek-faq > h2 {
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.9rem;
}

/* gentle condense — page-scoped so other detail pages are untouched */
.creek-body .detail-main { gap: 1.5rem; }
.creek-body .creek-stats { margin-bottom: clamp(1.5rem, 4vw, 2.2rem); }
.creek-body .creek-pull { margin-bottom: clamp(1.5rem, 4vw, 2.4rem); }
.creek-body .day-col { padding: 1.15rem 1.2rem 1.25rem; }
.creek-body .day-tl { gap: 0.8rem; }
.creek-body .creek-photo { aspect-ratio: 21 / 9; }

/* generic content page */
.prose { max-width: 68ch; display: grid; gap: 1.3rem; }
.prose h2 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.4rem; margin-top: 1.4rem; }
.prose p, .prose li { color: var(--text-muted); }
.prose ul { padding-left: 1.2rem; display: grid; gap: 0.5rem; }
.prose a { color: var(--accent); }
.prose a:hover { color: var(--accent-bright); }

/* brands grid — About page */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
  margin-top: 0.2rem;
}
.brand-grid__item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 4.5rem;
  padding: 0.9rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-inset);
  color: var(--text) !important;
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.brand-grid__item:hover {
  border-color: var(--accent);
  color: var(--accent-bright) !important;
  transform: translateY(-2px);
}
@media (max-width: 560px) {
  .brand-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Booking confirmed ---------- */
.bc-hero .page-hero__inner { gap: 1.15rem; }
.bc-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: var(--accent-bright);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background: var(--accent-dim);
}
.bc-check svg { width: 22px; height: 22px; }

.bc-wrap { display: grid; gap: clamp(2rem, 5vw, 3rem); max-width: 720px; }

.bc-card {
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface-inset);
  padding: clamp(1.3rem, 3.5vw, 1.9rem);
  display: grid;
  gap: 1.1rem;
}
.bc-card[hidden] { display: none; }
.bc-card__eyebrow {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.bc-card__trip {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 1rem + 1.4vw, 1.6rem);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.015em;
}
.bc-facts {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem 1.4rem;
}
@media (max-width: 420px) { .bc-facts { grid-template-columns: 1fr; } }
.bc-fact dt {
  font-family: var(--font-display);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.25rem;
}
.bc-fact dd { margin: 0; color: var(--text); font-size: 0.98rem; }
.bc-code {
  font-family: var(--font-display);
  letter-spacing: 0.12em;
  color: var(--accent);
}
.bc-ics { justify-self: start; font-size: 0.85rem; }

.bc-next h2,
.bc-contact h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}
.bc-next .day-tl { gap: 1rem; }
.bc-contact p { color: var(--text-muted); max-width: 60ch; }
.bc-contact p a { color: var(--accent); }
.bc-contact p a:hover { color: var(--accent-bright); }
.bc-reach {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  margin-bottom: 0.5rem;
}
/* "Where" runs full width beneath the other two */
.bc-reach > :nth-child(3) { grid-column: 1 / -1; }
.bc-cancel-h { margin-top: 2.4rem; }
.bc-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 1.6rem;
  font-size: 0.9rem;
  color: var(--text-faint);
  transition: color var(--dur-fast) var(--ease);
}
.bc-back:hover { color: var(--text-muted); }
.bc-back .arrow { transition: transform var(--dur-fast) var(--ease); }
.bc-back:hover .arrow { transform: translateX(-3px); }

.faq { max-width: 70ch; display: grid; gap: 0; }
.faq details {
  border-bottom: 1px solid var(--border);
  padding: 1.2rem 0;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  transition: color var(--dur-fast) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-bright); }
.faq summary::after { content: "+"; color: var(--accent); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin-top: 0.9rem; color: var(--text-muted); }

.contact-page { max-width: 620px; margin-inline: auto; }
.field { display: grid; gap: 0.4rem; margin-bottom: 1rem; }
.field label { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
.field input, .field textarea {
  width: 100%;
  min-width: 0;
  padding: 0.8em 1em;
  background: var(--surface-inset);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
}
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--accent); outline-offset: 1px; }

/* contact details as a row of icon buttons under the form */
.contact-actions {
  margin-top: 2.4rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
}
.contact-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.15rem 0.55rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-inset);
  color: var(--text);
  text-decoration: none;
  text-align: center;
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.contact-btn:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
  transform: translateY(-2px);
}
.contact-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.contact-btn svg { width: 22px; height: 22px; color: var(--accent); }
.contact-btn__label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.contact-btn__val {
  font-size: 0.74rem;
  line-height: 1.35;
  color: var(--text-muted);
  word-break: break-word;
}
@media (max-width: 560px) {
  .contact-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Conditions page ---------- */
/* framed box around the ambient water visual */
.cond-panel {
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--surface-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.cond-scene {
  position: relative;
  aspect-ratio: 20 / 9;
  max-height: 46vh;
  overflow: hidden;
}
.cond-scene svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* dissolve the foot of the visual into the panel below — no hard divider */
.cond-scene::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 24%;
  max-height: 84px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(22, 22, 22, 0), var(--surface-inset));
}
.cond-scene__temp { animation: temp-breathe 3.2s ease-in-out infinite; }
@keyframes temp-breathe { 0%, 100% { opacity: 0.72; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cond-scene__temp { animation: none; opacity: 1; } }
.cond-scene__readout {
  position: absolute;
  right: 0.9rem;
  top: 40%;
  transform: translateY(-50%);
  padding: 0.4em 0.85em;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  line-height: 1.35;
  text-align: right;
  color: var(--text);
  background: rgba(18, 18, 18, 0.62);
  border: 1px solid var(--border);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.cond-scene__readout strong {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--accent);
  margin-right: 0.2em;
}
.cond-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.cond-stat { min-width: 0;
  display: grid;
  gap: 0.35rem;
  align-content: start;
  padding: 1.2rem 1.3rem;
  background: var(--surface-inset);
}
.cond-stat__k {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cond-stat__v {
  font-family: var(--font-display);
  font-size: 1.65rem;
  letter-spacing: 0.02em;
}
.cond-stat__v em { font-style: normal; font-size: 0.8rem; color: var(--text-muted); }
.cond-stat__sub { font-size: 0.82rem; color: var(--text-muted); }
.cond-trend {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-left: 0.25rem;
}
.cond-trend[data-dir="up"] { color: var(--accent-bright); }
.cond-trend[data-dir="down"] { color: #96b98a; }

.cond-spark { margin: clamp(1.5rem, 4vw, 2.5rem) 0 0; }
.cond-spark figcaption {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.6rem;
}
.cond-spark__chart {
  height: 92px;
  background: var(--surface-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.cond-spark__chart svg { width: 100%; height: 100%; display: block; }
.cond-spark__hours {
  position: relative;
  height: 1.1rem;
  margin-top: 0.3rem;
}
.cond-spark__hours span {
  position: absolute;
  transform: translateX(-50%);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  white-space: nowrap;
}
.cond-spark__hours span:first-child { transform: none; }
.cond-spark__hours span:last-child { transform: translateX(-100%); }
.cond-spark__axis {
  display: flex;
  justify-content: space-between;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  color: var(--text-faint);
}

.cond-meta {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: 1.4rem;
  color: var(--text-faint);
}
.cond-meta span { font-size: 0.72rem; letter-spacing: 0.02em; }
.cond-meta .cond-refresh { grid-column: 2; justify-self: center; }
@media (max-width: 520px) {
  .cond-meta { grid-template-columns: 1fr; justify-items: center; gap: 0.7rem; }
  .cond-meta .cond-refresh { grid-column: auto; }
}
.cond-refresh {
  font-family: var(--font-display);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 0.5em 1.1em;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cond-refresh:hover { border-color: var(--accent); color: var(--accent-bright); }
.cond-refresh:disabled { opacity: 0.5; cursor: default; }
.cond-note { margin-top: clamp(2rem, 5vw, 3rem); }

/* ---------- Shop ---------- */
/* homepage teaser: one framed strip split into three product buttons */
/* homepage shop — free-sliding rail of product cards */
.shop-rail {
  display: flex;
  gap: 0.9rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 1.6rem 0 1.8rem;
  padding-bottom: 4px;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  cursor: grab;
}
.shop-rail::-webkit-scrollbar { display: none; }
.shop-rail.is-dragging { cursor: grabbing; }
.shop-rail.is-dragging a { pointer-events: none; }
.shop-slide {
  flex: 0 0 clamp(190px, 46vw, 240px);
  display: grid;
  gap: 0.28rem;
  align-content: start;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-inset);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.shop-slide:hover { border-color: var(--accent); transform: translateY(-2px); }
.shop-slide:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.shop-slide__media {
  aspect-ratio: 4 / 3;
  margin-bottom: 0.5rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--topo) center / 150px, var(--surface-2);
}
.shop-slide__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* "coming soon" placeholder for rail items without a photo yet, matching
   the shop grid / product popup treatment */
.shop-slide__soon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-faint);
}
.shop-slide__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.shop-slide__detail { font-size: 0.76rem; color: var(--text-faint); }
.shop-slide__price {
  margin-top: 0.1rem;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--accent);
}
.shop-slide:hover .shop-slide__price { color: var(--accent-bright); }

/* small uppercase arrow link used in place of a solid section button */
.mini-cta {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.shop-page { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
.shop-section { display: grid; gap: 1rem; }
.shop-section h2 {
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}
/* shop page — photo tiles with the name/price laid over the image */
.shop-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
}
@media (min-width: 620px) {
  .shop-tiles { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.9rem; }
  .shop-tile { aspect-ratio: 4 / 3; padding: 1rem 1.1rem 1.05rem; }
}
.shop-tile {
  position: relative;
  isolation: isolate;
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0.8rem 0.85rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-inset);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.shop-tile:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.shop-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background: var(--topo) center / 180px, var(--surface-2);
}
.shop-tile__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.35) brightness(0.62) contrast(1.03);
}
.shop-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(18, 18, 18, 0.12) 0%,
    rgba(18, 18, 18, 0.42) 42%,
    rgba(18, 18, 18, 0.9) 100%);
}
.shop-tile__badge {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  font-family: var(--font-display);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.32em 0.65em;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--border-strong);
  color: var(--text-faint);
}
.shop-tile[data-status="available"] .shop-tile__badge { display: none; }
.shop-tile[data-status="soon"] .shop-tile__badge {
  color: var(--accent-bright);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
/* sold out — dim the tile, but it's still tappable for the product view */
.shop-tile[data-status="out"] .shop-tile__img { filter: grayscale(0.7) brightness(0.42) contrast(1.02); }
.shop-tile[data-status="out"] .shop-tile__name,
.shop-tile[data-status="out"] .shop-tile__detail,
.shop-tile[data-status="out"] .shop-tile__price { opacity: 0.6; }

/* "coming soon" — a styled placeholder where the product photo will go */
.shop-tile[data-status="soon"] {
  background:
    radial-gradient(130% 90% at 50% 34%, rgba(232, 99, 42, 0.07), transparent 72%),
    var(--topo) center / 200px,
    var(--surface-inset);
}
.shop-tile[data-status="soon"]::after { display: none; }
.shop-tile[data-status="soon"] .shop-tile__name,
.shop-tile[data-status="soon"] .shop-tile__detail,
.shop-tile[data-status="soon"] .shop-tile__price { opacity: 0.6; }
.shop-tile__soon {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 4.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.shop-tile__body { display: grid; gap: 0.1rem; }
.shop-tile__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.82rem, 0.7rem + 1vw, 0.95rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.15;
}
.shop-tile__detail {
  font-size: 0.72rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shop-tile__price {
  margin-top: 0.2rem;
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 0.8rem + 0.8vw, 1.05rem);
  color: var(--accent);
}
.shop-note { margin-top: 0.5rem; font-size: 0.85rem; }
.shop-note a { color: var(--accent); }
.shop-tile { -webkit-appearance: none; appearance: none; text-align: left; font: inherit; width: 100%; }
.shop-tile:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }

/* order-received banner (?ordered=1) */
.shop-ok {
  padding: 0.9rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-dim);
  color: var(--text);
  font-size: 0.92rem;
}

/* ---------- Shop: product view + cart (slide-over) ---------- */
.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
}
.qty button {
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.qty button:hover { color: var(--accent-bright); background: rgba(245, 241, 234, 0.04); }
.qty > span {
  min-width: 2.4rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1rem;
  border-inline: 1px solid var(--border);
}
.qty--sm button { width: 2rem; height: 2rem; font-size: 0.95rem; }
.qty--sm > span { min-width: 1.9rem; font-size: 0.9rem; }

.shop-add { display: grid; gap: 0.5rem; }
.shop-add__note {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-bright);
}
.shop-oos { color: var(--text-muted); font-size: 0.92rem; }
.shop-oos a { color: var(--accent); }
.shop-oos a:hover { color: var(--accent-bright); }

/* product view — "More from the shop" rail below About */
.shop-more__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}
.shop-more__head h3 { margin-bottom: 0; }
.shop-more__head .arrow-link { font-size: 0.78rem; white-space: nowrap; }
.shop-more__rail {
  display: flex;
  gap: 0.7rem;
  overflow-x: auto;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: none;
  cursor: grab;
}
.shop-more__rail::-webkit-scrollbar { display: none; }
.shop-more__rail.is-dragging { cursor: grabbing; }
.shop-more__rail.is-dragging img { pointer-events: none; }
.shop-more__card {
  flex: 0 0 min(42%, 148px);
  display: grid;
  gap: 0.4rem;
  color: var(--text);
  text-decoration: none;
}
.shop-more__media {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--topo) center / 120px, var(--surface-inset);
}
.shop-more__soon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.35;
  text-align: center;
  color: var(--text-faint);
}
.shop-more__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-mid) var(--ease);
}
.shop-more__card:hover .shop-more__media img { transform: scale(1.05); }
.shop-more__name {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.15;
  transition: color var(--dur-fast) var(--ease);
}
.shop-more__card:hover .shop-more__name { color: var(--accent-bright); }
.shop-more__price {
  font-family: var(--font-display);
  font-size: 0.78rem;
  color: var(--accent);
}

.cart-list { display: grid; gap: 0.6rem; margin-top: 1.4rem; }
.cart-row {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  grid-template-areas:
    "media info line"
    "media qty  x";
  align-items: center;
  gap: 0.4rem 0.8rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-inset);
}
/* the photo + name link back to that product; steppers/remove stay separate */
.cart-row__link { display: contents; color: inherit; text-decoration: none; }
.cart-row__media {
  grid-area: media;
  width: 52px; height: 52px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--topo) center / 90px, var(--surface-2);
  cursor: pointer;
}
.cart-row__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-row__info { grid-area: info; display: grid; gap: 0.1rem; min-width: 0; cursor: pointer; }
.cart-row__name {
  font-family: var(--font-display);
  font-size: 0.86rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease);
}
.cart-row__link:hover .cart-row__name { color: var(--accent-bright); }
.cart-row__each { font-size: 0.74rem; color: var(--text-faint); }
.cart-row .qty { grid-area: qty; justify-self: start; }
.cart-row__line {
  grid-area: line;
  justify-self: end;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--accent);
}
.cart-row__x {
  grid-area: x;
  justify-self: end;
  width: 1.9rem; height: 1.9rem;
  display: grid; place-items: center;
  color: var(--text-faint);
  transition: color var(--dur-fast) var(--ease);
}
.cart-row__x svg { width: 15px; height: 15px; }
.cart-row__x:hover { color: var(--accent-bright); }

.cart-foot { margin-top: 1.3rem; display: grid; gap: 0.7rem; }
.cart-sub {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.cart-sub span:last-child { color: var(--accent); }
.cart-tax { font-size: 0.8rem; line-height: 1.5; color: var(--text-faint); }
.cart-empty { margin-top: 2rem; display: grid; gap: 0.8rem; color: var(--text-muted); }

/* cart — an icon button in the bottom-right of the hamburger sheet,
   beside "Book". Shown only once the cart has something in it. */
.nav__sheet-foot {
  margin-top: auto;
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
}
.nav__sheet .nav__sheet-foot .nav__cta {
  flex: 1 1 auto;
  width: auto;
  margin: 0;
}
.nav__cart {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 1.15em;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(245, 241, 234, 0.10), rgba(245, 241, 234, 0.03));
  color: var(--text);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav__cart[hidden] { display: none; }
.nav__cart:hover { border-color: var(--accent); color: var(--accent-bright); }
.nav__cart svg { width: 22px; height: 22px; display: block; }
.nav__cart__n {
  position: absolute;
  top: 7px;
  right: 7px;
  min-width: 1.2em;
  padding: 0 0.25em;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.62rem;
  line-height: 1.45;
  text-align: center;
}
.nav__cart__n:empty { display: none; }

/* sheet foot: drop the outlined-button look for a soft raised surface,
   the way the scrolled header sits on a shadow instead of an edge line */
.nav__sheet-foot .nav__cta,
.nav__sheet-foot .nav__cart {
  border: 0;
  background: var(--surface-2);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.7),
              inset 0 1px 0 rgba(245, 241, 234, 0.06);
  transition: transform var(--dur-fast) var(--ease),
              background var(--dur-mid) var(--ease),
              box-shadow var(--dur-mid) var(--ease),
              color var(--dur-mid) var(--ease);
}
.nav__sheet-foot .nav__cta:hover,
.nav__sheet-foot .nav__cart:hover {
  transform: translateY(-2px);
  color: var(--accent-bright);
  background: color-mix(in srgb, var(--accent) 15%, var(--surface-2));
  box-shadow: 0 18px 36px -15px rgba(0, 0, 0, 0.78),
              inset 0 1px 0 rgba(245, 241, 234, 0.08);
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-aside { position: static; }
}
@media (max-width: 760px) {
  .nav__toggle { display: inline-flex; }

  /* home page: header floats over the hero (photo runs to the top of the
     screen). One eased progress --he (0 landing → 1 compact) shrinks the
     logo, this header and the buttons together; --he defaults to 0 →
     header invisible, no flash. */
  .page-home .site-header {
    position: fixed;
    left: 0;
    right: 0;
    background: rgb(18 18 18 / calc(var(--he, 0) * 0.5));
    -webkit-backdrop-filter: blur(calc(var(--he, 0) * 15px));
    backdrop-filter: blur(calc(var(--he, 0) * 15px));
    box-shadow: 0 14px 30px -18px rgb(0 0 0 / calc(var(--he, 0) * 0.55));
    transition: none; /* --he / --header-h are already damped in JS */
  }
  /* the nav row height shrinks with the logo; buttons stay centred in it */
  .page-home .nav { min-height: var(--header-h, 112px); }
  /* menu button: translucent → solid white, shrinks in tandem with the logo */
  .page-home .nav__toggle {
    color: #fff;
    opacity: calc(0.5 + 0.5 * var(--he, 0));
    transform: scale(calc(1 - var(--he, 0) * 0.08));
    transition: none;
  }
  /* location pin: fades in over the back half of the shrink, same grey→white
     and same size as the menu button; colour breathes a soft grey */
  .page-home .nav__loc {
    display: inline-flex;
    color: #fff;
    opacity: calc((var(--he, 0) - 0.5) / 0.5);
    transform: scale(calc(1 - var(--he, 0) * 0.08));
    transition: none;
    pointer-events: none;
    animation: pin-pulse 3.6s linear infinite;
  }

  /* real header logo + eyebrow yield to the fixed hero logo */
  body.home-morph .site-header .brand { display: none; }
  body.home-morph .hero__inner .eyebrow { display: none; }
  body.home-morph .hero { padding-top: clamp(9rem, 24vh, 13rem); }

  /* mobile: deepen the wash through the sub-copy band so it stays legible */
  .hero::after {
    background:
      linear-gradient(to bottom,
        rgba(18, 18, 18, 0.34) 0%,
        rgba(18, 18, 18, 0.50) 24%,
        rgba(18, 18, 18, 0.82) 50%,
        rgba(18, 18, 18, 0.95) 74%,
        var(--bg) 94%);
  }
  .hero__line { text-shadow: 0 1px 18px rgba(0, 0, 0, 0.8); }

  /* Mobile menu: slide-up bottom sheet stopping just below the header */
  .nav__sheet {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    top: calc(var(--nav-h, 64px) + 8px);
    bottom: 0;
    z-index: 45;
    padding: 0.85rem 1.35rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
    background: var(--surface-1);
    border-top: 1px solid var(--border-strong);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -26px 60px rgba(0, 0, 0, 0.55);
    transform: translateY(102%);
    visibility: hidden;
    transition: transform 0.28s var(--ease),
                visibility 0s linear 0.28s;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .nav__sheet.is-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.28s var(--ease), visibility 0s;
  }
  /* mid-drag: track the finger with no easing lag */
  .nav__sheet.is-dragging { transition: none; }

  .nav__sheet::before {
    content: "";
    align-self: center;
    flex: 0 0 auto;
    width: 40px;
    height: 4px;
    margin-bottom: 0.4rem;
    border-radius: 999px;
    background: var(--border-strong);
  }

  .nav__sheet .nav__links {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
  }
  .nav__sheet .nav__links li + li { border-top: 1px solid var(--border); }
  .nav__sheet .nav__links a {
    display: block;
    padding: 1.15rem 0.25rem;
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    color: var(--text);
  }
  .nav__sheet .nav__links a::after { content: none; }
  .nav__sheet .nav__links a[aria-current="page"] { color: var(--accent); }

  .nav__sheet .nav__cta {
    display: flex;
    width: 100%;
    margin-top: auto;
    padding: 1.05em 2em;
    font-size: 0.9rem;
  }

  .slider__nav { display: none; }
  .section-head { flex-direction: column; gap: 0.6rem; }
  /* stacked: intro sits text-aligned under the heading */
  .section-head__intro { padding-left: clamp(0.9rem, 2vw, 1.2rem); max-width: none; }
  .price-list .price-list__value { text-align: left; }
}
@media (max-width: 480px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* About: the guide portrait is a desktop-only addition (see the desktop
   block below); keep it out of the mobile flow entirely. */
.about-portrait { display: none; }

/* ===================================================================
   DESKTOP (min-width: 761px) — aesthetic-only pass.
   Everything here is gated above the mobile breakpoint, so the phone
   layout is untouched.
   =================================================================== */
@media (min-width: 761px) {

  /* Home hero — the nowrap headline is wider than the 62ch inner box, which
     was throwing the sub-copy off-centre. Let the inner box grow to the
     headline so the whole stack self-centres. */
  .hero__inner { max-width: none; }

  /* Page heroes — centre the eyebrow / title / lead on the page */
  .page-hero { text-align: center; }
  .page-hero__inner {
    margin-inline: auto;
    justify-items: center;
  }

  /* Home section heads — the intro paragraph drops beneath the heading
     instead of sitting out on the right. */
  .section-head {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .section-head__intro {
    max-width: 52ch;
    padding-left: clamp(0.9rem, 2vw, 1.2rem);
    padding-top: 0.35rem;
  }
  /* Day Trips has only two cards — drop its arrows and let the pair fill
     the row as equal halves instead of a short scrolling strip. */
  #trips .slider__nav { display: none; }
  #trips .slider__viewport {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(20px, 2.6vw, 32px);
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
  #trips .card { flex: none; scroll-snap-align: none; }

  #learn > .container { position: relative; }
  #learn .slider { position: static; }
  #learn .slider__nav {
    top: 0.35rem;
    right: var(--gutter);
    bottom: auto;
    left: auto;
  }

  /* Your Guide band — darken the portrait */
  .band__media img { filter: grayscale(0.3) brightness(0.6) contrast(1.04); }

  /* About page — guide portrait alongside the story, on the right */
  .about-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(300px, 30vw, 400px);
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
  }
  .about-body .prose { max-width: 64ch; }
  .about-portrait {
    display: block;
    position: sticky;
    top: 110px;
    margin: 0;
  }
  .about-portrait img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius);
    filter: grayscale(0.15) brightness(0.95) contrast(1.02);
  }

  /* Conditions page — let the creek visual and the copy fill the width.
     aspect-ratio + max-height was collapsing the scene's width on short
     viewports; pin an explicit height instead so it always fills the panel. */
  .page-conditions .section > .container { max-width: none; }
  .page-conditions .cond-note,
  .page-conditions .prose { max-width: none; }
  .page-conditions .cond-scene {
    aspect-ratio: auto;
    height: clamp(300px, 42vh, 480px);
    max-height: none;
  }
}