/* =========================
   desktop
   ========================= */
@media (min-width: 1181px){
  .service-large{min-height:100%}
}

/* =========================
   tablet / desktop compatto
   ========================= */
@media (max-width: 1180px){
  .hero-grid,
  .split-grid,
  .contact-highlight,
  .quote-layout,
  .contact-layout,
  .footer-grid{
    grid-template-columns:1fr;
  }

  .page-hero-grid{
    grid-template-columns:1fr;
    align-items:start;
  }

  .hero-copy h1,
  .page-hero h1{
    max-width:none;
  }

  .gallery-preview{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .gallery-grid-full{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .contact-grid-mini{
    grid-template-columns:1fr 1fr 1fr;
  }

  .header-inner{
    grid-template-columns:auto auto auto;
  }

  .site-nav{
    grid-column:1 / -1;
    justify-content:flex-start;
  }
}

/* =========================
   tablet
   ========================= */
@media (max-width: 820px){
  :root{
    --container:min(100% - 22px, 100%);
  }

  .header-inner{
    grid-template-columns:1fr auto;
    gap:14px;
  }

  .nav-toggle{
    display:block;
  }

  .nav-cta{
    display:none;
  }

  .site-nav{
    display:none;
    grid-column:1 / -1;
    width:100%;
    padding-top:8px;
    flex-direction:column;
    align-items:stretch;
  }

  .site-nav.is-open{
    display:flex;
  }

  .site-nav a{
    min-height:46px;
    padding:0 14px;
    border-radius:14px;
    border:1px solid var(--stroke);
    background:rgba(255,255,255,.03);
  }

  .nav-toggle.is-open span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
  }

  .nav-toggle.is-open span:nth-child(2){
    opacity:0;
  }

  .nav-toggle.is-open span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
  }

  .cards-3,
  .cards-2,
  .stat-row,
  .contact-grid-mini,
  .metric-grid,
  .form-grid{
    grid-template-columns:1fr;
  }

  .field-full,
  .metric-card-wide{
    grid-column:auto;
  }

  .cta-banner{
    flex-direction:column;
    align-items:flex-start;
  }

  .gallery-grid-full .wide,
  .gallery-grid-full .tall{
    grid-column:auto;
    grid-row:auto;
  }

  .gallery-grid-full{
    grid-auto-rows:220px;
  }

  .hours-list li{
    flex-direction:column;
    align-items:flex-start;
  }

  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
  }

  .lightbox-image{
    min-height:46vh;
  }
}

/* =========================
   mobile
   ========================= */
@media (max-width: 640px){
  :root{
    --container:min(100% - 16px, 100%);
    --header-h:78px;
    --input-h:54px;
  }

  .site-bg{
    background:
      linear-gradient(180deg, rgba(5,5,5,.72) 0%, rgba(5,5,5,.82) 38%, rgba(5,5,5,.94) 100%),
      radial-gradient(circle at 15% 18%, rgba(255,79,79,.14), transparent 25%),
      radial-gradient(circle at 85% 82%, rgba(255,255,255,.08), transparent 18%),
      url("../img/hero.jpg") center center / cover no-repeat;
  }

  .section{padding:20px 0}

  .header-inner{
    min-height:var(--header-h);
    padding:10px 12px;
    border-radius:18px;
  }

  .brand{
    gap:10px;
  }

  .brand-logo{
    width:48px;
    height:48px;
    border-radius:14px;
    font-size:.9rem;
  }

  .brand-text small{
    font-size:.64rem;
    letter-spacing:.1em;
  }

  .brand-text strong{
    font-size:.86rem;
  }

  .hero-copy,
  .contact-copy{
    gap:14px;
  }

  .hero-copy h1,
  .page-hero h1{
    font-size:2.45rem;
    line-height:.96;
  }

  .eyebrow{
    min-height:34px;
    padding:0 12px;
    font-size:.7rem;
  }

  .hero-panel,
  .media-card,
  .map-card,
  .quote-card,
  .contact-panel,
  .service-card,
  .feature-card,
  .review-card,
  .step-card,
  .team-card,
  .info-card,
  .contact-card,
  .business-panel,
  .cta-banner,
  .footer-grid{
    border-radius:20px;
  }

  .hero-panel,
  .media-card,
  .map-card,
  .quote-card{
    padding:12px;
  }

  .hero-visual{
    height:360px;
  }

  .about-visual,
  .story-visual{
    height:300px;
  }

  .hero-card-float{
    left:18px;
    right:18px;
    bottom:18px;
    padding:14px;
    border-radius:16px;
  }

  .gallery-preview,
  .gallery-grid-full{
    grid-template-columns:1fr;
  }

  .gallery-tile{
    min-height:220px;
  }

  .section-head{
    gap:14px;
    flex-direction:column;
    align-items:flex-start;
  }

  .btn{
    width:100%;
  }

  .hero-actions{
    flex-direction:column;
  }

  .quote-card{
    padding:18px;
  }

  .service-thumb,
  .team-photo{
    height:180px;
  }

  .map-card iframe,
  .map-card.large iframe{
    min-height:320px;
  }

  .footer-grid{
    padding:18px;
  }

  .lightbox{
    padding:12px;
  }

  .lightbox-panel{
    padding:12px;
    border-radius:18px;
  }

  .lightbox-image{
    min-height:36vh;
    border-radius:14px;
  }

  .lightbox-close{
    top:12px;
    right:12px;
    width:46px;
    height:46px;
    border-radius:12px;
    font-size:1.7rem;
  }
}

