/* Techmen Creative Production — dedicated video gallery v30
   This subsystem intentionally does not use the image masonry engine. */

html body #portfolio .new-work-card:not(.portfolio-video-card) .new-work-visual,
html body #portfolio .new-work-card:not(.portfolio-video-card) .new-work-visual img{
  cursor:default!important;
}

/* Dedicated section shell */
html body #portfolio #work-video .discipline-grid.tm-video-layout-ready,
html body #portfolio #work-motion .discipline-grid.tm-video-layout-ready{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  columns:auto!important;
  column-count:initial!important;
  column-gap:0!important;
}
html body #portfolio #work-video .discipline-grid.tm-video-layout-ready>.stable-masonry-column,
html body #portfolio #work-motion .discipline-grid.tm-video-layout-ready>.stable-masonry-column{
  display:none!important;
}

.tm-video-group{display:block!important;width:100%!important;max-width:none!important;min-width:0!important}
.tm-video-group+.tm-video-group{
  margin-top:34px!important;
  padding-top:24px!important;
  border-top:1px solid rgba(22,17,31,.11)!important;
}
.tm-video-format-label{
  display:flex!important;
  align-items:center!important;
  gap:11px!important;
  margin:0 0 15px!important;
  color:#77717d!important;
  font:800 7px/1 Montserrat,Arial,sans-serif!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
}
.tm-video-format-label:after{
  content:""!important;
  display:block!important;
  flex:1 1 auto!important;
  height:1px!important;
  background:linear-gradient(90deg,rgba(22,17,31,.13),transparent)!important;
}

/* Flex is deliberate: old page grid/masonry rules cannot change the number of video cards per row. */
.tm-video-row{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:flex-start!important;
  width:100%!important;
  max-width:none!important;
  columns:auto!important;
  column-count:initial!important;
  margin:0!important;
  padding:0!important;
}
.tm-video-wide-row{gap:22px!important}
.tm-video-reel-row{gap:18px!important}

html body #portfolio .tm-video-row>.portfolio-video-card{
  display:block!important;
  min-width:0!important;
  margin:0!important;
  break-inside:auto!important;
  -webkit-column-break-inside:auto!important;
  grid-column:auto!important;
  grid-row:auto!important;
  position:relative!important;
  z-index:2!important;
}
/* Desktop contract */
html body #portfolio .tm-video-wide-row>.portfolio-video-card{
  flex:0 0 calc((100% - 44px)/3)!important;
  width:calc((100% - 44px)/3)!important;
  max-width:calc((100% - 44px)/3)!important;
}
html body #portfolio .tm-video-reel-row>.portfolio-video-card{
  flex:0 0 calc((100% - 54px)/4)!important;
  width:calc((100% - 54px)/4)!important;
  max-width:calc((100% - 54px)/4)!important;
}

/* Never place the portfolio cutoff fog on top of video. */
html body #portfolio #work-video .discipline-fog,
html body #portfolio #work-motion .discipline-fog{display:none!important}
html body #portfolio #work-video .discipline-more-wrap,
html body #portfolio #work-motion .discipline-more-wrap{
  position:relative!important;
  z-index:500!important;
  margin-top:24px!important;
  pointer-events:auto!important;
  isolation:isolate!important;
}
html body #portfolio #work-video .discipline-more,
html body #portfolio #work-motion .discipline-more{
  position:relative!important;
  z-index:501!important;
  pointer-events:auto!important;
  cursor:pointer!important;
}

/* Card / player surface */
html body #portfolio .portfolio-video-card .video-preview,
html body #portfolio .portfolio-video-card .tm-video-stage{
  -webkit-appearance:none!important;
  appearance:none!important;
  position:relative!important;
  display:block!important;
  width:100%!important;
  max-width:none!important;
  padding:0!important;
  overflow:hidden!important;
  isolation:isolate!important;
  border-radius:18px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  background:#07070a!important;
  box-shadow:0 14px 34px rgba(0,0,0,.19)!important;
}
html body #portfolio .portfolio-video-card .video-preview{
  cursor:pointer!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
}
html body #portfolio .portfolio-video-card .tm-video-stage{
  cursor:pointer!important;
  touch-action:manipulation!important;
}
html body #portfolio .portfolio-video-card .video-preview[data-video-format="wide"],
html body #portfolio .portfolio-video-card .tm-video-stage[data-video-format="wide"]{aspect-ratio:16/9!important}
html body #portfolio .portfolio-video-card .video-preview[data-video-format="vertical"],
html body #portfolio .portfolio-video-card .tm-video-stage[data-video-format="vertical"]{aspect-ratio:9/16!important}

