/* Crevier menu. A clean white panel, like a clinic corridor: thin type, hairline rules, one ring as the mark.
   Rows open like sliding doors, one gold line sweeps down the panel, and a small readout says what each page is. */

.xmb-tab {
  position: fixed; left: 0; top: 50%; z-index: 60; translate: 0 -50%;
  display: grid; justify-items: center; gap: 12px; padding: 16px 10px 16px 9px;
  border: 2px solid #c8a13a; border-left: 0; border-radius: 0 3px 3px 0; cursor: pointer;
  background: #0b0b0c; color: #e6c968; font: inherit;
  box-shadow: 6px 0 24px rgba(0, 0, 0, 0.18);
  transition: translate 0.35s ease, opacity 0.35s ease, padding 0.25s ease;
}
.xmb-tab:hover { padding-left: 13px; }
.xmb-tab:focus-visible { outline: 2px solid #e6c968; outline-offset: 2px; }
.xmb-tab__ring { width: 18px; height: 18px; display: block; }
.xmb-tab__ring circle { fill: none; stroke: currentColor; stroke-width: 1.4; }
.xmb-tab__ring .dot { fill: #c8a13a; stroke: none; }
.xmb-tab__txt { writing-mode: vertical-rl; rotate: 180deg; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.14em; }
html.xmb-open .xmb-tab { translate: -110% -50%; opacity: 0; pointer-events: none; }
body:has(.lb.open) .xmb-tab { display: none; }
html.xmb-open { overflow: hidden; }
/* the old hamburger is replaced by this menu on small screens */
@media (max-width: 899px) { html.xmb-ready .nav-toggle { display: none; } }

.xmb { position: fixed; inset: 0; z-index: 500; }
.xmb[hidden] { display: none; }
.xmb__dim { position: absolute; inset: 0; background: rgba(8, 10, 12, 0.5); opacity: 0; transition: opacity 0.4s ease; }
.xmb.is-open .xmb__dim { opacity: 1; }

.xmb__panel {
  position: absolute; left: 0; top: 0; bottom: 0; width: min(430px, 92vw); overflow: hidden; overflow: clip;
  display: flex; flex-direction: column; color: #14161a;
  background:
    repeating-linear-gradient(90deg, rgba(20, 22, 26, 0.035) 0 1px, transparent 1px 56px),
    linear-gradient(180deg, #ffffff 0%, #f7f6f2 100%);
  box-shadow: 30px 0 80px rgba(0, 0, 0, 0.35);
  translate: -102% 0; transition: translate 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.xmb.is-open .xmb__panel { translate: 0 0; }
/* one gold line sweeps down the panel as it opens */
.xmb__panel::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, #c8a13a 30%, #c8a13a 70%, transparent);
  opacity: 0; pointer-events: none;
}
.xmb.is-open .xmb__panel::after { animation: xmbSweep 1.1s cubic-bezier(0.5, 0, 0.2, 1) 0.15s 1 both; }
@keyframes xmbSweep { 0% { top: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

.xmb__head { flex: none; display: flex; align-items: center; gap: 14px; padding: 22px 64px 18px 28px; background: #0b0b0c; color: #fff; border-bottom: 4px solid #c8a13a; }
.xmb__mark { width: 34px; height: 34px; flex: none; }
.xmb__mark circle { fill: none; stroke: #f7f6f2; stroke-width: 1.3; }
.xmb__mark .arc { stroke: #c8a13a; stroke-width: 2.4; stroke-linecap: round; }
.xmb__mark .dot { fill: #c8a13a; stroke: none; }
.xmb__mark g { transform-origin: 50% 50%; }
.xmb.is-open .xmb__mark .spin { animation: xmbSpin 1.4s cubic-bezier(0.3, 0.7, 0.2, 1) 0.2s 1 both; }
@keyframes xmbSpin { from { transform: rotate(-200deg); } to { transform: rotate(0); } }
.xmb__brand { font-size: 1.22rem; font-weight: 600; letter-spacing: 0.12em; line-height: 1.1; }
.xmb__brand small { display: block; margin-top: 4px; font-size: 0.74rem; font-weight: 400; letter-spacing: 0.03em; color: #e6c968; }
.xmb__close {
  position: absolute; top: 20px; right: 18px; width: 36px; height: 36px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid #c8a13a; background: transparent; color: #f7f6f2; font-size: 1.15rem; line-height: 1;
}
.xmb__close:hover { background: #c8a13a; color: #0b0b0c; }
.xmb__close:focus-visible { outline: 2px solid #e6c968; outline-offset: 2px; }
.xmb__row:focus-visible, .xmb__call:focus-visible { outline: 2px solid #7a5f12; outline-offset: -2px; }

/* the pages: a plain ruled list; the four services are indented under What we offer */
.xmb__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 0; display: flex; flex-direction: column; justify-content: center; overscroll-behavior: contain; }
.xmb__row {
  position: relative; flex: none; display: flex; align-items: center; gap: 16px; text-decoration: none; color: #14161a;
  padding: 0 28px; height: clamp(40px, 6.4vh, 56px); font-size: clamp(1.05rem, 2.7vh, 1.4rem); font-weight: 400; letter-spacing: 0;
  border-bottom: 1px solid #e8e6df; -webkit-tap-highlight-color: transparent;
  clip-path: inset(0 100% 0 0); transition: clip-path 0.6s cubic-bezier(0.6, 0, 0.2, 1) calc(var(--i) * 45ms + 0.2s);
}
.xmb.is-open .xmb__row { clip-path: inset(0 0 0 0); }
.xmb__row.sub { height: clamp(32px, 4.9vh, 42px); font-size: clamp(0.92rem, 2.1vh, 1.05rem); padding-left: 62px; color: #3a4047; }
.xmb__row.sub .xmb__ring { width: 8px; height: 8px; }
.xmb__ring { flex: none; width: 11px; height: 11px; border-radius: 50%; border: 1px solid #8a9199; position: relative; transition: border-color 0.25s, transform 0.3s ease; }
.xmb__row::before { /* the gold rule that draws across on hover */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: #7a5f12; transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.xmb__row:hover::before, .xmb__row:focus-visible::before { transform: scaleX(1); }
.xmb__row:hover .xmb__ring, .xmb__row:focus-visible .xmb__ring { border-color: #7a5f12; transform: scale(1.25); }
.xmb__row:hover, .xmb__row:focus-visible { background: rgba(200, 161, 58, 0.09); outline: none; }
.xmb__row.is-here { font-weight: 700; }
.xmb__row.is-here .xmb__ring { border-color: #7a5f12; }
.xmb__row.is-here .xmb__ring::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: #7a5f12; }
.xmb__row.sub.is-here .xmb__ring::after { inset: 1px; }

/* what the page you are pointing at is, in one line */
.xmb__foot { flex: none; border-top: 1px solid #e8e6df; padding: 14px 28px 20px; display: grid; gap: 14px; background: #fbfaf7; }
.xmb__read { margin: 0; min-height: 2.5em; font-size: 0.86rem; line-height: 1.3; color: #5d646c; display: flex; align-items: center; }
.xmb__call {
  display: flex; align-items: center; justify-content: center; gap: 10px; height: 46px; border-radius: 2px; text-decoration: none;
  background: #c8a13a; color: #0b0b0c; font-weight: 700; font-size: 0.98rem; letter-spacing: 0.01em; transition: background 0.25s, color 0.25s;
}
.xmb__call:hover { background: #0b0b0c; color: #e6c968; }
.xmb__call svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

@media (max-height: 560px) {
  .xmb__head { padding-top: 14px; padding-bottom: 12px; }
  .xmb__close { top: 12px; }
  .xmb__row { height: 36px; font-size: 1rem; }
  .xmb__row.sub { height: 30px; }
  .xmb__foot { padding: 10px 28px 12px; gap: 8px; }
  .xmb__read { display: none; }
  .xmb__call { height: 40px; }
}
@media (max-width: 560px) {
  .xmb-tab, .xmb-tab:hover {
    top: auto; left: auto; right: 10px; bottom: 10px; translate: 0 0; grid-auto-flow: column; align-items: center; gap: 9px;
    padding: 0 16px; height: 42px; border: 2px solid #c8a13a; border-radius: 999px; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
  }
  html.xmb-open .xmb-tab { translate: 0 150%; }
  .xmb-tab__txt { writing-mode: horizontal-tb; rotate: none; font-size: 0.8rem; }
  .xmb__row { padding: 0 22px; }
  .xmb__row.sub { padding-left: 52px; }
  .xmb__head, .xmb__foot { padding-left: 22px; }
  .xmb__foot { padding-right: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .xmb__panel, .xmb__row, .xmb__dim, .xmb-tab, .xmb__ring, .xmb__row::before { transition: none; }
  .xmb__row { clip-path: none; }
  .xmb.is-open .xmb__panel::after, .xmb.is-open .xmb__mark .spin { animation: none; }
}