[data-twostep-nav]{--cubic-default:cubic-bezier(.625, .05, 0, 1);--animation-ease:.2s ease;--duration-default:.5s;--duration-default-long:.75s;--duration-default-half:.25s;--animation-default:var(--duration-default) var(--cubic-default);--animation-default-long:var(--duration-default-long) var(--cubic-default);--animation-default-half:var(--duration-default-half) var(--cubic-default);--tsn-black:#020202;--tsn-white:#f1f1f1;--tsn-line:#02020226;--tsn-muted:#02020299;font-size:1rem}.twostep-nav__fixed{z-index:100;padding:1.25em;padding-top:calc(1.25em + env(safe-area-inset-top));pointer-events:none;transition:transform .35s cubic-bezier(.2,.7,0,1);position:fixed;inset:0 0 auto}.twostep-nav__width{max-width:48em;margin:0 auto}.twostep-nav__bar{max-width:25em;color:var(--tsn-black);pointer-events:auto;transition:max-width var(--animation-default-long) .2s;border-radius:1.25em;margin:0 auto;position:relative}[data-nav-status=active] .twostep-nav__bar{transition:max-width var(--animation-default) 0s;max-width:100%}.twostep-nav__bar__bg{border-radius:inherit;background-color:var(--tsn-white);transition:background-color var(--animation-ease);position:absolute;inset:0}.twostep-nav__back{z-index:-1;transition:all var(--animation-default);pointer-events:none;position:absolute;inset:0}[data-nav-status=active] .twostep-nav__back{inset:-.25em}.twostep-nav__back-bg{background-color:#0000;border-radius:1.5em;width:100%;height:100%}[data-nav-status=active] .twostep-nav__back-bg{transition:background-color var(--animation-ease);background-color:#f1f1f126}.twostep-nav__bg{z-index:99;opacity:0;visibility:hidden;transition:opacity var(--animation-default), visibility var(--animation-default);background-color:#020202b3;position:fixed;inset:0}[data-nav-status=active] .twostep-nav__bg{opacity:1;visibility:visible}.twostep-nav__top{justify-content:space-between;align-items:center;padding:.75em 1em;display:flex;position:relative}.twostep-nav__logo{letter-spacing:.02em;color:inherit;font-size:1.1em;font-weight:700;text-decoration:none}.twostep-nav__top-line{background-color:var(--tsn-line);height:1px;transition:all var(--animation-default) 0s;opacity:0;position:absolute;inset:auto 1em -.5em}[data-nav-status=active] .twostep-nav__top-line{transition:all var(--animation-default) .1s;opacity:1}.twostep-nav__toggle{width:2em;height:2em;color:inherit;cursor:pointer;background:0 0;border:none;place-items:center;padding:0;display:grid;position:relative}.twostep-nav__toggle-bar{width:1.25em;height:2px;transition:transform var(--animation-default);background-color:currentColor;position:absolute;transform:translateY(-.25em)rotate(.001deg)}.twostep-nav__toggle:hover .twostep-nav__toggle-bar{transform:translateY(.25em)rotate(.001deg)}.twostep-nav__toggle .twostep-nav__toggle-bar:nth-child(2){transform:translateY(.15em)rotate(.001deg)}.twostep-nav__toggle:hover .twostep-nav__toggle-bar:nth-child(2){transform:translateY(-.15em)rotate(.001deg)}[data-nav-status=active] .twostep-nav__toggle .twostep-nav__toggle-bar{transform:translateY(0)rotate(45deg)}[data-nav-status=active] .twostep-nav__toggle .twostep-nav__toggle-bar:nth-child(2){transform:translateY(0)rotate(-45deg)}.twostep-nav__bottom{transition:grid-template-rows var(--animation-default) 0s;grid-template-rows:0fr;display:grid}[data-nav-status=active] .twostep-nav__bottom{transition:grid-template-rows var(--animation-default-long) .25s;grid-template-rows:1fr}.twostep-nav__bottom-inner{min-height:0;overflow:hidden}.twostep-nav__bottom-row{grid-template-columns:1.15fr 1fr;gap:2em;padding:1.25em 1em 1em;display:grid}.twostep-nav__bottom-row>*{transition:all var(--animation-default) 0s;opacity:0;transform:translateY(2em)}.twostep-nav__bottom-row>:nth-child(2){transition-delay:75ms}[data-nav-status=active] .twostep-nav__bottom-row>*{transition:all var(--animation-default-long) .5s;opacity:1;transform:translateY(0)}[data-nav-status=active] .twostep-nav__bottom-row>:nth-child(2){transition-delay:.575s}.twostep-nav__col{flex-direction:column;justify-content:space-between;gap:1.5em;min-height:100%;display:flex}.twostep-nav__links{flex-direction:column;gap:.35em;margin:0;padding:0;list-style:none;display:flex}.twostep-nav__links a{color:inherit;transition:opacity var(--animation-ease);font-size:1.6em;font-weight:600;line-height:1.25;text-decoration:none}.twostep-nav__links a:hover{opacity:.6}.twostep-nav__socials{flex-wrap:wrap;gap:1.25em;margin:0;padding:0;list-style:none;display:flex}.twostep-nav__socials a{color:var(--tsn-muted);transition:color var(--animation-ease);font-size:.9em;text-decoration:none}.twostep-nav__socials a:hover{color:var(--tsn-black)}.twostep-nav__image{aspect-ratio:1/1.05;border-radius:1em;position:relative;overflow:hidden}.twostep-nav__image img{object-fit:cover;width:100%;height:100%;display:block;position:absolute;inset:0}.twostep-nav__image-cta{background-color:var(--tsn-black);color:var(--tsn-white);white-space:nowrap;transition:transform var(--animation-ease);border-radius:10em;align-items:center;gap:.4em;padding:.45em 1em;font-size:.8em;text-decoration:none;display:inline-flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.twostep-nav__image-cta:hover{transform:translate(-50%,-50%)scale(1.06)}[data-nav-tucked=true] .twostep-nav__fixed{transform:translateY(calc(-100% - 1em))}@media (prefers-reduced-motion:reduce){.twostep-nav__fixed{transition:none}}@media screen and (max-width:767px){.twostep-nav__fixed{padding:1em}.twostep-nav__bar{max-width:14em}[data-nav-status=active] .twostep-nav__bar{max-width:100%}.twostep-nav__top-line{inset:auto 1em -.5em}[data-nav-status=active] .twostep-nav__top-line{transition:all var(--animation-default) .2s;inset:auto 0 -.5em}[data-nav-status=active] .twostep-nav__back{inset:-1.25em}.twostep-nav__bottom{transition:grid-template-rows var(--animation-default) 0s, transform var(--animation-default) 0s;transform:translateY(-.625em)}[data-nav-status=active] .twostep-nav__bottom{transition:grid-template-rows var(--animation-default-long) .25s, transform var(--animation-default) .25s;transform:translateY(0)}.twostep-nav__bottom-row{grid-template-columns:1fr;gap:1.5em}.twostep-nav__links a{font-size:1.4em}.twostep-nav__image{aspect-ratio:16/10}}
