:root{--jfh-red:#d20000;--jfh-black:#050505;--jfh-gray:#272727;--jfh-line:#3b3b3b}
.jfh-menu,.jfh-menu *,.menu-reveal{box-sizing:border-box}
.prototype-page{margin:0;background:#ececec;color:#111;font-family:Roboto,Arial,sans-serif}
.prototype-note{padding:7px 12px;background:#7c1111;color:#fff;text-align:center;font-size:10px;font-weight:700;letter-spacing:.1em}
.page-banner{height:112px;max-width:1200px;margin:auto;padding:20px 28px;display:flex;align-items:center;gap:18px;background:#fff;color:#777;font-size:13px}
.page-banner img{width:54px}

.jfh-menu{position:sticky;top:0;z-index:9999;width:100%;height:50px;margin:0;background:var(--jfh-black);color:#fff;box-shadow:0 3px 10px #0004;font-family:Roboto,Arial,sans-serif;transition:transform .22s ease}
.jfh-menu.is-hidden{transform:translateY(-105%)}
.jfh-menu a{color:#fff;text-decoration:none}
.jfh-menu input[type="checkbox"],.jfh-menu .toggle{display:none}
.jfh-menu>.menu{display:flex;float:none;align-items:stretch;justify-content:center;width:min(1200px,100%);height:50px;margin:0 auto;padding:0;list-style:none}
.jfh-menu ul{list-style:none}
.jfh-menu>.menu>li{position:relative;display:block;float:none;margin:0;background:var(--jfh-black)}
.jfh-menu>.menu>li>a{height:50px;display:flex;align-items:center;padding:0 14px;border-bottom:3px solid transparent;color:#fff;font-size:13px;font-weight:400;line-height:47px;white-space:nowrap;text-rendering:optimizeLegibility;transition:background-color .12s,border-color .12s}
.jfh-menu>.menu>li:first-child>a{padding-left:10px;padding-right:13px}
.jfh-menu>.menu>li:first-child img{width:auto;height:28px;margin:0 9px 0 0}
.jfh-menu>.menu>li:nth-child(2)>a>img{margin-left:0!important;margin-right:0!important}
.jfh-menu li>a:after{content:"";width:0;height:0;margin:2px 0 0 6px;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:4px solid #747474;transform:none}
.jfh-menu li>a:only-child:after{display:none}
.jfh-menu>.menu>li:hover>a:after,.jfh-menu>.menu>li:focus-within>a:after{border-top-color:#cfcfcf}
.jfh-menu>.menu>li:hover>a,.jfh-menu>.menu>li:focus-within>a{background:#1e1e1e;border-bottom-color:var(--jfh-red)}
.jfh-menu ul ul{position:absolute;top:50px;left:0;display:none;width:248px;margin:0;padding:7px 0;background:var(--jfh-gray);border-top:3px solid var(--jfh-red);border-radius:0 0 4px 4px;box-shadow:0 14px 28px #0008}
.jfh-menu li.is-hover-open>ul,.jfh-menu li:focus-within>ul{display:block}
.jfh-menu ul ul li{position:relative;display:block;width:100%;margin:0;background:transparent}
.jfh-menu ul ul a{min-height:40px;display:flex;align-items:center;justify-content:space-between;padding:9px 15px;border-left:3px solid transparent;color:#f4f4f4;font-size:12.5px;line-height:1.25}
.jfh-menu ul ul a:hover,.jfh-menu ul ul a:focus{background:#353535;border-left-color:var(--jfh-red);outline:0}
.jfh-menu ul ul li>a:after{flex:0 0 auto;content:"";margin:0 3px 0 10px;border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;border-left:4px solid #929292;border-right:0;transform:none}
.jfh-menu ul ul li:hover>a:after,.jfh-menu ul ul li:focus-within>a:after{border-left-color:#d6d6d6}
.jfh-menu ul ul li>a:only-child:after{display:none}
.jfh-menu ul ul ul{top:-7px;left:calc(100% - 3px)}
.jfh-menu ul.last{right:0;left:auto}
.jfh-menu ul.last ul{right:100%;left:auto}
.jfh-menu>.menu>li>ul.can-scroll{max-height:calc(100vh - 64px);overflow-y:auto;overflow-x:hidden}
.jfh-menu>.menu>li.is-current>a{background:#1c1c1c;border-bottom-color:var(--jfh-red)}
.jfh-menu>.menu>li.mobile-search-item{display:none}
.jfh-menu .visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.jfh-menu>.menu>li.desktop-search-item{display:block}
.desktop-search-toggle{width:48px;height:50px;display:grid;place-items:center;padding:0;border:0;border-bottom:3px solid transparent;background:#050505;cursor:pointer}
.desktop-search-toggle:hover,.desktop-search-toggle:focus-visible,.desktop-search-toggle[aria-expanded="true"]{background:#1e1e1e;border-bottom-color:var(--jfh-red);outline:0}
.desktop-search-toggle span{position:relative;width:14px;height:14px;display:block;border:2px solid #ddd;border-radius:50%}
.desktop-search-toggle span:after{position:absolute;right:-6px;bottom:-4px;width:7px;height:2px;background:#ddd;content:"";transform:rotate(45deg);transform-origin:left center}
.desktop-search-panel{position:absolute;top:50px;left:50%;width:min(1200px,100%);display:none;padding:14px 18px;background:#171717;color:#fff;box-shadow:0 12px 24px #0007;transform:translateX(-50%)}
.desktop-search-panel.is-open{display:block}
.desktop-search-panel label{display:block;margin-bottom:8px;color:#bbb;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.desktop-search-panel div{display:flex}.desktop-search-panel input{min-width:0;flex:1;height:41px;padding:0 12px;border:0;border-radius:3px 0 0 3px;font:13px Roboto,Arial,sans-serif}.desktop-search-panel button{height:41px;padding:0 18px;border:0;border-radius:0 3px 3px 0;background:var(--jfh-red);color:#fff;font-weight:700;cursor:pointer}
.menu-backdrop{display:none}
.menu-reveal{position:fixed;z-index:10000;top:0;right:14px;height:40px;display:flex;align-items:center;gap:7px;padding:0 11px;border:0;border-radius:0 0 5px 5px;background:#111;color:#fff;box-shadow:0 4px 12px #0006;cursor:pointer;transform:translateY(-115%);opacity:0;pointer-events:none;transition:transform .2s ease,opacity .2s ease}
.menu-reveal.is-visible{transform:translateY(0);opacity:1;pointer-events:auto}
.menu-reveal:hover,.menu-reveal:focus-visible{background:var(--jfh-red);outline:2px solid #fff;outline-offset:-3px}
.menu-reveal img{width:25px;height:auto}.menu-reveal span{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}.menu-reveal b{font-size:13px}

.sample-page{max-width:1200px;min-height:1200px;margin:auto;background:#fff}
.sample-feature{padding:62px 7%;background:#171717;color:#fff}
.sample-feature>span{color:#f04b4b;font-size:11px;font-weight:800;letter-spacing:.12em}
.sample-feature h1{margin:13px 0 10px;font-size:clamp(30px,4vw,48px)}
.sample-feature p{max-width:690px;color:#ccc;line-height:1.6}
.sample-columns{display:grid;grid-template-columns:1.3fr 1fr;gap:28px;padding:36px}
.sample-columns h2{padding-bottom:12px;border-bottom:5px solid #111}
.placeholder-grid{height:280px;background:repeating-linear-gradient(90deg,#ddd 0,#ddd 31%,transparent 31%,transparent 34%)}
.placeholder-lines{height:280px;background:repeating-linear-gradient(#ddd 0,#ddd 16px,transparent 16px,transparent 39px)}
.sample-filler{height:480px;margin:0 36px;background:#f3f3f3}

.jfh-menu>.menu>li.mid-more-item{display:none}
.jfh-menu>.menu>li.mid-more-item>a{cursor:pointer}
@media(min-width:761px) and (max-width:1340px){
  .jfh-menu>.menu>li:nth-child(9),
  .jfh-menu>.menu>li:nth-child(11),
  .jfh-menu>.menu>li:nth-child(12),
  .jfh-menu>.menu>li:nth-child(13),
  .jfh-menu>.menu>li:nth-child(14){display:none}
  .jfh-menu>.menu>li.mid-more-item{display:block}
  .jfh-menu>.menu>li>a{padding-left:12px;padding-right:12px}
  .jfh-menu>.menu>li.mid-more-item>ul{right:0;left:auto}
  .jfh-menu>.menu>li.mid-more-item ul ul{right:calc(100% - 3px);left:auto}
}
.jfh-menu .mobile-category-home{display:none!important}
@media(max-width:760px){
  .page-banner{height:82px}
  .jfh-menu{height:54px;overflow:visible}
  .jfh-menu .menu-bar{height:54px;display:flex;align-items:center;padding:0 17px;background:var(--jfh-black);color:#fff;font-size:13px;font-weight:700;cursor:pointer}
  .jfh-menu .menu-bar img:first-child{width:35px;height:auto;margin:0 7px 0 0}
  .jfh-menu .menu-bar .mobile-open-icon{width:19px;height:auto;margin-left:5px;opacity:.85}
  .jfh-menu .menu-bar:hover{background:#171717}
  .jfh-menu>.menu{position:absolute;top:54px;left:0;display:none;width:100%;height:calc(100dvh - 54px);max-height:calc(100dvh - 54px);overflow-y:auto;overflow-anchor:none;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scroll-padding-bottom:calc(88px + env(safe-area-inset-bottom));margin:0;padding:6px 0 calc(88px + env(safe-area-inset-bottom));background:#0b0b0b;border-top:1px solid #292929;box-shadow:0 16px 28px #0008}
  .jfh-menu>#drop:checked~.menu{display:block}
  .jfh-menu>.menu>li{width:100%;background:transparent}
  .jfh-menu>.menu>li>a{display:none}
  .jfh-menu>.menu>li:first-child>a,.jfh-menu>.menu>li>a:only-child{min-height:47px;height:auto;display:flex;padding:13px 18px;border:0;border-left:4px solid transparent;font-size:14px;line-height:1.25}
  .jfh-menu>.menu>li:first-child img{display:none}
  .jfh-menu .toggle{position:relative;min-height:47px;display:flex;align-items:center;padding:13px 52px 13px 18px;border-left:4px solid transparent;background:#0b0b0b;color:#fff;font-size:14px;font-weight:600;line-height:1.25;cursor:pointer}
  .jfh-menu .toggle:not(.menu-bar):after{content:"+";position:absolute;right:19px;color:#aaa;font-size:22px;font-weight:300}
  .jfh-menu [id^=drop]:checked+ul,.jfh-menu li>input:checked+ul{display:block}
  .jfh-menu li>input:checked~.toggle:after{content:"-"}
  .jfh-menu li>.toggle:hover,.jfh-menu li>.toggle:focus,.jfh-menu>.menu>li>a:hover{background:#202020;border-left-color:var(--jfh-red);outline:0}
  .jfh-menu ul ul{position:static;display:none;width:100%;margin:0;padding:0;background:#202020;border:0;border-radius:0;box-shadow:none}
  .jfh-menu li.is-hover-open>ul,.jfh-menu li:focus-within>ul{display:none}
  .jfh-menu li>input:checked+ul{display:block}
  .jfh-menu ul ul li{background:transparent}
  .jfh-menu ul ul a{min-height:44px;padding:12px 22px 12px 35px;border-left:4px solid transparent;font-size:13px}
  .jfh-menu ul ul .toggle{padding-left:35px;background:#202020;font-size:13px}
  .jfh-menu ul ul ul{position:static;background:#2b2b2b}
  .jfh-menu ul ul ul a{padding-left:53px}
  .jfh-menu ul.last{right:auto}
  .jfh-menu>.menu>li>ul.can-scroll{max-height:none;overflow:visible}
  .jfh-menu>.menu>li.mobile-search-item{display:block;padding:13px 16px 15px;border-bottom:1px solid #2d2d2d;background:#151515}
  .jfh-menu>.menu>li.desktop-search-item,.desktop-search-panel{display:none!important}
  .mobile-menu-search label{display:block;margin-bottom:7px;color:#bdbdbd;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
  .mobile-menu-search div{display:flex}
  .mobile-menu-search input{min-width:0;flex:1;height:44px;padding:0 11px;border:1px solid #454545;border-right:0;border-radius:3px 0 0 3px;background:#fff;color:#111;font-size:16px}
  .mobile-menu-search button{height:44px;padding:0 13px;border:0;border-radius:0 3px 3px 0;background:var(--jfh-red);color:#fff;font-size:13px;font-weight:700}
  .jfh-menu li.has-mobile-submenu{position:relative;min-height:47px}
  .jfh-menu li.has-mobile-submenu>.toggle{width:100%;padding-right:52px}
  .jfh-menu li.has-mobile-submenu>a.mobile-category-link{display:none!important}
  .jfh-menu li.has-mobile-submenu>ul{clear:both}
  .jfh-menu .mobile-category-home{display:block!important}
  .jfh-menu .mobile-category-home>a{font-weight:700;color:#fff;background:#262626}
  .jfh-menu>.menu>li.is-current>.toggle,.jfh-menu>.menu>li.is-current>a:only-child{border-left-color:var(--jfh-red);background:#202020}
  .menu-backdrop.is-open{position:fixed;z-index:9998;inset:0;display:block;background:#0008}
  .sample-columns{grid-template-columns:1fr}
}
@media(max-width:420px){
  .prototype-note{font-size:8px}
  .page-banner{padding:14px}.page-banner span{display:none}
  .sample-feature{padding:45px 22px}.sample-columns{padding:22px}.sample-filler{margin:0 22px}
  .menu-reveal{right:8px;height:42px;padding:0 9px}.menu-reveal span{display:none}.menu-reveal img{width:27px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