/* nav motion final clean block */
@media (max-width: 820px){
  .header-inner{
    overflow:visible;
  }

  .nav-toggle{
    transition:
      transform .26s ease,
      background .34s ease,
      border-color .34s ease,
      box-shadow .34s ease;
  }

  .nav-toggle:hover{
    transform:translateY(-1px);
  }

  .nav-toggle.is-open{
    background:rgba(255,255,255,.07);
    border-color:rgba(255,255,255,.14);
    box-shadow:
      0 14px 28px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.05);
  }

  .nav-toggle span{
    transition:
      transform .48s cubic-bezier(.22,1,.36,1),
      opacity .24s ease;
  }

  .site-nav{
    display:flex !important;
    grid-column:1 / -1;
    width:100%;
    padding-top:0;
    flex-direction:column;
    align-items:stretch;
    overflow:hidden;
    max-height:0;
    opacity:0;
    transform:translateY(-18px) scale(.985);
    transform-origin:top center;
    pointer-events:none;
    will-change:max-height, opacity, transform;
    transition:
      max-height .80s cubic-bezier(.22,1,.36,1),
      opacity .48s ease,
      transform .80s cubic-bezier(.22,1,.36,1),
      padding-top .48s ease;
  }

  .site-nav.is-open,
  .site-nav.is-closing{
    display:flex !important;
  }

  .site-nav.is-open{
    max-height:560px;
    opacity:1;
    transform:translateY(0) scale(1);
    padding-top:10px;
    pointer-events:auto;
  }

  .site-nav.is-closing{
    max-height:0;
    opacity:0;
    transform:translateY(-12px) scale(.985);
    padding-top:0;
    pointer-events:none;
  }

  .site-nav a{
    opacity:0;
    transform:translateY(-20px);
    filter:blur(8px);
    transition:
      background .18s ease,
      border-color .18s ease;
  }

  .site-nav.is-open a{
    animation:navItemFadeIn .72s cubic-bezier(.22,1,.36,1) both;
  }

  .site-nav.is-open a:nth-child(1){ animation-delay:.06s; }
  .site-nav.is-open a:nth-child(2){ animation-delay:.12s; }
  .site-nav.is-open a:nth-child(3){ animation-delay:.18s; }
  .site-nav.is-open a:nth-child(4){ animation-delay:.24s; }
  .site-nav.is-open a:nth-child(5){ animation-delay:.30s; }
  .site-nav.is-open a:nth-child(6){ animation-delay:.36s; }
  .site-nav.is-open a:nth-child(7){ animation-delay:.42s; }

  @keyframes navItemFadeIn{
    0%{
      opacity:0;
      transform:translateY(-20px);
      filter:blur(8px);
    }
    100%{
      opacity:1;
      transform:translateY(0);
      filter:blur(0);
    }
  }
}

@media (prefers-reduced-motion: reduce){
  .nav-toggle,
  .nav-toggle span,
  .site-nav,
  .site-nav a{
    transition:none !important;
    animation:none !important;
    transform:none !important;
    filter:none !important;
  }
}

