/* Studio finish, round 3: a full-screen phone menu, project names that play their film beside the cursor,
   no tech-stack row, and the UK time in the footer. */

/* A plumbing firm doesn't need our tech stack */
.tools-built { display: none !important; }

/* Phone menu: the whole screen, page names rising in one by one, how to reach us at the bottom. Every page has it,
   Privacy and Legal included (:is keeps the rules exactly as strong as when they were .dark-site only) */
@media (max-width: 760px) {
  :is(.dark-site, body) .nav .nav-links { position: fixed; inset: 0; z-index: -1; display: flex; flex-direction: column; justify-content: flex-start; gap: 0;
    height: 100dvh; padding: 96px var(--gutter, 20px) max(28px, env(safe-area-inset-bottom)); background: #000000; color: #EFECE5; box-shadow: none;
    clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .7s cubic-bezier(.76, 0, .24, 1), visibility 0s linear .7s; }
  :is(.dark-site, body) .nav.open .nav-links { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .7s cubic-bezier(.76, 0, .24, 1), visibility 0s; }
  :is(.dark-site, body) .nav .nav-links a { display: block; padding: 10px 0 12px; border-radius: 0; box-shadow: 0 1px 0 rgba(239, 236, 229, .1); background: none; opacity: 0;
    font-family: var(--font); font-size: 44px !important; font-weight: 500; line-height: 1; letter-spacing: -.04em; transform: translateY(36px);
    transition: transform .8s cubic-bezier(.22, .61, .36, 1), opacity .6s ease; }
  :is(.dark-site, body) .nav.open .nav-links a { opacity: 1; transform: none; }
  :is(.dark-site, body) .nav.open .nav-links a:nth-child(1) { transition-delay: .18s; }
  :is(.dark-site, body) .nav.open .nav-links a:nth-child(2) { transition-delay: .24s; }
  :is(.dark-site, body) .nav.open .nav-links a:nth-child(3) { transition-delay: .30s; }
  :is(.dark-site, body) .nav.open .nav-links a:nth-child(4) { transition-delay: .36s; }
  :is(.dark-site, body) .nav.open .nav-links a:nth-child(5) { transition-delay: .42s; }
  :is(.dark-site, body) .nav.open, :is(.dark-site, body) .nav.open.on-dark.scrolled { box-shadow: none; }
  .pl-menu-foot { margin-top: auto; display: grid; justify-items: start; gap: 6px; font-size: 15px; color: rgba(239, 236, 229, .6); opacity: 0; transition: opacity .6s ease; }
  :is(.dark-site, body) .nav.open .pl-menu-foot { opacity: 1; transition-delay: .5s; }
  :is(.dark-site, body) .nav .nav-links .pl-menu-foot a { padding: 0; box-shadow: none; opacity: 1; transform: none; color: #EFECE5; font-family: var(--font-text, "Geist", sans-serif); font-size: 18px !important; letter-spacing: -.01em; text-decoration: none; }
  :is(.dark-site, body) .nav .pl-menu-foot span { font-family: var(--font); }   /* the case pages set spans in Geist */
  html.pl-menu-open, html.pl-menu-open body { overflow: hidden; }
}
@media (min-width: 761px) { .pl-menu-foot { display: none; } }

/* Work list: each name plays its film beside the cursor */
.pl-peek { position: fixed; left: 0; top: 0; z-index: 55; width: min(30vw, 440px); aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; pointer-events: none;
  background: #141414; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); transform: translate3d(var(--x, -999px), var(--y, -999px), 0) scale(.6); opacity: 0;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1), opacity .4s ease; }
.pl-peek.pl-show { transform: translate3d(var(--x), var(--y), 0) scale(1); opacity: 1; }
.pl-peek video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transition: opacity .4s ease; }
.pl-peek video.pl-on { opacity: 1; }

/* Footer: the time where we are, and when we reply */
.pl-local { color: inherit; opacity: .8; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  :is(.dark-site, body) .nav .nav-links .pl-menu-foot a.pl-book { margin-bottom: 14px; padding: 0 18px; line-height: 48px; border-radius: 3px; background: #EFECE5; color: #000000; font-weight: 600; font-size: 16px !important; }
}