/* JIU-JITSU UNIVERSITY (UNDERHOOK, demo 16, used as it is): the header, the footer and the course pages (/, /courses, /course, /sets, /videos, /instructor).
   Loaded after skin.css on every page. uh.js builds the header and the footer; the pages build their own bodies. */
:root {
  --uh-bg: #f6f5f2; --uh-bar: #ffffff; --uh-panel: #eceae5; --uh-line: #dedcd6; --uh-text: #17171a; --uh-dim: #6b6b73; --uh-mute: #8f8f97;
  --uh-green: #0a8a57; --uh-tag: #12dc90; --uh-ink: #0b2a1e; --uh-font: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --uh-display: 'Archivo', 'Public Sans', 'Helvetica Neue', Arial, sans-serif; --uh-word: var(--uh-display); --uh-pad: max(64px, calc((100vw - 1280px) / 2)); --uh-head: 72px;
}
@media (max-width: 767px) { :root { --uh-pad: 16px; } }

/* ---- the old navigation of every inherited page gives way to the one header ---- */
/* the theme's own header and footer give way to UNDERHOOK's, only on the pages that carry it (not the admin) */
body.uh-on .site-nav, body.uh-on .hd, body.uh-on .top-bar, body.uh-on .pc-nav, body.uh-on .mobile-header, body.uh-on .sidebar, body.uh-on .bottom-nav, body.uh-on .mm-panel, body.uh-on .mm-burger, body.uh-on .to-top, body.uh-on .sidebar-overlay, body.uh-on .site-footer, body.uh-on footer.ft, body.uh-on .ft, body.uh-on > footer:not(.uh-foot) { display: none !important; }
body.uh-on .main-content { margin-left: 0 !important; }
body.uh-on { padding-top: var(--uh-head) !important; }
@media (max-width: 767px) { body.uh-on { padding-bottom: 64px !important; } }