/* nav vertical mobile final fix */
@media (max-width: 820px){
  .site-nav,
  .site-nav.is-open,
  .site-nav.is-closing{
    display:flex !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    align-items:stretch !important;
    row-gap:12px !important;
    column-gap:0 !important;
  }

  .site-nav a{
    width:100% !important;
    flex:0 0 auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
  }
}/* sidebar modern single source of truth */
@media (max-width: 820px){
  .header-inner{
    overflow:visible;
  }

  .site-menu-overlay{
    position:fixed;
    inset:0;
    background:
      linear-gradient(90deg, rgba(0,0,0,.34), rgba(0,0,0,.18));
    opacity:0;
    pointer-events:none;
    transition:opacity .36s ease;
    z-index:9996;
  }

  .site-menu-overlay.is-open{
    opacity:1;
    pointer-events:auto;
  }

  .site-nav,
  .site-nav.is-open,
  .site-nav.is-closing{
    display:flex !important;
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:auto !important;
    bottom:0 !important;
    width:min(84vw, 360px) !important;
    max-width:360px !important;
    height:100vh !important;
    max-height:100vh !important;
    margin:0 !important;
    padding:86px 16px 18px !important;

    flex-direction:column !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    align-items:stretch !important;
    row-gap:12px !important;
    column-gap:0 !important;

    overflow:auto !important;
    background:
      radial-gradient(circle at 16% 10%, rgba(150,20,20,.18), transparent 24%),
      linear-gradient(180deg, rgba(18,18,22,.985), rgba(8,8,10,.995)) !important;
    border-right:1px solid rgba(255,255,255,.08) !important;
    border-top:none !important;
    border-left:none !important;
    border-bottom:none !important;
    border-radius:0 28px 28px 0 !important;
    box-shadow:
      20px 0 60px rgba(0,0,0,.34),
      inset 0 1px 0 rgba(255,255,255,.05) !important;

    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateX(-42px) !important;
    transition:
      opacity .34s ease,
      transform .52s cubic-bezier(.22,1,.36,1),
      visibility 0s linear .52s !important;
    z-index:9997 !important;
  }

  .site-nav.is-open{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateX(0) !important;
    transition:
      opacity .34s ease,
      transform .52s cubic-bezier(.22,1,.36,1),
      visibility 0s linear 0s !important;
  }

  .site-nav.is-closing{
    opacity:0 !important;
    visibility:visible !important;
    pointer-events:none !important;
    transform:translateX(-30px) !important;
  }

  .site-nav a,
  .site-nav.is-open a,
  .site-nav.is-closing a{
    width:100% !important;
    flex:0 0 auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    min-height:54px !important;
    padding:0 18px !important;
    margin:0 !important;

    color:#ffffff !important;
    background:rgba(255,255,255,.03) !important;
    border:1px solid rgba(255,255,255,.08) !important;
    border-radius:18px !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.03),
      0 8px 18px rgba(0,0,0,.12) !important;

    font-size:1rem !important;
    font-weight:800 !important;
    letter-spacing:.01em !important;
    text-shadow:none !important;

    opacity:0 !important;
    visibility:visible !important;
    filter:none !important;
    transform:translateX(-18px) !important;
    animation:none !important;
    transition:
      background .22s ease,
      border-color .22s ease,
      box-shadow .22s ease !important;
  }

  .site-nav.is-open a{
    animation:navItemFadeLeftIn .54s cubic-bezier(.22,1,.36,1) both !important;
  }

  .site-nav.is-open a:nth-child(1){ animation-delay:.08s !important; }
  .site-nav.is-open a:nth-child(2){ animation-delay:.16s !important; }
  .site-nav.is-open a:nth-child(3){ animation-delay:.24s !important; }
  .site-nav.is-open a:nth-child(4){ animation-delay:.32s !important; }
  .site-nav.is-open a:nth-child(5){ animation-delay:.40s !important; }
  .site-nav.is-open a:nth-child(6){ animation-delay:.48s !important; }
  .site-nav.is-open a:nth-child(7){ animation-delay:.56s !important; }

  .site-nav.is-closing a{
    opacity:0 !important;
    transform:translateX(-10px) !important;
    animation:none !important;
  }

  .site-nav a:hover,
  .site-nav a:active,
  .site-nav a.active{
    background:rgba(255,255,255,.06) !important;
    border-color:rgba(255,255,255,.14) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.04),
      0 10px 22px rgba(0,0,0,.16) !important;
  }

  .site-header .nav-toggle{
    position:fixed !important;
    top:16px !important;
    left:12px !important;
    right:auto !important;
    z-index:9998 !important;
  }

  @keyframes navItemFadeLeftIn{
    0%{
      opacity:0;
      transform:translateX(-18px);
    }
    100%{
      opacity:1;
      transform:translateX(0);
    }
  }
}

