/* Work menu: graphic collage that pops out of the header, tile by tile.
   Markup: .work-menu > .work-trigger + .wm-stage (positioned against the sticky .site-header). */
.wm-stage{
  --spring:cubic-bezier(.34,1.56,.64,1);
  --wm-blue:#1440ff; --wm-coral:#ff5848; --wm-yellow:#ffe14d; --wm-bone:#efede7; --wm-black:#0b0b0d; --wm-green:#00e676;
  position:absolute;z-index:60;top:calc(100% - 10px);
  right:max(16px,calc((100vw - 1180px)/2 - 60px));
  width:700px;height:660px;transform-origin:top right;transform:scale(var(--wm-fit,1));
  pointer-events:none;font-family:var(--sans,Inter,system-ui,sans-serif);color:#fff;
}
.work-menu.open .wm-stage{pointer-events:auto}
.site-header .nav .work-trigger{display:inline-flex;align-items:center;gap:6px}
.work-trigger .caret{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s ease;opacity:.7}
.work-menu.open .caret{transform:translateY(1px) rotate(-135deg)}

.wm-piece{position:absolute;opacity:0;transform:translate(70px,-60px) scale(.35) rotate(var(--r,-6deg));transform-origin:80% 0;
  transition:opacity .18s ease,transform .22s ease;transition-delay:0s}
.work-menu.open .wm-piece{opacity:1;transform:none;transition:opacity .25s ease,transform .62s var(--spring);transition-delay:calc(var(--i) * 85ms)}

