/* =====================================================================
   SIERRA HILLS CONSULTING — firm site

   The colours are the firm's own: the charcoal and the gold of its current
   site and logo. Titles are set like the logo's "SIERRA HILLS" (wide
   uppercase Montserrat); the longer statements are set in a serif, as on
   the current site. The layout language is shared with the Gonzalez for
   Senate and Bittle for Council sites: photos with dark cards laid over
   them, square buttons, sections that reveal as you scroll.
   The signature shape is the logo's own: its gold mountains. They sit at
   the start of the line under every title, and run as one long ridge
   line along the foot of the page heroes and the closing section.
   Edit the tokens to retune it.
   ===================================================================== */
:root {
  --coal: #383838;           /* the firm's charcoal */
  --coal-deep: #272727;
  --coal-lift: #464646;
  --gold: #f6c324;           /* the firm's gold */
  --gold-deep: #d9a60e;
  --gold-ink: #876a08;       /* gold dark enough to read as text on white */
  --gold-pale: #fdeeb5;
  --paper: #f4f4f1;          /* the light grey of the firm's current site */
  --white: #ffffff;
  --ink: #2c2c2c;
  --ink-soft: #5b5b5b;
  --ink-faint: #8e8e8e;
  --red: #c4453b;
  --hairline: rgba(56, 56, 56, 0.16);

  --font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(20px, 5vw, 56px);
  --content: 1180px;
  --bar-h: 92px;
  --radius: 4px;
  --rule: 3px;
  /* The logo's twin peaks as line art (used as a mask, so the colour comes from CSS). */
  --peaks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 64 27.4'%3E%3Cpath d='M0 25.6L4.5 21.3 10.7 19.1 16.8 13.5 21.3 7.9 25.3 .6 27.5 3.9 32.6 7.9 37.1 10.7 41 12.7 47.7 8.2 50.5 11.8 56.1 18 60.6 22.5 64 25.6M25.3 .6L23.8 6.7 27 10.7 21.3 16.8 16.8 22.5M47.7 8.2L46 13.5 44.4 19.1 48.3 21.9' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  /* The same ridge as the long line in src/partials/ridge.html, filled in: a range of hills along the top edge of a section. */
  --ridge-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120V104L60 96 110 100 170 82 215 88 260 70 300 78 345 58 380 66 420 50 450 58 490 34 515 40 548 8 566 24 580 20 604 42 622 38 648 54 676 36 700 24 716 38 730 34 770 60 800 54 840 74 880 68 930 86 980 80 1040 96 1100 92 1150 102 1200 106V120Z'/%3E%3C/svg%3E");
  /* Faint contour lines, like a topographic map, for the dark sections. */
  --contours: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='700' viewBox='0 0 900 700'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1'%3E%3Cpath d='M307.7 230.0C308.4 239.0 308.2 250.8 302.3 257.9C296.5 265.0 281.7 267.1 272.5 272.6C263.4 278.2 257.0 289.3 247.4 291.1C237.8 292.8 224.8 286.2 214.9 283.1C204.9 280.0 197.2 276.6 187.8 272.4C178.4 268.1 163.1 264.6 158.5 257.5C153.9 250.5 159.3 238.8 160.4 230.0C161.5 221.2 160.7 212.3 164.9 204.9C169.1 197.5 177.5 191.0 185.6 185.5C193.7 179.9 203.2 173.3 213.3 171.4C223.3 169.4 235.3 172.0 246.1 173.7C256.9 175.4 269.5 176.6 278.2 181.7C286.8 186.7 292.9 195.8 297.8 203.9C302.7 211.9 306.9 221.0 307.7 230.0Z'/%3E%3Cpath d='M348.5 230.0C347.4 245.8 356.3 263.0 349.6 276.1C342.9 289.2 323.5 299.6 308.3 308.5C293.0 317.4 276.0 326.3 258.3 329.3C240.7 332.4 221.5 329.0 202.4 326.9C183.3 324.7 159.0 325.0 143.8 316.5C128.7 307.9 117.9 290.0 111.5 275.6C105.2 261.2 106.4 245.4 105.9 230.0C105.3 214.6 99.3 195.0 108.1 183.0C116.9 171.1 142.6 165.7 158.6 158.4C174.6 151.1 187.5 144.1 204.1 139.4C220.8 134.6 242.2 126.9 258.6 129.9C275.0 132.8 286.1 148.8 302.4 157.3C318.7 165.9 348.6 169.2 356.3 181.3C364.0 193.4 349.6 214.2 348.5 230.0Z'/%3E%3Cpath d='M417.8 230.0C418.8 250.7 405.6 273.3 394.1 293.2C382.6 313.1 369.9 337.5 348.9 349.3C327.9 361.1 295.0 359.5 268.2 363.9C241.4 368.4 214.2 378.8 188.3 376.0C162.4 373.3 132.9 361.5 112.7 347.7C92.5 333.8 78.1 312.4 67.1 292.8C56.1 273.1 44.7 250.2 46.5 230.0C48.3 209.8 67.2 191.4 77.8 171.4C88.4 151.4 91.9 124.5 110.3 109.9C128.7 95.3 161.3 88.5 188.3 83.9C215.3 79.3 246.2 77.1 272.1 82.4C298.0 87.8 324.2 101.6 343.6 116.0C363.0 130.5 375.9 150.0 388.3 169.0C400.6 188.0 416.8 209.3 417.8 230.0Z'/%3E%3Cpath d='M448.0 230.0C444.8 257.6 450.0 287.1 435.8 309.3C421.6 331.5 389.1 348.8 362.6 363.0C336.1 377.3 308.7 383.5 277.0 394.8C245.4 406.1 204.9 433.7 172.8 430.7C140.6 427.6 108.7 396.6 84.2 376.3C59.6 356.0 42.2 333.3 25.2 308.9C8.3 284.5 -15.6 257.1 -17.6 230.0C-19.7 202.9 -3.7 171.0 13.0 146.4C29.8 121.8 54.9 97.1 82.8 82.4C110.8 67.6 146.9 66.3 180.9 57.8C214.8 49.3 256.9 24.3 286.7 31.4C316.4 38.4 331.5 81.4 359.5 100.1C387.5 118.8 439.9 121.8 454.6 143.5C469.3 165.1 451.1 202.4 448.0 230.0Z'/%3E%3Cpath d='M529.7 230.0C529.9 261.4 495.4 294.9 474.8 324.3C454.1 353.7 435.3 382.0 405.9 406.5C376.6 430.9 338.1 465.0 298.7 470.9C259.3 476.8 209.7 453.2 169.6 441.8C129.5 430.4 88.8 422.0 58.2 402.4C27.5 382.8 -0.4 352.8 -14.1 324.0C-27.8 295.3 -25.5 260.7 -23.9 230.0C-22.3 199.3 -18.2 168.3 -4.4 139.7C9.3 111.1 31.1 83.1 58.8 58.2C86.4 33.3 123.3 -4.4 161.6 -9.8C199.8 -15.2 247.5 15.2 288.3 25.6C329.2 36.0 375.8 34.3 406.7 52.7C437.6 71.2 453.1 106.6 473.6 136.2C494.1 165.7 529.5 198.6 529.7 230.0Z'/%3E%3Cpath d='M726.7 470.0C727.1 476.7 718.5 484.5 713.4 490.6C708.3 496.6 702.8 502.1 696.1 506.2C689.3 510.3 681.4 512.2 672.9 515.1C664.3 518.0 653.0 525.1 644.7 523.8C636.4 522.4 629.4 512.6 623.0 507.1C616.7 501.6 611.8 496.7 606.6 490.6C601.5 484.4 593.0 477.2 592.1 470.0C591.1 462.8 596.0 453.8 600.8 447.2C605.6 440.6 613.2 434.9 620.8 430.6C628.3 426.4 637.1 424.1 646.2 421.7C655.3 419.3 666.7 414.5 675.3 416.2C684.0 417.9 692.0 426.3 697.9 431.9C703.9 437.6 706.2 444.0 711.0 450.3C715.8 456.7 726.3 463.3 726.7 470.0Z'/%3E%3Cpath d='M770.5 470.0C769.1 482.8 761.6 494.6 755.1 506.7C748.7 518.7 743.0 531.7 731.8 542.0C720.6 552.4 704.2 566.5 688.2 568.7C672.1 570.9 651.3 560.7 635.7 555.1C620.1 549.6 606.6 543.5 594.7 535.5C582.9 527.4 571.2 517.7 564.6 506.8C558.0 495.9 555.2 482.3 555.1 470.0C555.0 457.7 557.8 444.4 563.8 433.0C569.9 421.5 579.3 408.6 591.5 401.3C603.7 394.0 621.6 391.7 637.0 389.3C652.4 386.9 667.1 386.3 683.7 386.8C700.4 387.4 723.7 385.5 737.1 392.7C750.4 399.9 758.3 417.1 763.9 430.0C769.4 442.9 772.0 457.2 770.5 470.0Z'/%3E%3Cpath d='M840.1 470.0C840.3 491.4 838.6 515.7 827.3 534.5C816.1 553.3 793.8 570.6 772.4 582.8C751.1 595.0 724.4 604.5 699.3 607.9C674.3 611.2 647.7 606.6 622.2 602.7C596.6 598.7 562.2 597.7 546.1 584.3C529.9 570.9 532.8 541.0 525.0 522.0C517.3 502.9 502.8 488.6 499.5 470.0C496.2 451.4 494.2 426.2 505.3 410.4C516.3 394.6 546.2 387.8 565.6 375.3C585.0 362.8 599.9 341.0 621.7 335.6C643.4 330.2 673.2 337.4 696.2 343.1C719.2 348.8 738.2 359.4 759.8 369.9C781.4 380.4 812.4 389.4 825.8 406.1C839.2 422.8 839.8 448.6 840.1 470.0Z'/%3E%3Cpath d='M873.2 470.0C876.7 496.1 888.2 531.1 874.0 552.4C859.7 573.8 815.2 583.1 787.8 598.2C760.4 613.4 739.6 633.8 709.5 643.3C679.3 652.9 639.3 660.4 607.0 655.6C574.8 650.8 542.8 631.8 515.7 614.8C488.6 597.7 457.2 577.2 444.5 553.0C431.7 528.9 433.0 495.3 439.1 470.0C445.2 444.7 468.8 425.7 481.1 401.1C493.4 376.5 490.7 337.8 512.9 322.4C535.1 307.1 581.3 313.5 614.1 309.1C646.9 304.6 677.9 293.1 709.7 295.7C741.5 298.3 781.0 307.9 805.0 324.6C828.9 341.2 841.9 371.3 853.3 395.5C864.6 419.8 869.8 443.9 873.2 470.0Z'/%3E%3Cpath d='M955.2 470.0C954.3 503.4 938.5 540.7 917.9 569.3C897.2 597.9 864.3 624.0 831.1 641.6C797.9 659.3 756.4 670.9 718.5 675.1C680.6 679.4 642.2 672.6 603.7 667.2C565.3 661.8 521.9 658.8 487.9 642.6C453.9 626.5 418.6 599.1 399.6 570.3C380.6 541.5 371.5 502.5 374.0 470.0C376.5 437.5 395.7 404.4 414.5 375.4C433.3 346.4 456.4 318.0 486.6 296.0C516.7 274.0 555.7 251.8 595.3 243.3C634.9 234.7 686.9 233.6 724.3 244.7C761.6 255.9 786.2 289.5 819.4 310.1C852.5 330.8 900.4 342.0 923.0 368.7C945.7 395.3 956.0 436.6 955.2 470.0Z'/%3E%3C/g%3E%3C/svg%3E");
  --ease: cubic-bezier(0.22, 0.61, 0.21, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 16px); -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-body); font-weight: 500; background: var(--white); color: var(--ink); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg, video, iframe { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; top: -80px; left: 12px; z-index: 2000; background: var(--coal-deep); color: var(--white); padding: 10px 16px; }