@media (max-width: 640px){
  .site-nav,
  .site-nav.is-open,
  .site-nav.is-closing{
    width:min(88vw, 330px) !important;
    max-width:330px !important;
    padding:82px 14px 16px !important;
    border-radius:0 24px 24px 0 !important;
  }

  .site-nav a,
  .site-nav.is-open a,
  .site-nav.is-closing a{
    min-height:52px !important;
    padding:0 16px !important;
    font-size:.98rem !important;
    border-radius:17px !important;
  }

  .site-header .nav-toggle{
    top:14px !important;
    left:10px !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .site-nav,
  .site-nav a,
  .site-menu-overlay{
    transition:none !important;
    animation:none !important;
  }

  .site-nav a,
  .site-nav.is-open a,
  .site-nav.is-closing a{
    opacity:1 !important;
    transform:none !important;
  }
}


/* force real left screen menu final */
@media (max-width: 820px){
  html body.menu-open{
    overflow:hidden !important;
    touch-action:none !important;
  }

  html body .site-menu-overlay{
    position:fixed !important;
    inset:0 !important;
    background:
      linear-gradient(90deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.44) 44%, rgba(0,0,0,.16) 100%) !important;
    opacity:0 !important;
    pointer-events:none !important;
    transition:opacity .62s cubic-bezier(.16,1,.3,1) !important;
    z-index:9996 !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  html body .site-menu-overlay.is-open{
    opacity:1 !important;
    pointer-events:auto !important;
  }

  html body #siteNav,
  html body #siteNav.is-open,
  html body #siteNav.is-closing{
    display:flex !important;
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:auto !important;
    bottom:0 !important;
    width:min(86vw, 372px) !important;
    max-width:372px !important;
    height:100vh !important;
    max-height:none !important;
    margin:0 !important;
    padding:92px 18px 22px !important;

    flex-direction:column !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    align-items:stretch !important;
    row-gap:12px !important;
    column-gap:0 !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;

    background:
      radial-gradient(circle at 14% 10%, rgba(170,18,18,.22), transparent 24%),
      radial-gradient(circle at 82% 16%, rgba(255,255,255,.045), transparent 18%),
      linear-gradient(180deg, rgba(16,16,20,.985), rgba(8,9,12,.994) 72%, rgba(4,5,7,.998)) !important;

    border-right:1px solid rgba(255,255,255,.11) !important;
    border-top-right-radius:30px !important;
    border-bottom-right-radius:30px !important;

    box-shadow:
      28px 0 72px rgba(0,0,0,.42),
      10px 0 24px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.06),
      inset -1px 0 0 rgba(255,255,255,.03) !important;

    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translate3d(-104%, 0, 0) scale(.985) !important;

    z-index:9997 !important;
    will-change:transform, opacity, filter !important;
    backface-visibility:hidden !important;
    transform-style:preserve-3d !important;
  }

  html body #siteNav::before{
    content:"BLACKLINE FITNESS";
    display:block;
    margin:0 6px 14px;
    color:rgba(255,255,255,.92);
    font-size:.92rem;
    font-weight:900;
    letter-spacing:.18em;
    text-transform:uppercase;
    text-shadow:0 0 18px rgba(255,90,90,.08);
  }

  html body #siteNav::after{
    content:"";
    display:block;
    height:1px;
    margin:2px 4px 2px;
    background:linear-gradient(90deg, rgba(255,90,90,.18), rgba(255,255,255,.10), rgba(255,255,255,0));
    opacity:.9;
  }

  html body #siteNav.is-open{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    animation:sidebarPanelLuxuryOpen .98s cubic-bezier(.16,1,.3,1) both !important;
  }

  html body #siteNav.is-closing{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:none !important;
    animation:sidebarPanelLuxuryClose .82s cubic-bezier(.4,0,.2,1) both !important;
  }

  html body #siteNav a,
  html body #siteNav.is-open a,
  html body #siteNav.is-closing a{
    width:100% !important;
    min-height:56px !important;
    height:auto !important;
    padding:0 18px 0 18px !important;
    margin:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    flex:0 0 auto !important;

    position:relative !important;
    overflow:hidden !important;

    color:#ffffff !important;
    font-size:1rem !important;
    font-weight:800 !important;
    letter-spacing:.01em !important;
    text-transform:lowercase !important;
    text-decoration:none !important;

    background:
      linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:19px !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.045),
      0 10px 22px rgba(0,0,0,.16) !important;

    opacity:0 !important;
    visibility:visible !important;
    transform:translate3d(-18px, 0, 0) !important;
    filter:blur(8px) brightness(.94) !important;
    animation:none !important;
    transition:
      background .26s ease,
      border-color .26s ease,
      box-shadow .26s ease,
      transform .26s ease !important;

    will-change:transform, opacity, filter !important;
    backface-visibility:hidden !important;
    -webkit-font-smoothing:antialiased !important;
  }

  html body #siteNav a::before{
    content:"";
    position:absolute;
    top:12px;
    bottom:12px;
    left:12px;
    width:4px;
    border-radius:999px;
    background:linear-gradient(180deg, #ff5d5d, #8d1111);
    box-shadow:0 0 14px rgba(255,93,93,.22);
    opacity:.18;
    transform:scaleY(.52);
    transition:opacity .26s ease, transform .26s ease, box-shadow .26s ease;
  }

  html body #siteNav a::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,0));
    opacity:.38;
    transition:opacity .26s ease;
    pointer-events:none;
  }

  html body #siteNav a:hover,
  html body #siteNav a:active,
  html body #siteNav a.active{
    background:
      linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04)) !important;
    border-color:rgba(255,255,255,.17) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.055),
      0 14px 26px rgba(0,0,0,.20) !important;
    transform:translate3d(2px, 0, 0) !important;
  }

  html body #siteNav a:hover::before,
  html body #siteNav a:active::before,
  html body #siteNav a.active::before{
    opacity:1;
    transform:scaleY(1);
    box-shadow:0 0 16px rgba(255,93,93,.28);
  }

  html body #siteNav a:hover::after,
  html body #siteNav a:active::after,
  html body #siteNav a.active::after{
    opacity:.56;
  }

  html body #siteNav.is-open a{
    opacity:1 !important;
    visibility:visible !important;
    animation:leftSidebarLuxuryOpen .90s cubic-bezier(.16,1,.3,1) both !important;
    animation-fill-mode:both !important;
  }

html body #siteNav.is-open a:nth-child(2){ animation-delay:.14s !important; }
html body #siteNav.is-open a:nth-child(4){ animation-delay:.28s !important; }
html body #siteNav.is-open a:nth-child(6){ animation-delay:.42s !important; }
html body #siteNav.is-closing a{
    opacity:1 !important;
    visibility:visible !important;
    animation:leftSidebarLuxuryClose .44s cubic-bezier(.4,0,.2,1) both !important;
    animation-fill-mode:both !important;
  }

