/* Mobile navigation (home and service pages): floating pill (Home · Services · More) + round "Let's talk",
   services panel with the 8 services as cards, "More" panel with the other pages. Hidden on desktop. */
.a2-mnav { display: none; }
@media (max-width: 860px) {
  .a2-mnav { display: block; }
  .a2-mbar { position: fixed; z-index: 60; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 10px;
    transform: translateX(-50%); transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
  .a2-mnav.is-hidden .a2-mbar { transform: translate(-50%, calc(100% + 30px)); }
  .a2-pill { display: flex; gap: 2px; padding: 5px; background: rgba(0, 48, 48, .92); border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .6); }
  .a2-pill a, .a2-pill button { display: grid; justify-items: center; gap: 2px; min-width: 64px; padding: 7px 12px; border: 0; background: none; color: #fff; text-decoration: none;
    font: 500 10px var(--fm-sans); letter-spacing: .06em; border-radius: 999px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .2s; }
  .a2-pill svg, .a2-round svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; transition: transform .2s; }
  .a2-pill a:hover, .a2-pill button:hover, .a2-pill a:active, .a2-pill button:active, .a2-pill button[aria-expanded="true"] { background: rgba(255, 255, 255, .2); }
  .a2-pill a:hover svg, .a2-pill button:hover svg, .a2-pill a:active svg, .a2-pill button:active svg, .a2-round:hover svg, .a2-round:active svg { transform: scale(1.12); }
  .a2-round { flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #004040; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6); transition: background-color .2s; -webkit-tap-highlight-color: transparent; }
  .a2-round:hover, .a2-round:active { background: #A9C4BF; }
  .a2-mscrim { position: fixed; inset: 0; z-index: 58; background: rgba(0, 20, 20, .45); opacity: 0; pointer-events: none; transition: opacity .3s; }
  .a2-msheet { position: fixed; z-index: 59; left: 0; right: 0; bottom: 0; max-height: 82vh; overflow-y: auto; background: #fff; color: #004040; border-radius: 22px 22px 0 0;
    padding: 22px max(18px, env(safe-area-inset-right, 0px)) calc(96px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px));
    transform: translateY(105%); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
  .a2-mnav.open-s [data-sheet="s"], .a2-mnav.open-m [data-sheet="m"] { transform: none; }
  .a2-mnav.open-s .a2-mscrim, .a2-mnav.open-m .a2-mscrim { opacity: 1; pointer-events: auto; }
  .a2-mlbl { display: block; margin-bottom: 12px; font: 500 11px var(--fm-sans); letter-spacing: .16em; text-transform: uppercase; color: #3E7370; }
  .a2-mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .a2-mcard { display: grid; gap: 2px; padding: 11px 13px; border: 1px solid rgba(0, 64, 64, .16); border-radius: 12px; color: #004040; text-decoration: none; transition: background-color .2s, border-color .2s; -webkit-tap-highlight-color: transparent; }
  .a2-mcard small { font: 500 9.5px var(--fm-sans); letter-spacing: .16em; color: #3E7370; }
  .a2-mcard b { font: italic 400 21px/1.05 var(--fm-serif); overflow-wrap: anywhere; }
  .a2-mcard:hover, .a2-mcard:active { background: rgba(0, 64, 64, .08); border-color: rgba(0, 64, 64, .3); }
  .a2-mcard.is-cur { background: #004040; border-color: #004040; color: #fff; } .a2-mcard.is-cur small { color: #A9C4BF; }
  .a2-mmore { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 14px; }
  .a2-mmore a { padding: 8px 8px; border-radius: 8px; color: #004040; text-decoration: none; font: 500 10.5px var(--fm-sans); letter-spacing: .14em; text-transform: uppercase; transition: background-color .2s; }
  .a2-mmore a:hover, .a2-mmore a:active { background: rgba(0, 64, 64, .08); }
  .a2-mlist { list-style: none; margin: 0; padding: 0; }
  .a2-mlist a { display: flex; justify-content: space-between; padding: 14px 8px; border-bottom: 1px solid rgba(0, 64, 64, .14); border-radius: 8px; color: #004040; text-decoration: none;
    font: 500 11.5px var(--fm-sans); letter-spacing: .16em; text-transform: uppercase; transition: background-color .2s, transform .2s; }
  .a2-mlist a i { font-style: normal; opacity: .6; }
  .a2-mlist a:hover, .a2-mlist a:active { background: rgba(0, 64, 64, .08); transform: translateX(4px); }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) { .a2-mbar, .a2-msheet, .a2-mscrim { transition: none; } }
@media (max-width: 860px) { .a2-mnav .a2-round, .a2-body[data-theme] .a2-mnav .a2-round { color: #004040 !important; } .a2-mnav .a2-round svg { stroke: #004040; } }

/* 2026-10-25 · Liquid glass: the pill and the round button are see-through glass that blurs and brightens what passes
   behind, with a light rim and a soft highlight on top. A green tint keeps the white labels readable over light sections. */
@media (max-width: 860px) {
  .a2-pill { position: relative; overflow: hidden; isolation: isolate;
    background: linear-gradient(180deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, .04) 55%), rgba(0, 52, 52, .42);
    border: 1px solid rgba(255, 255, 255, .34);
    -webkit-backdrop-filter: blur(22px) saturate(180%) brightness(1.06); backdrop-filter: blur(22px) saturate(180%) brightness(1.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(255, 255, 255, .10), inset 0 0 18px rgba(255, 255, 255, .08), 0 18px 36px -18px rgba(0, 20, 20, .55); }
  .a2-pill::before { content: ""; position: absolute; z-index: -1; left: 10%; right: 10%; top: 0; height: 46%; border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0)); pointer-events: none; }
  .a2-pill a, .a2-pill button { text-shadow: 0 1px 2px rgba(0, 20, 20, .35); }
  .a2-pill a:hover, .a2-pill button:hover, .a2-pill a:active, .a2-pill button:active, .a2-pill button[aria-expanded="true"] {
    background: rgba(255, 255, 255, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
  .a2-round { background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .78));
    border: 1px solid rgba(255, 255, 255, .7);
    -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
    box-shadow: inset 0 1px 0 #fff, inset 0 -6px 12px rgba(0, 64, 64, .10), 0 18px 34px -16px rgba(0, 20, 20, .6); }
  .a2-round:hover, .a2-round:active { background: linear-gradient(180deg, rgba(232, 242, 240, .95), rgba(169, 196, 191, .75)); }
  /* the panels that open from the bar: frosted too */
  .a2-msheet { background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%);
    border-top: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 -20px 40px -24px rgba(0, 20, 20, .35); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 860px) { .a2-pill { background: rgba(0, 48, 48, .92); } .a2-round { background: #fff; } .a2-msheet { background: #fff; } }
}