/* Exactly one visual preview. No side blur, duplicate backing image or letterbox helper. */
html body #portfolio .portfolio-video-card .video-preview img,
html body #portfolio .portfolio-video-card .tm-video-poster{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:inherit!important;
  opacity:1!important;
  visibility:visible!important;
  filter:none!important;
  -webkit-filter:none!important;
  transform:none!important;
  background:transparent!important;
}
html body #portfolio .portfolio-video-card .video-card-shade,
html body #portfolio .portfolio-video-card .video-kind,
html body #portfolio .portfolio-video-card .video-blur,
html body #portfolio .portfolio-video-card .video-backdrop,
html body #portfolio .portfolio-video-card .video-preview-backdrop,
html body #portfolio .portfolio-video-card [class*="watermark"],
html body #portfolio .portfolio-video-card .video-youtube-corner-cover{
  display:none!important;
}
html body #portfolio .portfolio-video-card .video-preview:before,
html body #portfolio .portfolio-video-card .tm-video-stage:before{
  content:none!important;
  display:none!important;
}

/* One Techmen watermark only. It also occupies YouTube's bottom-right branding area. */
html body #portfolio .portfolio-video-card .video-preview:after,
html body #portfolio .portfolio-video-card .tm-video-stage:after{
  content:"TECHMEN AGENCY"!important;
  position:absolute!important;
  z-index:90!important;
  right:7px!important;
  bottom:7px!important;
  top:auto!important;
  left:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:104px!important;
  height:27px!important;
  box-sizing:border-box!important;
  padding:0 8px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.18)!important;
  background:rgba(7,7,10,.94)!important;
  color:#fff!important;
  font:800 5.2px/1 Montserrat,Arial,sans-serif!important;
  letter-spacing:.105em!important;
  white-space:nowrap!important;
  opacity:.90!important;
  pointer-events:none!important;
  transform:none!important;
  filter:none!important;
  animation:none!important;
  mix-blend-mode:normal!important;
}

/* Initial play button */
html body #portfolio .portfolio-video-card .video-play{
  position:absolute!important;
  z-index:35!important;
  left:50%!important;
  top:50%!important;
  width:41px!important;
  height:41px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  transform:translate(-50%,-50%)!important;
  background:linear-gradient(135deg,#8149ff 0%,#b456f3 52%,#ff7a18 100%)!important;
  border:1px solid rgba(255,255,255,.55)!important;
  box-shadow:0 12px 30px rgba(0,0,0,.30),0 0 26px rgba(180,86,243,.22)!important;
  pointer-events:none!important;
  transition:transform .18s ease,box-shadow .18s ease!important;
}
html body #portfolio .portfolio-video-card .video-play i{
  width:0!important;
  height:0!important;
  margin-left:2px!important;
  border-top:5px solid transparent!important;
  border-bottom:5px solid transparent!important;
  border-left:9px solid #fff!important;
}
@media(hover:hover){
  html body #portfolio .portfolio-video-card .video-preview:hover .video-play{
    transform:translate(-50%,-50%) scale(1.06)!important;
    box-shadow:0 14px 34px rgba(0,0,0,.34),0 0 32px rgba(180,86,243,.30)!important;
  }
}

/* YouTube is transport only. Visitors never interact with YouTube's iframe chrome. */
.tm-youtube-shell,
.tm-youtube-player,
.tm-youtube-shell iframe{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  border:0!important;
  display:block!important;
  background:#050507!important;
}
.tm-youtube-shell{
  z-index:4!important;
  overflow:hidden!important;
  opacity:0!important;
  visibility:hidden!important;
  transition:opacity .18s ease!important;
}
.tm-youtube-shell iframe{
  pointer-events:none!important;
  filter:none!important;
  -webkit-filter:none!important;
}
.tm-video-poster{
  z-index:25!important;
  pointer-events:none!important;
  transition:opacity .18s ease!important;
}
html body #portfolio .portfolio-video-card .tm-video-stage.is-playing .tm-youtube-shell{opacity:1!important;visibility:visible!important}
html body #portfolio .portfolio-video-card .tm-video-stage.is-playing .tm-video-poster{opacity:0!important;visibility:hidden!important}
html body #portfolio .portfolio-video-card .tm-video-stage.is-covered .tm-youtube-shell,
html body #portfolio .portfolio-video-card .tm-video-stage.is-loading .tm-youtube-shell{opacity:0!important;visibility:hidden!important}
html body #portfolio .portfolio-video-card .tm-video-stage.is-covered .tm-video-poster,
html body #portfolio .portfolio-video-card .tm-video-stage.is-loading .tm-video-poster{opacity:1!important;visibility:visible!important}

