/* =========================================================
   Tailwater × Briar Patch Inn — design system
   Same component system and layout language as tailwaterflyco.com
   (this file starts as a literal copy of it) — only the color tokens
   below are retoned, pulling from Briar Patch's actual site
   (briarpatchinn.com): their terracotta brand color (#993d2a, sampled
   from their logo SVG and CTA buttons) as the accent, and their dark
   forest-green header strip (~#202d29) blended into the background
   instead of Tailwater's neutral charcoal. Everything else — type,
   spacing, every component — is untouched, so the UX stays Tailwater's.
   ========================================================= */

/* 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 {
  /* light "parchment" palette — lightened per owner request. Briar
     Patch's dark forest-green header tone lives on as --ink, used only
     for the header/hero/panel-hero blocks that sit on top of photos;
     everything else (page, cards, panel body, footer) is cream/white. */
  --bg:              #f6f1e5;
  --surface-1:       #f9f4e8;
  --surface-2:       #efe6d2;
  --surface-inset:   #fbf7ec;
  --ink:             #141d19;

  --text:            #221c14;
  --text-muted:      rgba(34, 28, 20, 0.68);
  --text-faint:      rgba(34, 28, 20, 0.46);

  --border:          rgba(34, 28, 20, 0.12);
  --border-strong:   rgba(34, 28, 20, 0.22);

  --accent:          #a8452f;
  --accent-bright:   #c85a3f;
  --accent-dim:      rgba(168, 69, 47, 0.12);

  --cal-open:        #4f7a52;                   /* available-day accent (forest green) */
  --cal-open-dim:    rgba(79, 122, 82, 0.12);    /* available-day fill */

  --radius:          8px;
  --radius-sm:       4px;
  --radius-pill:     999px;
  --shadow:          0 20px 44px rgba(34, 28, 20, 0.12);
  --shadow-lg:       0 30px 80px rgba(34, 28, 20, 0.20);

  --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='%23221c14' 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='%23221c14' 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='%23221c14' 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;
  /* explicit (not just inherited) so headings inside a locally-scoped
     dark block (.hero, .oc-hero, .site-header) re-resolve --text there
     instead of carrying forward body's already-resolved light-theme
     color */
  color: var(--text);
}

.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); }
.lead a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  transition: color var(--dur-fast) var(--ease);
}
.lead a:hover { color: var(--accent-bright); }
.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(168, 69, 47, 0.18), rgba(168, 69, 47, 0.06));
}
.btn:active { transform: translateY(0); }

.btn--solid {
  /* terracotta, not black/near-black — reads as the brand's own color
     everywhere: the dark hero/panel-hero blocks and the light page */
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn--solid:hover {
  background: var(--accent-bright);
  border-color: var(--accent-bright);
  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 {
  /* dark Briar-Patch-green strip, deliberately kept dark against the
     page's light parchment body — same split their own site uses, and
     what keeps the two logos legible. Scoped --text/--border overrides
     below undo the page-wide light-theme flip just inside the header. */
  --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);
  --bg:              var(--ink);
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(20, 29, 25, 0.84);
  -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(20, 29, 25, 0.9);
  /* soft depth instead of a visible edge line */
  box-shadow: 0 16px 32px -18px rgba(0, 0, 0, 0.3);
}

/* Promo memo — a solid, non-scrolling line that appears at the TOP of
   the header (above the nav row) once you scroll, in step with the
   header's own scrolled state — collapsed/invisible until then, same
   as before, just repositioned and no longer a sliding ticker. */
.header-memo {
  /* .site-header is plain block flow — this sits above .nav simply by
     being inserted before it in the DOM (see main.js). A solid, more
     opaque tone (vs. the header's own translucent blur) so it reads as
     its own strip riding above the header, not part of it. */
  height: 0;
  opacity: 0;
  overflow: hidden;
  text-align: center;
  background: rgba(9, 9, 9, 0.92);
  box-shadow: inset 0 -1px 0 rgba(168, 69, 47, 0.30);
  transition: opacity var(--dur-mid) var(--ease),
              height var(--dur-mid) var(--ease);
}
.site-header.is-scrolled .header-memo {
  height: 28px;
  opacity: 1;
}
/* the marquee would overlap the open mobile menu — fade it out until close */
body.nav-open .header-memo { opacity: 0; }
.header-memo__static {
  display: block;
  width: 100%;
  line-height: 28px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bright);
}

/* fixed hero logo — placed by JS, never moves or resizes horizontally.
   Holds two stacked marks (the plain landing wordmark + the regular
   fish-mark logo) that crossfade into each other as the page scrolls —
   see the JS for the opacity curve. Each image self-centers (left:50% +
   translateX(-50%)) since the two marks have different aspect ratios. */
.hero-morph-logo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 60;
  display: none;
  pointer-events: none;   /* full viewport width, for centring — not a click target itself */
  will-change: transform;
}
.hero-morph-logo img {
  position: absolute;
  top: 0;
  left: 50%;
  width: auto;
  display: block;
  transform: translateX(-50%);
  filter: drop-shadow(0 8px 26px rgba(0, 0, 0, 0.5));
  /* pointer-events toggled per-image in JS — only the visible mark is clickable */
}
@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 {
  /* self-contained dark block (photo + wash), independent of the page's
     light body — see .site-header for why. */
  --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);
  --bg:              var(--ink);
  position: relative;
  isolation: isolate;
  min-height: 92vh;
  display: grid;
  /* 3 equal flexible rows (above the partner lockup, between it and the
     title block, and below the title) + the 2 content rows — equal
     top/middle tracks put the Briar Patch lockup's vertical center
     exactly midway between the header and the title, however tall
     the viewport is. See .hero__partner / .hero__inner grid-row. */
  grid-template-rows: minmax(1rem, 1fr) auto minmax(1rem, 1fr) auto 1fr;
  justify-items: center;
  align-items: center;
  text-align: center;
  /* no fixed top padding — row 1 (a true 1fr track) must be free to
     match row 3 exactly, or the partner lockup won't sit centered
     between the header and the title */
  padding: 0 var(--gutter) 6rem;
  overflow: hidden;
  background: var(--ink);
}
/* 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,
.hero__media video {
  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 — darkened overall (was too light against the
     video for the logo/badge up top to read well), still shows the
     scene through; deepens into var(--bg) with no seam at the foot */
  background:
    linear-gradient(to bottom,
      rgba(10, 10, 10, 0.48) 0%,
      rgba(12, 12, 12, 0.56) 28%,
      rgba(14, 14, 14, 0.76) 54%,
      rgba(16, 16, 16, 0.94) 78%,
      var(--ink) 100%);
}
.hero__inner {
  grid-row: 4;
  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; }
/* "Immerse Yourself in Oak Creek" stays on one line at every width —
   a smaller vw-scaled minimum below 640px keeps it from overflowing
   on narrow phones; the original desktop sizing is unchanged. */
.hero .h-hero {
  white-space: nowrap;
  max-width: none;
  margin-inline: auto;
  font-size: clamp(1rem, 5vw, 3.6rem);
}
@media (min-width: 640px) { .hero .h-hero { font-size: clamp(1.4rem, 6.4vw, 3.6rem); } }
/* mobile-only size hierarchy: title a touch bigger (still one line,
   letter-spacing tightened slightly to buy back the width), sub a
   touch smaller, line smaller again — clearer step-down than before. */
