.legal-links a{color:inherit;text-decoration:none}.legal-links a:hover{color:#fff}.shop-legal{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px 5vw;background:#151513;color:#b9b2a8;font:500 10px Manrope,Arial,sans-serif;letter-spacing:.04em}.shop-legal nav{display:flex;flex-wrap:wrap;gap:18px}.shop-legal a{color:inherit;text-decoration:none}.shop-legal a:hover{color:#fff}@media(max-width:700px){.shop-legal{align-items:flex-start;flex-direction:column}.shop-legal nav{gap:12px 18px}}
/* 2026-08-31 homepage client feedback */
.studio-card .studio-arrow{display:none!important}.studio-card .studio-hover-actions{justify-content:flex-end!important}.studio-card .studio-hover-actions button[data-studio-book]{display:none!important}
.classfit-coming-soon-bg{background:linear-gradient(90deg,rgba(5,6,5,.88) 0%,rgba(5,6,5,.35) 50%,rgba(5,6,5,.72) 100%),url('/IMG-20260831-WA0001.jpg') center/cover no-repeat!important}
.schedule-footer a{border:0;background:none;font-weight:700;text-decoration:underline;cursor:pointer}

/* 2026-09-16 mobile overlap fixes */
@media(max-width:900px){
  /* Keep the always-visible studio contact actions away from the studio title. */
  .studio-card .studio-hover-actions{
    left:auto!important;
    right:16px!important;
    top:16px!important;
    bottom:auto!important;
    width:auto!important;
    opacity:1!important;
    transform:none!important;
    pointer-events:auto!important;
  }
  .studio-card .studio-hover-actions>a:first-child{margin-left:0!important}
  .studio-card .studio-hover-actions a,
  .studio-card .studio-hover-actions button{
    width:44px!important;
    height:44px!important;
    padding:0!important;
    justify-content:center!important;
    background:rgba(15,15,14,.72)!important;
    border:1px solid rgba(255,255,255,.55)!important;
  }
  /* Hide only the text label, never the inline SVG icon wrapper. */
  .studio-card .studio-hover-actions>a>span:not(.brand-action-icon),
  .studio-card .studio-hover-actions>button>span:not(.brand-action-icon){display:none!important}
  .studio-card .studio-hover-actions .brand-action-icon{
    display:grid!important;
    place-items:center!important;
    width:22px!important;
    height:22px!important;
    color:#fff!important;
  }
  .studio-card .studio-hover-actions .brand-action-icon svg{
    display:block!important;
    width:22px!important;
    height:22px!important;
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:1.8!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
  }
}

@media(max-width:780px){
  /* Mobile hero uses normal document flow so translated copy and the live card
     can never occupy the same vertical space, regardless of phone height. */
  .hero{
    height:auto!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    padding:145px 20px 34px!important;
    overflow:hidden!important;
  }
  .hero-copy{
    position:relative!important;
    inset:auto!important;
    top:auto!important;
    bottom:auto!important;
    left:auto!important;
    right:auto!important;
    transform:none!important;
    width:100%!important;
    max-width:620px!important;
    z-index:3!important;
  }
  .hero-copy h1{margin-bottom:24px!important}
  .hero-lead{margin-bottom:0!important}
  .hero-actions{margin-top:28px!important}
  .hero-card{
    position:relative!important;
    inset:auto!important;
    top:auto!important;
    bottom:auto!important;
    left:auto!important;
    right:auto!important;
    width:100%!important;
    max-width:620px!important;
    margin:30px 0 0!important;
    z-index:4!important;
    flex:0 0 auto!important;
  }
  .scroll-mark{display:none!important}

  /* Keep every live class self-contained on phones. The previous compact grid
     let the availability/reserve area spill into the following class row. */
  .class-list{padding-left:16px!important;padding-right:16px!important}
  .class-row{
    grid-template-columns:78px minmax(0,1fr) 104px!important;
    grid-template-areas:
      "time name coach"
      "time reserve reserve"!important;
    align-items:start!important;
    column-gap:12px!important;
    row-gap:14px!important;
    min-height:0!important;
    padding:20px 0 22px!important;
    overflow:visible!important;
  }
  .class-time{grid-area:time!important;align-self:start!important}
  .class-name{grid-area:name!important;min-width:0!important;padding-right:2px!important}
  .class-name b{line-height:1.28!important;overflow-wrap:anywhere!important}
  .class-coach{
    grid-area:coach!important;
    display:grid!important;
    grid-template-columns:32px minmax(0,1fr)!important;
    column-gap:8px!important;
    align-items:center!important;
    min-width:0!important;
  }
  .class-coach .coach-avatar{width:32px!important;height:32px!important}
  .class-coach>span,.class-coach>b{min-width:0!important}
  .class-coach>b{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  .class-location{display:none!important}
  .reserve-wrap{
    grid-area:reserve!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    flex-wrap:wrap!important;
    gap:10px 14px!important;
    min-width:0!important;
    text-align:left!important;
    margin:0!important;
    padding:0!important;
  }
  .reserve-wrap .spots{margin:0!important;min-width:76px!important;white-space:nowrap!important}
  .reserve-wrap .reserve-btn{
    position:static!important;
    margin:0!important;
    min-width:118px!important;
    width:auto!important;
    max-width:100%!important;
  }

  /* The mobile menu is fixed, but the header is 70px tall and starts below the
     30px announcement bar until the page is scrolled. Keep the menu below the
     actual header in both states so the first item never hides underneath it. */
  .header:not(.scrolled) + .mobile-menu{top:100px!important}
  .header.scrolled + .mobile-menu{top:62px!important}
}

@media(max-width:430px){
  .hero{padding:128px 18px 28px!important}
  .hero-copy{width:100%!important}
  .hero-actions{gap:14px!important;margin-top:22px!important}
  .hero-card{margin-top:24px!important}
  .class-row{
    grid-template-columns:70px minmax(0,1fr) 92px!important;
    column-gap:10px!important;
    padding:18px 0 20px!important;
  }
  .class-time b{font-size:18px!important}
  .class-name b{font-size:13px!important}
  .class-coach{grid-template-columns:30px minmax(0,1fr)!important;column-gap:7px!important}
  .class-coach .coach-avatar{width:30px!important;height:30px!important}
  .reserve-wrap{gap:9px 12px!important}
  .reserve-wrap .reserve-btn{min-width:112px!important;height:42px!important}
}