.uh-head { border-bottom: 1px solid var(--uh-line); position: fixed; top: 0; left: 0; right: 0; z-index: 1200; height: var(--uh-head); background: var(--uh-bar); display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--uh-pad); font-family: var(--uh-font); box-sizing: border-box; }
.uh-word { font-family: var(--uh-word); font-style: normal; font-weight: 800; font-size: 21px; letter-spacing: -.02em; line-height: 1; color: var(--uh-text) !important; text-decoration: none !important; text-transform: uppercase; }
.uh-nav { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; }
.uh-nav a, .uh-tabs a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; font-size: 15px; font-weight: 500; color: var(--uh-text) !important; text-decoration: none !important; white-space: nowrap; }
.uh-nav a svg, .uh-tabs a svg { width: 19px; height: 19px; flex: none; }
.uh-nav a:hover { color: var(--uh-dim) !important; }
.uh-nav a.on, .uh-tabs a.on { color: var(--uh-green) !important; }
.uh-acct { display: flex; align-items: center; gap: 4px; }
.uh-acct a { padding: 8px 16px; font-size: 16px; color: var(--uh-text) !important; text-decoration: none !important; white-space: nowrap; }
.uh-acct a:last-child { padding-right: 0; }
.uh-acct a:hover { color: var(--uh-dim) !important; }
.uh-acct .uh-me { display: inline-flex; align-items: center; gap: 10px; }
.uh-acct .uh-me i { width: 30px; height: 30px; border-radius: 50%; background: var(--uh-text); color: #fff !important; color: var(--uh-text); font-style: normal; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.uh-tabs { display: none; }
@media (max-width: 1023px) {
  /* no bar at the bottom: the menu is a second line of the header, words only */
  :root { --uh-head: 108px; }
  .uh-head { flex-wrap: wrap; align-content: center; row-gap: 6px; padding-top: 8px; padding-bottom: 4px; }
  .uh-nav { position: static; transform: none; order: 3; width: 100%; margin-left: -12px; overflow-x: auto; }
  .uh-nav a { padding: 6px 12px; font-size: 14px; }
  .uh-nav a svg { display: none; }
  .uh-tabs { display: none !important; }
  .uh-head .uh-word { font-size: 17px; white-space: nowrap; }
  .uh-acct a { padding: 8px 10px; font-size: 15px; }
}
.uh-foot { border: 0 !important; margin: 0 !important; display: flex !important; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 16px; padding: 32px var(--uh-pad) 40px; font-family: var(--uh-font); font-size: 14px; color: var(--uh-text); background: var(--uh-bg); }
.uh-foot a { color: var(--uh-text) !important; text-decoration: none !important; }
.uh-foot a:hover { text-decoration: underline !important; }
.uh-foot nav { display: flex; gap: 16px; flex-wrap: wrap; }

/* ---- pages written for this site ---- */
body.uh-page { margin: 0; background: var(--uh-bg) !important; color: var(--uh-text); font-family: var(--uh-font) !important; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
body.uh-page * { box-sizing: border-box; }
body.uh-page a { color: inherit; text-decoration: none; }
body.uh-page button { font-family: inherit; }
.uh-main { min-height: calc(100vh - var(--uh-head) - 110px); }
.uh-top { padding: 80px var(--uh-pad) 0; }
.uh-top h1, body.uh-page h1.uh-h1 { font-family: var(--uh-font) !important; font-size: 50px !important; font-weight: 700 !important; letter-spacing: -.01em !important; line-height: 1.1 !important; margin: 0; color: var(--uh-text); text-transform: none !important; }
@media (max-width: 767px) { .uh-top { padding-top: 40px; } .uh-top h1, body.uh-page h1.uh-h1 { font-size: 34px !important; } }
.uh-tools { display: flex; justify-content: flex-end; padding: 24px var(--uh-pad) 0; }
.uh-search { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--uh-text); font-size: 16px; cursor: pointer; padding: 6px 0; }
.uh-search svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.uh-searchbox { display: none; padding: 8px var(--uh-pad) 0; }
.uh-searchbox.open { display: block; }
.uh-searchbox input { color-scheme: light; width: 100%; max-width: 560px; margin-left: auto; display: block; background: var(--uh-panel) !important; border: 1px solid var(--uh-line) !important; border-radius: 4px !important; color: var(--uh-text) !important; font: 400 16px var(--uh-font); padding: 12px 14px; }
.uh-searchbox input:focus { border-color: var(--uh-text) !important; }
.uh-filters { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px var(--uh-pad) 0; position: relative; }
.uh-filters > svg { width: 14px; height: 14px; fill: none; stroke: var(--uh-text); stroke-width: 1.8; margin-right: -8px; }
.uh-filter { position: relative; }
.uh-filter > button { background: none; border: 0; color: var(--uh-text); font-size: 16px; padding: 6px 0; cursor: pointer; }
.uh-filter > button.set { color: var(--uh-green); }
.uh-filter ul { display: none; position: absolute; top: 34px; left: -12px; z-index: 30; min-width: 190px; margin: 0; padding: 6px 0; list-style: none; background: var(--uh-panel); border-radius: 4px; box-shadow: 0 12px 32px rgba(0,0,0,.5); }
.uh-filter.open ul { display: block; }
.uh-filter li { padding: 9px 16px; font-size: 15px; cursor: pointer; color: var(--uh-text); white-space: nowrap; }
.uh-filter li:hover { background: #e6e4de; }
.uh-filter li.on { color: var(--uh-green); }
.uh-chips { display: flex; gap: 8px; flex-wrap: wrap; padding: 16px var(--uh-pad) 0; }
.uh-chip { background: var(--uh-panel); border: 0; border-radius: 10px !important; color: var(--uh-text); font-size: 16px; padding: 9px 17px; cursor: pointer; }
.uh-chip:hover { background: #e6e4de; }
.uh-chip.on { background: var(--uh-text); color: var(--uh-bg); }

/* rows of course covers that scroll sideways */
.uh-rows { padding: 96px 0 40px; }
.uh-row { margin: 0 0 64px; }
.uh-row-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 var(--uh-pad); margin: 0 0 30px; }
.uh-row-head h2 { font-family: var(--uh-font) !important; font-size: 24px !important; font-weight: 700 !important; letter-spacing: 0 !important; margin: 0; color: var(--uh-text); text-transform: none !important; line-height: 1.2 !important; }
.uh-row-head a { font-size: 14px; color: var(--uh-text); text-decoration: underline !important; text-underline-offset: 3px; white-space: nowrap; }
.uh-rail { position: relative; }
.uh-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 var(--uh-pad); padding: 0 var(--uh-pad); scrollbar-width: none; scroll-behavior: smooth; }
.uh-track::-webkit-scrollbar { display: none; }
/* a card keeps its size: a wider window shows more cards, it does not blow them up (the row starts at the page edge and runs to the window edge) */
.uh-track > * { flex: 0 0 300px; scroll-snap-align: start; min-width: 0; }
@media (max-width: 1023px) { .uh-track > * { flex-basis: 280px; } }
@media (max-width: 767px) { .uh-track { padding: 0 var(--uh-pad); scroll-padding: 0 var(--uh-pad); } .uh-track > * { flex-basis: 86%; } }
.uh-arrow { position: absolute; top: 0; bottom: 0; width: 36px; border: 0; padding: 0; cursor: pointer; background: linear-gradient(90deg, rgba(246,245,242,0), rgba(246,245,242,.94) 55%); display: flex; align-items: center; justify-content: center; z-index: 5; }
.uh-arrow.next { right: 0; } .uh-arrow.prev { left: 0; transform: scaleX(-1); }
.uh-arrow[hidden] { display: none; }
.uh-arrow::before { content: ""; border-left: 12px solid var(--uh-text); border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
@media (max-width: 767px) { .uh-arrow { width: 24px; } .uh-arrow.prev { display: none; } }

.uh-card { display: block; color: var(--uh-text); }
.uh-cover { position: relative; display: block; aspect-ratio: 1 / .64; border-radius: 4px; overflow: hidden; background: var(--uh-panel); }
.uh-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.uh-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0) 34%, rgba(0,0,0,0) 62%, rgba(0,0,0,.6)); opacity: 0; transition: opacity .15s; }
.uh-card:hover .uh-cover::after, .uh-card:focus-visible .uh-cover::after { opacity: 1; }
.uh-lock { position: absolute; top: 9px; left: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 16px; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.uh-lock svg { width: 17px; height: 17px; stroke: #fff; flex: none; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.uh-lock span, .uh-len { opacity: 0; transition: opacity .15s; }
.uh-card:hover .uh-lock span, .uh-card:hover .uh-len, .uh-card:focus-visible .uh-lock span, .uh-card:focus-visible .uh-len { opacity: 1; }
.uh-card:hover .uh-tag.new { opacity: 0; }
.uh-len { position: absolute; left: 9px; bottom: 9px; z-index: 2; color: #fff; font-size: 16px; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.uh-tag { display: inline-block; background: var(--uh-tag); color: var(--uh-ink); font-size: 12px; line-height: 1; padding: 4px 7px; border-radius: 3px; font-weight: 400; letter-spacing: 0; }
.uh-cover .uh-tag { position: absolute; top: 8px; right: 8px; z-index: 2; transition: opacity .15s; }
.uh-prog { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--uh-tag); z-index: 3; }
.uh-card b { display: block; font-weight: 400; font-size: 16px; margin: 16px 0 0; color: var(--uh-text); line-height: 1.35; }
.uh-card small { display: block; font-size: 14px; color: var(--uh-dim); line-height: 1.65; }
.uh-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 16px; padding: 40px var(--uh-pad) 80px; }
@media (max-width: 1191px) { .uh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .uh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .uh-grid { grid-template-columns: 1fr; } }
.uh-empty { padding: 60px var(--uh-pad) 120px; color: var(--uh-dim); }
.uh-back { display: inline-block; margin: 0 0 14px; font-size: 14px; color: var(--uh-dim) !important; text-decoration: underline !important; text-underline-offset: 3px; }

/* the video wall */
.uh-vgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px 16px; padding: 40px var(--uh-pad) 80px; }
@media (max-width: 1191px) { .uh-vgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .uh-vgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .uh-vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; } }
.uh-video { display: block; }
.uh-video .uh-cover { aspect-ratio: 16 / 9; border-radius: 0; }
.uh-video .uh-lock { top: 10px; left: 12px; } .uh-video .uh-lock svg { width: 20px; height: 20px; }
.uh-dur { position: absolute; left: 6px; bottom: 6px; z-index: 2; background: rgba(13,13,14,.82); color: #fff; font-size: 13px; line-height: 1; padding: 3px 5px; border-radius: 3px; }
.uh-rail .uh-video .uh-cover { border-radius: 4px; }
.uh-video b { display: block; font-weight: 400; font-size: 14px; line-height: 1.45; margin: 12px 0 4px; color: var(--uh-text); }
.uh-video small { display: block; font-size: 12px; color: var(--uh-dim); line-height: 1.7; }
.uh-more { display: block; margin: -40px auto 80px; }

/* buttons */
.uh-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 16px; border-radius: 4px; border: 1px solid var(--uh-text); background: var(--uh-text); color: #fff !important; font: 400 14px/1.2 var(--uh-font); letter-spacing: .03em; cursor: pointer; text-decoration: none !important; white-space: nowrap; }
.uh-btn:hover { background: #33333a; border-color: #33333a; }
.uh-btn.caps { text-transform: uppercase; letter-spacing: .05em; }
.uh-btn.green { color: var(--uh-ink) !important; background: var(--uh-tag); border-color: var(--uh-tag); width: 100%; font-size: 15px; }
.uh-btn.green:hover { background: #2ff5a8; border-color: #2ff5a8; }
.uh-btn.line { background: transparent; color: var(--uh-text) !important; border-color: var(--uh-mute); }
.uh-btn.line:hover { border-color: var(--uh-text); background: transparent; }

/* one course: a narrow column */
.uh-col { max-width: 760px; margin: 0 auto; padding: 60px 16px 80px; }
.uh-kick { display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--uh-text); margin: 0 0 8px; }
.uh-kick svg { width: 17px; height: 17px; }
.uh-col h1 { font-family: var(--uh-font) !important; font-size: 56px !important; font-weight: 700 !important; letter-spacing: -.01em !important; line-height: 1.08 !important; margin: 0 0 34px; color: var(--uh-text); text-transform: none !important; }
@media (max-width: 767px) { .uh-col { padding-top: 32px; } .uh-col h1 { font-size: 36px !important; margin-bottom: 24px; } }
.uh-by { font-size: 16px; color: var(--uh-text); margin: 0; } .uh-by a:hover { text-decoration: underline; }
.uh-meta { font-size: 14px; color: var(--uh-dim); margin: 4px 0 46px; }
.uh-film { border-radius: 0 !important; position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; margin: 48px 0 0; background: #000; overflow: hidden; border: 0; padding: 0; cursor: pointer; }
.uh-film img, .uh-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.uh-film .tri { position: absolute; left: 50%; top: 50%; transform: translate(-40%, -50%); border-left: 46px solid #fff; border-top: 28px solid transparent; border-bottom: 28px solid transparent; filter: drop-shadow(0 2px 10px rgba(0,0,0,.4)); }
.uh-film .dot { position: absolute; right: 16px; bottom: 16px; width: 40px; height: 40px; border-radius: 50%; background: rgba(25,25,28,.9); display: flex; align-items: center; justify-content: center; }
.uh-film .dot::before { content: ""; margin-left: 3px; border-left: 12px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.uh-film.playing .tri, .uh-film.playing .dot { display: none; }
.uh-label { font-size: 14px; font-weight: 700; color: var(--uh-dim); margin: 56px 0 18px; display: flex; align-items: center; gap: 8px; }
.uh-col p.uh-body { font-size: 15px; line-height: 1.7; color: var(--uh-text); margin: 0; }
.uh-chapter { border-bottom: 1px solid var(--uh-line); }
.uh-chapter > button { width: 100%; display: flex; align-items: center; gap: 22px; background: none; border: 0; padding: 19px 8px 19px 10px; color: var(--uh-text); font-size: 15px; cursor: pointer; text-align: left; }
.uh-chapter > button svg { width: 12px; height: 8px; fill: none; stroke: currentColor; stroke-width: 2; flex: none; transition: transform .15s; }
.uh-chapter.open > button svg { transform: rotate(180deg); }
.uh-chapter > button span { flex: 1; min-width: 0; }
.uh-chapter > button em { font-style: normal; color: var(--uh-dim); white-space: nowrap; }
.uh-chapter > button i { font-style: normal; min-width: 44px; text-align: right; }
.uh-chapter ol { display: none; margin: 0; padding: 0 8px 14px 44px; list-style: none; }
.uh-chapter.open ol { display: block; }
.uh-chapter li a, .uh-chapter li > div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; font-size: 14px; color: var(--uh-dim); }
.uh-chapter li a:hover { color: var(--uh-text); }
.uh-chapter li svg { width: 14px; height: 14px; margin-right: 8px; vertical-align: -1px; }
.uh-rel { display: flex; gap: 16px; align-items: flex-start; padding: 0 8px 22px; }
.uh-rel img { width: 72px; height: 54px; object-fit: cover; flex: none; display: block; }
.uh-rel b { display: block; font-size: 15px; font-weight: 700; color: var(--uh-text); line-height: 1.3; }
.uh-rel span { display: block; font-size: 15px; color: var(--uh-dim); line-height: 1.4; margin-top: 4px; }
.uh-rel:hover b { text-decoration: underline; }
.uh-rule { display: flex; align-items: center; gap: 12px; margin: 20px 0 0; color: var(--uh-dim); }
.uh-rule::before, .uh-rule::after { content: ""; flex: 1; height: 1px; background: var(--uh-line); }
.uh-rule svg { width: 12px; height: 8px; fill: none; stroke: currentColor; stroke-width: 2; }
.uh-who img { width: 58px; height: 58px; border-radius: 50% !important; object-fit: cover; display: block; margin: 0 0 22px; }
.uh-who b { display: block; font-size: 20px; font-weight: 700; margin: 0 0 4px; }
.uh-who p { font-size: 15px; line-height: 1.65; margin: 0; color: var(--uh-text); }

/* sets */
.uh-sets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 64px var(--uh-pad) 80px; }
@media (max-width: 1191px) { .uh-sets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px) { .uh-sets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .uh-sets { grid-template-columns: 1fr; padding-top: 32px; } }
.uh-set { display: block; background: var(--uh-panel); border-radius: 6px; overflow: hidden; }
.uh-set .pic { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.uh-set .pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.uh-set:hover .pic img { transform: scale(1.03); }
.uh-set .pic::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(180deg, rgba(39,38,41,0), var(--uh-panel)); }
.uh-set .txt { padding: 0 8px 18px; margin-top: -2px; position: relative; }
.uh-set small { display: block; font-size: 14px; color: var(--uh-dim); }
.uh-set b { display: block; font-size: 16px; font-weight: 700; margin: 8px 0 26px; }
.uh-set .ct { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--uh-dim); }
.uh-set .ct svg { width: 16px; height: 16px; fill: currentColor; } .uh-set .ct strong { color: var(--uh-text); font-weight: 400; }

/* the front door */
.uh-hero { min-height: calc(100vh - var(--uh-head)); padding: 80px var(--uh-pad) 96px; display: flex; flex-direction: column; justify-content: space-between; }
.uh-hero .uh-word { display: none; }
.uh-hero h1 { font-family: var(--uh-font) !important; font-size: clamp(34px, 4.1vw, 59px) !important; font-weight: 700 !important; letter-spacing: -.005em !important; line-height: 1.08 !important; margin: 80px 0 48px; max-width: 1040px; color: var(--uh-text); text-transform: none !important; }
.uh-hero .uh-btn { width: 260px; max-width: 100%; }
.uh-hero .fine { font-size: 15px; color: var(--uh-dim); line-height: 1.65; margin: 18px 0 0; }
.uh-hero .fine a { color: var(--uh-dim); text-decoration: underline !important; text-underline-offset: 3px; }
.uh-gate { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; align-items: center; min-height: 0; padding-top: 32px; padding-bottom: 0; }
.uh-gate > div { grid-column: 1; grid-row: 1; padding-bottom: 40px; }
.uh-gate-art { grid-column: 2; grid-row: 1; align-self: end; height: clamp(440px, 46vw, 640px); width: auto; max-width: 100%; justify-self: center; object-fit: contain; border-radius: 0 !important; }
.uh-hero.uh-gate h1 { margin-top: 0; }
.uh-gate-lead { font-size: 18px; color: var(--uh-dim); margin: 0; line-height: 1.5; }
.uh-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 56px var(--uh-pad) 96px; }
.uh-way { display: block; padding: 32px; background: #fff; border: 1px solid var(--uh-line); border-radius: 6px; color: var(--uh-text) !important; text-decoration: none !important; transition: border-color .15s; }
.uh-way:hover { border-color: var(--uh-text); }
.uh-way .k { display: block; font: 600 12px/1 var(--uh-font); letter-spacing: .14em; text-transform: uppercase; color: var(--uh-dim); margin-bottom: 16px; }
.uh-way b { display: block; font: 800 28px/1.1 var(--uh-display); letter-spacing: -.01em; margin-bottom: 12px; }
.uh-way p { margin: 0 0 22px; font-size: 16px; line-height: 1.5; color: var(--uh-dim); }
.uh-way .go { font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.uh-btn.green.uh-mem-cta { width: 320px; max-width: 100%; margin-top: 28px; padding: 12px 28px; }
@media (max-width: 767px) { .uh-gate { display: flex; justify-content: flex-start; padding-top: 24px; padding-bottom: 40px; } .uh-gate > div { padding-bottom: 0; } .uh-gate-art { height: auto; width: 78%; max-width: none; margin: 0 auto; display: block; } .uh-hero.uh-gate h1 { margin: 24px 0 16px; } .uh-ways { grid-template-columns: 1fr; gap: 14px; } .uh-way { padding: 24px; } .uh-way b { font-size: 24px; } }
@media (max-width: 767px) { .uh-hero { padding-top: 40px; padding-bottom: 56px; } .uh-hero .uh-word { font-size: 44px; } .uh-hero h1 { margin-top: 56px; } }
.uh-sec { padding: 80px var(--uh-pad); }
.uh-dot { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--uh-text); margin: 0 0 12px; }
.uh-dot::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--uh-tag); }
.uh-sec h2 { font-family: var(--uh-font) !important; font-size: 44px !important; font-weight: 700 !important; letter-spacing: -.005em !important; line-height: 1.15 !important; margin: 0 0 22px; color: var(--uh-text); text-transform: none !important; }
.uh-sec p.lead { font-size: 21px; line-height: 1.36; color: var(--uh-dim); max-width: 520px; margin: 0; }
@media (max-width: 767px) { .uh-sec { padding: 56px var(--uh-pad); } .uh-sec h2 { font-size: 32px !important; } .uh-sec p.lead { font-size: 18px; } }
.uh-people { margin: 68px calc(var(--uh-pad) * -1) 0; }
.uh-people .uh-track > * { flex-basis: calc((100% - 16px * 2) / 3.12); }
@media (max-width: 1023px) { .uh-people .uh-track > * { flex-basis: calc((100% - 16px) / 2.1); } }
@media (max-width: 599px) { .uh-people .uh-track > * { flex-basis: 84%; } }
.uh-person { position: relative; display: block; aspect-ratio: 421 / 732; border-radius: 12px; overflow: hidden; background: #000; color: #fff; }
.uh-person img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.uh-person::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,0) 22%, rgba(0,0,0,0) 48%, rgba(0,0,0,.82)); }
.uh-person > * { position: relative; z-index: 2; }
.uh-person .nm { position: absolute; top: 22px; left: 24px; right: 24px; font-size: 30px; font-weight: 700; line-height: 1.15; }
.uh-person .bt { position: absolute; left: 24px; right: 24px; bottom: 24px; }
.uh-person .bt small { display: block; font-size: 14px; margin: 0 0 14px; }
.uh-person .bt strong { display: block; font-size: 32px; font-weight: 700; line-height: 1.3; }
.uh-person .bt .uh-btn { margin-top: 30px; background: #fff; border-color: #fff; color: #17171a !important; }
@media (max-width: 767px) { .uh-person .nm { font-size: 24px; } .uh-person .bt strong { font-size: 24px; } }
.uh-faq { margin-top: 76px; border-top: 1px solid var(--uh-line); }
.uh-faq details { border-bottom: 1px solid var(--uh-line); }
.uh-faq summary { list-style: none; cursor: pointer; font-size: 30px; font-weight: 700; padding: 22px 0 24px; color: var(--uh-text); line-height: 1.25; }
.uh-faq summary::-webkit-details-marker { display: none; }
.uh-faq p { font-size: 18px; line-height: 1.55; color: var(--uh-dim); max-width: 760px; margin: 0 0 28px; }
@media (max-width: 767px) { .uh-faq summary { font-size: 22px; } }
.uh-sample { max-width: 960px; margin: 48px 0 0; }

/* one instructor */
.uh-banner { height: 302px; overflow: hidden; margin-top: calc(var(--uh-head) * -1); }
.uh-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block; border-radius: 0 !important; }
@media (max-width: 767px) { .uh-banner { height: 180px; } }
.uh-prof { display: grid; grid-template-columns: minmax(0, 720px) 360px; justify-content: space-between; gap: 48px; padding: 72px 112px 96px; }
@media (max-width: 1191px) { .uh-prof { padding-left: var(--uh-pad); padding-right: var(--uh-pad); } }
@media (max-width: 1023px) { .uh-prof { grid-template-columns: 1fr; padding-top: 40px; } .uh-prof aside { order: -1; } }
.uh-prof h1 { font-family: var(--uh-font) !important; font-size: 32px !important; font-weight: 700 !important; margin: 0 0 76px; letter-spacing: 0 !important; text-transform: none !important; color: var(--uh-text); line-height: 1.2 !important; }
@media (max-width: 1023px) { .uh-prof h1 { display: none; } }
.uh-ptabs { display: flex; gap: 0; border-bottom: 1px solid var(--uh-line); flex-wrap: wrap; }
.uh-ptabs button { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; padding: 12px 16px; color: var(--uh-text); font-size: 16px; cursor: pointer; }
.uh-ptabs button svg { width: 20px; height: 20px; }
.uh-ptabs button em { font-style: normal; color: var(--uh-dim); }
.uh-ptabs button.on { border-bottom-color: var(--uh-text); }
.uh-plist a { display: flex; gap: 24px; padding: 20px 16px; border-bottom: 1px solid var(--uh-line); }
.uh-plist a:hover { background: #efede8; }
.uh-plist img { width: 128px; height: 128px; object-fit: cover; flex: none; display: block; }
.uh-plist b { display: block; font-size: 16px; font-weight: 400; margin: 2px 0 20px; }
.uh-plist span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 1.45; color: var(--uh-dim); }
.uh-plist small { display: block; font-size: 14px; margin-top: 14px; color: var(--uh-text); }
@media (max-width: 599px) { .uh-plist a { gap: 14px; padding: 16px 0; } .uh-plist img { width: 88px; height: 88px; } .uh-plist b { margin-bottom: 8px; } }
.uh-prof aside img { width: 80px; height: 80px; border-radius: 50% !important; object-fit: cover; display: block; margin: 44px 0 30px; }
@media (max-width: 1023px) { .uh-prof aside img { margin-top: 0; } }
.uh-prof aside b { display: block; font-size: 20px; font-weight: 700; }
.uh-prof aside .at { font-size: 15px; color: var(--uh-text); margin: 2px 0 20px; }
.uh-prof aside .line { font-size: 15px; color: var(--uh-dim); margin: 0 0 28px; line-height: 1.5; }
.uh-prof aside nav a { display: block; padding: 10px 0; border-bottom: 1px solid var(--uh-line); font-size: 16px; }
.uh-prof aside .uh-btn { margin-top: 28px; }
.uh-about { padding: 28px 16px; font-size: 15px; line-height: 1.7; color: var(--uh-text); }