@media (max-width: 639px) {
  .hero .h-hero { font-size: clamp(1.05rem, 5.3vw, 3.6rem); letter-spacing: 0.015em; }
  .hero__sub { font-size: clamp(0.92rem, 2vw, 1.7rem); }
  .hero__line { font-size: clamp(0.82rem, 1.8vw, 1rem); }
}
/* logo + tiny descriptor read as one quiet lockup, separate from the
   headline below it, so the headline stays the clear focal point */
.hero__partner {
  grid-row: 2;
  /* participate in the positioned stacking order (see .hero__inner) —
     without this it's a non-positioned in-flow box, which paints
     BEHIND the position:absolute video/wash (z-index:0/1) despite
     coming later in the DOM, so it'd be invisible */
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
}
/* no badge/box — the logo itself carries a drop-shadow (not a
   box-shadow, which an SVG's transparent background would ignore) so
   it still reads cleanly no matter what's playing in the video behind
   it, same trick as .hero h1's text-shadow just below */
.hero__partner-badge {
  display: grid;
  justify-items: center;
  gap: 0.45rem;
}
.hero__partner-tag {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.65rem, 1.3vw, 0.78rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8);
}

/* 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%);
}
#naturalist.topo-bg::before,
#casting.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);
}
#rentals-teaser.topo-bg::before {
  background-image: var(--topo-b);
  -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: #f5f1ea;
  background: rgba(18, 18, 18, 0.78);
  border: 1px solid rgba(245, 241, 234, 0.14);
  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; }

/* ---------- Guide band + Testimonials share one fading backdrop ----------
   The .band-block wrapper holds the photo; it runs behind the band and
   dissolves to solid --bg by the foot of the testimonial band. */
.band-block {
  position: relative;
  isolation: isolate;
  background: var(--bg);
}
.band-block__media {
  position: absolute; inset: 0; z-index: -2;
  overflow: hidden;
  background:
    var(--topo) center / 460px repeat,
    linear-gradient(120deg, #211f1b, #141414);
}
.band-block__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 16%;
  filter: grayscale(0.25) brightness(0.9) contrast(1.02);
}
.band-block::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background:
    /* darken the left so the band copy stays readable */
    linear-gradient(90deg, rgba(15, 15, 15, 0.92), rgba(15, 15, 15, 0.6) 55%, rgba(15, 15, 15, 0.4)),
    /* fade the whole thing down to page black through the testimonials */
    linear-gradient(180deg,
      rgba(18, 18, 18, 0.08) 0%,
      rgba(18, 18, 18, 0.34) 40%,
      rgba(18, 18, 18, 0.82) 66%,
      var(--bg) 90%);
}

.band {
  position: relative;
  padding-block: var(--band-pad);
}
.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; }

/* ---------- Testimonials carousel — a quiet accent beside the guide bio ----------
   No heading. Mobile: stacked under the bio. Desktop: right column (see the
   .band__grid rule in the desktop block). */
.quotes {
  position: relative;
  margin-top: clamp(1.1rem, 5vw, 2rem);
}
.quotes__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}
.quotes__track::-webkit-scrollbar { display: none; }
.quotes__track.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.quote {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: grid;
  gap: 0.55rem;
  justify-items: center;
  text-align: center;
  padding: 0.5rem clamp(0.5rem, 4vw, 2rem) 0.75rem;
  margin: 0;
}
.quote blockquote {
  position: relative;
  margin: 0;
  max-width: 46ch;
  font-size: clamp(0.82rem, 0.8rem + 0.35vw, 0.92rem);
  line-height: 1.5;
  color: var(--text-muted);
}
.quote figcaption {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.quote figcaption::before { content: "\2014\00a0"; }
.quotes__dots {
  display: flex;
  gap: 0.45rem;
  justify-content: center;
  margin-top: 0.5rem;
}
.quotes__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--border-strong);
  transition: width var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.quotes__dot.is-active { width: 18px; background: var(--accent); }

@media (max-width: 760px) {
  /* balance the photo/dark space above the quote with the space below the dots */
  .quotes { margin-top: clamp(2rem, 8vw, 2.75rem); }
  .band-block .band { padding-bottom: clamp(30px, 9vw, 46px); }
}

/* ---------- 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);
}
/* long titles ("Oak Creek Naturalist Experience") stay on one line
   next to the Close button below 760px, where the panel is 100vw —
   smaller vw-scaled minimum than the original, which only had room
   for short titles; restored above 760px where the panel is fixed
   at 760px wide regardless of viewport. */
.panel__head h2 {
  font-size: clamp(0.68rem, 3.2vw, 1.7rem);
  text-transform: uppercase;
  letter-spacing: 0.015em;
  white-space: nowrap;
}
@media (min-width: 760px) {
  .panel__head h2 { font-size: clamp(1.25rem, 2.6vw, 1.7rem); 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;
}
/* a small caveat sitting above a "Build your X" heading, e.g. Fundamentals'
   participant caps per session length */
.rate-headnote { font-size: 0.86rem; margin-bottom: 0.7rem; }
/* faint sub-note under a booking heading (e.g. "Trips start at 9 AM") */
.panel__h3-note {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--text-faint);
  opacity: 0.7;
}
/* a small orange link inline within body copy (e.g. the Fundamentals
   2-hour alternative, mid-paragraph) */
.accent-link { color: var(--accent); font-size: 0.9em; text-decoration: underline; text-underline-offset: 2px; }
.accent-link:hover { color: var(--accent-bright); }

/* 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__addon {
  display: inline-flex;
  align-items: center;
  align-self: center;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.rate-out__addon[hidden] { display: none; }
.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 */
/* this calendar box was originally styled to sit on a dark photo
   (elsewhere, it lives inside .oc-hero) — here it sits in the plain
   light panel body instead, so it gets a light card background to
   match, not the dark-on-photo one. */
.rate-cal {
  background: var(--surface-2);
  border: 1px solid var(--border);
  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);
}

/* start-time select (Fundamentals) — reuses rentals' .rrange-time select
   styling; .rate-time just adds the same "pick this" highlight the
   calendar gets when Book is pressed before it's filled in */
.rate-time select { transition: border-color var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease); }
.rate-time.is-missing select {
  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 {
  position: relative;
  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);
}
/* rentals only: a guide trip is out that day — pickup has to be 2 PM+ */
.rate-cal__day.is-restricted span { transform: translateY(-0.3em); }
.rate-cal__day.is-restricted small {
  position: absolute;
  bottom: 0.14em;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.38rem;
  line-height: 1;
  letter-spacing: 0.02em;
  font-weight: 600;
  color: var(--accent-bright);
  pointer-events: none;
}
/* 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); }

/* compact variant — same picker, less vertical room. Flagged per-service
   via rates.compact (Oak Creek, everywhere its picker renders). */