html body #siteNav.is-closing a:nth-child(2){ animation-delay:.15s !important; }
html body #siteNav.is-closing a:nth-child(4){ animation-delay:.09s !important; }
html body #siteNav.is-closing a:nth-child(6){ animation-delay:.03s !important; }
html body .site-header .nav-toggle{
    position:fixed !important;
    top:16px !important;
    left:12px !important;
    right:auto !important;
    z-index:9998 !important;
  }

  @keyframes sidebarPanelLuxuryOpen{
    0%{
      opacity:0;
      transform:translate3d(-104%, 0, 0) scale(.985);
      filter:blur(18px) brightness(.84) saturate(.88);
    }
    52%{
      opacity:1;
      transform:translate3d(-12px, 0, 0) scale(.995);
      filter:blur(6px) brightness(.95) saturate(.97);
    }
    100%{
      opacity:1;
      transform:translate3d(0, 0, 0) scale(1);
      filter:blur(0) brightness(1) saturate(1);
    }
  }

  @keyframes sidebarPanelLuxuryClose{
    0%{
      opacity:1;
      transform:translate3d(0, 0, 0) scale(1);
      filter:blur(0) brightness(1) saturate(1);
    }
    38%{
      opacity:1;
      transform:translate3d(-10px, 0, 0) scale(.996);
      filter:blur(3px) brightness(.96) saturate(.97);
    }
    100%{
      opacity:0;
      transform:translate3d(-104%, 0, 0) scale(.985);
      filter:blur(12px) brightness(.88) saturate(.92);
    }
  }

  @keyframes leftSidebarLuxuryOpen{
    0%{
      opacity:0;
      transform:translate3d(-20px, 0, 0);
      filter:blur(10px) brightness(.92);
    }
    58%{
      opacity:1;
      transform:translate3d(3px, 0, 0);
      filter:blur(2px) brightness(.98);
    }
    100%{
      opacity:1;
      transform:translate3d(0, 0, 0);
      filter:blur(0) brightness(1);
    }
  }

  @keyframes leftSidebarLuxuryClose{
    0%{
      opacity:1;
      transform:translate3d(0, 0, 0);
      filter:blur(0) brightness(1);
    }
    100%{
      opacity:0;
      transform:translate3d(-16px, 0, 0);
      filter:blur(8px) brightness(.92);
    }
  }
}

@media (max-width: 640px){
  html body #siteNav,
  html body #siteNav.is-open,
  html body #siteNav.is-closing{
    width:min(88vw, 344px) !important;
    max-width:344px !important;
    padding:90px 15px 18px !important;
    row-gap:11px !important;
    border-top-right-radius:26px !important;
    border-bottom-right-radius:26px !important;
  }

  html body #siteNav a,
  html body #siteNav.is-open a,
  html body #siteNav.is-closing a{
    min-height:54px !important;
    padding:0 16px 0 17px !important;
    font-size:.98rem !important;
    border-radius:18px !important;
  }

  html body #siteNav.is-open{
    animation:sidebarPanelLuxuryOpen .88s cubic-bezier(.16,1,.3,1) both !important;
  }

  html body #siteNav.is-closing{
    animation:sidebarPanelLuxuryClose .74s cubic-bezier(.4,0,.2,1) both !important;
  }

  html body #siteNav.is-open a{
    animation:leftSidebarLuxuryOpen .82s cubic-bezier(.16,1,.3,1) both !important;
  }

html body #siteNav.is-open a:nth-child(2){ animation-delay:.12s !important; }
html body #siteNav.is-open a:nth-child(4){ animation-delay:.24s !important; }
html body #siteNav.is-open a:nth-child(6){ animation-delay:.36s !important; }
html body .site-header .nav-toggle{
    top:14px !important;
    left:10px !important;
  }
}

@media (prefers-reduced-motion: reduce){
  html body .site-menu-overlay,
  html body #siteNav,
  html body #siteNav a{
    transition:none !important;
    animation:none !important;
    transform:none !important;
    filter:none !important;
  }

  html body #siteNav,
  html body #siteNav.is-open,
  html body #siteNav.is-closing,
  html body #siteNav a,
  html body #siteNav.is-open a,
  html body #siteNav.is-closing a{
    opacity:1 !important;
    visibility:visible !important;
  }
}