.tm-video-loading{
  position:absolute!important;
  z-index:48!important;
  left:50%!important;
  top:50%!important;
  width:24px!important;
  height:24px!important;
  margin:-12px 0 0 -12px!important;
  border-radius:50%!important;
  border:2px solid rgba(255,255,255,.22)!important;
  border-top-color:#fff!important;
  animation:tmVideoSpinV30 .72s linear infinite!important;
  pointer-events:none!important;
}
.tm-video-stage:not(.is-loading) .tm-video-loading{display:none!important}
@keyframes tmVideoSpinV30{to{transform:rotate(360deg)}}

/* Modern custom control */
.tm-video-control{
  position:absolute!important;
  z-index:100!important;
  left:9px!important;
  bottom:9px!important;
  width:34px!important;
  height:34px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.25)!important;
  border-radius:50%!important;
  background:rgba(7,7,10,.76)!important;
  color:#fff!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  -webkit-backdrop-filter:blur(8px)!important;
  backdrop-filter:blur(8px)!important;
  box-shadow:0 6px 18px rgba(0,0,0,.23)!important;
  transition:transform .15s ease,background .15s ease,border-color .15s ease,opacity .15s ease!important;
}
.tm-video-control:hover{transform:scale(1.055)!important;background:rgba(7,7,10,.91)!important;border-color:rgba(255,255,255,.39)!important}
.tm-video-control:disabled{cursor:wait!important;opacity:.46!important}
.tm-video-control svg{width:15px!important;height:15px!important;display:block!important;fill:currentColor!important}

html body #portfolio .tm-video-row .portfolio-video-card figcaption{margin-top:9px!important}

