/* Kit: menu mechanics from website/MENUS.md section 5, with mo- names so a site's old header styles and script are left alone.
   The site's motion.css sets the look by overriding the --mo-nav-* values and the .mo-* rules. */
:root { --mo-nav-h: 76px; --mo-nav-h-float: 56px; --mo-nav-gap: 12px; --mo-nav-max: 1080px; --mo-nav-move: 320ms cubic-bezier(.2,.7,.2,1);
  --mo-nav-bg: #fff; --mo-nav-ink: #111; --mo-nav-line: rgba(0,0,0,.14); --mo-nav-shadow: 0 10px 30px rgba(0,0,0,.14); --mo-nav-radius: 999px; --mo-nav-pad: clamp(16px, 4vw, 40px); }
html { scroll-padding-top: calc(var(--mo-nav-h) + 16px); }
.mo-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 64px; pointer-events: none; }
.mo-hdr { position: sticky; top: 0; z-index: 60; display: flow-root; height: var(--mo-nav-h); padding: 0 var(--mo-nav-gap); pointer-events: none; }
.mo-bar { pointer-events: auto; position: relative; display: flex; align-items: center; gap: 16px; height: var(--mo-nav-h); max-width: 100%; margin: 0 auto; padding: 0 calc(var(--mo-nav-pad) - var(--mo-nav-gap));
  color: var(--mo-nav-ink); border: 1px solid transparent; border-radius: 0; background: transparent;
  transition: height var(--mo-nav-move), max-width var(--mo-nav-move), margin-top var(--mo-nav-move), border-radius var(--mo-nav-move), padding var(--mo-nav-move), background-color 200ms linear, border-color 200ms linear, box-shadow 200ms linear; }
.mo-scrolled .mo-bar { height: var(--mo-nav-h-float); max-width: var(--mo-nav-max); margin-top: var(--mo-nav-gap); padding: 0 12px 0 18px; border-color: var(--mo-nav-line); border-radius: var(--mo-nav-radius); background: var(--mo-nav-bg); box-shadow: var(--mo-nav-shadow); }
.mo-hidden .mo-hdr { transform: translateY(calc(-100% - 24px)); }
.mo-hdr { transition: transform 340ms cubic-bezier(.2,.7,.2,1); }
.mo-brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; flex: none; }
.mo-nav { margin-left: auto; }
.mo-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.mo-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; color: inherit; background: none; border: 0; font: inherit; text-decoration: none; cursor: pointer; white-space: nowrap; }
.mo-has-sub { position: relative; }
.mo-has-sub > .mo-link::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 150ms; }
.mo-has-sub > .mo-link[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.mo-sub { position: absolute; top: calc(100% + 10px); left: 0; min-width: 260px; display: none; padding: 8px; background: var(--mo-nav-bg); color: var(--mo-nav-ink); border: 1px solid var(--mo-nav-line); border-radius: 14px; box-shadow: var(--mo-nav-shadow); }
.mo-link[aria-expanded="true"] + .mo-sub { display: block; }
.mo-sub a { display: grid; gap: 2px; padding: 10px 12px; min-height: 44px; color: inherit; text-decoration: none; border-radius: 8px; }
.mo-sub a small { opacity: .75; font-weight: 400; }
.mo-cta { flex: none; white-space: nowrap; }
.mo-menu-btn { display: none; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; font: inherit; color: inherit; background: none; border: 1px solid currentColor; border-radius: var(--mo-nav-radius); cursor: pointer; flex: none; }
@media (max-width: 860px) {
  :root { --mo-nav-h: 64px; --mo-nav-h-float: 52px; --mo-nav-gap: 8px; }
  .mo-menu-btn { display: inline-flex; }
  .mo-nav { position: absolute; top: calc(100% + 8px); left: 0; right: 0; margin: 0; display: none; max-height: calc(100dvh - var(--mo-nav-h) - 32px); overflow-y: auto; padding: 8px; background: var(--mo-nav-bg); color: var(--mo-nav-ink); border: 1px solid var(--mo-nav-line); border-radius: 18px; box-shadow: var(--mo-nav-shadow); }
  .mo-nav-open .mo-nav { display: block; }
  .mo-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .mo-link { width: 100%; min-height: 48px; justify-content: space-between; }
  .mo-sub { position: static; display: none; min-width: 0; border: 0; box-shadow: none; padding: 0 0 8px 12px; background: none; }
  .mo-bar { gap: 8px; }
  .mo-bar .mo-cta { margin-left: auto; }
  .mo-nav-open .mo-bar, .mo-bar { }
}
@media (max-width: 380px) { .mo-menu-btn svg { display: none; } .mo-menu-btn { padding: 0 10px; } }
@media (prefers-reduced-motion: reduce) { .mo-bar, .mo-hdr { transition: none; } }
/* Kit: pinned hero mechanics. The site's motion.css animates the hero's parts with var(--mo-pin), which runs 0 to 1. */
.mo-pin { --mo-pin: 0; --mo-pin-extra: 90vh; --mo-pin-offset: 0px; position: relative; }
/* the room to scroll through has to be real height (a sticky element cannot travel into its parent's padding) */
.mo-pin.is-pinned { height: calc(var(--mo-pin-h, 100vh) + var(--mo-pin-extra)); }
.mo-pin.is-pinned > :first-child { position: sticky; top: var(--mo-pin-top, 0px); }
/* Iron Bluff Athletic: motion in the site's own language. A fight-night poster going up on concrete:
   things slam in sideways with no bounce, headlines and photos are pasted on in one hard wipe,
   and the big poster words slide in from the edge they bleed off (the same move as IRON / BLUFF on load). */
.mo-ready .mo { opacity: 0; transform: translateX(-36px); transition: opacity .12s linear, transform .5s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--mo-i, 0) * 70ms); }
.mo-ready .mo.in { opacity: 1; transform: none; }

