/* Urban Sled — site-wide behaviour: hover previews, responsive switches, motion. Visual styling lives inline in each artboard. */
*{box-sizing:border-box}
:root{--accent:#7CC6FF}
.us-root{font-family:'Archivo',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;color:#F2F1EE;background:#0A0A0B;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.us-mono{font-family:'DM Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace}
.us-display{font-stretch:62%;font-weight:800;text-transform:uppercase;letter-spacing:-0.005em;line-height:.86}
.us-root a{transition:color .2s}
.us-root img{max-width:100%}

/* Primary nav: links on desktop, menu button on phones */
.nav-links{display:flex}
.nav-burger{display:none}
@media (max-width:860px){.nav-links{display:none}.nav-burger{display:inline-flex}}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 22px;text-decoration:none;border:0;cursor:pointer;font:inherit;transition:background .2s,color .2s,transform .2s}
.btn:hover{transform:translateY(-1px)}
.btn-accent{background:var(--accent);color:#0A0A0B}
.btn-accent:hover{background:#F2F1EE;color:#0A0A0B}
.btn-ghost{background:transparent;color:#F2F1EE;box-shadow:inset 0 0 0 1px rgba(242,241,238,.4)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px #F2F1EE;color:#F2F1EE}
.us-root a.btn-accent:hover{color:#0A0A0B}

/* Work tiles — hover preview. In the build, .tile-media swaps the poster for a muted Vimeo loop on hover. */
.tile{position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit}
.tile-media{position:relative;overflow:hidden;aspect-ratio:16/9;background:#141416}
.tile-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s cubic-bezier(.2,.7,.2,1),filter .4s}
.tile-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,11,0) 50%,rgba(10,10,11,.7));opacity:.8;transition:opacity .4s}
.tile-preview{position:absolute;left:14px;top:14px;display:flex;align-items:center;gap:8px;padding:6px 10px;background:rgba(10,10,11,.72);opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .3s}
.tile-bar{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--accent)}
.tile-arrow{transition:transform .3s,color .3s;color:#A3A19C}
.tile:hover .tile-media>img,.tile.is-hover .tile-media>img{transform:scale(1.06);filter:brightness(1.08) saturate(1.08)}
.tile:hover .tile-scrim,.tile.is-hover .tile-scrim{opacity:.35}
.tile:hover .tile-preview,.tile.is-hover .tile-preview{opacity:1;transform:none}
.tile:hover .tile-bar{animation:usbar 9s linear forwards}
.tile.is-hover .tile-bar{width:38%}
.tile:hover .tile-arrow,.tile.is-hover .tile-arrow{color:var(--accent);transform:translate(4px,-4px)}
.tile:hover .tile-title,.tile.is-hover .tile-title{color:var(--accent)}
.tile-title{transition:color .3s}
@keyframes usbar{from{width:0}to{width:100%}}

/* Title-card poster for projects whose Vimeo poster frame is still to come */
.card-pattern{background-color:#141416;background-image:repeating-linear-gradient(135deg,rgba(242,241,238,.035) 0 1px,transparent 1px 11px)}

/* Showreel hero */
.hero{position:relative;height:880px;overflow:hidden;background:#000}
@media (max-width:860px){.hero{height:760px}}
.hero-media{position:absolute;inset:-2%;width:104%;height:104%;object-fit:cover;animation:uskb 22s ease-in-out infinite alternate}
@keyframes uskb{from{transform:scale(1.02) translateX(0)}to{transform:scale(1.12) translateX(-1.5%)}}
.rec-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);animation:usblink 1.4s steps(2,start) infinite}
@keyframes usblink{to{visibility:hidden}}

/* Client logo marquee */
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;align-items:center;gap:72px;width:max-content;animation:usmarq 48s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes usmarq{to{transform:translateX(-50%)}}

/* Filter chips */
.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:0;cursor:pointer;font:inherit;background:transparent;color:#A3A19C;box-shadow:inset 0 0 0 1px #2A2A2E;transition:color .2s,box-shadow .2s,background .2s}
.chip:hover{color:#F2F1EE;box-shadow:inset 0 0 0 1px #6B6964}
.chip.is-on{background:#F2F1EE;color:#0A0A0B;box-shadow:none}

/* Form fields */
.field{width:100%;min-height:52px;padding:14px 0;background:transparent;border:0;border-bottom:1px solid #3A3A3F;color:#F2F1EE;font:inherit;font-size:18px;outline:none;transition:border-color .2s;border-radius:0}
.field:focus{border-bottom-color:var(--accent)}
.field::placeholder{color:#6B6964}
select.field{appearance:none;-webkit-appearance:none;cursor:pointer}
select.field option{background:#141416;color:#F2F1EE}

/* Player controls progress (featured film + reel modal) */
.play-progress{height:3px;background:var(--accent);width:0;animation:usbar 30s linear forwards}

.us-root :focus-visible{outline:2px solid var(--accent);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .hero-media,.marquee-track,.rec-dot,.tile:hover .tile-bar,.play-progress{animation:none}
  .tile-media>img{transition:none}
}