.skip-link:focus { top: 8px; }

/* ---------------------------------------------------------------------
   Type
   --------------------------------------------------------------------- */
.kicker { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.24em; font-size: clamp(11.5px, 1.3vw, 13px); color: var(--gold-ink); margin-bottom: 18px; }
.kicker.on-dark, .is-dark .kicker { color: var(--gold); }
.kicker a { text-decoration: none; border-bottom: 1px solid currentColor; }

/* Titles: wide uppercase, like the logo's "SIERRA HILLS", on a gold line that starts with the logo's mountains. */
.banner, .has-ridge {
  --u: clamp(17px, 0.7em, 34px);
  position: relative; padding-bottom: calc(var(--u) + 0.34em);
}
.banner {
  display: inline-block; align-self: flex-start;
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(22px, 3.1vw, 38px); line-height: 1.22; letter-spacing: 0.16em;
  color: var(--coal); text-wrap: balance;
}
.banner .g { color: var(--gold-ink); }
.banner::after, .has-ridge::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--u); pointer-events: none;
  background: var(--gold-deep);
  -webkit-mask: var(--peaks) left bottom / auto 100% no-repeat, linear-gradient(#000, #000) left bottom / 100% 2px no-repeat;
  mask: var(--peaks) left bottom / auto 100% no-repeat, linear-gradient(#000, #000) left bottom / 100% 2px no-repeat;
}
.banner.on-dark, .is-dark .banner { color: var(--white); }
.banner.on-dark .g, .is-dark .banner .g { color: var(--gold); }
.banner.on-dark::after, .is-dark .banner::after, .statement.on-dark.has-ridge::after, .hero .has-ridge::after { background: var(--gold); }
.banner.is-hero { font-size: clamp(26px, 4.4vw, 54px); letter-spacing: 0.14em; }
.banner.is-small { font-size: clamp(16px, 1.9vw, 22px); letter-spacing: 0.2em; }
/* The line draws itself in, left to right, when a title scrolls into view */
.js .banner[data-reveal]::after, .js .has-ridge[data-reveal]::after { clip-path: inset(0 100% 0 0); transition: clip-path 1s var(--ease) 0.25s; }
.js .banner[data-reveal].is-in::after, .js .has-ridge[data-reveal].is-in::after { clip-path: inset(0 0 0 0); }
.js .banner[data-rise]::after, .js .has-ridge[data-rise]::after { animation: linein 1.1s var(--ease) 0.5s both; }
@keyframes linein { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* Statements: the serif of the firm's current site, for its own sentences. */
.statement { font-family: var(--font-serif); font-weight: 500; font-size: clamp(30px, 4.2vw, 54px); line-height: 1.1; letter-spacing: -0.005em; color: var(--coal); text-wrap: balance; }
.statement.on-dark, .is-dark .statement { color: var(--white); }
.statement.is-hero { font-size: clamp(36px, 3.9vw, 58px); line-height: 1.05; color: var(--white); }

.section-lead { margin-top: 20px; font-family: var(--font-serif); font-weight: 500; font-size: clamp(21px, 2.3vw, 27px); line-height: 1.38; color: var(--ink); max-width: 36em; text-wrap: pretty; }
.is-dark .section-lead, .section-lead.on-dark { color: rgba(255, 255, 255, 0.9); }
.bigtext { font-family: var(--font-serif); font-weight: 500; font-size: clamp(23px, 2.9vw, 34px); line-height: 1.34; max-width: 31em; text-wrap: pretty; }
.prose { font-family: var(--font-serif); font-weight: 500; font-size: clamp(19.5px, 2vw, 22px); line-height: 1.55; max-width: 34em; }
.prose p + p { margin-top: 1em; }
.is-dark .prose { color: rgba(255, 255, 255, 0.92); }
.fineprint { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.textlink { color: var(--gold-ink); font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; font-size: 12.5px; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; }
.textlink:hover { text-decoration: underline; text-underline-offset: 5px; }
.textlink.on-dark, .is-dark .textlink { color: var(--gold); }

/* ---------------------------------------------------------------------
   Buttons: square, uppercase. Gold is the main one, as on the firm's own form.
   --------------------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border-radius: var(--radius);
  background: var(--gold); color: var(--ink);
  font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 13px; line-height: 1.2;
  text-decoration: none; white-space: nowrap; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  transition: background 0.2s, transform 0.2s var(--ease), box-shadow 0.2s, color 0.2s;
}
.pill:hover { background: var(--gold-deep); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28); }
.pill:active { transform: translateY(0); }
.pill[disabled] { opacity: 0.6; pointer-events: none; }
.pill-small { min-height: 40px; padding: 0 18px; font-size: 11.5px; }
.pill-large { min-height: 60px; padding: 0 36px; font-size: 14px; }
.pill-coal { background: var(--coal); color: var(--white); }
.pill-coal:hover { background: var(--coal-deep); }
.pill-white { background: var(--white); color: var(--ink); }
.pill-white:hover { background: var(--gold-pale); color: var(--ink); }
.pill-outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--coal); }
.pill-outline:hover { background: var(--coal); color: var(--white); box-shadow: none; }
.pill-ghost { background: transparent; color: var(--white); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85); }
.pill-ghost:hover { background: var(--white); color: var(--ink); box-shadow: none; }
@media (max-width: 560px) { .finale-cta .pill, .hero-cta .pill { flex: 1 1 100%; max-width: 380px; } }

/* ---------------------------------------------------------------------
   The Contact button: a ring of light that circles the box. lib/page.js adds
   the class to every button that links to /contact.
   --------------------------------------------------------------------- */
@property --ring-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.pill-ring { position: relative; isolation: isolate; overflow: visible; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3); }
.pill-ring:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4); }
/* The ring is 3px wide outside the button. Its outer corners are rounded 3px more than the
   button's so the two curves stay parallel, and the band runs 1px under the button's edge so
   no sliver of background shows between them. The mask keeps only the band. */