/* sidebar stable final override */
@media (max-width: 820px){
  html body.menu-open{
    overflow:hidden !important;
    touch-action:none !important;
  }

  html body .site-menu-overlay{
    position:fixed !important;
    inset:0 !important;
    background:
      linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.44) 44%, rgba(0,0,0,.16) 100%) !important;
    opacity:0 !important;
    pointer-events:none !important;
    transition:opacity .38s cubic-bezier(.22,1,.36,1) !important;
    z-index:9996 !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  html body .site-menu-overlay.is-open{
    opacity:1 !important;
    pointer-events:auto !important;
  }

  html body #siteNav,
  html body #siteNav.is-open,
  html body #siteNav.is-closing{
    display:flex !important;
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:auto !important;
    bottom:0 !important;
    width:min(84vw, 358px) !important;
    max-width:358px !important;
    height:100vh !important;
    max-height:none !important;
    margin:0 !important;
    padding:92px 18px 22px !important;

    flex-direction:column !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    align-items:stretch !important;
    row-gap:12px !important;
    column-gap:0 !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;

    background:
      radial-gradient(circle at 14% 10%, rgba(175,18,18,.18), transparent 24%),
      radial-gradient(circle at 84% 14%, rgba(255,255,255,.035), transparent 18%),
      linear-gradient(180deg, rgba(16,16,20,.985), rgba(8,8,11,.995)) !important;

    border-right:1px solid rgba(255,255,255,.10) !important;
    border-top-right-radius:28px !important;
    border-bottom-right-radius:28px !important;

    box-shadow:
      26px 0 64px rgba(0,0,0,.40),
      8px 0 20px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.05),
      inset -1px 0 0 rgba(255,255,255,.02) !important;

    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translate3d(-104%, 0, 0) !important;
    transition:
      transform .58s cubic-bezier(.22,1,.36,1),
      opacity .30s ease,
      visibility 0s linear .58s !important;

    z-index:9997 !important;
    will-change:transform, opacity !important;
    backface-visibility:hidden !important;
    filter:none !important;
  }

  html body #siteNav::before{
    content:"BLACKLINE FITNESS";
    display:block;
    margin:0 6px 14px;
    color:rgba(255,255,255,.92);
    font-size:.88rem;
    font-weight:900;
    letter-spacing:.18em;
    text-transform:uppercase;
    text-shadow:0 0 14px rgba(255,80,80,.06);
  }

  html body #siteNav::after{
    content:"";
    display:block;
    height:1px;
    margin:0 4px 8px;
    background:linear-gradient(90deg, rgba(255,90,90,.18), rgba(255,255,255,.08), rgba(255,255,255,0));
    opacity:.85;
  }

  html body #siteNav.is-open{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translate3d(0, 0, 0) !important;
    transition:
      transform .58s cubic-bezier(.22,1,.36,1),
      opacity .34s ease,
      visibility 0s linear 0s !important;
  }

  html body #siteNav.is-closing{
    opacity:0 !important;
    visibility:visible !important;
    pointer-events:none !important;
    transform:translate3d(-104%, 0, 0) !important;
    transition:
      transform .42s cubic-bezier(.4,0,.2,1),
      opacity .22s ease,
      visibility 0s linear .42s !important;
  }

  html body #siteNav a,
  html body #siteNav.is-open a,
  html body #siteNav.is-closing a{
    width:100% !important;
    min-height:55px !important;
    height:auto !important;
    padding:0 17px 0 18px !important;
    margin:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    flex:0 0 auto !important;

    position:relative !important;
    overflow:hidden !important;

    color:#ffffff !important;
    font-size:1rem !important;
    font-weight:800 !important;
    letter-spacing:.01em !important;
    text-transform:lowercase !important;
    text-decoration:none !important;

    background:
      linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:19px !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.045),
      0 10px 22px rgba(0,0,0,.16) !important;

    opacity:0 !important;
    visibility:visible !important;
    transform:translate3d(-14px, 0, 0) !important;
    filter:blur(7px) brightness(.95) !important;
    animation:none !important;

    transition:
      background .24s ease,
      border-color .24s ease,
      box-shadow .24s ease,
      transform .24s ease !important;

    will-change:transform, opacity, filter !important;
    backface-visibility:hidden !important;
    -webkit-font-smoothing:antialiased !important;
  }

  html body #siteNav a::before{
    content:"";
    position:absolute;
    top:12px;
    bottom:12px;
    left:11px;
    width:3px;
    border-radius:999px;
    background:linear-gradient(180deg, #ff5b5b, #8f1111);
    box-shadow:0 0 12px rgba(255,91,91,.18);
    opacity:.16;
    transform:scaleY(.55);
    transition:opacity .24s ease, transform .24s ease;
  }

  html body #siteNav a::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,0));
    opacity:.28;
    transition:opacity .24s ease;
    pointer-events:none;
  }

  html body #siteNav a:hover,
  html body #siteNav a:active,
  html body #siteNav a.active{
    background:
      linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.04)) !important;
    border-color:rgba(255,255,255,.17) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.055),
      0 14px 26px rgba(0,0,0,.20) !important;
    transform:translate3d(2px, 0, 0) !important;
  }

  html body #siteNav a:hover::before,
  html body #siteNav a:active::before,
  html body #siteNav a.active::before{
    opacity:1;
    transform:scaleY(1);
  }

  html body #siteNav a:hover::after,
  html body #siteNav a:active::after,
  html body #siteNav a.active::after{
    opacity:.5;
  }

  html body #siteNav.is-open a{
    opacity:1 !important;
    visibility:visible !important;
    animation:leftSidebarStableIn .72s cubic-bezier(.22,1,.36,1) both !important;
    animation-fill-mode:both !important;
  }

html body #siteNav.is-open a:nth-child(2){ animation-delay:.12s !important; }
html body #siteNav.is-open a:nth-child(4){ animation-delay:.24s !important; }
html body #siteNav.is-open a:nth-child(6){ animation-delay:.36s !important; }
html body #siteNav.is-closing a{
    opacity:1 !important;
    visibility:visible !important;
    transform:translate3d(0, 0, 0) !important;
    filter:none !important;
    animation:none !important;
  }

  html body .site-header .nav-toggle{
    position:fixed !important;
    top:16px !important;
    left:12px !important;
    right:auto !important;
    z-index:9998 !important;
  }

  @keyframes leftSidebarStableIn{
    0%{
      opacity:0;
      transform:translate3d(-16px, 0, 0);
      filter:blur(7px) brightness(.95);
    }
    58%{
      opacity:1;
      transform:translate3d(2px, 0, 0);
      filter:blur(2px) brightness(.98);
    }
    100%{
      opacity:1;
      transform:translate3d(0, 0, 0);
      filter:blur(0) brightness(1);
    }
  }
}