.rate-picker.is-compact { gap: 0.55rem; }
.rate-picker.is-compact .seg__btn { padding: 0.45em 0.4em; font-size: 0.76rem; }
.rate-picker.is-compact .rate-cal { padding: 0.5rem 0.55rem 0.4rem; }
.rate-picker.is-compact .rate-cal__head { margin-bottom: 0.4rem; }
.rate-picker.is-compact .rate-cal__month { font-size: 0.8rem; }
.rate-picker.is-compact .rate-cal__nav { width: 24px; height: 24px; }
.rate-picker.is-compact .rate-cal__nav svg { width: 13px; height: 13px; }
.rate-picker.is-compact .rate-cal__grid { gap: 2px; }
.rate-picker.is-compact .rate-cal__wd { font-size: 0.52rem; padding-bottom: 0.15rem; }
.rate-picker.is-compact .rate-cal__day { font-size: 0.74rem; }
.rate-picker.is-compact .rate-cal__legend { margin-top: 0.4rem; }
.rate-picker.is-compact .rate-cal__hint { margin-top: 0.4rem; font-size: 0.68rem; }
.rate-picker.is-compact .rate-out { padding-top: 0.2rem; gap: 0.3rem 0.6rem; }
.rate-picker.is-compact .rate-out__price { font-size: 1.5rem; }

.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;
}
/* "Choose your water" reads as a plain label — no orange tick */
.aa-sect > h3 { padding-left: 0; }
.aa-sect > h3::before { display: none; }

.aa-detail {
  margin-top: 1.6rem;
  padding-left: 0.85rem;
  border-left: 2px solid var(--accent);
}
.aa-detail__top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.7rem;
}
.aa-detail__name {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}
/* low-key "Conditions" button — same readout the map pins open */
.aa-cond-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.34em 0.7em;
  font-family: var(--font-display);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.aa-cond-btn svg { width: 13px; height: 13px; opacity: 0.8; }
.aa-cond-btn:hover,
.aa-cond-btn:focus-visible { color: var(--text); border-color: var(--border-strong); outline: none; }
.aa-detail__desc {
  margin-top: 0.35rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-muted);
}
.aa-detail__meta a { color: var(--accent); text-transform: none; letter-spacing: normal; }
.aa-detail__meta a:hover { color: var(--accent-bright); }
.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 {
  /* same dark-on-photo scoping as .hero / .site-header */
  --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);
  --bg:              var(--ink);
  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) 2.6rem;
  overflow: hidden;
  background: var(--ink);
}
.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%);
}
/* Two lesson heroes only (Fly Fishing Fundamentals, Casting +
   Entomological Education) — their lead paragraph runs long enough
   that .oc-hero__body's content height exceeds min-height outright,
   so there's no slack left for justify-content: flex-end to push it
   down with (that slack is what gives Oak Creek's short copy its gap
   under the sticky panel header). Rather than lean on that slack —
   fragile, and it disappears again the moment copy gets any longer —
   force a real top gap here directly, plus a stronger wash (their
   photos are also bright/busy right at the top of frame, where the
   default ~15%-dark wash isn't enough contrast for the eyebrow text).
   Everything else about .oc-hero is untouched. */
.oc-hero--dim { padding-top: 4.5rem; }
.oc-hero--dim::after {
  background: linear-gradient(180deg,
    rgba(18, 18, 18, 0.6) 0%,
    rgba(18, 18, 18, 0.62) 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(168, 69, 47, 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; }
/* "Oak Creek Naturalist Experience" stays on one line below 760px
   (same panel-width reasoning as .panel__head h2 above); restored to
   the original formula, wrapping allowed again, above 760px. */
.oc-hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, 5vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (min-width: 760px) {
  .oc-hero__title {
    font-size: clamp(1.55rem, 1.1rem + 2.4vw, 2.4rem);
    letter-spacing: 0.02em;
    white-space: normal;
  }
}
.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); }
}

/* ---------- Conditions sheet (Across Arizona "Conditions" button) ---------- */
.cond-sheet {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 1.1rem;
}
.cond-sheet[hidden] { display: none; }
.cond-sheet__scrim {
  position: absolute;
  inset: 0;
  background: rgba(9, 9, 9, 0.74);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease);
}
.cond-sheet.is-open .cond-sheet__scrim { opacity: 1; }
.cond-sheet__card {
  position: relative;
  width: 100%;
  max-width: 340px;
  max-height: 86vh;
  overflow-y: auto;
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: opacity var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease);
}
.cond-sheet.is-open .cond-sheet__card { opacity: 1; transform: none; }
.cond-sheet__x {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  z-index: 2;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(18, 18, 18, 0.5);
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease);
}
.cond-sheet__x:hover { color: var(--accent-bright); }
.cond-sheet__x svg { width: 16px; height: 16px; }
.cond-sheet__body .wc-card { padding: 1.1rem 1.2rem 1.2rem; }
@media (prefers-reduced-motion: reduce) {
  .cond-sheet__scrim,
  .cond-sheet__card { transition: none; }
}

/* ---------- "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 {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
  min-width: 0;
  transition: border-color var(--dur-fast) var(--ease);
}
.book-feature:hover { border-color: var(--border-strong); }
/* covers the whole card so photo/title/sell text all open the service;
   the specific option buttons below sit later in the DOM so they still
   paint (and click) on top of it */
.book-feature__trigger { position: absolute; inset: 0; font-size: 0; }
.book-feature__media {
  /* same dark-on-photo scoping as .hero / .site-header / .oc-hero —
     this is a dark photo + wash block too, so title/chip need the
     light --text override or they inherit the page's dark text and
     disappear against the gradient. */
  --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);
  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.8) 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.88); }
.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.3) 44%,
    rgba(18, 18, 18, 0.82) 100%);
}
.book-feature__chip {
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-bright);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.75);
}
.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;
  color: var(--text);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.75);
  white-space: nowrap;
}
.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; }
/* "Oak Creek Naturalist Experience" (the longest of the three titles)
   stays on one line below 760px — the panel is 100vw there, so a
   smaller vw-scaled minimum keeps it from wrapping on narrow phones;
   it meets the original desktop formula smoothly right at 760px. */
.panel--book .book-feature__title { font-size: clamp(0.95rem, 4vw, 1.95rem); }
@media (min-width: 760px) {
  .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;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.5rem 0.15rem 0.15rem;
  margin-bottom: 0.9rem;
  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 {
  /* same dark-on-photo scoping as .hero / .site-header / .oc-hero —
     confirmed.html's "Experience Confirmed" banner is a dark photo
     block too, independent of the page's light body */
  --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);
  --bg:              var(--ink);
  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);
}

/* partner referral landing (/p/<slug> -> partner.html) — one template,
   branding filled in by js/partner.js from data/partners.json */

/* logo alone in the nav row now reads as centered; "Continue to Site" moved
   to its own strip where the marquee usually rides — same background/blur
   as the header itself, so it reads as one continuous piece, not a button */
.nav--partner { justify-content: center; }
.partner-subbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 0;
  background: rgba(9, 9, 9, 0.82);
  border-top: 1px solid var(--border);
  -webkit-backdrop-filter: blur(16px) saturate(115%);
  backdrop-filter: blur(16px) saturate(115%);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease), background var(--dur-mid) var(--ease);
}
.partner-subbar:hover { color: var(--accent-bright); background: rgba(9, 9, 9, 0.95); }
.partner-subbar span { transition: transform var(--dur-fast) var(--ease); }
.partner-subbar:hover span { transform: translateX(3px); }