.pill-ring::before {
  content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: calc(var(--radius) + 3px); padding: 4px;
  background: conic-gradient(from calc(var(--ring-angle) + 315deg) at 50% 50%, var(--gold) 0deg, var(--gold-pale) 70deg, var(--white) 130deg, var(--gold-pale) 190deg, var(--gold) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: ring-spin 2.8s linear infinite;
}
.topbar .pill-ring { box-shadow: none; }
@keyframes ring-spin { to { --ring-angle: 360deg; } }

/* ---------------------------------------------------------------------
   Top bar: the firm's charcoal, with its logo
   --------------------------------------------------------------------- */
.topbar { position: sticky; top: 0; z-index: 900; background: var(--coal); color: var(--white); border-bottom: 1px solid rgba(255, 255, 255, 0.09); transition: box-shadow 0.3s; }
.topbar.is-stuck { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.36); }
.topbar-inner { max-width: calc(var(--content) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); height: var(--bar-h); display: flex; align-items: center; gap: 18px; }
.brand { display: block; flex-shrink: 0; }
.brand img { height: calc(var(--bar-h) - 14px); width: auto; }
.topnav { margin-left: auto; }
.topnav-links { list-style: none; display: flex; gap: 4px; }
.topnav-links a { display: block; padding: 10px 13px 8px; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; font-size: 12px; color: var(--white); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; transition: border-color 0.2s, color 0.2s; }
.topnav-links a:hover { border-bottom-color: rgba(255, 255, 255, 0.6); }
.topnav-links a[aria-current="page"] { border-bottom-color: var(--gold); color: var(--gold); }
.menu-only { display: none; }
.topbar-cta { display: flex; align-items: center; gap: 16px; flex-shrink: 0; margin-left: 10px; }
.topbar-cta .pill { box-shadow: none; }
.topnav-toggle { display: none; width: 44px; height: 44px; place-items: center; color: var(--white); }
.burger { width: 22px; height: 16px; position: relative; display: block; }
.burger i { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform 0.3s var(--ease), opacity 0.2s, top 0.3s var(--ease); }
.burger i:nth-child(1) { top: 0; } .burger i:nth-child(2) { top: 7px; } .burger i:nth-child(3) { top: 14px; }
[aria-expanded="true"] .burger i:nth-child(1) { top: 7px; transform: rotate(45deg); }
[aria-expanded="true"] .burger i:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .burger i:nth-child(3) { top: 7px; transform: rotate(-45deg); }
@media (max-width: 940px) {
  .topnav-toggle { display: grid; }
  .menu-only { display: block; }
  .topnav-links { position: absolute; left: 0; right: 0; top: var(--bar-h); flex-direction: column; gap: 0; background: var(--coal-deep); padding: 6px var(--gutter) 16px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity 0.25s, transform 0.25s var(--ease), visibility 0s 0.25s; }
  .topnav-links.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .topnav-links a { padding: 17px 4px 15px; font-size: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
  .topnav-links a[aria-current="page"] { border-bottom-color: rgba(255, 255, 255, 0.12); }
}
@media (max-width: 560px) { :root { --bar-h: 68px; } .topbar-inner { gap: 10px; } .topbar-cta { gap: 8px; } }

/* ---------------------------------------------------------------------
   Home hero: the firm's headline on charcoal, its photo coming in from
   the right. The photo fades into the charcoal along its left edge.
   --------------------------------------------------------------------- */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 0.74fr) minmax(0, 1fr); background: var(--coal); color: var(--white); overflow: hidden; }
.hero-card { grid-column: 1; grid-row: 1; padding: clamp(52px, 5.4vw, 80px) clamp(24px, 3.4vw, 48px) clamp(84px, 8.6vw, 122px) max(var(--gutter), calc((100vw - var(--content)) / 2)); display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1; }
.hero-photo { grid-column: 2; grid-row: 1; position: relative; overflow: hidden; min-height: 540px; }
.hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(var(--zoom, 1)); transform-origin: 50% 40%; transition: transform 0.2s linear; }
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, var(--coal) 0%, rgba(56, 56, 56, 0) 9%), linear-gradient(to top, rgba(39, 39, 39, 0.55), transparent 32%); pointer-events: none; }
.hero .kicker { margin-bottom: 20px; }
.hero-text { margin-top: clamp(22px, 3vh, 30px); font-family: var(--font-serif); font-weight: 500; font-size: clamp(19.5px, 1.6vw, 22.5px); line-height: 1.48; color: rgba(255, 255, 255, 0.9); max-width: 31em; text-wrap: pretty; }
.hero-cta { margin-top: clamp(26px, 4vh, 40px); display: flex; flex-wrap: wrap; gap: 14px; }
/* Below about 1180px the card is too tall beside the photo to keep all five people in it, so the photo goes on top. */
@media (max-width: 1180px) {
  .hero { grid-template-columns: 1fr; }
  .hero-photo { grid-column: 1; grid-row: 1; min-height: 0; aspect-ratio: 2 / 1; }
  .hero-photo img { object-position: 50% 22%; }
  .hero-photo::after { background: linear-gradient(to top, var(--coal) 0%, rgba(56, 56, 56, 0) 30%); }
  .hero-card { grid-column: 1; grid-row: 2; padding: 22px var(--gutter) clamp(72px, 12vw, 116px); }
  .hero-card > * { max-width: 46rem; }
  .statement.is-hero { font-size: clamp(36px, 6vw, 58px); }
}
@media (max-width: 720px) { .hero-photo { aspect-ratio: 4 / 3; } .hero-photo img { object-position: 50% 30%; } .hero-card { padding-top: 14px; } }

