/* Mach Advisory: "Our Services" menu. Desktop mega menu (#dd-prac, 1061px and up) and the stage-grouped mobile accordions (#menu, 1060px and below).
   Markup is generated by mega_menu() and mobile_services_menu() in tools/mach.py; behaviour is in mach-menu.js. Loads after mach.css, which stays unchanged.
   Desktop classes are mg-*, mobile classes are m-*; see docs/services-menu.md. */

/* ---------- desktop: two-pane mega menu ---------- */
.dd.mega{--mh:372px;left:0;right:0;height:var(--mh);max-height:calc(100vh - 112px);padding:12px;gap:0 12px;grid-template-columns:240px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;background:#17171b}
.mega .vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mega a,.mega button{-webkit-tap-highlight-color:transparent}
.mega :focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:10px}

/* rail: the three practices as tabs */
.mg-rail{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:4px;min-height:0;padding:2px}
.mg-tab{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:9px;row-gap:2px;align-items:start;width:100%;text-align:left;padding:11px 12px 10px;flex:none;border-radius:16px;border:1px solid transparent;background:transparent;color:var(--text);cursor:pointer;transition:background .15s,border-color .15s}
.mg-tab:hover{background:rgba(255,255,255,.05)}
.mg-tab[aria-selected=true]{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);background:color-mix(in srgb,var(--c) 14%,#17171b);border-color:color-mix(in srgb,var(--c) 45%,transparent)}
.mg-dot{grid-column:1;grid-row:1;width:8px;height:8px;border-radius:50%;background:var(--c);margin-top:6px;transition:box-shadow .2s}
.mg-tab[aria-selected=true] .mg-dot{box-shadow:0 0 0 3px rgba(255,255,255,.12),0 0 14px var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 28%,transparent),0 0 14px var(--c)}
.mg-tn{grid-column:2/4;grid-row:1;font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:#ececf0}
.mg-tab[aria-selected=true] .mg-tn{color:#fff}
.mg-tg{grid-column:2;grid-row:2;font-size:12px;line-height:1.4;color:var(--text2)}
.mg-tab[aria-selected=true] .mg-tg{color:#b9b9c2}
.mg-n{grid-column:3;grid-row:2;align-self:end;min-width:24px;height:21px;padding:0 7px;border-radius:999px;display:inline-grid;place-items:center;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;color:#c9c9d1;background:rgba(255,255,255,.08)}
.mg-tab[aria-selected=true] .mg-n{color:#fff;background:rgba(255,255,255,.16);background:color-mix(in srgb,var(--c) 30%,transparent)}

/* rail footer (last in the DOM, so the Tab order is tabs, panel, footer) */
.mg-foot{grid-column:1;grid-row:2;margin:0 2px 2px;padding:10px 14px 9px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--stroke);display:flex;flex-direction:column;gap:3px}
.mg-foot b{font-size:13.5px;font-weight:600;color:#ececf0}
.mg-foot a{display:inline-flex;align-items:center;min-height:32px;align-self:flex-start;margin:-6px 0 -9px -6px;padding:0 6px;border-radius:8px;color:var(--link);font-size:13px;font-weight:500}
.mg-foot a::after,.mg-all::after{content:"\2192";display:inline-block;margin-left:6px;transition:transform .15s}
.mg-foot a:hover::after,.mg-all:hover::after{transform:translateX(3px)}
.mg-foot a:hover{text-decoration:underline;text-underline-offset:4px}

/* pane: the active practice */
.mg-panel{grid-column:2;grid-row:1/-1;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);row-gap:7px;min-width:0;min-height:0;padding:12px 16px;border-radius:18px;border:1px solid rgba(255,255,255,.08);
 background:#1b1b20;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 9%,#1c1c21),#1a1a1e 62%);animation:mgin .2s ease both}
.mg-panel[hidden]{display:none}
@keyframes mgin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.mg-panel{animation:none}.mg-tab,.mg-dot{transition:none}}

.mg-head{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;padding-bottom:7px;border-bottom:1px solid var(--stroke)}
.mg-ht{min-width:0;display:flex;align-items:baseline;gap:4px 14px;flex-wrap:wrap}
.mg-name{font-size:17px;font-weight:600;letter-spacing:-.015em;color:#fff}
.mg-tag{font-size:13px;color:var(--text2)}
.mg-all{display:inline-flex;align-items:center;min-height:32px;margin:-5px -8px -5px 0;padding:0 8px;border-radius:8px;color:var(--link);font-size:13.5px;font-weight:500;white-space:nowrap}

/* stages: one column each, heading block (row 1, equal height across columns via subgrid) plus the link list (row 2). Only this area can scroll. */
.mg-groups{--gap:10px;grid-column:1;grid-row:2;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-rows:auto auto;column-gap:var(--gap);align-content:start;align-items:start;min-height:0;
 overflow-y:auto;overscroll-behavior:contain;padding:6px;margin:-6px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.mg-g{display:grid;grid-row:span 2;grid-template-rows:subgrid;min-width:0}
@supports not (grid-template-rows:subgrid){.mg-g{display:block}.mg-sh{min-height:62px}}
.mg-sh{position:relative;padding:17px 8px 6px}
/* journey strip: a hollow dot above each stage heading and a thin line on to the next dot */
.mg-sh::after{content:"";position:absolute;z-index:1;left:8px;top:1px;width:9px;height:9px;box-sizing:border-box;border:1.5px solid var(--c);border-radius:50%;background:#1c1c21;background:color-mix(in srgb,var(--c) 7%,#1c1c21)}
.mg-sh::before{content:"";position:absolute;left:12px;top:5px;right:calc(-1 * var(--gap) - 12px);height:1px;background:rgba(255,255,255,.2);background:color-mix(in srgb,var(--c) 34%,transparent)}
.mg-g:last-child .mg-sh::before{display:none}
.mg-gh{margin:0;display:flex;align-items:baseline;gap:8px;line-height:1.2}
.mg-no{font-size:11px;font-weight:600;letter-spacing:.06em;font-variant-numeric:tabular-nums;color:var(--text2)}
.mg-sn{font-size:14px;font-weight:600;letter-spacing:-.005em;color:var(--c)}
.mg-sd{margin:3px 0 0;font-size:12px;line-height:1.3;color:var(--text2)}
.mg-g li+li{margin-top:2px}

/* page rows: text only, a full page name and a one-line subtext. No pills or chips. */
.mg-l{display:block;padding:5px 8px;border-radius:8px;transition:background .15s}
.mg-l b{display:block;font-size:13.5px;font-weight:600;line-height:1.27;letter-spacing:-.005em;color:#ececf0}
.mg-l span{display:block;font-size:12.5px;line-height:1.33;color:var(--text2);margin-top:1px}
.mg-l:hover,.mg-l:focus-visible{background:rgba(255,255,255,.075)}
.mg-l:hover b,.mg-l:focus-visible b{color:#fff}
.mg-l:hover span,.mg-l:focus-visible span{color:#b9b9c1}
/* vendor editions: child rows under their parent, indented behind a thin vertical rule */
.mg-kids{margin:0 0 2px 8px;border-left:1px solid rgba(255,255,255,.2);border-left-color:color-mix(in srgb,var(--c) 38%,transparent)}
.mg-kids li+li{margin-top:1px}
.mg-l.mg-e{padding:4px 8px 4px 13px}
.mg-l.mg-e b{font-size:13px;font-weight:500}
.mg-l.mg-e span{font-size:12px}
.mg-new{font-style:normal;margin-left:4px;font-size:10px;font-weight:600;letter-spacing:.07em;color:#d9a8ff;white-space:nowrap}

/* dense rows: switched on by the build when a stage has more than 3 rows. The subtext leaves the layout but stays for screen readers and as the link tooltip. */
.mg-panel[data-dense] .mg-l span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mg-panel[data-dense] .mg-l b{font-weight:500;font-size:13.5px;line-height:1.3}
.mg-panel[data-dense] .mg-l.mg-e b{font-size:13px}
.mg-panel[data-dense] .mg-g li+li{margin-top:1px}

/* tighter at the 1061 to 1240 end of the range */
@media (max-width:1240px){
 .dd.mega{--mh:392px;grid-template-columns:232px minmax(0,1fr)}
 .mg-panel{padding:12px}
 .mg-groups{--gap:6px}
}
@media (max-width:1100px){.dd.mega{--mh:408px}}
/* scroll safety valve: if a practice ever has more links than fit, only the stage area scrolls and its bottom edge fades; the box never grows */
.mg-groups[data-more]{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 34px),transparent)}

/* ---------- mobile: Our Services accordions grouped by stage (the hamburger menu, 1060px and below) ---------- */
/* a long open panel must not slide under a collapsing browser toolbar, and must not scroll the page behind it */
.menu{overscroll-behavior:contain}
@supports (height:100dvh){.menu{max-height:calc(100dvh - 100px)}}
.menu details.m-prac[open]>summary{background:var(--fill);background:color-mix(in srgb,var(--c) 13%,transparent)}
.menu .m-prac a,.menu .m-prac summary{-webkit-tap-highlight-color:transparent}
.menu .m-prac a:active,.menu .m-prac summary:active{background:var(--fill2)}
.menu .m-prac a:focus-visible,.menu .m-prac summary:focus-visible{outline-offset:-2px}
/* rows: 44px high at least, wrap to 2 lines when a page name is long, never clip */
.menu .sub.st{padding:2px 0 8px 6px}
.menu .sub.st a{min-height:44px;padding:6px 12px;font-size:15px;line-height:1.28;color:var(--text);gap:8px;border-radius:12px;overflow-wrap:anywhere}
.menu .sub.st a.ov{color:var(--link);font-weight:500}
.menu .sub.st a.ov::after{content:"\2192";margin-left:auto;padding-left:8px}
.menu .m-new{font-style:normal;font-size:11px;font-weight:600;letter-spacing:.07em;color:#d9a8ff;white-space:nowrap}
/* stage subhead: not a link; small caps in the practice color with a hairline, the number quieter */
.menu .m-sh{display:flex;align-items:center;gap:8px;padding:12px 12px 1px;font-size:11px;font-weight:600;letter-spacing:.1em;line-height:1.2;text-transform:uppercase;color:var(--c);cursor:default;user-select:none;-webkit-user-select:none}
.menu .m-sh i{font-style:normal;font-size:11px;font-weight:500;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--text2)}
.menu .m-sh::after{content:"";flex:1;height:1px;margin-left:4px;background:rgba(255,255,255,.18);background:color-mix(in srgb,var(--c) 30%,transparent)}
/* vendor editions: the same row, nested under the parent behind a thin guide line */
.menu .m-eds{margin:0 0 2px 18px;border-left:1px solid rgba(255,255,255,.2);border-left-color:color-mix(in srgb,var(--c) 40%,transparent)}
.menu .sub.st .m-eds a{padding:6px 10px 6px 12px;font-size:14.5px;border-radius:0 12px 12px 0}