.site-header .nav a.wm-tile{display:flex;padding:0;border:0;color:#fff;text-decoration:none;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.wm-block{position:relative;flex:none;padding:22px 22px 18px 24px;display:flex;flex-direction:column;justify-content:space-between}
.wm-num{font-family:var(--mono,"IBM Plex Mono",monospace);font-size:.72rem;font-weight:500;display:flex;align-items:center;gap:12px}
.wm-num::after{content:"";width:26px;height:1.5px;background:currentColor;opacity:.8}
.wm-title{font-family:var(--display,"Bebas Neue",sans-serif);font-weight:400;line-height:.88;letter-spacing:.01em;display:flex;align-items:center;gap:.28em}
.wm-arrow{font-family:var(--sans,Inter,sans-serif);font-size:.5em;transition:transform .25s var(--spring)}
.wm-tags{font-size:.7rem;font-weight:500;opacity:.9;line-height:1.3}
.wm-pic{position:relative;flex:1;overflow:hidden;background:#111}
.wm-pic img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.12);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.work-menu.open .wm-pic img{transform:scale(1);transition-delay:calc(var(--i) * 85ms + 120ms)}
.wm-num,.wm-title,.wm-tags{opacity:0;transform:translateY(10px);transition:opacity .15s,transform .15s}
.work-menu.open .wm-num,.work-menu.open .wm-title,.work-menu.open .wm-tags{opacity:1;transform:none;transition:opacity .3s ease,transform .45s var(--spring)}
.work-menu.open .wm-num{transition-delay:calc(var(--i) * 85ms + 180ms)}
.work-menu.open .wm-title{transition-delay:calc(var(--i) * 85ms + 230ms)}
.work-menu.open .wm-tags{transition-delay:calc(var(--i) * 85ms + 280ms)}
.site-header .nav a.wm-tile:hover,.site-header .nav a.wm-tile:focus-visible{z-index:5;border:0}
.work-menu.open a.wm-tile:hover,.work-menu.open a.wm-tile:focus-visible{transform:translateY(-5px) rotate(-.6deg);transition:transform .3s var(--spring)}
a.wm-tile:focus-visible{outline:2px solid var(--wm-green);outline-offset:4px}
a.wm-tile:hover .wm-arrow{transform:translateX(6px)}
a.wm-tile:hover .wm-pic img{transform:scale(1.06)}
a.wm-tile[aria-current] .wm-num::before{content:"You are here";position:absolute;right:16px;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;opacity:.75}

.wm-t1{left:25px;top:0;width:585px;height:189px;--r:-8deg}
.wm-t1 .wm-block{width:331px;background:var(--wm-blue)}
.wm-t1 .wm-title{font-size:52px}
.wm-t2{left:0;top:165px;width:583px;height:174px;--r:5deg}
.wm-t2 .wm-block{width:291px;background:var(--wm-coral)}
.wm-t2 .wm-title{font-size:50px}
.wm-t3{left:48px;top:327px;width:323px;height:151px;--r:-6deg}
.wm-t3 .wm-block{width:177px;background:var(--wm-yellow);color:#121212}
.wm-t3 .wm-title{font-size:44px}
.wm-t4{left:389px;top:327px;width:311px;height:151px;--r:7deg}
.wm-t4 .wm-block{width:166px;background:var(--wm-bone);color:#121212}
.wm-t4 .wm-title{font-size:44px}
.wm-t4 .wm-tags{color:#55524b}
.wm-t5{left:223px;top:478px;width:450px;height:127px;--r:-4deg}
.wm-t5 .wm-block{width:238px;background:var(--wm-black);border:1px solid rgba(255,255,255,.11);border-right:0}
.wm-t5 .wm-title{font-size:36px}
.wm-t5 .wm-pic{display:grid;grid-template-columns:repeat(3,1fr)}
.wm-t5 .wm-pic img{height:127px}

.wm-deco{pointer-events:none}
.wm-d-blue{left:553px;top:132px;width:96px;height:97px;background:#1d63ff;--r:12deg}
.wm-d-green{left:608px;top:478px;width:65px;height:127px;background:var(--wm-green);--r:10deg}
.wm-dots{width:46px;height:46px;background-image:radial-gradient(#00e676 1.3px,transparent 1.6px);background-size:11px 11px}
.wm-dots1{left:648px;top:612px}
.wm-dots2{left:305px;top:14px;background-image:radial-gradient(#fff 1.2px,transparent 1.5px)}
.work-menu.open .wm-dots2{opacity:.35}

@media (max-width:760px){.wm-stage{right:auto;left:16px;transform-origin:top left}}
@media (prefers-reduced-motion:reduce){
  .wm-piece,.work-menu.open .wm-piece,.wm-num,.wm-title,.wm-tags,.wm-pic img{transition:opacity .2s ease!important;transform:none!important}
}
.site-header .nav a.wm-tile[aria-current]{border:0}
.site-header{overflow-x:clip} /* keep the unscaled stage from widening the page on phones */

/* Tile 05: Branded Realities (added Oct 8); All Work moves down a row */
.wm-stage{height:760px}
.wm-t6{left:12px;top:470px;width:478px;height:135px;--r:5deg}
.wm-t6 .wm-block{width:238px;background:#00d4e0;color:#0b0b0d}
.wm-t6 .wm-title{font-size:38px}
.wm-t6 .wm-tags{color:#0b3a3e}
.wm-t5{top:600px}
.wm-d-green{top:600px}
.wm-dots1{top:734px}

/* Tiles 06 Gonzaga and 07 Brightline (added Oct 9); All Work moves down another row */
.wm-stage{height:870px}
.wm-t7{left:0;top:600px;width:345px;height:130px;--r:-5deg}
.wm-t7 .wm-block{width:190px;background:#7a3cff}
.wm-t7 .wm-title{font-size:36px}
.wm-t8{left:355px;top:596px;width:345px;height:130px;--r:6deg}
.wm-t8 .wm-block{width:190px;background:#ff3ea5}
.wm-t8 .wm-title{font-size:34px}
.wm-t5{top:735px}
.wm-d-green{top:735px}
.wm-dots1{top:869px}

/* Oct 9 tighten: same collage, but every row sits 10px below the one above,
   so no tile covers another tile's title or tags. */
.wm-stage{height:960px}
.wm-t1{top:0;height:165px}
.wm-t2{top:175px;height:168px}
.wm-t3,.wm-t4{top:353px;height:151px}
.wm-t6{top:514px;height:145px}
.wm-t7,.wm-t8{top:669px;height:135px}
.wm-t7 .wm-block{width:200px}
.wm-t8 .wm-block{width:210px}
.wm-t5{top:814px}
.wm-d-blue{top:118px}
.wm-d-green{top:814px}
.wm-dots1{top:948px}

/* Oct 9 flush: tiles butt against each other, no channels */
.wm-stage{height:900px}
.wm-t1{top:0}
.wm-t2{top:165px}
.wm-t3,.wm-t4{top:333px}
.wm-t4{left:371px}
.wm-t6{top:484px}
.wm-t7,.wm-t8{top:629px}
.wm-t8{left:345px}
.wm-t5{top:764px}
.wm-d-green{top:764px}
.wm-dots1{top:895px}

/* Backdrop: the page dims and slow color light drifts behind the menu while it is open */
.wm-backdrop{position:fixed;inset:0;z-index:49;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:
    radial-gradient(40vmax 40vmax at 20% 30%,rgba(20,64,255,.55),transparent 60%),
    radial-gradient(35vmax 35vmax at 80% 25%,rgba(255,62,165,.45),transparent 60%),
    radial-gradient(38vmax 38vmax at 70% 85%,rgba(0,212,224,.40),transparent 60%),
    radial-gradient(30vmax 30vmax at 15% 85%,rgba(122,60,255,.45),transparent 60%),
    rgba(8,9,14,.86);
  background-size:160% 160%,170% 170%,150% 150%,180% 180%,auto;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.wm-backdrop.on{opacity:1;pointer-events:auto;animation:wmDrift 14s ease-in-out infinite alternate}
@keyframes wmDrift{
  0%{background-position:0% 0%,100% 0%,100% 100%,0% 100%,0 0}
  50%{background-position:60% 40%,40% 60%,30% 50%,60% 30%,0 0}
  100%{background-position:100% 100%,0% 100%,0% 0%,100% 0%,0 0}}
@media (prefers-reduced-motion:reduce){.wm-backdrop.on{animation:none}}