/* headlines: wiped on from the left, like a strip of poster being rolled down flat */
.mo-ready h2.mo { opacity: 1; transform: translateX(-.25em); clip-path: inset(-.2em 100% -.2em -.2em); transition: clip-path .55s cubic-bezier(.16, 1, .3, 1), transform .55s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--mo-i, 0) * 70ms); }
.mo-ready h2.mo.in { transform: none; clip-path: inset(-.2em); }

/* photos and the map: the frame drops open from its top rule */
.mo-ready .frame.mo { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path .7s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--mo-i, 0) * 70ms); }
.mo-ready .frame.mo.in { clip-path: inset(0); }

/* cards and tickets: stamped up from below */
.mo-ready .next-card.mo, .mo-ready .plan.mo, .mo-ready .bring-col.mo, .mo-ready .ticket.mo, .mo-ready .plans-cta.mo, .mo-ready .table-scroll.mo, .mo-ready .foot-col.mo, .mo-ready .foot-fine.mo, .mo-ready .mo-card.mo { transform: translateY(44px); }
.mo-ready .next-card.mo.in, .mo-ready .plan.mo.in, .mo-ready .bring-col.mo.in, .mo-ready .ticket.mo.in, .mo-ready .plans-cta.mo.in, .mo-ready .table-scroll.mo.in, .mo-ready .foot-col.mo.in, .mo-ready .foot-fine.mo.in, .mo-ready .mo-card.mo.in { transform: none; }