.js [data-rise] { opacity: 0; transform: translateY(18px); animation: rise 0.9s var(--ease) forwards; }
.js [data-rise]:nth-child(2) { animation-delay: 0.1s; }
.js [data-rise]:nth-child(3) { animation-delay: 0.22s; }
.js [data-rise]:nth-child(4) { animation-delay: 0.34s; }
.js [data-rise]:nth-child(5) { animation-delay: 0.46s; }
.js [data-rise]:nth-child(6) { animation-delay: 0.58s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* The section right under the home hero rises into it as a range of hills. */
.hero + .has-rise { position: relative; z-index: 2; }
.hero + .has-rise::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: clamp(26px, 5vw, 72px); background: inherit; -webkit-mask: var(--ridge-shape) center / 100% 100% no-repeat; mask: var(--ridge-shape) center / 100% 100% no-repeat; pointer-events: none; }

/* ---------------------------------------------------------------------
   Next event strip
   --------------------------------------------------------------------- */
.nextup { background: var(--gold); color: var(--ink); padding: 10px var(--gutter) 16px; }
.nextup-line { max-width: var(--content); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 16px; font-family: var(--font-display); font-weight: 600; font-size: 14px; text-align: center; }
.nextup-label { font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; font-size: 11.5px; padding: 5px 10px 4px; background: var(--coal); color: var(--white); border-radius: var(--radius); align-self: center; }
.nextup-line b { font-family: var(--font-serif); font-weight: 700; font-size: 23px; line-height: 1.15; }
.nextup-line .dot { opacity: 0.5; }
.nextup-count { font-weight: 700; }
.nextup-count:empty { display: none; }
.nextup-link { font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; font-size: 12px; text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 1px; white-space: nowrap; }
.nextup-link:hover { border-bottom-color: transparent; }
@media (max-width: 640px) { .nextup-line .dot { display: none; } }

/* ---------------------------------------------------------------------
   The long ridge line (src/partials/ridge.html)
   --------------------------------------------------------------------- */
.ridge { display: block; width: 100%; height: max(72px, 10vw); overflow: visible; pointer-events: none; }
.ridge path { fill: none; stroke: var(--gold); stroke-linejoin: round; stroke-linecap: round; }
.ridge-line { stroke-width: 2.2; }
.ridge-fold { stroke-width: 1.3; opacity: 0.6; }
.js .ridge .ridge-line { stroke-dasharray: var(--len, 1500); stroke-dashoffset: var(--len, 1500); transition: stroke-dashoffset 2.6s var(--ease) 0.2s; }
.js .ridge.is-in .ridge-line { stroke-dashoffset: 0; }
.js .ridge .ridge-fold { opacity: 0; transition: opacity 1.1s ease 1.5s; }
.js .ridge.is-in .ridge-fold { opacity: 0.6; }

/* The closing mountains (src/partials/range.html): three ranges, the nearest in the footer's colour so the
   footer itself rises as mountains. --p (set by app.js) runs 0 to 1 as the section scrolls up into view. */
.range { position: relative; height: max(128px, 16.67vw); margin-top: clamp(28px, 5vh, 56px); pointer-events: none; }
.range .range-svg { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; overflow: hidden; }
/* the words and buttons stay in front of the glow */
.finale-inner, .contact-inner { position: relative; z-index: 1; }
.range-svg .range-back { fill: #424242; stroke: none; }
.range-svg .range-mid { fill: #2f2f2f; stroke: none; }
.range-svg .range-front { fill: var(--coal-deep); stroke: none; }
.range-layer.is-back { transform: translateY(calc((1 - var(--p, 1)) * 44px)); }
.range-layer.is-mid { transform: translateY(calc((1 - var(--p, 1)) * 22px)); }
.range-glow { position: absolute; left: 46%; bottom: 30%; width: min(1200px, 170%); height: 190%; transform: translate(-50%, 0); background: radial-gradient(ellipse 50% 50% at 50% 100%, rgba(246, 195, 36, 0.5), rgba(246, 195, 36, 0.2) 40%, rgba(246, 195, 36, 0) 72%); }
.js .range-glow { opacity: 0; transform: translate(-50%, 34%); transition: opacity 2.6s ease 0.5s, transform 3s var(--ease) 0.3s; }
.js .range.is-in .range-glow { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------------
   Photo-backed sections and page heroes
   --------------------------------------------------------------------- */
.pagehero.has-photo, .photo-band { position: relative; isolation: isolate; overflow: hidden; background: var(--coal); color: var(--white); }
.pagehero-bg, .photo-band-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.photo-band-bg { top: -8%; height: 116%; transform: translate3d(0, var(--drift, 0%), 0); will-change: transform; }
.pagehero.has-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(39, 39, 39, 0.94) 0%, rgba(39, 39, 39, 0.78) 42%, rgba(39, 39, 39, 0.38) 100%), linear-gradient(to top, rgba(39, 39, 39, 0.88), transparent 46%); }
.pagehero { padding: clamp(56px, 9vh, 104px) var(--gutter) clamp(36px, 6vh, 72px); background: var(--white); }
.pagehero.has-photo { min-height: min(48vh, 480px); display: flex; align-items: center; padding: clamp(60px, 10vh, 112px) var(--gutter) clamp(96px, 13vw, 176px); }
.pagehero.is-tall { min-height: min(66vh, 660px); }
.pagehero-inner { max-width: var(--content); width: 100%; margin: 0 auto; }
.pagehero-lead { margin-top: clamp(18px, 3vh, 28px); font-family: var(--font-serif); font-weight: 500; font-size: clamp(21px, 2.3vw, 27px); line-height: 1.4; color: rgba(255, 255, 255, 0.92); max-width: 33em; text-wrap: pretty; }
.pagehero-lead a { color: var(--gold); text-underline-offset: 4px; }
.pagehero .ridge { position: absolute; left: 0; right: 0; bottom: -2px; }

/* ---------------------------------------------------------------------
   Bands
   --------------------------------------------------------------------- */
.band { padding: clamp(64px, 11vh, 124px) var(--gutter); position: relative; }
.band.is-paper { background: var(--paper); }
.band.is-white { background: var(--white); }
.band.is-dark { background: var(--coal); color: var(--white); isolation: isolate; overflow: hidden; }
/* The dark sections carry faint contour lines that drift very slowly. */
.band.is-dark::before, .finale::before, .contact::before, .hero-card::before { content: ""; position: absolute; inset: -700px 0 0 0; z-index: -1; background: var(--contours) 0 0 / 900px 700px repeat; opacity: 0.055; pointer-events: none; animation: contours 240s linear infinite; }
.hero-card::before { inset: -700px 0 0 -900px; }
@keyframes contours { to { transform: translate3d(-900px, 700px, 0); } }
.finale, .contact { isolation: isolate; }
.hero-card { isolation: isolate; overflow: hidden; }
.band.is-tight { padding-top: clamp(44px, 7vh, 80px); padding-bottom: clamp(44px, 7vh, 80px); }
.band > * { max-width: var(--content); margin-left: auto; margin-right: auto; }
.band[hidden] { display: none; }
.band-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; }
.band-head .banner { margin: 0; }
.band-head .textlink { padding-bottom: 6px; }
.band-head + * { margin-top: clamp(30px, 5vh, 52px); }
@media (max-width: 640px) { .band-head { flex-direction: column; align-items: flex-start; gap: 14px; } .band-head .textlink { padding-bottom: 0; } }

/* ---------------------------------------------------------------------
   Four services (home)
   --------------------------------------------------------------------- */