/* [hidden] must win over the display rules above (the Show more button, the poster behind the sample player) */
body.uh-page [hidden], .uh-more[hidden], .uh-film[hidden] { display: none !important; }
/* a phone has no hover: the length and the plan of a course are always shown, and the menus stay inside the screen */
@media (hover: none) { .uh-lock span, .uh-len { opacity: 1; } .uh-cover::after { opacity: 1; } .uh-card .uh-tag.new { opacity: 1 !important; } }
@media (max-width: 767px) { .uh-filters { position: relative; } .uh-filter { position: static; } .uh-filter ul { left: var(--uh-pad); right: var(--uh-pad); top: 100%; } .uh-lock span { font-size: 13px; max-width: 60%; } }
.uh-filter li:focus-visible { outline: 2px solid var(--uh-green); outline-offset: -2px; }
/* headings in the display face; icons are drawn as outlines */
.uh-top h1, body.uh-page h1.uh-h1, .uh-row-head h2, .uh-col h1, .uh-hero h1, .uh-sec h2, .uh-prof h1, .uh-faq summary, .uh-person .nm, .uh-person .bt strong {
  font-family: var(--uh-display) !important; letter-spacing: -.02em !important; }
.uh-top h1, body.uh-page h1.uh-h1, .uh-col h1, .uh-hero h1 { font-weight: 800 !important; }
svg.uh-i { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.uh-cover { box-shadow: 0 1px 2px rgba(23,23,26,.06); }
.uh-chapter > button:hover, .uh-plist a:hover { background: #efede8; }
/* the front door (visitor): a hero, one course opened, two shelves, the instructors, the plans, the questions */
.uh-hero2 { position: relative; height: calc(100vh - var(--uh-head)); min-height: 560px; max-height: 920px; overflow: hidden; background: #cfd3d4; }
.uh-hero2 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; border-radius: 0 !important; transform: translateX(17%) scale(1.12); transform-origin: right center; }
@media (max-width: 767px) { .uh-hero2 img { transform: none; } }
.uh-hero2::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(246,245,242,1) 0%, rgba(246,245,242,1) 9%, rgba(246,245,242,.82) 38%, rgba(246,245,242,0) 74%); }
.uh-hero2 .in { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--uh-pad); max-width: 980px; }
.uh-hero2 h1 { font-family: var(--uh-display) !important; font-size: clamp(40px, 6vw, 88px) !important; font-weight: 800 !important; letter-spacing: -.03em !important; line-height: 1 !important; margin: 0 0 24px; color: var(--uh-text); text-transform: none !important; }
.uh-hero2 p { font-size: 22px; line-height: 1.4; color: #3a3a40; margin: 0 0 36px; max-width: 560px; }
.uh-hero2 .go { display: flex; gap: 12px; flex-wrap: wrap; }
.uh-hero2 .uh-btn { min-width: 200px; min-height: 52px; font-size: 15px; }
@media (max-width: 767px) { .uh-hero2::after { background: linear-gradient(180deg, rgba(246,245,242,.9), rgba(246,245,242,.8)); } .uh-hero2 p { font-size: 17px; } }
.uh-tight { padding-top: 56px; padding-bottom: 56px; }
.uh-feature .head h2 { margin-bottom: 8px; } .uh-feature .uh-meta { margin: 0 0 28px; }
.uh-feature .cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.uh-feature .uh-film { margin: 0; border-radius: 6px !important; }
.uh-feature .side { border-top: 1px solid var(--uh-line); }
.uh-feature .side .uh-btn { margin-top: 20px; }
.uh-feature .uh-chapter li .uh-tag { margin-right: 6px; vertical-align: 1px; }
@media (max-width: 1023px) { .uh-feature .cols { grid-template-columns: 1fr; } }
.uh-home-rows { padding: 24px 0 0; } .uh-home-rows .uh-row { margin-bottom: 48px; }
.uh-faces { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 16px; margin-top: 36px; }
@media (max-width: 899px) { .uh-faces { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.uh-faces a { display: block; } .uh-faces img { width: 96px; height: 96px; border-radius: 50% !important; object-fit: cover; display: block; margin: 0 0 14px; }
.uh-faces b { display: block; font-size: 17px; font-weight: 600; } .uh-faces small { display: block; font-size: 14px; color: var(--uh-dim); margin-top: 2px; }
.uh-faces a:hover b { text-decoration: underline; }
.uh-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 360px)); gap: 16px; margin-top: 36px; }
@media (max-width: 767px) { .uh-plans { grid-template-columns: 1fr; } }
.uh-plan-card { background: #fff; border: 1px solid var(--uh-line); border-radius: 8px; padding: 28px; }
.uh-plan-card b { display: block; font-family: var(--uh-display); font-size: 20px; font-weight: 700; }
.uh-plan-card strong { display: block; font-family: var(--uh-display); font-size: 44px; font-weight: 800; letter-spacing: -.02em; margin: 6px 0 14px; }
.uh-plan-card strong small { font-family: var(--uh-font); font-size: 15px; font-weight: 400; color: var(--uh-dim); letter-spacing: 0; }
.uh-plan-card ul { list-style: none; margin: 0 0 24px; padding: 0; } .uh-plan-card li { font-size: 15px; padding: 7px 0; border-top: 1px solid var(--uh-line); color: var(--uh-text); }
.uh-plan-card .uh-btn { width: 100%; }
.uh-tight .uh-faq { margin-top: 36px; }

/* product page: the lesson-count badge sits on the dark cover, keep it readable */
.hero-badge.accent { color: #fff !important; border-color: rgba(255,255,255,.7) !important; background: transparent !important; }

/* On Demand (JIU-JITSU UNIVERSITY): the wall of covers, the locked lessons on a course, the checkout */
.uh-od-lead { font-size: 17px; color: var(--uh-dim); margin: 14px 0 0; max-width: 620px; line-height: 1.5; }
.uh-od { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 40px 24px; padding: 48px var(--uh-pad) 96px; }
.uh-jacket { display: block; color: var(--uh-text) !important; text-decoration: none !important; }
.uh-jacket .art { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #17171a; border-radius: 4px; }
.uh-jacket .art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; transition: transform .25s; }
.uh-jacket:hover .art img { transform: scale(1.03); }
.uh-jacket .art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,23,26,.55) 0%, rgba(23,23,26,0) 30%, rgba(23,23,26,0) 45%, rgba(23,23,26,.88) 100%); }
.uh-jacket .by { position: absolute; z-index: 2; top: 14px; left: 16px; right: 16px; font: 600 11px/1.2 var(--uh-font); letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.uh-jacket .nm { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px; font: 800 clamp(17px, 1.6vw, 23px)/1.02 var(--uh-display); letter-spacing: -.01em; text-transform: uppercase; color: #fff; }
.uh-jacket .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 12px; font-size: 14px; color: var(--uh-dim); }
.uh-jacket .row b { flex: none; font-weight: 600; font-size: 16px; color: var(--uh-text); }
.uh-jacket.small { width: 132px; flex: none; }
.uh-jacket.small .by { font-size: 8px; top: 9px; left: 10px; }
.uh-jacket.small .nm { font-size: 12px; left: 10px; right: 10px; bottom: 10px; }
@media (max-width: 767px) { .uh-od { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; padding-top: 32px; } .uh-jacket .nm { font-size: 15px; left: 12px; right: 12px; bottom: 12px; } .uh-jacket .by { font-size: 9px; left: 12px; top: 11px; } }

.uh-buyrow { display: grid; gap: 10px; }
.uh-buy { width: 100%; min-height: 48px; font-size: 15px; gap: 14px; }
.uh-buy b { font-weight: 600; }
.uh-buynote { margin: 0 0 8px; font-size: 14px; color: var(--uh-dim); text-align: center; }
.uh-bought { background: var(--uh-tag); color: var(--uh-ink); padding: 12px 16px; border-radius: 4px; margin: 0 0 24px; font-size: 15px; }
.uh-chapter li .uh-lesson { width: 100%; display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; font: inherit; font-size: 14px; background: none; border: 0; color: var(--uh-text); cursor: pointer; text-align: left; }
.uh-chapter li .uh-lesson:hover { color: var(--uh-green); }
.uh-chapter li .uh-lesson .uh-tag { margin-left: 8px; }
.uh-chapter li .uh-locked { opacity: .42; }
.uh-chapter li .uh-i { width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px; fill: none; stroke: currentColor; stroke-width: 1.6; }

.uh-co { max-width: 980px; margin: 0 auto; padding: 48px var(--uh-pad) 96px; }
.uh-co h1 { font: 800 44px/1.1 var(--uh-display) !important; margin: 18px 0 32px; color: var(--uh-text); }
.uh-co-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.uh-co-item { display: flex; gap: 20px; padding: 24px; background: #fff; border: 1px solid var(--uh-line); border-radius: 6px; }
.uh-co-item b { display: block; font-size: 18px; margin-bottom: 6px; }
.uh-co-item p { margin: 0 0 6px; font-size: 14px; color: var(--uh-dim); line-height: 1.5; }
.uh-co-pay { padding: 24px; background: #fff; border: 1px solid var(--uh-line); border-radius: 6px; display: grid; gap: 12px; }
.uh-co-pay dl { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin: 0 0 8px; font-size: 15px; }
.uh-co-pay dt, .uh-co-pay dd { margin: 0; }
.uh-co-pay .tot { border-top: 1px solid var(--uh-line); padding-top: 12px; font-weight: 700; font-size: 18px; }
.uh-co-pay .uh-btn { width: 100%; min-height: 48px; }
.uh-co-pay .fine { margin: 4px 0 0; font-size: 13px; color: var(--uh-dim); line-height: 1.5; }
@media (max-width: 767px) { .uh-co-grid { grid-template-columns: 1fr; } .uh-co h1 { font-size: 34px !important; } .uh-co-item { padding: 16px; gap: 14px; } .uh-jacket.small { width: 104px; } }

/* green badges on the covers: always shown (not only on hover) */
.uh-tags { position: absolute; z-index: 3; top: 10px; right: 10px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 80%; }
.uh-tags .uh-tag { position: static; font-size: 12px; font-weight: 600; padding: 5px 8px; opacity: 1 !important; }
.uh-jacket .uh-tags { top: auto; bottom: auto; top: 36px; left: 16px; right: auto; justify-content: flex-start; }
.uh-jacket.small .uh-tags { display: none; }
.uh-nav a.on { color: var(--uh-tag) !important; }
body.uh-on { padding-bottom: 96px !important; }
.uh-head .uh-word { display: inline-flex; align-items: center; gap: 4px; }
.uh-crest { width: 44px; height: 44px; flex: none; margin-left: -3px; border-radius: 0 !important; }
@media (max-width: 767px) { .uh-crest { width: 28px; height: 28px; margin-left: -2px; } .uh-head .uh-word { gap: 3px; font-size: 15px !important; } .uh-head .uh-acct a { padding: 8px 7px; font-size: 14px; } .uh-head .uh-acct a:last-child { padding-right: 0; } }
.uh-od .uh-jacket { background: #fff; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 2px rgba(23,23,26,.06); }
.uh-od .uh-jacket .art { border-radius: 0; }
.uh-od .uh-jacket .row { padding: 14px 16px 16px; }
@media (max-width: 379px) { .uh-head .uh-word { font-size: 13px !important; } .uh-crest { width: 24px; height: 24px; } .uh-head .uh-acct a { padding: 8px 5px; font-size: 13px; } }

/* Membership: the two plans, each with its own button; the recommended one is the dark card */
.uh-mp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; align-items: start; padding: 24px var(--uh-pad) 120px; }
.uh-mp-head h2 { font: 800 44px/1.05 var(--uh-display) !important; letter-spacing: -.02em; margin: 0 0 14px; color: var(--uh-text); }
.uh-mp-head p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--uh-dim); max-width: 320px; }
.uh-mp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.uh-mp-card { display: flex; flex-direction: column; padding: 32px; background: #fff; border: 1px solid var(--uh-line); border-radius: 8px; }
.uh-mp-card .top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.uh-mp-card .top b { font: 700 20px/1.2 var(--uh-display); }
.uh-mp-card .pr { font: 800 52px/1 var(--uh-display); letter-spacing: -.03em; margin: 18px 0 22px; color: inherit; }
.uh-mp-card .pr span { font: 400 15px var(--uh-font); letter-spacing: 0; opacity: .6; }
.uh-mp-card ul { list-style: none; margin: 0 0 28px; padding: 0; flex: 1; }
.uh-mp-card li { font-size: 15px; padding: 11px 0; border-top: 1px solid var(--uh-line); }
.uh-mp-card .uh-btn { width: 100%; min-height: 48px; }
.uh-mp-card.best { background: var(--uh-text); color: #fff; border-color: var(--uh-text); }
.uh-mp-card.best li { border-top-color: rgba(255,255,255,.16); }
@media (max-width: 1023px) { .uh-mp { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 767px) { .uh-mp-grid { grid-template-columns: 1fr; } .uh-mp-card { padding: 24px; } .uh-mp-head h2 { font-size: 34px !important; } }
/* the front door: the words sit lower, level with the figure's chest */
.uh-gate > div { align-self: end; padding-bottom: 40px; }
@media (max-width: 767px) { .uh-gate > div { padding-bottom: 0; } }
.uh-mp-card li { color: var(--uh-text); }
.uh-mp-card.best li, .uh-mp-card.best .top b, .uh-mp-card.best .pr { color: #fff; }
@media (min-width: 768px) { .uh-head .uh-word { font-size: 17px; gap: 3px; } .uh-crest { width: 34px; height: 34px; } }
/* the join page: its column starts at the same edge as the header (not a narrow centred column) */
body.uh-on .page:has(> .jwrap) { padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; }
body.uh-on .jwrap { max-width: none !important; margin: 0 !important; padding: 40px var(--uh-pad) 0 !important; box-sizing: border-box; }
body.uh-on .jwrap .form { max-width: 640px; }

/* the menu sits on the right, beside the account links (not centred, away from the wordmark) */
@media (min-width: 1024px) { .uh-nav { position: static; transform: none; margin-left: auto; margin-right: 20px; } }


html.uh-ja { --uh-font: 'Public Sans', 'Zen Kaku Gothic New', 'Hiragino Sans', sans-serif; --uh-display: 'Archivo', 'Zen Kaku Gothic New', 'Hiragino Sans', sans-serif; }
html.uh-ja body { font-family: var(--uh-font); word-break: auto-phrase; line-break: strict; }
html.uh-ja h1, html.uh-ja h2, html.uh-ja .uh-way b, html.uh-ja .uh-jacket .nm, html.uh-ja .uh-mp-card .top b { font-weight: 900 !important; letter-spacing: .01em !important; word-break: auto-phrase; }
html.uh-ja .uh-hero.uh-gate h1 { line-height: 1.25 !important; }
html.uh-ja .uh-jacket .nm { line-height: 1.2; }