/* The site menu's big panels (Workflows, Industries, Resources). Shared by every v2 page and the
   homepage, so the menu is the same everywhere. The small dropdown basics (.navdrop) are in
   base.css and nav-workflows.css. Written by tools/v2/chrome.py, behaviour in assets/v2/menu.js. */

/* wide panels: the menu's one bold move. Each panel drops from under the bar, centred on the page */
.mega .navdrop-panel{position:fixed;left:50%;top:auto;transform:translateX(-50%);min-width:0;padding:0;border-radius:28px;overflow:hidden;box-shadow:0 40px 80px -36px rgba(44,38,32,.55)}
.mega.wide .navdrop-panel{width:min(980px,calc(100vw - 48px))}
.mega.mid .navdrop-panel{width:min(760px,calc(100vw - 48px))}
.mega.small .navdrop-panel{width:min(560px,calc(100vw - 48px))}
.mega .navdrop-panel::before{top:-18px;height:18px}
.mp{display:grid;grid-template-columns:minmax(0,1fr) 280px}
.mega.small .mp{grid-template-columns:minmax(0,1fr)}
.mp-l{padding:22px 22px 18px}
.mp-l>b{display:block;padding:0 12px 10px;font-family:var(--serif);font-weight:650;font-size:20px}
.mp-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 8px}
.mega.small .mp-grid{grid-template-columns:minmax(0,1fr)}
.mp-grid :is(a,span.soon){display:flex;flex-direction:column;gap:3px;padding:11px 12px;border-radius:14px;text-decoration:none;white-space:normal}
.mp-grid :is(a,span.soon) b{font-weight:700;font-size:15.5px;line-height:1.25;color:var(--ink)}
.mp-grid :is(a,span.soon) span{font-size:14px;line-height:1.4;color:var(--soft);font-weight:500}
.mp-grid :is(a,span.soon):hover,.mp-grid :is(a,span.soon):focus-visible{background:var(--deep)}
.mp-grid :is(a,span.soon):hover b{color:var(--clayd)}
.mp-grid .soon{display:flex;flex-direction:column;gap:3px;padding:11px 12px}
.mp-grid .soon b{font-weight:700;font-size:15.5px;color:var(--soft)}
.mp-grid .soon span{font-size:14px;color:var(--soft)}
.mp-grid .soon em{font-style:normal;font-size:12.5px;font-weight:800;color:var(--tinttext);background:var(--tint);border-radius:999px;padding:2px 8px;margin-left:6px}
.mp-all{display:inline-flex;margin:10px 12px 0;font-weight:700;font-size:15px;text-decoration:none}
.mp-all:hover{color:var(--clayd)}
/* the right side of the Workflows panel: one quiet way out for anyone who isn't sure */
.mp-r{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;padding:22px;background:var(--deep);min-height:100%}
.mp-r .mp-art{position:absolute;inset:0;overflow:hidden}
.mp-r .mp-art img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.mp-r .mp-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(243,236,223,0) 20%,rgba(243,236,223,.92) 62%,var(--deep) 100%)}
.mp-r b,.mp-r p,.mp-r a{position:relative}
.mp-r b{font-family:var(--serif);font-weight:650;font-size:22px;line-height:1.2}
.mp-r p{margin:0;font-size:15px;line-height:1.5;color:var(--soft2)}
.mp-r .cta{align-self:flex-start;min-height:46px;padding:0 20px;font-size:15px}
.mp-def{position:relative;display:flex;flex-direction:column;gap:12px}
/* pointing at a workflow swaps the right side for a closer look at it (Noah, 2026-10-08) */
.mp-r .mp-art{transition:opacity .2s ease}
.mp-r.show{justify-content:flex-start}
.mp-r.show .mp-art,.mp-r.show .mp-def{display:none}
.mp-d{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.mp-d[hidden]{display:none}
.js .mp-d:not([hidden]){animation:mpIn .2s ease both}
@keyframes mpIn{from{opacity:0}to{opacity:1}}
.mp-d>i{width:44px;height:44px;border-radius:14px;background:var(--mock);display:grid;place-items:center}
.mp-d>i svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mp-d>b{margin-top:2px}
.mp-d .mp-msg{margin:2px 0 0;padding:12px 14px;border-radius:18px 18px 18px 6px;background:var(--mock);border:1px solid var(--line2);font-size:14.5px;line-height:1.45;color:var(--ink)}
.mega .mp-go{margin-top:2px;font-weight:700;font-size:15px;text-decoration:none;color:var(--clayd)}
.mega .mp-go i{font-style:normal;display:inline-block;transition:transform .2s ease}
.mega .mp-go:hover i{transform:translateX(3px)}
/* Industries panel: storefront cards */
.mp-trades{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.mp-trades :is(a,span.soon){display:flex;flex-direction:column;gap:8px;text-decoration:none;padding:8px;border-radius:16px}
.mp-trades :is(a,span.soon):hover,.mp-trades :is(a,span.soon):focus-visible{background:var(--deep)}
.mp-trades img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:12px}
.mp-trades b{font-weight:700;font-size:15px;padding:0 4px}
.mp-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:14px;padding:14px 12px 0;border-top:1px solid var(--line2);font-size:14.5px;color:var(--soft)}
.mp-foot a{font-weight:700;text-decoration:none;color:var(--ink)}
.mp-foot a:hover{color:var(--clayd)}
.mega.mid .mp{grid-template-columns:minmax(0,1fr)}
/* the pinned header's panels open from the pinned bar */
.stickyhead .mega .navdrop-panel{top:64px}
.masthead .mega .navdrop-panel{top:76px}
.mnav .navdrop[open]>.navdrop-btn{background:rgba(44,38,32,.08)}
.navdrop-panel{transform-origin:50% 0}
.js .mega[open] .navdrop-panel{animation:megaIn .32s cubic-bezier(.2,.7,.2,1) both}
@keyframes megaIn{from{opacity:0;transform:translateX(-50%) translateY(-8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.mnav a[aria-current="page"],.fnav a[aria-current="page"]{background:rgba(44,38,32,.08)}
/* menu round 2: every job and resource carries its picture; Resources leads with the calculator */
.mp-grid :is(a,span).wi{display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:12px;row-gap:2px;align-items:start}
.mp-grid :is(a,span).wi>i{grid-row:span 2;width:38px;height:38px;border-radius:12px;background:var(--deep);display:grid;place-items:center;transition:background .2s ease}
.mp-grid :is(a,span).wi>i svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mp-grid :is(a,span).wi:hover>i{background:var(--mock)}
.mega.res .navdrop-panel{width:min(720px,calc(100vw - 48px))}
.mp.mp-res{grid-template-columns:minmax(0,1fr) 250px}
.mega .navdrop-panel .mp-calc{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:14px 14px 14px 0;padding:18px;border-radius:22px;background:var(--night);color:var(--page);text-decoration:none}
.mp-calc .cl{display:grid;grid-template-columns:repeat(4,22px);gap:5px;margin-bottom:6px}
.mp-calc .cl i{height:22px;border-radius:6px;background:rgba(251,246,236,.16)}
.mp-calc .cl i.bk{background:var(--clayd)}
.mp-calc b{font-family:var(--serif);font-weight:650;font-size:20px;line-height:1.2}
.mp-calc span{font-size:13.5px;line-height:1.4;color:#D8D2C8}
.mp-calc em{margin-top:auto;font-style:normal;font-weight:800;font-size:14px;color:#E7B98F}
.mp-calc:hover em{color:var(--page)}
/* site build: a page that isn't built yet shows in the menus as plain text with a Soon tag */
.mega span.soon{cursor:default}
.mega span.soon:not(.mp-calc) b{color:var(--soft)}
.mp-trades img{height:auto}
.mp-trades span.soon img{filter:saturate(.6)}
.mega .navdrop-panel span.mp-calc em{color:#E7B98F}
.mp-r .mp-art picture,.mp-trades picture{display:contents}
.mp-trades .soon em{font-style:normal;font-size:12px;font-weight:800;color:var(--tinttext);background:var(--tint);border-radius:999px;padding:1px 7px;margin-left:6px}

@media (max-width:899px){
  .mega .navdrop-panel{position:static;transform:none;width:auto!important;box-shadow:none;border-radius:16px;border:0;background:transparent;animation:none!important}
  .mp{grid-template-columns:minmax(0,1fr)}
  .mp-l{padding:0 0 6px}
  .mp-l>b,.mp-r,.mp-foot{display:none}
  .mp-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .mp-grid :is(a,span.soon){padding:10px 12px}
  .mp-grid :is(a,span.soon) span{display:none}
  .mp-trades{grid-template-columns:minmax(0,1fr);gap:0}
  .mp-trades :is(a,span.soon){flex-direction:row;align-items:center;gap:12px;padding:6px 8px}
  .mp-trades img{width:56px;border-radius:8px}
  .mp-all{margin:4px 12px 6px}
  .mp-grid :is(a,span).wi{grid-template-columns:32px minmax(0,1fr)}
  .mp-grid :is(a,span).wi>i{width:32px;height:32px;border-radius:10px}
  .mp-grid :is(a,span).wi>span{display:none}
  .mp-grid :is(a,span).wi>i{grid-row:auto}
  .mp-grid :is(a,span).wi{align-items:center}
  .mp.mp-res{grid-template-columns:minmax(0,1fr)}
  .mp-calc{margin:6px 0 10px}
}
@media (prefers-reduced-motion: reduce){
  .js .mega[open] .navdrop-panel,.js .mp-d:not([hidden]){animation:none}
  .mp-go i{transition:none}
}