.pillars { list-style: none; margin-top: clamp(32px, 5vh, 56px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 22px); }
.pillars li { position: relative; overflow: hidden; min-height: clamp(150px, 15vw, 200px); padding: clamp(20px, 2.4vw, 28px); background: var(--coal); color: var(--white); border-top: var(--rule) solid var(--gold); display: flex; flex-direction: column; justify-content: space-between; gap: 18px; transition: transform 0.4s var(--ease), box-shadow 0.4s; }
.pillars li:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22); }
.pillars i { font-style: normal; font-family: var(--font-serif); font-weight: 500; font-size: clamp(34px, 3.6vw, 48px); line-height: 0.9; color: var(--gold); }
.pillars b { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: clamp(13.5px, 1.35vw, 16.5px); line-height: 1.3; text-wrap: balance; }
@media (max-width: 900px) { .pillars { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pillars { grid-template-columns: 1fr; } .pillars li { min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; padding: 18px 20px; } .pillars i { min-width: 46px; font-size: 34px; } }

/* ---------------------------------------------------------------------
   Charcoal card over a photo
   --------------------------------------------------------------------- */
.photo-band { padding: clamp(64px, 10vh, 120px) var(--gutter); }
.photo-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to right, rgba(39, 39, 39, 0.5), rgba(39, 39, 39, 0.1) 60%); }
.photo-band-bg { object-position: 70% 40%; }
.photo-band-inner { max-width: var(--content); margin: 0 auto; display: flex; }
.coal-card { position: relative; max-width: 620px; background: var(--coal); border-top: var(--rule) solid var(--gold); padding: clamp(28px, 4vw, 52px); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5); }
.card-quote { margin-top: clamp(18px, 3vh, 26px); font-family: var(--font-serif); font-weight: 500; font-size: clamp(25px, 3vw, 36px); line-height: 1.2; text-wrap: pretty; }
.card-quote b { color: var(--gold); font-weight: 600; }
.card-text { margin-top: 16px; font-family: var(--font-serif); font-size: clamp(19px, 1.9vw, 21.5px); line-height: 1.45; color: rgba(255, 255, 255, 0.86); text-wrap: pretty; }
.coal-card .pill { margin-top: clamp(22px, 3vh, 30px); }

/* ---------------------------------------------------------------------
   Events
   --------------------------------------------------------------------- */
.events { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.event { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; background: var(--white); color: var(--ink); border-top: var(--rule) solid var(--gold); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1); transition: transform 0.4s var(--ease), box-shadow 0.4s; }
.event:hover { transform: translateY(-4px); box-shadow: 0 24px 54px rgba(0, 0, 0, 0.16); }
.is-white .event { box-shadow: inset 0 0 0 1px var(--hairline), 0 16px 40px rgba(0, 0, 0, 0.08); }
.event-flyer { position: relative; display: block; overflow: hidden; background: var(--coal); cursor: zoom-in; aspect-ratio: 5 / 7; width: 100%; }
.event-flyer img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: transform 0.6s var(--ease); }
.event-flyer:hover img { transform: scale(1.04); }
.event-zoom { position: absolute; left: 10px; bottom: 10px; padding: 6px 10px 5px; background: rgba(39, 39, 39, 0.86); color: var(--white); font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 10px; border-radius: var(--radius); opacity: 0; transform: translateY(4px); transition: opacity 0.25s, transform 0.25s; }
.event-flyer:hover .event-zoom, .event-flyer:focus-visible .event-zoom { opacity: 1; transform: none; }
.event-body { padding: clamp(16px, 2vw, 24px); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.event-date { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.event-chip { display: grid; place-items: center; align-content: center; gap: 2px; width: 56px; height: 60px; background: var(--coal); color: var(--white); flex-shrink: 0; }
.event-chip b { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; font-size: 10.5px; color: var(--gold); padding-left: 0.18em; }
.event-chip i { font-style: normal; font-family: var(--font-serif); font-weight: 600; font-size: 29px; line-height: 0.9; }
.event-status { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; font-size: 10.5px; color: var(--gold-ink); }
.event-status:empty { display: none; }
.event-status.is-today { padding: 6px 10px 5px; background: var(--gold); color: var(--ink); border-radius: var(--radius); }
.event-title { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.3; text-wrap: balance; }
.event-line { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(18.5px, 1.8vw, 21px); line-height: 1.25; color: var(--ink-soft); text-wrap: pretty; }
.event-when { font-weight: 600; font-size: 14px; }
.event-cta { margin-top: auto; padding-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; }
.event-cta:empty { display: none; }
.event-cta .pill { box-shadow: none; }
.event-cta .pill-outline { box-shadow: inset 0 0 0 2px var(--coal); }
.events-empty { font-family: var(--font-serif); font-size: clamp(22px, 2.6vw, 30px); text-align: center; padding: clamp(20px, 5vh, 48px) 0; }
.events-empty[hidden], .events[hidden] { display: none; }
/* home: three across, flyer on top */
.events.is-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.events.is-row .event { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
.events.is-row .event-flyer { aspect-ratio: 4 / 4.2; }
.events.is-row[data-n="1"] { grid-template-columns: minmax(0, 720px); }
.events.is-row[data-n="1"] .event { grid-template-columns: minmax(120px, 40%) 1fr; grid-template-rows: none; }
.events.is-row[data-n="1"] .event-flyer { aspect-ratio: 5 / 7; }
.events.is-row[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.events.is-row[data-n="2"] .event { grid-template-columns: minmax(120px, 40%) 1fr; grid-template-rows: none; }
.events.is-row[data-n="2"] .event-flyer { aspect-ratio: 5 / 7; }
/* recent: smaller, four across, no buttons */
.events.is-recent { margin-top: clamp(24px, 4vh, 40px); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.events.is-recent .event { grid-template-columns: 1fr; border-top-color: var(--hairline); }
.events.is-recent .event-flyer { aspect-ratio: 4 / 4.4; }
.events.is-recent .event-flyer img { filter: saturate(0.75); }
.events.is-recent .event-body { padding: 14px 16px 18px; gap: 5px; }
.events.is-recent .event-date { display: none; }
.events.is-recent .event-title { font-size: 12.5px; }
.events.is-recent .event-line { font-size: 17px; }
.events.is-recent .event-when { font-size: 12.5px; color: var(--ink-soft); }
@media (max-width: 1000px) { .events.is-recent { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .events, .events.is-row, .events.is-row[data-n="2"] { grid-template-columns: 1fr; }
  .events.is-row .event { grid-template-columns: minmax(110px, 36%) 1fr; grid-template-rows: none; }
  .events.is-row .event-flyer { aspect-ratio: 5 / 7; }
}
@media (max-width: 420px) { .event { grid-template-columns: 34% 1fr; } .event-chip { width: 48px; height: 52px; } .event-chip i { font-size: 25px; } .event-cta .pill { padding: 0 14px; } }

/* ---------------------------------------------------------------------
   Clients: logos on white tiles
   --------------------------------------------------------------------- */
.logo-tile { position: relative; display: block; background: var(--white); aspect-ratio: 3 / 2; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12); transition: transform 0.4s var(--ease), box-shadow 0.4s; }
.logo-tile img { position: absolute; inset: 14% 12%; width: 76%; height: 72%; object-fit: contain; }
/* Logos arrive in grey and colour in one after another as they scroll into view */
.js [data-reveal-stagger] .logo-tile img { filter: grayscale(1); opacity: 0.72; transition: filter 1.1s ease, opacity 1.1s ease; }
.js [data-reveal-stagger].is-in .logo-tile img { filter: none; opacity: 1; }
.js [data-reveal-stagger].is-in > :nth-child(1) img { transition-delay: 0.5s; }
.js [data-reveal-stagger].is-in > :nth-child(2) img { transition-delay: 0.65s; }
.js [data-reveal-stagger].is-in > :nth-child(3) img { transition-delay: 0.8s; }
.js [data-reveal-stagger].is-in > :nth-child(4) img { transition-delay: 0.95s; }
.js [data-reveal-stagger].is-in > :nth-child(5) img { transition-delay: 1.1s; }
.js [data-reveal-stagger].is-in > :nth-child(6) img { transition-delay: 1.25s; }
.js [data-reveal-stagger].is-in > :nth-child(7) img { transition-delay: 1.4s; }
.js [data-reveal-stagger].is-in > :nth-child(8) img { transition-delay: 1.55s; }
.js [data-reveal-stagger].is-in > :nth-child(9) img { transition-delay: 1.7s; }
.js [data-reveal-stagger].is-in > :nth-child(10) img { transition-delay: 1.85s; }
.js [data-reveal-stagger].is-in > :nth-child(11) img { transition-delay: 2s; }
.js [data-reveal-stagger].is-in > :nth-child(12) img { transition-delay: 2.15s; }
.logo-tile:hover img { filter: none !important; opacity: 1 !important; transition-delay: 0s !important; }
.clients { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(22px, 3vw, 40px) clamp(14px, 2vw, 26px); }
.client { display: grid; grid-template-rows: auto 1fr; gap: 12px; }
.client .logo-tile { border-bottom: var(--rule) solid var(--gold); }
.client:hover .logo-tile { transform: translateY(-4px); box-shadow: 0 22px 46px rgba(0, 0, 0, 0.18); }
.client .pill { white-space: normal; text-align: center; padding: 11px 12px 10px; min-height: 46px; align-self: start; box-shadow: none; }
.logowall { list-style: none; margin-top: clamp(28px, 5vh, 48px); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); }
.logowall.is-row { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.logowall .logo-tile:hover { transform: translateY(-4px); }
.is-dark .logo-tile { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34); }
@media (max-width: 1000px) { .clients { grid-template-columns: repeat(3, minmax(0, 1fr)); } .logowall { grid-template-columns: repeat(4, minmax(0, 1fr)); } .logowall.is-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .clients { grid-template-columns: repeat(2, minmax(0, 1fr)); } .logowall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 420px) { .logowall, .logowall.is-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------------
   The drifting strip of event photos (home)
   --------------------------------------------------------------------- */
.filmstrip { overflow: hidden; background: var(--coal-deep); padding: 10px 0; }
.filmstrip-track { display: flex; width: max-content; animation: filmstrip 90s linear infinite; }
.filmstrip:hover .filmstrip-track, .filmstrip:focus-within .filmstrip-track { animation-play-state: paused; }
.filmstrip-set { display: flex; gap: 10px; padding-right: 10px; }
.strip-item { flex: 0 0 auto; display: block; height: clamp(150px, 19vw, 250px); overflow: hidden; background: var(--coal-lift); }
.strip-item img { height: 100%; width: auto; transition: transform 0.6s var(--ease), filter 0.4s; filter: saturate(0.92); }
.strip-item:hover img { transform: scale(1.05); filter: none; }
@keyframes filmstrip { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .filmstrip { overflow-x: auto; } .filmstrip-track { animation: none; } .filmstrip-set[aria-hidden] { display: none; } }

/* ---------------------------------------------------------------------
   Photo galleries: the three covers, then each gallery's grid
   --------------------------------------------------------------------- */
.albums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); }
.albums.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(24px, 4vh, 40px); }
.album { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 4.5; background: var(--coal); color: var(--white); text-decoration: none; border-bottom: var(--rule) solid var(--gold); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18); }
.albums.is-two .album { aspect-ratio: 16 / 10; }
.album img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform 0.8s var(--ease); }
.album:hover img { transform: scale(1.05); }
.album::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(39, 39, 39, 0.97) 0%, rgba(39, 39, 39, 0.82) 34%, rgba(39, 39, 39, 0.3) 62%, rgba(39, 39, 39, 0) 82%); }
.album-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: clamp(18px, 2.4vw, 28px); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.album-date { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 19px; color: var(--gold); }
.album-title { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; font-size: clamp(14px, 1.45vw, 17px); line-height: 1.35; text-wrap: balance; }
.album-count { font-size: 12.5px; opacity: 0.8; }
.album .pill { margin-top: 10px; box-shadow: none; }
.album:hover .pill { background: var(--gold-deep); }
@media (max-width: 900px) { .albums { grid-template-columns: 1fr; } .album { aspect-ratio: 16 / 12.5; } .albums.is-two { grid-template-columns: 1fr; } }