/* the big poster words follow the headline beside them in from their own edge (their boxes already clip) */
.mo-ready .band-word, .mo-ready .coach-word, .mo-ready .foot-word { transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
.mo-ready .band:has(h2.mo:not(.in)) .band-word, .mo-ready .coach:has(h2.mo:not(.in)) .coach-word.bill-word--r { transform: translateX(16%); }
.mo-ready .coach:has(h2.mo:not(.in)) .coach-word.bill-word--l, .mo-ready .foot-fine.mo:not(.in) + .foot-word { transform: translateX(-16%); }

/* The fight card: four duotone cut-outs that link to the main pages. Built like the site's own class cards:
   white tiles, ink rules, no radius, no shadow. */
.mo-band { padding: var(--s6) 0; }
.mo-band--home { border-bottom: var(--rule-xl) solid var(--ink); }
.mo-band--page { border-top: var(--rule-xl) solid var(--ink); }
.coaches + .mo-band--page { border-top: 0; }
.mo-round { display: block; height: var(--rule-xl); margin-bottom: var(--s4); background: var(--ink); }
.mo-round::after { content: ""; display: block; height: 100%; background: var(--ultra); transform-origin: 0 50%; transform: scaleX(min(1, calc(var(--mo-p, 1) * 1.7))); }
.mo-card { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--rule); background: var(--ink); border: var(--rule) solid var(--ink); }
.mo-item { position: relative; display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); background: var(--white); color: var(--ink); text-decoration: none; overflow: hidden; }
.mo-ico { display: block; width: clamp(88px, 13vw, 184px); margin-bottom: var(--s3); }
.mo-ico > span { display: block; }
.mo-ico--swing > span { transform-origin: 50% 8%; }
.mo-ico img { width: 100%; height: auto; transition: transform .28s cubic-bezier(.16, 1, .3, 1); }
.mo-name { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 1; }
.mo-item small { display: block; font: 600 .9375rem/1.4 var(--text); }
.mo-item::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--rule-xl); background: var(--ultra); transform: scaleX(0); transform-origin: 0 50%; transition: transform .28s cubic-bezier(.16, 1, .3, 1); }
.mo-item:hover::after, .mo-item:focus-visible::after { transform: scaleX(1); }
.mo-item:hover .mo-name, .mo-item:focus-visible .mo-name { color: var(--ultra); }
.mo-item:hover img, .mo-item:focus-visible img { transform: translateX(10px) rotate(-5deg) scale(1.08); }
.mo-item:focus-visible { outline: 3px solid var(--ultra); outline-offset: -9px; }

/* the cut-outs land one after another, a little too big, then sit */
.mo-ready .mo-ico.mo { transform: scale(1.35) rotate(-6deg); transition: opacity .1s linear, transform .45s cubic-bezier(.16, 1, .3, 1); }
.mo-ready .mo-ico.mo.in { transform: none; }
.mo-ready .mo-item:nth-child(1) .mo-ico { transition-delay: 150ms; }
.mo-ready .mo-item:nth-child(2) .mo-ico { transition-delay: 240ms; }
.mo-ready .mo-item:nth-child(3) .mo-ico { transition-delay: 330ms; }
.mo-ready .mo-item:nth-child(4) .mo-ico { transition-delay: 420ms; }