/* one continuous wash from black at the very top, through the Oak Creek
   hero + builder, down to the page's normal background by its foot —
   the "Learn to Fly Fish" section below sits on plain --bg. */
.partner-wash {
  background: linear-gradient(180deg, #000 0%, var(--surface-1) 55%, var(--bg) 100%);
  padding-bottom: clamp(1.6rem, 5vw, 3rem);
}
/* a matching top-fade on the Oak Creek photo so the black wash above
   blends into it — tall enough to seat the partner logo/name over it,
   easing down into the visible photo where the Oak Creek title sits */
.page-partner .oc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.82) 30%, transparent 62%);
  pointer-events: none;
}
/* the combined hero: partner welcome pinned to the top of the photo,
   Oak Creek's own title/lead at the bottom — one band, similar overall
   height to what the two separate sections used to add up to */
.page-partner .oc-hero--partner {
  justify-content: space-between;
  min-height: clamp(340px, 58vw, 460px);
  padding-top: clamp(28px, 6vw, 48px);
}
.oc-hero__partner-top { text-align: center; display: grid; justify-items: center; gap: 0.35rem; }
.oc-hero__partner-top .partner-hero__logo { max-height: 44px; width: auto; margin-bottom: 0.15rem; }
.oc-hero__partner-top .partner-hero__name {
  text-transform: uppercase;
  font-size: clamp(1.3rem, 4vw, 1.8rem);
  letter-spacing: 0.02em;
  color: var(--text);
}
.oc-hero__partner-top .lead { color: var(--text-muted); font-size: 0.85rem; max-width: 40ch; }
.partner-page { display: grid; gap: 1.4rem; max-width: 620px; }

/* center headings/descriptions/the class-detail readout, but leave the
   interactive builders (calendar, segments, price, promo, Book button)
   in their normal left-aligned layout */
.page-partner .h-section,
.page-partner .oc-hero__body,
.page-partner .aa-sect > h3,
.page-partner .aa-detail,
.page-partner .oc-book > h3 { text-align: center; }
.page-partner .aa-detail { border-left: none; padding-left: 0; }
.page-partner .aa-detail__top { justify-content: center; }

/* the builder card loses its boxed-in border/background on this page —
   the wash behind it already sets it apart */
.page-partner .oc-book {
  border: none;
  background: none;
  padding: 0;
}
/* more air between the price/promo readout and the Book button below it */
.page-partner .oc-book [data-rate-mount] { margin-bottom: 1.1rem; }

/* everything below the calendar (price, addon note, name/meta, promo code)
   centers on this page; the segments and calendar above stay untouched */
.page-partner .rate-out { justify-content: center; text-align: center; }
.page-partner .rate-promo { justify-items: center; text-align: center; }
.page-partner .rate-promo__row { justify-content: center; }
.page-partner .oc-book > .btn.btn--solid,
.page-partner [data-edu-book] > .btn.btn--solid {
  display: flex;
  width: fit-content;
  margin-inline: auto;
}

/* cushion between the "Choose your class" heading and the pill picker */
.page-partner .aa-sect .seg--water { margin-top: 0.9rem; }

/* Oak Creek detail strip — swipeable gallery + the 4-square "why Oak
   Creek" grid, side by side above the builder (mirrors the real panel) */
.partner-oc-detail {
  display: grid;
  gap: 1.5rem;
  margin: 1.6rem 0;
}
.partner-oc-detail .creek-stats { margin-bottom: 0; }
@media (min-width: 761px) {
  .partner-oc-detail { grid-template-columns: 1.3fr 1fr; align-items: stretch; }
  .partner-oc-detail .oc-gallery__track { height: 100%; }
}

/* "Learn to Fly Fish" gets air above it so it doesn't hug the top edge of
   the section's background change, roughly balancing the room below it
   before the class picker */
.page-partner .book-group { padding-top: clamp(1.4rem, 5vw, 2.6rem); }

.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, .field select {
  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);
  font: inherit;
}
.field input:focus-visible, .field textarea:focus-visible, .field select: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 ---------- */
/* one card: label + ambient visual + stat grid + sparkline + meta,
   joined by hairline dividers under a single border */
.cond-card {
  background: var(--surface-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.cond-card__head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.95rem 1.3rem;
  border-bottom: 1px solid var(--border);
}
.cond-card__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cond-card__loc { font-size: 0.78rem; color: var(--text-faint); }
.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-top: 1px solid var(--border);
}
.cond-stat { min-width: 0;
  display: grid;
  gap: 0.35rem;
  align-content: start;
  padding: 1.1rem 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: 0; padding: 1.1rem 1.3rem; border-top: 1px solid var(--border); }
.cond-spark figcaption {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.55rem;
}
.cond-spark__chart {
  height: 88px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  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: 0;
  padding: 0.9rem 1.3rem;
  border-top: 1px solid var(--border);
  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); }

/* ---------- Conditions map (Across Arizona) ---------- */
.cond-map-block {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-inset);
  scroll-margin-top: clamp(80px, 12vw, 116px);
}
.cond-map {
  height: clamp(340px, 52vh, 560px);
  background: #0e1013;
}
.cond-map .maplibregl-canvas { outline: none; }
/* controls + attribution: dark theme */
.cond-map .maplibregl-ctrl-group {
  background: rgba(18, 18, 18, 0.85);
  border: 1px solid var(--border-strong);
  box-shadow: none;
}
.cond-map .maplibregl-ctrl-group button + button { border-top-color: var(--border); }
.cond-map .maplibregl-ctrl-group button { background: transparent; }
.cond-map .maplibregl-ctrl-icon { filter: invert(1) brightness(0.85); }
.cond-map .maplibregl-ctrl-attrib {
  background: rgba(18, 18, 18, 0.7);
  color: var(--text-faint);
}
.cond-map .maplibregl-ctrl-attrib a { color: var(--text-muted); }
.cond-map .maplibregl-ctrl-attrib.maplibregl-compact { border-radius: 12px 0 0 0; }
.cond-map .maplibregl-cooperative-gesture-screen {
  font-family: var(--font-body);
  background: rgba(9, 9, 9, 0.55);
}

/* pins */
.cond-pin {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  background: none;
  cursor: pointer;
  transform: translateY(6px);   /* dot centre sits on the coordinate */
}
.cond-pin__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #14100e;
  box-shadow: 0 0 0 3px rgba(168, 69, 47, 0.28), 0 2px 6px rgba(0, 0, 0, 0.5);
  flex: 0 0 auto;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.cond-pin--nogauge .cond-pin__dot {
  background: var(--surface-2);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(168, 69, 47, 0.16), 0 2px 6px rgba(0, 0, 0, 0.5);
}
.cond-pin__label {
  font-family: var(--font-display);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
  padding: 0.18rem 0.44rem;
  background: rgba(15, 15, 15, 0.82);
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  opacity: 0.9;
  transition: opacity var(--dur-fast) var(--ease);
}
.cond-pin:hover .cond-pin__dot,
.cond-pin:focus-visible .cond-pin__dot { transform: scale(1.18); box-shadow: 0 0 0 5px rgba(168, 69, 47, 0.3), 0 2px 8px rgba(0, 0, 0, 0.55); }
.cond-pin:hover .cond-pin__label,
.cond-pin:focus-visible .cond-pin__label { opacity: 1; }
.cond-pin:focus-visible { outline: none; }

