.hero{position:relative}
.publicAvailability{position:absolute;z-index:3;top:20px;right:max(24px,calc((100% - 1160px)/2));width:310px;box-sizing:border-box;padding:14px;background:#080909;color:#fff;border:1px solid #f6b900;border-radius:8px;box-shadow:0 8px 24px #0006;font-family:Arial,sans-serif}
.publicAvailHead{display:flex;align-items:center;justify-content:space-between;gap:6px}.publicAvailHead h2{font-size:16px;margin:0;color:#fff}.publicAvailability button{font:inherit;cursor:pointer}.publicAvailHead button,.publicAvailNav button{background:transparent;color:#fff;border:0;padding:0;width:28px;height:28px;font-size:22px}.publicAvailHead button{font-size:18px}.publicAvailNav{display:flex;align-items:center;justify-content:space-between;margin:6px 0 10px}.publicAvailNav strong{font-size:12px;font-weight:500;color:#eee}.publicAvailGrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}.publicAvailability .publicAvailDay{display:block;min-width:0;text-align:center;padding:6px 0;background:#185d23;color:#fff;border:1px solid #4f9954;border-radius:4px}.publicAvailability .publicAvailDay.busy{background:#741c24;border-color:#a74950;cursor:not-allowed}.publicAvailability .publicAvailDay.unknown{background:#282b2d;border-color:#555;cursor:wait}.publicAvailDay.today{box-shadow:inset 0 0 0 1px #f6b900}.publicAvailDay b,.publicAvailDay strong{display:block}.publicAvailDay b{font-size:10px;font-weight:400}.publicAvailDay strong{font-size:18px;margin-top:3px}.publicAvailDay:not(:disabled):hover{background:#287a35;box-shadow:0 0 0 1px #fff}.publicAvailNav button:disabled{opacity:.3;cursor:default}.publicAvailFoot{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:10px;font-size:9px;line-height:1.4;color:#eee}.publicAvailFoot i{font-style:normal}.publicOpenKey{color:#4fae53}.publicBusyKey{color:#d65a66}#publicAvailStatus{font-size:9px;color:#bbb;margin:6px 0 0;line-height:1.3}.publicAvailability :focus-visible{outline:2px solid #f6b900;outline-offset:2px}
@media(min-width:761px){.heroCopy{max-width:calc(100% - 350px)}}
@media(max-width:760px){.publicAvailability{width:280px;top:14px;right:14px;padding:12px}.hero .heroCopy{padding-top:290px}.publicAvailHead h2{font-size:15px}.publicAvailFoot{font-size:8px}}

/* v28.47 mobile hero spacing fix
   On phones, index.html places the hero photo in normal document flow.
   The calendar overlays that photo, so the hero copy must not reserve an
   additional 290px below it. This removes the large blank gap on mobile. */
@media(max-width:600px){
  .hero .heroCopy{padding-top:22px}
}

/* v28.48 MOBILE-ONLY HERO FLOW
   Phones: hero photo -> hero message -> compact live calendar -> Reserve button.
   Desktop/tablet rules and all calendar/booking logic remain unchanged. */
.mobileHeroReserve{display:none}
@media(max-width:600px){
  .hero{display:flex;flex-direction:column;align-items:stretch}
  .heroPhoto{order:1}
  .hero>.wrap{order:2;width:92%}
  .hero>.publicAvailability{order:3}
  .hero>.mobileHeroReserve{order:4}

  /* Hero copy first; remove both original hero buttons on phones. */
  .hero .heroCopy{padding:22px 0 18px}
  .hero .heroCopy .actions{display:none}

  /* Compact calendar below BIG JOBS / EASY RENTALS. */
  .hero>.publicAvailability{
    position:relative;
    top:auto;right:auto;
    width:92%;
    margin:0 auto;
    padding:10px;
    border-radius:8px;
    box-shadow:0 6px 18px #0005;
  }
  .publicAvailHead h2{font-size:14px}
  .publicAvailHead button,.publicAvailNav button{width:24px;height:24px;font-size:19px}
  .publicAvailHead button{font-size:16px}
  .publicAvailNav{margin:3px 0 7px}
  .publicAvailNav strong{font-size:11px}
  .publicAvailGrid{gap:4px}
  .publicAvailability .publicAvailDay{padding:4px 0}
  .publicAvailDay b{font-size:9px}
  .publicAvailDay strong{font-size:16px;margin-top:1px}
  .publicAvailFoot{margin-top:7px;font-size:8px}
  #publicAvailStatus{font-size:8px;margin-top:5px}

  /* Keep one clear booking CTA directly under the live calendar. */
  .hero>.mobileHeroReserve{
    display:flex;
    width:92%;
    min-height:48px;
    margin:12px auto 22px;
  }
}