/* Floating mobile navigation, like the reference: page imagery can remain visible
   above and to both sides of the opaque, rounded header card. This does not
   touch hero images, animation, scroll handling, portraits, or CTAs. */
@media (max-width:700px) {
  :root { --eco-header-gap:10px; }
  /* The normal document continues behind the fixed header's open margins. */
  body.eco-home {
    padding-top:calc(var(--header-height, 80px) + var(--eco-header-gap)) !important;
  }
  body.eco-home > .site-header {
    position:fixed !important;
    top:var(--eco-header-gap) !important;
    left:var(--eco-header-gap) !important;
    right:var(--eco-header-gap) !important;
    width:calc(100% - 2 * var(--eco-header-gap)) !important;
    max-width:none !important;
    margin:0 !important;
    height:var(--header-height, 80px) !important;
    border:1px solid #d1e0dd !important;
    border-radius:12px !important;
    background:#f8fbfa !important;
    background-image:none !important;
    box-shadow:0 4px 14px rgba(16,45,73,.17) !important;
    z-index:10000 !important;
    overflow:visible !important;
  }
  body.eco-home > .site-header .head-inner {
    width:calc(100% - 14px);
    max-width:none;
    margin-inline:auto;
  }
  /* Keep menu dropdown attached to the rounded card. */
  .site-header .nav.open {
    background:#fff !important;
    border-radius:0 0 10px 10px;
    box-shadow:0 10px 16px rgba(16,45,73,.14);
  }
  html { scroll-padding-top:calc(var(--header-height, 80px) + var(--eco-header-gap) + 10px) !important; }
  [id] { scroll-margin-top:calc(var(--header-height, 80px) + var(--eco-header-gap) + 10px); }
  #booking { scroll-margin-top:calc(var(--header-height, 80px) + var(--eco-header-gap) + 12px) !important; }
}