/* ---------- Shared water-conditions card (map pin + AA panel -> .cond-sheet) ---------- */
.wc-card { display: block; padding: 0.85rem 1rem 0.9rem; font-family: var(--font-body); }
.wc-head { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.wc-head__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}
.wc-head__loc { font-size: 0.74rem; color: var(--text-faint); }
.wc-rows { display: grid; gap: 0.5rem; }
.wc-row { display: grid; gap: 0.05rem; }
.wc-row__k {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.wc-row__v { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.02em; color: var(--text); }
.wc-row__v em { font-style: normal; font-size: 0.72rem; color: var(--text-muted); }
.wc-row__s { font-size: 0.76rem; color: var(--text-muted); }
.wc-trend {
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-left: 0.3rem;
}
.wc-trend[data-dir="rising"] { color: var(--accent-bright); }
.wc-trend[data-dir="dropping"] { color: #96b98a; }
.wc-rate {
  display: inline-block;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
}
.wc-rate[data-rate="prime"] { color: #96b98a; border-color: rgba(150, 185, 138, 0.5); }
.wc-rate[data-rate="low"], .wc-rate[data-rate="skinny"] { color: var(--text-faint); }
.wc-rate[data-rate="high"] { color: var(--accent-bright); border-color: var(--accent-dim); }
.wc-rate[data-rate="blown"] { color: #d9534f; border-color: rgba(217, 83, 79, 0.5); }
.wc-src { margin: 0.7rem 0 0; font-size: 0.66rem; line-height: 1.5; color: var(--text-faint); }
.wc-loading { margin: 0.4rem 0 0.2rem; font-size: 0.8rem; color: var(--text-muted); }

/* ---------- 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); }

/* price + colour dots share one row, dots pinned to the right edge */
.shop-slide__foot, .shop-tile__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.shop-slide__foot .shop-slide__price, .shop-tile__foot .shop-tile__price { margin-top: 0; }

/* ---------- Events (On the Fly) teaser rail — homepage cross-promo for
   sedonarainbowtroutfarm.tailwaterflyco.com. Same photo-bg + dark-wash
   card that site uses for its own "Upcoming Events" rail, reskinned to
   this site's palette; opens a slide-over with a short blurb + link out
   instead of navigating away directly (see #eventsPanel). ---------- */
.events-rail {
  display: flex;
  gap: 0.9rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-top: 1.6rem;
  margin-bottom: 0.4rem;
  margin-left: calc(var(--gutter) * -1);
  margin-right: calc(var(--gutter) * -1);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  padding-bottom: 4px;
  cursor: grab;
}
.events-rail::-webkit-scrollbar { display: none; }
.events-rail.is-dragging { cursor: grabbing; }
.events-rail.is-dragging a { pointer-events: none; }
.ev-card {
  position: relative;
  isolation: isolate;
  flex: 0 0 clamp(200px, 46vw, 240px);
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.1rem 1.1rem 1.2rem;
  border-radius: var(--radius);
  overflow: hidden;
  color: #fff;
  background: var(--surface-inset);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.ev-card:hover { transform: translateY(-3px); }
.ev-card__media { position: absolute; inset: 0; z-index: -2; }
.ev-card__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) brightness(0.82); }
.ev-card::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(15, 15, 15, 0.12) 0%, rgba(15, 15, 15, 0.38) 45%, rgba(15, 15, 15, 0.92) 100%);
}
.ev-card__date {
  display: block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0.4rem;
}
.ev-card__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  line-height: 1.28;
  margin-bottom: 0.65rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.ev-card__cta {
  display: block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

/* the slide-over's register CTA has a longer label ("Register on the
   Rainbow Trout Farm site") than the site's usual short button copy —
   sized down so it stays on one line instead of wrapping */
.events-panel-cta { font-size: 0.72rem; letter-spacing: 0.06em; }

/* small colour-preview dots on a card for a product with variants —
   click swaps that card's own thumbnail, doesn't open the product */
.hat-swatches { display: flex; gap: 0.45rem; margin-top: 0.3rem; }
.shop-slide__foot .hat-swatches, .shop-tile__foot .hat-swatches { margin-top: 0; margin-left: auto; }
.hat-swatch {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  padding: 0;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease);
}
.hat-swatch:hover { transform: scale(1.15); }
.hat-swatch.is-active { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 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(168, 69, 47, 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;
}

/* important-notice banner (trip closures, advisories) — same shape as
   .shop-ok, reused wherever a temporary heads-up needs to sit above
   normal content (conditions.html, the Oak Creek booking panel) */
.advisory {
  margin: 0 0 1.4rem;
  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;
  line-height: 1.6;
}

/* ---------- 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 — no photo-hero band for shop items, just the name/
   price up top (reusing the .oc-hero__title/__meta type styles on
   their own) and a gallery below standing in as the main visual */
.shop-product-head { padding-top: 0.4rem; display: grid; gap: 0.5rem; }
.shop-product-head .oc-hero__title { color: var(--text); }
/* bigger tiles than the secondary "more photos" rail elsewhere, since
   this gallery IS the product photo, not a supplement to a hero image */
.oc-gallery--product .oc-shot { flex: 0 0 min(80%, 360px); }
/* a single-photo product (e.g. the Rope Hat, one style only) gets one
   full-width shot instead of a partial-width "there's more" peek */
.oc-gallery--product.is-single .oc-gallery__track { cursor: default; }
.oc-gallery--product.is-single .oc-shot { flex: 0 0 100%; max-width: 420px; }
.shop-shipping-note { margin-top: 0.6rem; font-size: 0.85rem; color: var(--text-faint); }

/* 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: hidden on landing, fades in with the header as you
     scroll — shrinks in tandem with the logo */
  .page-home .nav__toggle {
    color: #fff;
    opacity: 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(10, 10, 10, 0.50) 0%,
        rgba(12, 12, 12, 0.60) 24%,
        rgba(14, 14, 14, 0.86) 50%,
        rgba(16, 16, 16, 0.96) 74%,
        var(--ink) 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; }

/* ---------- Homepage promo popup (Fundamentals walk-ins) ---------- */
.promo-pop {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 1.1rem;
}
.promo-pop[hidden] { display: none; }
.promo-pop__scrim {
  position: absolute;
  inset: 0;
  background: rgba(9, 9, 9, 0.74);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease);
}
.promo-pop.is-open .promo-pop__scrim { opacity: 1; }
.promo-pop__card {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 88vh;
  min-height: 440px;
  overflow: hidden;
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: opacity var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.promo-pop.is-open .promo-pop__card { opacity: 1; transform: none; }
.promo-pop__x {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 3;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(18, 18, 18, 0.6);
  color: var(--text);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.promo-pop__x:hover { color: var(--accent-bright); background: rgba(18, 18, 18, 0.85); }
.promo-pop__x svg { width: 18px; height: 18px; }
.promo-pop__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  filter: grayscale(0.2) brightness(0.78) contrast(1.05);
  z-index: 0;
}
/* Underlay: the photo sits behind the whole card; this gradient keeps
   the hero statement and body copy legible over it without a hard
   image/text split. */
.promo-pop__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(9, 9, 9, 0.97) 0%,
    rgba(9, 9, 9, 0.9) 45%,
    rgba(9, 9, 9, 0.55) 75%,
    rgba(9, 9, 9, 0.22) 100%
  );
}
.promo-pop__body {
  position: relative;
  z-index: 2;
  padding: 1.4rem 1.25rem 1.3rem;
  display: grid;
  gap: 0.5rem;
}
.promo-pop__kicker {
  font-family: var(--font-display);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-bright);
}
.promo-pop__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 6vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}
.promo-pop__text {
  margin-top: 0.15rem;
  font-size: 0.9rem;
  line-height: 1.58;
  color: var(--text-muted);
}
.promo-pop__cta {
  margin-top: 0.6rem;
  display: grid;
  gap: 0.6rem;
  justify-items: stretch;
}
.promo-pop__cta .btn { width: 100%; text-align: center; }
.promo-pop__ask {
  justify-self: center;
  font-size: 0.82rem;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.promo-pop__ask:hover { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .promo-pop__scrim,
  .promo-pop__card { transition: none; }
}

/* ---------- Build Your Box (shop.html) ---------- */
.box-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  margin-bottom: clamp(2rem, 5vw, 3rem);
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.box-cta__text { max-width: 46ch; }
.box-cta__text .h-section { margin: 0.3rem 0 0.5rem; }
.box-cta .btn { flex: 0 0 auto; }
@media (max-width: 640px) {
  .box-cta { flex-direction: column; align-items: flex-start; }
  .box-cta .btn { width: 100%; text-align: center; }
}
/* desktop: same bordered card, just broken out of .container to run
   the full width of the viewport instead of stopping at the page's
   max-width */
@media (min-width: 761px) {
  .box-cta {
    width: 100vw;
    max-width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    border-radius: 0;
    padding-inline: var(--gutter);
    /* a fixed gap instead of relying on space-between's leftover-space
       math, so the button sits a reliable distance from the text no
       matter how wide the now-full-bleed bar is */
    justify-content: flex-start;
    gap: 3.5rem;
  }
}

/* same fixed-overlay pattern as .promo-pop, sized for a form instead
   of a photo underlay */
.box-pop { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 1.1rem; }
.box-pop[hidden] { display: none; }
.box-pop__scrim {
  position: absolute;
  inset: 0;
  background: rgba(9, 9, 9, 0.74);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease);
}
.box-pop.is-open .box-pop__scrim { opacity: 1; }
.box-pop__card {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 4vw, 2.4rem);
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: opacity var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease);
}
.box-pop.is-open .box-pop__card { opacity: 1; transform: none; }
.box-pop__x {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 3;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-inset);
  color: var(--text);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.box-pop__x:hover { color: var(--accent-bright); }
