/* Site-wide fixes shared by every page. */

/* Touch screens: small text links get a taller hit area (about 40px) without moving anything:
   the padding is cancelled by an equal negative margin, so the layout and look stay the same. */
@media (pointer:coarse){
footer a,.c-back,.c-facts a,.nx-all,.ab-list a,.sb-g a{display:inline-block;padding-block:10px;margin-block:-10px}
}

/* Image and video frames that hold a single image or video are positioned boxes, so the loading
   shimmer (.lz, see fadeImgs in proto.js) shows in them as it does on Deskspace and Ergonix. */
.x-f,.dk-open,.c-fan{position:relative}
/* Videos fade in like images once their poster (or first frame) is ready. */
video[data-fade]{opacity:0;transition:opacity .7s cubic-bezier(.22,.61,.36,1)}
video[data-fade][data-in]{opacity:1}
/* A video's poster, laid over it until the video has drawn its first frames (proto.js). */
.v-cover{position:absolute;pointer-events:none;opacity:0;transition:opacity .4s ease}
.v-cover[data-in]{opacity:1}
.v-cover[data-in][data-off]{opacity:0;transition-duration:.5s}
@media (prefers-reduced-motion:reduce){video[data-fade],.v-cover{transition:none}}

/* Buttons: the label rolls up to a copy of itself on hover (pointer devices), and the button
   gives slightly under a press. proto.js wraps the label in .bt-roll. */
:is(.btn, .cc-all){transition:transform .3s cubic-bezier(.2,.8,.2,1),background-color .2s,color .2s}
:is(.btn, .cc-all):active{transform:scale(.96);transition-duration:.12s}
.bt-roll{display:inline-block;overflow:hidden;line-height:1.25;vertical-align:top}
.bt-roll > span{position:relative;display:block;transition:transform .5s cubic-bezier(.65,0,.35,1)}
.bt-roll > span::after{content:attr(data-t);position:absolute;top:100%;left:0;white-space:nowrap}
@media (hover:hover){ :is(.btn, .cc-all):hover .bt-roll > span{transform:translateY(-100%)} }
@media (prefers-reduced-motion:reduce){ .bt-roll > span{transition:none} }

/* Case pages: the back link's thin arrow steps left on hover; the live link's note is quieter. */
.c-back-ar{flex:none;margin-right:10px;vertical-align:0;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.c-back:hover .c-back-ar{transform:translateX(-3px)}
.c-live-note{opacity:.55;font-weight:400;white-space:nowrap}

/* Footer: copyright on the left, legal and contact links on the right. Phones and tablets keep
   it to one quiet centred line under a hairline: copyright, Terms, Privacy. */
.rq-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 24px;padding-top:24px;padding-bottom:32px;font-size:var(--t-small);color:#5a5a5a}
.rq-foot a{color:#363636;text-decoration:none;transition:color .2s}
.rq-foot a:hover{color:#0a0a0a;text-decoration:underline;text-underline-offset:3px}
.rf-links,.rf-legal,.rf-contact{display:flex;flex-wrap:wrap;gap:12px 20px}
.rf-links{gap:12px 32px}
@media (max-width: 1024px){
.rq-foot{justify-content:center;gap:6px 18px;margin-top:48px;padding-top:18px;padding-bottom:24px;border-top:1px solid #0000001a;font-size:var(--t-caption);text-align:center}
.rf-links{display:contents}
.rf-contact{display:none}
.rf-legal{gap:6px 18px}
}

/* Menu bar: frosted glass that adapts to the page under it (proto.js sets data-tone). Phones get a
   softer blur, which costs about half as much to redraw while the page moves; without blur support,
   or with "reduce transparency" on, the bar is the same colour, solid. Open, it stays dark. */
.mnav[data-tone] .mn-panel{-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4)}
.mnav[data-tone] .mn-panel::before{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.1),inset 0 1px 0 rgba(255,255,255,0.08);transition:opacity .3s}
.mnav[data-tone][data-open=true] .mn-panel::before{opacity:0}
.mnav[data-tone=dark]:not([data-open=true]) .mn-panel{background-color:rgba(28,28,28,0.5)}
.mnav[data-tone=light]:not([data-open=true]) .mn-panel{background-color:rgba(245,245,245,0.62);box-shadow:0 8px 24px rgba(0,0,0,0.08)}
.mnav[data-tone=light]:not([data-open=true]) .mn-panel::before{box-shadow:inset 0 0 0 1px rgba(255,255,255,0.7),inset 0 1px 0 rgba(255,255,255,0.8)}
.mnav[data-tone] .mn-home{transition:scale .3s,color .49s var(--ez)}
.mnav[data-tone] .mn-toggle{transition:color .49s var(--ez)}
.mnav[data-tone=light]:not([data-open=true]) :is(.mn-home,.mn-toggle){color:#0a0a0a}
.mnav[data-tone=light]:not([data-open=true]) .mn-toggle:hover::before{background:rgba(10,10,10,0.06)}
.mnav[data-tone=light]:not([data-open=true]) :is(.mn-home,.mn-toggle):focus-visible::after{outline-color:rgba(10,10,10,0.5)}
@media (max-width: 767px){
.mnav[data-tone] .mn-panel{-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3)}
}
@media (prefers-reduced-transparency: reduce){
.mnav[data-tone] .mn-panel{-webkit-backdrop-filter:none;backdrop-filter:none}
.mnav[data-tone=dark]:not([data-open=true]) .mn-panel{background-color:rgba(24,24,24,0.96)}
.mnav[data-tone=light]:not([data-open=true]) .mn-panel{background-color:rgba(245,245,245,0.97)}
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
.mnav[data-tone=dark]:not([data-open=true]) .mn-panel{background-color:rgba(24,24,24,0.96)}
.mnav[data-tone=light]:not([data-open=true]) .mn-panel{background-color:rgba(245,245,245,0.97)}
}

/* Menu: the studio line sits centred in the preview box, over the logo grid; under it, what we
   do and LinkedIn. Phones: the box fills the free space and the row below is centred. */
.mnav .mn-tag{position:absolute;inset:0;z-index:3;margin:0;display:grid;place-content:center;padding:20px;text-align:center;font-family:'Instrument Serif',serif;font-size:30px;line-height:1.1;letter-spacing:-0.01em;color:var(--t1);background:radial-gradient(closest-side, rgba(10,10,10,0.82), rgba(10,10,10,0.3));pointer-events:none}
.mnav .mn-tag .it{display:block;color:var(--t2)}
.mnav .mn-line{flex:1 1 0;min-width:0;margin:0;color:var(--t2);font-size:var(--t-small);line-height:1.4}
/* Desktop: the box keeps the animation alone and the line sits in the bottom row. */
.mnav .mn-say{font-family:'Instrument Serif',serif;font-size:22px;line-height:1.15;color:var(--t1)}
.mnav .mn-say .it{color:var(--t2)}
.mnav .mn-what{display:none}
@media (min-width: 768px){ .mnav .mn-tag{display:none} }
@media (max-width: 767px){
.mnav .mn-spread{height:100%;grid-template-rows:auto minmax(160px, 1fr) auto}
.mnav .mn-media{height:auto;align-self:stretch;background:radial-gradient(closest-side, rgba(120,90,200,0.32), rgba(10,10,10,0) 72%), #121212}
.mnav .mn-media .mk-scene{display:none}
.mnav .mn-tag{background:none}
.mnav .mn-foot{justify-content:center;gap:10px}
.mnav .mn-line{flex:0 1 auto;text-align:center}
.mnav .mn-say{display:none}
.mnav .mn-what{display:inline}
}