@media(max-width:1000px) and (min-width:701px){
  .tm-video-wide-row,.tm-video-reel-row{gap:18px!important}
  html body #portfolio .tm-video-wide-row>.portfolio-video-card{flex:0 0 calc((100% - 18px)/2)!important;width:calc((100% - 18px)/2)!important;max-width:calc((100% - 18px)/2)!important}
  html body #portfolio .tm-video-reel-row>.portfolio-video-card{flex:0 0 calc((100% - 54px)/4)!important;width:calc((100% - 54px)/4)!important;max-width:calc((100% - 54px)/4)!important}
}
@media(max-width:700px){
  .tm-video-wide-row{gap:20px!important}.tm-video-reel-row{gap:12px!important}
  html body #portfolio .tm-video-wide-row>.portfolio-video-card{flex:0 0 100%!important;width:100%!important;max-width:100%!important}
  html body #portfolio .tm-video-reel-row>.portfolio-video-card{flex:0 0 calc((100% - 12px)/2)!important;width:calc((100% - 12px)/2)!important;max-width:calc((100% - 12px)/2)!important}
  .tm-video-group+.tm-video-group{margin-top:28px!important;padding-top:20px!important}
  html body #portfolio .portfolio-video-card .video-preview,
  html body #portfolio .portfolio-video-card .tm-video-stage{border-radius:15px!important}
  html body #portfolio .portfolio-video-card .video-play{width:38px!important;height:38px!important}
  html body #portfolio .portfolio-video-card .video-preview:after,
  html body #portfolio .portfolio-video-card .tm-video-stage:after{
    right:6px!important;bottom:6px!important;width:96px!important;height:25px!important;font-size:5px!important;
  }
  .tm-video-control{left:7px!important;bottom:7px!important;width:33px!important;height:33px!important}
}
@media(prefers-reduced-motion:reduce){
  .tm-youtube-shell,.tm-video-poster,.tm-video-control,.video-play{transition:none!important}
  .tm-video-loading{animation:none!important}
}
/* v38: vertical framing, top-right Techmen mark, real center play/pause control */
html body #portfolio .portfolio-video-card .video-preview:after,html body #portfolio .portfolio-video-card .tm-video-stage:after{top:7px!important;right:7px!important;bottom:auto!important;left:auto!important}
html body #portfolio .portfolio-video-card [data-video-format="vertical"] img,html body #portfolio .portfolio-video-card .tm-video-stage[data-video-format="vertical"] .tm-video-poster{width:100%!important;height:100%!important;object-fit:cover!important;object-position:50% 50%!important;transform:none!important;filter:none!important}
.tm-video-center-control{position:absolute!important;z-index:110!important;left:50%!important;top:50%!important;width:46px!important;height:46px!important;display:grid!important;place-items:center!important;padding:0!important;border-radius:50%!important;border:1px solid rgba(255,255,255,.52)!important;background:rgba(7,7,10,.76)!important;color:#fff!important;cursor:pointer!important;transform:translate(-50%,-50%)!important;box-shadow:0 12px 30px rgba(0,0,0,.30)!important;-webkit-backdrop-filter:blur(8px)!important;backdrop-filter:blur(8px)!important;opacity:1!important;transition:opacity .18s ease,transform .18s ease,background .18s ease!important}
.tm-video-center-control svg{width:18px!important;height:18px!important;display:block!important;fill:currentColor!important}.tm-video-center-control:disabled{opacity:.38!important;cursor:wait!important}.tm-video-stage.is-playing .tm-video-center-control{opacity:.24!important}.tm-video-stage.is-playing:hover .tm-video-center-control,.tm-video-stage.is-playing:focus-within .tm-video-center-control{opacity:.94!important}.tm-video-center-control:hover{background:rgba(7,7,10,.94)!important;transform:translate(-50%,-50%) scale(1.06)!important}
@media(max-width:700px){html body #portfolio .portfolio-video-card .video-preview:after,html body #portfolio .portfolio-video-card .tm-video-stage:after{top:6px!important;right:6px!important;bottom:auto!important}.tm-video-center-control{width:42px!important;height:42px!important}.tm-video-stage.is-playing .tm-video-center-control{opacity:.42!important}}

/* v39: AI reels use the same dedicated player layout; landscape playback gently expands. */
html body #portfolio #work-ai .discipline-grid.tm-video-layout-ready{display:block!important;width:100%!important;max-width:none!important;columns:auto!important;column-count:initial!important;column-gap:0!important}
html body #portfolio #work-ai .discipline-grid.tm-video-layout-ready>.stable-masonry-column{display:none!important}
html body #portfolio #work-ai .discipline-fog{display:none!important}
html body #portfolio #work-ai .discipline-more-wrap{position:relative!important;z-index:500!important;margin-top:24px!important;pointer-events:auto!important;isolation:isolate!important}
html body #portfolio #work-ai .discipline-more{position:relative!important;z-index:501!important;pointer-events:auto!important;cursor:pointer!important}
html body #portfolio .portfolio-video-card{overflow:visible!important}
html body #portfolio .portfolio-video-card .tm-video-stage[data-video-format="wide"]{transition:transform .26s cubic-bezier(.2,.72,.22,1),box-shadow .26s ease!important;transform-origin:center center!important}
@media(min-width:701px){html body #portfolio .portfolio-video-card .tm-video-stage[data-video-format="wide"].is-playing{transform:scale(1.055)!important;z-index:140!important;box-shadow:0 22px 52px rgba(0,0,0,.30),0 0 0 1px rgba(160,105,255,.12)!important}}
@media(max-width:700px){html body #portfolio .portfolio-video-card .tm-video-stage[data-video-format="wide"].is-playing{transform:scale(1.018)!important}}

/* v41: conflict-free playback and presentation polish */
html body #portfolio .portfolio-video-card:has(.tm-video-stage[data-video-format="wide"].is-playing){z-index:220!important}
html body #portfolio .portfolio-video-card .tm-video-stage[data-video-format="wide"].is-playing{transform:scale(1.075)!important;z-index:220!important;box-shadow:0 28px 70px rgba(0,0,0,.34),0 0 0 1px rgba(160,105,255,.16)!important}
.tm-video-center-control{z-index:1000!important;pointer-events:auto!important}
.tm-video-stage.is-playing .tm-video-center-control{opacity:.72!important}
.tm-video-stage.is-playing:hover .tm-video-center-control,.tm-video-stage.is-playing:focus-within .tm-video-center-control{opacity:1!important}
@media(max-width:700px){html body #portfolio .portfolio-video-card .tm-video-stage[data-video-format="wide"].is-playing{transform:scale(1.025)!important}.tm-video-stage.is-playing .tm-video-center-control{opacity:.82!important}}