.band.is-gallery { padding-top: clamp(20px, 3vh, 36px); padding-bottom: clamp(48px, 8vh, 96px); background: var(--coal-deep); }
.pagehero.is-gallery .banner { font-size: clamp(20px, 3.2vw, 40px); }
.photogrid { columns: 4 250px; column-gap: 10px; max-width: 1500px !important; }
.photogrid button { display: block; width: 100%; margin: 0 0 10px; break-inside: avoid; overflow: hidden; background: var(--coal-lift); cursor: zoom-in; }
.photogrid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease), filter 0.3s; }
.photogrid button:hover img { transform: scale(1.04); filter: brightness(1.08); }
@media (max-width: 560px) { .photogrid { columns: 2; column-gap: 6px; } .photogrid button { margin-bottom: 6px; } }

/* Full-size viewer */
.lightbox { border: 0; padding: 0; margin: auto; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; display: none; place-items: center; overflow: hidden; }
.lightbox[open] { display: grid; }
.lightbox::backdrop { background: rgba(20, 20, 20, 0.95); }
.lightbox img { max-width: min(94vw, 1500px); max-height: 86vh; width: auto; height: auto; border: 5px solid var(--white); box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6); background: var(--coal); }
.lightbox-close { position: fixed; top: 16px; right: 16px; width: 46px; height: 46px; background: rgba(255, 255, 255, 0.14); color: var(--white); display: grid; place-items: center; border-radius: var(--radius); }
.lightbox-step { position: fixed; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; background: rgba(255, 255, 255, 0.14); color: var(--white); font-size: 22px; display: grid; place-items: center; border-radius: var(--radius); }
.lightbox-prev { left: 12px; } .lightbox-next { right: 12px; }
.lightbox-close:hover, .lightbox-step:hover { background: var(--gold); color: var(--ink); }
.lightbox-count { position: fixed; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom)); text-align: center; color: rgba(255, 255, 255, 0.8); font-family: var(--font-display); font-weight: 600; letter-spacing: 0.18em; font-size: 12px; }
.lightbox.is-single .lightbox-step, .lightbox.is-single .lightbox-count { display: none; }
@media (max-width: 640px) { .lightbox-step { top: auto; bottom: calc(44px + env(safe-area-inset-bottom)); transform: none; } .lightbox img { max-height: 76vh; border-width: 3px; } }

/* ---------------------------------------------------------------------
   About: the team
   --------------------------------------------------------------------- */
.bio-row { display: grid; grid-template-columns: 1fr 1.55fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
/* the portrait stays in view while its bio scrolls past */
@media (min-width: 861px) { .bio-row figure { position: sticky; top: calc(var(--bar-h) + 28px); } }
.bio-row.is-flip { grid-template-columns: 1.55fr 1fr; }
.bio-row.is-flip figure { order: 2; }
.bio-row figure { overflow: hidden; aspect-ratio: 4 / 5; border: 6px solid var(--white); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28); outline: var(--rule) solid var(--gold); outline-offset: 0; max-width: 420px; width: 100%; justify-self: center; }
.bio-row figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.bio-row .prose { margin-top: clamp(18px, 3vh, 28px); max-width: none; }
@media (max-width: 860px) { .bio-row, .bio-row.is-flip { grid-template-columns: 1fr; } .bio-row.is-flip figure { order: 0; } .bio-row figure { aspect-ratio: 4 / 4.4; max-width: 340px; justify-self: start; } }