@media (max-width: 1099px) { .mo-card { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 759px) {
  .mo-item { padding: var(--s3); }
  .mo-ico { width: 88px; margin-bottom: var(--s2); }
  .mo-name { font-size: clamp(1.125rem, 6vw, 1.75rem); }
  .mo-item small { font-size: .875rem; }
  .mo-ready .mo { transform: translateX(-20px); }
}

/* ---- Menu: a bold poster bar. Across the top it is the site's own header (concrete, one thick ink rule) set in heavy Anton capitals,
   cut into squared cells; the current page carries an underline bar. After the first scroll it lifts off as a white squared block with a
   thick ink outline. No radius, no shadow. On a phone the links open as a full-screen ultramarine sheet of poster type. ---- */
:root { --mo-nav-h: 76px; --mo-nav-h-float: 60px; --mo-nav-gap: 12px; --mo-nav-max: 1120px; --mo-nav-bg: var(--white); --mo-nav-ink: var(--ink); --mo-nav-line: var(--ink); --mo-nav-shadow: none; --mo-nav-radius: 0; --mo-nav-pad: var(--gut); }
.mo-hdr { padding: 0; transition: padding var(--mo-nav-move); }
.mo-bar { gap: 0; padding: 0 0 0 var(--gut); background: var(--concrete); border: 0 solid var(--ink); border-bottom-width: var(--rule-xl); box-shadow: none;
  transition: height var(--mo-nav-move), max-width var(--mo-nav-move), margin-top var(--mo-nav-move), padding var(--mo-nav-move), border-width var(--mo-nav-move), background-color .2s linear; }
html.mo-scrolled .mo-hdr { padding: 0 var(--mo-nav-gap); }
html.mo-scrolled .mo-bar { padding: 0 0 0 var(--s3); border-width: var(--rule) var(--rule) var(--rule-xl); background: var(--white); box-shadow: none; }
.mo-brand { align-self: stretch; align-items: baseline; align-content: center; flex-wrap: wrap; gap: .35em; padding-right: var(--s3); }
.mo-brand .brand-word { transition: color .15s linear; }
.mo-brand:hover .brand-word { color: var(--ultra); }
.mo-nav, .mo-nav > ul { align-self: stretch; }
.mo-nav > ul { height: 100%; gap: 0; }
.mo-nav > ul > li { display: flex; align-self: stretch; }
.mo-link { position: relative; height: 100%; padding: 0 clamp(8px, 1.1vw, 16px); font: 400 clamp(1.125rem, 1.55vw, 1.375rem)/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.mo-link::after { content: ""; position: absolute; left: clamp(8px, 1.1vw, 16px); right: clamp(8px, 1.1vw, 16px); bottom: 0; height: 7px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform .15s cubic-bezier(.16, 1, .3, 1); }
.mo-link:hover { text-decoration: none; }
.mo-link:hover::after, .mo-link:focus-visible::after { transform: scaleX(1); }
.mo-link[aria-current="page"]::after { transform: scaleX(1); background: var(--ultra); }
.mo-bar :focus-visible { outline: 3px solid var(--ultra); outline-offset: -6px; }
.mo-bar .mo-cta { align-self: stretch; min-height: 0; margin-left: var(--s3); padding: 0 1.1em; border: 0; border-left: var(--rule) solid var(--ink); font-size: clamp(1.125rem, 1.6vw, 1.375rem); transition: background-color .15s linear; }
.mo-bar .mo-cta:focus-visible { outline-color: var(--white); }
.mo-bar .mo-cta[aria-current="page"] { background: var(--ink); }
.mo-menu-btn { align-self: stretch; min-height: 0; gap: 10px; padding: 0 var(--s3); border: 0; border-left: var(--rule) solid var(--ink); border-radius: 0; font: 400 1.25rem/1 var(--display); text-transform: uppercase; letter-spacing: .02em; transition: background-color .15s linear, color .15s linear; }
.mo-menu-btn:hover, .mo-menu-btn[aria-expanded="true"] { background: var(--ink); color: var(--white); }
.mo-menu-btn[aria-expanded="true"]:focus-visible { outline-color: var(--white); }
.mo-bars { position: relative; width: 22px; height: 15px; border-top: 3px solid currentColor; border-bottom: 3px solid currentColor; }
.mo-bars::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; border-top: 3px solid currentColor; }
.mo-menu-btn[aria-expanded="true"] .mo-bars { border-color: transparent; }
.mo-menu-btn[aria-expanded="true"] .mo-bars::after, .mo-menu-btn[aria-expanded="true"] .mo-bars::before { content: ""; position: absolute; left: -2px; right: -2px; top: 3px; border-top: 3px solid var(--white); transform: rotate(45deg); }
.mo-menu-btn[aria-expanded="true"] .mo-bars::before { transform: rotate(-45deg); }
.mo-extra { display: none; }
@media (min-width: 861px) and (max-width: 1080px) { .mo-brand .brand-sub { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
@media (max-width: 860px) {
  :root { --mo-nav-h: 64px; --mo-nav-h-float: 56px; --mo-nav-gap: 8px; }
  .mo-bar .mo-cta { margin-left: auto; font-size: 1.125rem; padding: 0 .9em; }
  .mo-bar .mo-cta + .mo-menu-btn { margin-left: 0; }
  /* the full-screen sheet: it sits behind the bar (which stays put), and the Book and Call dock stays on top of it */
  .mo-nav { position: fixed; inset: 0; z-index: -1; flex-direction: column; justify-content: space-between; gap: var(--s5); max-height: none; margin: 0; padding: calc(var(--mo-nav-h) + var(--s5)) var(--gut) calc(88px + env(safe-area-inset-bottom)); background: var(--ultra); color: var(--white); border: 0; border-radius: 0; box-shadow: none; overflow-y: auto; overscroll-behavior: contain; }
  .mo-nav-open .mo-nav { display: flex; }
  .mo-nav > ul { height: auto; align-self: auto; align-items: flex-start; gap: var(--s2); }
  .mo-nav > ul > li { display: block; }
  .mo-nav .mo-link { width: auto; height: auto; min-height: 48px; padding: 0 0 10px; justify-content: flex-start; font-size: clamp(2.75rem, min(16vw, 13vh), 6rem); line-height: .95; letter-spacing: 0; }
  .mo-nav .mo-link::after { left: 0; right: 0; height: 6px; background: var(--white); }
  .mo-nav .mo-link[aria-current="page"]::after { background: var(--white); }
  .mo-nav :focus-visible { outline-color: var(--white); outline-offset: 3px; }
  .mo-extra { display: flex; flex-direction: column; gap: var(--s2); margin: 0; font-weight: 700; }
  .mo-extra a { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.5rem; font-weight: 800; }
  html.mo-nav-open { overflow: hidden; }
  .mo-nav-open .dock { z-index: 61; }
  /* without scripts there is no Menu button to press, so the links sit in the bar as a second row */
  html:not(.js) .mo-hdr { position: static; height: auto; }
  html:not(.js) .mo-bar { height: auto; min-height: var(--mo-nav-h); flex-wrap: wrap; }
  html:not(.js) .mo-menu-btn { display: none; }
  html:not(.js) .mo-nav { position: static; z-index: auto; display: block; order: 3; width: 100%; padding: 0 0 var(--s2); background: none; color: inherit; overflow: visible; }
  html:not(.js) .mo-nav > ul { flex-direction: row; flex-wrap: wrap; gap: 0 var(--s3); }
  html:not(.js) .mo-nav .mo-link { font-size: 1.25rem; min-height: 44px; padding: 0; }
  html:not(.js) .mo-nav .mo-link::after { background: var(--ink); }
  html:not(.js) .mo-extra { display: none; }
}
@media (max-width: 759px) { .mo-bar .mo-cta { display: none; } .mo-bar .mo-cta + .mo-menu-btn { margin-left: auto; } }
@media (max-width: 379px) { .mo-bar { padding-left: var(--s3); } .mo-brand { padding-right: var(--s2); } }
@media (prefers-reduced-motion: no-preference) and (max-width: 860px) {
  .mo-nav-open .mo-nav { animation: mo-sheet .26s cubic-bezier(.16, 1, .3, 1) both; }
  .mo-nav-open .mo-nav > ul > li, .mo-nav-open .mo-extra { animation: mo-slam .3s cubic-bezier(.16, 1, .3, 1) both; }
  .mo-nav-open .mo-nav > ul > li:nth-child(2) { animation-delay: 40ms; }
  .mo-nav-open .mo-nav > ul > li:nth-child(3) { animation-delay: 80ms; }
  .mo-nav-open .mo-nav > ul > li:nth-child(4) { animation-delay: 120ms; }
  @keyframes mo-sheet { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
  @keyframes mo-slam { from { transform: translateX(-36px); } to { transform: none; } }
}
@media (prefers-reduced-motion: reduce) { .mo-hdr, .mo-bar, .mo-link::after { transition: none; } }

/* ---- Hero: one pinned scroll section. The poster is laid out to fill one screen, then put up as the page scrolls:
   the work lights come up on the ring, the BLUFF strip is pasted across the foot of the photo from the right edge,
   the bill tag is rolled on, and a round bar fills along the bottom rule. Headline, intro and buttons never move. ---- */
.mo-pin { --mo-pin-offset: 76px; --mo-pin-extra: 85vh; }
.mo-pin.is-pinned > .bill--home { position: sticky; }
@media (min-width: 960px) and (min-height: 760px) and (prefers-reduced-motion: no-preference) {
  html.js .mo-pin { --pad: var(--gut); --col: calc(var(--pad) + (100% - 2 * var(--pad) - var(--s5)) * 7 / 12 + var(--s5)); }
  html.js .mo-pin > .bill--home { height: calc(100vh - var(--mo-nav-h)); }
  html.js .mo-pin .home-grid { height: 100%; padding-bottom: var(--s4); row-gap: var(--s3); }
  html.js .mo-pin .w-iron { font-size: clamp(5rem, min(24vw, 32vh), 30rem); }
  html.js .mo-pin .home-copy h1 { font-size: clamp(3rem, min(6.8vw, 10.6vh), 7rem); }
  html.js .mo-pin .lead { margin-top: var(--s3); }
  html.js .mo-pin .home-photo { min-height: 0; max-height: none; }
  html.js .mo-pin .bluff-row { position: absolute; inset: 0; margin: 0; pointer-events: none; }
  html.js .mo-pin .w-bluff { position: absolute; left: var(--col); right: 0; bottom: 0; margin-bottom: 0; padding-top: .05em; font-size: min(19vw, 29vh); background: var(--concrete); border-top: var(--rule-xl) solid var(--ink); border-left: var(--rule) solid var(--ink); }
  html.js .mo-pin .bill-print { left: var(--col); top: var(--s4); bottom: auto; width: max-content; max-width: 22rem; padding: var(--s3); background: var(--concrete); border: var(--rule) solid var(--ink); border-top-width: var(--rule-xl); }
  html.js .mo-pin .bp-big { font-size: clamp(1.75rem, 2.4vw, 2.5rem); }
  html.js .mo-pin .bill-print p:not(.bp-big) { font-size: .9375rem; line-height: 1.45; }
  html.js .mo-pin > .bill--home::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--rule-xl); background: var(--ultra); transform-origin: 0 50%; transform: scaleX(0); }
  /* the moving parts. They also hold their starting pose before the kit script has run, so nothing flickers on load. */
  .mo-pin.is-pinned .home-photo img, html.js:not(.mo-ready):not(.mo-off) .mo-pin .home-photo img { transform: scale(calc(1.16 - var(--mo-pin) * .16)); filter: brightness(calc(.58 + min(1, var(--mo-pin) * 1.5) * .42)); }
  .mo-pin.is-pinned .w-bluff, html.js:not(.mo-ready):not(.mo-off) .mo-pin .w-bluff { transform: translateX(calc((1 - min(1, var(--mo-pin) * 1.3)) * 44%)); }
  .mo-pin.is-pinned .bill-print, html.js:not(.mo-ready):not(.mo-off) .mo-pin .bill-print { clip-path: inset(0 calc((1 - clamp(0, (var(--mo-pin) - .45) * 2.6, 1)) * 100%) 0 0); }
  html.js .mo-pin.is-pinned > .bill--home::after { transform: scaleX(var(--mo-pin)); }
}
@media (min-width: 1500px) and (min-height: 760px) and (prefers-reduced-motion: no-preference) { html.js .mo-pin { --pad: calc((100vw - var(--max)) / 2); } }