.box-pop__x svg { width: 18px; height: 18px; }
.box-pop__title { margin: 0.3rem 0 0.8rem; font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.9rem); }
.box-pop__text { color: var(--text-muted); margin-bottom: 1.4rem; }
@media (prefers-reduced-motion: reduce) {
  .box-pop__scrim, .box-pop__card { transition: 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-block__media img { filter: grayscale(0.3) brightness(0.58) 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;
  }

  /* Guide bio + testimonials become two columns; quotes on the right */
  .band__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: center;
  }
  .band__grid .quotes { margin-top: 0; }

  /* Testimonials — left-aligned with the orange quote mark, desktop only */
  .quote {
    text-align: left;
    justify-items: start;
    padding-inline: 0;
  }
  .quote blockquote { max-width: 46ch; font-size: 1.02rem; }
  .quotes__dots { justify-content: flex-start; }
  .quote blockquote::before {
    content: "\201C";
    display: block;
    margin-bottom: -0.15rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.7em;
    line-height: 0.7;
    color: var(--accent);
  }
}

/* ===================================================================
   Equipment rentals (rentals.html, rental-checkout.html) — built and
   fully wired, deliberately labeled "Coming Soon" throughout while the
   fleet/launch date firms up.
   =================================================================== */

/* "Soon" chip riding next to the nav link */
.nav-soon {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-pill);
  background: var(--accent-dim);
  color: var(--accent-bright);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  vertical-align: middle;
}

/* generic "Coming Soon" badge — a hero pill and a card-corner ribbon */
.coming-soon {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bright);
}
.coming-soon--hero {
  margin-bottom: 0.7rem;
  font-size: 0.66rem;
}
.coming-soon--ribbon {
  position: absolute;
  top: 0.7rem;
  right: -2.1rem;
  z-index: 3;
  transform: rotate(40deg);
  width: 9rem;
  padding: 0.3rem 0;
  text-align: center;
  font-size: 0.62rem;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

/* pill picker (mirrors "Choose your water"/"Choose your class") */
.section-head + [data-r-seg] { margin-top: 1.4rem; }

/* Homepage rentals teaser — the plain dark/topo texture every other
   homepage section uses (no photo — it was clashing with the Guide
   band's own photo right below it). Three-across hairline tile grid,
   same trick as .rental-info / .creek-stats, then one shared CTA
   below, matching the arrow-link convention the rest of the homepage
   uses. */
.rental-teaser-section { position: relative; }
.rental-teaser__soon { margin-bottom: 0.6rem; }
/* no orange accent rule on this section-head — the "Coming Soon" line
   above it already gives the block its own visual lead-in */
#rentals-teaser .section-head > div::before { content: none; }
/* the sitewide .section-head is flex + space-between, which on desktop
   floats the intro paragraph off to the right of the heading instead
   of stacking under it — this section wants a single straight-down
   stack (Coming Soon, Gear up, Equipment Rentals, then the paragraph)
   flush with the tile grid's left edge below, at every width. */
#rentals-teaser .section-head { display: block; }
#rentals-teaser .section-head > div { padding-left: 0; }
#rentals-teaser .section-head__intro {
  padding-left: 0;
  max-width: none;
  margin-top: 0.5rem;
}