/* ---------------------------------------------------------------------
   Contact
   --------------------------------------------------------------------- */
.contact { position: relative; background: var(--coal); color: var(--white); padding: clamp(56px, 9vh, 104px) var(--gutter) 0; overflow: hidden; }
.contact-inner { max-width: 760px; margin: 0 auto; }
.contact-lead { margin-top: clamp(20px, 3vh, 28px); font-family: var(--font-serif); font-weight: 500; font-size: clamp(21px, 2.3vw, 26px); line-height: 1.4; color: rgba(255, 255, 255, 0.92); text-wrap: pretty; }
.contact-lead.is-ask { margin-top: 12px; color: var(--gold); }
.contact-phone { margin-top: clamp(24px, 4vh, 36px); font-family: var(--font-serif); font-size: clamp(20px, 2.1vw, 23px); color: rgba(255, 255, 255, 0.9); }
.contact-phone a { color: var(--gold); font-weight: 600; white-space: nowrap; text-underline-offset: 4px; }
.contact .range { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); }
.formwrap { margin-top: clamp(24px, 4vh, 40px); }
.joinform { background: var(--white); color: var(--ink); padding: clamp(22px, 3.2vw, 40px); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4); border-top: 6px solid var(--gold); }
.jf-legend { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; font-size: 12px; color: var(--gold-ink); margin-bottom: 12px; }
fieldset { border: 0; min-width: 0; }
fieldset + fieldset, .jf-block + .jf-block, fieldset + .jf-block, .jf-block + fieldset { margin-top: 22px; }
.jf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.jf-grid label, .jf-wide { display: block; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; color: var(--ink-soft); }
.jf-wide { grid-column: 1 / -1; }
.jf-req { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink-faint); }
.joinform input, .joinform textarea { display: block; width: 100%; margin-top: 6px; min-height: 48px; padding: 10px 14px; border-radius: var(--radius); border: 2px solid var(--hairline); background: var(--white); font-family: var(--font-body); font-weight: 500; font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--ink); transition: border-color 0.2s; }
.joinform textarea { min-height: 130px; resize: vertical; }
.joinform input:focus, .joinform textarea:focus { outline: none; border-color: var(--gold-deep); }
.jf-hp { position: absolute; left: -9999px; top: -9999px; }
/* Draft only: says the form isn't connected yet (lib/page.js removes it at launch) */
.jf-draft { margin-top: 22px; padding: 14px 16px; background: var(--paper); border-left: var(--rule) solid var(--gold); font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.jf-actions { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.jf-status { font-size: 14px; font-weight: 600; color: var(--red); }
.jf-done { text-align: center; padding: clamp(36px, 5vw, 60px) clamp(22px, 3.2vw, 40px); }
.jf-done[hidden] { display: none; }
.jf-done .check { width: 72px; height: 72px; margin: 0 auto 18px; background: var(--gold); color: var(--ink); display: grid; place-items: center; animation: pop 0.6s var(--ease); }
.jf-done .check svg { width: 34px; height: 34px; }
@keyframes pop { from { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.12); } }
.jf-done h3 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(30px, 4vw, 42px); }
@media (max-width: 560px) { .jf-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------
   The closing section, on every page but Contact: the firm's own question
   over the ridge line, which runs straight into the footer.
   --------------------------------------------------------------------- */
.finale { position: relative; background: var(--coal); color: var(--white); text-align: center; padding: clamp(72px, 12vh, 132px) 0 0; overflow: hidden; }
.finale-inner { max-width: 900px; margin: 0 auto; padding: 0 var(--gutter); }
.finale .statement { font-size: clamp(30px, 4.6vw, 58px); }
.finale-lead { margin: clamp(18px, 3vh, 26px) auto 0; font-family: var(--font-serif); font-weight: 500; font-size: clamp(20px, 2.1vw, 24px); line-height: 1.45; color: rgba(255, 255, 255, 0.86); max-width: 32em; text-wrap: pretty; }
.finale-cta { margin-top: clamp(26px, 4vh, 38px); display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 14px; }
.finale .range { margin-top: clamp(36px, 6vh, 64px); }

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.footer { background: var(--coal-deep); color: rgba(255, 255, 255, 0.72); padding: clamp(40px, 7vh, 68px) var(--gutter) calc(clamp(24px, 4vh, 40px) + env(safe-area-inset-bottom)); font-size: 14px; line-height: 1.6; }
.footer-inner { max-width: var(--content); margin: 0 auto; display: grid; grid-template-columns: auto 1fr; gap: clamp(28px, 6vw, 96px); align-items: start; }
.footer-brand img { width: clamp(180px, 20vw, 250px); height: auto; }
.footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: space-between; gap: 24px; text-align: left; }
.footer-cols h3 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; font-size: 11.5px; color: var(--gold); margin-bottom: 10px; }
.footer-cols a { display: block; color: rgba(255, 255, 255, 0.88); text-decoration: none; padding: 5px 0; font-weight: 500; overflow-wrap: anywhere; }
.footer-cols a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.footer-fine { max-width: var(--content); margin: clamp(28px, 4vh, 40px) auto 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 12.5px; text-align: center; }
@media (max-width: 860px) { .footer-inner { grid-template-columns: 1fr; } .footer-brand img { margin-left: -12px; } .footer-cols { justify-content: start; gap: 24px clamp(28px, 8vw, 64px); } }
@media (max-width: 560px) { .footer-cols { grid-template-columns: 1fr 1fr; } .footer-cols > div:last-child { grid-column: 1 / -1; } }

/* Draft only: a small tag in the corner of every page (lib/page.js removes it at launch) */
.draft-tag { position: fixed; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 950; padding: 7px 12px 6px; background: var(--coal-deep); color: var(--white); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: var(--radius); font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 10.5px; line-height: 1; pointer-events: none; opacity: 0.92; }
@media (max-width: 560px) { .draft-tag span { display: none; } }
@media print { .draft-tag { display: none; } }

/* ---------------------------------------------------------------------
   Scroll reveals. Only hide things when JS is there to show them again.
   --------------------------------------------------------------------- */
