/* ==========================================================================
   Homepage quick nav — one continuous glass shape (after mr.png).
   Head (74px, the logo) never changes size; the body below is as wide as its labels and joins the
   head with an S-shaped shoulder. menu.js draws the outline (--qw/--qh, path d) and tweens it:
   open = drop down, then spread sideways from under the logo; close = the reverse.
   Physical drawing is done for LTR; RTL mirrors the decorative layers (--fx), phones flip them (--fy).
   ========================================================================== */
.qnav {
  --hw: 74px; --hh: 78px;
  --fx: 1; --fy: 1;
  position: fixed; z-index: 40;
  inset-inline-start: 22px;
  top: var(--qtop, max(calc(var(--header-h) + 22px), calc(50vh - 320px)));
  width: var(--qw, var(--hw)); height: var(--qh, var(--hw));
  pointer-events: none;
  font-family: var(--font-body);
}
[dir="rtl"] .qnav { --fx: -1; }
html.mm-open .qnav { visibility: hidden; }
/* placed by menu.js (the visitor can drag it, like the iPhone's floating button): it rests on the left or right
   edge (is-left / is-right), at the height it was dropped, and opens down or, low on the screen, up (is-up) */
.qnav.is-placed { top: 0; bottom: auto; left: 0; right: auto; }
.qnav.is-left { --fx: 1; }
.qnav.is-right { --fx: -1; }
.qnav.is-placed:not(.is-up) { --fy: 1; }
.qnav.is-up { --fy: -1; }
/* hidden while the hero fills the screen (it has its own way around; hero.js toggles mr-in-hero) */
.qnav { transition: opacity .5s var(--ease-out), translate .6s var(--ease-out), visibility 0s; }
/* (and while a section has a dialog open over the page: html.mr-dialog, realestate.js) */
:is(html.mr-in-hero, html.mr-dialog) .qnav { opacity: 0; translate: 0 12px; visibility: hidden; transition: opacity .3s, translate .3s, visibility 0s .3s; }