.rental-teaser {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.rental-teaser__item {
  background: var(--surface-inset);
  padding: clamp(1.1rem, 3vw, 1.8rem) clamp(0.8rem, 2.5vw, 1.5rem);
}
.rental-teaser__item h3 {
  font-family: var(--font-display);
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0.5rem;
}
.rental-teaser__item p { font-size: 0.85rem; line-height: 1.6; }
.rental-teaser__cta { margin-top: clamp(1.4rem, 3vw, 1.8rem); }

/* mobile: keep the three columns side by side — narrower padding and
   type so full sentences still fit, tiles just run a little taller */
@media (max-width: 520px) {
  .rental-teaser__item { text-align: center; padding-inline: 0.6rem; }
  .rental-teaser__item h3 { font-size: 0.7rem; }
  .rental-teaser__item p { font-size: 0.76rem; }
}

/* the detail box below the pill picker — a hero explaining the tier
   (bleeds to the box's top edge, same trick as the real oc-hero) over
   a bordered container holding the booking content. Always visible;
   the pill picker swaps its content, nothing to open/close. */
.rental-detail { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.rental-detail__box {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  overflow: hidden;
  padding: 0 var(--gutter) var(--gutter);
}
.rental-detail__box .oc-hero { margin-top: 0; }
/* same section-to-section rhythm as the real trip builder's panel__body —
   without this, the sections just stack with no air between them */
.rental-detail__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.85rem;
  padding-top: 1.6rem;
}
.rental-detail__body > * { min-width: 0; }

/* wide desktop only (mobile/tablet keep the single, simple stacked
   column as-is) — "What's included" is short and was just sitting on
   top of the calendar wasting the row's spare width, so pair them
   side by side, and lay "Your info" out as one row instead of three
   stacked fields. Together these cut a large chunk of the scroll
   height out of the left/booking column without touching mobile. */
@media (min-width: 1200px) {
  /* the box's own left/right cushion was tuned for the full-width
     mobile column — at this narrower, two-up desktop width it was
     eating too much of the content area and made everything feel
     compressed, so trim it back. The pill picker (relocated in here
     by js/rentals.js — see below) and the hero both share the same
     value so their edges still line up. */
  .rental-detail__box {
    --rental-box-pad: clamp(1.1rem, 2vw, 1.6rem);
    padding-left: var(--rental-box-pad);
    padding-right: var(--rental-box-pad);
  }
  .rental-detail__box .oc-hero {
    margin-inline: calc(var(--rental-box-pad) * -1);
    padding-inline: var(--rental-box-pad);
  }
  /* pill picker reads as the top of this one continuous card instead
     of a separate floating bar above it */
  .rental-detail__box > [data-r-seg] {
    margin: 1.6rem var(--rental-box-pad) 1.7rem;
  }

  .rental-detail__body {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    column-gap: 2.4rem;
    align-items: start;
  }
  .rental-detail__body > *:nth-child(1) { grid-column: 1; grid-row: 1; }
  .rental-detail__body > *:nth-child(2) { grid-column: 2; grid-row: 1; }
  .rental-detail__body > *:nth-child(n+3) { grid-column: 1 / -1; }

  [data-r-info] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem 1rem;
    align-items: start;
  }
  [data-r-info] h3 { grid-column: 1 / -1; }
  [data-r-info] .rrange-field { margin-bottom: 0; }
}

/* one-line "Continue to secure checkout" at every width — the phrase
   is long relative to a typical short button label */
.rental-book-btn {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
@media (max-width: 380px) {
  .rental-book-btn { font-size: 0.66rem; letter-spacing: 0.05em; padding-inline: 1rem; }
}
.rental-license-note {
  margin-top: -0.8rem;
  text-align: center;
  font-size: 0.76rem;
  color: var(--text-faint);
  line-height: 1.5;
}
.rental-license-note a { color: var(--accent); }
.rental-license-note a:hover { color: var(--accent-bright); }

/* "What's included" — a small greyed retail value on the items that
   double as real shop-catalog products */
.rental-check-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
}
.rental-retail {
  flex: 0 0 auto;
  font-size: 0.74rem;
  color: var(--text-faint);
  white-space: nowrap;
}

/* pill price row — one shared box for all 3, so a struck price on Rod
   Rental doesn't make that pill taller/wider than its neighbors */
.seg__price { white-space: nowrap; }
.seg__was {
  font-size: 0.72em;
  color: var(--text-faint);
  text-decoration-color: currentColor;
  margin-right: 0.15em;
}
.seg__btn.is-active .seg__was { color: rgba(255, 255, 255, 0.55); }

/* coming-soon: only the calendar itself and the actual form controls
   (time selects, name/email/phone inputs) grey out — their labels,
   the price, "What's included", and the checkout button all stay
   fully legible/normal (the button is still functionally disabled,
   just not styled dim) */
.rental-detail__body.is-coming-soon .rate-cal {
  opacity: 0.4;
  filter: grayscale(0.7);
  pointer-events: none;
}
.rental-detail__body.is-coming-soon .rrange-time select,
.rental-detail__body.is-coming-soon .rrange-field input {
  opacity: 0.4;
  filter: grayscale(0.7);
  pointer-events: none;
  cursor: not-allowed;
}
.rental-detail__body.is-coming-soon .rate-cal__day { cursor: not-allowed; }
.rental-detail__body.is-coming-soon .rental-book-btn { cursor: not-allowed; }

/* "How rentals work" info grid */
/* a firm 2x2 "four square" grid at every width — mirrors the site's own
   .creek-stats bordered-tile look (hairline gaps via the bg-color trick) */
.rental-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: clamp(1.2rem, 3vw, 1.6rem);
}
.rental-info__item {
  background: var(--surface-inset);
  padding: clamp(0.9rem, 2.5vw, 1.2rem);
}
.rental-info__item h3 {
  font-family: var(--font-display);
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0.4rem;
}
.rental-info__item p { font-size: 0.85rem; line-height: 1.55; }
.rental-info__item a { color: var(--accent); }
.rental-info__item a:hover { color: var(--accent-bright); }

/* no orange accent rule on this particular section-head — the tight
   four-square grid right under it reads as its own block already */
.rental-layout__aside .section-head > div::before { content: none; }

/* mobile: trim the "how it works" copy and centre each tile so the
   grid reads as a set of short, symmetric labels rather than paragraphs */
@media (max-width: 760px) {
  /* .section-head is a column flex here (see the sitewide mobile rule
     above) with align-items: baseline inherited from the base rule —
     that leaves the heading's own <div> only as wide as its content
     and stuck at the left edge, so text-align alone wasn't enough to
     actually centre it in the aside. */
  .rental-layout__aside .section-head { align-items: center; text-align: center; }
  .rental-layout__aside .section-head > div { padding-left: 0; }
  .rental-info__item { text-align: center; }
  .rental-info__item .rental-info__full { display: none; }
  .rental-info__item .rental-info__short { display: block; }
}
.rental-info__short { display: none; }

/* desktop: booking on the left, "How Rentals Work" on the right — the
   right column tracks the scroll, staying vertically centred against
   the viewport while the left column's booking flow scrolls past it.
   `top` here is a fallback only — js/rentals.js measures the aside's
   real height and sets an exact px `top` inline, which is what
   actually centres it (a % or vh top can resolve against the wrong
   box depending on the browser, which is what broke this twice). */
.rental-layout { display: grid; gap: clamp(2rem, 5vw, 3rem); }
@media (min-width: 1000px) {
  .rental-layout { grid-template-columns: 1.35fr 1fr; align-items: start; }
  .rental-layout__aside { position: sticky; top: 24px; }
}

/* date-range calendar states — layers onto the existing .rate-cal__day
   open/taken/past states from the single-date picker */
.rental-cal-hint { font-size: 0.82rem; color: var(--text-muted); margin: 0 0 0.6rem; }
.rate-cal__day.is-pickup,
.rate-cal__day.is-pickup:hover,
.rate-cal__day.is-return,
.rate-cal__day.is-return:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.rate-cal__day.is-inrange {
  background: var(--accent-dim);
  border-color: transparent;
  color: var(--text);
}

/* pickup/return time selects */
.rrange-times {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  margin-top: 0.9rem;
}
.rrange-time {
  display: grid;
  gap: 0.3rem;
  font-family: var(--font-display);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.rrange-time select {
  width: 100%;
  padding: 0.6rem 0.65rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-inset);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.88rem;
}