.js [data-reveal], .js [data-reveal-stagger] > * { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.js [data-reveal].is-in, .js [data-reveal-stagger].is-in > * { opacity: 1; transform: none; }
.js [data-reveal-stagger].is-in > :nth-child(2) { transition-delay: 0.08s; }
.js [data-reveal-stagger].is-in > :nth-child(3) { transition-delay: 0.16s; }
.js [data-reveal-stagger].is-in > :nth-child(4) { transition-delay: 0.24s; }
.js [data-reveal-stagger].is-in > :nth-child(5) { transition-delay: 0.32s; }
.js [data-reveal-stagger].is-in > :nth-child(6) { transition-delay: 0.4s; }
.js [data-reveal-stagger].is-in > :nth-child(7) { transition-delay: 0.48s; }
.js [data-reveal-stagger].is-in > :nth-child(n + 8) { transition-delay: 0.56s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .js [data-reveal], .js [data-reveal-stagger] > *, .js [data-rise] { opacity: 1; transform: none; }
  .js [data-reveal-stagger] .logo-tile img { filter: none; opacity: 1; }
  .js .banner[data-reveal]::after, .js .has-ridge[data-reveal]::after { clip-path: none; }
  .js .ridge .ridge-line { stroke-dashoffset: 0; }
  .js .ridge .ridge-fold { opacity: 0.6; }
  .js .range-glow { opacity: 1; transform: translate(-50%, 0); }
}
@media print {
  .topbar, .topbar-cta, .lightbox { display: none !important; }
  .js [data-reveal], .js [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
}

/* ---------------------------------------------------------------------
   /admin: where the firm posts its own events
   --------------------------------------------------------------------- */
.admin { background: var(--paper); padding: clamp(40px, 7vh, 72px) var(--gutter) clamp(64px, 10vh, 120px); min-height: 70vh; }
.admin-inner { max-width: 860px; margin: 0 auto; }
.admin-lead { margin-top: 16px; font-family: var(--font-serif); font-size: clamp(19px, 2vw, 22px); line-height: 1.45; color: var(--ink-soft); max-width: 36em; }
.admin-login { max-width: 460px; margin-top: 28px; }
.admin-note { margin-top: 28px; padding: 16px 18px; background: var(--white); border-left: var(--rule) solid var(--gold); font-size: 15px; }
.admin-bar { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.admin-signout { margin-left: auto; color: var(--ink-faint); }
.admin-form { margin-top: 24px; }
.admin-form .banner.is-small { margin-bottom: 18px; }
.admin-preview { margin-top: 14px; display: inline-grid; gap: 6px; justify-items: center; }
.admin-preview img { max-height: 240px; width: auto; border: 4px solid var(--white); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15); }
.admin-preview span { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 10.5px; color: var(--ink-faint); }
.admin-preview[hidden] { display: none; }
.admin-saved { margin: 24px 0 0; padding: 14px 18px; background: #e9f5e6; border-left: var(--rule) solid #3c8a3a; font-weight: 600; font-size: 15px; }
.admin-saved[hidden] { display: none; }
.admin .banner.is-small { margin-top: clamp(32px, 5vh, 48px); }
.admin-list { margin-top: 16px; display: grid; gap: 12px; }
.admin-card { display: grid; grid-template-columns: 72px 1fr auto; gap: 16px; align-items: center; background: var(--white); padding: 12px 16px 12px 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); border-left: var(--rule) solid var(--gold); }
.admin-card img { width: 72px; height: 96px; object-fit: cover; object-position: 50% 0; background: var(--coal); }
.admin-card-body { display: grid; gap: 2px; min-width: 0; }
.admin-card-body b { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 14px; line-height: 1.3; }
.admin-card-body i { font-family: var(--font-serif); font-size: 18px; color: var(--ink-soft); }
.admin-card-body span { font-weight: 600; font-size: 14px; }
.admin-card-body small { font-size: 12px; color: var(--ink-faint); }
.admin-card-actions { display: grid; gap: 10px; justify-items: end; }
.admin-card-actions .pill { box-shadow: none; }
.admin-delete { color: var(--red); }
.admin-empty { font-family: var(--font-serif); font-size: 19px; color: var(--ink-soft); }
@media (max-width: 560px) { .admin-card { grid-template-columns: 56px 1fr; } .admin-card img { width: 56px; height: 74px; } .admin-card-actions { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; } }

/* admin: tabs and the extra panels */
.admin-tabs { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border-bottom: 2px solid var(--hairline); padding-bottom: 10px; }
.admin-tabs button[data-tab] { padding: 10px 14px 8px; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; color: var(--ink-soft); border-bottom: 3px solid transparent; }
.admin-tabs button[data-tab]:hover { color: var(--ink); }
.admin-tabs button[data-tab].is-on { color: var(--ink); border-bottom-color: var(--gold); }
.admin-panel[hidden] { display: none; }
.admin-panel { margin-top: 8px; }
.admin-form.is-open { margin-top: 28px; }
.admin-hint { margin-top: 14px; font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.admin-list.is-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.admin-card.is-tile { grid-template-columns: 1fr; gap: 10px; }
.admin-card.is-tile .logo-tile { aspect-ratio: 3 / 2; box-shadow: inset 0 0 0 1px var(--hairline); }
.admin-card.is-tile .admin-card-actions { grid-auto-flow: column; justify-content: start; justify-items: start; }
.admin-card.is-person img { height: 96px; object-position: 50% 12%; }
.admin-preview.is-logo img { max-height: 120px; padding: 10px; background: var(--white); }
.kinds.is-row { grid-template-columns: 1fr 1fr; }
.kind input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.admin-upload { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.admin-upload .pill { cursor: pointer; }
.admin-progress { font-weight: 600; font-size: 14px; color: var(--gold-ink); }
.admin-progress:empty { display: none; }
.admin-photos { margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.admin-photo { position: relative; background: var(--white); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); display: grid; gap: 6px; padding: 6px; }
.admin-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--coal-lift); }
.admin-photo.is-cover { outline: 3px solid var(--gold); }
.admin-photo-badge { position: absolute; top: 10px; left: 10px; padding: 4px 8px 3px; background: var(--gold); color: var(--ink); font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 9.5px; border-radius: var(--radius); }
.admin-photo-actions { display: flex; justify-content: space-between; gap: 6px; }
.admin-photo-actions button { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px; color: var(--ink-soft); padding: 4px 2px; }
.admin-photo-actions button:hover { color: var(--ink); text-decoration: underline; }
.admin-photo-actions .is-danger { color: var(--red); }
.admin-photo.is-busy { opacity: 0.5; pointer-events: none; }
.admin-empty-photos { grid-column: 1 / -1; font-family: var(--font-serif); font-size: 19px; color: var(--ink-soft); }
.admin-slot { display: grid; grid-template-columns: 180px 1fr; gap: 16px; align-items: center; margin-top: 6px; }
.admin-slot img { width: 180px; aspect-ratio: 3 / 2; object-fit: cover; background: var(--coal-lift); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1); }
.admin-slot .pill { cursor: pointer; box-shadow: none; }
.admin-slot small { display: block; margin-top: 8px; font-size: 12.5px; color: var(--ink-faint); }
.admin-form .jf-list { display: grid; gap: 8px; }
.admin-form textarea { min-height: 96px; }
.admin-move { display: inline-flex; gap: 4px; }
.admin-move button { width: 32px; height: 32px; border: 1px solid var(--hairline); border-radius: var(--radius); color: var(--ink-soft); }
.admin-move button:hover { background: var(--paper); color: var(--ink); }
@media (max-width: 560px) { .admin-slot { grid-template-columns: 1fr; } .admin-slot img { width: 100%; } .kinds.is-row { grid-template-columns: 1fr; } }
.admin-field-hint { display: block; margin-top: 6px; font-size: 12.5px; color: var(--ink-faint); text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-weight: 500; }
/* admin fixes: hidden file inputs stay hidden inside forms; "Replace photo" is a button; radio boxes are round */
.joinform input[hidden] { display: none; }
.admin-slot label.admin-replace { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 18px; margin-top: 8px; border-radius: var(--radius); background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--coal); font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 11.5px; cursor: pointer; }
.admin-slot label.admin-replace:hover { background: var(--coal); color: var(--white); }
.kind input[type="radio"] + span::before { border-radius: 50%; }
.kind input[type="radio"]:checked + span::before { background-image: none; box-shadow: inset 0 0 0 5px var(--white); }
/* tick boxes and round buttons in the admin forms (the public contact form has none) */
.kinds { display: grid; gap: 8px; }
.kind { position: relative; display: block; }
.kind input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kind span { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 10px 16px; border: 2px solid var(--hairline); color: var(--ink); font-weight: 600; font-size: 15px; line-height: 1.35; cursor: pointer; transition: background 0.2s, border-color 0.2s; user-select: none; text-transform: none; letter-spacing: 0; font-family: var(--font-body); }
.kind span::before { content: ""; flex: 0 0 24px; height: 24px; border: 2px solid var(--coal); border-radius: var(--radius); background: var(--white) center / 16px no-repeat; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; }
.kind:hover span { border-color: var(--gold-deep); }
.kind input:checked + span { border-color: var(--gold-deep); background: var(--gold-pale); }
.kind input:checked + span::before { background-color: var(--coal); border-color: var(--coal); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.kind input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.kind input[type="radio"] + span::before { border-radius: 50%; }
.kind input[type="radio"]:checked + span::before { background-image: none; box-shadow: inset 0 0 0 5px var(--white); }