@media (max-width: 640px){
  html body #siteNav,
  html body #siteNav.is-open,
  html body #siteNav.is-closing{
    width:min(88vw, 340px) !important;
    max-width:340px !important;
    padding:88px 15px 18px !important;
    border-top-right-radius:25px !important;
    border-bottom-right-radius:25px !important;
  }

  html body #siteNav a,
  html body #siteNav.is-open a,
  html body #siteNav.is-closing a{
    min-height:53px !important;
    padding:0 16px 0 17px !important;
    font-size:.98rem !important;
    border-radius:18px !important;
  }

  html body #siteNav.is-open a{
    animation:leftSidebarStableIn .68s cubic-bezier(.22,1,.36,1) both !important;
  }

html body #siteNav.is-open a:nth-child(2){ animation-delay:.10s !important; }
html body #siteNav.is-open a:nth-child(4){ animation-delay:.20s !important; }
html body #siteNav.is-open a:nth-child(6){ animation-delay:.30s !important; }
html body .site-header .nav-toggle{
    top:14px !important;
    left:10px !important;
  }
}

@media (prefers-reduced-motion: reduce){
  html body .site-menu-overlay,
  html body #siteNav,
  html body #siteNav a{
    transition:none !important;
    animation:none !important;
    transform:none !important;
    filter:none !important;
  }

  html body #siteNav,
  html body #siteNav.is-open,
  html body #siteNav.is-closing,
  html body #siteNav a,
  html body #siteNav.is-open a,
  html body #siteNav.is-closing a{
    opacity:1 !important;
    visibility:visible !important;
  }
}

/* sidebar safari deblur hotfix final */
@media (max-width: 820px){
  html body #siteNav,
  html body #siteNav.is-open,
  html body #siteNav.is-closing{
    filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  html body .site-menu-overlay,
  html body .site-menu-overlay.is-open{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  html body #siteNav a,
  html body #siteNav.is-open a,
  html body #siteNav.is-closing a{
    filter:none !important;
    -webkit-filter:none !important;
    opacity:0 !important;
    transform:translate3d(-12px, 0, 0) scale(.985) !important;
    will-change:transform, opacity !important;
    backface-visibility:hidden !important;
    -webkit-font-smoothing:antialiased !important;
    text-shadow:0 1px 8px rgba(255,255,255,.04) !important;
  }

  html body #siteNav.is-open a{
    animation:leftSidebarSoftIn .66s cubic-bezier(.22,1,.36,1) both !important;
    animation-fill-mode:both !important;
  }

html body #siteNav.is-open a:nth-child(2){ animation-delay:.10s !important; }
html body #siteNav.is-open a:nth-child(4){ animation-delay:.20s !important; }
html body #siteNav.is-open a:nth-child(6){ animation-delay:.30s !important; }
html body #siteNav.is-closing a{
    opacity:1 !important;
    transform:translate3d(0, 0, 0) scale(1) !important;
    filter:none !important;
    -webkit-filter:none !important;
    animation:none !important;
  }

  @keyframes leftSidebarSoftIn{
    0%{
      opacity:0;
      transform:translate3d(-14px, 0, 0) scale(.985);
    }
    65%{
      opacity:1;
      transform:translate3d(2px, 0, 0) scale(1);
    }
    100%{
      opacity:1;
      transform:translate3d(0, 0, 0) scale(1);
    }
  }
}

@media (max-width: 640px){
  html body #siteNav.is-open a{
    animation:leftSidebarSoftIn .60s cubic-bezier(.22,1,.36,1) both !important;
    animation-fill-mode:both !important;
  }

html body #siteNav.is-open a:nth-child(2){ animation-delay:.08s !important; }
html body #siteNav.is-open a:nth-child(4){ animation-delay:.16s !important; }
html body #siteNav.is-open a:nth-child(6){ animation-delay:.24s !important; }
}

@media (prefers-reduced-motion: reduce){
  html body #siteNav,
  html body #siteNav a,
  html body .site-menu-overlay{
    filter:none !important;
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    animation:none !important;
    transition:none !important;
    transform:none !important;
  }

  html body #siteNav a,
  html body #siteNav.is-open a,
  html body #siteNav.is-closing a{
    opacity:1 !important;
  }
}