/* contact fields in the rental panel */
.rrange-field {
  display: grid;
  gap: 0.3rem;
  margin-bottom: 0.8rem;
  font-family: var(--font-display);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.rrange-field input {
  width: 100%;
  padding: 0.6rem 0.65rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-inset);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.92rem;
}
.rrange-field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* =========================================================
   Briar Patch-specific additions — everything above this line is the
   literal tailwaterflyco.com stylesheet (retoned). These are the only
   new rules this site needs: a co-branded logo lockup, a plain
   wrapping card grid (the main site's .card is sized for a slider;
   this page only ever shows 4, so a simple wrap is simpler), and the
   "coming soon" Retreat teaser block.
   ========================================================= */

/* header lockup — two crossfading layers in the same slot: "Presented
   by Tailwater" by default, swapping to a compact "Tailwater × Briar
   Patch" once scrolled (the header's own .is-scrolled state, same
   trigger as its background/blur). --default sets the row's real
   height; --scrolled overlays it absolutely so the swap has no layout
   jump. See js/main.js's onHeaderScroll. */
.bp-brand { position: relative; display: inline-flex; align-items: center; min-width: 0; flex-shrink: 1; }
.bp-brand__layer {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  transition: opacity var(--dur-mid) var(--ease);
}
.bp-brand__layer--scrolled {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.site-header.is-scrolled .bp-brand__layer--default { opacity: 0; pointer-events: none; }
.site-header.is-scrolled .bp-brand__layer--scrolled { opacity: 1; pointer-events: auto; }
.bp-brand__label {
  font-family: var(--font-display);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}
.bp-brand__x { font-family: var(--font-display); font-size: 1rem; color: var(--text-faint); }
.bp-brand__layer--scrolled .brand__img { height: 34px; }
.bp-brand__layer--scrolled .bp-brand__partner { height: 22px; }
@media (max-width: 480px) {
  .bp-brand__layer--default { gap: 0.4rem; }
  .bp-brand__layer--default .brand__img { height: 38px; }
  .bp-brand__label { font-size: 0.58rem; }
  .bp-brand__layer--scrolled .brand__img { height: 28px; }
  .bp-brand__layer--scrolled .bp-brand__partner { height: 18px; }
}

/* Briar Patch's own mark, in the hero in place of a plain eyebrow —
   sized up to stand on its own now there's no badge behind it */
.hero__partner-logo {
  height: 72px;
  width: auto;
  margin: 0 auto;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 22px rgba(0, 0, 0, 0.55));
}
@media (max-width: 640px) { .hero__partner-logo { height: 54px; } }

/* Oak Creek Fly Fishing Retreat — informational teaser, not bookable
   here yet (booked through Briar Patch directly). Boxed so it reads as
   its own card against the section's plain background. Photo + dark
   wash background — same dark-on-photo scoping as .hero / .oc-hero /
   .page-hero, so the heading/lead/list re-resolve light instead of
   carrying forward the page's dark text. */
.bp-soon-box {
  --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);
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(135deg, rgba(14, 14, 12, 0.88) 0%, rgba(14, 14, 12, 0.72) 45%, rgba(14, 14, 12, 0.5) 100%),
    url("../images/retreat-bg.jpg") center / cover no-repeat;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1.8rem, 4vw, 3.4rem);
}
.bp-soon-box .coming-soon { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); }
.bp-soon-box h2 { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.75); }
.bp-soon-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 760px) {
  .bp-soon-grid { grid-template-columns: 1fr; gap: 1.6rem; }
}
.bp-soon { max-width: 52ch; }
.bp-soon .coming-soon { margin-bottom: 0.6rem; }
/* "Oak Creek Fly Fishing Retreat" stays on one line below 760px (where
   the grid drops to a single column and the title gets the box's full
   width) — a smaller vw-scaled minimum than .h-section's default. */
.bp-soon h2 {
  margin: 0.3rem 0 0.9rem;
  white-space: nowrap;
  font-size: clamp(0.85rem, 4.2vw, 2.2rem);
}
@media (min-width: 760px) { .bp-soon h2 { font-size: clamp(1.55rem, 3vw, 2.2rem); } }
.bp-soon .lead { margin-bottom: 0.6rem; }
.bp-soon__list { font-size: 1rem; }

/* Education — top band devoted entirely to the Naturalist Walk (the
   newest, highest-margin experience), casting lessons as plain cards
   below it */
.feature-naturalist {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: stretch;
  background: var(--surface-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}
.feature-naturalist__media { position: relative; min-height: 280px; }
.feature-naturalist__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.25) brightness(0.96) contrast(1.02);
}
.feature-naturalist__body {
  display: grid;
  align-content: center;
  gap: 0.7rem;
  padding: clamp(1.6rem, 4vw, 3rem);
}
.feature-naturalist__title {
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.1rem);
  text-transform: uppercase;
}
.feature-naturalist__desc { color: var(--text-muted); max-width: 48ch; }
.feature-naturalist__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.3rem;
}
.feature-naturalist__meta span + span { padding-left: 1rem; border-left: 1px solid var(--border-strong); }
.feature-naturalist .btn { justify-self: start; margin-top: 0.3rem; }
@media (max-width: 760px) {
  .feature-naturalist { grid-template-columns: 1fr; }
  .feature-naturalist__media { min-height: 220px; }
  .feature-naturalist .btn { justify-self: stretch; }
}

.feature-naturalist__note { font-size: 0.88rem; font-style: italic; }

/* Casting Lessons — only ever 2 of these, so they split the row evenly
   instead of using the swipeable slider (that's reserved for Day Trips,
   which guests page through one at a time). */
.learn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.1rem, 2.4vw, 1.8rem);
}
@media (max-width: 760px) { .learn-grid { grid-template-columns: 1fr; } }

/* "split" cards — photo fills the left side top-to-bottom, the title /
   description / what's-included bullets / price / CTA run down the
   right, so guests know exactly what they're booking before opening
   the panel. Used for Day Trips (inside the slider — flex-basis widens
   the slide to fit the extra content) and Casting Lessons (inside
   .learn-grid, where flex-basis is simply ignored). Mobile keeps the
   plain stacked .card layout. */
.card--split { flex: 0 0 min(92vw, 720px); }
@media (min-width: 760px) {
  .card--split {
    display: grid;
    grid-template-columns: 42% 1fr;
    grid-template-rows: auto auto;
  }
  .card--split .card__media {
    grid-column: 1;
    grid-row: 1 / -1;
    aspect-ratio: auto;
    height: 100%;
    min-height: 280px;
  }
  .card--split .card__body { grid-column: 2; grid-row: 1; }
  .card--split .card__cta { grid-column: 2; grid-row: 2; }
}

/* mobile: a clearer peek of the next slide (the slider__nav arrows are
   hidden under 760px, so this + the hint below are the only cues that
   Day Trips scrolls) plus an explicit swipe hint */
@media (max-width: 759px) {
  .card--split { flex-basis: 84vw; }
}
.slider-hint {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.slider-hint svg { width: 14px; height: 14px; flex: 0 0 auto; }
@media (max-width: 759px) { .slider-hint { display: flex; } }

/* Casting Lessons: condense back to the plain original card on mobile
   (no bullets) — the split layout + bullets stay desktop-only, same
   as .card--split's own breakpoint */
@media (max-width: 759px) {
  .learn-grid .check-list { display: none; }
}