/* decorative layers (outline drawn by JS) */
.qnav__glass, .qnav__shadow, .qnav__edge { position: absolute; inset: 0; width: 100%; height: 100%; transform: scale(var(--fx), var(--fy)); }
.qnav__glass {
  clip-path: circle(37px at 37px 37px);
  background: linear-gradient(165deg, rgb(250 248 243 / .8), rgb(214 219 216 / .56));
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
}
/* in the journal hall the room under it changes every frame: plain frosted white there, no blur to recompute */
html.mr-in-hall .qnav__glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(165deg, rgb(250 248 243 / .95), rgb(226 229 227 / .9)); }
.qnav__shadow { overflow: visible; transform: translateY(14px) scale(var(--fx), var(--fy)); filter: blur(16px); opacity: .9; }
.qnav__shadow path { fill: rgb(7 23 57 / .26); }
.qnav__edge { overflow: visible; }
.qnav__edge path { fill: none; stroke: rgb(255 255 255 / .78); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* the tip beside the logo the first time the nav shows in a visit (menu.js shows it for three seconds) */
.qnav__hint {
  position: absolute; z-index: 3; top: 15px; inset-inline-start: calc(var(--hw) + 12px);
  width: max-content; max-width: 240px; margin: 0; padding: 9px 15px; border-radius: 14px;
  background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.6;
  box-shadow: 0 12px 30px -12px rgb(7 23 57 / .55); pointer-events: none;
  opacity: 0; transform: translateX(calc(var(--fx) * 10px)); transition: opacity .35s, transform .55s var(--ease-out);
}
.qnav__hint::before { content: ""; position: absolute; top: 17px; inset-inline-start: -5px; width: 11px; height: 11px; border-radius: 2px; background: inherit; transform: rotate(45deg); }
.qnav__hint.is-on { opacity: 1; transform: none; }
.qnav.is-open .qnav__hint { opacity: 0; }

/* logo: the head, fixed size */
.qnav__logo {
  position: absolute; z-index: 2; top: 0; inset-inline-start: 0; width: var(--hw); height: var(--hw);
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; pointer-events: auto;
}
.qnav__logo-circle {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: rgb(255 255 255 / .95); border: 1px solid rgb(255 255 255 / .98);
  box-shadow: 0 6px 20px rgb(7 23 57 / .16), inset 0 1px 2px rgb(255 255 255 / .95);
  transition: transform .45s var(--ease-out);
}
.qnav__mark { width: 36px; height: 36px; }
.qnav__logo:hover .qnav__logo-circle { transform: scale(1.06) rotate(-6deg); }
.qnav__logo { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }   /* (a drag, not a scroll) */

/* dragging: it lifts; dropped: it springs to its edge */
.qnav.is-dragging .qnav__logo { cursor: grabbing; }
.qnav.is-dragging .qnav__logo-circle { transform: scale(1.1); box-shadow: 0 14px 34px rgb(7 23 57 / .3), inset 0 1px 2px rgb(255 255 255 / .95); }
.qnav.is-ready { transition: transform .55s cubic-bezier(.3, 1.25, .5, 1), opacity .5s var(--ease-out), translate .6s var(--ease-out), visibility 0s; }
.qnav.is-ready.is-dragging { transition: opacity .5s var(--ease-out), translate .6s var(--ease-out), visibility 0s; }
@media (prefers-reduced-motion: reduce) { .qnav.is-ready { transition: opacity .5s, visibility 0s; } }
/* left alone a while: it fades, so what is under it can be read (back at once under the pointer or a finger) */
.qnav > :is(.qnav__glass, .qnav__shadow, .qnav__edge, .qnav__logo) { transition: opacity .6s; }
.qnav.is-idle:not(.is-open):not(.is-dragging) > :is(.qnav__glass, .qnav__shadow, .qnav__edge, .qnav__logo) { opacity: .42; }

/* the head on the left or the right edge, at the top of its box or (opening up) the bottom */
.qnav.is-left .qnav__logo { left: 0; right: auto; }
.qnav.is-right .qnav__logo { right: 0; left: auto; }
.qnav.is-placed:not(.is-up) .qnav__logo { top: 0; bottom: auto; }
.qnav.is-up .qnav__logo { top: auto; bottom: 0; }
.qnav.is-left .qnav__hint { left: calc(var(--hw) + 12px); right: auto; }
.qnav.is-right .qnav__hint { right: calc(var(--hw) + 12px); left: auto; }
.qnav.is-left .qnav__hint::before { left: -5px; right: auto; }
.qnav.is-right .qnav__hint::before { right: -5px; left: auto; }
.qnav.is-placed:not(.is-up) .qnav__hint { top: 15px; bottom: auto; }
.qnav.is-placed:not(.is-up) .qnav__hint::before { top: 17px; bottom: auto; }
.qnav.is-up .qnav__hint { top: auto; bottom: 15px; }
.qnav.is-up .qnav__hint::before { top: auto; bottom: 17px; }

/* body: sized by its content; rows pack toward the outside (icon outermost, label beside it) */
.qnav__body {
  position: absolute; z-index: 2; top: var(--hh); inset-inline-start: 0;
  width: max-content; min-width: calc(var(--hw) + 60px);
  max-height: calc(100vh - var(--header-h) - 130px); overflow-y: auto; scrollbar-width: none;
  display: flex; flex-direction: column; gap: 4px;
  padding: 4px 10px 14px 26px; padding-inline: 26px 10px;
  visibility: hidden; pointer-events: none;
}
.qnav.is-open .qnav__body { visibility: visible; pointer-events: auto; }
/* the body hangs from the head's edge (labels by the edge, icons toward the middle of the screen) */
.qnav.is-left .qnav__body { left: 0; right: auto; padding-left: 26px; padding-right: 10px; }
.qnav.is-right .qnav__body { right: 0; left: auto; padding-right: 26px; padding-left: 10px; }
/* the end by the shoulder keeps clear of its rounded corner (r 26): the first icon going down, the button going up */
.qnav.is-placed:not(.is-up) .qnav__body { top: var(--hh); bottom: auto; padding-top: 8px; padding-bottom: 14px; }
.qnav.is-up .qnav__body { top: auto; bottom: var(--hh); padding-top: 14px; padding-bottom: 18px; }
:is([dir="rtl"] .qnav.is-left, [dir="ltr"] .qnav.is-right) .qnav__item { flex-direction: row-reverse; }
:is([dir="rtl"] .qnav.is-left, [dir="ltr"] .qnav.is-right) .qnav__label { text-align: start; }

.qnav__item, .qnav__cta {
  opacity: 0; transform: translateX(calc(var(--fx) * -10px));
  transition: opacity .16s, transform .3s var(--ease-out);
}
.qnav.is-open :is(.qnav__item, .qnav__cta) {
  opacity: 1; transform: none;
  transition: opacity .35s calc(.3s + var(--i) * 30ms), transform .55s var(--ease-out) calc(.3s + var(--i) * 30ms);
}

.qnav__item { display: flex; justify-content: flex-end; align-items: center; gap: 12px; min-height: 52px; color: #263140; text-decoration: none; }
.qnav__label { max-width: 7.4em; font-size: 13.5px; font-weight: 600; line-height: 1.55; text-align: end; }
.qnav__icon {
  flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  color: #4F8F12; background: rgb(255 255 255 / .8); border: 1px solid rgb(255 255 255 / .9);
  box-shadow: 0 3px 12px rgb(7 23 57 / .1), inset 0 1px 2px rgb(255 255 255 / .9);
  transition: background-color .2s, transform .35s var(--ease-out), box-shadow .2s;
}
.qnav__icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.qnav__item:hover .qnav__icon, .qnav__item:focus-visible .qnav__icon { background: var(--white); transform: scale(1.07); box-shadow: 0 6px 18px rgb(7 23 57 / .16); }
.qnav__item:hover .qnav__label { color: var(--night); }
.qnav__item.is-active .qnav__icon { border-color: var(--green); box-shadow: 0 0 0 2px rgb(131 205 32 / .45), 0 3px 12px rgb(7 23 57 / .1); }
.qnav__item.is-active .qnav__label { color: var(--night); font-weight: 750; }

.qnav__cta {
  display: grid; place-items: center; min-height: 48px; margin-top: 10px; padding: 0 18px; border-radius: 999px;
  background: var(--green); color: var(--night); font-size: 14px; font-weight: 750; text-decoration: none;
  box-shadow: 0 8px 22px -6px rgb(79 143 18 / .55), inset 0 1px 0 rgb(255 255 255 / .45);
}
.qnav__cta:hover { background: var(--green-hi); }

/* phones: bottom corner, head at the bottom, body grows upwards */
@media (max-width: 767px) {
  .qnav { --fy: -1; top: auto; bottom: 14px; inset-inline-start: 12px; }
  .qnav__hint { top: auto; bottom: 15px; max-width: min(240px, calc(100vw - var(--hw) - 40px)); }
  .qnav__hint::before { top: auto; bottom: 17px; }
  .qnav__logo { top: auto; bottom: 0; }
  .qnav__glass { clip-path: circle(37px at 37px 37px); }
  .qnav__body { top: auto; bottom: var(--hh); padding-block: 14px 4px; max-height: calc(100svh - var(--header-h) - 120px); }
  .qnav__item { min-height: 48px; }
  .qnav__icon { width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .qnav__item, .qnav__cta, .qnav.is-open :is(.qnav__item, .qnav__cta), .qnav__icon, .qnav__logo-circle, .qnav__hint { transition: none !important; }
}