/* === sidebar clean final: start === */
@media (max-width: 820px){
  html.nav-no-motion body .site-menu-overlay,
  html.nav-no-motion body #siteNav,
  html.nav-no-motion body #siteNav::before,
  html.nav-no-motion body #siteNav::after,
  html.nav-no-motion body #siteNav *{
    animation:none !important;
    transition:none !important;
  }

  html body.menu-open{
    overflow:hidden !important;
    overscroll-behavior:none !important;
  }

  html body .site-menu-overlay{
    position:fixed !important;
    inset:0 !important;
    z-index:9995 !important;
    background:linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.42) 42%, rgba(0,0,0,.16) 100%) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    transition:opacity .18s ease, visibility 0s linear .28s !important;
  }

  html body .site-menu-overlay.is-open{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transition:opacity .18s ease, visibility 0s linear 0s !important;
  }

  html body #siteNav,
  html body #siteNav.is-open,
  html body #siteNav.is-closing{
    display:flex !important;
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:auto !important;
    bottom:0 !important;
    width:min(86vw, 360px) !important;
    max-width:360px !important;
    height:100dvh !important;
    margin:0 !important;
    padding:92px 18px 22px !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    row-gap:12px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    background:
      radial-gradient(circle at 14% 10%, rgba(175,18,18,.18), transparent 24%),
      radial-gradient(circle at 84% 14%, rgba(255,255,255,.035), transparent 18%),
      linear-gradient(180deg, rgba(16,16,20,.985), rgba(8,8,11,.995)) !important;
    border-right:1px solid rgba(255,255,255,.10) !important;
    border-top-right-radius:28px !important;
    border-bottom-right-radius:28px !important;
    box-shadow:
      26px 0 64px rgba(0,0,0,.40),
      8px 0 20px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.05),
      inset -1px 0 0 rgba(255,255,255,.02) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translate3d(-104%, 0, 0) !important;
    transition:
      transform .28s cubic-bezier(.22,1,.36,1),
      opacity .16s ease,
      visibility 0s linear .28s !important;
    z-index:9997 !important;
    will-change:transform, opacity !important;
    backface-visibility:hidden !important;
    filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    contain:layout paint !important;
  }

  html body #siteNav::before{
    content:"BLACKLINE FITNESS";
    display:block;
    margin:0 6px 14px;
    color:rgba(255,255,255,.92);
    font-size:.88rem;
    font-weight:900;
    letter-spacing:.18em;
    text-transform:uppercase;
    text-shadow:0 0 14px rgba(255,80,80,.06);
  }

  html body #siteNav::after{
    content:"";
    display:block;
    height:1px;
    margin:0 4px 8px;
    background:linear-gradient(90deg, rgba(255,90,90,.18), rgba(255,255,255,.08), rgba(255,255,255,0));
    opacity:.85;
  }

  html body #siteNav.is-open{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translate3d(0, 0, 0) !important;
    transition:
      transform .28s cubic-bezier(.22,1,.36,1),
      opacity .16s ease,
      visibility 0s linear 0s !important;
  }

  html body #siteNav.is-closing{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translate3d(-104%, 0, 0) !important;
    transition:
      transform .18s ease,
      opacity .10s ease,
      visibility 0s linear .18s !important;
  }

  html body #siteNav a,
  html body #siteNav.is-open a,
  html body #siteNav.is-closing a{
    width:100% !important;
    min-height:55px !important;
    height:auto !important;
    padding:0 17px 0 18px !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    flex:0 0 auto !important;
    position:relative !important;
    overflow:hidden !important;
    color:#ffffff !important;
    font-size:1rem !important;
    font-weight:800 !important;
    letter-spacing:.01em !important;
    text-transform:lowercase !important;
    text-decoration:none !important;
    background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:19px !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.045),
      0 10px 22px rgba(0,0,0,.16) !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    animation:none !important;
    transition:none !important;
    animation-delay:0s !important;
    transition-delay:0s !important;
    filter:none !important;
    -webkit-filter:none !important;
  }

  html body #siteNav a::before,
  html body #siteNav a::after{
    content:none !important;
  }

  html body #siteNav a:hover,
  html body #siteNav a:active,
  html body #siteNav a.active{
    background:linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.05)) !important;
    border-color:rgba(255,255,255,.16) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.06),
      0 12px 24px rgba(0,0,0,.18) !important;
  }

  html body .site-header .nav-toggle{
    position:relative !important;
    z-index:9998 !important;
  }

  html body .site-header .nav-toggle.is-open{
    background:rgba(255,255,255,.08) !important;
    border-color:rgba(255,255,255,.14) !important;
  }
}

@media (max-width: 640px){
  html body #siteNav,
  html body #siteNav.is-open,
  html body #siteNav.is-closing{
    width:min(90vw, 340px) !important;
    max-width:340px !important;
    padding:86px 15px 18px !important;
    border-top-right-radius:24px !important;
    border-bottom-right-radius:24px !important;
  }

  html body #siteNav a,
  html body #siteNav.is-open a,
  html body #siteNav.is-closing a{
    min-height:52px !important;
    padding:0 16px !important;
    font-size:.98rem !important;
    border-radius:17px !important;
  }
}
/* === sidebar clean final: end === */

/* === sidebar tremor killer v5: start === */
@media (max-width: 820px){
  html body #siteNav,
  html body #siteNav.is-open,
  html body #siteNav.is-closing{
    height:100svh !important;
    min-height:100svh !important;
    max-height:100svh !important;
    contain:paint !important;
    isolation:isolate !important;
    overflow-anchor:none !important;
    touch-action:pan-y !important;
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
    transform:translate3d(-104%, 0, 0) !important;
    transition:
      transform .22s ease-out,
      opacity .12s ease-out,
      visibility 0s linear .22s !important;
  }

  html body #siteNav.is-open{
    transform:translate3d(0, 0, 0) !important;
    transition:
      transform .22s ease-out,
      opacity .12s ease-out,
      visibility 0s linear 0s !important;
  }

  html body #siteNav.is-closing{
    transform:translate3d(-104%, 0, 0) !important;
    transition:
      transform .16s ease-in,
      opacity .10s ease-in,
      visibility 0s linear .16s !important;
  }
}
/* === sidebar tremor killer v5: end === */